/* =====================================================================
 * flow.css — 工事の流れ（2w）とお客様の声（2x）
 * ---------------------------------------------------------------------
 * どちらのデザインも Figma に無い（Figma にあるのは交換サービス 1枚だけ）。
 * 交換ページで確定した部品と数値だけを使って組んでいる。
 * 語彙は ~/journal/projects/sakabo/notes/2026-09-10_デザイン横展開の進め方.md §2 のカタログどおり。
 *
 * 1つのファイルにまとめてあるのは、末尾の導線を包む白い箱（.fl-links）を
 * 両ページで使うため。どちらも小さいページで、面（青・水色・白い箱）と
 * ボタンはすべて共通部品で足りている。
 *
 * 【面の配分】
 *   2w  FV 青い箱 ／ 4ステップ **全幅の青（水玉）** ← 主役 ／ 導線 白い箱
 *   2x  FV 青い箱 ／ 声のカード **全幅の水色** ← 主役 ／ 導線 白い箱
 * ===================================================================== */

/* 写真を敷かないので、交換ページの箱から写真用のグラデーションを外す。 */
.hero--flow .hero__box::after,
.hero--voice .hero__box::after { content: none; }
.hero--flow .hero__catch-label--strong,
.hero--voice .hero__catch-label--strong { font-size: 24px; padding-block: 4px; }

/* =====================================================================
 * 工事の流れ（2w）
 * ===================================================================== */

/* 4ステップ（2026-10-14 jojiさんが3案から B案を選んだ）。
 * 交換ページ「交換工事の流れ」・補助金「申請の流れ」と同じ並び方にそろえる。
 *   〜1023  縦1列。カードの間に下向きの白い三角
 *   1024〜  横一列。カードの間に右向きの白い三角
 * カードの中はどの幅でも、絵を上に置いた縦積みで中央寄せ（〜1023 も「絵｜左寄せの文字」から変えた。2026-10-14 jojiさんの指示）。
 * 600〜1023 で4列にすると1枚が120〜200px になり、本文が1行6〜10字で折れるので縦のままにする。 */
.fl-steps { display: flex; flex-direction: column; gap: 26px; margin: 0; list-style: none; padding: 0; }
.fl-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 20px 18px;
	text-align: center;
	border-radius: 20px;
	background: #fff;
}
/* カードの間の三角（白）。〜1023 は下向き。 */
.fl-step + .fl-step::before {
	content: "";
	position: absolute;
	top: -19px;
	left: 50%;
	transform: translateX(-50%);
	border: 11px solid transparent;
	border-top: 13px solid #fff;
	border-bottom: 0;
}
/* 絵は交換ページの書き出し画像（青い円ごと）。左右に Figma の帯の端が写っているので円で切り抜く。 */
.fl-step__ico { width: 64px; height: 64px; border-radius: 50%; clip-path: circle(50%); }
.fl-step__body { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.fl-step__no {
	font-family: var(--font-num);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: var(--fig-blue-40);
}
.fl-step__title {
	font-size: 17px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	word-break: auto-phrase;
}
/* 「保証書発行・／アフターフォロー」の改行は横一列のときだけ。 */
.fl-step__title br { display: none; }
/* 所要時間は「いつ終わるか」の答えなので、塗りのピルで見出しの下に出す。 */
.fl-step__time {
	padding: 2px 12px;
	border-radius: 999px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 13px;
	font-weight: var(--fw-bold);
	line-height: 1.7;
	white-space: nowrap;
}
.fl-step__text {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	word-break: auto-phrase;
	text-wrap: balance;
}
/* リンクは本文との間に点線を引き、下線のない文字＋矢印を中央に置く（3案から C案。2026-10-14）。
 * カードの下端にそろえる（横一列のとき、リンクの有無で位置がばらつかないように）。 */
.fl-step__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: stretch;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--fig-gray-30);
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	word-break: auto-phrase;
}
.fl-step__link::after {
	content: "";
	flex: none;
	width: 13px;
	height: 15px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("../img/icon-arrow-fa.svg");
	mask: no-repeat center / contain url("../img/icon-arrow-fa.svg");
}

/* 末尾の導線を包む白い箱（.fl-links）は、会社概要（2z）でも使うため
 * components.css へ移した（2026-09-09。クラス名はそのまま）。 */

/* =====================================================================
 * お客様の声（2x）
 * ===================================================================== */

