@import "tokens.css";

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

===================================== */
#contents{
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  background-color: #ffffff;
  scrollbar-gutter: stable both-edges;

  @media (width >= 750px) {
    .pc-only{
      display: block;
    }
    .sp-only{
      display: none;
    }
  }

  @media (width < 750px) {
    .pc-only{
      display: none;
    }
    .sp-only{
      display: block;
    }
  }

  a{
    color: var(--color-blue-01);
  }

  @media (width < 750px) {
    img{
      max-width: 100%;
    }
  }
}

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

===================================== */
#contents > .header{
  container-type: inline-size;
  position: relative;
  @media (width >= 750px) {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
  }




  .header__logo{
    width: min(calc((150/750)*100vw),125px);
    position: absolute;
    top: min(calc((20/750)*100vw),20px);
    left: min(calc((20/750)*100vw),20px);
    z-index: 2;
  }
}

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

===================================== */
#contents > .footer{
  container-type: inline-size;
  padding-block: min(calc((70/750)*100vw),70px) min(calc((36/750)*100vw),36px);
  padding-inline: min(calc((32/750)*100vw),32px);
  background: #ffffff;
  border-top: solid 1px #d1d1d1;

  .footer__logo{
    width: min(calc((190/750)*100vw),190px);
    margin-block-start: min(calc((60/750)*100vw),60px);
    margin-inline: auto;
    @media (width >= 750px) {
      width: 100px;
    }

    img{
      width: 100%;
    }
  }
}

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

===================================== */
#contents{
  *{
    box-sizing: border-box;
  }
  .lp-link{
    display: inline-block;
    background: transparent;
    border: none;
    color: var(--color-blue-01);
    font-size: initial;
    text-decoration: underline;
    &:not(.lp-link--arrow-blue,button){
      &::before{
        content: "\003E";
        display: inline-block;
        margin-inline-end: 0.5em;
      }
    }
  }
  .lp-link--arrow-blue{
    line-height: 1.5;
    &::before{
      content: " ";
      display: inline-block;
      width: 1em;
      height: calc(1em * 1.5);
      margin-inline-end: 0.5em;
      background: url(../img/icon_link_arrow_blue.png) no-repeat center center;
      background-size: 100%;
      vertical-align: bottom;
    }
  }

  .lp-btn{
    display: inline-block;
  }

  .lp-list-notion{
    &:not(.lp-list-notion--indent){
      li{
        padding-inline-start: 1em;
        text-indent: -1em;
      }
    }
    li{
      font-size: min(calc((28/750)*100vw),28px);
      @media (width >= 750px) {
        font-size: 16px;
      }
      a{
        display: inline;
      }
    }
  }
  .lp-list-notion--indent{
    li{
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: flex-start;
      &+li{
        margin-block-start: 1em;
      }
      >:nth-child(1){
        padding-inline-end: 0.5em;
      }
    }
  }

  .lp-cta-content{
    container-type: inline-size;
    background: var(--color-yellow-02);

    .lp-cta-content__inner{
      padding-block: min(calc((125/750)*100vw),125px);
      @media (width >= 750px){
        max-width: 1000px;
        padding-block: 80px;
        margin-inline: auto;
      }
      &:has(.lp-cta-content__list){
        padding-block-end: min(calc((65/750)*100vw),65px);
      }
    }

    .lp-cta-content__heading{
      text-align: center;
      @media (width >= 750px){
        margin-block-end: 20px;
      }
      @media (width < 750px) {
        width: min(calc((560/750)*100vw),560px);
        margin-inline: auto;
        margin-block-end: min(calc((20/750)*100vw),20px);
      }
    }

    .lp-cta-content__button{
      text-align: center;
      @media (width >= 750px){
        margin-block-end: 20px;
      }
      @media (width < 750px) {
        width: min(calc((686/750)*100vw),686px);
        margin-inline: auto;
        margin-block-end: min(calc((20/750)*100vw),20px);
      }
    }

    .lp-cta-content__link{
      text-align: center;
    }

    .lp-cta-content__list{
      @media (width >= 750px){
        margin-block-start: 55px;
      }
      @media (width < 750px) {
        width: min(calc((686/750)*100vw),686px);
        margin-inline: auto;
        margin-block-start: min(calc((75/750)*100vw),75px);
      }
    }

  }

  .lp-block{
    @media (width >= 750px){
      max-width: 1120px;
      margin-inline: auto;
      padding-block-end: 60px;
      padding-inline: 100px;
      font-size: 20px;
    }
    @media (width < 750px) {
      padding-block-end: min(calc((70/750)*100vw),70px);
      padding-inline: min(calc((30/750)*100vw),30px);
    }

    &:not(.lp-block--sub){
      @media (width >= 750px){
        padding-block-start: 60px;
      }
      @media (width < 750px) {
        padding-block-start: min(calc((70/750)*100vw),70px);
      }
    }
  }
  .lp-block--white{
    background-color: #ffffff;
    border-radius: 10px;
  }
  .lp-block--sub{
    position: relative;
    .lp-block__sub{
      position: absolute;
      transform: translate(50%,0);
      right: 50%;
      z-index: 1;
    }
  }

  .lp-heading--h2{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    @media (width >= 750px){
      min-height: 357px;
      margin-block-end: 75px;
      background: url(../img/bg_h2.png) no-repeat center center;
    }
    @media (width < 750px) {
      min-height: min(calc((353/750)*100vw),353px);
      margin-block-end: min(calc((75/750)*100vw),75px);
      background: url(../img/sp/bg_h2.png) no-repeat center top;
      background-size: 100%;
    }
  }
  .lp-heading--h2--sub{
    position: relative;
    .lp-heading--h2__sub{
      position: absolute;
      right: 50%;
      transform: translate(50%,0);
      @media (width >= 750px){
        top: -30px;
      }
      @media (width < 750px) {
        top: max(calc((40/750)*100vw*-1),-40px);
      }
    }
  }

  .lp-heading--h3{
    padding-block: min(calc((30/750)*100vw),30px);
    margin-block: min(calc((50/750)*100vw),50px);
    background: #f2f2f2;
    color: var(--color-blue-01);
    font-weight: bold;
    text-align: center;
    @media (width >= 750px) {
      padding-block: 10px;
      margin-block: 35px;
      font-size: 28px;
    }
  }

}

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

