@charset "utf-8";

/* ----------------------------------------------------------------------- 
kojokicho index hero
-------------------------------------------------------------------------*/
.hero {
	padding-bottom:50px;
}
.hero .flex__block {
	border-top:1px #e2e2e2 solid;
	border-bottom:1px #e2e2e2 solid;
	background-color: #fff;
}

.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%;
	}
}



ul.indent-1 li {
	text-indent: -2em;
	padding-left: 2em;
}
ul.indent-2 li {
	text-indent: -1em;
	padding-left: 1em;
}
.table_default tr th,
.table_default tr td {
	vertical-align: middle;
}
.column-three {
	justify-content: space-between;
}
.column-three .column-three_child .column-three_image img {
	width: 320px;
}
/* [2026-07-23 FB] ネスト構造前提の旧セレクタ＝module化後のフラットな
   class="column-two column-two_default mt-pc-20" には一致せず不使用。
   下部の .mt-pc-20（単独クラス）に置き換え。
.column-two .column-two_default .mt-pc-20 {
	margin-top: 20px;
}
*/

@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.column-three {
		flex-direction: column;
		flex-wrap: unset;
	}
	.column-three .column-three_child {
		margin-top: 10px;
	}
	.column-three .column-three_child .column-three_image img {
		width: 100%;
	}
	.page-kojokicho .column-three_child {
    border-top: none !important;
    border-left: none !important;
	}
	.column-two_default .column-two_child {
		margin-top: 10px;
		margin-bottom: 0;

	}
	/* [2026-07-23 FB] 同上の理由（ネスト前提の旧セレクタ）で不使用。
	.column-two .column-two_default {
		margin-top: 10px;
	}
	*/
	.sec03 .section a.btn_link:last-of-type {
		margin-top: 10px;
	}
	/* [2026-07-23 FB] 同上。下部の .mt-pc-20 に統合。
	.column-two .column-two_default .mt-pc-20 {
		margin-top: 0;
	}
	*/
}

/* -----------------------------------------------------------------------
[2026-07-23 FB] mt-10/20/40/60・mb-10・mt-pc-20 は旧v3 common.css
（fan/common/_data-files/common/v3/css/common.css）が定義していた汎用
余白ユーティリティ。module化でこのファイルを読まなくなり定義が消失し、
本ページ内でこれらのクラスを持つ要素の余白が軒並み0になっていた
（column-two/h3_blue/ul.indent-1 等、複数箇所に影響）。旧v3の値のまま
jet_nozzle専用に複製移植。
-------------------------------------------------------------------------*/
.mt-10 {
	margin-top: 10px;
}
.mt-20 {
	margin-top: 20px;
}
.mt-40 {
	margin-top: 40px;
}
.mt-60 {
	margin-top: 60px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mt-pc-20 {
	margin-top: 20px;
}

@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.mt-pc-20 {
		margin-top: 0;
	}
}

/* ----------------------------------------------------------------------- 
250723 textLink
-------------------------------------------------------------------------*/

.page-kojokicho .text_link {
	text-decoration: underline !important;
}

/* [2026-07-21制定 §15／7/23分] h3_blue の下余白が過大化。旧base=v3 common.css は h3_blue の下余白を
   PC padding-bottom:30px／SP padding-bottom:15px にしていたが、module style.css には SP 圧縮指定が無く
   30pxのまま肥大。崩れ（下余白）のみ移管前相当へ圧縮し、他fanページと余白を揃える。
   ※下線(#cfcfcf罫線)・font-size22px は新デザインとして維持。当ファイルは jet_nozzle 専用読込。
   [2026-07-23 FB] ユーザー指示により旧コードとして不使用（コメントアウト）。
.page-kojokicho .h3_blue {
	padding: 0;
	margin-bottom: 10px;
}
*/

/* -----------------------------------------------------------------------
[2026-07-23 §15-9(f)] bottom_nav（カタログバナー2つ）の基底ルールが
共有CSS（kojokicho/common.css・index.css）に無く、liが横並びにならず
崩れていた（kojokicho本体も同様に未対応だが編集禁止のため放置）。
handdry/case.css の移植例（v3共通相当）に倣い、jet_nozzle専用に追加。
-------------------------------------------------------------------------*/
.page-kojokicho .bottom_nav .middle_section ul {
	width: 976px;
	margin: 0 auto;
	padding: 10px 0 0 0;
}
.page-kojokicho .bottom_nav .middle_section ul li {
	margin: 0 0 10px 16px;
	float: left;
}
.page-kojokicho .bottom_nav .middle_section ul li:first-child {
	margin-left: 0;
}
.page-kojokicho .bottom_nav .clearfix:after {
	display: block;
	clear: both;
	content: "";
}

