/**
 * PN Mitsukuru ヒアリングウィザード スタイル
 *
 * mitsukuru-design（SKILL.md）に準拠。色・余白はすべて CSS 変数。
 * インライン style は使わない。モバイルファースト。タップ領域は 44px 以上。
 *
 * 変数はテーマ（swell_child）と衝突しないよう .pnm-hearing にスコープする。
 *
 * @package PN_Mitsukuru
 */

.pnm-hearing {
	/* --- カラートークン（mitsukuru-design より） --- */
	--pnm-primary: #7CB342;
	--pnm-primary-dark: #689A38;
	--pnm-primary-light: #EFF6E4;
	--pnm-text: #2B2B2B;
	--pnm-text-muted: #6B7280;
	--pnm-bg: #FFFFFF;
	--pnm-bg-subtle: #F7F8F5;
	--pnm-border: #E5E7EB;

	/* --- 選択肢（hearing.html のトンマナ由来） --- */
	--pnm-opt-bg: #FAFBF7;
	--pnm-opt-border: #EAEFE0;
	--pnm-opt-hover: #BFD89B;
	--pnm-badge-req: #E2724E;

	/* --- 余白（8px グリッド）・角丸 --- */
	--pnm-radius: 8px;
	--pnm-radius-lg: 14px;
	--pnm-tap: 44px;
	--pnm-container: 720px;

	--pnm-font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	box-sizing: border-box;
	max-width: var(--pnm-container);
	margin: 0 auto;
	padding: 24px 16px 40px;
	font-family: var(--pnm-font);
	color: var(--pnm-text);
	line-height: 1.8;
	background: var(--pnm-bg);
}

.pnm-hearing *,
.pnm-hearing *::before,
.pnm-hearing *::after {
	box-sizing: border-box;
}

.pnm-hidden {
	display: none !important;
}

/* --- 進捗バー --- */
.pnm-progress {
	margin-bottom: 24px;
}

.pnm-progress__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
}

.pnm-progress__step {
	font-size: 13px;
	font-weight: 700;
	color: var(--pnm-primary-dark);
	letter-spacing: 0.02em;
}

.pnm-progress__remain {
	font-size: 12px;
	color: var(--pnm-text-muted);
}

.pnm-progress__bar {
	height: 8px;
	border-radius: 9999px;
	background: var(--pnm-primary-light);
	overflow: hidden;
}

.pnm-progress__fill {
	height: 100%;
	border-radius: 9999px;
	background: var(--pnm-primary);
	transition: width 0.3s ease;
}

/* --- ステップ見出し --- */
.pnm-step__encourage {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pnm-primary);
}

.pnm-step__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pnm-text);
}

.pnm-step__subtitle {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--pnm-text-muted);
}

/* --- フィールド --- */
.pnm-fields {
	margin-top: 24px;
}

.pnm-field {
	margin-bottom: 28px;
}

.pnm-field__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--pnm-text);
	margin-bottom: 10px;
	line-height: 1.5;
}

.pnm-field__label-text {
	vertical-align: middle;
}

.pnm-help {
	margin: -4px 0 10px;
	font-size: 13px;
	color: var(--pnm-text-muted);
}

/* --- バッジ --- */
.pnm-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
}

.pnm-badge--req {
	color: #FFFFFF;
	background: var(--pnm-badge-req);
}

.pnm-badge--opt {
	color: #9CA3AF;
	font-weight: 600;
	background: transparent;
}

/* --- 選択肢グリッド（モバイル1列 → 480px以上で2列） --- */
.pnm-optgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.pnm-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--pnm-tap);
	padding: 12px 14px;
	font-size: 14.5px;
	color: #374151;
	background: var(--pnm-opt-bg);
	border: 1.5px solid var(--pnm-opt-border);
	border-radius: var(--pnm-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.pnm-opt:hover {
	border-color: var(--pnm-opt-hover);
	background: #F4F8EC;
}

.pnm-opt__input {
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--pnm-primary);
}

.pnm-opt:has(.pnm-opt__input:checked) {
	border-color: var(--pnm-primary);
	background: var(--pnm-primary-light);
	color: var(--pnm-text);
	font-weight: 600;
}

.pnm-opt__input:focus-visible {
	outline: 2px solid var(--pnm-primary);
	outline-offset: 2px;
}

/* --- テキスト入力 --- */
.pnm-input,
.pnm-textarea {
	display: block;
	width: 100%;
	min-height: var(--pnm-tap);
	padding: 12px 14px;
	font-family: inherit;
	/* W-17：iOS Safari の自動ズーム対策で 16px を下限にする（.pnm-select / .pnm-urlrepeat__input も継承）。 */
	font-size: 16px;
	color: var(--pnm-text);
	background: var(--pnm-bg);
	border: 1.5px solid var(--pnm-border);
	border-radius: var(--pnm-radius);
	line-height: 1.6;
}

.pnm-textarea {
	resize: vertical;
}

.pnm-input:focus,
.pnm-textarea:focus {
	outline: none;
	border-color: var(--pnm-primary);
	box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.15);
}

.pnm-input::placeholder,
.pnm-textarea::placeholder {
	color: #A9B0BB;
}

/* --- select（例：所在地の都道府県） --- */
/* .pnm-input を基底にネイティブ装飾だけ消し、カスタム矢印を重ねる。
   角丸8px・44px タップ領域・グリーンのフォーカスは .pnm-input から継承する。 */
.pnm-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/* 未選択（プレースホルダ表示中）は淡色にして「未入力」であることを視覚的に伝える。 */
.pnm-select--placeholder {
	color: #A9B0BB;
}

/* --- 「その他」フリー記述欄（free_text 選択肢の直下） --- */
/* 既定は非表示。直前の選択肢がチェックされているときだけ表示する。 */
.pnm-opt__freetext {
	display: none;
	margin-top: -2px;
	/* W-17：iOS 自動ズーム対策（16px 下限）。 */
	font-size: 16px;
}

.pnm-opt:has(.pnm-opt__input:checked) + .pnm-opt__freetext {
	display: block;
}

/* --- prefix 付き入力（例：紹介コード SP-＋3桁） --- */
.pnm-input-prefixed {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.pnm-input-prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	min-height: var(--pnm-tap);
	font-size: 15px;
	font-weight: 600;
	color: var(--pnm-text);
	background: var(--pnm-bg-soft, #EFF6E4);
	border: 1.5px solid var(--pnm-border);
	border-radius: var(--pnm-radius);
	white-space: nowrap;
	user-select: none;
}

/* 幅指定のない入力（例：https://＋ドメイン）は残り幅いっぱいに広げる。
   narrow 指定の欄（SP-＋3桁など）は自分の固定幅を維持する。 */
.pnm-input-prefixed .pnm-input:not(.pnm-input--narrow) {
	flex: 1 1 auto;
	min-width: 0;
}

/* 桁数の少ない入力欄は幅を狭める（3桁など） */
.pnm-input--narrow {
	width: 6em;
	min-width: 0;
	flex: 0 0 auto;
	text-align: center;
	letter-spacing: 0.15em;
}

/* --- 同意 --- */
.pnm-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: var(--pnm-tap);
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	background: var(--pnm-bg-subtle);
	border: 1.5px solid var(--pnm-border);
	border-radius: var(--pnm-radius);
	cursor: pointer;
}

.pnm-consent__input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--pnm-primary);
}

.pnm-consent__link {
	color: var(--pnm-primary-dark);
	text-decoration: underline;
}

/* --- optional_group（もっと詳しく伝える） --- */
.pnm-optgroup {
	margin-bottom: 28px;
	border: 1.5px dashed var(--pnm-opt-border);
	border-radius: var(--pnm-radius);
	background: var(--pnm-bg-subtle);
}

.pnm-optgroup__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: var(--pnm-tap);
	padding: 12px 16px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--pnm-primary-dark);
	text-align: left;
	background: transparent;
	border: none;
	border-radius: var(--pnm-radius);
	cursor: pointer;
}

.pnm-optgroup__toggle:hover {
	background: var(--pnm-primary-light);
}

.pnm-optgroup__label {
	flex: none;
}

.pnm-optgroup__hint {
	flex: 1;
	font-size: 12px;
	font-weight: 400;
	color: var(--pnm-text-muted);
}

.pnm-optgroup__icon {
	flex: none;
	font-size: 18px;
	line-height: 1;
	color: var(--pnm-primary);
}

.pnm-optgroup__body {
	padding: 4px 16px 8px;
}

.pnm-optgroup__body .pnm-field:last-child,
.pnm-optgroup__body .pnm-optgroup:last-child {
	margin-bottom: 8px;
}

/* --- ai_confirm（モック） --- */
.pnm-aiconfirm__card {
	padding: 16px;
	margin-bottom: 16px;
	background: var(--pnm-primary-light);
	border: 1px solid var(--pnm-opt-hover);
	border-radius: var(--pnm-radius-lg);
}

.pnm-aiconfirm__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--pnm-primary-dark);
	margin-bottom: 6px;
}

.pnm-aiconfirm__prompt {
	margin: 0 0 12px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pnm-text);
}

.pnm-aiconfirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pnm-aiconfirm__fallback {
	margin-top: 4px;
}

/* --- ナビゲーション --- */
.pnm-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--pnm-border);
}

.pnm-nav__spacer {
	flex: 1;
}

/* --- ボタン --- */
.pnm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pnm-tap);
	padding: 12px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	border: 1.5px solid transparent;
	border-radius: 9999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.pnm-btn--primary {
	color: #FFFFFF;
	background: var(--pnm-primary);
}

.pnm-btn--primary:hover {
	background: var(--pnm-primary-dark);
}

.pnm-btn--primary.is-disabled,
.pnm-btn--primary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.pnm-btn--ghost {
	color: var(--pnm-primary-dark);
	background: transparent;
	border-color: var(--pnm-primary);
}

