/* --- VARIABLES --- */
:root {
    /* Colors */
    --white: #ffffff;
    --light-gray: #f4f6f8;
    --dark-gray: #1a1e24;
    --deep-black: #05080a;
    
    --text-on-white: #111111;
    --text-on-dark: #f3f3f3;
    
    --neon-blue: #00f2ff;
    --neon-red: #ff2a2a;
    --glass-light: rgba(255, 255, 255, 0.7);
    --glass-dark: rgba(10, 20, 30, 0.8);
    
    /* Fonts */
    --font-jp: 'Noto Sans JP', sans-serif;
    /* Rajdhani/Share Tech Monoは欧文専用書体のため、混在する日本語文字は
       必ず Noto Sans JP にフォールバックさせる（OS依存の総称sans-serifに
       流れて書体がばらつくのを防ぐ） */
    --font-en: 'Rajdhani', 'Noto Sans JP', sans-serif;
    --font-mono: 'Share Tech Mono', 'Noto Sans JP', monospace;
}

/* --- BASE SETTINGS --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-jp);
    line-height: 1.8;
    overflow-x: hidden;
    color: var(--text-on-white);
    background-color: var(--white); /* Default Surface */
    transition: background-color 0.8s ease, color 0.8s ease;
}

/* THEME STATES (Controlled by JS) */
body[data-theme="white"] {
    background-color: var(--white);
    color: var(--text-on-white);
}
body[data-theme="alert"] {
    background-color: #f0f0f0;
    color: #333;
}
body[data-theme="liquid"] {
    background-color: #0a1018; /* Deepening */
    color: #f3f3f3;
}
body[data-theme="dark"] {
    background-color: var(--deep-black);
    color: var(--text-on-dark);
}

/* --- BACKGROUNDS & CANVAS --- */
#ambient-bg {
    position: fixed; inset: 0; z-index: -2;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0) 100%);
    transition: background 1s ease;
}
body[data-theme="dark"] #ambient-bg {
    background: radial-gradient(circle at center, #0b1521 0%, #000000 100%);
}

#bio-canvas {
    position: fixed; inset: 0; z-index: -1;
    opacity: 0.6; pointer-events: none;
}
/* 下層ページはテキスト量が多く、パーティクル網が主張しすぎるため
   トップページより薄くする（トップページ自体は現状の濃さを維持） */
body:not(.is-home) #bio-canvas {
    opacity: 0.25;
}

/* --- TYPOGRAPHY --- */
.font-cyber { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; }
.font-cyber02 { font-family: var(--font-en); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; font-size: 28px;}
.font-mono { font-family: var(--font-mono); }
.text-neon { color: var(--neon-blue); text-shadow: 0 0 10px rgba(0,242,255,0.4); }
.text-red { color: var(--neon-red); }
.center { text-align: center; }

/* --- LOADER --- */
#boot-screen {
    position: fixed; inset: 0; background: #000; z-index: 9999;
    display: flex; align-items: center; justify-content: center; color: var(--neon-blue);
}
.loader-content { width: 300px; text-align: center; }
.progress-bar-wrap { width: 100%; height: 2px; background: #333; margin: 15px 0; }
.progress-bar { width: 0%; height: 100%; background: var(--neon-blue); transition: width 0.2s; }
#sys-launch-btn {
    margin-top: 20px; padding: 10px 30px; border: 1px solid var(--neon-blue);
    background: transparent; color: var(--neon-blue); font-family: var(--font-en);
    cursor: pointer; display: none; letter-spacing: 2px;
}

/* --- HEADER --- */
/* --- HEADER --- */
/* --- ヘッダーレイアウトの修正 --- */
.interface-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 30px 50px;
    z-index: 500;
    display: flex;
    justify-content: space-between; /* 3つの要素を等間隔に配置 */
    align-items: center; /* 上揃えから中央揃えに変更して見やすく */
    background-color: #fff;
    transition: background-color 0.6s ease, box-shadow 0.6s ease, backdrop-filter 0.6s ease, border-bottom-color 0.6s ease;
}

/* ヒーロー写真に重なっている間だけ、ヘッダーを透過＋白文字に */
.interface-header.header-on-hero {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
}
.interface-header.header-on-hero .logo-img {
    filter: brightness(0) invert(1);
}
.interface-header.header-on-hero .main-nav a {
    color: #f3f3f3 !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.interface-header.header-on-hero .main-nav a::after {
    background-color: #fff;
}
.interface-header.header-on-hero .mobile-nav-toggle span {
    background: #fff;
}

/* --- ナビゲーションメニューの新規スタイル --- */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px; /* メニュー同士の間隔 */
    margin: 0;
    padding: 0;
}

.main-nav a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    transition: color 0.6s ease, text-shadow 0.6s ease;
    position: relative;
    padding: 5px 0;
    color: #111 !important;
}

.main-nav ul li:first-child a {
    font-family: var(--font-jp);
}

/* マウスを乗せたときのエフェクト（ネオンブルーに発光） */
.main-nav a:hover {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}

/* 下部に極細のラインが伸びるアニメーション */
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

.main-nav a:hover::after {
    width: 100%;
}

/* 現在表示中のページ（JSでaria-current="page"を付与） */
.main-nav a.active {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}
.main-nav a.active::after {
    width: 100%;
}

/* --- スマートフォン対応（レスポンシブ）の調整 --- */
@media (max-width: 968px) {
    .interface-header {
        flex-direction: column; /* 縦並びに変更 */
        gap: 15px;
        top: 20px;
        left: 20px;
        right: 20px;
        align-items: center;
    }
    
    .main-nav ul {
        gap: 15px;
        flex-wrap: wrap; /* 画面幅が狭いときは折り返す */
        justify-content: center;
    }
    
    .main-nav a {
        font-size: 0.75rem;
    }
    
    .nav-status {
        text-align: center;
    }
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;
    transition: filter 0.6s ease;
}
/*
body[data-theme="liquid"] .logo-img,

body[data-theme="dark"] .logo-img {
    filter: invert(1);
}


.status-dot { width: 8px; height: 8px; background: #0f0; border-radius: 50%; box-shadow: 0 0 5px #0f0; display: inline-block; margin-right: 10px; }
*/
/* --- SECTIONS LAYOUT --- */
.ui-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
section { min-height: 100vh; padding: 120px 0; display: flex; flex-direction: column; justify-content: center; }
section[id] { scroll-margin-top: 90px; }

/* GLASS PANELS */
.glass-panel {
    padding: 60px; border-radius: 4px; backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.05); transition: 0.5s;
}
.glass-panel.light { background: rgba(255,255,255,0.8); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.glass-panel.dark { background: var(--glass-dark); border: 1px solid rgba(0,242,255,0.1); color: #f3f3f3; }

/* --- HERO (WHITE) --- */
#hero {
    position: relative;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 140px 6vw 90px;
}
/* 巨大な輪郭線だけの文字を、ループさせず不定期にグリッチさせる。
   グリッチの種類は複数用意し（.is-glitch-1〜4）、js/script.js側で
   ランダムに選んで一定間隔でクラスを付け外しすることで再生する。
   スクロール連動の引っ張り演出（js/script.js）は外枠.hero-eyebrow-enの
   transformを、グリッチは内側.hero-eyebrow-textのtransform/clip-path等を
   それぞれ担当するため競合しない。 */
.hero-eyebrow-en {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
    width: 100%;
    text-align: center;
    pointer-events: none;
    will-change: transform, opacity;
}
.hero-eyebrow-text {
    display: inline-block;
    font-size: clamp(2.2rem, 7vw, 4.5rem);
    letter-spacing: 0.03em;
    color: var(--neon-blue);
    text-shadow: 0 0 26px rgba(0,242,255,0.55);
    opacity: 0.65;
}
.hero-eyebrow-text.is-glitch-1 { animation: heroGlitch1 0.6s linear 1; }
.hero-eyebrow-text.is-glitch-2 { animation: heroGlitch2 0.6s linear 1; }
.hero-eyebrow-text.is-glitch-3 { animation: heroGlitch3 0.7s linear 1; }
.hero-eyebrow-text.is-glitch-4 { animation: heroGlitch4 0.5s linear 1; }

/* パターン1: クリップパスの断裂 + 位置飛び */
@keyframes heroGlitch1 {
    0%, 100% { clip-path: inset(0); transform: translate(0, 0); filter: brightness(1); }
    10% { clip-path: inset(20% 0 55% 0); transform: translate(-4px, 0); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 0); }
    30% { clip-path: inset(40% 0 35% 0); transform: translate(-3px, 1px); filter: brightness(1.4); }
    40% { clip-path: inset(5% 0 70% 0); transform: translate(3px, -1px); }
    50% { clip-path: inset(0); transform: translate(0, 0); filter: brightness(1); }
    60% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 0); }
    70% { clip-path: inset(0); transform: translate(0, 0); }
}
/* パターン2: 赤/シアンのカラー分離（クロマティックアベレーション） */
@keyframes heroGlitch2 {
    0%, 100% { text-shadow: 0 0 26px rgba(0,242,255,0.55); transform: translate(0, 0); }
    15% { text-shadow: -3px 0 0 rgba(255,0,90,0.8), 3px 0 0 rgba(0,242,255,0.8); transform: translate(-2px, 0); }
    30% { text-shadow: 3px 0 0 rgba(255,0,90,0.8), -3px 0 0 rgba(0,242,255,0.8); transform: translate(2px, 0); }
    45% { text-shadow: -2px 0 0 rgba(255,0,90,0.6), 2px 0 0 rgba(0,242,255,0.6); transform: translate(-1px, 0); }
    60% { text-shadow: 0 0 26px rgba(0,242,255,0.55); transform: translate(0, 0); }
}
/* パターン3: 斜めへの微振動 + 明滅 */
@keyframes heroGlitch3 {
    0%, 100% { transform: skewX(0) translate(0, 0); opacity: 1; }
    8% { transform: skewX(8deg) translate(3px, 0); opacity: 0.7; }
    16% { transform: skewX(-6deg) translate(-3px, 0); opacity: 1; }
    24% { transform: skewX(4deg) translate(2px, 0); opacity: 0.8; }
    32% { transform: skewX(0) translate(0, 0); opacity: 1; }
    55% { transform: skewX(-5deg) translate(-2px, 0); opacity: 0.75; }
    62% { transform: skewX(0) translate(0, 0); opacity: 1; }
}
/* パターン4: 走査線状のブロックが左右にずれる */
@keyframes heroGlitch4 {
    0%, 100% { clip-path: inset(0); transform: translate(0, 0); }
    12% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); transform: translate(5px, 0); }
    24% { clip-path: polygon(0 30%, 100% 30%, 100% 65%, 0 65%); transform: translate(-5px, 0); }
    36% { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); transform: translate(4px, 0); }
    48% { clip-path: inset(0); transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow-text { animation: none !important; }
}
.main-copy {
    font-family: var(--font-jp);
    font-size: clamp(3rem, 5vw, 3.5rem);
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
    will-change: transform, opacity;
}
.glitch-text { position: relative; display: inline-block; }

/* --- HERO SLIDESHOW (HIGH-TECH BG) --- */
.hero-content { position: relative; z-index: 2; }

.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #05080a;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.8s ease;
}
.hero-slide.is-active {
    opacity: 1;
    z-index: 1;
    animation: heroSlideZoom 9s ease-in-out forwards;
}
@keyframes heroSlideZoom {
    0%   { transform: scale(1.08); }
    100% { transform: scale(1.18); }
}

