@charset "utf-8";

/*-----------------------------------------------------------
    トップページ
-----------------------------------------------------------*/
.top-mv{
  height: 100vh;
  overflow: hidden;
}
.top-mv .inner{
  position: relative;
  height: 100%;
}
.top-mv .inner .top{
  position: absolute;
  top: 50px;
  right: -220px;
  z-index: 0;
  transform: translateY(100px);
}
.top-mv .inner .bottom{
  padding-bottom: 7rem;
  position: relative;
}
.top-mv .inner .bottom .img{
  opacity: 0;
  transform: translateY(100px);
}
.top-mv .inner .bottom .txt{
  opacity: 0;
  transform: translateY(100px);
}
.top-mv .inner .bottom .txt h3:last-child{
  margin-top: -2rem;
  margin-bottom: 2rem;
}
.top-mv .inner .top{
  opacity: 0;
}
.top-mv .inner .top img{
  animation: swing 10s cubic-bezier(0.46, 0.32, 0.62, 0.84) infinite;
}
@keyframes swing {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(15px);
  }
  75% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
@media screen and (min-width: 1500px) {
  .top-mv .inner .top{
    width: 100%;
    height: 100%;
    right: -600px;
  }
}
@media screen and (max-width: 768px) {
  .top-mv{
    height: 100dvh;
  }
  .top-mv .inner .top {
    top: -10px;
    right: -130px;
  }
}



.fv-app .img{
  max-width: 828px;
  height: 100%;
  margin: 0 auto;
}
.fv-app .img img{
  box-shadow: 15px 15px 16px #00000015;
  border-radius: 20px;
  transition: ease .3s;
}
.fv-app .img img:hover{
  transform: scale(1.05);
  transition: ease .3s;
}

.top-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4rem;
}
.top-title h3{
  margin-top: -7rem;
}
.top-title .small-txt{
  margin-top: -2rem;
}
.top-features {
  background: #fff;
  border-radius: 70px;
  padding-bottom: 12rem;
}

.txt-three-block{
  margin-bottom: 4rem;
  gap: 3rem;
  justify-content: center;
}

