@charset "utf-8";
/* = Style CSS =========================================================
 *
 *  沿革用スタイル
 *
 *      1. 基本設定
 *          1-1. 変数
 *          1-2. 外字・数字フォント
 *          1-3. ベース
 *          1-4. ユーティリティ
 *      2. ヘッダー（ロゴ）
 *      3. メインビジュアル
 *          3-1. 背景スライドショー
 *          3-2. テキスト
 *          3-3. 下部（写真キャプション＋スライド操作）
 *      4. 本文：年代ナビ＋年表
 *          4-1. レイアウト
 *          4-2. 年代ナビ
 *          4-3. 年表の縦ライン
 *          4-4. 年代見出し
 *          4-5. 年表
 *          4-6. 記念誌
 *          4-7. ボタン・リンクアイコン
 *          4-8. スクロール表示
 *      5. フッター
 *      6. PDFビューア（viewer.html）
 *      7. レスポンシブ
 *          7-1. タブレット・SP（幅991.98px以下）
 *          7-2. SP（幅820px以下）
 *          7-3. 画面の高さが低い端末
 *          7-4. 幅の狭いSP（幅440px以下）
 *          7-5. 小さいSP（幅389px以下かつ高さ740px以下）
 *          7-6. 動きを減らす設定
 *
 * ================================================================== */

/* ---------------------------------------------------------------------
 *  1. 基本設定
 * ------------------------------------------------------------------ */
/* ---- 1-1. 変数 ---- */
:root {
    /* カラー */
    --main: #e50012;
    --sub: #1d2f6f;
    --base: #f2f4f7;
    --dark: #111;
    --text: #333;
    --light: #666;
    --line: #d0d6df;
    --black: #000;
    --white: #fff;

    /* サイズ */
    --inner-w: 1160px;
    --main-pad: 3.5rem; /* 年表の本文エリアの左右余白 */
    --content-w: clamp(
        var(--inner-w),
        80vw,
        1440px
    ); /* 本文エリア全体の最大幅（大画面は画面幅の80%、最大1440px） */
    --rail-w: 290px;
    --rail-h: 0px; /* SP時にJSで上書き（固定レールの高さ） */
    --ttl-size: clamp(1.75rem, 3.5vw, 2.5rem); /* 年代見出しのタイトル */

    /* フォント（Zenフォント未収録の外字「𨥦」はNUA Gaijiで補完） */
    --f-sans:
        "Zen Kaku Gothic New", "NUA Gaiji", "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    --f-serif:
        "Zen Old Mincho", "NUA Gaiji", "Hiragino Mincho ProN", "Yu Mincho",
        "YuMincho", serif;

    /* クロスフェード時間（メインビジュアル） */
    --fade: 1.8s;

    /* ホバー用イージング（速い動き出し・ゆっくり停止） */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- 1-2. 外字・数字フォント ---- */
/* 外字「𨥦（U+28966）」のみのPlangothicサブセット（SIL OFL 1.1） */
@font-face {
    font-family: "NUA Gaiji";
    src: url("../fonts/gaiji_28966.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+28966;
}
/* 数字（0〜9）のみのCrimson Text 600サブセット（SIL OFL 1.1） */
@font-face {
    font-family: "NUA Num";
    src: url("../fonts/num_crimson-text_600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039;
}
/* ダッシュ「–」のみを横に縮めたZen Old Mincho 700サブセット（年代見出しの透かし用、SIL OFL 1.1、tools/make_dash_font.pyで生成） */
@font-face {
    font-family: "NUA Dash";
    src: url("../fonts/dash_zen-old-mincho_700.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2013;
}

/* ---- 1-3. ベース ---- */
/* 全要素のbox-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* ページ全体（remの基準16px） */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
/* ページ本文 */
body {
    margin: 0;
    font-family: var(--f-sans);
    font-size: 1rem;
    line-height: 2;
    color: var(--text);
    background: var(--white);
}
/* 画像 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* リンク */
a {
    color: inherit;
}
/* 余白リセット */
p,
h1,
h2,
h3,
h4,
figure,
ol,
ul {
    margin: 0;
    padding: 0;
}
/* リストの黒丸非表示 */
ol,
ul {
    list-style: none;
}
/* ボタンの文字（親要素を継承） */
button {
    font: inherit;
    color: inherit;
}
/* ふりがな */
ruby {
    ruby-position: over;
    ruby-align: center;
}
/* ふりがなの文字（行間維持のため小さめ） */
rt {
    font-size: 0.5em;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 400;
    font-feature-settings: "ruby" 1;
}
/* キーボード操作時のフォーカス枠 */
:focus-visible {
    outline: 2px solid var(--main);
    outline-offset: 3px;
}

/* ---- 1-4. ユーティリティ ---- */
/* スクリーンリーダー用の非表示テキスト */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* 改行させない文字列（人名・英語フレーズなど） */
.u-nowrap {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 *  3. メインビジュアル
 * ------------------------------------------------------------------ */
/* メインビジュアル（ファーストビュー）全体 */
.m-mainv {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--white);
    overflow: hidden;
    background: #1d1d1b;
    isolation: isolate;
}
/* オーバーレイ（文字の可読性確保） */
.m-mainv::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        /* テキスト周辺のみ減光（写真全体の明るさ維持） */
        radial-gradient(
            ellipse 60% 45% at 50% 50%,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.34) 0%,
            rgba(0, 0, 0, 0.18) 38%,
            rgba(0, 0, 0, 0.44) 100%
        ),
        rgba(0, 0, 0, 0.12);
}

/* ---- 3-1. 背景スライドショー ---- */
/* スライドショーの枠 */
.mainv-img {
    position: absolute;
    inset: 0;
    z-index: -2;
}
/* スライド1枚分 */
.img-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--fade) ease-in-out;
}
/* スライドの写真の枠（WebP非対応時はJPEG） */
.img-item picture {
    display: block;
    width: 100%;
    height: 100%;
}
/* スライドの写真（ゆっくりズーム） */
.img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 9s linear;
    will-change: transform;
}
/* 表示中のスライド */
.img-item.is-active {
    opacity: 1;
}
/* 表示中のスライドの写真 */
.img-item.is-active img {
    transform: scale(1);
}
/* 退場中のスライドの写真（ズーム維持） */
.img-item.is-leaving img {
    transform: scale(1);
}

