@charset "UTF-8";
/* =========================================================================
 * IHXS Theme — Design System
 * -------------------------------------------------------------------------
 * 目次
 *   01. デザイントークン（色・余白・書体）
 *   02. リセット & ベース
 *   03. レイアウト
 *   04. 共通パーツ（ボタン / バッジ / タグ）
 *   05. 背景エフェクト
 *   06. オープニング（起動シークエンス）
 *   07. ヘッダー / ナビゲーション
 *   08. ヒーロー
 *   09. 流れる技術スタック
 *   10. セクション見出し
 *   11. カード（Services / Works）
 *   12. ターミナル
 *   13. CTA
 *   14. 下層ページヘッダー / パンくず
 *   15. Profile / Contact
 *   16. 記事本文（WordPress 標準ブロック）
 *   17. ページネーション
 *   18. フッター
 *   19. カスタムカーソル
 *   20. スクロール演出
 *   21. 進め方（プロセス）
 *   22. よくある質問（FAQ）
 *   23. レスポンシブ
 *   24. アクセシビリティ / 印刷
 *
 * 色を変えたいときは 01 のトークンだけ触れば全体に反映されます。
 * （アクセント3色は「外観 > カスタマイズ > IHXS サイト設定 > 演出」からも変更可）
 * ====================================================================== */


/* =========================================================================
 * 01. デザイントークン
 * ====================================================================== */
:root {
	/* --- 背景 --- */
	--bg:            #05070e;
	--bg-soft:       #080c17;
	--bg-elev:       #0b1120;

	/* --- 面（ガラス） --- */
	--panel:         rgba(255, 255, 255, .035);
	--panel-hover:   rgba(255, 255, 255, .06);
	--panel-solid:   rgba(11, 17, 32, .82);

	/* カードなど「同時に何枚も並ぶ面」用。
	   backdrop-filter を使わずに厚みを出すため、やや不透明にしています。
	   背景の演出を強めたぶん、文字が読めるよう不透明度を上げています。 */
	--panel-card:       rgba(9, 14, 26, .76);
	--panel-card-hover: rgba(12, 19, 34, .88);

	/* --- 線 --- */
	--line:          rgba(148, 163, 184, .14);
	--line-strong:   rgba(148, 163, 184, .28);

	/* --- 文字 --- */
	--fg:            #e6edf7;
	--fg-muted:      #93a4bd;
	--fg-faint:      #5b6b85;

	/* --- アクセント（カスタマイザーで上書きされます） --- */
	--c1:            #22d3ee;   /* シアン */
	--c2:            #3b82f6;   /* ブルー */
	--c3:            #8b5cf6;   /* バイオレット */
	--c1-rgb:        34, 211, 238;
	--c2-rgb:        59, 130, 246;
	--c3-rgb:        139, 92, 246;
	--ok:            #34d399;
	--warn:          #fbbf24;

	/* --- グラデーション --- */
	--grad:          linear-gradient(100deg, var(--c1), var(--c2) 55%, var(--c3));
	--grad-soft:     linear-gradient(100deg, rgba(var(--c1-rgb), .18), rgba(var(--c3-rgb), .18));

	/* --- 書体 --- */
	--font-jp:   "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--font-en:   "Chakra Petch", "Noto Sans JP", sans-serif;
	/* JetBrains Mono には日本語の字が入っていません。
	   末尾の monospace だけだと、Windows では MS ゴシックに落ちて
	   ターミナル演出の日本語だけ字形が変わります。
	   すでに読み込んでいる Noto Sans JP を手前に挟んで受け止めます。
	   英数字は JetBrains Mono のままなので、等幅の見え方は変わりません。 */
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans JP", "Hiragino Sans", Meiryo, monospace;

	/* --- 余白・寸法 ---
	   セクション間の間隔はすべて --section-y に集約しています。
	   全体をもう少し詰めたい／広げたいときは、この1行だけ調整してください。 */
	--wrap:        1200px;
	--wrap-narrow: 860px;
	--gutter:      clamp(20px, 5vw, 48px);
	--section-y:   clamp(30px, 4vw, 62px);
	--header-h:    72px;
	--radius:      14px;
	--radius-lg:   22px;

	/* --- 動き --- */
	--ease:      cubic-bezier(.22, 1, .36, 1);
	--ease-in:   cubic-bezier(.5, 0, .75, 0);
	--dur:       .5s;

	/* --- 影 --- */
	--shadow:      0 24px 60px -20px rgba(0, 0, 0, .75);
	--glow-c1:     0 0 24px rgba(var(--c1-rgb), .45);
	--glow-c2:     0 0 24px rgba(var(--c2-rgb), .45);

	color-scheme: dark;
}


/* =========================================================================
 * 02. リセット & ベース
 * ====================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-jp);
	font-size: 16px;
	line-height: 1.9;
	font-feature-settings: "palt" 1;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* オープニング再生中はスクロールを固定 */
body.is-locked { overflow: hidden; }

img,
svg,
video,
canvas { display: block; max-width: 100%; height: auto; }

a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--ease), opacity .3s var(--ease);
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

h1, h2, h3, h4, h5 {
	margin: 0;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: .01em;
}

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection {
	background: rgba(var(--c1-rgb), .3);
	color: #fff;
}

/* --- フォーカスリング（キーボード操作時のみ） --- */
:focus-visible {
	outline: 2px solid var(--c1);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- スクロールバー --- */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  {
	background: linear-gradient(var(--c2), var(--c3));
	border-radius: 99px;
	border: 3px solid var(--bg);
}

/* --- スクリーンリーダー専用 --- */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- 本文へスキップ --- */
.skip-link {
	position: absolute;
	top: -100px; left: 16px;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--c2);
	color: #fff;
	font-weight: 700;
	border-radius: 0 0 8px 8px;
	transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }


/* =========================================================================
 * 03. レイアウト
 * ====================================================================== */
.wrap {
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}
.wrap--narrow { --wrap: var(--wrap-narrow); }

.section {
	position: relative;
	z-index: 1;
	padding-block: var(--section-y);
}
.section--tight { padding-block: clamp(20px, 2.8vw, 38px); }

.site-main { position: relative; z-index: 1; }

/* 汎用グリッド
   枚数に合わせたクラスは PHP 側の ihxs_grid_class() が付けます。

   ── 列数は「明示」しています。
      以前は repeat(auto-fit, minmax(280px, 1fr)) を使っていましたが、
      これは「入るだけ詰める」指定のため、幅 1200px では grid--3 でも
      実際には4列になり、6枚のときに「4 + 2」と欠けて見えていました。
      枚数と列数を一致させるため、画面幅ごとに列数を固定しています。 */
.grid { display: grid; gap: clamp(10px, 1.2vw, 16px); }

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.grid--2,
	.grid--3,
	.grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* 1枚だけのとき：中央に置き、間延びさせない */
.grid--1 {
	display: flex;
	justify-content: center;
}
.grid--1 > * { width: 100%; max-width: 420px; }

/* 3で割り切れない枚数のとき：最後の行を中央に寄せる。
   グリッドでは最終行だけを中央寄せできないため、ここだけ flex を使います。 */
.grid--balance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.grid--balance > * {
	flex: 1 1 300px;
	max-width: 380px;
}

/* （ここにあった .hr-glow は、出力する場所が1つも無かったため削除しました） */


/* =========================================================================
 * 04. 共通パーツ
 * ====================================================================== */

/* --- ターミナル風プロンプト記号 --- */
.prompt {
	color: var(--c1);
	font-family: var(--font-mono);
	margin-right: .35em;
	text-shadow: 0 0 12px rgba(var(--c1-rgb), .7);
}

/* --- 英字ラベル --- */
.label {
	font-family: var(--font-mono);
	font-size: clamp(10px, 1.4vw, 12px);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--c1);
}

/* --- ボタン --- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: 15px 30px;
	font-family: var(--font-en);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1;
	white-space: nowrap;
	border-radius: 10px;
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
/*
 * --mag-x / --mag-y は JavaScript（initMagnetic）が書き込みます。
 * カーソルが近づくと、ボタンが最大 8px だけ引き寄せられます。
 *
 * hover の -2px と同じ transform にまとめてあるのが要点です。
 * 別々に書くと、あとに来たほうが前を打ち消してしまいます。
 * JavaScript が動かない場合は 0px のままなので、従来どおりの動きになります。
 */
.btn { --mag-x: 0px; --mag-y: 0px; }
.btn:hover { transform: translate(var(--mag-x), calc(var(--mag-y) - 2px)); }
.btn:active { transform: translate(var(--mag-x), var(--mag-y)); }

/* 主ボタン：グラデーション + 走る光 */
.btn--primary {
	color: #fff;
	background: var(--grad);
	box-shadow: 0 8px 24px -6px rgba(var(--c2-rgb), .55);
}
.btn--primary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform .7s var(--ease);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 12px 36px -6px rgba(var(--c1-rgb), .7); }

/* 副ボタン：枠線 + 角のブラケット */
.btn--ghost {
	color: var(--fg);
	background: rgba(10, 15, 28, .55);
	border: 1px solid var(--line-strong);
	border-radius: 4px;   /* 角を立たせてサイバー寄りの造形にする */
}
.btn--ghost::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid transparent;
	border-radius: 2px;
	/* 四隅だけに線を残すためのマスク */
	background:
		linear-gradient(var(--c1), var(--c1)) 0 0     / 8px 1px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 0 0     / 1px 8px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 100% 0  / 8px 1px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 100% 0  / 1px 8px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 0 100%  / 8px 1px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 0 100%  / 1px 8px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 100% 100% / 8px 1px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 100% 100% / 1px 8px no-repeat;
	opacity: 0;
	transition: opacity .35s var(--ease), inset .35s var(--ease);
	pointer-events: none;
}
.btn--ghost:hover {
	border-color: rgba(var(--c1-rgb), .55);
	color: #fff;
	box-shadow: var(--glow-c1);
}
.btn--ghost:hover::after { opacity: .9; inset: 6px; }

.btn--block { width: 100%; }
.btn .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

/* --- バッジ --- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 5px 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c1);
	background: rgba(4, 9, 20, .72);
	border: 1px solid rgba(var(--c1-rgb), .35);
	border-radius: 99px;
}
.badge--float {
	position: absolute;
	top: 14px; left: 14px;
	z-index: 6;
	background: rgba(5, 7, 14, .8);
}

/* 仮データであることを示すバッジ。
   実績を1件でも登録すると仮データごと表示されなくなります。 */
.badge--sample {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 6;
	color: var(--warn);
	background: rgba(5, 7, 14, .8);
	border-color: rgba(251, 191, 36, .45);
}

/* --- タグ --- */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tag {
	padding: 4px 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--fg-muted);
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--line);
	border-radius: 6px;
	transition: color .3s var(--ease), border-color .3s var(--ease);
}
*:hover > .tags > .tag { border-color: rgba(var(--c1-rgb), .3); }

/* --- アイコン --- */
.icon { width: 24px; height: 24px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }

/* （ここにあった .cut は、出力する場所が1つも無かったため削除しました） */

/* --- コーナーブラケット --------------------------------------------------
 * カードやパネルの角に、計器のような「かぎ括弧」を重ねる装飾です。
 * テンプレート側で ihxs_hud() を呼ぶと <span class="hud"> が出力されます。
 * ホバーで括弧が少し開き、色が乗ります。
 *
 * ▼ 注意
 * この position: absolute が上書きされると、括弧が枠の四隅ではなく
 * 本文の中に出てしまいます。親側で「.親 > *」のようなセレクタに
 * position を指定するときは、必ず :not(.hud) で除外してください
 * （詳細度が同じため、後から書いたほうが勝ちます）。
 * ---------------------------------------------------------------------- */
