/* かんたん見積もりシミュレーター
   配色はサイト基調（ダーク #333 ＋ ライムグリーン #a7da30）に合わせる。 */
.estimate_lead{
	font-size: 1rem;
	line-height: 1.8;
	margin-bottom: 2em;
}

.estimate_form{
	display: grid;
	gap: 1.5em;
}
.estimate_wrap,
.estimate_inputs,
.estimate_block{
	min-width: 0; /* fieldset／グリッドの既定（中身の最小幅）だと、幅 320px で右にはみ出す */
}
.estimate_block{
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 1.2em 1.4em 1.4em;
	background: #fff;
	line-height: 1.6;
}
.estimate_block legend{
	line-height: 1.5;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0 .5em;
	color: #333333;
}
.estimate_options{
	display: flex;
	flex-wrap: wrap;
	gap: .6em .8em;
	margin-top: .8em;
}
.estimate_options label{
	display: inline-flex;
	align-items: center;
	gap: .45em;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	padding: .5em 1em;
	cursor: pointer;
	background: #f7f7f7;
	transition: border-color .15s, background .15s;
	font-size: .95rem;
}
.estimate_options label:hover{
	border-color: #a7da30;
}
.estimate_options input{
	accent-color: #a7da30;
}
.estimate_options input:checked + span{
	font-weight: 700;
	color: #333333;
}

