@charset "UTF-8";
/* ============================================================
   静的仮サイト用の追加スタイル
   （お申込み方法＝電話申込の案内、Web 申込画面の代替表示）
   ============================================================ */

/* apply_tel：お申込み方法（電話）
---------------------------------------- */
/* 上下の余白は全ページ共通（トップの「#main section{margin:0 0 35px 0}」より優先させるため #main を付ける） */
.apply_tel,
#main section.apply_tel{
	clear:both;
	box-sizing:border-box;
	width:100%;
	max-width:784px;
	margin:0px auto 60px auto;
	padding:0 0 25px 0;
	border:3px solid #F18D00;
	border-radius:10px;
	background-color:#FFF;
	text-align:left;
	overflow:hidden;
}
.apply_tel .apply_tel__title{
	background-color:#F18D00;
	color:#FFF;
	font-size:20px;
	font-weight:bolder;
	text-align:center;
	padding:12px 0 10px 0;
	margin:0 0 20px 0;
	line-height:120%;
	border:none;
}
.apply_tel .apply_tel__lead{
	font-size:18px;
	font-weight:bolder;
	text-align:center;
	/* 上下に 8px ずつ足す（2026-10-29 ユーザー指示。元は上 0・下 15px）
	   上は見出しの margin-bottom と相殺されるので padding で足す */
	margin:0 20px 23px 20px;
	padding-top:8px;
	line-height:150%;
}
/* リード文（システム停止のお知らせ）：PC・タブレットでは 1 文を 1 行に収める
   1 文目は約 53 文字分の幅があるので、字間を詰め（palt・-0.04em）、左右の余白を 10px にし、
   枠の幅に合わせて文字の大きさを決める（16px〜13px。cqi＝枠の幅の 1%。13px でも収まらない狭い幅では折り返す） */
@media screen and (min-width:641px){
	.apply_tel{
		container-type:inline-size;
	}
	.apply_tel .apply_tel__lead{
		margin-left:10px;
		margin-right:10px;
		font-size:min(16px, max(13px, calc((100cqi - 20px) / 53)));
		font-feature-settings:"palt";
		letter-spacing:-0.04em;
		text-wrap:balance;
	}
}
.apply_tel .apply_tel__box{
	margin:0 30px 25px 30px;
	padding:18px 20px 15px 20px;
	background-color:#FEF4E5;
	border-radius:8px;
	text-align:center;
}
.apply_tel .apply_tel__box p{
	text-align:center;
}
.apply_tel .apply_tel__center{
	font-size:15px;
	font-weight:bolder;
	margin-bottom:8px;
}
.apply_tel .apply_tel__num{
	display:inline-block;
	width:100%;
	max-width:400px;
}
.apply_tel .apply_tel__num img{
	width:100%;
}
.apply_tel .apply_tel__time{
	font-size:13px;
	line-height:150%;
	margin-top:8px;
}
.apply_tel .apply_tel__caution{
	color:#C00;
	font-size:13px;
	font-weight:bolder;
	line-height:150%;
	margin-top:10px;
	padding-top:10px;
	border-top:1px dotted #F18D00;
}
.apply_tel .apply_tel__flow{
	margin:0 30px 20px 30px;
	counter-reset:none;
}
.apply_tel .apply_tel__flow li{
	display:flex;
	align-items:flex-start;
	margin-bottom:12px;
}
.apply_tel .apply_tel__flow li span.step{
	flex-shrink:0;
	display:block;
	width:32px;
	height:32px;
	line-height:32px;
	border-radius:100%;
	background-color:#33BBB6;
	color:#FFF;
	font-weight:bolder;
	text-align:center;
	margin-right:12px;
}
.apply_tel .apply_tel__flow li p{
	font-size:14px;
	line-height:150%;
	padding-top:5px;
}
.apply_tel .apply_tel__flow li p b{
	display:block;
	color:#33BBB6;
	font-size:15px;
}
/* 流れ③の補足（＊お振込みの確認次第…）：1 つずつ改行し、「＊」の後ろで折り返しをそろえる */
.apply_tel .apply_tel__flow li p .note{
	display:block;
	font-size:12px;
	padding-left:1em;
	text-indent:-1em;
}
.apply_tel .apply_tel__flow li p .note:first-of-type{
	margin-top:4px;
}
.apply_tel .apply_tel__notes{
	margin:0 30px;
	padding-top:15px;
	border-top:1px dotted #999;
}
.apply_tel .apply_tel__notes li{
	font-size:13px;
	line-height:150%;
	padding-left:13px;
	text-indent:-13px;
	margin-bottom:4px;
}
.apply_tel .apply_tel__notes li::before{
	content:"※";
}
.apply_tel .apply_tel__notes li a{
	text-decoration:underline;
}
.apply_tel .apply_tel__notes li em{
	color:#F18D00;
	font-weight:bolder;
	font-style:normal;
}
/* マイページ登録済みの会員様へのお知らせ（注記の下） */
.apply_tel .apply_tel__member{
	margin:12px 30px 0 30px;
	padding:10px 15px;
	background-color:#F5F5F5;
	border-radius:6px;
	font-size:13px;
	line-height:150%;
}
.apply_tel .apply_tel__member .apply_tel__member-title{
	font-weight:bolder;
	margin-bottom:2px;
	/* 狭い画面では「以前に」の後ろ（<wbr>）で折り返す */
	word-break:keep-all;
	overflow-wrap:anywhere;
}
/* 「長期安心修理サポートセンター　お問い合わせ窓口」：狭い画面では「お問い合わせ窓口」を丸ごと次の行へ */
.apply_tel .apply_tel__center .keep{
	display:inline-block;
}


