/* ========================================
   MENU
======================================== */
.menu {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  /*
  width: 100%;
  padding: 80px 20px;
   */
  box-sizing: border-box;
}

/* ページトップ画像 */
.menu__top-image {
  width: min(1200px, 100%);
  margin: 0 auto 60px;
}

.menu__top-image img {
  display: block;
  width: 100%;
  height: auto;
}

.menu__inner {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto 60px;
}

/* ヘッダー */
.menu__header {
  text-align: center;
  margin-bottom: 55px;
}

.menu__logo {
  margin-bottom: 25px;
  font-family: "Cormorant Garamond", serif;
  color: #a67b35;
}

.menu__logo span {
  display: block;
  font-size: clamp(50px, 6vw, 72px);
  line-height: 0.9;
  letter-spacing: 0.08em;
}

.menu__logo small {
  display: block;
  margin-top: 15px;
  font-size: 13px;
  letter-spacing: 0.35em;
}

/* MENU */
.menu__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.15em;
  color: #a67b35;
}

.menu__title::before,
.menu__title::after {
  content: "";
  width: 150px;
  height: 1px;
  background: #d8c8b2;
}

.menu__title::before {
  margin-right: 25px;
}

.menu__title::after {
  margin-left: 25px;
}

/* メニュー Grid */
.menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 45px;
}

/* ========================================
   カテゴリー
======================================== */
.menu__category {
  min-width: 0;
  padding-right: 30px;

  border-right: 1px solid #ddd6ca;
}

.menu__category:nth-child(3n) {
  padding-right: 0;
  border-right: none;
}

/* カテゴリータイトル */
.menu__category-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 25px;
}

.menu__category-title span {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  color: #50817c;
}

.menu__category-title small {
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 400;
  color: #50817c;
}

/* ========================================
   メニュー項目
======================================== */
.menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 15px;
  margin-bottom: 20px;
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
}

.menu__name {
  position: relative;
  min-width: 0;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 600;
  line-height: 1.6;
}

.menu__price {
  color: #9b712e;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.6;
  white-space: nowrap;
}

.menu__price--contact {
  color: #9b712e;
}

.menu__item p {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.7;
  color: #333;
}

/* 項目間の薄い線 */
.menu__item:not(:last-child) {
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e0d8;
}

/* 同一カラム内のサブカテゴリー */
.menu__sub-category + .menu__sub-category {
  margin-top: 45px;
}

/* ========================================
   注記
======================================== */
.menu__note {
  max-width: 600px;
  margin: 60px auto 0;
  padding: 25px 30px;
  text-align: center;
  border: 1px solid #8aa9a5;
}

.menu__note h2 {
  margin: 0 0 15px;
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 400;
  color: #50817c;
}

.menu__note p {
  margin: 0;
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.9;
  color: #333;
}

/* ==================================================
   タブレット
   ================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .menu {
    padding: 70px 30px;
  }

  .menu__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 35px;
  }

  .menu__category {
    padding-right: 25px;
  }

  .menu__category:nth-child(3n) {
    padding-right: 25px;
    border-right: 1px solid #ddd6ca;
  }

  .menu__category:nth-child(2n) {
    padding-right: 0;
    border-right: none;
  }

  .menu__title::before,
  .menu__title::after {
    width: 100px;
  }
}

/* ==================================================
   スマートフォン
   ================================================== */
@media screen and (max-width: 767px) {
  .menu {
    padding: 0 0 60px;
  }

  .menu__top-image {
    margin-bottom: 20px;
  }

  .menu__header {
    margin-bottom: 45px;
  }

  .menu__logo span {
    font-size: 48px;
  }

  .menu__logo small {
    font-size: 12px;
  }

  /* MENU */
  .menu__title {
    font-size: 36px;
    font-size: clamp(42px, 12vw, 46px);
  }

  .menu__title::before,
  .menu__title::after {
    width: 40px;
  }

  .menu__title::before {
    margin-right: 15px;
  }

  .menu__title::after {
    margin-left: 15px;
  }

  /* 1カラム */
  .menu__grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  /* カテゴリー */
  .menu__category,
  .menu__category:nth-child(2n),
  .menu__category:nth-child(3n) {
    padding: 0 0 40px;
    border-right: none;
    border-bottom: 1px solid #ddd6ca;
  }

  .menu__category:last-child {
    border-bottom: none;
  }

  .menu__category-title {
    margin-bottom: 22px;
  }

  .menu__category-title span {
    font-size: 34px;
  }

  .menu__category-title small {
    font-size: 12px;
  }

  /* 項目 */
  .menu__item {
    column-gap: 10px;
    margin-bottom: 18px;
  }

  .menu__name,
  .menu__price {
    font-size: 14px;
  }

  .menu__item p {
    font-size: 12px;
  }

  /* 注記 */
  .menu__note {
    margin-top: 45px;
    padding: 20px 15px;
  }

}