@charset "utf-8";
/*--------------------
reset
--------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
  margin: 0;
}

li {
  list-style: none;
}

/*--------------------
webfont
--------------------*/
* {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #000;
  font-style: normal;
}

/*--------------------
root
--------------------*/
:root {
  --main: #3E4F96;
  --pink: #C350CD;
  --purple: #9592D8;
  --dark-purple: #6863C7;
  --yellow: #FFFAAF;

  --en: "Jost", sans-serif;
}

/*--------------------
common
--------------------*/
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  counter-reset: number 0;
  color: #242424;
  background-size: 50%;
  position: relative;
}

.no-scroll {
  overflow: hidden;
}

a {
  color: #242424;
  text-decoration: none;
  transition: ease-in .2s;

  &:hover {
    transition: ease-in .2s;
  }
}

picture {
  display: block;

  img {
    width: 100%;
  }
}

.container {
  width: calc(1440px + 4%);
  margin: auto;
  padding: 0 2%;

  @media (max-width: 1530px) {
    width: 100%;
    padding: 0 10%;
  }

  @media (max-width: 767px) {
    width: 100%;
    padding: 0 5%;
  }
}

.container_m {
  width: calc(1200px + 4%);
  margin: auto;
  padding: 0 2%;

  @media (max-width: 1300px) {
    width: 100%;
    padding: 0 10%;
  }

  @media (max-width: 767px) {
    padding: 0 5%;
  }
}

.container_s {
  width: calc(960px + 4%);
  margin: auto;
  padding: 0 2%;

  @media (max-width: 1100px) {
    width: 100%;
    padding: 0 10%;
  }

  @media (max-width: 767px) {
    padding: 0 5%;
  }
}

.pc {
  display: block;

  @media (max-width: 767px) {
    display: none;
  }
}

.sp {
  display: none;

  @media (max-width: 767px) {
    display: block;
  }
}

img {
  max-width: 100%;
}

.font-en {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/*--------------------
title
--------------------*/
h2 {
  font-weight: 700;
}

.base-ttl {
  text-align: center;
  margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);
  .base-ttl__en {
    font-size: clamp(40px, 27.872px + 3.234vw, 90px);
    color: var(--main);
  }
  .base-ttl__jp {
    font-size: clamp(14px, 8.906px + 1.358vw, 35px);
    margin-top: -10px;
  }
}

.balloon-ttl__en {
  font-size: clamp(27px, 23.359px + 0.971vw, 42px);
  color: var(--main);
  position: relative;
  display: inline-block;
  &::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -1.3em;
    display: inline-block;
    width: 1.1em;
    height: 1px;
    background: var(--main);
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  &::after {
    position: absolute;
    content: "";
    top: 50%;
    right: -1.3em;
    display: inline-block;
    width: 1.1em;
    height: 1px;
    background: var(--main);
    -webkit-transform: rotate(-70deg);
    transform: rotate(-70deg);
  }
}

/*--------------------
btn
--------------------*/
.fixed_btn {
  position: fixed;
  bottom: 0;
  z-index: 999;
  transition: all 0.2s 0.1s ease-in-out;
  width: 100%;
  a {
    display: block;
    background: var(--main);
    color: #fff;
    padding: 10px 15px;
    text-align: center;

    &::before {
      position: absolute;
      content: "";
      border: clamp(5px, 4.272px + 0.194vw, 8px) solid transparent;
      border-left: clamp(9px, 7.544px + 0.388vw, 15px) solid var(--yellow);
      top: 50%;
      right: clamp(22px, 15.204px + 1.812vw, 50px);
      transform: translateY(-50%);
    }

    &::after {
      position: absolute;
      content: "";
      border: clamp(5px, 4.272px + 0.194vw, 8px) solid transparent;
      border-left: clamp(9px, 7.544px + 0.388vw, 15px) solid var(--yellow);
      top: 50%;
      right: clamp(10px, 5.146px + 1.294vw, 30px);
      transform: translateY(-50%);
    }
  }
}

