/*
 * front-page.css - Webマガジン型トップページ(確定構成)
 *
 * 【デザインの軸】
 * 正方形サムネイル + 角丸。ミニマルでスタイリッシュな可愛さ。
 *
 * - サムネイルはすべて正方形(aspect-ratio: 1/1、object-fitでCSSクロップ)
 * - 角丸は --radius-thumb(16px)で統一。ヒーローのみ少し大きめ
 * - series帯は黄金色(美瑛の麦畑カラー)。--color-gold-band で一括変更可能
 * - メタ行は「● カテゴリ ― 日付」で全セクション統一
 */

.front-page.magazine {
  --radius-thumb: 16px;
  --color-key: var(--color-gold-band);       /* キーカラー: 美瑛の小麦の丘の黄金色 */
  --color-key-strong: var(--color-gold);
  --color-key-light: var(--color-gold-light);
  --mag-width: min(1400px, 92vw);            /* コンテンツ基準幅: 画面に比例し1400pxで頭打ち */
  padding-top: 160px; /* 固定ヘッダーの高さ分。main.cssの .front-page { padding-top: 0 } を上書き */
  padding-bottom: var(--space-section);
  background: var(--color-paper);
}

/* 内側コンテナ(全幅帯以外のセクションで使用)
 * 注意: max-width と (100vw - 幅)/2 のパディングを併用すると
 * 画面が広いほど中身が痩せる二重制約になるため、
 * 「基準幅 + 固定サイド余白」方式に統一しています */
.front-page.magazine .section {
  max-width: var(--mag-width);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 100px) 24px 0;
}

/* ---------------------------------------------------------------------------
 * マストヘッド(h1は保持しつつタグライン風に控えめ表示)
 * ------------------------------------------------------------------------- */
.masthead {
  padding: clamp(24px, 3.5vw, 40px) 24px clamp(20px, 3vw, 32px);
  text-align: center;
}
.masthead__title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .14em;
}
.masthead__lead {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: .82rem;
  letter-spacing: .08em;
}

/* ---------------------------------------------------------------------------
 * セクション見出し(英字大 + 和文小 + ラベンダー下線)
 * ------------------------------------------------------------------------- */
.magazine-heading {
  margin-bottom: clamp(32px, 5vw, 56px);
  text-align: center;
}
.magazine-heading__en {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: lowercase;
}
.magazine-heading__ja {
  display: inline-block;
  margin: 10px 0 0;
  padding-bottom: 2px;
  background: linear-gradient(transparent 62%, var(--color-key-light) 62%);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-indent: .34em;
}
.magazine-heading--onband .magazine-heading__en { color: #fff; }
.magazine-heading--onband .magazine-heading__ja {
  color: #fff;
  background: linear-gradient(transparent 62%, rgba(255,255,255,.35) 62%);
}

/* ---------------------------------------------------------------------------
 * メタ行(● カテゴリ ― 日付)
 * ------------------------------------------------------------------------- */
.entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-ink);
  font-size: .76rem;
  letter-spacing: .04em;
}
.entry-meta__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-key);
}
.entry-meta__cat { font-weight: 600; }

/* ---------------------------------------------------------------------------
 * ② ヒーローターンテーブル(電子レンジ型・回転式)
 *
 * 【幾何の考え方】
 * 回転の中心を画面のはるか下(半径 --tt-r)に置き、各レンジを
 * 「スロット番号 × 1コマの角度(--tt-step)」だけ回転させて配置する。
 * スロットが切り替わると transform: rotate() が補間され、
 * 全台がひとつの円盤(ターンテーブル)に載って回るように動く。
 *
 * 【数値の根拠(すべてvw基準 → どの画面幅でも同じ構図)】
 * 中央幅56vw / 1コマ14° / 半径260vw のとき、
 * 隣のレンジの中心は約68vw横にずれ、画面には約10vwだけ見切れて入る。
 *
 * 【窓座標】microwave.png(600x394・写実タイプ)の実測: x95-372, y67-290
 * 【表示パネル/ボタン座標】同画像の右側パネル(実測値)。
 * 上の大きい黒パネルに更新日時(月.日+西暦)、下の2本のボタンに
 * カテゴリ/タグを重ねて表示する
 * イラスト差し替え時はこれらの%を測り直す
 * ------------------------------------------------------------------------- */
