/*
 * トップページ（index.php）。共通の部品（ボタン・見出し）は css/theme.css。
 *
 * 強弱は字の大きさの差と余白で付ける。箱は「賞」の板 1 枚だけ。
 * ページ読み込みの動きはヒーローのロゴ 1 回だけ（下の「ロゴの組み上がり」）。
 */

/* 上に引っ張ったとき（オーバースクロール）に見える地をヒーローの上端と同じ色に（2026-10-24 夜）。
   <html> に背景が無いと body の cream-100 が画面全体の地になり、スマホで上に引っ張ると、
   ヒーローの cream-200 の上に一段明るい帯が出ていた。theme-color（lib/view.php）も cream-200。
   <html> だけに付けるので、下に引っ張ったときはページの地（body の cream-100）のまま。
   home.css は 404 / 500 も読むので、トップだけ（index.php が page_header の htmlClass で <html> に home を付ける。
   最初は html:has(body.page-home) で書いたが、古い端末で効かない可能性を消すためクラスにした）。
   ★ iOS の Brave（WebKit）では、これでも引っ張った地は body の cream-100 のままだった（2026-10-24 夜。実機）。
     iOS が引っ張った地に html の色を使っていないらしい。大事ではないので追わないことにした。
     直すなら、こちらではなくヒーローの上端の色を cream-100 側に寄せる */
html.home {
  background: var(--cream-200);
}

/* ============================================================
   ヒーロー
   ------------------------------------------------------------
   ポスターの地（cream-200）の面に、ロゴと一言とボタン。
   ロゴの後ろにだけ大きなクリームの輪を薄く置く（ロゴの中の黄の輪と同じ形。他の飾りは置かない）。
   スマホは縦に積んで中央揃え、PC はロゴを左・字を右に。
   ============================================================ */
/* ファーストビューはそれ以外とはっきり分ける: 地の色（cream-200）。同じ地の色を下の節に使わない。
   下の角を丸くするのは「変」とのことでやめた（2026-10-24） */
/* 地は平らな 1 色ではなく、ロゴの後ろから光が広がるグラデーション（2026-10-24「ファーストビューに足りない感」）。
   - ロゴの後ろ: 明るいクリームの柔らかい光
   - 右下: うっすら橙の温かみ
   - 全体: 上が少し明るく下が少し深い
   光の中心はロゴの位置（スマホは上の中央、PC は左） */
.hero {
  position: relative;
  overflow: hidden;
  --glow-x: 50%;
  --glow-y: 28%;
  background:
    radial-gradient(ellipse 70% 55% at var(--glow-x) var(--glow-y), #fffbea 0%, color-mix(in srgb, #fffbea 0%, transparent) 100%),
    radial-gradient(ellipse 60% 50% at 100% 100%, color-mix(in srgb, var(--orange) 22%, transparent) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 0% 100%, color-mix(in srgb, var(--yellow) 25%, transparent) 0%, transparent 100%),
    linear-gradient(180deg, #f7eab8 0%, var(--cream-200) 55%, #f0d98e 100%);
}

@media (min-width: 900px) {
  .hero {
    --glow-x: 28%;
    --glow-y: 50%;
  }
}

/* 字は左揃え（ページ全体と同じ。中央揃えだと句読点の分だけ左に寄って見える）。ロゴだけ中央 */
.hero__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: flex;
  max-width: 72rem;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-block);
  padding: var(--gap-6) var(--gap-5) calc(var(--space-block) * 2);
  text-align: center; /* スマホは縦に積むので中央揃え（ロゴの下）。PC は横並びなので左揃え */
}

/* ============================================================
   ロゴ。押すと動きをもう一度（js/home.js）。ボタンだが見た目は絵のまま
   ------------------------------------------------------------
   ★ 調整はここの変数だけでできる（2026-10-24。手で直すとき用）。PC の値は下の 900px〜 の .hero__logo
     --logo-size     ロゴの幅
     --logo-x        ロゴを左右に動かす（+ で右、- で左）。0 でお皿が真ん中
     --logo-y        ロゴを上下に動かす（+ で下、- で上）
     --logo-space    ロゴの上下の余白（後ろの輪のはみ出し約 12% を見込んだ値にする）
     --ring-x        後ろの輪の左右の広がり（ロゴの幅に対して。大きいほど輪が横に広い）
     --ring-y        後ろの輪の上下の広がり（ロゴの高さに対して）
   ★ --plate-offset は触らない。ロゴの画像の中のお皿（円）の中心が、画像の枠の中心より幅の 7.6% 右に
     あるための補正で、ロゴの位置（translate）と輪の位置（inset）の両方に同じ値で効く（対の値）。
   ============================================================ */
.hero__logo {
  --logo-size: min(86vw, 19rem);
  --logo-x: 0%;
  --logo-y: 0px;
  --logo-space: 1.5rem;
  --ring-x: 6%;
  --ring-y: 15%;
  --plate-offset: 3.2%;

  position: relative;
  align-self: center;
  width: var(--logo-size);
  margin: var(--logo-space) 0;
  translate: calc(var(--logo-x) - var(--plate-offset)) var(--logo-y);
  border-radius: var(--radius-xl);
  cursor: default;
}

/* 後ろの輪はロゴの中のお皿に中心を合わせる（枠の中心に描くとお皿とずれて、ロゴが右に寄って見えた） */
.hero__logo::before {
  content: "";
  position: absolute;
  inset:
    calc(-1 * var(--ring-y))
    calc(-1 * var(--ring-x) - var(--plate-offset))
    calc(-1 * var(--ring-y))
    calc(-1 * var(--ring-x) + var(--plate-offset));
  z-index: 0;
  border-radius: 50%;
  /* 輪の内側をうっすら明るく（光彩）。ロゴの後ろに光が当たっているように */
  background:
    radial-gradient(
      circle,
      transparent 58%,
      color-mix(in srgb, var(--cream-50) 75%, transparent) 59%,
      color-mix(in srgb, var(--cream-50) 75%, transparent) 66%,
      transparent 67%
    ),
    radial-gradient(circle, color-mix(in srgb, #fff 45%, transparent) 0%, transparent 58%);
  animation: ring-in 1.2s var(--ease-out) both;
}

/* ロゴに暖かい色の影（茶ではなく深い橙。地のクリームの上で濁らない）。紙から浮いて見える */
.hero__logo svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(201, 96, 26, 0.22)) drop-shadow(0 2px 3px rgba(201, 96, 26, 0.18));
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-line);
  max-width: 36rem;
}

/* 一言。主役はロゴなので、スマホではロゴより小さく 2 行（「食べて、選んで、／No.1を決めよう。」）。
   PC では 4 行で大きく（ロゴが横に並ぶので主従は崩れない） */
.hero__lead {
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ink);
  /* 和欧間のアキ（Safari 18.4〜の text-autospace）は入れない。Chrome と見え方をそろえる */
  text-autospace: no-autospace;
}

/* スマホは「食べて、選んで、」と「No.1を決めよう。」の 2 行。行は index.php で明示的に分けてあり、
   行の中では折り返さない（iPhone で句の境目に隙間が出た対策。index.php のコメント） */
.hero__line {
  display: block;
  white-space: nowrap;
}

/* 2 行目の「No.1」は 1.3 倍で、はみ出す高さが上に出る（line-height 0.75 で行を高くしない作り）。
   そのままだと 1 行目との間が普通の行間より狭く見える（PC で「食」の下から「N」の上まで 8px。普通は 13px）ので、
   2 行目だけ上に 0.14em 足して、行の間を同じに見せる（2026-10-25 夜「No.1 のところ行間狭くない？」。スマホも同じ） */
.hero__line:nth-child(2) {
  margin-top: 0.14em;
}

/* 句の途中で折り返さない（「No.1を決\nめよう。」にならないように） */
.hero__word {
  display: inline-block;
  white-space: nowrap;
}

/* 画面に一点だけ濃い色（深い橙）。全部が柔らかい黄と橙で締まりが無かったので、「No.1」だけ色を変える（2026-10-24 夜） */
.hero__num {
  /* 数字は同じ大きさの字より小さく見える上に、ここが文の芯なので一回り大きく。
     line-height を詰めて、この行だけ高くならないようにする（1 だと 4px 高くなった） */
  font-size: 1.3em;
  line-height: 0.75;
  color: var(--orange-deep);
  /* 英数字は字の基準の線の上に乗り、かなは線より下まで描かれるので、大きくした「No.1」は「を」より 1.5〜2.3px
     浮いて見えた。下端がそろうだけ下げる（2026-10-27 のチェック。.hero__facts .num と同じ理由） */
  position: relative;
  top: 0.036em;
}

.hero__sub {
  max-width: 28rem;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink);
}

.hero__actions {
  margin-top: var(--space-block);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
}

/* 主ボタンだけ大きく幅いっぱい。2 つ目は一段小さく（同じ大きさだとどちらを押すか迷う） */
.hero__actions .btn--primary {
  width: 100%;
}

/* 2 つ目の押せる物も枠の付いたボタンに（字だけだと押せる物に見えず、どこへ行くか分からない） */
.hero__actions .btn--ghost {
  background: var(--cream-50);
}

/* PC だけの「検索欄＋MAPで見る」（index.php の注）。スマホでは出さない。PC の指定は home.css 末尾の 1024px〜 */
.hero__find {
  display: none;
}

@media (min-width: 900px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap-12);
    padding: var(--gap-12) var(--gap-6);
    text-align: left;
    min-height: min(78vh, 46rem);
  }
  /* PC のロゴ（変数の意味は上の .hero__logo）。横並びなので上下の余白は 0 */
  .hero__logo {
    --logo-size: 30rem;
    --logo-x: 0%;
    --logo-y: 0px;
    --logo-space: 0px;
    flex-shrink: 0;
  }
  .hero__copy {
    align-items: flex-start;
    max-width: 30rem;
  }
  .hero__actions .btn--primary {
    width: auto;
  }
  .hero__lead {
    font-size: var(--text-hero);
    line-height: 1.08;
  }
  /* PC では 1 句 1 行（4 行）。句ごとにブロックにする */
  .hero__word {
    display: block;
  }
  /* 2 つを横に並べると字の列（30rem）からはみ出す。縦に積んで左端を揃える（主が上、副が下で一段小さい） */
  .hero__actions {
    align-items: flex-start;
  }
  }