.hud {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}
.hud::before,
.hud::after {
	content: "";
	position: absolute;
	width: 14px; height: 14px;
	border: 1px solid rgba(var(--c1-rgb), .35);
	transition: border-color .4s var(--ease), transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease);
}
.hud::before {
	top: 10px; left: 10px;
	border-right: 0; border-bottom: 0;
}
.hud::after {
	right: 10px; bottom: 10px;
	border-left: 0; border-top: 0;
}
/*
 * ホバー時の反応。
 *
 * 以前は「*:hover > .hud」と書いていましたが、これだとマウスが乗った
 * すべての要素（祖先も含む）がこの規則の照合対象になり、
 * マウスを動かすたびにページ全体のスタイル再計算が走っていました。
 *
 * ihxs_hud() を呼んでいる親は下の6種類だけなので、明示的に並べています。
 * 見た目・効き方は以前とまったく同じです。
 * 新しい場所で ihxs_hud() を使うときは、その親をここに足してください。
 */
.card:hover > .hud::before,
.card:hover > .hud::after,
.step:hover > .hud::before,
.step:hover > .hud::after,
.plan:hover > .hud::before,
.plan:hover > .hud::after,
.panel:hover > .hud::before,
.panel:hover > .hud::after,
.terminal:hover > .hud::before,
.terminal:hover > .hud::after,
.cta:hover > .hud::before,
.cta:hover > .hud::after {
	width: 22px; height: 22px;
	border-color: var(--c1);
}

/* --- 見出し用の小さな指標（HUDラベル）--- */
.tick-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--c1);
}
.tick-label::before,
.tick-label::after {
	content: "";
	width: 22px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--c1-rgb), .8));
}
.tick-label::after { background: linear-gradient(90deg, rgba(var(--c1-rgb), .8), transparent); }


/* =========================================================================
 * 05. 背景エフェクト
 * ====================================================================== */
.fx {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--bg);
	/* この中の変化が外側のレイアウト計算に波及しないよう封じ込める。
	   背景が動いても本文側の再計算が起きなくなり、スクロールが軽くなります。 */
	contain: strict;
}

/* パーティクル・ネットワーク（Canvas）
   ノードの視差／データパルス／スキャン波は JS 側（initParticles）で描いています。 */
.fx__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
}

/* --- 遠景の光のオーブ（大きくゆっくり回遊する）--- */
.fx__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	mix-blend-mode: screen;
	will-change: transform;
}
.fx__orb--1 {
	top: -14%; left: -8%;
	width: 56vw; height: 56vw;
	background: rgba(var(--c2-rgb), .46);
	animation: orb-drift-a 22s ease-in-out infinite;
}
.fx__orb--2 {
	bottom: -18%; right: -8%;
	width: 52vw; height: 52vw;
	background: rgba(var(--c3-rgb), .42);
	animation: orb-drift-b 27s ease-in-out infinite;
}
.fx__orb--3 {
	top: 34%; left: 44%;
	width: 38vw; height: 38vw;
	background: rgba(var(--c1-rgb), .28);
	animation: orb-drift-c 19s ease-in-out infinite;
}
@keyframes orb-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	33%      { transform: translate3d(14vw, 10vh, 0) scale(1.25); }
	66%      { transform: translate3d(4vw, 22vh, 0) scale(.9); }
}
@keyframes orb-drift-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
	40%      { transform: translate3d(-16vw, -12vh, 0) scale(.85); }
	70%      { transform: translate3d(-6vw, -24vh, 0) scale(1.2); }
}
@keyframes orb-drift-c {
	0%, 100% { transform: translate3d(-50%, -50%, 0) scale(1);   opacity: .5; }
	50%      { transform: translate3d(-28%, -72%, 0) scale(1.4); opacity: 1; }
}

/* --- オーロラ（大きく波打つ色面）--- */
.fx__aurora {
	position: absolute;
	inset: -25%;
	background:
		conic-gradient(from 210deg at 30% 35%, transparent 0deg, rgba(var(--c1-rgb), .3) 70deg, transparent 150deg),
		conic-gradient(from 20deg  at 72% 68%, transparent 0deg, rgba(var(--c3-rgb), .32) 90deg, transparent 190deg);
	filter: blur(62px);
	mix-blend-mode: screen;
	animation: aurora-turn 34s linear infinite;
	will-change: transform;
}
@keyframes aurora-turn {
	0%   { transform: rotate(0deg)   scale(1); }
	50%  { transform: rotate(180deg) scale(1.18); }
	100% { transform: rotate(360deg) scale(1); }
}

/* --- 斜めに落ちるライトビーム --- */
.fx__beam {
	position: absolute;
	top: -60%;
	width: 42vw; height: 220%;
	background: linear-gradient(180deg, transparent, rgba(var(--c1-rgb), .18) 45%, transparent);
	filter: blur(24px);
	mix-blend-mode: screen;
	transform-origin: top center;
	will-change: transform, opacity;
}
.fx__beam--1 {
	left: 6%;
	animation: beam-sweep-a 13s ease-in-out infinite;
}
.fx__beam--2 {
	right: 4%;
	background: linear-gradient(180deg, transparent, rgba(var(--c3-rgb), .2) 50%, transparent);
	animation: beam-sweep-b 17s ease-in-out infinite;
	animation-delay: -6s;
}
@keyframes beam-sweep-a {
	0%, 100% { opacity: .3; transform: translateX(-12vw) rotate(14deg); }
	50%      { opacity: 1;  transform: translateX(14vw)  rotate(6deg); }
}
@keyframes beam-sweep-b {
	0%, 100% { opacity: .35; transform: translateX(10vw)  rotate(-11deg); }
	50%      { opacity: .9;  transform: translateX(-13vw) rotate(-4deg); }
}

/* --- 奥に伸びるグリッドの床（速度・輝度を強化）--- */
.fx__floor {
	position: absolute;
	bottom: -2vh; left: 50%;
	width: 300vw; height: 68vh;
	transform: translateX(-50%) perspective(460px) rotateX(78deg);
	transform-origin: bottom center;
	background-image:
		linear-gradient(to right,  rgba(var(--c1-rgb), .55) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--c2-rgb), .55) 1px, transparent 1px);
	background-size: 70px 70px;
	animation: floor-run 1.8s linear infinite;
	opacity: .85;
	mask-image: linear-gradient(to top, #000 0%, transparent 80%);
	-webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
}
@keyframes floor-run {
	to { background-position: 0 70px; }
}

/* --- 画面を横断する光のスイープ --- */
.fx__sweep {
	position: absolute;
	top: 0; left: 0;
	width: 55vw; height: 100%;
	background: linear-gradient(90deg,
		transparent,
		rgba(var(--c1-rgb), .13) 45%,
		rgba(255, 255, 255, .08) 50%,
		rgba(var(--c1-rgb), .13) 55%,
		transparent);
	filter: blur(6px);
	mix-blend-mode: screen;
	animation: sweep-run 11s cubic-bezier(.65, 0, .35, 1) infinite;
	will-change: transform;
}
@keyframes sweep-run {
	0%        { transform: translateX(-60vw); opacity: 0; }
	12%       { opacity: 1; }
	55%       { opacity: 1; }
	70%, 100% { transform: translateX(120vw); opacity: 0; }
}

/* 上下のビネット（文字の可読性を守る） */
.fx__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% 0%,   transparent 40%, rgba(5, 7, 14, .8) 100%),
		linear-gradient(to bottom, rgba(5, 7, 14, .55) 0%, transparent 25%, transparent 70%, rgba(5, 7, 14, .8) 100%);
}

/* 微細なノイズ（のっぺり感を消す）
   ── 以前は毎秒複数回ずらしていましたが、画面全体の再描画が繰り返され
      重さの一因になっていたため、静止させています。質感は変わりません。 */
.fx__noise {
	position: absolute;
	inset: 0;
	opacity: .03;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 走査線 */
.fx__scan {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 100% 3px;
	opacity: .75;
}

/* -------------------------------------------------------------------------
 * HUD フレーム（画面全体に重なる計器風の枠）
 * すべて静止した装飾です。アニメーションを持たないため負荷はかかりません。
 * ---------------------------------------------------------------------- */
.hud-frame {
	position: fixed;
	inset: 0;
	z-index: 480;
	pointer-events: none;
}

/* 四隅のカギ括弧 */
.hud-frame__corner {
	position: absolute;
	width: 26px; height: 26px;
	border: 1px solid rgba(var(--c1-rgb), .34);
}
.hud-frame__corner--tl { top: 16px;    left: 16px;    border-right: 0; border-bottom: 0; }
.hud-frame__corner--tr { top: 16px;    right: 16px;   border-left: 0;  border-bottom: 0; }
.hud-frame__corner--bl { bottom: 16px; left: 16px;    border-right: 0; border-top: 0; }
.hud-frame__corner--br { bottom: 16px; right: 16px;   border-left: 0;  border-top: 0; }

/* 左右端の縦書きラベル */
.hud-frame__rail {
	position: absolute;
	top: 50%;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--fg-faint);
	white-space: nowrap;
	opacity: .55;
}
.hud-frame__rail--l {
	left: 12px;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
}
.hud-frame__rail--r {
	right: 12px;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
}

/* 上下端の目盛り */
.hud-frame__ticks {
	position: absolute;
	left: 50%;
	width: min(320px, 34vw);
	height: 5px;
	transform: translateX(-50%);
	background-image: linear-gradient(90deg, rgba(var(--c1-rgb), .3) 1px, transparent 1px);
	background-size: 16px 100%;
	opacity: .6;
}
.hud-frame__ticks--t { top: 0; }
.hud-frame__ticks--b { bottom: 0; }

/* 画面が狭いと情報過多になるため隠す */
@media (max-width: 900px) {
	.hud-frame { display: none; }
}

/* スクロール進捗バー */
.progress {
	position: fixed;
	top: 0; left: 0;
	z-index: 999;
	width: 100%;
	height: 2px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: 0 50%;
	box-shadow: 0 0 12px rgba(var(--c1-rgb), .8);
	pointer-events: none;
}


/* =========================================================================
 * 06. オープニング（起動シークエンス）
 * ====================================================================== */
.intro {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	background: var(--bg);
	overflow: hidden;
}

/*
 * このセクションの時間はすべて連動しています。
 * 起動シークエンス全体の長さは JS 側（app.js の initIntro）の
 * START + DURATION = 1700ms で決まり、ここの値はその中に収まるよう
 * 同じ比率で組んであります。速さを変えるときは片方だけでなく
 * 両方を同じ倍率で調整してください。
 */

