/*
 * 自作アプリ(/apps/)のページだけで読む CSS。functions から is_page( 'apps' ) のときだけ読み込む。
 * 元: site-studio 案件 dn0uky4y の style.css。クラスはすべて .apps-page の中に閉じている。
 */
/* === 構造（wp-developer） === */
/*
 * docs/04_layout.md の寸法どおりの組み方だけ（格子・列の比率・帯・重なり）。
 * 色・文字・動き・演出は下の区画（デザインチーム）。apps- のクラスの外には当てない。
 * 画像の URL はこのファイルからの相対パス（Andon へは assets/images ごと移す）。
 */
.apps-page {
	--apps-gutter: 16px;
	--apps-card-pad-top: 12px;
	--apps-card-pad-x: 20px;
	--apps-card-pad-bottom: 20px;
	--apps-digit-h: 84px;
	--apps-digit-gap: 12px;
	box-sizing: border-box;
}
.apps-page *,
.apps-page *::before,
.apps-page *::after { box-sizing: inherit; }
.apps-page > * { margin-block: 0; }
@media (min-width: 782px) {
	.apps-page {
		--apps-gutter: 40px;
		--apps-card-pad-top: 12px; /* h3 の上端＝帯の下端から 12px（PC・スマホ共通） */
		--apps-card-pad-x: 24px;
		--apps-card-pad-bottom: 24px;
		--apps-digit-h: 168px; /* 点の間隔 24px（84px の点の数字の 2 倍） */
		--apps-digit-gap: 24px;
	}
}
.apps-page__inner {
	max-width: calc(1200px + var(--apps-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--apps-gutter);
}

/* 1. 上部見出し */
.apps-hero { position: relative; overflow: hidden; }
.apps-hero > .apps-page__inner { padding-block: 24px; }
.apps-breadcrumb { margin: 0 0 16px; }
.apps-hero__meter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.apps-hero__meter-row .apps-label { margin: 0; }
.apps-hero__meter { display: inline-flex; align-items: center; gap: 8px; }
.apps-hero__count { display: inline-flex; align-items: center; gap: 6px; }
.apps-hero__grid { display: grid; gap: 8px; }
.apps-hero__catch,
.apps-hero__lead { margin: 0; }
.apps-hero__main { display: grid; gap: 4px; }
@media (min-width: 782px) {
	.apps-hero > .apps-page__inner { padding-block: 48px 40px; }
}
@media (min-width: 960px) {
	.apps-hero__grid {
		grid-template-columns: 7fr 5fr;
		align-items: end;
		gap: 40px;
	}
}
/* 網点の境目（.apps-halftone の background 一括指定より強く当てる） */
.apps-page .apps-hero__halftone,
.apps-page .apps-consult__halftone {
	background-repeat: repeat-x;
	background-size: auto 100%;
}
.apps-page .apps-hero__halftone { background-image: url(images/halftone-down.svg); }
.apps-page .apps-consult__halftone { background-image: url(images/halftone-up.svg); }

/* 2. アプリの棚 */
.apps-shelf { padding-block: 32px var(--apps-shelf-end); }
.apps-shelf__title { margin-bottom: 24px; }
.apps-shelf__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 16px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 782px) {
	.apps-shelf { padding-top: 56px; }
	.apps-shelf__title { margin-bottom: 32px; }
	.apps-shelf__list { gap: 24px; }
}

/* 2-a. カード（縦の flex。ボタンは下端） */
.apps-card { position: relative; min-width: 0; margin: 0; }
.apps-card__band { overflow: hidden; flex-shrink: 0; }
.apps-card:not(.apps-card--next) .apps-card__band {
	padding-left: calc(var(--apps-card-pad-x) + var(--apps-icon) + 12px);
}
.apps-card--next .apps-card__band { padding-left: var(--apps-card-pad-x); gap: 8px; }
.apps-card--next .apps-card__band > .apps-card__next-title { margin-right: auto; }
.apps-card__code { flex: 0 1 auto; overflow: hidden; }
.apps-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	padding: var(--apps-card-pad-top) var(--apps-card-pad-x) var(--apps-card-pad-bottom);
}
.apps-card__body > * { margin: 0; }
/* 頭の行: h3 の上端は帯の下端から 12px。kind は h3 の直下。アイコンの下端とはそろえない */
.apps-card__head { display: flex; align-items: flex-start; gap: 12px; }
.apps-card__icon {
	display: block;
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin-top: calc(-1 * (var(--apps-icon) / 2 + var(--apps-card-pad-top)));
}
.apps-card__icon img { display: block; width: 100%; height: 100%; }
.apps-card__titles { min-width: 0; }
.apps-card__kind { display: block; margin-top: 2px; font-weight: 400; }
.apps-card__flow-label { margin-top: 0; }
.apps-card__steps > li { position: relative; }
.apps-card__steps > li + li { margin-left: 20px; }
.apps-card__steps > li + li::before {
	content: "→";
	content: "→" / "";
	position: absolute;
	top: 50%;
	left: -24px;
	width: 20px;
	text-align: center;
	transform: translateY(-50%);
}
.apps-card__device { margin-bottom: 8px; }
.apps-card__button { margin-top: auto; width: 100%; }
@media (min-width: 782px) {
	.apps-card__button { width: auto; align-self: flex-start; }
}

/* 2-b. 空き枠 */
.apps-card__scan {
	top: 0;
	bottom: auto;
	left: 70%;
	z-index: 2;
	height: var(--apps-band-h);
}
.apps-card--next .apps-card__body { min-height: 200px; }
.apps-card__dotnum { display: flex; gap: var(--apps-digit-gap); }
.apps-card__dotnum svg {
	display: block;
	flex-shrink: 0;
	height: var(--apps-digit-h);
	width: auto;
	aspect-ratio: 60 / 84;
}
.apps-card--next .apps-card__lead { margin-top: auto; }
@media (min-width: 782px) {
	.apps-card--next .apps-card__body { min-height: 320px; }
}

/* 3. 作り方の方針 */
.apps-policy { padding-bottom: 56px; }
.apps-policy__dots {
	height: 4px;
	margin-bottom: var(--apps-policy-start);
	background-image: url(images/dotline.svg);
	background-repeat: repeat-x;
	background-position: 0 50%;
	background-size: auto 100%;
}
.apps-policy h2 { margin-bottom: 24px; }
.apps-policy__list { margin: 0 0 24px; padding: 0; list-style: none; }
.apps-policy__item { padding: 16px 0 32px; }
.apps-policy__title { margin-bottom: 8px; }
.apps-policy__text,
.apps-policy__note { margin: 0; }
@media (min-width: 782px) {
	.apps-policy { padding-bottom: 96px; }
	.apps-policy h2 { margin-bottom: 32px; }
	.apps-policy__list { margin-bottom: 32px; }
}
/* 3 列は 960px 以上から（782〜959px は列幅が 200px 前後になり本文が長く折れるため、スマホと同じ縦並び） */
@media (min-width: 960px) {
	.apps-policy__list { display: grid; grid-template-columns: repeat(3, 1fr); }
	.apps-policy__item { padding: 16px 40px 0 0; }
	.apps-policy__item + .apps-policy__item {
		padding-left: 40px;
		border-left: var(--apps-line);
	}
}

