@charset "utf-8";
/* ===================================================================
 電気ちりとりNeo ZN-DP75 / ページ独自スタイル

 - デザインカンプ : desktop.svg（1366px基準） / mobile.svg（430px基準）
 - 読み込み順     : cm_dc94.css → cm_dc99.css → neo.css（本ファイルで上書き）
 - ブレークポイント : 737px / 736px（common.css・cm_dc94.css に準拠）
 - 記述範囲       : #neo #wrap 内。#zj_ma17-info（既存）には影響させない
 - サイズ指定     : PC = clamp(下限, vw, カンプ実寸) / SP = vw（430px基準で等倍拡縮）
=================================================================== */


/* ===================================================================
 ベース
=================================================================== */
#neo #wrap {
	position: relative;
	width: 100%;
	color: #000;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0;
}
#neo #wrap * { box-sizing: border-box; }
#neo #wrap img { max-width: 100%; vertical-align: bottom; }
#neo #wrap ul { list-style: none; margin: 0; padding: 0; }
#neo #wrap h2,
#neo #wrap h3,
#neo #wrap p { margin: 0; }

/* -------------------------------------------------------------------
 固定背景（bg.jpg）
 iOS Safari は background-attachment:fixed が正しく動作しない（スクロール
 追従しない・描画が欠ける）ため、position:fixed の疑似要素で実装している。
 100lvh はアドレスバー収納時にも下端に隙間が出ないようにするための指定。
------------------------------------------------------------------- */
#neo #wrap::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100lvh;
	background: url(../img/bg.jpg) no-repeat center center;
	background-size: cover;
	opacity: .61;
	z-index: -1;
	pointer-events: none;
}


/* ===================================================================
 メインビジュアル
=================================================================== */
#neo #wrap #main {
	position: relative;
	z-index: 1;
	line-height: 0;
}
#neo #wrap #main img {
	display: block;
	width: 100%;
	height: auto;
}


/* ===================================================================
 gNav（既存 #zj_ma17-gNav のカスタム）
 ※ cm_dc94.css 側は変更せず、ここで上書きする
=================================================================== */
#neo #wrap #zj_ma17-gNav { background: #de8293; }
#neo #wrap #zj_ma17-gNav li a {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-weight: 500;
	letter-spacing: 0;
}

@media screen and (min-width:737px) {
	/* 既存の width:600px を踏襲しつつ、指定のなかった中央寄せを追加 */
	#neo #wrap #zj_ma17-gNav ul.inner {
		width: 600px;
		max-width: 100%;
		margin: 0 auto;
	}
	#neo #wrap #zj_ma17-gNav li { font-size: 18px; }

	/* position:sticky は親（#wrap）の範囲までしか追従しないため、
	   #wrap の外にある #zj_ma17-info でナビが消えてしまう。
	   common.js が KV を過ぎた時点で付与する .fixed を使って fixed に切り替え、
	   ページ末尾まで残す（cm_dc94.css 側でコメントアウトされている指定を有効化）。
	   ナビが浮くぶん（60px）は、次要素 #o1 のアンカー補正 margin-top:-60px を
	   0 に戻すことでちょうど相殺され、切り替え時のガタつきは発生しない。 */
	#neo #wrap #zj_ma17-gNav.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	#neo #wrap #zj_ma17-gNav.fixed + #o1 { margin-top: 0; }
}

@media screen and (max-width:736px) {
	#neo #wrap #zj_ma17-gNav { border-bottom: none; }
	#neo #wrap #zj_ma17-gNav p.spOnly {
		padding: 0 20px;
		background-position: right 20px center;
		background-size: 20px;
		font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
		font-size: 18px;
		font-weight: 500;
	}
	#neo #wrap #zj_ma17-gNav p.spOnly.active {
		background-position: right 20px center;
		background-size: 20px;
	}
	#neo #wrap #zj_ma17-gNav li { font-size: 16px; }
}


/* ===================================================================
 主な特徴（#o1）

 padding-top と margin-top の相殺はアンカー位置の補正。
 既存（#zj_ma17-info 等）と同じ流儀に揃え、z-index を降順にしている。
 padding 部分が上の要素を覆わないよう、背景は内側の .neo-card に持たせる。
=================================================================== */
#neo #wrap #o1 {
	position: relative;
	z-index: 70;
	margin-top: -60px;      /* アンカー補正（既存セクションと同値） */
	padding-top: 60px;
}

