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

/* ============================================================ */

main{background-color: #F1F7DA;}
/* .section{padding: 40px 0 80px;display: grid;gap: 40px;} */
.container{padding: 0 40px;margin: 0 auto;max-width: 1080px;width: 100%;display: grid;gap: 40px;}
@media only screen and (max-width: 768px){
  .container{padding: 0 var(--spacing-24);}
}
/* .inner{width: 100%;} */

/* .section{background-color: rgba(255, 0, 0, .3);} */
/* .container{background-color: rgba(0, 0, 255, .3);}
.inner{background-color: rgba(255, 255, 0, .3);min-height: 200px;} */

.video__inner__player{background-color:aqua;}

/* ============================================================ */

/* hero */
.hero{padding: 0;}
.hero__lead{height: min(940px, 87.03vw);}
.hero-banner{position: relative;}
.hero-banner__logo{padding: 24px 0 0;width: 25.2%;position: relative;z-index: 2;}
.hero-banner__heading{
  width: 36.2%;position: absolute;top: 11.06%;left: 8.8%;z-index: 2;
  display: flex;align-items: flex-start;
}
.hero-banner__subtitle{width: 41.7%;position: absolute;top: 6.81%;right: 6%;z-index: 2;}
.cta-box{width: 49.2%;position: absolute;bottom: 24px;left: 0;z-index: 2;}
.hero-cta-box__btn{margin-top: 24px;width: 89.88%;display: inline-block}
.cta-box__note{font-size: 12px;margin-top: 8px;}
.hero-btn-line{width: 17.4%;position: absolute;bottom: 19.57%;right: 8px;z-index: 2;}
.hero-banner__back{width: 162.5%;position: absolute;bottom: 0;left: -18.6%;}

@keyframes fxBgFlow {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }

  30% {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }

  100% {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}

@media only screen and (max-width: 768px){
  .hero__lead{height: var(--spacing-2180);}
  .hero-banner__logo{padding: var(--spacing-24) 0 0;width: 42.74%;}
  .hero-banner__heading{width: 64.67%;top: 5.13%;left: 50%;transform: translateX(-50%);}
  .hero-banner__subtitle{width: 96.86%;top: 55.59%;left: 0;}
  .cta-box{width: 100%;bottom: -3.85%;left: 0;}
  .hero-cta-box__btn{margin: 24px auto 0;width: 100%;}
  .hero-cta-box__btn > figure{margin: 0 auto;width: 95.44%;}
  .cta-box__note{font-size: var(--spacing-20);}
  .hero-btn-line{width: 32.35%;bottom: 31.57%;right: -12px;}
  .hero-banner__back{width: 106.83%;bottom: 0;left: 50%;transform: translateX(-50%);}
}

/* video */
.video__container{padding-top:40px;padding-bottom:64px;}
.video__inner{display: grid;gap: 16px;}
.video__inner__title{font-size: 20px;font-weight: 600;line-height: 1;color: #ff5825;text-align: center;}
.video__inner__player{margin: 0 auto;max-width: 580px;width: 100%;aspect-ratio: 580 / 344;}


@media only screen and (max-width: 768px){
  .video__container{padding-top:var(--spacing-160);padding-bottom:var(--spacing-128);}
  .video__inner__title{font-size: var(--spacing-40);}
  .video-box{padding: var(--spacing-128) 0 var(--spacing-128);}
}

/* recommendation */
.recommendation{padding: 40px 0 100px;background-image: linear-gradient(to bottom, #f1f7da 50%, #f4f1eb 50%);}
.recommendation__heading{position: relative;}
.recommendation__title{
  font-size: 28px;font-weight: 600;line-height: 1;color: #ff3716;text-align: center;
  position: relative;z-index: 2;width: 100%;display: inline-block;
}
.recommendation__subtitle{
  font-size: 180px;font-weight: 600;line-height: 1;color: #FFC18D;
  position: absolute;top: -163.5%;left: 9.5%;z-index: 1;
}
.recommendation__card{
  display: grid;

  /* PC */
  grid-template-columns: 37.38% 1fr;
  grid-template-rows: repeat(3, auto);

  grid-template-areas:
    "box2 box1"
    "box2 box3"
    "box2 box4";

  row-gap: 8px;
  column-gap: 40px;

  padding: 48px 8% 0;margin-top: 24px;border-radius: 48px;
  position: relative;z-index: 2;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/recommendation__back@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.recommendation__card__title{grid-area: box1;padding-top: 48px;font-size: 24px;font-weight: 600;line-height: 1.4;color: #fbfe8e;}
.recommendation__card__media{grid-area: box2;display: flex;align-items: center;}
.recommendation__card__text{grid-area: box3;font-weight: 600;line-height: 1.6;color: #fff;}
.recommendation__card__sign{grid-area: box4;padding-bottom: 48px;width: 52.67%;}

@media only screen and (max-width: 768px){
  .recommendation{padding: var(--spacing-48) 0 var(--spacing-144);}
  .recommendation__title{font-size: var(--spacing-48);letter-spacing: -1px;white-space: nowrap;}
  .recommendation__subtitle{font-size: var(--spacing-240);top: -98.5%;left: 15.5%;}
  .recommendation__card{
    grid-template-columns: 1fr;

    grid-template-areas:
      "box1"
      "box2"
      "box3"
      "box4";

    gap: var(--spacing-40);

    padding: var(--spacing-128) var(--spacing-48);margin-top: var(--spacing-64);border-radius: 12.8vw;
  }
  .recommendation__card__title{padding-top: 0;font-size: var(--spacing-48);letter-spacing: -1px;}
  .recommendation__card__text{font-size: var(--spacing-32);}
  .recommendation__card__sign{padding-bottom: 0;width: 79.20%;}
}

/* attention */
.attention{padding: 0 0 160px;background-color: #f4f1eb;}
.attention__container{position: relative;}
.attention__photo{width: 44.72%;position: absolute;top: 21.18%;right: 0;}
.attention__heading{position: relative;z-index: 2;}
.attention__title{font-size: 56px;font-weight: 600;line-height: 1;color: #FFC18D;}
.attention__subtitle{margin-top: 24px;display: flex;align-items: flex-end;}
.attention__subtitle__item{width: 44px;}
.attention__subtitle > p{font-size: 28px;font-weight: 600;line-height: 1;color: #ff3716;}
.attention__text{
  padding: 20px 32px;margin-top: 24px;display: inline-block;font-size: 42px;font-weight: 800;line-height: 1;color: #fff;
  background-image: linear-gradient(to bottom right, rgba(255, 163, 88, 1), rgba(255, 81, 39, 1));
}
.attention__text-sp{display: none;}
.attention__card{margin-top: 24px;width: 61.1%;display: grid;gap: 16px;position: relative;z-index: 2;}
.attention__item{padding: 32px 36px;border-radius: 20px;display: flex;align-items: center;gap: 32px;background-color: #fff;}
.attention__check{width: 41px;}
.attention__item > p{font-size: 24px;font-weight: 600;line-height: 1.4;color: #ff3716;}

@media only screen and (max-width: 768px){
.attention{padding: 0 0 var(--spacing-240);}
.attention__photo{width: 110%;top: 4%;left: 0;}
.attention__title{font-size: var(--spacing-104);text-align: center;}
.attention__subtitle{margin-top: var(--spacing-32);justify-content: center;}
.attention__subtitle > p{font-size: var(--spacing-64);}
.attention__text{padding: 0;margin-top: var(--spacing-240);width: 100%;font-size: var(--spacing-64);letter-spacing: 2px;background-image: none;}
.attention__text-pc{display: none;}
.attention__text-sp{display: grid;gap: 12px;}
.attention__text-sp > span{
  padding: var(--spacing-32);width: 100%;display: inline;
  background-image: linear-gradient(to bottom right, rgba(255, 163, 88, 1), rgba(255, 81, 39, 1));
}
.attention__card{margin-top: var(--spacing-48);width: 100%;}
.attention__item{padding: var(--spacing-40) var(--spacing-32);border-radius: var(--spacing-40);align-items: flex-start;gap: var(--spacing-32);}
.attention__check{width: 16.03%;}
.attention__item > p{font-size: var(--spacing-48);}}

/* method */
.method{padding-bottom: 120px;background-color: #E8E8E8;}
.method__heading{padding: 80px 0 48px;position: relative;}
.method__heading-item{width: 155px;position: absolute;top: -25%;left: 50%;transform: translateX(-50%);}
.method__heading-title{text-align: center;font-size: 36px;font-weight: 600;line-height: 1.4;color: #ff5825;}
.method__heading-title > span{font-size: 26px;color: #000;}
.method__heading-subtitle{margin: 24px auto 0;width: 84.7%;}
.method__content{display: grid;gap: 16px;grid-template-columns: repeat(2, 1fr);}
.method__card{
  display: grid;

  grid-template-columns: 33.26% 1fr;
  grid-template-rows: auto auto;

  grid-template-areas:
    "box3 box2"
    "box3 box4";

  column-gap: 16px;
  row-gap: 24px;

  padding: 24px;border-radius: 24px;background-color: #fff;
}

.method__card-item{display: none;}
.method__card-title{grid-area: box2;padding-top: 16px;font-size: 24px;font-weight: 600;line-height: 1.4;color: #ff5825;}
.method__card-photo{grid-area: box3;}
.method__card-text{grid-area: box4;min-height: 94px;font-size: 18px;font-weight: 600;line-height: 1.6;color: #000;}

@media only screen and (max-width: 768px){
  .method{padding-bottom: var(--spacing-240);}
  .method__heading{padding: var(--spacing-160) 0 var(--spacing-96);}
  .method__heading-item{width: 44.15%;top: -14%;}
  .method__heading-title{text-align: left;font-size: var(--spacing-72);}
  .method__heading-title > span{font-size: var(--spacing-56);}
  .method__heading-subtitle{width: 108%;position: absolute;bottom: -4%;left: 50%;transform: translateX(-50%);}
  .method__content{margin-top: var(--spacing-104);gap: var(--spacing-40);grid-template-columns: 1fr;}
  .method__card{
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    grid-template-areas:
      "box1"
      "box2"
      "box3"
      "box4";

    column-gap: 0;
    row-gap: var(--spacing-24);
  
    padding: var(--spacing-48);border-radius: var(--spacing-48);
  }
  .method__card-item{display: block;grid-area: box1;width: 18.48%;}
  .method__card-title{padding-top: 0;font-size: var(--spacing-48);}
  .method__card-photo{margin: 0 auto;width: 68%;}
  .method__card-text{padding: var(--spacing-32) 0;min-height: auto;font-size: var(--spacing-36);}
}

/* case */
.case{
  padding: 148px 0 120px;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/case__back@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top; 
}
.case__heading{position: relative;}
.case__heading > span{font-size: 72px;font-weight: 600;line-height: 1;color: #c0ecfb;position: absolute;top: -42%;left: 0;}
.case__heading-title{font-size: 40px;font-weight: 600;line-height: 1;color: #3157a1;position: relative;z-index: 2;}
.case__heading-subtitle{margin-top: 40px;position: relative;z-index: 2;font-size: 24px;font-weight: 600;line-height: 1;color: #000;}
.case__content{margin-top: 56px;display: grid;gap: 16px;grid-template-columns: repeat(2, 1fr);}
.case__card-heading-title{padding: 24px;border-radius: 16px 16px 0 0;background-color: #3157a1;display: flex;align-items: center;gap: 24px;}
.case__card-heading-item{width: 22.15%;}
.case__card-heading-title > h3{font-size: 20px;font-weight: 600;color: #fff;}
.case__card-tag{padding: 8px 20px;background-color: #f4edeb;display: flex;align-items: center;justify-content: center;gap: 8px;flex-wrap: wrap;}
.case__card-tag > p{padding: 6px 10px;border-radius: 1000px;border: 1px solid #3157a1;background-color: #fff;font-size: 12px;color: #3157a1;}
.case__check-group{
  min-height: 246px;padding: 24px 24px 40px;border-radius: 0 0 16px 16px;background-color: #fff;
  display: flex;align-items: flex-start;flex-direction: column;gap: 8px;
}
.case__check{display: flex;align-items: center;gap: 8px;}
.case__check > img{width: 27px;}
.case__check > p{font-weight: 600;color: #3157a1;}
.case__arrow{margin: -12px auto 0;width: 66px;}
.case__card-bottom{padding: 40px 24px;margin-top: -12px;border-radius: 16px;background-color: rgba(255, 255, 255, 0.5);}
.case__card-bottom-title{display: flex;align-items: center;gap: 48px;}
.case__card-bottom-title-check{width: 72px;}
.case__card-bottom-title > p{font-weight: 600;color: #3157a1;}
.case__item-check{width: 72.52%;margin-top: 16px;}
.case__note{padding: 16px;margin-top: 16px;background-color: #fff;}
.case__note > p{text-align: center;color: #3157a1;}

@media only screen and (max-width: 768px){
  .case{padding: var(--spacing-200) 0 var(--spacing-160);}
  .case__heading > span{font-size: var(--spacing-104);top: -32%;}
  .case__heading-title{font-size: var(--spacing-80);}
  .case__heading-subtitle{margin-top: var(--spacing-80);font-size: var(--spacing-40);line-height: 1.6;}
  .case__content{margin-top: var(--spacing-72);gap: var(--spacing-32);grid-template-columns: 1fr;}
  .case__card-heading-title{
    padding: var(--spacing-48);border-radius: var(--spacing-32) var(--spacing-32) 0 0;
    gap: var(--spacing-32);align-items: flex-start;flex-direction: column;
  }
  .case__card-heading-item{width: 33.15%;}
  .case__card-heading-title > h3{font-size: var(--spacing-40);}
  .case__card-tag {justify-content: flex-start;padding: var(--spacing-16) var(--spacing-24);}
  .case__card-tag > p{padding: 6px var(--spacing-24);font-size: var(--spacing-24);}
  .case__check-group{
    min-height: auto;border-radius: 0 0 var(--spacing-32) var(--spacing-32);
    padding: var(--spacing-48) var(--spacing-48) var(--spacing-80);
  }
  .case__card-bottom{padding: var(--spacing-80) var(--spacing-48);border-radius: var(--spacing-32);}
  .case__card-bottom-title{gap: var(--spacing-48);}
  .case__card-bottom-title > p{font-size: var(--spacing-32);}
  .case__item-check{width: 100%;margin-top: var(--spacing-32);}
  .case__note > p{text-align: left;font-size: var(--spacing-24);}
}

/* cta */
.cta{
  padding-top: 104px;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/cta__back-01@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.cta__heading{text-align: center;position: relative;}
.cta__heading-title{font-size: 20px;font-weight: 600;line-height: 1;color: #fbfe8e;}
.cta__heading-logo{width: 56%;margin: 0 auto;}
.cta__heading-subtitle{font-size: 20px;font-weight: 600;line-height: 1;color: #fff;margin: 16px auto;}
.cta__heading .cta-box__btn{width: 44.4%;margin: 0 auto;display: inline-block;position: relative;z-index: 2;}
.cta__heading-text{font-size: 14px; font-weight: 600;line-height: 1;letter-spacing: -0.5px;color: #fbfe8e;margin: 16px auto;}
.cta__heading-note{padding-bottom: 24px;font-size: 12px;font-weight: 600;line-height: 1;color: #fff;}
.cta__heading-photo{width: 88.4%;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}
.cta__bottom{border: 2px solid #fff;border-radius: 20px;position: relative;z-index: 2;}
.cta__bottom-heading{padding: 32px;text-align: center;}
.cta__bottom-heading-title{font-size: 24px;font-weight: 600;line-height: 1;color: #fbfe8e;}
.cta__bottom-heading-title > span{font-size: 70%;font-weight: 400;}
.cta__bottom-card {padding: 24px;border-radius: 0 0 16px 16px;background-color: #fff;display: grid;gap: 16px;grid-template-columns: max-content max-content;justify-content: center;}
.cta__bottom-item{display: flex;align-items: center;gap: 8px;}
.cta__bottom-item-check{width: 24px;}
.cta__bottom-item > p{font-weight: 600;line-height: 1.4;color: #ff3716;}
.cta__bottom-text{text-align: center;}
.cta__bottom-text-01{margin: 20px auto 32px;font-weight: 600;line-height: 1;color: #fff;}
.cta__bottom-text-02{font-size: 64px;font-weight: 600;line-height: 0.65;color: #fbfe8e;opacity: .3;}

/* cta-privilege */
.cta-privilege{
  padding: 32px 0 56px; 
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/cta__back-02@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.cta-privilege__heading{width: 60%;margin: 0 auto;}
.cta-privilege__card{display: grid;gap: 16px;grid-template-columns: repeat(3, 1fr);margin-top: 16px;}
.cta-privilege__card-item{display: flex;align-items: center;gap: 12px;background-color: #fff;padding: 6px 12px;}
.cta-privilege__card-item-01{border-radius: 20px 0 0 20px;}
.cta-privilege__card-item-03{border-radius: 0 20px 20px 0;}
.cta-privilege__card--item-check{width: 40%;}
.cta-privilege__card-item > p{display: grid;gap: 8px;font-size: 18px;font-weight: 600;line-height: 1.4;letter-spacing: -0.5px;color: #ff3716;}
.cta-privilege__card-item > p > span{font-size: 12px;color: #908986;}

@media only screen and (max-width: 768px){
  .cta{padding: var(--spacing-128) 0 var(--spacing-16);}
  .cta__heading-title{font-size: var(--spacing-40);}
  .cta__heading-logo{width: 93.73%;margin-top: var(--spacing-32);}
  .cta__heading-subtitle{font-size: var(--spacing-32);margin: var(--spacing-64) auto var(--spacing-32);}
  .cta__heading .cta-box__btn{width: 93.73%;}
  .cta__heading-text{font-size: var(--spacing-32);margin: var(--spacing-40) auto;}
  .cta__heading-note{padding-bottom: var(--spacing-88);font-size: var(--spacing-20);}
  .cta__heading-photo{width: 129%;bottom: -14%;}
  .cta__bottom{border-radius: var(--spacing-40);}
  .cta__bottom-heading{padding: var(--spacing-40);}
  .cta__bottom-heading-title{font-size: var(--spacing-48);}
  .cta__bottom-card {padding: var(--spacing-48);border-radius: 0 0 var(--spacing-32) var(--spacing-32);gap: var(--spacing-32);grid-template-columns: 1fr;}
  .cta__bottom-item{gap: var(--spacing-16);align-items: flex-start;}
  .cta__bottom-item-check{min-width: 24px;}
  .cta__bottom-item > p{padding-top: 2px;}
  .cta__bottom-text-01{margin: var(--spacing-48) auto var(--spacing-64);}
  .cta__bottom-text-02{font-size: var(--spacing-80);letter-spacing: -2px;white-space: nowrap;}

  .cta-privilege{padding: var(--spacing-112) 0;}
  .cta-privilege__heading{width: 86.89%;}
  .cta-privilege__card{gap: var(--spacing-32);grid-template-columns: 1fr;margin-top: var(--spacing-32);}
  .cta-privilege__card-item{gap: var(--spacing-24);padding: var(--spacing-12) var(--spacing-24);}
  .cta-privilege__card-item-01{border-radius: var(--spacing-40) var(--spacing-40) 0 0;}
  .cta-privilege__card-item-03{border-radius: 0 0 var(--spacing-40) var(--spacing-40);}
  .cta-privilege__card-item > p{gap: var(--spacing-16);font-size: var(--spacing-40);}
  .cta-privilege__card-item > p > span{font-size: var(--spacing-24);}
}

/* problem */
.problem{
  padding: 100px 0 120px;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/problem__back@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.problem__heading-title{font-size: 32px;font-weight: 600;line-height: 1;color: #598be5;padding-left: 8px;}
.problem__heading-subtitle{font-size: 40px;font-weight: 600;line-height: 1;color: #fff;margin-top: 32px;}
.problem__card{display: grid;gap: 16px;grid-template-columns: repeat(2, 1fr);margin: 32px auto 40px;}
.problem__card-item{background-color: #fff;border-radius: 20px;display: flex;align-items: center;padding: 16px 24px;gap: 20px;}
.problem__item{width: 26px;}
.problem__card-item > p{font-weight: 600;line-height: 1.4;color: #3157a1;}
.problem__text-02{margin-top: 16px;}

@media only screen and (max-width: 768px){
  .problem{padding: var(--spacing-160) 0;background-image: url("../images/problem__back-sp@2x.webp");}
  .problem__heading-title{font-size: var(--spacing-64);}
  .problem__heading-subtitle{font-size: var(--spacing-80);margin-top: var(--spacing-64);}
  .problem__card{gap: var(--spacing-32);grid-template-columns: 1fr;margin: var(--spacing-48) auto;}
  .problem__card-item{border-radius: var(--spacing-40);padding: var(--spacing-32);gap: var(--spacing-40);}
  .problem__card-item > p{font-size: var(--spacing-32);}
  .problem__text-02{margin-top: var(--spacing-32);}
}

/* reason */
.reason{
  padding: 160px 0 120px;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/reason__back@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.reason__heading{position: relative;}
.reason__heading > h2{font-size: 40px;font-weight: 600;line-height: 1;color: #ff5825;position: relative;z-index: 2;}
.reason__heading > h2 > span{font-size: 140%;font-style: italic;padding-right: 8px;}
.reason__heading > p{font-size: 128px;font-weight: 600;line-height: 1;color: #FFC18D;opacity: .4;position: absolute;top: -156%;left: 0;z-index: 1;}
.reason__card{display: grid;gap: 80px;margin-top: 64px;}
.reason-layout {display: grid;grid-template-columns: 50% 1fr;column-gap: 32px;align-items: flex-end;}
.reason-layout__left {display: flex;flex-direction: column;gap: 24px;}
.reason__card-item-title > h3{font-size: 24px;font-weight: 600;line-height: 1;color: #ff5825;}
.reason__card-item-text > p{font-weight: 600;line-height: 1.4;color: #000;}
.reason__item{width: 48%;margin-left: auto;}
.reason__photo > img{border-radius: 20px;}

@media only screen and (max-width: 768px){
  .reason{padding: var(--spacing-200) 0 var(--spacing-128);}
  .reason__heading > h2{font-size: var(--spacing-72);text-align: center;}
  .reason__heading > p{font-size: var(--spacing-160);top: -100%;left: 50%; left: 50%;transform: translateX(-50%);}
  .reason__card{gap: var(--spacing-112);margin-top: var(--spacing-80);}
  .reason-layout {display: flex;flex-direction: column;gap: var(--spacing-48);}
  .reason-layout__left {display: contents;}
  .reason-box-1{display: none;}
  .reason-box-2 {order: 1;}
  .reason-box-3 {order: 2;}
  .reason-box-4 {order: 3;}
  .reason-box-5 {order: 4;}
  .reason__card-item-title{text-align: left;width: 100%;}
  .reason__card-item-title > h3{font-size: var(--spacing-48);line-height: 1.4;}
  .reason__card-item-text > p{font-size: var(--spacing-32);}
  .reason__photo > img{border-radius: var(--spacing-40);}
}

/* feature */
.feature__heading{
  padding: 80px 0 120px;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/feature__back-top@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;

  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
}
.feature{
  padding: 160px 0 120px;
  margin-top: -120px;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/feature__back@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.feature__card{display: grid;gap: 80px;}
.feature .reason-layout {align-items: flex-start;gap: 56px;}
.feature__card-item-top{width: 45.94%;}
.feature__card-item-title > h3{font-size: 24px;font-weight: 600;line-height: 1.6;color: #263275;}
.feature__card-item-text{display: grid;gap: 24px;}
.feature__card-item-text > p{font-weight: 600;line-height: 1.6;color: #3157a1;}
.feature__line{width: 100%;height: 1px;background-color: #263275;}
.feature__card-content{display: grid;gap: 12px;}
.feature__card-content-item{background-color: rgba(255, 255, 255, .4);border-radius: 20px;}
.feature__card-content-02 > .feature__card-content-item{padding: 20px;display: flex;align-items: center;gap: 16px;}
.feature__card-content-03 > .feature__card-content-item{padding: 32px 20px;display: grid;gap: 20px;}
.feature__card-content-item > img{width: 32px;}
.feature__card-content-item > h4{font-size: 20px;font-weight: 600;line-height: 1.6;color: #3157a1;}
.feature__card-content-item > p{font-weight: 600;line-height: 1.6;color: #000;}
.feature__media{position: relative;}
.feature__photo{padding-top: 80px;width: 150%;position: absolute;top: 0;left: 0;}
.feature__photo-02{left: auto;right: 0;}
.feature__photo-01 img,
.feature__photo-03 img{border-radius: 20px 0 0 20px;}
.feature__photo-02 img{border-radius: 0 20px 20px 0;}

@media only screen and (max-width: 768px){
  .feature__heading{padding: var(--spacing-128) 0 var(--spacing-240);clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 50% 100%, 0% 92%);}
  .feature{padding: var(--spacing-200) 0 var(--spacing-128);/* margin-top: var(--spacing--200); */}
  .feature__card{gap: var(--spacing-128);}
  .feature .reason-layout {gap: var(--spacing-48);}
  .feature__card-item-top{width: 100%;}
  .feature__card-item-title > h3 {font-size: var(--spacing-48);}
  .feature__card-item-text{gap: var(--spacing-48);}
  .feature__card-item-text > p{font-size: var(--spacing-32);}
  .feature__line{display: none;}
  .feature__card-content{gap: var(--spacing-24);}
  .feature__card-content-item{border-radius: var(--spacing-40);}
  .feature__card-content-02 > .feature__card-content-item{padding: var(--spacing-40);gap: var(--spacing-32);}
  .feature__card-content-03 > .feature__card-content-item{padding: var(--spacing-64) var(--spacing-40);gap: var(--spacing-40);}
  .feature__card-content-item > h4{font-size: var(--spacing-40);}
  .feature__card-content-item > p{font-size: var(--spacing-32);}
  .feature__media{width: 100%;min-height: var(--spacing-480);}
  .feature__photo{padding-top: 0;width: 120%;}
  .feature__photo-01 img,
  .feature__photo-03 img{border-radius: var(--spacing-40) 0 0 var(--spacing-40);}
  .feature__photo-02 img{border-radius: 0 var(--spacing-40) var(--spacing-40) 0;}
}

/* flow */
.flow{padding: 160px 0 120px;background-color: #F4F1EB;}
.flow__heading{position: relative;}
.flow__heading > h2{font-size: 32px;font-weight: 600;line-height: 1;color: #ff5825;text-align: center;position: relative;z-index: 2;}
.flow__heading > p{
  font-size: 104px;font-weight: 600;line-height: 1;color: #FFC18D;opacity: .4;
  position: absolute;top: -210%;left: 50%;transform: translateX(-50%);z-index: 1;
}
.flow__card{margin-top: 40px;display: flex;align-items: flex-start;justify-content: center;gap: 40px;}
.flow__card-item{
  padding: 48px 32px 32px;border-radius: 20px;background-color: #fff;box-shadow: 0 0px 24px rgba(0, 0, 0, 0.1);
  display: flex;align-items: center;justify-content: flex-start;flex-direction: column;gap: 16px;position: relative;flex: 1;min-height: 484px;
}
.flow__card-item-title{width: 40%;margin: 0 auto;}
.flow__card-item-subtitle{text-align: center;font-size: 24px;font-weight: 600;line-height: 1;color: #000;}
.flow__photo{width: 80%;margin: 0 auto;}
.flow__card-item-text{font-weight: 500;line-height: 1.4;color: #000;}
.flow__arrow{position: absolute;top: 50%;right: -32px;transform: translateY(-50%);width: 32px;}

@media only screen and (max-width: 768px){
  .flow{padding: var(--spacing-240) 0 var(--spacing-160);}
  .flow__heading > h2{font-size: var(--spacing-64);}
  .flow__heading > p{font-size: var(--spacing-160);top: -172%;}
  .flow__card{flex-direction: column;margin-top: var(--spacing-80);gap: var(--spacing-80);}
  .flow__card-item{
    padding: var(--spacing-80) var(--spacing-64) var(--spacing-64);
    border-radius: var(--spacing-40);gap: var(--spacing-32);min-height: auto;
  }
  .flow__card-item-subtitle{font-size: var(--spacing-48);}
  .flow__card-item-text{font-size: var(--spacing-32);}
  .flow__arrow{top: auto;bottom: -28px;left: 50%;transform: translateX(-50%);width: 48px;}
}

/* faq */
.faq{padding: 96px 0 120px;background-color: #e8e8e8;}
.faq__heading > h2{font-size: 36px;font-weight: 600;line-height: 1;color: #FFC18D;opacity: .4;}
.faq__heading > p{font-size: 40px;font-weight: 600;line-height: 1;color: #ff3716;margin: 32px auto 56px;}

@media only screen and (max-width: 768px){
  .faq{padding: var(--spacing-128) 0 var(--spacing-160);}
  .faq__heading{text-align: center;}
  .faq__heading > h2{font-size: var(--spacing-72);}
  .faq__heading > p{font-size: var(--spacing-80);margin: var(--spacing-64) auto var(--spacing-112);}
}

/* info */
.info{
  padding: 120px 0;
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/info__back@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.info__card{display: flex;align-items: center;gap: 56px;}
.info__card-content,.info__card-content-media{flex: 1;}
.info__card-content-heading > h2{font-size: 64px;font-weight: 600;line-height: 1;color: #ff7a46;}
.info__card-content-heading > p{font-size: 40px;font-weight: 600;line-height: 1;color: #fff;margin-top: 24px;}
.info__card-content > article{margin-top: 24px;padding-left: 8px;display: grid;gap: 24px;font-weight: 600;line-height: 1.6;color: #fff;}
.info__card-content-sign{width: 60%;}

@media only screen and (max-width: 768px){
  .info{padding: var(--spacing-160) 0;background-image: url("../images/info__back-sp@2x.webp");}
  .info__card{gap: var(--spacing-112);flex-direction: column;}
  .info__card-content-heading > h2{font-size: var(--spacing-128);}
  .info__card-content-heading > p{font-size: var(--spacing-80);margin-top: var(--spacing-48);}
  .info__card-content > article{margin-top: var(--spacing-48);gap: var(--spacing-48);}
  .info__card-content-sign{width: 80%;}
}

/* form */
.form{
  padding: 200px 0 120px;
  background-color: #f3f0ea;
}
.form__heading{
  text-align: center;
}
.form__heading-title{
  position: relative;
}
.form__heading-title-tag{
    font-size: 104px;
    font-weight: 600;
    line-height: 1;
    color: #FFC18D;
    opacity: .4;
    position: absolute;
    top: -200%;
    left: 50%;
    transform: translateX(-50%);
}
.form__heading-line{
    width: 80px;
    height: 2px;
    border-radius: 1000px;
    background-color: #ff7a46;
    margin: 32px auto;
}
.form__heading-title-text{
    font-size: 40px;font-weight: 600;line-height: 1;color: #ff7a46;
}
.form__heading-subtitle{
    font-size: 16px;font-weight: 500;line-height: 1;color: #000;
}
.form .cta__bottom{
    margin: 40px auto;
}
.form .cta__bottom-heading{
  background-image: 
    /* linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), */
    url("../images/cta__back-01@2x.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;   
  border-radius: 20px 20px 0 0;
}
.form__note{
    text-align: center;font-size: 12px;
}
.form a {
    text-decoration: underline;
}

@media only screen and (max-width: 768px){
.form{
  padding: var(--spacing-200) 0 var(--spacing-112);
}
.form__heading-title-tag{
    font-size: var(--spacing-144);
    top: -72%;
}
.form__heading-line{
    width: var(--spacing-160);
    margin: var(--spacing-64) auto;
}
.form__heading-title-text{
    font-size: var(--spacing-80);line-height: 1.2
}
.form__heading-subtitle{
    font-size: var(--spacing-32);line-height: 1.6
}
.form .cta__bottom{
    margin: var(--spacing-80) auto;
}
.form .cta__bottom-heading{
  border-radius: var(--spacing-40) var(--spacing-40) 0 0;
}
}

.footer{
    background-color: #ff7a46;
    color: #fff;
    padding: 40px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.footer__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer__left{
    display: flex;
    align-items: center; 
    gap: 24px;
}
.footer__left a{
    text-decoration: underline;
}
@media only screen and (max-width: 768px){
.footer__inner{
    flex-direction: column;
    gap: 24px;
}
}