@charset "utf-8";

/* ====================================
   Kizuna AI 活動10周年 特設サイト — style.css

     1. 変数
     2. ベース
     3. 読み込みの覆いと、ページを移るときの白い幕
     4. 背景レイヤー（固定モデル）
     5. ヘッダー
     6. main（ページレベル Grid）
     7. 共通パーツ
     8. index 固有
     9. history 固有
    10. music / character 固有
    11. フッター
    12. 768px 以上
    13. 1024px 以上
   ========================================= */


/* =======================================
   1. 変数

   色の実測元：
     kizunaai.com（テーマ ka_official の pc.css / local.css / sp.css）
     暗色のみ homecoming.kizunaai.com
   コントラスト比はいずれも白（#ffffff）に対する実測値♡
   ============================================== */
:root {
    /* --- 色 --- */
    --c-bg: #ffffff;
    --c-bg-sub: #f5f5f5;
    --c-pink: #ee4f87;
    /* 面 罫線 大きい文字のみ  3.44:1 */
    --c-pink-deep: #e63875;
    /* バッジ ホバー            4.05:1 */
    --c-pink-text: #cc2b64;
    /* 白地に置ける唯一のピンク  5.13:1 */
    --c-pink-ink: #c23664;
    /* 目次のホバー時の字面      5.28:1 */
    --c-cyan: #6aebed;
    /* 面 罫線のみ 文字に使わない 1.43:1 */
    --c-dark: #1a1a1a;
    --c-text: #3b3b3b;
    /* 11.20:1 */
    --c-text-mute: #767676;
    /*  4.54:1 */
    --c-line: #e5e5e5;
    --c-on-dark-mute: #b0b0b0;
    /* 暗色の上でのみ使う  8.03:1 */

    /* --- ページレベルのカラム（既定 ＝ 狭い画面 ＝ 1カラム） --- */
    --col-model: 34%;
    --col-1: minmax(0, 1fr);
    --col-2: 0px;
    --col-content: 1;

    /* --- 背景モデル --- */
    --bg-model-x: 78%;
    --bg-model-y: 100%;
    --bg-model-h: 62%;
    --bg-model-opacity: 0.15;

    /* character の内容区だけで使う書体 90年代の紙面に寄せた丸ゴシック 
       ★ ヘッダー フッター 配色は全ページ同じまま
         変えるのは character の main の中だけ 
       ★ 最後は全ページ共通の書体に戻るようにしてある 丸ゴが無い環境でも
         「別の顔の字」が出るだけで、崩れることはない 
         Mac … ヒラギノ丸ゴ／Windows ＋ Office … HG丸ｺﾞｼｯｸM-PRO／
         素の Windows … メイリオ（全機にある 游ゴシックより丸く太い） */
    --font-round: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
        "HGMaruGothicMPRO", "Meiryo",
        "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "Yu Gothic Medium", "Yu Gothic", sans-serif;

    /* 人物の上に文字が乗る場所で使う白いにじみ 
       影ではなく光 キャラクターの配色（白＋ピンク）に合わせている */
    --glow: 0 0 10px #ffffff, 0 0 24px #ffffff, 0 0 44px #ffffff;


    /* --- 浮きの段階 白地の上なので影は薄く、近い影と遠い影の2枚重ね 
       近い影が接地を、遠い影が高さを出す 数値は2段だけに絞る --- */
    --lift-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.10);
    --lift-2: 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 36px rgba(0, 0, 0, 0.16);

    /* ヘッダーの高さ 貼り付く位置と画面の高さの計算に使う 
       js/main.js が実測値（px）で上書きするので、ここは
       スクリプトが動かないときの目安値 */
    --header-h: 1.3rem;

    /* --- 余白 行長 --- */
    --pad-x: 1.25rem;
    --wrap-max: 42rem;

    /* ブロックの地色の既定 ページ側で差し替える*/
    --surface-default: var(--c-bg);

    /* 通栏ブロックの内側パディング 
       広い画面では人物側だけを空けて、内容の左端を他のブロックと揃える */
    --full-pad-s: var(--pad-x);
    --full-pad-e: var(--pad-x);
}


/* ==========
   2. ベース
   ========*/
body {
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 0.9375rem;
    line-height: 1.9;
}

a:hover,
a:focus-visible {
    color: var(--c-pink-text);
}


/* ================================================
   3. 読み込みの覆いと、ページを移るときの白い幕

   色は白1色　images/loading.gifを中央に置く
   ページを移るときの幕もまったく同じ白なので、次のページの読み込みが
   長引いた場合は白がそのまま続くだけで、幕から覆いへの切り替わりが見えない
   ============================================================== */

html[data-veil]::before {
    content: "";
    position: fixed;
    inset: 0;
    /* サイトの最大は 2100（music の人物）それより上 */
    z-index: 9000;
    background-color: var(--c-bg);
    opacity: 1;
    transition: opacity 400ms ease;
}

/* 読み込み中だけ */
html[data-veil="load"]::before {
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /* そのままの寸法 */
    background-size: 160px 93px;
    animation: veil-failsafe 0s 8s forwards;
}

html[data-veil-hide]::before {
    opacity: 0;
}

@keyframes veil-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}


/* ====================================
   4. 背景レイヤー（固定モデル）

   position: fixed スクロールしても動かない
   pointer-events: none 全画面がクリック
   狭い画面では全面に薄く敷く background-position の % は
   「画像の X% 点を容器の X% 点に合わせる」指定なので、
     画像の寸法が変わっても左右の位置が保たれる
   ========================================= */
/* 人物が「画面に貼り付いていられる区間」＝ main の高さぶん 
   ★ position: fixed だと最後まで居座るので、フッターに上から
     ばっさり切られた人物が残る　枠を main と同じ高さにして
     sticky にすれば、フッターが入ってくるのと同時に外れて
     本文と一緒に上へ抜ける  高さを数える必要はない 
   ★ z-index: -1 で main の中の一番下に置く main 自身が z-index: 2 の
     積み重ねの文脈なので、この -1 は main の外へは出ない
     ＝ 渡りの黒（z-index: 0）や文字の輪より手前、本文より後ろ、
     という今までの前後関係がそのまま保たれる */

/*渡りの黒（z-index: 0）
             ↓
       文字の輪（文字的圆环）
             ↓
       背景人物
             ↓
       正文 */

.bg-track {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.bg-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    opacity: var(--bg-model-opacity);
    background-repeat: no-repeat;
    background-position: var(--bg-model-x) var(--bg-model-y);
    background-size: auto var(--bg-model-h);
}

/* =======================================
   4-1. 文字の輪（index のヒーローだけ）

   4枚の同心円（1920×1920 「Kizuna Ai ♥」
   外から順に半径 91〜100% / 71〜81% / 53〜60% / 38〜43%、
   #cc2b64 と #3b3b3b が交互

   ★ 4枚とも同じ寸法
     回す速さも4枚とも同じ（同じ duration） 向きだけ交互に反転させる
     奇数が既定の向き、偶数が animation-direction: reverse 

   ★ 人物より後ろに置く .bg-stage（z-index: 1）の手前に来ないよう、
     .site-main（z-index: 2）の外に出して z-index: 0 に置いている

   ★ ヒーローの高さぶんだけ置き、position: absolute なので本文と一緒に
     流れて消える 人物（fixed）はその場に残るので、
     スクロールすると輪だけが上へ抜けていく

   ここJavaScriptなし
   ======================================================= */
/* ★ 輪が「動かずにいる区間」は2画面ぶん
     1画面目（ヒーロー）と2画面目（心臓）のあいだは画面に貼り付いたままで、
     3画面目からは本文と一緒に流れて消える

     fixed にすると最後まで居座って本文の下に透け続け、
     absolute にすると1画面目と一緒に消えてしまう 
     sticky なら「どこからどこまで動かないか」を長さで書ける 
     JavaScript は要らない */
/* ★ 画面の高さはここで1回だけ決める
     1画面目（ヒーロー）は 100svh 2画面目（心臓）はそれより高くして、
     下に渡り（テープと黒い山）のための余白を取る
     輪の枠 渡りの位置も、すべてこの2つから計算する */
.p-index {
    --screen2-h: 118svh;
    --screen2-end: calc(100svh + var(--screen2-h));

    /* --- 2画面目 → 3画面目の渡り--- */
    /* music の帯より太い こっちは画面を横切る主役なので */
    --tape-h: 4rem;
    --tape-tile: calc(var(--tape-h) * 1920 / 72);
    /* 傾き　ここだけ4度 */
    --x-tilt: 4deg;
    /* 画面の端での落差 ＝ tan(4度) × 画面幅の半分 */
    --x-drop: 3.5vw;
    /* 傾けた端が持ち上がる量 幅 116% の半分 58% × tan(4度) */
    --x-rise: 4.05vw;
    /* テープが交差する高さ 持ち上がるぶんを見込んでおかないと、
       左右の端の上角が枠の上で切られる */
    --x-cross: calc(var(--tape-h) / 2 + var(--x-rise) + 1rem);
    /* 2画面目の終わりからどれだけ上へ食い込ませるか
       交差点が画面幅によらず同じ位置に来るよう --x-cross に連動させる */
    --x-lift: calc(var(--x-cross) + 1svh);

    /* --- 3画面目（1件ずつ入れ替わる区画）--- */
    /* 1段ぶんのスクロール量 これを越えると次の件へ切り替わる */
    --step-h: 50svh;
    /* 段は「まだ何も出ていない」＋6件＝7段
       貼り付く1枚（100svh）＋ 7段ぶんのスクロールが区画の高さになる */
    --screen3-h: calc(100svh + var(--step-h) * 7);

    /* --- 3画面目 → 4画面目の渡り ＝ 漏斗--- */
    /* 心臓の幅 下絵の黒い縁に素材の輪郭を当てて出した実測値
       （y=340〜1060 を20px刻みで当てて残差 1.25px）
       高さは素材の比（1208 / 1610）から出す */
    --funnel-w: 101.5vw;
    --funnel-h: calc(var(--funnel-w) * 1208 / 1610);
    /* 3画面目の終わりから4画面目の中身までの空き
       黒い面の下端（心臓の上から23%）がここより下に来ないと、
       3画面目の最後の数コマで左右に白い角が覗く
       最小 61.4% 余裕を見て 72%（16:9 でちょうど1画面ぶん）*/
    --screen4-gap: calc(var(--funnel-h) * 0.72);
    /* 先端が4画面目へ食い込む深さ 下絵の実測（228 / 1080）*/
    --funnel-tip: calc(var(--funnel-h) * 0.156);
}

.rings-track {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    /* 輪の切れる線を黒い山の裾より下へ逃がす
       裾 ＝ 交差点 ＋ テープの半分 ＋ 落差 */
    height: 240vh;
    height: calc(var(--screen2-end) + var(--tape-h) + var(--x-drop) + 6svh);
    pointer-events: none;
}

.rings {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

.rings__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 一番外の輪が画面からはみ出す大きさ 切れているほうが輪が大きく見える */
    width: max(102vw, 86vh);
    height: auto;
    /* 四隅の文字とも重なる そのままの濃さだと白いにじみでは
       読めないので、図案として見える限界まで薄く
       人物は 1.0 のままなので中心が濃く周囲が薄い */
    opacity: 0.55;
    translate: -50% -50%;
    animation: ring-turn 80s linear infinite;
}

/* 外から2枚目 4枚目だけ逆回り */
.rings__ring:nth-child(even) {
    animation-direction: reverse;
}

@keyframes ring-turn {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

/* index 4画面目のハート 2コマだけの切り替え
   振れ幅 --rock はハート側が持っているので、ここは向きだけ */
@keyframes heart-rock {
    0% {
        rotate: calc(var(--rock) * -1);
    }

    50% {
        rotate: var(--rock);
    }

    100% {
        rotate: calc(var(--rock) * -1);
    }
}


/* music だけ背景レイヤーを使わない 人物は軌道の中心に1体だけ
   同じ絵を1ページに二度出さないため
   本文の列も分けないので既定の1カラムのまま全幅 */
.p-music .site-main {
    display: block;
}

/* ヒーローの間の取り方に合わせて本文側も少し広く
   地色はここでまとめて塗らないこと ページ単位で塗ると
   あとから足した面の色に詳細度で勝ってしまって効かなくなる */
.p-music {
    --block-pad-y: 3.5rem;
}

/* 人物の列が無いので内容を中央に置いて幅を広げる
   ただし段落だけは元の行長のまま 広げると読みにくい */
.p-music .block__inner {
    max-width: 56rem;
    margin-inline: auto;
}

.p-music .block__inner>.text,
.p-music .block__inner>.note {
    max-width: var(--wrap-max);
}

/* 地色から浮かせる */
.p-music .table-scroll {
    padding: 1.25rem 1.5rem;
    background-color: var(--c-bg);
    box-shadow: var(--lift-1);
}

/* ページごとのカメラ 4枚とも同じ箱 同じ照明 同じ目線の高さ */
.p-index .bg-stage {
    background-image: url(../images/bg-model-index.png);
}

.p-history .bg-stage {
    background-image: url(../images/bg-model-history.png);
}

.p-character .bg-stage {
    background-image: url(../images/bg-model-character.png);
}


/* =============================================
   4-2. 2画面目 → 3画面目の渡り（index）

   下絵：2本のテープが中央で交差し、その下が黒い山形になる
   テープの左右の外側は白のまま（＝心臓の画面がそのまま見えている）

   黒は人物より後ろ 下絵では人物が黒の上に立っているので、
     本文（.site-main は z-index: 2）の中には置けない
     文字の輪と同じ層（z-index: 0）に、文書に対する絶対位置で置く

   位置の基準は「2画面ぶん」＝ 200svh
     1画面目（ヒーロー）と2画面目（心臓）がどちらも 100svh なので、
     ちょうど2画面目の終わりに当たる そこから --x-lift だけ上へ食い込ませる

   覆うもの   … 文字の輪が切れる線（輪の枠を 204svh にして裾より下で切る）
   覆わないもの … 心臓 下端は 190svh 以下、テープの上端は 196svh 付近なので、
                下絵どおり心臓の先がテープの上へ出る
   =================================================== */
.crossover {
    /* 寸法と角度は .p-index にまとめてある（輪の枠も同じ値を使う）*/
    /* 心臓と同じく 1024px 以上だけ それ未満では区画の高さが中身なりになり、
       位置の基準の 100svh / --screen2-h が当てにならない */
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(218vh - var(--x-lift));
    top: calc(var(--screen2-end) - var(--x-lift));
    /* z-index は書かない 書くとここが積み重ねの文脈になって、
       中のテープを人物より前へ出せなくなる auto のままなら
       黒い山は人物の後ろ、テープは人物の前、と振り分けられる */
    height: 130vh;
    height: 130svh;
    /* テープは傾けるぶん画面より広く取ってあるので、ここで切る
       これが無いと横スクロールバーが出る */
    overflow: hidden;
    pointer-events: none;
}

/* 3画面目が貼り付きで長くなるぶん黒も伸ばす
   下端 ＝ 4画面目の中身が始まる位置 ＋ 先端の食い込み*/
[data-js] .crossover {
    height: calc(var(--x-lift) + var(--screen3-h) + var(--screen4-gap) + var(--funnel-tip));
}

/* 黒い山 頂点は中央のテープの交差点、裾は画面の端へ下る
   テープの下辺と黒の上辺が重なるよう、頂点をテープの半分ぶん下げてある */
.crossover::before {
    content: "";
    position: absolute;
    /* 下端は心臓の上から 23% で止める そこは心臓が画面より広いので
       四角の下辺が左右とも心臓の内側に隠れて継ぎ目が出ない
       色は同じ #1a1a1a なので重なった部分は1つの面に見える */
    inset: 0 0 calc(var(--funnel-h) * 0.77) 0;
    background-color: var(--c-dark);
    clip-path: polygon(50% calc(var(--x-cross) + var(--tape-h) / 2),
            100% calc(var(--x-cross) + var(--tape-h) / 2 + var(--x-drop)),
            100% 100%,
            0 100%,
            0 calc(var(--x-cross) + var(--tape-h) / 2 + var(--x-drop)));
}

/* ===================================================
   4-3. 3画面目 → 4画面目の渡り ＝ 漏斗（index）

   下絵：黒い面の下端が心臓の形で終わる  上半分は四角い黒に
   隠れていて見えないので、画面には下半分の V だけが残り、漏斗に見える

   素材は 1610×1208 単色 #1a1a1a の透過 PNG（--c-dark と同じ色）

   心臓は人物より後ろ、文字の輪より前 .crossover が z-index を
   持たないので、この ::after は輪より後 人物より先に描かれる

   幅 101.5vw ＝ 画面より少し広い いちばん広いところが画面幅を超えるので、
   四角い黒との継ぎ目が左右の端で切れて見えない
   はみ出す 1.5vw は .crossover の overflow: hidden が切る
   ======================================================= */
.crossover::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: var(--funnel-w);
    height: var(--funnel-h);
    translate: -50% 0;
    background-image: url(../images/heart-funnel.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


/* テープ 地は黒（下絵どおり） インクはピンクのままで 3.40:1、
   大きい文字なので使える テープだけが人物より前、黒い山は後ろ

   z-index は 3 2 では足りない 人物を main（z-index: 2）の中へ
   移したので、人物より前に出るには main より前が要る
   ヘッダーも 3 だが後ろに書いてあるので覆われない
   テープが横切る区間に main の中身は無い（3画面目の見出しも年も、
   区画が貼り付いてから出る）*/
.crossover .tape__strip {
    top: var(--x-cross);
    z-index: 3;
    background-color: var(--c-dark);
    rotate: calc(var(--x-tilt) * -1);
}

.crossover .tape__strip+.tape__strip {
    rotate: var(--x-tilt);
}

.crossover .tape__strip+.tape__strip .tape__run {
    animation-direction: reverse;
}




/* ======================================
   5. ヘッダー
   z-index を効かせるために position: relative が要る
   （静的な要素は z-index を無視するので背景レイヤーに潜る）
   ==================================================== */
.site-header {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem 1.25rem;
    padding: 0.125rem var(--pad-x);
    background-color: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
}

.site-header__logo img {
    width: 88px;
}

.global-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
}

.global-nav__list a {
    display: block;
    padding: 0 0 0.1rem;
    border-bottom: 2px solid transparent;
}

.global-nav__list a[aria-current="page"] {
    color: var(--c-pink-text);
    border-bottom-color: var(--c-pink);
}


/* ================================
   6. main（ページレベル Grid）

   列は 2 本の変数だけで決まる
   狭い画面   … --col-1: 1fr / --col-2: 0    → 実質 1カラム
   768px 以上 … 人物側と内容側に分かれる
   ======================================= */
.site-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--col-1) var(--col-2);
}


