@charset "utf-8";

/*
    Tsuyoshi Okamoto Laboratory CSS
    Plain HTML + CSS（最小限のPHP補助あり）

    設計概要：
    - モバイルファースト（単一CSS）
    - 800pxでレイアウト切替
    - 800–1920pxで可変スケーリング
    - 1920px以上は固定（背景のみ拡張）
    - 左:右 ≈ 1:1.618

    備考：
    - 各値は可読性と視覚バランスを基準に最適化
    - 微調整は主にPC（可変領域）側で行う
*/

/*
    このファイルで担当するもの
    --------------------------
    - 共通配色・タイポグラフィ・余白設計
    - モバイル基準レイアウト
    - PC版レイアウトと可変スケーリング
    - 固定ナビUI
    - page-turn 系演出の見た目
    - ページ個別スタイル

    触る場所の目安:
    - 配色             -> :root の --c-* など
    - 本文の読みやすさ -> --fs-* / --lh-* / --space-* / --flow-*
    - PC拡張           -> @media (min-width: 800px) 内の :root と各上書き
    - アニメーション   -> entrance / page-turn / reduced-motion 周辺

    注意:
    - 挙動そのものは site.js 側も確認すること。
*/

/*
    保守ガイド（最初に見る場所）

    1. 配色を変える
       -> 01. tokens の --c-* など

    2. 本文の読みやすさを変える
       -> --fs-* / --lh-* / --space-* / --flow-*

    3. h1 / h2 / h3 の見え方を変える
        -> --h1-* / --fs-h1 / --fs-h2 / --flow-h2-* / --flow-h3-* / --flow-dt-* / --flow-section

    4. PC全体の拡大縮小を変える
       -> 16. pc 内 :root の --pc-fluid-* / --html-*-font-*

    5. 左カラム（研究室名・メニュー）を変える
        -> --nav-labname-* / --fs-labname-* / --fs-toc-* / --toc-*

    6. PC余白や密度を変える
       -> --pc-header-* / --pc-main-* / --pc-main-preface-* / @media 内の --space-flow-*

    7. レイアウト比率を変える
       -> --pc-side-col-ratio / --pc-left-col-ratio / --pc-right-col-ratio

    注意:
    - page-turn, has-initial-hash, entrance.ready は site.js と連動
    - tooltip は direction / show / language exception の3段構成
    - :has() 依存箇所は HTML 構造変更時に要確認
*/

/*
    ==================================================
    プロパティ記述順序ルール（ローカル規約）
    ==================================================

    ■ 基本方針
    - 「影響範囲が大きいもの → 小さいもの」の順で書く
    - 「外側（レイアウト）→ 内側（見た目）」の順で書く
    - 可読性とスキャン性を最優先（意味のまとまりで並べる）
    - この順序は“厳密な規格”ではなく、“崩れないための指針”

    --------------------------------------------------
    ① レイアウト・配置
    --------------------------------------------------
    position
    inset / top / right / bottom / left
    z-index

    display
    flex / grid 系
    gap

    --------------------------------------------------
    ② ボックスモデル
    --------------------------------------------------
    box-sizing

    width / min-width / max-width
    height / min-height / max-height

    margin
    padding

    overflow

    --------------------------------------------------
    ③ タイポグラフィ
    --------------------------------------------------
    font
    font-family
    font-size
    font-weight
    line-height

    letter-spacing
    text-align
    text-decoration
    text-underline-offset
    text-decoration-thickness

    white-space
    word-break

    --------------------------------------------------
    ④ 見た目（ビジュアル）
    --------------------------------------------------
    color
    background / background-color / background-image

    border
    border-radius

    box-shadow

    opacity

    --------------------------------------------------
    ⑤ トランスフォーム・アニメーション
    --------------------------------------------------
    transform
    transform-origin

    transition
    animation

    will-change

    --------------------------------------------------
    ⑥ その他・補助
    --------------------------------------------------
    cursor
    pointer-events

    user-select

    --------------------------------------------------
    ■ 補足ルール
    --------------------------------------------------
    - shorthand（例: margin, background）は、可能な限りまとめて書く
    - ただし可読性が落ちる場合は分解してOK
    - calc() は「係数 * var()」の順で統一
        例: calc(.5 * var(--size))

    - 同一カテゴリ内では「論理的な並び」を優先
        例:
            width → height
            margin-block → margin-inline

    - 疑ったら：
        「このプロパティはレイアウトか？見た目か？」
        で上から順に配置する
*/

/*
    ■ 構成
    01. tokens
    02. fonts
    03. reset / base
    04. header
    05. fixed navigation / language
    06. main layout
    07. main typography
    08. flow spacing
    09. block components
    10. lists
    11. local navigation
    12. media / inline
    13. footer
    14. page-specific styles
    15. utilities
    16. pc
    17. reduced motion
    18. keyframes
*/


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 01. tokens ─────────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

:root {

    /* ==================================================
       foundation: font families
       ================================================== */

    --ff-sans: "Noto Sans JP", sans-serif;
    --ff-serif: "Noto Serif JP", serif;

    /* ==================================================
       foundation: spacing scale (no semantic meaning)
       ================================================== */

    --space-xxxs: .2rem;
    --space-xxs: .4rem;
    --space-xs: .6rem;
    --space-s: .8rem;
    --space-m: 1rem;
    --space-l: 1.2rem;
    --space-xl: 1.6rem;
    --space-xxl: 2.2rem;
    --space-xxxl: 3rem;

    /* ==================================================
       foundation: colors
       ================================================== */

    --c-key: rgb(207, 80, 48);
    --c-present: rgb(255, 255, 76);
    --c-future: rgb(122, 237, 255);

    --c-accent: rgb(173, 39, 39);
    --c-text: var(--c-header-bg);
    --c-link: rgb(0, 39, 68);
    --c-hover: var(--c-future);
    --c-current: var(--c-present);
    --c-border: var(--c-text);

    --c-left-col-bg:
        color-mix(
            in srgb,
            color-mix(in srgb, var(--c-nav-base) 50%, var(--c-header-bg) 50%) 90%,
            var(--c-key) 10%
        );
    --c-header-bg: rgb(40, 32, 23);
    --c-header-link: rgb(210, 201, 174);
    --c-header-area-link: var(--c-key);
    --c-nav-base: rgb(102, 84, 58);
    --c-nav-bg: color-mix(in srgb, var(--c-header-bg) 50%, var(--c-main-bg) 50%);
    --c-main-bg: var(--c-header-link);
    --c-inpage-nav-bg: var(--c-link);
    --c-right-col-bg: color-mix(in srgb, var(--c-nav-base) 50%, var(--c-main-bg) 50%);

    --c-cut-accent: var(--c-hover);

    --c-card-bg: color-mix(in srgb, var(--c-main-bg) 33%, white 67%);
    --c-intro-bg: color-mix(in srgb, var(--c-main-bg) 67%, white 33%);
    --c-hl: color-mix(in srgb, var(--c-accent) 50%, white 50%);

    /* ==================================================
       foundation: alpha variants
       ================================================== */

    --c-black-a00: rgba(0, 0, 0, 0);
    --c-black-a05: rgba(0, 0, 0, .05);
    --c-black-a10: rgba(0, 0, 0, .1);
    --c-black-a25: rgba(0, 0, 0, .25);
    --c-black-a50: rgba(0, 0, 0, .5);
    --c-black-a75: rgba(0, 0, 0, .75);

    /* ==================================================
       foundation: shadows / borders
       ================================================== */

    --shadow-text:
        -.10rem .16rem .26rem var(--c-black-a75),
        -.20rem .36rem .55rem var(--c-black-a25);
    --shadow-paper: 0 .2rem .4rem var(--c-black-a50);

    --line-thickness: 2px;
    --border-article: solid var(--line-thickness) var(--c-border);
    --border-note: double calc(2 * var(--line-thickness)) var(--c-border);
    --border-radius: calc(10 * var(--line-thickness));

    /* ==================================================
       foundation: line-height
       ================================================== */

    --lh-solid: 1;
    --lh-nav: 1.1;
    --lh-tight: 1.2;
    --lh-heading: 1.3;
    --lh-ui: 1.4;
    --lh-meta: 1.5;
    --lh-list: 1.6;
    --lh-body: 1.8;
    --lh-toc-parent: var(--lh-ui);
    --lh-toc-child: var(--lh-ui);

    /* ==================================================
       foundation: font-size
       ================================================== */

    --fs-body: 1rem;
    --fs-body-s: .85rem;
    --fs-body-l: 1.2rem;
    --fs-ui: .95rem;
    --fs-h2: 1.8rem;
    --fs-h1: 2.4rem;
    --fs-h1-span: 1.2rem;
    --fs-h1-front: 3rem;

    --fs-labname-ja: 1.8rem;
    --fs-labname-en: 1.8rem;
    --fs-labname-area-ja: 1.8rem;
    --fs-labname-area-en: 1.5rem;

    --fs-toc-parent: 1.4rem;
    --fs-toc-child: 1.1rem;

    /* ==================================================
       navigation: block spacing
       ================================================== */

    --nav-labname-margin-top: 4rem;
    --nav-labname-gap: 2rem;  /* 研究室名のブロックとメインメニューとの間 */

    /* ==================================================
        mobile: toc (table of contents) menu sizing
        ================================================== */

    /* 縦方向のリズム */
    --toc-group-gap: 1rem;  /* グループ間 */
    --toc-parent-child-gap: .7rem; /* 親→子 */
    --toc-child-gap: .5rem;  /* 子同士 */

    /* 横方向の構造 */
    --toc-indent-child: 1em; /* 子のインデント */

    /* ==================================================
       responsive alias: flow density (mobile-first)
       ================================================== */

    --space-flow-content: var(--space-s);
    --space-flow-list-item: var(--space-xs);

    --space-flow-h2-before: var(--space-xxl);
    --space-flow-h2-after: var(--space-m);

    --space-flow-h3-before: var(--space-l);
    --space-flow-h3-after: var(--space-s);

    --space-flow-dt-before: calc(.8 * var(--space-l));
    --space-flow-dt-after: var(--space-xs);

    --space-flow-dd-before: var(--space-xxs);
    --space-flow-dd-after: var(--space-xxs);

    --space-flow-section: var(--space-xxl);
    --space-flow-block-after: var(--space-xs);
    --space-flow-block-emphasis: var(--space-xxl);

    /* ==================================================
       semantic tokens: document flow
       ================================================== */

    --flow-content: var(--space-flow-content);
    --flow-list-item: var(--space-flow-list-item);

    --flow-h2-before: var(--space-flow-h2-before);
    --flow-h2-after: var(--space-flow-h2-after);

    --flow-h3-before: var(--space-flow-h3-before);
    --flow-h3-after: var(--space-flow-h3-after);

    --flow-dt-before: var(--space-flow-dt-before);
    --flow-dt-after: var(--space-flow-dt-after);

    --flow-dd-before: var(--space-flow-dd-before);
    --flow-dd-after: var(--space-flow-dd-after);

    --flow-section: var(--space-flow-section);
    --flow-block-after: var(--space-flow-block-after);
    --flow-block-emphasis: var(--space-flow-block-emphasis);

    /* ==================================================
       heading accents
       =============================================== */

    --h3-accent-width: calc(5 * var(--line-thickness));
    --h3-accent-gap: var(--space-xs);

    /* ==================================================
       semantic tokens: page heading (h1)
       ================================================== */

    --h1-margin-top: var(--space-xxl);
    --h1-margin-bottom: var(--space-xxl);
    --h1-following-heading-gap: var(--space-xxl);

    --h1-band-height: var(--h1-front-band-height);
    --h1-padding-bottom: calc(var(--space-xxl) + var(--h1-band-height));

    --h1-front-margin-top: var(--space-xxl);
    --h1-front-band-height: calc(var(--fs-h1-front) / 3);
    --h1-front-padding-bottom: calc(var(--space-xxl) + var(--h1-front-band-height));

    /* ==================================================
       semantic tokens: components
       ================================================== */

    --preface-margin-block: var(--space-xxxl);
    --preface-inner-padding-block: var(--space-m);
    --preface-inner-padding-inline: 10vw;

    --concept-margin-block: var(--space-xxl);
    --concept-padding-block: 1lh;
    --concept-padding-inline: 2em;

    --intro-margin-block: var(--space-xxl);
    --intro-padding-block: var(--space-l);
    --intro-padding-inline: var(--space-xl);

    --note-margin-block: var(--space-xxl);
    --note-padding-block: .8lh;
    --note-padding-inline: 1.5em;

    --local-nav-margin-block: var(--space-xxl);
    --local-nav-padding: var(--space-m);

    --record-box-padding-block: calc(.45 * var(--space-s));
    --record-box-padding-inline: calc(.8 * var(--space-s));
    --record-box-radius: calc(5 * var(--line-thickness));
    --record-box-border-color: var(--c-text);
    --record-box-margin-top: var(--space-s);
    --record-box-margin-right: var(--space-s);

    /* ==================================================
       semantic tokens: page-specific
       ================================================== */

    --members-gap-group: 2.7rem;
    --members-gap-item: var(--space-xs);
    --members-gap-term-to-item: var(--space-xs);

    /* publications: compressed mode */
    /*
        一般本文の圧縮版

        - 本文（--fs-body）を基準に 0.9 倍
        - 行間は meta 系（やや詰めるが可読性は維持）
        - 余白は space スケールから派生
        - インデントは em ベースで追従
    */

    --pub-scale: .9;

    --pub-fs-item: calc(var(--fs-body) * var(--pub-scale));
    --pub-lh-item: var(--lh-meta);

    --pub-dt-fs: var(--fs-body);

    /* space-xl ≈ 1.6rem をベースに軽く圧縮（旧1.5rem相当） */
    --pub-dd-margin-block: calc(var(--space-xl) * .94);

    /* list layout */
    --pub-list-indent: 3.5em;
    --pub-list-margin-top: var(--space-m);
    --pub-list-margin-bottom: calc(var(--space-s) * .625);

    /* hanging indent */
    --pub-item-hanging-indent: 2.8em;

    /* marker spacing */
    --pub-marker-margin-inline-start: 1em;
    --pub-marker-margin-inline-end: .4em;

    /* ==================================================
       layout: anchors
       ================================================== */

    --scroll-offset-content: var(--space-xxxl);
    --scroll-offset-section: calc(var(--space-xxxl) + var(--space-m));

    /* ==================================================
       navigation: mobile
       ================================================== */

    --mobile-nav-icon-size: 26px;
    --mobile-nav-icon-margin-block: 12px;
    --mobile-nav-icon-margin-inline: 22px;
    --mobile-nav-lang-top: 13px;
    --mobile-nav-lang-right: 22px;
    --mobile-nav-lang-size: 23px;

    /* ==================================================
       interaction: links
       ================================================== */

    --underline-link: underline;
    --underline-position: from-font;
    --underline-offset: .08em;
    --underline-thickness: 1px;

    /* ==================================================
       overlay: tooltip
       ================================================== */

    --tooltip-bg-left: var(--c-left-col-bg);
    --tooltip-bg-right: var(--c-right-col-bg);
    --tooltip-bg-center: var(--c-nav-bg);
    --tooltip-text: var(--c-hover);
    --tooltip-shadow: 0 .1rem .2rem var(--c-black-a25);

    /* ==================================================
       navigation: inner-page
       ================================================== */

    --nav-gap-row: var(--space-xs);
    --nav-gap-col: var(--space-m);
    --pubnav-gap-col-default: var(--nav-gap-col);
    --pubnav-gap-col-2: calc(4 * var(--nav-gap-col));
    --pubnav-gap-col-3: calc(2 * var(--nav-gap-col));

    /* ==================================================
       interaction: shared motion / UI
       ================================================== */

    --hover-scale-ui: 1.1;

    /* ==================================================
       stripe
       ================================================== */

    --stripe-band-angle: 90deg;
    --stripe-band-thickness: var(--line-thickness);
    --stripe-divider-height: calc(var(--h1-band-height) / 3);

}