#neo #wrap .neo-card {
	width: 87.7%;           /* 1198 / 1366 */
	max-width: 1198px;
	margin: 2.2% auto 0;    /* 30px = gNav とカードの間隔（カンプ実寸） */
	background: #fff;
	border-radius: 20px;
}
#neo #wrap .neo-card > .inner {
	width: 83.64%;          /* 1002 / 1198 */
	margin: 0 auto;
	padding: 6.1% 0 5.8%;   /* 上 73px / 下 70px 相当 */
	text-align: center;
}

/* --- 見出し --- */
#neo #wrap .neo-ttl {
	color: #de8293;
	font-size: clamp(20px, 2.05vw, 28px);
	font-weight: 700;
	line-height: 1.4;
}
#neo #wrap .neo-ttl strong {
	display: block;
	margin-top: 3px;
	color: #000;
	font-size: clamp(28px, 2.93vw, 40px);
	font-weight: 700;
	line-height: 1.35;
}

/* --- カード内メイン写真 --- */
#neo #wrap .neo-card-photo {
	width: 78.44%;          /* 786 / 1002 */
	margin: 4.01% auto 0;
	line-height: 0;
}
#neo #wrap .neo-card-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* --- メリット画像 --- */
#neo #wrap .neo-merits {
	width: 598px;
	margin: 3.99% auto 0;
}
#neo #wrap .neo-merits img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* --- ほうきアタッチメント --- */
#neo #wrap .neo-ttl-02 { margin-top: 10.26%; }

#neo #wrap .neo-attach {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 4.01%;
}
#neo #wrap .neo-attach > li { width: 48.7%; }   /* 488 / 1002 */
#neo #wrap .neo-attach .ph { line-height: 0; }
#neo #wrap .neo-attach .ph img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 488 / 218;
	object-fit: cover;
	object-position: center center;
	border-radius: 6px;
}
#neo #wrap .neo-attach .cap {
	margin-top: .75em;
	font-size: clamp(21px, 2.2vw, 30px);
	font-weight: 700;
	line-height: 1.4667;
}


/* ===================================================================
 使い方 / Point 1〜4（#image）
=================================================================== */
#neo #wrap #image {
	position: relative;
	z-index: 60;
	width: 100%;
	margin-top: -60px;      /* アンカー補正（既存セクションと同値） */
	padding-top: 60px;
	/* 次に続く #zj_ma17-info は margin-top:-60px で重なってくるため、
	   その分（60px）を打ち消したうえでセクション間の余白 60px を確保する。
	   さらに #zj_ma17-info 側の padding-top:60px ＋ .inner の padding-top:50px が
	   加わるので、Point4 と「商品写真」見出しの間隔は 170px になる */
	padding-bottom: 120px;
}
#neo #wrap .neo-points {
	width: 87.7%;           /* 1198 / 1366 */
	max-width: 1198px;
	margin: 2.93% auto 0;   /* 40px = カードとの間隔（カンプ実寸） */
}
#neo #wrap .neo-points .point {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#neo #wrap .neo-points .point + .point { margin-top: 3.34%; }  /* 40 / 1198 */
/* 1・3ブロックはテキストを左に（カンプの互い違い配置） */
#neo #wrap .neo-points .point:nth-of-type(odd) {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
#neo #wrap .neo-points .ph,
#neo #wrap .neo-points .tx {
	width: 50%;
	aspect-ratio: 599 / 408;
}
#neo #wrap .neo-points .ph { line-height: 0; }
#neo #wrap .neo-points .ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
/* 製品カット（白地・中央配置） */
#neo #wrap .neo-points .ph-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #fff;
}
#neo #wrap .neo-points .ph-item img {
	width: auto;
	height: 85.3%;         /* 348 / 408 */
	max-width: 80%;
	object-fit: contain;
}

#neo #wrap .neo-points .tx {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0 6%;
	background: #de8293;
	color: #fff;
	text-align: center;
}
#neo #wrap .neo-points .tx h3 {
	font-size: clamp(25px, 2.64vw, 36px);
	font-weight: 700;
	line-height: 1.4444;
}
#neo #wrap .neo-points .tx .num {
	display: block;
	margin-bottom: 2.28%;   /* 12 / 527 */
	font-size: clamp(14px, 1.46vw, 20px);
	font-weight: 700;
	line-height: 1;
}
#neo #wrap .neo-points .tx p {
	margin-top: 4.93%;      /* 26 / 527 */
	color: rgba(255,255,255,.7);
	font-size: clamp(11px, 1.17vw, 16px);
	font-weight: 400;
	line-height: 2;
}


/* -------------------------------------------------------------------
 製品情報の注記（tableと同幅・少し下・下マージン）
 #zj_ma17-info は #wrap の外にあるため #neo 直下で指定する
------------------------------------------------------------------- */
#neo #zj_ma17-info table {
	margin-bottom: 0;
}
#neo #zj_ma17-info p.te {
	width: 900px;
	max-width: 100%;
	margin: 1em auto 60px;
	box-sizing: border-box;
}