/* 4. 無料相談 */
.apps-consult__inner {
	display: grid;
	gap: 24px;
	padding-block: 40px;
}
.apps-consult__button { width: 100%; }
@media (min-width: 782px) {
	.apps-consult__inner {
		grid-template-columns: 8fr 4fr;
		align-items: center;
		gap: 40px;
		padding-block: 48px;
	}
	.apps-consult__button { width: auto; justify-self: end; }
}

/* === 色・部品（visual-designer） === */
/*
 * 約束
 * - 墨の面は 3 か所だけ: .apps-hero / .apps-card__band / .apps-consult
 * - ネオン #D4FF00 と オレンジ #FF6A1F は墨の上だけ。意味は「状態の点」だけ
 *   （ネオン＝灯っている（公開予定・公開中）／オレンジ＝組み立て中）
 *   例外として決定案で許された: 墨の上の走査線・英字ラベル・相談ボタン（ネオン）
 * - 角丸 4px・線 1px・影なし。カードもボタンもチップも同じ
 * - Andon へ移すとき、このファイルの値は .apps-page の中の変数だけを見る
 */
.apps-page {
	--apps-paper: #f2f3f5;
	--apps-card: #ffffff;
	--apps-ink: #080c1a;
	--apps-muted: #4a525f;
	--apps-neon: #d4ff00;
	--apps-neon-text: #4e6100;
	--apps-orange: #ff6a1f;
	--apps-orange-text: #a8380a;
	--apps-ink-muted: #a3abb8;
	--apps-line-color: #cdd2da;
	--apps-line-on-ink: #262c3d;
	/* 点の数字（空き枠「02」）: 下書き＝塗りなしの輪、灯った点＝墨の塗り */
	--apps-dot-ring: var(--apps-muted);  /* 下書きの輪の線の色 #4A525F */
	--apps-dot-ring-w: 1.5px;            /* 下書きの輪の線の太さ */
	--apps-dot-lit: var(--apps-ink);     /* 灯った点の塗り #080C1A */
	--apps-dot-unlit: #c4c9d1;           /* 灯る前の点の仮の塗り（演出の途中だけ。止まった画面では使わない） */

	--apps-radius: 4px;
	--apps-icon-radius: 22.5%;
	--apps-line: 1px solid var(--apps-line-color);
	--apps-band-h: 56px;
	--apps-icon: 56px;
	--apps-button-h: 48px;
	--apps-status-dot: 8px;

	/* 網点の境目（墨→紙）: 4 段。点の直径は 10 → 7 → 4 → 2px、間隔 12px */
	--apps-halftone-h: 40px;
	--apps-halftone-pitch: 12px;
	--apps-halftone-d1: 10px;
	--apps-halftone-d2: 7px;
	--apps-halftone-d3: 4px;
	--apps-halftone-d4: 2px;

	/* 余白（8 の倍数） */
	--apps-s1: 8px;
	--apps-s2: 16px;
	--apps-s3: 24px;
	--apps-s4: 32px;
	--apps-s5: 48px;
	--apps-section: 64px;
	/* 棚 → 点の区切り線 → 方針 の間（点の区切り線が真ん中に来るよう上下同じ値） */
	--apps-shelf-end: 56px;    /* 棚の下 */
	--apps-policy-start: 56px; /* 点の区切り線 → 方針の見出し */

	/* 空き枠の本体の点線（網点・点の区切り線と同じ「点」の仲間。破線は使わない） */
	--apps-dotted: 2px dotted var(--apps-muted);

	background: var(--apps-paper);
	color: var(--apps-ink);
}
@media (min-width: 782px) {
	.apps-page {
		--apps-band-h: 64px;
		--apps-icon: 64px;
		--apps-halftone-h: 48px;
		--apps-section: 96px;
		--apps-shelf-end: 64px;
		--apps-policy-start: 64px;
	}
}

/* --- 墨の面（3 か所だけ） --- */
.apps-hero,
.apps-consult {
	background: var(--apps-ink);
	color: #ffffff;
}
.apps-hero .apps-label,
.apps-consult .apps-label {
	color: var(--apps-neon);
}
.apps-hero__count,
.apps-hero__lead,
.apps-hero .apps-breadcrumb {
	color: var(--apps-ink-muted);
}
.apps-hero .apps-breadcrumb a {
	color: #ffffff;
}

/* 網点の境目（形は illustrator が SVG/CSS で作る。ここは色と高さだけ） */
.apps-halftone {
	display: block;
	height: var(--apps-halftone-h);
	color: var(--apps-ink);
	background: var(--apps-paper);
}

/* --- 紙の上の英字ラベル --- */
.apps-label {
	color: var(--apps-neon-text);
}

/* --- 状態の点（意味はこの 2 つだけ） --- */
.apps-dot {
	display: inline-block;
	flex-shrink: 0;
	width: var(--apps-status-dot);
	height: var(--apps-status-dot);
	border-radius: 50%;
	background: var(--apps-neon);
}
.apps-dot--building {
	background: var(--apps-orange);
}

/* --- アプリのカード --- */
.apps-card {
	display: flex;
	flex-direction: column;
	background: var(--apps-card);
	border: var(--apps-line);
	border-radius: var(--apps-radius);
	box-shadow: none;
	overflow: visible;
}
.apps-card__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apps-s2);
	height: var(--apps-band-h);
	min-height: var(--apps-band-h);
	padding: 0 var(--apps-s3);
	background: var(--apps-ink);
	color: #ffffff;
	border-radius: calc(var(--apps-radius) - 1px) calc(var(--apps-radius) - 1px) 0 0;
	white-space: nowrap;
}
.apps-card__no {
	color: #ffffff;
}
.apps-card__status {
	display: inline-flex;
	align-items: center;
	gap: var(--apps-s1);
	color: #ffffff;
}
.apps-card__body {
	/* 内側の余白は構造の区画（--apps-card-pad-*）が持つ。ここは色だけ */
	color: var(--apps-ink);
}
.apps-card__icon {
	flex-shrink: 0;
	width: var(--apps-icon);
	height: var(--apps-icon);
	border-radius: var(--apps-icon-radius);
	border: 2px solid var(--apps-card);
	background: var(--apps-card);
	box-shadow: none;
}
.apps-card__kind,
.apps-card__flow-label,
.apps-card__device {
	color: var(--apps-muted);
}
.apps-card__name a {
	color: var(--apps-ink);
	text-decoration: none;
}