/* detail_apply：商品詳細の右カラム（価格・カートの代替）
---------------------------------------- */
/* 2026-10-28 クライアント要望で電話番号を外し、契約料の案内を残す。
   2026-10-29 枠だけだとスカスカなので、見出し・カタログの表紙・「お申込み方法」への案内を添える */
#main .detail_apply{
	box-sizing:border-box;
	width:100%;
	padding:0 0 18px 0;
	border:2px solid #F18D00;
	border-radius:8px;
	text-align:center;
	margin-bottom:15px;
	overflow:hidden;
}
#main .detail_apply .detail_apply__title{
	background-color:#F18D00;
	color:#FFF;
	font-size:15px;
	font-weight:bolder;
	padding:8px 10px 7px 10px;
	margin-bottom:15px;
}
#main .detail_apply .detail_apply__catalog{
	display:flex;
	align-items:center;
	column-gap:15px;
	margin:0 18px;
	padding-bottom:15px;
	border-bottom:1px dotted #F18D00;
}
#main .detail_apply .detail_apply__thumb{
	flex:0 0 96px;
}
#main .detail_apply .detail_apply__thumb img{
	display:block;
	width:100%;
}
#main .detail_apply .detail_apply__body{
	flex:1 1 0;
	min-width:0;
}
#main .detail_apply .detail_apply__guide{
	font-size:13px;
	line-height:150%;
	margin:15px 18px 10px 18px;
	word-break:keep-all;
	overflow-wrap:anywhere;
}
/* ボタン：お申込み方法へは塗りのオレンジ（下へ移動するので ↓ を付ける）
   白地にオレンジ枠の「カタログを見る」は 2026-10-29 ユーザー指示で削除 */
#main .detail_apply .detail_apply__btn{
	display:block;
	box-sizing:border-box;
	max-width:240px;
	margin:10px auto 0 auto;
	padding:8px 10px;
	border:2px solid #F18D00;
	border-radius:5px;
	background-color:#FFF;
	color:#F18D00;
	font-size:14px;
	font-weight:bolder;
	text-decoration:none;
	transition:opacity .2s;
}
#main .detail_apply .detail_apply__btn:hover{
	opacity:.75;
	text-decoration:none;
}
#main .detail_apply .detail_apply__btn--apply{
	width:calc(100% - 36px);
	background-color:#F18D00;
	color:#FFF;
}
#main .detail_apply .detail_apply__btn--apply::after{
	content:"↓";
	margin-left:.5em;
}
#main .detail_apply .detail_apply__note{
	font-size:14px;
	font-weight:bolder;
	line-height:150%;
	text-align:center;
	/* 「ご確／認」のように語の途中で折り返さず、<wbr> の位置（「契約料は」「を」の後ろ）で折り返す */
	word-break:keep-all;
	overflow-wrap:anywhere;
}
#main .detail_apply .detail_apply__note a{
	text-decoration:underline;
}

/* 商品詳細：商品名（元サイトの h2 と同じ見た目で h1 にしている） */
#main h1.item_name{
	font-size:16px;
	font-size:1.6rem;
	/* 写真との間をあける（2026-10-29 ユーザー指示。元は 8px） */
	margin-bottom:14px;
}
@media only screen and (min-width:768px){
	#main h1.item_name{
		font-size:24px;
		font-size:2.4rem;
		margin-bottom:20px;
	}
}
/* 商品名の後ろの【対応年数タイプ：…】：途中で折り返さず、入らないときは丸ごと次の行へ */
#main h1.item_name .item_years{
	display:inline-block;
	font-size:80%;
}

