/* ==========================================================================
   イベント特集ページ（/feature/{slug}・events.php 駆動）

   トンマナは既存の /event/keiro（Layout + ブロック方式）に合わせている。
   そちらのブロックCSSから採った値:
     見出し赤 #e83929 / カテゴリ帯の茶 #b44e00 / クリーム背景 #fff9e6
     本文 #333 / 罫線 #ddd / ボタン枠 2px solid #333・角丸6px・右に「›」
     黒ボタン #333・角丸4px / カード 1px #ddd・角丸8px・hover で 4px 浮く
     セクション padding 40px 12px / コンテンツ幅 1200px / 見出し 28px bold
   feature.css を読み込んだ上で、この差分だけを追加で読む。
   ========================================================================== */

/* ---------- Design Tokens 上書き（敬老の日スコープ） ---------- */
.theme-keirou {
  --c-primary: #e83929;   /* 見出し・アクセントの赤 */
  --c-dark: #333;         /* 本文 */
  --c-mid: #b44e00;       /* 茶（帯・補助テキスト） */
  --c-soft-bg: #fff9e6;   /* クリーム */
  --c-cream: #fff;        /* ページ地色 */
  --c-line: #ddd;
}

/* 既存イベントページのコンテンツ幅（1200px）に合わせる */
.theme-keirou .l-container {
  max-width: 1200px;
  padding: 0 12px;
}

/* feature.css の body 背景（生成りのクリーム）を白に戻す。
   イベントページはセクションごとに白 / #fff9e6 を敷き分けるため */
body:has(.theme-keirou) {
  background-color: #fff;
}

/* 幅広背景を画面端まで広げる（feature.css の .feature-page .hero 等と同じ扱い） */
.feature-page .ev-hero,
.feature-page .ev-lead,
.feature-page .ev-nav,
.feature-page .ev-ranking,
.feature-page .ev-section,
.feature-page .ev-info,
.feature-page .ev-catgrid,
.feature-page .ev-related {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- 共通の見出し（赤の大見出し + 黒太字のサブ） ----------
   既存の Recommended / Category / Ranking と同じ組み方 */
.ev-head {
  text-align: center;
  margin-bottom: 30px;
}

.ev-head__title {
  font-family: var(--ff-sans);
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--c-primary);
  margin-bottom: 0;
}

.ev-head__sub {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  color: var(--c-dark);
  margin-top: 5px;
}

/* ---------- 1. ヒーロー ---------- */
.ev-hero {
  background-color: var(--c-soft-bg);
  text-align: center;
}

/* FV は既存 /event/keiro と同じくトリミングせず全体を出す（max-width 1200px） */
.ev-hero__visual {
  background-color: #fff;
  text-align: center;
}

.ev-hero__visual picture {
  display: block;
}

.ev-hero__img {
  max-width: 1200px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  /* PC とSPで縦横比が違う画像を出し分けるため、比率をCSS側で持つ。
     img の width/height 属性だけだと SP 側が横長に潰れる */
  aspect-ratio: 980 / 500;
}

@media screen and (max-width: 767px) {
  .ev-hero__img {
    aspect-ratio: 1667 / 1250;
  }
}

.ev-hero__content {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 12px 44px;
}

.ev-hero--textonly .ev-hero__content {
  padding-top: 56px;
  padding-bottom: 56px;
}

.ev-hero__label {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #fff;
  background-color: var(--c-primary);
  padding: 7px 20px;
  border-radius: 4px;
  margin-bottom: 22px;
}

/* キャッチだけ明朝。既存FVの「長寿を祝う 敬老の日ギフト」の字面に寄せる */
.ev-hero__catch {
  font-family: var(--ff-serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-dark);
  margin-bottom: 20px;
}

.ev-hero__sub {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-dark);
}

/* 締切の案内は赤枠・白地・太字（既存サイトの注意書きの見せ方に合わせる） */
.ev-hero__deadline,
.ev-hero__notice {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  color: var(--c-dark);
  background-color: #fff;
  border: 2px solid var(--c-primary);
  border-radius: 6px;
  padding: 14px 24px;
  margin-top: 26px;
}

.ev-hero__notice {
  border-color: #333;
  font-weight: normal;
}

/* ---------- 2. リード文 ---------- */
.ev-lead {
  background-color: #fff;
  padding: 40px 12px;
  text-align: center;
}

.ev-lead .l-container {
  max-width: 820px;
}

.ev-lead__line {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-dark);
}

/* ---------- 3. 選び方ナビ（既存FV下のボタン行と同じ見た目） ---------- */
.ev-nav {
  background-color: #fff;
  padding: 0 0 40px;
}

.ev-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

.ev-nav__item {
  flex: 0 1 280px;
}

.ev-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 60px;
  /* 最長ラベル14文字(224px)がボタン幅280pxに収まるようパディングを調整。
     nowrap でボタン内の途中改行を防ぐ (収まらない幅ではボタンごと折り返す) */
  padding: 12px 36px 12px 16px;
  white-space: nowrap;
  border: 2px solid #333;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  transition: background-color 0.2s ease;
}