===================================== */
.section-fv{
  container-type: inline-size;

  .section-fv__heading{
    background: var(--color-blue-02);
    position: relative;
    h1{
      text-align: center;
      position: relative;
      z-index: 1;
      overflow: hidden;
      @container (width >= 750px){
        min-height: 448px;
        padding-block: 40px 376px;
      }
      @container (width < 750px) {
        padding-block: min(calc((90/750)*100vw),90px) min(calc((370/750)*100vw),370px);
        padding-inline: min(calc((30/750)*100vw),30px);
      }

      img{
        position: relative;
        z-index: 1;
      }

      &::after {
        content: "";
        display: block;
        width: 100%;
        background: url(../img/sp/bg_fv.png) no-repeat center top;
        background-size: 100%;
        position: absolute;
        top: 0;
        right: 50%;
        transform: translate(50%,0);
        @container (width >= 750px){
          width: 2936px;
          height: 100%;
          background: url(../img/bg_fv.png) no-repeat center top;
        }
        @container (width < 750px) {
          padding-block-start: min(calc((520/750)*100vw),520px);
        }
      }
    }
    .section-fv__heading-box{
      width: 100%;
      position: absolute;
      bottom: 0;
      @container (width >= 750px){
        width: 920px;
        margin-block-start: 45px;
        margin-inline: auto;
        transform: translate(50%,0);
        right: 50%;
        z-index: 1;
      }
      .section-fv__heading-box__inner{
        position: relative;
        z-index: 1;
      }
    }
    .section-fv__heading-illust{
      @container (width >= 750px){
        padding-inline-end: 30px;
        text-align: right;
      }
      @container (width < 750px) {
        width: min(calc((455/750)*100vw),455px);
        padding-inline-end: 0;
        margin-inline-start: auto;
      }
    }
    .section-fv__heading-ecocute{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      @container (width < 750px) {
        width: min(calc((320/750)*100vw),320px);
        left: min(calc((30/750)*100vw),30px);
      }
    }

  }

  .section-fv__cta{
    .lp-cta-content__inner{
      @container (width >= 750px){
        padding-block-start: 130px;
      }
    }
  }

}

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

