@charset "utf-8";
/*
 * 自動見積もりシミュレーター（page-mitsumori.php）2026-10-17
 * 旧版の simulate/css/style.css は /mitsumori/cost/ と /mitsumori/cost-preview/ が使っているので残している
 *
 * 1. ヘッダー・フッター
 * 2. 共通（背景・すりガラスの面・ボタン）
 * 3. スタート
 * 4. 質問
 * 5. 結果
 * 6. 査定中の演出（結果の前）
 * 7. AIを使った制作の案内
 * 8. 見積もり依頼のモーダル
 * 10. RFP（提案依頼書）のモーダル
 * 11. RFP（提案依頼書）作成のページ
 * 9. SP
 */

/* 1. ヘッダー・フッター
----------------------------------------------------------- */
.sm_header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	height: 90px; /* ロゴの上と、ロゴから下のカードまでを同じ余白にする。スタートと質問の画面はこの高さの真下からカードを置く（2026-10-18） */
	padding: 0 28px;
}
/* 2社のロゴを×で並べる（オルトベース × 株式会社サイシア） */
.sm_header img {
	display: block;
	width: auto;
	height: 30px;
}
.sm_header img.sm_header_sa {
	height: 19px;
}
.sm_header_x {
	position: relative;
	width: 12px;
	height: 12px;
}
.sm_header_x:before,
.sm_header_x:after {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	width: 16px;
	height: 1px;
	background: var(--font-sub);
	transform: rotate(45deg);
}
.sm_header_x:after {
	transform: rotate(-45deg);
}
.sm_footer {
	padding: 28px 20px 8px;
	border-top: 1px solid var(--border);
	background: #fff;
	font-size: 12px;
	line-height: 1.9;
	text-align: center;
	color: var(--font-sub);
}
.sm_footer a {
	text-decoration: underline;
	color: var(--font-sub);
}
#footer {
	background: #fff;
}

/* 2. 共通（背景・すりガラスの面・ボタン）
----------------------------------------------------------- */
/* 質問と結果の画面にも、スタートと同じ淡い光の背景を薄く敷く（固定。内容はすりガラスの面に載せる） */
#content.sm_page {
	position: relative;
	isolation: isolate;
	min-height: calc(100vh - 160px);
	padding: 0;
	background: none;
}
#content.sm_page:before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .78)), url("../img/sm_bg_veil.jpg") center / cover;
}
.sm_in {
	width: 92%;
	max-width: 1160px;
	margin: 0 auto;
}
.sm_hero_txt,
.sm_about,
.sm_bd,
.sm_tools,
.sm_fit,
.sm_co,
.sm_ai {
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 20px;
	background: rgba(255, 255, 255, .62);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 30px 80px rgba(11, 33, 61, .08);
	backdrop-filter: blur(18px) saturate(1.2);
}
/* 質問の画面の2枚の面。選ぶたびに中を描き直すので、背景のぼかし（backdrop-filter）は使わず、白を濃くして同じ見え方にする（重さ対策 2026-10-18） */
.sm_rail,
.sm_stage {
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 20px;
	background: rgba(255, 255, 255, .86);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 30px 80px rgba(11, 33, 61, .08);
}
/* 画面の一番上の小見出し（無料・登録不要／シミュレーションの結果）。トップの .fv_tag と同じ札の形にそろえた（2026-10-18） */
.sm_eyebrow {
	display: inline-flex;
	padding: 7px 18px;
	border-radius: 999px;
	background: var(--accent-bg);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 3px;
	color: var(--accent2);
}
.sm_about_en,
.sm_rail_lb,
.sm_card_head .gf,
.sm_ask_en,
.sm_tools_en,
.sm_fit_en,
.sm_co_en,
.sm_ai_en,
.sm_modal_en {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 3px;
	color: var(--accent2);
}
/* ボタン：右に矢印の丸 */
.sm_btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	min-width: 300px;
	height: 66px;
	padding: 0 11px 0 34px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	cursor: pointer;
	transition: background .3s, box-shadow .3s, transform .3s, opacity .3s, color .3s;
}
.sm_btn:after {
	content: "";
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px;
	transition: transform .3s;
}
.sm_btn:hover {
	transform: translateY(-2px);
}
/* a で置いたボタン（サイシアの業界別ページへ・RFPページからシミュレーターへ）は、テーマの a:hover の色と下線を打ち消す */
a.sm_btn:link,
a.sm_btn:visited,
a.sm_btn:hover {
	text-decoration: none;
}
a.sm_btn_main:link,
a.sm_btn_main:visited,
a.sm_btn_main:hover {
	color: #fff;
}
a.sm_btn_sub:link,
a.sm_btn_sub:visited,
a.sm_btn_sub:hover {
	color: var(--ink);
}
.sm_btn:hover:after {
	transform: translateX(3px);
}
.sm_btn_main {
	background: linear-gradient(135deg, var(--navy-700), var(--ink));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(11, 33, 61, .28);
	color: #fff;
}
.sm_btn_main:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 50px rgba(11, 33, 61, .34);
}
.sm_btn_main:disabled {
	box-shadow: none;
	opacity: .28;
	cursor: default;
	transform: none;
}
.sm_btn_sub {
	border: 1px solid rgba(11, 33, 61, .18);
	background: rgba(255, 255, 255, .7);
	color: var(--ink);
}
.sm_btn_sub:after {
	background-color: var(--ink);
}
.sm_btn_sub:hover {
	border-color: var(--ink);
	background: #fff;
}
.sm_nw {
	white-space: nowrap;
}
.sm_link {
	padding: 0;
	border: none;
	background: none;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(11, 33, 61, .25);
	text-underline-offset: 5px;
	color: var(--ink);
	cursor: pointer;
	transition: text-decoration-color .2s;
}
.sm_link:hover {
	text-decoration-color: var(--ink);
}
a.sm_link:link,
a.sm_link:visited {
	color: var(--ink);
}