/* 使い方の流れのチップ */
.apps-card__steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--apps-s1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.apps-card__steps > li {
	padding: 4px 12px;
	border: var(--apps-line);
	border-radius: var(--apps-radius);
	background: var(--apps-paper);
	color: var(--apps-ink);
}

/* カードのボタン（主ボタン: 墨の地に白い文字） */
.apps-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--apps-s1);
	min-height: var(--apps-button-h);
	padding: 12px 20px;
	background: var(--apps-ink);
	color: #ffffff;
	border: 1px solid var(--apps-ink);
	border-radius: var(--apps-radius);
	box-shadow: none;
	text-decoration: none;
}

/* --- 開発中の空き枠（帯は 01 と同じ実線の墨。本体だけ紙を透かした点線の 3 辺） --- */
.apps-card--next {
	background: transparent;
	/* 外の枠は透明の 1px 実線: 01 カードと箱の寸法をそろえ、帯の上端・高さが一列に並ぶように */
	border: 1px solid transparent;
}
.apps-card--next .apps-card__band {
	position: relative;
	overflow: hidden;
}
.apps-card--next .apps-card__body {
	background: transparent;
	border: var(--apps-dotted);
	border-top: 0; /* 上辺は墨の帯がそのまま閉じる */
	border-radius: 0 0 var(--apps-radius) var(--apps-radius);
}
/* 止まった走査線（形・位置の演出は illustrator / motion-designer） */
.apps-card__scan {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--apps-neon);
}
/* 点で組んだ大きな番号: 灯った段＝墨の塗り、下書きの段＝塗りなしの輪（1.5px・補足の灰）
   輪の塗りなしは各 circle の fill="none" が持つ。ここは線の色・太さと灯りの色だけ（変数で演出から差し替え可） */
.apps-digits {
	color: var(--apps-dot-lit);
}
.apps-digits .is-draft {
	stroke: var(--apps-dot-ring);
	stroke-width: var(--apps-dot-ring-w);
}
.apps-digits .is-lit {
	fill: var(--apps-dot-lit);
}

/* --- 作り方の方針（紙の上） --- */
.apps-policy__item {
	border-top: 1px solid var(--apps-ink);
}
.apps-policy__no {
	color: var(--apps-neon-text);
}
.apps-policy__note {
	color: var(--apps-muted);
}

/* --- 無料相談の帯（墨）とネオンのボタン --- */
.apps-consult__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--apps-s1);
	min-height: var(--apps-button-h);
	padding: 12px 24px;
	background: var(--apps-neon);
	color: var(--apps-ink);
	border: 1px solid var(--apps-neon);
	border-radius: var(--apps-radius);
	box-shadow: none;
	text-decoration: none;
}

/* === 文字（typographer） === */
/*
 * 約束
 * - 書体は 2 つだけ: 角ゴシック Zen Kaku Gothic New（400 / 700 / H1 だけ 900）と等幅 JetBrains Mono（500）
 * - 等幅は「帯の中・件数・方針の番号・英字ラベル」だけ。カード本体の文は角ゴシックでやさしく読ませる
 * - 強調は大きさか太さのどちらか 1 つ（色は visual-designer の約束のまま）
 * - Andon へ移すとき、書体は --apps-font-sans / --apps-font-mono の 2 つを Andon の書体に差し替えるだけ
 */
.apps-page {
	--apps-font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--apps-font-mono: "JetBrains Mono", "Zen Kaku Gothic New", ui-monospace, Menlo, Consolas, monospace;

	/* 文字の大きさ（390px → 1200px でなめらかに。theme.json の fontSizes と同じ値） */
	--apps-fs-meter: 0.8125rem;                                         /* 13px 帯・件数・ラベル（スマホ） */
	--apps-fs-small: 0.875rem;                                          /* 14px */
	--apps-fs-medium: clamp(1rem, 0.970rem + 0.123vw, 1.0625rem);       /* 16〜17px 本文 */
	--apps-fs-large: clamp(1.125rem, 1.065rem + 0.247vw, 1.25rem);      /* 18〜20px */
	--apps-fs-x-large: clamp(1.375rem, 1.254rem + 0.494vw, 1.625rem);   /* 22〜26px */
	--apps-fs-xx-large: clamp(1.75rem, 1.509rem + 0.988vw, 2.25rem);    /* 28〜36px */
	--apps-fs-huge: clamp(2.5rem, 1.898rem + 2.469vw, 3.75rem);         /* 40〜60px H1 */
	--apps-fs-name: clamp(1.5rem, 1.380rem + 0.494vw, 1.75rem);         /* 24〜28px カードのアプリ名だけ（相談の h2 は x-large のまま） */

	/* 墨の上のリード: 補足の灰 #A3ABB8 より一段明るい、白に近い灰（レビュー T2） */
	--apps-hero-lead: #d3d8e0;

	font-family: var(--apps-font-sans);
	font-size: var(--apps-fs-medium);
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.04em;
	-webkit-text-size-adjust: 100%;
}
@media (min-width: 782px) {
	.apps-page {
		--apps-fs-meter: 0.875rem; /* 14px（PC の帯 64px に合わせて一段上げる） */
	}
}

/* --- 改行: 言葉のまとまりで折る（カラムの中も） --- */
.apps-page,
.apps-page .wp-block-column {
	word-break: auto-phrase;
	overflow-wrap: anywhere;
	line-break: strict;
}
.apps-page :where(h1, h2, h3, h4) {
	text-wrap: balance;
}
.apps-page :where(p, li, dd) {
	text-wrap: pretty;
}
.apps-page :where(h1, h2, h3, h4, p, ol, ul) {
	margin-top: 0;
}