.hero-slide-overlay {
    position: absolute; inset: 0; z-index: 2;
    background:
        linear-gradient(180deg, rgba(4,8,12,0.72) 0%, rgba(4,10,16,0.55) 45%, rgba(2,6,10,0.82) 100%),
        radial-gradient(circle at 50% 40%, rgba(0,242,255,0.10) 0%, transparent 60%);
}

.hero-slide-grid {
    position: absolute; inset: 0; z-index: 3;
    background-image:
        linear-gradient(rgba(0,242,255,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,242,255,0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 15%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, black 15%, transparent 72%);
    opacity: 0.5;
}

.hero-slide-scan {
    position: absolute; left: 0; right: 0; top: -160px; height: 160px; z-index: 4;
    background: linear-gradient(180deg, transparent, rgba(0,242,255,0.14), transparent);
    animation: heroScan 6s linear infinite;
    pointer-events: none;
}
@keyframes heroScan {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(calc(100vh + 160px)); opacity: 0; }
}

/* カメラのピント合わせ（フォーカスロック）のように、ゆっくり呼吸する
   縁取りフレーム。以前の四隅の角型ブラケットに代わるHUD演出 */
.hero-hud-frame {
    position: absolute;
    inset: 90px 28px 28px;
    z-index: 5;
    border: 1px solid rgba(0,242,255,0.4);
    pointer-events: none;
    animation: heroFramePulse 5s ease-in-out infinite;
}
.hero-hud-frame::before,
.hero-hud-frame::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid var(--neon-blue);
}
.hero-hud-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hero-hud-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
@keyframes heroFramePulse {
    0%, 100% { inset: 90px 28px 28px; opacity: 0.3; }
    50%      { inset: 74px 16px 16px; opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-hud-frame { animation: none; opacity: 0.45; }
}

/* ============================================================
   HUD RING — reusable rotating targeting-ring widget
   (アイアンマンのHUD風、二重リングが逆方向に回転する装飾)
   ============================================================ */
.hud-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px dashed rgba(0,242,255,0.35);
    pointer-events: none;
    animation: hudRingSpin 22s linear infinite;
}
.hud-ring::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,242,255,0.16);
    border-top-color: rgba(0,242,255,0.85);
    border-right-color: rgba(0,242,255,0.85);
    animation: hudRingSpin 7s linear infinite reverse;
}
.hud-ring::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--neon-blue);
    box-shadow: 0 0 6px var(--neon-blue);
    transform: translate(-50%, -50%);
}
@keyframes hudRingSpin { to { transform: rotate(360deg); } }

.hud-ring--sm { width: 70px; height: 70px; }
.hud-ring--sm::before { inset: 8px; }
.hud-ring--lg { width: 220px; height: 220px; }
.hud-ring--lg::before { inset: 20px; }

/* ヒーロー背景に漂わせるアンビエントリング（装飾のみ） */
.hero-hud-ring {
    z-index: 3;
    opacity: 0.55;
}
.hero-hud-ring.pos-tr { top: 90px; right: -40px; }

/* コーナーに添えるテレメトリー風ラベル */
.hero-hud-label {
    position: absolute;
    z-index: 5;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: #f3f3f3;
    pointer-events: none;
    white-space: nowrap;
}
.hero-hud-label.br { bottom: 58px; right: 6vw; text-align: right; }

@media (max-width: 768px) {
    .hero-hud-ring { display: none; }
    .hero-hud-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hud-ring,
    .hud-ring::before { animation: none; }
}

/* Slide indicator dots */
.hero-slide-dots {
    position: absolute; right: 6vw; bottom: 26px; z-index: 2;
    display: flex; gap: 10px;
}
.hero-slide-dot {
    width: 22px; height: 3px; padding: 0; border: none;
    background: rgba(255,255,255,0.3);
    cursor: pointer; transition: 0.3s;
}
.hero-slide-dot.is-active { background: var(--neon-blue); box-shadow: 0 0 8px var(--neon-blue); }
.hero-slide-dot:hover { background: rgba(255,255,255,0.6); }

/* Text overrides for readability over the photo slideshow */
#hero .main-copy { color: #f3f3f3; text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
#hero .hero-sub-cf { color: #f3f3f3; }
#hero .hero-sub-cf strong { color: #f3f3f3; }
#hero .cta-ghost { color: #f3f3f3; border-color: rgba(255,255,255,0.4); }
#hero .cta-ghost::before, #hero .cta-ghost::after { border-color: rgba(255,255,255,0.4); }
#hero .cta-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
#hero .cta-ghost:hover::before, #hero .cta-ghost:hover::after { border-color: #fff; }
#hero .scroll-indicator::after { background: rgba(255,255,255,0.7); }

@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none !important; transform: none !important; }
    .hero-slide-scan { animation: none !important; opacity: 0; }
    .scroll-indicator, .scroll-indicator::after { animation: none !important; }
}


/* ADVANTAGE SECTION STYLES */
#advantage {
    padding: 100px 5%;
    position: relative;
    z-index: 1;
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.adv-card {
    padding: 40px 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    background: rgba(10, 20, 30, 0.8); /* 背景を少し濃くして文字を読みやすく */
}

/* Hover Effect: 浮き上がり + ネオン発光 */
.adv-card:hover {
    transform: translateY(-10px);
    border-color: var(--neon-blue);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
}

/* Icon Styles */
.adv-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
    font-size: 1.8rem;
    color: var(--neon-blue);
}

.icon-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 2px solid rgba(0, 242, 255, 0.3);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 4s linear infinite;
}

.adv-card:hover .icon-ring {
    border-color: var(--neon-blue);
    border-top-color: transparent;
    animation-duration: 2s; /* ホバー時に回転が速くなる */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Text Styles */
.adv-tag {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.adv-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
    color: #fff;
}

.adv-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

/* Decorative Corners (Cyberpunk feel) */
.corner-deco {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--neon-blue);
    opacity: 0.5;
    transition: opacity 0.3s;
}

.adv-card:hover .corner-deco {
    opacity: 1;
}

.corner-deco.top-right {
    top: 0; right: 0;
    border-bottom: none;
    border-left: none;
}

.corner-deco.bottom-left {
    bottom: 0; left: 0;
    border-top: none;
    border-right: none;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .adv-grid {
        grid-template-columns: 1fr;
    }
    .adv-card {
        padding: 30px 20px;
    }
}



/* --- LOGIC FLOW --- */
.logic-diagram { text-align: center; margin-bottom: 40px; font-size: 1.5rem; }
.logic-step h3 { font-size: 1.4rem; margin: 10px 0; }
.logic-step .icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }
.logic-arrow { font-size: 2rem; color: #ccc; }
.philosophy-text { text-align: center; max-width: 700px; margin: 0 auto; font-size: 1.1rem; }
.equation {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 5px;
}

/* --- DIAGNOSTICS (ALERT) --- */
.sec-title { font-size: 2.5rem; margin-bottom: 50px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card { padding: 40px; background: #fff; border: 1px solid #eee; transition: 0.3s; }
.alert-card { border-top: 3px solid var(--neon-red); }
.alert-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255,0,0,0.1); }
.sec-desc { margin-bottom: 20px; color: #f3f3f3; }

/* --- PPS (LIQUID/BLUE) --- */
.pps-visual { margin-bottom: 60px; }
.radar-container { max-width: 600px; margin: 0 auto; }
.radar-stats li { display: flex; align-items: center; margin-bottom: 15px; font-family: var(--font-en); }
.stat-name { width: 140px; font-size: 0.9rem; }
.bar { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; }
.fill { height: 100%; background: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); }

.flow-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.step-card { background: rgba(0, 242, 255, 0.05); padding: 30px; border-left: 2px solid var(--neon-blue); }
.step-no { color: var(--neon-blue); font-size: 1.5rem; font-weight: bold; display: block; margin-bottom: 10px; }

/* --- CSS: Radar Chart Styles --- */
.radar-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    overflow: hidden; /* 光のはみ出し防止 */
}

