/* Hero Section - 構造化設計 */
/* ============================================ */
/* 基本配置（全スライド共通） */
/* ============================================ */

/* === Hero Section === */
.fv {
    position: relative;
    height: 70vw;
    background-color: #000000;
    overflow: hidden;
}

/* === Hero Slider === */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* === スライド内要素（基本配置）=== */

/* 背景レイヤー */
.slide-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide-bg-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 英語テキスト */
.fv-text-pattern {
    position: fixed;
    top: 10vh;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    max-width: 1200px;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
}

/* アクティブなスライドの英語テキストのみ表示 */
.hero-slide.active .fv-text-pattern {
    opacity: 1;
    visibility: visible;
}

.fv-text-pattern img {
    width: 100%;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1315.47 / 226.8; /* SVGのviewBoxに基づくアスペクト比 */
}

/* 車画像 */
.slide-car-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
}

.slide-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 日本語コピー */
.fv-copy-02 {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    z-index: 200;
}

.fv-copy-02 img {
    width: 100%;
    height: auto;
}

/* 日本語コピーの鼓動エフェクト用の疑似要素 */
.fv-copy-02::before,
.fv-copy-02::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
}

.fv-copy-02::before {
    background-image: url('../img/top/hero_copy02.svg?v=20251030');
    animation: slideHeartbeat1 2.5s step-end infinite;
    z-index: 1;
}

.fv-copy-02::after {
    background-image: url('../img/top/hero_copy02.svg?v=20251030');
    animation: slideHeartbeat2 2.5s step-end infinite;
    z-index: 2;
}