/* ===================================================================
 SP（〜736px）／ カンプ mobile.svg（430px基準）
=================================================================== */
@media screen and (max-width:736px) {

	/* カンプ準拠でナビをメインビジュアルの上に表示（HTMLの並び順は変更しない）。
	   SPではスクロール0の時点でヘッダー直下に固定される位置関係のため、
	   sticky ではなく fixed にしている。
	   sticky だと親（#wrap）の範囲でしか追従せず、#wrap の外にある
	   #zj_ma17-info（商品写真・製品情報）でナビが消えてしまうため。
	   ナビが浮くぶんの高さ 50px は #wrap の padding-top で確保する。 */
	#neo #wrap { padding-top: 50px; }
	#neo #wrap #zj_ma17-gNav {
		position: fixed;
		top: 50px;              /* SPヘッダー（.spHeader）の高さ */
		left: 0;
		width: 100%;
		z-index: 2600;          /* 既存 .fixed と同値。.spHeader（9999）より下 */
	}

	/* --- 主な特徴 --- */
	#neo #wrap #o1 {
		margin-top: -100px;   /* アンカー補正（既存 SP 値に準拠） */
		padding-top: 100px;
	}
	#neo #wrap .neo-card {
		width: 95.35%;        /* 410 / 430 */
		max-width: none;
		margin-top: 2.56%;    /* 11px 相当・メインビジュアルとの間隔 */
		border-radius: 10px;
	}
	#neo #wrap .neo-card > .inner {
		width: 90.24%;        /* 370 / 410 */
		padding: 10.6% 0 9.5%;
	}

	#neo #wrap .neo-ttl { font-size: 4.884vw; }          /* 21px */
	#neo #wrap .neo-ttl strong { font-size: 6.977vw; }   /* 30px */

	#neo #wrap .neo-card-photo {
		width: 100%;
		margin-top: 6%;
	}

	#neo #wrap .neo-merits {
		width: 100%;
		margin-top: 5.41%;
	}

	#neo #wrap .neo-ttl-02 { margin-top: 13.86%; }

	/* SPは縦積み */
	#neo #wrap .neo-attach {
		display: block;
		margin-top: 5.45%;
	}
	#neo #wrap .neo-attach > li { width: 100%; }
	#neo #wrap .neo-attach > li + li { margin-top: 7.86%; }
	#neo #wrap .neo-attach .ph img { aspect-ratio: 370 / 165; }
	#neo #wrap .neo-attach .cap {
		margin-top: 1em;
		font-size: 3.721vw;   /* 16px */
		line-height: 1.5;
	}

	/* --- 使い方 / Point 1〜4 --- */
	#neo #wrap #image {
		margin-top: -100px;   /* アンカー補正 */
		padding-top: 100px;
		/* #zj_ma17-info の margin-top:-100px を打ち消したうえで間隔を確保。
		   SPは .inner の padding-top が 0 のため、Point4 と「商品写真」見出しの
		   間隔はそのまま 130px になる */
		padding-bottom: 130px;
	}
	#neo #wrap .neo-points {
		width: 95.35%;        /* 410 / 430 */
		max-width: none;
		margin-top: 9.07%;    /* 39px 相当・カードとの間隔 */
	}
	/* SPは「画像 → テキスト」の縦積み（HTMLの並び順のまま） */
	#neo #wrap .neo-points .point { display: block; }
	#neo #wrap .neo-points .point:nth-of-type(odd) {
		-ms-flex-direction: row;
		flex-direction: row;
	}
	#neo #wrap .neo-points .point + .point { margin-top: 4.88%; }   /* 20 / 410 */
	#neo #wrap .neo-points .ph,
	#neo #wrap .neo-points .tx {
		width: 100%;
		aspect-ratio: 410 / 279;
	}
	#neo #wrap .neo-points .tx { padding: 0 4.88%; }
	#neo #wrap .neo-points .tx h3 { font-size: 6.047vw; line-height: 1.4231; }  /* 26px */
	#neo #wrap .neo-points .tx .num {
		margin-bottom: 2.56vw;   /* 11px */
		font-size: 4.651vw;      /* 20px */
	}
	#neo #wrap .neo-points .tx p {
		margin-top: 3.49vw;      /* 15px */
		font-size: 3.721vw;      /* 16px */
		line-height: 2;
	}

	/* 製品情報の注記（SPはtableと同様に幅100%＋左右3%） */
	#neo #zj_ma17-info p.te {
		width: 100%;
		padding: 0 3%;
		margin: 1em auto 40px;
	}
}