.pnm-btn--ghost:hover {
	background: var(--pnm-primary-light);
}

.pnm-btn--link {
	min-height: var(--pnm-tap);
	padding: 12px 14px;
	color: var(--pnm-text-muted);
	background: transparent;
	font-weight: 500;
	text-decoration: underline;
}

.pnm-btn--link:hover {
	color: var(--pnm-text);
}

.pnm-btn--chip {
	min-height: var(--pnm-tap);
	padding: 10px 18px;
	font-size: 14px;
	color: var(--pnm-primary-dark);
	background: var(--pnm-bg);
	border-color: var(--pnm-opt-hover);
}

.pnm-btn--chip:hover,
.pnm-btn--chip.is-active {
	color: #FFFFFF;
	background: var(--pnm-primary);
	border-color: var(--pnm-primary);
}

/* 枠線ボタン（クロス導線＝主導線より一段下げる）。塗り（--primary）と対で使う。 */
.pnm-btn--outline {
	color: var(--pnm-primary-dark);
	background: transparent;
	border-color: var(--pnm-primary);
	text-decoration: none;
}

.pnm-btn--outline:hover {
	background: var(--pnm-primary-light);
}

/* 完了画面のクロス導線（助成金診断／補助金診断）。サマリー枠の下にグレーの帯として置き、
   見出しの下に枠線ボタン2つを横並び。主導線（塗り）より視覚重量を下げ、誤クリックを
   防ぐため線ではなく余白で明確に離す。 */
.pnm-crossflow {
	/* 生成中・完了画面で主導線を誤クリックしないよう、サマリー枠との間に 50px の余白。 */
	margin-top: 50px;
	padding: 18px 20px;
	background: var(--pnm-bg);
	border: 1px solid var(--pnm-border);
	border-radius: var(--pnm-radius-lg);
	text-align: center;
}

.pnm-crossflow__heading {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pnm-text-muted);
	margin: 0 0 12px;
}

.pnm-crossflow__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.pnm-crossflow__ctas .pnm-btn {
	flex: 1 1 auto;
	min-width: 200px;
}

.pnm-btn:focus-visible {
	outline: 2px solid var(--pnm-primary-dark);
	outline-offset: 2px;
}

/* --- モバイル（〜767px）：ナビボタンを2段組にして横はみ出しを防ぐ --- */
/* 768px 以上は基準スタイル（横並び＋spacer flex:1）をそのまま維持する。 */
@media screen and ( max-width: 767px ) {
	.pnm-nav {
		flex-wrap: wrap;
	}

	/* flex:1 のスペーサーは2段組では折返しの邪魔になるため消す */
	.pnm-nav__spacer {
		display: none;
	}

	/* 上段：主ボタン（「回答して提案書を作成」等）を全幅に */
	.pnm-nav .pnm-next {
		order: 1;
		width: 100%;
	}

	/* 下段：戻る／スキップを横2分割（gap 12px を左右で折半） */
	/* DOM順（戻る→スキップ）を order で保ちつつ見た目だけ下段に送る */
	.pnm-nav .pnm-btn--ghost {
		order: 2;
		width: calc(50% - 6px);
	}

	.pnm-nav .pnm-btn--link {
		order: 3;
		width: calc(50% - 6px);
	}
}

/* --- 生成待機（確認後の生成中画面） --- */
.pnm-generating {
	padding: 24px 0;
}

.pnm-error {
	padding: 24px;
	text-align: center;
	color: var(--pnm-text-muted);
}

.pnm-loading {
	padding: 40px 24px;
	text-align: center;
	color: var(--pnm-text-muted);
}

/* --- url_repeat（参考サイトを複数入力） --- */
.pnm-urlrepeat__rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pnm-urlrepeat__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pnm-urlrepeat__input {
	flex: 1;
	min-width: 0;
}

.pnm-urlrepeat__remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--pnm-text-muted);
	background: var(--pnm-bg);
	border: 1.5px solid var(--pnm-border);
	border-radius: var(--pnm-radius);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.pnm-urlrepeat__remove:hover {
	color: var(--pnm-badge-req);
	border-color: var(--pnm-badge-req);
}

.pnm-urlrepeat__add {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-top: 10px;
	padding: 8px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--pnm-primary-dark);
	background: transparent;
	border: 1.5px dashed var(--pnm-opt-hover);
	border-radius: 9999px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pnm-urlrepeat__add:hover {
	background: var(--pnm-primary-light);
}

.pnm-urlrepeat__add:focus-visible,
.pnm-urlrepeat__remove:focus-visible {
	outline: 2px solid var(--pnm-primary);
	outline-offset: 2px;
}

/* --- ai_confirm（サイト読み取り） --- */
.pnm-aiconfirm__loading {
	padding: 16px;
	margin-bottom: 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pnm-primary-dark);
	background: var(--pnm-primary-light);
	border-radius: var(--pnm-radius-lg);
}

.pnm-aiconfirm__summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 12px;
}

.pnm-aiconfirm__sumrow {
	display: flex;
	gap: 8px;
	font-size: 14px;
	line-height: 1.6;
}

.pnm-aiconfirm__sumlabel {
	flex: none;
	min-width: 6.5em;
	font-weight: 600;
	color: var(--pnm-text-muted);
}

.pnm-aiconfirm__sumval {
	color: var(--pnm-text);
	font-weight: 600;
}

.pnm-aiconfirm__edit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 8px 0 12px;
}

.pnm-aiconfirm__edit .pnm-field {
	margin-bottom: 0;
}

.pnm-aiconfirm__edit .pnm-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pnm-text-muted);
	margin-bottom: 6px;
}

.pnm-aiconfirm__errnote {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--pnm-badge-req);
}

/* --- followup（AI補足質問）読み込み中 --- */
.pnm-followup__loading {
	padding: 32px 16px;
	text-align: center;
	color: var(--pnm-text-muted);
}

/* followup 読み込み中のスケルトン。1行テキストに潰れて誤操作を招くのを防ぐため、
   実ステップ（見出し＋選択肢カード）に近い高さを確保する。モーションは新規追加せず、
   既存の @keyframes pnm-shimmer を流用する。 */
.pnm-followup__skeleton {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pnm-skeleton {
	background: var(--pnm-opt-border);
	border-radius: var(--pnm-radius);
	animation: pnm-shimmer 1.4s ease-in-out infinite;
}

.pnm-skeleton__heading {
	width: 60%;
	height: 20px;
	margin-bottom: 6px;
	border-radius: 9999px;
}

.pnm-skeleton__card {
	min-height: var(--pnm-tap);
	background: var(--pnm-opt-bg);
	border: 1.5px solid var(--pnm-opt-border);
	border-radius: var(--pnm-radius);
}

/* --- 確認画面（confirm） --- */
.pnm-confirm__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
}

.pnm-confirm__sub {
	margin: 0 0 24px;
	font-size: 15px;
	color: var(--pnm-text-muted);
}

/* --- 入力サマリー（confirm / generating で共有） --- */
.pnm-summary {
	padding: 20px;
	background: var(--pnm-bg);
	border: 1.5px solid var(--pnm-opt-border);
	border-radius: var(--pnm-radius-lg);
}

.pnm-summary--compact {
	padding: 16px;
	background: var(--pnm-bg-subtle);
	border-color: var(--pnm-border);
}

.pnm-summary__primary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--pnm-primary-light);
}

.pnm-summary__primary-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--pnm-primary-dark);
}

.pnm-summary__primary-value {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--pnm-text);
}

.pnm-summary--compact .pnm-summary__primary-value {
	font-size: 19px;
}

.pnm-summary__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.pnm-summary__row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.pnm-summary__label {
	flex: none;
	width: 34%;
	max-width: 9em;
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pnm-text-muted);
}

.pnm-summary__value {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.7;
	color: var(--pnm-text);
	word-break: break-word;
	/* textarea 等の回答に含まれる改行を確認画面でそのまま表示する（値は textContent 設定＝改行は DOM に保持済み）。 */
	white-space: pre-line;
}

.pnm-summary__divider {
	height: 1px;
	margin: 16px 0;
	background: var(--pnm-border);
}

.pnm-summary__secondary {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--pnm-border);
	opacity: 0.85;
}

.pnm-summary__secondary-label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 700;
	color: var(--pnm-text-muted);
	background: var(--pnm-bg-subtle);
	border-radius: 9999px;
}

.pnm-summary__secondary .pnm-summary__value {
	font-weight: 500;
	color: var(--pnm-text-muted);
}

/* 「すべての回答を見る」折りたたみ。サマリーカード（グレー枠）の内側に置き、
   4項目との区切りに上罫線と余白を入れる。 */
.pnm-summary__all {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--pnm-border);
}

.pnm-summary__all-toggle {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pnm-primary-dark);
	list-style: none;
}

.pnm-summary__all-toggle::-webkit-details-marker {
	display: none;
}

.pnm-summary__all-toggle::before {
	content: '＋ ';
	font-weight: 700;
}

.pnm-summary__all[open] .pnm-summary__all-toggle::before {
	content: '− ';
}

.pnm-summary__all .pnm-summary__list {
	margin-top: 12px;
}

/* --- 生成待機（カウントダウン＋時間ベース進捗＋段階メッセージ） --- */
.pnm-generating__count {
	margin: 8px 0 6px;
	text-align: center;
	font-size: 28px;
	font-weight: 800;
	color: var(--pnm-primary-dark);
	font-variant-numeric: tabular-nums;
}

.pnm-generating__stage-msg {
	margin: 0 0 18px;
	min-height: 1.6em;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--pnm-text);
}

.pnm-generating__bar {
	height: 10px;
	overflow: hidden;
	background: var(--pnm-opt-border);
	border-radius: 9999px;
}

.pnm-generating__fill {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--pnm-primary), var(--pnm-primary-dark));
	border-radius: 9999px;
	transition: width 0.6s ease;
}