.radar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.radar-legend {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: #888;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 8px; 
    height: 8px; 
    border-radius: 50%;
    display: inline-block;
}
.dot.val-off { background-color: #555; border: 1px solid #777; }
.dot.val-on { background-color: var(--neon-blue); box-shadow: 0 0 8px var(--neon-blue); }

.canvas-wrap {
    width: 100%;
    /* 正方形に近い比率を確保 */
    aspect-ratio: 1 / 0.9;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#radar-chart {
    width: 100%;
    height: 100%;
}

@media (max-width: 480px) {
    .radar-header { justify-content: center; }
}

/* --- SCIENCE & VITAL (DARK) --- */
.vital-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; margin-bottom: 20px; }
.vital-item { padding: 30px; background: rgba(255,255,255,0.05); border-radius: 8px; }
.vital-icon { font-size: 3rem; margin-bottom: 20px; }
.math-box { background: #000; padding: 20px; border: 1px solid #333; margin-top: 20px; color: var(--neon-blue); }

/* --- PRICING (ABYSS) --- */
.price-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 60px; }
.price-card {
    background: rgba(20,20,20,0.8); border: 1px solid #333; padding: 40px 26px;
    text-align: center; position: relative;
}
.price-card.featured {
    border-color: var(--neon-blue); background: rgba(0, 242, 255, 0.03);
    transform: scale(1.05); box-shadow: 0 0 30px rgba(0,242,255,0.1);
}
.badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--neon-blue); color: #000; padding: 5px 15px; font-size: 0.8rem; }
.price-val { font-size: 2.2rem; font-weight: 700; margin: 20px 0 5px; font-family: var(--font-en); }
.tax { font-size: 0.9rem; font-weight: normal; color: #f3f3f3; }
.price-card-sub { font-size: 0.8rem; color: #f3f3f3; margin: 6px 0 4px; line-height: 1.6; }
.price-tiers { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.price-tier {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 12px 16px; border: 1px solid rgba(0,242,255,0.15); background: rgba(0,242,255,0.03);
}
.price-tier-label { font-size: 0.78rem; color: #f3f3f3; font-family: var(--font-en); letter-spacing: 0.05em; }
.price-tier-val { font-size: 1.25rem; font-weight: 700; font-family: var(--font-en); color: var(--neon-blue); }
.price-tier-val small { font-size: 0.6rem; font-weight: 400; color: #f3f3f3; margin-left: 2px; }
.features { list-style: none; margin: 30px 0 0 0; text-align: left; font-size: 0.9rem; color: #f3f3f3; }
.features li { border-bottom: 1px solid #333; padding: 10px 0; }
.cta-btn {
    position: relative;
    width: 100%; padding: 15px; background: transparent; border: 1px solid var(--neon-blue);
    color: var(--neon-blue); cursor: pointer; transition: 0.3s;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* .hud-panelと同じ、切れ角の対角2隅にブラケット（HUD風の枠飾り）を配置 */
.cta-btn::before,
.cta-btn::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.cta-btn::before { top: -1px; left: -1px; border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue); }
.cta-btn::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue); }
.cta-btn:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 24px rgba(0,242,255,0.4); }
.cta-btn:hover::before, .cta-btn:hover::after { border-color: #000; }
.init-fee { margin-top: 40px; }
.init-fee-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 28px; border: 1px solid rgba(0,242,255,0.15); background: rgba(0,242,255,0.03);
}
.init-fee-label { font-size: 0.95rem; color: #f3f3f3; font-family: var(--font-en); letter-spacing: 0.05em; }
.init-fee-val { font-size: 1.6rem; font-weight: 700; font-family: var(--font-en); color: var(--neon-blue); }
.init-fee-val small { font-size: 0.68rem; font-weight: 400; color: #f3f3f3; margin-left: 4px; }
.init-fee-plus { text-align: center; font-size: 3rem; font-family: var(--font-en); font-weight: 700; color: var(--neon-blue); margin: 12px 0; line-height: 1; }

/* LOGISTICS SECTION STYLES */
.logistics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.fee-card {
    padding: 30px 20px;
    text-align: center;
    border: 1px solid rgba(0, 242, 255, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.fee-card:hover {
    transform: translateY(-5px);
    border-color: var(--neon-blue);
    background: rgba(0, 242, 255, 0.05);
}

.zone-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: var(--neon-blue);
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.zone-name {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.zone-price {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: inline-block;
    padding-bottom: 5px;
}

.zone-price span {
    font-size: 0.9rem;
    opacity: 0.6;
}

.zone-list {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 15px;
    min-height: 60px;
    color: rgba(255,255,255,0.8);
}

.zone-note {
    font-size: 0.75rem;
    color: var(--alert-red); /* またはアクセントカラー */
    opacity: 0.8;
}

/* Footer Info Box */
.logistic-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 30px;
    border-left: 4px solid var(--neon-blue);
}

.info-label {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: var(--neon-blue);
    margin-bottom: 10px;
}

.info-item p {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .logistic-footer {
        grid-template-columns: 1fr;
    }
}

/* --- FAQ --- */
/* <details>は開閉状態によって内容量が変わるため、閉じている間だけ
   summaryの文字幅にシュリンクして見える場合がある。開閉に関わらず
   常にfaq-list全体の横幅いっぱいに広がるよう明示的に指定する。 */
.faq-list details { width: 100%; box-sizing: border-box; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 20px; }
.faq-list summary { display: block; width: 100%; box-sizing: border-box; cursor: pointer; font-weight: bold; font-size: 1.1rem; outline: none; list-style: none; }
.faq-list p { margin-top: 15px; color: #f3f3f3; padding-left: 20px; }
.cta-main {
    margin-top: 60px; padding: 20px 60px; background: var(--neon-blue); border: none;
    font-size: 1.2rem; cursor: pointer; clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    transition: 0.3s; display: inline-flex; flex-direction: column; align-items: center;
}
.cta-main:hover { transform: scale(1.05); background: #fff; }

/* --- TRAINER SECTION --- */
/* .trainer-imgを.hud-panel（会員サイトのHUDパネル）と同じ意匠に。
   <img>自体は::before/::afterを持てないため、切り欠き角とコーナー
   ブラケットはラッパーの.hex-frame側に実装する。 */
.hex-frame {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    height: 350px;
    position: relative;
    border: 1px solid rgba(0,242,255,0.25);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.hex-frame::before,
.hex-frame::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    z-index: 2;
    pointer-events: none;
}
.hex-frame::before { top: -1px; left: -1px; border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue); }
.hex-frame::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue); }

.trainer-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.hex-frame:hover .trainer-img {
    filter: grayscale(0%); /* ホバーでカラー */
}

/* テキスト情報エリア */
.t-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.t-name {
    font-size: 2.5rem;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 5px;
}

.t-role {
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight: bold;
}

.t-desc {
    color: #f3f3f3;
    margin-bottom: 30px;
    line-height: 1.8;
}

.t-specs {
    background: rgba(0,0,0,0.3);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 25px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #444;
    padding: 8px 0;
    font-size: 0.9rem;
}
.spec-row:last-child { border-bottom: none; }
.spec-row .label { color: #888; }
.spec-row .val { color: var(--neon-blue); }

.t-message {
    position: relative;
    padding-left: 20px;
    font-style: italic;
    color: #fff;
}
.quote-mark {
    position: absolute; top: -10px; left: 0;
    font-size: 3rem; color: #333; font-family: serif;
}


@media (max-width: 768px) {
    .hex-frame { height: 300px; max-width: 300px; margin: 0 auto; }
}

/* --- FOOTER --- */
footer { text-align: center; padding: 60px; border-top: 1px solid #333; color: #666; font-size: 0.8rem; background: #000; }

/* Animation Utils */
/* .reveal はJS側のIntersectionObserver（テーマ同期・パーティクル速度リセット用）
   のフックとして引き続き使用するが、フェードインの見た目は削除し、
   表示時のアニメーションはかけない（スタイル自体は持たせない） */

@media (max-width: 768px) {
    .interface-header {
        padding: 20px 40px 20px 20px;
    }
    .logic-diagram { flex-direction: column; gap: 20px; }
    .logic-arrow { transform: rotate(90deg); }
    .vital-grid { grid-template-columns: 1fr; }
    .flow-steps { grid-template-columns: 1fr; }
    .logistics-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        max-width: 90%;
        margin: 0 auto;
    }
    
}

@media (max-width: 450px) {
    .glass-panel {
        padding: 30px;
    }

    .identity-content {
        padding: 40px;
    }
}


/* --- CSS UPDATES --- */


/* 2. IDENTITY (BRAND ORIGIN) */
.identity-content {
    max-width: 900px;
    margin: 0 auto 30px auto;
    padding:50px 0;
}

.identity-content02 {
    max-width: 900px;
    margin: 0 auto;
    padding:50px 0; 
    clip-path: polygon(5% 0, 100% 0, 100% 90%, 95% 100%, 0 100%, 0 10%);
}

.identity-content p {
    font-size: 18px;
    width: 80%;
    margin: 20px auto;
}
.id-text h3 { font-size: 1.5rem; margin-bottom: 20px; }
.id-highlight { border-left: 3px solid var(--neon-blue); padding-left: 20px; background: rgba(0,242,255,0.05); padding: 20px; }

/* 3. MERIT (ADVANTAGE) */
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }
.adv-card { text-align: left; padding: 30px; border-top: 3px solid var(--neon-blue); transition: 0.3s; }
.adv-card:hover { transform: translateY(-5px); }
.adv-icon { font-size: 2rem; color: var(--neon-blue); margin-bottom: 15px; }
.adv-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.adv-card p { font-size: 0.9rem; color: #ccc; }

/* 4. DIAGNOSTICS (SYMPTOMS) */
.symptom { font-size: 1.1rem; color: var(--neon-red); margin: 10px 0; }

/* 5. METRICS (DEFINITION) */
.definition { font-size: 1.2rem; margin: 20px 0; font-weight: bold; }
.radar-wrapper { max-width: 600px; margin: 0 auto; }
.vital-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.vital-item i { font-size: 2rem; color: var(--neon-blue); margin-bottom: 10px; }

/* 6. COMPARISON TABLE & CAMPAIGN */
.comparison-table { margin-bottom: 50px; overflow-x: auto; }
.tbl-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tbl-row.header { font-weight: bold; background: rgba(255,255,255,0.05); }
.col { padding: 15px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.col.highlight { background: rgba(0, 242, 255, 0.05); font-weight: bold; border-left: 1px solid rgba(0,242,255,0.1); border-right: 1px solid rgba(0,242,255,0.1); }

.campaign-banner { 
    background: linear-gradient(45deg, #000, #111); 
    border: 2px solid var(--neon-blue); 
    padding: 30px; text-align: center; 
    margin-bottom: 50px; 
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
    position: relative; overflow: hidden;
}
.cp-tag { background: var(--neon-blue); color: #000; padding: 5px 15px; font-weight: bold; display: inline-block; margin-bottom: 10px; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .vital-grid { grid-template-columns: 1fr; }
    .tbl-row { grid-template-columns: 1fr 1fr; } /* 3列目はスマホで崩れるため調整要 */
    .tbl-row .col:nth-child(1) { display: none; } /* スマホでは項目名を隠してシンプルにするか、レイアウト変更 */
    /* 簡易対応として項目名を表示しつつ縦積みにする等の工夫も可 */
}

@media (max-width: 450px) {
    .glass-panel {
        padding: 30px;
    }

    .identity-content {
        padding: 40px;
    }
}
/* --- HERO SUB (CF) --- */
.hero-sub-cf {
    margin-top: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    will-change: transform, opacity;
}
.hero-sub-cf strong { color: #111; }

/* --- CAMPAIGN SECTION --- */
.cf-panel { max-width: 800px; margin: 0 auto; }
.cf-header { margin-bottom: 30px; }
.cf-header h3 {
    font-size: 1.4rem;
    margin: 20px 0 12px;
    line-height: 1.7;
    color: #fff;
}
.cf-header p { color: #aaa; font-size: 0.95rem; line-height: 1.8; }

.cf-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 30px 0 20px;
    text-align: center;
}
.cf-stat-val {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--font-en);
    color: #fff;
}
.cf-unit { font-size: 0.85rem; font-weight: normal; color: #888; margin-left: 2px; }
.cf-stat-label { font-size: 0.7rem; color: #666; margin-top: 6px; letter-spacing: 2px; }

.cf-bar-wrap {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin: 8px 0 4px;
    overflow: hidden;
}
.cf-bar {
    height: 100%;
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
    border-radius: 2px;
}
.cf-pct {
    font-size: 0.8rem;
    color: var(--neon-blue);
    text-align: right;
    letter-spacing: 2px;
}
.cf-cta-area { margin-top: 30px; }
.cf-btn {
    position: relative;
    display: inline-block;
    padding: 14px 40px;
    background: transparent;
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    text-decoration: none;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    transition: 0.3s;
    margin-bottom: 12px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* .hud-panelと同じ、切れ角の対角2隅にブラケット（HUD風の枠飾り）を配置 */
.cf-btn::before,
.cf-btn::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.cf-btn::before { top: -1px; left: -1px; border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue); }
.cf-btn::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue); }
.cf-btn:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 24px rgba(0,242,255,0.4); }
.cf-btn:hover::before, .cf-btn:hover::after { border-color: #000; }
.cf-note { font-size: 0.78rem; color: #555; }

@media (max-width: 600px) {
    .cf-stats-row { grid-template-columns: repeat(2, 1fr); }
    .cf-stat-val { font-size: 1.4rem; }
}

/* --- ROADMAP SECTION --- */
.roadmap-list {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.roadmap-step {
    width: 100%;
    padding: 40px;
    position: relative;
}
.rm-phase {
    font-size: 0.75rem;
    letter-spacing: 3px;
    margin-bottom: 10px;
}
.roadmap-step h3 {
    font-size: 1.4rem;
    color: #f3f3f3;
    margin-bottom: 6px;
}
.rm-date {
    font-size: 0.72rem;
    color: #555;
    margin-bottom: 15px;
    letter-spacing: 2px;
}
.roadmap-step p {
    font-size: 0.95rem;
    color: #f3f3f3;
    line-height: 1.8;
}
.roadmap-arrow {
    color: var(--neon-blue);
    font-size: 1.2rem;
    padding: 8px 0;
    opacity: 0.4;
}

/* ============================================
   LANDING PAGE ENHANCEMENTS
   ============================================ */

/* --- HEADER CTA --- */
.nav-cta {
    background: var(--neon-blue);
    color: #000 !important;
    padding: 10px 22px;
    font-size: 0.8rem;
    text-decoration: none;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transition: 0.3s;
    box-shadow: 0 0 14px rgba(0,242,255,0.35);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
/* ホバー時に白へ変えると、常時白背景のヘッダー上で背景に同化して
   見えなくなるため、白ではなく濃いめのシアンにする */
.nav-cta:hover { background: #00a8b5; box-shadow: 0 0 22px rgba(0,242,255,0.6); transform: translateY(-2px); }

.nav-cta-group { display: flex; align-items: center; gap: 12px; }

/* ヘッダーは常に白背景のため、明るいネオンブルーの文字は
   コントラストが弱く読みにくい。視認性の高い濃いめのシアンにする */
.nav-cta-ghost {
    background: var(--deep-black);
    color: var(--neon-blue) !important;
    border: 1px solid var(--neon-blue);
    box-shadow: none;
    padding: 9px 21px;
}
.nav-cta-ghost:hover { background: var(--neon-blue); color: #000 !important; border-color: var(--neon-blue); box-shadow: 0 0 22px rgba(0,242,255,0.5); }

@media (max-width: 968px) {
    .nav-cta { margin-top: 4px; }
    .nav-cta-group { margin-top: 4px; gap: 8px; }
}

/* --- FLOATING CONTACT BUTTONS (常時右下固定・上から Instagram / LINE / お問い合わせ) --- */
.float-contact-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 600;
}
.float-contact-menu {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.float-contact-btn {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--neon-blue);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(0,242,255,0.35));
}
/* デスクトップではトグルボタンは不要（3つ常時表示） */
.float-contact-toggle { display: none; }
.float-contact-backdrop { display: none; }
/* 六角形の外周を回る、ターゲティング風の回転リング */
.float-contact-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed rgba(0,242,255,0.4);
    pointer-events: none;
    animation: hudRingSpin 14s linear infinite;
}
.float-contact-hex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.float-contact-hex polygon {
    fill: rgba(4, 10, 16, 0.92);
    stroke: var(--neon-blue);
    stroke-width: 1.5;
    transition: fill 0.3s ease;
}
.float-contact-icon {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    transition: color 0.3s ease;
}
.float-contact-btn:hover {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0 0 16px rgba(0,242,255,0.6));
}
.float-contact-btn:hover .float-contact-hex polygon {
    fill: var(--neon-blue);
}
.float-contact-btn:hover .float-contact-icon {
    color: #02060a;
}
@media (prefers-reduced-motion: reduce) {
    .float-contact-btn::before { animation: none; }
}
.float-contact-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.float-contact-btn:hover .float-contact-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (max-width: 640px) {
    .float-contact-stack { right: 16px; bottom: 16px; }
    .float-contact-btn { width: 52px; height: 52px; font-size: 1.1rem; }

    /* モバイルはトグル式：普段は六角形1個、タップで扇状に展開 */
    .float-contact-toggle {
        display: flex;
        position: relative;
        z-index: 2;
    }
    .float-contact-toggle .float-contact-icon { transition: transform 0.3s ease; }
    .float-contact-stack.is-open .float-contact-toggle .float-contact-icon {
        transform: rotate(45deg);
    }

    /* 展開中はサイト全体にブラーをかけて操作不可にする */
    .float-contact-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 590;
        background: transparent;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s 0.3s;
    }
    body.contact-menu-open .float-contact-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease;
    }

    .float-contact-menu {
        position: absolute;
        right: 0;
        bottom: 0;
        gap: 0;
    }
    .float-contact-menu .float-contact-btn {
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
    }
    .float-contact-menu .float-contact-label { display: none; }

    /* 展開時：左・左斜め上・上へ扇状に広がる（外面左上方向） */
    .float-contact-stack.is-open .float-contact-menu .float-contact-btn {
        opacity: 1;
        pointer-events: auto;
    }
    .float-contact-stack.is-open .float-contact-menu .float-contact-btn:nth-child(1) {
        transform: translate(-96px, 0) scale(1);
        transition-delay: 0.02s;
    }
    .float-contact-stack.is-open .float-contact-menu .float-contact-btn:nth-child(2) {
        transform: translate(-68px, -68px) scale(1);
        transition-delay: 0.06s;
    }
    .float-contact-stack.is-open .float-contact-menu .float-contact-btn:nth-child(3) {
        transform: translate(0, -96px) scale(1);
        transition-delay: 0.1s;
    }
}

/* --- HERO ENHANCEMENTS --- */
.hero-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.badge-area { margin-bottom: 28px; }
.cta-hero {
    position: relative;
    display: inline-block;
    padding: 16px 42px;
    background: var(--deep-black);
    color: var(--neon-blue);
    border: 1px solid var(--neon-blue);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(0,242,255,0.18);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* .hud-panelと同じ、切れ角の対角2隅にブラケット（HUD風の枠飾り）を配置 */
.cta-hero::before, .cta-hero::after,
.cta-ghost::before, .cta-ghost::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.cta-hero::before { top: -1px; left: -1px; border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue); }
.cta-hero::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue); }
.cta-hero:hover { background: var(--neon-blue); color: #000; box-shadow: 0 0 28px rgba(0,242,255,0.5); transform: translateY(-2px); }
.cta-hero:hover::before, .cta-hero:hover::after { border-color: #000; }
.cta-ghost {
    position: relative;
    display: inline-block;
    padding: 16px 32px;
    color: #111;
    border: 1px solid rgba(0,0,0,0.2);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    transition: 0.3s;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.cta-ghost::before { top: -1px; left: -1px; border-top: 2px solid rgba(0,0,0,0.2); border-left: 2px solid rgba(0,0,0,0.2); }
.cta-ghost::after { bottom: -1px; right: -1px; border-bottom: 2px solid rgba(0,0,0,0.2); border-right: 2px solid rgba(0,0,0,0.2); }
.cta-ghost:hover { border-color: #111; background: rgba(0,0,0,0.04); box-shadow: 0 0 18px rgba(0,242,255,0.12); }
.cta-ghost:hover::before, .cta-ghost:hover::after { border-color: #111; }

.scroll-indicator {
    margin-top: 60px;
    position: relative;
}
.scroll-indicator::after {
    content: '';
    display: block;
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, #999, transparent);
    transform-origin: top;
    animation: scrollLineGrow 1.8s ease-in-out infinite;
}
@keyframes scrollLineGrow {
    0%   { transform: scaleY(0); opacity: 1; }
    50%  { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}
/* --- EMPATHY (PROBLEM) --- */
#empathy .card-head { margin-bottom: 12px; }
.empathy-bridge {
    margin-top: 50px;
    font-size: 1.15rem;
    color: #333;
}
.empathy-bridge strong { color: #000; border-bottom: 2px solid var(--neon-blue); padding-bottom: 2px; }

/* --- ABOUT OPEN NOTE --- */
.about-open { margin-top: 22px; font-size: 1.05rem; }


/* --- FINAL CTA (JOIN) --- */
.join-inner { max-width: 720px; margin: 0 auto; }
.join-lead { color: #bbb; font-size: 1.05rem; line-height: 1.9; margin: 10px 0 36px; }
.join-progress { max-width: 480px; margin: 0 auto 36px; }
.join-progress-meta { font-size: 0.85rem; color: #aaa; margin-top: 14px; letter-spacing: 0.05em; }
.join-btn { font-size: 1.05rem; padding: 18px 50px; }
.join-btn:hover { box-shadow: 0 0 30px rgba(0,242,255,0.5); }

/* --- ACCESS SNS --- */
.access-sns { margin-top: 16px; }

/* --- FAQ LIST WIDTH --- */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-list summary { color: #f3f3f3; padding: 4px 0; }
.faq-list summary::marker { color: var(--neon-blue); }

/* --- SECTION HEADER SPACING --- */
.sec-header { margin-bottom: 10px; }

/* --- HUD TAG: 角を落とした塗りつぶしラベル（参考画像の "IDENTIFICATION" タグ風、全ページ共通の見出しラベルに適用） --- */
.sec-num {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: relative;
    padding: 6px 18px 6px 12px;
    background: var(--neon-blue);
    color: #02060a;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(0,242,255,0.25);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.sec-num::before {
    content: '';
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #02060a;
    animation: pageTagPulse 1.8s ease-in-out infinite;
}
/* 切り落とした角に光る接続端子ライン */
.sec-num::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 10px; height: 10px;
    border-top: 1px solid rgba(2,6,10,0.55);
    border-right: 1px solid rgba(2,6,10,0.55);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}
@media (prefers-reduced-motion: reduce) {
    .sec-num::before { animation: none; }
}

/* ============================================
   DIFFERENCE SECTION
   ============================================ */
#difference {
    align-items: center;
}
#difference .sec-header {
    width: 100%;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
#difference .container {
    max-width: 920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#difference .comparison-table { margin: 0 auto 50px; max-width: 880px; width: 100%; }
#difference .diff-highlights { max-width: 880px; margin-left: auto; margin-right: auto; }
#difference .tbl-row .col { padding: 18px 16px; font-size: 0.92rem; line-height: 1.5; }
#difference .tbl-row.header { border-bottom: 1px solid rgba(0,242,255,0.25); }
#difference .tbl-row.header .col { font-size: 0.78rem; letter-spacing: 0.12em; padding: 14px 16px; }
#difference .tbl-row:not(.header):hover { background: rgba(0,242,255,0.02); }

.diff-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 30px;
}
.diff-card {
    padding: 36px 28px;
    border-top: 2px solid var(--neon-blue);
    transition: 0.35s ease;
}
.diff-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 26px rgba(0,242,255,0.15);
}
.diff-icon {
    font-size: 2rem;
    color: var(--neon-blue);
    margin-bottom: 18px;
    display: block;
}
.diff-card h4 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 12px;
    line-height: 1.6;
    font-weight: 700;
}
.diff-card p {
    color: #aaa;
    font-size: 0.92rem;
    line-height: 1.85;
}

/* Mobile: stacked rows with visible labels */
@media (max-width: 768px) {
    #difference .tbl-row {
        grid-template-columns: 1fr;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    #difference .tbl-row .col {
        display: flex !important;
        padding: 6px 16px;
        justify-content: flex-start;
        text-align: left;
        font-size: 0.9rem;
    }
    #difference .tbl-row .col:nth-child(1) {
        display: flex !important;
        color: var(--neon-blue);
        font-weight: 700;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        padding-bottom: 2px;
        background: transparent;
    }
    #difference .tbl-row .col.highlight {
        background: rgba(0,242,255,0.05);
        border-left: 2px solid var(--neon-blue);
        border-right: none;
    }
    #difference .tbl-row.header { display: none; }
}

/* ============================================
   HEADER REVEAL ON SCROLL + HERO LOGO
   ============================================ */
.interface-header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
    will-change: transform, opacity;
}
.interface-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   AUDIENCE / FOR YOU
   ============================================ */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 50px auto 0;
    max-width: 1000px;
}
.aud-card {
    padding: 36px 28px;
    border-top: 2px solid var(--neon-blue);
    transition: 0.35s ease;
}
.aud-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 26px rgba(0,242,255,0.12);
}
/* aud-card → 会員サイト（マイページ）の.hud-panelと統一したHUDパネル
   デザイン（切り欠き角 + コーナーブラケット）。実際のマークアップ構成
   （.aud-card.glass-panel.dark）に合わせた詳細度で.glass-panel.darkの
   背景指定より優先させる。 */
.aud-card.glass-panel.dark {
    position: relative;
    background: rgb(12 12 12 / 80%);
    border: 1px solid rgba(0,242,255,0.25);
    border-top: 1px solid rgba(0,242,255,0.25);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.aud-card.glass-panel.dark::before,
.aud-card.glass-panel.dark::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
}
.aud-card.glass-panel.dark::before { top: -1px; left: -1px; border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue); }
.aud-card.glass-panel.dark::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue); }
.aud-icon {
    font-size: 1.9rem;
    color: var(--neon-blue);
    margin-bottom: 18px;
    display: block;
}
/* アイコンをHUDリングで縁取るターゲティング風フレーム */
.hud-icon-frame {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.hud-icon-frame .aud-icon { margin-bottom: 0; position: relative; z-index: 1; }
.hud-icon-frame .hud-ring { position: absolute; top: 0; left: 0; }

.aud-card h3 {
    color: #f3f3f3;
    font-size: 1.02rem;
    margin-bottom: 12px;
    line-height: 1.6;
    font-weight: 700;
}
.aud-card p {
    color: #f3f3f3;
    font-size: 0.92rem;
    line-height: 1.85;
}

/* ============================================
   PROCESS / FLOW
   ============================================ */
.process-list {
    max-width: 760px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.process-step {
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: center;
}
.ps-num {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.ps-num .hud-ring { position: absolute; top: 0; left: 0; }
.ps-num .hud-ring::after { display: none; }
.ps-num-text {
    position: relative;
    z-index: 1;
    font-size: 1.6rem;
    color: var(--neon-blue);
    line-height: 1;
    font-weight: 700;
}
.ps-body h3 {
    color: #f3f3f3;
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 700;
}
.ps-body p {
    color: #f3f3f3;
    font-size: 0.92rem;
    line-height: 1.85;
}
@media (max-width: 600px) {
    .process-step { grid-template-columns: 52px 1fr; padding: 22px 20px; gap: 14px; }
    .ps-num { width: 52px; height: 52px; }
    .ps-num .hud-ring { width: 52px; height: 52px; }
    .ps-num .hud-ring::before { inset: 6px; }
    .ps-num-text { font-size: 1.3rem; }
}

/* ============================================
   ACCESS (revised)
   ============================================ */
.access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    max-width: 900px;
    margin: 40px auto 50px;
}
.access-card {
    padding: 32px 24px;
    text-align: center;
    border-top: 2px solid var(--neon-blue);
    transition: 0.3s;
}
.access-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 22px rgba(0,242,255,0.12);
}
.access-icon {
    font-size: 1.8rem;
    color: var(--neon-blue);
    margin-bottom: 14px;
    display: block;
}
.access-card h4 {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: #f3f3f3;
    margin-bottom: 12px;
    font-family: var(--font-en);
    font-weight: 700;
}
.access-card p {
    color: #f3f3f3;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
.access-meta {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: #f3f3f3;
}
/* --- ACCESS: 地図 + 所在地・駐車場情報 --- */
.access-map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(0,242,255,0.15);
    overflow: hidden;
}
.access-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.parking-map-frame {
    max-width: 520px;
    margin: 20px auto 0;
    border: 1px solid rgba(0,242,255,0.15);
    background: #050810;
    padding: 8px;
}
.parking-map-frame img {
    display: block;
    width: 100%;
    height: auto;
}
.access-photo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 20px auto 0;
}
.access-photo-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(0,242,255,0.15);
    overflow: hidden;
}
.access-photo-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 640px) {
    .access-photo-row { grid-template-columns: 1fr; }
}
.access-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.access-info-block {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.access-info-block .access-icon {
    margin: 4px 0 0;
    flex-shrink: 0;
}
.access-info-block h4 {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    font-family: var(--font-en);
    color: var(--neon-blue);
    margin-bottom: 8px;
}
.access-info-block p {
    color: #f3f3f3;
    line-height: 1.8;
}
.access-notify {
    max-width: 600px;
    margin: 40px auto 0;
    text-align: center;
    padding: 36px 28px;
    border: 1px dashed rgba(0,242,255,0.3);
    border-radius: 4px;
    background: rgba(0,242,255,0.02);
}
.access-notify p { color: #f3f3f3; line-height: 1.85; }
.access-notify strong { color: #f3f3f3; font-size: 1.05rem; }
.access-notify-sub { font-size: 0.88rem; color: #f3f3f3 !important; margin: 8px 0 22px; }
.access-notify .cf-btn { margin-top: 8px; }


/* ============================================
   BOOT OPENING (minimal)
   ============================================ */
body.is-loading { overflow: hidden; }

#boot-overlay {
    position: fixed;
    inset: 0;
    background: #05080a;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
#boot-overlay.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.boot-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.boot-logo {
    height: 100px;
    width: auto;
    max-width: 70vw;
    opacity: 0;
    filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(0, 242, 255, 0.45));
    animation: bootLogoIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}

.boot-line {
    display: block;
    width: 0;
    height: 1px;
    background: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
    animation: bootLineDraw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}

@keyframes bootLogoIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bootLineDraw {
    from { width: 0; }
    to   { width: 140px; }
}

@media (max-width: 600px) {
    .boot-logo { height: 72px; }
    @keyframes bootLineDraw { from { width: 0; } to { width: 100px; } }
}

/* ============================================
   FEATURES (FULL-SCREEN)
   ============================================ */
.feature-full {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px;
    overflow: hidden;
}

/* Massive background number */
.feat-num-bg {
    position: absolute;
    font-family: var(--font-en, 'Rajdhani', sans-serif);
    font-size: clamp(14rem, 38vw, 30rem);
    font-weight: 700;
    color: rgba(0, 242, 255, 0.06);
    line-height: 0.9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.05em;
    white-space: nowrap;
}
body[data-theme="white"] .feat-num-bg {
    color: rgba(0, 0, 0, 0.045);
}

.feat-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
    text-align: center;
    width: 100%;
}

.feat-tag {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--neon-blue);
    letter-spacing: 0.28em;
    margin-bottom: 32px;
    padding: 9px 22px;
    border: 1px solid rgba(0, 242, 255, 0.4);
    border-radius: 100px;
    background: rgba(0, 242, 255, 0.06);
}

.feat-title {
    font-size: clamp(2rem, 5.2vw, 3.8rem);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

.feat-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.85;
    margin-bottom: 40px;
    color: #aaa;
    font-weight: 500;
}
body[data-theme="white"] .feat-lead { color: #444; }

.feat-body {
    max-width: 680px;
    margin: 0 auto 44px;
}
.feat-body p {
    font-size: 0.98rem;
    line-height: 2;
    color: #888;
    margin-bottom: 16px;
}
.feat-body p:last-child { margin-bottom: 0; }
body[data-theme="white"] .feat-body p { color: #555; }

/* Feature 01 — bullets */
.feat-bullets {
    list-style: none;
    max-width: 540px;
    margin: 0 auto;
    text-align: left;
    padding: 0;
}
.feat-bullets li {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.98rem;
    color: #333;
}
body[data-theme="dark"] .feat-bullets li,
body[data-theme="liquid"] .feat-bullets li {
    border-bottom-color: rgba(255,255,255,0.08);
}
.feat-bullets li:last-child { border-bottom: none; }
.feat-bullets li i {
    color: var(--neon-blue);
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,242,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Feature 02 — highlight callout (Genetic) */
.feat-highlight {
    max-width: 720px;
    margin: 12px auto 0;
    padding: 30px 32px;
    background: rgba(0, 242, 255, 0.04);
    border: 1px solid rgba(0, 242, 255, 0.25);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    align-items: center;
    text-align: left;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.05);
}
.fh-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(0, 242, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neon-blue);
    font-size: 1.6rem;
    flex-shrink: 0;
}
.fh-label {
    font-size: 0.7rem;
    color: var(--neon-blue);
    letter-spacing: 0.2em;
    margin-bottom: 6px;
}
.fh-content h3 {
    color: #f3f3f3;
    font-size: 1.15rem;
    margin: 4px 0 10px;
    font-weight: 700;
}
.fh-content p {
    color: #f3f3f3;
    font-size: 0.92rem;
    line-height: 1.85;
    margin: 0;
}

/* Feature 03 — applies grid */
.feat-applies {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
}
.apply-item {
    padding: 24px 12px;
    border-top: 2px solid var(--neon-blue);
    background: rgba(0, 242, 255, 0.04);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.apply-item:hover {
    transform: translateY(-4px);
    background: rgba(0, 242, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0,242,255,0.08);
}
.apply-item > i {
    font-size: 1.8rem;
    color: var(--neon-blue);
}
.apply-item span {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111;
    margin-top: 4px;
    letter-spacing: 0.04em;
}
body[data-theme="dark"] .apply-item span,
body[data-theme="liquid"] .apply-item span { color: #fff; }
.apply-item small {
    font-size: 0.72rem;
    color: #888;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 768px) {
    .feature-full { padding: 100px 20px; }
    .feat-tag { font-size: 0.62rem; padding: 7px 18px; margin-bottom: 24px; letter-spacing: 0.22em; }
    .feat-highlight { grid-template-columns: 1fr; padding: 26px 22px; text-align: center; gap: 16px; }
    .fh-icon { margin: 0 auto; }
    .feat-applies { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .apply-item { padding: 20px 10px; }
}
@media (max-width: 480px) {
    .feat-num-bg { font-size: clamp(10rem, 60vw, 18rem); opacity: 0.5; }
    .feat-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}

/* --- Trainer box embedded inside FEATURE 01 --- */
.feat-trainer-box {
    margin-top: 50px;
    text-align: left;
}
.feat-trainer-box .trainer-grid {
    text-align: left;
}

/* --- Campaign COMPLETED state --- */
.cf-completed {
    border: 1px solid rgba(0, 242, 255, 0.35);
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.08);
}
.cp-tag-achieved {
    background: var(--neon-blue);
    color: #000 !important;
    box-shadow: 0 0 14px rgba(0, 242, 255, 0.45);
}
.cf-completed .cf-bar {
    background: linear-gradient(90deg, var(--neon-blue), #7df9ff);
    box-shadow: 0 0 12px var(--neon-blue);
}
.cf-completed .cf-pct {
    color: var(--neon-blue);
    font-weight: 700;
}

/* --- Roadmap phase status inline badge --- */
.rm-status {
    font-size: 0.72rem;
    color: var(--neon-blue);
    letter-spacing: 0.15em;
    margin-left: 6px;
    padding: 3px 10px;
    background: rgba(0, 242, 255, 0.08);
    border: 1px solid rgba(0, 242, 255, 0.3);
    border-radius: 100px;
}

/* ============================================
   SUB PAGE COMMON (page-crumb, layout, samples)
   ============================================ */

@keyframes pageTagPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

/* サブページ用のコンパクトなページ識別表示（パンくず＋タイトル） */
.page-crumb {
    padding-bottom: 36px;
    margin-bottom: 50px;
    border-bottom: 1px solid rgba(0, 242, 255, 0.12);
}
.page-crumb-trail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    margin-bottom: 22px;
}
.page-crumb-trail::before {
    content: '';
    width: 6px; height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--neon-blue);
    box-shadow: 0 0 8px var(--neon-blue);
    animation: pageTagPulse 1.8s ease-in-out infinite;
}
.page-crumb-trail a {
    color: #f3f3f3;
    text-decoration: none;
    transition: color 0.2s ease;
}
.page-crumb-trail a:hover { color: var(--neon-blue); }
.page-crumb-sep { color: #f3f3f3; }
.page-crumb-current {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px 4px 9px;
    background: var(--neon-blue);
    color: #02060a;
    font-weight: 700;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.page-crumb-title {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .page-crumb-trail::before { animation: none; }
}

/* サブページのメインラッパー（固定ヘッダー分の余白を確保） */
.page-main { max-width: 1300px; margin: 0 auto; padding: 130px 24px 80px; }
.page-main section { min-height: auto; padding: 60px 0; }
.page-main .container { max-width: 900px; margin: 0 auto; }
/* 月額会員プラン（4枚）をPC幅で横一列に収めるため、このセクションだけ少し広げる */
#member-plans .container { max-width: 1100px; }
/* よくある質問セクション：見出し・リード文・回答リストの幅をサイト全体で統一 */
.container.faq-container { max-width: 720px; margin: 0 auto; }

/* コンテンツセクション見出し */
.content-h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}
.content-h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: #f3f3f3;
}
body[data-theme="white"] .content-h3 { color: #111; }
.content-p {
    font-size: 1rem;
    line-height: 2;
    color: #f3f3f3;
    margin-bottom: 20px;
}
body[data-theme="dark"] .content-p {}
.content-lead {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #f3f3f3;
    margin-bottom: 40px;
    font-weight: 500;
}
body[data-theme="dark"] .content-lead {}

/* サンプル画像プレースホルダー */
.sample-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #0f1a2a 0%, #050810 100%);
    border: 1px solid rgba(0, 242, 255, 0.15);
    color: #f3f3f3;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sample-img::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(45deg, transparent 48%, rgba(0,242,255,0.05) 50%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(0,242,255,0.05) 50%, transparent 52%);
    background-size: 30px 30px;
}
/* 参考画像のパネル枠を意識したコーナーブラケット */
.sample-img::after {
    content: '';
    position: absolute;
    top: 14px; left: 14px;
    width: 22px; height: 22px;
    z-index: 1;
    border-top: 1px solid rgba(0,242,255,0.6);
    border-left: 1px solid rgba(0,242,255,0.6);
    pointer-events: none;
}
.sample-img i { font-size: 2.4rem; color: rgba(0, 242, 255, 0.35); margin-bottom: 10px; z-index: 1; }
.sample-img .si-label { font-family: var(--font-en); font-size: 0.7rem; color: rgba(0,242,255,0.5); letter-spacing: 0.2em; z-index: 1; }
.sample-img .si-desc { font-size: 0.8rem; color: #f3f3f3; margin-top: 4px; z-index: 1; padding: 0 12px; }

/* サンプル画像のグリッド */
.sample-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 30px 0;
}
.sample-gallery .sample-img { aspect-ratio: 4 / 3; }

/* Two-column with image */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin: 40px 0;
}
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }
@media (max-width: 768px) {
    .two-col { grid-template-columns: 1fr; gap: 30px; }
    .two-col.reverse { direction: ltr; }
}

/* Contact form (sample UI) */
.contact-form {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-label {
    font-size: 0.85rem;
    color: #f3f3f3;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.form-label .required { color: var(--neon-blue); margin-left: 4px; font-size: 0.7rem; }
.form-input, .form-textarea, .form-select {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,242,255,0.2);
    color: #f3f3f3;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-family: inherit;
    border-radius: 3px;
    transition: 0.3s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--neon-blue);
    box-shadow: 0 0 12px rgba(0,242,255,0.15);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-submit {
    padding: 16px 40px;
    background: var(--neon-blue);
    color: #000;
    border: none;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    align-self: center;
    margin-top: 12px;
    font-family: inherit;
    font-weight: 700;
    transition: 0.3s;
}
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(0,242,255,0.5); }
.form-note { font-size: 0.78rem; color: #f3f3f3; text-align: center; margin-top: -8px; }

/* Contact info cards */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 40px auto;
}
.contact-info-card {
    padding: 28px 20px;
    text-align: center;
    background: rgba(0,242,255,0.03);
    border: 1px solid rgba(0,242,255,0.15);
    transition: 0.3s;
}
.contact-info-card:hover { border-color: var(--neon-blue); background: rgba(0,242,255,0.06); }
.contact-info-card i { font-size: 1.8rem; color: var(--neon-blue); margin-bottom: 12px; }
.contact-info-card h4 { font-size: 0.78rem; letter-spacing: 0.2em; color: #f3f3f3; margin-bottom: 10px; }
.contact-info-card p { color: #f3f3f3; font-size: 0.95rem; line-height: 1.6; margin: 0; }
.contact-info-card a { color: var(--neon-blue); text-decoration: none; }

/* Trainer spec grid（プロフィールの所属・プロデビュー・階級・出身地） */
.trainer-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    margin-top: 40px;
}
.trainer-spec-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}
.trainer-spec-label { color: var(--neon-blue); font-size: 0.85rem; letter-spacing: 0.1em; font-weight: 600; border-bottom: 1px solid #00f2ff; text-align: center;}
.trainer-spec-value { font-size: 0.95rem; }
@media (max-width: 600px) {
    .trainer-spec-grid { grid-template-columns: 1fr; }
}

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; margin: 30px 0; }
.spec-table th, .spec-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }
.spec-table th { color: var(--neon-blue); font-size: 0.85rem; letter-spacing: 0.1em; width: 30%; font-weight: 600; }
.spec-table td { font-size: 0.95rem; }
@media (max-width: 600px) {
    .spec-table th, .spec-table td { display: block; width: 100%; padding: 8px 14px; }
    .spec-table th { border-bottom: none; padding-top: 16px; }
    .spec-table td { padding-bottom: 16px; }
}

