@charset "utf-8";

/* 
## お見積りシミュレーション
## 入力画面（延べ床面積の坪数）と、シミュレーション結果（プランを横並び）の装飾。
## 表示内容はすべて管理画面「価格表(非公開)」ブロックの登録内容。 
*/

/*==================================================================================================================*/
/*カスタムブロック＞お見積り*/
/*---------------------------------------------------------*/
/*ブロック全体*/
.easys_content:has(.simulation_input_head) .entry_post > div {
	font-size: 16px;
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp > div {
	margin-right: 0;
	margin-left: 0;
	font-size: 14px;
}

/*input number*/
.easys_content:has(.simulation_input_head) .entry_post > div > div table tr td input[type='number'] {
	margin: 0;
	padding: 5px 10px;
	width: 120px;
	height: auto;
	vertical-align: middle;
	text-align: right;
	font-weight: bold;
	font-size: 24px;
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp > div > div table tr td input[type='number'] {
	padding: 5px 10px;
	width: 90px;
	font-size: 20px;
}

/*table*/
.easys_content:has(.simulation_input_head) .entry_post > div > div table {
	margin: 0 0 40px 0;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 12px; /*左右は隙間なし／問と入力行の間隔のみ*/
	table-layout: fixed;
}
.easys_content:has(.simulation_input_head) .entry_post > div > div table tr th,
.easys_content:has(.simulation_input_head) .entry_post > div > div table tr td {
	padding: 10px 5px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--table_border_color);
	vertical-align: middle;
	text-align: center;
	line-height: 1.7;
}
.easys_content:has(.simulation_input_head) .entry_post > div > div table tr th {
	background-color: var(--th_background_color);
	color: var(--th_character_color);
	text-align: right;
}
.easys_content:has(.simulation_input_head) .entry_post > div > div table tr td {
	background-color: var(--td_background_color);
	color: var(--td_character_color);
}
/*問（質問タイトル）*/
.easys_content:has(.simulation_input_head) .entry_post > div > div table tr:first-of-type th {
	text-align: left;
}

#outer_block .easys_content:has(.simulation_input_head) .entry_post > div > div table tr > *:first-child:last-child {
	border-right: 1px solid var(--table_border_color);
	border-left: 1px solid var(--table_border_color);
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp > div > div table {
	margin: 0 0 30px 0;
	table-layout: auto;
}
.easys_content:has(.simulation_input_head) .entry_post.sp > div > div table tr th {
	text-align: left;
}
/* ID指定で「important」指定を上書き */
#outer_block .easys_content:has(.simulation_input_head) .entry_post.sp > div > div table tr th {
	width: auto !important;
}

/*坪*/
.easys_content:has(.simulation_input_head) .select0 p.tsubo {
	display: inline-block;
	margin: 0;
	margin-left: 5px;
	font-weight: bold;
}

/*---------------------------------------------------------*/
/*入力画面ヘッダ*/
.easys_content:has(.simulation_input_head) .entry_post > div .simulation_input_head {
	width: 100%;
}

