/* ==========================================================================
   支払シミュレーター /payment-simulator/（page-payment-simulator.php）
   Figma 04 PC 148:3602（148:3603・150:3731・152:3989・150:3993）／ SP 243:21155
   - p-pay-sim-area: シミュレーター（プラグインのショートコード。マークアップは payment-simulator/simulator.php）
   - p-pay-sim-works: この予算に近い施工事例（月々の予算から）
   - p-pay-sim-guide: 下の説明（SEO 用）／ p-pay-sim-faq: よくある質問
   - プラグインの仮の CSS（plugins/payment-simulator/assets/css/simulator.css）は読み込まない（テンプレートで登録を外している）
   - ページ見出し・選択肢（c-chip-paint）・よくある質問の1問・お問い合わせの帯は共通の部品（担当 P-A）
   ========================================================================== */

/* 左右の余白と角丸（PC と SP で変わるので名前を付ける。値は tokens.css のトークン。セクションの上下は --space-paint-section、影は --shadow-paint-float） */
.p-pay-sim-area,
.p-pay-sim-guide,
.p-pay-sim-faq {
	--pay-sim-gutter: max(40px, calc((100% - 1200px) / 2)); /* 中身 1200・左右 120（1440 のとき） */
	--pay-sim-radius-card: var(--radius-paint-card); /* カード。SP は --radius-xl */
	--pay-sim-radius-box: var(--radius-xl); /* カードの中の箱。SP は --radius-paint-box */
}

/* ---------- シミュレーターの面（淡い地） ---------- */
.p-pay-sim-area {
	padding: 0 var(--pay-sim-gutter) var(--space-paint-section);
	background: var(--color-bg-muted);
}

.p-pay-sim-area__unavailable {
	max-width: 720px;
	margin: 0 auto;
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
}

.p-pay-sim {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	max-width: 1200px;
	margin-inline: auto;
	color: var(--color-text-primary);
}

/* ---------- 計算のしかた（2つ割りの丸いボタン） ---------- */
.p-pay-sim__modes {
	display: flex;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
}

.p-pay-sim__mode {
	position: relative;
	display: flex;
	flex: 1 1 0;
	gap: 10px;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 64px;
	padding: var(--space-paint-control) var(--space-lg);
	border-radius: var(--radius-full);
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
	text-align: center;
	text-wrap: balance; /* 2行になる幅で「予算から／逆算」と2字だけ落ちないように（「月々の／予算から逆算」。2026-10-05） */
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.p-pay-sim__mode:hover {
	background: var(--color-bg-muted);
}

.p-pay-sim__mode.is-active,
.p-pay-sim__mode:has(.p-pay-sim__mode-input:checked) {
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

/* ラジオボタンは見えなくして、札全体で押せるようにする（矢印キーでも切り替えられる） */
.p-pay-sim__mode-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.p-pay-sim__mode:has(.p-pay-sim__mode-input:focus-visible) {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-pay-sim__mode-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--color-text-brand);
}

.p-pay-sim__mode-icon svg {
	width: 22px;
	height: 22px;
}

/* 選んでいる方はチェック、選んでいない方はそのモードのアイコン（色だけで区別しない） */
.p-pay-sim__mode-icon--check,
.p-pay-sim__mode.is-active .p-pay-sim__mode-icon--own,
.p-pay-sim__mode:has(.p-pay-sim__mode-input:checked) .p-pay-sim__mode-icon--own {
	display: none;
}

.p-pay-sim__mode.is-active .p-pay-sim__mode-icon--check,
.p-pay-sim__mode:has(.p-pay-sim__mode-input:checked) .p-pay-sim__mode-icon--check {
	display: inline-flex;
	color: var(--color-text-on-brand);
}

/* ---------- 施工事例から来たとき（上の帯） ---------- */
.p-pay-sim__from-works {
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	padding: 20px var(--space-xl) 20px 20px;
	border-radius: var(--pay-sim-radius-card);
	background: var(--color-bg-canvas);
}

.p-pay-sim__from-works-photo {
	flex: 0 0 160px;
	height: 104px;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-bg-muted);
}

.p-pay-sim__from-works-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-pay-sim__from-works-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
}

