/* ==========================================================================
   Rikon Money - 無料相談フォーム /soudan/
   375px 基準。タップ領域は 48px 以上を確保する。
   ========================================================================== */

:root { --form-line: #b9c7c6; }

.page-soudan { background: var(--bg-soft); }
.page-soudan .sticky-cta { display: none; }
body.page-soudan { padding-bottom: 0; }

.soudan-wrap {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
	padding: 20px 16px 64px;
}

/* --- 見出し -------------------------------------------------------------- */
.sf-head {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 22px 18px;
	box-shadow: var(--shadow-s);
	margin-bottom: 14px;
}
.sf-eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--teal-700);
	margin-bottom: 6px;
}
.sf-title {
	font-size: clamp(21px, 5.6vw, 27px);
	font-weight: 800;
	line-height: 1.45;
	margin-bottom: 8px;
}
.sf-lead { font-size: 15px; color: var(--ink-2); line-height: 1.8; }

.sf-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
/* このサービスのウリの3点。装飾ではなく読ませる情報なので、
   本文と同じ16pxにする。小さくすると飾りとして流し読みされる。 */
.sf-notes li {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--teal-800);
	background: var(--teal-050);
	border-radius: 999px;
	padding: 9px 16px;
}

.sf-intro { margin-bottom: 14px; font-size: 15px; color: var(--ink-2); }

/* --- 診断結果の引き継ぎ --------------------------------------------------- */
.sf-carryover {
	background: var(--peach-050);
	border: 1px solid var(--peach-200);
	border-radius: var(--radius);
	padding: 16px 16px 14px;
	margin-bottom: 14px;
}
.sf-carryover-title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.sf-carryover-lead { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.sf-carryover-detail { margin-top: 10px; }
.sf-carryover-detail summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--teal-800);
	cursor: pointer;
	list-style: none;
}
.sf-carryover-detail summary::-webkit-details-marker { display: none; }
.sf-carryover-detail summary::after {
	content: "";
	width: 8px; height: 8px;
	margin-left: 7px;
	border-right: 2px solid var(--teal-700);
	border-bottom: 2px solid var(--teal-700);
	transform: translateY(-2px) rotate(45deg);
}
.sf-carryover-detail[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.sf-carryover-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 8px 0 0;
	font-size: 13.5px;
}
.sf-carryover-list dt { color: var(--ink-3); white-space: nowrap; }
.sf-carryover-list dd { margin: 0; color: var(--ink); font-weight: 600; }

/* --- フォーム ------------------------------------------------------------ */
.sf-form {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 20px 17px 24px;
	box-shadow: var(--shadow-s);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.sf-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.sf-label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	padding: 0;
	margin-bottom: 8px;
}
.sf-required::after {
	content: "必須";
	display: inline-block;
	margin-left: 8px;
	padding: 2px 7px;
	border-radius: 3px;
	background: var(--teal-700);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	vertical-align: 2px;
}
.sf-help { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin: -4px 0 8px; }

/* 選択肢 */
.sf-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-choice-input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.sf-choice {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 11px 16px;
	background: #fcfdfd;
	border: 1.5px solid var(--form-line);
	border-radius: var(--radius);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}
.sf-choice:hover { border-color: var(--teal-100); background: var(--teal-050); }
.sf-choice-input:checked + .sf-choice {
	border-color: var(--teal-700);
	border-width: 2px;
	padding: 10px 15px;
	background: var(--teal-050);
	color: var(--teal-800);
}
.sf-choice-input:focus-visible + .sf-choice { outline: 2px solid var(--teal-600); outline-offset: 2px; }

/* 入力欄 */
.sf-row { display: flex; gap: 10px; }
.sf-row > * { flex: 1 1 0; min-width: 0; }

.sf-input {
	width: 100%;
	min-height: 52px;
	padding: 13px 14px;
	background: #fcfdfd;
	border: 1.5px solid var(--form-line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 16px;   /* iOSの自動ズームを防ぐため16px以上 */
	color: var(--ink);
}
.sf-input::placeholder, .sf-textarea::placeholder { color: #90a0a0; }
.sf-input:focus, .sf-textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--teal-700);
	box-shadow: 0 0 0 3px rgba(22, 100, 95, .13);
}

/* select はネイティブの矢印が消えるため、自前で付ける */
.sf-select {
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2316645f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}

.sf-textarea {
	width: 100%;
	padding: 13px 14px;
	background: #fcfdfd;
	border: 1.5px solid var(--form-line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
	resize: vertical;
}

/* 同意 */
.sf-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 48px;
	padding: 13px 14px;
	background: var(--bg-soft);
	border: 1.5px solid var(--form-line);
	border-radius: var(--radius);
	font-size: 14.5px;
	line-height: 1.7;
	cursor: pointer;
}
.sf-consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--teal-700); }