/* 3. スタート
----------------------------------------------------------- */
.sm_intro {
	padding: 0 0 110px;
	text-align: center;
}
/* 1画面目：淡い光の背景に、すりガラスのカード（2026-10-17 C案） */
.sm_hero {
	display: flex;
	align-items: flex-start;
	min-height: 100vh;
	padding: 90px 0 64px; /* 上の90pxは背景に重ねたヘッダーの分。カードをヘッダーの真下に置き、ロゴの上下の余白をそろえる */
	background: url("../img/sm_bg_veil.jpg") center / cover;
}
.sm_hero_txt {
	width: 92%;
	max-width: 880px;
	margin: 0 auto;
	overflow: hidden;
	padding: 60px 72px 0;
}
.sm_h1 {
	margin: 28px 0 24px;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 4px;
	color: var(--ink);
	font-feature-settings: "palt";
}
.sm_h1 small {
	display: block;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 6px;
	color: var(--accent2);
}
.sm_lead {
	max-width: 540px;
	margin: 0 auto 28px;
	font-size: 15.5px;
	line-height: 2;
	color: var(--font-sub);
	word-break: auto-phrase;
}
/* 見積もりの種類（かんたん／くわしく）。選択肢と同じカードで、左に丸 */
.sm_mode {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	max-width: 600px;
	margin: 0 auto 30px;
}
.sm_mode_btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 16px 18px 16px 50px;
	border: 1px solid rgba(11, 33, 61, .12);
	border-radius: 14px;
	background: rgba(255, 255, 255, .7);
	text-align: left;
	cursor: pointer;
	transition: border-color .25s, background .25s, box-shadow .25s;
}
.sm_mode_btn:before {
	content: "";
	position: absolute;
	top: 19px;
	left: 18px;
	width: 20px;
	height: 20px;
	border: 1.5px solid rgba(11, 33, 61, .25);
	border-radius: 50%;
	background: #fff;
	transition: .25s;
}
.sm_mode_btn:hover {
	border-color: rgba(11, 33, 61, .3);
	background: #fff;
}
.sm_mode_btn[aria-pressed="true"] {
	border-color: var(--ink);
	background: #fff;
	box-shadow: 0 14px 30px rgba(11, 33, 61, .1);
}
.sm_mode_btn[aria-pressed="true"]:before {
	border: 6px solid var(--ink);
}
.sm_mode_tl {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}
.sm_mode_tx {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--font-sub);
	word-break: auto-phrase;
}
/* カードの下端に、罫線で区切った3つの数字 */
.sm_stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 56px -72px 0;
	border-top: 1px solid rgba(11, 33, 61, .08);
}
.sm_stats div {
	padding: 26px 18px 30px;
}
.sm_stats div + div {
	border-left: 1px solid rgba(11, 33, 61, .08);
}
.sm_stats dt {
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.sm_stats dt small {
	margin-left: 3px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--font-sub);
}
.sm_stats dd {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--font-sub);
	word-break: auto-phrase;
}
.sm_about {
	width: 92%;
	max-width: 880px;
	margin: 72px auto 0;
	padding: 48px 56px 40px;
	text-align: left;
}
.sm_about_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}
.sm_h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
	font-feature-settings: "palt";
}
.sm_qlist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
}
.sm_qlist li {
	display: flex;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid rgba(11, 33, 61, .08);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--font-base);
	word-break: auto-phrase;
}
.sm_qlist .gf {
	flex: 0 0 38px;
	padding-top: 3px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--accent2);
}
/* くわしく見積もりで、回答によって出る設問 */
.sm_qlist_if {
	margin-left: 6px;
	font-size: 12px;
	color: var(--accent2);
}
.sm_note {
	margin-top: 24px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--font-sub);
	word-break: auto-phrase;
}
/* 費用の目安の表 */
.sm_cost_tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.7;
	color: var(--font-base);
}
.sm_cost_tbl th,
.sm_cost_tbl td {
	padding: 14px 12px 14px 0;
	border-bottom: 1px solid rgba(11, 33, 61, .08);
	text-align: left;
	vertical-align: top;
	word-break: auto-phrase;
}
.sm_cost_tbl thead th {
	padding-top: 6px;
	padding-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent2);
}
.sm_cost_tbl tbody th {
	width: 15em;
	font-weight: 700;
	color: var(--ink);
}
.sm_cost_tbl td.sm_cost_tbl_yen,
.sm_cost_tbl thead th:last-child {
	padding-right: 0;
	text-align: right;
	white-space: nowrap;
}
.sm_cost_tbl td.sm_cost_tbl_yen {
	font-weight: 700;
	color: var(--ink);
}
/* よくある質問（開閉。スタートの画面と、結果の画面の業種に合わせたものの両方） */
.sm_faq_item {
	border-bottom: 1px solid rgba(11, 33, 61, .08);
}
.sm_faq_q {
	position: relative;
	display: block;
	padding: 16px 36px 16px 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
	list-style: none;
	cursor: pointer;
	word-break: auto-phrase;
}
.sm_faq_q::-webkit-details-marker {
	display: none;
}
.sm_faq_q:before {
	content: "Q";
	margin-right: 12px;
	font-family: inherit;
	color: var(--accent2);
}
.sm_faq_q:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1.5px solid var(--font-sub);
	border-bottom: 1.5px solid var(--font-sub);
	transform: rotate(45deg);
	transition: transform .25s;
}
.sm_faq_item[open] .sm_faq_q:after {
	margin-top: -2px;
	transform: rotate(-135deg);
}
/* よくある質問の回答の下の、関連する記事へのリンク */
.sm_faq_more {
	display: table;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--accent2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sm_faq_more:before {
	content: "→";
	margin-right: 6px;
}
.sm_note a {
	color: var(--accent2);
	text-decoration: underline;
}
.sm_faq_a {
	padding: 0 0 18px 26px;
	font-size: 14px;
	line-height: 1.95;
	color: var(--font-base);
	word-break: auto-phrase;
}

/* 4. 質問
----------------------------------------------------------- */
/* PCは質問の画面をウィンドウの高さに収め、ページはスクロールさせない（sim.js が html に sm_quizmode を付ける）。
   左の列は質問の一覧だけ、右は質問の中身だけを内側でスクロールする。概算は左下、「次へ進む」は右下に常に出す。SPは縦に流れる形（9. SP） */
html.sm_quizmode,
html.sm_quizmode body {
	overflow: hidden;
}
html.sm_quizmode #footer {
	display: none;
}
.sm_quiz {
	box-sizing: border-box;
	height: 100vh;
	height: 100dvh;
	padding: 90px 0 24px;
}
.sm_quiz_in {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 28px;
	align-items: stretch;
	width: 92%;
	max-width: 1160px;
	height: 100%;
	margin: 0 auto;
}
/* 左の列：何問目か・ここまでの回答・概算 */
.sm_rail {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 28px 28px 24px;
}
/* 質問の一覧。今の質問が見えるところまで sim.js が動かす */
.sm_steps {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin-right: -14px;
	padding-right: 14px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.sm_rail_no {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 6px;
	color: var(--ink);
}
.sm_rail_no .gf:first-child {
	font-size: 64px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
}
.sm_rail_all {
	font-size: 15px;
	font-weight: 500;
	color: var(--font-sub);
}
.sm_bar {
	position: relative;
	height: 3px;
	overflow: hidden;
	margin: 20px 0 14px;
	border-radius: 999px;
	background: rgba(11, 33, 61, .08);
}
.sm_bar span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ink), var(--accent2));
	transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.sm_step {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 2px 8px;
	width: 100%;
	padding: 11px 0;
	border: none;
	border-top: 1px solid rgba(11, 33, 61, .07);
	background: none;
	text-align: left;
	cursor: pointer;
	transition: opacity .2s;
}
.sm_step:disabled {
	opacity: .45;
	cursor: default;
}
.sm_step .gf {
	grid-row: span 2;
	padding-top: 2px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--accent-light);
}
.sm_step_tl {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--font-sub);
}
.sm_step_a {
	overflow: hidden;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--accent2);
}
.sm_step_a:empty {
	display: none;
}
.sm_step.is_done .gf {
	color: var(--accent2);
}
.sm_step.is_current .gf,
.sm_step.is_current .sm_step_tl {
	color: var(--ink);
}
.sm_step.is_current .sm_step_tl:after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--ink);
	vertical-align: middle;
}
.sm_step:not(:disabled):hover .sm_step_tl {
	color: var(--ink);
}
.sm_rail_total {
	flex: 0 0 auto;
	margin-top: 14px;
	padding: 18px 20px 16px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--navy-700), var(--ink));
	color: #fff;
}
.sm_rail_total_tl {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--accent-light);
}
.sm_rail_total_num {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
}
.sm_rail_total_num .gf {
	margin-right: 3px;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
}
/* Q5から先は概算の数字をぼかす（左の列・SPの下の帯とも。sim.js が #content に is_veil を付け、中身もでたらめな数字にする） */
.sm_live_v {
	transition: filter .4s;
}
.sm_page.is_veil .sm_live_v {
	filter: blur(7px);
	user-select: none;
}
/* 右：質問 */
.sm_stage {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 44px 56px 28px;
}
/* 質問の中身だけを内側でスクロールする。選択肢の影が切れないよう、余白を足して同じだけ外へ広げる */
.sm_q {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: -6px -20px 0 -6px;
	padding: 6px 20px 24px 6px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	animation: sm_in .32s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sm_in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.sm_q_no {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.sm_q_no .gf {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 3px;
	color: var(--accent2);
}
.sm_q_type {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--navy-100);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink);
}
.sm_q_tl {
	margin-bottom: 12px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 1px;
	color: var(--ink);
	font-feature-settings: "palt";
	word-break: auto-phrase;
}
.sm_q_sub {
	margin-bottom: 34px;
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--font-sub);
	word-break: auto-phrase;
	text-wrap: pretty;
}
/* 業種に合うサイトの種類の一言（「◯◯の方には「店舗サイト」が当てはまることが多いです」） */
.sm_q_rec {
	display: block;
	margin-top: 10px;
	font-weight: 700;
	color: var(--ink);
}
.sm_q_rec[hidden] {
	display: none;
}
.sm_opts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.sm_opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 72px;
	padding: 16px 58px 16px 18px;
	border: 1px solid rgba(11, 33, 61, .1);
	border-radius: 14px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 1px 2px rgba(11, 33, 61, .04);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .18s, background-color .18s, color .18s, box-shadow .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* 選んだときの紺。背景を切り替えると一瞬で変わってしまうので、紺の層を重ねて広げながら出す */
