/* -----------------------------------
   ヒーロースライダー（翻訳ソリューション / RayRoot / フルAI動画制作）
----------------------------------- */
.hero-slider {
    position: relative;
    width: 100%;
    margin-top: var(--header-height);
    height: calc(var(--vh, 1svh) * 100 - var(--header-height));
    background: #000;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.8s ease;
    z-index: 1;
}

.hero-slide.is-prev {
    transform: translateX(-100%);
}

.hero-slide.is-snapping {
    transition: none;
}

.hero-slide.is-active {
    transform: translateX(0);
    z-index: 2;
}

.hero-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.hero-slide-bg--translation {
    background-image: url("../img/honyaku-back04.png");
}

.hero-card-stage,
.rayroot-card-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, calc((var(--vh, 1svh) * 100 - var(--header-height)) * 1.5));
    aspect-ratio: 1536 / 1024;
    transform: translate(-50%, -50%);
}

.hero-card {
    position: absolute;
    top: var(--card-y);
    left: var(--card-x);
    width: var(--card-w);
    transform: translate(-50%, -50%) perspective(var(--card-persp)) rotateZ(var(--card-rz)) rotateY(var(--card-ry)) rotateX(var(--card-rx));
    animation: hero-card-sway var(--card-duration) ease-in-out var(--card-delay) infinite alternate;
}

.hero-card--news {
    --card-x: 4%;
    --card-y: 24%;
    --card-w: 34%;
    --card-persp: 81.5vw;
    --card-rx: 11.67deg;
    --card-ry: 36.06deg;
    --card-rz: 6.53deg;
    --card-bob: -20px;
    --card-wobble-x: 3deg;
    --card-wobble-z: 1.5deg;
    --card-duration: 2.3s;
    --card-delay: 0s;
}

.hero-card--drama {
    --card-x: 42%;
    --card-y: 21%;
    --card-w: 36.5%;
    --card-persp: 1104.2vw;
    --card-rx: -11.76deg;
    --card-ry: 22.48deg;
    --card-rz: -5.4deg;
    --card-bob: -28px;
    --card-wobble-x: 4deg;
    --card-wobble-z: 2.5deg;
    --card-duration: 3.5s;
    --card-delay: 0.5s;
}

.hero-card--variety {
    --card-x: 96%;
    --card-y: 21%;
    --card-w: 39%;
    --card-persp: 284.5vw;
    --card-rx: 18.5deg;
    --card-ry: -32.27deg;
    --card-rz: -10.22deg;
    --card-bob: -16px;
    --card-wobble-x: 2.5deg;
    --card-wobble-z: 1.8deg;
    --card-duration: 2.8s;
    --card-delay: 1.15s;
}

.hero-card--anime {
    --card-x: 4%;
    --card-y: 79%;
    --card-w: 34%;
    --card-persp: 9.2vw;
    --card-rx: 4.93deg;
    --card-ry: 6.92deg;
    --card-rz: -4.02deg;
    --card-bob: -30px;
    --card-wobble-x: 4.5deg;
    --card-wobble-z: 2.2deg;
    --card-duration: 3.85s;
    --card-delay: 0.22s;
}

.hero-card--presentation {
    --card-x: 54%;
    --card-y: 80%;
    --card-w: 36.5%;
    --card-persp: 794.1vw;
    --card-rx: -2.9deg;
    --card-ry: 33.56deg;
    --card-rz: -5.47deg;
    --card-bob: -22px;
    --card-wobble-x: 3.2deg;
    --card-wobble-z: 1.6deg;
    --card-duration: 2.6s;
    --card-delay: 0.88s;
}

.hero-card--vtuber {
    --card-x: 96%;
    --card-y: 76%;
    --card-w: 40%;
    --card-persp: 46.2vw;
    --card-rx: 8.91deg;
    --card-ry: -18.8deg;
    --card-rz: -0.45deg;
    --card-bob: -26px;
    --card-wobble-x: 3.8deg;
    --card-wobble-z: 2deg;
    --card-duration: 3.2s;
    --card-delay: 1.43s;
}

.hero-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.95),
        0 0 28px rgba(255, 255, 255, 0.75),
        0 0 56px rgba(255, 255, 255, 0.45);
}