/* =============
   7. 共通パーツ
   ============= */

/* --- 内容ブロック --- */
/* 地の色は変数で渡す ページ既定は body、個別はブロック自身
   .p-index .block { ... } のようにページ側を後代セレクタで書くと
   詳細度がクラス2つになって、あとから足した .block--pink が黙って負ける
   要素自身に載る変数ならこの事故が起きない */
.block {
    grid-column: var(--col-content);
    padding: var(--block-pad-y, 2.75rem) var(--pad-x);
    background-color: var(--surface, var(--surface-default));
    border-bottom: 1px solid var(--c-line);
}

.block__inner {
    max-width: var(--wrap-max);
}

/* 暗色ブロック ピンクとぶつける硬い面 */
.block--dark {
    --surface: var(--c-dark);
    color: #ffffff;
}

/* --- マーカー ---
   下絵の「黒い帯に白抜き」 重要度を足すわけではないので strong ではなく b
   白 × #1a1a1a は 17.4:1 行をまたいでも帯が切れないよう clone */
.marker {
    padding: 0.06em 0.3em;
    background-color: var(--c-dark);
    color: var(--c-bg);
    font-weight: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* --- 見出し（和洋併記） --- */
.section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.7rem;
    margin-bottom: 1.25rem;
    padding-left: 0.75rem;
    border-left: 4px solid var(--c-pink);
}

.section-title__ja {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.section-title__en {
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    color: var(--c-text-mute);
}

.block--dark .section-title__en {
    color: var(--c-on-dark-mute);
}

/* =============================================
   7-1. 面の色（大きな色面）

   主題色はピンク それとほぼ黒をぶつける
   シアンは面には使わない（広い面にすると青が主役に見えてしまう）
   罫線と小さなマークだけ

   どのブロックを何色にするかは中身で決める 交互にするために交互にしない

     ピンク #ee4f87
     ほぼ黒 #1a1a1a
     白 サブ灰

   黒い面にはピンクが差してあるが、スリープ章だけは1つも使わない
   沈黙は「色が無いこと」で示す

   コントラスト（その面との比）
     ピンクの上の #1a1a1a … 5.06:1  ○
     ピンクの上の #cc2b64 … 1.49:1  ✕ 消える
     黒の上の #ee4f87     … 5.06:1  ○
     黒の上の #cc2b64     … 3.40:1  △ 大きい文字だけ
   =============================================== */
.block--pink {
    --surface: var(--c-pink);
}

.block--sub {
    --surface: var(--c-bg-sub);
}

/* 色面は必ず画面いっぱい 列の中だけ塗ると「色のついた欄」になり、
   面として効かない 内容の左端は他のブロックと揃えたままにする */
.block--pink,
.block--heart,
.block--sub,
.block--dark {
    grid-column: 1 / -1;
    padding-inline: var(--full-pad-s) var(--full-pad-e);
    border-bottom: 0;
}

/* 色面の切り口を斜めに 傾きは music のテープと同じ約3度で、
   サイト全体で角度を1つに揃えてある

   clip-path で上下を斜めに切り、切り落とした分だけ margin で隣を食い込ませる
   （やらないと切り口に地色の三角が残る） 切られる帯の分は padding で足してある
   対応していないブラウザでは切り口が水平になるだけ */
.block--pink,
.block--dark {
    --edge: 2vw;
    margin-block: calc(var(--edge) * -1);
    padding-block: calc(var(--block-pad-y, 2.75rem) + var(--edge));
    clip-path: polygon(0 0, 100% var(--edge), 100% 100%, 0 calc(100% - var(--edge)));
}

/* テープを置いた区画は上の切り口をテープ側が受け持つ
   ここで二重に切るとテープの下に地色の三角が出る

   上の切り口は clip-path の外へ出す（0 ではなく -2px） 区画の上端が
   分数ピクセルに来ると縁のアンチエイリアスでその1行が半分しか塗られず、
   下の白い地が細い線になって覗く 1464 / 1478 / 1490 / 1520px で出た
   （1440 1500 では出ない） 1px 重ねているのは念のため */
.block--joined {
    margin-block-start: -1px;
    padding-block-start: var(--block-pad-y, 2.75rem);
    clip-path: polygon(0 -2px, 100% -2px, 100% 100%, 0 calc(100% - var(--edge)));
}

/* 面の上で読めなくなる色は、個別に指定して回らずトークンごと差し替える
   子孫は var() で読んでいるだけなので、これだけで中身が全部入れ替わる

   差し替えは必ず「中身」の側に書くこと 面を決めている要素自身に
   --c-pink を書くと、同じ要素の --surface: var(--c-pink) まで
   差し替え後の値を拾ってピンクの面が黒くなる
   カスタムプロパティは同じ要素の中で先後がない */
/* .block--heart は 768px 未満ではただのピンクの面 心臓の形は広い画面だけ */
.block--heart {
    --surface: var(--c-pink);
}

.block--pink .block__inner,
.block--heart .block__inner {
    --c-pink: var(--c-dark);
    --c-pink-text: var(--c-dark);
    --c-text-mute: var(--c-dark);
    --c-line: var(--c-pink-deep);
    color: var(--c-dark);
}

/* 黒い面の上では、濃いピンク #cc2b64 が 3.40:1 で小さい文字に足りない
   面のピンク #ee4f87 のほうが 5.06:1 で強いので、そちらへ寄せる
   ＝ 黒い面の差し色はピンク ここが撞色の見せ場になる */
.block--dark .block__inner {
    --c-pink-text: var(--c-pink);
    --c-text-mute: var(--c-on-dark-mute);
    --c-line: var(--c-text-mute);
}


/* ============================================
   7-2. テープ（色が変わる境目に置く帯）

   素材は 1920×72 単色 #cc2b64 の透過 PNG 左右がつながっているので
   1枚ぶんちょうど動かすと途切れずに流れる 480px 960px では合わない

   置き場所の規則：色が変わる境目にだけ置く 飾りを増やすためではなく、
   区画が切り替わったことを示すために置く

   帯は傾けてあり、その下の地も同じ角度で2色に割ってある
   つまり境目の直線をテープが隠している

   JS は使っていない 切っても帯は出る（止まるだけ）
   ============================================== */
.tape {
    --tape-h: 2.5rem;
    --tape-tile: calc(var(--tape-h) * 1920 / 72);
    /* 帯の傾き 地の割れ目もこの角度に合わせる */
    --tape-from: var(--c-bg);
    --tape-to: var(--c-bg);
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    height: calc(var(--tape-h) + 7vw);
    overflow: hidden;
    /* 地を斜めに2色で割る この割れ目の上にテープが乗る */
    background-image: linear-gradient(183deg, var(--tape-from) 50%, var(--tape-to) 50%);
}

.tape__strip {
    position: absolute;
    top: 50%;
    /* 傾けたときに端が見えないよう、画面より広く取って両端を切る */
    left: -8%;
    width: 116%;
    height: var(--tape-h);
    overflow: hidden;
    background-color: var(--c-bg);
    rotate: -3deg;
    translate: 0 -50%;
}

.tape__run {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(--tape-tile));
    height: 100%;
    background-image: url(../images/tape-kizunaai.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    animation: tape-run 26s linear infinite;
}

@keyframes tape-run {
    from {
        translate: 0 0;
    }

    to {
        translate: calc(var(--tape-tile) * -1) 0;
    }
}

/* 2本を交差させる 大きな切り替わりのときだけ使う */
.tape--cross {
    height: calc(var(--tape-h) * 2.4 + 7vw);
}

.tape--cross .tape__strip {
    top: 34%;
}

.tape--cross .tape__strip+.tape__strip {
    top: 66%;
    background-color: var(--c-dark);
    rotate: 3deg;
}

/* 反対向きに流す 同じ動きが2本並ぶと1本に見える */
.tape--cross .tape__strip+.tape__strip .tape__run {
    animation-direction: reverse;
}

/* 境目の2色 使うのは music の1か所だけなので、1組しか定義しない */
.tape--sub-dark {
    --tape-from: var(--c-bg-sub);
    --tape-to: var(--c-dark);
}

/* --- 二級ページのページヘッダー --- */
.page-head {
    grid-column: var(--col-content);
    padding: 3rem var(--pad-x) 2rem;
    background-color: var(--c-bg);
}

.page-head__years {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding-bottom: 0.2rem;
    border-bottom: 3px solid var(--c-cyan);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--c-text-mute);
}

.page-head__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.8rem;
}

.page-head__title-ja {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.page-head__title-en {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--c-text-mute);
}

.page-head__lead {
    margin-top: 1rem;
    max-width: var(--wrap-max);
}

/* --- 本文中の段落 --- */
.text+.text {
    margin-top: 1em;
}

/* --- 小見出し（h3 / h4） --- */
.sub-title {
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-text-mute);
}

.block--dark .sub-title {
    color: var(--c-on-dark-mute);
}

/* --- 注記 --- */
.note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: var(--c-text-mute);
}

.block--dark .note {
    color: var(--c-on-dark-mute);
}

/* --- 表 -------------------------------------------------
   発売日 タイトル 備考のように「軸が3つある」データだけ表にする
   年表は1軸なのでリストのまま
   狭い画面でも表そのものは崩さず、親を横スクロールさせる
   ------------------------------------------------------ */
.table-scroll {
    margin-top: 1.5rem;
    overflow-x: auto;
}

.data-table {
    min-width: 34rem;
    font-size: 0.8125rem;
    line-height: 1.7;
}

.data-table caption {
    margin-bottom: 0.6rem;
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--c-text-mute);
}

.data-table thead th {
    padding: 0.4rem 0.8rem 0.4rem 0;
    border-bottom: 2px solid var(--c-pink);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--c-text-mute);
    white-space: nowrap;
}

.data-table td {
    padding: 0.55rem 0.8rem 0.55rem 0;
    border-bottom: 1px solid var(--c-line);
    vertical-align: top;
}

.data-table td:first-child {
    white-space: nowrap;
    color: var(--c-text-mute);
}

.data-table__band {
    padding: 1.1rem 0 0.4rem;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--c-pink-text);
}


/* ==============
   8. index 固有
   ============ */

/* --- ヒーロー 地色を敷かないので背景の人物がそのまま見える --- */
/* ヒーローは画面いっぱい 地色を敷かないので人物がそのまま見える
   広い画面では文字を左上と右下の角へ逃がし、中央を人物に空ける */
.hero {
    grid-column: 1 / -1;
    padding: 3rem var(--pad-x);
}

.hero__meta {
    margin-top: 2.5rem;
}

.hero__label {
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--c-pink-text);
}

.hero__years {
    margin-top: 0.1rem;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.hero__title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hero__title-ja {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.hero__title-en {
    font-size: 0.8125rem;
    letter-spacing: 0.28em;
    color: var(--c-text-mute);
}

.hero__tagline {
    margin-top: 0.4rem;
    font-size: 1rem;
    color: var(--c-pink-text);
}

/* --- 自ページ内リンク（課題必須） --- */
.page-toc {
    grid-column: var(--col-content);
    padding: 1rem var(--pad-x);
    background-color: var(--c-bg-sub);
    border-block: 1px solid var(--c-line);
}

.page-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-size: 0.8125rem;
}

.page-toc__list a {
    border-bottom: 1px solid var(--c-pink);
}

/* --- はじまり ページ内で一番大きい文字ブロック --- */
.origin__date {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--c-pink-text);
}

.origin__lead {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.origin__code {
    margin-top: 1.5rem;
    font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

/* --- 10年の歩み（ダイジェスト） --- */
/* 年は time を2つ並べた範囲 区切りは HTML に置いてあるので、
   読み上げでも「2016 から 2017」として読める
   段組みの表示（年を縦に積む）ときだけ、この区切りを隠す */
.digest__dash {
    white-space: pre;
}

.digest-list>li {
    display: grid;
    gap: 0.1rem 1.25rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--c-line);
}

.digest__years {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--c-text-mute);
}

.digest__title {
    font-size: 1rem;
    font-weight: 700;
}

/* --- 各ページへの導線 --- */
.card-list {
    display: grid;
    gap: 1rem;
}

.card {
    display: block;
    height: 100%;
    padding: 1.25rem;
    background-color: var(--c-bg-sub);
    border-left: 4px solid var(--c-pink);
}

.card:hover,
.card:focus-visible {
    background-color: var(--c-dark);
    color: #ffffff;
}

.card__title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.card__title span {
    margin-left: 0.6em;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    color: var(--c-text-mute);
}

.card:hover .card__title span,
.card:focus-visible .card__title span {
    color: var(--c-on-dark-mute);
}


/* --------------------------------
   8-2. index の右軸レイアウト

   ブロックは画面いっぱい 地色なし（人物を隠さない）
   中身だけを右端へ寄せる
   見出しと日付は右揃え、本文は左揃えのまま
   本文まで右揃えにすると行頭が揃わず、日本語でも読みにくくなる
   ----------------------------------- */
.p-index .block {
    grid-column: 1 / -1;
    border-bottom: 0;
}

.p-index .block__inner {
    margin-inline-start: auto;
}

/* 区画の切れ目の細い罫
   地を敷いていない区画にだけ引く 色面を持つ区画は面そのものが境目なので、
     そこに引くと面の上に線が1本走る しかも色面の中では --c-line を
     差し替えてあるので、黒い面の上には灰色（#b0b0b0）の線が出てしまう  */
