/* top.css */

/* ========================================
   MV セクション（100vh フルスクリーン）
======================================== */
.p-mv {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--color-bg);
}

/* ========================================
   Splide オーバーライド
======================================== */
.js-mv-splide,
.js-mv-splide .splide__track,
.js-mv-splide .splide__list,
.js-mv-splide .splide__slide {
    height: 100%;
}

.js-mv-splide .splide__slide {
    overflow: hidden;
}

/* picture 要素をブロック全体に広げる */
.js-mv-splide .splide__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* ========================================
   MV 画像
======================================== */
.p-mv__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform;
}

/* ========================================
   ケンバーンズ（スライドアクティブ時に付与）
======================================== */
.p-mv__img.is-kenburns {
    animation: kenburns 8s ease-out forwards;
}

/* スライドごとに transform-origin を変えてバリエーションを出す */
.js-mv-splide .splide__slide:nth-child(1) .p-mv__img { transform-origin: center center; }
.js-mv-splide .splide__slide:nth-child(2) .p-mv__img { transform-origin: 60% 50%; }
.js-mv-splide .splide__slide:nth-child(3) .p-mv__img { transform-origin: 40% 60%; }
.js-mv-splide .splide__slide:nth-child(4) .p-mv__img { transform-origin: 55% 45%; }
.js-mv-splide .splide__slide:nth-child(5) .p-mv__img { transform-origin: 45% 55%; }

@keyframes kenburns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.10); }
}

/* ========================================
   フェードイン（ページロード時）
======================================== */
.p-mv {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.p-mv.is-loaded {
    opacity: 1;
}

/* ========================================
   ヒーロー上のタグライン＋中央ロゴマーク
   （ヘッダーロゴの代わりに表示。読み上げ・SEO用に実テキスト／別画像として実装）
======================================== */
.p-mv__tagline {
    display: none;
    text-decoration: none;
}

.p-mv__mark {
    display: none;
}

/* ========================================
   ヘッダー配色（PC／SP共通）
   基本は黒。mix-blend-mode は position:fixed の .l-header 内では
   背後の写真とブレンドできないため使わず、JS（top.js）が
   data-header-theme を見て body に is-hero-on-dark を付け外しする
   明示的な方式にしている。
======================================== */
.l-header__nav-link,
.l-header__reservation {
    color: #1a1a1a;
    text-shadow: none;
}

.l-header__reservation {
    border-color: #1a1a1a;
    transition: opacity var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* スライド2枚目（暗い背景）の時だけ白に切り替え */
body.is-hero-on-dark .l-header__nav-link,
body.is-hero-on-dark .l-header__reservation {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

body.is-hero-on-dark .l-header__reservation {
    border-color: #fff;
}

body.is-hero-on-dark .p-mv__tagline {
    color: #fff;
}

/* ========================================
   レスポンシブ（PC：769px以上）
======================================== */
@media screen and (min-width: 769px) {
    /* ヘッダーの縦ロゴは非表示にし、タグライン＋中央マークに差し替え */
    .l-header__logo {
        display: none;
    }

    /* タグライン（reservationの下、右揃え） */
    .p-mv__tagline {
        display: block;
        position: absolute;
        top: calc(var(--header-pad-v) + 61px);
        right: var(--header-pad-h);
        z-index: 6;
        font-family: var(--font-en);
        font-size: 11px;
        line-height: 1.7;
        text-align: right;
        transition: color var(--transition-base);
    }

    .p-mv__tagline-sub {
        font-size: 12px;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* 中央のロゴマーク */
    .p-mv__mark {
        display: block;
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translateX(-50%);
        width: 91px;
        height: auto;
        z-index: 6;
        pointer-events: none;
    }
}

/* ========================================
   レスポンシブ（SP：768px以下）
======================================== */
@media screen and (max-width: 768px) {
    .js-mv-splide .splide__slide:nth-child(1) .p-mv__img { transform-origin: 50% 40%; }
    .js-mv-splide .splide__slide:nth-child(2) .p-mv__img { transform-origin: 50% 50%; }
    .js-mv-splide .splide__slide:nth-child(3) .p-mv__img { transform-origin: 50% 60%; }
    .js-mv-splide .splide__slide:nth-child(4) .p-mv__img { transform-origin: 50% 50%; }
    .js-mv-splide .splide__slide:nth-child(5) .p-mv__img { transform-origin: 50% 45%; }

    /* ヘッダーロゴは非表示にし、タグラインに差し替え */
    .l-header__logo {
        display: none;
    }

    /* タグライン（クリックでTOPへ） */
    .p-mv__tagline {
        display: block;
        position: absolute;
        top: 20px;
        left: var(--header-pad-h);
        z-index: 6;
        font-family: var(--font-en);
        font-size: 11px;
        line-height: 1.7;
    }

    .p-mv__tagline-sub {
        font-size: 12px;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* 中央のロゴマーク（明/暗2種のSVGをJSで出し分け） */
    .p-mv__mark {
        display: block;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(64px, 15vw, 90px);
        height: auto;
        z-index: 6;
        pointer-events: none;
    }

    /* ハンバーガーの配色（SP限定。PCには存在しないため） */
    .l-header__hamburger-line {
        background-color: #1a1a1a;
    }

    body.is-hero-on-dark .l-header__hamburger-line {
        background-color: #fff;
    }
}