*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.demo{position:fixed;z-index:99;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:600 12px/1 var(--body);letter-spacing:.08em;border-radius:999px}.demo a{text-decoration:underline}.skip{position:fixed;left:8px;top:-80px;z-index:120;background:#fff;color:#000;padding:10px}.skip:focus{top:8px}.eyebrow{margin:0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#74f2d4}:focus-visible{outline:3px solid #4f8cff;outline-offset:4px}
/* 出現の演出。opacity は使わない(見えない要素として扱われ、節ごと出てこなくなる事故を実測済)。
持ち上げ = translate(個別プロパティ) / 覆い = clip-path。
.hold = 画面下端に貼り付いた要素用。持ち上げず、覆いだけで開く。
.done = 開き終わったら覆いを外す。重ね順の乱れと focus 枠の切れを残さない。
★transition は「隠れた形(.rise)」ではなく「開いた形(.rise.seen)」の側に書く(2026-08-25 是正)。
理由 = site.js が html に js を付けるまで .rise は素の見えている形をしている。隠れた形の側に
transition を置くと、js が付いた瞬間に 51 個が「見えている形 → 26px 下」へ 0.9 秒かけて沈む。
沈む速さは --d でずれているので、縦に並んだ文字は沈んでいる間だけ間隔が詰まる。
実測(390 幅・読み込み直後)= #log の前置き→見出しが 11.5px → 4.4px まで縮み、
公開品質ゲート(スクロールせず読み込み直後に測る)が spacing critical を 3 件出していた。
測るたびに赤くなる幅が変わる(768/390/320 と 390/320/320)= 動いている物を測っていた証拠。
開く側にだけ transition を置けば、隠れた形は 1 フレームで確定し、間隔は静止時のまま動かない。
開く向き(26px → 0)は上の要素が先に上がるので間隔は広がる = 詰まらない。 */
html.js .rise{translate:0 26px;clip-path:inset(0 0 100% 0)}
html.js .rise.hold{translate:none}
html.js .rise.seen{translate:none;clip-path:inset(0);transition:translate .9s cubic-bezier(.16,.7,.24,1) var(--d,0s),clip-path 1.05s cubic-bezier(.16,.7,.24,1) var(--d,0s)}
html.js .rise.done{clip-path:none}
/* ループする装飾には transition を持たせない。同じ property に animation と transition が
同時に載ると、動いている側が勝って触った瞬間に瞬間移動する(実測済)。 */
.mote,.specks circle,.colony,.sweep,.reticle-spin,.tip,.scan,.plot,.seat-row circle,.rec,.next i{transition-property:none}
@media(max-width:820px){.demo{left:8px;bottom:8px;max-width:calc(100vw - 16px);font-size:12px}.desktop{display:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}html.js .rise{translate:none!important;clip-path:none!important}}
:root{--bg:#16120f;--ink:#f7f1e5;--body:"IBM Plex Mono",monospace;--hand:Yomogi,cursive}
.lab-nav{position:fixed;z-index:30;inset:24px 28px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;font-size:12px}
.lab-nav>a{font:600 16px var(--body)}.lab-nav nav{display:flex;gap:22px}.lab-nav>span{text-align:right}
/* 固定した見出し帯は、下を流れてくる明るい面(紙のカード・オレンジの章)の上で必ず消える。
薄い覆いだと今度は下の紙の文字が沈むので、不透明な帯を出す。写真のヒーローの上だけ引っ込める。 */
.lab-nav::before{content:"";position:fixed;z-index:-1;left:0;right:0;top:0;height:104px;background:#100d0b;box-shadow:0 1px 0 #ffffff14;translate:0 0}
html.anim .lab-nav::before{transition:translate .45s cubic-bezier(.2,.7,.2,1)}
html.at-top .lab-nav::before{translate:0 -106%}
/* 写真の上に文字を置くための影は、帯が引っ込んでいる時(at-top)だけ出す。
影の色(#050403)は帯(#100d0b)より暗いので、不透明な帯の上に出しっぱなしにすると
文字のまわりに黒い楕円が残る(1440 幅で「地より暗い画素」5,504 件 = ロゴの字 2,914 件の 1.9 倍。
いちばん暗い輝度 1.85 に対して帯は 13.49 を実測)。
帯と同じ合図(at-top)で切り替え、帯と同じ .45s で入れ替える。既定 = 影なし = 帯が出ている側なので、
JS が動く前の 1 フレームでも「帯の上に影なし」で辻褄が合う。 */
html.at-top .lab-nav{text-shadow:0 0 4px #050403,0 1px 3px #050403,0 2px 16px #050403}
html.anim .lab-nav{transition:text-shadow .45s cubic-bezier(.2,.7,.2,1)}
/* 共有の shared-quality.css が body に上余白 44px(制作例の帯)を足す。
章の高さを 100svh のままにすると、全画面章 4 つが必ず画面より 44px 高くなり、
最初の画面で「NEXT OBSERVATION ↓」が下端から 14px はみ出していた(1440x900 / 390x844 で実測)。
↓ には bob(2.4 秒周期で +5px 下降)が載っているので、周期の半分は矢印が画面の外に出る。
高さと下限の両方から 44px を引く。下限を引かないと 390x844 の実機で同じはみ出しが残る(実測)。 */
.photo-chapter{height:calc(100svh - 44px);min-height:calc(700px - 44px);position:relative;overflow:hidden}
.photo-chapter>img{position:absolute;inset:0;filter:saturate(1.25) contrast(1.1);transition:transform 8s linear}
.photo-chapter.is-visible>img{transform:scale(1.08)}
/* 写真を持つ章にだけ覆いを掛ける。写真の無い章(#join)に写真用の覆いを掛けると、
オレンジの下半分が黒く沈み、その上の黒い文字が読めなくなる(画素で実測)。 */
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000a,transparent 60%)}
.photo-chapter.active::after{background:radial-gradient(112% 82% at 3% 97%,#050403eb 0%,#050403cc 32%,#0504038f 56%,#05040333 78%,#05040300 100%),linear-gradient(0deg,#000a,transparent 62%)}
.chapter-three::after{background:radial-gradient(148% 92% at -5% 50%,#050403e0 0%,#050403b8 30%,#05040375 54%,#05040326 76%,#05040300 100%),linear-gradient(0deg,#000a,transparent 58%)}
/* 携帯は画面が縦に細長く、横長の写真がきつく切り取られる。広い画面と同じ濃さの覆いを掛けると
左の金色の泡と右の試験管が赤黒い靄に沈む(改修前後の 390 幅を並べて実測)。
文字の読みは「字の画素の下位 5% のコントラストが 6.0 以上」を床にして、覆いだけ薄くする。 */
@media(max-width:720px){
.photo-chapter.active::after{background:radial-gradient(126% 56% at 6% 100%,#050403c4 0%,#05040396 30%,#05040352 56%,#05040317 80%,#05040300 100%),linear-gradient(0deg,#00000096,transparent 42%)}
}
/* GALLERY(瓶の写真)の覆いは、左に置いた白い品名を読ませるためだけに要る。
元の 148%×92% は幅の 44% 地点でもまだ 72% の黒で、1 本目の瓶が黒の下にいた。
品名のコントラスト(字の画素の下位 5%)は 1440 で 14.76 と、床 6.0 に対して余裕が大きい。
広い画面では覆いの届く範囲を幅の 44% までに縮め、瓶の色を写真のまま見せる。
携帯は写真の切り取りが変わり、品名が幅の 73% まで伸びるので元の濃さのまま残す。 */
@media(min-width:721px){
.chapter-three::after{background:radial-gradient(46% 108% at -2% 50%,#050403e8 0%,#050403c0 30%,#05040370 55%,#05040320 78%,#05040300 100%),linear-gradient(0deg,#000a,transparent 58%)}
}
.scope{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.scope-grid path{fill:none;stroke:#f7f1e5;stroke-opacity:.08;stroke-width:1}
.reticle{fill:none;stroke:#74f2d4;stroke-opacity:.26;stroke-width:1.5}
.reticle-spin{stroke-dasharray:7 13;transform-box:fill-box;transform-origin:center;animation:spin 52s linear infinite}
.mote{fill:#ffdd45;fill-opacity:.42;animation:drift var(--t,12s) ease-in-out var(--dl,0s) infinite}
.hud{position:absolute;z-index:3;top:132px;right:30px;margin:0;display:flex;gap:12px;align-items:center;padding:9px 15px;border:1px solid #f7f1e52e;border-radius:999px;background:#0b0908d6;backdrop-filter:blur(8px);font:600 13px/1 var(--body);letter-spacing:.1em;color:#f7f1e5}
.hud span{font-variant-numeric:tabular-nums;color:#74f2d4}
.rec{display:block;width:8px;height:8px;border-radius:50%;background-color:#f15d3b;animation:blink 1.9s steps(1,end) infinite}
.label,.notebook,.specimen,.join-copy{position:absolute;z-index:2}
.label{left:5vw;bottom:9vh}
.label>span{font-size:13px;letter-spacing:.18em;text-shadow:0 0 5px #050403,0 0 13px #050403,0 2px 20px #050403}
.label h1{font:clamp(60px,9vw,130px)/.9 var(--hand);margin:.2em 0;color:#ffdd45;text-shadow:0 0 6px #050403,0 0 18px #050403cc,0 4px 30px #050403}
.next{position:absolute;z-index:3;right:30px;bottom:30px;border:0;background:none;display:flex;align-items:center;gap:10px;font:13px var(--body);letter-spacing:.06em;cursor:pointer;text-shadow:0 0 5px #050403,0 0 14px #050403}
.next span{border-bottom:1px solid transparent;padding-bottom:3px}
.next i{font-style:normal;display:inline-block;animation:bob 2.4s ease-in-out infinite}
.chapter-two img{filter:saturate(1.15)}
.notebook{right:5vw;bottom:8vh;width:min(540px,90vw);background:#f2f0e6;color:#18130f;padding:45px;transform:rotate(-2deg)}
.notebook h2{font:55px/1.05 var(--hand);margin:.3em 0}
.notebook p{line-height:1.9}
.underline{display:block;width:min(300px,86%);height:auto;margin:-2px 0 18px}
.underline path{fill:none;stroke:#ef5a37;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.rise.seen .underline path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.3,0,.2,1) .35s}
.chapter-three img{filter:saturate(1.15)}
.specimen{left:3vw;top:50%;transform:translateY(-50%)}
.specimen>span{font-size:13px;letter-spacing:.18em;text-shadow:0 0 5px #050403,0 0 14px #050403}
.specimen ol{list-style:none;padding:0;font:clamp(30px,5vw,72px)/1.22 var(--hand);color:#74f2d4;text-shadow:0 0 6px #050403,0 0 16px #050403,0 3px 26px #050403}
/* ── 帯で組んだ節(写真のない章)。地の色を隣どうしで替えてリズムを作る ── */
.lab-block{position:relative;padding:clamp(84px,12vh,152px) 5vw;scroll-margin-top:104px}
.wrap{max-width:1100px;margin:0 auto}
/* 帯節の大見出しは #log(.lab-log)も含めて 1 つの規則で決める(2026-08-25 統一)。
以前は .lab-block h2 = 86px 上限 / .lab-log h2 = 92px 上限・行間 1.15 / .culture h2 = 70px 上限 と
同じ階層の見出しが 3 通りに割れていた(1440 幅で 77.76 / 86.4 / 70px)。
上限を 70px に揃えた理由 = いちばん狭い箱が CULTURE(図と横に並ぶので .wrap 全幅にならない)で、
そこに 8 文字の「動いているのは、」が 6% の余裕込みで収まる上限が 70px だから(下の .culture-in 参照)。
上限を上げるには皿の絵を 3 割小さくするしかないので、絵を残して字を揃えるほうを採った。
margin の上を .2em → .28em にしたのは #log だけに効く(帯節の h2 は共有 shared-quality.css の
`.eyebrow + h2{margin-top:22px!important}` が勝つ)。#log の前置きは .log-eyebrow なので当たらず、
44px×.2em = 8.8px だと前置きとの隙間が 10px を割る。 */
.lab-block h2,.lab-log h2{font:clamp(44px,5.4vw,70px)/1.25 var(--hand);color:#ffdd45;margin:.28em 0 .46em}
.lead{max-width:640px;margin:0;font-size:16px;line-height:2;color:#e8e2d6}
.culture{background:#0f0c0a}
.culture-in{display:grid;gap:clamp(38px,5vw,72px);align-items:center}
.culture-copy{min-width:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:clamp(30px,4vw,46px) 0 0;padding-top:26px;border-top:1px solid #ffffff1f}
.stats>div{min-width:0}
.stats dt{font:600 clamp(26px,3vw,38px)/1 var(--body);color:#74f2d4;font-variant-numeric:tabular-nums}
.stats dd{margin:12px 0 0;font-size:13px;line-height:1.75;color:#b9b2a4}
.dish-wrap{margin:0;min-width:0;width:100%;max-width:500px;justify-self:center}
.dish{width:100%;height:auto;display:block}
.dish-wrap figcaption{margin-top:16px;font-size:13px;letter-spacing:.1em;color:#a49c8e;text-align:center}
.specks circle{fill:#f7f1e5;fill-opacity:.5;animation:drift var(--t,12s) ease-in-out var(--dl,0s) infinite}
.colony{fill:none;stroke:#74f2d4;stroke-opacity:.45;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:bloom var(--t,10s) ease-in-out var(--dl,0s) infinite}
.colony .core{fill:#74f2d4;fill-opacity:.85;stroke:none}
.sweep{transform-box:view-box;transform-origin:50% 50%;animation:spin 14s linear infinite}
.curve{background:#1c1714}
.chart-wrap{margin:clamp(30px,4vw,52px) 0 0}
.chart{width:100%;max-width:760px;height:auto;display:block;margin:0 auto}
.grid path{fill:none;stroke:#f7f1e5;stroke-opacity:.13;stroke-width:1.4}
.vgrid{stroke-opacity:.07}
.scan{animation:scan 8.5s linear infinite}
.scan path{fill:none;stroke:#74f2d4;stroke-opacity:.32;stroke-width:1.4}
.ln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.3,0,.2,1) var(--d,0s)}
.rise.seen .ln{stroke-dashoffset:0}
.l1{stroke:#ffdd45}.l2{stroke:#74f2d4}.l3{stroke:#f7f1e5}.l4{stroke:#f15d3b}
.tip{transform-box:fill-box;transform-origin:center;animation:pulse 3.4s ease-in-out var(--dl,0s) infinite}
.t1{fill:#ffdd45}.t2{fill:#74f2d4}.t3{fill:#f7f1e5}.t4{fill:#f15d3b}
.chart-wrap figcaption{margin-top:16px;font-size:13px;line-height:1.7;color:#a49c8e;text-align:center}
/* 横軸の目盛りは、線と同じ座標系から位置を取る。
以前は display:flex + justify-content:space-between + padding:0 1.5% で並べていたが、
% は自分の幅(760px)ではなく包含ブロック(1100px)に対して解決されるため、
1440 幅で「0日」が縦線から 38.1px 左へ外れていた(縦線 406.5 / ラベル中心 368.4 を実測)。
.chart と .axis は同じ max-width:760px を同じ親の中で共有しているので幅は常に等しい。
そこで viewBox(0 0 640 560)の縦線 x=56/192/328/464/600 をそのまま幅の割合に直し、
56/640=8.75% … 600/640=93.75% を --x として各ラベルの中心に置く。
★SVG の中の にしなかった理由 = SVG 内の文字は viewBox ごと拡大縮小されるため、
320 幅(チャートの実寸 288px = 倍率 0.45)では 13px 相当が 5.85px まで潰れる(ゲートの床は 12px)。
位置だけを SVG の座標系から取り、字の大きさは CSS の px のまま持つのが両立する唯一の形。
★span を箱として使うので display を宣言する。 */
.axis{position:relative;display:block;max-width:760px;height:1.5em;margin:14px auto 0;font-size:13px;letter-spacing:.08em;color:#a49c8e}
.axis span{position:absolute;top:0;left:var(--x);display:block;translate:-50% 0;white-space:nowrap}
.legend{list-style:none;max-width:760px;margin:clamp(26px,3vw,40px) auto 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:14px 24px}
.legend li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 12px;padding-top:13px;border-top:1px solid #ffffff1f}
.legend li::before{content:"";display:block;height:3px;margin-top:11px;border-radius:2px}
.legend b{grid-column:2;font:17px/1.4 var(--hand);color:#f7f1e5}
.legend span{grid-column:2;margin-top:3px;font-size:13px;color:#a49c8e;font-variant-numeric:tabular-nums}
.k1::before{background:#ffdd45}.k2::before{background:#74f2d4}.k3::before{background:#f7f1e5}.k4::before{background:#f15d3b}
.taste{background:#0f0c0a}
.taste-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,32px);margin-top:clamp(36px,4vw,58px)}
.taste-card{min-width:0}
.taste-card figure{margin:0 auto;max-width:340px;transition:transform .35s ease}
.radar{width:100%;height:auto;display:block}
.web polygon{fill:none;stroke:#f7f1e5;stroke-opacity:.14;stroke-width:1}
.web path{fill:none;stroke:#f7f1e5;stroke-opacity:.1;stroke-width:1}
/* viewBox を "0 4 240 208" に詰めたので、view-box を基準にした原点は user 座標の (0,4) から数える。
呼吸の中心をレーダーの中心 user(120,120) に置くため 120px 116px にする(120+4=124 ではない)。 */
.plot{transform-box:view-box;transform-origin:120px 116px;animation:breathe 7s ease-in-out var(--dl,0s) infinite}
.plot polygon{stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease .3s,fill-opacity .3s ease}
.rise.seen .plot polygon{stroke-dashoffset:0}
.ax text{font-family:var(--body);font-size:15px;fill:#f7f1e5;fill-opacity:.64;text-anchor:middle;dominant-baseline:middle}
.p1{stroke:#ffdd45;fill:#ffdd45;fill-opacity:.16}
.p2{stroke:#74f2d4;fill:#74f2d4;fill-opacity:.16}
.p3{stroke:#f7f1e5;fill:#f7f1e5;fill-opacity:.14}
.p4{stroke:#f15d3b;fill:#f15d3b;fill-opacity:.18}
.taste-card h3{margin:18px 0 8px;font:26px/1.35 var(--hand);color:#f7f1e5}
.taste-card small{display:block;font-size:13px;line-height:1.8;color:#b9b2a4}
@media(min-width:1180px){.taste-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.taste-grid{grid-template-columns:minmax(0,1fr)}.taste-card figure{max-width:288px}}
.notes{background:#16120f}
.note-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:clamp(20px,2.4vw,30px);margin-top:clamp(36px,4vw,58px)}
.note-slot{min-width:0;max-width:420px;margin-inline:auto;padding-top:18px}
.note-card{position:relative;display:block;height:100%;background:#f2f0e6;color:#18130f;padding:30px 26px 34px;box-shadow:0 18px 42px #00000059;rotate:var(--r,0deg);animation:sway 9s ease-in-out var(--dl,0s) infinite;transition:transform .35s ease}
/* テープは紙の天をまたいで貼る。#f7f1e540(白 25%)だと紙に重なる側が紙の色に負けて消え、
地の黒に重なる分だけが宙に浮いた灰色の板に見えていた。
紙(#f2f0e6)より少し温かい色を 79% で乗せると、黒の上では明るい帯、紙の上では温かい帯として
両方に出る = 紙に貼られた 1 枚のテープに見える。上 10px を外へ、残り 18px を紙の上へ重ねる。 */
.tape{display:block;position:absolute;top:-10px;left:50%;width:78px;height:28px;background:linear-gradient(180deg,#efe6cfc9,#e3d7bbc9);box-shadow:0 1px 2px #00000026;translate:-50% 0;rotate:-2deg}
.note-date{margin:0;font:600 13px/1 var(--body);letter-spacing:.14em;color:#8f3a22}
/* 30px だと 4 列に並ぶ画面で「梅、香りが飛ぶ」7 文字 = 210px が紙に入らず、「飛ぶ」が
独立行に落ちていた(1150 / 1158 / 1440 / 1920 で実測。紙の内側は 188〜200px)。
いちばん狭い 186px でも 7 文字が 94% に収まる 25px にする。4 枚とも同じ大きさに保つため全幅で下げる。
★cqi(紙の幅に追従させる案)は使えない。container-type:inline-size を .note-card に付けると
紙の中身の寄与が 0 になり、margin-inline:auto で縮む .note-slot ごと 52px に潰れた(実測)。 */
.note-card h3{margin:20px 0 22px;font:25px/1.35 var(--hand);color:#18130f}
.note-card p:last-child{margin:0;font-size:14px;line-height:1.9;color:#3b322b}
.seed{background:#1c1714}
.seed-frame{position:relative;margin-top:clamp(32px,4vw,54px)}
.seed-rail{display:block;position:absolute;left:31px;top:14px;bottom:14px;width:1px;background:#f7f1e524;overflow:hidden}
.seed-rail::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#74f2d400,#74f2d4,#74f2d400) no-repeat;background-size:100% 24%;animation:flow 6.5s linear infinite}
.seed-list{list-style:none;margin:0;padding:0}
.seed-list li{display:grid;grid-template-columns:64px 116px minmax(0,1fr);gap:2px 24px;padding:27px 0;border-top:1px solid #ffffff1c}
.seed-list li:first-child{border-top:0}
.glyph{display:block;grid-row:1/3;align-self:center;width:64px}
.glyph svg{width:100%;height:auto;display:block}
.glyph .colony{stroke-width:2.6}
.seed-list b{grid-column:2;font:600 24px/1.3 var(--body);color:#74f2d4;font-variant-numeric:tabular-nums}
.seed-list h3{grid-column:3;margin:0;font:30px/1.3 var(--hand);color:#f7f1e5}
.seed-list small{grid-column:3;grid-row:2;margin-top:8px;font-size:14px;line-height:1.85;color:#b9b2a4}
.chapter-four{background:#f15d3b;color:#16120f}
.join-copy{inset:0;padding:max(12vh,124px) 8vw 12vh;display:flex;flex-direction:column;justify-content:center}
.seats{display:flex;align-items:center;flex-wrap:wrap;margin:0;font-size:13px;letter-spacing:.16em}
.seat-row{display:block;width:170px;height:auto;margin-left:14px}
.seat-row circle{fill:none;stroke:#16120f;stroke-width:1.6;animation:seat 3.2s ease-in-out var(--dl,0s) infinite}
.seat-row .taken{fill:#16120f;fill-opacity:.82;animation:none;stroke-opacity:.9}
.join-copy h2{font:clamp(65px,10vw,145px)/.9 var(--hand);margin:.25em 0}
.join-copy .lead{max-width:560px;font-size:16px;line-height:1.8;color:#16120f}
.join-copy a{align-self:flex-start;border-bottom:2px solid;padding:10px 0;margin-top:26px}
footer{padding:30px;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}
/* CULTURE の見出しは図(顕微鏡の皿)と横に並ぶので、他の節と違って箱が 1100px にならない。
.84fr のままだと 1440 でも 559px しかなく、8 文字の「動いているのは、」が入らなかった。
.68fr で約 612px を確保する。上限 70px の見出し 8 文字 = 560px に 6% の余裕を足した 594px を
上回るのはここ(1296px 以上で字も箱も頭打ちになる最悪値)。皿は 469px → 416px。 */
@media(min-width:941px){.culture-in{grid-template-columns:minmax(0,1fr) minmax(0,.68fr)}.dish-wrap{justify-self:end}.dish-wrap figcaption{text-align:right}}
@media(max-width:820px){.lab-nav{inset:18px;grid-template-columns:1fr auto}.lab-nav nav{display:none}}
@media(max-width:720px){
.photo-chapter{min-height:calc(844px - 44px)}
/* ヒーローの見出しは「味は、」/「見えない動き。」の 2 かたまり。長いほう 7 文字が
使える幅(100vw - 左 20px)に収まる大きさで頭打ちにする = 12.4vw(6% の余裕込み)。 */
.label{left:20px;bottom:110px}.label h1{font-size:min(12.4vw,64px)}
.next{right:20px;bottom:30px}
.notebook{right:18px;bottom:50px;padding:28px}.notebook h2{font-size:44px}
.specimen{left:20px}.specimen ol{font-size:38px}
/* JOIN も同じ考え方。使える幅 = 100vw - 22px×2、8 文字。(100vw-44px)÷8 に 6% の余裕 = 11.75vw - 5.2px。 */
.join-copy{padding:124px 22px 90px}.join-copy h2{font-size:min(calc(11.75vw - 5.2px),65px)}
.seed-rail{left:23px}
.seed-list li{grid-template-columns:48px minmax(0,1fr);gap:2px 18px;padding:24px 0}
.glyph{grid-row:1/4;align-self:start;width:48px;margin-top:4px}
.seed-list b{grid-column:2;grid-row:1;font-size:20px}
.seed-list h3{grid-column:2;grid-row:2;margin-top:4px;font-size:27px}
.seed-list small{grid-column:2;grid-row:3}
footer{grid-template-columns:1fr;gap:8px}
}
@media(max-width:560px){.stats{grid-template-columns:1fr;gap:16px}.stats>div{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:baseline;gap:14px}.stats dd{margin:0}.seats{letter-spacing:.1em}.seat-row{width:112px;margin-left:8px}}
@media(max-width:720px){.lab-nav>a{font-size:14px;letter-spacing:-.02em}}
.lab-log{background:#16120f;padding:13vh 5vw;scroll-margin-top:104px}.log-in{max-width:1100px;margin:0 auto}.log-eyebrow{font-size:13px;letter-spacing:.18em;color:#74f2d4;margin:0}.log-lead{max-width:620px;line-height:2;font-size:16px;color:#e8e2d6;margin:0 0 clamp(34px,5vw,64px)}.log-list{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff26}.log-list li{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) 92px 84px 108px minmax(0,1.4fr);gap:18px;align-items:baseline;padding:24px 0;border-bottom:1px solid #ffffff26}.log-list li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:var(--w,20%);background:linear-gradient(90deg,#74f2d4,#74f2d400);clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.3,0,.2,1) .5s}.log-list li.seen::after{clip-path:inset(0)}.log-list b{font:clamp(20px,2.2vw,30px)/1.4 var(--hand);color:#f7f1e5}.log-list span{font-size:15px;color:#74f2d4;font-variant-numeric:tabular-nums}.log-list small{font-size:14px;line-height:1.8;color:#b9b2a4}.log-note{margin:clamp(28px,4vw,48px) 0 0;font-size:14px;line-height:1.9;color:#b9b2a4;max-width:620px}@media(max-width:900px){.log-list li{grid-template-columns:1fr 1fr 1fr;gap:8px 14px}.log-list b{grid-column:1/-1}.log-list small{grid-column:1/-1;margin-top:4px}}
/* 触った時の反応。指で触る画面では :hover が居座って外れないので、必ず囲う。 */
@media(hover:hover){
.lab-nav nav a:hover{color:#74f2d4}
.next:hover span{border-bottom-color:currentColor}
.taste-card:hover figure{transform:translateY(-7px)}
.taste-card:hover .plot polygon{fill-opacity:.34}
.note-card:hover{transform:translateY(-9px)}
.join-copy a:hover{border-bottom-color:#16120f}
.legend li:hover b{color:#ffdd45}
}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--dx,10px),var(--dy,-20px))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bloom{0%,100%{transform:scale(.88)}50%{transform:scale(1.07)}}
@keyframes blink{0%,58%{background-color:#f15d3b}59%,100%{background-color:#f15d3b40}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes scan{0%{transform:translateX(0)}92%,100%{transform:translateX(544px)}}
@keyframes flow{from{background-position:0 -30%}to{background-position:0 130%}}
@keyframes sway{0%,100%{rotate:var(--r,0deg)}50%{rotate:calc(var(--r,0deg) + .6deg)}}
@keyframes pulse{0%,100%{transform:scale(.82)}50%{transform:scale(1.24)}}
@keyframes breathe{0%,100%{transform:scale(.965)}50%{transform:scale(1.02)}}
@keyframes seat{0%,100%{stroke-opacity:.42}50%{stroke-opacity:.96}}
/*PHRASE-WRAP-20260825 ── 見出しは「意味の切れ目」でしか折り返さない
(オーナー 2026-08-25 指摘「見出しが中途半端なところで改行が入っている。人の目にとても不自然」)。
ブラウザに折り返し位置を選ばせない。手は 3 つ。
(1)
で切る。もともと全ての見出しがこれを 1 箇所ずつ持っている。
#system「切る。待つ。味わう。」だけは 2 箇所に増やして 3 行に固定した(METHOD / 01–03 の三手順)。
ここで span を使わなかったのは、紙のカードが rotate(-2deg) しているため。傾いた面では
1 行ごとの箱の外接矩形が上下で食い込み、重なり検査に 1〜2 件の赤が出る(実測 810〜1266px²)。
(2)
を持たない見出し(#taste「味を、五つの角で書く。」)は、読点で切った「かたまり」を
span.phrase に入れ inline-block にする。かたまりは丸ごと次の行へ落ちるので途中では切れず、
広い画面では 1 行に戻る。span を箱として使うので display は必ず宣言する。
(3) いちばん長いかたまりが 1 行に収まる大きさまで字を下げる。
Yomogi の全角は送り = 1em ちょうど(実測 44px×6 文字 = 264.0px / 77.76px×6 = 466.6px)。
.lab-block の使える幅 = 100vw − 5vw×2 = 90vw。→ 上限 = 90vw ÷ 文字数。
下の係数はその上限に 6% の余裕を足した値(検査の下限と設計値を同値にしない)。
8 文字 (#culture「動いているのは、」/ #taste「五つの角で書く。」) → 10.8vw
9 文字 (#curve「線が違えば別の味。」/ #seed「いちばん古い菌は、」) → 9.6vw
10 文字 (#notes「だいたい余白にある。」) → 8.64vw
#log「数字で残す、」は 6 文字 × 44px = 264px で 320 幅(288px)に収まるので触らない。
ヒーロー H1 と #join H2 は上の @media(max-width:720px) 側で同じ考え方で押さえている。
NOTES の紙カードの小見出し(h3)は 30px → 25px(上の .note-card h3)。
★2026-08-25: 広い画面用に置いていた .culture h2 の個別指定(上限 70px)は廃止した。
帯節の見出しを 1 つの規則(.lab-block h2,.lab-log h2 = 上限 70px)へ揃えたので不要になった。
確認 = node lines.cjs --sel "main h1, main h2, main h3" */
h2 .phrase{display:inline-block}
@media(max-width:560px){
.culture h2,.taste h2{font-size:min(10.8vw,44px)}
.curve h2,.seed h2{font-size:min(9.6vw,44px)}
.notes h2{font-size:min(8.64vw,44px)}
}
/* JOIN の大見出しは、共有の shared-quality.css が ≤480 で 32px!important に潰している。
その規則は 17 個のセレクタを巻き込み他の制作例 18 本に波及するので共有側は触らない。
07 だけに効く全長パス + !important で戻す(オーナー指示により 42px を超えない)。 */
@media(max-width:480px){
html body div#main main section#join.photo-chapter.chapter-four div.join-copy h2{font-size:min(calc(11.75vw - 5.2px),42px)!important}
}
/*/PHRASE-WRAP-20260825*/
/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
対象 = **実測で 2 行以上に折り返し、行間が 1.06 未満、かつ日本語を含む**見出しだけ。
日本語は文字が全角の枠いっぱいなので 1.00 = 行と行が接する。1.00〜1.05 は実質接している。
1.06 以上は既に隙間が見えており標準域なので触らない(= 空けすぎない)。
欧文だけの見出しも触らない(枠いっぱいという理屈が当てはまらず、実測で他の部品と重なった)。
セレクタは実際に描画された要素から機械で取った全長パス。共有 shared-quality.css が
site.css の**後**に読まれて `!important` で勝つため、短いセレクタでは当たらない。
生成 = apply_heading_leading_20260811.py / 確認 = scan_all_headings_20260811.cjs --tag after
0.90 → 1.25 / 3行 / 味は、見えない動き。
0.90 → 1.25 / 2行 / 完成品ではなく、途中を食べる夜。
1.05 → 1.25 / 3行 / 切る。待つ。味わう。
★2026-08-25: 1 本目のセレクタから .is-visible を外した。.is-visible は site.js が
スクロールのたびに毎フレーム付け外しする一時クラスで、これを噛むと見出しが画面に写ったまま
行間が 162px ⇄ 116.64px を往復し、高さが 90.7px、天が 81.7px 跳ぶ(1440x900 で実測。
是正前の掛かり方を後乗せで再現して 90.7px の跳びを再確認済)。line-height に transition は
無いので一瞬で飛ぶ。他の 2 本には一時クラスが入っていない = 1 本だけ漏れ込んでいた。
*/
html body div#main main section.photo-chapter.active div.label h1{line-height:1.25!important}
html body div#main main section#join.photo-chapter.chapter-four div.join-copy h2{line-height:1.25!important}
html body div#main main section#system.photo-chapter.chapter-two div.notebook h2{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/
/* 画面の外へ出た節の動きを止める。animation の一括指定が play-state を running へ戻すので、
この規則はファイルの末尾に置き、id セレクタ + !important で当てる(素通りを実測済)。 */
html body div#main main section.off *{animation-play-state:paused!important}