@charset "utf-8";
/* =============================================================================
 * スマホ共通ナビ（2026-10-15 試作）  spnav.css
 *   959px以下（スマホ・タブレット）だけで使う。クラスは spn- で始まるものだけ（今のページのCSSに当たらない）。
 *   影は使わない。左だけ太い線は使わない。配色はPC共通ヘッダーと同じ（青 #0b5cad・見積り #e8590c）。
 * ========================================================================== */
.spn-hd, .spn-cat, .spn-dr, .spn-bt { display: none; }

@media screen and (max-width: 959px) {
	:root { --spn-blue: #0b5cad; --spn-cta: #e8590c; --spn-ink: #1f2933; --spn-sub: #5b6876; --spn-line: #e1e8f0; --spn-bg: #f4f7fb;
		--spn-hd-h: 62px; --spn-cat-h: 0px; --spn-bt-h: 72px; --spn-safe: 0px; }
	/* --spn-safe は 0（iPhoneの安全領域を足すと、下部ボタンだけが持ち上がってチャットのボタンとずれた。チャットと同じく下端から固定の距離で置く。2026-10-15） */

	/* ---- 今のスマホ用の部品（このナビに置き換えるもの）を隠す ---- */
	/* 今のヘッダー（固定・z-index 2000000）は、スマホでは中身がすべて置き換え対象なので箱ごと隠す（固定なので本文の位置は動かない） */
	header[id^="header_new"] { display: none !important; }
	#mdropmenu, #spBtn, .outlet-banner, #gs-cart-chip { display: none !important; }
	/* 今の商材ページは、商材メニュー帯（44px）の分だけ本文を下げている。帯をやめたのでその分を詰める */
	/* 本文の最後が下部ボタンに隠れないように */
	body { padding-bottom: calc(var(--spn-bt-h) + 16px) !important; }
	/* 見出しへ移動したとき固定ヘッダーの下に隠れないように */
	section[id], h2[id], h3[id], [id].anchor { scroll-margin-top: calc(var(--spn-hd-h) + var(--spn-cat-h) + 12px); }

	.spn-hd, .spn-cat, .spn-dr, .spn-bt { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: var(--spn-ink); -webkit-text-size-adjust: 100%; box-sizing: border-box; }
	.spn-hd *, .spn-cat *, .spn-dr *, .spn-bt * { box-sizing: border-box; }
	.spn-hd a, .spn-cat a, .spn-dr a, .spn-bt a { text-decoration: none; }
	.spn-hd ul, .spn-cat ul, .spn-dr ul { margin: 0; padding: 0; list-style: none; }
	.spn-hd li, .spn-cat li, .spn-dr li { margin: 0; padding: 0; }
	.spn-hd li::before, .spn-cat li::before, .spn-dr li::before { content: none; }
	.spn-i { width: 22px; height: 22px; flex: none; }
	.spn-hd :focus-visible, .spn-cat :focus-visible, .spn-dr :focus-visible, .spn-bt :focus-visible { outline: 3px solid #f59f00; outline-offset: 2px; }

	/* ---- 1. 上部ヘッダー（高さ62px＝今のヘッダーと同じなので、本文の位置は変わらない） ---- */
	.spn-hd { display: flex; align-items: center; gap: 6px; position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: var(--spn-hd-h); padding: 0 8px 0 10px; background: #fff; box-shadow: 0 2px 10px rgba(15, 35, 60, .14); }
	/* ↑ ヘッダーとパンくずの間の影はユーザー指示（2026-10-15）。サイトの「影は使わない」の例外 */
	.spn-hd__logo { display: flex; align-items: center; flex: none; height: 48px; }
	.spn-hd__logo img { display: block; width: 125px; height: auto; }
	/* 35周年の印（PCヘッダーの35周年画像から金の「35th」だけを切り出したもの） */
	.spn-hd__35 { display: block; flex: none; width: 59px; height: 40px; margin-left: 2px; }
	/* 保証の盾：枠を付けず画像だけ（ユーザー支給の 10年保証の盾.psd を書き出したもの） */
	.spn-hd__grt { display: block; flex: none; margin: 0 4px 0 auto; line-height: 0; }
	.spn-hd__grt img { display: block; width: 46px; height: 52px; }
	/* カゴ・メニュー：同じ大きさの2つのボタンを1組にする */
	.spn-hd__act { display: flex; flex: none; gap: 6px; }
	.spn-hd__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none; width: 54px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: #eef3f9; color: #12385f; font: inherit; cursor: pointer; transition: background .15s; }
	.spn-hd__btn .spn-i { width: 22px; height: 22px; stroke-width: 2.2; }
	.spn-hd__btn:active { background: #dfe8f3; }
	.spn-hd__menu { background: var(--spn-blue); color: #fff; }
	.spn-hd__menu:active { background: #094a8c; }
	html.spn-open .spn-hd__menu { background: #12385f; }
	.spn-hd__t { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
	.spn-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #fff; border-radius: 10px; background: var(--spn-cta); color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; box-sizing: border-box; }
	.spn-badge[hidden] { display: none; }

	/* ---- 2. 商材メニュー帯（「（写真）給湯器メニュー ▼」。下へ読み進める間は引っ込み、上へ戻すと出る） ---- */
	.spn-cat { display: block; position: fixed; top: var(--spn-hd-h); left: 0; right: 0; z-index: 8990; height: var(--spn-cat-h); padding: 0 8px; background: #fff; border-bottom: 1px solid var(--spn-line); transition: transform .2s ease; }
	html.spn-cat-off .spn-cat { transform: translateY(calc(-1 * var(--spn-cat-h) - var(--spn-hd-h))); }
	.spn-cat__b { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin: 4px 0 0; padding: 0 6px 0 4px; border: 0; border-radius: 10px; background: linear-gradient(90deg, #0b5cad, #1477d4); color: #fff; font: inherit; text-align: left; cursor: pointer; }
	.spn-cat__img { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fff; overflow: hidden; }
	.spn-cat__img img { width: 28px; height: 28px; object-fit: contain; }
	.spn-cat__n { flex: none; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
	.spn-cat__here { min-width: 0; margin-left: auto; padding: 2px 9px; border-radius: 11px; background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.spn-cat__ar { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; background: #fff; color: var(--spn-blue); }
	.spn-cat__here + .spn-cat__ar { margin-left: 6px; }
	.spn-cat__ar .spn-i { width: 16px; height: 16px; stroke-width: 2.6; }

	/* ---- 3. メニュー本体（右から出る） ---- */
	.spn-dr { display: block; position: fixed; inset: 0; z-index: 9100; visibility: hidden; pointer-events: none; }
	html.spn-open .spn-dr { visibility: visible; pointer-events: auto; }
	.spn-dr__bg { position: absolute; inset: 0; background: rgba(15, 23, 32, .5); opacity: 0; transition: opacity .2s ease; }
	html.spn-open .spn-dr__bg { opacity: 1; }
	.spn-dr__p { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(92vw, 420px); background: #f3f6fa; transform: translateX(100%); transition: transform .22s ease; outline: 0; }
	html.spn-open .spn-dr__p { transform: none; }
	@media (prefers-reduced-motion: reduce) { .spn-dr__p, .spn-dr__bg, .spn-cat { transition: none; } }
	.spn-dr__hd { display: flex; align-items: center; justify-content: space-between; flex: none; height: 56px; padding: 0 8px 0 16px; background: #fff; border-bottom: 1px solid var(--spn-line); }
	.spn-dr__ttl { margin: 0; font-size: 16px; font-weight: 700; }
	.spn-dr__x { display: flex; align-items: center; gap: 4px; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: #eef3f9; color: var(--spn-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
	.spn-dr__x .spn-i { width: 18px; height: 18px; }
	.spn-dr__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 12px calc(24px + var(--spn-safe)); }
	.spn-i--s { width: 14px; height: 14px; stroke-width: 2.4; }

	/* 見出し */
	.spn-h { margin: 0 2px 10px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px !important; font-weight: 700; line-height: 1.4; color: var(--spn-ink) !important; }
	.spn-h3 { margin: 16px 2px 8px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 13px !important; font-weight: 700; letter-spacing: .04em; color: var(--spn-sub) !important; }
	.spn-h::before, .spn-h::after, .spn-h3::before, .spn-h3::after { content: none !important; }
	.spn-sec { margin: 0 0 22px; }

	/* いまの商材：写真の見出し */
	.spn-cur { margin: 0 0 18px; padding: 0 0 4px; }
	.spn-hero { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #0b5cad 0%, #1a7fd8 100%); color: #fff; }
	.spn-hero__img { display: flex; align-items: center; justify-content: center; flex: none; width: 76px; height: 76px; border-radius: 12px; background: #fff; overflow: hidden; }
	.spn-hero__img img { width: 70px; height: 70px; object-fit: contain; }
	.spn-hero__b { min-width: 0; }
	.spn-hero__h { margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 19px !important; font-weight: 700; line-height: 1.3; color: #fff !important; }
	.spn-hero__h::before, .spn-hero__h::after { content: none !important; }
	.spn-hero__top { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 17px; background: #fff; color: var(--spn-blue); font-size: 13px; font-weight: 700; }
	.spn-hero__top[aria-current="page"] { background: rgba(255, 255, 255, .85); }

	/* メニューの中の切り替え（〇〇メニュー／共通メニュー）。押すとその欄の頭へ送る */
	.spn-dr__tabs { display: flex; flex: none; gap: 6px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--spn-line); }
	.spn-dr__tab { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-width: 0; height: 40px; border-radius: 10px; background: #eef3f9; color: var(--spn-ink); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
	.spn-dr__tab img { width: 22px; height: 22px; object-fit: contain; }
	.spn-dr__tab.is-on { background: var(--spn-blue); color: #fff; }
	.spn-dr__tab.is-on img { border-radius: 4px; background: #fff; }

	/* 共通メニューの見出しの帯 */
	.spn-part--com { margin-top: 24px; }
	.spn-part:first-child { margin-top: 0; }
	.spn-band { display: flex; align-items: center; gap: 8px; margin: 0 -12px 14px !important; padding: 12px 16px !important; border: 0 !important; background: #12385f !important; color: #fff !important; font-size: 16px !important; font-weight: 700; line-height: 1.3; }
	.spn-band::before, .spn-band::after { content: none !important; }
	.spn-band .spn-i { width: 20px; height: 20px; }
	.spn-part--cur .spn-srch { margin: 16px 0 0; }

	/* メーカー：ロゴ（枠なし）を3つずつ、端までそろえて並べる。選んだメーカーは背景の色で示す */
	.spn-mkts { display: flex; flex-wrap: wrap; gap: 6px; }
	.spn-mkt { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 calc((100% - 12px) / 3); min-width: 0; height: 54px; margin: 0; padding: 0 6px; border: 0; border-radius: 10px; background: #fff; color: var(--spn-ink); font: inherit; cursor: pointer; }
	.spn-mkt .spn-logo { max-width: 88%; max-height: 26px; }
	.spn-mkt.is-on { background: #dcebfb; }
	.spn-mkt:has(.spn-mkt__n) { flex-direction: column; gap: 2px; height: auto; min-height: 74px; padding: 6px 4px; }
	.spn-mkt__ph img { display: block; width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
	.spn-mkt__n { font-size: 11.5px; font-weight: 700; line-height: 1.25; text-align: center; white-space: nowrap; }
	.spn-mkps { margin-top: 6px; }
	.spn-mkp { padding: 12px; border-radius: 12px; background: #fff; }
	.spn-mkp.is-off { display: none; }
	.spn-mk__logo { border: 0 !important; padding: 0 !important; background: none !important; }
	.spn-subblk__h .spn-mk__logo { width: auto; height: 28px; }
	.spn-chip--logo { border: 0 !important; background: #f3f6fa !important; }
	.spn-acc__body .spn-mkt { background: #fff; }

	/* 探し方：アイコンのタイル（3列） */
	.spn-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
	.spn-tiles > * { flex: 0 0 calc((100% - 12px) / 3); min-width: 0; }
	.spn-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 12px 4px 10px; border-radius: 12px; background: #fff; color: var(--spn-ink); text-align: center; }
	.spn-tile__ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e8f1fb; color: var(--spn-blue); }
	.spn-tile__ic .spn-i { width: 22px; height: 22px; }
	.spn-tile__t { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
	.spn-tile__here { display: inline-flex; align-items: center; gap: 1px; font-size: 10px; color: var(--spn-sub); }
	.spn-tile:active { background: #e8f1fb; }

	/* メーカー：ロゴのカード。開くとシリーズのボタン */
	.spn-mks { display: flex; flex-direction: column; gap: 6px; }
	.spn-mk { display: block; border-radius: 12px; background: #fff; color: var(--spn-ink); overflow: hidden; }
	.spn-mk > summary, .spn-mk--link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 40px 8px 12px; cursor: pointer; list-style: none; }
	.spn-mk > summary::-webkit-details-marker { display: none; }
	.spn-mk__logo { display: flex; align-items: center; justify-content: center; flex: none; width: 92px; height: 36px; padding: 0 6px; border: 1px solid #edf1f6; border-radius: 8px; background: #fff; }
	.spn-logo { display: block; max-width: 80px; max-height: 26px; width: auto; height: auto; }
	.spn-mk__ph { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: #f3f6fa; }
	.spn-mk__ph img { width: 36px; height: 36px; object-fit: contain; }
	.spn-mk__n { display: block; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
	.spn-mk__n small { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--spn-sub); }
	.spn-mk__ar { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--spn-blue); transition: transform .15s; }
	.spn-mk--link .spn-mk__ar { color: #9fb0c2; }
	.spn-mk[open] > summary { background: #f7fafd; }
	.spn-mk[open] > summary .spn-mk__ar { transform: rotate(180deg); }
	.spn-mk__body { padding: 10px 12px 12px; border-top: 1px solid #edf1f6; }
	.spn-mk__top { display: inline-flex; align-items: center; gap: 3px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--spn-blue); }
	.spn-mk__top[aria-current="page"] { color: var(--spn-ink); }
	.spn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
	.spn-chip--logo { min-width: 96px; justify-content: center; padding: 0 10px; border-radius: 10px; }
	.spn-chip--logo .spn-logo { max-height: 22px; max-width: 78px; }
	.spn-chip--logo[aria-current="page"] { background: #eaf2fc; outline: 2px solid var(--spn-blue); outline-offset: -2px; }
	.spn-mk__minis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
	.spn-mk__mini { display: flex; align-items: center; justify-content: center; height: 24px; padding: 0 6px; border: 1px solid #edf1f6; border-radius: 6px; background: #fff; }
	.spn-mk__mini .spn-logo { max-height: 15px; max-width: 58px; }
	.spn-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid #d5dee8; border-radius: 18px; background: #fff; color: var(--spn-ink); font-size: 13px; line-height: 1.3; }
	.spn-chip[aria-current="page"] { border-color: var(--spn-blue); background: var(--spn-blue); color: #fff; font-weight: 700; }
	.spn-subblk { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dde5ee; }
	.spn-subblk:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
	.spn-subblk__h { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--spn-ink); }
	.spn-subblk__h .spn-mk__logo { width: 84px; height: 32px; }
	.spn-subblk__h[aria-current="page"] { color: var(--spn-blue); }

	/* 行のリンク（アイコン付き） */
	.spn-rows { border-radius: 12px; background: #fff; overflow: hidden; }
	.spn-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 36px 8px 12px; color: var(--spn-ink); font-size: 14px; line-height: 1.4; }
	.spn-rows > .spn-row + .spn-row { border-top: 1px solid #edf1f6; }
	.spn-row__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #e8f1fb; color: var(--spn-blue); }
	.spn-row__ic .spn-i { width: 18px; height: 18px; }
	.spn-row__ar { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #9fb0c2; }
	.spn-row[aria-current="page"] { background: #eaf2fc; font-weight: 700; color: var(--spn-blue); }

	/* 型番検索 */
	.spn-srch { margin: 0 0 22px; padding: 12px; border-radius: 14px; background: #fff; }
	.spn-srch__lb { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--spn-ink); }
	.spn-srch__lb .spn-i { width: 18px; height: 18px; color: var(--spn-blue); }
	.spn-srch select, .spn-srch input { width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 10px; border: 1px solid #c9d3dc; border-radius: 10px; background: #fff; color: var(--spn-ink); font-size: 16px; }
	.spn-srch__r { display: flex; gap: 6px; margin-top: 6px; }
	.spn-srch input { border: 2px solid var(--spn-blue); }
	.spn-srch button { flex: none; height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: 10px; background: var(--spn-blue); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }

	/* 商材から探す：写真のカード（3列） */
	.spn-cats { display: flex; flex-wrap: wrap; gap: 6px; }
	.spn-cats > * { flex: 0 0 calc((100% - 12px) / 3); min-width: 0; }
	.spn-cat1 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 2px solid transparent; border-radius: 12px; background: #fff; color: var(--spn-ink); text-align: center; }
	.spn-cat1__img img { display: block; width: 56px; height: 56px; object-fit: contain; }
	/* 名前は2行分の高さを取り、全部のカードを同じ高さにする（「ビルトイン」も同じ大きさ・太さ） */
	.spn-cat1__t { display: flex; flex-direction: column; justify-content: center; min-height: calc(1.3em * 2); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
	.spn-cat1__t small { display: block; font-size: inherit; font-weight: inherit; color: inherit; }
	.spn-cat1.is-in, .spn-cat1[aria-current="page"] { border-color: var(--spn-blue); color: var(--spn-blue); }

	/* メーカー・シリーズから探す：商材ごとの折りたたみ */
	.spn-accs { display: flex; flex-direction: column; gap: 6px; }
	.spn-acc { border-radius: 12px; background: #fff; overflow: hidden; }
	.spn-acc > summary { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 40px 6px 10px; cursor: pointer; list-style: none; }
	.spn-acc > summary::-webkit-details-marker { display: none; }
	.spn-acc__img img { display: block; width: 36px; height: 36px; object-fit: contain; }
	.spn-acc__n { font-size: 14.5px; font-weight: 700; }
	.spn-acc__ar { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--spn-blue); transition: transform .15s; }
	.spn-acc[open] > summary { background: #f7fafd; }
	.spn-acc[open] > summary .spn-acc__ar { transform: rotate(180deg); }
	.spn-acc__body { padding: 10px 0; border-top: 1px solid #edf1f6; background: #f3f6fa; }
	.spn-acc__body > .spn-mk__top { margin-left: 10px; }	/* 中のメーカーのボタンを、ほかの欄と同じ幅にするため左右の余白は0 */

	/* 共通メニュー：アイコンのタイル（3列） */
	.spn-ics { display: flex; flex-wrap: wrap; gap: 6px; }
	.spn-ics > * { flex: 0 0 calc((100% - 12px) / 3); min-width: 0; }
	.spn-ic { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 4px; border-radius: 12px; background: #fff; color: var(--spn-ink); text-align: center; }
	.spn-ic__i { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #e8f1fb; color: var(--spn-blue); }
	.spn-ic__i .spn-i { width: 22px; height: 22px; }
	.spn-ic__i img { width: 30px; height: 34px; }
	.spn-ic__i .spn-badge { top: -4px; right: -8px; }
	.spn-ic__t { font-size: 12px; font-weight: 700; line-height: 1.3; }
	.spn-ic--cta { background: var(--spn-cta); color: #fff; }
	.spn-ic--cta .spn-ic__i { background: rgba(255, 255, 255, .22); color: #fff; }
	.spn-ic[aria-current="page"] { outline: 2px solid var(--spn-blue); outline-offset: -2px; }
	/* アウトレットのバナー：画像（outlet_bnr_s.webp・粗かった）を使わず、同じデザインをCSSで描く（2026-10-15 ユーザー指示） */
	.spn-bnr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 3 / 1; margin: 0 0 8px; border-radius: 12px; overflow: hidden; color: #fff !important; text-align: center; line-height: 1.1;
		background: linear-gradient(115deg, #d1000c 0%, #ee1c1c 48%, #ff5a1e 100%); }
	.spn-bnr::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, .07) 22px 24px), linear-gradient(115deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .16) 70%, rgba(255, 255, 255, 0) 85%); }
	.spn-bnr { container-type: inline-size; }
	.spn-bnr__top, .spn-bnr__en { position: relative; white-space: nowrap; }
	.spn-bnr__top { display: flex; align-items: center; gap: 2.4cqw; font-size: 7.2cqw; font-weight: 800; letter-spacing: .04em; }
	.spn-bnr__top b { display: flex; align-items: center; justify-content: center; width: 10.8cqw; height: 10.8cqw; border-radius: 50%; background: #fff; color: #e0000f; font-size: 6.6cqw; font-weight: 900; }
	.spn-bnr__en { font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-size: 10.2cqw; font-weight: 900; letter-spacing: .03em; }

	/* 電話 */
	.spn-telbox { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--spn-blue); border-radius: 14px; background: #fff; color: var(--spn-ink); }
	.spn-telbox__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--spn-blue); color: #fff; }
	.spn-telbox > span:last-child { display: flex; flex-direction: column; }
	.spn-telbox b { font-size: 24px; line-height: 1.2; color: var(--spn-blue); letter-spacing: .02em; }
	.spn-telbox small { font-size: 11.5px; color: var(--spn-sub); }

	/* ---- 4. 下部固定ボタン（浮いた1枚のバー） ----
	 *  画面の端に付けず、下と左に 8px、右はチャット（ChatPlus）のボタンの分 76px あける。
	 *  ボタンの高さは46px。画面の下端から7px（チャットのボタンと同じ高さの中心）。
	 *  z-index はチャット（style属性で1000）より下。 */
	/* 画面の下端いっぱいの帯（2026-10-15 ユーザー指示：大きく・背景色を付けて、後ろの本文が透けないように）。
	 *  濃い青の帯に、白の「電話」とオレンジの「無料見積り」。右端 76px はチャット（ChatPlus）のボタンの場所。
	 *  帯の下（::after）にも同じ色を伸ばして、iPhoneでアドレスバーが縮むときに下のすき間から本文が見えないようにする。 */
	.spn-bt { display: flex; align-items: center; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; height: var(--spn-bt-h); padding: 0 76px 0 8px; background: #0f3a66; transform: translateY(var(--spn-vv, 0px)); transition: opacity .2s ease, visibility .2s; }
	.spn-bt::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: #0f3a66; }
	html.spn-open .spn-bt, html.spn-typing .spn-bt { opacity: 0; visibility: hidden; pointer-events: none; }
	.spn-bt a { display: flex; align-items: center; gap: 8px; height: 56px; border-radius: 12px; line-height: 1.2; }
	.spn-bt__ic { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; }
	.spn-bt__ic .spn-i { width: 20px; height: 20px; }
	.spn-bt__tx { display: flex; flex-direction: column; min-width: 0; }
	.spn-bt b { font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
	.spn-bt small { font-size: 11px; font-weight: 700; white-space: nowrap; }
	.spn-bt__tel { flex: 0 0 auto; padding: 0 12px 0 9px; background: #fff; color: #0f3a66; }
	.spn-bt__tel .spn-bt__ic { background: #0f3a66; color: #fff; }
	.spn-bt__main { position: relative; flex: 1; min-width: 0; padding: 0 26px 0 9px; background: linear-gradient(135deg, #f7782a 0%, #e8590c 100%); color: #fff; }
	.spn-bt__main .spn-bt__ic { background: #fff; color: var(--spn-cta); }
	.spn-bt__ar { position: absolute; right: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px; stroke-width: 2.6; }
	.spn-bt__main.is-cart { background: linear-gradient(135deg, #d9480f 0%, #a8350b 100%); }
	.spn-bt__main.is-cart .spn-bt__ic { color: #c2410c; }
	@media (min-width: 360px) and (max-width: 389px) {
		.spn-hd { gap: 5px; }
		.spn-hd__logo img { width: 108px; }
		.spn-hd__35 { width: 53px; height: 36px; }
		.spn-hd__grt img { width: 42px; height: 47px; }
	}
	@media (max-width: 359px) {
		.spn-hd__35 { display: none; }
		.spn-hd__grt img { width: 39px; height: 44px; }
		.spn-hd__logo img { width: 112px; }
		.spn-bt { padding: 0 72px 0 6px; gap: 6px; }
		.spn-bt__tel { padding: 0 10px; }
		.spn-bt__tel .spn-bt__ic, .spn-bt__main .spn-bt__ic { display: none; }
		.spn-bt b { font-size: 15px; }
	}
	/* 確認用ページの印 */
	.spn-preview-tag { position: fixed; left: 8px; bottom: calc(var(--spn-bt-h) + var(--spn-safe) + 18px); z-index: 8995; padding: 2px 8px; border-radius: 4px; background: #1f2933; color: #fff; font: 11px/1.5 sans-serif; opacity: .8; pointer-events: none; }
}

/* メーカーロゴの大きさ（2026-10-15 ユーザー指示「大きさを大体そろえろ」）。
 *  ロゴごとに spnav_render.php が --lw（高さ1あたりの幅）を付ける。置き場ごとの基準の高さ --lh を決め、幅＝--lh×--lw。
 *  置き場の幅を超えるときは幅いっぱいに縮める（高さは自動）。 */
@media screen and (max-width: 959px) {
	.spn-logo { display: block; width: min(100%, calc(var(--lh, 22px) * var(--lw, 4))) !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; }
	.spn-mkt { --lh: 22px; padding: 0 5px; }
	.spn-chip--logo { --lh: 16px; }
	.spn-subblk__h .spn-mk__logo { --lh: 19px; width: auto; height: auto; }
	.spn-mk__mini { --lh: 13px; }
}

/* メニュー内のタイル・メーカーのボタンは、すべて同じ幅（1段に3つ）。最後の段も伸ばさない（2026-10-15 ユーザー指示「ブロックごとの幅を共通に」） */

/* メーカーの見出し（給湯器のリンナイ・ノーリツ・パロマなど）：ロゴを左端にそろえ、名前をすぐ右に並べる（2026-10-15 ユーザー指示） */
@media screen and (max-width: 959px) {
	.spn-subblk__h { display: flex; justify-content: flex-start; gap: 10px; width: 100%; }
	.spn-subblk__h .spn-mk__logo { display: block !important; flex: none; width: auto !important; height: auto !important; }
	.spn-subblk__h .spn-logo { width: calc(var(--lh, 19px) * var(--lw, 4)) !important; max-width: 120px !important; }
}

/* シリーズページの商品一覧（2列）：カードの中身の最小幅で列が広がり、右のカードが画面から切れていた。
 *  各カードの最小幅を0にして、列の幅どおりに収める（2026-10-16 ユーザー指摘「ラインアップの右側が切れている」）。 */
.dw2-items > *, .gc2-items > * { min-width: 0; }

/* メーカーロゴのボタン（給湯器の業務用・石油などで、シリーズの代わりにメーカーが並ぶところ）：
 *  メーカーのボタンと同じく、1段に3つの同じ幅・同じ高さ。枠線は付けず、いまのページは背景の色で示す（2026-10-16 ユーザー指示「サイズバラバラ」） */
@media screen and (max-width: 959px) {
	.spn-chip--logo { flex: 0 0 calc((100% - 12px) / 3); justify-content: center; height: 48px; min-width: 0 !important; padding: 0 6px !important; border: 0 !important; border-radius: 10px !important; background: #f3f6fa !important; outline: 0 !important; }
	.spn-chip--logo[aria-current="page"] { background: #dcebfb !important; outline: 0 !important; }
	.spn-chip--logo { --lh: 18px; }
}

/* タブレット（768〜959px）にも新しいナビを出す（2026-10-16 ユーザー指示「タブレットで上部メニューが古いまま」）。
 *  ・スマホ（767px以下）：今の商材ページは商材メニュー帯（44px）の分だけ本文を下げているので、その分を詰める
 *  ・タブレット：今のヘッダーはページの流れの中にある（固定ではない）ので、隠した分は本文が上に詰まる。新しいヘッダー（固定62px）の分だけ下げる
 *  ・PCヘッダー用の案内リンク（.description の中の .ghd-util__l）はPC（960px以上）用なので、959px以下では出さない */
@media screen and (max-width: 767px) {
	body:has(#mdropmenu) { margin-top: -44px !important; }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	body { padding-top: var(--spn-hd-h) !important; }
}
@media screen and (max-width: 959px) {
	.description .ghd-util__l { display: none !important; }
}