/* トップ（index.html）だけの見た目。
   形は、2026-09-27 に決まった折衷案（試作 prototypes/2026-09-27_最初の画面の4案/setchu_page.html）。
   最初の画面は角丸48の黄の面に墨の帯と4人（D28・D30）。その下は生成りの章と幅いっぱいの黄の章を丘の曲線で区切る。
   試作は画面の幅1440pxでの位置を px で書いていたので、本番は黄の面の大きさに対する割合に置き換えた
   （PC の面 1392×772、スマホの絵の場所 351×400 を元にした割合）。値は tokens の変数だけ（DESIGN.md §3） */

/* 短い説明の文は、語の途中で折り返さない（02_visual ⑤） */
main p { word-break: auto-phrase; }

/* ---------- 1. 最初の画面 ---------- */
.top-fv { padding: var(--space-16) var(--space-24) var(--space-24); }
/* 面の高さは、読み込んだ画面の高さからヘッダーと上下の余白を引いたもの。
   低すぎると文字と人物が重なるので 680px、大きな画面で間延びしないよう 960px で止める */
.panel {
  position: relative; overflow: hidden;
  height: clamp(680px, calc(100svh - 88px - var(--space-16) - var(--space-24)), 960px);
  background: var(--color-bg-plane); border-radius: var(--radius-panel);
}
.stage { position: absolute; inset: 0; }

/* 墨の帯。面の形に合わせて伸ばすので、線の太さは伸ばさない（PC24px・スマホ16px） */
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.ribbon path { fill: none; stroke: var(--color-border-line); stroke-width: 24px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ribbon.sp { display: none; }

/* 最初の画面には写真を置かない（2026-10-11 Ayane「topに写真なしバージョンで」）。
   下の章の仮の AI の写真に添える「写真はイメージです」（02_visual ⑨） */
figcaption, .card .ph .cap {
  position: absolute; right: 0; bottom: 0; padding: var(--space-4) var(--space-12);
  background: var(--color-bg-base); font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-secondary);
}

/* 4人。手持ちの絵の切り抜きをそのまま使う（D30）。真ん中の言葉を、四隅から時計回り（備える→食べる→買い足す→贈る）に囲む。
   人物の上に文字を載せず、何をしている人かは言葉の側（面の内側）の余白に添える */
.stage .who { position: absolute; z-index: 3; }
.w-sonaeru { left: 8%; top: 5%; height: 38%; }
.w-taberu { right: 8%; top: 5%; height: 36%; }
.w-kaitasu { right: 9%; top: 50%; height: 46%; }
.w-okuru { left: 9%; top: 55%; height: 40%; }
.stage .who .cap {
  position: absolute; left: 100%; top: 34%; margin-left: var(--space-8);
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-12);
  background: var(--color-bg-base); border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-pill);
  font-size: var(--font-size-small); font-weight: var(--font-weight-bold); line-height: 1; white-space: nowrap;
}
.stage .w-taberu .cap, .stage .w-kaitasu .cap { left: auto; right: 100%; margin: 0 var(--space-8) 0 0; }
.stage .w-kaitasu .cap { top: 40%; } /* 買い足す人は背が高いので、札を少し上げて言葉の高さからずらす */

/* 4人の揺れ（02_visual ⑪）：左右に傾けた形を切り替えるだけのカタカタを、角度・速さ・回数・休みを人ごと・回ごとに
   変えて動かす（2026-10-07 Ayane「同じ動きにならないよう、ランダムに」）。動きそのものは top.js が付ける。
   足もとを軸にして傾ける */
.stage .who img { transform-origin: 50% 100%; }