===================================== */
.section-01{
  container-type: inline-size;
  background: #0073bd;
  @media (width >= 750px){
    padding-block: 0 120px;
  }
  @media (width < 750px) {
    padding-block: 0 min(calc((160/750)*100vw),160px);
  }

  .section-01__heading{
    padding-inline: min(calc((30/750)*100vw),30px);
    text-align: center;
    position: relative;
    overflow: hidden;
    @container (width >= 750px){
      padding-block-start: 200px;
      margin-block-end: 150px;
    }
    @container (width < 750px) {
      padding-block-start: min(calc((95/750)*100vw),95px);
      margin-block-end: min(calc((100/750)*100vw),100px);
    }

    &::before{
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      top: 0;
      right: 50%;
      transform: translate(50%,0);
      @container (width >= 750px){
        width: 3000px;
        height: 379px;
        background: var(--color-yellow-02) url(../img/bg_01_h2.png) no-repeat left top;
      }
      @container (width < 750px) {
        width: 102vw;
        height: min(calc((95/750)*100vw),95px);
        background: var(--color-yellow-02) url(../img/sp/bg_01_h2.png) no-repeat left top;
        background-size: 100%;
      }
    }

    h2{
      position: relative;
      z-index: 1;
      @container (width < 750px) {
        padding-block-start: min(calc((100/750)*100vw),100px);
      }
    }
  }

  .section-01__outline{
    padding-inline: min(calc((30/750)*100vw),30px);
  }

  .section-01__block{
    @container (width >= 750px){
      padding-block-start: 110px;
      margin-block-start: 70px;
    }
    @container (width < 750px) {
      padding-block-start: min(calc((150/750)*100vw),150px);
      margin-block-start: min(calc((50/750)*100vw),50px);
    }

    .lp-block__sub{
      @container (width >= 750px){
        top: -70px;
      }
      @container (width < 750px) {
        width: min(calc((150/750)*100vw),150px);
        top: max(calc((50/750)*100vw*-1),-50px);
      }
    }

    .section-01__block__img-01{
      @container (width < 750px) {
        width: min(calc((560/750)*100vw),560px);
        margin-inline: auto;
      }
    }

    .section-01__block__img-02{
      margin-block: min(calc((40/750)*100vw),40px);
    }

    .section-01__block__img-03{
      margin-block-end: min(calc((55/750)*100vw),55px);
      @container (width >= 750px) {
        margin-block-end: 30px;
      }
    }

    .section-01__block__img-04{
      margin-block-end: min(calc((70/750)*100vw),70px);
      @container (width >= 750px) {
        margin-block-end: 40px;
      }
    }

  }

}

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

===================================== */
.section-02{
  container-type: inline-size;
  padding-block: 0 min(calc((160/750)*100vw),160px);
  background: var(--color-blue-04);
  @media (width >= 750px){
    padding-block: 0 120px;
  }

  .section-02__heading{
    @container (width < 750px){
      margin-block-end: min(calc((140/750)*100vw),140px) !important;
    }
    .lp-heading--h2__sub{
      @container (width < 750px) {
        width: min(calc((475/750)*100vw),475px);
      }
    }
    h2{
      @container (width < 750px) {
        width: min(calc((410/750)*100vw),410px);
        margin-inline: auto;
      }
    }
  }

  .section-02__outline{
    padding-inline: min(calc((30/750)*100vw),30px);
  }

  .section-02__block{
    padding-block-start: min(calc((100/750)*100vw),100px);
    @container (width >= 750px){
      padding-block-start: 90px;
      margin-block-start: 130px;
    }
    .lp-block__sub{
      @container (width >= 750px){
        top: -50px;
      }
      @container (width < 750px) {
        width: min(calc((558/750)*100vw),558px);
        top: max(calc((55/750)*100vw*-1),-55px);
      }
    }

    .section-02__block__img-02{
      @container (width < 750px) {
        width: min(calc((560/750)*100vw),560px);
        margin-inline: auto;
      }
    }
  }
}

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

===================================== */
.section-03{
  container-type: inline-size;
  padding-block: min(calc((175/750)*100vw),175px) min(calc((160/750)*100vw),160px);
  background: var(--color-blue-03);
  @media (width >= 750px){
    padding-block: 150px 120px;
  }
  @media (width < 750px) {
    padding-inline: min(calc((30/750)*100vw),30px);
  }

  .section-03__heading{
    margin-block-end: min(calc((150/750)*100vw),150px);
    @container (width >= 750px){
      margin-block-end: 120px;
    }
  }

  .section-03__block{
    padding-block-start: 0;
    margin-block-start: min(calc((60/750)*100vw),60px);
    @container (width >= 750px){
      margin-block-start: 60px;
    }
    .lp-block__sub{
      top: max(calc((60/750)*100vw*-1),-60px);
      @container (width >= 750px){
        top: -60px;
      }
      @container (width < 750px) {
        width: min(calc((250/750)*100vw),250px);
      }
    }
    .section-03__block__img-first{
      position: relative;
      z-index: 1;
    }
    .section-03__block__img-05{
      @container (width < 750px) {
        width: min(calc((560/750)*100vw),560px);
        margin-inline: auto;
      }
    }
  }
}

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