/* Equipment list grid */
.equip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.equip-item {
    padding: 22px 20px;
    background: rgba(0,242,255,0.03);
    border-left: 2px solid var(--neon-blue);
    display: flex;
    gap: 14px;
    align-items: center;
}
.equip-item i { font-size: 1.4rem; color: var(--neon-blue); flex-shrink: 0; }
.equip-item .eq-name { color: #fff; font-weight: 700; font-size: 0.95rem; }
.equip-item .eq-note { color: #999; font-size: 0.78rem; margin-top: 2px; }

/* Legal (privacy/terms) styles */
.legal-content { max-width: 800px; margin: 0 auto; color: #f3f3f3; line-height: 2; }
.legal-content h2 { color: var(--neon-blue); font-size: 1.15rem; margin: 40px 0 16px; letter-spacing: 0.05em; }
.legal-content h3 { color: #f3f3f3; font-size: 1rem; margin: 24px 0 10px; }
.legal-content p { margin-bottom: 14px; font-size: 0.92rem; }
.legal-content ul { padding-left: 24px; margin-bottom: 14px; }
.legal-content li { font-size: 0.92rem; margin-bottom: 6px; }
.legal-content .last-updated { font-size: 0.78rem; color: #f3f3f3; margin-bottom: 30px; }

/* Program detail cards */
.program-list { display: flex; flex-direction: column; gap: 40px; }
.program-detail {
    padding: 40px;
    background: rgba(0,242,255,0.02);
    border: 1px solid rgba(0,242,255,0.15);
    border-radius: 4px;
}
.program-detail .two-col { margin: 0; align-items: start; }
/* プログラム写真：角に番号タグ、ホバーで色付きに */
.program-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgba(0,242,255,0.15);
}
.program-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(15%) contrast(1.03);
    transition: filter 0.4s ease, transform 0.4s ease;
}
.program-detail:hover .program-photo img { filter: grayscale(0%); transform: scale(1.04); }
.program-photo-tag {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 1;
    background: var(--neon-blue);
    color: #02060a;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 4px 12px 4px 8px;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.program-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.program-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(0,242,255,0.1);
    color: var(--neon-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.program-title { color: #f3f3f3; font-size: 1.4rem; font-weight: 700; }
.program-meta { color: var(--neon-blue); font-size: 0.78rem; letter-spacing: 0.15em; margin-top: 4px; }
.program-body { color: #f3f3f3; line-height: 1.9; margin-bottom: 20px; }
.program-features { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.program-features li { color: #f3f3f3; font-size: 0.88rem; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.08); display: flex; gap: 10px; align-items: center; }
.program-features li i { color: var(--neon-blue); font-size: 0.75rem; }

/* Shared page footer */
.site-footer {
    background: #050810;
    border-top: 1px solid rgba(0,242,255,0.1);
    padding: 60px 5% 30px;
    color: #f3f3f3;
    font-size: 0.85rem;
}
.footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand p { margin: 12px 0 20px; color: #f3f3f3; line-height: 1.8; font-size: 0.85rem; }
.footer-brand .footer-logo { height: 40px; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-col h5 { color: var(--neon-blue); font-size: 0.72rem; letter-spacing: 0.2em; margin-bottom: 16px; font-family: var(--font-en); }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #f3f3f3; text-decoration: none; font-size: 0.85rem; transition: 0.2s; }
.footer-col a:hover { color: var(--neon-blue); }
/* --- Sponsors band --- */
.footer-sponsors {
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}
.footer-sponsors-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.25em;
    color: #f3f3f3;
    opacity: 0.5;
    margin-bottom: 18px;
}
.footer-sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.footer-sponsor-slot {
    width: 160px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    padding: 10px 18px;
    transition: 0.25s;
}
a.footer-sponsor-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.footer-sponsor-slot img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: #f3f3f3;
    letter-spacing: 0.1em;
}
.footer-sns { display: flex; gap: 16px; }
.footer-sns a { color: #f3f3f3; font-size: 1.1rem; }
.footer-sns a:hover { color: var(--neon-blue); }
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TITLE ANIMATION (Digital Noise Glitch)
   RGBチャネル分離 + クリップパス断裂 + 微振動
   ============================================================ */

.split-text {
    display: block;
    /* RGB分離時のオフセットが切れないよう小さな余白確保 */
    padding: 0.05em 0.1em;
    margin: -0.05em -0.1em;
}
.split-text .line {
    display: block;
    line-height: 1.7;
    overflow: visible; /* グリッチ時のRGBずれを見せるため */
}
.split-text .line-inner {
    display: block;
    opacity: 0;
    position: relative;
    will-change: opacity, transform, text-shadow, clip-path, filter;
}
.split-text.animate-in .line-inner {
    opacity: 1;
    animation: titleGlitchIn 0.4s linear forwards;
    animation-delay: calc(var(--line, 0) * 60ms);
}

@keyframes titleGlitchIn {
    /* 前半：小刻みなクリップパス断裂 + 位置飛び（カラー分離なし） */
    0% {
        opacity: 0;
        clip-path: inset(45% 0 45% 0);
        transform: translate(0, 0);
        filter: brightness(1.3);
    }
    5% { opacity: 1; }
    6%, 14% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(-2px, 0);
    }
    18%, 26% {
        clip-path: inset(10% 0 55% 0);
        transform: translate(2px, 1px);
    }
    30%, 38% {
        clip-path: inset(60% 0 8% 0);
        transform: translate(-1.5px, 0);
    }
    42%, 50% {
        clip-path: inset(0);
        transform: translate(1px, 0);
        filter: brightness(1.1);
    }
    /* 後半：微振動しながら素早く定着 */
    65% {
        transform: translate(-0.5px, 0);
        filter: brightness(1);
    }
    80% {
        transform: translate(0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0);
        transform: translate(0);
        filter: brightness(1);
    }
}

/* Reduced motion: 即時表示 */
@media (prefers-reduced-motion: reduce) {
    .split-text .line-inner {
        opacity: 1;
        transform: none;
        text-shadow: none;
        clip-path: none;
        filter: none;
        animation: none;
    }
}

/* Text following the title (leads, descriptions) — グリッチ後に静かに登場 */
.split-follow {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(12px);
    transition:
        opacity   0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
        filter    0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
    will-change: opacity, filter, transform;
}
.split-follow.animate-in {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .split-follow {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}


/* ============================================================
   MISSION以降の共通背景（ヒーローを除く全セクション）
   #bio-canvasの点と線ではなく、ヒーローのグリッド演出
   （.hero-slide-grid）と同じ手法（線パターン+放射状マスクで
   フェード）で、四角ではなくハニカム（六角形）構造にした
   共通のHUD風背景を敷く。

   背景はセクションごとに用意せず、#hex-story-bg という
   position:fixedの単一要素をページ全体で共有する（#ambient-bg /
   #bio-canvasと同じ考え方）。これにより、mission以降どのセクションを
   スクロールしていても背景は完全に同じまま切り替わらない。
   ヒーロー区間ではヒーロー自身の不透明なスライドショーが上に
   重なるため、この背景は自然に隠れる。

   セクション自体は特別な演出（ピン留め・スクロール連動移動）を
   持たない、他の下層ページと同じ通常のスクロール表示。見出しや
   カードなど個々の要素にだけ、画面に入ったタイミングで一度だけ
   再生されるフェードアップ演出（.reveal-text、JS: script.js）を
   かけている。
   ============================================================ */
/* サイト全体がdata-theme="dark"の基本背景（--deep-black）を使うため
   本来は不要だが、#hex-story-bgのマスクで縁が透明になった部分から
   淡色が透けないよう、トップページに限り念のため黒を明示的に固定する。 */
body.is-home {
    background-color: #05080a !important;
}
body.is-home .sec-title {
    color: #f3f3f3;
}
#hex-story-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%2300f2ff' stroke-opacity='0.22'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%2300f2ff' stroke-opacity='0.22'/%3E%3C/svg%3E");
    background-color: #05080a;
    background-size: 84px 150px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
            mask-image: radial-gradient(ellipse at center, black 20%, transparent 78%);
    pointer-events: none;
}
/* 見出し・カードなど個々の要素の出現アニメーション。
   スクロール位置に連動するのではなく、画面に入ったタイミングで
   一度だけ再生する（IntersectionObserver、script.js） */
.reveal-text {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-text { opacity: 1; transform: none; transition: none; }
}
.mission-heading {
    color: #f3f3f3;
    font-size: clamp(2.6rem, 4.8vw, 4rem);
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 50px
}
/* スマホ幅でのみ改行させる（「スポーツ科学で、」の後ろで改行） */
.sp-break { display: none; }
@media (max-width: 640px) {
    .sp-break { display: inline; }
}
/* h2/sec-descのグループとは別に、ボタン単体をスクロールで
   視界に入ったタイミングで独立してフェードインさせるためのラッパー
   （.sec-headerに含めたままだと、見出しが視界に入った時点で
   ボタンも一緒にフェード済みになってしまうため分離している） */
.mission-cta-standalone { margin-top: 30px; text-align: center; }

/* --- TRAINER INTRO（mission直下、旧mission-trainer/mission-about/mission-lead） --- */
.trainer-intro-photo { text-align: center; }
.trainer-intro-heading {
    color: #f3f3f3;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
}
.trainer-intro-heading-en {
    display: inline-block;
    margin-left: 12px;
    color: var(--neon-blue);
    font-size: 0.55em;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-shadow: 0 0 14px rgba(0,242,255,0.45);
}
.trainer-intro-lead {
    color: #f3f3f3;
    font-size: 0.95rem;
    line-height: 2;
}
.trainer-intro-cta-row { text-align: center; margin-top: 36px; }

.mission-cta, .trainer-intro-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 34px;
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    transition: 0.3s ease;
    text-decoration: none;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.mission-cta::before, .mission-cta::after,
.trainer-intro-cta::before, .trainer-intro-cta::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.mission-cta::before, .trainer-intro-cta::before { top: -1px; left: -1px; border-top: 2px solid var(--neon-blue); border-left: 2px solid var(--neon-blue); }
.mission-cta::after, .trainer-intro-cta::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--neon-blue); border-right: 2px solid var(--neon-blue); }
.mission-cta:hover, .trainer-intro-cta:hover {
    box-shadow: 0 0 28px rgba(0,242,255,0.5);
    transform: translateY(-2px);
}

/* モバイル調整 */
@media (max-width: 768px) {
    .mission-heading { font-size: clamp(2rem, 7vw, 2.6rem); }
}

/* ============================================================
   RESPONSIVE — Mobile Nav (Hamburger) + Breakpoints
   ============================================================ */

/* Hamburger button (hidden on desktop) */
.mobile-nav-toggle { display: none; }
.mobile-nav-backdrop { display: none; }
.mobile-cta-bar { display: none; }

/* --- Tablet (≤ 968px) --- */
@media (max-width: 968px) {
    /* メニュー展開中は、ヘッダー自身のz-index(500)を.mobile-cta-bar(700)・
       .float-contact-stack(600)・.mobile-nav-backdrop(9998)より引き上げる。
       .main-navはheaderの子要素で、header自身がposition:fixed+z-indexで
       独自のスタッキングコンテキストを作るため、.main-nav側にどれだけ高い
       z-indexを設定してもheaderの外にあるこれらの要素の背後に隠れてしまう
       （実際に発生していた不具合。特にbodyの直下にあるbackdropより低いままだと
       展開したメニュー自体が暗転レイヤーの下に隠れてしまう）。 */
    .interface-header.nav-open {
        z-index: 10000;
    }

    /* Header returns to row layout with hamburger */
    .interface-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 14px 20px !important;
        gap: 0 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--lt-border, rgba(0,0,0,0.08));
    }
    /* ロゴは横長のワードマークSVG（幅:高さ ≈ 7.6:1）のため、
       高さ基準の指定だけでは幅がかなり広くなる。CTAボタン2つ＋
       ハンバーガーと同じ行に収まるよう、幅も含めて意識的に縮める */
    .logo-img { height: 26px; }
    .nav-cta-group { gap: 6px; }

    /* Hamburger button */
    .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: transparent;
        border: none;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        cursor: pointer;
        padding: 6px;
        z-index: 10001;
        position: relative;
    }
    .mobile-nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 1px;
        transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                    opacity 0.2s ease;
    }
    .interface-header.nav-open .mobile-nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .interface-header.nav-open .mobile-nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    .interface-header.nav-open .mobile-nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* 会員サイト／体験予約はスマホでは画面下部の固定バーに移すため、
       ヘッダー内には表示しない（ロゴ＋ハンバーガーのみのシンプルな行に） */
    .nav-cta-group { display: none; }

    /* Nav overlay — サイトのダークHUDトンマナに合わせた右スライド式パネル。
       ぼかし（backdrop-filter）は使わず、不透明なダーク背景 + ネオンブルーの
       アクセントのみで構成する。 */
    .main-nav {
        position: fixed;
        top: 62px;
        height: max-content;
        right: 0;
        bottom: 0;
        width: min(280px, 78vw);
        background: #05080a;
        border-left: 1px solid rgba(0, 242, 255, 0.25);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.45);
        padding: 56px 28px 0px;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
        z-index: 9999;
        overflow-y: auto;
    }
    .main-nav::before {
        content: 'MENU';
        position: absolute;
        top: 22px;
        left: 28px;
        font-family: var(--font-en);
        font-size: 0.75rem;
        letter-spacing: 0.3em;
        color: var(--neon-blue);
        text-shadow: 0 0 10px rgba(0,242,255,0.5);
    }
    .interface-header.nav-open .main-nav {
        transform: translateX(0);
    }
    .main-nav ul {
        flex-direction: column !important;
        gap: 2px !important;
        align-items: stretch !important;
    }
    .main-nav li { border-bottom: 1px solid rgba(0,242,255,0.12); }
    .main-nav li:last-child { border-bottom: none; }
    .main-nav a {
        color: #f3f3f3 !important;
        font-size: 1rem !important;
        letter-spacing: 0.08em;
        padding: 18px 4px !important;
        display: block;
    }
    .main-nav a::after { display: none; }
    .main-nav a:hover,
    .main-nav a:active,
    .main-nav a.active {
        color: var(--neon-blue) !important;
        text-shadow: 0 0 10px rgba(0,242,255,0.4);
    }

    /* Backdrop — ぼかしは使わず、単純な暗転のみ */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.55);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s 0.3s;
        z-index: 9998;
    }
    body.nav-open .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease;
    }

    body.nav-open {
        overflow: hidden;
    }

    /* --- 会員サイト／体験予約：スマホ専用の画面下部固定バー --- */
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        gap: 10px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(5,8,10,0.97);
        border-top: 1px solid rgba(0,242,255,0.2);
        z-index: 700;
    }
    .mobile-cta-bar .nav-cta {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-right: 0 !important;
        padding: 13px 10px !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.08em !important;
    }

    /* 下部バーの分、フロートの連絡ボタンを少し上に逃がす */
    .float-contact-stack { bottom: 84px; }

    /* Header spacing for content */
    section:first-of-type { padding-top: 90px; }
    .page-main { padding: 108px 20px 70px; }
    /* 画面下部固定バー（会員サイト／体験予約）の分、コンテンツ末尾が
       隠れないよう余白を確保 */
    body { padding-bottom: 76px; }

    /* Sections */
    section { padding: 80px 0; }
    .container { padding: 0 24px; }
    .ui-wrapper { padding: 0 24px; }

    /* Typography */
    .sec-title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 24px; }
    .content-h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
    .page-crumb-title { font-size: clamp(1.4rem, 4vw, 1.9rem); }
    .feat-title { font-size: clamp(1.6rem, 4.5vw, 2.6rem); }

    /* Panels */
    .glass-panel { padding: 40px 30px; }
    .identity-content { padding: 30px; }

    /* Grids
       auto-fit + minmax()は、カード3枚などちょうど際どい幅の時に
       「2列に折り返す」ではなく「3列のまま詰め込んで横はみ出す」ことが
       あるため、タブレット幅では明示的に2列に固定する（768px以下は
       さらに1列に強制するルールが別途ある） */
    .adv-grid, .audience-grid, .diff-highlights, .access-grid,
    .feat-applies, .contact-info-grid, .sample-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .price-container { grid-template-columns: repeat(2, 1fr); }

    /* Feature full-screen */
    .feature-full { padding: 100px 24px; min-height: auto; }
    .feat-highlight { grid-template-columns: 1fr; text-align: center; gap: 16px; padding: 28px 24px; }
    .fh-icon { margin: 0 auto; }
}