.cta-btn {
  a {
    display: block;
    font-size: clamp(16px, 12.602px + 0.906vw, 30px);
    margin: auto;
    text-align: center;
    color: #fff;
    background: var(--main);
    border-radius: 100px;
    padding: clamp(15px, 11.359px + 0.971vw, 30px);
    width: clamp(300px, 241.748px + 15.534vw, 540px);
    position: relative;
    overflow: hidden;

    &::before {
      position: absolute;
      content: "";
      border: clamp(5px, 4.272px + 0.194vw, 8px) solid transparent;
      border-left: clamp(9px, 7.544px + 0.388vw, 15px) solid var(--yellow);
      top: 50%;
      right: clamp(22px, 15.204px + 1.812vw, 50px);
      transform: translateY(-50%);
    }

    &::after {
      position: absolute;
      content: "";
      border: clamp(5px, 4.272px + 0.194vw, 8px) solid transparent;
      border-left: clamp(9px, 7.544px + 0.388vw, 15px) solid var(--yellow);
      top: 50%;
      right: clamp(10px, 5.146px + 1.294vw, 30px);
      transform: translateY(-50%);
    }

    .cta-btn__shine {
      position: absolute;
      top: 0;
      left: -150%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        -120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
      );
      transform: skewX(20deg);
      pointer-events: none;
    }
  }

  &:hover {
    .cta-btn__shine {
      animation: shine 0.8s ease;
    }
  }
}

@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}


/*--------------------
list
--------------------*/

/*--------------------
メイン
--------------------*/
/*--- ファーストビュー ---*/
body {
  position: relative;

  &::before {
    position: absolute;
    content: "";
    background: url(../img/fv-bg.webp) top center /100% no-repeat;
    margin: clamp(10px, 5.146px + 1.294vw, 30px) clamp(10px, 5.146px + 1.294vw, 30px) 0 clamp(10px, 5.146px + 1.294vw, 30px);
    inset: 0;
    z-index: -1;
  }

  &::after {
    position: absolute;
    content: "";
    background: url(../img/fv-logo.svg) top left /contain no-repeat;
    width: clamp(13px, 11.786px + 0.324vw, 18px);
    height: clamp(230px, 208.883px + 5.631vw, 317px);
    top: clamp(20px, 10.291px + 2.589vw, 60px);
    left: clamp(15px, 4.078px + 2.913vw, 60px);
    z-index: -1;
  }

  @media (max-width: 767px){
    &::before {
      background: url(../img/fv-bg.webp) top left 30% /300% no-repeat;
    }
  }
}

.fv {
  position: relative;
  width: 100%;
  overflow: visible;
  z-index: 0;

  .fv-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-left: clamp(40px, 1.165px + 10.356vw, 200px);
    padding-bottom: clamp(60px, 50.291px + 2.589vw, 100px);
    position: relative;

    @media (max-width: 767px){
      display: block;
      padding-left: 0;
    }

    &::before {
      position: absolute;
      content: "";
      background: url(../img/fv-en-bg.svg) bottom center /90% no-repeat;
      bottom: -5%;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 500px;
      z-index: -1;
    }

    .fv-copy__wrapper {
      .fv-balloon {
        width: clamp(310px, 234.757px + 20.065vw, 620px);
        @media (max-width: 767px){
          display: block;
          margin: auto;
        }
      }

      .fv-copy {
        img {
          width: clamp(295px, 202.767px + 24.595vw, 675px);

          @media (max-width: 767px){
            width: clamp(295px, 98.890px + 52.296vw, 500px);
            margin: auto;
          }
        }
      }
    }

    .fv-img {

      @media (max-width: 767px){
        margin-top: 20px;
      }

      img {
        width: clamp(355px, 149.903px + 54.693vw, 1200px);

        @media (max-width: 767px){
          width: clamp(355px, 24.962px + 88.01vw, 700px);
          display: block;
          margin-left: auto;
        }
      }
    }
  }

  .fv-feature {
    width: clamp(700px, 300.000px + 52.083vw, 1300px);
    margin: -50px auto clamp(30px, 22.718px + 1.942vw, 60px);

    @media (max-width: 767px){
      width: clamp(315px, 221.553px + 24.919vw, 700px);
    }
  }
}

