/* Noto Serif JPのインポート */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

:root {
    /* カラーパレット */
    --color-accent: #B8860B;
    --color-dark: #24140e;
    --color-light-bg: #f8f8f8;
    --color-timeline-line: #ccc;
    --color-accent-bg: #C9C9C9;
    --color-year: #777;

    /* アニメーション */
    --anim-duration: 0.5s;
    --anim-timeline-fade: 0.8s;
    --anim-text-delay-step: 0.3s;
}

/* 全体設定 */
body {
    font-family: 'Noto Serif JP', serif;
    background-color: var(--color-light-bg);
    color: #333;
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

header {
    width: 100vw;
    height: 100vh;
    background-color: var(--color-light-bg);
    /* 背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('/image.jsp?id=672615');
    background-size: cover;
    background-position: center;
}

/* ======================================================= */
/* オープニング画面（全画面表示とレイアウト） */
/* ======================================================= */
.photo-grid-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-light-bg);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: all;
    transition: none;
    opacity: 1;
    transition: opacity 1s ease-out 0.5s;
}

/* ======================================================= */
/* 写真グリッドのランダム配置とアニメーション */
/* ======================================================= */
.photo-grid-container {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 写真を重ねて表示 */
    mix-blend-mode: multiply;
    z-index: 1;
}

/* ======================================================= */
/* 写真グリッドのランダム配置とアニメッシュョン (強化版) */
/* ======================================================= */

.photo-grid-container {
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    z-index: 1;
}

/* ★新規追加: グループコンテナの設定 */
.photo-group {
    position: absolute;
    display: flex;
    animation: groupSlide 4s linear forwards;
}

/* ★グループの位置とアニメーションの開始タイミング */
.group-1 {
    top: 10%;
    left: -45vw;
    animation-delay: 1.5s;
    animation-name: groupSlide;
}

/* ★グループ 2 の位置とアニメーション (右から開始) */
.group-2 {
    top: 60%;
    right: -45vw;
    /* 右端外側に配置 */
    left: auto;
    /* left の設定を解除 */
    animation-delay: 3s;
    animation-name: reverseSlide;
    /* 右から左 */
}


