@charset "utf-8";

/* fan独立方針: biz style.css非読込のためのPC/SP幅制御・共通nav表示 */
/* MENUナビ表示（style.css非読込のhide打消し兼保険） */
.page-sofuki #hamburger_nav_area { display: block; }
/* タッチ時=SP解放 */
.touch .page-sofuki #container { min-width: 0; }
/* SP(touch)時は共有ヘッダーのPC用共通nav(holdings-titlenav)を非表示 */
.touch .page-sofuki .titlenavigation.holdings-titlenav { display: none; }
/* 非タッチ(PC)=980維持=旧一致 */
.no-touch .page-sofuki #container { min-width: 980px; }
/* reset.cssのbody灰色背景を白で覆う */
#page { background-color: #fff; }

/* custom */
.page-sofuki .bottom_nav {
    margin: 20px 0;
}
.page-sofuki .bottom_nav .middle_section {
    background: #fff;
}

/* ----------------------------------------------------------------------- 
sofuki common
-------------------------------------------------------------------------*/
.page-sofuki .pc-only {
    display: block;
}
.page-sofuki .sp-only {
    display: none;
}

.flex__block {
	display: flex;
}
.flex__block.just-spabe {
	justify-content: space-between;
}
.flex__block.just-flexen {
	justify-content: flex-end;
}
.flex__block.flexdir-row-r {
	flex-direction:row-reverse;
}
.flex__block.just-ce {
	justify-content: center;
}
.flex__block.flex-wr {
	flex-wrap: wrap;
}
.flex__block.align-flexen {
	align-items: flex-end;
}
.flex__block.align-ce {
	align-items: center;
}
.flex-sp__block {
	display: block;
}

.page-sofuki .t-center {
	text-align: center;
}
.page-sofuki .t-right {
	text-align: right;
}

.page-sofuki span.custom-note--num {
	display: inline-block;
	font-size:12px;
	vertical-align: top;
}
.page-sofuki .note--text {
	margin-top:10px;
	font-size:12px;
}
.page-sofuki .note--text span.text--co2 {
	font-size:10px;
}
.page-sofuki span.text--co2 {
	display: inline-block;
	font-size:12px;
	vertical-align:baseline;
}
.page-sofuki h3.text--blue {
	color:#06417e;
}
.page-sofuki .custom-h3_area h3 span {
	font-size:16px;
	font-weight:normal;
}
.page-sofuki .custom-h3_area.gray {
	padding:5px 10px;
	color:#858585;
	background-color: #e2e2e1;
}

/* SP Responsive (sofuki common)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-sofuki .pc-only {
		display: none;
	}
	.page-sofuki .sp-only {
		display: block;
	}
	.flex__block {
		display: block;
	}
	.flex-sp__block {
		display: flex;
	}
	.flex-sp__block.align-ce {
		align-items: center;
	}
	.page-sofuki .t-right {
		text-align: left;
	}

	/*common custom*/
	.page-sofuki .column-three_child {
		border-top:10px #fff solid !important;
		border-left:none !important;
	}
	/* /common custom*/
}


/* ----------------------------------------------------------------------- 
sofuki tree
-------------------------------------------------------------------------*/

.page-sofuki .flex__block.flex__block--tree {
	padding:20px;
	background-color: #d2ecfa;
}
.page-sofuki .flex__block.flex__block--tree .flex__block--left {
	width:50%;
}
.page-sofuki.page-cabinetfan05 .flex__block.flex__block--tree .flex__block--left {
	width:48%;
}
.page-sofuki .flex__block.flex__block--tree .flex__block--right {
	width:48%;
	text-align: center;
}
.page-sofuki.page-cabinetfan05 .flex__block.flex__block--tree .flex__block--right {
	width:50%;
	text-align: center;
}
.page-sofuki .flex__block.flex__block--tree .flex__block--right img {
	width:365px;
}
.page-sofuki.page-cabinetfan05 .flex__block.flex__block--tree .flex__block--right img {
	width:478px;
}
.page-sofuki .flex__block.flex__block--tree .custom-h3_area {
	margin-bottom:10px;
}
.page-sofuki .flex__block.flex__block--tree .custom-h3_area h3 {
	font-size:22px;
	font-weight: 900;
}
.page-sofuki .flex__block.flex__block--tree .area-text {
	font-size:16px;
	margin-bottom:10px;
}


/* SP Responsive (sofuki tree)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-sofuki .flex__block.flex__block--tree .flex__block--left {
		width:100%;
	}
	.page-sofuki .flex__block.flex__block--tree .flex__block--right {
		width:100%;
	}
	.page-sofuki.page-cabinetfan05 .flex__block.flex__block--tree .flex__block--left {
		width:100%;
	}
	.page-sofuki.page-cabinetfan05 .flex__block.flex__block--tree .flex__block--right {
		width:100%;
	}
	.page-sofuki.page-cabinetfan05 .flex__block.flex__block--tree .flex__block--right img {
		width:100%;
	}
	.page-sofuki .flex__block.flex__block--tree .flex__block--left {
		margin-bottom:20px;
	}

}




/* ----------------------------------------------------------------------- 
sofuki feature
-------------------------------------------------------------------------*/
/* [2026-07-27 社内FB] cabinetfan02 FB「h2のすぐ下の表、画像、説明文の背景グレートル」により薄グレー(#f9f9f9)を撤去。
   このブロックの背景は2層あり、本ルール＝表・画像・説明文をまとめて包む面の背景。
   「消音形」等の見出しセルのグレー帯（下方の .text--title th＝#eee）は、
   別FB（見出しを16px/bold・グレー帯の天地調整）が帯の存在を前提としているため維持する。
   なお .flex__block.feature__block を実際に使うページは cabinetfan02 のみ
   （cf01/03/05 は column-two_caption へ置換済みでコメント上の記載のみ）。 */
