/* SSO-619 V2: アカウント登録 V2 フロー 共通スタイル
   - Step1〜5 すべての V2 HTML から読み込む共通シート
   - レイアウト shell / トークン / 汎用フォーム部品 / 共有 UI
   - 旧画面には一切影響を与えない (V2 HTML のみで参照) */

/* ===== Design tokens ===== */
:root {
	--primary: #0097bf;
	--primary-light: #33b1cd;
	--primary-pale: #e0f2f7;
	--accent: #eeca21;
	--alert: #ed5583;
	--text-primary: #003240;
	--text-secondary: #597a82;
	--text-tertiary: #7f939a;
	--bg: #f2f5f5;
	--white: #ffffff;
}

/* ===== Layout shell =====
   .page (body) は flex で 主カラム + 右パネル を横並びに。
   右パネルは Step1 のみ (.side-panel)。他の Step では存在せず、左カラムが全幅を占める。 */
.page {
	min-height: 100vh;
	min-width: 380px;
	display: flex;
	align-items: stretch;
	background-color: var(--white);
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	color: var(--text-secondary);
	margin: 0;
	/* macOS の Figma レンダリングに近づけるためフォントスムージングを antialiased に統一 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.page__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* ドット背景 (primary-pale)。SVG data URI で打つ (radial-gradient は AA でぼやけるため不採用)。
	   CSS 変数は data URI 内で展開できないため hex 直書き。 */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='23'><circle cx='1.5' cy='1.5' r='1.5' fill='%23e0f2f7'/></svg>");
	background-size: 23px 23px;
	background-position: 20px 20px;
}

.page__main {
	flex: 1;
	display: flex;
	justify-content: center;
	padding: 0 24px 60px;
}

/* ===== Site header / footer ===== */
.site-header {
	padding: 40px;
}

.site-header__logo img {
	height: 30.6px;
	width: auto;
	display: block;
}

.site-footer {
	border-top: 3px solid var(--bg);
	padding: 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.14px;
	color: var(--text-tertiary);
}

.site-footer__icon {
	width: 24px;
	height: 25px;
	display: inline-block;
}

.site-footer__icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* ===== Form area (見出し + form + 補足を縦に並べる共通枠) ===== */
.form-area {
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ===== Form base ===== */
.form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.form__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.form__label {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.16px;
	line-height: 1;
	color: var(--text-secondary);
	margin: 0;
}

/* ラベル + 補助タグ (必須 / 任意 等) を横並びにするレイアウト共通枠。
   Step3 (form__required-tag) と Step4 (tag--optional) の両方で使用。 */
.form__label-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.form__input {
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	padding: 0 20px;
	background: var(--bg);
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	font-family: inherit;
	color: var(--text-primary);
	letter-spacing: 0.16px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.form__input::placeholder {
	color: var(--text-tertiary);
}

.form__input:focus {
	border-color: var(--primary);
}

.form__input.is-invalid {
	border-color: var(--alert);
	background: #fff5f6;
}

/* ===== Form submit (base) ===== */
.form__submit {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 22px 10px;
	background: var(--primary);
	color: var(--white);
	border: none;
	border-radius: 9999px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.16px;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
	/* drop-shadow は box-shadow より alpha 感応で柔らかく見える */
	filter: drop-shadow(0 5px 5px rgba(0, 151, 191, 0.2));
	transition: background-color 0.2s ease, transform 0.05s ease;
}

.form__submit:not(:disabled):hover {
	background: #007fa3;
}

.form__submit:not(:disabled):active {
	transform: translateY(1px);
}

/* disabled (= 入力未完了等で押させない) は彩度のないグレーで「無効」状態を視覚化。
   primary 青のまま opacity を落とすやり方だと「押せそう」に見えて誤クリックを誘発するため、
   背景色そのものを text-tertiary に置き換える + drop-shadow も外す。 */
.form__submit:disabled {
	background: var(--text-tertiary);
	color: var(--white);
	cursor: not-allowed;
	filter: none;
}

/* 送信中状態。pointer-events:none で再クリック抑止しつつ name="..." 値送信を阻害しないため
   disabled は使わない。ページ遷移と同時に DOM ごと消えるため解除処理は不要。 */
.form__submit.is-submitting {
	background: #66c1d8;
	pointer-events: none;
	cursor: wait;
}

.form__submit-text {
	display: inline-block;
	vertical-align: middle;
}

.form__submit.is-submitting .form__submit-text,
.form__submit.is-submitting .form__submit-note,
.form__submit.is-submitting .form__submit-icon {
	visibility: hidden;
}

.form__submit.is-submitting::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	margin-left: -10px;
	border: 3px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--white);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* form 全体が送信中の時、押されていない側の submit を無効化 (相互排他)。 */
.form.is-submitting button[type="submit"]:not(.is-submitting) {
	pointer-events: none;
	opacity: 0.45;
	cursor: not-allowed;
}

/* ===== Form submit (アイコン付き、Step4 / Step5 共用) =====
   テキスト + 矢印アイコンを横並びで持つ CTA。 */
.form__submit--with-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: auto;
	max-width: 330px;
	padding: 22px 32px;
	margin: 0 auto;
}

