/* トップ（index.html）の「1本の線」と「絵巻」の見た目。site.css・top.css の上に重ねる（body.emaki-page のときだけ効く）。
   形は試作 prototypes/2026-10-19_絵巻と小道 のもの。2026-10-23 に Ayane「この内容で公開してください」で本番にした。
   ・最初の画面は黄の面と4人のまま。墨の太い帯（24px）をやめ、手で描いた揺れのあるクレヨンの線にする
     （10/21 Ayane「手描きの線でクレヨンみたいなテイストにしてほしい」）
   ・線は下の章へ続き、ふだんの日の話で町の通りになる。ここだけ画面を止め、縦のスクロールで町の絵巻を横に流す
   ・絵巻を抜けると縦の章に戻る。黄の章はそなえの棚だけ、フッターは生成り
   値は tokens の変数を使う。トップだけの値（線が通る列のすき間など）はここで名前を付ける。動きは emaki.js */

body.emaki-page {
  --gap: 128px;       /* 線が通る列のすき間 */
  --stand-s: 2px;     /* フッターの通りで、絵が線の上に立つ高さ */
  position: relative; overflow-x: clip;
}

/* ---------- 線 ---------- */
.road-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.road { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.road path { fill: none; stroke: var(--color-border-line); stroke-linecap: round; stroke-linejoin: round; }
.road .measure { stroke: none; }
/* クレヨンの線：墨の線を太さの違う3本に分けて少しずつずらして重ね（js）、紙のざらつきの形に抜く。
   ざらつきは細かい雑音の絵を敷き詰めた mask で、線が動いても紙の目は動かない */
.road { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5.5 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5.5 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); -webkit-mask-size: 180px 180px; mask-size: 180px 180px; }
.cr-1 { stroke-width: 4.6px; }
.cr-2 { stroke-width: 3px; opacity: 0.85; }
.cr-3 { stroke-width: 2px; opacity: 0.8; }

/* 線の先を進む贈り物の箱 */
.traveler, .em-box { position: absolute; left: 0; top: 0; width: 64px; height: auto; pointer-events: none; will-change: transform; transform-origin: 50% 90%; }
.traveler { z-index: 6; }

/* 文字と絵は線より手前 */
.emaki-page main .wrap, .emaki-page .street, .emaki-page .ft { z-index: 2; }

/* ---------- 1. 最初の画面：本番の黄の面。墨の帯はなくし、線は言葉のまわりをめぐる ---------- */
/* 4人の札は本番の位置のまま（線は札と言葉のあいだを通る） */

/* ---------- 2. コンセプト動画 ---------- */
.emaki-page .cm-in { column-gap: var(--gap); }
/* PC：最初の画面の下から、文と動画のあいだへ曲がって下りる弧（半径 160px）が収まるように、章の上を広げる
   （10/23 Ayane「縦のマージンを広げることで緩やかなカーブをより再現してください」） */
@media (min-width: 1024px) { .emaki-page .cm { padding-top: calc(var(--space-96) + 64px); } }

