/* =====================================================================
   ページ: ご利用の流れ・よくあるご質問（Flow / FAQ）  Figma 76:24147
   MV=components/mv.css(.c-mv) / 見出し=c-heading /
   CTA=components/cta-visit(.c-cta-visit) を共通利用。
   本ファイルは MVの左右イラスト・ステップ・受給者証カード・FAQアコーディオン・
   波形ディバイダーの差分を担当。色/余白/フォントは tokens の var() を参照する。
   ===================================================================== */

/* セクション間の既定マージン（base.css の section{margin-block}）を打ち消し、
   波形ディバイダーが各セクションへ隙間なく接続するようにする。 */
.flow > section { margin-block: 0; }

/* --- セクション内 z-index 基準（紙テクスチャ廃止）---------------------- */
.flow-steps,
.flow-faq,
.flow-steps__card,
.flow-faq__q,
.flow-jukyusho__heading { position: relative; }

/* テクスチャ層の上にコンテンツを載せる */
.flow-steps__inner,
.flow-faq__inner,
.flow-steps__card > *,
.flow-faq__q > *,
.flow-jukyusho__heading > * { position: relative; z-index: 1; }
/* カードの角丸からテクスチャがはみ出さないように */
.flow-steps__card,
.flow-faq__q,
.flow-jukyusho__heading { overflow: hidden; }


/* =====================================================================
   [1] MV：左右の子どもイラスト（オーバーレイは c-mv 既定の緑系ティント）
   ===================================================================== */
.flow-mv__fig { position: absolute; bottom: 0; height: auto; z-index: 3; pointer-events: none; }
.flow-mv__fig--left  { left: 8.3%;  width: min(18.3%, 264px); bottom: 6%; }
.flow-mv__fig--right { right: 11.6%; width: clamp(56px, 6.7%, 96px); bottom: 5%; }


/* =====================================================================
   [2] ご利用の流れ（4ステップ）  Figma 76:24205
   ===================================================================== */
.flow-steps {
	/* 背景：オフホワイトのテクスチャ（Figma 76:24205）。multiply は使わず直接フィル。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40) var(--space-80);
	overflow: hidden; /* 装飾イラストのはみ出し抑制 */
}
.flow-steps__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}
.flow-steps .c-heading { margin: 0; }

.flow-steps__list {
	width: 100%;
	max-width: 45rem; /* 720px */
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}
.flow-steps__item { margin: 0; }

/* ステップ間の下向き矢印コネクタ（Figma 76:24218 Vector255・手描きクレヨン質感）。
   viewBox 57.639×21.9419 のSVGアセットをそのまま使用（aspect保持）。
   Figma: Body(76:24209) gap-24 ＝ 矢印の上下とも 24px。上は margin-top、
   下はリストの gap(24px) が担うので上下対称になる。 */
.flow-steps__item:not(:last-child)::after {
	content: "";
	display: block;
	width: 58px;
	height: 22px;
	margin: var(--space-24) auto 0;
	background: url("../../images/flow/step-arrow.svg") center / contain no-repeat;
}

