/* ==========================================================
   共通スタイル（トレース元: my-best.com の設計）
   白地・#313131 の文字・細い罫線 #eee・角丸4px・影なし・
   写真＋白文字のヒーロー・下端に重なる検索ピル・
   「サムネ＋見出し＋件数＋チップ＋矢印」の行リスト・PCは2列リスト＋右カラム
   トレース元との意図的な差: 文字サイズは要件（本文18px以上・ボタン56px以上）に合わせて拡大、
   ブランド色は採用配色（Main #14A3A6）をトレース元の緑の位置に置く
   ========================================================== */
:root {
  --font: "BIZ UDPGothic", -apple-system, "system-ui", Roboto, "Segoe UI", "Hiragino Sans", sans-serif;
  --fs-body: 18px;
  --btn-h: 56px;
  --gap: 12px;
  /* ---- 採用配色（2026-09-19）----
     Main #14A3A6（青緑）/ Sub #6A4FA8（紫）/ Accent #D2DF1E（黄緑）/ Neutral #AEB6BF（補助グレー）/ Base #FAFAFA（白）
     コントラスト: Main は白文字と 3.1:1 のため、白文字を載せる塗りと本文中のリンクは --c-brand-dark を使う。
     Accent は白文字が読めない（1.5:1）ため、Accent の上は常に黒文字（11.7:1）。Neutral は文字には使わない（線・非活性のみ）。 */
  --c-main: #14A3A6;
  --c-main-dark: #0E7F82;      /* white on it 4.8:1 */
  --c-main-light: #E3F4F4;
  --c-main-tint: #F1FAFA;
  --c-sub2: #6A4FA8;           /* white on it 6.4:1 */
  --c-sub2-light: #EFEAF7;
  --c-accent: #D2DF1E;         /* CTA・強調のみ。黒文字と組み合わせる */
  --c-accent-deep: #B8C40F;
  --c-accent-text: #1B1B1B;
  --c-accent-light: #F4F7D0;
  --c-neutral: #AEB6BF;
  --c-base: #FAFAFA;
  --c-text: #313131;
  --c-sub: #5F6874;            /* 補助文字。白〜淡色背景のどれでも 4.9:1 以上 */
  --c-main-ink: #0B6A6C;       /* 淡い青緑（--c-main-light / tint）の上に置く文字。5.6:1 以上 */
  --c-muted: var(--c-neutral); /* 罫線・非選択・矢印（本文には使わない） */
  --c-line: #E6E9EC;
  --c-line-2: var(--c-neutral);
  --c-bg: #ffffff;
  --c-gray: #F1F3F5;
  --c-brand: var(--c-main);
  --c-brand-dark: var(--c-main-dark);
  --c-brand-light: var(--c-main-light);
  --c-brand-2: var(--c-sub2);
  --c-brand-3: var(--c-main);
  --c-chip-bg: var(--c-accent-light);
  --c-chip-text: #3E4410;
  --c-marker: var(--c-accent-light);
  --c-bg-gray: #F1F3F5;        /* セクション背景: ごく薄いグレー */
  --c-bg-blue: var(--c-main-tint); /* セクション背景: 薄い青緑 */
  --c-ok: #1B6B3A;
  --radius: 10px;              /* カード */
  --radius-s: 8px;             /* ボタン・小要素 */
  --shadow-card: none;          /* カードは白地＋細い罫線のみ（影は使わない） */
  --wrap: 1120px;
  --narrow: 760px;
  --bar-h: 64px;
  --i-tint: var(--c-main-light); --i-spark: var(--c-accent-deep); --i-beam: var(--c-main);
  /* 互換エイリアス */
  --c-navy: #313131; --c-navy-2: #444; --c-steel: var(--c-neutral); --c-steel-light: #F1F3F5; --c-spark: var(--c-main); --c-spark-deep: var(--c-main-dark); --c-blue: var(--c-main); --c-blue-deep: var(--c-main-dark); --c-violet: var(--c-sub2); --c-cyan: var(--c-main); --shadow: var(--shadow-card); --font-en: inherit;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; color: var(--c-text); background: var(--c-base); }
body.has-bar { padding-bottom: calc(var(--bar-h) + 12px); }
h1 { font-size: 26px; line-height: 1.4; margin: 0 0 16px; font-weight: 700; }
h2 { font-size: 24px; line-height: 1.4; margin: 0 0 16px; font-weight: 700; }
h3 { font-size: 20px; line-height: 1.4; margin: 0 0 8px; font-weight: 700; }
p, li, dt, dd, label, input, button { font-size: var(--fs-body); }
a { color: var(--c-text); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
.ico { width: 1em; height: 1em; flex: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
mark { background: linear-gradient(transparent 55%, var(--c-marker) 55%); color: inherit; font-weight: 700; }


/* ---------- ヘッダー（ロゴ＋小さな説明 / 右にアイコン＋小ラベル） ---------- */
#siteHeader { position: sticky; top: -40px; z-index: 20; } /* 上部の帯（40px）はスクロールで隠れ、ヘッダーだけが残る */
.header { background: #fff; border-bottom: 1px solid var(--c-line); }
.header__in { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.header__brand { display: flex; align-items: center; gap: 10px; min-height: 56px; text-decoration: none; color: var(--c-text); line-height: 1.15; }
.header__mark { width: 34px; height: 34px; flex: none; color: var(--c-brand); }
.header__name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.header__name small { display: block; font-size: 12px; color: var(--c-sub); font-weight: 400; margin-top: 2px; white-space: nowrap; }
@media (min-width: 600px) { .header__name { font-size: 20px; } .header__name small { font-size: 12px; } }
.header__tools { display: flex; align-items: center; gap: 4px; }
.header__tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 56px; padding: 4px; text-decoration: none; color: var(--c-text); font-size: 12px; font-weight: 400; border: 0; background: none; font-family: inherit; cursor: pointer; }
.header__tool .ico { width: 26px; height: 26px; }
.gnav { display: none; border-top: 1px solid var(--c-line); background: #fff; }
.gnav[data-open="true"] { display: block; }
.gnav ul { list-style: none; margin: 0 auto; padding: 0 16px 12px; max-width: var(--wrap); }
.gnav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-text); font-weight: 700; }
.gnav a .ico { width: 28px; height: 28px; color: var(--c-brand); margin-right: 12px; }
.gnav a .ico--chev { width: 20px; height: 20px; color: var(--c-muted); margin: 0 0 0 auto; }
.gnav a span { flex: 1; }
/* トップ（PC）は右カラムのメニューが主要ナビなのでメニューボタンを出さない。下層は 1100px 以上でヘッダーの文字メニューに切り替える */
@media (min-width: 900px) { body.home .header__tool--menu, body.home .gnav { display: none !important; } }
@media (min-width: 1100px) { .header__tool--menu, .gnav { display: none !important; } }

/* ---------- ヒーロー（写真＋中央の白文字、下端に重なる検索ピル） ---------- */
.hero { position: relative; color: #fff; }
.hero__img { width: 100%; height: 400px; object-fit: cover; }
.hero__text { position: absolute; inset: 0 0 60px; color: var(--c-text); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16px; text-shadow: none; }
.hero__title { font-size: 30px; font-weight: 700; line-height: 1.35; margin: 0 0 12px; color: var(--c-text); }
.hero__lead { font-size: 17px; margin: 0; color: var(--c-text); }
.hero__search { position: relative; max-width: 720px; margin: -28px auto 0; padding: 0 16px; }
.hero__search form { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--c-line-2); border-radius: 999px; min-height: 56px; padding: 4px 8px 4px 18px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.hero__search .ico { width: 22px; height: 22px; color: var(--c-muted); }
.hero__search input { flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 17px; min-height: 46px; background: none; color: var(--c-text); }
.hero__search input::placeholder { color: var(--c-muted); }
.hero__search button { flex: none; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--c-brand-dark); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
@media (min-width: 900px) { .hero__img { height: 480px; } .hero__title { font-size: 44px; } .hero__lead { font-size: 20px; } }


/* ---------- セクション見出し（小さな灰色のリード＋太い見出し） ---------- */
.section { padding: 40px 0 8px; }
.band { padding: 40px 0 44px; }
.band--gray { background: var(--c-bg-gray); }
.band--blue { background: var(--c-bg-blue); }
.band + .band { border-top: 1px solid rgba(0,0,0,.04); }
.sec-head--ico { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; }
.sec-head--ico .ico { width: 52px; height: 52px; padding: 10px; background: var(--c-brand); color: #fff; border-radius: 50%; grid-row: 1 / 3; }
.sec-head--ico .sec-head__eyebrow { grid-column: 2; }
.sec-head--ico h2 { grid-column: 2; }
.sec-head { margin: 0 0 12px; }
.sec-head__eyebrow { display: block; font-size: 15px; color: var(--c-sub); margin: 0 0 4px; }
.sec-head h2, .sec-head h1 { margin: 0; font-size: 24px; }
.sec-more { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; margin: 8px 0 0; text-decoration: none; color: var(--c-text); font-weight: 700; border-top: 1px solid var(--c-line); }
.sec-more .ico { width: 18px; height: 18px; }
/* 互換 */
.hd { margin: 0 0 12px; } .hd__en { display: block; font-size: 14px; color: var(--c-sub); margin-bottom: 4px; text-transform: none; letter-spacing: 0; } .hd h2, .hd h1 { font-size: 24px; margin: 0; } .hd p { margin: 8px 0 0; color: var(--c-sub); font-size: 16px; }
.sec-title { text-align: left; font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.sec-lead { text-align: left; color: var(--c-sub); margin: -8px 0 16px; font-size: 16px; }

/* ---------- 行リスト（サムネ＋見出し＋件数＋チップ＋矢印、細い罫線） ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rows li { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; }
.rows a { display: grid; grid-template-columns: 96px 1fr 24px; align-items: center; gap: 14px; min-height: 96px; padding: 12px 14px; text-decoration: none; color: var(--c-text); border-radius: var(--radius); }
.rows a:active { background: var(--c-brand-light); }
.rows__img { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--c-gray); border: 1px solid var(--c-line); }
.rows__title { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0; }
.rows__meta { font-size: 16px; color: var(--c-sub); margin: 3px 0 0; }
.rows .ico--chev { width: 22px; height: 22px; color: var(--c-brand); }
.chip { display: inline-block; font-size: 13px; font-weight: 700; color: var(--c-chip-text); background: var(--c-chip-bg); border-radius: 6px; padding: 2px 8px; margin-top: 6px; line-height: 1.4; }
.chip--brand { color: var(--c-brand); background: var(--c-brand-light); }

/* ---------- PC: 本文2列＋右カラム ---------- */
.cols { display: grid; gap: 0 40px; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 320px; align-items: start; } .rows--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } .rows--2col li { min-width: 0; } }
.side { padding-top: 40px; }
@media (min-width: 900px) { .side { position: sticky; top: 80px; align-self: start; padding-top: 40px; } }
.side h2 { font-size: 20px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.side h2::before { content: ""; width: 6px; height: 22px; background: var(--c-sub2); border-radius: 3px; }
.side .rows { gap: 0; background: #fff; border: 1px solid var(--c-line); border-radius: 16px; overflow: hidden; }
.side .rows li { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--c-line); }
.side .rows li:first-child { border-top: 0; }
.side .rows a { grid-template-columns: 44px 1fr 20px; min-height: 64px; padding: 8px 12px; border-radius: 0; }
.side .rows .ico--s { width: 44px; height: 44px; padding: 7px; color: var(--c-brand); background: var(--c-brand-light); border-radius: 50%; }
.side .rows a[aria-current="page"] { background: var(--c-brand-light); }
.side .rows__title { font-size: 17px; }
.side .rows__meta { font-size: 15px; }

/* ---------- 日付付きの記事リスト（トレース元: マイべマガジン） ---------- */
.news { list-style: none; margin: 0; padding: 0; }
.news a { display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 12px; padding: 14px 14px; text-decoration: none; color: var(--c-text); }
.news .ico { width: 40px; height: 40px; padding: 6px; color: var(--c-brand); background: var(--c-brand-light); border-radius: 50%; }
.news .ico--chev { width: 22px; height: 22px; padding: 0; background: none; }
.news time { display: block; font-size: 14px; color: var(--c-sub); margin-bottom: 2px; }
.news b { font-size: 18px; line-height: 1.45; font-weight: 700; }

/* ---------- 商品カード（トレース元: 商品レビューの横並びカード） ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(5, 1fr); gap: 24px 16px; } }
.card a { display: block; text-decoration: none; color: var(--c-text); height: 100%; }
.card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--c-line); background: var(--c-gray); margin-bottom: 8px; }
.card__cat { font-size: 13px; color: var(--c-sub); margin: 0; }
.card__name { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 2px 0 0; }
.card__maker { font-size: 15px; color: var(--c-sub); margin: 2px 0 0; }
.card__price { font-size: 15px; margin: 4px 0 0; }
.card__price b { font-size: 16px; }

/* ---------- ボタン ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--btn-h); padding: 10px 20px; border-radius: var(--radius-s); font-size: 18px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid var(--c-line-2); background: #fff; color: var(--c-text); font-family: inherit; line-height: 1.3; }
.btn + .btn { margin-top: var(--gap); }
.btn--primary, .btn--spark { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: #fff; }
.btn--primary:active, .btn--spark:active { background: #0B6A6C; }
.btn--accent { background: linear-gradient(180deg, #DDE84A, var(--c-accent)); border-color: var(--c-accent-deep); color: var(--c-accent-text); box-shadow: 0 2px 0 var(--c-accent-deep); }
.btn--accent:active { background: var(--c-accent-deep); box-shadow: none; transform: translateY(1px); }
.btn--ghost { border-color: var(--c-line-2); color: var(--c-text); background: #fff; }
.btn--white { background: #fff; color: var(--c-brand-dark); border-color: #fff; }
.btn--outline-white { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .ico { width: 22px; height: 22px; }

/* ---------- 汎用の枠（トレース元: 「検証のポイント」「目次」の薄枠） ---------- */
.box { border: 1px solid var(--c-line); border-radius: 16px; padding: 18px; background: #fff; }
.box--gray { background: var(--c-bg-gray); border-color: var(--c-bg-gray); box-shadow: none; }
.box--consult { background: linear-gradient(180deg, #fff, var(--c-bg-blue)); border-color: var(--c-main-light); }
.box--consult h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.box--consult h2 .ico { width: 36px; height: 36px; padding: 5px; color: #fff; background: var(--c-brand); border-radius: 50%; }
.box h2 { font-size: 22px; margin: 0 0 12px; }
.notice { background: var(--c-gray); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; }
.notice p, .info p { margin: 0; }
.info { background: var(--c-brand-light); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; }
.badge, .label-handled { display: inline-block; font-size: 13px; font-weight: 700; color: var(--c-chip-text); background: var(--c-chip-bg); border-radius: 3px; padding: 2px 8px; margin-top: 6px; line-height: 1.4; }

/* ---------- 目的別ナビ・専門用途（配下ページと診断結果の「pnav」互換。行リストと同じ見た目） ---------- */
.pnav { list-style: none; margin: 0; padding: 0; }
.pnav li { border-bottom: 1px solid var(--c-line); }
.pnav a, .pnav button { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 10px 0; background: none; border: 0; text-decoration: none; color: var(--c-text); font-family: inherit; text-align: left; cursor: pointer; }
.pnav .ico { width: 48px; height: 48px; color: var(--c-text); }
.pnav .ico--chev { width: 22px; height: 22px; color: var(--c-muted); }
.pnav__label { font-size: 19px; font-weight: 700; line-height: 1.35; }
.pnav__sub { display: block; font-size: 16px; color: var(--c-sub); font-weight: 400; margin-top: 2px; }
.pnav a:active, .pnav button:active { background: var(--c-gray); }
.pnav--row { display: grid; }
@media (min-width: 760px) { .pnav--row { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }

/* ---------- タブ・検索・フィルタ（機種一覧） ---------- */
.tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .tabs { grid-template-columns: repeat(4, 1fr); } }
.tabs li { display: contents; }
.tabs button { width: 100%; min-height: var(--btn-h); padding: 8px 10px; border: 1px solid var(--c-line-2); border-radius: var(--radius-s); background: #fff; color: var(--c-sub); font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1.3; }
.tabs button[aria-selected="true"] { color: #fff; background: var(--c-brand-dark); border-color: var(--c-brand-dark); }
.tabpanel { padding: 20px 0; }
.search { display: grid; grid-template-columns: 1fr auto; gap: var(--gap); margin: 0 0 16px; }
.search input { min-height: var(--btn-h); padding: 8px 14px; border: 1px solid var(--c-line-2); border-radius: 999px; font-family: inherit; width: 100%; background: #fff; }
.search .btn { width: auto; padding: 0 16px; border-radius: 999px; }
.filter { margin: 0 0 16px; }
.filterbox { background: var(--c-bg-gray); border-radius: var(--radius); padding: 16px 16px 4px; margin: 0 0 20px; }
.filter__title { font-weight: 700; margin: 0 0 8px; font-size: 16px; color: var(--c-sub); }
.chips { display: flex; flex-wrap: wrap; gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.chips button { min-height: 48px; padding: 6px 16px; border: 1px solid var(--c-line-2); border-radius: 999px; background: #fff; color: var(--c-text); font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chips button[aria-pressed="true"] { border-color: var(--c-main-dark); background: var(--c-main-light); color: var(--c-main-ink); }
.chips button .ico { width: 18px; height: 18px; display: none; }
.chips button[aria-pressed="true"] .ico { display: block; }
.result-count { margin: 0 0 12px; color: var(--c-sub); font-weight: 700; font-size: 16px; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; } }
.pcard a { display: block; text-decoration: none; color: var(--c-text); }
.pcard__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-gray); border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 8px; }
.pcard__name { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.pcard__maker { font-size: 15px; color: var(--c-sub); margin: 2px 0 0; }
.pcard__price { font-size: 15px; margin: 4px 0 0; }
.pcard__price b { font-size: 16px; }
.empty { text-align: center; color: var(--c-sub); padding: 24px 0; }

/* ---------- 下部固定バー（配下ページのみ） ---------- */
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--c-line-2); }
@media (min-width: 900px) { .bottombar { display: none; } body.has-bar { padding-bottom: 0; } }
.bottombar ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--wrap); display: grid; grid-template-columns: repeat(4, 1fr); }
.bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--bar-h); text-decoration: none; color: var(--c-text); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; }
.bottombar .ico { width: 28px; height: 28px; }
.bottombar a[aria-current="page"] { color: var(--c-brand-dark); }

/* ---------- フッター（白、上に余白、細い罫線） ---------- */
.footer { background: var(--c-bg-gray); border-top: 1px solid var(--c-line-2); padding: 40px 0 40px; margin-top: 56px; }
.footer__links { list-style: none; margin: 0 0 24px; padding: 0; display: grid; }
.footer__links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 6px 12px; background: #fff; border: 1px solid var(--c-line-2); border-radius: var(--radius-s); margin-bottom: 8px; text-decoration: none; color: var(--c-text); font-size: 16px; }
.footer__links .ico { width: 18px; height: 18px; color: var(--c-muted); }
.footer__op { font-size: 15px; color: var(--c-sub); margin: 0 0 6px; line-height: 1.6; }
.footer__copy { font-size: 13px; color: var(--c-sub); margin: 16px 0 0; }
@media (min-width: 760px) { .footer__links { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); column-gap: 12px; } }

/* ==========================================================
   診断（1画面1問・進捗は上部固定・戻るは下部固定）
   ========================================================== */
.diag #siteHeader { position: static; }
.progress { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--c-line); }
.progress__in { max-width: var(--narrow); margin: 0 auto; padding: 10px 16px; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; list-style: none; margin: 0 0 6px; padding: 0; }
.steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--c-sub); text-align: center; line-height: 1.2; }
.steps b { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--c-line-2); background: #fff; font-size: 15px; }
.steps li[data-state="done"] b { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.steps li[data-state="current"] b { border-color: var(--c-brand); color: var(--c-brand-dark); }
.steps li[data-state="current"] { color: var(--c-brand-dark); font-weight: 700; }
.progress__bar { height: 6px; background: var(--c-gray); border-radius: 3px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--c-brand); transition: width .2s; }
.diag__body { max-width: var(--narrow); margin: 0 auto; padding: 24px 16px 32px; }
.question__no { color: var(--c-sub); font-weight: 700; font-size: 15px; margin: 0 0 2px; }
.question__help { color: var(--c-sub); margin: -6px 0 12px; font-size: 16px; }
.choice__thumb { width: 72px; height: 54px; border-radius: 4px; background: var(--c-gray); border: 1px solid var(--c-line); object-fit: cover; }
.pnav--choices li { border: 1px solid var(--c-line-2); border-radius: var(--radius); margin-bottom: var(--gap); }
.pnav--choices a, .pnav--choices button { grid-template-columns: 72px 1fr 24px; padding: 10px 12px; }
.pnav--choices .noimg { grid-template-columns: 1fr 24px; }
.pnav--choices button[aria-pressed="true"] { background: var(--c-brand-light); }
.pnav--choices .unknown { color: var(--c-sub); }
.diag .bottombar ul { grid-template-columns: 1fr; padding: 10px 16px; gap: var(--gap); }
.diag .bottombar ul[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.diag .bottombar .btn { min-height: 52px; font-size: 17px; white-space: nowrap; }
.answers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.answers li { font-size: 14px; background: var(--c-gray); border-radius: 3px; padding: 4px 10px; color: var(--c-sub); }
.answers li b { color: var(--c-text); }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rcard { border: 1px solid var(--c-line-2); border-radius: var(--radius); background: #fff; overflow: hidden; }
.rcard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--c-line); }
.rcard__slot { font-size: 15px; font-weight: 700; color: #fff; background: var(--c-text); border-radius: 3px; padding: 2px 10px; }
.rcard__slot--specialty { background: var(--c-brand-2); }
.rcard__slot--price { background: var(--c-ok); }
.rcard__body { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 14px 16px 0; align-items: start; }
.rcard__img { width: 112px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--c-gray); border: 1px solid var(--c-line); }
.rcard__name { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.3; }
.rcard__meta { color: var(--c-sub); font-size: 15px; margin: 4px 0 0; }
.rcard__reason { margin: 12px 16px; padding: 10px 12px; background: var(--c-gray); border-radius: 4px; font-size: 17px; }
.rcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 16px 16px; }
.rcard__actions .btn { font-size: 17px; padding: 8px 10px; }
.rcard__actions .btn .ico { width: 20px; height: 20px; }
.chk { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 0 10px; border: 1px solid var(--c-line-2); border-radius: var(--radius); font-size: 17px; font-weight: 700; cursor: pointer; background: #fff; }
.chk input { width: 26px; height: 26px; margin: 0; accent-color: var(--c-brand); }
.chk--on { border-color: var(--c-main-dark); background: var(--c-main-light); color: var(--c-main-ink); }
.subsec { margin-top: 36px; }
.subsec h2 { font-size: 24px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare__col { border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 12px 10px; background: #fff; }
.compare__col h3 { font-size: 18px; margin: 0 0 4px; }
.compare__row { border-top: 1px solid var(--c-line); padding: 8px 0; }
.compare__row dt { font-size: 14px; color: var(--c-sub); }
.compare__row dd { margin: 0; font-size: 16px; font-weight: 700; word-break: break-word; }

/* ==========================================================
   商品詳細（Worker でレンダリング）
   ========================================================== */
.subnav { position: sticky; top: 65px; z-index: 10; background: #fff; border-bottom: 1px solid var(--c-line-2); }
.subnav ul { list-style: none; margin: 0 auto; padding: 0 8px; max-width: var(--wrap); display: grid; grid-template-columns: repeat(4, 1fr); }
.subnav a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 4px; text-decoration: none; color: var(--c-muted); font-size: 15px; font-weight: 700; border-bottom: 3px solid transparent; text-align: center; line-height: 1.2; }
.subnav a[aria-current="true"] { color: var(--c-text); border-bottom-color: var(--c-text); }
.crumbs { font-size: 16px; color: var(--c-sub); padding: 12px 0 0; }
.crumbs a { color: var(--c-sub); text-decoration: none; }
.product__head { padding: 12px 0 0; }
.product__maker { color: var(--c-sub); margin: 0 0 8px; }
.product__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-line); background: var(--c-gray); margin: 12px 0 20px; }
.product__band { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 8px; }
.product__band span { font-size: 16px; color: var(--c-sub); }
.product__band b { color: var(--c-text); }
.comment { font-size: 18px; background: var(--c-gray); padding: 14px 16px; border-radius: var(--radius); margin: 0; }
.spec { margin: 0; }
.spec__row { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; border-top: 1px solid var(--c-line); padding: 12px 0; }
.spec__row:last-child { border-bottom: 1px solid var(--c-line); }
.spec dt { color: var(--c-sub); }
.spec dd { margin: 0; font-weight: 700; }
.fit { display: grid; gap: 16px; }
.fit > div { border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 16px; }
.fit ul { margin: 0; padding-left: 1.2em; }
.fit .ok h3 { color: var(--c-main-dark); }
.fit .ng h3 { color: var(--c-sub2); }
@media (min-width: 760px) { .fit { grid-template-columns: 1fr 1fr; } }
.src { font-size: 14px; color: var(--c-sub); }
.cta { margin: 32px 0 0; display: grid; gap: var(--gap); }
@media (min-width: 760px) { .cta { grid-template-columns: 1fr 1fr; } .cta .btn + .btn { margin-top: 0; } }

/* 元の比較メディアの構成を保ち、写真の視認性と商品表示を調整 */
.skip-link { position: fixed; top: -100px; left: 16px; padding: 16px; z-index: 100; background: #fff; }
.skip-link:focus { top: 8px; }
.hero { isolation: isolate; background: #263039; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 20, 27, .46); }
.hero__img { position: absolute; inset: 0; z-index: -2; height: 100%; object-position: center 58%; }
.hero__text { position: relative; inset: auto; min-height: 360px; max-width: var(--wrap); margin: auto; padding: 52px 16px 76px; color: #fff; }
.hero__title { color: #fff; font-size: 36px; line-height: 1.55; margin-bottom: 16px; text-shadow: 0 1px 8px #0006; }
.hero__lead { color: #fff; font-size: 18px; line-height: 1.8; text-shadow: 0 1px 6px #0008; }
.hero__caption { position: absolute; right: 12px; bottom: 10px; padding: 2px 6px; background: #263039; color: #fff; font-size: 11px; }
.hero__search input::placeholder { color: var(--c-sub); }
.cols > main, .card, .pcard { min-width: 0; }
.image-note { font-size: 14px; color: var(--c-sub); line-height: 1.7; margin: 0 0 16px; }
.image-label { display: block; font-size: 12px; margin-bottom: 8px; }
.rcard__body > .image-label { grid-column: 1; grid-row: 2; }
.rcard__body > div { grid-column: 2; grid-row: 1 / 3; }
.card__img, .pcard__img, .rcard__img, .product__image { object-fit: contain; background: #EEF1F3; }
.card__name, .pcard__name { font-size: 18px; line-height: 1.5; }
.card__price b, .pcard__price b { font-size: 18px; }
.tabs button, .subnav a { color: var(--c-sub); }
.chips button { min-height: 56px; }
.header__tools { gap: 12px; }
@media (min-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr) 288px; gap: 32px; }
  .home .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
  .rows--2col { column-gap: 20px; }
  .rows--2col a { grid-template-columns: 72px minmax(0, 1fr) 16px; gap: 10px; }
  .rows--2col .rows__img { width: 72px; }
  .rows--2col .rows__title { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .hero__text { min-height: 300px; padding: 36px 20px 62px; }
  .hero__title { font-size: 28px; }
  .hero__lead { font-size: 16px; }
  .hero__img { object-position: 64% center; }
  .hero__caption { bottom: 34px; font-size: 10px; }
  .hero__search form { padding-left: 12px; }
  .hero__search .ico { display: none; }
  .hero__search input { font-size: 16px; }
  .hero__search button { padding-inline: 16px; }
  .header__name { font-size: 14px; }
  .header__name small { font-size: 12px; white-space: normal; max-width: 180px; }
  .header__brand { gap: 6px; }
  .header__mark { width: 26px; }
  .header__tool { min-width: 44px; }
  .rows a { grid-template-columns: 80px minmax(0, 1fr) 18px; gap: 12px; }
  .rows__img { width: 80px; }
  .rows__title { font-size: 18px; }
  .card__name, .pcard__name { overflow-wrap: anywhere; }
  .rcard__body { grid-template-columns: 88px minmax(0, 1fr); }
  .rcard__img { width: 88px; }
}
@media (max-width: 359px) {
  .header__tools > a { display: none; }
  .header__tools { flex-shrink: 0; }
  .header__tool { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* スマホだけ改行 */
@media (min-width: 600px) { .sp { display: none; } }

/* ==========================================================
   東急公式サイトの「ピクトグラム＋文字」4列ナビを参考にした条件ナビ
   ========================================================== */
.pictonav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .pictonav { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.pictonav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 124px; padding: 20px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; color: var(--c-text); font-weight: 700; font-size: 17px; line-height: 1.3; text-align: center; white-space: nowrap; }
.pictonav a .ico { width: 48px; height: 48px; color: var(--c-brand-dark); fill: currentColor; }
.pictonav a:active { background: var(--c-brand-light); border-color: var(--c-brand); }
.pictonav--accent a { border-top: 4px solid var(--c-accent); }
.pictonav__group { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--c-sub); display: flex; align-items: center; gap: 8px; }
.pictonav__group::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-sub2); }

/* ヒーロー内 CTA（写真の上に置く） */
.hero__cta { margin: 20px auto 0; max-width: 420px; }
.hero__cta .btn { font-size: 19px; min-height: 60px; }
.hero__cta .btn .ico { width: 26px; height: 26px; }

/* ステップ表示（診断の5問を数字付きで） */
.stepline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stepline li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.2; }
.stepline .ico { width: 44px; height: 44px; padding: 8px; color: var(--c-brand); background: #fff; border: 2px solid var(--c-brand-light); border-radius: 50%; }
.stepline b { font-size: 12px; color: var(--c-sub); font-weight: 700; }

/* 検索ピルはアクセントで目立たせない（CTAと役割を分ける） */

/* 写真が無い機種のタイル（プレースホルダー画像の代わり） */
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--c-main-light); color: var(--c-main-dark); border-radius: var(--radius-s); }
.ph .ico { width: 44px; height: 44px; }
.ph small { font-size: 13px; color: var(--c-sub); }
.ph--row { width: 72px; height: 72px; flex: none; }
.ph--row .ico { width: 36px; height: 36px; }
.ph--card { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 10px; }
.card .ph--card { aspect-ratio: 1 / 1; margin-bottom: 8px; }
.rows a { grid-template-columns: 72px 1fr 24px; }

/* ===== 東急トップの型に寄せる調整（見出し・一覧ボタン・カード・余白） ===== */
.section { padding: 64px 0 8px; }
@media (min-width: 900px) { .section { padding-top: 96px; } }
.sec-head--ico { display: block; }
.sec-head--ico .ico { display: none; }
.sec-head h2, .sec-head h1 { font-size: 30px; letter-spacing: .01em; }
.sec-head__eyebrow { order: 2; margin: 6px 0 0; font-size: 15px; }
.sec-head { display: flex; flex-direction: column; margin-bottom: 20px; }
.sec-more { width: min(330px, 100%); margin: 24px auto 0; border: 1px solid var(--c-line-2); border-radius: 999px; background: #fff; font-size: 16px; min-height: 56px; }
.sec-more .ico { display: none; }
.rows a, .pictonav a, .card a, .pcard a, .news a, .side .rows a { border-radius: 14px; }
.rows li, .news li { border: 1px solid var(--c-line); border-radius: 14px; background: #fff; margin-bottom: 12px; }
.rows a, .news a { padding: 12px 16px; border-bottom: 0; }
.news li { margin-bottom: 8px; }
.news a { min-height: 64px; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 12px; }
.news a .ico:first-child { display: none; }
.news b { font-size: 17px; }
.card, .pcard { border: 1px solid var(--c-line); border-radius: 16px; background: #fff; padding: 12px; box-shadow: none; }
.card__cat { display: none; }
.pictonav a { border-radius: 16px; }
.band--blue { background: var(--c-main-tint); }
.pictonav__group { font-size: 15px; }
.side h2 { font-size: 24px; }
.side h2::before { display: none; }
.side .rows li { margin-bottom: 8px; }
.side .rows a { min-height: 64px; padding: 8px 14px; }
.box--consult { border-radius: 16px; border: 1px solid var(--c-line); background: #fff; }
.box--consult h2::before { display: none; }
.box--consult h2 .ico { background: var(--c-main); }
.btn--accent { box-shadow: none; border: 0; background: var(--c-accent); }
.hero__cta .btn--accent { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.footer { background: #fff; }
.footer__links a { border-radius: 999px; min-height: 52px; padding: 6px 18px; font-size: 15px; }

/* ===== 相談・問い合わせ / 選び方ガイド / 補足（2026-10-08 追加） ===== */
.note { font-size: 16px; color: var(--c-sub); margin: -8px 0 20px; }
.side-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 15px; color: var(--c-sub); }
.side-note .ico { width: 20px; height: 20px; flex: none; color: var(--c-main-dark); }
.chip--pending { color: var(--c-sub); background: var(--c-gray); margin: 0 0 4px; font-size: 14px; }

/* 一緒に送られる内容・確認画面の定義リスト */
.attach { background: var(--c-main-tint); border: 1px solid var(--c-main-light); border-radius: 16px; padding: 18px 18px 8px; margin: 0 0 24px; }
.attach__title { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 10px; }
.attach__title .ico { width: 28px; height: 28px; color: var(--c-main-dark); }
.attach__list { margin: 0; }
.attach__list > div { display: grid; grid-template-columns: 8em 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.attach__list > div:first-child { border-top: 0; }
.attach__list dt { color: var(--c-sub); font-size: 16px; }
.attach__list dd { margin: 0; font-weight: 700; word-break: break-word; }
@media (max-width: 480px) { .attach__list > div { grid-template-columns: 1fr; gap: 2px; } }

/* 相談の方法（東急型の大きなボタン。準備中は押せない見た目に） */
.contact-ways { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.contact-ways a, .contact-ways .is-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 124px; padding: 16px 8px; border: 1px solid var(--c-line); border-radius: 16px; background: #fff; text-decoration: none; color: var(--c-text); font-weight: 700; font-size: 17px; text-align: center; line-height: 1.3; }
.contact-ways .ico { width: 44px; height: 44px; color: var(--c-main-dark); }
.contact-ways small { font-size: 14px; font-weight: 400; color: var(--c-sub); }
.contact-ways .is-pending { background: var(--c-gray); color: var(--c-sub); }
.contact-ways .is-pending .ico { color: var(--c-neutral); }
@media (max-width: 480px) { .contact-ways { gap: 12px; } .contact-ways a, .contact-ways .is-pending { min-height: 112px; font-size: 15px; padding: 12px 4px; } .contact-ways .ico { width: 36px; height: 36px; } }

/* フォーム（大きな入力欄・ラベルは上） */
.form { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 24px 20px; }
.form__row { margin: 0 0 20px; }
.form__row label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 6px; }
.form__row input, .form__row textarea { width: 100%; min-height: 56px; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--c-text); background: #fff; border: 1px solid var(--c-neutral); border-radius: var(--radius-s); }
.form__row textarea { min-height: 160px; line-height: 1.6; }
.form__row input:focus, .form__row textarea:focus { outline: 3px solid var(--c-main-light); border-color: var(--c-main-dark); }
.req { font-size: 13px; font-weight: 700; color: #fff; background: var(--c-sub2); border-radius: 4px; padding: 1px 6px; }
.form__error { color: #B42318; font-weight: 700; margin: 0 0 12px; }
.form__row select { width: 100%; min-height: 56px; padding: 12px 14px; font: inherit; font-size: 18px; color: var(--c-text); background: #fff; border: 1px solid var(--c-neutral); border-radius: var(--radius-s); }
.form__row select:focus { outline: 3px solid var(--c-main-light); border-color: var(--c-main-dark); }
.form__reply { margin: 0 0 20px; padding: 12px 14px; background: var(--c-main-tint); border-left: 4px solid var(--c-main-dark); border-radius: 4px; }
.form__reply[hidden] { display: none; }
.confirm { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 24px 20px; }
.confirm h2 { margin: 0 0 12px; }
.confirm__demo { background: var(--c-accent-light); border-radius: var(--radius-s); padding: 12px 14px; margin: 16px 0; }
.confirm__lead { margin: 16px 0 12px; }
.confirm__actions { display: grid; gap: 12px; }
#sent:focus { outline: none; }
/* 機械による送信よけの入力欄（画面にも読み上げにも出さない） */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 選び方ガイド（テーマごとのカード。近道は大きな行ボタン） */
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.guide__item { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 20px; scroll-margin-top: 80px; }
.guide__head { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.guide__head h2 { font-size: 22px; margin: 0; }
.guide__ico { width: 56px; height: 56px; padding: 10px; border-radius: 12px; background: var(--c-main-light); color: var(--c-main-dark); }
.guide__lead { margin: 12px 0 14px; }
.guide__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-main-tint); text-decoration: none; color: var(--c-text); font-weight: 700; }
.guide__links b { margin-left: 10px; font-size: 16px; color: var(--c-main-ink); }
.guide__links .ico--chev { width: 22px; height: 22px; color: var(--c-main-dark); }
.guide__cta { margin: 32px 0 0; padding: 24px 20px; border-radius: 16px; background: var(--c-main-tint); text-align: center; }
.guide__cta .btn { max-width: 420px; margin: 0 auto; }

/* 運営者ページの手順リスト */
.steps-list { margin: 0; padding-left: 1.4em; }
.steps-list li { margin: 0 0 10px; }
/* プライバシーポリシー・免責事項などの箇条書き */
.nowrap { white-space: nowrap; }
.policy-list { margin: 0; padding-left: 1.4em; }
.policy-list li { margin: 0 0 12px; }
.form__privacy { margin: 0 0 12px; }

/* 商品詳細: 写真が無いときのタイル、空の向き不向き */
.ph--product { width: 100%; aspect-ratio: 16 / 9; margin: 12px 0 20px; border-radius: 16px; }
.ph--product .ico { width: 72px; height: 72px; }
.ph--product small { font-size: 14px; }
.fit__none { list-style: none; margin-left: -1.2em; color: var(--c-sub); font-size: 16px; }

/* PC 下層ページのヘッダーメニュー（トップは右カラムのメニューと重複するため出さない） */
.hnav { display: none; }
@media (min-width: 1100px) {
  body:not(.home) .hnav { display: flex; align-items: stretch; gap: 4px; margin-left: auto; }
  .hnav a { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 14px; border-radius: var(--radius-s); text-decoration: none; color: var(--c-text); font-weight: 700; font-size: 16px; white-space: nowrap; }
  .hnav a .ico { width: 24px; height: 24px; color: var(--c-main-dark); }
  .hnav a:hover { background: var(--c-main-tint); }
  .hnav a[aria-current="page"] { background: var(--c-main-light); color: var(--c-main-ink); }
  body:not(.home) .header__tools { margin-left: 8px; }
}

/* 写真タイルの大きさ（productPhoto の variant） */
.ph--result { width: 112px; height: 84px; flex: none; }
.ph--result .ico { width: 36px; height: 36px; }
.ph--compare { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 8px; }

/* 日本語の折り返し: 見出し・ボタンは文節で折り、段落は最終行の1文字残りを避ける */
h1, h2, h3, .btn, .pnav__label, .rows__title, .card__name, .pcard__name, .rcard__name, .pictonav a { word-break: auto-phrase; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* ===== 機種カード（LaserPecker の製品カード型。トップ・機種一覧で共通） =====
   薄いグレーの角丸カード・枠なし／名前（太字）→ メーカー → 一言 → 小さなタグ → 写真（中央）→ 黄緑のピルボタン。
   スマホ（600px 未満）は写真を左に置いた横並びの小型カードにして、1画面に多く並べる */
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(3, 1fr); } .pgrid--home { grid-template-columns: repeat(2, 1fr); } }
/* トップの本文欄は狭いので 2列まで */
.pgrid .pcard { background: var(--c-card, #F3F4F5); border: 0; border-radius: 16px; padding: 0; box-shadow: none; }
.pgrid .pcard > a { display: grid; grid-template-columns: 112px 1fr; grid-template-areas: "photo text" "photo btn"; gap: 6px 14px; align-items: start; height: 100%; padding: 14px; text-decoration: none; color: var(--c-text); border-radius: 16px; }
.pgrid .pcard__text { grid-area: text; min-width: 0; }
.pgrid .pcard__photo { grid-area: photo; }
.pgrid .pcard__btn { grid-area: btn; }
.pgrid .pcard__name { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0; }
.pgrid .pcard__maker { font-size: 15px; color: var(--c-sub); margin: 2px 0 0; }
.pgrid .pcard__catch { font-size: 15px; color: var(--c-text); margin: 6px 0 0; }
.pgrid .pcard__tags { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pgrid .pcard__tags li { font-size: 13px; line-height: 1.4; padding: 2px 7px; background: #fff; border-radius: 4px; color: var(--c-text); }
.pgrid .pcard__photo .ph, .pgrid .pcard__photo .ph-img { width: 112px; height: 112px; aspect-ratio: auto; margin: 0; border: 0; border-radius: 12px; background: #fff; object-fit: contain; }
.pgrid .pcard__photo .ph-img { mix-blend-mode: multiply; background: transparent; }
.pgrid .pcard__photo .ph { background: var(--c-main-light); }
.pgrid .pcard__photo .ph .ico { width: 40px; height: 40px; }
.pgrid .pcard__btn { display: none; }
.pgrid .pcard .badge { margin: 0 0 6px; }
.pgrid .pcard > a:active { background: #E9EBED; }
@media (min-width: 600px) {
  .pgrid .pcard > a { grid-template-columns: 1fr; grid-template-areas: "text" "photo" "btn"; gap: 14px; padding: 22px 20px 20px; }
  .pgrid .pcard__name { font-size: 22px; }
  .pgrid .pcard__photo { display: flex; justify-content: center; align-items: center; height: 200px; }
  .pgrid .pcard__photo .ph, .pgrid .pcard__photo .ph-img { width: 100%; max-width: 280px; height: 200px; }
  .pgrid .pcard__photo .ph { background: var(--c-main-light); }
  .pgrid .pcard__photo .ph .ico { width: 56px; height: 56px; }
  .pgrid .pcard__btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; justify-self: center; min-width: 168px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--c-accent); color: var(--c-accent-text); font-weight: 700; font-size: 17px; }
  .pgrid .pcard__btn .ico { width: 18px; height: 18px; }
  .pgrid .pcard > a:hover .pcard__btn { background: var(--c-accent-deep); }
}

/* 上部の帯（LaserPecker の「請求書対応可能。補助金購入可能。」の帯を参考に、導入相談の入口を全ページに） */
.topstrip { background: var(--c-text); color: #fff; }
.topstrip__in { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; }
.topstrip p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topstrip p { margin: 0; font-size: 14px; line-height: 1.4; }
.topstrip__by { color: #C9CFD6; }
.topstrip a { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; color: var(--c-accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.topstrip a .ico { width: 16px; height: 16px; }
@media (max-width: 600px) { .topstrip__by { display: none; } }
@media (max-width: 420px) { .topstrip__long { display: none; } }

/* 相談の種類（大きな押しやすい選択肢） */
.form__types { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.form__types legend { font-weight: 700; margin: 0 0 8px; padding: 0; }
.form__types label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--c-neutral); border-radius: var(--radius-s); cursor: pointer; font-weight: 700; }
.form__types input { width: 24px; height: 24px; margin: 0; accent-color: var(--c-main-dark); }
.form__types label:has(input:checked) { border-color: var(--c-main-dark); background: var(--c-main-light); color: var(--c-main-ink); }
@media (min-width: 760px) { .form__types { grid-template-columns: repeat(2, 1fr); } .form__types legend { grid-column: 1 / -1; } }

/* ===== マイベストのランキング記事からトレース（2026-10-10 計測: my-best.com/164） =====
   本文の強調: 下40%のマーカー＋太字（マイベストは rgba(255,218,176,.6)。配色は Accent に置き換え） */
.mk { font-weight: 700; background: linear-gradient(transparent 60%, rgba(210, 223, 30, .45) 60%); padding: 0 2px 2px; }
/* 番号見出しの星（40px、薄い色の星に濃い数字。マイベストは #C5ECC8 の星＋#313131 の数字） */
.star-n { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; }
.star-n .ico { position: absolute; inset: 0; width: 40px; height: 40px; color: color-mix(in srgb, var(--c-main) 38%, #fff); }
.star-n b { position: relative; font-size: 18px; color: var(--c-text); }
/* 枠で囲むまとめ（マイベストの「検証のポイント」: 3px #EFEFEF・角丸4px・内側16px） */
.mb-box { border: 3px solid #EFEFEF; border-radius: 4px; padding: 16px; background: #fff; }