/* 商品詳細：写真・申込み案内と商品説明の間をあけ、説明文の行間を広げる
   （元の #item_photo_area{margin-bottom:-20px} だと、写真の下端に説明の点線と本文が重なる） */
#main #item_detail_area{
	margin-bottom:30px;
}
@media only screen and (min-width:768px){
	#main #item_photo_area{
		margin-bottom:30px;
	}
}
#main #detail_not_stock_box__description_detail{
	line-height:1.8;
}
#main .item_comment ul.kikilist{
	margin-top:12px;
}
@media screen and (max-width:640px){
	/* 3 列表示：名前の行数の違いで次の段が右へずれないよう、各段の先頭で回り込みを解除する */
	#main .item_comment ul.kikilist li:nth-child(3n+1){
		clear:left;
	}
}

/* 商品詳細：商品説明（DB 由来の <br><br> と <font> の置き換え） */
#main .item_comment .desc_para{
	margin:0;
}
#main .item_comment .desc_para.gap{
	margin-bottom:1.5em;
	margin-bottom:1lh;
}
#main .item_comment .txt_red{
	color:#FF0000;
}

/* トップ：お知らせ（固定の 1 件。dt 内のリンク） */
#news dl dt a{
	text-decoration:underline;
}
/* システム停止のお知らせ（2026-10-29）：右の 45px は開閉の丸い矢印の場所だが、矢印は無いので左と同じ 20px にする
   文章は改行せずに流す（元の CSS の両端揃えのまま） */
#news dl dt{
	padding-right:20px;
}

/* トップ下の商品一覧：320px 前後では商品名が四角（高さ固定）からはみ出すので（2026-10-29）
   - 単品：高さを 3 行分にそろえ、商品名（span.h4_in）を上下中央に置く
   - セット：「システムバスルームセット」が 2 行になるので文字を 1px 小さくして 1 行に収める
   375px 以上は元の見た目のまま */
@media screen and (max-width:359px){
	#contents_bottom div.products_list ul.tanpin li a h4,
	#contents_bottom div.products_list ul.tanpin li a h4.line2,
	#contents_bottom div.products_list ul.tanpin li a h4.line2_sp{
		display:flex;
		align-items:center;
		justify-content:center;
		height:37px;
		padding:0 2px;
	}
	/* 「IHクッキングヒー／ター」のように語の途中で切らず、商品名の <wbr>（PRODUCTS の h4）で折り返す */
	#contents_bottom div.products_list ul.tanpin li a h4 .h4_in{
		display:block;
		word-break:keep-all;
		overflow-wrap:anywhere;
	}
	#contents_bottom div.products_list ul.set li a h4{
		font-size:11px;
	}
}

/* トップ：サービス紹介のボタン 6 つを、2 行になる「特定商取引法に基づく表記」と同じ高さにそろえる
   （grid の 1fr 行で全行を一番高い行に合わせ、文字は上下中央に置く。幅・間隔は元の 31%・3% のまま） */
#contents_bottom #about ul{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-auto-rows:1fr;
	column-gap:3%;
	row-gap:15px;
	margin-bottom:23px;
}
#contents_bottom #about ul::before,
#contents_bottom #about ul::after{
	content:none;
}
#contents_bottom #about ul li,
#contents_bottom #about ul li:nth-child(3n){
	float:none;
	width:auto;
	margin:0;
}
#contents_bottom #about ul li a{
	box-sizing:border-box;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
@media screen and (max-width:640px){
	#contents_bottom #about ul{
		row-gap:12px;
		margin-bottom:12px;
	}
}

/* トップ：メインビジュアル（h1） */
#main section#sec1 h1.top_mv{
	font-size:inherit;
	line-height:inherit;
	margin:0;
}

/* 対象商品一覧：float だと商品名の行数の違いで段違いになるため、行ごとにそろえる（幅・余白は元の指定のまま） */
#product_list{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
}
#product_list h2{
	flex-basis:100%;
}
/* 対象商品一覧：リード文の下の注記（契約料・電話申込み）を外したので、【セット商品】との間をあける */
.product_page h1.page-heading + p{
	margin-bottom:25px;
}

