@charset "utf-8";

/*--------------------
reset
--------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

li {
  list-style: none;
}

/*--------------------
webfont
--------------------*/
body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*--------------------
root
--------------------*/
:root {
  --base: #5D4B00;
  --text: #333;
  --logo: #A99336;
  --accent: #BB4032;
  --yellow: #F1E7BB;
  --en: "minion-3-display", serif;
}

/*--------------------
common
--------------------*/
body {
  color: var(--text);
}

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

.no-scroll {
  overflow: hidden;
}

a {
  color: var(--base);
  text-decoration: none;
  transition: ease-in .2s;

  &:hover {
    filter: brightness(1.08);
    transition: ease-in .2s;
  }
}

p {
  font-size: clamp(13px, 11.786px + 0.324vw, 18px);
  line-height: 2;
}

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 7%;
  }
}

.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;
}

.sp {
  display: none;
}

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

  .sp {
    display: block;
  }
}

img {
  max-width: 100%;
}

.text-red {
  color: var(--accent);
  font-weight: 500;
}

.base-list {
  display: flex;
  flex-direction: column;
  gap: 5px;

  .base-list__item {
    position: relative;
    padding-left: 15px;
    
    &::before {
      content: "";
      position: absolute;
      top: 0.55em;
      left: 3px;
      width: 6px;
      height: 6px;
      background: var(--logo);
    }
  }
}


/*--------------------
title
--------------------*/
h2 {
  color: var(--base);
  font-weight: 500;
  letter-spacing: 0.1em;
}

h3 {
  color: var(--base);
  font-weight: 500;
}

.base-ttl {
  text-align: center;
  .en {
    font-family: var(--en);
    color: #F2EFE5;
    font-size: clamp(70px, 50.583px + 5.178vw, 150px);
  }
  .ja {
    font-size: clamp(18px, 13.874px + 1.1vw, 35px);
    margin-top: -1.5em;
  }
}

/*--------------------
btn
--------------------*/
.fixed-btn {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 10px);
  z-index: 999;
  display: flex;
  gap: 2px;
  opacity: 1;
  transition: opacity 0.3s;

  @media (min-width: 481px) and (max-width: 767px){
    width: 60%;
  }
}

.cta-btn {
  margin-top: clamp(20px, 6.667px + 1.736vw, 40px);
  text-align: center;
  img {
    width: clamp(335px, 270.680px + 17.152vw, 600px);
  }
  p {
    font-size: clamp(10px, 8.544px + 0.388vw, 16px);
    color: #8B7100;
    margin-top: clamp(10px, 7.573px + 0.647vw, 20px);
    line-height: 1.5;
  }
}

/*--------------------
メイン
--------------------*/