/* ---------- 3. ふだんの日の話（絵巻） ---------- */
.emaki { position: relative; --gy: 0.8; --stand: 1px; --sc-top: 18%; }
/* 止める画面：高さは画面いっぱい。section の高さ（止めておくスクロールの長さ）は js が決める */
.em-frame { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--color-bg-base); }
.em-layer { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.em-back { z-index: 1; width: 100%; }
.em-track { z-index: 2; width: calc(var(--sw, 100vw) * 3.45); }
.em-front { z-index: 3; width: 100%; pointer-events: none; }
.em-box { z-index: 4; opacity: 0; }

/* 奥の雲（ゆっくり流れる）。最後の画面で言葉の上に来ない場所に置く */
.em-back img { position: absolute; height: auto; }
.em-back .c1 { left: calc(var(--sw) * 0.2); top: 4%; width: 170px; }
.em-back .c2 { left: calc(var(--sw) * 0.66); top: 9%; width: 96px; }
.em-back .c3 { left: calc(var(--sw) * 1.06); top: 3%; width: 150px; }
.em-back .c4 { left: calc(var(--sw) * 1.42); top: 8%; width: 84px; }
.em-back .c5 { left: calc(var(--sw) * 2.02); top: 5%; width: 160px; }
/* 手前の草（速く流れる）。通りより下の帯を通る */
.em-front img { position: absolute; bottom: -14px; height: auto; }
.em-front .f1 { left: calc(var(--sw) * 0.55); width: 92px; }
.em-front .f2 { left: calc(var(--sw) * 1.25); width: 150px; }
.em-front .f3 { left: calc(var(--sw) * 1.95); width: 80px; }
.em-front .f4 { left: calc(var(--sw) * 2.6); width: 140px; }
.em-front .f5 { left: calc(var(--sw) * 3.3); width: 92px; }
.em-front .f6 { left: calc(var(--sw) * 3.95); width: 72px; }

/* 場面：上の端から通りまでの箱。絵は通りの上に立ち、言葉はいちばん背の高い絵（雨の日の雨雲）の上に、すき間をあけて置く。
   画面の縦が短いときは、言葉と絵が重ならないように、js が絵の大きさを --k の割合で小さくする（--say-b も js が決める）。
   言葉を画面の高さの割合で置くと、縦が短い画面で絵と重なっていた（10/24 Ayane「スマホ版で確認したところイラストと文字がうまく表示されていなかった」） */
.emaki { --k: 1; --say-b: 466px; }
.sc { position: absolute; top: var(--sc-top); bottom: calc((1 - var(--gy)) * 100% + var(--stand)); }
.sc > img, .sc > .badge, .sc > .drops { position: absolute; bottom: 0; height: auto; }
.sc .say { position: absolute; top: auto; bottom: var(--say-b); left: 0; font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-heading); white-space: nowrap; }
.s0 { left: calc(var(--sw) * 0.06); top: 24%; bottom: auto; }
/* 1軒目：忙しくて買い物に行けなかった日 */
.s1 { left: calc(var(--sw) * 0.6); width: calc(560px * var(--k)); }
.s1 .say { left: calc(140px * var(--k)); }
.s1 .tree { left: 0; width: auto; height: calc(250px * var(--k)); }
.s1 .house { left: calc(160px * var(--k)); width: auto; height: calc(300px * var(--k)); }
.s1 .fig { left: calc(384px * var(--k)); width: auto; height: calc(190px * var(--k)); }
/* 2軒目：熱を出した日。家の横に、立って赤ちゃんを抱く人（10/23 Ayane「女性は立って抱く」） */
.s2 { left: calc(var(--sw) * 1.2); width: calc(600px * var(--k)); }
.s2 .house { left: 0; width: auto; height: calc(280px * var(--k)); }
.s2 .fig { left: calc(326px * var(--k)); width: auto; height: calc(232px * var(--k)); }
.s2 .bush { left: calc(470px * var(--k)); width: auto; height: calc(110px * var(--k)); }
/* 3軒目：雨の日。家の左の窓から男性が手を出し、その手のひらの上に、雨雲から雨粒が落ちる（雨粒は手の前を通す） */
.s3 { left: calc(var(--sw) * 1.8); width: calc(640px * var(--k)); }
.s3 .say { left: calc(320px * var(--k)); }
.s3 .rainc { left: calc(125px * var(--k)); bottom: calc(300px * var(--k)); width: calc(240px * var(--k)); z-index: 1; }
.s3 .drops { left: calc(170px * var(--k)); bottom: calc(10px * var(--k)); width: calc(150px * var(--k)); height: calc(290px * var(--k)); overflow: hidden; pointer-events: none; z-index: 2; }
.s3 .drops i { position: absolute; top: 0; width: 3px; height: 24px; border-radius: 2px; background: var(--color-illust-sky); /* イラストの色（絵の中の雨粒） */ }
.s3 .drops i:nth-child(1) { left: 4%; } .s3 .drops i:nth-child(2) { left: 17%; } .s3 .drops i:nth-child(3) { left: 30%; } .s3 .drops i:nth-child(4) { left: 43%; }
.s3 .drops i:nth-child(5) { left: 56%; } .s3 .drops i:nth-child(6) { left: 69%; } .s3 .drops i:nth-child(7) { left: 82%; } .s3 .drops i:nth-child(8) { left: 95%; }
.s3 .house { left: calc(300px * var(--k)); width: auto; height: calc(300px * var(--k)); }
/* 最後の画面：線で描いた家の中に棚と食べる人、家の左に「あ、家にあってよかった。」。箱は棚の前で止まる（--bx は js が決める箱の位置）。
   家の右の壁と通りの終わりは、食べる人のすぐ右（js が人の位置から決める） */
