/* ========================================
   超軽量 共通スタイル - Mobile First
   Navy × Gold デザイン
   ======================================== */
:root{
  --c-navy:    #1e3a5f;   /* メインネイビー */
  --c-navy-dk: #152c4a;   /* ダークネイビー（ヘッダー等） */
  --c-navy-lt: #2a4f7c;   /* ライトネイビー（ホバー等） */
  --c-gold:    #c9a84c;   /* ゴールドアクセント */
  --c-gold-lt: #e2c476;   /* ライトゴールド（ボタンホバー） */
  --c-bg:      #f4f6f9;   /* 背景（薄いブルーグレー） */
  --c-card:    #ffffff;
  --c-text:    #1a1a2e;   /* 本文テキスト（濃紺） */
  --c-muted:   #6b7a99;   /* サブテキスト */
  --c-border:  #d8dfe8;
  --c-link:    #1e3a5f;
  --radius:    8px;
  --max-w:     680px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:16px;-webkit-text-size-adjust:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.7;
  padding:0 12px;
}

/* ---- Header ---- */
header{
  background:var(--c-navy-dk);
  color:#fff;
  padding:14px 16px;
  margin:0 -12px 20px;
  position:sticky;top:0;z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  border-bottom:2px solid var(--c-gold);
}
header a{
  color:#fff;text-decoration:none;
  font-weight:700;font-size:1rem;
  letter-spacing:.02em;
}
header p{font-size:.72rem;color:#a8bcd4;margin-top:3px}

/* ---- Layout ---- */
.wrap{max-width:var(--max-w);margin:0 auto}

/* ---- Breadcrumb ---- */
.breadcrumb{font-size:.75rem;color:var(--c-muted);margin-bottom:14px}
.breadcrumb a{color:var(--c-navy);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span+span::before{content:" › ";padding:0 4px;color:var(--c-muted)}

/* ---- Page Hero ---- */
.hero{margin-bottom:20px}
.hero h1{
  font-size:1.25rem;font-weight:700;
  line-height:1.4;color:var(--c-navy-dk);
}
.hero .meta{font-size:.75rem;color:var(--c-muted);margin-top:6px}
.hero .lead{font-size:.9rem;margin-top:10px;color:#3a4a6b;line-height:1.75}

/* ---- TOC ---- */
.toc{
  background:#eef2f8;
  border:1px solid #c2cfe0;
  border-left:4px solid var(--c-navy);
  border-radius:var(--radius);
  padding:14px 16px;margin-bottom:24px;
}
.toc strong{
  font-size:.85rem;display:block;
  margin-bottom:8px;color:var(--c-navy-dk);
}
.toc ol{padding-left:18px;font-size:.85rem}
.toc li{margin-bottom:4px}
.toc a{color:var(--c-navy);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---- Section ---- */
.section{margin-bottom:32px}
.section h2{
  font-size:1.05rem;font-weight:700;
  border-left:4px solid var(--c-gold);
  padding-left:10px;margin-bottom:14px;
  line-height:1.4;color:var(--c-navy-dk);
}
.section h3{font-size:.95rem;font-weight:700;margin:16px 0 8px;color:var(--c-navy)}

/* ---- Product Card ---- */
.product-card{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:12px;
  display:flex;gap:12px;
  align-items:flex-start;
  box-shadow:0 1px 4px rgba(30,58,95,.06);
}
.product-card .rank{
  min-width:28px;height:28px;
  background:var(--c-navy);
  color:#fff;
  border-radius:50%;font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.product-card .info{flex:1;min-width:0}
.product-card .name{
  font-size:.9rem;font-weight:700;
  line-height:1.4;color:var(--c-navy-dk);
}
.product-card .reason{font-size:.8rem;color:#4a5a78;margin-top:4px;line-height:1.55}
.product-card .price-hint{font-size:.75rem;color:var(--c-muted);margin-top:4px}
.product-card .price-live{
  font-size:.82rem;font-weight:700;margin-top:6px;
  color:#b12704;letter-spacing:.01em;
}

/* ---- Amazon Button ---- */
.btn-amz{
  display:inline-block;margin-top:8px;
  background:var(--c-gold);
  color:#1a1a2e !important;
  font-size:.8rem;font-weight:700;
  padding:7px 16px;border-radius:20px;
  text-decoration:none;
  border:1px solid #a8872e;
  letter-spacing:.02em;
}
.btn-amz:hover{background:var(--c-gold-lt)}

/* ---- Amazon Link Group (large CTA) ---- */
.amz-link-group{
  display:flex;flex-direction:column;gap:10px;
  margin:4px 0 8px;
}
.btn-amz-lg{
  display:block;
  background:var(--c-navy);
  color:#fff !important;
  font-size:.95rem;font-weight:700;
  padding:14px 16px;
  border-radius:var(--radius);
  text-decoration:none;
  text-align:center;
  border-bottom:3px solid var(--c-gold);
  box-shadow:0 2px 4px rgba(30,58,95,.18);
  letter-spacing:.02em;
  line-height:1.4;
}
.btn-amz-lg:hover{background:var(--c-navy-lt);color:#fff}
.btn-amz-lg:active{transform:translateY(1px)}

/* ---- Product Frame ---- */
.product-frame{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  border-left:4px solid var(--c-navy);
  padding:14px 16px;
  margin:14px 0 20px;
  box-shadow:0 1px 4px rgba(30,58,95,.08);
}
.product-frame h3{
  margin:0 0 8px;
  font-size:1rem;font-weight:700;color:var(--c-navy-dk);
}
.product-frame p{font-size:.88rem;line-height:1.78;color:#2e3f5c;margin-bottom:8px}
.product-frame .meta-row{
  display:flex;flex-wrap:wrap;gap:10px;
  font-size:.76rem;color:var(--c-muted);
  margin:10px 0;padding:8px 0;
  border-top:1px dashed var(--c-border);
  border-bottom:1px dashed var(--c-border);
}
.product-frame .meta-row span strong{color:var(--c-navy);margin-right:4px}

/* ---- Tip / Warn / Callout ---- */
.tip-box{
  background:#fffaea;border:1px solid #e8d97b;
  border-left:4px solid var(--c-gold);
  border-radius:var(--radius);
  padding:12px 14px;margin:12px 0;
  font-size:.85rem;color:#5a4a1a;line-height:1.7;
}
.tip-box strong{color:#8a6a0a}
.warn-box{
  background:#fdf1f1;border:1px solid #f0c5c5;
  border-left:4px solid #c53030;
  border-radius:var(--radius);
  padding:12px 14px;margin:12px 0;
  font-size:.85rem;color:#632020;line-height:1.7;
}
.warn-box strong{color:#992020}
.callout{
  background:#eef2f8;
  border-left:4px solid var(--c-navy);
  border-radius:var(--radius);
  padding:12px 14px;margin:14px 0;
  font-size:.88rem;color:#2e3f5c;line-height:1.75;
}

/* ---- Compare Table ---- */
.compare-table{
  width:100%;border-collapse:collapse;
  font-size:.8rem;margin:12px 0 18px;
  background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius);overflow:hidden;
}
.compare-table th,.compare-table td{
  padding:9px 10px;text-align:left;
  border-bottom:1px solid var(--c-border);
  vertical-align:top;
}
.compare-table thead th{
  background:var(--c-navy);color:#fff;
  font-size:.76rem;font-weight:700;
}
.compare-table tbody tr:nth-child(even){background:#f7f9fc}
.compare-table tbody tr:last-child td{border-bottom:none}

/* ---- Pros / Cons ---- */
.pro-con{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:12px 0 16px;
}
.pro-con .pro,.pro-con .con{
  padding:10px 12px;border-radius:var(--radius);
  font-size:.82rem;line-height:1.7;
}
.pro-con .pro{background:#ecf5ed;border:1px solid #b9dbbd;color:#2e5430}
.pro-con .con{background:#fdf1f1;border:1px solid #f0c5c5;color:#6b2929}
.pro-con h4{font-size:.82rem;margin-bottom:5px;font-weight:700}
.pro-con .pro h4{color:#1f6b28}
.pro-con .con h4{color:#992020}
.pro-con ul{padding-left:16px;margin:0}
.pro-con li{margin-bottom:3px}
@media(max-width:480px){.pro-con{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq-item{
  background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;
}
.faq-q{
  font-size:.9rem;font-weight:700;color:var(--c-navy-dk);
  padding-left:28px;position:relative;
}
.faq-q::before{
  content:"Q";position:absolute;left:0;top:0;
  background:var(--c-navy);color:#fff;
  width:22px;height:22px;border-radius:50%;
  text-align:center;font-size:.74rem;line-height:22px;
}
.faq-a{
  font-size:.85rem;color:#2e3f5c;line-height:1.78;
  margin-top:8px;padding-left:28px;position:relative;
}
.faq-a::before{
  content:"A";position:absolute;left:0;top:0;
  background:var(--c-gold);color:#1a1a2e;
  width:22px;height:22px;border-radius:50%;
  text-align:center;font-size:.74rem;line-height:22px;font-weight:700;
}

/* ---- Stats Strip ---- */
.stats-strip{
  display:flex;gap:8px;margin:16px 0 18px;flex-wrap:wrap;
}
.stat-item{
  flex:1;min-width:88px;
  background:var(--c-navy-dk);color:#fff;
  padding:10px 8px;border-radius:var(--radius);
  text-align:center;border-bottom:3px solid var(--c-gold);
}
.stat-item .num{
  font-size:1.2rem;font-weight:700;display:block;letter-spacing:.02em;
}
.stat-item .lbl{font-size:.7rem;color:#bcd;margin-top:3px;display:block}

/* ---- Step List ---- */
.step-list{counter-reset:step;padding:0;list-style:none;margin:12px 0 16px}
.step-list li{
  position:relative;padding:10px 12px 10px 48px;
  background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius);
  margin-bottom:8px;font-size:.85rem;line-height:1.7;color:#2e3f5c;
}
.step-list li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  background:var(--c-navy);color:#fff;
  width:28px;height:28px;border-radius:50%;
  text-align:center;line-height:28px;font-size:.85rem;font-weight:700;
}
.step-list li strong{color:var(--c-navy-dk)}

/* ---- In-section Amazon CTA (small block) ---- */
.sec-cta{
  margin:10px 0 4px;padding-top:4px;
}

/* ---- Category Grid (index) ---- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;margin-bottom:32px;
}
.cat-card{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:16px 10px;
  text-align:center;
  text-decoration:none;
  color:var(--c-navy-dk);
  font-size:.85rem;font-weight:700;
  line-height:1.4;
  box-shadow:0 1px 4px rgba(30,58,95,.07);
  transition:border-color .15s,box-shadow .15s;
}
.cat-card .icon{font-size:1.8rem;display:block;margin-bottom:6px}
.cat-card:hover{
  border-color:var(--c-gold);
  box-shadow:0 2px 8px rgba(30,58,95,.14);
}

/* ---- Info Box ---- */
.info-box{
  background:#eef2f8;
  border:1px solid #c2cfe0;
  border-radius:var(--radius);
  padding:12px 14px;
  font-size:.83rem;color:#2e3f5c;
  margin-bottom:16px;
  line-height:1.65;
}
.info-box strong{color:var(--c-navy)}

/* ---- Checklist ---- */
.checklist{list-style:none;font-size:.88rem}
.checklist li{
  padding:7px 0 7px 22px;
  border-bottom:1px solid var(--c-border);
  position:relative;color:#2e3f5c;
}
.checklist li::before{
  content:"✓";
  position:absolute;left:0;
  color:var(--c-gold);font-weight:700;
}

/* ---- Footer ---- */
footer{
  background:var(--c-navy-dk);
  margin:40px -12px 0;
  padding:24px 16px;
  font-size:.73rem;color:#a8bcd4;
  text-align:center;line-height:2;
}
footer a{color:#a8bcd4;text-decoration:none}
footer a:hover{color:#fff}

.affiliate-disc{
  background:#eef2f8;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:10px 12px;margin-bottom:12px;
  font-size:.72rem;color:var(--c-muted);
  line-height:1.65;
}

/* ---- Amazon Product Image ---- */
.amz-img{
  width:80px;
  min-width:80px;
  height:80px;
  object-fit:contain;
  border-radius:4px;
  background:#f8f9fa;
  border:1px solid var(--c-border);
  flex-shrink:0;
}

/* ---- Related ---- */
.related{margin-top:32px}
.related h2{
  font-size:.95rem;font-weight:700;
  margin-bottom:12px;color:var(--c-navy-dk);
}
.related-list{display:flex;flex-direction:column;gap:8px}
.related-list a{
  display:block;background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  padding:10px 14px;font-size:.85rem;
  color:var(--c-navy);text-decoration:none;
  box-shadow:0 1px 3px rgba(30,58,95,.06);
}
.related-list a:hover{
  border-color:var(--c-gold);
  color:var(--c-navy-dk);
}