/* ============================================================
   Forte — store Forte 専用のカスタムCSS
   index.html のインライン <style> から分離 (2026-06-29)。
   forte ストアのみに適用する。共通の style.css には手を入れない。
   ============================================================ */

/* ===== Font: Vietnamese diacritics + Japanese fallback ===== */
:root { --forte-sans: "Noto Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body, .font_min, .font_en, .ttl, .txt, p, span, h1, h2, h3, h4, li, td, th, a, .read, .message, .english { font-family: var(--forte-sans); }

/* ===== Language switcher ===== */
.forte-lang-switcher {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(188, 222, 255, .12));
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 26px rgba(6, 18, 31, .2);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    flex-shrink: 0;
    position: relative;
    z-index: 10001;
    pointer-events: auto;
}

/* ===== Forte event sub pages ===== */
body.forte-event-page {
    --event-bg: #06121f;
    --event-panel: rgba(8, 28, 50, .72);
    --event-line: rgba(124, 200, 255, .32);
    --event-cyan: #7cc8ff;
    --event-text: #e3eefb;
    width: 100%;
    overflow-x: hidden;
    background: var(--event-bg) !important;
    color: var(--event-text);
}

body.forte-event-page > * {
    max-width: 100vw;
}

body.forte-event-page *,
body.forte-event-page *::before,
body.forte-event-page *::after {
    box-sizing: border-box;
}

.forte-event-bgvideo {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(124, 200, 255, .24), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(255, 82, 194, .18), transparent 30%),
        var(--event-bg);
}

.forte-event-bgvideo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    filter: saturate(125%) contrast(108%) brightness(.72);
}

.forte-event-bgvideo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 12, 24, .78), rgba(3, 12, 24, .42) 42%, rgba(3, 12, 24, .88)),
        radial-gradient(circle at 50% 0%, rgba(124, 200, 255, .16), transparent 42%);
}

body.forte-event-page .article_header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 14px clamp(16px, 5vw, 56px);
    background: rgba(4, 14, 26, .72) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
    overflow: hidden;
}

body.forte-event-page .article_logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
    text-decoration: none;
}

body.forte-event-page .article_logo_img {
    display: block;
    width: auto;
    height: clamp(44px, 4.4vw, 60px);
    object-fit: contain;
    border-radius: 5px;
    filter: drop-shadow(0 3px 10px rgba(6, 18, 31, .28));
}

.article_tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* 下層ページの MENU ボタン: トップページと同じマークアップを流用しつつ、
   fixed 前提の .global_nav 外でも flex 内に収まるように配置だけ上書き */
body.forte-event-page .btn_humberger_box {
    display: block !important;
    position: static;
    width: 52px;
    height: 66px;
    flex: 0 0 auto;
    cursor: pointer;
}

body.forte-event-page button.btn_humberger {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
}

/* 下層ページはMENU/CLOSEテキスト・X JAPANロゴなしの丸アイコンのみ。
   テキスト分の余白をなくしてヘッダー内で縦センタリングする */
body.forte-event-page .btn_humberger_box {
    height: 52px;
}

body.forte-event-page button.btn_humberger {
    height: 52px !important;
    justify-content: center;
}

body.forte-event-page .btn_humberger .txt {
    display: none !important;
}

body.forte-event-page.open .article_header {
    z-index: 10010;
}

body.forte-event-page.open {
    overflow: hidden;
}

.forte-event-menu {
    position: fixed;
    inset: 0;
    z-index: 10005;
    display: none;
    padding: 110px 24px 48px;
    background: rgba(4, 14, 26, .92);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    overflow-y: auto;
}

body.open .forte-event-menu {
    display: block;
}

.forte-event-menu_list {
    display: grid;
    gap: 6px;
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.forte-event-menu_list a {
    display: block;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #eaf6ff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .forte-event-menu_list a:hover {
        background: rgba(124, 200, 255, .14);
        border-color: rgba(124, 200, 255, .4);
        text-shadow: 0 0 14px rgba(124, 200, 255, .6);
    }
}

body.forte-event-page .article_back,
body.forte-event-page .ecard_more,
body.forte-event-page .cta {
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    color: #eaf6ff !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 24px rgba(0, 0, 0, .22);
}

body.forte-event-page .article_back {
    min-height: 38px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 13px;
}

/* 言語切替はトップページのガラス調（グローバル .forte-lang-switcher）をそのまま使う */
body.forte-event-page .forte-lang-switcher {
    flex: 0 0 auto;
}

body.forte-event-page .events_main,
body.forte-event-page .article {
    position: relative;
    z-index: 1;
    width: min(100% - 32px, 1080px);
    margin-inline: auto;
    padding: clamp(42px, 8vw, 72px) 0 clamp(72px, 12vw, 112px);
}

body.forte-event-page .article {
    width: min(100% - 32px, 820px);
}

body.forte-event-page .events_pagehd_en,
body.forte-event-page .article h1 {
    text-shadow: 0 0 24px rgba(124, 200, 255, .24);
}

body.forte-event-page .events_pagehd_en::after {
    box-shadow: 0 0 20px rgba(124, 200, 255, .45);
}

body.forte-event-page .article h2 {
    border-color: var(--event-cyan) !important;
    box-shadow: -8px 0 24px rgba(124, 200, 255, .12);
}

body.forte-event-page .events_grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(18px, 3vw, 30px);
}

body.forte-event-page .ecard,
body.forte-event-page .info_box,
body.forte-event-page .ticket {
    background: var(--event-panel) !important;
    border: 1px solid var(--event-line) !important;
    border-radius: 20px !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 50px rgba(0, 0, 0, .32);
}

body.forte-event-page .ecard {
    overflow: hidden;
}

body.forte-event-page .ecard:hover {
    border-color: rgba(124, 200, 255, .75) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(124, 200, 255, .28), 0 0 32px rgba(124, 200, 255, .28), 0 18px 50px rgba(0, 0, 0, .38);
}

body.forte-event-page .ecard_date {
    color: var(--event-cyan);
    text-shadow: 0 0 12px rgba(124, 200, 255, .55);
}

body.forte-event-page .ecard_more:hover,
body.forte-event-page .article_back:hover {
    background: rgba(124, 200, 255, .26) !important;
    border-color: rgba(124, 200, 255, .65) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 22px rgba(124, 200, 255, .4);
}

.forte-event-footer_nav a:hover {
    color: #7cc8ff;
    text-shadow: 0 0 14px rgba(124, 200, 255, .6);
}

/* ポスターは固定比率で収めず、画像の自然な高さに合わせてカードごと伸ばす(上下を切らない) */
body.forte-event-page .ecard_imgwrap {
    aspect-ratio: auto;
    height: auto;
}

body.forte-event-page .ecard_img {
    width: 100%;
    height: auto;
    object-fit: fill;
    object-position: center;
}

body.forte-event-page .ecard_title,
body.forte-event-page .article h1,
body.forte-event-page .article h2,
body.forte-event-page .article p,
body.forte-event-page .info_box dd,
body.forte-event-page .ticket_price,
.forte-event-footer_copy {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.forte-event-page .ecard_cat,
body.forte-event-page .article_cat {
    background: rgba(124, 200, 255, .18) !important;
    border: 1px solid rgba(124, 200, 255, .55) !important;
    color: #eaf6ff !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* 終了済みラベルは青系ではなく赤系ガラス風+白文字で「終了」と一目でわかるようにする */
body.forte-event-page .ecard_endedTag {
    background: linear-gradient(135deg, rgba(225, 35, 50, .85), rgba(255, 105, 45, .78)) !important;
    border: 1px solid rgba(255, 160, 160, .75) !important;
    color: #fff !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(200, 30, 40, .35);
    text-shadow: 0 1px 4px rgba(120, 0, 10, .5);
}

body.forte-event-page .ecard_more {
    width: fit-content;
    min-height: 42px;
    margin-top: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
}

body.forte-event-page .article_hero {
    max-width: 100%;
    height: auto;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
}

body.forte-event-page .info_box dl,
body.forte-event-page .info_box dt,
body.forte-event-page .info_box dd {
    min-width: 0;
}

body.forte-event-page .info_box dd a {
    color: #bfe4ff !important;
    text-decoration: underline;
    text-underline-offset: .14em;
}

body.forte-event-page .cta {
    border-radius: 999px;
}

.forte-event-footer {
    position: relative;
    z-index: 1;
    padding: 40px 16px 44px;
    background: linear-gradient(180deg, rgba(4, 14, 26, 0), rgba(4, 14, 26, .5) 40%, rgba(4, 14, 26, .58)) !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    backdrop-filter: blur(6px) saturate(130%);
    color: #cfe4f7;
}

.forte-event-footer_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    max-width: 880px;
    margin: 0 auto 26px;
    padding: 0;
    list-style: none;
}

.forte-event-footer_nav a {
    color: #e3eefb;
    font-size: 14px;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
}

.forte-event-footer_copy {
    text-align: center;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1.86;
    color: #a9c6df;
}

body.forte-event-page .vnshop-ad {
    position: relative;
    width: min(100%, 320px);
    height: auto;
    aspect-ratio: 16 / 5;
    margin: 26px auto 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    opacity: .92;
}

body.forte-event-page .vnshop-ad_link,
body.forte-event-page .vnshop-ad_slide,
body.forte-event-page .vnshop-ad_slide img {
    display: block;
    width: 100%;
    height: 100%;
}

body.forte-event-page .vnshop-ad_slide {
    display: none;
}

/* トップ同様、表示言語の2枚をJS(is-active)で5秒ごとに切り替える */
body.forte-event-page .vnshop-ad_slide.is-lang.is-active {
    display: block;
}

body.forte-event-page .vnshop-ad_slide img {
    object-fit: cover;
}

@media (max-width: 520px) {
    body.forte-event-page .article_header {
        gap: 8px;
        padding: 10px 12px;
    }

    /* SPも画像の自然な高さに合わせる(上下を切らない) */
    body.forte-event-page .ecard_imgwrap {
        aspect-ratio: auto;
    }

    .article_tools {
        gap: 8px;
    }

    body.forte-event-page .forte-lang-switcher button {
        min-width: 32px;
        padding: .34em .4em;
    }

    body.forte-event-page .events_main,
    body.forte-event-page .article {
        width: min(100% - 32px, 820px);
        overflow: hidden;
    }

    body.forte-event-page .article h1 {
        font-size: clamp(22px, 6.2vw, 24px) !important;
        line-height: 1.32;
    }

    body.forte-event-page .article h2 {
        font-size: clamp(20px, 6vw, 26px);
    }

    body.forte-event-page .ecard_body,
    body.forte-event-page .info_box,
    body.forte-event-page .ticket {
        padding: 18px 16px;
    }

    body.forte-event-page .info_box dl {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px 0;
    }

    body.forte-event-page .info_box dd + dt {
        margin-top: 12px;
    }

    body.forte-event-page .ticket_grid {
        grid-template-columns: 1fr;
    }

    body.forte-event-page .cta_row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .forte-event-footer_nav {
        gap: 9px 14px;
    }
}
.forte-lang-switcher button { pointer-events: auto; }
.header_box, .header_box .inner, .header_btnWrap { pointer-events: auto; }
.forte-lang-switcher button {
    min-width: 38px;
    min-height: 30px;
    padding: 0 10px;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(244, 249, 255, .88);
    font-size: 12px;
    font-weight: 700;
    font-family: var(--forte-sans);
    cursor: pointer;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(6, 18, 31, .34);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.forte-lang-switcher button.is-active,
.forte-lang-switcher button[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(172, 220, 255, .7));
    color: #073253;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 14px rgba(47, 143, 224, .32);
    text-shadow: none;
}
.forte-lang-switcher button:hover {
    background: rgba(255, 255, 255, .2);
}
.forte-lang-switcher button:active {
    transform: translateY(1px) scale(.985);
    background: rgba(255, 255, 255, .28);
}
.forte-lang-switcher button.is-active:hover,
.forte-lang-switcher button.is-active:active,
.forte-lang-switcher button[aria-pressed="true"]:hover,
.forte-lang-switcher button[aria-pressed="true"]:active {
    background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(186, 228, 255, .76));
    color: #073253;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 4px 16px rgba(74, 171, 238, .34);
}
.forte-lang-switcher button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .82);
    outline-offset: 2px;
}
.header_btnWrap { display: flex; align-items: center; gap: 10px; }
/* navbar 言語切替 (メニューボタン横) — mobileのみ表示 */
.forte-lang-switcher--navbar { display: none; }
@media screen {
    .header_btnWrap .forte-lang-switcher { display: none; }
    .global_nav { display: flex; align-items: center; gap: 12px; }
    .forte-lang-switcher--navbar { display: flex; margin-right: 4px; }
    .forte-lang-switcher--navbar button { min-width: 36px; min-height: 30px; padding: 0 9px; font-size: 12px; }
}

/* ===== 全画面の背景動画 (全コンテンツの背後に固定) ===== */
.forte-bgvideo {
    position: fixed;
    inset: 0;
    z-index: -2;            /* 全コンテンツの背後 */
    overflow: hidden;
    /* 動画が読み込めない環境向け: 動画の代表フレーム画像+フォールバック色 */
    background: #0a1d33 url("../img/common/forte-background-poster.jpg") center / cover no-repeat;
}
.forte-bgvideo video {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    min-width: 100%; min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    display: block;
}
/* 動画上でも文字が読めるようにする半透明オーバーレイ */
.forte-bgvideo_overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,22,40,.45) 0%, rgba(8,22,40,.35) 45%, rgba(8,22,40,.55) 100%);
}
/* body/htmlは透過して背景動画を見せる。フォールバック色は .forte-bgvideo 側 */
html { background: #0a1d33 !important; }
body { background: transparent !important; }
/* 旧・青グラデーション背景を無効化 (現在は動画背景) */
.common_bg, .common_bg #bg, .common_bg #bg02, .common_bg #over, .common_bg #over .overlay {
    background: transparent !important;
    opacity: 1 !important;
}