.txt-three-block .block{
  background: #F7F9FC;
  padding: 6rem 3.5rem;
  padding-top: 7rem;
  border-radius: 10px;
  position: relative;
}
.txt-three-block .block .title{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.txt-three-block .block .ja{
  font-size: clamp(3rem, 7vw, 9.5rem);
  color: #E2E9F2;
  position: absolute;
  width: 100%;
  left: 0;
  top: -30px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.txt-three-block .block .title h4{
  font-weight: 800;
  font-size: 4rem;
  color: var(--main-color);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1rem;
}
.txt-three-block .block .txt{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.txt-three-block .block .txt h5{
  font-weight: 600;
  font-size: 2rem;
  color: var(--main-color);
  border-bottom: 2px solid #E4EA7C;
  margin-bottom: 2.3rem;
}
.txt-three-block .block .txt p{
  font-weight: 400;
  color: var(--text-color);
  line-height: 1.8;
  max-width: 310px;
}

.fv-app{
  padding-bottom: 12rem;
}

/* .top-work{
  margin-top: 10rem;
  background-image: url(../img/top/top-work-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 12rem 0;
} */
.top-work{
  margin-top: 10rem;
  background: var(--gd-color);
  padding: 12rem 0;
}
.top-work .graph-slide-wrap{
  overflow: hidden;
  margin-left: 4%;
  padding-bottom: 3rem;
}
.top-work .btn{
  margin-top: 6rem;
}
.top-work .graph-slide-item{
  max-width: 100%;
  min-width: 100%;
}
.top-work .button-wrap{
  position: relative;
  height: 6rem;
  display: flex;
  margin-right: 4%;
  justify-content: flex-start;
  gap: 3rem;
  margin-bottom: 2rem;
}
.top-work .button-wrap .arrow {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 90%;
}

.top-work .button-wrap .arrow::before,
.top-work .button-wrap .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background: var(--accent-color);
  transform-origin: 1px 50%;
  transition: all linear 0.3s;
}
.top-work .button-wrap .arrow::before {
  transform: rotate(40deg);
}
.top-work .button-wrap .arrow::after {
  transform: rotate(-40deg);
}
.top-work .button-wrap .swiper-button-next .arrow::before,
.top-work .button-wrap .swiper-button-next .arrow::after {
  right: 0;
  transform-origin: calc(100% - 1px) 50%;
}
.top-glaph-slider .button-wrap .slider-button{
  content: "";
  width: 6rem;
  height: 6rem;
  border: solid 1px #fff;
  background: var(--accent-color4);
  border-radius: 50%;
  margin: 0;
  top: auto;
  position: relative;
  right: auto;
  left: auto;
  transition: all linear 0.3s;
}
.top-glaph-slider .button-wrap .slider-button:nth-child(1)::after{
  content: "";
}
.top-glaph-slider .button-wrap .slider-button:nth-child(2)::after{
  content: "";
}
.top-glaph-slider .button-wrap .slider-button:hover{
  background: var(--accent-color);
  transition: all linear 0.3s;
}
.top-glaph-slider .button-wrap .slider-button:hover .arrow::before,
.top-glaph-slider .button-wrap .slider-button:hover .arrow::after{
  background: #fff;
  transition: all linear 0.3s;
}
.top-flow .bg-white{
  padding-bottom: 12rem;
}
.top-flow .flow-list{
  padding: 0 4%;
  gap: 5rem;
  justify-content: center;
  position: relative;
}
.top-flow .flow-list .flow-list-item {
  max-width: 225px;
}
.top-flow .flow-list .flow-list-item .flow-list-item__items{
  border-radius: 100%;
  aspect-ratio: 1/1;
  border: 2px solid var(--main-color);
  position: relative;
  justify-content: center;
  margin-bottom: 2.5rem;
  background: #fff;
}
.top-flow .flow-list .flow-list-item .flow-list-item__items .number{
  width: 57px;
  height: 58px;
  background:var(--gd-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 600;
  position: absolute;
  left: 8px;
  top: 8px;
}
.top-flow .top-title{
  margin-bottom: 2rem;
}
.flow-bubble span.f-bold{
  font-weight: 600;
  padding: 0 2px;
}

.top-flow .flow-arrow {
  display: inline-block;
  width: 90%;
  position: absolute;
  height: 2px;
  background: var(--main-color);
  top: 110px;
}
.top-flow .flow-list-item .number .flow-arrow{
  display: none;
}
.top-flow .flow-arrow::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  border-style: solid;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid var(--main-color);
  border-right: 0;
}
.top-flow .btn{
  margin-top: 7rem;
}
.top-flow-txt-section{
  overflow: hidden;
  margin-top: 12rem;
  margin-bottom: 12rem;
}
.top-flow-txt-section .target1{
  width: 200vw;
}
.top-news{
  padding-bottom: 10rem;
}
.top-news .top-title{
  align-items: flex-start;
}
.top-news-list .top-news-list-item{
  margin-bottom: 2rem;
}
.top-news-list .top-news-list-item a{
  background: #F7F9FC;
  padding: 4rem;
  border-radius: 20px;
  position: relative;
  transition: all linear 0.1s;
  gap: 4.5rem;
}
.top-news-list .top-news-list-item a:hover{
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  transition: all linear 0.1s;
}

.top-news-list .top-news-list-item a .day{
  color: #151B1C;
  min-width: 115px;
}
.top-news-list .top-news-list-item a .arrow {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 2px;
  margin: 2.9px 0;
  border-radius: 9999px;
  background: var(--main-color);
}

.top-news-list .top-news-list-item a .arrow::before,
.top-news-list .top-news-list-item a .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 6px;
  height: 2px;
  border-radius: 9999px;
  background: var(--main-color);
  transform-origin: calc(100% - 1px) 50%;
}
.top-news-list .top-news-list-item a .ball{
  width: 42px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #DBE0E8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.5rem;
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
}
.top-news-list .top-news-list-item a .arrow::before {
  transform: rotate(45deg);
}

.top-news-list .top-news-list-item a .arrow::after {
  transform: rotate(-45deg);
}

.top-bottom-bg{
  background-image: url(../img/top/top-bottom-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 646px;
  width: 100%;
}

/* ------------------------------------------------------------
    下層ページ共通
------------------------------------------------------------*/
.sub-fv .title{
  margin-top: 8.5rem;
}
.sub-fv .title h2{
  margin-top: -1rem;
}
.sub-fv .clumb-block{
  margin-top: 5rem;
  font-size: 1.4rem;
  margin-bottom: 3rem;
}
.sub-fv .clumb-block-list li{
  padding-right: 2rem;
  position: relative;
}
.sub-fv .clumb-block-list li:not(:last-child)::before{
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 1px;
  background: #7E8080;
}
.sub-fv .clumb-block-list li a{
  color:#7E8080;
}
.sub-fv .clumb-block-list{
  flex-wrap: wrap;
}
/* ------------------------------------------------------------
    エネルギーマネジメント事業について
------------------------------------------------------------*/
.energie-catch p{
  margin-top: 2rem;
}
.section .title {
  font-size: 8vw;
}

.energie-introduction .wrap {
  position: relative;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 80px;
}

/* .energie-introduction .text-wrap > * + * {
  margin-top: 200px;
} */
.energie-introduction .text-body{
  padding: 20rem 0;
  border-bottom: 1px solid #C7D8EF;
}
.energie-introduction .text-body:last-child{
  border-bottom: none;
}
.energie-introduction .text-body .mini-title{
  background: var(--gd-color);
  color: #fff;
  padding: 0 1rem;
  width: fit-content;
  display: inline-block;
  margin-bottom: 2rem;
  font-weight: 500;
}
.energie-introduction .text-body h4{
  line-height: 1.5;
  margin-bottom: 2rem;
}
.energie-introduction .text-body h4 span{
    will-change: transform;
    display: inline-block;
}
.energie-introduction .text-body h2 {
  font-size: 32px;
}
.energie-introduction .text-body p{
  font-size: 2rem;
}
.energie-introduction .text-body p:not(:last-child){
  margin-bottom: 2rem;
}
.energie-introduction .img-wrap {
  position: relative;
}
.energie-introduction .img-wrap .img {
  position: sticky;
  top: 20%;
  opacity: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.energie-introduction .img-wrap .img img {
  height: 100%;
  object-fit: cover;
}
.energie-introduction{
  padding-bottom: 12rem;
}

/* ------------------------------------------------------------
    最適でんきの特長
------------------------------------------------------------*/
.features-introduction{
  padding-top: 6rem;
}
.features-introduction .bg-main{
  padding-top: 7rem;
  padding-bottom: 7rem;
  border-radius: 10px;
}
.features-introduction .treat{
  width: fit-content;
  padding-right: 2rem;
  border-radius: 3px;
  margin-bottom: 3rem;
}

.features-introduction h3{
  margin-bottom: 3.5rem;
}
.features-introduction .flex-box-50{
  gap: 4rem;
}
.features-reason .txt-three-block{
  margin-top: 5rem;
}
.features-reason{
  padding-bottom: 12rem;
}

.blue-graph-icon{
  position: relative;
}
.blue-graph-icon::before{
  content: "";
  position: absolute;
  background: url(../img/features/blue-graph-icon.svg) no-repeat center center; 
  background-size: contain;
  width: 16px;
  height: 16px;
  left: 50%;
  transform: translateX(-50%);
  top:-1.5rem;
}

.bg-main.white-color.border-radius-16{
  padding:  0 2rem;
  margin-bottom: 2rem;
  display: inline-block;
}
.blue-list{
  margin-bottom: 2rem;
}
.blue-list li{
  font-size: 2.8rem;
  font-weight: 500;
  position: relative;
  line-height: 1.5;
  padding-left: 2.5rem;
}
.blue-list li::before{
  content: "";
  position: absolute;
  background: var(--blue-color2);
  background-size: contain;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: 0;
  top: 15px;
}
.features-dynamic{
  padding-bottom: 10rem;
}
.features-dynamic .flex-box-50{
  padding: 8rem 9rem;
  margin-bottom: 4rem;
  border-radius: 10px;
}

.graph-slide.all{
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 4rem;
}
.graph-slide.all li{
  max-width: 48%;
}
.graph-slide.all .graph-slide-item{
  max-width: 48%;
  min-width: 100%;
}
.features-works{
  padding-bottom: 12rem;
}
.feature-flow{
  padding-bottom: 12rem;
}

/* ------------------------------------------------------------
    最適よそくアプリ
------------------------------------------------------------*/
.application-bg{
  background-image: url(../img/application/application-bg.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;

}
.application-introduction{
  position: relative;
  padding-bottom: 12rem;
}

.application-introduction .flex-box .txt .bg-white.main-color{
  padding: 4px 1rem;
  margin-bottom: 2rem;
  display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.application-introduction .flex-box .txt{
  position: relative;
  z-index: 1;
}
.application-introduction .flex-box .txt p{
  margin-top: 2rem;
  max-width: 630px;
}
.application-introduction .flex-box .img{
  position: relative;
  width: 40%;
  display: flex;
  align-items: flex-end;
}
.application-introduction .flex-box .img img{
  position: absolute;
  right: 40px;
  width: 100%;
  min-width: 515px;
  z-index: 0;
  bottom: -7rem;
}
.application-introduction .attention {
  gap: 1.2rem;
  margin-top: 2rem;
}
.application-introduction .attention .attention-item{
  width: fit-content;
  padding: 1.3rem;
  gap: 1rem;
  line-height: 1.4;
}
.application-introduction .attention .attention-item .icon{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-color2);
}
.application-introduction .attention .attention-item .icon::before{
  content: "";
  position: absolute;
  background-image: url(../img/application/download-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 25px;
  height: 25px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.application-introduction .attention .attention-item:nth-child(2) .icon::before{
  background-image: url(../img/application/access-icon.svg);
}
.application-slide{
  padding: 9rem 3%;
}
.application-slide .energie-introduction{
  padding-top: 9rem;
  padding-bottom: 9rem;
}
.application-catch.bg{
  padding: 24rem 0;
  padding-bottom: 40rem;
  background-image: url(../img/application/application-bg-02.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.application-catch p{
  color: #245A77;
  line-height: 3;
  padding-bottom: 3rem;
}



/* ------------------------------------------------------------
    会社概要
------------------------------------------------------------*/

.company-cred{
  padding-top: 0rem;
}

.company-cred-wrap {
  position: relative;
}
.company-cred-wrap .contents .continer {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
}
.company-cred-wrap .contents {
  height: 100vh;
  position: relative;
  top: 0;
  z-index: 1;
}
.company-cred-wrap .contents.active {
  z-index: 2;
}
.contents {
  height: 100%; 
  width: 100%;
  position: relative;
  top: 0;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%; 
}
.company-cred-wrap .contents .foreground {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
}

.company-mission{
  padding-bottom: 12rem;
}
.company-mission .top-title{
  margin-bottom: 9rem;
}
.company-mission .top-title .en{
  line-height: 1.1;
}
.company-mission .top-title h3{
  margin-top: 0rem;
}
.company-mission .left .left-item{
  background: #F7F9FC 0% 0% no-repeat padding-box;
  border: 1px solid #C7D8EF;
  border-radius: 3px;
  padding: 4rem;
  margin-bottom: 3rem;
}
.company-mission .left .left-item .title{
  gap: 2rem;
}
.company-mission .left .left-item h5{
  margin-bottom: 2rem;
  position: relative;
}
.company-mission .left .left-item:last-child h5{
  padding-left: 2.5rem;
}
.company-mission .left .left-item h5 span{
  position: absolute;
  left: -7px;
}
.company-mission .left .left-item p{
  margin-bottom: 2rem;
}
.company-mission .right{
  position: relative;
}
.company-mission .right img{
  width: fit-content;
  height: fit-content;
  position: sticky;
  top: 150px;
}
.company-prof .bg-white{
  border-radius: 10px;
}
.company-prof .prof-list {
  margin-top: 3rem;
  padding: 8rem;
  margin-bottom: 12rem;
}
.company-prof .prof-list .prof-list-item{
  gap: 5rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid #EFEFEF;
}
.company-prof .prof-list .prof-list-item .title{
  min-width: 165px;
  display: flex;
  align-items: center;
}
.company-prof .prof-list .prof-list-item .txt a{
  width: fit-content;
}
.company-service .flex-box-50{
  padding:11rem 8rem;
  margin-bottom: 4rem;
}
.company-service .flex-box-50 .txt .title .num{
  position: relative;
  margin-right: 3rem;
}
.company-service .flex-box-50 .txt .title .num::before{
  content: "";
  position: absolute;
  background: var(--main-color);
  width: 10px;
  height: 2px;
  top: 50%;
  right: -2rem;
}
.company-mission .dot-list .dot-list__item::before{
  display: none;
}
.company-mission .dot-list .dot-list__item span{
  position: relative;
  display: inline-block;
}
.company-mission .dot-list .dot-list__item span::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -13px;
  width: 5px;
  height: 5px;
  background: var(--main-color);
  border-radius: 50%;
}
.company-service{
  padding-bottom: 12rem;
}

/* 追記 */
.company-cred-wrap .contents:not(:last-of-type) .background img{
  object-position: 60% center;
}


/* ------------------------------------------------------------
    料金プラン
------------------------------------------------------------*/
.plan-works{
  padding-bottom: 12rem;
}
.plan-introduction{
  padding-bottom: 12rem;
}
.qa__block {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}


.qa__item {
  display: inline-block;

}

.qa__head {
position: relative;
  padding: 20px 30px 20px 20px;
  border-radius: 8px 8px 0 0;
  background: var(--gray-color);
  cursor: pointer;
  width: 100%;
  gap: 2rem;
}

.qa__head:after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--main-color);
  position: absolute;
  right: 20px;
  top: 50%;
  transition: transform .4s;
}
.qa__head:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--main-color);
  position: absolute;
  right: 19.5px;
  top: 50%;
  transform:rotate(90deg) translateY(50%);
  transition: transform .4s;
  opacity: 1;
}

.qa__body {
  position: relative;
  border-radius: 0 0 8px 8px;
  background: #fff;
  color: black;
  border: transparent;
  padding: 0 20px;
  height: 0;
  opacity: 0;
  transition: height 0.4s, padding 0.4s, opacity 0.4s;
}

.qa__body.is-open {
  padding: 2rem 8rem;
  height: auto;
  opacity: 1;
  transition: all 0.4s ease 0.1s;
  background: var(--gray-color);
}

.qa__body .table{
  width: 100%;
  margin-bottom: 3rem;
}
.qa__body .table th{
  padding: 1rem 2rem;
  background: #E0FAF9;
  border-left: 1px solid #F7F9FC;
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
}
.qa__body .table td{
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  background: #fff;
  border-left: 1px solid #F7F9FC;
  vertical-align: baseline;
  padding: 5rem 0;
}
.qa__body .table td .en{
  margin-right: 0.5rem;
  display: inline-block;
}

.qa__head.is-open::before {
  transform: rotate(180deg);
}

.qa__item:not(:first-child) {
  margin-top: 16px;
}

.dli-close {
  display: inline-block;
  vertical-align: middle;
  color: var(--text-color);
  line-height: 1;
  width: 1em;
  height: 0.1em;
  background: currentColor;
  border-radius: 0.1em;
  position: relative;
  transform: rotate(45deg);
}
.dli-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}


.plan-introduction .qa__body.is-open{
	padding: 4rem 5rem;
}
.plan-introduction .qa__body .bg-white{
	padding: 1.2rem 1.5rem;
}
.plan-introduction .qa__body .bg-main{
	padding: 0.7rem 1rem;
}
.plan-introduction .qa__body .plan-box{
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.plan-introduction .qa__body .plan-box .plan-box-item{
	border: 1px solid var(--main-color);
	border-radius: 2px;
	flex-shrink: 0;
}

.icon-cross-out {
	display: inline-block;
	vertical-align: middle;
	color: var(--text-color);
	line-height: 1;
	width: 24px;
	height: 4px;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
	transform: rotate(45deg);
}
.icon-cross-out::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}
.icon-cross-out.small {
	width: 1em;
	height: 0.1em;
}
.icon-plus{
	display: inline-block;
	vertical-align: middle;
	color: var(--text-color);
	line-height: 1;
	width: 24px;
	height: 4px;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
}
.icon-plus::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}
.fee-list {
	margin: 2rem 0.5rem;
}
.fee-item {
	display: flex;
	align-items: flex-start;
	padding: 0;
}
.fee-item:not(:first-of-type) {
	margin-top: 2rem;
}
.fee-content {
	flex: 1;
}
.fee-title {
	font-size: 16px;
	font-weight: bold;
	position: relative;
	padding-left: 15px;
}
.fee-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	background-color: var(--main-color);
	border-radius: 50%;
}
.fee-description {
	font-size: 14px;
	line-height: 1.5;
	padding-left: 15px;
}
.plan-box-item:first-of-type .txt{
	height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	gap: 1rem;
}
.vertical-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	height: fit-content;
	width: fit-content;
}
.plan-introduction .qa__body .plan-box-item01 .bg-main{
	padding: 0.7rem 3rem;
}
.plan-box-item02{
	max-width: 448px;
}
.plan-introduction .qa__body .plan-box-item03{
	padding: 2.5rem;
}
.h80{
	height: 80%;
}
.plan-introduction .note-txt{
	margin-top: 2.5rem;
}

