/* ===========================================================
   課題解決ガイド（single-guide.php・archive-guide.php）。型は guide.html（記事）・guides.html（一覧）
   page.css（左右の列・目次・電話の枠・.gm-caution・.gm-faq・.gm-list・見出し帯）を先に読み、ガイド固有の部品をここに。
   カード .gm-guide は共通部品なので style.css。グリッドは minmax(0,1fr)（1fr だと比較表の min-width で横にはみ出す）
   =========================================================== */

/* 記事の2列：列は本文の左（2026-11-02 ユーザー決定。固定ページ page.css と同じ側。幅だけ 260px） */
.gm-page.is-art{grid-template-columns:260px minmax(0,1fr)}
.is-art .gm-side-toc .gm-toc{margin:10px 0 0 4px}
.is-art .gm-side-toc .gm-toc a{padding:6px 0 6px 14px;font-size:.9rem}

/* 本文の上部：種別＋公開日・不安を突く一言・アイキャッチ（16:8）・リード */
.gm-art-meta{display:flex;align-items:center;gap:14px;font-size:.85rem;color:var(--gm-sub);margin-bottom:12px}
.gm-art-meta time{font-variant-numeric:tabular-nums}
.gm-catch{margin-top:18px;font-size:1.15rem;font-weight:700;color:var(--gm-green-dark);line-height:1.6;padding-left:14px;border-left:4px solid var(--gm-green)}
.gm-eye{margin-top:24px;border-radius:4px;overflow:hidden}
.gm-eye .gm-ph{aspect-ratio:16/8;font-size:.95rem}
.gm-eye img{width:100%;height:100%;aspect-ratio:16/8;object-fit:cover}
.gm-pg-head .lead p+p{margin-top:10px}