/*--- グローバルナビ（PC） ---*/
.g-nav {
  position: fixed;
  background: #fff;
  width: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  padding: 15px 40px;

  @media (max-width: 767px){
    padding: 12px 15px 10px 12px;
  }

  .g-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .g-nav__left {
      display: flex;
      gap: 40px;
      
      @media (max-width: 767px){
        gap: 15px;
      }

      .logo {
        img {
          width: clamp(100px, 80.583px + 5.178vw, 180px);
        }
      }

      .g-nav__list {
        display: flex;

        .g-nav__item {
          display: flex;
          align-items: center;

          &:not(:last-child)::after {
            content: "";
            width: 1px;
            height: 16px;
            background-color: var(--logo);
            margin: 0 30px;
          }

          @media (max-width: 767px){
            &:not(:last-child)::after {
              height: 10px;
              margin: 0 10px;
            }
          }

          a {
            font-size: clamp(11px, 9.301px + 0.453vw, 18px);
            color: var(--base);
            font-weight: 400;

            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
    }

    .g-nav__right {
      text-align: center;
      img {
        width: 25px;
      }
      p {
        font-size: 14px;
        color: var(--logo);
      }
    }
  }
}

/*--- FV ---*/
.fv {
  .pc-header {
    position: relative;

    .header-bg {
      width: 100%;
      height: auto;
    }

    .header-copy {
      position: absolute;
      top: 50%;
      left: clamp(60px, 26.739px + 4.337vw, 110px);
      transform: translateY(-50%);
      text-align: center;

      .header-copy__text {
        width: clamp(260px, 0.000px + 33.854vw, 650px);
      }

      .cta-btn {
        img {
          width: clamp(260px, 33.333px + 29.514vw, 600px);
        }
        p {
          font-size: clamp(9px, 4.333px + 0.608vw, 16px);
        }
      }
    }
  }
}

/*--- ソフウェーブをご検討の方へ・まずはご相談だけでも大歓迎です（CTA） ---*/
.sec-cta-area {
  padding: clamp(60px, 45.437px + 3.883vw, 120px) 0;
  background: url(../img/cta-bg.webp) top center /cover no-repeat;

  .cta-area__ttl {
    font-size: clamp(30px, 25.146px + 1.294vw, 50px);
    color: var(--base);
    text-align: center;
    margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      bottom: -20px;
      display: inline-block;
      width: clamp(50px, 42.718px + 1.942vw, 80px);
      height: clamp(2px, 1.757px + 0.065vw, 3px);
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      background-color: #D4BA4B;
    }

    .small {
      font-size: clamp(22px, 18.845px + 0.841vw, 35px);
    }
  }

  .cta-headcopy {
    text-align: center;
    margin-bottom: clamp(10px, -2.136px + 3.236vw, 60px);
  }

  .cta-area__doctor {
    img {
      width: clamp(330px, 167.379px + 43.366vw, 1000px);
      margin: auto;
    }
  }

  .cta-btn {
    margin-top: clamp(30px, 22.718px + 1.942vw, 60px);
  }
}

/*--- こんなお悩みありませんか？ ---*/
.sec-worries {
  padding: clamp(40px, -13.333px + 6.944vw, 120px) 0 clamp(120px, -20.777px + 37.54vw, 700px);
  background: url(../img/worries-bg.webp) top center /cover no-repeat;
  height: clamp(500px, 366.667px + 17.361vw, 700px);
  position: relative;
  z-index: -2;

  &::before {
    position: absolute;
    content: "";
    background: url(../img/worries-img01.webp) center left /contain no-repeat;
    top: 50%;
    left: clamp(30px, -49.827px + 10.408vw, 150px);
    transform: translateY(-50%);
    width: clamp(260px, 226.019px + 9.061vw, 400px);
    height: clamp(186px, 136.485px + 13.204vw, 390px);
    object-fit:cover;
    z-index: -1;
  }
  &::after {
    position: absolute;
    content: "";
    background: url(../img/worries-img02.webp) center right /contain no-repeat;
    top: 50%;
    right: clamp(30px, -49.827px + 10.408vw, 150px);
    transform: translateY(-50%);
    width: clamp(260px, 226.019px + 9.061vw, 400px);
    height: clamp(186px, 136.485px + 13.204vw, 390px);
    object-fit:cover;
    z-index: -1;
  }

  @media (max-width: 767px){
    background: url(../img/worries-bg_sp.webp) top center /100% no-repeat;
    height: 100%;
    
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
  }

  .worries-ttl {
    text-align: center;
    color: #fff;
    font-size: clamp(20px, 17.573px + 0.647vw, 30px);
    margin-bottom: clamp(30px, 22.718px + 1.942vw, 60px);

    .large {
      color: var(--yellow);
      font-size: clamp(30px, 25.146px + 1.294vw, 50px);
      position: relative;

      &::before {
        position: absolute;
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='5' viewBox='0 0 160 5' fill='none'%3E%3Cpath d='M0 0.5C4.99879 0.5 4.99879 4.5 9.99759 4.5C14.9964 4.5 14.9964 0.5 19.9952 0.5C24.994 0.5 24.994 4.5 29.9928 4.5C34.9916 4.5 34.9916 0.5 39.9903 0.5C44.9891 0.5 44.9891 4.5 49.9879 4.5C54.9867 4.5 54.9867 0.5 59.9855 0.5C64.9843 0.5 64.9843 4.5 69.9831 4.5C74.9819 4.5 74.9819 0.5 79.9807 0.5C84.9795 0.5 84.9795 4.5 89.9783 4.5C94.9771 4.5 94.9771 0.5 99.9759 0.5C104.975 0.5 104.975 4.5 109.973 4.5C114.972 4.5 114.972 0.5 119.971 0.5C124.97 0.5 124.97 4.5 129.978 4.5C134.987 4.5 134.977 0.5 139.976 0.5C144.975 0.5 144.975 4.5 149.983 4.5C154.992 4.5 154.982 0.5 159.99 0.5' stroke='%23F1E7BB' stroke-miterlimit='10'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        width: clamp(110px, 76.667px + 4.34vw, 160px);
        height: 6px;
        bottom: -5px;
      }
    }
  }

  .worries-img__sp {
    width: clamp(300px, 251.456px + 12.945vw, 500px);
    margin: auto;
  }

  .worries-list {
    text-align: center;

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

    .worries-list__list {
      display: inline-block;

      .worries-list__item {
        color: #fff;
        text-align: left;
        font-size: clamp(14px, 12.058px + 0.518vw, 22px);
        margin-top: clamp(15px, 11.359px + 0.971vw, 30px);
        position: relative;
        padding-left: clamp(20px, 17.573px + 0.647vw, 30px);

        &:first-of-type {
          margin-top: 0;
        }

        &::after {
          position: absolute;
          content: "";
          border: 1px solid #fff;
          width: clamp(12px, 10.058px + 0.518vw, 20px);
          height: clamp(12px, 10.058px + 0.518vw, 20px);
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }

        .large {
          font-size: clamp(18px, 15.573px + 0.647vw, 28px);
          color: var(--yellow);
        }
      }
    }
  }
}

/*--- ソフウェーブで解決 ---*/
.sec-solution {
  padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
  text-align: center;
  background: url(../img/solution-bg01.webp) top left /clamp(375px, 247.573px + 33.981vw, 900px) no-repeat, url(../img/solution-bg02.webp) top right /clamp(180px, 57.427px + 32.686vw, 685px) no-repeat;

  @media (max-width: 767px){
    padding-top: 0;
    background: url(../img/solution-bg01.webp) top 150px left /clamp(375px, 247.573px + 33.981vw, 900px) no-repeat, url(../img/solution-bg02.webp) top 120px right -20px /clamp(180px, 57.427px + 32.686vw, 685px) no-repeat;
  }
  .solution-ttl {
    position: relative;
    display: inline-block;
    margin-bottom: clamp(30px, 5.728px + 6.472vw, 130px);

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -100px;
      width: 1px;
      height: 60px;
      margin: auto;
      background-color: var(--logo);
    }

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

    img {
      width: clamp(335px, 219.709px + 30.744vw, 810px);
    }
  }

  .solution-text__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;

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

    .solution-img__pc {
      width: clamp(150px, 101.456px + 12.945vw, 350px);
    }
    .solution-img__sp {
      width: clamp(300px, 275.728px + 6.472vw, 400px);
    }

    .solution-text {
      width: clamp(335px, 246.408px + 23.625vw, 700px);

      p {
        text-align: left;
        font-size: clamp(13px, 11.301px + 0.453vw, 20px);
      }
    }
  }
}