/* 個々の写真アイテムの設定 */
.grid-item {
    width: 15vw;
    /* 写真の幅 */
    overflow: hidden;
    /* グループでアニメーションさせるため、ここではアニメーションは定義しない */
    opacity: 1;
    /* グループが消えるまで表示し続ける */
    position: relative;
    /* group-container内での配置用 */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ★新しいキーフレームアニメーション: グループ全体が左から右へ移動し、フェードアウト */
@keyframes groupSlide {
    0% {
        opacity: 0;
        transform: translateX(0) scale(1);
    }

    1% {
        opacity: 1;
        /* 開始直後に表示 */
    }

    90% {
        opacity: 1;
        /* 画面右端外側に向けて移動 (グループの幅+画面幅分移動) */
        transform: translateX(calc(100vw + 45vw)) scale(1);
    }

    100% {
        opacity: 0;
        /* 最後にフェードアウト */
        transform: translateX(calc(100vw + 45vw)) scale(1);
    }
}

/* --- グループ 2: 右から左へスライド (逆方向) --- */
@keyframes reverseSlide {
    0% {
        opacity: 0;
        /* 開始位置を右端外側に設定 */
        transform: translateX(0) scale(1);
    }

    1% {
        opacity: 1;
        /* 開始直後に表示 */
    }

    90% {
        opacity: 1;
        /* 画面左端外側に向けて移動 */
        transform: translateX(calc(-100vw - 45vw)) scale(1);
    }

    100% {
        opacity: 0;
        /* 最後にフェードアウト */
        transform: translateX(calc(-100vw - 45vw)) scale(1);
    }
}

/* ======================================================= */
/* ★新しいキーフレームアニメーション: グループ全体がカーブ移動 */
/* ======================================================= */

/* --- 上段 (Group 1): 左下から右上に移動 --- */
@keyframes groupCurvedSlide {
    0% {
        opacity: 0;
        /* 開始位置: 画面左下の外側 (-500px, 90vh) */
        transform: translate(-500px, 90vh) scale(0.8) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    50% {
        /* 中間点: 画面中央を通過 (X: 画面中央, Y: 上部へ大きくカーブ) */
        transform: translate(50vw, 10vh) scale(1) rotate(10deg);
    }

    90% {
        opacity: 1;
        /* 終了前: 画面右上の外側へ */
        transform: translate(90vw, 10vh) scale(1.1) rotate(20deg);
    }

    100% {
        opacity: 0;
        /* 終了位置: 画面右上の外側へフェードアウト */
        transform: translate(100vw, 5vh) scale(1.1) rotate(30deg);
    }
}

/* --- 下段 (Group 2): 右下から左上に移動 (反転) --- */
@keyframes groupCurvedSlideReverse {
    0% {
        opacity: 0;
        /* 開始位置: 画面右下の外側 (X: 100vw, Y: 90vh) */
        transform: translate(100vw, 90vh) scale(0.8) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    50% {
        /* 中間点: 画面中央を通過 (X: 画面中央, Y: 上部へ大きくカーブ) */
        transform: translate(50vw, 10vh) scale(1) rotate(-10deg);
    }

    90% {
        opacity: 1;
        /* 終了前: 画面左上の外側へ */
        transform: translate(10vw, 10vh) scale(1.1) rotate(-20deg);
    }

    100% {
        opacity: 0;
        /* 終了位置: 画面左上の外側へフェードアウト */
        transform: translate(-100vw, 5vh) scale(1.1) rotate(-30deg);
    }
}

/* ======================================================= */
/* スクロールインジケーターのスタイル */
/* ======================================================= */
#scroll-indicator {
    position: fixed;
    /* 画面中央に配置 */
    top: 50%;
    left: 10%;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;

    z-index: 0;
    /* ロゴ（center-logo: z-index 201）より奥、タイムライン(z-index 50)より手前に */
    color: #888;
    /* テキストの色 */
    font-size: 1.2em;
    /* 初期状態は非表示 */
    transition: opacity 0.5s ease-out;
}

#scroll-indicator.visible {
    opacity: 1;
    /* 表示状態 */
}

#scroll-indicator.hidden {
    opacity: 1;
    pointer-events: none;
    /* クリック無効 */
}

.scroll-line {
    width: 80px;
    /* 線の長さ */
    height: 1px;
    background-color: #888;
    margin-right: 10px;

    /* アニメーションの対象 */
    position: relative;
    overflow: hidden;
}

/* 線のアニメーション: 短い線が左から右へ流れるように見せる */
.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, #888, transparent);

    /* スクロールを促すアニメーション */
    animation: flowLine 2s infinite ease-out 0.5s;
}

@keyframes flowLine {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(200%);
        /* 線幅の2倍移動させて画面を横切らせる */
    }
}

/* ======================================================= */
/* テキストとロゴのアニメーション */
/* ======================================================= */
.center-text,
.center-logo {
    position: absolute;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* テキストコンポーネント */
.center-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: none;
    /* テキストは文字単位で制御するため、コンテナのトランジションは無効に */
    font-size: 3em;
    flex-wrap: wrap;
    /* h1が次の行に来るように */
}

/* 各文字のスタイルと初期状態 */
.grid-text,
.center-text h1 {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    margin: 0 5px;
}

.grid-text img {
    height: 3em;
    width: auto;
    object-fit: contain;
}

/* 文字の出現アニメーション（JSで is-visible が付与されます） */
.center-text.is-visible {
    opacity: 1;
}

.center-text.is-visible .grid-text {
    opacity: 1;
    transform: translateY(0);
}

.center-text.is-visible .grid-text:nth-child(1) {
    transition-delay: 0.0s;
}

