@charset "utf-8";
/* ==================================================
   債務整理診断シミュレーター（分岐版）
   司法書士法人 浜松町歩法務事務所
   ベース: saimu.online / css/saimu_sim/style.css
================================================== */

/* --------------------------------------------------
   cmn
-------------------------------------------------- */
html { font-size: 62.5%; }

body {
	background: #e5edf6;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	font-size: 2rem;
	line-height: 2em;
	position: relative;
	margin: 0;
	padding: 0;
	color: #111;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* このリセットは診断シミュレーターのページ専用。
   WordPress では該当ページテンプレートでのみ読み込むこと。 */
header, nav, div, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd,
img, table, tr, td, th, input, textarea, select, a, figure, label, button,
:before, :after {
	box-sizing: border-box;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 100%;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.8em; font-weight: bold; }
p { margin-bottom: 1.2em; line-height: 2em; }
p:last-child { margin-bottom: 0; }

input, textarea, select, button { font-family: inherit; }

a {
	text-decoration: none;
	color: inherit;
	transition: all .3s;
	outline: none;
}
a:hover { opacity: .6; }
img { max-width: 100%; height: auto; vertical-align: middle; }

.wrap {
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.txt-s   { font-size: 87.5%; }
.txt-l   { text-align: left; }
.txt-red { color: #e10000; font-weight: bold; }
.none    { display: none !important; }

/* --------------------------------------------------
   head
-------------------------------------------------- */
.site-header {
	color: #171c61;
	padding: 1em 0;
	position: relative;
	min-height: 130px;
}
.site-header .site-title {
	font-weight: bold;
	line-height: 1.4em;
	display: inline-block;
	font-size: 1.6rem;
	margin: 0;
	max-width: 62%;
}
.site-header .site-title .txt {
	display: block;
	margin-top: 10px;
	background: #fff;
	text-align: center;
	padding: 5px;
	border-radius: 50px;
	font-size: 90%;
}
.site-header .img-box {
	position: absolute;
	top: 10px;
	right: 3%;
	width: 150px;
	height: 140px;
	overflow: hidden;
}

/* --------------------------------------------------
   foot
-------------------------------------------------- */
.foot-box {
	font-size: 75%;
	text-align: center;
	margin-top: 1.5em;
	padding-bottom: 2em;
	font-weight: bold;
}
.foot-box ul.link { margin: 0 0 .5em; font-size: 1.4rem; }
.foot-box ul.link a { margin: 0 .5em; text-decoration: underline; }
.foot-box address { font-style: normal; font-size: 1.2rem; line-height: 1.8em; }

/* --------------------------------------------------
   質問セクション
-------------------------------------------------- */
.sim-box { padding-top: 14px; }

/* .count が上にはみ出すので overflow:hidden は付けないこと */
.sec {
	display: none;
	background: #fff;
	text-align: center;
	border-radius: 0 0 10px 10px;
}
.sec.is-active { display: block; animation: secIn .4s both; }

@keyframes secIn {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sec.is-active { animation: none; }
}

.sec .inner { padding: 6% 5%; }

.tit-box { background: #171c61; position: relative; }
.tit-box .count {
	background: #171c61;
	display: inline-block;
	position: absolute;
	top: -34px;
	left: 0;
	color: #fff;
	font-weight: bold;
	line-height: 1em;
	font-size: 87.5%;
	padding: 12px 20px 16px;
	border-radius: 10px 10px 0 0;
}
.tit-box .count .num {
	font-size: 150%;
	color: #fcf351;
	vertical-align: -1px;
	display: inline-block;
	min-width: .8em;
}
.tit01 {
	font-size: 140%;
	line-height: 1.4em;
	color: #fff;
	padding: 25px 15px;
	margin: 0;
}
.sec .lead {
	font-size: 82.5%;
	line-height: 1.6em;
	margin: 0 0 1em;
	color: #555;
}
/* 「複数社借りている場合は〜」の注意書き（xlsx 指定：赤字／目立つように） */
.sec .lead-attention {
	color: #e10000;
	font-weight: bold;
	font-size: 95%;
	line-height: 1.5em;
	background: #fff2f2;
	border: 1px solid #f2b8b8;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 .8em;
}

/* 選択肢 */
.check-box .line-1 li { margin-bottom: 10px; }
.check-box .line-1 li:last-child { margin-bottom: 0; }
/* キーボード操作を残したいので display:none ではなく視覚的に隠すだけ */
.check-box input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}
.check-box label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	border-bottom: 5px solid #ca1c79;
	background: #d4638a;
	color: #fff;
	border-radius: 10px;
	padding: 12px 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.35em;
	letter-spacing: 1px;
	font-size: 100%;
	min-height: 70px;
	transition: .2s;
}
.check-box label:hover { background: #c9547c; }
.check-box label:active { transform: translateY(2px); border-bottom-width: 3px; }
.check-box label:focus-within { outline: 3px solid #171c61; outline-offset: 2px; }

/* 数値入力 */
.inputtxt-box { display: inline-block; margin-top: .5em; }
.inputtxt-box .txt-s { font-weight: bold; margin: 0 0 0 5px; font-size: 130%; }
input[type=text],
input[type=number],
input[type=email],
input[type=tel] {
	width: 100%;
	border-radius: 0;
	border: #111 2px solid;
	padding: 5px 10px;
	height: 50px;
	font-size: 16px;
	line-height: 2em;
	background: #f8f8f8;
	vertical-align: bottom;
}
.inputtxt-box input[type=number] {
	width: 200px;
	height: 60px;
	font-size: 150%;
	text-align: center;
	-moz-appearance: textfield;
}
.inputtxt-box input[type=number]::-webkit-outer-spin-button,
.inputtxt-box input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}

.btn {
	display: block;
	cursor: pointer;
	border: none;
	border-bottom: 6px solid #ca1c79;
	margin: 20px auto 0;
	background: #d4638a;
	color: #fff;
	border-radius: 10px;
	padding: 0 10px;
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	transition: .2s;
	max-width: 350px;
	width: 100%;
	height: 70px;
	font-family: inherit;
}
.btn:hover { background: #c9547c; }
.btn:active { transform: translateY(2px); border-bottom-width: 4px; }

.back {
	display: inline-block;
	margin-top: 22px;
	background: none;
	border: none;
	color: #555;
	font-size: 80%;
	font-family: inherit;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px 8px;
}
.back:hover { color: #171c61; }
.back[hidden] { display: none; }

/* エラー */
.err {
	display: none;
	color: #e10000;
	font-weight: bold;
	font-size: 80%;
	line-height: 1.6em;
	margin: 8px 0 0;
	text-align: left;
}
.err.is-show { display: block; }
.sec .err { text-align: center; }   /* 質問セクション内は中央寄せ */
.has-err input[type=text],
.has-err input[type=number],
.has-err input[type=email],
.has-err input[type=tel] { border-color: #e10000; background: #fff5f5; }

/* --------------------------------------------------
   診断結果
-------------------------------------------------- */
.result-box {
	display: none;
	background: #fff;
	border-radius: 10px;
	margin: 5% 0;
	padding: 3.5%;
}
.result-box.is-show { display: block; }

.result-txt-box {
	text-align: center;
	border: 2px solid #171c61;
	border-radius: 10px;
	overflow: hidden;
	font-size: 2.4rem;
	font-weight: bold;
	opacity: 0;
	transform: translateY(12px);
	transition: all .6s;
}
.result-txt-box.is-in { opacity: 1; transform: translateY(0); }
.result-txt-box h2 {
	background: #171c61;
	color: #fff;
	font-size: 120%;
	padding: 16px 10px;
	text-align: center;
	line-height: 1.3em;
	margin: 0;
}
.result-txt-box .inner { padding: 5% 4%; }

.result-item { display: none; }
.result-item.is-current { display: block; }

.result-item .headline {
	font-size: 100%;
	line-height: 1.5em;
	color: #171c61;
	text-align: center;
	margin: 0 0 .8em;
	padding-bottom: .6em;
	border-bottom: 2px dotted #cfd8e6;
}
.result-item .body {
	text-align: left;
	font-size: 66%;
	font-weight: normal;
	line-height: 1.9em;
}
.result-item .body p { margin-bottom: 1em; }
.result-item .body ul { margin: 0 0 1em; }
.result-item .body ul li {
	position: relative;
	padding-left: 1.1em;
	line-height: 1.8em;
}
.result-item .body ul li:before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
.result-item .body .numlist { margin: 0 0 1em; }
.result-item .body .numlist li {
	padding-left: 1.2em;
	text-indent: -1.2em;
	line-height: 1.8em;
	font-weight: bold;
}
.result-item .body .numlist li:before { content: none; }
.result-item .body .marker {
	background: linear-gradient(transparent 60%, #fcf351 40%);
	font-weight: bold;
}
.result-item .body .strong { color: #e10000; font-weight: bold; }
/* 「任意整理」などをオレンジで目立たせる（★ 2026-09-15 R6・R7 の本文で使用） */
.result-item .body .strong-orange { color: #e8710a; font-weight: bold; }
.result-item .body .example {
	background: #fff9d6;
	border: 1px dashed #d8c96a;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 1em;
	line-height: 1.7em;
}
.result-item .body .last { margin-bottom: 0; }

/* --------------------------------------------------
   解決事例／手続きの流れの画像
   文言が焼き込まれた支給画像。原寸のまま幅いっぱいに置く。
-------------------------------------------------- */
.result-fig {
	margin: 16px 0 0;
	padding: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.result-fig img { display: block; width: 100%; height: auto; }
.result-txt-box .result-fig { margin-bottom: -2px; }   /* 枠の内側にぴったり収める */

/* 手続きの流れ（診断結果ごとに1枚。R1・R4 には出ない） */
.result-flow { display: none; }
.result-flow.is-show { display: block; }
.result-flow .flow-item { display: none; }
.result-flow .flow-item.is-current { display: block; }
.flow-lead {
	text-align: center;
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 1.5em;
	color: #14432a;
	margin: 28px 0 0;
	padding-top: 22px;
	border-top: 2px dotted #cfd8e6;
}
.result-flow .subnote {
	border: 1px solid #cfd8e6;
	border-radius: 8px;
	padding: 14px 16px;
	margin-top: 16px;
	background: #fff;
	font-size: 1.5rem;
	line-height: 1.9em;
	text-align: left;
}
.result-flow .subnote-tit {
	font-weight: bold;
	color: #14432a;
	margin-bottom: .4em;
}
.result-flow .subnote .last { margin-bottom: 0; }

/* 手続きの流れ（ロードマップ） */
.result-item .body .roadmap {
	position: relative;
	margin: 0 0 1.2em;
	padding: 14px 12px 14px 14px;
	background: #f4f7fc;
	border-radius: 8px;
	counter-reset: rm;
}
.result-item .body .roadmap li {
	position: relative;
	padding: 0 0 14px 22px;
	line-height: 1.6em;
}
.result-item .body .roadmap li:before {
	content: "";
	position: absolute;
	left: 4px;
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #171c61;
}
/* 縦線 */
.result-item .body .roadmap li:after {
	content: "";
	position: absolute;
	left: 8px;
	top: 15px;
	bottom: 0;
	width: 1px;
	background: #b9c4dc;
}
.result-item .body .roadmap li:last-child { padding-bottom: 0; }
.result-item .body .roadmap li:last-child:after { content: none; }
.result-item .body .roadmap .rm-tit {
	display: block;
	font-weight: bold;
	color: #171c61;
}
.result-item .body .roadmap .rm-txt {
	display: block;
	font-size: 92%;
	color: #555;
	line-height: 1.6em;
}
.result-item .body .roadmap .rm-goal:before {
	background: #e10000;
	width: 13px;
	height: 13px;
	left: 2px;
	top: 4px;
}
.result-item .body .roadmap .rm-goal .rm-tit { color: #e10000; font-size: 115%; }

/* ✔️ の箇条書き */
.result-item .body .checklist { margin: 0 0 1.2em; }
.result-item .body .checklist li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: .3em;
	line-height: 1.7em;
	font-weight: bold;
}
.result-item .body .checklist li:before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 0;
	color: #1a9c3d;
	font-weight: bold;
}

/* 補足ブロック（任意整理という選択肢もある旨） */
.result-item .body .subnote {
	border: 1px solid #cfd8e6;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 0;
	background: #fff;
}
.result-item .body .subnote-tit {
	font-weight: bold;
	color: #171c61;
	margin-bottom: .4em;
}

/* リード（黄色下線アニメ） */
.copy {
	text-align: center;
	line-height: 1.5em;
	margin: 14px 0 15px;
	display: none;
	width: 100%;
	font-size: 2rem;
}
.copy.is-show { display: inline-block; }
.copy .inner { opacity: 0; transform: translateY(15px); }
.copy .inner.is-in { opacity: 1; transform: translateY(0); transition: all .3s; }
.copy .border { position: relative; z-index: 10; display: inline-block; }
.copy .border:after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 10px;
	background: #fdf559;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .5s;
	z-index: -1;
}
.copy .border.on:after { transform: scale(1, 1); }

/* --------------------------------------------------
   CTA（① 電話 ／ ② フォーム ／ ③ LINE）
   診断結果ごとに data-cta-set で出し分ける。表示は JS が is-on を付けて制御。
-------------------------------------------------- */
[data-cta] { display: none; }
[data-cta].is-on { display: block; width: 100%; }

.cta {
	text-align: center;
	margin-top: 18px;
	opacity: 0;
	transform: translateY(15px);
}
.cta.is-show { opacity: 1; transform: translateY(0); transition: all .3s; }
.cta .cta-lead {
	font-size: 90%;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0 0 10px;
	color: #14432a;
}

/* ボタン本体：支給画像（CTA①②③.png のボタン部分を切り出したもの）をそのまま使う。
   上のリード文は診断結果ごとに変わるため、画像には含めず HTML 側に置いている。 */
.cta-img {
	display: block;
	width: 100%;
	line-height: 0;
	transition: transform .15s;
}
.cta-img img { display: block; width: 100%; height: auto; }
.cta-img:active { transform: translateY(3px); }
.cta-img:hover  { opacity: .85; }
.cta-img-tel { animation: rect 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cta-img-tel { animation: none; } }

/* CTA③の文字ボタン　★2026-09-02
   R1・R4 は文言が「LINEから無料相談を申し込む」に変わり支給画像と合わなくなるため、
   js/sim.js が .is-text を付けて画像→文字ボタンに切り替えます
   （送信ボタンの .submit-wrap.is-img と同じ考え方です）。
   通常の結果では下の .cta-line-text は出しません。 */
.cta-line-text { display: none; }
.cta-img.is-text img { display: none; }
.cta-img.is-text .cta-line-text {
	display: block;
	position: relative;
	width: 100%;
	padding: 22px 58px 40px;
	border-radius: 999px;
	color: #fff;
	line-height: 1.3;
	text-align: center;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 2l8 8-8 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center / 13px 21px,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Ccircle cx='27' cy='27' r='27' fill='%23fff'/%3E%3Cpath d='M27 15c-7.2 0-13 4.5-13 10.1 0 5 4.6 9.2 10.9 10 .4.1 1 .3 1.1.6.1.3.1.7 0 1l-.2 1c-.1.3-.3 1.2 1.1.7 1.4-.6 7.4-4.4 10.1-7.5 1.9-2 2.8-4.1 2.8-5.8C39.8 19.5 34 15 27 15z' fill='%2306c755'/%3E%3C/svg%3E") no-repeat left 14px center / 54px 54px,
		linear-gradient(#1fd466, #00b54c);
	min-height: 88px;
	box-sizing: border-box;
}
.cta-img.is-text .cta-line-text .t {
	display: block;
	font-size: 118%;
	font-weight: bold;
	letter-spacing: .5px;
}
/* 副文（画像の「トークで質問もOK」と同じ位置にボタンへ重ねる） */
.cta-img.is-text .cta-line-text em {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	font-style: normal;
	font-size: 1.3rem;
	font-weight: normal;
}
.cta-img.is-text { animation: rect 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cta-img.is-text { animation: none; } }

/* ↓ 画像CTAに置き換える前の、CSSで描いたボタン。
   画像を使わない構成に戻したいときのために残してあります（現在は未使用）。 */
.cta .cta-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 88px;
	border-radius: 999px;
	color: #fff;
	font-weight: bold;
	line-height: 1.25em;
	padding: 12px 46px 12px 14px;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
	transition: .2s;
}
.cta .cta-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }

.cta .cta-ico {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff no-repeat center center;
	background-size: 26px 26px;
}
.cta .cta-btn-body { flex: 1 1 auto; text-align: center; }
.cta .cta-btn-main {
	display: block;
	font-size: 125%;
	letter-spacing: .5px;
}
.cta .cta-btn-sub {
	display: block;
	font-size: 78%;
	font-weight: normal;
	margin-top: 5px;
	letter-spacing: 0;
}
.cta .cta-free {
	display: inline-block;
	background: #fff;
	border-radius: 6px;
	padding: 0 7px;
	margin-right: 8px;
	font-size: 76%;
	vertical-align: 2px;
}
.cta .cta-arw {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 13px;
	height: 13px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* CTA①：電話（オレンジ） */
.cta-btn-tel {
	background: linear-gradient(#f3a022, #e38100);
	animation: rect 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .cta-btn-tel { animation: none; } }
.cta-btn-tel .cta-free { color: #e38100; }
.cta-btn-tel .cta-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e38100'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

/* CTA②：フォーム（クリムゾン）。2回目はフォームへスクロールするリンク */
.cta-btn-form { background: linear-gradient(#f93b62, #e3164d); }
.cta-btn-form .cta-free { color: #e3164d; }
.cta-btn-form .cta-ico {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e3164d'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.2-8 5-8-5V6.3l8 5 8-5v1.9z'/%3E%3C/svg%3E");
}

/* CTA③：LINE（グリーン） */
.cta-btn-line { background: linear-gradient(#16ce60, #00b64d); }
.cta-btn-line .cta-ico {
	background-size: 28px 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300b64d'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.2 7.9.3.1.7.2.8.5.1.3.1.7 0 1l-.1.8c0 .3-.2 1 .9.6 1.1-.5 5.9-3.5 8-6C21.4 14.3 22 12.8 22 11c0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E");
}

.cta .cta-note { font-size: 1.2rem; margin: 10px 0 0; color: #555; }
.cta .cta-note a { text-decoration: underline; }

/* 2回目の CTA（手続きの流れのあと） */
.cta.cta-repeat { margin-top: 16px; }
.result-flow .cta.cta-repeat:first-of-type { margin-top: 22px; }

/* --------------------------------------------------
   入力フォーム（CTA②）
-------------------------------------------------- */
.form-list { margin-top: 18px; }
.form-list .inner { opacity: 0; transform: translateY(15px); }

/* --------------------------------------------------
   フォームの2段階表示　★2026-09-01
   最初は「開くボタン」だけを見せ、押されたら
   見出し・入力欄・送信ボタンを出す（.form-list に is-open が付く）。
   2回目のCTA②（フォームへ）は、開いたあとは役目を終えるので隠す。
-------------------------------------------------- */
.form-list .cta-form-tit,
.form-list .box,
.form-list .submit-wrap { display: none; }

.form-list.is-open .cta-form-tit,
.form-list.is-open .box,
.form-list.is-open .submit-wrap { display: block; }

.form-list .form-open { display: block; }
.form-list.is-open .form-open { display: none; }

.cta.is-hidden { display: none !important; }
.form-list .inner.is-in { opacity: 1; transform: translateY(0); transition: all .3s; }
.form-list p { font-weight: bold; margin: 0 0 10px; line-height: 1.4em; font-size: 90%; }
.form-list .cta-form-tit {
	text-align: center;
	font-size: 110%;
	color: #171c61;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #171c61;
}
.form-list select {
	width: 100%;
	border-radius: 0;
	border: #111 2px solid;
	padding: 5px 10px;
	height: 50px;
	font-size: 16px;
	line-height: 2em;
	background: #f8f8f8;
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
	background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.has-err select { border-color: #e10000; background-color: #fff5f5; }
.form-list .box { margin-bottom: 1em; }
.form-list .req {
	background: #e10000;
	color: #fff;
	font-size: 70%;
	border-radius: 3px;
	padding: 2px 6px;
	margin-left: 6px;
	vertical-align: 2px;
}

.modal-box { position: relative; }
.modal-box .area-check { cursor: pointer; background: #f8f8f8; }
.modal-box .area-open {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: none;
	border: none;
	font-size: 0;
}
.modal-box .area-open:after {
	content: ">";
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%) rotate(90deg);
	display: block;
	line-height: 1em;
	font-size: 2.2rem;
	color: #111;
}

/* 送信ボタン（2段目・「入力した内容で申し込む」）。
   支給画像 sim-cta-form2.webp をそのままボタンにします（.submit-wrap.is-img）。
   ★2026-09-01：is-img が付くのは js/sim.js が下記2つを確認できたときだけです。
     ・sim-cta-form2.webp が実際に読み込めた（用意されていない間は下の文字ボタンのまま）
     ・data-cta-submit の文言が .submit-wrap の data-img-label と一致している
   縦横比は画像の実寸から JS が入れ直すので、下の aspect-ratio は読み込み前の暫定値です。 */
.submit-wrap.is-img input[type="submit"],
.submit-wrap.is-img button {
	width: 100%;
	aspect-ratio: 1200 / 221;
	min-height: 0;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-size: 0;
	color: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	background: url("../img/sim-cta-form2.webp") no-repeat center center;
	background-size: 100% auto;
}
.submit-wrap.is-img input[type="submit"]:active,
.submit-wrap.is-img button:active { transform: translateY(3px); box-shadow: none; }
/* 画像ボタンのときは、副文が画像に入っているのでHTML側は隠す */
.submit-wrap.is-img .submit-note { display: none; }
@supports not (aspect-ratio: 1 / 1) {
	.submit-wrap.is-img input[type="submit"],
	.submit-wrap.is-img button { height: 0; padding-top: 18.42%; }
}

/* 文字ボタン（画像に無い文言のとき用。支給画像に寄せたクリムゾンのピル型） */
.submit { text-align: center; }
.submit button,
.submit input[type="submit"] {
	text-align: center;
	cursor: pointer;
	border: none;
	margin: 0 auto;
	color: #fff;
	border-radius: 999px;
	padding: 22px 58px 40px;
	font-size: 118%;
	font-weight: bold;
	line-height: 1.3;
	transition: .2s;
	width: 100%;
	min-height: 88px;
	-webkit-appearance: none;
	letter-spacing: .5px;
	font-family: inherit;
	box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 2l8 8-8 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center / 13px 21px,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Ccircle cx='27' cy='27' r='27' fill='%23fff'/%3E%3Crect x='14' y='19' width='26' height='17' rx='2.5' fill='%23e3164d'/%3E%3Cpath d='M15 21l12 8.5L39 21' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 14px center / 54px 54px,
		linear-gradient(#f93b62, #e3164d);
}
.submit button:active,
.submit input[type="submit"]:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
/* 副文（画像の「24時間ご予約受付中」と同じ位置にボタンへ重ねる） */
.submit .submit-note {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	margin: 0;
	color: #fff;
	font-size: 1.3rem;
	font-weight: normal;
	line-height: 1.3;
	pointer-events: none;
}
.submit-wrap { position: relative; animation: rect 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .submit-wrap { animation: none; } }
@keyframes rect {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-6px); }
	50%      { transform: translateX(0); }
	75%      { transform: translateX(6px); }
}

.privacy-note {
	font-size: 1.2rem;
	line-height: 1.7em;
	text-align: center;
	margin-top: 12px;
	color: #555;
}
.privacy-note a { text-decoration: underline; }

/* 回答を送信用に控えるエリア */
.form-input { display: none; }

/* --------------------------------------------------
   都道府県モーダル
-------------------------------------------------- */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: rgba(23, 28, 97, .75);
	padding: 20px 10px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.modal.is-open { display: block; }
.modal .modal-panel {
	background: #fff;
	max-width: 560px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.modal h3 {
	margin: 0;
	text-align: center;
	background: #171c61;
	color: #fff;
	font-size: 1.8rem;
	padding: 16px 40px;
	line-height: 1.4em;
}
.modal .modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 38px;
	height: 38px;
	border: none;
	background: none;
	color: #fff;
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}
.area-box .tit {
	line-height: 1em;
	margin: -1px 0 0;
	background: #eee;
	padding: 13px 10px;
	text-align: center;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	color: #777;
	font-size: 1.4rem;
}
.area-group { display: flex; flex-wrap: wrap; }
.area-group .radio-label {
	width: 50%;
	line-height: 1em;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 18px 12px 18px 16px;
	font-weight: bold;
	font-size: 1.5rem;
	cursor: pointer;
}
.area-group .radio-label:nth-child(even) { border-right: none; }
.radio-input { opacity: 0; appearance: none; position: absolute; }
.radio-txt { position: relative; display: block; text-align: left; padding-left: 28px; }
.radio-txt:before {
	content: '';
	display: block;
	border-radius: 50%;
	position: absolute;
	top: -1px;
	left: 0;
	background: #ddd;
	width: 20px;
	height: 20px;
	border: 1px solid #bbb;
}
.radio-input:checked + .radio-txt:after {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	display: block;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	background-color: #f09c03;
}

/* --------------------------------------------------
   sp
-------------------------------------------------- */
@media screen and (max-width: 767px) {
	body { font-size: 15px; }
	.main-content { padding: 0 5%; }
	.site-header { padding: 10px 0; min-height: 120px; }
	.site-header .site-title { font-size: 1.2rem; }
	.site-header .img-box { width: 120px; height: 120px; }
	p { margin-bottom: .5em; }
	.tit01 { font-size: 120%; padding: 20px 12px; }
	.check-box label { font-size: 95%; min-height: 60px; }
	.check-box .line-1 li { margin-bottom: 8px; }
	.btn { max-width: 260px; margin: 16px auto 0; font-size: 95%; height: 60px; }
	.result-txt-box { font-size: 1.8rem; }
	.result-txt-box h2 { font-size: 100%; padding: 12px 8px; }
	.result-item .body { font-size: 78%; line-height: 1.85em; }
	.copy { font-size: 1.6rem; }
	.cta .cta-btn { min-height: 78px; padding: 10px 38px 10px 10px; gap: 8px; }
	.cta .cta-ico { width: 46px; height: 46px; background-size: 23px 23px; }
	.cta .cta-btn-main { font-size: 112%; letter-spacing: 0; }
	.cta .cta-btn-sub { font-size: 74%; }
	.cta .cta-free { margin-right: 5px; }
	.cta .cta-arw { right: 15px; width: 11px; height: 11px; }
	.flow-lead { font-size: 1.4rem; margin-top: 22px; padding-top: 18px; }
	.result-flow .subnote { font-size: 1.3rem; line-height: 1.8em; padding: 12px 13px; }
	.result-item .body .roadmap { padding: 12px 10px 12px 12px; }
	.form-list p { margin: 0 0 5px; }
	.submit button, .submit input[type="submit"] {
		padding: 20px 44px 34px 52px;
		font-size: 108%;
		letter-spacing: 0;
		min-height: 78px;
		background-position: right 15px center, left 10px center, 0 0;
		background-size: 11px 18px, 46px 46px, auto;
	}
	.submit .submit-note { bottom: 17px; font-size: 1.15rem; }
	.cta-img.is-text .cta-line-text {
		padding: 20px 44px 34px 52px;
		min-height: 78px;
		background-position: right 15px center, left 10px center, 0 0;
		background-size: 11px 18px, 46px 46px, auto;
	}
	.cta-img.is-text .cta-line-text .t { font-size: 108%; letter-spacing: 0; }
	.cta-img.is-text .cta-line-text em { bottom: 17px; font-size: 1.15rem; }
	.foot-box address { font-size: 1rem; line-height: 1.8em; }
	.area-group .radio-label { font-size: 1.4rem; padding: 16px 8px 16px 12px; }
}

@media screen and (max-width: 340px) {
	.site-header .img-box { width: 100px; height: 100px; }
	.tit01 { font-size: 110%; }
	.check-box label { font-size: 88%; letter-spacing: 0; }
	.result-txt-box h2 { font-size: 88%; }
	.copy { font-size: 1.4rem; }
}