/* 声のカード。水色の面の上に白いカードを並べる。 */
.vo-list { display: grid; gap: 16px; margin: 0; list-style: none; padding: 0; }
.vo-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40); /* 水色の地に縁なしの白は地と同化する（2026-10-18 jojiさん指示。.panel と同じ枠線） */
}
/* 声・地域・事例へのリンクのまとまり。横長のカードでは写真の高さに対して上下の中央に置く。 */
.vo-card__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* お客様の写真。実在の証明なので、切り取らずに全体を見せる。 */
.vo-card__photo { margin: 0; }
.vo-card__photo img {
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: contain;
	border-radius: 12px;
	background: var(--fig-blue-20);
}
/* 声は原文のまま。引用であることが分かるよう、左に青い線を引く。 */
.vo-card__text {
	margin: 0;
	padding-left: 14px;
	border-left: 4px solid var(--fig-blue-30);
	font-size: 16px;
	line-height: 1.9;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.vo-card__meta {
	font-size: 14px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.vo-card__link {
	margin-top: auto;
	align-self: flex-start;
	font-size: 15px;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =====================================================================
 * 600 以上（比例縮小）
 * ===================================================================== */
@media (min-width: 600px) {
	.hero--flow .hero__catch-label--strong,
	.hero--voice .hero__catch-label--strong { font-size: max(calc(30 * var(--ff)), calc(44 * var(--u))); }

	/* --- 4ステップ（〜1023 は縦1列のまま、文字と絵だけ大きくする） ---
	 * 幅いっぱいだとカードが最大975px になり、右半分が空く（2026-10-14 jojiさんの指摘）。
	 * 中央寄せの縦積みにしてからは 640 でも大きすぎた（2026-10-14 jojiさんの指摘）。
	 * 本文（最長30字）が2行に収まる 480 で止め、絵と文字もスマホに近い大きさに抑える。 */
	.fl-steps { width: 100%; max-width: 480px; margin-inline: auto; }
	.fl-step { padding: 22px 28px 20px; }
	.fl-step__ico { width: 64px; height: 64px; }
	.fl-step__no { font-size: 24px; }
	.fl-step__title { font-size: 18px; }
	.fl-step__time { font-size: 14px; }
	.fl-step__text { font-size: 15px; }
	.fl-step__link { font-size: 15px; }

	/* --- 声：横長のカードを1列に縦に並べる（2026-10-30 jojiさんの指示）。写真は左、文は右 --- */
	.vo-list { gap: calc(20 * var(--u)); }
	.vo-card { flex-direction: row; align-items: center; padding: calc(32 * var(--u)); gap: calc(32 * var(--u)); }
	.vo-card__photo { flex: 0 0 40%; }
	.vo-card__body { flex: 1; gap: calc(16 * var(--u)); }
	/* 写真は左の列の幅いっぱいに出す。高さで抑えると左右に地の色の余白が出る。 */
	.vo-card__photo img { max-height: none; }
	.vo-card__text { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding-left: calc(18 * var(--u)); }
	.vo-card__meta { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.vo-card__link { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }
}

/* =====================================================================
 * 1024 以上：4ステップを横一列
 * ===================================================================== */
@media (min-width: 1024px) {
	.fl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(44 * var(--u)); max-width: none; }
	.fl-step { gap: calc(14 * var(--u)); padding: calc(32 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)); }
	/* 右向きの三角を、カードの間のすき間の真ん中に置く。 */
	.fl-step + .fl-step::before {
		top: 50%;
		left: calc(-22 * var(--u));
		transform: translate(-50%, -50%);
		border: calc(14 * var(--u)) solid transparent;
		border-left: calc(16 * var(--u)) solid #fff;
		border-right: 0;
	}
	.fl-step__ico { width: calc(110 * var(--u)); height: calc(110 * var(--u)); }
	.fl-step__body { flex: 1; gap: calc(10 * var(--u)); }
	.fl-step__no { font-size: max(calc(22 * var(--ff)), calc(34 * var(--u))); }
	/* 見出しは2行ぶんの高さを取り、1行の見出しでもピルの位置を4枚でそろえる。 */
	.fl-step__title { display: grid; place-items: center; min-height: 3em; font-size: max(calc(15 * var(--ff)), calc(21 * var(--u))); }
	.fl-step__title br { display: inline; }
	.fl-step__time { font-size: max(calc(13 * var(--ff)), calc(16 * var(--u))); padding: calc(4 * var(--u)) calc(16 * var(--u)); }
	/* リンクの無いカード（1・3枚目）は、高さをそろえたぶんの空きを本文の上下に分ける（3案から B案。2026-10-14）。 */
	.fl-step__text { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.fl-step__body > .fl-step__text:last-child { margin-block: auto; }
	.fl-step__link { padding-top: calc(14 * var(--u)); font-size: max(calc(13 * var(--ff)), calc(15 * var(--u))); }
}