.center-text.is-visible .grid-text:nth-child(2) {
    transition-delay: 0.5s;
}

.center-text.is-visible .grid-text:nth-child(3) {
    transition-delay: 1.0s;
}

.center-text.is-visible .grid-text:nth-child(4) {
    transition-delay: 1.5s;
}

.center-text.is-visible .grid-text:nth-child(5) {
    transition-delay: 2.0s;
}

.center-text.is-visible .grid-text:nth-child(6) {
    transition-delay: 2.5s;
}

.center-text.is-visible .grid-text:nth-child(7) {
    transition-delay: 3.0s;
}

.center-text.is-visible h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 3.5s;
    font-size: 2em;
    margin-top: 20px;
    width: 100%;
    /* 次の行に来るように */
}

/* ロゴの出現アニメーション */
.center-logo.is-visible {
    opacity: 1;
    transition: opacity 3s ease-in 0.5s;
}

.center-logo img {
    max-width: 20vw;
}

/* ======================================================= */
/* ロゴのスクロール連動フェードアウト設定 */
/* ======================================================= */
.center-logo {
    /* 初期状態のトランジションを維持し、よりスムーズな制御のために調整 */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    /* 最前面を維持 */
}

/* タイムラインが重なるときに消える状態 */
.center-logo.fade-out-scroll {
    opacity: 0;
    /* ポインターイベントを無効にし、タイムラインを操作できるようにする */
    pointer-events: none;
}

/* タイムラインが離れるときに再表示される状態 */
.center-logo.fade-in-scroll {
    opacity: 1;
    pointer-events: all;
}

#scroll-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    overflow-y: hidden;
    cursor: grab;
}

/* ドラッグ中にカーソルを「掴んでいる」状態にするためのCSS */
#scroll-wrapper.active-dragging {
    cursor: grabbing !important;
}

.timeline-section {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: fit-content;
    height: 100%;
    padding: 5rem 2rem;
    margin-right: 100vw;
    position: relative;
    /* background-color: var(--color-light-bg); */
}

.timeline-section::before {
    position: absolute;
    content: "";
    top: 7.5rem;
    right: 50px;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
}

.timeline-group {

    /* 3. 各年代のグループの配置調整 */
    display: flex;
    flex-direction: row;
    /* 子要素を横に並べる */
    align-items: flex-start;
    box-sizing: border-box;

    /* 各グループの高さを画面幅いっぱいに設定 (縦書きなので'高さ'が横幅になる) */
    height: 100%;
    width: auto;

    padding: 2rem 4rem;

    /* グループ間の隙間を空けるための設定 */
    margin-right: 50px;
}

.timeline-group.active {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
}

.timeline-group.active .timeline-item {
    background-color: rgba(255, 255, 255, 1);
}

.timeline-group.active .timeline-item::before {
    position: absolute;
    content: "";
    top: 2.5rem;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
}

/* 数字の横書き（数字をまとめて表示） */
.timeline-section .yoko{
    text-combine-upright: all;
}

/* ======================================================= */
/* 左上に固定表示されるロゴのスタイル */
/* ======================================================= */
#fixed-logo-top-left {
    position: fixed;
    top: 20px;
    /* 上端からの余白 */
    left: 20px;
    /* 左端からの余白 */
    z-index: 250;
    /* 他の要素（ロゴ: 201, オープニング: 9999）より前面 */

    /* 初期状態は非表示 */
    opacity: 0;
    transition: opacity 1s ease-in;
    pointer-events: none;
    /* クリックを無効にする */
}

#fixed-logo-top-left img {
    /* 小さくて控えめなサイズに設定 */
    width: 80px;
    height: auto;
    /* 少し薄く表示 */
}

/* 表示クラス */
#fixed-logo-top-left.visible {
    opacity: 1;
}

/* ======================================================= */
/* スクロールインジケーターのスタイル（要素と一緒にスクロール） */
/* ======================================================= */