.sm_opt:before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--navy-700), var(--ink));
	opacity: 0;
	transform: scale(.94);
	transition: opacity .2s ease-out, transform .4s cubic-bezier(.2, .9, .25, 1.15);
}
.sm_opt:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border: 1.5px solid rgba(11, 33, 61, .2);
	border-radius: 50%;
	transition: border-color .2s, background-color .2s;
}
.sm_opts.is_multi .sm_opt:after {
	border-radius: 6px;
}
.sm_opt_key {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--base);
	font-size: 12px;
	font-weight: 600;
	color: var(--accent2);
	transition: background-color .2s, color .2s;
}
/* 業種に合う選択肢：枠を色付きにして「おすすめ」の札を付ける */
.sm_opt.is_rec {
	border-color: var(--accent2);
	background: #fff;
}
.sm_opt_rec {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--accent2);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	transition: background-color .2s, color .2s;
}
.sm_opt_rec[hidden] {
	display: none;
}
.sm_opt:hover {
	border-color: rgba(11, 33, 61, .25);
	background: #fff;
	box-shadow: 0 14px 30px rgba(11, 33, 61, .08);
	transform: translateY(-1px);
}
/* 押した瞬間にわずかに沈む */
.sm_opt:active {
	transform: scale(.985);
	transition-duration: .08s;
}
.sm_opt[aria-pressed="true"] {
	border-color: var(--ink);
	box-shadow: 0 16px 34px rgba(11, 33, 61, .22);
	color: #fff;
}
.sm_opt[aria-pressed="true"]:before {
	opacity: 1;
	transform: none;
}
.sm_opt[aria-pressed="true"] .sm_opt_key {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
.sm_opt[aria-pressed="true"] .sm_opt_rec {
	background: #fff;
	color: var(--ink);
}
.sm_opt[aria-pressed="true"]:after {
	border-color: #fff;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%230B213D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px;
	animation: sm_pop .36s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes sm_pop {
	from { transform: scale(.5); }
	to { transform: none; }
}
/* 業種：入力欄・候補・よく選ばれる業種 */
/* 入力欄は選択肢（.sm_opt）と同じカードの形。左の四角に虫めがね、候補を選ぶと選択済みの紺になる */
.sm_ind_field {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 72px;
	padding: 0 20px 0 18px;
	border: 1px solid rgba(11, 33, 61, .1);
	border-radius: 14px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 1px 2px rgba(11, 33, 61, .04);
	cursor: text;
	transition: border-color .25s, background .25s, box-shadow .25s;
}
.sm_ind_field:hover {
	border-color: rgba(11, 33, 61, .25);
	background: #fff;
}
.sm_ind_field:focus-within {
	border-color: var(--ink);
	background: #fff;
	box-shadow: 0 14px 30px rgba(11, 33, 61, .08);
}
.sm_ind_field:has(.is_set) {
	border-color: var(--ink);
	background: linear-gradient(135deg, var(--navy-700), var(--ink));
	box-shadow: 0 16px 34px rgba(11, 33, 61, .22);
}
.sm_ind_ic {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%230B213D' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L20 20' stroke='%230B213D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 16px;
	transition: background .25s;
}
.sm_ind_field:has(.is_set) .sm_ind_ic {
	background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px;
}
/* base.css の input[type="text"] の枠・背景を消して、カードの中に置く */
.sm_ind .sm_ind_in {
	flex: 1 1 auto;
	min-width: 0;
	height: 70px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--ink);
}
.sm_ind .sm_ind_in::placeholder {
	font-weight: 500;
	letter-spacing: 0;
	color: var(--font-sub);
	opacity: .6;
}
.sm_ind .sm_ind_in:focus {
	outline: none;
}
.sm_ind .sm_ind_in.is_set {
	color: #fff;
}
.sm_ind_sug {
	max-height: 392px;
	overflow-y: auto;
	margin-top: 8px;
	border: 1px solid rgba(11, 33, 61, .12);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(11, 33, 61, .1);
}
.sm_ind_sug li + li {
	border-top: 1px solid rgba(11, 33, 61, .07);
}
.sm_ind_opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 52px;
	padding: 12px 20px;
	border: none;
	background: none;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.5;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s;
}
.sm_ind_opt small {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 500;
	color: var(--font-sub);
}
.sm_ind_opt:hover,
.sm_ind_opt.is_active {
	background: var(--navy-100);
}
.sm_ind_opt.is_free span {
	color: var(--accent2);
}
.sm_ind_pop {
	margin-top: 26px;
}
.sm_ind_pop_tl {
	margin-bottom: 12px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--accent2);
}
.sm_ind_pop ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sm_ind_chip {
	padding: 10px 18px;
	border: 1px solid rgba(11, 33, 61, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.sm_ind_chip:hover {
	border-color: var(--ink);
	background: #fff;
}
.sm_tip {
	display: flex;
	gap: 18px;
	margin-top: 32px;
	padding-top: 22px;
	border-top: 1px solid rgba(11, 33, 61, .08);
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--font-sub);
	word-break: auto-phrase;
}
.sm_tip_tl {
	flex: 0 0 auto;
	padding-top: 1px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--accent2);
}
.sm_nav {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid rgba(11, 33, 61, .08);
}
.sm_back {
	padding: 10px 0;
	border: none;
	background: none;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--font-sub);
	cursor: pointer;
	transition: color .2s;
}
.sm_back:before {
	content: "←";
	margin-right: 10px;
}
.sm_back:hover {
	color: var(--ink);
}
/* SPの下の帯（PCは左の列に出すので非表示） */
.sm_live {
	display: none;
}

