@charset "utf-8";

/*--------------------
webfont
--------------------*/
* {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
}

/*--------------------
root
--------------------*/
:root {
  --font-min: "Shippori Mincho", serif;
  --color-ttl: #432815;
  --color-general: #d6822f;
  --color-beauty: #c62c2b;
}

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

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

.no-scroll {
  overflow: hidden;
  position: relative;
}

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

  &:hover {
    transition: ease-in 0.2s;
  }
}

picture {
  display: block;

  img {
    width: 100%;
  }
}

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

li {
  list-style: none;
}

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

.container-m {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

.container-s {
  max-width: 960px;
  width: 90%;
  margin: 0 auto;

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

.pc {
  display: block;

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

.sp {
  display: none;

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

.txt {
  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
  margin: 0;
  line-height: 1.7;
}

.bold {
  font-weight: 600;
}

.swiper_area {
  position: relative;
}

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

img {
  max-width: 100%;
}

/*--------------------
title
--------------------*/
.sec-ttl {
  font-family: var(--font-min);
  font-weight: 400;
  font-size: clamp(24px, 18.175px + 1.553vw, 48px);
  color: var(--color-ttl);
  margin: 0 0 clamp(30px, 27.573px + 0.647vw, 40px);
}

.sec-ttl--bilingual {
  margin-bottom: clamp(50px, 42.718px + 1.942vw, 80px);

  .en {
    font-family: var(--font-min);
    font-weight: 400;
    font-size: clamp(60px, 38.155px + 5.825vw, 150px);
    color: #9e8d85;
    text-align: center;
    margin: 0;

    @media (max-width: 767px) {
      letter-spacing: -0.05em;
    }
  }

  .ja {
    font-family: var(--font-min);
    font-weight: 500;
    font-size: clamp(18px, 13.631px + 1.165vw, 36px);
    color: var(--color-ttl);
    text-align: center;
    margin: 0;
  }
}

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

  .en {
    font-family: var(--font-min);
    font-weight: 400;
    font-size: clamp(32px, 26.175px + 1.553vw, 56px);
    color: #9e8d85;
    text-align: center;
    margin: 0;
  }

  .ja {
    font-family: var(--font-min);
    font-weight: 400;
    font-size: clamp(18px, 16.544px + 0.388vw, 24px);
    color: var(--color-ttl);
    text-align: center;
    margin: 0;
  }

  &.color-general {
    .ja {
      color: var(--color-general);
    }
  }

  &.color-beauty {
    .ja {
      color: var(--color-beauty);
    }
  }
}

.sec-ttl--symbol {
  margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);

  .ja {
    font-family: var(--font-min);
    font-weight: 400;
    font-size: clamp(28px, 23.874px + 1.1vw, 45px);
    color: var(--color-ttl);
    text-align: center;
    margin: 0;
  }

  .en {
    font-family: var(--font-min);
    font-size: clamp(16px, 15.029px + 0.259vw, 20px);
    color: #242424;
    text-align: center;
    margin: 0;
  }

  &::before {
    content: "";
    background: url("../img/symbol-general.svg") center center / contain no-repeat;
    width: clamp(45px, 42.573px + 0.647vw, 55px);
    height: clamp(45px, 42.573px + 0.647vw, 55px);
    display: block;
    margin: 0 auto clamp(10px, 8.786px + 0.324vw, 15px);
  }

  &.color-general {
    .ja {
      color: var(--color-general);
    }
  }

  &.color-beauty {
    &::before {
      background-image: url("../img/symbol-beauty.svg");
    }

    .ja {
      color: var(--color-beauty);
    }
  }
}

.sec-ttl--bilingual-layer {
  position: relative;
  margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);

  .ja {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-min);
    font-weight: 500;
    font-size: clamp(28px, 23.874px + 1.1vw, 45px);
    text-align: center;
    color: var(--color-ttl);
    margin: 0;
    width: 100%;
  }

  .en {
    font-family: var(--font-min);
    font-size: clamp(100px, 75.728px + 6.472vw, 200px);
    text-align: center;
    color: #f7f5f5;
    line-height: 1;
    margin: 0;
  }

  &.color-beauty {
    .ja {
      color: var(--color-beauty);
    }
  }
}

.sec-ttl--bilingual-layer-medium {
  position: relative;
  margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);

  .ja {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-min);
    font-weight: 500;
    font-size: clamp(22px, 18.359px + 0.971vw, 37px);
    text-align: center;
    color: var(--color-ttl);
    margin: 0;
    width: 100%;

    small {
      display: block;
      text-align: center;
      font-family: var(--font-min);
      font-weight: 500;
      font-size: clamp(14px, 11.573px + 0.647vw, 24px);
      margin-top: -5px;
    }
  }

  .en {
    font-family: var(--font-min);
    font-weight: 400;
    font-size: clamp(50px, 33.01px + 4.531vw, 120px);
    text-align: center;
    color: rgba(158, 141, 133, 0.1);
    line-height: 1;
    margin: 0;
  }

  &.color-beauty {
    .ja {
      color: var(--color-beauty);
    }
  }
}

/*--------------------
下層ページタイトル
--------------------*/
/*--------------------
パンくず
--------------------*/
.breadcrumb {
  padding: clamp(70px, 50.583px + 5.178vw, 150px) 0 20px;

  .breadcrumb_list {
    max-width: 1500px;
    width: 90%;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: auto;
    padding: 0;
    flex-wrap: wrap;
    list-style: none;

    * {
      font-weight: 400;
    }

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

      &+.breadcrumb_item {
        &::before {
          content: "";
          display: block;
          width: 4px;
          height: 7px;
          margin: 0 10px;
          background: url("data:image/svg+xml,%3Csvg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7L4 4L1 1' stroke='%23242424' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
          flex-shrink: 0;
        }
      }
    }
  }
}

/*--------------------
タブ
--------------------*/
.tab {
  .tab__button-area {
    .tab__button {
      transition: ease-in 0.2s;
      cursor: pointer;
    }
  }

  .tab__panel-area {
    .tab__panel {
      height: 0;
      opacity: 0;
      overflow: hidden;
      transition: opacity 0.4s ease;

      &.show {
        height: auto;
        opacity: 1;
      }
    }
  }
}

.sub-tab {
  .sub-tab__button-area {
    .sub-tab__button {
      transition: ease-in 0.2s;
      cursor: pointer;
    }
  }

  .sub-tab__panel-area {
    .sub-tab__panel {
      height: 0;
      opacity: 0;
      overflow: hidden;
      transition: opacity 0.4s ease;

      &.show {
        height: auto;
        opacity: 1;
      }
    }
  }
}

/*--------------------
btn
--------------------*/
.btn-more {
  a {
    position: relative;
    font-family: var(--font-min);
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    min-width: 300px;
    width: fit-content;
    background-color: var(--color-ttl);
    color: #fff;
    padding: clamp(15px, 13.786px + 0.324vw, 20px) 40px;
    display: block;
    text-align: center;
    border-radius: 4px;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      background: url("data:image/svg+xml,%3Csvg width='26' height='6' viewBox='0 0 26 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H24L20 1' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      width: 24px;
      height: 5px;
      display: inline-block;
    }

    &:hover {
      opacity: 0.8;
    }
  }
}

.btn-more--back {
  a {
    position: relative;
    font-family: var(--font-min);
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    min-width: 300px;
    width: fit-content;
    background-color: var(--color-ttl);
    color: #fff;
    padding: clamp(15px, 13.786px + 0.324vw, 20px) 40px;
    display: block;
    text-align: center;
    border-radius: 4px;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 10px;
      background: url("data:image/svg+xml,%3Csvg width='25' height='5' viewBox='0 0 25 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.207 4.50801H1.20703L5.20703 0.5' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      width: 24px;
      height: 5px;
      display: inline-block;
    }

    &:hover {
      opacity: 0.8;
    }
  }
}

.btn-more--underline {
  a {
    position: relative;
    font-family: var(--font-min);
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    border-bottom: 1px #242424 solid;
    padding: 5px clamp(43px, 38.388px + 1.23vw, 62px) 5px 0;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      background: url("data:image/svg+xml,%3Csvg width='45' height='9' viewBox='0 0 45 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 8H43L35.9213 1' stroke='%23242424' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      width: clamp(23px, 18.388px + 1.23vw, 42px);
      height: clamp(4px, 3.272px + 0.194vw, 7px);
      display: inline-block;
      transition: ease-in 0.2s;
    }

    &:hover {
      &::after {
        right: -5px;
      }
    }
  }
}

/*--------------------
list
--------------------*/
.list-square {
  list-style: none;
  margin: 0;
  padding: 0;

  &>li {
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    position: relative;
    padding-left: clamp(10px, 8.786px + 0.324vw, 15px);

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: clamp(6px, 5.515px + 0.129vw, 8px);
      height: clamp(6px, 5.515px + 0.129vw, 8px);
      display: inline-block;
      background-color: #9e8d85;
      border-radius: 2px;
    }

    @media (max-width: 767px) {
      &::after {
        top: 7px;
      }
    }

    &+li {
      margin-top: 10px;
    }
  }

  /* 2カラムに */
  &.column-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;

    &>li {
      width: calc((100% - 20px) / 2);

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

      &+li {
        margin-top: 0;
      }
    }
  }
}

.list-arrow {
  list-style: none;
  margin: 0;
  padding: 0;

  &>li {
    position: relative;
    padding-left: 10px;

    &::before {
      content: "";
      position: absolute;
      top: calc(70% - 8px);
      left: 0;
      width: 4px;
      height: 8px;
      background: url("data:image/svg+xml,%3Csvg width='6' height='9' viewBox='0 0 6 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.5L5 4.5L1 8.5' stroke='%23242424'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      display: inline-block;
    }

    &+li {
      margin-top: 10px;
    }
  }
}

.list-dot {
  list-style: none;
  margin: 0;
  padding: 0;

  &>li {
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    position: relative;
    padding-left: clamp(10px, 8.786px + 0.324vw, 15px);

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      display: inline-block;
      background-color: #242424;
      border-radius: 50px;
    }

    @media (max-width: 767px) {
      &::after {
        top: 7px;
      }
    }

    &+li {
      margin-top: 10px;
    }
  }
}

.list-notes {
  list-style: none;
  margin: 0;
  padding: 0;

  &>li {
    position: relative;
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    padding-left: 20px;

    &::before {
      content: "※";
      position: absolute;
      left: 0;
      top: 0;
    }

    &+li {
      margin-top: 5px;
    }
  }
}

/*--------------------
ページネーション
--------------------*/
.navigation.pagination {
  text-align: center;
  margin-top: clamp(40px, 25.437px + 3.883vw, 100px);

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

  a {
    color: var(--color-ttl);
  }

  .nav-links {
    display: flex;
    gap: 1.56vw;
    align-items: center;
    justify-content: center;
  }

  .page-numbers {
    padding: 0.5em;
    min-width: 2em;
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    display: inline-block;
    background-color: #fff;
    line-height: 1;
    border-radius: 100px;
    color: var(--color-ttl);
    border: 1px var(--color-ttl) solid;

    &.current {
      background-color: var(--color-ttl);
      color: #fff;
    }
  }

  .prev,
  .next,
  .dots {
    color: var(--color-ttl);
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    background-color: transparent;
    border-radius: 0;
    border: none;
  }

  .prev {
    &::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 var(--color-ttl);
      border-right: solid 1px var(--color-ttl);
      transform: rotate(-135deg);
    }
  }

  .next {
    &::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 var(--color-ttl);
      border-right: solid 1px var(--color-ttl);
      transform: rotate(45deg);
    }
  }
}

/*--------------------
強調部分
--------------------*/
.txt__s--med {
  color: var(--color-general);
  font-weight: 500;
}

.txt__s--be {
  color: var(--color-beauty);
  font-weight: 500;
}

/*--------------------
header
--------------------*/
/* .home {
  header {
    .header-inner {
      background-color: #fff;
      width: 100%;
      left: 0;
    }
  }
} */
header {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header-inner {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    width: 100%;
    height: clamp(80px, 52.826px + 2.717vw, 105px);
    padding: 0 2.08vw;
    display: flex;
    align-items: center;
    gap: 1.5vw;
    z-index: 102;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease,
      visibility 0.6s;

    @media (max-width: 767px) {
      height: 70px;
      background-color: transparent;
    }

    .g-nav__logo {
      margin: 0;

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

      a {
        width: clamp(200px, 145.652px + 5.435vw, 250px);
        display: flex;

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

    /* グローバルナビ */
    .g-nav {
      @media (max-width: 1200px) {
        display: none;
      }

      .g-nav_list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        /* 1000px-1920px */
        gap: clamp(15px, -38.571px + 3.571vw, 30px);

        .g-nav_item {

          /* position: relative; */
          &>a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 105px;

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

            .sub_label {
              font-weight: 400;
              /* 1000px-1920px */
              font-size: clamp(10px, -0.769px + 0.769vw, 14px);
              color: #999999;
              text-align: center;
              margin: 5px 0 0;
            }

            &:hover {
              opacity: 0.7;
            }
          }

          /* ドロップダウン大 */
          .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            z-index: 10;
            max-width: 1220px;
            width: 90%;
            padding-top: 10px;
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, -10px);
            transition:
              opacity 0.4s ease,
              transform 0.4s ease,
              visibility 0.4s;

            .dropdown-menu__inner {
              position: relative;
              background: #fff;
              border-radius: 4px;
              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

              /* &::before {
                content: "";
                position: absolute;
                left: 50%;
                top: -18px;
                display: inline-block;
                border: 10px solid transparent;
                border-bottom: 10px solid #fff;
                transform: translateX(-50%);
              } */
              .dropdown-menu__head {
                border-bottom: 1px #f7f5f5 solid;
                padding: clamp(15px, 9.565px + 0.543vw, 20px) 40px;

                .nav-list {
                  display: flex;
                  gap: 40px;

                  .nav-item {
                    a {
                      position: relative;
                      display: block;
                      color: var(--color-general);
                      padding-right: 30px;
                      font-family: var(--font-min);
                      font-weight: 500;
                      font-size: 16px;

                      &::after {
                        content: "";
                        position: absolute;
                        top: 5px;
                        right: 0;
                        background: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8.51709' r='8' fill='%23D6822F'/%3E%3Cpath d='M7.20068 6.11475L9.60068 8.51475L7.20068 10.9147' stroke='white'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                        width: 16px;
                        height: 16px;
                        display: inline-block;
                        transition: ease-in 0.2s;
                      }

                      &:hover {
                        &::after {
                          right: -5px;
                        }
                      }
                    }
                  }
                }
              }

              .dropdown-menu__main {
                padding: clamp(15px, 9.565px + 0.543vw, 20px) 40px 30px;

                .subject-block {
                  .subject-block__ttl {
                    font-family: var(--font-min);
                    font-weight: 500;
                    font-size: 16px;
                    color: var(--color-general);
                    margin: 0 0 clamp(10px, 4.565px + 0.543vw, 15px);
                  }

                  .list-arrow {
                    display: flex;
                    flex-wrap: wrap;
                    gap: clamp(2px, -12.130px + 1.413vw, 15px) 10px;

                    &>li {
                      width: calc((100% - 40px) / 5);

                      &::before {
                        top: 10px;
                      }

                      a,
                      span {
                        font-size: clamp(10px, 5.652px + 0.435vw, 14px);
                      }

                      a:hover {
                        opacity: 0.7;
                      }

                      &+li {
                        margin-top: 0;
                      }
                    }
                  }

                  &+.subject-block {
                    margin-top: 30px;
                  }
                }
              }
            }

            &.dropdown-beauty {
              .dropdown-menu__inner {
                .dropdown-menu__head {
                  .nav-list {
                    .nav-item {

                      a,
                      span {
                        color: var(--color-beauty);
                      }

                      a::after {
                        background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8.5166' r='8' fill='%23C62C2B'/%3E%3Cpath d='M7.20068 6.11426L9.60068 8.51426L7.20068 10.9143' stroke='white'/%3E%3C/svg%3E%0A");
                      }
                    }
                  }
                }

                .dropdown-menu__main {
                  .subject-block {
                    .subject-block__ttl {
                      color: var(--color-beauty);
                    }
                  }
                }
              }
            }
          }

          &.has-dropdown-large:hover {
            .dropdown-menu {
              opacity: 1;
              visibility: visible;
              transform: translate(-50%, 0);
            }
          }

          &.has-dropdown-small {
            position: relative;
          }

          /* ドロップダウン小 */
          .dropdown-menu-small {
            position: absolute;
            top: 100%;
            left: 50%;
            z-index: 10;
            width: auto;
            padding-top: 10px;
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, -10px);
            transition:
              opacity 0.4s ease,
              transform 0.4s ease,
              visibility 0.4s;

            .dropdown-menu-small__inner {
              background: #fff;
              border-radius: 4px;
              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

              .dropdown-menu-small__list {
                .dropdown-menu-small__item {
                  a {
                    position: relative;
                    display: block;
                    white-space: nowrap;
                    padding: 20px 40px 20px 55px;
                    font-size: 14px;

                    &::before {
                      content: "";
                      position: absolute;
                      top: 26px;
                      left: 40px;
                      width: 4px;
                      height: 8px;
                      background: url("data:image/svg+xml,%3Csvg width='6' height='9' viewBox='0 0 6 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.5L5 4.5L1 8.5' stroke='%23242424'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                      display: inline-block;
                    }

                    &:hover {
                      opacity: 0.7;
                    }
                  }

                  &+.dropdown-menu-small__item {
                    border-top: 1px #f7f5f5 solid;
                  }
                }
              }
            }
          }

          &.has-dropdown-small:hover {
            .dropdown-menu-small {
              opacity: 1;
              visibility: visible;
              transform: translate(-50%, 0);
            }
          }
        }
      }
    }

    .contact-ham__btn {
      position: absolute;
      right: 2.08vw;

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

      .common__btn-contact {
        a {
          padding: clamp(12px, 5.478px + 0.652vw, 18px)  clamp(25px, 19.565px + 0.543vw, 30px);
        }

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

    /* 追従ナビ */
    &.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
  }

  /* ハンバーガーメニューが開いているとき */
  &.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;
      }
    }
  }
}

.contact-ham__btn {
  display: flex;
  align-items: center;
  gap: clamp(10px, -25.714px + 2.381vw, 20px);
}