/*--- 症例 ---*/
.sec-case {
  margin-top: clamp(40px, 30.291px + 2.589vw, 80px);
  padding-bottom: clamp(80px, 63.010px + 4.531vw, 150px);

  .base-ttl {
    margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

    .ja {
      margin-top: -2.5em;
    }
  }

  .case-swiper__wrapper {
    box-sizing: border-box;
    margin: auto;
    width: clamp(345px, 43.944px + 80.282vw, 1200px);

    .case-swiper {
      padding: 10px;

      .case-list {
        align-items: stretch;

        .case-item {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(15px, 8.932px + 1.618vw, 40px);
          height: auto;
          background: #fff;
          padding: clamp(20px, 12.958px + 1.878vw, 40px) clamp(20px, 5.915px + 3.756vw, 60px);
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);

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

          img {
            width: clamp(295px, 170.000px + 33.333vw, 650px);
          }
          
          .case-detail {
            flex-grow: 1;

            @media (max-width: 1024px){
              flex-grow: 0;
              width: 70%;
            }
            @media (max-width: 767px){
              width: 100%;
            }

            .case-detail__list {
              display: grid;
              grid-template-columns: clamp(70px, 57.864px + 3.236vw, 120px) 1fr;
              font-size: clamp(12px, 11.272px + 0.194vw, 15px);

              dt,dd {
                border-bottom: 1px solid #EBE7D7;
              }
              dt {
                color: var(--logo);
                padding: clamp(10px, 8.786px + 0.324vw, 15px) 0;
              }
              dd {
                padding: clamp(10px, 8.786px + 0.324vw, 15px) 0;
                padding-left: 10px;
              }
            }
          }
        }
      }

      .case-swiper__controls {
        position: static;
        margin-top: 40px;

        .swiper-pagination-bullet {
          background: #EEE5DB;
          opacity: 1;
          border-radius: 0;
          margin: 0 clamp(6px, 5.029px + 0.259vw, 10px);
        }
        .swiper-pagination-bullet-active {
          background-color: var(--logo);
        }
      }
    }
  }
}