/* 5. 結果
----------------------------------------------------------- */
.sm_result {
	padding: 116px 0 110px;
}
.sm_res_head {
	margin-bottom: 52px;
	text-align: center;
}
.sm_res_tl {
	margin: 24px 0 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--font-sub);
}
.sm_total {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	line-height: 1;
	color: var(--ink);
}
.sm_total .gf {
	font-size: 104px;
	font-weight: 400;
	letter-spacing: -3px;
	font-variant-numeric: tabular-nums;
}
.sm_total_yen {
	font-size: 28px;
	font-weight: 700;
}
.sm_total_ex {
	margin-top: 20px;
	font-size: 13.5px;
	color: var(--font-sub);
}
.sm_total_ex .gf {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* 幅の決まり方・個別見積もりの注記 */
.sm_total_note {
	max-width: 560px;
	margin: 10px auto 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--font-sub);
	word-break: auto-phrase;
}
/* 社内で共有する（結果のURLを送る）。押すと コピー・メール・LINE の面を下に開く（sim.js） */
.sm_share {
	position: relative;
	display: inline-block;
	margin-top: 18px;
}
.sm_share_btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border: 1px solid rgba(11, 33, 61, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	transition: background .25s, border-color .25s;
}
/* 共有のしるし（3つの点を線でつないだ形） */
.sm_share_btn:before {
	content: "";
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b213d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sm_share_btn:hover,
.sm_share_btn[aria-expanded="true"] {
	border-color: var(--ink);
	background: #fff;
}
.sm_share_menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 5;
	width: 340px;
	padding: 18px 18px 16px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(11, 33, 61, .18);
	transform: translateX(-50%);
}
.sm_share_tx {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--font-sub);
}
.sm_share_btns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
}
.sm_share_btns button,
.sm_share_btns a,
.sm_share_btns a:link,
.sm_share_btns a:visited {
	padding: 10px 4px;
	border: 1px solid rgba(11, 33, 61, .15);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: var(--ink);
	cursor: pointer;
	transition: background .25s, border-color .25s;
}
.sm_share_btns button:hover,
.sm_share_btns a:hover {
	border-color: var(--ink);
	background: var(--accent-bg);
	text-decoration: none;
	color: var(--ink);
}
/* かんたん見積もりの人に出す、くわしく見積もりへの切り替え */
.sm_res_more {
	margin-top: 22px;
}
.sm_res_more_btn {
	display: inline-block;
	padding: 13px 28px 12px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
	transition: background .25s, box-shadow .25s;
}
.sm_res_more_btn:before {
	content: "+";
	margin-right: 8px;
	color: var(--accent2);
}
.sm_res_more_btn small {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--font-sub);
}
.sm_res_more_btn:hover {
	background: #fff;
	box-shadow: 0 14px 30px rgba(11, 33, 61, .1);
}
.sm_res_grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 28px;
	align-items: start;
}
.sm_bd {
	padding: 40px 44px 34px;
}
.sm_card_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
}
.sm_card_tl {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}
.sm_bd_list li {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 0 12px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid rgba(11, 33, 61, .08);
}
.sm_bd_no {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--accent2);
}
.sm_bd_item {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}
.sm_bd_ans {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--font-sub);
}
.sm_bd_price {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--ink);
}
.sm_bd_price .gf {
	margin-right: 2px;
	font-size: 17px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.sm_bd_sum {
	margin-top: 8px;
}
.sm_bd_sum div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 10px;
	font-size: 13.5px;
	color: var(--font-sub);
}
.sm_bd_sum dd .gf {
	margin-right: 2px;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.sm_bd_sum .is_total {
	margin-top: 14px;
	padding-top: 18px;
	border-top: 1px solid var(--ink);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
}
.sm_bd_sum .is_total dd .gf {
	font-size: 26px;
}
.sm_bd_links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(11, 33, 61, .08);
}
/* 右：依頼のカード（紺の面。背景の光を薄く重ねる） */
.sm_ask {
	position: sticky;
	top: 24px;
	overflow: hidden;
	padding: 44px 40px 38px;
	border-radius: 20px;
	background: radial-gradient(120% 80% at 100% 0, rgba(157, 184, 217, .35), rgba(157, 184, 217, 0) 60%), linear-gradient(160deg, var(--navy-700), var(--ink) 60%);
	box-shadow: 0 40px 90px rgba(11, 33, 61, .3);
	color: #fff;
}
.sm_ask:before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/sm_bg_veil.jpg") center / cover;
	mix-blend-mode: screen;
	opacity: .12;
	pointer-events: none;
}
.sm_ask > * {
	position: relative;
}
.sm_ask_en {
	color: var(--accent-light);
}
.sm_ask_tl {
	margin: 14px 0 16px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
	font-feature-settings: "palt";
	word-break: auto-phrase;
	text-wrap: balance;
}
.sm_ask_tx {
	margin-bottom: 30px;
	font-size: 14px;
	line-height: 2;
	color: rgba(255, 255, 255, .78);
	word-break: auto-phrase;
}
.sm_ask .sm_btn {
	width: 100%;
	min-width: 0;
}
.sm_ask .sm_btn_main {
	background: #fff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
	color: var(--ink);
}
.sm_ask .sm_btn_main:after {
	background-color: var(--ink);
}
.sm_ask .sm_btn_main:hover {
	background: var(--navy-100);
}
.sm_ask_notes {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.sm_ask_notes li {
	position: relative;
	padding-left: 26px;
	font-size: 13px;
	line-height: 2.1;
	color: rgba(255, 255, 255, .75);
}
.sm_ask_notes li:before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px;
}

/* 6. 査定中の演出（結果の前）
----------------------------------------------------------- */
/* 画面全体を紺の幕で覆う。結果は幕の裏で出してから、幕を消す（sim.js の estimate） */
.sm_load {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 24px;
	background: radial-gradient(90% 70% at 50% 0, rgba(157, 184, 217, .28), rgba(157, 184, 217, 0) 60%), linear-gradient(160deg, var(--navy-700), var(--ink) 65%);
	color: #fff;
	opacity: 0;
	transition: opacity .35s;
}
.sm_load[hidden] {
	display: none;
}
.sm_load.is_in {
	opacity: 1;
}
.sm_load.is_out {
	opacity: 0;
	transition-duration: .45s;
}
/* 背景：写真の光をうっすら重ね、中央に細い方眼。上から下へ光の帯が流れる */
.sm_load:before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/sm_bg_veil.jpg") center / cover;
	mix-blend-mode: screen;
	opacity: .1;
}
.sm_load_grid {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) center / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) center / 64px 64px;
	mask-image: radial-gradient(60% 55% at 50% 50%, #000, transparent);
}
.sm_load_grid:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 34%;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
	background: linear-gradient(180deg, rgba(157, 184, 217, 0), rgba(157, 184, 217, .18));
	animation: sm_scan 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes sm_scan {
	from { transform: translateY(-100%); }
	to { transform: translateY(300%); }
}
.sm_load_in {
	position: relative;
	width: 100%;
	max-width: 640px;
	text-align: center;
}
.sm_load_en {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 5px;
	color: var(--accent-light);
}
/* 左の点が脈打つ */
.sm_load_en:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-light);
	box-shadow: 0 0 0 0 rgba(157, 184, 217, .6);
	animation: sm_pulse 1.2s ease-out infinite;
}
@keyframes sm_pulse {
	to { box-shadow: 0 0 0 10px rgba(157, 184, 217, 0); }
}
.sm_load_tl {
	margin: 16px 0 34px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, .92);
}
.sm_load_num {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	line-height: 1;
}
.sm_load_num .gf {
	font-size: 96px;
	font-weight: 300;
	letter-spacing: -2px;
	color: #fff;
	text-shadow: 0 0 40px rgba(157, 184, 217, .45);
	font-variant-numeric: tabular-nums;
}
.sm_load_yen {
	font-size: 24px;
	font-weight: 700;
	color: rgba(255, 255, 255, .8);
}
.sm_load_prog {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 46px;
}
.sm_load_bar {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
}
.sm_load_bar span {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent-light), #fff);
	box-shadow: 0 0 12px rgba(255, 255, 255, .7);
}
.sm_load_pct {
	flex: 0 0 44px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: right;
	color: rgba(255, 255, 255, .8);
	font-variant-numeric: tabular-nums;
}
/* 3つの段階：今の段階は上の線が光り、済んだ段階は白く残る */
.sm_load_steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 26px;
}
.sm_load_steps li {
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: left;
	color: rgba(255, 255, 255, .32);
	transition: color .3s, border-color .3s;
}
.sm_load_steps .gf {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
}
.sm_load_steps li.is_on {
	border-top-color: var(--accent-light);
	color: #fff;
}
.sm_load_steps li.is_on .gf {
	color: var(--accent-light);
}
.sm_load_steps li.is_done {
	border-top-color: rgba(255, 255, 255, .5);
	color: rgba(255, 255, 255, .75);
}
@media (prefers-reduced-motion: reduce) {
	.sm_load_grid:after,
	.sm_load_en:before {
		animation: none;
	}
}