.hero-turntable {
  /* ターンテーブルの幾何 */
  --tt-w: 56vw;                          /* 中央レンジの幅 */
  --tt-h: calc(var(--tt-w) * 0.6567);    /* 高さ(イラスト比 394/600) */
  --tt-step: 14deg;                      /* 1コマの回転角 */
  --tt-r: 260vw;                         /* 回転中心までの距離(レンジ下端から) */
  /* レンジ窓(実測値) */
  --mw-window-left: 15.83%;
  --mw-window-top: 17.01%;
  --mw-window-width: 46.33%;
  --mw-window-height: 56.85%;
  --mw-window-radius: 10px;
  /* 表示パネル(実測値): 更新日時(月.日+西暦) */
  --mw-panel-left: 76.83%;
  --mw-panel-top: 10.15%;
  --mw-panel-width: 16.17%;
  --mw-panel-height: 24.37%;
  /* ボタン(実測値・左右幅はパネルと共通): カテゴリ/タグ */
  --mw-strip-left: 76.83%;
  --mw-strip-width: 16.17%;
  --mw-cat-top: 34.52%;
  --mw-cat-height: 5.84%;
  --mw-tag-top: 40.36%;
  --mw-tag-height: 6.85%;
  /* つまみ(実測値・目測含む概算): 記事へのリンクの当たり判定 */
  --mw-dial-left: 76.5%;
  --mw-dial-top: 47%;
  --mw-dial-width: 15%;
  --mw-dial-height: 19%;
  /* つまみ下の丸角ボタン2つ(実測値): 2つ目・3つ目のタグ */
  --mw-tag2-top: 66.16%;
  --mw-tag2-height: 10%;
  --mw-tag2-left: 77.43%;
  --mw-tag2-width: 6.49%;
  --mw-tag3-left: 85.25%;
  --mw-tag3-width: 6.66%;
  overflow: hidden;
}
.hero-turntable__stage {
  position: relative;
  height: calc(var(--tt-h) + 10vw); /* 傾き・沈み込みのぶんの余白込み */
  padding-top: 1vw;
}
.hero-slide {
  position: absolute;
  top: 1vw;
  left: 50%;
  width: var(--tt-w);
  margin-left: calc(var(--tt-w) / -2);
  transform-origin: 50% calc(100% + var(--tt-r));
  transform: rotate(calc(var(--tt-slot, 3) * var(--tt-step)));
  transition: transform 1.4s cubic-bezier(.55, .06, .22, 1); /* ゆったり回り始めて静かに止まる */
  will-change: transform;
}
.hero-slide.ht-no-anim { transition: none; } /* 裏側での瞬間移動用(ループの継ぎ目) */

.hero-slide__link {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* --- レンジ枠あり(hero-slide--framed) --- */
.hero-slide--framed .hero-slide__visual {
  position: relative;
  display: block;
  aspect-ratio: 600 / 394;
}
.hero-slide--framed .hero-slide__visual--door-fx {
  perspective: 1400px; /* 扉が開く3D演出の視点 */
}
.hero-slide--framed .hero-slide__link {
  position: absolute;
  inset: 0; /* 親(hero-slide__screen=ガラス面)いっぱいに広げて、その面だけを記事へのリンクにする */
}
.hero-slide--framed .hero-slide__screen {
  position: absolute;
  top: var(--mw-window-top);
  left: var(--mw-window-left);
  width: var(--mw-window-width);
  height: var(--mw-window-height);
  display: block;
  overflow: hidden;
  border-radius: var(--mw-window-radius);
  background: var(--color-key-light);
}

/* --- 扉演出(microwave-door.png / microwave-body.pngがあるときだけ有効) ---
 * hero-slide__door はガラス面(screen)+扉の枠(doorframe)をひとまとめにして、
 * ヒンジ(扉の左端。実測値)を軸に回転させる。奥のframeは庫内が見える版に差し替え済み。
 * 全開ではなく少しだけ開く角度で、勢いよく開けるのではなく、重みを感じるくらい
 * ゆっくりと動かす(食べ物をじっくり見せる意図)。スナップ感のある弾みは付けない
 */
.hero-slide__door {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 2.33% 45.8%; /* 扉左端(ヒンジ)・実測値 */
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); /* ゆっくり動き出し、ゆっくり止まる=重み */
  will-change: transform;
}
.hero-slide__doorframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-slide.is-opening .hero-slide__door {
  transform: rotateY(-20deg);
}
/* 扉が開くにつれて庫内の光がゆっくりこぼれてくる演出 */
.hero-slide--framed .hero-slide__visual--door-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 18% 48%, var(--color-key-light) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 1s ease .2s;
  pointer-events: none;
}
.hero-slide.is-opening .hero-slide__visual--door-fx::after {
  opacity: .5;
}

