@charset "utf-8";

/* * {
  outline: 1px solid rgb(201, 233, 201);
} */

.menu-item {
  font-size: clamp(1.8rem, 2.4vw, 2rem);

  .menu-item-time,
  .menu-item-price {
    font-size: var(--fs-16);
  }
}

.menu-item-description {
  font-size: var(--fs-16);
}

:where(.menu-cut, .menu-perm) {
  .menu-content {
    display: grid;
    grid-template-columns: 8fr 10fr;
    grid-template-rows: auto 1fr;
  }

  .menu-lead {
    grid-column: 1;
    grid-row: 1;
  }

  .menu-description {
    grid-column: 1;
    grid-row: 2;
  }

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

:where(.menu-perm) {
  .menu-content {
    grid-template-columns: 1fr 1fr;
  }
}

:where(.menu-color, .menu-shave) {
  .menu-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
  }

  .menu-lead {
    grid-column: 2;
    grid-row: 1;
  }

  .menu-description {
    grid-column: 2;
    grid-row: 2;
  }

  .image-box {
    grid-column: 1;
    grid-row: 1 / 3;
    /* aspect-ratio: 10 / 8; */
  }
}

:where(.menu-cut, .menu-color, .menu-perm, .menu-shave) {
  .image-box {
    width: 100%;
    height: 100%;

    .menu-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & h3 {
    display: block;
    font-size: var(--fs-24);
    line-height: 2;
    margin-bottom: 1em;
    white-space: nowrap;
  }

  .menu-lead {
    padding: 0 20px;
  }

  .menu-description {
    padding: 0 20px 3em;
  }
  .cut-description {
    padding: 20px 20px 1em;
  }

  .menu-item {
    width: 100%;
    height: 100%;
    gap: 20px;
    padding: 0 20px;

    span {
      word-break: keep-all;

      &:not(:first-child) {
        white-space: nowrap; /* 価格情報が改行されないように */
      }

      &:first-child {
        letter-spacing: -0.1em;
        line-height: 1;
      }
    }
  }
}

/* ヘアカットメニューの設定 */
:where(.menu-cut) {
  .menu-content-2 {
    margin-top: -30px;
    align-items: flex-start;

    .menu-list {
      width: 100%;
      margin-top: 0px;
    }

    .menu-detail {
      display: flex;
      /* flex-grow: 0; */
      flex-shrink: 0;
      width: 50%;
      /* .menu-content-2でalign-item: stretchが無効になったため再度設定 */
      /* これにより高さが親要素いっぱいになる */
      align-self: stretch;
      padding-top: 30px;
    }

    .cut-description {
      background-color: var(--color-base);
      z-index: 1;
    }
  }
}

/* メニューリスト共通設定 */
.menu-list {
  display: grid;
  align-items: center;
  background-image: radial-gradient(ellipse at center, rgba(190, 160, 100, 1) 0%, rgba(175, 130, 50, 1) 100%);

  /* 3列を定義 */
  grid-template-columns: 1fr auto auto;

  margin-top: -30px;
  padding: 50px 20px 30px;
  gap: 2.3vw 2em;
  border-radius: 2px;

  /* 各メニュー項目 (.menu-item) */
  .menu-item {
    /* ※.menu-item の子要素を .menu-list の Grid レイアウトに直接参加させる */
    display: contents;
  }

  /* 説明文（pタグ）の配置 */
  .menu-item-description {
    /* 1列目から3列目までを横断するように設定 */
    grid-column: 1 / span 3;
    margin-top: -20px; /* 上の行との間隔を調整 */
  }
}

:where(.menu-color, .menu-perm, .menu-shave) {
  .menu-list {
    width: 60%;
  }
}

/* ヘアカラーのメニュー設定 */
:where(.menu-color) {
  .menu-list {
    margin-left: auto;
    margin-right: 0;
  }
}

/* シェービングメニューの設定 */
:where(.menu-shave) {
  .menu-list {
    margin-left: auto;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  :where(.menu-cut, .menu-color, .menu-perm, .menu-shave) {
    .menu-content {
      gap: 30px 0;
    }
  }

  .menu-list {
    width: 100%;
    max-width: 500px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
  }

  .menu-lead h3 {
    line-height: 3;
  }

  :where(.menu-cut, .menu-perm) {
    .menu-content {
      grid-template-columns: 8fr 10fr;
    }

    .menu-lead {
      grid-column: 1;
      grid-row: 1;
    }

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

    .image-box {
      grid-column: 2;
      grid-row: 1;
    }

    .menu-content-2 {
      flex-direction: column;
      margin: 0;

      .menu-detail {
        order: 2;
        width: 100%;
      }

      .menu-item {
        padding: 20px;
      }
    }
  }

  :where(.menu-color, .menu-shave) {
    .menu-content {
      grid-template-columns: 10fr 8fr;
    }

    .menu-lead {
      grid-column: 2;
      grid-row: 1;
    }

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

    .image-box {
      grid-column: 1;
      grid-row: 1;
    }
  }
}

@media (max-width: 500px) {
  :where(.menu-cut, .menu-color, .menu-perm, .menu-shave) {
    .menu-lead {
      padding: 0 clamp(5px, 3vw, 20px);
      & h3 {
        font-size: var(--fs-18);
      }
    }

    .menu-description,
    .cut-description {
      padding: 0 5px 3em;
    }

    .menu-content,
    .menu-content-2 {
      .menu-item {
        padding: 20px 5px;
      }
    }

    .menu-list {
      display: block;
      width: 100%;

      .menu-item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0;
        padding: 0;

        &:not(:last-of-type) {
          margin-bottom: 1.5em;
        }

        .menu-item-name {
          grid-column: 1;
          grid-row: 1;
          align-self: center;
        }
        .menu-item-time {
          grid-column: 1/3;
          grid-row: 2;
          font-size: var(--fs-16);
        }
        .menu-item-price {
          grid-column: 2;
          grid-row: 1;
          font-size: var(--fs-16);
          margin-left: auto;
        }
        .menu-item-description {
          grid-column: 1 / span 3;
          grid-row: 3;
          margin-top: 0;
        }

        /* &:first-of-type .menu-item-name {
          margin-top: 0;
        } */
      }
    }
  }
}