/* h1・タグライン・主ボタン（黄の面の上なので墨の地）。黄の面の真ん中に置き、帯がそのまわりを1周する */
.copy { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.lead { margin-bottom: var(--space-12); font-weight: var(--font-weight-medium); }
/* タグラインは h1 の例外で大きくする（tokens の font-size-tagline。2026-10-07 Ayane「ウェブサイトで見たときに小さく見える」） */
.tagline { margin-bottom: var(--space-32); font-size: var(--font-size-tagline); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }

/* 4人を止めるボタンは付けない（2026-10-23 Ayane「トップ画面の再生停止ボタンはいらない」）。
   画面から外れたら止め、動きを減らす設定の人には動かさない（top.js） */

/* 町の部品（2026-10-24 Ayane が「町の部品も足す」を選んだ）。絵巻と同じ雲・木・草・茂み・家を、4人より奥に置く。
   雲は上の2人のあいだ、小さな町は黄の面の下で、線より下（線と町が重ならない高さ）に、人物と同じ地面に並べる */
.town .tp { position: absolute; width: auto; height: auto; }
.town .t-cloud1 { left: 31%; top: 6%; width: 11%; }
.town .t-cloud2 { left: 57%; top: 15%; width: 5.5%; }
.town .t-tree1 { left: 31.5%; bottom: 4%; height: 13%; }
.town .t-house1 { left: 38%; bottom: 4%; height: 11.5%; }
.town .t-bush { left: 46.5%; bottom: 4%; height: 6%; }
.town .t-house2 { left: 52%; bottom: 4%; height: 12.5%; }
.town .t-tree2 { left: 57%; bottom: 4%; height: 13.5%; }
.town .t-grass1 { left: 27%; bottom: 4.5%; height: 6%; }
.town .t-grass2 { right: 30%; bottom: 4%; height: 5%; }

/* 登場（その日はじめて開いたとき。html に intro が付いているあいだ）：黄の面、町の部品と4人、言葉、h1 とボタンを隠しておき、
   top.js が on を付けた順に飛び出させる。最後に線が上から走る（emaki.js）。言葉は4つの言葉ごとに出すので、言葉を箱にする */
.lead .ph { display: inline-block; }
html.intro .top-fv :is(.panel, .who, .tp, .ph, .tagline, .btn):not(.on) { visibility: hidden; }

/* 読み込みの画面：生成りの地の真ん中で贈り物の箱がカタカタ揺れ、下で数字が進む（2026-10-24 Ayane が「箱がカタカタ」を選んだ） */
.loader { display: none; }
html.intro .loader {
  display: flex; position: fixed; z-index: 100; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16);
  background: var(--color-bg-base);
}
html.intro .loader.done { display: none; }
.ld-box { width: 96px; height: auto; transform-origin: 50% 90%; }
.ld-num {
  font-family: var(--font-latin); font-weight: var(--font-weight-bold); font-size: var(--font-size-h3);
  line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--color-text-secondary);
}

/* 画面の幅 1024〜1279px：4人の札が真ん中の言葉とボタンに寄らないよう、4人を面の端へ寄せて少し小さくする */
@media (min-width: 1024px) and (max-width: 1279px) {
  .w-sonaeru { left: 4%; height: 34%; }
  .w-taberu { right: 4%; height: 32%; }
  .w-kaitasu { right: 5%; height: 42%; }
  .w-okuru { left: 5%; height: 36%; }
}

/* スマホ・タブレット（1023px 以下。--layout-breakpoint-lg）：絵の場所を上に、文字を下に積む。
   絵の場所の四隅に4人、帯は4人のあいだを1周してから言葉のほうへ抜ける */
@media (max-width: 1023px) {
  .top-fv { padding: var(--space-12) var(--space-12) var(--space-16); }
  .panel { height: auto; padding-bottom: var(--space-24); }
  .ribbon.pc { display: none; }
  /* 帯の始まりは贈る人の体の後ろに隠し、終わりは絵の場所の外まで伸ばして黄の面の端で切る（タブレットの幅で、絵の場所の端で切れて見えないように） */
  .ribbon.sp { display: block; overflow: visible; }
  .ribbon path { stroke-width: 16px; }
  .stage { position: relative; inset: auto; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 351 / 400; }
  .w-sonaeru { left: 0; top: 2%; height: 42%; }
  .w-taberu { right: 0; top: 4%; height: 38%; }
  .w-kaitasu { right: 2%; top: 50%; height: 48%; }
  .w-okuru { left: 0; top: 54%; height: 43%; }
  .stage .who .cap { display: none; }
  /* 町の部品：雲は上の2人のあいだ、家と木は下の2人のあいだ（線は足もとを通るので、その少し上に立たせる） */
  .town .t-cloud1 { left: 41%; top: 17%; width: 18%; }
  .town .t-cloud2 { left: 46%; top: 3%; width: 13%; }
  .town :is(.t-tree1, .t-bush, .t-grass2, .t-house2) { display: none; }
  .town .t-house1 { left: 40%; bottom: 10%; height: 12%; }
  .town .t-tree2 { left: 55%; bottom: 10%; height: 17%; }
  .town .t-grass1 { left: 37%; bottom: 9.5%; height: 6%; }
  .ld-box { width: 80px; }
  .copy { position: relative; left: auto; top: auto; transform: none; width: min(100%, 520px); margin: var(--space-16) auto 0; padding: 0 var(--space-24); }
  .tagline { margin-bottom: var(--space-24); }
}

