@charset "utf-8";
/* ===================================================================
 file name  :top-hero.css
 トップページ（JP / EN）のヒーロー（#FIRSTVIEW）専用。common.php がトップでだけ読み込む。
 2026-10 に動画ヒーローを廃止し、C5 案（明るめの紺の地・厚みのあるチップ・遠近の軌道環に 7 工程）に置換。
 設計: docs/superpowers/specs/2026-10-12-top-performance-desktop-design.md の 4-1
=================================================================== */

/*----------------------------------------------------
	基本（旧 css/page/index.css の FIRSTVIEW から移設）
----------------------------------------------------*/
#FIRSTVIEW {
	width: 100%;
	position: relative;
}
.scroll{
	display:block;
	width:64px;
	position:absolute;
	left:50%;
	bottom:20px;
	z-index: 55;
	margin-left:-32px;
	color:#FFF;
	font-size:10px;
	letter-spacing:0.24em;
	text-align:center;
}
.scroll:before,
.scroll:after {
	content:'';
	display:block;
	margin:0 auto;
}
.scroll:before {
	width:23px;
	height:44px;
	border-radius: 40px;
	border:#FFF 1px solid;
	margin-bottom:12px;
}
.scroll:after {
	width:1px;
	height:48px;
	position:absolute;
	bottom:48px;
	left:49%;
	background:#FFF;
	transform-origin: 50% 0;
	/* 上から伸びて下へ抜ける線。transform だけで動かし（合成で動く）、3 回・4.8 秒で止める（WCAG 2.2.2。止まった後は線を表示したまま）。
	   旧版は height・bottom を無限に動かしていたため、毎フレーム メインスレッドで組み直しが起きていた */
	animation: scroll 1.6s ease 0s 3;
}
@keyframes scroll {
	0%   { transform: scaleY(.02); }
	40%  { transform: scaleY(1); }
	80%  { transform: translateY(48px) scaleY(0); }
	100% { transform: translateY(48px) scaleY(0); }
}

/* D4/D9: ヒーローのテキスト群は固定 bottom をやめ、下寄せの flex 縦積みに。
   言語・行数に依らずタイトルと本文が重ならない（EN は本文が長く従来 overlap していた）。
   幅 1100px 未満は下の @media(max-width:1099.98px) が .mv_inner を中央寄せに上書きする。 */
