/* ============================================================
YAOYOROA — components.css / 共有コンポーネント実体
------------------------------------------------------------
契約: phase6_kit.md (E) クラス語彙の正準名をそのまま実装。
確定デザイン: pattern-X-integrated-neoncity（夜のネオン未来都市）。
色・余白・フォント・モーションは tokens.css の var(--token) 経由を原則。
hero stage の精密な発光値のみハードコード例外（pattern-X の現行値を維持）。
読み込み順: tokens.css -> base.css -> components.css
状態は全インタラクティブ要素で
default / hover / active / focus-visible / disabled を定義。
============================================================ */
/* ============================================================
1. ブランドワードマーク（Chrome メタリック・header/footer 共用）
============================================================ */
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.brand-mark.wordmark {
position: relative;
display: inline-block;
font-family: var(--font-orbitron);
font-weight: 900;
font-size: 18px;
letter-spacing: 0.20em;
line-height: 1;
/* Chrome metallic gradient face */
background: linear-gradient(180deg,
#FFFFFF 0%, #EAF6FF 18%, #B9CFFF 40%, #8DBEFF 52%,
#5B6CFF 64%, #9FB4FF 80%, #EAF6FF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
filter:
drop-shadow(0 1px 0 rgba(5, 7, 15, .9))
drop-shadow(0 0 8px rgba(91, 108, 255, .55))
drop-shadow(0 0 14px rgba(45, 226, 230, .32));
}
/* reflective sheen sweep over the chrome faces */
.brand-mark.wordmark[data-t]::before {
content: attr(data-t);
position: absolute;
left: 0;
top: 0;
font: inherit;
letter-spacing: inherit;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 60%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
mix-blend-mode: screen;
opacity: .7;
}
.brand-kanji {
font-family: var(--font-mincho);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.42em;
color: var(--cyan-hi);
}
.brand-kanji b {
color: var(--mag-hi);
text-shadow: 0 0 10px rgba(255, 45, 149, .7);
}
/* header brand = シンボルロゴ（ネオンの「A」）＋ ワードマーク列のロックアップ */
.site-header .brand { flex-direction: row; align-items: center; gap: var(--space-2xs); }
.brand-logo { display: block; height: clamp(28px, 3.4vw, 36px); width: auto; flex: 0 0 auto; filter: drop-shadow(0 0 7px rgba(45, 226, 230, .40)); }
.brand-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.05; }
/* ============================================================
2. HEADER — sticky HUD（Chrome ワードマーク + ナビ + CTA + hamburger）
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
min-height: var(--nav-height);
padding: var(--nav-pad-y) var(--nav-pad-x);
background: var(--nav-bg);
-webkit-backdrop-filter: var(--nav-blur);
backdrop-filter: var(--nav-blur);
border-bottom: 1px solid var(--nav-border);
}
/* neon underline beneath the header bar */
.site-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), var(--mag), transparent);
opacity: .55;
}
/* ---- nav list ---- */
.global-nav {
display: flex;
align-items: center;
position: relative;
}
.nav-list {
display: flex;
align-items: center;
gap: clamp(12px, 1.7vw, 26px);
margin: 0;
padding: 0;
}
.nav-link {
position: relative;
font-family: var(--font-chakra);
font-size: 13px;
font-weight: 500;
letter-spacing: var(--tracking-wide);
color: var(--ink-soft);
padding: 6px 0;
transition: color var(--duration-fast) var(--ease);
}
/* hover/active underline — cyan->mag neon sweep */
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 1px;
background: linear-gradient(90deg, var(--cyan), var(--mag));
box-shadow: 0 0 8px rgba(45, 226, 230, .8);
transition: width var(--duration-fast) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { width: 100%; }
.nav-link:active { color: var(--cyan-hi); }
.nav-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 2px; }
/* current page — underline lit */
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after { width: 100%; }
/* the header CTA is a primary button — suppress the underline */
.nav-cta.btn::after,
.nav-link.nav-cta::after { display: none; }
/* ヘッダー内CTA（無料相談・AI活用診断）は2つ並ぶので一回りコンパクトに（余白・文字を詰めて横幅を確保） */
.nav-list .nav-cta.btn { padding: 9px 15px; font-size: var(--text-sm); gap: 6px; }
.nav-list .nav-cta.btn .arr { margin-left: 1px; }
/* ---- hamburger toggle (SP only) ---- */
.nav-toggle {
display: none;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-chakra);
font-weight: 700;
font-size: 11px;
letter-spacing: var(--tracking-wider);
color: var(--cyan-hi);
padding: 9px 14px;
border-radius: var(--radius-md);
background: rgba(45, 226, 230, .06);
border: 1px solid var(--hair-cyan);
transition: background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.nav-toggle:hover { background: rgba(45, 226, 230, .12); box-shadow: 0 0 16px rgba(45, 226, 230, .25); }
.nav-toggle:active { background: rgba(45, 226, 230, .18); }
.nav-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* three-bar icon: middle bar = the element bg, top/bottom = pseudo-elements */
.nav-toggle-bars {
position: relative;
display: block;
width: 18px;
height: 12px;
flex: none;
background: linear-gradient(transparent 5px, var(--cyan-hi) 5px, var(--cyan-hi) 7px, transparent 7px);
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--cyan-hi);
box-shadow: 0 0 6px rgba(45, 226, 230, .6);
transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { bottom: 0; }
/* open state -> X (middle bar fades, top/bottom rotate) */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { bottom: 5px; transform: rotate(-45deg); }
.nav-toggle-label { line-height: 1; }
/* ============================================================
3. BUTTONS — .btn / .btn-primary / .btn-ghost（5状態）
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
font-family: var(--btn-font);
font-weight: var(--btn-weight);
font-size: var(--btn-size);
letter-spacing: var(--btn-tracking);
line-height: 1.2;
padding: var(--btn-pad-y) var(--btn-pad-x);
border-radius: var(--btn-radius);
cursor: pointer;
text-align: center;
border: 1px solid transparent;
transition:
transform var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease),
background var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease);
}
.btn .arr {
display: inline-block;
transition: transform var(--duration-fast) var(--ease);
}
/* ---- primary：朱/マゼンタ系グロウ + スイープ光沢 ---- */
.btn-primary {
position: relative;
overflow: hidden;
color: var(--white);
background: linear-gradient(135deg, var(--mag) 0%, var(--blue) 58%, var(--aka) 132%);
border-color: rgba(255, 111, 182, .5);
box-shadow:
0 0 22px rgba(255, 45, 149, .42),
var(--glow-soft),
inset 0 0 12px rgba(255, 255, 255, .18);
}
.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
transform: skewX(-18deg);
transition: left var(--duration-base) var(--ease);
pointer-events: none;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 0 34px rgba(255, 45, 149, .68),
0 14px 38px rgba(5, 7, 15, .55),
inset 0 0 14px rgba(255, 255, 255, .28);
}
.btn-primary:hover::before { left: 120%; }
.btn-primary:hover .arr { transform: translateX(4px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 0 18px rgba(255, 45, 149, .5), inset 0 0 12px rgba(255, 255, 255, .2); }
.btn-primary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* ---- ghost：シアン罫の発光ゴーストボタン ---- */
.btn-ghost {
color: var(--cyan-hi);
background: rgba(45, 226, 230, .05);
border: 1px solid var(--hair-cyan);
box-shadow: inset 0 0 14px rgba(45, 226, 230, .08);
}
.btn-ghost:hover {
transform: translateY(-2px);
background: rgba(45, 226, 230, .12);
border-color: var(--cyan);
color: var(--cyan-lit);
box-shadow: 0 0 20px rgba(45, 226, 230, .3), inset 0 0 16px rgba(45, 226, 230, .14);
}
.btn-ghost:hover .arr { transform: translateX(4px); }
.btn-ghost:active { transform: translateY(0); background: rgba(45, 226, 230, .18); }
.btn-ghost:focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; }
/* ---- diag：AI活用診断 用。無料相談(btn-primary=マゼンタ)と同格の存在感を、
ブルー→シアンのネオン・グラデ塗りで（作りは btn-primary と統一：グロー＋内側ハイライト＋シャインスイープ）。 */
.btn-diag {
position: relative;
overflow: hidden;
color: var(--white);
background: linear-gradient(120deg, var(--blue) 0%, var(--cyan) 145%);
border-color: rgba(45, 226, 230, .55);
box-shadow:
0 0 22px rgba(45, 226, 230, .38),
0 8px 26px rgba(5, 7, 15, .4),
inset 0 0 12px rgba(255, 255, 255, .18);
}
.btn-diag::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
transform: skewX(-18deg);
transition: left var(--duration-base) var(--ease);
pointer-events: none;
}
.btn-diag:hover {
transform: translateY(-2px);
box-shadow:
0 0 34px rgba(45, 226, 230, .6),
0 14px 38px rgba(5, 7, 15, .55),
inset 0 0 14px rgba(255, 255, 255, .26);
}
.btn-diag:hover::before { left: 120%; }
.btn-diag:hover .arr { transform: translateX(4px); }
.btn-diag:active { transform: translateY(0); box-shadow: 0 0 18px rgba(45, 226, 230, .5); }
.btn-diag:focus-visible { outline: 2px solid var(--mag); outline-offset: 3px; }
/* ---- disabled（両系統共通）---- */
.btn:disabled,
.btn[aria-disabled="true"],
.btn[disabled] {
cursor: not-allowed;
opacity: .42;
transform: none;
box-shadow: none;
filter: grayscale(.35);
pointer-events: none;
}
/* small / large size modifiers (optional) */
.btn--sm { padding: 10px 18px; font-size: var(--text-sm); }
.btn--lg { padding: 18px 32px; font-size: var(--text-lg); }
/* ============================================================
4. SECTION — .eyebrow / .section-title / .lead
============================================================ */
.section-inner {
position: relative;
z-index: var(--z-content);
width: 100%;
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* eyebrow — neon HUD micro-label */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-mono);
font-size: var(--text-base);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--cyan-hi);
text-shadow: 0 0 8px rgba(45, 226, 230, .55);
margin-bottom: var(--space-sm);
}
.eyebrow::before {
content: "";
width: clamp(20px, 4vw, 40px);
height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan));
box-shadow: 0 0 8px var(--cyan);
flex: 0 0 auto;
}
/* magenta eyebrow variant */
.eyebrow--mag { color: var(--mag-hi); text-shadow: 0 0 8px rgba(255, 45, 149, .55); }
.eyebrow--mag::before { background: linear-gradient(90deg, transparent, var(--mag)); box-shadow: 0 0 8px var(--mag); }
.section-title {
font-family: var(--font-mincho);
font-weight: 900;
font-size: var(--text-3xl);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-normal);
color: var(--ink);
text-shadow: 0 2px 24px rgba(5, 7, 15, .6);
}
.section-title .em-cyan { color: var(--cyan-hi); text-shadow: 0 0 14px rgba(45, 226, 230, .5); }
.section-title .em-mag { color: var(--mag-hi); text-shadow: 0 0 14px rgba(255, 45, 149, .5); }
.section-title .em-aka { color: var(--mag-hi); text-shadow: 0 0 14px rgba(255, 45, 149, .42); }
.lead {
font-size: var(--text-lg);
line-height: var(--leading-normal);
color: var(--ink-soft);
max-width: 90ch; /* 60ch ×1.5 */
margin-top: var(--space-sm);
}
.lead b { color: var(--ink); font-weight: 700; }
.lead .hl { color: var(--cyan-hi); font-weight: 500; }
/* section head grouping helper */
.section-head { margin-bottom: var(--space-xl); text-align: center; } /* 既定で center 統一 */
.section-head .lead { margin-inline: auto; }
.section-head .eyebrow { justify-content: center; }
.section-head.is-center { text-align: center; } /* 後方互換（既定が center のため実質 no-op） */
.section-head.is-center .lead { margin-inline: auto; }
.section-head.is-center .eyebrow { justify-content: center; }
/* gold hairline divider */
.rule-gold {
border: 0;
height: 1px;
width: 64px;
margin: var(--space-md) 0;
background: linear-gradient(90deg, var(--kin), transparent);
box-shadow: var(--glow-gold);
}
.section-head .rule-gold { margin-inline: auto; }
/* ============================================================
5. CARDS — base + service / news / concept / role / branch
============================================================ */
.card {
position: relative;
display: flex;
flex-direction: column;
background: var(--card-bg);
border: var(--card-border);
border-radius: var(--card-radius);
padding: var(--card-pad);
box-shadow: var(--card-shadow);
transition:
transform var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease);
}
/* hover: lift (translateY only, NO rotate) + neon edge + glow */
.card:hover {
transform: translateY(var(--card-lift));
border-color: var(--hair-cyan);
box-shadow: var(--card-shadow-hover);
}
/* a whole-card link keeps the focus ring on the card */
a.card:focus-visible,
.card a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.card .card-title { font-size: var(--text-xl); font-weight: 900; line-height: 1.4; color: var(--ink); margin-bottom: var(--space-xs); }
.card p { color: var(--ink-soft); }
/* card action link (verb CTA) */
.card-link {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
margin-top: var(--space-sm);
font-family: var(--font-chakra);
font-weight: 600;
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
color: var(--cyan-hi);
transition: color var(--duration-fast) var(--ease);
}
.card-link .arr { transition: transform var(--duration-fast) var(--ease); }
.card-link:hover { color: var(--cyan-lit); }
.card:hover .card-link .arr,
.card-link:hover .arr { transform: translateX(4px); }
.card-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* ---- service card：番号/アイコン + タイトル + 説明 + 動詞リンク ---- */
.card-service .card-icon {
/* 数字は Bebas、日本語ラベルはサイト標準の和文へ（generic sans-serif フォールバックを避け字面を統一） */
font-family: "Bebas Neue", var(--font-body);
font-size: var(--text-3xl);
line-height: 1;
color: var(--cyan-hi);
text-shadow: 0 0 14px rgba(45, 226, 230, .5);
margin-bottom: var(--space-sm);
}
/* 成果/価格の一行：金＋グローは「ノイズ」になるため廃止。
新色を足さず、既存のシアン細罫言語（ghost ボタン/visual-slot と同系）に寄せた
控えめな縦罫 + 本文サブ色で、“意味は際立つが全体に馴染む”スペックラインにする。 */
.card-service .card-price {
align-self: flex-start; /* 内容幅に収め、行いっぱいに広げない */
margin-top: auto; /* カード下端へ寄せ、グリッドで底を揃える */
padding: 4px 0 4px 11px;
border-left: 2px solid var(--hair-gold); /* ゴールドの縦罫＝「成果/価格」の合図 */
font-family: var(--font-mono);
font-size: var(--text-base);
letter-spacing: var(--tracking-wide);
line-height: var(--leading-snug);
color: var(--kin-lit); /* ゴールド #FFE6A6（on --bg で AA を満たす明るめ金） */
text-shadow: 0 0 8px rgba(232, 195, 107, .7), 0 0 20px rgba(232, 195, 107, .45); /* 金グローを二重に重ねて強調 */
}
.card-service:hover .card-icon { color: var(--cyan-lit); }
/* (B) 業務AI：番号(card-icon)とタイトル(card-title)を同じ行に並べる */
.card-service .ct-row { display: flex; align-items: baseline; gap: var(--space-xs); margin-bottom: var(--space-2xs); }
.card-service .ct-row .card-icon { margin-bottom: 0; }
.card-service .ct-row .card-title { margin-bottom: 0; }
/* (C) 別事業サブ：内容の近いサービスを上辺アクセント色でグルーピング。
build=シアン（開発・実装系） / talent=マゼンタ（人材系） / global=ゴールド（海外展開系）。
.card は position:relative 済みのため ::before の上辺バーで色分けする（罫・影には干渉しない）。 */
.card-grid--compact .card.is-grp-build::before,
.card-grid--compact .card.is-grp-talent::before,
.card-grid--compact .card.is-grp-global::before {
content: "";
position: absolute;
inset: 0 0 auto 0; /* 上辺いっぱい */
height: 3px;
border-radius: var(--card-radius) var(--card-radius) 0 0;
pointer-events: none;
}
.card-grid--compact .card.is-grp-build::before { background: var(--cyan); box-shadow: 0 0 10px rgba(45, 226, 230, .55); }
.card-grid--compact .card.is-grp-talent::before { background: var(--mag); box-shadow: 0 0 10px rgba(255, 45, 149, .45); }
.card-grid--compact .card.is-grp-global::before { background: var(--kin); box-shadow: 0 0 10px rgba(232, 195, 107, .45); }
/* カードタイトルのグループ色は index.html の section-services 配色ブロックで指定。
インラインの位置ローテーション（nth-child）と同詳細度で衝突するため、配色は一箇所に集約。 */
/* ---- news card：time / category / title ---- */
.card-news .card-cat {
display: inline-block;
font-family: var(--font-chakra);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
color: var(--mag-hi);
padding: 3px 10px;
border: 1px solid var(--hair-mag);
border-radius: var(--radius-pill);
margin-bottom: var(--space-sm);
}
.card-news time {
display: block;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--ink-faint);
margin-bottom: var(--space-2xs);
}
.card-news .card-title { font-size: var(--text-lg); }
.card-news:hover { border-color: var(--hair-mag); box-shadow: 0 14px 40px rgba(5, 7, 15, .55), var(--glow-mag); }
/* ---- concept card：漢字グリフ + 本文 ---- */
.card-concept { align-items: flex-start; }
.card-concept .card-glyph {
font-family: var(--font-mincho);
font-weight: 900;
font-size: clamp(40px, 6vw, 68px);
line-height: 1;
color: var(--aka-hi);
text-shadow: 0 0 16px rgba(255, 59, 83, .6), 0 0 34px rgba(200, 16, 46, .3);
margin-bottom: var(--space-sm);
}
.card-concept .card-glyph.is-cyan { color: var(--cyan-hi); text-shadow: 0 0 16px rgba(45, 226, 230, .6); }
.card-concept .card-glyph.is-gold { color: var(--kin-lit); text-shadow: var(--glow-gold); }
/* ---- role card（採用）：職種名/雇用形態/要点 ---- */
.card-role .card-emp {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
color: var(--cyan-hi);
margin-bottom: var(--space-2xs);
}
.card-role .card-title { font-size: var(--text-xl); }
.card-role ul { list-style: none; margin-top: var(--space-sm); display: grid; gap: var(--space-2xs); }
.card-role li { position: relative; padding-left: 1.2em; color: var(--ink-soft); font-size: var(--text-sm); }
.card-role li::before { content: "›"; position: absolute; left: 0; color: var(--cyan); }
/* ---- branch card（拠点）：拠点名/住所/連絡 ---- */
.card-branch .card-title { font-size: var(--text-lg); }
.card-branch .card-addr,
.card-branch .card-tel {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--ink-faint);
margin-top: var(--space-3xs);
}
/* reader-branch — 経営者カードを視覚的に最優先（大きさ・発光強）。 */
.card-branch.reader-branch,
.card-branch.is-primary {
border: 1px solid var(--hair-cyan);
background:
linear-gradient(180deg, rgba(45, 226, 230, .08), rgba(8, 12, 26, .9)),
var(--card-bg);
box-shadow: 0 8px 36px rgba(5, 7, 15, .55), var(--glow-cyan);
transform: scale(1.015);
}
.card-branch.reader-branch .card-title,
.card-branch.is-primary .card-title {
font-size: var(--text-2xl);
color: var(--cyan-hi);
text-shadow: 0 0 14px rgba(45, 226, 230, .5);
}
.card-branch.reader-branch::before,
.card-branch.is-primary::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--cyan), var(--mag));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .55;
pointer-events: none;
}
.card-branch.reader-branch:hover,
.card-branch.is-primary:hover {
transform: translateY(var(--card-lift)) scale(1.015);
box-shadow: 0 16px 48px rgba(5, 7, 15, .6), 0 0 26px rgba(45, 226, 230, .55), 0 0 52px rgba(45, 226, 230, .22);
}
/* ---- news card grid wrapper（card-news 一覧用・最小レイアウト）---- */
.news-grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
margin-top: var(--space-xl);
}
/* ---- generic card grid（card-concept / card-role 等・auto-fit 最小レイアウト）---- */
.card-grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card-grid > .card { height: 100%; }
@media (min-width: 769px) {
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 769px) and (max-width: 1024px) {
.card-grid--3,
.card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.card-grid,
.card-grid--2,
.card-grid--3,
.card-grid--4 { grid-template-columns: 1fr; }
}
/* ---- 補足メモ行（採用 open-roles 等の※注記・HUD mono の控えめテキスト）---- */
.role-note {
margin-top: var(--space-lg);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--ink-faint);
}
/* ============================================================
6. FORM — field / label / input / select / textarea / is-error / consent
============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.label {
font-family: var(--font-chakra);
font-size: var(--label-size);
font-weight: 600;
letter-spacing: var(--tracking-wide);
color: var(--label-color);
}
.label .req { color: var(--aka-hi); margin-left: .25em; text-shadow: 0 0 8px rgba(200, 16, 46, .5); }
.input,
.select,
.textarea {
width: 100%;
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--field-text);
background: var(--field-bg);
border: var(--field-border);
border-radius: var(--field-radius);
padding: var(--field-pad-y) var(--field-pad-x);
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.textarea { min-height: 9em; resize: vertical; line-height: var(--leading-normal); }
.input::placeholder,
.textarea::placeholder { color: var(--field-placeholder); }
.select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--cyan-hi) 50%),
linear-gradient(135deg, var(--cyan-hi) 50%, transparent 50%);
background-position: calc(100% - 20px) center, calc(100% - 14px) center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 40px;
}
.select option { background: var(--bg-2); color: var(--ink); }
.input:hover,
.select:hover,
.textarea:hover { border: var(--field-border-hover); }
.input:focus,
.input:focus-visible,
.select:focus,
.select:focus-visible,
.textarea:focus,
.textarea:focus-visible {
outline: none;
border-color: var(--cyan);
box-shadow: var(--field-focus-ring);
background: var(--bg-elev);
}
.input:disabled,
.select:disabled,
.textarea:disabled { opacity: .5; cursor: not-allowed; }
/* error state — JS adds .is-error + aria-invalid */
.is-error .input,
.is-error .select,
.is-error .textarea,
.input.is-error,
.select.is-error,
.textarea.is-error,
[aria-invalid="true"] {
border-color: var(--field-error);
box-shadow: var(--field-error-ring);
}
.field-error {
font-family: var(--font-chakra);
font-size: var(--text-xs);
color: var(--field-error);
margin-top: var(--space-3xs);
}
/* consent row — privacy agreement */
.consent {
display: flex;
align-items: flex-start;
gap: var(--space-2xs);
font-size: var(--text-sm);
color: var(--ink-soft);
}
.consent input[type="checkbox"] {
position: relative;
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: .15em;
border: 1px solid var(--hair-strong);
border-radius: var(--radius-xs);
background: var(--field-bg);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.consent input[type="checkbox"]:hover { border-color: var(--hair-cyan); }
.consent input[type="checkbox"]:checked {
border-color: var(--cyan);
background: linear-gradient(135deg, var(--cyan), var(--blue));
box-shadow: var(--glow-cyan);
}
.consent input[type="checkbox"]:checked::after {
content: "";
position: absolute;
width: 5px; height: 9px;
margin: 2px 0 0 6px;
border: solid var(--bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.consent a { color: var(--cyan-hi); text-decoration: underline; text-underline-offset: .2em; }
/* form layout helpers */
.form-row { display: grid; gap: var(--space-md); }
@media (min-width: 769px) {
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
}
.form-actions { margin-top: var(--space-lg); }
/* ============================================================
7. TABLES — spec-table / price-table
============================================================ */
.spec-table {
width: 100%;
border: 1px solid var(--hair);
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(11, 19, 34, .5);
}
.spec-table th,
.spec-table td {
padding: var(--space-sm) var(--space-md);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--hair);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
width: 34%;
font-family: var(--font-chakra);
font-weight: 600;
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
color: var(--ink-faint);
background: rgba(16, 26, 48, .4);
}
.spec-table td { color: var(--ink-soft); }
/* price table — plans side by side, recommended column lit */
.price-table { width: 100%; }
.price-grid {
display: grid;
gap: var(--space-md);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.price-plan {
position: relative;
display: flex;
flex-direction: column;
background: var(--card-bg);
border: 1px solid var(--hair);
border-radius: var(--radius-lg);
padding: var(--card-pad);
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.price-plan:hover { transform: translateY(var(--card-lift)); border-color: var(--hair-cyan); box-shadow: var(--card-shadow-hover); }
.price-plan .plan-name {
font-family: var(--font-chakra);
font-weight: 600;
letter-spacing: var(--tracking-wide);
color: var(--ink-soft);
}
.price-plan .plan-price {
font-family: var(--font-bebas);
font-size: var(--text-4xl);
line-height: 1;
color: var(--cyan-hi);
text-shadow: 0 0 14px rgba(45, 226, 230, .4);
margin: var(--space-2xs) 0 var(--space-sm);
}
.price-plan .plan-price .unit { font-size: .4em; color: var(--ink-soft); letter-spacing: var(--tracking-wide); }
.price-plan ul { list-style: none; display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.price-plan li { position: relative; padding-left: 1.2em; font-size: var(--text-sm); color: var(--ink-soft); }
.price-plan li::before { content: "✦"; position: absolute; left: 0; color: var(--cyan); font-size: .8em; }
/* single highlighted plan — constrain width so one card doesn't stretch full-width */
.price-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
/* stacked initial + monthly price lines inside one plan */
.price-plan .plan-price + .plan-price { margin-top: var(--space-2xs); }
/* recommended plan — neon-emphasised */
.price-plan.is-recommended {
border-color: var(--mag);
box-shadow: 0 8px 36px rgba(5, 7, 15, .55), var(--glow-mag);
}
.price-plan.is-recommended .plan-price { color: var(--mag-hi); text-shadow: 0 0 14px rgba(255, 45, 149, .5); }
.price-plan .plan-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-chakra);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-wide);
color: var(--white);
background: linear-gradient(135deg, var(--mag), var(--blue));
padding: 4px 12px;
border-radius: var(--radius-pill);
box-shadow: var(--glow-mag);
}
/* ============================================================
8. NAV HELPERS — crumbs / pager / nl-form / cta-band
============================================================ */
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
color: var(--ink-faint);
list-style: none;
margin: 0;
padding: 0;
}
.crumbs a { color: var(--ink-faint); transition: color var(--duration-fast) var(--ease); }
.crumbs a:hover { color: var(--cyan-hi); }
.crumbs a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.crumbs li + li::before { content: "/"; color: var(--cyan); opacity: .6; }
.crumbs [aria-current="page"] { color: var(--ink-soft); }
/* pager — prev / numbers / next */
.pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
margin-top: var(--space-2xl);
list-style: none;
padding: 0;
}
.pager a,
.pager span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--space-xs);
font-family: var(--font-chakra);
font-weight: 600;
font-size: var(--text-sm);
color: var(--ink-soft);
border: 1px solid var(--hair);
border-radius: var(--radius-md);
transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.pager a:hover { color: var(--cyan-hi); border-color: var(--hair-cyan); box-shadow: 0 0 14px rgba(45, 226, 230, .2); }
.pager a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.pager [aria-current="page"] {
color: var(--bg);
background: linear-gradient(135deg, var(--cyan), var(--blue));
border-color: var(--cyan);
box-shadow: var(--glow-cyan);
}
.pager .is-disabled { opacity: .4; pointer-events: none; }
/* newsletter form — email + register button */
.nl-form { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.nl-form .input { flex: 1 1 220px; }
.nl-form .btn { flex: 0 0 auto; }
/* ---- CTA band — full-width neon-emphasised CTA strip ---- */
.cta-band {
position: relative;
text-align: center;
background:
radial-gradient(80% 120% at 50% 0%, rgba(255, 45, 149, .12), transparent 60%),
radial-gradient(80% 120% at 50% 100%, rgba(45, 226, 230, .1), transparent 60%),
linear-gradient(180deg, var(--bg-3), var(--bg));
border-top: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
overflow: hidden;
}
.cta-band::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mag), var(--cyan), transparent);
opacity: .7;
}
.cta-band .section-inner,
.cta-band .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.cta-band .section-title { text-shadow: 0 0 18px rgba(59, 91, 255, .4); }
.cta-band .lead { margin-inline: auto; text-align: center; }
/* ============================================================
9. ACCORDION — acc / acc-item（accordion.js 連動：[hidden] 開閉）
============================================================ */
.acc {
border: 1px solid var(--hair);
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(11, 19, 34, .5);
}
.acc-item + .acc-item { border-top: 1px solid var(--hair); }
.acc-item [data-accordion-trigger] {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
text-align: left;
padding: var(--space-md);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lg);
color: var(--ink);
transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.acc-item [data-accordion-trigger]:hover { color: var(--cyan-hi); background: rgba(45, 226, 230, .04); }
.acc-item [data-accordion-trigger]:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
/* +/- indicator */
.acc-item [data-accordion-trigger]::after {
content: "+";
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: var(--text-xl);
color: var(--cyan-hi);
text-shadow: 0 0 8px rgba(45, 226, 230, .5);
transition: transform var(--duration-fast) var(--ease);
}
.acc-item [data-accordion-trigger][aria-expanded="true"]::after { content: "−"; transform: rotate(180deg); }
.acc-item [data-accordion-trigger][aria-expanded="true"] { color: var(--cyan-hi); }
.acc-panel { padding: 0 var(--space-md) var(--space-md); color: var(--ink-soft); }
/* ============================================================
10. STATS — stats / stat / stat-num（counter-anim.js 連動）
============================================================ */
.stats {
display: flex;
flex-wrap: wrap;
gap: clamp(16px, 3vw, 40px);
}
.stat {
display: flex;
flex-direction: column;
gap: var(--space-3xs);
flex: 1 1 160px;
}
.stat-num {
font-family: var(--font-bebas);
font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem);
line-height: 1;
letter-spacing: var(--tracking-wide);
color: var(--cyan-hi);
text-shadow: 0 0 16px rgba(45, 226, 230, .42), 0 0 36px rgba(45, 226, 230, .18);
}
.stat-num.is-mag { color: var(--mag-hi); text-shadow: 0 0 16px rgba(255, 45, 149, .42), 0 0 36px rgba(255, 45, 149, .18); }
.stat-num.is-gold { color: var(--kin-lit); text-shadow: var(--glow-gold); }
.stat-num .unit { font-size: .5em; color: var(--ink-soft); letter-spacing: var(--tracking-wide); }
.stat-label {
font-size: var(--text-sm);
color: var(--ink-faint);
}
.stat-divider { width: 1px; align-self: stretch; background: var(--hair); }
/* ============================================================
11. FOOTER — .site-footer
============================================================ */
.site-footer {
position: relative;
z-index: var(--z-content);
background: linear-gradient(180deg, var(--bg-3), #04060C);
border-top: 1px solid var(--hair);
padding-block: var(--space-3xl) var(--space-xl);
margin-top: var(--space-4xl);
}
.site-footer::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), var(--mag), transparent);
opacity: .4;
}
.footer-inner {
display: grid;
gap: var(--space-2xl);
grid-template-columns: 1.2fr 1fr 1.2fr;
align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: flex-start; }
.footer-tagline {
font-family: var(--font-orbitron);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: var(--tracking-widest);
color: var(--cyan-hi);
text-shadow: 0 0 10px rgba(45, 226, 230, .45);
margin-top: var(--space-2xs);
}
.footer-nav-list { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; }
.footer-nav-list a {
font-family: var(--font-chakra);
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
color: var(--ink-soft);
transition: color var(--duration-fast) var(--ease);
}
.footer-nav-list a:hover { color: var(--cyan-hi); }
.footer-nav-list a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
.footer-meta { display: grid; gap: var(--space-2xs); }
.footer-company,
.footer-contact,
.footer-copy { font-size: var(--text-xs); color: var(--ink-faint); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.footer-legal a { font-size: var(--text-xs); color: var(--ink-soft); transition: color var(--duration-fast) var(--ease); }
.footer-legal a:hover { color: var(--cyan-hi); }
.footer-legal a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }
/* footer コンバージョン CTA 行（無料相談＋AI活用診断。モバイル固定バーと同じ対） */
.footer-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block: var(--space-3xs) var(--space-2xs); }
/* ============================================================
12. HERO STAGE（index 専用）— pattern-X 完全移植
------------------------------------------------------------
変更点（pattern-X からの唯一の構造改変）:
pattern-X の .stage は position:fixed + inset:0 で全画面固定だった。
ここでは .hero-screen{min-height:100vh;position:relative;overflow:hidden}
を新設し、その内側に .hero-stage を position:absolute;inset:0 で
スコープする。これで下のコンテンツは hero 画面の下に普通にスクロールする
（背景は hero 画面の中だけに閉じ込められ、固定貼り付きをやめる）。
それ以外（発光値・サイズ・レイヤ z 順・H1 clamp・列幅・.line nowrap・
最小中央 scrim 等）は pattern-X の現行値をそのまま維持する。
精密発光のためここだけハードコード値を許容（FRONTEND_PREVIEW.md §4 例外）。
============================================================ */
/* hero 画面の外枠：100vh 級・相対配置・はみ出し隠し */
.hero-screen {
min-height: 100vh;
min-height: 100svh;
position: relative;
overflow: hidden;
}
/* 背面の都市演出層：fixed をやめ、hero-screen 内に absolute でスコープ */
.hero-stage {
position: absolute;
inset: 0;
z-index: var(--z-stage);
overflow: hidden;
background: var(--bg);
pointer-events: none;
}
/* ---- z0 BASE: layered night, multi-source pools ---- */
.hero-stage .atmo {
position: absolute; inset: 0;
background:
radial-gradient(70% 38% at 50% 2%, rgba(126,146,255,.10) 0%, rgba(45,226,230,.05) 40%, transparent 72%),
radial-gradient(120% 60% at 50% 100%, rgba(45,226,230,.23) 0%, rgba(45,226,230,0) 47%),
radial-gradient(90% 60% at 16% 84%, rgba(255,45,149,.21) 0%, rgba(255,45,149,0) 51%),
radial-gradient(90% 64% at 84% 80%, rgba(59,91,255,.25) 0%, rgba(59,91,255,0) 53%),
radial-gradient(80% 56% at 50% 8%, rgba(138,79,255,.20) 0%, rgba(138,79,255,0) 57%),
linear-gradient(180deg, #080B18 0%, #0A0E1C 30%, #0C1226 56%, #0D1430 76%, #090D1C 100%);
}
/* ---- starfield high in the sky ---- */
.hero-stage .stars {
position: absolute; left: 0; right: 0; top: 0; height: 50%; pointer-events: none;
background-image:
radial-gradient(1.3px 1.3px at 12% 16%, rgba(234,242,255,.9), transparent),
radial-gradient(1px 1px at 27% 8%, rgba(141,244,246,.8), transparent),
radial-gradient(1.5px 1.5px at 47% 13%, rgba(234,242,255,.85), transparent),
radial-gradient(1px 1px at 63% 6%, rgba(255,102,181,.7), transparent),
radial-gradient(1.3px 1.3px at 79% 14%, rgba(234,242,255,.9), transparent),
radial-gradient(1px 1px at 89% 30%, rgba(141,244,246,.7), transparent),
radial-gradient(1.1px 1.1px at 7% 38%, rgba(234,242,255,.6), transparent),
radial-gradient(1.4px 1.4px at 36% 44%, rgba(232,195,107,.6), transparent),
radial-gradient(1px 1px at 70% 5%, rgba(234,242,255,.8), transparent),
radial-gradient(1.1px 1.1px at 92% 8%, rgba(232,195,107,.7), transparent),
radial-gradient(1px 1px at 20% 6%, rgba(234,242,255,.7), transparent),
radial-gradient(1.1px 1.1px at 55% 40%, rgba(141,244,246,.5), transparent);
opacity: .62;
animation: heroTwinkle var(--duration-ambient) var(--breathe) infinite;
}
@keyframes heroTwinkle { 0%, 100% { opacity: .42; } 50% { opacity: .68; } }
/* ---- z1 SUN: banded magenta->gold disk rising at horizon ---- */
.hero-stage .sun {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: min(54vw, 480px);
height: min(54vw, 480px);
border-radius: 50%;
opacity: .68;
background: linear-gradient(180deg,
#FFE9A8 0%, #F6C76A 16%, #FF8F4D 34%,
#FF4DA6 56%, #FF2D95 74%, #C8377F 100%);
box-shadow:
0 0 44px 9px rgba(255,45,149,.23),
0 0 100px 30px rgba(255,77,166,.13),
0 0 170px 64px rgba(138,79,255,.08);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%,
transparent 42%, #000 46%, transparent 48.5%, #000 52.5%,
transparent 55%, #000 59.5%, transparent 62.5%, #000 67%,
transparent 70.5%, #000 75.5%, transparent 79.5%, #000 85%,
transparent 89.5%, #000 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 40%,
transparent 42%, #000 46%, transparent 48.5%, #000 52.5%,
transparent 55%, #000 59.5%, transparent 62.5%, #000 67%,
transparent 70.5%, #000 75.5%, transparent 79.5%, #000 85%,
transparent 89.5%, #000 100%);
animation: sunbreathe var(--duration-ambient) var(--breathe) infinite;
z-index: 1;
}
@keyframes sunbreathe { 0%, 100% { filter: saturate(.94) brightness(.96); } 50% { filter: saturate(1.04) brightness(1.02); } }
.hero-stage .sun::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(255,233,168,.35);
-webkit-mask-image: inherit; mask-image: inherit;
}
/* ---- z2 SKYLINE: distant silhouette + lit windows ---- */
.hero-stage .skyline {
position: absolute; left: 0; right: 0; top: 34%; height: 24%; opacity: .5; z-index: 2;
filter: brightness(.72) contrast(.84) saturate(.66) blur(1px);
}
.hero-stage .skyline svg { display: block; width: 100%; height: 100%; }
/* ---- z3 CITY: high-rises boxing the frame ---- */
.hero-stage .city {
position: absolute; left: 0; right: 0; top: 0; bottom: 36%; z-index: 3; opacity: .86;
filter: brightness(1.0) saturate(.98);
}
.hero-stage .city svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* ---- z4 TRAILS: long-exposure light trails on the deck ---- */
.hero-stage .road {
position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 4;
perspective: 46vmin; perspective-origin: 50% 0%; pointer-events: none;
}
.hero-stage .deck {
position: absolute; left: 50%; bottom: 0; width: 240%; height: 130%;
transform: translateX(-50%) rotateX(72deg); transform-origin: 50% 100%;
background: linear-gradient(180deg, rgba(10,16,36,0) 0%, rgba(8,12,26,.45) 40%, #060912 100%);
-webkit-mask-image: radial-gradient(120% 100% at 50% 100%, #fff 60%, transparent 100%);
mask-image: radial-gradient(120% 100% at 50% 100%, #fff 60%, transparent 100%);
}
.hero-stage .deck::before {
content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
background:
radial-gradient(50% 40% at 50% 0%, rgba(45,226,230,.11), transparent 70%),
radial-gradient(60% 50% at 30% 14%, rgba(91,108,255,.08), transparent 70%),
radial-gradient(60% 50% at 72% 18%, rgba(255,45,149,.07), transparent 70%);
}
.hero-stage .lanes {
position: absolute; left: 50%; bottom: 0; width: 240%; height: 130%;
transform: translateX(-50%) rotateX(72deg); transform-origin: 50% 100%;
background: repeating-linear-gradient(to right, transparent 0 calc(20% - 1px), rgba(234,242,255,.10) calc(20% - 1px) 20%);
-webkit-mask-image: linear-gradient(to top, #fff 0%, rgba(255,255,255,.2) 70%, transparent 100%);
mask-image: linear-gradient(to top, #fff 0%, rgba(255,255,255,.2) 70%, transparent 100%);
}
.hero-stage .horizon-glow {
position: absolute; left: 0; right: 0; bottom: 40%; height: 8%; z-index: 4; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(91,108,255,.17) 40%, rgba(45,226,230,.12) 60%, transparent);
filter: blur(12px);
}
.hero-stage .trails { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 4; pointer-events: none; opacity: .6; }
.hero-stage .streak { position: absolute; height: 2px; border-radius: 2px; left: -40%; width: 60%; opacity: 0; will-change: transform, opacity; }
.hero-stage .streak::after { content: ""; position: absolute; inset: 0; border-radius: inherit; filter: blur(4px); transform: scaleY(3.2); background: inherit; opacity: .28; }
.hero-stage .run-r { animation: runR linear infinite; }
@keyframes runR { 0% { transform: translateX(0) scaleX(.5); opacity: 0; } 8% { opacity: .5; } 70% { opacity: .42; } 100% { transform: translateX(240%) scaleX(1.25); opacity: 0; } }
.hero-stage .run-l { left: auto; right: -40%; animation: runL linear infinite; }
@keyframes runL { 0% { transform: translateX(0) scaleX(.5); opacity: 0; } 8% { opacity: .5; } 70% { opacity: .42; } 100% { transform: translateX(-240%) scaleX(1.25); opacity: 0; } }
.hero-stage .t-white { background: linear-gradient(90deg, transparent, rgba(251,253,255,.25) 30%, var(--white) 92%, #fff 100%); box-shadow: 0 0 6px rgba(251,253,255,.34); }
.hero-stage .t-red { background: linear-gradient(90deg, transparent, rgba(200,16,46,.22) 30%, var(--aka) 80%, var(--aka-hi) 100%); box-shadow: 0 0 6px rgba(255,59,83,.34); }
.hero-stage .t-cyan { background: linear-gradient(90deg, transparent, rgba(45,226,230,.22) 30%, var(--cyan) 84%, var(--cyan-hi) 100%); box-shadow: 0 0 6px rgba(45,226,230,.34); }
.hero-stage .t-blue { background: linear-gradient(90deg, transparent, rgba(91,108,255,.22) 30%, var(--blue-2) 84%, var(--blue-hi) 100%); box-shadow: 0 0 6px rgba(91,108,255,.34); }
.hero-stage .t-mag { background: linear-gradient(90deg, transparent, rgba(255,45,149,.22) 30%, var(--mag) 84%, var(--mag-hi) 100%); box-shadow: 0 0 6px rgba(255,45,149,.34); }
.hero-stage .rail {
position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 4; opacity: .5;
background: linear-gradient(90deg, transparent, var(--cyan) 20%, var(--blue) 50%, var(--mag) 80%, transparent);
box-shadow: 0 0 12px rgba(91,108,255,.35);
}
.hero-stage .rail.upper {
bottom: 32%; height: 2px; opacity: .28;
background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--cyan) 70%, transparent);
}
/* ---- z5 BOARDS (giant LED) + SIGNS (dense neon) ---- */
.hero-stage .boards { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-stage .board {
position: absolute; border-radius: 3px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-bebas); color: var(--white); text-align: center;
border: 1px solid rgba(234,242,255,.16);
animation: flicker 11s steps(1) infinite, neonFlare 5.5s ease-in-out infinite;
}
.hero-stage .board::after {
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
mix-blend-mode: multiply; opacity: .6;
}
@keyframes flicker { 0%, 95%, 100% { opacity: 1; } 96% { opacity: .84; } 97% { opacity: 1; } 98% { opacity: .78; } 99% { opacity: 1; } }
/* 定期的なネオン発光フレア（電脳感）— 大半は地味、周期的にサージ */
@keyframes neonFlare {
0%, 44%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.6) saturate(1.3); }
56% { filter: brightness(1.12) saturate(1.05); }
62% { filter: brightness(1.45) saturate(1.2); }
68% { filter: brightness(1) saturate(1); }
}
/* 各ボードの発光フレアを時間差にして電脳感を出す */
.hero-stage .b-left { animation-delay: .3s; }
.hero-stage .b-robo { animation-delay: 1.8s; }
.hero-stage .b-jp { animation-delay: .9s; }
.hero-stage .b-gold { animation-delay: 2.7s; }
.hero-stage .b-chi { animation-delay: 1.3s; }
.hero-stage .b-center{ animation-delay: 2.1s; }
.hero-stage .b-left {
left: clamp(8px,4vw,70px); top: 6%; width: clamp(48px,9vw,104px); height: 32%; opacity: .46;
background: linear-gradient(160deg, rgba(255,45,149,.13), rgba(138,79,255,.08));
box-shadow: 0 0 12px rgba(255,45,149,.15), 0 0 30px rgba(255,45,149,.06), inset 0 0 12px rgba(255,45,149,.09);
flex-direction: column; gap: 6px; line-height: .92; font-size: clamp(18px,3vw,36px);
color: var(--mag-hi); text-shadow: 0 0 7px rgba(255,45,149,.4);
}
.hero-stage .b-left .sm { font-family: var(--font-mono); font-size: .26em; letter-spacing: .3em; color: var(--ink-soft); text-shadow: none; }
.hero-stage .b-robo {
left: clamp(2px,1vw,18px); top: 27%; width: clamp(28px,4.6vw,52px); height: 22%; opacity: .42;
writing-mode: vertical-rl;
background: linear-gradient(180deg, rgba(45,226,230,.11), rgba(59,91,255,.07));
box-shadow: 0 0 10px rgba(45,226,230,.13), inset 0 0 9px rgba(45,226,230,.08);
font-family: var(--font-body); font-weight: 900;
font-size: clamp(14px,2.2vw,26px); letter-spacing: .18em;
color: var(--cyan-hi); text-shadow: 0 0 6px rgba(45,226,230,.4);
}
.hero-stage .b-center {
left: 50%; transform: translateX(-50%); top: 3.5%;
width: clamp(180px,35vw,430px); height: 21%;
background: linear-gradient(135deg, rgba(45,226,230,.22), rgba(59,91,255,.20) 60%, rgba(255,45,149,.14));
box-shadow: 0 0 36px rgba(45,226,230,.30), 0 0 70px rgba(59,91,255,.12), inset 0 0 28px rgba(45,226,230,.16);
justify-content: flex-start; /* LED 電光掲示板: テキストが横に流れる */
}
/* b-center を電光掲示板化 — mono の文言が横スクロール（二重化でシームレスループ） */
.hero-stage .b-center .b-led {
display: flex; align-items: center; flex-wrap: nowrap;
height: 100%; width: max-content;
animation: bcScroll 34s linear infinite; will-change: transform;
}
.hero-stage .b-center .run {
flex: 0 0 auto; white-space: nowrap;
font-family: var(--font-mono); font-weight: 500;
font-size: clamp(15px,2.4vw,28px); letter-spacing: .14em; line-height: 1;
color: #EAFCFF; text-shadow: 0 0 10px rgba(45,226,230,.9), 0 0 24px rgba(59,91,255,.5);
}
@keyframes bcScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hero-stage .b-jp {
right: clamp(8px,4vw,64px); top: 5%; width: clamp(46px,8vw,90px); height: 40%;
writing-mode: vertical-rl;
background: linear-gradient(180deg, rgba(200,16,46,.32), rgba(11,17,36,.6));
border: 1px solid rgba(255,59,83,.46);
box-shadow: 0 0 30px rgba(200,16,46,.42), 0 0 66px rgba(200,16,46,.16), inset 0 0 20px rgba(200,16,46,.26);
font-family: var(--font-body); font-weight: 900;
font-size: clamp(20px,3.6vw,42px); letter-spacing: .12em;
color: #FFE7EA; text-shadow: 0 0 12px rgba(255,59,83,.8), 0 0 28px rgba(200,16,46,.5);
}
.hero-stage .b-jp .ah { color: var(--kin); text-shadow: 0 0 16px rgba(232,195,107,.9); }
.hero-stage .b-gold {
right: clamp(2px,1.5vw,20px); top: 34%; width: clamp(34px,5.4vw,64px); height: 15%; opacity: .42;
background: linear-gradient(160deg, rgba(232,195,107,.10), rgba(200,16,46,.05));
box-shadow: 0 0 10px rgba(232,195,107,.13), inset 0 0 9px rgba(232,195,107,.08);
flex-direction: column; line-height: .9;
font-family: var(--font-body); font-weight: 900;
font-size: clamp(17px,2.6vw,31px); color: #FFF3D6; text-shadow: 0 0 6px rgba(232,195,107,.42);
}
.hero-stage .b-gold .sm { font-family: var(--font-bebas); font-weight: 400; font-size: .5em; letter-spacing: .2em; color: var(--kin); text-shadow: 0 0 8px rgba(232,195,107,.6); }
.hero-stage .b-chi {
left: clamp(54px,13vw,180px); top: 54%; width: clamp(34px,5.2vw,62px); height: 22%; opacity: .42;
writing-mode: vertical-rl;
background: linear-gradient(180deg, rgba(45,226,230,.10), rgba(138,79,255,.07));
border: 1px solid rgba(45,226,230,.20);
box-shadow: 0 0 11px rgba(45,226,230,.14), 0 0 26px rgba(138,79,255,.06), inset 0 0 9px rgba(45,226,230,.08);
font-family: var(--font-body); font-weight: 900;
font-size: clamp(20px,3.2vw,40px); letter-spacing: .12em;
color: #DFFCFF; text-shadow: 0 0 7px rgba(45,226,230,.42), 0 0 18px rgba(138,79,255,.2);
}
/* dense neon signs woven between the boards */
.hero-stage .signs { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .5; }
.hero-stage .sign { position: absolute; font-family: var(--font-bebas); letter-spacing: .06em; line-height: .92; white-space: nowrap; user-select: none; animation: neonFlare 6.5s ease-in-out infinite; }
.hero-stage .sign.v { writing-mode: vertical-rl; font-family: var(--font-body); font-weight: 900; letter-spacing: .12em; line-height: 1.05; }
.hero-stage .n-cyan { color: var(--cyan-lit); text-shadow: 0 0 5px var(--cyan), 0 0 12px rgba(45,226,230,.6), 0 0 22px rgba(45,226,230,.35); }
.hero-stage .n-mag { color: var(--mag-lit); text-shadow: 0 0 5px var(--mag), 0 0 12px rgba(255,45,149,.6), 0 0 22px rgba(255,45,149,.35); }
.hero-stage .n-blue { color: #C9D4FF; text-shadow: 0 0 5px var(--blue), 0 0 12px rgba(59,91,255,.6), 0 0 22px rgba(59,91,255,.35); }
.hero-stage .n-violet { color: #DCC9FF; text-shadow: 0 0 5px var(--violet), 0 0 12px rgba(138,79,255,.6), 0 0 22px rgba(138,79,255,.35); }
.hero-stage .n-shu { color: #FFD2D9; text-shadow: 0 0 5px var(--aka-lit), 0 0 12px rgba(200,16,46,.6), 0 0 22px rgba(200,16,46,.4); }
.hero-stage .n-gold { color: var(--kin-lit); text-shadow: 0 0 5px var(--kin), 0 0 12px rgba(232,195,107,.6), 0 0 20px rgba(232,195,107,.35); }
.hero-stage .flick { animation: flick 8s infinite steps(1), neonFlare 6.5s ease-in-out infinite; }
.hero-stage .flick.d2 { animation-delay: 2.4s; animation-duration: 9.5s; }
.hero-stage .flick.d3 { animation-delay: 4.3s; animation-duration: 8.7s; }
@keyframes flick { 0%, 100% { opacity: 1; } 55% { opacity: 1; } 56% { opacity: .6; } 57% { opacity: 1; } 80% { opacity: 1; } 81% { opacity: .72; } 82% { opacity: 1; } }
.hero-stage .g1 { top: 12%; left: 15%; font-size: clamp(15px,2.4vw,31px); font-family: var(--font-body); font-weight: 900; }
.hero-stage .g2 { top: 20%; left: 12%; height: 22%; font-size: clamp(12px,1.7vw,22px); opacity: .78; }
.hero-stage .g3 { top: 52%; left: 3.5%; font-size: clamp(13px,1.8vw,23px); font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; opacity: .72; }
.hero-stage .g4 { top: 11%; right: 16%; font-size: clamp(14px,2.2vw,28px); }
.hero-stage .g5 { top: 22%; right: 13%; height: 20%; font-size: clamp(12px,1.7vw,22px); opacity: .78; }
.hero-stage .g6 { top: 54%; right: 6%; font-size: clamp(13px,1.8vw,23px); font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; opacity: .72; }
.hero-stage .g7 { top: 32%; left: 22%; font-size: clamp(12px,1.6vw,20px); font-family: var(--font-body); font-weight: 700; opacity: .7; }
/* 看板グループのフレアを時間差に（電脳感の散らし） */
.hero-stage .g2 { animation-delay: 1.5s; }
.hero-stage .g3 { animation-delay: 2.7s; }
.hero-stage .g4 { animation-delay: .9s; }
.hero-stage .g5 { animation-delay: 2.1s; }
.hero-stage .g6 { animation-delay: 3.3s; }
.hero-stage .g7 { animation-delay: 1.1s; }
/* ---- z6 TICKER: scrolling electric-blue band ---- */
.hero-stage .ticker {
position: absolute; left: 0; right: 0; top: 21%; height: clamp(16px,2.4vw,28px); z-index: 6; opacity: .4;
background: linear-gradient(90deg, rgba(59,91,255,0), rgba(59,91,255,.07) 12%, rgba(59,91,255,.07) 88%, rgba(59,91,255,0));
border-top: 1px solid rgba(126,146,255,.14); border-bottom: 1px solid rgba(126,146,255,.14);
overflow: hidden; display: flex; align-items: center; box-shadow: 0 0 10px rgba(59,91,255,.10); pointer-events: none;
}
.hero-stage .ticker .run {
font-family: var(--font-mono); font-size: clamp(9px,1.3vw,13px);
letter-spacing: .26em; color: var(--blue-hi); white-space: nowrap; text-shadow: 0 0 4px rgba(59,91,255,.34);
padding-left: 100%; animation: scroll 60s linear infinite;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* ---- z7 MOTES: drifting soul particles ---- */
.hero-stage .motes { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: .7; }
.hero-stage .mote {
position: absolute; width: 3px; height: 3px; border-radius: 50%;
background: var(--cyan-lit); box-shadow: 0 0 6px var(--cyan), 0 0 12px rgba(45,226,230,.55);
animation: rise 9s linear infinite; opacity: 0;
}
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 14% { opacity: .7; } 86% { opacity: .35; } 100% { transform: translateY(-70vh) scale(1.1); opacity: 0; } }
/* ---- z8 GLITCH sweep + CRT scanlines + vignette ---- */
.hero-stage .glitchbar {
position: absolute; left: 0; right: 0; height: 2px; top: -10%; z-index: 8; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(45,226,230,.4), rgba(255,45,149,.4), transparent);
opacity: .28; animation: sweep 16s linear infinite;
}
@keyframes sweep { 0% { top: -4%; } 100% { top: 104%; } }
.hero-stage .scan {
position: absolute; inset: 0; z-index: 8; pointer-events: none;
background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.14) 2px 3px);
mix-blend-mode: multiply; opacity: .38;
}
.hero-stage .vignette {
position: absolute; inset: 0; z-index: 8; pointer-events: none;
background: radial-gradient(124% 94% at 50% 44%, transparent 52%, rgba(5,7,15,.42) 80%, rgba(5,7,15,.78) 100%);
}
/* ============================================================
13. HERO 前面コンテンツ — .hero / .tagline / .lead(.line) / glitch / cta-row
pattern-X の現行値を維持（H1 clamp / 列幅 / .line nowrap / 中央 scrim）。
============================================================ */
.hero {
position: relative;
z-index: var(--z-content);
min-height: calc(100vh - var(--nav-height));
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(32px, 7vh, 80px) clamp(18px, 5vw, 72px) clamp(24px, 4vh, 48px);
max-width: clamp(680px, 92vw, 900px);
margin: 0 auto;
}
/* ---- tagline（Orbitron・発光スイープ）---- */
.tagline {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--font-orbitron);
font-weight: 700;
font-size: clamp(18px, 3.4vw, 34px);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
margin-bottom: clamp(16px, 2.8vh, 28px);
animation: tagReveal var(--duration-slow) cubic-bezier(.2, .7, .2, 1) both;
}
/* H1 直下に置く版（上に余白を取り、下は控えめに） */
.tagline--below { margin-top: clamp(14px, 2.4vh, 24px); margin-bottom: clamp(20px, 3.2vh, 32px); }
.tagline::before {
content: ""; width: clamp(34px, 5vw, 64px); height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan)); box-shadow: 0 0 10px var(--cyan); flex: 0 0 auto;
}
.tagline .blink { width: 9px; height: 9px; border-radius: 50%; background: var(--mag); box-shadow: 0 0 14px var(--mag); animation: blink 1.6s steps(1) infinite; flex: 0 0 auto; }
.tag-txt {
background: linear-gradient(100deg, var(--cyan-hi) 0%, #FFFFFF 22%, var(--mag-hi) 48%, var(--cyan-hi) 74%, #FFFFFF 100%);
background-size: 240% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 0 10px rgba(45,226,230,.55)) drop-shadow(0 0 20px rgba(255,45,149,.30));
animation: tagSheen 4.8s linear infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
@keyframes tagSheen { to { background-position: 240% center; } }
@keyframes tagReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* ---- colossal lead H1 with minimal centered scrim ---- */
.lead-wrap { position: relative; margin-bottom: clamp(22px, 3.6vh, 38px); }
/* very soft CENTERED legibility wash — minimal so it never reads as a dark blob */
.lead-wrap::before {
content: ""; position: absolute; left: -12%; right: -12%; top: -22%; bottom: -22%; z-index: -1;
background: radial-gradient(80% 115% at 50% 50%, rgba(5,7,15,.30) 0%, rgba(5,7,15,.13) 58%, transparent 84%);
filter: blur(30px);
}
/* neon underline sweep */
.lead-wrap::after {
content: ""; position: absolute; left: -2%; bottom: -7%; height: 2px; width: 0; z-index: 1;
background: linear-gradient(90deg, var(--cyan), var(--mag), transparent);
box-shadow: 0 0 14px rgba(45,226,230,.8), 0 0 28px rgba(255,45,149,.4);
animation: leadUnderline 1.0s 1.05s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes leadUnderline { 0% { width: 0; opacity: 0; } 100% { width: 62%; opacity: 1; } }
/* the colossal hero headline — H1 clamp + per-line nowrap (pattern-X 現行値).
.hero-lead をヒーロー H1 専用クラスにする（セクション .lead と衝突させない）。
後方互換: .hero 内に直接 .lead を置いた場合も拾う。 */
.hero-lead,
.hero .hero-lead,
.hero > .lead-wrap > .lead {
position: relative;
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(46px, 10.5vw, 104px);
line-height: .98;
letter-spacing: .004em;
color: var(--ink);
max-width: none;
margin-top: 0;
}
.hero-lead .line,
.hero > .lead-wrap > .lead .line {
display: block; position: relative; white-space: nowrap; opacity: 0;
text-shadow:
0 0 2px rgba(243,236,255,.98),
0 0 14px rgba(255,77,166,.5),
0 0 36px rgba(255,45,149,.3),
0 0 66px rgba(59,91,255,.24),
0 2px 30px rgba(5,7,15,.99);
animation: lineIn .8s cubic-bezier(.2,.8,.2,1) both, neonBreath 3.6s ease-in-out infinite;
}
.hero-lead .line:nth-child(1) { animation-delay: .15s, 1.0s; }
.hero-lead .line:nth-child(2) { animation-delay: .40s, 1.18s; }
.hero-lead .line:nth-child(3) { animation-delay: .65s, 1.34s; }
@keyframes lineIn { 0% { opacity: 0; transform: translateY(18px); } 50% { opacity: 1; } 58% { opacity: .7; } 66% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes neonBreath { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.1) saturate(1.06); } }
/* single brand red 朱 line + cyan line accents */
.hero-lead .w-aka {
color: #FFE3E8;
text-shadow: 0 0 3px rgba(255,227,232,.95), 0 0 20px rgba(200,16,46,.92), 0 0 54px rgba(226,51,76,.55), 0 2px 28px rgba(5,7,15,.94);
}
.hero-lead .w-cyan {
color: var(--cyan-hi);
text-shadow: 0 0 3px rgba(127,242,244,.95), 0 0 24px rgba(45,226,230,.8), 0 0 60px rgba(45,226,230,.45), 0 2px 28px rgba(5,7,15,.94);
}
/* tasteful RGB glitch split — restrained, message-first */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
content: attr(data-t); position: absolute; left: 0; top: 0; width: 100%; height: 100%;
pointer-events: none; opacity: 0; will-change: transform, clip-path;
}
.glitch::before { color: var(--cyan); text-shadow: 0 0 16px var(--cyan); animation: glx 6.5s steps(1) infinite; }
.glitch::after { color: var(--mag); text-shadow: 0 0 16px var(--mag); animation: glx2 6.5s steps(1) infinite; }
@keyframes glx { 0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 91% { opacity: .7; transform: translate(-2px,-1px); clip-path: inset(0 0 64% 0); } 94% { opacity: .7; transform: translate(2px,1px); clip-path: inset(54% 0 14% 0); } 96% { opacity: 0; transform: none; clip-path: inset(0); } }
@keyframes glx2 { 0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 91% { opacity: .65; transform: translate(2px,1px); clip-path: inset(0 0 70% 0); } 94% { opacity: .65; transform: translate(-2px,-1px); clip-path: inset(46% 0 26% 0); } 96% { opacity: 0; transform: none; clip-path: inset(0); } }
/* gentle scanline band over the type block */
.hero-lead::after {
content: ""; position: absolute; left: -4%; right: -4%; top: 0; bottom: 0; pointer-events: none;
mix-blend-mode: overlay; opacity: .32;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(45,226,230,.14) 3px 4px);
}
/* hero sub-lead copy */
.hero .lead,
.hero-sub {
font-size: clamp(14px, 1.8vw, 18px);
line-height: 1.9;
color: var(--ink-soft);
max-width: 52ch;
margin-bottom: clamp(22px, 3.6vh, 36px);
font-weight: 400;
}
.hero .lead b,
.hero-sub b { color: var(--ink); font-weight: 700; }
.hero .lead .hl,
.hero-sub .hl { color: var(--cyan-hi); font-weight: 500; }
/* hero CTA row */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
/* PRICE の価格直後に置いた CTA 行は中央寄せ（.price-table の後続 sibling を狙う） */
.section-inner > .price-table ~ .cta-row { justify-content: center; }
/* ============================================================
14. SLIVER — manifesto + trust numbers（hero 直下の信頼帯）
============================================================ */
.sliver {
position: relative;
z-index: var(--z-content);
border-top: 1px solid var(--hair);
background: linear-gradient(180deg, rgba(5,7,15,.58), rgba(5,7,15,.86));
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sliver::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--mag), var(--cyan), transparent); opacity: .6;
}
.sliver-in {
max-width: clamp(680px, 92vw, 900px); margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 3vw, 28px);
padding: 16px clamp(18px, 5vw, 72px);
}
.manifesto { display: flex; align-items: center; gap: 14px; flex: none; }
.manifesto .glyph {
font-family: var(--font-mincho); font-weight: 900; font-size: 1.5em;
color: var(--aka-hi); text-shadow: 0 0 14px rgba(255,59,83,.7), 0 0 30px rgba(200,16,46,.4); line-height: 1;
}
.manifesto .line {
font-family: var(--font-body); font-weight: 700; font-size: clamp(15px, 1.9vw, 20px);
color: var(--ink); letter-spacing: .02em; text-shadow: 0 0 10px rgba(59,91,255,.4);
}
.manifesto .line em { font-style: normal; color: var(--cyan-hi); text-shadow: 0 0 12px rgba(45,226,230,.6); }
/* sliver trust numbers reuse the .stats / .stat / .stat-num vocabulary */
.sliver .stats { margin-left: auto; }
/* ============================================================
15. RESPONSIVE — header / hero / cards (375 / 768 / 1200+)
============================================================ */
/* tablet & down: nav collapses, hamburger shows */
@media (max-width: 768px) {
.global-nav {
position: fixed;
inset: var(--nav-height) 0 auto 0;
z-index: var(--z-overlay);
display: block;
max-height: 0;
overflow: hidden;
background: linear-gradient(180deg, rgba(7,10,20,.98), rgba(7,10,20,.96));
-webkit-backdrop-filter: var(--nav-blur);
backdrop-filter: var(--nav-blur);
border-bottom: 1px solid var(--hair);
transition: max-height var(--duration-base) var(--ease);
}
.global-nav.is-open { max-height: 80vh; }
.nav-list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-sm) var(--gutter) var(--space-lg);
}
.nav-list li { border-bottom: 1px solid var(--hair); }
.nav-link { display: block; padding: var(--space-md) 0; font-size: var(--text-lg); }
.nav-link::after { display: none; }
.nav-list .nav-cta.btn { margin-top: var(--space-md); }
.nav-toggle { display: inline-flex; }
.footer-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}
/* mobile: hero scales down, CTA stacks, sliver wraps, heavy stage decor culled */
@media (max-width: 680px) {
.hero { min-height: calc(100vh - var(--nav-height)); justify-content: center; padding-top: clamp(22px, 7vh, 44px); }
.hero-lead { font-size: clamp(38px, 12vw, 56px); line-height: 1.02; }
.hero-lead .line { white-space: normal; }
.cta-row { flex-direction: column; align-items: stretch; }
.cta-row .btn { justify-content: center; width: 100%; }
.sliver-in { flex-direction: column; align-items: flex-start; gap: 14px; }
.sliver .stats { margin-left: 0; gap: 14px; }
.manifesto { flex-wrap: wrap; }
/* SP: cull the heavy stage decorations (keep the core scene readable) */
.hero-stage .b-center { width: 60vw; font-size: 7vw; }
.hero-stage .b-robo,
.hero-stage .b-gold,
.hero-stage .b-chi,
.hero-stage .g2,
.hero-stage .g3,
.hero-stage .g5,
.hero-stage .g6,
.hero-stage .g7 { display: none; }
.hero-stage .sun { width: 84vw; height: 84vw; top: 42%; }
.stats { gap: var(--space-md); }
.price-grid { grid-template-columns: 1fr; }
}
/* desktop wide */
@media (min-width: 1200px) {
.footer-inner { gap: var(--space-3xl); }
}
/* ============================================================
16. PREFERS-REDUCED-MOTION — 過剰アニメ抑制（hero stage / components）
============================================================ */
@media (prefers-reduced-motion: reduce) {
.hero-stage .stars,
.hero-stage .sun,
.hero-stage .ticker .run,
.hero-stage .glitchbar,
.hero-stage .mote,
.hero-stage .board,
.hero-stage .b-center .b-led,
.hero-stage .streak,
.hero-stage .run-r,
.hero-stage .run-l,
.hero-stage .flick,
.hero-stage .sign,
.tagline .blink,
.tagline,
.tag-txt,
.glitch::before,
.glitch::after { animation: none !important; }
.hero-lead .line { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
.lead-wrap::after { animation: none !important; width: 60% !important; opacity: 1 !important; }
.hero-stage .ticker .run { padding-left: 0; }
.hero-stage .streak { opacity: .7 !important; transform: none !important; }
/* component hovers keep the visual change but drop the motion */
.btn:hover,
.card:hover,
.price-plan:hover,
.nav-toggle:hover { transform: none !important; }
.btn-primary::before { transition: none !important; }
}
/* ============================================================
17. PAGE LAYOUT HELPERS — minimal additions (index 等のセクション内補助)
------------------------------------------------------------
Small layout-only helpers the index page needs but that the
phase6_kit (E) vocabulary did not enumerate. No new colours/fonts —
all spacing via tokens. Kept minimal and clearly scoped.
.section-cta : section 末尾の CTA 行（grid/本文との間隔）
.prep / .reps: PREP 論理ブロック・代表サービス補足の本文ラッパ（prose 幅）
.hero-note : hero 下端の控えめ注記（弱色・小）
============================================================ */
.section-cta { margin-top: var(--space-xl); text-align: center; }
.prep,
.reps { margin-top: var(--space-lg); }
.prep p + p,
.reps p + p { margin-top: var(--space-md); }
.hero-note {
margin-top: var(--space-sm);
font-size: var(--text-sm);
color: var(--ink-faint);
letter-spacing: var(--tracking-wide);
}
/* ============================================================
18. VISUAL SLOT — 可視プレースホルダ枠（画像未挿入の“枠＋説明”）
------------------------------------------------------------
役割: 実画像が入る予定の「空き枠」。実 ![]()
はまだ入れない。
一目で「ここに画像が入る／何の画像か」が分かるよう、ダーク地 +
ネオンの破線 + 二重罫 + 淡いグロウ + 角のフレーム/カメラ風装飾で
neon-city に馴染ませた工事中（枠）の質感を作る。
構成: 内に
.vs-ico 幾何グリフ（aria-hidden）
.vs-tag mono の小ラベル（例 "VISUAL · 16:9"・cyan）
.vs-title 何の画像か（太め・AA）
.vs-desc 1行アイデア（--ink-soft・AA）
アスペクト比は .vs-16x9 / .vs-4x3 / .vs-1x1 / .vs-3x4 / .vs-21x9。
強弱は .visual-slot--feature（主役・大きめ発光）。
色は全て var() 経由（新色なし）。Phase 6-2 が IMAGE-SLOT マーカーで
後から実画像を流し込む前提のプレースホルダ。
============================================================ */
.visual-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
width: 100%;
min-height: 180px; /* aspect-ratio が潰れても確保する保険 */
padding: clamp(20px, 3vw, 40px);
text-align: center;
overflow: hidden;
border-radius: var(--radius-lg);
/* 二重罫（外: ヘアライン / 内: シアン破線）+ 落ち着いたダーク地 */
border: 1px solid var(--hair-strong);
background:
linear-gradient(180deg, rgba(11, 19, 34, .72), rgba(8, 12, 26, .9)),
var(--bg-2);
box-shadow:
inset 0 0 0 1px rgba(7, 10, 20, .6), /* 二重罫の谷（外罫と内破線の間） */
inset 0 0 40px rgba(45, 226, 230, .05), /* 内側の淡いシアングロウ */
var(--card-shadow);
transition:
border-color var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease);
}
/* 内側のネオン破線罫（::before）— 画像が入る“窓”を示す */
.visual-slot::before {
content: "";
position: absolute;
inset: clamp(8px, 1.2vw, 14px);
border-radius: calc(var(--radius-lg) - 6px);
border: 1px dashed var(--hair-cyan);
pointer-events: none;
transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
/* 角のフレーム/カメラ風装飾（::after）— 4 隅の L 字コーナークロップ記号 */
.visual-slot::after {
content: "";
position: absolute;
inset: clamp(8px, 1.2vw, 14px);
border-radius: 2px;
pointer-events: none;
/* 4 隅だけに L 字が残るよう、辺の中央をマスクで抜く */
border: 0;
background:
/* 上辺・下辺の角だけ残す（左右端から内側へ伸びる短い罫） */
linear-gradient(90deg, var(--cyan) 0 18px, transparent 18px) top left / 50% 2px no-repeat,
linear-gradient(-90deg, var(--cyan) 0 18px, transparent 18px) top right / 50% 2px no-repeat,
linear-gradient(90deg, var(--cyan) 0 18px, transparent 18px) bottom left / 50% 2px no-repeat,
linear-gradient(-90deg, var(--cyan) 0 18px, transparent 18px) bottom right / 50% 2px no-repeat,
/* 左辺・右辺の角だけ残す（上下端から内側へ伸びる短い罫） */
linear-gradient(180deg, var(--cyan) 0 18px, transparent 18px) top left / 2px 50% no-repeat,
linear-gradient(180deg, var(--cyan) 0 18px, transparent 18px) top right / 2px 50% no-repeat,
linear-gradient(0deg, var(--cyan) 0 18px, transparent 18px) bottom left / 2px 50% no-repeat,
linear-gradient(0deg, var(--cyan) 0 18px, transparent 18px) bottom right / 2px 50% no-repeat;
filter: drop-shadow(0 0 4px rgba(45, 226, 230, .5));
opacity: .8;
}
/* hover: 罫線がわずかに発光（transition のみ・reduced-motion 不要） */
.visual-slot:hover {
border-color: var(--hair-cyan);
box-shadow:
inset 0 0 0 1px rgba(7, 10, 20, .6),
inset 0 0 56px rgba(45, 226, 230, .1),
0 0 22px rgba(45, 226, 230, .22),
var(--card-shadow);
}
.visual-slot:hover::before { border-color: var(--cyan); box-shadow: 0 0 14px rgba(45, 226, 230, .25); }
.visual-slot:hover::after { opacity: 1; }
/* ---- 内部要素（縦中央寄せ・全て AA を満たす配色）---- */
.visual-slot > * { position: relative; z-index: 1; }
/* 幾何グリフ（カメラ/フレーム記号・装飾なので aria-hidden 前提） */
.vs-ico {
font-family: var(--font-mono);
font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
line-height: 1;
color: var(--cyan-hi);
text-shadow: 0 0 12px rgba(45, 226, 230, .45);
margin-bottom: var(--space-3xs);
}
/* mono の小ラベル（"VISUAL · 16:9" 等）— cyan HUD タグ */
.vs-tag {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--cyan-hi); /* on dark ≈ AA 以上 */
text-shadow: 0 0 8px rgba(45, 226, 230, .4);
padding: 3px 10px;
border: 1px solid var(--hair-cyan);
border-radius: var(--radius-pill);
background: rgba(45, 226, 230, .06);
}
/* 何の画像か（太め・本文 primary 配色で確実に AA） */
.vs-title {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--ink);
max-width: 32ch;
text-shadow: 0 2px 16px rgba(5, 7, 15, .6);
}
/* 1 行アイデア（サブコピー・--ink-soft で AA） */
.vs-desc {
font-size: var(--text-sm);
line-height: var(--leading-snug);
color: var(--ink-soft);
max-width: 40ch;
}
/* ---- アスペクト比バリアント（min-height 保険で潰れない）---- */
.vs-16x9 { aspect-ratio: 16 / 9; }
.vs-4x3 { aspect-ratio: 4 / 3; }
.vs-1x1 { aspect-ratio: 1 / 1; }
.vs-3x4 { aspect-ratio: 3 / 4; min-height: 280px; }
.vs-21x9 { aspect-ratio: 21 / 9; min-height: 160px; }
/* ---- feature 強弱（主役・大きめ発光 + マゼンタ寄りの二色罫）---- */
.visual-slot--feature {
border-color: var(--hair-cyan);
background:
linear-gradient(180deg, rgba(45, 226, 230, .06), rgba(8, 12, 26, .92)),
var(--bg-panel);
box-shadow:
inset 0 0 0 1px rgba(7, 10, 20, .6),
inset 0 0 64px rgba(45, 226, 230, .1),
0 8px 36px rgba(5, 7, 15, .55),
var(--glow-cyan);
}
.visual-slot--feature::before { border-color: var(--cyan); box-shadow: 0 0 12px rgba(45, 226, 230, .2); }
.visual-slot--feature::after {
/* feature はコーナーをマゼンタに寄せて主役感を出す */
background:
linear-gradient(90deg, var(--mag) 0 22px, transparent 22px) top left / 50% 2px no-repeat,
linear-gradient(-90deg, var(--mag) 0 22px, transparent 22px) top right / 50% 2px no-repeat,
linear-gradient(90deg, var(--mag) 0 22px, transparent 22px) bottom left / 50% 2px no-repeat,
linear-gradient(-90deg, var(--mag) 0 22px, transparent 22px) bottom right / 50% 2px no-repeat,
linear-gradient(180deg, var(--mag) 0 22px, transparent 22px) top left / 2px 50% no-repeat,
linear-gradient(180deg, var(--mag) 0 22px, transparent 22px) top right / 2px 50% no-repeat,
linear-gradient(0deg, var(--mag) 0 22px, transparent 22px) bottom left / 2px 50% no-repeat,
linear-gradient(0deg, var(--mag) 0 22px, transparent 22px) bottom right / 2px 50% no-repeat;
filter: drop-shadow(0 0 5px rgba(255, 45, 149, .55));
opacity: .9;
}
.visual-slot--feature .vs-ico { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem); color: var(--cyan-lit); }
.visual-slot--feature .vs-title { font-size: var(--text-2xl); }
.visual-slot--feature .vs-desc { font-size: var(--text-base); }
.visual-slot--feature:hover {
border-color: var(--cyan);
box-shadow:
inset 0 0 0 1px rgba(7, 10, 20, .6),
inset 0 0 72px rgba(45, 226, 230, .14),
0 14px 44px rgba(5, 7, 15, .6),
0 0 30px rgba(45, 226, 230, .35);
}
/* ---- SP: feature 見出しを 1 段落とし、3x4 の最小高を緩和 ---- */
@media (max-width: 520px) {
.visual-slot--feature .vs-title { font-size: var(--text-xl); }
.vs-3x4 { min-height: 240px; }
}
/* ============================================================
18b. VISUAL SLOT — SAMPLE 画像入り状態（.has-sample）
------------------------------------------------------------
役割: Phase 6-2 で実画像が入る前の「サンプル可視化」状態。
.visual-slot 内に ![]()
（または