.hero-slide__frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none; /* クリックはリンクに通す */
}

/* --- レンジの表示パネル(実測値)に更新日時を重ねる --- */
.hero-slide__clock {
  position: absolute;
  left: var(--mw-panel-left);
  top: var(--mw-panel-top);
  width: var(--mw-panel-width);
  height: var(--mw-panel-height);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em;
  pointer-events: none; /* クリックは奥のリンクに通す */
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--color-key-strong);
}
.hero-slide__clock-md {
  font-size: calc(var(--tt-w) * 0.032);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
}
.hero-slide__clock-year {
  font-size: calc(var(--tt-w) * 0.02);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.1;
  opacity: .85;
}

/* --- レンジのボタン(実測値)にカテゴリ/タグを重ねる。記事本体へのリンクとは
   別のリンクなので、frameより手前(z-index高め)に置いてクリックを受け取る --- */
.hero-slide__category,
.hero-slide__tag {
  position: absolute;
  left: var(--mw-strip-left);
  width: var(--mw-strip-width);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  color: var(--color-key-light);
  font-size: calc(var(--tt-w) * 0.016);
  font-weight: 600;
  letter-spacing: .02em;
}
.hero-slide__category {
  top: var(--mw-cat-top);
  height: var(--mw-cat-height);
}
.hero-slide__tag {
  top: var(--mw-tag-top);
  height: var(--mw-tag-height);
}
.hero-slide__category:hover,
.hero-slide__category:focus-visible,
.hero-slide__tag:hover,
.hero-slide__tag:focus-visible {
  color: var(--color-key-strong);
}

/* --- つまみ下の丸角ボタン2つ(実測値)に2枚目・3枚目のタグを重ねる --- */
.hero-slide__tag2,
.hero-slide__tag3 {
  position: absolute;
  top: var(--mw-tag2-top);
  height: var(--mw-tag2-height);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  color: var(--color-key-light);
  font-size: calc(var(--tt-w) * 0.012);
  font-weight: 600;
  letter-spacing: .01em;
}
.hero-slide__tag2 {
  left: var(--mw-tag2-left);
  width: var(--mw-tag2-width);
}
.hero-slide__tag3 {
  left: var(--mw-tag3-left);
  width: var(--mw-tag3-width);
}
.hero-slide__tag2:hover,
.hero-slide__tag2:focus-visible,
.hero-slide__tag3:hover,
.hero-slide__tag3:focus-visible {
  color: var(--color-key-strong);
}

/* --- つまみ(実測値・概算): 見た目は透明のまま、記事へのリンクの当たり判定だけ置く --- */
.hero-slide__dial {
  position: absolute;
  left: var(--mw-dial-left);
  top: var(--mw-dial-top);
  width: var(--mw-dial-width);
  height: var(--mw-dial-height);
  z-index: 4;
  border-radius: 50%;
}
.hero-slide__dial:focus-visible {
  outline: 2px solid var(--color-key-strong);
  outline-offset: 2px;
}

/* --- タイトルはレンジの下(キャプション。記事へのリンク) --- */
.hero-slide--framed .hero-slide__caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 88%; /* スライド幅いっぱいだと隣のスライドの見出しと重なって見えるため、少し狭める */
  margin-top: 10px;
  margin-inline: auto;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
}
.hero-slide--framed .hero-slide__caption:hover {
  text-decoration: underline;
}