/*--- WORKSスライド ---*/
.sec-top-works {
  padding: clamp(80px, 55.744px + 6.468vw, 180px) 0 clamp(80px, 63.021px + 4.528vw, 150px);
  .works-slide {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 10.291px + 2.589vw, 60px);

    /* 共通 */
    .works-slide__both, .works-slide__only {
      display: flex;
      align-items: center;

      @media (max-width: 767px){
        display: block;
      }

      .works-slide__both--ttl, .works-slide__only--ttl {
        width: 20%;
        flex-shrink: 0;
        
        @media (max-width: 767px){
          width: 100%;
        }

        img {
          width: clamp(160px, 140.583px + 5.178vw, 240px);
        }
      }

      .works-slide__both--list, .works-slide__only--list {
        width: 80%;
        overflow: hidden;

        @media (max-width: 767px){
          width: 100%;
        }

        .both-item__wrapper, .only-item__wrapper {
          display: flex;
          flex-wrap: nowrap;
          animation: slideAnim 50s linear infinite;
          width: calc(clamp(140px, 91.456px + 12.945vw, 340px) * 12);
          .both-item, .only-item {
            width: clamp(140px, 91.456px + 12.945vw, 340px);
            flex-shrink: 0;
            padding-right: clamp(15px, 8.932px + 1.618vw, 40px);
            box-sizing: border-box;
          }
        }
      }
    }

    /* both */
    .works-slide__both {
      .works-slide__both--ttl {
        padding-right: clamp(20px, -20.000px + 5.208vw, 80px);
        margin-left: clamp(20px, 17.573px + 0.647vw, 30px);

        @media (max-width: 767px){
          padding-right: 0;
          margin-left: 0;
          padding-left: 20px;
          margin-bottom: 20px;
        }
        
        img {
          margin-left: auto;

          @media (max-width: 767px){
            margin-left: 0;
          }
        }
      }
    }

    /* only */
    .works-slide__only {
      .works-slide__only--list {
        .only-item__wrapper {
          animation: slideAnim 50s linear infinite reverse;
        }
      }
      .works-slide__only--ttl {
        padding-left: clamp(20px, -20.000px + 5.208vw, 80px);
        margin-right: clamp(20px, 17.573px + 0.647vw, 30px);

        @media (max-width: 767px){
          padding-left: 0;
          margin-right: 0;
          padding-right: 20px;
          margin-top: 20px;
        }

        img {
          margin-right: auto;

          @media (max-width: 767px){
            margin-right: 0;
            margin-left: auto;
          }
        }
      }
    }
  }
}