/* ------------------------------------------------------------
   ヒーローの飾り（星・丸・斜めの帯）
   ------------------------------------------------------------
   ポスターの背景層から、形と色（黄・杏・クリーム）だけを取って数を絞って置く。
   ファーストビューだけの約束。ロゴの黄の星が弾けるのと同じころ（1.1s〜）に出る。
   スマホでは字と重なる位置のものを隠す。
   ------------------------------------------------------------ */
.hero__deco {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}





/* 中央下の白い丸は「ページ送りの点」に見えたのでやめた（レビュー） */

/* 流れ星。ロゴが組み上がったあと、右上から左下へ 2 つ流れて消える（1 回きり）。
   ポスターの斜めの線を、置きっぱなしの帯ではなく動きにした（「星がただあるだけだとチープ」2026-10-24） */
.hero__shoot {
  position: absolute;
  top: 22%;
  right: -4rem;
  width: 12rem;
  height: 4px;
  border-radius: var(--radius-pill);
  /* 頭（左）が黄、尾（右）が透ける */
  background: linear-gradient(90deg, var(--yellow) 0%, color-mix(in srgb, var(--yellow) 60%, transparent) 40%, transparent 100%);
  transform-origin: left center;
  rotate: -32deg;
  opacity: 0;
  /* 速すぎると見えない（最初は 0.5 秒で 8 割飛んで薄くなっていた）。1.8 秒かけて、7 割の時間ははっきり見せる */
  animation: shoot 1.8s cubic-bezier(0.35, 0.65, 0.55, 1) 1.6s both;
}

.hero__shoot::after {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  translate: 0 -50%;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 流れ星の頭の光彩（clip-path の外に光を出すため、親に filter） */
.hero__shoot {
  filter: drop-shadow(0 0 4px var(--yellow)) drop-shadow(0 0 10px color-mix(in srgb, var(--yellow) 60%, transparent));
}

.hero__shoot--2 {
  top: 8%;
  right: 20%;
  width: 7rem;
  height: 2px;
  animation-delay: 2.3s;
  animation-duration: 1.4s;
}

.hero__shoot--2::after {
  width: 0.7rem;
  height: 0.7rem;
  left: -0.35rem;
}

@keyframes shoot {
  0% { opacity: 0; translate: 0 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; translate: -56vw 35vw; }
}

@keyframes deco-pop {
  from { opacity: 0; scale: 0; }
  to { opacity: 1; scale: 1; }
}

@keyframes deco-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 899px) {
        .hero__shoot { top: 30%; width: 8rem; }
  .hero__shoot--2 { top: 12%; right: 30%; width: 5rem; }
}

/* ------------------------------------------------------------
   ロゴの組み上がり
   ------------------------------------------------------------
   dev/contest_logo_anim.py が図形ごとに付けた「部位」のクラスで、
     1. 大枠を素早く:   お皿（.p-plate）と字「模擬店コンテスト」（.p-text）が 0.4 秒で立ち上がり
     2. 飾りを順に足す: スプーン（.p-spoon）・フォーク（.p-fork）が上から滑り込み → 「2026」の札（.p-badge）
                        → 月桂冠（.laurel。下の節）→ 王冠（.p-crown）が上から降りて乗り
                        （奥から手前の順。札はスプーン・フォークの手前に重なるので、そのあとに）
                        → 字の黄の飾り（.p-deco。--k の順）が弾け → 王冠の星（.p-star。--g の順）が最後に光る
   一言・文・ボタンは大枠と同時（下の .hero__word）。全部で 1.7 秒ほど。1 回きり。
   （以前は色の順＝クリームの板 → 橙の形 → 黄の星。「大枠は素早く、飾りを後から足す」に 2026-10-24 夜に変えた）
   .is-still（js/home.js）が付いている間は動かさず、外した瞬間に最初から。
   reduce-motion のときは base.css が全部 0.01ms にするので一瞬で完成形になる。
   ------------------------------------------------------------ */
.logo-anim path,
.logo-anim polygon,
.logo-anim rect,
.logo-anim circle,
.logo-anim ellipse {
  transform-box: fill-box;
  transform-origin: center;
}

/* 自分で transform 属性（回転して置いてある）を持つ図形は、軸を SVG の既定に戻す。
   transform-origin は transform 属性の回転にも効くので、center にすると回転の軸がずれて図形が飛び出す
   （王冠の中の楕円と「模」の下の四角。2026-10-24）。
   ★ だからこの図形を含む部位（王冠・字）は translate だけで動かす。scale / rotate は軸が原点になって飛ぶ */