.pnm-generating__bar.is-animating .pnm-generating__fill {
	animation: pnm-shimmer 1.4s ease-in-out infinite;
}

@keyframes pnm-shimmer {
	0%, 100% { opacity: 0.65; }
	50% { opacity: 1; }
}

.pnm-generating__note {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--pnm-text-muted);
}

.pnm-generating__advance {
	display: block;
	margin: 20px auto 0;
}

.pnm-generating__summary {
	margin-top: 24px;
}

.pnm-generating__summary-head {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--pnm-text-muted);
}

/* 「もう一度ヒアリングを始める」：ボタンではなく文字リンクの見た目。 */
.pnm-generating__restart {
	display: block;
	margin: 14px auto 0;
	padding: 4px 8px;
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: 13px;
	color: var(--pnm-primary-dark);
	text-decoration: underline;
	cursor: pointer;
}

.pnm-generating__restart:hover {
	color: var(--pnm-text);
}

/* 提案書プレビュー（renderDone）用：見た目は完成画面のリンクと同一、上余白のみ広げる。 */
.pnm-done__restart {
	margin-top: 28px;
}

.pnm-generating__error {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-top: 20px;
	padding: 18px;
	background: #FDECE7;
	border-radius: var(--pnm-radius-lg);
}

.pnm-generating__error-msg {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--pnm-badge-req);
}

/* --- 提案書表示（done） --- */
.pnm-done__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.pnm-done__badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 18px;
	font-weight: 900;
	color: #FFFFFF;
	background: var(--pnm-primary);
	border-radius: 50%;
}

.pnm-done__title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
}

.pnm-done__opening {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--pnm-text-muted);
}

/* 提案書プレビューのラッパ。🔴 幅は依頼詳細（/member2/request-detail/）と同じ 960px 基準に
   揃える。⚠️ フォーム側の `--pnm-container: 720px`（:33）は触らず、この節だけを親から
   はみ出させて広げる（position:relative + left:50% + translateX(-50%) の定番の抜け出し）。
   ⚠️ 幅が 901px を超えるため、提案書内の概算費用は1列→3列になる（意図した改善）。 */
.pnm-done {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(960px, calc(100vw - 32px));
}

/* 🔴 内側スクロールの原因だった `height: 80vh; min-height: 520px;` の一組を廃し、
   中身の高さに追従させる（実高さは pnm_shortcode_hearing() が出す生インライン
   <script>＝PNM_Mypage::resize_script() が iframe の style.height に入れる）。
   min-height はスクリプト実行前のプレースホルダで、依頼詳細（min-height:70vh）と同値。 */
.pnm-done__frame {
	display: block;
	width: 100%;
	min-height: 70vh;
	background: var(--pnm-bg);
	border: 1px solid var(--pnm-border);
	border-radius: var(--pnm-radius-lg);
}