/* 7. AIを使った制作の案内
----------------------------------------------------------- */
.sm_ai {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 56px;
	margin-top: 28px;
	padding: 48px 52px;
}
/* 業種で士業を選んだ人には出さない（display: grid に負けないよう明示する） */
.sm_ai[hidden] {
	display: none;
}
.sm_tools_tl,
.sm_fit_tl,
.sm_co_tl,
.sm_ai_tl {
	margin-top: 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.65;
	color: var(--ink);
	font-feature-settings: "palt";
	word-break: auto-phrase;
	text-wrap: balance;
}
.sm_co_tx,
.sm_ai_body p {
	font-size: 14px;
	line-height: 2;
	color: var(--font-base);
	word-break: auto-phrase;
}
/* 通常の制作とAIを活用した制作の金額を並べる（金額は sim.js が結果から入れる） */
.sm_ai_price {
	display: grid;
	gap: 10px;
	margin-top: 26px;
}
.sm_ai_price div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px;
	border: 1px solid rgba(11, 33, 61, .08);
	border-radius: 14px;
	background: rgba(255, 255, 255, .7);
}
.sm_ai_price dt {
	font-size: 13px;
	font-weight: 700;
	color: var(--font-sub);
}
.sm_ai_price dd {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--font-sub);
}
.sm_ai_price .gf {
	margin-right: 2px;
	font-size: 22px;
	font-variant-numeric: tabular-nums;
}
.sm_ai_price .is_ai {
	border-color: var(--accent2);
	background: var(--accent-bg);
}
.sm_ai_price .is_ai dt,
.sm_ai_price .is_ai dd {
	color: var(--ink);
}
.sm_ai_price .is_ai .gf {
	font-size: 34px;
	color: var(--accent2);
}
.sm_ai_price_note {
	margin-top: 8px;
	font-size: 11.5px;
	color: var(--font-sub);
}
.sm_ai_cmp {
	margin: 22px 0 30px;
}
.sm_ai_cmp li {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid rgba(11, 33, 61, .08);
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--font-base);
	word-break: auto-phrase;
}
.sm_ai_cmp_tl {
	padding-top: 1px;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent2);
}
/* ほかの制作会社にも見積もりを取る人向けの資料（RFP・比較シート。rfp.js）。白いカードを2枚並べる */
.sm_tools {
	margin-top: 28px;
	padding: 40px 52px 44px;
}
.sm_tools_tx {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--font-base);
}
.sm_tools_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 26px;
}
.sm_tool {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 30px 30px;
	border-radius: 14px;
	background: #fff;
}
.sm_tool_tag {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--accent-bg);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--accent2);
}
.sm_tool_tl {
	margin-top: 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
}
.sm_tool_tx {
	flex: 1;
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--font-base);
}
.sm_tool .sm_btn {
	min-width: 270px;
	margin-top: 22px;
}
/* RFPのカードの下の、RFP作成のページ（書き方・記入例）へのリンク */
.sm_tool_more {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent2);
}
/* 選んだ業種に合わせた、よくある構成と目安・よくある質問（結果の画面。sim.js が中身を入れる） */
.sm_fit {
	margin-top: 28px;
	padding: 40px 52px 32px;
}
.sm_fit[hidden] {
	display: none;
}
.sm_fit_plan {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	margin: 22px 0 8px;
	padding: 18px 22px;
	border-radius: 14px;
	background: #fff;
}
.sm_fit_plan dt {
	font-size: 12px;
	font-weight: 700;
	color: var(--accent2);
}
.sm_fit_plan dd {
	margin-top: 4px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ink);
	word-break: auto-phrase;
}
.sm_fit_plan dd.gf {
	font-size: 22px;
	font-weight: 500;
	white-space: nowrap;
}
/* 共同運営の株式会社サイシアの案内（士業以外の業種の人だけ）。左にロゴ、右に説明と会社資料。資料はPCではカードの下に開く */
.sm_co {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: center;
	gap: 48px;
	margin-top: 28px;
	padding: 40px 52px;
}
.sm_co[hidden] {
	display: none;
}
.sm_co_logo {
	display: grid;
	place-items: center;
	min-height: 140px;
	padding: 28px;
	border-radius: 14px;
	background: #fff;
	transition: box-shadow .25s;
}
.sm_co_logo:hover {
	box-shadow: 0 10px 26px rgba(11, 33, 61, .1);
}
.sm_co_logo img {
	display: block;
	width: 100%;
	max-width: 180px;
	height: auto;
}
.sm_co_tx {
	margin-top: 10px;
}
.sm_co_tx a {
	color: var(--accent2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sm_co_btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 24px;
}
/* 業界別ページのボタンと会社資料のボタンは、sim.js が hidden で出し分ける（.sm_btn の display に負けないよう明示する） */
.sm_co_btns [hidden] {
	display: none;
}
.sm_co_new {
	font-size: 13px;
	color: var(--accent2);
	text-decoration: underline;
}
.sm_co_view {
	grid-column: 1 / -1;
	height: 56vh;
	max-height: 520px;
	overflow: hidden;
	border: 1px solid rgba(11, 33, 61, .1);
	border-radius: 14px;
	background: #fff;
}
.sm_co_view[hidden] {
	display: none;
}
.sm_co_view iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 8. 見積もり依頼のモーダル
----------------------------------------------------------- */
html.sm_lock,
html.sm_lock body {
	overflow: hidden;
}
.sm_modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.sm_modal[hidden] {
	display: none;
}
.sm_modal_bg {
	position: absolute;
	inset: 0;
	background: rgba(11, 33, 61, .55);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .25s;
}
.sm_modal_box {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(11, 33, 61, .3);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .25s, transform .25s;
}
.sm_modal.is_open .sm_modal_bg,
.sm_modal.is_open .sm_modal_box {
	opacity: 1;
	transform: none;
}
.sm_modal_x {
	position: sticky;
	top: 12px;
	z-index: 2;
	float: right;
	width: 40px;
	height: 40px;
	margin: 12px 12px 0 0;
	border: none;
	border-radius: 50%;
	background: var(--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%230B213D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 18px;
	cursor: pointer;
}
.sm_modal_head {
	padding: 34px 40px 0;
}
.sm_modal_tl {
	margin: 6px 0 16px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}
.sm_modal_sum {
	padding: 14px 18px;
	border-radius: 8px;
	background: var(--accent-bg);
	font-size: 13px;
	line-height: 1.8;
	color: var(--font-base);
}
.sm_modal_sum_tl {
	font-weight: 700;
	color: var(--ink);
}
.sm_modal_sum summary {
	margin-top: 4px;
	font-size: 12.5px;
	text-decoration: underline;
	color: var(--accent2);
	cursor: pointer;
}
.sm_modal_sum ul {
	margin-top: 8px;
}
.sm_modal_sum li span {
	display: inline-block;
	min-width: 9em;
	color: var(--font-sub);
}
.sm_modal .form_area {
	padding: 0 40px 36px;
}
.sm_modal .form_area .mw_wp_form {
	margin-top: 22px;
	padding: 0;
	border: none;
	box-shadow: none;
}
.sm_modal .form_area .form_list ul {
	gap: 22px;
}
.sm_modal .form_area .form_list li[hidden] {
	display: none;
}
.sm_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.sm_chips button {
	padding: 7px 14px;
	border: 1px solid #D5DCE6;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.sm_chips button:before {
	content: "+";
	margin-right: 6px;
	color: var(--accent2);
}
.sm_chips button:hover {
	border-color: var(--ink);
	background: var(--navy-100);
}
.sm_more button {
	padding: 0;
	border: none;
	background: none;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--accent2);
	cursor: pointer;
}
.sm_more button:before {
	content: "+";
	margin-right: 6px;
	text-decoration: none;
}
.sm_modal .form_area .fm_privacy {
	margin-top: 22px;
}
/* 確認画面は通さず送るので、共通の「次の画面で確認」の案内を差し替える */
.sm_modal .form_area .mw_wp_form_input .form_list .btn_area:after {
	content: "送信すると、受付のメールが自動で届きます";
}
.sm_modal .form_area .form_list .btn_area .button_n2:disabled {
	opacity: .6;
	cursor: default;
}
/* AIで作るトップページのデザイン案の依頼（#sm_aid）。見た目は見積もり依頼のモーダルと同じで、入力欄は RFP（.rf_*）のものを使う */
.sm_aid_lead {
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--font-sub);
	word-break: auto-phrase;
}
.sm_aid_lead b {
	color: var(--ink);
}
.sm_aid_form {
	padding: 4px 40px 40px;
}
.sm_aid_sec {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid rgba(11, 33, 61, .08);
}
.sm_aid_h {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}
.sm_aid_tx {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--font-sub);
}
.sm_aid_req {
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--ink);
	font-size: 11px;
	font-weight: 500;
	color: #fff;
}
.sm_aid_ng {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: #C8323B;
}
/* 人には見えない罠の欄 */
.sm_aid_trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.sm_aid_note {
	margin-top: 30px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--font-sub);
}
.sm_aid_note a {
	text-decoration: underline;
}
.sm_aid_err {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #FDECEC;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.8;
	color: #C8323B;
}
.sm_aid_send {
	width: 100%;
	margin-top: 20px;
}
/* 送信の完了（.is_done のとき、フォームの代わりに出す） */
.sm_done {
	display: none;
	padding: 20px 40px 44px;
	text-align: center;
}
.sm_modal_box.is_done .sm_done {
	display: block;
}
.sm_modal_box.is_done .sm_form,
.sm_modal_box.is_done .sm_modal_head {
	display: none;
}
.sm_done_ic {
	width: 64px;
	height: 64px;
	margin: 24px auto 18px;
	border-radius: 50%;
	background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 34px;
}
.sm_done_tl {
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: 700;
	color: var(--ink);
}
.sm_done_msg {
	font-size: 14px;
	line-height: 1.9;
	text-align: left;
	color: var(--font-base);
	word-break: auto-phrase;
}
.sm_done_msg a {
	text-decoration: underline;
	color: var(--ink);
}
.sm_done_note {
	margin: 16px 0 28px;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--base);
	font-size: 13px;
	line-height: 1.8;
	color: var(--font-sub);
}