@media (min-width: 800px) {

/*
    --------------------------------------------------
    header安定化設計と微調整メモ
    --------------------------------------------------

    ページ遷移時のごく僅かなheaderのビクつきを防ぐため、
    header関連の主要サイズは、
    root font-size → 派生倍率
    の多段依存をできるだけ避け、

    PC可変域の進行率（--pc-fluid-progress）を使って、
    min / max 間を補間する形で定義している。

    微調整の原則:
    - 変更は min / max 側のトークンを優先する
    - 共通の補間ロジック（--pc-fluid-progress）はなるべく触らない
    - 個別値を動かすと中間域も自動的に追従する
*/

    :root {

        /* ==================================================
           pc: root font size
           ================================================== */

        --font-scale: 1;

        --html-ja-font-min: 16px;
        --html-ja-font-max: 22px;
        --html-en-font-min: 14px;
        --html-en-font-max: 20px;

        --html-ja-font-size:
            calc(
                (
                    var(--html-ja-font-min)
                    + (var(--html-ja-font-max) - var(--html-ja-font-min))
                    * var(--pc-fluid-progress)
                )
                * var(--font-scale)
            );

        --html-en-font-size:
            calc(
                (
                    var(--html-en-font-min)
                    + (var(--html-en-font-max) - var(--html-en-font-min))
                    * var(--pc-fluid-progress)
                )
                * var(--font-scale)
            );

        /* ==================================================
           pc: typography overrides
           ================================================== */

        --fs-h1: 2.8rem;
        --fs-h1-span: 1.4rem;
        --fs-h1-front: 4rem;

        --fs-labname-ja-min: 1.9rem;
        --fs-labname-ja-max: 2.9rem;
        --fs-labname-ja:
            calc(
                var(--fs-labname-ja-min)
                + (var(--fs-labname-ja-max) - var(--fs-labname-ja-min))
                * var(--pc-fluid-progress)
            );
        --fs-labname-area-ja: var(--fs-labname-ja);

        --fs-labname-en-min: 2rem;
        --fs-labname-en-max: 3.1rem;
        --fs-labname-en:
            calc(
                var(--fs-labname-en-min)
                + (var(--fs-labname-en-max) - var(--fs-labname-en-min))
                * var(--pc-fluid-progress)
            );
        --fs-labname-area-en-min: 1.2rem;
        --fs-labname-area-en-max: 1.7rem;
        --fs-labname-area-en:
            calc(
                var(--fs-labname-area-en-min)
                + (var(--fs-labname-area-en-max) - var(--fs-labname-area-en-min))
                * var(--pc-fluid-progress)
            );

        --fs-toc-parent: .9rem;
        --fs-toc-child: .75rem;

        /* ==================================================
           pc: navigation block spacing
           ================================================== */

        --nav-labname-margin-top: 0;

        /* 研究室名のブロックとメインメニューとの間 */
        --nav-labname-gap-min: 5.5rem;
        --nav-labname-gap-max: 7rem;
        --nav-labname-gap:
            calc(
                var(--nav-labname-gap-min)
                + (var(--nav-labname-gap-max) - var(--nav-labname-gap-min))
                * var(--pc-fluid-progress)
            );

        --nav-divider-height: calc(var(--nav-labname-gap) / 10);
        --nav-divider-unit: calc(1.8 * var(--nav-divider-height));

        /* ワードマークのブロックとメインメニューとの間 */
        --nav-wordmark-gap: calc(.9 * var(--nav-labname-gap));

        /* headerカラムの上の三角塗りとnavの傾きを並行にするため */
        /* atan((5 / 34) * .8) ≒ 6.73deg
        = header diagonal (ccw / left-col) adjusted by scaleX(.8) */
        --nav-skew-angle: 6.73deg;

        /* ==================================================
           pc: flow density
           ================================================== */

        --space-flow-content: var(--space-m);
        --space-flow-list-item: var(--space-xs);

        --space-flow-h2-before: var(--space-xxxl);
        --space-flow-h2-after: var(--space-l);

        --space-flow-h3-before: var(--space-xl);
        --space-flow-h3-after: var(--space-m);

        --space-flow-dt-before: calc(.8 * var(--space-xl));
        --space-flow-dt-after: var(--space-s);

        --space-flow-dd-before: var(--space-xxs);
        --space-flow-dd-after: var(--space-xxs);

        --space-flow-section: var(--space-xxxl);
        --space-flow-block-after: var(--space-xs);
        --space-flow-block-emphasis: var(--space-xxxl);

        /* ==================================================
           pc: h1 / anchor spacing
           ================================================== */

        --h1-margin-top: var(--space-xxxl);
        --h1-margin-bottom: var(--space-xxxl);
        --h1-following-heading-gap: var(--space-xxxl);
        --h1-padding-bottom: calc(var(--space-xxxl) + var(--h1-band-height));

        --h1-front-margin-top: var(--space-xxxl);
        --h1-front-padding-bottom: calc(var(--space-xxxl) + var(--h1-front-band-height));

        --scroll-offset-content: 0;
        --scroll-offset-section: var(--space-xxl);

        /* ==================================================
           pc: motion
           ================================================== */

        --page-default-angle: 0deg;
        --page-flip-start-angle: 60deg;
        --page-turn-start-angle: -60deg;
        --page-turn-duration: 1.5s;
        --page-turn-soft-angle: -15deg;
        --page-turn-soft-duration: .75s;
        --page-turn-soft-scale: .2;

        /* ==================================================
           pc: layout ratios
           ================================================== */

        --pc-side-col-ratio: 3;
        --pc-left-col-ratio: 34;
        --pc-right-col-ratio: 55;

        /* ==================================================
           pc: UI scale factors
           ================================================== */

        --pc-nav-icon-scale: .7;
        --pc-nav-paging-icon-scale: .75;
        --pc-nav-lang-scale: .65;
        --pc-validator-icon-scale: .7;
        --pc-page-number-scale: .5;
        --pc-footer-font-scale: .3;
        --pc-nav-font-scale-control-scale: 1;
        --pc-nav-font-scale-control-radius-scale: .25;

        /* ==================================================
           pc: fluid system
           ================================================== */

        --pc-fluid-min-vw: 800px;
        --pc-fluid-max-vw: 1920px;
        --pc-fluid-range-vw: calc(var(--pc-fluid-max-vw) - var(--pc-fluid-min-vw));
        --pc-fluid-progress:
            clamp(
                0,
                calc((100vw - var(--pc-fluid-min-vw)) / var(--pc-fluid-range-vw)),
                1
            );

        /* ==================================================
           pc: toc (table of contents) menu sizing
           ================================================== */

        /* 1行の高さ */
        --lh-toc-parent: var(--lh-nav);
        --lh-toc-child: var(--lh-nav);

        /* 縦方向のリズム */
        --toc-group-gap: .9rem;  /* グループ間 */
        --toc-parent-child-gap: .6rem; /* 親→子 */
        --toc-child-gap: .3rem;  /* 子同士 */

        /* 横方向の構造 */
        --toc-column-gap: .7em;  /* タイトルとリーダーの間（「タイトル → ⋯」の距離） */
        --toc-page-width: 2.4ch; /* ページ番号の幅（右端の固定幅） */

        /* リーダー（・・・部分） */
        --toc-leader-thickness: 4px; /* 線の太さ */
        --toc-leader-offset: .08em;  /* ベースラインからのズレ */

        /* ==================================================
           pc: stage / rails
           ================================================== */

        --pc-layout-max: 1920px;
        --pc-ui-scale-max: 1280px;

        --pc-stage: min(100vw, var(--pc-layout-max));
        --pc-gutter: max(0px, calc((100vw - var(--pc-stage)) / 2));
        --pc-ui-stage: min(100vw, var(--pc-ui-scale-max));

        --scw: calc(var(--pc-stage) * var(--pc-side-col-ratio) / 100);
        --lcw: calc(var(--pc-stage) * var(--pc-left-col-ratio) / 100);
        --rcw: calc(var(--pc-stage) * var(--pc-right-col-ratio) / 100);
        --ccw: calc(var(--pc-stage) - (2 * var(--scw) + var(--lcw) + var(--rcw)));
        --scw-ui: calc(var(--pc-ui-stage) * var(--pc-side-col-ratio) / 100);
        --ccw-ui: calc(var(--pc-ui-stage) - (2 * var(--scw-ui) + (var(--pc-ui-stage) * var(--pc-left-col-ratio) / 100) + (var(--pc-ui-stage) * var(--pc-right-col-ratio) / 100)));

        --centerline: calc(var(--pc-gutter) + var(--scw) + var(--lcw) + (var(--ccw) / 2));
        --rail-offset: calc(var(--pc-gutter) + (var(--scw) / 2));

        /* ==================================================
           pc: navigation / footer sizing
           ================================================== */

        --pc-nav-paging-icon-size: calc(var(--pc-nav-paging-icon-scale) * var(--ccw-ui));
        --pc-nav-paging-icon-gap: calc(.5 * var(--pc-nav-paging-icon-size));

        --pc-nav-icon-size: calc(var(--pc-nav-icon-scale) * var(--scw-ui));
        --pc-nav-icon-margin: calc(.5 * var(--pc-nav-icon-size));
        --pc-nav-block-margin: calc(.25 * var(--pc-nav-icon-size));

        --pc-nav-lang-size: calc(var(--pc-nav-lang-scale) * var(--scw-ui));
        --pc-page-number-size: calc(var(--scw-ui) * var(--pc-page-number-scale));

        --pc-validator-icon-size: calc(var(--pc-validator-icon-scale) * var(--scw-ui));
        --pc-validator-icon-margin: calc(.5 * var(--pc-validator-icon-size));
        --pc-footer-validator-gap: calc(.25 * var(--pc-validator-icon-size));
        --pc-footer-font-size: calc(var(--pc-footer-font-scale) * var(--scw-ui));
        --pc-footer-bottom: calc(var(--pc-footer-font-scale) * var(--scw-ui));

        --pc-nav-font-scale-control-size:
            calc(var(--pc-nav-font-scale-control-scale) * var(--pc-nav-icon-size));
        --pc-nav-font-scale-control-margin:
            var(--pc-nav-icon-margin);
            /* calc(.5 * var(--pc-nav-font-scale-control-size)); */
        --pc-nav-font-scale-control-block-margin:
            calc(.25 * var(--pc-nav-font-scale-control-size));
        --pc-nav-font-scale-control-radius:
            calc(var(--pc-nav-font-scale-control-radius-scale) * var(--pc-nav-font-scale-control-size));

        --pc-nav-font-scale-control-glyph-s-scale: .4;
        --pc-nav-font-scale-control-glyph-m-scale: .5;
        --pc-nav-font-scale-control-glyph-l-scale: .6;

        --pc-nav-font-scale-control-glyph-s-size:
            calc(var(--pc-nav-font-scale-control-glyph-s-scale) * var(--pc-nav-font-scale-control-size));
        --pc-nav-font-scale-control-glyph-m-size:
            calc(var(--pc-nav-font-scale-control-glyph-m-scale) * var(--pc-nav-font-scale-control-size));
        --pc-nav-font-scale-control-glyph-l-size:
            calc(var(--pc-nav-font-scale-control-glyph-l-scale) * var(--pc-nav-font-scale-control-size));

        /* ==================================================
           pc: inner spacing
           ================================================== */

        --pc-header-padding-top-min: 4.5rem;
        --pc-header-padding-top-max: 9rem;
        --pc-header-padding-bottom: 4.5rem;

        --pc-header-padding-right-min: 2.8rem;
        --pc-header-padding-right-max: 5.6rem;
        --pc-header-padding-left-min: .4rem;
        --pc-header-padding-left-max: 4rem;

        --pc-header-padding-top:
            calc(
                var(--pc-header-padding-top-min)
                + (var(--pc-header-padding-top-max) - var(--pc-header-padding-top-min))
                * var(--pc-fluid-progress)
            );

        --pc-header-padding-right:
            calc(
                var(--pc-header-padding-right-min)
                + (var(--pc-header-padding-right-max) - var(--pc-header-padding-right-min))
                * var(--pc-fluid-progress)
            );

        --pc-header-padding-left:
            calc(
                var(--pc-header-padding-left-min)
                + (var(--pc-header-padding-left-max) - var(--pc-header-padding-left-min))
                * var(--pc-fluid-progress)
            );

        --pc-main-padding-top-min: 1rem;
        --pc-main-padding-top-max: 2rem;
        --pc-main-padding-bottom-min: 1.5rem;
        --pc-main-padding-bottom-max: 3rem;
        --pc-main-padding-right-min: 3rem;
        --pc-main-padding-right-max: 7.5rem;
        --pc-main-padding-left-min: 3rem;
        --pc-main-padding-left-max: 6rem;

        --pc-main-padding-top:
            calc(
                var(--pc-main-padding-top-min)
                + (var(--pc-main-padding-top-max) - var(--pc-main-padding-top-min))
                * var(--pc-fluid-progress)
            );

        --pc-main-padding-bottom:
            calc(
                var(--pc-main-padding-bottom-min)
                + (var(--pc-main-padding-bottom-max) - var(--pc-main-padding-bottom-min))
                * var(--pc-fluid-progress)
            );

        --pc-main-padding-right:
            calc(
                var(--pc-main-padding-right-min)
                + (var(--pc-main-padding-right-max) - var(--pc-main-padding-right-min))
                * var(--pc-fluid-progress)
            );

        --pc-main-padding-left:
            calc(
                var(--pc-main-padding-left-min)
                + (var(--pc-main-padding-left-max) - var(--pc-main-padding-left-min))
                * var(--pc-fluid-progress)
            );

        --pc-main-preface-margin-inline: 0;

        --pc-main-preface-padding-block-max: 4.5rem;
        --pc-main-preface-padding-block-min: calc(var(--pc-main-preface-padding-block-max) / 2);

        --pc-main-preface-padding-inline-max: 4.5rem;
        --pc-main-preface-padding-inline-min: calc(var(--pc-main-preface-padding-inline-max) / 2);

        --pc-main-preface-padding-block:
            calc(
                var(--pc-main-preface-padding-block-min)
                + (var(--pc-main-preface-padding-block-max) - var(--pc-main-preface-padding-block-min))
                * var(--pc-fluid-progress)
            );

        --pc-main-preface-padding-inline:
            calc(
                var(--pc-main-preface-padding-inline-min)
                + (var(--pc-main-preface-padding-inline-max) - var(--pc-main-preface-padding-inline-min))
                * var(--pc-fluid-progress)
            );

        /* ==================================================
           pc: overlay
           ================================================== */

        --pc-tooltip-font-scale: .55;
        --pc-tooltip-font-size: calc(var(--pc-nav-icon-size) * var(--pc-tooltip-font-scale));
        --pc-tooltip-padding-block: .3rem;
        --pc-tooltip-padding-inline: .75rem;

        --pc-bg-center-width: var(--ccw);
        --pc-bg-center-left: calc(var(--centerline) - (.5 * var(--pc-bg-center-width)));

        /* ==================================================
           pc: shared interaction tokens
           ================================================== */

        --perspective-page: 600px;
        --perspective-nav: 800px;

        --hover-shift-main-nav-y: .1rem;

        --tooltip-gap: .6rem;
    }
}

