@charset "utf-8";
/* ===== リセット（必要なければ削ってOK） ===== */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    margin: 0;
}
/* ===== スライダー本体 ===== */
.kv-slider {
    width: 100%;
    overflow: hidden; /* 外にはみ出したものは見せない */
    background: #000; /* 本来は見えないが念のため */
}
.kv-slider-inner {
    position: relative;
    width: 100%;
    padding-top: 30vw; /* 高さ比率。お好みで変更可 */
    max-height: 300px;
}
/* 1スライド（フェード切り替え用） */
.kv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    overflow: hidden; /* 中身がはみ出しても外には出さない */
}
.kv-slide.is-active {
    opacity: 1;
    z-index: 1;
}
/* ===== 中の「背景画像レイヤー」 ===== */
.kv-slide-img {
    position: absolute;
    inset: 0; /* スライドと同じサイズで配置 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform-origin: center center;
    will-change: transform;
}
/* ===== Ken Burns 風・横パン（右↔左） ===== */
/* 画像を常に scale(1.2) で120%表示して、
   その中で少しだけ左右に振る。背景は絶対に出ない。 */
@keyframes kv-pan-horizontal {
    0% {
        transform: scale(1.2) translateX(-4%);
    }
    100% {
        transform: scale(1.2) translateX(4%);
    }
}
/* すべてのスライドを「3の動き」（横パン）にする */
.kv-slide .kv-slide-img {
    animation: kv-pan-horizontal 8s ease-in-out alternate infinite;
}
/* ===== スマホ向け調整 ===== */
@media (max-width: 768px) {
    .kv-slider-inner {
        padding-top: 60vw; /* 少し縦に余裕を持たせる */
        max-height: none;
    }
}