.p-index .block+.block:not(.block--heart):not(.block--sub):not(.block--dark):not(.block--on-dark) .block__inner {
    padding-top: 2.75rem;
    border-top: 1px solid var(--c-line);
}

/* 見出しは右揃え ピンクの罫も右へ移す
   flex を逆向きにするので HTML 上は日本語が先のまま（意味の順序を保つ）で、
   画面では英字ラベルが左、日本語が右に出る */
.p-index .section-title {
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0.75rem;
    border-left: 0;
    border-right: 4px solid var(--c-pink);
}

.p-index .origin__date,
.p-index .origin__lead {
    text-align: right;
}

/* 「絆」の十年 単色 #cc2b64 PNG */
.p-index .section-title--kizuna {
    padding-inline: 0;
    border-inline: 0;
}

.p-index .section-title--kizuna img {
    width: min(100%, 17rem);
    height: auto;
}

/* 人物の上に乗る文字にだけ白いにじみを敷く */
.p-index .hero__title,
.p-index .hero__meta,
.p-index .page-toc__list a {
    text-shadow: var(--glow);
}


/* ===============================
   9. history 固有

   年表は ol の入れ子 章が ol、章の中の出来事も ol
   section と ol の両方に main と同じ列指定を繰り返すことで、
   入れ子になっても内容カラムの位置がずれない
   ===================================== */
.timeline-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--col-1) var(--col-2);
}

.timeline {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--col-1) var(--col-2);
}

.timeline__chapter {
    grid-column: var(--col-content);
    padding: 2.75rem var(--pad-x);
    background-color: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
}

/* スリープ章 活動が止まっていた期間なので画面からも人物が消える */
.timeline__chapter--sleep {
    grid-column: 1 / -1;
    padding-inline: var(--full-pad-s) var(--full-pad-e);
    background-color: var(--c-dark);
    color: #ffffff;
    border-bottom-color: var(--c-dark);
}

.timeline__chapter--sleep .section-title {
    border-left-color: var(--c-on-dark-mute);
}

.timeline__chapter--sleep .section-title__en,
.timeline__chapter--sleep .timeline__period,
.timeline__chapter--sleep .chapter-band__line {
    color: var(--c-on-dark-mute);
}

/* 10周年イヤーの章 */
.timeline__chapter--anniv {
    grid-column: 1 / -1;
    padding-inline: var(--full-pad-s) var(--full-pad-e);
    background-color: var(--c-pink);
    border-bottom-color: var(--c-pink);
}

.timeline__chapter--anniv .timeline__inner {
    --c-pink: var(--c-dark);
    --c-pink-text: var(--c-dark);
    --c-text-mute: var(--c-dark);
    --c-line: var(--c-pink-deep);
    color: var(--c-dark);
}

.timeline__inner {
    max-width: var(--wrap-max);
}

/* 章の期間 h2 の中に入れてあるので、縦組みでは見出しの一部として並び、
   横組みでは帯の中の1マスになる*/
.timeline__period {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    color: var(--c-text-mute);
}

/* --- 横組みの入れ物 ---------------------------------------
   1024px 以上で JavaScript が動いているときだけ、この4つが箱になる
   それ以外では display: contents で消えるので、
   要素ツリーは変わっても、いままでどおりの縦組みの年表として読める
   ------------------------------------------------------ */
.hz-scroll,
.hz-viewport,
.hz-track,
.chapter-band,
.chapter-body {
    display: contents;
}

/* 章の要約 2文を2行に分けてある
   縦組みでは2段落、横組みでは帯の中で横いっぱいに伸ばされる2行 */
.chapter-band__line {
    color: var(--c-text-mute);
}

.chapter-band__line--sub {
    margin-bottom: 1.25rem;
}

/* 要約の中で引く語は章にひとつだけ
   白 × #cc2b64 は 5.13:1 語の重みを足すわけではないので strong ではなく b
   語の途中では折り返さない（帯の中でも、縦組みに戻ったときでも） */
.chapter-band__key {
    padding: 0.06em 0.3em;
    background-color: var(--c-pink-text);
    color: #ffffff;
    font-weight: inherit;
    white-space: nowrap;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* つながりの線 ol の並びを可視化しているので装飾ではなく情報構造 */
.timeline__events {
    border-inline-start: 2px solid var(--c-line);
}

.timeline__chapter--sleep .timeline__events {
    border-inline-start-color: #3b3b3b;
}

.timeline__events>li {
    position: relative;
    display: grid;
    gap: 0.1rem 1.25rem;
    padding-block: 0.6rem;
    padding-inline: 1.25rem 0;
}

.timeline__events>li::before {
    content: "";
    position: absolute;
    inset-block-start: 1.1rem;
    inset-inline-start: -5px;
    width: 8px;
    height: 8px;
    background-color: var(--c-pink);
}

.timeline__events time {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--c-text-mute);
}

.timeline__chapter--sleep .timeline__events time {
    color: var(--c-on-dark-mute);
}


/* --- 章の中でも大きく扱う出来事 --- */
.timeline__event--key p {
    color: var(--c-text);
}

.timeline__event--key::before {
    width: 12px;
    height: 12px;
    inset-inline-start: -7px;
    background-color: var(--c-pink-text);
}

.timeline__chapter--sleep .timeline__event--key p {
    color: #ffffff;
}

/* --- 休止と再開を対にして見せる 同じ2月26日でちょうど3年 --- */
.timeline__pair {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background-color: var(--c-bg-sub);
    border-inline-start: 4px solid var(--c-pink);
}

.timeline__pair-date {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}


/* =============================
   10. music / character 固有
   ============================ */
.album-list {
    display: grid;
    gap: 1.5rem;
}

.album {
    padding: 1.5rem 1.5rem 1.75rem;
    background-color: var(--c-bg);
    border-left: 4px solid var(--c-cyan);
    box-shadow: var(--lift-1);
}

/* ジャケット 元が 600px しか無い『Homecoming』に合わせて
   表示幅を 13rem（208px）で頭打ちにする 素材は 440px なのでちょうど実寸の約2倍
   カードと同じ白地の上に載るので、浮きはカードと同じ --lift-1 だけ
   高さは reset の img { height: auto } にまかせる（width/height 属性が比を持つ）*/
.album__cover {
    width: 100%;
    max-width: 13rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--lift-1);
}

.album__title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.album__meta {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--c-text-mute);
}

.profile {
    display: grid;
    gap: 0 1.25rem;
    border-top: 1px solid var(--c-line);
}

.profile dt {
    padding-top: 0.7rem;
    font-size: 0.8125rem;
    color: var(--c-text-mute);
}

.profile dd {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--c-line);
}

/* --- アルバムの収録曲 順番に意味があるので ol ＋ 通し番号 --- */
.tracklist {
    counter-reset: track;
    display: grid;
    gap: 0.15rem;
    font-size: 0.8125rem;
}

.tracklist>li {
    counter-increment: track;
}

.tracklist>li::before {
    content: counter(track, decimal-leading-zero);
    margin-right: 0.7em;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--c-text-mute);
}

/* --- 9週連続リリース 等間隔に並ぶ日付そのものが図になる --- */
.nine-weeks-list {
    counter-reset: week;
    margin-top: 1.5rem;
    border-top: 1px solid #3b3b3b;
}

.nine-weeks-list>li {
    counter-increment: week;
    display: grid;
    gap: 0.1rem 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #3b3b3b;
}

/* Grid の子は既定が min-width:auto なので、長い曲名が列を押し広げて
   ページ全体に横スクロールを出す 0 を許して折り返させる */
.nine-weeks-list>li>* {
    min-width: 0;
    overflow-wrap: anywhere;
}

.nine-weeks-list>li::before {
    content: "WEEK " counter(week, decimal-leading-zero);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: var(--c-pink);
}

.nine-weeks-list time {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--c-on-dark-mute);
}

.nine-weeks__title {
    font-size: 1rem;
    font-weight: 700;
}

.nine-weeks__credit {
    font-size: 0.75rem;
    color: var(--c-on-dark-mute);
}

/* --- 楽曲提供陣 順位ではないので ul --- */
.creator-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.875rem;
}

.creator-list>li {
    padding: 0.3rem 0.9rem;
    background-color: var(--c-bg);
    border-left: 2px solid var(--c-cyan);
    box-shadow: var(--lift-1);
}

/* --- テーマの一文 --- */
.theme__phrase {
    margin-bottom: 1rem;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-pink-text);
}

/* ==========================================
   10-C. character の版面：プロフィールカード

   下敷きは90年代のキャラクター紹介ページの型
   —— 小さなラベル → ハートの罫 → 名前を大きく → ハートの罫 →
   「項目：値」の並び 人物はその左で名前の輪の中に立ち、
   上げた手が右の項目欄を指す（人物は版面の内側を向く）

   面の色はこのページも「中身で決める」規則どおり：
    #profile … 白（面を敷かない） 輪と人物が主役の画面なので、
               index のヒーローと同じ理由で地色を置かない
    #credits … ピンク 「作品を支えた人」＝ music の楽曲提供陣と同じ扱い
    #theme   … ほぼ黒 事実 記録の側
     → 白 → ピンク → 黒 明暗は内容から出ている
   ============================================ */

/* --- 書体 ヘッダーとフッターは触らない（全ページ共通のまま）--- */
.p-character .site-main {
    font-family: var(--font-round);
}

/* --- ハートの罫（785×43単色 #ee4f87）------
   高さはハート1つの高さで決める 素材は1段ぶんの高さしか
     持っていないので、要素の高さがそのままハートの大きさになる
     長さは素材の長さのまま（width: auto） 素材を長く／短く描き直せば
     罫の長さもそのまま変わるので、CSS を触る必要がない
   -------------------------------------------------- */
.hearts {
    width: auto;
    height: var(--hearts-h, 0.9375rem);
    margin-block: 0.9rem;
    /* reset の max-width: 100% に当たったとき、height が実寸で
         入っているとハートが横に潰れる cover にしておけば
         大きさは保ったまま右端で切れるだけになる */
    object-fit: cover;
    object-position: left center;
}

/* --- 名前の札 ＝ このページの page-head
       共通の型（年号 ＋ 和洋併記の h1 ＋ 一文）はこのページでは出さず、
       いちばん大きい文字＝名前がそのまま h1 になっている
       1人分の札なので、見出しは「キャラクター」ではなく名前が正しい  --- */
.page-head--name {
    padding-bottom: 0;
}

.name-card__role {
    /* 肩書きは3つ並ぶので1行に収める（折れると「音楽アー／ティスト」で
         切れて読みにくい） 版面を 64rem に絞ったぶん内容の行長は約 425px しかない
         ので、字の大きさと字間の両方を詰めてある */
    font-size: 0.6875rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--c-text-mute);
}

/* 肩書き3つはそれぞれ塊にして、折り返しが区切り（／）でしか起きないようにする
   1024px では1つぶんが2行目へ落ちるが、語の途中では切れない */
.name-card__role span {
    display: inline-block;
}

.name-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.9rem;
}

/* #ee4f87 は白地で 3.44:1 大きい文字にしか使えないので、ここでしか使わない
   輪の帯と同じ色なので、名前と輪が1つの意匠として読める */
.name-card__ja {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.06em;
    color: var(--c-pink);
}

.name-card__en {
    font-size: 0.9375rem;
    letter-spacing: 0.14em;
    color: var(--c-text-mute);
}

/* --- クレジットの板---------------------
   ピンク #ee4f87 の上の #1a1a1a は 5.06:1 基準は満たすが、
     彩度の高い面の上に小さい字が4行続くと読みづらい
     原文をそのまま引いた記録なので、白い板に載せて面から浮かせる
     読みは 5.06:1 → 15.9:1 になる
     やり方は music の表を地色から浮かせているのと同じ

   面の中で差し替わったトークンはそのまま使える ——
     罫の --c-line は --c-pink-deep（#e63875）に化けているが、
     白地の上では 4.05:1 でちょうど見えるピンクの罫になる
     字の色は --c-dark なので白地で 15.9:1 触る必要がない
   --------------------------------------------------- */
/* 影はぼかさない落とし影
     右へ9px 下へ8px、ぼかし 0、色は一段濃いピンク 上と左には影が無い
     サイトのほかの場所で使っている--lift-1（2枚重ねのやわらかい影）とは
     別物で、90年代の紙面の「版ずれ」的な硬い影をそのまま採っている

   色に--c-pink-inkを使う理由：--c-pink-textは
    .block--pink .block__innerで--c-darkに差し替わってしまう
    --c-pink-inkは差し替えの対象外なので、面の中でも濃いピンクのまま出る
     実測値 rgb(204,52,106) に対して #c23664 ＝ rgb(194,54,100)  */
.credit-list {
    margin-top: 1.5rem;
    padding: 0.25rem 1.5rem 1.25rem;
    background-color: var(--c-bg);
    box-shadow: 0.5rem 0.5rem 0 var(--c-pink-ink);
}

/* 担当と名前を色ではなく太さで分ける
   面の中では --c-text-mute も --c-dark に化けているので、
   色で差をつけようとすると読みの弱いほうへ倒れる */
.credit-list dd {
    font-weight: 700;
}

/* 板に載せられない導入の一文だけは面の上に残る
   彩度の高い地の上なので、字を一段大きくして行間も広げる
   （色は変えない ピンクの上で 4.5:1 を超えるのは #1a1a1a だけ）*/
.p-character .block--pink .text {
    font-size: 1rem;
    line-height: 2.05;
}

/* --- 項目：値 の並び 罫線を引かないのが90年代の型で、
       値だけをピンクにして拾い読みできるようにする
   #credits / #theme の dl（.profile）とは別のクラスにしてある
     同じクラスに変種を足すと、あとから来る @media の .profile と
     詳細度が並んで新しい指定が黙って負ける この版で3回やった --- */
.spec-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.45rem 1rem;
}

.spec-list dt {
    font-size: 0.8125rem;
    color: var(--c-text);
}

.spec-list dt::after {
    content: "：";
    color: var(--c-text-mute);
}

/* 白地に置けるピンクは #cc2b64 だけ（5.13:1）*/
.spec-list dd {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c-pink-text);
}

.spec-list+.text {
    margin-top: 2rem;
}


/* ==================================================
   10-D. 名前の輪（character だけ）

   785×774 「Kizuna Ai ♥」の帯 #ee4f87 と #3b3b3b
   index の同心円4枚とは別の素材で、こちらは1つだけ
   回す速さと向きは index の一番外の輪と同じ（80秒 時計回り）

   置き方は index の .rings-track とまったく同じ ——
     .site-main（z-index: 2）の外に出して z-index: 0 に置く
     main の中に入れると、あの要素が積み重ねの文脈を作るので、
     どれだけ z-index を下げても人物（main の中の z-index: -1）の
     後ろへは回れない

   直径は人物の列の幅に収める 内容カラムは地色を敷くので、
     はみ出した分は縦にすぱっと切られて「欠けた円」になる

   素材は 785×774 ＝ 横に 1.4% 長い楕円 そのまま回すと縁が
     ゆらぐので、width と height に同じ値を入れて正円に直してある
     （字が 1.4% 縦長になるが、目では追えない）

   768px 未満では出さない あの幅は1カラムで、内容が全幅に
     地色を敷くので輪は完全に隠れる（＝ 読み込むだけ無駄になる）
   ========================================================== */
.char-ring-track {
    display: none;
}


/* =========================================================
   10-E. 画面の左右の帯（character だけ）

   music で使っているテープ（tape-kizunaai.png／1920×72 単色 #cc2b64 
   左右がつながっている）を90度回して画面の左右の端に立てる
   役は今までと同じ「境目を隠す」で、ここでは紙と地の境目
   版面を 64rem で止めたことで生まれた白場を画面の縁で受け止める

   左は −90度（下から上へ読む）、右は +90度 背表紙のような鏡の関係
   流れは music と同じ tape-run 回転の向きが逆なので互いに逆へ流れる

   背景画像は回せないので回すのは要素のほう 細い枠を fixed で置き、
   中の長い横帯を回す 個別変換は translate → rotate の順に効くので、
   原点を左上に置いて回したあと、はみ出した分だけ戻す

   z-index: 1 なのでヘッダー（3）とフッター（2）が上下を隠す
   枠の位置を計算しなくてよい
   1200px 未満では出さない 紙の外の余白が帯の太さに足りない
   （1152px で片側 32px、帯は 34px）
   ========================================================== */