/* ------------------------------------------------------------
    ご利用の流れ
------------------------------------------------------------*/
.flow-introduction{
  padding-bottom: 12rem;
}
.flow-introduction .big-title{
  padding:3rem 0;
  border: solid 2px var(--main-color);
  border-radius: 5px;
  margin-bottom: 6rem;
}
.flow-introduction .flex-box .txt{
  width: 60%;
  max-width: 610px;
}
.flow-introduction .flex-box .txt p{
  margin-bottom: 3rem;
}
.flow-introduction .flex-box .txt .text-gray{
  margin-bottom: 3rem;
  display: inline-block;
}
.flow-introduction .flex-box .img{
  width: 40%;
}
.flow-check{
  background: transparent linear-gradient(90deg, #2B99C7 0%, #09709B 100%) 0% 0% no-repeat padding-box;
  padding: 4rem 0;
}
.flow-explanation-block{
  padding: 9rem 0;
}
.flow-explanation-block .block{
  padding: 6rem;
  gap: 3rem;
  border-radius: 10px;
  margin-bottom: 6rem;
}
.flow-explanation-block .block .left{
  position: relative;
}
.flow-explanation-block .block .left .img{
  width: 120px;
  aspect-ratio: 1/1;
  padding: 2.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flow-explanation-block .block .left .num{
  width: 44px;
  aspect-ratio: 1/1;
  background: var(--gd-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: -15px;
}
.flow-explanation-block .block .right .title{
  gap: 2rem;
}
.flow-explanation-block .block .right .time-icon{
  height: fit-content;
  padding: 0rem 1rem;
  padding-left: 3rem;
  position: relative;
}
.flow-explanation-block .block .right .time-icon::before{
  content: "";
  position: absolute;
  background-image: url(../img/flow/time-icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  z-index: 1;
}
.flow-explanation-block .block.triangle{
  position: relative;
}
.flow-explanation-block .block.triangle:not(:last-child)::before{
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 45px solid transparent;
  border-left: 45px solid transparent;
  border-top: 18px solid #c7d8ef;
  border-bottom: 0;
}
.flow-explanation{
  padding-bottom: 12rem;
}

/* ------------------------------------------------------------
    よくある質問
------------------------------------------------------------*/
.fap-area{
  padding-bottom: 12rem;
}
.accordion-item {
  margin-bottom: 2rem;
}
.accordion-item.is-active{
  padding-bottom: 2.5rem;
}

/* ヘッダー部分 */
.accordion-header {
  position: relative;
  padding: 2.5rem 3rem;
  padding-right: 0rem;
  cursor: pointer;
}

.accordion-title {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding-right: 3rem;
}

/* 開閉アイコン */
.accordion-icon {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--main-color);
  transition: transform .3s;
}

/* 縦線 */
.accordion-icon::before {
  width: 2px;
  height: 16px;
  margin-left: -1px;
  transform: translateY(-50%);
}

/* 横線 */
.accordion-icon::after {
  width: 16px;
  height: 2px;
  margin-top: -1px;
  transform: translateX(-50%);
}

/* 開いているときは縦線を非表示に */
.accordion-item.is-active .accordion-icon::before {
  transform: translateY(-50%) rotate(45deg);
}
.accordion-item.is-active .accordion-icon::after {
  transform: translateX(-50%) rotate(45deg);
}

/* コンテンツ部分 */
.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height .3s;
}

.accordion-content__inner {
  padding: 2.5rem 3rem;
  gap: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}
.accordion-content__inner .content{
  padding-top: 1rem;
  padding-right: 3rem;
}
.accordion-content__inner .content p:not(:last-child){
  margin-bottom: 1rem;
}
.accordion-content__inner .content .attention{
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2.5rem 3rem;
  border-radius: 5px;
}
.accordion-content__inner .content .attention .title{
  border-bottom: 1px solid var(--main-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}
.accordion-content__inner .content .attention .attention-list .attention-list__item{
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
}
.accordion-content__inner .content .attention .attention-list .attention-list__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background: var(--text-color);
}
.accordion-content__inner .content .attention p .border{
  font-size: 1.4rem;
  border: solid 1px var(--text-color);
  padding: 0 0.5rem;
  margin-right: 0.5rem;
  font-weight: 400;
  min-width: 100px;
  display: inline-block;
  text-align: center;
}

/* ------------------------------------------------------------
    約款集
------------------------------------------------------------*/
.agreement-introduction{
  padding-bottom: 12rem;
}
.agreement-introduction .bg-gray{
  margin-top: 4rem;
  padding: 7rem 8rem;
}
.agreement-block{
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
  row-gap: 2rem;
}
.agreement-block__item{
  padding:2.5rem 2rem;
  width: 48%;
  justify-content: space-between;
}
.agreement-block__item .btn{
  margin-top: 0;
}


/* ------------------------------------------------------------
    特定商取引法
------------------------------------------------------------*/
.act-introduction{
  padding-bottom: 12rem;
}
.act-introduction .bg-gray{
  padding:7rem;
  margin-top: 4rem;
}
.act-list{
  border-radius: 20px;
  margin-bottom: 4rem;
}
.act-list__item .title{
  min-width: 169px;
  padding-left: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  align-items: center;
  border-right: 1px solid #F7F9FC;
}
.act-list__item .title:not(:last-child){
  border-bottom: 1px solid #fff;
}
.act-list__item .txt{
  padding: 2rem;
  padding-left: 2rem;
  width: 100%;
}
.act-list__item:not(:last-child) .txt{
  border-bottom: 1px solid #F7F9FC;
}
.act-list__item .dot-list .dot-list__item:last-of-type{
  margin-bottom: 0;
}

/* ------------------------------------------------------------
    プライバシーポリシー
------------------------------------------------------------*/
.privacy-introduction{
  padding-bottom: 12rem;
}
.privacy-introduction p{
  margin-bottom: 2rem;
}
.privacy-introduction h2{
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  margin-top: 4rem;
}
.privacy-introduction h3{
  font-weight: 600;
  margin-bottom: 1rem;
}
.privacy-introduction ul{
  margin-bottom: 2rem;
}
.privacy-introduction ul li{
  margin-bottom: 1rem;
  position: relative;
  padding-left: 2rem;
}
.privacy-introduction ul li.f-size-14 {
  margin-bottom: 0;
}
.privacy-introduction ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-color);
}
.privacy-introduction ol{
  margin-bottom: 2rem;
}
.privacy-introduction ol li{
  margin-bottom: 1rem;
}

