/* =========================================================
   Flow（ご予約の流れ）
   Figma node 113:29550。筆記体見出し＋サブ＋装飾線画／ステップ01-03（二重リング番号＋見出し＋説明）／グラデCTA。
   ※ 細部余白は後でまとめて調整。まず構造優先。モバイルは後回し。
   ========================================================= */

.flow {
	position: relative;
	width: 100%;
	background: var(--bg-cream); /* #eeede7 */
	padding: 70px 0 64px;
	overflow: hidden;
}

.flow__inner {
	/* 幅は共通クラス .l-min（640px）。位置/重ね順のみ保持 */
	position: relative;
	z-index: 1; /* 装飾線画より前面 */
}

/* --- 装飾線画（背面・装飾のみ） --- */
.flow__deco-carnation {
	position: absolute;
	left: calc(50% - 308px);
	top: 44px;
	width: 212px;
	height: 109px;
	pointer-events: none;
	z-index: 0;
}
.flow__deco-branch {
	position: absolute;
	right: 300px;
	bottom: 0;
	width: 133px;
	height: 120px;
	pointer-events: none;
	z-index: 0;
}

/* --- 見出し --- */
.flow__header {
	text-align: center;
	margin-bottom: 44px;
}
.flow__title {
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	color: var(--color-script-ink); /* #231f20 */
}
.flow__sub {
	margin: 8px 0 0;
	font-family: var(--font-gothic);
	font-weight: 600;
	font-size: 16px;
	line-height: 30px;
	color: var(--color-subhead); /* #a3937c */
}

/* =========================================================
   ステップ（01/02/03 横並び・繰り返し）
   ========================================================= */
.flow__steps {
	display: flex;
	justify-content: center;
	gap: 65px; /* Figma：サークル235px間隔 − 170px = 65px */
	margin: 0;
	padding: 0;
	list-style: none;
}
.flow-step {
	width: 170px;
	text-align: center;
}

/* 二重リングの番号サークル
   外側リング＝この要素の border、内側リング＝::before（一回り小さく、10px下にオフセット）。 */
.flow-step__circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	/* 外側リング。※リング色はFigmaで画像化されており正確値が取れず暫定。要確認 */
	border: 1px solid var(--color-border-olive); /* #c5ba8b */
}
.flow-step__circle::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 10px; /* 内側リングを下方向に10pxオフセット（Figma実測） */
	width: 150px;
	height: 150px;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 1px solid var(--color-border-olive); /* 内側リング */
}
.flow-step__num {
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 45px;
	letter-spacing: 0.9px;
	line-height: 1;
	color: var(--color-subhead); /* #a3937c */
}

/* 各ステップの見出し・説明 */
.flow-step__title {
	margin: 22px 0 0;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 0.48px;
	line-height: 30px;
	color: var(--color-text);
}
.flow-step__text {
	margin: 10px 0 0;
	font-family: var(--font-gothic);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.28px;
	line-height: 1.7;
	color: var(--color-text);
}
/* テキストの行：PC/タブレットは block で2行（旧 <br> 相当の改行を維持）。
   スマホは ≤599 の @media で inline にして改行なし（span方式＝br非依存でiOSでも確実）。 */
.flow-step__line { display: block; }

/* --- グラデCTAボタン（Flow専用：文言がCTA帯と異なる。トークンはヘッダーCTAと統一） --- */
.flow__cta {
	margin-top: 48px;
	text-align: center;
}
.flow__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: 100%;
	height: 70px;
	font-family: var(--font-gothic);
	font-weight: 600; /* W6相当 */
	font-size: 20px;
	letter-spacing: 0.4px;
	color: var(--bg-white);
	text-decoration: none;
	background: var(--cta-gradient);
	border-radius: var(--cta-radius);
	transition: opacity 0.2s ease;
}
.flow__button:hover {
	opacity: 0.9;
}

/* =========================================================
   スマホ（≤599px）：セクション余白・筆記体タイトル・サブ詰め。タブレット/PC不変。
   ========================================================= */
@media (max-width: 599px) {
	.flow { padding: 60px 0; }
	.flow__title { font-size: 60px; }
	.flow__sub { margin-top: 0; }

	/* 1: ステップを縦1列に積む */
	.flow__steps {
		flex-direction: column;
		gap: 28px;
		align-items: stretch;
	}
	/* 2: 各ステップ＝左サークル｜右body（タイトル＋テキスト縦積み）。縦中央揃え・左寄せ */
	.flow-step {
		position: relative;       /* ステップ間矢印(::after)の基準 */
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20px;
		text-align: left;
	}
	/* 右側：タイトル＋テキストを縦積み。残り幅を使い1文字折返しを解消（min-width:0） */
	.flow-step__body {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}
	/* ステップ間の下向き矢印（サークル中心の真下・ギャップ中央）。最後のステップには出さない＝個数非依存 */
	.flow-step:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 50px;                /* サークル幅100の中心 */
		bottom: -19px;             /* steps gap 28px の中央あたり */
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 10px solid var(--color-border-olive); /* 下向き三角・リングと同系の控えめ色 */
	}
	/* 3: サークルを100pxに縮小・左固定（縮まない） */
	.flow-step__circle {
		flex: 0 0 auto;
		width: 100px;
		height: 100px;
	}
	/* 内側リングを比率追従（外:内=170:150 → 100:88、オフセット10→6） */
	.flow-step__circle::before {
		width: 88px;
		height: 88px;
		top: 6px;
	}
	/* 4,5: 番号・タイトルのサイズ */
	.flow-step__num { font-size: 28px; }
	.flow-step__title { margin-top: 0; font-size: 18px; }
	/* テキストの強制改行を無効化（1行で流す・はみ出しは自然折返しのみ） */
	.flow-step__line { display: inline; }

	/* 6: 2カラム前提の装飾は縦1列では破綻＆被るため非表示 */
	.flow__deco-carnation,
	.flow__deco-branch { display: none; }
}