/* 保険：JavaScript が動かない環境でも 5.5 秒後に必ず消える */
.intro { animation: intro-failsafe 0s linear 5.5s forwards; }
@keyframes intro-failsafe {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 退場：わずかに寄りながら、被写界深度が外れるように消える */
.intro.is-done {
	opacity: 0;
	transform: scale(1.09);
	filter: blur(14px);
	transition: opacity .7s var(--ease-in), transform .85s var(--ease), filter .7s var(--ease);
}

/* --- 精緻なグリッド（周辺をぼかして中央だけ見せる）--- */
.intro__grid {
	position: absolute;
	inset: -10%;
	background-image:
		linear-gradient(rgba(var(--c2-rgb), .1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--c2-rgb), .1) 1px, transparent 1px);
	background-size: 56px 56px;
	opacity: 0;
	transform: scale(1.12);
	transition: opacity 1.2s var(--ease), transform 2s var(--ease);
	mask-image: radial-gradient(58% 58% at 50% 50%, #000 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(58% 58% at 50% 50%, #000 0%, transparent 100%);
}
.intro.is-live .intro__grid { opacity: 1; transform: scale(1); }

/* --- 中央の光のブルーム --- */
.intro__bloom {
	position: absolute;
	top: 50%; left: 50%;
	width: 90vmin; height: 90vmin;
	transform: translate(-50%, -50%) scale(.4);
	background: radial-gradient(circle, rgba(var(--c1-rgb), .16) 0%, rgba(var(--c2-rgb), .07) 38%, transparent 68%);
	opacity: 0;
	transition: opacity 1.05s var(--ease), transform 1.85s var(--ease);
	pointer-events: none;
}
.intro.is-live .intro__bloom { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* --- 中心を通る精密なヘアライン（十字に伸びる）--- */
.intro__rule {
	position: absolute;
	background: linear-gradient(var(--rule-dir, 90deg), transparent, rgba(var(--c1-rgb), .32), transparent);
	transition: transform 1.15s var(--ease);
}
.intro__rule--h {
	--rule-dir: 90deg;
	top: 50%; left: 0;
	width: 100%; height: 1px;
	transform: scaleX(0);
}
.intro__rule--v {
	--rule-dir: 0deg;
	left: 50%; top: 0;
	width: 1px; height: 100%;
	transform: scaleY(0);
}
.intro.is-live .intro__rule--h { transform: scaleX(1); }
.intro.is-live .intro__rule--v { transform: scaleY(1); transition-delay: .08s; }

/* --- 中央のロゴステージ --- */
.intro__stage {
	position: relative;
	z-index: 4;
	display: grid;
	justify-items: center;
	gap: clamp(22px, 4vh, 40px);
}

/* ロゴマーク：線が引かれるように描画される */
.intro__mark {
	width: clamp(76px, 13vmin, 118px);
	height: auto;
	overflow: visible;
}
.intro__path {
	fill: none;
	stroke: var(--c1);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* 実際の全長より長い値を入れ、確実に「未描画」から始める */
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	opacity: .9;
}
.intro.is-live .intro__path { animation: mark-draw 1.15s var(--ease) forwards; }

.intro__path--outer { stroke: rgba(var(--c2-rgb), .75); }
.intro__path--inner { stroke: var(--c1); stroke-width: 2.2; }
.intro__path--cross { stroke: rgba(var(--c3-rgb), .7); stroke-width: 1.2; stroke-dasharray: 130; stroke-dashoffset: 130; }
.intro.is-live .intro__path--inner { animation-delay: .14s; }
.intro.is-live .intro__path--cross { animation-delay: .29s; }

@keyframes mark-draw {
	to { stroke-dashoffset: 0; }
}

/* 中心のコア：遅れて灯り、一度だけ大きく脈打つ */
.intro__core-shape {
	fill: var(--c1);
	opacity: 0;
	transform-origin: 60px 60px;
	transform: scale(.2);
}
.intro.is-live .intro__core-shape { animation: core-ignite .84s var(--ease) .73s forwards; }
@keyframes core-ignite {
	0%   { opacity: 0; transform: scale(.2); }
	55%  { opacity: 1; transform: scale(1.25); }
	100% { opacity: .95; transform: scale(1); }
}

/* ロゴタイプ：広く開いた字間が締まりながら定着する */
.intro__word {
	display: flex;
	font-family: var(--font-en);
	font-size: clamp(26px, 5.2vmin, 46px);
	font-weight: 700;
	color: #fff;
}
.intro__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(14px);
	margin-inline: .48em;   /* 開始時は字間を大きく開けておく */
	filter: blur(6px);
	transition:
		opacity   .69s var(--ease),
		transform .84s var(--ease),
		margin    1.07s var(--ease),
		filter    .69s var(--ease);
	transition-delay: calc(.57s + var(--i) * .07s);
}
.intro.is-live .intro__char {
	opacity: 1;
	transform: none;
	margin-inline: .1em;
	filter: none;
}

/* --- 下部の計器表示（HUD）--- */
.intro__hud {
	position: absolute;
	left: 0; right: 0;
	bottom: clamp(56px, 9vh, 92px);
	z-index: 4;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 18px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .3em;
	color: var(--fg-faint);
	opacity: 0;
	transition: opacity .61s var(--ease) .38s;
}
.intro.is-live .intro__hud { opacity: 1; }
.intro__status { text-transform: uppercase; }
.intro__count {
	color: var(--c1);
	font-variant-numeric: tabular-nums;
}
.intro__count::after { content: "%"; margin-left: .3em; opacity: .5; }

/* --- 進捗のヘアライン --- */
.intro__bar {
	position: absolute;
	left: 50%; bottom: clamp(40px, 7vh, 70px);
	z-index: 4;
	width: min(240px, 42vw);
	height: 1px;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, .1);
	overflow: hidden;
	opacity: 0;
	transition: opacity .61s var(--ease) .38s;
}
.intro.is-live .intro__bar { opacity: 1; }
.intro__bar__fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--grad);
	box-shadow: 0 0 12px rgba(var(--c1-rgb), .9);
}

/* --- スキップ --- */
.intro__skip {
	position: absolute;
	right: clamp(18px, 3vw, 32px);
	bottom: clamp(18px, 3vh, 30px);
	z-index: 6;
	padding: 8px 16px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .28em;
	color: var(--fg-faint);
	border: 1px solid var(--line);
	border-radius: 99px;
	opacity: 0;
	transition: color .3s, border-color .3s, opacity .61s var(--ease) .77s;
}
.intro.is-live .intro__skip { opacity: 1; }
.intro__skip:hover { color: var(--c1); border-color: rgba(var(--c1-rgb), .6); }

@keyframes caret-blink { 50% { opacity: 0; } }


/* =========================================================================
 * 07. ヘッダー / ナビゲーション
 * ====================================================================== */
.header {
	position: fixed;
	top: 0; left: 0;
	z-index: 500;
	width: 100%;
	height: var(--header-h);
	display: flex;
	align-items: center;
	/* backdrop-filter は遷移させない（ぼかしを毎フレーム計算し直すため重くなる） */
	transition: transform .5s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
	border-bottom: 1px solid transparent;
}
/* スクロールで背景が付く */
.header.is-stuck {
	background: rgba(5, 7, 14, .72);
	border-bottom-color: var(--line);
	backdrop-filter: blur(16px) saturate(160%);
}
/* 下方向スクロール時は隠す */
.header.is-hidden { transform: translateY(-100%); }

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

/* --- ブランド --- */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
}
.brand__mark {
	/* 二重の六角枠と頂点ノードが潰れない下限のサイズ */
	width: 38px; height: 38px;
	overflow: visible;
}
/* 外枠とクロスだけを、互い違いの向きに回します（中心のコアは静止）。
   六角形は 60 度、クロスは 90 度で元の形に重なるため、
   途中で止まっても形が崩れません。 */
.brand__mark__ring,
.brand__mark__cross {
	transform-origin: 50px 50px;   /* viewBox の中心（ユーザー単位） */
	transition: transform 1.2s var(--ease);
}
.brand:hover .brand__mark__ring  { transform: rotate(60deg); }
.brand:hover .brand__mark__cross { transform: rotate(-90deg); }

.brand__text {
	font-family: var(--font-en);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .22em;
	line-height: 1;
	color: #fff;
}
.brand__char--accent {
	background: var(--grad);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.custom-logo { max-height: 40px; width: auto; }

/* --- PC ナビ --- */
.nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 36px);
}
.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 36px);
}
.nav__list a,
.nav a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--fg-muted);
}
.nav a::before {
	content: ">_";
	position: absolute;
	left: -1.4em;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--c1);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.nav a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--c1);
	box-shadow: 0 0 10px var(--c1);
	transition: width .35s var(--ease);
}
.nav a:hover,
.nav .current-menu-item > a,
.nav .current_page_item > a { color: #fff; }
.nav a:hover::before { opacity: 1; transform: translateX(0); }
.nav a:hover::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after { width: 100%; }

/* ナビ内の Contact ボタンはリンク装飾を打ち消す */
.nav .btn::before,
.nav .btn::after { content: none; }
.nav .btn {
	padding: 11px 22px;
	font-size: 13px;
	color: #fff;
}

.header__cta { display: inline-flex; }

/* --- ハンバーガー --- */
.burger {
	position: relative;
	z-index: 600;
	display: none;
	width: 44px; height: 44px;
	place-items: center;
}
.burger__bar {
	position: absolute;
	left: 11px;
	width: 22px; height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.burger__bar:nth-child(1) { transform: translateY(-6px); }
.burger__bar:nth-child(3) { transform: translateY(6px); }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: rotate(-45deg); }

/* --- モバイルメニュー --- */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 550;
	display: grid;
	align-content: center;
	padding: 96px var(--gutter) 48px;
	background: rgba(5, 7, 14, .96);
	backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--ease), visibility .4s;
	overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; }

.drawer__watermark {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-en);
	font-size: clamp(90px, 26vw, 200px);
	font-weight: 700;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .03);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

.drawer__list {
	position: relative;
	display: grid;
	gap: 4px;
	width: min(100%, 460px);
	margin-inline: auto;
}
.drawer__list li {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.drawer.is-open .drawer__list li { opacity: 1; transform: none; }
.drawer.is-open .drawer__list li:nth-child(1) { transition-delay: .08s; }
.drawer.is-open .drawer__list li:nth-child(2) { transition-delay: .14s; }
.drawer.is-open .drawer__list li:nth-child(3) { transition-delay: .20s; }
.drawer.is-open .drawer__list li:nth-child(4) { transition-delay: .26s; }
.drawer.is-open .drawer__list li:nth-child(5) { transition-delay: .32s; }

.drawer__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 4px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-en);
	font-size: clamp(24px, 7vw, 34px);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--fg-muted);
	transition: color .3s var(--ease), padding-left .3s var(--ease), border-color .3s var(--ease);
}
.drawer__list a:hover {
	color: #fff;
	padding-left: 14px;
	border-color: rgba(var(--c1-rgb), .5);
}
.drawer__list a .icon { color: var(--c1); }

.drawer__foot {
	position: relative;
	width: min(100%, 460px);
	margin: 32px auto 0;
	display: grid;
	gap: 12px;
}
.drawer__contact {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--fg-faint);
	text-align: center;
}


/* =========================================================================
 * 08. ヒーロー
 * ====================================================================== */
.hero {
	position: relative;
	z-index: 1;
	min-height: 100svh;
	display: grid;
	align-items: center;
	/* 下側は SCROLL インジケーターの高さぶんを確保して、本文と重ならないようにする */
	padding-block: calc(var(--header-h) + 24px) clamp(118px, 17vh, 156px);
}

.hero__inner {
	position: relative;
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
	text-align: center;
}

/* 見出しの左右に伸びる照準線（サイバー感の芯になるディテール） */
.hero__inner::before,
.hero__inner::after {
	content: "";
	position: absolute;
	top: 50%;
	width: clamp(40px, 9vw, 130px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--c1-rgb), .5));
	opacity: 0;
	animation: hero-rule-in 1.2s var(--ease) 1.1s forwards;
}
.hero__inner::before { left: -4%; }
.hero__inner::after {
	right: -4%;
	background: linear-gradient(90deg, rgba(var(--c1-rgb), .5), transparent);
}
@keyframes hero-rule-in {
	to { opacity: 1; }
}
@media (max-width: 900px) {
	.hero__inner::before,
	.hero__inner::after { display: none; }
}

/* タイピングする小見出し */
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: clamp(16px, 2.5vw, 28px);
	font-family: var(--font-mono);
	font-size: clamp(11px, 1.7vw, 14px);
	font-weight: 600;
	letter-spacing: .3em;
	color: var(--c1);
	min-height: 1.6em;
}
.hero__eyebrow::after {
	content: "";
	display: inline-block;
	width: .5em; height: 1.05em;
	margin-left: .3em;
	background: var(--c1);
	animation: caret-blink 1s steps(1) infinite;
}
.hero__eyebrow.is-done::after { animation-delay: 2s; opacity: .6; }