.sharing-range{
  padding-left:1em;
}

/* ------------------------------------------------------------
    お知らせ お知らせ詳細
------------------------------------------------------------*/
.news-archive{
  padding-bottom: 12rem;
}
.news-archive .pagination-item > *{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: solid 2px var(--main-color);
  color: var(--main-color);
  font-size: 1.6rem;
  font-weight: 600;
}
.news-archive .pagination-item .next{
  background: var(--main-color);
  border: none;
  color: #fff;
}
.news-archive .pagination-item .current,
.news-archive .pagination-item .prev{
  background: var(--main-color);
  border: none;
  color: #fff;
}
.news-archive .pagination-item .arrow {
  position: relative;
  display: inline-block;
  width: 10.5px;
  height: 19px;
}

.news-archive .pagination-item .arrow::before,
.news-archive .pagination-item .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 14px;
  height: 2px;
  border-radius: 9999px;
  background: #fff;
  transform-origin: calc(100% - 1px) 50%;
}
.news-archive .pagination-item .prev .arrow::before,
.news-archive .pagination-item .prev .arrow::after  {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 14px;
  height: 2px;
  border-radius: 9999px;
  background: #fff;
  transform-origin: 1px 50%;
}
.news-archive .pagination-item .arrow::before {
  transform: rotate(45deg);
}

