/* ==================== PROTECTED AREA: DO NOT EDIT ==================== */
/* 以下の .menu / #foot ルールは特集共通パーツ。改変・削除禁止。           */

.menu {
  position: relative;
  background-color: #fff;
  z-index: 9999;
}

#foot {
  position: relative;
  z-index: 9998;
}

.menu #event_all {
  margin-bottom: 0;
  margin-top: 0 !important;
  padding-top: 6em;
}

/* ==================== END PROTECTED AREA ==================== */


/* ==================== MODERN RESET CSS ==================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-size: 1.6rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==================== END MODERN RESET CSS ==================== */


/* ==================== CSS Custom Properties ==================== */

:root {
  /* --- フォント --- */
  --font-base: "YuGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", "MS PGothic", sans-serif;

  /* --- 年代別グラデーション（上: 濃 → 下: 淡） --- */
  --grad-40s: linear-gradient(to bottom, #a8edea 0%, #84fab0 100%);
  /* 緑 */
  --grad-50s: linear-gradient(to bottom, #fed6e3 0%, #c3cfe2 100%);
  /* 紫 */
  --grad-60s: linear-gradient(to bottom, #ffe8d1 0%, #ffc3a0 100%);
  /* オレンジ */
  --grad-70s: linear-gradient(to bottom, #e4f1ee 0%, #fdffb6 100%);
  /* 黄色 */

  /* --- UI共通カラー --- */
  --color-cta: #0a7a82;
  --color-cta-hover: #48a08c;
  --color-text: #333333;
  --color-text-sub: #000;
  --color-white: #ffffff;

  /* --- フォントサイズ --- */
  --fs-xs: 1.2rem;
  --fs-sm: 1.4rem;
  --fs-base: 1.6rem;
  --fs-md: 1.8rem;
  --fs-lg: 2.2rem;
  --fs-xl: 2.8rem;
  --fs-age: 7.2rem;

  /* --- スペーシング --- */
  --sp-xs: 0.8rem;
  --sp-sm: 1.6rem;
  --sp-md: 2.4rem;
  --sp-lg: 4.0rem;
  --sp-xl: 6.0rem;

  /* --- レイアウト --- */
  --content-max-w: 680px;
  --section-overlap: 2.4rem;
  /* セクション同士の重なり量 */
  --img-overflow: 5.2rem;
  /* 画像が右にはみ出す量 */
  --radius-btn: 50px;
  --radius-section: 2.0rem;
  /* セクション上角の丸み */
  --radius-img: 1.0rem;
}


/* ==================== Feature Wrapper ==================== */

.feature {
  font-family: var(--font-base);
  color: var(--color-text);
}


/* ==================== MV Section ==================== */

.mv {
  padding: var(--sp-xl) 0 7em;
  text-align: center;
  background-color: var(--color-white);
  position: relative;
  z-index: 2;
  /* age-section より手前 */

  & .mv__inner {
    max-width: 100%;
    margin: 0 auto;

    img {
      margin: 0 auto;
    }
  }

  & .mv__eyebrow {
    font-size: var(--fs-sm);
    color: var(--color-text-sub);
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-sm);
  }

  & .mv__title {
    font-size: var(--fs-xl);
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: var(--sp-md);

    @media (min-width: 768px) {
      font-size: 3.6rem;
    }
  }

  & .mv__lead {
    font-size: var(--fs-base);
    color: var(--color-text-sub);
    line-height: 1.9;
    margin-bottom: var(--sp-lg);
    padding: 1em;
  }
}


/* ==================== Age Navigation（ピル型コンテナ＋内側アクティブピル） ==================== */

.age-nav {
  display: flex;
  justify-content: center;
  padding: 0 var(--sp-md);

  & .age-nav__list {
    display: flex;
    width: 100%;
    max-width: var(--content-max-w);
    border: 2px solid var(--color-text);
    border-radius: 50px;
    padding: 4px;
    /* 内側アクティブピルとのすき間 */
  }

  & .age-nav__item {
    flex: 1;
    /* 等幅 */
  }

  & .age-nav__link {
    display: block;
    padding: 0.6em 0.3em;
    text-align: center;
    border-radius: 50px;
    /* 左右ともフル角丸 */
    font-size: var(--fs-md);
    font-weight: bold;
    color: var(--color-text);
    transition: background-color 0.2s ease, color 0.2s ease;

    /* アクティブ・ホバー時：内側を黒ピルで塗りつぶし */
    &:hover,
    &.is-active {
      background-color: var(--color-text);
      color: var(--color-white);
    }
  }
}


/* ==================== Age Section ==================== */

.age-section {
  position: relative;
  padding: var(--sp-xl) 0 var(--sp-xl) var(--sp-xl);
  margin-bottom: 9em;
  overflow: visible;
  margin-left: 2vw;
  margin-right: 6vw;

  & .age-section__header {
    /* 40's 大見出し部分。product-list の上に少し食い込む形に */
    position: relative;
    z-index: 2;
    margin-bottom: calc(-1 * var(--sp-md));
    /* product-list と重なる */
    padding-bottom: var(--sp-md);
  }

  & .age-section__num {
    position: relative;
    z-index: 2;
    /* padding-top(sp-xl=6rem) + 7.5rem で上端より7.5remはみ出す */
    margin-top: calc(-1 * var(--sp-xl) - 7.5rem);
    margin-bottom: var(--sp-xs);

    & img {
      width: clamp(140px, 62%, 280px);
      height: auto;
    }
  }

  & .age-section__catch {
    font-size: var(--fs-lg);
    font-weight: bold;
    margin-bottom: var(--sp-sm);
  }

  & .age-section__desc {
    font-size: var(--fs-base);
    color: var(--color-text-sub);
    line-height: 1.8;
    max-width: 55%;
    padding-bottom: 2em;
  }
}

/* 年代別修飾子 — &--modifier はネイティブCSSで無効なためフラットに記述 */
.age-section--40s {
  background: var(--grad-40s);
}

.age-section--50s {
  background: var(--grad-50s);
  /* 左右逆レイアウト */
  padding-left: 0;
  padding-right: var(--sp-xl);
  margin-left: 6vw;
  margin-right: 2vw;

  & .age-section__header {
    text-align: right;
  }

  & .age-section__num img {
    margin-left: auto;
  }

  & .age-section__desc {
    margin-left: auto;
  }

  & .product-card {
    grid-template-columns: 46% 1fr;

    & .product-card__img {
      grid-column: 1;
      grid-row: 1;
      margin-left: -6vw;
      margin-right: 0;
    }

    & .product-card__body {
      grid-column: 2;
      grid-row: 1;
      padding-left: var(--sp-sm);
      padding-right: var(--sp-md);
    }
  }
}

.age-section--60s {
  background: var(--grad-60s);
}

.age-section--70s {
  background: var(--grad-70s);
  margin-bottom: 0;
  /* 左右逆レイアウト */
  padding-left: 0;
  padding-right: var(--sp-xl);
  margin-left: 6vw;
  margin-right: 2vw;

  & .age-section__header {
    text-align: right;
  }

  & .age-section__num img {
    margin-left: auto;
  }

  & .age-section__desc {
    margin-left: auto;
  }

  & .product-card {
    grid-template-columns: 46% 1fr;

    & .product-card__img {
      grid-column: 1;
      grid-row: 1;
      margin-left: -6vw;
      margin-right: 0;
    }

    & .product-card__body {
      grid-column: 2;
      grid-row: 1;
      padding-left: var(--sp-sm);
      padding-right: var(--sp-md);
    }
  }
}


/* ==================== Product List ==================== */

.product-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 画像同士が縦にぴったりくっつく */
}


/* ==================== Product Card ==================== */

.product-card {
  display: grid;
  grid-template-columns: 1fr 46%;
  align-items: stretch;
  /* 画像がカード全高に伸び、隣接カードと密着 */
  gap: 0;
  overflow: visible;

  & .product-card__body {
    display: grid;
    grid-template-areas:
      "name  price  ."
      "sub   sub    sub"
      "desc  desc   desc"
      "tags  tags   tags"
      "btn   btn    btn";
    grid-template-columns: auto auto 1fr;
    align-items: start;
    align-content: end;
    gap: var(--sp-sm);
    padding: var(--sp-md) var(--sp-sm) var(--sp-md) var(--sp-md);
    border-radius: var(--radius-img);
  }

  & .product-card__name {
    grid-area: name;
    font-size: var(--fs-lg);
    font-weight: bold;
    line-height: 1.4;
  }

  & .product-card__price {
    grid-area: price;
    font-size: var(--fs-sm);
    font-weight: bold;
    align-self: end;
    white-space: nowrap;
    padding-left: 0.5em;
    padding-bottom: 0.1em;
  }

  /* 商品名下の小見出し */
  & .product-card__subtitle {
    grid-area: sub;
    font-size: var(--fs-sm);
    font-weight: bold;
    color: var(--color-text-sub);
    line-height: 1.5;
  }

  & .product-card__desc {
    grid-area: desc;
    font-size: var(--fs-sm);
    color: var(--color-text-sub);
    line-height: 1.75;
  }

  /* タグ（ボロネーゼ製法 等） */
  & .product-card__tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
  }

  & .product-card__tag {
    font-size: var(--fs-xs);
    font-weight: bold;
    padding: 0.2em 0.7em;
    border-radius: 50px;
    border: #989898 1px solid;
    background-color: #fff;
    color: #989898;
    white-space: nowrap;
  }

  & .product-card__btn {
    grid-area: btn;
    justify-self: start;
    /* 横長にならないよう内容幅に収める */
    padding: 0.7em 1.6em;
    background-color: var(--color-cta);
    color: var(--color-white);
    text-align: center;
    border-radius: var(--radius-btn);
    font-size: var(--fs-sm);
    font-weight: bold;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: var(--color-cta-hover);
    }
  }

  & .product-card__img {
    /* 右ウィンドウ端まで完全ブリード */
    margin-right: -6vw;
    /* 画像未設定時のプレースホルダー */
    background-color: #c8c8c8;
    overflow: hidden;
    box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.15);

    & img {
      width: 100%;
      height: 100%;
      /* カード全高に伸ばし、隣接カードと密着 */
      object-fit: cover;
      display: block;
    }
  }
}