/* 大見出し */
.hero__title {
	font-family: var(--font-jp);
	/* 文言を変えるときの文字数の上限
	   -------------------------------------------------------------------
	   2行目（.hero__title__fx）は 1.14em で表示されるので、
	   画面の端に先に当たるのは必ず2行目です。1行目ではありません。

	   上限 96px・本文幅 1200px のとき:
	     1行目 … 1200 ÷ 96           ＝ 全角 12 文字まで
	     2行目 … 1200 ÷ (96 × 1.14)  ＝ 全角 10 文字まで

	   下限 30px は、スマホ（幅 390px）で2行目が折れないための値です。
	     30 × 1.14 × 10文字 ＝ 342px → 収まる
	   2行目を10文字より長くする場合は、この下限も一緒に下げてください。 */
	font-size: clamp(30px, 8.4vw, 96px);
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: .01em;
	color: #fff;
	margin-bottom: clamp(20px, 3vw, 36px);
	text-wrap: balance;
}
.hero__title__line { display: block; }

/* -------------------------------------------------------------------------
 * 2行目（例：技術で超えろ。）に重ねる演出
 *   ａ. 流れ続けるグラデーション
 *   ｂ. 斜めに走る光沢（シャイン）
 *   ｃ. 背後で脈打つ光
 *   ｄ. ときどき走るグリッチ
 * 文言を変えても演出はそのまま維持されます。
 * ---------------------------------------------------------------------- */
.hero__title__fx {
	position: relative;
	display: inline-block;
	isolation: isolate;
	/* 1行目より一回り大きく見せて、主役であることをはっきりさせる */
	font-size: 1.14em;
	letter-spacing: .02em;
	/* 数秒おきに大きく身震いする（信号が乱れたような揺れ） */
	animation: title-surge 3.2s var(--ease) infinite;
}

/* 大きめの震え：普段は静止し、周期的に一瞬だけ激しく暴れる */
@keyframes title-surge {
	0%, 54%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	56% { transform: translate3d(-7px, 2px, 0) skewX(2.6deg) scale(1.015); }
	58% { transform: translate3d(7px, -3px, 0) skewX(-3deg)  scale(.99); }
	60% { transform: translate3d(-5px, 1px, 0) skewX(1.6deg); }
	62% { transform: translate3d(4px, 2px, 0)  skewX(-1.2deg); }
	64% { transform: translate3d(0, 0, 0) scale(1); }

	82% { transform: translate3d(5px, -2px, 0) skewX(-2deg) scale(1.01); }
	84% { transform: translate3d(-6px, 2px, 0) skewX(2.2deg); }
	86% { transform: translate3d(3px, 1px, 0); }
	88% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ａ. 流れるグラデーション */
.hero__title__fill {
	position: relative;
	z-index: 2;
	background: linear-gradient(100deg,
		var(--c2)  0%,
		var(--c1) 22%,
		#ffffff   38%,
		var(--c1) 52%,
		var(--c3) 74%,
		var(--c2) 100%);
	background-size: 260% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	/* グラデーションの流れ（背景）と、常時の微振動（transform）を同時にかける。
	   別々のプロパティを動かしているため、2つのアニメーションが競合しません。 */
	animation:
		title-flow 5.5s linear infinite,
		title-tremor .18s steps(1, end) infinite;
	filter: drop-shadow(0 0 26px rgba(var(--c1-rgb), .55))
	        drop-shadow(0 0 60px rgba(var(--c2-rgb), .3));
}
@keyframes title-flow {
	to { background-position: -260% 0; }
}

/* 常時の震え。振れ幅と速さを上げて、常に緊張感がある状態にしている。
   これ以上大きくすると読みづらくなるため、2px 前後が上限の目安です。 */
@keyframes title-tremor {
	0%   { transform: translate3d(0, 0, 0); }
	14%  { transform: translate3d(-1.6px, 1.1px, 0); }
	28%  { transform: translate3d(1.4px, -1.3px, 0); }
	42%  { transform: translate3d(-1.1px, -1px, 0); }
	56%  { transform: translate3d(1.7px, .9px, 0); }
	70%  { transform: translate3d(-.9px, 1.4px, 0); }
	84%  { transform: translate3d(1.2px, -.8px, 0); }
	100% { transform: translate3d(-1.4px, -.6px, 0); }
}

/* ｂ. 上から下へ走るスキャンバンド
      文字を「読み取っている」ような表現。宝飾品的な光沢よりも計器らしく、
      サイバーな文脈に合います。 */
.hero__title__shine {
	position: absolute;
	left: -6%; right: -6%;
	top: 0;
	height: 30%;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(var(--c1-rgb), .16) 34%,
		rgba(255, 255, 255, .3)  50%,
		rgba(var(--c3-rgb), .16) 66%,
		transparent 100%);
	mix-blend-mode: screen;
	transform: translateY(-150%);
	animation: title-scan 5.4s cubic-bezier(.5, 0, .2, 1) 1.2s infinite;
}
/* バンドの先端に走る鋭いライン */
.hero__title__shine::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--c1-rgb), .9) 20%, #fff 50%, rgba(var(--c1-rgb), .9) 80%, transparent);
	box-shadow: 0 0 12px rgba(var(--c1-rgb), .9);
}
@keyframes title-scan {
	0%        { transform: translateY(-150%); opacity: 0; }
	6%        { opacity: 1; }
	34%       { opacity: 1; }
	42%, 100% { transform: translateY(420%); opacity: 0; }
}

/* ｃ. 背後で脈打つ光 */
.hero__title__fx::before {
	content: "";
	position: absolute;
	inset: -35% -12%;
	z-index: 1;
	background: radial-gradient(closest-side, rgba(var(--c1-rgb), .3), transparent 72%);
	filter: blur(28px);
	animation: title-pulse 4.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes title-pulse {
	0%, 100% { opacity: .5; transform: scale(.94); }
	50%      { opacity: 1;  transform: scale(1.06); }
}

/* ｄ. グリッチ（カスタマイズ「13. 演出」でOFFにできます）
      RGB を分離した複製を、ごく短時間だけ横にずらして重ねます。 */
.hero__title__fx.glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	z-index: 4;
	color: var(--c1);
	text-shadow: 2px 0 rgba(255, 46, 136, .9), -2px 0 rgba(0, 255, 255, .9);
	clip-path: inset(100% 0 0 0);
	pointer-events: none;
	animation: title-glitch 3.4s steps(1, end) infinite;
}
@keyframes title-glitch {
	0%, 56%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
	58% { clip-path: inset(10% 0 68% 0); transform: translate(-11px, 2px) skewX(7deg); }
	60% { clip-path: inset(54% 0 20% 0); transform: translate(11px, -2px) skewX(-8deg); }
	62% { clip-path: inset(28% 0 46% 0); transform: translate(-7px, 3px) skewX(4deg); }
	64% { clip-path: inset(70% 0 8% 0);  transform: translate(8px, -3px); }
	66% { clip-path: inset(100% 0 0 0);  transform: none; }

	84% { clip-path: inset(38% 0 44% 0); transform: translate(9px, 2px) skewX(-6deg); }
	86% { clip-path: inset(66% 0 12% 0); transform: translate(-9px, -2px) skewX(5deg); }
	88% { clip-path: inset(100% 0 0 0);  transform: none; }
}

/* 復号演出（data-scramble）の実行中は、他の演出を止めて文字の確定に集中させる */
.hero__title__fx.is-scrambling .hero__title__fill  { animation-play-state: paused; }
.hero__title__fx.is-scrambling .hero__title__shine { opacity: 0; }
.hero__title__fx.is-scrambling::after              { opacity: 0; }

.hero__lead {
	font-size: clamp(15px, 2.4vw, 24px);
	font-weight: 500;
	line-height: 1.85;
	color: var(--fg);
	margin-bottom: clamp(14px, 2vw, 20px);
	text-wrap: balance;
}
.hero__sub {
	max-width: 62ch;
	margin: 0 auto clamp(28px, 4vw, 44px);
	font-size: clamp(12.5px, 1.7vw, 15px);
	line-height: 2;
	color: var(--fg-muted);
	text-wrap: pretty;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* スクロール誘導 */
.hero__scroll {
	position: absolute;
	left: 50%; bottom: 22px;
	transform: translateX(-50%);
	display: grid;
	justify-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .3em;
	color: var(--fg-faint);
	transition: color .3s;
}
.hero__scroll:hover { color: var(--c1); }
.hero__scroll__rail {
	position: relative;
	width: 1px; height: 44px;
	background: var(--line-strong);
	overflow: hidden;
}

/* 画面が縦に短い端末では、本文の領域を優先して非表示にする */
@media (max-height: 620px) {
	.hero__scroll { display: none; }
	.hero { padding-bottom: 56px; }
}
.hero__scroll__rail::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 45%;
	background: var(--c1);
	box-shadow: 0 0 8px var(--c1);
	animation: rail-run 1.8s var(--ease) infinite;
}
@keyframes rail-run {
	0%   { transform: translateY(-100%); opacity: 0; }
	40%  { opacity: 1; }
	100% { transform: translateY(240%); opacity: 0; }
}


/* =========================================================================
 * 09. 流れる技術スタック
 * ====================================================================== */
.marquee {
	position: relative;
	z-index: 2;
	display: flex;
	overflow: hidden;
	padding-block: 16px;
	background: rgba(5, 7, 14, .78);
	border-block: 1px solid var(--line);
}

/* 帯の左端に固定されるラベル（マスクの外側に置く） */
.marquee__label {
	position: absolute;
	top: 0; left: 0;
	z-index: 3;
	display: none;
	align-items: center;
	height: 100%;
	padding: 0 20px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .34em;
	color: var(--c1);
	background: linear-gradient(90deg, rgba(5, 7, 14, .95) 70%, transparent);
	border-right: 1px solid rgba(var(--c1-rgb), .25);
}
.marquee__label::before {
	content: "//";
	margin-right: 8px;
	opacity: .5;
}
/* トラックにはパディングを入れません。
   JS が同じ内容を複製して -50% 移動でループさせているため、
   余白を足すと左右の長さがずれて継ぎ目が見えてしまいます。
   ラベルの下は不透明な背景で覆って隠しています。 */
@media (min-width: 720px) {
	.marquee__label { display: flex; }
}

/* 帯の両端をなだらかに消す */
.marquee__viewport {
	display: flex;
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0;
	white-space: nowrap;
	animation: marquee-run 46s linear infinite;
}
/* ホバーしても流れは止めません（常に動き続けます） */
@keyframes marquee-run {
	to { transform: translateX(-50%); }
}
.marquee__item {
	padding-inline: 26px;
	font-family: var(--font-mono);
	font-size: clamp(11px, 1.5vw, 13px);
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--fg-muted);
}
.marquee__sep {
	color: var(--c2);
	opacity: .7;
}


/* =========================================================================
 * 10. セクション見出し
 * ====================================================================== */
.sec-head {
	max-width: 68ch;
	margin: 0 auto clamp(18px, 2.2vw, 30px);
	text-align: center;
}
.sec-head__ja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.sec-head__ja-text {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .34em;
	color: var(--c1);
}
.sec-head__en {
	font-family: var(--font-en);
	font-size: clamp(28px, 5.2vw, 54px);
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
}
.sec-head__text {
	margin-top: 10px;
	font-size: clamp(13px, 1.8vw, 15.5px);
	line-height: 1.9;
	color: var(--fg-muted);
	text-wrap: pretty;
}
.sec-head__rule {
	display: block;
	width: 64px; height: 2px;
	margin: 14px auto 0;
	background: var(--grad);
	box-shadow: 0 0 14px rgba(var(--c1-rgb), .8);
}

/* （左寄せ版 .sec-head--left は、付与する場所が無かったため削除しました） */


/* =========================================================================
 * 11. カード
 * ====================================================================== */
/* カードは同時に何枚も並ぶため backdrop-filter は使いません。
   1枚ごとに背景をぼかし直す処理が入り、スクロールが重くなる原因になります。
   代わりに、やや不透明な面色で「厚み」を出しています。 */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--panel-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: translate .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* ホバーの浮き上がりには transform ではなく translate を使っています。
   カードはスクロール出現（[data-reveal]）で transform を使っており、
   出現後の `transform: none` に打ち消されてしまうためです。
   translate は transform と独立して合成されるので、両立します。 */