/*--- ソフウェーブとは ---*/
.sec-about {
  background: url(../img/about-bg02.webp) top right /clamp(310px, -17.670px + 87.379vw, 1660px) no-repeat;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    background: url(../img/about-bg01.webp) top left /contain no-repeat;
    top: clamp(-40px, -0.087px + -5.204vw, -100px);
    left: 0;
    width: clamp(200px, 95.631px + 27.832vw, 630px);
    height: clamp(73px, 34.893px + 10.162vw, 230px);
  }

  .about-head {
    padding: clamp(70px, 57.864px + 3.236vw, 120px) 0 clamp(60px, 50.291px + 2.589vw, 100px);
    display: grid;
    grid-template-columns: 1fr clamp(70px, 26.311px + 11.65vw, 250px);
    grid-template-rows: auto 1fr;
    gap: 0 80px;

    @media (max-width: 767px){
      gap: 0 20px;
    }

    .about-ttl {
      font-size: clamp(30px, 22.718px + 1.942vw, 60px);
      grid-column: 1/2;
      grid-row: 1/2;
      margin-bottom: 50px;
      letter-spacing: 0;
      
      .small {
        font-size: clamp(22px, 17.631px + 1.165vw, 40px);
      }

      @media (max-width: 767px){
        align-self: center;
        margin-bottom: 0;
      }
    }

    img {
      grid-column: 2/3;
      grid-row: 1/3;
      align-self: center;

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

    .about-head__text {
      grid-column: 1/2;
      grid-row: 2/3;

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

  .about-point {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 15.146px + 1.294vw, 40px);
    padding-bottom: clamp(60px, 50.291px + 2.589vw, 100px);
    
    .about-point__item {
      width: calc(100% - clamp(0px, -24.272px + 6.472vw, 100px));
      background: #fff;
      border: 1px solid var(--logo);
      position: relative;

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

      &::before {
        position: absolute;
        content: "";
        inset: clamp(3px, 2.272px + 0.194vw, 6px);
        border: 0.5px solid var(--logo);
        pointer-events: none;
      }

      &:nth-of-type(even){
        margin-left: auto;
      }

      .point__ttl {
        display: flex;

        img {
          width: clamp(50px, 39.078px + 2.913vw, 95px);
        }

        .ttl__text {
          font-size: clamp(16px, 12.117px + 1.036vw, 32px);
          background: #F6F4EB;
          margin-top: clamp(3px, 2.272px + 0.194vw, 6px);
          margin-right: clamp(3px, 2.272px + 0.194vw, 6px);
          flex-grow: 1;
          display: flex;
          align-items: center;
          padding-left: clamp(15px, 8.932px + 1.618vw, 40px);
        }

        .ttl__text--4 {
          padding-left: clamp(7px, -1.010px + 2.136vw, 40px);
          span {
            margin-right: -0.4em;
          }
        }
      }

      .point__text {
        padding: clamp(23px, 17.417px + 1.489vw, 46px) clamp(23px, 14.990px + 2.136vw, 56px);
        display: flex;
        align-items: center;
        gap: clamp(20px, 15.146px + 1.294vw, 40px);

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

        iframe {
          width: clamp(260px, 230.874px + 7.767vw, 380px);
          aspect-ratio: 16 / 9;
          height: auto;
        }

        img {
          width: clamp(260px, 230.874px + 7.767vw, 380px);
          flex-shrink: 0;
        }

        p {
          flex: 1;
        }
      }
    }
  }

  /*--- ソフウェーブの施術範囲・他のたるみ治療機器との違い ---*/
  .about__bottom {
    background: url(../img/comparison-bg.webp) top center /cover no-repeat;
    padding: clamp(60px, 50.291px + 2.589vw, 100px) 0;

    .sub-ttl {
      font-size: clamp(18px, 15.087px + 0.777vw, 30px);
      text-align: center;
      margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);

      span {
        position: relative;
        padding: 0 clamp(15px, -39.612px + 14.563vw, 240px);

        &::before, &::after {
          content: '';
          position: absolute;
          top: 50%;
          display: inline-block;
          width: clamp(10px, -36.117px + 12.298vw, 200px);
          height: 1px;
          background-color: var(--logo);
        }
        &::before {
          left: 0;
        }
        &::after {
          right: 0;
        }
      }
    }

    .range {
      background: #fff;
      padding: clamp(30px, 22.718px + 1.942vw, 60px);

      .range-img {
        overflow-x: auto;
        img {
          width: clamp(295px, 196.699px + 26.214vw, 700px);
          margin: auto;
        }
      }
    }

    .comparison {
      margin-top: clamp(20px, 10.291px + 2.589vw, 60px);
      background: #fff;
      padding: clamp(30px, 22.718px + 1.942vw, 60px) 15px;
      overflow: hidden;

      .comparison-img {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 15.146px + 1.294vw, 40px);

        .js-scrollable {
          width: 100%;
          min-width: 0;
          overflow-x: auto;

          img {
            display: block;
            width: clamp(295px, 148.155px + 39.159vw, 900px);
            margin: auto;

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

/*--- 大切な予定のために、今から始める（CTA） ---*/
.sec-cta-area__sub {
  background: url(../img/recommend-bg.webp) top center /cover no-repeat;
  padding: clamp(60px, 50.291px + 2.589vw, 100px) 0;
  .recommend-content {
    img {
      width: clamp(335px, 183.301px + 40.453vw, 960px);
      margin: auto;
    }
  }
}

/*--- 選ばれる理由 ---*/
.sec-feature {
  .feature-head {
    background: linear-gradient(90deg, #FFF 0%, #FFFAF4 100%);
    padding-top: clamp(20px, 10.291px + 2.589vw, 60px);

    .feature-head-bg {
      position: relative;
      left: 0;
      bottom: 0;
      width: 97%;
      z-index: 2;
    }

    .feature-head__copy {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 10%;
      transform: translateY(-45%);
      width: clamp(300px, 227.184px + 19.417vw, 600px);
      text-align: center;

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

      img {
        width: clamp(62px, 38.214px + 6.343vw, 160px);
      }
      
      .feature-ttl {
        margin-top: clamp(10px, 0.291px + 2.589vw, 50px);
        font-size: clamp(15px, 11.359px + 0.971vw, 30px);
        
        span {
          font-size: clamp(28px, 20.233px + 2.071vw, 60px);
        }
      }
    }
  }

  .feature-wrapper {
    .feature-item {
      padding: clamp(40px, 25.437px + 3.883vw, 100px) 0 clamp(60px, 50.291px + 2.589vw, 100px);
      background: #fff;
      box-shadow: 1px 0 15px 0 #EAE4DC;

      &:nth-of-type(even){
        background: #FEFBF5;
      }

      &:nth-of-type(2){
        .feature-item__inner {
          display: block;

          .feature-img {
            width: 100%;
            margin-top: clamp(20px, 15.146px + 1.294vw, 40px);
          }
        }
      }

      &:nth-of-type(3){
        .feature-item__inner {
          .feature-img {
            @media (max-width: 767px){
              width: 100%;
            }
          }
        }
      }

      .feature-item__inner {
        display: flex;
        align-items: center;
        gap: clamp(20px, 15.146px + 1.294vw, 40px);

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

        .feature-text {
          flex: 1;

          .feature-text__head {
            display: flex;
            align-items: center;
            gap: clamp(10px, 5.146px + 1.294vw, 30px);
            margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

            img {
              width: clamp(50px, 37.864px + 3.236vw, 100px);
            }
            .feature-item__ttl {
              font-size: clamp(18px, 13.874px + 1.1vw, 35px);
            }
          }
        }
        
        .feature-img {
          width: clamp(260px, 201.748px + 15.534vw, 500px);
        }
      }
    }
  }
}

/*--- 料金 ---*/
.sec-price {
  padding: clamp(60px, 50.291px + 2.589vw, 100px) 0 clamp(60px, 45.437px + 3.883vw, 120px);

  .price-table {
    margin: clamp(30px, 22.718px + 1.942vw, 60px) auto 0;
    width: clamp(315px, 221.553px + 24.919vw, 700px);

    .price-ttl {
      background: var(--logo);
      color: #fff;
      font-size: clamp(16px, 13.816px + 0.583vw, 25px);
      text-align: center;
      padding: clamp(4px, 1.330px + 0.712vw, 15px) 15px;
    }

    .price-table__list {
      display: grid;
      grid-template-columns: 1fr 1fr;

      dt, dd {
        padding: clamp(15px, 11.359px + 0.971vw, 30px) clamp(15px, 13.786px + 0.324vw, 20px);
        border-bottom: 1px solid var(--logo);
        font-size: clamp(14px, 12.058px + 0.518vw, 22px);
      }

      dd {
        text-align: right;
        color: var(--logo);
        font-weight: 500;
      }
    }

    .caption-list {
      margin-top: clamp(20px, 17.573px + 0.647vw, 30px);
      .caption-list__list {
        .caption-list__item {
          font-size: clamp(11px, 10.272px + 0.194vw, 14px);
          line-height: 1.5;
        }
      }
    }
  }
}

/*--- 施術までの流れ ---*/
.sec-flow {
  background: #FDF8F2;
  padding: clamp(60px, 45.437px + 3.883vw, 120px) 0;

  .base-ttl {
    .en {
      color: #EADCCB;
    }
  }

  .flow-headcopy {
    margin: clamp(40px, 30.291px + 2.589vw, 80px) 0 clamp(30px, 22.718px + 1.942vw, 60px);
    font-size: clamp(14px, 12.058px + 0.518vw, 22px);
    line-height: 1.5;
    text-align: center;
  }

  .flow__list {
    --flow-list-gap: 80px;
    --flow-list-half-gap: 40px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--flow-list-gap);

    .flow__item {
      --flow-number-size: clamp(62px, 50.350px + 3.107vw, 110px);
      --flow-media-top: clamp(22px, 17.631px + 1.165vw, 40px);
      --flow-media-half-top: clamp(11px, 8.816px + 0.583vw, 20px);
      --flow-media-left: clamp(50px, 40.291px + 2.589vw, 90px);
      --flow-media-width: clamp(188px, 153.534px + 9.191vw, 330px);
      --flow-visual-width: calc(var(--flow-media-left) + var(--flow-media-width));
      --flow-media-half-height: clamp(66.085px, 53.970px + 3.231vw, 116px);
      --flow-content-sp-gap: 30px;
      --flow-arrow-left: clamp(122px, 94.558px + 7.185vw, 233px);
      --flow-arrow-half-width: 22.5px;
      --flow-arrow-height: 25px;
      --flow-arrow-half-height: 12.5px;
      position: relative;
      display: grid;
      grid-template-columns: var(--flow-visual-width) minmax(0, 1fr);
      column-gap: clamp(15px, 8.932px + 1.618vw, 40px);
      align-items: start;

      @media (max-width: 767px){
        grid-template-columns: 1fr;
      }

      .flow__number {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 1;
        width: var(--flow-number-size);
        height: var(--flow-number-size);

        @media (max-width: 767px){
          justify-self: center;
          width: var(--flow-media-width);
          transform: translateX(calc(0px - var(--flow-media-left)));
        }

        img {
          width: var(--flow-number-size);
          height: var(--flow-number-size);
          display: block;
        }

        span {
          position: absolute;
          inset: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: var(--en);
          font-size: clamp(40px, 32.718px + 1.942vw, 70px);
          line-height: 1;
          color: var(--logo);

          @media (max-width: 767px){
            inset: 0 auto auto 0;
            width: var(--flow-number-size);
            height: var(--flow-number-size);
          }
        }
      }

      .flow__media {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 2;
        width: var(--flow-media-width);
        margin-top: var(--flow-media-top);
        margin-left: var(--flow-media-left);

        @media (max-width: 767px){
          justify-self: center;
          width: var(--flow-media-width);
          margin-left: 0;
        }

        img {
          width: 100%;
          height: auto;
          display: block;
          object-fit: cover;
        }
      }

      .flow__content {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        padding-top: clamp(15px, 8.932px + 1.618vw, 40px);

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

        .flow__ttl {
          font-size: clamp(16px, 12.602px + 0.906vw, 30px);
          line-height: 1.5;
          letter-spacing: 0.05em;
          color: var(--base);
          
          @media (max-width: 767px){
            text-align: center;
          }
        }

        .flow__text {
          margin-top: clamp(15px, 13.786px + 0.324vw, 20px);
          font-size: clamp(13px, 11.786px + 0.324vw, 18px);
          line-height: 2;
        }
      }

      .flow__arrow {
        position: absolute;
        top: calc(50% + var(--flow-media-top) + var(--flow-media-half-height) + var(--flow-list-half-gap) - var(--flow-arrow-half-height));
        left: var(--flow-arrow-left);
        width: 45px;
        height: var(--flow-arrow-height);
        display: flex;
        justify-content: center;
        align-items: flex-start;

        img {
          width: 39px;
          height: 18.75px;
          display: block;
          transform: rotate(180deg);
        }

        @media (max-width: 767px){
          top: calc(100% + var(--flow-list-half-gap) + var(--flow-media-half-top) - var(--flow-arrow-half-height));
          left: calc(50% - var(--flow-arrow-half-width));
        }
      }
    }
  }

  /*--- 施術について ---*/
  .infomation {
    .infomation-ttl {
      font-size: clamp(18px, 16.301px + 0.453vw, 25px);
      margin-top: clamp(60px, 55.146px + 1.294vw, 80px);
      text-align: center;

      span {
        position: relative;
        padding: 0 30px;
        
        &::before, &::after {
          content: '';
          position: absolute;
          top: 50%;
          display: inline-block;
          width: 15px;
          height: 1px;
          background-color: var(--base);
        }
        &::before {
            left: 0;
        }
        &::after {
            right: 0;
        }
      }
    }

    .infomation-table {
      display: grid;
      grid-template-columns: 180px 1fr;
      row-gap: 5px;
      margin-top: 30px;

      @media (max-width: 767px){
        grid-template-columns: 1fr;
      }

      dt, dd {
        padding: clamp(8px, 6.301px + 0.453vw, 15px) 15px;
      }
      dt {
        background: #EEE3D4;
        font-size: 14px;
        color: var(--base);
        display: flex;
        align-items: center;  
        justify-content: center;
      }
      dd {
        background: #FAF3EA;
        font-size: clamp(12px, 11.515px + 0.129vw, 14px);

        @media (max-width: 767px){
          padding: 15px;
        }
      }
    }
  }

  .cta-btn {
    margin-top: clamp(40px, 30.291px + 2.589vw, 80px);
  }
}

/*--- よくある質問 ---*/
.sec-faq {
  padding: clamp(60px, 45.437px + 3.883vw, 120px) 0;
  
  .qa-list {
    margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 12.718px + 1.942vw, 50px);

    .qa-item {
      .qa-q {
        position: relative;
        display: flex;
        align-items: center;
        gap: clamp(10px, 7.573px + 0.647vw, 20px);
        padding: 0 clamp(30px, 22.718px + 1.942vw, 60px) clamp(10px, 8.786px + 0.324vw, 15px) 0;
        border-bottom: 1px solid var(--logo);
        cursor: pointer;

        .qa-q__icon {
          flex-shrink: 0;
          font-family: var(--en);
          font-size: clamp(30px, 27.573px + 0.647vw, 40px);
          color: var(--logo);
        }

        .qa-q__text {
          flex: 1;
          margin: 0;
          font-size: clamp(14px, 12.544px + 0.388vw, 20px);
          line-height: 1.5;
        }

        .qa-q__toggle {
          position: absolute;
          top: 50%;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 1px solid var(--logo);
          border-bottom: 1px solid var(--logo);
          transform: translateY(-120%) rotate(45deg);
          transition: transform 0.3s;
        }
        
        &.show {
          .qa-q__toggle {
            transform: translateY(-30%) rotate(225deg);
          }
        }
      }

      .qa-a {
        background: #F9F7F1;
        margin-top: 10px;

        .qa-a__inner {
          padding: clamp(15px, 13.786px + 0.324vw, 20px) clamp(15px, 8.932px + 1.618vw, 40px);

          .qa-a__text {
            font-size: clamp(13px, 11.786px + 0.324vw, 18px);
          }
        }
      }
    }
  }

  .cta-btn {
    margin-top: clamp(40px, 25.437px + 3.883vw, 100px);
  }
}

/*--- スタッフ紹介 ---*/
.sec-staff {
  padding: clamp(60px, 45.437px + 3.883vw, 120px) 0;
  background: url("../img/staff-bg.webp") center center / cover no-repeat fixed, #F0E5D7;
  background-blend-mode: multiply;

  .base-ttl {
    .en {
      color: #D2BCA1;
    }
  }

  .staff-list {
    margin-top: clamp(40px, 30.291px + 2.589vw, 80px);
    display: flex;
    flex-direction: column;
    gap: 20px;

    .staff-list__item {
      display: flex;
      align-items: center;
      gap: clamp(20px, 15.146px + 1.294vw, 40px);
      background: rgba(250, 243, 234, 0.50);
      padding: clamp(30px, 22.718px + 1.942vw, 60px) clamp(20px, 10.291px + 2.589vw, 60px);;

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

      .staff-img {
        flex-shrink: 0;
        img {
          width: clamp(200px, 175.728px + 6.472vw, 300px);
        }
      }

      .staff-contents {
        flex: 1;
        .staff-name {
          font-size: clamp(18px, 15.087px + 0.777vw, 30px);
          margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

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

          span {
            font-size: 0.7em;
          }
        }
        .staff-text {
          font-size: clamp(13px, 12.515px + 0.129vw, 15px);
        }
      }
    }
  }

  .cta-btn {
    margin-top: clamp(40px, 25.437px + 3.883vw, 100px);
  }

  /*--- ガイドライン表記 ---*/
  .guideline {
    margin-top: clamp(60px, 50.291px + 2.589vw, 100px);
    border-top: 1px solid #CDC5A4;
    border-bottom: 1px solid #CDC5A4;
    padding: clamp(15px, 11.359px + 0.971vw, 30px) clamp(10px, 7.573px + 0.647vw, 20px);

    .guideline-ttl {
      font-size: clamp(13px, 12.272px + 0.194vw, 16px);
      color: var(--base);
    }

    p {
      margin: clamp(10px, 8.786px + 0.324vw, 15px) 0;
    }

    p, .base-list {
      font-size: clamp(11px, 10.272px + 0.194vw, 14px);
    }
  }
}

footer {
  background: #36322F;
  padding: clamp(40px, 35.146px + 1.294vw, 60px) 20px;

  .footer__inner {
    color: #fff;
    p {
      font-size: clamp(12px, 11.515px + 0.129vw, 14px);
      line-height: 1.5;
    }
    
    a {
      font-size: clamp(12px, 11.515px + 0.129vw, 14px);
      color: #fff;
    }

    .footer-logo {
      text-align: center;
      margin-bottom: 40px;

      img {
        width: clamp(140px, 130.291px + 2.589vw, 180px);
      }
    }

    .footer-info {
      display: flex;
      justify-content: center;
      gap: clamp(30px, 22.718px + 1.942vw, 60px);

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

      .footer-info__item {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    }

    .footer-copyright {
      margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
      display: flex;
      justify-content: center;
      gap: clamp(5px, -3.495px + 2.265vw, 40px);

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