@keyframes hero-card-sway {
    0% {
        transform: translate(-50%, -50%) translateY(0px) perspective(var(--card-persp)) rotateZ(var(--card-rz)) rotateY(var(--card-ry)) rotateX(var(--card-rx));
    }

    100% {
        transform: translate(-50%, -50%) translateY(var(--card-bob)) perspective(var(--card-persp)) rotateZ(calc(var(--card-rz) + var(--card-wobble-z))) rotateY(var(--card-ry)) rotateX(calc(var(--card-rx) + var(--card-wobble-x)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-card {
        animation: none;
    }
}

.hero-slide-bg--rayroot {
    background-image: url("../img/rayroot-bg.png");
}

.rayroot-hero-logo {
    position: absolute;
    top: var(--card-y);
    left: var(--card-x);
    width: var(--card-w);
    aspect-ratio: 1460 / 680;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter:
        drop-shadow(0 0 10px rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 26px rgba(0, 0, 0, 0.75))
        drop-shadow(0 0 50px rgba(0, 0, 0, 0.5));
    animation: rayroot-card-sway var(--card-duration) ease-in-out var(--card-delay) infinite alternate;
}

.rayroot-card {
    position: absolute;
    top: var(--card-y);
    left: var(--card-x);
    width: var(--card-w);
    transform: translate(-50%, -50%);
    animation: rayroot-card-sway var(--card-duration) ease-in-out var(--card-delay) infinite alternate;
}

.rayroot-hero-logo {
    --card-x: 83.5%;
    --card-y: 20%;
    --card-w: 29%;
    --card-bob: -4px;
    --card-wobble-z: 0.4deg;
    --card-duration: 4.4s;
    --card-delay: 0.2s;
}

.rayroot-card--news {
    --card-x: 89.8%;
    --card-y: 68%;
    --card-w: 38%;
    --card-bob: -5px;
    --card-wobble-z: 0.4deg;
    --card-duration: 3s;
    --card-delay: 0s;
}

.rayroot-card--routing {
    --card-x: 95.8%;
    --card-y: 30%;
    --card-w: 26%;
    --card-bob: -4px;
    --card-wobble-z: -0.5deg;
    --card-duration: 3.6s;
    --card-delay: 0.6s;
}

.rayroot-card--live-man {
    --card-x: 69.8%;
    --card-y: 52%;
    --card-w: 30.5%;
    --card-bob: -6px;
    --card-wobble-z: 0.6deg;
    --card-duration: 3.2s;
    --card-delay: 1.1s;
}

.rayroot-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow:
        0 0 12px rgba(0, 0, 0, 0.9),
        0 0 32px rgba(0, 0, 0, 0.7),
        0 0 64px rgba(0, 0, 0, 0.45);
}

.rayroot-card--news img {
    aspect-ratio: 1304 / 904;
}

.rayroot-card--routing img {
    aspect-ratio: 1203 / 925;
}

.rayroot-card--live-man img {
    aspect-ratio: 1285 / 925;
}

@keyframes rayroot-card-sway {
    0% {
        transform: translate(-50%, -50%) translateY(0px) rotateZ(var(--card-rz, 0deg));
    }

    100% {
        transform: translate(-50%, -50%) translateY(var(--card-bob)) rotateZ(calc(var(--card-rz, 0deg) + var(--card-wobble-z)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .rayroot-card,
    .rayroot-hero-logo {
        animation: none;
    }
}

.hero-slide-bg--ai-video {
    background: #000;
}

.hero-slide-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero-slide-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    color: #fff;
    padding: 0 5%;
    text-align: center;
}

.hero-text-box {
    max-width: 700px;
    text-align: center;
}

.hero-text-box--left {
    align-self: flex-start;
    max-width: 660px;
    margin-left: 8%;
    text-align: left;
}

.hero-slide-content h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: 5px;
    line-height: 1.3;
    margin-bottom: 20px;
    text-shadow: 0.1vw 0.1vw 0.4vw rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}

.hero-slide-content .hero-sub {
    font-size: clamp(16px, 1.8vw, 20px);
    margin-top: 0;
    margin-bottom: 0;
    color: #fff;
    text-shadow:
        -1px -1px 2px rgba(0, 0, 0, 0.9),
        1px -1px 2px rgba(0, 0, 0, 0.9),
        -1px 1px 2px rgba(0, 0, 0, 0.9),
        1px 1px 2px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.7);
}

.hero-slide-content .hero-eyebrow {
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: 3px;
    margin-top: 0;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 0.1vw 0.1vw 0.4vw rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}

.hero-text-box--left .hero-eyebrow {
    margin-left: 3px;
}

/* 左右の矢印ナビゲーション */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(11, 26, 44, 0.5);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-arrow--prev {
    left: 24px;
}

.hero-arrow--next {
    right: 24px;
}

/* ドットナビゲーション */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 3;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hero-dot.is-active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* フルAI動画スライドの音声コントロール */
.hero-video-controls {
    position: absolute;
    right: 24px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
}

.hero-video-mute-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: rgba(11, 26, 44, 0.6);
    cursor: pointer;
    position: relative;
}

.hero-video-mute-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3z'/%3E%3Cpath d='M16.5 12c0-1.77-.77-3.29-2-4.29v8.58c1.23-1 2-2.52 2-4.29z'/%3E%3C/svg%3E");
}

