/* =========================================================
 * 見積シミュレーションフォーム（Contact Form 7）
 * 配置: /assets/css/susaki-simulation.css
 * ========================================================= */

.susaki-sim {
	max-width: 1000px;
	margin: 0 auto;
	color: var(--susaki-text, #333);
}

/* ---------- STEPタブ ---------- */
.susaki-sim__tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-bottom: 2em;
	border: 1px solid var(--susaki-key, #29A7E0);
	border-radius: 4px;
	overflow: hidden;
}
.susaki-sim__tab {
	padding: 0.9em 0.4em;
	text-align: center;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--susaki-navy, #0D5A8A);
	background: #EAF6FC;
	border-right: 1px solid var(--susaki-key, #29A7E0);
	cursor: default;
	line-height: 1.4;
}
.susaki-sim__tab:last-child {
	border-right: none;
}
.susaki-sim__tab i {
	font-style: normal;
	font-weight: normal;
	margin-right: 0.4em;
}
.susaki-sim__tab.is-active {
	background: var(--susaki-key, #29A7E0);
	color: #fff;
}
.susaki-sim__tab.is-done {
	cursor: pointer;
}
@media (max-width: 767px) {
	.susaki-sim__tabs {
		grid-template-columns: repeat(4, 1fr);
	}
	.susaki-sim__tab {
		font-size: 0.68rem;
		padding: 0.6em 0.2em;
	}
	.susaki-sim__tab i {
		display: block;
		margin: 0 0 0.1em;
		font-size: 0.9em;
	}
}

/* ---------- ステップ表示切替 ---------- */
.susaki-sim__step {
	display: none;
}
.susaki-sim__step.is-active {
	display: block;
}

/* ---------- 見出し ---------- */
.susaki-sim__h {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--susaki-text, #333);
	margin: 0 0 1.2em;
	padding: 0;
	border: none;
	background: none;
}
.susaki-sim__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	background: var(--susaki-key, #29A7E0);
	color: #fff;
	border-radius: 4px;
	font-size: 0.9em;
}
@media (max-width: 767px) {
	.susaki-sim__h {
		font-size: 1.05rem;
	}
}

.susaki-sim__sub {
	font-size: 0.85rem;
	color: var(--susaki-text-sub, #666);
	margin: 0 0 0.6em;
	font-weight: bold;
}
.susaki-sim__sub--inline {
	margin: 0;
	white-space: nowrap;
}
.susaki-sim__note {
	font-size: 0.75rem;
	color: var(--susaki-text-sub, #666);
	line-height: 1.6;
	margin: 0.5em 0 1.5em;
}

/* =========================================================
 * カード型ラジオボタン（CF7の出力を上書き）
 * ========================================================= */
.susaki-sim__cards .wpcf7-list-item {
	margin: 0;
}
.susaki-sim__cards .wpcf7-radio {
	display: grid;
	gap: 12px;
	margin-bottom: 1.8em;
}
.susaki-sim__cards--plan .wpcf7-radio,
.susaki-sim__cards--icon .wpcf7-radio {
	grid-template-columns: repeat(3, 1fr);
}
.susaki-sim__cards--half .wpcf7-radio {
	grid-template-columns: repeat(2, 1fr);
	max-width: 520px;
}
@media (max-width: 767px) {
	.susaki-sim__cards--plan .wpcf7-radio,
	.susaki-sim__cards--icon .wpcf7-radio {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* カード本体 */
.susaki-sim__cards .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: 100%;
	height: 100%;
	padding: 1em 0.9em;
	background: #fff;
	border: 2px solid var(--susaki-orange, #FF8C1A);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}
.susaki-sim__cards .wpcf7-list-item label:hover {
	background: #FFF6EC;
}

/* 選択中 */
.susaki-sim__cards .wpcf7-list-item.is-checked label {
	background: #FDEBD8;
	box-shadow: 0 0 0 1px var(--susaki-orange, #FF8C1A) inset;
}

/* ラジオ本体をカスタム円に */
.susaki-sim__cards input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 50%;
	background: #D8D8D8;
	position: relative;
	cursor: pointer;
}
.susaki-sim__cards input[type="radio"]:checked {
	background: #fff;
	border: 2px solid #1BA04A;
}
.susaki-sim__cards input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #1BA04A;
}

/* ラベル文字 */
.susaki-sim__cards .wpcf7-list-item-label {
	flex-grow: 1;
	font-size: 0.95rem;
	font-weight: bold;
	line-height: 1.4;
	color: var(--susaki-text, #333);
}
/* JSで分割した2行目（補足） */
.susaki-sim__cards .susaki-sim__cards-sub {
	display: block;
	font-size: 0.75rem;
	font-weight: normal;
	color: var(--susaki-text-sub, #666);
	margin-top: 0.25em;
}

/* ---------- アイコン付きカード ---------- */
.susaki-sim__cards--icon .wpcf7-list-item label {
	padding-right: 90px;
	position: relative;
	min-height: 84px;
}
.susaki-sim__cards--icon .wpcf7-list-item label::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 68px;
	height: 52px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 塗装箇所：外壁のみ／外壁と屋根／屋根のみ */
.susaki-sim__cards--kasho .wpcf7-list-item:nth-child(1) label::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52'%3E%3Cpath d='M34 6 L64 26 H4 Z' fill='%23BDBDBD'/%3E%3Crect x='12' y='26' width='44' height='22' fill='%23F5A623'/%3E%3C/svg%3E");
}
.susaki-sim__cards--kasho .wpcf7-list-item:nth-child(2) label::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52'%3E%3Cpath d='M34 6 L64 26 H4 Z' fill='%23E8912A'/%3E%3Crect x='12' y='26' width='44' height='22' fill='%23F5A623'/%3E%3C/svg%3E");
}
.susaki-sim__cards--kasho .wpcf7-list-item:nth-child(3) label::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52'%3E%3Cpath d='M34 6 L64 26 H4 Z' fill='%23F5A623'/%3E%3Crect x='12' y='26' width='44' height='22' fill='%23DDDDDD'/%3E%3C/svg%3E");
}

/* 階数：1階建て／2階建て／3階建て */
.susaki-sim__cards--kaisu .wpcf7-list-item:nth-child(1) label::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52'%3E%3Cpath d='M34 16 L62 34 H6 Z' fill='%23E8912A'/%3E%3Crect x='14' y='34' width='40' height='14' fill='%23F5A623'/%3E%3Crect x='30' y='39' width='8' height='9' fill='%23fff'/%3E%3C/svg%3E");
}
.susaki-sim__cards--kaisu .wpcf7-list-item:nth-child(2) label::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52'%3E%3Cpath d='M34 6 L62 24 H6 Z' fill='%23E8912A'/%3E%3Crect x='14' y='24' width='40' height='24' fill='%23F5A623'/%3E%3Crect x='20' y='29' width='8' height='7' fill='%23fff'/%3E%3Crect x='40' y='29' width='8' height='7' fill='%23fff'/%3E%3Crect x='30' y='40' width='8' height='8' fill='%23fff'/%3E%3C/svg%3E");
}
.susaki-sim__cards--kaisu .wpcf7-list-item:nth-child(3) label::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 52'%3E%3Cpath d='M34 2 L62 18 H6 Z' fill='%23E8912A'/%3E%3Crect x='14' y='18' width='40' height='30' fill='%23F5A623'/%3E%3Crect x='20' y='22' width='7' height='6' fill='%23fff'/%3E%3Crect x='41' y='22' width='7' height='6' fill='%23fff'/%3E%3Crect x='20' y='32' width='7' height='6' fill='%23fff'/%3E%3Crect x='41' y='32' width='7' height='6' fill='%23fff'/%3E%3Crect x='30' y='41' width='8' height='7' fill='%23fff'/%3E%3C/svg%3E");
}

/* =========================================================
 * STEP3 家の広さ
 * ========================================================= */
.susaki-sim__area {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
	align-items: start;
	margin-bottom: 1em;
}
@media (max-width: 767px) {
	.susaki-sim__area {
		grid-template-columns: 1fr;
		gap: 1.2em;
	}
}
.susaki-sim__area-fig svg {
	width: 100%;
	height: auto;
	max-width: 320px;
}

/* 単位ラジオ（横並び・小さめ） */
.susaki-sim__units .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
	margin-bottom: 1em;
}
.susaki-sim__units .wpcf7-list-item {
	margin: 0;
}
.susaki-sim__units label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
	font-size: 0.9rem;
}
.susaki-sim__units input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--susaki-key, #29A7E0);
}