/* ---------- 2. コンセプト動画 ---------- */
.cm-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-64); align-items: center; }
.cm .h2 { margin-bottom: var(--space-16); }
.cm .body { max-width: var(--layout-text-max); }
.video {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-card); background: var(--color-bg-base);
}
.video video, .vplay, .vplay img { position: absolute; inset: 0; width: 100%; height: 100%; }
.video video, .vplay img { object-fit: cover; }
.vplay[hidden] { display: none; }
.vplay .pl {
  position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px;
  border-radius: var(--radius-circle); background: var(--color-action-strong);
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.vplay .pl::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -14px 0 0 -8px; border-left: 24px solid var(--color-bg-base); border-block: 14px solid transparent; }
/* 静止画の上に「15秒・音が出ます」の札は置かない（2026-10-23 Ayane「「15秒音が出ます」という文字も削除して」） */
@media (hover: hover) { .vplay:hover .pl { background: var(--color-action-strong-hover); } }
.vplay:focus-visible { outline-offset: calc(var(--layout-focus-offset) * -1 - var(--border-width-line)); }
@media (max-width: 1023px) {
  .cm-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .video { aspect-ratio: 9 / 16; width: min(100%, 280px); margin-inline: auto; }
}

/* ---------- 3. ふだんの日の話（SOUBIについて）：本音を大きく、右に写真の窓 ---------- */
.cm + .story { padding-top: 0; }
.s4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--space-64); align-items: start; }
.s4 .h2 { margin-bottom: var(--space-48); }
.honne { display: grid; gap: var(--space-40); }
.honne li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-24); align-items: center; }
.honne .fig { display: grid; place-items: center; height: 124px; }
.honne .fig img { width: auto; max-height: 124px; }
.honne p { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }
.bigwin {
  position: relative; aspect-ratio: 13 / 16; overflow: hidden;
  border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-panel);
}
.bigwin img { width: 100%; height: 100%; object-fit: cover; }
.aha { margin-top: var(--space-96); text-align: center; }
.aha .huge { margin-bottom: var(--space-16); font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); }
.aha .voice { margin-bottom: var(--space-12); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading); }
.aha .body { max-width: 30em; margin-inline: auto; }
@media (max-width: 1023px) {
  .s4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
  .s4 .h2 { margin-bottom: var(--space-32); }
  .honne { gap: var(--space-24); }
  .honne li { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-16); }
  .honne .fig { height: 84px; }
  .honne .fig img { max-height: 84px; }
  .honne p { font-size: var(--font-size-h3); }
  .bigwin { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
  .aha { margin-top: var(--space-64); text-align: left; }
}

/* ---------- 4. そなえの棚（黄の章）：丘の上に「備える」人、商品のカード2枚（番号は付けない、D32） ---------- */
.shelf { padding-top: var(--space-24); }
.shelf .head { position: relative; }
.shelf .head .who { position: absolute; right: var(--space-40); top: -200px; height: 210px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); margin-top: var(--space-40); }
.cards .card { display: grid; grid-template-rows: auto 1fr; }
.card .ph { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: var(--border-width-line) solid var(--color-border-line); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .ph.wait { display: grid; place-items: center; align-content: center; gap: var(--space-8); background: var(--color-bg-base); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
.card .ph.wait img { width: 96px; height: auto; object-fit: contain; }
.card .in { display: grid; align-content: start; justify-items: start; gap: var(--space-16); padding: var(--space-32); }
.card .t { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-16); justify-self: stretch; }
.shelf-foot { margin-top: var(--space-32); }
@media (max-width: 1023px) {
  .shelf .head .who { right: 0; top: -140px; height: 140px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-32); }
  .card .in { padding: var(--space-24); }
}