/* --- 等幅（計器の文字）: 帯・件数・方針の番号・英字ラベルだけ --- */
.apps-label,
.apps-hero__meter,
.apps-card__code,
.apps-policy__no {
	font-family: var(--apps-font-mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* 英字ラベル APPS / LINEUP / POLICY / CONTACT（既存サイトと同じ: 全大文字・記号なし・見出しのすぐ上に 1 行） */
.apps-label {
	margin: 0 0 8px;
	font-size: var(--apps-fs-meter);
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --- 1. 上部見出し --- */
.apps-breadcrumb {
	font-size: var(--apps-fs-meter);
	line-height: 1.4;
	letter-spacing: 0.06em;
}
.apps-breadcrumb ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}
.apps-breadcrumb li + li::before {
	content: "›";
	margin: 0 0.5em;
}
.apps-hero__meter {
	margin: 0;
	font-size: var(--apps-fs-meter);
	line-height: 1.2;
	letter-spacing: 0.08em;
	white-space: nowrap;
}
.apps-hero__meter b {
	font-weight: inherit; /* 数字は太らせず、等幅のまま並べる */
}
.apps-hero__title {
	margin: 0;
	font-family: var(--apps-font-sans);
	font-size: var(--apps-fs-huge);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0.03em;
	word-break: keep-all; /* 「自作アプリ」を途中で折らない */
}
.apps-hero__catch {
	font-size: var(--apps-fs-large);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.apps-hero__lead {
	font-size: var(--apps-fs-medium);
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--apps-hero-lead); /* 16px・行間はそのまま、明るさだけ一段上げる */
}

/* --- 2. 棚と方針の見出し（h2 は 2 つとも同じ大きさ。相談の h2 はこれより小さく） --- */
.apps-shelf__title,
.apps-policy h2 {
	font-size: var(--apps-fs-xx-large);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

/* --- カードの墨の帯（1 行固定・計器の表示） --- */
.apps-card__band {
	font-size: var(--apps-fs-meter);
	line-height: 1;
}
.apps-card__band > p,
.apps-card__band > h3 {
	margin: 0;
}
.apps-card__code {
	display: flex;
	align-items: baseline;
	min-width: 0;
	letter-spacing: 0.12em;
	white-space: nowrap;
}
.apps-card__no,
.apps-card__rule {
	flex-shrink: 0;
}
.apps-card__rule {
	margin: 0 0.5em;
	letter-spacing: 0;
}
.apps-card__slug {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis; /* 長いときは名前だけ省略。番号は必ず残す */
	text-transform: uppercase;
}
.apps-card__status {
	flex-shrink: 0;
	font-family: var(--apps-font-sans);
	font-size: var(--apps-fs-meter);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
/* 空き枠の見出しは省略しない（見出しの文字は欠かさない）。収まらないときは帯の中で 2 行に折る
   （13px × 行間 1.25 × 2 行 ≒ 33px。帯 56px の中に収まる）。折る位置は文節（次のアプリを／開発中） */
.apps-card__next-title {
	min-width: 0;
	margin: 0 auto 0 0;
	font-family: var(--apps-font-sans);
	font-size: var(--apps-fs-meter);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.08em;
	white-space: normal;
	word-break: auto-phrase;
}
/* 360px 未満（320px 端末）: 帯・ボタンの字間を詰めて 1 行に収める（QA T2） */
@media (max-width: 359.98px) {
	.apps-card__code {
		letter-spacing: 0;
	}
	/* 飾りの罫「──」（読み上げなし）を外して約 20px あけ、名前（MINUTES）を省略させない。番号と名前の間は 0.6em */
	.apps-card__rule {
		display: none;
	}
	.apps-card__no {
		margin-right: 0.6em;
	}
	.apps-card__status {
		letter-spacing: 0;
	}
	.apps-card__next-title {
		letter-spacing: 0.02em;
	}
	.apps-card__button {
		letter-spacing: 0;
		white-space: nowrap;
	}
}

/* --- カードの本体（角ゴシックでやさしく） --- */
.apps-card__name {
	margin: 0;
	font-size: var(--apps-fs-name); /* スマホ 24px・PC 28px。帯とアイコンに負けない主役 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
.apps-card__kind {
	margin: 0;
	font-size: var(--apps-fs-small);
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.apps-card__lead {
	font-size: var(--apps-fs-medium);
	line-height: 1.85;
	letter-spacing: 0.04em;
}
.apps-card__flow-label {
	margin-bottom: 8px;
	font-size: var(--apps-fs-small);
	line-height: 1.5;
	letter-spacing: 0.04em;
}
.apps-card__steps > li {
	font-size: var(--apps-fs-small);
	line-height: 1.4;
	letter-spacing: 0.04em;
	white-space: nowrap; /* チップの中で折らない。折れるときはチップごと次の行へ */
}
.apps-card__device {
	font-size: var(--apps-fs-small);
	line-height: 1.6;
	letter-spacing: 0.04em;
}
.apps-card__device-label {
	margin-right: 0.75em;
	font-weight: 700;
}

/* ボタン（カード・相談とも同じ文字） */
.apps-card__button,
.apps-consult__button {
	font-family: var(--apps-font-sans);
	font-size: var(--apps-fs-medium);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

/* --- 3. 作り方の方針 --- */
.apps-policy__no {
	display: block;
	margin-bottom: 8px;
	font-size: var(--apps-fs-small);
	line-height: 1.2;
	letter-spacing: 0.12em;
}
.apps-policy__title {
	font-size: var(--apps-fs-large);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.02em;
}
.apps-policy__text {
	font-size: var(--apps-fs-medium);
	line-height: 1.85;
}
/* 3 列のとき: 文節で折ると行末が大きく欠けて行が増えるので、本文だけ字で折る
   （禁則は line-break: strict が守る）。見出しは文節のまま。
   両端そろえは 1 行 18 字前後とれる 960px 以上だけ。782〜959px は 1 列約 200px（1 行 11〜12 字）で、
   「API」など折れない語の前後に字間が大きく空くため左そろえにする（QA T1） */
@media (min-width: 782px) {
	.apps-policy__text {
		word-break: normal;
		letter-spacing: 0.02em;
	}
}
@media (min-width: 960px) {
	.apps-policy__text {
		text-align: justify;
		text-justify: inter-character;
	}
}
.apps-policy__note {
	font-size: var(--apps-fs-small);
	line-height: 1.7;
}

/* --- 4. 無料相談（棚の h2 より小さく） --- */
.apps-consult__title {
	margin: 0;
	font-size: var(--apps-fs-x-large);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.03em;
}

/* === 動き（interaction-designer） === */
/*
 * 約束
 * - 反応は「矢印が 4px 右へ」「カードの帯の下端にネオンの 1px が左→右に走る」「下線」「押すと 1px 沈む」
 *   ＋（遊び心 3）「● 近日公開」の点から輪が 1 回だけ広がって消える（信号を受け取った合図）
 * - 輪は .apps-card__status::before（点 .apps-dot とは別の層）。点の animation は motion-designer のもの
 * - 浮き上がり・影・拡大はしない（決定案）。カード全体はリンクではないので、カードそのものは反応しない
 * - 空き枠 .apps-card--next そのものは変えない（リンクなし・矢印カーソル・フォーカスなし）。
 *   下書きの点の反応は motion-designer の隠れた仕掛け（押せる合図は出さない）
 * - フォーカスの輪は 2px。紙・白の上＝墨、墨の上＝ネオン
 * - 時間は 200ms・ease-out。ホバーは指で触る端末では出さない（@media (hover: hover)）
 */
.apps-page {
	--apps-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ease-out */
	--apps-dur: 200ms;
	--apps-focus-w: 2px;
	--apps-focus-offset: 3px;
	--apps-press: #262c3d; /* 押した時のカードのボタンの地（白文字 14:1） */
	--apps-neon-press: #bce600; /* 押した時の相談ボタンの地（墨文字 13:1） */
}

/* --- 動く部品の transition --- */
.apps-card__button,
.apps-consult__button {
	transition:
		background-color var(--apps-dur) var(--apps-ease),
		border-color var(--apps-dur) var(--apps-ease),
		transform 120ms var(--apps-ease);
}
.apps-card__button > span[aria-hidden="true"],
.apps-consult__button > span[aria-hidden="true"] {
	display: inline-block;
	transition: transform var(--apps-dur) var(--apps-ease);
}
.apps-card__name a,
.apps-breadcrumb a {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--apps-dur) var(--apps-ease);
}
.apps-breadcrumb a {
	text-decoration-color: currentColor; /* 墨の上のパンくずは最初から下線で「押せる」と分かるように */
}

/* --- カードの帯の下端を走るネオンの 1px（ボタン・アプリ名・アイコンに触れている間） --- */
.apps-card__band {
	position: relative;
}
.apps-card:not(.apps-card--next) .apps-card__band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--apps-neon);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 250ms var(--apps-ease);
	pointer-events: none;
}
.apps-card:not(.apps-card--next):has(a:focus-visible) .apps-card__band::after {
	transform: scaleX(1);
}

/* --- 「● 近日公開」の点から広がる輪（帯の線と同時に 1 回だけ。帯の overflow: hidden で墨の中に閉じる） --- */
.apps-card:not(.apps-card--next) .apps-card__status {
	position: relative;
}
.apps-card:not(.apps-card--next) .apps-card__status::before {
	content: "";
	position: absolute;
	left: 0; /* 点は状態の文字の先頭（左端）にある */
	top: 50%;
	width: var(--apps-status-dot);
	height: var(--apps-status-dot);
	margin-top: calc(var(--apps-status-dot) / -2);
	box-sizing: border-box;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.apps-card:not(.apps-card--next) .apps-card__status::before {
		border: 1px solid var(--apps-neon);
		transform-origin: center;
	}
	.apps-card:not(.apps-card--next):has(a:focus-visible) .apps-card__status::before {
		animation: apps-ping 500ms var(--apps-ease) 1 both;
	}
	@media (hover: hover) {
		.apps-card:not(.apps-card--next):has(a:hover) .apps-card__status::before {
			animation: apps-ping 500ms var(--apps-ease) 1 both;
		}
	}
	@keyframes apps-ping {
		0% { transform: scale(1); opacity: 0.9; }
		100% { transform: scale(3); opacity: 0; } /* 8px → 24px。帯 56px の中に収まる */
	}
}

/* --- ホバー（マウスなど、ホバーができる端末だけ） --- */
@media (hover: hover) {
	.apps-card:not(.apps-card--next):has(a:hover) .apps-card__band::after {
		transform: scaleX(1);
	}
	.apps-card__button:hover > span[aria-hidden="true"],
	.apps-consult__button:hover > span[aria-hidden="true"] {
		transform: translateX(4px);
	}
	.apps-card__name a:hover {
		text-decoration-color: currentColor;
		text-decoration-thickness: 2px;
	}
	.apps-breadcrumb a:hover {
		text-decoration-thickness: 2px;
	}
	.apps-consult__button:hover {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.25em;
	}
}

/* --- キーボードのフォーカス（ホバーと同じ合図＋はっきりした輪） --- */
.apps-page a:focus-visible {
	outline: var(--apps-focus-w) solid var(--apps-ink);
	outline-offset: var(--apps-focus-offset);
	border-radius: var(--apps-radius);
}
/* 墨の上（上部見出し・相談帯）はネオンの輪 */
.apps-hero a:focus-visible,
.apps-consult a:focus-visible {
	outline-color: var(--apps-neon);
}
.apps-card__button:focus-visible > span[aria-hidden="true"],
.apps-consult__button:focus-visible > span[aria-hidden="true"] {
	transform: translateX(4px);
}
.apps-card__name a:focus-visible {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}
.apps-breadcrumb a:focus-visible {
	text-decoration-thickness: 2px;
}
/* マウスで押した時は輪を出さない（キーボードの時だけ） */
.apps-page a:focus:not(:focus-visible) {
	outline: none;
}

/* --- 押した時: 1px 沈む＋地が少し変わる --- */
.apps-card__button:active {
	background: var(--apps-press);
	border-color: var(--apps-press);
	transform: translateY(1px);
}
.apps-consult__button:active {
	background: var(--apps-neon-press);
	border-color: var(--apps-neon-press);
	transform: translateY(1px);
}
.apps-card__name a:active {
	color: var(--apps-muted);
}

/* --- 空き枠そのものは反応しない: リンクなし・カーソルは矢印のまま・フォーカスも止まらない
   （下書きの点だけ motion-designer の隠れた仕掛けで反応する。押せる合図＝指のカーソル・下線・輪は出さない） --- */
.apps-card--next,
.apps-card--next * {
	cursor: default;
}

/* --- 動きを減らす設定: 時間を 0 に（演出は 1 回で最後の状態に止まる） --- */
@media (prefers-reduced-motion: reduce) {
	.apps-page,
	.apps-page *,
	.apps-page *::before,
	.apps-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
	/* 輪は出さない。点の上に明るいネオンを重ね、一瞬（0.4 秒）明るくして元に戻すだけ（大きさ・位置は動かない） */
	.apps-page .apps-card:not(.apps-card--next) .apps-card__status::before {
		background: #f4ffc2;
	}
	.apps-page .apps-card:not(.apps-card--next):has(a:focus-visible) .apps-card__status::before {
		animation: apps-dot-flash 400ms ease-out 1 both !important;
	}
	@media (hover: hover) {
		.apps-page .apps-card:not(.apps-card--next):has(a:hover) .apps-card__status::before {
			animation: apps-dot-flash 400ms ease-out 1 both !important;
		}
	}
	@keyframes apps-dot-flash {
		0% { opacity: 1; }
		100% { opacity: 0; }
	}
}

/* === 演出（motion-designer） === */
/*
 * 約束（遊び心 3。種類は 6 つまで: docs/04_concept.md / docs/04_motion.md）
 * 文法はトップのロゴと同じ「集まる → 走査線が通る → 灯る → ログが [ OK ] で止まる」だけ
 * 1. 空き枠「02」（見せ場）: 点が集まる → 帯の走査線が 70% まで → 通った列から下 4 段が灯る → ログ [ BUILDING ]・DOTS が数え上がる
 * 2. 上部見出し: 走査線が左→右に走り、通ったところから件数の「●」が灯る・数え上がる → 7:5 の境目に線を残す → ログ [ OK ]
 * 3. 01〜のカードの帯: 下端をネオンの線が 1 回走り、「●」がネオン管のように 2 回ちらついて点く → REC の明滅
 * 4. 隠れた仕掛け: PC のマウスで「02」の下書きの輪をなぞると墨で埋まり、1.2 秒で輪に戻る
 * 5. 英字ラベル LINEUP / POLICY / CONTACT: 1 文字ずつ打たれ、四角いカーソルが 2 回点滅して消える
 * 6. 相談帯: CONTACT の右に「> ready _」。カーソルだけゆっくり点滅（1.4 秒周期）
 * - くり返すのは 3 の REC と 6 のカーソルだけ。画面の外では止める（motion.js が apps-is-off を付ける）
 * - 隠す指定は .apps-page.apps-motion-on の下だけ（motion.js が動きを減らす設定でないときだけ付ける）
 * - 下の「止まった姿」の指定だけはメディア指定の外（いつも効く）。動きを減らす設定・JS なしは、この止まった姿
 * - 動かすのは transform / opacity（＋打ち込みだけ clip-path）。apps- のクラスの外には当てない
 * - 点・走査線・ログ・カーソルは pointer-events: none（下書きの輪の仕掛けだけ例外）
 */

/* --- 止まった姿（いつも効く） --- */
/* 2. 上部見出しの走査線: PC は 7:5 の境目（左列と右列のすき間の真ん中）に 1px のネオンを残す（レビュー M1）
      960px 未満は文字を切らないよう、右の余白の真ん中（画面の右端から gutter の半分）に残す（2回目 M2） */
.apps-hero__scan {
	position: absolute;
	top: 0;
	right: 0;
	bottom: var(--apps-halftone-h); /* 墨の上だけ（網点の紙には入らない） */
	left: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	--apps-m-box: min(100%, 1200px + var(--apps-gutter) * 2);
}
.apps-hero > .apps-page__inner {
	position: relative;
	z-index: 1; /* 走査線は文字の後ろを通る（見出しの上に線を乗せない） */
}
.apps-hero__scan::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(100% - var(--apps-gutter) / 2);
	left: round(down, calc(100% - var(--apps-gutter) / 2), 1px);
	width: 1px;
	background: var(--apps-neon);
}
/* 1px の線は整数の px に置く（小数だと 2 つの画素ににじんで灰色に見える: QA M1）。
   round() が効かない端末は 1 行目の calc のまま（位置は同じ・にじむだけ） */
@media (min-width: 960px) {
	.apps-hero__scan::after {
		left: calc((100% - var(--apps-m-box)) / 2 + var(--apps-gutter) + (var(--apps-m-box) - var(--apps-gutter) * 2 - 40px) * 7 / 12 + 20px);
		left: round(down, calc((100% - var(--apps-m-box)) / 2 + var(--apps-gutter) + (var(--apps-m-box) - var(--apps-gutter) * 2 - 40px) * 7 / 12 + 20px), 1px);
	}
}
/* 1. 空き枠の止まった走査線（帯の 70%）も整数の px に（構造の区画の left: 70% を丸めるだけ。位置は変えない） */
.apps-card--next > .apps-card__scan {
	left: round(down, 70%, 1px);
}

/* ログの行（飾り・aria-hidden）: 起動中の文と止まった後の文を同じ升に重ね、長い方の幅と高さを最初から確保する */
.apps-log {
	display: inline-grid;
	justify-items: start;
	margin: 0;
	font-family: var(--apps-font-mono);
	font-size: 0.75rem; /* 12px（スマホで 1 行に収める） */
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: pre; /* 「[ OK ]」の前の半角スペース 2 つを残す */
	pointer-events: none;
}
.apps-log > .apps-log__run,
.apps-log > .apps-log__done {
	grid-area: 1 / 1;
}
.apps-log__run {
	visibility: hidden; /* 止まった姿では起動中の文は出さない */
}
.apps-hero__log,
.apps-consult__log {
	color: var(--apps-ink-muted);
}
.apps-hero__log {
	margin-top: 4px;
}
/* 空き枠: ログと DOTS の計器（スマホでは DOTS が次の行へ。最初から 2 つとも出ているので幅は変わらない） */
.apps-next__readout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 16px;
	margin: 0;
	color: var(--apps-muted);
	pointer-events: none;
}
.apps-next__dots {
	margin: 0;
	font-family: var(--apps-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	letter-spacing: 0.08em;
	white-space: nowrap;
}
.apps-next__lit {
	display: inline-block;
	min-width: 2ch; /* 数え上げの間も 2 桁ぶんの幅 */
	font-weight: inherit;
	text-align: right;
}
/* 相談帯: CONTACT の右にログを並べる行 */
.apps-consult__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 16px;
	margin-bottom: 8px;
}
.apps-consult__meta > .apps-label {
	margin: 0;
}
@media (min-width: 782px) {
	.apps-log,
	.apps-next__dots {
		font-size: var(--apps-fs-meter);
	}
}