.p-pay-sim__from-works-lead {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-pay-sim__from-works-title {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-pay-sim__from-works-price {
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
}

/* 「施工事例に戻る」「条件を変える」などの戻るリンク */
.p-pay-sim .c-back-link {
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px;
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	text-decoration: none;
}

.p-pay-sim .c-back-link:hover {
	text-decoration: underline;
}

/* ---------- 入力（左）と結果（右） ---------- */
.p-pay-sim__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 456px;
	gap: var(--space-lg);
	align-items: stretch;
}

.p-pay-sim__form {
	display: flex;
	grid-row: 1;
	grid-column: 1;
	flex-direction: column;
	gap: var(--space-paint-panel);
	min-width: 0;
	padding: var(--space-2xl);
	border-radius: var(--pay-sim-radius-card);
	background: var(--color-bg-canvas);
}

.p-pay-sim__question {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	min-width: 0;
}

/* 支払回数は fieldset。legend をふつうの箱として並べる（float にすると fieldset の特別な配置から外れる） */
.p-pay-sim__question--count {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.p-pay-sim__question--count > .p-pay-sim__question-head {
	float: left;
	width: 100%;
	margin-bottom: var(--space-md);
	padding: 0;
}

.p-pay-sim__question--count > .p-pay-sim__chips {
	clear: both;
}

.p-pay-sim__question-head {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	margin: 0;
	font: var(--text-paint-h4);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-pay-sim__question-head label {
	cursor: pointer;
}

.p-pay-sim__num {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	background: var(--color-bg-brand);
	font: var(--text-paint-label-m);
	color: var(--color-text-on-brand);
}

/* 金額の入力欄（枠の中に 数字＋単位、右に「約◯万円」） */
.p-pay-sim__input {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	padding: var(--space-paint-control) var(--space-lg);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	background: var(--color-bg-canvas);
	transition: border-color 0.2s;
}

.p-pay-sim__input:hover,
.p-pay-sim__input:focus-within {
	border-color: var(--color-border-brand);
}

.p-pay-sim__input:has(.p-pay-sim__input-field:focus-visible) {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

.p-pay-sim__input:has([aria-invalid="true"]) {
	border-color: var(--color-action-cta);
}

.p-pay-sim__input-value {
	display: flex;
	flex: 1 1 auto;
	gap: var(--space-xs);
	align-items: baseline;
	min-width: 0;
}

.p-pay-sim__input-field {
	width: 10ch; /* 1,200,000 が入る幅（field-sizing に対応していないブラウザ） */
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: var(--text-paint-h3);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

@supports (field-sizing: content) {
	.p-pay-sim__input-field {
		field-sizing: content; /* 数字の長さに合わせて、単位を数字のすぐ右に置く */
		width: auto;
		min-width: 1ch;
	}
}

.p-pay-sim__input-field:focus-visible {
	outline: none; /* 枠（.p-pay-sim__input）の方に出す */
}

.p-pay-sim__unit {
	flex-shrink: 0;
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.p-pay-sim__man {
	flex-shrink: 0;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.p-pay-sim__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.p-pay-sim__note {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-pay-sim__error {
	font: var(--text-paint-caption-bold);
	color: var(--color-text-cta);
}

/* 金利（淡い箱。左に題と補足、右に値） */
.p-pay-sim__rate {
	display: grid;
	grid-template-areas:
		"label value"
		"note value";
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-2xs) var(--space-lg);
	align-items: center;
	padding: 20px var(--space-lg);
	border-radius: var(--pay-sim-radius-box);
	background: var(--color-bg-muted);
}

.p-pay-sim__rate-label {
	grid-area: label;
	align-self: end;
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-pay-sim__rate-note {
	grid-area: note;
	align-self: start;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-pay-sim__rate-value {
	grid-area: value;
	font: var(--text-paint-h3);
	color: var(--color-text-primary);
	white-space: nowrap;
}

.p-pay-sim__rate .p-pay-sim__error {
	grid-column: 1 / -1;
}

/* 金利の入力を許可しているとき */
.p-pay-sim__rate-input {
	display: inline-flex;
	gap: var(--space-2xs);
	align-items: baseline;
}

.p-pay-sim__rate-field {
	width: 5.5ch;
	padding: var(--space-2xs) var(--space-xs);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-md);
	background: var(--color-bg-canvas);
	font: inherit;
	text-align: right;
}

/* ---------- 結果（青い線の白い箱。月々の額がいちばん目立つ） ---------- */
.p-pay-sim__result {
	display: flex;
	grid-row: 1;
	grid-column: 2;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: var(--space-paint-panel);
	border: 2px solid var(--color-border-brand);
	border-radius: var(--pay-sim-radius-card);
	background: var(--color-bg-canvas);
	box-shadow: var(--shadow-paint-float);
}

.p-pay-sim__result-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-pay-sim__result-label {
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
}

.p-pay-sim__amount {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
	color: var(--color-text-primary);
}

.p-pay-sim__amount-pre,
.p-pay-sim__amount-unit {
	font: var(--text-paint-h4);
}

.p-pay-sim__amount-number {
	font: var(--text-paint-number-l);
	font-variant-numeric: tabular-nums;
	color: var(--color-text-brand);
}

.p-pay-sim__sentence {
	font: var(--text-paint-body-s); /* Figma 152:3989（PC 16px で1行） */
	color: var(--color-text-primary);
}

.p-pay-sim__condition {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

.p-pay-sim__stats {
	margin: 0;
	padding: var(--space-2xs) var(--space-lg);
	border-radius: var(--pay-sim-radius-box);
	background: var(--color-bg-muted);
}

.p-pay-sim__stat {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--space-sm);
	align-items: baseline;
	justify-content: space-between;
	padding: var(--space-paint-inner) 0;
	border-bottom: 1px solid var(--color-border-default);
}

.p-pay-sim__stat:last-child {
	border-bottom: 0;
}

.p-pay-sim__stat-label {
	min-width: 0;
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.p-pay-sim__stat-value {
	margin: 0 0 0 auto;
	font: var(--text-paint-h4);
	color: var(--color-text-primary);
	text-align: right;
	white-space: nowrap;
}

/* 値の下に小さく「頭金を含めた合計」（2つめの dd。行いっぱいで右寄せ） */
.p-pay-sim__stat-sub {
	flex-basis: 100%;
	margin: 0;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
	text-align: right;
}

/* 支払回数を比較する（押したときだけ開く） */
.p-pay-sim__compare-toggle {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: var(--space-paint-inner) var(--space-lg);
	border: 2px solid var(--color-border-default);
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	font: var(--text-paint-label-m);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	transition: border-color 0.2s;
}

.p-pay-sim__compare-toggle:hover {
	border-color: var(--color-border-brand);
}

.p-pay-sim__compare-icon {
	flex-shrink: 0;
	transition: transform 0.2s;
}

.p-pay-sim__compare-toggle[aria-expanded="true"] .p-pay-sim__compare-icon {
	transform: rotate(180deg);
}

.p-pay-sim__compare-table {
	width: 100%;
	border: 2px solid var(--color-border-default);
	border-spacing: 0;
	border-collapse: separate;
	border-radius: var(--pay-sim-radius-box);
	background: var(--color-bg-canvas);
	font: var(--text-paint-body-s);
	color: var(--color-text-primary);
}

.p-pay-sim__compare-caption {
	padding-bottom: 10px;
	caption-side: top;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
	text-align: left;
}

.p-pay-sim__compare-table th,
.p-pay-sim__compare-table td {
	padding: var(--space-sm) var(--space-xs);
	font-weight: 400;
	text-align: right;
	white-space: nowrap;
}

.p-pay-sim__compare-table tr > :first-child {
	padding-left: var(--space-paint-control);
	text-align: left;
}

.p-pay-sim__compare-table tr > :last-child {
	padding-right: var(--space-paint-control);
}

.p-pay-sim__compare-table thead th {
	background: var(--color-bg-muted);
	font: var(--text-paint-label-m);
	color: var(--color-text-secondary);
}

.p-pay-sim__compare-table thead th:first-child {
	border-top-left-radius: calc(var(--pay-sim-radius-box) - 2px);
}

.p-pay-sim__compare-table thead th:last-child {
	border-top-right-radius: calc(var(--pay-sim-radius-box) - 2px);
}

.p-pay-sim__compare-table tbody tr:last-child > :first-child {
	border-bottom-left-radius: calc(var(--pay-sim-radius-box) - 2px);
}

.p-pay-sim__compare-table tbody tr:last-child > :last-child {
	border-bottom-right-radius: calc(var(--pay-sim-radius-box) - 2px);
}

.p-pay-sim__compare-table tbody th,
.p-pay-sim__compare-table tbody td {
	border-top: 1px solid var(--color-border-default);
}

.p-pay-sim__compare-table tbody td:nth-child(2) {
	font-weight: 700;
}

.p-pay-sim__compare-row.is-current > * {
	background: var(--blue-50);
}

.p-pay-sim__compare-row.is-current th {
	font-weight: 700;
}

.p-pay-sim__compare-row.is-current td:nth-child(2) {
	color: var(--color-text-brand);
}

.p-pay-sim__current-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px var(--space-xs);
	border-radius: var(--radius-full);
	background: var(--color-bg-brand);
	font: var(--text-paint-label-m);
	color: var(--color-text-on-brand);
	vertical-align: 1px;
}

/* 「この予算に近い施工事例を見る」（テキストリンク・下向きの矢印） */
.p-pay-sim__works-link {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 0;
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	text-decoration: none;
}

.p-pay-sim__works-link:hover {
	text-decoration: underline;
}

.p-pay-sim__works-link-icon {
	flex-shrink: 0;
	transform: rotate(90deg);
}

/* この支払い条件で相談する（c-button-paint の CTA・L。共通の部品の CSS がなくても同じ形になるように、ここでも決める） */
.p-pay-sim__cta {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 60px;
	padding: var(--space-paint-control) var(--space-lg) var(--space-paint-control) var(--space-paint-button);
	border-radius: var(--radius-full);
	background: var(--color-action-cta);
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-on-brand);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s;
}

.p-pay-sim__cta:hover {
	background: var(--color-action-cta-hover);
}

.p-pay-sim__cta svg {
	flex-shrink: 0;
}

.p-pay-sim__cta-lead {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
	text-align: center;
}

.p-pay-sim__notice {
	font: var(--text-paint-caption);
	color: var(--color-text-tertiary);
}

.p-pay-sim__noscript {
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
}

/* ---------- この予算に近い施工事例 ---------- */
.p-pay-sim-works {
	display: grid;
	grid-template-areas:
		"heading all"
		"list list";
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-2xl) var(--space-lg);
	align-items: end;
	margin-top: calc(var(--space-paint-section) - var(--space-xl)); /* 結果との間 112（.p-pay-sim の間 32 を引く） */
	scroll-margin-top: var(--space-lg);
}

.p-pay-sim-works__heading {
	display: flex;
	grid-area: heading;
	flex-direction: column;
	gap: 20px;
}

.p-pay-sim-works__title {
	font: var(--text-paint-h2);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-primary);
}

.p-pay-sim-works__lead {
	font: var(--text-paint-lead);
	color: var(--color-text-secondary);
}

.p-pay-sim-works__all {
	grid-area: all;
}

.p-pay-sim-works__list {
	display: grid;
	grid-area: list;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-pay-sim-works__item {
	display: flex;
	min-width: 0;
}

/* カード（白・角28。横に並ぶカードは高さをそろえ、施工費の箱を下端にそろえる） */
.p-pay-sim-works__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: var(--pay-sim-radius-card);
	background: var(--color-bg-canvas);
	color: var(--color-text-primary);
	text-decoration: none;
}

.p-pay-sim-works__card .c-works-card-paint__photos {
	display: flex;
	height: 240px;
}

.p-pay-sim-works__card .c-works-card-paint__before,
.p-pay-sim-works__card .c-works-card-paint__after {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background: var(--color-bg-muted);
}

.p-pay-sim-works__card .c-works-card-paint__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.p-pay-sim-works__card:hover .c-works-card-paint__img {
	transform: scale(1.04);
}

.p-pay-sim-works__card .c-works-card-paint__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: var(--space-2xs) var(--space-sm);
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	font: var(--text-paint-caption-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
}

.p-pay-sim-works__card .c-works-card-paint__badge--after {
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

.p-pay-sim-works__card .c-works-card-paint__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-inner);
	padding: var(--space-lg) var(--space-paint-card) var(--space-paint-card);
}

.p-pay-sim-works__card .c-works-card-paint__title {
	font: var(--text-paint-h4);
}

.p-pay-sim-works__card .c-works-card-paint__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.p-pay-sim-works__card .c-works-card-paint__tag {
	display: inline-flex;
	gap: var(--space-2xs);
	align-items: center;
	padding: var(--space-2xs) var(--space-sm);
	border-radius: var(--radius-full);
	background: var(--color-bg-muted);
	font: var(--text-paint-caption);
	line-height: 1.4;
	color: var(--color-text-brand);
}

.p-pay-sim-works__card .c-works-card-paint__tag--area {
	padding-left: var(--space-xs);
	color: var(--color-text-secondary);
}

.p-pay-sim-works__spec {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: auto;
	padding: 0 var(--space-paint-card) var(--space-paint-card);
}

.p-pay-sim-works__spec-box {
	display: flex;
	flex-direction: column;
	padding: var(--space-2xs) 20px;
	border-radius: var(--pay-sim-radius-box);
	background: var(--color-bg-muted);
}

.p-pay-sim-works__spec-row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) 0;
}

.p-pay-sim-works__spec-row + .p-pay-sim-works__spec-row {
	border-top: 1px solid var(--color-border-default);
}

.p-pay-sim-works__spec-label {
	font: var(--text-paint-body-s);
	color: var(--color-text-secondary);
}

.p-pay-sim-works__spec-value {
	font: var(--text-paint-body-bold);
	color: var(--color-text-primary);
}

.p-pay-sim-works__spec-value--price {
	font: var(--text-paint-h4);
}

/* テキストリンク（青・太字・右の矢印） */
.p-pay-sim .c-text-link,
.p-pay-sim-guide .c-text-link {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	min-height: 44px;
	font: var(--text-paint-label-l);
	letter-spacing: var(--ls-paint);
	color: var(--color-text-brand);
	text-decoration: none;
}

.p-pay-sim .c-text-link:hover,
.p-pay-sim-works__card:hover .c-text-link,
.p-pay-sim-guide .c-text-link:hover {
	text-decoration: underline;
}

.p-pay-sim .c-text-link svg,
.p-pay-sim-guide .c-text-link svg {
	flex-shrink: 0;
}

/* ---------- 下の説明（白い地・本文の幅 720） ---------- */
.p-pay-sim-guide {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-wide);
	padding: var(--space-paint-section) max(40px, calc((100% - 720px) / 2));
	background: var(--color-bg-canvas);
	color: var(--color-text-primary);
}

.p-pay-sim-guide__block {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.p-pay-sim-guide__title {
	font: var(--text-paint-h3);
	letter-spacing: var(--ls-paint);
}

.p-pay-sim-guide__text {
	font: var(--text-paint-body);
	letter-spacing: var(--ls-paint);
}

.p-pay-sim-guide__table {
	width: 100%;
	table-layout: fixed;
	border: 2px solid var(--color-border-default);
	border-spacing: 0;
	border-collapse: separate;
	border-radius: var(--pay-sim-radius-box);
	background: var(--color-bg-canvas);
}

.p-pay-sim-guide__caption {
	padding-bottom: var(--space-md);
	caption-side: top;
	font: var(--text-paint-caption);
	color: var(--color-text-secondary);
	text-align: left;
}

.p-pay-sim-guide__table th,
.p-pay-sim-guide__table td {
	padding: var(--space-md) var(--space-xs);
	font: var(--text-paint-body);
	text-align: right;
}

.p-pay-sim-guide__table tr > :first-child {
	padding-left: var(--space-paint-card);
	text-align: left;
}

.p-pay-sim-guide__table tr > :last-child {
	padding-right: var(--space-paint-card);
}

.p-pay-sim-guide__table thead th {
	background: var(--color-bg-muted);
	font: var(--text-paint-label-m);
	color: var(--color-text-secondary);
}

.p-pay-sim-guide__table thead th:first-child {
	border-top-left-radius: calc(var(--pay-sim-radius-box) - 2px);
}

.p-pay-sim-guide__table thead th:last-child {
	border-top-right-radius: calc(var(--pay-sim-radius-box) - 2px);
}

.p-pay-sim-guide__table tbody th,
.p-pay-sim-guide__table tbody td {
	border-top: 1px solid var(--color-border-default);
}

.p-pay-sim-guide__table .p-pay-sim-guide__monthly {
	font: var(--text-paint-body-bold);
	line-height: 1.85;
}

.p-pay-sim-guide__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- よくある質問（淡い地・幅 960） ---------- */
.p-pay-sim-faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-wide);
	align-items: center;
	padding: var(--space-paint-section) max(40px, calc((100% - 960px) / 2));
	background: var(--color-bg-muted);
}

