@charset "UTF-8";
/*
 * トップFVの旧デザイン残骸を打ち消す
 *
 * style.css には旧デザイン時代の
 *   body:has(main.home) .kv { padding: 110px 25px 0 }  ← PC
 *   （タブレット 7.63vw 1.73vw 0 / SP 13.84vw 2.56vw 0）
 * が残っており、現行の幕開けアニメーション用ルール
 *   html body:has(main.home) .kv { position/width/height/overflow }
 * では padding を上書きしていない。
 *
 * box-sizing: border-box かつ動画が position:absolute; inset:0 のため
 * 現状は見た目に影響していないが、意図しない指定なので打ち消しておく。
 */
html body:has(main.home) .kv {
    padding: 0;
}

/* ============================================================
 * FVコピーの可読性確保
 *
 * 背景が動画のため、空や白い建物などの明るいカットに入ると
 * 白文字が沈んで読みづらくなる。
 *
 * オフセットを付けた落ち影はサイトのトーンから浮くので、
 * ほぼ真下・広いぼかし・低い不透明度で「にじませる」方向にしている。
 * 暗いカットではほとんど知覚されず、明るいカットでだけ効く。
 * ============================================================ */
.kv__text {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.20),
        0 2px 18px rgba(0, 0, 0, 0.26);
}

/* 英字は136pxと大きいため、ぼかしも比例して広げる */
.kv__text .kv__text-en {
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.18),
        0 6px 36px rgba(0, 0, 0, 0.26);
}

@media screen and (max-width: 1440px) {
    .kv__text .kv__text-en {
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.18),
            0 5px 28px rgba(0, 0, 0, 0.26);
    }
}

@media screen and (max-width: 768px) {
    .kv__text {
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.22),
            0 2px 12px rgba(0, 0, 0, 0.28);
    }

    .kv__text .kv__text-en {
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.20),
            0 3px 18px rgba(0, 0, 0, 0.28);
    }
}

/* ============================================================
 * 本文が重なったら影を外す
 *
 * .kv__text は position: fixed のため、スクロールすると
 * 白い .main--wrapper が上に被さる。影を残したままだと
 * 白地の上に文字の輪郭がうっすら浮いて見えてしまう。
 * 切り替えは assets/js/home-kv.js（.is-covered の付け外し）。
 * ============================================================ */
.kv__text,
.kv__text .kv__text-en {
    transition: text-shadow 0.35s ease;
}

.kv__text.is-covered,
.kv__text.is-covered .kv__text-ja,
.kv__text.is-covered .kv__text-en {
    text-shadow: none;
}