.logo-anim [transform] {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* 「ト」の縦棒・「ス」の払い・「ト」の黄の払いなどは、同じ色の細い輪を 3〜4 重に並べて 1 本の線にしてある
   （元の絵のつくり）。輪と輪の継ぎ目で下のクリームがにじみ、白い線が見えていた（2026-10-28）。
   橙・黄の形に同じ色の細い縁（0.5。表示で 0.3px ほど太るだけ）を付けて継ぎ目を埋める。
   fill: none の形（l-o の 16 個）は縁を付けると線が出てくるので外す */
.logo-anim .l-o:not([style*="fill: none"]) {
  stroke: var(--orange);
  stroke-width: 0.5;
}
.logo-anim .l-y {
  stroke: var(--yellow);
  stroke-width: 0.5;
}

/* ★ 形を 1 つずつ半透明にすると、重なった所だけ色が濃くなる（クリームの字の形とクリームの雲が重なって、
     字がうっすら浮いて見えてから消えていた。2026-10-24 の指摘）。そこで:
     - 透け具合はロゴ全体（.logo-anim）にだけ掛ける（1 枚として濃くなるので重なりが出ない）
     - 1 つずつの形は、出る瞬間（1%）に不透明になり、大きさと位置だけ動かす
   ★ 動きは transform ではなく scale / translate / rotate で書く。SVG の中で回転して置いてある図形
     （王冠の中の楕円など）の transform 属性を、CSS の transform が上書きして向きが変わるため */
.logo-anim {
  animation: logo-fade 0.3s ease-out 0s both;
}

/* 1. 大枠。お皿は少し小さい所から広がり、字は下からすっと上がる。図形ごとの遅れは付けない（1 枚として出す） */
.logo-anim .p-plate {
  animation: logo-plate 0.45s var(--ease-out) 0s both;
}

.logo-anim .p-text {
  animation: logo-rise 0.4s var(--ease-out) 0.05s both;
}

/* 2. 飾り。スプーンは左上から、フォークは右上から、少し傾いて滑り込み、まっすぐに戻る */
.logo-anim .p-spoon {
  animation: logo-slide-l 0.5s var(--ease-pop) 0.4s both;
}

.logo-anim .p-fork {
  animation: logo-slide-r 0.5s var(--ease-pop) 0.5s both;
}

/* 「2026」の札はスプーン・フォークの手前に重なるので、そのあとにふっと浮く */
.logo-anim .p-badge {
  animation: logo-rise 0.35s var(--ease-out) 0.65s both;
}

/* 王冠は上から降りてきて乗る（translate だけ。中の楕円が transform 属性を持つため。上の注意） */
.logo-anim .p-crown {
  animation: logo-drop 0.5s var(--ease-pop) 0.85s both;
}

/* 字の黄の飾り（「模」の縦線や「コ」の上の線など 15 個）は左から順に弾ける */
.logo-anim .p-deco {
  animation: logo-spark 0.4s var(--ease-pop) both;
  animation-delay: calc(1s + var(--k) * 30ms);
}

/* 王冠の星 3 つは最後。全部が揃った 1.9 秒に、左から順にきらんと光る（crown-glint-once。「全部終わった後
   王冠の星をきらんってさせてほしい」2026-10-24 夜）。出たあとも、ときどき光る（crown-glint）。1 つが 15 秒に 1 回、
   0.6 秒だけ明るく大きくなり、3 つが 5 秒ずつずれて順番に光る（画面全体では 5 秒に 1 回）。ずっと全部が点滅すると
   一言やボタンが読みにくい。ヒーローが画面から外れたら止める（js/home.js が .hero に .is-away）。
   動きを減らす設定では base.css が止める。
   ★ 3 つの animation はどれも scale を動かすので、時間が重ならないようにしてある
     （logo-spark は遅くとも 1.83s に終わる。once は 1.9s から、glint の最初の光りは 17 秒すぎ） */
.logo-anim .p-star {
  animation:
    logo-spark 0.4s var(--ease-pop) both,
    crown-glint 15s ease-in-out infinite,
    crown-glint-once 0.6s ease-in-out both;
  animation-delay: calc(1.25s + var(--g) * 90ms), calc(2.5s + var(--g) * 5s), calc(1.9s + var(--g) * 130ms);
}

.hero.is-away .logo-anim .p-star {
  animation-play-state: running, paused, running;
}

@keyframes crown-glint {
  0%, 96%, 100% { scale: 1; filter: none; }
  98% { scale: 1.45; filter: brightness(1.25) drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #fff7c2); }
}

/* 揃った直後の 1 回だけの光り。ときどきの光りより少し大きく、少し回る */
@keyframes crown-glint-once {
  0%, 100% { scale: 1; rotate: 0deg; filter: none; }
  45% { scale: 1.7; rotate: 25deg; filter: brightness(1.35) drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff7c2); }
}

.hero__logo.is-still .logo-anim,
.hero__logo.is-still .logo-anim :is(path, polygon, rect, circle, ellipse),
.hero__logo.is-still::before {
  animation: none;
}

@keyframes ring-in {
  from { opacity: 0; scale: 0.8; }
  to { opacity: 1; scale: 1; }
}

@keyframes logo-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes logo-plate {
  from { scale: 0.85; }
  to { scale: 1; }
}

/* 出る瞬間（1%）に不透明に。半透明の途中を作らない（以下すべて同じ） */
@keyframes logo-rise {
  0% { opacity: 0; translate: 0 10px; }
  1% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes logo-drop {
  0% { opacity: 0; translate: 0 -26px; }
  1% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes logo-slide-l {
  0% { opacity: 0; translate: -14px -28px; rotate: -12deg; }
  1% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes logo-slide-r {
  0% { opacity: 0; translate: 14px -28px; rotate: 12deg; }
  1% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes logo-spark {
  0% { opacity: 0; scale: 0; rotate: -60deg; }
  1% { opacity: 1; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}

/* 字はロゴと同時に出す（ロゴが組み上がるのを待たせると、読み込みが遅いように見える。2026-10-24）。
   以前は字はロゴのあとに。1 回きりなので、ロゴをもう一度動かしても字は動かさない */
.hero__word,
.hero__sub,
.hero__actions,
.hero__find {
  animation: rise 0.5s var(--ease-out) both;
}

/* 語ごとの遅れは変数で渡す。:nth-child で animation-delay を直接書くと詳細度が高く、
   2 回目以降の .hero-seen .hero__word（遅れ 0）に勝って字だけ遅れて出ていた。
   スマホは 4 語をほぼ同時に出す。「速い」と言われて PC のように 3 拍にしてみたが、視線が散るので戻した（2026-10-28） */
.hero__word { animation-delay: var(--word-d, 0s); }
.hero__line:nth-child(1) .hero__word:nth-child(1) { --word-d: 0.1s; }
.hero__line:nth-child(1) .hero__word:nth-child(2) { --word-d: 0.16s; }
.hero__line:nth-child(2) .hero__word:nth-child(1) { --word-d: 0.22s; }
.hero__line:nth-child(2) .hero__word:nth-child(2) { --word-d: 0.28s; }
.hero__sub { animation-delay: 0.38s; }
/* ボタンは大枠が立ち上がるのと同時。押せる物を、飾りが揃う 1.7 秒まで待たせない */
.hero__actions,
.hero__find { animation-delay: 0.42s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   本文の節
   ============================================================ */
/* ============================================================
   余白の決まり（2026-10-24「余白は区切りとグルーピングの意味を持つ」）
   ------------------------------------------------------------
   3 段だけ使う。これ以外の余白を節の間に作らない。
     --space-group … 節と節の間（話が変わる）。スマホ 4.5rem、PC 7rem
     --space-block … 節の中の塊の間（見出しの組 → 中身、中身 → 補足）。1.5rem
     --space-line  … 見出しとその説明、項目と項目の間。0.5rem
   帯（ガラポン）は上下に --space-group を取り、帯の中は --space-block の 2 倍。
   注意事項は前の節の付属なので --space-group ではなく --space-block × 2 で続ける。
   ============================================================ */
main {
  --space-group: clamp(4.5rem, 3rem + 4vw, 7rem);
  --space-block: 1.5rem;
  --space-line: 0.5rem;
}

.section {
  margin: 0 auto;
  max-width: 44rem;
  padding: var(--space-group) var(--gap-5) 0;
}

.section:last-of-type {
  padding-bottom: var(--space-group);
}

/* 見出しから本文まで（見た目で約 24px）は、本文の行と行の間（約 13px）よりはっきり広く。
   同じくらいだと見出しが本文の 1 行目に見える（2026-10-24 の指摘）。ただし次の塊までよりは狭く */
.section > .title + .lede {
  margin-top: 0.75rem;
}


/* --- 投票までの流れ --- */
/* 見出しは「探す・食べる・投票する」の短い動詞なので、番号と並べて大きく出し、3 語だけで流れが読めるようにする。
   説明はその下に小さく（2026-10-27。以前は「模擬店を探す」など長い見出しで、字を小さくしていた） */
.steps__list {
  margin-top: var(--space-block);
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}

/* 動詞は節の見出し（.title）より一段小さく
   （同じか大きいと「投票までの流れ」より中身の方が目立ち、どれが見出しか分かりにくい。2026-10-27） */
.steps__title {
  font-size: calc(var(--text-xl) * 0.9);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ink);
}

/* 番号。深い橙の丸に白い数字（明るい橙はクリームの上で 2.4 しか無い。意味のある数字は深い橙）。
   スマホは見出しの左、640px〜 は見出しの上（下の 2 つの @media）。丸と丸を点線でつなぐ */
.steps__item {
  --steps-num-size: 2.25rem;
  position: relative;
}

.steps__num {
  display: grid;
  place-items: center;
  width: var(--steps-num-size);
  height: var(--steps-num-size);
  border-radius: 50%;
  background: var(--orange-deep);
  color: var(--cream-50);
  font-size: calc(var(--steps-num-size) * 0.556); /* 2.25rem の丸で 20px */
  line-height: 1;
  letter-spacing: 0;
  /* 数字の形は行の箱の中心より 0.086em 下にある（字体のつくり）。丸の真ん中に見えるよう、下の詰めで持ち上げる
     （2026-10-27「大きい丸の中の数字が下に寄っている」。0.17em だと 20px で 0.4px・24px で 1px 上に出たので測って 0.12em） */
  padding-bottom: 0.12em;
}

/* 1→2、2→3 をつなぐ点線（640px〜 は横、〜639px は縦。位置は下の 2 つの @media）。
   border の dotted は端の点が欠けたり最後だけ間隔が詰まったりして雑に見えた（2026-10-27）ので、
   点を背景で描き、repeat: round で長さに合わせて点の数と間隔を決める（点はいつも欠けず、間隔は均等。
   点の半径は px で決めてあるので、間隔が伸び縮みしても丸のまま）。両端は丸から同じだけ離す */
.steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  background-image: radial-gradient(circle 2px at 50% 50%, var(--orange) 1.5px, transparent 2px);
}

.steps__text {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink);
}

/* 640px〜: 3 つ横に。各列は上から 丸の番号・動詞・説明（左揃え）。丸と丸を横の点線でつなぐ。
   以前は「1. 探す ‥‥ 2. 食べる」と動詞の後ろから次の番号まで点線を引いていたが、点線の長さが動詞の字数で
   変わり、スマホ（丸の番号）とも別の部品だったので、スマホと同じ丸に（2026-10-27） */
@media (min-width: 640px) {
  .steps__list {
    flex-direction: row;
    gap: var(--gap-6);
  }
  .steps__item {
    --steps-num-size: 2.75rem;
    flex: 1;
  }
  /* 丸を左へ少しはみ出させて、中の数字を見出し・説明の字の左端に寄せる（2026-10-27 の指示）。
     数字の左端を字の左端にぴったり合わせる（0.38 倍・17px）のはやりすぎだったので、その半分（0.19 倍・約 8px） */
  .steps__item {
    --steps-num-shift: calc(var(--steps-num-size) * 0.19);
  }
  .steps__num {
    margin-left: calc(-1 * var(--steps-num-shift));
    margin-bottom: 0.75rem;
  }
  /* 丸の右から次の丸の左まで。次の丸は列の間の溝（--gap-6）の向こう。両端の空きは 0.375rem ＋ 点の左右の余白 2px */
  .steps__item:not(:last-child)::before {
    top: calc(var(--steps-num-size) / 2 - 2px);
    left: calc(var(--steps-num-size) - var(--steps-num-shift) + 0.375rem);
    right: calc(0.375rem - var(--gap-6) + var(--steps-num-shift));
    height: 4px;
    /* PC の点線は丸と丸の間が 250px ほどと長く、スマホと同じ濃い橙の 4px の点だと目立ちすぎた（2026-10-27）。
       点を小さく（3px）、色を節の見出しの 3 つめの点と同じ薄い橙に */
    background-image: radial-gradient(circle 1.5px at 50% 50%, #f3ae79 1px, transparent 1.5px);
    background-size: 7px 4px;
    background-repeat: round no-repeat;
  }
}

/* 〜639px: 縦の流れ。左に丸の番号、動詞と説明は丸の右にそろえる。番号と動詞と説明を縦に積むだけだと、
   説明が左端から始まってどの手順の説明か追いにくかった（2026-10-27） */
@media (max-width: 639px) {
  .steps__item {
    /* 丸の上端の位置。見出しの字の中心に丸の中心を合わせる。行（行の高さ 1.1）の中心は 0.55em だが、
       字の形はそれより 0.056em 下にある（字体のつくり。行の中心に合わせていたら丸が 0.5〜1.4px 上だった。2026-10-27） */
    --steps-num-top: calc(var(--text-xl) * 0.606 - var(--steps-num-size) / 2);
    padding-left: 3.25rem;
  }
  .steps__num {
    position: absolute;
    left: 0;
    top: var(--steps-num-top);
  }
  /* 説明はほかの節の本文と同じ 16px に（14px だとこの節だけ小さかった。2026-10-27）。行間は本文と同じ 1.7 */
  /* 見出しとの間は少しだけ詰める（0.6rem → 0.35rem。2026-10-27 の指示） */
  .steps__text {
    margin-top: 0.35rem;
    font-size: var(--text-base);
  }
  /* 丸の下から次の丸の上まで。両端の空きは 0.375rem ＋ 点の上下の余白 2px ≒ 8px */
  .steps__item:not(:last-child)::before {
    left: calc(var(--steps-num-size) / 2 - 2px);
    top: calc(var(--steps-num-top) + var(--steps-num-size) + 0.375rem);
    bottom: calc(0.375rem - var(--gap-5) - var(--steps-num-top));
    width: 4px;
    background-size: 4px 8px;
    background-repeat: no-repeat round;
  }
}

/* --- マップで探す（map.php の見せ場。index.php のコメント参照）。PC（1024px〜）では節ごと出さない --- */
@media (min-width: 1024px) {
  .section.mapshow {
    display: none; /* .section の display: grid（1024px〜。下にある）に勝つように 2 クラスで */
  }
}

.mapshow__body {
  margin-top: var(--space-block);
  display: grid;
  gap: var(--gap-5);
}

/* 絵。カードと同じく影は付けず、薄い線と大きな角丸だけ（影は効く所だけ、の約束）。絵自体が押せる */
.mapshow__pic {
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--cream-50);
}

.mapshow__pic img {
  display: block;
  width: 100%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .mapshow__pic:hover {
    border-color: var(--line-strong);
  }
}

/* 絵の下の方に重ねる「MAPを開く」（index.php の注）。文の下にあった同じボタンはこれと重なるので消した */
.mapshow__open {
  position: absolute;
  left: 50%;
  bottom: var(--gap-4);
  translate: -50% 0;
  white-space: nowrap;
}

/* 640px〜: 絵を左、文を右に。絵は端末の画面の切り抜きなので幅は抑える（大きいと粗が見える） */
@media (min-width: 640px) {
  .mapshow__body {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--gap-6);
  }
}

/* --- ガラポン。ヒーローと同じ地の帯を画面いっぱいに --- */
.garapon {
  margin-top: var(--space-group);
  background: var(--cream-50);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}

.garapon__inner {
  margin: 0 auto;
  display: flex;
  max-width: 44rem;
  flex-direction: column;
  align-items: center;
  gap: var(--space-block);
  padding: calc(var(--space-block) * 2) var(--gap-5);
  text-align: center; /* 絵が上に来るので、スマホは中央揃え */
}

.garapon__pic {
  align-self: center;
  width: min(72%, 16rem); /* 「ちょっと小さい」と言われて 60%・13rem から上げた（2026-10-30。下の 2 か所も） */
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 12px rgba(201, 96, 26, 0.2));
}

.garapon__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.garapon__actions {
  margin-top: var(--space-block);
}

/* 見出しは節の見出し（.title）より大きく。この節の主役は字そのもの */
.garapon__title {
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

/* 句の途中で折り返さない（「3店に投票／すると、」にならないように） */
.garapon__line {
  display: block;
  white-space: nowrap;
}

.garapon__title strong {
  font-size: 1.35em;
  line-height: 1;
  color: var(--orange-deep);
}

/* 数字は字面が漢字・かなより低く、同じ大きさだと小さく見える（「3」「1」が明らかに小さい、との指摘）。
   周りの字と同じ高さに見えるよう大きくする。.num が strong の中にあるときは strong の大きさに対して */
.garapon__title .num {
  font-size: 1.3em;
  line-height: 1;
  /* 数字はベースラインの上に乗り、漢字・かなは下へ少し出るので、大きくした数字は上に浮いて見える。
     少し下げて、左右にも少し空ける（2026-10-24「3 と 1 が上寄りで左右の余白が無い」）。
     -0.06em だと今度は「店」「回」の下端より 1.4px 下に出たので、測って -0.04em に（2026-10-27） */
  vertical-align: -0.04em;
  margin: 0 0.06em;
}

.garapon__title strong.num {
  font-size: 1.75em;
}

/* 文は左揃え、文の箱は中央に（両端揃えはやめた。下の「本文は左揃え」の注。2026-10-28） */
.garapon__text {
  width: 100%;
  max-width: 30rem;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink);
  text-align: start;
}

.garapon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2) var(--gap-3);
}