/* カタログ：狭い画面で「【ご注意】」が途中で折り返さないようにする */
#main .catalog .main_inc .attention-kakaku p.attention-kakaku_notes{
	width:auto;
	max-width:none;
	flex-shrink:0;
	white-space:nowrap;
	padding-left:0;
	text-indent:0;
	margin-right:0.5em;
}
/* カタログ：ダウンロードボタンの直前に置く【ご注意】 */
#main .catalog .main_inc .attention-kakaku--pdf{
	margin-top:15px;
	margin-bottom:5px;
}
/* カタログ：資料の紹介（表紙画像＋説明＋ボタン）は float をやめて flex で並べる
   PC：左に表紙（158px）、右に説明。ボタンは下の段に全幅で置く
   （表紙の画像は 2 つとも 316×410px・同じ傾きで作ってあるので、同じ大きさ・傾きで並ぶ） */
#main .catalog .main_inc{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	column-gap:30px;
}
/* clearfix の ::before・::after（bootstrap）が flex の項目になって余分な間隔ができないよう消す */
#main .catalog .main_inc::before,
#main .catalog .main_inc::after{
	content:none;
}
#main .catalog .main_inc > img.pc{
	float:none;
	flex:0 0 158px;
	margin:10px 0 0 2px;
}
#main .catalog .main_inc_right{
	flex:1 1 0;
	min-width:0;
}
#main .catalog .main_inc_right h2,
#main .catalog .main_inc_right p,
#main .catalog .main_inc .attention-kakaku{
	float:none;
	width:auto;
}
#main .catalog .main_inc .btn_wrap{
	flex:0 0 100%;
}
/* SP：説明欄の中で、表紙（90px）と見出しを横に並べ、本文・【ご注意】はその下に全幅で置く */
@media screen and (max-width:640px){
	#main .catalog .main_inc_right{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		column-gap:15px;
	}
	#main .catalog .main_inc_right > img.sp{
		flex:0 0 90px;
		margin:0 0 10px 20px;
	}
	#main .catalog .main_inc_right h2{
		flex:1 1 0;
		min-width:0;
		margin:0 0 10px 0;
	}
	#main .catalog .main_inc_right > p,
	#main .catalog .main_inc_right > .attention-kakaku{
		flex:0 0 100%;
	}
}
/* カタログ：2 つ目の資料（賃貸集合住宅設備用プランのチラシ）は点線で区切る */
#main .catalog .main_inc--chintai{
	border-top:1px dotted #999;
	padding-top:35px;
}

/* 狭い画面で 1〜2 文字だけが次の行に残らないよう、行の長さをそろえて折り返す
   （フッターのバナー説明「…交換部品販売」、対象商品一覧のジアイーノ案内のボタン） */
.ftr_banner2 li span,
.ziaino_link dd a{
	text-wrap:balance;
}
/* フッターのバナー：ハイ・パーツショップを外して 2 つになっても、両端に離れず左から等間隔に並べる */
@media screen and (min-width:641px){
	.ftr_banner2{
		justify-content:flex-start;
		column-gap:28px;
	}
}
/* まごころのフッター：長期安心のバナーだけになったときは、右寄せにせず横幅いっぱいに置く */
@media screen and (max-width:1110px){
	footer div.magokoro #footer_right ul.banner li.anshin:only-child{
		float:none;
		width:100%;
	}
}
/* 「消耗品」などの語の途中では折り返さない（<wbr> の位置でだけ折り返す） */
.ftr_banner2 li span.keep{
	word-break:keep-all;
}

/* 対象商品一覧：価格表の代替 */
#product_list p.item_more{
	color:#3377DB;
	font-size:13px;
	margin-top:6px;
}
#product_list p.item_more::after{
	content:" ＞";
}

/* まごころ：流れ（テキスト版）・会員登録の電話案内
---------------------------------------- */
#magokoro .flow_text{
	text-align:left;
	margin-bottom:30px;
}
#magokoro .flow_text h3{
	font-size:20px;
	color:#333;
	padding-left:28px;
	position:relative;
	margin-bottom:15px;
}
#magokoro .flow_text h3::before{
	content:"";
	position:absolute;
	left:0;
	top:2px;
	width:20px;
	height:20px;
	border-radius:100%;
	background-color:#00AEC4;
}
#magokoro .flow_text ol li{
	display:flex;
	align-items:stretch;
	margin-bottom:8px;
	border:2px solid #00AEC4;
	border-radius:8px;
	overflow:hidden;
}
#magokoro .flow_text ol li p.who{
	flex-shrink:0;
	box-sizing:border-box;
	width:240px;
	padding:10px 12px;
	background-color:#00AEC4;
	color:#FFF;
	font-weight:bolder;
	display:flex;
	align-items:center;
}
#magokoro .flow_text ol li p.what{
	padding:10px 15px;
	line-height:150%;
}
#magokoro .flow_text p.note{
	font-size:13px;
	margin-top:6px;
}
#magokoro .entry_tel{
	clear:both;
	text-align:center;
	margin:10px auto 40px auto;
	padding:25px 20px;
	border:3px solid #F18D00;
	border-radius:10px;
	max-width:760px;
}
#magokoro .entry_tel p{
	text-align:center;
}
#main #magokoro .entry_tel p.end{
	font-size:18px;
	border-top:none;
	padding-top:0;
	margin-bottom:15px;
}
#magokoro .entry_tel .entry_tel__num img{
	width:100%;
	max-width:400px;
}
#magokoro .entry_tel .entry_tel__time{
	font-size:13px;
	line-height:150%;
	margin:8px 0 12px 0;
}
#magokoro .entry_tel .entry_tel__kiyaku a{
	text-decoration:underline;
}