/* ---- 3-2. テキスト ---- */
/* 中央のテキストエリア（下マージンで下部エリアを除いた範囲の上下中央） */
.mainv-inner {
    width: 100%;
    /* リード文の改行位置維持 */
    max-width: calc(var(--inner-w) - 4rem + var(--main-pad) * 2);
    margin: 0 auto 2rem;
    padding-block: 2rem;
    padding-inline: var(--main-pad);
    text-align: center;
    /* 明るい写真上の可読性確保（輪郭の影＋広がる影） */
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.45),
        0 1px 6px rgba(0, 0, 0, 0.4),
        0 2px 24px rgba(0, 0, 0, 0.4);
}
/* 英字ラベル「HISTORY」 */
.inner-en {
    margin-bottom: 1.375rem;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
    opacity: 0.9;
}
/* タイトル「私たちは間違いを愛そう。」 */
.inner-ttl {
    margin: 0 -0.5em 0.5em;
    padding-left: 0.5em;
    font-family: var(--f-serif);
    font-weight: 700;
    font-size: clamp(1.875rem, 5.6vw, 5rem);
    line-height: 1.25;
}
/* タイトルの改行単位 */
.inner-ttl span {
    display: inline-block;
}
/* リード文（ブロックは中央、文字は左寄せ） */
.inner-txt {
    max-width: 61em;
    margin: 0 auto 1.2em;
    font-size: 1.125rem;
    line-height: 2.5;
    text-align: left;
    line-break: strict;
}
/* リード文（最後の段落） */
.inner-txt:last-child {
    margin-bottom: 0;
}

/* ---- 3-3. 下部（写真キャプション＋スライド操作） ---- */
/* 下部エリア全体 */
.mainv-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0 2rem 1.75rem;
    font-size: 0.75rem;
    line-height: 1.3;
}
/* 写真キャプション（例：東キャンパス） */
.bottom-caption {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    opacity: 0.9;
}
/* キャプション前の横線 */
.bottom-caption::before {
    content: "";
    width: 1.25em;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}
/* キャプションの文字 */
.caption-txt {
    transition: opacity 0.6s ease;
}
/* キャプション切替中（フェードアウト） */
.caption-txt.is-swap {
    opacity: 0;
}

/* スライド操作（インジケーター＋一時停止ボタン） */
.bottom-controls {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
/* インジケーター */
.controls-dots {
    display: flex;
    gap: 0.5rem;
}
/* インジケーターの各ボタン */
.controls-dots button {
    position: relative;
    display: block;
    width: 2.125rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
/* インジケーターのバー（背景・進捗共通） */
.controls-dots button::before,
.controls-dots button::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
}
/* インジケーターのバー背景 */
.controls-dots button::before {
    right: 0;
    background: rgba(255, 255, 255, 0.35);
}
/* インジケーターの進捗バー */
.controls-dots button::after {
    width: 0;
    background: var(--white);
}
/* 表示中スライドの進捗アニメーション */
.controls-dots button[aria-current="true"]::after {
    animation: mvProgress var(--interval, 6000ms) linear forwards;
}
/* 一時停止中の進捗停止 */
.m-mainv.is-paused .controls-dots button[aria-current="true"]::after {
    animation-play-state: paused;
}
/* 進捗バーの伸長 */
@keyframes mvProgress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* 一時停止／再生ボタン */
.controls-toggle {
    width: 1.875rem;
    height: 1.875rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
/* 一時停止／再生ボタンのホバー */
.controls-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}
/* 一時停止／再生アイコン */
.controls-toggle svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: var(--white);
}
/* 再生アイコン（通常は非表示） */
.controls-toggle .toggle-play {
    display: none;
}
/* 一時停止中の再生アイコン表示 */
.m-mainv.is-paused .controls-toggle .toggle-play {
    display: block;
}
/* 一時停止中の一時停止アイコン非表示 */
.m-mainv.is-paused .controls-toggle .toggle-pause {
    display: none;
}

/* ---------------------------------------------------------------------
 *  4. 本文：年代ナビ＋年表
 * ------------------------------------------------------------------ */
/* ---- 4-1. レイアウト ---- */
/* 本文（年代見出しの透かしのはみ出し防止、stickyを妨げないclip） */
#l-content {
    overflow-x: clip;
}
/* 本文エリア全体（左：年代ナビ／右：年表） */
.content-inner {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    max-width: var(--content-w);
    margin: 0 auto;
}
/* 年表の本文エリア */
.content-main {
    padding-inline: var(--main-pad);
    min-width: 0;
}

/* ---- 4-2. 年代ナビ ---- */
/* 年代ナビ（PC：左の固定レール／SP：上部固定） */
.content-nav {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding: 4.5rem 1rem;
    z-index: 2;
}
/* 年代ナビの各リンク */
.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
    font-weight: 500;
    color: var(--sub);
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
}
/* 年代ナビの吹き出しの三角（右向きの正三角形） */
.nav-item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.866rem;
    border-color: transparent transparent transparent var(--main);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* 年代ナビのホバー */