/* ハニーポット */
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* エラー */
.sf-errors {
	background: #fdecea;
	border: 1px solid #f0b7b0;
	border-radius: var(--radius);
	padding: 13px 15px;
	color: #8c2f26;
	font-size: 14px;
}
.sf-errors ul { display: flex; flex-direction: column; gap: 5px; }
.sf-errors li { position: relative; padding-left: 15px; line-height: 1.6; }
.sf-errors li::before { content: "・"; position: absolute; left: 0; }

/* 送信 */
.sf-submit {
	width: 100%;
	min-height: 58px;
	padding: 15px 22px;
	background: var(--teal-700);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s ease;
}
.sf-submit:hover { background: var(--teal-800); }
.sf-submit:disabled { background: #b9c4c3; cursor: not-allowed; }
/* 2文になるので中央寄せをやめる。折り返しの行頭が揃わないと読みにくい。 */
.sf-submit-note {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ink-3);
	margin-top: -8px;
}

/* 完了 */
.sf-done {
	background: #fff;
	border: 1px solid var(--teal-100);
	border-radius: var(--radius-l);
	padding: 30px 20px;
	text-align: center;
	box-shadow: var(--shadow-s);
}
.sf-done-title { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.sf-done p { font-size: 15px; color: var(--ink-2); line-height: 1.8; }
.sf-done-back {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--teal-700);
}

/* --- タブレット以上 ------------------------------------------------------ */
@media (min-width: 700px) {
	.soudan-wrap { padding: 34px 24px 80px; }
	.sf-head, .sf-form { padding: 30px 28px; }
	.sf-submit { width: auto; min-width: 320px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-choice, .sf-submit { transition: none; }
}

/* --- お問い合わせページ --------------------------------------------------- */
.cf-notice {
	background: var(--teal-050);
	border: 1px solid var(--teal-100);
	border-radius: var(--radius);
	padding: 15px 16px;
	margin-bottom: 14px;
}
.cf-notice p { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.cf-notice-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 6px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--teal-800);
	text-decoration: none;
}
.cf-notice-link::after {
	content: "";
	width: 7px; height: 7px;
	margin-left: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.cf-notice-link:hover { text-decoration: underline; }

.contact-page .breadcrumb { margin-bottom: 8px; }

/* --- サンクスページ ---
 * 送信後に実際に遷移する。広告のタグはURLが変わらないと発火しない。 */
.sf-thanks {
	margin-top: 20px;
	padding: 22px 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.sf-thanks > p {
	font-size: 16px;
	line-height: 1.95;
	color: var(--ink-2);
}
.sf-thanks > p + p { margin-top: 10px; }
.sf-thanks-id {
	margin-top: 18px;
	padding: 14px 16px;
	background: var(--teal-050);
	border: 1px solid var(--teal-100, #d9ebe9);
	border-radius: var(--radius);
}
.sf-thanks-id-label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--teal-800);
}
.sf-thanks-id-value {
	margin-top: 4px;
	/* 控えるために読み上げたり書き写したりする。等幅にして 0 と O を見分けやすくする。 */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ink);
	/* 長押しで選べるように、選択を妨げない。 */
	user-select: all;
	overflow-wrap: anywhere;
}
.sf-thanks-id-note {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.75;
	color: var(--ink-2);
}
.sf-thanks-title {
	margin-top: 24px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.6;
	color: var(--ink);
}
.sf-thanks-list,
.sf-thanks-links {
	margin-top: 10px;
	padding-left: 20px;
}
.sf-thanks-list li,
.sf-thanks-links li {
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--ink-2);
}
.sf-thanks-links li + li { margin-top: 6px; }
.sf-thanks-links a { color: var(--teal-700); }
.sf-thanks .sf-done-back { margin-top: 24px; }

/* --- 無料相談の流れ ---
 * トップの「無料診断の流れ」と同じ部品を使う。文言と役割は違うが、
 * 見え方をそろえて同じサイトの続きだと分かるようにする。 */
.sf-flow {
	margin: 28px 0 4px;
	padding: 24px 18px 22px;
	background: var(--teal-050);
	border-radius: var(--radius);
}
.sf-flow .section-title { font-size: 21px; }
.sf-flow .section-lead {
	margin-top: 6px;
	font-size: 14.5px;
}
.sf-flow .step-grid { margin-top: 18px; }
.sf-flow .step-note { margin-top: 16px; }
@media (min-width: 900px) {
	.sf-flow { padding: 30px 26px 26px; }
}