/* 10. RFP（提案依頼書）のモーダル
   外枠は見積もり依頼のモーダル（.sm_modal）を使い、中は 見出し・進み具合／質問（内側でスクロール）／戻る・次へ の3段にする。
   色の見本（.hr_sw）とロゴのカード（.hr_card）は追加ヒアリングのもの（style.css）をそのまま使う
----------------------------------------------------------- */
.rf_box {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-width: 760px;
}
.rf_box .sm_modal_x {
	position: absolute;
	top: 14px;
	right: 14px;
	margin: 0;
}
.rf_head {
	padding: 30px 40px 18px;
	border-bottom: 1px solid var(--border);
}
.rf_tl {
	margin-top: 6px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}
.rf_prog {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}
.rf_prog_bar {
	flex: 1;
	overflow: hidden;
	height: 6px;
	border-radius: 999px;
	background: var(--base);
}
.rf_prog_bar i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent2), var(--navy-700));
	transition: width .35s;
}
.rf_prog_tx {
	font-size: 13px;
	color: var(--font-sub);
}
.rf_body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 26px 40px 32px;
}
.rf_step_tl {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
	text-wrap: balance;
}
.rf_step_tx {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--font-sub);
}
.rf_f {
	margin-top: 24px;
}
.rf_f[hidden] {
	display: none;
}
.rf_lb {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}
.rf_any {
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--base);
	font-size: 11px;
	font-weight: 500;
	color: var(--font-sub);
}
.rf_opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rf_o {
	position: relative;
}
.rf_o input,
.rf_big_o input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.rf_o span {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid #D5DCE6;
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink);
	transition: border-color .2s, background .2s, box-shadow .2s;
	cursor: pointer;
}
.rf_o:hover span {
	border-color: var(--accent-light);
}
.rf_o input:checked + span {
	border-color: var(--ink);
	background: var(--navy-100);
	box-shadow: inset 0 0 0 1px var(--ink);
}
.rf_o input[type="checkbox"]:checked + span:before {
	content: "";
	width: 12px;
	height: 12px;
	margin-right: 7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='%230B213D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.rf_o input:focus-visible + span,
.rf_big_o:has(input:focus-visible) {
	outline: 2px solid var(--accent2);
	outline-offset: 2px;
}
.rf_big {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.rf_big_o {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 24px 22px;
	border: 1px solid #D5DCE6;
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s, background .2s, box-shadow .2s;
	cursor: pointer;
}
.rf_big_o:hover {
	border-color: var(--accent-light);
}
.rf_big_o:has(input:checked) {
	border-color: var(--ink);
	background: var(--navy-100);
	box-shadow: inset 0 0 0 1px var(--ink);
}
.rf_big_tl {
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
}
.rf_big_tx {
	font-size: 13px;
	line-height: 1.7;
	color: var(--font-sub);
}
.rf_in {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #D5DCE6;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	transition: border-color .2s, box-shadow .2s;
}
.rf_in:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(58, 114, 184, .15);
}
/* base.css の textarea { width: 98% !important } に勝たせて、ほかの入力欄と幅をそろえる */
textarea.rf_in {
	width: 100% !important;
	min-height: 84px;
	resize: vertical;
}
.rf_sugs {
	margin: 10px 0 0;
}
.rf_sim {
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 8px;
	background: var(--accent-bg);
	font-size: 13px;
	line-height: 1.8;
	color: var(--font-base);
}
.rf_sim summary {
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
}
.rf_sim ul {
	margin-top: 8px;
}
.rf_sim li span {
	display: inline-block;
	min-width: 8em;
	color: var(--font-sub);
}
.rf_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 40px;
	border-top: 1px solid var(--border);
	background: #fff;
}
.rf_foot[hidden] {
	display: none;
}
.rf_prev {
	padding: 0;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--ink);
	cursor: pointer;
}
/* 1問目は「戻る」を出さないが、場所は空けておく（次へのボタンが動かないように） */
.rf_prev[hidden] {
	display: inline-block;
	visibility: hidden;
}
.rf_saved {
	font-size: 12px;
	color: var(--font-sub);
}
.rf_foot .sm_btn {
	min-width: 220px;
	height: 56px;
}
.rf_done {
	text-align: center;
}
.rf_done .rf_step_tx {
	max-width: 520px;
	margin: 8px auto 0;
}
.rf_done_btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}
.rf_done_ask {
	margin-top: 26px;
	padding: 18px 22px;
	border-radius: 10px;
	background: var(--base);
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--font-base);
}
.rf_done_ask .sm_link {
	margin-top: 6px;
}
.rf_done_back {
	margin-top: 18px;
}