.nav-item:hover {
    color: var(--main);
}
/* 年代ナビ表示中の年代 */
.nav-item.is-active {
    background: var(--main);
    color: var(--white);
}
/* 年代ナビ表示中の吹き出しの三角 */
.nav-item.is-active::after {
    opacity: 1;
}
/* 年代ナビの年（例：昭和27年（1952年）–） */
.nav-item .item-year {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
/* 年代ナビの見出し（2列で高さが揃う時は残りの高さの上下中央） */
.nav-item .item-ttl {
    display: block;
    margin-block: auto;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ---- 4-3. 年表の縦ライン ---- */
/* 年表の内側（縦ラインの基準） */
.main-inner {
    position: relative;
    padding-left: 4rem;
}
/* 年表の縦ライン（最初の年代見出しの丸の中心から開始） */
.main-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

/* ---- 4-4. 年代見出し ---- */
/* 偶数番目の年代の背景（画面幅いっぱいのグレー、はみ出しは#l-contentでclip） */
.m-box-era:nth-of-type(even) {
    border-image: linear-gradient(var(--base), var(--base)) fill 0 / 0 / 0 100vw;
    border-image: linear-gradient(var(--base), var(--base)) fill 0 / 0 / 0
        100dvw;
}
/* 年代見出しエリア */
.era-head {
    position: relative;
    isolation: isolate;
    padding: 6rem 0 4rem;

    scroll-margin-top: calc(var(--rail-h) + 1rem);
}
/* 年代見出しの背景（西暦の透かし、本文右側の余白の中央、読み上げ対象外） */
.era-head::after {
    /* 本文右端から画面右端までの幅 */
    --gutter: calc(
        (100vw - min(100vw, var(--content-w))) / 2 + var(--main-pad)
    );
    content: attr(data-year);
    content: attr(data-year) / "";
    position: absolute;
    top: 3.5rem;
    --edge-min: 0.75rem; /* 画面右端からの最小距離 */
    /* 数字の右端を画面右端から余白の中央（最小--edge-min〜最大3.5rem）に配置（数字の幅は約0.63em） */
    left: calc(
        100% + var(--gutter) -
            clamp(var(--edge-min), (var(--gutter) - 0.63em) / 2, 3.5rem) -
            0.62em
    );
    z-index: -1;
    transform: skewY(12deg);
    transform-origin: right top;
    font-family: "NUA Num", "NUA Dash", var(--f-serif);
    font-weight: 600;
    /* 余白の幅に合わせて拡大（10.5rem以降は余白の75%で拡大、最大14rem） */
    font-size: clamp(
        4rem,
        max(min(var(--gutter), 10.5rem), var(--gutter) * 0.75),
        14rem
    );
    line-height: 0.75; /* 縦書き時の数字右側の余白調整 */
    letter-spacing: 0.02em;
    color: rgba(229, 0, 18, 0.08);
    color: color-mix(in srgb, var(--main) 8%, transparent);
    white-space: nowrap;
    writing-mode: vertical-rl;
    pointer-events: none;
}
/* 表示中の年代の丸（外側の光彩） */
.m-box-era.is-current .era-head::before {
    box-shadow:
        0 0 0 0.375rem rgba(229, 0, 18, 0.15),
        0 0 0 0.375rem rgba(255, 255, 255, 0.5); /* 白の下地（写真上でも見えるように、縦線は透過） */
}
/* 年代見出しの年（例：昭和27年（1952年）–） */
.head-year {
    position: relative;
    display: block;
    margin-bottom: 1.5rem;
    font-family: var(--f-serif);
    font-weight: 700;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--sub);
}
/* 年代見出しのタイトル */
.head-ttl {
    position: relative;
    margin-bottom: 3.5rem;
    font-family: var(--f-serif);
    font-weight: 700;
    font-size: var(--ttl-size);
    color: var(--sub);
    text-align: center;
    line-height: 1.5;
}
/* タイトルの改行単位 */
.ttl-line {
    display: inline-block;
}
/* 年代見出しの丸（縦ライン上、背景色の切り替わりの上下中央） */
.era-head::before {
    content: "";
    position: absolute;
    left: -4.5rem;
    top: -0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--main);
    transition:
        background 0.3s,
        box-shadow 0.3s;
    z-index: 1;
}
/* 年代見出しのリード文 */
.head-lead {
    width: fit-content;
    margin: 0 auto 1.25rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.6;
}
/* 年代見出しの本文 */
.head-txt {
    margin-bottom: 1rem;
    font-size: 1rem;
}
/* 年代見出しの本文（最後の段落） */
.head-txt:last-child {
    margin-bottom: 0;
}

