:root{--fg:#1b1b1b;--muted:#666;--accent:#c0392b;--bg:#fafafa;--card:#fff;--line:#e3e3e3;}
abbr[title]{cursor:help;text-decoration:underline dotted}
.sup{font-size:.7em;vertical-align:super;color:var(--muted)}
*{box-sizing:border-box}
body{font-family:-apple-system,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
 margin:0;color:var(--fg);background:var(--bg);line-height:1.6;font-size:16px;}
header{background:#222;color:#fff;padding:12px 16px 12px 96px;position:relative;}
header a{color:#fff;text-decoration:none;margin-right:16px;display:inline-flex;align-items:center;min-height:44px;}
header .brand{font-weight:bold;font-size:1.1rem;}
/* 訪問者数(フッター表示) */
.gc-footer{margin:8px 0;font-size:.78rem;color:var(--muted);}
.gc-footer span{color:var(--fg);font-weight:bold;}
/* ヒーロー検索(トップ最上部) */
.hero-search{display:flex;gap:8px;margin:14px 0 18px;max-width:560px;}
.hero-search input[type=search]{flex:1;padding:12px 14px;font-size:1rem;border:1px solid var(--line);
  border-radius:6px;min-height:48px;}
.hero-search button{padding:12px 20px;font-size:1rem;border:none;border-radius:6px;
  background:var(--accent);color:#fff;cursor:pointer;min-height:48px;font-weight:bold;}
/* 状態ランク凡例 */
.rank-legend{font-size:.82rem;color:var(--muted);margin:6px 0 14px;}
.rank-legend b{color:var(--fg);}
/* 全機種一覧への誘導バナー(強調) */
.cta-banner{display:block;margin:12px 0;padding:12px 16px;background:var(--accent);
  color:#fff;text-decoration:none;border-radius:8px;font-weight:bold;text-align:center;
  box-shadow:0 2px 6px rgba(192,57,43,.3);}
.cta-banner:hover{background:#a5301f;}
/* 新着・最安を2列固定に(.grid の後勝ち回避のため詳細度を上げる) */
.grid.grid-2{grid-template-columns:repeat(2,1fr);}
main{max-width:960px;margin:0 auto;padding:16px;overflow-x:hidden;}
h1{font-size:1.5rem;} h2{font-size:1.2rem;border-left:4px solid var(--accent);padding-left:8px;margin-top:2rem;}
table{width:100%;border-collapse:collapse;background:var(--card);margin:12px 0;font-size:.92rem;}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;}
th{background:#f0f0f0;}
.price{font-weight:bold;color:var(--accent);white-space:nowrap;}
.deal-rate{color:#fff;background:var(--accent);border-radius:4px;padding:1px 6px;font-size:.85rem;}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px;margin:8px 0;}
.muted{color:var(--muted);font-size:.85rem;}
a{color:#1565c0;}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:4px 10px;border-radius:4px;text-decoration:none;font-size:.85rem;white-space:nowrap;}
.search-btns{display:flex;flex-wrap:wrap;gap:8px;}
.search-btns .btn{padding:8px 14px;}
/* 出典セル: 「◯◯で見る」+「イマイチ...」を常に縦積みで揃える(店名の長さで
   横になったり縦になったりして崩れて見える問題の修正)。 */
.src-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.src-actions .btn{max-width:100%;white-space:normal;word-break:break-word;text-align:left;}
footer{max-width:960px;margin:24px auto;padding:16px;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px;}
.footer-nav a{color:var(--fg);text-decoration:none;}
.footer-nav a:hover{text-decoration:underline;}
.footer-copy{margin-top:10px;color:var(--muted);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
input[type=search]{width:100%;padding:8px;font-size:1rem;border:1px solid var(--line);border-radius:6px;}
img{max-width:100%;height:auto;}
.chart-wrap{position:relative;width:100%;height:280px;}
.chart-wrap canvas{max-width:100%;}
/* --- 商品画像カード(価格.com風) --- */
.product-card{display:flex;flex-direction:column;text-decoration:none;color:var(--fg);padding:0;overflow:hidden;}
.product-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.12);}
.product-card .thumb,.thumb{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#f4f4f4;overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:contain;}
.thumb-noimg{color:#bbb;font-size:.8rem;letter-spacing:.05em;}
.product-card-body{padding:8px 10px;}
.product-name{font-weight:bold;font-size:.95rem;margin-bottom:2px;line-height:1.3;}
/* --- item ページ上部の大きめ画像 --- */
.item-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.item-photo{flex:0 0 300px;max-width:100%;background:#f4f4f4;border:1px solid var(--line);border-radius:8px;padding:8px;}
.item-photo img{width:100%;height:auto;object-fit:contain;display:block;}
.item-head-body{flex:1 1 260px;min-width:220px;}
/* --- 一覧テーブルの小サムネ(正方形) --- */
.td-thumb{width:56px;padding:4px;}
.thumb-sm{display:inline-block;width:48px;height:48px;object-fit:contain;background:#f4f4f4;border-radius:4px;vertical-align:middle;}
.thumb-noimg-sm{border:1px dashed var(--line);}
@media(max-width:520px){.item-photo{flex-basis:100%;}}
/* --- ヘッダー(検索導線つき) --- */
.header-row{display:flex;align-items:center;flex-wrap:wrap;column-gap:4px;row-gap:4px;}
.header-search{display:flex;gap:6px;margin-top:8px;max-width:420px;}
.header-search-wrap{position:relative;flex:1;}
.header-search input[type=search]{width:100%;padding:10px 8px;font-size:16px;border:1px solid var(--line);border-radius:4px;min-height:44px;}
.header-search button{padding:10px 14px;font-size:.9rem;border:none;border-radius:4px;background:var(--accent);color:#fff;cursor:pointer;min-height:44px;}
.search-suggest{position:absolute;top:100%;left:0;right:0;margin:2px 0 0;padding:4px 0;list-style:none;
 background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);
 z-index:90;max-height:320px;overflow-y:auto;}
.search-suggest[hidden]{display:none;}
.search-suggest li{margin:0;}
.search-suggest a{display:block;padding:8px 12px;color:var(--fg);text-decoration:none;font-size:.9rem;}
.search-suggest a:hover,.search-suggest a:focus{background:#f0f0f0;}
/* --- トップのメーカー導線チップ --- */
.maker-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}
.maker-chip{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 12px;font-size:.85rem;text-decoration:none;color:var(--fg);}
.maker-chip:hover{background:#f0f0f0;}
/* --- トップ「条件から探す」パネル(導線を1カードに集約し視覚ノイズを削減) --- */
.find-panel{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;margin:16px 0;}
.find-panel h2{margin:0 0 8px;font-size:1.05rem;border:none;padding:0;}
.find-row{display:flex;align-items:center;gap:8px;padding:4px 0;}
.find-label{min-width:64px;color:var(--muted);font-size:.8rem;flex-shrink:0;}
.find-chips{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;}
.find-chips .maker-chip{white-space:nowrap;flex-shrink:0;}
/* データページへの控えめなリンクバー */
.link-bar{font-size:.85rem;color:var(--muted);margin:8px 0 4px;}
.link-bar a{color:var(--fg);text-decoration:none;border-bottom:1px dotted var(--muted);}
.link-bar a:hover{color:var(--accent);}
/* --- 割安ランキングの絞り込み・ソートUI --- */
.deal-filters{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:10px 0;font-size:.9rem;}
.deal-select{padding:8px 6px;font-size:.9rem;border:1px solid var(--line);border-radius:4px;min-height:44px;}
.deal-cat-toggle{display:inline-flex;gap:4px;flex-wrap:wrap;}
.deal-cat-btn{padding:8px 12px;font-size:.85rem;border:1px solid var(--line);background:var(--card);border-radius:4px;cursor:pointer;min-height:44px;}
.deal-cat-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent);}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
th.sortable:hover{background:#e6e6e6;}
th.sortable::after{content:"\25B2\25BC";color:var(--muted);font-size:.6em;margin-left:4px;letter-spacing:-2px;}
th.sort-asc::after{content:"\25B2";color:var(--fg);font-size:.75em;}
th.sort-desc::after{content:"\25BC";color:var(--fg);font-size:.75em;}
/* --- テーブルの横スクロール対応(モバイル崩れ防止) --- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:640px;}
.price{font-size:1.05em;}
@media(max-width:600px){
  header{padding-left:80px;}
  .header-row{gap:2px 10px;}
  header a{margin-right:10px;font-size:.92rem;}
  .header-search{max-width:none;width:100%;}
  main{padding:12px;}
  h1{font-size:1.3rem;}
  .deal-filters{gap:8px;}
  /* カード型テーブル: 横スクロール前提の一覧テーブル(.table-scroll 配下)を
     縦積みカードに変換する。data-label 属性を持つ td はラベル付きの
     行として表示する。ソート/絞り込みJS(deal-filter.js)は tr の
     style.display を切り替えるだけなので、tr の display:block 化と
     JSによる display:none の併用は問題なく共存する。 */
  .table-scroll{overflow-x:visible;}
  .table-scroll table{min-width:0;border:none;background:transparent;}
  .table-scroll table tr:first-child{display:none;}
  .table-scroll table tr{
    display:block;background:var(--card);border:1px solid var(--line);
    border-radius:8px;margin:0 0 10px;padding:6px 10px;
  }
  .table-scroll table td{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    border:none;border-bottom:1px solid var(--line);padding:8px 0;
    text-align:right;
  }
  .table-scroll table td:last-child{border-bottom:none;}
  .table-scroll table td[data-label]::before{
    content:attr(data-label);font-weight:bold;color:var(--muted);
    font-size:.82rem;text-align:left;margin-right:auto;padding-right:8px;
    white-space:nowrap;
  }
  .table-scroll table td:empty{display:none;}
  .table-scroll table td.td-thumb{padding:8px 0;justify-content:flex-start;}
  .table-scroll table td.deal-idx{display:none;}
  /* ランキングカードの機種名行: サムネ+機種名+状態バッジを1行にまとめ、
     続く価格対比行を見やすくする(6段の間延び緩和)。 */
  .table-scroll table td[data-label="機種"]{display:block;text-align:left;padding-bottom:4px;}
  .table-scroll table td[data-label="機種"]::before{display:none;}
  .table-scroll table td[data-label="機種"] a{font-weight:bold;font-size:.98rem;}
  .table-scroll table td[data-label="状態"]{display:none;}
  .rank-badge{display:inline-block;font-size:.72rem;font-weight:bold;border-radius:4px;
    padding:1px 7px;margin-left:6px;background:#eee;color:var(--muted);border:1px solid var(--line);
    vertical-align:middle;}
  .rank-badge.rank-S{background:#e8f5e9;color:#1b5e20;border-color:#a5d6a7;}
  .rank-badge.rank-A{background:#e3f2fd;color:#0d47a1;border-color:#90caf9;}
  .rank-badge.rank-B{background:#fff8e1;color:#8d6e00;border-color:#ffe082;}
  .rank-badge.rank-C{background:#fbe9e7;color:#a13a1f;border-color:#ffab91;}
  .rank-badge.rank-J{background:#eceff1;color:#37474f;border-color:#b0bec5;}
  /* 出品価格/中央値を1行対比表示に */
  .table-scroll table td[data-label="出品価格"]{display:block;text-align:left;padding:6px 0 2px;}
  .table-scroll table td[data-label="出品価格"]::before{display:none;}
  .price-compare{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:.95rem;}
  .price-compare .price{font-size:1.1em;}
  .price-compare .vs-median{color:var(--muted);font-size:.85rem;}
  .table-scroll table td[data-label="相場中央値"],
  .table-scroll table td[data-label="中央値"],
  .table-scroll table td[data-label="差額"]{display:none;}
  .table-scroll table td[data-label="割安率"]{display:block;text-align:left;padding:4px 0;}
  .table-scroll table td[data-label="割安率"]::before{display:none;}
  /* 出典モールのバッジ */
  .src-badge{display:inline-block;font-size:.72rem;background:#eef2f7;color:#375;
    border:1px solid var(--line);border-radius:4px;padding:1px 7px;margin-bottom:4px;
    color:var(--muted);font-weight:bold;}
  /* カード内の出典ボタン等は長い店名でも折り返し、はみ出し・見切れを防ぐ
     (デスクトップの .btn は nowrap のままにし、モバイルのみ解除)。 */
  .table-scroll table td .btn{white-space:normal;word-break:break-word;
    text-align:center;max-width:70%;}
  /* 出典セル(ボタン群)はカードでは「ラベルを上、ボタンを全幅」のブロックに。
     ラベル右寄せflexのままだとボタンが中途半端な位置・幅になり見苦しいため。 */
  .table-scroll table td:has(.src-actions){display:block;text-align:left;}
  .table-scroll table td:has(.src-actions)::before{
    display:block;margin:0 0 6px;padding-right:0;}
  .src-actions{width:100%;}
  .table-scroll table td .src-actions .btn,
  .table-scroll table td .src-actions .dv-btn,
  .src-actions .btn,.src-actions .dv-btn{
    display:flex;align-items:center;justify-content:center;
    width:100%;max-width:none;text-align:center;
    box-sizing:border-box;padding:10px 12px;}
  /* 検索ボタン(楽天/Amazon/Yahoo)はモバイルで全幅の縦積みに。 */
  .search-btns{flex-direction:column;}
  .search-btns .btn{width:100%;text-align:center;white-space:normal;}
}
/* --- ガイド記事 --- */
.guide-article{max-width:760px;}
.guide-article h3{font-size:1.05rem;margin:1.4rem 0 .4rem;}
.guide-article p{margin:.6rem 0;}
.guide-article ul{margin:.6rem 0;padding-left:1.3em;}
.guide-article li{margin:.3rem 0;}
.guide-toc{background:#fbfbf7;border-left:4px solid var(--accent);}
/* --- 低評価(👎)ボタン --- */
.dv-btn{display:inline-flex;align-items:center;gap:3px;background:var(--card);
 border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:.85rem;
 cursor:pointer;color:var(--muted);line-height:1;min-height:32px;}
.dv-btn:hover{background:#f0f0f0;}
.dv-btn:disabled{cursor:default;opacity:1;}
.dv-btn.is-voted{background:var(--accent);color:#fff;border-color:var(--accent);}
.dv-btn .dv-ico{font-size:1rem;}
/* --- カテゴリ一覧サイドドロワー --- */
#drawer-tab{position:fixed;top:12px;left:0;
 z-index:60;background:var(--accent);color:#fff;border:none;border-radius:0 6px 6px 0;
 padding:10px 8px;font-size:.85rem;cursor:pointer;writing-mode:horizontal-tb;
 box-shadow:2px 0 6px rgba(0,0,0,.15);min-height:44px;min-width:44px;}
#drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:70;}
#drawer-overlay[hidden]{display:none;}
#cat-drawer{position:fixed;top:0;left:0;height:100%;width:320px;max-width:80vw;
 background:var(--card);z-index:80;box-shadow:2px 0 12px rgba(0,0,0,.2);
 transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;}
#cat-drawer.is-open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
 padding:12px 14px;border-bottom:1px solid var(--line);font-weight:bold;position:sticky;top:0;background:var(--card);}
.drawer-head button{background:none;border:none;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--muted);}
.drawer-body{padding:8px 14px 20px;}
.drawer-maker{margin:10px 0;}
.drawer-maker-name{font-weight:bold;font-size:.92rem;margin-bottom:4px;}
.drawer-cat-list{list-style:none;margin:0;padding:0 0 0 8px;}
.drawer-cat-list li{margin:3px 0;}
.drawer-cat-list a{font-size:.88rem;text-decoration:none;}
.drawer-cat-list a:hover{text-decoration:underline;}
@media(max-width:600px){
  #cat-drawer{width:85vw;}
  #drawer-tab{top:10px;padding:9px 7px;font-size:.78rem;opacity:.9;}
  .drawer-head button{min-width:44px;min-height:44px;}
}