/* --- 480px 以上：短い選択肢グループ（is-two-col）だけ2列 --- */
/* is-two-col は wizard.js が「全選択肢の換算幅 <= 7.0」のとき付与する。 */
/* 長い選択肢を含むグループは付与されず、既定の1列（:170）のまま。 */
@media ( min-width: 480px ) {
	.pnm-optgrid.is-two-col {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 2列時、「その他」フリー記述欄が半セルに潰れないよう全幅に伸ばす。 */
	.pnm-optgrid.is-two-col .pnm-opt__freetext {
		grid-column: 1 / -1;
	}
}

/* --- 375px 以上：さらに短い選択肢グループ（is-two-col-sm）はスマホでも2列 --- */
/* is-two-col-sm は wizard.js が「全選択肢の換算幅 <= 6.0」のとき付与する。 */
/* 480px 未満の iPhone 縦（約390px）でも price_band 等を2列にするための追加閾値。 */
/* 🔴 **0.7.207：発火幅を 375px → 360px へ戻した（崇さん確定・2026-08-30）。**  */
/*    ⚠️ 0.7.190 で「折り返しを無くすため」360px → 375px へ上げたが、           */
/*       **その判断を撤回した**＝2列で見える範囲を優先する。                    */
/*    ⚠️ **副作用として 360〜374px で折り返しが復活する。承知のうえの決定。**   */
/*       （360px では2列のセル内に置ける文字が 92px しかなく、換算幅 6.0 でも    */
/*       半角数字を含む「10ページ前後」＝実測 91px が折り返す。）               */
/*    🔴 **折り返し対策は今後ラベル側で行う。CSS では発火幅を戻すだけ。**       */
@media ( min-width: 360px ) {
	.pnm-optgrid.is-two-col-sm {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 2列時、「その他」フリー記述欄が半セルに潰れないよう全幅に伸ばす。 */
	.pnm-optgrid.is-two-col-sm .pnm-opt__freetext {
		grid-column: 1 / -1;
	}
}

/* --- 520px 以上：長ラベル群（is-two-col-wrap）を2列にする --- */
/* is-two-col-wrap は wizard.js が「6.0 < 全選択肢の換算幅の最大 <= 13.0」のとき */
/* 付与する（is-two-col / is-two-col-sm とは排他）。1列では縦に長くなる多肢群を、 */
/* 2列化してスクロール負担を減らす。 */
/* 🔴 **0.7.207：発火幅を 520px → 390px へ戻した（崇さん確定・2026-08-30）。** */
/*    ⚠️ 0.7.190 で「折り返しを無くすため」390px → 520px へ上げたが、          */
/*       **その判断を撤回した**＝1列で縦に長くなるより2列で見渡せるほうを採る。 */
/*    ⚠️ **副作用として 390px で折り返しが復活する。承知のうえの決定。**       */
/*       （390px の2列はセル内の文字の置き場が実測 107px しかなく〔セル 166px    */
/*       − 左右パディング 28 − 枠 3 − チェックボックス 18 − 間隔 10〕、14.5px の  */
/*       全角は1文字 15px なので 7文字でぎりぎり・8文字で必ず折り返す。         */
/*       ＝ wizard.js の「6.0 < 換算幅 <= 13.0 なら2列」は折り返し前提の設計。）  */
/*    🔴 **折り返し対策は今後ラベル側で行う。CSS では発火幅を戻すだけ。**       */
/*    ⚠️ wizard.js は無改変（クラスの付与規則は変えていない。効かせる幅だけ変えた）。 */
@media ( min-width: 390px ) {
	.pnm-optgrid.is-two-col-wrap {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 2列時、「その他」フリー記述欄が半セルに潰れないよう全幅に伸ばす。 */
	.pnm-optgrid.is-two-col-wrap .pnm-opt__freetext {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ */
/* 「必要な機能を選ぶ」の feature（web）だけ PC で2列にする（★2026-08-16）*/
/*                                                                    */
/* feature は選択肢が多く（24択）、最長ラベルの換算幅が 13.0 を超える    */
/* （「料金シミュレーター・見積もり」＝14.0）ため、wizard.js の自動2列   */
/* クラス（is-two-col* ＝ max<=13.0 のとき付与）が付かず1列のまま縦に    */
/* 長くなる。wizard.js は無改変のまま、data-field で feature に限って    */
/* 901px 以上でだけ2列化する。SP（900px 以下）は基底 .pnm-optgrid の     */
/* 1fr で1列を維持。長ラベルはセル内で2行に折り返す（.pnm-opt__text は   */
/* nowrap でないため崩れない）。他フィールド・他カテゴリ（ec_feature は  */
/* max=12.0 で既に is-two-col-wrap＝2列）には一切波及しない。            */
/* ------------------------------------------------------------------ */
@media ( min-width: 901px ) {
	.pnm-field[data-field="feature"] .pnm-optgrid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 「その他」フリー記述欄は2列時に半セルへ潰れないよう全幅に伸ばす。 */
	.pnm-field[data-field="feature"] .pnm-optgrid .pnm-opt__freetext {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ */
/* S-1 カテゴリ：5ボタンを常に1列（縦積み）にする（★2026-08-10）        */
/*                                                                    */
/* wizard.js はラベル換算幅で is-two-col-wrap を自動付与するが（無改変）、 */
/* カテゴリ入口は縦積みで見せたいので data-field 指定で1列に固定上書き。   */
/* category（web/ec/lp/ai の4択＋入口押下後は sns/media を含む6択）と、    */
/* 5ボタン目の入口 entry_snsmedia の両グリッドを 1fr にする。            */
/* 指定は S-1 の2フィールドに限定（他ステップの選択肢2列化には波及しない）。 */
/* ------------------------------------------------------------------ */
.pnm-field[data-field="category"] .pnm-optgrid,
.pnm-field[data-field="entry_snsmedia"] .pnm-optgrid {
	grid-template-columns: 1fr;
}

/* 入口ボタン（entry_snsmedia）は、上のカテゴリ4択の直下に5つ目のボタンとして */
/* 並べたいので、category フィールドの下マージンを選択肢間ギャップ（10px）に詰める。 */
.pnm-field[data-field="category"] {
	margin-bottom: 10px;
}

/* 入口フィールドのラベルはボタン文言（SNS・撮影・動画）と重複するため隠す。 */
.pnm-field[data-field="entry_snsmedia"] .pnm-field__label {
	display: none;
}

/* --- 768px 以上：余白・見出しを拡大 --- */
@media ( min-width: 768px ) {
	.pnm-hearing {
		padding: 32px 24px 56px;
	}

	.pnm-step__title {
		font-size: 26px;
	}
}

/* ------------------------------------------------------------------ */
/* 固定ヘッダー分のスクロール停止位置オフセット（症状b 対策）             */
/*                                                                    */
/* scrollTop()（wizard.js）は #pnm-hearing を scrollIntoView で上端合わせ  */
/* するが、SWELL の固定ヘッダー（.l-fixHeader 等）が画面上端に被さるため、  */
/* 生成待機画面の先頭要素＝経過秒カウンターがヘッダー裏に隠れて見えない。   */
/* scroll-margin-top で停止位置をヘッダー高ぶんだけ下げて回避する。         */
/* JS（scrollTop の実装・呼び出し）には一切手を入れない。                 */
/*                                                                    */
/* ヘッダー高は SWELL 側の設定に依存し本リポジトリからは実測できないため、   */
/* 仮値（SP 72px / PC 80px）を置く。実機で固定ヘッダーの実高に合わせて要微調整。*/
/* モバイルファースト：基準は SP、768px 以上で PC 値。                    */
/* ------------------------------------------------------------------ */
#pnm-hearing {
	scroll-margin-top: 72px;
}

@media ( min-width: 768px ) {
	#pnm-hearing {
		scroll-margin-top: 80px;
	}
}

/* ==================================================================== */
/* 生成待機のモーダル化＋進捗サークル＋ロボット（0.7.183 / #440 の手段B）  */
/* -------------------------------------------------------------------- */
/* 🔴 assets/js/wizard.js は1行も変更していない。待機表示（.pnm-generating）  */
/*    は wizard.js が #pnm-hearing の中に描くので、そこには触らず            */
/*    「#pnm-hearing に .pnm-generating が居る間だけ CSS で見た目を変える」    */
/*    という作りにしてある。解除も wizard.js が innerHTML='' した瞬間に      */
/*    自動で外れる（JS の後始末は不要＝#440 で実測済み）。                    */
/*                                                                      */
/* 🔴 効くのは .pnm-hearing--wait-modal が付いた通常モードだけ。            */
/*    代理入力ページ（mode="agent"）にはこのクラスもスロットも出さないので、   */
/*    以下の規則は1つも当たらない（PNM_Wait_Modal / pnm_hearing_shortcode）。 */
/*                                                                      */
/* ⚠️ 使っている条件は2つだけ：                                           */
/*    G  ＝ .pnm-hearing--wait-modal:has(.pnm-generating)   … 待機表示が居る */
/*    閉 ＝ :has(.pnm-wait-close:checked)                    … 閉じるを押した */
/*    :has() の入れ子は不可なので、条件は毎回この形で書き下している。         */
/* ==================================================================== */

/* 進捗％を数字で出すための変数。PNM_Wait_Modal::script() が width を写す。 */
@property --pnm-pct {
	syntax: '<integer>';
	inherits: true;
	initial-value: 0;
}

.pnm-hearing--wait-modal {
	/* @property 非対応ブラウザ向けのフォールバック（counter が 0 で始まる）。 */
	--pnm-pct: 0;

	/* --- 上部の逃げ幅（0.7.184・実機でサークルの上が SWELL の固定ヘッダーに隠れた件） ---
	 *
	 * 🔴 **z-index を上げて勝ちに行く方針は採らない。** 理由は2つ：
	 *   ① SWELL 側の z-index は本リポジトリから見えず、テーマ更新で変わりうる（数字の殴り合いになる）
	 *   ② そもそも祖先が**重ね合わせコンテキスト**を作っていると、こちらの z-index をいくつ上げても
	 *      その中に閉じ込められてヘッダーには勝てない（既に 99990 でも負けているのが実機の症状）。
	 *   ⇒ **余白で逃がす**なら、勝てても勝てなくても結果が同じになる＝壊れにくい。
	 *
	 * ⚠️ **ヘッダー高は固定値で決め打ちしない。** `PNM_Wait_Modal::script()` が
	 *    「画面上端に接している position:fixed / sticky の要素」の下端を実測して
	 *    `--pnm-wait-obstruct` を上書きする。下の既定値は **JS が動かなかったときの保険**で、
	 *    ヘッダー高の決め打ちではなく「ビューポート比＋安全側の下限」。
	 * ⚠️ ノッチ（safe-area）も足す。実測値と safe-area の**大きいほう**を採る。
	 */
	/* ⚠️ **横向きでは vh 項が小さく出る**（画面高 390px なら 11vh = 43px）ので、0.7.184 の `max( 64px, 11vh )` では 84px のヘッダーを越えられなかった。
	 *    下限を 96px へ引き上げる。🔴 **これはヘッダー高の決め打ちではなく「安全側の下限」**で、
	 *    主経路（JS の実測）が動けば必ず上書きされる。vh 項は縦に非常に長い画面でだけ効く。
	 *    🔴 **この保険を置くこと自体は崇さん確定（2026-08-27）**＝JS が動かない環境で
	 *    0.7.183 と同じ被りに戻るだけで、置いて損がないため。 */
	--pnm-wait-obstruct: max( 96px, 10vh );

	/* モーダル上部の固定ゾーン（サークル＋ロボット）の寸法。 */
	--pnm-wait-top: calc( max( var(--pnm-wait-obstruct), env( safe-area-inset-top, 0px ) ) + 12px );
	--pnm-wait-ring: 200px;
	--pnm-wait-gap: 10px;
	--pnm-wait-bot: 118px;
	/* ロボットの先端（アンテナ）の色。ハードコードせずここで一元管理する。 */
	--pnm-wait-bot-tip: #F2B705;
}

/* JS が動かなかったときの下限を、PC のログイン中だけ引き上げる（0.7.189）。          */
/* ⚠️ WordPress の管理バーは **783px 以上でだけ `position: fixed`**（782px 以下は      */
/*    `absolute` で一緒にスクロールして消える）。PC では管理バー(32px)＋テーマの        */
/*    固定ヘッダーの二段になるので、96px では足りない。                                */
/* 🔴 これは主経路ではない。JS（`PNM_Wait_Modal::script()`）が動けば必ず上書きされる。   */
/* ⚠️ `body.admin-bar` は WordPress コアが `body_class()` で付けるクラス。              */
/*    テーマ（SWELL）のクラス名は名指ししていない。                                    */
@media screen and ( min-width: 783px ) {

	body.admin-bar .pnm-hearing--wait-modal {
		--pnm-wait-obstruct: max( 128px, 10vh );
	}
}

/* 縦の狭い端末では固定ゾーンを縮める（下の本文が読めなくなるのを防ぐ）。 */
/* ⚠️ 逃げ幅（--pnm-wait-obstruct）は縮めない。ヘッダーの高さは画面の高さでは変わらないため。 */
@media ( max-height: 760px ) {
	.pnm-hearing--wait-modal {
		--pnm-wait-ring: 152px;
		--pnm-wait-bot: 92px;
	}
}


/* スロットは既定で出さない（待機表示が無いときは1バイトも見えない）。 */
.pnm-wait-slot,
.pnm-wait-modal__layer,
.pnm-wait-closed {
	display: none;
}

/* -------------------------------------------------------------------- */
/* ① モーダル化                                                          */
/* -------------------------------------------------------------------- */
.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) #pnm-hearing {
	position: fixed;
	inset: 0;
	z-index: 99990;
	/* 🔴 半透明にしない。下の本文が透けないよう不透明で塞ぐ。 */
	background: var(--pnm-bg);
	overflow-y: auto;
	/* スクロールを中身だけに閉じる（背面へ連鎖させない）。 */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* ⚠️ 下は iPhone のホームバーに隠れないよう safe-area を足す。 */
	padding:
		calc( var(--pnm-wait-top) + var(--pnm-wait-ring) + var(--pnm-wait-gap) + var(--pnm-wait-bot) + 24px )
		20px
		calc( 56px + env( safe-area-inset-bottom, 0px ) );
	/* 固定時は scroll-margin-top（SWELL の固定ヘッダー避け）が不要。 */
	scroll-margin-top: 0;
}

/* モーダルは全幅に固定されるので、中身は通常時と同じ本文幅（720px）に戻す。      */
/* これが無いと PC で入力サマリーが画面幅いっぱいに伸び、1行が長くなりすぎる。      */
.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating {
	max-width: var(--pnm-container);
	margin: 0 auto;
	padding: 0;
}

/* スロット本体：待機表示が居る間だけ出す（閉じたあとも案内文のために残す）。 */
.pnm-hearing--wait-modal:has(.pnm-generating) .pnm-wait-slot {
	display: block;
}

/* 重ねる層：閉じるボタンとロボット。モーダルの上（z-index）に置く。 */
.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-wait-modal__layer {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 99991;
	/* 層そのものはクリックを透かす（下のモーダルを操作できるように）。 */
	pointer-events: none;
}

/* -------------------------------------------------------------------- */
/* ② 閉じるボタン（モーダル右上）                                          */
/* -------------------------------------------------------------------- */
/* 🔴 :checked だけでモーダルが解除される（JS を介さない）。押しても生成は  */
/*    止まらない＝fetch もポーリングも cron も一切触っていない。            */
.pnm-wait-close-btn {
	position: absolute;
	/* ⚠️ サークルと同じ逃げ幅を使う。ここを 12px 固定に戻すとヘッダーに隠れて押せなくなる。 */
	top: calc( max( var(--pnm-wait-obstruct), env( safe-area-inset-top, 0px ) ) + 8px );
	right: calc( 12px + env( safe-area-inset-right, 0px ) );
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--pnm-tap);
	padding: 8px 16px 8px 13px;
	color: var(--pnm-text-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	background: var(--pnm-bg-subtle);
	border: 1px solid var(--pnm-border);
	border-radius: 9999px;
	cursor: pointer;
	pointer-events: auto;
}

.pnm-wait-close-btn:hover {
	color: var(--pnm-text);
	border-color: var(--pnm-opt-hover);
}

/* input は「見えないが focus できる」状態に置く（キーボードの Space で閉じられる）。 */
.pnm-wait-close {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.pnm-wait-close-btn:has(.pnm-wait-close:focus-visible) {
	outline: 2px solid var(--pnm-primary);
	outline-offset: 2px;
}

.pnm-wait-close-btn__icon {
	width: 15px;
	height: 15px;
	flex: none;
}

/* -------------------------------------------------------------------- */
/* ③ 待機中はクロス導線（助成金・補助金の診断）を出さない                   */
/* -------------------------------------------------------------------- */
/* 🔴 要素は消さない。表示だけを止める（wizard.js の DOM は無改変）。       */
/* 「まだ待っている」＝「提案書を見る」も「エラー」も隠れている状態、で判定する。 */
/* 完成すると advance の pnm-hidden が外れ、この規則が外れて従来どおり出る。   */
.pnm-hearing--wait-modal .pnm-generating:has( .pnm-generating__advance.pnm-hidden ):has( .pnm-generating__error.pnm-hidden ) .pnm-crossflow {
	display: none;
}

/* -------------------------------------------------------------------- */
/* ④ 進捗サークル（下から満ちる円）                                        */
/* -------------------------------------------------------------------- */
/* 🔴 リング（円弧）にはしていない。CSS には % を角度に変換する手段が無い    */
/*    （#440 Q2）。ここは既存の __fill のインライン width（%）をそのまま使い、 */
/*    バーを円にして -90deg 回すことで「width% ＝ 下からの充填」にしている。   */
.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__bar {
	position: fixed;
	top: var(--pnm-wait-top);
	left: 50%;
	z-index: 99992;
	width: var(--pnm-wait-ring);
	height: var(--pnm-wait-ring);
	margin: 0;
	background: var(--pnm-primary-light);
	border: 3px solid var(--pnm-opt-border);
	border-radius: 50%;
	overflow: hidden;
	transform: translateX( -50% ) rotate( -90deg );
}

.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__fill {
	border-radius: 0;
}

/* 中央の％。回転を打ち消して水平に戻す。 */
.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__bar::after {
	content: counter( pnm-pct ) '%';
	counter-reset: pnm-pct var(--pnm-pct);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	/* ⚠️ 数字は充填（濃いグリーン）の上にも乗るので、白の座布団を敷いて           */
	/*    どの進捗でもコントラストが落ちないようにする。座布団が無いと 95〜100% で */
	/*    「濃いグリーンの上に濃いグリーン」になって読めなくなる。                */
	padding: 5px 15px;
	color: var(--pnm-primary-dark);
	/* ⚠️ 横向きでは円が縮むので、字が小さくなりすぎないよう下限を置く。 */
	font-size: max( 15px, calc( var(--pnm-wait-ring) * 0.22 ) );
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
	letter-spacing: -0.02em;
	background: rgba( 255, 255, 255, 0.94 );
	border-radius: 9999px;
	transform: translate( -50%, -50% ) rotate( 90deg );
}

/* -------------------------------------------------------------------- */
/* ⑤ 踊るロボット（インライン SVG・画像ファイルなし）                       */
/* -------------------------------------------------------------------- */
.pnm-wait-bot {
	position: fixed;
	top: calc( var(--pnm-wait-top) + var(--pnm-wait-ring) + var(--pnm-wait-gap) );
	left: 50%;
	z-index: 99992;
	/* viewBox は 120x110。高さ基準で幅を出す（120 ÷ 110 ≒ 1.0909）。 */
	width: calc( var(--pnm-wait-bot) * 1.0909 );
	height: var(--pnm-wait-bot);
	transform: translateX( -50% );
}

.pnm-wait-bot__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* パーツの塗り。色はトークンから拾う（ハードコードしない）。 */
/* 🔴 形と配色は LINE 簡易ヒアリング側のロボットに揃えてある（崇さん確認済み・2026-08-27）。 */
.pnm-bot__torso,
.pnm-bot__arm rect,
.pnm-bot__leg rect,
.pnm-bot__antenna {
	fill: var(--pnm-primary);
}

.pnm-bot__eye {
	fill: var(--pnm-bg);
}

.pnm-bot__mouth {
	fill: none;
	stroke: var(--pnm-bg);
}

/* アンテナの先端だけ黄色。値は .pnm-hearing--wait-modal の --pnm-wait-bot-tip で一元管理。 */
.pnm-bot__tip {
	fill: var(--pnm-wait-bot-tip);
}

/* 影は薄いグレー。跳ねに合わせて横に縮む（下の動き1・3）。 */
.pnm-bot__shadow {
	fill: var(--pnm-border);
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/* 変形の基準をパーツ自身の箱にする（SVG の既定はビューポート基準）。 */
.pnm-bot__all,
.pnm-bot__body,
.pnm-bot__arm,
.pnm-bot__leg,
.pnm-bot__antenna,
.pnm-bot__tip {
	transform-box: fill-box;
}

/* 全体・胴は「足元」を軸にする（跳ねる／腰を振るが自然になる）。 */
.pnm-bot__all,
.pnm-bot__body {
	transform-origin: 50% 100%;
}

/* 腕は付け根（胴に接する側）を軸にする。左腕は右端、右腕は左端。 */
.pnm-bot__arm--l {
	transform-origin: 100% 50%;
}

.pnm-bot__arm--r {
	transform-origin: 0% 50%;
}

/* 脚は付け根（上端）を軸にする。 */
.pnm-bot__leg {
	transform-origin: 50% 0%;
}

.pnm-bot__antenna {
	transform-origin: 50% 100%;
}

/* まばたきは動きの種類によらず常時。 */
.pnm-bot__eye {
	animation: pnm-bot-blink 4.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

@keyframes pnm-bot-blink {
	0%, 92%, 100% { transform: scaleY( 1 ); }
	95% { transform: scaleY( 0.15 ); }
}

/* --- 動き1：跳ねる --- */
.pnm-wait-bot[data-pnm-move="1"] .pnm-bot__all {
	animation: pnm-bot-hop 0.72s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="1"] .pnm-bot__shadow {
	animation: pnm-bot-shadow-hop 0.72s ease-in-out infinite;
}

/* 🔴 0.7.190：跳ねる高さを 16px → 9px に下げた。                              */
/*    影は本体と一緒に動かない（横に縮むだけ）ので、上がりすぎると             */
/*    **影だけが足元から大きく離れて見える**（実機で指摘）。                   */
/*    ⚠️ 影を一緒に動かして解決しない（接地感が消える）。上がる量のほうを絞る。 */
@keyframes pnm-bot-hop {
	0%, 100% { transform: translateY( 0 ) scaleY( 1 ); }
	18% { transform: translateY( 0 ) scaleY( 0.9 ); }
	45% { transform: translateY( -9px ) scaleY( 1.06 ); }
	75% { transform: translateY( 0 ) scaleY( 0.94 ); }
}

@keyframes pnm-bot-shadow-hop {
	0%, 100% { transform: scaleX( 1 ); opacity: 1; }
	45% { transform: scaleX( 0.76 ); opacity: 0.7; }
}

/* --- 動き2：腰を振る --- */
.pnm-wait-bot[data-pnm-move="2"] .pnm-bot__body {
	animation: pnm-bot-sway 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="2"] .pnm-bot__antenna {
	animation: pnm-bot-sway-antenna 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="2"] .pnm-bot__arm--l {
	animation: pnm-bot-sway-arm-l 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="2"] .pnm-bot__arm--r {
	animation: pnm-bot-sway-arm-r 1.1s ease-in-out infinite;
}

@keyframes pnm-bot-sway {
	0%, 100% { transform: rotate( -9deg ) translateX( -3px ); }
	50% { transform: rotate( 9deg ) translateX( 3px ); }
}

@keyframes pnm-bot-sway-antenna {
	0%, 100% { transform: rotate( 14deg ); }
	50% { transform: rotate( -14deg ); }
}

@keyframes pnm-bot-sway-arm-l {
	0%, 100% { transform: rotate( 26deg ); }
	50% { transform: rotate( -18deg ); }
}

@keyframes pnm-bot-sway-arm-r {
	0%, 100% { transform: rotate( -26deg ); }
	50% { transform: rotate( 18deg ); }
}

/* --- 動き3：万歳ジャンプ --- */
/* 腕は付け根が軸なので、左腕を +100deg／右腕を -100deg で「万歳」になる。 */
.pnm-wait-bot[data-pnm-move="3"] .pnm-bot__all {
	animation: pnm-bot-jump 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="3"] .pnm-bot__shadow {
	animation: pnm-bot-shadow-jump 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="3"] .pnm-bot__arm--l {
	animation: pnm-bot-banzai-l 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="3"] .pnm-bot__arm--r {
	animation: pnm-bot-banzai-r 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="3"] .pnm-bot__leg--l {
	animation: pnm-bot-banzai-leg-l 1.1s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="3"] .pnm-bot__leg--r {
	animation: pnm-bot-banzai-leg-r 1.1s ease-in-out infinite;
}

/* 🔴 0.7.190：跳ぶ高さを 30px → 12px に下げた（実機で影が大きく離れて見えた）。 */
/*    ⚠️ 30px は viewBox 110 に対して 27% で、ロボットが円の下枠まで浮き上がり、  */
/*       影との間に白い空きができていた。腕・脚の振りはそのまま残す。            */
@keyframes pnm-bot-jump {
	0%, 100% { transform: translateY( 0 ) scaleY( 1 ); }
	20% { transform: translateY( 0 ) scaleY( 0.82 ); }
	50% { transform: translateY( -12px ) scaleY( 1.08 ); }
	80% { transform: translateY( 0 ) scaleY( 0.9 ); }
}

@keyframes pnm-bot-shadow-jump {
	0%, 100% { transform: scaleX( 1 ); opacity: 1; }
	50% { transform: scaleX( 0.7 ); opacity: 0.6; }
}

@keyframes pnm-bot-banzai-l {
	0%, 100% { transform: rotate( 0deg ); }
	50% { transform: rotate( 100deg ); }
}

@keyframes pnm-bot-banzai-r {
	0%, 100% { transform: rotate( 0deg ); }
	50% { transform: rotate( -100deg ); }
}

@keyframes pnm-bot-banzai-leg-l {
	0%, 100% { transform: rotate( 0deg ); }
	50% { transform: rotate( -16deg ); }
}

@keyframes pnm-bot-banzai-leg-r {
	0%, 100% { transform: rotate( 0deg ); }
	50% { transform: rotate( 16deg ); }
}

/* --- 動き4：バラバラになって元に戻る --- */
.pnm-wait-bot[data-pnm-move="4"] .pnm-bot__body {
	animation: pnm-bot-burst-body 2.2s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="4"] .pnm-bot__antenna {
	animation: pnm-bot-burst-antenna 2.2s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="4"] .pnm-bot__tip {
	animation: pnm-bot-burst-tip 2.2s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="4"] .pnm-bot__arm--l {
	animation: pnm-bot-burst-arm-l 2.2s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="4"] .pnm-bot__arm--r {
	animation: pnm-bot-burst-arm-r 2.2s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="4"] .pnm-bot__leg--l {
	animation: pnm-bot-burst-leg-l 2.2s ease-in-out infinite;
}

.pnm-wait-bot[data-pnm-move="4"] .pnm-bot__leg--r {
	animation: pnm-bot-burst-leg-r 2.2s ease-in-out infinite;
}

/* 🔴 0.7.190：胴と脚の下方向のずれを半分にした（脚が影より下へ抜けていた）。 */
@keyframes pnm-bot-burst-body {
	0%, 12%, 88%, 100% { transform: translateY( 0 ) rotate( 0deg ); }
	40%, 60% { transform: translateY( 4px ) rotate( -8deg ); }
}

@keyframes pnm-bot-burst-antenna {
	0%, 12%, 88%, 100% { transform: translate( 0, 0 ) rotate( 0deg ); }
	40%, 60% { transform: translate( -8px, -26px ) rotate( -34deg ); }
}

@keyframes pnm-bot-burst-tip {
	0%, 12%, 88%, 100% { transform: translate( 0, 0 ); }
	40%, 60% { transform: translate( 6px, -34px ); }
}

@keyframes pnm-bot-burst-arm-l {
	0%, 12%, 88%, 100% { transform: translate( 0, 0 ) rotate( 0deg ); }
	40%, 60% { transform: translate( -22px, -10px ) rotate( -42deg ); }
}

@keyframes pnm-bot-burst-arm-r {
	0%, 12%, 88%, 100% { transform: translate( 0, 0 ) rotate( 0deg ); }
	40%, 60% { transform: translate( 22px, -10px ) rotate( 42deg ); }
}

@keyframes pnm-bot-burst-leg-l {
	0%, 12%, 88%, 100% { transform: translate( 0, 0 ) rotate( 0deg ); }
	40%, 60% { transform: translate( -14px, 6px ) rotate( -30deg ); }
}

@keyframes pnm-bot-burst-leg-r {
	0%, 12%, 88%, 100% { transform: translate( 0, 0 ) rotate( 0deg ); }
	40%, 60% { transform: translate( 14px, 6px ) rotate( 30deg ); }
}

/* -------------------------------------------------------------------- */
/* 閉じたあとの案内（生成は続く）                                          */
/* -------------------------------------------------------------------- */
.pnm-hearing--wait-modal:has(.pnm-generating):has(.pnm-wait-close:checked) .pnm-wait-closed {
	display: block;
	max-width: 560px;
	margin: 20px auto 0;
	padding: 16px 20px;
	color: var(--pnm-text);
	font-size: 14px;
	line-height: 1.9;
	text-align: center;
	background: var(--pnm-primary-light);
	border-radius: var(--pnm-radius-lg);
}

/* -------------------------------------------------------------------- */
/* 🔴 アニメーションを止める設定（prefers-reduced-motion）                  */
/* -------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.pnm-wait-bot *,
	.pnm-wait-bot,
	.pnm-hearing--wait-modal .pnm-generating__fill,
	.pnm-hearing--wait-modal .pnm-generating__bar.is-animating .pnm-generating__fill {
		animation: none !important;
		transition: none !important;
	}
}

/* ==================================================================== */
/* 🔴 0.7.194：キャラクターを円の「横」に置いて、固定ゾーンの縦を詰める   */
/* ==================================================================== */
/* ⚠️ **なぜ縦を詰めるのか**＝SWELL の追従ヘッダー（78px）が降りてくるぶん、  */
/*    上に逃げ幅が要る。縦積み（円＋すきま＋ロボット）のままだと、その分だけ */
/*    本文の開始位置が下がって待機画面が窮屈になる。                        */
/* 🔴 **横並びは PC だけでなく縦向きスマホでも適用する。**                  */
/*    理由＝**縦の余地がいちばん厳しいのはスマホ**（ヘッダーが画面に占める   */
/*    割合が大きい）で、そこで効かないと意味がない。横に入るかどうかは       */
/*    下の `--pnm-wait-ring` の式が**画面幅からも上限を掛けている**ので保証   */
/*    される（横に入らない幅では円のほうが自動で小さくなる）。               */
/* ⚠️ **横向き2カラム（`orientation: landscape` and `max-height: 520px`）は  */
/*    対象外**。この @media の条件がその裏返し（縦向き、または高さ521px以上）*/
/*    になっているので、横向きレイアウトの指定には一切触れない。             */
/* ⚠️ この節は `max-height: 760px` の節より**後**に置くこと（同じ詳細度なので */
/*    後勝ち。円の寸法をこちらで決め直している）。                           */
@media ( orientation: portrait ), ( min-height: 521px ) {

	.pnm-hearing--wait-modal {
		/* 円とロボットの横のすきま。 */
		--pnm-wait-gapx: 14px;
		/* 円の直径。3つの上限のいちばん小さいものを採る：                     */
		/*   ① 200px（従来の最大）                                            */
		/*   ② 画面幅から決まる上限。横並びの総幅は 円 + すきま + ロボット幅で、*/
		/*      ロボット幅 = 円 × 0.55 × 1.0909 ≒ 円 × 0.6 なので 円 × 1.6。   */
		/*      左右の余白 20px×2 と すきま 14px を引いて 1.6 で割る。          */
		/*   ③ 画面高から決まる上限（本文の居場所を残す）。                    */
		--pnm-wait-ring: min( 200px, calc( ( 100vw - 54px ) / 1.6 ), calc( 100vh - 300px ) );
		/* ロボットの高さは円に連動させる（横に入らなくならないように）。 */
		--pnm-wait-bot: calc( var(--pnm-wait-ring) * 0.55 );
		/* ロボットの幅（viewBox 120x110 ＝ 1.0909）。 */
		--pnm-wait-botw: calc( var(--pnm-wait-bot) * 1.0909 );
	}

	/* 本文の開始位置＝逃げ幅＋円の直径だけ。**ロボットのぶんの縦は要らない。** */
	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) #pnm-hearing {
		padding-top: calc( var(--pnm-wait-top) + var(--pnm-wait-ring) + 24px );
	}

	/* 円を左へ（ロボットのぶんだけ中心をずらす）。 */
	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__bar {
		transform:
			translateX( calc( -50% - ( var(--pnm-wait-botw) + var(--pnm-wait-gapx) ) / 2 ) )
			rotate( -90deg );
	}

	/* ロボットを円の右へ。上下は円の中心に合わせる。 */
	.pnm-wait-bot {
		top: calc( var(--pnm-wait-top) + ( var(--pnm-wait-ring) - var(--pnm-wait-bot) ) / 2 );
		transform: translateX( calc( -50% + ( var(--pnm-wait-ring) + var(--pnm-wait-gapx) ) / 2 ) );
	}
}


/* ==================================================================== */
/* 横向き（縦の余地が無い画面）だけ2カラムにする（0.7.186）              */
/* -------------------------------------------------------------------- */
/* 🔴 縦積み（縦向き・PC）はそのまま。ここは**上書きだけ**する。          */
/*                                                                      */
/* 🔴 なぜ `orientation: landscape` 単独で判定しないか                    */
/*    「横向き」だけだと PC（1280×800 等）も該当してしまい、現状の中央寄せ  */
/*    が壊れる。⇒ **`max-height` を併用する。**                          */
/*    ⚠️ ここで本当に効いているのは「端末が何か」ではなく**縦の余地が       */
/*    足りるかどうか**なので、機種を当てにいく判定（UA・幅）ではなく        */
/*    **高さそのもの**で書くほうが壊れにくい。小さいノートPCのウィンドウを  */
/*    縦に潰した場合も2カラムになるが、それは不具合ではなく正しい挙動。     */
/*    ⚠️ 520px は「スマホ横向き（390〜430px）は入り、PC（600px〜）は入らない」 */
/*    の境目。ヘッダー高の決め打ちとは無関係。                            */
/*                                                                      */
/* 左：進捗サークル＋ロボット（どちらも position:fixed ＝ もともと流れの外）  */
/* 右：経過時間・見出し・説明文・ご入力内容（#pnm-hearing の通常の流れ）     */
/* ⇒ **右カラムだけがスクロールする**（左は fixed なので動かない）。        */
/*    `overscroll-behavior: contain` は継承したまま。                    */
/* ==================================================================== */
@media ( orientation: landscape ) and ( max-height: 520px ) {

	.pnm-hearing--wait-modal {
		/* 🔴 残りの高さから逆算して縮める。ヘッダーが高いほど自動で小さくなる。
		 *    0.58 + 0.30 ＝ 0.88 で、隙間とマージンのぶんを残してある。 */
		--pnm-wait-ring: min( 150px, calc( ( 100vh - var(--pnm-wait-obstruct) - 40px ) * 0.58 ) );
		--pnm-wait-bot: min( 78px, calc( ( 100vh - var(--pnm-wait-obstruct) - 40px ) * 0.30 ) );
		--pnm-wait-gap: 6px;
	}

	/* 右カラム：左半分を padding で空け、そこへ本文を流す。 */
	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) #pnm-hearing {
		padding-top: var(--pnm-wait-top);
		padding-right: calc( 16px + env( safe-area-inset-right, 0px ) );
		padding-bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
		padding-left: calc( 50% + 10px );
	}

	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating {
		max-width: none;
	}

	/* 左カラム：サークル。左半分の中央に置く（ノッチぶんだけ内側へ寄せる）。 */
	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__bar {
		top: var(--pnm-wait-top);
		left: calc( 25% + env( safe-area-inset-left, 0px ) / 2 );
	}

	/* 左カラム：ロボットはサークルの真下。 */
	/* ⚠️ 『必ずラッパのクラスの下に書く』（#441 の決定）に従って前置してある。
	 *    ⚠️ 既定側の `.pnm-wait-bot` は前置なしで書かれているが、あれは
	 *    **要素そのものがスロット（通常モードだけ）にしか出力されない**ので波及しない、
	 *    という既存の例外。🔴 **新しく足すぶんは前置する**（この行の書き方に揃えること）。 */
	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-wait-bot {
		top: calc( var(--pnm-wait-top) + var(--pnm-wait-ring) + var(--pnm-wait-gap) );
		left: calc( 25% + env( safe-area-inset-left, 0px ) / 2 );
	}

	/* 経過時間は縦向きほど大きくしない（右カラムの縦を食うため）。 */
	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__count {
		margin: 0 0 4px;
		font-size: 22px;
		text-align: left;
	}

	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__stage-msg {
		margin: 0 0 10px;
		font-size: 14px;
		text-align: left;
	}

	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__note {
		margin: 0 0 12px;
		text-align: left;
	}

	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__summary {
		margin-top: 12px;
	}

	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-generating__advance {
		margin: 12px 0 0;
	}
}

/* 🔴 それでも入らないほど縦が短いときだけロボットを消す（サークルを優先）。 */
/*    ⚠️ 消すのはロボットだけ。円と％は必ず残す。                          */
@media ( orientation: landscape ) and ( max-height: 300px ) {

	.pnm-hearing--wait-modal:has(.pnm-generating):not(:has(.pnm-wait-close:checked)) .pnm-wait-bot {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* 複数選択マーカーの併記（0.7.188）                                    */
/* ------------------------------------------------------------------ */
/* 「複数可」は独立した説明行にせず、設問タイトルと同じ行に置く。       */
/* 🔴 wizard.js は触らない。DOM は                                      */
/*      <label class="pnm-field__label">…</label>                       */
/*      <p class="pnm-help">複数可</p>                                 */
/*    の順で必ず隣接するため（renderChoice / renderInput ほか）、       */
/*    両方を inline-block にするだけで同じ行ボックスに載る。            */
/* ⚠️ 対象は「複数可」を持つ 15 設問だけに data-field で限定する。      */
/*    .pnm-help 全体には効かせない（残した説明文は独立行のまま）。      */
.pnm-field[data-field="goal"] > .pnm-field__label,
.pnm-field[data-field="issues"] > .pnm-field__label,
.pnm-field[data-field="ops_scope"] > .pnm-field__label,
.pnm-field[data-field="feature"] > .pnm-field__label,
.pnm-field[data-field="ec_status"] > .pnm-field__label,
.pnm-field[data-field="ec_feature"] > .pnm-field__label,
.pnm-field[data-field="lp_source"] > .pnm-field__label,
.pnm-field[data-field="sns_platform"] > .pnm-field__label,
.pnm-field[data-field="sns_scope"] > .pnm-field__label,
.pnm-field[data-field="ai_purpose"] > .pnm-field__label,
.pnm-field[data-field="ai_tools"] > .pnm-field__label,
.pnm-field[data-field="ai_scope"] > .pnm-field__label,
.pnm-field[data-field="movie_type"] > .pnm-field__label,
.pnm-field[data-field="photo_type"] > .pnm-field__label,
.pnm-field[data-field="media_use"] > .pnm-field__label {
	display: inline-block;
	margin-bottom: 10px;
	vertical-align: baseline;
}

.pnm-field[data-field="goal"] > .pnm-help,
.pnm-field[data-field="issues"] > .pnm-help,
.pnm-field[data-field="ops_scope"] > .pnm-help,
.pnm-field[data-field="feature"] > .pnm-help,
.pnm-field[data-field="ec_status"] > .pnm-help,
.pnm-field[data-field="ec_feature"] > .pnm-help,
.pnm-field[data-field="lp_source"] > .pnm-help,
.pnm-field[data-field="sns_platform"] > .pnm-help,
.pnm-field[data-field="sns_scope"] > .pnm-help,
.pnm-field[data-field="ai_purpose"] > .pnm-help,
.pnm-field[data-field="ai_tools"] > .pnm-help,
.pnm-field[data-field="ai_scope"] > .pnm-help,
.pnm-field[data-field="movie_type"] > .pnm-help,
.pnm-field[data-field="photo_type"] > .pnm-help,
.pnm-field[data-field="media_use"] > .pnm-help {
	display: inline-block;
	margin: 0 0 10px 8px;
	vertical-align: baseline;
	white-space: nowrap;
}

/* ==================================================================== */
/* ボタンの配置（0.7.189）                                              */
/* ==================================================================== */

/* -------------------------------------------------------------------- */
/* ③-1 S-1（カテゴリ選択）の選択肢の下の「次へ進む」                      */
/* -------------------------------------------------------------------- */
/* 🔴 wizard.js は触らない。ボタンの実体は `#pnm-hearing` の**兄弟**として  */
/*    PHP（PNM_Step1_Next::slot()）が出し、出す条件は :has() だけで決める。 */
/* ⚠️ カテゴリの設問は S-1 にしか描かれないので、この条件は                */
/*    「S-1 を見ていて、かつカテゴリが選ばれている」と同義になる。          */
/*    ⇒ 未選択のあいだは出ない（押しても進めないボタンを出さない）。       */
.pnm-s1-next-slot {
	display: none;
}

.pnm-hearing--normal:has( #pnm-hearing .pnm-field[data-field="category"] .pnm-opt__input:checked ) .pnm-s1-next-slot {
	/* 🔴 センター配置。 */
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

/* 🔴 0.7.192：S-1 では「次へ進む」を**選択肢の直後・無料診断の枠の上**に置く。 */
/*    ⚠️ 実機で無料診断の枠より下に出ていた。理由は                              */
/*       **クロス導線（`.pnm-crossflow`）が `#pnm-hearing` の中に描かれる**から   */
/*       （`assets/js/wizard.js:2549-2551`：STEP 1 のときだけ `root` に append）。 */
/*       スロットは `#pnm-hearing` の**兄弟**なので、素直に並べると必ず下になる。  */
/*    🔴 直し方＝**S-1 のときだけ `#pnm-hearing` を `display: contents` にして**   */
/*       中身（`.pnm-step` と `.pnm-crossflow`）を `.pnm-hearing` 直下の flex     */
/*       アイテムへ昇格させ、`order` で スロットを間に差し込む。                   */
/*       ⚠️ wizard.js の DOM は無改変（要素は `#pnm-hearing` の中に居るまま）。    */
/*    ⚠️ 条件は「カテゴリの設問が描かれている」＝**S-1 のときだけ**。              */
/*       待機モーダル（`#pnm-hearing` を `position: fixed` にする）とは            */
/*       同時に成立しない（待機中はカテゴリの設問が存在しない）。                  */
.pnm-hearing--normal:has( #pnm-hearing .pnm-field[data-field="category"] ) {
	display: flex;
	flex-direction: column;
}

.pnm-hearing--normal:has( #pnm-hearing .pnm-field[data-field="category"] ) #pnm-hearing {
	display: contents;
}

/* 並び：設問(1) → 次へ進む(2) → 無料診断の枠(3)。 */
/* ⚠️ order 未指定は 0 になるので、`.pnm-hearing` 直下の他の要素（SP向け案内・      */
/*    完了CTAスロット・noscript）が先頭へ回らないよう、既定を 0 のまま前に置く。   */
.pnm-hearing--normal:has( #pnm-hearing .pnm-field[data-field="category"] ) .pnm-step {
	order: 1;
}

.pnm-hearing--normal:has( #pnm-hearing .pnm-field[data-field="category"] ) .pnm-s1-next-slot {
	order: 2;
}

.pnm-hearing--normal:has( #pnm-hearing .pnm-field[data-field="category"] ) .pnm-crossflow {
	order: 3;
}

.pnm-s1-next {
	gap: 8px;
	max-width: 100%;
}

.pnm-s1-next__icon {
	flex: none;
}

/* -------------------------------------------------------------------- */
/* ③-2 確認画面：主ボタンをタイトルの直下へセンター寄せで移動              */
/* -------------------------------------------------------------------- */
/* 🔴 **追加ではなく移動**（下の nav から引き上げる）。二重に出さない。      */
/* ⚠️ `.pnm-nav` を `display: contents` にして、その子（修正する／作成する） */
/*    を `.pnm-confirm` 直下の flex アイテムに昇格させ、order で並べ替える。 */
/*    wizard.js の DOM は無改変（`.pnm-nav` の中に居るまま）。              */
/* 🔴 **スコープは `.pnm-hearing--normal`（通常モードの目印）。**            */
/*    ⚠️ `wizard.js` の確認画面（`renderConfirm()`）は**モード分岐なし**で描かれ、 */
/*       `wizard.css` も無条件に enqueue されるため、素の `.pnm-confirm` に書くと */
/*       **代理入力ページの確認画面にも当たってしまう**（design-reviewer の指摘）。 */
.pnm-hearing--normal .pnm-confirm {
	display: flex;
	flex-direction: column;
	/* 🔴 0.7.192：要素どうしの間隔は **flex の gap** で持つ。                    */
	/*    ⚠️ 実機で「主ボタンの下端がサマリー枠の上端と接している」と報告された。 */
	/*       子の `margin` は外部CSS（テーマの本文スタイル等）に打ち消され得るが、 */
	/*       **`gap` は子側の指定では消せない**ので、確実に間隔が残る。           */
	/*    ⚠️ そのため下の各要素の縦 margin は 0 にして、間隔を gap 一本に集約する。 */
	/* 🔴 0.7.194：上のボタンとサマリー枠の隙間を半分に（44px → 22px）。 */
	gap: 22px;
}

.pnm-hearing--normal .pnm-confirm > .pnm-nav {
	display: contents;
}

.pnm-hearing--normal .pnm-confirm > .pnm-confirm__title {
	order: 1;
	/* 間隔は親の gap が持つ（二重に空けない）。 */
	margin-bottom: 0;
}

.pnm-hearing--normal .pnm-confirm > .pnm-confirm__sub {
	order: 2;
	margin-bottom: 0;
}

.pnm-hearing--normal .pnm-confirm > .pnm-nav > .pnm-btn--primary {
	order: 3;
	align-self: center;
	max-width: 100%;
	/* 🔴 0.7.192：margin ではなく親の `gap` で離す（下の余白が実機で効いていなかったため）。 */
	margin: 0;
}

.pnm-hearing--normal .pnm-confirm > .pnm-summary {
	order: 4;
	/* 🔴 0.7.194：上の隙間を半分にするため、保険の margin は下だけにした。         */
	/*    上＝gap 22px のみ／下＝gap 22px ＋ margin 10px＝32px（下のボタンと離す）。 */
	margin: 0 0 10px;
}

/* 「修正する」は従来どおり左下に残す。⚠️ `.pnm-nav` の箱ごと消えるため、     */
/*    上余白はボタン側で持ち直す（区切り線は引かない＝サマリーカードの枠が    */
/*    既に区切りとして効いているので、線を足すと二重になる）。               */
/* ⚠️ `width` は 767px 以下の `.pnm-nav .pnm-btn--ghost{width:calc(50% - 6px)}` */
/*    を打ち消すために要る（こちらのほうが詳細度が高い）。                    */
.pnm-hearing--normal .pnm-confirm > .pnm-nav > .pnm-btn--ghost {
	/* 🔴 0.7.194：2つ目の主ボタン（order:5）より下に置く。                        */
	/*    ⚠️ 「修正する」は逃げ道なので、主導線（作成する）より下・左寄せのまま。   */
	order: 6;
	align-self: flex-start;
	width: auto;
	/* 🔴 0.7.192：サマリー枠との間隔も親の `gap` に任せる。 */
	margin-top: 0;
}

/* -------------------------------------------------------------------- */
/* 🔴 0.7.194：サマリー枠の下にも「この内容で提案書を作成」を置く            */
/* -------------------------------------------------------------------- */
/* ⚠️ wizard.js は主ボタンを**1つしか作らない**ので、CSS では増やせない。     */
/*    PHP（PNM_Confirm_Cta）が `#pnm-hearing` の兄弟にもう1つ置き、          */
/*    押されたら本物の主ボタンへ `click()` を中継する（S-1 と同じ流儀）。     */
/* ⚠️ 位置は `#pnm-hearing` を `display: contents` にして order で決める。    */
.pnm-confirm-cta-slot {
	display: none;
}

/* 🔴 スロットは `#pnm-hearing` の**兄弟**なので、`.pnm-confirm` の「中」に      */
/*    割り込ませるには、`#pnm-hearing`・`.pnm-confirm`・`.pnm-nav` の3つを      */
/*    まとめて `display: contents` にして、**中身を `.pnm-hearing` 直下の       */
/*    flex アイテムへ昇格させる**必要がある。並べ替えはそこで `order` が効く。 */
/* ⚠️ 縦の間隔は `.pnm-confirm` ではなく `.pnm-hearing` の `gap` が持つ。       */
/* ⚠️ スロットが出ない場合（PHP クラスが読めない等）でもこの並びは成立する     */
/*    ＝2つ目のボタンが無いだけで、レイアウトは崩れない。                      */
.pnm-hearing--normal:has( #pnm-hearing .pnm-confirm ) {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pnm-hearing--normal:has( #pnm-hearing .pnm-confirm ) #pnm-hearing,
.pnm-hearing--normal:has( #pnm-hearing .pnm-confirm ) .pnm-confirm,
.pnm-hearing--normal:has( #pnm-hearing .pnm-confirm ) .pnm-confirm > .pnm-nav {
	display: contents;
}

.pnm-hearing--normal:has( #pnm-hearing .pnm-confirm ) .pnm-confirm-cta-slot {
	display: flex;
	justify-content: center;
	/* 🔴 サマリー枠（order:4）と「修正する」（order:6）の間。 */
	order: 5;
	margin: 0;
}

/* spacer は `display: contents` 下では意味を持たない（幅の取り合いが無い）。 */
.pnm-hearing--normal .pnm-confirm > .pnm-nav > .pnm-nav__spacer {
	display: none;
}

/* ------------------------------------------------------------------ */
/* ご連絡の方法（contact_method）を1行に横並びする（0.7.200）           */
/* ------------------------------------------------------------------ */
/* 🔴 wizard.js は無改変。`fieldWrap()` が付ける `data-field` で狙う     */
/*    （`assets/js/wizard.js:780`）。                                   */
/* 🔴 wizard.js はラベル換算幅（最長「メール」＝3.0）で                  */
/*    `is-two-col` + `is-two-col-sm` を付けるので、そのままでは2列に     */
/*    折り返す。ここで grid を上書きして**常に1行**にする。             */
/* ⚠️ LINE の出し分け（簡易ヒアリング経由のみ3択・それ以外2択）は        */
/*    `_worktype_ops_variant` + `show_if` の既存機構がそのまま生きる。   */
/*    列数を数で決めず `1fr` の自動配置にしてあるので、**2択でも3択でも  */
/*    1行**に収まる。                                                   */
/* ⚠️ 幅が足りないときに崩れないよう、最小幅は 0 にして                  */
/*    ラベルの折り返しだけで吸収する（横スクロールを出さない）。         */
.pnm-field[data-field="contact_method"] .pnm-optgrid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-template-columns: none;
	gap: 8px;
}

.pnm-field[data-field="contact_method"] .pnm-opt {
	min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 音声入力（自由記述 free_note のみ・0.7.261）                         */
/*                                                                     */
/* 🔴 付与は assets/js/pnm-voice-input.js が行う。未対応ブラウザでは     */
/*    ボタン自体が作られないので、このCSSも出番が無い（空要素は残らない）。*/
/* ⚠️ 色は変数だけを使う（デザイン規約：ハードコードした色は使わない）。  */
/* ------------------------------------------------------------------ */
.pnm-voice {
	margin-top: 8px;
}

/* セカンダリボタン（枠線グリーン・文字グリーン・背景透明・ピル型）。 */
.pnm-voice__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* ⚠️ box-sizing はこのファイル冒頭の `.pnm-hearing *` で border-box になっている＝
	   ここでは書かない（冗長）。おかげで min-height が「外形 44px」として効く
	   （Chromium 実測 44px＝規約の最小タップ領域を満たす）。 */
	min-height: var(--pnm-tap);
	padding: 8px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--pnm-primary-dark);
	background: transparent;
	border: 1.5px solid var(--pnm-primary);
	border-radius: 9999px;
	cursor: pointer;
}

.pnm-voice__btn:hover {
	background: var(--pnm-primary-light);
}

/* ⚠️ フォーカスの可視化を消さない（デザイン規約）。
   🔴 rgba() に生の 124,179,66 を書かない＝このファイルの他の :focus-visible と同じ
   `outline` ＋変数の書き方に揃える（デザイン規約「ハードコードした色を使わない」）。
   ⚠️ 既存の `.pnm-textarea:focus` は box-shadow+rgba だが、あちらは 0.15 の淡い影で
   var() を rgba に入れられないための例外。**新しく足すほうは多数派に合わせる。** */
.pnm-voice__btn:focus-visible {
	outline: 2px solid var(--pnm-primary-dark);
	outline-offset: 2px;
}

/* アイコン（インライン SVG）。
   🔴 **色を指定しない**＝SVG 側が `currentColor` なので、ボタンの文字色をそのまま使う。
      録音中に文字色が変わると、アイコンも一緒に変わる（新しい色を作らない）。
   ⚠️ **大きさはここで決める**（18px）。ボタンの `gap: 8px` が文字との間隔を作る。 */
.pnm-voice__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.pnm-voice__icon svg {
	display: block;
}

/* 録音中：ボタンを塗りつぶして「いま聞いている」ことを示す。 */
.pnm-voice.is-recording .pnm-voice__btn {
	color: var(--pnm-bg);
	background: var(--pnm-badge-req);
	border-color: var(--pnm-badge-req);
}

/* 🔴 点滅はアイコン（■）に付ける。
   ⚠️ **以前は `::before` で別に赤丸を描いていたが、アイコンと二重になるのでやめた。**
      戻すなら、JS 側のアイコン（`stopIcon()`）を消してから。**両方出さないこと。**
   ⚠️ 点滅は「控えめに」＝消し切らず 0.25 まで（依頼の指定）。 */
.pnm-voice.is-recording .pnm-voice__icon {
	animation: pnm-voice-blink 1.2s ease-in-out infinite;
}

@keyframes pnm-voice-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* ⚠️ 動きを減らす設定の利用者には点滅させない。
   ⚠️ **それでも録音中だと分かる**＝ボタンの塗りつぶしとアイコンの形（■）が残る。 */
@media ( prefers-reduced-motion: reduce ) {
	.pnm-voice.is-recording .pnm-voice__icon {
		animation: none;
	}
}

.pnm-voice__status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pnm-text-muted);
}