/* ---- 4-5. 年表 ---- */
/* 年表リスト */
.era-timeline {
    padding-bottom: 5rem;
}
/* 年表の各項目 */
.timeline-item {
    padding: 2rem 0;
}
/* 年表項目の年（例：昭和27年（1952年）） */
.timeline-item .item-year {
    position: relative;
    margin-bottom: 0.5rem;
    font-family: var(--f-serif);
    font-size: 1.25rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--dark);
    line-height: 1.5;
}
/* 年表項目の丸（縦ライン上） */
.timeline-item .item-year::before {
    content: "";
    position: absolute;
    left: -4.325rem;
    top: 1.1875rem; /* 漢字の上下中央 */
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--main);
    transition: box-shadow 0.3s;
    z-index: 1;
}
/* 表示中の年代かつ画面内の年表項目の丸（外側の光彩） */
.m-box-era.is-current .timeline-item .item-year.is-inview::before {
    box-shadow:
        0 0 0 0.25rem rgba(229, 0, 18, 0.15),
        0 0 0 0.25rem rgba(255, 255, 255, 0.5); /* 白の下地（写真上でも見えるように、縦線は透過） */
}
/* 年表項目の横ライン */
.timeline-item .item-year::after {
    content: "";
    position: absolute;
    left: -4rem;
    top: 1.5625rem; /* 漢字の上下中央 */
    width: 3.5rem;
    height: 1px;
    background: var(--line);
    z-index: 0;
}
/* 年表項目の和暦（例：昭和27年） */
.year-jp {
    color: var(--sub);
}
/* 年の西暦・タイトル内の括弧書き（全角括弧の外側の空きを詰める） */
.year-ad,
.txt-paren {
    margin-inline: -0.5em;
}
/* タイトル内の括弧書き（括弧内で改行させない単位） */
.txt-paren {
    display: inline-block;
}
/* 改行単位の先頭の括弧書き（行頭で左にはみ出さないよう詰めない） */
.ttl-line > .txt-paren:first-child {
    margin-left: 0;
}
/* 先頭が括弧書きの改行単位の手前（同じ行に並ぶ時だけ括弧との空きを詰める） */
.ttl-line:has(+ .ttl-line > .txt-paren:first-child) {
    margin-right: -0.5em;
}
/* 年代見出しの括弧書き（中央揃えのため行頭・行末でも詰めて文字の見た目で中央に揃える） */
.head-ttl .ttl-line > .txt-paren:first-child {
    margin-left: -0.5em;
}
/* 年代見出しの括弧書きの手前（括弧側で詰めるため戻す） */
.head-ttl .ttl-line:has(+ .ttl-line > .txt-paren:first-child) {
    margin-right: 0;
}
/* 和暦の数字（大きめ、底辺を漢字の底辺に合わせる） */
.year-num {
    position: relative;
    top: 0.04em;
    display: inline-block;
    font-size: 2em;
    font-family: "NUA Num", var(--f-serif);
    font-weight: 600;
    line-height: 0.8;
}

/* 年表項目の本文 */
.body-txt {
    font-size: 0.9375rem;
}
/* 年表項目の注記（2行目以降は※の後ろに揃える） */
.body-note {
    margin-top: 0.25rem;
    margin-left: 1rem;
    padding-left: 1.25em;
    text-indent: -1.25em;
    font-size: 0.875rem;
    color: var(--light);
}
/* 注記の※（冒頭の文字との間に空き） */
.body-note::before {
    content: "※";
    margin-right: 0.25em;
}

/* 写真グリッド（2列） */
.body-photo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem 0.75rem;
    align-items: start;
}
/* 本文・ボタンの後に続く写真グリッドの余白 */
.item-body > .body-txt + .body-photo,
.item-body > .m-btn-common + .body-photo {
    margin-top: 1rem;
}
/* 1列分に縦積みする写真のまとまり（隣の列の高さまで伸ばし、写真間の余白で調整） */
.photo-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem; /* 最小の余白 */
    align-self: stretch;
}
/* 写真1枚分（画像＋キャプション） */
.photo-item {
    display: flex;
    flex-direction: column;
}
/* 写真の枠（トリミングなし、元の縦横比） */
.photo-img {
    overflow: hidden;
    background: var(--base);
}
/* 写真の枠（背景がグレーの年代） */
.m-box-era:nth-of-type(even) .photo-img {
    background: var(--white);
}
/* 写真 */
.photo-img img {
    display: block;
    width: 100%;
    height: auto;
}
/* 縦長の写真の枠（高さは枠の幅の4:3、横幅は写真に合わせる） */
.photo-img.is-portrait {
    aspect-ratio: 4 / 3;
    background: none;
}
/* 縦長の写真 */
.photo-img.is-portrait img {
    width: auto;
    max-width: 100%;
    height: 100%;
}
/* 隣の列の方が高い時に伸ばす写真（はみ出しはトリミング） */
.photo-item.is-fill {
    align-self: stretch;
}
/* 隣の列の方が高い時に伸ばす写真の枠 */
.photo-item.is-fill .photo-img {
    flex: 1;
}
/* 隣の列の方が高い時に伸ばす写真 */
.photo-item.is-fill .photo-img img {
    height: 100%;
    object-fit: cover;
}
/* 写真キャプション */
.photo-caption {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--light);
}

/* ---- 4-6. 記念誌 ---- */
/* 記念誌の項目（グレー枠） */
.timeline-item.item-book {
    margin: 1.5rem 0 1.5rem -1.375rem;
    padding: 1.375rem 1.375rem 1.625rem; /* 下は年の行間分を補正 */
    background: var(--base);
}
/* 記念誌項目の年（例：1994年（平成6年）3月） */
.timeline-item.item-book .item-year {
    margin-bottom: 0.75rem;
}
/* 記念誌の中身（左：表紙／右：テキスト） */
.timeline-item.item-book .item-body {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
/* 記念誌の表紙（リンク） */
.body-cover {
    display: block;
    transition: transform 0.5s var(--ease-out);
}
/* 記念誌の表紙のホバー（少し拡大） */
.body-cover:hover {
    transform: scale(1.02);
}
/* 記念誌の表紙画像 */
.body-cover img {
    display: block;
    width: 100%;
    height: auto;
}
/* 記念誌のタイトル */
.txt-ttl {
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.75;
    color: var(--dark);
}
/* 記念誌のタイトルの改行単位 */
.txt-ttl > span {
    display: inline-block;
}

/* ---- 4-7. ボタン・リンクアイコン ---- */
/* ボタン（記念誌を読む／外部リンク） */
.m-btn-common {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.75rem;
    padding: 0.4375rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--white);
    background: linear-gradient(var(--white), var(--white)) right center / 0%
        100% no-repeat var(--main);
    border: 1px solid var(--main);
    border-radius: 2px;
    text-decoration: none;
    transition:
        color 0.5s var(--ease-out),
        background-size 0.5s var(--ease-out);
}
/* ボタンのホバー（左から白背景） */
.m-btn-common:hover {
    color: var(--main);
    background-position: left center;
    background-size: 100% 100%;
}