/* 1. 1945年グループを基準点とする（position: relative は維持） */
.timeline-group[data-year="1945"] {
    position: relative;
    z-index: 100;
}

/* 2. Scroll Line (線) の実装 - ::before */
.timeline-group[data-year="1945"]::before {
    content: "";
    position: absolute;
    /* ★修正点1: absolute に変更 */

    /* 親要素（1945グループ）内の配置 */
    top: 50%;
    /* 画面の縦方向中央に配置 */
    right: -10px;
    /* 画面の横方向中央に配置 */

    /* 位置の調整（画面中央の原点に合わせる） */
    transform: translate(-50%, -50%);

    /* 線の見た目 */
    width: 80px;
    height: 1px;
    background-color: var(--color-dark);
    margin-left: -55px;

    /* アニメーションの対象と非表示用のトランジション */
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s ease-out;

    /* 線のアニメーション（キーフレームは既存のものを利用） */
    animation: flowLine 2s infinite ease-out 0.5s;
    background: linear-gradient(to right, var(--color-dark) 50%, transparent 50%);
    background-size: 200% 100%;
}

/* 3. Scroll Text (テキスト) の実装 - ::after */
.timeline-group[data-year="1945"]::after {
    content: "Scroll";
    position: absolute;
    /* ★修正点2: absolute に変更 */

    /* 親要素（1945グループ）内の配置 */
    top: 50%;
    /* 画面の縦方向中央に配置 */
    right: -180px;
    /* 画面の横方向中央に配置 */
    writing-mode: horizontal-tb;

    /* 位置の調整（線の右側に配置） */
    transform: translate(50px, -50%);

    color: var(--color-dark);
    font-size: 1.2em;
    white-space: nowrap;

    /* 非表示用のトランジション */
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* 4. 非表示クラス */
.timeline-group[data-year="1945"].hide-indicator::before,
.timeline-group[data-year="1945"].hide-indicator::after {
    opacity: 0;
    pointer-events: none;
}

/* ======================================================= */
/* 固定年代インジケーターのスタイル */
/* ======================================================= */
#year-indicator {
    position: fixed;
    bottom: 30px;
    right: 2%;

    width: 400px;
    /* 固定幅 */
    height: 30px;

    display: block;
    z-index: 100;
    pointer-events: none;
}