/* --- フォールバック(イラスト未設置時は正方形カード) --- */
.hero-slide:not(.hero-slide--framed) .hero-slide__link {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--radius-thumb) + 4px);
  background: var(--color-key-light);
}
.hero-slide:not(.hero-slide--framed) .hero-slide__screen {
  position: absolute;
  inset: 0;
  display: block;
}

/* --- 共通: 窓の中身 --- */
.hero-slide__screen img,
.hero-slide__placeholder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide__placeholder {
  background: linear-gradient(135deg, var(--color-key), var(--color-key-light));
}

/* --- 2枚目サムネイルあり: ゆっくりクロスフェード(archive.cssのカードと同じ考え方) --- */
.hero-slide__img-hover {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero-slide.is-center .hero-slide__screen:hover .hero-slide__img-hover,
.hero-slide.is-center .hero-slide__screen:focus-within .hero-slide__img-hover {
  opacity: 1;
}

/* --- 2枚目サムネイルなし: ゆっくりズームにフォールバック --- */
.hero-slide__screen--single .hero-slide__img-base {
  transition: transform 1.8s ease;
}
.hero-slide.is-center .hero-slide__screen--single:hover .hero-slide__img-base,
.hero-slide.is-center .hero-slide__screen--single:focus-within .hero-slide__img-base {
  transform: scale(1.07);
}
.hero-slide__overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: block;
  padding: 44px 16px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.hero-slide__date {
  display: block;
  margin-bottom: 4px;
  font-size: .72rem;
  letter-spacing: .06em;
}
.hero-slide__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ドット */
.hero-turntable__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 0;
}
.ht-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-line);
  cursor: pointer;
  transition: background .25s ease;
}
.ht-dot.is-active { background: var(--color-ink); }

/* --- 扉が開いたあと、遷移前に画面を覆うヴェール(front-page.jsで.is-active切り替え) ---
 * 扉のアニメーションだけだと次のページへの切り替わりが唐突になるため、
 * 遷移直前に画面全体を背景色でふわっと覆い、次ページの読み込みの継ぎ目を目立たなくする
 */
.hero-turntable__veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-paper, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.hero-turntable__veil.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide__img-hover,
  .hero-slide__screen--single .hero-slide__img-base { transition: none; }
  .hero-slide.is-center .hero-slide__screen--single:hover .hero-slide__img-base { transform: none; }
  .hero-slide__door,
  .hero-slide--framed .hero-slide__visual--door-fx::after,
  .hero-turntable__veil { transition: none; }
}
@media (max-width: 640px) {
  .hero-turntable {
    --tt-w: 82vw;
    --tt-step: 16deg;
    --tt-r: 280vw;
  }
  .hero-turntable__stage { height: calc(var(--tt-h) + 14vw); }
}

/* ---------------------------------------------------------------------------
 * ③⑤ 冷凍ショーケース風の記事一覧
 *
 * new-articles__grid / recommend__grid を .freezer-case で1つ包み、
 * グリッド全体を1台の陳列ケースに見立てる。
 * ・freezer-case__top/base = 天板/土台(太い一枚板+溝線)
 * ・freezer-case__glass = ガラス部分。反射と中央の扉柱をここに重ねる
 * ・カード間の縦線(border-left) = 扉と扉の継ぎ目
 * ・grid-entry の border-bottom = 棚板の縁
 * ------------------------------------------------------------------------- */