/* 外部リンクのアイコン（ボタン・フッターリンク共通／1枚目：矢印／2枚目：枠） */
.btn-ext::after,
.footer-link::after {
    content: "";
    flex: none;
    width: 0.6875rem;
    height: 0.6875rem;
    background: currentColor;
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M6.5 1.5h4v4M10.5 1.5 5 7'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M9 7.5v3H1.5V3h3'/%3E%3C/svg%3E");
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M6.5 1.5h4v4M10.5 1.5 5 7'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M9 7.5v3H1.5V3h3'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position:
        0 0,
        0 0;
    mask-position:
        0 0,
        0 0;
}
/* 外部リンクのアイコンのホバー */
.btn-ext:hover::after,
.footer-link:hover::after {
    animation: extArrow 0.7s both;
}
/* 矢印が右上へ抜けて左下から戻る動き */
@keyframes extArrow {
    0% {
        -webkit-mask-position:
            0 0,
            0 0;
        mask-position:
            0 0,
            0 0;
        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    40% {
        -webkit-mask-position:
            0.75rem -0.75rem,
            0 0;
        mask-position:
            0.75rem -0.75rem,
            0 0;
    }
    40.01% {
        -webkit-mask-position:
            -0.75rem 0.75rem,
            0 0;
        mask-position:
            -0.75rem 0.75rem,
            0 0;
        animation-timing-function: var(--ease-out);
    }
    100% {
        -webkit-mask-position:
            0 0,
            0 0;
        mask-position:
            0 0,
            0 0;
    }
}

/* 「この記念誌を読む」ボタンの本アイコン（1枚目：左ページ／2枚目：右ページ） */
.btn-book::before {
    content: "";
    flex: none;
    width: 13px;
    height: 11px;
    background: currentColor;
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2C2.4.3 4.5.4 6 1.5v9.2C4.5 9.6 2.4 9.5 0 10.4z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7 0 6 11' preserveAspectRatio='none'%3E%3Cpath d='M13 1.2C10.6.3 8.5.4 7 1.5v9.2c1.5-1.1 3.6-1.2 6-.3z'/%3E%3C/svg%3E");
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11' preserveAspectRatio='none'%3E%3Cpath d='M0 1.2C2.4.3 4.5.4 6 1.5v9.2C4.5 9.6 2.4 9.5 0 10.4z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7 0 6 11' preserveAspectRatio='none'%3E%3Cpath d='M13 1.2C10.6.3 8.5.4 7 1.5v9.2c1.5-1.1 3.6-1.2 6-.3z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size:
        6px 11px,
        6px 11px;
    mask-size:
        6px 11px,
        6px 11px;
    -webkit-mask-position:
        0 0,
        7px 0;
    mask-position:
        0 0,
        7px 0;
}
/* 「この記念誌を読む」ボタンの本アイコンのホバー */
.btn-book:hover::before {
    animation: bookOpen 0.8s both;
}
/* 本が閉じて開く動き */
@keyframes bookOpen {
    0% {
        -webkit-mask-size:
            6px 11px,
            6px 11px;
        mask-size:
            6px 11px,
            6px 11px;
        -webkit-mask-position:
            0 0,
            7px 0;
        mask-position:
            0 0,
            7px 0;
        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    35% {
        -webkit-mask-size:
            1px 11px,
            1px 11px;
        mask-size:
            1px 11px,
            1px 11px;
        -webkit-mask-position:
            5px 0,
            7px 0;
        mask-position:
            5px 0,
            7px 0;
        animation-timing-function: var(--ease-out);
    }
    100% {
        -webkit-mask-size:
            6px 11px,
            6px 11px;
        mask-size:
            6px 11px,
            6px 11px;
        -webkit-mask-position:
            0 0,
            7px 0;
        mask-position:
            0 0,
            7px 0;
    }
}

/* ---- 4-8. スクロール表示（html.is-reveal付与時のみ有効） ---- */
/* 年代見出し・年表項目（表示前） */
.is-reveal .era-head,
.is-reveal .timeline-item {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}
/* 年代見出し・年表項目（表示後） */
.is-reveal .era-head.is-shown,
.is-reveal .timeline-item.is-shown {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------
 *  5. フッター
 * ------------------------------------------------------------------ */
/* フッター全体 */
#l-footer {
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    background: var(--white);
}
/* フッターロゴ */
.footer-logo {
    width: 170px;
    margin: 0 auto 1.5rem;
    line-height: 1;
}
/* フッターロゴのリンク */
.footer-logo a {
    display: block;
}
/* フッターロゴ画像 */
.footer-logo img {
    width: 100%;
    height: auto;
}
/* SNSアイコン一覧 */
.footer-sns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.375rem;
}
/* SNSアイコンのリンク */
.footer-sns a {
    display: block;
    transition: opacity 0.2s;
}
/* SNSアイコンのホバー */
.footer-sns a:hover {
    opacity: 0.6;
}
/* SNSアイコン画像 */
.footer-sns img {
    height: 22px;
    width: auto;
}
/* コピーライト */
.footer-copy {
    font-size: 0.75rem;
}
/* コピーライトのsmall（既定の縮小解除） */
.footer-copy small {
    font-size: inherit;
}

/* ---------------------------------------------------------------------
 *  6. PDFビューア（viewer.html）
 * ------------------------------------------------------------------ */
/* ビューアのページ全体 */
.layout-viewer {
    background: #2b2b29;
    overflow: hidden;
}
/* ビューア全体 */
.m-box-pdf {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    color: var(--white);
    overflow: hidden;
}

/* 上部のツールバー */
.pdf-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: calc(env(safe-area-inset-top, 0px) + 0.625rem) 1rem 0.625rem
        1.375rem;
    background: #1f1f1d;
    border-bottom: 1px solid #3a3a37;
}
/* ツールバーのタイトル（記念誌名） */
.pdf-ttl {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* 操作ボタン群 */
.pdf-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
}
/* 操作ボタン（前後・拡大縮小・DL・閉じる） */
.tools-btn {
    min-width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0 0.5rem;
    background: none;
    border: 0;
    border-radius: 4px;
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
/* 操作ボタンのホバー */
.tools-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
/* 操作ボタン無効時 */
.tools-btn:disabled {
    opacity: 0.3;
    cursor: default;
    background: none;
}
/* 操作ボタンのアイコン */
.tools-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 倍率表示ボタン（画面フィット） */
.tools-zoom {
    min-width: 56px;
}
/* 操作ボタンの区切り線 */
.tools-div {
    width: 1px;
    height: 20px;
    background: #46463f;
    margin: 0 0.375rem;
}
/* ページ番号（入力／総ページ数） */
.tools-page {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
/* ページ番号の入力欄 */
.page-num {
    width: 3.4em;
    height: 30px;
    padding: 0 0.25rem;
    text-align: center;
    font: inherit;
    color: var(--white);
    background: #121211;
    border: 1px solid #46463f;
    border-radius: 3px;
    -moz-appearance: textfield;
}
/* ページ番号入力欄の上下矢印非表示 */
.page-num::-webkit-outer-spin-button,
.page-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* ページ番号の区切り「/」 */
.page-sep {
    opacity: 0.5;
}

/* PDF表示エリア */
.pdf-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    padding: 1.5rem;
    touch-action: pan-x pan-y pinch-zoom;
    outline: none;
}
/* PDFのページ（canvas） */
.stage-canvas {
    display: block;
    flex: none;
    margin: auto; /* はみ出し時も左上が切れない中央寄せ */
    background: var(--white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    transition: opacity 0.2s;
}
/* 読み込み中のページ */
.m-box-pdf.is-loading .stage-canvas {
    opacity: 0.25;
}
/* 読み込み中／エラーのメッセージ */
.stage-status {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0.875rem 1.25rem;
    font-size: 0.8125rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    display: none;
}
/* 読み込み中・エラー・JS無効時のメッセージ表示 */
.m-box-pdf.is-loading .stage-status,
.m-box-pdf.is-error .stage-status,
.stage-status.is-noscript {
    display: block;
}
/* エラーメッセージ内のリンク */
.stage-status a {
    color: var(--white);
}

/* ---------------------------------------------------------------------
 *  7. レスポンシブ
 *  ※後の指定ほど優先のため、7-1〜7-5の順番変更不可
 * ------------------------------------------------------------------ */
/* ---- 7-1. タブレット・SP（幅991.98px以下） ---- */
@media (max-width: 991.98px) {
    /* 本文エリア全体（1列） */
    .content-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    /* 年表の本文エリア */
    :root {
        --main-pad: 2rem;
    }
    /* 年表の本文エリア（最初の年代見出しの丸と光彩が年代ナビに隠れない余白） */
    .content-main {
        padding-top: 1.5rem;
    }

    /* 年代ナビ（上部固定・2列） */
    .content-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.625rem;
        max-height: none;
        overflow: visible;
        padding: 0.75rem 0.875rem;
        background: var(--base);
        transition: transform 0.35s var(--ease-out);
    }
    /* 年代ナビ（下スクロール中は上へ隠す、JSでis-hidden付与） */
    .content-nav.is-hidden {
        transform: translateY(-100%);
    }
    /* 年代ナビの各リンク */
    .nav-item {
        row-gap: 0.125rem;
        margin-bottom: 0;
        padding: 0.5rem 0.75rem;
        background: var(--white);
    }
    /* 年代ナビの吹き出しの三角（2列表示のため非表示） */
    .nav-item::after {
        display: none;
    }
    /* 年代ナビの年 */
    .nav-item .item-year {
        font-size: 0.85714286rem;
    }
    /* 年代ナビの見出し */
    .nav-item .item-ttl {
        font-size: 0.75rem;
        line-height: 1.45;
    }
}

/* ---- 7-2. SP（幅820px以下） ---- */
@media (max-width: 820px) {
    /* ページ全体 */
    html {
        font-size: 14px;
    }

    /* 左上のロゴ */
    .header-logo {
        top: calc(env(safe-area-inset-top, 0px) + 1.25rem);
        left: 1.375rem;
        width: 132px;
    }

    /* メインビジュアル英字ラベル「HISTORY」 */
    .inner-en {
        margin-bottom: 1.75rem;
    }
    /* メインビジュアルタイトル */
    .inner-ttl {
        margin-bottom: 2rem;
    }
    /* メインビジュアルリード文 */
    .inner-txt {
        margin-bottom: 0.75em;
        line-height: 2.25;
    }
    /* メインビジュアル下部エリア */
    .mainv-bottom {
        padding: 0 1.375rem 1.375rem;
    }
    /* インジケーターの各ボタン */
    .controls-dots button {
        width: 22px;
    }

    /* 年表の内側（縦ラインの基準） */
    .main-inner {
        padding-left: 3.5rem;
    }

    /* 年代見出しの背景（西暦の透かし、余白が狭いため本文側へはみ出して拡大） */
    .era-head::after {
        --edge-min: 0px; /* 画面右端寄せ */
        top: 2rem;
        font-size: 5.5rem;
    }

    /* 年代見出しの丸 */
    .era-head::before {
        left: -4rem;
    }
    /* 年代見出しの本文・年表項目の本文 */
    .head-txt,
    .body-txt {
        font-size: 1rem;
    }
    /* 年表項目の注記 */
    .body-note {
        font-size: 0.92857143rem; /* 13px */
    }
    /* 写真キャプション */
    .photo-caption {
        font-size: 0.85714286rem; /* 12px */
    }

    /* 年表項目の丸 */
    .timeline-item .item-year::before {
        left: -3.875rem;
    }
    /* 年表項目の横ライン */
    .timeline-item .item-year::after {
        left: -3.375rem;
        width: 2.875rem;
    }

    /* 記念誌の項目（グレー枠） */
    .timeline-item.item-book {
        margin-left: -1.125rem;
        padding: 1.25rem 1.125rem 1.5rem;
    }
    /* 記念誌の中身（左：表紙／右：テキスト） */
    .timeline-item.item-book .item-body {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 1.125rem;
    }

    /* フッター全体 */
    #l-footer {
        padding: 1.75rem 1.125rem;
    }

    /* PDF上部のツールバー（2段） */
    .pdf-bar {
        flex-wrap: wrap;
        gap: 0.25rem 0.125rem;
        padding: calc(env(safe-area-inset-top, 0px) + 0.625rem) 0.375rem
            0.375rem 1rem;
    }
    /* PDFツールバーのタイトル（1段目） */
    .pdf-ttl {
        flex: 1 1 calc(100% - 100px);
        order: 0;
    }
    /* PDF操作ボタン群（ボタンをツールバー直下に展開） */
    .pdf-tools {
        display: contents;
    }
    /* PDF操作ボタン（2段目） */
    .pdf-tools > * {
        order: 2;
    }
    /* DL・閉じるボタン（1段目） */
    .pdf-tools > .tools-dl,
    .pdf-tools > .tools-close {
        order: 1;
    }
    /* 2段目の先頭（前のページ） */
    .pdf-tools > [data-act="prev"] {
        margin-left: auto;
    }
    /* 縮小ボタン（ページ番号との間隔） */
    .pdf-tools > [data-act="zoomout"] {
        margin-left: 1rem;
    }
    /* 2段目の末尾（拡大） */
    .pdf-tools > [data-act="zoomin"] {
        margin-right: auto;
    }
    /* PDF操作ボタン */
    .tools-btn {
        min-width: 36px;
        padding: 0 0.375rem;
    }
    /* PDF倍率表示ボタン */
    .tools-zoom {
        min-width: 50px;
    }
    /* PDF操作ボタンの区切り線 */
    .tools-div {
        display: none;
    }
    /* PDF表示エリア */
    .pdf-stage {
        padding: 0.875rem;
    }
}