.card:hover {
	translate: 0 -6px;
	border-color: rgba(var(--c1-rgb), .45);
	background: var(--panel-card-hover);
	box-shadow: var(--shadow), 0 0 40px -20px rgba(var(--c1-rgb), .6);
}

/* 上辺の光るライン */
.card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 1px;
	background: var(--grad);
	opacity: 0;
	transition: opacity .45s var(--ease);
	z-index: 4;
}
.card:hover::before { opacity: 1; }

/* カーソル追従のスポットライト（JS が --mx / --my を更新）
   ── グラデーションの中心座標を動かすとカード全体が塗り直されるため、
      「固定サイズの光を transform で動かす」方式にしています。
      こちらは合成処理だけで済み、描画コストがほぼ発生しません。 */
.card::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 340px; height: 340px;
	margin: -170px 0 0 -170px;
	background: radial-gradient(closest-side, rgba(var(--c1-rgb), .13), transparent);
	transform: translate3d(var(--mx, 50%), var(--my, 0), 0);
	opacity: 0;
	transition: opacity .45s var(--ease);
	pointer-events: none;
	z-index: 1;
}
.card:hover::after { opacity: 1; }

.card__link { display: flex; flex-direction: column; height: 100%; }
.card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: clamp(20px, 2.4vw, 28px);
	/* ごく薄い走査線を敷き、面に「信号」の質感を与える */
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, .014) 0 1px,
		transparent 1px 4px
	);
}
.card__title {
	font-size: clamp(17px, 2.1vw, 21px);
	font-weight: 700;
	color: #fff;
	line-height: 1.55;
	transition: color .3s var(--ease);
}
.card:hover .card__title { color: var(--c1); }
.card__text {
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--fg-muted);
}
.card__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--fg-faint);
}
.card__meta__sep { margin-inline: .6em; opacity: .5; }
.card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--c1);
}
.card__more .icon { transition: transform .35s var(--ease); }
.card:hover .card__more .icon { transform: translateX(5px); }

/* --- Services カード --- */
.card--service .card__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	margin-bottom: 6px;
	color: var(--c1);
	background: rgba(var(--c1-rgb), .08);
	border: 1px solid rgba(var(--c1-rgb), .28);
	border-radius: 16px;
	transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease);
}
.card--service:hover .card__icon {
	color: #fff;
	background: var(--grad);
	box-shadow: var(--glow-c1);
	transform: rotate(-6deg) scale(1.06);
}
.card--service .card__sub {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--c2);
}
/* 連番（01, 02, 03…）＋ 右上へ伸びるヘアライン */
.card--service .card__no {
	position: absolute;
	top: 26px; right: 30px;
	z-index: 3;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1;
	color: rgba(var(--c1-rgb), .5);
	transition: color .45s var(--ease);
}
.card--service .card__no::before {
	content: "";
	position: absolute;
	top: 50%; right: calc(100% + 10px);
	width: 34px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--c1-rgb), .55));
	transition: width .5s var(--ease);
}
.card--service:hover .card__no { color: var(--c1); }
.card--service:hover .card__no::before { width: 56px; }

/* --- Works カード --- */
.card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-elev);
}
/* 視差で上下に動くぶん、画像は枠より大きめに取って隙間が出ないようにする。
   ホバーの拡大は枠（.card__media）側が担当するため、
   画像の transform は視差だけに使えて競合しません。 */
.card__media img {
	position: absolute;
	top: -9%; left: 0;
	width: 100%;
	height: 118%;
	object-fit: cover;
	opacity: .78;
	transition: opacity .5s var(--ease);
}
.card:hover .card__media img { opacity: 1; }

.card__media {
	transition: transform .8s var(--ease);
}
.card:hover .card__media { transform: scale(1.06); }

.card__placeholder {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	font-family: var(--font-en);
	font-size: 64px;
	font-weight: 700;
	color: rgba(var(--c1-rgb), .22);
	background:
		linear-gradient(135deg, rgba(var(--c2-rgb), .1), transparent 60%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 40px);
}

/* --- 仮データ用のダミービジュアル -----------------------------------------
 * 写真を使わず、CSS だけで「画面のモックアップ風」の絵を描いています。
 * 実在サイトのスクリーンショットではないことが一目で分かる見た目です。
 * 実績を登録すればアイキャッチ画像に置き換わり、このスタイルは使われません。
 * ---------------------------------------------------------------------- */
.card__media--mock {
	background:
		radial-gradient(120% 90% at 20% 0%, rgba(var(--c2-rgb), .16), transparent 65%),
		linear-gradient(160deg, #0a1020, #060912);
	padding: 12px;
}
.mock {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%; height: 100%;
	border: 1px solid rgba(var(--c1-rgb), .22);
	border-radius: 6px;
	background: rgba(6, 10, 20, .85);
	overflow: hidden;
}

/* ブラウザのタイトルバー風 */
.mock__bar {
	display: flex;
	align-items: center;
	gap: 5px;
	flex: none;
	padding: 7px 9px;
	border-bottom: 1px solid rgba(var(--c1-rgb), .16);
	background: rgba(255, 255, 255, .035);
}
.mock__bar i {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: rgba(var(--c1-rgb), .45);
}
.mock__bar i:nth-child(2) { background: rgba(var(--c2-rgb), .45); }
.mock__bar i:nth-child(3) { background: rgba(var(--c3-rgb), .45); }
.mock__url {
	flex: 1;
	height: 6px;
	margin-left: 6px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .07);
}

/* 画面の中身
   ── 枠の高さは 16:9 で固定されているため、中身は必ず fr（比率）で置いています。
      パーセント指定だと親の高さが確定せず、崩れることがあるためです。 */
.mock__screen {
	position: relative;
	flex: 1;
	min-height: 0;
	display: grid;
	align-content: stretch;
	gap: 6px;
	padding: 10px;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(0deg,  rgba(255, 255, 255, .022) 0 1px, transparent 1px 26px);
}

/* 商品一覧（EC）*/
.mock--grid .mock__screen {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
.mock__tile {
	border-radius: 3px;
	background: linear-gradient(150deg, rgba(var(--c1-rgb), .26), rgba(var(--c3-rgb), .12));
	opacity: .75;
}
.mock__tile:nth-child(2) { opacity: .5; }
.mock__tile:nth-child(4) { opacity: .58; }
.mock__tile:nth-child(6) { opacity: .42; }

/* Webページ */
.mock--page .mock__screen { grid-template-rows: 1.7fr auto auto 1.3fr; }
.mock__hero {
	border-radius: 3px;
	background: linear-gradient(110deg, rgba(var(--c2-rgb), .32), rgba(var(--c3-rgb), .16));
}
.mock__line {
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .13);
}
.mock__line--w70 { width: 70%; }
.mock__line--w45 { width: 45%; }
.mock__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 2px;
	min-height: 0;
}
.mock__cols span {
	border-radius: 3px;
	background: rgba(var(--c1-rgb), .16);
}
.mock__cols span:nth-child(2) { background: rgba(var(--c2-rgb), .16); }
.mock__cols span:nth-child(3) { background: rgba(var(--c3-rgb), .16); }

/* 管理画面 / ダッシュボード */
.mock--dash .mock__screen { grid-template-rows: 1fr auto auto; }
.mock__chart {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	min-height: 0;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(var(--c1-rgb), .2);
}
.mock__chart i {
	flex: 1;
	height: var(--h, 50%);
	border-radius: 2px 2px 0 0;
	background: linear-gradient(180deg, rgba(var(--c1-rgb), .65), rgba(var(--c2-rgb), .18));
}

/* 画面の上をゆっくり降りる走査線 */
.mock__scan {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 26%;
	background: linear-gradient(180deg, transparent, rgba(var(--c1-rgb), .12), transparent);
	animation: mock-scan 4.6s linear infinite;
	pointer-events: none;
}
@keyframes mock-scan {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(420%); }
}

/* 画像上を走る光の帯 */
.card__scan {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, transparent 40%, rgba(var(--c1-rgb), .18) 50%, transparent 60%);
	transform: translateY(-100%);
	transition: transform .9s var(--ease);
	pointer-events: none;
}
.card:hover .card__scan { transform: translateY(100%); }


/* =========================================================================
 * 12. ターミナル
 * ====================================================================== */
.terminal {
	position: relative;   /* コーナーブラケット（.hud）の基準 */
	display: flex;
	flex-direction: column;
	min-height: 340px;
	background: rgba(4, 8, 18, .86);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: border-color .5s var(--ease);
}
.terminal:hover { border-color: rgba(var(--c1-rgb), .4); }

.terminal__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	height: 44px;
	flex: none;
	background: rgba(255, 255, 255, .03);
	border-bottom: 1px solid var(--line);
}
.terminal__dots { display: flex; gap: 7px; }
.terminal__dots i {
	width: 11px; height: 11px;
	border-radius: 50%;
	background: #3d4759;
}
.terminal__dots i:nth-child(1) { background: #ff5f57; }
.terminal__dots i:nth-child(2) { background: #febc2e; }
.terminal__dots i:nth-child(3) { background: #28c840; }
.terminal__host {
	flex: 1;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--fg-faint);
}

.terminal__body {
	position: relative;
	flex: 1;
	padding: clamp(18px, 2.4vw, 26px);
	font-family: var(--font-mono);
	font-size: clamp(11px, 1.5vw, 13px);
	line-height: 1.9;
	overflow: hidden;
}
/* 走査線 */
.terminal__body::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, .35) 50%);
	background-size: 100% 4px;
	opacity: .35;
	pointer-events: none;
}

.term-line {
	display: flex;
	gap: .6em;
	opacity: 0;
	transform: translateY(6px);
	/* 保険：JavaScript が動かない環境でも 8 秒後に必ず表示される */
	animation: term-in .28s var(--ease) 8s forwards;
}
/* 画面に入ったら JS が .is-live を付け、各行に個別の遅延を割り当てる */
.terminal.is-live .term-line { animation-delay: 0s; }

@keyframes term-in {
	to { opacity: 1; transform: none; }
}
.term-line--cmd   { color: var(--fg); margin-top: .6em; }
.term-line--cmd::before {
	content: "❯";
	color: var(--c2);
	font-weight: 700;
}
.term-line--log   { color: var(--fg-faint); padding-left: 1.4em; }
.term-line--ok    { color: var(--ok);       padding-left: 1.4em; }
.term-line--warn  { color: var(--warn);     padding-left: 1.4em; }
.term-line--meta  { color: var(--fg-faint); padding-left: 1.4em; font-size: .9em; letter-spacing: .1em; }
.term-line--badge { padding-left: 1.4em; margin-top: .5em; }
.term-line--badge span {
	display: inline-block;
	padding: 5px 12px;
	color: var(--ok);
	background: rgba(52, 211, 153, .1);
	border: 1px solid rgba(52, 211, 153, .35);
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: .08em;
}
/* 末尾の点滅カーソル */
.term-caret {
	display: inline-block;
	width: .55em; height: 1.1em;
	background: var(--c1);
	box-shadow: 0 0 10px var(--c1);
	animation: caret-blink 1.1s steps(1) infinite;
	vertical-align: -.15em;
}

/* --- 特徴リスト（ターミナルの隣） --- */
.feature {
	display: flex;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.feature:last-child { border-bottom: 0; }
.feature__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: none;
	color: var(--c1);
	background: rgba(var(--c1-rgb), .08);
	border: 1px solid rgba(var(--c1-rgb), .25);
	border-radius: 12px;
}
.feature__title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 6px;
}
.feature__text {
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--fg-muted);
}


/* =========================================================================
 * 13. CTA
 * ====================================================================== */