/* icon helper */

.icon {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 02. fonts ──────────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    src: local("Noto Sans CJK JP Medium"), url(fonts/NotoSansJP-Medium.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 700;
    src: local("Noto Sans CJK JP Bold"), url(fonts/NotoSansJP-Bold.otf) format("opentype");
}

@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 900;
    src: local("Noto Sans CJK JP Black"), url(fonts/NotoSansJP-Black.otf) format("opentype");
}

@font-face {
    font-family: "Noto Serif JP";
    font-style: normal;
    font-weight: 500;
    src: local("Noto Serif CJK JP Medium"), url(fonts/NotoSerifJP-Medium.otf) format("opentype");
}

@font-face {
    font-family: "Noto Serif JP";
    font-style: normal;
    font-weight: 700;
    src: local("Noto Serif CJK JP Bold"), url(fonts/NotoSerifJP-Bold.otf) format("opentype");
}

@font-face {
    font-family: "Noto Serif JP";
    font-style: normal;
    font-weight: 900;
    src: local("Noto Serif CJK JP Black"), url(fonts/NotoSerifJP-Black.otf) format("opentype");
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 03. reset / base ───────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*
    font-size notes
    [html]
        16px = 100%
        18px = 112.5% for en
        20px = 125% for ja
        22px = 137.5%
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
}

html {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    color: var(--c-text);
    background-color: var(--c-main-bg);
    font-family: var(--ff-sans);
    font-feature-settings: "palt" 1;
    font-kerning: normal;
    font-weight: 500;
    font-size: 20px; /* 個別指定 */
    line-height: normal;
    text-align: left;
    letter-spacing: normal;
    word-spacing: normal;
    animation: fade-in .5s ease-in;
}

html:lang(en) {
    font-feature-settings: "liga" 1;
    font-size: 18px; /* 個別指定 */
}

body {
    min-height: 100%;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 04. header ─────────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

header {
    display: block;
    min-height: 100vh;
    padding: 1rem 8vw 3rem 10vw;
    color: var(--c-header-link);
    background-color: var(--c-header-bg);
    text-shadow: var(--shadow-text);
}

@supports (min-height: 100svh) {
    header {
        min-height: 100svh;
    }
}

header a {
    display: inline-block;
    color: var(--c-header-link);
    background-color: transparent;
    font-weight: 900;
    text-decoration: none;
}

header .nav-sub-list a {
    font-weight: 700;
}

header a:hover {
    color: var(--c-hover);
}

header nav {
    font-size: var(--fs-body);
    line-height: var(--lh-nav);
}

header nav span#current {
    display: inline-block;
    color: var(--c-current);
    background-color: transparent;
    font-weight: 900;
}

