@charset "utf-8";

/* ----------------------------------------------------------------------- 
kojokicho index 
-------------------------------------------------------------------------*/
.page-kojokicho {
	/* font-size: 16px; //新モジュールに伴い非表示*/
}

/* .page-kojokicho .h2_default h2 {
    font-size:22px; //新モジュールに伴い非表示
} */
/* [2026-07-24] custom-h3_area→h3_blue(moduleクラス)へ全面置換のため死にルール化。記録として残置。
.page-kojokicho .custom-h3_area {
	margin-bottom: 10px;
	font-size: 18px;
}
*/

/* -----------------------------------------------------------------------
[2026-07-24] module h3_blue の上余白(margin-top:40px)は assets/css/style.css の
PC専用メディア（min-width:641px）内にしか無くSPで消える（§15-1/§15-8方式）。
SP側に個別復元。下余白はmodule標準（padding-bottom:30px）のまま採用（積極的module化）。
-------------------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-kojokicho .h3_blue {
		margin-top: 40px;
	}
}

.page-kojokicho .area-text {
	font-size: 16px;
	margin-bottom: 20px;
}

.page-kojokicho .sec01 {
	/* font-size: 16px; */
}

.page-kojokicho .bdr-gray {
	border: 1px #ccc solid;
}


.page-kojokicho .flex__block {
	margin-bottom: 50px;
}

.page-kojokicho .flex__block .flex__block--left,
.page-kojokicho .flex__block .flex__block--right {
	width: 49%;
}

.page-kojokicho .flex__block .flex__block--left img,
.page-kojokicho .flex__block .flex__block--right img {
	width: 478px;
}

.page-kojokicho .noflex__block {
	margin-bottom: 20px;
}

.page-kojokicho .noflex__block img {
	width: 100%;
}


/* SP Responsive (kojokicho index)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {

	.page-kojokicho .flex__block .flex__block--left,
	.page-kojokicho .flex__block .flex__block--right {
		width: 100%;
	}

	.page-kojokicho .flex__block .flex__block--left img,
	.page-kojokicho .flex__block .flex__block--right img {
		width: 100%;
	}

	.page-kojokicho .flex__block--left {
		margin-bottom: 50px;
	}

	.page-kojokicho .noflex__block {
		margin-bottom: 25px;
		padding-left: 0;
	}
}



/* ----------------------------------------------------------------------- 
kojokicho index hero
-------------------------------------------------------------------------*/
.hero {
	padding-bottom: 50px;
}

.hero .flex__block {
	border-top: 1px #e2e2e2 solid;
	border-bottom: 1px #e2e2e2 solid;
	background-color: #f2f2f2;
}

.hero .flex__block .flex__block--left {
	width: 489px;
}

.hero .flex__block .flex__block--right {
	width: 600px;
}

.hero .flex__block .flex__block--left img,
.hero .flex__block .flex__block--right img {
	width: 100%;
}

/* SP Responsive (kojokicho index hero)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.hero {
		padding-bottom: 10px;
	}

	.hero .flex__block .flex__block--left {
		width: 100%;
		text-align: center;
		margin-bottom: 0;
	}

	.hero .flex__block .flex__block--right {
		width: 100%;
		margin-bottom: 0;
	}

	.hero .flex__block .flex__block--left img {
		width: 85%;
	}
}


/* ----------------------------------------------------------------------- 
kojokicho index sec02
-------------------------------------------------------------------------*/
.sec02 .flex__block.flex__block--01 .flex__block--right .area-text {
	height: 191px;
}

/* SP Responsive (kojokicho index sec02)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.sec02 .flex__block.flex__block--01 .flex__block--right .area-text {
		height: auto;
	}
}


/* ----------------------------------------------------------------------- 
kojokicho index sec03
-------------------------------------------------------------------------*/
.sec03 .flex__block.flex__block--01 .flex__block--left .area-text {
	height: 69px;
}

/* [2026-07-27 社内FB] FB「『全体空調より少ないエネルギーで冷房ができる。』のh3と画像が被っている」
   右カラムの見出しに高さ54pxを固定していたが、見出しをモジュール化して文字が大きくなった結果、
   実際の見出し高さが77pxになり、はみ出した23px分が下の画像に重なっていた。
   左カラムは高さ指定が無く自然に77pxになっているため、この固定指定を外すと左右が同じ高さで揃い、
   画像の開始位置のズレ（23px）も解消する。※本指定は kojokicho のみに該当（jet_nozzle は対象要素なしで無影響）。 */
