/* =====================================================================
   型落ち.com スタイルシート v6（全面リライト）
   方針:
   - 視認性: 本文・データは濃色ではっきり。注意書き(.note/.disclaimer等)は控えめ(--faint)
   - 親しみやすさ: 温かいクリーム背景 + 丸ゴシック見出し + オレンジ系ブランド色
   - スマホ最優先: 比較表の1列目固定・タップ領域拡大・モバイル調整
   ===================================================================== */
:root{
  --bg:#ffffff;            /* 基本背景は白（データの視認性優先・温かみは差し色で表現） */
  --card:#ffffff;
  --ink:#33312e;           /* 本文: ほぼ黒（暖色寄り） */
  --sub:#5f6066;           /* 補足: 従来より濃く＝読める灰色 */
  --faint:#9b9890;         /* 注意書き・出典など控えめ用 */
  --brand:#e8590c;         /* 温かいオレンジ（お得・元気） */
  --brand-soft:#fdeee2;    /* ブランド淡色 */
  --accent:#188a4e;        /* 在庫あり・ポジティブ */
  --accent-soft:#e3f4e9;
  --price:#d6452c;         /* 価格 */
  --link:#1a56db;          /* リンク青 */
  --line:#eee3d2;          /* 罫線も温かく */
  --soft:#f7efe3;          /* 薄地 */
  --shadow:0 4px 14px rgba(120,90,40,.11);  /* 白地でカードが浮くよう少し強め */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{scroll-behavior:smooth}
#all-gens{scroll-margin-top:16px}  /* アンカー着地時に見出しが上端に張り付かない余白 */
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.8;font-size:16px}
h1,h2,h3,.brand{font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",
  "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:960px;margin:0 auto;padding:0 16px}

/* ---------------- ヘッダー・共通枠 ---------------- */
.site-header{background:var(--card);border-bottom:2px solid var(--brand);padding:10px 16px}
.header-inner{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;max-width:960px;margin:0 auto}
.brand{font-weight:800;font-size:1.35rem;color:var(--brand)}
.tagline{color:var(--sub);font-size:.82rem}
.site-nav{margin-left:auto;display:flex;gap:16px}
.site-nav a{font-size:.92rem;font-weight:700;color:var(--ink);padding:4px 2px}
.site-nav a:hover{color:var(--brand)}
.pr-label{margin:0;padding:4px 16px;background:var(--soft);color:var(--faint);
  font-size:.7rem;text-align:center;border-bottom:1px solid var(--line)}
.breadcrumb{padding:10px 16px;color:var(--sub);font-size:.85rem}
.breadcrumb a{color:var(--link);text-decoration:underline}
main.container{padding-top:10px;padding-bottom:48px}
h1{font-size:1.5rem}
h2{border-left:6px solid var(--brand);padding-left:10px;font-size:1.2rem;margin:1.6em 0 .6em}
h3{font-size:1rem}
section{margin-top:26px}

/* ---------------- リンク視認性（青字+下線） ---------------- */
main a{color:var(--link);text-decoration:underline}
main a:hover{color:#0b3ea8}
main a.btn-shop, main a.cta-btn{color:#fff;text-decoration:none}
main a.series-card{color:inherit;text-decoration:none}
main .shop-card-img a{text-decoration:none}
main .search-results a{color:inherit;text-decoration:none}
main .genealogy .gen-item > a{color:inherit;text-decoration:none}
main .genealogy .gen-item > a .gen-model{color:var(--link);text-decoration:underline}
main .compare-links .cl-sub, main .compare-links .cl-gen{color:var(--sub)}
main a.muted-link{color:var(--faint);text-decoration:underline}

/* ---------------- 注意書き類（控えめのまま） ---------------- */
.note{color:var(--sub);font-size:.85rem}
.diff-note{display:block;font-size:.76rem;color:var(--faint);margin:6px 0 0}
.diff-direction{font-size:.9rem;color:var(--sub);margin:6px 0 12px;line-height:1.7}
.diff-direction strong{color:var(--ink);font-weight:700}
.price-at{font-size:.72rem;font-weight:400;color:var(--faint);margin-left:4px}
.spec-raw{display:block;color:var(--faint);font-size:.78rem;white-space:normal;line-height:1.5}

/* ---------------- フッター ---------------- */
.site-footer{background:var(--card);border-top:1px solid var(--line);padding:20px 16px;margin-top:48px}
.site-footer .disclaimer{font-size:.76rem;color:var(--faint);max-width:760px;line-height:1.7}
.site-footer .note{color:var(--faint);font-size:.76rem}
.footer-nav{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.footer-nav a{font-size:.85rem;color:var(--sub);text-decoration:underline}
.footer-nav a:hover{color:var(--brand)}
.copyright{color:var(--faint);font-size:.76rem}
.ws-credit{font-size:.76rem}
.ws-credit a{color:var(--faint);text-decoration:underline}

/* ---------------- トップ: ヒーロー・検索 ---------------- */
.hero{text-align:center;padding:28px 0 10px}
.hero h1{font-size:1.9rem;margin:.2em 0;color:var(--brand)}
.hero .lead{color:var(--ink);margin:0 0 18px;font-size:1.02rem}
.search{position:relative;max-width:560px;margin:0 auto}
.search-row{display:flex;gap:8px}
.search-row input{flex:1;padding:14px 16px;font-size:1rem;border:2px solid var(--line);
  border-radius:14px;background:#fff;min-width:0}
.search-row input:focus{outline:none;border-color:var(--brand)}
#search-btn{flex:0 0 56px;border:2px solid var(--line);border-radius:14px;background:#fff;
  font-size:1.2rem;cursor:pointer;min-height:48px}
#search-btn:hover{border-color:var(--brand)}
.search-results{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);text-align:left;z-index:10}
.search-results li a{display:block;padding:12px;border-radius:10px}
.search-results li a:hover{background:var(--soft)}
.search-none{padding:10px 12px;color:var(--sub)}

/* ---------------- トップ: 特徴・カテゴリカード ---------------- */
.feature-row{display:grid;grid-template-columns:1fr;gap:12px;margin:24px 0}
@media (min-width:720px){.feature-row{grid-template-columns:1fr 1fr 1fr}}
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:6px 16px 14px;box-shadow:var(--shadow)}
.feature h3{color:var(--brand);margin:12px 0 4px}
.feature:nth-child(1) h3::before{content:"📅 "}
.feature:nth-child(2) h3::before{content:"⚖️ "}
.feature:nth-child(3) h3::before{content:"💰 "}
.feature p{margin:0;font-size:.9rem;color:var(--ink);line-height:1.8}
.maker-block{margin-top:30px}
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.series-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:4px;transition:.15s;box-shadow:var(--shadow)}
.series-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.series-name{font-weight:700;font-size:1.02rem}
.series-meta{color:var(--sub);font-size:.84rem}
.category-card{border:2px solid var(--brand);background:linear-gradient(180deg,#fff,var(--brand-soft))}
.cat-icon{font-size:1.8rem}
/* ポータルの「狙い目」「購入ガイド」をジャンル別に区分けする共通の見出し */
.cat-group{margin-top:18px}
.cat-group:first-of-type{margin-top:8px}
.cat-group-title{display:flex;align-items:center;gap:7px;font-size:1.02rem;font-weight:700;
  margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cat-icon-sm{font-size:1.2rem;line-height:1}
.cat-group .compare-links{margin:0}
.cat-group > .note{margin:6px 0 0}
.about-site p{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px 18px;line-height:1.9}
.series-cat{color:var(--sub)}

/* ---------------- テーブル共通（比較表・マトリクス） ---------------- */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
/* 横スクロール可能な表に「スクロールできます」ヒントを重ねる（モバイルのみ・JSで付与） */
.tw-rel{position:relative}
.scroll-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(45,40,34,.82);color:#fff;font-size:.82rem;font-weight:700;
  padding:8px 16px;border-radius:22px;pointer-events:none;z-index:6;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.2);transition:opacity .45s ease}
.scroll-hint.hide{opacity:0}
@media (min-width:601px){.scroll-hint{display:none}}
table.spec-matrix,table.diff-table,table.spec-table{border-collapse:separate;border-spacing:0;
  width:100%;font-size:.92rem}
.spec-matrix th,.spec-matrix td,.diff-table th,.diff-table td,.spec-table th,.spec-table td{
  border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;white-space:nowrap}
.spec-matrix thead th,.diff-table thead th{background:var(--soft);font-size:.88rem}
.spec-matrix tbody th,.diff-table tbody th,.spec-table th{
  font-weight:600;color:var(--ink);background:#fdfaf4;min-width:8.5em;font-size:.88rem}
/* スマホの横スクロールでも項目名が見えるよう1列目を固定 */
.spec-matrix tbody th,.diff-table tbody th,
.spec-matrix thead th:first-child,.diff-table thead th:first-child{
  position:sticky;left:0;z-index:2;box-shadow:2px 0 4px rgba(120,90,40,.06)}
.spec-matrix thead th:first-child,.diff-table thead th:first-child{z-index:3}
.spec-matrix td.diff,.diff-table td.diff{background:#fff3cd;font-weight:700}
.spec-matrix th.latest-col{border-bottom:2px solid var(--accent)}
.spec-matrix thead a,.diff-table thead a{color:var(--link);text-decoration:underline}
.th-sub{display:block;font-weight:400;font-size:.74rem;color:var(--sub)}
.delta{color:var(--sub);font-size:.86rem}
.arrow{font-weight:700}
.imp-key th{color:var(--ink)}
.price-row th{color:var(--price)}
.price-row td{font-weight:700;color:var(--ink)}
.release-row th{color:var(--sub)}
.release-row td{color:var(--sub);font-size:.88rem}
.official-row td a{white-space:normal}
.no-diff{background:#eef6ff;border:1px solid #cfe3f8;border-radius:12px;padding:12px 14px}

.spec-grp{font-size:.95rem;color:var(--sub);margin:18px 0 4px;border-left:4px solid var(--line);padding-left:8px}
.spec-table{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:block}
.spec-table tbody{display:table;width:100%}
.spec-table td{white-space:normal;color:var(--ink)}

/* ---------------- 系譜（歴代モデル） ---------------- */
.genealogy{list-style:none;padding:0;margin:8px 0}
.genealogy .gen-item{background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin:8px 0;box-shadow:var(--shadow)}
.genealogy .gen-item>a,.genealogy .gen-item>span{display:flex;gap:10px;align-items:center;
  padding:12px 16px;flex-wrap:wrap}
.genealogy .gen-item.current{border-color:var(--brand);background:var(--brand-soft)}
.genealogy .is-latest{border-left:5px solid var(--accent)}
.genealogy .gen-item.lineage{opacity:.8;box-shadow:none}
.genealogy.compact .gen-item>a,.genealogy.compact .gen-item>span{padding:9px 14px}
.gen-badge{background:var(--soft);border-radius:8px;padding:2px 10px;font-size:.78rem;font-weight:700}
.is-latest .gen-badge{background:var(--accent-soft);color:var(--accent)}
.gen-model{font-weight:700;font-size:1.02rem}
.gen-date{color:var(--sub);font-size:.84rem}
.gen-stock{font-size:.78rem;border-radius:8px;padding:2px 10px;font-weight:600}
.gen-stock.in{background:var(--accent-soft);color:var(--accent)}
.gen-stock.out{background:var(--soft);color:var(--sub)}
.gen-price{font-weight:700;color:var(--price);font-size:.95rem}

/* ---------------- 製品ページ ---------------- */
.product-summary{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--sub);margin:.3em 0 1em}
.product-summary .release{color:var(--ink)}
.product-summary .series-link a{color:var(--link);text-decoration:underline}
.stock-banner{border-radius:12px;padding:12px 16px;font-weight:700;margin:16px 0}
.stock-banner.in{background:var(--accent-soft);color:var(--accent)}
.stock-banner.in::before{content:"🉐 "}
.stock-banner.out{background:var(--soft);color:var(--sub);font-weight:600}
.stock-banner.latest{background:#e8f0fe;color:#1a56db}
.stock-banner.latest::before{content:"✨ "}
.stock-banner.cta{background:#fff4e5;border:1px solid #f5c26b;color:var(--ink)}
.cta-text{margin:0 0 10px;font-weight:600}
.stock-banner.cta strong{color:var(--price);font-size:1.15rem}
.cta-btn{display:inline-block;background:var(--brand);color:#fff;border-radius:999px;
  padding:12px 24px;font-weight:700;font-size:.95rem;transition:.15s}
.cta-btn:hover{opacity:.88;transform:translateY(-1px)}

.diff-bullets{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px 14px 36px;margin:10px 0;box-shadow:var(--shadow)}
.diff-bullets li{margin:6px 0}
.diff-bullets-more{color:var(--sub);font-size:.85rem;list-style:none;margin-left:-18px}
.cost-reco{background:#fdf2f2;border:1px solid #f5b5b5;border-radius:12px;padding:12px 16px;font-size:.95rem}
.compare-lead{font-size:1.02rem}

/* ---------------- 結論ボックス ---------------- */
.verdict{background:var(--card);border:2px solid var(--brand);border-radius:18px;
  padding:6px 18px 16px;margin:24px 0;box-shadow:var(--shadow)}
.verdict h2{font-size:1.12rem;border-left:none;padding-left:0}
.verdict-cols{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.verdict-cols{grid-template-columns:1fr 1fr}}
.verdict-col{border:1px solid var(--line);border-radius:12px;padding:4px 16px 12px}
.verdict-col h3{font-size:.95rem;margin:12px 0 6px}
.vc-old{background:#fdfaf4}
.vc-new{background:var(--accent-soft);border-color:#bfe2cb}
.vc-sub{color:var(--sub);font-weight:400;font-size:.8rem}
.verdict-col ul{margin:6px 0;padding-left:20px}
.verdict-col li{margin:5px 0;font-size:.93rem}
.vc-none{color:var(--sub);font-size:.85rem}
.verdict-summary{background:var(--brand-soft);border-radius:10px;padding:12px 16px;margin:12px 0 4px;font-weight:700}

/* ---------------- 商品カード（ポチップ風） ---------------- */
.shop-card-list{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){.shop-card-list{grid-template-columns:1fr 1fr}}
.shop-card{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px;align-items:center;box-shadow:var(--shadow)}
.shop-card.soldout{opacity:.78;box-shadow:none}
.shop-card-img{flex:0 0 128px;height:128px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--soft);border-radius:12px;overflow:hidden}
.shop-card-img img{max-width:100%;max-height:100%;object-fit:contain}
.shop-card-img .noimg{color:var(--faint);font-size:.78rem;text-align:center}
.shop-card-body{flex:1;min-width:0}
.shop-card-title{font-weight:700;line-height:1.5}
.shop-card-sub{color:var(--sub);font-size:.82rem;margin-top:2px}
.shop-card-price{font-size:1.35rem;font-weight:800;color:var(--price);margin:6px 0}
.shop-card-price.none{font-size:.85rem;font-weight:400;color:var(--sub)}
.shop-card-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn-shop{display:inline-block;color:#fff;border-radius:999px;padding:11px 26px;
  font-weight:700;font-size:.92rem;text-align:center;transition:.15s;line-height:1.5}
.btn-shop:hover{opacity:.85;transform:translateY(-1px)}
.btn-rakuten{background:#e2402f}
.btn-amazon{background:#f5a623}
.shop-card.soldout .btn-rakuten{background:#9aa0a6}
.shop-card-alt{display:inline-block;margin-top:8px;font-size:.8rem;color:var(--link);text-decoration:underline}
.hero-card{margin:14px 0}
.hero-card .shop-card-img{flex-basis:160px;height:160px}
.compare-buy{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){.compare-buy{grid-template-columns:1fr 1fr}}
.compare-buy-col{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.compare-buy-col .shop-card{margin:8px 0;box-shadow:none}
.compare-buy-col .shop-card-img{flex-basis:96px;height:96px}

/* ---------------- 比較リンク一覧 ---------------- */
.compare-links{list-style:none;padding:0}
.compare-links li{background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin:8px 0;box-shadow:var(--shadow)}
.compare-links a{display:block;padding:13px 16px;font-weight:700}
.compare-links .cl-sub{display:block;font-weight:400;font-size:.82rem;color:var(--sub)}
.cl-gen{color:var(--sub);font-weight:400;font-size:.85rem}

/* ---------------- ガイド記事・固定ページ ---------------- */
.guide{max-width:760px}
.guide h1{font-size:1.5rem;line-height:1.5}
/* Markdownガイドでは h1 直後の段落を自動でリード(導入の囲み)にする＝クラス指定不要 */
.guide-lead,.guide>h1+p{color:var(--ink);background:var(--card);border-left:5px solid var(--brand);
  padding:14px 18px;border-radius:0 14px 14px 0;box-shadow:var(--shadow)}
.guide section{margin:28px 0}
.guide h2{font-size:1.15rem;margin:30px 0 8px}
.guide h3{margin:16px 0 6px}
.guide p{line-height:1.95}
.guide ul{margin:12px 0 12px 1.2em}
.guide li{margin:6px 0;line-height:1.85}
.contact-form{max-width:640px}
.contact-form iframe{width:100%;max-width:640px;border:1px solid var(--line);border-radius:14px}

/* ---------------- スマホ最適化 ---------------- */
@media (max-width:600px){
  .header-inner{gap:6px}
  .brand{font-size:1.2rem}
  .tagline{display:none}
  .site-nav{margin-left:auto;gap:12px}
  .hero{padding:18px 0 6px}
  .hero h1{font-size:1.45rem}
  .hero .lead{font-size:.92rem}
  h1{font-size:1.3rem}
  h2{font-size:1.08rem}
  main.container{padding-left:12px;padding-right:12px}
  .spec-matrix th,.spec-matrix td,.diff-table th,.diff-table td,
  .spec-table th,.spec-table td{padding:8px 8px;font-size:.82rem;white-space:normal}
  .spec-matrix tbody th,.diff-table tbody th,.spec-table th{min-width:5em;font-size:.78rem}
  /* 比較表(4列)はモバイルで列幅を固定し、項目=広め/モデル列=名前+余白/差=コンパクトに収める */
  .diff-table{table-layout:fixed}
  .diff-table thead th:first-child{width:32%}
  .diff-table thead th:last-child{width:14%}
  .diff-table tbody th{min-width:0}
  .diff-table th,.diff-table td{overflow-wrap:anywhere}
  /* データ表(写真ガイド等・列数多め)は横スクロール。数字を桁で折らず、1列目固定で見やすく */
  .diff-table.data-table{table-layout:auto}
  .diff-table.data-table th,.diff-table.data-table td{white-space:nowrap;overflow-wrap:normal}
  .diff-table.data-table thead th:first-child,.diff-table.data-table thead th:last-child{width:auto}
  .shop-card{padding:12px;gap:10px}
  .shop-card-img{flex-basis:96px;height:96px}
  .hero-card .shop-card-img{flex-basis:110px;height:110px}
  .shop-card-btns{width:100%}
  .btn-shop{flex:1;padding:11px 8px}
  .genealogy .gen-item>a,.genealogy .gen-item>span{padding:10px 12px;gap:8px}
  .gen-model{font-size:.96rem}
  .verdict{padding:4px 12px 12px}
  .guide-lead{padding:12px 14px}
}

/* ---- v6.3: スペック表外変更・結論直下CTA ---- */
.extra-note{background:#fffbe8;border:1px solid #f0e2ad;border-radius:10px;
  padding:10px 14px;font-size:.88rem;color:var(--ink)}
.verdict-cta{text-align:center;margin:-8px 0 24px}

/* ---- v6.5: 主要スペック以外の差分（リスト化） ---- */
.extra-note ul{margin:6px 0 0;padding-left:1.3em}
.extra-note li{margin:3px 0;font-size:.9rem}
.extra-note .rel{color:var(--sub);font-size:.85rem}