@media (max-width: 639px) {
  .garapon__actions {
    justify-content: center;
  }
}

@media (min-width: 640px) {
  .garapon__inner {
    flex-direction: row;
    justify-content: flex-start; /* 他の節と左端を揃える */
    gap: var(--gap-8);
    padding: calc(var(--space-block) * 2.5) var(--gap-5);
    text-align: left;
  }
  .garapon__body {
    align-items: flex-start;
  }
  /* 絵の横に見出しが入るように、絵を小さく（1024px〜 は 19rem。見出しの大きさは下の「PC: ガラポンの節の字」） */
  .garapon__pic {
    width: 13rem;
  }
}

/* --- 賞。橙の枠の板（このページで唯一の箱） --- */

/* 見出し「総合優勝と3つの部門賞●●●」は、360〜439px でも折らずに 1 行にする（2026-10-27 の指示）。
   以前は点の間と字との間を詰めて収めていたが、ほかの見出しの点と比べて詰まって見えた（2026-10-31）。
   点の並びは theme.css と同じにして、幅は次の 3 つで作る。
   - 字間を 0 に（0.04em × 11 字）
   - 点の箱の右の何も描いていない所（1.68em〜1.9em）を削る
   - それでも入らない幅だけ、字を小さくする（見出しの左右の余白 約 4rem＋ゆとり。1 行の幅は字の大きさの約 12.7 倍）
   359px 以下は 2 行（点は最後の句と一緒に下りる。theme.css の .title__text） */
@media (min-width: 360px) and (max-width: 439px) {
  .awards .title {
    letter-spacing: 0;
    font-size: min(calc(var(--text-xl) * 1.15), calc((100vw - 4.2rem) / 12.7));
  }
  .awards .title__text {
    white-space: nowrap;
  }
  .awards .title__text > .nobr:last-child::after {
    width: 1.7em;
  }
}

.board {
  margin-top: var(--space-block);
  display: grid;
  gap: var(--gap-6);
  border-radius: var(--radius-xl);
  border: 3px solid var(--orange);
  background: var(--cream-50);
  padding: var(--gap-6) var(--gap-5);
  box-shadow: 0 12px 28px rgba(201, 96, 26, 0.14), 0 2px 6px rgba(201, 96, 26, 0.1);
}

.board__overall {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.board__trophy {
  width: 11rem;
  height: auto;
}

.board__overall-title {
  margin-top: var(--gap-4);
  /* 節の見出し（.title）より一回り大きく（xl の 1.3 倍）。枠の中でトロフィー（11rem）と組になる唯一の字で、同じ大きさだと絵に負けて
     小さく見えた（2026-10-27。説明を消したあと）。枠で囲まれているので、節の見出しと並んで階層が逆転して見えることはない */
  font-size: calc(var(--text-xl) * 1.3);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
}

.board__desc {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink);
}

.board__subs {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  border-top: 2px solid var(--line);
  padding-top: var(--gap-5);
}

.board__sub {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
}

.board__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  object-fit: contain;
}

.board__sub-title {
  font-size: var(--text-base);
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
}

/* 賞品の見出し（賞品が決まってから出る）と、決まるまでの 1 文 */
.prizes__title {
  font-size: var(--text-lg);
  font-weight: 900;
  color: var(--ink);
}

.awards__prizes-note {
  margin-top: var(--space-block);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* PC では 14px だと小さく見えた（2026-10-27 のチェック）。本文と同じ 16px に */
@media (min-width: 1024px) {
  .awards__prizes-note {
    font-size: var(--text-base);
  }
}

@media (min-width: 640px) {
  .board {
    grid-template-columns: 12rem 1fr; /* トロフィーの列は絵の幅だけ。本文の列を広く取って「す。」の 1 字落ちを防ぐ */
    align-items: center;
    gap: var(--gap-6);
    padding: var(--gap-8) var(--gap-6);
  }
  .board__trophy {
    width: 12rem;
  }
  .board__subs {
    border-top: 0;
    border-left: 2px solid var(--line);
    padding-top: 0;
    padding-left: var(--gap-6);
  }
}

/* 賞品（決まってから出る） */
.prizes {
  margin-top: var(--space-block);
}

.prizes__list {
  margin-top: var(--gap-4);
  display: grid;
  gap: var(--gap-3);
}

.prizes__item dt {
  font-weight: 700;
  color: var(--ink);
}

.prizes__item dd {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .prizes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 結果発表。主役は FINALE の場 --- */
/* 飾り字。見出しより大きくしない（見出しが副題に見える） */
.result__stage {
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange);
  margin-bottom: var(--space-line);
}

.result__actions {
  margin-top: var(--space-block);
}

/* 〜639px: 文の下で画面の中央に（ガラポンの節のボタンと同じ） */
@media (max-width: 639px) {
  .result__actions {
    text-align: center;
  }
}

/* --- 動画で見る（index.php のコメント参照）。箱は 16:9 で先に決める（iframe に差し替えても高さが変わらない） --- */
.video__frame {
  margin-top: var(--space-block);
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius-xl);
  /* YouTube のプレーヤーと同じ黒。茶（--ink）だと、押してから読み込むまでの一瞬に茶色が見えた（2026-10-30） */
  background: #000;
  /* 選択に含まれると動画全体が青く塗られるだけなので、選択の対象から外す（2026-10-30） */
  user-select: none;
}

.video__frame iframe,
.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 押す前の見た目は YouTube の埋め込みに合わせる（index.php のコメント参照）。押すと本物に差し替わるので、
   色・形は YouTube のまま（このページの橙に寄せない） */
.video__play {
  display: block;
  padding: 0;
  background: #000;
  cursor: pointer;
}

/* hqdefault は 4:3 で上下に黒帯が入っているので、16:9 の箱に cover で切り落とす */
.video__play img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上の暗い帯とタイトル（YouTube の埋め込みと同じ並び） */
.video__title {
  position: absolute;
  inset: 0 0 auto;
  padding: 0.9rem 1.1rem 2.5rem;
  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  font-family: Roboto, Arial, sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.video__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  translate: -50% -50%;
}

/* いまの YouTube の埋め込みは、はじめから赤（2026-10-25 に本物の埋め込みで確かめた） */
.video__icon-bg {
  fill: #f00;
}

.video__play:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

/* --- 注意事項。目立たせない（結果発表と同じ見出しの扱いにしない） --- */
.notes {
  padding-top: calc(var(--space-block) * 2);
}

.notes__title {
  font-size: var(--text-base); /* 14px は小さすぎた（2026-10-27 のチェック） */
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.notes__list {
  margin-top: var(--space-line);
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  border-top: 2px solid var(--line);
  padding-top: var(--space-line);
}

.notes__item {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--text-sm); /* 12px は小さすぎた（2026-10-27 のチェック） */
  line-height: 1.7;
  color: var(--ink-soft);
}

.notes__item::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.85em;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--ink-faint);
}




/* ============================================================
   本文は左揃え（2026-10-28）。揃え方は 1 つにそろえる（2026-10-24 の指示「揃え方が毎回違うと厄介」）。
   2026-10-24〜27 は両端揃え（justify）だったが、行末の半端な幅をその行の字の間に割り振るので、
   画面の幅しだいで行ごとに字の間隔が変わり、最後の行だけ詰まって見えた（「部門賞」の前後。2026-10-27 のチェック）。
   日本語はほぼ全角で、左揃えでも右端のずれは 1 字に満たない。
   折り返しも手を加えず、行の端に来たら折る（文節で折る phrases() と、本文の text-wrap: balance / pretty は
   2026-10-28 にやめた。意味の切れ目で行が変わると、かえって不自然に見えた）。
   例外は結果発表の文だけで、文節で折る（index.php。同日の指示「ここだけは元のまま」）
   ============================================================ */
.lede,
.steps__text,
.board__desc,
.awards__prizes-note,
.notes__item {
  text-align: start;
}

/* 行末の約物の右半分の空きを詰める（中央揃えの行が「、」「。」の分だけ左に寄って見えるのを防ぐ）。
   PC は 1 句 1 行の左揃えなので詰めない */
.hang {
  margin-right: -0.5em;
}

@media (min-width: 900px) {
  .hang {
    margin-right: 0;
  }
}

/* ============================================================
   PC（1024px〜）の組み方（2026-10-24「PC 版は全体的にまだ全然」）
   ------------------------------------------------------------
   - どの節も同じ枠（--container 72rem）に入れて、ヘッダー・ファーストビュー・フッターと左端をそろえる
   - 節は見出しを上、中身をその下（2026-10-25。「左に見出し・右に中身」の 2 列はやめた。下の .section の注）
   - ガラポンの帯も同じ枠に乗せる（絵が左、文が右）
   ============================================================ */