.form__submit-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* ===== Form submit (accent yellow、Step4「無料体験を始める」/ Step5 ログイン誘導 共用) ===== */
.form__submit--accent {
	background: var(--accent);
	color: var(--text-primary);
	filter: drop-shadow(0 5px 5px rgba(238, 202, 33, 0.3));
}

.form__submit--accent:not(:disabled):hover {
	background: #d8b51d;
}

/* is-submitting 時、ベース .form__submit.is-submitting の水色を打ち消して --accent の
   イエローを維持。spinner の白縁は accent 黄に対して十分にコントラストが取れる。 */
.form__submit--accent.is-submitting {
	background: var(--accent);
}

/* ===== Form helper texts ===== */
.form__hint {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14px;
	line-height: 1.5;
	color: var(--text-secondary);
}

.form__note {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12px;
	line-height: 1.6;
	color: var(--text-secondary);
	text-align: center;
	margin: 0;
}

.form__error {
	font-size: 13px;
	color: var(--alert);
	line-height: 1.6;
	margin: 0;
}

.form__errors {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.form__errors-item {
	font-size: 13px;
	color: var(--alert);
	line-height: 1.6;
	margin: 0;
}

/* ===== フッター注意書きブロック (Step3 / Step4 共用) =====
   appeal-list 等の下に小さい灰文字で並べる規約・キャンセル等の注意書き。 */
.note-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

.note-block__caution {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12px;
	line-height: 1.8;
	color: var(--text-tertiary);
	text-align: left;
}

/* ===== Page title (Step2〜5 共用) ===== */
.page-title {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 0.25px;
	line-height: 1.8;
	color: var(--text-secondary);
	text-align: center;
}

/* ===== Message banner (Step3, 4, 5 共用) =====
   primary-pale 背景 + アイコン中央寄せ。 */
.message {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px;
	background: var(--primary-pale);
	border-radius: 8px;
}

.message__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-block;
}

.message__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.message__text {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.14px;
	line-height: 1.6;
	color: var(--text-secondary);
}

/* ===== Appeal list (Step1, 3, 4, 5 共用、check icon 付きの bullet) ===== */
.appeal-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.appeal-list__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.16px;
	line-height: 1.6;
	color: var(--text-secondary);
}

.appeal-list__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 5px;
}

.appeal-list__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ===== Step indicator (Step3, 4, 5 共用、3 円形ステップ表示) ===== */
.step-indicator {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 円の縦中心 (= 25px) を通る水平線。接続線は inactive 円枠と同じ primary-light。 */
.step-indicator::before {
	content: "";
	position: absolute;
	top: 25px;
	left: calc(100% / 6);
	right: calc(100% / 6);
	height: 2px;
	background: var(--primary-light);
	z-index: 0;
}

.step-indicator__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	position: relative;
	z-index: 1;
}

/* 数字はデザイン指定の Roboto Medium 20px (未ロード時は Noto Sans JP にフォールバック) */
.step-indicator__circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--white);
	border: 3px solid var(--primary-light);
	color: var(--primary-light);
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.2px;
	line-height: 1.8;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-indicator__item--active .step-indicator__circle {
	background: var(--primary-light);
	border-color: var(--primary-light);
	color: var(--white);
	box-shadow: 0 0 0 5px rgba(51, 177, 205, 0.3);
}

/* ラベルは active/inactive とも text-secondary。 */
.step-indicator__label {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.96px;
	line-height: 1;
	color: var(--text-secondary);
	text-align: center;
}

/* ===== Mobile (≤ 767px) 共通 ===== */
@media (max-width: 767px) {
	.site-header {
		padding: 20px;
	}
	.page__main {
		padding: 8px 15px 30px;
	}
	.form-area {
		gap: 32px;
	}
	.form__input {
		height: 64px;
		font-size: 16px;
	}
	.appeal-list__item {
		font-size: 14px;
	}
	.page-title {
		font-size: 20px;
	}
	.step-indicator__circle {
		width: 40px;
		height: 40px;
		font-size: 18px;
		border-width: 2px;
	}
	.step-indicator::before {
		top: 20px;
	}
	.step-indicator__label {
		font-size: 14px;
		letter-spacing: 0.14px;
	}
	/* SP では文字が複数行に折り返すケースで、アイコンが行中央に来ると違和感が出る。
	   上揃えにしてアイコンを 1 行目の高さに固定。 */
	.message {
		padding: 14px;
		align-items: flex-start;
	}
	/* SP ではメッセージ本文は 14px (PC は 16px) */
	.message__text {
		font-size: 14px;
	}
	/* フッターは SP では細く・コンパクトに */
	.site-footer {
		border-top-width: 2px;
		padding: 14px 0;
		font-size: 12px;
	}
}