.cta {
	position: relative;
	padding: clamp(36px, 6vw, 68px) clamp(24px, 5vw, 64px);
	text-align: center;
	background: var(--panel-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.cta::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 2px;
	background: var(--grad);
	box-shadow: 0 0 20px rgba(var(--c1-rgb), .8);
}
/* 背景で回るコンフォーカルな光 */
.cta::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 140%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: conic-gradient(from 0deg, transparent 0 70%, rgba(var(--c1-rgb), .1) 85%, transparent 100%);
	animation: cta-sweep 9s linear infinite;
	pointer-events: none;
}
@keyframes cta-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }

/*
 * 中身を背景の回転光（.cta::after）より前面に出すための重ね順です。
 *
 * .hud は除外します。HUD は自前で position: absolute / inset: 0 を持っていて、
 * それを頼りに枠の四隅へカギ括弧を出しています。ここで position: relative を
 * 上書きしてしまうと、幅も高さも持たないインライン要素に変わり、
 * カギ括弧が枠の四隅ではなく本文の中に現れます（さらに空の行が1行増えます）。
 */
.cta > *:not(.hud) { position: relative; z-index: 1; }
.cta__en {
	font-family: var(--font-en);
	font-size: clamp(18px, 3.4vw, 28px);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--c1);
	margin-bottom: 18px;
}
.cta__title {
	font-size: clamp(19px, 3.4vw, 32px);
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
	margin-bottom: 18px;
	text-wrap: balance;
}
.cta__text {
	max-width: 56ch;
	margin: 0 auto clamp(26px, 4vw, 38px);
	font-size: clamp(12.5px, 1.7vw, 15px);
	line-height: 2.1;
	color: var(--fg-muted);
}


/* =========================================================================
 * 14. 下層ページヘッダー / パンくず
 * ====================================================================== */
.page-head {
	position: relative;
	z-index: 1;
	padding-block: calc(var(--header-h) + clamp(26px, 3.8vw, 46px)) clamp(14px, 2vw, 24px);
	text-align: center;
}
.page-head__ja {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .34em;
	color: var(--c1);
	margin-bottom: 12px;
}
.page-head__en {
	font-family: var(--font-en);
	font-size: clamp(30px, 6.4vw, 62px);
	font-weight: 700;
	color: #fff;
}
.page-head__text {
	max-width: 60ch;
	margin: 16px auto 0;
	font-size: clamp(13px, 1.8vw, 15px);
	line-height: 2;
	color: var(--fg-muted);
}

.breadcrumb { margin-bottom: 28px; }
.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--fg-faint);
}
.breadcrumb li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--line-strong);
}
.breadcrumb a:hover { color: var(--c1); }
.breadcrumb [aria-current] { color: var(--fg-muted); }


/* =========================================================================
 * 15. Profile / Contact
 * ====================================================================== */

/* --- 定義リスト（事業者概要） --- */
.panel {
	position: relative;   /* コーナーブラケット（.hud）の基準 */
	padding: clamp(24px, 4vw, 48px);
	background: var(--panel-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.deflist { display: grid; }
.deflist__row {
	display: grid;
	gap: 4px 32px;
	padding: 20px 12px;
	border-bottom: 1px solid var(--line);
	border-radius: 8px;
	transition: background-color .3s var(--ease);
}
.deflist__row:last-child { border-bottom: 0; }
.deflist__row:hover { background: rgba(255, 255, 255, .025); }
.deflist dt {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	color: var(--c1);
}
.deflist dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--fg);
	word-break: break-word;
}
.deflist dd a:hover { color: var(--c1); }
@media (min-width: 768px) {
	.deflist__row { grid-template-columns: 190px 1fr; align-items: start; }
}

/* 事業内容のリスト */
.dotlist { display: grid; gap: 8px; }
.dotlist li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	line-height: 1.8;
}
.dotlist li::before {
	content: "/";
	flex: none;
	color: var(--c2);
	font-family: var(--font-mono);
	font-weight: 700;
}

/* --- 連絡先カード --- */
/* 件数が1〜2枚でも中央にきれいに収まるよう、グリッドではなく flex で並べています
   （グリッドの auto-fit だと列だけ確保されて、右側に空きができてしまうため）。 */
.contact-methods {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}
.contact-method {
	flex: 1 1 240px;
	max-width: 340px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.contact-method:hover { border-color: rgba(var(--c1-rgb), .45); transform: translateY(-2px); }
.contact-method .icon { color: var(--c1); }
.contact-method__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .24em;
	color: var(--fg-faint);
}
.contact-method__value {
	font-family: var(--font-mono);
	font-size: 15px;
	color: #fff;
	word-break: break-all;
}

/* --- Contact Form 7 のダーク化 --- */
.form-area { margin-top: 8px; text-align: left; }
.form-area p { margin-bottom: 18px; }
.form-area label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--fg-muted);
}
.form-area input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.form-area select,
.form-area textarea {
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	font-size: 15px;
	color: var(--fg);
	background: rgba(5, 8, 18, .6);
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
	appearance: none;
}
.form-area textarea { min-height: 170px; resize: vertical; }
.form-area input:focus,
.form-area select:focus,
.form-area textarea:focus {
	outline: none;
	border-color: var(--c1);
	background: rgba(5, 8, 18, .85);
	box-shadow: 0 0 0 3px rgba(var(--c1-rgb), .18);
}
.form-area ::placeholder { color: var(--fg-faint); }

.form-area input[type="submit"],
.form-area button[type="submit"] {
	width: 100%;
	padding: 17px 32px;
	font-family: var(--font-en);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .14em;
	color: #fff;
	background: var(--grad);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 8px 24px -6px rgba(var(--c2-rgb), .55);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.form-area input[type="submit"]:hover,
.form-area button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px -6px rgba(var(--c1-rgb), .7);
}

/* CF7 のメッセージ表示 */
.wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12.5px;
	color: #ff6b8a;
}
.wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 14px 18px !important;
	font-size: 13.5px;
	border-width: 1px !important;
	border-radius: 10px;
	color: var(--fg);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: rgba(52, 211, 153, .5) !important;
	background: rgba(52, 211, 153, .08);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: rgba(255, 107, 138, .5) !important;
	background: rgba(255, 107, 138, .08);
}
.wpcf7-spinner { filter: invert(1) hue-rotate(180deg); }

.form-note {
	margin-top: 20px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--fg-faint);
	text-align: center;
}


/* =========================================================================
 * 16. 記事本文（WordPress 標準ブロック）
 * ====================================================================== */
.prose {
	font-size: 15.5px;
	line-height: 2.05;
	color: var(--fg);
}
.prose > * + * { margin-top: 1.6em; }
.prose h2 {
	margin-top: 2.4em;
	padding-left: 16px;
	font-size: clamp(20px, 3vw, 27px);
	line-height: 1.5;
	color: #fff;
	border-left: 3px solid var(--c1);
	box-shadow: -3px 0 14px -4px rgba(var(--c1-rgb), .9);
}
.prose h3 {
	margin-top: 2.1em;
	font-size: clamp(17px, 2.4vw, 21px);
	color: #fff;
}
.prose h4 { margin-top: 1.8em; font-size: 16px; color: #fff; }
.prose a {
	color: var(--c1);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.prose a:hover { color: #fff; }
.prose strong { color: #fff; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5em; }
.prose li::marker { color: var(--c1); }
.prose img, .prose figure { border-radius: var(--radius); overflow: hidden; }
.prose figcaption {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--fg-faint);
	text-align: center;
}
.prose blockquote {
	margin-inline: 0;
	padding: 18px 24px;
	background: rgba(255, 255, 255, .03);
	border-left: 3px solid var(--c3);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--fg-muted);
}
.prose code {
	padding: .2em .5em;
	font-family: var(--font-mono);
	font-size: .88em;
	color: var(--c1);
	background: rgba(var(--c1-rgb), .1);
	border: 1px solid rgba(var(--c1-rgb), .2);
	border-radius: 5px;
}
.prose pre {
	padding: 20px;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.8;
	background: rgba(5, 8, 18, .8);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.prose pre code { padding: 0; background: none; border: 0; color: var(--fg); }
.prose hr {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.prose th, .prose td {
	padding: 12px 16px;
	border: 1px solid var(--line);
	text-align: left;
}
.prose th { background: rgba(255, 255, 255, .04); color: #fff; }
.prose .wp-block-table { overflow-x: auto; }


/* =========================================================================
 * 17. ページネーション
 * ====================================================================== */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(40px, 6vw, 72px);
}
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px; height: 44px;
	padding-inline: 12px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--fg-muted);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.pagination .page-numbers:hover {
	color: #fff;
	border-color: rgba(var(--c1-rgb), .5);
}
.pagination .page-numbers.current {
	color: #fff;
	background: var(--grad);
	border-color: transparent;
	box-shadow: var(--glow-c2);
}

/* 件数ゼロのときの案内 */
.empty {
	padding: clamp(40px, 6vw, 72px) 24px;
	text-align: center;
	color: var(--fg-muted);
	background: var(--panel);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
}
.empty__title {
	font-family: var(--font-mono);
	font-size: 15px;
	letter-spacing: .16em;
	color: var(--c1);
	margin-bottom: 10px;
}


/* =========================================================================
 * 18. フッター
 * ====================================================================== */
/* 罫線は引かず、上に向かって薄れる面だけで本文と切り分けています。
   はっきりした線を1本入れると「切れて」見えるため、境目をなじませる方針です。 */
.footer {
	position: relative;
	z-index: 1;
	margin-top: clamp(18px, 2.6vw, 36px);
	padding-block: clamp(34px, 4.4vw, 56px) 20px;
	background: linear-gradient(to bottom, transparent, rgba(5, 7, 14, .55) 45%, rgba(5, 7, 14, .85));
}
/* --- 中央揃えのフッター ---
   ロゴを上に置き、その下にサイトマップを横1列でまとめます。 */
.footer__brand {
	display: grid;
	justify-items: center;
	text-align: center;
	margin-bottom: clamp(16px, 2.2vw, 26px);
}

.footer__nav {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(16px, 2.2vw, 26px);
}
.footer__tagline {
	margin-top: 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--fg-faint);
	line-height: 1.9;
}
/* （.footer__heading は、フッターを段組みからやめた時点で使われなくなったため削除しました） */
.footer__list { display: grid; gap: 10px; }
.footer__list a,
.footer__list li {
	font-size: 13.5px;
	color: var(--fg-muted);
	line-height: 1.8;
}
.footer__list a:hover { color: var(--c1); }

/* 横1列にまとめたサイトマップ（項目のあいだに細い仕切りを入れる） */
.footer__list--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 0;
}
.footer__list--inline li {
	display: flex;
	align-items: center;
}
.footer__list--inline li + li::before {
	content: "";
	flex: none;
	width: 1px; height: 11px;
	margin-inline: clamp(12px, 2vw, 20px);
	background: var(--line-strong);
}
.footer__list--inline a {
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--fg-muted);
	transition: color .3s var(--ease);
}

/* ここも罫線ではなく、中央だけ淡く光るグラデーションで区切ります */
.footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px 24px;
	padding-top: 20px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--fg-faint);
}
.footer__bottom::before {
	content: "";
	position: absolute;
	top: 0; left: 50%;
	width: min(320px, 60%);
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .22), transparent);
}

/* ページ最上部へ戻る */
.to-top {
	position: fixed;
	right: 20px; bottom: 20px;
	z-index: 400;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	color: var(--c1);
	background: rgba(11, 17, 32, .92);
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, border-color .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--c1); box-shadow: var(--glow-c1); }
.to-top .icon { transform: rotate(-90deg); }

.footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	padding-block: clamp(20px, 3vw, 32px);
	text-align: center;
}
.footer__widgets a { color: var(--fg-muted); }
.footer__widgets a:hover { color: var(--c1); }
.footer__widgets ul { display: grid; gap: 8px; font-size: 13.5px; }