@media (min-width: 1024px) {
  .hero__inner {
    max-width: var(--container);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    justify-content: space-between;
  }

  /* 一言の下の文は小さすぎてくっついて見えた。一段大きくして間を空ける */
  .hero__sub {
    margin-top: var(--gap-3);
    font-size: var(--text-lg);
  }

  /* 節は見出しを上に置き、中身をその下に流す（2026-10-25。それまでは「左に見出し 17rem、右に中身」の 2 列だったが、
     節ごとの中身が短いので左の列は見出しの 2〜3 語だけで下が空き、右も数行で終わって両方が薄く見えた）。
     幅はヘッダー・ファーストビュー・フッターと同じ枠（--container）。本文の 1 行の長さは .lede の 44rem で止める */
  /* 本文の列はヒーローやヘッダー（--container 72rem）より狭い 60rem を中央に（2026-10-25「左右に幅を取りすぎ」）。
     ヒーローだけが画面いっぱいで、下の節は読みやすい幅の 1 本の列に揃う */
  .section {
    max-width: 60rem;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  /* 結果発表: 「FINALE 2026」の飾り字を見出しの上に */
  .result__stage {
    font-size: var(--text-2xl);
    line-height: 1.15;
  }

  /* 結果発表の 1 文（約 47 字・752px）は 1 行に収める。本文の幅 44rem で折ると「ます。」だけが 2 行目に落ちた。
     列（60rem）には収まるので、この文だけ幅の上限を外す（2026-10-25）。
     賞の 1 文（約 43 字・781px）も同じで、「部門賞を贈ります。」だけが 2 行目に落ちていた（2026-10-27 のチェック） */
  .awards .lede,
  .result .lede {
    max-width: none;
  }

  /* 投票までの流れ: 3 つ横に（640px〜の指定のまま）。本文は小さくしない */
  .steps__text {
    font-size: var(--text-base);
  }

  /* 賞の板: 列（60rem）いっぱい。中の説明は本文の大きさ */
  .board__desc {
    font-size: var(--text-base);
  }

  /* 注意事項: 本文（18px）より一段小さく。14px は小さすぎた（2026-10-27 のチェック） */
  .notes__title {
    font-size: var(--text-lg);
  }
  .notes__item {
    font-size: var(--text-base);
  }

  /* 動画: 列いっぱい（896px）だと 1280×720 の画面の 7 割を占めて大きすぎた（2026-10-27 のチェック）。
     本文の 1 行の長さ（.lede の 44rem）より短い 40rem（640×360）に。列の中央に置く（2026-10-27） */
  .video__frame {
    max-width: 40rem;
    margin-inline: auto;
  }

  /* ガラポンの帯: 絵を左（19rem）、大きな字と文を右に。枠は節と同じ */
  .garapon__inner {
    display: flex;
    align-items: center;
    gap: var(--gap-10);
    max-width: 60rem; /* 節と同じ列 */
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }

  .garapon__pic {
    width: 19rem;
    flex-shrink: 0;
  }

  .garapon__text {
    max-width: 44rem; /* .lede と同じ（theme.css の注） */
  }
}

/* ============================================================
   トップだけ: ヘッダーをファーストビューに溶け込ませる（2026-10-24）
   ------------------------------------------------------------
   ファーストビューの上ではヘッダーの背景を透明にする。右のナビは残す（投票状況へはここからしか行けない）。
   js/home.js が、ロゴがヘッダーに掛かったら .is-solid（帯）を付ける。帯を先に出すのは、ヒーローの下端の
   ボタンが透明なナビと重ならないようにするため。
   左のロゴは隠さない（2026-10-24 夜までは「王冠＋模擬店コンテスト」で、すぐ下の大きなロゴと重複するので
   ヒーローを過ぎるまで隠していた。いまは一橋祭のロゴなので重複しない）。
   グラデーションを画面の一番上まで続けるため、ヘッダーは fixed にしてヒーローの上に重ね、
   ヒーローの上の余白にヘッダーの高さ（--header-h）を足す。
   ============================================================ */
.page-home {
  --header-h: 60px; /* css/base.css の .site-header__inner と同じ（サイト本体と同じ高さ） */
}

.page-home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.25s, -webkit-backdrop-filter 0.25s, backdrop-filter 0.25s;
}

.page-home .site-header.is-solid {
  background: color-mix(in srgb, var(--cream-100) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.page-home .hero__inner {
  padding-top: calc(var(--header-h) + var(--gap-6));
}

@media (min-width: 1024px) {
  .page-home {
    --header-h: 65px;
  }
}

@media (min-width: 900px) {
  .page-home .hero__inner {
    padding-top: calc(var(--header-h) + var(--gap-12));
  }
}

/* ============================================================
   ファーストビューの背景: デザイナーの「中間発表」の画像の背景の層（2026-10-24）
   ------------------------------------------------------------
   地はポスターの地の色そのまま（グラデーションはやめた）。帯・点・星・お皿の輪は
   img/pop/fv-bg-pc.svg（X 用 16:9）/ fv-bg-sp.svg（インスタ用 9:16）を、デザイナーの配置のまま敷く。
   Claude が足した物（ロゴの後ろの輪と光・流れ星）は置かない。
   PC は中間発表と同じく、ロゴを右上、字を左に置く。
   動き: 奥の帯（クリーム）が左から、黄・杏の帯が右から滑り込み、星と輪が出る。ロゴの組み上がりと同時に終わる
   ============================================================ */
.hero {
  background: var(--cream-200) !important;
}

.hero__logo::before {
  content: none;
}

.hero__shoot {
  display: none;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg svg {
  width: 100%;
  height: 100%;
}

.hero__bg--pc {
  display: none;
}

@media (min-width: 900px) {
  .hero__bg--pc {
    display: block;
  }
  .hero__bg--sp {
    display: none;
  }
  /* ロゴを右、字を左（中間発表の配置） */
  .hero__inner {
    flex-direction: row-reverse;
  }
}

.fvb-back,
.fvb-mid,
.fvb-front {
  transform-box: view-box;
}

.fvb-back {
  animation: fvb-slide-l 0.9s var(--ease-out) both;
}

.fvb-mid {
  animation: fvb-slide-r 0.9s var(--ease-out) 0.08s both;
}

.fvb-front {
  transform-origin: center;
  animation: fvb-pop 0.6s var(--ease-pop) 0.4s both;
}

@keyframes fvb-slide-l {
  from { opacity: 0; translate: -8% 4%; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fvb-slide-r {
  from { opacity: 0; translate: 8% -4%; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fvb-pop {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ロゴの周りの月桂冠（2026-10-24「あれが一番良かった」）。お皿の中心に合わせ、ロゴより一回り大きく後ろに。
   飾りの 1 つとして、スプーン・フォークのあと、王冠の前に広がるように出る（「ロゴの組み上がり」の順） */
.hero__logo .laurel {
  position: absolute;
  z-index: 0;
  left: calc(50% + var(--plate-offset));
  top: 46%;
  width: 138%;
  max-width: none;
  height: auto;
  translate: -50% -50%;
  opacity: 0.9;
  filter: drop-shadow(0 4px 6px rgba(176, 92, 20, 0.18));
  animation: laurel-in 0.7s var(--ease-out) 0.7s both;
}

@keyframes laurel-in {
  from { opacity: 0; scale: 0.7; }
  to { opacity: 0.9; scale: 1; }
}

/* スマホは月桂冠を小さく（138% だと画面の端で切れ、一言にもかかった） */
@media (max-width: 899px) {
  .hero__logo .laurel {
    width: 118%;
    top: 44%;
  }
}

/* 月桂冠の周りは背景の帯・星を消す（重なってごちゃごちゃした。2026-10-24）。
   ロゴの位置を中心に丸く抜き、外へ行くほど背景が見える。ロゴは PC で右、スマホで上 */
.hero__bg {
  -webkit-mask-image: radial-gradient(circle at var(--bg-hole-x) var(--bg-hole-y), transparent 0, transparent var(--bg-hole-r), #000 calc(var(--bg-hole-r) * 1.45));
          mask-image: radial-gradient(circle at var(--bg-hole-x) var(--bg-hole-y), transparent 0, transparent var(--bg-hole-r), #000 calc(var(--bg-hole-r) * 1.45));
  --bg-hole-x: 50%;
  --bg-hole-y: 30%;
  --bg-hole-r: 13rem;
}

@media (min-width: 900px) {
  .hero__bg {
    --bg-hole-x: 72%;
    --bg-hole-y: 55%;
    --bg-hole-r: 19rem;
  }
}

/* ============================================================
   ロゴと月桂冠を大きく、画面の端からはみ出させる（2026-10-24「ポンと置いている感じを消す」）
   ============================================================ */
.hero__logo {
  --logo-size: min(92vw, 22rem);
}

.hero__logo .laurel {
  width: 136%;
}

@media (max-width: 899px) {
  .hero__logo .laurel {
    width: 136%;
    top: 46%;
  }
}

@media (min-width: 900px) {
  .hero__logo {
    --logo-size: min(46vw, 40rem);
    --logo-x: 16%;
    --logo-y: 4%;
  }
  .hero__logo .laurel {
    width: 140%;
  }
  .hero__bg {
    --bg-hole-x: 78%;
    --bg-hole-r: 24rem;
  }
}

/* ============================================================
   ファーストビューのボタンを強く（2026-10-24「見た目が弱すぎる」）
   ポスターの字と同じ「橙の面にクリームの縁、その外にもう一重の橙」の二重の縁取りで、
   ポスターと同じ企画の部品に見せる。主は大きく、副は橙の枠と橙の字で、主の半分の強さ
   ============================================================ */
.hero__actions .btn {
  font-weight: 900;
  letter-spacing: 0.04em;
}

.hero__actions .btn--primary {
  min-height: 4rem;
  padding: 0 2.25rem;
  font-size: 1.25rem;
  border: 3px solid var(--cream-50);
  box-shadow:
    0 0 0 3px var(--orange-deep),
    0 5px 10px rgba(201, 96, 26, 0.3), /* ぼかしを 22px から狭めた。広いと周りが焼けて見えた（2026-10-27） */
    0 2px 4px rgba(201, 96, 26, 0.3);
}

.hero__actions .btn--primary:active {
  box-shadow: 0 0 0 3px var(--orange-deep), 0 3px 8px rgba(201, 96, 26, 0.3);
}

.hero__actions .btn--ghost {
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 3px solid var(--orange-deep);
  background: var(--cream-50);
  color: var(--orange-deep);
  box-shadow: 0 6px 14px rgba(201, 96, 26, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .hero__actions .btn--ghost:hover {
    background: #fff;
    border-color: #b85712;
    color: #b85712;
  }
}

@media (min-width: 900px) {
  .hero__actions {
    gap: var(--gap-4);
  }
}

/* ============================================================
   ロゴの後ろの光（2026-10-24）: 白いぼかしと、ぼかした白い斜めの帯 1 本。
   どちらも光の役目（ロゴを背景から浮かせる）。帯は背景の帯と同じ向き（右上がり約 30°）
   ============================================================ */
.hero__logo::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(50% + var(--plate-offset));
  top: 48%;
  width: 120%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 243, 0.95) 0%, rgba(255, 253, 243, 0.6) 38%, rgba(255, 253, 243, 0) 70%);
  filter: blur(6px);
  animation: ring-in 0.9s var(--ease-out) both;
}

.hero__deco::after {
  content: "";
  position: absolute;
  left: var(--bg-hole-x, 50%);
  top: var(--bg-hole-y, 30%);
  width: 150%;
  height: 7rem;
  translate: -50% -50%;
  rotate: -30deg;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 253, 243, 0) 0%, rgba(255, 253, 243, 0.75) 35%, rgba(255, 253, 243, 0.75) 65%, rgba(255, 253, 243, 0) 100%);
  filter: blur(14px);
  pointer-events: none;
  animation: fvb-pop 0.8s var(--ease-out) 0.2s both;
}

/* --bg-hole-* は .hero__bg に定義してあるので、帯の位置用に .hero__deco にも同じ値を置く */
.hero__deco {
  --bg-hole-x: 50%;
  --bg-hole-y: 30%;
}

@media (min-width: 900px) {
  .hero__deco {
    --bg-hole-x: 78%;
    --bg-hole-y: 55%;
  }
  .hero__deco::after {
    height: 10rem;
  }
}

/* 光を見える強さに（最初の値は月桂冠に隠れてほとんど見えなかった） */
.hero__logo {
  isolation: isolate;
}

.hero__logo::before {
  z-index: -1;
  width: 150%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 253, 243, 0.8) 30%, rgba(255, 253, 243, 0.35) 52%, rgba(255, 253, 243, 0) 70%);
  filter: blur(4px);
}

.hero__deco::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0) 100%);
  filter: blur(10px);
}

/* 帯はロゴの周りだけに（長いと字の後ろまで届いて薄く見えるだけだった）。ロゴの両脇からのぞく長さで、端だけぼかす */
.hero__deco::after {
  width: 115%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 18%, rgba(255, 255, 255, 0.8) 82%, rgba(255, 255, 255, 0) 100%);
}