/* 数値入力 */
.susaki-sim__number {
	display: flex;
	align-items: center;
	gap: 0.6em;
}
.susaki-sim__number input[type="number"] {
	width: 130px;
	padding: 0.6em 0.8em;
	font-size: 1.1rem;
	border: 1px solid #CCC;
	border-radius: 4px;
}
.susaki-sim__number-unit {
	font-size: 1rem;
	font-weight: bold;
}

/* =========================================================
 * STEP4 その他
 * ========================================================= */
.susaki-sim__skip {
	background: #FFF4E8;
	border-radius: 4px;
	padding: 1.2em;
	text-align: center;
	margin-bottom: 2em;
}
.susaki-sim__skip strong {
	display: block;
	color: var(--susaki-orange, #FF8C1A);
	font-size: 1.15rem;
	margin-bottom: 0.4em;
}
.susaki-sim__skip span {
	font-size: 0.8rem;
	color: var(--susaki-text-sub, #666);
}

.susaki-sim__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.2em;
	margin-bottom: 1.5em;
}
.susaki-sim__row select {
	padding: 0.6em 0.8em;
	font-size: 1rem;
	border: 1px solid #CCC;
	border-radius: 4px;
	min-width: 160px;
}
.susaki-sim__inline-radio .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2em;
}
.susaki-sim__inline-radio .wpcf7-list-item {
	margin: 0;
}
.susaki-sim__inline-radio label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
	font-size: 0.9rem;
}
.susaki-sim__inline-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--susaki-key, #29A7E0);
}
.susaki-sim__note--meji {
	color: var(--susaki-navy, #0D5A8A);
}

/* =========================================================
 * STEP5 お客様情報
 * ========================================================= */
.susaki-sim__contact-head {
	border: 2px solid var(--susaki-orange, #FF8C1A);
	border-radius: 4px;
	padding: 1.2em;
	text-align: center;
	margin-bottom: 2em;
}
.susaki-sim__contact-head strong {
	color: var(--susaki-orange, #FF8C1A);
	font-size: 1.15rem;
	line-height: 1.6;
}

.susaki-sim__table dl {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1em;
	align-items: center;
	margin: 0 0 1em;
}
@media (max-width: 767px) {
	.susaki-sim__table dl {
		grid-template-columns: 1fr;
		gap: 0.4em;
	}
}
.susaki-sim__table dt {
	text-align: right;
	font-weight: bold;
	font-size: 0.95rem;
}
@media (max-width: 767px) {
	.susaki-sim__table dt {
		text-align: left;
	}
}
.susaki-sim__table dd {
	margin: 0;
}
.susaki-sim__table input[type="text"],
.susaki-sim__table input[type="tel"],
.susaki-sim__table input[type="email"] {
	width: 100%;
	max-width: 420px;
	padding: 0.7em 0.9em;
	font-size: 1rem;
	border: 1px solid #CCC;
	border-radius: 4px;
}
.susaki-sim__req,
.susaki-sim__any {
	display: inline-block;
	margin-left: 0.5em;
	font-size: 0.7rem;
	font-weight: normal;
	padding: 0.15em 0.5em;
	border-radius: 3px;
	vertical-align: middle;
}
.susaki-sim__req {
	background: var(--susaki-red, #E53935);
	color: #fff;
}
.susaki-sim__any {
	background: #999;
	color: #fff;
}

.susaki-sim__privacy {
	background: #F5F5F5;
	border-radius: 4px;
	padding: 1.2em;
	margin: 2em 0;
	font-size: 0.78rem;
	line-height: 1.7;
	color: var(--susaki-text-sub, #666);
}
.susaki-sim__privacy p {
	margin: 0 0 0.8em;
}
.susaki-sim__privacy p:last-child {
	margin-bottom: 0;
}

/* =========================================================
 * ナビゲーションボタン
 * ========================================================= */
.susaki-sim__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin-top: 2.5em;
	flex-wrap: wrap;
}
.susaki-sim__next,
.susaki-sim__submit,
.susaki-sim__nav input[type="submit"] {
	min-width: 300px;
	padding: 1em 2em;
	font-size: 1.05rem;
	font-weight: bold;
	color: #fff !important;
	background: var(--susaki-orange, #FF8C1A);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity 0.2s;
}
.susaki-sim__next:hover,
.susaki-sim__nav input[type="submit"]:hover {
	opacity: 0.85;
}
.susaki-sim__prev {
	padding: 1em 1.6em;
	font-size: 0.9rem;
	color: var(--susaki-text-sub, #666);
	background: #EEE;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}
.susaki-sim__prev:hover {
	background: #E0E0E0;
}
@media (max-width: 575px) {
	.susaki-sim__next,
	.susaki-sim__nav input[type="submit"] {
		min-width: 0;
		width: 100%;
	}
	.susaki-sim__nav {
		flex-direction: column-reverse;
	}
	.susaki-sim__prev {
		width: 100%;
	}
}

/* エラー表示 */
.susaki-sim .wpcf7-not-valid-tip {
	font-size: 0.78rem;
	color: var(--susaki-red, #E53935);
	margin-top: 0.3em;
}
.susaki-sim__step-error {
	text-align: center;
	color: var(--susaki-red, #E53935);
	font-size: 0.85rem;
	font-weight: bold;
	margin-top: 0.8em;
}

/* ---------- CF7の自動整形（p・br）対策 ---------- */
.susaki-sim__tabs > p,
.susaki-sim__nav > p,
.susaki-sim__cards > p,
.susaki-sim__units > p,
.susaki-sim__inline-radio > p {
	display: contents;
}
.susaki-sim__tabs br,
.susaki-sim__nav br,
.susaki-sim__cards br,
.susaki-sim__units br,
.susaki-sim__inline-radio br {
	display: none;
}

/* ---------- お客様情報テーブルの調整 ---------- */
.susaki-sim__table dl {
	grid-template-columns: 180px 1fr;
	gap: 0.8em 1.2em;
	margin: 0 0 1.2em;
	padding: 0;
	background: none;
	border: none;
}
.susaki-sim__table dt {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5em;
}
.susaki-sim__table dd {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

/* 入力欄を広く */
.susaki-sim__table input[type="text"],
.susaki-sim__table input[type="tel"],
.susaki-sim__table input[type="email"] {
	width: 100%;
	max-width: 100%;
	padding: 0.85em 1em;
	font-size: 1rem;
}
.susaki-sim__table .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

@media (max-width: 767px) {
	.susaki-sim__table dl {
		grid-template-columns: 1fr;
		gap: 0.3em;
	}
	.susaki-sim__table dt {
		justify-content: flex-start;
	}
}

/* 必須／任意バッジ（見出し内でも改行しない） */
.susaki-sim__sub .susaki-sim__req {
	vertical-align: middle;
	margin-left: 0.5em;
}