@charset "UTF-8";

/* =============================================
* HOME
* ============================================= */
.header-logo {
   display: flex;
   align-items: center;
   width: 100%;
   height: 70px;
   background-color: #fff;
   border-radius: 20px 20px 0 0;
   padding: 0 24px;
   box-sizing: border-box;
}

.header-logo a {
   display: block;
   width: 222px;
}

@media screen and (max-width: 1023px) {
   .header-logo {
      border-radius: 0;
   }
}

/* -- -- */
#lead {
   background: url("../img/index/lead-bg.jpg") no-repeat center top/cover;
   padding-top: 4.5%;
}

#lead h2 {
   width: 85%;
   margin: 0 auto;
}

#lead figure {
   width: 93.2%;
   margin: 0 auto;
   padding-top: 26.5%;
}

/* -- -- */
#worries {
   position: relative;
   padding-top: 30%;
}

#worries:before {
   content: '';
   width: 100%;
   background: url("../img/index/worries-bg.jpg") repeat center top/100% auto;
   position: absolute;
   top: 0;
   bottom: -62px;
   left: 0;
   z-index: -1;
}

#worries h2 {
   font-weight: 900;
   font-size: 32px;
   line-height: 46px;
   color: #fff;
}

#worries h2 img {
   max-width: 60px;
   margin-bottom: 8px;
}

#worries h3 {
   display: grid;
   font-weight: 900;
   font-size: 18px;
   line-height: 26px;
   color: #fff;
   padding-top: 10px;
}

#worries h3>span {
   grid-area: 1/1;
}

#worries h3 .border {
   -webkit-text-fill-color: #004DA0;
   -webkit-text-stroke-width: 8px;
   -webkit-text-stroke-color: #004DA0;
}

#worries h3 strong {
   display: inline-block;
   font-weight: 900;
   font-size: 23px;
   line-height: 34px;
   color: #FFE346;
}

#worries .photo-1 {
   width: 275px;
   margin: 0 auto;
   padding-top: 8px;
   position: relative;
   left: -10px;
}

#worries .photo-2 {
   padding-top: 20px;
   position: relative;
}

#worries .photo-up {
   position: absolute;
   top: -105px;
   left: 0;
   overflow: hidden;
}

#worries .photo-up img {
   transform: translateY(100%);
   transition: all 0.3s;
   transition-delay: 0.5s;
}

#worries .photo-up.scrollIn img {
   transform: translateY(0);
}

#worries .catch {
   width: 147px;
   margin: 0 auto;
   position: relative;
}

#worries .catch p {
   position: relative;
   z-index: 1;
}

#worries .photo-3 {
   width: 138px;
   position: absolute;
   bottom: 7px;
   left: 63%;
   transform: translateX(-50%);
   overflow: hidden;
}

#worries .photo-3 img {
   transform: translateY(100%);
   transition: all 0.3s linear;
   transition-delay: 0.5s;
}

#worries .photo-3.scrollIn img {
   transform: translateY(0);
}

#worries .deco {
   overflow: hidden;
   position: absolute;
   top: 0;
   left: 0;
}

#worries .deco img {
   transform: scale(1.4);
   transition: all 0.5s linear;
   transition-delay: 0.5s;
}

#worries .deco.scrollIn img {
   transform: scale(0.68);
}

@media screen and (max-width: 480px) {
   #worries:before {
      bottom: -19.8vw;
   }

   #worries .photo-1 {
      width: 73.3%;
      left: -3%;
   }

   #worries .photo-2 {
      padding-top: 2vw;
   }

   #worries .photo-up {
      top: -30vw;
   }
}

/* -- -- */
#solution {
   position: relative;
   padding-top: 62px;
}

#solution:before {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/index/solution-bg-1.png") no-repeat center top/100% auto;
   position: absolute;
   top: -30px;
   left: 0;
}

#solution .wrap {
   background-color: #D4EBFF;
   padding: 0 28px 150px;
}

#solution .title {
   position: relative;
}

#solution .circle {
   width: 318px;
   position: absolute;
   top: 70%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.2);
   transition: transform 0.1s linear;
}

#solution h2 {
   position: relative;
   z-index: 1;
}

#solution h2 img {
   max-width: 242px;
   padding-bottom: 5px;
}

#solution h2 span {
   color: #009FE8;
}

#solution .box {
   position: relative;
   padding-top: 120px;
}

#solution .box+.box {
   padding-top: 35px;
}

#solution .box .deco {
   width: 136px;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}

#solution .box .txt {
   max-width: 300px;
   margin: 0 auto;
   padding-top: 8px;
}

#solution .box .note {
   font-size: 14px;
   padding-top: 8px;
}