@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-kojokicho .bottom_nav .middle_section ul {
		width: 100%;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.page-kojokicho .bottom_nav .middle_section ul li {
		display: inline-block;
		width: calc((100% - 15px) / 2);
		vertical-align: top;
		margin: 0 15px 15px 0;
		float: none;
	}
	.page-kojokicho .bottom_nav .middle_section ul li:nth-child(2n) {
		margin-right: 0;
	}
}

/* -----------------------------------------------------------------------
[2026-07-23 §15-1症状1] module .h3_blue の margin-top:40px は
assets/css/style.css で PC専用メディア（min-width:641px）内にあり、
SPで上余白が消える。§15-8方式でSP側に個別復元。
-------------------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-kojokicho .h3_blue {
		margin-top: 40px;
	}
}

/* -----------------------------------------------------------------------
[2026-07-23 FB] .tableScroll は module標準（assets/css/style.css）に定義が無く、
旧v3 common.css（fan-common。module化でjet_nozzleは読込対象外）にのみ存在した
ため定義が消失し、本番（www2.panasonic.biz）とローカルでスクロール挙動が
不一致になっていた。本番の実CSS（www2.panasonic.biz/jp/common/v3/css/common.css）
をPlaywrightで直接検証し、SP専用（overflow:auto・横スクロール・スクロールバー装飾・
「左右にスクロールしてご覧ください」ヒント文言）と判明。本番の値のまま複製移植。
-------------------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.tableScroll > div {
		overflow: auto;
		white-space: nowrap;
	}
	.tableScroll table.table_default {
		margin: 10px 0;
	}
	.tableScroll::before {
		content: "左右にスクロールしてご覧ください <--->";
	}
	.tableScroll > div::-webkit-scrollbar {
		height: 8px;
	}
	.tableScroll > div::-webkit-scrollbar-thumb {
		background: #bcbcbc;
	}
	.tableScroll > div::-webkit-scrollbar-track-piece:start,
	.tableScroll > div::-webkit-scrollbar-track-piece:end {
		background: #f1f1f1;
	}
}

/* -----------------------------------------------------------------------
[2026-08-24 CB] 仕様：圧力損失（NK-20JNA追加）
・画像内に焼き込んでいた「■圧力損失」を h4 見出しへ変更（Figma準拠で上下余白20px）
・圧力損失図とPDFリンクを機種別2カラム（column-two_default）に変更し、
  1カラム内に「仕様書」「取扱説明書」の2ボタンを横並び（gap 8px）で配置
-------------------------------------------------------------------------*/
.page-kojokicho .sec03 .h4_default {
	margin-top: 20px;
	margin-bottom: 20px;
}
.page-kojokicho .sec03 .btn_group {
	display: flex;
	gap: 8px;
	margin-top: 50px;
	/* [2026-08-25 FB] Figmaでは「仕様書」側に self-stretch が入り、2行の「取扱説明書」と
	   同じ高さ（78px）で揃う。上揃え（flex-start）だと1行ボタンだけ背が低くなるため stretch に変更。 */
	align-items: stretch;
}
.page-kojokicho .sec03 .btn_group .btn_link {
	flex: 1 1 0;
	min-width: 0;
	/* 1カラム幅（235px）に「仕様書（PDF）はこちら」が1行で収まるよう左右余白を圧縮 */
	padding-left: 15px;
	padding-right: 10px;
	/* [2026-08-25 FB] 高さを揃えた分、1行ボタンの文字を上下中央へ。
	   縦並び（column）にすることで p は従来どおり横幅いっぱいに広がり、矢印の位置は変わらない。 */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	/* SPは2ボタンを横並びにすると窮屈なため縦積み。画像との間隔も圧縮 */
	.page-kojokicho .sec03 .btn_group {
		flex-direction: column;
		gap: 10px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
}