/* =========================================================
   GadgetLine — Healthline風デザイン共通スタイル
   - 白基調 / グリーン系アクセント / カードグリッド
   - モバイルファースト
   ========================================================= */

:root{
  /* Healthline風カラーパレット */
  --bg:        #ffffff;
  --surface:   #f4f6f8;   /* セクション背景の薄いグレー */
  --surface-2: #eaf6f1;   /* 薄いグリーン背景 */
  --text:      #1a2128;   /* 濃紺グレーの本文 */
  --text-sub:  #5a6571;
  --brand:     #d63426;   /* Healthlineの差し色（レッド系）→ロゴ・強調 */
  --green:     #00857a;   /* メイン緑（トラスト・リンク・CTA枠） */
  --green-dk:  #006b62;
  --cta:       #ff6a00;   /* 購入CTA（Amazon連想オレンジ・件数最大化） */
  --cta-dk:    #e65f00;
  --rakuten:   #bf0000;   /* 楽天ボタン */
  --line:      #e3e7eb;
  --ok:        #00857a;
  --star:      #f5a623;
  --radius:    14px;
  --shadow:    0 1px 3px rgba(20,30,40,.08), 0 6px 18px rgba(20,30,40,.05);
  --maxw:      1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", Meiryo, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:var(--bg); line-height:1.7; font-size:16px;
  overflow-x:hidden; /* 横スクロール禁止 */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--green-dk); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:16px;
  height:60px; max-width:var(--maxw); margin:0 auto; padding:0 16px;
}
.logo{ font-size:22px; font-weight:800; letter-spacing:-.5px; color:var(--text); white-space:nowrap; }
.logo span{ color:var(--brand); }
.nav{ display:none; gap:22px; margin-left:8px; }
.nav a{ color:var(--text); font-weight:600; font-size:15px; }
.nav a:hover{ color:var(--green); text-decoration:none; }
.header-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.btn-sub{
  background:var(--green); color:#fff; font-weight:700; font-size:14px;
  padding:9px 16px; border-radius:999px; border:none; cursor:pointer;
}
.btn-sub:hover{ background:var(--green-dk); text-decoration:none; color:#fff; }
.hamburger{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--text); }

/* ---------- トラストバー（Healthlineの実績表示） ---------- */
.trust-bar{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.trust-bar .container{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px;
  padding:10px 16px; font-size:13px; color:var(--green-dk); font-weight:600;
}
.trust-bar b{ color:var(--text); }

/* ---------- ヒーロー ---------- */
.hero{ padding:28px 0 8px; }
.hero-card{
  display:grid; grid-template-columns:1fr; gap:0;
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow);
}
.hero-img{ aspect-ratio:16/10; background:#cfd8dd center/cover; }
.hero-body{ padding:20px; }
.eyebrow{ color:var(--green); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.hero-body h1{ font-size:26px; line-height:1.35; margin:8px 0 10px; font-weight:800; }
.hero-body p{ color:var(--text-sub); margin:0; }

/* ---------- セクション見出し ---------- */
.section{ padding:30px 0; }
.section.alt{ background:var(--surface); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.section-head h2{ font-size:22px; font-weight:800; margin:0; }
.section-head a{ font-size:14px; font-weight:700; }

/* ---------- カードグリッド ---------- */
.grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,30,40,.12); }
.card-thumb{ aspect-ratio:4/3; background:#dde3e7 center/cover; position:relative; overflow:hidden; }
.card-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; padding:8px; }
.hero-img{ position:relative; overflow:hidden; }
.hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; padding:14px; }
.card-body{ padding:14px; }
.cat-tag{ color:var(--green); font-weight:800; font-size:12px; letter-spacing:.04em; }
.card-body h3{ font-size:16px; line-height:1.45; margin:6px 0 0; font-weight:700; color:var(--text); }
.card-body p{ font-size:13px; color:var(--text-sub); margin:8px 0 0; }

/* ---------- カテゴリチップ ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-weight:700; font-size:14px; color:var(--text);
}
.chip:hover{ background:var(--surface-2); color:var(--green-dk); text-decoration:none; border-color:var(--green); }

/* ---------- トラスト訴求（なぜ信頼できるか） ---------- */
.why{ display:grid; grid-template-columns:1fr; gap:16px; }
.why .item{ display:flex; gap:12px; align-items:flex-start; }
.why .ico{
  flex:0 0 40px; width:40px; height:40px; border-radius:10px; background:var(--surface-2);
  display:grid; place-items:center; font-size:20px;
}
.why h4{ margin:0 0 2px; font-size:15px; }
.why p{ margin:0; font-size:13px; color:var(--text-sub); }

/* ---------- 記事本文 ---------- */
.article{ padding:24px 0 40px; }
.breadcrumb{ font-size:12px; color:var(--text-sub); margin-bottom:12px; }
.article h1{ font-size:27px; line-height:1.35; font-weight:800; margin:6px 0 12px; }
.byline{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  font-size:13px; color:var(--text-sub); border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px; }
.byline .ev{ background:var(--surface-2); color:var(--green-dk); font-weight:700; padding:3px 10px; border-radius:999px; }
.article p{ margin:14px 0; }
.article h2{ font-size:21px; font-weight:800; margin:30px 0 12px; padding-top:6px; }
.article h3{ font-size:18px; font-weight:700; margin:22px 0 8px; }