.mv_inner{
	position: absolute;
	left: 50px;
	bottom: 50px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* D9: ヒーロー eyebrow（小英語キッカー・Barlow Condensed） */
.mv_eyebrow{
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 5px #000;
	margin: 0 0 10px;
}
.mv_title{
	position: static;
	opacity: 1;
	color: #fff;
	text-shadow: 0 0 6px rgba(0,0,0,.85);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .02em;
	margin: 0 0 18px;
}

.mv_txt{
	position: static;
	opacity: 1;
	color: #fff;
	text-shadow: 0 0 5px #000;
	font-size: 1.2rem;
	max-width: 34rem;
	line-height: 1.9;
	text-wrap: pretty;
	margin: 0 0 24px;
}

.mv_cta{
	position: static;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.mv_cta a{
	display: inline-flex;
	align-items: center;
	background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-accent) 80%);
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1;
	padding: 16px 34px;
	border-radius: 99px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0,0,0,.28);
	transition: background .3s, transform .2s;
}
.mv_cta a::after{
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
.mv_cta a:hover{
	background: linear-gradient(90deg, #02913b 0%, #00a08c 80%);
	transform: translateY(-2px);
}
/* D9: 副CTA（お問い合わせ）= 暗背景向けの白アウトライン pill */
.mv_cta a.is-ghost{
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .85);
	box-shadow: none;
	padding: 14px 32px;
}
.mv_cta a.is-ghost:hover{
	background: rgba(255, 255, 255, .14);
	transform: translateY(-2px);
}

/*--- 	SP Style	---*/
/* ヒーローの縦積み（スマホと同じ配置）はタブレット幅（〜1099px）まで使う。横並びは 1100px 未満で文字の列が狭くなり、
   見出しの折り返し・CTA のはみ出し・SCROLL との重なりが起きるため（サイト共通のヘッダーの切り替え 768px とは別）。
   上限を 1099.98px にするのは、表示倍率などで画面幅が小数（例 1099.4px）になっても 1100px 以上の指定との間に隙間を作らないため */
@media screen and (max-width:1099.98px){

	/* モバイルでもヒーローの見出し・リード・CTA を中央表示 */
	.scroll{
		display: none;
	}
	.mv_inner{
		position: absolute;
		left: 0; right: 0; top: 0; bottom: 0;
		z-index: 5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0 24px;
	}
	.mv_title{
		display: block;
		position: static;
		left: auto; right: auto; bottom: auto;
		font-size: 1.5rem;
		line-height: 1.5;
		margin: 0 0 14px;
	}
	.mv_txt{
		display: block;
		position: static;
		left: auto; right: auto; bottom: auto;
		font-size: 0.82rem;
		line-height: 1.85;
		margin: 0 0 22px;
		max-width: 30rem;
		text-wrap: balance;
	}
	.mv_cta{
		position: static;
		left: auto; right: auto; bottom: auto;
	}
	.mv_cta a{
		font-size: 0.95rem;
		padding: 13px 30px;
	}

}

/*----------------------------------------------------
	ヒーロー C5
	- 地：明るめの紺に緑〜ティールの静的な光・髪の毛ほどの格子・微細ドット・基板配線（マスクで構図に沿わせる）
	- チップ：厚みのあるパッケージ、金属のピン、微細構造のダイ。正面を向くモノリス
	- 環：rotateX(70deg) の軌道面に本物の遠近。面内の回転だけで光の先頭・描画・駅の光点が同期
	- ラベル：平置きの別レイヤーに投影座標（perspective 1400u・R250u）で配置＝常に読める。
	  駅から引き出し線を上下に立て、その先にすりガラスの台（環の線と重ねない）
	- 動かすのは transform（3D 含む）と opacity だけ。4.98 秒で完全に静止し、繰り返さない（WCAG 2.2.2）。
	  見出し・本文は最初から可視（LCP を遅らせない）。登場は 16px の移動だけ

	タイムライン（PC/SP 共通）
	0.0–0.9  文字が 16px 浮く／地の光・格子・配線・ONE-STOP の輪郭文字／チップが 20u 下から据わる／軌道の下地
	0.76–1.45 8 本の配線を光が外側からチップへ流れ、1.45 に同時到達
	1.42–2.3 点灯：パッド・白い閃き・ダイの発光・縁の光・床の反射、光の輪が軌道面を 1 回だけ環まで走る
	1.6–2.1  配線の光が引き、細い線だけ残る
	2.0      先頭が 01 を出発（01 起動）、環の描画開始
	2.51/2.78/3.00/3.21/3.47/3.77  02〜07 が先頭の到達と同時に起動（面内の光点＋引き出し線＋ラベル＋番号の強調）
	         各駅：d−.06 から引き出し線が .24s で伸び、d+.1 からラベルが線の先から .38s で現れる（07 は 4.25 で完了）
	4.35     環が閉じて 01 に着地。環が一度だけ光る（.6s）、先頭は 4.65 までに消える
	4.35–4.98 締めの波：駅の光点とラベルの光沢が 01→07 の順に走る（開始 = 4.35 + (d − 2) × .1）
	4.3–4.9  中央の言葉が現れて静止
----------------------------------------------------*/
#FIRSTVIEW.hc {
	--hc-h: calc(100vh - 130px);
	--hc-bg: #112d3d;
	--hc-white: #ffffff;
	--hc-soft: rgba(255, 255, 255, .8);
	--hc-line: rgba(255, 255, 255, .12);
	--hc-brand: var(--color-brand, #03b44a);
	--hc-accent: var(--color-accent, #00c6ae);
	--hc-ease: cubic-bezier(.22, .61, .36, 1);
	--hc-pop: cubic-bezier(.2, .8, .2, 1);
	--t0: 2s;
	--tA: 1.1s;
	--tB: 1.25s;
	--tEnd: calc(var(--t0) + var(--tA) + var(--tB));   /* 環が閉じる時刻 4.35s */
	--tilt: 70deg;
	--oy: -14;       /* 軌道中心の上方オフセット（u） */
	--s: min(600px, calc(var(--hc-h) - 230px), 40vw);
	--hc-raise: 0px;
	--u: calc(var(--s) / 500);
	--hc-pad-r: clamp(50px, calc(160px - (100vw - 1440px) / 2), 160px);   /* .hc-wrap の右の余白（舞台の右端を画面の右端から 160px に保つ） */
	/* 右のまとまり（舞台・言葉）と ONE-STOP を左へ寄せる量（2026-10-13 金子氏。ノート PC の幅で、右端のラベルが右のクイックメニューに 20〜40px まで迫っていた）。
	   舞台の右端を画面の右端から 200px まで離す（ラベルとメニューの間 約 78px）。ただし最大 40px で、左の文字の列との間に余裕があるときだけ寄せる
	   （余裕＝右の余白の内側の幅 − 舞台 − 600px〔左の列 500px＋間 24px＋ラベルのはみ出しと最小の間 76px〕。1280×800・1100×800 などでは寄せない）。
	   100vw はスクロールバーを含むため、16px 引いて見積もる */
	--hc-shift: max(0px, min(40px, calc(200px - max(160px, (100vw - 1340px) / 2)), calc(min(100vw - 16px, 1440px) - 50px - var(--hc-pad-r) - 600px - 600 * var(--u))));
	position: relative;
	height: var(--hc-h);
	min-height: 560px;
	overflow: hidden;
	color: var(--hc-white);
	background:
		radial-gradient(ellipse 60% 70% at 72% 58%, rgba(0, 198, 174, .28) 0%, rgba(3, 180, 74, .1) 40%, rgba(3, 180, 74, 0) 70%),
		linear-gradient(180deg, #17384a 0%, var(--hc-bg) 55%, #0c2230 100%);
}
.hc .scroll { color: var(--hc-white); z-index: 55; }
/* SCROLL はヒーロー下端の中央（位置は .scroll の既定のまま。2026-10-13 金子氏決定・設計: 2026-10-13-top-pickup-card-design.md 3-1 節）。
   中央は C5 の環の下の言葉の左端に近いため、出すときは C5 の舞台を 40px 上げ（--hc-raise）、大きさ（--s）を少し抑えて、言葉の左下に場所をあける。
   出すのは、アイコンが最初の画面に入る高さ（760px 以上）と、言葉が中央をまたがない幅（1280px 以上）だけ。
   それより狭い・低い画面では出さず、C5 も変えない（装飾のため読み上げ対象外）。
   この出し分けは PICK UP カードを出す・出さない（0 件を含む）にかかわらず同じ（意図どおり） */
@media screen and (min-width: 1100px) {
	.hc .scroll { display: none; }
}
@media screen and (min-width: 1280px) and (min-height: 760px) {
	#FIRSTVIEW.hc { --s: min(600px, calc(var(--hc-h) * .825 - 139px), 40vw); --hc-raise: 40px; }
	.hc .scroll { display: block; }
}

/* ---------- 地（装飾・静的） ---------- */
.hc-glow,
.hc-grid,
.hc-bgdots,
.hc-board,
.hc-vignette,
.hc-word { position: absolute; pointer-events: none; }
.hc-glow {
	inset: -10% -5%;
	z-index: 0;
	background:
		radial-gradient(ellipse 34% 30% at 71% 56%, rgba(0, 198, 174, .32) 0%, rgba(0, 198, 174, 0) 70%),
		radial-gradient(ellipse 50% 22% at 71% 78%, rgba(3, 180, 74, .2) 0%, rgba(3, 180, 74, 0) 70%);
	opacity: 0;
	animation: hcFade 1.2s var(--hc-ease) .2s both;
}
.hc-grid {
	inset: 0;
	z-index: 0;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 56px),
		repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 56px);
	-webkit-mask-image: radial-gradient(ellipse 55% 75% at 70% 55%, #000 20%, transparent 75%);
	        mask-image: radial-gradient(ellipse 55% 75% at 70% 55%, #000 20%, transparent 75%);
	opacity: 0;
	animation: hcFade 1s var(--hc-ease) .1s both;
}
.hc-bgdots {
	inset: 0;
	z-index: 0;
	background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px) 0 0 / 28px 28px;
	-webkit-mask-image: radial-gradient(ellipse 45% 60% at 72% 56%, #000 0%, transparent 70%);
	        mask-image: radial-gradient(ellipse 45% 60% at 72% 56%, #000 0%, transparent 70%);
	opacity: 0;
	animation: hcFade 1s var(--hc-ease) .2s both;
}
.hc-board {
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	color: rgba(0, 220, 190, .3);
	-webkit-mask-image:
		radial-gradient(ellipse 50% 90% at 20% 50%, transparent 45%, #000 100%),
		radial-gradient(circle at 70% 52%, transparent calc(var(--s) * .5), #000 calc(var(--s) * .95));
	        mask-image:
		radial-gradient(ellipse 50% 90% at 20% 50%, transparent 45%, #000 100%),
		radial-gradient(circle at 70% 52%, transparent calc(var(--s) * .5), #000 calc(var(--s) * .95));
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
	opacity: 0;
	animation: hcFade 1.1s var(--hc-ease) .15s both;
}
.hc-board path, .hc-word path { vector-effect: non-scaling-stroke; }
/* 輪郭だけの大きな英単語：テクスチャとしての重さ。下端で切る。
   文字ではなく輪郭の図形（SVG）にしている。文字だと Web フォントの到着で幅が変わって位置がずれ（CLS）、
   最大の文字要素として LCP の対象にもなるため。大きさは従来の文字と同じ em 基準（1em = 字の大きさ） */
.hc-word {
	/* 左右の中心をチップ（＝舞台の中央）に揃える（2026-10-13 金子氏）。舞台の中央は、ヒーローの右端から
	   .hc-wrap の外の余白＋右の余白（--hc-pad-r）＋寄せる量（--hc-shift）＋舞台の幅の半分（300u）。そこから字の幅（3.766em）の半分を引く */
	right: calc(max(0px, (100% - 1440px) / 2) + var(--hc-pad-r) + var(--hc-shift) + 300 * var(--u) - 3.766em / 2);
	bottom: -.14em;
	z-index: 0;
	font-size: clamp(120px, 14vw, 230px);
	width: 3.766em;   /* 8 字の送り幅（字間 .02em を含む） */
	height: .8em;
	overflow: visible;
	fill: none;
	stroke: rgba(255, 255, 255, .2);
	stroke-width: 1px;
	opacity: 0;
	transform: translateY(12px);
	animation: hcWord 1.4s var(--hc-ease) .3s both;
}
@keyframes hcWord { to { opacity: 1; transform: none; } }
/* 締めの光（2026-10-13 金子氏）：C5 の演出が終わった直後（5.0 秒）に一度だけ、光の帯が左から右へ輪郭の上を走る。
   繰り返さない（PICK UP カードを 1 周で止めるのと同じ考え。動き続けると見出しや CTA から視線を奪う）。
   輪郭を写した図形（.hc-word__shine。明るい線＋淡い塗り＝キャンペーン LP の透かしのように字の中も光る）を、
   マスクの中の斜めの帯（.hc-word__beam。skewX(-20) の中）が通る所だけ見せる。帯は transform で動かすだけで、
   描き直しは動いている 2 秒だけ。帯は左の外（x −1500〜−400）から右の外まで動く。動きを減らす設定では動かず、帯は左の外に残る（光らない）。
   写した線には上の .hc-word path の vector-effect が届かない（use の中）ため、元の path に属性で付けている */
.hc-word__shine { stroke: rgba(160, 255, 236, .95); stroke-width: 1.5px; fill: rgba(160, 255, 236, .22); }
.hc-word__beam { animation: hcWordShine 2s ease-in-out calc(var(--tEnd) + .65s) both; }
@keyframes hcWordShine { to { transform: translateX(5400px); } }
.hc-vignette {
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(10, 30, 42, .5) 0%, rgba(10, 30, 42, 0) 30%),
		radial-gradient(ellipse 80% 80% at 50% 50%, transparent 60%, rgba(4, 14, 20, .35) 100%);
}

/* ---------- レイアウト ---------- */
.hc-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--hc-pad-r) 0 50px;
}

/* ---------- 文字：最初から可視。16px 下からの移動だけ ---------- */
.hc .mv_inner { position: static; z-index: auto; flex: 0 1 500px; min-width: 0; align-items: flex-start; }
.hc .mv_inner > * { animation: hcRise .9s var(--hc-ease) both; }
/* 1 番目は h1（サービス名の行＋キャッチコピー）。本文・CTA は従来と同じ時刻（.16s・.24s）。
   4 番目（PICK UP カード）には遅延を当てない（.hc .mv_inner > .pickup の 0.9 秒より詳細度が高く、カードが早く出てしまう） */
.hc .mv_inner > *:nth-child(2) { animation-delay: .16s; }
.hc .mv_inner > *:nth-child(3) { animation-delay: .24s; }
@keyframes hcRise { from { transform: translateY(16px); } to { transform: none; } }

/* h1 ＝ サービス名の行（.mv_eyebrow）＋キャッチコピー（.mv_title）。2026-10-14 見出しの改修（設計書 2026-10-14-top-heading-structure-design.md 4 章）。
   サービス名の行は前置きの緑の線（::before・絶対配置）＋文字。2 行に分けられるよう block にする（線を flex の子にすると横に並ぶ） */
.hc .mv_heading { margin: 0; }
.hc .mv_eyebrow {
	display: block;
	position: relative;
	margin: 0 0 24px;
	padding-left: 58px;                      /* 線 44px＋間 14px */
	color: var(--hc-brand);                 /* 明るめの紺の地で 4.6〜5:1（実測） */
	text-shadow: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .06em;
	text-transform: none;
}
.hc .mv_eyebrow::before { content: ""; position: absolute; left: 0; top: calc(.8em - 1px); width: 44px; height: 2px; background: var(--grad-brand, linear-gradient(90deg, #03b44a, #00c6ae)); }
/* 2 行に分ける位置（JP「電子機器開発・基板設計・」／「基板実装（EMS）の受託」、EN「Contract Electronics Development,」／「PCB Design & Assembly (EMS)」）。
   書体が届く前後で行数が変わらないよう、折り返しは幅で決める（字幅に任せない）。JP は左列が 490px 以上なら 1 行（下のコンテナー問い合わせ） */
.hc .mv_eyebrow > span { display: block; }
/* EN：英字の飾りの書体（Barlow Condensed・大文字）。全幅で 2 行（代わりの書体との字幅の差が大きく、1 行は書体次第で崩れる） */
.hc:lang(en) .mv_eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }
.hc .mv_title {
	display: block;
	max-width: 6.8em;
	margin: 0 0 26px;
	color: var(--hc-white);
	text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
	font-size: clamp(2.6rem, 1.5rem + 2.8vw, 3.9rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: .04em;
}
.hc .mv_txt {
	max-width: 29em;
	margin: 0 0 38px;
	color: var(--hc-soft);
	text-shadow: none;
	font-size: 1.02rem;
	line-height: 2;
	line-break: strict;
}
/* 主 CTA：明るい緑の地に墨の文字（7.6:1）。副 CTA：白い輪郭 */
.hc .mv_cta a { color: #07110c; box-shadow: 0 12px 34px rgba(0, 198, 174, .28), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.hc .mv_cta a::after { border-color: #07110c; }
.hc .mv_cta a:hover { color: #07110c; box-shadow: 0 14px 40px rgba(0, 198, 174, .4); }
.hc .mv_cta a.is-ghost { color: var(--hc-white); border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .02); box-shadow: none; }
.hc .mv_cta a.is-ghost::after { border-color: var(--hc-white); }
.hc .mv_cta a.is-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--hc-white); }
/* フォーカス枠：上の box-shadow が共通の枠（#111＋白い帯）の白い帯を打ち消し、紺の地で見えなくなるため白で描く */
.hc .mv_cta a:focus-visible { outline: 3px solid var(--hc-white); outline-offset: 3px; }
/* 英語版：見出しが長い（日本語の約 4 倍の字数）ため、字を小さく・行幅を広げて 3 行に収め、CTA を画面内に残す */
@media screen and (min-width: 1100px) {
	.hc:lang(en) .mv_title { max-width: 11em; font-size: clamp(2.1rem, 1.2rem + 1.9vw, 3rem); letter-spacing: .01em; }
}

/* ---------- 舞台 ---------- */
.hc-cycle { position: relative; flex: 0 0 auto; margin: calc(-76 * var(--u) - var(--hc-raise)) var(--hc-shift) 0 0; }   /* 見た目の重心（上段ラベル〜言葉）を縦中央へ。右の余白は --hc-shift */
.hc-stage { position: relative; width: calc(600 * var(--u)); height: calc(600 * var(--u)); }

/* 遠近の軌道面。軌道の中心はチップ中心より --oy だけ上（奥の弧がチップの上端より上を通り、01→02 の出発が見える） */
.hc-scene {
	position: absolute;
	inset: 0;
	top: calc(var(--oy) * var(--u));
	bottom: calc(-1 * var(--oy) * var(--u));
	perspective: calc(1400 * var(--u));
	perspective-origin: 50% 50%;
	pointer-events: none;   /* 飾りだけの面（押せる工程ラベルは .hc-nodes 側）。外側の輪（.hc-orbit__outer）が左列の CTA に重なり、押せなくしていたため */
}
.hc-scene--back { z-index: 2; }
.hc-scene--front { z-index: 5; }
.hc-orbit {
	position: absolute;
	inset: 0;
	transform: rotateX(var(--tilt));
}
/* 大きさの基準になる外側の軌道（装飾・画面端で切れる） */
.hc-orbit__outer {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	opacity: 0;
	animation: hcFade 1.2s var(--hc-ease) .5s both;
}
.hc-orbit__outer--1 { width: calc(820 * var(--u)); height: calc(820 * var(--u)); margin: calc(-410 * var(--u)) 0 0 calc(-410 * var(--u)); }
.hc-orbit__outer--2 { width: calc(1180 * var(--u)); height: calc(1180 * var(--u)); margin: calc(-590 * var(--u)) 0 0 calc(-590 * var(--u)); border-color: rgba(255, 255, 255, .08); }
/* 床：チップの影と、点灯後の反射光 */
.hc-floor {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(300 * var(--u));
	height: calc(300 * var(--u));
	margin: calc(-150 * var(--u)) 0 0 calc(-150 * var(--u));
	border-radius: 50%;
	background: radial-gradient(circle, rgba(2, 12, 18, .6) 0%, rgba(2, 12, 18, .3) 45%, rgba(2, 12, 18, 0) 70%);
	opacity: 0;
	animation: hcFade .8s var(--hc-ease) .4s both;
}
.hc-floor__light {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(420 * var(--u));
	height: calc(420 * var(--u));
	margin: calc(-210 * var(--u)) 0 0 calc(-210 * var(--u));
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 198, 174, .34) 0%, rgba(3, 180, 74, .14) 40%, rgba(3, 180, 74, 0) 70%);
	opacity: 0;
	animation: hcFade .6s var(--hc-ease) 1.45s both;
}
/* 環の座標系：01 が真上に来るよう −25.714° 回す */
.hc-ringwrap { position: absolute; inset: 0; transform: rotate(-25.714deg); }
.hc-track {
	position: absolute;
	inset: calc(50 * var(--u));
	border: 1.5px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	opacity: 0;
	animation: hcFade .7s var(--hc-ease) .4s both;
}
/* 拍 2：軌道面を走る光の輪（1 回） */
.hc-pulse {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(180 * var(--u));
	height: calc(180 * var(--u));
	margin: calc(-90 * var(--u)) 0 0 calc(-90 * var(--u));
	border: 2px solid rgba(160, 255, 236, .95);
	border-radius: 50%;
	box-shadow: 0 0 30px 4px rgba(0, 198, 174, .55), inset 0 0 24px rgba(0, 198, 174, .45);
	opacity: 0;
	transform: scale(1);
	animation: hcPulse .9s cubic-bezier(.2, .6, .3, 1) 1.48s both;
}
@keyframes hcPulse { 0% { opacity: 0; transform: scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(3.1); } }
/* 環（左右の半円窓で描く）。緑→ティールのグラデ＋静的な発光 */
.hc-ring { position: absolute; inset: calc(50 * var(--u)); }
.hc-ring__half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.hc-ring__half--r { right: 0; }
.hc-ring__half--l { left: 0; }
.hc-ring__arc {
	position: absolute;
	top: 0;
	width: 200%;
	height: 100%;
	border-radius: 50%;
	/* 半円窓の 180° 回転後に、画面の真上（環の座標で +25.714°）を軸として左右対称になる起点 */
	background: conic-gradient(from 25.714deg, var(--hc-accent) 0deg, var(--hc-brand) 180deg, var(--hc-accent) 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
	filter: drop-shadow(0 0 6px rgba(0, 198, 174, .55));
	transform: rotate(0deg);
}
.hc-ring__half--r .hc-ring__arc { left: -100%; clip-path: inset(0 calc(50% + .75px) 0 0); animation: hcSweep var(--tA) cubic-bezier(.4, 0, 1, 1) var(--t0) both; }
.hc-ring__half--l .hc-ring__arc { left: 0; clip-path: inset(0 0 0 calc(50% + .75px)); animation: hcSweep var(--tB) cubic-bezier(0, 0, .6, 1) calc(var(--t0) + var(--tA)) both; }
@keyframes hcSweep { to { transform: rotate(180deg); } }
.hc-ring__cap {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 10px;
	height: 4.5px;
	margin-left: -5px;
	border-radius: 2px;
	background: var(--hc-accent);
	opacity: 0;
	animation: hcFade .2s linear calc(var(--t0) + var(--tA) - .08s) both;
}
/* 締め：環が閉じた瞬間に環全体が一度だけ光る（opacity のみ） */
.hc-ring__flash {
	position: absolute;
	inset: 0;
	border: 4px solid rgba(200, 255, 243, .95);
	border-radius: 50%;
	box-shadow: 0 0 26px 5px rgba(0, 198, 174, .75), inset 0 0 20px rgba(0, 198, 174, .5);
	opacity: 0;
	animation: hcRingFlash .6s ease-out var(--tEnd) both;
}
@keyframes hcRingFlash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
/* 光の先頭：同じ時計で一周。尾（30°）を引く */
.hc-head { position: absolute; inset: 0; animation: hcClock calc(var(--tA) + var(--tB)) linear var(--t0) both; }
@keyframes hcClock {
	0%     { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
	46.81% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0, 0, .6, 1); }
	100%   { transform: rotate(360deg); }
}
/* 点灯（.15s）→ 一周（--tA + --tB）→ 消灯（.3s）を 1 本の動きで。同じ要素に opacity の動きを 2 本重ねると合成（GPU）で動かせず、
   毎フレーム メインスレッドで処理されるため。割合は --tA 1.1s・--tB 1.25s 前提（全長 2.65s） */
.hc-head__in { position: absolute; inset: 0; opacity: 0; animation: hcHeadLife calc(var(--tA) + var(--tB) + .3s) linear var(--t0) both; }
@keyframes hcHeadLife {
	0%      { opacity: 0; animation-timing-function: linear; }
	5.66%   { opacity: 1; }
	88.679% { opacity: 1; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
	100%    { opacity: 0; }
}
.hc-head__tail {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: conic-gradient(from -32deg, rgba(0, 198, 174, 0) 0deg, rgba(170, 255, 240, 1) 32deg, transparent 32.5deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1px), transparent 100%);
	        mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px), #000 calc(100% - 1px), transparent 100%);
}
.hc-head__dot {
	position: absolute;
	left: 50%;
	top: 0;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 198, 174, .9), 0 0 28px 8px rgba(0, 198, 174, .7);
}
/* 駅の光点（面内）。到達で灯り、光輪が広がる */
.hc-dots { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hc-dot {
	--fin: calc(var(--tEnd) + (var(--d) - var(--t0)) * .1);   /* 締めの波の開始（01 = 4.35s … 07 = 4.53s） */
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	transform: rotate(var(--a)) translateY(calc(-250 * var(--u))) rotate(calc(-1 * var(--a)));
}
.hc-dot b {
	position: absolute;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 198, 174, .85), 0 0 22px 6px rgba(0, 198, 174, .55);
	font-size: 0;
	opacity: 0;
	transform: scale(.4);
	animation: hcPop2 .4s var(--hc-pop) calc(var(--d) - .1s) both;
}
@keyframes hcPop2 { to { opacity: 1; transform: scale(1); } }
.hc-dot__glow {
	position: absolute;
	left: 0;
	top: 0;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 198, 174, .7) 0%, rgba(0, 198, 174, .25) 40%, rgba(0, 198, 174, 0) 70%);
	opacity: 0;
	transform: scale(.4);
	animation: hcGlow .45s ease-out var(--fin) both;   /* 締めの波。モックでは到達時の 1 度目も指定していたが、2 度目の待機中の指定に上書きされて表示されていなかった。同じ要素に動きを 2 本重ねると合成で動かせないため 1 本に */
}
@keyframes hcGlow { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
/* ホバー／フォーカス中のラベルに対応する駅：光の輪（自動では動かない。遷移だけ） */
.hc-dot__halo {
	position: absolute;
	left: 0;
	top: 0;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border: 2px solid var(--hc-accent);
	border-radius: 50%;
	box-shadow: 0 0 20px 2px rgba(0, 198, 174, .8), inset 0 0 14px rgba(0, 198, 174, .5);
	opacity: 0;
	transform: scale(.5);
	transition: opacity .2s var(--hc-ease), transform .3s var(--hc-pop);
}
.hc-cycle:has(.hc-node:nth-child(1) .hc-pill:is(:hover, :focus-visible)) .hc-dot:nth-child(1) .hc-dot__halo,
.hc-cycle:has(.hc-node:nth-child(2) .hc-pill:is(:hover, :focus-visible)) .hc-dot:nth-child(2) .hc-dot__halo,
.hc-cycle:has(.hc-node:nth-child(3) .hc-pill:is(:hover, :focus-visible)) .hc-dot:nth-child(3) .hc-dot__halo,
.hc-cycle:has(.hc-node:nth-child(4) .hc-pill:is(:hover, :focus-visible)) .hc-dot:nth-child(4) .hc-dot__halo,
.hc-cycle:has(.hc-node:nth-child(5) .hc-pill:is(:hover, :focus-visible)) .hc-dot:nth-child(5) .hc-dot__halo,
.hc-cycle:has(.hc-node:nth-child(6) .hc-pill:is(:hover, :focus-visible)) .hc-dot:nth-child(6) .hc-dot__halo,
.hc-cycle:has(.hc-node:nth-child(7) .hc-pill:is(:hover, :focus-visible)) .hc-dot:nth-child(7) .hc-dot__halo { opacity: 1; transform: scale(1); }

/* 拍 1：配線を伝う光（外側→チップ） */
.hc-seg {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	z-index: 3;
	width: calc(var(--l) * var(--u));
	height: 1.5px;
	margin-top: -.75px;
	transform: rotate(var(--r));
	transform-origin: 0 50%;
}
.hc-seg__base, .hc-seg__flow { position: absolute; inset: 0; }
.hc-seg__base { background: rgba(255, 255, 255, .26); opacity: 0; animation: hcBase .5s var(--hc-ease) .5s both; }
.hc-seg__flow {
	background: linear-gradient(90deg, rgba(0, 198, 174, .2) 0%, var(--hc-accent) 65%, #e6fff9 100%);
	box-shadow: 0 0 8px 1.5px rgba(0, 198, 174, .65);
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation: hcFlow var(--fd) linear var(--fs) both, hcOff .5s var(--hc-ease) 1.6s both;
}
@keyframes hcBase { to { opacity: 1; } }
@keyframes hcFlow { to { transform: scaleX(1); } }
@keyframes hcOff { to { opacity: 0; } }
.hc-pad {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	z-index: 5;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: #d9fff5;
	box-shadow: 0 0 0 2px rgba(0, 198, 174, .8), 0 0 14px 3px rgba(0, 198, 174, .7);
	opacity: 0;
	transform: scale(.4);
	animation: hcPop2 .35s var(--hc-pop) 1.43s both;
}

/* ---------- モノリス（チップ） ---------- */
.hc-chip {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 4;
	width: calc(150 * var(--u));
	height: calc(150 * var(--u));
	margin: calc(-75 * var(--u)) 0 0 calc(-75 * var(--u));
	opacity: 0;
	transform: translateY(calc(20 * var(--u)));
	animation: hcChip .8s var(--hc-ease) .3s both;
}
@keyframes hcChip { to { opacity: 1; transform: none; } }
.hc-chip > i { position: absolute; }
.hc-chip__side {
	inset: calc(6 * var(--u)) calc(-3 * var(--u)) calc(-13 * var(--u));
	border-radius: calc(13 * var(--u));
	background: linear-gradient(180deg, #121a21 0%, #05080b 100%);
	box-shadow: 0 46px 80px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .04);
}
.hc-chip__body {
	inset: 0;
	border-radius: calc(11 * var(--u));
	background: linear-gradient(155deg, #2a3641 0%, #182129 42%, #0d1419 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .22),
		inset 1px 0 0 rgba(255, 255, 255, .07),
		inset 0 -2px 0 rgba(0, 0, 0, .7),
		inset -1px 0 0 rgba(0, 0, 0, .5);
}
/* 金属のピン（4 辺） */
.hc-chip__pins {
	inset: calc(-9 * var(--u));
	background:
		repeating-linear-gradient(90deg, #aab4bd 0 calc(2.5 * var(--u)), transparent calc(2.5 * var(--u)) calc(10 * var(--u))) 50% 0 / 70% calc(9 * var(--u)) no-repeat,
		repeating-linear-gradient(90deg, #6c7882 0 calc(2.5 * var(--u)), transparent calc(2.5 * var(--u)) calc(10 * var(--u))) 50% 100% / 70% calc(9 * var(--u)) no-repeat,
		repeating-linear-gradient(180deg, #8d99a3 0 calc(2.5 * var(--u)), transparent calc(2.5 * var(--u)) calc(10 * var(--u))) 0 50% / calc(9 * var(--u)) 70% no-repeat,
		repeating-linear-gradient(180deg, #7a8690 0 calc(2.5 * var(--u)), transparent calc(2.5 * var(--u)) calc(10 * var(--u))) 100% 50% / calc(9 * var(--u)) 70% no-repeat;
	-webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
	        mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	padding: calc(9 * var(--u));
}
.hc-chip__bevel {
	inset: calc(6 * var(--u));
	border-radius: calc(7 * var(--u));
	border: 1px solid rgba(255, 255, 255, .07);
	background: linear-gradient(155deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .3) 100%);
}
/* ダイ：微細な格子＋配線の目 */
.hc-chip__die {
	inset: calc(43 * var(--u));
	border: 1px solid rgba(0, 198, 174, .4);
	border-radius: calc(2 * var(--u));
	background:
		repeating-linear-gradient(0deg, rgba(0, 198, 174, .14) 0 1px, transparent 1px calc(4 * var(--u))),
		repeating-linear-gradient(90deg, rgba(0, 198, 174, .14) 0 1px, transparent 1px calc(4 * var(--u))),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px calc(12 * var(--u))),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px calc(12 * var(--u))),
		linear-gradient(135deg, #0a1a1d 0%, #061015 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 12px rgba(0, 0, 0, .8);
}
.hc-chip__dieglow {
	inset: calc(43 * var(--u));
	border-radius: calc(2 * var(--u));
	background: radial-gradient(circle at 50% 50%, rgba(220, 255, 246, .95) 0%, rgba(0, 198, 174, .75) 22%, rgba(3, 180, 74, .35) 55%, rgba(3, 180, 74, 0) 80%);
	box-shadow: 0 0 44px 6px rgba(0, 198, 174, .55);
	opacity: 0;
	animation: hcFade .45s var(--hc-ease) 1.45s both;
}
.hc-chip__edge {
	inset: 0;
	border-radius: calc(11 * var(--u));
	border: 1px solid rgba(0, 198, 174, .7);
	box-shadow: 0 0 0 1px rgba(0, 198, 174, .18), 0 0 70px rgba(0, 198, 174, .4), inset 0 0 20px rgba(0, 198, 174, .18);
	opacity: 0;
	animation: hcFade .5s var(--hc-ease) 1.45s both;
}
.hc-chip__flash {
	inset: 0;
	border-radius: calc(11 * var(--u));
	background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(205, 255, 245, .9) 40%, rgba(255, 255, 255, 0) 75%);
	opacity: 0;
	animation: hcFlash .55s ease-out 1.42s both;
}
@keyframes hcFlash { 0% { opacity: 0; } 16% { opacity: .95; } 100% { opacity: 0; } }
.hc-chip__dot {
	left: calc(14 * var(--u));
	top: calc(14 * var(--u));
	width: calc(6 * var(--u));
	height: calc(6 * var(--u));
	border-radius: 50%;
	background: var(--hc-brand);
	box-shadow: 0 0 8px rgba(3, 180, 74, .8);
}
.hc-chip__mark {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(13 * var(--u));
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 600;
	font-size: max(9px, calc(10.5 * var(--u)));
	letter-spacing: .4em;
	text-align: center;
	text-indent: .4em;
	color: rgba(255, 255, 255, .6);
}

/* ---------- 中央の言葉：舞台の下（下段ラベルのさらに下）、環が閉じてから ---------- */
.hc-cap {
	position: absolute;
	left: 50%;
	top: calc((300 + 224 + var(--oy)) * var(--u));
	z-index: 8;
	width: calc(540 * var(--u));
	margin: 0;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 10px) scale(.97);
	animation: hcCap .6s var(--hc-pop) 4.3s both;
}
@keyframes hcCap { to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.hc-cap::before { content: ""; display: block; width: 28px; height: 2px; margin: 0 auto 12px; background: var(--grad-brand, linear-gradient(90deg, #03b44a, #00c6ae)); }
.hc-cap__sub { display: block; margin: 0 0 .4em; color: var(--hc-soft); font-size: max(12px, calc(15 * var(--u))); font-weight: 500; letter-spacing: .16em; text-indent: .16em; }
/* 文字グラデーション：白→ミント→ティール（ティール端でも地に対し 9:1） */
.hc-cap__main {
	display: inline-block;
	color: var(--hc-white);
	background: linear-gradient(90deg, #ffffff 0%, #c9fff0 45%, var(--hc-accent) 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: max(21px, calc(33 * var(--u)));
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: .04em;
}
/* 一貫対応への導線：言葉の下に独立した 1 行。下線＋ティールの › */
.hc-cap__link {
	display: flex;
	align-items: center;
	width: fit-content;
	margin: max(10px, calc(14 * var(--u))) auto 0;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(0, 198, 174, .45);
	color: rgba(255, 255, 255, .88);
	font-size: max(13px, calc(15 * var(--u)));
	font-weight: 600;
	letter-spacing: .05em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s, border-color .2s;
}
.hc-cap__link::after {
	content: "";
	width: .42em;
	height: .42em;
	margin-left: .7em;
	border-top: 2px solid var(--hc-accent);
	border-right: 2px solid var(--hc-accent);
	transform: rotate(45deg);
	transition: transform .2s var(--hc-ease);
}
.hc-cap__link:hover, .hc-cap__link:focus-visible { color: #e6fffa; border-bottom-color: var(--hc-accent); }
.hc-cap__link:hover::after, .hc-cap__link:focus-visible::after { transform: translateX(3px) rotate(45deg); }
.hc-cap__link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- 7 工程のラベル：平置きレイヤー。駅（投影座標）から引き出し線を立て、その先に置く ---------- */
.hc-nodes { position: absolute; inset: 0; z-index: 7; margin: 0; padding: 0; list-style: none; }
.hc-node {
	--fin: calc(var(--tEnd) + (var(--d) - var(--t0)) * .1);   /* 締めの波の開始（光点と同じ） */
	position: absolute;
	left: calc((300 + var(--px)) * var(--u));
	top: calc((300 + var(--py) + var(--oy)) * var(--u));
	width: 0;
	height: 0;
}
/* 引き出し線：駅の光点の縁（8px）から伸びる。先頭の到達に合わせて .24s で伸びる */
.hc-node__lead {
	position: absolute;
	left: -.75px;
	width: 1.5px;
	height: calc(var(--L) * var(--u) - 8px);
	box-shadow: 0 0 6px rgba(0, 198, 174, .55);
	transform: scaleY(0);
	transition: box-shadow .2s, filter .2s;
	animation: hcLead .24s cubic-bezier(.3, 0, .2, 1) calc(var(--d) - .06s) both;
}
.is-up .hc-node__lead { bottom: 8px; transform-origin: 50% 100%; background: linear-gradient(0deg, var(--hc-accent) 0%, rgba(0, 198, 174, .45) 100%); }
.is-down .hc-node__lead { top: 8px; transform-origin: 50% 0; background: linear-gradient(180deg, var(--hc-accent) 0%, rgba(0, 198, 174, .45) 100%); }
@keyframes hcLead { to { transform: scaleY(1); } }
.hc-node:has(.hc-pill:is(:hover, :focus-visible)) .hc-node__lead { box-shadow: 0 0 10px 2px rgba(0, 198, 174, .9); filter: brightness(1.6); }

/* ラベル（すりガラスの台）。明るい半透明の台＋背景のぼかし＋緑→ティールの縁で、地からはっきり浮かせる。
   台の下に薄い紺を敷き、明るい地や背後の光の上でも文字の濃さを保つ。
   文字：白（最も明るい 04 の台でも 6:1 以上）、番号：明るいミント #7ff0da（同 4.5:1 以上） */
.hc-pill {
	position: absolute;
	left: calc(var(--x0) * var(--u));
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .55em 1.05em .55em .95em;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 100%), rgba(6, 24, 32, .32);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	        backdrop-filter: blur(10px) saturate(150%);
	color: var(--hc-white);
	font-size: clamp(12.5px, calc(15.5 * var(--u)), 17px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
	overflow: hidden;                       /* 光沢を台の形で切る */
	opacity: 0;
	transition: color .2s, background-color .2s, box-shadow .2s;
}
/* 縁：1px のグラデーション線（マスクで内側を抜く） */
.hc-pill::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(3, 180, 74, .95) 0%, rgba(0, 198, 174, .95) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}
/* 締めの光沢：斜めの光が 1 回だけ横切る */
.hc-pill::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-130%) skewX(-18deg);
	animation: hcShine .42s ease-out var(--fin) both;
	pointer-events: none;
}
@keyframes hcShine { to { transform: translateX(330%) skewX(-18deg); } }
/* 配置：線の先端（上向き = 台の下端、下向き = 台の上端）。登場は線の先から 6px＋scale .94→1 */
.is-up .hc-pill {
	bottom: calc(var(--L) * var(--u));
	transform: translate(calc(var(--ax) * -100%), 6px) scale(.94);
	transform-origin: calc(var(--ax) * 100%) 100%;
	animation: hcPop .38s var(--hc-pop) calc(var(--d) + .1s) both;
}
.is-down .hc-pill {
	top: calc(var(--L) * var(--u));
	transform: translate(calc(var(--ax) * -100%), -6px) scale(.94);
	transform-origin: calc(var(--ax) * 100%) 0;
	animation: hcPop .38s var(--hc-pop) calc(var(--d) + .1s) both;
}
@keyframes hcPop { to { opacity: 1; transform: translate(calc(var(--ax) * -100%), 0) scale(1); } }
.hc-pill__num {
	display: inline-block;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 1.12em;
	letter-spacing: .06em;
	color: #7ff0da;
	animation: hcNum .5s var(--hc-pop) calc(var(--d) + .1s) both;
}
@keyframes hcNum { 0% { transform: scale(1); } 35% { transform: scale(1.38); } 100% { transform: scale(1); } }
/* 01 は環が閉じたとき（--tEnd）にもう一度強調。到達時の 1 度目は 2 度目の待機中の指定に上書きされて表示されていなかったため、閉じたときの 1 本だけにする（合成で動かすため） */
.hc-nodes > li:first-child .hc-pill__num { animation: hcNum .5s var(--hc-pop) var(--tEnd) both; }
.hc-pill__name { padding-left: .6em; border-left: 1px solid rgba(255, 255, 255, .28); }
.hc-pill:hover, .hc-pill:focus-visible {
	color: #e6fffa;
	background-color: rgba(255, 255, 255, .1);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 26px rgba(0, 198, 174, .5);
}
.hc-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


@keyframes hcFade { to { opacity: 1; } }

/* ---------- キーボード操作：登場前（透明）のリンクにフォーカスが乗ったら、その場で表示する ----------
   ラベルは 2.1〜4.2 秒、中央の言葉は 4.3 秒まで透明。!important は動きの値にも勝つ */
.hc-pill:focus-visible,
.hc-cap:focus-within { opacity: 1 !important; }

/* ---------- ヒーローより下の区画：画面外は描画を後回しにする ----------
   トップは日本語フォント（Noto Sans JP の分割ファイル約 100 本）が load 後に少しずつ届き、届くたびにページ全体の
   組み直しが走る。画面外の区画の組み直し・描画を省き、メインスレッドの長い処理（TBT）を抑える
   （2026-10-12 ローカル計測でデスクトップ 60 前後 → 85〜90）。大きさは一度表示した値を覚え（auto）、初回は 900px と見込む */
#WRAPPER > .INDEX {
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

/* ---------- 動きを減らす：最終状態で静止 ---------- */
@media (prefers-reduced-motion: reduce) {
	.hc *, .hc *::before, .hc *::after { animation: none !important; }
	.hc-glow, .hc-grid, .hc-bgdots, .hc-board, .hc-orbit__outer, .hc-floor, .hc-floor__light, .hc-track,
	.hc-chip__dieglow, .hc-chip__edge, .hc-ring__cap, .hc-pill, .hc-cap, .hc-dot b, .hc-seg__base { opacity: 1; }
	.hc-word { opacity: 1; transform: none; }
	.hc-seg__flow, .hc-pulse, .hc-chip__flash, .hc-dot__glow, .hc-head { display: none; }
	.hc-pad { opacity: 1; transform: none; }
	.hc-chip { opacity: 1; transform: none; }
	.hc-dot b { transform: none; }
	.is-up .hc-pill, .is-down .hc-pill { transform: translate(calc(var(--ax) * -100%), 0); }
	.hc-node__lead { transform: none; }
	.hc-cap { transform: translate(-50%, 0); }
	.hc-ring__arc { transform: rotate(180deg); }
	.hc-pill__num { transform: none; }
}
/* ---------- 強制カラー：装飾層を隠し、文字と枠線だけ残す ---------- */
@media (forced-colors: active) {
	.hc-glow, .hc-grid, .hc-bgdots, .hc-board, .hc-word, .hc-vignette, .hc-seg, .hc-pad, .hc-pulse, .hc-ring, .hc-floor, .hc-floor__light,
	.hc-orbit__outer, .hc-chip__dieglow, .hc-chip__edge, .hc-chip__flash, .hc-chip__pins, .hc-chip__dot, .hc-chip__side, .hc-dot__glow { display: none; }
	.hc-node__lead, .hc-dot__halo, .hc-ring__flash, .hc-pill::before, .hc-pill::after { display: none; }
	.hc-pill, .hc-chip__body, .hc-track, .hc-dot b { forced-color-adjust: auto; border: 1px solid currentColor; }
	.hc-cap__main { background: none; -webkit-text-fill-color: currentColor; }
	.hc .mv_cta a { border: 2px solid currentColor; }
}

/* ---------- スマホ・タブレット（〜1099px）：文字を中央に、その下に「小さな環（平面）＋番号ドット」と「凡例リスト」 ---------- */
@media screen and (max-width: 1099.98px) {
	#FIRSTVIEW.hc {
		--hc-h: max(72vh, 440px);
		--s: 150px;
		--tilt: 0deg;
		height: auto;
		min-height: var(--hc-h);
		background:
			radial-gradient(ellipse 80% 40% at 50% 85%, rgba(0, 198, 174, .24) 0%, rgba(3, 180, 74, 0) 70%),
			linear-gradient(180deg, #17384a 0%, var(--hc-bg) 55%, #0c2230 100%);
	}
	.hc-board, .hc-word, .hc-orbit__outer, .hc-floor, .hc-floor__light { display: none; }
	.hc-ringwrap { transform: none; }     /* 平面の環：01 を真上に。番号が傾かない */
	.hc-cycle { margin: 0; }
	#FIRSTVIEW.hc { --oy: 0; }
	.hc-grid { -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 80%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 80% 50% at 50% 80%, #000 10%, transparent 70%); }
	.hc-bgdots { -webkit-mask-image: radial-gradient(ellipse 70% 40% at 50% 80%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 40% at 50% 80%, #000 0%, transparent 70%); }
	.hc-wrap { flex-direction: column; justify-content: center; gap: 18px; padding: 20px 16px 16px; }
	.hc .mv_inner { position: static; flex: 0 0 auto; align-items: center; max-width: none; padding: 0; text-align: center; }
	/* サービス名の行（h1 の 1 行目）：中央ぞろえの 2 行。前置きの線は文字の上に */
	.hc .mv_eyebrow { margin-bottom: 10px; padding-left: 0; font-size: .85rem; letter-spacing: .04em; }
	.hc:lang(en) .mv_eyebrow { font-size: .8rem; letter-spacing: .08em; }
	.hc .mv_eyebrow::before { position: static; display: block; width: 26px; margin: 0 auto 6px; }
	.hc .mv_title { max-width: none; margin-bottom: 10px; font-size: 1.7rem; line-height: 1.4; }
	.hc .mv_txt { max-width: 30rem; margin-bottom: 16px; font-size: .8rem; line-height: 1.8; }
	.hc .mv_cta a { font-size: .9rem; padding: 12px 24px; }
	.hc .mv_cta a.is-ghost { padding: 10px 22px; }

	.hc-cycle {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		column-gap: 10px;
		row-gap: 8px;
		width: 100%;
		max-width: 360px;
		padding-top: 14px;
		border-top: 1px solid var(--hc-line);
	}
	.hc-cap { position: static; flex: 0 0 100%; width: auto; margin: 0; transform: translateY(6px); animation: hcCapSp .5s var(--hc-pop) 4.3s both; }
	@keyframes hcCapSp { to { opacity: 1; transform: none; } }
	.hc-cap::before { display: none; }
	.hc-cap__sub { display: inline; margin: 0 .3em 0 0; font-size: 11px; letter-spacing: .08em; text-indent: 0; }
	.hc-cap__main { display: inline; font-size: 13px; }
	.hc-cap__link { max-width: 100%; margin: 6px auto 0; font-size: 11.5px; white-space: normal; text-align: center; }   /* 英語版の長い文は折り返す */

	.hc-stage { flex: 0 0 auto; margin: -8px 0; }
	.hc-chip { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	.hc-chip__side { inset: 2px -1px -4px; border-radius: 6px; box-shadow: 0 14px 24px rgba(0, 0, 0, .7); }
	.hc-chip__body, .hc-chip__edge, .hc-chip__flash { border-radius: 5px; }
	.hc-chip__pins { inset: -4px; padding: 4px; background-size: 70% 4px, 70% 4px, 4px 70%, 4px 70%; }
	.hc-chip__bevel { inset: 3px; border-radius: 3px; }
	.hc-chip__die, .hc-chip__dieglow { inset: 18px; }
	.hc-chip__dot { left: 5px; top: 5px; width: 3px; height: 3px; }
	.hc-chip__mark { display: none; }
	.hc-seg { height: 1px; margin-top: -.5px; }
	.hc-pad { width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: 0 0 0 1px rgba(0, 198, 174, .8), 0 0 8px 2px rgba(0, 198, 174, .6); }
	.hc-pulse { border-width: 1.5px; box-shadow: 0 0 12px 2px rgba(0, 198, 174, .5); }
	.hc-head__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 2px rgba(0, 198, 174, .9), 0 0 12px 3px rgba(0, 198, 174, .6); }
	.hc-head__tail { inset: -1px; }
	.hc-ring__arc { filter: drop-shadow(0 0 4px rgba(0, 198, 174, .5)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)); }
	.hc-ring__cap { height: 3.5px; }

	/* SP の光点は番号入り（平面なので読める） */
	.hc-dot b {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 21px;
		height: 21px;
		margin: -10.5px 0 0 -10.5px;
		border: 1.5px solid var(--hc-accent);
		background: #0c1319;
		color: var(--hc-white);
		font-family: 'Barlow Condensed', sans-serif;
		font-weight: 700;
		font-size: 9.5px;
		letter-spacing: .04em;
		line-height: 1;
		box-shadow: 0 0 10px rgba(0, 198, 174, .5);
	}
	.hc-dot__glow { width: 40px; height: 40px; margin: -20px 0 0 -20px; }

	.hc-nodes { position: static; flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px; }
	.hc-node { position: static; width: auto; height: auto; }
	.hc-node__lead { display: none; }
	.hc-dot__halo { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
	.is-up .hc-pill, .is-down .hc-pill, .hc-pill {
		position: static;
		gap: .5em;
		padding: 3px 0;
		border: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		        backdrop-filter: none;
		box-shadow: none;
		overflow: visible;
		color: var(--hc-soft);
		font-size: 11.5px;
		font-weight: 500;
		letter-spacing: .02em;
		transform: translateX(-6px);
		animation: hcRow .35s var(--hc-pop) calc(var(--d) - .1s) both;
	}
	@keyframes hcRow { to { opacity: 1; transform: none; } }
	.hc-pill::before, .hc-pill::after { display: none; }
	.hc-pill__num { font-size: 12px; color: #5ee392; }   /* #03b44a と同じ色相の明るい緑（地に対し 6:1。元の緑では 3.8:1） */
	.hc-pill__name { padding-left: 0; border-left: 0; }
	.hc-pill:hover, .hc-pill:focus-visible { background: none; box-shadow: none; }
	/* 英語版：工程名を折り返し可にして、一覧を環の横に収める（折り返せないと一覧が環の下へ回り、ヒーローが縦に伸びる） */
	.hc:lang(en) .hc-pill { align-items: baseline; white-space: normal; }
}
@media screen and (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
	.is-up .hc-pill, .is-down .hc-pill, .hc-pill, .hc-cap { opacity: 1; transform: none; }
}

/* =========================================================
   PICK UP カード（ヒーロー左列の CTA 直下）
   設計: docs/superpowers/specs/2026-10-13-top-pickup-card-design.md（3〜5 章）
   - 差し色は表示中の内容で切り替え：キャンペーン＝金（LP・旧帯と同じ系統）、製品＝ミント（C5 と同じ）
   - 動かすのは transform / opacity と線（scaleX）だけ。切り替えは「前が消えてから次が出る」逐次型
   ========================================================= */
.pickup {
	--pickup-accent: #7ff0da;
	--pickup-accent-2: #00c6ae;
	--pickup-dur: 6s;
	position: relative;
	z-index: 56;
	box-sizing: border-box;
	width: 452px;
	max-width: 100%;
	padding: 10px 12px 10px 10px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 100%), rgba(6, 24, 32, .45);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	        backdrop-filter: blur(14px) saturate(150%);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
	color: #fff;
	text-align: left;
	transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s;
}
.pickup[data-theme="gold"] { --pickup-accent: #f1d58b; --pickup-accent-2: #e2bf68; }
/* 縁：金とミントの 2 枚を重ね、表示中の方だけを見せる（グラデーションは補間されないため opacity で切り替える） */
.pickup::before, .pickup::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
	transition: opacity .4s;
}
.pickup::before { background: linear-gradient(90deg, rgba(3, 180, 74, .95) 0%, rgba(0, 198, 174, .95) 100%); opacity: .55; }
.pickup::after { background: linear-gradient(90deg, rgba(184, 138, 52, .95) 0%, rgba(241, 213, 139, .95) 50%, rgba(184, 138, 52, .95) 100%); opacity: 0; }
.pickup[data-theme="gold"]::before { opacity: 0; }
.pickup[data-theme="gold"]::after { opacity: .6; }
@media (hover: hover) {
	.pickup:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .24); }
	.pickup:hover::before { opacity: .85; }
	.pickup[data-theme="gold"]:hover::before { opacity: 0; }
	.pickup[data-theme="gold"]:hover::after { opacity: .9; }
}
/* 左列の子にはヒーロー側の登場（hcRise）がかかるため詳細度を上げて上書き。透明からの登場は動きの中だけで指定し、
   動きを止める設定（animation: none）でも必ず見えるようにする */
.hc .mv_inner > .pickup { margin-top: 30px; animation: pickupIn .7s cubic-bezier(.22, .61, .36, 1) .9s both; }
@keyframes pickupIn { from { opacity: 0; transform: translateY(14px); } }
/* 登場の途中でキーボードのフォーカスが入っても、カードを必ず見せる（.hc-pill:focus-visible と同じ考え方） */
.pickup:focus-within { opacity: 1 !important; }
/* カードの上端を、C5 の環の下の小見出し（「電子機器開発の」）の上端に揃える（PC・カードがあるとき。金子氏 2026-10-13）。
   カードだけを送る：左列の文字の位置は変えず、カードの上の余白に --pickup-shift を足して下の余白から引く（左列の高さ・縦中央の位置は変わらない）。
   --pickup-shift は js/index.js が測って #FIRSTVIEW に入れる（JS が無いときは 0＝従来の位置） */
@media screen and (min-width: 1100px) {
	#FIRSTVIEW.hc.has-pickup { --pickup-gap: 30px; }
	.hc.has-pickup .mv_inner > .pickup { margin-top: calc(var(--pickup-gap) + var(--pickup-shift, 0px)); margin-bottom: calc(-1 * var(--pickup-shift, 0px)); }
}

/* ---------- 中身（同じ場所に重ねる） ---------- */
.pickup__list { display: grid; }
.pickup.is-multi { padding-bottom: 34px; }   /* 下の縁に線・番号・停止ボタンの段 */
.pickup__item {
	grid-area: 1 / 1;
	align-self: center;                                   /* 2 件のうち高い方にカードの高さが揃う。低い方は上下中央に */
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;                                  /* 消えかけの項目を誤って押さない */
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.pickup__item.is-active {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition: opacity .35s ease .22s, transform .35s cubic-bezier(.22, .61, .36, 1) .22s, visibility 0s .22s;   /* 前が消えてから出る */
}
/* 写真は使わない（2026-10-13 金子氏決定。左に写真を置く形がしっくりこない・写真がキャンペーンに合わない）。文字＋右端の「詳しく」 */
.pickup__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 2px 2px 2px 6px;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
}
.pickup__link:hover { color: #fff; }
.pickup__link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.pickup__body { display: block; min-width: 0; }
/* 小見出しは 1 行で止める。英字の飾り（Barlow Condensed）が届く前は代わりの幅の広い書体で出るため、1100px 前後では 2 行に折り返し、
   届くと 1 行に戻ってカードの高さが 22px 変わっていた（CLS）。届く前の一瞬だけ末尾が「…」になる */
.pickup__kicker { display: block; overflow: hidden; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .78); white-space: nowrap; text-overflow: ellipsis; }
.pickup__kicker span { margin-right: .7em; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: .24em; color: var(--pickup-accent); }
/* 題名は 2 行まで（全角 17 字以内の運用）。折り返しは題名の空白で（入らない長さのときだけ字の途中） */
.pickup__title { display: -webkit-box; margin: 4px 0 4px; overflow: hidden; font-size: 17px; font-weight: 700; line-height: 1.35; word-break: keep-all; overflow-wrap: break-word; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pickup__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: rgba(255, 255, 255, .8); }
.pickup__price { flex-basis: 100%; display: inline-flex; align-items: baseline; height: 36px; font-size: 12px; color: rgba(255, 255, 255, .82); }
/* 価格がキャンペーンの主役。後から届く Barlow で行の高さが変わらないよう、数字は高さを固定した箱に入れる。
   価格は既定で 1 行を単独で使い（上の flex-basis）、フォントによって札との折り返しが変わらないようにする（CLS 対策）。
   札と同じ行に並べるのは、書体が届く前の字幅でも 1 行に収まる幅（1280px 以上）だけ（下の画面幅ごとの指定） */
.pickup__price b { display: inline-block; height: 36px; margin-right: 3px; font-family: 'Barlow Condensed', sans-serif; font-size: 34px; line-height: 36px; letter-spacing: .01em; background: linear-gradient(180deg, #fff6d8 0%, #f1d58b 55%, #d6ad55 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* 札：金ベタに墨の文字（締切の緊急性） */
.pickup__badge { padding: 2px 9px; border-radius: 99px; background: linear-gradient(180deg, #fbeec0 0%, #e2bf68 55%, #c99a42 100%); color: #1c1c1c; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.pickup__note { font-size: 13px; color: rgba(255, 255, 255, .85); }

/* カードの飾り（include/pickup/pickup.php の pickup_render_art。画像は使わず SVG）。種類ごとにカードに 1 つ置き、
   表示中の種類（data-theme）のときだけ見せる（縁と同じく opacity で切り替え）。カードの地の上・文字の後ろ（z-index -1。.pickup は z-index 付きで重ね順の基準） */
.pickup__art {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s;
}
.pickup[data-theme="gold"] .pickup__art--campaign,
.pickup[data-theme="mint"] .pickup__art--product { opacity: 1; }
.pickup__art svg { position: absolute; top: -6px; width: 300px; height: 170px; }
.pickup__art i { position: absolute; border-radius: 50%; }
/* キャンペーン：キャンペーンページの金のリボンと光の粒を、紺のカード向けに描き起こしたもの */
.pickup__art--campaign {
	background:
		radial-gradient(60% 90% at 100% 0%, rgba(241, 213, 139, .2) 0%, rgba(241, 213, 139, 0) 70%),
		radial-gradient(40% 70% at 85% 100%, rgba(226, 191, 104, .12) 0%, rgba(226, 191, 104, 0) 70%);
}
.pickup__art--campaign svg { right: -10px; }
.pickup__art--campaign i { width: 3px; height: 3px; background: #f6e2a4; box-shadow: 0 0 6px 1px rgba(246, 226, 164, .8); opacity: .8; }
.pickup__art--campaign i:nth-of-type(1) { left: 78%; top: 22%; }
.pickup__art--campaign i:nth-of-type(2) { left: 64%; top: 40%; }
.pickup__art--campaign i:nth-of-type(3) { left: 88%; top: 58%; }
.pickup__art--campaign i:nth-of-type(4) { left: 58%; top: 78%; }
.pickup__art--campaign i:nth-of-type(5) { left: 92%; top: 30%; }
.pickup__art--campaign i:nth-of-type(6) { left: 70%; top: 66%; }
/* 一度だけの光（金子氏 2026-10-13）：ヒーローの動き（環の演出 〜5 秒 → ONE-STOP の光 〜7 秒）が終わった直後の 7.2 秒に、
   リボンに沿って光の点が走り、光の粒が一度またたく。主役の順に光を受け渡し、最後にキャンペーンへ目を止める。繰り返さない。
   動くのは光の線（stroke-dashoffset）と粒（opacity・transform）だけで、約 1.2 秒。動きを減らす設定では .hc * の指定で止まり、光の線は見えない。
   時刻は表示中の項目に関係なく決まるため、キャンペーンを items.php の 1 件目に置く（その時刻に製品が出ていると、光は見えないまま終わる） */
.pickup__shine { stroke: #fff6d8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 110; stroke-dashoffset: 10; opacity: 0; animation: pickupShine 1.2s ease-in-out calc(var(--tEnd, 4.35s) + 2.85s) both; }
.pickup__shine--halo { stroke: rgba(241, 213, 139, .45); stroke-width: 7; }
@keyframes pickupShine {
	0% { stroke-dashoffset: 10; opacity: 0; }
	12%, 85% { opacity: 1; }
	100% { stroke-dashoffset: -100; opacity: 0; }   /* pathLength 100 の線を、光の点（長さ 10）が端から端まで走る */
}
.pickup__art--campaign i { animation: pickupTwinkle .9s ease-in-out calc(var(--tEnd, 4.35s) + 3.15s) both; }
.pickup__art--campaign i:nth-of-type(2n) { animation-delay: calc(var(--tEnd, 4.35s) + 3.35s); }
.pickup__art--campaign i:nth-of-type(3n) { animation-delay: calc(var(--tEnd, 4.35s) + 3.55s); }
@keyframes pickupTwinkle { 50% { opacity: 1; transform: scale(1.9); } }
/* 製品：自社製品の一覧ページと同じ意匠のレンズの輪と光の玉（2026-10-14 金子氏）。動きは付けない。
   輪の中心は、標準の幅（カード 452px）で右端から約 84px。カードが狭いほど右へ戻す（1100px 前後で題名とぶつからないよう、カード 360px 以下では寄せない） */
.pickup__art--product { background: radial-gradient(55% 90% at 100% 40%, rgba(0, 198, 174, .16) 0%, rgba(0, 198, 174, 0) 70%); }
.pickup__art--product svg { right: calc(-30px + clamp(0px, (100% - 360px) * .55, 50px)); }
.pickup__art--product i { background: radial-gradient(circle, rgba(127, 240, 218, .55) 0%, rgba(127, 240, 218, 0) 70%); }
.pickup__art--product i:nth-of-type(1) { left: 52%; top: 12%; width: 26px; height: 26px; }
.pickup__art--product i:nth-of-type(2) { left: 64%; top: 70%; width: 16px; height: 16px; }
.pickup__art--product i:nth-of-type(3) { left: 90%; top: 8%; width: 12px; height: 12px; }
/* 行動の言葉：「詳しく ›」。飾り（リボン・輪）の上でも確実に読めるよう、暗い地と細い縁の丸いボタンにする（2026-10-14 金子氏） */
.pickup__go { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 14px; border-radius: 99px; background: rgba(8, 28, 38, .85); box-shadow: inset 0 0 0 1px var(--pickup-accent-2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; font-weight: 700; color: var(--pickup-accent); white-space: nowrap; }
.pickup__go::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.pickup__link:hover .pickup__go::after { transform: translateX(3px) rotate(45deg); }

/* 停止ボタンと番号（右下、線の横）。見た目 24px・当たり判定 36px */
.pickup__ctrl { position: absolute; bottom: 6px; right: 12px; z-index: 2; display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
.pickup__count { display: inline-block; height: 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; line-height: 14px; letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
.pickup__count b { color: #fff; font-weight: 700; }
.pickup__toggle { position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; }
.pickup__toggle::before { content: ""; position: absolute; inset: -6px; }
.pickup__toggle:hover { background: rgba(255, 255, 255, .16); }
.pickup__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pickup__icon { width: 7px; height: 8px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.pickup.is-stopped .pickup__icon { width: 0; height: 0; border-style: solid; border-width: 4.5px 0 4.5px 7px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
/* 「動きを減らす」では停止ボタンが「次へ」になるため、アイコンも › に */
.pickup.is-manual .pickup__icon { width: 6px; height: 6px; border: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: -2px; }

/* 進み具合の線（下の縁）。押すとその項目へ。見た目 3px・当たり判定は上下に広げる */
.pickup__bars { position: absolute; left: 12px; right: 92px; bottom: 6px; z-index: 2; display: flex; gap: 4px; }
.pickup__bar { position: relative; flex: 1; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
/* 線の地は白 40%（カードの暗いすりガラスに対して約 3.4:1。WCAG 1.4.11 非テキストのコントラスト 3:1 以上） */
.pickup__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .4); }
.pickup__bar > i { position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--pickup-accent-2), var(--pickup-accent)); transform: scaleX(0); transform-origin: 0 50%; }
.pickup__bar:hover::before { background: rgba(255, 255, 255, .55); }
.pickup__bar:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 4px; }
.pickup__bar.is-done > i { transform: scaleX(1); opacity: .5; }
.pickup__bar.is-active > i { animation: pickupFill var(--pickup-dur) linear both; }
.pickup.is-paused .pickup__bar.is-active > i, .pickup.is-offscreen .pickup__bar.is-active > i, .pickup.is-tab-hidden .pickup__bar.is-active > i { animation-play-state: paused; }
/* JS が動くまで（JS 無効を含む）切り替えの部品は出さない。1 件目だけが見える */
.pickup.is-multi:not(.is-ready) .pickup__ctrl, .pickup.is-multi:not(.is-ready) .pickup__bars { display: none; }
/* 操作の段の高さは JS が動く前から確保する（JS が動いた時点でカードの背が伸び、縦中央の左列が上に動くのを防ぐ。CLS）。
   JS が無いとき（html に .js が付かない）だけ詰める。.js は common.php（EN は en/index.php）が描画前に付ける */
html:not(.js) .pickup.is-multi { padding-bottom: 10px; }
.pickup.is-stopped .pickup__bar.is-active > i, .pickup.is-manual .pickup__bar.is-active > i { animation: none; transform: scaleX(1); }
@keyframes pickupFill { to { transform: scaleX(1); } }

/* ---------- 画面幅・高さごと ---------- */
/* 左列が狭い幅で見出しが 3 行に崩れる（カードの有無に関係なく #162 の取りこぼし）。列の幅（コンテナー）に合わせ、
   6 字＋字間（≒ 6.24em）が列に収まる大きさを上限にする。コンテナー単位に未対応のブラウザは min() ごと無視され従来どおり。
   横並び（1100px 以上）だけ：縦積みでは左列の幅が中身で決まるため、インラインサイズの包含を付けない。
   EN の見出しの指定（.hc:lang(en) .mv_title）は詳細度が高く、そちらが優先される */
@media screen and (min-width: 1100px) {
	.hc .mv_inner { container-type: inline-size; }
	.hc .mv_title { font-size: min(clamp(2.6rem, 1.5rem + 2.8vw, 3.9rem), 15.8cqi); }
}
/* JP のサービス名の行：左列が 490px 以上なら 1 行に。狭いときは 2 行（.mv_eyebrow > span の block）。行数は幅だけで決まり、書体の到着で変わらない。
   1 行の幅（線と間 58px を除く）の実測は Noto Sans JP 378px・メイリオ 414px・MS P ゴシック 406px・游ゴシック 381px（MS ゴシックは等幅で、sans-serif の代わりには使われない）。
   書体が届く前のいちばん広い書体（メイリオ）でも 1 行に収まる 58＋414＝472px に余裕を見て 490px（470px だと 470〜472px の幅で、
   届く前だけ「…の受」／「託」と 2 行に崩れ、届くと 1 行に縮んだ） */
@container (min-width: 490px) {
	.hc:not(:lang(en)) .mv_eyebrow > span { display: inline; }
}
/* EN：左列が狭いとき（1100〜1279px など）は、線を文字の上に移して横幅を空け、字を小さくする（1 行目「CONTRACT ELECTRONICS DEVELOPMENT,」が
   線の右に収まらず 3 行になるため。代わりの書体〔Arial 等〕でも 2 行に収まる幅） */
@container (max-width: 469.98px) {
	.hc:lang(en) .mv_eyebrow { padding-left: 0; font-size: .8rem; letter-spacing: .04em; }
	.hc:lang(en) .mv_eyebrow::before { position: static; display: block; margin: 0 0 6px; }
}
/* EN の SP の狭い幅（375px 未満）：代わりの書体（Arial 等）では 1 行目「CONTRACT ELECTRONICS DEVELOPMENT,」が列に収まらず 3 行になり、
   Barlow Condensed が届くと 2 行に縮む（320〜336px で実測）。字を小さくして、代わりの書体でも 2 行に収める */
@media screen and (max-width: 374.98px) {
	.hc:lang(en) .mv_eyebrow { font-size: .72rem; letter-spacing: .06em; }
}
/* 1100〜1279px：左列が狭いため、カードの上の間を詰める。題名は 15px（17px だと 1100px 前後で、書体が届く前だけ
   キャンペーンの題名が 2 行に折り返し、届くと 1 行に戻ってカードの高さが 22px 変わる＝CLS） */
@media screen and (min-width: 1100px) and (max-width: 1279.98px) {
	#FIRSTVIEW.hc.has-pickup { --pickup-gap: 18px; }
	.pickup__title { font-size: 15px; }
	/* 価格と札が 2 行に分かれる幅。カードが高くなりすぎて、上端を「電子機器開発の」まで下げられなくなるのを抑える */
	.pickup__price { height: 30px; }
	.pickup__price b { height: 30px; font-size: 28px; line-height: 30px; }
}
/* 1280px 以上：価格と札を 1 行に並べる（書体が届く前の字幅でも 1 行に収まる幅。届いた後に折り返しが変わらない＝CLS 0） */
@media screen and (min-width: 1280px) {
	.pickup__price { flex-basis: auto; }
}
/* 低い PC（〜820px）：本文の下余白を詰め、見出しとヘッダの間を保つ */
@media screen and (min-width: 1100px) and (max-height: 820px) {
	.hc.has-pickup .mv_txt { margin-bottom: 26px; }
}
/* さらに低い PC（〜700px。1366×768 のノート PC はブラウザの枠で表示域が 630〜660px）：左列の余白を詰める */
@media screen and (min-width: 1100px) and (max-height: 700px) {
	.hc.has-pickup .mv_eyebrow { margin-bottom: 14px; }
	.hc.has-pickup .mv_title { margin-bottom: 16px; }
	.hc.has-pickup .mv_txt { margin-bottom: 18px; }
	#FIRSTVIEW.hc.has-pickup { --pickup-gap: 16px; }
}
/* 安全網（横並びの PC 全体）：左列がヒーローの高さを超えるときだけ、ヒーローを中身の高さまで伸ばす。
   収まるときは min-height（＝従来の高さ）のままで見た目は変わらない。上下 20px は中央寄せの対称な余白。
   js/index.js は、この padding-bottom をカードの下の最小の間として読む（変えるときは JS の挙動も確かめる） */
@media screen and (min-width: 1100px) {
	#FIRSTVIEW.hc.has-pickup { height: auto; }
	.hc.has-pickup .hc-wrap { height: auto; min-height: max(560px, var(--hc-h)); padding-top: 20px; padding-bottom: 20px; box-sizing: border-box; }
}
/* スマホ・タブレット（ヒーローは縦積み） */
@media screen and (max-width: 1099.98px) {
	.pickup { width: 100%; max-width: 420px; padding: 9px 10px 9px 9px; }
	.pickup.is-multi { padding-bottom: 36px; }
	.hc .mv_inner > .pickup { margin: 18px auto 0; }
	.pickup__link { grid-template-columns: 1fr; gap: 0; padding-left: 4px; }
	.pickup__go { display: none; }                               /* カード全体がリンク */
	.pickup__kicker span { display: none; }                      /* 小見出しは日本語だけ */
	.pickup__title { font-size: 15px; }
	.pickup__price { height: 30px; }
	.pickup__price b { height: 30px; font-size: 28px; line-height: 30px; }
	.pickup__ctrl { bottom: 4px; right: 8px; }
	.pickup__toggle { width: 28px; height: 28px; }
	.pickup__bars { left: 11px; right: 86px; bottom: 6px; }
	/* 同意バナーが出ている間は自動の切り替えを止める（バナーがカード下の停止ボタン・線を覆うため） */
	body:has(#cookieConsent.show) .pickup__bar.is-active > i { animation-play-state: paused; }
}
/* タッチ操作では線の当たり判定を 24px に（見た目は 3px のまま。すぐ上のカード全体のリンクの誤タップを防ぐ） */
@media (pointer: coarse) {
	.pickup__bar { height: 24px; }
	.pickup__bar::before, .pickup__bar > i { top: 11px; }
	.pickup.is-multi { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.pickup, .pickup__item, .pickup__art, .pickup::before, .pickup::after, .pickup__go::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
	.pickup { border: 1px solid CanvasText; }
	.pickup::before, .pickup::after, .pickup__art { display: none; }
	.pickup__go { border: 1px solid CanvasText; }
	.pickup__price b { -webkit-text-fill-color: currentColor; background: none; }
	.pickup__badge { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
	.pickup__bar::before { background: GrayText; }
	.pickup__bar > i { background: Highlight; }
	.pickup.is-stopped .pickup__icon { forced-color-adjust: none; border-color: transparent transparent transparent ButtonText; }
}