.freezer-case {
  overflow: hidden;
  margin-top: clamp(48px, 6vw, 72px);
  border: 10px solid #bcd4dc; /* 上下の枠(青系の単色) */
  border-left: 10px solid #4f8b98; /* 左右は天板と同じ濃い色 */
  border-right: 10px solid #4f8b98;
  border-radius: 18px;
  background: var(--color-paper);
}
/* 天板・土台 共通: 太い一枚板の中に細い溝線を2本 */
.freezer-case__top,
.freezer-case__base {
  background-repeat: no-repeat;
  background-size: 92% 2px, 92% 2px;
  background-position: center calc(50% - 6px), center calc(50% + 6px);
}
.freezer-case__top {
  height: clamp(26px, 3.6vw, 38px);
  background-color: #4f8b98;
  background-image: linear-gradient(#3c6d78, #3c6d78), linear-gradient(#3c6d78, #3c6d78);
}
.freezer-case__base {
  height: clamp(18px, 2.6vw, 26px);
  background-color: #9dc2cc;
  background-image: linear-gradient(#7ea8b3, #7ea8b3), linear-gradient(#7ea8b3, #7ea8b3);
}
.freezer-case__glass {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 2.4vw, 28px);
}
/* ガラス面の反射: 中央の扉柱をまたがないよう、左半分・右半分で別々に反射を重ねる */
.freezer-case__glass::before,
.freezer-case__glass::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 50%;
  background: repeating-linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, .22) 10%,
    rgba(255, 255, 255, .22) 13%,
    rgba(255, 255, 255, 0) 13%,
    rgba(255, 255, 255, 0) 30%
  );
  pointer-events: none;
}
.freezer-case__glass::before { left: 0; }
.freezer-case__glass::after { right: 0; }
/* 中央の扉柱: 取っ手・ヒンジをイメージした太めのブロック(ガラスではないため
   反射はここには重ねない)。行ごとに途切れないよう天面から底面まで1本で通す */
.freezer-case__pillar {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 7;
  width: 18px;
  background-color: #2f5760;
  background-image: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18));
  background-repeat: no-repeat;
  background-size: 3px 100%;
  background-position: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.new-articles__grid,
.recommend__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 44px) 0;
}
.grid-entry {
  padding: 0 clamp(14px, 2vw, 22px) clamp(16px, 2.4vw, 24px);
  border-bottom: 1px solid var(--color-line); /* 棚板の縁 */
}
/* 4列時: 左端(1,5,9...)以外に継ぎ目の線を入れて左2枚+右2枚のまとまりを見せる。
   中央(2つ目と3つ目の間)の扉柱は、行ごとに途切れないよう .freezer-case__glass::after で
   ガラス面の天面から底面まで1本につながる形として引く(上のfreezer-case定義を参照) */
.grid-entry:nth-child(4n+2),
.grid-entry:nth-child(4n) {
  border-left: 1px solid var(--color-line);
}
.grid-entry__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.grid-entry__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--color-key-light);
  /* パッケージの開け口のような、左右のみのごく細かいギザギザ(ほぼ直線・上下は直線のまま) */
  clip-path: polygon(
    100% 0%, 98.8% 4%, 100% 8%, 98.8% 12%, 100% 16%, 98.8% 20%,
    100% 24%, 98.8% 28%, 100% 32%, 98.8% 36%, 100% 40%, 98.8% 44%,
    100% 48%, 98.8% 52%, 100% 56%, 98.8% 60%, 100% 64%, 98.8% 68%,
    100% 72%, 98.8% 76%, 100% 80%, 98.8% 84%, 100% 88%, 98.8% 92%,
    100% 96%, 98.8% 100%,
    0% 100%, 1.2% 96%, 0% 92%, 1.2% 88%, 0% 84%, 1.2% 80%,
    0% 76%, 1.2% 72%, 0% 68%, 1.2% 64%, 0% 60%, 1.2% 56%,
    0% 52%, 1.2% 48%, 0% 44%, 1.2% 40%, 0% 36%, 1.2% 32%,
    0% 28%, 1.2% 24%, 0% 20%, 1.2% 16%, 0% 12%, 1.2% 8%,
    0% 4%, 1.2% 0%
  );
}
.grid-entry__media img,
.grid-entry__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.grid-entry__link:hover .grid-entry__media img { transform: scale(1.04); }
.grid-entry__placeholder {
  background: linear-gradient(135deg, var(--color-key), var(--color-key-light));
}
.grid-entry__title {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
}
.grid-entry__link:hover .grid-entry__title { text-decoration: underline; }
.grid-entry--small .grid-entry__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: .86rem;
}

/* ---------------------------------------------------------------------------
 * 一覧を見るボタン(ラベンダーピル + 矢印)
 * ------------------------------------------------------------------------- */
.section-more {
  margin: clamp(40px, 5vw, 56px) 0 0;
  text-align: center;
}
.section-more a {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 14px 40px;
  border-radius: var(--radius-pill);
  background: var(--color-key);
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-decoration: none;
  transition: opacity .25s ease;
}
.section-more a:hover { opacity: .82; }
.section-more__arrow { letter-spacing: 0; }