/* 結論ボックス */
.verdict{
  background:var(--surface-2); border:1px solid #bfe3dc; border-left:5px solid var(--green);
  border-radius:12px; padding:16px 18px; margin:18px 0;
}
.verdict h4{ margin:0 0 6px; color:var(--green-dk); font-size:15px; }

/* 商品ブロック */
.product{
  border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:22px 0;
  box-shadow:var(--shadow); background:#fff;
}
.product .rank{ display:inline-block; background:var(--green); color:#fff; font-weight:800;
  font-size:13px; padding:4px 12px; border-radius:999px; margin-bottom:10px; }
.product h3{ margin:0 0 8px; font-size:19px; }
.product-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.product-img{ aspect-ratio:4/3; background:#dde3e7 center/cover; border-radius:10px; }
.stars{ color:var(--star); font-size:15px; letter-spacing:1px; }
.specs{ width:100%; border-collapse:collapse; margin:10px 0; font-size:14px; }
.specs th,.specs td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.specs th{ color:var(--text-sub); font-weight:600; width:42%; }
.pm{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.pm .col h5{ margin:0 0 6px; font-size:13px; }
.pm .pros h5{ color:var(--green-dk); }
.pm .cons h5{ color:var(--brand); }
.pm ul{ margin:0; padding-left:18px; font-size:13px; color:var(--text-sub); }
.pm li{ margin:3px 0; }

/* CTA（Amazon＋楽天 2ボタン） */
.cta-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 4px; }
.btn-buy{
  display:block; text-align:center; font-weight:800; font-size:15px; color:#fff;
  padding:14px 12px; border-radius:12px; min-height:48px; text-decoration:none;
}
.btn-amazon{ background:var(--cta); }
.btn-amazon:hover{ background:var(--cta-dk); color:#fff; text-decoration:none; }
.btn-rakuten{ background:var(--rakuten); }
.btn-rakuten:hover{ background:#990000; color:#fff; text-decoration:none; }
.price-note{ font-size:11px; color:var(--text-sub); text-align:center; margin:4px 0 0; }

/* 比較表 */
.compare-wrap{ margin:18px 0; }
.compare{ width:100%; border-collapse:collapse; font-size:13px; }
.compare th,.compare td{ border:1px solid var(--line); padding:10px 8px; text-align:center; vertical-align:top; }
.compare thead th{ background:var(--surface-2); color:var(--green-dk); font-weight:800; }
.compare .name{ font-weight:700; }
.best-badge{ display:inline-block; background:var(--ok); color:#fff; font-size:10px;
  font-weight:800; padding:2px 7px; border-radius:999px; }

/* FAQ */
.faq details{ border:1px solid var(--line); border-radius:10px; padding:4px 14px; margin:10px 0; background:#fff; }
.faq summary{ font-weight:700; cursor:pointer; padding:10px 0; }
.faq details p{ margin:0 0 12px; color:var(--text-sub); font-size:14px; }

/* 関連記事 */
.related .grid{ margin-top:6px; }

/* ---------- フッター ---------- */
.site-footer{ background:var(--text); color:#c8d0d6; padding:28px 0; font-size:13px; margin-top:10px; }
.footer-cols{ display:grid; grid-template-columns:1fr; gap:20px; }
.site-footer h5{ color:#fff; font-size:14px; margin:0 0 8px; }
.site-footer a{ color:#c8d0d6; display:block; padding:3px 0; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid #303a44; margin-top:20px; padding-top:16px; color:#8c99a4; font-size:12px; }
.disclosure{ background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; font-size:12px; color:var(--text-sub); margin:18px 0; }

/* ---------- API差し込み用 商品画像プレースホルダー ----------
   使い方：<div class="pimg" data-asin="XXXX" data-rakuten="店舗:商品コード"></div>
   PA-API / 楽天APIでキー発行後、assets/product-image.js が
   data-asin / data-rakuten を読み取り <img> を差し込む。
   それまではプレースホルダー（商品名＋取得待ち表示）を表示。 */
.pimg{
  position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden;
  background:repeating-linear-gradient(45deg,#eef1f3,#eef1f3 12px,#e7ebee 12px,#e7ebee 24px);
  display:grid; place-items:center; text-align:center; color:var(--text-sub);
}
.pimg::after{
  content:attr(data-label); font-size:12px; font-weight:700; padding:8px 12px;
  background:rgba(255,255,255,.85); border-radius:8px; max-width:85%;
}
.pimg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.pimg.product-img{ aspect-ratio:4/3; }

/* ---------- レスポンシブ（タブレット〜PC） ---------- */
@media(min-width:768px){
  body{ font-size:17px; }
  .nav{ display:flex; }
  .hamburger{ display:none; }
  .hero-card{ grid-template-columns:1.1fr 1fr; align-items:center; }
  .hero-img{ aspect-ratio:auto; height:100%; min-height:320px; }
  .hero-body{ padding:34px; }
  .hero-body h1{ font-size:34px; }
  .grid{ grid-template-columns:repeat(3,1fr); gap:22px; }
  .why{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .product-grid{ grid-template-columns:240px 1fr; }
  .section-head h2{ font-size:26px; }
  .footer-cols{ grid-template-columns:2fr 1fr 1fr 1fr; }
}
@media(min-width:1024px){
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
}