/* .sec03 .flex__block.flex__block--02 .flex__block--right .h3_blue {
	height: 54px;
} */

/* SP Responsive (kojokicho index sec03)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.sec03 .flex__block.flex__block--01 .flex__block--left .area-text {
		height: auto;
	}
}




/* ----------------------------------------------------------------------- 
kojokicho index sec04
-------------------------------------------------------------------------*/
.page-kojokicho .sec04 .area-text {
	font-size: 14px;
}

.page-kojokicho .sec04 .area-text.mt {
	margin-top: 20px;
}

.page-kojokicho .sec04 .noflex__block {
	margin-bottom: 50px;
}

.sec04 .table--comparison {
	width: 100%;
	margin-bottom: 20px;
	border-bottom: 1px #999 solid;
	border-left: 1px #999 solid;
}

.sec04 .table--comparison td,
.sec04 .table--comparison th {
	padding: 5px 10px;
	font-size: 18px;
	border-top: 1px #999 solid;
	border-right: 1px #999 solid;
}

.sec04 .table--comparison td {
	text-align: center;
}

.sec04 .table--comparison th.bg--yel {
	text-align: left;
	font-weight: normal;
	background-color: #fffac6;
}

.sec04 .table--comparison th.bg--gray {
	font-weight: normal;
	background-color: #e9e5e2;
}

.sec04 .table--comparison th.bg--pink {
	font-weight: normal;
	background-color: #fceef4;
}

.sec04 .table--comparison .subtitle {
	width: 20px;
	line-height: 1.2;
}

.sec04 .pc-mr {
	margin-right: 10px;
}

/* SP Responsive (kojokicho index sec04)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.sec04 .table--comparison td {
		padding: 5px 1px;
	}

	.sec04 .table--comparison td.sp-text-left {
		padding: 5px;
	}

	.sec04 .table--comparison th {
		padding: 5px 3px;
	}

	.sec04 .table--comparison th.bg--yel {
		text-align: center;
	}

	.sec04 .table--comparison th.bg--yel.sp-text-left {
		text-align: left;
		padding: 5px 0 5px 5px;
	}

	.sec04 .table--comparison th.bg--yel.subtitle {
		width: 8%;
		text-align: center;
		line-height: 1.2;
	}

	.sec04 .table--comparison td.sp-text-left {
		text-align: left;
	}

	.sec04 .pc-mr {
		margin-right: 0;
	}
}

@media only screen and (max-width: 500px) {

	.sec04 .table--comparison td,
	.sec04 .table--comparison th {
		font-size: 3.6vw;
	}

	.page-kojokicho .sec04 .table--comparison span.custom-note--num {
		font-size: 2.5vw;
	}
}

@media only screen and (max-width: 420px) {

	.sec04 .table--comparison td,
	.sec04 .table--comparison th {
		font-size: 3.3vw;
	}

	.page-kojokicho .sec04 .table--comparison span.custom-note--num {
		font-size: 2.3vw;
	}
}


/* ----------------------------------------------------------------------- 
kojokicho index sec05
-------------------------------------------------------------------------*/

.sec05 {
	padding-bottom: 40px;
}

/* [2026-07-24] 対応するHTML（コメントアウト済の赤外線ワイヤレスリモコン節）が非表示のため元々死にルール。custom-h3_area→h3_blue置換に伴い記録として残置。
.sec05 .custom-h3_area {
	margin-top: 40px;
}
*/

.sec05 .column-four_cat-title .comment {
	padding-top: 5px;
	font-size: 14px;
	font-weight: normal;
}

.sec05 .column-two_text ul {
	display: flex;
	justify-content: center;
}

.sec05 .column-two_text ul li {
	margin: 0 30px;
}

.sec05 .column-two_text ul li a {
	display: inline-block;
	padding: 0 30px 0 0;
	background: url(/hvac-cc/biz/products/fan/common/_data-files/common/v2/img/icon_large-arow_black.png) no-repeat 96% 80%;
	background-size: 8px 10px;
}

.sec05 .column-two_text ul li a span {
	font-size: 16px;
	font-weight: 700;
}

.sec05 .column-two_child.custom-column-two_child {
	width: 49%;
	margin-right: 18px;
	overflow: hidden;
	float: left;
}