#solution .box .scrollSet {
   opacity: 0;
   scale: .8;
   transition-delay: 0.5s;
}

#solution .box .scrollIn {
   transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
   opacity: 1;
   scale: 1;
}

@media screen and (max-width: 480px) {
   #solution {
      padding-top: 19.8vw;
   }

   #solution:before {
      top: -4vw;
   }

   #solution .wrap {
      padding-bottom: calc(50px + 24vw);
   }
}

/* -- -- */
#comparition {
   background-color: #009FE8;
   position: relative;
   padding-bottom: 35px;
}

#comparition:before {
   content: '';
   width: 100%;
   padding-top: 24%;
   background: url("../img/index/comparition-bg-1.png") no-repeat center top/100% auto;
   position: absolute;
   bottom: 100%;
   left: 0;
}

#comparition .wrap {
   background: url("../img/index/comparition-deco.png") no-repeat center top 5px/290px auto;
   padding: 135px 18px 0;
}

#comparition .photo-1 {
   width: 127px;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
}

#comparition .photo-1 img {
   transform: translateY(100%);
   transition: all 0.3s linear;
   transition-delay: 0.5s;
}

#comparition .photo-1.scrollIn img {
   transform: translateY(0);
}

#comparition .box {
   background-color: #FFFDC4;
   border-radius: 40px;
   padding: 40px 20px;
   position: relative;
}

#comparition h2 img {
   max-width: 81px;
   padding-bottom: 12px;
}

#comparition h3 {
   width: 182px;
   margin: 0 auto;
   padding-top: 8px;
}

#comparition .photo-2 {
   padding-top: 16px;
}

#comparition ul {
   font-weight: 700;
   padding-top: 20px;
}

#comparition ul li:nth-child(1) {
   color: #009FE8;
}

#comparition ul li:nth-child(2) {
   color: #0137A0;
}

#comparition ul li:nth-child(3) {
   color: #646464;
}

/* -- -- */
#before-after {
   background: url("../img/index/worries-bg.jpg") repeat center top/100% auto;
   position: relative;
   padding: 0 18px 75px;
}

#before-after:before {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/index/faq-bg.png") no-repeat center top/100% auto;
   position: absolute;
   top: 0;
   left: 0;
}

#before-after .deco {
   display: grid;
   justify-content: center;
}

#before-after .deco img {
   grid-area: 1/1;
   transition: all 0.3s linear;
}

#before-after .deco img:nth-child(1) {
   max-width: 227px;
}

#before-after .deco img:nth-child(2) {
   max-width: 239px;
   opacity: 0;
}

#before-after .deco.scrollIn img:nth-child(2) {
   opacity: 1;
}

#before-after h2 {
   padding: 45px 0 30px;
}

#before-after h2 img {
   max-width: 94px;
   padding-bottom: 12px;
}

#before-after .slider {
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 20px;
   margin-bottom: 68px;
}

#before-after .slider .slick-arrow {
   border: 0;
   width: 32px;
   height: 32px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 0;
   z-index: 1;
   transition: all 0.3s;
   cursor: pointer;
}

#before-after .slider .slick-arrow:hover {
   opacity: 0.7;
}

#before-after .slider .slick-prev {
   background: url("../img/index/slider-prev.png") no-repeat center/cover;
   left: -12px;
}

#before-after .slider .slick-next {
   background: url("../img/index/slider-next.png") no-repeat center/cover;
   right: -12px;
}

#before-after .slider .slick-dots {
   display: flex;
   justify-content: center;
   gap: 4px;
   position: absolute;
   top: calc(100% + 60px);
   right: 0;
   left: 0;
}

#before-after .slider .slick-dots li {
   width: 11px;
   height: 8px;
   transition: all 0.3s;
}

#before-after .slider .slick-dots button {
   display: block;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border: 0;
   border-radius: 4px;
   font-size: 0;
   cursor: pointer;
   transition: all 0.3s;
}

#before-after .slider .slick-dots .slick-active,
#before-after .slider .slick-dots li:hover {
   width: 20px;
}

#before-after .slider .slick-dots .slick-active button,
#before-after .slider .slick-dots li:hover button {
   background-color: #004DA0;
}

#before-after .slider .slide {
   padding: 40px 30px;
}

#before-after .slider h3 {
   font-weight: 700;
   font-size: 18px;
   line-height: 30px;
   padding-top: 6px;
}

#before-after .slider .tag {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 5px;
   padding-top: 10px;
}

#before-after .slider .tag span {
   background-color: #009FE8;
   color: #fff;
   font-weight: 700;
   line-height: 22px;
   padding: 0 5px;
}