/* ---- 7-3. 画面の高さが低い端末 ---- */
/* 幅820px以下かつ高さ700px以下 */
@media (max-width: 820px) and (max-height: 700px) {
    /* メインビジュアルタイトル */
    .inner-ttl {
        font-size: 2.25rem;
    }
    /* メインビジュアルリード文 */
    .inner-txt {
        font-size: 0.875rem;
    }
}

/* 高さ440px以下（横向きのスマートフォンなど） */
@media (max-height: 440px) {
    /* ページ全体 */
    html {
        font-size: 14px;
    }
    /* 写真キャプション */
    .photo-caption {
        font-size: 0.85714286rem; /* 12px */
    }

    /* メインビジュアル中央のテキストエリア */
    .mainv-inner {
        padding-block: 1rem;
    }
    /* メインビジュアル英字ラベル「HISTORY」 */
    .inner-en {
        margin-bottom: 1.25rem;
        font-size: 0.875rem;
    }
    /* メインビジュアルタイトル */
    .inner-ttl {
        margin-bottom: 1.5rem;
        font-size: 2.25rem;
    }
    /* メインビジュアルリード文 */
    .inner-txt {
        font-size: 0.875rem;
        line-height: 2;
    }
    /* メインビジュアル下部エリア */
    .mainv-bottom {
        padding-bottom: 1.125rem;
    }
}