/* ★ベースとなる水平線 (indicator-line) の設定は変更なし */
.indicator-line {
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ★年代表示テキストの配置 (ラベル位置を反転) */
.indicator-year-label {
    position: absolute;
    top: 100%;
    font-size: 0.8em;
    color: var(--color-dark);
}

.indicator-year-label.start {
    right: 0;
    transform: translateX(-50%);
}

.indicator-year-label.end {
    left: 0;
    transform: translateX(50%);
}

/* ★アクティブな年代を示す太いバー (current-year-bar) の設定は変更なし */
.current-year-bar {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 30px;
    height: 8px;
    background-color: var(--color-dark);
    //transform: translateX(0);
    transition: transform 0.1s linear;
    transform-origin: right center;
}

.current-year {
    text-align: center;
    color: var(--color-dark);
    line-height: 1;
}

/* ======================================================= */
/* 既存アニメーションの調整 */
/* ======================================================= */

/* is-visibleが付与されたグループ全体をアニメーションさせるために、
   グループ自体の初期状態も設定します。これによりコンテンツが表示されるまで何も見えなくなります。 */
.timeline-content-hidden {
    visibility: hidden !important;
    /* 描画を完全にブロック（レイアウトは維持） */
    opacity: 0 !important;
}

.timeline-group {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    /* グループ全体のフェードイン */
}

.timeline-group.is-visible {
    opacity: 1;
}

/* ======================================================= */
/* アニメーションの初期状態とスタイル */
/* ======================================================= */

/* 1. アニメーションを適用したいすべての要素を指定 */
.timeline-date,
.timeline-content h3,
.timeline-content p,
.timeline-content blockquote,
.timeline-content ul {
    /* 初期状態: 透明で、わずかに下に移動させておく */
    opacity: 0;
    transform: translateY(10px);
    /* すべての要素に共通のトランジションを設定 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

    /* アニメーション中に要素が意図せず画面外に移動しないようにするための保険 */
    transition-property: opacity, transform;
}

/* 2. 可視状態 (JSで is-visible が付与されたとき) */
/* タイムライングループが画面内に入ったときに子要素全てに is-visible を適用する前提で、
   子要素自身が is-visible クラスを持つ必要はありません。
   親のグループにクラスが付くことで子要素を制御します。 */
.timeline-group.is-visible .timeline-date,
.timeline-group.is-visible .timeline-content h3,
.timeline-group.is-visible .timeline-content p,
.timeline-group.is-visible .timeline-content blockquote,
.timeline-group.is-visible .timeline-content ul {
    opacity: 1;
    /* 不透明にする (フェードイン) */
    transform: translateY(0);
    /* 元の位置に戻す */
}

/* 3. 要素ごとの時間差設定 */
/* timeline-group の中に存在する順番で、遅延時間を設定し、時間差を生み出す */

/* timeline-date (最も古い要素) */
.timeline-group.is-visible .timeline-item .timeline-date {
    transition-delay: 0s;
    padding-block-end: 2rem;
}

/* h3 (イベントタイトル) */
.timeline-group.is-visible .timeline-content h3 {
    transition-delay: 0.1s;
}

/* p (イベント詳細) */
.timeline-group.is-visible .timeline-content p {
    transition-delay: 0.2s;
    line-height: 2;
}

/* blockquote (引用) */
.timeline-group.is-visible .timeline-content blockquote {
    transition-delay: 0.3s;
    line-height: 1.8;
}

/* ul.note-list */
.timeline-group.is-visible .timeline-content ul.note-list {
    transition-delay: 0.4s;
}

/* ul.note-list */
.timeline-group.is-visible .timeline-content ul.note-list li{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
}

/* ul.year-list */
.timeline-group.is-visible .timeline-content ul.year-list {
    transition-delay: 0.5s;
}

.timeline-group.is-visible .timeline-content ul.year-list li{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
}

/* ul.photo-list */
.timeline-group.is-visible .timeline-content ul.photo-list {
    transition-delay: 0.6s;
}

.timeline-item {
    /* 4. 各イベント項目の調整 */
    display: grid;
    vertical-align: top;

    /* 項目内のコンテンツは横書きに戻す */
    writing-mode: vertical-rl;

    border-left: none;
    /* 縦書きではこれは不要 */
}

/* コンテンツ内のテキスト（見出し、詳細、引用など）を横書きに戻す */
.timeline-content h3,
.timeline-content p,
.timeline-content blockquote,
.timeline-content ul {
    writing-mode: vertical-rl;
    /* 縦書きの親要素に適用された'white-space: nowrap;'の影響を打ち消す */
    white-space: normal;
    /* 縦書きで高さを失わないように幅を指定 */
}

.timeline-date {

    /* 日付部分を縦書きのまま、左端に配置 */
    writing-mode: vertical-rl;
    font-size: 1.4em;
    font-weight: bold;
    height: 100%;
    color: var(--color-accent);
}

.timeline-date br {
    display: none;
}

.timeline-content {
    writing-mode: vertical-rl;
    height: 100%;
}

.timeline-date {
    padding-top: 1rem;
}

.event-detail {
    padding-top: 12rem;
}

.event-title {
    position: relative;
    padding-top: 1.5rem;
    font-size: 1.2em;
    color: #0d47a1;
}

/* 大きな黒丸のビュレット */
.event-title::before {
    content: "●" !important;
    color: var(--color-accent);
    font-size: 1rem;
    position: absolute;
    right: 0;
    top: 0;
}

/* 引用 */
.quote {
    padding: 12rem 2rem 2rem;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.5;
    color: #444;
}

/* 補足リスト */
.note-list {
    list-style: none;
    font-size: 1em;
}

.note-list li {
    position: relative;
    padding-top: 1.5rem;
    line-height: 2;
}

/* 大きな黒丸のビュレット */
.note-list li::before {
    content: "●" !important;
    color: var(--color-accent);
    font-size: 1rem;
    position: absolute;
    right: 0;
    top: 0;
}

/* 補足リスト */
.year-list {
    list-style: none;
    font-size: 1em;
}

.year-list li {
    position: relative;
    line-height: 2;
    padding-top: 1.5rem;
    color: var(--color-year);
    font-size: .9em;
}

/* 大きな黒丸のビュレット */
.year-list li::before {
    content: "●" !important;
    color: var(--color-dark);
    position: absolute;
    right: -1px;
    top: 0;
    font-size: 1.1em;
}

.event-detail,
.note-list {
    padding-block-end: 1rem;
}

.photo-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding-top: 2rem;
    padding-block-end: 2rem;
    height: fit-content;
}