@media (min-width: 900px) {
  .hero__deco::after {
    width: 70%;
  }
}

/* 白い帯は月桂冠の手前・ロゴの奥に通す（背景の層に置くと月桂冠に隠れて見えなかった）。
   月桂冠の葉の上を光が横切るように見える */
.hero__deco::after {
  content: none;
}

.hero__logo::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(50% + var(--plate-offset));
  top: 48%;
  width: 175%;
  height: 26%;
  translate: -50% -50%;
  rotate: -30deg;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 22%, rgba(255, 255, 255, 0.7) 78%, rgba(255, 255, 255, 0) 100%);
  filter: blur(10px);
  pointer-events: none;
  animation: fvb-pop 0.8s var(--ease-out) 0.2s both;
}


/* ============================================================
   PC の直し（2026-10-24 夜。本番を来場者の目で見て）
   ------------------------------------------------------------
   1. 一言の左端が切れる: ロゴを 40rem にして右へ寄せたぶん、字の列が左に押し出されていた（1036px 幅で左端 -8px）。
      字の列は縮めず、ロゴの側を幅に応じて縮める
   2. 最初の画面にボタンが入らない: ファーストビューの高さを画面の高さに合わせる。
      右下の浮きボタンは、ファーストビューが見えている間は PC でも隠す（ロゴの上に重なって見えた。js/ui/vote-float.js）
   3. 透明なヘッダーのナビが背景の星に重なる: 背景の上端（ヘッダーの帯）は抜く
   ============================================================ */
@media (min-width: 900px) {
  .hero__inner {
    justify-content: space-between;
    gap: var(--gap-8);
    padding-top: calc(var(--header-h) + var(--gap-6));
    padding-bottom: var(--gap-8);
    min-height: min(100vh, 52rem);
  }
  .hero__copy {
    flex: 0 0 auto;
    width: min(30rem, 42vw);
    max-width: none;
  }
  .hero__logo {
    /* 画面の残り幅に収める。1036px: 約 26rem、1280px: 約 33rem、1440px〜: 40rem */
    --logo-size: clamp(22rem, 58vw - 14rem, 40rem);
    --logo-x: 12%;
    flex: 0 1 auto;
  }
  .hero__lead {
    font-size: clamp(2.5rem, 1rem + 4.2vw, 5rem);
  }
  /* 背景の上端（ヘッダーのナビの後ろ）は抜く。丸い抜きと重ねる */
  .hero__bg {
    -webkit-mask-image:
      radial-gradient(circle at var(--bg-hole-x) var(--bg-hole-y), transparent 0, transparent var(--bg-hole-r), #000 calc(var(--bg-hole-r) * 1.45)),
      linear-gradient(to bottom, transparent 0, transparent var(--header-h), #000 calc(var(--header-h) + 3rem));
    -webkit-mask-composite: source-in;
            mask-image:
      radial-gradient(circle at var(--bg-hole-x) var(--bg-hole-y), transparent 0, transparent var(--bg-hole-r), #000 calc(var(--bg-hole-r) * 1.45)),
      linear-gradient(to bottom, transparent 0, transparent var(--header-h), #000 calc(var(--header-h) + 3rem));
            mask-composite: intersect;
  }
}

/* ============================================================
   スマホのファーストビュー（2026-10-24 夜。ユーザーと詰めた最終形）
   ------------------------------------------------------------
   - 背景の絵（帯・点・星）は、字の少し上から下へページの地の色に溶かす。面の縁は作らない
     （クリームの箱・下から敷く面は「別の紙を貼ったよう」で却下）
   - ロゴは 19rem、周りに月桂冠。その奥にトロフィーの形をうっすら（--trophy-opacity）。
     トロフィーは主役ではなく背景の形としてだけ。器の中心がロゴの中心あたり、脚と台座がロゴの下にのぞく
   - 字とボタンは溶けた地の上に乗る。ファーストビューの下端は次の節へそのままつながる
   PC（900px〜）はこの節の指定を受けない（横並びの組みのまま。トロフィーも出さない）
   ============================================================ */
@media (max-width: 899px) {
  .hero {
    background: linear-gradient(180deg, var(--cream-200) 0%, var(--cream-200) 55%, var(--cream-100) 80%);
  }

  .hero__bg {
    -webkit-mask-image: none;
            mask-image: none;
    /* 背景の月桂冠と星を少し薄める。ロゴの月桂冠と奥のトロフィーが背景に食われていた（2026-10-24 夜） */
    opacity: 0.72;
  }

  /* 下へ溶かす層。背景の絵（.hero__bg）の上、ロゴと字の下 */
  .hero__deco::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--cream-100) 85%, transparent) 68%, var(--cream-100) 80%);
  }

  .hero__logo {
    --logo-size: min(78vw, 19rem);
    /* 上を空けて、トロフィーの蓋と頂きの星がロゴの王冠の上にのぞくように */
    --logo-space: 2.75rem 0 0.5rem;
    /* 奥のトロフィー。器の上部（頂きの星・蓋・縁・巻いた持ち手）がロゴのお皿の上と両脇に見え、脚と台座は字の下へ溶ける。
       濃さ 0.95・ぼかし 1px・色は地より一段濃い金（trophy-bg.svg の fill）。0.45・6px・地に近い色では
       「マジで見えない」ので、お皿の上にトロフィーの上が出る程度まで濃くした（2026-10-24 夜の指示） */
    --trophy-opacity: 0.95;
    --trophy-blur: 1px;
    overflow: visible;
    isolation: isolate;
  }

  /* ロゴの後ろの白い光は、トロフィーの器を白く飛ばすので少し弱める（PC はそのまま） */
  .hero__logo::before {
    opacity: 0.7;
  }

  .hero__trophy {
    position: absolute;
    z-index: -1;
    left: calc(50% + var(--plate-offset));
    /* 幅はロゴの 1.4 倍（2 倍では器が画面いっぱいになって形が読めなかった）。
       top はロゴの高さに対する割合。星がヘッダーの下・王冠の上に来る値 */
    top: -28%;
    width: 140%;
    max-width: none;
    height: auto;
    translate: -50% 0;
    opacity: var(--trophy-opacity);
    filter: blur(var(--trophy-blur));
    /* 脚と台座は字の手前で消す（溶かす層はロゴより下にあるので、トロフィー自身を下へ透かす） */
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 80%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 80%);
    animation: trophy-in 0.9s var(--ease-out) 0.1s both;
  }

  .hero__copy {
    position: relative;
    z-index: 2;
  }

  .hero__lead {
    font-size: 1.75rem;
  }

  .hero__actions {
    margin-top: 1.25rem;
  }

  .hero__inner {
    padding-bottom: 2rem;
  }
}

@media (min-width: 900px) {
  .hero__trophy {
    display: none;
  }
}

@keyframes trophy-in {
  from { opacity: 0; scale: 0.94; }
  to { opacity: var(--trophy-opacity, 0.7); scale: 1; }
}

/* ============================================================
   2 回目以降はロゴの組み上がりを飛ばす（2026-10-24 夜の指示）
   ------------------------------------------------------------
   一度見た端末では index.php が <html> に hero-seen を付ける（localStorage の contest_hero_seen）。
   最初の一連の動き（ロゴの大枠と飾り、後ろの光、月桂冠、トロフィー、背景の帯、一言・文・ボタン、流れ星）を
   まとめて時間 0 にして完成形で出す。ロゴだけ飛ばすと、字やボタンがあとから出てきて変だった。
   王冠の星がときどき光る crown-glint（2 つ目の animation）はそのまま。
   ロゴを押すと js/home.js が hero-seen を外してもう一度動く。
   ============================================================ */
.hero-seen .hero__logo::before,
.hero-seen .logo-anim,
.hero-seen .logo-anim :is(path, polygon, rect, circle, ellipse),
.hero-seen .hero__logo .laurel,
.hero-seen .hero__trophy,
.hero-seen .hero__word,
.hero-seen .hero__sub,
.hero-seen .hero__actions,
.hero-seen .hero__find,
.hero-seen .hero__medal,
.hero-seen .hero__shoot,
.hero-seen .hero__deco::after,
.hero-seen .fvb-back,
.hero-seen .fvb-mid,
.hero-seen .fvb-front {
  animation-duration: 0s;
  animation-delay: 0s;
}