@keyframes slideAnim {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.sec-worries {
  background: #747782;
  padding: clamp(80px, 63.010px + 4.531vw, 150px) 0 clamp(120px, 100.583px + 5.178vw, 200px);
  .worries-ttl {
    text-align: center;
    font-size: clamp(22px, 15.204px + 1.812vw, 50px);
    color: #fff;
    margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);
  }
  .worries-box {
    background: #fff;
    padding: clamp(40px, 35.146px + 1.294vw, 60px) clamp(20px, 5.437px + 3.883vw, 80px);
    box-shadow: 10px 10px 0 #505569;
    position: relative;
    .worries-list__wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(30px, 27.573px + 0.647vw, 40px);

      @media (max-width: 767px){
        flex-direction: column;
      }

      .worries-list__list {
        display: flex;
        flex-direction: column;
        gap: clamp(15px, 13.786px + 0.324vw, 20px);
        .worries-list__item {
          font-size: clamp(15px, 12.573px + 0.647vw, 25px);
          position: relative;
          padding-left: clamp(30px, 25.146px + 1.294vw, 50px);

          &::before {
            position: absolute;
            content: "";
            background: url(../img/check.svg) left center /contain no-repeat;
            left: 0;
            top: 0;
            line-height: 1em;
            width: clamp(25px, 21.359px + 0.971vw, 40px);
            height: clamp(22px, 18.845px + 0.841vw, 35px);
          }
        }
      }
      .worries-img {
        img {
          width: clamp(230px, 188.738px + 11.003vw, 400px);
        }

        @media (max-width: 767px){
          max-width: clamp(230px, 188.738px + 11.003vw, 400px);
          height: auto;
          aspect-ratio: 200 / 120;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
    &::after {
      position: absolute;
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='83' viewBox='0 0 21 83' fill='none'%3E%3Cpath d='M10.5 21L1.40674 5.25L19.5933 5.25L10.5 21Z' fill='%23C892D8'/%3E%3Cpath d='M10.5 52L1.40674 36.25L19.5933 36.25L10.5 52Z' fill='%23C892D8'/%3E%3Cpath d='M10.5 83L1.40674 67.25L19.5933 67.25L10.5 83Z' fill='%23C892D8'/%3E%3C/svg%3E");
      background-size: 100% 100%;
      top: 112%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(15px, 13.544px + 0.388vw, 21px);
      height: clamp(60px, 54.417px + 1.489vw, 83px);

      @media (max-width: 767px){
        top: 106%;
      }
    }
  }
}

.sec-features {
  padding-top: clamp(80px, 63.010px + 4.531vw, 150px);
  background: url(../img/feature-ttl-bg.webp) top right /contain no-repeat;
  background-size: clamp(375px, 211.165px + 43.689vw, 1050px);

  .features-ttl {
    text-align: center;
    margin-bottom: clamp(30px, 8.155px + 5.825vw, 120px);
    img {
      width: clamp(320px, 208.350px + 29.773vw, 780px);
      display: block;
      margin: auto;
    }
    h2 {
      font-size: clamp(25px, 16.505px + 2.265vw, 60px);
      display: inline-block;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background: url(../img/feature-en-ttl.svg) bottom right /contain no-repeat;
        bottom: -60%;
        left: 40%;
        width: clamp(170px, 89.903px + 21.359vw, 500px);
        height: clamp(40px, 25.437px + 3.883vw, 100px);
        z-index: -1;

        @media (max-width: 767px){
          left: 50%;
        }
      }
    }
  }

  .features-wrapper {
    position: relative;
    height: 700vh;
    .features-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      .features-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.8;
        transform: translateY(100%);
        transition: opacity 0.6s ease, transform 0.8s ease;
        z-index: 0;
        background: #fff;
        padding: clamp(10px, 5.146px + 1.294vw, 30px);
        overflow-y: auto;

        @media (max-width: 767px){
          height: calc(100vh - 44px);
          padding: clamp(10px, 5.146px + 1.294vw, 30px) clamp(20px, 10.291px + 2.589vw, 60px);
        }

        &::before {
          position: absolute;
          content: "";
          background: url(../img/feature-bg-01.webp) center /cover no-repeat;
          inset: 0;
          margin: clamp(10px, 5.146px + 1.294vw, 30px);
          z-index: -2;
        }

        &::after {
          position: absolute;
          content: "";
          top: clamp(22px, 13.990px + 2.136vw, 55px);
          left: clamp(22px, 13.990px + 2.136vw, 55px);
          width: clamp(100px, 75.728px + 6.472vw, 200px);
          height: clamp(45px, 35.291px + 2.589vw, 85px);
          z-index: -1;
        }

        &:nth-of-type(1){
          &::before {
            background: url(../img/feature-bg-01.webp) center  /cover no-repeat;
          }
          &::after {
            background: url(../img/no01.svg) top left /contain no-repeat;
          }
        }
        &:nth-of-type(2){
          &::before {
            background: url(../img/feature-bg-02.webp) top left 20% /cover no-repeat;
          }
          &::after {
            background: url(../img/no02.svg) top left/contain no-repeat;
          }
        }
        &:nth-of-type(3){
          &::before {
            background: url(../img/feature-bg-03.webp) center /cover no-repeat;
          }
          &::after {
            background: url(../img/no03.svg) top left /contain no-repeat;
          }
        }
        &:nth-of-type(4){
          &::before {
            background: url(../img/feature-bg-02.webp) top left 20% /cover no-repeat;
          }
          &::after {
            background: url(../img/no04.svg) top left /contain no-repeat;
          }
        }
        &:nth-of-type(5){
          &::before {
            background: url(../img/feature-bg-04.webp) center /cover no-repeat;
          }
          &::after {
            background: url(../img/no05.svg) top left /contain no-repeat;
          }
        }
        &:nth-of-type(6){
          &::before {
            background: url(../img/feature-bg-01.webp) center /cover no-repeat;
          }
          &::after {
            background: url(../img/no06.svg) top left /contain no-repeat;
          }
        }

        .container_m {
          width: clamp(450px, -50.000px + 65.104vw, 1200px);
          padding: 0;
        }
        .container_s {
          width: clamp(358px, -43.333px + 52.257vw, 960px);
          padding: 0;
        }

        .features-item__inner {
          height: auto;
          max-height: 100%;
          overflow-y: hidden;
          box-sizing: border-box;
          pointer-events: none;

           /* Firefox */
          scrollbar-width: none;

          /* IE / Edge Legacy（念のため） */
          -ms-overflow-style: none;

          img {
            width: clamp(335px, 125.049px + 55.987vw, 1200px);
            margin: clamp(60px, 46.667px + 1.736vw, 80px) auto;

            @media (max-width: 767px){
              margin: 60px auto;
              padding: 0 clamp(0px, -95.663px + 25.51vw, 100px);
            }
          }
        }

        /* Chrome / Safari / Edge */
        .features-item__inner::-webkit-scrollbar {
          display: none;
        }
        
        .scrollable {
          overflow-y: auto;
          pointer-events: auto;
        }
      }
      .features-item.is-show {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

.sec-works {
  padding: clamp(60px, 38.155px + 5.825vw, 150px) 0;
  background: url(../img/works-bg.webp) top right /contain no-repeat;
  background-size: clamp(270px, 80.680px + 50.485vw, 1050px);

  @media (max-width: 767px){
    padding: 0 0 clamp(60px, 38.155px + 5.825vw, 150px) 0;
  }

  .works-ttl {
    text-align: center;
    margin-bottom: clamp(30px, 22.718px + 1.942vw, 60px);
    .works-ttl__jp {
      font-size: clamp(35px, 26.505px + 2.265vw, 70px);
    }
  }

  .works__wrapper {
    position: relative;
    .works-swiper {
      .works-list {
        .works-item {
          background: #fff;
          padding: clamp(40px, 35.146px + 1.294vw, 60px) clamp(20px, -4.272px + 6.472vw, 120px);
          border-radius: clamp(10px, 7.573px + 0.647vw, 20px);
          box-shadow: 0 0 15px rgb(0 0 0 / 0.2);
          margin: clamp(10px, 8.786px + 0.324vw, 15px) auto;
          width: clamp(320px, 106.408px + 56.958vw, 1200px);
          height: auto;
          .works-item__inner {
            display: grid;
            align-items: center;
            align-content: center;
            gap: 20px clamp(20px, 12.718px + 1.942vw, 50px);
            grid-template-columns: 1fr auto;
            height: 100%;

            @media (max-width: 1199px){
              gap: 20px 0;
              height: auto;
            }

            .works-guide {
              grid-column: 1 / 2;
              grid-row: 1 / 2;

              @media (max-width: 1199px){
                grid-column: 1;
                grid-row: 1;
              }

              .works-category {
                font-size: clamp(12px, 11.029px + 0.259vw, 16px);
                color: #fff;
                background: var(--purple);
                display: inline-block;
                padding: clamp(3px, 2.272px + 0.194vw, 6px) clamp(15px, 13.786px + 0.324vw, 20px);
                border-radius: 50px;
              }
              .name {
                font-size: clamp(18px, 15.087px + 0.777vw, 30px);
                font-weight: 700;
                margin: clamp(5px, 2.573px + 0.647vw, 15px) 0;
              }
              .period {
                font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                margin-bottom: clamp(5px, 2.573px + 0.647vw, 15px);
                span {
                  color: var(--dark-purple);
                }
              }
              .detail {
                font-size: clamp(13px, 11.786px + 0.324vw, 18px);
                font-weight: 700;
                border-bottom: 1px solid var(--purple);
                padding-bottom: 20px;
                @media (max-width: 767px){
                  font-weight: 500;
                  margin-top: 10px;
                }
              }
            }
            
            .detail-list__wrapper {
              grid-column: 1 / 2;
              grid-row: 2 / 3;

              @media (max-width: 1199px){
                grid-column: 1;
                grid-row: 3;
              }

              .detail-list {
                display: flex;
                flex-direction: column;
                gap: clamp(15px, 13.786px + 0.324vw, 20px);
                .detail-list__item {
                  .list-ttl {
                    font-size: clamp(15px, 14.272px + 0.194vw, 18px);
                    font-weight: 700;
                    color: var(--dark-purple);
                    position: relative;
                    padding-left: clamp(25px, 22.573px + 0.647vw, 35px);
                    margin-bottom: 5px;

                    &::before {
                      position: absolute;
                      content: "";
                      background: url(../img/check.svg) left center /contain no-repeat;
                      top: 0.1em;
                      left: 0;
                      width: clamp(22px, 20.058px + 0.518vw, 30px);
                      height: clamp(19px, 17.301px + 0.453vw, 26px);
                    }
                  }
                  .list-txt {
                    font-size: clamp(13px, 12.272px + 0.194vw, 16px);
                  }
                }
              }
            }

            .works-img {
              grid-column: 2 / 3;
              grid-row: 1 / 3;
              flex-shrink: 0;

              @media (max-width: 1199px){
                grid-column: 1;
                grid-row: 2;
              }

              img {
                width: clamp(185px, 118.252px + 17.799vw, 460px);
                display: block;
                margin: auto;

                @media (max-width: 767px){
                  width: clamp(260px, 211.456px + 12.945vw, 460px);
                }
              }
            }
          }
        }
      }
    }
    .works-swiper__controls {
      .works-prev, .works-next {
        position: absolute;
        z-index: 10;
        width: clamp(30px, 22.718px + 1.942vw, 60px);
        height: clamp(30px, 22.718px + 1.942vw, 60px);
        color: #fff;
        background: linear-gradient(180deg, var(--main, #3E4F96) 0%, #6C7DC2 100%);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &::after {
          font-size: clamp(15px, 11.359px + 0.971vw, 30px);
        }
      }
      .works-prev {
        left: 50%;
        transform: translateX(
          calc(
            -1 * (
              clamp(320px, 106.408px + 56.958vw, 1200px) / 2 + clamp(15px, 11.359px + 0.971vw, 30px)
            )
          )
        );
        &::after {
          position: relative;
          left: -2px;
        }
      }
      .works-next {
        left: 50%;
        transform: translateX(
          calc(
            clamp(320px, 106.408px + 56.958vw, 1200px) / 2 - clamp(15px, 11.359px + 0.971vw, 30px)
          )
        );
        &::after {
          position: relative;
          left: 2px;
        }
      }
    }
  }
}

.sec-price {
  .price__plan {
    background: linear-gradient(90deg, #EEF9F9 0%, #EBF1F9 100%);
    margin: clamp(10px, 5.146px + 1.294vw, 30px);
    padding: clamp(80px, 63.010px + 4.531vw, 150px) 0;
    .plan-lead {
      text-align: center;
      font-size: clamp(13px, 11.786px + 0.324vw, 18px);
      line-height: 2;
      margin-bottom: 20px;
    }
    .plan-table {
      img {
        @media (max-width: 767px){
          padding: 0 clamp(0px, -95.663px + 25.51vw, 100px);
        }
      }
    }
  }

  .price__option {
    background: #F9F9F9;
    margin: clamp(10px, 5.146px + 1.294vw, 30px);
    padding: clamp(60px, 50.291px + 2.589vw, 100px) 0;
    .option__h3 {
      font-size: clamp(22px, 15.204px + 1.812vw, 50px);
      font-weight: 700;
      text-align: center;
      margin-bottom: clamp(30px, 25.146px + 1.294vw, 50px);
    }
    .option-table {
      img {
        @media (max-width: 767px){
          padding: 0 clamp(0px, -95.663px + 25.51vw, 100px);
        }
      }
    }
  }
}

.sec-cta {
  padding: clamp(80px, 63.010px + 4.531vw, 150px) 0;
  background: url(../img/feature-bg-01.webp) top center /cover no-repeat;
  .cta-ttl {
    text-align: center;
    margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);
    .cta-ttl__jp {
      font-size: clamp(22px, 16.417px + 1.489vw, 45px);
    }
  }
  .tel-area {
    background: #fff;
    padding: clamp(25px, 21.359px + 0.971vw, 40px) clamp(20px, 5.437px + 3.883vw, 80px);
    margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
    .tel-ttl {
      font-size: clamp(16px, 13.816px + 0.583vw, 25px);
      color: var(--main);
      font-weight: 700;
      text-align: center;
    }
    .tel-num__wrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: wrap;
      img {
        width: clamp(25px, 20.874px + 1.1vw, 42px);
        position: relative;
        top: 0.4em;
        margin-right: clamp(5px, 3.786px + 0.324vw, 10px);
      }
      .tel-num {
        font-size: clamp(35px, 30.146px + 1.294vw, 55px);
        a {
          font-weight: 700;
        }
      }
      .tel-time {
        font-size: clamp(13px, 11.786px + 0.324vw, 18px);
        position: relative;
        bottom: 5px;

        @media (max-width: 767px){
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}

.sec-flow {
  padding: clamp(80px, 63.010px + 4.531vw, 150px) 0;
  .base-ttl {
    margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);
  }
  .flow-img {
    img {
      @media (max-width: 767px){
        padding: 0 clamp(0px, -95.663px + 25.51vw, 100px);
      }
    }
  }
}

.sec-qa {
  padding-top: clamp(20px, 0.583px + 5.178vw, 100px);
  padding-bottom: clamp(80px, 63.010px + 4.531vw, 150px);
  .base-ttl__en {
    span {
      font-size: 0.7em;
      font-weight: 700;
      color: var(--main);
      margin: 0 0.1em;
    }
  }
  .qa-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 17.573px + 0.647vw, 30px);
    .qa-item {
      .qa-q {
        background: linear-gradient(90deg, #F2F1FF 0%, #ECF2FF 100%);
        padding: clamp(10px, 7.573px + 0.647vw, 20px) clamp(15px, 8.932px + 1.618vw, 40px);
        p {
          font-size: clamp(15px, 12.573px + 0.647vw, 25px);
          font-weight: 700;
          position: relative;
          padding-left: 2.5em;
          padding-right: 3em;

          &::before {
            position: absolute;
            content: "Q.";
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            font-family: var(--en);
            font-weight: 700;
            color: var(--main);
            font-size: clamp(25px, 20.146px + 1.294vw, 45px);
          }

          &::after {
            position: absolute;
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='18' viewBox='0 0 29 18' fill='none'%3E%3Cpath d='M27.4142 1.41407L14.4142 14.4141L1.41419 1.41406' stroke='%233E4F96' stroke-width='4'/%3E%3C/svg%3E");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            top: 50%;
            right: 0;
            width: clamp(14px, 11.087px + 0.777vw, 26px);
            height: clamp(7px, 5.544px + 0.388vw, 13px);
            transform: translateY(-50%) rotate(0deg);
            transform-origin: center center;
            transition: transform 0.3s ease;
          }
        }

        &:hover {
          cursor: pointer;
        }
      }

      .show {
        p {
          &::after {
            transform: rotate(180deg);
            top: 30%;
          }
        }
      }

      .qa-a {
        margin-top: 5px;
        background: #FBFBFB;
        padding: clamp(20px, 17.573px + 0.647vw, 30px) clamp(20px, 15.146px + 1.294vw, 40px);
      }
    }
  }
}

.sec-last-cta {
  position: relative;

  &::after {
    position: absolute;
    content: "";
    background: url(../img/contact-en-bg.svg) top left /contain no-repeat;
    top: 0;
    left: -3px;
    width: clamp(27px, 12.922px + 3.754vw, 85px);
    height: clamp(249px, 112.835px + 36.311vw, 810px);
    opacity: 0.8;
  }

  .last-cta {
    .form-area {
      background: #fff;
      padding: clamp(25px, 16.505px + 2.265vw, 60px) clamp(20px, 5.437px + 3.883vw, 80px);
      margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
    }
  }
}

/*--------------------
footer
--------------------*/
footer {
  .copyright {
    text-align: center;
    font-size: clamp(13px, 11.786px + 0.324vw, 18px);
    font-weight: 500;
    color: #fff;
    background: #464D69;
    padding: clamp(6px, 2.602px + 0.906vw, 20px) 15px;
  }
}