/* 鼓動グリッチエフェクト - Red channel (slide用) */
@keyframes slideHeartbeat1 {
    0%, 100% { opacity: 0; }
    4% { opacity: 0.8; transform: translate(-10px, 2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    4.2% { opacity: 0; }
    8% { opacity: 0.9; transform: translate(12px, -2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    8.3% { opacity: 0; }
    20% { opacity: 0.8; transform: translate(-10px, 2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    20.2% { opacity: 0; }
    24% { opacity: 0.9; transform: translate(12px, -2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    24.3% { opacity: 0; }
    40% { opacity: 0.8; transform: translate(-10px, 2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    40.2% { opacity: 0; }
    44% { opacity: 0.9; transform: translate(12px, -2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    44.3% { opacity: 0; }
    60% { opacity: 0.8; transform: translate(-10px, 2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    60.2% { opacity: 0; }
    64% { opacity: 0.9; transform: translate(12px, -2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    64.3% { opacity: 0; }
    80% { opacity: 0.8; transform: translate(-10px, 2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.4); }
    80.2% { opacity: 0; }
    84% { opacity: 0.9; transform: translate(12px, -2px); filter: sepia(1) saturate(10) hue-rotate(-50deg) brightness(1.5); }
    84.3% { opacity: 0; }
}

/* 鼓動グリッチエフェクト - Cyan channel (slide用) */
@keyframes slideHeartbeat2 {
    0%, 100% { opacity: 0; }
    4.1% { opacity: 0.8; transform: translate(9px, -2px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    4.3% { opacity: 0; }
    8.1% { opacity: 0.9; transform: translate(-11px, 3px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    8.4% { opacity: 0; }
    20.1% { opacity: 0.8; transform: translate(9px, -2px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    20.3% { opacity: 0; }
    24.1% { opacity: 0.9; transform: translate(-11px, 3px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    24.4% { opacity: 0; }
    40.1% { opacity: 0.8; transform: translate(9px, -2px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    40.3% { opacity: 0; }
    44.1% { opacity: 0.9; transform: translate(-11px, 3px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    44.4% { opacity: 0; }
    60.1% { opacity: 0.8; transform: translate(9px, -2px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    60.3% { opacity: 0; }
    64.1% { opacity: 0.9; transform: translate(-11px, 3px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    64.4% { opacity: 0; }
    80.1% { opacity: 0.8; transform: translate(9px, -2px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.4); }
    80.3% { opacity: 0; }
    84.1% { opacity: 0.9; transform: translate(-11px, 3px); filter: sepia(1) saturate(10) hue-rotate(120deg) brightness(1.5); }
    84.4% { opacity: 0; }
}

/* ロゴ */
.fv-logo {
    position: absolute;
    top: 20%;
    left: calc(50% - 75px);
    width: 150px;
    z-index: 300;
}

.fv-logo img {
    width: 100%;
    height: auto;
}

/* === 走査線エフェクト === */
.fv-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 51%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 1000;
    animation: scanlines 8s linear infinite;
    opacity: 0.3;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* === 車画像のエフェクト（明滅 + 彩度変化） === */
.slide-car-image img {
    animation: carFlickerSaturate 4s ease-in-out infinite;
}

@keyframes carFlickerSaturate {
    0% {
        opacity: 1;
        filter: saturate(1);
    }
    50% {
        opacity: 0.97;
        filter: saturate(1.6);
    }
    100% {
        opacity: 1;
        filter: saturate(1);
    }
}

/* === 彩度変化エフェクト（背景用） === */
.slide-bg-layer img {
    animation: saturationChange 4s ease-in-out infinite;
}

@keyframes saturationChange {
    0% {
        filter: saturate(1);
    }
    50% {
        filter: saturate(0.3);
    }
    100% {
        filter: saturate(1);
    }
}

/* === 背景にグリッチ中を適応（常時表示・無限ループ） === */
.slide-bg-layer::before,
.slide-bg-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
}

.slide-bg-layer::before {
    animation: slideBgGlitchMediumBefore 3s linear infinite;
    filter: hue-rotate(120deg);
}

.slide-bg-layer::after {
    animation: slideBgGlitchMediumAfter 3s linear infinite;
    filter: hue-rotate(240deg);
}

/* 背景グリッチ中 - Before（opening-animation.cssのglitch-medium-beforeベース） */
@keyframes slideBgGlitchMediumBefore {
    0%, 66.7%, 100% { opacity: 0; clip-path: none; transform: none; }
    /* 1秒間のグリッチ効果（0-33.3%） */
    0% { opacity: 1; clip-path: polygon(0% 45%, 100% 45%, 100% 50%, 0% 50%); transform: translate(-2%, 0.15%); }
    3.3% { opacity: 1; clip-path: polygon(0% 12%, 100% 12%, 100% 17%, 0% 17%); transform: translate(3%, -0.2%); }
    6.7% { opacity: 1; clip-path: polygon(0% 67%, 100% 67%, 100% 71%, 0% 71%); transform: translate(-1.5%, 0.25%); }
    10% { opacity: 1; clip-path: polygon(0% 33%, 100% 33%, 100% 38%, 0% 38%); transform: translate(4%, -0.1%); }
    13.3% { opacity: 1; clip-path: polygon(0% 78%, 100% 78%, 100% 83%, 0% 83%); transform: translate(-2.5%, 0.2%); }
    16.7% { opacity: 1; clip-path: polygon(0% 8%, 100% 8%, 100% 13%, 0% 13%); transform: translate(2%, -0.15%); }
    20% { opacity: 1; clip-path: polygon(0% 54%, 100% 54%, 100% 59%, 0% 59%); transform: translate(-3%, 0.1%); }
    23.3% { opacity: 0.8; clip-path: polygon(0% 25%, 100% 25%, 100% 30%, 0% 30%); transform: translate(2.5%, -0.1%); }
    26.7% { opacity: 0.6; clip-path: polygon(0% 60%, 100% 60%, 100% 65%, 0% 65%); transform: translate(-1%, 0.05%); }
    30% { opacity: 0.3; clip-path: polygon(0% 40%, 100% 40%, 100% 45%, 0% 45%); transform: translate(1%, 0%); }
    33.3% { opacity: 0; clip-path: none; transform: none; }
}

/* 背景グリッチ中 - After（opening-animation.cssのglitch-medium-afterベース） */
@keyframes slideBgGlitchMediumAfter {
    0%, 66.7%, 100% { opacity: 0; clip-path: none; transform: none; }
    /* 1秒間のグリッチ効果（0-33.3%） */
    0% { opacity: 1; clip-path: polygon(0% 22%, 100% 22%, 100% 27%, 0% 27%); transform: translate(2.5%, -0.2%); }
    3.3% { opacity: 1; clip-path: polygon(0% 65%, 100% 65%, 100% 70%, 0% 70%); transform: translate(-3%, 0.15%); }
    6.7% { opacity: 1; clip-path: polygon(0% 5%, 100% 5%, 100% 10%, 0% 10%); transform: translate(2%, 0.25%); }
    10% { opacity: 1; clip-path: polygon(0% 51%, 100% 51%, 100% 56%, 0% 56%); transform: translate(-4%, -0.1%); }
    13.3% { opacity: 1; clip-path: polygon(0% 89%, 100% 89%, 100% 94%, 0% 94%); transform: translate(2.5%, 0.2%); }
    16.7% { opacity: 1; clip-path: polygon(0% 37%, 100% 37%, 100% 42%, 0% 42%); transform: translate(-2%, -0.15%); }
    20% { opacity: 1; clip-path: polygon(0% 71%, 100% 71%, 100% 76%, 0% 76%); transform: translate(3%, 0.1%); }
    23.3% { opacity: 0.8; clip-path: polygon(0% 15%, 100% 15%, 100% 20%, 0% 20%); transform: translate(-2%, 0.05%); }
    26.7% { opacity: 0.6; clip-path: polygon(0% 55%, 100% 55%, 100% 60%, 0% 60%); transform: translate(1.5%, -0.05%); }
    30% { opacity: 0.3; clip-path: polygon(0% 80%, 100% 80%, 100% 85%, 0% 85%); transform: translate(-1%, 0%); }
    33.3% { opacity: 0; clip-path: none; transform: none; }
}

/* 各スライドの背景画像を疑似要素に設定 */
/* slide1は背景グリッチを無効化（車に移動） */
[data-slide="1"] .slide-bg-layer::before,
[data-slide="1"] .slide-bg-layer::after {
    display: none;
}

[data-slide="2"] .slide-bg-layer::before,
[data-slide="2"] .slide-bg-layer::after {
    background-image: url('../img/top/bg_img02.png?v=20251030');
}

[data-slide="3"] .slide-bg-layer::before,
[data-slide="3"] .slide-bg-layer::after {
    background-image: url('../img/top/bg_img03.png?v=20251030');
}

/* === slide1の車にグリッチ中を適応 === */
[data-slide="1"] .slide-car-image::before,
[data-slide="1"] .slide-car-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/top/FV_img01.png?v=20251030');
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
}

[data-slide="1"] .slide-car-image::before {
    animation: slideBgGlitchMediumBefore 3s linear infinite;
    filter: hue-rotate(120deg);
}

[data-slide="1"] .slide-car-image::after {
    animation: slideBgGlitchMediumAfter 3s linear infinite;
    filter: hue-rotate(240deg);
}

/* === CRT Turn-off Effect === */
.fv-text-pattern.crt-off {
    animation: crtTurnOff 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crtTurnOff {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(1) scaleX(1);
        filter: brightness(1);
    }
    20% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scaleY(1) scaleX(1);
        filter: brightness(1.5) contrast(1.5);
    }
    40% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scaleY(0.8) scaleX(1.05);
        filter: brightness(2) contrast(2);
    }
    60% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scaleY(0.1) scaleX(1.1);
        filter: brightness(3) contrast(3);
    }
    80% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scaleY(0.01) scaleX(0.95);
        filter: brightness(4) contrast(5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0) scaleX(0);
        filter: brightness(5) contrast(0);
    }
}

/* ============================================ */
/* スライドごとの個別調整 */
/* ============================================ */

/* ===== スライド1 ===== */
/* 背景 */
[data-slide="1"] .slide-bg-layer {
    left: -10%;
    width: 120%;
    height: 120%;
}

/* 英語テキスト */
[data-slide="1"] .fv-text-pattern {
    /* デフォルト配置 */
}

/* 車 */
[data-slide="1"] .slide-car-image {
    left: -10%;
    width: 120%;
    height: 120%;
}

/* 日本語コピー */
[data-slide="1"] .fv-copy-02 {
    /* bottom: 2rem; (デフォルト) */
}

/* ロゴ */
[data-slide="1"] .fv-logo {
    top: 40%;
    left: auto;
    right: 5vw;
    width: 100px;
}

/* ===== スライド2 ===== */
/* 背景：120%拡大 */
[data-slide="2"] .slide-bg-layer {
    width: 120%;
    left: 0;
}

[data-slide="2"] .slide-bg-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 英語テキスト：白色 + スクリーンブレンド（スライド1） */
[data-slide="1"] .fv-text-pattern {
    mix-blend-mode: screen;
}

[data-slide="1"] .fv-text-pattern img {
    filter: brightness(0) saturate(100%) invert(100%);
    opacity: 0.3;
}

/* 英語テキスト：白色 + オーバーレイブレンド（スライド2） */
[data-slide="2"] .fv-text-pattern {
    mix-blend-mode: overlay;
}

[data-slide="2"] .fv-text-pattern img {
    filter: brightness(0) saturate(100%) invert(100%);
}

/* 車：120%拡大 */
[data-slide="2"] .slide-car-image {
    width: 120%;
    left: 0;
}

[data-slide="2"] .slide-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 日本語コピー：白色 */
[data-slide="2"] .fv-copy-02 img {
    filter: brightness(0) saturate(100%) invert(100%);
}

/* ロゴ：右側配置 */
[data-slide="2"] .fv-logo {
    top: 40%;
    left: auto;
    right: 5vw;
    width: 100px;
}

/* ===== スライド3 ===== */
/* 背景 */
[data-slide="3"] .slide-bg-layer {
    /* 調整が必要な場合はここに追加 */
}

/* 英語テキスト：オレンジ色 + スクリーンブレンド */
[data-slide="3"] .fv-text-pattern {
    mix-blend-mode: screen;
}

[data-slide="3"] .fv-text-pattern img {
    filter: brightness(0) saturate(100%) invert(54%) sepia(89%) saturate(2449%) hue-rotate(1deg) brightness(102%) contrast(101%);
}

/* 車 */
[data-slide="3"] .slide-car-image {
    /* 調整が必要な場合はここに追加 */
}

/* 日本語コピー：オレンジ色 */
[data-slide="3"] .fv-copy-02 img {
    filter: brightness(0) saturate(100%) invert(54%) sepia(89%) saturate(2449%) hue-rotate(1deg) brightness(102%) contrast(101%);
}

/* ロゴ：スライド2と同じ位置 */
[data-slide="3"] .fv-logo {
    top: 40%;
    left: auto;
    right: 5vw;
    width: 100px;
}

/* ============================================ */
/* SP対応 */
/* ============================================ */
@media (max-width: 768px) {
    /* === 基本配置の上書き === */
    .fv {
        height: 100vh;
    }

    .hero-slider {
        height: 100vh;
    }

    .hero-slide {
        height: 100vh !important;
    }

    .fv-text-pattern {
        position: fixed;
        width: 30vw;
        top: 0 !important;
        left: 0 !important;
        height: 100vh;
        transform: none !important;
    }

    .fv-text-pattern img {
        aspect-ratio: auto;
    }

    .fv-text-pattern.crt-off {
        animation: crtTurnOffSP 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        transform-origin: center center;
    }

    @keyframes crtTurnOffSP {
        0% {
            opacity: 1;
            transform: scaleX(1);
            filter: brightness(1);
        }
        20% {
            opacity: 0.8;
            transform: scaleX(1);
            filter: brightness(1.5) contrast(1.5);
        }
        40% {
            opacity: 0.6;
            transform: scaleX(0.9);
            filter: brightness(2) contrast(2);
        }
        60% {
            opacity: 0.3;
            transform: scaleX(0.1);
            filter: brightness(3) contrast(3);
        }
        80% {
            opacity: 0.1;
            transform: scaleX(0.01);
            filter: brightness(4) contrast(5);
        }
        100% {
            opacity: 0;
            transform: scaleX(0);
            filter: brightness(5) contrast(0);
        }
    }

    .slide-car-image {
        width: 300%;
        left: -110%;
        top: 0;
        height: 100%;
        position: absolute;
    }

    .slide-car-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slide-bg-layer {
        width: 300%;
        height: 100%;
        left: -110%;
        top: 0;
        position: absolute;
    }

    .slide-bg-layer img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .fv-copy-02 {
        width: 14vw !important;
        height: 40vw;
        top: 27vw;
        left: 50%;
        transform: translateX(-50%);
        bottom: auto;
    }

    /* SP用：日本語コピーの鼓動エフェクト背景画像 */
    .fv-copy-02::before,
    .fv-copy-02::after {
        background-image: url('../img/top/hero_copy02_sp.svg?v=20251030') !important;
    }

    .fv-logo {
        top: 1.5rem;
        width: 15vw;
        left: calc(50% - 7.5vw);
    }

    /* === SP スライドごとの個別調整 === */

    /* スライド1 */
    [data-slide="1"] .fv-logo {
        top: 1.5rem;
        width: 15vw;
        left: calc(50% - 7.5vw);
        right: auto;
    }

    [data-slide="1"] .slide-car-image {
        /* 調整が必要な場合はここに追加 */
    }

    /* スライド2 */
    [data-slide="2"] .fv-logo {
        top: 1.5rem;
        width: 15vw;
        left: calc(50% - 7.5vw);
        right: auto;
    }

    [data-slide="2"] .slide-car-image {
        /* 背景と同じ位置（-110%）に統一 */
    }

    /* スライド3：ロゴ位置をスライド1と同じに */
    [data-slide="3"] .fv-logo {
        top: 1.5rem;
        width: 15vw;
        left: calc(50% - 7.5vw);
        right: auto;
    }

    /* スライド3：車画像と背景画像の位置調整 */
    [data-slide="3"] .slide-car-image {
        width: 210%;
        left: -40%;
    }

    [data-slide="3"] .slide-bg-layer {
        width: 210%;
        left: -40%;
    }
}

/* === PC/SP共通 スライド切り替え時のグリッチトランジション === */
/* 前のスライドをフェードアウト */
.slide-transition-out .slide-bg-layer img,
.slide-transition-out .slide-car-image img {
    animation: slideGlitchOut 0.4s linear forwards;
}

/* 次のスライドをフェードイン */
.slide-transition-in .slide-bg-layer img,
.slide-transition-in .slide-car-image img {
    animation: slideGlitchIn 0.4s linear forwards;
}

/* オープニング→スライド2の控えめなトランジション */
.opening-transition-out.opening-bg-layer img,
.opening-transition-out.opening-car-image img {
    animation: openingGlitchOut 0.4s linear forwards;
}

.opening-transition-in .slide-bg-layer img,
.opening-transition-in .slide-car-image img {
    animation: openingGlitchIn 0.4s linear forwards;
}

/* グリッチフェードアウト - 超派手 */
@keyframes slideGlitchOut {
    0% {
        opacity: 1;
        filter: brightness(1) contrast(1) saturate(1);
        transform: translate(0, 0) scale(1);
    }
    5% {
        opacity: 0.95;
        filter: brightness(2) contrast(3) saturate(5) hue-rotate(90deg);
        transform: translate(-8px, 3px) scale(1.02);
    }
    10% {
        opacity: 0.9;
        filter: brightness(3) contrast(5) saturate(8) hue-rotate(-120deg);
        transform: translate(12px, -5px) scale(0.98);
    }
    15% {
        opacity: 0.85;
        filter: brightness(2.5) contrast(4) saturate(7) hue-rotate(150deg);
        transform: translate(-10px, 6px) scale(1.03);
    }
    20% {
        opacity: 0.8;
        filter: brightness(3.5) contrast(6) saturate(9) hue-rotate(-90deg);
        transform: translate(15px, -4px) scale(0.97);
    }
    25% {
        opacity: 0.75;
        filter: brightness(4) contrast(7) saturate(10) hue-rotate(180deg);
        transform: translate(-12px, 7px) scale(1.04);
    }
    30% {
        opacity: 0.7;
        filter: brightness(4.5) contrast(8) saturate(11) hue-rotate(-60deg);
        transform: translate(18px, -6px) scale(0.96);
    }
    35% {
        opacity: 0.65;
        filter: brightness(5) contrast(9) saturate(12) hue-rotate(210deg);
        transform: translate(-14px, 5px) scale(1.05);
    }
    40% {
        opacity: 0.6;
        filter: brightness(5.5) contrast(10) saturate(13) hue-rotate(-30deg);
        transform: translate(16px, -8px) scale(0.95);
    }
    45% {
        opacity: 0.5;
        filter: brightness(6) contrast(11) saturate(14) hue-rotate(240deg);
        transform: translate(-11px, 9px) scale(1.06);
    }
    50% {
        opacity: 0.4;
        filter: brightness(6.5) contrast(12) saturate(15) hue-rotate(-150deg);
        transform: translate(20px, -7px) scale(0.94);
    }
    55% {
        opacity: 0.35;
        filter: brightness(7) contrast(13) saturate(16) hue-rotate(270deg);
        transform: translate(-15px, 6px) scale(1.07);
    }
    60% {
        opacity: 0.3;
        filter: brightness(7.5) contrast(14) saturate(17) hue-rotate(-180deg);
        transform: translate(17px, -5px) scale(0.93);
    }
    65% {
        opacity: 0.25;
        filter: brightness(8) contrast(15) saturate(18) hue-rotate(300deg);
        transform: translate(-13px, 8px) scale(1.08);
    }
    70% {
        opacity: 0.2;
        filter: brightness(8.5) contrast(16) saturate(19) hue-rotate(-210deg);
        transform: translate(14px, -6px) scale(0.92);
    }
    75% {
        opacity: 0.15;
        filter: brightness(9) contrast(17) saturate(20) hue-rotate(330deg);
        transform: translate(-10px, 5px) scale(1.09);
    }
    80% {
        opacity: 0.1;
        filter: brightness(9.5) contrast(18) saturate(21) hue-rotate(-240deg);
        transform: translate(12px, -4px) scale(0.91);
    }
    85% {
        opacity: 0.07;
        filter: brightness(10) contrast(19) saturate(22) hue-rotate(360deg);
        transform: translate(-8px, 4px) scale(1.1);
    }
    90% {
        opacity: 0.04;
        filter: brightness(10.5) contrast(20) saturate(23) hue-rotate(-270deg);
        transform: translate(10px, -3px) scale(0.9);
    }
    95% {
        opacity: 0.02;
        filter: brightness(11) contrast(21) saturate(24) hue-rotate(390deg);
        transform: translate(-6px, 2px) scale(1.11);
    }
    100% {
        opacity: 0;
        filter: brightness(12) contrast(22) saturate(25) hue-rotate(0deg);
        transform: translate(0, 0) scale(1);
    }
}

/* グリッチフェードイン - 超派手 */
@keyframes slideGlitchIn {
    0% {
        opacity: 0;
        filter: brightness(12) contrast(22) saturate(25) hue-rotate(390deg);
        transform: translate(-6px, 2px) scale(1.11);
    }
    5% {
        opacity: 0.02;
        filter: brightness(11) contrast(21) saturate(24) hue-rotate(-270deg);
        transform: translate(10px, -3px) scale(0.9);
    }
    10% {
        opacity: 0.04;
        filter: brightness(10.5) contrast(20) saturate(23) hue-rotate(360deg);
        transform: translate(-8px, 4px) scale(1.1);
    }
    15% {
        opacity: 0.07;
        filter: brightness(10) contrast(19) saturate(22) hue-rotate(-240deg);
        transform: translate(12px, -4px) scale(0.91);
    }
    20% {
        opacity: 0.1;
        filter: brightness(9.5) contrast(18) saturate(21) hue-rotate(330deg);
        transform: translate(-10px, 5px) scale(1.09);
    }
    25% {
        opacity: 0.15;
        filter: brightness(9) contrast(17) saturate(20) hue-rotate(-210deg);
        transform: translate(14px, -6px) scale(0.92);
    }
    30% {
        opacity: 0.2;
        filter: brightness(8.5) contrast(16) saturate(19) hue-rotate(300deg);
        transform: translate(-13px, 8px) scale(1.08);
    }
    35% {
        opacity: 0.25;
        filter: brightness(8) contrast(15) saturate(18) hue-rotate(-180deg);
        transform: translate(17px, -5px) scale(0.93);
    }
    40% {
        opacity: 0.3;
        filter: brightness(7.5) contrast(14) saturate(17) hue-rotate(270deg);
        transform: translate(-15px, 6px) scale(1.07);
    }
    45% {
        opacity: 0.35;
        filter: brightness(7) contrast(13) saturate(16) hue-rotate(-150deg);
        transform: translate(20px, -7px) scale(0.94);
    }
    50% {
        opacity: 0.4;
        filter: brightness(6.5) contrast(12) saturate(15) hue-rotate(240deg);
        transform: translate(-11px, 9px) scale(1.06);
    }
    55% {
        opacity: 0.5;
        filter: brightness(6) contrast(11) saturate(14) hue-rotate(-30deg);
        transform: translate(16px, -8px) scale(0.95);
    }
    60% {
        opacity: 0.6;
        filter: brightness(5.5) contrast(10) saturate(13) hue-rotate(210deg);
        transform: translate(-14px, 5px) scale(1.05);
    }
    65% {
        opacity: 0.65;
        filter: brightness(5) contrast(9) saturate(12) hue-rotate(-60deg);
        transform: translate(18px, -6px) scale(0.96);
    }
    70% {
        opacity: 0.7;
        filter: brightness(4.5) contrast(8) saturate(11) hue-rotate(180deg);
        transform: translate(-12px, 7px) scale(1.04);
    }
    75% {
        opacity: 0.75;
        filter: brightness(4) contrast(7) saturate(10) hue-rotate(-90deg);
        transform: translate(15px, -4px) scale(0.97);
    }
    80% {
        opacity: 0.8;
        filter: brightness(3.5) contrast(6) saturate(9) hue-rotate(150deg);
        transform: translate(-10px, 6px) scale(1.03);
    }
    85% {
        opacity: 0.85;
        filter: brightness(3) contrast(5) saturate(8) hue-rotate(-120deg);
        transform: translate(12px, -5px) scale(0.98);
    }
    90% {
        opacity: 0.9;
        filter: brightness(2.5) contrast(4) saturate(7) hue-rotate(90deg);
        transform: translate(-8px, 3px) scale(1.02);
    }
    95% {
        opacity: 0.95;
        filter: brightness(2) contrast(3) saturate(5) hue-rotate(-60deg);
        transform: translate(6px, -2px) scale(0.99);
    }
    100% {
        opacity: 1;
        filter: brightness(1) contrast(1) saturate(1);
        transform: translate(0, 0) scale(1);
    }
}

/* === オープニング→スライド2用の控えめなグリッチトランジション === */
/* 控えめなグリッチフェードアウト */
@keyframes openingGlitchOut {
    0% {
        opacity: 1;
        filter: brightness(1) contrast(1) saturate(1);
        transform: translate(0, 0) scale(1);
    }
    10% {
        opacity: 0.9;
        filter: brightness(1.5) contrast(2) saturate(2) hue-rotate(45deg);
        transform: translate(-3px, 2px) scale(1.01);
    }
    20% {
        opacity: 0.8;
        filter: brightness(2) contrast(2.5) saturate(3) hue-rotate(-60deg);
        transform: translate(4px, -2px) scale(0.99);
    }
    30% {
        opacity: 0.7;
        filter: brightness(1.8) contrast(2.2) saturate(2.5) hue-rotate(90deg);
        transform: translate(-3px, 3px) scale(1.01);
    }
    40% {
        opacity: 0.6;
        filter: brightness(2.2) contrast(3) saturate(3.5) hue-rotate(-45deg);
        transform: translate(5px, -3px) scale(0.98);
    }
    50% {
        opacity: 0.5;
        filter: brightness(2.5) contrast(3.5) saturate(4) hue-rotate(120deg);
        transform: translate(-4px, 4px) scale(1.02);
    }
    60% {
        opacity: 0.4;
        filter: brightness(2.8) contrast(4) saturate(4.5) hue-rotate(-90deg);
        transform: translate(6px, -2px) scale(0.97);
    }
    70% {
        opacity: 0.3;
        filter: brightness(3) contrast(4.5) saturate(5) hue-rotate(150deg);
        transform: translate(-4px, 3px) scale(1.02);
    }
    80% {
        opacity: 0.2;
        filter: brightness(3.2) contrast(5) saturate(5.5) hue-rotate(-120deg);
        transform: translate(4px, -2px) scale(0.98);
    }
    90% {
        opacity: 0.1;
        filter: brightness(3.5) contrast(5.5) saturate(6) hue-rotate(180deg);
        transform: translate(-3px, 2px) scale(1.01);
    }
    100% {
        opacity: 0;
        filter: brightness(4) contrast(6) saturate(7) hue-rotate(0deg);
        transform: translate(0, 0) scale(1);
    }
}

/* 控えめなグリッチフェードイン */
@keyframes openingGlitchIn {
    0% {
        opacity: 0;
        filter: brightness(4) contrast(6) saturate(7) hue-rotate(180deg);
        transform: translate(-3px, 2px) scale(1.01);
    }
    10% {
        opacity: 0.1;
        filter: brightness(3.5) contrast(5.5) saturate(6) hue-rotate(-120deg);
        transform: translate(4px, -2px) scale(0.98);
    }
    20% {
        opacity: 0.2;
        filter: brightness(3.2) contrast(5) saturate(5.5) hue-rotate(150deg);
        transform: translate(-4px, 3px) scale(1.02);
    }
    30% {
        opacity: 0.3;
        filter: brightness(3) contrast(4.5) saturate(5) hue-rotate(-90deg);
        transform: translate(6px, -2px) scale(0.97);
    }
    40% {
        opacity: 0.4;
        filter: brightness(2.8) contrast(4) saturate(4.5) hue-rotate(120deg);
        transform: translate(-4px, 4px) scale(1.02);
    }
    50% {
        opacity: 0.5;
        filter: brightness(2.5) contrast(3.5) saturate(4) hue-rotate(-45deg);
        transform: translate(5px, -3px) scale(0.98);
    }
    60% {
        opacity: 0.6;
        filter: brightness(2.2) contrast(3) saturate(3.5) hue-rotate(90deg);
        transform: translate(-3px, 3px) scale(1.01);
    }
    70% {
        opacity: 0.7;
        filter: brightness(2) contrast(2.5) saturate(3) hue-rotate(-60deg);
        transform: translate(4px, -2px) scale(0.99);
    }
    80% {
        opacity: 0.8;
        filter: brightness(1.8) contrast(2.2) saturate(2.5) hue-rotate(45deg);
        transform: translate(-3px, 2px) scale(1.01);
    }
    90% {
        opacity: 0.9;
        filter: brightness(1.5) contrast(2) saturate(2) hue-rotate(-30deg);
        transform: translate(2px, -1px) scale(0.99);
    }
    100% {
        opacity: 1;
        filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
        transform: translate(0, 0) scale(1);
    }
}

/* 色分解エフェクト用の疑似要素 */
.slide-transition-out .slide-bg-layer::before,
.slide-transition-out .slide-bg-layer::after,
.slide-transition-out .slide-car-image::before,
.slide-transition-out .slide-car-image::after,
.slide-transition-in .slide-bg-layer::before,
.slide-transition-in .slide-bg-layer::after,
.slide-transition-in .slide-car-image::before,
.slide-transition-in .slide-car-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.slide-transition-out .slide-bg-layer::before,
.slide-transition-in .slide-bg-layer::before {
    animation: rgbGlitch1 0.4s linear forwards;
}

.slide-transition-out .slide-bg-layer::after,
.slide-transition-in .slide-bg-layer::after {
    animation: rgbGlitch2 0.4s linear forwards;
}

.slide-transition-out .slide-car-image::before,
.slide-transition-in .slide-car-image::before {
    animation: rgbGlitch1 0.4s linear forwards;
}

.slide-transition-out .slide-car-image::after,
.slide-transition-in .slide-car-image::after {
    animation: rgbGlitch2 0.4s linear forwards;
}

/* オープニング→スライド2用の控えめなRGB分離エフェクト */
.opening-transition-out.opening-bg-layer::before,
.opening-transition-out.opening-bg-layer::after,
.opening-transition-out.opening-car-image::before,
.opening-transition-out.opening-car-image::after,
.opening-transition-in .slide-bg-layer::before,
.opening-transition-in .slide-bg-layer::after,
.opening-transition-in .slide-car-image::before,
.opening-transition-in .slide-car-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.opening-transition-out.opening-bg-layer::before,
.opening-transition-in .slide-bg-layer::before {
    animation: rgbGlitchMild1 0.4s linear forwards;
}

.opening-transition-out.opening-bg-layer::after,
.opening-transition-in .slide-bg-layer::after {
    animation: rgbGlitchMild2 0.4s linear forwards;
}

.opening-transition-out.opening-car-image::before,
.opening-transition-in .slide-car-image::before {
    animation: rgbGlitchMild1 0.4s linear forwards;
}

.opening-transition-out.opening-car-image::after,
.opening-transition-in .slide-car-image::after {
    animation: rgbGlitchMild2 0.4s linear forwards;
}

/* RGB分離グリッチ - 超激派手 */
@keyframes rgbGlitch1 {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    5% { opacity: 0.95; transform: translate(-25px, 10px) scale(1.05); filter: hue-rotate(120deg) brightness(5) saturate(10) contrast(8); }
    10% { opacity: 1; transform: translate(30px, -15px) scale(0.95); filter: hue-rotate(120deg) brightness(6) saturate(12) contrast(10); }
    15% { opacity: 0.9; transform: translate(-28px, 18px) scale(1.08); filter: hue-rotate(120deg) brightness(5.5) saturate(11) contrast(9); }
    20% { opacity: 1; transform: translate(35px, -12px) scale(0.92); filter: hue-rotate(120deg) brightness(7) saturate(14) contrast(12); }
    25% { opacity: 0.95; transform: translate(-32px, 22px) scale(1.1); filter: hue-rotate(120deg) brightness(6.5) saturate(13) contrast(11); }
    30% { opacity: 1; transform: translate(40px, -18px) scale(0.9); filter: hue-rotate(120deg) brightness(8) saturate(16) contrast(14); }
    35% { opacity: 0.9; transform: translate(-35px, 15px) scale(1.12); filter: hue-rotate(120deg) brightness(7.5) saturate(15) contrast(13); }
    40% { opacity: 1; transform: translate(38px, -20px) scale(0.88); filter: hue-rotate(120deg) brightness(9) saturate(18) contrast(16); }
    45% { opacity: 0.95; transform: translate(-30px, 25px) scale(1.15); filter: hue-rotate(120deg) brightness(8.5) saturate(17) contrast(15); }
    50% { opacity: 1; transform: translate(45px, -22px) scale(0.85); filter: hue-rotate(120deg) brightness(10) saturate(20) contrast(18); }
    55% { opacity: 0.9; transform: translate(-38px, 20px) scale(1.18); filter: hue-rotate(120deg) brightness(9.5) saturate(19) contrast(17); }
    60% { opacity: 1; transform: translate(42px, -16px) scale(0.87); filter: hue-rotate(120deg) brightness(10.5) saturate(21) contrast(19); }
    65% { opacity: 0.95; transform: translate(-33px, 24px) scale(1.2); filter: hue-rotate(120deg) brightness(10) saturate(20) contrast(18); }
    70% { opacity: 0.9; transform: translate(36px, -19px) scale(0.9); filter: hue-rotate(120deg) brightness(9) saturate(18) contrast(16); }
    75% { opacity: 0.85; transform: translate(-28px, 16px) scale(1.15); filter: hue-rotate(120deg) brightness(8) saturate(16) contrast(14); }
    80% { opacity: 0.8; transform: translate(32px, -14px) scale(0.92); filter: hue-rotate(120deg) brightness(7) saturate(14) contrast(12); }
    85% { opacity: 0.7; transform: translate(-24px, 12px) scale(1.1); filter: hue-rotate(120deg) brightness(6) saturate(12) contrast(10); }
    90% { opacity: 0.6; transform: translate(28px, -10px) scale(0.95); filter: hue-rotate(120deg) brightness(5) saturate(10) contrast(8); }
    95% { opacity: 0.4; transform: translate(-20px, 8px) scale(1.05); filter: hue-rotate(120deg) brightness(4) saturate(8) contrast(6); }
    100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

@keyframes rgbGlitch2 {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    5% { opacity: 0.95; transform: translate(28px, -12px) scale(0.95); filter: hue-rotate(240deg) brightness(5) saturate(10) contrast(8); }
    10% { opacity: 1; transform: translate(-35px, 18px) scale(1.05); filter: hue-rotate(240deg) brightness(6) saturate(12) contrast(10); }
    15% { opacity: 0.9; transform: translate(32px, -20px) scale(0.92); filter: hue-rotate(240deg) brightness(5.5) saturate(11) contrast(9); }
    20% { opacity: 1; transform: translate(-38px, 16px) scale(1.08); filter: hue-rotate(240deg) brightness(7) saturate(14) contrast(12); }
    25% { opacity: 0.95; transform: translate(36px, -24px) scale(0.9); filter: hue-rotate(240deg) brightness(6.5) saturate(13) contrast(11); }
    30% { opacity: 1; transform: translate(-42px, 20px) scale(1.1); filter: hue-rotate(240deg) brightness(8) saturate(16) contrast(14); }
    35% { opacity: 0.9; transform: translate(40px, -18px) scale(0.88); filter: hue-rotate(240deg) brightness(7.5) saturate(15) contrast(13); }
    40% { opacity: 1; transform: translate(-45px, 26px) scale(1.12); filter: hue-rotate(240deg) brightness(9) saturate(18) contrast(16); }
    45% { opacity: 0.95; transform: translate(38px, -22px) scale(0.85); filter: hue-rotate(240deg) brightness(8.5) saturate(17) contrast(15); }
    50% { opacity: 1; transform: translate(-48px, 24px) scale(1.15); filter: hue-rotate(240deg) brightness(10) saturate(20) contrast(18); }
    55% { opacity: 0.9; transform: translate(44px, -20px) scale(0.87); filter: hue-rotate(240deg) brightness(9.5) saturate(19) contrast(17); }
    60% { opacity: 1; transform: translate(-46px, 22px) scale(1.18); filter: hue-rotate(240deg) brightness(10.5) saturate(21) contrast(19); }
    65% { opacity: 0.95; transform: translate(42px, -26px) scale(0.9); filter: hue-rotate(240deg) brightness(10) saturate(20) contrast(18); }
    70% { opacity: 0.9; transform: translate(-40px, 18px) scale(1.15); filter: hue-rotate(240deg) brightness(9) saturate(18) contrast(16); }
    75% { opacity: 0.85; transform: translate(36px, -16px) scale(0.92); filter: hue-rotate(240deg) brightness(8) saturate(16) contrast(14); }
    80% { opacity: 0.8; transform: translate(-34px, 14px) scale(1.1); filter: hue-rotate(240deg) brightness(7) saturate(14) contrast(12); }
    85% { opacity: 0.75; transform: translate(30px, -12px) scale(0.95); filter: hue-rotate(240deg) brightness(6) saturate(12) contrast(10); }
    90% { opacity: 0.6; transform: translate(-26px, 10px) scale(1.05); filter: hue-rotate(240deg) brightness(5) saturate(10) contrast(8); }
    95% { opacity: 0.4; transform: translate(22px, -8px) scale(0.98); filter: hue-rotate(240deg) brightness(4) saturate(8) contrast(6); }
    100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* RGB分離グリッチ - 控えめ（オープニング用） */
@keyframes rgbGlitchMild1 {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    10% { opacity: 0.7; transform: translate(-12px, 5px) scale(1.02); filter: hue-rotate(120deg) brightness(2.5) saturate(4) contrast(3); }
    20% { opacity: 0.8; transform: translate(15px, -8px) scale(0.98); filter: hue-rotate(120deg) brightness(3) saturate(5) contrast(4); }
    30% { opacity: 0.7; transform: translate(-14px, 10px) scale(1.03); filter: hue-rotate(120deg) brightness(2.8) saturate(4.5) contrast(3.5); }
    40% { opacity: 0.8; transform: translate(18px, -7px) scale(0.97); filter: hue-rotate(120deg) brightness(3.2) saturate(5.5) contrast(4.5); }
    50% { opacity: 0.8; transform: translate(-16px, 12px) scale(1.04); filter: hue-rotate(120deg) brightness(3.5) saturate(6) contrast(5); }
    60% { opacity: 0.7; transform: translate(20px, -10px) scale(0.96); filter: hue-rotate(120deg) brightness(3.2) saturate(5.5) contrast(4.5); }
    70% { opacity: 0.6; transform: translate(-15px, 8px) scale(1.02); filter: hue-rotate(120deg) brightness(3) saturate(5) contrast(4); }
    80% { opacity: 0.5; transform: translate(12px, -6px) scale(0.98); filter: hue-rotate(120deg) brightness(2.5) saturate(4) contrast(3); }
    90% { opacity: 0.3; transform: translate(-10px, 5px) scale(1.01); filter: hue-rotate(120deg) brightness(2) saturate(3) contrast(2); }
    100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

@keyframes rgbGlitchMild2 {
    0% { opacity: 0; transform: translate(0, 0) scale(1); }
    10% { opacity: 0.7; transform: translate(14px, -6px) scale(0.98); filter: hue-rotate(240deg) brightness(2.5) saturate(4) contrast(3); }
    20% { opacity: 0.8; transform: translate(-17px, 9px) scale(1.02); filter: hue-rotate(240deg) brightness(3) saturate(5) contrast(4); }
    30% { opacity: 0.7; transform: translate(16px, -11px) scale(0.97); filter: hue-rotate(240deg) brightness(2.8) saturate(4.5) contrast(3.5); }
    40% { opacity: 0.8; transform: translate(-20px, 8px) scale(1.03); filter: hue-rotate(240deg) brightness(3.2) saturate(5.5) contrast(4.5); }
    50% { opacity: 0.8; transform: translate(18px, -13px) scale(0.96); filter: hue-rotate(240deg) brightness(3.5) saturate(6) contrast(5); }
    60% { opacity: 0.7; transform: translate(-22px, 10px) scale(1.04); filter: hue-rotate(240deg) brightness(3.2) saturate(5.5) contrast(4.5); }
    70% { opacity: 0.6; transform: translate(17px, -9px) scale(0.98); filter: hue-rotate(240deg) brightness(3) saturate(5) contrast(4); }
    80% { opacity: 0.5; transform: translate(-14px, 7px) scale(1.02); filter: hue-rotate(240deg) brightness(2.5) saturate(4) contrast(3); }
    90% { opacity: 0.3; transform: translate(11px, -5px) scale(0.99); filter: hue-rotate(240deg) brightness(2) saturate(3) contrast(2); }
    100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* 背景画像を疑似要素に設定 */
[data-slide="2"] .slide-transition-out .slide-bg-layer::before,
[data-slide="2"] .slide-transition-out .slide-bg-layer::after,
[data-slide="2"] .slide-transition-in .slide-bg-layer::before,
[data-slide="2"] .slide-transition-in .slide-bg-layer::after {
    background-image: url('../img/top/bg_img02.png?v=20251030');
}

[data-slide="2"] .slide-transition-out .slide-car-image::before,
[data-slide="2"] .slide-transition-out .slide-car-image::after,
[data-slide="2"] .slide-transition-in .slide-car-image::before,
[data-slide="2"] .slide-transition-in .slide-car-image::after {
    background-image: url('../img/top/FV_img02.png?v=20251030');
}

[data-slide="3"] .slide-transition-out .slide-bg-layer::before,
[data-slide="3"] .slide-transition-out .slide-bg-layer::after,
[data-slide="3"] .slide-transition-in .slide-bg-layer::before,
[data-slide="3"] .slide-transition-in .slide-bg-layer::after {
    background-image: url('../img/top/bg_img03.png?v=20251030');
}

[data-slide="3"] .slide-transition-out .slide-car-image::before,
[data-slide="3"] .slide-transition-out .slide-car-image::after,
[data-slide="3"] .slide-transition-in .slide-car-image::before,
[data-slide="3"] .slide-transition-in .slide-car-image::after {
    background-image: url('../img/top/FV_img03.png?v=20251030');
}

/* オープニングセクションの背景画像設定（控えめなトランジション用） */
.opening-transition-out.opening-bg-layer::before,
.opening-transition-out.opening-bg-layer::after {
    background-image: url('../img/top/bg_img01.png?v=20251030');
}

.opening-transition-out.opening-car-image::before,
.opening-transition-out.opening-car-image::after {
    background-image: url('../img/top/FV_img01.png?v=20251030');
}

.opening-transition-in .slide-bg-layer::before,
.opening-transition-in .slide-bg-layer::after {
    background-image: url('../img/top/bg_img02.png?v=20251030');
}

.opening-transition-in .slide-car-image::before,
.opening-transition-in .slide-car-image::after {
    background-image: url('../img/top/FV_img02.png?v=20251030');
}

@media (max-width: 768px) {
    /* === SP スライドごとの個別調整 === */
}