.hero-seen .logo-anim .p-star {
  /* 出る動きと揃った直後の光りは 0 に、ときどきの光りだけ残す */
  animation-duration: 0s, 15s, 0s;
  animation-delay: 0s, calc(2.5s + var(--g) * 5s), 0s;
}

/* ============================================================
   PC のファーストビュー（1024px〜。想定は 1200〜1500px。2026-10-25 夜に組み直し）
   ------------------------------------------------------------
   PC で見るのは本祭前に「知りに来た」人（README「PC は知るためのページ」）。最初の画面で
   「何のコンテストか」「いつ・何店か」「店をどう眺めるか」が分かるようにする。
   強弱は 3 段: ロゴ（一番大きい・動く）＞ 一言（2 行・約 56〜64px）＞ それ以外（文・日付・検索欄）。

   組み方は 2 列のグリッド。左の列（30〜36rem）に一言・1 文・日付と出店数・検索欄と「MAPで見る」を
   上から積み、右の列の中央にロゴ＋月桂冠。
   ロゴの大きさは**画面の高さ**で決める（月桂冠がロゴの 1.4 倍の高さで、幅より先に高さが足りなくなる。
   上下に「ヘッダー 65px＋1rem」ずつ取った残りに月桂冠（ロゴの 1.4 倍）がほぼ収まる大きさ: 高さ 〜719px は 22rem、
   720px〜 26rem、800px〜 28rem、900px〜 30rem。1366×768 のノート PC（表示領域は 650px ほど）でも切れない）。
   幅 1024〜1199px は左の列 30rem・ロゴ 22rem（月桂冠が右の端で切れないぎりぎり）。
   一言は 4 行（句ごと）から 2 行（「食べて、選んで、／No.1を決めよう。」）に戻して横に広げ、
   縦に長くならないようにした（4 行だと左の列が細長くなり、ロゴと高さが合わなかった）。
   下の行は字を最少にし（日付・出店数だけ）、説明文は置かない。
   上の 900px〜・1024px〜の指定はスマホ〜タブレットの横向きのために残し、ここで上書きする。
   ============================================================ */