.sec05 .column-two_child.custom-column-two_child img {
	width: 478px;
}

.sec05 .column-two_child.custom-column-two_child:nth-child(2n) {
	margin-right: 0;
}

/* SP Responsive (kojokicho index sec05)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.sec05 .column-two_child.custom-column-two_child {
		width: 100%;
		margin-right: 0;
		float: none;
		border-top: 6px #fff solid;
	}

	.sec05 .column-four_cat-title .comment {
		font-size: 12px;
	}

	.sec05 .column-two_text ul {
		justify-content: space-around;
	}

	.sec05 .column-two_text ul li {
		margin: 0 5% 0 0;
	}

	.sec05 .column-two_text ul li:last-child {
		margin: 0;
	}

	.sec05 .column-two_default .column-two_child .column-two_text li+li {
		margin-top: 0;
	}
}


/* ----------------------------------------------------------------------- 
kojokicho index sec06
-------------------------------------------------------------------------*/
.page-kojokicho .sec06 .flex__block {
	margin-bottom: 20px;
}

.sec06 .flex__block.inner__block {
	margin-bottom: 0;
}

.sec06 .flex__block.inner__block li img {
	width: 232px;
}

.sec06 .flex__block .inner__block li {
	width: 49%;
}

.sec06 .flex__block .inner__block li .area-text {
	margin-top: 6px;
	font-size: 14px;
}

/* SP Responsive (kojokicho index sec06)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.sec06 .flex__block.inner__block {
		display: flex;
	}

	.page-kojokicho .sec06 .flex__block--left {
		margin-bottom: 20px;
	}

	.sec06 .flex__block.inner__block li img {
		width: 100%;
	}
}

/* [2026-07-21修正] sec05 ラインアップのグレーカード（column-two_child.bg-gray）が内側paddingゼロで
   画像・型番が枠に詰まって見えるため内側余白を付与（products01と同症状・同方針＝グレー維持しpadding）。
   画像は width:478px 固定でpad時にはみ出しoverflow:hiddenでクリップされるため width:100% に変更。
   box-sizing:border-box で49%幅は不変。※7/23分。SP時の画像フィット含め実機で最終目視確認推奨。 */
.page-kojokicho .sec05 .column-two_child.custom-column-two_child {
	box-sizing: border-box;
	padding: 20px;
}
.page-kojokicho .sec05 .column-two_child.custom-column-two_child img {
	width: 100%;
}
@media screen and (max-width: 640px) {
	.page-kojokicho .sec05 .column-two_child.custom-column-two_child {
		padding: 15px;
	}
}

/* -----------------------------------------------------------------------
[2026-07-27 社内FB] sec05 商品ラインアップを cabinetfan01 上部と同イメージ（6-2キャプションカード）へ変更。
グレーカードをやめたため、以下は参照ゼロ＝死にルールになったが記録として残置する：
  ・.sec05 .column-two_child.custom-column-two_child 系（幅49%・float・内側padding・画像幅）
  ・.sec05 .column-four_cat-title .comment（商品名下の補足文）
カード幅・間隔・画像フィットはモジュール標準（.column-two_caption）に委ねる。
本セクションの変更は kojokicho のみに影響（bg-gray / custom-column-two_child / column-four_cat-title は
いずれも jet_nozzle では未使用）。
-------------------------------------------------------------------------*/

/* 商品名下の補足文（取扱最大風量〜）の文字設定を、旧 column-four_cat-title から引き継ぐ */
.page-kojokicho .sec05 .column-two_text .comment {
	padding-top: 5px;
	font-size: 14px;
	font-weight: normal;
}

/* [2026-07-27 社内FB] FB「比較表の『全体空調方式』『VZ部分空調方式』をセンター揃えにしますか？」→ センター揃えにする。
   各列のデータはすでに中央寄せのため、見出しだけが左寄せで揃っていなかった。
   左端の見出し列（黄色地）は従来どおり左寄せのまま。※本表は kojokicho のみで使用（jet_nozzle では未使用）。 */
.page-kojokicho .sec04 .table--comparison th.bg--gray,
.page-kojokicho .sec04 .table--comparison th.bg--pink {
	text-align: center;
}
@media screen and (max-width: 640px) {
	.page-kojokicho .sec05 .column-two_text .comment {
		font-size: 12px;
	}
}