.flow-steps__card {
	display: flex;
	gap: var(--space-16);
	align-items: flex-start;
	padding: var(--space-24) var(--space-32);
	/* Figma 76:24210: 背景色_イエロー（紙テクスチャを 346.8×327.8px タイルで直接フィル）。
	   multiply は使わず直接フィル。角丸は親の overflow:hidden でクリップ。 */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	border-radius: var(--radius-lg);
}
.flow-steps__no {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-40);
	height: var(--space-40);
	border-radius: var(--radius-pill);
	background: var(--color-brown-text);
	color: var(--color-white);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
}
.flow-steps__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}
.flow-steps__title {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
}
.flow-steps__no-sr {
	/* 番号はバッジで視覚表現済み。見出しの読み上げ補助のみ（視覚的に隠す） */
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.flow-steps__text {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

/* ステップ01の申込みボタンは共通コンポーネント .c-line-cta（components/buttons.css）。
   採用フロー（saiyo-flow__btn--line）と同一の白カードLINE導線に統一。 */

/* 装飾イラスト（色鉛筆を持つ子ども）。Figma 76:24205：ステップリスト(45rem)の
   右端のすぐ外・最終カードの脇に立たせる（フレーム下端から約177px）。
   リスト右端 = 50% + 22.5rem。狭い画面では右端から はみ出さないよう上限を設ける。 */
.flow-steps__deco {
	position: absolute;
	left: min(calc(50% + 22.5rem), calc(100% - 96px - var(--space-16)));
	bottom: 177px;
	width: clamp(64px, 7vw, 96px);
	height: auto;
	z-index: 2;
	pointer-events: none;
}


@media (max-width: 768px) {
	.flow-steps__list {
		gap: var(--space-12);
	}
	.flow-steps__body {
		gap: var(--space-4);
	}

	.flow-steps__card {
		gap: var(--space-8);
	}
	.flow-steps__no {
		font-size: var(--font-size-h5);
		height: 32px;
		width: 32px;
	}
	.flow-steps__title {
		font-size: var(--font-size-h4);
	}
	.flow-steps__item:not(:last-child)::after {
		width: 24px;
		height: 7px;
		margin-top: var(--space-12);
	}
	.flow-steps__line {
		margin-top: var(--space-12);
	}
}


/* =====================================================================
   [3][5] 波形ディバイダー  Figma 76:24264 / 76:24408
   ===================================================================== */
.flow-divider { line-height: 0; }
.flow-divider img { display: block; width: 100%; height: auto; }
.flow-divider--1 { background: var(--color-white); }       /* 下端＝受給者証(白)へ接続 */
/* 下端＝FAQ(ライトイエロー・テクスチャ)へ接続。波下の地もテクスチャを継ぐ。 */
.flow-divider--2 {
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
}


/* =====================================================================
   [4] 受給者証とは？  Figma 76:24266
   ===================================================================== */
.flow-jukyusho {
	background: var(--color-white);
	padding-block: var(--space-40);
}
.flow-jukyusho__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
}
.flow-jukyusho__card {
	border: 3px solid var(--color-brown-text);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	overflow: hidden;
}
.flow-jukyusho__heading {
	padding-block: var(--space-8);
	/* Figma 76:24268: 背景色_イエロー（紙テクスチャを 346.8×327.8px タイルで直接フィル）。
	   角丸は親カードの overflow:hidden でクリップ。 */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	text-align: center;
}
.flow-jukyusho__heading-title {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h2-lead);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-wide);
}
.flow-jukyusho__body {
	display: flex;
	gap: var(--space-40);
	align-items: flex-start;
	justify-content: center;
	padding: var(--space-40);
}
.flow-jukyusho__text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}
.flow-jukyusho__media {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	gap: var(--space-24);
	align-items: center;
	justify-content: center;
}
.flow-jukyusho__illust { width: clamp(80px, 40%, 237px); height: auto; }
.flow-jukyusho__doc    { width: clamp(132px, 40%, 186px); height: auto; }


/* =====================================================================
   [6] よくあるご質問（カテゴリ別アコーディオン）  Figma 76:24919
   ===================================================================== */
.flow-faq {
	/* 背景：ライトイエローのテクスチャ（Figma 76:25745「背景色_ライトイエロー」）。
	   multiply は使わず直接フィル。 */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40) var(--space-80);
}
.flow-faq__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-48);
}
.flow-faq .c-heading { margin: 0; }

.flow-faq__groups {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-64);
}
.flow-faq__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}
.flow-faq__category {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h2-lead);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-wide);
	text-align: center;
}
.flow-faq__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

/* アコーディオン項目（details/summary を基盤に最小限JSで開閉） */
.flow-faq__item { width: 100%; }

.flow-faq__q {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding: var(--space-16);
	/* Figma 76:24418: 背景色_イエロー（紙テクスチャを 346.8×327.8px タイルで直接フィル）。
	   角丸は .flow-faq__q の overflow:hidden でクリップ。 */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	list-style: none; /* 既定マーカー非表示 */
}
.flow-faq__q::-webkit-details-marker { display: none; }
.flow-faq__q:focus-visible {
	outline: 2px solid var(--color-brown-text);
	outline-offset: 2px;
}

/* Q / A バッジ（40pxの円） */
.flow-faq__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--space-40);
	height: var(--space-40);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-black);
	line-height: var(--line-height-body);
}
.flow-faq__badge--q { background: var(--color-white);       color: var(--color-logo-yellow); }
.flow-faq__badge--a { background: var(--color-logo-yellow); color: var(--color-white); }

