/* --- VARIABLES --- */
:root {
    /* Colors */
    --white: #ffffff;
    --light-gray: #f4f6f8;
    --dark-gray: #1a1e24;
    --deep-black: #05080a;
    
    --text-on-white: #111111;
    --text-on-dark: #e0f7fa;
    
    --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: #e0e0e0;
}
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;
}

/* #missionセクション通過中、JSがbodyに付与するクラス。
   ライトテーマ側のbody背景色（淡いグレー）を上書きし、
   点と線のパーティクル網がはっきり見えるよう本当に暗くする。 */
body.bg-void {
    background-color: #05080a !important;
    transition: background-color 0.8s ease;
}

/* --- 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.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

/* --- ナビゲーションメニューの新規スタイル --- */
.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: all 0.3s ease;
    position: relative;
    padding: 5px 0;
    color: #111 !important;
}

/* マウスを乗せたときのエフェクト（ネオンブルーに発光） */
.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.35s 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: #fff; }

/* --- 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;
}
.main-copy {
    font-family: var(--font-jp);
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: 0.01em;
}
.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; }
}

.hero-hud-corner {
    position: absolute; width: 26px; height: 26px; z-index: 5;
    border: 1px solid rgba(0,242,255,0.5);
    opacity: 0.8;
    pointer-events: none;
}
.hero-hud-corner.tl { top: 118px; left: 28px; border-right: none; border-bottom: none; }
.hero-hud-corner.tr { top: 118px; right: 28px; border-left: none; border-bottom: none; }
.hero-hud-corner.bl { bottom: 28px; left: 28px; border-right: none; border-top: none; }
.hero-hud-corner.br { bottom: 28px; right: 28px; border-left: none; border-top: none; }

/* ============================================================
   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: rgba(255,255,255,0.55);
    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: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
#hero .hero-sub-cf { color: rgba(230,240,245,0.85); }
#hero .hero-sub-cf strong { color: #fff; }
#hero .cta-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
#hero .cta-ghost::before, #hero .cta-ghost::after { background: 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 { background: #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;}

/* --- 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: #888; }
.price-card-sub { font-size: 0.8rem; color: #999; 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: #aaa; 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: #888; margin-left: 2px; }
.features { list-style: none; margin: 30px 0; text-align: left; font-size: 0.9rem; color: #ccc; }
.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);
}
/* clip-pathで切り落とした角の斜め線（border-boxとpadding-boxのズレをborder幅分補正） */
.cta-btn::before,
.cta-btn::after {
    content: '';
    position: absolute;
    width: 14.2px;
    height: 1px;
    background: var(--neon-blue);
    transform-origin: 0 0;
    pointer-events: none;
}
.cta-btn::before { left: -1px; top: 9px; transform: rotate(-45deg); }
.cta-btn::after { left: calc(100% - 9px); top: calc(100% + 1px); transform: rotate(-45deg); }
.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 { background: #000; }
.init-fee { margin-top: 40px; }
.init-fee-row {
    display: flex; align-items: baseline; 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: #aaa; 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: #888; 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 {
    padding: 100px 5%;
}

.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 --- */
.faq-list details { margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 20px; }
.faq-list summary { cursor: pointer; font-weight: bold; font-size: 1.1rem; outline: none; list-style: none; }
.faq-list p { margin-top: 15px; color: #aaa; 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 --- */
.hex-frame {
    --hex-line-color: #333;
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
    border: 1px solid #333;
}
/* clip-pathで切り落とした角の斜め線。%指定の切り欠きなのでrotateではなく
   corner-to-cornerのlinear-gradientを使い、縦横比に関わらず正確な対角線にする */
.hex-frame::before,
.hex-frame::after {
    content: '';
    position: absolute;
    width: 10%;
    height: 10%;
    pointer-events: none;
    background: linear-gradient(to top right,
        transparent calc(50% - 0.5px),
        var(--hex-line-color) calc(50% - 0.5px),
        var(--hex-line-color) calc(50% + 0.5px),
        transparent calc(50% + 0.5px));
}
.hex-frame::before { top: 0; left: 0; }
.hex-frame::after { bottom: 0; right: 0; }

.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: #ccc;
    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 { opacity: 0; transform: translateY(40px); transition: 1s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@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; 
    clip-path: polygon(5% 0, 100% 0, 100% 90%, 95% 100%, 0 100%, 0 10%);
}

.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: 20px;
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
}
.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;
    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);
}
/* clip-pathで切り落とした角にはborderが描かれないため、斜め線を別途重ねる */
.cf-btn::before,
.cf-btn::after {
    content: '';
    position: absolute;
    width: 14.2px;
    height: 1px;
    background: var(--neon-blue);
    transform-origin: 0 0;
    pointer-events: none;
}
/* position:absolute の基準は border ではなく padding の内側になるため、
   border幅(1px)分だけ座標を外側へ補正してclip-pathの角の座標と一致させる */