.side-tape {
    display: none;
}


/* =================================================
   10-B. music のヒーロー：作品の軌道

   music はページを開いた瞬間が作品ギャラリー index が
   「画面いっぱいの人物＋四隅の文字」で始まるのと同じ組み方で、
   中央にあるのが人物ではなく、人物を囲む作品の軌道になっている

   このページには背景レイヤー（.bg-stage）を置いていない
     人物は軌道の中心に1体だけ 同じ絵が二重に出ないよう、
     共通の背景レイヤーではなくこの区画自身の <img> にしてある

   立体の出し方（1024px 以上）
     輪を真上からではなく斜めから見た「つぶれた円」にしてある
     奥行きの表現はすべて --sin（軌道上の縦位置）ひとつから出す
       上（--sin が負）＝奥  … 小さく 薄く 人物の後ろ
       下（--sin が正）＝手前… 大きく 濃く 人物の前
     つまり作品は人物の後ろを通り、前へ回り込んでくる

   配色は白基調のまま 暗色は history のスリープ章とフッターの役なので
     ここでは使わない シアンは罫線だけ、文字には使わない
   ======================================================== */

/* --- 狭い画面での既定 輪にはしない --- */
.orbit-hero {
    grid-column: 1 / -1;
    padding: 2.5rem var(--pad-x) 3rem;
}

.orbit-wrap {
    margin-top: 2rem;
}

.orbit-wrap__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.8rem;
}

.orbit-wrap__num {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--c-pink-text);
}

.orbit-wrap__ja {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.orbit-wrap__en {
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    color: var(--c-text-mute);
}

/* 見出しの下の1行 年の範囲と、なぜこの24件なのか（選定規則）
   輪の読み方（操作説明）は書かないので、輪にならない画面でも文が成立する */
.orbit-wrap__lead {
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--c-text-mute);
}

/* 年の範囲だけは文と切り離す index の.hero__labelと同じ体裁 */
.orbit-wrap__years {
    margin-right: 0.7em;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    color: var(--c-pink-text);
}

.orbit__figure {
    display: none;
}

.orbit__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    margin-top: 1.1rem;
}

.orbit__item {
    min-width: 0;
}

.orbit__link {
    display: grid;
    gap: 0.4rem;
}

.orbit__link img {
    width: 100%;
    aspect-ratio: 1 / 1;
    box-shadow: var(--lift-1);
}

.orbit__info {
    display: grid;
    gap: 0.1rem;
}

.orbit__name {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.orbit__date {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--c-text-mute);
}

.orbit__link:hover .orbit__name,
.orbit__link:focus-visible .orbit__name {
    color: var(--c-pink-text);
}

/* 活動休止の3年 発売順に並んだリストの中に、
   「この3年はリリースが1枚もない」というひとつの項目として置いてある
   狭い画面では列をまたぐ帯になり、1024px 以上では輪の切れ目に立つ札になる */
.orbit__gap {
    grid-column: 1 / -1;
    display: grid;
    align-content: center;
    gap: 0.15rem;
    padding: 0.85rem 1.1rem;
    background-color: var(--c-bg-sub);
    border-left: 4px solid var(--c-text-mute);
}

.orbit__gap-years {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.orbit__gap-label {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: var(--c-text-mute);
}


/* =================
   11. フッター
   ================= */
.site-footer {
    position: relative;
    z-index: 2;
    padding: 2.5rem var(--pad-x);
    background-color: var(--c-dark);
    color: #ffffff;
}

.site-footer__inner {
    display: grid;
    gap: 1.5rem;
}

.site-footer__logo img {
    width: 118px;
}

.footer-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
}

.site-footer__official {
    font-size: 0.8125rem;
}

.site-footer__official a {
    border-bottom: 1px solid var(--c-pink);
}

.copyright {
    font-size: 0.6875rem;
    line-height: 1.9;
    color: var(--c-on-dark-mute);
}


/* ==========================================
   12. 768px 以上 — ここで初めて2カラムになる

   ページごとに違うのは「人物がどちら側か」だけ
   3つの変数を差し替えるだけで左右が入れ替わる
   ============================================ */