/* 11. RFP（提案依頼書）作成のページ（page-rfp.php）
   ヒーロー・面・表・よくある質問はスタートの画面（3）のものを使い、ここにはこのページだけの部品を置く
----------------------------------------------------------- */
.rf_start_lb {
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}
.rf_sample {
	margin-top: 18px;
}
.rf_tx {
	font-size: 14.5px;
	line-height: 2;
	color: var(--font-base);
	word-break: auto-phrase;
}
.rf_tx a {
	color: var(--accent2);
	text-decoration: underline;
}
.rf_merits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 22px;
}
.rf_merits li {
	padding: 20px 20px 22px;
	border-radius: 12px;
	background: #fff;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--font-base);
}
.rf_merits b {
	display: block;
	margin-bottom: 6px;
	background: none;
	font-size: 15px;
	color: var(--ink);
}
.rf_tip_tl {
	margin: 26px 0 8px;
	padding-left: 14px;
	border-left: 3px solid var(--accent2);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
}
.rf_tips .rf_tip_tl:first-child {
	margin-top: 8px;
}
.rf_flow li {
	display: flex;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(11, 33, 61, .08);
	font-size: 14px;
	line-height: 1.85;
	color: var(--font-base);
}
.rf_flow .gf {
	flex: 0 0 auto;
	padding-top: 2px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--accent2);
}
.rf_flow b {
	display: block;
	background: none;
	font-size: 15px;
	color: var(--ink);
}
/* 項目の表は2列とも左寄せ（スタートの画面の費用の表は右端が金額なので右寄せ） */
.rf_tbl thead th:last-child {
	text-align: left;
}
.rf_cta {
	text-align: center;
}
.rf_cta .rf_tx {
	margin: 10px 0 24px;
}

