/* ==========================================================================
   Bridge Flow — Motion v2 (Redesign Pack)
   参考サイト風：ネイビー×エレクトリックブルー×アクア、大型H1、
   橋SVG、巨大英字マーキー、WEB CREATIVEセクション、番号付きヘッダー等
   ========================================================================== */

/* -----------------------------------------------------------------
   0. Design Tokens (v2)
----------------------------------------------------------------- */
:root {
    --bf-navy-950: #050d1d;
    --bf-navy-900: #071429;
    --bf-navy-800: #0a1e3f;
    --bf-navy-700: #0f2a55;
    --bf-blue:     #245fe7;
    --bf-blue-2:   #3a7bd5;
    --bf-aqua:     #78dbe3;
    --bf-aqua-2:   #a8ecf0;
    --bf-white:    #ffffff;
    --bf-line:     rgba(255,255,255,0.14);
    --bf-line-dk:  rgba(10,30,63,0.14);
    --bf-gold:     #d4a857; /* 5% 以下の差し色のみ */
    --bf-serif:    "Playfair Display", "Noto Serif JP", serif;
    --bf-sans:     "Montserrat", "Noto Sans JP", sans-serif;
    --bf-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
    --bf-ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* -----------------------------------------------------------------
   1. Fail-safe (JS 失敗時でもコンテンツを見せる)
----------------------------------------------------------------- */
html.no-js .bfv2-intro,
html.no-js .bfv2-loader { display:none !important; }

@keyframes bfV2ForceShow {
    to { opacity: 1; transform: none; filter:none; visibility:visible; }
}
@keyframes bfV2ForceHide {
    to { opacity: 0; visibility:hidden; pointer-events:none; }
}

/* Main は 2.4s で強制表示（intro/loaderのJSが失敗しても） */
main.page-fade { animation: bfV2ForceShow 0.01s 2.4s forwards; }

/* Loader/Intro は 2.6s で強制非表示 */
.bfv2-loader,
.bfv2-intro { animation: bfV2ForceHide 0.01s 2.8s forwards; }

/* -----------------------------------------------------------------
   2. Loader (下層ページ 0.8s)
----------------------------------------------------------------- */
.bfv2-loader {
    position: fixed; inset: 0; z-index: 9800;
    background: radial-gradient(1200px 700px at 50% 50%, #0a1e3f 0%, var(--bf-navy-950) 100%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .55s var(--bf-ease), visibility .55s var(--bf-ease);
}
.bfv2-loader.is-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.bfv2-loader-inner { text-align:center; color:#fff; letter-spacing:.2em; }
.bfv2-loader-mark  {
    font-family: var(--bf-sans);
    font-size: clamp(20px, 3vw, 28px); font-weight: 500;
    display:inline-flex; align-items:center; gap: 14px;
}
.bfv2-loader-mark span.dot {
    width: 6px; height: 6px; border-radius:50%;
    background: var(--bf-aqua); box-shadow: 0 0 12px var(--bf-aqua);
    animation: bfV2Pulse 1.1s ease-in-out infinite;
}
.bfv2-loader-cap { margin-top: 12px; font-size: 11px; opacity:.55; letter-spacing:.32em; }
.bfv2-loader-bar {
    margin: 22px auto 0; width: 220px; height: 1px;
    background: rgba(255,255,255,.14); overflow: hidden; position: relative;
}
.bfv2-loader-bar::after {
    content:""; position:absolute; top:0; left:0; height:100%; width:40%;
    background: linear-gradient(90deg, transparent, var(--bf-aqua), transparent);
    animation: bfV2Sweep 1.1s linear infinite;
}
@keyframes bfV2Pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@keyframes bfV2Sweep { 0% { transform:translateX(-100%); } 100% { transform:translateX(340%); } }

/* -----------------------------------------------------------------
   3. HOME Intro (1.6-1.9s)
----------------------------------------------------------------- */
.bfv2-intro {
    position: fixed; inset:0; z-index: 9900;
    background: linear-gradient(180deg, var(--bf-navy-950) 0%, var(--bf-navy-900) 100%);
    color:#fff; overflow:hidden;
    transition: transform .7s var(--bf-ease-out), opacity .5s var(--bf-ease-out);
}
.bfv2-intro.is-out {
    transform: translateY(-100%);
}
.bfv2-intro-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.bfv2-intro-center {
    position: absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.bfv2-intro-badge {
    font-family: var(--bf-sans); font-size: 10px; letter-spacing:.55em;
    opacity:0; animation: bfV2FadeIn .5s .1s forwards var(--bf-ease-out);
    color: var(--bf-aqua-2);
}
.bfv2-intro-brand {
    display:flex; align-items:center; gap: clamp(24px, 5vw, 60px);
    margin-top: 22px;
    font-family: var(--bf-sans); font-weight: 300;
    font-size: clamp(38px, 8vw, 96px);
    letter-spacing: .02em;
}
.bfv2-intro-brand .w {
    opacity:0; transform: translateY(28px);
    animation: bfV2Rise .8s var(--bf-ease-out) forwards;
}
.bfv2-intro-brand .w.left  { animation-delay: .15s; }
.bfv2-intro-brand .w.right {
    animation-delay: .95s;
    font-family: var(--bf-serif); font-style: italic; font-weight:400;
    color: var(--bf-aqua);
}
.bfv2-intro-bridge {
    width: clamp(120px, 20vw, 220px); height: 60px;
    opacity: 0; animation: bfV2FadeIn .6s .35s forwards var(--bf-ease-out);
}
.bfv2-intro-bridge svg { width:100%; height:100%; overflow:visible; }
.bfv2-intro-bridge path.arc,
.bfv2-intro-bridge path.flow,
.bfv2-intro-bridge line.pillar {
    fill:none; stroke: rgba(255,255,255,.85); stroke-width: 1.4;
    stroke-dasharray: 400; stroke-dashoffset: 400;
    animation: bfV2Draw 1.0s .5s var(--bf-ease-out) forwards;
}
.bfv2-intro-bridge path.flow  { stroke: var(--bf-aqua); animation-delay: .95s; }
.bfv2-intro-bridge line.pillar { stroke-width:1; opacity:.6; animation-delay: .75s; }
.bfv2-intro-bridge .spark {
    fill: var(--bf-aqua); opacity:0;
    animation: bfV2Spark 1.2s 1.15s forwards var(--bf-ease-out);
}
.bfv2-intro-progress {
    position:absolute; left: 8%; right: 8%; bottom: 8vh;
    height: 1px; background: rgba(255,255,255,.12); overflow:hidden;
}
.bfv2-intro-progress::before {
    content:""; position:absolute; inset: 0 100% 0 0;
    background: linear-gradient(90deg, var(--bf-blue), var(--bf-aqua));
    animation: bfV2Progress 1.55s .2s forwards var(--bf-ease-out);
}
.bfv2-intro-meta {
    position:absolute; bottom: 12vh; left:0; right:0;
    display:flex; justify-content:space-between; padding: 0 8%;
    font-family: var(--bf-sans); font-size: 10px; letter-spacing:.4em;
    color: rgba(255,255,255,.6);
}
.bfv2-intro-meta span { opacity:0; animation: bfV2FadeIn .5s 1.0s forwards; }
.bfv2-intro-scan {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(180deg, transparent 0%, rgba(120,219,227,.08) 50%, transparent 100%);
    transform: translateY(-100%);
    animation: bfV2Scan 1.7s .2s var(--bf-ease-out) forwards;
    pointer-events:none;
}
@keyframes bfV2Rise    { to { opacity:1; transform:none; } }
@keyframes bfV2FadeIn  { to { opacity:1; } }
@keyframes bfV2Draw    { to { stroke-dashoffset: 0; } }
@keyframes bfV2Spark   { 40% { opacity:1; transform: scale(1.4); } 100% { opacity:0; transform: scale(1); } }
@keyframes bfV2Progress{ to { inset: 0 0 0 0; } }
@keyframes bfV2Scan    { to { transform: translateY(100%); } }

/* -----------------------------------------------------------------
   4. Scroll progress bar (共通)
----------------------------------------------------------------- */
.bfv2-progress {
    position: fixed; top:0; left:0; right:0; height: 2px;
    z-index: 9500; pointer-events:none;
    background: rgba(255,255,255,.06);
}
.bfv2-progress-fill {
    height:100%; width: 0%;
    background: linear-gradient(90deg, var(--bf-blue) 0%, var(--bf-aqua) 100%);
    transition: width .1s linear;
    box-shadow: 0 0 14px rgba(120,219,227,.5);
}

/* -----------------------------------------------------------------
   5. Page wipe (link 遷移時)
----------------------------------------------------------------- */
.bfv2-wipe {
    position: fixed; inset:0; z-index: 9700; pointer-events:none;
    transform: translateY(100%);
    background: linear-gradient(180deg, var(--bf-blue) 0%, var(--bf-aqua) 100%);
}
.bfv2-wipe.is-play {
    animation: bfV2Wipe .6s var(--bf-ease-out) forwards;
}
@keyframes bfV2Wipe {
    0%   { transform: translateY(100%); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* -----------------------------------------------------------------
   6. HOME 全面リデザイン
----------------------------------------------------------------- */
body.bfv2-home { background: var(--bf-navy-950); color: #fff; }

/* ---- 6.1 Header (94px, 番号付き4分割) ---------------------- */
body.bfv2-home .site-header,
body.bfv2 .site-header {
    background: rgba(5, 13, 29, 0.72) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--bf-line);
    height: 74px;
}
@media (min-width: 992px) {
    body.bfv2-home .site-header,
    body.bfv2 .site-header { height: 94px; }
}
body.bfv2 .site-header .header-inner {
    height: 100%;
    max-width: none; padding: 0 32px;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
}
body.bfv2 .site-logo .main { color: #fff; font-weight: 500; letter-spacing: .04em; }
body.bfv2 .site-logo .sub  { color: rgba(255,255,255,.55); font-size: 10px; letter-spacing:.28em; }
body.bfv2 .site-logo-mark img { filter: brightness(1.1); }

body.bfv2 .main-nav .nav-list {
    display: flex; gap: 0; margin:0; padding:0; list-style:none;
    border-left: 1px solid var(--bf-line);
}
body.bfv2 .main-nav .nav-list li {
    position: relative;
    padding: 0;
    border-right: 1px solid var(--bf-line);
}
body.bfv2 .main-nav .nav-list li a {
    display:flex; flex-direction:column; align-items:flex-start; gap: 4px;
    padding: 12px 22px;
    color: rgba(255,255,255,.8);
    font-family: var(--bf-sans); font-size: 13px; font-weight: 500;
    text-decoration: none; letter-spacing: .05em;
    transition: color .3s var(--bf-ease), background .3s var(--bf-ease);
    position: relative;
}
body.bfv2 .main-nav .nav-list li a .en {
    font-size: 10px; letter-spacing: .3em; color: var(--bf-aqua-2);
    opacity:.75;
}
body.bfv2 .main-nav .nav-list li a::before {
    content: "0" counter(navItem);
    counter-increment: navItem;
    position: absolute; top: 8px; right: 8px;
    font-size: 8px; letter-spacing: .3em;
    color: rgba(120,219,227,.35);
    font-family: var(--bf-sans);
}
body.bfv2 .main-nav .nav-list { counter-reset: navItem; }
body.bfv2 .main-nav .nav-list li a:hover,
body.bfv2 .main-nav .nav-list li a.active {
    color:#fff; background: rgba(36, 95, 231, 0.14);
}
body.bfv2 .main-nav .nav-list li a.active::after {
    content:""; position:absolute; left: 22px; right: 22px; bottom: 8px; height: 1px;
    background: var(--bf-aqua);
}
body.bfv2 .main-nav .nav-contact-btn {
    margin-left: 0;
    background: var(--bf-blue) !important;
    color: #fff !important;
    padding: 12px 24px; border-radius: 0;
    font-family: var(--bf-sans); font-size: 13px; letter-spacing:.1em; font-weight: 500;
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; border: none;
    box-shadow: 0 8px 30px rgba(36,95,231,.35);
    transition: background .3s var(--bf-ease), transform .3s var(--bf-ease);
    position: relative; overflow: hidden;
}
body.bfv2 .main-nav .nav-contact-btn::before {
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-100%);
}
body.bfv2 .main-nav .nav-contact-btn:hover {
    background: linear-gradient(120deg, var(--bf-blue), #3a7bd5) !important;
    transform: translateY(-1px);
}
body.bfv2 .main-nav .nav-contact-btn:hover::before {
    transform: translateX(100%); transition: transform .8s var(--bf-ease-out);
}
body.bfv2 .nav-toggle span { background:#fff !important; }

/* ヘッダー全体を白背景ページ（下層）でネイビーに反転 */
body.bfv2:not(.bfv2-home) .site-header {
    background: rgba(5, 13, 29, 0.92) !important;
}

/* ---- 6.2 HERO ---------------------- */
.bfv2-hero {
    position: relative;
    min-height: 880px; height: 100svh; max-height: 1080px;
    background: radial-gradient(1400px 900px at 78% 55%, #0f2a55 0%, var(--bf-navy-950) 60%);
    color: #fff; overflow: hidden;
    display: flex; align-items: center;
    padding-top: 94px;
    /* mouse position vars */
    --mx: 0.5; --my: 0.5;
}
@media (max-width: 991px) { .bfv2-hero { padding-top: 74px; min-height: 720px; } }

.bfv2-hero-grid {
    position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(120,219,227,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,219,227,.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
}
.bfv2-hero-glow {
    position:absolute; right: -10%; top: 20%;
    width: 900px; height: 900px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(36,95,231,.55) 0%, rgba(36,95,231,.18) 40%, transparent 70%);
    filter: blur(30px);
    transform: translate3d(calc((var(--mx) - 0.5) * -30px), calc((var(--my) - 0.5) * -20px), 0);
    transition: transform .6s var(--bf-ease-out);
    pointer-events:none;
}
.bfv2-hero-glow.aqua {
    right: 10%; top: 55%;
    width: 400px; height: 400px;
    background: radial-gradient(closest-side, rgba(120,219,227,.5) 0%, transparent 70%);
    transform: translate3d(calc((var(--mx) - 0.5) * 40px), calc((var(--my) - 0.5) * 30px), 0);
}
.bfv2-hero-arcs {
    position: absolute; right: -8%; top: 0; bottom:0;
    width: 68%; pointer-events:none;
    transform: translate3d(calc((var(--mx) - 0.5) * -14px), calc((var(--my) - 0.5) * -8px), 0);
    transition: transform .6s var(--bf-ease-out);
}
.bfv2-hero-arcs svg { width: 100%; height:100%; overflow:visible; }
.bfv2-hero-arcs .arc {
    fill:none; stroke: rgba(120,219,227,.55); stroke-width: 1.2;
    stroke-dasharray: 3000; stroke-dashoffset: 3000;
    animation: bfV2Draw 2.4s .5s var(--bf-ease-out) forwards;
}
.bfv2-hero-arcs .arc.thin  { stroke: rgba(255,255,255,.18); animation-delay: .8s; }
.bfv2-hero-arcs .arc.thin2 { stroke: rgba(255,255,255,.12); animation-delay: 1.1s; }
.bfv2-hero-arcs .arc.blue  { stroke: rgba(36,95,231,.6); animation-delay: .3s; }
.bfv2-hero-arcs .pillar {
    stroke: rgba(255,255,255,.16); stroke-width: 1;
    stroke-dasharray: 400; stroke-dashoffset: 400;
    animation: bfV2Draw 1.4s 1.2s var(--bf-ease-out) forwards;
}
.bfv2-hero-arcs .node {
    fill: var(--bf-aqua); opacity:0;
    animation: bfV2FadeIn .5s 1.6s forwards, bfV2NodePulse 2.5s 2s ease-in-out infinite;
}
.bfv2-hero-arcs .node.small { animation-delay: 1.8s, 2.2s; }
@keyframes bfV2NodePulse { 0%,100% { opacity:.9; r: 4; } 50% { opacity:.4; r: 5.5; } }

.bfv2-hero-flow {
    position:absolute; inset:0; pointer-events:none;
    overflow: hidden;
}
.bfv2-hero-flow i {
    position:absolute; width: 4px; height: 4px; border-radius:50%;
    background: var(--bf-aqua);
    box-shadow: 0 0 12px var(--bf-aqua);
    opacity: 0;
}
.bfv2-hero-flow i:nth-child(1) { animation: bfV2FlowA 4.5s 2.0s linear infinite; }
.bfv2-hero-flow i:nth-child(2) { animation: bfV2FlowA 4.5s 3.3s linear infinite; }
.bfv2-hero-flow i:nth-child(3) { animation: bfV2FlowA 4.5s 4.6s linear infinite; }
@keyframes bfV2FlowA {
    0%   { top: 78%; left: -5%; opacity:0; }
    10%  { opacity:.9; }
    50%  { top: 30%; left: 50%; opacity: 1; }
    90%  { opacity: .8; }
    100% { top: 60%; left: 110%; opacity:0; }
}

.bfv2-hero-scan {
    position:absolute; inset: 0; pointer-events:none;
    background: linear-gradient(105deg, transparent 40%, rgba(120,219,227,.11) 50%, transparent 60%);
    mix-blend-mode: screen;
    animation: bfV2HeroScan 6s 2s ease-in-out infinite;
}
@keyframes bfV2HeroScan {
    0%,80%,100% { transform: translateX(-30%); opacity:0; }
    40% { opacity:1; }
    75% { transform: translateX(30%); opacity:0; }
}

.bfv2-hero-inner {
    position: relative; z-index: 3;
    width: 100%; max-width: 1440px; margin: 0 auto;
    padding: 0 40px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px;
    align-items: center;
}
@media (max-width: 991px) {
    .bfv2-hero-inner { grid-template-columns: 1fr; padding: 0 24px; }
}

.bfv2-hero-kicker {
    display:inline-flex; align-items:center; gap: 12px;
    font-family: var(--bf-sans); font-size: 11px;
    letter-spacing: .45em; color: var(--bf-aqua-2);
    padding-bottom: 24px;
    opacity: 0; transform: translateY(10px);
    animation: bfV2Rise .7s 1.7s var(--bf-ease-out) forwards;
}
.bfv2-hero-kicker::before {
    content:""; width: 34px; height: 1px; background: var(--bf-aqua);
}

.bfv2-hero-title {
    font-family: var(--bf-sans);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.005em;
    margin: 0;
    color: #fff;
}
.bfv2-hero-title .line {
    display: block; overflow: hidden;
    font-size: clamp(44px, 8.4vw, 112px);
}
.bfv2-hero-title .line > span {
    display: block;
    transform: translateY(105%);
    animation: bfV2ClipUp .95s var(--bf-ease-out) forwards;
}
.bfv2-hero-title .line.l1 > span { animation-delay: 1.8s; }
.bfv2-hero-title .line.l2 > span { animation-delay: 2.0s; }
.bfv2-hero-title .line.l3 > span {
    animation-delay: 2.2s;
    font-family: var(--bf-serif);
    font-style: italic; font-weight: 400;
    color: var(--bf-aqua);
    font-size: clamp(42px, 6.8vw, 95px);
    white-space: nowrap;
}
@keyframes bfV2ClipUp { to { transform: translateY(0); } }

.bfv2-hero-lead {
    margin: 34px 0 0; max-width: 520px;
    font-size: 15px; line-height: 1.9;
    color: rgba(255,255,255,.75);
    opacity: 0; transform: translateY(12px);
    animation: bfV2Rise .8s 2.7s var(--bf-ease-out) forwards;
}

.bfv2-hero-cta {
    margin-top: 40px; display:flex; flex-wrap:wrap; gap: 14px;
    opacity: 0; transform: translateY(12px);
    animation: bfV2Rise .8s 2.9s var(--bf-ease-out) forwards;
}
.bfv2-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 34px;
    font-family: var(--bf-sans); font-size: 13px; font-weight: 500;
    letter-spacing: .12em; text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: transform .35s var(--bf-ease), background .35s var(--bf-ease);
    cursor: pointer;
    background: linear-gradient(120deg, var(--bf-blue) 0%, #3a7bd5 100%);
    color: #fff;
    box-shadow: 0 12px 40px rgba(36,95,231,.4);
    overflow: hidden;
}
.bfv2-btn i, .bfv2-btn .arrow { font-size: 12px; transition: transform .3s var(--bf-ease); }
.bfv2-btn:hover { transform: translateY(-2px); }
.bfv2-btn:hover i, .bfv2-btn:hover .arrow { transform: translateX(6px); }
.bfv2-btn.ghost {
    background: transparent; box-shadow: none;
    border-color: rgba(255,255,255,.35); color: #fff;
}
.bfv2-btn.ghost:hover { background: rgba(255,255,255,.08); border-color: var(--bf-aqua); }

/* Right side coordinates & node info */
.bfv2-hero-side {
    position: relative; align-self: stretch;
    padding: 40px 0;
    display: flex; flex-direction: column; justify-content: space-between;
    font-family: var(--bf-sans);
    color: rgba(255,255,255,.55);
    opacity: 0; animation: bfV2FadeIn 1s 2.4s forwards;
}
@media (max-width: 991px) { .bfv2-hero-side { display: none; } }
.bfv2-hero-side-block {
    border-left: 1px solid var(--bf-line);
    padding-left: 18px;
    font-size: 11px; letter-spacing: .3em;
    line-height: 1.7;
}
.bfv2-hero-side-block .lbl { color: var(--bf-aqua); font-size: 9px; letter-spacing: .5em; display:block; margin-bottom: 4px; }
.bfv2-hero-side-block .val { color: #fff; font-size: 13px; letter-spacing: .1em; }
.bfv2-hero-side-block.br  { align-self: flex-end; }

.bfv2-hero-scroll {
    position:absolute; left: 40px; bottom: 30px;
    display:flex; align-items:center; gap: 14px;
    font-family: var(--bf-sans); font-size: 10px;
    letter-spacing: .5em; color: rgba(255,255,255,.55);
    opacity: 0; animation: bfV2FadeIn 1s 3.1s forwards;
    z-index: 4;
}
.bfv2-hero-scroll .line {
    display:block; width: 80px; height:1px;
    background: linear-gradient(90deg, rgba(255,255,255,.6), transparent);
    position: relative; overflow:hidden;
}
.bfv2-hero-scroll .line::after {
    content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
    background: var(--bf-aqua);
    animation: bfV2ScrollDot 2s ease-in-out infinite;
}
@keyframes bfV2ScrollDot {
    0% { left:-30%; }
    100% { left: 100%; }
}

/* -----------------------------------------------------------------
   7. Giant Marquee (BRIDGE THE GAP / BUILD THE FLOW)
----------------------------------------------------------------- */
.bfv2-marquee {
    background: var(--bf-navy-950);
    color: #fff;
    padding: 70px 0 90px;
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--bf-line);
    border-bottom: 1px solid var(--bf-line);
}
.bfv2-marquee-row {
    display:flex; gap: 60px; white-space: nowrap;
    font-family: var(--bf-sans); font-weight: 700;
    font-size: clamp(72px, 12vw, 180px);
    line-height: 1;
    letter-spacing: -.01em;
    animation: bfV2Marquee 32s linear infinite;
    will-change: transform;
}
.bfv2-marquee-row.r2 {
    font-family: var(--bf-serif); font-style: italic; font-weight: 400;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.35);
    animation-duration: 44s;
    animation-direction: reverse;
    margin-top: 12px;
}
.bfv2-marquee-row span { display:inline-block; padding-right: 40px; }
.bfv2-marquee-row .dot { color: var(--bf-aqua); }
@keyframes bfV2Marquee {
    to { transform: translateX(-50%); }
}

/* -----------------------------------------------------------------
   8. Business Story (3事業 濃紺セクション)
----------------------------------------------------------------- */
.bfv2-biz {
    background: var(--bf-navy-900);
    color: #fff;
    padding: 140px 0 160px;
    position: relative; overflow: hidden;
}
.bfv2-biz::before {
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 100px 100px;
    mask-image: linear-gradient(180deg, transparent 0, black 20%, black 80%, transparent 100%);
    pointer-events:none;
}
.bfv2-biz-head {
    max-width: 1300px; margin: 0 auto 100px;
    padding: 0 40px;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 60px;
    align-items: end;
}
@media (max-width: 991px) {
    .bfv2-biz { padding: 80px 0 100px; }
    .bfv2-biz-head { grid-template-columns: 1fr; gap: 30px; padding: 0 24px; margin-bottom: 60px; }
}
.bfv2-biz-head .kicker {
    font-family: var(--bf-sans); font-size: 11px; letter-spacing: .45em;
    color: var(--bf-aqua-2);
    display:inline-flex; align-items:center; gap: 12px;
    margin-bottom: 20px;
}
.bfv2-biz-head .kicker::before { content:""; width:34px; height:1px; background: var(--bf-aqua); }
.bfv2-biz-head h2 {
    font-family: var(--bf-sans); font-weight: 400;
    font-size: clamp(38px, 5.5vw, 68px); line-height: 1.1;
    margin: 0; color: #fff;
}
.bfv2-biz-head h2 em {
    font-family: var(--bf-serif); font-style: italic; font-weight: 400;
    color: var(--bf-aqua);
}
.bfv2-biz-head p { color: rgba(255,255,255,.7); line-height: 1.9; font-size: 15px; }

.bfv2-biz-list {
    max-width: 1300px; margin: 0 auto;
    padding: 0 40px;
    display: flex; flex-direction: column; gap: 40px;
}
@media (max-width: 991px) { .bfv2-biz-list { padding: 0 24px; gap: 30px; } }

.bfv2-biz-item {
    display: grid; grid-template-columns: 80px minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 30px; align-items: center;
    padding: 40px 0;
    border-top: 1px solid var(--bf-line);
    position: relative;
    transition: background .5s var(--bf-ease);
}
.bfv2-biz-item:last-child { border-bottom: 1px solid var(--bf-line); }
.bfv2-biz-item::before {
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background: var(--bf-aqua);
    transform: scaleX(0); transform-origin: left;
    transition: transform .8s var(--bf-ease-out);
}
.bfv2-biz-item:hover::before { transform: scaleX(1); }
.bfv2-biz-item:hover .bfv2-biz-name { color: var(--bf-aqua); }
.bfv2-biz-item:hover .bfv2-biz-huge { transform: translateX(-10px); opacity: .18; }

.bfv2-biz-num {
    font-family: var(--bf-sans); font-size: 13px; letter-spacing: .3em;
    color: var(--bf-aqua);
    font-weight: 500;
}
.bfv2-biz-body {
    min-width: 0;
}
.bfv2-biz-name {
    font-family: var(--bf-sans); font-weight: 500;
    font-size: clamp(24px, 3vw, 34px); line-height: 1.25;
    color: #fff; margin: 0 0 6px;
    transition: color .4s var(--bf-ease);
}
.bfv2-biz-en {
    font-family: var(--bf-serif); font-style: italic;
    color: rgba(120,219,227,.75);
    font-size: 15px; letter-spacing: .04em;
}
.bfv2-biz-desc {
    color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.85;
    max-width: 480px;
}
.bfv2-biz-link {
    display:inline-flex; align-items:center; gap: 12px;
    padding: 14px 26px;
    border: 1px solid rgba(255,255,255,.3);
    color: #fff; text-decoration: none;
    font-family: var(--bf-sans); font-size: 12px; letter-spacing: .18em;
    border-radius: 999px;
    transition: background .3s var(--bf-ease), border-color .3s var(--bf-ease), transform .3s var(--bf-ease);
    white-space: nowrap;
}
.bfv2-biz-link:hover { background: var(--bf-blue); border-color: var(--bf-blue); transform: translateY(-2px); }

.bfv2-biz-huge {
    position:absolute;
    right: 200px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--bf-serif); font-style: italic;
    font-size: clamp(90px, 11vw, 180px);
    color: transparent;
    -webkit-text-stroke: 1px rgba(120,219,227,.14);
    letter-spacing: -.02em;
    line-height: 1; white-space: nowrap;
    pointer-events:none;
    opacity: .1;
    transition: transform .8s var(--bf-ease-out), opacity .6s var(--bf-ease-out);
    z-index: 0;
}
.bfv2-biz-body, .bfv2-biz-desc, .bfv2-biz-num, .bfv2-biz-link { position: relative; z-index: 1; }

@media (max-width: 991px) {
    .bfv2-biz-item { grid-template-columns: 60px 1fr; gap: 16px; padding: 30px 0; }
    .bfv2-biz-desc { grid-column: 1 / -1; margin-top: 8px; }
    .bfv2-biz-link { grid-column: 1 / -1; justify-self: flex-start; margin-top: 12px; }
    .bfv2-biz-huge { display: none; }
}

/* -----------------------------------------------------------------
   9. WEB CREATIVE Section (最重要・独立章)
----------------------------------------------------------------- */
.bfv2-web {
    background: #fff;
    color: var(--bf-navy-950);
    padding: 160px 0 180px;
    position: relative; overflow: hidden;
}
@media (max-width: 991px) { .bfv2-web { padding: 100px 0; } }

.bfv2-web-outline {
    position:absolute; left: -3%; top: -30px;
    font-family: var(--bf-sans); font-weight: 700;
    font-size: clamp(120px, 18vw, 260px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(10,30,63,0.08);
    letter-spacing: -.02em;
    white-space: nowrap;
    pointer-events:none;
    z-index: 0;
}

.bfv2-web-inner {
    position: relative; z-index: 2;
    max-width: 1360px; margin: 0 auto;
    padding: 0 40px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 80px; align-items: center;
}
@media (max-width: 991px) {
    .bfv2-web-inner { grid-template-columns: 1fr; gap: 50px; padding: 0 24px; }
}

.bfv2-web-copy .kicker {
    font-family: var(--bf-sans); font-size: 11px; letter-spacing: .45em;
    color: var(--bf-blue);
    display:inline-flex; align-items:center; gap: 12px;
    margin-bottom: 24px;
}
.bfv2-web-copy .kicker::before { content:""; width:34px; height:1px; background: var(--bf-blue); }

.bfv2-web-copy h2 {
    font-family: var(--bf-sans); font-weight: 500;
    font-size: clamp(34px, 4.6vw, 62px);
    line-height: 1.16; letter-spacing: -.005em;
    color: var(--bf-navy-950);
    margin: 0 0 28px;
}
.bfv2-web-copy h2 em {
    font-family: var(--bf-serif); font-style: italic; font-weight: 400;
    color: var(--bf-blue);
}
.bfv2-web-copy .lead {
    color: #4a5568; line-height: 2; font-size: 15px;
    margin: 0 0 20px;
    max-width: 500px;
}
.bfv2-web-copy .note {
    display:inline-block;
    background: rgba(36,95,231,0.08); color: var(--bf-blue);
    padding: 10px 18px; border-radius: 999px;
    font-size: 13px; letter-spacing: .04em;
    margin: 4px 0 32px;
}
.bfv2-web-items {
    list-style:none; padding:0; margin: 0 0 40px;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px 30px;
}
.bfv2-web-items li {
    display:flex; align-items:center; gap: 12px;
    font-size: 14px; color: var(--bf-navy-800);
    padding: 6px 0;
    border-bottom: 1px solid rgba(10,30,63,.08);
}
.bfv2-web-items li::before {
    content:""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--bf-aqua);
    flex-shrink:0;
}
@media (max-width: 640px) { .bfv2-web-items { grid-template-columns: 1fr; } }

.bfv2-web-cta {
    display:inline-flex; align-items:center; gap: 14px;
    padding: 18px 34px;
    background: linear-gradient(120deg, var(--bf-blue), #3a7bd5);
    color:#fff; text-decoration: none; border-radius: 999px;
    font-family: var(--bf-sans); font-size: 13px; letter-spacing: .1em;
    box-shadow: 0 12px 40px rgba(36,95,231,.3);
    transition: transform .3s var(--bf-ease);
}
.bfv2-web-cta:hover { transform: translateY(-2px); }
.bfv2-web-cta i { transition: transform .3s var(--bf-ease); }
.bfv2-web-cta:hover i { transform: translateX(6px); }

.bfv2-web-badge {
    display:block; margin-top: 24px;
    font-family: var(--bf-serif); font-style: italic;
    color: var(--bf-navy-800); opacity:.7;
    font-size: 14px;
}

/* --- Browser mockup (右側) ------------------------------ */
.bfv2-mock {
    position: relative;
    aspect-ratio: 4/3;
    perspective: 1400px;
}
.bfv2-mock-window {
    position: relative;
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #071429 0%, #0a1e3f 100%);
    border-radius: 14px;
    box-shadow: 0 40px 80px -20px rgba(5,13,29,0.4),
                0 20px 40px -20px rgba(36,95,231,.3);
    overflow: hidden;
    transform: rotateY(-6deg) rotateX(3deg);
    transition: transform .8s var(--bf-ease-out);
}
.bfv2-mock:hover .bfv2-mock-window {
    transform: rotateY(-3deg) rotateX(1deg);
}
.bfv2-mock-bar {
    height: 36px; background: rgba(255,255,255,.06);
    display:flex; align-items:center; padding: 0 14px; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.bfv2-mock-bar .dot { width: 10px; height: 10px; border-radius:50%; background: rgba(255,255,255,.2); }
.bfv2-mock-bar .dot.r { background: #ff6b5b; }
.bfv2-mock-bar .dot.y { background: #ffca55; }
.bfv2-mock-bar .dot.g { background: #7fd47f; }
.bfv2-mock-bar .url {
    flex:1; height: 20px; margin: 0 12px;
    background: rgba(255,255,255,.08); border-radius: 999px;
    display:flex; align-items:center; padding: 0 12px;
    color: rgba(255,255,255,.5); font-family: monospace; font-size: 10px;
    letter-spacing: .1em; overflow: hidden;
}
.bfv2-mock-bar .url::before { content: "🔒"; margin-right: 6px; opacity:.6; font-size: 9px; }
.bfv2-mock-bar .device {
    display:flex; gap: 4px; color: rgba(255,255,255,.5);
}
.bfv2-mock-bar .device b {
    width: 22px; height: 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px;
    display:flex; align-items:center; justify-content:center;
    font-size: 9px; font-weight: 400; font-family: monospace;
}
.bfv2-mock-bar .device b.active { background: var(--bf-blue); border-color: var(--bf-blue); color:#fff; }

.bfv2-mock-body {
    position: relative;
    height: calc(100% - 36px);
    background: radial-gradient(700px 400px at 70% 40%, #0f2a55 0%, #050d1d 70%);
    overflow: hidden;
}
.bfv2-mock-scan {
    position:absolute; top:0; left:0; right:0; height: 100%;
    background: linear-gradient(180deg, transparent 46%, rgba(120,219,227,.14) 50%, transparent 54%);
    animation: bfV2MockScan 5s linear infinite;
    pointer-events:none;
    mix-blend-mode: screen;
}
@keyframes bfV2MockScan { to { transform: translateY(100%); } }

.bfv2-mock-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(120,219,227,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,219,227,.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
}

.bfv2-mock-scenes {
    position: relative; height: 100%;
}
.bfv2-mock-scene {
    position:absolute; inset: 30px;
    opacity: 0;
    animation: bfV2SceneCycle 14s infinite;
}
.bfv2-mock-scene:nth-child(1) { animation-delay: 0s; }
.bfv2-mock-scene:nth-child(2) { animation-delay: 3.5s; }
.bfv2-mock-scene:nth-child(3) { animation-delay: 7s; }
.bfv2-mock-scene:nth-child(4) { animation-delay: 10.5s; }

@keyframes bfV2SceneCycle {
    0%    { opacity: 0; transform: translateY(8px); }
    3%    { opacity: 1; transform: translateY(0); }
    22%   { opacity: 1; }
    25%   { opacity: 0; transform: translateY(-6px); }
    100%  { opacity: 0; }
}

/* Scene 1: Hero */
.bfv2-ms1 .title {
    font-family: var(--bf-serif); font-style: italic;
    color: var(--bf-aqua); font-size: 22px; letter-spacing: -.005em;
    margin-bottom: 4px;
}
.bfv2-ms1 .sub {
    color: #fff; font-size: 34px; font-weight: 500; line-height: 1.05;
    margin-bottom: 14px;
}
.bfv2-ms1 .desc {
    color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.7;
    max-width: 70%;
}
.bfv2-ms1 .btn {
    display:inline-block; margin-top: 14px;
    background: var(--bf-blue); color:#fff; padding: 8px 16px; border-radius:999px;
    font-size: 10px; letter-spacing: .1em;
}

/* Scene 2: Grid cards */
.bfv2-ms2 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: center; }
.bfv2-ms2 .card {
    aspect-ratio: 1/1.1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(120,219,227,.15);
    border-radius: 6px;
    padding: 10px;
    display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
}
.bfv2-ms2 .card .bar { height: 3px; background: var(--bf-aqua); width: 40%; border-radius: 2px; }
.bfv2-ms2 .card .l1  { height: 4px; background: rgba(255,255,255,.4); width: 80%; border-radius: 2px; }
.bfv2-ms2 .card .l2  { height: 3px; background: rgba(255,255,255,.2); width: 60%; border-radius: 2px; }
.bfv2-ms2 .card:nth-child(2) { transform: translateY(10px); }
.bfv2-ms2 .card:nth-child(1) .bar { background: var(--bf-blue); }

/* Scene 3: Code */
.bfv2-ms3 {
    font-family: monospace; font-size: 10px; line-height: 1.7;
    color: rgba(255,255,255,.55);
    padding: 20px;
    background: rgba(255,255,255,.04); border-radius: 6px;
    border: 1px solid rgba(120,219,227,.15);
    height: 100%; overflow: hidden;
}
.bfv2-ms3 .l { display:block; }
.bfv2-ms3 .k { color: var(--bf-aqua); }
.bfv2-ms3 .s { color: #ffca55; }
.bfv2-ms3 .c { color: rgba(255,255,255,.3); }
.bfv2-ms3 .p { color: var(--bf-blue-2); }

/* Scene 4: Responsive */
.bfv2-ms4 { display:flex; gap: 20px; align-items: center; justify-content: center; height: 100%; }
.bfv2-ms4 .dev {
    background: rgba(255,255,255,.06); border: 1px solid rgba(120,219,227,.2);
    border-radius: 8px; padding: 10px;
    display:flex; flex-direction:column; gap: 6px;
}
.bfv2-ms4 .dev .l { height: 3px; background: rgba(255,255,255,.4); border-radius:2px; }
.bfv2-ms4 .dev .l.blue { background: var(--bf-aqua); }
.bfv2-ms4 .dev.desktop { width: 55%; aspect-ratio: 16/10; padding: 10px; }
.bfv2-ms4 .dev.tablet  { width: 22%; aspect-ratio: 3/4; }
.bfv2-ms4 .dev.mobile  { width: 12%; aspect-ratio: 9/16; padding: 6px; }
.bfv2-ms4 .dev .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
.bfv2-ms4 .dev .row .c { aspect-ratio: 1/1; background: rgba(255,255,255,.15); border-radius: 3px; }

/* Cursor trail */
.bfv2-mock-cursor {
    position:absolute; top: 50%; left: 50%;
    width: 14px; height: 14px;
    background: var(--bf-aqua); border-radius: 50%;
    box-shadow: 0 0 20px var(--bf-aqua), 0 0 4px #fff;
    opacity: 0.7;
    animation: bfV2MockCursor 8s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes bfV2MockCursor {
    0%   { top: 20%; left: 30%; }
    25%  { top: 40%; left: 70%; }
    50%  { top: 70%; left: 50%; }
    75%  { top: 55%; left: 20%; }
    100% { top: 20%; left: 30%; }
}

/* -----------------------------------------------------------------
   10. Reveal / motion utilities
----------------------------------------------------------------- */
[data-bfv2-reveal] {
    opacity: 0; transform: translateY(30px);
    transition: opacity .9s var(--bf-ease-out), transform .9s var(--bf-ease-out);
}
[data-bfv2-reveal].is-in { opacity: 1; transform: none; }
[data-bfv2-reveal="left"]  { transform: translateX(-40px); }
[data-bfv2-reveal="right"] { transform: translateX(40px); }
[data-bfv2-reveal="left"].is-in,
[data-bfv2-reveal="right"].is-in { transform: none; }
[data-bfv2-reveal="clip"] {
    opacity: 1; transform: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s var(--bf-ease-out);
}
[data-bfv2-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
[data-bfv2-reveal="scale"] { transform: scale(0.9); }
[data-bfv2-reveal="scale"].is-in { transform: scale(1); }
[data-bfv2-reveal-delay="1"] { transition-delay: .1s; }
[data-bfv2-reveal-delay="2"] { transition-delay: .2s; }
[data-bfv2-reveal-delay="3"] { transition-delay: .3s; }
[data-bfv2-reveal-delay="4"] { transition-delay: .4s; }

/* Line draw utility */
.bfv2-line-draw {
    stroke-dasharray: 2000; stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.6s var(--bf-ease-out);
}
.bfv2-line-draw.is-in { stroke-dashoffset: 0; }

/* -----------------------------------------------------------------
   11. Custom cursor (desktop only)
----------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .bfv2-cursor {
        position: fixed; top:0; left:0; z-index: 9600;
        width: 28px; height: 28px; border-radius: 50%;
        border: 1px solid var(--bf-aqua);
        transform: translate3d(-50%,-50%,0);
        pointer-events: none;
        transition: width .3s var(--bf-ease), height .3s var(--bf-ease), border-color .3s var(--bf-ease);
        mix-blend-mode: difference;
    }
    .bfv2-cursor.hot {
        width: 44px; height: 44px; border-color: var(--bf-aqua);
        background: rgba(120,219,227,.15);
    }
}

/* -----------------------------------------------------------------
   12. Page hero decor overrides (下層ページ)
----------------------------------------------------------------- */
body.bfv2:not(.bfv2-home) .page-hero {
    position: relative;
    background: linear-gradient(180deg, var(--bf-navy-900) 0%, var(--bf-navy-800) 100%);
    color: #fff;
    padding: 160px 40px 100px;
    overflow: hidden;
    min-height: 400px;
}
body.bfv2:not(.bfv2-home) .page-hero::before {
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(120,219,227,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,219,227,.06) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(180deg, transparent 0, black 30%, black 70%, transparent 100%);
    pointer-events:none;
}
body.bfv2:not(.bfv2-home) .page-hero::after {
    content:""; position:absolute; right: -15%; top: 20%;
    width: 700px; height: 700px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(36,95,231,.35), transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}
body.bfv2:not(.bfv2-home) .page-hero .page-hero-en {
    color: var(--bf-aqua-2); letter-spacing: .4em; font-size: 11px;
}
body.bfv2:not(.bfv2-home) .page-hero h1 {
    font-family: var(--bf-sans); font-weight: 500;
    font-size: clamp(34px, 5vw, 60px); line-height: 1.15; color:#fff;
    margin: 20px 0 18px;
}
body.bfv2:not(.bfv2-home) .page-hero-desc { color: rgba(255,255,255,.75); }

body.bfv2:not(.bfv2-home) .page-hero-outline {
    position:absolute; left:-3%; bottom: -60px;
    font-family: var(--bf-sans); font-weight: 700;
    font-size: clamp(100px, 15vw, 220px);
    color: transparent;
    -webkit-text-stroke: 1px rgba(120,219,227,.14);
    letter-spacing: -.02em;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

/* -----------------------------------------------------------------
   13. Reduced motion
----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
    }
    .bfv2-intro { display:none !important; }
    .bfv2-loader { display:none !important; }
    .bfv2-hero-title .line > span,
    .bfv2-hero-kicker,
    .bfv2-hero-lead,
    .bfv2-hero-cta,
    .bfv2-hero-side { opacity: 1; transform: none; }
    .bfv2-marquee-row { animation: none; }
    [data-bfv2-reveal] { opacity:1 !important; transform: none !important; clip-path: none !important; }
    .bfv2-mock-cursor, .bfv2-mock-scan, .bfv2-hero-scan, .bfv2-hero-flow { display:none; }
    .bfv2-cursor { display: none; }
}

/* -----------------------------------------------------------------
   14. Small screens
----------------------------------------------------------------- */
@media (max-width: 640px) {
    .bfv2-hero-inner { padding: 0 20px; }
    .bfv2-hero-kicker { font-size: 9px; letter-spacing: .3em; }
    .bfv2-hero-lead { font-size: 14px; }
    .bfv2-hero-title .line { font-size: clamp(38px, 12vw, 56px); }
    .bfv2-hero-title .line.l3 { font-size: clamp(40px, 13vw, 58px); }
    .bfv2-marquee-row { font-size: clamp(60px, 18vw, 100px); gap: 30px; }
    .bfv2-biz-num { font-size: 11px; }
    .bfv2-hero-scroll { display: none; }
}

/* -----------------------------------------------------------------
   15. Hide legacy hero on v2-home (旧hero-section 完全非表示)
----------------------------------------------------------------- */
body.bfv2-home > main.page-fade > .hero:not(.hero-v2),
body.bfv2-home > main.page-fade > section.hero:not(.hero-v2) { display: none !important; }
body.bfv2-home > main.page-fade > .site-intro { display: none !important; }

/* -----------------------------------------------------------------
   16. Bridge to existing motion.js selectors
   motion.jsが .site-intro / .site-loader / .scroll-progress-fill を
   操作するため、v2 の見た目を既存クラスにもマップする
----------------------------------------------------------------- */

/* v2版 site-loader (下層ページ) */
.site-loader.bfv2-loader-style {
    position: fixed; inset: 0; z-index: 9800;
    background: radial-gradient(1200px 700px at 50% 50%, #0a1e3f 0%, var(--bf-navy-950) 100%);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .55s var(--bf-ease), visibility .55s var(--bf-ease);
}
.site-loader.bfv2-loader-style.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader.bfv2-loader-style .site-loader-inner { text-align:center; color:#fff; }
.site-loader.bfv2-loader-style .site-loader-mark  {
    font-family: var(--bf-sans);
    font-size: clamp(20px, 3vw, 28px); font-weight: 500;
    letter-spacing: .2em;
}
.site-loader.bfv2-loader-style .site-loader-mark .sep {
    display: inline-block; width: 6px; height: 6px; border-radius:50%;
    background: var(--bf-aqua); box-shadow: 0 0 12px var(--bf-aqua);
    margin: 0 12px; animation: bfV2Pulse 1.1s ease-in-out infinite;
    vertical-align: middle;
}
.site-loader.bfv2-loader-style .site-loader-caption {
    margin-top: 12px; font-size: 11px; opacity:.55; letter-spacing:.32em;
    color: rgba(255,255,255,.7);
}
.site-loader.bfv2-loader-style .site-loader-bar {
    margin: 22px auto 0; width: 220px; height: 1px;
    background: rgba(255,255,255,.14); overflow: hidden; position: relative;
}
.site-loader.bfv2-loader-style .site-loader-bar::after {
    content:""; position:absolute; top:0; left:0; height:100%; width:40%;
    background: linear-gradient(90deg, transparent, var(--bf-aqua), transparent);
    animation: bfV2Sweep 1.1s linear infinite;
}

/* v2版 site-intro (HOME) */
.site-intro.bfv2-intro-style {
    position: fixed; inset:0; z-index: 9900;
    background: linear-gradient(180deg, var(--bf-navy-950) 0%, var(--bf-navy-900) 100%);
    color:#fff; overflow:hidden;
    transition: transform .7s var(--bf-ease-out), opacity .5s var(--bf-ease-out);
}
.site-intro.bfv2-intro-style.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* v2版 scroll-progress の再定義（既存を無効化しつつ v2デザインを既存クラスに適用） */
body.bfv2 > .scroll-progress {
    display: block !important;
    position: fixed; top:0; left:0; right:0; height: 2px;
    z-index: 9500; pointer-events:none;
    background: rgba(255,255,255,.06);
}
body.bfv2 > .scroll-progress .scroll-progress-fill {
    display: block; height:100%; width: 0%;
    background: linear-gradient(90deg, var(--bf-blue) 0%, var(--bf-aqua) 100%);
    transition: width .1s linear;
    box-shadow: 0 0 14px rgba(120,219,227,.5);
}

/* HERO v2 は既存 .hero-inner-v2 で作成。--mx/--my は既存 .hero に motion.js が書き込む */
body.bfv2-home .hero.hero-v2 {
    position: relative;
    min-height: 880px; height: 100svh; max-height: 1080px;
    background: radial-gradient(1400px 900px at 78% 55%, #0f2a55 0%, var(--bf-navy-950) 60%);
    color: #fff; overflow: hidden;
    display: flex; align-items: center;
    padding-top: 94px;
    --mx: 0; --my: 0;
}
@media (max-width: 991px) { body.bfv2-home .hero.hero-v2 { padding-top: 74px; min-height: 720px; } }
body.bfv2-home .hero.hero-v2 * { color: inherit; }

/* Convert legacy --mx/--my (range -1..1) for use in translate */
body.bfv2-home .hero.hero-v2 .bfv2-hero-glow {
    transform: translate3d(calc(var(--mx, 0) * -20px), calc(var(--my, 0) * -14px), 0);
}
body.bfv2-home .hero.hero-v2 .bfv2-hero-glow.aqua {
    transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 20px), 0);
}
body.bfv2-home .hero.hero-v2 .bfv2-hero-arcs {
    transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -6px), 0);
}