.p-pay-sim-faq > * {
	width: 100%;
}

.p-pay-sim-faq__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-paint-inner);
}

/* ==========================================================================
   タブレット（入力と結果を縦に並べる）
   ========================================================================== */
@media (max-width: 1023px) {
	.p-pay-sim__main {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-pay-sim__result {
		grid-row: 2;
		grid-column: 1;
	}
}

/* ==========================================================================
   SP（Figma 04 SP 243:21156 ほか。幅 375・左右 20）
   ========================================================================== */
@media (max-width: 767px) {
	.p-pay-sim-area,
	.p-pay-sim-guide,
	.p-pay-sim-faq {
		--pay-sim-gutter: 20px;
		--pay-sim-radius-card: var(--radius-xl);
		--pay-sim-radius-box: var(--radius-paint-box);
	}

	.p-pay-sim {
		gap: var(--space-md);
	}

	/* モード：アイコンの下に文字 */
	.p-pay-sim__modes {
		gap: var(--space-2xs);
		padding: var(--space-2xs);
	}

	.p-pay-sim__mode {
		flex-direction: column;
		gap: var(--space-2xs);
		min-height: 0;
		padding: 10px var(--space-xs);
		font: var(--text-paint-label-m);
	}

	/* 360px 未満は左右を詰めて「工事金額から計算」を1行に（「工事金額から／計算」と2字だけ落ちないように。2026-10-05） */
	@media (max-width: 359px) {
		.p-pay-sim__mode {
			padding-inline: var(--space-2xs);
		}
	}

	.p-pay-sim__mode-icon svg {
		width: 20px;
		height: 20px;
	}

	/* 施工事例から：写真を上・文を下、「施工事例に戻る」はその下 */
	.p-pay-sim__from-works {
		flex-direction: column;
		gap: var(--space-sm);
		align-items: stretch;
		padding: var(--space-md);
	}

	.p-pay-sim__from-works-photo {
		flex-basis: auto;
		width: 100%;
		height: 140px;
	}

	.p-pay-sim__from-works-back {
		align-self: flex-start;
	}

	.p-pay-sim .c-back-link {
		font: var(--text-paint-label-l);
	}

	.p-pay-sim__form {
		gap: var(--space-paint-card);
		padding: var(--space-xl) 18px; /* 24・18 */
	}

	.p-pay-sim__question {
		gap: var(--space-sm);
	}

	.p-pay-sim__question--count > .p-pay-sim__question-head {
		margin-bottom: var(--space-sm);
	}

	.p-pay-sim__num {
		width: 28px;
		height: 28px;
	}

	.p-pay-sim__input {
		padding: var(--space-paint-inner) var(--space-md);
	}

	/* 支払回数は3列×2 */
	.p-pay-sim__chips--count {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.p-pay-sim__chips--count .p-pay-sim__chip {
		justify-content: center;
		width: 100%;
		padding-inline: var(--space-xs);
	}

	/* 金利：題と値を1行、補足はその下 */
	.p-pay-sim__rate {
		grid-template-areas:
			"label value"
			"note note";
		gap: 6px var(--space-md);
		padding: var(--space-md);
	}

	.p-pay-sim__rate-label {
		align-self: center;
	}

	.p-pay-sim__result {
		gap: var(--space-md);
		padding: var(--space-xl) 18px;
	}

	.p-pay-sim__result-body {
		gap: var(--space-md);
	}

	.p-pay-sim__stats {
		padding: var(--space-2xs) var(--space-sm);
	}

	/* 項目名と値の間は 4（Figma 243:21156。「分割分のお支払い総額」と7桁の金額が1行に入る） */
	.p-pay-sim__stat {
		gap: 2px var(--space-2xs);
	}

	.p-pay-sim__compare-toggle {
		min-height: 48px;
		padding: 13px var(--space-lg);
	}

	.p-pay-sim__compare-table th,
	.p-pay-sim__compare-table td {
		padding-inline: 6px;
	}

	.p-pay-sim__compare-table tr > :first-child {
		padding-left: var(--space-paint-inner);
	}

	.p-pay-sim__compare-table tr > :last-child {
		padding-right: var(--space-paint-inner);
	}

	/* 「いまの条件」の札は回数の下 */
	.p-pay-sim__current-tag {
		display: block;
		width: fit-content;
		margin: var(--space-2xs) 0 0;
	}

	/* 施工事例：1列。「施工事例をすべて見る」は一覧の下 */
	.p-pay-sim-works {
		grid-template-areas:
			"heading"
			"list"
			"all";
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-lg);
		margin-top: calc(var(--space-paint-section) - var(--space-md));
	}

	.p-pay-sim-works__heading {
		gap: var(--space-sm);
	}

	.p-pay-sim-works__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.p-pay-sim-works__card .c-works-card-paint__photos {
		height: 200px;
	}

	.p-pay-sim-works__card .c-works-card-paint__badge {
		top: var(--space-sm);
		left: var(--space-sm);
		font-weight: 400;
	}

	.p-pay-sim-works__card .c-works-card-paint__body {
		gap: var(--space-sm);
		padding: var(--space-lg) var(--space-lg) var(--space-xl);
	}

	.p-pay-sim-works__spec {
		gap: var(--space-xs);
		padding: 0 var(--space-lg) var(--space-lg);
	}

	.p-pay-sim-works__all {
		justify-self: start;
	}

	/* 下の説明・よくある質問：左右は SP の 20（PC の最小 40 を使わない） */
	.p-pay-sim-guide,
	.p-pay-sim-faq {
		padding-inline: var(--pay-sim-gutter);
	}

	/* 下の説明 */
	.p-pay-sim-guide {
		gap: var(--space-2xl);
	}

	/* 表：列の幅は中身に合わせる（Figma 243:21325 は見出しも1行）。金額は途中で折り返さない */
	.p-pay-sim-guide__table {
		table-layout: auto;
	}

	.p-pay-sim-guide__table th,
	.p-pay-sim-guide__table td {
		padding: var(--space-sm) var(--space-2xs);
	}

	.p-pay-sim-guide__table td,
	.p-pay-sim-guide__table tr > :first-child {
		white-space: nowrap;
	}

	.p-pay-sim-guide__table tr > :first-child {
		padding-left: var(--space-paint-inner);
	}

	.p-pay-sim-guide__table tr > :last-child {
		padding-right: var(--space-paint-inner);
	}

	/* リンクは縦に並べる */
	.p-pay-sim-guide__links {
		flex-direction: column;
		gap: 0;
	}

	.p-pay-sim-faq {
		gap: var(--space-lg);
	}

	.p-pay-sim-faq__group {
		gap: var(--space-sm);
	}
}

/* 幅 400px 未満（320・360・375px など）：選んだ回数のチップ（✓＋「120回」）が折り返さないよう、左右と印の間を詰める
   （375px で「120回」を選ぶと「120／回」に折り返していた。2026-10-02 監視役） */
@media (max-width: 399px) {
	.p-pay-sim__chips--count .p-pay-sim__chip,
	.p-pay-sim__chips--count .p-pay-sim__chip:has(.c-chip-paint__input:checked) {
		gap: var(--space-2xs);
		padding-inline: var(--space-2xs);
	}

	.p-pay-sim__chips--count .c-chip-paint__label {
		white-space: nowrap;
	}
}