/* .page-sofuki .flex__block.feature__block .flex__block--left , .page-sofuki .flex__block.feature__block .flex__block--right {
	background-color: #f9f9f9;
} */
.page-sofuki .flex__block.feature__block {
	margin-bottom:50px;
}
.page-sofuki .noflex__block.feature__block {
	margin-bottom:10px;
	text-align: center;
	background-color: #f9f9f9;
}
.page-sofuki .noflex__block.feature__block img {
	width:478px;
}

.page-sofuki .flex__block.feature__block dl , .page-sofuki .noflex__block.feature__block dl {
	background-color: #eee;
}
.page-sofuki .flex__block.feature__block dl dt , .page-sofuki .noflex__block.feature__block dl dt {
	display: block;
	padding:11px 12px;
	font-size:18px;
	font-weight:700;
	text-align: left;
}
.page-sofuki .flex__block.feature__block dl dd , .page-sofuki .noflex__block.feature__block dl dd {
	padding:11px 12px;
	font-size:16px;
	text-align: left;
	border-top:2px #fff solid;
}

.page-sofuki .flex__block.feature__block dl dd , .page-sofuki .noflex__block.feature__block dl dd {
	padding:11px 12px;
	font-size:16px;
	border-top:2px #fff solid;
}
.page-sofuki .flex__block.feature__block table {
	font-size:14px;
}
.page-sofuki .flex__block.feature__block table th {
	width:20%;
	font-size:18px;
	text-align: left;
	border-bottom:2px #fff solid;
	border-right:2px #fff solid;
}
.page-sofuki .flex__block.feature__block table th img { 
	width:100%;
}
.page-sofuki .flex__block.feature__block table td {
	border-right:2px #fff solid;
}
.page-sofuki .flex__block.feature__block table td , .page-sofuki .flex__block.feature__block table th {
	padding:11px 12px;
}
.page-sofuki .flex__block.feature__block table .text--title th {
	background-color: #eee;
}


.page-sofuki .flex__block.feature-texts__block .flex__block--left , .page-sofuki .flex__block.feature-texts__block .flex__block--right {
	width:49%;
}
.page-sofuki .flex__block.feature-texts__block .flex__block--left img , .page-sofuki .flex__block.feature-texts__block .flex__block--right img {
	width:478px;
}
.page-sofuki .flex__block.feature-texts__block ul {
	font-size:20px;
	border:1px #ccc solid;
}
.page-sofuki .flex__block.feature-texts__block ul li {
	padding:5px 15px;
	border-bottom:1px #ccc solid;
}
.page-sofuki .flex__block.feature-texts__block ul li:last-child {
	border-bottom:none;
}
.page-sofuki .flex__block.feature-texts__block ul li.txt--blue span {
	color:#1d2087;
}
.page-sofuki .flex__block.feature-texts__block ul li.txt--red span {
	color:#e50012;
}

/* SP Responsive (sofuki feature)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-sofuki .flex__block.flex__block--tree .flex__block--left {
		width:100%;
	}
	.page-sofuki .flex__block.flex__block--tree .flex__block--right {
		width:100%;
	}
	.page-sofuki .flex__block.feature__block table th {
		font-size:16px;
	}

	.page-sofuki .flex__block.feature-texts__block .flex__block--left , .page-sofuki .flex__block.feature-texts__block .flex__block--right {
		width:100%;
	}
	.page-sofuki .flex__block.feature-texts__block .flex__block--left img , .page-sofuki .flex__block.feature-texts__block .flex__block--right img {
		width:100%;
	}
	.page-sofuki .flex__block.feature-texts__block ul {
		font-size:4.7vw;
	}
}

/* [§15（2026-07-21制定）／7/23分・2026-07-22 SP余白統一] module .h3_blue はSP時に上余白が消える
   （style.css の .h3_blue{margin-top:40px} は @media (min-width:641px)＝PC専用のため）。
   その結果、custom-h3_area→h3_blue 置換後の各見出しがSPで詰まり、セクションごとに余白がバラバラに見えていた。
   7/17標準（netsuko .page-netsuko .sec03 .h3_blue{margin-top:40px}）に倣い、sofuki全ページ共通で
   SP時に module標準の上余白40px（＝PC値と同一）を復元し、見出しのSP余白を統一する。
   下余白は各ページ§15の .h3_blue{margin-bottom:10px} で統一済み。個別に上余白を変える見出し
   （例：cabinetfan03 .sec03 .pc-mt{margin-top:50px}）は同specificity＋後読みで従来どおり優先される。 */
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-sofuki .h3_blue {
		margin-top: 40px;
	}
}

/* [2026-07-27 社内FB] キャプションカードのグレー帯に出ていた矢印・ホバーの打ち消しは、
   同じ状態が kojokicho の商品ラインアップでも起きたため、fan配下共通の base.css へ移した。
   （sofuki だけでなくキャプションカードを使う全ページが対象になるため）
   → 実装は /hvac-cc/biz/products/fan/css/base.css を参照。 */