.news-archive .pagination-item .arrow::after {
  transform: rotate(-45deg);
}
.news-archive .pagination-list{
  gap: 1rem;
}

.top-news-list{
  padding-bottom: 12rem;
}
.news-single .title{
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 1rem;
  margin-bottom: 6rem;
}

.news-single .content h3{
  font-size: 2.4rem;
  margin-bottom: 2rem;
  font-weight: 600;
}
.news-single .content h4{
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 600;
  color: var(--main-color);
}
.news-single .content h5{
  font-size: 1.8rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--main-color);
  padding-left: 1rem;
  font-weight: 600;
}
.news-single .content h6{
  font-size: 1.6rem;
  margin-bottom: 2rem;
  color: var(--main-color);
  font-weight: 600;
}
.news-single .content p{
  margin-bottom: 2rem;
}
.news-single .content ul{
  margin-bottom: 2rem;
  padding-left: 1em;
}
.news-single .content ul li{
  margin-bottom: 1rem;
  position: relative;
  padding-left: 1rem;
}
.news-single .content ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--main-color);
}
.news-single .content p a{
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
  font-weight: 600;
  display: inline;
  padding-bottom: 1px;
  transition: all 0.3s;
}
.news-single .content p a:hover{
  opacity: 0.7;
  transition: all 0.3s;
}
.news-single{
  padding-bottom: 12rem;
}
.news-single .pagination{
  margin-top: 6rem;
}
.news-single .pagination .pagination__back .list-icon{
  display: flex;
  align-items: center;
  gap: 1px;
  flex-wrap: wrap;
  width: 30px;
}
.news-single .pagination .pagination__back .list-icon span{
  display: block;
  position: relative;
  width: 10px;
  height: 10px;
  background: var(--main-color);
}
.news-single .pagination .next{
  position: relative;
  padding-right: 2rem;
}
.news-single .pagination .prev{
  position: relative;
  padding-left: 2rem;
}
.news-single .pagination .next.arrow::before,
.news-single .pagination .next.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background: #000000;
  transform-origin: calc(100% - 1px) 50%;
}
.news-single .pagination .prev.arrow::before,
.news-single .pagination .prev.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 10px;
  height: 2px;
  border-radius: 9999px;
  background: #000000;
  transform-origin: 1px 50%;
}


