@charset "UTF-8";
/* ============================================================
コーユーレンティア 70周年 ブランドストーリー
PC 用スタイル
■ 座標系について
デザインカンプは 1440 x 750。CSS もその数値をそのまま使う。
各要素は .el に --x / --y / --w / --h をカンプの数値で指定するだけでよい。
実際の描画サイズは --u (1px 相当のスケール) を掛けて算出する。
--u = min(100vw/1440, 100vh/750) の「contain」方式。
画面比率が変わっても要素同士の位置関係と縦横比が崩れない。
余白は紙テクスチャで埋まるため継ぎ目は見えない。
全面に敷く写真モザイクだけは .board の外に置き、画面いっぱいに cover させる。
============================================================ */
/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, nav, ul, li { margin: 0; padding: 0; }
ul, li { list-style: none; }
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
/* ---------- 変数 ---------- */
:root {
/* 座標スケール。
iOS Safari のアドレスバー対策。高さは dvh(いま実際に見えている高さ)で測る。
100vh はバーの裏まで含んだ高さなので、vh で組むとバーが出ているときに
版面の下が切れる。かといって svh(バーが出ている状態の高さ)で固定すると、
バーが引っ込んだときに版面が画面より小さいままになり、
左右に紙地の余白が出て「コンテンツ幅が狭い」状態になる(実機で発生)。
dvh ならどちらの状態でも版面が画面にぴったり収まる。
引き換えに、バーが出入りするタイミングで版面の倍率が変わる
(iPhone 14 相当で 15% ほど)。切れたり余白が出たりするよりはよい、という判断。
dvh は「指が触れるたびに毎フレーム変わる」わけではなく、
バーの表示が切り替わったときだけ変わる。
svh / dvh を知らないブラウザ用に、前の行に vh → svh を残してある。 */
--u: min(100vw / 1440, 100vh / 750);
--u: min(100vw / 1440, 100svh / 750);
--u: min(100vw / 1440, 100dvh / 750);
/* 色 */
--c-paper: #EFEDE9;
--c-paper-deep: #E8E5DF;
/* エピローグの霞んだモザイク用。カンプの平均色 #F0EADF に合わせた暖色のクリーム */
--c-cream: #F2ECE0;
--c-veil: #F4EEE2;
--c-ink: #1E1E1E;
--c-ink-soft: #3B3B3B;
--c-gold: #E1D4BC;
/* タイムラインの現在地(点と年号)。history.psd 実測 */
--c-accent: #D5A044;
--c-rule: #2A2A2A;
/* 書体 */
--f-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
/* 巨大年号をPNGにしたので Cormorant Garamond は読み込んでいない。
これを使うと欧文が Noto Serif JP に落ちる。 */
--f-latin: "Cormorant Garamond", "Noto Serif JP", serif;
--f-sans: "Montserrat", "Noto Sans JP", sans-serif;
/* 級数
カンプ画像を1ピクセルずつ走査して得た実測値。
見出し … 行送り 70px / 本文 … 行送り 30px
文字サイズは文字ブロックの幅から逆算した。 */
--fs-hd: 40;
--lh-hd: 1.75; /* 40 x 1.75 = 70px */
/* 本文。カンプ実測は 15。2026-09-02 に読みやすさを優先して 16 に上げていたが、
2026-09-19、先方から「枠内スクロールを起こさないでほしい」(■1)。
幅を広げただけでは収まらなかったので、カンプの 15 に戻し、行間も詰めた。
実測(幅620・段落間0.5em)での本文の高さ:
16px/行間2 … 1990 章で 552px(枠 430 に対して 128 はみ出す)
15px/行間1.65 … 1990 章で 448px(枠 465 に収まる)
1行あたりは 25.4 → 40.1 文字。先方の言う「読みやすい 35〜40 文字」に入る。 */
--fs-body: 15;
--lh-body: 1.65; /* 15 x 1.65 = 24.75px */
/* 画面が狭くても、これより小さくしない。
--u は 1440 幅を基準に縮むので、1024px の窓では 15 -> 10.7px まで落ちていた。 */
--fs-body-min: 15px;
/* 固定UI(左上ロゴ・右上CTA・右下コピーライト)用の倍率。
この3つは版面と一緒に縮めない。--u は 1440(SP は 375)幅のとき 1px なので、
そこで止めればカンプの実寸が下限になる。
ただしどこまでも止めるとロゴと CTA がぶつかるので、そこから下は一緒に縮める。
境目の 370 は SP の横並びから出した値。占める幅の合計は
左の余白 20 + ロゴ 165.5 + CTA 150 + 右の余白 9.5 = 345
なので、370 で止めれば 320px の画面でも 21.6px のすきまが残る。
※ ロゴを大きくしたり CTA を広げたら、この数字も見直すこと。
2026-09-09 にロゴ 157.5→175.5、CTA 132.5→150 にしたとき 340→370 にした
(340 のままだと 320px の画面で 4.7px 重なった)。
2026-09-10 に字間を詰めてロゴが 175.5→165.5 になり、すきまが 13→21.6px に増えた。
370 のままでも足りているので、他の固定UIの大きさを動かさないよう据え置いた。 */
--u-ui: max(var(--u), min(1px, 100vw / 370));
/* 行ボックス上端と「墨の上端」のズレを打ち消す量。
カンプは文字枠の上端＝墨の上端で座標が取られているため、
CSS 側は行間の余白ぶんだけ持ち上げて位置を合わせる。
本文だけ em で持つ。下限で級数が --u から外れるため、
u 基準のままだと墨の位置がずれてしまう(em なら級数に必ず追従する)。
2026-09-19、行間を 2 → 1.65 にしたら本文の先頭行の上が切れた。
旧値 -0.5867em は行間 2 のときに合わせた固定値で、行間を詰めると
持ち上げすぎになるため(.body は overflow:hidden なので上がそのまま欠ける)。
行間から自動で出す形に変えた。内訳は
(行間 - 1) / 2 … 行ボックスの上half-leading
0.0867em … Noto Serif JP の墨が em の上端より下にある分(書体固有)
行間 2 → 0.5 + 0.0867 = 0.5867em(従来値と一致)
行間 1.65 → 0.325 + 0.0867 = 0.4117em */
--ink-hd: -25;
--ink-body: calc((1 - var(--lh-body)) / 2 * 1em - 0.0867em);
}
/* 横方向のはみ出しは html 側で切る。
body に overflow-x を書くと body 自体がスクロール箱になり、
ウィンドウのスクロールが効かなくなる(演出がスクロールに連動しなくなる)。 */
html { overflow-x: hidden; }
body {
background: var(--c-paper);
color: var(--c-ink);
font-family: var(--f-mincho);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ============================================================
レイアウト基盤
============================================================ */
/* 1セクション = 1画面 */
.sec {
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
height: 100dvh; /* 実際に見えている高さ。アドレスバーの出入りに追従する */
overflow: hidden;
}
/* 紙テクスチャ地のセクション。
地はセクション本体ではなく ::before に描く。
章の切り替えで「写真は出したまま地だけ消す」ことができるようにするため
(JS が --bg-a を動かす)。前後の章が同じ地なら、地は消しても見た目が変わらない。 */
.sec--paper::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
/* 地色 + チリチリの粒(noise.gif)。
noise.gif は 300x300・3コマ(100msごと)の動く粒で、白は透明。
300 の絵を 150 で敷いている(半分に縮めている)。
等倍(300)だと粒 1 つが 1 CSSピクセル＝Retina では 2 デバイスピクセルになり、
カンプ(2倍で書き出して粒 1 デバイスピクセル)より粗い。
150 にすると Retina でちょうど 1 デバイスピクセルになる。PC / SP 共通。
色は下の background-color がそのまま出る。
#E9E7E3 は元の paper-texture.png の平均色で、紙の明るさは前と同じ。
※ 全面に1枚だけ敷いて乗算で重ねる作りも試したが、そちらのほうが重かった。
画面いっぱいの mix-blend-mode は、裏側を毎回合成し直すことになるため。
章ごとに敷くこの形は塗り直しが背景だけで済む。 */
background-color: #E9E7E3;
background-image: url("../img/ui/noise.gif");
background-size: 150px 150px;
background-repeat: repeat;
opacity: var(--bg-a, 1);
}
/* カンプ 1440x750 の版面。画面中央に contain 配置する
※ transform を持つため .board 自身が重なりの基準になる。
写真モザイク(z-index:2)より前に出す必要がある。 */
.board {
position: absolute;
z-index: 3;
left: 50%;
top: 50%;
width: calc(1440 * var(--u));
height: calc(750 * var(--u));
transform: translate(-50%, -50%);
pointer-events: none;
}
.board > * { pointer-events: auto; }
/* カンプ座標をそのまま持ち込む要素 */
.el {
position: absolute;
left: calc(var(--x) * var(--u));
top: calc(var(--y) * var(--u));
width: calc(var(--w) * var(--u));
height: calc(var(--h) * var(--u));
}
/* ---- 合成の層は「いま出ている章」だけに作らせる(2026-09-10) ----
will-change を付けた要素は、その章が visibility:hidden で見えていなくても、
ブラウザが層(GPU のテクスチャ)を確保したまま持ち続ける。
実測で 70 要素・画面 8 枚ぶん。大きい窓ではこれで合成が追いつかなくなり、
背景の写真も文字もロゴもまとめてパチパチした
(プロローグまで送って戻ると出る。窓が 1530px を超えると出やすい)。
コマ落ちにはならないので、フレームの計測には出てこない。
出ていない章では will-change を外す。出ている章(と、切り替えで
入ってくる章)には js が .is-live を付ける。切り替えの頭で付くので、
層の用意は写真が動きだす前に済む。 */
.sec:not(.is-live) .ph,
.sec:not(.is-live) .body__inner,
.sec:not(.is-live) .mosaic img,
.sec:not(.is-live) .tilt-layer,
.sec:not(.is-live) .top__circle,
.sec:not(.is-live) .epilogue__circle,
.sec:not(.is-live) .top__field-item,
.sec:not(.is-live) .top__field-item img { will-change: auto; }
/* 写真は書き出し済みPNG(白フチ・傾き込み・背景透過)をそのまま置く */
.ph {
object-fit: contain;
will-change: transform;
}
/* ============================================================
全画面共通の固定要素
============================================================ */
.fixed-ui {
position: fixed;
inset: 0;
z-index: 40;
pointer-events: none;
}
/* 押せる必要があるのは CTA だけ。ほかは下のスクロール操作を邪魔しない。 */
.fixed-ui .top__cta { pointer-events: auto; }
/* ※ 2026-09-09、編集の失敗でこの範囲(固定UIの角〜TOP)を一度失い、
ブラウザに読み込まれていた版から書き戻した。
指定の値はすべて元どおりだが、一部のコメントは復元できていない。 */
/* ブラウザの四隅を起点に置く要素。
.el は版面の左上からの座標(--x/--y)で置くが、こちらは画面の角が基準。
--ox / --oy が角からの距離。大きさは --w / --h(SP は --sw / --sh)のまま。 */
.el.corner--tl { left: calc(var(--ox) * var(--u)); right: auto; top: calc(var(--oy) * var(--u)); bottom: auto; }
.el.corner--tr { right: calc(var(--ox) * var(--u)); left: auto; top: calc(var(--oy) * var(--u)); bottom: auto; }
.el.corner--bl { left: calc(var(--ox) * var(--u)); right: auto; bottom: calc(var(--oy) * var(--u)); top: auto; }
.el.corner--br { right: calc(var(--ox) * var(--u)); left: auto; bottom: calc(var(--oy) * var(--u)); top: auto; }
/* 版面と一緒に縮めない固定UI(ロゴ・CTA・コピーライト)。--u ではなく --u-ui で置く。
角からの距離も一緒に固定しないと、大きさだけ据え置きで位置だけ寄っていく。 */
.el.corner.is-fixed-size { width: calc(var(--w) * var(--u-ui)); height: calc(var(--h) * var(--u-ui)); }
.el.corner.is-fixed-size.logo { height: auto; }
.el.corner--tl.is-fixed-size { left: calc(var(--ox) * var(--u-ui)); top: calc(var(--oy) * var(--u-ui)); }
.el.corner--tr.is-fixed-size { right: calc(var(--ox) * var(--u-ui)); top: calc(var(--oy) * var(--u-ui)); }
.el.corner--bl.is-fixed-size { left: calc(var(--ox) * var(--u-ui)); bottom: calc(var(--oy) * var(--u-ui)); }
.el.corner--br.is-fixed-size { right: calc(var(--ox) * var(--u-ui)); bottom: calc(var(--oy) * var(--u-ui)); }
/* ロゴのロックアップ。書体が Futura PT で Webフォントを持っていないため、
2行とも PSD から書き出した画像を置いている。
PSD実測(カンプ座標): 1行目 x51 y51 157.5x12 / 2行目 x51.5 y75 103x12
→ 2行目は1行目の下 12px、左に 0.5px ずれる。 */
.logo { height: auto; }
.logo__line1, .logo__line2 { display: block; height: auto; }
/* 2026-09-09 のカンプ実測(表示px):
1行目 x50.5 y50 175.5x13.5 ／ 2行目 x51 y75 110x14.5(y の下がりを含む)
→ 2行目は1行目の下 12px、左に 0.5px。ロックアップ全体が以前より一回り大きい。
2026-09-10、字間を詰めた素材に差し替え。文字の大きさは据え置きなので
墨の高さ(13.5 / 14.5)はそのまま、幅だけ 175.5→165.5 / 110→99.5 に縮む。
行間 12 と左の 0.5 は字間と関係がないので触らない。 */
.logo__line1 { width: calc(165.5 * var(--u-ui)); }
.logo__line2 { width: calc(99.5 * var(--u-ui)); margin-top: calc(12 * var(--u-ui)); margin-left: calc(.5 * var(--u-ui)); }
/* ロゴは基本が黒。TOP の写真が敷き詰まっている間だけ白抜きに転ぶ
(JS が .is-light を付け外しする)。素材が純黒なので invert で真っ白になる。 */
.fixed-ui.is-light .logo__line1, .fixed-ui.is-light .logo__line2, .fixed-ui.is-light .copyright { filter: invert(1); }
/* ============================================================
読み込み中の窓(loading.psd 2026-09-09 実測)
============================================================
カンプの数値(版面px):
ピル x570〜868.5 y345〜394.5 → 300x50、中心(720, 369.75)
塗り #EBE7E3 / 角丸 10 / 下に柔らかい影
LOADING 墨 48x7.5、中心 x720、墨の上端は y361(ピル上端から16)
バー y378(ピル上端から33)、太さ1、x586.5〜853(幅267、左に16.5)
レール 純黒 / 進捗 #D5A044(= --c-accent と同じ値だった)
大きさは --u ではなく --u-ui。LOADING は版面 7.5px しかないので、
--u だと 768px の窓で 4px になって読めない。四隅のUIと同じ扱いにする。
層は固定UI(40)より下、章より上。ロゴ・CTA・コピーライトは上に出したまま、
章の側だけ紙地で覆って、本編が出る瞬間の変化を隠す。 */
.loading { position: fixed; inset: 0px; z-index: 35; display: flex; align-items: center; justify-content: center; pointer-events: none; background-color: rgb(233, 231, 227); background-image: url("../img/ui/noise.gif"); background-size: 150px 150px; background-repeat: repeat; }
/* 「左右がセンターから広がる」。高さは動かさない。
scaleX ではなく幅で動かすのは、中の文字を歪ませないため。
中身は overflow で切って、開くのに合わせて左右から現れる。
開くきっかけは js(is-open)。頭で少し置いてから開く。
2026-09-28、角丸の四角(border-radius / background / box-shadow)を外した。
地(.loading の紙テクスチャ)の上に LOADING の文字とバーだけが直接乗る。
幅を 0 から広げて中身を左右から出す仕掛けはそのまま残してある。 */
.loading__pill { margin-top: calc(-10.5 * var(--u-ui)); height: calc(50 * var(--u-ui)); display: flex; align-items: center; justify-content: center; width: 0px; overflow: hidden; }
.loading.is-open .loading__pill { animation: 0.5s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal both running loading-open; }
.loading.is-done .loading__pill { animation: 0.4s cubic-bezier(0.55, 0, 0.85, 0) 0s 1 normal both running loading-close; }
@keyframes loading-open {
0% { width: 0px; }
100% { width: calc(300 * var(--u-ui)); }
}
@keyframes loading-close {
0% { width: calc(300 * var(--u-ui)); }
100% { width: 0px; }
}
/* 中身は原寸のまま置く。ピルが広がっても中の位置が動かない */
.loading__inner { position: relative; flex: 0 0 auto; width: calc(300 * var(--u-ui)); height: calc(50 * var(--u-ui)); }
/* LOADING はカンプから起こしたマスク。年表のラベルと同じ作りで、
画像は形だけに使い、色は background-color で付ける。 */
.loading__label { position: absolute; left: 50%; top: calc(15 * var(--u-ui)); transform: translateX(-50%); width: calc(50 * var(--u-ui)); height: calc(9.5 * var(--u-ui)); background-color: var(--c-ink); mask-repeat: no-repeat; mask-size: 100% 100%; mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAATCAYAAABmxagtAAACIUlEQVR42u1Ya40EIQxGAAJGAAYwsAZQsAowsA6QMBJGw3kYFViZyyXspWnoC/hJE7K5Gyjl+/oC57Zs2aKT2MYxsO7tnMvtNw7sHdo6b7ATDr/ojLHZshqr2PAxYfS0kZWbJOfcDdbBcbfvGvFg3cdgZ2/PIpAjnfH7PS3C6u97ZeyNqwgpSPmPc+5qv/D/RaErg/l1ghCoI0wSIpGiwYrCCDvxa5aQN9oEh+2BiHkL+m4DEJSdr3ZY6H2zhHC2SHqgk10djCKInHOWkAoO7Zk0dCu8PiEQvySPRnIRwLQS8hDRJumpirNELjq0hESDJ0OwqVx5AcM18zV23sAzRwk5Aai9FMjpiZp0tKqow1CUOhtvMDy1+VVReyQ7P0xkagnJyD5MCqeHw8gTXWJYQcgsyaVjeFEQbsnfM4TgKIekaAnhnPBBdWaIEFjQpR78YAr7QXRiYQA0iui6gJAeKVLkcxhRhJRRQoKxB6cKY0bF/AJjplPyQvcySnZCnSWnR4uRlzpRLdC3ot8PqBujuhBpWDolj8CKCwnBTqRtLDiMspRtYPhE5nnghUI4gXzv29+V6TRSp3ji8Sg6JWjnB+15Tt5DpHQozUsMRgHpKdYbcBY2tHr4jfKxdPBgvKmXiYbAegO33NR744frVi2EfJk+iTUnEapR+W4VGA+iDlYUj3YrCIFgS/Oo977a1mofRYdfiqPbQhXw0df0LVu2/MsvAfLZ+0SIGpwAAAAASUVORK5CYII="); }
/* 黒いラインは窓と同時に開き、同時に閉じる。
窓が overflow で中身を切っているので、別のフェードは要らない。 */
.loading__bar { position: absolute; left: calc(16.5 * var(--u-ui)); top: calc(33 * var(--u-ui)); width: calc(267 * var(--u-ui)); height: calc(1 * var(--u-ui)); background: rgb(0, 0, 0); overflow: hidden; }
.loading__fill { display: block; width: 0px; height: 100%; background: var(--c-accent); }
/* ============================================================
タイポグラフィ
============================================================ */
/* 見出し(明朝・2行組) */
.hd { font-family: var(--f-mincho); font-weight: 400; font-size: calc(var(--fs-hd) * var(--u)); line-height: var(--lh-hd); letter-spacing: 0.06em; color: var(--c-ink); height: auto; margin-top: calc(var(--ink-hd) * var(--u)); }
/* ヒストリー5章だけ、PC は1行組み(2026-09-28)。
HTML の
は class="sp-only" にしてあるので PC では消え、
SP ではこれまでどおり2行で入る。
nowrap は、原稿が伸びたときに枠幅で勝手に折り返らないようにするため。
枠(--w)は1行ぶんの実測値に直してある。文言を変えたら測り直すこと。
プロローグ・エピローグ・CTA は2行組みのまま(先方の指定)。
SP は css/sp.css で white-space:normal に戻す。
字送りも 0 にした。カンプ実測の .06em は2行組みのときの値で、
1行に伸ばすと 16字で 38px ぶん広がって間延びして見えるため。
SP はもともと 0 なので、これで PC と揃う。
halt は読点「、」を半角に詰める。1行組みだと読点のあきが目立つため。
読点のある4章が 20px ずつ縮む(1960 は読点が無いので変化なし)。
※ palt は使えない。見出しの Noto Serif JP には実用的な palt が
入っておらず、指定してもこの5本は 1px も動かない
(約物の多い文字列ではむしろ広がる)。ヒラギノなら効くが
あれは Mac のローカル書体で、Web フォントが読めれば使われない。
SP は css/sp.css の .hd で halt が入っているので指定は要らない。 */
.sec--history .hd { white-space: nowrap; letter-spacing: 0; font-feature-settings: "halt" 1; }
/* 本文。下端に向かってフェードさせ「続きがある」ことを示す */
.body { overflow: hidden; mask-image: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0.35) 88%, transparent 100%); }
/* 送り始めたら上端もぼかす(JS が判定して付与) */
.body.is-scrolled { mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 2%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0.35) 88%, transparent 100%); }
/* 本文が枠に収まる章はぼかさない(JS が判定して付与) */
.body--nofade { mask-image: none; }
.body__inner { font-size: max(var(--fs-body-min), calc(var(--fs-body) * var(--u))); line-height: var(--lh-body); letter-spacing: 0.03em; color: var(--c-ink-soft); margin-top: var(--ink-body); will-change: transform; }
/* ヒストリーの本文も、見出しと同じ組みに揃えた(2026-09-28)。
字送り 0 … カンプ実測の .03em は枠が狭かったころの値。
15px の本文では1字あたり .45px で、1行 40字だと 18px ぶん。
halt … 読点「、」と句点「。」を半角に詰める。
どちらも1行に入る字数が増えるので、本文の高さが下がって
枠からのはみ出しが減る(= 章のスクロールも短くなる)。
プロローグ・エピローグは2行組みのままなので .03em を据え置き。
SP は css/sp.css で字送り -.062em・halt ありのまま(カンプ実測)。 */
.sec--history .body__inner { letter-spacing: 0; font-feature-settings: "halt" 1; }
/* 段落のあいだ(2026-09-19)。
カンプは段落間を空けず連続で流していたが、先方から
「余白がなく、文章がひとかたまりに見える」とご指摘。
本文の幅を広げる改訂(■1)と合わせて 0.5em 空ける。
実測: 600px 幅のとき、この 0.5em で本文の高さが 1970 章で 512 → 584px。 */
.body__inner p + p { margin-top: .5em; }
/* ============================================================
01 TOP
============================================================ */
/* 写真が小さく点在している間に見えている紙地 */
.top__paper { position: absolute; inset: 0px; z-index: 0; background-color: rgb(233, 231, 227); background-image: url("../img/ui/noise.gif"); background-size: 150px 150px; background-repeat: repeat; }
/* 写真モザイク(4列 x 3段) 画面いっぱいに敷く */
.mosaic { position: absolute; inset: 0px; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity, filter; }
.mosaic--top img, .top__circle, .top__brand, .top__lead { opacity: 0; }
/* 親のモザイクだけ、わざと 1 にしない。
中の12枚は別々の層に載っているので、親の濃さが 1 を割った瞬間に
ブラウザは「12枚をいったん1枚にまとめる面」を作り、1 に戻ると捨てる。
TOP の頭で行ったり来たりすると、この作り直しが毎回起きて、
実機(Chrome)では画面まるごとが1コマ抜ける。
0.999 にしておけば見た目は変わらないまま、面が作りっぱなしになる。
(2026-09-10 の画面収録で、12.967秒のコマが全面白飛びしていた) */
.mosaic--top { opacity: .999; }
/* 奥から迫ってくる写真群。グリッドが揃うまでの間だけ見える */
.top__field { position: absolute; inset: 0px; z-index: 1; overflow: hidden; pointer-events: none; }
/* 入れ物はスクロール連動(奥から迫る)、中の写真は時間で漂う。
同じ要素に両方かけると transform を取り合うので、2枚に分けている。 */
.top__field-item { position: absolute; will-change: transform, opacity, filter; }
.top__field-item img { display: block; width: 100%; height: auto; object-fit: cover; will-change: transform; }
/* ---------- 導入が済んだあとの TOP ----------
js/main.js の settleTop() が html に付ける。
・飛んでいた写真はもう出ないので、層ごと畳む(32要素ぶんの合成が消える)
・モザイクの12枚に残る will-change と filter を外す。
残したままだと12枚がそれぞれ別の層になり、親を拡大するたびに
12層ぶん焼き直しになる。
※ 2026-09-09、ここで親(.mosaic--top)に
will-change: transform, opacity; backface-visibility: hidden;
も付けて「1枚の層にまとめる」ことを試したが、取り消した。
backface-visibility は 3D の描画文脈を作るので、Chrome で重ね順の扱いが変わり、
ロゴ・CTA・タイトルなど上に載る層がまるごと描かれないコマが出た。
写真だけ出て文字が消える、という別の症状になったので戻してある。
親は GSAP が transform を書いている間だけブラウザが自分で層に上げる。 */
.is-top-settled .top__field { display: none; }
.is-top-settled .mosaic--top img { will-change: auto; filter: none; }
/* 白い円。カンプ実測の縁のぼけを再現(半径の85%まで濃く、外周で消える)。
画像ではなくグラデーションなので、何倍に拡大しても縁が粗くならない。 */
.top__circle { z-index: 3; pointer-events: none; border-radius: 50%; background: radial-gradient(circle closest-side, rgb(235, 231, 227) 0%, rgb(235, 231, 227) 85%, rgba(235, 231, 227, 0.55) 93%, rgba(235, 231, 227, 0) 100%); will-change: transform, opacity; }
.top__cta { z-index: 5; display: flex; gap: calc(4.5 * var(--u-ui)); }
.top__cta-btn { display: flex; align-items: center; justify-content: center; height: 100%; border: 1px solid rgb(85, 85, 85); background: rgb(235, 231, 227); font-family: var(--f-mincho); font-size: calc(13 * var(--u-ui)); letter-spacing: 0px; color: var(--c-ink); white-space: nowrap; transition: background-color 0.25s; }
.top__cta-btn:first-child { flex: 0 0 calc(181 * var(--u-ui)); }
.top__cta-btn:last-child { flex: 0 0 calc(171 * var(--u-ui)); }
.top__cta-btn:hover { background: rgb(255, 253, 249); }
.top__brand { --lg: 1; z-index: 4; height: auto; }
.top__brand .logo__line1 { width: calc(380 * var(--lg) * var(--u)); margin: 0px auto; }
/* 2026-09-09 のカンプ実測(表示px): 1行目 x515 y343 409x31 ／ 2行目 x605.5 y406.5 228.5x30.5
1行目は前と同じ。2行目は文言が短くなったぶん 267.5 → 228.5。
行のあいだは 406.5 -(343+31) = 32.5。
2026-09-10、字間を詰めた素材に差し替え。墨の高さ(31 / 30.5)と行間 32.5 は据え置きで、
幅だけ 410→380 / 228.5→209。2行目は中央合わせなので、縮んでも中心は動かない。 */
.top__brand .logo__line2 { width: calc(209 * var(--lg) * var(--u)); margin: calc(32.5 * var(--lg) * var(--u)) auto 0; }
.top__lead { z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center; height: auto; }
.top__title { font-family: var(--f-mincho); font-weight: 400; font-size: calc(var(--fs-hd) * var(--u)); line-height: var(--lh-hd); font-feature-settings: "halt"; letter-spacing: -0.02em; margin-top: calc(var(--ink-hd) * var(--u)); white-space: nowrap; }
.top__rule { display: block; width: calc(72 * var(--u)); height: calc(2 * var(--u)); margin-top: calc(28 * var(--u)); background: var(--c-rule); }
.top__sub { margin-top: calc(38 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.4; letter-spacing: 0.14em; color: var(--c-ink-soft); white-space: nowrap; }
/* ---------- スクロールの合図 ----------
カンプ top.psd の TOP_FIX アートボード。白い円の中、ロックアップの下に置く。
マウス・SCROLL・矢印の3つで、矢印だけが上から下へ繰り返し降りる。
3つともカンプから起こしたマスク画像。形だけ使い、色は background-color で付ける
(年表のラベルや LOADING と同じ作り)。 */
.top__cue {
z-index: 4; /* 白い円より前 */
display: flex;
flex-direction: column;
align-items: center;
/* ロックアップが出そろってから一拍おいて出す。タイムラインには乗せず、
自動再生が終わってから js が is-in を付ける(乗せると止まった位置で
一緒に出てしまい、間が作れない)。 */
opacity: 0;
visibility: hidden;
transition: opacity .55s ease, visibility .55s;
}
.top__cue.is-in { opacity: 1; visibility: visible; }
.top__cue-mouse,
.top__cue-label,
.top__cue-arrow {
display: block;
flex: 0 0 auto;
background-color: var(--c-ink);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.top__cue-mouse {
width: calc(38 * var(--u));
height: calc(48.5 * var(--u));
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABhCAYAAAB8pUfDAAADQElEQVR42u2dTUsbQRjHfxISvbUgtEU8trcW8Vhate1dRAJ+gF5a79IXEZIvUOiHEKQqBVuFXryV3qSHgn6EYt8MplhBoU1gelkyszubZHey+f9hcgizM8/8Mi87o88zIEmDqDHgAVADNoDPwHfgT+u7v31I7XK/mXo2TL0PjR1BQ1oCdoHzPoHxTefGnqWQ4I23PurASSCQbOnE2DmeF6gK8BL4HTioaGrbu2rsz0z3gKMBAxVNR6YdfdVIa154AVx2OUE3epjOurDl0rRnpF9DcMvDmF/ANrAMzAI3gFKffsiSKX/W1LcJ/PSwdavXQ/QKsJ+w8vet5X0BKOe8GLXrnwfeJbR737SzJz0rCawPwHSgrzxTwF5CaJVu56w3MZX8AKoD8kK9aF5wXe3Z7GZOW4kp/BMwOWC7kAngY0y7VtIUfBe4cBT6NvStR8w0s+1o24Vpv9eEeRgDq8RgqxQD7dBn4XoeMwzHKIYqMcPzWZJCrgKnjgl+kmJpwrEQnBoeTtUcxKsUU4uONtdcD46aXmR7zyqy9hyjatT2UNVBerrgwKbSjKwdywO7Q3JSbNtG7dhWDNvOf2FIgM1b2n/Wacs05zh1KA8JsLLjlGMumnnNcfSRtW6bc/g7OdRt2zuvRTOuWzIuZ2zwq0j9rzOu/6mFw3o044El40yGxt632PAoQxtmLDYcRDMeWzJez9BY25ZsNUMbrllsOI5mtK2QWapusaGesR22lTI2U3NIgTWTdJ5OGRpDCqwhYAImYAImYAImYAImYAImYD1UTcD89NhixxMB66z2H02/djhWGRcwu26a/7X/Yo7Hb+Vgw0ABC0ECJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACVhRgzSEFlsixIQTXmVCUyHUmBOesEJTYOSsE978QlNj9LxQH07yV2ME0JBfmPJXYhVlO8p5O8grD4BmGAQX68Av0gULJ+IeSUbAiz2BFKByWXzgsFHDNP+AaCunnF9IPBY30DxqJwpL6hSX9LwW+9ZRCK6fsvgre7SmFh0/Z03QBQYo5TVdcpJAuUUk5RHVNTwrpIqiU0lVjXcLTZXYS/ANYD6tRl/jPuQAAAABJRU5ErkJggg==");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABhCAYAAAB8pUfDAAADQElEQVR42u2dTUsbQRjHfxISvbUgtEU8trcW8Vhate1dRAJ+gF5a79IXEZIvUOiHEKQqBVuFXryV3qSHgn6EYt8MplhBoU1gelkyszubZHey+f9hcgizM8/8Mi87o88zIEmDqDHgAVADNoDPwHfgT+u7v31I7XK/mXo2TL0PjR1BQ1oCdoHzPoHxTefGnqWQ4I23PurASSCQbOnE2DmeF6gK8BL4HTioaGrbu2rsz0z3gKMBAxVNR6YdfdVIa154AVx2OUE3epjOurDl0rRnpF9DcMvDmF/ANrAMzAI3gFKffsiSKX/W1LcJ/PSwdavXQ/QKsJ+w8vet5X0BKOe8GLXrnwfeJbR737SzJz0rCawPwHSgrzxTwF5CaJVu56w3MZX8AKoD8kK9aF5wXe3Z7GZOW4kp/BMwOWC7kAngY0y7VtIUfBe4cBT6NvStR8w0s+1o24Vpv9eEeRgDq8RgqxQD7dBn4XoeMwzHKIYqMcPzWZJCrgKnjgl+kmJpwrEQnBoeTtUcxKsUU4uONtdcD46aXmR7zyqy9hyjatT2UNVBerrgwKbSjKwdywO7Q3JSbNtG7dhWDNvOf2FIgM1b2n/Wacs05zh1KA8JsLLjlGMumnnNcfSRtW6bc/g7OdRt2zuvRTOuWzIuZ2zwq0j9rzOu/6mFw3o044El40yGxt632PAoQxtmLDYcRDMeWzJez9BY25ZsNUMbrllsOI5mtK2QWapusaGesR22lTI2U3NIgTWTdJ5OGRpDCqwhYAImYAImYAImYAImYAImYD1UTcD89NhixxMB66z2H02/djhWGRcwu26a/7X/Yo7Hb+Vgw0ABC0ECJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACJmACVhRgzSEFlsixIQTXmVCUyHUmBOesEJTYOSsE978QlNj9LxQH07yV2ME0JBfmPJXYhVlO8p5O8grD4BmGAQX68Av0gULJ+IeSUbAiz2BFKByWXzgsFHDNP+AaCunnF9IPBY30DxqJwpL6hSX9LwW+9ZRCK6fsvgre7SmFh0/Z03QBQYo5TVdcpJAuUUk5RHVNTwrpIqiU0lVjXcLTZXYS/ANYD6tRl/jPuQAAAABJRU5ErkJggg==");
}
/* カンプ実測: マウスの下端 546 から SCROLL の墨の上端 553.5 まで 7.5 */
.top__cue-label {
margin-top: calc(4.5 * var(--u));
width: calc(39.5 * var(--u));
height: calc(8.5 * var(--u));
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAAARCAYAAACcsPEBAAABvUlEQVR42u1YYc3EIAytAARgAAEYmAEUTMEMzMEknIRpwMOpwMq+XAJJ0xRauB33/TgSfixpea9vpe0G8Fu/9V+WA4At76XDz2T74hvyWdzyZLsBni+/NWOt+Vnr99r2Zlt4AMBF9lMR3A4AifG9cmB0XZX9UBANmdNV4RoE/2K7KfRQ226ExIkEaTlHEkDMvs+Gbw2n+NfWUcGiHI7Z4pVgT3IVD6XgkcnQRci8rXIWVy5WgkUz1BIR15niFcO9o+4klEGmUQu1pFpktVglCdJM8SIxtopiWuxDZ7HnSNlG1vRgBWTrZ4m3MAX4bHQxfM3MoHhHPj+QjLFvYBkh6I+IV95wZEQMgngwKB7d6Sasr4iHZ72dBNUq4HZQvFPAGMGyyjHpY+JxpD0jsNTZNKQ2BUnXEQg+z80SLzBv1QvFF9cp18gEiVQUcLRYjnTlKd02oPnJM3NTUjSZRLq0RZklkXJkcDYKrIDsTH5OwqzINavWJ5jK1jU+ryTlQ8Ovp2ivillTwtKMMyM8RVtHCjjOJk2XflS659JxHU5F5rgKVvk2dsqreKt4eE7yHX8par4jf0pG/qyMcn17/QHGFF86LjM6gQAAAABJRU5ErkJggg==");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAAARCAYAAACcsPEBAAABvUlEQVR42u1YYc3EIAytAARgAAEYmAEUTMEMzMEknIRpwMOpwMq+XAJJ0xRauB33/TgSfixpea9vpe0G8Fu/9V+WA4At76XDz2T74hvyWdzyZLsBni+/NWOt+Vnr99r2Zlt4AMBF9lMR3A4AifG9cmB0XZX9UBANmdNV4RoE/2K7KfRQ226ExIkEaTlHEkDMvs+Gbw2n+NfWUcGiHI7Z4pVgT3IVD6XgkcnQRci8rXIWVy5WgkUz1BIR15niFcO9o+4klEGmUQu1pFpktVglCdJM8SIxtopiWuxDZ7HnSNlG1vRgBWTrZ4m3MAX4bHQxfM3MoHhHPj+QjLFvYBkh6I+IV95wZEQMgngwKB7d6Sasr4iHZ72dBNUq4HZQvFPAGMGyyjHpY+JxpD0jsNTZNKQ2BUnXEQg+z80SLzBv1QvFF9cp18gEiVQUcLRYjnTlKd02oPnJM3NTUjSZRLq0RZklkXJkcDYKrIDsTH5OwqzINavWJ5jK1jU+ryTlQ8Ovp2ivillTwtKMMyM8RVtHCjjOJk2XflS659JxHU5F5rgKVvk2dsqreKt4eE7yHX8par4jf0pG/qyMcn17/QHGFF86LjM6gQAAAABJRU5ErkJggg==");
}
/* 矢印。SCROLL の下 8px から、自分の高さぶんだけ下へ降りて消え、また上から。
両端で消えるので戻る瞬間は見えず、輪になってつながる。 */
.top__cue-arrow {
margin-top: calc(13.75 * var(--u));
width: calc(20 * var(--u));
height: calc(17.5 * var(--u));
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAjCAYAAADmOUiuAAABi0lEQVR42u2YQU7CQBSGP9Jo0BW6MgZPgFfAeAbiBdy4ICwIB0ASEg7AQnayJ5EtB5AdW+UEsHBliBJhoUiT14WV6bS0xTGZP3lp0r73/18zSTsZsDJHl8AYWMm1aBLcKfAucF69ASemAN744Ly6NgWwqgCsWkALaAEt4D8C3AfawAswXQfcAs6OAB3Jm0p+W3h+qLMh4AHIpgyYlRz/bMffOFeEPAK5lABz4r9pdu5vXioa3XoC8gkD5sVXlbn0D/QCmt2aAIWEAAviF5TX8w8dAyPN0KtinxcFsCg+QTkj4fmlQ2CgGf4ASlsClmQ+yH8gHErtAV2NySdQjghYlrkg367ka5VZf4daGjO3mtIbBJiRPp1XS3ojqRLire+BmuJZTZ7rVqMS5w9zBSw0IeOI971aiH9sXQCzEMsUpWbim5jOQ3y7wtZE/BLXGfAcE24sPqnpCBhuCTeU+dR1APQjwvVlbmdyFFu0lWLr5PBHqmvg6iZs+RsKuIZJB0juMn4JmHu9swd+JugbibSYRuHST5MAAAAASUVORK5CYII=");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAjCAYAAADmOUiuAAABi0lEQVR42u2YQU7CQBSGP9Jo0BW6MgZPgFfAeAbiBdy4ICwIB0ASEg7AQnayJ5EtB5AdW+UEsHBliBJhoUiT14WV6bS0xTGZP3lp0r73/18zSTsZsDJHl8AYWMm1aBLcKfAucF69ASemAN744Ly6NgWwqgCsWkALaAEt4D8C3AfawAswXQfcAs6OAB3Jm0p+W3h+qLMh4AHIpgyYlRz/bMffOFeEPAK5lABz4r9pdu5vXioa3XoC8gkD5sVXlbn0D/QCmt2aAIWEAAviF5TX8w8dAyPN0KtinxcFsCg+QTkj4fmlQ2CgGf4ASlsClmQ+yH8gHErtAV2NySdQjghYlrkg367ka5VZf4daGjO3mtIbBJiRPp1XS3ojqRLire+BmuJZTZ7rVqMS5w9zBSw0IeOI971aiH9sXQCzEMsUpWbim5jOQ3y7wtZE/BLXGfAcE24sPqnpCBhuCTeU+dR1APQjwvVlbmdyFFu0lWLr5PBHqmvg6iZs+RsKuIZJB0juMn4JmHu9swd+JugbibSYRuHST5MAAAAASUVORK5CYII=");
animation: cue-arrow 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes cue-arrow {
0% { transform: translateY(calc(-8 * var(--u))); opacity: 0; }
22% { opacity: 1; }
72% { opacity: 1; }
100% { transform: translateY(calc(10 * var(--u))); opacity: 0; }
}
/* ============================================================
02 PROLOGUE
============================================================ */
/* 螺旋を描いて迫ってくる写真(WebGL)。紙地の上、文字の下に敷く */
.prologue__canvas {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
/* WebGL が動いたときだけ、カンプどおりに置いた静止写真を引っ込める。
動かなかった場合は静止写真がそのまま残るので、絵が消えることはない。 */
.has-spiral .ph { display: none; }
/* (行送り・級数は共通値のまま。プロローグ固有の上書きは不要) */
/* ============================================================
03-07 HISTORY
============================================================ */
/* 巨大年号(Cormorant Garamond をラスタライズ済みPNGで配置) */
.numeral {
z-index: 0;
object-fit: contain;
object-position: left top;
pointer-events: none;
}
/* ※ 2026-09-09、支給の perts/1960.png 〜 2020.png(レイヤー書き出し)に差し替えた。
末尾の「ー」まで1枚に入っているので、四角で描き足す仕組み(.numeral__dash)と、
SP で年号を上下2枚に割る仕組みは要らなくなり、どちらも外した。 */
.sec--history .hd,
.sec--history .body { z-index: 2; }
.sec--history .ph { z-index: 1; }
/* 奥にぼかして敷く写真(次の年代の予告)。
カンプの素材はぼかしと薄さを焼き込んだ PNG だったが、章の切り替えで
「ぼけが晴れながら次の年代へ移っていく」ようにしたいので、
焼き込みをやめて次章の写真そのものを CSS で同じ見え方にする。
不透明度はどの章も 50%(実測 1960=0.506 / 1970=0.506)。
ぼかしはパネルごとに違う(1960=3.5 / 1970=2.75)ので、--blur で個別に持たせる。
--u は 1 版面単位あたりの px なので、係数は単位なしで掛ける。 */
.ph--back {
opacity: .5;
filter: blur(calc(var(--blur, 3.5) * var(--u)));
}
/* カーソル追従で写真だけを動かすための層。
本文と同じ箱の中にあるので、写真をここへまとめて包む。
inset:0 なので、中の .el の座標(left/top)は包む前と変わらない。 */
.tilt-layer {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
will-change: transform;
}
.tilt-layer > * { pointer-events: auto; }
/* ---------- タイムライン ---------- */
.timeline {
position: fixed;
inset: 0;
z-index: 30;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity .5s ease, visibility .5s ease;
}
.timeline.is-visible { opacity: 1; visibility: visible; }
.timeline__inner {
height: auto;
}
/* 年号・点・レールは版面と一緒には縮めない(--u-ui)。窓が狭いと年号が
7px 台まで落ちて読めなくなっていた。レールの高さ(top)も一緒に止めないと、
点だけ実寸のまま線から下にずれる。 */
.timeline__rail,
.timeline__fill {
position: absolute;
left: 0;
top: calc(4 * var(--u-ui));
height: 1px;
}
/* 進捗の帯。左端から現在位置まで橙で伸びる。幅は JS が毎フレーム入れる */
.timeline__fill {
width: 0;
background: var(--c-accent);
z-index: 1;
}
.timeline__rail {
right: 0;
background: var(--c-ink);
opacity: .85;
}
/* 点は箱の中の割合(--p)で絶対配置。ラベルはその真下に中央吊り。
両端のラベルは箱からはみ出すが、カンプもそうなっている(点の中心で揃える)。 */
.timeline__item {
position: absolute;
top: 0;
left: var(--p);
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: auto;
z-index: 2;
}
.timeline__dot {
/* 2026-09-28、design/history/history_1960.psd の改訂版が届いたので実測に戻した。
9/19(■6)に自前で 8 → 11 に太らせていたが、新しいカンプは 8。
「小さくて気づけない」は、点ではなく下に付いた [一言] で解いている。
カンプ実測(2倍) 16x16 → 版面 8。 */
width: calc(8 * var(--u-ui));
height: calc(8 * var(--u-ui));
border-radius: 50%;
background: var(--c-ink);
transition: background-color .35s ease, transform .35s ease;
}
/* 年号も書体が Futura PT なので PSD から書き出した画像。
ただし現在地では色が変わるので、画像は「マスク」として使い、
色は background-color で付ける。こうすると色の変化も従来どおり滑らかに出る。
--lw / --lh はカンプ実測の表示サイズ(SP は --slw / --slh)。
※ 画像は data URI で直接埋め込んである(5点で 5.4KB)。
外部ファイルにするとキャッシュや相対パスの解決で読めなくなることがあり、
そうなると年号だけが消える(背景色をマスクで抜いているため)。
元の PNG は img/ui/timeline-*.png に残してあるので、差し替えるときは
そちらを更新して base64 を貼り直すこと。 */
/* 年号と一言の箱。2026-09-28 の改訂カンプ(history_1960.psd)で2段組みになった。
9/19 は「縦に積むと版面の下端(750)を超える」と判断して横に並べていたが、
カンプは年表ごと 20px 上げて(--y 690 → 670)縦に積んでいる。
カンプ実測(版面): 線/点の中心 674.25 / 年号の墨の上端 694.5 / 一言の墨の上端 709.5。
点の下端(678)から年号の墨まで 16.5。 */
.timeline__cap {
display: flex;
flex-direction: column;
align-items: center;
margin-top: calc(16.5 * var(--u-ui));
}
/* 章の内容を表す一言。年号と違ってこちらは本文書体なので、画像ではなく文字。
カンプでは [ ] で括ってある。括弧も含めて中央で点に揃える。
margin-top は「年号の墨の下端(705)から一言の墨の上端(709.5)まで 4.5」が出発点。
ただし line-height:1 だと行ボックスが font の上下(14+4=18)より小さく、
半行あきが -2.75 になって墨が箱の上端より 0.79px 下に出る。その分を引いて 3.7。
実測: 箱の上 709.5 / ベースライン 720.75 / 墨の上 709.5(カンプ一致)。 */
.timeline__word {
font-family: var(--f-mincho);
font-size: calc(12.5 * var(--u-ui));
line-height: 1;
letter-spacing: 0.02em;
color: var(--c-ink);
white-space: nowrap;
transition: color .35s ease;
margin-top: calc(3.7 * var(--u-ui));
}
.timeline__item.is-active .timeline__word { color: var(--c-accent); }
.timeline__label {
display: block;
/* 中の文字はマスクが効く環境では出さない(画像のほうを見せる)。
文字自体は消さずに残してあるので、下の @supports で拾える。 */
font-size: 0;
overflow: hidden;
/* 2026-09-28、改訂カンプ(history_1960.psd)の実測に戻した。
9/19(■6)に付けていた 1.3 倍を外す。カンプ実測(2倍)は
1960- 66x21 / 1970- 66x22 / 1990- 69x22 / 2010- 71x21 / 2020- 76x21 で、
--lw / --lh の等倍とほぼ一致する。 */
width: calc(var(--lw) * var(--u-ui));
height: calc(var(--lh) * var(--u-ui));
background-color: var(--c-ink);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
transition: background-color .35s ease;
}
.timeline__item[data-era="1960"] .timeline__label {
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAVCAYAAADy3zinAAACPklEQVR42rVYO2rDQBAdNz6AC0EqE4xvIEwuINyHoMIXUGFCupSu0rg0qeIDiBCiE4iAjiAIuoIwvoSDnTUMG+3sm5UysI12dmf3zZuPluhXpkQ0YQORs15KRBkRxUQUUbiMiSgPXJsQ0UpxbqcciOhkjbmg/+BYcx41ES0CztCw9SigeYf9NtD+RU4KILYOfXvECvtvbB3KitZj/zkEiJWhd8026qJZZhnbENHMgJYyryKs4ra5NxEp2ZrShMaNuTy3H8yMwnMJ7oU7xx6VwrvzAOASCwRpvg4FIhcYsbSYgIaaJEemt1TmkpOQHPk9kqEZ8crmZgrqTgBbO/B8I9DbScDeMCP43FQBaOTJC7UBFil9KVv3BLKyHRqIFzaXKjK6LQtPts+FXPGoCKUjGJ7q0IjZXCPswXNJ5TmgNBKloyTd+ZCMsC9ReEDouszGUX7Ptu6B8qsBolDo/pEPz+K4w3OlOaDdaVaearIALrAXzufLU59M93boPuIa4y1A7dE/lN+9olkqhbOoQsMXV4m5UG41Ua72ej9A+eWdbRYIZi44r3eCqQBva/Z26c7A/mAshCgEhK/+dwlPgF+C3m6g0od0rWums+4LBMKI2GpcRmBZbcCmqfT8/WbAs0Lvfw0fEJHlOeS3++Apv6mViGMg/pOAMO3dR7gMbsH9l0L5bTs6TIQ11zb93frW9HmpQkNj56Ev+v4gtdl99ql6PhteevnCjAhgRNvD1tZi1bcpsZpqNTH0PzIA0tAD/QDx9a/5VzqTCAAAAABJRU5ErkJggg==");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAVCAYAAADy3zinAAACPklEQVR42rVYO2rDQBAdNz6AC0EqE4xvIEwuINyHoMIXUGFCupSu0rg0qeIDiBCiE4iAjiAIuoIwvoSDnTUMG+3sm5UysI12dmf3zZuPluhXpkQ0YQORs15KRBkRxUQUUbiMiSgPXJsQ0UpxbqcciOhkjbmg/+BYcx41ES0CztCw9SigeYf9NtD+RU4KILYOfXvECvtvbB3KitZj/zkEiJWhd8026qJZZhnbENHMgJYyryKs4ra5NxEp2ZrShMaNuTy3H8yMwnMJ7oU7xx6VwrvzAOASCwRpvg4FIhcYsbSYgIaaJEemt1TmkpOQHPk9kqEZ8crmZgrqTgBbO/B8I9DbScDeMCP43FQBaOTJC7UBFil9KVv3BLKyHRqIFzaXKjK6LQtPts+FXPGoCKUjGJ7q0IjZXCPswXNJ5TmgNBKloyTd+ZCMsC9ReEDouszGUX7Ptu6B8qsBolDo/pEPz+K4w3OlOaDdaVaearIALrAXzufLU59M93boPuIa4y1A7dE/lN+9olkqhbOoQsMXV4m5UG41Ua72ej9A+eWdbRYIZi44r3eCqQBva/Z26c7A/mAshCgEhK/+dwlPgF+C3m6g0od0rWums+4LBMKI2GpcRmBZbcCmqfT8/WbAs0Lvfw0fEJHlOeS3++Apv6mViGMg/pOAMO3dR7gMbsH9l0L5bTs6TIQ11zb93frW9HmpQkNj56Ev+v4gtdl99ql6PhteevnCjAhgRNvD1tZi1bcpsZpqNTH0PzIA0tAD/QDx9a/5VzqTCAAAAABJRU5ErkJggg==");
}
.timeline__item[data-era="1970"] .timeline__label {
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAVCAYAAADy3zinAAACLElEQVR42rVYO07EMBCdehE0CCIuEIkWlCIH2CYFiCINJVumArRtyj2Ad7XaG2Sl3CFInCLKZUCRHDGy7PGMbUZykeTZ8/G88TgAf5IBwAoNjsxzSgCoAOCeiV8ZY3l3iZ4x7oJY70Hr5trrlREAfoyREfi1Y848BgDILXOUA+8bnWWtgwU3AUARE4SNwwBXIBqmA0WiQJi7PXnwm9BA1Dq9ar2bLgNA47DSd737C0UGwomZOk9aD9b5jJ4rI9NMp3ojUwqtw9zMPJYiyhMIbKSrJmBjlVB/aaQ6GIGk6IK/f6cMREYYufWsg3dHIhMR6IFB2z1BzWQZ0aJvd551Ok9m2eQDzTkSwaV2u0C4XUwg9oQDinmi+NaxyY2nQJaCYuiilkiOhLNb9K0UpDhHcAbVnpMttW6rnNAi10Qx+vL0GAuuZ+hcM9J+L8hG7MPVfxRLM9rKU/W5BWtkHHsnAdUkFGZFM/MUI7zrytJpdgx9mG6HRM6pgEIdtEjO6O44/MwE+FbQLPWpa8StBztnx6ee0wdQAs+pGN0vVUw5PQzV4lep0go71QgL5MDA54L+YMGdBYF4iT3/TZ73zDlTgB4OjV4R5o3IdnPUsRX3EeFHplNtYPfXMKiUpIeQBmLFvIS5CuQYYB9Vh3rjVhwlksalF1zCbBenOsC+teUnkMn96JunJCNaYb9g/suIMbYiuH5O9ctuo4NxYmDPARcbFdvxIVo2qCZ0jDsIKb+5cYZXwUahOwAAAABJRU5ErkJggg==");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAVCAYAAADy3zinAAACLElEQVR42rVYO07EMBCdehE0CCIuEIkWlCIH2CYFiCINJVumArRtyj2Ad7XaG2Sl3CFInCLKZUCRHDGy7PGMbUZykeTZ8/G88TgAf5IBwAoNjsxzSgCoAOCeiV8ZY3l3iZ4x7oJY70Hr5trrlREAfoyREfi1Y848BgDILXOUA+8bnWWtgwU3AUARE4SNwwBXIBqmA0WiQJi7PXnwm9BA1Dq9ar2bLgNA47DSd737C0UGwomZOk9aD9b5jJ4rI9NMp3ojUwqtw9zMPJYiyhMIbKSrJmBjlVB/aaQ6GIGk6IK/f6cMREYYufWsg3dHIhMR6IFB2z1BzWQZ0aJvd551Ok9m2eQDzTkSwaV2u0C4XUwg9oQDinmi+NaxyY2nQJaCYuiilkiOhLNb9K0UpDhHcAbVnpMttW6rnNAi10Qx+vL0GAuuZ+hcM9J+L8hG7MPVfxRLM9rKU/W5BWtkHHsnAdUkFGZFM/MUI7zrytJpdgx9mG6HRM6pgEIdtEjO6O44/MwE+FbQLPWpa8StBztnx6ee0wdQAs+pGN0vVUw5PQzV4lep0go71QgL5MDA54L+YMGdBYF4iT3/TZ73zDlTgB4OjV4R5o3IdnPUsRX3EeFHplNtYPfXMKiUpIeQBmLFvIS5CuQYYB9Vh3rjVhwlksalF1zCbBenOsC+teUnkMn96JunJCNaYb9g/suIMbYiuH5O9ctuo4NxYmDPARcbFdvxIVo2qCZ0jDsIKb+5cYZXwUahOwAAAABJRU5ErkJggg==");
}
.timeline__item[data-era="1990"] .timeline__label {
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAVCAYAAAD/wUjgAAACJ0lEQVR42rVYsW6DQAz1zNgOp6hTVTVSpk4MqHOWbBlYWDowMlZZM+YDGFr+gKr8Q1TlK1B+JhXqIVkW2D4ftXQL53tnHvY7HwB/5gAgIUNjKwDYAcDeY1hsDQC5x0mMGM6v38ACNgDdyKiFNc3EmnEclPsugTEQcDXEz1ooYM+8yDi+mPWJEqMT4i6E9VcrIXufJQcE1ijIOANA5l/wEQAqEtCn4gNgjPUERs2UKvYrfNmknkgtqawlQiCFYqMXEqhjMFqmDDiMwS5ofko3WmF+EUJwdnBWkS83lx2c4WwtyVyqyGSHfC4QodQcIdo0XDEBWzBoLCc0lzIYZ+SXxBLSBMxpcVzAKcD5ajO1RH6ZhZA7ZYZI6r1lSmZ83gdglEaMjIkjWEM+hRTcMjhY8FZGDOz3FKBzYPQ1aUhOsiQT1P1HaAL7GVI6RhBxjB8BhDRLa8hUsCMxNSFiHM8zGN8BGOuFtKz+L0Koys+No7CXBuMkfPWQk+oYqyGaFMs98w3pL0K6w90MRsusuSlPGVzi+cx7To1oEUoDlB8U3Wkv9A2dsr84zoi70xLijCJ0VTZKoLwwShglcyRrMunekiFaQjrDlZ3DqJRrpIzMF4grOEMqZc1z9m7UngPzq2EToDOLHVMpOTYtd4U0QDek5m1sJi/kWRZDiLZkqEo/RO411W9oMVpGC/LYX4mJJ2LIjjfB9zXmjkDuGkVk3BnSod6XsvXfLPwCTXigI3JR+EMAAAAASUVORK5CYII=");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAVCAYAAAD/wUjgAAACJ0lEQVR42rVYsW6DQAz1zNgOp6hTVTVSpk4MqHOWbBlYWDowMlZZM+YDGFr+gKr8Q1TlK1B+JhXqIVkW2D4ftXQL53tnHvY7HwB/5gAgIUNjKwDYAcDeY1hsDQC5x0mMGM6v38ACNgDdyKiFNc3EmnEclPsugTEQcDXEz1ooYM+8yDi+mPWJEqMT4i6E9VcrIXufJQcE1ijIOANA5l/wEQAqEtCn4gNgjPUERs2UKvYrfNmknkgtqawlQiCFYqMXEqhjMFqmDDiMwS5ofko3WmF+EUJwdnBWkS83lx2c4WwtyVyqyGSHfC4QodQcIdo0XDEBWzBoLCc0lzIYZ+SXxBLSBMxpcVzAKcD5ajO1RH6ZhZA7ZYZI6r1lSmZ83gdglEaMjIkjWEM+hRTcMjhY8FZGDOz3FKBzYPQ1aUhOsiQT1P1HaAL7GVI6RhBxjB8BhDRLa8hUsCMxNSFiHM8zGN8BGOuFtKz+L0Koys+No7CXBuMkfPWQk+oYqyGaFMs98w3pL0K6w90MRsusuSlPGVzi+cx7To1oEUoDlB8U3Wkv9A2dsr84zoi70xLijCJ0VTZKoLwwShglcyRrMunekiFaQjrDlZ3DqJRrpIzMF4grOEMqZc1z9m7UngPzq2EToDOLHVMpOTYtd4U0QDek5m1sJi/kWRZDiLZkqEo/RO411W9oMVpGC/LYX4mJJ2LIjjfB9zXmjkDuGkVk3BnSod6XsvXfLPwCTXigI3JR+EMAAAAASUVORK5CYII=");
}
.timeline__item[data-era="2010"] .timeline__label {
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAAAVCAYAAAAU9vPjAAACK0lEQVR42rVYsWrDMBA96ObSpRBMfiBgOnvIB3jx7sVDoe2YoVPWbM0HuKH1Hxjqf/DgrzD+mZSADIeQpXeSciBCktO90+nd6SQis+REVBFRQUQJ+ctiJxXMSdVIhPMWeVGYIX4bpSWiq2HMRFQK7DQrNjLHvNkwLw3wHcGEZF4JDB+HCHY+VubVK/qPd8QUR31iqZCogHCg3GKnZ3q9oniqnOM2toa5lWLn7XMUMKfTMDPltx7snW9wOA1NuVownWHFRqY5aao/y/+jIC0TR32xYWYCTKOUIP0GpmeSEVgQX3QGMjkFfUoAW7lPcFrlOHk6nIA7xNlzjsAcF5slmEFiY0YhKH48hUOYwzFrEHO6R2BSxy7x4lcITpY1+WY6mxWdNwHmBGBGYU0VUCNu8gPotsJa8iwoCVGbwxOQCo0AvBEufBMBs/VoKkUnGXoKpYLgPAUspvXEjBKcXAtMCbLL1Wz1QP4jrDgLMLuYafWgFbGDgGEVeHJcA3c6BmZjuXJUyInyBwRzy/RPFj3eD3WBzNkxnS8wOL0gOKWL9p3HFcTGiBrsTdB6gmC+Mp33EOactIZJkp9HgJJov4GeREegJs4xepwauIBK2JNZGPkZsS+xvRjwQnz0DUwGvOUgD1B7TW80UHcA/PkVBKcwYLYemM6rQWhwTL3RVathCCMvwr6ksmD2Icf3md3KL+qzYb/x78twyfJINjEH98IUX7ASwSZzzA64c1nlHxNJo3yS3memAAAAAElFTkSuQmCC");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAAAVCAYAAAAU9vPjAAACK0lEQVR42rVYsWrDMBA96ObSpRBMfiBgOnvIB3jx7sVDoe2YoVPWbM0HuKH1Hxjqf/DgrzD+mZSADIeQpXeSciBCktO90+nd6SQis+REVBFRQUQJ+ctiJxXMSdVIhPMWeVGYIX4bpSWiq2HMRFQK7DQrNjLHvNkwLw3wHcGEZF4JDB+HCHY+VubVK/qPd8QUR31iqZCogHCg3GKnZ3q9oniqnOM2toa5lWLn7XMUMKfTMDPltx7snW9wOA1NuVownWHFRqY5aao/y/+jIC0TR32xYWYCTKOUIP0GpmeSEVgQX3QGMjkFfUoAW7lPcFrlOHk6nIA7xNlzjsAcF5slmEFiY0YhKH48hUOYwzFrEHO6R2BSxy7x4lcITpY1+WY6mxWdNwHmBGBGYU0VUCNu8gPotsJa8iwoCVGbwxOQCo0AvBEufBMBs/VoKkUnGXoKpYLgPAUspvXEjBKcXAtMCbLL1Wz1QP4jrDgLMLuYafWgFbGDgGEVeHJcA3c6BmZjuXJUyInyBwRzy/RPFj3eD3WBzNkxnS8wOL0gOKWL9p3HFcTGiBrsTdB6gmC+Mp33EOactIZJkp9HgJJov4GeREegJs4xepwauIBK2JNZGPkZsS+xvRjwQnz0DUwGvOUgD1B7TW80UHcA/PkVBKcwYLYemM6rQWhwTL3RVathCCMvwr6ksmD2Icf3md3KL+qzYb/x78twyfJINjEH98IUX7ASwSZzzA64c1nlHxNJo3yS3memAAAAAElFTkSuQmCC");
}
.timeline__item[data-era="2020"] .timeline__label {
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAVCAYAAADsFggUAAACSElEQVR42s2YvWrDMBDHr6s7dQjBY5dACJ1KBj9Aluxe0jFjtpasGTr0AdyheQOX+h2SkqcQfhkXgwrHIev+khzaA4GR5PPPp/uQROSWKRGtbZtRvGRWxzLy/Z6jtC2Vo9cxp5FlRUQtEXWOdrQfRuSBiMyADpTDDHBUARzzRA6vbAYAeTOAnq2io018H9GB6DEpxpoKZe9ElNv+RyK6sLGLR08u9PTQd3alv1h/7Qkd6Qkz299zfLOxk4fjXujZ2H9BOVQ5MCX7gTlnNmcoF3DDLhzjjaLjDeDg31hGzmmAf/EKXw1fPvD9zFLkGZdM2JzzCBw7ZbwCIuoSY7DKuv9WqTS+pHkAVl6uvpSjZdmC6aNSvNTHcQYWJ0m4B706xg0IwJNxkchxcIy3IMcTm7e6hsEqJe7R6lOIonAtDq2SrkRRGFUKxSDTgD1OBuSY/84BK+7szj00r4TkQrQ4lX/I4ZUWUBwCehsJakbmuIqH1WBu4h9vFJ25krRJ2TcZ0AvrK3B4ZS8SaBYQLj5ZK+EtZRd4nEE5yoHwnihHKvWnOrsaIV5w45nH90mzAON24I0F58jA003uOSaqBluKCejVzAbcLqAesBiBYxPBkYUYTE7eRVYxA4TBPqAy7yM5WsBzn1PyFq9EL4l5r3HckaHeZRKMJTlqJYKi5RO4h0LK8MlxRSP7CrAyp3BcHHNlX/SRqAqARPZPjefdckSOSgnrWA71MFvZ9sFuDH5vMI6OZ+TsVTBvMTZMpiCH/O4QSwzHzm6eo+QHw/fUHSL5qD8AAAAASUVORK5CYII=");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAAAVCAYAAADsFggUAAACSElEQVR42s2YvWrDMBDHr6s7dQjBY5dACJ1KBj9Aluxe0jFjtpasGTr0AdyheQOX+h2SkqcQfhkXgwrHIev+khzaA4GR5PPPp/uQROSWKRGtbZtRvGRWxzLy/Z6jtC2Vo9cxp5FlRUQtEXWOdrQfRuSBiMyADpTDDHBUARzzRA6vbAYAeTOAnq2io018H9GB6DEpxpoKZe9ElNv+RyK6sLGLR08u9PTQd3alv1h/7Qkd6Qkz299zfLOxk4fjXujZ2H9BOVQ5MCX7gTlnNmcoF3DDLhzjjaLjDeDg31hGzmmAf/EKXw1fPvD9zFLkGZdM2JzzCBw7ZbwCIuoSY7DKuv9WqTS+pHkAVl6uvpSjZdmC6aNSvNTHcQYWJ0m4B706xg0IwJNxkchxcIy3IMcTm7e6hsEqJe7R6lOIonAtDq2SrkRRGFUKxSDTgD1OBuSY/84BK+7szj00r4TkQrQ4lX/I4ZUWUBwCehsJakbmuIqH1WBu4h9vFJ25krRJ2TcZ0AvrK3B4ZS8SaBYQLj5ZK+EtZRd4nEE5yoHwnihHKvWnOrsaIV5w45nH90mzAON24I0F58jA003uOSaqBluKCejVzAbcLqAesBiBYxPBkYUYTE7eRVYxA4TBPqAy7yM5WsBzn1PyFq9EL4l5r3HckaHeZRKMJTlqJYKi5RO4h0LK8MlxRSP7CrAyp3BcHHNlX/SRqAqARPZPjefdckSOSgnrWA71MFvZ9sFuDH5vMI6OZ+TsVTBvMTZMpiCH/O4QSwzHzm6eo+QHw/fUHSL5qD8AAAAASUVORK5CYII=");
}
/* 保険。マスクが使えない環境では画像をやめて文字で出す。
書体は Futura PT ではなくなるが、年号が消えるよりはよい。 */
@supports not ((-webkit-mask-image: url("x")) or (mask-image: url("x"))) {
.timeline__label {
width: auto;
height: auto;
font-family: var(--f-sans);
font-size: calc(11 * var(--u-ui));
letter-spacing: .06em;
line-height: 1;
white-space: nowrap;
background: none;
color: var(--c-ink);
transition: color .35s ease;
}
.timeline__item.is-active .timeline__label { background: none; color: var(--c-accent); }
}
/* 橙にするのはいま読んでいる年代だけ。通り過ぎた年代は黒に戻す。
点の大きさもカンプ実測どおり 8 → 11.5(1.44倍)。 */
.timeline__item.is-active .timeline__dot { background: var(--c-accent); transform: scale(1.44); }
.timeline__item.is-active .timeline__label{ background-color: var(--c-accent); }
/* ============================================================
08-09 EPILOGUE / CTA
写真モザイクは 12 枚を board 内に .el で配置し、
その上にクリーム色のベールと中央のハイライトを重ねて淡く飛ばす。
============================================================ */
/* エピローグ2画面の下地。カンプは冷たいグレーではなく暖色のクリーム */
/* 紙地と同じ理由で、地は ::before に描いて JS から消せるようにする */
.sec--epilogue::before,
.sec--cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--c-cream);
opacity: var(--bg-a, 1);
}
/* 閉じの背景。TOP とまったく同じ12枚・4列3段を画面いっぱいに敷く。
写真はこの1組だけ。この上に透過アンバーの矩形をかぶせて暖色に振る。 */
.epilogue__photos {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
pointer-events: none;
}
.epilogue__photos img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 円が縮むのに合わせて、写真の上に重なってくる透過のアンバー。
原色のTOPグリッドを閉じの暖色へ引き寄せる層。
写真より上・文字より下に置くので、文字の読みやすさは変わらない。
濃さは JS が 0 → amberMax まで上げる。 */
.epilogue__amber {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
/* 8/31 改訂。地色 #EBE7E3 に、他の章と同じチリチリの粒(noise.gif)を重ねる。
写真をどれだけ透かすかは JS 側(amberMax)で決める。 */
background-color: #EBE7E3;
background-image: url("../img/ui/noise.gif");
background-size: 150px 150px;
background-repeat: repeat;
}
/* TOP で広がりきった白い円。ここでは縮めず、覆ったまま薄くなって消える
(裏の淡い写真へのクロスフェード)。
版面ではなく画面の中心に置く(版面は縦にスクロールするため)。
縁のぼかしは TOP の円と同じ。画面を覆う倍率で使うので縁は画面外にある。 */
.epilogue__circle {
position: absolute;
z-index: 5;
left: 50%;
top: 50%;
width: calc(601 * var(--u));
height: calc(601 * var(--u));
margin: calc(-300.5 * var(--u)) 0 0 calc(-300.5 * var(--u));
pointer-events: none;
border-radius: 50%;
background: radial-gradient(circle closest-side,
rgba(235,231,227,1) 0%,
rgba(235,231,227,1) 85%,
rgba(235,231,227,.55) 93%,
rgba(235,231,227,0) 100%);
/* 動かすのは濃さだけ(大きさは refresh のときに一度決めるだけ) */
will-change: opacity;
}
/* 見出しは
で2行。それ以外では折り返さない。
あわせて組み方をカンプに合わせる:
・約物(、。)は半角に詰める … halt。これが無いと2字ぶん(40px)広がる
・字送りは 0 … 他章の .06em のままだと 17字で 41px 広がる
2026-09-09 のカンプで PC も2行組み・中央揃えになった
(SP は左端 32.5 揃えのままなので css/sp.css で戻す)。 */
.sec--epilogue .hd {
white-space: nowrap;
font-feature-settings: "halt" 1;
letter-spacing: 0;
text-align: center;
}
/* 2026-09-09 のカンプで級数が上がった。行送りは 70px のまま。
カンプ実測から出した級数:
・墨の左端を9字ぶん最小二乗で合わせると 40 x 1.27〜1.29 = 50.7〜51.7
・「こ」「れ」「の」の墨の高さ(34.0 / 41.5 / 34.5)から見ると 49〜51
・行送りは「こ」の墨の上端どうしで 156.5 → 226.5 = ちょうど 70
カンプは Photoshop 側の明朝なので字形が少し違い、1px 前後は詰められない。
その範囲の真ん中を取って 51 とした。
墨の上端を --y に合わせる margin-top も測り直し(枠の上から墨まで 14.0)。
SP はカンプが 9/1 のままなので css/sp.css で共通の値に戻す。 */
.sec--epilogue .hd:not(.hd--cta) {
font-size: calc(51 * var(--u));
line-height: calc(70 / 51 * 1em);
margin-top: calc(-14 * var(--u));
}
/* 一文字ずつ出すために JS が span に割る(js/main.js の splitChars)。
出るときだけ動かすので、出そろったあとは transform を持たない。
inline-block にしないと transform が効かない。
will-change は付けない。17字ぶんの層が最後まで残ってしまう。
このページはもともと will-change の指定が多く(実測 120要素)、
増やすと合成の負担が上がって、ほかの写真の描き直しが間に合わなくなる。
動いているあいだはブラウザが自分で層に上げるので、指定しなくても足りる。 */
.sec--epilogue .hd .ch {
display: inline-block;
}
/* エピローグの本文はカンプでは中央組み(全17行が版面の中央 720 に揃っている)。
他章は左揃えなので、ここだけ中央にする。
枠も中央に置き直した(x386 → 420。幅 600 のまま = 420〜1020)。
※ 幅を変えるときは js/main.js の layoutEpilogue にある 600 も直すこと。
あちらは枠の実寸から --u を逆算していて、この数値と対になっている。
SP のカンプ(epilogue_sp.psd)は左端 31 揃えなので css/sp.css で戻す。 */
.sec--epilogue .body__inner { text-align: center; }
/* エピローグの本文は「送らない」章なので、枠に入りきらないと下が切れてしまう
(この章は kind:'tall' で版面ごと送るため、本文の送り applyText は動かない)。
級数を 16 に上げて 1行ぶんはみ出したので、枠を中身に追従させる。
高さが実測どおりになれば overflow が 0 になり、下端フェードのマスクも外れる。 */
.sec--epilogue .body {
height: auto;
/* 切らない・ぼかさない。はみ出したら重なって見えるので気づける。
枠で切ると、下の行が黙って消えてしまう。 */
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
/* 本文が伸びたぶん、その下にあるものをまとめて押し下げる。
--epi-extra は js/main.js の layoutEpilogue が実測して入れる(単位なしの版面px)。 */
.sec--epilogue .epilogue-role,
.sec--epilogue .epilogue-sign,
.sec--epilogue .hd--cta,
.sec--epilogue .cta__buttons,
.sec--epilogue .cta__links {
top: calc((var(--y) + var(--epi-extra, 0)) * var(--u));
}
.sec--epilogue .hd,
.sec--epilogue .body,
.sec--epilogue .epilogue-role,
.sec--epilogue .epilogue-name,
.sec--epilogue .epilogue-sign,
.sec--epilogue .cta__buttons,
.sec--epilogue .cta__links,
.sec--epilogue .logo,
.sec--epilogue .copyright {
z-index: 2;
}
/* ---------- 縦長の版面(1440 x 1500)----------
通常の board は 750 の版面を画面中央に置くが、この章だけ 1500 ある。
中央寄せをやめて上端に合わせ、残りは JS が y で送る。
transform を空けておかないと gsap の y と取り合いになるので、
横位置は left の計算で出す。 */
.board--tall {
left: calc(50% - 720 * var(--u));
top: 0;
width: calc(1440 * var(--u));
/* 本文が伸びたぶん版面も伸ばす。伸びた版面はそのまま送る量になるので、
はみ出しはスクロールで吸収される(--epi-extra は js が入れる)。 */
height: calc((1500 + var(--epi-extra, 0)) * var(--u));
transform: none;
}
/* ---------- 08 EPILOGUE 1(代表挨拶) ---------- */
.epilogue-role {
z-index: 2;
height: auto;
font-family: var(--f-mincho);
font-size: calc(15 * var(--u));
letter-spacing: .08em;
color: var(--c-ink-soft);
white-space: nowrap;
}
/* 2026-08-31 改訂で活字の氏名から手書きの署名に戻った。
.epilogue-name は使わなくなったが、書体まわりの指定は残しておく。 */
.epilogue-sign {
z-index: 2;
object-fit: contain;
object-position: right bottom;
pointer-events: none;
}
.epilogue-name {
height: auto;
font-family: var(--f-mincho);
font-weight: 400;
font-size: calc(40 * var(--u));
line-height: 1;
/* 字送りなし。全角4字+半角空き=4.25em=170px で、カンプの墨幅とちょうど同じ */
letter-spacing: 0;
color: var(--c-ink);
white-space: nowrap;
}
/* ---------- CTA ---------- */
.hd--cta {
/* カンプ実測: 級数のみ 40→38、行送りは 70px を維持。
行間の詰まり方が変わるため、墨の上端合わせの margin-top も実測して個別に調整。
2026-09-09: ベースラインを実測したところ -28 だと墨が --y より 8px 上に出ていた。
枠の上から墨まで 20px なので -20 に直した(墨の上端 = --y になる)。 */
font-size: calc(38 * var(--u));
line-height: calc(70 / 38 * 1em);
margin-top: calc(-20 * var(--u));
text-align: center;
white-space: nowrap;
}
/* ページ末尾の CTA も、押すものなので版面と一緒には縮めない(--u-ui)。
窓が狭いと文字が 8px まで落ち、すぐ上の本文(16px)の半分になっていた。
見出し(.hd--cta)はそのまま --u。各章の見出しと同じ大きさの並びなので、
ここだけ実寸で止めると、章見出しの倍の大きさになって浮いてしまう。
横位置は --x(409)ではなく画面の中央から引く。実寸で止めたまま --x を使うと
幅だけ据え置きで左端が寄っていき、右にはみ出す(768px で 71px 溢れた)。 */
.cta__buttons {
z-index: 2;
height: auto;
display: flex;
justify-content: center;
align-items: center;
gap: calc(20 * var(--u-ui));
/* カンプ実測 x410〜1029.5。中心はちょうど版面の中央(720)。 */
left: calc(50% - (620 * var(--u-ui)) / 2);
width: calc(620 * var(--u-ui));
}
/* 2026-09-03 のカンプで、枠だけの淡いボタンから純黒の塗りに変わった。
カンプ実測: 300x80・塗り rgb(0,0,0)・角丸なし・白文字は墨の高さ 18.5px。
2026-09-10、epilogue.psd に mouseover アートボードが追加された。
epilogue3 との差分を取ると、変わるのはこの2つのボタンと、
下のテキストリンクの丸だけ(ヘッダーの CTA は変わらない)。
カンプ実測(2倍) 通常: 塗り #000000・文字 #FFFFFF・枠なし
ホバー: 塗り #FFFFFF・文字 #000000・枠 2px(=1px) #555555
枠は通常の状態にも透明で持たせておく。あとから足すと箱の大きさが動くため。 */
.cta__btn {
display: flex;
align-items: center;
justify-content: center;
width: calc(300 * var(--u-ui));
height: calc(80 * var(--u-ui));
background: #000;
border: calc(1 * var(--u-ui)) solid transparent;
font-family: var(--f-mincho);
font-size: calc(19 * var(--u-ui));
letter-spacing: 0;
color: #FFF;
white-space: nowrap;
box-sizing: border-box;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cta__btn:hover,
.cta__btn:focus-visible {
background: #FFF;
border-color: #555;
color: #000;
}
/* ボタンの下のテキストリンク(2026-09-03 のカンプで追加)。
カンプ実測: 行 x535.5〜903.5 y1357〜1376.5、2つのあいだ 41.5。
丸は 20x20 の純黒、中の三角は 6.0x6.5 の白で、丸の中心から右へ 1.0 ずらす
(三角は重心が左に寄るので、その分だけ右へ置くと中央に見える)。 */
.cta__links {
z-index: 2;
height: auto;
display: flex;
justify-content: center;
align-items: center;
gap: calc(41.5 * var(--u-ui));
left: calc(50% - (368 * var(--u-ui)) / 2);
width: calc(368 * var(--u-ui));
}
.cta__link {
position: relative;
display: flex;
align-items: center;
gap: calc(9 * var(--u-ui));
font-family: var(--f-mincho);
font-size: calc(15 * var(--u-ui));
letter-spacing: 0;
line-height: 1;
color: var(--c-ink);
white-space: nowrap;
}
.cta__link::before {
content: "";
flex: 0 0 auto;
width: calc(20 * var(--u-ui));
height: calc(20 * var(--u-ui));
border-radius: 50%;
background: #000;
transition: background-color .25s ease, box-shadow .25s ease;
}
/* 中の白い三角。丸の左端から測って置く(::before と同じ流れに乗せない) */
.cta__link::after {
content: "";
position: absolute;
left: calc(8 * var(--u-ui));
top: 50%;
transform: translateY(-50%);
border-left: calc(6 * var(--u-ui)) solid #FFF;
border-top: calc(3.25 * var(--u-ui)) solid transparent;
border-bottom: calc(3.25 * var(--u-ui)) solid transparent;
transition: border-left-color .25s ease;
}
/* ホバーはボタンと同じ裏返し。カンプ実測(2倍)は
丸 #FFFFFF・枠 2px(=1px) #555555・三角 #000000。文字の色は変わらない。
枠は box-shadow の内側で描く。border にすると丸が 20 より大きくなる。 */
.cta__link:hover::before,
.cta__link:focus-visible::before {
background: #FFF;
box-shadow: inset 0 0 0 calc(1 * var(--u-ui)) #555;
}
.cta__link:hover::after,
.cta__link:focus-visible::after { border-left-color: #000; }
/* ============================================================
演出まわりの初期状態
JS(GSAP)が読み込めなかった場合は .no-motion が付き、
すべて表示済みの状態にフォールバックする
============================================================ */
/* 演出が動かない環境では、本文を隠したままにせず
枠内でスクロールして最後まで読めるようにする */
.no-motion .body__inner { transform: none !important; }
.no-motion .body {
-webkit-mask-image: none;
mask-image: none;
overflow-y: auto;
overscroll-behavior: contain;
}
.no-motion .hd,
.no-motion .ph,
.no-motion .numeral,
.no-motion .top__lead { opacity: 1 !important; visibility: visible !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ============================================================
1画面展開モード
JS(js/main.js)が有効なときだけ に .is-paged が付く。
9つの章を同じ位置に重ねて置き、常に1画面だけを見せる。
ページ自体は縦に長く、スクロール量に比例して中身が進む。
スクロールの受け皿は JS 側(ScrollTrigger の pin)が作るので、
ここでは重ねる指定だけを行う。overflow:hidden にしてはいけない。
============================================================ */
.is-paged main {
position: relative;
width: 100%;
height: 100vh;
height: 100svh;
height: 100dvh; /* 実際に見えている高さ。アドレスバーの出入りに追従する */
}
/* 章の高さは main の 100% ではなく、直接 dvh で取る。
ScrollTrigger は pin をかけるとき main に
「height: 745px」のようにピクセルで焼き込む(inline style)。
iPhone でスクロール中にアドレスバーが引っ込むと表示領域は広がるが、
main は焼き込まれた高さのままなので、100% だと章もそのままで、
画面の下に紙地の帯が残る(実機で発生。これがバーまわりの不具合の正体)。
章が main より少しはみ出しても main に overflow は掛けていないので問題ない。 */
.is-paged .sec {
position: absolute;
inset: 0;
height: 100%;
height: 100dvh;
overflow: hidden;
}
/* SP のエピローグは画面より高く組んであるが、
ステップ送りでは1画面に収める */
@media screen and (max-width: 767px) {
.is-paged .sec--epilogue {
height: 100%;
height: 100dvh;
overflow: hidden;
}
}
/* 読み込み直後の一瞬だけ隠す(index.html の頭で付く)。
visibility なら場所は取ったままなので、JS 側の採寸には影響しない。
display:none にすると採寸が全部 0 になるので使わない。 */
.is-booting main,
.is-booting .timeline { visibility: hidden; }