/* .page-main .container は最大900pxで頭打ちになるため、968pxより広い
   タブレット横向き（iPadなど969px〜1100px程度）でも実際のコンテンツ幅は
   変わらない。料金カードの4列レイアウトが窮屈にならないよう、この
   範囲でも2列に固定する。 */
@media (max-width: 1100px) {
    .price-container { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobile (≤ 640px) --- */
@media (max-width: 640px) {
    section { padding: 60px 0; }
    .container { padding: 0 18px; }
    .ui-wrapper { padding: 0 18px; }
    .glass-panel { padding: 28px 22px; }

    /* Typography scaling */
    .sec-title { font-size: clamp(1.4rem, 6vw, 1.9rem); margin-bottom: 20px; letter-spacing: 0; }
    .sec-desc { font-size: 0.88rem; padding: 0 8px; }
    .sec-num { font-size: 0.65rem; }
    .content-h2 { font-size: clamp(1.4rem, 5vw, 1.85rem); }
    .content-h3 { font-size: 1.1rem; }
    .content-p, .content-lead { font-size: 0.92rem; line-height: 1.85; }
    .page-crumb-title { font-size: clamp(1.3rem, 6vw, 1.7rem); }
    .page-crumb-trail { font-size: 0.6rem; margin-bottom: 16px; }

    /* Hero mobile */
    /* 下部固定バー（.mobile-cta-bar）と被らないよう余白を広げる */
    #hero { padding: 110px 18px 100px; }
    /* main-copyは左上に固定配置し、scroll-indicatorは.hero-content内に
       残したまま下部に表示する（#heroが position:relative の基準になれる
       よう、.hero-content側のposition:relativeを一旦解除する） */
    .hero-content { position: static; }
    .main-copy {
        position: absolute;
        top: 150px;
        left: 18px;
        right: 18px;
        margin: 0;
        font-size: clamp(0.2rem, 5.5vw, 3.2rem) !important;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.01em;
    }
    .hero-sub-cf { font-size: 0.9rem; }
    .cta-hero, .cta-ghost { width: 100%; text-align: center; padding: 14px 24px; font-size: 0.82rem; }
    .scroll-indicator { margin-top: 40px; }
    .scroll-indicator::after { height: 26px; }
    .hero-hud-frame { inset: 80px 14px 14px; }
    @keyframes heroFramePulse {
        0%, 100% { inset: 80px 14px 14px; opacity: 0.3; }
        50%      { inset: 68px 8px 8px; opacity: 0.6; }
    }
    .hero-slide-dots { top: 90px; right: 18px; bottom: auto; }
    .hero-slide-dot { width: 16px; }

    /* Mission section / Trainer intro */
    .mission-heading { font-size: clamp(1.8rem, 9vw, 6.3rem) !important; line-height: 1.35 !important; }
    .trainer-intro-heading { font-size: 1.3rem !important; }
    .trainer-intro-heading-en { display: block; margin-left: 0; margin-top: 6px; }
    .trainer-intro-lead { font-size: 0.85rem !important; line-height: 1.85 !important; }

    /* All grids single column */
    .adv-grid, .audience-grid, .diff-highlights,
    .access-grid,
    .feat-applies, .contact-info-grid, .sample-gallery {
        grid-template-columns: 1fr !important;
    }
    .adv-card, .aud-card, .diff-card,
    .access-card, .apply-item, .contact-info-card {
        padding: 26px 22px !important;
    }

    /* Trainer box stacks */
    .hex-frame { max-width: 260px; margin: 0 auto; }
    .t-name { font-size: 1.6rem !important; }

    /* Two-column layouts stack */
    .two-col { grid-template-columns: 1fr !important; gap: 24px !important; }
    .two-col.reverse { direction: ltr; }

    /* Comparison table becomes card style */
    .comparison-table { padding: 30px 20px !important; }
    .tbl-row { grid-template-columns: 1fr !important; gap: 6px !important; padding: 16px 0 !important; }
    .tbl-row.header { display: none; }
    .tbl-row .col { padding: 6px 0 !important; text-align: left !important; justify-content: flex-start !important; }
    .tbl-row .col:nth-child(1) {
        color: var(--neon-blue-strong, #00a8b5) !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.1em !important;
        border-bottom: none !important;
    }
    .tbl-row .col.highlight {
        background: rgba(0, 168, 181, 0.05) !important;
        padding: 12px 14px !important;
        border-left: 2px solid var(--neon-blue-strong, #00a8b5) !important;
        border-right: none !important;
    }

    /* Roadmap */
    .roadmap-step { padding: 24px 22px !important; }
    .roadmap-step h3 { font-size: 1.1rem; }

    /* Process */
    .process-step {
        padding: 22px 18px !important;
        grid-template-columns: 48px 1fr !important;
        gap: 12px !important;
    }
    .ps-num { width: 48px !important; height: 48px !important; }
    .ps-num .hud-ring { width: 48px !important; height: 48px !important; }
    .ps-num .hud-ring::before { inset: 5px !important; }
    .ps-num-text { font-size: 1.2rem !important; }
    .ps-body h3 { font-size: 1rem; }
    .ps-body p { font-size: 0.88rem; }

    /* Pricing */
    .price-container { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
    .price-card { width: 100%; max-width: 380px; margin: 0 auto; padding: 40px 24px; }
    .price-card.featured { transform: none; }
    .price-val { font-size: 1.9rem; }

    /* Feature full-screen */
    .feature-full { padding: 80px 20px !important; }
    .feat-num-bg { font-size: clamp(9rem, 50vw, 15rem); opacity: 0.5; }
    .feat-title { font-size: clamp(1.6rem, 6.5vw, 2.2rem); line-height: 1.4; margin-bottom: 20px; }
    .feat-lead { font-size: 1rem; margin-bottom: 24px; }
    .feat-body { margin-bottom: 30px; }
    .feat-body p { font-size: 0.9rem; line-height: 1.8; }
    .feat-tag { margin-bottom: 20px; }
    .feat-highlight { padding: 24px 20px; }
    .feat-highlight h3 { font-size: 1.05rem; }
    .fh-icon { width: 56px; height: 56px; font-size: 1.4rem; }

    /* Campaign panel */
    .cf-panel { padding: 32px 22px; }
    .cf-header h3 { font-size: 1.05rem; line-height: 1.6; }
    .cf-stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 12px; }
    .cf-stat-val { font-size: 1.3rem; }
    .cf-stat-label { font-size: 0.62rem; }
    .cf-btn { padding: 13px 30px; font-size: 0.85rem; }

    /* Contact form */
    .contact-form { gap: 18px; }
    .form-input, .form-textarea, .form-select { padding: 12px 14px; font-size: 0.92rem; }
    .form-submit { padding: 14px 32px; font-size: 0.88rem; }
    .form-label { font-size: 0.82rem; }

    /* Spec table */
    .spec-table th, .spec-table td { padding: 10px 12px; font-size: 0.88rem; }

    /* Equipment */
    .equip-grid { grid-template-columns: 1fr !important; }

    /* Legal content */
    .legal-content { padding: 0 8px; }
    .legal-content h2 { font-size: 1rem; }
    .legal-content p, .legal-content li { font-size: 0.85rem; }

    /* Program cards */
    .program-detail { padding: 28px 22px; }
    .program-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .program-title { font-size: 1.2rem; }
    .program-body { font-size: 0.9rem; line-height: 1.8; }
    .program-features { grid-template-columns: 1fr; }

    /* Faq */
    .faq-list summary { font-size: 0.95rem; }
    .faq-list p { font-size: 0.88rem; padding-left: 0; }

    /* Access */
    .access-notify { padding: 26px 22px; }
    .access-notify p { font-size: 0.88rem; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center;
    }
    .footer-brand { text-align: center; }
    .footer-brand p { font-size: 0.85rem; }
    .footer-sns { justify-content: center; }
    .footer-col { text-align: center; }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }
    .site-footer { padding: 50px 20px 25px; }

    /* Buttons general */
    .cf-btn, .cta-btn { padding: 12px 28px; font-size: 0.82rem; letter-spacing: 0.12em; }
    .cf-btn.join-btn { font-size: 0.95rem; padding: 15px 36px; }

    /* Radar chart */
    .radar-header { flex-direction: column; align-items: center; gap: 12px; }
    .radar-legend { font-size: 0.72rem; }
    .canvas-wrap { aspect-ratio: 1 / 0.85; }

    /* Vital grid */
    .vital-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .vital-item { padding: 22px 18px; }
    .vital-item h4 { font-size: 1rem; }

    /* Page crumb */
    .page-crumb-trail { letter-spacing: 0.12em; }
    .page-main { padding: 100px 16px 60px; }
    .page-main section { padding: 40px 0; }

    /* Empathy bridge */
    .empathy-bridge { font-size: 1rem; padding: 0 12px; }

    /* Sec header */
    .sec-header { padding: 0 8px; margin-bottom: 20px; }

    /* Init fee, campaign banner */
    .init-fee-row { padding: 16px 18px; }
    .init-fee-label { font-size: 0.85rem; }
    .init-fee-val { font-size: 1.3rem; }
    .campaign-banner { padding: 24px 22px; }
    .campaign-banner h3 { font-size: 1rem; }
    .campaign-banner p { font-size: 0.88rem; }

    /* Card head red */
    .card { padding: 26px 22px; }
    .card h3 { font-size: 1rem; }
    .card p { font-size: 0.88rem; }
}

/* --- Small mobile (≤ 400px) --- */
@media (max-width: 400px) {
    section { padding: 50px 0; }
    .container { padding: 0 14px; }
    .ui-wrapper { padding: 0 14px; }
    .glass-panel { padding: 24px 18px; }
    .sec-title { font-size: 1.4rem; }
    .interface-header { padding: 12px 14px !important; }
    .logo-img { height: 20px; }
    .nav-cta-group { gap: 5px; }
    .mobile-nav-toggle { width: 30px; height: 30px; padding: 5px; }
    .mobile-nav-toggle span { width: 18px; }
    .nav-cta { margin-right: 5px !important; padding: 6px 10px !important; font-size: 0.62rem !important; letter-spacing: 0.03em !important; }
    .main-nav { top: 62px !important; }
    .cta-hero, .cta-ghost, .cf-btn { padding: 12px 20px; font-size: 0.78rem; }
    .apply-item { padding: 18px 10px; }
    .apply-item span { font-size: 0.82rem; }
    .apply-item small { font-size: 0.66rem; }
    .feat-title { font-size: 1.5rem; }
    .mission-heading { font-size: 1.7rem !important; }
    .cf-stats-row { grid-template-columns: 1fr !important; gap: 14px; }
    .cf-stat { text-align: center; }
    .footer-logo { height: 34px; }
    .boot-logo { height: 60px !important; }
}

/* ============================================================
   FOR YOUR GOAL（旧 FITNESS / ATHLETIC / CARE）— アイコンチップ
   ============================================================ */
.pillar-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 32px;
}
.pillar-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #ffffff;
    border: 1px solid var(--lt-border, rgba(10, 30, 80, 0.08));
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(10, 30, 80, 0.03);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pillar-chip:hover {
    transform: translateY(-2px);
    border-color: var(--neon-blue-strong, #00a8b5);
    box-shadow: 0 10px 26px rgba(0, 168, 181, 0.12);
}
.pillar-chip i {
    font-size: 1.05rem;
    color: var(--neon-blue-strong, #00a8b5);
}
.pillar-chip span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lt-text, #0a0f1e);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 640px) {
    .pillar-chips { gap: 8px; margin-top: 32px; }
    .pillar-chip { padding: 10px 16px; gap: 7px; }
    .pillar-chip i { font-size: 0.92rem; }
    .pillar-chip span { font-size: 0.78rem; white-space: normal; }
}

/* ========== PAGE SCROLL GUIDE ========== */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.scroll-guide {
    position: fixed;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 9px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(10, 30, 80, 0.08);
}

.scroll-guide-line {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 50%;
    width: 1px;
    background: rgba(10, 30, 80, 0.15);
    transform: translateX(-50%);
    z-index: 0;
}

.scroll-guide-dot {
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(10, 30, 80, 0.22);
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}

.scroll-guide-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--lt-text, #0a0f1e);
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(10, 30, 80, 0.12);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.scroll-guide-dot:hover,
.scroll-guide-dot:focus-visible {
    background: var(--neon-blue-strong, #00a8b5);
    transform: scale(1.3);
}
.scroll-guide-dot:hover::after,
.scroll-guide-dot:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.scroll-guide-dot.active {
    background: var(--neon-blue-strong, #00a8b5);
    transform: scale(1.5);
}

@media (max-width: 1100px) {
    .scroll-guide { display: none; }
}

/* ============================================================
   CUSTOM CYBER CURSOR（照準リング＋中心ドット。fine pointer端末のみ）
   ============================================================ */
body.cyber-cursor-active,
body.cyber-cursor-active a,
body.cyber-cursor-active button,
body.cyber-cursor-active input,
body.cyber-cursor-active textarea,
body.cyber-cursor-active select,
body.cyber-cursor-active summary,
body.cyber-cursor-active label,
body.cyber-cursor-active * {
    cursor: none !important;
}

#cyber-cursor-dot,
#cyber-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
}
#cyber-cursor-dot {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--neon-blue);
    box-shadow: 0 0 6px var(--neon-blue);
    transition: opacity 0.3s ease;
}
#cyber-cursor-ring {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1px solid rgba(0, 242, 255, 0.65);
    box-shadow: 0 0 12px rgba(0, 242, 255, 0.25);
    transition: opacity 0.3s ease, width 0.25s ease, height 0.25s ease,
        margin 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
body.cyber-cursor-active #cyber-cursor-dot,
body.cyber-cursor-active #cyber-cursor-ring {
    opacity: 1;
}
body.cyber-cursor-hover #cyber-cursor-ring {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-color: var(--neon-blue);
    background-color: rgba(0, 242, 255, 0.08);
}
body.cyber-cursor-down #cyber-cursor-ring {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    background-color: rgba(0, 242, 255, 0.22);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
    #cyber-cursor-dot,
    #cyber-cursor-ring {
        display: none;
    }
}