/* ===== 動画背景上: footerのベージュ背景・ネイビー文字を明色にして可読性を確保 ===== */
/* footer情報ブロック: 半透明の暗背景 + 明るい文字 */
.footer_contact .inner {
    background: rgba(10, 29, 51, .6) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.footer_contact .inner,
.footer_contact_list, .footer_contact_list ul, .footer_contact_list li,
.footer_contact_list a { color: #e3eefb !important; }
.footer_contact_list strong { color: #7cc8ff !important; }
/* UX30: footer内リンクの下線を消す(HTML側のinline text-decorationにも勝たせる)。
   リンクである手掛かりは色とFB/LINEアイコンで維持する */
.footer_contact_list a,
.footer_contact_list a:hover,
.footer_contact_list a:focus,
.footer_nav a {
    text-decoration: none !important;
}
/* 見出し "Come Sing With Us" と説明文 -> 白/明色に */
.footer_contact_hd .hd {
    color: #fff !important;
    /* UX30: 「Forteでお待ちしています」を425pxでも必ず1行に収める
       (わずかに縮小 + nowrap) */
    font-size: clamp(25px, 6.5vw, 42px) !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
    line-height: 1.16 !important;
    white-space: nowrap;
    text-shadow:
        0 0 14px rgba(255, 204, 64, .28),
        0 7px 20px rgba(0, 0, 0, .42);
}
.footer_contact_hd .read_ttl { color: #fff !important; }
.footer_contact_hd .read_txt { color: #d6e6f7 !important; }
/* お問い合わせ: 見出し下に「左テキスト / 右丸角ポートレート」の横並びブロック(SPでも折り返さない) */
.footer_contact_intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: center;
    gap: 18px;
    /* 見出し「Forteでお待ちしています」から独立して見えるよう余白を確保 */
    margin-top: 28px;
    /* 顔画像が右端に張り付いて見えないよう軽く内側へ */
    padding-right: clamp(4px, 2vw, 14px);
    box-sizing: border-box;
}
.footer_contact_intro .read_ttl {
    min-width: 0;
    margin: 0;
    font-size: clamp(17px, 4.5vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    letter-spacing: 0;
    word-break: normal;
    overflow-wrap: break-word;
}
.footer_contact_portrait {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(6, 18, 31, .32);
}
/* 情報リスト: 薄い青の丸チェックアイコンを非表示にして、アイコン(FB/LINE)+ラベルで読みやすく */
.footer_contact .inner .footer_contact_list li {
    padding-left: 0 !important;
}
.footer_contact .inner .footer_contact_list li::before {
    content: none !important;
}
/* Facebook / LINEの値リンク: アイコンが単独で改行されないよう、値+アイコンを1つのinline-flexにまとめる */
.footer_contact_list_valuelink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.footer_contact_list_valuelink img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
/* footer nav + copyright (ネイビー) -> 動画上で明色に */
.footer_function .inner .footer_copyrights { color: #cfe4f7 !important; }
.footer_function .inner .footer_nav li a { color: #e3eefb !important; }
/* イベント(トップ): 日付/サブのネイビー -> 明色に */
.forte-events_title { color: #fff !important; }
.forte-events_sub { color: #cfe4f7 !important; }
.forte-events_date { color: #7cc8ff !important; }
.forte-events_cat { background: rgba(124,200,255,.18) !important; border-color: rgba(124,200,255,.5) !important; color: #cfe4f7 !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }
.forte-events_arrow { color: #7cc8ff !important; }
.forte-events_item { border-color: rgba(124,200,255,.25) !important; }
.forte-events_item:first-child { border-top-color: rgba(124,200,255,.25) !important; }
.forte-events_morebtn { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.32) !important; border-radius: 999px !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; backdrop-filter: blur(12px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px rgba(0,0,0,.2) !important; }
.forte-events_morebtn:hover { background: rgba(255,255,255,.22) !important; }
.forte-events_item.is-ended .forte-events_ended {
    background: linear-gradient(135deg, rgba(225, 35, 50, .88), rgba(255, 105, 45, .8)) !important;
    border-color: rgba(255, 160, 160, .75) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(200, 30, 40, .35);
    text-shadow: 0 1px 4px rgba(120, 0, 10, .5) !important;
}
/* 料金: title/subのネイビー -> 明色に */
.forte-price_title { color: #fff !important; }
.forte-price_sub { color: #cfe4f7 !important; }
.forte-price_btn._fb { background: #1e90ff !important; border-color: #1e90ff !important; }
/* 画像・動画を少し明るく鮮やかにして背景から際立たせる */
.top_about_slide video,
.top_movie_str_img video,
.top_role_image img, .top_role_stkholder_image img, .top_role_stkholder_image video,
.top_usecase_list .item_img img,
.mega_menu_item_img img, .nav_main_list_sub_item_img img,
.top_power_img img {
    filter: saturate(1.08) brightness(1.04) contrast(1.02);
}

/* ===== 明るい青背景上での可読性確保 ===== */
.global_nav .main_nav li a:not(.mega_menu_item),
.header_logo a {
    font-weight: 700 !important;
    text-shadow: 0 1px 6px rgba(6, 18, 31, .35);
}
/* Logo "Forte フォルテ" luôn trên 1 dòng, không wrap */
.header_box .inner .header_logo { width: auto !important; flex: 0 0 auto; }
.forte-header-logo a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    text-shadow: none !important;
}
.forte-header-logo__img {
    display: block;
    width: auto !important;
    height: clamp(50px, 4.4vw, 68px) !important;
    max-width: none;
    object-fit: contain;
    border-radius: 5px;
    filter: drop-shadow(0 3px 10px rgba(6, 18, 31, .28));
}
.btn_humberger_box,
.btn_humberger_box .btn_humberger,
.btn_humberger_box .btn_humberger * {
    -webkit-tap-highlight-color: transparent;
}
.btn_humberger_box .btn_humberger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 46px !important;
    height: 64px !important;
    perspective: 900px;
    transform-style: preserve-3d;
    background: transparent !important;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.btn_humberger_box .btn_humberger .circle {
    display: none !important;
}
.btn_humberger_box .btn_humberger .forte-menu-icon {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* backface-visibilityはrotatorのfilter平坦化と相性が悪いため使わず、
       opacity切替(rotator内ルール)で表裏を制御する */
}
body.open .header_box {
    z-index: 10010;
}
.btn_humberger_box .btn_humberger .forte-menu-icon-rotator {
    display: block;
    width: 44px;
    height: 44px;
    position: relative;
    flex: 0 0 auto;
    margin-bottom: 2px;
    perspective: 900px;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.22, .8, .22, 1);
    will-change: transform;
    filter: drop-shadow(0 2px 8px rgba(6, 18, 31, .2));
}
.btn_humberger_box .btn_humberger:active,
.btn_humberger_box .btn_humberger:focus {
    background: transparent !important;
}
.btn_humberger_box .btn_humberger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: 4px;
}
.btn_humberger_box .btn_humberger .forte-menu-icon-rotator .forte-menu-icon {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* rotatorのfilterで3D backfaceが平坦化されるため、回転の90°付近(0.16s〜)で
       opacityを短くクロスフェードして表裏を差し替える(ミラー反転表示の防止) */
    opacity: 1;
    transition: opacity .14s linear .16s;
}
.btn_humberger_box .btn_humberger .forte-menu-icon-rotator .forte-menu-icon--back {
    transform: rotateY(180deg);
    opacity: 0;
}
body.open .btn_humberger_box .btn_humberger .forte-menu-icon-rotator {
    transform: rotateY(180deg);
}
body.open .btn_humberger_box .btn_humberger .forte-menu-icon-rotator .forte-menu-icon--front {
    opacity: 0;
}
body.open .btn_humberger_box .btn_humberger .forte-menu-icon-rotator .forte-menu-icon--back {
    opacity: 1;
}
.btn_humberger_box .btn_humberger .txt {
    width: 52px !important;
}
.btn_humberger_box .btn_humberger .txt._close {
    display: grid !important;
    place-items: center;
    width: 28px !important;
    height: 24px;
    margin-bottom: 2px;
}
.btn_humberger_box .btn_humberger .txt._close .forte-close-logo {
    display: block;
    width: 18px;
    height: auto;
    object-fit: contain;
}
body.open .btn_humberger_box .btn_humberger .txt {
    bottom: -12px;
}
.op_global_nav .forte-menu-visual {
    position: relative;
    width: min(100%, 412px);
    margin: 24px auto 0;
}
.op_global_nav .forte-menu-visual img,
.op_global_nav .forte-menu-visual .forte-menu-visual__video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(6, 18, 31, .24);
    object-fit: cover;
}
.forte-menu-visual__sound {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(6, 18, 31, .62);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.forte-menu-visual__sound[aria-pressed="true"] {
    background: rgba(37, 99, 165, .88);
}

/* menu内 VN SHOPバナー (動画と同じ幅)。footerと同じ
   .vnshop-ad_link/.vnshop-ad_slide 構造で2枚交互フェード表示する */
.op_global_nav .forte-menu-vnshop {
    width: min(100%, 412px);
    margin: 22px auto 0;
}
.op_global_nav .forte-menu-vnshop .vnshop-ad_link {
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(6, 18, 31, .22);
}

/* header logo: タップでカード裏返し (表=Forteロゴ / 裏=白カード+X JAPANロゴ) */
.forte-header-logo {
    perspective: 900px;
}
.forte-header-logo__flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .72s cubic-bezier(.22, .8, .22, 1);
    will-change: transform;
    cursor: pointer;
}
.forte-header-logo__flip.is-flipped {
    transform: rotateY(180deg);
}
.forte-header-logo__face--front {
    display: block;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.forte-header-logo__face--back {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 5px;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 3px 10px rgba(6, 18, 31, .28);
}
.forte-header-logo__back-img {
    /* Xロゴは正方形素材。カード(約1.93:1)の高さ74%相当=幅38%で中央収め。
       style.cssの .header_logo img { width:100% } より優先させる */
    display: block;
    width: 38% !important;
    height: auto !important;
    object-fit: contain;
}

/* MENU顔アイコン: タップごとの絵文字ポップ */
.forte-menu-emoji-pop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10020;
}
.forte-menu-emoji-pop_particle {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 17px;
    line-height: 1;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.68);
    animation: forteKenParticle 1.1s ease-out forwards;
    will-change: transform, opacity;
}
.common_hd .ttl, .common_hd .en,
.catchcopy h2, .catchcopy .english,
.top_power .power_main, .top_about_copy .read {
    text-shadow: 0 2px 10px rgba(6, 18, 31, .3);
}
._txtFilter {
    filter: drop-shadow(0 2px 6px rgba(6, 18, 31, .45));
}

/* ===== headerのはみ出し防止 (nav項目が多いため) ===== */
@media screen and (min-width: 1024px) {
    .header_box .inner {
        width: calc(100% - clamp(2rem, 4vw, 5rem)) !important;
        column-gap: clamp(16px, 2.6vw, 40px) !important;
    }
    .header_box .inner .header_logo { width: auto !important; }
    .global_nav .main_nav { gap: clamp(10px, 1.5vw, 22px) !important; }
    .global_nav .main_nav li a:not(.mega_menu_item) {
        font-size: clamp(13px, 1.05vw, 15px) !important;
        white-space: nowrap;
    }
    .header_btnWrap { gap: 8px !important; }
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    .header_box .inner { column-gap: 14px !important; }
    .global_nav .main_nav { gap: 8px !important; }
    .global_nav .main_nav li a:not(.mega_menu_item) { font-size: 13px !important; }
    .forte-header-logo__img { height: 60px !important; }
    .op_global_nav .forte-menu-visual { width: min(100%, 392px); }
    .op_global_nav .forte-menu-vnshop { width: min(100%, 392px); }
}

@media screen and (max-width: 767px) {
    .top_main,
    .forte-events,
    .forte-price,
    .top_about .inner,
    .top_movie_str .inner,
    .top_roadmap .inner,
    .top_usecase .inner,
    .top_power .inner {
        --forte-sp-gutter: 5vw;
    }
    .forte-header-logo__img { height: 50px !important; }
    .btn_humberger_box .btn_humberger .forte-menu-icon-rotator { width: 46px; height: 46px; }
    .btn_humberger_box { width: 60px; height: 66px; }
    .op_global_nav .forte-menu-visual {
        width: min(88vw, 360px);
        margin-top: 16px;
    }
    .op_global_nav .forte-menu-vnshop {
        width: min(88vw, 360px);
        margin-top: 12px;
    }
    .op_global_nav .forte-menu-visual img,
    .op_global_nav .forte-menu-visual .forte-menu-visual__video {
        border-radius: 16px;
    }
    .top_about .top_about_slide > div,
    .top_movie_str_img .item,
    .top_role_image picture,
    .top_role_stkholder_image,
    .top_power .inner .top_power_img > div,
    .top_usecase .item_img {
        border-radius: 14px !important;
    }
    .top_about .top_about_slide > div video,
    .top_movie_str_img .item picture img,
    .top_role_image picture img,
    .top_role_stkholder_image picture img,
    .top_role_stkholder_image video,
    .top_power .inner .top_power_img > div img,
    .top_usecase .item_img picture img {
        border-radius: inherit !important;
    }

    .forte-events_hd,
    .forte-price_hd,
    .top_about .common_hd,
    .top_role_ttl,
    .top_roadmap_ttl,
    .top_movie_str_ttl,
    .top_power .top_power_hd,
    .top_usecase {
        text-align: left !important;
    }

    .forte-events_title,
    .forte-price_title,
    .top_about .common_hd .ttl,
    .top_role_ttl .ttl.__jp,
    .top_roadmap_ttl .ttl.__jp,
    .top_movie_str_ttl .ttl.__jp,
    .top_power .top_power_hd .hd._main,
    .top_usecase_hd {
        display: block !important;
        width: fit-content !important;
        margin-inline: 0 !important;
        font-size: clamp(1.8rem, 5vw, 2.15rem) !important;
        line-height: 1.32 !important;
        letter-spacing: .01em !important;
        color: #fff !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: currentColor !important;
        /* UX30: 425px未満でもdeco見出しは他幅と同じdifference合成にする
           (旧: mix-blend-mode:normal がここだけ残っていた) */
        text-shadow:
            0 0 20px rgba(122, 190, 255, .38),
            0 0 40px rgba(255, 255, 255, .18),
            0 16px 34px rgba(0, 0, 0, .72),
            0 5px 16px rgba(0, 0, 0, .68) !important;
        filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55)) !important;
        mix-blend-mode: difference !important;
        isolation: auto !important;
    }

    .forte-events_title::after,
    .forte-price_title::after,
    .top_about .common_hd .ttl::after,
    .top_role_ttl .ttl.__jp::after,
    .top_roadmap_ttl .ttl.__jp::after,
    .top_movie_str_ttl .ttl.__jp::after,
    .top_power .top_power_hd .hd._main::after,
    .top_usecase_hd::after {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .forte-price_hd { text-align: left !important; }
    .forte-price_title::after { margin: 14px 0 0 !important; }

    .top_about .common_hd .ttl .anim__fill {
        display: none !important;
    }
    .top_about .common_hd .ttl .anim__str {
        opacity: 1 !important;
        transition: none !important;
        background: none !important;
        color: #fff !important;
        filter: none !important;
    }
    .top_about .common_hd .ttl .anim__str._txtFilter {
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
    }
    .top_about .top_about_copy {
        width: 100% !important;
        margin: 28px auto 0 !important;
        padding-inline: var(--forte-sp-gutter) !important;
        box-sizing: border-box !important;
    }
    .top_about .top_about_copy_inner {
        width: 100% !important;
        margin-left: 0 !important;
    }
    .top_about .top_about_copy_inner {
        position: relative;
    }
    .top_about .top_about_copy .read {
        margin-bottom: 48px !important;
    }
    .top_about .top_about_copy p {
        margin-inline: 0 !important;
    }
    .top_about .top_about_slide {
        width: 100% !important;
        max-width: none !important;
        margin: 32px auto 54px !important;
        padding-inline: var(--forte-sp-gutter) !important;
        box-sizing: border-box !important;
    }
    .top_about_accord_wrap {
        width: 100% !important;
        padding-top: 18vw !important;
        box-sizing: border-box !important;
    }
    .top_about_accord {
        margin-inline: var(--forte-sp-gutter) !important;
    }
    .top_role_image {
        width: 100% !important;
        margin-top: 32px !important;
    }
    .top_role_image picture {
        display: block;
        width: 100% !important;
        aspect-ratio: 1180 / 580;
    }
    .top_role_image picture img {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    .top_role_stkholder_image {
        width: 100% !important;
    }
    .top_power .inner .top_power_img {
        width: 100% !important;
        margin-inline: auto !important;
    }
    .top_power .inner .top_power_img > div {
        overflow: hidden;
    }
    .top_movie_str_img {
        width: 100% !important;
    }
    .top_movie_str .inner,
    .top_roadmap .inner,
    .top_usecase .inner,
    .top_power .inner,
    .forte-events_inner,
    .forte-price_inner {
        width: 100% !important;
        padding-inline: var(--forte-sp-gutter) !important;
        box-sizing: border-box !important;
    }
    .top_about .inner,
    .top_about .top_about_copy,
    .top_about .top_about_accord_wrap,
    .top_about .top_about_accord {
        box-sizing: border-box !important;
    }
    .top_movie_str .top_movie_str_wrap {
        margin-top: 34px !important;
    }
    .top_usecase_list {
        margin-inline: 0 !important;
    }
    .top_usecase_list .item {
        width: 100% !important;
    }
    .top_usecase .item_img {
        width: 100% !important;
    }
    .top_usecase .item_img picture img {
        width: 100% !important;
    }
    .top_roadmap .top_roadmap_ttl,
    .top_movie_str_ttl,
    .top_usecase_hd,
    .top_power .top_power_hd,
    .forte-events_hd,
    .forte-price_hd {
        margin-bottom: 22px !important;
    }
    .top_power .top_power_wrap {
        margin-top: 34px !important;
    }
    .top_power .inner .top_power_img > div {
        width: 100% !important;
    }
    .top_movie_str_img .item {
        width: 100% !important;
    }
    .top_roadmap_txt {
        margin-top: 28px !important;
    }
}

/* ===== "What Makes Forte" 3連動画 ===== */
.top_about .top_about_slide {
    max-width: 1180px !important;
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: clamp(120px, 14vw, 200px) !important;
}
/* Mobile: 段違いモザイク — 上に大1本、下に小2本を互い違いに */
@media screen {
    .top_about .top_about_slide {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
        width: 90% !important;
        max-width: 480px !important;
        margin: 40px auto 64px !important;
    }
    .top_about .top_about_slide > div,
    .top_about .top_about_slide .slide01,
    .top_about .top_about_slide .slide02,
    .top_about .top_about_slide .slide03 {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
    /* video 1: 上段いっぱいに大きく */
    .top_about .top_about_slide .slide01 {
        grid-column: 1 / -1 !important;
    }
    /* video 2: 左列、少し下げて段違いに */
    .top_about .top_about_slide .slide02 {
        grid-column: 1 !important;
        margin-top: 22px !important;
    }
    /* video 3: 右列、高めに(段違い) */
    .top_about .top_about_slide .slide03 {
        grid-column: 2 !important;
    }
    .top_about .top_about_slide > div video {
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(6, 18, 31, .3) !important;
    }
}

/* ===== セクション見出し: メインタイトル並みに大きく太く(全セクション統一) ===== */
.top_about .common_hd .ttl,
.top_role_ttl .ttl.__jp,
.top_roadmap_ttl .ttl.__jp,
.top_movie_str_ttl .ttl.__jp,
.top_power .top_power_hd .hd._main,
.top_usecase_hd {
    font-size: clamp(28px, 4.5vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: .01em !important;
    padding-top: 0.12em !important;     /* 日本語の背の高い字が上で切れないよう余白を確保 */
    overflow: visible !important;        /* background-clip:text がcropされないように */
}
/* 元style.cssの::before「line-heightトリム」を無効化 (負マージンが文字を切るため) */
.top_role_ttl .ttl.__jp::before,
.top_roadmap_ttl .ttl.__jp::before,
.top_movie_str_ttl .ttl.__jp::before,
.top_power .top_power_hd .hd._main::before {
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
}
/* 明るい青の下線 (.forte-events_title::after / .forte-price_title::after と統一) */
.top_about .common_hd .ttl::after,
.top_role_ttl .ttl.__jp::after,
.top_roadmap_ttl .ttl.__jp::after,
.top_movie_str_ttl .ttl.__jp::after,
.top_power .top_power_hd .hd._main::after,
.top_usecase_hd::after {
    content: "" !important;
    display: block !important;
    width: 96px !important;
    height: 2px !important;
    margin: 16px 0 0 !important;
    background: #9fdcff !important;
    box-shadow: 0 0 6px rgba(159, 220, 255, .35) !important;
    border-radius: 2px !important;
    mix-blend-mode: screen !important;
    block-size: 2px !important;
    inline-size: 96px !important;
    margin-block-start: 16px !important;
    transform: scaleX(var(--forte-line-scale, 1)) !important;
    transform-origin: left center !important;
}

/* Line reveal: JS (forte-section-lines.js) drives --forte-line-scale via GSAP/ScrollTrigger */
@media (prefers-reduced-motion: reduce) {
    .forte-line-anim {
        --forte-line-scale: 1 !important;
    }
}

/* ===== Major image surfaces: unify radius ===== */
.top_about .top_about_slide > div,
.top_movie_str_img .item,
.top_role_image picture,
.top_role_stkholder_image,
.top_power .inner .top_power_img > div,
.top_usecase .item_img {
    border-radius: 12px;
    overflow: hidden;
}
.top_about .top_about_slide > div video,
.top_movie_str_img .item picture img,
.top_role_image picture img,
.top_role_stkholder_image picture img,
.top_role_stkholder_image video,
.top_power .inner .top_power_img > div img,
.top_usecase .item_img picture img {
    border-radius: inherit;
}
.top_role_stkholder_image::before,
.top_usecase .item_img::before {
    border-radius: inherit;
}
/* ===== top_role: 動画に差し替えたため、下に敷いていた薄い水色グラデを無効化 ===== */
.top_role_stkholder_image::before {
    content: none;
}
.top_role_stkholder_image video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
@media screen and (max-width: 767px) {
    /* 横長で大きく見せるため、左右をガター分だけ画面幅いっぱいに寄せる */
    .top_role_stkholder_image {
        width: auto !important;
        flex-basis: 100%;
        margin-inline: calc(var(--forte-sp-gutter-fix, 6vw) * -1);
        margin-top: 12px;
    }
    .top_role_stkholder_image video {
        border-radius: 0;
    }
}

/* ===== top_role: 「Forteの楽しみ方」本文をガラス風2カードに ===== */
.forte-role-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
}
.forte-role-card {
    background: rgba(90, 70, 190, .22);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 18px;
    padding: 22px 22px 24px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 36px rgba(6, 18, 31, .22);
}
.forte-role-card_hd {
    display: flex;
    /* 2カラム時、タイトルが2行になるカードでも番号とタイトル上端が揃うように上揃え */
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.forte-role-card_num {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #7cc8ff;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(124, 200, 255, .16);
    border: 1px solid rgba(124, 200, 255, .4);
}
.forte-role-card_ttl {
    margin: 0;
    font-size: clamp(17px, 4.6vw, 20px);
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}
.forte-role-card_txt {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #cfe4f7;
}
@media screen and (min-width: 640px) {
    .forte-role-cards {
        grid-template-columns: 1fr 1fr;
    }

    /* 2カラム時: 片方のタイトルが2行になっても本文開始位置が左右で揃うよう、
       ヘッダー部をタイトル2行分の高さで確保する */
    .forte-role-card_hd {
        min-height: 52px;
    }
}

/* ===== Mega nav mobile ===== */
.op_global_nav .nav_main_list > a { display: flex; align-items: center; gap: 10px; }
.op_global_nav .nav_main_list_txt {
    white-space: nowrap;
    line-height: 1.3;
    font-size: clamp(1.3rem, 3.6vw, 1.6rem);
}
.op_global_nav > .inner {
    padding-top: 112px !important;
    /* 実機の下部ナビバーにVN SHOPバナーが隠れないようsafe-area込みで確保 */
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
}
.op_global_nav > .inner .nav_main {
    padding-top: 10px !important;
}
/* SP: 項目間の横線を削除し、余白を詰めてリストをコンパクトに(タップ領域は確保) */
.op_global_nav > .inner .nav_main_list {
    border-top: none !important;
}
.op_global_nav > .inner .nav_main_list:last-child {
    border-bottom: none !important;
}
.op_global_nav > .inner .nav_main a:not(.nav_main_list_sub_item) {
    padding: 16px 0 !important;
}

/* ===== イベントセクション (Events) ===== */
/* z-indexを付けるとsectionがstacking context(=isolated group)になり、
   内側の見出しdecoのmix-blend-modeが実機Safariで背景と合成されないため外す */
.forte-events { position: relative; padding: 64px 6vw 72px; }
.forte-events_inner { max-width: 760px; margin: 0 auto; }
.forte-events_hd { margin: 0 0 28px; }
.forte-events_title { display:block; font-family: var(--forte-sans); font-size:clamp(28px,4.5vw,40px); font-weight:800; color:#fff; line-height:1.15; text-shadow:0 2px 10px rgba(6,18,31,.35); }
.forte-events_title::after { content:""; display:block; width:96px; height:2px; margin:14px 0 0; background:#9fdcff; box-shadow:0 0 6px rgba(159,220,255,.35); border-radius:2px; mix-blend-mode:screen; transform:scaleX(var(--forte-line-scale, 1)); transform-origin:left center; }
.forte-events_sub { display:block; margin:8px 0 0; font-size:15px; color:#0c2e4d; line-height:1.6; }

/* ===== 直近イベントのカウントダウン: イベント一覧と同じブロック内の帯 ===== */
.forte-countdown {
    width: auto;
    box-sizing: border-box;
    margin-left: calc(var(--forte-sp-gutter-fix, 6vw) * -1);
    margin-right: calc(var(--forte-sp-gutter-fix, 6vw) * -1);
    margin-top: 24px;
    margin-bottom: 28px;
    padding: 22px var(--forte-sp-gutter-fix, 6vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    background: linear-gradient(135deg, rgba(255, 111, 45, .58) 0%, rgba(200, 42, 16, .68) 100%);
    border-top: 1px solid rgba(255, 170, 110, .45);
    border-bottom: 1px solid rgba(255, 170, 110, .45);
    box-shadow: 0 4px 20px rgba(200, 60, 20, .32);
    text-align: center;
}
.forte-countdown[hidden] { display: none; }
/* イベントブロック内で中央寄せ (full-bleedにはしない) */
.forte-countdown_inner {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
    text-align: center;
}
.forte-countdown_title {
    margin: 0 0 12px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #ffe8d6;
}
.forte-countdown_prefix:empty { display: none; }
.forte-countdown_grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.forte-countdown_unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
}
.forte-countdown_value {
    font-family: var(--forte-sans);
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 14px rgba(255, 180, 90, .55);
}
.forte-countdown_unit-label {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .05em;
    color: #ffd8b8;
}

.forte-events_list { list-style:none; margin:8px 0 0; padding:0; }
.forte-events_item { border-bottom:1px solid rgba(6,36,63,.28); }
.forte-events_item:first-child { border-top:1px solid rgba(6,36,63,.28); }
.forte-events_link { display:flex; align-items:center; gap:16px; padding:22px 4px; text-decoration:none; color:inherit; transition:background .2s; }
.forte-events_link:hover { background:rgba(6,36,63,.08); }
.forte-events_body { flex:1 1 auto; min-width:0; }
.forte-events_meta { display:flex; align-items:center; gap:12px; margin:0 0 8px; flex-wrap:wrap; }
.forte-events_date { font-family: var(--forte-sans); font-size:14px; letter-spacing:.06em; color:#06243f; font-weight:700; }
.forte-events_cat { display:inline-block; background:#06243f; border:1px solid #06243f; color:#fff; font-size:12px; padding:3px 11px; border-radius:999px; letter-spacing:.04em; font-weight:600; }
/* 「終了」バッジ — 通常は非表示、.is-ended の時のみ表示 */
.forte-events_ended { display:none; }
.forte-events_item.is-ended .forte-events_ended {
    display:inline-block;
    background: linear-gradient(135deg, rgba(225, 35, 50, .88), rgba(255, 105, 45, .8));
    border:1px solid rgba(255, 160, 160, .75);
    color:#fff; font-size:11px; padding:3px 10px; border-radius:999px; letter-spacing:.04em; font-weight:700;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(200, 30, 40, .35);
    text-shadow: 0 1px 4px rgba(120, 0, 10, .5);
}
/* 終了済みitem: 暗いガラス調カードで少し薄く、ネオン発光なし */
.forte-events_item.is-ended {
    position: relative;
    margin-top: 24px;
    background: rgba(6, 16, 30, .5) !important;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.forte-events_item.is-ended .forte-events_link { opacity:.62; padding-left:14px; padding-right:14px; }
.forte-events_item.is-ended .forte-events_link:hover { opacity:.85; }
.forte-events_item.is-ended .forte-events_name {
    font-weight: 600;
    color: rgba(255, 255, 255, .68) !important;
    text-shadow: none !important;
}
.forte-events_item.is-ended .forte-events_date {
    color: rgba(207, 228, 247, .55) !important;
    text-shadow: none !important;
}
.forte-events_item.is-ended .forte-events_cat {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    color: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: none !important;
    box-shadow: none !important;
}
.forte-events_item.is-ended .forte-events_arrow {
    color: rgba(255, 255, 255, .4) !important;
}
.forte-events_name { margin:0; font-size:17px; line-height:1.55; color:#fff; font-weight:700; text-shadow:0 1px 6px rgba(6,18,31,.3); }
.forte-events_arrow { flex:0 0 auto; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:#06243f; }
.forte-events_more { display:flex; justify-content:center; margin:36px 0 0; }
.forte-events_morebtn { display:inline-flex; align-items:center; justify-content:center; min-width:280px; padding:16px 28px; border:1px solid #06243f; border-radius:8px; background:#06243f; color:#fff; font-weight:700; font-size:15px; text-decoration:none; transition:background .2s,border-color .2s,transform .15s; }
.forte-events_morebtn:hover { background:#0c2e4d; transform:translateY(-1px); }

/* ===== 直近開催のliveアイテム: はっきりしたネオンでゆっくり明滅 ===== */
@keyframes forte-live-neon-pulse {
    0%, 100% {
        text-shadow: 0 0 6px rgba(255, 255, 255, .8), 0 0 14px rgba(124, 200, 255, .8), 0 0 26px rgba(216, 92, 255, .55);
    }
    50% {
        text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 18px rgba(124, 200, 255, .95), 0 0 34px rgba(216, 92, 255, .75);
    }
}
@keyframes forte-live-neon-pulse-date {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, .75), 0 0 12px rgba(45, 220, 255, .7);
    }
    50% {
        text-shadow: 0 0 8px rgba(255, 255, 255, .9), 0 0 18px rgba(45, 220, 255, .9);
    }
}
@keyframes forte-live-neon-pulse-box {
    0%, 100% {
        box-shadow: 0 0 10px rgba(124, 200, 255, .5), 0 0 20px rgba(216, 92, 255, .3);
    }
    50% {
        box-shadow: 0 0 16px rgba(124, 200, 255, .8), 0 0 30px rgba(216, 92, 255, .5);
    }
}
@keyframes forte-live-neon-pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(124, 200, 255, .7));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(216, 92, 255, .8));
    }
}
@keyframes forte-live-neon-pulse-card {
    0%, 100% {
        box-shadow: 0 0 18px rgba(124, 200, 255, .65), 0 0 36px rgba(216, 92, 255, .45), inset 0 0 18px rgba(124, 200, 255, .16);
    }
    50% {
        box-shadow: 0 0 26px rgba(124, 200, 255, .85), 0 0 48px rgba(216, 92, 255, .6), inset 0 0 24px rgba(124, 200, 255, .24);
    }
}
.forte-events_item.is-next-live {
    position: relative;
    border-color: rgba(124, 200, 255, .6) !important;
    background: rgba(5, 20, 45, .42);
    border-radius: 10px;
    animation: forte-live-neon-pulse-card 2.2s ease-in-out infinite;
}
.forte-events_item.is-next-live .forte-events_link {
    padding-left: 14px;
    padding-right: 14px;
}
.forte-events_item.is-next-live .forte-events_date {
    color: #fff !important;
    animation: forte-live-neon-pulse-date 2.2s ease-in-out infinite;
}
.forte-events_item.is-next-live .forte-events_name {
    animation: forte-live-neon-pulse 2.2s ease-in-out infinite;
}
.forte-events_item.is-next-live .forte-events_cat {
    background: rgba(124, 200, 255, .26) !important;
    border-color: rgba(216, 92, 255, .75) !important;
    color: #fff !important;
    animation: forte-live-neon-pulse-box 2.2s ease-in-out infinite;
}
.forte-events_item.is-next-live .forte-events_arrow {
    color: #7cc8ff !important;
    animation: forte-live-neon-pulse-glow 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .forte-events_item.is-next-live,
    .forte-events_item.is-next-live .forte-events_date,
    .forte-events_item.is-next-live .forte-events_name,
    .forte-events_item.is-next-live .forte-events_cat,
    .forte-events_item.is-next-live .forte-events_arrow {
        animation: none;
    }
}

/* ===== About cinema: フルスクリーン動画演出 (SP優先) ===== */
.forte-about-cinema {
    position: relative;
    min-height: 340vh;
    min-height: 340dvh;
    margin: 24px 0 40px;
    --forte-about-progress: 0;
    --forte-about-scale-progress: 0;
    --forte-about-scale: 0.6;
    --forte-about-overlay: 0;
    --forte-about-title-opacity: 0;
    --forte-about-body-opacity: 0;
    --forte-about-text-translate: 16px;
}
.forte-about-cinema_sticky {
    position: sticky;
    top: 0;
    /* svh(最小ビューポート)だとブラウザUI格納後に上下へ背景の隙間が出るため、
       現在の可視高に追従するdvhを優先する */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.forte-about-cinema_frame {
    position: relative;
    width: min(100vw, 1200px);
    height: 100%;
    overflow: hidden;
    border-radius: calc(28px * (1 - var(--forte-about-scale-progress, 0)));
    transform: scale(var(--forte-about-scale, 0.6));
    transform-origin: center center;
    will-change: transform, border-radius;
}
@media screen {
    .forte-about-hd-pc-only { display: none !important; }
    /* style.css の body#home .top_about { overflow-x: clip } は .top_about を新しい
       scroll container にしてしまい、.forte-about-cinema_sticky の position:sticky が
       viewport ではなく親ブロック基準でクリップされて動画がスクロールで流れてしまう。 */
    body#home .top_about {
        overflow-x: visible !important;
    }
    /* .top_about .inner のwidth/paddingから抜けて viewport基準のfull-bleedにする */
    .forte-about-cinema {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        min-height: 620vh;
        min-height: 620dvh;
    }
    .forte-about-cinema_sticky {
        position: relative;
        top: auto;
        height: 100vh;
        height: 100dvh;
        overflow: visible;
    }
    /* Frame を viewport center に絶対固定し、pin 中に上へ逃がさない。
       tablet(768-1023)は動画の実比率(480/854)に合わせた縦長中央表示。 */
    .forte-about-cinema_frame {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(calc(100vw + 12px), 100vh * 480 / 854);
        width: min(calc(100vw + 12px), 100dvh * 480 / 854);
        height: min(100vh, 100vw * 854 / 480);
        height: min(100dvh, 100vw * 854 / 480);
        aspect-ratio: 480 / 854;
        background: transparent;
        transform: translate3d(-50%, -50%, 0) scale(var(--forte-about-scale, 0.6));
    }
    .forte-about-cinema_video {
        object-fit: cover;
        /* frame幅=100vwちょうどだとサブピクセル丸めで左右に背景線が出るため、
           frameのoverflow:hidden内でわずかに拡大してエッジを消す */
        transform: scale(1.015);
    }
}
/* スマホ帯: min(100vw, 100svh*480/854) 方式だと縦の短い実機で第2項が勝ち、
   frame幅が画面幅より狭くなって左右に背景が見える(425x700で左右約16px)。
   スマホではframeをviewport全面にし、動画は object-fit: cover のクロップで埋める。 */
@media screen and (max-width: 767px) {
    /* 初期状態は動画実比率(480/854)のframeで左右を切らずに見せ、
       pin進行(--forte-about-scale-progress 0→1)に合わせて全面(+8px)へ広げる。
       完了時はviewportを8px分覆うため左右線は出ない。scaleは1でcapし過剰拡大を防ぐ */
    .forte-about-cinema_frame {
        aspect-ratio: auto;
        width: calc(min(100vw, 100vh * 480 / 854) * (1 - var(--forte-about-scale-progress, 0)) + (100vw + 8px) * var(--forte-about-scale-progress, 0));
        width: calc(min(100vw, 100dvh * 480 / 854) * (1 - var(--forte-about-scale-progress, 0)) + (100vw + 8px) * var(--forte-about-scale-progress, 0));
        height: calc(min(100vh, 100vw * 854 / 480) * (1 - var(--forte-about-scale-progress, 0)) + (100vh + 8px) * var(--forte-about-scale-progress, 0));
        height: calc(min(100dvh, 100vw * 854 / 480) * (1 - var(--forte-about-scale-progress, 0)) + (100dvh + 8px) * var(--forte-about-scale-progress, 0));
        transform: translate3d(-50%, -50%, 0) scale(min(var(--forte-about-scale, 0.6), 1));
    }

    /* frameが完了時に全面を覆うため追加のvideo拡大は不要 */
    .forte-about-cinema_video {
        transform: none;
    }
}
.forte-about-cinema_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.forte-about-cinema_overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--forte-about-overlay, 0);
}
.forte-about-cinema_text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    color: #fff;
    opacity: 1;
    /* UX30: 親コンテナのtransform+will-changeが合成レイヤー(=isolated group)を作り、
       内側タイトルの mix-blend-mode: difference が同一frame内のvideoと
       合成されず白ベタになるため外す。出現演出は子のopacityのみで行う */
    transform: none;
    will-change: auto;
}
.forte-about-cinema_title {
    margin: 0 0 12px;
    font-family: var(--forte-sans);
    font-size: clamp(34px, 8.6vw, 54px);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    /* 同一フレーム内の動画がbackdropになるためblend表現が成立しやすい */
    mix-blend-mode: difference;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .65);
    opacity: var(--forte-about-title-opacity, 0);
    /* UX30: Safari実機ではtransition中の合成レイヤーがblendを白落ちさせる疑いが
       あるため外す(opacityはスクロール連動varで十分滑らか) */
}
.forte-about-cinema_desc {
    margin: 0;
    max-width: 92%;
    font-size: clamp(17px, 4.4vw, 21px);
    line-height: 1.6;
    color: #fff;
    mix-blend-mode: difference;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
    opacity: var(--forte-about-body-opacity, 0);
}
@media (prefers-reduced-motion: reduce) {
    .forte-about-cinema_frame {
        transform: none;
        border-radius: 0;
    }
}

[data-scrollmaskfadein] {
    --show-progress-before: -10%;
    --show-progress-after: 0%;
    -webkit-mask-image: linear-gradient(160deg,
        #000 0%,
        #000 var(--show-progress-before),
        rgba(0, 0, 0, 0) var(--show-progress-after),
        rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(160deg,
        #000 0%,
        #000 var(--show-progress-before),
        rgba(0, 0, 0, 0) var(--show-progress-after),
        rgba(0, 0, 0, 0) 100%);
}
.top_about .top_about_copy {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: clamp(156px, 34svh, 320px);
    padding-bottom: clamp(140px, 34svh, 320px);
}
.top_about .top_about_copy_inner {
    position: relative;
    padding-top: clamp(34px, 6.6svh, 68px);
    color: #fff;
    text-shadow: 0 3px 18px rgba(6, 18, 31, .58);
}
/* 見出し裏の大きな装飾文字。読ませる本文ではなく背景寄りの飾り。
   .top_about_copy_inner は data-scrollmaskfadein のスクロール連動マスクを持ち、
   その範囲外(負のtopオフセット等)に置くとマスクにクリップされて見えなくなるため、
   マスク対象の外側(inner の兄弟)に通常フローで配置し、本文とも重ならないようにする。
   見え方はヒーローh2の装飾(mix-blend-mode: difference + 補助シャドウ)に寄せる。 */
.forte-about-copy_deco {
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    margin: 0 0 clamp(96px, 24vw, 140px);
    font-family: var(--forte-sans);
    font-weight: 800;
    font-size: clamp(90px, 26vw, 200px);
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    mix-blend-mode: difference;
    text-shadow:
        0 0 20px rgba(122, 190, 255, .38),
        0 0 40px rgba(255, 255, 255, .18),
        0 16px 34px rgba(0, 0, 0, .72),
        0 5px 16px rgba(0, 0, 0, .68);
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55));
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
/* SP Hero: 実機で成功しているabout deco(上記)をそのまま流用し、
   位置・サイズだけHero用に上書きする。blend条件側は一切変えない。
   置き場所はtop_main直下: top_main_itemboxはposition:absolute+z-index:11で
   stacking context(=isolated group)を作り、その内側のblend要素は実機Safariで
   背景と合成されない。top_main自体はz-index autoなのでroot直系のまま重ねられる */
.forte-hero-copy-deco {
    position: absolute;
    left: 3.33%;
    bottom: calc(min(13.0769230769vw, 170px) + 118px);
    z-index: 12;
    margin: 0;
    font-size: clamp(72px, 24vw, 120px);
    line-height: 1.02;
}
@media screen and (max-width: 767px) {
    .forte-hero-copy-deco {
        bottom: calc(6.4102564103vw + 212px);
    }
}
.forte-about-copy_head {
    position: relative;
    z-index: 1;
    font-size: clamp(20px, 5.3vw, 25px) !important;
    line-height: 2.05 !important;
    letter-spacing: 0;
    margin-bottom: 76px !important;
    color: #fff !important;
    text-shadow: inherit;
}
/* UX29/31: シネマ動画下の本文。425px実機でまだ詰まって見えるとのことで
   段落間・行間をさらに大幅に広げる */
.forte-about-copy_body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 96px;
    color: #fff;
    text-shadow: inherit;
}
.forte-about-copy_body p {
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 2.35 !important;
    letter-spacing: 0;
}
.forte-about-copy_body p + p {
    margin-top: 0 !important;
}

/* ===== About memory videos ===== */
.forte-about-memory {
    position: relative;
    z-index: 2;
    margin: 32px 0 52px;
}
.forte-about-memory_inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 420px;
    margin: 0 auto;
}
.forte-about-memory_card {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: default;
    text-align: left;
    width: 100%;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.forte-about-memory_frame {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 24px;
    background: #02070c;
    aspect-ratio: 9 / 16;
    box-shadow: 0 18px 40px rgba(6, 18, 31, .24);
    transition: transform .18s ease, box-shadow .18s ease;
    pointer-events: none;
}
.forte-about-memory_video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
@media screen and (max-width: 767px) {
    .forte-about-memory {
        margin: 28px 0 44px;
    }
    .top_about .top_about_copy {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: clamp(180px, 46svh, 420px);
        padding-bottom: clamp(140px, 34svh, 320px);
    }
    /* UX31: このSPブロックがbase側の余白拡大に後勝ちして詰まったままだったため、
       ここ自体を大きく広げる */
    .forte-about-copy_head {
        font-size: 20px !important;
        line-height: 2.3 !important;
        margin-bottom: 76px !important;
    }
    .forte-about-copy_body {
        gap: 96px;
    }
    .forte-about-copy_body p {
        font-size: 18px !important;
        line-height: 2.35 !important;
    }
    /* 祖先のwidth/paddingに左右されず確実にviewport全幅へ(左右の背景線対策) */
    .forte-about-memory {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .forte-about-memory_inner {
        gap: 16px;
        /* 420px上限だと425px端末で左右に2.5pxずつ背景線が見えるため全幅にする */
        width: 100%;
        max-width: none;
    }

    /* サブピクセル丸めの縁線対策: frameのoverflow:hidden内でわずかに拡大 */
    .forte-about-memory_video {
        transform: scale(1.01);
    }
    .forte-about-memory_frame {
        border-radius: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-scrollmaskfadein] {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .forte-about-memory_card:focus-visible .forte-about-memory_frame,
    .forte-about-memory_card:hover .forte-about-memory_frame {
        transform: none;
    }
}

/* ===== Forteの想い: 2枚スライドショー (元画像1200x800、3:2を維持) ===== */
.meetken-slideshow {
    width: 100%;
    aspect-ratio: 3 / 2;
}
.meetken-slideshow .meetken-slide {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
    display:block;
    opacity:0; transition:opacity 1s ease-in-out;
}
.meetken-slideshow .meetken-slide.is-active { opacity:1; }

/* ===== Forteの想い: 日本語ページでは英語アクセント文言を出さない ===== */
html[lang="ja"] .top_movie_str_desc_label {
    display: none;
}
/* ===== 店舗情報・アクセス見出し: 全言語で英語サブラベルを表示 ===== */
@media screen {
    html[lang="ja"] .top_about_accord_head_ttlWrap .ttl {
        font-size: 2rem !important;
        line-height: 1.4 !important;
    }
}
/* ===== Forteの想い: タイトル/サブタイトル/本文の文字バランス調整(SP優先) ===== */
@media screen {
    .top_movie_str_desc_ttl {
        font-size: clamp(20px, 5.6vw, 26px) !important;
        line-height: 1.5 !important;
    }
    .top_movie_str_desc_txt {
        margin-top: 30px !important;
    }
    .top_movie_str_desc_txt .txt {
        line-height: 1.95 !important;
    }
    .top_movie_str_desc_txt .txt + .txt {
        margin-top: 24px;
    }
}

/* ===== 料金セクション (Pricing) ===== */
/* 前セクションの画像直下に見出しが来て詰まって見えるため、上に大きめの余白を確保 */
/* z-index禁止: 見出しdecoのblendをstacking contextで閉じ込めない(forte-events同様) */
.forte-price { position: relative; padding: 64px 6vw 80px; margin-top: clamp(120px, 22vw, 190px); }
.forte-price_inner { max-width: 1040px; margin: 0 auto; }
.forte-price_hd { margin: 0 0 32px; text-align: center; }
.forte-price_title { display:block; font-family: var(--forte-sans); font-size:clamp(28px,4.5vw,40px); font-weight:800; color:#fff; line-height:1.15; text-shadow:0 2px 10px rgba(6,18,31,.35); }
.forte-price_title::after { content:""; display:block; width:96px; height:2px; margin:14px auto 0; background:#9fdcff; box-shadow:0 0 6px rgba(159,220,255,.35); border-radius:2px; mix-blend-mode:screen; transform:scaleX(var(--forte-line-scale, 1)); transform-origin:left center; }
.forte-price_sub { display:block; margin:8px 0 0; font-size:15px; color:#0c2e4d; line-height:1.6; }
.forte-price_grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; }
.pcard { background:#0c2642; border:1px solid rgba(124,200,255,.25); border-radius:16px; padding:30px 26px 28px; box-shadow:0 12px 36px rgba(6,18,31,.25); display:flex; flex-direction:column; }
.pcard_label { align-self:flex-start; background:#1e90ff; color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; padding:4px 13px; border-radius:999px; }
.pcard_title { margin:16px 0 4px; font-size:23px; font-weight:800; color:#fff; }
.pcard_note { margin:0 0 20px; font-size:13.5px; color:#9fc6ea; line-height:1.6; }
.pcard_rows { list-style:none; margin:0; padding:0; border-top:1px solid rgba(124,200,255,.18); }
.prow { display:flex; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid rgba(124,200,255,.18); }
.prow_l { flex:1 1 auto; min-width:0; color:#dceefb; font-size:14.5px; line-height:1.55; }
.prow_l small { display:block; color:#8fb4d6; font-size:12px; margin-top:2px; }
.prow_v { flex:0 0 auto; text-align:right; color:#fff; font-weight:800; font-size:20px; white-space:nowrap; }
.prow_v span { display:block; font-size:11px; font-weight:500; color:#8fb4d6; }
.prow._free .prow_v { color:#7cffb0; font-size:16px; }
.pcard_extra { margin:20px 0 0; font-size:13px; color:#9fc6ea; line-height:1.75; background:rgba(124,200,255,.07); border-radius:10px; padding:16px 18px; }
.forte-price_cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:36px 0 0; }
.forte-price_btn { display:inline-flex; align-items:center; justify-content:center; min-width:240px; padding:15px 26px; border-radius:9px; font-weight:700; font-size:15px; text-decoration:none; transition:transform .15s, background .2s, border-color .2s; }
.forte-price_btn._fb {
    width: min(100%, 280px);
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .23), rgba(124, 200, 255, .11)),
        rgba(12, 38, 66, .36) !important;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(6, 18, 31, .24);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}
.forte-price_btn._fb:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(124, 200, 255, .16)),
        rgba(12, 38, 66, .46) !important;
    transform:translateY(-1px);
}

/* ===== Footer nav =====
   全デバイス共通: nav → VN SHOPバナー → コピーライト(最下部・中央寄せ)の縦積み */
.footer_function .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.footer_function .inner .footer_nav {
    order: 1;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
}
.footer_function .inner .footer_copyrights {
    order: 3;
    margin-top: 24px !important;
    text-align: center !important;
    font-size: 11.5px !important;
    line-height: 1.7;
}
.footer_function .inner .footer_nav li a { white-space: nowrap; }
@media screen {
    .footer_function .inner .footer_nav {
        display: grid !important;
        grid-template-columns: max-content max-content;
        column-gap: 48px;
        row-gap: 20px;
        justify-content: center;
        align-items: start;
        width: max-content !important;
        max-width: 100%;
        margin: 36px auto 0 !important;
    }
    .footer_function .inner .footer_nav li {
        width: auto !important;
        margin: 0 !important;
        justify-content: flex-start !important;
    }
    .footer_function .inner .footer_nav li a {
        white-space: nowrap;
        line-height: 1.4;
        justify-content: flex-start !important;
    }
}

/* ===== VN SHOP広告バナー — footer内に配置 ===== */
/* 全デバイス: navの下・コピーライトの上に中央寄せで配置 */
.vnshop-ad {
    width:80%;
    max-width:340px;
    margin:36px auto 0;
    order:2;
    opacity: 1;
}
.vnshop-ad_link {
    display:block; position:relative;
    width:100%; aspect-ratio:960/300;
    overflow:hidden;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.vnshop-ad_slide {
    position:absolute; inset:0;
    opacity:0;
    transition:opacity 1s ease-in-out;
    pointer-events:none;
}
.vnshop-ad_slide.is-active { opacity:1; pointer-events:auto; }
.vnshop-ad_slide img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.vnshop-ad_slide[data-lang]:not(.is-lang) { display:none; }
/* PC/iPad: モバイルと同じ縦積み(nav → banner中央 → copyright中央)に統一 */
@media screen and (min-width: 768px) {
    .vnshop-ad {
        width: 340px;
        max-width: 340px;
        margin: 40px auto 0;
    }
}

/* tablet: footer調整 — inner左右余白(バナー・コピーライトの端寄り防止)と顔画像拡大 */
@media screen and (min-width: 768px) {
    .footer_function .inner {
        padding-inline: clamp(28px, 5vw, 48px);
        box-sizing: border-box;
    }

    .footer_contact_intro {
        grid-template-columns: minmax(0, 1fr) 132px;
        column-gap: 28px;
        align-items: center;
        margin-top: 34px;
        padding-right: 12px;
    }

    .footer_contact_portrait {
        width: 132px;
        height: 132px;
        border-radius: 20px;
    }
}

/* ===== Hero video: modal phóng to ===== */
.hero-video-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: center; justify-content: center;
    background: rgba(6, 18, 31, .88);
    padding: 4vh 4vw; box-sizing: border-box;
    opacity: 0; transition: opacity .25s ease;
}
.hero-video-modal.is-open { display: flex; opacity: 1; }
.hero-video-modal_inner {
    position: relative; width: min(1100px, 96vw); max-height: 92vh;
    transform: scale(.96); transition: transform .25s ease;
}
.hero-video-modal.is-open .hero-video-modal_inner { transform: scale(1); }
.hero-video-modal_video {
    width: 100%; max-height: 92vh; display: block;
    border-radius: 12px; background: #000;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.hero-video-modal_close {
    position: absolute; top: -14px; right: -14px;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; cursor: pointer;
    background: #1e90ff; color: #fff;
    font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
    transition: background .2s, transform .15s;
}
.hero-video-modal_close:hover { background: #0d74e0; transform: scale(1.08); }
@media (max-width: 640px) {
    .hero-video-modal { padding: 0; }
    .hero-video-modal_inner { width: 100vw; }
    .hero-video-modal_video { border-radius: 0; }
    .hero-video-modal_close { top: 12px; right: 12px; }
}

/* ===== Accordion "Forteとは?": 旧オレンジのborder-imageを青系ボーダーへ ===== */
.top_about_accord {
    width: calc(100% - 24px);
    margin-inline: auto;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-image: none !important;
    background: rgba(90, 70, 190, .42) !important;
    border-radius: 20px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(12px) saturate(132%);
    backdrop-filter: blur(12px) saturate(132%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 18px 42px rgba(6, 18, 31, .24);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.top_about_accord_head {
    gap: clamp(14px, 3vw, 26px);
    padding: clamp(18px, 4vw, 28px) clamp(18px, 4.4vw, 34px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: visible;
}
.top_about_accord_head::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}
.top_about_accord_head_ttl {
    min-width: 0;
}
.top_about_accord_head_ttlWrap {
    min-width: 0;
}
.top_about_accord_head_btn {
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
}
.top_about_accord_head_btn::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 20px;
    height: 20px;
    background: url("../img/common/x-japan-logo-white.png") center center / contain no-repeat;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}
.top_about_accord_content {
    border-radius: 0 0 20px 20px;
    background: transparent;
    padding: 0 clamp(14px, 3.4vw, 28px) clamp(16px, 4vw, 32px);
}
.top_about_accord_content_inner {
    color: #e9f4ff;
}
.top_about_accord_desc_txt .txt,
.top_about_accord_company_ttl,
.top_about_accord_company_table_inner th,
.top_about_accord_company_table_inner td {
    color: #e9f4ff !important;
}
.top_about_accord[open] .top_about_accord_head {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}
.top_about_accord[open] .top_about_accord_head_btn::before {
    opacity: 1;
}
.top_about_accord[open] .top_about_accord_head_btn_line {
    opacity: 0;
}
.top_about_accord[open] {
    background: rgba(90, 70, 190, .46) !important;
}
.top_about_accord[open] .top_about_accord_content {
    background: transparent;
    padding-top: 2px;
}
.top_about_accord[open] .top_about_accord_content_inner {
    width: min(100%, calc(100% - 12px)) !important;
    margin: 0 auto !important;
    padding: clamp(22px, 5vw, 40px) clamp(18px, 4.4vw, 36px) clamp(26px, 5.4vw, 48px) !important;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(0, 0, 0, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    box-sizing: border-box;
}
.top_about_accord_desc_txt .txt span {
    display: block;
}
.top_about_accord_desc_txt .txt span + span {
    margin-top: 10px;
}
.top_about_accord_company .table_link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.forte-accord_icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: block;
}
.forte-accord_map {
    margin-top: 22px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .34);
}
.forte-accord_map iframe {
    display: block;
    width: 100% !important;
    height: clamp(260px, 58vw, 420px) !important;
}
.forte-map-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 280px);
    min-height: 46px;
    margin: 12px auto 0;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .23), rgba(124, 200, 255, .11)),
        rgba(12, 38, 66, .36);
    color: #fff !important;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(6, 18, 31, .24);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.forte-map-fallback:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(124, 200, 255, .16)),
        rgba(12, 38, 66, .46);
    transform: translateY(-1px);
}
.forte-map-fallback:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .78);
    outline-offset: 3px;
}
.forte-map-fallback--footer {
    width: min(100%, 280px);
}
@media screen and (max-width: 640px) {
    .forte-accord_map {
        border-radius: 14px;
    }
    .forte-accord_map iframe {
        height: 300px !important;
    }
    .forte-map-fallback {
        display: flex;
        width: min(100%, 280px);
        min-height: 52px;
        margin: 14px auto 0;
        font-size: 15px;
    }
}

/* ===== 「Forteの歩み」PC見出し: 1行維持で途中改行させない ===== */
.top_power .inner .top_power_copy .top_power_hd .hd {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
}
.top_power .inner .top_power_copy .top_power_hd .hd span {
    white-space: nowrap !important;
}
/* セクション見出し(h2)と内容が重複するため、画像下の小見出し/サブテキストは非表示 */
.top_power_copy .top_power_hd {
    display: none;
}

/* ===== 「Forteで過ごすシーン」: 各カード右の矢印(›)を非表示 ===== */
.top_usecase_list .item .link_arrow { display: none !important; }

/* ===== Forte roadmap: ANVICONS BusinessSection inspired scroll cards ===== */
.forte-roadmap_stage {
    position: relative;
}
@media screen {
    .top_roadmap_txt {
        margin-bottom: clamp(28px, 7vw, 48px);
    }
    .forte-roadmap_stage {
        margin-top: clamp(18px, 4vw, 32px);
    }
}
.forte-roadmap {
    list-style: none;
    margin: 46px auto 0;
    padding: 0;
    max-width: 860px;
    position: relative;
}
.forte-roadmap::before {
    content: "";
    position: absolute;
    left: 31px;
    top: 24px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, rgba(6,36,63,.5), rgba(6,36,63,.18));
}
.forte-roadmap_step {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px 22px;
    padding: 0 0 40px;
}
.forte-roadmap_step:last-child { padding-bottom: 0; }
/* 下部アイコンはSPのcinema表示専用。デスクトップの通常タイムラインでは非表示 */
.forte-roadmap_bicon { display: none; }
.forte-roadmap_marker {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / span 2;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0c2642;
    border: 2px solid rgba(124,200,255,.55);
    box-shadow: 0 8px 22px rgba(6,18,31,.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.forte-roadmap_num {
    /* 左上の 01〜04 番号ラベルは非表示にし、アイコンのみ見せる */
    display: none;
}
.forte-roadmap_icon { font-size: 18px; line-height: 1; }
.forte-roadmap_media {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(124, 200, 255, .24);
    background: rgba(0, 0, 0, .35);
    box-shadow: 0 18px 42px rgba(6, 18, 31, .28);
}
.forte-roadmap_media img,
.forte-roadmap_media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.forte-roadmap_body {
    grid-column: 2;
    grid-row: 2;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: rgba(12,38,66,.55);
    border: 1px solid rgba(124,200,255,.22);
    border-radius: 14px;
    padding: 18px 22px 20px;
}
.forte-roadmap_ttl {
    margin: 0 0 8px;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}
.forte-roadmap_txt {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.8;
    color: #cfe4f7;
}
@media screen and (max-width: 640px) {
    .forte-roadmap {
        margin-top: 34px;
    }
    .forte-roadmap::before {
        content: none;
    }
    .forte-roadmap_step {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding-bottom: 34px;
    }
    .forte-roadmap_marker {
        grid-column: 1;
        grid-row: auto;
        width: fit-content;
        height: auto;
        padding: 8px 12px;
        border-radius: 999px;
        flex-direction: row;
        gap: 7px;
        justify-self: flex-start;
    }
    .forte-roadmap_num { font-size: 11px; }
    .forte-roadmap_icon { font-size: 15px; }
    .forte-roadmap_media {
        grid-column: 1;
        grid-row: auto;
        border-radius: 16px;
        aspect-ratio: 3 / 2;
    }
    .forte-roadmap_body {
        grid-column: 1;
        grid-row: auto;
        padding: 16px 18px 18px;
        border-radius: 16px;
    }
    .forte-roadmap_ttl {
        margin-bottom: 7px;
        font-size: 20px;
    }
    .forte-roadmap_txt {
        font-size: 15px;
        line-height: 1.85;
    }
}
@media screen {
    /* z-index はセクションではなく stage に付ける。セクションに付けると
       stacking context ができ、タイトルの mix-blend-mode: difference が
       背景動画(rootのz-index:-2)と混ざらなくなるため */
    .top_roadmap.is-roadmap-cinema {
        position: relative;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        position: relative;
        z-index: 2;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        /* pin開始をヘッダー分下げる(JS側のstartオフセット)ぶん、stage高さも減らして
           pin中に下端が画面外へはみ出さないようにする */
        height: calc(100vh - clamp(88px, 13vw, 140px));
        height: calc(100svh - clamp(88px, 13vw, 140px));
        min-height: 600px;
        margin-top: 20px;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin-top: 0;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap::before {
        content: none;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        --forte-roadmap-opacity: 0;
        --forte-roadmap-translate: 100%;
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        /* ヘッダー回避はJS側のpin startオフセットで行うため、ここは通常の余白のみ */
        padding: clamp(24px, 5vw, 36px) 0 clamp(24px, 6vw, 40px);
        box-sizing: border-box;
        opacity: var(--forte-roadmap-opacity);
        transform: translate3d(0, var(--forte-roadmap-translate), 0);
        transform-origin: center center;
        pointer-events: none;
        will-change: opacity, transform;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step.is-hidden {
        visibility: hidden;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step.is-active {
        pointer-events: auto;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        order: 1;
        margin: 0;
        max-height: 27vh;
        border-radius: 18px;
        box-sizing: border-box;
        box-shadow: 0 18px 36px rgba(6, 18, 31, .24);
    }
    /* 番号ラベルとアイコンのピルはタイトル側に統合するため非表示 */
    .top_roadmap.is-roadmap-cinema .forte-roadmap_marker {
        display: none;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        order: 2;
        flex: none;
        padding: 18px 18px 20px;
        border-radius: 18px;
        box-sizing: border-box;
        background: rgba(12, 38, 66, .78);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        box-shadow: 0 18px 40px rgba(6, 18, 31, .28);
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_ttl {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 24px;
        line-height: 1.28;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_ttl::before {
        content: attr(data-emoji);
        font-size: .9em;
        line-height: 1;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_txt {
        font-size: 15px;
        line-height: 1.8;
    }
    /* 下部アイコン: メイン画像/動画 → テキストカード → アイコンの順で、左右中央に補助演出として置く */
    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        display: block;
        order: 3;
        align-self: center;
        width: clamp(180px, 62vw, 260px);
        pointer-events: none;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon img {
        display: block;
        width: 100%;
        height: auto;
        filter: drop-shadow(0 8px 16px rgba(6, 18, 31, .35));
    }
}

/* tablet: 縦積みだと間延びするため、メイン画像下を「テキストカード | 人物アイコン」の
   2カラムにして横幅を活かす(orderにより media → body → bicon の自動配置) */
@media screen and (min-width: 768px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(180px, 24vw, 220px);
        align-content: center;
        gap: 18px 22px;
        /* 中央コンテンツ幅を少し絞り、画像とカードの左端を同じ基準に揃える */
        padding-left: clamp(16px, 4vw, 40px);
        padding-right: clamp(16px, 4vw, 40px);
        box-sizing: border-box;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        grid-column: 1 / -1;
        width: 100%;
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        max-height: min(44vh, 420px);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        grid-column: 1;
        align-self: center;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        grid-column: 2;
        align-self: center;
        justify-self: center;
        width: 100%;
        max-width: 230px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .forte-footer-ken {
        top: 34px !important;
    }

    .vnshop-ad {
        margin-top: 76px;
    }
}
@media screen and (max-width: 640px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        min-height: 620px;
        margin-top: 16px;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        gap: 14px;
        padding-top: 8px;
        padding-bottom: 30px;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        padding: 16px 17px 18px;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_ttl {
        font-size: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        height: auto;
        min-height: 0;
    }
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* スマホ: 上画像は実画像(1200x800)と同じ3:2の見え方を優先して高さを出し、
   テキストカードと人物アイコンをややコンパクトにしてバランスを取る */
@media screen and (max-width: 767px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        aspect-ratio: 3 / 2;
        width: auto;
        max-width: 100%;
        /* 56vw項は「高さ×1.5が画面幅を超えて3:2が崩れる」のを防ぐ上限 */
        height: min(32vh, 56vw);
        max-height: none;
        align-self: center;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        /* 上画像と同じ計算式(高さmin(32vh,56vw)×3/2)で幅を揃え、中央に置く */
        width: min(calc(min(32vh, 56vw) * 3 / 2), 100%);
        align-self: center;
        padding: 14px 16px 16px;
        box-sizing: border-box;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_ttl {
        font-size: 20px;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_txt {
        font-size: 14px;
        line-height: 1.7;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        /* 下の余白を使って少し大きく見せる */
        width: clamp(150px, 47vw, 200px);
        margin-top: 6px;
    }
}

/* ===== 「Forteで過ごすシーン」画像lightbox: クリックで拡大 ===== */
.top_usecase_list .item {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    outline: none;
}
.top_usecase_list .item,
.top_usecase_list .item * {
    -webkit-tap-highlight-color: transparent;
}
.top_usecase_list .item:focus,
.top_usecase_list .item:focus-visible,
.top_usecase_list .item *:focus,
.top_usecase_list .item *:focus-visible,
.top_usecase_list .item:active,
.top_usecase_list .item *:active {
    outline: none;
}
.top_usecase_list .item img,
.top_usecase_list .item .item_ttl,
.top_usecase_list .item .item_txt,
.top_usecase_list .item .link_arrow,
.top_usecase_list .item .ttl {
    pointer-events: none;
}
.top_usecase_list .item img {
    transition: none;
    user-select: none;
    -webkit-user-select: none;
}
.top_usecase_list .item:hover img {
    transform: none;
}
.forte-img-modal {
    position: fixed; inset: 0; z-index: 100000;
    display: none; align-items: center; justify-content: center;
    background: rgba(6, 18, 31, .9);
    padding: 4vh 4vw; box-sizing: border-box;
    opacity: 0; transition: opacity .25s ease;
}
.forte-img-modal.is-open { display: flex; opacity: 1; }
.forte-img-modal_inner {
    position: relative; max-width: 1100px; max-height: 92vh;
    transform: scale(.96); transition: transform .25s ease;
}
.forte-img-modal.is-open .forte-img-modal_inner { transform: scale(1); }
.forte-img-modal_img {
    max-width: 100%; max-height: 92vh; display: block;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.forte-img-modal_close {
    position: absolute; top: -14px; right: -14px;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; cursor: pointer;
    background: #1e90ff; color: #fff;
    font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
    transition: background .2s, transform .15s;
}
.forte-img-modal_close:hover { background: #0d74e0; transform: scale(1.08); }
@media (max-width: 640px) {
    .forte-img-modal { padding: 0; }
    .forte-img-modal_img { border-radius: 0; max-height: 100vh; }
    .forte-img-modal_close { top: 12px; right: 12px; }
}

/* ===== Forte 20th opening ===== */
body.forte-opening-active {
    overflow: hidden;
}
body.forte-opening-active main,
body.forte-opening-active .header_box,
body.forte-opening-active .op_global_nav {
    visibility: hidden;
}
.forte-opening {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(29, 68, 100, .28), transparent 48%),
        #030a12;
    color: #fff;
    opacity: 0;
    pointer-events: none;
}
.forte-opening.is-visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}
.forte-opening.is-fading {
    opacity: 0;
    transition: opacity .8s ease;
}
.forte-opening_media,
.forte-opening_shade {
    position: absolute;
    inset: 0;
}
.forte-opening_media {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #030a12;
}
.forte-opening_video {
    width: min(96vw, 620px);
    height: auto;
    max-height: 76vh;
    object-fit: contain;
    opacity: .94;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.forte-opening_shade {
    background:
        linear-gradient(180deg, #030a12 0%, rgba(3, 10, 18, .54) 13%, rgba(3, 10, 18, .14) 38%, rgba(3, 10, 18, .18) 62%, rgba(3, 10, 18, .64) 88%, #030a12 100%),
        radial-gradient(circle at 50% 45%, rgba(124, 200, 255, .24), transparent 36%);
}
.forte-opening_inner {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    min-height: 0;
    text-align: center;
    transform: none;
    pointer-events: none;
}
.forte-opening_timeline {
    position: absolute;
    left: 50%;
    top: calc(50% + 148px);
    width: min(720px, calc(100vw - 42px));
    display: grid;
    grid-template-columns: auto minmax(96px, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 3.5vw, 34px);
    transform: translateX(-50%);
}
.forte-opening_year {
    font-family: var(--forte-sans);
    font-size: clamp(22px, 5vw, 54px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
.forte-opening_progress {
    position: relative;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    box-shadow: 0 0 20px rgba(124, 200, 255, .28);
}
.forte-opening_progress span {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    border-radius: inherit;
    background: linear-gradient(90deg, #7cc8ff 0%, #fff4b8 55%, #ff6f91 100%);
}
.forte-opening.is-running .forte-opening_progress span {
    animation: forteOpeningProgress var(--forte-opening-progress-duration, 7800ms) linear forwards;
}
.forte-opening_label {
    position: absolute;
    left: 50%;
    top: calc(50% + 214px);
    width: min(760px, calc(100vw - 32px));
    margin: 0;
    font-size: clamp(13px, 2.3vw, 18px);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(220, 238, 251, .84);
    text-shadow: 0 3px 14px rgba(0, 0, 0, .52);
    transform: translateX(-50%);
}
.forte-opening_message {
    position: absolute;
    left: 50%;
    top: calc(50% - 198px);
    margin: 0;
    opacity: 0;
    transform: translate(-50%, 18px) scale(.96);
    font-size: clamp(42px, 10vw, 108px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .03em;
    color: #fff;
    text-shadow:
        0 0 18px rgba(255, 244, 184, .72),
        0 8px 34px rgba(0, 0, 0, .5);
    /* EN/VIの長文は2行まで許容して中央寄せ。425pxで画面外へはみ出させない */
    white-space: normal;
    width: min(92vw, 760px);
    text-align: center;
    text-wrap: balance;
}
.forte-opening.is-celebrating .forte-opening_message {
    animation: forteOpeningMessage 1.1s cubic-bezier(.2, .9, .2, 1) forwards;
}
.forte-opening_confetti,
.forte-opening_firework,
.forte-opening_cracker {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.forte-opening_confetti {
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
}
.forte-opening.is-celebrating .forte-opening_confetti {
    opacity: .72;
    transition: opacity .35s ease;
}
.forte-opening.is-cracker .forte-opening_confetti {
    opacity: .52;
}
.forte-opening.is-firework .forte-opening_confetti {
    opacity: .34;
}
.forte-opening_firework {
    z-index: 2;
    left: 50%;
    top: 0;
    width: min(112vw, 620px);
    height: min(58vh, 430px);
    object-fit: cover;
    transform: translateX(-50%);
    mix-blend-mode: screen;
    filter: saturate(1.12) brightness(1.08);
    -webkit-mask-image: radial-gradient(ellipse at 50% 54%, #000 0%, #000 52%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 54%, #000 0%, #000 52%, transparent 78%);
}
.forte-opening.is-firework .forte-opening_firework {
    opacity: .56;
    transition: opacity .45s ease;
}
.forte-opening_cracker {
    z-index: 3;
    left: 50%;
    top: calc(50% - 310px);
    width: min(44vw, 240px);
    transform: translate(var(--cracker-x), -10px) scaleX(var(--cracker-dir)) rotate(var(--cracker-rotate)) scale(.86);
    transform-origin: center center;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45));
}
.forte-opening_cracker--left {
    --cracker-x: -182%;
    --cracker-dir: 1;
    --cracker-rotate: -2deg;
}
.forte-opening_cracker--right {
    --cracker-x: 82%;
    --cracker-dir: -1;
    --cracker-rotate: -2deg;
}
.forte-opening.is-cracker .forte-opening_cracker {
    opacity: 1;
    animation: forteOpeningCracker 1.55s ease-out forwards;
}
@keyframes forteOpeningProgress {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
@keyframes forteOpeningMessage {
    0% { opacity: 0; transform: translate(-50%, 18px) scale(.96); filter: blur(8px); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}
@keyframes forteOpeningCracker {
    0% { opacity: 0; transform: translate(var(--cracker-x), -24px) scaleX(var(--cracker-dir)) rotate(var(--cracker-rotate)) scale(.72); }
    18% { opacity: 1; }
    76% { opacity: 1; transform: translate(var(--cracker-x), 0) scaleX(var(--cracker-dir)) rotate(var(--cracker-rotate)) scale(1.04); }
    100% { opacity: 0; transform: translate(var(--cracker-x), 0) scaleX(var(--cracker-dir)) rotate(var(--cracker-rotate)) scale(1.04); }
}
@media screen and (max-width: 640px) {
    .forte-opening_video {
        width: min(98vw, 430px);
        max-height: 74vh;
    }
    .forte-opening_inner {
        width: 100%;
        min-height: 0;
    }
    .forte-opening_timeline {
        top: calc(50% + 144px);
        width: calc(100vw - 46px);
    }
    .forte-opening_timeline {
        grid-template-columns: auto minmax(74px, 1fr) auto;
        gap: 10px;
    }
    .forte-opening_label {
        top: calc(50% + 204px);
        width: calc(100vw - 32px);
        font-size: 13px;
        letter-spacing: .1em;
    }
    .forte-opening_year {
        font-size: clamp(19px, 6.4vw, 28px);
    }
    .forte-opening_message {
        top: calc(50% - 186px);
        font-size: clamp(40px, 14vw, 62px);
    }
    .forte-opening_firework {
        width: 112vw;
        height: 54vh;
    }
    .forte-opening_cracker {
        top: calc(50% - 290px);
        width: min(50vw, 196px);
    }
    .forte-opening_cracker--left {
        --cracker-x: -125%;
    }
    .forte-opening_cracker--right {
        --cracker-x: 25%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .forte-opening.is-running .forte-opening_progress span,
    .forte-opening.is-celebrating .forte-opening_message,
    .forte-opening.is-cracker .forte-opening_cracker {
        animation-duration: .01ms;
    }
}

/* ===== Hero H2: typewriter reveal (1行ずつ左から表示) ===== */
@keyframes forteTypewriterReveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

/* 初期状態: H2 を非表示 */
.forte-hero-anim h2 {
    opacity: 0;
}
/* forte-hero-ready 後: H2コンテナを表示 */
body.forte-hero-ready .forte-hero-anim h2 {
    opacity: 1;
}

/* typewriter 行ラッパー */
.forte-type-line {
    display: block;
}
.forte-type-line__text {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
}
body.forte-hero-ready .forte-hero-anim .forte-type-line__text {
    animation: forteTypewriterReveal 0.55s ease forwards;
    animation-delay: calc(var(--forte-line-idx, 0) * 0.52s);
}

/* その他 Hero テキスト: opacity フェードイン */
.forte-hero-anim p,
.forte-hero-anim .english,
.forte-hero-anim .message,
.forte-hero-anim .contact {
    opacity: 0;
    transition: opacity 0.6s ease 0.5s;
}
body.forte-hero-ready .forte-hero-anim p,
body.forte-hero-ready .forte-hero-anim .english,
body.forte-hero-ready .forte-hero-anim--delay .message,
body.forte-hero-ready .forte-hero-anim--delay .contact {
    opacity: 1;
}

/* ===== Hero pop演出 (1行H2 = JA "Forte" のとき) =====
   コピーが「ポン、ポン」と順に出て、最後にForteがblur解除+scale+浮き上がり */
@keyframes forteHeroH2Pop {
    /* 奥からゆっくり浮かび上がる: blur強め+わずかに大きい状態から、
       弾まずに等倍へ収束(高級感寄り・オーバーシュートなし) */
    0%   { opacity: 0; filter: blur(18px); transform: translateY(8px) scale(1.1); }
    55%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
body.forte-hero-pop-mode .forte-hero-anim p,
body.forte-hero-pop-mode .forte-hero-anim .english,
body.forte-hero-pop-mode .forte-hero-anim .message,
body.forte-hero-pop-mode .forte-hero-anim .contact {
    transform: translateY(14px) scale(.985);
    transition: opacity .5s cubic-bezier(.22, .8, .28, 1), transform .5s cubic-bezier(.22, .8, .28, 1);
}
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim p,
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim .english,
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim--delay .message,
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim--delay .contact {
    opacity: 1;
    transform: none;
}
/* 順番: subtitle → english → message → contact → 最後にForte */
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim p { transition-delay: .1s; }
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim .english { transition-delay: .38s; }
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim--delay .message { transition-delay: .62s; }
body.forte-hero-pop-mode.forte-hero-ready .forte-hero-anim--delay .contact { transition-delay: .84s; }
.forte-hero-anim h2.forte-hero-h2-pop {
    opacity: 0;
}
body.forte-hero-ready .forte-hero-anim h2.forte-hero-h2-pop {
    opacity: 1;
    /* Safariではblend対象自身のfilter/transform animationが終了後も合成レイヤーを残し、
       mix-blend-modeが白文字へ落ちるため、H2自身はopacityだけに留める */
    animation: none;
    transition: opacity .7s cubic-bezier(.22, .8, .28, 1) 1.15s;
}
@media (prefers-reduced-motion: reduce) {
    body.forte-hero-pop-mode .forte-hero-anim p,
    body.forte-hero-pop-mode .forte-hero-anim .english,
    body.forte-hero-pop-mode .forte-hero-anim .message,
    body.forte-hero-pop-mode .forte-hero-anim .contact {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .forte-hero-anim h2.forte-hero-h2-pop {
        opacity: 1;
    }
    body.forte-hero-ready .forte-hero-anim h2.forte-hero-h2-pop {
        animation: none;
    }
}

/* ===== common_bg Lottie (白い楕円ライン) を Forte では非表示 ===== */
#home .common_bg #anime,
#home .common_bg #animeSP {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .forte-hero-anim h2,
    .forte-hero-anim p,
    .forte-hero-anim .english,
    .forte-hero-anim .message,
    .forte-hero-anim .contact {
        opacity: 1;
        transition: none;
    }
    .forte-type-line__text {
        clip-path: none;
    }
    body.forte-hero-ready .forte-hero-anim .forte-type-line__text {
        animation: none;
    }
}

/* Hero CTA: iOS風すりガラスボタン + #p-top-events と同じシンプルな白矢印 */
.top_main .top_main_itembox .contact {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    margin-top: 22px !important;
    padding: 12px 46px 12px 22px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px rgba(0, 0, 0, .22);
    transition: transform .15s ease, background .2s ease;
}
.top_main .top_main_itembox .contact:active {
    transform: translateY(1px) scale(.98);
    background: rgba(255, 255, 255, .22);
}
.top_main .top_main_itembox .contact .link_arrow {
    background: none !important;
    border-radius: 0 !important;
    right: 20px !important;
    /* svgがベースライン配置で下寄りになるため、テキスト中央に揃える */
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
}

.top_main .top_main_itembox .contact .link_arrow svg {
    position: static !important;
    transform: none !important;
    display: block;
    width: 8px;
    height: 11px;
}
.top_main .top_main_itembox .contact .link_arrow svg path {
    stroke: #fff !important;
}

@media screen and (max-width: 767px) {
    .top_main .top_main_itembox .catchcopy .english {
        font-size: clamp(1.05rem, 4.6vw, 1.4rem);
        line-height: 1.45;
        letter-spacing: 0.04rem;
        white-space: normal;
        word-break: keep-all;
    }

    .top_main .top_main_itembox .sp_box .message {
        font-size: clamp(1.05rem, 4.4vw, 1.4rem);
        line-height: 1.56;
        letter-spacing: 0.04rem;
        white-space: normal;
        word-break: keep-all;
    }

    .top_main .top_main_itembox .sp_box .message .tab {
        display: none;
    }

    .top_main .top_main_itembox .sp_box .contact {
        font-size: 1.4rem;
        line-height: 1.35;
    }

    .forte-events_sub,
    .forte-price_sub {
        font-size: 16px;
        line-height: 1.7;
    }

    .forte-events_morebtn,
    .forte-price_btn {
        font-size: 16px;
        line-height: 1.4;
    }

    .pcard_note {
        font-size: 15px;
        line-height: 1.6;
    }

    .prow_l {
        font-size: 15px;
        line-height: 1.55;
    }

    .prow_l small {
        font-size: 13px;
        line-height: 1.4;
    }

    .prow_v span {
        font-size: 12px;
        line-height: 1.35;
    }

    .pcard_extra {
        font-size: 15px;
        line-height: 1.8;
    }

    .forte-roadmap_txt {
        font-size: 15px;
        line-height: 1.75;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --forte-sp-gutter-fix: clamp(24px, 7vw, 42px);
    }

    .top_main .top_main_itembox {
        width: calc(100% - (var(--forte-sp-gutter-fix) * 2)) !important;
        left: var(--forte-sp-gutter-fix) !important;
        bottom: max(64px, 18vw) !important;
        /* style.css がこの要素に z-index:11 を設定 => 独自の stacking context ができ、
           内部の h2 の mix-blend-mode が背景動画(z-index:-2, rootコンテキスト)と混ざらなくなる。
           z-index を auto に戻して h2 が動画と直接 blend できるようにする。動画は負の
           z-index で常に下にあるため表示順は変わらない。 */
        z-index: auto !important;
    }

    .top_main .top_main_itembox .catchcopy {
        width: min(88vw, 340px) !important;
        position: relative;
        z-index: auto !important;
        isolation: auto !important;
    }

    .top_main .top_main_itembox.sp-only .catchcopy h2[data-i18n="hero_h2"] {
        font-size: clamp(70px, 23vw, 108px) !important;
        mix-blend-mode: difference;
        position: relative;
        z-index: auto;
        isolation: auto;
        -webkit-text-fill-color: #fff;
        /* text-shadow + drop-shadow はblend後の文字の黒い浮き出しを補強する補助レイヤー */
        text-shadow:
            0 0 20px rgba(122, 190, 255, .38),
            0 0 40px rgba(255, 255, 255, .18),
            0 16px 34px rgba(0, 0, 0, .72),
            0 5px 16px rgba(0, 0, 0, .68) !important;
    }

    .top_main .top_main_itembox.sp-only .catchcopy h2[data-i18n="hero_h2"] .forte-type-line__text {
        color: #fff;
        mix-blend-mode: inherit;
        -webkit-text-fill-color: currentColor;
        text-shadow: inherit;
    }

    .forte-events {
        padding-inline: 0 !important;
    }

    .forte-events_inner,
    .forte-price_inner,
    .top_movie_str .inner,
    .top_roadmap .inner,
    .top_usecase .inner,
    .top_power .inner,
    .top_about .top_about_copy,
    .top_about .top_about_slide {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--forte-sp-gutter-fix) !important;
        padding-right: var(--forte-sp-gutter-fix) !important;
        box-sizing: border-box !important;
    }

    /* top_role(日本式カラオケラウンジ→動画)との間隔バランスを見て、上余白を少し削る */
    .top_usecase .inner {
        padding-top: 8% !important;
    }

    .top_about .common_hd,
    .top_movie_str_ttl,
    .top_roadmap .top_roadmap_ttl,
    .top_power .inner .top_power_hd,
    .top_usecase_hd,
    .forte-events_hd,
    .forte-price_hd {
        margin-left: 0 !important;
        padding-left: var(--forte-sp-gutter-fix) !important;
        padding-right: var(--forte-sp-gutter-fix) !important;
        box-sizing: border-box !important;
    }

    .top_about .top_about_copy {
        margin-top: 0 !important;
    }

    .top_about .top_about_copy .read {
        margin-bottom: 48px !important;
    }

    .top_about .top_about_slide {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
        margin-top: 36px !important;
        margin-bottom: 56px !important;
    }

    .top_about .top_about_slide .slide01 {
        grid-column: 1 / -1 !important;
    }

    .top_about .top_about_slide .slide02 {
        margin-top: 18px !important;
    }

    .top_about_accord_wrap {
        width: 100% !important;
        padding-top: 14vw !important;
    }

    .top_about_accord {
        width: calc(100% - (var(--forte-sp-gutter-fix) * 2)) !important;
        margin-inline: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .top_role_image {
        width: 100% !important;
        margin-top: 30px !important;
    }

    .top_role_image picture {
        width: 100% !important;
        aspect-ratio: auto !important;
    }

    .top_role_image picture img,
    .top_usecase .item_img picture img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: initial !important;
        display: block !important;
    }

    .top_usecase_list {
        margin-top: 34px !important;
        row-gap: 34px !important;
    }

    .top_usecase .item {
        width: 100% !important;
    }

    .top_usecase .item_img {
        padding: 0 !important;
        background: transparent !important;
    }

    .top_usecase .item_img::before {
        content: none !important;
        background: transparent !important;
        opacity: 0 !important;
    }

    .top_usecase .item:nth-child(1) .item_img img,
    .top_usecase .item:nth-child(2) .item_img img,
    .top_usecase .item:nth-child(3) .item_img img,
    .top_usecase .item:nth-child(4) .item_img img {
        width: 100% !important;
        height: auto !important;
    }

    .top_movie_str_ttl,
    .top_movie_str_desc,
    .top_movie_str_img,
    .top_power .inner .top_power_copy,
    .top_power .inner .top_power_img,
    .forte-events_hd,
    .forte-events_list,
    .forte-price_hd,
    .forte-price_grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .top_movie_str_img .item::before {
        content: none !important;
        background: transparent !important;
        opacity: 0 !important;
    }

    .top_power .inner .top_power_img > div {
        padding-bottom: 0 !important;
        position: static !important;
    }

    .top_power .inner .top_power_img > div img {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: initial !important;
        display: block !important;
    }

    /* ===== SP: pin 5 sections to the same left-start baseline ===== */
    .top_power .inner .top_power_hd {
        margin-left: 0 !important;
        padding-inline: 0 !important;
        width: 100% !important;
    }

    .top_power .inner .top_power_img {
        width: 100% !important;
        margin-inline: 0 !important;
    }

    .top_power .inner .top_power_copy {
        width: 100% !important;
        margin: 30px 0 0 !important;
        padding-inline: 0 !important;
    }

    .top_power .inner .top_power_copy .top_power_hd {
        margin-left: 0 !important;
        padding-inline: 0 !important;
    }

    .top_power .inner .top_power_copy p {
        width: 100% !important;
    }

    /* 年表: 年+見出しを本文と改行で分け、少し大きく・余白を贅沢に */
    .top_power .inner .top_power_copy p + p {
        margin-top: 36px !important;
    }
    .top_power .inner .top_power_copy p strong {
        display: block;
        margin-bottom: 8px;
        font-size: 1.15em;
    }

    .top_role_ttl {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .top_role .inner {
        width: 100% !important;
        max-width: none !important;
        padding-left: var(--forte-sp-gutter-fix) !important;
        padding-right: var(--forte-sp-gutter-fix) !important;
        box-sizing: border-box !important;
    }

    .top_role_image,
    .top_role_image picture {
        width: 100% !important;
        max-width: none !important;
    }

    .top_role_image picture img {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
    }

    .top_role_stkholder_desc {
        padding-inline: 0 !important;
    }

    .top_usecase_hd {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .top_roadmap .top_roadmap_ttl {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .forte-price_hd {
        width: 100% !important;
        padding-inline: 0 !important;
    }

    .forte-price {
        padding-left: var(--forte-sp-gutter-fix) !important;
        padding-right: var(--forte-sp-gutter-fix) !important;
    }

    .forte-price_inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Event subpage final overrides: placed after top-page rules to avoid banner/header regressions. */
body.forte-event-page .forte-event-footer_copy {
    max-width: min(100%, 520px) !important;
    margin: 28px auto 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

body.forte-event-page .vnshop-ad {
    display: block !important;
    position: relative !important;
    order: initial !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 16 / 5 !important;
    margin: 26px auto 0 !important;
    border-radius: 12px !important;
}

body.forte-event-page .vnshop-ad_link {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

body.forte-event-page .vnshop-ad_slide {
    display: none !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* is-langだけで常時表示にするとJSの5秒切替(is-active)が効かなくなるため、is-active連動にする */
body.forte-event-page .vnshop-ad_slide.is-lang.is-active {
    display: block !important;
}

body.forte-event-page .vnshop-ad_slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.forte-event-page .article h1,
body.forte-event-page .article h2,
body.forte-event-page .article p,
body.forte-event-page .info_box dt,
body.forte-event-page .info_box dd,
body.forte-event-page .ticket_name,
body.forte-event-page .ticket_price,
body.forte-event-page .ticket_perk,
body.forte-event-page .ecard_title {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

body.forte-event-page .article,
body.forte-event-page .events_main,
body.forte-event-page .info_box,
body.forte-event-page .ticket,
body.forte-event-page .ecard {
    max-width: 100% !important;
}

body.forte-event-page main.article,
body.forte-event-page main.events_main {
    width: calc(100vw - 32px) !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

body.forte-event-page main.events_main {
    max-width: 1080px !important;
}

body.forte-event-page .article *,
body.forte-event-page .events_main *,
body.forte-event-page .forte-event-footer * {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

@media (max-width: 520px) {
    body.forte-event-page .article_header {
        flex-direction: row !important;
        align-items: center !important;
    }

    body.forte-event-page .article_tools {
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
    }
}

@media screen and (min-width: 768px) {
    .header_box .inner {
        width: min(calc(100% - clamp(128px, 18vw, 152px)), 620px) !important;
        column-gap: 12px !important;
        margin-inline: auto !important;
    }

    .forte-lang-switcher--navbar {
        margin-right: 2px;
    }

    .top_main .top_main_itembox {
        width: calc(100% - clamp(128px, 18vw, 152px)) !important;
        left: clamp(64px, 9vw, 76px) !important;
        bottom: 76px !important;
        z-index: auto !important;
    }

    .top_main .top_main_itembox .catchcopy {
        width: min(calc(100vw - clamp(128px, 18vw, 152px)), 440px) !important;
        position: relative;
        z-index: auto !important;
        isolation: auto !important;
    }

    .top_main .top_main_itembox.sp-only .catchcopy h2[data-i18n="hero_h2"] {
        font-size: clamp(84px, 15vw, 122px) !important;
        line-height: .98 !important;
        mix-blend-mode: difference;
        position: relative;
        z-index: auto;
        isolation: auto;
        -webkit-text-fill-color: #fff;
        text-shadow:
            0 0 20px rgba(122, 190, 255, .38),
            0 0 40px rgba(255, 255, 255, .18),
            0 16px 34px rgba(0, 0, 0, .72),
            0 5px 16px rgba(0, 0, 0, .68) !important;
    }

    .top_main .top_main_itembox.sp-only .catchcopy h2[data-i18n="hero_h2"] .forte-type-line__text {
        color: #fff;
        mix-blend-mode: inherit;
        -webkit-text-fill-color: currentColor;
        text-shadow: inherit;
    }

    .top_main .top_main_itembox .catchcopy .english {
        font-size: clamp(18px, 2.5vw, 21px);
        line-height: 1.5;
    }

    .top_main .top_main_itembox .sp_box .message {
        font-size: clamp(18px, 2.5vw, 21px);
        line-height: 1.65;
    }

    .top_main .top_main_itembox .contact {
        margin-top: 18px !important;
        padding: 10px 38px 10px 18px !important;
        font-size: 14px !important;
        gap: 8px;
    }

    .top_main .top_main_itembox .contact .link_arrow {
        right: 16px !important;
    }

    .forte-events {
        padding: 76px clamp(64px, 9vw, 76px) 88px;
    }

    .forte-events_inner {
        max-width: 620px;
    }

    /* 料金セクションも同じ左基準(中央620px)に揃える */
    .forte-price {
        padding-left: clamp(64px, 9vw, 76px);
        padding-right: clamp(64px, 9vw, 76px);
    }

    .forte-price_inner {
        max-width: 620px;
    }

    .forte-price_hd {
        text-align: left;
    }

    .forte-price_title::after {
        margin: 14px 0 0;
    }

    .forte-countdown {
        margin-left: calc(clamp(64px, 9vw, 76px) * -1);
        margin-right: calc(clamp(64px, 9vw, 76px) * -1);
        padding: 22px clamp(64px, 9vw, 76px);
    }

    .forte-countdown_inner {
        max-width: 420px;
    }

    .forte-events_list,
    .forte-events_more {
        max-width: 596px;
        margin-left: auto;
        margin-right: auto;
    }

    .forte-events_link {
        gap: 12px;
        padding: 15px 2px;
    }

    .forte-events_item.is-ended .forte-events_link,
    .forte-events_item.is-next-live .forte-events_link {
        padding-left: 12px;
        padding-right: 12px;
    }

    .forte-events_meta {
        gap: 10px;
        margin-bottom: 7px;
    }

    .forte-events_name {
        font-size: 14.5px;
        line-height: 1.45;
    }

    .forte-events_arrow {
        width: 18px;
        height: 18px;
    }

    .forte-events_morebtn {
        min-width: 220px;
        padding: 13px 22px;
        font-size: 13px;
    }

    /* style.css(≤1023)の width:69.74% / margin-left:20.25% を打ち消し、
       他セクションと同じ「中央620px」基準に載せる */
    .top_about .top_about_copy {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: clamp(180px, 26vw, 248px);
        padding-bottom: clamp(156px, 23vw, 220px);
        padding-left: clamp(64px, 9vw, 76px) !important;
        padding-right: clamp(64px, 9vw, 76px) !important;
        box-sizing: border-box !important;
    }

    .top_about .top_about_copy_inner {
        width: min(100%, 620px);
        max-width: 620px;
        margin-inline: auto;
        box-sizing: border-box;
    }

    .forte-about-copy_deco {
        width: min(100%, 620px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: clamp(104px, 17vw, 136px);
        font-size: clamp(124px, 21vw, 186px);
    }

    .forte-about-copy_head {
        margin-bottom: 84px !important;
        line-height: 2.2 !important;
    }

    .forte-about-copy_body {
        gap: 112px;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .forte-about-copy_body p {
        width: 100%;
        max-width: 100%;
        line-height: 2.35 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .top_about_accord {
        max-width: 596px;
    }

    .top_about_accord_head {
        gap: 16px;
        padding: 18px 20px !important;
    }

    .top_about_accord_head_ttlWrap .label {
        font-size: 12px !important;
    }

    .top_about_accord_head_ttlWrap .ttl {
        font-size: clamp(21px, 3vw, 25px) !important;
    }

    .top_about_accord_head_btn {
        transform: scale(.82);
        transform-origin: center;
    }

    .forte-accord_map {
        min-height: clamp(280px, 44vw, 340px);
    }

    .forte-accord_map iframe {
        height: clamp(280px, 44vw, 340px) !important;
    }

    .top_movie_str .inner,
    .top_roadmap .inner,
    .top_role .inner,
    .top_usecase .inner,
    .top_power .inner {
        width: min(calc(100vw - clamp(128px, 18vw, 152px)), 620px) !important;
        max-width: 620px !important;
        margin-inline: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 「Forteの楽しみ方」: タイトル・画像・カードを同じ620px基準に揃える */
    .top_role .inner {
        box-sizing: border-box !important;
    }

    .top_role_ttl {
        width: 100% !important;
        margin-left: 0 !important;
        padding-inline: 0 !important;
    }

    .top_role_image,
    .top_role_image picture {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* inline style の width:70% / margin:0 auto 0 0 (左寄せ) を打ち消す */
    .top_role_image picture img {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .top_power .inner .top_power_hd,
    .top_power .inner .top_power_img,
    .top_power .inner .top_power_copy {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .top_usecase_hd,
    .top_usecase_list,
    .top_usecase .item_img,
    .top_movie_str_ttl,
    .top_movie_str_desc,
    .top_movie_str_img {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .top_usecase .item_img,
    .top_movie_str_img {
        max-width: 620px !important;
        margin-inline: auto !important;
    }

    /* usecase画像: intrinsicサイズ(高さ13.1rem)の小画像を本文幅いっぱいに拡大し、
       白背景パディング枠も外して他セクションの画像と同じ見せ方にする */
    .top_usecase .item_img {
        padding: 0 !important;
        background: transparent !important;
    }

    .top_usecase .item_img::before {
        content: none !important;
    }

    .top_usecase .item_img picture img {
        width: 100% !important;
        height: auto !important;
    }

    .top_usecase_list {
        margin-top: 30px !important;
        row-gap: 28px !important;
    }

    .top_usecase_list .item {
        width: 100% !important;
    }

    .top_usecase .item_txt {
        max-width: 580px;
    }

    .top_power .inner .top_power_hd .hd._main {
        width: min(100%, 596px) !important;
        font-size: clamp(38px, 5.2vw, 48px) !important;
        letter-spacing: .02em !important;
        color: #fff !important;
        mix-blend-mode: difference;
        text-shadow:
            0 0 20px rgba(122, 190, 255, .32),
            0 0 34px rgba(255, 255, 255, .14),
            0 10px 24px rgba(0, 0, 0, .52),
            0 4px 12px rgba(0, 0, 0, .48) !important;
    }

    .top_power .inner .top_power_img {
        max-width: 596px !important;
    }

    /* 歩み本文: tabletでは詰まって見えるため、行間と段落間(年表項目間)を大きく取る */
    .top_power .inner .top_power_copy p {
        line-height: 2.05 !important;
    }

    .top_power .inner .top_power_copy p + p {
        margin-top: 84px !important;
    }

    .top_power .inner .top_power_copy p strong {
        display: block;
        margin-bottom: 10px;
        font-size: 1.15em;
    }
}

@media screen and (min-width: 425px) {
    .forte-events_title,
    .forte-price_title,
    .top_about .common_hd .ttl,
    .top_role_ttl .ttl.__jp,
    .top_roadmap_ttl .ttl.__jp,
    .top_movie_str_ttl .ttl.__jp,
    .top_power .top_power_hd .hd._main,
    .top_usecase_hd {
        width: fit-content !important;
        /* 12ch上限は「音楽でつなが/る、」のような1〜2文字折りを生むため撤廃。
           keep-all でCJKの途中折りを禁止し、読点・スペースでのみ自然に折り返す */
        max-width: 100% !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        /* UX30: 成功例(forte-about-copy_deco)は block。実機Safariの
           inline-level blend落ちを避けるため inline-block をやめて揃える */
        display: block !important;
        /* かつてここで mix-blend-mode:normal / isolation:isolate を強制しており、
           425px以上の実機でdeco見出しのdifference合成が死んでいた。
           成功例(forte-about-copy_deco / forte-hd-deco)と同条件に揃える */
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        mix-blend-mode: difference !important;
        isolation: auto !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto !important;
        /* text-shadow / filter も成功例と完全同値にする */
        text-shadow:
            0 0 20px rgba(122, 190, 255, .38),
            0 0 40px rgba(255, 255, 255, .18),
            0 16px 34px rgba(0, 0, 0, .72),
            0 5px 16px rgba(0, 0, 0, .68) !important;
        filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55)) !important;
    }

    .forte-events_title,
    .top_role_ttl .ttl.__jp,
    .top_roadmap_ttl .ttl.__jp,
    .top_movie_str_ttl .ttl.__jp,
    .top_usecase_hd,
    .top_power .top_power_hd .hd._main {
        font-size: clamp(31px, 6.6vw, 47px) !important;
        line-height: 1.14 !important;
    }

    .forte-events_name {
        font-size: clamp(14px, 3.55vw, 16px) !important;
        line-height: 1.45 !important;
    }
}

@media screen and (min-width: 425px) and (max-width: 479px) {
    .forte-events_name {
        font-size: 13.4px !important;
        line-height: 1.42 !important;
    }
}

/* ============================================================
   PC(1024px以上): 「実際の768px viewport表示を画面中央に再現する」方針。
   - remスケール・sp/pc切替・演出(JS breakpoint全幅化)を768px時と一致させる
   - tablet用(min-width:768px)ブロックの適用を1024+へ拡張済み(前段のルール群)
   - ここでは768px時とズレるvw依存値の固定と、最小限のメニューUIを補完する
   ============================================================ */
@media screen and (min-width: 1024px) {
    /* remスケール: 768px時はhtml{font-size:12.5px}(common.css ≤1023)。
       1024〜1599pxは10pxになり全体が縮むため、768px表示と同じ12.5pxに揃える */
    html {
        font-size: 12.5px !important;
    }

    /* sp/pc切替も768px時(≤1023)と同じ側を使う */
    .pc-only {
        display: none !important;
    }

    .sp-only {
        display: block !important;
    }

    /* Header: 横長ナビは使わず、768px時と同じ MENU + navbar言語切替 */
    .global_nav .main_nav {
        display: none !important;
    }

    .global_nav {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .btn_humberger_box {
        display: block;
        width: 52px;
        height: 52px;
        cursor: pointer;
    }

    /* MENU/閉じるラベルの切替(style.cssの≤1023にしかないopacity制御を補完) */
    .btn_humberger_box .btn_humberger .txt._close {
        opacity: 0;
        transition: opacity .4s ease;
    }

    body.open .btn_humberger_box .btn_humberger .txt._close {
        opacity: 1;
    }

    body.open .btn_humberger_box .btn_humberger .txt._menu {
        opacity: 0;
    }

    /* メガメニューの開閉(最小限)。装飾はforteの下層メニューと同系のガラス調 */
    .op_global_nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10005;
        opacity: 0;
        pointer-events: none;
        overflow-y: auto;
        background: rgba(4, 14, 26, .94);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        backdrop-filter: blur(18px) saturate(140%);
        transition: opacity .4s ease;
    }

    body.open .op_global_nav {
        opacity: 1;
        pointer-events: auto;
    }

    .op_global_nav > .inner {
        max-width: 720px;
        margin-inline: auto;
        padding: 112px 24px 0;
        box-sizing: border-box;
    }

    .op_global_nav .nav_main a:not(.nav_main_list_sub_item) {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 0;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }

    .op_global_nav .nav_main a:hover {
        color: #7cc8ff;
        text-shadow: 0 0 14px rgba(124, 200, 255, .6);
    }

    /* Hero: 768px時の itembox は left69px / width630px (幅=100vw-138px)。
       1440pxでは同じ630pxの箱を中央ステージ(768px)内の同位置に置く */
    .top_main .top_main_itembox {
        width: 630px !important;
        left: calc(50vw - 315px) !important;
    }

    /* Hero: 768px時のsp_box(英語コピー下の水平ライン+余白)を再現。
       style.cssでは≤1023にしかないため補完する */
    .top_main .top_main_itembox .sp_box {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        margin-top: 17px;
        position: relative;
    }

    .top_main .top_main_itembox .sp_box::before {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: url("../img/txt_filter.jpg") no-repeat left top;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Forteで過ごすシーン: 768px時と同じ1カラム(style.css baseは2カラム) */
    .top_usecase_list {
        grid-template-columns: 1fr !important;
    }

    /* Forteの想い: 768px時と同じ縦積み(style.css baseは左右2分割) */
    .top_movie_str .top_movie_str_wrap {
        flex-direction: column !important;
        margin-top: 34px !important;
    }

    /* footer_contact: 768px時は inner=93.4%(717px)。中央768pxステージ相当に固定 */
    .footer_contact .inner {
        width: 100% !important;
        max-width: 718px !important;
        margin-inline: auto !important;
        /* %paddingは親(全幅)基準で広がりすぎるため768px時の実測値(51px)に固定 */
        padding-left: 51px !important;
        padding-right: 51px !important;
    }

    /* footer nav: 768px時(style.css ≤1023)と同じく先頭のイベント情報liを隠し、
       各liはflex中央寄せにする */
    .footer_function .inner .footer_nav li:nth-child(1) {
        display: none !important;
    }

    .footer_function .inner .footer_nav li {
        display: flex;
        justify-content: center;
    }

    /* footer_contact内: PC用の見出し/リスト2カラム(%)をやめ、768px時と同じ縦積みに */
    .footer_contact .inner .footer_contact_hd,
    .footer_contact .inner .footer_contact_list {
        width: 100% !important;
    }

    /* Forteの歩み: PC用の画像/本文横並びflexをやめ、768px時と同じ縦積みに */
    .top_power .top_power_wrap {
        flex-direction: column !important;
    }

    /* 店舗情報・アクセス: PC用の2列flex(47.8%x2)をやめ、768px時と同じ1項目1行に */
    .top_about_accord_desc {
        flex-direction: column !important;
        row-gap: 15px;
    }

    .top_about_accord_desc_txt {
        width: 100% !important;
    }

    .top_about_accord_company_table {
        flex-direction: column !important;
    }

    .top_about_accord_company_table_inner {
        width: 100% !important;
    }

    .top_about_accord_company_table_inner:nth-child(2) tr:last-child {
        border-bottom: solid 1px rgba(255, 255, 255, 0.2);
    }

    /* Forteの歩み: wrap縦積み化に伴い、画像下と本文の間へ768px相当の余白を確保 */
    .top_power .top_power_wrap .top_power_copy {
        margin-top: 40px !important;
    }

    /* Forteの楽しみ方カード: 「日本式カラオケラウン/ジ」のような1文字折りを防ぐ。
       18pxなら2カラムカード幅に1行で収まる */
    .forte-role-card_ttl {
        font-size: 18px !important;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    /* Forteの夜: 画像サイズはUX30の min-width:768 共通ルール(ファイル末尾)で
       「3:2固定・高さ基準のwidth計算・左揃え」に統一した */

    /* Forteの想い: wrap縦積み化に伴い、本文と画像の間へ余白を確保 */
    .top_movie_str .top_movie_str_img {
        margin-top: 48px !important;
    }

    /* お問い合わせ: 「電話・Facebook・LINEからどうぞ」の下、
       およびLINE行とGoogle Mapの間に余白を確保 */
    .footer_contact .inner .footer_contact_list {
        margin-top: 36px !important;
    }

    .footer_contact .inner .footer_contact_list + div[data-lenis-prevent] {
        margin-top: 52px !important;
    }

    /* Header: 768px時は logo/MENUがinner(620px)から左右へ48pxずつ張り出した
       実効716px分布。1440pxでは同じ分布を中央ステージに再現する */
    .header_box .inner {
        width: 716px !important;
    }

    .global_nav {
        margin-left: auto;
    }

    .forte-header-logo__img {
        height: 50px !important;
    }

    /* footer ken: 右端寄りを解消し、中央718pxステージのGoogle Map右端ライン
       (中央+308px = 718/2 - padding51px)の下へ。tablet同様に少し下げる */
    .forte-footer-ken {
        top: 34px !important;
        right: calc(50% - 308px) !important;
        left: auto;
    }

    .vnshop-ad {
        margin-top: 76px;
    }
}

/* ===== footer: トップへ戻るken画像導線 (footer linksの3列目相当) ===== */
.footer_function .inner {
    position: relative;
}

.forte-footer-ken {
    display: block;
    position: absolute;
    z-index: 3;
    top: -26px;
    right: clamp(10px, 5vw, 40px);
    width: clamp(92px, 24vw, 116px);
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 10px 22px rgba(6, 18, 31, .45));
    transition: transform .18s ease;
    transform-origin: 50% 100%;
}

/* hoverはマウス環境のみ。タッチのsticky hoverでモバイル基準位置の
   translateX(-28px)が消えて右ズレするのを防ぐ */
@media (hover: hover) and (pointer: fine) {
    .forte-footer-ken:hover {
        transform: translateY(-4px);
    }
}

.forte-footer-ken.is-launching-source img {
    opacity: 0 !important;
}

.forte-footer-ken img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .2s ease;
}

/* Ken足元のCTAラベル (押せる導線。発射中はKen画像と一緒に隠す) */
.forte-footer-ken__cta {
    display: block;
    margin-top: 6px;
    padding: 5px 10px;
    border-radius: 14px;
    background: rgba(6, 18, 31, .55);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    letter-spacing: .04em;
    white-space: normal;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 4px rgba(6, 18, 31, .5);
    transition: opacity .2s ease;
}
.forte-footer-ken.is-launching-source .forte-footer-ken__cta {
    opacity: 0;
}

.forte-ken-launch-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}

.forte-ken-launch-overlay[hidden] {
    display: none;
}

.forte-ken-launch-overlay_stage {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--forte-ken-width, 160px);
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}

.forte-ken-launch-overlay_img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 100%;
    will-change: transform;
    filter: drop-shadow(0 16px 30px rgba(6, 18, 31, .4));
}

.forte-ken-launch-overlay.is-waiting .forte-ken-launch-overlay_stage {
    animation: forteKenChargeScale 3s ease-out forwards;
}

.forte-ken-launch-overlay.is-waiting .forte-ken-launch-overlay_img {
    animation: forteKenLaunchShake 0.28s ease-in-out infinite alternate;
}

.forte-ken-launch-overlay.is-launching .forte-ken-launch-overlay_stage {
    animation: forteKenLaunchFly 5.2s cubic-bezier(.45, 0, .2, 1) forwards;
}

.forte-ken-launch-overlay_particle {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 21px;
    line-height: 1;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.68);
    animation: forteKenParticle 1.4s ease-out forwards;
    will-change: transform, opacity;
}

@keyframes forteKenChargeScale {
    0% { transform: scale(1); }
    100% { transform: scale(1.52); }
}

@keyframes forteKenLaunchShake {
    0% { transform: translate3d(-1.4px, 0, 0) rotate(-1deg); }
    50% { transform: translate3d(1.6px, -1px, 0) rotate(1.1deg); }
    100% { transform: translate3d(-.8px, 0, 0) rotate(-.8deg); }
}

@keyframes forteKenLaunchFly {
    0% { transform: translate3d(0, 0, 0) scale(1.52) rotate(0deg); opacity: 1; }
    100% { transform: translate3d(14px, -132vh, 0) scale(1.04) rotate(1.2deg); opacity: 1; }
}

@keyframes forteKenParticle {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.68); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--forte-particle-x, 0px), var(--forte-particle-y, 120px), 0) scale(1.08); }
}

/* スマホ: footer linksを左寄せにして「リンク2列 + 右上に画像」の見せ方にする */
@media screen and (max-width: 767px) {
    /* contact黒ボックスとの間・ブロック全体の上下に余白を確保 */
    .footer_function .inner {
        display: grid !important;
        flex-direction: initial !important;
        align-items: end !important;
        grid-template-columns: minmax(0, 1fr) clamp(126px, 34vw, 154px);
        grid-template-areas:
            "nav ken"
            "banner banner"
            "copy copy";
        column-gap: 10px;
        align-items: end;
        /* UX30: 上のGoogle Map(黒ボックス)との距離を広げる */
        padding-top: 56px;
        padding-bottom: 18px;
    }

    .footer_function .inner .footer_nav {
        grid-area: nav;
        order: initial;
        grid-template-columns: 1fr !important;
        justify-content: flex-start;
        margin: 0 auto 0 clamp(46px, 12.5vw, 60px) !important;
        row-gap: 17px;
        column-gap: 0;
        width: auto !important;
        max-width: none;
    }

    .footer_function .inner .footer_nav li {
        justify-content: flex-start !important;
    }

    .footer_function .inner .footer_nav li a {
        font-size: 13.5px;
        line-height: 1.55;
        padding: 4px 0;
    }

    /* スマホ: kenはfooter links右で通常フローに置き、負マージンでlinksに少し
       かぶせつつ、下のVN SHOPバナーの上に立って見える位置・サイズにする */
    .forte-footer-ken {
        grid-area: ken;
        position: static;
        align-self: end;
        justify-self: end;
        width: clamp(142px, 36vw, 154px);
        margin: 4px 24px 0 auto;
        transform: translateX(-28px);
    }

    /* バナー上の余白をcontact黒ボックス下の余白感に合わせて少し広げる */
    .footer_function .inner .vnshop-ad {
        grid-area: banner;
        order: initial;
        margin-top: 42px;
    }

    .footer_function .inner .footer_copyrights {
        grid-area: copy;
        order: initial;
        margin-top: 18px;
    }
}

/* menu open時は1画面収めにこだわらず、必要なら自然に縦スクロールさせる。
   実機の下部ナビゲーションバーでVN SHOPバナーが隠れないよう、
   高さはdvh基準・下余白はsafe-area込みで確保する */
.op_global_nav {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== 右上MENUアイコン: 20秒放置の変身演出 =====
   段階: warn(煙+弱ネオン) → charge(点滅加速・眩しく) → burst(爆発) → transformed(縦長画像) */
.btn_humberger_box {
    position: relative;
}

/* 煙: rotatorの擬似要素2つをずらして立ちのぼらせる */
@keyframes forteIdlePuff {
    0%   { opacity: 0; transform: translate(var(--puff-x, 0px), 8px) scale(.5); }
    45%  { opacity: .6; }
    100% { opacity: 0; transform: translate(var(--puff-x, 0px), -32px) scale(1.7); }
}
.btn_humberger_box.forte-idle-warn .forte-menu-icon-rotator::before,
.btn_humberger_box.forte-idle-warn .forte-menu-icon-rotator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(222, 230, 240, .9) 0%, rgba(180, 195, 212, .4) 55%, transparent 76%);
    pointer-events: none;
    animation: forteIdlePuff 2.1s ease-out infinite;
}
.btn_humberger_box.forte-idle-warn .forte-menu-icon-rotator::after {
    --puff-x: -15px;
    width: 18px;
    height: 18px;
    animation-duration: 1.6s;
    animation-delay: .55s;
}
.btn_humberger_box.forte-idle-charge .forte-menu-icon-rotator::before,
.btn_humberger_box.forte-idle-charge .forte-menu-icon-rotator::after {
    animation-duration: .55s;
}

/* ネオン点滅: warnはゆっくり弱め、chargeは高速でかなり眩しく(青⇄マゼンタ交互) */
@keyframes forteIdleNeonSoft {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(120, 200, 255, .55)) drop-shadow(0 2px 8px rgba(6, 18, 31, .2)); }
    50%      { filter: drop-shadow(0 0 12px rgba(160, 225, 255, .95)) drop-shadow(0 0 24px rgba(90, 180, 255, .65)); }
}
@keyframes forteIdleNeonHard {
    0%   { filter: brightness(2) drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px #4dc3ff) drop-shadow(0 0 48px #38f2ff); }
    25%  { filter: brightness(.85) drop-shadow(0 0 2px rgba(255, 255, 255, .3)) drop-shadow(0 0 6px rgba(77, 195, 255, .25)); }
    50%  { filter: brightness(2) drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px #ff5ad2) drop-shadow(0 0 48px #b26bff); }
    75%  { filter: brightness(.85) drop-shadow(0 0 2px rgba(255, 255, 255, .3)) drop-shadow(0 0 6px rgba(178, 107, 255, .25)); }
    100% { filter: brightness(2) drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px #ffe27a) drop-shadow(0 0 44px #ff9a3c); }
}
.btn_humberger_box.forte-idle-warn .forte-menu-icon-rotator {
    animation: forteIdleNeonSoft 1.3s ease-in-out infinite;
}
.btn_humberger_box.forte-idle-charge .forte-menu-icon-rotator {
    animation: forteIdleNeonHard .5s steps(4, jump-none) infinite;
}

/* スマホ実機対策: filter系が効きにくい端末でも分かるよう、
   アイコン画像自体の明暗点滅(opacity)と背後のネオンリングを重ねる */
@keyframes forteIdleIconBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
.btn_humberger_box.forte-idle-warn .forte-menu-icon--front {
    animation: forteIdleIconBlink 1.2s ease-in-out infinite;
}
.btn_humberger_box.forte-idle-charge .forte-menu-icon--front {
    animation: forteIdleIconBlink .3s steps(2, jump-none) infinite;
}
@keyframes forteIdleHalo {
    0%, 100% { opacity: .25; transform: scale(.9); }
    50%      { opacity: .95; transform: scale(1.3); }
}
.btn_humberger_box.forte-idle-warn .btn_humberger::before,
.btn_humberger_box.forte-idle-charge .btn_humberger::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6px;
    width: 58px;
    height: 58px;
    margin-left: -29px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 220, 255, .85) 0%, rgba(90, 180, 255, .45) 45%, transparent 72%);
    pointer-events: none;
    z-index: -1;
    animation: forteIdleHalo 1.2s ease-in-out infinite;
}
.btn_humberger_box.forte-idle-charge .btn_humberger::before {
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 90, 210, .6) 40%, rgba(120, 220, 255, .4) 60%, transparent 75%);
    animation-duration: .3s;
}

/* 爆発: 大きな白→黄→橙フラッシュ + 衝撃波リングを広げる(ビッグバン風) */
@keyframes forteIdleBurst {
    0%   { opacity: 0; transform: scale(.25); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: scale(6.2); }
}
@keyframes forteIdleShockwave {
    0%   { opacity: .95; transform: scale(.3); border-width: 6px; }
    100% { opacity: 0; transform: scale(6); border-width: 1px; }
}
.btn_humberger_box.forte-idle-burst::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 16px;
    width: 84px;
    height: 84px;
    margin-left: -42px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #fff 18%, #ffe27a 38%, rgba(255, 140, 60, .9) 58%, rgba(255, 80, 160, .5) 70%, transparent 80%);
    pointer-events: none;
    z-index: 7;
    animation: forteIdleBurst .9s ease-out forwards;
}
.btn_humberger_box.forte-idle-burst::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 16px;
    width: 84px;
    height: 84px;
    margin-left: -42px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 22px rgba(120, 210, 255, .9), inset 0 0 14px rgba(255, 226, 122, .8);
    pointer-events: none;
    z-index: 6;
    animation: forteIdleShockwave .85s cubic-bezier(.16, .8, .3, 1) forwards;
}

/* 変身後: 丸アイコンを隠し、縦長画像がアイコン位置から下へ大きくはみ出す */
.btn_humberger_box.forte-idle-transformed .btn_humberger {
    visibility: hidden;
}
/* アイコン位置(右上)を基点に、右斜め下方向へふわっと拡大して現れる */
@keyframes forteIdleAvatarIn {
    0%   { opacity: 0; transform: translate(-16px, -12px) scale(.28); }
    62%  { opacity: 1; transform: translate(2px, 6px) scale(1.05); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.forte-menu-idle-avatar {
    display: block;
    position: absolute;
    top: 2px;
    right: -8px;
    /* 多言語ボタン(z-index:10001)やbody.open時のheader(10010)より前面 */
    z-index: 10012;
    /* ボタンは枠のみ。サイズは中のimg(固定aspect-ratio)に任せて変形を防ぐ */
    width: auto;
    height: auto !important;
    line-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform-origin: top right;
    filter: drop-shadow(0 0 16px rgba(120, 200, 255, .65)) drop-shadow(0 18px 32px rgba(6, 18, 31, .55));
    animation: forteIdleAvatarIn .7s cubic-bezier(.22, .8, .3, 1) both;
}
.forte-menu-idle-avatar[hidden] {
    display: none;
}
.forte-menu-idle-avatar img {
    /* 元画像(127x299)の比率を固定し、縦横どちらにも引き伸ばさない */
    display: block;
    width: auto !important;
    height: clamp(220px, 46vh, 270px) !important;
    max-width: none !important;
    max-height: 70vh;
    aspect-ratio: 127 / 299;
    object-fit: contain;
    object-position: top right;
}
@media screen and (min-width: 768px) {
    .forte-menu-idle-avatar {
        right: -12px;
    }
    .forte-menu-idle-avatar img {
        height: clamp(260px, 48vh, 320px) !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .btn_humberger_box.forte-idle-warn .forte-menu-icon-rotator,
    .btn_humberger_box.forte-idle-charge .forte-menu-icon-rotator,
    .btn_humberger_box.forte-idle-warn .forte-menu-icon-rotator::before,
    .btn_humberger_box.forte-idle-warn .forte-menu-icon-rotator::after,
    .btn_humberger_box.forte-idle-warn .forte-menu-icon--front,
    .btn_humberger_box.forte-idle-charge .forte-menu-icon--front,
    .btn_humberger_box.forte-idle-warn .btn_humberger::before,
    .btn_humberger_box.forte-idle-charge .btn_humberger::before,
    .btn_humberger_box.forte-idle-burst::after,
    .btn_humberger_box.forte-idle-burst::before,
    .forte-menu-idle-avatar {
        animation: none;
    }
}

/* ===== Loading/Opening: Skipボタン (下部中央) ===== */
.forte-opening_skip {
    position: absolute;
    left: 50%;
    bottom: max(26px, env(safe-area-inset-bottom, 0px) + 20px);
    transform: translateX(-50%);
    z-index: 5;
    padding: 9px 30px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(10, 25, 45, .45);
    color: #fff;
    font-family: var(--forte-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease;
}
.forte-opening_skip:hover {
    background: rgba(30, 60, 100, .6);
    border-color: rgba(255, 255, 255, .75);
}

/* menu close後、opacity:0のoverlayにbackdrop-filterレイヤーが残り続けると
   Safariで背後のHero H2 mix-blend合成へ影響し得るため、閉じたら完全に非表示化 */
body:not(.open) .op_global_nav {
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s .5s;
}
body.open .op_global_nav {
    visibility: visible;
}

/* ===== Forteの歩み: 画像のカメラ引き演出 (寄り→ゆっくり引く→少し保持→また寄る往復) =====
   alternate + 強いイージングだと戻りだけ体感速度が変わるため、
   1本のkeyframesで往復を明示し、各区間ease-in-outで速度感を揃える */
@keyframes fortePowerCameraPull {
    0%   { transform: scale(2.75); }
    45%  { transform: scale(1.04); }
    55%  { transform: scale(1.04); }
    100% { transform: scale(2.75); }
}
#p-top-power .top_power_img > div {
    overflow: hidden;
}
#p-top-power .top_power_img > div img {
    transform-origin: center center;
    transform: scale(2.75);
}
#p-top-power .top_power_img > div img.forte-power-camera-active {
    will-change: transform;
    animation: fortePowerCameraPull 48s ease-in-out infinite;
}

/* ===== X JAPANロゴ: JSでランダム方向へ飛ばす軽量ワープ演出 =====
   transform/opacityのみ。z-index:-2の背景コンテナ内なのでUI操作を邪魔しない */
.forte-xwarp {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
@keyframes forteXWarp {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.04) rotate(0deg);
    }
    8% {
        opacity: var(--forte-xwarp-opacity, .72);
    }
    62% {
        opacity: .52;
    }
    100% {
        opacity: 0;
        transform:
            translate3d(
                calc(-50% + var(--forte-xwarp-x, 42vw)),
                calc(-50% + var(--forte-xwarp-y, -34vh)),
                0
            )
            scale(var(--forte-xwarp-scale, 3.2))
            rotate(var(--forte-xwarp-rotate, 10deg));
    }
}
.forte-xwarp_logo {
    display: none;
}
.forte-xwarp_shot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(38vw, 300px);
    height: auto;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.04);
    will-change: transform, opacity;
    animation: forteXWarp var(--forte-xwarp-duration, 2.05s) cubic-bezier(.22, .06, .5, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .forte-xwarp {
        display: none;
    }
    #p-top-power .top_power_img > div img {
        animation: none;
        transform: none;
    }
}

/* ===== Blend headings (deco方式) =====
   実機Safariで唯一安定して表示できている forte-about-copy_deco と同条件に揃える:
   「通常フロー・position:static・独立要素・直接テキストに mix-blend-mode」。
   元見出しはSEO/a11y用に .forte-sr-only で残し、見た目は aria-hidden の deco 要素が担う。 */
.forte-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}
.forte-hd-deco,
.forte-hero-deco {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    mix-blend-mode: difference;
    /* 実機で成功しているabout deco / Hero decoはどちらもdrop-shadow付きのため同一条件に揃える */
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55)) !important;
    transform: none !important;
    opacity: 1 !important;
    isolation: auto !important;
    will-change: auto !important;
    pointer-events: none;
    user-select: none;
    text-shadow:
        0 0 20px rgba(122, 190, 255, .38),
        0 0 40px rgba(255, 255, 255, .18),
        0 16px 34px rgba(0, 0, 0, .72),
        0 5px 16px rgba(0, 0, 0, .68) !important;
}
.forte-hero-deco {
    margin: 0;
    font-family: var(--forte-sans);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: .03em;
    font-size: clamp(40px, 5vw, 76px);
}
@media screen and (max-width: 767px) {
    .forte-hero-deco {
        line-height: 1.05;
        font-size: clamp(34px, 9vw, 52px);
    }
}

/* ===== 魔女演出: 10秒無操作で左下から右上MENUへ飛来し、15秒のMENU変身へつなげる ===== */
.forte-witch {
    position: fixed;
    /* 停止位置はJS(function.js)が実際のMENUボタンrect基準でleft/topを設定する。
       ここはボタンを取得できなかった場合のfallback位置 */
    top: calc(env(safe-area-inset-top, 0px) + 30px);
    left: 58%;
    z-index: 10011; /* 多言語ボタン(10001)より前・変身avatar(10012)より後ろ */
    width: min(44vw, 190px);
    pointer-events: none;
    user-select: none;
}
.forte-witch[hidden] {
    display: none;
}
.forte-witch img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 14px rgba(190, 150, 255, .55)) drop-shadow(0 10px 24px rgba(6, 18, 31, .5));
}
/* 飛来: 画面左下から右上へ。ほうき移動はwrapper、ふわふわ揺れはimg側で分離 */
@keyframes forteWitchFly {
    /* 画面外左下から大きく入り、移動しながら縮小して現在サイズへ */
    0%   { opacity: 0; transform: translate3d(calc(-50% - 62vw), 72vh, 0) rotate(-9deg) scale(2.1); }
    10%  { opacity: 1; }
    55%  { transform: translate3d(calc(-50% - 16vw), 26vh, 0) rotate(-4deg) scale(1.45); }
    100% { opacity: 1; transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1); }
}
.forte-witch.is-flying {
    animation: forteWitchFly 4.2s cubic-bezier(.3, .5, .35, 1) both;
}
@keyframes forteWitchBob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-10px) rotate(2.5deg); }
}
.forte-witch.is-flying img {
    animation: forteWitchBob 2.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .forte-witch {
        display: none !important;
    }
}

/* ===== footerリンク: 少し太くして視認性を上げる (トップ/下層共通の方向) ===== */
.footer_nav a,
.forte-event-footer_nav a {
    font-weight: 700 !important;
    letter-spacing: .04em;
}

/* SP: Hero(100svh)下にイベント情報タイトルがチラ見えしないよう上余白を増やす */
@media screen and (max-width: 767px) {
    .forte-events {
        padding-top: 190px;
    }
}

/* ===== 下層MENU: トップMENU(op_global_nav)寄せの見た目 ===== */
.forte-event-menu_list a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.forte-event-menu_list .link_arrow {
    flex: 0 0 auto;
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
}
.forte-event-menu_list .link_arrow svg path {
    stroke: #fff;
}
.forte-event-menu_visual {
    max-width: 420px;
    margin: 22px auto 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.forte-event-menu_visual video {
    display: block;
    width: 100%;
    height: auto;
}
.forte-event-menu_ad {
    max-width: 420px;
    margin: 16px auto 0;
    border-radius: 10px;
    overflow: hidden;
}

/* 見出しdecoの下ライン: blend要素内にネストしたmix-blend/transformを持たせない
   (実機Safariで親のdifference合成を落とす疑いがあるため、成功例と同じ「装飾なし直下要素」条件に寄せる) */
.forte-hd-deco::after {
    mix-blend-mode: normal !important;
    transform: none !important;
}

/* ===== UX29/31: sectionタイトルのgradient/shimmerは全廃し、
   Hero/About本文下と同じ mix-blend-mode: difference の deco 見出しへ統一。
   blend条件は .forte-hd-deco と min-width:425px ブロック側で定義する ===== */

@media screen and (max-width: 767px) {
    .top_power > .inner > .top_power_hd,
    .top_role > .inner > .top_role_ttl,
    .top_roadmap > .inner > .top_roadmap_ttl,
    .top_movie_str > .inner > .top_movie_str_ttl,
    .top_usecase > .inner > .top_usecase_hd {
        height: auto !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    .top_usecase > .inner > .top_usecase_hd {
        line-height: 1.22 !important;
        padding-top: .18em !important;
        padding-bottom: .06em !important;
    }

    .top_power .top_power_wrap,
    .top_movie_str .top_movie_str_wrap,
    .top_usecase_list,
    .forte-roadmap_stage {
        margin-top: 36px !important;
    }

    /* 「Forteの楽しみ方」: 見出しと下画像は少し近づける(上余白はsection側で確保) */
    .top_role_image {
        margin-top: 20px !important;
    }

    .forte-events_hd,
    .forte-price_hd {
        margin-bottom: 26px !important;
    }

    /* UX29: section間が詰まって見えるため、全体的に余白を広げる */
    .top_power,
    .top_role,
    .top_usecase,
    .top_roadmap,
    .top_movie_str {
        padding-top: clamp(96px, 22vw, 132px) !important;
    }

    .forte-events {
        padding-bottom: 96px;
    }

    .forte-price {
        margin-top: clamp(104px, 24vw, 156px) !important;
    }
}

/* 下層VN SHOPバナー: JSのis-active切替を維持し、表示言語2枚を同一枠でcrossfadeする。 */
body.forte-event-page .vnshop-ad,
.forte-event-menu_ad,
.vnshop-ad {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
}

.vnshop-ad_link {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    overflow: hidden !important;
    transform: translateZ(0);
}

body.forte-event-page .vnshop-ad_slide {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 1s ease-in-out !important;
}

body.forte-event-page .vnshop-ad_slide[data-lang]:not(.is-lang) {
    display: none !important;
}

body.forte-event-page .vnshop-ad_slide.is-lang.is-active {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 下層MENU: 余白を少し詰め、トップMENUと同じ軽い白丸アウトライン矢印へ寄せる。 */
.op_global_nav > .inner {
    padding-top: 92px !important;
}

.forte-event-menu_list {
    gap: 4px;
}

.forte-event-menu_list a {
    padding: 11px 16px;
}

.op_global_nav .nav_main_list .link_arrow,
.forte-event-menu_list .link_arrow {
    flex: 0 0 auto;
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.op_global_nav .nav_main_list .link_arrow svg,
.forte-event-menu_list .link_arrow svg {
    width: 5px;
    height: 7px;
}

.op_global_nav .nav_main_list .link_arrow svg path,
.forte-event-menu_list .link_arrow svg path {
    stroke: #fff !important;
}

.footer_contact .inner .footer_contact_list ul {
    display: grid !important;
    gap: 14px !important;
}

.footer_contact .inner .footer_contact_list li {
    line-height: 1.65 !important;
}

.footer_contact_list_valuelink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    vertical-align: baseline;
}

.footer_contact_list_valuelink img {
    flex: 0 0 auto;
}

.forte-event-menu {
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
}

body.forte-event-page .article_header {
    z-index: 10020 !important;
}

body.forte-event-page .article_tools,
body.forte-event-page .btn_humberger_box,
body.forte-event-page button.btn_humberger {
    position: relative;
    z-index: 10030 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.forte-event-page.open .btn_humberger_box .btn_humberger .txt._close {
    opacity: 1 !important;
    visibility: visible !important;
}

body.forte-event-page.open .btn_humberger_box .btn_humberger .txt._menu {
    opacity: 0 !important;
}

.forte-event-menu_visual {
    position: relative;
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin-top: 22px !important;
}

.forte-event-menu_visual video {
    display: block;
    width: 100%;
    height: auto;
}

.forte-event-menu_sound {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3 !important;
}

.forte-event-menu_ad {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin-top: 20px !important;
    overflow: visible !important;
}

.forte-event-menu_ad .vnshop-ad_link,
body.forte-event-page .vnshop-ad_link {
    border-radius: 12px !important;
    box-shadow: none !important;
}

.forte-event-menu_ad .vnshop-ad_slide,
.forte-event-menu_ad .vnshop-ad_slide img,
body.forte-event-page .vnshop-ad_slide,
body.forte-event-page .vnshop-ad_slide img,
.vnshop-ad_slide img {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: inherit !important;
}

/* UX31/33: 下層一覧タイトルはgradient/shimmerをやめdifferenceの白見出しへ。
   UX31の背面ハイライト(もや)は実機確認で邪魔だったため削除済み */
body.forte-event-page .events_pagehd_en,
body.forte-event-page .events_pagehd_title {
    position: relative;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    animation: none !important;
    mix-blend-mode: difference;
    isolation: auto;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .5) !important;
}

body.forte-event-page .events_pagehd_en::after {
    background: #9fdcff !important;
    box-shadow: 0 0 8px rgba(159, 220, 255, .4) !important;
    mix-blend-mode: normal;
}

@media (hover: none) {
    .forte-event-menu_list a:hover,
    .forte-event-menu_list a:active,
    .forte-event-menu_list a:focus {
        background: transparent !important;
        border-color: transparent !important;
        outline: 0 !important;
        text-shadow: none !important;
    }

    .forte-event-menu_list a:focus-visible {
        outline: 1px solid rgba(255, 255, 255, .52) !important;
        outline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.forte-event-page .events_pagehd_en,
    body.forte-event-page .events_pagehd_title {
        animation: none !important;
    }
}

/* ============================================================
   UX29 追加調整
   ============================================================ */

/* 作業2: Hero表示用「Forte」(SP deco)のレスポンシブ位置。
   base(≤767)は left:3.33% + bottom計算で実機OKだが、768以上では
   itemboxの基準が変わる(768+: left clamp / 1024+: 中央630pxステージ)ため、
   viewport左固定のままだとテキストブロックから大きくズレる。
   blend条件(通常フロー相当のposition:absolute+difference)は変えない */
@media screen and (min-width: 768px) {
    .forte-hero-copy-deco {
        /* itembox(left: clamp(64px,9vw,76px) / bottom:76px)内の
           サブタイトル「ホーチミン中心部の…」のすぐ上に置く。
           306pxでは縦長タブレットで画面中央寄り・上寄りに見えたため詰める */
        left: clamp(64px, 9vw, 76px);
        bottom: 268px;
        font-size: clamp(88px, 14vw, 132px);
    }
}
@media screen and (min-width: 1024px) {
    .forte-hero-copy-deco {
        /* 中央630pxステージ(itembox left: calc(50vw - 315px))に揃える */
        left: calc(50vw - 315px);
        font-size: 132px;
    }
}

/* 作業4: イベント情報の赤いカウントダウン帯。1024+はsectionが全幅になり
   negative marginのfull-bleedだと一覧(596px)より大きくはみ出して見えるため、
   一覧と同じ幅のカードに揃える */
@media screen and (min-width: 1024px) {
    .forte-countdown {
        width: 100%;
        max-width: 596px;
        margin: 24px auto 28px;
        padding: 22px 28px;
        border-radius: 14px;
        border: 1px solid rgba(255, 170, 110, .45);
    }
}

/* 作業7: iPad横向きなど「横長で高さが低い」画面では、stepの内容高
   (画像44vh + テキストカード + 右アイコン)がpin中のstage高を超えて
   画像とカード/アイコンが重なって見えるため、画像高とアイコンを絞って
   確実に縦へ収める */
@media screen and (min-width: 768px) and (max-height: 920px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        gap: 12px 20px;
    }

    /* 高さの低い横長画面では画像高を絞る(3:2はwidth計算式で維持) */
    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        width: min(calc(min(36vh, 320px) * 3 / 2), 100%) !important;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        max-width: clamp(120px, 20vh, 180px);
    }
}

/* 作業8: 「Forteの想い」の行間・段落間を大きく取り、詰め込み感をなくす */
.top_movie_str_desc_ttl {
    line-height: 1.62 !important;
}

.top_movie_str_desc_label {
    margin-top: 26px !important;
}

.top_movie_str_desc_txt {
    margin-top: 40px !important;
}

.top_movie_str_desc_txt .txt {
    line-height: 2.1 !important;
}

.top_movie_str_desc_txt .txt:nth-child(2) {
    margin-top: 34px !important;
}

@media (max-width: 1023px) {
    .top_movie_str_desc_txt .txt {
        font-size: 1.4rem !important;
    }

    .top_movie_str .top_movie_str_img {
        margin-top: 46px !important;
    }
}

/* ============================================================
   UX30 追加調整
   ============================================================ */

/* 作業5: 768〜1023pxでMENUラベルが丸アイコン中央から左へ4pxズレる
   (style.cssの margin-left:-4px)のを打ち消して中央揃えにする */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .btn_humberger_box .btn_humberger .txt._menu {
        margin-left: 0 !important;
    }
}

/* 作業6: トップMENUの項目リスト左端を、下の動画(width min(100%,412px)・中央寄せ)の
   左端と同じラインに揃える。SPでは実質全幅のため見た目はほぼ変わらない */
.op_global_nav > .inner .nav_main {
    width: min(100%, 412px);
    margin-inline: auto;
}

/* UX30/35: 下層MENUを開いた際のX JAPANロゴ(閉じるボタン)。
   -2pxでもまだ丸アイコンから離れてはみ出し気味のため、さらに上へ寄せる
   (トップの位置は変えない) */
body.forte-event-page.open .btn_humberger_box .btn_humberger .txt {
    bottom: 8px;
}

/* 作業4: 下層MENU内VN SHOPバナー。footer用の
   body.forte-event-page .vnshop-ad { max-width:320px } がspecificityで勝って
   動画(420px)より狭くなっていたため、MENU内だけ動画と同幅へ広げる */
body.forte-event-page .forte-event-menu_ad {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
}

/* 作業9: footerのLINE行とGoogle Mapの間、およびMap下の余白を広げる
   (inline styleの margin:24px auto 0 を上書き) */
.footer_contact .inner .footer_contact_list > div[data-lenis-prevent] {
    margin-top: 48px !important;
    margin-bottom: 14px !important;
}

/* 作業11: イベント詳細ページの情報カード内テキストを読みやすく・押しやすく */
body.forte-event-page .info_box dl {
    gap: 16px 18px !important;
}

body.forte-event-page .info_box dt,
body.forte-event-page .info_box dd {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

/* UX31: 予約リンク(Facebook/LINE/email)の下線は消す。
   リンクである手掛かりは色・太字・tap areaで維持する */
body.forte-event-page .info_box dd a,
body.forte-event-page .info_box dd a:hover,
body.forte-event-page .info_box dd a:focus {
    display: inline-block;
    padding: 3px 2px;
    color: #7cc8ff;
    font-weight: 700;
    text-decoration: none !important;
}

/* 作業10: 詳細ページ情報カード内のGoogle Map(会場直下)。dl gridの全幅に置く */
body.forte-event-page .info_box .info_box_map {
    grid-column: 1 / -1;
    margin: 2px 0 6px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

body.forte-event-page .info_box .info_box_map iframe {
    display: block;
    width: 100%;
    height: clamp(220px, 40vw, 300px);
    border: 0;
}

/* 作業14: 料金カード右上の昼🌞/夜🌛絵文字 */
.pcard {
    position: relative;
}

/* UX31: 3倍程度に拡大し、背景装飾として右上に大きく置く。
   本文(label/title/note等)はrelative化して絵文字より前面に出す */
.pcard_emoji {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: clamp(84px, 20vw, 118px);
    line-height: 1;
    opacity: .9;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 6px 16px rgba(6, 18, 31, .4));
}

.pcard > *:not(.pcard_emoji) {
    position: relative;
}

/* 作業15: 768px以上の「Forteの夜」4ステップ。
   - stepを少し下げる(padding-top増)
   - 画像は3:2比率のまま一回り大きく(高さ基準でwidthを計算し比率を固定)
   - 画像・テキストカードとも左揃えにして左端ラインを一致させる
   - テキストカードは右アイコンへ多少被ってよい(negative margin + z-index) */
@media screen and (min-width: 768px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        padding-top: clamp(56px, 9vh, 88px);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        width: min(calc(min(48vh, 460px) * 3 / 2), 100%);
        height: auto !important;
        aspect-ratio: 3 / 2 !important;
        max-height: none !important;
        max-width: 100% !important;
        justify-self: start;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        justify-self: start;
        position: relative;
        z-index: 1;
        margin-right: clamp(-120px, -10vw, -56px);
    }
}

/* ============================================================
   UX31 追加調整
   ============================================================ */

/* ===== 作業1(UX33で改訂): UX31の見出し裏「もや」(radial glow / 局所ハイライト)は
   425px実機で邪魔・見づらいとの確認結果により全削除した。
   deco見出しのtext-shadowは黒シャドウのみを維持する(白/青グローは復活させない) */
.forte-hd-deco {
    text-shadow:
        0 10px 24px rgba(0, 0, 0, .5),
        0 3px 10px rgba(0, 0, 0, .42) !important;
}

/* ===== 作業5: /forte/news/ 直近イベントカードのネオン強調 ===== */
@keyframes forteEcardNeon {
    0%, 100% {
        box-shadow:
            0 0 14px rgba(124, 200, 255, .55),
            0 0 30px rgba(216, 92, 255, .32),
            inset 0 0 14px rgba(124, 200, 255, .12);
    }
    50% {
        box-shadow:
            0 0 22px rgba(124, 200, 255, .85),
            0 0 46px rgba(216, 92, 255, .5),
            inset 0 0 20px rgba(124, 200, 255, .18);
    }
}

body.forte-event-page .ecard.is-upcoming {
    border-color: rgba(124, 200, 255, .7) !important;
    animation: forteEcardNeon 2.4s ease-in-out infinite;
}

body.forte-event-page .ecard.is-upcoming:hover {
    border-color: #7cc8ff !important;
}

@media (prefers-reduced-motion: reduce) {
    body.forte-event-page .ecard.is-upcoming {
        animation: none;
        box-shadow: 0 0 18px rgba(124, 200, 255, .6), 0 0 34px rgba(216, 92, 255, .35);
    }
}

/* ============================================================
   UX32 CPU/再GET対策
   ============================================================ */

/* footer Ken: 全フレーム(ken1〜ken10)をDOMに常駐させ、src差し替えではなく
   opacity切替のみで表示を変える(毎秒の画像GETをなくす)。
   先頭フレーム(ken1)は通常フローで高さを担い、他はabsoluteで重ねる */
.forte-footer-ken img.forte-ken-frame {
    transition: opacity .18s linear;
}

.forte-footer-ken img.forte-ken-frame:not(.is-active) {
    opacity: 0;
}

.forte-footer-ken img.forte-ken-frame--layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* ============================================================
   UX33/34: mix-blend-modeは #363 では終了扱い。
   iPhone実機ではsectionタイトルのblendが見えないため、
   タイトルは白見出し(黒シャドウのみ)で完成とする。
   UX33のイベント情報blendテスト構造は撤去済み。
   ============================================================ */

/* ============================================================
   UX34 追加調整
   ============================================================ */

/* 作業2: 425px多言語Hero。EN/VIはCTA上のテキストが2行になり本文ブロックが
   上へ伸びてHero Forteと被るため、下側の余白を使って本文ブロックごと下げる。
   日本語(1行)は現状OKのため触らない */
@media screen and (max-width: 767px) {
    html[lang="en"] .top_main .top_main_itembox,
    html[lang="vi"] .top_main .top_main_itembox {
        bottom: calc(max(30px, 8vw) + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* 作業3: 768px以上のLoading「祝 20周年」を上げて動画への被りを減らす
   (425pxのSPブロック側 top: calc(50% - 186px) はそのまま) */
@media screen and (min-width: 768px) {
    .forte-opening_message {
        top: calc(50% - clamp(250px, 32vh, 330px));
    }
}

/* UX34/35: 768px以上のHero Forteを大きく下げる。
   268px→220px(UX34)でもまだ上すぎとの実機確認により、
   前回の下げ幅(48px)の約2倍をさらに下げて124pxにする */
@media screen and (min-width: 768px) {
    .forte-hero-copy-deco {
        bottom: 124px;
    }
}

/* 作業5: 768px以上のAboutシネマ上テキストは可読性優先。
   blendではなく純白文字+強めの黒シャドウで見せる(もや・glowは使わない)。
   425pxは現状OKのため変更しない */
@media screen and (min-width: 768px) {
    .forte-about-cinema_title {
        mix-blend-mode: normal;
        text-shadow:
            0 2px 6px rgba(0, 0, 0, .85),
            0 8px 28px rgba(0, 0, 0, .7);
    }

    .forte-about-cinema_desc {
        mix-blend-mode: normal;
        text-shadow:
            0 1px 4px rgba(0, 0, 0, .85),
            0 5px 18px rgba(0, 0, 0, .7);
    }
}

/* 作業6: 768px以上の「Forteの夜」。
   - stepの左右paddingを絞って画像をもう少し大きく(3:2はwidth計算式で維持)
   - 右下アイコンは右端揃え(justify-self:end)で画像右端ラインに合わせる
   - テキストカードは右へ数文字分広げる(アイコンへの多少の被りは許容) */
@media screen and (min-width: 768px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        padding-left: clamp(8px, 2vw, 20px);
        padding-right: clamp(8px, 2vw, 20px);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        width: min(calc(min(52vh, 500px) * 3 / 2), 100%);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        justify-self: end;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        margin-right: clamp(-150px, -14vw, -80px);
    }
}

/* ============================================================
   UX35 追加調整
   ============================================================ */

/* 作業6: 768px以上のHero日本語サブコピー
   「音楽と会話を楽しむ、大人の集いの場所。」を1行で見せる。
   日本語のみ対象(EN/VIの折返しは変えない)。425pxは現状維持 */
@media screen and (min-width: 768px) {
    html[lang="ja"] .top_main .top_main_itembox .sp_box .message br.tab {
        display: none;
    }

    html[lang="ja"] .top_main .top_main_itembox .sp_box .message {
        white-space: nowrap;
    }
}

/* 作業7: 768px以上の「Forteの夜」再調整。
   - stageを左右へ広げて大きい画像を前回より明確に大きくする(3:2は式で維持)
   - 右下の人物アイコンは右端揃えのまま内側へ寄せて飛び出しを解消
   - テキストカードはさらに数文字分広げる(アイコンへの被りは許容) */
@media screen and (min-width: 768px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        width: calc(100% + clamp(56px, 12vw, 112px));
        margin-left: calc(clamp(56px, 12vw, 112px) / -2);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        width: min(calc(min(56vh, 540px) * 3 / 2), 100%);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        justify-self: end;
        margin-right: clamp(20px, 5vw, 48px);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        margin-right: clamp(-170px, -17vw, -100px);
    }
}

/* UX36: 768px以上の「Forteの夜」は負マージン調整をやめ、
   上段画像100% / 下段カード+人物アイコンの構造へ整理する */
@media screen and (min-width: 768px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        width: min(100%, 820px);
        margin-left: auto;
        margin-right: auto;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        grid-template-columns: minmax(0, 1fr) clamp(150px, 21vw, 200px);
        grid-template-rows: auto auto;
        align-content: center;
        gap: 18px 24px;
        padding-left: clamp(18px, 3.5vw, 34px);
        padding-right: clamp(18px, 3.5vw, 34px);
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        max-height: min(46vh, 430px);
        justify-self: center;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        grid-column: 1;
        width: 100%;
        max-width: 520px;
        min-height: 150px;
        margin-right: 0;
        align-self: center;
        justify-self: start;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_ttl {
        min-height: 2.56em;
        align-items: flex-start;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_txt {
        min-height: 5.4em;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        grid-column: 2;
        width: min(100%, 190px);
        max-width: 190px;
        margin-right: clamp(18px, 4vw, 36px);
        align-self: end;
        justify-self: end;
    }
}

@media screen and (min-width: 768px) and (max-width: 860px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        width: min(100%, 760px);
    }
}

/* 作業8: 下層ページ上部ナビの帯背景を削除(全デバイス共通)。
   ロゴ・言語切替・MENUボタンは残し、stickyの追従も維持する */
body.forte-event-page .article_header {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
}

/* UX37: 768px Hero の EN/VI は JA 正本準拠の短い1行コピーを優先する */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    html[lang="en"] .top_main .top_main_itembox .catchcopy .english,
    html[lang="vi"] .top_main .top_main_itembox .catchcopy .english {
        width: 100%;
        max-width: 100%;
        font-size: clamp(15px, 2vw, 17px);
        line-height: 1.38;
        letter-spacing: .01em;
        white-space: nowrap;
    }

    html[lang="en"] .top_main .top_main_itembox .sp_box .message,
    html[lang="vi"] .top_main .top_main_itembox .sp_box .message {
        font-size: clamp(15px, 2vw, 17px);
        line-height: 1.42;
        letter-spacing: .01em;
        white-space: nowrap;
    }
}

/* UX37: 768px の「Forteの夜」は step 幅を約620pxに揃え、
   上段画像 + 下段カード/人物アイコンの grid-template-areas で固定する */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        grid-template-columns: minmax(0, 1fr) clamp(112px, 18vw, 140px);
        grid-template-areas:
            "media media"
            "body icon";
        grid-template-rows: auto auto;
        width: min(calc(100% - 12px), 620px);
        left: 0;
        right: 0;
        margin-inline: auto;
        gap: 18px 20px;
        padding: 26px 0 34px;
        justify-content: center;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_marker {
        display: none;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        grid-area: media;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        aspect-ratio: 3 / 2;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        grid-area: body;
        width: 100%;
        max-width: 408px;
        min-height: 0;
        margin: 0;
        align-self: start;
        justify-self: start;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_ttl,
    .top_roadmap.is-roadmap-cinema .forte-roadmap_txt {
        min-height: 0;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        grid-area: icon;
        width: clamp(112px, 16vw, 140px);
        max-width: 140px;
        margin: 0;
        align-self: end;
        justify-self: end;
    }
}

/* UX38: Hero の主要2行は 768px 以上で全言語とも 1 行優先にする */
@media screen and (min-width: 768px) and (max-width: 1366px) {
    .top_main .top_main_itembox .catchcopy .english,
    .top_main .top_main_itembox .top_main_item02 .english,
    .top_main .top_main_itembox .top_main_item02 .message,
    .top_main .top_main_itembox .sp_box .message {
        max-width: none !important;
        white-space: nowrap !important;
        letter-spacing: .01em !important;
    }

    .top_main .top_main_itembox .catchcopy .english,
    .top_main .top_main_itembox .sp_box .message {
        font-size: clamp(14px, 1.65vw, 16px) !important;
        line-height: 1.38 !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .top_main .top_main_itembox {
        width: 720px !important;
        left: calc(50vw - 360px) !important;
    }

    .top_main .top_main_itembox .top_main_item02 {
        gap: 16px;
    }

    .top_main .top_main_itembox .top_main_item02 .english {
        flex: 0 1 auto;
        font-size: 14px !important;
        line-height: 1.32 !important;
        letter-spacing: .01em !important;
    }

    .top_main .top_main_itembox .top_main_item02 .message {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px !important;
        line-height: 1.35 !important;
        padding-right: 0 !important;
    }
}

/* UX38: 768px で OK だった「Forteの夜」レイアウトを 1024px+ の iPad 横向きにも拡張 */
@media screen and (min-width: 768px) and (max-width: 1366px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_stage {
        width: min(100%, 820px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        grid-template-columns: minmax(0, 1fr) clamp(112px, 18vw, 140px) !important;
        grid-template-areas:
            "media media"
            "body icon";
        grid-template-rows: auto auto !important;
        width: min(calc(100% - 12px), 620px) !important;
        left: 0 !important;
        right: 0 !important;
        margin-inline: auto !important;
        gap: 18px 20px !important;
        padding: 26px 0 34px !important;
        justify-content: center !important;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_marker {
        display: none !important;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_media {
        grid-area: media;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        aspect-ratio: 3 / 2 !important;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_body {
        grid-area: body;
        width: 100% !important;
        max-width: 408px !important;
        min-height: 0 !important;
        margin: 0 !important;
        align-self: start !important;
        justify-self: start !important;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_ttl,
    .top_roadmap.is-roadmap-cinema .forte-roadmap_txt {
        min-height: 0 !important;
    }

    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        grid-area: icon;
        width: clamp(112px, 16vw, 140px) !important;
        max-width: 140px !important;
        margin: 0 !important;
        align-self: end !important;
        justify-self: end !important;
    }
}

/* UX38: VI footer の長い導線と Ken の被りを緩和する */
@media screen and (max-width: 1023px) {
    html[lang="vi"] .footer_function .inner .footer_nav li a {
        font-size: 12.5px;
        line-height: 1.48;
    }

    html[lang="vi"] .forte-footer-ken {
        margin-right: 10px;
        transform: translateX(-10px);
    }
}

@media screen and (min-width: 1024px) {
    html[lang="vi"] .footer_function .inner .footer_nav {
        margin-left: clamp(28px, 8vw, 42px) !important;
    }

    html[lang="vi"] .forte-footer-ken {
        right: calc(50% - 324px) !important;
    }
}

/* UX38: 下層 MENU の X JAPAN 白ロゴが欠けないよう、閉じる表示領域を上へ寄せて広げる */
body.forte-event-page .btn_humberger_box,
body.forte-event-page button.btn_humberger,
body.forte-event-page .btn_humberger_box .btn_humberger .txt._close {
    overflow: visible !important;
}

body.forte-event-page button.btn_humberger {
    height: 72px !important;
}

body.forte-event-page.open .btn_humberger_box .btn_humberger .txt {
    bottom: 12px !important;
}

body.forte-event-page.open .btn_humberger_box .btn_humberger .txt._close {
    width: 34px !important;
    height: 28px !important;
    margin-bottom: 0 !important;
}

body.forte-event-page .btn_humberger_box .btn_humberger .txt._close .forte-close-logo {
    width: 24px !important;
}

/* UX39: 1024px+/desktop Hero は sp-only 構成のまま幅制約を整理し、主要コピーを 1 行維持 */
@media screen and (min-width: 1024px) {
    .top_main .top_main_itembox {
        width: min(calc(100vw - 176px), 680px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .top_main .top_main_itembox .catchcopy,
    .top_main .top_main_itembox .sp_box {
        width: min(100%, 540px) !important;
    }

    .top_main .top_main_itembox .catchcopy .english,
    .top_main .top_main_itembox .sp_box .message {
        max-width: none !important;
        white-space: nowrap !important;
        font-size: clamp(15px, 1.08vw, 16.5px) !important;
        line-height: 1.42 !important;
        letter-spacing: .01em !important;
    }

    .top_main .top_main_itembox .sp_box .function {
        width: max-content;
        max-width: 100%;
    }
}

/* UX39: 1024px 付近の footer は nav と Ken の干渉を避け、tablet に近いバランスへ */
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    .footer_function .inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 148px;
        grid-template-areas:
            "nav ken"
            "banner banner"
            "copy copy";
        align-items: end !important;
        column-gap: 20px;
        row-gap: 22px;
        padding-top: 44px;
    }

    .footer_function .inner .footer_nav {
        grid-area: nav;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, max-content));
        justify-content: start;
        column-gap: 30px;
        row-gap: 14px;
        width: auto !important;
        max-width: 100%;
        margin: 0 0 0 20px !important;
    }

    .footer_function .inner .footer_nav li {
        width: auto !important;
        margin: 0 !important;
        justify-content: flex-start !important;
    }

    .footer_function .inner .footer_nav li a {
        justify-content: flex-start !important;
        white-space: nowrap;
    }

    .footer_function .inner .vnshop-ad {
        grid-area: banner;
        margin-top: 12px;
    }

    .footer_function .inner .footer_copyrights {
        grid-area: copy;
        margin-top: 0 !important;
    }

    .forte-footer-ken {
        grid-area: ken;
        position: static !important;
        justify-self: end;
        align-self: end;
        width: 136px;
        margin: 0 4px 0 0;
        transform: none !important;
    }

    html[lang="vi"] .footer_function .inner .footer_nav {
        column-gap: 22px;
        row-gap: 12px;
        margin-left: 12px !important;
    }

    html[lang="vi"] .footer_function .inner .footer_nav li a {
        font-size: 11.5px;
        line-height: 1.48;
    }
}

/* UX39: 768px の「Forteの歩み」は人物が少しだけ大きく見えるよう右下寄せで拡大 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .top_power .inner .top_power_img > div img {
        transform: scale(1.035);
        transform-origin: 78% 86%;
    }
}

/* ============================================================
   UX40 追加調整
   ============================================================ */

/* UX40 作業1: 1024px+ Hero。deco「Forte」は 630px 中央ステージ基準
   (left: calc(50vw - 315px)) なのに対し、UX39 の itembox は 680px 中央寄せで
   左端が 25px ずれていた。itembox を同じ 630px ステージへ戻し、
   Forte / サブタイトル / CTA上メッセージの左端と幅を揃える */
@media screen and (min-width: 1024px) {
    .top_main .top_main_itembox {
        width: 630px !important;
        left: calc(50vw - 315px) !important;
        transform: none !important;
    }

    .top_main .top_main_itembox .catchcopy,
    .top_main .top_main_itembox .sp_box {
        width: 100% !important;
    }
}

/* UX40 作業2: 1024px帯 footer は UX39 grid のまま、nav を左下寄せから
   中央寄せ方向へ戻し、文字サイズも少し戻す。Ken 画像群は右端側へ寄せる */
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    .footer_function .inner .footer_nav {
        justify-self: center;
        justify-content: center;
        column-gap: 44px;
        row-gap: 16px;
        margin: 0 !important;
    }

    .footer_function .inner .footer_nav li a {
        font-size: 13px;
    }

    html[lang="vi"] .footer_function .inner .footer_nav {
        column-gap: 30px;
        margin: 0 !important;
    }

    html[lang="vi"] .footer_function .inner .footer_nav li a {
        font-size: 12.5px;
    }

    /* UX39 の margin: 0 4px 0 0 を右方向へ(画面外には出ない: inner に
       padding-inline clamp(28px,5vw,48px) がある) */
    .forte-footer-ken {
        margin: 0 -6px 0 0;
    }
}

/* UX40 作業2/3: 1181px以上。UX38 の VI 用 margin-left が nav の中央寄せ
   (margin auto) を壊していたため解除し、全言語とも中央寄せへ戻す。
   Ken 画像群は右基準を 308px→344px にして少し右へ(1181px時でも
   Ken右端 = 中央+344px < 半幅590px で画面内に収まる) */
@media screen and (min-width: 1181px) {
    .footer_function .inner .footer_nav {
        justify-content: center;
        margin-inline: auto !important;
    }

    html[lang="vi"] .footer_function .inner .footer_nav {
        margin-left: auto !important;
    }

    .forte-footer-ken,
    html[lang="vi"] .forte-footer-ken {
        right: calc(50% - 344px) !important;
    }
}

/* ============================================================
   UX41 追加調整
   ============================================================ */

/* UX41 作業1: 1024px前後の「Forteの夜」は、上の大画像と下段カード/人物アイコンが
   近くて微妙に被って見えるため、row-gap だけ +16px 広げる(UX38 の 18px 20px を
   1024px以上でのみ上書き。768px帯・grid構造・画像サイズは変えない) */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_step {
        gap: 34px 20px !important;
    }
}

/* UX41 作業2: 下層ページ MENU 開時の X JAPAN 白ロゴを丸い MENU アイコン寄りへ
   +16px 上げる(UX38 の bottom:12px を ._close だけ上書き。丸アイコンへの多少の
   被りは許容・クリック対象は button 全体なので操作性は変わらない) */
body.forte-event-page.open .btn_humberger_box .btn_humberger .txt._close {
    bottom: 28px !important;
}

/* ============================================================
   UX42 追加調整
   ============================================================ */

/* UX42: 1024px iPad実機の「Forteの夜」はUX41の row-gap 拡大だけでは
   大画像と下段カード/人物アイコンがまだ近い。UX38 が body/bicon に
   margin: 0 !important を効かせており gap 以外の余白が入らないため、
   1024〜1180px帯だけ後勝ちの margin-top で下段を +28px 下げる
   (grid構造・画像サイズ・横配置は変えない) */
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    .top_roadmap.is-roadmap-cinema .forte-roadmap_body,
    .top_roadmap.is-roadmap-cinema .forte-roadmap_bicon {
        margin-top: 28px !important;
    }
}