@media screen and (max-width:640px){
	.apply_tel,
	#main section.apply_tel{
		margin:40px auto 40px auto;
		border-width:2px;
	}
	.apply_tel .apply_tel__title{
		font-size:17px;
	}
	.apply_tel .apply_tel__lead{
		font-size:15px;
	}
	.apply_tel .apply_tel__box,
	.apply_tel .apply_tel__flow,
	.apply_tel .apply_tel__notes,
	.apply_tel .apply_tel__member{
		margin-left:15px;
		margin-right:15px;
	}
	.apply_tel .apply_tel__member{
		padding:8px 10px;
		font-size:12px;
	}
	.apply_tel .apply_tel__box{
		padding:15px 10px 12px 10px;
	}
	.apply_tel .apply_tel__flow li p{
		font-size:13px;
	}
	.apply_tel .apply_tel__lead{
		text-align:left;
	}
	.apply_tel .apply_tel__notes li{
		font-size:12px;
	}
	#magokoro .flow_text h3{
		font-size:15px;
	}
	/* SP のアコーディオン内：見出しは dt と同じなので隠し、画像用の幅制限を外す */
	#magokoro .sp_wrap .flow_text h3{
		display:none;
	}
	/* （テキスト版のときだけ。画像のときは元の幅制限のまま） */
	#main #sec4_sp dd:has(> .flow_text),
	#main #sec5_sp dd:has(> .flow_text){
		max-width:none;
	}
	#magokoro .flow_text ol li{
		display:block;
	}
	#magokoro .flow_text ol li p.who{
		width:100%;
		padding:6px 10px;
	}
	#magokoro .flow_text ol li p.what{
		font-size:13px;
	}
	#magokoro .entry_tel{
		padding:20px 12px;
		border-width:2px;
	}
	#main #magokoro .entry_tel p.end{
		font-size:15px;
		text-align:left;
	}
}

/* 特定商取引法に基づく表記：ha_mansion の表記に合わせて足した項目（2026-10-28）
---------------------------------------- */
#main #tradelaw__body dd{
	line-height:170%;
}
#main #tradelaw__body .tel_label{
	font-weight:bolder;
}
#main #tradelaw__body .nowrap{
	white-space:nowrap;
}
/* 箇条書き：「・」の後ろで折り返しをそろえる */
#main #tradelaw__body .tradelaw__list li{
	padding-left:1em;
	text-indent:-1em;
}
#main #tradelaw__body .tradelaw__list li::before{
	content:"・";
}
#main #tradelaw__body .tradelaw__list li + li{
	padding-top:5px;
}
#main #tradelaw__body p + .tradelaw__list{
	margin-top:5px;
}
#main #tradelaw__body .tradelaw__sub{
	font-weight:bolder;
}
#main #tradelaw__body dd a{
	text-decoration:underline;
}

/* 左メニュー：「お申込みはお電話で承ります」を外したあとも、上の線と水色の帯は残す（2026-10-28・29 ユーザー指示）
   帯は元の p（.gnavi__wrap>p）と同じ高さ・色で、文字だけ無い */
.gnavi__wrap::before{
	content:"";
	display:block;
	height:21px;
	background:#E5F2F5;
	border-top:1px solid #cccccc;
}

/* 商品詳細の右上の枠：元の CSS で p・a が左寄せになるので中央にそろえ、「カタログ（PDF）」は途中で折り返さない */
#main .detail_apply .detail_apply__title,
#main .detail_apply .detail_apply__note,
#main .detail_apply .detail_apply__guide,
#main .detail_apply .detail_apply__btn{
	text-align:center;
}
#main .detail_apply .detail_apply__note a{
	white-space:nowrap;
}