.estimate_result{
	margin-top: 2.4em;
	padding: 1.8em 1.4em;
	border-radius: 12px;
	background: #333333;
	color: #fff;
	text-align: center;
}
.estimate_result_label{
	font-size: .95rem;
	letter-spacing: .08em;
	color: #c3e65a;
	font-weight: 700;
}
.estimate_result_amount{
	font-size: clamp(1.8rem, 5.5vw, 2.6rem);
	font-weight: 800;
	margin: .15em 0;
	line-height: 1.25;
	white-space: nowrap;
}
.estimate_result_amount .amt_num{
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.estimate_result_amount .amt_prefix,
.estimate_result_amount .amt_suffix{
	font-size: .6em;
	font-weight: 700;
}
.estimate_result_amount .amt_prefix{ margin-right: .1em; }
.estimate_result_amount .amt_suffix{ margin-left: .05em; }

.estimate_result_tax{
	font-size: 1rem;
	opacity: .9;
	margin-top: -.1em;
}
.estimate_result_tax strong{ font-family: "Outfit", sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.estimate_result_note{
	font-size: .82rem;
	opacity: .85;
	margin-top: 1em;
	line-height: 1.7;
}

/* 内訳：行の増減をアニメーション */
.estimate_breakdown{
	list-style: none;
	margin: 1.2em auto 0;
	padding: 1em 0 0;
	max-width: 460px;
	text-align: left;
	border-top: 1px solid rgba(255,255,255,.3);
	font-size: .92rem;
}
.estimate_breakdown li{
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: .3em 0;
	max-height: 4em;
	opacity: 1;
	overflow: hidden;
	transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.estimate_breakdown li b{ font-weight: 700; white-space: nowrap; }
.estimate_breakdown li.is_sub span{ padding-left: 1em; opacity: .92; }
.estimate_breakdown li.row_enter{ max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.estimate_breakdown li.row_show{ max-height: 4em; opacity: 1; padding-top: .3em; padding-bottom: .3em; }
.estimate_breakdown li.row_leaving{ max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

.estimate_noscript{
	margin-top: 1.5em;
	padding: 1em;
	background: #fff4e5;
	border-radius: 8px;
}
.estimate_noscript a{
	color: #333333;
	text-decoration: underline;
}
.estimate_contact_cta{
	margin-top: 2.4em;
}

@media screen and (max-width: 768px){
	.estimate_options label{
		font-size: .9rem;
		padding: .5em .9em;
	}
}

/* 入力（ページ数など） */
.estimate_hint{
	font-size: .85rem;
	color: #6a6a6a;
	margin: .2em 0 .8em;
	line-height: 1.6;
}
.estimate_number{
	display: flex;
	align-items: center;
	gap: .6em;
	margin-top: .4em;
}
.estimate_number input[type="number"]{
	width: 6em;
	font-size: 1.2rem;
	text-align: center;
	padding: .35em .4em;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	font-family: "Outfit", sans-serif;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.num_step{
	width: 2.4em;
	height: 2.4em;
	border: 1px solid #333333;
	background: #fff;
	color: #333333;
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background .15s, color .15s;
}
.num_step:hover{ background: #a7da30; color: #333333; }
.num_unit{ font-size: .95rem; color: #333; white-space: nowrap; }

/* オプションの単価タグ */
.estimate_options .opt_price{
	font-size: .76rem;
	color: #4a4a4a;
	font-weight: 700;
	margin-left: .4em;
	white-space: nowrap;
	font-family: "Outfit", sans-serif;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ===== レイアウト：サイト種別ブロック ＋ 左右2カラム ===== */
.estimate_sitetype{
	background: #f4f7ec;
	border: 1px solid #dbe7c0;
	border-radius: 12px;
	padding: 1.3em 1.4em 1.5em;
	margin-bottom: 0;
}
.estimate_step{
	display: inline-block;
	background: #333333;
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	padding: .3em .9em;
	border-radius: 999px;
	letter-spacing: .06em;
	vertical-align: middle;
}
.estimate_sitetype_title{
	font-weight: 700;
	font-size: 1.08rem;
	margin-left: .6em;
}
.estimate_sitetype_note{
	display: block;
	font-size: .85rem;
	color: #6a6a6a;
	margin-top: .6em;
	line-height: 1.6;
}
.estimate_sitetype_options{ margin-top: 1em; }

.estimate_wrap{
	display: flex;
	gap: 2em;
	align-items: flex-start;
}
.estimate_inputs{
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	gap: 1.4em;
}
.estimate_inputs .estimate_step{ justify-self: start; }
.estimate_aside{
	flex: 0 0 340px;
	position: sticky;
	top: 20px;
}
.estimate_aside .estimate_result{ margin-top: 0; }
.estimate_aside .estimate_contact_cta{ margin-top: 1em; }

@media screen and (max-width: 900px){
	.estimate_wrap{ flex-direction: column; }
	.estimate_aside{ position: static; flex-basis: auto; width: 100%; }
}

/* インタビュー人数（チェックON時のみ表示） */
.interview_count_wrap{
	display: none;
	align-items: center;
	gap: .6em;
	margin-top: .9em;
	padding: .8em 1em;
	background: #f4f7ec;
	border: 1px dashed #ccd9ad;
	border-radius: 8px;
}
.interview_count_wrap.is_open{ display: flex; flex-wrap: wrap; }
.interview_count_label{ font-size: .9rem; font-weight: 700; color: #333; }

/* 「基本一式」の内訳 */
.estimate_base_detail{
	margin-top: 1.8em;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background: #fff;
	padding: .2em 1.2em;
}
.estimate_base_detail summary{
	cursor: pointer;
	font-weight: 700;
	padding: .9em 0;
	color: #333;
}
.estimate_base_detail ul{ list-style: none; margin: 0 0 1em; padding: 0; font-size: .92rem; }
.estimate_base_detail li{
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: .4em 0;
	border-bottom: 1px dashed #eee;
}
.estimate_base_detail li.is_total{ border-bottom: none; border-top: 2px solid #333; margin-top: .3em; font-weight: 700; }
.estimate_base_detail b{
	font-family: "Outfit", sans-serif;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

/* 「基本一式」行を黒いブロック（内訳）内で開閉表示 */
.estimate_breakdown li.has_sub{ display: block; padding: 0; max-height: none; overflow: visible; }
.bd_details summary{
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .3em 0;
	cursor: pointer;
	list-style: none;
}
.bd_details summary::-webkit-details-marker{ display: none; }
.bd_details summary .bd_name{ flex: 1 1 auto; }
.bd_details summary b{ font-weight: 700; white-space: nowrap; }
.bd_details summary::after{
	content: '＋';
	font-family: "Outfit", sans-serif;
	opacity: .75;
	flex: 0 0 auto;
}
.bd_details[open] summary::after{ content: '－'; }
.bd_subitems{
	list-style: none;
	margin: .1em 0 .6em;
	padding: .5em .8em;
	background: rgba(255,255,255,.08);
	border-radius: 6px;
	font-size: .85rem;
}
.estimate_breakdown .bd_subitems li{ padding: .25em 0; opacity: .9; max-height: none; overflow: visible; }
.bd_subitems b{
	font-family: "Outfit", sans-serif;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

/* 見出し（legend）が箱の上辺をまたがないよう、float して枠内の見出しとして扱う
   （float した legend は切り欠きを作らない）。fieldset の既定の左右 margin も消す */
.estimate_block{
	margin: 0;
}
.estimate_block legend{
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 .5em;
	line-height: 1.6;
	text-wrap: balance;
}
.estimate_block legend + *{
	clear: both;
}
.estimate_block .estimate_options{
	margin-top: 0;
}

/* STEP 1 の選択肢：6個を3個ずつ2行にそろえる */
@media screen and (min-width: 768px){
	.estimate_sitetype_options{
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 内訳の金額の右端をそろえる：開閉の＋／－は金額の外（黒い箱の余白）に出す */
.bd_details summary{
	position: relative;
}
.bd_details summary::after{
	position: absolute;
	left: 100%;
	top: 50%;
	margin-left: .3em;
	transform: translateY(-50%);
}
/* 注記は左揃えにして、語の途中で折らない */
.estimate_result_note{
	text-align: left;
	word-break: auto-phrase;
}

/* ===== スマホ ===== */
@media screen and (max-width: 767px){
	/* 冒頭文の下にページ背景のドット模様が透けないように */
	.estimate_lead{
		background: #f5f5f5;
	}
	/* STEP 1 もピルを独立した行にして、STEP 2 と同じ構成にする */
	.estimate_sitetype_head .estimate_step{
		display: table;
		margin-bottom: .5em;
	}
	.estimate_sitetype_title{
		display: block;
		margin-left: 0;
	}
	/* 金額は項目名の下の行に置き、左端をそろえる */
	.estimate_options .opt_price{
		display: block;
		margin-left: 0;
	}
	/* 結果の箱と相談ボタンを近づけ、左右の端をそろえる */
	.btn_centered.estimate_contact_cta{
		margin-top: 0;
		padding: 8px 0 40px;
	}
}