/* 高さ440px以下のタッチ端末の横向き（スマートフォン実機、アドレスバー表示時） */
@media (max-height: 440px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    /* ロゴ */
    .header-logo {
        top: calc(env(safe-area-inset-top, 0px) + 0.875rem);
    }
    /* メインビジュアル下部エリア */
    .mainv-bottom {
        padding-bottom: 0.75rem;
    }
}

/* 幅992px以上かつ高さ440px以下（PCの左の年代ナビ） */
@media (min-width: 992px) and (max-height: 440px) {
    /* 年代ナビ */
    .content-nav {
        padding-block: 2.25rem;
    }
    /* 年代ナビの各リンク */
    .nav-item {
        row-gap: 0.125rem;
        margin-bottom: 0.625rem;
        padding: 0.5rem 0.75rem;
    }
    /* 年代ナビの年 */
    .nav-item .item-year {
        font-size: 1rem;
    }
    /* 年代ナビの見出し */
    .nav-item .item-ttl {
        font-size: 0.875rem;
    }
}

/* 幅667px以下かつ高さ375px以下（横向きの小さいスマートフォン） */
@media (max-width: 667px) and (max-height: 375px) {
    /* メインビジュアル英字ラベル「HISTORY」 */
    .inner-en {
        margin-bottom: 0.75rem;
    }
    /* メインビジュアルタイトル */
    .inner-ttl {
        margin-bottom: 1rem;
    }
}