#before-after .slider .price {
   color: #009FE8;
   font-weight: 700;
   font-size: 23px;
   line-height: 30px;
   padding-top: 10px;
}

/* -- -- */
#stengths {
   background-color: #009FE8;
   padding: 52px 18px 120px;
}

#stengths h2 {
   color: #fff;
   font-weight: 900;
   font-size: 32px;
   line-height: 45px;
}

#stengths h2 img {
   max-width: 256px;
}

#stengths h2 span {
   color: #FFE346;
}

#stengths h2 span span {
   font-size: 52px;
}

#stengths .box {
   background-color: #fff;
   border-radius: 40px;
   margin-top: 30px;
   padding: 20px 35px 35px;
}

#stengths .box .no {
   width: 34px;
   margin: 0 auto;
}

#stengths .box figure {
   padding-top: 17px;
}

#stengths .box figure img {
   border-radius: 30px;
}

#stengths .box .txt {
   padding-top: 20px;
}

#stengths .box.scrollSet {
   opacity: 0;
   scale: .8;
   transition-delay: 0.5s;
}

#stengths .box.scrollIn {
   transition: opacity 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
   opacity: 1;
   scale: 1;
}

/* -- -- */
#faq {
   background: linear-gradient(to left, #FFF09B 50%, #FFE346 50%);
   padding: 13% 18px 80px;
   position: relative;
}

#faq:before {
   content: '';
   width: 100%;
   height: 100%;
   background: url("../img/index/faq-bg.png") no-repeat center top/100% auto;
   position: absolute;
   top: 0;
   left: 0;
}

#faq h2 {
   padding-bottom: 16px;
}

#faq h2 img {
   max-width: 76px;
   padding-bottom: 25px;
}

#faq .box {
   background-color: #fff;
   border-radius: 20px;
   margin-top: 16px;
   padding: 20px 15px;
}

#faq .box h3 {
   display: flex;
   align-items: center;
   min-height: 50px;
   font-weight: 900;
   font-size: 18px;
   line-height: 25px;
   border-bottom: 4px dotted #CCDDEA;
   padding: 0 42px 16px 0;
   position: relative;
   cursor: pointer;
}

#faq .box h3:after {
   content: '';
   width: 32px;
   height: 32px;
   background: url("../img/index/arrow-up.svg") no-repeat center top/cover;
   position: absolute;
   top: calc(50% - 8px);
   right: 0;
   transform: translateY(-50%) rotate(180deg);
   transition: all 0.3s;
}

#faq .box .txt {
   display: none;
   font-weight: 400;
   padding-top: 12px;
}

#faq .box.is-active h3:after {
   transform: translateY(-50%) rotate(0deg);
}

/* -- -- */
#flow {
   background: url("../img/index/flow-bg.jpg") repeat center top/100% auto;
   color: #fff;
   padding: 85px 2px 70px;
}

#flow h2 {
   padding-bottom: 30px;
}

#flow h2 img {
   max-width: 35px;
   padding-bottom: 16px;
}

#flow .box:not(:last-child),
#flow .box-r:not(:last-child) {
   padding-bottom: 50px;
}

#flow .box h3,
#flow .box .txt,
#flow .box-r h3,
#flow .box-r .txt {
   padding-top: 22px;
}

#flow .box {
   padding-right: 46px;
}

#flow .box .text {
   padding-left: 35px;
}

#flow .box-r {
   padding-left: 46px;
}

#flow .box-r .txt {
   padding-right: 35px;
}

/* -- -- */
#store-list {
   background-color: #D4EBFF;
   padding: 60px 18px;
}

#store-list h2 {
   padding-bottom: 20px;
}

#store-list h2 img {
   display: inline-block;
   max-width: 72px;
   padding-bottom: 15px;
}

#store-list .box {
   background-color: #fff;
   border-radius: 20px;
   margin-top: 20px;
   padding: 25px 20px;
}

#store-list .box h3 {
   font-weight: 900;
   font-size: 18px;
   line-height: 26px;
   text-align: center;
}

#store-list .box .pin a {
   display: inline-block;
   background: url("../img/index/icon-location.svg") no-repeat top 4px left/14px auto;
   padding-left: 30px;
}

#store-list .box .tel a {
   display: inline-block;
   background: url("../img/index/icon-tel.svg") no-repeat center left/15px auto;
   padding-left: 30px;
}

#store-list .box .tel span {
   display: block;
   padding: 4px 0 0 30px;
}

#store-list .box .txt {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   border-top: 2px dotted #004DA0;
   margin-top: 12px;
   padding-top: 6px;
}

#store-list .box .txt li {
   text-indent: -13px;
   padding-left: 13px;
}

#store-list .box .txt li:before {
   content: '●';
   font-size: 13px;
}