/* ---------------------------------------------------------------------------
 * ④ series(黄金色全幅帯 + 白い横型カードのレール)
 * ------------------------------------------------------------------------- */
.series-band {
  margin-top: clamp(64px, 9vw, 110px);
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 88px);
  background: var(--color-gold-band);
  border-radius: 40px 40px 0 0;
}
.series-band + .section { padding-top: clamp(64px, 9vw, 110px); }
.series-rail { position: relative; }
.series-rail__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 4px max(24px, calc((100vw - var(--mag-width)) / 2));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.series-rail__track::-webkit-scrollbar { display: none; }
.series-card {
  flex: 0 0 min(360px, 84vw);
  scroll-snap-align: start;
}
.series-card__link {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 100%;
  padding: 16px;
  border-radius: var(--radius-thumb);
  background: var(--color-paper);
  box-shadow: 0 10px 30px rgba(24, 33, 31, .1);
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease;
}
.series-card__link:hover { transform: translateY(-3px); }
.series-card__thumb {
  flex: 0 0 92px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--radius-thumb) - 4px);
  background: var(--color-gold-light);
}
.series-card__thumb img,
.series-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.series-card__placeholder {
  background: linear-gradient(135deg, var(--color-gold-band), var(--color-gold-light));
}
.series-card__body { min-width: 0; }
.series-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-top: 6px;
  overflow: hidden;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.65;
}
.series-rail__button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: 0 8px 22px rgba(24, 33, 31, .16);
  color: var(--color-ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .25s ease, color .25s ease;
}
.series-rail__button:hover {
  background: var(--color-ink);
  color: #fff;
}
.series-rail__button--prev { left: max(12px, calc((100vw - var(--mag-width)) / 2 - 20px)); }
.series-rail__button--next { right: max(12px, calc((100vw - var(--mag-width)) / 2 - 20px)); }

/* ---------------------------------------------------------------------------
 * ⑥ 特集バナー帯(薄グレー背景・上下角丸)
 * ------------------------------------------------------------------------- */
.banner-band {
  margin: clamp(64px, 9vw, 110px) auto 0;
  padding: clamp(36px, 5vw, 56px) max(24px, calc((100vw - var(--mag-width)) / 2));
  background: #f4f4f4;
  border-radius: 40px;
}
.banner-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--mag-width);
  margin: 0 auto;
}
.banner-band__item {
  display: block;
  overflow: hidden;
  border-radius: calc(var(--radius-thumb) - 6px);
  transition: opacity .25s ease;
}
.banner-band__item:hover { opacity: .85; }
.banner-band__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * レスポンシブ
 * ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .banner-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ヘッダーが画面下部固定に切り替わる幅(main.cssの.site-header切り替えと合わせる)。
   上部に固定ヘッダーが無くなるため、天面の余白は最小限でよい。
   記事一覧(冷凍ショーケース)もこの幅でPC4列→スマホ2列に切り替える */
@media (max-width: 900px) {
  .front-page.magazine { padding-top: 24px; }
  .new-articles__grid,
  .recommend__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2列時はPC4列時の継ぎ目を解除する。中央は太い扉柱(.freezer-case__pillar)が
     すでにあるので、その隣にさらに細い線を足すと片側だけ線が重なって中央からずれて
     見えてしまうため、2列時は継ぎ目の線を追加しない */
  .grid-entry { border-left: none; }
  /* new articlesはPC16件・スマホ10件にするため、11件目以降を非表示にする
     (クエリ自体は16件取得しているが、表示だけスマホで絞る) */
  .new-articles__grid .grid-entry:nth-child(n+11) { display: none; }
  /* ケースを画面幅いっぱいに(.sectionの左右24px paddingを打ち消す)。
     サムネイルもできるだけ大きく見せたいので、ケース内側の余白を詰める */
  .freezer-case { margin-inline: -24px; }
  .freezer-case__glass { padding: 10px; }
  .grid-entry { padding: 0 8px 12px; }
}
@media (max-width: 640px) {
  .series-band,
  .banner-band { border-radius: 24px; }
  .series-band { border-radius: 24px 24px 0 0; }
}