header nav div#labname {
    z-index: 20;
    position: relative;
    margin:
        var(--nav-labname-margin-top)
        0
        var(--nav-labname-gap);
    font-weight: 900;
}

header nav div#labname a,
header nav div#labname span#current {
    display: inline-block;
    font-size: var(--fs-labname-ja);
    line-height: var(--lh-nav);
}

header:lang(en) nav div#labname a,
header:lang(en) nav div#labname span#current {
    font-size: var(--fs-labname-en);
}

header nav div#labname span#area {
    display: inline-block;
    margin-top: var(--space-xxs);
    color: var(--c-key);
    background-color: transparent;
    font-size: var(--fs-labname-area-ja);
    line-height: var(--lh-nav);
}

header:lang(en) nav div#labname span#area {
    font-size: var(--fs-labname-area-en);
}

header nav div#labname a span#area {
    color: var(--c-header-area-link);
}

header nav div#labname a:hover span#area {
    color: var(--c-header-area-link);
}

header nav ul,
header nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}

header nav ul.nav-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--toc-group-gap);
}

header nav ul.nav-sub-list {
    margin-top: var(--toc-parent-child-gap);
    padding-left: var(--toc-indent-child);
}

header nav li.nav-parent > .nav-link,
header nav li.nav-parent > #current.nav-link {
    display: block;
    font-size: var(--fs-toc-parent);
    line-height: var(--lh-toc-parent);
}

header nav li.nav-child > .nav-link,
header nav li.nav-child > #current.nav-link {
    display: block;
    font-size: var(--fs-toc-child);
    line-height: var(--lh-toc-child);
}

header nav li.nav-child + li.nav-child {
    margin-top: var(--toc-child-gap);
}

header nav .nav-leader,
header nav .nav-page {
    display: none;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 05. fixed navigation / language ────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

div#nav-paging {
    z-index: 30;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--mobile-nav-icon-margin-inline);
    width: 100%;
    padding:
        var(--mobile-nav-icon-margin-block)
        0
        var(--mobile-nav-icon-margin-block)
        calc(.5 * (var(--mobile-nav-lang-right) + var(--mobile-nav-lang-size)));
    position: fixed;
    inset: 0 auto auto 0;
    color: var(--c-header-link);
    background-color: var(--c-nav-bg);
    writing-mode: horizontal-tb;
    font-feature-settings: normal;
    letter-spacing: 0;
    word-spacing: 0;
}

div#nav-paging a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mobile-nav-icon-size);
    height: var(--mobile-nav-icon-size);
    margin: 0;
    padding: 0;
    color: var(--c-text);
    background-color: transparent;
    font-size: var(--mobile-nav-icon-size);
    line-height: var(--lh-nav);
    text-align: center;
    vertical-align: bottom;
    transform: none;
}

div#nav-paging a:hover {
    color: var(--c-hover);
}

@media (max-width: 799px) {
    div#nav-site,
    div#nav-browser,
    div#nav-font-scale-control {
        display: none;
    }
}

div#language a {
    z-index: 30;
    display: inline-block;
    position: fixed;
    inset: var(--mobile-nav-lang-top) var(--mobile-nav-lang-right) auto auto;
    width: auto;
    height: auto;
    color: var(--c-text);
    background-color: transparent;
    font-weight: 900;
    font-size: var(--mobile-nav-lang-size);
    line-height: var(--lh-solid);
    text-align: center;
    vertical-align: bottom;
    text-decoration: none;
}

div#language a:hover {
    color: var(--c-hover);
}

div#language .lang-switch-long {
    display: none;
}

div#language .lang-switch-short {
    display: inline;
}

/* unified interaction rules for navigation UI */
div[id^="nav"] a,
div#nav-font-scale-control button,
footer .footer-validator a,
div#language a {
    outline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

div[id^="nav"] a:focus-visible,
div#nav-font-scale-control button:focus-visible,
footer .footer-validator a:focus-visible,
div#language a:focus-visible {
    outline: var(--line-thickness) solid var(--c-hover);
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 06. main layout ────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

main {
    display: block;
    min-height: 100vh;
    padding: 1rem 8vw;
    color: var(--c-text);
    background-color: var(--c-main-bg);
    font-family: var(--ff-serif);
    font-weight: 500;
    overflow-wrap: break-word;
    letter-spacing: 0;
    word-spacing: 0;
}

@supports (min-height: 100svh) {
    main {
        min-height: 100svh;
    }
}

main div#content {
    scroll-margin-top: var(--scroll-offset-content);
}

main section[id] {
    scroll-margin-top: var(--scroll-offset-section);
}

main article,
main section,
main nav,
main div,
main figure {
    max-width: 100%;
}

main a {
    color: var(--c-link);
    background-color: transparent;
    font-weight: 700;
    text-decoration: var(--underline-link);
    text-underline-position: var(--underline-position);
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
}

main a[target="_blank"]:not(:has(img))::after {
    content: "";
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-left: .2em;
    vertical-align: .05em;
    background-color: currentColor;
    mask-image: url("icons/external.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("icons/external.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

main a:hover {
    color: var(--c-link);
    background: linear-gradient(to bottom, transparent 0%, transparent 15%, var(--c-hover) 15%, var(--c-hover) 100%);
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 07. main typography ────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*
    見出し設計

    - h1 は章扉に近い扱い
    - h2 は節の開始を明確に示す
    - h3 は節内の小区切り
    - 前の余白を大きめ、後ろは少し締める
*/

main h1,
main h2,
main h3 {
    display: block;
    font-weight: 900;
    line-height: var(--lh-heading);
}

main h1:not(#logo) {
    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
    padding-bottom: var(--h1-padding-bottom);
    border-bottom: none;
    background-image: repeating-linear-gradient(
        var(--stripe-band-angle),
        currentColor 0,
        currentColor var(--stripe-band-thickness),
        transparent var(--stripe-band-thickness),
        transparent calc(4 * var(--stripe-band-thickness))
    );
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: auto var(--h1-band-height);
    font-size: var(--fs-h1);
}

main h1#front {
    margin-top: var(--h1-front-margin-top);
    padding-bottom: var(--h1-front-padding-bottom);
    border-bottom: none;
    background-image: repeating-linear-gradient(
        var(--stripe-band-angle),
        currentColor 0,
        currentColor var(--stripe-band-thickness),
        transparent var(--stripe-band-thickness),
        transparent calc(4 * var(--stripe-band-thickness))
    );
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: auto var(--h1-front-band-height);
    font-size: var(--fs-h1-front);
}

main h1 span {
    display: block;
    margin: 0;
    color: var(--c-text);
    font-size: var(--fs-h1-span);
    line-height: var(--lh-heading);
}

main h1#logo {
    margin: 2.5rem 0; /* 個別指定 */
    padding-bottom: 0;
    border-bottom: none;
    background: none;
    text-align: center;
}

main h1#logo picture {
    display: block;
}

main h1#logo picture img {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

main h2 {
    margin-block: var(--flow-h2-before) var(--flow-h2-after);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading); /* 元は1.25 */
}

main h2 span {
    font-size: var(--fs-body-l);
}

main h3 {
    position: relative;
    margin-block: var(--flow-h3-before) var(--flow-h3-after);
    padding-left: calc(var(--h3-accent-width) + var(--h3-accent-gap));
    font-size: var(--fs-body-l);
    line-height: var(--lh-heading); /* 元は1.35 */
}

main h3::before {
    content: "";
    position: absolute;
    top: 0.2em;
    bottom: 0.1em;
    left: 0;
    width: var(--h3-accent-width);

    background-image: repeating-linear-gradient(
        to right,
        var(--c-text) 0,
        var(--c-text) var(--stripe-band-thickness),
        transparent var(--stripe-band-thickness),
        transparent calc(2 * var(--stripe-band-thickness))
    );
}

main p,
main li,
main dd,
main figcaption {
    font-size: var(--fs-body);
}

main p {
    text-align: left;
    line-height: var(--lh-body);
}

main p:lang(en) {
    hyphens: auto;
    overflow-wrap: normal;
}

main p + p,
main ul + p {
    text-indent: 1em;
}

main p + p:lang(en),
main ul + p:lang(en) {
    text-indent: 1.5em;
}

/* 強調・独立ブロック（前後に余白を持たせる） */
main :where(
    p#contact,
    p:has(.block-strong)
) {
    margin-top: var(--flow-block-emphasis);
}

/* 直後も少し広げる（次要素側で制御） */
main :where(
    p#contact,
    p:has(.block-strong)
) + * {
    margin-top: var(--flow-block-emphasis);
}

main time {
    margin-right: var(--space-xxxs);
    color: var(--c-accent);
    font-weight: 900;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 08. flow spacing ───────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*
    本文の縦リズム

    ■ 基本原則
    - 通常本文フローは「次の要素の上余白」で管理する
    - 前の要素の margin-bottom には頼らない
    - section の切れ目も sibling 関係で管理する

    ■ 例外（構造要素）
    - h2 / h3 / dt / dd などは、要素自身の前後余白で管理する
    - これらは本文フローの共通ルールには載せない

    ■ 例外（特殊ブロック）
    - intro / note / local nav / concept / preface などは
      基本的に「自分の上余白だけ」を持つ
    - 次の要素との間は、共通フロー側で決める

    ■ 設計意図
    - p + section と section + section を同じ思想で揃える
    - HTML構造の違いで見た目がぶれないようにする
*/

/* base reset: flow対象ブロックはまず上下 margin を持たせない */
main :where(p, ul, ol, dl, figure, nav, pre, section) {
    margin-block: 0;
}

main li,
main dd + dd,
main ul.nested li {
    margin-block: var(--flow-list-item);
}

/* regular content -> regular content */
main :where(p, ul, ol, dl, figure, nav, pre)
+ :where(p, ul, ol, dl, figure, nav, pre) {
    margin-top: var(--flow-content);
}

/* regular content -> section */
main :where(p, ul, ol, dl, figure, nav, pre) + section {
    margin-top: var(--flow-section);
}

/* section -> regular content */
main section + :where(p, ul, ol, dl, figure, nav, pre) {
    margin-top: var(--flow-content);
}

/* section -> section */
main section + section {
    margin-top: var(--flow-section);
}

/* section の先頭には h2 が来る設計思想を反映 */
main section > h2:first-child {
    margin-top: 0;
}

main div#preface + h2 {
    margin-top: calc(var(--flow-h2-before) + var(--flow-block-after));
}

/* boxed blocks -> section */
main :where(
    p#intro + section,
    p.note + section,
    p.box + section
) {
    padding-top: var(--flow-block-after);
}

/* h1 area */
main h1 + p.tac,
main h1 + nav + p.tac {
    padding: 0;
    background-color: transparent;
}

main h1 + h2,
main h1 + nav + h2 {
    margin-top: var(--h1-following-heading-gap);
}