.widget { margin-bottom: 24px; }
.widget__title {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .26em;
	color: var(--c1);
	margin-bottom: 12px;
}


/* =========================================================================
 * 19. カスタムカーソル（マウス環境のみ）
 * ====================================================================== */
/* 外側のリング
   ── 位置は .cursor の transform、拡大は ::before の scale で行います。
      width/height を変えるとレイアウト計算が走り、追従が引っかかるためです。 */
.cursor {
	position: fixed;
	top: 0; left: 0;
	z-index: 9999;
	width: 0; height: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s;
	will-change: transform;
}
.cursor::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 30px; height: 30px;
	margin: -15px 0 0 -15px;
	border: 1px solid rgba(var(--c1-rgb), .85);
	border-radius: 50%;
	background: transparent;
	transition: transform .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease);
}
/* サイバー感を出す十字のティック */
.cursor::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 44px; height: 44px;
	margin: -22px 0 0 -22px;
	background:
		linear-gradient(var(--c1), var(--c1)) 50% 0   / 1px 6px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 50% 100% / 1px 6px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 0   50% / 6px 1px no-repeat,
		linear-gradient(var(--c1), var(--c1)) 100% 50% / 6px 1px no-repeat;
	opacity: .5;
	transition: transform .4s var(--ease), opacity .3s;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover::before {
	transform: scale(1.85);
	background: rgba(var(--c1-rgb), .1);
	border-color: rgba(var(--c1-rgb), .5);
}
.cursor.is-hover::after { transform: rotate(45deg) scale(1.15); opacity: .9; }
.cursor__dot {
	position: fixed;
	top: 0; left: 0;
	z-index: 9999;
	width: 5px; height: 5px;
	margin: -2.5px 0 0 -2.5px;
	background: var(--c1);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s;
	will-change: transform;
}
.cursor__dot.is-active { opacity: 1; }

/* カーソル有効時は既定のポインタを隠す */
body.has-cursor,
body.has-cursor a,
body.has-cursor button { cursor: none; }


/* =========================================================================
 * 20. スクロール演出
 * ====================================================================== */

/* フェードイン
   ── .js は <head> のインラインスクリプトが付けるフラグです。
      JavaScript が無効／読み込みに失敗した環境では初期状態のまま
      （＝最初から表示されたまま）になり、本文が消えることはありません。 */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* --- 出現の型 ---------------------------------------------------------
 * data-reveal に値を入れると出方を変えられます。
 *   （無指定）… 下からフェードアップ
 *   wipe      … 下から拭き上げるように現れる（カード向き）
 *   left      … 左からスライド
 *   right     … 右からスライド
 *   scale     … 奥から迫り出す
 *   up        … 専用の指定は持たず、無指定と同じフェードアップになります
 *               （料金プランなどで data-reveal="up" と書いていますが、
 *                 意図した動きと結果が一致しているのでそのままにしています）
 * -------------------------------------------------------------------- */
/* wipe：下から迫り上がりながら、潰れた状態から立ち上がる。
   ── ここで clip-path は使いません。要素を高さ0に切り抜くと
      IntersectionObserver が「交差していない」と判断することがあり、
      出現のきっかけが永久に来ないまま消えたままになるためです。 */
.js [data-reveal="wipe"] {
	transform: translateY(46px) scaleY(.94);
	transform-origin: center bottom;
	transition: opacity .7s var(--ease), transform .9s var(--ease);
}

.js [data-reveal="left"]  { transform: translateX(-48px) skewX(3deg); }
.js [data-reveal="right"] { transform: translateX(48px)  skewX(-3deg); }
.js [data-reveal="scale"] { transform: scale(.9) translateY(24px); }

/* 出現の瞬間に上辺が光る（サイバー感の芯になる合図） */
.js [data-flash] { position: relative; }
.js [data-flash]::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 1px;
	z-index: 9;
	background: linear-gradient(90deg, transparent, var(--c1), transparent);
	opacity: 0;
	pointer-events: none;
}
.js [data-flash].is-in::before { animation: reveal-flash .9s var(--ease) forwards; }
@keyframes reveal-flash {
	0%   { opacity: 0; transform: scaleX(0); }
	35%  { opacity: 1; transform: scaleX(1); }
	100% { opacity: 0; transform: scaleX(1); }
}

/* 1文字ずつ立ち上がる見出し */
[data-split] .char {
	display: inline-block;
	opacity: 0;
	transform: translateY(.5em) rotateX(-60deg);
	transition: opacity .5s var(--ease), transform .6s var(--ease);
	transition-delay: calc(var(--i, 0) * 28ms);
	will-change: transform;
}
[data-split].is-in .char { opacity: 1; transform: none; }

/* カード群を時間差で出す */
[data-stagger] > * { --reveal-delay: calc(var(--i, 0) * 90ms); }

/* スクロール視差。JS は --py だけを更新し、変形の合成は CSS 側で行います。 */
[data-parallax] {
	transform: translate3d(0, var(--py, 0px), 0);
	will-change: transform;
}

/* --- セクション区切り（スクロールで線が引かれ、光が走る）--------------- */
.divider {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
	padding-block: clamp(4px, .8vw, 10px);
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--fg-faint);
}
.divider__line {
	position: relative;
	flex: 1;
	height: 1px;
	background: var(--line);
	overflow: hidden;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s var(--ease);
}
.divider.is-in .divider__line { transform: scaleX(1); }

/* 線の上を一度だけ走る光 */
.divider__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, var(--c1), transparent);
	transform: translateX(-100%);
	box-shadow: 0 0 10px rgba(var(--c1-rgb), .8);
}
.divider.is-in .divider__line::after {
	animation: divider-run 1.4s var(--ease) .35s forwards;
}
@keyframes divider-run {
	to { transform: translateX(100%); }
}

.divider__text {
	flex: none;
	opacity: 0;
	transition: opacity .8s var(--ease) .5s;
}
.divider.is-in .divider__text { opacity: .8; }

/* 端の小さな四角（計器のマーカー） */
.divider__node {
	flex: none;
	width: 5px; height: 5px;
	border: 1px solid rgba(var(--c1-rgb), .6);
	transform: rotate(45deg) scale(0);
	transition: transform .6s var(--ease) .3s;
}
.divider.is-in .divider__node { transform: rotate(45deg) scale(1); }


/* =========================================================================
 * 21. 進め方（プロセス）
 * -------------------------------------------------------------------------
 * 縦に並ぶ4ステップ。左端の番号どうしを細い線でつなぎ、
 * その上を光の粒がゆっくり降りていく計器風の見せ方にしています。
 * ====================================================================== */
.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(10px, 1.4vw, 16px);
}

.step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: clamp(14px, 2.2vw, 24px);
	padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-card);
	overflow: hidden;
	transition: border-color .4s var(--ease), background .4s var(--ease), translate .4s var(--ease);
}
/* ホバーの移動は translate を使用（理由はカードの実装コメントを参照） */
.step:hover {
	translate: 4px 0;
	border-color: rgba(var(--c1-rgb), .34);
	background: var(--panel-card-hover);
}

/* 左端で薄く光る縦のガイド線 */
.step::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 2px;
	background: linear-gradient(180deg, rgba(var(--c1-rgb), .7), rgba(var(--c3-rgb), .25));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .8s var(--ease) .1s;
}
.js .step.is-in::before { transform: scaleY(1); }
/* JavaScript が動かない環境では、最初から線を引いた状態にする */
html:not(.js) .step::before { transform: scaleY(1); }

/* --- 番号 --- */
.step__no {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(46px, 6vw, 58px);
	aspect-ratio: 1;
	flex: none;
	border: 1px solid rgba(var(--c1-rgb), .32);
	background: rgba(4, 9, 20, .7);
	/* 角を落としてサイバー寄りの造形にする */
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
	transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover .step__no {
	border-color: rgba(var(--c1-rgb), .7);
	box-shadow: 0 0 22px -4px rgba(var(--c1-rgb), .55);
}
.step__no__num {
	font-family: var(--font-en);
	font-size: clamp(17px, 2.4vw, 21px);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	background: var(--grad);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* 番号の枠を回り込む1本の光 */
.step__no::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-top: 1px solid rgba(var(--c1-rgb), .85);
	opacity: 0;
	transform: translateY(0);
	transition: opacity .4s var(--ease);
	animation: step-sweep 3.4s var(--ease) infinite;
	animation-delay: calc(var(--i, 0) * .45s);
	pointer-events: none;
}
@keyframes step-sweep {
	0%, 70%  { opacity: 0;  transform: translateY(0); }
	78%      { opacity: .9; }
	100%     { opacity: 0;  transform: translateY(100%); }
}

/* --- 本文 --- */
.step__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--c1);
	margin-bottom: 6px;
}
.step__title {
	font-size: clamp(16px, 2.1vw, 19px);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .01em;
	margin: 0;
}
.step__text {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.95;
	color: var(--fg-muted);
}

/* 期間などの補足。広い画面では右端に寄せる */
.step__meta {
	grid-column: 2;
	justify-self: start;
	margin-top: 12px;
	padding: 4px 11px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--fg-faint);
	border: 1px solid var(--line);
	border-radius: 99px;
	white-space: nowrap;
}

@media (min-width: 860px) {
	.step { grid-template-columns: auto 1fr auto; }
	.step__meta {
		grid-column: 3;
		grid-row: 1;
		align-self: center;
		justify-self: end;
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.step { padding: 18px 16px; gap: 14px; }
	.step__no { width: 42px; }
}


/* =========================================================================
 * 22. 料金の目安
 * -------------------------------------------------------------------------
 * 通常のカード（.card）をそのまま土台にして、金額だけを際立たせています。
 * 列数は項目数に応じて PHP 側（ihxs_grid_class）が決めます。
 * ====================================================================== */
/* 見出し → 金額 → 補足の3段だけなので、既定より行間を詰めすぎないよう調整 */
.card--price .card__body { gap: 8px; }

/* 金額。数字が主役なので、見出しより大きく出す。
   ただし大きくしすぎると枠に対して窮屈に見えるため、上限は控えめにしています。 */
.price__amount {
	margin-top: 2px;
	font-family: var(--font-en);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .01em;
	background: var(--grad);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	/* グラデーション文字は環境によっては透明のままになるため、色を保険で残す */
	-webkit-text-fill-color: transparent;
}

.price__note {
	margin-top: auto;   /* 補足はカードの下端に揃える */
	padding-top: 14px;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--fg-muted);
	border-top: 1px solid var(--line);
}

/* 表の下の注記 */
.price__disclaimer {
	max-width: 780px;
	margin: clamp(18px, 2.4vw, 30px) auto 0;
	padding: 14px 18px;
	font-size: 13px;
	line-height: 1.85;
	text-align: center;
	color: var(--fg-muted);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: rgba(var(--c1-rgb), .03);
}

@media (max-width: 640px) {
	.price__disclaimer { text-align: left; }
}


/* =========================================================================
 * 23. よくある質問（FAQ）
 * -------------------------------------------------------------------------
 * HTML 標準の <details> を使っているため、JavaScript なしでも開閉します。
 * ====================================================================== */
.faq {
	display: grid;
	gap: 10px;
}

.faq__item {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--panel-card);
	overflow: hidden;
	transition: border-color .4s var(--ease), background .4s var(--ease);
}
.faq__item:hover { border-color: rgba(var(--c1-rgb), .3); }
.faq__item[open] {
	border-color: rgba(var(--c1-rgb), .38);
	background: var(--panel-card-hover);
}

/* --- 質問（クリックで開閉する行） --- */
.faq__q {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(15px, 2vw, 19px) clamp(16px, 2.2vw, 22px);
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: clamp(14px, 1.9vw, 16px);
	line-height: 1.7;
	transition: color .3s var(--ease);
}
/* 各ブラウザの既定マーカー（▶ など）を消す */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: #fff; }
.faq__q:focus-visible {
	outline: 2px solid var(--c1);
	outline-offset: -2px;
}
.faq__q__text { flex: 1; }