/* ==================== SP Layout (< 768px) ==================== */
@media (max-width: 767px) {

  /* --- age-section 共通 --- */
  .age-section {
    padding: var(--sp-lg) var(--sp-md) var(--sp-lg) var(--sp-md);
    margin-left: 0;
    margin-right: 0;

    & .age-section__num {
      /* SP用の突き出し量を再計算（padding-top: sp-lg=4rem + 3rem） */
      margin-top: calc(-1 * var(--sp-lg) - 3rem);
    }

    & .age-section__header {
      margin-bottom: 0;
    }

    & .age-section__desc {
      max-width: 100%;
      padding-bottom: var(--sp-sm);
    }
  }

  /* --- reversed sections: PC用の左右反転をSPでリセット --- */
  .age-section--50s,
  .age-section--70s {
    padding-left: var(--sp-md);
    padding-right: var(--sp-md);
    margin-left: 0;
    margin-right: 0;

    & .age-section__header {
      text-align: left;
    }

    & .age-section__num img {
      margin-left: 0;
    }

    & .age-section__desc {
      margin-left: 0;
    }
  }

  /* --- product-card: 縦積みレイアウト --- */
  .product-card {
    grid-template-columns: 1fr;

    & .product-card__img {
      order: -1;
      /* section padding をキャンセルして横幅いっぱいに */
      margin-left: calc(-1 * var(--sp-md));
      margin-right: calc(-1 * var(--sp-md));
      margin-top: 0;

      & img {
        height: auto;
        object-fit: initial;
      }
    }

    & .product-card__body {
      padding: var(--sp-sm) 0;
      grid-template-areas:
        "name  name  name"
        "price price price"
        "sub   sub   sub"
        "desc  desc  desc"
        "tags  tags  tags"
        "btn   btn   btn";
      grid-template-columns: 1fr 1fr 1fr;
    }

    & .product-card__btn {
      justify-self: stretch;
      text-align: center;
    }
  }

  /* reversed sections product-card: PC用grid配置をリセット */
  .age-section--50s .product-card,
  .age-section--70s .product-card {
    grid-template-columns: 1fr;

    & .product-card__img {
      grid-column: auto;
      grid-row: auto;
      margin-left: calc(-1 * var(--sp-md));
      margin-right: calc(-1 * var(--sp-md));
    }

    & .product-card__body {
      grid-column: auto;
      grid-row: auto;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* --- product-list: カード間に余白 --- */
  .product-list {
    gap: var(--sp-md);
  }
}