===================================== */
.section-04{
  container-type: inline-size;
  padding-block: 0 min(calc((160/750)*100vw),160px);
  background: var(--color-blue-04);
  @media (width >= 750px){
    padding-block: 0 120px;
  }

  .section-04__heading{
    .lp-heading--h2__sub{
      @container (width < 750px) {
        width: min(calc((475/750)*100vw),475px);
      }
    }
    h2{
      @container (width < 750px) {
        width: min(calc((480/750)*100vw),480px);
        margin-block-start: min(calc((20/750)*100vw),20px);
      }
    }
  }

  .section-04__outline{
    padding-inline: min(calc((30/750)*100vw),30px);
  }

  .section-04__block{
    @container (width >= 750px){
      max-width: 1120px;
      margin-inline: auto;
    }

    .section-04__block__img-01{
      margin-block-end: min(calc((45/750)*100vw),45px);
    }
    .section-04__block__img-02{
      margin-block-end: min(calc((80/750)*100vw),80px);
      @container (width < 750px) {
        width: min(calc((485/750)*100vw),485px);
        margin-inline: auto;
      }
    }

    .section-04__block-list{
      @container (width >= 750px){
        max-width: 920px;
        margin-inline: auto;
      }
    }
  }
}

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

===================================== */
.section-05{
  container-type: inline-size;
  padding-block: min(calc((175/750)*100vw),175px) min(calc((160/750)*100vw),160px);
  padding-inline: min(calc((30/750)*100vw),30px);
  background: var(--color-blue-03);
  @media (width >= 750px){
    padding-block: 150px 120px;
  }

  .section-05__heading{
    margin-block-end: min(calc((50/750)*100vw),50px);
    @container (width >= 750px){
      margin-block-end: 120px;
    }
  }
}

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

===================================== */
.section-06{
  container-type: inline-size;
  padding-block: 0 min(calc((160/750)*100vw),160px);
  padding-inline: min(calc((30/750)*100vw),30px);
  background: #0292d6;
  @media (width >= 750px){
    padding-block: 0 120px;
  }

  .section-06__inner{
    @container (width >= 750px){
      max-width: 920px;
      margin-inline: auto;
    }
  }

  .section-06__heading{
    padding-block: 10px;
    position: relative;
    .section-06__heading-sub{
      position: absolute;
      top: max(calc((50/750)*100vw*-1),-50px);
      right: 50%;
      transform: translate(50%,0);
      @container (width >= 750px){
        top: -50px;
      }
      @container (width < 750px) {
        width: min(calc((250/750)*100vw),250px);
      }
    }
    h2{
      position: relative;
      z-index: 1;
    }
  }
}

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

===================================== */
.section-07{
  container-type: inline-size;
  padding-block: 0 min(calc((160/750)*100vw),160px);
  @media (width >= 750px){
    padding-block: 0 120px;
  }

  .section-07__heading{
    .lp-heading--h2__sub{
      @container (width < 750px) {
        width: min(calc((475/750)*100vw),475px);
      }
    }
    h2{
      @container (width < 750px) {
        width: min(calc((600/750)*100vw),600px);
      }
    }
  }

  .section-07__outline{
    padding-inline: min(calc((30/750)*100vw),30px);
  }

  .section-07__block{
    @container (width >= 750px){
      max-width: 1120px;
      margin-inline: auto;
    }
    .section-07__block-text{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      @container (width >= 750px){
        font-size: 30px;
      }
    }
  }

}

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