.flow-faq__q-text {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body);
}

/* 開閉トグル（＋ → −） */
.flow-faq__toggle {
	flex: 0 0 auto;
	position: relative;
	width: var(--space-16);
	height: var(--space-16);
}
.flow-faq__toggle::before,
.flow-faq__toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--color-brown-text);
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.flow-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.flow-faq__item[open] .flow-faq__toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* 回答パネル */
.flow-faq__a {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	padding: var(--space-16);
	background: var(--color-white);
	border-radius: var(--radius-sm);
}
.flow-faq__a-body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: var(--space-8); /* バッジ(40px)に対する視覚的な行位置合わせ */
}
.flow-faq__a-text {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}
.flow-faq__a-links {
	margin: var(--space-16) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.flow-faq__a-link {
	align-self: flex-start;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	text-decoration: none;
	border-bottom: 1px solid var(--color-brown-text);
}
.flow-faq__a-link-strong { font-weight: var(--font-weight-bold); }
.flow-faq__a-link:hover,
.flow-faq__a-link:focus-visible { opacity: 0.7; }

/* JS有効時のみスライドアニメーション（flow-faq.js が高さを制御）。
   閉じている間は item.open=false でネイティブに非表示＝アクセシビリティを担保し、
   開閉時のみ JS が height をアニメーションさせる。JS無効時はネイティブの即時開閉。 */
.flow-faq__item[data-enhanced] .flow-faq__a-wrap {
	overflow: hidden;
	transition: height 0.28s ease;
}
@media (prefers-reduced-motion: reduce) {
	.flow-faq__item[data-enhanced] .flow-faq__a-wrap { transition: none; }
}


/* =====================================================================
   レスポンシブ（モバイルファースト：上記が小画面、ここで広い画面を調整）
   ===================================================================== */
@media (max-width: 768px) {
	.flow-steps__inner,
	.flow-faq__inner,
	.flow-jukyusho__inner { padding-inline: var(--space-16); gap: var(--space-24)}

	.flow-steps__card { padding: var(--space-16) var(--space-16) var(--space-24); }

	/* 本文は SP では 12.8px に。 */
	.flow-steps__text { font-size: var(--font-size-h6); }

	/* 申込みボタンは左端を番号バッジ（__no）の左に揃える＝__body から
	   __no幅(40)＋gap(16)=56px ぶん左へはみ出させ、右端まで全幅にする。
	   （カードは overflow:hidden だが __no の左＝カード padding 内なのでクリップされない）*/
	.flow-steps__line {
		margin-left: calc(-1 * (var(--space-16)));
		width: calc(100% - var(--space-8));
	}

	.flow-jukyusho__body { flex-direction: column; padding: var(--space-24); gap: var(--space-24); }
	.flow-jukyusho__text { flex: 0 0 auto; font-size: var(--font-size-h5); }
	.flow-jukyusho__media { flex: 0 0 auto; width: 100%; }
	.flow-jukyusho__heading-title { font-size: var(--font-size-h3); }

	/* FAQ：下端paddingをSPで詰める（PC 80px → 40px）。 */
	.flow-faq { padding-bottom: var(--space-40); }

	/* FAQ：カテゴリグループ間の縦間隔をSPで詰める（PC 64px → 24px）。 */
	.flow-faq__groups { gap: var(--space-24); }

	/* FAQ：カテゴリ見出し・設問・回答の文字サイズをSPで縮小（14.22px）。 */
	.flow-faq__category { font-size: var(--font-size-h5); }
	.flow-faq__q-text { font-size: var(--font-size-h5); }
	.flow-faq__a-text { font-size: var(--font-size-h5); }

	.flow-steps__deco { left: auto; right: var(--space-16); bottom: var(--space-24); }

	/* SP では左右の子どもイラストは非表示 */
	.flow-mv__fig { display: none; }
}

/* MVタイトルが長いため、狭い画面では一段縮めて不自然な折返しを防ぐ */
@media (max-width: 480px) {
	.flow-mv .c-mv__title { font-size: var(--font-size-h3-lg); }
}

/* 外部からのアンカーリンク（#flow / #faq）のスクロール先が固定ヘッダーに隠れないよう余白を確保。 */
.flow-steps,
.flow-faq { scroll-margin-top: var(--space-96); }