@charset "utf-8";

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

h1 {
  margin: 0;
}

ul li {
  list-style: none;
}

/*--------------------
webfont
--------------------*/
* {
  font-family: "Shippori Mincho", serif;
  font-style: normal;
}

/*--------------------
root
--------------------*/
:root {
  --en: "cofo-raffine", sans-serif;
  --base: #3B3B3B;
  --main: #294875;
  --darkgray: #677182;
  --gray: #C8CCD3;
}

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

body {
  counter-reset: number 0;
  color: var(--base);
  background-size: 50%;
  position: relative;
}

.no-scroll {
  overflow: hidden;
}

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

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

picture {
  display: block;

  img {
    width: 100%;
  }
}

.container {
  max-width: 1400px;
  width: 90%;
  margin: auto;
}

.container_m {
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

.container_s {
  max-width: 980px;
  width: 90%;
  margin: auto;
}

.pc {
  display: block;

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


.sp {
  display: none;

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

.swiper_area {
  position: relative;
}

.swiper {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

img {
  max-width: 100%;
}

.base-text {
  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
  line-height: 1.8;
}


/*--------------------
title
--------------------*/
.menu-sub-ttl {
  margin-top: clamp(30px, 17.864px + 3.236vw, 80px);
  margin-bottom: clamp(35px, 28.932px + 1.618vw, 60px);
  text-align: center;

  img {
    height: clamp(58px, 41.252px + 4.466vw, 127px);
  }

  h3 {
    margin-top: clamp(-5px, -3.786px + -0.324vw, -10px);
    font-size: clamp(16px, 13.816px + 0.583vw, 25px);
    font-weight: 400;
  }
}

.sec-ttl {
  text-align: center;

  p {
    font-family: var(--en);
    font-weight: 400;
    font-size: clamp(45px, 31.650px + 3.56vw, 100px);
    color: var(--main);
  }

  h2 {
    margin-top: -30px;
    font-size: clamp(16px, 13.816px + 0.583vw, 25px);
    font-weight: 400;

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


/*--------------------
btn
--------------------*/
.viewmore-btn {
  display: none;
  /* 3次 */
  margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
  text-align: center;

  a {
    display: inline-block;
    font-family: ivymode, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--darkgray);
    font-size: clamp(16px, 14.544px + 0.388vw, 22px);
    padding: clamp(10px, 8.786px + 0.324vw, 15px) clamp(40px, 35.146px + 1.294vw, 60px);
    border: 1px solid var(--darkgray);
    border-radius: 100px;
    background: transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s, border-color 0.3s;

    span {
      position: relative;
      z-index: 2;
      display: block;
      transition: color 0.3s;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      background: var(--darkgray);
      z-index: 1;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.5s cubic-bezier(.77, 0, .18, 1);
    }

    &:hover,
    &:focus {
      color: #fff;
      border-color: var(--darkgray);

      span {
        color: #fff;
      }
    }

    &:hover::before,
    &:focus::before {
      transform: scaleX(1);
    }
  }
}


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

/*--------------------
ページネーション
--------------------*/
.navigation.pagination {
  text-align: center;
  margin-top: clamp(2.5rem, 2.06rem + 1.88vw, 3.75rem);

  * {
    font-family: var(--en);
    font-weight: 500;
  }

  a {
    color: #9D7947;
  }

  .page-numbers {
    padding: 0.5em;
    min-width: 2em;
    font-size: clamp(0.938rem, 0.827rem + 0.47vw, 1.25rem);
  }

  .current {
    display: inline-block;
    background-color: #9D7947;
    line-height: 1;
    border-radius: 100px;
    color: #fff;
  }

  .prev {
    color: #9D7947;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;

    &::before {
      content: "";
      width: clamp(0.438rem, 0.393rem + 0.19vw, 0.563rem);
      height: clamp(0.438rem, 0.393rem + 0.19vw, 0.563rem);
      border: 0;
      border-top: solid 1px #9D7947;
      border-right: solid 1px #9D7947;
      transform: rotate(-135deg);
    }
  }

  .next {
    color: #9D7947;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;

    &::after {
      content: "";
      width: clamp(0.438rem, 0.393rem + 0.19vw, 0.563rem);
      height: clamp(0.438rem, 0.393rem + 0.19vw, 0.563rem);
      border: 0;
      border-top: solid 1px #9D7947;
      border-right: solid 1px #9D7947;
      transform: rotate(45deg);
    }
  }
}

/*--------------------
headerメニュー
--------------------*/
header {
  .header_inner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 110px;
    padding: 0 2vw 0 2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 102;

    @media (max-width: 767px) {
      height: 60px;
      padding: 0 4vw 0 4vw;
    }

    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(255 255 255 / 0.9);
      pointer-events: none;
      /* クリック不可 */
      z-index: -1;
      /* 背景に下げる */
      transform: translateY(-100%);
      transition: transform 0.4s cubic-bezier(.39, .58, .57, 1), opacity 0.3s;
      opacity: 0;
    }

    .header-bg.show-bg {
      transform: translateY(0);
      opacity: 1;
    }

    .g-nav__logo {
      a {
        width: clamp(60px, 50.291px + 2.589vw, 100px);
        display: block;
      }
    }

    .header_inner-right {
      display: flex;
      align-items: center;
      gap: 15px;
    }
  }

  /* ハンバーガーメニューが開いているとき */
  &.active {
    .header_inner {
      position: fixed;
      background-color: transparent;
      border-bottom: none;
      justify-content: flex-end;

      .g-nav__logo,
      .g-nav {
        display: none;
      }
    }

    .ham-contents {
      display: flex;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}

/* グローバルナビ */
.g-nav {
  .g-nav__list {
    display: flex;
    /* 1000px-1920px */
    gap: clamp(20px, 9.130px + 1.087vw, 30px);

    .g-nav__item {
      a {
        display: block;

        .label {
          font-family: var(--font-min);
          font-weight: 500;
          /* 1000px-1920px */
          font-size: clamp(14px, 11.826px + 0.217vw, 16px);
          text-align: center;
          margin: 0;
        }

        .label {
          position: relative;
          display: inline-block;
          z-index: 1;
        }

        /* 疑似要素で背景画像 */
        .label::before {
          content: "";
          position: absolute;
          inset: 0;
          opacity: 0;
          background: url(../img/menu-hover-bg.svg) center/contain no-repeat;
          top: 0;
          left: 0;
          transform: translateY(-50%);
          z-index: -1;
          transform: scale(0.5);
          transition:
            opacity 0.5s cubic-bezier(0.55, 0, 0.1, 1),
            transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
          pointer-events: none;
        }

        &:hover {
          color: var(--main);
          font-weight: 600;

          .label {
            &::before {
              opacity: 1;
              transform: scale(2.5);
            }
          }
        }

      }

      &.sns-icon {
        margin-left: 10px;
        display: flex;
        gap: 15px;

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

        a {
          img {
            width: clamp(25px, 23.786px + 0.324vw, 30px);
            transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);

          }

          &:hover {
            img {
              transform: scale(1.15);
            }
          }
        }
      }
    }

    @media (max-width: 767px) {
      li:not(:last-of-type) {
        display: none;
      }
    }
  }
}



/* ハンバーガー */
.hamburger-btn {
  width: 55px;
  height: 55px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;

  @media (min-width: 768px) {
    display: none;
    /* 3次 */
  }

  @media (max-width: 767px) {
    display: none;
    /* 3次 */
    width: 30px;
  }

  .hamburger_lines {
    position: relative;
    width: 55%;
    margin: auto;
    height: 10px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;

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

    .line {
      position: absolute;
      right: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      margin: auto;
      background-color: var(--main);
      transition: all 0.3s ease;
    }

    .line:nth-child(1) {
      top: 0;
    }

    .line:nth-child(2) {
      bottom: 0;
    }

    .line:nth-child(3) {
      top: 50%;
      transform: translateY(-50%);
    }
  }
}


/*--------------------
ハンバーガー中身
--------------------*/
.ham-contents {
  display: none;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #999999;
  transition: ease-in .2s;
  /* z-index: 101; */
  z-index: 103;
  overflow-y: scroll;
  overscroll-behavior: none;

  .hamburger-btn {
    position: absolute;
    top: 25px;
    right: 2vw;
  }

  .ham-contents_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* height: 100%; */
    /* padding: 50px 8%; */
    padding: 50px 2%;

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

    .ham_logo {
      /* 180px-263px:375px-1920px */
      width: clamp(11.25rem, 9.991rem + 5.37vw, 16.438rem);
      /* 40px-60px:375px-1920px */
      margin: 0 auto clamp(2.5rem, 2.197rem + 1.29vw, 3.75rem);

      a {
        img {
          width: 100%;
        }
      }
    }

    .h_nav_list {
      display: flex;
      gap: 30px 40px;
      flex-wrap: wrap;
      /* 40px-70px:375px-1920px */
      margin-bottom: clamp(2.5rem, 2.045rem + 1.94vw, 4.375rem);

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

      .h_nav_item {
        width: calc((100% - 120px) / 4);

        @media (max-width: 767px) {
          width: calc((100% - 20px) / 2);
        }

        a {
          font-family: var(--font-min);
          font-weight: 500;
          /* 18px-22px:375px-1920px */
          font-size: clamp(1.125rem, 1.064rem + 0.26vw, 1.375rem);
          border-bottom: 1px #9D7947 solid;
          padding: 10px 0;
          position: relative;
          display: block;

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

          &::after {
            content: "";
            background: url("../img/arrow_circle_gray.svg") center center / contain no-repeat;
            display: inline-block;
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            /* 16px-22px:375px-1920px */
            width: clamp(1rem, 0.909rem + 0.39vw, 1.375rem);
            height: clamp(1rem, 0.909rem + 0.39vw, 1.375rem);
            transition: ease-in .2s;
          }

          @media (max-width: 767px) {
            &::after {
              right: 0;
            }
          }

          &:hover {
            color: #DB6B7C;

            &::after {
              right: 0;
            }
          }
        }
      }
    }
  }
}

/*--------------------
追従CTA
--------------------*/
/*--- 追従CTA（PC） ---*/
.fixed-cta__pc {
  position: fixed;
  z-index: 10;
  right: 2vw;
  bottom: 1.5vw;

  .fixed-cta__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;

    .fixed-cta__item {
      background: var(--main);
      border-radius: 50%;
      width: clamp(120px, 93.333px + 3.472vw, 160px);
      height: clamp(120px, 93.333px + 3.472vw, 160px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        top: 50.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        height: 90%;
      }

      &:hover::before {
        animation: rotate-cw 20s linear infinite;
      }

      &.price-btn {
        &::before {
          background: url(../img/circle-price.svg) center center /contain no-repeat;
        }
      }

      &.reserve-btn {
        &::before {
          background: url(../img/circle-reserve.svg) center center /contain no-repeat;
        }
      }

      a {
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: clamp(24px, 18.667px + 0.694vw, 32px);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.6;
        /* リンク反応するように浮かせる */
        position: absolute;
        content: "";
        top: 0;
        left: 0;

        .en {
          font-family: ivymode, sans-serif;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
  }
}

@keyframes rotate-cw {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*--- 追従CTA（SP） ---*/
.fixed-cta__sp {
  position: fixed;
  z-index: 10;
  bottom: 1.5vw;
  width: calc(100% - 10px);
  left: 50%;
  transform: translateX(-50%);

  .fixed-cta__list {
    display: flex;
    justify-content: center;
    gap: 5px;

    .fixed-cta__item {
      width: 50%;
      background: var(--main);
      text-align: center;

      &:first-of-type {
        background: var(--darkgray);
      }

      a {
        display: block;
        color: #fff;
        padding: 11px 15px 10px;
        width: 100%;
        height: 100%;
        font-size: 20px;

        .en {
          font-family: ivymode, sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 110%;
        }

      }
    }

    .price-btn {
      span {
        display: inline-block;
        margin-right: 10px;
        position: relative;
        top: -2px;
      }
    }

    .reserve-btn {
      .icon-img {
        display: inline-block;
        margin-right: 10px;
        position: relative;
        top: -2px;
      }
    }
  }
}


/*--------------------
トップページ
--------------------*/
/*--- ファーストビュー ---*/
.mv {
  padding-top: 400px;

  @media (max-width: 767px) {
    padding-top: clamp(13.75rem, 11.778rem + 8.41vw, 21.875rem);
  }

  .mv__img {
    position: relative;
    width: 75vw;
    height: 31.25vw;
    aspect-ratio: 1440 / 600;
    overflow: visible;
    margin-left: auto;

    @media (max-width: 1440px) {
      width: 85vw;
      height: 45vw;
      margin-left: auto;
    }

    @media (max-width: 767px) {
      width: 90vw;
      height: 60vw;
      aspect-ratio: 342 / 240;
      margin-left: auto;
    }

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

    .mv__copy {
      position: absolute;
      top: -240px;
      left: -120px;

      @media (max-width: 1440px) {
        top: -220px;
        left: -120px;
      }

      @media (max-width: 1200px) {
        top: -180px;
        left: -80px;
      }

      @media (max-width: 767px) {
        top: -23.47vw;
        left: -40px;
        width: 80vw;
      }

      @media (max-width: 540px) {
        top: -25vw;
        left: -20px;
      }

      p {
        font-size: clamp(12px, 9.573px + 0.647vw, 22px);
        margin-bottom: 10px;
      }

      .mv__copy-svg {
        width: clamp(600px, 443.333px + 20.399vw, 835px);
        height: auto;

        @media (max-width: 767px) {
          width: 80vw;
        }

      }
    }
  }
}


/*--- 注目のお知らせ ---*/
.top-picks {
  padding-bottom: clamp(120px, 83.592px + 9.709vw, 270px);
  position: relative;
  margin-top: clamp(3.75rem, 2.385rem + 5.83vw, 9.375rem);

  .top-picks__inner {
    position: relative;

    &::after {
      position: absolute;
      content: "";
      background: url(../img/ttl-toppick.svg) no-repeat center/contain;
      top: -5.21vw;
      left: 0;
      width: clamp(140px, 91.456px + 12.945vw, 340px);
      height: auto;
      aspect-ratio: 340/165;
      z-index: 1;

      @media (max-width: 767px) {
        left: 1vw;
        top: -8vw;
      }
    }

    .top-picks__list {
      /* 3次 削除*/
      display: flex;
      justify-content: center;
      gap: clamp(20px, 15.146px + 1.294vw, 40px);

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

      /* 3次 削除--ここまで*/

      .top-picks__item {
        aspect-ratio: 460/240;
        display: block;
        border-radius: 10px;
        overflow: hidden;

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

  /* 3次 表示*/
  /* &::after {
    position: absolute;
    content: "";
    background: url(../img/ttl-toppick.svg) no-repeat center/contain;
    top: -100px;
    left: 0;
    width: clamp(140px, 91.456px + 12.945vw, 340px);
    height: auto;
    aspect-ratio: 340/165;
    z-index: 1;

    @media (max-width: 767px) {
      left: 1vw;
      top: -50px;
    }
  }

  .top-picks__swiper {
    position: relative;
    padding-top: clamp(50px, 37.864px + 3.236vw, 100px);

    &::after {
      position: absolute;
      content: "";
      background: url(../img/ttl-toppick.svg) no-repeat center/contain;
      top: 0;
      left: 20vw;
      width: clamp(140px, 91.456px + 12.945vw, 340px);
      height: auto;
      aspect-ratio: 340/165;
      z-index: 1;
    }

    @media (max-width: 767px) {
      &::after {
        left: 2vw;
      }
    }

    .swiper-wrapper {
      .swiper-slide {
        a {
          aspect-ratio: 460/240;
          display: block;
          border-radius: 10px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  } */
}


/*--- 当院のオススメ施術・お悩みから探す（共通） ---*/
.top-menu-top,
.top-menu-bottom {
  display: grid;
  grid-template-columns: 3.5vw calc(100% - 7vw) 3.5vw;

  @media (max-width: 767px) {
    grid-template-columns: 5vw calc(100% - 5vw);
  }

  .top-menu__left {
    border-right: 1px solid var(--darkgray);
    display: flex;
    justify-content: center;
    padding-top: clamp(15px, 11.359px + 0.971vw, 30px);

    p {
      font-family: var(--en);
      font-weight: 400;
      letter-spacing: 0.05em;
      writing-mode: vertical-rl;
      font-size: clamp(14px, 10.117px + 1.036vw, 30px);
      color: var(--darkgray);
    }
  }
}

/*--- 当院のオススメ施術 ---*/
.top-menu-top {
  position: relative;
  z-index: 0;
  border-top: 1px solid var(--darkgray);
  padding-top: -1px;

  .top-menu__main {
    text-align: center;

    h2 {
      margin-top: -7vh;
      text-align: center;
      font-family: var(--en);
      font-size: clamp(54px, 37.981px + 4.272vw, 120px);
      font-weight: 500;
      color: var(--main);
      position: relative;

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

      &::before {
        position: absolute;
        content: "";
        background: url(../img/menu-ttl-bg.svg) no-repeat center/contain;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(90px, 63.301px + 7.12vw, 200px);
        height: auto;
        aspect-ratio: 200/228;
        z-index: -1;
      }

      &::after {
        position: absolute;
        content: "";
        background: #fff;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: clamp(116px, 76.194px + 10.615vw, 280px);
        height: clamp(45px, 31.650px + 3.56vw, 100px);
        z-index: -1;
      }
    }

    .best-choice__wrapper {
      padding-bottom: clamp(20px, 12.718px + 1.942vw, 50px);

      .best-choice {
        width: 55%;
        margin: 0 auto;

        @media (max-width: 1800px) {
          width: 60%;
        }
        @media (max-width: 1500px) {
          width: 70%;
        }

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

        .best-choice__swiper {
          .best-choice__list {
            .best-choice__item {
              a {
                .best-choice__item--img {
                  width: 100%;
                  aspect-ratio: 380/484;
                  overflow: hidden;

                  @media (max-width: 767px) {
                    aspect-ratio: 210/268;
                  }

                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transform: scale(1);
                    transition: transform 0.3s;
                  }
                }

                .menu-more-btn {
                  margin-top: clamp(-50px, -37.864px + -3.236vw, -100px);
                  width: clamp(50px, 37.864px + 3.236vw, 100px);
                  height: clamp(50px, 37.864px + 3.236vw, 100px);
                  border-radius: 50%;
                  background: #fff;
                  position: relative;
                  display: inline-block;
                  transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55);

                  &::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-40%, -50%) scale(1);
                    width: 0;
                    height: 0;
                    border-top: clamp(10px, 9.029px + 0.259vw, 14px) solid transparent;
                    border-bottom: clamp(10px, 9.029px + 0.259vw, 14px) solid transparent;
                    border-left: clamp(16px, 14.544px + 0.388vw, 22px) solid var(--darkgray);
                    transition: transform 0.3s cubic-bezier(.68, -0.55, .27, 1.55);

                  }

                  &::before {
                    content: "";
                    background: url(../img/viewmore.svg) no-repeat center/contain;
                    position: absolute;
                    left: 50%;
                    top: 25%;
                    transform: translate(-50%, -50%);
                    width: clamp(42px, 33.505px + 2.265vw, 77px);
                    height: clamp(17px, 13.359px + 0.971vw, 32px);
                  }

                  display: none;
                  /* 3次 */
                }

                .best-choice__item--text {
                  border-top: 1px solid var(--darkgray);
                  border-bottom: 1px solid var(--darkgray);
                  padding: 10px 0;
                  position: relative;
                  z-index: 2;

                  margin-top: clamp(20px, 15.146px + 1.294vw, 40px);
                  /* 3次 削除*/

                  p {
                    font-size: clamp(22px, 18.845px + 0.841vw, 35px);
                    color: var(--main);
                  }
                }

                /* 3次 表示*/
                /* &:hover {
                  .best-choice__item--img {
                    img {
                      transform: scale(1.1);
                    }
                  }

                  .menu-more-btn {
                    transform: scale(1.2);

                    &::after {
                      border-left: clamp(16px, 14.544px + 0.388vw, 22px) solid var(--main);
                    }
                  }
                } */

              }

            }

            /*--- ループバグ対応 ---*/
            .best-choice__item[data-index="1"] .best-choice__item--img {
              border-radius: 0 0 0 12vw;

              @media (max-width: 767px) {
                border-radius: 0 0 0 30vw;
              }
            }

            .best-choice__item[data-index="2"] .best-choice__item--img {
              border-radius: 12vw 0 0 0;

              @media (max-width: 767px) {
                border-radius: 26.67vw 0 0 0;
              }
            }

            .best-choice__item[data-index="3"] .best-choice__item--img {
              border-radius: 0 15.63vw 0 0;

              @media (max-width: 767px) {
                border-radius: 26.67vw 0 0 0;
              }
            }

          }

          .swiper-navigation {
            position: relative;
            bottom: 0;
            height: 40px;
            margin-top: 30px;
            width: 81%;
            display: flex;
            align-items: center;
            justify-content: center;

            .navigation-inner {
              width: 180px;
              height: 40px;
              position: absolute;
            }

            .best-choice-prev,
            .best-choice-next {
              position: absolute;
              z-index: 50;
              top: 50%;
              width: 40px;
              height: 40px;
              background-color: var(--main);
              border-radius: 50%;

              &::after {
                color: #fff;
                font-size: clamp(0.875rem, 0.814rem + 0.26vw, 1.125rem);
                font-weight: 600;
                line-height: 40px;
              }
            }

            /* 通常のページネーションの色 */
            .swiper-pagination-bullet {
              background: #D9D9D9;
              opacity: 0.7;
            }

            /* アクティブなページネーションの色 */
            .swiper-pagination-bullet-active {
              background: var(--main);
              opacity: 1;
            }

          }

        }

      }
    }
  }
}

/*--- お悩みから探す ---*/
.top-menu-bottom {
  border-bottom: 1px solid var(--main);

  .worries-search__wrapper {
    .worries-search {
      .tab-wrapper {

        /* タブボタン */
        .tab-list {
          border-bottom: 1px solid var(--darkgray);
          padding-bottom: 15px;

          .tab-list__inner {
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            width: 75%;
            margin: 0 auto;

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

            .tab-item {
              color: var(--darkgray);
              font-size: clamp(18px, 15.087px + 0.777vw, 30px);
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              transition: color .2s ease-in-out;
              width: 50%;

              &:hover {
                color: var(--main);
              }

              .active-item__inner {
                width: 33.333%;
                position: relative;

                @media (max-width: 1150px) {
                  width: 40%;
                }

                @media (max-width: 880px) {
                  width: 45%;
                }

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

                &::before {
                  content: "";
                  position: absolute;
                  left: 50%;
                  bottom: -18px;
                  width: 100%;
                  border-bottom: 5px solid var(--main);
                  transform: translateX(-50%) scaleX(0);
                  transform-origin: center;
                  transition: transform 0.4s cubic-bezier(.77, 0, .18, 1);
                  pointer-events: none;
                }
              }

              &:hover .active-item__inner::before,
              &.is-active .active-item__inner::before {
                transform: translateX(-50%) scaleX(1);
              }
            }

            .tab-item.is-active {
              color: var(--main);
            }

            @media (max-width: 767px) {
              .tab-item .active-item__inner::before {
                border-bottom-width: 4px;
                bottom: -17px;
              }
            }
          }
        }

        /* パネル */
        .panel-list {
          padding-bottom: clamp(60px, 38.155px + 5.825vw, 150px);

          .panel-item {
            opacity: 0;
            transition: opacity 0.5s;
            height: 0;
            overflow: hidden;
            pointer-events: none;

            .menu-list__wrapper {
              margin-top: clamp(40px, 25.437px + 3.883vw, 100px);

              .menu-list__list {
                display: flex;
                flex-wrap: wrap;
                gap: clamp(40px, 35.146px + 1.294vw, 60px);

                .menu-list__item {
                  width: calc((100% - 60px) / 2);

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

                  .menu-parent {
                    background: #617EA9;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    gap: clamp(18px, 12.660px + 1.424vw, 40px);
                    padding: clamp(10px, 8.058px + 0.518vw, 18px) clamp(20px, 16.359px + 0.971vw, 35px);
                    position: relative;
                    z-index: -1;
                    margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

                    @media (max-width: 767px) {
                      border-radius: 6px;
                    }

                    &::before {
                      position: absolute;
                      content: "";
                      background: url(../img/marble-bg.webp) no-repeat center/cover;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      border-radius: 10px;
                      mix-blend-mode: multiply;
                      z-index: -1;
                    }

                    img {
                      width: clamp(38px, 27.320px + 2.848vw, 82px);
                    }

                    p {
                      color: #fff;
                      font-size: clamp(20px, 17.573px + 0.647vw, 30px);
                    }
                  }

                  .menu-child {
                    .menu-child__list {
                      display: flex;
                      flex-wrap: wrap;
                      gap: 15px 20px;

                      .menu-child__item {
                        width: calc((100% - 20px) / 2);
                        font-size: clamp(16px, 15.272px + 0.194vw, 19px);

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

                        a {
                          display: flex;
                          justify-content: left;
                          align-items: start;
                          gap: 0.5em;
                          position: relative;
                          font-size: clamp(15px, 14.272px + 0.194vw, 18px);

                          &::before {
                            content: "";
                            width: 8px;
                            height: 1px;
                            background-color: var(--main);
                            flex-shrink: 0;
                            margin-top: 0.8em;
                            border-radius: 1px;
                            transition:
                              opacity 0.18s cubic-bezier(.68, -0.55, .27, 1.55),
                              width 0.28s cubic-bezier(.68, -0.55, .27, 1.55);
                            display: block;
                            opacity: 1;
                          }

                          &::after {
                            content: "";
                            display: block;
                            position: absolute;
                            left: -4px;
                            top: 50%;
                            transform: translateY(-50%) scale(0.2);
                            width: 0.8em;
                            height: 0.8em;
                            background: url(../img/star.svg) no-repeat center/contain;
                            opacity: 0;
                            pointer-events: none;
                            transition:
                              opacity 0.35s cubic-bezier(.68, -0.55, .27, 1.55),
                              transform 0.35s cubic-bezier(.68, -0.55, .27, 1.55);
                            z-index: 2;
                          }

                          /* 3次 表示*/
                          /* &:hover,
                          &:focus {
                            color: var(--main);

                            &::before {
                              opacity: 0;
                            }

                            &::after {
                              opacity: 1;
                              transform: translateY(-50%) scale(1);
                            }
                          } */
                        }
                      }
                    }
                  }
                }
              }
            }

            &.is-active {
              opacity: 1;
              height: auto;
              overflow: visible;
              pointer-events: auto;
              transition: opacity 1s;
            }
          }

        }
      }
    }
  }
}

/*--- 当院の特徴 ---*/
.top-features {
  padding: clamp(80px, 63.010px + 4.531vw, 150px) 0;

  .sec-ttl {
    margin-bottom: clamp(40px, 25.437px + 3.883vw, 100px);
  }

  .features__wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(50px, 37.864px + 3.236vw, 100px);

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

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

      .features__item--text {
        img {
          width: clamp(130px, 108.155px + 5.825vw, 220px);
          position: relative;
          left: clamp(-20px, -10.291px + -2.589vw, -60px);

          @media (max-width: 767px) {
            bottom: -10px;
          }
        }

        h3 {
          font-size: clamp(20px, 15.146px + 1.294vw, 40px);
          color: var(--main);

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

        hr {
          display: block;
          width: clamp(295px, 242.816px + 13.916vw, 510px);
          height: 1px;
          background-color: var(--main);
          border: 0;
          margin: clamp(15px, 11.359px + 0.971vw, 30px) 0;
        }
      }

      .features-img {
        width: clamp(260px, 177.476px + 22.006vw, 600px);
      }

      &:nth-of-type(even) {
        .features__item--text {
          order: 1;

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

          img {
            left: 60%;
            bottom: clamp(-20px, -17.573px + -0.647vw, -30px);

            @media (max-width: 767px) {
              left: -20px;
              transform: rotate(-12deg);
            }
          }
        }
      }

      &:nth-of-type(1) {
        .features-img {
          border-radius: 0 15.63vw 0 0;

          @media (max-width: 767px) {
            border-radius: 0 26.67vw 0 0;

          }

        }
      }

      &:nth-of-type(2) {
        .features-img {
          border-radius: 0 18vw 18vw 0;
        }
      }

      &:nth-of-type(3) {
        .features-img {
          border-radius: 15.63vw 0 0 0;

          @media (max-width: 767px) {
            border-radius: 26.67vw 0 0 0;
          }
        }
      }
    }
  }
}

/*--- コンセプト ---*/
.top-concept {
  background: url(../img/concept-bg_pc.jpg) top left /90% 100% no-repeat;
  padding: clamp(60px, 38.155px + 5.825vw, 150px) 0;
  position: relative;

  @media (max-width: 767px) {
    background: url(../img/concept-bg_pc.jpg) top left /95% 100% no-repeat;
  }

  &::after {
    position: absolute;
    content: "";
    background: url(../img/concept-bg-text.svg) no-repeat center/contain;
    mix-blend-mode: color-burn;
    width: clamp(30px, 13.010px + 4.531vw, 100px);
    height: clamp(247px, 163.019px + 22.395vw, 593px);
    top: 0;
    left: 0;
  }

  .concept__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 92%;
    margin-left: auto;

    @media (min-width: 1920px) {
      width: 84%;
    }

    @media (max-width: 1200px) {
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(30px, 19.437px + 2.817vw, 60px);
    }

    .concept__text {
      @media (max-width: 767px) {
        width: 95%;
      }

      .concept-br {
        display: none;

        @media (min-width: 1201px) and (max-width: 1530px) {
          display: inline;
        }
      }

      .concept-ttl {
        font-family: var(--en);
        color: var(--darkgray);
        font-size: clamp(18px, 15.087px + 0.777vw, 30px);
        margin-bottom: clamp(20px, 12.718px + 1.942vw, 50px);
        position: relative;

        &::after {
          position: absolute;
          content: "";
          width: clamp(30px, 27.573px + 0.647vw, 40px);
          height: 1px;
          background-color: var(--darkgray);
          left: 0;
          bottom: 0;
        }
      }

      h2 {
        font-size: clamp(22px, 17.631px + 1.165vw, 40px);
        color: var(--main);
        margin-bottom: clamp(30px, 25.146px + 1.294vw, 50px);
      }
    }

    .concept-img {
      width: clamp(330px, 198.932px + 34.951vw, 870px);
      border-radius: clamp(100px, 51.456px + 12.945vw, 300px) 0 0 0;

      @media (max-width: 1440px) {
        margin-left: auto;
      }
    }
  }
}


/*--- ドクター紹介 ---*/
.top-doctor {
  padding: clamp(60px, 38.155px + 5.825vw, 150px) 0;

  .sec-ttl {
    margin-bottom: clamp(30px, 22.718px + 1.942vw, 60px);
  }

  .doctor__wrapper {
    display: flex;
    align-items: center;
    gap: clamp(30px, 22.718px + 1.942vw, 60px);

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

    .doctor__img {
      img {
        width: clamp(200px, 139.320px + 16.181vw, 450px);
      }

      .name {
        font-size: clamp(22px, 18.845px + 0.841vw, 35px);
        color: var(--main);
        text-align: center;
        margin-top: clamp(15px, 13.786px + 0.324vw, 20px);

        span {
          font-size: 70%;
        }
      }
    }

    .doctor__text {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;

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

      .career {
        display: flex;
        align-items: center;
        background: #F7F7F7;
        border-radius: 10px;
        padding: 35px 0;

        @media (max-width: 767px) {
          display: block;
          flex-direction: column;
          align-items: flex-start;
          padding: 20px;
        }

        .career__ttl {
          flex-basis: 28%;
          text-align: center;
          padding: 0 10px;

          @media (max-width: 767px) {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            text-align: left;
            flex-basis: auto;
            padding: 0 0 10px 0;
          }

          span {
            display: block;

            img {
              width: clamp(30px, 27.573px + 0.647vw, 40px);
            }
          }

          p {
            font-size: clamp(16px, 14.544px + 0.388vw, 22px);
            color: var(--main);
            line-height: 1.2;
            margin-top: 10px;
          }
        }

        .career__list {
          display: flex;
          flex-direction: column;
          gap: 10px;
          border-left: 1px solid var(--main);
          padding: 0 30px;
          flex-basis: 72%;

          @media (max-width: 767px) {
            border-left: none;
            border-top: 1px solid var(--main);
            padding: 0;
            flex-basis: auto;
            padding-top: 15px;
          }

          .career__item {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            line-height: 1.5;
            position: relative;
            padding-left: 18px;

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

            &::before {
              position: absolute;
              content: "";
              border: 7px solid transparent;
              border-left: 12px solid var(--main);
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }
          }

          @media (max-width: 767px) {
            .career__item {
              &::before {
                border: 5px solid transparent;
                border-left: 9px solid var(--main);
              }
            }
          }
        }
      }

      .viewmore-btn {
        text-align: left;

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



/*--- お知らせ ---*/
.top-news {
  padding: clamp(60px, 50.291px + 2.589vw, 100px) 0 clamp(60px, 38.155px + 5.825vw, 150px);

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

  .top-news__wrapper {
    border: 1px solid var(--main);
    display: grid;
    grid-template-columns: 3.5vw calc(100% - 7vw) 3.5vw;

    @media (max-width: 767px) {
      grid-template-columns: 5vw calc(100% - 5vw);
    }

    .top-news__left,
    .top-news__right {
      display: flex;
      justify-content: center;
      align-items: center;

      @media (max-width: 767px) {
        align-items: flex-start;
      }

      p {
        font-family: var(--en);
        font-weight: 400;
        font-size: clamp(14px, 10.117px + 1.036vw, 30px);
        color: var(--darkgray);
        letter-spacing: 0.05em;

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

    .top-news__left {
      border-right: 1px solid var(--main);

      p {
        writing-mode: vertical-rl;
      }
    }

    .top-news__right {
      border-left: 1px solid var(--main);

      p {
        writing-mode: sideways-lr;
      }

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

    .top-news__main {
      padding: clamp(40px, 25.437px + 3.883vw, 100px) 15px;

      .news-list__group {
        margin-top: clamp(1.25rem, 0.947rem + 1.29vw, 2.5rem);

        .news-list__list {
          .news-list__item {
            border-bottom: 1px solid var(--main);
            transition: border-color 0.4s;

            a {
              padding: clamp(20px, 15.146px + 1.294vw, 40px) 0;
              display: block;
              position: relative;

              &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                height: 1px;
                width: 100%;
                background: var(--main);
                transform: scaleX(0);
                transform-origin: left center;
                transition: transform 0.4s cubic-bezier(.77, 0, .18, 1);
                pointer-events: none;
              }

              .news-contents {
                display: flex;
                flex-wrap: wrap;
                font-size: clamp(14px, 12.544px + 0.388vw, 20px);
                
                @media (max-width: 1000px){
                  display: block;
                }

                time {
                  flex-basis: 13%;
                  color: var(--main);
                }

                p {
                  flex-basis: 80%;

                  @media (max-width: 1000px){
                    margin-top: 5px;
                    width: calc(100% - 40px);
                  }
                }

                /* 3次 */
                /* &::before,
                &::after {
                  position: absolute;
                  top: 50%;
                  right: 5px;
                  height: 1px;
                  background: var(--main);
                  content: '';
                  transition: ease-in 0.1s;
                }

                &::before {
                  width: 24px;
                  transform: translateY(-50%);

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

                &::after {
                  width: 12px;
                  transform: translateY(-50%) rotate(45deg);
                  transform-origin: right center;

                  @media (max-width: 767px) {
                    width: 9px;
                  }
                } */
              }

              /* 3次 */
              /* &:hover {
                opacity: 0.7;

                .news-list__item {
                  border-bottom-color: transparent;
                }

                &::after {
                  transform: scaleX(1);
                }

                .news-contents {
                  &::before,
                  &::after {
                    right: 0;
                  }
                }

              } */
            }

            &:has(a:hover) {
              border-bottom-color: transparent;
            }
          }
        }
      }
    }
  }
}


/*--------------------
footer
--------------------*/
footer {
  overflow: hidden;

  .footer-inner {
    padding-bottom: 40px;
    background: #F4F5F6;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    margin-left: -200px;
    margin-right: -200px;
    padding-left: 200px;
    padding-right: 200px;
    padding-bottom: 40px;
    padding-top: clamp(50px, 37.864px + 3.236vw, 100px);

    @media (max-width: 767px) {
      padding-bottom: 80px;
      margin-left: -300px;
      margin-right: -300px;
      padding-left: 300px;
      padding-right: 300px;
    }

    .footer-logo {
      text-align: center;
      margin-bottom: clamp(35px, 28.932px + 1.618vw, 60px);

      img {
        width: clamp(80px, 65.437px + 3.883vw, 140px);
      }
    }

    .clinic-info__wrapper {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: clamp(20px, 13.932px + 1.618vw, 45px);

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

      .clinic-info {
        flex-grow: 1;

        p {
          @media (max-width: 767px) {
            font-size: 13px;
          }
        }

        .hours-table {
          border-top: 1px solid var(--main);
          border-bottom: 1px solid var(--main);
          margin-top: 30px;
          width: 100%;
          color: var(--main);

          thead {
            tr {
              font-size: clamp(14px, 13.515px + 0.129vw, 16px);
              border-bottom: 1px solid var(--main);
              text-align: center;

              th {
                width: 27%;
                padding: 15px 0;
              }

              td {
                padding: 15px 0;
                width: 10%;

                &:last-of-type {
                  width: 13%;
                }
              }
            }
          }

          tbody {
            tr {
              font-size: clamp(14px, 13.515px + 0.129vw, 16px);
              text-align: center;

              th {
                width: 25%;
                padding: 15px 0;
              }

              td {
                padding: 15px 0;
                width: 10%;

                &:last-of-type {
                  width: 15%;
                }
              }

            }
          }
        }

        .sns-icon {
          margin-top: 30px;
          display: flex;
          gap: 15px;

          @media (max-width: 767px) {
            justify-content: center;
            margin-bottom: 30px;
          }

          a {
            img {
              width: 25px;
              transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
            }

            &:hover {
              img {
                transform: scale(1.15);
              }
            }
          }
        }
      }

      .clinic-map {
        flex-grow: 1;

        .map__wrapper {
          aspect-ratio: 335/150;

          iframe {
            width: 100%;
            height: 100%;
          }
        }

        .map__info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 15px;

          p {
            position: relative;
          }

          @media (max-width: 767px) {
            p {
              font-size: 13px;
            }
          }

          .map-btn {
            a {
              color: var(--main);
              display: block;
              border-bottom: 1px solid var(--main);
              padding-bottom: 2px;
              padding-right: 20px;
              position: relative;
              font-size: clamp(13px, 12.272px + 0.194vw, 16px);

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

              &::before,
              &::after {
                position: absolute;
                top: 50%;
                right: 3px;
                height: 1px;
                background: #000;
                content: '';
                display: inline-block;
                margin-left: 10px;
                transition: ease-in 0.1s;
              }

              &::before {
                width: 13px;
                transform: translateY(-50%);
              }

              &::after {
                width: 6px;
                transform: translateY(-50%) rotate(45deg);
                transform-origin: right center;
              }

              &:hover {
                opacity: 0.7;

                &::before,
                &::after {
                  right: 0;
                }
              }
            }
          }
        }
      }
    }
  }

  .p-group {
    margin-top: clamp(60px, 55.146px + 1.294vw, 80px);
    font-size: clamp(10px, 9.515px + 0.129vw, 12px);
    /* 3次でflexに */
    display: block;
    align-items: center;
    justify-content: space-between;

    @media (max-width: 767px){
      display: block;
    }
    .policy {
      border-bottom: 1px solid var(--base);
      a {
        &:hover {
          opacity: 0.7;
        }
      }
    }
    .copyright {
      text-align: center;
    }

  }
}


/*--------------------
パンくず
--------------------*/
.breadcrumb {
  padding-left: clamp(30px, 22.718px + 1.942vw, 60px);
  margin-top: clamp(50px, 47.573px + 0.647vw, 60px);

  .breadcrumb__list {
    font-size: clamp(9px, 7.786px + 0.324vw, 14px);
    display: flex;
    align-items: center;
    margin: auto;
    padding: 0;
    flex-wrap: wrap;
    list-style: none;

    * {
      font-family: var(--font-min);
      font-weight: 500;
    }

    .breadcrumb__item {
      display: flex;
      align-items: center;

      &>span {
        color: var(--main);
      }

      &+.breadcrumb__item {
        &::before {
          content: "";
          display: block;
          width: 4px;
          height: 1px;
          background-color: var(--main);
          margin: 0 8px;
        }
      }
    }
  }
}



/*--------------------
料金表
--------------------*/
.post-type-archive-price {

  /*--- ファーストビュー ---*/
  .lower-header {
    margin-top: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 1200px) {
      margin-top: clamp(140px, 103.636px + 9.697vw, 220px);
      display: block;
    }

    .lower-header__title {
      padding-left: 11.46vw;

      @media (max-width: 1200px) {
        margin-bottom: 2.5vw;
      }

      @media (max-width: 767px) {
        padding-left: 5.33vw;
      }

      .page-title__en {
        font-family: var(--en);
        font-size: clamp(54px, 37.981px + 4.272vw, 120px);
        font-weight: 500;
        color: #9BA4B3;
        position: relative;
        padding-left: clamp(30px, 22.718px + 1.942vw, 60px);

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

        &::before {
          position: absolute;
          content: "";
          background: url(../img/lower-ttl-bg.svg) no-repeat center/contain;
          top: 30%;
          left: 0;
          transform: translateY(-50%);
          width: clamp(65px, 41.942px + 6.149vw, 160px);
          height: auto;
          aspect-ratio: 200/228;
          z-index: -1;
        }

        &::after {
          position: absolute;
          content: "";
          background: #fff;
          top: 40%;
          left: 60%;
          transform: translate(-50%, -50%);
          width: clamp(116px, 76.194px + 10.615vw, 280px);
          height: clamp(45px, 31.650px + 3.56vw, 100px);
          z-index: -1;
        }
      }

      .page-title__ja {
        font-size: clamp(14px, 10.117px + 1.036vw, 30px);
        padding-left: clamp(30px, 22.718px + 1.942vw, 60px);
        margin-top: -1.56vw;

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

    .lower-header__img {
      @media (max-width: 1200px) {
        text-align: right;
      }

      img {
        width: clamp(324px, 169.631px + 41.165vw, 960px);
      }
    }
  }

  /*--- サイドバー ---*/
  .price__wrapper {
    padding-top: clamp(60px, 38.155px + 5.825vw, 150px);
    padding-bottom: clamp(60px, 38.155px + 5.825vw, 150px);
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 35.146px + 1.294vw, 60px);

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

    .price__sidebar {
      flex-basis: 25%;
      position: sticky;
      top: 140px;
      height: max-content;

      @media (max-width: 767px){
        margin-bottom: 60px;
        position: static;
      }

      .price__sidebar--box {
        background: #8F97A3;
        padding: clamp(20px, 15.146px + 1.294vw, 40px) clamp(15px, 11.359px + 0.971vw, 30px);

        @media (max-width: 767px) {
          background: none;
          padding: 0;
        }

        .sidebar__list {
          display: flex;
          flex-direction: column;
          gap: 20px;

          @media (max-width: 767px) {
            flex-direction: unset;
            flex-wrap: wrap;
            gap: 10px;
          }

          .sidebar__item {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            position: relative;
            padding-left: 14px;

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

            a {
              color: #fff;

              @media (max-width: 767px) {
                text-align: center;
                font-size: 14px;
                background: #8F97A3;
                display: block;
                padding: 15px 5px;

              }

              &::before {
                position: absolute;
                content: "";
                background: #fff;
                width: 6px;
                height: 1px;
                top: 50%;
                transform: translateY(-50%);
                left: 0;

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

              &:hover {
                opacity: 0.7;
              }
            }
          }
        }
      }
      .sidebar-notes {
        margin-top: 15px;
        font-size: clamp(12px, 11.515px + 0.129vw, 14px);
        padding-left: 1em;
        text-indent: -1em;
      }
    }

    .price__main {
      flex-grow: 1;

      .price__group {
        &+.price__group {
          margin-top: clamp(80px, 63.010px + 4.531vw, 150px);
        }

        h2 {
          font-size: clamp(25px, 20.146px + 1.294vw, 45px);
          color: var(--main);
          border-bottom: 1px solid var(--main);
          margin-bottom: clamp(30px, 22.718px + 1.942vw, 60px);
          padding-bottom: 10px;
          position: relative;
          padding-left: clamp(30px, 25.146px + 1.294vw, 50px);

          &::before {
            position: absolute;
            content: "";
            background: url(../img/star.svg) top left /contain no-repeat;
            top: 45%;
            left: 0;
            transform: translateY(-50%);
            width: clamp(22px, 16.903px + 1.359vw, 43px);
            height: clamp(22px, 16.903px + 1.359vw, 43px);
            @media (max-width: 767px) {
              top: 42%;
            }
          }

          &::after {
            position: absolute;
            content: "";
            border-bottom: 1px solid var(--main);
            top: 1px;
            left: 0;
            width: 100%;
            height: calc(100% + 4px);
          }
        }

        h3 {
          font-size: clamp(22px, 18.845px + 0.841vw, 35px);
          color: var(--base);
          padding-bottom: 10px;
          margin-top: clamp(40px, 30.291px + 2.589vw, 80px);
          margin-bottom: clamp(30px, 25.146px + 1.294vw, 50px);
          position: relative;

          &::before {
            position: absolute;
            content: "";
            background: var(--main);
            width: 30px;
            height: 1px;
            bottom: 0;
            left: 0;
          }
        }

        .formulation {
          background: #E6E9EE;
          font-size: clamp(16px, 13.816px + 0.583vw, 25px);
          padding: clamp(15px, 12.573px + 0.647vw, 25px);
          margin-bottom: 20px;

          span {
            color: var(--main);
          }
        }

        .price-box {
          .price-box__inner {
            border: 1px solid var(--main);

            dl {
              display: flex;
              font-size: clamp(14px, 12.544px + 0.388vw, 20px);

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

              dt {
                background: #F8F9FB;
                padding: clamp(15px, 8.932px + 1.618vw, 40px);
                flex-basis: 67%;

                .dt__list {
                  display: flex;
                  flex-direction: column;
                  gap: clamp(8px, 6.301px + 0.453vw, 15px);

                  .dt__item {
                    position: relative;
                    padding-left: clamp(12px, 11.272px + 0.194vw, 15px);

                    &::before {
                      position: absolute;
                      content: "";
                      background: var(--main);
                      top: 50%;
                      transform: translateY(-50%);
                      left: 0;
                      width: clamp(6px, 5.515px + 0.129vw, 8px);
                      height: clamp(6px, 5.515px + 0.129vw, 8px);
                      border-radius: 50%;
                    }
                  }
                }
              }

              dd {
                flex-grow: 1;
                padding: clamp(15px, 8.932px + 1.618vw, 40px);
                color: var(--main);
                text-align: right;

                p {
                  &:has(span) {
                    display: flex;
                    justify-content: flex-end;
                    gap: 20px;
                  }
                }
              }

              &+dl {
                border-top: 1px solid var(--main);
              }
            }
          }

          .price-notes {
            font-size: clamp(12px, 11.515px + 0.129vw, 14px);
            margin-top: 10px;
          }

          &+.price-box {
            margin-top: clamp(25px, 21.359px + 0.971vw, 40px);
          }
        }
      }
    }
  }
}