*{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}
:root{--bg:#f6f4ef;--ink:#242526;--body:Inter,sans-serif;--serif:"Shippori Mincho",serif;
--paper:#fffdf8;--warm:150,142,126}
.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}
.demo a{text-decoration:underline;text-underline-offset:3px;margin-left:10px}
.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}
.eyebrow{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
/* 見出しの改行は、作者が宣言した位置でだけ起こす。
.line が「ここで切る / ここでは切らない」の宣言そのものなので折り返しを禁じる。
従って .line が入る見出しは、どの画面幅でも 1 行に収まる大きさに抑えてある。 */
.line{display:block;white-space:nowrap}
/* 本文の改行も、作者が宣言した位置でだけ起こす。
日本語の本文を素の文字列のまま流すと、どの画面幅でも語の途中で割れる
(2026-08-27 実測: 「ゆっく/り」「席を立た/ずに」「初めてでし/た。」)。
そこで文節ごとに .p で包み、inline-block にして「文節の中では割れない」形にする。
・word-break:auto-phrase は Chrome にしか無いので、それだけに頼らない
・.p と .p のあいだに改行や空白を書かない(半角空白が字間になる)
・inline-block は「箱と箱のあいだ」で割れないだけで、
文節そのものが器より長ければ箱の中で割れる。だから いちばん長い文節が
いちばん狭い画面で 1 行に収まる大きさに文字を抑える(#story と #day がその実例)。 */
.p{display:inline-block}
.lead,.intro-note{text-wrap:pretty}
/* ---- 出現演出 ----------------------------------------------------------
★ 2026-08-27 の作り直し(是正3):
以前は「30px 持ち上げる(.rise)」と「下から覆いを外す(.rise-wipe)」の 2 種類しか無く、
演出の付く 14 要素のうち 13 件(93%)がその 2 種だけだった。しかも .rise は
直前 6 本(制作例 03/06/07/09/12/14)で使い切った語彙そのもので、秒数を延ばしただけだった。
・文字のかたまり(見出し・本文・アイブロウ・序文)からは演出を全部外した。
動くのは写真と罫だけにする。
・写真の動き方は「紙が置かれる」= 傾きが戻る(rotate)+ 影が着地する(box-shadow)
+ 覆いが外れる(clip-path)の 3 つを同時に。持ち上げ(translate)は使わない。
隠す側は html.js の中に置く。site.js が落ちたら本文は全部見えたまま残る。
:where() で詳細度を 0 にしないと、開く側(.seen)に勝って永久に閉じたままになる。
★ 隠す側を :not(.seen) で書いてあるのは詳細度の都合。影の着地先は要素ごとに
.print figure / .day-shot / .place figure / .fair-shot が持っており、
その詳細度は (0,1,1) か (0,1,0)。隠す側を :where(html.js) .settle = (0,1,0) で書くと
着地先の影に負けて「浮いた影」が一度も出ない(= 影が着地する演出が丸ごと死ぬ)。
:not(.seen) を足すと (0,2,0) になり、隠す側だけが勝つ。
隠すのに opacity は使わない(要素が「見えない」と判定されて節ごと消える)。
同じ property に animation と transition を同時に載せない(触った瞬間に瞬間移動する)。 */
:where(html.js) .settle:not(.seen){
rotate:var(--tilt,-1.7deg);
clip-path:inset(-46px -46px 100% -46px);
box-shadow:0 46px 66px -32px rgba(var(--warm),.3),0 1px 0 rgba(255,255,255,.9) inset}
.settle{transition:
rotate 3.2s cubic-bezier(.2,.72,.24,1),
clip-path 2.7s cubic-bezier(.22,.62,.24,1),
box-shadow 3.2s cubic-bezier(.2,.72,.24,1)}
.settle.seen{rotate:0deg;clip-path:inset(-46px)}
/* 罫が引かれる。天から地へ 2.8 秒。文字ではないので動かしてよい。 */
:where(html.js) .ink{scale:1 0}
.ink{transform-origin:top;transition:scale 2.8s cubic-bezier(.22,.62,.24,1) .45s}
.ink.seen{scale:1 1}
/* 綴じ目から外へ開く覆い(見開き用)。 */
:where(html.js) .open-l{clip-path:inset(0 0 0 100%)}
:where(html.js) .open-r{clip-path:inset(0 100% 0 0)}
.open-l,.open-r{transition:clip-path 3.2s cubic-bezier(.3,.6,.2,1)}
.open-l.seen,.open-r.seen{clip-path:inset(0)}
/* ---- 表紙 --------------------------------------------------------------
★ 2026-08-27 の作り直し(是正1):
以前は写真の器の幅を min(932px,72vw,calc((100svh - 340px) * 1.5)) と書いていた。
= 写真の幅を「画面の高さ」から決めていた。実測でこうなっていた:
844×390(横向き iPhone)写真 75×50 / 852×393 写真 80×53 / 926×428 写真 132×88
1440×700(低いノート) 写真 540×360(1440×900 の 840×560 より 36% 小さい)
縦 340px 以下では式が 0 以下になる。1 カラム化は max-width:720px にしか無かったので
721〜932px の帯はこの式のまま残っていた。
直した形:
・幅は幅だけで決める( min(932px,100%) )。高さの項は既定から消した。
・一画面に収めるのは「画面が 700px 以上あるとき」だけ。低い画面では収めようとせず、
素直に巻いて見せる(@media(min-height:700px) の中に閉じ込めた)。
この中でだけ高さの上限が掛かるので、式が 0 以下になる形は存在しない
(最小でも 700×1.1 - 124 = 646px)。
・上限は「引き算」ではなく「掛け算 + 定数」で書く。表紙の縦の内訳は
上余白 11vh + 序文までの空き 7vh + 下余白 7vh = 25vh が画面に比例し、
序文の高さ 63px と台紙の縁 2×22px だけが固定。だから
写真の高さ ≦ 0.75×画面高 - 107 → 器の幅 ≦ 1.125×画面高 - 116。
安全側に 1.1×画面高 - 124 を採った(1440×900 で余り 19px、1440×700 で余り 14px)。
・器は 3:2 のまま。台紙(--mount)は器の内側の padding なので、
写真そのものは常にちょうど 3:2 = 切り落とし 0%。
★ 台紙(是正2): 以前 .slider は地色 rgb(236,232,224) の素の長方形で、余白 0 / 影なしだった。
ここで紙に乗せる。padding が紙の縁、box-shadow が紙の落とす影。 */
.album-hero{position:relative;max-width:100vw;overflow:hidden;
padding:clamp(72px,11vh,140px) clamp(0px,calc((100vw - 620px) * .16),12vw) clamp(40px,7vh,86px);
display:flex;flex-direction:column;justify-content:center}
.hero-stage{position:relative;container-type:inline-size;
--mount:clamp(10px,1.5vw,24px);
width:min(932px,100%);margin:0 auto;
background:var(--paper);padding:var(--mount);
box-shadow:0 34px 64px -34px rgba(var(--warm),.62),0 2px 3px -2px rgba(var(--warm),.34),
0 1px 0 rgba(255,255,255,.95) inset}
@media(min-height:700px){
.album-hero{min-height:100svh}
.hero-stage{width:min(932px,100%,calc(100svh * 1.1 - 124px))}
}
.slider{position:relative;z-index:1;width:100%;aspect-ratio:3/2;overflow:hidden;background:#ece8e0}
.slider figure{position:absolute;inset:0;margin:0;z-index:1;clip-path:inset(0 100% 0 0)}
.slider figure.leaving{z-index:2;clip-path:inset(0 0 0 0)}
.slider figure.active{z-index:3;clip-path:inset(0 0 0 0);animation:album-wipe 3s cubic-bezier(.62,.02,.28,1) both}
/* 読み込み直後の 1 枚目だけは覆いを走らせない。
走らせると 3 秒のあいだ器の右半分が地色のままになり、
最初に見えるものが「半分読み込めていない箱」になる(2026-08-27 実測)。
光の帯(.sweep)は初回も 1 度だけ走るので、見せ場は残る。
2 枚目以降の切り替えでは .first を site.js が外すので、覆いはそのまま効く。 */
.slider figure.active.first{animation:none}
@keyframes album-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* 撮影メモは必ず写真の右下。左下だと縦組みの見出しの尾と重なる
(2026-08-27 実測: 1440×700 で 見出しの下端 317px と メモの上端 305px が噛んでいた)。
★ position:absolute を書き落とすと、メモは写真の下へ流れて .slider の overflow に
切り落とされ、丸ごと消える(2026-08-27 実測。既存の定規はどれも .slider figcaption を
見ていないので緑のまま通った)。位置を指定する規則は必ず position とセットで書く。
共有の安全層が left/right/bottom を !important で決めているので、
15 側から全長パス + !important で上書きする。 */
.album-hero .slider figcaption{position:absolute;z-index:8;
left:auto!important;right:12px!important;bottom:12px!important;
font-size:12px;letter-spacing:.14em}
/* 窓から差す光。6〜8 秒かけて位置がゆっくり変わる。写真の見え方を壊さない濃さ。 */
.slider .daylight{position:absolute;inset:-12%;z-index:4;pointer-events:none;
background:
radial-gradient(52% 46% at 24% 8%,rgba(255,246,224,.34),rgba(255,246,224,0) 66%),
radial-gradient(40% 58% at 80% 92%,rgba(36,37,38,.17),rgba(36,37,38,0) 70%),
linear-gradient(104deg,rgba(255,247,229,.17) 0 24%,rgba(255,247,229,0) 54%);
animation:album-daylight 7.4s ease-in-out infinite alternate}
@keyframes album-daylight{
from{translate:-2.4% -1.6%;scale:1}
to{translate:2.8% 2%;scale:1.06}
}
/* 光の帯。写真の切り替えと同じ長さ・同じ緩急で走り、帯の前縁が「めくれ目」を連れて行く。
幅を持たせて線にしない。translate は帯の幅に対する割合なので、
前縁の位置 = 1.04 × 進み具合 になり、覆いの縁とほぼ重なる。 */
.slider .sweep{position:absolute;left:0;top:-14%;bottom:-14%;width:26%;z-index:6;pointer-events:none;
translate:-100% 0;rotate:-4deg;filter:blur(7px);
background:linear-gradient(97deg,
rgba(255,251,240,0) 0%,
rgba(255,251,240,.08) 22%,
rgba(255,252,244,.30) 46%,
rgba(255,254,250,.62) 66%,
rgba(255,253,246,.72) 79%,
rgba(255,251,240,.28) 92%,
rgba(255,251,240,0) 100%)}
.slider .sweep.run{animation:album-sweep 3s cubic-bezier(.62,.02,.28,1) both}
@keyframes album-sweep{from{translate:-100% 0}to{translate:300% 0}}
/* 縦組みの大見出し。
★ 2026-08-27 の直し(是正1): 位置も大きさも「写真そのもの」から決める。
以前は left:78px + translate:-100% の固定値で、写真の左へ 31px(768/1024/844/852/926)
〜 74px(1440)はみ出していた。画面の幅や高さから決めていたので、
写真が縮んだときだけ見出しが取り残されて外へ出ていた。
.hero-stage を寸法の問い合わせ先(container-type:inline-size)にしたので、
cqw = 写真の幅の 1% になる。位置も大きさも罫の長さも全部 cqw で書けば、
どの画面でも見出しは必ず写真の内側に収まる。
計算の内訳(いちばん長い行 = 8 文字 / 字送り .1em / 行間 1.85 / 2 行目の頭下げ 1.5em):
見出しの高さ = max(8×1.1em, 1.5em + 7×1.1em) = 9.2em
写真の高さ = 幅 / 1.5 = 66.7cqw
上端 5cqw + 9.2 × 6.2cqw = 62.0cqw ≦ 66.7cqw → 必ず内側
見出しの幅 = 2 行 × 1.85em = 3.7em = 22.9cqw、左端 5cqw と足して 27.9cqw ≦ 100cqw
cqw を解さない古いブラウザには vw 版が残る(font の一括指定が先に効く)。
写真の上でも読めるように、文字のうしろへ「紙の色の光」を敷く。
色は足していない(--bg と同じ色をそのまま薄く広げているだけ)。
2026-08-27 実測(3 枚とも / 5 幅): 芯の下位 5% の最小 = 4.63(320px・3 枚目)。床 3.0。 */
.title-anchor{position:absolute;z-index:5;
left:calc(var(--mount) + 5cqw);top:calc(var(--mount) + 5cqw)}
.title-anchor::before{content:"";position:absolute;z-index:-1;inset:-7% -42%;filter:blur(14px);
background:radial-gradient(64% 78% at 52% 48%,
rgba(248,246,241,.95),rgba(248,246,241,.84) 40%,rgba(248,246,241,.52) 66%,
rgba(248,246,241,.18) 86%,rgba(248,246,241,0) 100%)}
/* 写真が大きいとき(器の幅 520px 以上)は光を弱める。
同じ濃さのままだと、日暮れの暗い写真の上で「白い染み」に見える(2026-08-27 目視)。
狭い画面では写真が小さく、文字も小さいので濃いままにする
(実測: 320px・3 枚目の芯の下位 5% = 4.63。床 3.0)。 */
/* ★ どこまで弱められるかは目でなく画素で決めた。3 枚目(日暮れ)・幅 768/1440/1920 で
見出しの芯の下位 5% を測った実測値(床 3.0):
.95 系 = 11.6〜11.8 / .88 系 = 7.9〜8.3 / .80 系 = 4.1〜5.1 /
.72 系 = 3.0〜3.5(768 で 2.99 = 床と同値)/ .62 系 = 1.2〜1.3(床割れ)
床と同値の .72 は採らない(検査の下限と設計値を同値にすると緑と赤を行き来する)。
いちばん弱くて余裕が残る .80 系を採用した。 */
@container (min-width:520px){
.title-anchor::before{inset:-6% -38%;filter:blur(16px);
background:radial-gradient(64% 76% at 52% 48%,
rgba(248,246,241,.8),rgba(248,246,241,.66) 42%,rgba(248,246,241,.38) 68%,
rgba(248,246,241,.12) 86%,rgba(248,246,241,0) 100%)}
}
.vertical-title{position:relative;margin:0;height:max-content;
writing-mode:vertical-rl;font:600 clamp(17px,4.4vw,44px)/1.85 var(--serif);letter-spacing:.1em;
font-size:clamp(17px,6.2cqw,44px);
text-shadow:
0 0 3px rgba(246,244,239,.96),
0 0 7px rgba(246,244,239,.94),
0 0 13px rgba(246,244,239,.9),
0 0 24px rgba(246,244,239,.82),
0 0 42px rgba(246,244,239,.66),
0 0 68px rgba(246,244,239,.45)}
.vertical-title .line{margin:0}
.vertical-title .line + .line{padding-inline-start:1.5em}
.title-rule{display:block;position:absolute;z-index:5;right:calc(100% + 2.6cqw);top:0;
width:1px;height:58cqw;
background:linear-gradient(180deg,rgba(36,37,38,0),rgba(36,37,38,.5) 16%,rgba(36,37,38,.06))}
/* 頁の番号は台紙の下。写真の右端に揃える(写真の中には置かない = 撮影メモと噛むため)。 */
.pager{position:absolute;z-index:5;right:var(--mount);top:calc(100% + 12px);display:flex;gap:10px}
.pager button{border:0;border-bottom:1px solid currentColor;background:none;padding:9px 2px;cursor:pointer;
font:600 12px/1 var(--body);letter-spacing:.12em;
color:color-mix(in srgb,var(--ink) 42%,transparent);transition:color .5s ease}
.pager button[aria-current="true"]{color:var(--ink)}
@media(hover:hover){.pager button:hover{color:var(--ink)}}
.intro-note{max-width:440px;margin:clamp(52px,7vh,84px) auto 0;line-height:2.1;text-align:center;font-size:15px}
/* ---- 節と節のあいだに重なる紙 -------------------------------------------
画像は使わない。色も足さない。地色 #f6f4ef と同じ暖かい白の中で、明度差だけで作る。
★ 2026-08-27 実測の直し: 以前は筋も繊維も影も rgba(36,37,38,…) = 冷たい黒だった。
暖かい地色の上に冷たい灰を薄く置くと、離れて見たとき緑がかった滲みに見える。
筋・繊維・影を全部「暖かい灰 rgba(150,142,126,…)」へ寄せ、色相の事故を消した。
★ 筋は 1px の毛髪線をやめ、縁のぼけた帯にした(細すぎて離れると消えていた)。
ただし硬い縁で明暗を交互に置くと「よろい戸」に見えるので(2026-08-27 実測)、
明るい筋は使わず、暗い側だけを 2.6px かけて 0 へ落とす。
細かい簀の目(--pitch)の上に、糸目(その 5.2 倍の間隔)を重ねて奥行きを出す。
★ 手漉きの「むら」を大きな暈しで 3 つ入れ、平らな板に見えないようにした。
★ 紙どうしの重なりは、接している所の濃い影 + 遠くのやわらかい影の 2 段で出す。
★ 2026-08-27 の作り直し(是正2): 継ぎ目は 6 箇所あるのに紙は 1 箇所にしか無かった。
6 箇所すべてに入れる。ただし同じ 3 枚の使い回しにはしない ──
簀の目の間隔・破れの位置・紙の置き方・視差の量を継ぎ目ごとに変えてある(k1〜k6)。
#story(水色)の前後 = k5 / k6 だけは、紙が水色の上に浮いて見えないよう
継ぎ目の箱そのものを水色に重ねない(k5 は下の余白 0 / k6 は上の余白 0)。
k5 は破れた縁を「上」に付け替えてある(下は水色に隠れる側なので直線でよい)。
ずれる量は site.js が data-depth から出す(視差)。 */
.paper-seam{position:relative;z-index:2;display:block;overflow:hidden;pointer-events:none;
height:clamp(140px,16vw,240px);margin-block:clamp(-84px,-7vw,-44px)}
.paper-seam .sheet{--pitch:9px;display:block;position:absolute;
background-image:
repeating-linear-gradient(91deg,
rgba(var(--warm),.075) 0px,
rgba(var(--warm),0) 2.6px,
rgba(var(--warm),0) var(--pitch)),
repeating-linear-gradient(91deg,
rgba(var(--warm),.05) 0px,
rgba(var(--warm),0) 3.4px,
rgba(var(--warm),0) calc(var(--pitch) * 5.2)),
linear-gradient(76deg,rgba(var(--warm),0) 0 31.2%,rgba(var(--warm),.1) 31.2% 31.5%,rgba(var(--warm),0) 31.5%),
linear-gradient(103deg,rgba(var(--warm),0) 0 58%,rgba(var(--warm),.085) 58% 58.28%,rgba(var(--warm),0) 58.28%),
linear-gradient(84deg,rgba(var(--warm),0) 0 72.4%,rgba(var(--warm),.095) 72.4% 72.72%,rgba(var(--warm),0) 72.72%),
radial-gradient(44% 62% at 18% 32%,rgba(255,255,253,.9),rgba(255,255,253,0) 72%),
radial-gradient(38% 52% at 74% 24%,rgba(255,255,253,.72),rgba(255,255,253,0) 74%),
radial-gradient(48% 58% at 56% 84%,rgba(226,220,208,.5),rgba(226,220,208,0) 76%),
linear-gradient(163deg,rgba(255,255,252,.96),rgba(238,234,225,.72) 54%,rgba(255,253,248,.94));
box-shadow:
0 2px 2px -1px rgba(var(--warm),.3),
0 15px 26px -16px rgba(var(--warm),.52),
0 1px 0 rgba(255,255,255,.92) inset}
/* 破れた縁が「下」に来る形(既定)。3 枚それぞれ破れ方が違う。 */
.paper-seam .s1{clip-path:polygon(0 0,100% 0,100% 91%,86% 96%,71% 89%,57% 97%,43% 90%,29% 96%,14% 89%,0 95%)}
.paper-seam .s2{clip-path:polygon(0 0,100% 0,100% 94%,88% 88%,74% 96%,60% 89%,45% 97%,31% 90%,16% 96%,0 90%)}
.paper-seam .s3{clip-path:polygon(0 0,100% 0,100% 89%,84% 95%,68% 88%,52% 95%,36% 88%,19% 95%,0 89%)}
/* 継ぎ目 1(表紙 → 一日の流れ)*/
.k1 .s1{--pitch:10px;left:-8%;width:64%;top:10%;height:66%;rotate:-1.2deg;background-color:rgba(255,253,247,.82)}
.k1 .s2{--pitch:13px;right:-10%;width:56%;top:26%;height:64%;rotate:1.5deg;background-color:rgba(249,245,237,.84)}
.k1 .s3{--pitch:7px;left:24%;width:40%;top:-4%;height:72%;rotate:.4deg;background-color:rgba(255,255,252,.76)}
/* 継ぎ目 2(一日の流れ → 支度の細部)*/
.k2 .s1{--pitch:15px;left:-12%;width:52%;top:2%;height:70%;rotate:1.1deg;background-color:rgba(253,250,243,.86)}
.k2 .s2{--pitch:8px;right:-6%;width:62%;top:22%;height:62%;rotate:-1.7deg;background-color:rgba(255,255,250,.78)}
.k2 .s3{--pitch:11px;left:38%;width:32%;top:14%;height:58%;rotate:.7deg;background-color:rgba(247,243,235,.8)}
/* 継ぎ目 3(支度の細部 → 場所)*/
.k3 .s1{--pitch:6px;left:4%;width:46%;top:18%;height:60%;rotate:-.9deg;background-color:rgba(255,254,249,.8)}
.k3 .s2{--pitch:12px;right:-14%;width:58%;top:0;height:74%;rotate:1.2deg;background-color:rgba(250,246,239,.85)}
.k3 .s3{--pitch:9px;left:-6%;width:36%;top:30%;height:56%;rotate:-1.9deg;background-color:rgba(255,253,246,.74)}
/* 継ぎ目 4(場所 → 長いテーブル)*/
.k4 .s1{--pitch:14px;left:-6%;width:58%;top:24%;height:62%;rotate:1.6deg;background-color:rgba(252,249,242,.83)}
.k4 .s2{--pitch:7px;right:4%;width:42%;top:6%;height:68%;rotate:-1.1deg;background-color:rgba(255,255,251,.77)}
.k4 .s3{--pitch:10px;left:30%;width:48%;top:-6%;height:70%;rotate:.5deg;background-color:rgba(248,244,236,.86)}
/* 継ぎ目 5(長いテーブル → 手紙・水色)。
下の余白を 0 にして、継ぎ目の箱が水色に 1px も重ならないようにする。
紙は箱の底(= 水色の上端)まで届き、そこで切り落とされる = 水色の頁が紙を覆って見える。
破れた縁は「上」に付け替える。 */
.paper-seam.k5{height:clamp(118px,13vw,196px);margin-bottom:0}
.k5 .sheet{clip-path:polygon(0 9%,14% 3%,29% 11%,43% 2%,57% 10%,71% 4%,86% 11%,100% 4%,100% 100%,0 100%)}
.k5 .s1{--pitch:11px;left:-8%;width:60%;top:24%;height:76%;rotate:-1deg;background-color:rgba(255,253,247,.84)}
.k5 .s2{--pitch:16px;right:-10%;width:54%;top:12%;height:88%;rotate:1.3deg;background-color:rgba(250,246,238,.8)}
.k5 .s3{--pitch:8px;left:30%;width:40%;top:34%;height:66%;rotate:-.5deg;background-color:rgba(255,255,252,.75)}
/* 継ぎ目 6(手紙・水色 → 相談)。上の余白を 0。紙は水色の下端から出てくる。 */
.paper-seam.k6{height:clamp(118px,13vw,196px);margin-top:0}
.k6 .s1{--pitch:9px;left:-10%;width:56%;top:0;height:74%;rotate:1.4deg;background-color:rgba(253,250,244,.85)}
.k6 .s2{--pitch:13px;right:-8%;width:50%;top:0;height:62%;rotate:-1.5deg;background-color:rgba(255,255,251,.79)}
.k6 .s3{--pitch:6px;left:26%;width:44%;top:0;height:80%;rotate:.6deg;background-color:rgba(248,245,237,.82)}
/* ---- 一日の流れ --------------------------------------------------------
★ 2026-08-27 の作り直し(是正3):
以前は「左 3 割が上から下まで完全に空 + 右に 1px の罫線で区切った 4 行の表」だった。
行ごとの意匠が何も無く、ページ中いちばんフラットな画面になっていた。
直した形 =「一冊に貼られた 4 枚の短冊」。
・一冊 = .daylist(紙の台紙。節の幅いっぱいに広げて、空いていた左を埋める)
・短冊 = .strip(一枚ずつ角度と幅を変える。等間隔のカードにも数字バッジにもしない)
・1px の罫線 → 紙の折り筋(暗い線 + すぐ下の明るい返し)に置き換え
・空いていた左には縦組み明朝の時刻の目盛りを通す(縦の罫 + 短い目盛り + 縦書きの時刻) */
.daybook{padding:15vh 7vw}
.daybook header{margin:0 0 clamp(34px,4.4vw,64px)}
.daybook h2,.fair h2{font:400 clamp(55px,7vw,95px)/1.2 var(--serif);margin:0}
/* 見出しの改行は
ではなく .line で宣言する(#details / #places / #table と同じ形)。
.line は折り返さないので、宣言した 2 行(どちらも 7 文字)が いちばん狭い画面でも
1 行に収まる大きさまで文字を下げる。器 = 100vw - 14vw(左右の余白)で、
720px 以下では見出しがその全幅を使う。縦の巻き取り棒 15px を引いても収まるよう
11vw を上限に採った(2026-08-27 実測: 320 で 必要 246.4px / 器 275.2px、棒込みで余り 13.8px)。
min() の外側は今までの式そのままなので、500px 以上では大きさが 1px も変わらない
(実測: 1024=71.68px / 1366=95px / 1920=95px。いずれも直す前と同値)。
共有の安全層が今後 .daybook h2 を触っても効き続けるよう、全長パス + !important で書く。 */
#day.daybook h2{font-family:var(--serif)!important;font-weight:400!important;
font-size:min(clamp(55px,7vw,95px),11vw)!important;line-height:1.2!important;margin:14px 0 0}
.daylist{--pad:clamp(20px,3vw,46px);--vpad:clamp(26px,3.2vw,54px);
--hour:clamp(62px,7.6vw,116px);--gap:clamp(16px,2.2vw,32px);
position:relative;background:var(--paper);padding:var(--vpad) var(--pad);
box-shadow:0 34px 60px -36px rgba(var(--warm),.62),0 2px 3px -2px rgba(var(--warm),.3),
0 1px 0 rgba(255,255,255,.95) inset}
.daylist .tick-rule{display:block;position:absolute;z-index:1;width:1px;
left:calc(var(--pad) + var(--hour) + var(--gap) * .5);top:var(--vpad);bottom:var(--vpad);
background:linear-gradient(180deg,rgba(var(--warm),0),rgba(var(--warm),.62) 7%,
rgba(var(--warm),.5) 90%,rgba(var(--warm),0))}
.daylist ol{list-style:none;margin:0;padding:0}
.daylist li{position:relative;display:grid;
grid-template-columns:var(--hour) minmax(0,1fr);column-gap:var(--gap);
align-items:start;padding:clamp(22px,2.6vw,40px) 0}
/* 折り筋。暗い線のすぐ下に明るい返しを置くと、紙が一度折られた跡に見える。 */
.daylist li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(180deg,
rgba(var(--warm),.34) 0 1px,rgba(255,255,255,.94) 1px 2.4px,rgba(var(--warm),0) 2.4px)}
/* 縦の罫を横切る短い目盛り。 */
.daylist li::after{content:"";position:absolute;z-index:2;
top:calc(clamp(22px,2.6vw,40px) + .8em);
left:calc(var(--hour) + var(--gap) * .5 - 7px);width:15px;height:1px;
background:rgba(var(--warm),.8)}
.daylist .hour{display:block;justify-self:end;margin-right:calc(var(--gap) * .5 + 12px);
writing-mode:vertical-rl;text-orientation:upright;
font:400 clamp(16px,1.6vw,23px)/1.55 var(--serif);letter-spacing:.06em;
color:color-mix(in srgb,var(--ink) 62%,transparent)}
/* 「09」「00」は 2 桁を 1 文字ぶんに畳む(縦組みの数字の組み方)。
畳まないと 09:00 が 5 文字ぶんの縦長になり、短冊より背が高い棒になる(2026-08-27 実測)。 */
.daylist .hour b{font-weight:400;text-combine-upright:all}
/* 短冊は器いっぱいに伸ばさず、中身の幅に合わせて切った紙にする。
伸ばすと「文字の左端に少しだけ字が乗った白い横棒」が 4 本並ぶ(2026-08-27 実測)。
1 枚ずつ 角度・左の貼り位置・右の余白を変えて、手で貼った紙片に見せる。 */
.daylist .strip{position:relative;width:max-content;max-width:100%;
background:linear-gradient(178deg,rgba(255,255,255,.94),rgba(255,255,255,.5));
padding:clamp(14px,1.6vw,24px) clamp(16px,1.9vw,28px);
box-shadow:0 12px 20px -15px rgba(var(--warm),.8),0 1px 0 rgba(255,255,255,.92) inset}
.daylist li:nth-child(1) .strip{rotate:-.5deg;margin-left:0;padding-right:clamp(20px,5vw,84px)}
.daylist li:nth-child(2) .strip{rotate:.42deg;margin-left:14px;padding-right:clamp(18px,3.2vw,52px)}
.daylist li:nth-child(3) .strip{rotate:-.34deg;margin-left:5px;padding-right:clamp(22px,6.2vw,108px)}
.daylist li:nth-child(4) .strip{rotate:.55deg;margin-left:22px;padding-right:clamp(20px,4.4vw,74px)}
.daybook h3{font:400 28px var(--serif);margin:0}
.daybook .strip p{margin:8px 0 0;line-height:2}
/* その日の写真も紙に乗せる(以前は台紙も余白も影も無い素の長方形だった)。 */
.day-shot{--tilt:1.1deg;max-width:900px;margin:clamp(48px,7vw,96px) 0 0 auto;
background:var(--paper);padding:clamp(9px,1.1vw,18px);
box-shadow:0 28px 52px -30px rgba(var(--warm),.66),0 1px 0 rgba(255,255,255,.9) inset}
.day-shot .shot{display:block;aspect-ratio:3/2;overflow:hidden;background:#ece8e0}
.day-shot figcaption{margin-top:clamp(7px,.8vw,12px);text-align:right;font-size:12px;letter-spacing:.18em}
/* ---- 支度の細部 --------------------------------------------------------
台紙に貼った 3 枚の写真が、角度と高さをずらして重なる。等間隔に並べない。
ずれ(視差)は入れ物の .print が持ち、覆い(clip-path)と傾きは中の figure が持つ。
ふたつを分けているのは、視差の translate と出現の rotate を同じ要素に載せると
site.js の書き込みと CSS の遷移が同じ property を取り合うため。
★ .smalls-stack の中身は全部 absolute = 自前の幅を持たない。
grid の桝目に置くとき margin-inline:auto を付けると、auto マージンが
余白を吸って shrink-to-fit になり 幅 0 に潰れる(2026-08-27 実測、幅 1000 以下で
写真 3 枚が丸ごと消えていた)。幅は必ず自分で宣言する。
★ 2 枚目の添え書きは右へ寄せる。左のままだと 3 枚目の紙の下に隠れる(実測)。 */
.smalls{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(30px,4.5vw,76px);align-items:center;padding:16vh 7vw}
.smalls-copy h2{font:400 clamp(28px,3.7vw,58px)/1.34 var(--serif);margin:22px 0 0}
.smalls-copy .lead{max-width:30em;line-height:2.1;margin:26px 0 0;font-size:15px}
.smalls-stack{position:relative;width:100%;aspect-ratio:1/.86}
.smalls-stack .print{position:absolute;display:block}
.smalls-stack .p1{z-index:1;left:0;top:9%;width:53%;rotate:-2.4deg}
.smalls-stack .p2{z-index:2;right:0;top:0;width:45%;rotate:2deg}
.smalls-stack .p3{z-index:3;left:27%;bottom:0;width:47%;rotate:.8deg}
.print figure{margin:0;background:var(--paper);padding:clamp(7px,.95vw,15px);
box-shadow:0 24px 46px -28px rgba(36,37,38,.62),0 1px 0 rgba(255,255,255,.9) inset}
.print .shot{display:block;aspect-ratio:1/1;overflow:hidden;background:#ece8e0}
.print figcaption{margin-top:clamp(7px,.8vw,12px);font-size:12px;letter-spacing:.18em}
.p1 figure{--tilt:-2.2deg}
.p2 figcaption{text-align:right}
.p2 figure{--tilt:1.9deg;transition-delay:.24s}
.p3 figure{--tilt:-1.3deg;transition-delay:.48s}
/* ---- 場所(縦長の写真が主役) -------------------------------------------
高さから逆算して幅を決めるので、どの画面でも 2:3 のまま切り落としが出ない。
★ 台紙(是正2): 以前は地色も余白も影も無い素の長方形だった。 */
.place{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
gap:clamp(30px,5vw,84px);padding:14vh 7vw}
.place figure{--tilt:1.5deg;margin:0;justify-self:end;
width:min(100%,calc(min(84svh,980px) * 2 / 3));
background:var(--paper);padding:clamp(9px,1.1vw,18px);
box-shadow:0 30px 54px -32px rgba(var(--warm),.66),0 1px 0 rgba(255,255,255,.9) inset}
.place .shot{display:block;aspect-ratio:2/3;overflow:hidden;background:#ece8e0}
.place>div{max-width:32em}
.place p{line-height:2}
.place .lead{margin:26px 0 0;font-size:15px}
/* 共有の安全層が .place h2 の大きさを !important で決めているため、
15 側から全長パス + !important で上書きする。
宣言した 2 行(9 文字)が 320px でも 1 行に収まる大きさに抑えるのが目的。 */
#places.place h2{font:400 clamp(27px,4vw,52px)/1.32 var(--serif)!important;margin:22px 0 0}
/* ---- 長いテーブル(見開き) ---------------------------------------------
白い台紙の上に写真 2 枚。中央の綴じ目に紙の陰が落ちて 1 枚の見開きに見える。
左右の葉は綴じ目側から外へ 3.2 秒かけて開く。 */
.spread{padding:16vh 7vw}
.spread>header{max-width:760px;margin:0 0 clamp(40px,5vw,76px)}
.spread h2{font:400 clamp(30px,4.6vw,74px)/1.26 var(--serif);margin:22px 0 0}
.spread .lead{max-width:30em;line-height:2.1;margin:24px 0 0;font-size:15px}
.book{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,26px);
background:var(--paper);padding:clamp(12px,1.6vw,26px);
box-shadow:0 32px 62px -36px rgba(36,37,38,.62),0 1px 0 rgba(255,255,255,.9) inset}
.book .leaf{position:relative;z-index:1;margin:0}
.book .shot{display:block;aspect-ratio:3/2;overflow:hidden;background:#ece8e0}
.book figcaption{margin-top:clamp(8px,.9vw,13px);font-size:12px;letter-spacing:.18em}
.book .open-r figcaption{text-align:right}
.book .spine{display:block;position:absolute;z-index:4;left:50%;top:0;bottom:0;
width:clamp(30px,3.4vw,60px);translate:-50% 0;pointer-events:none;
background:linear-gradient(90deg,
rgba(36,37,38,0) 0%,rgba(36,37,38,.13) 28%,rgba(36,37,38,.24) 46%,
rgba(255,255,255,.34) 50%,rgba(36,37,38,.22) 54%,rgba(36,37,38,.11) 72%,rgba(36,37,38,0) 100%)}
/* ---- 手紙 --------------------------------------------------------------
★ 文字の大きさは「いちばん長い文節(こんなにゆっくり = 8 文字)が
いちばん狭い画面で 1 行に収まる」ことから決めている。
器の幅 = 100vw - 20vw(左右の余白)なので、8 文字 ≦ 80vw、
つまり 1 文字 ≦ 10vw。余裕を見て 9.4vw を上限に採った。
★ blockquote は既定で左右 40px の余白を持つ(素のブラウザの規定)。
これが残っていると器が 80px 狭くなり、上の計算が崩れて文節の中で割れる
(2026-08-27 実測: 320px で「「みんなの顔 / を、」)。左右だけ 0 にする。 */
.letters{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10vw;background:#b8cad0}
.letters blockquote{font:400 clamp(30px,9.4vw,78px)/1.5 var(--serif);max-width:1100px;margin-inline:0}
/* ---- 相談 --------------------------------------------------------------
★ 2026-08-27 の作り直し(是正4): 直す前のこの節は
「アイブロウ 1 行 + 見出し + 16px の下線テキスト 1 本」だけで、
写真 0 / 紙 0 / 演出 0。1440 では右半分が最後まで空のまま終わっていた。
ページ中でここだけが「文字しか無い節」= 締めの一手がいちばん弱い画面だった。
直した形(新しい語彙は足さない。この頁が既に持っている物だけで組む):
・見出しは #table と同じく全幅の header に置く。
全幅なので 1440 でも 95px のまま置ける(2 段組の左桝に入れると 82px まで下がる)。
・その下を 2 桝に割り、左 = 写真の紙(.settle で置かれる)/ 右 = 案内の紙。
写真は既にある 10 枚から選んだ(表紙 2 枚目と同じ「歩くふたり」。
表紙は 6.4 秒で流れていくので、ここで初めて落ち着いて見られる)。
・案内の紙の中に縦の罫(.ink)を通す。表紙の .title-rule / #day の .tick-rule と同じ動き。
・「相談日を選ぶ →」は下線テキストのまま(棚の様式)。明朝で 19〜24px に上げ、
紙の上に置いて締めとして立たせる。矢印だけが触ると 0.34em 進む。
ボタンにも塗りにもしない。
★ 案内の紙は器いっぱいに伸ばさない(#day の短冊と同じ理由)。
伸ばすと 768 で 662px、1920 で 698px の白い板になり、文字は左の 390px にしか
乗っていない = 右 4 割が白紙の板になる(2026-08-27 実測)。
width:max-content + max-width:100% で「文字の幅に合わせて切った紙」にする。
2 桝のときは右端を版面の右へ揃え(justify-self:end)、
1 桝のときは写真の左端へ揃える(justify-self:start)。
★ 見出しの大きさ(是正3): 共有の安全層が @media(max-width:480px) で
.fair h2{font-size:32px!important} を当てており、15 側の 54px(!important なし)は
死んでいた。結果 390 で 32px = #story の引用 36.66px より小さく、
ページの締めがいちばん小さい見出しになっていた。
#day と同じ形(全長パス + !important + min() の上限)で取り返す。
宣言した 2 行のうち長い方は「会場ではなく、」= 7 文字。明朝の全角は 1 文字 = 1em なので
必要な幅 = 7 × 文字サイズ。器 = 100vw - 40px(720 以下)。
11.7vw を上限に採ると 320 で 37.44px(必要 262.1px / 器 280px = 余り 17.9px)、
390 で 45.63px(必要 319.4px / 器 350px = 余り 30.6px)。
390 の 45.63px は #story の引用 36.66px より確実に大きい(実測値)。
500px 以上では min() の外側(今までの式)がそのまま効くので 1px も変わらない。 */
.fair{padding:15vh 7vw}
.fair>header{max-width:760px;margin:0}
#reserve.fair h2{font-family:var(--serif)!important;font-weight:400!important;
font-size:min(clamp(55px,7vw,95px),11.7vw)!important;line-height:1.2!important;margin:14px 0 0}
.fair-body{margin-top:clamp(40px,5vw,78px);display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:clamp(28px,4vw,64px);align-items:center}
/* 写真の紙。.day-shot と同じ組み方(台紙 = padding / 影 = box-shadow)。
影の着地先をこの規則が持っているので、.settle の「浮いた影が着地する」演出が効く。 */
.fair-shot{--tilt:-1.3deg;margin:0;background:var(--paper);padding:clamp(9px,1.1vw,18px);
box-shadow:0 28px 52px -30px rgba(var(--warm),.66),0 1px 0 rgba(255,255,255,.9) inset}
.fair-shot .shot{display:block;aspect-ratio:3/2;overflow:hidden;background:#ece8e0}
.fair-shot figcaption{margin-top:clamp(7px,.8vw,12px);text-align:right;font-size:12px;letter-spacing:.18em}
/* 案内の紙。左の余白に縦の罫を通す。
罫は絶対配置なので display:block を必ず宣言する(span を箱に使うときの決まり)。 */
.fair-card{--cpad:clamp(22px,2.6vw,38px);position:relative;
width:max-content;max-width:100%;justify-self:end;
padding:var(--cpad) var(--cpad) calc(var(--cpad) * .8) calc(var(--cpad) * 1.7);
background:var(--paper);
box-shadow:0 24px 46px -28px rgba(var(--warm),.6),0 1px 0 rgba(255,255,255,.92) inset}
.fair-card .fair-rule{display:block;position:absolute;z-index:1;
left:calc(var(--cpad) * .74);top:var(--cpad);bottom:var(--cpad);width:1px;
background:linear-gradient(180deg,rgba(var(--warm),0),rgba(var(--warm),.62) 12%,
rgba(var(--warm),.5) 88%,rgba(var(--warm),0))}
.fair-card .lead{margin:0;max-width:26em;line-height:2.1;font-size:15px}
.fair a{display:inline-block;margin-top:clamp(18px,2vw,30px);border-bottom:1px solid;
padding:10px 0 9px;font:400 clamp(19px,1.9vw,24px)/1.5 var(--serif);letter-spacing:.06em}
.fair a i{font-style:normal;display:inline-block;margin-left:.55em;
translate:0 0;transition:translate .45s cubic-bezier(.22,.62,.24,1)}
@media(hover:hover){.fair a:hover i{translate:.34em 0}}
/* 脚は節と同じ版面に揃える(以前は 28px の固定値で、1440 で 73px 内側へ寄っていた)。 */
footer{padding:28px 7vw;display:grid;grid-template-columns:1fr 1fr auto;font-size:12px}
/* ---- 上に居座るヘッダー --------------------------------------------------
★ 2026-08-27 実測の直し: 背景が完全に透明だったので、下を流れる本文と
ヘッダーの文字が重なって両方読めなくなっていた(1440 で延べ 36 件、390 で 40 件)。
帯は画面幅いっぱい。浮いた角丸の箱にはしない。
いちばん上では帯を出さない(表紙の趣を変えないため)。少しでも動かすと
0.68 秒かけて地色の帯が下りてくる。合図は site.js が .stuck で出す。
隠すのに opacity は使わない。覆いは clip-path。
site.js が落ちた時(html.js が付かない時)は覆いが一切かからない = 帯は出たまま。
帯のレシピは .demo と同じ(地色 88% + 12px の暈し)。 */
.bloom-head{position:fixed;z-index:30;left:0;right:0;top:0;padding:0 25px;display:flex;align-items:center;font-size:12px;justify-content:space-between;gap:16px}
.bloom-head>*{min-width:0}
.bloom-head>a:first-child{font:28px var(--serif)}
.bloom-head nav{margin:auto;display:flex;gap:25px}
.bloom-head>a:last-child{flex:0 0 auto;white-space:nowrap;border:1px solid;padding:10px 15px}
.bloom-head::before{content:"";position:absolute;z-index:-1;inset:-14px 0 -16px;
background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
transition:clip-path .68s cubic-bezier(.22,.62,.24,1)}
:where(html.js) .bloom-head::before{clip-path:inset(0 0 100% 0)}
.bloom-head.stuck::before{clip-path:inset(0)}
html,body,#main{max-width:100%;overflow-x:clip}
@media(max-width:1100px){
.place{gap:clamp(28px,5vw,56px);padding:12vh 7vw}
.place figure{justify-self:start}
}
@media(max-width:1000px){
.smalls{grid-template-columns:minmax(0,1fr);gap:clamp(34px,6vw,60px);padding:13vh 7vw}
.smalls-stack{width:min(100%,640px);justify-self:center;aspect-ratio:1/.78}
}
/* ★ 2026-08-27 の直し(是正1): 1 カラム化の境目は 720px では狭すぎた。
721〜932px の帯で 場所(2:3 の縦長)と 見開き(左右 2 枚)が半分ずつに割られ、
1 枚あたり 330px 前後まで痩せていた。組み替えの境目だけ 900px へ引き上げる
(ヘッダーの中身やボタンの詰め方は 720px のまま。別の話なので混ぜない)。 */
@media(max-width:900px){
.day-shot{max-width:none;margin-left:0}
.place{grid-template-columns:minmax(0,1fr);padding:12vh 7vw}
.place figure{justify-self:start;width:min(100%,calc(min(72svh,980px) * 2 / 3))}
.spread{padding:13vh 7vw}
.book{grid-template-columns:1fr}
/* 見開きは上下に積む。綴じ目も横向きに寝かせ、上の葉は下端から、
下の葉は上端から開く(どちらも綴じ目側から外へ)。 */
.book .spine{left:0;right:0;top:50%;bottom:auto;width:auto;
height:clamp(24px,7vw,44px);translate:0 -50%;
background:linear-gradient(180deg,
rgba(36,37,38,0) 0%,rgba(36,37,38,.12) 28%,rgba(36,37,38,.2) 46%,
rgba(255,255,255,.32) 50%,rgba(36,37,38,.18) 54%,rgba(36,37,38,.1) 72%,rgba(36,37,38,0) 100%)}
.book .open-r figcaption{text-align:left}
:where(html.js) .open-l{clip-path:inset(100% 0 0 0)}
:where(html.js) .open-r{clip-path:inset(0 0 100% 0)}
/* 相談も 1 桝に積む(写真 → 案内の紙 の順)。紙は写真の左端へ揃える。 */
.fair-body{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px)}
.fair-card{justify-self:start}
}
@media(max-width:720px){
.demo{max-width:calc(100vw - 20px)}
.bloom-head nav{display:none}
.bloom-head{padding:0 20px}
.bloom-head>a:first-child{font-size:23px}
.bloom-head>a:last-child{margin-left:auto}
/* 携帯では表紙を一画面に引き伸ばさない。
3:2 の写真は幅で高さが決まるので、390px 幅では どうやっても 247px にしかならない。
それを 844px の器の真ん中に置くと、ヘッダーとの間に 237px の地色が空く
(2026-08-27 実測。前の版で指摘された 112px よりさらに悪い)。
器を content の高さに戻し、写真をヘッダーのすぐ下へ寄せる。 */
.album-hero{min-height:0;padding-top:88px;padding-bottom:56px}
.intro-note{margin-top:56px;padding-inline:20px;font-size:14px}
.daybook{padding:13vh 20px}
/* 短冊の中でいちばん長い文節は 11 文字(「季節の料理を分け合う。」「光の入る小さな部屋で、」)。
320px では 台紙の余白・時刻の欄・短冊の余白を全部引くと文字の器が 174px しか残らない。
11 × 14px = 154px ≦ 174px になるところまで各寸法を詰める
(2026-08-27 実測: 詰める前は 146px の器に 176px を流し込んで「分け合/う。」と割れていた)。 */
.daylist{--pad:clamp(14px,3vw,46px);--hour:clamp(44px,13vw,64px);--gap:clamp(10px,3.4vw,20px)}
.daylist .hour{margin-right:calc(var(--gap) * .5 + 8px);font-size:14px;letter-spacing:.2em}
.daylist .strip{padding:clamp(12px,3vw,20px) clamp(12px,3.4vw,22px)}
.daylist li:nth-child(1) .strip{rotate:-.42deg;margin-left:0;padding-right:16px}
.daylist li:nth-child(2) .strip{rotate:.36deg;margin-left:0;padding-right:16px}
.daylist li:nth-child(3) .strip{rotate:-.28deg;margin-left:0;padding-right:16px}
.daylist li:nth-child(4) .strip{rotate:.45deg;margin-left:0;padding-right:16px}
.daylist .hour{font-size:15px}
.daybook h3{font-size:24px}
.daybook .strip p{font-size:14px}
/* 相談の左右の余白も他の節と同じ 20px に揃える(以前は 7vw = 390 で 27px だった)。 */
.fair{padding:13vh 20px}
footer{grid-template-columns:1fr;gap:8px;padding:28px 20px}
.smalls{padding:12vh 20px}
.smalls-stack{width:100%;aspect-ratio:1/1.15}
.smalls-stack .p1{left:0;top:0;width:56%}
.smalls-stack .p2{top:6%;width:50%}
.smalls-stack .p3{left:18%;width:56%}
.place{padding:12vh 20px}
.spread{padding:12vh 20px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.settle,.open-l,.open-r{rotate:none!important;clip-path:none!important}
.ink{scale:none!important}
[data-depth]{translate:none!important}
/* 帯はちらつかせず、出したまま固定する(site.js が最初の一巡で .stuck を付ける)。 */
.bloom-head::before{clip-path:inset(0)!important}
}
/* 画面外に出たら表紙の動きを止める。
animation の一括指定は animation-play-state を running へ戻すので、
この規則は必ずファイルの末尾 + id セレクタで書く(でないと素通りする)。 */
#hero.rest .daylight,
#hero.rest .sweep,
#hero.rest .slider figure.active{animation-play-state:paused}
/*QA-20260827 スライダーの説明は出ている 1 枚だけ。重なりの偽検出でなく実体を 1 つにする*/
.slider figure figcaption{visibility:hidden}
.slider figure.active figcaption{visibility:visible}
/*QA-20260827 場所の説明だけ指定が無く 16px・字間なしで浮いていた。他 10 個に揃える*/
.place figure figcaption{margin-top:clamp(7px,.8vw,12px);text-align:right;font-size:12px;letter-spacing:.18em}