.s4 { left: calc(var(--sw) * 2.45); width: var(--sw); top: 0; }
.s4 .aha { position: absolute; left: 4%; top: 16%; width: 29%; text-align: left; }
.s4 .aha .body { margin-inline: 0; }
.s4 .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); }
.s4 .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); }
.s4 .shelfart { position: absolute; left: calc(var(--bx, 50%) - 160px * var(--k)); bottom: calc(200px * var(--k)); width: calc(320px * var(--k)); aspect-ratio: 460 / 260; }
.shelfart .board { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
/* 棚の品：下の段に缶を2つ、上の段にパックご飯を1つ（1画面の小物は3つまで。02_visual ⑧）。
   品の底は、板の上の面（棚の絵の上から 80〜108px と 242〜278px）の手前寄りに置く。奥の縁に乗せると浮いて見える
   （10/23 Ayane「棚にちゃんと置かれてるようになってないので、棚の上に置かれてるようにしてください」）。
   パックご飯は背が高く、下の段では上の板にぶつかるので上の段に置く */
.shelfart .item { position: absolute; height: auto; will-change: transform; opacity: 0; }
.shelfart .i1 { left: 14%; bottom: 14%; width: 17%; }
.shelfart .i2 { left: 33%; bottom: 44%; width: 19%; }
.shelfart .i3 { left: 52%; bottom: 14%; width: 17%; }
.s4 .taberu { left: 68%; width: auto; height: calc(250px * var(--k)); }
.em-track .opened, .em-track .lid { position: absolute; left: 0; top: 0; z-index: 3; width: 64px; height: auto; opacity: 0; will-change: transform; pointer-events: none; }
.road-track { z-index: 0; }

/* ---------- 4. そなえの棚（ページでただ1つの黄の章） ---------- */
/* 絵巻を出た線は、箱が止まった点の右から下り、棚のカードのあいだへ S 字で移る。S 字がゆるやかに曲がれるように、
   絵巻と丘のあいだを広げる（丘の上の「備える」人と見出しは、丘といっしょに下がる） */
.emaki + .hill { margin-top: 180px; }
.emaki-page .cards { column-gap: var(--gap); }

/* ---------- 5. 贈り方：手渡しの2人 ---------- */
.emaki-page .g4 { column-gap: var(--gap); align-items: center; }
.hand { position: relative; height: 520px; }
.hand .pair2 { position: absolute; left: 50%; bottom: 0; width: auto; height: 100%; transform: translateX(-50%); }
.hand .tree { position: absolute; left: 0; bottom: 0; width: 92px; height: auto; }
.emaki-page .gift .msg { margin-top: var(--space-24); }

/* ---------- 6. そなえ帖 ---------- */
.emaki-page .rd { column-gap: var(--gap); }

/* ---------- 7. 通りとフッター（生成り） ---------- */
.emaki-page .ftwrap { margin-top: var(--space-16); }
.street { position: relative; height: 300px; }
.street img { position: absolute; bottom: var(--stand-s); height: auto; }
/* 草と茂みは、買い足す人が歩き終わって止まるところを避けて置く */
.street .g1 { left: 56%; width: 70px; }
.street .b1 { left: 64%; width: 130px; }
.street .g2 { left: 90%; width: 60px; }
/* 買い足す人（買い物袋を持って歩く人）は、絵巻の人物と同じくらいの背にする（10/23 Ayane「小さすぎるので、大きくしてください」で 92→150px 幅、
   続けて「女の子はもう一回りおおきくして」で 190px 幅。手渡しの2人（高さ 520px）よりは小さい） */
.street .walker { left: auto; right: 3%; width: 190px; will-change: transform; transform-origin: 50% 100%; }
.emaki-page .ft { background: var(--color-bg-base); padding-top: var(--space-32); }

/* 画面の幅 1024〜1279px：買い足す人の止まるところに右の草がかかるので、右の草は出さない */
@media (min-width: 1024px) and (max-width: 1279px) { .street .g2 { display: none; } }

/* ---------- スマホ・タブレット（1023px 以下） ---------- */
@media (max-width: 1023px) {
  body.emaki-page { --lane: 48px; }
  .cr-1 { stroke-width: 3.4px; }
  .cr-2 { stroke-width: 2.2px; }
  .cr-3 { stroke-width: 1.5px; }
  .traveler, .em-box, .em-track .opened, .em-track .lid { width: 44px; }

  /* 線が通る側の余白を広げる（data-lane の l は左、r は右） */
  .emaki-page [data-lane="l"] { margin-left: calc(var(--lane) - var(--layout-gutter-sp)); }
  .emaki-page [data-lane="r"] { margin-right: calc(var(--lane) - var(--layout-gutter-sp)); }
  /* 線が左右の端を移る2か所（棚 → 贈り方、贈り方 → そなえ帖）は、S字がゆるやかに曲がれるように章のすき間を広げる
     （10/23 Ayane「縦のマージンを広げることで緩やかなカーブをより再現してください」で 120→180px。そなえ帖の前は もとのすき間が狭いので 64px 足す） */
  .emaki-page { --swap: 180px; }
  .emaki-page .gift .hand { margin-top: var(--swap); }
  .emaki-page .reads .rd > [data-lane]:first-child { margin-top: calc(var(--swap) + 64px); }
  .emaki + .hill { margin-top: 190px; }

  .emaki { --gy: 0.74; --sc-top: 34%; --say-b: 262px; }
  /* 縦がとても短い画面（js が tight を付ける）：通りを少し下げ、最後の画面の言葉を一段小さくする */
  .emaki.tight { --gy: 0.8; }
  .emaki.tight .s4 .aha .huge { font-size: var(--font-size-h2); }
  .emaki.tight .s4 .aha .voice { font-size: var(--font-size-body); }
  .emaki.tight .s4 .aha .body { font-size: var(--font-size-small); }
  .em-frame { height: calc(100svh - var(--bar-h) - env(safe-area-inset-bottom)); }
  .em-track { width: calc(var(--sw, 100vw) * 4.1); }
  .em-back .c1 { left: calc(var(--sw) * 0.3); top: 2%; width: 92px; }
  .em-back .c2 { left: calc(var(--sw) * 0.86); top: 5%; width: 60px; }
  .em-back .c3 { left: calc(var(--sw) * 1.04); top: 2%; width: 84px; }
  .em-back .c4, .em-back .c5 { display: none; }
  .em-front img { bottom: -10px; }
  .em-front .f1 { left: calc(var(--sw) * 0.7); width: 56px; }
  .em-front .f2 { left: calc(var(--sw) * 1.6); width: 90px; }
  .em-front .f3 { left: calc(var(--sw) * 2.5); width: 50px; }
  .em-front .f4 { left: calc(var(--sw) * 3.4); width: 84px; }
  .em-front .f5 { left: calc(var(--sw) * 4.3); width: 56px; }
  .em-front .f6 { left: calc(var(--sw) * 5.1); width: 46px; }

  .sc .say { font-size: var(--font-size-h3); }
  .s0 { left: calc(var(--sw) * 0.14); top: 9%; width: calc(var(--sw) * 0.8); }
  .s1 { left: calc(var(--sw) * 0.42); width: calc(230px * var(--k)); }
  .s1 .say { left: 0; }
  .s1 .tree { height: calc(132px * var(--k)); }
  .s1 .house { left: calc(80px * var(--k)); height: calc(170px * var(--k)); }
  .s1 .fig { left: calc(168px * var(--k)); height: calc(104px * var(--k)); }
  .s2 { left: calc(var(--sw) * 1.3); width: calc(300px * var(--k)); }
  .s2 .house { height: calc(160px * var(--k)); }
  .s2 .fig { left: calc(184px * var(--k)); height: calc(130px * var(--k)); }
  .s2 .bush { left: calc(252px * var(--k)); height: calc(64px * var(--k)); }
  .s3 { left: calc(var(--sw) * 2.2); width: calc(280px * var(--k)); }
  .s3 .say { left: 0; }
  .s3 .rainc { left: calc(33px * var(--k)); bottom: calc(170px * var(--k)); width: calc(120px * var(--k)); }
  .s3 .drops { left: calc(50px * var(--k)); bottom: calc(8px * var(--k)); width: calc(86px * var(--k)); height: calc(165px * var(--k)); }
  .s3 .house { left: calc(128px * var(--k)); height: calc(170px * var(--k)); }
  .s4 { left: calc(var(--sw) * 3.1); }
  /* 言葉は家の屋根の上に置く（--aha-b は js が屋根の高さから決める） */
  .s4 .aha { left: 8%; top: auto; bottom: var(--aha-b, 230px); width: 84%; }
  .s4 .shelfart { left: calc(var(--bx) - 64px * var(--k)); bottom: calc(82px * var(--k)); width: calc(170px * var(--k)); }
  .s4 .taberu { left: 57%; height: calc(140px * var(--k)); }

  .emaki-page .cards, .emaki-page .g4, .emaki-page .rd { column-gap: 0; }
  .hand { height: 340px; }
  .hand .tree { width: 64px; }

  .street { height: 190px; }
  .street .g1 { left: 26%; width: 40px; } .street .b1 { left: 70%; width: 80px; } .street .g2 { display: none; } /* 歩き終わって止まるところ（幅の 43〜65% あたり）を避ける */
  .street .walker { right: 4%; width: 104px; }
}

/* 動きを減らす設定（と ?all=1）：画面を止めず、町は横に並べたまま指やスクロールバーで送れる。
   線は全部描き、箱は出さず、品は棚に並べた形で見せる。奥の雲と手前の草は出さない */
.still .emaki { height: auto; }
.still .em-frame { position: relative; overflow-x: auto; overflow-y: hidden; }
.still .em-back, .still .em-front, .still .em-box, .still .traveler, .still .em-track .opened, .still .em-track .lid { display: none; }
.still .shelfart .item { opacity: 1; }