/* ---------- 5. 贈り方：写真の窓とカード、「贈る」人 ---------- */
.g4 { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--space-64); align-items: center; }
.win {
  position: relative; aspect-ratio: 13 / 11; overflow: hidden;
  border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-panel);
}
.win img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.pair { display: flex; align-items: flex-end; gap: var(--space-24); margin-top: var(--space-24); }
.msg {
  width: 300px; padding: var(--space-16) var(--space-24);
  background: var(--color-surface-card); border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-card);
}
.msg b { display: block; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.pair .who { height: 200px; flex: none; }
.steps { display: grid; gap: var(--space-12); margin: var(--space-32) 0; }
.steps li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-12); padding: var(--space-16) var(--space-24);
  background: var(--color-bg-base); border: var(--border-width-line) solid var(--color-border-line); border-radius: var(--radius-card);
}
.steps .n { grid-row: span 2; font-family: var(--font-latin); font-weight: var(--font-weight-bold); font-size: var(--font-size-h2); line-height: var(--line-height-latin); letter-spacing: var(--letter-spacing-latin); }
@media (max-width: 1023px) {
  .g4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .win { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
  .pair { gap: var(--space-8); }
  .msg { width: auto; flex: 1; }
  .pair .who { height: 140px; }
  .steps { margin: var(--space-24) 0; }
  .steps li { grid-template-columns: 48px minmax(0, 1fr); padding: var(--space-16) var(--space-16) var(--space-16) var(--space-24); }
}

/* ---------- 6. そなえ帖とお知らせ ---------- */
.rd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-48); }
.rd .h2 { margin-bottom: var(--space-24); }
/* そなえ帖の新しい記事のカード（build.py が書く）。サムネイルは16:9 */
.rd-card { display: block; }
.rd-card .th { aspect-ratio: var(--layout-thumb-ratio); overflow: hidden; border-bottom: var(--border-width-line) solid var(--color-border-line); }
.rd-card .th img { width: 100%; height: 100%; object-fit: cover; }
.rd-card .in { display: grid; gap: var(--space-8); padding: var(--space-24) var(--space-24) var(--space-32); }
.rd-card .meta { display: flex; align-items: baseline; gap: var(--space-12); font-size: var(--font-size-small); color: var(--color-text-secondary); }
.rd-card .meta b { font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.rd-card .num, .news .num { font-family: var(--font-latin); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-latin); }
@media (hover: hover) { .rd-card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--border-width-line); text-underline-offset: .25em; } }
.rd .more { margin-top: var(--space-24); }
/* お知らせの見出しは、左の列の見出し（小さな見出しの1行ぶん下）にそろえる */
.news-col { padding-top: calc(var(--font-size-small) * var(--line-height-small) + var(--space-12)); }
.news { border-top: var(--border-width-line) solid var(--color-border-line); }
.news li {
  display: grid; grid-template-columns: 88px 80px minmax(0, 1fr); gap: var(--space-12); align-items: baseline;
  padding: var(--space-16) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-line);
}
.news li:last-child { border-bottom-width: var(--border-width-line); }
.news .t { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); }
@media (max-width: 1023px) {
  .rd { grid-template-columns: minmax(0, 1fr); gap: var(--space-64); }
  .news-col { padding-top: 0; }
  .news li { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4) var(--space-12); }
  .news li > span:last-child { grid-column: 1 / -1; }
}

/* フッターの丘の上を歩く人が、そなえ帖の「記事をすべて見る」に近づきすぎないよう、トップだけ間を広げる */
.ftwrap { margin-top: var(--space-80); }