/* 本文：太字は薄緑のマーカー風（モックの .gm-txt strong）。見出しになる太字（注意の枠・ポイントの枠）は外す */
.is-art .gm-txt strong{font-weight:700;background:linear-gradient(transparent 62%,#E9F2D2 62%)}
.is-art .gm-txt .gm-caution>:first-child strong,.is-art .gm-txt .gm-point>p:first-child strong{background:none}
.is-art .gm-pg-body>p:first-child{margin-top:0}
.is-art .gm-pg-body>.gm-points+p,.is-art .gm-pg-body>.gm-cmp+p,.is-art .gm-pg-body>.gm-caution+p,.is-art .gm-pg-body>ul+p{margin-top:12px}
/* 本文の画像（画像ブロック）：560px まで・中央（商品の本文と同じ）。キャプションは小さく中央 */
.is-art .gm-pg-body figure.wp-block-image{margin:22px auto;max-width:560px}
.is-art .gm-pg-body figure.wp-block-image.alignwide,.is-art .gm-pg-body figure.wp-block-image.alignfull{max-width:none}
.is-art .gm-pg-body figure.wp-block-image img{display:block;margin:0 auto;border-radius:8px;height:auto}
.is-art .gm-pg-body figure.wp-block-image figcaption{font-size:.85rem;color:var(--gm-sub);margin:8px 0 0;text-align:center;line-height:1.6}

/* よくあるご質問（欄 faq。本文の H2 と同じ見出し帯） */
.gm-art-faq>h2{font-size:1.35rem;font-weight:700;letter-spacing:.06em;line-height:1.4;color:#fff;background:var(--gm-green);border-radius:4px;padding:11px 20px;margin:56px 0 22px;scroll-margin-top:calc(var(--gm-head-h,86px) + 16px)}
.admin-bar .gm-art-faq>h2{scroll-margin-top:calc(var(--gm-head-h,86px) + var(--wp-admin--admin-bar--height,0px) + 16px)}

/* 比較表：表ブロック figure.gm-cmp と、おすすめの行があるときのカスタムHTML div.gm-cmp の両方。スマホは横スクロール */
.gm-cmp{margin:10px 0 24px;overflow-x:auto}
.gm-cmp table{width:100%;border-collapse:collapse;font-size:.95rem;border-top:2px solid var(--gm-ink);min-width:520px}
.gm-cmp thead{border:0}
.gm-cmp :is(th,td){padding:12px 14px;border:0;border-bottom:1px solid var(--gm-line);line-height:1.6;vertical-align:middle}
.gm-cmp thead :is(th,td){font-size:.85rem;font-weight:700;background:#fafbf7;text-align:center}
.gm-cmp thead tr>:first-child{text-align:left}
.gm-cmp tbody :is(th,td){text-align:center;font-weight:500}
.gm-cmp tbody tr>:first-child{text-align:left;width:28%}
.gm-cmp tr.is-pick{background:var(--gm-mist)}
.gm-cmp tr.is-pick th{font-weight:700}
.gm-cmp td.good{color:var(--gm-green-dark);font-weight:700}

/* 紹介商品の枠（1つ。ショートコード [gm_guide_products]）。価格・寸法・発送目安は商品データ。カートボタンは無い */
.gm-prod{margin:14px 0 8px;border:2px solid var(--gm-green);border-radius:12px;padding:22px 24px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:start;line-height:1.7}
.gm-prod .pic .gm-ph{aspect-ratio:1;font-size:.85rem;overflow:hidden}
.gm-prod .pic img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.gm-txt .gm-prod p{margin-top:0}
.gm-prod .lb,.gm-prods .lb{font-size:.78rem;font-weight:700;color:var(--gm-sub);letter-spacing:.08em}
.gm-txt .gm-prod .name{font-size:1.25rem;font-weight:700;line-height:1.45;margin-top:2px;color:var(--gm-ink)}
.gm-prod .name small{font-size:.85rem;font-weight:400;color:var(--gm-sub);margin-left:8px}
.gm-prod .flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gm-prod .flags span{font-size:.75rem;border-radius:3px;padding:0 7px;line-height:1.6} /* 購入条件の印だけ（guide.html のとおり。特徴タグは出さない） */
.gm-prod .price{margin-top:10px;font-size:1.55rem;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.2;color:var(--gm-ink)}
.gm-prod .price small{font-size:.8rem;font-weight:400;color:var(--gm-sub);margin-left:4px}
.gm-prod .price .from{font-size:.9em;margin-left:2px}
.gm-prod .price .per{font-size:.85rem;font-weight:500;color:var(--gm-sub);margin-left:6px}
.gm-prod .price .none{font-size:.85rem;font-weight:400;color:#aaa}
.gm-prod dl{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 14px;margin-top:14px;font-size:.92rem;line-height:1.6}
.gm-prod dt{color:var(--gm-sub);font-weight:500;white-space:nowrap}
.gm-prod dd{font-weight:500}
.gm-prod .btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.gm-txt .gm-prod a.btn{display:inline-block;background:var(--gm-green);color:#fff;font-weight:700;font-size:1rem;border-radius:8px;padding:12px 30px;text-decoration:none;transition:background .15s;line-height:1.7}
.gm-txt .gm-prod a.btn:hover{background:var(--gm-green-dark)}
.gm-txt .gm-prod a.sub{font-size:.9rem;color:var(--gm-green-dark)}
.gm-txt .gm-prod .note,.gm-txt .gm-prods .note{grid-column:1/-1;font-size:.85rem;color:var(--gm-sub);border-top:1px solid var(--gm-line);padding-top:12px;margin-top:4px;line-height:1.7}
/* 紹介商品（2つ以上）：商品カード .gm-item を4列 */
.gm-prods{margin:14px 0 8px}
.gm-prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 16px;margin-top:10px}
.gm-txt .gm-prods .gm-item a{color:inherit;text-decoration:none}
.gm-txt .gm-prods .note{margin-top:18px}

/* 記事の末尾：一覧に戻る＋あわせて読みたい（カードは一覧と共通） */
.gm-artnav{margin-top:56px;border-top:1px solid var(--gm-line);padding-top:36px}
.gm-back{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--gm-green-dark)}
.gm-back::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.gm-artnav .gm-rel{margin-top:36px}
.gm-artnav .gm-rel h2{font-size:1.3rem;font-weight:700;letter-spacing:.04em;margin-bottom:20px}
.gm-artnav .gm-guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gm-artnav .gm-guide :is(h2,h3){font-size:1.08rem}
.gm-artnav .gm-guide .ex{font-size:.92rem;margin-top:4px;line-height:1.7}

/* 左の列：この記事で紹介している商品（小さいカード） */
.gm-sprod{margin-top:22px}
.gm-sprod a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;border:1px solid var(--gm-line);border-radius:8px;padding:10px;margin-top:8px;transition:border-color .15s}
.gm-sprod a:hover{border-color:var(--gm-green)}
.gm-sprod .gm-ph{aspect-ratio:1;font-size:.7rem;padding:4px;overflow:hidden}
.gm-sprod .gm-ph:has(img){padding:0}
.gm-sprod b{display:block;font-size:.92rem;font-weight:500;line-height:1.4}
.gm-sprod .price{display:block;font-weight:700;font-size:1rem;margin-top:2px;font-variant-numeric:tabular-nums}
.gm-sprod .price small{font-weight:400;font-size:.75rem;color:var(--gm-sub);margin-left:2px}

/* ===========================================================
   一覧（archive-guide.php。guides.html）
   =========================================================== */
.gm-arch{padding:26px 0 88px}
.gm-arch-head h1{font-size:2rem;font-weight:700;line-height:1.4;letter-spacing:.04em}
.gm-arch-head .lead{margin-top:14px;font-size:1.02rem;line-height:1.95;color:#444;max-width:860px}
/* 種別の絞り込み（?type= のリンク） */
.gm-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-bottom:20px;border-bottom:1px solid var(--gm-line)}
.gm-kinds a{font-size:.92rem;font-weight:500;border:1px solid var(--gm-line);background:#fff;color:var(--gm-ink);border-radius:999px;padding:7px 18px;transition:border-color .15s,background .15s}
.gm-kinds a:hover{border-color:var(--gm-green)}
.gm-kinds a.is-on{background:var(--gm-green);border-color:var(--gm-green);color:#fff;font-weight:700}
.gm-kinds small{font-weight:400;opacity:.75;margin-left:4px}
.gm-count{margin-top:18px;font-size:.9rem;color:var(--gm-sub)}
.gm-count b{color:var(--gm-ink);font-weight:700;font-size:1.05rem;margin-right:2px}
.gm-arch .gm-guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;margin-top:22px}
.gm-arch .gm-none{margin-top:22px;color:var(--gm-sub)}

/* 縦が短い画面（拡大率150〜160%のノートPC。モックと同じ） */
@media (min-width:961px) and (max-height:760px){
  .gm-art-faq>h2{font-size:1.2rem;padding:7px 16px;margin-bottom:18px}
  .is-art .gm-side-toc .gm-toc a{padding:3px 0 3px 14px}
  .gm-sprod{margin-top:14px}
}

@media (max-width:960px){
  .gm-page.is-art{grid-template-columns:minmax(0,1fr)}
  /* 列は本文の下に「紹介商品｜電話」の2列。目次は本文の冒頭（.gm-toc-m） */
  .is-art .gm-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:start}
  .is-art .gm-side-toc{display:none}
  .is-art .gm-side .gm-sprod,.is-art .gm-side .help{margin-top:0}
  .gm-art-faq>h2{margin-top:44px}
  .gm-prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm-artnav .gm-guides{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .gm-arch{padding-bottom:64px}
  .gm-arch .gm-guides{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
}
@media (max-width:640px){
  .gm-crumb li:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%} /* 記事名は省略表示 */
  .gm-catch{font-size:1.05rem}
  .gm-art-faq>h2{font-size:1.15rem;padding:9px 14px}
  .gm-cmp{margin-left:-20px;margin-right:-20px;padding:0 20px}
  .gm-cmp table{font-size:.88rem}
  .gm-cmp :is(th,td){padding:10px 8px}
  .gm-prod{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px}
  .gm-prod .pic{max-width:220px}
  .gm-prod dl{grid-template-columns:auto 1fr}
  .gm-txt .gm-prod a.btn{display:block;text-align:center;flex:1 0 100%}
  .gm-prod-grid{grid-template-columns:minmax(0,1fr)}
  .gm-artnav .gm-guides,.gm-arch .gm-guides{grid-template-columns:minmax(0,1fr);gap:22px}
  .is-art .gm-side{grid-template-columns:minmax(0,1fr);gap:20px}
  .gm-arch-head h1{font-size:1.55rem}
  .gm-kinds{gap:6px;margin-top:20px}
  .gm-kinds a{font-size:.85rem;padding:6px 14px}
}