/* intro / note / box / meta paragraphs */
main p#intro {
    margin-top: var(--intro-margin-block);
    padding: var(--intro-padding-block) var(--intro-padding-inline);
    background-color: var(--c-intro-bg);
    border-radius: var(--border-radius);
    font-size: var(--fs-body-s);
}

main p.note {
    margin-top: var(--note-margin-block);
    margin-inline: var(--line-thickness);
    padding: var(--note-padding-block) var(--note-padding-inline);
    border: var(--border-note);
    border-radius: var(--border-radius);
    font-size: var(--fs-body-s);
    line-height: var(--lh-meta);
    text-align: left;
    text-indent: 0 !important;
}

main p.box {
    margin-top: var(--space-xxl);
    padding: var(--space-m) calc(1.3 * var(--space-m));
    border: var(--border-article);
    border-radius: var(--border-radius);
    text-align: left;
    text-indent: 0 !important;
}

main p.induction {
    margin-top: var(--space-xxs);
    text-align: right;
    font-size: .95em;
}

main p.update {
    margin: var(--flow-section) 0 var(--flow-content); /* モバイルではこの下にfooterがくるから、下マージンとして--flow-contentを確保 */
    font-size: var(--fs-body-s);
    line-height: var(--lh-meta);
    text-align: right;
    text-indent: 0 !important;
}

main p#contact {
    font-family: var(--ff-sans);
    font-size: var(--fs-body-l);
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    text-indent: 0 !important;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 09. block components ───────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* concept figure */

main figure.concept {
    display: block;
    width: fit-content;
    margin: var(--concept-margin-block) auto;
    padding: var(--concept-padding-block) var(--concept-padding-inline);
    color: var(--c-text);
    background-color: var(--c-card-bg);
    box-shadow: var(--shadow-paper);
    font-family: var(--ff-sans);
    font-size: 1.4rem; /* 個別指定 */
    font-weight: 900;
    line-height: var(--lh-meta);
    text-align: center;
    text-indent: 0 !important;
}

.concept .arrow {
    font-size: 2em;
}

/* preface */
/*
    preface構造（4つ折り紙の展開デザイン）

    HTMLは「4つ折りの紙を広げた」状態を模しており、
    div#preface > div > div は展開された各パネルを表す。

    そのため、このセレクタは意図的に構造依存している。
    マークアップを変更する場合は、この構造との対応関係に注意。
*/

main div#preface {
    margin: var(--preface-margin-block) 0 0;
    padding: 0;
    color: var(--c-text);
    background-color: var(--c-card-bg);
    box-shadow: var(--shadow-paper);
    text-align: center;
}

main div#preface div {
    padding: 0;
    background: linear-gradient(to right, var(--c-black-a00) 28%, var(--c-black-a05) 50%, var(--c-black-a10) 50%, var(--c-black-a00) 72%);
}

main div#preface div div {
    padding: var(--preface-inner-padding-block) var(--preface-inner-padding-inline);
    background: linear-gradient(to bottom, var(--c-black-a00) 28%, var(--c-black-a05) 50%, var(--c-black-a10) 50%, var(--c-black-a00) 72%);
}

main div#preface p {
    margin: var(--space-m) 0;
    padding: 0;
    font-family: var(--ff-serif);
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: var(--lh-body);
    text-indent: 0;
}

main div#preface p#signature {
    margin: var(--space-l) var(--space-xxs) 0 0;
    text-align: right;
}

main div#preface p#signature img {
    margin: 0;
}

main div#preface p#printname {
    margin: var(--space-xxs) var(--space-xxs) 1rem 0;
    font-size: .8rem; /* 個別指定 */
    font-weight: 500;
    line-height: var(--lh-meta);
    text-align: right;
    text-indent: 0 !important;
}

/* media block */

main .media-block {
    margin-block: var(--space-xl);
    text-align: center;
}

main .media-block a:hover {
    background: none;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 10. lists ──────────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

main dl {
    max-width: 100%;
    font-size: var(--fs-body);
}

main dt {
    position: relative;
    width: auto;
    margin-block: var(--flow-dt-before) var(--flow-dt-after);
    margin-inline: 0;
    padding-bottom: var(--space-xxs);
    border-bottom: none;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: var(--lh-meta);
}

main dt::after {
    content: "";
    display: block;
    width: 8rem;
    height: var(--line-thickness);
    margin-top: var(--line-thickness);
    background-color: var(--c-border);
}

main dd {
    max-width: 100%;
    margin-block: var(--flow-dd-before) var(--flow-dd-after);
    margin-inline: 0 0 0 var(--space-xxl);
    line-height: var(--lh-body);
}

main dd p {
    margin: 0;
}

main dd p + p {
    margin-top: var(--flow-content);
}

main ul,
main ol {
    max-width: 100%;
    padding: 0;
    font-size: var(--fs-body);
}

main li {
    max-width: 100%;
    line-height: var(--lh-list);
}

main ul > li,
main ol > li {
    position: relative;
    padding-left: 1.5em;
    list-style: none;
    text-indent: 0 !important;
}

main ul > li::before {
    content: "";
    position: absolute;
    top: .9em;
    left: .25em;
    width: .6em;
    height: .6em;
    background-color: var(--c-text);
    transform: translateY(-50%) rotate(45deg);
}

main ul > li:hover::before {
    background-color: var(--c-current);
}

main ol {
    counter-reset: item;
}

main ol > li::before {
    content: counter(item) ".";
    position: absolute;
    top: 0;
    left: .15em;
    width: 1.35em;
    color: var(--c-text);
    font-family: var(--ff-sans);
    font-weight: 700;
    line-height: var(--lh-list);
    text-align: left;
    counter-increment: item;
}

main ol > li:hover::before {
    color: var(--c-current);
}

/* news list */

main ul.news-list li {
    margin: var(--space-l) 0;
}

main .record-body {
    display: block;
    max-width: 100%;
    text-indent: 0 !important;
}

main ul.news-list li .record-body {
    display: block;
    max-width: 100%;
    margin-top: var(--record-box-margin-top);
    margin-right: var(--record-box-margin-right);
    padding:
        var(--record-box-padding-block)
        var(--record-box-padding-inline);
    border: 1px solid var(--record-box-border-color);
    border-radius: var(--record-box-radius);
    text-indent: 0 !important;
    font-size: var(--fs-body-s);
    line-height: var(--lh-meta);
}

main ul.news-list li .record-body::before {
    content: none;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 11. local navigation ───────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*
    h1 直下の page-local nav

    - h1 の直後に置く局所ナビゲーション
    - 見た目は帯状コンポーネントとして統一
    - news / publications などのページ内切替に使う
*/

main nav.news-filter,
main nav.pubnav {
    margin: var(--local-nav-margin-block) 0 0;
    padding: var(--local-nav-padding);
    background-color: var(--c-inpage-nav-bg);
    border: none;
    border-radius: var(--border-radius);
}

main nav.news-filter ul.news-filter-list,
main nav.pubnav ul.pubnav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--ff-sans);
    font-size: var(--fs-ui);
    font-weight: 700;
    line-height: var(--lh-ui);
}

main nav.news-filter ul.news-filter-list {
    gap: var(--nav-gap-row) var(--nav-gap-col);
}

main nav.pubnav ul.pubnav-list {
    gap: var(--nav-gap-row) var(--pubnav-gap-col-default);
}

main nav.pubnav ul.pubnav-list:has(> li:nth-child(2):last-child) {
    column-gap: var(--pubnav-gap-col-2);
}

main nav.pubnav ul.pubnav-list:has(> li:nth-child(3):last-child) {
    column-gap: var(--pubnav-gap-col-3);
}

main nav.news-filter ul.news-filter-list > li,
main nav.pubnav ul.pubnav-list > li {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
    text-indent: 0 !important;
}

main nav.news-filter ul.news-filter-list > li::before,
main nav.pubnav ul.pubnav-list > li::before {
    content: none;
    display: none;
}

main nav.news-filter ul.news-filter-list > li > a,
main nav.pubnav ul.pubnav-list > li > a {
    display: inline-block;
    padding: .1rem 0;
    color: var(--c-header-link);
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--ff-sans);
    font-size: var(--fs-ui);
    font-weight: 700;
    line-height: var(--lh-ui);
    text-decoration: none;
    white-space: nowrap;
}

main nav.news-filter ul.news-filter-list > li > a:hover,
main nav.news-filter ul.news-filter-list > li > a:focus-visible,
main nav.pubnav ul.pubnav-list > li > a:hover,
main nav.pubnav ul.pubnav-list > li > a:focus-visible {
    outline: none;
    color: var(--c-hover);
    background: none;
    border: none;
    text-decoration: none;
}

main nav.news-filter ul.news-filter-list > li > a[aria-current="page"] {
    color: var(--c-current);
    background: none;
    font-weight: 900;
    text-decoration: none;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 12. media / inline ─────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

main img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    padding: 0;
    vertical-align: bottom;
}

main h1 img {
    margin: 0;
}

main img.portrait {
    max-width: 40%;
}

main img.avatar {
    max-width: 60%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

main img.fdc-logo {
    display: inline-block;
    width: 30%;
    max-width: 150px;
    height: auto;
    margin: 0 clamp(.5ch, 1ch, 2ch) 0 0;
}

main pre {
    white-space: pre-wrap;
    word-break: break-all;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: var(--lh-tight);
}

main span.block-strong {
    display: block;
    margin: 1em 0;
    color: var(--c-accent);
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: var(--lh-body);
    text-align: center;
}

main strong {
    color: var(--c-accent);
    font-family: var(--ff-sans);
    font-weight: 700;
}

main em {
    color: var(--c-accent);
    background-color: transparent;
    font-style: normal;
    font-weight: 700;
}

main em.representative {
    color: var(--c-text);
    background: linear-gradient(to bottom, transparent 0%, transparent 10%, var(--c-hl) 10%, var(--c-hl) 100%);
    font-family: var(--ff-sans);
    font-style: normal;
    font-weight: 700;
}

main em.author,
main em.title {
    color: var(--c-text);
    background-color: transparent;
    font-style: normal;
    font-weight: 700;
}

main span.author-self {
    color: var(--c-text);
    background-color: transparent;
    font-style: normal;
    font-weight: 900;
}

main em.journal,
main em.publisher,
main em.award {
    color: var(--c-text);
    background-color: transparent;
    font-style: italic;
    font-weight: 500;
}

main em.vol {
    color: var(--c-text);
    background-color: transparent;
    font-style: normal;
    font-weight: 900;
}

/* inline meta note */
main .meta-note {
    display: inline-block;
    color: var(--c-text);
    background-color: transparent;
    font-family: var(--ff-sans);
    font-size: var(--fs-body-s);
    font-weight: 500;
    line-height: var(--lh-meta);
    text-indent: 0 !important;
}

main .meta-note .meta-label {
    color: var(--c-text);
    background-color: transparent;
    font-weight: 700;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 13. footer ─────────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs);
    width: 100%;
    margin: 0;
    padding: 0 .75rem 1em;
    color: var(--c-text);
    background-color: transparent;
    font-feature-settings: normal;
    font-weight: 500;
    font-size: .7rem; /* 個別指定 */
    line-height: var(--lh-tight);
    text-align: center;
}

footer .footer-validator {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    writing-mode: horizontal-tb;
}