.ev-nav__link::after {
  content: "›";
  position: absolute;
  right: 16px;
  font-size: 20px;
  line-height: 1;
  color: #333;
}

.ev-nav__link:hover {
  background-color: #f9f9f9;
  color: #333;
}

/* ---------- 4. ランキング（去年の Ranking ブロックの見た目を踏襲） ----------
   スクエア画像の4列。左上に順位バッジ。ナビ（白）とテーマ①（白）に挟まれるのでクリームを敷く */
.ev-ranking {
  padding: 40px 12px;
  background-color: var(--c-soft-bg);
  scroll-margin-top: 24px;
}

.ev-rank__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ev-rank__item {
  min-width: 0;   /* グリッドの最小幅も中身の実寸にしない (catgrid と同じはみ出し予防) */
  position: relative;
  background-color: #fff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ev-rank__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ev-rank__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  color: #fff;
  font-family: var(--ff-sans);
  font-weight: bold;
  font-size: 24px;
  z-index: 2;
}

/* 順位の色は rank の値に付ける（非公開商品が抜けても色がずれないよう nth-child は使わない） */
.ev-rank__badge--1 { background-color: var(--c-primary); }
.ev-rank__badge--2 { background-color: #999; }
.ev-rank__badge--3 { background-color: #b87333; }

.ev-rank__link {
  display: block;
  color: var(--c-dark);
}

.ev-rank__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f7f7f7;
}

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

.ev-rank__name {
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-dark);
  padding: 10px 12px 0;
}

.ev-rank__price {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--c-dark);
  padding: 4px 12px 14px;
}

.ev-rank__price span {
  font-size: 16px;
  font-weight: bold;
  margin: 0 2px;
}

/* ---------- 5〜8. テーマ別セクション（白 / クリームの交互） ---------- */
.ev-section {
  padding: 40px 12px;
  background-color: #fff;
  scroll-margin-top: 24px;
}

.ev-section--alt {
  background-color: var(--c-soft-bg);
}

/* ---------- 商品カード ----------
   高島屋の特集ページを参考にした横並び。画像を左、テキストを右に置き、
   作り手 → 商品名 → 価格 → 説明 の順で読ませる。1行2枚。 */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.ev-card {
  background-color: #fff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ev-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ev-card__link {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.ev-card__thumb {
  flex: 0 0 42%;
  /* 説明文の長さでカードの高さが変わるので、画像は上端固定ではなく縦中央に置く */
  align-self: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f7f7f7;
}

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

.ev-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 18px 20px 20px;
}

.ev-card__detail {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ev-card__brand {
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #767676;
  margin-bottom: 4px;
}

.ev-card__name {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--c-dark);
  margin-bottom: 8px;
}

.ev-card__price {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--c-dark);
  margin-bottom: 10px;
}

.ev-card__price span {
  font-size: 18px;
  font-weight: bold;
  margin: 0 2px;
}

.ev-card__copy {
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 10px;
}

.ev-card__lead-time {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--c-mid);
  margin-bottom: 14px;
}

/* 「商品ページへ」は既存の「商品一覧 →」と同じ黒ボタン。カード下端に揃える */
.ev-card__more {
  display: block;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #333;
  border-radius: 4px;
  text-align: center;
  padding: 10px 12px;
  margin-top: auto;
  transition: background-color 0.3s;
}

.ev-card__link:hover .ev-card__more {
  background-color: #555;
}

/* ---------- 10〜12. 情報ブロック（お届け・のし・長寿早見表） ---------- */
.ev-info {
  padding: 40px 12px;
  background-color: #fff;
}

/* 白 / クリームを交互に敷く。カテゴリー（白）に続くので お届け=クリーム / のし=白 / 長寿=クリーム */
.ev-info--delivery,
.ev-info--longevity {
  background-color: var(--c-soft-bg);
}

.ev-info .l-container {
  max-width: 900px;
}

.ev-info__lead {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-dark);
  margin-bottom: 12px;
}

.ev-info__list {
  border-top: 1px solid var(--c-line);
  margin: 20px 0 14px;
}

.ev-info__row {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--c-line);
  padding: 14px 4px;
}

.ev-info__term {
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: bold;
  color: var(--c-dark);
  width: 200px;
  flex-shrink: 0;
}

.ev-info__value {
  font-family: var(--ff-sans);
  font-size: 15px;
  color: var(--c-dark);
}

/* テーブルの下に置く本文（長寿早見表の締めの一文など） */
.ev-info__lead--foot {
  margin: 16px 0 0;
}

.ev-info__note {
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-mid);
}

.ev-info__link {
  margin-top: 20px;
  text-align: center;
}

.ev-info__link a {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 12px 32px;
  transition: background-color 0.2s;
}

.ev-info__link a:hover {
  background-color: #f9f9f9;
  color: #333;
}

/* 長寿祝い早見表 */
.ev-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: #fff;
}

.ev-table th,
.ev-table td {
  border: 1px solid var(--c-line);
  padding: 12px 16px;
  font-family: var(--ff-sans);
  font-size: 15px;
  text-align: left;
}