===================================== */
.lp-dialog {
  padding: 0;
  background: transparent;
  border: none;
  transition: 0.4s;
  .lp-dialog__inner {
    padding: min(calc((20/750)*100vw),20px) min(calc((10/750)*100vw),10px);
    height: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    border: solid 3px var(--color-blue-01);
    border-radius: 10px;
    position: relative;
    @media (width >= 750px){
      max-width: 1000px;
      padding: 60px 40px;
    }

    .lp-dialog__body{
      max-height: 90dvh;
      padding-inline: min(calc((10/750)*100vw),10px);
      overflow-y: auto;
      @media (width >= 750px){
        padding-inline: 20px;
      }
    }

    img{
      max-width: 100%;
    }
  }
  &.in-transition,
  &.in-transition::backdrop {
    opacity: 0;
  }

  &::backdrop {
    background: rgb(0 0 0 / 0.75);
    backdrop-filter: blur(4px);
    opacity: 1;
    transition: 0.4s;
  }

  .lp-dialog__close{
    width: min(calc((60/750)*100vw),60px);
    height: min(calc((60/750)*100vw),60px);
    background: transparent;
    position: absolute;
    top: min(calc((30/750)*100vw),30px);
    right: min(calc((30/750)*100vw),30px);
    @media (width >= 750px){
      width: 40px;
      height: 40px;
      top: 40px;
      right: 40px;
    }

    img{
      max-width: 100%;
    }
  }

  .lp-dialog__heading{
    margin-block: min(calc((60/750)*100vw),60px);
    @media (width >= 750px){
      margin-block: 50px;
    }

    h2{
      color: var(--color-blue-01);
      font-size: min(calc((40/750)*100vw),40px);
      font-weight: bold;
      text-align: center;
      @media (width >= 750px){
        font-size: 24px;
      }
    }
  }

  .lp-list-notion{
    li{
      text-decoration: underline;
    }
  }
}

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

===================================== */
#contents{
  .u-color-white{ color: #ffffff; }

  .u-tac{ text-align: center; }

  .u-mt5{ margin-top: min(calc((5/750)*100vw),5px); }
  .u-mt10{ margin-top: min(calc((10/750)*100vw),10px); }
  .u-mt15{ margin-top: min(calc((15/750)*100vw),15px); }
  .u-mt20{ margin-top: min(calc((20/750)*100vw),20px); }
  .u-mt25{ margin-top: min(calc((25/750)*100vw),25px); }
  .u-mt30{ margin-top: min(calc((30/750)*100vw),30px); }
  .u-mt35{ margin-top: min(calc((35/750)*100vw),35px); }
  .u-mt40{ margin-top: min(calc((40/750)*100vw),40px); }
  .u-mt45{ margin-top: min(calc((45/750)*100vw),45px); }
  .u-mt50{ margin-top: min(calc((50/750)*100vw),50px); }
  .u-mt55{ margin-top: min(calc((55/750)*100vw),55px); }
  .u-mt60{ margin-top: min(calc((60/750)*100vw),60px); }
  .u-mt65{ margin-top: min(calc((65/750)*100vw),65px); }
  .u-mt70{ margin-top: min(calc((70/750)*100vw),70px); }
  .u-mt75{ margin-top: min(calc((75/750)*100vw),75px); }
  .u-mt80{ margin-top: min(calc((80/750)*100vw),80px); }
  .u-mt85{ margin-top: min(calc((85/750)*100vw),85px); }
  .u-mt90{ margin-top: min(calc((90/750)*100vw),90px); }
  .u-mt95{ margin-top: min(calc((95/750)*100vw),95px); }
  .u-mt100{ margin-top: min(calc((100/750)*100vw),100px); }

  .u-mb5{ margin-bottom: min(calc((5/750)*100vw),5px); }
  .u-mb10{ margin-bottom: min(calc((10/750)*100vw),10px); }
  .u-mb15{ margin-bottom: min(calc((15/750)*100vw),15px); }
  .u-mb20{ margin-bottom: min(calc((20/750)*100vw),20px); }
  .u-mb25{ margin-bottom: min(calc((25/750)*100vw),25px); }
  .u-mb30{ margin-bottom: min(calc((30/750)*100vw),30px); }
  .u-mb35{ margin-bottom: min(calc((35/750)*100vw),35px); }
  .u-mb40{ margin-bottom: min(calc((40/750)*100vw),40px); }
  .u-mb45{ margin-bottom: min(calc((45/750)*100vw),45px); }
  .u-mb50{ margin-bottom: min(calc((50/750)*100vw),50px); }
  .u-mb55{ margin-bottom: min(calc((55/750)*100vw),55px); }
  .u-mb60{ margin-bottom: min(calc((60/750)*100vw),60px); }
  .u-mb65{ margin-bottom: min(calc((65/750)*100vw),65px); }
  .u-mb70{ margin-bottom: min(calc((70/750)*100vw),70px); }
  .u-mb75{ margin-bottom: min(calc((75/750)*100vw),75px); }
  .u-mb80{ margin-bottom: min(calc((80/750)*100vw),80px); }
  .u-mb85{ margin-bottom: min(calc((85/750)*100vw),85px); }
  .u-mb90{ margin-bottom: min(calc((90/750)*100vw),90px); }
  .u-mb95{ margin-bottom: min(calc((95/750)*100vw),95px); }
  .u-mb100{ margin-bottom: min(calc((100/750)*100vw),100px); }
}