/*---------------------------------------------------------*/
/*入力画面スクロール部*/
.easys_content:has(.simulation_input_head) .entry_post > div .simulation_input_scroll {
	display: none;
	width: 100%;
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp > div .simulation_input_scroll {
	overflow-x: scroll;
}

/*---------------------------------------------------------*/
/*横スクロールメッセージ*/
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp > div .sp_message {
	color: #ff0000;
	font-weight: bold;
	font-size: 12px;
}

/*---------------------------------------------------------*/
/*入力画面フッタ*/
.easys_content:has(.simulation_input_head) .entry_post > div .simulation_input_foot {
	width: 100%;
}

/*---------------------------------------------------------*/
/*シミュレーション結果*/
.easys_content:has(.simulation_input_head) .simulation_result {
	clear: both;
	width: 100%;
}
.easys_content:has(.simulation_input_head) .result_ttl {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	color: var(--body_text_color);
	font-weight: bold;
	font-size: 20px;
}
/*対応範囲外のお知らせ　※PC・SPとも赤文字*/
.easys_content:has(.simulation_input_head) p.result_alert {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #ff0000;
	border-radius: 5px;
	color: #ff0000;
	font-weight: bold;
	font-size: 13px;
	line-height: 1.8;
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp .result_ttl {
	font-size: 16px;
}

/*---------------------------------------------------------*/
/*プラン（登録された数だけ横並び）*/
.easys_content:has(.simulation_input_head) .plan_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

	gap: 20px;
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp .plan_list {
	grid-template-columns: minmax(0, 1fr);

	gap: 14px;
}

.easys_content:has(.simulation_input_head) .plan_box {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border_color);
	border-radius: 8px;
	background-color: var(--basic_background_color);

	/*4枚目以降のプランの色*/
	--plan_color: #7a5aa8;
}
/*プランごとの色分け（登録された並び順）*/
.easys_content:has(.simulation_input_head) .plan_list .plan_box:nth-child(1) {
	--plan_color: #257118;
}
.easys_content:has(.simulation_input_head) .plan_list .plan_box:nth-child(2) {
	--plan_color: #07518B;
}
.easys_content:has(.simulation_input_head) .plan_list .plan_box:nth-child(3) {
	--plan_color: #E45208;
}

/*プラン名・耐用年数*/
.easys_content:has(.simulation_input_head) .plan_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 14px 16px;
	min-height: 66px; /*プラン名が1行でも2行でも各カードの見出しの高さを揃える*/
	background-color: var(--plan_color);

	gap: 10px;
}
.easys_content:has(.simulation_input_head) p.plan_name {
	margin: 0;
	color: var(--basic_background_color);
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5;
}
.easys_content:has(.simulation_input_head) p.plan_years {
	flex: 0 0 auto;
	margin: 0;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: var(--basic_background_color);
	color: var(--plan_color);
	text-align: center;
	white-space: nowrap;
	font-weight: bold;
	font-size: 12px;
	line-height: 1.4;
}
.easys_content:has(.simulation_input_head) .plan_years_ttl {
	display: block;
	font-weight: normal;
	font-size: 10px;
}

/*説明文*/
.easys_content:has(.simulation_input_head) p.plan_txt {
	margin: 0;
	padding: 14px 16px 0;
	color: var(--body_text_color);
	font-size: 13px;
	line-height: 1.8;
}

/*金額*/
.easys_content:has(.simulation_input_head) .plan_price {
	margin-top: auto;
	padding: 16px;
	text-align: center;
}
.easys_content:has(.simulation_input_head) p.plan_price_ttl {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 12px;
	border-radius: 999px;
	background-color: var(--kdb_background_color);
	color: var(--body_text_color);
	font-size: 12px;
	line-height: 1.6;
}
.easys_content:has(.simulation_input_head) p.plan_price_val {
	margin: 0;
	color: #ff0000;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.3;
	word-break: break-all;
}
.easys_content:has(.simulation_input_head) .price_num {
	font-size: 30px;
	letter-spacing: 0.02em;
}
/*「～」を数字の高さの中央に置く　※数字の約0.73倍のサイズ＋ベースラインから0.11em上げ*/
.easys_content:has(.simulation_input_head) .price_wave {
	display: inline-block;
	font-size: 22px;
	vertical-align: 0.11em;
}
.easys_content:has(.simulation_input_head) p.plan_note {
	margin: 0;
	padding: 0 16px 14px;
	color: var(--body_text_color);
	text-align: center;
	font-size: 11px;
	line-height: 1.7;
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp .price_num {
	font-size: 26px;
}
.easys_content:has(.simulation_input_head) .entry_post.sp .price_wave {
	font-size: 19px;
}

/*リンクボタン*/
.easys_content:has(.simulation_input_head) p.plan_link {
	margin: 0;
	padding: 0 16px 16px;
	text-align: center;
}
.easys_content:has(.simulation_input_head) p.plan_link a {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--plan_color);
	border-radius: 5px;
	color: var(--plan_color);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.5;
}
.easys_content:has(.simulation_input_head) p.plan_link a:hover {
	background-color: var(--plan_color);
	color: var(--basic_background_color);
}

/*---------------------------------------------------------*/
/*注意事項*/
.easys_content:has(.simulation_input_head) .entry_post > div .notes_message {
	margin: 30px 0 0 0;
}
.easys_content:has(.simulation_input_head) .entry_post > div .notes_message p {
	margin: 0;
	padding: 5px;
	line-height: 24px;
}
/*SP*/
.easys_content:has(.simulation_input_head) .entry_post.sp > div .notes_message {
	margin: 10px 0 0 0;
}

/*==================================================================================================================*/
/*カスタムブロック＞価格表 (非公開)*/
#a4px1voay70e0nzcjuqc {
	display: none;
}