/* 9. SP
----------------------------------------------------------- */
@media screen and ( max-width:760px ) {

	.sm_header {
		gap: 12px;
		height: 64px;
		padding: 0 16px;
	}
	.sm_header img {
		height: 25px;
	}
	.sm_header img.sm_header_sa {
		height: 16px;
	}
	#content.sm_page:before {
		background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .78)), url("../img/sm_bg_veil_sp.jpg");
	}
	.sm_btn {
		width: 100%;
		min-width: 0;
		height: 62px;
		padding: 0 9px 0 26px;
		font-size: 15px;
		letter-spacing: .5px;
	}
	.sm_eyebrow {
		font-size: 12px;
	}
	.sm_btn:after {
		width: 44px;
		height: 44px;
	}
	.sm_intro {
		padding: 0 0 56px;
	}
	.sm_hero {
		min-height: 0;
		padding: 64px 0 28px;
		background-image: url("../img/sm_bg_veil_sp.jpg");
	}
	.sm_hero_txt {
		padding: 36px 22px 0;
		border-radius: 16px;
	}
	.sm_h1 {
		margin: 20px 0 16px;
		font-size: 31px;
		letter-spacing: 1px;
	}
	.sm_h1 small {
		margin-bottom: 12px;
		font-size: 13px;
		letter-spacing: 3px;
	}
	.sm_lead {
		margin-bottom: 22px;
		font-size: 14.5px;
		text-align: left;
	}
	.sm_mode {
		grid-template-columns: 1fr;
		gap: 8px;
		margin-bottom: 22px;
	}
	.sm_mode_btn {
		padding: 13px 14px 13px 46px;
	}
	.sm_mode_btn:before {
		top: 15px;
		left: 15px;
	}
	.sm_mode_tl {
		font-size: 15px;
	}
	.sm_stats {
		margin: 32px -22px 0;
	}
	.sm_stats div {
		padding: 18px 8px 20px;
	}
	.sm_stats dt {
		font-size: 24px;
	}
	.sm_stats dt small {
		font-size: 11px;
	}
	.sm_stats dd {
		margin-top: 8px;
		font-size: 10.5px;
	}
	.sm_about {
		margin-top: 28px;
		padding: 30px 22px 24px;
		border-radius: 16px;
	}
	/* 見出しが長いと右の英字が縦に崩れるので、SPは英字を見出しの上に置く */
	.sm_about_head {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 6px;
	}
	.sm_qlist {
		grid-template-columns: 1fr;
	}
	.sm_qlist li {
		font-size: 14px;
	}
	/* SPは画面の高さに収めず、縦に流す（ページごとスクロールする） */
	html.sm_quizmode,
	html.sm_quizmode body {
		overflow: visible;
	}
	html.sm_quizmode #footer {
		display: block;
	}
	.sm_quiz {
		height: auto;
		padding: 64px 0 120px;
	}
	.sm_quiz_in {
		grid-template-columns: 1fr;
		gap: 12px;
		align-items: start;
		height: auto;
	}
	.sm_rail {
		position: static;
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 16px;
		align-items: center;
		padding: 14px 20px;
		border-radius: 14px;
	}
	.sm_rail_lb,
	.sm_steps,
	.sm_rail_total {
		display: none;
	}
	.sm_rail_no {
		margin-top: 0;
	}
	.sm_rail_no .gf:first-child {
		font-size: 30px;
	}
	.sm_rail_all {
		font-size: 13px;
	}
	.sm_bar {
		margin: 0;
	}
	.sm_stage {
		display: block;
		padding: 28px 20px 24px;
		border-radius: 16px;
	}
	.sm_q {
		overflow: visible;
		margin: 0;
		padding: 0;
	}
	.sm_q_tl {
		font-size: 22px;
		letter-spacing: .5px;
	}
	.sm_q_sub {
		margin-bottom: 22px;
		font-size: 13.5px;
	}
	.sm_opts {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.sm_opt {
		gap: 12px;
		min-height: 60px;
		padding: 12px 50px 12px 14px;
		font-size: 15px;
	}
	.sm_opt:after {
		right: 16px;
	}
	.sm_opt_key {
		width: 28px;
		height: 28px;
		border-radius: 8px;
	}
	.sm_ind_field {
		gap: 12px;
		min-height: 60px;
		padding: 0 14px;
	}
	.sm_ind_ic {
		width: 28px;
		height: 28px;
		border-radius: 8px;
	}
	.sm_ind .sm_ind_in {
		height: 58px;
		font-size: 16px;
	}
	.sm_ind_opt {
		padding: 12px 16px;
		font-size: 15px;
	}
	.sm_ind_pop {
		margin-top: 20px;
	}
	.sm_ind_pop ul {
		gap: 8px;
	}
	.sm_ind_chip {
		padding: 9px 14px;
		font-size: 13.5px;
	}
	.sm_tip {
		display: block;
		margin-top: 24px;
		padding-top: 18px;
		font-size: 13px;
	}
	.sm_tip_tl {
		display: block;
		margin-bottom: 4px;
	}
	.sm_nav {
		flex-direction: column-reverse;
		gap: 10px;
		margin-top: 26px;
		padding-top: 0;
		border-top: none;
	}
	.sm_live {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		background: rgba(11, 33, 61, .92);
		box-shadow: 0 -10px 30px rgba(11, 33, 61, .18);
		backdrop-filter: blur(12px);
		color: #fff;
	}
	/* reCAPTCHA のマーク（Googleが bottom を直接指定している）を下の帯の上へ */
	body:has(.sm_page[data-step="quiz"]) .grecaptcha-badge {
		bottom: 76px !important;
	}
	.sm_live_tl {
		font-size: 12px;
		font-weight: 700;
		color: var(--accent-light);
	}
	.sm_live_num {
		font-size: 13px;
		font-weight: 700;
	}
	.sm_live_num .gf {
		margin-right: 2px;
		font-size: 22px;
		font-weight: 500;
		font-variant-numeric: tabular-nums;
	}
	.sm_result {
		padding: 84px 0 56px;
	}
	.sm_load_grid {
		background-size: 44px 44px;
		mask-image: radial-gradient(80% 50% at 50% 50%, #000, transparent);
	}
	.sm_load_tl {
		margin: 12px 0 26px;
		font-size: 15px;
		letter-spacing: 1px;
	}
	.sm_load_num .gf {
		font-size: 52px;
		letter-spacing: -1px;
	}
	.sm_load_yen {
		font-size: 17px;
	}
	.sm_load_prog {
		gap: 12px;
		margin-top: 34px;
	}
	.sm_load_steps {
		gap: 8px;
		margin-top: 20px;
	}
	.sm_load_steps li {
		padding-top: 10px;
		font-size: 11px;
		letter-spacing: 0;
	}
	.sm_res_head {
		margin-bottom: 28px;
	}
	.sm_res_tl {
		margin-top: 18px;
		font-size: 13.5px;
	}
	.sm_total .gf {
		font-size: 60px;
		letter-spacing: -1.5px;
	}
	.sm_total_yen {
		font-size: 20px;
	}
	.sm_total_ex {
		margin-top: 14px;
		font-size: 12.5px;
	}
	.sm_total_note {
		font-size: 12px;
		text-align: left;
	}
	.sm_share_menu {
		width: calc(100vw - 40px);
		max-width: 340px;
	}
	.sm_res_grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.sm_ask {
		position: static;
		order: -1;
		padding: 32px 22px 28px;
		border-radius: 16px;
	}
	.sm_ask_tl {
		font-size: 20px;
	}
	.sm_bd {
		padding: 28px 20px 24px;
		border-radius: 16px;
	}
	.sm_bd_list li {
		grid-template-columns: 28px 1fr auto;
		padding: 14px 0;
	}
	.sm_bd_item {
		font-size: 13.5px;
	}
	.sm_bd_price .gf {
		font-size: 15px;
	}
	.sm_bd_links {
		flex-direction: column;
		align-items: flex-start;
	}
	.sm_ai {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 16px;
		padding: 30px 22px;
		border-radius: 16px;
	}
	.sm_cost_tbl thead {
		display: none;
	}
	.sm_cost_tbl tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px 12px;
		padding: 12px 0;
		border-bottom: 1px solid rgba(11, 33, 61, .08);
	}
	.sm_cost_tbl th,
	.sm_cost_tbl td {
		padding: 0;
		border-bottom: none;
	}
	.sm_cost_tbl tbody th {
		width: auto;
	}
	.sm_cost_tbl tbody td:nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: 13px;
		color: var(--font-sub);
	}
	.sm_faq_q {
		font-size: 14.5px;
	}
	.sm_tools {
		margin-top: 16px;
		padding: 30px 20px 22px;
		border-radius: 16px;
	}
	.sm_tools_grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 20px;
	}
	.sm_tool {
		padding: 22px 20px;
	}
	.sm_tool .sm_btn {
		min-width: 0;
	}
	.sm_fit {
		margin-top: 16px;
		padding: 30px 22px 22px;
		border-radius: 16px;
	}
	.sm_fit_plan {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 16px 18px;
	}
	.sm_co {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 16px;
		padding: 30px 22px;
		border-radius: 16px;
	}
	.sm_co_logo {
		min-height: 0;
		padding: 22px;
	}
	.sm_co_logo img {
		max-width: 150px;
	}
	.sm_tools_tl,
	.sm_fit_tl,
	.sm_co_tl,
	.sm_ai_tl {
		font-size: 19px;
	}
	.sm_ai_cmp li {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.sm_ai_price div {
		padding: 12px 16px;
	}
	.sm_ai_price .is_ai .gf {
		font-size: 28px;
	}
	.sm_modal {
		align-items: flex-end;
		padding: 0;
	}
	.sm_modal_box {
		max-height: 94vh;
		max-height: 94dvh;
		border-radius: 14px 14px 0 0;
		transform: translateY(40px);
	}
	.sm_modal_head {
		padding: 22px 20px 0;
	}
	.sm_modal_tl {
		font-size: 20px;
	}
	.sm_modal .form_area {
		padding: 0 20px 28px;
	}
	.sm_aid_form {
		padding: 0 20px 28px;
	}
	.sm_done {
		padding: 12px 20px 32px;
	}
	.rf_head {
		padding: 22px 20px 14px;
	}
	.rf_tl {
		font-size: 19px;
	}
	.rf_body {
		padding: 20px 20px 26px;
	}
	.rf_step_tl {
		font-size: 18px;
	}
	.rf_big {
		grid-template-columns: 1fr;
	}
	.rf_big_o {
		padding: 18px 18px 16px;
	}
	.rf_foot {
		padding: 10px 16px;
	}
	.rf_saved {
		display: none;
	}
	.rf_foot .sm_btn {
		flex: 0 1 60%;
		width: auto;
		min-width: 0;
		height: 52px;
	}
	.rf_box .hr_cards {
		grid-template-columns: 1fr;
	}
	.rf_merits {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.rf_tx {
		font-size: 14px;
	}
	.rf_tip_tl {
		font-size: 15px;
	}
	.rf_flow li {
		gap: 14px;
		font-size: 13.5px;
	}
	.sm_done_tl {
		font-size: 21px;
	}
}