.hero-video-mute-btn.is-muted .hero-video-mute-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 10v4h4l5 5V5L7 10H3z'/%3E%3Cpath d='M19 12l2.5-2.5-1.4-1.4L17.6 10.6 15.1 8.1 13.7 9.5 16.2 12l-2.5 2.5 1.4 1.4 2.5-2.5 2.5 2.5 1.4-1.4z'/%3E%3C/svg%3E");
}

.hero-video-volume {
    width: 90px;
    accent-color: var(--accent-color);
}

/* レスポンシブ上書き（詳細度がベースルールと同じセレクタが多いため、
   カスケードで確実に勝てるようファイル末尾・幅の広い順に配置する） */
@media screen and (max-width:1400px) {
    .hero-slider {
        height: calc(var(--vh, 1svh) * 85 - var(--header-height));
    }

    .hero-card-stage,
    .rayroot-card-stage {
        width: min(100%, calc((var(--vh, 1svh) * 85 - var(--header-height)) * 1.5));
    }
}

@media screen and (max-width:1050px) {
    .hero-slider {
        height: calc(var(--vh, 1svh) * 70 - var(--header-height));
    }

    .hero-card-stage,
    .rayroot-card-stage {
        width: min(100%, calc((var(--vh, 1svh) * 70 - var(--header-height)) * 1.5));
    }
}

/* ヒーロー見出し (タブレット以下、既存の .header 等と同じ 900px ブレークポイントに合わせる) */
@media screen and (max-width:900px) {
    .hero-slide-content h1 {
        font-size: clamp(24px, 4vw, 42px);
        line-height: 1.5;
    }
}

@media screen and (max-width:600px) {
    .hero-slider {
        height: calc(var(--vh, 1svh) * 55 - var(--header-height));
    }

    .hero-card-stage,
    .rayroot-card-stage {
        width: min(100%, calc((var(--vh, 1svh) * 55 - var(--header-height)) * 1.5));
    }

    .hero-card--news,
    .hero-card--anime {
        --card-x: 20%;
    }

    .hero-card--variety,
    .hero-card--vtuber {
        --card-x: 80%;
    }

    .rayroot-card-stage {
        left: calc(50% - 80px);
    }

    .hero-arrow {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .hero-arrow--prev {
        left: 10px;
    }

    .hero-arrow--next {
        right: 10px;
    }

    .hero-slide-content {
        padding: 0 56px;
    }

    .hero-slide-content .hero-eyebrow {
        letter-spacing: 1px;
    }

    .hero-slide-content h1 {
        line-height: 1.1;
    }

    .hero-slide-content .hero-sub {
        font-size: clamp(14px, 1.8vw, 20px);
        line-height: 1.2;
    }

    .hero-text-box--left {
        margin: 0;
        width: 80%;
    }

    .hero-text-box--ai-video {
        position: absolute;
        top: 18px;
        left: 50px;
        max-width: 50%;
    }

    .hero-text-box--left .hero-eyebrow {
        font-size: 12px;
        margin-bottom: 0;
        margin-left: 1px;
    }

    .hero-text-box--left h1 {
        font-size: clamp(18px, 5vw, 22px);
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .hero-text-box--left .hero-sub {
        font-size: 13px;
    }

    .hero-dots {
        bottom: 16px;
        gap: 10px;
    }

    .hero-video-controls {
        right: 12px;
        bottom: 16px;
    }

    .hero-video-volume {
        width: 60px;
    }
}