/* ==========================================================
   商品詳細ページ（worker/index.js の productPage / 404 / 500）
   style.css の後に読み込み、商品詳細だけの指定を上書きする
   ========================================================== */

/* ページ内リンクの止まる位置は各節の scroll-margin-top で決める（固定ヘッダー 65px＋ページ内メニュー 57px＋余白） */
html { scroll-padding-top: 0; }
.product section[id] { scroll-margin-top: 134px; }

/* 語の途中で折り返さない（メーカー名・機種名・補足）。
   worker の kw() が語のまとまりの境目に <wbr> を入れて .kw で囲む。keep-all は Safari でも効く（auto-phrase は Chrome だけ）。
   1つのまとまりが行より長いときだけ、overflow-wrap: anywhere で折り返して横にはみ出さないようにする */
.product { word-break: auto-phrase; overflow-wrap: anywhere; }
.kw { word-break: keep-all; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
/* 長い語句で表や行の幅が広がらないように（320px 幅で横にはみ出さない） */
.product .spec__row { grid-template-columns: 7.5em minmax(0, 1fr); }
.product .pnav a { grid-template-columns: 48px minmax(0, 1fr) 24px; }
.product p, .product dd, .product li, .product h1, .product h2 { text-wrap: pretty; }

/* ページ内メニュー: 本文（.narrow）と同じ幅・同じ左右位置。高さ56px・文字16px */
.subnav ul { max-width: var(--narrow); padding: 0 16px; }
.subnav a { min-height: var(--btn-h); padding: 4px 2px; font-size: 16px; white-space: nowrap; }
/* 幅 360px 未満では4等分だと「向き不向き」が入らないので、文字の幅に合わせて並べる。
   どのタブも幅56px以上、タブの間は12px以上あける（左右の余白を8pxにして間隔にまわす） */
@media (max-width: 359px) {
  .subnav ul { padding: 0 8px; grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 12px; }
  .subnav a { min-width: 56px; padding: 4px 0; }
}

/* パンくず: 16px、上下に余白をとって押しやすく */
.crumbs { font-size: 16px; padding: 4px 0 0; line-height: 1.6; }
.crumbs a { display: inline-block; padding: 12px 2px; }

/* 見出しは24px以上（style.css の .subsec h2 22px を上書き） */
.product h2, .product .subsec h2 { font-size: 24px; }
.product__intro > h2 { margin-top: 28px; }

/* メーカー名: 国内代理店・販売元は改行して補足として出す */
.product__maker { margin: 0 0 12px; }
.product__agent { display: block; font-size: 16px; }

/* 頭の帯: 18px。非公開の項目は実値と区別する（灰色・細字） */
.product__band span { font-size: 18px; }
.product__band .is-na { color: var(--c-sub); }
.spec dd.is-na { color: var(--c-sub); font-weight: 400; }

/* 写真タイル（productPhoto の product）。スマホは横幅いっぱい、PC は頭の情報と横並び */
.ph--product small { font-size: 16px; color: var(--c-text); }
.ph-img--product { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; margin: 12px 0 20px; background: #EEF1F3; border: 1px solid var(--c-line); border-radius: 16px; }
@media (min-width: 760px) {
  .product__top { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0 24px; align-items: center; margin: 12px 0 0; }
  .product__top > .product__head { grid-column: 2; grid-row: 1; padding: 0; }
  .product__top > .ph--product, .product__top > .ph-img--product { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; margin: 0; }
}

/* 補足の文字は16px以上 */
.product .pnav__sub { font-size: 16px; }
.product .src { font-size: 16px; }
.product .fit__none { font-size: 18px; }
.alts__note { font-size: 16px; color: var(--c-sub); margin: -8px 0 4px; }

/* 404・500 の案内ページ（見出しを語の途中で折り返さない。案内文は16px以上） */
.page-msg { word-break: auto-phrase; }
.page-msg h1 { text-wrap: balance; }
.page-msg .sec-head__eyebrow { font-size: 16px; }

/* 写真の出典 */
.product__fig { margin: 0; }
.photo-credit { margin: 6px 0 0; font-size: 13px; color: var(--c-sub); text-align: right; }
.photo-credit a { color: var(--c-sub); }
.product .ph-img--product { width: 100%; max-height: 300px; object-fit: contain; background: #F3F4F5; border-radius: 16px; padding: 12px; mix-blend-mode: normal; }
/* 特長 */
.features, .opsupport__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.features li, .opsupport__list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.features .ico, .opsupport__list .ico { width: 22px; height: 22px; margin-top: 3px; color: var(--c-main-dark); }
/* 運営元のサポート（ダークの帯と同じ色で、営業の入口を明確に） */
.opsupport { background: #1F2A30; color: #fff; border-radius: 16px; padding: 24px 20px; }
.opsupport h2 { color: #fff; margin-top: 0; }
.opsupport__lead { color: #D5DBE0; margin: 0 0 14px; }
.opsupport__list .ico { color: var(--c-accent); }
.opsupport__cta { display: grid; gap: 12px; margin-top: 20px; }
.opsupport__cta .btn + .btn { margin-top: 0; }
.opsupport__cta .btn:not(.btn--accent) { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
@media (min-width: 760px) { .opsupport__cta { grid-template-columns: repeat(3, 1fr); } .opsupport__cta .btn { font-size: 16px; padding: 10px 12px; } }
/* 他社機ページの「実機で確かめたいとき」 */
.trybox { display: grid; grid-template-columns: 56px 1fr; gap: 14px; margin: 36px 0 0; padding: 20px; border-radius: 16px; background: var(--c-main-tint); border: 1px solid var(--c-main-light); }
.trybox__ico { width: 56px; height: 56px; padding: 10px; border-radius: 12px; background: var(--c-main-light); color: var(--c-main-ink); }
.trybox__title { font-weight: 700; font-size: 20px; margin: 0 0 4px; }
.trybox p { margin: 0 0 12px; }
.trybox .btn { width: auto; display: inline-flex; padding: 10px 24px; }

/* 補助金・税制ページへの入口 */
.subsidybox { display: grid; grid-template-columns: 56px 1fr; gap: 14px; margin: 16px 0 0; padding: 20px; border-radius: 16px; background: var(--c-accent-light); }
.subsidybox__ico { width: 56px; height: 56px; padding: 10px; border-radius: 12px; background: var(--c-accent); color: var(--c-accent-text); }
.subsidybox__title { font-weight: 700; font-size: 20px; margin: 0 0 4px; }
.subsidybox p { margin: 0 0 12px; }
.subsidybox .btn { width: auto; display: inline-flex; padding: 10px 24px; }

/* 他社機のページ: 運営元の取り扱い機と並べる（2列。横スクロールなし） */
.vs { margin-top: 36px; padding: 20px 16px; border-radius: 16px; background: var(--c-main-tint); border: 1px solid var(--c-main-light); }
.vs h2 { margin-top: 0; }
.vs__note { margin: 0 0 16px; }
.vs__names { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 8px; }
.vs__names > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; min-width: 0; }
.vs__names .ph-img, .vs__names .ph { width: 100%; height: 96px; object-fit: contain; }
.vs__names b { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.vs__names small { color: var(--c-sub); font-size: 16px; }
.vs__tag { align-self: flex-start; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--c-gray); color: var(--c-sub); }
.vs__tag--op { background: var(--c-accent); color: #111; }
.vs__rows { margin: 0; }
.vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--c-main-light); }
.vs__row dt { grid-column: 1 / -1; color: var(--c-sub); font-size: 16px; }
.vs__row dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.vs__row dd.is-na { color: var(--c-sub); font-weight: 400; }
.vs__cta { display: grid; gap: 12px; margin-top: 16px; }
.spec__more { margin: 12px 0 0; }
.spec__more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--c-main-ink); }
.spec__more .ico { width: 22px; height: 22px; flex: none; }
.spec__src { margin-left: 6px; font-size: 15px; font-weight: 400; color: var(--c-main-ink); white-space: nowrap; }
.spec__basis { display: block; margin-top: 4px; font-size: 16px; font-weight: 400; color: var(--c-sub); }
/* 目安の説明: 押すと開く（details）。閉じているときは「この目安について ▼」だけ */
.spec__note { margin-top: 6px; }
.spec__note summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--c-main-ink); cursor: pointer; list-style: none; }
.spec__note summary::-webkit-details-marker { display: none; }
.spec__note summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.spec__note[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.spec__note .spec__basis { margin-top: 0; }
/* 製造元・販売元や国内の販売店は、会社ごとに1行 */
.spec__line { display: block; }
.spec__line + .spec__line { margin-top: 10px; }
/* 公開情報を基にしている旨（頭の帯の下） */
.product__basis { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 16px; color: var(--c-sub); }
.product__basis .ico { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.product__basis a { color: var(--c-main-ink); font-weight: 700; white-space: nowrap; }

/* ===== マイベストの商品カードからトレース（2026-10-10 計測: my-best.com/164） ===== */
/* 頭: 小さなタグ → メーカー名（灰色・太字）→ 機種名 */
.product__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.product__chips .badge { margin: 0; }
.pchip { display: inline-block; font-size: 15px; font-weight: 700; line-height: 1.4; padding: 3px 10px; border-radius: 4px; background: var(--c-gray); color: var(--c-text); }
.product .product__maker { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--c-sub); }
.product .product__agent { margin: 4px 0 12px; font-size: 16px; color: var(--c-sub); }
.product__head h1 { margin: 0 0 8px; }
/* 選定コメント: 灰色の箱をやめ、本文＋最初の1文をマーカー */
.product .comment { background: none; padding: 0; font-size: 18px; line-height: 1.8; }
/* スペック表: 項目の列に薄い色、行の下に罫線（マイベストは #FFF3E6 / 罫線 #FFDAB0 / 8px） */
.product .spec { border-top: 1px solid var(--c-main-light); }
.product .spec__row { grid-template-columns: 38% minmax(0, 1fr); gap: 0; padding: 0; border-top: 0; border-bottom: 1px solid var(--c-main-light); }
.product .spec__row:last-child { border-bottom: 1px solid var(--c-main-light); }
.product .spec dt { background: var(--c-main-tint); color: var(--c-text); padding: 10px 8px; }
.product .spec dd { padding: 10px 8px 10px 12px; }
/* 向いている・向いていない（マイベストの「良い」「気になる」: 枠1px・角丸4px・見出しに薄い背景と下線、顔アイコン） */
.product .fit > div { padding: 0; border-radius: 4px; overflow: hidden; }
.product .fit .ok { border: 1px solid var(--c-main-dark); }
.product .fit .ng { border: 1px solid #666; }
.product .fit h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; font-size: 18px; color: var(--c-text); }
.product .fit h3 .ico { width: 26px; height: 26px; flex: none; }
.product .fit .ok h3 { background: var(--c-main-tint); border-bottom: 1px solid var(--c-main-dark); }
.product .fit .ok h3 .ico { color: var(--c-main-dark); }
.product .fit .ng h3 { background: #F7F7F7; border-bottom: 1px solid #666; }
.product .fit .ng h3 .ico { color: #666; }
.product .fit ul { padding: 12px 14px 12px 2em; }
.product .fit li { margin: 4px 0; }