@charset "UTF-8";
/* CSS Document */
/*---------------------------------

  mainvisual

---------------------------------*/
#mainvisual {
  margin: 0 auto;
  max-width: calc(var(--mainWidth) + 15%);
  padding: 6rem 0 3rem;
  position: relative;
}
#mainvisual .slider {
  max-width: 831px;
  position: absolute;
  top: 0;
  right: 0;
}
#mainvisual .slider img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#mainvisual .slider .swiper {
  width: min(100%);
  margin-inline: auto;
  padding: 13rem 0 18rem;
}
.swiper-slide-active {
  box-shadow: 0 2rem 5rem 0 rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.6) !important;
}
.swiper-slide-next, .swiper-slide-prev {
  opacity: .4;
}
.progressbar {
  position: relative;
  width: 10rem;
  height: 7px;
  margin-top: 10rem;
  background: #ccc;
  border-radius: 7px;
  overflow: hidden;
}
.progressbar span {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fbca5a;
  border-radius: 7px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-timing-function: linear;
}
/* 直線長方形のプログレスバー */
.swiper-pagination {
  bottom: 5rem !important;
}
.swiper-pagination-bullet {
  border: 1px solid #e6e6e6 !important;
  border-radius: 5rem !important;
  position: relative !important;
  width: 9px !important;
  height: 9px !important;
  background-color: #fff !important;
  opacity: 1 !important;
  margin: 0 2px !important;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.swiper-pagination-bullet-active {
  width: 60px !important;
}
.swiper-pagination-bullet::before {
  border-radius: 5rem;
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--col-bg);
}
.swiper-pagination-bullet-active::before {
  animation: paginationActive 7s linear forwards;
}
@keyframes paginationActive {
  100% {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  #mainvisual {
    padding: 32rem 0 0;
  }
}
@media screen and (max-width: 896px) {
  #mainvisual {
    padding: 30rem 0 0;
  }
  #mainvisual .slider {
    max-width: 650px;
    top: 6rem;
  }
  #mainvisual .slider .swiper {
    padding: 8rem 0 15rem;
  }
}
@media screen and (max-width: 480px) {
  #mainvisual {
    padding: 7rem 0 0;
  }
  #mainvisual .slider {
    max-width: 43rem;
    margin: auto;
    position: static;
    top: auto;
    right: auto;
    width: 100%;
  }
  #mainvisual .slider .swiper {
    padding: 6rem 0 10rem;
  }
  .swiper-slide-active {
    box-shadow: 0 2rem 3rem 0 rgba(0, 0, 0, 0.1) !important;
  }
  .swiper-pagination {
    bottom: 2rem !important;
  }
}
/*---------------------------------
  copy
---------------------------------*/
#mainvisual .copy {
  margin: 0;
  margin-left: 7.5%;
  max-width: fit-content;
  pointer-events: none;
  /*position: absolute;
  top: 0;
  left: 5%;*/
  position: relative;
  z-index: 99;
}
#mainvisual .copy ._box {
  border: 1px solid;
  border-radius: 5rem;
  color: var(--col-bg);
  font-size: 2rem;
  font-weight: 800;
  max-width: fit-content;
  padding: .2rem 1.5rem;
}
#mainvisual .copy h2 {
  font-size: 5rem;
  font-weight: 500;
  line-height: 1.4;
  margin: .5rem 0 2rem;
}
#mainvisual .copy h2 span {
  background: linear-gradient(transparent 75%, rgba(255, 225, 0, 0.5) 75%);
}
#mainvisual .copy h2 strong {
  color: var(--col-bg);
  font-weight: 500;
}
#mainvisual .copy .txt {
  font-weight: 500;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#mainvisual .copy .btn {
  pointer-events: auto;
  margin: 2rem 0 0;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  #mainvisual .copy {
    margin-left: 5%;
    z-index: 1;
  }
  #mainvisual .copy h2 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 480px) {
  #mainvisual .copy {
    pointer-events: auto;
    margin: 2rem auto;
    width: 90%;
  }
  #mainvisual .copy ._box {
    font-size: 1.6rem;
    padding: .2rem 1.5rem;
  }
  #mainvisual .copy h2 {
    font-size: 3rem;
  }
  #mainvisual .copy .btn {
    margin: 2rem auto 0;
  }
}
/*---------------------------------

  共通

---------------------------------*/
section .title {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  position: relative;
  text-align: center;
}
section .title h2 {
  font-size: 4.8rem;
  font-weight: 900;
}
section .title::after {
  background: linear-gradient(-90deg, #FFE100 0%, #FFE100 25%, #00AFC0 75%, #00AFC0 100%);
  content: '';
  margin: auto;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 8rem;
  height: .4rem;
}
section .content-Wrap .txt {
  font-weight: 500;
  line-height: 1.8;
  text-align: justify;
}
section .content-Wrap .txt p + p {
  margin-top: .5em;
}
section .content-Wrap figure img {
  max-width: 100%;
  vertical-align: bottom;
}
@media screen and (max-width: 1024px) {
  section .title {
    padding-bottom: 2rem;
  }
  section .title h2 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 896px) {
  section {
    padding: 6rem 0;
  }
  section .title {
    padding-bottom: 1.5rem;
  }
  section .title h2 {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 480px) {
  section {
    padding: 4rem 0;
  }
  section .title {
    margin-bottom: 2rem;
  }
  section .title h2 {
    font-size: 2.8rem;
  }
}
/*---------------------------------

  リリースノート

---------------------------------*/
.newsBlock {}
.newsBlock .l-inner {
  background: #fff;
  border-radius: 2rem;
  padding: 3.5rem 5rem;
}
.newsBlock .wrap {
  display: flex;
  gap: 6.5rem;
}
.newsBlock .wrap .ttlBox {
  flex: 0 0 auto;
}
.newsBlock .wrap .ttlBox ._en {
  color: var(--col-bg);
  font-size: 2.5rem;
  font-weight: 700;
}
.newsBlock .wrap .ttlBox h2 {
  color: #7f7f7f;
  font-size: 1.4rem;
  font-weight: 600;
}
.newsBlock .wrap .infoBox {
  flex: 1 1 auto;
}
.newsBlock .wrap .infoBox ._infoList {
  list-style: none;
}
.newsBlock .wrap .infoBox ._infoList li {
  border-bottom: 1px solid #ddd;
  display: flex;
  gap: 4.5rem;
  padding: 1.5rem 0;
}
.newsBlock .wrap .infoBox ._infoList li:not(:last-child) {}
.newsBlock .wrap .infoBox ._infoList li time {
  color: #6D6865;
}
.newsBlock .wrap .infoBox ._infoList li p {
  font-weight: 500;
}
.newsBlock .wrap .infoBox ._infoList li p a {
  color: var(--col-de);
  display: inline-block;
  text-decoration: underline;
}
.newsBlock .wrap .infoBox ._infoList li p a:hover {
  color: var(--col-bl);
  text-decoration: none;
}
.newsBlock .wrap .infoBox ._more {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.newsBlock .wrap .infoBox ._more a {
  color: var(--col-de);
  display: block;
  font-size: .9em;
  font-weight: 500;
  line-height: 1;
}
.newsBlock .wrap .infoBox ._more a span {
  background: url("../images/arrow_next.svg") no-repeat center right .5rem/1rem;
  display: inline-block;
  padding-right: 2rem;
  transition: all .3s;
}
.newsBlock .wrap .infoBox ._more a:hover span {
  background-position: center right 0rem;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .newsBlock .wrap {
    flex-direction: column;
    gap: 2rem;
  }
  .newsBlock .l-inner {
    padding: 2.5rem;
  }
}
@media screen and (max-width: 480px) {
  .newsBlock .l-inner {
    box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.05);
  }
  .newsBlock .wrap .infoBox ._infoList li {
    gap: 2rem;
    padding: 1.5rem 0;
  }
}
/*---------------------------------

  EneiRuについて

---------------------------------*/
.aboutBlock {
  background: rgba(0, 175, 192, 0.10);
}
.aboutBlock .txt {
  margin: 2rem auto;
  max-width: var(--txtWidth);
}
.aboutBlock .imgBox {
  margin: 7rem auto 5rem;
  max-width: 99rem;
}
.aboutBlock .imgBox h3 {
  color: var(--col-bg);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-align: center;
}
.aboutBlock .imgBox figure {}
.aboutBlock .featuresBox {
  margin: 5rem auto 8rem;
}
.aboutBlock .featuresBox h3 {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1.2;
  margin: 0 auto 2.5rem;
  max-width: fit-content;
  text-align: center;
}
.aboutBlock .featuresBox h3::before, .aboutBlock .featuresBox h3::after {
  background: var(--col-bg);
  border-radius: 50%;
  content: '';
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}
.aboutBlock .featuresBox h3::before {}
.aboutBlock .featuresBox h3::after {}
.aboutBlock .featuresBox .wrap {
  display: flex;
  gap: 3rem;
}
.aboutBlock .featuresBox .wrap ._box {
  background: #fff;
  border-radius: 1.6rem;
  flex-basis: calc(100%/3);
  padding: 3rem;
}
.aboutBlock .featuresBox .wrap ._box dt {
  border-bottom: 1px solid #E6E6E6;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  text-align: center;
}
.aboutBlock .featuresBox .wrap ._box dt h4 {
  color: var(--col-bg);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.5;
}
.aboutBlock .featuresBox .wrap ._box dd.txt {
  font-weight: 500;
  text-align: left;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .aboutBlock .imgBox {
    margin: 5rem auto 4rem;
  }
  .aboutBlock .imgBox h3 {
    font-size: 2rem;
  }
  .aboutBlock .featuresBox {
    margin: 4rem 0;
  }
  .aboutBlock .featuresBox h3 {
    gap: 2rem;
    font-size: 2.8rem;
    margin: 0 auto 2rem;
  }
  .aboutBlock .featuresBox h3::before, .aboutBlock .featuresBox h3::after {
    width: 1.4rem;
    height: 1.4rem;
  }
  .aboutBlock .featuresBox .wrap {
    flex-direction: column;
    gap: 1.5rem;
  }
  .aboutBlock .featuresBox .wrap ._box {
    padding: 2.5rem;
  }
  .aboutBlock .featuresBox .wrap ._box dt h4 {
    font-size: 1.8rem;
  }
  .aboutBlock .featuresBox .wrap ._box dt h4 br {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .aboutBlock .featuresBox .wrap ._box dt h4 br {
    display: block;
  }
}
/*---------------------------------

  ご利用ケース

---------------------------------*/
.caseBlock {
  background: rgba(255, 255, 255, 0.70);
}
.caseBlock .content-Wrap {
  margin-bottom: 8rem;
}
.caseBlock .tab-wrap {
  display: flex;
  justify-content: space-between;
}
.caseBlock .tab-list {
  border-top: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  flex: 0 0 18rem;
  list-style: none;
}
.caseBlock .tab-list .tab-item {
  border-bottom: 1px solid #e6e6e6;
  padding: 2rem 1rem;
  background-color: #fff;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: .4s ease-in-out;
}
.caseBlock .tab-list .tab-item.is-active {
  background: var(--col-y);
}
.caseBlock .panel-list {
  flex: 1 1 auto;
}
.caseBlock .panel-item ._inner {
  padding: 0;
  padding-left: 3rem;
}
.caseBlock .panel-item .ttl {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}
.caseBlock .panel-item .ttl span {
  border: 1px solid;
  border-radius: 5rem;
  color: var(--col-bg);
  display: inline-block;
  font-weight: 600;
  flex: 0 0 auto;
  padding: .2rem 1.5rem;
}
.caseBlock .panel-item .ttl h3 {
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1.3;
}
.caseBlock .panel-item .txt {
  margin: 3rem auto 5rem;
  min-height: 8.639rem;
}
@media screen and (max-width: 1024px) {
  .caseBlock .tab-list {
    flex: 0 0 14rem;
  }
}
@media screen and (max-width: 896px) {
  .caseBlock .content-Wrap {
    margin-bottom: 5rem;
  }
  .caseBlock .tab-list {
    flex: 0 0 10rem;
  }
}
@media screen and (max-width: 480px) {
  .caseBlock .content-Wrap {}
  .caseBlock .tab-wrap {
    display: block;
  }
  .caseBlock .tab-list {
    display: flex;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    border-right: none;
    list-style: none;
  }
  .caseBlock .tab-list .tab-item {
    flex-basis: calc(100%/3);
    border-bottom: none;
    padding: 1rem 0rem;
  }
  .caseBlock .tab-list .tab-item:not(:last-child) {
    border-right: 1px solid #e6e6e6;
  }
  .caseBlock .tab-list .tab-item.is-active {}
  .caseBlock .panel-list {}
  .caseBlock .panel-item ._inner {
    padding: 2rem 0 0;
  }
  .caseBlock .panel-item .ttl {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1.5rem;
  }
  .caseBlock .panel-item .txt {
    margin: 1.5rem auto 3rem;
  }
}
/*---------------------------------
  パネルの表示非表示
---------------------------------*/
.panel-item {
  display: none;
  width: 100%;
}
.panel-item.is-active {
  display: block;
  animation: panel-show .9s ease-in-out forwards;
}
/* パネル切り替えのアニメーション */
@keyframes panel-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*---------------------------------

  料金体系

---------------------------------*/
.priceBlock {
  background: rgba(235, 253, 255, 0.80);
}
.priceBlock .txt {
  margin: auto;
  max-width: var(--txtWidth);
}
.priceBlock figure {
  margin: 4rem auto;
  max-width: 80rem;
}
.priceBlock .wrap {
  display: flex;
  gap: 3rem;
}
.priceBlock .wrap ._box {
  background: #fff;
  border-radius: 1.6rem;
  flex-basis: calc(100%/2);
  padding: 3rem;
}
.priceBlock .wrap ._box dt {}
.priceBlock .wrap ._box dt h3 {
  color: var(--col-bg);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {
  .priceBlock .wrap {
    gap: 1rem;
  }
  .priceBlock .wrap ._box {
    padding: 2rem;
  }
  .priceBlock .wrap ._box dt h3 {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 480px) {
  .priceBlock .wrap {
    flex-direction: column;
  }
  .priceBlock .wrap ._box {
    padding: 2rem;
  }
}
/*---------------------------------

  お問い合わせ

---------------------------------*/
.contactBlock {
  background: linear-gradient(135deg, #00AFC0 25%, #81c85f 100%);
}
.contactBlock h2 {
  color: #fff;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 2rem;
  text-align: center;
}
.contactBlock h2 span {
  display: inline-block;
}
.contactBlock .btn a {
  background: #fff;
}
.contactBlock .btn a span {
  background-image: url("../images/i_mail_b.svg");
}
.contactBlock .btn a strong {
  background: linear-gradient(135deg, #00AFC0 25%, #81c85f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 896px) {}
@media screen and (max-width: 480px) {
  .contactBlock h2 {
    font-size: 2.3rem;
  }
}