/* ご予約・お問い合わせ */
.common__btn-contact {
  a {
    display: flex;
    gap: 6px;
    border-radius: 100px;
    background: linear-gradient(270deg, #FFAE7B 0%, #F87979 100%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    padding: clamp(12px, 5.478px + 0.652vw, 18px)  clamp(25px, 19.565px + 0.543vw, 30px);
    align-items: center;

    img {
      width: 22px;
      height: 100%;
    }

    .contact-ham__btn_txt {
      font-size: clamp(12px, 1.231px + 0.769vw, 16px);
      font-family: var(--font-min);
      font-weight: 500;
      color: #fff;
      margin: 0;

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

    &:hover {
      filter: brightness(1.15);
    }
  }
}

/* FV固定のハンバーガーボタン */
.contact-ham__btn--intro {
  position: absolute;
  top: 2.08vw;
  right: 2.08vw;
  z-index: 3;

  a {
    padding: clamp(12px, 5.478px + 0.652vw, 18px)  clamp(25px, 19.565px + 0.543vw, 30px);
  }

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

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

.beauty__btn-contact {
  a {
    background: linear-gradient(90deg, #9371A8 0%, #B49BC4 100%);
  }
}

/* SP用 ご予約・お問い合わせ */
.fixed-btn-contact {
  display: none;
  position: fixed;
  bottom: 0;
  z-index: 100;
  width: 100%;
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    visibility 0.6s;

  @media (max-width: 767px) {
    display: flex;
    gap: 10px;
    padding: 0 10px 10px;
  }

  .common__btn-contact {
    width: 100%;

    a {
      padding: 15px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ハンバーガー */
.common__btn-hamburger {
  width: clamp(45px, 34.130px + 1.087vw, 55px);
  height: clamp(45px, 34.130px + 1.087vw, 55px);
  border-radius: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg,
      rgba(248, 121, 121, 1) 0%,
      rgba(255, 174, 123, 1) 100%);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
  cursor: pointer;

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

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

    .line {
      position: absolute;
      right: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      margin: auto;
      background-color: #fff;
      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: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100vh;
  height: auto;
  background-color: #f7f5f5;
  transition: ease-in 0.2s;
  z-index: 103;
  overflow-y: scroll;
  overscroll-behavior: none;

  .contact-ham__btn {
    position: fixed;
    top: 2.08vw;
    right: 2.08vw;
    z-index: 100;

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

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

  .ham-contents__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: clamp(25px, 6.796px + 4.854vw, 100px) 0;

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

    .ham-logo {
      width: clamp(185px, 127.961px + 15.21vw, 420px);
      margin: 0 auto clamp(40px, 27.864px + 3.236vw, 90px);

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

    .ham--left-right {
      display: flex;
      gap: 5.21vw;
      width: 100%;

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

      .ham--sns {
        margin-bottom: 60px;

        .sns__list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(14px, 12.301px + 0.453vw, 21px);
        }
      }

      .ham--left {
        width: 100%;

        .ham-contents__nav {
          .ham-contents__nav-ttl {
            font-family: var(--font-min);
            font-size: clamp(22px, 20.544px + 0.388vw, 28px);
            margin: 0 0 20px;
          }

          .ham-contents__nav-list {
            display: flex;
            flex-wrap: wrap;
            gap: 30px 2.6vw;

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

            .ham-contents__nav-item {
              width: calc((100% - 2.6vw) / 2);

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

              a,
              span {
                position: relative;
                font-family: var(--font-min);
                font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                border-bottom: 1px var(--color-ttl) solid;
                padding: 0 30px 10px 0;
                display: flex;
                align-items: flex-end;
                height: 100%;

                .supplement-badge {
                  display: inline-block;
                  font-size: clamp(10px, 9.029px + 0.259vw, 14px);
                  color: #fff;
                  background-color: var(--color-ttl);
                  margin-left: clamp(10px, 7.573px + 0.647vw, 20px);
                  padding: 4px 10px;
                  border-radius: 4px;
                }
              }

              a::after {
                content: "";
                position: absolute;
                bottom: 15px;
                right: 5px;
                background: url("data:image/svg+xml,%3Csvg width='22' height='7' viewBox='0 0 22 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H20.734L16.8433 1' stroke='%23432815' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                width: 20px;
                height: 6px;
                display: inline-block;
                transition: ease-in 0.2s;
              }

              a:hover {
                opacity: 0.7;

                &::after {
                  right: 0;
                }
              }

              .ham-contents__nav-accordion {
                position: relative;
                font-family: var(--font-min);
                font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                margin: 0 0 10px;
                cursor: pointer;

                a,
                span {
                  position: relative;
                  font-family: var(--font-min);
                  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                  border-bottom: 1px var(--color-ttl) solid;
                  padding: 0 30px 10px 0;
                  display: flex;
                  align-items: flex-end;
                  height: 100%;

                  .supplement-badge {
                    display: inline-block;
                    font-size: clamp(10px, 9.029px + 0.259vw, 14px);
                    color: #fff;
                    background-color: var(--color-ttl);
                    margin-left: clamp(10px, 7.573px + 0.647vw, 20px);
                    padding: 4px 10px;
                    border-radius: 4px;
                  }
                }

                a::after {
                  content: "";
                  position: absolute;
                  bottom: 15px;
                  right: 5px;
                  background: url("data:image/svg+xml,%3Csvg width='22' height='7' viewBox='0 0 22 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H20.734L16.8433 1' stroke='%23432815' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                  width: 20px;
                  height: 6px;
                  display: inline-block;
                  transition: ease-in 0.2s;
                }

                a:hover {
                  opacity: 0.7;

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

              .nav-accordion__area {
                padding: 30px;
                background-color: #fff;
                border-radius: 4px;

                .nav-accordion__list {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 30px 20px;

                  .nav-accordion__item {
                    width: calc((100% - 20px) / 2);

                    a,
                    span {
                      font-size: clamp(14px, 13.515px + 0.129vw, 16px);
                    }
                  }

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

                    .nav-accordion__item {
                      width: 100%;
                    }
                  }
                }
              }
            }

            .is-full-width {
              width: 100%;
            }
          }

          /* ドクターズコスメ */
          &.nav--doctors-cosme {
            .ham-contents__nav-list {
              .ham-contents__nav-item {
                width: 100%;
              }
            }
          }

          /* 保険診療 */
          &.nav--general {
            .ham-contents__nav-ttl {
              color: var(--color-general);
            }

            .ham-contents__nav-list {
              .ham-contents__nav-item {
                width: 100%;

                &.nav-item--general-child {
                  .nav-accordion__area {
                    .nav-accordion__list {
                      .nav-accordion__item {}
                    }
                  }
                }

                &.nav-item--surgery {
                  .nav-accordion__area {
                    .nav-accordion__list {
                      .nav-accordion__item {
                        &:nth-child(1) {
                          width: 100%;

                          a,
                          span {
                            color: var(--color-general);

                            &::after {
                              background-image: url("data:image/svg+xml,%3Csvg width='22' height='7' viewBox='0 0 22 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H20.734L16.8433 1' stroke='%23D6822F' stroke-linecap='round'/%3E%3C/svg%3E%0A");
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          /* 美容診療 */
          &.nav--beauty {
            .ham-contents__nav-ttl {
              color: var(--color-beauty);
            }

            .ham-contents__nav-list {
              .ham-contents__nav-item {
                &:nth-child(1) {

                  a,
                  span {
                    color: #242424;
                  }

                  a::after {
                    background-image: url("data:image/svg+xml,%3Csvg width='22' height='7' viewBox='0 0 22 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H20.734L16.8433 1' stroke='%23432815' stroke-linecap='round'/%3E%3C/svg%3E%0A");
                  }
                }

                &:nth-child(1),
                &:nth-child(4),
                &:nth-child(5) {
                  width: 100%;
                }
              }
            }
          }

          &+.ham-contents__nav {
            margin-top: clamp(60px, 55.146px + 1.294vw, 80px);
          }
        }
      }

      .ham--banner {
        @media (max-width: 767px) {
          margin-bottom: 15px;
        }

        .banner__list {
          display: flex;
          flex-direction: column;
          gap: clamp(15px, 13.786px + 0.324vw, 20px);

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

          .banner__item {
            width: 100%;
            border-radius: 4px;
            overflow: hidden;

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

            a {
              &:hover {
                filter: brightness(1.15);
              }
            }
          }
        }
      }

      .ham--sns {
        @media (max-width: 767px) {
          sns__list {
            width: 100%;
            gap: 2.03vw;

            .sns__item {
              width: calc(100% - (2.03vw * 2)) / 3;
            }
          }
        }
      }

      .ham--right {
        position: sticky;
        top: 110px;
        width: min(350px, 30%);
        height: fit-content;
        flex-shrink: 0;

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

        .ham--cta {
          margin-top: 40px;

          .cta__list {
            .cta__item {
              a {
                position: relative;
                font-family: var(--font-min);
                font-size: clamp(16px, 15.029px + 0.259vw, 20px);
                background-color: var(--color-ttl);
                display: flex;
                color: #fff;
                padding: 15px 30px 15px 55px;
                border-radius: 4px;

                &::before {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  display: inline-block;
                }

                &::after {
                  content: "";
                  position: absolute;
                  right: 10px;
                  top: 50%;
                  transform: translateY(-50%);
                  background: url("data:image/svg+xml,%3Csvg width='22' height='7' viewBox='0 0 22 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.46875 6H20.8305L17.0131 1' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                  display: inline-block;
                  width: 20px;
                  height: 5px;
                  transition: ease-in 0.2s;
                }

                &:hover {
                  opacity: 0.8;

                  &::after {
                    right: 5px;
                  }
                }
              }

              &.cta-line {
                a {
                  &::before {
                    width: 30px;
                    height: 23px;
                    background: url("../img/icon-line-white.svg") center center / contain no-repeat;
                    left: 13px;
                  }
                }
              }

              &.cta-web {
                a {
                  &::before {
                    width: 23px;
                    height: 25px;
                    background: url("../img/icon-web-white.svg") center center / contain no-repeat;
                    left: 16px;
                  }
                }
              }

              &.cta-tel {
                a {
                  &::before {
                    width: 21px;
                    height: 24px;
                    background: url("../img/icon-tel-white.svg") center center / contain no-repeat;
                    left: 18px;
                  }
                }
              }

              &+.cta__item {
                margin-top: 20px;
              }
            }
          }
        }

        .ham--sns {
          margin-top: 20px;
          margin-bottom: 40px;

          .sns__list {
            justify-content: center;

            .sns__item {
              transition: ease-in 0.2s;

              &:hover {
                opacity: .7;
              }
            }
          }
        }

        .ham--privacy-policy {
          @media (max-width: 767px) {
            margin-top: 60px;
            margin-bottom: 30px;
            text-align: center;
          }

          .privacy-policy_link {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            font-family: var(--font-min);
            text-decoration: underline;
            text-decoration-color: var(--color-ttl);
            text-underline-offset: 5px;
            text-decoration-thickness: 1px;

            &:hover {
              opacity: .7;
            }
          }
        }
      }
    }
  }
}

/*--------------------
トップページ
--------------------*/
/*--- ファーストビュー ---*/
.top--mv {
  position: relative;
  width: 100%;
  overflow: hidden;

  .mv__logo {
    position: absolute;
    top: 2.08vw;
    left: 2.08vw;
    z-index: 2;
    margin: 0;
    width: clamp(200px, 145.652px + 5.435vw, 250px);

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

    img {
      width: 100%;
    }
  }

  /* .contact-ham__btn {
    position: absolute;
    top: 2.08vw;
    right: 2.08vw;
    z-index: 3;

    a {
      padding: 18px 30px;
    }

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

    .common__btn-contact {
      @media (max-width: 767px) {
        display: none;
      }
    }
  } */


  .mv__copy {
    position: absolute;
    z-index: 2;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    margin: 0;


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

    .ttl {
      font-family: var(--font-min);
      font-weight: 600;
      font-size: clamp(18px, 13.874px + 1.1vw, 35px);
      margin: 0 0 20px;
      color: #fff;
      text-align: center;
    }

    .ja {
      font-family: var(--font-min);
      font-weight: 600;
      font-size: clamp(24px, 10.408px + 3.625vw, 80px);
      margin: 0;
      color: #fff;
      text-align: center;
    }

    .en {
      font-family: var(--font-min);
      font-weight: 600;
      font-size: clamp(14px, 11.33px + 0.712vw, 25px);
      margin: 0;
      color: #fff;
      text-align: center;

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

      &+.ja {
        margin-top: clamp(10px, -0.870px + 1.087vw, 20px);
      }
    }

    .mv__achievements {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 3.8vw;

      @media (max-width: 767px) {
        display: grid;
        gap: 0 15px;
        margin-top: 30px;
      }

      .achievements-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(244, 216, 188, 0.5);
        border-radius: 200px;
        aspect-ratio: 1;
        width: clamp(120px, 100.583px + 5.178vw, 200px);
        outline: 1px #f4d8bc solid;
        outline-offset: 10px;

        .row {
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(14px, 12.301px + 0.453vw, 21px);
          color: #fff;
          text-align: center;
          margin: 0;
        }

        .row-num {
          border-top: 1px #fff solid;
          width: 90%;
          margin: clamp(5px, 3.786px + 0.324vw, 10px) auto 0;
          padding-top: clamp(0px, -2.184px + 0.583vw, 9px);

          .num {
            font-family: var(--font-min);
            font-weight: 500;
            font-size: clamp(23px, 18.874px + 1.1vw, 40px);
          }

          .small {
            font-family: var(--font-min);
            font-weight: 500;
            font-size: clamp(14px, 12.301px + 0.453vw, 21px);
          }
        }

        &+.achievements-item {
          margin-left: 16px;

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

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

        &:nth-child(2) {
          @media (max-width: 767px) {
            grid-column: 1 / 3;
            grid-row: 1;
            justify-self: center;
            margin-bottom: -2px;
          }
        }

        &:nth-child(3) {
          @media (max-width: 767px) {
            grid-column: 2;
            grid-row: 2;
          }
        }
      }
    }
  }

  &.is-mv-loading {
    .mv__copy {
      opacity: 1;
      transform: translate(-50%, -50%);
      transition: opacity 1.4s ease, transform 1.4s ease;
    }
  }

  &.is-video-loaded {
    .mv__copy {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  .mv__video-wrap {
    min-height: 650px;
    height: 100vh;
    opacity: 1;
    transform: translateY(0);

    @media (max-width: 767px) {
      min-height: initial;
      height: auto;
      aspect-ratio: 375 / 620;
    }

    .video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .multiply {
      position: absolute;
      inset: 0;
      background: #818181;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

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

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

/*--- 注目のお知らせ ---*/
.top--featured-news {
  position: relative;
  padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
  padding-bottom: clamp(80px, 75.146px + 1.294vw, 100px);
  background-color: #f7f5f5;

  .featured-news__inner {
    position: absolute;
    z-index: 2;
    left: calc((100% / 4) / 2);
    margin: clamp(0.1em, calc(-1.965em + 3.304vw), 2em) 0 0 clamp(1.7em, calc(-1.887em + 5.739vw), 5em);

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

    .featured-news__inner-ttl {
      @media (max-width: 767px) {
        position: relative;
        margin-left: 13.33vw;
        margin-bottom: 25px;
      }

      .en {
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(24px, 18.175px + 1.553vw, 48px);
        color: var(--color-ttl);
        line-height: 1.3;
        margin: 0;
      }

      .ja {
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(16px, 12.602px + 0.906vw, 30px);
        color: #242424;
        margin: clamp(6px, 5.029px + 0.259vw, 10px) 0 0;
      }
    }

    .swiper-button__wrap {
      position: relative;
      width: 120px;
      margin-top: 2.6vw;

      @media (max-width: 767px) {
        position: absolute;
        top: 13.33vw;
        right: 13.33vw;
        width: 110px;
        margin-top: 0;
      }

      .swiper-button-prev,
      .swiper-button-next {
        width: clamp(40px, 38.786px + 0.324vw, 45px);
        height: clamp(40px, 38.786px + 0.324vw, 45px);
        background-color: #fff;
        border-radius: 100px;
        box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.1);
        top: 0;

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

        &::after {
          font-size: 16px;
          color: #000;
        }
      }
    }
  }

  .featured-news-swiper {
    padding: 10px 0;
    .swiper-wrapper {
      .swiper-slide {
        transition: opacity 0.4s ease;
        
        a {
          img {
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
          }
        }
      }

      .swiper-slide-prev {
        opacity: 0;

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

.news-information__wrap {
  display: flex;
  gap: 7.81vw;
  padding-top: clamp(60px, 38.155px + 5.825vw, 150px);
  padding-bottom: clamp(70px, 62.718px + 1.942vw, 100px);

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

  .sec-ttl {
    text-align: center;
  }

  /*--- NEWS ---*/
  .top--news {
    width: calc((100% - 7.81vw) / 2);

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

    .news__list {
      list-style: none;
      margin: 0;
      padding: 0;

      .news__item {
        a {
          time {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            color: #9e8d85;
            margin-bottom: 5px;
            display: block;
          }

          .post-ttl {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            margin: 0;
          }

          &:hover {
            opacity: 0.7;
          }
        }

        &+.news__item {
          margin-top: 30px;
        }
      }
    }

    .news__btn {
      margin-top: clamp(20px, 15.146px + 1.294vw, 40px);
      display: flex;
      justify-content: flex-end;
    }
  }

  /*--- INFORMATION ---*/
  .top--information {
    width: calc((100% - 7.81vw) / 2);

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

.information-table--area {
  .information-table {
    background-color: #f7f5f5;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;

    tbody {
      tr {
        &+tr {
          border-top: 1px #999999 solid;
        }

        th {
          border-right: 1px #999999 solid;
          font-weight: 400;
          padding: 15px;
          text-align: center;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);

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

        td {
          padding: 15px;
          text-align: center;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);

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

          &.on {
            font-weight: 700;
          }

          &.off {
            font-weight: 300;
          }

          &.red {
            color: #c62c2b;
          }
        }
      }
    }
  }

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

    &::before {
      content: "※";
      position: absolute;
      top: 0;
      left: 0;
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    }

    &.red {
      color: #c62c2b;
    }

    &+.notes {
      margin-top: 10px;
    }
  }
}

/*--- ACCESS ---*/
.top--access {
  padding-bottom: clamp(90px, 87.573px + 0.647vw, 100px);

  .sec-ttl {
    text-align: center;
  }

  .map-area {
    display: flex;

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

    .illust-map {
      width: 34%;

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

    .google-map {
      width: 66%;

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

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

  .btn-more {
    margin-top: clamp(20px, 12.718px + 1.942vw, 50px);

    a {
      margin: auto;
      display: flex;
      gap: 10px;
      justify-content: center;
      align-items: center;

      &::before {
        content: "";
        display: inline-block;
        background: url("../img/icon-googlemap.svg") center center / contain no-repeat;
        width: 18px;
        height: 23px;
      }
    }
  }
}

/*--- PROMISE ---*/
.top--promise {
  position: relative;
  background: url("../img/promise-bg.webp") center center / cover no-repeat;
  padding-top: clamp(70px, 55.437px + 3.883vw, 130px);
  padding-bottom: clamp(40px, 25.437px + 3.883vw, 100px);

  .promise__inner {
    position: relative;
    z-index: 2;
    overflow: hidden;

    .promise___ttl {
      .en {
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(32px, 25.204px + 1.812vw, 60px);
        color: #9e8d85;
        text-align: center;
        margin: 0;
        letter-spacing: -2.5px;
      }

      .ja {
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(24px, 22.544px + 0.388vw, 30px);
        color: var(--color-ttl);
        text-align: center;
        margin: 0 0 clamp(50px, 47.573px + 0.647vw, 60px);
      }
    }

    .promise__lead {
      font-family: var(--font-min);
      font-weight: 500;
      font-size: clamp(24px, 18.175px + 1.553vw, 48px);
      color: var(--color-ttl);
      text-align: center;
      margin: 0 0 30px;
    }

    .promise__lead-sub {
      font-family: var(--font-min);
      font-weight: 500;
      font-size: clamp(18px, 15.087px + 0.777vw, 30px);
      color: var(--color-ttl);
      text-align: center;
      margin: 0 0 clamp(30px, 27.573px + 0.647vw, 40px);
    }

    .promise__txt {
      text-align: center;

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

    .promise__obj-sp {
      display: none;

      @media (max-width: 1500px) {
        display: block;
        max-width: 750px;
        width: 100%;
        margin: 35px auto 0;
      }

      @media (max-width: 767px) {
        width: 120%;
        margin-left: -8%;
      }
    }
  }

  &::before {
    content: "";
    position: absolute;
    bottom: 3.8vw;
    left: 2.08vw;
    background: url("../img/promise-obj01.webp") center center / contain no-repeat;
    max-width: 530px;
    width: 25.6vw;
    aspect-ratio: 530 / 610;
    display: block;
  }

  @media (max-width: 1500px) {
    &::before {
      display: none;
    }
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 3.91vw;
    right: 2.08vw;
    background: url("../img/promise-obj02.webp") center center / contain no-repeat;
    max-width: 505px;
    width: 24.2vw;
    aspect-ratio: 505 / 608;
    display: block;
  }

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

/*--- FEATURES ---*/
.top--features {
  background-color: #f3f0f0;
  padding-top: clamp(50px, 45.146px + 1.294vw, 70px);
  padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

  .sec-ttl--bilingual {
    margin-bottom: clamp(60px, 55.146px + 1.294vw, 80px);
  }

  .features__list {
    .features__item {
      display: grid;
      grid-template-rows: auto 1fr;
      column-gap: 2.6vw;
      max-width: 1710px;
      width: 95%;
      margin-left: auto;

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

      .features__img {
        max-width: 700px;
        width: 36.46vw;

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

      .features__head {
        position: relative;
        border-bottom: 1px #9e8d85 solid;
        padding-bottom: 10px;
        margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);
        height: fit-content;

        &::after {
          content: "";
          position: absolute;
          bottom: -11.56vw;
          right: 0;
          background: url("../img/features_num-gradation-odd.webp") top right / cover no-repeat;
          height: 11.56vw;
          aspect-ratio: 400 / 222;
          display: inline-block;
        }

        @media (max-width: 767px) {
          &::after {
            bottom: -26.13vw;
            height: 26.13vw;
          }
        }

        .features__ttl {
          position: relative;
          z-index: 1;
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(20px, 13.204px + 1.812vw, 48px);
          color: var(--color-ttl);
        }

        .features__num {
          position: absolute;
          bottom: -12px;
          right: 0;
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(120px, 76.311px + 11.65vw, 300px);
          color: #fff;
          line-height: 1;

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

      .features__panel {
        position: relative;
        z-index: 2;
        padding-right: 10.94vw;

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

      &:nth-child(odd) {
        grid-template-columns: 1fr 56%;

        .features__head {
          grid-column: 2;
          grid-row: 1;

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

        .features__panel {
          grid-column: 2;
          grid-row: 2;
        }

        .features__img {
          position: relative;
          grid-column: 1;
          grid-row: 1 / 3;
        }
      }

      &:nth-child(even) {
        grid-template-columns: 56% 1fr;
        margin-left: inherit;
        margin-right: 5%;

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

        .features__head {
          padding-left: 11vw;

          @media (max-width: 767px) {
            margin-right: 5%;
            padding-left: 16vw;
          }

          &::after {
            right: inherit;
            left: 0;
            background: url("../img/features_num-gradation-even.webp") top left / cover no-repeat;
          }

          .features__num {
            right: inherit;
            left: 0;
          }
        }

        .features__panel {
          grid-column: 1;
          padding-right: 0;
          padding-left: 10.94vw;

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

        .features__img {
          grid-column: 2;
          grid-row: 1 / 3;
        }
      }

      &:nth-of-type(1) {
        .features__head {
          margin-bottom: clamp(20px, 10.291px + 2.589vw, 60px);
        }

        .features__img {
          position: relative;

          @media (max-width: 767px) {
            position: static;
            width: 80%;
            margin: 0 auto 20px;
          }

          img {
            position: absolute;
            top: 0;
            left: 0;

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

        .num01-img-area {
          display: flex;
          grid-column: 1 / 3;
          gap: 2.6vw;
          margin-top: 6.25vw;
          margin-left: -5vw;
          padding: 0 2.08vw;

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

          .img {
            border-radius: 4px;
            overflow: hidden;

            &:nth-child(2) {
              margin-top: 2.6vw;
            }

            &:nth-child(3) {
              margin-top: 5.2vw;
            }
          }
        }

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

      &:nth-of-type(2) {
        .features__img {
          width: 90%;
        }
      }

      &:nth-of-type(3) {
        .features__img {
          border-radius: 4px;
          overflow: hidden;
          height: fit-content;

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

      &:nth-of-type(4) {
        .features__head {
          @media (max-width: 767px) {
            order: 1;
          }
        }

        .img-slider {
          overflow: hidden;
          width: 100%;

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

          .slider-track {
            display: flex;
            width: max-content;
            animation: slideAnim 70s linear infinite;

            .slide {
              width: 300px;
              margin-right: 20px;
              flex-shrink: 0;
              border-radius: 4px;
              overflow: hidden;

              @media (max-width: 767px) {
                width: 35.73vw;
                margin-right: 10px;
              }

              img {
                width: 100%;
                display: block;
              }
            }
          }
        }

        .features__panel {
          @media (max-width: 767px) {
            order: 2;
            margin-bottom: 40px;
          }
        }
      }

      &:nth-of-type(5) {
        @media (min-width: 768px) {
          grid-template-columns: 1fr;
          width: 100%;
          max-width: 100%;
        }

        .features__head {
          @media (min-width: 768px) {
            grid-column: auto;
            grid-row: auto;
            max-width: 800px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0;
            text-align: center;
          }

          @media (min-width: 768px) {
            &::after {
              content: "";
              position: absolute;
              bottom: -11.56vw;
              left: 50%;
              transform: translateX(-50%);
              background: url("../img/features_num-gradation-odd_5.webp") center / cover no-repeat;
              height: 11.56vw;
              aspect-ratio: 600 / 152;
              display: inline-block;
            }
          }

          /* @media (max-width: 767px) {
            &::after {
              background: url(../img/features_num-gradation-odd.webp) top right / cover no-repeat;
            }
          } */
          .features__num {
            @media (min-width: 768px) {
              right: inherit;
              left: 0;
            }
          }
        }

        .features__panel {
          @media (min-width: 768px) {
            grid-column: auto;
            grid-row: auto;
            max-width: 800px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            padding-right: 0;
            padding-left: 0;
          }
        }

        .machine-slider {
          margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
          overflow: hidden;
          width: 100%;

          .machine-slider__list {
            display: flex;
            width: max-content;
            animation: slideAnim 100s linear infinite;

            .machine-slider__item {
              width: 12.24vw;
              margin-right: clamp(9px, 6.33px + 0.712vw, 20px);
              flex-shrink: 0;
              border-radius: 4px;
              overflow: hidden;

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

              img {
                width: 100%;
                display: block;
              }
            }

            &+.machine-slider__list {
              animation: slideAnim 100s linear infinite reverse;
              margin-top: clamp(25px, 21.359px + 0.971vw, 40px);
            }
          }
        }
      }

      &+.features__item {
        margin-top: clamp(100px, 75.728px + 6.472vw, 200px);
      }
    }
  }
}

@keyframes slideAnim {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.switching-frame {
  counter-reset: num;

  .switching-frame__view {
    @media (max-width: 767px) {
      background-color: #fff;
      border-radius: 4px;
    }

    .switching-frame__content {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 3.13vw;
      width: 100%;
      height: 100%;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: 4px;
      padding: 25px;

      @media (max-width: 767px) {
        display: block;
        overflow: inherit;
        background: none !important;
        height: auto;
        padding: 0;
        aspect-ratio: inherit;
        counter-increment: num;
      }

      .switching-frame__img {
        display: none;

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

      .switching-frame__ttl {
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(16px, 12.117px + 1.036vw, 32px);
        color: #fff;
        margin: 0;
        text-align: center;

        @media (max-width: 767px) {
          position: relative;
          color: var(--color-ttl);
          padding: 50px 20px 0;
          margin-bottom: 20px;

          &::before {
            content: counter(num, decimal-leading-zero);
            position: absolute;
            left: 50%;
            top: 5px;
            transform: translateX(-50%);
            font-size: 60px;
            color: rgba(158, 141, 133, 0.15);
          }
        }
      }

      .switching-frame__txt {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        color: #fff;
        margin: 0;
        text-align: center;

        @media (max-width: 767px) {
          color: #242424;
          text-align: left;
          padding: 0 20px 30px;
        }
      }

      &.active {
        display: flex !important;

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

      &.content1 {
        background: url("../img/switching-frame01-bg.webp") center center / cover no-repeat;
      }

      &.content2 {
        background: url("../img/switching-frame02-bg.webp") center center / cover no-repeat;
      }

      &.content3 {
        background: url("../img/switching-frame03-bg.webp") center center / cover no-repeat;
      }

      &.content4 {
        background: url("../img/switching-frame04-bg.webp") center center / cover no-repeat;
      }
    }

    .swiper-button__wrap {
      position: relative;
      height: 40px;
      width: 300px;
      margin: 0 auto 20px;
      width: 90%;

      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        background-color: var(--color-ttl);
        width: 33px;
        height: 33px;
        border-radius: 100px;
        top: 50%;
        z-index: 11;

        &::after {
          color: #fff;
          font-size: 13px;
        }
      }

      .swiper-button-prev {
        left: inherit;
        right: 45px;
      }

      .swiper-button-next {
        right: 0;
        left: inherit;
      }

      .swiper-pagination {
        display: flex;
        margin-bottom: 11px;

        .swiper-pagination-bullet {
          opacity: 0.35;
          background: var(--color-ttl);
          width: 10px;
          height: 10px;
          margin: 0 5px;
        }

        .swiper-pagination-bullet-active {
          background: var(--color-ttl);
          opacity: 1;
        }
      }
    }
  }

  .switching-frame__btn {
    counter-reset: btn-counter;

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

    .btn {
      position: relative;
      counter-increment: btn-counter;
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      padding: 20px 30px 20px 30px;
      height: 90px;
      display: flex;
      align-items: center;
      border-bottom: 1px #9e8d85 solid;
      transition: background-color 0.2s ease-in;

      &::after {
        content: counter(btn-counter, decimal-leading-zero);
        position: absolute;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: -1;
        font-size: 90px;
        line-height: 1;
        color: #eceae9;
        transition: color 0.2s ease-in;
      }

      &:hover,
      &.is-current {
        background-color: #ebe6e5;
        z-index: 1;

        &::after {
          color: #fff;
        }
      }
    }
  }
}

.machine-slider {
  .machine-slider__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/*--- GREETING ---*/
.top--greeting {
  background:
    url("../img/symbol-white__top-left.svg") bottom right / 55vw no-repeat,
    #f4f4f4;
  padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

  .greeting__head {
    background: url("../img/greeting-head.webp") bottom center / cover no-repeat;
    height: clamp(400px, 100px + 39.063vw, 850px);
    display: flex;
    padding: 7.81vw 6vw 7.29vw 0;

    @media (max-width: 767px) {
      background: url("../img/greeting-head_sp.webp") bottom center / cover no-repeat;
      padding: 13.33vw 5% 10.67vw;
      height: 115.2vw;
    }

    .sec-ttl--bilingual {
      margin-left: auto;
      display: flex;
      flex-direction: column;
      margin-bottom: 0;

      .en {
        color: #6d5342;
      }

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

      .en,
      .ja {
        text-align: left;
      }

      .copy {
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(20px, 13.204px + 1.812vw, 48px);
        color: var(--color-ttl);
        margin: auto 0 0;
      }
    }
  }

  .greeting__contents {
    display: flex;
    gap: 5.21vw;
    max-width: 1500px;
    width: 90%;
    margin: 0 auto;

    .greeting__message {
      width: 50%;
      margin-top: 4.17vw;

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

      .name-area {
        display: flex;
        gap: 10px;
        align-items: baseline;
        margin-top: clamp(50px, 47.573px + 0.647vw, 60px);

        .position {
          font-family: var(--font-min);
          font-size: clamp(18px, 16.544px + 0.388vw, 24px);
          margin: 0;
        }

        .name {
          font-family: var(--font-min);
          font-size: clamp(22px, 20.058px + 0.518vw, 30px);
          margin: 0;
        }
      }
    }

    .greeting__img-area {
      width: calc(50% - 5.21vw);
      margin-top: -3.65vw;

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

      .greeting__img {
        overflow: hidden;
        border-radius: 4px;
      }

      .greeting__img01 {
        width: 24.35vw;
        margin-bottom: 3.13vw;
      }

      .greeting__img02 {
        width: 24.35vw;
        margin-left: auto;
        margin-right: -40px;
      }
    }
  }
}

/*--- OUR TEAM ---*/
.top--our-team {
  padding-top: clamp(50px, 45.146px + 1.294vw, 70px);
  padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

  .our-team__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

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

    .our-team__item {
      width: calc((100% - 60px) / 4);
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto 1fr;

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

      .our-team__item-img {
        grid-column: 1 / 3;
        grid-row: 1;
        aspect-ratio: 360 / 480;
        margin-bottom: 15px;
        overflow: hidden;
        border-radius: 4px;

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

      .our-team__item-info {
        display: flex;
        align-items: end;
        gap: clamp(5px, -11.304px + 1.63vw, 20px);

        .our-team__item-name {
          font-family: var(--font-min);
          font-size: clamp(16px, 12.602px + 0.906vw, 30px);
          line-height: 1;
          margin: 0;
        }

        .our-team__item-category {
          grid-column: 2;
          grid-row: 2;
          font-family: var(--font-min);
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          color: #9e8d85;
          line-height: 1.1;
          margin: 0;
        }
      }

      .our-team__item-message {
        grid-column: 1 / 3;
        grid-row: 3;
        margin: 10px 0 0;
      }
    }
  }

  .our-team__item-btn {
    margin-top: clamp(30px, 17.864px + 3.236vw, 80px);

    a {
      margin: auto;
    }
  }
}

/*--- MENU ---*/
.top--menu {
  background-color: #f8f6f4;
  padding-top: clamp(50px, 45.146px + 1.294vw, 70px);
  padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

  .menu__tab {
    .menu__tab--button-area {
      display: flex;
      width: 100%;
      margin-bottom: clamp(30px, 17.864px + 3.236vw, 80px);

      .menu__tab--button {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 50%;
        text-align: center;
        color: #9e8d85;
        padding-bottom: 15px;
        border-bottom: 1px #9e8d85 solid;
        transition: ease-in 0.2s;
        cursor: pointer;

        .ja {
          font-family: var(--font-min);
          /* font-size: clamp(18px, 13.631px + 1.165vw, 36px); */
          font-size: clamp(16px, 11.146px + 1.294vw, 36px);
          margin: 0;
        }

        .en {
          font-family: var(--font-min);
          font-size: clamp(12px, 9.087px + 0.777vw, 24px);
          opacity: 0.5;
          margin: 0;
        }

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 100%;
          display: inline-block;
          border: 15px solid transparent;
          border-bottom: 15px solid var(--color-general);
          transform: translateX(-50%) rotate(180deg);
          opacity: 0;
          transition: ease-in 0.2s;
        }

        @media (max-width: 767px) {
          &::after {
            bottom: -16px;
            border: 8px solid transparent;
            border-bottom: 8px solid var(--color-general);
          }
        }
      }

      .button-general.active,
      .button-general:hover {
        color: var(--color-general);
        border-bottom-color: var(--color-general);

        &::after {
          opacity: 1;
          border-bottom-color: var(--color-general);
        }
      }

      .button-beauty.active,
      .button-beauty:hover {
        color: var(--color-beauty);
        border-bottom-color: var(--color-beauty);

        &::after {
          opacity: 1;
          border-bottom-color: var(--color-beauty);
        }
      }
    }

    .menu__tab--panel {
      .menu__pickup-area {
        .sec-ttl--bilingual-medium {
          .en {
            @media (max-width: 767px) {
              letter-spacing: -2px;
            }
          }
        }

        .menu__pickup-list {
          list-style: none;
          margin: 0;
          padding: 0;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          gap: 1.3vw;

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

          .menu__pickup-item {
            width: calc((100% - 2.6vw) / 3);

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

            a {
              position: relative;
              border-radius: 4px;
              overflow: hidden;
              display: block;
              box-shadow: 0px 0px 15px 0 #f4ece9;

              @media (max-width: 767px) {
                background-color: #fff;
                display: flex;
                align-items: center;
                column-gap: 15px;
                padding-right: 60px;
              }

              .menu__pickup-bg {
                aspect-ratio: 1;

                @media (max-width: 767px) {
                  aspect-ratio: inherit;
                  width: 21.33vw;
                }

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

              .menu__pickup-label {
                position: absolute;
                top: 1.3vw;
                left: 0.7vw;
                writing-mode: vertical-rl;
                font-family: var(--font-min);
                font-size: clamp(18px, 13.631px + 1.165vw, 36px);
                color: #fff;
                text-shadow: 0px 0px 25px rgba(0, 0, 0, 1);
                margin: 0;
                padding-bottom: 60px;
                letter-spacing: 0.1em;

                @media (max-width: 767px) {
                  position: static;
                  writing-mode: inherit;
                  padding-bottom: 0;
                  color: #242424;
                  text-shadow: none;
                }
              }

              .menu__pickup-more {
                position: absolute;
                bottom: 0;
                left: 0;
                font-family: var(--font-min);
                font-size: clamp(18px, 17.515px + 0.129vw, 20px);
                color: #fff;
                background-color: rgba(214, 130, 47, 0.8);
                display: flex;
                align-items: center;
                width: 100%;
                margin: 0;
                padding: 0.78vw 1.3vw;

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

                &::after {
                  content: "";
                  width: clamp(39px, 34.874px + 1.1vw, 56px);
                  height: clamp(6px, 5.272px + 0.194vw, 9px);
                  display: inline-block;
                  background: url("data:image/svg+xml,%3Csvg width='59' height='11' viewBox='0 0 59 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 10H57L47.5618 1' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E ") center center / contain no-repeat;
                  margin-left: auto;
                  transition: ease-in 0.2s;
                }
              }

              @media (max-width: 767px) {
                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  right: 15px;
                  transform: translateY(-50%);
                  background: url("data:image/svg+xml,%3Csvg width='41' height='7' viewBox='0 0 41 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 6.5H39.5L32.927 0.5' stroke='%23D6822F' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                  width: 39px;
                  height: 6px;
                }
              }

              &:hover {
                opacity: 0.8;

                .menu__pickup-more {
                  &::after {
                    margin-right: -5px;
                  }
                }
              }
            }
          }
        }
      }

      .menu__all-area {
        margin-top: clamp(60px, 55.146px + 1.294vw, 80px);

        .subject-area {
          .subject-ttl {
            font-family: var(--font-min);
            font-weight: 500;
            font-size: clamp(18px, 15.573px + 0.647vw, 28px);
            color: var(--color-general);
            margin: 0 0 20px;
            padding-bottom: 10px;
            border-bottom: 1px var(--color-general) solid;
          }

          &+.subject-area {
            margin-top: clamp(30px, 17.864px + 3.236vw, 80px);
          }
        }
      }

      /* 美容皮膚科タブ */
      &.panel-beauty {
        .menu__pickup-area {
          .menu__pickup-list {
            .menu__pickup-item {
              a {
                .menu__pickup-label {
                  color: #242424;
                  text-shadow: 0px 0px 25px rgba(255, 255, 255, 1);
                }

                .menu__pickup-more {
                  background-color: rgba(198, 44, 43, 0.8);
                }
              }
            }
          }
        }

        .menu__treatment-area {
          margin-top: clamp(50px, 37.864px + 3.236vw, 100px);
          padding-top: clamp(40px, 25.437px + 3.883vw, 100px);
          padding-bottom: clamp(60px, 38.155px + 5.825vw, 150px);
          background: linear-gradient(0deg,
              rgba(248, 126, 126, 1) 0%,
              rgba(247, 214, 214, 1) 100%);

          .sec-ttl--bilingual-medium {
            text-shadow: 0px 0px 15px #f7a5a5;

            .ja {
              color: #fff;
            }

            .en {
              color: #fff;
            }
          }

          .menu__all-list {
            .menu__all-item {

              a,
              span {
                box-shadow: none;
              }
            }
          }
        }
      }
    }
  }
}

.menu__all-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.3vw;
  flex-wrap: wrap;

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

  .menu__all-item {
    width: calc((100% - 5.2vw) / 5);

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

    a,
    span {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      background-color: #fff;
      height: clamp(60px, 52.718px + 1.942vw, 90px);
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      padding: clamp(10px, 9.515px + 0.129vw, 12px);
      padding-right: clamp(50px, 45.146px + 1.294vw, 70px);
      box-shadow: 0px 0px 15px 0px #f4ece9;
      border-radius: 4px;

      small {
        font-size: 14px;
        display: contents;
      }
    }

    a::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      background: url("data:image/svg+xml,%3Csvg width='44' height='8' viewBox='0 0 44 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 7.5H42.5L35.4213 0.5' stroke='%23BF7327' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      width: clamp(23px, 18.388px + 1.23vw, 42px);
      height: clamp(4px, 3.272px + 0.194vw, 7px);
      transition: ease-in 0.2s;
    }

    @media (max-width: 767px) {
      a::after {
        right: 10px;
      }
    }

    a:hover {
      opacity: 0.7;

      &::after {
        margin-right: -5px;
      }
    }
  }
}

/*--- スライダー ---*/
.top--loop-slider {
  overflow: hidden;

  .loop-slider {
    display: flex;
    width: max-content;
    animation: slideAnim 60s linear infinite;

    .loop-item {
      flex-shrink: 0;
      width: 20.31vw;

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

/*--- Instagram/Blog ---*/
.instagram-blog__wrap {
  display: flex;
  gap: 5.21vw;
  padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
  padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

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

  /*--- Instagram ---*/
  .top--instagram {
    position: relative;
    width: 50%;

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

    .instagram__btn {
      margin-top: clamp(20px, 15.146px + 1.294vw, 40px);
      display: flex;
      justify-content: flex-end;

      a {
        padding-left: clamp(30px, 27.573px + 0.647vw, 40px);
        padding-bottom: 10px;

        &::before {
          content: "";
          position: absolute;
          top: 4px;
          left: 0;
          background: url("../img/sns-instagram.svg") center center / contain no-repeat;
          width: clamp(20px, 17.573px + 0.647vw, 30px);
          height: clamp(20px, 17.573px + 0.647vw, 30px);
          display: inline-block;
        }
      }
    }

    .sec-ttl {
      text-align: center;

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

  /*--- Blog ---*/
  .top--blog {
    position: relative;
    width: calc(50% - 5.21vw);

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

    .blog__btn {
      margin-top: clamp(20px, 10.777px + 2.46vw, 58px);
      display: flex;
      justify-content: flex-end;
    }

    .sec-ttl {
      text-align: center;

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

    .blog__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;

      @media (min-width: 768px) {
        gap: clamp(20px, 17.573px + 0.647vw, 30px);
      }

      @media (max-width: 767px) {
        height: auto !important;
        margin-top: clamp(20px, 17.573px + 0.647vw, 30px);
        gap: clamp(20px, 17.573px + 0.647vw, 30px);
      }

      .blog__item {
        @media (min-width: 768px) {
          flex: 1 1 0;
          min-height: 0;
        }

        a {
          display: grid;
          grid-template-columns: 138px 1fr;
          gap: 10px 20px;
          align-items: center;

          @media (max-width: 767px) {
            grid-template-columns: 95px 1fr;
            gap: 5px 15px;
            height: auto;
          }

          .blog__eyecatch {
            aspect-ratio: 1;
            grid-column: 1;
            grid-row: 1 / 3;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 4px;
            }
          }

          .blog__date {
            grid-column: 2;
            grid-row: 1;
            color: #9e8d85;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            display: block;
            margin-top: auto;
          }

          .blog__ttl {
            grid-column: 2;
            grid-row: 2;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            margin: 0 0 auto;
          }

          &:hover {
            opacity: 0.7;
          }
        }

        &+.blog__item {
          margin-top: 0;
        }
      }
    }
  }
}

/*--- 求人バナー ---*/
.top--banner-recruit {
  padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

  a {
    &:hover {
      opacity: .8;
    }
  }
}

/*--------------------
footer
--------------------*/
footer {
  p {
    margin: 0;
  }

  .footer--above {
    background-color: #f3f0f0;
    padding-top: clamp(70px, 50.583px + 5.178vw, 150px);
    padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);
  }

  .above-inner {
    display: flex;
    gap: 5.21vw;

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

    .above-left {
      width: calc((100% - 5.21vw) / 2);

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

    .above-right {
      width: calc((100% - 5.21vw) / 2);

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

    /* SNS */
    .sns {
      .sns__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 1.04vw;
        margin-top: clamp(50px, 42.718px + 1.942vw, 80px);

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

        .sns__item {
          width: clamp(30px, 26.359px + 0.971vw, 45px);
          height: clamp(30px, 26.359px + 0.971vw, 45px);

          a {
            display: block;

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

            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .footer__logo {
    width: clamp(240px, 169.612px + 18.77vw, 530px);
    margin: 0 auto clamp(20px, 0.583px + 5.178vw, 100px);
  }

  .information-table--area {
    margin-top: clamp(30px, 22.718px + 1.942vw, 60px);

    .information-table {
      background-color: #fff;
    }
  }

  .footer__address-area {
    text-align: center;

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

    .footer__tel {
      margin-top: clamp(20px, 15.146px + 1.294vw, 40px);
      margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);

      a {
        font-family: var(--font-min);
        font-size: clamp(24px, 22.544px + 0.388vw, 30px);
      }
    }

    .footer__subject {
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    }

    .footer__parking-spots {
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      margin-top: clamp(5px, 3.786px + 0.324vw, 10px);
    }
  }

  /* .footer__cta-area {
    display: flex;
    gap: 2.08vw;
    margin-top: clamp(40px, 35.146px + 1.294vw, 60px);

    @media (max-width: 767px) {
      flex-direction: column;
      width: 80%;
      margin: clamp(40px, 35.146px + 1.294vw, 60px) auto 0;
    }

    .footer__cta {
      width: 100%;

      a {
        position: relative;
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(18px, 17.029px + 0.259vw, 22px);
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: clamp(75px, 71.359px + 0.971vw, 90px);
        border: 1px var(--color-general) solid;
        color: var(--color-general);
        padding-left: 20px;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 20px;
          transform: translateY(-50%);
          display: inline-block;
          background: url("data:image/svg+xml,%3Csvg width='45' height='9' viewBox='0 0 45 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 8H43L35.9213 1' stroke='%23BF7327' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
          width: clamp(23px, 18.388px + 1.23vw, 42px);
          height: clamp(4px, 3.272px + 0.194vw, 7px);
          transition: ease-in .2s;
        }

        &:hover {
          &::after {
            right: 15px;
          }
        }
      }

      &.cta-beauty {
        a {
          color: var(--color-beauty);
          border-color: var(--color-beauty);

          .sub {
            font-family: var(--font-min);
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            display: block;
          }
        }
      }
    }
  } */
  .access-tab {
    .access-tab__button-area {
      display: flex;
      width: 100%;
      margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);

      .access-tab__button {
        position: relative;
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-family: var(--font-min);
        font-size: clamp(18px, 16.544px + 0.388vw, 24px);
        text-align: center;
        color: #9e8d85;
        padding-bottom: clamp(10px, 8.786px + 0.324vw, 15px);
        border-bottom: 1px #9e8d85 solid;
        transition: ease-in 0.2s;
        cursor: pointer;

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: -20px;
          display: inline-block;
          border: 10px solid transparent;
          border-bottom: 10px solid var(--color-ttl);
          transform: translateX(-50%) rotate(180deg);
          opacity: 0;
          transition: ease-in 0.2s;
        }

        &.active,
        &:hover {
          color: var(--color-ttl);
          border-bottom-color: var(--color-ttl);

          &::after {
            opacity: 1;
            border-bottom-color: var(--color-ttl);
          }
        }
      }
    }

    .access-tab__panel-area {
      .access-tab__panel {
        .panel-frame {
          background-color: #fff;
          padding: clamp(30px, 25.146px + 1.294vw, 50px);
          border-radius: 4px;

          .access-tab__panel-inner {
            .ttl {
              font-family: var(--font-min);
              font-weight: 500;
              font-size: clamp(16px, 14.544px + 0.388vw, 22px);
              margin-bottom: 10px;
              padding-bottom: 3px;
              border-bottom: 1px var(--color-ttl) solid;
            }

            &+.access-tab__panel-inner {
              margin-top: 30px;
            }
          }
        }
      }
    }

    .panel-notes {
      margin-top: clamp(30px, 27.573px + 0.647vw, 40px);
    }
  }

  .footer--sitemap {
    padding-top: clamp(70px, 62.718px + 1.942vw, 100px);
    padding-bottom: clamp(60px, 57.573px + 0.647vw, 70px);

    .sitemap__inner {
      .sitemap__block {
        .sitemap__block-ttl {
          font-family: var(--font-min);
          font-size: clamp(22px, 20.058px + 0.518vw, 30px);
          color: var(--color-ttl);
          border-bottom: 1px var(--color-ttl) solid;
          margin-bottom: 20px;
          padding-bottom: 10px;

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

        .list-arrow {
          display: flex;
          flex-wrap: wrap;
          gap: 30px 25px;

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

          &>li {
            width: calc((100% - 100px) / 5);

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

            a {
              font-family: var(--font-min);
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            }

            &+li {
              margin-top: 0;
            }
          }
        }

        &+.sitemap__block {
          margin-top: clamp(60px, 55.146px + 1.294vw, 80px);
        }
      }
    }
  }

  .copyright {
    padding: 5px 0 10px;
    background-color: var(--color-ttl);
    font-family: var(--font-min);
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    color: #fff;
    text-align: center;
    text-transform: uppercase;

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

/*--------------------
サイドバー
--------------------*/
.main-aside--wrapper {
  display: flex;

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

  /* オーバーレイ */
  .aside-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 998;

    &.active {
      opacity: 1;
      visibility: visible;
    }
  }

  /* SP用indexボタン */
  .btn-index {
    display: none;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
    line-height: 1.2;
    position: fixed;
    right: 15px;
    bottom: 80px;
    z-index: 99;
    border: none;
    background: linear-gradient(45deg, rgba(248, 121, 121, 1) 0%, rgba(255, 174, 123, 1) 100%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    width: 55px;
    height: 55px;
    border-radius: 100px;
    color: #fff;
    padding: 30px 0 0 0;
    flex-shrink: 0;
    align-items: center;
    cursor: pointer;

    @media (max-width: 1000px) {
      display: flex;
    }

    &::after {
      content: "";
      position: absolute;
      top: 7px;
      background: url("data:image/svg+xml,%3Csvg width='19' height='22' viewBox='0 0 19 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 21.4H1V6.1L6.1 1H18V21.4Z' stroke='white'/%3E%3Cline x1='4.40234' y1='8.15234' x2='14.6023' y2='8.15234' stroke='white'/%3E%3Cline x1='4.40234' y1='11.5527' x2='14.6023' y2='11.5527' stroke='white'/%3E%3Cline x1='4.40234' y1='14.9512' x2='14.6023' y2='14.9512' stroke='white'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      width: 17px;
      height: 21px;
      display: block;
    }
  }

  main {
    width: calc(100% - 300px);

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

.aside-left {
  width: 300px;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  padding: 1.56vw 2.08vw;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px #e9e9e9 solid;

  .aside-left__inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .aside-close {
    flex: 0 0 auto;
  }

  @media (max-width: 1000px) {
    position: fixed;
    top: inherit;
    left: 5%;
    bottom: 0;
    width: 90%;
    max-height: 65vh;
    height: fit-content;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 0 0;
    padding: 30px;
    z-index: 999;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;

    &.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
  }

  .aside__logo {
    margin: 0 0 20px;

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

  .btn-back {
    margin-bottom: 5.21vw;

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

    a {
      position: relative;
      font-size: 14px;
      color: var(--color-ttl);
      padding-left: 25px;

      &::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 0;
        background: url("data:image/svg+xml,%3Csvg width='17' height='5' viewBox='0 0 17 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 4L0.5 4' stroke='%23432815' stroke-linecap='round'/%3E%3Cpath d='M4 0.5L0.5 4' stroke='%23432815' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
        display: inline-block;
        width: 16px;
        height: 4px;
        transition: ease-in 0.2s;
      }

      &:hover {
        &::before {
          left: -5px;
        }
      }
    }
  }

  .aside__page-ttl {
    font-family: var(--font-min);
    font-size: 24px;
    color: #816049;
    margin: auto 0 10px;

    small {
      display: block;
      font-family: var(--font-min);
      font-size: 14px;
    }
  }

  .branch-clinic {
    display: flex;
    gap: 10px;
    margin-bottom: 5.21vw;

    @media (max-width: 1000px) {
      margin-bottom: 40px;
    }

    .branch-clinic__ttl {
      font-size: clamp(14px, 13.515px + 0.129vw, 16px);
      color: var(--color-ttl);
      margin: 0;
    }

    .branch-clinic__label {
      font-size: 13px;
      border-radius: 100px;
      border: 1px #432815 solid;
      margin: 0;
      padding: 0 10px;
    }
  }

  .aside-list {
    list-style: none;
    margin: 0;
    padding: 0;

    .aside-item {
      position: relative;
      padding-left: 20px;

      &::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 0;
        width: 7px;
        height: 7px;
        border: 0;
        border-top: solid 2px var(--color-ttl);
        border-right: solid 2px var(--color-ttl);
        transform: rotate(45deg);
        transition: opacity ease-in 0.2s;
        opacity: 0;
      }

      @media (max-width: 1000px) {
        &::before {
          opacity: 1;
          transform: rotate(135deg);
          border-top-color: #816049;
          border-right-color: #816049;
        }
      }

      a {
        font-size: clamp(14px, 13.515px + 0.129vw, 16px);
      }

      &.current {
        &::before {
          opacity: 1;
        }

        a {
          color: var(--color-ttl);
        }
      }

      &+.aside-item {
        margin-top: 20px;

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

  /* 閉じるボタン */
  .aside-close {
    margin: 50px auto 0;
    width: 45px;
    height: 45px;
    border-radius: 100px;
    flex-shrink: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,
        rgba(248, 121, 121, 1) 0%,
        rgba(255, 174, 123, 1) 100%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    border: none;

    @media (max-width: 1000px) {
      display: flex;
    }

    &::after {
      content: "";
      background: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L18 18' stroke='white'/%3E%3Cpath d='M18 1L1 18' stroke='white'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      width: 17px;
      height: 17px;
    }
  }

  /* 保険サイドバー */
  &.aside-general {
    .btn-back {
      a {
        color: var(--color-general);

        &::before {
          background-image: url("data:image/svg+xml,%3Csvg width='17' height='5' viewBox='0 0 17 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 4L0.5 4' stroke='%23E3A15F' stroke-linecap='round'/%3E%3Cpath d='M4 0.5L0.5 4' stroke='%23E3A15F' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        }
      }
    }

    .branch-clinic {
      .branch-clinic__ttl {
        color: var(--color-general);
      }
    }

    .aside-list {
      .aside-item {
        &.current {
          &::before {
            border-top-color: var(--color-general);
            border-right-color: var(--color-general);
          }

          a {
            color: var(--color-general);
          }
        }
      }
    }
  }

  /* 美容サイドバー */
  &.aside-beauty {
    .btn-back {
      a {
        color: var(--color-beauty);

        &::before {
          background-image: url("data:image/svg+xml,%3Csvg width='17' height='5' viewBox='0 0 17 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 4L0.5 4' stroke='%23C62C2B' stroke-linecap='round'/%3E%3Cpath d='M4 0.5L0.5 4' stroke='%23C62C2B' stroke-linecap='round'/%3E%3C/svg%3E%0A");
        }
      }
    }

    .branch-clinic {
      .branch-clinic__ttl {
        color: var(--color-beauty);
      }
    }

    .aside-list {
      .aside-item {
        &.current {
          &::before {
            border-top-color: var(--color-beauty);
            border-right-color: var(--color-beauty);
          }

          a {
            color: var(--color-beauty);
          }
        }
      }
    }
  }

}

.aside-post {
  width: 300px;

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

  .aside__inner {
    .aside__ttl {
      background-color: var(--color-ttl);
      color: #fff;
      font-family: var(--font-min);
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      text-align: center;
      padding: 10px;
      margin: 0;
      border-radius: 4px;
    }

    .genre-list {
      list-style: none;
      margin: 15px 0 0;
      padding: 0;
      display: flex;
      gap: 15px;

      .genre-item {
        width: calc((100% - 30px) / 3);

        a {
          display: block;
          background-color: rgba(158, 141, 133, 0.3);
          color: #fff;
          font-size: 14px;
          text-align: center;
          padding: 10px;
          border-radius: 4px;

          &:hover {
            background-color: #9e8d85;
          }
        }

        &.current {
          a {
            background-color: #9e8d85;
          }
        }
      }
    }

    .post-list {
      list-style: none;
      margin: 0;
      padding: 0;

      .post-item {
        a {
          display: block;
          padding: 20px 0;
          border-bottom: 1px #e4dedc solid;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);

          time {
            display: block;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            color: #9e8d85;
            margin-bottom: 5px;
          }

          .post-ttl {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            margin: 0;
          }

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

    &:nth-child(even) {
      .aside__ttl {
        background-color: #fff;
        color: var(--color-ttl);
        border: 1px var(--color-ttl) solid;
      }
    }

    &+.aside__inner {
      margin-top: 80px;
    }

    .archive-list {
      list-style: none;
      margin: 0;
      padding: 0;

      .year {
        border-bottom: 1px #e4dedc solid;

        .year-toggle {
          position: relative;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          margin: 0;
          padding: 20px 0;
          cursor: pointer;
          transition: ease-in 0.2s;

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            background: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Cline x1='15.9922' y1='24.9678' x2='15.9922' y2='9.00003' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
            width: clamp(25px, 23.058px + 0.518vw, 33px);
            height: clamp(25px, 23.058px + 0.518vw, 33px);
            display: inline-block;
            transition: ease-in 0.2s;
          }

          &:hover {
            opacity: 0.7;
          }

          &.show {
            &::after {
              background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A");
            }
          }
        }

        .month-list {
          display: none;
          list-style: none;
          margin: 0;
          padding: 0;

          &>li {
            padding: 20px 30px;

            a {
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);

              &:hover {
                opacity: 0.7;
              }
            }

            &+li {
              border-top: 1px #e4dedc solid;
            }
          }
        }
      }
    }
  }
}

/*--------------------
保険診療/美容施術/お悩み 詳細
--------------------*/
.method-list {
  .method-item {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);
    padding: clamp(30px, 27.573px + 0.647vw, 40px) clamp(30px, 25.146px + 1.294vw, 50px);

    .ttl {
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(22px, 20.544px + 0.388vw, 28px);
      color: var(--color-general);
      padding-bottom: clamp(8px, 7.515px + 0.129vw, 10px);
      margin: 0 0 20px;
      border-bottom: 1px var(--color-general) dashed;
    }

    .img {
      margin-top: 20px;

      &.js-scrollable {
        @media (max-width: 767px) {
          img {
            max-width: 400px;
          }
        }
      }
    }

    &+.method-item {
      margin-top: clamp(30px, 27.573px + 0.647vw, 40px);
    }

    &.img-left {
      display: block;

      &::after {
        content: "";
        display: block;
        clear: both;
      }

      .img {
        float: left;
        max-width: 360px;
        width: 40%;
        margin: 0 2.6vw 20px 0;

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

/* 施術の流れ */
.sec--flow {
  background-color: #f7f5f5;
  padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
  padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

  .flow__frame {
    .frame-ttl {
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(22px, 20.544px + 0.388vw, 28px);
      color: var(--color-general);
      margin: 0 0 20px;
      padding-bottom: 5px;
      border-bottom: 1px var(--color-general) solid;
    }

    .frame-lead {
      margin: 0 0 20px;
    }
  }

  .flow__lead {
    margin: 0 0 clamp(30px, 27.573px + 0.647vw, 40px);

    a {
      color: var(--color-general);
      text-decoration: underline;

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

  .flow__list {
    list-style: none;
    margin: 0;
    padding: 0;

    .flow__item {
      background-color: #fff;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr;
      column-gap: 30px;
      border-radius: 4px;

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

      .flow__img {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 200px;

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

        img {
          border-radius: 5px;
        }
      }

      .flow__ttl {
        grid-row: 1;
        font-family: var(--font-min);
        font-size: clamp(22px, 20.544px + 0.388vw, 28px);
        color: var(--color-general);
        margin: 0 0 clamp(10px, 8.786px + 0.324vw, 15px);
      }

      .flow__txt {
        grid-row: 2;
      }

      &+.flow__item {
        margin-top: 40px;
        position: relative;
      }
    }
  }

  .flow__list--general {
    .flow__item {
      .flow__ttl {
        color: var(--color-general);
      }
    }

    .flow__item+.flow__item {
      &::before {
        border-bottom-color: var(--color-general);
      }
    }
  }

  .flow__list--beauty {
    .flow__item {
      .flow__ttl {
        color: var(--color-beauty);
      }
    }

    .flow__item+.flow__item {
      &::before {
        border-bottom-color: var(--color-beauty);
      }
    }
  }

  &+.flow__frame {
    margin-top: 40px;
  }
}

.page-surgery {
  .flow__list {
    .flow__item {
      padding: clamp(30px, 27.573px + 0.647vw, 40px) clamp(30px, 25.146px + 1.294vw, 50px);

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -40px;
        display: inline-block;
        border: 30px solid transparent;
        border-bottom: 15px solid var(--color-general);
        transform: translateX(-50%) rotate(180deg);
        transition: ease-in 0.2s;
      }
    }
  }
}

.flow__frame+.flow__frame {
  margin-top: clamp(30px, 27.573px + 0.647vw, 40px);
}

.single-general,
.single-beauty,
.single-worries {
  .breadcrumb {
    margin: 0;
    padding: 0 0 20px clamp(1.25rem, 0.947rem + 1.294vw, 2.5rem);
    max-width: 100%;
    width: 100%;
    background-color: #fff;
  }

  header {
    .header-inner {
      width: calc(100% - 300px);

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

  /* ヘッダー */
  .sec--head {
    position: relative;
    padding: 0 2.08vw;
    margin-bottom: clamp(30px, 17.864px + 3.236vw, 80px);

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

    .head__en {
      font-family: var(--font-min);
      /* font-size: 7.81vw; */
      font-size: clamp(50px, 25.728px + 6.472vw, 150px);
      color: rgba(255, 255, 255, 0.6);
      line-height: 1;
      text-shadow: 0px 0px 30px rgba(234, 225, 212, 0.4);
      margin: 0;
      min-height: 2.5em;
    }

    .head__ja {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(35px, 28.932px + 1.618vw, 60px);
      color: var(--color-ttl);
      margin: 0 0 20px;

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

      small {
        display: block;
        font-family: var(--font-min);
        font-size: clamp(18px, 15.573px + 0.647vw, 28px);
      }
    }
  }

  /* 概要 */
  .sec--about {
    padding-bottom: clamp(80px, 65.437px + 3.883vw, 140px);

    .about__inner {
      display: grid;
      grid-template-columns: min(360px, 40%) 1fr;
      grid-template-rows: auto 1fr;
      column-gap: 2.6vw;

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

      .about__img {
        grid-column: 1;
        grid-row: 1 / 3;

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

        img {
          border-radius: 4px;
        }
      }

      .about__ttl {
        grid-column: 2;
        grid-row: 1;
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(22px, 20.058px + 0.518vw, 30px);
        color: var(--color-general);
        margin: 0 0 clamp(20px, 17.573px + 0.647vw, 30px);
      }

      .about__txt {
        grid-column: 2;
        grid-row: 2;
      }
    }
  }

  /* 当院が選ばれる理由 */
  .sec--reason {
    position: relative;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 65.437px + 3.883vw, 140px);

    .reason__list {
      list-style: none;
      margin: 0;
      padding: 0;

      .reason__item {
        display: grid;
        grid-template-columns: 80px 1fr;
        background-color: #fff;
        border-radius: 4px;
        padding: clamp(30px, 27.573px + 0.647vw, 40px) clamp(30px, 25.146px + 1.294vw, 50px);

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

        .reason__num {
          grid-column: 1;
          grid-row: 1 / 3;
          align-self: center;
          font-family: var(--font-min);
          font-size: clamp(40px, 35.146px + 1.294vw, 60px);
          color: var(--color-general);
          margin: 0;

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

        .reason__ttl {
          grid-column: 2;
          grid-row: 1;
          font-family: var(--font-min);
          font-weight: 400;
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          color: var(--color-general);
          margin: 0 0 15px;

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

        .reason__txt {
          grid-column: 2;
          grid-row: 2;
          margin: 0;
        }

        &+.reason__item {
          margin-top: clamp(30px, 27.573px + 0.647vw, 40px);
        }
      }
    }
  }

  /* loop文字 */
  .loop-wrap {
    position: absolute;
    top: -0.6em;
    width: 100%;
    overflow: hidden;
    font-size: clamp(60px, 50.291px + 2.589vw, 100px);

    .loop-txt {
      display: flex;
      width: max-content;
      animation: slideAnim 30s linear infinite;
      line-height: 1;
    }

    .loop-group {
      display: flex;
      flex-shrink: 0;
    }

    .loop-item {
      flex-shrink: 0;
      font-family: var(--font-min);
      color: #fff;
      text-shadow: 0 0 30px rgba(187, 148, 104, 0.2);
      margin: 0 30px 0 0;
    }

    @keyframes slideAnim {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }
  }

  /* 症状の種類 */
  .sec--type {
    position: relative;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 75.146px + 1.294vw, 100px);
    background-color: #FFFAF6;
  }

  /* 症状の原因/特徴 */
  .sec--cause,
  .sec--features,
  .sec--features2 {
    position: relative;
    background: url("../img/general/cause-bg.webp") top center / cover no-repeat;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
  }

  /* 特徴 */
  .sec--features,
  .sec--features2 {
    background: url("../img/beauty/features-bg.webp") center left / cover no-repeat;

    .method-list {
      .method-item {
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
      }
    }
  }

  /* 治療法 */
  .sec--method {
    background-color: #fff9f2;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .method__lead {
      margin-bottom: 40px;
    }

    .method__block {
      .method__ttl {
        background: linear-gradient(90deg,
            rgba(228, 148, 69, 1) 0%,
            rgba(255, 192, 130, 1) 100%);
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(22px, 20.544px + 0.388vw, 28px);
        color: #fff;
        margin: 0 0 20px;
        padding: 5px 15px;
        border-radius: 5px;
      }

      .method__txt {
        margin-bottom: 20px;
      }

      &.img-left {
        display: block;

        &::after {
          content: "";
          display: block;
          clear: both;
        }

        .method__img {
          float: left;
          max-width: 360px;
          width: 40%;
          margin: 0 2.6vw 20px 0;

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

      &+.method__block {
        margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
      }
    }
  }

  /* 症例 */
  .sec--case {
    background:
      url("../img/symbol-beauty__top-right.svg") bottom left / 28.54vw no-repeat,
      #fff;
    padding-top: clamp(30px, 22.718px + 1.942vw, 60px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    @media (max-width: 767px) {
      background-size: 68vw;
    }

    .case__wrapper {
      max-width: 800px;
      width: 90%;
      margin: 0 auto;
    }

    .swiper-button__wrap {
      position: relative;
      height: 40px;
      width: 300px;
      margin-left: auto;
      margin-top: 30px;
      width: 100%;

      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        background-color: var(--color-beauty);
        width: 40px;
        height: 40px;
        border-radius: 100px;
        top: 50%;

        &::after {
          color: #fff;
          font-size: clamp(14px, 13.515px + 0.129vw, 16px);
          font-weight: 500;
        }
      }

      .swiper-button-prev {
        left: inherit;
        right: 60px;
      }

      .swiper-button-next {
        right: 0;
        left: inherit;
      }

      .swiper-pagination {
        display: flex;
        width: 50%;

        .swiper-pagination-bullet {
          opacity: 1;
          background: #cbc4c5;
          width: 12px;
          height: 12px;
          margin: 0 7px;
        }

        .swiper-pagination-bullet-active {
          background: var(--color-beauty);
        }
      }
    }
  }

  /* よくある質問 */
  .sec--faq {
    position: relative;
    background: url("../img/general/faq-bg.webp") center center / cover no-repeat;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .faq__list {
      max-width: 1500px;
      width: 90%;
      margin: 0 auto;
    }
  }

  /* 流れ */
  .sec--flow {
    .flow__lead {
      text-align: center;
    }
    .flow__list {
      .flow__item  {
        padding: clamp(30px, 27.573px + 0.647vw, 40px) clamp(30px, 25.146px + 1.294vw, 50px);
      }
    }

    .flow-tab {
      .flow-tab__area {
        display: flex;
        gap: 30px;
        justify-content: center;
        margin-bottom: clamp(30px, 22.718px + 1.942vw, 60px);

        .flow-tab__button {
          display: block;
          filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.10));
          cursor: pointer;
          width: 300px;

          span {
            position: relative;
            display: block;
            font-family: var(--font-min);
            padding: clamp(8px, 6.544px + 0.388vw, 14px);
            background-color: #ECC49C;
            border-radius: 4px;
            font-size: clamp(18px, 17.515px + 0.129vw, 20px);
            color: #fff;
            text-align: center;

            &::after {
              content: "";
              position: absolute;
              bottom: -8px;
              left: 50%;
              transform: translateX(-50%);
              width: 0;
              height: 0;
              border-left: 14px solid transparent;
              border-right: 14px solid transparent;
              border-top: 10px solid var(--color-general);
              display: none;
            }
          }
        }

        .flow-tab__button--beauty {
          span {
            background-color: #E19796;
          }
        }

        .flow-tab__button--general.active {
          span {
            background-color: var(--color-general);

            &::after {
              border-top-color: var(--color-general);
              display: block;
            }
          }
        }

        .flow-tab__button--beauty.active {
          span {
            background-color: var(--color-beauty);

            &::after {
              border-top-color: var(--color-beauty);
              display: block;
            }
          }
        }
      }

      .tab__panel {
        display: none;
      }

      .tab__panel.show {
        display: block;
      }

      .tab__panel.no-tab {
        display: block;
      }
    }
  }

  /* 監修医師 */
  .sec--doctor {
    background-color: #fff;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .doctor__frame {
      display: flex;
      gap: clamp(20px, 12.718px + 1.942vw, 50px);

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

      .doctor__img-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 300px;
        flex-shrink: 0;

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

        .doctor__name-area {
          margin-top: clamp(10px, 5.146px + 1.294vw, 30px);

          .doctor__name-row {
            font-size: clamp(16px, 15.515px + 0.129vw, 18px);
            margin: 0;

            .name {
              font-size: clamp(22px, 21.029px + 0.259vw, 26px);
              margin-left: 30px;
            }
          }
        }
      }

      .doctor__info-area {
        .doctor__message {
          margin-bottom: 40px;
        }

        .doctor__info {
          .info-ttl {
            font-family: var(--font-min);
            font-weight: 400;
            font-size: clamp(22px, 20.544px + 0.388vw, 28px);
            color: var(--color-general);
            margin: 0 0 20px;
            padding-bottom: 5px;
            border-bottom: 1px var(--color-general) solid;
          }

          .info-dl {
            display: flex;
            flex-wrap: wrap;
            margin: 0;

            dt {
              width: 65px;
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);
              color: var(--color-general);
              margin: 0 0 5px;
            }

            dd {
              width: calc(100% - 65px);
              margin: 0 0 5px;
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            }
          }

          &+.doctor__info {
            margin-top: 40px;
          }
        }
      }
    }
  }

  /* お悩み */
  .sec--worries {
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(60px, 50.291px + 2.589vw, 100px);
    background-color: #FDF8F8;

    .worries__frame {
      background-color: #fff;
      box-shadow: 0px 0px 10px 0px rgba(211, 205, 193, 0.5);
      max-width: 820px;
      width: 90%;
      margin: 0 auto;
      padding: clamp(30px, 25.146px + 1.294vw, 50px);
      border-radius: 4px;

      .worries__ttl {
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(22px, 20.058px + 0.518vw, 30px);
        color: var(--color-beauty);
        text-align: center;
        margin: 0 0 clamp(0px, -2.427px + 0.647vw, 10px);
      }

      .worries__list {
        list-style: none;
        margin: 0;
        padding: 0;

        .worries__item {
          position: relative;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          line-height: 1.7;
          padding: 20px 20px 20px 60px;

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

          &::before {
            content: "";
            position: absolute;
            top: clamp(26px, 24.67px + 0.173vw, 28px);
            left: 30px;
            background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='2' fill='%23D12B2B'/%3E%3Cpath d='M2.44922 7.21484L6.75413 11.46L14.1062 4.00071' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

          @media (max-width: 767px) {
            &::before {
              top: 24px;
              left: 0;
            }
          }

          &+.worries__item {
            border-top: 1px #e9e9e9 solid;
          }
        }
      }
    }
  }

  /* お悩みの原因 */
  .sec--worries-cause {
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
    background: linear-gradient(180deg, #FFF 0%, #F4F4F4 100%);

    .worries-cause__list {
      list-style: none;
      margin: 0;
      padding: 0;

      .worries-cause__item {
        background-color: #fff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 40px;

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

        .worries-cause__ttl {
          font-family: var(--font-min);
          font-weight: 400;
          font-size: clamp(22px, 21.029px + 0.259vw, 26px);
          color: var(--color-beauty);
          margin: 0 0 20px;
          padding-bottom: 10px;
          border-bottom: 1px var(--color-beauty) dashed;
        }

        .worries-cause__img {
          margin-bottom: 20px;
          text-align: center;
        }

        .worries-cause__txt {}
      }

      .worries-cause__item+.worries-cause__item {
        margin-top: clamp(30px, 25.146px + 1.294vw, 50px);
      }
    }
  }

  /* 自由セクション */
  .sec--free {
    position: relative;
    background-color: #FDF8F8;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 65.437px + 3.883vw, 140px);

    .free__inner {
      display: block;
    }

    .free__inner+.free__inner {
      margin-top: clamp(80px, 65.437px + 3.883vw, 140px);
    }

    /* 自由セクション WYSIWYG */
    .free-wysiwyg {
      img.alignleft {
        float: left;
        margin: 0 clamp(20px, 17.573px + 0.647vw, 30px) 10px 0;

        @media (max-width: 767px) {
          float: none;
          margin: 0 0 clamp(20px, 17.573px + 0.647vw, 30px);
          display: block;
        }
      }

      p:has(img.alignleft) {
        &::after {
          content: "";
          clear: both;
          display: block;
        }
      }

      p {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        line-height: 1.7;
        margin: 10px 0;
      }

      h3 {
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(22px, 20.544px + 0.388vw, 28px);
        color: #fff;
        border-radius: 4px;
        background: linear-gradient(90deg, #C62C2B 0%, #E48180 100%);
        padding: 10px 15px;
        margin: clamp(40px, 35.146px + 1.294vw, 60px) 0 clamp(20px, 17.573px + 0.647vw, 30px);
      }

      h4 {
        position: relative;
        color: var(--color-beauty);
        border-bottom: 1px var(--color-beauty) dashed;
        padding-bottom: 10px;
        padding-left: 43px;
        margin-bottom: 30px;
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(22px, 21.515px + 0.129vw, 24px);

        &::before {
          content: "";
          position: absolute;
          top: 40%;
          left: 0;
          transform: translateY(-50%);
          width: 34px;
          aspect-ratio: 1 / 1;
          background: url("../img/symbol-beauty.svg") center center / contain no-repeat;
          display: inline-block;
        }
      }

      h5 {
        background-color: #FCF0F0;
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(22px, 21.515px + 0.129vw, 24px);
        color: var(--color-beauty);
        border-left: 7px var(--color-beauty) solid;
        padding: 5px 15px;
        margin: 30px 0 20px;
      }

      h6 {
        position: relative;
        font-weight: normal;
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        padding-left: 20px;
        margin: 20px 0 clamp(5px, 3.786px + 0.324vw, 10px);

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 5px;
          transform: translateY(-50%);
          width: clamp(6px, 5.515px + 0.129vw, 8px);
          aspect-ratio: 1 / 1;
          display: inline-block;
          background-color: var(--color-beauty);
        }
      }

      li {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      }

      li+li {
        margin-top: 5px;
      }

      ul {
        li {
          position: relative;
          padding-left: clamp(14px, 13.029px + 0.259vw, 18px);

          &::before {
            content: "・";
            position: absolute;
            top: 0;
            left: 0;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            color: var(--color-beauty);
          }
        }
      }

      ol {
        counter-reset: number;
        list-style: none;
        padding-left: 0;

        li {
          counter-increment: number;
          position: relative;
          padding-left: 1.75em;

          &::before {
            content: counter(number);
            position: absolute;
            left: 0;
            top: 0.1em;
            width: 1.6em;
            height: 1.6em;
            border-radius: 50%;
            background: var(--color-beauty);
            color: #fff;
            font-size: 0.85em;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      a {
        text-decoration: underline;
        color: var(--color-beauty);
      }

      a:hover {
        text-decoration: none;
      }

      a.btn-link {
        position: relative;
        border-radius: 4px;
        background: #FFF;
        text-decoration: none;
        color: initial;
        display: block;
        max-width: 460px;
        width: 100%;
        box-shadow: 0 0 10px 0 #F6ECEC;
        padding: 10px;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
          background: url("data:image/svg+xml,%3Csvg width='25' height='5' viewBox='0 0 25 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 4.5H23.5L19.5 0.5' stroke='%23C62C2B' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
          width: 23px;
          aspect-ratio: 23 / 4;
          display: inline-block;
        }
      }

      a.btn-link:hover {
        opacity: 0.6;
      }

      table {
        margin: 20px 0;
        border: 1px var(--color-beauty) solid;

        th {
          border: 1px #F5D0D2 solid;
          background-color: #FCF0F0;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          padding: clamp(10px, 7.573px + 0.647vw, 20px);
          color: var(--color-beauty);
          font-weight: normal;
        }

        td {
          border: 1px #F5D0D2 solid;
          background-color: #fff;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          padding: clamp(10px, 7.573px + 0.647vw, 20px);
        }
      }
    }
  }

  /* 種類と治療法 */
  /* .sec--worries-types-treatment {
  background-color: #fff;
  padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
  padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

  .worries-types-treatments__list {
    .worries-types-treatments__item {
      .worries-types-treatments__ttl {
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(22px, 20.544px + 0.388vw, 28px);
        color: var(--color-beauty);
        padding-bottom: 10px;
        margin: 0 0 20px;
        border-bottom: 1px var(--color-beauty) dashed;
      }

      .worries-types-treatments__case {
        margin-bottom: 40px;
      }

      .worries-types-treatments__img {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
      }

      .worries-types-treatments__txt {
        margin-bottom: 40px;
      }

      .treatment-method {
        background-color: #f8f6f4;
        padding: clamp(30px, 27.573px + 0.647vw, 40px) clamp(30px, 25.146px + 1.294vw, 50px);

        .treatment-method__ttl {
          display: flex;
          align-items: center;
          gap: clamp(15px, 13.786px + 0.324vw, 20px);
          font-family: var(--font-min);
          font-weight: 400;
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          color: var(--color-beauty);
          margin: 0 0 clamp(10px, 7.573px + 0.647vw, 20px);

          &::before,
          &::after {
            content: "";
            background-color: var(--color-beauty);
            flex-grow: 1;
            height: 1px;
          }
        }

        .treatment-method__list {
          list-style: none;
          margin: 0;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          gap: 20px;

          .treatment-method__item {
            width: calc((100% - 40px) / 3);
            display: flex;

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

            a {
              position: relative;
              background-color: #fff;
              width: 100%;
              display: flex;
              align-items: center;
              padding: 20px 60px 20px 10px;
              border-radius: 4px;
              box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);

              &::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                background: url("data:image/svg+xml,%3Csvg width='45' height='9' viewBox='0 0 45 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8.5H43.3688L36.1406 1' stroke='%23D12B2B'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                width: 43px;
                height: 7px;
                display: inline-block;
              }

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

      &+.worries-types-treatments__item {
        margin-top: 60px;
      }
    }
  }
} */
  /* 料金 */
  .sec--price {
    background-color: #fff;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
  }

  /* お支払い方法 */
  .sec--payment {
    background-color: #fff;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .payment__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 40px;

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

      .payment__item {
        background-color: #fff;
        border-radius: 10px;
        width: 260px;
        box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
        padding: 20px;

        @media (max-width: 767px) {
          border-radius: 5px;
          width: calc((100% - 15px) / 2);
        }

        .payment__img {
          text-align: center;
        }

        .payment__ttl {
          font-family: var(--font-min);
          font-weight: 400;
          font-size: clamp(22px, 21.029px + 0.259vw, 26px);
          text-align: center;
          line-height: 1.2;
          margin: 0 0 20px;
        }

        .payment__txt {
          text-align: center;
        }
      }
    }
  }

  /* 注意事項 */
  .sec--precautions {
    background-color: #F7F5F5;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 65.437px + 3.883vw, 140px);

    .precautions__frame {
      background-color: #fff;
      padding: clamp(20px, 15.146px + 1.294vw, 40px);
      border-radius: 4px;

      .frame-ttl {
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(22px, 21.029px + 0.259vw, 26px);
        text-align: center;
        color: var(--color-beauty);
        margin: 0 0 20px;
        padding-bottom: 10px;
        border-bottom: 1px var(--color-beauty) dashed;
      }

      &+.precautions__frame {
        margin-top: 40px;
      }
    }
  }

  /* 医療広告ガイドライン限定解除要請 */
  .sec--guideline {
    background-color: #fff;
    padding-bottom: clamp(60px, 50.291px + 2.589vw, 100px);

    .guideline__table {
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 4px;
      overflow: hidden;
      border: 1px #816049 solid;

      tbody {
        tr {

          th,
          td {
            padding: 40px 20px;
            font-weight: normal;

            @media (max-width: 767px) {
              padding: 10px 30px;
              display: block;
              width: 100%;
            }
          }

          th {
            background-color: #f8f6f4;
            width: 200px;

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

          td {
            background-color: #fff;
          }

          &+tr {

            th,
            td {
              border-top: 1px #816049 solid;

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

  /* よくある質問 タブ */
  .faq-tab {
    .faq-tab__button-area {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;

      .faq-tab__button {
        position: relative;
        background-color: #fff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        width: calc((100% - 20px) / 3);
        padding: 15px;
        font-size: clamp(12px, 11.029px + 0.259vw, 16px);
        text-align: center;
        transition: ease-in 0.2s;
        cursor: pointer;

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

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 100%;
          display: inline-block;
          border: 10px solid transparent;
          border-bottom: 10px solid var(--color-general);
          transform: translateX(-50%) rotate(180deg);
          opacity: 0;
          transition: ease-in 0.2s;
        }

        &:hover,
        &.active {
          background-color: var(--color-general);
          color: #fff;
          box-shadow: none;

          &::after {
            opacity: 1;
          }
        }
      }
    }
  }
}

.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;

  .faq__item {
    border-bottom: 1px #242424 dashed;
    padding-bottom: clamp(10px, 2.718px + 1.942vw, 40px);

    .faq__q {
      position: relative;
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      color: var(--color-general);
      margin: 0 0 15px;
      padding: 25px 0 0 50px;

      @media (max-width: 767px) {
        padding: 20px 30px 0 35px;
      }

      &::before {
        content: "Q";
        position: absolute;
        top: 0;
        left: 0;
        font-family: var(--font-min);
        font-size: clamp(30px, 27.573px + 0.647vw, 40px);
        color: var(--color-general);
        display: inline-block;
      }

      @media (max-width: 767px) {
        &::after {
          content: "";
          position: absolute;
          top: 20px;
          right: 0;
          background: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Cline x1='15.9922' y1='24.9678' x2='15.9922' y2='9.00003' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
          width: 22px;
          height: 22px;
          display: inline-block;
          transition: ease-in 0.2s;
        }
      }

      &.show {
        @media (max-width: 767px) {
          &::after {
            background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A");
          }
        }
      }
    }

    .faq__a {
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      margin: 0 0 0 50px;

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

    &+.faq__item {
      padding-top: clamp(10px, 7.573px + 0.647vw, 20px);
    }
  }
}

/*--------------------
保険診療 詳細
--------------------*/
.single-general {
  main {
    overflow: hidden;
  }

  .sec--about {
    background: url("../img/general/about-bg.webp") center center / cover no-repeat;

    @media (max-width: 767px) {
      background: url("../img/general/about-bg_sp.webp") center center / cover no-repeat;
    }
  }

  .sec--reason {
    background: linear-gradient(213deg, #F8F6F4 -0.85%, #FFF8EF 74.73%, #FCDCB5 100%);
  }

  /* 自由セクション */
  .sec--free {
    background-color: #FDF8F8;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 65.437px + 3.883vw, 140px);

    .free__inner {
      display: block;
    }

    .free__inner+.free__inner {
      margin-top: clamp(80px, 65.437px + 3.883vw, 140px);
    }

    /* 自由セクション WYSIWYG */
    .free-wysiwyg {
      h3 {
        background: linear-gradient(90deg, #D6822F 0%, #E1A972 100%);
      }

      h4 {
        color: var(--color-general);
        border-bottom: 1px var(--color-general) dashed;

        &::before {
          background-image: url("../img/symbol-general.svg");
        }
      }

      h5 {
        background-color: #FFF3E7;
        color: var(--color-general);
        border-left: 7px var(--color-general) solid;
      }

      h6 {
        &::before {
          background-color: var(--color-general);
        }
      }

      ul {
        li {
          &::before {
            color: var(--color-general);
          }
        }
      }

      ol {
        li {
          &::before {
            background-color: var(--color-general);
          }
        }
      }

      a {
        color: var(--color-general);
      }

      a.btn-link {
        box-shadow: 0 0 10px 0 #F6ECEC;
      }

      table {
        border: 1px var(--color-general) solid;

        th {
          border: 1px #F3DDC3 solid;
        }

        th {
          border: 1px #F3DDC3 solid;
          background-color: #FFF3E7;
          color: var(--color-general);
        }
      }
    }
  }
}

/*--------------------
美容施術/お悩み 詳細
--------------------*/
.single-beauty,
.single-worries {

  /* 概要 */
  .sec--about {
    .about__inner {
      .about__img {
        img {
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
          border-radius: 4px;
        }
      }

      .about__ttl {
        color: var(--color-beauty);
      }
    }
  }

  /* 当院での治療の特長 */
  .sec--reason {
    background: linear-gradient(213deg, #F7F5F5 -0.85%, #F9E7E7 74.73%, #F3D3CA 100%);

    .reason__list {
      .reason__item {
        .reason__num {
          color: var(--color-beauty);
        }

        .reason__ttl {
          color: var(--color-beauty);
        }
      }
    }
  }

  /* 施術の流れ */
  .sec--flow {
    .flow__lead {
      a {
        color: var(--color-beauty);
      }
    }
  }

  /* よくある質問 */
  .sec--faq {
    background:
      url(../img/beauty-single/faq-bg.webp) top center / cover no-repeat;
    overflow: hidden;

    .faq-tab {
      .faq-tab__button-area {
        .faq-tab__button {

          &.active,
          &:hover {
            background-color: var(--color-beauty);

            &::after {
              border-bottom-color: var(--color-beauty);
            }
          }
        }
      }
    }

    .faq__list {
      .faq__item {
        .faq__q {
          color: var(--color-beauty);

          &::before {
            color: var(--color-beauty);
          }
        }
      }
    }

    .faq__inner {
      .btn-more {
        background: linear-gradient(0deg,
            rgba(255, 249, 245, 1) 0%,
            rgba(255, 249, 245, 1) 70%,
            rgba(255, 255, 255, 0) 100%);
      }
    }
  }

  /* 監修医師 */
  .sec--doctor {
    .doctor__frame {
      .doctor__info-area {
        .doctor__info {
          .info-ttl {
            color: var(--color-beauty);
            border-bottom-color: var(--color-beauty);
          }

          .info-dl {
            dt {
              color: var(--color-beauty);
            }
          }
        }
      }
    }
  }
}

/*--------------------
美容施術 詳細
--------------------*/
.single-beauty {
  main {
    overflow: hidden;
  }

  .sec--about {
    background: url("../img/beauty-single/about-bg.webp") center top / cover no-repeat;
  }

  .method-list {
    .method-item {
      .ttl {
        color: var(--color-beauty);
        border-bottom-color: var(--color-beauty);
      }
    }
  }

  /* 特徴 */
  .features-wrap {
    background: url("../img/beauty/features-bg.webp") center left / cover no-repeat;

    .sec--features,
    .sec--features2 {
      background: none;
    }

    .sec--features2 {
      padding-top: 0;
    }
  }
}

/*--------------------
お悩み 詳細
--------------------*/
.single-worries {
  main {
    overflow: hidden;
  }

  .sec--about {
    background:
      url(../img/worries/about-bg.webp) top center / cover no-repeat,
      #f4d4cc;
  }

  /* 当院での治療の特徴 */
  .sec--reason {
    background: linear-gradient(45deg,
        rgba(243, 211, 202, 1) 0%,
        rgba(249, 231, 231, 1) 25%,
        rgba(247, 245, 245, 1) 100%);
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
    margin-top: 0;
    margin-bottom: 0;
  }
}

/*--------------------
下層ヘッダー
--------------------*/
.lower-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: end;
  gap: 5px;
  background: url("../img/about/page-ttl.webp") center center / cover no-repeat;
  height: clamp(250px, 165.049px + 22.654vw, 600px);
  padding-bottom: 5.21vw;

  @media (max-width: 767px) {
    background-image: url("../img/about/page-ttl_sp.webp");
    padding-bottom: 40px;
  }

  .lower-header__inner {
    .lower-header__en {
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(16px, 12.117px + 1.036vw, 32px);
      color: #fff;
      margin: 0;
    }

    .lower-header__ja {
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(30px, 23.689px + 1.683vw, 56px);
      color: #fff;
      margin: 0;
    }
  }
}

/*--------------------
お知らせ/ブログ
--------------------*/
.single-blog,
.post-type-archive-blog,
.tax-blogcat,
.tax-genre {
  .main-aside--wrapper {
    padding-top: clamp(40px, 25.437px + 3.883vw, 100px);
    gap: 5.21vw;

    main {
      .breadcrumb {
        width: 100%;
      }
    }
  }

  .lower-header {
    background-image: url("../img/blog/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/blog/page-ttl_sp.webp");
    }
  }
}

/*--------------------
お知らせ/ブログ 一覧
--------------------*/
.post-type-archive-blog,
.tax-blogcat,
.tax-genre {
  main {
    .aside-post {
      @media (max-width: 767px) {
        margin-bottom: 40px;
      }
    }

    .post-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 4.17vw 3.13vw;

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

      .post-item {
        width: calc((100% - 3.13vw) / 2);

        @media (max-width: 767px) {
          width: 100%;
          border-bottom: 1px rgba(158, 141, 133, 0.5) dashed;
          padding-bottom: 20px;
        }

        a {
          display: block;

          @media (max-width: 767px) {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 0 15px;
          }

          .post__eyecatch {
            aspect-ratio: 370 / 247;
            margin-bottom: 10px;
            border-radius: 4px;
            overflow: hidden;

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

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

          .post__date {
            display: block;
            color: #9e8d85;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            margin: 0 0 5px;

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

          .post__ttl {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            margin: 0;

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

          .category__icon {
            margin-top: clamp(10px, 7.573px + 0.647vw, 20px);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

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

            .icon-genre {
              background-color: #9e8d85;
              color: #fff;
              border: 1px #9e8d85 solid;
              padding: clamp(3px, 2.515px + 0.129vw, 5px) clamp(8px, 7.515px + 0.129vw, 10px);
              border-radius: 4px;
              font-size: clamp(12px, 11.515px + 0.129vw, 14px);
            }

            .icon-category {
              background-color: #fff;
              color: #9e8d85;
              border: 1px #9e8d85 solid;
              padding: clamp(3px, 2.515px + 0.129vw, 5px) clamp(8px, 7.515px + 0.129vw, 10px);
              border-radius: 4px;
              font-size: clamp(12px, 11.515px + 0.129vw, 14px);
            }
          }
        }
      }
    }
  }
}

/*--------------------
お知らせ/ブログ 詳細
--------------------*/
.single-blog {
  .post-header {
    margin-bottom: 40px;

    .post__date {
      display: block;
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      color: #9e8d85;
      margin: 0 0 10px;
    }

    .post-header__ttl {
      font-family: var(--font-min);
      font-weight: 500;
      font-size: clamp(22px, 19.573px + 0.647vw, 32px);
      margin: 0;
    }

    .category__icon {
      margin-top: clamp(10px, 7.573px + 0.647vw, 20px);
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

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

      .icon-genre {
        background-color: #9e8d85;
        color: #fff;
        border: 1px #9e8d85 solid;
        padding: clamp(3px, 2.515px + 0.129vw, 5px) clamp(8px, 7.515px + 0.129vw, 10px);
        border-radius: 4px;
        font-size: clamp(12px, 11.515px + 0.129vw, 14px);
      }

      .icon-category {
        background-color: #fff;
        color: #9e8d85;
        border: 1px #9e8d85 solid;
        padding: clamp(3px, 2.515px + 0.129vw, 5px) clamp(8px, 7.515px + 0.129vw, 10px);
        border-radius: 4px;
        font-size: clamp(12px, 11.515px + 0.129vw, 14px);
      }
    }
  }

  .post-main {
    .eyecatch {
      margin-bottom: 40px;
    }

    .wysiwyg-area {
      p {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        line-height: 1.7;

        &+h2,
        &+h3,
        &+h4 {
          margin-top: clamp(40px, 35.146px + 1.294vw, 60px);
        }
      }

      h2 {
        background-color: #f7f5f5;
        border-left: 3px var(--color-ttl) solid;
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(18px, 15.573px + 0.647vw, 28px);
        color: var(--color-ttl);
        padding: 15px 20px;
        margin: 0 0 20px;
      }

      h3 {
        border-bottom: 1px var(--color-ttl) solid;
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(18px, 15.573px + 0.647vw, 28px);
        color: var(--color-ttl);
        padding-bottom: 10px;
        margin: 0 0 20px;
      }

      h4 {
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(18px, 15.573px + 0.647vw, 28px);
        color: var(--color-ttl);
        margin: 0 0 20px;
      }

      ul,
      ol {
        padding-left: 20px;

        &>li {
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          line-height: 1.7;

          &+li {
            margin-top: 10px;
          }
        }
      }

      a {
        color: var(--color-general);
        text-decoration: underline;

        &:hover {
          opacity: 0.7;
        }
      }

      table {
        tbody {
          tr {

            th,
            td {
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);
              line-height: 1.7;
              border: 1px #9e8d85 solid;
              padding: 10px 15px;
            }

            th {
              background-color: #f3f0f0;
              color: var(--color-ttl);
              font-weight: normal;
            }
          }
        }
      }
    }
  }
}

/*--------------------
当院について
--------------------*/
.page-about {

  /* スタッフから見た先生の印象（吹き出し） */
  .doctor-profile__quote {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    position: relative;
    background: #fff;
    border-radius: 15px;
    margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-left: clamp(30px, 13.01px + 4.531vw, 100px);
    padding-right: clamp(30px, 13.01px + 4.531vw, 100px);
    padding-top: clamp(30px, 25.146px + 1.294vw, 50px);
    padding-bottom: clamp(30px, 25.146px + 1.294vw, 50px);
    box-shadow: 0 0 15px 0 #efe9e6;
    z-index: 1;

    &::before {
      content: "“";
      position: absolute;
      top: 10px;
      left: 14px;
      font-size: clamp(100px, 87.864px + 3.236vw, 150px);
      line-height: 1;
      color: #d6c8c2;
      font-family: var(--font-min);
      z-index: 2;
    }

    &::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: clamp(145px, 138.447px + 1.748vw, 172px);
      aspect-ratio: 1 / 1;
      background-image: url(../img/about/doctor-profile__quote_logo.webp);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      z-index: 2;
    }

    .quote-ttl {
      position: relative;
      z-index: 5;
      margin: 0 0 20px;
      font-size: clamp(18px, 16.544px + 0.388vw, 24px);
      color: var(--color-ttl);
      font-weight: 100;
      font-family: var(--font-min);
    }

    .quote-txt {
      position: relative;
      z-index: 5;
      display: inline;
      -webkit-box-decoration-break: clone;
      padding-bottom: 0.45em;
      line-height: 40px;
      background-image: linear-gradient(#d8c6b6, #d8c6b6);
      background-repeat: repeat-x;
      background-size: 100% 1px;
      background-position: 0 100%;
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    }
  }

  /* 経歴・所属 */
  .doctor-card__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    gap: 50px;
    max-width: 1500px;
    margin: 0 auto;

    .doctor-info-box {
      flex: 1;
      background: #ffffff;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding-bottom: 30px;

      .doctor-info-box__header {
        border-radius: 4px 4px 0 0;
        background: linear-gradient(90deg, #432815 0%, #83634c 100%);
        color: #ffffff;
        margin: 0;
        padding: 8px;
        text-align: center;
        font-size: clamp(20px, 17.573px + 0.647vw, 30px);
        font-family: var(--font-min);
        font-weight: 100;
        letter-spacing: 0.1em;
        margin-bottom: 30px;
      }

      .doctor-info-box__list,
      .doctor-info-box__summary,
      .doctor-info-box__description {
        margin: 0;
        padding-left: clamp(30px, 25.146px + 1.294vw, 50px);
        padding-right: clamp(15px, 12.573px + 0.647vw, 25px);
        margin-right: clamp(15px, 12.573px + 0.647vw, 25px);
        list-style: none;
        height: clamp(200px, 178.155px + 5.825vw, 290px);
        overflow-y: scroll !important;

        .doctor-info-box__item {
          list-style: none;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          line-height: 1.8;
          color: #333;

          .year {
            display: inline-block;
            margin-right: clamp(10px, 7.573px + 0.647vw, 20px);
            flex-shrink: 0;
            color: var(--color-ttl);
          }
        }

        .doctor-info-box__item+.doctor-info-box__item {
          margin-top: 10px;
        }

        &::-webkit-scrollbar {
          width: 2px;
        }

        &::-webkit-scrollbar-track {
          background: #d6c8c2;
        }

        &::-webkit-scrollbar-thumb {
          background: #432815;
          border-radius: 10px;
          border-right: 2px solid transparent;
          background-clip: padding-box;
        }

        /* Firefox用の設定（Safari以外でも表示を統一するため） */
        scrollbar-width: thin;
        scrollbar-color: #432815 #d6c8c2;

        /* ------------------------------------------- */
        @media (max-width: 767px) {
          .doctor-card__details {
            flex-direction: column;
          }
        }
      }

      .doctor-info-box__summary {
        .doctor-info-box__item {
          position: relative;
          padding-left: 14px;

          &::before {
            position: absolute;
            content: "・";
            left: 0;
          }
        }
      }

      .doctor-info-box__description {
        height: 100%;

        .doctor-info-box__item {
          .doctor-career-activity__item-ttl {
            position: relative;
            font-size: clamp(18px, 16.058px + 0.518vw, 26px);
            font-family: var(--font-min);
            font-weight: 400;
            color: var(--color-ttl);
            padding-left: clamp(12px, 11.029px + 0.259vw, 16px);
            margin-bottom: clamp(5px, 3.786px + 0.324vw, 10px);

            &::after {
              position: absolute;
              content: "";
              width: clamp(4px, 3.515px + 0.129vw, 6px);
              height: clamp(4px, 3.515px + 0.129vw, 6px);
              background-color: var(--color-ttl);
              top: 0.8em;
              left: 0;
            }
          }
        }

        .doctor-info-box__item+.doctor-info-box__item {
          margin-top: 30px;
        }
      }
    }

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

  /* 2. 日本語がアクティブな時、2枚目以降の日本語カードに上余白を付ける */
  .is-lang-ja .lang-ja~.lang-ja {
    margin-top: clamp(40px, 37.573px + 0.647vw, 50px);
  }

  /* 3. 英語がアクティブな時、2枚目以降の英語カードに上余白を付ける */
  .is-lang-en .lang-en~.lang-en {
    margin-top: clamp(40px, 37.573px + 0.647vw, 50px);
  }

  /* メディア / 医師紹介サイト */
  .profile-section__wrap {
    max-width: 1500px;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    display: flex;
    padding-left: clamp(30px, 25.146px + 1.294vw, 50px);
    padding-right: clamp(30px, 25.146px + 1.294vw, 50px);
    padding-top: clamp(30px, 27.573px + 0.647vw, 40px);
    padding-bottom: clamp(30px, 27.573px + 0.647vw, 40px);
    gap: clamp(30px, 13.01px + 4.531vw, 100px);
    margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);

    .media-section {
      max-width: 650px;
      width: 100%;

      .media-section__title {
        font-size: clamp(20px, 17.573px + 0.647vw, 30px);
        font-family: var(--font-min);
        color: var(--color-ttl);
        align-items: center;
        font-weight: 100;
        margin-bottom: 20px;
        display: flex;

        &::after {
          content: "";
          flex-grow: 1;
          height: 1px;
          background: var(--color-ttl);
          margin-left: 10px;
        }
      }

      .media-section__list {
        .media-section__item {
          list-style: none;
          position: relative;
          padding-left: 14px;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          margin: 0;
          line-height: 1.7;
          color: #242424;

          &::before {
            position: absolute;
            content: "・";
            left: 0;
          }
        }

        .media-section__item+.media-section__item {
          margin-top: 10px;
        }
      }
    }

    .link-section {
      max-width: 650px;
      width: 100%;

      .link-section__title {
        font-size: clamp(20px, 17.573px + 0.647vw, 30px);
        font-family: var(--font-min);
        color: var(--color-ttl);
        align-items: center;
        font-weight: 100;
        margin-bottom: 20px;
        display: flex;

        &::after {
          content: "";
          flex-grow: 1;
          height: 1px;
          background: var(--color-ttl);
          margin-left: 10px;
        }
      }

      .link-section__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;

        .link-section__item {
          img {
            box-shadow: 0 0 15px 0 #efe9e6;
            border-radius: 4px;
          }

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

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

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

      .link-section__item+.link-section__item {
        margin-top: 20px;
      }
    }
  }

  /* 当院の理念 */
  .sec--philosophy {
    background: url("../img/about/philosophy-bg.jpg") top center / cover no-repeat;
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

    .sec-ttl--bilingual-layer-medium {
      .en {
        color: rgba(158, 141, 133, 0.15);
        letter-spacing: -0.05em;
      }
    }

    .philosophy__lead-area {
      .philosophy__lead {
        font-family: var(--font-min);
        font-weight: 600;
        font-size: clamp(24px, 18.903px + 1.359vw, 45px);
        line-height: 1.4;
        color: var(--color-ttl);
        text-align: center;
        margin: 0;

        &+.philosophy__lead {
          margin-top: clamp(10px, 7.573px + 0.647vw, 20px);
        }
      }
    }

    .philosophy__txt {
      font-family: var(--font-min);
      font-weight: 500;
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      line-height: 1.7;
      text-align: center;
      margin: clamp(30px, 27.573px + 0.647vw, 40px) 0 0;
    }
  }

  /* 当院の診療方針 */
  .sec--policy {
    background-color: #f3f0f0;
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

    .sec-ttl--bilingual-layer-medium {
      .en {
        letter-spacing: -0.05em;
      }
    }

    .features__list {
      .features__item {
        display: grid;
        grid-template-rows: auto 1fr;
        column-gap: 2.6vw;
        max-width: 1710px;
        width: 95%;
        margin-left: auto;

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

        .features__img {
          max-width: 700px;
          width: 36.46vw;

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

          img {
            border-radius: 4px;
          }
        }

        .features__head {
          position: relative;
          border-bottom: 1px #9e8d85 solid;
          padding-bottom: 10px;
          margin-bottom: clamp(30px, 27.573px + 0.647vw, 40px);
          height: fit-content;

          &::after {
            content: "";
            position: absolute;
            bottom: -11.56vw;
            right: 0;
            background: url("../img/features_num-gradation-odd.webp") top right / cover no-repeat;
            height: 11.56vw;
            aspect-ratio: 400 / 222;
            display: inline-block;
          }

          @media (max-width: 767px) {
            &::after {
              bottom: -26.13vw;
              height: 26.13vw;
            }
          }

          .features__ttl {
            position: relative;
            z-index: 1;
            font-family: var(--font-min);
            font-weight: 500;
            font-size: clamp(20px, 13.204px + 1.812vw, 48px);
            color: var(--color-ttl);
            margin: 0;
          }

          .features__num {
            position: absolute;
            bottom: -10px;
            right: 0;
            font-family: var(--font-min);
            font-weight: 500;
            font-size: clamp(120px, 100.583px + 5.178vw, 200px);
            color: #fff;
            line-height: 1;

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

        .features__panel {
          position: relative;
          z-index: 2;
          padding-right: 10.94vw;

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

        &:nth-child(even) {
          grid-template-columns: 1fr 56%;

          .features__head {
            grid-column: 2;
            grid-row: 1;

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

          .features__panel {
            grid-column: 2;
            grid-row: 2;
          }

          .features__img {
            position: relative;
            grid-column: 1;
            grid-row: 1 / 3;

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

        &:nth-child(odd) {
          grid-template-columns: 56% 1fr;
          margin-left: inherit;
          margin-right: 5%;

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

          .features__head {
            padding-left: 11vw;

            @media (max-width: 767px) {
              margin-right: 5%;
              padding-left: 16vw;
            }

            &::after {
              right: inherit;
              left: 0;
              background: url("../img/features_num-gradation-even.webp") top left / cover no-repeat;
            }

            .features__num {
              right: inherit;
              left: 0;
            }
          }

          .features__panel {
            grid-column: 1;
            padding-right: 0;
            padding-left: 10.94vw;

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

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

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

        &+.features__item {
          margin-top: clamp(100px, 75.728px + 6.472vw, 200px);
        }

        &:nth-child(1) {
          .features__panel {
            .switching-frame__btn {
              margin-top: 50px;
            }
          }

          @media (max-width: 767px) {
            .features__head {
              order: 1;
            }

            .features__img {
              order: 3;
            }

            .features__panel {
              order: 2;
            }
          }
        }

        &:nth-child(3) {
          .alignment-clinic {
            background-color: #fff;
            border-radius: 4px;
            overflow: hidden;

            .alignment-clinic__ttl {
              font-family: var(--font-min);
              font-weight: 400;
              font-size: clamp(18px, 15.573px + 0.647vw, 28px);
              background-color: #9e8d85;
              color: #fff;
              padding: 10px;
              margin: 0;
              text-align: center;
            }

            .alignment-clinic__list {
              list-style: none;
              margin: 0;
              padding: clamp(30px, 27.573px + 0.647vw, 40px);
              display: grid;
              grid-template-rows: repeat(3, auto);
              grid-auto-flow: column;
              gap: 10px 30px;

              .alignment-clinic__item {
                position: relative;
                padding-left: 20px;

                &::after {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 9px;
                  width: clamp(6px, 5.515px + 0.129vw, 8px);
                  height: clamp(6px, 5.515px + 0.129vw, 8px);
                  display: inline-block;
                  background-color: var(--color-ttl);
                  border-radius: 2px;
                }

                @media (max-width: 767px) {
                  &::after {
                    top: 7px;
                  }
                }

                .clinic-name {
                  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                  color: var(--color-ttl);
                  margin: 0 0 5px;
                }

                .clinic-address {
                  font-size: clamp(12px, 11.272px + 0.194vw, 15px);
                  margin: 0;
                }
              }
            }
          }

          @media (max-width: 767px) {
            .features__head {
              order: 1;
            }

            .features__img {
              order: 3;
            }

            .features__panel {
              order: 2;
            }
          }
        }
      }
    }
  }

  /* 院長のご挨拶 */
  .sec--greeting {
    .greeting__head {
      background: url("../img/greeting-head.webp") bottom center / cover no-repeat;
      height: clamp(505px, 428.544px + 20.388vw, 820px);
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      position: relative;

      .sec-ttl--bilingual-layer-medium {
        margin-top: 0;
      }

      .copy__container {
        max-width: 1500px;
        width: 90%;

        .copy {
          margin: 100px 110px 0 0;
          position: absolute;
          right: 0;
          width: clamp(335px, 240.34px + 25.243vw, 725px);
          display: inline-block;
          text-align: left;
          font-size: clamp(20px, 13.932px + 1.618vw, 45px);
          color: #432815;
          font-family: var(--font-min);
          font-weight: 600;
          line-height: 1.7;
          text-decoration: underline;
          text-decoration-color: #9e8d85;
          text-decoration-thickness: 2px;
          text-underline-offset: 10px;
        }
      }

      @media (max-width: 767px) {
        background: url("../img/about_greeting-head_sp.webp") bottom center / cover no-repeat;

        .copy__container {
          .copy {
            right: 0;
            left: 0;
            margin: 0 auto;
            width: 90%;
            bottom: 70px;
            text-align: left;
            display: inline;
            text-decoration-thickness: 1px;
            text-underline-offset: 5px;
          }
        }
      }
    }

    /* ご挨拶本文 */
    .doctor-profile__inner {
      background-color: #f4f4f4;
      margin: 0 auto;
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

      .doctor-profile__greeting {
        max-width: 1500px;
        width: 90%;
        margin: 0 auto;
        margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);

        .text {
          margin: 0 auto;
          line-height: 32.4px;
        }

        .doctor-profile__sign {
          text-align: end;

          .doctor-profile__sign-role {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            font-family: var(--font-min);
            margin-right: 15px;
          }

          .doctor-profile__sign-name {
            font-size: clamp(22px, 20.058px + 0.518vw, 30px);
            font-family: var(--font-min);
          }

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

            .doctor-profile__sign-role {
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);
              font-family: var(--font-min);
              margin-right: 0px;
            }
          }
        }
      }

      /* ==================================================
      1. 言語切り替えロジック（表示・非表示）
      ※ここはネストさせず、独立して記述してください
      ================================================== */
      .doctor-career.is-lang-ja .lang-en {
        display: none !important;
      }

      .doctor-career.is-lang-en .lang-ja {
        display: none !important;
      }

      .doctor-career {
        max-width: 1500px;
        width: 90%;
        margin: 0 auto;
        margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);

        /* 言語切り替えタブ */
        .doctor-career__lang-switch {
          font-family: var(--font-min);
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          max-width: 167px;
          margin-left: auto;
          margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);
          padding: 5px 8px;
          background: #9e8d85;
          border-radius: 4px;

          .doctor-career__lang-btn {
            background: transparent;
            border: none;
            padding: 0;
            font-size: 15px;
            font-family: inherit;
            cursor: pointer;
            color: #ffffff;
            opacity: 0.5;
            transition:
              opacity 0.2s ease,
              color 0.2s ease;
          }

          .doctor-career__lang-btn--active {
            opacity: 1;
            font-weight: bold;
          }

          .doctor-career__lang-separator {
            color: #d5cac4;
            font-size: 15px;
            pointer-events: none;
            user-select: none;
          }
        }
      }
    }

    /* ボタン */
    .doctor-profile__btn-wrap {
      width: 100%;

      a {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}

/* 医師紹介 */
.sec--doctor {
  padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
  padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

  .doctor-list {
    max-width: 1500px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;

    .doctor-card {
      .doctor-card__main {
        display: flex;
        gap: clamp(20px, 12.718px + 1.942vw, 50px);
        margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);

        .doctor-card__image {
          max-width: 750px;
          margin: 0;

          img {
            width: 100%;
          }
        }

        .doctor-card__profile {
          max-width: 750px;

          .doctor-card__post {
            margin: 0;
            color: #9e8d85;
          }

          .doctor-card__name {
            margin: 0;
            font-size: clamp(24px, 22.544px + 0.388vw, 30px);
            font-family: var(--font-min);
            color: var(--color-ttl);
            font-weight: 100;
            margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);
          }
        }

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

          .doctor-card__profile {
            text-align: center;

            .doctor-card__text {
              .txt {
                text-align: start;
              }
            }
          }
        }
      }

      .doctor-card__details {
        .doctor-info-box {
          background-color: #F7F5F5;
        }
      }
    }

    .doctor-card+.doctor-card {
      padding-top: clamp(70px, 50.583px + 5.178vw, 150px);
    }
  }
}

/* 施設の紹介 */
.sec--facilities {
  background-color: #f7f5f5;
  padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
  padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

  .facilities__intro {
    background: url("../img/about/facilities_head-bg.webp") top left / 52vw no-repeat;
    max-width: 1500px;
    width: 90%;
    margin: 0 auto;
    padding-left: 45%;

    @media (max-width: 767px) {
      background: url("../img/about/facilities_head-bg_sp.webp") top left / contain no-repeat;
      width: 100%;
      margin-top: 50px;
      padding: 50% 5% 0;
    }

    .facilities__ttl {
      font-family: var(--font-min);
      font-weight: 500;
      font-size: clamp(22px, 16.417px + 1.489vw, 45px);
      color: var(--color-ttl);
      margin: 0 0 clamp(20px, 10.291px + 2.589vw, 60px);
    }
  }

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

    .floor-tab {
      display: flex;
      gap: 3.13vw;
      align-items: center;

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

      .floor-tab__area {
        display: flex;
        flex-direction: column;
        gap: 2.6vw;

        @media (max-width: 767px) {
          flex-direction: row;
          justify-content: center;
          gap: 15px;
          margin-bottom: 40px;
        }

        .floor-tab__button {
          width: clamp(130px, 115.437px + 3.883vw, 190px);
          height: clamp(55px, 44.078px + 2.913vw, 100px);
          text-align: center;
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(16px, 13.087px + 0.777vw, 28px);
          background-color: #fff;
          border-radius: 100px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          transition: ease-in 0.2s;

          small {
            font-family: var(--font-min);
            font-weight: 500;
            font-size: clamp(10px, 8.058px + 0.518vw, 18px);
            display: block;
            margin-bottom: -3px;
            transition: ease-in 0.2s;
          }

          &.button-general {
            small {
              color: var(--color-general);
            }

            &:hover,
            &.active {
              background-color: var(--color-general);
              color: #fff;

              small {
                color: #fff;
              }
            }
          }

          &.button-beauty {
            small {
              color: var(--color-beauty);
            }

            &:hover,
            &.active {
              background-color: var(--color-beauty);
              color: #fff;

              small {
                color: #fff;
              }
            }
          }
        }
      }

      .floor-tab__panel-area {
        width: 100%;

        @media (max-width: 767px) {
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
        }
      }
      
      .floor-map--1f,
      .floor-map--2f {
        position: relative;
        width: 100%;

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

        img {
          display: block;
          width: 100%;
          height: auto;
        }

        .map-pin {
          position: absolute;
          width: clamp(40px, 32.718px + 1.942vw, 70px);
          height: clamp(40px, 32.718px + 1.942vw, 70px);
          animation: mapPinBounce 1.8s ease-in-out infinite;

          &:hover {
            animation-duration: 0.65s;

            .map-pin__circle {
              fill: #432815;
            }

            .map-pin__mark {
              fill: #fff;
            }
          }
        }

        .map-pin__link {
          padding: 0;
          border: none;
          background: transparent;
          cursor: pointer;
          appearance: none;
        }

        .map-pin__link,
        .map-pin__icon,
        svg {
          display: block;
          width: 100%;
          height: 100%;
        }

        .map-pin__circle {
          fill: #fff;
          transition: fill 0.3s ease;
        }

        .map-pin__mark {
          fill: #432815;
          transition: fill 0.3s ease;
        }

        /* 1階 */
        /* 診察室 */
        .map-pin--consultation-room {
          top: 35.5%;
          left: 41%;
        }

        /* 処置室 */
        .map-pin--treatment-room {
          top: 14%;
          left: 48.5%;
        }

        /* 施術室 */
        .map-pin--procedure-room {
          top: 31%;
          left: 70%;
        }

        /* 手術室 */
        .map-pin--surgery-room {
          top: 23%;
          left: 73%;
        }

        /* 美容施術待合室 */
        .map-pin--beauty-waiting-1froom {
          top: 32%;
          left: 82.4%;
        }

        /* 受付・会計 */
        .map-pin--reception-payment {
          top: 53%;
          left: 64.5%;
        }

        /* 自動精算機 */
        .map-pin--payment-machine {
          top: 74%;
          left: 42%;
        }
        
        /* 会計案内モニター */
        .map-pin--payment-monitor {
          top: 56.5%;
          left: 45.5%;
        }

        /* 診察案内モニター  */
        .map-pin--consultation-monitor {
          top: 45%;
          left: 30%;
        }

        /* 待合席 */
        .map-pin--waiting-seats {
          top: 56%;
          left: 29.6%;
        }

        /* 2階 */
        /* 脱毛施術室 */
        .map-pin--hair-removal-room {
          top: 31%;
          left: 20.5%;
        }

        /* 施術室 */
        .map-pin--beauty-treatment-room {
          top: 44%;
          left: 35.5%;
        }

        /* ロッカールーム */
        .map-pin--locker-room {
          top: 32%;
          left: 63%;
        }

        /* パウダールーム */
        .map-pin--powder-room {
          top: 23%;
          left: 70.5%;
        }

        /* 美容施術待合室 */
        .map-pin--beauty-waiting-room {
          top: 31%;
          left: 82%;
        }

        /* 受付 */
        .map-pin--beauty-reception {
          top: 44%;
          left: 62.5%;
        }

        /* クレンジングルーム */
        .map-pin--cleansing-room {
          top: 57.5%;
          left: 50.5%;
        }

        /* 美容施術待合室 2つ目 */
        .map-pin--beauty-waiting-room-sub {
          top: 63%;
          left: 57%;
        }
      }
    }
  }
}

@keyframes mapPinBounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

/* スライダー */
.sec--loop-slider {
  overflow: hidden;

  .loop-slider {
    display: flex;
    width: max-content;
    animation: slideAnim 60s linear infinite;

    .loop-item {
      flex-shrink: 0;
      height: 13.54vw;

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

      img {
        height: 100%;
      }
    }
  }
}

/* 主な機器紹介 */
.sec--equipment {
  padding-top: clamp(40px, 30.291px + 2.589vw, 80px);

  .equipment__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5.21vw 2.6vw;

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

    .equipment__item {
      width: calc((100% - 7.8vw) / 4);
      cursor: pointer;
      transition: ease-in 0.2s;

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

      .equipment__img {
        background-color: #fff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 1;

        .modal-icon {
          position: absolute;
          bottom: 10px;
          right: 10px;
          border-radius: 100px;
          width: 35px;
          height: 35px;
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
          background:
            url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2456_1323)'%3E%3Cpath d='M8.2432 15.6475C12.3322 15.6475 15.647 12.3327 15.647 8.24369C15.647 4.15466 12.3322 0.839844 8.2432 0.839844C4.15417 0.839844 0.839355 4.15466 0.839355 8.24369C0.839355 12.3327 4.15417 15.6475 8.2432 15.6475Z' stroke='%23553D2D' stroke-linecap='round'/%3E%3Cpath d='M4.39404 8.11523H11.7979' stroke='%23553D2D' stroke-linecap='round'/%3E%3Cpath d='M8.09619 4.39038V11.7942' stroke='%23553D2D' stroke-linecap='round'/%3E%3C/g%3E%3Cpath d='M13.6284 13.6284L17.6669 17.6669' stroke='%23553D2D' stroke-linecap='round'/%3E%3Cdefs%3E%3CclipPath id='clip0_2456_1323'%3E%3Crect width='16.1538' height='16.1538' fill='white' transform='translate(0.166504 0.166748)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") center center / 17px no-repeat,
            #fff;

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

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

      .equipment__label {
        font-family: var(--font-min);
        font-size: clamp(16px, 14.544px + 0.388vw, 22px);
        margin-top: clamp(15px, 13.786px + 0.324vw, 20px);
        margin-bottom: clamp(5px, 3.786px + 0.324vw, 10px);
        color: var(--color-ttl);
      }

      .equipment__txt {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        margin: 0;
        line-height: 1.7;
        color: #242424;
      }

      &:hover {
        opacity: 0.7;
      }
    }
  }

  .btn-more {
    margin-top: clamp(80px, 75.146px + 1.294vw, 100px);

    a {
      margin: auto;
    }
  }
}

/* モーダル */
.common-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 99999;

  &.active {
    display: flex;
  }

  .common-modal__content {
    position: relative;
    background: #f7f5f5;
    border: 1px #9e8d85 solid;
    margin: 7vh auto 0;
    padding: 70px 31px;
    border-radius: 4px;
    max-width: 1200px;
    width: 90%;
    text-align: center;
    animation: fadeIn 0.3s ease;

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

    .common-modal__content-inner {
      overflow-y: auto;
      max-height: 65vh;
      padding: 0 7.29vw;

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

      &::-webkit-scrollbar {
        width: 2px;
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: var(--color-ttl);
        width: 2px;
        border-radius: 10px;
      }

      &::-webkit-scrollbar-track {
        background-color: rgba(158, 141, 133, 0.5);
      }

      .common-modal__label {
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(18px, 15.573px + 0.647vw, 28px);
        text-align: left;
        color: var(--color-ttl);
        margin: 0 0 clamp(20px, 15.146px + 1.294vw, 40px);
        padding-bottom: 10px;
        border-bottom: 1px var(--color-ttl) dashed;
      }

      .common-modal__img {
        width: 250px;
        border-radius: 4px;
        margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);

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

      .common-modal__desc {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        line-height: 1.7;
        margin: 0;
        text-align: left;
      }
    }
  }

  @keyframes fadeIn {
    from {
      transform: scale(0.9);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .common-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    line-height: 0;
    aspect-ratio: 1;
    border-radius: 100px;
    border: none;
    background: var(--color-ttl);
    color: #fff;
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    @media (max-width: 767px) {
      font-size: 15px;
      width: 30px;
      height: 30px;
    }
  }
}

/*--------------------
初めての方へ
--------------------*/
.page-visit {
  .lower-header {
    background-image: url("../img/visit/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/visit/page-ttl_sp.webp");
    }
  }

  .breadcrumb {
    margin-top: 0;
    padding-top: 20px;
    background-color: #f7f5f5;
  }

  main.style-general {
    background: url("../img/visit/flow-general-bg.webp") center center / cover no-repeat;
  }

  main.style-beauty {
    background: url("../img/visit/flow-beauty-bg.webp") center center / cover no-repeat;
  }

  .sec--flow {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: 0;

    .flow__lead {
      margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);
    }

    .flow__list {
      list-style: none;
      margin: 0;
      padding: 0;

      .flow__item {
        display: grid;
        grid-template-columns: 80px 1fr;
        column-gap: 20px;

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

        .flow__num {
          position: relative;
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(30px, 25.146px + 1.294vw, 50px);
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 0;
          grid-column: 1;

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

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: url("../img/symbol-general.svg") center center / contain no-repeat;
            width: 80px;
            height: 80px;
            display: inline-block;
            opacity: 0.15;
            z-index: -1;
          }

          @media (max-width: 767px) {
            &::before {
              width: 50px;
              height: 50px;
            }
          }
        }

        .flow__ttl {
          font-family: var(--font-min);
          font-weight: 400;
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          color: var(--color-general);
          margin: 0;
          align-self: center;
          grid-column: 2;
        }

        .flow__contents {
          grid-column: 2;
          position: relative;
          padding-top: 15px;
          padding-bottom: 70px;

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

          &::before {
            content: "";
            position: absolute;
            left: -60px;
            top: 10px;
            width: 1px;
            height: calc(100% - 10px);
            background-color: rgba(214, 130, 47, 0.15);
            display: block;
          }

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

        &.flow1 {
          .reservation {
            display: flex;
            gap: 20px;
            margin-top: 20px;

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

            .reservation__box {
              background-color: #f7f5f5;
              border-radius: 4px;
              overflow: hidden;
              display: flex;
              flex-direction: column;

              .reservation__ttl {
                font-family: var(--font-min);
                font-weight: 400;
                font-size: clamp(18px, 16.544px + 0.388vw, 24px);
                text-align: center;
                color: var(--color-ttl);
                margin: 20px;
                padding-bottom: 10px;
                border-bottom: 1px rgba(67, 40, 21, 0.2) solid;

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

              .list-square {
                margin: 0 40px 20px;

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

              .reservation__btn {
                margin-top: auto;

                a {
                  position: relative;
                  display: block;
                  background: linear-gradient(90deg,
                      rgba(225, 169, 114, 1) 0%,
                      rgba(214, 130, 47, 1) 100%);
                  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                  color: #fff;
                  text-align: center;
                  padding: 10px;

                  &::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    transform: translateY(-50%);
                    background: url("data:image/svg+xml,%3Csvg width='29' height='7' viewBox='0 0 29 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H27.5L22.2753 1' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
                    width: 27px;
                    height: 6px;
                  }

                  &:hover {
                    filter: brightness(1.1);
                  }
                }
              }

              &.box-web {
                width: 260px;

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

                .web-txt {
                  text-align: center;
                  margin-bottom: 15px;
                }
              }

              &.box-tel {
                width: 260px;
                margin-top: 40px;

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

                .tel-txt {
                  text-align: center;
                  margin-bottom: 50px;

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

          .list-notes {
            margin-top: 20px;

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

            &>li {
              color: var(--color-ttl);
            }
          }

          .banner-line {
            margin-top: clamp(30px, 27.573px + 0.647vw, 40px);

            a {
              img {
                border-radius: 4px;
                box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
              }

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }

        &.flow2 {
          .list-dot {
            margin: 10px 0 20px;
          }

          .information-table--area {
            .notes {
              text-align: right;
              padding-left: 0;

              &::before {
                display: none;
              }
            }
          }
        }

        &.img-flex {
          .flow__contents {
            display: flex;
            gap: 2.6vw;

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

            .img {
              width: 40%;
              flex-shrink: 0;
              margin-left: auto;

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

              img {
                border-radius: 4px;
              }
            }
          }

          &+.flow__item {
            margin-top: 10px;

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

          &:last-child {
            .flow__contents {
              padding-bottom: 0;

              &::before {
                display: none;
              }
            }
          }
        }
      }
    }

    /* お支払い方法 */
    .payment {
      background-color: #fff;
      border-radius: 4px;
      overflow: hidden;
      margin-top: clamp(70px, 62.718px + 1.942vw, 100px);

      .payment__ttl {
        background-color: var(--color-ttl);
        font-family: var(--font-min);
        font-weight: 400;
        font-size: clamp(18px, 15.573px + 0.647vw, 28px);
        color: #fff;
        text-align: center;
        margin: 0;
        padding: 10px;
      }

      .payment__contents {
        padding: 40px 60px;
        background-color: #f7f5f5;

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

        .payment__txt {
          margin-bottom: 20px;
        }

        .payment__img {
          max-width: 650px;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          @media (max-width: 767px) {
            justify-content: center;
            gap: 15px;
          }

          img {
            width: 100px;

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

    /* 持ち物 */
    .belongings {
      margin-top: clamp(80px, 75.146px + 1.294vw, 100px);
      padding-bottom: 70px;
      background: linear-gradient(0deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 255, 255, 1) 70%,
          rgba(255, 255, 255, 0) 100%);

      .sec-ttl--bilingual-layer-medium {
        .en {
          letter-spacing: -3px;
        }
      }

      .belongings__list {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        max-width: 690px;
        width: 100%;

        @media (max-width: 767px) {
          justify-content: flex-start;
          gap: 15px;
        }

        .belongings__item {
          width: 210px;
          height: 210px;
          background-color: #fff;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          box-shadow: 0px 0px 13px -3px rgba(0, 0, 0, 0.1);
          padding: 20px;
          border: 1px rgba(158, 141, 133, 0.3) solid;

          @media (max-width: 767px) {
            width: calc((100% - 15px) / 2);
            height: auto;
            aspect-ratio: 1;
            padding: 15px;
          }

          .belongings__img {
            margin-bottom: 15px;
            text-align: center;

            img {
              width: 90%;

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

          .belongings__ttl {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            color: var(--color-general);
            margin: 0;
          }

          .belongings__txt {
            font-size: clamp(10px, 9.029px + 0.259vw, 14px);
            margin: 0;
          }
        }
      }
    }

    .flow__tab {
      .flow__tab--button-area {
        display: flex;
        width: 100%;

        .flow__tab--button {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          width: 50%;
          text-align: center;
          color: #9e8d85;
          padding-bottom: 15px;
          border-bottom: 1px #9e8d85 solid;
          transition: ease-in 0.2s;
          cursor: pointer;
          font-family: var(--font-min);
          font-size: clamp(18px, 15.573px + 0.647vw, 28px);
          line-height: 1.4;

          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 100%;
            display: inline-block;
            border: 15px solid transparent;
            border-bottom: 15px solid var(--color-general);
            transform: translateX(-50%) rotate(180deg);
            opacity: 0;
            transition: ease-in 0.2s;
          }

          @media (max-width: 767px) {
            &::after {
              bottom: -16px;
              border: 20px solid transparent;
              border-bottom: 9px solid var(--color-general);
            }
          }
        }

        .button-general.active,
        .button-general:hover {
          color: var(--color-general);
          border-bottom-color: var(--color-general);
          border-bottom-width: 3px;

          &::after {
            opacity: 1;
            border-bottom-color: var(--color-general);
          }
        }

        .button-beauty.active,
        .button-beauty:hover {
          color: var(--color-beauty);
          border-bottom-color: var(--color-beauty);
          border-bottom-width: 3px;

          &::after {
            opacity: 1;
            border-bottom-color: var(--color-beauty);
          }
        }
      }

      .flow__tab-panel-area {
        background-color: #fff;
        max-width: 1200px;
        width: 90%;
        margin: 0 auto;
        padding: clamp(30px, 22.718px + 1.942vw, 60px) clamp(20px, -9.126px + 7.767vw, 140px);
        border-radius: 4px;

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

      /* 保険診療をご希望の方 */
      .panel-general {}

      /* 美容（自費）診療をご希望の方 */
      .panel-beauty {
        .reservation-treatment {
          background-color: #f7f5f5;
          border-radius: 4px;
          margin-top: 40px;
          padding: 40px 60px;

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

          .reservation-treatment__inner {
            .reservation-treatment__ttl {
              font-size: clamp(18px, 17.029px + 0.259vw, 22px);
              color: var(--color-beauty);
              padding-bottom: 10px;
              margin: 0 0 20px;
              border-bottom: 1px var(--color-beauty) dashed;
            }

            .reservation-treatment__list {
              list-style: none;
              margin: 0;
              padding: 0;
              display: flex;
              flex-wrap: wrap;
              gap: 10px;

              .reservation-treatment__item {
                border: 1px #e1caca solid;
                border-radius: 4px;
                padding: 0 13px;
                font-size: clamp(14px, 13.029px + 0.259vw, 18px);
              }
            }

            .reservation-treatment__list-notes {
              margin: 10px 0 0;
              text-align: right;
              font-size: clamp(10px, 9.029px + 0.259vw, 14px);

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

            &+.reservation-treatment__inner {
              margin-top: 20px;
            }
          }
        }

        /* 要予約・予約不要タブ */
        .guide-beauty-tab {
          margin-top: clamp(70px, 62.718px + 1.942vw, 100px);

          .guide-beauty-tab__button-area {
            display: flex;
            gap: 40px;
            margin-bottom: clamp(30px, 22.718px + 1.942vw, 60px);

            .guide-beauty-tab__button {
              font-size: clamp(16px, 14.544px + 0.388vw, 22px);
              line-height: 1.2;
              position: relative;
              background-color: #e79b9b;
              width: calc((100% - 40px) / 2);
              color: #fff;
              text-align: center;
              padding: clamp(10px, 8.786px + 0.324vw, 15px);
              border-radius: 4px;

              .guide-beauty-tab_sub {
                font-size: clamp(10px, 7.087px + 0.777vw, 22px);
              }

              &::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 100%;
                display: inline-block;
                border: 15px solid transparent;
                border-bottom: 15px solid #d84b4b;
                transform: translateX(-50%) rotate(180deg);
                opacity: 0;
                transition: ease-in 0.2s;
              }

              &.active,
              &:hover {
                background-color: #d84b4b;

                &::after {
                  opacity: 1;
                }
              }
              
            }
            
            @media (max-width: 768px) {
              gap: 20px;

              .guide-beauty-tab__button {
                width: calc((100% - 20px) / 2);
              }
            }
          }

          /* 予約不要パネル */
          .panel-no-reservation {
            .belongings {
              .belongings__list {
                max-width: 930px;
              }
            }
          }
        }

        /* 流れ */
        .flow__item {
          .flow__num {
            &::before {
              background-image: url("../img/symbol-beauty.svg");
            }
          }

          .flow__ttl {
            color: var(--color-beauty);
          }

          .flow__contents {
            &::before {
              background-color: rgba(198, 44, 43, 0.15);
            }
          }

          .reservation {
            .reservation__box {
              .reservation__btn {
                a {
                  background: linear-gradient(90deg,
                      rgba(198, 44, 43, 1) 0%,
                      rgba(228, 129, 128, 1) 100%);
                }
              }
            }
          }
        }

        /* 持ち物 */
        .belongings {
          .belongings__list {
            .belongings__item {
              .belongings__ttl {
                color: var(--color-beauty);
              }
            }
          }
        }
      }
    }
  }
}

/*--------------------
sidebar-leftを持つページ
--------------------*/
.has-sidebar-left {
  header {
    .header-inner {
      width: calc(100% - 300px);

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

  &>.lower-header {
    display: none;

    @media (max-width: 1000px) {
      display: flex;
    }
  }

  main {
    &>.lower-header {
      display: flex;

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

  .main-aside--wrapper {
    @media (max-width: 1000px) {
      flex-direction: column;
    }
  }
}

/*--------------------
症例 一覧
--------------------*/
.post-type-archive-case {

  /* サイドバー */
  .aside-left {
    @media (max-width: 1000px) {
      position: static;
      opacity: 1;
      transform: none;
      pointer-events: inherit;
      background: #f7f5f5;
      box-shadow: none;
      border: none;
      width: 100%;
      max-height: inherit;
      margin: 0 auto;
      padding: 60px 5%;
      z-index: 1;
    }

    .aside__page-ttl {
      margin-bottom: 30px;
      color: var(--color-ttl);

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

  .lower-header {
    background-image: url("../img/case/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/case/page-ttl_sp.webp");
    }
  }

  .aside-left {
    .case-searchform {
      .search-box {
        margin: 0;
        border-bottom: 1px #e48180 dashed;

        dt {
          font-size: clamp(14px, 13.515px + 0.129vw, 16px);
          color: var(--color-beauty);
          padding: 20px 0;
          position: relative;
          cursor: pointer;

          &::after {
            content: "";
            position: absolute;
            top: 20px;
            right: 0;
            background: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Cline x1='15.9922' y1='24.9678' x2='15.9922' y2='9.00003' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
            width: 20px;
            height: 20px;
            display: inline-block;
            transition: ease-in 0.2s;
          }

          &.show {
            &::after {
              background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A");
            }
          }
        }

        dd {
          font-size: clamp(14px, 13.515px + 0.129vw, 16px);
          margin: 0;
          padding-bottom: 20px;

          .dd-inner {
            display: grid;
            grid-template-columns: repeat(3, calc((100% - 40px) / 3));
            gap: 10px 20px;

            &:has(select) {
              grid-template-columns: 1fr;
            }

            select {
              appearance: none;
              /* Chrome, Safari, Edge */
              -moz-appearance: none;
              /* Firefox */
              -webkit-appearance: none;
              width: 100%;
              border-radius: 4px;
              border: none;
              padding: 5px 10px;
              color: #242424;
              background: #f7f5f5;
              font-size: clamp(14px, 13.515px + 0.129vw, 16px);
              font-weight: 400;
              background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.75L7.25 6.75L13.75 0.75' stroke='%23432815' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
              background-size: 13px;
              background-repeat: no-repeat;
              background-position: center right 10px;

              @media (max-width: 1000px) {
                background-color: #fff;
              }

              &:focus-visible {
                outline: none;
              }

              &:focus {
                outline: none;
                border-color: #666;
              }

              option {
                background: #fff;
              }

              option:first-child {
                color: #a2998f;
              }
            }

            input[type="checkbox"] {
              position: relative;
              width: 12px;
              height: 12px;
              border: 1px #9e8d85 solid;
              background-color: #fff;
              vertical-align: -1px;
              border-radius: 4px;
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
            }

            input[type="checkbox"]:checked::before {
              position: absolute;
              top: 1px;
              left: 3px;
              transform: rotate(50deg);
              width: 5px;
              height: 8px;
              border-right: 2px solid var(--color-ttl);
              border-bottom: 2px solid var(--color-ttl);
              content: "";
            }

            label {}
          }

          &.checkbox-worries {
            .dd-inner {
              display: flex;
              flex-wrap: wrap;
              gap: 10px 20px;
            }
          }

          &+dt {
            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 1px;
              border-bottom: 1px #e48180 dashed;
              display: block;
            }
          }
        }
      }

      .submit {
        position: relative;
        font-family: var(--font-min);
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        width: 100%;
        background-color: var(--color-ttl);
        color: #fff;
        margin-top: 40px;
        padding: 12px 40px;
        display: block;
        border: none;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        transition: ease-in 0.2s;

        @media (max-width: 1000px) {
          width: 275px;
          margin: 40px auto 0;
        }

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          background: url("data:image/svg+xml,%3Csvg width='26' height='6' viewBox='0 0 26 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H24L20 1' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
          width: 24px;
          height: 5px;
          display: inline-block;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  /* 注目の症例 */
  .sec--featured-case {
    background: url("../img/case/featured-case-bg.webp") center center / cover no-repeat;
    padding-top: 60px;
    padding-bottom: clamp(60px, 45.437px + 3.883vw, 120px);

    .case__wrapper {
      .case__list {
        .case__item {
          background-color: #fff;
          border: 1px var(--color-beauty) solid;
          padding: clamp(30px, 22.718px + 1.942vw, 60px) clamp(20px, 12.718px + 1.942vw, 50px);
        }
      }
    }

    .swiper-button__wrap {
      position: relative;
      height: 40px;
      width: 300px;
      margin-left: auto;
      margin-top: 30px;
      width: 100%;

      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        background-color: var(--color-beauty);
        width: 40px;
        height: 40px;
        border-radius: 100px;
        top: 50%;

        &::after {
          color: #fff;
          font-size: clamp(14px, 13.515px + 0.129vw, 16px);
          font-weight: 500;
        }
      }

      .swiper-button-prev {
        left: inherit;
        right: 60px;
      }

      .swiper-button-next {
        right: 0;
        left: inherit;
      }

      .swiper-pagination {
        display: flex;
        width: 50%;

        .swiper-pagination-bullet {
          opacity: 1;
          background: #cbc4c5;
          width: 12px;
          height: 12px;
          margin: 0 7px;
        }

        .swiper-pagination-bullet-active {
          background: var(--color-beauty);
        }
      }
    }
  }

  /* 新着の症例 */
  .sec--case {
    padding-top: 60px;

    .search-results__count {
      margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);

      .search-results__txt {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        text-align: center;
        margin: 0;

        strong {
          font-family: var(--font-min);
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          color: var(--color-beauty);
        }
      }
    }

    .case__wrapper {
      .case__list {
        .case__item {
          .case__detail {
            .case__detail-list {
              margin: 20px 0 0;

              dt {
                font-size: clamp(14px, 13.515px + 0.129vw, 16px);
              }

              dd {
                font-size: clamp(14px, 13.515px + 0.129vw, 16px);
              }
            }
          }

          &+.case__item {
            margin-top: clamp(80px, 70.291px + 2.589vw, 120px);
          }
        }
      }
    }
  }
}

/* 症例リスト */
.case-main {
  .case__ttl {
    font-family: var(--font-min);
    font-weight: 400;
    font-size: clamp(22px, 20.544px + 0.388vw, 28px);
    color: var(--color-beauty);
    padding-bottom: clamp(8px, 7.515px + 0.129vw, 10px);
    margin: 0 0 20px;
    border-bottom: 1px var(--color-general) dashed;
  }

  .case__photo-area {
    display: flex;
    gap: 1.56vw;

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

    .caption {
      font-family: var(--font-min);
      font-weight: 500;
      font-size: clamp(14px, 13.515px + 0.129vw, 16px);
      text-align: center;
      margin: 5px 0 0;
    }

    .case__photo {
      .img {
        aspect-ratio: 50 / 75;

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

    &.photo1 {
      justify-content: center;

      .img {
        aspect-ratio: inherit;
      }
    }

    &.photo2 {
      justify-content: center;

      .case__photo {
        width: calc((100% - 3.12vw) / 3);

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

    &.photo3 {
      .case__photo {
        width: calc((100% - 3.12vw) / 3);

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

  .case__detail {
    .case__detail-list {
      margin: 20px 0 0;

      dt {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        color: var(--color-beauty);
        padding-top: 20px;
        margin-bottom: 5px;
      }

      dd {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        margin: 0;
        padding-bottom: 20px;
        border-bottom: 1px #f2efec solid;

        .price-detail {
          margin: 10px 0 0;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        }
      }
    }
  }

  .btn-more {
    margin-top: clamp(20px, 15.146px + 1.294vw, 40px);

    a {
      margin: auto;

      @media (max-width: 767px) {
        min-width: auto;
        width: 80%;
      }
    }
  }
}

/*--------------------
症例 詳細
--------------------*/
.single-case {
  main {
    background: url("../img/case/single-main-bg.webp") center center / cover no-repeat;
  }

  .lower-header {
    background-image: url("../img/case/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/case/page-ttl_sp.webp");
    }
  }

  .breadcrumb {
    margin-bottom: 0;
    padding-bottom: 20px;
  }

  .case__viewer {
    position: relative;
    overflow: hidden;
    min-height: 1px;

    .case__photo-area {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;

      &.show {
        opacity: 1;
        position: relative;
        /* stacking 正常化 */
        pointer-events: auto;
      }
    }
  }

  .pose__thumbs {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: clamp(20px, 15.146px + 1.294vw, 40px);

    .pose-thumb {
      width: 50px;
      opacity: 0.6;
      transition:
        opacity 0.2s ease,
        transform 0.2s ease;
      text-align: center;
      user-select: none;
      aspect-ratio: 50 / 75;

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

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

      &.active,
      &:hover {
        opacity: 1;
      }
    }
  }

  .sec--case-main {
    padding-top: clamp(80px, 75.146px + 1.294vw, 100px);

    .case-main {
      .case__detail {
        .case__detail-list {
          dd {
            border-bottom-color: rgba(198, 44, 43, 0.2);
          }
        }

        .case__comment {
          border-radius: 4px;
          overflow: hidden;
          background-color: #fff;
          margin-top: clamp(40px, 35.146px + 1.294vw, 60px);

          .case__comment-ttl {
            background: linear-gradient(90deg,
                rgba(228, 129, 128, 1) 0%,
                rgba(228, 129, 128, 1) 10%,
                rgba(239, 179, 172, 1) 100%);
            color: #fff;
            margin: 0;
            padding: 6px;
            font-family: var(--font-min);
            font-size: clamp(18px, 15.573px + 0.647vw, 28px);
            text-align: center;
          }

          .case__comment-txt {
            margin: 0;
            padding: clamp(20px, 15.146px + 1.294vw, 40px);
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            line-height: 1.7;
          }
        }
      }
    }
  }

  .sec--case-info {
    .case-info__inner {
      margin-top: clamp(80px, 63.01px + 4.531vw, 150px);

      .case-info__ttl-area {
        position: relative;
        margin-bottom: 20px;

        .case-info__ttl {
          position: relative;
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(18px, 15.573px + 0.647vw, 28px);
          margin: 0;
          padding: 0 210px 0 40px;

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

          &::before {
            content: "";
            position: absolute;
            top: 8px;
            left: 0;
            background: url("data:image/svg+xml,%3Csvg width='29' height='23' viewBox='0 0 29 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9486 21.5082C15.1568 22.6943 13.4135 22.6943 12.6217 21.5082L0.34009 3.11043C-0.547117 1.7814 0.405551 -5.54143e-07 2.0035 -4.32667e-07L26.5668 1.43463e-06C28.1648 1.55611e-06 29.1174 1.7814 28.2302 3.11043L15.9486 21.5082Z' fill='%23C62C2B'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
            width: clamp(15px, 12.573px + 0.647vw, 25px);
            height: clamp(13px, 11.301px + 0.453vw, 20px);
            display: inline-block;
          }
        }

        .case-info__btn {
          position: absolute;
          right: 0;
          top: 0;

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

          a {
            position: relative;
            display: block;
            font-size: clamp(14px, 13.515px + 0.129vw, 16px);
            color: var(--color-ttl);
            width: fit-content;
            padding: 5px 40px;
            border: 1px var(--color-ttl) solid;
            border-radius: 100px;

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

            &::after {
              content: "";
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translateY(-50%);
              width: clamp(4px, 3.272px + 0.194vw, 7px);
              height: clamp(8px, 7.029px + 0.259vw, 12px);
              background: url("data:image/svg+xml,%3Csvg width='8' height='13' viewBox='0 0 8 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.328125 0.378906L7.22813 6.37891L0.328125 12.3789' stroke='%23432815'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
              display: inline-block;
            }

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

      .case-info__table {
        tbody {
          tr {
            th {
              background-color: rgba(198, 44, 43, 0.05);
              border-right: 1px rgba(198, 44, 43, 0.2) solid;
              border-bottom: 1px rgba(198, 44, 43, 0.2) solid;
              width: 200px;
              padding: 20px;
              color: var(--color-beauty);
              font-weight: normal;

              @media (max-width: 767px) {
                width: 100%;
                display: block;
                border-right: none;
                padding: 5px;
              }
            }

            td {
              background-color: #fff;
              border-bottom: 1px rgba(198, 44, 43, 0.2) solid;
              padding: 20px;

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

            &:last-child {

              th,
              td {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
}

/*--------------------
料金 一覧
--------------------*/
.post-type-archive-price {
  .lower-header {
    background-image: url("../img/price/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/price/page-ttl_sp.webp");
    }
  }
  .aside-left {
      .aside__page-ttl {
        margin: 0 0 10px;
      }
  }
  .price-searchform {
    .search-box {
      margin: 0;
      border-bottom: 1px #e48180 dashed;

      dt {
        font-size: clamp(14px, 13.515px + 0.129vw, 16px);
        color: var(--color-beauty);
        padding: 20px 0;
        position: relative;
        cursor: pointer;

        &::after {
          content: "";
          position: absolute;
          top: 20px;
          right: 0;
          background: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Cline x1='15.9922' y1='24.9678' x2='15.9922' y2='9.00003' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
          width: 20px;
          height: 20px;
          display: inline-block;
          transition: ease-in 0.2s;
        }

        &.show {
          &::after {
            background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A");
          }
        }
      }

      dd {
        font-size: clamp(14px, 13.515px + 0.129vw, 16px);
        margin: 0;
        padding-bottom: 20px;

        &+dt {
          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px #e48180 dashed;
            display: block;
          }
        }
      }
    }
  }

  /* モニター制度について */
  .sec--monitor {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    margin-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

    .monitor__ttl {
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(18px, 15.573px + 0.647vw, 28px);
      color: var(--color-ttl);
      padding-bottom: 10px;
      margin: 0 0 clamp(20px, 15.146px + 1.294vw, 40px);
      border-bottom: 1px var(--color-ttl) dashed;
    }

    .monitor__txt {
      margin-bottom: 20px;
    }

    .monitor__list-area {
      background-color: #f7f5f5;
      padding: clamp(30px, 25.146px + 1.294vw, 50px);
    }
  }
}

.sec--price {
  .price__group {
    .price__box {
      border-bottom: 1px #e48180 dashed;
      padding: 0 0 clamp(20px, 17.573px + 0.647vw, 30px);

      .price__ttl {
        position: relative;
        font-weight: 400;
        font-size: clamp(18px, 17.029px + 0.259vw, 22px);
        color: var(--color-beauty);
        margin: 0;
        cursor: pointer;
        padding: 0 40px 0 0;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          background: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Cline x1='15.9922' y1='24.9678' x2='15.9922' y2='9.00003' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
          width: clamp(25px, 23.058px + 0.518vw, 33px);
          height: clamp(25px, 23.058px + 0.518vw, 33px);
          display: inline-block;
          transition: ease-in 0.2s;
        }

        &.show {
          &::after {
            background-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8.51562' y1='16.5313' x2='24.4834' y2='16.5312' stroke='%23432815'/%3E%3Ccircle cx='16.5' cy='16.5' r='16' stroke='%23432815' stroke-opacity='0.1'/%3E%3C/svg%3E%0A");
          }
        }
      }

      .price__box-inner {
        dl {
          position: relative;
          background-color: #f7f5f5;
          margin: 20px 0 0;
          padding: 0 2.6vw;
          display: flex;
          flex-wrap: wrap;
          border-radius: 4px;

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

          dt {
            width: 50%;
            padding: 20px 20px 20px 0;
            border-bottom: 1px #e48180 dashed;
            color: var(--color-beauty);

            &:last-of-type {
              border-bottom: none;
            }
          }

          dd {
            width: 50%;
            margin: 0;
            padding: 20px 0 20px 20px;
            display: flex;
            flex-direction: column;
            text-align: right;
            border-bottom: 1px #e48180 dashed;

            &:last-of-type {
              border-bottom: none;
            }

            p {
              margin: 0;

              &:has(span) {
                display: flex;
                justify-content: space-between;

                span {
                  width: 40%;
                  text-align: right;
                  display: inline-block;
                }
              }

              &+p {
                margin-top: 20px;
              }
            }
          }
        }

        .price__notes {
          margin-top: 20px;
        }
      }

      &.price__box {
        margin-top: clamp(20px, 17.573px + 0.647vw, 30px);
      }
    }

    &+.price__group {
      margin-top: clamp(60px, 50.291px + 2.589vw, 100px);
    }
  }
}

/*--------------------
よくある質問
--------------------*/
.page-faq {
  .lower-header {
    background-image: url("../img/faq/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/faq/page-ttl_sp.webp");
    }
  }

  .aside-left {
    .aside__page-ttl {
      margin-bottom: 40px;
    }
  }

  .sec--faq {
    margin-top: clamp(40px, 30.291px + 2.589vw, 80px);

    .faq__list {
      .faq__item {
        .faq__q {
          color: var(--color-ttl);

          &::before {
            color: var(--color-ttl);
          }
        }

        &:last-child {
          border-bottom: 1px var(--color-ttl) dashed;
          padding-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

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

        .faq__a {
          a {
            color: var(--color-ttl);
            border-bottom: 1px var(--color-ttl) solid;

            &:hover {
              opacity: 0.8;
              border-bottom: none;
            }
          }

          *+.faq__table {
            margin-top: 20px;
            margin-bottom: 20px;
          }
        }
      }
    }

    &+.sec--faq {
      margin-top: clamp(70px, 50.583px + 5.178vw, 150px);
    }
  }
}

.table-style1 {
  caption {
    text-align: left;
    font-weight: 500;
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    color: var(--color-ttl);
    margin-bottom: 10px;
  }

  tbody {
    tr {

      th,
      td {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        line-height: 1.7;
        border: 1px #9e8d85 solid;
        padding: 10px 15px;
      }

      th {
        background-color: #f3f0f0;
        color: var(--color-ttl);
        font-weight: normal;
      }
    }
  }
}

/*---------------------------------------------------
一般皮膚科/小児皮膚科/皮膚外科/形成外科/美容皮膚科 共通
---------------------------------------------------*/
.page-general,
.page-child,
.page-surgery,
.page-beauty {
  .lower-header {
    .lower-header__inner {

      .lower-header__en,
      .lower-header__ja {
        color: var(--color-ttl);
      }
    }
  }

  .aside-left {
    .aside__page-ttl {
      margin-bottom: 40px;
    }
  }

  .sec-ttl--bilingual-layer-medium {
    .ja {
      color: var(--color-general);
    }
  }

  /* 当院のこだわり */
  .sec--commitment {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);
    background: url("../img/general/commitment-bg.webp") top center / cover no-repeat;

    .commitment__lead {
      margin-bottom: clamp(70px, 57.864px + 3.236vw, 120px);
    }

    .commitment__list {
      .commitment__item {
        display: grid;
        grid-template-columns: 50% 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 2.6vw;

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

        .ttl {
          grid-column: 1;
          grid-row: 1;
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          color: var(--color-general);
          margin: 0 0 20px;
          padding-bottom: 10px;
          border-bottom: 1px var(--color-general) dotted;
        }

        .txt-area {
          grid-column: 1;
          grid-row: 2;
          align-self: flex-start;

          .btn-more {
            margin-top: 40px;
          }
        }

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

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

          img {
            border-radius: 4px;
          }
        }

        &:nth-child(even) {
          grid-template-columns: 1fr 50%;

          .ttl {
            grid-column: 2;
          }

          .txt-area {
            grid-column: 2;
          }

          .img {
            grid-column: 1;
          }
        }

        &+.commitment__item {
          margin-top: clamp(70px, 57.864px + 3.236vw, 120px);
        }
      }
    }
  }

  /* 動画でやさしくご案内 */
  .sec--movie {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(80px, 75.146px + 1.294vw, 100px);
    background: url("../img/symbol-general__top-right.svg") bottom left / 50% no-repeat;

    @media (max-width: 767px) {
      background-size: 70%;
    }

    .movie__inner {
      max-width: 1200px;
      width: 90%;
      margin: 0 auto;
      overflow: hidden;

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

    .youtube-swiper {
      @media (max-width: 767px) {
        overflow: visible;
        padding-left: 10%;
        padding-right: 10%;
      }

      .swiper-wrapper {

        &.is-center {
          justify-content: center;
        }

        .swiper-slide {
          a {
            img {
              border-radius: 4px;
            }

            &:hover {
              opacity: 0.8;
            }
          }
        }
      }

      .swiper-button__wrap {
        position: relative;
        height: 40px;
        width: 300px;
        margin-left: auto;
        margin-top: 30px;
        width: 100%;

        .swiper-button-prev,
        .swiper-button-next {
          position: absolute;
          background-color: var(--color-general);
          width: 40px;
          height: 40px;
          border-radius: 100px;
          top: 50%;

          &::after {
            color: #fff;
            font-size: clamp(14px, 13.515px + 0.129vw, 16px);
            font-weight: 500;
          }
        }

        .swiper-button-prev {
          left: inherit;
          right: 60px;
        }

        .swiper-button-next {
          right: 0;
          left: inherit;
        }

        .swiper-pagination {
          display: flex;
          width: 50%;

          .swiper-pagination-bullet {
            opacity: 1;
            background: #cbc4c5;
            width: 12px;
            height: 12px;
            margin: 0 7px;
          }

          .swiper-pagination-bullet-active {
            background: var(--color-general);
          }
        }
      }
    }
  }

  /* 診療メニュー */
  .top--menu {
    background: url("../img/general/menu-bg.webp") center center / cover no-repeat;

    .menu__tab {
      .menu__tab--panel {
        .menu__pickup-area {
          .menu__pickup-list {
            .menu__pickup-item {
              a {
                .menu__pickup-label {
                  text-shadow: none;
                  color: #242424;
                  font-size: clamp(18px, 16.544px + 0.388vw, 24px);
                  letter-spacing: -1px;
                }

                .menu__pickup-more {
                  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                }
              }
            }
          }
        }
      }
    }

    .menu__all-list {
      .menu__all-item {
        width: calc((100% - 3.9vw) / 4);

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

  /* 治療設備について */
  .sec--equipment {
    background-color: #fff9f2;
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);
  }

  /* 院長メッセージ */
  .sec--message {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    background: url("../img/general/commitment-bg.webp") top center / cover no-repeat;

    .message__head {
      display: flex;
      gap: 40px;
      align-items: center;
      margin-bottom: 40px;

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

      .message__img {
        width: 260px;
        flex-shrink: 0;

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

      .message__copy {
        margin: 0;

        span {
          font-family: var(--font-min);
          font-size: clamp(22px, 19.573px + 0.647vw, 32px);
          line-height: 2;
          color: var(--color-general);
          border-bottom: 1px rgba(214, 130, 47, 0.3) solid;
        }
      }
    }

    .name-area {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      align-items: baseline;
      margin-top: clamp(20px, 15.146px + 1.294vw, 40px);

      .position {
        font-family: var(--font-min);
        font-size: clamp(16px, 15.515px + 0.129vw, 18px);
        margin: 0;
      }

      .name {
        font-family: var(--font-min);
        font-size: clamp(22px, 21.029px + 0.259vw, 26px);
        margin: 0;
      }
    }
  }
}

/*--------------------
一般皮膚科
--------------------*/
.page-general {
  .lower-header {
    background-image: url("../img/general/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/general/page-ttl_sp.webp");
    }
  }
}

/*--------------------
小児皮膚科
--------------------*/
.page-child {
  .lower-header {
    background-image: url("../img/child/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/child/page-ttl_sp.webp");
    }
  }
}

/*--------------------
皮膚外科/形成外科
--------------------*/
.page-surgery {
  .lower-header {
    background-image: url("../img/surgery/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/surgery/page-ttl_sp.webp");
    }
  }

  .sec--flow {
    background: linear-gradient(0deg,
        rgba(255, 241, 224, 1) 0%,
        rgba(250, 244, 237, 1) 100%);

    .flow__lead {
      margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);
    }
  }
}

/*--------------------
美容皮膚科
--------------------*/
.page-beauty {
  .bg-wrap {
    background: url("../img/beauty/page-main-bg.webp") top right / cover no-repeat;

    @media (max-width: 767px) {
      background-image: url("../img/beauty/page-main-bg_sp.webp");
    }
  }

  .lower-header {
    background-image: url("../img/beauty/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/beauty/page-ttl_sp.webp");
    }
  }

  .sec-ttl--bilingual-layer-medium {
    .ja {
      color: var(--color-beauty);
    }
  }

  /* お客様満足の取り組み */
  .sec--care {
    padding: clamp(20px, 12.718px + 1.942vw, 50px);

    .care__frame {
      border-radius: 4px;
      padding: clamp(50px, 42.718px + 1.942vw, 80px) 0 clamp(30px, 25.146px + 1.294vw, 50px);
      background:
        url("../img/symbol-beauty__top-left.svg") bottom right / 40% no-repeat,
        #fff;

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

      .care__list {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        max-width: 920px;
        width: 90%;
        display: grid;
        grid-auto-flow: column;
        grid-auto-rows: auto;
        grid-template-rows: repeat(5, 1fr);
        gap: 30px 20px;
        align-items: center;
        counter-reset: item;

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

        .care__item {
          counter-increment: item;
          /* 各要素ごとにカウンターを加算 */
          position: relative;
          padding-left: 70px;
          border-bottom: 1px var(--color-beauty) dashed;
          display: flex;
          align-items: center;
          height: 60px;

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

          &::before {
            content: counter(item, decimal-leading-zero);
            position: absolute;
            left: 0;
            top: 0;
            color: #9e8d85;
            font-family: var(--font-min);
            font-weight: 500;
            font-size: 50px;
            line-height: 1;
          }

          &>p {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            margin: 0;

            &.color-beauty {
              color: var(--color-beauty);
            }
          }
        }
      }

      .care__notes {
        font-size: clamp(10px, 9.029px + 0.259vw, 14px);
        color: #242424;
        text-align: right;
        margin: 020px auto 0;
        max-width: 920px;
        width: 90%;
      }
    }
  }

  /* 当院のこだわり */
  .sec--commitment {
    background: none;

    .commitment__list {
      .commitment__item {
        .ttl {
          color: var(--color-beauty);
          border-bottom-color: var(--color-beauty);
        }

        .floor-introduction {
          grid-column: 1 / 3;
          background-color: #fff;
          border-radius: 4px;
          padding: clamp(30px, 25.146px + 1.294vw, 50px) clamp(20px, 12.718px + 1.942vw, 50px);
          margin-top: clamp(40px, 35.146px + 1.294vw, 60px);

          .floor-swiper-area {
            position: relative;

            .floor-swiper {
              width: 80%;
              margin: 0 auto;

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

          .swiper-button-prev,
          .swiper-button-next {
            width: clamp(25px, 21.359px + 0.971vw, 40px);
            height: clamp(25px, 21.359px + 0.971vw, 40px);
            background-color: var(--color-ttl);
            border-radius: 100px;
            top: 40%;

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

            &::after {
              font-size: clamp(10px, 8.544px + 0.388vw, 16px);
              color: #fff;
            }
          }

          .swiper-button-prev {
            left: clamp(20px, 12.718px + 1.942vw, 50px);

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

          .swiper-button-next {
            right: clamp(20px, 12.718px + 1.942vw, 50px);

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

          .floor-introduction__img {
            img {
              border-radius: 4px;
            }
          }

          .floor-introduction__txt {
            margin-top: 20px;
          }

          .floor-introduction__lead {
            background: url("../img/beauty/floor-introduction__lead-bg.webp") center center / cover no-repeat;
            border-radius: 4px;
            aspect-ratio: 1100 / 242;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: clamp(30px, 27.573px + 0.647vw, 40px);

            @media (max-width: 767px) {
              background-image: url("../img/beauty/floor-introduction__lead-bg_sp.webp");
              padding: 30px 25px;
              aspect-ratio: inherit;
            }

            .txt {
              text-align: center;
              font-family: var(--font-min);
              font-weight: 500;
              font-size: clamp(16px, 14.058px + 0.518vw, 24px);
              color: var(--color-ttl);

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

  /* 動画でやさしくご案内 */
  .sec--movie {
    background-color: #fff;
    background-image: url("../img/symbol-beauty__top-right.svg");

    .youtube-swiper {
      @media (max-width: 767px) {
        overflow: visible;
        padding-left: 10%;
        padding-right: 10%;
      }

      .swiper-wrapper {
        .swiper-slide {
          a {
            img {
              border-radius: 4px;
            }

            &:hover {
              opacity: 0.8;
            }
          }
        }
      }

      .swiper-button__wrap {

        .swiper-button-prev,
        .swiper-button-next {
          background-color: var(--color-beauty);
        }

        .swiper-pagination {
          .swiper-pagination-bullet-active {
            background: var(--color-beauty);
          }
        }
      }
    }
  }

  /* 診療メニュー */
  .top--menu {
    .menu__tab {
      .menu__tab--panel {
        .menu__treatment-area {
          background: none;
          padding-bottom: 0;

          .sec-ttl--bilingual-medium {
            text-shadow: none;

            .en {
              color: #9e8d85;
            }

            .ja {
              color: var(--color-beauty);
            }
          }

          .menu__all-list {
            .menu__all-item {
              display: flex;
              box-shadow: 0 0 15px 0 rgba(247, 165, 165, 0.15);

              a,
              span {
                height: auto;
                padding: 20px;
                flex-direction: column;
                overflow: hidden;

                .treatment-label {
                  margin: 0;
                  font-size: clamp(12px, 11.029px + 0.259vw, 16px);
                  text-align: center;

                  small {
                    display: block;
                    font-size: clamp(12px, 11.029px + 0.259vw, 16px);
                  }
                }

                &::after {
                  background: var(--color-beauty);
                  width: 50px;
                  height: 50px;
                  top: inherit;
                  bottom: -30px;
                  right: -30px;
                  transform: rotateZ(45deg);
                }

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

                &:hover {
                  &::after {
                    margin-right: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /* 症例 */
  .sec--case {
    background:
      url("../img/symbol-beauty__top-right.svg") bottom left / 28.54vw no-repeat,
      #fff;
    padding-top: clamp(40px, 35.146px + 1.294vw, 60px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    @media (max-width: 767px) {
      background-size: 68vw;
    }

    .swiper-button__wrap {
      position: relative;
      height: 40px;
      width: 300px;
      margin-left: auto;
      margin-top: 30px;
      width: 100%;

      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        background-color: var(--color-beauty);
        width: 40px;
        height: 40px;
        border-radius: 100px;
        top: 50%;

        &::after {
          color: #fff;
          font-size: clamp(14px, 13.515px + 0.129vw, 16px);
          font-weight: 500;
        }
      }

      .swiper-button-prev {
        left: inherit;
        right: 60px;
      }

      .swiper-button-next {
        right: 0;
        left: inherit;
      }

      .swiper-pagination {
        display: flex;
        width: 50%;

        .swiper-pagination-bullet {
          opacity: 1;
          background: #cbc4c5;
          width: 12px;
          height: 12px;
          margin: 0 7px;
        }

        .swiper-pagination-bullet-active {
          background: var(--color-beauty);
        }
      }
    }
  }

  /* インスタグラム */
  .sec--instagram {
    background-color: #f8f4f4;
    padding-top: clamp(40px, 35.146px + 1.294vw, 60px);
    padding-bottom: clamp(70px, 50.583px + 5.178vw, 150px);

    .instagram__btn {
      margin-top: clamp(20px, 15.146px + 1.294vw, 40px);
      display: flex;
      justify-content: flex-end;

      a {
        padding-left: clamp(30px, 27.573px + 0.647vw, 40px);
        padding-bottom: 10px;

        &::before {
          content: "";
          position: absolute;
          top: 7px;
          left: 0;
          background: url("../img/sns-instagram.svg") center center / contain no-repeat;
          width: clamp(20px, 17.573px + 0.647vw, 30px);
          height: clamp(20px, 17.573px + 0.647vw, 30px);
          display: inline-block;
        }
      }
    }
  }

  /* 院長メッセージ */
  .sec--message {
    .message__head {
      .message__copy {
        span {
          color: var(--color-beauty);
        }
      }
    }
  }
}

/*--------------------
ドクターズコスメ
--------------------*/
.page-doctors-cosme {
  .lower-header {
    background-image: url("../img/doctors-cosme/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/doctors-cosme/page-ttl_sp.webp");
    }
  }

  .aside-left {
    .aside__page-ttl {
      margin-bottom: 40px;
    }
  }

  /* 概要 */
  .sec--intro {
    padding-top: clamp(40px, 25.437px + 3.883vw, 100px);
    padding-bottom: clamp(70px, 62.718px + 1.942vw, 100px);

    .intro__lead {
      margin-bottom: clamp(40px, 30.291px + 2.589vw, 80px);
    }

    .intro__banner {
      display: flex;
      justify-content: center;

      a {
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .sec--original {
    background-color: #f7f5f5;
    padding-top: clamp(40px, 25.437px + 3.883vw, 100px);
    padding-bottom: clamp(70px, 62.718px + 1.942vw, 100px);

    .original__lead {
      margin-bottom: 60px;
    }

    .cosme-block {
      .cosme-block__head {
        position: relative;
        border-bottom: 1px var(--color-ttl) solid;
        padding-bottom: 10px;
        margin-bottom: 20px;

        .cosme-block__ttl {
          font-family: var(--font-min);
          font-weight: 500;
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          color: var(--color-ttl);
          margin: 0;

          small {
            font-family: var(--font-min);
            font-weight: 500;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            color: var(--color-ttl);
            margin-left: 10px;

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

        .sns-icon {
          position: absolute;
          right: 0;
          bottom: 10px;

          img {
            width: clamp(25px, 22.573px + 0.647vw, 35px);
            height: clamp(25px, 22.573px + 0.647vw, 35px);
          }

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .cosme-block__visual {
        display: grid;
        grid-template-columns: 420px 1fr;
        column-gap: 40px;

        .cosme-block__video-txt:last-child {
          grid-column: 1 / -1;
        }

        .cosme-block__video:nth-child(2) {
          grid-column: 1 / -1;
        }

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

        .cosme-block__img {
          grid-column: 1 / 3;
          grid-row: 1;
          margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);

          img {
            border-radius: 4px;
          }
        }

        .cosme-block__video {
          position: relative;
          width: 100%;
          aspect-ratio: 16 / 9;
          flex-shrink: 0;

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

          iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }

      .btn-more {
        margin-top: 40px;

        a {
          margin: 0 auto;
        }
      }

      &+.cosme-block {
        margin-top: clamp(80px, 75.146px + 1.294vw, 100px);
      }
    }
  }

  /* 当院の取り扱い商品 */
  .sec--lineup {
    padding-top: clamp(40px, 25.437px + 3.883vw, 100px);
    padding-bottom: clamp(70px, 62.718px + 1.942vw, 100px);

    .lineup__block {
      .lineup__ttl {
        font-family: var(--font-min);
        font-weight: 500;
        font-size: clamp(22px, 20.544px + 0.388vw, 28px);
        color: var(--color-ttl);
        border-bottom: 1px var(--color-ttl) dotted;
        padding-bottom: 10px;
        margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);
      }

      .lineup__lead {
        margin-bottom: 40px;
      }

      .lineup__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;

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

        .lineup__item {
          position: relative;
          display: flex;
          width: calc((100% - 60px) / 3);
          height: auto;
          padding: clamp(10px, 7.573px + 0.647vw, 20px) clamp(15px, 7.718px + 1.942vw, 45px) clamp(20px, 17.573px + 0.647vw, 30px);
          flex-direction: column;
          overflow: hidden;
          border-radius: 4px;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          transition: ease-in 0.2s;

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

          .lineup__category {
            font-size: clamp(10px, 9.029px + 0.259vw, 14px);
            color: #9e8d85;
            text-align: center;
            margin: 0 0 5px;
          }

          .lineup__label {
            color: var(--color-ttl);
            font-size: clamp(12px, 10.544px + 0.388vw, 18px);
            text-align: center;
            margin: 0;
          }

          .modal-icon {
            position: absolute;
            bottom: 0px;
            right: 0px;
            width: clamp(15px, 11.845px + 0.841vw, 28px);
            height: clamp(15px, 11.845px + 0.841vw, 28px);
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58' fill='none'%3E%3Cg filter='url(%23filter0_d_2003_14441)'%3E%3Cpath d='M29 29L43 15V39C43 41.2091 41.2091 43 39 43H15L29 29Z' fill='%239E8D85'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_2003_14441' x='0' y='0' width='58' height='58' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='7.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.968627 0 0 0 0 0.647059 0 0 0 0 0.647059 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_2003_14441'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_2003_14441' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") center center / 58px 58px no-repeat;
          }

          &:hover {
            opacity: 0.7;
          }
        }
      }

      .common-modal {
        .common-modal__content {
          .common-modal__label {
            small {
              font-size: clamp(12px, 10.544px + 0.388vw, 18px);
              color: #9e8d85;
              display: block;
            }
          }

          .common-modal__img {
            margin-bottom: clamp(20px, 7.864px + 3.236vw, 70px);
          }

          .cosme-info {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

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

            .cosme-info__inner {
              display: flex;
              gap: 20px;
              width: 50%;
              border-bottom: 1px rgba(198, 44, 43, 0.2) solid;
              padding-bottom: 10px;

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

              .cosme-info__ttl {
                font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                color: #9e8d85;
                margin: 0;
                padding-left: 20px;

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

              .cosme-info__txt {
                font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                margin: 0;
              }
            }
          }

          .cosme-point {
            border-radius: 4px;
            overflow: hidden;
            background-color: #fff;
            margin-top: clamp(40px, 35.146px + 1.294vw, 60px);

            .cosme-point__ttl {
              background: linear-gradient(90deg,
                  rgba(228, 129, 128, 1) 0%,
                  rgba(228, 129, 128, 1) 10%,
                  rgba(239, 179, 172, 1) 100%);
              color: #fff;
              margin: 0;
              padding: 6px;
              font-family: var(--font-min);
              font-size: clamp(18px, 15.573px + 0.647vw, 28px);
              text-align: center;
            }

            .cosme-point__txt {
              margin: 0;
              padding: clamp(20px, 15.146px + 1.294vw, 40px);
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);
              line-height: 1.7;
              text-align: left;
            }
          }

          .btn-more {
            margin-top: clamp(40px, 35.146px + 1.294vw, 60px);

            a {
              margin: 0 auto;
            }
          }
        }
      }

      &+.lineup__block {
        margin-top: clamp(80px, 63.01px + 4.531vw, 150px);
      }
    }
  }
}
.page-about {
  .sec--facilities {
    .facilities__floor-map {
      .common-modal {
        .common-modal__content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          margin: 0;

          @media (max-width: 767px) {
              padding: 50px 25px 50px 25px;
          }
          .common-modal__img {
            width: 100%;
            max-width: 500px;
          }
        }
      }
    }
  }
}
.page-privacypolicy {
  .sec--privacypolicy {
    padding-top: clamp(70px, 62.718px + 1.942vw, 100px);

    .privacypolicy__ttl {
      font-family: var(--font-min);
      font-weight: 400;
      font-size: clamp(22px, 20.544px + 0.388vw, 28px);
      color: var(--color-ttl);
      padding-bottom: 10px;
      margin: clamp(40px, 35.146px + 1.294vw, 60px) 0 20px;
      border-bottom: 1px var(--color-ttl) solid;
    }
  }
}

/*--------------------
求人共通
--------------------*/
/* 募集職種 */
.sec--jobs {
  background: url(../img/recruit/sec-jobs-back.webp);
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  padding-top: clamp(60px, 45.437px + 3.883vw, 120px);

  .sec--jobs__inner {
    max-width: 920px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .recruit__list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(20px, -1.739px + 2.174vw, 40px);

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

      .recruit__item {
        text-align: center;
        background-color: var(--color-ttla);

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

        .recruit__link {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: var(--color-ttl);
          color: #fff;
          text-decoration: none;
          padding: 15px 10px;
          border-radius: 4px;
          position: relative;
          transition: opacity 0.3s;

          .recruit__job-name {
            font-size: 1.1rem;
            font-family: var(--font-en);
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            margin-bottom: 2px;
          }

          .recruit__job-type {
            font-size: clamp(12px, 11.515px + 0.129vw, 14px);
          }

          &::after {
            content: "";
            position: absolute;
            right: clamp(9px, 2.478px + 0.652vw, 15px);
            top: 50%;
            transform: translateY(-50%);
            width: clamp(20px, 9.130px + 1.087vw, 30px);
            height: 1px;
            background-color: #fff;
          }

          &::before {
            content: "";
            position: absolute;
            right: clamp(10px, 3.478px + 0.652vw, 16px);
            top: 50%;
            width: clamp(6px, 1.652px + 0.435vw, 10px);
            height: clamp(6px, 1.652px + 0.435vw, 10px);
            border-top: 1px solid #fff;
            transform: translateY(-50%) rotate(45deg);
            z-index: 1;
          }
        }

        .recruit__link:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .breadcrumb {
    padding: 0 0 20px 0;
  }
}

/* エントリーフォーム */
.sec--entry {
  padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
  padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

  .entry-form__body {
    background-color: #F7F5F5;
    max-width: 920px;
    width: 90%;
    margin: 0 auto;
    padding: clamp(30px, 25.146px + 1.294vw, 50px);
  }
}

.entry-form__row {
  display: flex;
  gap: clamp(10px, 2.718px + 1.942vw, 40px);
  padding-top: clamp(20px, 15.146px + 1.294vw, 40px);
  padding-bottom: clamp(20px, 15.146px + 1.294vw, 40px);
  align-items: center;
  border-bottom: 1px dotted #D3C8C2;

  &:first-child {
    padding-top: 0;
  }

  /* 求人詳細 */
  .entry-form__label {
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    font-family: var(--font-min);
    color: var(--color-ttl);
    width: 210px;
    flex-shrink: 0;

    .label--required {
      font-size: clamp(10px, 9.029px + 0.259vw, 14px);
      font-family: var(--font-min);
      background-color: #9E8D85;
      color: #fff;
      padding: 1px 8px;
      margin-left: 10px;
      border-radius: 20px;
    }
  }

  /* コンタクト */
  .entry-form__label--required {
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    font-family: var(--font-min);
    color: var(--color-ttl);
    width: 280px;
    flex-shrink: 0;
    margin: 0;

    .label--required {
      font-size: clamp(10px, 9.029px + 0.259vw, 14px);
      font-family: var(--font-min);
      background-color: #9E8D85;
      color: #fff;
      padding: 1px 8px;
      margin-left: 10px;
      border-radius: 20px;
    }
  }

  .entry-form__input-group {
    font-size: clamp(14px, 13.029px + 0.259vw, 18px);
    font-family: var(--font-min);
    color: var(--color-ttl);
    flex-grow: 1;

    input {
      padding: 10px 7px;
      border: 1px solid #D3C8C2;
      border-radius: 4px;
      background-color: #fff;
      color: #252525;
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      font-family: var(--font-min);

      &::placeholder {
        color: #D3C8C2;
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        font-family: var(--font-min);
      }
    }

    textarea {
      width: 100%;
      padding: 10px 7px;
      border: 1px solid #D3C8C2;
      border-radius: 4px;
      background-color: #fff;
    }

    .entry-form__note {
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      font-family: var(--font-min);
      color: var(--color-ttl);
    }

    .wpcf7-list-item {
      input[type="radio"] {
        display: none;
      }

      input[type="radio"]:checked+span::after {
        opacity: 1;
      }

      input[type="radio"]:checked+span::before {
        border-color: #9E8D85;
      }

      span {
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        font-family: var(--font-min);
        color: var(--color-ttl);
        position: relative;
        padding-left: clamp(20px, 18.786px + 0.324vw, 25px);
        cursor: pointer;
        display: inline-block;
        line-height: 24px;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: clamp(14px, 13.515px + 0.129vw, 16px);
          height: clamp(14px, 13.515px + 0.129vw, 16px);
          border: 1px solid #9E8D85;
          border-radius: 50%;
          background: #fff;
        }

        &::after {
          content: "";
          position: absolute;
          left: 2px;
          top: 50%;
          transform: translateY(-50%);
          width: clamp(10px, 9.515px + 0.129vw, 12px);
          height: clamp(10px, 9.515px + 0.129vw, 12px);
          background: #9E8D85;
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.2s;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 2カラムから1カラム */
.form-grid-1 {
  .entry-form__input-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  @media screen and (max-width: 768px) {
    .entry-form__input-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }
}

/* 2カラム */
.form-grid-2 {
  .entry-form__input-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 7.573px + 0.647vw, 20px);
    --gap: clamp(10px, 7.573px + 0.647vw, 20px);
    width: calc((100% - var(--gap)) / 2);

    input {
      width: 100%;
    }
  }

  @media screen and (max-width: 768px) {
    .entry-form__input-group {
      width: 100%;

      input {
        width: 100%;
      }
    }
  }
}

/* 3カラムから1カラム */
.form-grid-3 {
  .entry-form__input-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  @media screen and (max-width: 768px) {
    .entry-form__input-group {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }
  }
}

/* 半端な横幅 */
.form-short {
  .entry-form__input-group {
    input {
      width: 30%;
    }

    span {
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);
      font-family: var(--font-min);
      color: var(--color-ttl);
    }
  }

  @media screen and (max-width: 768px) {
    .entry-form__input-group {
      input {
        width: 30%;
      }
    }
  }
}

/* 横幅100% */
.form-full {
  .entry-form__input-group {
    width: 100%;

    input {
      width: 100%;
    }
  }
}

.wpcf7-form-control-wrap {
  .job-type {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
  }
}

.entry-form__submit {
  max-width: 920px;
  width: 90%;
  margin: clamp(40px, 35.146px + 1.294vw, 60px) auto 0;

  .entry-form__btn {
    position: relative;
    width: fit-content;
    margin: 0 auto;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      background: url("data:image/svg+xml,%3Csvg width='26' height='6' viewBox='0 0 26 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H24L20 1' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
      width: 24px;
      height: 5px;
      display: inline-block;
    }

    .wpcf7-submit {
      min-width: 300px;
      width: fit-content;
      background-color: var(--color-ttl);
      padding: clamp(15px, 13.786px + 0.324vw, 20px) 40px;
      text-align: center;
      border-radius: 4px;
      transition: ease-in 0.2s;
      cursor: pointer;
      display: block;
      border: none;
      color: #fff;
      font-family: var(--font-min);
      font-size: clamp(14px, 13.029px + 0.259vw, 18px);

      &:hover {
        opacity: 0.8;
      }
    }

    .wpcf7-spinner {
      display: none;
    }
  }
}

/*-----------------------------------------------
メディア掲載 / 出演依頼のお問い合わせ 内容確認
求人エントリー 内容確認
-----------------------------------------------*/
.page-inquiry-media-confirm,
.page-recruit-entry-confirm {
  .sec--confirm {
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);

    .confirm__inner {
      max-width: 800px;
      width: 90%;
      margin: 0 auto;
    }

    .entry-form__row {
      .entry-form__label--required {
        font-weight: 600;
        color: var(--color-ttl);
      }
    }
  }

  .entry-form__submit-area {
    position: relative;
    margin-top: clamp(60px, 55.146px + 1.294vw, 80px);

    .entry-form__submit {
      position: relative;
      width: fit-content;
      margin: 0 auto;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        background: url("data:image/svg+xml,%3Csvg width='26' height='6' viewBox='0 0 26 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5H24L20 1' stroke='white' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
        width: 24px;
        height: 5px;
        display: inline-block;
      }

      .wpcf7-submit {
        min-width: 300px;
        width: fit-content;
        background-color: var(--color-ttl);
        padding: clamp(15px, 13.786px + 0.324vw, 20px) 40px;
        text-align: center;
        border-radius: 4px;
        transition: ease-in 0.2s;
        cursor: pointer;
        display: block;
        border: none;
        color: #fff;
        font-family: var(--font-min);
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);

        &:hover {
          opacity: 0.8;
        }
      }

      .wpcf7-spinner {
        display: none;
      }
    }

    .entry-form__previous {
      position: absolute;
      bottom: 0;
      left: 0;

      @media (max-width: 767px) {
        position: static;
        width: fit-content;
        margin: 20px auto 0;
      }

      .wpcf7-previous {
        background: none;
        border: none;
        background: url("data:image/svg+xml,%3Csvg width='18' height='5' viewBox='0 0 18 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.2056 4.50801H1.20557L5.20557 0.5' stroke='%23242424' stroke-linecap='round'/%3E%3C/svg%3E%0A") left center no-repeat;
        cursor: pointer;
        border-bottom: 1px var(--color-ttl) solid;
        padding: 0 0 2px 30px;
        transition: ease-in 0.2s;

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

/*-----------------------------------------------
求人エントリー 内容確認
-----------------------------------------------*/
.page-recruit-entry-confirm {
  .lower-header {
    background-image: url("../img/recruit/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/recruit/page-ttl_sp.webp");
    }
  }
}

/*-----------------------------------------------
求人エントリー 送信完了
-----------------------------------------------*/
.page-thanks-recruit {
  .lower-header {
    background-image: url("../img/recruit/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/recruit/page-ttl_sp.webp");
    }
  }
}

/*-----------------------------------------------
メディア掲載 / 出演依頼のお問い合わせ 送信完了
求人エントリー 送信完了
-----------------------------------------------*/
.page-thanks-recruit,
.page-thanks-inquiry-media {
  .sec--thanks {
    padding-top: clamp(80px, 70.291px + 2.589vw, 120px);

    .sec--thanks__text {
      text-align: center;

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

    .sec--thanks__text+.sec--thanks__text {
      margin-top: 10px;
    }

    .btn-more--back {
      margin-top: clamp(60px, 55.146px + 1.294vw, 80px);

      a {
        margin: 0 auto;
      }
    }
  }
}

/*-----------------------------------------------
求人トップ
-----------------------------------------------*/
.page-recruit {
  .aside-list {
    margin-top: auto;
  }

  .lower-header {
    background-image: url("../img/recruit/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/recruit/page-ttl_sp.webp");
    }
  }

  .breadcrumb {
    padding: 0 0 20px;
  }

  /* タイトル */
  .lower-header {
    padding-bottom: 0;

    .lower-header__inner {
      .lower-header__en {
        text-align: center;
      }

      .lower-header__ja {
        text-align: center;
      }
    }
  }

  .container {
    margin: auto;
  }

  /* 採用理念 */
  .sec--philosophy {
    .sec--philosophy__inner {
      background: url(../img/recruit/recruit-philosophy-bg.webp);
      background-size: cover;
      background-position: bottom center;
      background-repeat: no-repeat;
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(60px, 55.146px + 1.294vw, 80px);
      padding-left: 40px;
      padding-right: 40px;

      .sec--philosophy__copy {
        text-align: center;
        margin-bottom: clamp(60px, 55.146px + 1.294vw, 80px);

        .philosophy__copy {
          font-size: clamp(24px, 22.058px + 0.518vw, 32px);
          color: var(--color-ttl);
          font-family: var(--font-min);
          font-weight: 500;
          line-height: 1.7;
          width: 90%;
          margin: 0 auto;

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

      .sec--philosophy__content {
        border-radius: 4px;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.4) 17.25%,
            rgba(255, 255, 255, 0.4) 100%);
        backdrop-filter: blur(12.5px);
        margin: 0 auto;
        padding-top: clamp(40px, 29.078px + 2.913vw, 85px);

        .sec--philosophy__intro {
          display: flex;
          align-items: center;
          gap: clamp(20px, 15.146px + 1.294vw, 40px);
          max-width: 920px;
          width: 90%;
          margin: 0 auto clamp(20px, 15.146px + 1.294vw, 40px);

          .sec--philosophy__intro-visual {
            max-width: 370px;
            width: 40%;
          }

          .sec--philosophy__intro-lead {
            max-width: 510px;

            .lead__copy {
              font-size: clamp(22px, 20.544px + 0.388vw, 28px);
              font-family: var(--font-min);
              font-weight: 500;
              color: var(--color-ttl);
              line-height: 60px;
              text-decoration: underline;
              text-decoration-color: #9e8d85;
              text-decoration-thickness: 1px;
              text-underline-offset: 10px;
              margin: 0;
            }
          }

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

            .sec--philosophy__intro-visual {
              width: 220px;
            }

            .sec--philosophy__intro-lead {
              width: 100%;

              .lead__copy {
                text-align: left;
              }
            }
          }
        }

        .sec--philosophy__body {
          max-width: 920px;
          width: 90%;
          margin: 0 auto;

          .sec--philosophy__signature {
            margin-top: clamp(20px, 15.146px + 1.294vw, 40px);

            .sec--philosophy__signature-position {
              font-family: var(--font-min);
              font-size: clamp(16px, 15.515px + 0.129vw, 18px);
              color: var(--color-ttl);
              text-align: end;
              margin: 0;
            }

            .sec--philosophy__signature-name {
              font-family: var(--font-min);
              font-size: clamp(16px, 15.515px + 0.129vw, 18px);
              color: var(--color-ttl);
              text-align: end;
              margin: 0;

              span {
                font-size: clamp(22px, 21.029px + 0.259vw, 26px);
                font-family: var(--font-min);
                color: var(--color-ttl);
                padding-left: clamp(10px, 7.573px + 0.647vw, 20px);
              }
            }
          }
        }
      }

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

    .sec--philosophy__video-area {
      width: clamp(375px, 100%, 650px);
      max-width: 650px;
      width: 90%;
      aspect-ratio: 16 / 9;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

      iframe {
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
    }
  }

  /* 入職支援金制度 */
  .sec--bonus {
    .sec--bonus__bg {
      background: url(../img/recruit/recruit-bonus-bg.webp);
      background-size: cover;
      background-position: bottom center;
      background-repeat: no-repeat;
      padding-top: clamp(60px, 45.437px + 3.883vw, 120px);
      padding-bottom: clamp(70px, 55.437px + 3.883vw, 130px);

      .sec--bonus__inner {
        max-width: 920px;
        width: 90%;
        margin: 0 auto;

        .sec--bonus__header {
          .sec--bonus__title {
            text-align: center;
            color: #fff;
            font-weight: 400;
            font-family: var(--font-min);
            font-size: clamp(24px, 22.058px + 0.518vw, 32px);
            margin-bottom: clamp(30px, 27.573px + 0.647vw, 40px);
            line-height: 1.6;

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

            .sec--bonus__title-main {
              font-family: var(--font-min);
              font-weight: 400;
              font-size: clamp(32px, 28.117px + 1.036vw, 48px);
              text-decoration: underline;
              text-decoration-color: #9e8d85;
              text-decoration-thickness: 1px;
              text-underline-offset: 10px;

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

        .sec--bonus__list {
          display: flex;
          justify-content: center;
          gap: clamp(30px, 27.573px + 0.647vw, 40px);

          .sec--bonus__item {
            text-align: center;
            width: calc((100% - (clamp(30px, 27.573px + 0.647vw, 40px) * 2)) / 3);
            max-width: 768px;

            .sec--bonus__amount {
              font-size: clamp(18px, 16.544px + 0.388vw, 24px);
              color: #fff;
              font-weight: 400;
              font-family: var(--font-min);
              margin: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: clamp(0px, -10.870px + 1.087vw, 10px);

              .sec--bonus__amount-num {
                font-size: clamp(40px, 38.786px + 0.324vw, 45px);
                color: #fff;
                font-weight: 400;
                font-family: var(--font-min);
                padding-bottom: 10px;
              }

              &::before {
                content: "";
                display: block;
                width: 1px;
                height: 40px;
                margin: 0 5px 5px 0;
                background-color: #fff;
                transform: rotate(-25deg);
              }

              &::after {
                content: "";
                display: block;
                width: 1px;
                height: 40px;
                margin: 0 0 5px 5px;
                background-color: #fff;
                transform: rotate(25deg);
              }
            }

            .sec--bonus__link {
              position: relative;
              display: flex;
              align-items: center;
              justify-content: space-between;
              background-color: #fff;
              color: #5d4a3a;
              text-decoration: none;
              padding: 15px 25px;
              border-radius: 4px;
              transition: all 0.3s ease;

              .sec--bonus__job-name {
                font-size: clamp(18px, 17.029px + 0.259vw, 22px);
                color: var(--color-ttl);
                font-family: var(--font-min);
                margin: 0;
                flex-grow: 1;
                text-align: center;
              }

              &::after {
                content: "";
                position: absolute;
                right: clamp(9px, 2.478px + 0.652vw, 15px);
                top: 50%;
                transform: translateY(-50%);
                width: clamp(20px, 9.130px + 1.087vw, 30px);
                height: 1px;
                background-color: #5d4a3a;
              }

              &::before {
                content: "";
                position: absolute;
                right: clamp(10px, 3.478px + 0.652vw, 16px);
                top: 50%;
                width: clamp(6px, 1.652px + 0.435vw, 10px);
                height: clamp(6px, 1.652px + 0.435vw, 10px);
                border-top: 1px solid #5d4a3a;
                transform: translateY(-50%) rotate(45deg);
                z-index: 1;
              }

              &:hover {
                opacity: 0.8;
              }
            }
          }

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

            .sec--bonus__item {
              width: 100%;
            }
          }
        }
      }

      .txt-notice {
        max-width: 920px;
        margin: 10px auto 0;
        text-align: left;
        font-size: clamp(14px, 13.029px + 0.259vw, 18px);
        color: #fff;
        font-family: var(--font-min);
      }

      @media screen and (max-width: 768px) {
        background: url(../img/recruit/recruit-bonus-bg_sp.webp);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
      }
    }
  }

  /* 働きやすい職場づくり */
  .sec--environment {
    background-color: #f7f5f5;

    .sec--philosophy__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

      .environment-grid {
        position: relative;
        display: block;
        max-width: 1200px;
        width: 90%;
        margin: 0 auto;

        .env-card {
          position: absolute;
          top: 0;
          left: 0;
          margin: 0 !important;
          box-sizing: border-box;
          transition: transform 0.4s;
          border-radius: 4px;
          background: #FFF;
          box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
          padding: clamp(20px, 17.573px + 0.647vw, 30px);

          .env-card__img {
            margin: 0;

            .accordion_icon {
              display: none;
            }

            .env-card__ttl {
              font-size: clamp(18px, 16.544px + 0.388vw, 24px);
              color: var(--color-ttl);
              font-family: var(--font-min);
              line-height: 1.4;
              font-weight: 400;
              margin-top: clamp(0.625rem, 0.322rem + 1.294vw, 1.875rem);
            }
          }

          .env-card__content {
            margin-top: clamp(0.938rem, 0.862rem + 0.324vw, 1.25rem);
          }
        }
      }
    }

    @media screen and (max-width: 768px) {
      .sec--philosophy__inner {
        padding-left: 20px;
        padding-right: 20px;

        .environment-grid {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 20px;

          .env-card {
            position: static;
            width: 100% !important;
            padding: 20px;
            cursor: pointer;

            .env-card__img {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              gap: 10px;

              img {
                flex-shrink: 0;
                width: 100%;
                max-width: 100px;
                height: auto;
              }

              .env-card__ttl {
                flex-grow: 1;
                font-size: clamp(18px, 16.544px + 0.388vw, 24px);
                color: var(--color-ttl);
                font-family: var(--font-min);
                line-height: 1.4;
                font-weight: 400;
                margin: 0;
              }

              .accordion_icon {
                display: block;
                flex-shrink: 0;
                background: url(../img/icon-open.webp);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                width: 24px;
                height: 24px;
              }
            }

            .env-card__content {
              overflow: hidden;
              max-height: 0;
              opacity: 0;
              padding-top: 0;
              margin: 0;
              transition: max-height 0.6s ease-in-out, opacity 0.6s ease-in-out, padding-top 0.6s ease-in-out;

              .env-card__txt {
                color: #242424;
                padding-top: 15px;
                margin: 0;
              }
            }

            &.is-open {
              .env-card__img {}

              .env-card__content {
                max-height: 500px;
                opacity: 1;
                padding-top: clamp(15px, 13.786px + 0.324vw, 20px);
              }

              .accordion_icon {
                background-image: url(../img/icon-close.webp);
              }
            }
          }
        }
      }
    }
  }

  /* 充実した教育制度 */
  .sec-training {
    background: url(../img/recruit/training-back.webp);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    .sec-training__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

      .sec-training__list {
        max-width: 1200px;
        width: 90%;
        margin: 0 auto;

        .sec-training__item {
          background-color: #fff;
          padding: clamp(30px, 22.718px + 1.942vw, 60px);
          display: flex;
          position: relative;
          gap: clamp(20px, 12.718px + 1.942vw, 50px);
          box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
          border-radius: 4px;

          .sec-training__item-content {
            width: calc(100% - (clamp(20px, 12.718px + 1.942vw, 50px) / 2));
            z-index: 5;

            .sec-training__item-title {
              font-size: clamp(22px, 20.544px + 0.388vw, 28px);
              font-family: var(--font-min);
              color: var(--color-ttl);
              font-weight: 400;
              display: block;
              width: 100%;
              border-bottom: 2px dotted #9E8D85;
              padding-bottom: 10px;
              margin-bottom: 20px;
            }
          }

          .sec-training__item-img {
            width: calc(100% - (clamp(20px, 12.718px + 1.942vw, 50px) / 2));

            img {
              border-radius: 4px;
            }
          }

          .sec-training__item-number {
            position: absolute;
            bottom: -0.8rem;
            left: 0;
            line-height: 1;
            font-size: clamp(200px, 187.864px + 3.236vw, 250px);
            font-family: var(--font-min);
            font-weight: 400;
            color: #F2F2F2;
            z-index: 1;
          }

          &:nth-child(even) {
            flex-direction: row-reverse;

            .sec-training__item-number {
              left: auto;
              /* ★ここを追加して、左の指定を打ち消す */
              right: 0;
              /* ★右側に配置 */
            }
          }

          @media screen and (max-width: 768px) {
            flex-direction: column-reverse;

            .sec-training__item-content {
              max-width: none;
            }

            .sec-training__item-img {
              max-width: none;
            }

            &:nth-child(even) {
              flex-direction: column-reverse;
            }
          }
        }

        .sec-training__item+.sec-training__item {
          margin-top: clamp(20px, 10.291px + 2.589vw, 60px);
        }
      }
    }
  }

  /* 数字で見る大城皮フ科クリニック */
  .sec-data {
    background-color: #f7f5f5;

    .sec-data__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

      .sec-data__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(20px, 12.718px + 1.942vw, 50px);
        max-width: 1200px;
        width: 90%;
        margin: 0 auto;

        .sec-data__item {
          border-radius: 4px;
          background: #FFF;
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.10);
          padding: clamp(20px, 17.573px + 0.647vw, 30px);
          position: relative;

          .sec-data__item-title {
            font-size: clamp(14px, 11.573px + 0.647vw, 24px);
            font-family: var(--font-min);
            color: var(--color-ttl);
            border-bottom: 2px dotted var(--color-ttl);
            padding-bottom: 10px;
            margin-bottom: 30px;
            font-weight: 400;
          }

          .sec-data__item-content {
            width: 100%;
            text-align: center;
            position: relative;
            z-index: 5;

            .main_txt {
              font-size: clamp(50px, 37.864px + 3.236vw, 100px);
              font-family: var(--font-min);
              font-weight: 400;
              background: linear-gradient(270deg, #ED5B5B 0%, #F19256 100%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              margin: 0;
              line-height: 1.3;
            }

            .min_txt {
              font-size: clamp(25px, 20.146px + 1.294vw, 45px);
              font-family: var(--font-min);
              font-weight: 400;
              margin: 0;
            }

            .sub_txt {
              font-size: clamp(14px, 13.029px + 0.259vw, 18px);
              color: #9E8D85;
              text-align: right;
              margin: 0;
            }

            .sec-data__item-content-list {
              display: flex;
              gap: clamp(10px, 8.786px + 0.324vw, 15px);
              margin: 0 auto;

              .sec-data__item-content-list__item {
                width: calc((100% - (clamp(10px, 8.786px + 0.324vw, 15px) * 2)) / 3);

                .main_txt {
                  border-bottom: 1px solid #9E8D85;
                  padding-bottom: 0;
                  margin-bottom: 10px;
                }

                .sub_txt {
                  text-align: center;
                }

                &:nth-child(1) {
                  .main_txt {
                    background: linear-gradient(#F09056);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }

                  .min_txt {
                    background: linear-gradient(#F09056);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                }

                &:nth-child(2) {
                  .main_txt {
                    background: linear-gradient(#EF7659);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }

                  .min_txt {
                    background: linear-gradient(#EF7659);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                }

                &:nth-child(3) {
                  .main_txt {
                    background: linear-gradient(#ED5D5B);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }

                  .min_txt {
                    background: linear-gradient(#ED5D5B);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                }
              }
            }
          }

          .sec-data__item-box {
            .sec-data__item-img {
              img {
                max-width: 385px;
                width: 100%;
                height: 100%;
              }
            }

            .sec-data__item-content {
              text-align: right;

              .main_txt {
                text-align: right;
              }
            }
          }

          .sec-data__item-txt {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            color: #9E8D85;
            line-height: 1.7;
          }

          &:nth-child(2) {
            &::before {
              position: absolute;
              content: "";
              bottom: clamp(20px, 17.573px + 0.647vw, 30px);
              left: clamp(20px, 17.573px + 0.647vw, 30px);
              width: 100px;
              height: 100px;
              background: url(../img/recruit/sec-data02.webp);
              background-repeat: no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }

          &:nth-child(3) {
            &::before {
              position: absolute;
              content: "";
              bottom: clamp(20px, 17.573px + 0.647vw, 30px);
              left: clamp(20px, 17.573px + 0.647vw, 30px);
              width: 100px;
              height: 90px;
              background: url(../img/recruit/sec-data03.webp);
              background-repeat: no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }

          &:nth-child(4) {
            &::before {
              position: absolute;
              content: "";
              bottom: clamp(20px, 17.573px + 0.647vw, 30px);
              left: clamp(20px, 17.573px + 0.647vw, 30px);
              width: 100px;
              height: 100px;
              background: url(../img/recruit/sec-data04.webp);
              background-repeat: no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }

          &:nth-child(5) {
            &::before {
              position: absolute;
              content: "";
              bottom: clamp(20px, 17.573px + 0.647vw, 30px);
              left: clamp(20px, 17.573px + 0.647vw, 30px);
              width: clamp(70px, 62.718px + 1.942vw, 100px);
              height: clamp(67px, 59.961px + 1.877vw, 96px);
              background: url(../img/recruit/sec-data05-02.webp);
              background-repeat: no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }

          &:nth-child(6) {
            &::before {
              position: absolute;
              content: "";
              top: 160px;
              left: clamp(20px, 17.573px + 0.647vw, 30px);
              width: 100px;
              height: 100px;
              background: url(../img/recruit/sec-data06.webp);
              background-repeat: no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }
        }

        @media screen and (max-width: 1200px) {
          .sec-data__list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            width: 100%;
          }

          .sec-data__item {
            grid-column: span 2;
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

            .sec-data__item-title {
              text-align: center;
            }

            .sec-data__item-box {
              .sec-data__item-img {
                img {
                  max-width: 100%;
                }
              }
            }

            &:nth-child(2) {
              &::before {
                display: none;
              }
            }

            &:nth-child(3) {
              &::before {
                display: none;
              }
            }

            &:nth-child(4) {
              &::before {
                display: none;
              }
            }

            &:nth-child(6) {
              &::before {
                display: none;
              }
            }
          }

          .sec-data__item:nth-child(3),
          .sec-data__item:nth-child(4) {
            grid-column: span 1;
          }
        }
      }
    }
  }

  /* 新しく入職する皆さまへ */
  .common-modal__content {
    padding: 0;
  }

  .sec--message {
    background: url(../img/recruit/voice-back.webp);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    .sec--message__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
      max-width: 1200px;
      width: 90%;
      margin: 0 auto;

      .voice__staff-list {
        display: flex;
        justify-content: center;
        gap: clamp(15px, 13.786px + 0.324vw, 20px);
        margin-bottom: clamp(60px, 45.437px + 3.883vw, 120px);

        .voice__staff-item {
          max-width: clamp(160px, 129.660px + 8.091vw, 285px);
          transition: ease-in 0.2s;

          .voice__staff-image {
            position: relative;
            margin: 0;

            img {
              border-radius: 4px;
            }

            .voice__icon {
              position: absolute;
              bottom: 10px;
              right: 10px;
              border-radius: 100px;
              width: 35px;
              height: 35px;
              box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
              background: url(../img/recruit/voice-staff_icon.webp);
              background-size: cover;
              background-position: bottom center;
              background-repeat: no-repeat;

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

          &:hover {
            opacity: .7;
          }
        }

        @media screen and (max-width: 768px) {
          display: grid;
          grid-template-columns: repeat(2, 1fr);

          .voice__staff-item {
            max-width: 100%;
            transition: ease-in 0.2s;

            .voice__staff-image {
              position: relative;

              img {
                border-radius: 4px;
              }
            }

            &:hover {
              opacity: .7;
            }
          }
        }
      }

      .voice__staff-modal {
        .voice-staff__content {
          max-height: 840px;
          padding-top: clamp(60px, 55.146px + 1.294vw, 80px);
          padding-bottom: clamp(60px, 55.146px + 1.294vw, 80px);
          padding-left: clamp(40px, 25.437px + 3.883vw, 100px);
          padding-right: clamp(40px, 25.437px + 3.883vw, 100px);

          .modal-voice__body {
            height: clamp(490px, 443.883px + 12.298vw, 680px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: #432815 #d6c8c2;

            .voice-modal__header {
              display: flex;
              gap: clamp(10px, 5.146px + 1.294vw, 30px);
              align-items: end;
              justify-content: center;
              width: 100%;
              margin: 0 auto clamp(40px, 35.146px + 1.294vw, 60px);

              img {
                width: clamp(180px, 163.010px + 4.531vw, 250px);
                height: clamp(180px, 163.010px + 4.531vw, 250px);
              }

              .voice-modal__profile {
                .voice-modal__post {
                  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                  color: #9E8D85;
                  font-family: var(--font-en);
                  margin: 0 0 5px;
                  text-align: start;
                }

                .voice-modal__name {
                  font-size: clamp(18px, 15.573px + 0.647vw, 28px);
                  color: var(--color-ttl);
                  font-weight: 400;
                  font-family: var(--font-min);
                  margin: 0;
                  text-align: start;
                }
              }

              @media screen and (max-width: 768px) {
                flex-direction: column;
                align-items: center;

                .voice-modal__profile {
                  .voice-modal__post {
                    text-align: center;
                  }

                  .voice-modal__name {
                    text-align: center;
                  }
                }
              }
            }

            /* Q&Aセクション */
            .interview-contents {
              width: 90%;
              max-width: 1200px;
              margin: 0 auto;

              .interview-qa__text {
                flex: 1;
                max-width: 100%;

                .interview-qa__question {
                  display: flex;
                  width: 100%;
                  border-bottom: 1px solid var(--color-ttl);
                  align-items: baseline;
                  padding-bottom: 10px;
                  margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

                  .question_mark {
                    font-size: clamp(24px, 21.573px + 0.647vw, 34px);
                    font-family: var(--font-min);
                    font-weight: 400;
                    color: var(--color-ttl);
                    padding-right: 10px;
                    vertical-align: middle;
                    line-height: 0.8;
                  }

                  .question_ttl {
                    font-size: clamp(18px, 15.573px + 0.647vw, 28px);
                    font-family: var(--font-min);
                    font-weight: 400;
                    color: var(--color-ttl);
                    text-align: start;
                  }
                }

                .interview-qa__answer {
                  line-height: 1.8;
                  text-align: start;
                }

                @media screen and (max-width: 768px) {}
              }
            }

            .interview-qa__text+.interview-qa__text {
              margin-top: clamp(50px, 42.718px + 1.942vw, 80px);
            }
          }

          @media screen and (max-width: 768px) {
            height: 80svh;
          }
        }
      }

      .voice__content {
        display: flex;
        gap: clamp(40px, 37.573px + 0.647vw, 50px);

        .voice__text-box {
          max-width: 500px;

          .voice__content-title {
            font-size: clamp(22px, 20.544px + 0.388vw, 28px);
            font-family: var(--font-min);
            font-weight: 400;
            line-height: 2.1;
            color: var(--color-ttl);
            margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);
            text-decoration: underline;
            text-decoration-color: #9e8d85;
            text-decoration-thickness: 1px;
            text-underline-offset: 10px;
          }
        }

        .voice__video {
          width: clamp(375px, 100%, 650px);
          max-width: 650px;
          width: 100%;
          aspect-ratio: 16 / 9;
          margin-left: auto;
          margin-right: auto;

          iframe {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }

        @media screen and (max-width: 768px) {
          flex-direction: column;
        }
      }
    }
  }

  /* 採用までの流れ */
  .sec-recruit-flow {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
    max-width: 920px;
    width: 90%;
    margin: 0 auto;

    .recruit-flow__list {
      .recruit-flow__item {
        display: grid;
        grid-template-columns: 80px 1fr;
        column-gap: 20px;
        align-items: center;

        .flow__num {
          position: relative;
          font-family: var(--font-min);
          color: var(--color-ttl);
          font-weight: 500;
          font-size: clamp(30px, 25.146px + 1.294vw, 50px);
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 0;

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

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: url("../img/symbol-normal.svg") center center / contain no-repeat;
            width: 80px;
            height: 80px;
            display: inline-block;
            z-index: -1;

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

        .flow__ttl {
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          font-family: var(--font-min);
          font-weight: 400;
          color: var(--color-ttl);
          align-self: center;
        }

        .flow__contents {
          grid-column: 2;
          position: relative;
          padding-top: 20px;
          padding-bottom: clamp(70px, 62.718px + 1.942vw, 100px);
          margin-bottom: 15px;

          .flow__txt_link {
            display: inline-block;
            text-decoration: underline;
            text-decoration-color: #242424;
            text-decoration-thickness: 1px;
            text-underline-offset: 5px;
            margin-top: 20px;

            &:hover {
              opacity: .7;
            }
          }

          &::before {
            content: "";
            position: absolute;
            left: -60px;
            top: 10px;
            width: 1px;
            height: calc(100% - 10px);
            background-color: #EFEAE6;
            display: block;
          }
        }

        &:nth-child(6) {
          .flow__contents {
            grid-column: 2;
            position: relative;
            padding-top: 20px;
            padding-bottom: 0;
            margin-bottom: 0;

            &::before {
              display: none;
            }
          }
        }

        @media screen and (max-width: 768px) {
          grid-template-columns: 50px 1fr;

          .flow__contents {
            grid-column: 1 / 3;
            margin-bottom: 0;
          }

          &:nth-child(6) {
            .flow__contents {
              grid-column: 1 / 3;
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  /* よくご質問いただくこと */
  .sec--faq {
    background-color: #F7F5F5;

    .sec--jobs__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
      max-width: 920px;
      width: 90%;
      margin: 0 auto;

      .faq__list {
        .faq__item {
          display: grid;
          grid-template-columns: 32px 1fr;
          column-gap: 20px;

          .faq__mark {
            font-size: clamp(30px, 27.573px + 0.647vw, 40px);
            font-family: var(--font-min);
            color: var(--color-ttl);
            line-height: 1.2;
          }

          .faq__ttl {
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            font-family: var(--font-en);
            color: var(--color-ttl);
            font-weight: 400;
            align-self: center;
          }

          .faq__contents {
            grid-column: 2;
            position: relative;
            padding-top: 10px;
          }
        }
      }
    }
  }
}

/*--------------------
求人詳細
--------------------*/
.page-recruit-doctor,
.page-recruit-nurse,
.page-recruit-medical-affairs {
  .lower-header {
    background-image: url("../img/recruit/page-ttl.webp");

    @media (max-width: 767px) {
      background-image: url("../img/recruit/page-ttl_sp.webp");
    }
  }

  .aside-list {
    margin-top: auto;
  }

  /* タイトル */
  .lower-header {
    padding-bottom: 0;

    .lower-header__inner {
      .lower-header__en {
        text-align: center;
        color: #fff;
      }

      .lower-header__ja {
        text-align: center;
        color: #fff;
      }
    }
  }

  .sec-ttl--bilingual-layer-medium {
    .ja {
      color: var(--color-ttl);
    }
  }

  .container {
    margin: auto;
  }

  /* 入職時の負担軽減支援金制度 */
  .sec--allowance-support {
    .sec--bonus__bg {
      background: url(../img/recruit-details/sec--allowance-support_back.webp);
      background-size: cover;
      background-position: bottom center;
      background-repeat: no-repeat;
      padding-top: clamp(60px, 45.437px + 3.883vw, 120px);
      padding-bottom: clamp(70px, 55.437px + 3.883vw, 130px);

      .sec--bonus__inner {
        max-width: 1200px;
        width: 90%;
        margin: 0 auto;

        .sec--bonus__header {
          .sec--bonus__title {
            text-align: center;
            color: var(--color-ttl);
            font-weight: 400;
            font-family: var(--font-min);
            font-size: clamp(24px, 22.058px + 0.518vw, 32px);
            margin-bottom: clamp(30px, 27.573px + 0.647vw, 40px);

            .sec--bonus__title-main {
              font-family: var(--font-min);
              font-weight: 600;
              font-size: clamp(32px, 28.117px + 1.036vw, 48px);
              text-decoration: underline;
              text-decoration-color: #9e8d85;
              text-decoration-thickness: 1px;
              text-underline-offset: 10px;

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

        .sec--bonus__list {
          max-width: 920px;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          gap: clamp(5px, 1.359px + 0.971vw, 20px);

          .sec--bonus__item {
            text-align: center;
            width: calc((100% - (clamp(5px, 1.359px + 0.971vw, 20px) * 2)) / 3);
            border-radius: 4px;
            background: #FFF;
            box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.10);
            padding-top: clamp(15px, 11.359px + 0.971vw, 30px);
            padding-bottom: clamp(0px, -2.427px + 0.647vw, 10px);
            padding-left: clamp(5px, -10.777px + 4.207vw, 70px);
            padding-right: clamp(5px, -10.777px + 4.207vw, 70px);

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

            .sec--bonus__term {
              padding: 5px 16px;
              background-color: #9E8D85;
              font-size: clamp(10px, 8.058px + 0.518vw, 18px);
              border-radius: 50px;
              color: #fff;
              margin: 0 0 clamp(5px, -0.435px + 0.543vw, 10px) 0;
            }

            .sec--bonus__amount {
              font-size: clamp(18px, 14.602px + 0.906vw, 32px);
              color: var(--color-ttl);
              font-weight: 600;
              font-family: var(--font-min);
              margin: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 5px;
              line-height: 1;

              .sec--bonus__amount-num {
                font-size: clamp(38px, 31.689px + 1.683vw, 64px);
                line-height: 1;
                color: var(--color-ttl);
                font-weight: 600;
                line-height: 1;
                font-family: var(--font-min);
                padding-bottom: clamp(15px, 13.786px + 0.324vw, 20px);
              }
            }
          }
        }

        .txt-notice {
          max-width: 920px;
          margin: 10px auto 0;
          text-align: left;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          color: var(--color-ttl);
          font-family: var(--font-min);
        }
      }

      @media screen and (max-width: 768px) {
        background: url(../img/recruit-details/sec--allowance-support_back_sp.webp);
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;

        .sec--bonus__inner {
          .sec--bonus__header {
            .sec--bonus__title {
              text-align: left;
              line-height: 1.7;
            }
          }
        }
      }
    }
  }

  /* メッセージ */
  .sec--message {
    padding-top: 0;

    .sec--philosophy__inner {
      background: url(../img/recruit-details/sec--message_back.jpg);
      background-size: cover;
      background-position: bottom center;
      background-repeat: no-repeat;
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
      padding-left: 40px;
      padding-right: 40px;

      .sec--philosophy__content {
        margin: 0 auto;

        .sec--philosophy__intro {
          display: flex;
          align-items: center;
          gap: clamp(20px, 15.146px + 1.294vw, 40px);
          max-width: 920px;
          width: 90%;
          margin: 0 auto clamp(20px, 15.146px + 1.294vw, 40px);

          .sec--philosophy__intro-visual {
            max-width: 260px;
            width: 35%;
            flex-shrink: 0;
          }

          .sec--philosophy__intro-lead {
            .lead__copy {
              font-size: clamp(22px, 20.544px + 0.388vw, 28px);
              font-family: var(--font-min);
              font-weight: 300;
              color: var(--color-ttl);
              line-height: 2.1;
              text-decoration: underline;
              text-decoration-color: #9e8d85;
              text-decoration-thickness: 1px;
              text-underline-offset: 10px;
              margin: 0;
            }
          }

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

            .sec--philosophy__intro-visual {
              width: 220px;
            }

            .sec--philosophy__intro-lead {
              width: 100%;

              .lead__copy {
                line-height: 2.2;
                text-align: left;
              }
            }
          }
        }

        .sec--philosophy__body {
          max-width: 920px;
          width: 90%;
          margin: 0 auto;

          .sec--philosophy__signature {
            margin-top: clamp(20px, 15.146px + 1.294vw, 40px);

            .sec--philosophy__signature-position {
              font-family: var(--font-min);
              font-size: clamp(16px, 15.515px + 0.129vw, 18px);
              color: var(--color-ttl);
              text-align: end;
              margin: 0;
            }

            .sec--philosophy__signature-name {
              font-family: var(--font-min);
              font-size: clamp(16px, 15.515px + 0.129vw, 18px);
              color: var(--color-ttl);
              text-align: end;
              margin: 0;

              span {
                font-size: clamp(22px, 21.029px + 0.259vw, 26px);
                font-family: var(--font-min);
                color: var(--color-ttl);
                padding-left: clamp(10px, 7.573px + 0.647vw, 20px);
              }
            }
          }
        }
      }

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

  /* キャリアプラン */
  .sec--career-plan {
    background-color: #F7F5F5;
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .sec--career__inner {
      max-width: 920px;
      width: 90%;
      margin: 0 auto;

      .career-cards__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(40px, 37.573px + 0.647vw, 50px);
        margin-bottom: clamp(80px, 75.146px + 1.294vw, 100px);

        .career-cards__item {
          .career-cards__title {
            position: relative;
            font-size: clamp(18px, 17.029px + 0.259vw, 22px);
            font-family: var(--font-min);
            font-weight: 400;
            color: var(--color-ttl);
            margin-bottom: 10px;
            padding-left: clamp(10px, 8.786px + 0.324vw, 15px);

            &::before {
              position: absolute;
              content: "";
              width: clamp(3px, 2.515px + 0.129vw, 5px);
              height: 100%;
              left: 0;
              background-color: var(--color-ttl);
            }
          }
        }

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

      .career-detail-box {
        padding: clamp(30px, 25.146px + 1.294vw, 50px);
        border-radius: 4px;
        background: #FFF;

        .career-detail-box__lead {
          font-size: clamp(22px, 19.573px + 0.647vw, 32px);
          color: var(--color-ttl);
          font-family: var(--font-min);
          font-weight: 400;
          line-height: 1.8;
          text-align: center;
          text-decoration: underline;
          text-decoration-color: #9e8d85;
          text-decoration-thickness: 1px;
          text-underline-offset: 10px;
          margin-bottom: clamp(30px, 27.573px + 0.647vw, 40px);

          @media (max-width: 767px) {
            text-align: left;
            line-height: 2.2;
          }
        }
      }
    }
  }

  /* 当院で活躍中の医師の声 */
  .sec--interview {
    background-color: #FEFBF8;

    .sec--interview__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

      .interview-container {

        /* 紹介 */
        .interview-item {

          /* 名前 */
          .interview-profile {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            /* height: clamp(180px, 114.466px + 17.476vw, 450px); */
            overflow: hidden;
            margin-bottom: clamp(50px, 37.864px + 3.236vw, 100px);

            .interview-profile__image {
              border-radius: 4px;
              overflow: hidden;

              /* height: clamp(180px, 114.466px + 17.476vw, 450px); */
              @media (max-width: 767px) {
                border-radius: 0;
                aspect-ratio: 375 / 183;
              }

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

            .interview-profile__info {
              position: absolute;
              left: 0;
              bottom: clamp(40px, 35.146px + 1.294vw, 60px);
              padding-left: clamp(20px, -21.262px + 11.003vw, 190px);
              display: inline-block;

              .interview-profile__post {
                font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                color: #9E8D85;
                font-family: var(--font-en);
                margin: 0;
              }

              .interview-profile__name {
                font-size: clamp(22px, 20.058px + 0.518vw, 30px);
                font-family: var(--font-min);
                color: var(--color-ttl);
                font-weight: 400;

                span {
                  font-size: clamp(14px, 13.029px + 0.259vw, 18px);
                  color: var(--color-ttl);
                  font-family: var(--font-en);
                  margin: 0;
                  padding-left: clamp(5px, 3.786px + 0.324vw, 10px);
                }
              }
            }

            @media screen and (max-width: 768px) {
              width: 100%;
            }
          }

          /* Q&Aセクション */
          .interview-contents {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;

            .interview-qa {
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: clamp(20px, 12.718px + 1.942vw, 50px);
              width: 100%;

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

              &:has(.interview-qa__image):nth-of-type(even) {
                flex-direction: row-reverse;
              }

              .interview-qa__text {
                flex: 1;
                max-width: 100%;

                .interview-qa__question {
                  display: flex;
                  width: 100%;
                  border-bottom: 1px solid var(--color-ttl);
                  align-items: baseline;
                  padding-bottom: 10px;
                  margin-bottom: clamp(20px, 17.573px + 0.647vw, 30px);

                  .question_mark {
                    font-size: clamp(30px, 27.573px + 0.647vw, 40px);
                    font-family: var(--font-min);
                    font-weight: 400;
                    color: var(--color-ttl);
                    padding-right: 10px;
                    vertical-align: middle;
                    line-height: 0.8;
                  }

                  .question_ttl {
                    font-size: clamp(20px, 19.029px + 0.259vw, 24px);
                    font-family: var(--font-min);
                    font-weight: 400;
                    color: var(--color-ttl);
                  }
                }

                .interview-qa__answer {
                  line-height: 1.8;
                }
              }

              .interview-qa__image {
                width: min(50%, 550px);

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

                img {
                  border-radius: 4px;
                }
              }

              &:nth-child(1),
              &:nth-child(5),
              &:nth-child(9) {
                flex-direction: row-reverse;

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

            .interview-qa+.interview-qa {
              margin-top: clamp(50px, 42.718px + 1.942vw, 80px);
            }
          }
        }

        .interview-item+.interview-item {
          margin-top: clamp(100px, 87.864px + 3.236vw, 150px);
        }
      }
    }
  }

  /* 1日のスケジュール */
  .sec--schedule {
    background: url(../img/recruit-details/sec--schedule_back.webp);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    .sec--schedule__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
      max-width: 920px;
      width: 90%;
      margin: 0 auto;

      .schedule-intro {
        text-align: center;
        margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);
      }

      .schedule-list {
        padding: 0;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 2px;
          background-color: #E0CDC1;
          left: clamp(7px, 6.515px + 0.129vw, 9px);
          z-index: 1;
          top: 15px;
          bottom: 0px;
        }

        .schedule-list__item {
          padding-left: clamp(30px, 25.146px + 1.294vw, 50px);
          position: relative;

          .schedule-header {
            display: flex;
            gap: clamp(20px, 17.573px + 0.647vw, 30px);
            margin-bottom: clamp(15px, 13.786px + 0.324vw, 20px);

            .schedule-time {
              font-size: clamp(20px, 18.058px + 0.518vw, 28px);
              color: var(--color-general);
              font-family: var(--font-min);
              font-weight: 400;
            }

            .schedule-label {
              font-size: clamp(20px, 18.058px + 0.518vw, 28px);
              color: var(--color-general);
              font-family: var(--font-min);
              font-weight: 400;
            }
          }

          .schedule-content {
            .schedule-text {
              border-radius: 4px;
              background: #FFF;
              box-shadow: 0 0 25px 0 rgba(79, 23, 23, 0.10);
              padding: clamp(15px, 13.786px + 0.324vw, 20px);
            }

            .schedule-media {
              margin-top: clamp(20px, 17.573px + 0.647vw, 30px);

              .schedule-figure {
                display: flex;
                gap: clamp(20px, 22.427px + -0.647vw, 10px);
                margin: 0;

                img {
                  border-radius: 4px;
                  width: 100%;
                  max-width: clamp(305px, 298px + 1.8vw, 320px);
                  height: auto;
                }

                .schedule-caption {
                  display: block;
                  align-self: flex-start;
                  position: relative;
                  margin-top: auto;
                  padding: 20px 30px;
                  background-color: var(--color-general);
                  border-radius: 80px;
                  color: #fff;
                  font-size: clamp(14px, 13.029px + 0.259vw, 18px);

                  &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 0 25px 25px 0;
                    border-color: transparent var(--color-general) transparent transparent;
                    transform: translate(2px, -3px) rotate(145deg);
                  }

                  &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    background: url(../img/recruit-details/sec--schedule_logomark.webp);
                    background-size: cover;
                    background-position: bottom center;
                    background-repeat: no-repeat;
                    width: clamp(72px, 64.718px + 1.942vw, 102px);
                    height: clamp(72px, 64.718px + 1.942vw, 102px);
                  }
                }

                @media screen and (max-width: 768px) {
                  flex-direction: column;

                  .schedule-caption {
                    &::before {
                      content: "";
                      position: absolute;
                      top: -5px;
                      left: 50%;
                      width: 0;
                      height: 0;
                      border-style: solid;
                      border-width: 0 25px 25px 0;
                      border-color: transparent var(--color-general) transparent transparent;
                      transform: translate(-50%, 0) rotate(-43deg);
                    }
                  }
                }
              }
            }
          }

          &::before {
            content: "";
            position: absolute;
            width: clamp(15px, 13.786px + 0.324vw, 20px);
            height: clamp(15px, 13.786px + 0.324vw, 20px);
            background-color: var(--color-general);
            border-radius: 50px;
            top: clamp(0.5rem, 0.364rem + 0.217vw, 0.625rem);
            left: 0;
            z-index: 5;
          }
        }

        .after {
          position: relative;

          .schedule-header {
            .schedule-time {
              color: var(--color-beauty);
              font-family: var(--font-min);
            }

            .schedule-label {
              color: var(--color-beauty);
              font-family: var(--font-min);
            }

            &::before {
              background-color: var(--color-beauty);
            }
          }

          .schedule-content {
            .schedule-media {
              .schedule-figure {
                display: flex;
                gap: clamp(20px, 22.427px + -0.647vw, 10px);
                margin: 0;

                .schedule-caption {
                  background-color: var(--color-beauty);

                  &::before {
                    border-color: transparent var(--color-beauty) transparent transparent;
                  }
                }

                @media screen and (max-width: 768px) {
                  flex-direction: column;
                }
              }
            }
          }

          &::before {
            content: "";
            position: absolute;
            background-color: var(--color-beauty);
            border-radius: 50px;
            top: clamp(0.5rem, 0.364rem + 0.217vw, 0.625rem);
            left: 0;
            z-index: 5;
          }
        }

        .schedule-list__item+.schedule-list__item {
          margin-top: clamp(50px, 47.573px + 0.647vw, 60px);
        }
      }
    }

    @media screen and (max-width: 768px) {
      background: url(../img/recruit-details/sec--schedule_back_sp.webp);
    }
  }

  /* 求める人物像 */
  .sec--ideal-candidate {
    background: url(../img/recruit-details/sec--ideal-candidate_back.webp);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;

    .ideal-candidate__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

      .ideal-candidate__list {
        max-width: 920px;
        width: 90%;
        margin: 0 auto;

        .ideal-candidate__item {
          border-radius: 4px;
          background: #FFF;
          box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
          padding-top: clamp(20px, 17.573px + 0.647vw, 30px);
          padding-bottom: clamp(20px, 17.573px + 0.647vw, 30px);
          padding-right: clamp(30px, 25.146px + 1.294vw, 50px);
          padding-left: clamp(30px, 25.146px + 1.294vw, 50px);

          .txt {
            position: relative;
            padding-left: clamp(1.563rem, 0.679rem + 1.413vw, 2.375rem);
            flex-shrink: 0;

            &::after {
              position: absolute;
              content: "";
              top: 5px;
              left: 0;
              width: clamp(15px, 13.786px + 0.324vw, 20px);
              height: clamp(15px, 13.786px + 0.324vw, 20px);
              background: url(../img/recruit-details/check-icon.webp) no-repeat center center / contain;
            }
          }
        }

        .ideal-candidate__item+.ideal-candidate__item {
          margin-top: 20px;
        }
      }
    }

    @media screen and (max-width: 768px) {
      background: url(../img/recruit-details/sec--ideal-candidate_back_sp.webp);

      .ideal-candidate__inner {
        .ideal-candidate__list {
          .ideal-candidate__item {
            align-items: flex-start;

            .check-icon {
              margin-top: 4px;
            }
          }

          .ideal-candidate__item+.ideal-candidate__item {
            margin-top: 20px;
          }
        }
      }
    }
  }

  /* 入職支援金制度 */
  .sec--incentive {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .sec--incentive__inner {
      max-width: 920px;
      width: 90%;
      margin: 0 auto;

      .txt-lead {
        text-align: center;
        margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);

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

      .sec--bonus__list {
        max-width: 920px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        gap: clamp(5px, 1.359px + 0.971vw, 20px);
        margin-bottom: clamp(20px, 15.146px + 1.294vw, 40px);

        .sec--bonus__item {
          text-align: center;
          width: calc((100% - (clamp(5px, 1.359px + 0.971vw, 20px) * 2)) / 3);
          border-radius: 4px;
          background: #F7F5F5;
          padding-top: clamp(15px, 11.359px + 0.971vw, 30px);
          padding-bottom: clamp(0px, -2.427px + 0.647vw, 10px);
          padding-left: clamp(5px, -10.777px + 4.207vw, 70px);
          padding-right: clamp(5px, -10.777px + 4.207vw, 70px);

          .sec--bonus__term {
            width: fit-content;
            padding: 0 16px;
            background-color: var(--color-ttl);
            font-size: clamp(10px, 8.058px + 0.518vw, 18px);
            border-radius: 50px;
            color: #fff;
            font-weight: 200;
            margin: 0 auto clamp(5px, -0.435px + 0.543vw, 10px) auto;
          }

          .sec--bonus__amount {
            font-size: clamp(18px, 14.602px + 0.906vw, 32px);
            color: var(--color-ttl);
            font-weight: 600;
            font-family: var(--font-min);
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            line-height: 1;

            .sec--bonus__amount-num {
              font-size: clamp(38px, 31.689px + 1.683vw, 64px);
              line-height: 1;
              color: var(--color-ttl);
              font-weight: 600;
              line-height: 1;
              font-family: var(--font-min);
              padding-bottom: clamp(15px, 13.786px + 0.324vw, 20px);
            }
          }
        }

        @media (max-width: 767px) {
          .sec--bonus__item {
            width: 100%;

            .sec--bonus__term {
              padding: 2px 16px;
            }
          }
        }
      }

      .sec--incentive__notice {
        margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);

        .txt-notice {
          max-width: 920px;
          margin: 0 auto;
          text-align: left;
          font-size: clamp(14px, 13.029px + 0.259vw, 18px);
          color: #242424;
          font-family: var(--font-en);
          line-height: 1.5;
        }

        .txt-notice+.txt-notice {
          margin-top: 10px;
        }
      }

      .sec--incentive__recommend {
        background: #F7F5F5;
        padding-top: clamp(30px, 27.573px + 0.647vw, 40px);
        padding-bottom: clamp(30px, 27.573px + 0.647vw, 40px);
        padding-left: clamp(30px, 25.146px + 1.294vw, 50px);
        padding-right: clamp(30px, 25.146px + 1.294vw, 50px);
        border-radius: 4px;

        .recommend-ttl {
          text-align: center;
          color: var(--color-beauty);
          font-size: clamp(22px, 20.544px + 0.388vw, 28px);
          font-family: var(--font-min);
          font-weight: 400;
          margin-bottom: 20px;
        }
      }
    }
  }

  /* 募集要項 */
  .sec--requirements {
    background: #F7F5F5;

    .sec--requirements__inner {
      padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
      padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);
      max-width: 920px;
      width: 90%;
      margin: 0 auto;

      /* タブ切り替え */
      .requirements-tab {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);
        list-style: none;
        padding: 0;

        .requirements-tab__item {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          width: calc(100% / 3);
          text-align: center;
          font-size: clamp(18px, 15.573px + 0.647vw, 28px);
          color: #9e8d85;
          padding-bottom: clamp(15px, 13.786px + 0.324vw, 20px);
          border-bottom: 1px #9e8d85 solid;
          transition: ease-in 0.2s;
          cursor: pointer;
          font-family: var(--font-min);

          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 100%;
            display: inline-block;
            border-style: solid;
            border-width: 15px 15px 0 15px;
            border-color: transparent;
            border-top-color: #432815;
            transform: translateX(-50%);
            opacity: 0;
            transition: ease-in 0.2s;
            z-index: 1;
          }

          /* アクティブ時およびホバー時の共通スタイル */
          &.is-active,
          &:hover {
            opacity: 1;
            border-bottom-color: #432815;
            color: #432815;

            &::after {
              opacity: 1;
            }
          }

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

            &::after {
              border-width: 8px 8px 0 8px;
            }
          }
        }
      }

      /* パネルの表示切り替え */
      .requirements-contents {
        .requirements-panel {
          display: none;

          &.is-show {
            display: block;
          }
        }
      }

      /* リスト（表）のスタイル */
      .requirements-list {
        background: #fff;
        padding: clamp(30px, 25.146px + 1.294vw, 50px);

        .requirements-list__row {
          display: flex;
          align-items: center;

          dt {
            width: 150px;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            font-weight: 400;
            color: var(--color-ttl);
            flex-shrink: 0;
            padding-top: 20px;
            padding-bottom: 20px;
          }

          dd {
            flex: 1;
            font-size: clamp(14px, 13.029px + 0.259vw, 18px);
            font-weight: 400;
            line-height: 1.8;
            padding-top: 20px;
            padding-bottom: 20px;
            margin-left: clamp(5px, -5.922px + 2.913vw, 50px);

            .txt-notice {
              font-size: clamp(10px, 9.029px + 0.259vw, 14px);
              color: #242424;
              font-family: var(--font-en);
              display: inline-block;
            }

            .salary-list,
            .holiday-list,
            .benefit-list {
              list-style: none;
              padding: 0;

              li {
                position: relative;
                padding-left: 1.2em;

                &::before {
                  content: "・";
                  position: absolute;
                  left: 0;
                }
              }
            }

            .salary-list+.salary-list {
              margin-top: 10px;
            }

            .requirements-list__sub-info {
              margin-top: 15px;
              font-size: 0.9em;
              color: #666;
            }
          }

          &:first-child {
            dt {
              padding-top: 0;
            }

            dd {
              padding-top: 0;
            }
          }

          &:last-child {
            dt {
              padding-bottom: 0;
            }

            dd {
              padding-bottom: 0;
            }

            @media (max-width: 767px) {
              dt {
                padding-bottom: 5px;
              }
            }
          }

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

            dt {
              width: 100%;
              padding-top: 20px;
              padding-bottom: 5px;
            }

            dd {
              width: 100%;
              margin-left: 0;
              padding-top: 0;
              padding-bottom: 20px;
            }
          }
        }

        .requirements-list__row+.requirements-list__row {
          border-top: 1px solid #ddd3cb;
        }
      }
    }
  }
}

/*--- 看護師,医療事務 ---*/
.page-recruit-nurse,
.page-recruit-medical-affairs {
  .sec--interview {
    .sec--interview__inner {
      .interview-container {
        .interview-item {
          .interview-profile {
            .interview-profile__info {

              .interview-profile__post,
              .interview-profile__name {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}

/*--------------------
メディア掲載 / 出演依頼のお問い合せ
--------------------*/
.page-inquiry-media {
  .breadcrumb {
    padding: 0 0 20px;
  }

  .sec--contact_profile {
    background: url(../img/contact/sec--contact_profile_back.webp);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .contact_profile_inner {
      max-width: 1200px;
      width: 90%;
      margin: 0 auto;

      /* メッセージ */
      .contact--message {
        margin-bottom: clamp(80px, 75.146px + 1.294vw, 100px);

        .message-inner {
          display: flex;
          gap: clamp(40px, 37.573px + 0.647vw, 50px);

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

          .message-visual {
            width: calc(50% - (clamp(40px, 37.573px + 0.647vw, 50px)));

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

            .doctor-photo {
              position: relative;

              figcaption {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                padding: clamp(12px, 11.272px + 0.194vw, 15px) 0;
                text-align: center;

                &::before {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background-color: #B09070;
                  mix-blend-mode: multiply;
                  z-index: 1;
                }
              }

              .doctor--name {
                position: relative;
                z-index: 2;
                color: #fff;
                font-size: clamp(18px, 16.544px + 0.388vw, 24px);
                font-family: var(--font-min);
                font-weight: 400;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;

                .doctor--name_signature {
                  font-size: clamp(12px, 10.544px + 0.388vw, 18px);
                  font-family: var(--font-min);
                  margin-right: clamp(15px, 12.573px + 0.647vw, 25px);

                  @media screen and (max-width: 768px) {
                    text-align: left;
                  }
                }
              }
            }
          }

          .message-text {
            width: 50%;

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

            .message-lead {
              font-size: clamp(18px, 16.544px + 0.388vw, 24px);
              font-family: var(--font-min);
              font-weight: 400;
              line-height: 2;
              text-decoration: underline;
              text-decoration-color: #9e8d85;
              text-decoration-thickness: 1px;
              text-underline-offset: 10px;
              margin-bottom: clamp(40px, 35.146px + 1.294vw, 60px);

              .txt__s--med {
                font-size: clamp(18px, 16.544px + 0.388vw, 24px);
                font-family: var(--font-min);
                font-weight: 400;
              }
            }
          }
        }
      }

      /* 事例紹介 */
      .record-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(40px, 35.146px + 1.294vw, 60px);
        margin-bottom: clamp(60px, 55.146px + 1.294vw, 80px);

        .record-column {
          max-width: clamp(335px, 234.272px + 26.861vw, 750px);
          width: 100%;
          height: auto;

          .record-title {
            font-family: var(--font-min);
            font-weight: 400;
            font-size: clamp(20px, 17.573px + 0.647vw, 30px);
            color: var(--color-ttl);
            align-items: center;
            display: flex;
            margin-bottom: 20px;

            &::after {
              content: "";
              flex-grow: 1;
              height: 1px;
              background: var(--color-ttl);
              margin-left: 10px;
            }
          }

          .record-list {
            li+li {
              margin-top: 10px;
            }
          }

          .directory-logos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(10px, 6.359px + 0.971vw, 25px);

            .logo-link {
              box-shadow: 0 0 15px 0 #EFE9E6;

              img {
                border-radius: 4px;
              }
            }
          }
        }

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

      /* 事例ギャラリー */
      .media-gallery {
        margin-bottom: clamp(80px, 75.146px + 1.294vw, 100px);

        .swiper-button-prev {
          display: none;
        }

        .swiper-button-next {
          display: none;
        }

        .swiper-pagination-bullet {
          border-radius: 10px;
          border: 1px solid var(--color-ttl);
          background: #FFF;
          opacity: 1;
        }

        .swiper-pagination-bullet-active {
          border-radius: 10px;
          background: var(--color-ttl);
        }

        .gallery-list {
          padding-bottom: clamp(48px, 47.515px + 0.129vw, 50px);

          .gallery-item {
            width: calc(100% / 3);

            .gallery-item_link {
              display: block;
              text-align: center;
              text-decoration: none;

              img {
                margin-bottom: 20px;
                border-radius: 4px;
                box-shadow: 0 0 10px 0 #EFEAE6;
              }

              .txt {
                display: inline-flex;
                align-items: center;
                position: relative;
                padding: 0 45px 5px 0;
                color: #242424;
                border-bottom: 1px solid #242424;

                /* 矢印の直線部分 */
                &::after {
                  content: "";
                  position: absolute;
                  right: 0;
                  bottom: 50%;
                  width: 35px;
                  height: 1px;
                  background-color: #242424;
                }

                /* 矢印の先端部分 */
                &::before {
                  content: "";
                  position: absolute;
                  right: 0;
                  bottom: 50%;
                  width: 8px;
                  border-top: 1px solid #242424;
                  transform: translateY(50%) rotate(45deg);
                  transform-origin: bottom right;
                }
              }
            }
          }
        }
      }

      /* 取材ポリシー  */
      .policy-box {
        border-radius: 4px;
        background: #FFF;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);

        .policy-inner {
          padding-top: clamp(30px, 22.718px + 1.942vw, 60px);
          padding-bottom: clamp(30px, 22.718px + 1.942vw, 60px);
          padding-left: clamp(30px, 5.728px + 6.472vw, 130px);
          padding-right: clamp(30px, 5.728px + 6.472vw, 130px);
          text-align: center;

          .policy-title {
            position: relative;
            display: inline-block;
            font-size: clamp(20px, 17.573px + 0.647vw, 30px);
            font-family: var(--font-min);
            font-weight: 400;
            color: var(--color-ttl);
            margin-bottom: clamp(30px, 27.573px + 0.647vw, 40px);
            padding-bottom: clamp(10px, 7.573px + 0.647vw, 20px);

            &::after {
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 1px;
              background: #9e8d85;
            }
          }

          .policy-text {
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
            text-align: left;

            .policy-note {
              margin: 0;
              font-size: clamp(12px, 11.515px + 0.129vw, 14px);
            }
          }
        }
      }
    }
  }

  /* テーマと活用例  */
  .sec--media_services {
    background-color: #F4F4F4;
    padding-top: clamp(60px, 50.291px + 2.589vw, 100px);
    padding-bottom: clamp(60px, 50.291px + 2.589vw, 100px);

    .media_services-inner {
      max-width: 1500px;
      width: 90%;
      margin: 0 auto;

      .capability-block .service-content-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .usecase-block .service-content-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .service-block {
        background-color: #fff;
        border-radius: 4px;

        .service-title-bar {
          background-color: #6b4d3b;
          color: #fff;
          text-align: center;
          font-size: clamp(20px, 17.573px + 0.647vw, 30px);
          font-family: var(--font-min);
          padding: 15px 0;
          margin-bottom: clamp(30px, 25.146px + 1.294vw, 50px);
          font-weight: 400;
          border-radius: 4px 4px 0 0;
        }

        .service-content-grid {
          display: grid;
          gap: clamp(40px, 37.573px + 0.647vw, 50px);
          padding-right: clamp(30px, 25.146px + 1.294vw, 50px);
          padding-left: clamp(30px, 25.146px + 1.294vw, 50px);
          padding-bottom: clamp(30px, 25.146px + 1.294vw, 50px);

          .service-item {
            .service-sub-title {
              font-size: clamp(20px, 17.573px + 0.647vw, 30px);
              color: var(--color-ttl);
              font-family: var(--font-min);
              margin-bottom: 20px;
              padding-bottom: 10px;
              border-bottom: 1px solid #9E8D85;
              font-weight: 500;
            }

            .service-list {
              list-style: none;
              padding: 0;
              margin: 0;

              li {
                font-size: 0.95rem;
                line-height: 1.8;
                padding-left: 1em;
                text-indent: -1em;

                &::before {
                  content: "・";
                  color: #666;
                }
              }

              li+li {
                margin-top: 10px;
              }
            }

            .service-text {
              font-size: 0.95rem;
              color: #666;
              line-height: 1.6;
            }
          }
        }
      }

      .service-block+.service-block {
        margin-top: clamp(40px, 37.573px + 0.647vw, 50px);
      }

      @media (max-width: 767px) {

        .capability-block .service-content-grid,
        .usecase-block .service-content-grid {
          grid-template-columns: 1fr;
          gap: 30px;
        }
      }
    }
  }

  /* お問い合わせフォーム */
  .sec--contact_form {
    padding-top: clamp(40px, 30.291px + 2.589vw, 80px);
    padding-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

    .contact_form__inner {
      max-width: 800px;
      width: 90%;
      margin: 0 auto;

      .message-box {
        border-radius: 4px;
        background: #F3F0F0;
        margin-bottom: clamp(80px, 63.01px + 4.531vw, 150px);

        .message-inner {
          padding-top: clamp(30px, 22.718px + 1.942vw, 60px);
          padding-bottom: clamp(30px, 22.718px + 1.942vw, 60px);
          padding-left: clamp(30px, 22.718px + 1.942vw, 60px);
          padding-right: clamp(30px, 22.718px + 1.942vw, 60px);
          text-align: center;

          .message-title {
            display: inline-block;
            font-size: clamp(20px, 17.573px + 0.647vw, 30px);
            font-family: var(--font-min);
            font-weight: 400;
            line-height: 2;
            color: var(--color-ttl);
            margin-bottom: clamp(30px, 27.573px + 0.647vw, 40px);
            padding-bottom: clamp(10px, 7.573px + 0.647vw, 20px);
            text-decoration: underline;
            text-decoration-color: #9e8d85;
            text-decoration-thickness: 1px;
            text-underline-offset: 10px;
          }

          .message-text {
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
            text-align: left;

            .message-note {
              margin: 0;
              font-size: clamp(12px, 11.515px + 0.129vw, 14px);
            }
          }

          @media screen and (max-width: 768px) {
            .message-title {
              text-align: left;
            }
          }
        }
      }
    }

    .wpcf7-radio {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .wpcf7-list-item {
      margin: 0;
    }
  }
}

.reservation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(247, 245, 245, 0.60);
  z-index: 110;
  /* display: grid;
  place-items: center; */
  display: none;

  .reservation-modal__inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 780px;
    width: 90%;
    max-height: 780px;
    height: fit-content;
    margin: auto;
    padding: 40px clamp(30px, 27.573px + 0.647vw, 40px);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #fff;
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .reservation-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .reservation-modal__close::before,
  .reservation-modal__close::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 2px;
    width: 24px;
    height: 1px;
    background: var(--color-ttl);
  }

  .reservation-modal__close::before {
    transform: rotate(45deg);
  }

  .reservation-modal__close::after {
    transform: rotate(-45deg);
  }

  .reservation-modal__section+.reservation-modal__section {
    margin-top: 35px;

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

  .reservation-modal__heading {
    margin: 0 0 18px;
    padding: 10px 8px;
    font-family: var(--font-min);
    font-weight: 500;
    font-size: clamp(12px, 10.544px + 0.388vw, 18px);
    line-height: 1.4;
    color: #fff;
    border-radius: 4px;
  }

  .reservation-modal__section--general .reservation-modal__heading {
    background: linear-gradient(90deg, #D6822F 0%, #E1A972 100%);
  }

  .reservation-modal__section--beauty .reservation-modal__heading {
    background: linear-gradient(90deg, #C62C2B 0%, #E48180 100%);
  }

  .reservation-modal__buttons {
    display: flex;
    gap: clamp(10px, 7.573px + 0.647vw, 20px);
    margin-bottom: 20px;

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

  .reservation-modal__button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    width: calc((100% - (clamp(10px, 7.573px + 0.647vw, 20px)) * 2) / 3);
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid #fff;
    box-shadow: 0 0 10px 0 rgba(179, 163, 147, 0.50);
    font-size: 14px;
    color: var(--color-ttl);

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

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 15px;
      width: 20px;
      aspect-ratio: 5 / 20;
      background: url("data:image/svg+xml,%3Csvg width='22' height='6' viewBox='0 0 22 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.5H20.5L16.5568 0.5' stroke='%23432815' stroke-linecap='round'/%3E%3C/svg%3E%0A") center center / contain no-repeat;
    }
  }

  .reservation-modal__button--line {
    &::before {
      content: "";
      width: 22px;
      aspect-ratio: 1 / 1;
      background: url("../img/icon-line-color-circle.svg") center center / contain no-repeat;
      display: inline-block;
    }

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

  .reservation-modal__button--web {
    &::before {
      content: "";
      width: 20px;
      aspect-ratio: 1 / 1;
      background: url("../img/icon-web-orange.svg") center center / contain no-repeat;
      display: inline-block;
    }
  }

  .reservation-modal__button--web-beauty {
    &::before {
      content: "";
      width: 20px;
      aspect-ratio: 1 / 1;
      background: url("../img/icon-web-red.svg") center center / contain no-repeat;
      display: inline-block;
    }
  }

  .reservation-modal__button--tel {
    &::before {
      content: "";
      width: 15px;
      aspect-ratio: 1 / 1;
      background: url("../img/icon-tel-orange.svg") center center / contain no-repeat;
      display: inline-block;
    }

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

  .reservation-modal__info {
    color: #4b4039;
  }

  .reservation-modal__hours,
  .reservation-modal__holiday,
  .reservation-modal__note {
    margin: 0;
  }

  .reservation-modal__hours,
  .reservation-modal__holiday {
    font-size: clamp(12px, 11.515px + 0.129vw, 14px);
    line-height: 1.7;
  }

  .reservation-modal__holiday {
    margin-bottom: 10px;
  }

  .color-general {
    color: var(--color-general);
  }

  .color-beauty {
    color: var(--color-beauty);
  }

  .reservation-modal__note {
    position: relative;
    margin-top: 5px;
    font-size: clamp(10px, 9.515px + 0.129vw, 12px);
    line-height: 1.5;
    padding-left: 1em;

    &::before {
      content: "※";
      position: absolute;
      left: 0;
      font-size: clamp(10px, 9.515px + 0.129vw, 12px);
    }
  }

  .reservation-modal__label {
    font-weight: 500;
  }

  /*--- 予約モーダル内SPタブ ---*/
  .reservation-modal__tabs {
    display: none;
  }

  @media (max-width: 767px) {
    .reservation-modal__tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-bottom: 15px;
    }

    .reservation-modal__tab {
      font-family: var(--font-min);
      font-weight: 500;
      font-size: 12px;
      color: #fff;
      line-height: 1.2;
      width: 100%;
      aspect-ratio: 135 / 40;
      border: none;
      border-radius: 4px;
    }

    .reservation-modal__tab:nth-child(1) {
      background: #ECC49C;
    }

    .reservation-modal__tab:nth-child(1).is-active {
      background: linear-gradient(270deg, #E1A972 0%, #D6822F 100%);
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: url("data:image/svg+xml,%3Csvg width='42' height='8' viewBox='0 0 42 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7852 7.5L0.000549972 -1.05417e-06L41.5698 2.57992e-06L20.7852 7.5Z' fill='url(%23paint0_linear_6811_9048)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6811_9048' x1='-3.21484' y1='2.5' x2='44.7852' y2='2.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23DA9047'/%3E%3Cstop offset='1' stop-color='%23DD9B5A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") center top / contain no-repeat;
        width: 45px;
        height: 9px;
        display: block;
      }
    }

    .reservation-modal__tab:nth-child(2) {
      background: #E19796;
    }

    .reservation-modal__tab:nth-child(2).is-active {
      background: linear-gradient(90deg, #C62C2B 0%, #E48180 100%);
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: url("data:image/svg+xml,%3Csvg width='42' height='8' viewBox='0 0 42 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7852 7.5L0.000549972 -1.05417e-06L41.5698 2.57992e-06L20.7852 7.5Z' fill='url(%23paint0_linear_6812_9034)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6812_9034' x1='-3.21484' y1='2.5' x2='44.7852' y2='2.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D14C4B'/%3E%3Cstop offset='1' stop-color='%23D96160'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") center top / contain no-repeat;
        width: 45px;
        height: 9px;
        display: block;
      }
    }

    .reservation-modal__section.is-hidden-sp {
      display: none;
    }

    .reservation-modal__section .reservation-modal__heading {
      display: none;
    }
  }
}