.ev-table__name {
  font-weight: bold;
  color: var(--c-primary);
  width: 100px;
  white-space: nowrap;
}

.ev-table__age {
  color: var(--c-dark);
  width: 120px;
  white-space: nowrap;
}

.ev-table__year {
  color: var(--c-dark);
}

/* ---------- 9. カテゴリーから探す（去年の Category ブロックの見た目を踏襲） ----------
   テーマ④（クリーム）とお届けの目安（クリーム）に挟まれるので白を敷く */
.ev-catgrid {
  padding: 40px 12px;
  background-color: #fff;
}

/* 7カテゴリを4枚 + 3枚の2段で組み、端数の段は中央に寄せる */
.ev-catgrid__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.ev-catgrid__item {
  width: calc(25% - 15px);
  /* flex アイテムの最小幅は既定で中身の実寸 (min-content) になり、
     元画像が大きいタイルが width 指定を無視して膨らむ。
     実際に dinos の外部画像 (幅800px超) がSPでページ全体を858pxに広げ、
     ヘッダーの表示倍率が崩れた (2026-08-12)。min-width: 0 で縮小を許可する */
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ev-catgrid__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.ev-catgrid__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ev-catgrid__label {
  padding: 12px;
  background-color: var(--c-mid);
  color: #fff;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

/* ---------- 13. 関連導線（既存のカテゴリタイルと同じ組み方） ---------- */
.ev-related {
  padding: 40px 12px;
  background-color: #fff;
}

.ev-related__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.ev-related__link {
  display: block;
  height: 100%;
  background-color: #fff;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ev-related__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ev-related__label {
  display: block;
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: var(--c-mid);
  padding: 12px;
  text-align: center;
}

.ev-related__desc {
  display: block;
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-dark);
  padding: 16px;
}

/* ==========================================================================
   Responsive（既存イベントページのブレークポイント 767/768px に合わせる）
   ========================================================================== */

@media screen and (max-width: 900px) {
  .ev-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .ev-head__title {
    font-size: 24px;
  }

  .ev-hero__content {
    padding: 30px 12px 34px;
  }

  .ev-hero--textonly .ev-hero__content {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  .ev-hero__catch {
    font-size: 24px;
    letter-spacing: 0.04em;
  }

  .ev-hero__sub {
    font-size: 15px;
    text-align: left;
    width: fit-content;
    margin: 0 auto;
  }

  .ev-hero__deadline,
  .ev-hero__notice {
    display: block;
    font-size: 15px;
    padding: 12px 16px;
    text-align: left;
  }

  .ev-lead {
    padding: 30px 12px;
  }

  .ev-lead__line {
    font-size: 15px;
    text-align: left;
  }

  .ev-nav {
    padding-bottom: 30px;
  }

  .ev-nav__item {
    flex: 1 1 calc(50% - 18px);
  }

  .ev-nav__link {
    min-height: 56px;
    padding: 10px 34px 10px 14px;
    font-size: 15px;
    /* SPは2列で1行に収まらないため折り返しを許容 */
    white-space: normal;
  }

  .ev-section,
  .ev-info,
  .ev-ranking,
  .ev-catgrid,
  .ev-related {
    padding: 30px 10px;
  }

  /* ランキングは去年と同じくSPで2列 */
  .ev-rank__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ev-rank__badge {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }

  .ev-rank__name {
    font-size: 13px;
    padding: 8px 10px 0;
  }

  .ev-rank__price {
    padding: 4px 10px 12px;
  }

  /* カテゴリータイルはSPで2列（7枚目の端数は中央に寄る） */
  .ev-catgrid__list {
    gap: 12px;
  }

  .ev-catgrid__item {
    width: calc(50% - 6px);
  }

  .ev-catgrid__label {
    font-size: 13px;
    padding: 10px;
  }

  .ev-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* SPは「画像＋商品名を上段、説明文を下段全幅」に組み替える。
     横並びのままだと本文が10文字幅まで潰れ、画像を上に全幅で置くと1商品で画面が埋まる */
  .ev-card__link {
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-template-areas:
      "thumb head"
      "detail detail";
    column-gap: 14px;
    padding: 14px;
  }

  .ev-card__thumb {
    grid-area: thumb;
    flex: none;
    width: 100%;
    align-self: start;
  }

  .ev-card__body {
    display: contents;
  }

  .ev-card__head {
    grid-area: head;
  }

  .ev-card__detail {
    grid-area: detail;
    margin-top: 12px;
  }

  .ev-card__brand {
    font-size: 12px;
  }

  .ev-card__name {
    font-size: 15px;
  }

  .ev-card__copy {
    font-size: 14px;
  }

  .ev-info__row {
    display: block;
  }

  .ev-info__term {
    width: auto;
    margin-bottom: 4px;
  }

  .ev-table th,
  .ev-table td {
    padding: 10px 12px;
    font-size: 14px;
  }

  .ev-table__name,
  .ev-table__age {
    width: auto;
  }

  .ev-related__list {
    grid-template-columns: repeat(2, 1fr);
  }
}