@media (min-width: 768px) {

    :root {
        --pad-x: 2.5rem;
        /* 半身像 箱の高さの250%まで拡大して上端で合わせるので、
           胸から下は画面外に落ちる 4枚とも同じ座標系なので目線も揃う */
        --bg-model-h: 250%;
        --bg-model-y: 0%;
        --bg-model-opacity: 1;
    }

    /* 人物が左、内容が右
       character の人物は上げた手が画面の右を指すカットなので、
       内容を右に置くと手が項目欄を指す 逆だと版面の外を指す */
    .p-index,
    .p-character {
        --col-1: var(--col-model);
        --col-2: minmax(0, 1fr);
        --col-content: 2;
        --full-pad-s: calc(var(--col-model) + var(--pad-x));
    }

    /* 人物が右、内容が左 */
    .p-history {
        --col-1: minmax(0, 1fr);
        --col-2: var(--col-model);
        --col-content: 1;
        --full-pad-e: calc(var(--col-model) + var(--pad-x));
    }

    /* ヘッダーの下から始める 頭がヘッダーに隠れないように
       貼り付く位置を下げたぶん、箱の高さも同じだけ減らす
         そうしないと外れる位置がフッターより手前にずれる */
    .bg-stage {
        top: var(--header-h);
        height: calc(100vh - var(--header-h));
        height: calc(100svh - var(--header-h));
    }

    /* index のブロックは地を敷かないのが既定
       固定した人物と文字の輪がそのまま透ける
       色面を置いた区画だけ --surface で塗りつぶす

       768px 以上だけ 狭い画面には人物用の列が無いので透かす相手がおらず、
       輪と人物が本文の真下に居座って読めなくなる */
    .p-index {
        --surface-default: transparent;
    }

    /* 98% は振り切った値で、余裕のある値ではない
       内容カラムが地色を敷いて人物を遮るので、実際に見えるのは
       カラムの右端より外だけ（1440px で x=893 から先）
       100% まで振っても頭の左 3 分の 1 はカラムに隠れる
       これ以上は background-position では解けない
       測るときは tools/probes/bgstage.js */
    .p-history {
        --bg-model-x: 98%;
    }

    /* ------------------------------------------------
       12-B. character の人物 —— 顔を列のまん中に固定する

       background-position では書けない % は「箱の幅 − 絵の幅」に対する
       割合なので、必要な値が画面の縦横比で変わる この絵は列より少し広い
       だけなので、1920×900 あたりで分母が 0 に近づいて値が発散する
       （1024px で 0.60、1440px で 0.66、1920px で 1.00 が要る）

       なので要素そのものを描画寸法にして置く 高さ＝箱の 250%、
       比は画布の 819:2200 なので幅は画面の高さだけで決まる
       translate の % は要素自身の幅基準だから、絵の 55.3% の点は
       どの画面でも 55.3% そこが頭の左右のまん中（画布の 0.383〜0.723）
       -------------------------------------------------------- */
    .p-character .bg-stage {
        background-image: none;
    }

    .p-character .bg-stage::before {
        content: "";
        position: absolute;
        /* .bg-stage は「人物の列」ではなく画面いっぱいの箱
             （.bg-track が inset: 0 なので main と同じ幅）
             列に見えているのは、内容カラムが地色を敷いて右半分を
             覆っているから だから基準は 50% ではなく列のまん中 */
        left: calc(var(--col-model) / 2);
        top: 0;
        /* 人物の大きさは輪の直径から出す
             こうすると人物と輪が同じ1つの寸法から決まるので、
             画面が変わっても2つの比が崩れない
           ただし箱の高さを下回らせない 下回ると足が宙に浮いて
             下に白が残る（1024px で起きる） 下限を入れておけば
             人物はいつも画面の下端で切れる ＝ 下絵と同じ立ち方になる */
        height: max(calc(var(--ring-d) * 2.192),
                calc(100svh - var(--header-h)));
        aspect-ratio: 819 / 2200;
        background-image: url(../images/bg-model-character.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        translate: -55.3% 0;
        /* 白い縁取り 人物は回っている輪の上に立つので、
             輪のピンクと髪 衣装の境目が溶ける 下絵と同じように
             白で一段抜いて、輪の上でも形が読めるようにする
           CSS マスクは file:// で落ちるが drop-shadow は制限を受けない
             （history のピンクの影と同じ手）
             縦横4方向へぼかさずにずらすと、輪郭が一回り太る ＝ 縁になる
             ぼかし 0 なので、光ではなく線に見える */
        filter: drop-shadow(var(--bg-outline) 0 0 #ffffff) drop-shadow(calc(var(--bg-outline) * -1) 0 0 #ffffff) drop-shadow(0 var(--bg-outline) 0 #ffffff) drop-shadow(0 calc(var(--bg-outline) * -1) 0 #ffffff);
    }

    /* --------------
       12-C. 名前の輪
       ------ */
    /* この2つの係数は下絵（materials/ps/character设计1.jpg）に
         レンダリングを重ねて出した値 輪の直径ひとつから
         人物の大きさと輪の高さが決まる

         下絵に置かれたレンダリングの倍率は 0.778（シルエットの
         横幅の推移を 0.002 刻みで合わせた 残差 1.02px）
           絵の高さ 2200 × 0.778 ＝ 1712px、輪の直径 781px
           → 絵の高さ ＝ 輪の直径 × 2.192
         頭のてっぺんは画布の上から 46/2200 ＝ 2.09%
           → 絵の上端から頭まで 輪の直径 × 0.0458
         下絵では頭のてっぺんから輪の中心まで 輪の直径 × 0.698
           → 輪の中心 ＝（0.0458 ＋ 0.698）＝ 輪の直径 × 0.744（箱の上端から）

       直径に % を使ってはいけない（一度これで壊した）
         カスタムプロパティの中の % は使う側のプロパティで解決されるので、
        --col-model: 38%を width で使えば画面の幅の 38%、
         height で使えば箱の高さの 38% になる
         人物の高さをこの変数から出している以上、単位は vw / svh で持つ
         38vw は列の幅（38%）よりスクロールバーのぶん数 px 広いので、
         1.5rem 引いてある  */
    .p-character {
        /* 人物の白い縁の太さ 絵の横幅は約 420px なので 3px ＝ 0.7%
           下絵の縁（幅 783px に対して約 5px ＝ 0.64%）とほぼ同じ */
        --bg-outline: 3px;
        /* 直径 列の幅に収める（はみ出すと内容カラムの地色に切られる）
           画面が低いときは高さに合わせる 34vw は --col-model と同じ値 */
        --ring-d: min(calc(34vw - 1.5rem), 66svh);
        /* 中心の高さ 人物は箱の上端合わせなので、ヘッダーの下から数える */
        --ring-y: calc(var(--header-h) + var(--ring-d) * 0.744);
    }

    /* 輪そのものは 1024px 以上でしか出さない
         768〜1023px は列が 34%（768px で 261px）しかなく、
         そこに収まる輪は人物に隠れてただのピンクの染みになる
         それでも --ring-d はここで定義しておく —— 人物の高さが
         この変数から出ているので、未定義だと height ごと無効になり
         人物が消える */

    /* -----------------------------------------------------
       12-A. index の入場 —— 背を向けたところから振り返るまで

       公式モーションの フレーム9〜90 を28コマ（3フレームおき）に間引いて
       1枚のスプライト（images/turn-index.webp 7列4行）にまとめ、
       steps() で1回だけ送る JS は使っていない
       静止状態がフレーム90（＝ bg-model-index.png）そのものなので、
       アニメーションが動かない環境でも欠けるものは無い

       コマ送りを静止画に重ねるだけだと、透過部分から下が透けて人物が
       2体見える（フレーム9と90は立ち位置が違う）
       静止画を ::before、コマ送りを ::after に分けて終わりぎわで入れ替える
       入れ替わる瞬間は同じポーズなので、粗いコマ送りが静止画へ締まるだけ

       3つの数の出どころ（tools/build-turn-sprite.py が印字する）
       スプライトの1コマは静止画と同じ生レンダー座標の箱で切ってある：
       1コマ x 460..2770 / y 267..2272、静止画 x 460..2132 / y 267..4722
       左上が同じなので、倍率と左端だけ合わせればぴったり重なる
         height     = --bg-model-h × 0.45  人物の上から45%だけ
                      （画面に出るのは 40% ちょうど どの画面高でも同じ）
         aspect-ratio 2310 / 2005          1コマの生ピクセル寸法
         translate  −36.19%                中央合わせから
                      (2310 − 1672) / (2 × 2310) だけ右へ戻すと左端がそろう
       ----------------------------------------------------------------- */
    .p-index .bg-stage {
        /* 静止画は ::before が持つ 素の背景としては置かない */
        background-image: none;
    }

    .p-index .bg-stage::before,
    .p-index .bg-stage::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    /* 完成状態＝フレーム90 アニメーションが無ければこれだけが出る

       background-position ではなく要素そのものを描画寸法にして置く
       横位置の補正が background-position では書けないため

       画布 826×2200 は全身の外接矩形だが、このページに出るのは上40%だけ
       その帯の重心は画布の中央より 9.6% 右（アルファ加重）なので、
       既定の 50% だと人物が右に寄る（1440px で約 79px）
       music の translate: -44% と同じ話

       background-position の % は「箱の幅 − 絵の幅」に対する割合なので、
       同じ 9.6% を出すのに必要な値が画面幅ごとに変わる
       （1440px なら 37.2%、1024px なら 11%）
       translate の % は要素自身の幅基準なので画面幅に左右されない */
    .p-index .bg-stage::before {
        top: 0;
        left: 50%;
        height: var(--bg-model-h);
        aspect-ratio: 826 / 2200;
        translate: -59.6% 0;
        background-image: url(../images/bg-model-index.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    /* コマ送り 既定では出さない（＝静止画の邪魔をしない）

       translate は −36.19% に、静止画と同じ 9.6% ぶんの左寄せを足した値
         2つの要素は幅が違う（2310 : 1672）ので、静止画の 9.6% は
         こちらでは 9.6 × 1672 ÷ 2310 = 6.95% 合わせて −43.14%  */
    .p-index .bg-stage::after {
        top: 0;
        left: 50%;
        height: calc(var(--bg-model-h) * 0.45);
        aspect-ratio: 2310 / 2005;
        translate: -43.14% 0;
        background-image: url(../images/turn-index.webp);
        background-repeat: no-repeat;
        background-size: 700% 400%;
        background-position: 0% 0%;
        opacity: 0;
        /* 列は1行ぶん（0.4秒）で7コマ送り、それを4行くり返す
           行は全体（1.6秒）で4コマ送る 7×4 = 28コマ
           終点が 100% ではなく 100%×列数/(列数−1) なのは、
            steps(7)が終点を含まないから 116.667% まで送って
             はじめて 0/6, 1/6 … 6/6 の7か所に止まる */
    }

    /* 入場が始まるのは 読み込みが終わってから（boot.jsが付ける印）
         CSS だけで組むと解析した瞬間に走り出して、スプライトの解読を
         待たない —— 最初の数コマが間に合わず、途中から見えていた
         起点を「文書を解析し終えた時」ではなく明示的な合図にすると、
         必ず1コマ目から始まる

         印が付かないとき（JS 無し／読み込み失敗）はアニメーションが
         宣言されないので、フレーム90 の静止画が最初から出ているだけ  */
    html[data-ready] .p-index .bg-stage::before {
        animation: turn-settle 1.6s linear 0.5s both;
    }

    html[data-ready] .p-index .bg-stage::after {
        animation:
            turn-col 0.4s steps(7) 0.5s 4 both,
            turn-row 1.6s steps(4) 0.5s 1 both,
            turn-show 1.6s linear 0.5s 1 both;
    }

    @keyframes turn-col {
        from {
            background-position-x: 0%;
        }

        to {
            background-position-x: 116.667%;
        }
    }

    @keyframes turn-row {
        from {
            background-position-y: 0%;
        }

        to {
            background-position-y: 133.334%;
        }
    }

    /* 最後のひと呼吸で静止画と入れ替える 同じポーズなので絵は動かない */
    @keyframes turn-show {

        0%,
        92% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes turn-settle {

        0%,
        92% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* 動きを減らす設定なら、最初から完成状態だけを出す */
    @media (prefers-reduced-motion: reduce) {
        html[data-ready] .p-index .bg-stage::before {
            animation: none;
            opacity: 1;
        }

        html[data-ready] .p-index .bg-stage::after {
            animation: none;
            opacity: 0;
        }
    }

    /* 768〜1023px では輪にしない 共通の .hero は四隅組みのグリッドだが、
       まだ中央に軌道を置かないので、ここでは普通の縦積みに戻す
       1024px 以上で改めてグリッドにする
       .hero と同じ詳細度だと下に書いてある .hero の grid に負けて
         ギャラリーが右半分へ押し込まれるので、2つのクラスで受ける */
    .hero.orbit-hero {
        display: block;
        min-height: 0;
    }

    /* ギャラリーはまだ輪にしない 読めることが先なので3列の並び */
    .orbit__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem 1.25rem;
    }

    /* ヒーロー：左上と右下の角に文字を置き、中央を人物に空ける */
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: calc(100vh - var(--header-h));
        min-height: calc(100svh - var(--header-h));
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .hero__title {
        grid-column: 1;
        grid-row: 1;
    }

    .hero__meta {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        margin-top: 0;
        text-align: right;
    }

    .hero__title-ja {
        font-size: 2.75rem;
    }

    .hero__years {
        font-size: 3rem;
    }

    .hero__tagline {
        font-size: 1.125rem;
    }

    .origin__date {
        font-size: 2.75rem;
    }

    .digest-list>li {
        grid-template-columns: 7rem minmax(0, 1fr);
    }

    .card-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .timeline__events>li {
        grid-template-columns: 8rem minmax(0, 1fr);
    }

    .album-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile {
        grid-template-columns: 10rem minmax(0, 1fr);
    }

    /* WEEK番号 / 日付 / 曲名 / クレジット の4つを4列に
       日付が縦に等間隔で並ぶことが「毎週1曲」の図になる */
    .nine-weeks-list>li {
        grid-template-columns: 5.5rem 6.5rem minmax(0, 1fr) minmax(0, 1fr);
        align-items: baseline;
    }

    .tracklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.15rem 1.5rem;
    }

    .theme__phrase {
        font-size: 1.75rem;
    }

    .profile dd {
        padding-top: 0.7rem;
    }

    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ====================
   13. 1024px 以上
   ==================== */
@media (min-width: 1024px) {


    /* ----------------------------------------------------
       3画面目「絆」の十年 ＝ 貼り付いて1件ずつ入れ替わる区画

       ここは JavaScript が付いているときだけの姿
         付いていないときは、上の素直な一覧のまま6件とも全部読める
         「CSS で隠して JS で見せる」ではなく、JS が隠してから動かす
         静止状態＝完成状態

       スクロール量に比例させない ある位置を越えたら次へ切り替わる
         js/main.js が現在の段を数えて、その件だけに data-shown を付ける

       黒い地はこの区画が敷いているのではなく、渡り（.crossover）の
         黒がここまで伸びている 人物はその黒の上に立っている
       --------------------------------------------------- */
    [data-js] .block--steps {
        height: var(--screen3-h);
        padding: 0;
    }

    /* 画面に貼り付く1枚 見出しはここに入るので、
       件が入れ替わっても左上は動かない */
    [data-js] .block--steps .block__inner {
        position: sticky;
        top: 0;
        max-width: none;
        height: 100vh;
        height: 100svh;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    /* 見出しは図案1枚 左上に置いて、区画のあいだ動かさない
       見えるのは3画面目が画面に貼り付いてから（下の [data-pinned]）
         貼り付く前は区画の上端＝テープの真下にいるので、
         そこに出すと渡りの上に見出しが乗ってしまう  */
    [data-js] .block--steps .section-title {
        position: absolute;
        left: 4vw;
        top: 5svh;
        z-index: 2;
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 380ms ease-in;
    }

    /* 高さで決める 年と本文が画面の高さに追従しているので、
       見出しも同じ svh に合わせておくと割りつけが崩れない */
    [data-js] .block--steps .section-title img {
        width: auto;
        max-width: none;
        height: clamp(3rem, 17svh, 10rem);
    }

    /* 貼り付いてから出す 年と同じ「黒が左右に滑る」擦り */
    [data-js] .block--steps[data-pinned] .section-title {
        clip-path: inset(0 0 0 0);
        transition: clip-path 560ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* 6件を重ねて置く 見えるのは data-shown が付いた1件だけ */
    [data-js] .block--steps .digest-list {
        display: block;
        position: absolute;
        inset: 0;
        margin: 0;
        gap: 0;
    }

    [data-js] .block--steps .digest-list>li {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* --- 年 左に大きく、縦に積む --- */
    [data-js] .block--steps .digest__years {
        position: absolute;
        left: 4vw;
        /* 上端ではなく中央で合わせる こうすると年が1つでも2つでも
             同じ高さに来る（1つだけ上に浮かない）*/
        top: 47svh;
        display: grid;
        gap: 0.05em;
        margin: 0;
        /* 斜体は字面が右へはみ出す clip-path は境界ボックスで切るので、
             余白を足しておかないと数字の右端が削れる */
        padding-right: 0.14em;
        font-size: clamp(3rem, 13svh, 11rem);
        font-style: italic;
        font-weight: 700;
        line-height: 0.95;
        letter-spacing: 0.02em;
        color: var(--c-pink);
        translate: 0 -50%;
        /* 黒が左右に滑って年を出し入れする
             出るときは、前の件が消えきってから（下の [data-shown] で遅らせる）*/
        clip-path: inset(0 100% 0 0);
        transition: clip-path 380ms ease-in;
    }

    /* 年は縦に積むので、範囲の区切りは出さない */
    [data-js] .block--steps .digest__dash {
        display: none;
    }

    /* 2つめの年は下の段 下絵どおり少し右へずらす */
    [data-js] .block--steps .digest__years time+span+time {
        margin-left: 0.5em;
    }

    /* --- 本文 右に縦組み --- */
    [data-js] .block--steps .digest__body {
        position: absolute;
        right: 5vw;
        top: 8svh;
        max-height: 84svh;
        writing-mode: vertical-rl;
        /* 本文側は黒が上下に滑る */
        clip-path: inset(0 0 100% 0);
        transition: clip-path 380ms ease-in;
    }

    [data-js] .block--steps .digest__title {
        margin: 0 0.6em 0 0;
        font-size: clamp(1.5rem, 6svh, 4rem);
        line-height: 1.1;
        color: #ffffff;
    }

    [data-js] .block--steps .digest__body .text {
        max-width: none;
        margin: 0;
        font-size: clamp(1rem, 3.2svh, 2rem);
        line-height: 1.55;
        color: #ffffff;
    }

    /* 出ている1件だけ、黒をどけて中身を見せる
         前の件が消えきる（380ms）まで待ってから出る
           待たないと、入れ替わる一瞬だけ2件が重なって見える */
    [data-js] .block--steps .digest-list>li[data-shown] .digest__years,
    [data-js] .block--steps .digest-list>li[data-shown] .digest__body {
        clip-path: inset(0 0 0 0);
        transition: clip-path 560ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
    }

    /* 本文は年より少し遅れて出す 年 → 本文の順に読ませる */
    [data-js] .block--steps .digest-list>li[data-shown] .digest__body {
        transition-delay: 520ms;
    }

    /* 年表へのリンクは左下に小さく置いたまま動かさない */
    [data-js] .block--steps .block__inner>p:last-child {
        position: absolute;
        left: 5vw;
        bottom: 7svh;
        z-index: 2;
        margin: 0;
    }

    /* 渡りと、その黒の上に載る区画の文字 心臓と同じ条件で有効にする

       どちらも [data-js] のときだけ
         3画面目の白い文字は「渡りの黒がそこまで伸びている」ことに
         寄りかかっている その黒の長さは --screen3-h（貼り付く区画の
         高さ）から出しているので、JavaScript が無くて区画が
         ただの一覧に戻ると、黒と文字の長さが合わなくなる
         スクリプトが無ければ渡りごと出さず、素直な白地の一覧にする
         （内容は1文字も欠けない）  */
    [data-js] .crossover {
        display: block;
    }

    [data-js] .block--on-dark {
        --c-text-mute: var(--c-on-dark-mute);
        --c-line: var(--c-on-dark-mute);
        color: #ffffff;
    }

    /* 文字の輪は4画面目でもう一度出す
         3画面目のあいだは渡りの黒が輪を覆っているので、
         黒が心臓の形で終わったところで輪がまた見えてくる
         枠の下端＝4画面目の終わり＝フッターの上端なので、
         輪が切れる線はフッター（z-index: 2 の黒い面）の下に隠れる */
    [data-js] .rings-track {
        height: calc(var(--screen2-end) + var(--screen3-h) + var(--screen4-gap) + 100svh);
    }

    /* 心臓は 1024px 以上だけ それ未満では心臓が小さくなり、
         下へ行くほど細くなる形に文字が収まらず、白い文字が
         心臓の外＝白地の上に落ちてしまう
         music の輪を 1024px 未満でやめているのと同じ理由
         それ未満は .block--heart の既定＝ピンクのべた面に黒い文字 */
    /* -----------------------
       はじまり ＝ 2画面目

       1画面目（ヒーロー）は文字の輪と人物、四隅に文字
       そこへ心臓の形が下から滑り込んでくるのがこの区画

       JavaScript は使っていない 輪と人物を fixed にしてあるので、
         この区画が普通にスクロールで上がってくるだけで
         「背景はそのまま、心臓だけが上がってくる」になる
         スクロールを乗っ取る必要も、位置を計算する必要もない

       地は敷かない（--surface: transparent） 心臓の外側では
         輪と人物がそのまま透ける 1画面目の四隅の文字は
         ヒーローの中にあるので、一緒に流れて消える

       素材は1610×1208単色#cc2b64PNG

       文字の大きさと位置はすべて心臓の幅から出している
         --heart-w が決まれば、見出しも本文も同じ比率で付いてくるので、
         どの画面幅でも下絵どおりの割りつけになる
         比率は下絵の実測（心臓の幅に対する％）：
           はじまり 5.5% ／ THE BEGINNING 3.9% ／ 日付 3.6%
           リード 3.1% ／ 本文 1.7% ／ hello, world 2.0%
       ------------------------------------------- */
    .block--heart {
        --surface: transparent;
        /* 心臓の寸法 高さは素材の比（1208 / 1610）から出す
           128svh の上限は、心臓の高さが画面に収まるようにするため */
        /* 幅は画面より小さく取る 112vw のように画面より広くすると、
             背の低い／狭い画面で左右のふくらみが画面外へ出てしまい、
             そこに載せた見出しと本文が心臓の外＝白地の上に落ちて消える */
        --heart-w: min(96vw, 128svh);
        --heart-h: calc(var(--heart-w) * 1208 / 1610);
        /* 人物の列を空ける左右の余白はこの区画では意味がない
             中央を占めるのは心臓なので、素直に左右対称に戻す
             これを残すと、文字が心臓の右へずれて縁からはみ出す */
        /* 心臓は画面いっぱいの飾りなので、左右の余白は取らない
           中身の幅は --heart-w が決めている */
        padding-inline: 0;
        padding-block: 0;
        display: grid;
        /* 列を明示する 書かないと暗黙の列が中身の幅（--heart-w）まで
             広がってしまい、中身の max-width: 100% が
             「広がったあとの列」を測るので歯止めにならず、横に溢れる */
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        align-content: start;
        /* 心臓の高さ（最大 96svh）より高くしてあるので、
           下に渡りのための余白がまとまって空く */
        min-height: 118vh;
        min-height: var(--screen2-h);
        background-image: url(../images/heart.png);
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: var(--heart-w) auto;
        text-align: center;
    }

    /* 心臓（#cc2b64）の上に置ける文字は白（5.13:1）
       濃いピンクのままだと同じ色なので消える トークンごと差し替える */
    .block--heart .block__inner {
        --c-pink: var(--c-bg);
        --c-pink-text: var(--c-bg);
        --c-text-mute: var(--c-bg);
        --c-line: var(--c-bg);
        width: var(--heart-w);
        max-width: 100%;
        /* 見出しが左右のふくらみに乗る高さ */
        padding-top: calc(var(--heart-h) * 0.13);
        margin-inline: auto;
        color: var(--c-bg);
    }

    /* 見出しは左右のふくらみへ振り分ける*/
    .block--heart .section-title {
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        width: 76%;
        margin-inline: auto;
        margin-bottom: 0;
        padding-inline: 0;
        border-inline: 0;
    }

    /* 見出しの2つも下絵どおり黒い帯に白抜き マーカーと同じ扱いなので
       同じ padding と box-decoration-break を使う */
    .block--heart .section-title__ja,
    .block--heart .section-title__en {
        padding: 0.06em 0.3em;
        background-color: var(--c-dark);
        color: var(--c-bg);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    .block--heart .section-title__ja {
        font-size: calc(var(--heart-w) * 0.055);
        line-height: 1.25;
    }

    .block--heart .section-title__en {
        max-width: 8em;
        font-size: calc(var(--heart-w) * 0.039);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 0.04em;
        text-align: left;
    }

    .block--heart .origin__date {
        margin-top: calc(var(--heart-h) * 0.045);
        font-size: calc(var(--heart-w) * 0.036);
        text-align: center;
    }

    .block--heart .origin__lead {
        max-width: 56%;
        margin-top: calc(var(--heart-h) * 0.05);
        margin-inline: auto;
        font-size: calc(var(--heart-w) * 0.031);
        line-height: 1.45;
        text-align: center;
    }

    .block--heart .text {
        max-width: 38%;
        margin-top: calc(var(--heart-h) * 0.05);
        margin-inline: auto;
        font-size: calc(var(--heart-w) * 0.017);
        line-height: 1.7;
    }

    /* 『hello, world』だけは白ではなく黒 心臓の中で一段沈める
       #1a1a1a と #cc2b64 は 3.40:1 なので、大きい文字でしか使えない
       24px を下回らないよう max() で下限を張ってある */
    .block--heart .origin__code {
        margin-top: calc(var(--heart-h) * 0.06);
        font-size: max(1.5rem, calc(var(--heart-w) * 0.021));
        color: var(--c-dark);
    }


    /* --------------------------------------
       4画面目「もっと知る」＝ 各ページへの導線

       渡りの漏斗が上から降りてきて、その先の下に3つのハートが並ぶ
       地は敷かない（--surface: transparent）ので、文字の輪と人物が
       1画面目と同じようにそのまま透ける 輪がもう一度出る画面

       位置はすべて下絵の実測値 1920×1080 のときのハートの
         外接矩形の中心を vw / svh に直してある

       JavaScript は使っていない [data-js] が要るのは
         上の空き（漏斗が降りてくる区間）だけで、
         スクリプトが無ければ空きは 0 になり、
         ハート3つが並ぶ1画面ぶんの区画に戻る
       -------------------------------------=-- */
    .block--outro {
        /* .block--sub と同じ「クラス1つ」なので、あとに書いてある
             こちらが勝つ 書き順に頼っている指定はここだけ */
        --surface: transparent;
        /* ハートの枠（正方形の素材そのままの寸法）
           下限を張ってあるのは、1024px でも中の文字が
             「大きい文字」の基準（太字 18.7px）を割らないようにするため */
        --lh-w: max(18vw, 12rem);
        padding-inline: 0;
        padding-block: 0;
    }

    /* 漏斗が降りてくる区間 中身はこのぶん下から始まる */
    [data-js] .block--outro {
        padding-top: var(--screen4-gap);
    }

    .block--outro .block__inner {
        position: relative;
        max-width: none;
        height: 100vh;
        height: 100svh;
        margin: 0;
    }

    /* --- 見出しは右端に縦組み 下絵どおり画面の底まで届く ---
       writing-mode: vertical-rl では flex の column が
         「右から左」になるので、HTML の順（日本語 → 英字）のまま
         日本語が右、英字がその左に並ぶ
         交差軸は上下なので、flex-end で下端に揃う */
    .block--outro .section-title {
        position: absolute;
        right: 3vw;
        bottom: 2svh;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        border: 0;
        writing-mode: vertical-rl;
    }

    .block--outro .section-title__ja {
        font-size: clamp(2rem, 8.8svh, 5.5rem);
        line-height: 1;
        letter-spacing: 0.02em;
        color: var(--c-dark);
    }

    .block--outro .section-title__en {
        font-size: 0.75rem;
        letter-spacing: 0.28em;
    }

    /* --- ハート3つ 中心の座標だけを与えて置く --- */
    .block--outro .card-list {
        display: block;
        position: absolute;
        inset: 0;
        gap: 0;
    }

    .block--outro .card-list>li {
        position: absolute;
        width: var(--lh-w);
        height: var(--lh-w);
        translate: -50% -50%;
    }

    .block--outro .card-list>li:nth-child(1) {
        left: 12.3vw;
        top: 35.7svh;
    }

    .block--outro .card-list>li:nth-child(2) {
        left: 67.4vw;
        top: 66.6svh;
    }

    .block--outro .card-list>li:nth-child(3) {
        left: 85.7vw;
        top: 31.6svh;
    }

    /* ハートの形1200×1200PNG  */
    .block--outro .card {
        --rock: 7deg;
        position: relative;
        display: grid;
        /* 列を明示する 書かないと暗黙の列が中身の幅まで広がり、
             長いラベルがハートの外へはみ出す */
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        height: 100%;
        /* 文字はハートの中心よりわずかに上（下絵の実測 4〜9%）*/
        padding: 0 12% 10%;
        background-color: transparent;
        background-image: url(../images/heart-link.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 0;
        color: var(--c-dark);
        text-align: center;
        rotate: calc(var(--rock) * -1);
        /* 2コマだけ なめらかに振らせない
             1周期（1.4秒）を前半 後半に割り、steps(1, end)で
             それぞれの区間を始まりの値のまま保たせる
             ＝ -7度 を0.7秒、+7度 を0.7秒、その繰り返し
             手描きの2コマパラパラと同じ動き方

           alternateは使えない（実測） 逆再生の回では時間関数まで
           反転するので、往きも復りも -7度 のまま張り付き、
           切り替わりの一瞬しか +7度 にならない

           ハートと文字は一緒に傾く（リンク1つを丸ごと回している）
           rotate と scale は別々のプロパティなので、
             ホバーの scale とぶつからずに重なる */
        animation: heart-rock 1.4s steps(1, end) infinite;
        transition: scale 200ms ease;
    }

    /* 真ん中の1つだけ1コマぶん遅らせる
         こうするとどの瞬間も 左 右 左 に傾いた並びになり、
         3つが同時に同じ向きへ倒れることがない */
    .block--outro .card-list>li:nth-child(2) .card {
        animation-delay: -0.7s;
    }

    /* ハートは画像なので色は変えられない
       文字を白（ハートの上で 5.13:1）に変え、わずかに近づけて応える */
    .block--outro .card:hover,
    .block--outro .card:focus-visible {
        background-color: transparent;
        color: var(--c-bg);
        scale: 1.03;
    }

    /* ハートの上の #1a1a1a は大きい文字でしか使えない
         （素材の赤 #f42525 に対して 4.26:1、#cc2b64 なら 3.40:1）
         枠の下限（12rem）と割り算の比から、1024px でも
         日本語 24.9px / 英字 23.2px の太字になる（太字の基準は 18.7px）*/
    .block--outro .card__title {
        position: relative;
        font-size: calc(var(--lh-w) / 8.2);
        line-height: 1.15;
    }

    .block--outro .card__title span {
        display: block;
        margin: 0.35em 0 0;
        font-size: calc(var(--lh-w) / 8.8);
        letter-spacing: 0.04em;
        color: inherit;
    }


    :root {
        --col-model: 38%;
        --pad-x: 3.5rem;
        --wrap-max: 40rem;
        font-size: 17px;
    }

    /* -----------------------------------------
       13-A. character だけは版面に幅の上限を置く

       90年代のページは「画面いっぱい」ではなく決まった幅の一枚だった
       このページはその型なので、mainを 64rem で止めて中央に置く
       ヘッダーとフッターは全ページ共通のまま全幅

       人物の大きさは変えない、というのが条件だった
         幅を 1088px（64rem 17px 基準）に絞るぶん、人物の列を
         38% → 50% に上げてつり合わせてある：
           いままで … 1440px × 38% − 1.5rem ＝ 約 521px
           これから … 1088px × 50% − 1.5rem ＝ 約 518px（差 0.6%）
         ＝ 1088px 以上のどの画面でも人物は同じ大きさになった
         内容の行長は 680px → 約 484px に縮む これが「内容を絞る」の実体

       輪の直径も画面幅ではなく版面の幅から出す
         min(100vw, --page-max) で「実際の版面の幅」を作ってから掛ける
       -------------------------------------------------------- */
    .p-character {
        --page-max: 64rem;
        --col-model: 50%;
        --ring-d: min(calc(min(100vw, var(--page-max)) * 0.5 - 1.5rem), 66svh);
    }

    /* 版面の幅 輪の枠も同じ幅 同じ中央寄せにしておかないと、
       輪だけが画面の中央を基準にしてずれる */
    .p-character .site-main,
    .p-character .char-ring {
        max-width: var(--page-max);
        margin-inline: auto;
    }

    /* 色面の中は中央に置く
         人物の列を空けているのは人物がそこに居るからで、
         ピンクと黒の面では人物は覆われて見えない ＝ 空ける理由が無い
         版面を 64rem に絞ったので、空けたままだと面の左半分が
         ただの空白になる 中央に置くのは music と同じ扱い
         （あちらも人物の列が無いので中央寄せ）*/
    .p-character .block--pink,
    .p-character .block--dark {
        --full-pad-s: var(--pad-x);
        /* 切り口の傾き ほかのページの区画は全幅なので 2vw で約1.1度になるが、
             このページの区画は 64rem で止まる 2vw のままだと傾きだけがきつくなるので、
             版面の幅の 2% にしてサイト全体で角度を1つに保つ */
        --edge: calc(min(100vw, var(--page-max)) * 0.02);
    }

    .p-character .block--pink .block__inner,
    .p-character .block--dark .block__inner {
        margin-inline: auto;
    }


    /* ---------------------
       13-B. 画面の左右の帯
       -------------------- */
    @media (min-width: 1200px) {

        .p-character {
            --side-tape-w: 2rem;
        }

        .p-character .side-tape {
            display: block;
            position: fixed;
            top: 0;
            bottom: 0;
            /* ヘッダー（3）とフッター（2）より下 上下は向こうが隠してくれる */
            z-index: 1;
            width: var(--side-tape-w);
            overflow: hidden;
            pointer-events: none;
        }

        .p-character .side-tape--start {
            left: 0;
        }

        .p-character .side-tape--end {
            right: 0;
        }

        /* 回す本体 長さ＝画面の高さ、太さ＝帯の幅 */
        .p-character .side-tape__rail {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vh;
            height: var(--side-tape-w);
            overflow: hidden;
            transform-origin: 0 0;
        }

        /* 左：−90度 文字は下から上へ読む */
        .p-character .side-tape--start .side-tape__rail {
            translate: 0 100vh;
            rotate: -90deg;
        }

        /* 右：+90度 文字は上から下へ読む */
        .p-character .side-tape--end .side-tape__rail {
            translate: var(--side-tape-w) 0;
            rotate: 90deg;
        }

        /* 流れる面 music の帯とまったく同じ仕組み
           1枚ぶんちょうど動かして先頭へ戻るので継ぎ目が出ない */
        .p-character .side-tape__run {
            --tape-tile: calc(var(--side-tape-w) * 1920 / 72);
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% + var(--tape-tile));
            height: 100%;
            background-image: url(../images/tape-kizunaai.png);
            background-repeat: repeat-x;
            background-size: auto 100%;
            animation: tape-run 22s linear infinite;
        }
    }

    /* --- 名前の輪 ここで初めて姿を見せる--- */
    .char-ring-track {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        /* 輪が画面に貼り付いていられる区間 プロフィールの画面より
           長くしておく 長すぎても、そのあとはピンクの面（main の中）が
           上から覆うので見えない 短いと輪だけが先に流れて消える */
        height: 200svh;
        width: 100%;
        pointer-events: none;
    }

    .char-ring {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        overflow: hidden;
    }

    .char-ring__ring {
        position: absolute;
        /* 人物の列のまん中 ＝ 顔のまん中（12-B でそう置いてある）*/
        left: calc(var(--col-model) / 2);
        top: var(--ring-y);
        width: var(--ring-d);
        height: var(--ring-d);
        max-width: none;
        translate: -50% -50%;
        animation: ring-turn 80s linear infinite;
    }

    .hero__title-ja {
        font-size: 3.5rem;
    }

    .hero__years {
        font-size: 3.75rem;
    }

    .hero__tagline {
        font-size: 1.375rem;
    }

    .section-title__ja {
        font-size: 1.75rem;
    }

    .origin__date {
        font-size: 2.375rem;
    }

    /* ------------------------------------------------------
       ここから軌道になる ヒーローは画面いっぱいで、
       index と同じく文字を左上と右下の角へ逃がし、中央を空ける
       空いた中央に入るのが、人物とそれを囲む作品の輪

       輪は「ほぼ真横から」見たつぶれた円（縦は横の 0.26 倍）
         直径が画面幅より広いので、左右の端は必ず画面の外にある
         ＝ 一度に見えるのは24作品のうちの一部だけで、
         残りは輪が回ってきてはじめて見える

       奥行きも回転も、出どころの値はひとつ
         軌道上の角度 --a から sin() と cos() を取り、
         位置 大きさ 濃さ 前後 曲名の出し入れを全部そこから出している
         --turn（0〜1）だけを js/main.js がスクロール量から書き込む
         書き込まれなければ 0 のまま＝輪は最初の位置で止まっている
       ------------------------------------------------------- */
    @supports (left: calc(1px * cos(0deg))) {

        /* スクロール段 この高さのぶんヒーローが画面に貼り付き、
           そのあいだに輪がちょうど一周する
           [data-js] が付いているときだけ高くする
             JavaScript が無ければ高さは中身なりになり、
             貼り付く余地が消える＝ただの1画面ぶんのヒーローに戻る */
        [data-js] .orbit-scroll {
            height: 340vh;
        }

        /* ヘッダーは輪と一緒に画面に留める
             ヘッダーの高さぶんだけ先にスクロールしないと回り始めない、
             という「一拍の間」を無くすため 輪はヘッダーの下に貼り付き、
             回り終わるまでナビゲーションも画面から消えない */
        .p-music .site-header {
            position: sticky;
            top: 0;
        }

        /* 768px の .hero.orbit-hero（クラス2つ）に負けないよう、
             ここも同じ2クラスで受ける @media も @supports も
             詳細度を足さないので、書いた順では決まらない */
        .hero.orbit-hero {
            position: sticky;
            /* ヘッダーの下に貼り付く スクロール0の時点ですでに
               この位置にいるので、回転は1px目から始まる
               --header-h はヘッダーの実測値を js/main.js が入れる
               スクリプトが無くても :root の既定値で成立する */
            top: var(--header-h);
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            grid-template-rows: auto minmax(0, 1fr) auto;
            height: calc(100vh - var(--header-h));
            height: calc(100svh - var(--header-h));
            padding-top: 2.5rem;
            padding-bottom: 2.5rem;
            /* 画面の外へ出た作品はここで切る
               これがあるので横スクロールバーは出ない */
            overflow: hidden;
        }

        .orbit-hero .hero__title {
            grid-column: 1;
            grid-row: 1;
        }

        /* ギャラリーの見出しは右上の角 ヒーローの h1 と場所を取り合わない */
        .orbit-wrap {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            margin-top: 0.3rem;
            text-align: right;
        }

        .orbit-wrap__title {
            justify-content: flex-end;
        }

        /* --- 軌道の台 ヒーロー全体に広がる --- */
        .orbit {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }

        /* 四隅の文字は軌道より前 ポイントした作品（z-index: 2100）だけが
           その上に出る
           .orbit-wrap 自体は position を持たせない 持たせると
             その中にある .orbit（position: absolute）の基準が
             ヒーローではなく右上の小さな見出しになってしまう */
        .orbit-hero .hero__title,
        .orbit-wrap__title,
        .orbit-wrap__lead {
            position: relative;
            z-index: 2050;
        }

        /* --- 人物の後ろの空間 ---
           グリッドの床だけがある真っ白な部屋
           人物と作品の輪は、この床の上に立っているという奥行きを与える

           輪だけだと「宙に浮いた抽象の並び」に見えるが、床があると
             どこを中心に回っているのかが読めるようになる
             床の消失点は画面の中央 ＝ 人物の立ち位置と一致させてある

           素材は 1920×1080 の1枚地は純白 #ffffff なので、
             ページの地色との境目に線が出ない（実測で確認）
           幅を画面に合わせて敷き、下端を画面の下端に合わせる
             こうすると床のいちばん手前が常に画面の下端に来るので、
             画面の高さが変わっても遠近が壊れない
           ヒーローは overflow: hidden なので、床はこの1画面から出ない
             貼り付いているあいだ床は動かず、作品だけが回る  */
        .orbit-hero {
            background-image: url(../images/bg-space-grid.png);
            background-repeat: no-repeat;
            background-position: 50% 100%;
            background-size: 100% auto;
        }

        /* --- 人物 半身像 ---
           原画 769×2200（フレーム270 片手を上げて見せる）は全身なので、
           object-fit で上のほうだけを切り出す
           枠の縦横比 769:976 が原画の y=0〜976（頭からウエストまで）にあたる
           上端が原画の上端なので object-position は 0%
           頭の上の余白は画像側に入れてある（レンダリングを4枚まとめて
           切り出すときの共通の余白 tools/prep-renders.py の --pad-top）

           切り出しを詰めるほど、同じ枠の高さでも顔が大きくなる
           全身 → 腿まで → ウエストまで、と2度詰めた結果が現在の値
           画像は撮り直していない CSS の切り抜きだけ（index と同じ考え方）

           object-position の求め方（枠の高さを H、切り出す高さを C とする）：
             object-position Y = 上端 ÷ (2200 − C)
             いまは上端 = 0 なので 0% C = ウエストの位置 856 + 120 = 976 */
        .orbit__figure {
            display: block;
            position: absolute;
            left: 50%;
            top: 3%;
            z-index: 1100;
            height: 66%;
            aspect-ratio: 769 / 976;
            margin: 0;
            /* 枠のまん中ではなく、人物のまん中を画面の中央に置く
               原画は全身で構図が取ってあるので、上半身だけを切り出すと
               中身が画布の中央からずれる そのぶん枠をずらす
               この絵は上げた手と反対側に髪と体があるので重心は 44.2%
               ＝ 左寄り 絵を替えたら測り直すこと 符号を間違える */
            translate: -44% 0;
            /* 裾を地色に溶かす 切れているのではなく、
               手前の作品と同じ奥行きのある空間に立っているように見せる
               対応していないブラウザでは切り口がそのまま出るだけ */
            -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
        }

        .orbit__figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 0%;
        }

        /* --- 輪の寸法 線は引かない ---
           第2案までは輪を罫線で描いていたが、線を引くと図表に見える
           輪であることは、回ることと、手前ほど大きいことで伝わる */
        .orbit__ring {
            position: absolute;
            inset: 0;

            /* 横の半径は画面幅の60% 直径120vwなので左右は画面の外 */
            --orb-rx: 60vw;
            /* 縦は横の 0.26 倍 ここが「ほぼ真横から見ている」という設定
               背の低い画面では vh 側で頭打ちにして手前の列が切れないようにする */
            --orb-ry: min(15.6vw, 22vh);
            --orb-cy: 49%;

            /* 30スロット ＝ 作品24 ＋ 活動休止の3年ぶん3 ＋ 終わりと始まりのあいだ3
               最後の3つを空けてあるので、24作目と1作目は隣り合わない */
            --orb-step: calc(360deg / 30);
            /* 起点 開いた瞬間、1作目が手前のまん中に立つ */
            --orb-a0: 90deg;
            /* 回す量 1作目（スロット0）から24作目（スロット26）までの26スロットぶん
               ＝ 読み終わったとき、最後の作品が手前のまん中に立って終わる
               360度ではないのは、終わりと始まりのあいだの空白を
               手前で通り過ぎさせないため */
            --orb-sweep: calc(26 * 360deg / 30);
            /* スクロール進捗（0〜1） js/main.js が書き込む
               書き込まれなければ 0 ＝ 静止した完成状態 */
            --turn: 0;
        }

        .orbit__list {
            display: block;
            position: absolute;
            inset: 0;
            margin-top: 0;
            gap: 0;
        }

        /* 立体と回転はここに集約されている
             --i がスロット番号、--turn が回転量
             --i が増えるほど角度が小さい＝右にいるので、
             手前の列は左から右へ発売順に並ぶ
             下へスクロールすると --turn が増え、古い作品から順に手前を通る */
        .orbit__item,
        .orbit__gap {
            --a: calc(var(--orb-a0) - var(--i) * var(--orb-step) + var(--turn) * var(--orb-sweep));
            --s: sin(var(--a));
            --c: cos(var(--a));
            position: absolute;
            /* 置き場所は動かさない 輪の上の位置は translate で出す
                 left / top を毎フレーム書き換えると、そのたびに
                 25枚ぶんの再レイアウトが走って、はっきり指に付いてこない
                 transform なら位置決めのやり直しが要らない（実測で改善）*/
            left: 50%;
            top: var(--orb-cy);
            translate: calc(-50% + var(--orb-rx) * var(--c)) calc(-50% + var(--orb-ry) * var(--s));
            /* 奥（--s が負）は人物の後ろ、手前（正）は人物の前 人物は 1100

               倍率が大きいのは意図的 z-index は整数なので、
                 倍率が小さいと隣り合う作品が同じ値に丸められて並んでしまう
                 並んだときは「あとに書いてあるほう」が上に出る＝右側ほど
                 手前に見えてしまい、輪の右半分だけ前後が逆になる
                 900倍あれば12度ぶんの差でも必ず別の整数になるので、
                 前後は左右どちらも --s だけで決まる
                 （真横に並んだ左右対称の2枚だけは同じ奥行きなので同値
                   これは丸めではなく実際に同じ距離） */
            z-index: calc(1100 + var(--s) * 900);
        }

        .orbit__item {
            width: min(17vw, 232px);
            /* 奥は小さく薄く、手前は大きく濃い */
            scale: calc(0.36 + (var(--s) + 1) * 0.32);
            opacity: calc(0.40 + (var(--s) + 1) * 0.30);
            pointer-events: auto;
        }

        .orbit__link {
            gap: 0.5rem;
        }

        .orbit__link img {
            box-shadow: var(--lift-2);
        }

        /* 曲名は手前に来たときだけ出る
           --s が 0.7 を超えたぶんだけ濃くなるので、
           輪が回れば出ている名前も入れ替わる
           ここに JavaScript は関わっていない 角度から出しているだけ
             全作品の曲名と発売日は下のシングル一覧にも文字で載っている */
        /* 白いにじみは敷かない 曲名が出るのは手前のまん中に来た
             ときだけで、そこは地色の上 にじみは効いていないのに、
             輪が回るたびに25枚ぶん描き直されて重かった */
        .orbit__info {
            text-align: center;
            opacity: calc((var(--s) - 0.78) * 4.5);
        }

        .orbit__name {
            font-size: 0.9375rem;
        }

        .orbit__date {
            font-size: 0.75rem;
        }

        .orbit__item:hover,
        .orbit__item:focus-within {
            z-index: 2100;
            scale: calc(0.48 + (var(--s) + 1) * 0.32);
            opacity: 1;
        }

        .orbit__item:hover .orbit__info,
        .orbit__item:focus-within .orbit__info {
            opacity: 1;
        }

        /* --- 活動休止の3年 3スロットぶん空けた、その中央に立つ札 ---
           輪と一緒に回るので、この空白も手前を通り過ぎる
           そのあいだ画面の最前列には作品が1枚も無い
           history のスリープ章と同じことを、別の形で言っている */
        .orbit__gap {
            width: auto;
            padding: 0.4rem 1rem;
            background-color: var(--c-bg);
            border-left: 0;
            box-shadow: var(--lift-1);
            text-align: center;
            white-space: nowrap;
            scale: calc(0.62 + (var(--s) + 1) * 0.19);
            opacity: calc((var(--s) - 0.1) * 1.6);
        }

        /* --------------------------------------------------
           1366px 未満 広い画面ではジャケットが少し重なって
           「一山に扇を広げた」ように見えるが、画面が狭いと
           同じ割合の重なりが「詰まっている」に変わる

           手前の1枚の幅を、隣との間隔より確実に小さくする：
             隣との間隔 ＝ --orb-rx × sin(12度) ＝ 64vw × 0.2079 ≒ 13.3vw
             ジャケット ＝ 12vw
           → どの幅でも 1.3vw ぶんの隙間が残る
           ------------------------------------------------- */
        @media (max-width: 1365px) {
            .orbit__ring {
                --orb-rx: 64vw;
                --orb-cy: 47%;
            }

            .orbit__item {
                width: 12vw;
            }

            .orbit__figure {
                height: 56%;
            }

            .orbit__name {
                font-size: 0.8125rem;
            }

            .orbit__date {
                font-size: 0.6875rem;
            }

            .orbit__gap {
                padding: 0.3rem 0.75rem;
                font-size: 0.875rem;
            }
        }

        /* ----------------------------------------
           スロット番号 発売順そのままで、
           18番目（休止の札）が3スロットぶんを占める
             作品 1〜17 … スロット  0〜16
             休止の札   … スロット 17〜19（札は中央の 18 に立つ）
             作品18〜24 … スロット 20〜26
             （空き）   … スロット 27〜29 ＝ 終わりと始まりのあいだ
           ------------------------------------------- */
        .orbit__list> :nth-child(1) {
            --i: 0;
        }

        .orbit__list> :nth-child(2) {
            --i: 1;
        }

        .orbit__list> :nth-child(3) {
            --i: 2;
        }

        .orbit__list> :nth-child(4) {
            --i: 3;
        }

        .orbit__list> :nth-child(5) {
            --i: 4;
        }

        .orbit__list> :nth-child(6) {
            --i: 5;
        }

        .orbit__list> :nth-child(7) {
            --i: 6;
        }

        .orbit__list> :nth-child(8) {
            --i: 7;
        }

        .orbit__list> :nth-child(9) {
            --i: 8;
        }

        .orbit__list> :nth-child(10) {
            --i: 9;
        }

        .orbit__list> :nth-child(11) {
            --i: 10;
        }

        .orbit__list> :nth-child(12) {
            --i: 11;
        }

        .orbit__list> :nth-child(13) {
            --i: 12;
        }

        .orbit__list> :nth-child(14) {
            --i: 13;
        }

        .orbit__list> :nth-child(15) {
            --i: 14;
        }

        .orbit__list> :nth-child(16) {
            --i: 15;
        }

        .orbit__list> :nth-child(17) {
            --i: 16;
        }

        .orbit__list> :nth-child(18) {
            --i: 18;
        }

        .orbit__list> :nth-child(19) {
            --i: 20;
        }

        .orbit__list> :nth-child(20) {
            --i: 21;
        }

        .orbit__list> :nth-child(21) {
            --i: 22;
        }

        .orbit__list> :nth-child(22) {
            --i: 23;
        }

        .orbit__list> :nth-child(23) {
            --i: 24;
        }

        .orbit__list> :nth-child(24) {
            --i: 25;
        }

        .orbit__list> :nth-child(25) {
            --i: 26;
        }
    }

    /* -----------------------------------------------
       目次（自ページ内リンク）を画面の上に横並びで固定する
       スクロールしても消えないので、ページ全体で使える

       左右 0 ＋ margin-inline: auto ＋ width: fit-content で中央に置く
         3項目ぶんの幅しか取らないので、クリックを奪う面にならない

       top は 2rem ヘッダー（1024px 以上で 88px）は
         スクロール 88px で画面から抜けるが、目次が出はじめるのは
         スクロール 60px（js/main.js の ENTER） そのとき
         ヘッダーの下端は画面の 28px にいるので、2rem（34px）なら重ならない

       [data-js] が付いているときだけ固定する
         JavaScript が無ければ目次は文書の流れの中に残り、
         ヒーローの h1 と重なることもない */
    [data-js] .page-toc {
        position: fixed;
        top: 2rem;
        right: 0;
        left: 0;
        z-index: 3;
        width: fit-content;
        margin-inline: auto;
        padding: 0;
        background-color: transparent;
        border-block: 0;
        transition: opacity 400ms ease, visibility 400ms;
    }

    /* ヒーローの間は出さない 読み始めてから現れる */
    [data-js] body[data-view="hero"] .page-toc {
        opacity: 0;
        visibility: hidden;
    }

    /* 隙間は帯が右へはみ出す量（3.6em）より広く取る
         狭いと、指した項目の帯が隣の項目の頭に掛かる */
    [data-js] .page-toc__list {
        flex-wrap: nowrap;
        gap: 0 4rem;
        font-size: 1.125rem;
        font-weight: 700;
        /* 帯の高さを字面に寄せる 本文の 1.9 のままだと箱が縦に伸びて、
           筆跡が平べったく潰れる */
        line-height: 1.35;
    }

    /* z-index: 0 を置いて、ここを積み重ねの文脈にする
         これが無いと下の ::before（z-index: -1）が
         .page-toc（z-index: 3 の文脈）の地より後ろへ落ちる */
    [data-js] .page-toc__list a {
        position: relative;
        z-index: 0;
        padding: 0.1em 0;
        border-bottom: 0;
        transition: color 200ms ease;
    }

    /* 白抜き＋黒い縁取り

         画面の中央に固定したことで、目次は
           1画面目 … 白地と人物
           2画面目 … ピンクの心臓と、その上の黒いマーカー
           3画面目 … 黒い面
           4画面目 … 白地と文字の輪
         の全部の上を通る この4つ全部で読める「文字色」は無い
         （#3b3b3b も #cc2b64 も #ee4f87 も、どれかで沈む）
         そこで文字自身に縁を持たせて、地の色から独立させる

       paint-order: stroke が要る 既定では縁が字面の上に描かれ、
         線の細い所（「歩」「知」の内側）が縁に食われて潰れる
         stroke を先に描かせれば、縁は字の外側にだけ残る

       text-shadow は参考にした組み方と同じ「ずらした硬い影」
         縁取りが効かない環境ではこれだけが残るので、
         @supports の外に素の姿（濃い文字＋白いにじみ）を置いてある

         白 × #1a1a1a の縁 ＝ 17.4:1  */
    @supports (-webkit-text-stroke: 1px #000000) {

        [data-js] .page-toc__list a {
            -webkit-text-stroke: 3px var(--c-dark);
            paint-order: stroke;
            color: var(--c-bg);
            text-shadow: 2px 2px 0 var(--c-dark);
        }

        /* ホバーで字面を #c23664 に返す 帯（#cc2b64）とほぼ同じ色
             （1.05:1）なので、帯に載った所は字が帯に沈み、
             輪郭の黒い線だけが残る 帯から外れた所は白地の上の
             濃いピンク（5.28:1）として読める
             ＝ 帯が払われるにつれて字が帯の一部になっていく

           縁と同じ黒にはしない 縁が内側まで埋めてしまい、
             「歩」「み」の細い内白が潰れる（実測して戻した）  */
        [data-js] .page-toc__list a:hover,
        [data-js] .page-toc__list a:focus-visible {
            color: var(--c-pink-ink);
        }
    }

    /* ----------------------------------------
       筆の帯 指したところに左から右へ払われる

       素材795×182 単色 #cc2b64 PNG
       静止状態では右へ全部刈り取ってある（＝ 見えない）
         出るときだけ払われながら少し右へ滑り込む
         戻りは transition-duration が 0 なので瞬時に消える
         ＝ 出るのはゆっくり、消えるのは一瞬

       素材の濃い部分は自分の幅の 10%〜70%（右端は掠れ）
         箱を語にぴったり合わせると語尾が掠れに乗って沈むので、
         右に 3.6em、左に 1.1em 空けてある 実測して決めた値

       語ごとに幅が違うので、帯は素材の比を保たずに引き伸ばす
         筆跡なので伸び縮みしても筆跡に見える
       ------------------------------------------------- */
    [data-js] .page-toc__list a::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -0.5em -3.6em -0.5em -1.1em;
        /* 帯は語より右へ大きくはみ出すので、これが無いと
           項目と項目のあいだを指しただけで帯が出てしまう */
        pointer-events: none;
        background-image: url(../images/toc-brush.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        clip-path: inset(0 100% 0 0);
        translate: -10% 0;
        transition-property: clip-path, translate;
        transition-duration: 0s, 0s;
        transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    [data-js] .page-toc__list a:hover::before,
    [data-js] .page-toc__list a:focus-visible::before {
        clip-path: inset(0 0 0 0);
        translate: 0 0;
        transition-duration: 550ms, 300ms;
    }



    .p-index .block {
        position: relative;
    }


    /* -----------------------------------------
       13-H. history：縦に回したホイールを横移動に写す
       （1024px 以上 JavaScript が動いているときだけ）

       日本の本 新聞と同じ右から左へ読む面
       下へスクロールすると内容がまとめて右へ動く
       ＝ 読み手の視点は左へ進む 縦に動く要素はひとつも無い

       仕組みは music の輪と同じ形：
         走路（.site-main）      … 貼り付く1画面 ＋ 横に動く距離ぶんの高さ
         貼り付く1枚（.hz-viewport）… position: sticky ＋ overflow: hidden
         動く帯（.hz-track）      … 走路の中で translate されるだけ
       ホイールは乗っ取っていない ブラウザの普通のスクロールのまま

       js/main.js が入れるのは実測値2つだけ
         --hz-span … 帯の幅 − 画面の幅（＝横に動く距離）
         --hz      … その距離をどこまで進んだか（0〜1）
         入っていなければ距離は 0 で、帯は最初の位置で止まる

       人物は画面に立たせたまま動かさない
         その前を10年ぶんの記録が右へ流れていく
         スリープ章（黒い面）が通過するあいだだけ人物が隠れ、
         2025年の帰還で白地に戻ると、また現れる
        */

    /* 人物 ここだけ全身（他ページは右端の半身像）

       版面は下絵で決めてある（materials/ps/历史页人物布局设计.png）
         下の3つの数は目分量ではなく、下絵に実際のレンダリングを
         重ねて合わせた結果（IoU 0.951／--bg-model-*に換算）
         下絵は 1920×930 ヘッダー30px ＝ 人物の箱は 900px 高、
         そこに 415×1386 の人物が (240, 237) に置かれている

           高さ  1386 ÷ 900          = 154%
           縦    上端を箱の 23% に置く 絵が箱より高いので % の分母は
                 (箱 − 絵) ＝ 負  0.23 ÷ (1 − 1.54) = −42.6%
           横    240 ÷ (1920 − 415)  = 15.95%

       画面の左寄りという位置は、ほとんどの章で
         「柱が立っていない空き」に当たる だから中身の多い章のために
         別あつらえをしなくてよい 当たっても構わない（下記の重なり順）  */
    [data-js] .p-history {
        --bg-model-x: 15.95%;
        --bg-model-y: -42.6%;
        --bg-model-h: 154%;
        /* 濃さは 1 人物が柱の手前に立つので薄める理由が無い
           重なった柱は人物に隠れる それが下絵の意図 */
        --bg-model-opacity: 1;
        /* 章1つぶんの基準の幅 章の下限であり、見出しの帯の上限でもある
           上限を張らないと、出来事の多い第3章だけ帯が広がって
             見出しの伸縮率が他の章と食い違う（第3章 0.84 / 他 0.45 と実測）*/
        --chapter-w: min(84rem, 94vw);
    }

    /* ヘッダーは帯と一緒に画面に留める 横移動のあいだじゅう
       ナビゲーションが画面から消えないようにする（music と同じ扱い）*/
    [data-js] .p-history .site-header {
        position: sticky;
        top: 0;
    }

    /* 走路 貼り付く1画面 ＋ 横に動く距離
       距離を実測値でもらっているので、スクロール1px ＝ 横1px になる
       main ではなくこの外枠が走路 フッターまで帯の中に入れたので、
         main は帯の中のひとつの板になった */
    [data-js] .p-history .hz-scroll {
        display: block;
        height: calc(100vh - var(--header-h) + var(--hz-span, 0px));
        height: calc(100svh - var(--header-h) + var(--hz-span, 0px));
    }

    /* 本文の板 帯の中でいちばん右（＝最初に読む側）*/
    [data-js] .p-history .site-main {
        display: block;
        flex: none;
        height: 100%;
    }

    /* 人物は柱の手前に立つ（下絵どおり）
       既定の .bg-track は z-index: -1 ＝ 本文の後ろだが、ここだけ前へ
       頭のリボンが見出しの2行目に半文字ぶん重なるのはそういう設計 */
    [data-js] .p-history .bg-track {
        z-index: 1;
    }

    /* 人物は帯と一緒に動いてはいけない
       帯が右へ T だけ動くので、こちらは −T だけ戻して画面に留める
       main の右端は帯の右端と同じなので、右端合わせ ＋ 幅 100vw で
       ちょうど画面ぜんぶを覆う

       ただしフッターの板が入ってきたら留まるのをやめる 板は帯のいちばん
       左にあるので、最後まで戻し続けると人物が板の上に居座ってしまう
       --hz-follow（帯の移動量 − 板の幅）で頭打ちにすると、第6章までは
       画面に留まり、板が入ってくるとそのぶん帯と一緒に右へ流れて板を空ける
       この値は js/main.js が板の実測幅から書き込む
       書かれていなければ頭打ちは効かない

       ピンクの影は drop-shadow CSS マスクは file:// で落ちるので
       「形を借りて色を変える」ことはできないが、drop-shadow なら
       同一オリジンの制限を受けずにアルファの形のまま単色を落とせる
       下絵の実測は真横に +17px、縦のずれは 0 色は --c-pink そのもの
       17 ÷ 900（下絵の箱の高さ）＝ 1.89% を箱の高さに掛けている */
    [data-js] .p-history .bg-stage {
        position: absolute;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100%;
        translate: calc(min(var(--hz, 0) * var(--hz-span, 0px), var(--hz-follow, 999999px)) * -1);
        filter: drop-shadow(calc((100svh - var(--header-h)) * 0.0189) 0 0 var(--c-pink));
    }

    /* スリープ章の黒だけは人物より前
       「活動が止まっているあいだ人物が画面から消える」は、
       黒が人物を覆うことで成り立つ
       10周年章のピンクは上げない —— そちらは人物が前に立つ */
    [data-js] .p-history .timeline__chapter--sleep {
        position: relative;
        z-index: 2;
    }

    /* --- フッターの板 -------------------------------------
       帯のいちばん左、年表を読み終えた先に立つ1枚

         上（板の中ほど）… ナビを縦積み 右揃え ピンクで大きく
         下              … ロゴ その右に (c) と公式サイトへの導線

       板でいちばん大きいのがナビ 年表を読み終えた人に
       「次にどこへ行くか」だけを見せる面にしてある
       ここは history の横組みのときだけ 他の3ページのフッターは元のまま
       ------------------------------------------------------ */
    [data-js] .p-history .site-footer {
        display: block;
        flex: none;
        min-width: min(24rem, 28vw);
        height: 100%;
        padding: 1.75rem 1.5rem;
    }

    [data-js] .p-history .site-footer__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto auto;
        gap: 0.35rem 1rem;
        height: 100%;
    }

    /* 下絵どおり、板の高さのやや上に置く（真ん中だと下がりすぎる）*/
    [data-js] .p-history .site-footer__inner>nav {
        grid-column: 1 / -1;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        margin-top: 11svh;
    }

    /* ピンク #ee4f87 は暗色 #1a1a1a の上で 5.06:1
       大きい文字なので余裕をもって読める*/
    [data-js] .p-history .footer-nav__list {
        display: grid;
        gap: 0.5em;
        font-size: min(3.25rem, 5.8svh);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: 0.02em;
        text-align: right;
        color: var(--c-pink);
    }

    [data-js] .p-history .site-footer__logo {
        grid-column: 1;
        grid-row: 2 / span 2;
        align-self: end;
    }

    [data-js] .p-history .site-footer__logo img {
        width: 9.5rem;
    }

    [data-js] .p-history .copyright {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        justify-self: end;
    }

    [data-js] .p-history .site-footer__official {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
        justify-self: end;
        font-size: 0.9375rem;
        font-weight: 700;
    }

    /* 貼り付く1枚 画面の外へ出た章はここで切る
       これがあるので横スクロールバーは出ない */
    [data-js] .p-history .hz-viewport {
        display: block;
        position: sticky;
        top: var(--header-h);
        height: calc(100vh - var(--header-h));
        height: calc(100svh - var(--header-h));
        overflow: hidden;
    }

    /* 動く帯 右端を画面の右端に合わせて置き、そこから右へ動かす
       row-reverse なので、文書の順（第1章 → 第6章）のまま
       右から左へ並ぶ ＝ HTML の順序は縦組みのときと同じ */
    [data-js] .p-history .hz-track {
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: max-content;
        translate: calc(var(--hz, 0) * var(--hz-span, 0px));
        /* 帯は9000px 以上ある これが無いと動かすたびに
             帯ぜんぶを描き直すので、はっきり指に付いてこなくなる */
        will-change: transform;
    }

    [data-js] .p-history .timeline-section {
        display: contents;
    }

    [data-js] .p-history .timeline {
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
    }

    /* ページの表紙は横組みでは出さない
         開いた瞬間に第1章の帯が来るほうが、年表として素直
         h1 は文書には残っていて、縦組み（JS なし 狭い画面）では
         いままでどおりページの見出しとして表示される */
    [data-js] .p-history .page-head {
        display: none;
    }

    /* --- 章 1章 ＝ 帯の中の1列 --- */
    [data-js] .p-history .timeline__chapter {
        display: flex;
        flex: none;
        flex-direction: column;
        /* 章の高さを式で決めておく
             高さが「あとから決まる」ままだと、縦組みの柱が何本になるかを
             先に計算できず、章の幅が中身より狭く出て隣の章へはみ出す
             （1024px で実測 89px はみ出していた）
             高さを先に固定すれば、柱の本数 ＝ 章の幅が正しく出る */
        --pane-h: calc(100svh - var(--header-h));
        height: var(--pane-h);
        min-width: var(--chapter-w);
        padding: 1.75rem var(--pad-x) 1.25rem;
        background-color: transparent;
        border-bottom: 0;
        border-left: 1px solid var(--c-line);
    }

    /* スリープ章 黒い面が画面を横切っていくあいだ、人物が消える
       休止の3年ぶん、面そのものを広く取ってある */
    [data-js] .p-history .timeline__chapter--sleep {
        min-width: min(92rem, 98vw);
        padding-inline: var(--pad-x);
        background-color: var(--c-dark);
        border-left-color: var(--c-dark);
    }

    /* 10周年の章
       面を敷き直さないと、上の .timeline__chapter（クラス2つ＋属性）の
         transparent が、もとの --anniv（クラス1つ）に勝ってしまう */
    [data-js] .p-history .timeline__chapter--anniv {
        padding-inline: var(--pad-x);
        background-color: var(--c-pink);
        border-left-color: var(--c-pink);
    }


    /* 見出しの帯は position: absolute で浮かせてある
         普通に段として置くと、折り返さない見出しの自然な幅が
         そのまま章の幅になってしまい（2141px）、
         せっかくの伸縮が効かなくなる 浮かせておけば
         章の幅は中身（出来事の柱）だけで決まり、
         帯は left/right: 0 でその幅いっぱいに広がる  */
    [data-js] .p-history .timeline__inner {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: none;
        min-height: 0;
        /* 章の高さから、章の上下の余白（1.75rem ＋ 1.25rem）を引いた高さ */
        height: calc(var(--pane-h) - 3rem);
        padding-top: var(--band-h);
        /* 帯の字の高さ 伸縮の倍率は js/main.js が実測して入れる */
        --band-line: min(4.5rem, 8.5svh, 5.2vw);
        /* 帯の高さ 3段ぶん（見出し行 ＋ 期間 ＋ 要約2行目）
           章名の4文字（スリープ はじまり）が縮まずに入る高さにしてある
             4 × 0.78 ＝ 3.12 なので、3.2 あれば足りる */
        --band-h: calc(var(--band-line) * 3.2);
    }

    /* --- 章の見出しの帯（下絵2の割りつけ）---
       左から順に［要約1行目］［CHAPTER 01 ／ 2016 – 2017］［はじまり］［第1章］
       要約2行目は左の2マスぶんを通しで使う

       帯の右端は、章の右端 ＝ 章の最初の出来事の右端に揃う
         .timeline__inner の justify-items: end と帯の width: 100% で
         そうなるので、位置を数字で書いてはいない
       --------------------------------------- */
    [data-js] .p-history .chapter-band {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        grid-template-rows: 1fr 1fr 1.4fr;
        column-gap: 0.4rem;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        /* 章の幅いっぱい 上限は張らない
             第2章 第3章のように中身が基準幅より広い章では、
             見出しの左端が中身の左端（最後の出来事）と揃う
             中身が狭い章では基準幅いっぱいのままで、いままでどおり */
        width: 100%;
        height: var(--band-h);
    }

    /* h2 の中身をそのまま帯のマスに配る
       display: contents なので h2 の箱だけが消える
         見出しの階層も読み上げも変わらない */
    [data-js] .p-history .chapter-band .section-title {
        display: contents;
    }

    /* 「第1章」「はじまり」は縦組みで右端に2列 ここがこの章の名前 */
    [data-js] .p-history .chapter-band__no,
    [data-js] .p-history .chapter-band__name {
        grid-row: 1 / -1;
        align-self: stretch;
        overflow: hidden;
        writing-mode: vertical-rl;
        /* 章番号の数字も縦のまま立てる（既定だと 90 度寝る）*/
        text-orientation: upright;
        font-size: calc(var(--band-line) * 0.78);
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.02em;
        color: var(--c-pink-text);
    }

    /* 章名は絶対に折り返さない（「スリープ」が2列に割れると読めない）
         字の大きさは決め打ちにして、帯の高さに入るぶんだけ縦を縮める
         倍率は js/main.js が実測して入れる 縮めるだけで伸ばさないので、
         短い章名（第1章）はそのままの字面で立つ */
    [data-js] .p-history .chapter-band__no>span,
    [data-js] .p-history .chapter-band__name>span {
        display: inline-block;
        flex: none;
        white-space: nowrap;
        transform-origin: center top;
        scale: 1 var(--sy, 1);
    }

    [data-js] .p-history .chapter-band__no {
        grid-column: 4;
    }

    [data-js] .p-history .chapter-band__name {
        grid-column: 3;
    }

    /* CHAPTER 01 と 2016 – 2017 は上下に重ねて1マス */
    [data-js] .p-history .chapter-band .section-title__en,
    [data-js] .p-history .chapter-band .timeline__period {
        grid-column: 2;
        align-self: stretch;
        display: flex;
        align-items: center;
        overflow: hidden;
        font-size: calc(var(--band-line) * 0.42);
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.01em;
        /* 色は章から継ぐ ここで #3b3b3b を書くと
             スリープ章（黒い面）の上で 1.4:1 になって読めない */
        color: inherit;
        white-space: nowrap;
    }

    /* 要約は横に潰し、こちらは縦に伸ばす
       字の高さがマスの高さと同じになるので、下絵どおりの
       「細長い CHAPTER 01」になる 倍率は js/main.js が実測 */
    [data-js] .p-history .chapter-band .section-title__en>span,
    [data-js] .p-history .chapter-band .timeline__period>span {
        display: inline-block;
        flex: none;
        line-height: 1;
        transform-origin: left center;
        /* 期間は横にも伸ばす CHAPTER 0N と同じ幅まで引き伸ばすので、
             年が1つ（2018）でも2つ（2016 – 2017）でも右端が揃う */
        scale: var(--sx, 1) var(--sy, 1);
    }

    [data-js] .p-history .chapter-band .section-title__en {
        grid-row: 1;
    }

    [data-js] .p-history .chapter-band .timeline__period {
        grid-row: 2;
    }

    /* 要約の2行 1行がマスの幅ちょうどに伸び縮みする
       字の高さは --band-line で決め打ちにして横だけを倍率で合わせるので、
       字数の違う章でも行の高さが揃い、右端も揃う */
    [data-js] .p-history .chapter-band__line {
        margin: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        font-size: var(--band-line);
        font-weight: 700;
        line-height: 1.15;
        /* 同じ理由で色は章から継ぐ（白い章は #3b3b3b、
             スリープ章は白、10周年の章は #1a1a1a になる）*/
        color: inherit;
    }

    [data-js] .p-history .chapter-band__line--lead {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    [data-js] .p-history .chapter-band__line--sub {
        grid-column: 1 / span 2;
        grid-row: 3;
    }

    /* 伸縮する中身 --stretch ＝ マスの幅 ÷ 字の自然な幅
       js/main.js が実測して入れる 入っていなければ等倍 */
    [data-js] .p-history .chapter-band__line>span {
        display: inline-block;
        flex: none;
        white-space: nowrap;
        transform-origin: left center;
        /* 横はマスの幅に潰し、縦はマスの高さに伸ばす
             1行目のマスは CHAPTER 0N ＋ 期間 の2段ぶんなので、
             字の高さが右の2段とそろう */
        scale: var(--sx, 1) var(--sy, 1);
    }

    /* --- 章の中身 ここも右から左へ並べる --- */
    [data-js] .p-history .chapter-body {
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        gap: 1.75rem;
        height: 100%;
    }

    /* 年表そのもの 縦組みにすると、出来事1件が1本の柱になる
       柱の並ぶ向き（右から左）と、ページの進む向きが同じになる */
    [data-js] .p-history .timeline__events {
        writing-mode: vertical-rl;
        height: 100%;
    }

    [data-js] .p-history .timeline__events>li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    [data-js] .p-history .timeline__events time {
        font-size: 0.9375rem;
        letter-spacing: 0.04em;
        color: var(--c-pink-text);
    }

    [data-js] .p-history .timeline__events p {
        font-size: 1.125rem;
        line-height: 1.95;
    }

    /* スリープ章だけはピンクを1つも使わない */
    [data-js] .p-history .timeline__chapter--sleep .timeline__events time,
    [data-js] .p-history .timeline__chapter--sleep .chapter-band__no,
    [data-js] .p-history .timeline__chapter--sleep .chapter-band__name {
        color: var(--c-on-dark-mute);
    }

    /* スリープ章の引く語もピンクにしない #1a1a1a × #b0b0b0 は 8.03:1 */
    [data-js] .p-history .timeline__chapter--sleep .chapter-band__key {
        background-color: var(--c-on-dark-mute);
        color: var(--c-dark);
    }

    /* 休止と再開の対 年表と同じ縦組みで、第5章のいちばん右に立てる */
    [data-js] .p-history .chapter-body .timeline__pair {
        flex: none;
        align-self: start;
        margin-bottom: 0;
        padding: 1.25rem 1rem;
        writing-mode: vertical-rl;
    }


}