footer .footer-validator a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    color: var(--c-text);
    background-color: transparent;
    font-size: 1.15rem; /* 個別指定 */
    line-height: var(--lh-solid);
    text-align: center;
    transform: scale(1);
    transform-origin: center;
    transition: color .2s ease, transform .25s ease;
}

footer .footer-validator a:hover {
    color: var(--c-hover);
    background-color: transparent;
    transform: scale(var(--hover-scale-ui));
}

footer .footer-rotor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex: 0 1 auto;
    min-width: 0;
}

footer .footer-line {
    display: block;
    white-space: nowrap;
}

#lab-wordmark {
    display: none;
}

#page-number {
    display: none;
}

#lab-character {
    display: none;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 14. page-specific styles ───────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* --- page: publications --- */
/*
    publications は高密度表示用の圧縮モード

    - 本文より一段小さく
    - 行間は確保（meta）
    - 共通設計からの派生として設計
*/

main article#publications dt {
    font-size: var(--pub-dt-fs);
}

main article#publications dd {
    max-width: 100%;
    margin-block: var(--pub-dd-margin-block);
    margin-inline: 0;
    font-size: var(--pub-fs-item);
    line-height: var(--pub-lh-item);
}

main article#publications ul:not(.pubnav-list) {
    max-width: calc(100% - var(--pub-list-indent));
    margin:
        var(--pub-list-margin-top)
        0
        var(--pub-list-margin-bottom)
        var(--pub-list-indent);
    font-size: var(--pub-fs-item);
}

main article#publications ul:not(.pubnav-list) li {
    max-width: 100%;
    font-size: var(--pub-fs-item);
    line-height: var(--pub-lh-item);
    text-indent: calc(-1 * var(--pub-item-hanging-indent));
}

main article#publications ul:not(.pubnav-list) > li::before {
    margin:
        0
        var(--pub-marker-margin-inline-end)
        0
        var(--pub-marker-margin-inline-start);
    font-size: var(--pub-fs-item);
}

/* --- page: publications > press --- */
/*
    press は独自フォーマットで、個別装飾が多い
*/

main article#press h2 {
    position: relative;
    margin: var(--space-xxxl) 0 0;
    padding-top: var(--space-xxxl);
    font-size: 1.3rem; /* 個別指定 */
    line-height: var(--lh-body);
}

main article#press h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--h1-band-height) / 3);

    background-image: repeating-linear-gradient(
        to right,
        var(--c-text),
        var(--c-text) var(--stripe-band-thickness),
        transparent var(--stripe-band-thickness),
        transparent calc(4 * var(--stripe-band-thickness))
    );
}

main article#press h2 time {
    display: inline-block;
    margin: 0 .5em 0 0;
    padding: .3rem .6rem;
    color: var(--c-main-bg);
    background-color: var(--c-key);
    font-size: 1.1rem; /* 個別指定 */
    line-height: var(--lh-solid);
}

/* --- page: members --- */
/*
    members は個別装飾を抑え、共通フォーマット寄りに整理
*/

main article#members dl {
    margin: 0 0 var(--space-xxl);
}

main article#members dt {
    margin: var(--space-m) 0 0;
    padding: 0 0 .35rem;
    color: var(--c-text);
    font-family: var(--ff-sans);
    font-size: var(--fs-body-s);
    font-weight: 500;
    line-height: var(--lh-meta);
    white-space: normal;
    word-break: normal;
}

main article#members dt::after {
    content: none;
}

main article#members dt span.affix {
    display: inline-block;
}

main article#members dd {
    margin: 0;
    padding: 0;
    font-size: var(--fs-body-l);
    line-height: var(--lh-heading);
}

main article#members dd:last-child {
    margin-bottom: 0;
}

main article#members dd a {
    font-weight: 700;
}

main article#members dt + dd {
    margin-top: var(--members-gap-term-to-item);
}

main article#members dd + dt {
    margin-top: var(--members-gap-group);
}

main article#members dd + dd {
    margin-top: var(--members-gap-item);
}

/* member card (linked / unlinked unified) */
/*
    member card の装飾は多いので、ここでまとめて設定
*/

main article#members dd.has-face .member-card {
    display: inline-flex;
    align-items: center;
    gap: var(--members-gap-item);
    color: inherit;
    background: none;
    text-decoration: none;
}

main article#members dd.has-face a.member-card {
    color: var(--c-link);
}

main article#members dd.has-face span.member-card {
    color: var(--c-text);
}

main article#members dd.has-face .member-card .member-name {
    display: inline-block;
    line-height: var(--lh-heading);
}

main article#members dd.has-face a.member-card .member-name {
    text-decoration: var(--underline-link);
    text-underline-position: var(--underline-position);
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
}

main article#members dd.has-face a.member-card:hover,
main article#members dd.has-face a.member-card:focus-visible {
    color: var(--c-link);
    background: none;
    text-decoration: none;
}

main article#members dd.has-face a.member-card:hover .member-name,
main article#members dd.has-face a.member-card:focus-visible .member-name {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 15%,
        var(--c-hover) 15%,
        var(--c-hover) 100%
    );
}

main article#members img.member-face {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    max-width: none;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* temporary placeholder face */
main article#members img.member-face.is-placeholder {
    opacity: .5;
}

/* --- page: news > history --- */
/*
    history のページも独自フォーマット
*/

main article#history dl {
    position: relative;
    margin: var(--space-xxxl) 0;
    padding-left: 2rem;
}

main article#history dl::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 1rem;
    width: var(--line-thickness);
    background-color: var(--c-border);
}

main article#history p#intro + dl {
    --history-divider-gap-after: var(--space-xxxl);
    margin-top: calc(
        var(--flow-h2-before)
        + var(--stripe-divider-height)
        + var(--history-divider-gap-after)
    );
}

main article#history p#intro + dl::after {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--stripe-divider-height) + var(--history-divider-gap-after)));
    left: 0;
    width: 100%;
    height: var(--stripe-divider-height);

    background-image: repeating-linear-gradient(
        to right,
        var(--c-text) 0,
        var(--c-text) var(--stripe-band-thickness),
        transparent var(--stripe-band-thickness),
        transparent calc(4 * var(--stripe-band-thickness))
    );
}

main article#history dt {
    margin: var(--space-xxl) 0 var(--space-m) .5rem; /* 個別指定 */
    padding: 0;
    font-size: var(--fs-body-l);
    font-weight: 700;
    line-height: var(--lh-heading);
}

main article#history dt::before {
    content: "";
    position: absolute;
    top: .3rem;
    left: calc(-2rem - 1px);
    width: 1rem;
    height: 1rem;
    background-color: var(--c-main-bg);
    border: var(--line-thickness) solid var(--c-border);
    border-radius: 50%;
}

main article#history dt::after {
    content: none;
}

main article#history dt:hover::before {
    background-color: var(--c-current);
}

main article#history dt time {
    display: inline-block;
    color: var(--c-accent);
    background-color: transparent;
    font-family: var(--ff-sans);
    font-weight: 900;
    letter-spacing: .02em;
}

main article#history dd {
    max-width: 100%;
    margin: var(--space-m) 0 var(--space-xxl) var(--space-s);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

main article#history dd:last-child {
    margin-bottom: 0;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 15. utilities ──────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.hl {
    color: var(--c-text);
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--c-hl) 50%, var(--c-hl) 100%);
}

.tac {
    text-align: center;
    text-indent: 0 !important;
}