.news-single .pagination .arrow::before {
  transform: rotate(45deg);
}

.news-single .pagination .arrow::after {
  transform: rotate(-45deg);
}

.news-single .pagination .pagination__item:hover.arrow::before,
.news-single .pagination .pagination__item:hover.arrow::after{
  background: var(--main-color);
  transition: all 0.3s;
}
/* ------------------------------------------------------------
    代理店募集
------------------------------------------------------------*/
.agency-introduction{
  padding-bottom: 12rem;
}
.agency-introduction h3{
  margin-bottom: 6rem;
}
.agency-introduction p{
  margin-bottom: 3rem;
}
.agency-introduction .block:last-child p{
  margin-bottom: 1rem;
}
.agency-introduction .block .btn{
  margin-top: 0rem;
}
.agency-introduction .bg-gray{
  padding: 8rem;
  margin-top: 12rem;
}
.agency-introduction .bg-gray h4{
  padding-bottom: 3px;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--main-color);
}
.agency-introduction .block {
  background: #fff;
  border-radius: 10px;
  padding: 3rem;
  transition: all 0.3s;
}
.agency-introduction .block:not(:last-child):hover{
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.agency-introduction .block .en{
  margin-top: -1.5rem;
}
.agency-introduction .block .img{
  width: 95px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--gray-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 2rem;
}

/* ------------------------------------------------------------
    お問い合わせ
------------------------------------------------------------*/
.contact-form{
  padding-bottom: 12rem;
}
.contact-form .bg-gray{
  padding:10rem 8rem;
  margin-top: 5.5rem;
  border-radius: 20px;
}
.wpforms-container .wpforms-required-label, .wp-core-ui div.wpforms-container .wpforms-required-label{
  font-size: 1.2rem;
  background: var(--main-color);
  color: white!important;
  padding: 2px 10px;
  border-radius: 14px;
  padding-right: 12px;
  padding-bottom: 3px;
  margin-left: 1rem;
}
.contact-form a.extarnal{
  border-bottom: 1px solid #0094E5;
  padding-bottom: 1px;
}
div.wpforms-container-full .wpforms-form .wpforms-submit-container{
  display: flex;
  justify-content: center;
}

.contact-form .form-btn {
  width: 28rem !important;
  position: relative !important;
  background: var(--main-color) !important;
  border-radius: 40px !important;
  color: #fff !important;
  margin-top: 3rem !important;
  transition: ease .3s !important;
  display: flex !important;
  height: fit-content !important;
  padding: 3rem !important;
}
.contact-form .form-btn::after{
  content: "";
  position: absolute;
  background: var(--accent-color4);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 12px;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 1;
}
.contact-form .form-btn::before{
  content: "";
  position: absolute;
  background: url(../img/common/contact-arrow.svg) no-repeat center center;
  background-size: contain;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 30px;
  z-index: 2;
  top: 50%;
  transform: translate(0, -50%);
}

div.wpforms-container-full input[type=text]{
  border: none !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-classic select{
  border: none !important;
}
div.wpforms-container-full .wpforms-form textarea.wpforms-field-large{
  border: none !important;
}
div.wpforms-container-full select{
  background-image: linear-gradient(45deg, transparent 50%, var(--text-color) 50%), linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

div.wpforms-container-full input[type=email]{
  border: none !important;
}
.wpforms-field-description{
  line-height: 1.8!important;
}
div.wpforms-container-full .wpforms-confirmation-container-full {
  background: #fff!important;
  border: 1px solid var(--main-color)!important;
  box-sizing: border-box;
}