@media (min-width: 1024px) {
  .hero {
    /* 左の列の幅・列の間・ロゴの幅。1024〜1199px は月桂冠が右で切れないよう一段狭く（下の 1200px〜で戻す）。
       右の列はロゴより狭くしない（足りないときは左の列が 27rem まで縮む）。月桂冠（ロゴの 1.4 倍）は列からはみ出してよい。
       月桂冠の右端 = 画面の中心 + (左の列 + 間) / 2 + ロゴ × 0.7 が画面の幅に収まるよう、ここの値を決めてある
       （1024px: 502 ≤ 512、1200px: 587 ≤ 592（スクロールバー 16px を引いた半分）、1440px: 626 ≤ 720） */
    --fv-col: 30rem;
    --fv-gap: var(--gap-6);
    --fv-logo: 22rem;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(27rem, var(--fv-col)) minmax(0, 1fr);
    column-gap: var(--fv-gap);
    align-items: center;
    justify-content: stretch;
    min-height: min(100vh, 56rem);
  }

  /* 上下の余白は同じ「ヘッダーの高さ＋1rem」（上の .page-home .hero__inner の --gap-12 より強い指定で上書き）。
     上だけヘッダーぶん空けると、中身が画面の中心より 30px ほど下に寄って「ロゴが下にある」ように見えた
     （2026-10-25 夜の指摘。1283×633 で月桂冠の上の空き 68px・下の空き 28px）。下にも同じだけ取って画面の中心に置く。
     月桂冠がこの余白を超えるときは上下に同じだけはみ出す（ロゴの大きさは画面の高さで決めているので、
     はみ出しても 12px まで。月桂冠の上端はヘッダーのナビに掛からない） */
  .page-home .hero__inner {
    padding-top: calc(var(--header-h) + var(--gap-4));
    padding-bottom: calc(var(--header-h) + var(--gap-4));
  }

  .hero__copy {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: none;
    gap: 0;
  }

  .hero__logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    --logo-size: var(--fv-logo);
    --logo-x: 0%;
    --logo-y: 0px;
  }

  /* 一言は 2 行。1024〜1199px は 3rem（左の列 27rem に「No.1を決めよう。」が収まる）、
     1200px〜は 1280px で約 57px、1440px で約 61px、上限 64px */
  .hero__lead {
    font-size: 3rem;
    line-height: 1.12;
    letter-spacing: 0;
  }

  .hero__word {
    display: inline-block;
  }

  .hero__sub {
    margin-top: var(--gap-5);
    max-width: none;
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  /* 背景: 一言の後ろ（左 4 割）は透かし、ロゴの周りは丸く抜き、上端はヘッダーの帯ぶん抜く。
     抜きの中心は右の列の中心（= 画面の中心 + (左の列 + 列の間) / 2。枠が中央にあるので画面の幅によらない） */
  .hero__bg {
    --bg-hole-x: calc(50% + (var(--fv-col) + var(--fv-gap)) / 2);
    --bg-hole-y: 51%;
    --bg-hole-r: 20rem;
    -webkit-mask-image:
      radial-gradient(circle at var(--bg-hole-x) var(--bg-hole-y), transparent 0, transparent var(--bg-hole-r), #000 calc(var(--bg-hole-r) * 1.45)),
      linear-gradient(to bottom, transparent 0, transparent var(--header-h), #000 calc(var(--header-h) + 3rem)),
      linear-gradient(to right, transparent 0, transparent 40%, #000 54%);
    -webkit-mask-composite: source-in, source-in;
            mask-image:
      radial-gradient(circle at var(--bg-hole-x) var(--bg-hole-y), transparent 0, transparent var(--bg-hole-r), #000 calc(var(--bg-hole-r) * 1.45)),
      linear-gradient(to bottom, transparent 0, transparent var(--header-h), #000 calc(var(--header-h) + 3rem)),
      linear-gradient(to right, transparent 0, transparent 40%, #000 54%);
            mask-composite: intersect;
  }

  /* ボタン 2 つはスマホ用。PC は下の行（.hero__find）に日付・出店数と検索欄・「MAPで見る」 */
  .hero__actions {
    display: none;
  }

  .hero__find {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-4);
    margin-top: var(--gap-8);
  }

  /* 日付と出店数。数字は .num で一回り大きく（README「数字は字面が低い」） */
  /* ファーストビューの字としては小さすぎた（18px）ので 24px に。数字はさらに 1.6 倍（2026-10-25 夜の指摘） */
  .hero__facts {
    display: flex;
    align-items: baseline;
    gap: var(--gap-6);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
  }

  /* 下は字の基準の線（baseline）でそろっているが、数字は線の上に乗り、漢字・かなは線より 0.073em 下まで描かれる。
     大きな数字だけ浮いて見えた（24px で「店」の下端より 1.4px 上。2026-10-27 のチェック）ので、その分下げる。
     日付の括弧が下に出るのは括弧の形なのでそのまま */
  .hero__facts .num {
    position: relative;
    top: 0.036em;
    font-size: 1.6em;
    font-weight: 900;
  }

  /* 「模擬店を探す」と「MAPで見る」。同じ高さ（3.25rem）・同じ太さの枠（2px の深い橙）で対等に（index.php の注） */
  .hero__entry {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: var(--gap-3);
  }

  /* 2 つとも深い橙で塗る（2026-10-25 夜）。枠だけだと日付の行（24px の太字）より弱く、目が日付で止まって
     入口に行かなかった。左の列で唯一の塗りの面にして、「次にすること」がここだと分かるように。
     影は主ボタンと同じ深い橙の柔らかい影（README「影と光彩は効く所だけ」） */
  .hero__find-btn {
    flex-shrink: 0;
    height: 3.5rem;
    /* スマホの主ボタンと同じ二重の縁取り（橙の面にクリームの縁、その外にもう一重の橙。ポスターの字の作法。
       上の「ファーストビューのボタンを強く」の注）。塗るだけだと平らな面で、ポスターの部品に見えなかった（2026-10-25 夜） */
    border: 3px solid var(--cream-50);
    background: var(--orange-deep);
    padding: 0 1.75rem;
    font-size: 1.0625rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--cream-50);
    box-shadow:
      0 0 0 3px var(--orange-deep),
      0 5px 10px rgba(201, 96, 26, 0.3), /* ぼかしを 22px から狭めた。広いと周りが焼けて見えた（2026-10-27） */
      0 2px 4px rgba(201, 96, 26, 0.3);
  }

  .hero__find-btn:active {
    box-shadow: 0 0 0 3px var(--orange-deep), 0 3px 8px rgba(201, 96, 26, 0.3);
  }
}

/* 1200px〜（想定の幅）: 左の列 36rem・間 3rem。ロゴは画面の高さに合わせて大きく（上の注） */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  /* .btn--ghost:hover の縁の色（焦げ茶）が効いて、クリームの縁が黒っぽく変わっていた（意図していない。2026-10-25 夜）。
     縁はクリームのまま、面だけ少し明るい橙に */
  .hero__find-btn:hover {
    border-color: var(--cream-50);
    background: #e07721;
    color: var(--cream-50);
  }
}

@media (min-width: 1200px) {
  .hero {
    --fv-col: 34rem;
    --fv-gap: var(--gap-8);
    --fv-logo: 24rem;
  }
  .hero__lead {
    font-size: clamp(3.25rem, 1.5rem + 2.6vw, 4rem); /* 上限 64px: 1710px でも「No.1を決めよう。」が左の列（35rem）に収まる */
  }
  .hero__sub {
    font-size: var(--text-xl);
  }
}

@media (min-width: 1200px) and (min-height: 720px) {
  .hero {
    --fv-logo: 28rem;
  }
}

@media (min-width: 1280px) {
  .hero {
    --fv-col: 36rem;
  }
}

@media (min-width: 1200px) and (min-height: 800px) {
  .hero {
    --fv-logo: 32rem;
  }
}

@media (min-width: 1300px) and (min-height: 900px) {
  .hero {
    --fv-logo: 34rem;
  }
}

/* ============================================================
   PC のファーストビューにスマホの奥行きを持ち込む（2026-10-25 夜「スマホに比べて物足りない」）
   ------------------------------------------------------------
   スマホが良く見えるのは、ロゴの奥にトロフィーの層があって光と影ができ、背景の帯・星が画面全体に
   同じ密度で敷かれているから。PC はロゴの周りを丸く抜き、左 4 割も透かしていたので、ロゴが
   平らなクリームの上に「ポンと置いてある」だけになっていた。
   - トロフィーをスマホと同じ濃さ・ぼかし・位置で PC にも置く（器の上がロゴの上と両脇にのぞき、脚は下へ溶ける）
   - 背景の丸い抜きをやめ、スマホと同じ 0.72 に薄める。左の字の後ろの透かしと上端（ヘッダー）の抜きは残す
   ============================================================ */
@media (min-width: 1024px) {
  .hero__logo {
    --trophy-opacity: 0.95;
    --trophy-blur: 1px;
    overflow: visible;
    isolation: isolate;
  }

  /* 月桂冠はロゴに寄せる（スマホの 140% → 130%）。高さの上限は月桂冠で決まるので、そのぶんロゴを大きくできる */
  .hero__logo .laurel {
    width: 130%;
  }

  /* 背景のお皿の輪（右下に顔を出す橙の弧）は PC では消す（「邪魔」2026-10-25 夜） */
  .hero__bg--pc .fvb-ring {
    display: none;
  }

  /* トロフィーはスマホと同じくロゴの裏、お皿の中心に合わせる。
     右へずらす案（left +52%・幅 150%）も試したが、器が画面の右端で切れて大きなぼけた面にしか見えなかった
     （2026-10-25 夜。ロゴを大きくした後は右の列に別の物を置く場所が無い） */
  .hero__trophy {
    display: block;
    position: absolute;
    z-index: -1;
    left: calc(50% + var(--plate-offset));
    top: -28%;
    width: 140%;
    max-width: none;
    height: auto;
    translate: -50% 0;
    opacity: var(--trophy-opacity);
    filter: blur(var(--trophy-blur));
    /* 脚と台座は下へ溶かす。スマホ（55%→80%）より少し早く消し、高さ 633px の画面でヒーローの下端に
       脚の切れ目が出ないように（トロフィーの下端はヒーローより下にある） */
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 74%);
            mask-image: linear-gradient(180deg, #000 50%, transparent 74%);
    animation: trophy-in 0.9s var(--ease-out) 0.1s both;
  }

  .hero__bg {
    opacity: 0.72;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, transparent var(--header-h), #000 calc(var(--header-h) + 3rem)),
      linear-gradient(to right, transparent 0, transparent 40%, #000 54%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(to bottom, transparent 0, transparent var(--header-h), #000 calc(var(--header-h) + 3rem)),
      linear-gradient(to right, transparent 0, transparent 40%, #000 54%);
            mask-composite: intersect;
  }
}

/* ============================================================
   PC: 字の奥に No.1 のメダル（2026-10-25 夜「文字のほうに何かを付ける」の試作 B）
   ------------------------------------------------------------
   リボンが画面の上端から垂れ、メダルの円の左端を一言の左端（「N」）に揃え、上下は「No.1」の行の中心に（星は置かない）。
   「1」に中心を合わせる形も試したが「変かもしれない」で左揃えに（2026-10-25 夜）。
   濃さ・ぼかしはロゴの奥のトロフィーと同じ。--medal-x / --medal-y は .hero__copy の左上から「1」の中心までの距離
   （1283px・一言 57px のとき x 128px・y 99px。字の大きさが変わると動くので、変えたら測り直す）。
   円の半径は画像の幅の 37.5%（幅 12rem なら 72px。「1」の高さ 54px を一回り囲む）
   ============================================================ */
.hero__medal {
  display: none;
}

@media (min-width: 1024px) {
  .hero__copy {
    position: relative;
    isolation: isolate;
    --medal-w: 12rem;
    --medal-x: calc(var(--medal-w) * 0.375); /* 円の左端を字の左端（「N」）に揃える。中心は半径ぶん右 */
    --medal-y: 6.2rem;
  }

  .hero__medal {
    display: block;
    position: absolute;
    z-index: -1;
    /* 円の中心は画像の (50%, 83.3%)（画像は幅 400・高さ 960、円の中心は y 800）。左上をそこから引いた位置に置く。
       リボンは画面の上端より上から始まるので、画面の高さが変わっても途中から生えて見えない */
    left: calc(var(--medal-x) - var(--medal-w) * 0.5);
    top: calc(var(--medal-y) - var(--medal-w) * 2.4 * 0.833);
    width: var(--medal-w);
    height: auto;
    opacity: 0.7;
    filter: blur(1px);
    /* リボンは上へ行くほど薄く消す（画面の上端から一定の濃さで垂れると長い柱に見える） */
    -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 60%);
            mask-image: linear-gradient(180deg, transparent 18%, #000 60%);
    pointer-events: none;
  }
}

/* ============================================================
   PC: 右のロゴを組み上げ切ってから、左の字を出す（2 幕。2026-10-25 夜）
   ------------------------------------------------------------
   以前はロゴの飾り（0.4〜1.9s）と一言の 3 拍（0.5〜1.45s）が交互に進み、0.4〜1.9 秒の間に目が左右を
   7 回ほど行き来した（「視線があっちこっちいかない？」）。どちらも弾む動きなので、両方に目を取られる。
   - 1 幕（0〜1.2s）: 右。ロゴの飾りの間隔を詰めて 1.2 秒で揃える。揃った直後の星のきらん（crown-glint-once）は
     PC ではやめた（左を読み終えた所で目を右へ呼び戻すため）。ときどき光る crown-glint は残す
   - 2 幕（1.05s〜）: 左。一言の 3 拍 → 1 文 → 日付・検索欄。右の大きな動き（月桂冠・王冠）は 1.05s で終わり、
     残るのは小さな黄の飾りと星（〜1.2s）だけ。1.3s 始まりは「右から左への移行が遅い」で早めた（2026-10-25 夜）
   左を先にする案もあったが、右を先にした。終わりが左下の検索欄（押してほしい所）に来るのと、
   字を先に出すと「字は出たのに右がまだ」で読み込みが遅く見えた（2026-10-25 夜の指摘）ため。
   スマホは縦に積むので行き来が起きない。スマホの時間割は変えていない。
   ============================================================ */
@media (min-width: 1024px) {
  /* 1 幕: ロゴ。大枠（お皿・字 0〜0.45s）はスマホと同じ */
  .logo-anim .p-spoon { animation-delay: 0.3s; }
  .logo-anim .p-fork { animation-delay: 0.38s; }
  .logo-anim .p-badge { animation-delay: 0.5s; }
  .hero__logo .laurel { animation-delay: 0.45s; animation-duration: 0.6s; }
  .logo-anim .p-crown { animation-delay: 0.55s; }
  .logo-anim .p-deco { animation-delay: calc(0.6s + var(--k) * 12ms); }
  .logo-anim .p-star {
    animation:
      logo-spark 0.4s var(--ease-pop) both,
      crown-glint 15s ease-in-out infinite;
    animation-delay: calc(0.7s + var(--g) * 50ms), calc(2.5s + var(--g) * 5s);
  }

  /* 2 幕: 字。一言は 3 拍で「ぽん・ぽん・ぽん」（2026-10-25 夜の指示）: 食べて、→ 選んで、→ No.1を決めよう。
     4 語を 0.08s ずつずらすと、ほぼ同時に薄く浮かぶだけで拍が無かった。0.25s 間隔で、少し縮んだ状態から弾んで出る */
  .hero__word {
    animation: pop-in 0.45s var(--ease-pop) both;
    animation-delay: var(--word-d, 0s);
  }
  .hero__line:nth-child(1) .hero__word:nth-child(1) { --word-d: 1.05s; }
  .hero__line:nth-child(1) .hero__word:nth-child(2) { --word-d: 1.3s; }
  .hero__line:nth-child(2) .hero__word:nth-child(1),
  .hero__line:nth-child(2) .hero__word:nth-child(2) { --word-d: 1.55s; }
  /* 1 文と日付・検索欄は 3 拍目（1.55〜2.0s）が終わってから、同時に 1 拍で出す。3 拍目と重なると、一言と一緒に
     出たように見えた。1 文と日付・検索欄を 0.15s ずらしても別の拍には見えず、ずれて見えるだけだった（2026-10-25 夜） */
  .hero__sub,
  .hero__find { animation-delay: 2.1s; }

  .hero__medal {
    animation: medal-in 0.8s var(--ease-out) 1.05s both;
  }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  60% { opacity: 1; transform: translateY(0) scale(1.04); }
  to { opacity: 1; transform: none; }
}

@keyframes medal-in {
  from { opacity: 0; translate: 0 -10px; }
  to { opacity: 0.7; translate: 0 0; }
}

/* ============================================================
   Web フォントが揃うまで、字の出る動きを止めておく（lib/view.php の fonts-pending の注）
   ------------------------------------------------------------
   字は animation の both で最初 opacity 0 なので、paused にしておけば代替フォントの字は見えない。
   揃ったら <html> から fonts-pending が外れて、そこから遅延（PC は 0.55s〜）を数えて出る。
   ロゴ（SVG の図形）とトロフィー・背景はフォントに関係ないので止めない。
   ============================================================ */
.fonts-pending .hero__word,
.fonts-pending .hero__sub,
.fonts-pending .hero__actions,
.fonts-pending .hero__find,
.fonts-pending .hero__medal {
  animation-play-state: paused;
}

/* ============================================================
   PC: ガラポンの節の字を他の節に近づける（2026-10-25 夜「ガラポンのところだけ字が大きすぎ」）
   ------------------------------------------------------------
   見出しが 48px（数字は 84px）で、節の見出し（28px）の倍近くあった。32px（強調 40px・数字 48px）に。
   本文はどの節も 16px で小さめだったので、PC では 18px に（.lede・ガラポンの文・手順の文）
   見出しの大きさは 640px〜 から（2026-10-27）。640〜1023px は 38〜47px のままで、折らない見出しが絵の横に入らず
   画面からはみ出して横スクロールが出ていた（640px で 83px）
   ============================================================ */
@media (min-width: 640px) {
  .garapon__title {
    font-size: 2rem;
  }
  .garapon__title strong {
    font-size: 1.25em;
  }
  .garapon__title strong.num {
    font-size: 1.5em;
  }
}

@media (min-width: 1024px) {
  .lede,
  .garapon__text,
  .steps__text {
    font-size: var(--text-lg);
  }
}