.ni {
    text-indent: 0 !important;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 16. pc ─────────────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/*
    PC overrides and fluid application

    - Applies the shared fluid tokens to actual PC layout/styles
    - Most routine tuning is done through the token block above
*/

@media (min-width: 800px) {
    html#entrance.ready header,
    html#entrance.ready main {
        will-change: transform, opacity;
    }

    html {
        scroll-behavior: smooth;
        font-size: var(--html-ja-font-size);
        background-image:
            linear-gradient(
                to right,
                var(--c-left-col-bg) 0,
                var(--c-left-col-bg) var(--centerline),
                var(--c-right-col-bg) var(--centerline),
                var(--c-right-col-bg) 100%
            );
        background-repeat: no-repeat;
        background-attachment: fixed;
        animation-name: none;
    }

    html:lang(en) {
        font-size: var(--html-en-font-size);
    }

    html.has-initial-hash {
        scroll-behavior: auto;
    }

    html.has-initial-hash header,
    html.has-initial-hash main {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
    }

    body {
        display: flex;
        overflow: hidden;
        background-color: transparent;
        animation-name: none;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: var(--pc-bg-center-left);
        width: var(--pc-bg-center-width);
        background-color: var(--c-nav-bg);
        pointer-events: none;
        z-index: 0;
    }

    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: calc(var(--pc-bg-center-left) - 1px);
        width: calc(var(--pc-bg-center-width) + 1px);
        height: var(--pc-bg-center-width);

        background-color: var(--c-cut-accent);
        /* 右上→右下→左上の三角 */
        clip-path: polygon(0 0, 100% 0, 0 100%);

        pointer-events: none;
        z-index: 0;
    }

    html::before {
        content: "";
        position: fixed;
        top: 0;
        left: calc(var(--pc-gutter) + var(--scw));
        width: var(--lcw);
        height: var(--pc-bg-center-width);

        background-color: var(--c-cut-accent);
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            0 0
        );

        pointer-events: none;
        z-index: 10;
    }

    /* NOTE:
    header に transform をかけているため、
    内部の position: fixed は viewport基準にならない */

    header {
        flex: 0 0 var(--lcw);
        min-width: 0;
        overflow: hidden;
        margin:
            0
            calc(var(--ccw) / 2)
            0
            calc(var(--pc-gutter) + var(--scw));
        padding:
            var(--pc-header-padding-top)
            var(--pc-header-padding-right)
            var(--pc-header-padding-bottom)
            var(--pc-header-padding-left);
        text-align: left;
        perspective-origin: right;
        transform: scale(1, 1) perspective(var(--perspective-page)) rotateY(var(--page-default-angle));
        transform-origin: right 50vh 0;
    }

    header {
        position: relative;
        overflow: hidden; /* はみ出し防止 */
    }

    html#entrance header {
        opacity: 0;
        transform: scale(0, 1) perspective(var(--perspective-page)) rotateY(var(--page-flip-start-angle));
        animation: none;
    }

    html#entrance.ready header {
        animation: page_flip 1.5s 0s 1 forwards;
    }

    header nav {
        margin: 0;
        padding: 0;
        text-align: left;
        transform: scale(.8, 1) skewY(var(--nav-skew-angle));
        transform-origin: right top;
    }

    header nav a {
        transform: translateX(0);
        transition: color .2s ease, transform .2s ease;
    }

    header nav a:hover {
        transform: translateX(.12rem);
    }

    header nav div#labname a,
    header nav div#labname span#current {
        display: inline-block;
        font-size: var(--fs-labname-ja);
        line-height: var(--lh-nav);
    }

    header:lang(en) nav div#labname a,
    header:lang(en) nav div#labname span#current {
        font-size: var(--fs-labname-en);
    }

    header nav div#labname span#area {
        display: inline-block;
        margin-top: var(--space-xxs);
        font-size: var(--fs-labname-area-ja);
        line-height: var(--lh-nav);
    }

    header:lang(en) nav div#labname span#area {
        font-size: var(--fs-labname-area-en);
    }

    header nav div#labname a {
        transform: translateX(0);
        transition: color .2s ease, transform .2s ease;
    }

    header nav div#labname a:hover {
        color: var(--c-hover);
        transform: translateX(-.12rem);
    }

    /* --- nav divider stripe (stable version) --- */

    header nav ul.nav-toc-list {
        position: relative;
    }

    header nav ul.nav-toc-list::before {
        content: "";
        position: absolute;

        top: calc(-.45 * var(--nav-labname-gap) - .5 * var(--nav-divider-height));
        left: 0;

        width: 100%;
        height: var(--nav-divider-height);

        background-image: radial-gradient(
            circle,
            var(--c-left-col-bg) calc(.5 * var(--nav-divider-height) - .5px),
            transparent calc(.5 * var(--nav-divider-height))
        );

        background-size:
            var(--nav-divider-unit)
            var(--nav-divider-height);

        background-repeat: space;
        background-position: center;

        pointer-events: none;
    }

    header nav li.nav-item {
        margin: 0;
        padding: 0;
    }

    header nav li.nav-parent > .nav-link,
    header nav li.nav-parent > #current.nav-link,
    header nav li.nav-child > .nav-link,
    header nav li.nav-child > #current.nav-link {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: baseline;
        column-gap: var(--toc-column-gap);
        width: 100%;
    }

    header nav li.nav-parent > .nav-link,
    header nav li.nav-parent > #current.nav-link {
        font-size: var(--fs-toc-parent);
        line-height: var(--lh-toc-parent);
    }

    header nav li.nav-child > .nav-link,
    header nav li.nav-child > #current.nav-link {
        font-size: var(--fs-toc-child);
        line-height: var(--lh-toc-child);
    }

    header nav li.nav-parent + li.nav-parent {
        margin-top: 0;
    }

    header nav li.nav-child + li.nav-child {
        margin-top: var(--toc-child-gap);
    }

    header nav .nav-label {
        min-width: 0;
        color: inherit;
    }

    header nav .nav-leader {
        display: block;
        min-width: 0;
        height: 1px;
        align-self: center;
        border-bottom: var(--toc-leader-thickness) dotted currentColor;
        color: var(--c-left-col-bg);
        transform: translateY(var(--toc-leader-offset));
    }

    header div#lab-wordmark {
        display: block;
        margin-top: calc(.55 * var(--nav-wordmark-gap) - .5 * var(--nav-divider-height));
        text-align: right;
    }

    header div#lab-wordmark .nav-divider {
        width: 100%;
        height: var(--nav-divider-height);
        margin:
            0
            0
            calc(.55 * var(--nav-wordmark-gap) - .5 * var(--nav-divider-height));

        background-image: radial-gradient(
            circle,
            var(--c-left-col-bg) calc(.5 * var(--nav-divider-height) - .5px),
            transparent calc(.5 * var(--nav-divider-height))
        );
        background-size:
            var(--nav-divider-unit)
            var(--nav-divider-height);
        background-repeat: space;
        background-position: center;

        pointer-events: none;
    }

    header div#lab-wordmark img {
        display: block;
        width: 70%;
        height: auto;
        margin-left: auto;
        opacity: 1;
        transform: translateY(calc(-.5 * var(--nav-divider-height)));
    }

    header nav .nav-page {
        display: block;
        width: var(--toc-page-width);
        font-size: .85rem;
        font-weight: 700;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    header nav span#current.nav-link {
        color: var(--c-current);
    }

    div[id^="nav"] {
        z-index: 30;
        display: block;
        width: var(--pc-nav-icon-size);
        margin: var(--pc-nav-block-margin) 0;
        padding: 0;
        writing-mode: horizontal-tb;
        font-feature-settings: normal;
        letter-spacing: 0;
        word-spacing: 0;
    }

    div[id^="nav"] a {
        display: block;
        width: var(--pc-nav-icon-size);
        height: var(--pc-nav-icon-size);
        margin: var(--pc-nav-icon-margin) 0;
        padding: 0;
        color: var(--c-text);
        background-color: transparent;
        font-size: var(--pc-nav-icon-size);
        line-height: var(--lh-nav);
        text-align: center;
        transform: scale(1);
        transform-origin: center;
        transition: color .2s ease, transform .25s ease;
    }

    div[id^="nav"] a:hover,
    div#nav-font-scale-control button:hover,
    div#language a:hover,
    footer .footer-validator a:hover {
        color: var(--c-hover);
        background-color: transparent;
    }

    div#nav-site a:hover,
    div#nav-browser a:hover,
    div#nav-paging a:hover,
    div#nav-font-scale-control button:hover,
    footer .footer-validator a:hover {
        transform: none;
    }

    div#language a:hover {
        transform: translateY(-50%) rotate(180deg);
    }

    div#language a:lang(en):hover {
        transform: translateY(-50%);
    }

    div#nav-site {
        position: fixed;
        top: 0;
        left: calc(var(--rail-offset) - (.5 * var(--pc-nav-icon-size)));
    }

    div#nav-browser {
        position: fixed;
        top: 0;
        right: calc(var(--rail-offset) - (.5 * var(--pc-nav-icon-size)));
    }

    div#nav-font-scale-control {
        z-index: 30;
        display: block;
        width: var(--pc-nav-font-scale-control-size);
        margin: var(--pc-nav-font-scale-control-block-margin) 0;
        padding: 0;
        position: fixed;
        bottom: 0;
        left: calc(var(--rail-offset) - (.5 * var(--pc-nav-font-scale-control-size)));
        writing-mode: horizontal-tb;
        font-feature-settings: normal;
        letter-spacing: 0;
        word-spacing: 0;
    }

    div#nav-font-scale-control button {
        appearance: none;
        -webkit-appearance: none;

        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--pc-nav-font-scale-control-size);
        height: var(--pc-nav-font-scale-control-size);
        margin: var(--pc-nav-font-scale-control-margin) 0;
        padding: 0;

        color: var(--c-text);
        background-color: transparent;

        font-family: var(--ff-sans);
        font-size: var(--pc-nav-font-scale-control-glyph-m-size);
        font-weight: 700;
        line-height: var(--lh-solid);
        text-align: center;
        text-decoration: none;
        white-space: nowrap;

        border: 1px solid currentColor;
        border-radius: var(--pc-nav-font-scale-control-radius);
        box-shadow: none;

        transform: scale(1);
        transform-origin: center;
        transition: color .2s ease, transform .25s ease, border-color .2s ease, background-color .2s ease;

        cursor: pointer;
    }

    div#nav-font-scale-control button:hover {
        color: var(--c-hover);
        background-color: transparent;
        transform: none;
    }

    div#nav-font-scale-control button.is-current {
        color: var(--c-current);
    }

    div#nav-font-scale-control button > span {
        display: block;
        line-height: 1;
        transform: translateY(0);
    }

    div#nav-font-scale-control button.is-small > span {
        font-size: var(--pc-nav-font-scale-control-glyph-s-size);
    }

    div#nav-font-scale-control button.is-medium > span {
        font-size: var(--pc-nav-font-scale-control-glyph-m-size);
    }

    div#nav-font-scale-control button.is-large > span {
        font-size: var(--pc-nav-font-scale-control-glyph-l-size);
    }

    div#nav-paging {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--pc-nav-paging-icon-gap);
        width: auto;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: calc(var(--centerline) - (.5 * var(--pc-nav-paging-icon-size)));
        color: var(--c-text);
        background-color: transparent;
        writing-mode: horizontal-tb;
    }

    div#nav-paging a {
        width: var(--pc-nav-paging-icon-size);
        height: var(--pc-nav-paging-icon-size);
        margin: 0;
        font-size: var(--pc-nav-paging-icon-size);
        line-height: var(--lh-nav);
        transform: scale(1);
        transform-origin: center;
        transition: color .2s ease, transform .25s ease;
    }

    div#nav-paging a:hover {
        color: var(--c-hover);
        background-color: transparent;
        transform: none;
    }

    div#nav-paging a#goto-content {
        display: none;
    }

    div#language a {
        z-index: 30;
        display: inline-block;
        position: fixed;
        top: 50%;
        right: auto;
        bottom: auto;
        left: calc(var(--rail-offset) - (.55 * var(--pc-nav-lang-size)));
        padding: 0;
        color: var(--c-text);
        background-color: transparent;
        font-size: var(--pc-nav-lang-size);
        font-weight: 900;
        line-height: var(--lh-solid);
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: translateY(-50%) rotate(180deg) scale(1);
        transform-origin: center;
        transition: color .2s ease, transform .25s ease;
    }

    div#language a:lang(en) {
        left: calc(var(--rail-offset) - (.5 * var(--pc-nav-lang-size)));
        transform: translateY(-50%) scale(1);
    }

    div#language a:hover {
        transform: translateY(-50%) rotate(180deg);
    }

    div#language a:lang(en):hover {
        transform: translateY(-50%);
    }

    div#language .lang-switch-long {
        display: inline;
    }

    div#language .lang-switch-short {
        display: none;
    }

    div[id^="nav"] a,
    div#nav-font-scale-control button,
    footer .footer-validator a {
        position: relative;
    }

    div[id^="nav"] a::after,
    div#nav-font-scale-control button::after,
    div#language a::after,
    footer .footer-validator a::after {
        content: attr(data-tooltip);
        z-index: 30;
        position: absolute;
        top: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: max-content;
        padding: var(--pc-tooltip-padding-block) var(--pc-tooltip-padding-inline);
        border-radius: 9999px;
        color: var(--tooltip-text);
        box-shadow: var(--tooltip-shadow);
        font-family: var(--ff-sans);
        font-size: var(--pc-tooltip-font-size);
        font-weight: 700;
        line-height: var(--lh-solid);
        letter-spacing: .02em;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        transform: none;
        will-change: opacity;
        transition: opacity .18s ease;
    }

    div#nav-site a::after,
    div#nav-font-scale-control button::after,
    div#language a::after {
        background-color: var(--tooltip-bg-left);
    }

    div#nav-browser a::after,
    footer .footer-validator a::after {
        color: var(--c-hover);
        background-color: var(--tooltip-bg-right);
    }

    div#nav-paging a::after {
        background-color: var(--tooltip-bg-center);
    }

    div#nav-site a::after,
    div#nav-font-scale-control button::after {
        left: calc(100% + var(--tooltip-gap));
        transform: translateY(-50%);
    }

    div#nav-browser a::after,
    footer .footer-validator a::after {
        right: calc(100% + var(--tooltip-gap));
        transform: translateY(-50%);
    }

    div[id^="nav"] a::after,
    div#nav-font-scale-control button::after,
    div#language a::after,
    footer .footer-validator a::after {
        transition: opacity .18s ease;
    }

    div[id^="nav"] a:hover::after,
    div#nav-font-scale-control button:hover::after,
    div#language a:hover::after,
    footer .footer-validator a:hover::after {
        transition-delay: .08s;
    }

    /* --- nav-paging tooltip directions (PC only) --- */

    div#nav-paging a::after {
        top: 50%;
        right: auto;
        bottom: auto;
        left: auto;
    }

    /* ↑ ページ上へ */
    div#nav-paging a[href="#top"]::after {
        top: auto;
        bottom: calc(100% + var(--tooltip-gap));
        left: 50%;
        transform: translateX(-50%);
    }

    /* ← 前のページ */
    div#nav-paging a:has(.icon[data-icon="prev"])::after {
        top: 50%;
        right: calc(100% + var(--tooltip-gap));
        transform: translateY(-50%);
    }

    /* → 次のページ */
    div#nav-paging a:has(.icon[data-icon="next"])::after {
        top: 50%;
        left: calc(100% + var(--tooltip-gap));
        transform: translateY(-50%);
    }

    /* ↓ ページ下へ */
    div#nav-paging a[href="#end"]::after {
        top: calc(100% + var(--tooltip-gap));
        left: 50%;
        transform: translateX(-50%);
    }

    div[id^="nav"] a:is(:hover, :focus-visible)::after,
    div#nav-font-scale-control button:is(:hover, :focus-visible)::after,
    div#language a:is(:hover, :focus-visible)::after,
    footer .footer-validator a:is(:hover, :focus-visible)::after {
        opacity: 1;
    }

    div#language a::after {
        top: 50%;
        right: calc(100% + var(--tooltip-gap));
        bottom: auto;
        left: auto;
        transform: translateY(-50%) rotate(-180deg);
        transform-origin: center;
    }

    div#language a:lang(en)::after {
        top: 50%;
        right: auto;
        bottom: auto;
        left: calc(100% + var(--tooltip-gap));
        transform: translateY(-50%);
        transform-origin: center;
    }

    main {
        flex: 0 0 var(--rcw);
        min-width: 0;
        overflow: hidden;
        margin: 0 calc(var(--pc-gutter) + var(--scw)) 0 calc(var(--ccw) / 2);
        padding:
            var(--pc-main-padding-top)
            var(--pc-main-padding-right)
            var(--pc-main-padding-bottom)
            var(--pc-main-padding-left);
        color: var(--c-text);
        background-color: var(--c-main-bg);
        opacity: 0;
        perspective-origin: left;
        transform:
            scale(var(--page-turn-soft-scale), 1)
            perspective(var(--perspective-page))
            rotateY(var(--page-turn-soft-angle));
        transform-origin: left 50vh 0;
        animation: page_turn_soft var(--page-turn-soft-duration) 0s 1 forwards;
    }

    html#entrance main {
        animation: none;
        opacity: 0;
        transform: scale(0, 1) perspective(var(--perspective-page)) rotateY(var(--page-turn-start-angle));
    }

    html#entrance.ready main {
        animation: page_turn var(--page-turn-duration) 0s 1 forwards;
    }

    main h1#logo {
        margin-top: var(--space-xxxl);
    }

    main h1#logo picture img {
        width: 100%;
        max-width: 540px;
    }

    main div#content {
        display: none;
    }

    main nav a {
        transform: translateY(0);
        transition: transform .25s ease;
    }

    main nav a:hover {
        transform: translateY(var(--hover-shift-main-nav-y));
    }

    main a:hover img {
        filter:
            drop-shadow(var(--line-thickness) 0 0 var(--c-hover))
            drop-shadow(calc(-1 * var(--line-thickness)) 0 0 var(--c-hover))
            drop-shadow(0 var(--line-thickness) 0 var(--c-hover))
            drop-shadow(0 calc(-1 * var(--line-thickness)) 0 var(--c-hover));
    }

    main div#preface {
        margin:
            var(--preface-margin-block)
            var(--pc-main-preface-margin-inline)
            0;
    }

    main div#preface div div {
        padding-block: var(--pc-main-preface-padding-block);
        padding-inline: var(--pc-main-preface-padding-inline);
    }

    main div#preface p {
        margin: 0;
        font-size: 1.05rem; /* 個別指定 */
    }

    main div#preface p:first-child::first-letter {
        float: left;
        margin: 0 .8rem 0 0;
        padding: 0;
        font-size: 5.5rem; /* 個別指定 */
        line-height: var(--lh-solid);
        vertical-align: top;
    }

    main:lang(en) div#preface p:first-child::first-letter {
        margin-right: var(--space-m);
    }

    main div#preface p#signature {
        margin-top: var(--space-xxl);
    }

    main div#preface p#printname {
        margin-bottom: 0;
    }

    main .media-block {
        float: right;
        margin:
            0
            0
            var(--space-xxs)
            var(--space-m);
        text-align: right;
    }

    main img.fdc-logo {
        display: block;
        width: 150px;
        max-width: none;
        margin: 0;
    }

    main article#members dd {
        margin-left: var(--space-xl);
    }

    main p.update {
        margin-bottom: var(--space-m); /* PCでは下端だから、下マージンとして--space-mを確保 */
    }

    main ul,
    main ol {
        margin-inline: 1em;
    }

    html:lang(en) main ul,
    html:lang(en) main ol {
        margin-inline: 1.5em;
    }

    main article#history dd {
        margin: var(--space-xl) var(--space-xl) var(--space-xxxl);
    }

    footer {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: var(--pc-footer-validator-gap);
        position: fixed;
        right: var(--rail-offset);
        bottom: var(--pc-footer-bottom);
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        font-feature-settings: normal;
        font-size: var(--pc-footer-font-size);
        line-height: var(--lh-nav);
        text-align: right;
        transform: translateX(50%);
    }

    footer .footer-validator {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--pc-validator-icon-margin);
        writing-mode: horizontal-tb;
    }

    footer .footer-validator a {
        width: var(--pc-validator-icon-size);
        height: var(--pc-validator-icon-size);
        font-size: var(--pc-validator-icon-size);
    }

    footer .footer-rotor {
        display: inline-block;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

    footer .footer-line {
        display: block;
    }

    #page-number {
        --pos-scale-pn-min: .5; /* pn: page number */
        --pos-scale-pn-max: 1;
        --pos-scale-pn:
            calc(
                var(--pos-scale-pn-min)
                + (var(--pos-scale-pn-max) - var(--pos-scale-pn-min))
                * var(--pc-fluid-progress)
            );
        z-index: 10;
        display: block;
        position: fixed;
        top: calc(.22 * var(--scw-ui));
        right: calc(var(--rail-offset) + var(--pos-scale-pn) * 1.6em);

        width: 2.5em;
        height: 2.5em;

        color: var(--c-right-col-bg);
        background-color: transparent;
        font-family: var(--ff-serif);
        font-size: var(--pc-page-number-size);
        font-weight: 900;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        pointer-events: none;
        font-variant-numeric: tabular-nums;
    }

    #page-number .page-number-current,
    #page-number .page-number-separator,
    #page-number .page-number-total {
        position: absolute;
        display: block;
        line-height: 1;
    }

    /* 分子：大きく＋少し中央寄り */
    #page-number .page-number-current {
        --fsc-scale-min: .8; /* fsc: font size (current) */
        --fsc-scale-max: 1;
        --fsc-scale:
            calc(
                var(--fsc-scale-min)
                + (var(--fsc-scale-max) - var(--fsc-scale-min))
                * var(--pc-fluid-progress)
            );
        top: 0;
        right: 1.3em;
        font-size: calc(var(--fsc-scale) * 1.2em);
        text-align: right;
    }

    /* 分母：小さく＋やや外側 */
    #page-number .page-number-total {
        --fst-scale-min: .9; /* fst: font size (total) */
        --fst-scale-max: 1;
        --fst-scale:
            calc(
                var(--fst-scale-min)
                + (var(--fst-scale-max) - var(--fst-scale-min))
                * var(--pc-fluid-progress)
            );
        bottom: .2em;
        left: 1.5em;
        font-size: calc(var(--fst-scale) * .8em);
        text-align: left;
    }

    /* 斜線 */
    #page-number .page-number-separator {
        inset: 0;
    }

    #page-number .page-number-separator::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70%;
        height: calc(var(--line-thickness) * 0.8);
        background-color: currentColor;
        transform: translate(-50%, -50%) rotate(-45deg);
        transform-origin: center;
    }

    #lab-character {
        --pos-scale-lc-min: .55; /* lc: lab character */
        --pos-scale-lc-max: 1.1;
        --pos-scale-lc:
            calc(
                var(--pos-scale-lc-min)
                + (var(--pos-scale-lc-max) - var(--pos-scale-lc-min))
                * var(--pc-fluid-progress)
            );
        z-index: 10;
        display: block;
        position: fixed;
        right: calc(var(--rail-offset) + var(--pos-scale-lc) * 1.6em);
        bottom: calc(.2 * var(--scw-ui));

        width: 2.5em;
        height: 2.5em;

        pointer-events: none;
    }

    #lab-character .lab-character-inner {
        display: block;
        width: 100%;
        height: 100%;
    }

    #lab-character img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        transform-origin: 50% 50%;
        will-change: transform;
    }

    #lab-character.is-flipped img {
        transform: scaleX(-1);
    }

    #lab-character.is-flipping img {
        animation: character-flip-to-right .3s ease forwards;
    }

    #lab-character.is-unflipping img {
        animation: character-flip-to-left .3s ease forwards;
    }
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 17. reduced motion ─────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    header,
    main,
    div[id^="nav"],
    div#language,
    footer {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
    }

    #lab-character img {
        animation: none !important;
        will-change: auto !important;
    }

    a,
    button,
    [role="button"] {
        transition: none !important;
    }

    header nav a:hover,
    header nav a:focus-visible,
    main nav a:hover,
    main nav a:focus-visible,
    div[id^="nav"] a:hover,
    div[id^="nav"] a:focus-visible,
    div#nav-font-scale-control button:hover,
    div#nav-font-scale-control button:focus-visible,
    div#language a:hover,
    div#language a:focus-visible,
    footer a:hover,
    footer a:focus-visible {
        transform: none !important;
    }
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ──── 18. keyframes ──────────────────────────── */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes page_flip {
    0% {
        opacity: 0;
        transform: scale(0, 1) perspective(var(--perspective-page)) rotateY(var(--page-flip-start-angle));
    }
    100% {
        opacity: 1;
        transform: scale(1, 1) perspective(var(--perspective-page)) rotateY(var(--page-default-angle));
    }
}

@keyframes page_turn {
    0% {
        opacity: 0;
        transform: scale(0, 1) perspective(var(--perspective-page)) rotateY(var(--page-turn-start-angle));
    }
    100% {
        opacity: 1;
        transform: scale(1, 1) perspective(var(--perspective-page)) rotateY(var(--page-default-angle));
    }
}

@keyframes page_turn_soft {
    0% {
        opacity: 0;
        transform:
            scale(var(--page-turn-soft-scale), 1)
            perspective(var(--perspective-page))
            rotateY(var(--page-turn-soft-angle));
    }
    100% {
        opacity: 1;
        transform:
            scale(1, 1)
            perspective(var(--perspective-page))
            rotateY(var(--page-default-angle));
    }
}

@keyframes character-flip-to-right {
    0% {
        transform: scaleX(1);
    }
    49% {
        transform: scaleX(0.04);
    }
    50% {
        transform: scaleX(-0.04);
    }
    100% {
        transform: scaleX(-1);
    }
}

@keyframes character-flip-to-left {
    0% {
        transform: scaleX(-1);
    }
    49% {
        transform: scaleX(-0.04);
    }
    50% {
        transform: scaleX(0.04);
    }
    100% {
        transform: scaleX(1);
    }
}