.photo-list li img {
    max-width: 300px;
    height: auto;
}

#footer-note {
    position: fixed;
    bottom: 20px; /* 下からの距離 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* ロゴなどより背面にくるよう調整 */
    
    /* 初期状態：非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    pointer-events: none;
}

/* 表示用クラス */
#footer-note.is-visible {
    opacity: 1;
    visibility: visible;
}

@media handheld,
only screen and (max-width: 1160px),
only screen and (max-device-width: 1160px) and (orientation:portrait) {
    #footer-note {
        left: 1rem;
        transform: unset;
    }
}

/* ======================================================= */
/* ブラウザのスクロールバー非表示設定 */
/* ======================================================= */

/* ウェブキット系 (Chrome, Safari, 新しいEdge) */
#scroll-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Firefox */
#scroll-wrapper {
    scrollbar-width: none;
    /* Firefoxの非表示 */
    -ms-overflow-style: none;
    /* IE/古いEdgeの非表示 */
}

/* スマートフォンサイト
---------------------------------------------------------------- */

@media handheld,
only screen and (max-width: 768px),
only screen and (max-device-width: 768px) and (orientation:portrait) {
    .center-logo img {
        max-width: 40vw;
    }

    #year-indicator {
        left: 2%;
    }

    .grid-item {
        width: 25vw;
    }

    .group-1 {
        left: -75vw;
    }

    .group-2 {
        right: -75vw;
    }

    /* ★新しいキーフレームアニメーション: グループ全体が左から右へ移動し、フェードアウト */
    @keyframes groupSlide {
        0% {
            opacity: 0;
            transform: translateX(0) scale(1);
        }

        1% {
            opacity: 1;
            /* 開始直後に表示 */
        }

        90% {
            opacity: 1;
            /* 画面右端外側に向けて移動 (グループの幅+画面幅分移動) */
            transform: translateX(calc(100vw + 75vw)) scale(1);
        }

        100% {
            opacity: 0;
            /* 最後にフェードアウト */
            transform: translateX(calc(100vw + 75vw)) scale(1);
        }
    }

    /* --- グループ 2: 右から左へスライド (逆方向) --- */
    @keyframes reverseSlide {
        0% {
            opacity: 0;
            /* 開始位置を右端外側に設定 */
            transform: translateX(0) scale(1);
        }

        1% {
            opacity: 1;
            /* 開始直後に表示 */
        }

        90% {
            opacity: 1;
            /* 画面左端外側に向けて移動 */
            transform: translateX(calc(-100vw - 75vw)) scale(1);
        }

        100% {
            opacity: 0;
            /* 最後にフェードアウト */
            transform: translateX(calc(-100vw - 75vw)) scale(1);
        }
    }

    .grid-text img {
        height: 2em;
    }

    .center-text.is-visible h1 {
        font-size: 1.4em;
    }
    
    #footer-note {
        bottom: 5px;
        left: 90px;
        font-size: .8rem;
    }

}