@charset "UTF-8";

.header {
  padding: 0;

  .seo-title {
    background-color: #FDF2F3;
    padding: 5px 1rem;
    font-weight: normal;
    font-size: 10px;
    width: 100%;
  }

  .header__inner {
    width: calc(100% - 3rem);
    margin: 0 auto;

    .header__btn.instagram-btn-area,
    .header__btn-sm.instagram-btn-area {
      .header__btn-icon {
        display: flex;
        align-items: center;
        gap: 10px;
        width: fit-content;

        @media (max-width: 576px) {
          gap: 5px;
        }

        .label {
          font-weight: 600;
          font-size: clamp(9px, 8.629px + 0.095vw, 10px);
          color: #333;
          text-align: left;

          @media (max-width: 576px) {
            line-height: 1.2;
          }
        }

        img {
          width: 2.375rem;
          height: 2.375rem;

          @media (max-width: 892px) {
            width: 1.25rem;
            height: 1.25rem;
          }
        }
      }

      .header__btn-icon+.header__btn-icon {
        margin-left: clamp(10px, 7.771px + 0.571vw, 16px);
      }
    }

    .header__btn-sm {
      display: none;

      @media (max-width: 892px) {
        display: flex;
        margin-top: -0.53125rem;
        margin-left: auto;
      }
    }
  }
}

.header:has(.seo-title) {
  .header__inner {
    padding-top: 1.25rem;
  }
}

/*-----------------------------------------
施術詳細：共通
-----------------------------------------*/
.main-treatment {
  padding-top: 150px;

  @media (max-width: 576px) {
    padding-top: clamp(90px, -21.940px + 29.851vw, 150px);
  }
}

/*-----------------------------------------
ボトックス
-----------------------------------------*/
.menu-template-single-botox-injections {
  .treatment-recommend {
    .injection-amount {
      max-width: 62.5rem;
      margin: 5rem auto 0;

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

      .injection-amount__title {
        font-weight: normal;
        font-size: 1.5rem;
        color: #DC96A3;
        border-bottom: 1px #DC96A3 solid;
        padding-bottom: 5px;
        margin-bottom: 20px;

        @media (max-width: 576px) {
          margin-bottom: 15px;
        }
      }

      .treatment-info__table {
        width: 100%;

        .treatment-info__tr {
          .treatment-info__th {
            width: 270px;
            padding-left: 0.8125rem;
            padding-right: 0.8125rem;
            text-align: center;

            @media (max-width: 576px) {
              width: 60%;
            }
          }
        }
      }
    }
  }

  .treatment-approval {
    .inner {
      background-color: #F4F1EC;
      padding: 2.5rem;

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

.case__treatment-text-small,
.case-sub__treatment-text-small {
  color: #333;
  line-height: 1.0625rem;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.treatment-flow {
  margin-top: 5rem;
}

.treatment-column {
  .treatment-column__inner {
    margin: 0 auto;
    max-width: 62.5rem;

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

  .treatment-column__list {
    display: grid;
    margin-top: 3.5rem;
    grid-template-columns: auto;
    grid-template-rows: auto;
    width: 100%;
    position: relative;
    gap: 0;

    .prev-arrow,
    .next-arrow {
      display: none !important;
      position: absolute;
      top: 50%;
      z-index: 1;
    }

    .prev-arrow {
      left: 0;
    }

    .next-arrow {
      right: 0;
    }

    .treatment-column__item {
      margin: 10px 10px;
      max-width: 15rem;

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

      a {
        color: #333;

        .column-list__eyecatch {
          margin-bottom: 0.625rem;
          aspect-ratio: 1 / 1;

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

        .column-list__category {
          margin-bottom: 0.625rem;

          .category {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            font-size: 0.625rem;
            font-weight: 700;
            color: #fff;
            background-color: #DC96A3;
          }
        }

        .column-list__title {
          font-weight: 500;
          font-size: 1.125rem;
          margin-bottom: 0.25rem;
        }

        .column-list__text {
          font-size: 0.875rem;
        }
      }
    }
  }
}