/* Q / A の記号 */
.faq__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	margin-top: 1px;
	font-family: var(--font-en);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--c1);
	border: 1px solid rgba(var(--c1-rgb), .35);
	border-radius: 5px;
	background: rgba(4, 9, 20, .6);
}
.faq__mark--a {
	color: var(--c3);
	border-color: rgba(var(--c3-rgb), .38);
}

/* 開閉インジケーター（＋ → ×） */
.faq__toggle {
	position: relative;
	flex: none;
	width: 16px; height: 16px;
	margin-top: 5px;
	transition: transform .35s var(--ease);
}
.faq__toggle::before,
.faq__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--c1);
}
.faq__toggle::before { width: 14px; height: 1px; }
.faq__toggle::after  { width: 1px; height: 14px; transition: transform .35s var(--ease); }
.faq__item[open] .faq__toggle { transform: rotate(180deg); }
.faq__item[open] .faq__toggle::after { transform: scaleY(0); }

/* --- 回答 --- */
.faq__a {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0 clamp(16px, 2.2vw, 22px) clamp(17px, 2.2vw, 21px);
	animation: faq-open .4s var(--ease);
}
.faq__a__text {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: var(--fg-muted);
}
@keyframes faq-open {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* 開いている項目の左端に走る線 */
.faq__item[open]::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--c1), rgba(var(--c3-rgb), .3));
}


/* =========================================================================
 * 24. サービス個別ページ（LP）
 * -------------------------------------------------------------------------
 * /service/<スラッグ>/ で表示される、サービスごとのページです。
 * 見出し・課題リスト・料金プランはこのページ専用。
 * カード・ステップ・FAQ は既存の部品をそのまま流用しています。
 * ====================================================================== */

/* --- カードをまるごとリンクにする ------------------------------------
   見出しの中のリンクを、擬似要素でカード全体に広げています。
   <a> でカード全体を囲まないのは、中の見出しやタグの意味を保つためです。 */
.card--link { cursor: pointer; }
.card__stretch {
	color: inherit;
	text-decoration: none;
}
.card__stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}
/* キーボード操作でも、どのカードを選んでいるか分かるようにする */
.card__stretch:focus-visible { outline: none; }
.card:has(.card__stretch:focus-visible) {
	border-color: var(--c1);
	box-shadow: 0 0 0 2px rgba(var(--c1-rgb), .5);
}

/* --- ページ見出し ---------------------------------------------------- */
.svc-head {
	text-align: left;
	padding-bottom: clamp(20px, 3vw, 34px);
}
/* パンくずは共通側で中央寄せになっているので、このページだけ左に戻す */
.svc-head .breadcrumb ol { justify-content: flex-start; }
.svc-head__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.svc-head__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	color: var(--c1);
	background: rgba(var(--c1-rgb), .08);
	border: 1px solid rgba(var(--c1-rgb), .28);
	border-radius: 15px;
}
.svc-head__sub {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--c1);
}
.svc-head__title {
	font-family: var(--font-jp);
	font-size: clamp(26px, 4.6vw, 46px);
	font-weight: 700;
	line-height: 1.45;
	color: #fff;
}
.svc-head__lead {
	max-width: 62ch;
	margin-top: 20px;
	font-size: clamp(14px, 1.9vw, 16.5px);
	line-height: 2.05;
	color: var(--fg-muted);
}
.svc-head__tags { margin-top: 22px; }
.svc-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(24px, 3.4vw, 34px);
}

/* --- こんな課題はありませんか ----------------------------------------- */
.checks {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 20px;
	background: var(--panel-card);
	border: 1px solid var(--line);
	border-left: 2px solid rgba(var(--c3-rgb), .5);
	border-radius: var(--radius);
	transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.check:hover {
	border-color: rgba(var(--c1-rgb), .4);
	border-left-color: var(--c1);
	background: var(--panel-card-hover);
}
/* 先頭の印。チェックではなく「該当している状態」を示す記号として置いています */
.check__mark {
	position: relative;
	flex: none;
	width: 16px; height: 16px;
	margin-top: 4px;
	border: 1px solid rgba(var(--c3-rgb), .7);
	border-radius: 4px;
}
.check__mark::before,
.check__mark::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 9px; height: 1.5px;
	background: var(--c3);
	transform-origin: center;
}
.check__mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.check__mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.check__text {
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--fg);
}
.checks__note {
	margin-top: clamp(18px, 2.4vw, 26px);
	font-size: 13.5px;
	line-height: 1.9;
	text-align: center;
	color: var(--fg-muted);
}
.checks__note a { color: var(--c1); }

/* --- 料金プラン ------------------------------------------------------- */
.plans {
	display: grid;
	gap: clamp(12px, 1.4vw, 18px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}
.plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* プランが1〜2枚のときは横に間延びさせず、中央に寄せる */
.plans:has(> .plan:last-child:nth-child(1)) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.plans:has(> .plan:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.6vw, 30px);
	background: var(--panel-solid);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: translate .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.plan::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--grad);
	opacity: .55;
}
.plan:hover {
	translate: 0 -6px;
	border-color: rgba(var(--c1-rgb), .45);
	box-shadow: var(--shadow), 0 0 40px -20px rgba(var(--c1-rgb), .6);
}
.plan__head { padding-bottom: 18px; }
.plan__name {
	font-size: clamp(15px, 1.9vw, 17px);
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
}
.plan__price {
	margin-top: 10px;
	font-family: var(--font-en);
	font-size: clamp(22px, 2.7vw, 30px);
	font-weight: 700;
	line-height: 1.35;
	background: var(--grad);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	/* グラデーション文字が透明のままになる環境への保険 */
	-webkit-text-fill-color: transparent;
}
.plan__note {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--fg-faint);
}
.plan__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-top: 18px;
	list-style: none;
	border-top: 1px solid var(--line);
}
.plan__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--fg-muted);
}
.plan__check {
	position: relative;
	flex: none;
	width: 14px; height: 14px;
	margin-top: 4px;
}
.plan__check::before {
	content: "";
	position: absolute;
	top: 1px; left: 4px;
	width: 5px; height: 10px;
	border-right: 1.5px solid var(--c1);
	border-bottom: 1.5px solid var(--c1);
	transform: rotate(42deg);
}

@media (max-width: 1080px) {
	.plans,
	.plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.plans,
	.plans--4,
	.plans:has(> .plan:last-child:nth-child(2)) { grid-template-columns: minmax(0, 1fr); }
	.svc-head__actions .btn { flex: 1 1 100%; justify-content: center; }
}


/* フッターのサービス一覧（.footer__services）は廃止したため、
   対応する CSS も削除しました。 */

/* --- フッターの規約リンク --- */
.footer__legal { margin-top: clamp(16px, 2vw, 22px); }
.footer__legal__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer__legal__list li { display: flex; align-items: center; }
.footer__legal__list li + li::before {
	content: "";
	width: 1px;
	height: 10px;
	margin-inline: 12px;
	background: var(--line);
}
.footer__legal__list a {
	font-size: 12px;
	color: var(--fg-faint);
	transition: color .3s var(--ease);
}
.footer__legal__list a:hover { color: var(--c1); }

/* --- お問い合わせフォームの同意文 --- */
.form-consent {
	margin-bottom: clamp(20px, 2.6vw, 28px);
	padding: 14px 18px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--fg-muted);
	background: rgba(var(--c1-rgb), .04);
	border: 1px solid var(--line);
	border-left: 2px solid rgba(var(--c1-rgb), .5);
	border-radius: var(--radius);
}
.form-consent a {
	color: var(--c1);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* =========================================================================
 * 25. レスポンシブ
 * ====================================================================== */
@media (max-width: 900px) {
	.nav,
	.header__cta { display: none; }
	.burger { display: grid; }
	:root { --header-h: 64px; }
}

@media (max-width: 640px) {
	body { font-size: 15px; }
	.hero { min-height: 92svh; }
	.fx__floor { height: 46vh; background-size: 52px 52px; }
	.terminal { min-height: 300px; }
	.to-top { right: 14px; bottom: 14px; }
	.card--service .card__no { font-size: 34px; top: 16px; right: 18px; }

	/* --- スマートフォン向けの負荷軽減 ---------------------------------------
	 * 背景の光の層は、いずれも「大きくぼかした面を合成する」処理で、
	 * 画面が小さい端末ほど描画コストが相対的に重くなります。
	 * 小さい画面では背景の大半がコンテンツで隠れるため、
	 * 重なりの多い層だけを省き、見た目の印象は保ったまま負荷を下げています。
	 * PC の表示はこれまでどおりです。
	 * -------------------------------------------------------------------- */
	.fx__aurora,
	.fx__sweep,
	.fx__beam--2 { display: none; }

	/* ぼかしの半径は要素の大きさに対して決めるため、小さい画面では縮める */
	.fx__orb { filter: blur(64px); }
}

/* タッチ端末ではホバー由来の演出を抑える */
@media (hover: none) {
	.cursor, .cursor__dot { display: none; }
	.card:hover { translate: none; }
	.step:hover { translate: none; }
}


/* =========================================================================
 * 26. アクセシビリティ / 印刷
 * ====================================================================== */

/* OS の「視差効果を減らす」設定を最優先で尊重する */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.js [data-reveal],
	[data-split] .char {
		opacity: 1 !important;
		transform: none !important;
	}
	/* 動きの強い背景レイヤーは丸ごと止める */
	.fx__floor,
	.fx__noise,
	.fx__canvas,
	.fx__sweep,
	.fx__beam,
	.fx__aurora { display: none; }

	.term-line { opacity: 1; transform: none; }
	.cursor, .cursor__dot { display: none; }

	/* ヒーローの照準線はアニメーションを待たずに表示する */
	.hero__inner::before,
	.hero__inner::after { opacity: 1 !important; }

	/* 出現の型・区切り線・視差もすべて最終状態で固定する */
	[data-parallax] { transform: none !important; }
	.step::before { transform: scaleY(1) !important; }
	.step__no::after { display: none; }
	.mock__scan { display: none; }
	.divider__line { transform: scaleX(1) !important; }
	.divider__text { opacity: .8 !important; }
	.divider__node { transform: rotate(45deg) scale(1) !important; }
	.divider__line::after { display: none; }

	/* 見出しの演出も静止させ、確実に読める状態にする */
	.hero__title__shine,
	.hero__title__fx::before,
	.hero__title__fx.glitch::after { display: none; }
	.hero__title__fill {
		background: var(--grad);
		background-size: 100% 100%;
		background-clip: text;
		-webkit-background-clip: text;
	}

	/* オープニングは各要素を最終状態で固定する */
	.intro__grid,
	.intro__bloom,
	.intro__hud,
	.intro__bar,
	.intro__skip { opacity: 1 !important; }
	.intro__char {
		opacity: 1 !important;
		margin-inline: .1em !important;
		filter: none !important;
		transform: none !important;
	}
	.intro__path      { stroke-dashoffset: 0 !important; }
	.intro__core-shape { opacity: .95 !important; transform: none !important; }
}

@media print {
	.fx, .header, .drawer, .to-top, .cursor, .cursor__dot,
	.intro, .marquee, .progress, .hero__scroll { display: none !important; }
	body { background: #fff; color: #000; }
	.panel, .card, .cta { border: 1px solid #ccc; background: none; box-shadow: none; }
	a { color: #000; text-decoration: underline; }
}

/* Native form controls and long contact details must remain usable on phones. */
.form-area input[type="checkbox"], .form-area input[type="radio"] { appearance: auto; width: auto; accent-color: var(--c1); }
.form-area select { appearance: auto; }
.form-area select option { color: var(--fg); background: var(--bg, #05070e); }
.form-area input[type="submit"]:disabled, .form-area button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.contact-method__value { overflow-wrap: anywhere; }