/* 高さ320px以下（横向きのスマートフォン、アドレスバー表示時） */
@media (max-height: 320px) {
    /* メインビジュアル英字ラベル「HISTORY」 */
    .inner-en {
        margin-bottom: 0.5rem;
    }
    /* メインビジュアルタイトル */
    .inner-ttl {
        margin-bottom: 0.75rem;
        font-size: 2rem;
    }
    /* メインビジュアルリード文 */
    .inner-txt {
        line-height: 1.7;
    }
}

/* ---- 7-4. 幅の狭いSP（幅440px以下） ---- */
@media (max-width: 440px) {
    /* メインビジュアルタイトル（画面幅に比例） */
    .inner-ttl {
        margin-bottom: 1.5rem;
        font-size: calc((100dvw - 4rem) / 11.6);
    }
    /* メインビジュアルリード文 */
    .inner-txt {
        font-size: 1rem;
    }

    /* 年表の本文エリア */
    .content-main {
        padding-left: 1.5rem;
    }
    /* 年表の内側（縦ラインの基準） */
    .main-inner {
        padding-left: 2.5rem;
    }

    /* 年代見出しの丸 */
    .era-head::before {
        left: -3rem;
    }
    /* 年代見出しの年 */
    .head-year {
        font-size: 1.375rem;
    }

    /* 年表項目の丸 */
    .timeline-item .item-year::before {
        left: -2.875rem;
    }
    /* 年表項目の横ライン */
    .timeline-item .item-year::after {
        left: -2.25rem;
        width: 2rem;
    }

    /* 写真グリッド（1列） */
    .body-photo {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.125rem;
    }
    /* 縦積みする写真のまとまり */
    .photo-stack {
        gap: 1.125rem;
    }
    /* 隣の列の方が高い時に伸ばす写真（1列では元の縦横比） */
    .photo-item.is-fill .photo-img img {
        height: auto;
    }
    /* 記念誌のタイトル */
    .txt-ttl {
        font-size: 1.125rem;
    }
    /* 期間の年（1行に収まるよう画面幅に比例、最小14px） */
    .timeline-item .item-year.is-range {
        font-size: clamp(14px, (100vw - 84px) / 19, 1.25rem);
    }
}

/* ---- 7-3b. 幅392px以下のSP ---- */
@media (max-width: 392px) {
    /* 記念誌のタイトル（1単語が表紙横の幅に収まるよう画面幅に比例、最小13px） */
    .txt-ttl {
        font-size: clamp(13px, (100vw - 212px) / 11.2, 1.125rem);
    }
}

/* ---- 7-5. 小さいSP（幅389px以下かつ高さ740px以下） ---- */
/* iPhone SE・mini、幅360〜384pxのAndroid想定。幅390px以上の標準機は対象外 */
@media (max-width: 389px) and (max-height: 740px) {
    /* メインビジュアル英字ラベル「HISTORY」 */
    .inner-en {
        margin-bottom: 1rem;
        font-size: 0.75rem;
    }
    /* メインビジュアルリード文（アドレスバー表示時も15pxのまま、行間で調整） */
    .inner-txt {
        line-height: 2;
    }
    /* メインビジュアル下部エリア */
    .mainv-bottom {
        padding-bottom: 1rem;
    }

    /* 年表の本文エリア */
    .content-main {
        padding-block: 0.875rem 2.5rem;
    }
    /* 年表の最後の項目 */
    .timeline-item:last-of-type {
        padding-bottom: 0.5rem;
    }
    /* 記念誌項目の本文 */
    .timeline-item.item-book .body-txt {
        font-size: 0.875rem;
    }
}

/* 小さいSP、または幅991.98px以下かつ高さ440px以下（横向きのスマートフォン）の上部固定ナビ */
@media (max-width: 389px) and (max-height: 740px),
    (max-width: 991.98px) and (max-height: 440px) {
    /* 固定中の年代ナビの見出し（非表示、年のみ表示、JSでis-stuck付与） */
    .content-nav.is-stuck .nav-item .item-ttl {
        display: none;
    }
    /* 固定中の年代ナビの年（拡大、12px、幅320px前後は1行に収まる大きさ） */
    .content-nav.is-stuck .nav-item .item-year {
        font-size: min(0.85714286rem, 3.3vw);
    }
}

/* 画面の高さ740px以下の端末（iPhone SE・8、画面の小さいAndroid） */
/* 表示領域ではなく端末の画面サイズで判定（アドレスバーの有無で文字サイズを変えないため） */
@media (max-width: 389px) and (max-device-height: 740px) {
    /* メインビジュアルリード文 */
    .inner-txt {
        font-size: 0.875rem;
        line-height: 2.25;
    }
}

/* ---- 7-6. 動きを減らす設定 ---- */
@media (prefers-reduced-motion: reduce) {
    /* ページ内リンクのスムーススクロール無効 */
    html {
        scroll-behavior: auto;
    }
    /* SPの年代ナビの表示切替（動きなし） */
    .content-nav {
        transition: none;
    }
    /* スライド1枚分（切替時間短縮） */
    .img-item {
        transition-duration: 0.6s;
    }
    /* スライドの写真（ズーム停止） */
    .img-item img,
    .img-item.is-active img {
        transform: none;
        transition: none;
    }
    /* 記念誌の表紙のホバー（動きなし） */
    .body-cover:hover {
        transform: none;
    }
    /* 外部リンクのアイコンのホバー（動きなし） */
    .btn-ext:hover::after,
    .footer-link:hover::after {
        animation: none;
    }
    /* 「この記念誌を読む」ボタンの本アイコンのホバー（動きなし） */
    .btn-book:hover::before {
        animation: none;
    }
}