/* --- ここから動き（動きを減らす設定では何も起きない） --- */
@media (prefers-reduced-motion: no-preference) {
	.apps-page {
		--apps-m-ease: cubic-bezier(0.45, 0, 0.25, 1);
		--apps-m-pop: cubic-bezier(0.2, 0.7, 0.3, 1.4);
		--apps-m-out: cubic-bezier(0.2, 0.7, 0.2, 1);
		--apps-m-swap: 1.5s; /* ログが「起動中」→「止まった後」に変わる時刻 */
		--apps-m-spread: 24px; /* 散らばりの距離（点の数字の座標で。スマホ 84px の数字 = 画面の上で 24px） */
	}
	@media (min-width: 782px) {
		.apps-page { --apps-m-spread: 32px; } /* PC は数字が 2 倍なので画面の上で 64px */
	}

	/* 共通の動き */
	@keyframes apps-fade-in { from { opacity: 0; } to { opacity: 1; } }
	@keyframes apps-fade-out { from { opacity: 1; } to { opacity: 0; } }
	@keyframes apps-hide { to { opacity: 0; } }
	@keyframes apps-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

	/* ログの打ち込み（起動中の文 → 止まった後の文）。上部見出しは読み込み時、空き枠は画面に入ったとき */
	.apps-page.apps-motion-on .apps-card--next:not(.apps-is-in) .apps-log > * {
		clip-path: inset(0 100% 0 0);
	}
	.apps-page.apps-motion-on :is(.apps-hero, .apps-card--next) .apps-log__run {
		visibility: visible;
	}
	.apps-page.apps-motion-on :is(.apps-hero, .apps-card--next.apps-is-in) .apps-log__run {
		animation:
			apps-type 0.35s steps(var(--apps-m-ch, 16), end) 0.05s 1 backwards,
			apps-hide 0.01s linear var(--apps-m-swap) 1 forwards;
	}
	.apps-page.apps-motion-on :is(.apps-hero, .apps-card--next.apps-is-in) .apps-log__done {
		animation: apps-type 0.35s steps(var(--apps-m-ch, 30), end) var(--apps-m-swap) 1 backwards;
	}

	/* --- 1. 空き枠「02」（見せ場・2 秒以内で 1 回きり） --- */
	/* 1-a. 点が集まる: --i（点の通し番号）から決まる固定の位置から、0.6 秒で元の位置へ（0〜0.9 秒） */
	.apps-page.apps-motion-on .apps-card--next .apps-card__body {
		overflow: hidden;
		overflow: clip; /* 散らばった点は空き枠の本体の中だけ（本文・枠の外に出さない） */
	}
	.apps-page.apps-motion-on .apps-card--next .apps-digits svg {
		overflow: visible;
	}
	.apps-page.apps-motion-on .apps-card--next .apps-digits circle {
		transform-box: fill-box;
		transform-origin: center;
		--apps-m-a: calc(var(--i, 0) * 2.4);
		--apps-m-k: calc(0.45 + (1 + sin(var(--i, 0) * 1.3)) * 0.275); /* 距離のばらつき 0.45〜1 */
		--apps-m-dx: calc(sin(var(--apps-m-a)) * var(--apps-m-spread) * var(--apps-m-k));
		--apps-m-dy: calc((cos(var(--apps-m-a)) * 0.7 - 0.3) * var(--apps-m-spread) * var(--apps-m-k)); /* 主に上へ（下の本文に寄せない） */
		--apps-m-o: 1;
	}
	.apps-page.apps-motion-on .apps-card--next .apps-digits .is-lit circle {
		--apps-m-o: 0.22; /* 灯る前の下 4 段は墨 22%（≒ --apps-dot-unlit の灰） */
	}
	/* 3 桁になったら散らばりを省く（点が 80 個を超えないように・決定案） */
	.apps-page.apps-motion-on .apps-card--next .apps-digits:has(> svg:nth-of-type(3)) circle {
		--apps-m-dx: 0px;
		--apps-m-dy: 0px;
	}
	.apps-page .apps-digits > svg:nth-of-type(2) { --apps-m-d: 0.1s; }
	.apps-page .apps-digits > svg:nth-of-type(3) { --apps-m-d: 0.2s; }
	.apps-page.apps-motion-on .apps-card--next:not(.apps-is-in) .apps-digits circle {
		opacity: 0;
	}
	.apps-page.apps-motion-on .apps-card--next.apps-is-in .apps-digits circle {
		animation: apps-gather 0.6s var(--apps-m-out) calc(var(--i, 0) / var(--n, 16) * 0.2s + var(--apps-m-d, 0s)) 1 backwards;
	}
	@keyframes apps-gather {
		from {
			opacity: 0;
			transform: translate(var(--apps-m-dx), var(--apps-m-dy)) scale(0.6);
		}
		70% { opacity: var(--apps-m-o); }
		to {
			opacity: var(--apps-m-o);
			transform: none;
		}
	}
	/* 1-c. 下 4 段が灯る: 走査線がその点の列を通った時刻（--apps-m-at・motion.js が測る）＋段（下から） */
	.apps-page.apps-motion-on .apps-card--next.apps-is-in .apps-digits .is-lit circle {
		opacity: 0.22;
		animation:
			apps-gather 0.6s var(--apps-m-out) calc(var(--i, 0) / var(--n, 16) * 0.2s + var(--apps-m-d, 0s)) 1 backwards,
			apps-dot-light 0.32s var(--apps-m-pop) calc(var(--apps-m-at, 1s) + var(--apps-m-r, 0s)) 1 forwards;
	}
	@keyframes apps-dot-light {
		0% { opacity: 0.22; transform: scale(1); }
		55% { opacity: 1; transform: scale(1.35); }
		100% { opacity: 1; transform: scale(1); }
	}
	.apps-page .apps-digits .apps-digits__r6 { --apps-m-r: 0.03s; }
	.apps-page .apps-digits .apps-digits__r5 { --apps-m-r: 0.06s; }
	.apps-page .apps-digits .apps-digits__r4 { --apps-m-r: 0.09s; }

	/* 1-b. 帯の走査線: 0.9 秒から 0.55 秒で左端 → 70%（一定の速さ。灯る時刻の計算と合わせる） */
	.apps-page.apps-motion-on .apps-card--next .apps-card__band::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			to right,
			rgba(212, 255, 0, 0) calc(100% - 120px),
			rgba(212, 255, 0, 0.14) calc(100% - 1px),
			var(--apps-neon) calc(100% - 1px)
		);
		transform: translateX(-100%);
	}
	.apps-page.apps-motion-on .apps-card--next.apps-is-in .apps-card__band::before {
		animation:
			apps-next-sweep 0.55s linear 0.9s 1 both,
			apps-fade-out 0.3s ease-out 1.45s 1 both;
	}
	@keyframes apps-next-sweep {
		from { transform: translateX(-100%); }
		to { transform: translateX(-30%); } /* 右端 = 帯の 70%（.apps-card__scan の止まり位置） */
	}
	/* 止まった走査線は、走る線が着いたところで入れかわりに現れる */
	.apps-page.apps-motion-on .apps-card--next:not(.apps-is-in) .apps-card__scan {
		opacity: 0;
	}
	.apps-page.apps-motion-on .apps-card--next.apps-is-in .apps-card__scan {
		animation: apps-fade-in 0.1s linear 1.43s 1 both;
	}

	/* --- 2. 上部見出し（読み込み時に 1 回きり） --- */
	/* 走る線: 墨の面の左端 → 右端を 0.1 秒から 1.1 秒（一定の速さ）。うすい残像 160px つき。走り終えたら消える */
	.apps-page.apps-motion-on .apps-hero__scan::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			rgba(212, 255, 0, 0) calc(100% - 160px),
			rgba(212, 255, 0, 0.12) calc(100% - 1px),
			var(--apps-neon) calc(100% - 1px)
		);
		transform: translateX(-100%);
		animation:
			apps-hero-sweep 1.1s linear 0.1s 1 both,
			apps-fade-out 0.25s ease-out 1.2s 1 both;
	}
	@keyframes apps-hero-sweep {
		from { transform: translateX(-100%); }
		to { transform: translateX(0); }
	}
	/* 止まる線: 走る線が 7:5 の境目を通った瞬間に残る（--apps-m-at は motion.js が測る） */
	.apps-page.apps-motion-on .apps-hero__scan::after {
		animation: apps-fade-in 0.12s linear var(--apps-m-at, 0.75s) 1 both;
	}
	/* 件数の「●」: 消えた点 → 走る線が通った瞬間に灯る（数え上げは motion.js が同じ時刻から） */
	.apps-page.apps-motion-on .apps-hero__count .apps-dot {
		animation: apps-lamp 0.4s var(--apps-m-pop) var(--apps-m-at, 1s) 1 both;
	}
	@keyframes apps-lamp {
		0% { opacity: 0.18; transform: scale(1); }
		45% { opacity: 1; transform: scale(1.6); }
		100% { opacity: 1; transform: scale(1); }
	}

	/* --- 3. 01〜のカードの帯（帯が画面に入ったとき 1 回 → REC の明滅） --- */
	/* 帯の下端を走る線（::after は interaction-designer のホバーの線なので ::before を使う） */
	.apps-page.apps-motion-on .apps-card:not(.apps-card--next) .apps-card__band::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 40%;
		height: 1px;
		pointer-events: none;
		background: linear-gradient(to right, rgba(212, 255, 0, 0), var(--apps-neon));
		transform: translateX(-100%);
	}
	.apps-page.apps-motion-on .apps-card:not(.apps-card--next).apps-is-in .apps-card__band::before {
		animation: apps-band-run 0.45s var(--apps-m-ease) 0s 1 both;
	}
	@keyframes apps-band-run {
		from { transform: translateX(-100%); }
		to { transform: translateX(250%); } /* 帯の右端の外へ抜ける（帯の overflow: hidden で消える） */
	}
	/* 「●」: 消えた点 → ネオン管のように 2 回ちらついて点く（0.5 秒・1 秒に 3 回まで）→ 1.7 秒から REC の明滅 */
	.apps-page.apps-motion-on .apps-card:not(.apps-card--next):not(.apps-is-in) .apps-card__status .apps-dot {
		opacity: 0.15;
	}
	.apps-page.apps-motion-on .apps-card:not(.apps-card--next).apps-is-in .apps-card__status .apps-dot {
		animation:
			apps-neon-on 0.5s steps(1, end) 0.2s 1 both,
			apps-dot-rec 2.4s ease-in-out 1.7s infinite;
	}
	@keyframes apps-neon-on {
		0% { opacity: 0.15; }
		12% { opacity: 1; }
		24% { opacity: 0.15; }
		44% { opacity: 1; }
		56% { opacity: 0.2; }
		76%, 100% { opacity: 1; }
	}
	@keyframes apps-dot-rec {
		0%, 55% { opacity: 1; }
		72%, 82% { opacity: 0.25; }
		100% { opacity: 1; }
	}

	/* --- 5. 英字ラベル: 1 文字ずつ打たれ（0.4 秒）、四角いカーソルが 2 回点滅して消える（APPS は除く） --- */
	.apps-page.apps-motion-on :is(.apps-shelf, .apps-policy, .apps-consult) .apps-label {
		position: relative;
		width: fit-content;
	}
	.apps-page.apps-motion-on :is(.apps-shelf, .apps-policy, .apps-consult) .apps-label:not(.apps-is-in) {
		clip-path: inset(0 100% 0 0);
	}
	.apps-page.apps-motion-on :is(.apps-shelf, .apps-policy, .apps-consult) .apps-label.apps-is-in {
		animation: apps-type 0.4s steps(var(--apps-m-ch, 6), end) 0s 1 backwards;
	}
	.apps-page.apps-motion-on :is(.apps-shelf, .apps-policy, .apps-consult) .apps-label::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		width: 0.62em;
		height: 1.05em;
		margin: -0.55em 0 0 0.1em;
		background: currentColor;
		opacity: 0;
		pointer-events: none;
	}
	.apps-page.apps-motion-on :is(.apps-shelf, .apps-policy, .apps-consult) .apps-label.apps-is-in::after {
		animation: apps-cursor-twice 0.6s steps(1, end) 0.4s 1 both;
	}
	@keyframes apps-cursor-twice {
		0% { opacity: 1; }
		25% { opacity: 0; }
		50% { opacity: 1; }
		75%, 100% { opacity: 0; }
	}

	/* --- 6. 相談帯: CONTACT を打ち終えたら「> ready」を打ち、カーソル「_」だけゆっくり点滅 --- */
	.apps-page.apps-motion-on .apps-consult .apps-label:not(.apps-is-in) + .apps-log .apps-log__done {
		clip-path: inset(0 100% 0 0);
	}
	.apps-page.apps-motion-on .apps-consult .apps-label.apps-is-in + .apps-log .apps-log__done {
		animation: apps-type 0.3s steps(var(--apps-m-ch, 9), end) 1s 1 backwards;
	}
	.apps-page.apps-motion-on .apps-consult .apps-label.apps-is-in + .apps-log .apps-log__cursor {
		display: inline-block;
		animation: apps-blink 1.4s steps(1, end) 1.3s infinite;
	}
	@keyframes apps-blink {
		0% { opacity: 1; }
		50%, 100% { opacity: 0; }
	}

	/* くり返す 2 つ（REC・カーソル）は画面の外では止める */
	.apps-page.apps-motion-on .apps-card.apps-is-off .apps-dot,
	.apps-page.apps-motion-on .apps-consult.apps-is-off .apps-log__cursor {
		animation-play-state: paused;
	}

	/* --- 4. 隠れた仕掛け: PC のマウスで下書きの輪をなぞると、墨で埋まって 1.2 秒で輪に戻る --- */
	/* 押せる合図（指のカーソル・下線・輪・tabindex）は出さない。スマホ（hover なし）では何も起きない */
	@media (hover: hover) and (pointer: fine) {
		.apps-page .apps-card--next .apps-digits .is-draft circle {
			pointer-events: visible;
			transition:
				fill-opacity 1.2s ease-out,
				stroke 1.2s ease-out;
		}
		.apps-page .apps-card--next .apps-digits .is-draft circle:hover {
			fill-opacity: 1;
			stroke: var(--apps-dot-lit);
			transition-duration: 0s;
		}
	}
}

/* --- アプリの画面写真(実績カードと同じ「画像が主役」の形)。帯とからだの間に置く --- */
.apps-card__shot {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--apps-ink);
}
.apps-card__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
	transition: transform 0.618s var(--apps-ease, cubic-bezier(0.2, 0.7, 0.3, 1));
}
.apps-card:has(.apps-card__shot) .apps-card__band {
	padding-left: var(--apps-card-pad-x);
}
/* 写真にアイコンが写っているので、縁に重ねるアイコンは出さない */
.apps-card:has(.apps-card__shot) .apps-card__icon {
	display: none;
}
@media (hover: hover) {
	.apps-card:hover .apps-card__shot img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.apps-card__shot img { transition: none; }
}