.cf-btn::before { left: -1px; top: 9px; transform: rotate(-45deg); }
.cf-btn::after { left: calc(100% - 9px); top: calc(100% + 1px); transform: rotate(-45deg); }
.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 { background: #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: #fff;
    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: #aaa;
    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: #fff; box-shadow: 0 0 22px rgba(0,242,255,0.6); transform: translateY(-2px); }

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

/* --- 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; }
.hero-cta-area {
    margin-top: 38px;
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.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);
}
.cta-hero::before, .cta-hero::after,
.cta-ghost::before, .cta-ghost::after {
    content: '';
    position: absolute;
    height: 1px;
    transform-origin: 0 0;
    pointer-events: none;
}
.cta-hero::before, .cta-hero::after { width: 14.2px; background: var(--neon-blue); }
.cta-hero::before { left: -1px; top: 9px; transform: rotate(-45deg); }
.cta-hero::after { left: calc(100% - 9px); top: calc(100% + 1px); transform: rotate(-45deg); }
.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 { background: #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, .cta-ghost::after { width: 12.7px; background: rgba(0,0,0,0.2); }
.cta-ghost::before { left: -1px; top: 8px; transform: rotate(-45deg); }
.cta-ghost::after { left: calc(100% - 8px); top: calc(100% + 1px); transform: rotate(-45deg); }
.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 { background: #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; }

/* --- VOICE / TESTIMONIALS --- */
.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
    margin-top: 50px;
}
.voice-card {
    padding: 36px 30px;
    border-top: 3px solid var(--neon-blue);
    transition: 0.3s;
}
.voice-card:hover { transform: translateY(-6px); box-shadow: 0 0 26px rgba(0,242,255,0.12); }
.voice-stars { color: var(--neon-blue); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: 16px; }
.voice-text { color: #ddd; font-size: 0.98rem; line-height: 1.85; margin-bottom: 22px; }
.voice-author { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; }
.va-name { color: #fff; font-weight: 700; font-size: 0.95rem; }
.va-meta { color: #888; font-size: 0.8rem; margin-top: 2px; }

/* --- 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: #fff; 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-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: #fff;
    font-size: 1.02rem;
    margin-bottom: 12px;
    line-height: 1.6;
    font-weight: 700;
}
.aud-card p {
    color: #aaa;
    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;
    transition: 0.3s;
}
.process-step:hover {
    transform: translateX(4px);
    border-color: var(--neon-blue);
    box-shadow: 0 0 24px rgba(0,242,255,0.1);
}
.ps-num {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.ps-num .hud-ring { position: absolute; top: 0; left: 0; }
.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: #fff;
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 700;
}
.ps-body p {
    color: #aaa;
    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: #888;
    margin-bottom: 12px;
    font-family: var(--font-en);
    font-weight: 700;
}
.access-card p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
.access-meta {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: #888;
}
.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: #ccc; line-height: 1.85; }
.access-notify strong { color: #fff; font-size: 1.05rem; }
.access-notify-sub { font-size: 0.88rem; color: #888 !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: #fff;
    font-size: 1.15rem;
    margin: 4px 0 10px;
    font-weight: 700;
}
.fh-content p {
    color: #bbb;
    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: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}
.page-crumb-trail a:hover { color: var(--neon-blue); }
.page-crumb-sep { color: rgba(255,255,255,0.25); }
.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; }

/* コンテンツセクション見出し */
.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: 30px 0 14px;
    color: #fff;
}
body[data-theme="white"] .content-h3 { color: #111; }
.content-p {
    font-size: 1rem;
    line-height: 2;
    color: #444;
    margin-bottom: 20px;
}
body[data-theme="dark"] .content-p {}
.content-lead {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #333;
    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: #4a6a8a;
    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: #6a8aaa; 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: #ccc;
    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: #fff;
    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: #888; 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: #888; margin-bottom: 10px; }
.contact-info-card p { color: #fff; font-size: 0.95rem; line-height: 1.6; margin: 0; }
.contact-info-card a { color: var(--neon-blue); text-decoration: none; }

/* 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: #fff; 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: #fff; 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: #666; 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;
    transition: 0.3s;
}
.program-detail:hover { border-color: rgba(0,242,255,0.35); box-shadow: 0 0 30px rgba(0,242,255,0.06); }
.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: #fff; 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: #bbb; 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: #ccc; 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: #888;
    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: #999; 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: #aaa; text-decoration: none; font-size: 0.85rem; transition: 0.2s; }
.footer-col a:hover { color: var(--neon-blue); }
.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: #666;
    letter-spacing: 0.1em;
}
.footer-sns { display: flex; gap: 16px; }
.footer-sns a { color: #888; 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; }
}

/* ============================================================
   LIGHT THEME OVERRIDE (drtraining.jp inspired)
   全体を白基調に反転。ネオン青はアクセントとして保持
   ============================================================ */

/* Color tokens */
:root {
    --lt-bg:        #ffffff;
    --lt-bg-alt:    #f7f9fc;
    --lt-bg-blue:   #f0f7fc;
    --lt-text:      #0a0f1e;
    --lt-text-sub:  #4a5568;
    --lt-text-mute: #6b7280;
    --lt-border:    rgba(10, 30, 80, 0.08);
    --lt-border-strong: rgba(10, 30, 80, 0.14);
    --neon-blue-strong: #00a8b5; /* readable neon variant */
}

/* Body & themes → all light */
body { background-color: var(--lt-bg); color: var(--lt-text); }
body[data-theme="white"]  { background-color: var(--lt-bg); color: var(--lt-text); }
body[data-theme="alert"]  { background-color: var(--lt-bg-alt); color: var(--lt-text); }
body[data-theme="liquid"] { background-color: var(--lt-bg-blue); color: var(--lt-text); }
body[data-theme="dark"]   { background-color: var(--lt-bg-alt); color: var(--lt-text); }

/* Ambient bg / canvas — very subtle on light */
body[data-theme="dark"] #ambient-bg,
body[data-theme="liquid"] #ambient-bg {
    background: radial-gradient(circle at center, rgba(0,242,255,0.03) 0%, transparent 70%);
}
#bio-canvas { opacity: 0.55; }

/* Header stays white with subtle shadow */
.interface-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--lt-border);
}
.main-nav a { color: var(--lt-text) !important; }
.main-nav a:hover { color: var(--neon-blue-strong); text-shadow: none; }
.main-nav a::after { background-color: var(--neon-blue-strong); }
.main-nav a.active { color: var(--neon-blue-strong) !important; }

/* ヒーロー写真に重なっている間だけ、ヘッダーを透過＋白文字に */
.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: #fff !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;
}

/* Glass panels → white cards */
.glass-panel {
    border: 1px solid var(--lt-border);
    background: #ffffff;
}
.glass-panel.dark {
    background: #ffffff;
    border: 1px solid var(--lt-border);
    box-shadow: 0 20px 60px rgba(10, 30, 80, 0.06);
    color: var(--lt-text);
}
.glass-panel.light {
    background: var(--lt-bg-alt);
    box-shadow: 0 12px 40px rgba(10, 30, 80, 0.04);
}

/* All text inside dark panels → dark */
.glass-panel.dark h1, .glass-panel.dark h2, .glass-panel.dark h3,
.glass-panel.dark h4, .glass-panel.dark h5, .glass-panel.dark strong { color: var(--lt-text); }
.glass-panel.dark p, .glass-panel.dark li, .glass-panel.dark span:not(.text-neon) { color: var(--lt-text-sub); }

/* Neon text → readable dark cyan on light bg */
.text-neon {
    color: var(--neon-blue-strong);
    text-shadow: none;
    font-weight: 600;
}

/* Typography colors on all sections */
.sec-title, .content-h2, .content-h3, .feat-title, .main-copy { color: var(--lt-text); }
.sec-num { background: var(--neon-blue-strong); color: #fff; box-shadow: 0 0 16px rgba(0,168,181,0.25); margin-bottom: 10px; }
.sec-num::before { background: #fff; }
.sec-num::after { border-color: rgba(255,255,255,0.7); }
.sec-desc { color: var(--lt-text-sub); }
.content-p, .content-lead { color: var(--lt-text-sub); }

/* Hero */
.hero-sub-cf { color: var(--lt-text-sub); }
.hero-sub-cf strong { color: var(--lt-text); }
.scroll-indicator::after { background: linear-gradient(to bottom, var(--lt-text-mute), transparent); }
.cta-hero { background: var(--lt-text); border-color: var(--lt-text); color: #fff; }
.cta-hero::before, .cta-hero::after { background: var(--lt-text); }
.cta-hero:hover { background: var(--neon-blue-strong); border-color: var(--neon-blue-strong); color: #fff; box-shadow: 0 8px 24px rgba(0, 168, 181, 0.3); }
.cta-hero:hover::before, .cta-hero:hover::after { background: #fff; }
.cta-ghost { color: var(--lt-text); border-color: var(--lt-border-strong); }
.cta-ghost::before, .cta-ghost::after { background: var(--lt-border-strong); }
.cta-ghost:hover { background: var(--lt-bg-alt); border-color: var(--lt-text); }
.cta-ghost:hover::before, .cta-ghost:hover::after { background: var(--lt-text); }

/* Nav CTA */
.nav-cta {
    background: var(--lt-text);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.nav-cta:hover { background: var(--neon-blue-strong); box-shadow: 0 6px 20px rgba(0,168,181,0.35); }

/* Cards & panels — light versions */
.aud-card { background: #ffffff; border: 1px solid var(--lt-border); box-shadow: 0 12px 40px rgba(10,30,80,0.04); }
.aud-card h3 { color: var(--lt-text); }
.aud-card p { color: var(--lt-text-sub); }
.aud-icon { color: var(--neon-blue-strong); }

/* HUDリング（ヒーロー上のものを除く）— 読みやすい濃いシアンに */
.hud-ring:not(.hero-hud-ring) { border-color: rgba(0,168,181,0.35); }
.hud-ring:not(.hero-hud-ring)::before {
    border-color: rgba(0,168,181,0.16);
    border-top-color: rgba(0,168,181,0.85);
    border-right-color: rgba(0,168,181,0.85);
}
.hud-ring:not(.hero-hud-ring)::after {
    background: var(--neon-blue-strong);
    box-shadow: 0 0 6px var(--neon-blue-strong);
}

.diff-card { background: #ffffff; border-top: 2px solid var(--neon-blue-strong); box-shadow: 0 12px 40px rgba(10,30,80,0.04); }
.diff-card h4 { color: var(--lt-text); }
.diff-card p { color: var(--lt-text-sub); }
.diff-icon { color: var(--neon-blue-strong); }

.roadmap-step { background: #ffffff; border: 1px solid var(--lt-border); box-shadow: 0 12px 40px rgba(10,30,80,0.04); }
.roadmap-step h3 { color: var(--lt-text); }
.roadmap-step p { color: var(--lt-text-sub); }
.rm-date { color: var(--lt-text-mute); }
.roadmap-arrow { color: var(--neon-blue-strong); opacity: 0.6; }
.rm-status { background: rgba(0,168,181,0.08); border-color: rgba(0,168,181,0.3); color: var(--neon-blue-strong); }

.process-step { background: #ffffff; border: 1px solid var(--lt-border); }
.process-step .ps-body h3 { color: var(--lt-text); }
.process-step .ps-body p { color: var(--lt-text-sub); }

.voice-card { background: #ffffff; border-top: 3px solid var(--neon-blue-strong); box-shadow: 0 12px 40px rgba(10,30,80,0.04); }
.voice-card:hover { box-shadow: 0 20px 60px rgba(10,30,80,0.08); }
.voice-stars { color: var(--neon-blue-strong); }
.voice-text { color: var(--lt-text); font-weight: 500; }
.voice-author { border-top-color: var(--lt-border); }
.va-name { color: var(--lt-text); }
.va-meta { color: var(--lt-text-mute); }

/* Access cards */
.access-card { background: #ffffff; border-top: 2px solid var(--neon-blue-strong); box-shadow: 0 12px 40px rgba(10,30,80,0.04); }
.access-card:hover { box-shadow: 0 20px 60px rgba(10,30,80,0.08); }
.access-card h4 { color: var(--lt-text-mute); }
.access-card p { color: var(--lt-text); }
.access-icon { color: var(--neon-blue-strong); }
.access-meta { color: var(--lt-text-mute); }
.access-notify { background: rgba(0, 168, 181, 0.03); border-color: rgba(0, 168, 181, 0.25); }
.access-notify p { color: var(--lt-text-sub); }
.access-notify strong { color: var(--lt-text); }

/* Contact info cards */
.contact-info-card { background: #ffffff; border-color: var(--lt-border); }
.contact-info-card:hover { border-color: var(--neon-blue-strong); background: rgba(0,168,181,0.03); }
.contact-info-card p { color: var(--lt-text); }

/* Contact form */
.form-label { color: var(--lt-text); }
.form-input, .form-textarea, .form-select {
    background: #ffffff;
    border: 1px solid var(--lt-border-strong);
    color: var(--lt-text);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--neon-blue-strong);
    box-shadow: 0 0 0 4px rgba(0,168,181,0.08);
}
.form-submit { background: var(--lt-text); color: #fff; }
.form-submit:hover { background: var(--neon-blue-strong); box-shadow: 0 8px 24px rgba(0,168,181,0.3); }
.form-note { color: var(--lt-text-mute); }

/* Trainer */
.hex-frame { border-color: var(--lt-border); --hex-line-color: var(--lt-border-strong); }
.t-header { border-bottom-color: var(--lt-border); }
.t-name { color: var(--lt-text); }
.t-message { color: var(--lt-text); font-style: italic; }
.t-desc { color: var(--lt-text-sub); }
.t-specs { background: var(--lt-bg-alt); }
.spec-row { border-bottom-color: var(--lt-border); }
.spec-row .label { color: var(--lt-text-mute); }
.spec-row .val { color: var(--neon-blue-strong); }

/* Comparison table */
.comparison-table { background: #ffffff; border: 1px solid var(--lt-border); }
.tbl-row { border-bottom-color: var(--lt-border); }
.tbl-row.header { background: var(--lt-bg-alt); color: var(--lt-text); }
.col.highlight { background: rgba(0,168,181,0.04); border-color: rgba(0,168,181,0.15); }

/* Campaign panel */
.cf-panel { background: #ffffff; }
.cf-header h3 { color: var(--lt-text); }
.cf-header p { color: var(--lt-text-sub); }
.cf-stat-val { color: var(--lt-text); }
.cf-stat-label { color: var(--lt-text-mute); }
.cf-unit { color: var(--lt-text-mute); }
.cf-bar-wrap { background: rgba(0,168,181,0.08); }
.cp-tag { background: rgba(0,168,181,0.08); color: var(--neon-blue-strong); }
.cp-tag-achieved { background: var(--neon-blue-strong); color: #fff !important; }
.cf-note { color: var(--lt-text-mute); }
.cf-btn { color: var(--neon-blue-strong); border-color: var(--neon-blue-strong); }
.cf-btn::before, .cf-btn::after { background: var(--neon-blue-strong); }
.cf-btn:hover { background: var(--neon-blue-strong); color: #fff; }
.cf-btn:hover::before, .cf-btn:hover::after { background: #fff; }
.campaign-banner { background: #ffffff; border: 2px solid var(--neon-blue-strong); box-shadow: 0 12px 40px rgba(0,168,181,0.1); }
.campaign-banner h3, .campaign-banner p { color: var(--lt-text); }

/* Pricing cards */
.price-card { background: #ffffff; border: 1px solid var(--lt-border); color: var(--lt-text); }
.price-card.featured { background: #ffffff; border-color: var(--neon-blue-strong); box-shadow: 0 20px 60px rgba(0,168,181,0.15); }
.price-val { color: var(--lt-text); }
.tax { color: var(--lt-text-mute); }
.price-freq { color: var(--lt-text-sub); }
.price-card-sub { color: var(--lt-text-mute); }
.price-tier { border-color: var(--lt-border); background: rgba(0,168,181,0.04); }
.price-tier-label { color: var(--lt-text-mute); }
.price-tier-val { color: var(--neon-blue-strong); }
.features li { border-bottom-color: var(--lt-border); color: var(--lt-text-sub); }
.badge { background: var(--neon-blue-strong); color: #fff; }
.cta-btn { color: var(--neon-blue-strong); border-color: var(--neon-blue-strong); background: transparent; }
.cta-btn::before, .cta-btn::after { background: var(--neon-blue-strong); }
.cta-btn:hover { background: var(--neon-blue-strong); color: #fff; }
.cta-btn:hover::before, .cta-btn:hover::after { background: #fff; }
.init-fee-row { border-color: var(--lt-border); background: #fff }
.init-fee-label { color: var(--lt-text-mute); }
.init-fee-val { color: var(--neon-blue-strong); }
.init-fee-val small { color: var(--lt-text-mute); }
.init-fee-plus { color: var(--neon-blue-strong); }

/* Feature full-screen sections */
body[data-theme="dark"] .feat-num-bg { color: rgba(10, 30, 80, 0.04); }
.feat-tag { color: var(--neon-blue-strong); border-color: rgba(0,168,181,0.3); background: rgba(0,168,181,0.04); }
.feat-title { color: var(--lt-text); }
.feat-lead { color: var(--lt-text-sub); }
.feat-body p { color: var(--lt-text-sub); }
.feat-bullets li { color: var(--lt-text); border-bottom-color: var(--lt-border); }
.feat-bullets li i { background: rgba(0,168,181,0.1); color: var(--neon-blue-strong); }
.feat-highlight { background: rgba(0,168,181,0.03); border-color: rgba(0,168,181,0.2); box-shadow: 0 12px 40px rgba(0,168,181,0.05); }
.feat-highlight .fh-icon { background: rgba(0,168,181,0.1); color: var(--neon-blue-strong); }
.feat-highlight h3 { color: var(--lt-text); }
.feat-highlight p { color: var(--lt-text-sub); }
.feat-highlight .fh-label { color: var(--neon-blue-strong); }
.apply-item { background: rgba(0,168,181,0.03); border-color: var(--neon-blue-strong); }
.apply-item i { color: var(--neon-blue-strong); }
.apply-item span { color: var(--lt-text); }
.apply-item small { color: var(--lt-text-mute); }

/* Metrics / Radar */
.metric-intro h3 { color: var(--lt-text); }
.metric-intro p { color: var(--lt-text-sub); }
.vital-item { background: var(--lt-bg-alt); }
.vital-item h4 { color: var(--lt-text); }
.vital-item p { color: var(--lt-text-sub); }
.vital-icon { color: var(--neon-blue-strong); }
.radar-legend { color: var(--lt-text-mute); }
.dot.val-off { background: #bbb; border-color: #999; }
.dot.val-on { background: var(--neon-blue-strong); box-shadow: 0 0 8px var(--neon-blue-strong); }

/* Empathy alert cards on light bg */
body[data-theme="alert"] { background-color: var(--lt-bg-alt); }
.alert-card { background: #ffffff; border-top: 3px solid var(--neon-red); border-color: var(--lt-border); }
.alert-card h3 { color: var(--lt-text); }
.alert-card p { color: var(--lt-text-sub); }
.symptom, .card-head { color: var(--lt-text); }
.empathy-bridge { color: var(--lt-text); }
.empathy-bridge strong { color: var(--lt-text); }

/* FAQ */
.faq-list details { border-bottom-color: var(--lt-border); }
.faq-list summary { color: var(--lt-text); }
.faq-list summary::marker { color: var(--neon-blue-strong); }
.faq-list p { color: var(--lt-text-sub); }

/* Join */
.join-lead { color: var(--lt-text-sub); }
.join-progress-meta { color: var(--lt-text-sub); }

/* Page crumb → white */
.page-crumb { border-bottom-color: var(--lt-border); }
.page-crumb-trail::before { background: var(--neon-blue-strong); box-shadow: 0 0 8px var(--neon-blue-strong); }
.page-crumb-trail a { color: var(--lt-text-mute); }
.page-crumb-trail a:hover { color: var(--neon-blue-strong); }
.page-crumb-sep { color: var(--lt-border-strong); }
.page-crumb-current { background: var(--neon-blue-strong); color: #fff; }
.page-crumb-title { color: var(--lt-text); }

/* Equipment/table */
.spec-table th, .spec-table td { border-bottom-color: var(--lt-border); }
.spec-table th { color: var(--neon-blue-strong); }
.spec-table td { color: var(--lt-text); }
.equip-item { background: rgba(0,168,181,0.03); border-left-color: var(--neon-blue-strong); }
.equip-item i { color: var(--neon-blue-strong); }
.equip-item .eq-name { color: var(--lt-text); }
.equip-item .eq-note { color: var(--lt-text-mute); }

/* Program cards */
.program-detail { background: #ffffff; border-color: var(--lt-border); box-shadow: 0 12px 40px rgba(10,30,80,0.04); }
.program-detail:hover { border-color: var(--neon-blue-strong); box-shadow: 0 20px 60px rgba(0,168,181,0.1); }
.program-photo { border-color: var(--lt-border); }
.program-photo-tag { background: var(--neon-blue-strong); color: #fff; }
.program-icon { background: rgba(0,168,181,0.1); color: var(--neon-blue-strong); }
.program-title { color: var(--lt-text); }
.program-meta { color: var(--neon-blue-strong); }
.program-body { color: var(--lt-text-sub); }
.program-features li { color: var(--lt-text-sub); border-bottom-color: var(--lt-border); }
.program-features li i { color: var(--neon-blue-strong); }

/* Legal pages */
body[data-theme="white"] .legal-content { color: var(--lt-text-sub); }
body[data-theme="white"] .legal-content h2 { color: var(--neon-blue-strong); }
body[data-theme="white"] .legal-content h3 { color: var(--lt-text); }
body[data-theme="white"] .legal-content .last-updated { color: var(--lt-text-mute); }

/* Footer stays elegant dark? No, keep light per request */
.site-footer {
    background: var(--lt-bg-alt);
    border-top: 1px solid var(--lt-border);
    color: var(--lt-text-mute);
}
.site-footer .footer-brand p { color: var(--lt-text-sub); }
.site-footer .footer-logo { filter: none; opacity: 1; }
.footer-col h5 { color: var(--neon-blue-strong); }
.footer-col a { color: var(--lt-text-sub); }
.footer-col a:hover { color: var(--neon-blue-strong); }
.footer-bottom { color: var(--lt-text-mute); border-top-color: var(--lt-border); }
.footer-sns a { color: var(--lt-text-mute); }
.footer-sns a:hover { color: var(--neon-blue-strong); }
.footer-grid { border-bottom-color: var(--lt-border); }
footer.font-cyber { background: var(--lt-bg-alt); color: var(--lt-text-mute); border-top-color: var(--lt-border); }

/* Boot overlay – keep dark for opening drama */
/* (unchanged) */

/* Header should always be visible on light body regardless of hero JS */
.interface-header {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* But keep hero-triggered animation for home */
body[data-theme="white"] .interface-header:not(.is-visible) {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   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.35;
    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（見出し中央 + トレーナー写真 / ラボ紹介の2カラム）
   横画面いっぱいに広げ、通過中は body.bg-void（JS制御）で
   サイト背景そのものを暗くすることで、#bio-canvasの点と線が
   はっきり見えるようにする。セクション自体はごく薄いトーンのみ。
   ============================================================ */
#mission {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: rgba(4, 9, 14, 0.3);
    padding: 90px 24px;
}
.mission-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.mission-heading {
    color: #fff;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}
.mission-trainer { text-align: center; }
.mission-trainer .hex-frame { border-color: rgba(0, 242, 255, 0.25); --hex-line-color: rgba(0, 242, 255, 0.5); }
.mission-trainer .mission-cta,
.mission-about .mission-cta { margin-top: 24px; }
.mission-lead {
    color: rgba(255,255,255,0.78);
    font-size: 0.95rem;
    line-height: 2;
}
.mission-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 {
    content: '';
    position: absolute;
    width: 12.7px;
    height: 1px;
    background: var(--neon-blue);
    transform-origin: 0 0;
    pointer-events: none;
}
.mission-cta::before { left: -1px; top: 8px; transform: rotate(-45deg); }
.mission-cta::after { left: calc(100% - 8px); top: calc(100% + 1px); transform: rotate(-45deg); }
.mission-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(1.5rem, 6vw, 2rem); }
}

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

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

/* --- Tablet (≤ 968px) --- */
@media (max-width: 968px) {
    /* 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));
    }

    /* Hamburger button */
    .mobile-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: transparent;
        border: none;
        width: 38px;
        height: 38px;
        cursor: pointer;
        padding: 8px;
        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 overlay */
    .main-nav {
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 40px 24px;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, transform 0.35s ease, visibility 0s 0.35s;
        z-index: 9999;
        overflow-y: auto;
    }
    .interface-header.nav-open .main-nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, transform 0.35s ease;
    }
    .main-nav ul {
        flex-direction: column !important;
        gap: 4px !important;
        align-items: stretch !important;
    }
    .main-nav a {
        font-size: 1.05rem !important;
        padding: 18px 20px !important;
        display: block;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .main-nav a::after { display: none; }

    /* Backdrop（薄暗くはせず、ぼかしのみ） */
    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        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;
        z-index: 9998;
    }
    body.nav-open .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease;
    }

    /* nav-cta becomes smaller and stays visible next to hamburger */
    .nav-cta {
        margin-right: 12px !important;
        padding: 8px 16px !important;
        font-size: 0.72rem !important;
    }

    body.nav-open {
        overflow: hidden;
    }

    /* Header spacing for content */
    section:first-of-type { padding-top: 90px; }
    .page-main { padding: 108px 20px 70px; }

    /* 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 */
    .adv-grid, .audience-grid, .diff-highlights, .voice-grid, .access-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .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; }
}

/* --- 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 */
    #hero { padding: 110px 18px 60px; }
    .main-copy { font-size: clamp(2.2rem, 9vw, 3.2rem) !important; line-height: 1.2; letter-spacing: 0.01em; }
    .hero-sub-cf { font-size: 0.9rem; }
    .hero-cta-area { flex-direction: column; width: 100%; gap: 10px; }
    .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-corner.tl, .hero-hud-corner.tr, .hero-hud-corner.bl { display: none; }
    .hero-hud-corner { width: 18px; height: 18px; }
    .hero-hud-corner.br { bottom: 18px; right: 18px; }
    .hero-slide-dots { top: 90px; right: 18px; bottom: auto; }
    .hero-slide-dot { width: 16px; }

    /* Mission section */
    .mission-heading { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; line-height: 1.5 !important; }
    .mission-lead { font-size: 0.85rem !important; line-height: 1.85 !important; }

    /* All grids single column */
    .adv-grid, .audience-grid, .diff-highlights,
    .voice-grid, .access-grid,
    .feat-applies, .contact-info-grid, .sample-gallery {
        grid-template-columns: 1fr !important;
    }
    .adv-card, .aud-card, .diff-card, .voice-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; }
    .price-card { 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; }
    .main-copy { font-size: 2rem !important; }
    .interface-header { padding: 12px 16px !important; }
    .logo-img { height: 24px; }
    .mobile-nav-toggle { width: 34px; height: 34px; padding: 6px; }
    .mobile-nav-toggle span { width: 20px; }
    .nav-cta { padding: 6px 12px !important; font-size: 0.66rem !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.3rem !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;
    }
}