/* =========================================================
   コンテンツページ 共通スタイル v2（引き算リデザイン）
   ・クラス名は v1 と同一。CSSを差し替えるだけで既存HTMLに適用できます。
   ・方針：塗りの箱は「結論」1つだけ。色はアクセント1色。見出しは細線で区切る。
   ・全記事共通・.rb- 接頭辞で名前空間を分離・モバイル最優先・高コントラスト
   ========================================================= */

.rb-article{
  --rb-ink:#23272b;        /* 本文（高コントラスト） */
  --rb-ink-soft:#5b626a;   /* 補足テキスト */
  --rb-accent:#1f6f54;     /* アクセント（この1色に集約） */
  --rb-accent-d:#14543f;
  --rb-line:#e6e9e7;       /* ヘアライン */
  --rb-tint:#f4f8f6;       /* ごく薄いアクセント地（結論ボックス用） */

  max-width:700px;
  margin:0 auto;
  padding:16px 18px 52px;
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--rb-ink);
  line-height:1.75;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.rb-article *{box-sizing:border-box;}
.rb-article p{margin:.85em 0;}

/* 見出し：塗りをやめ、余白と細線で区切る */
.rb-title{font-size:1.55rem;line-height:1.45;margin:.1em 0 .7em;font-weight:700;letter-spacing:.01em;}
.rb-lead{font-size:1.04rem;color:var(--rb-ink);}
/* 見出し：アクセント色＋左のバーで「見出し」だと一目でわかるように */
.rb-h2{
  font-size:1.24rem;line-height:1.5;font-weight:700;
  color:var(--rb-accent-d) !important;
  margin:2.4em 0 .8em;padding:3px 0 3px 13px;
  border-left:6px solid var(--rb-accent);
}
.rb-h3{
  font-size:1.06rem;font-weight:700;color:var(--rb-accent-d) !important;margin:1.7em 0 .5em;
  padding-bottom:.3em;border-bottom:1px solid var(--rb-line);
}

/* 結論ボックス：文字を大きく・濃く、キーワードはアクセント色で強調 */
.rb-conclusion{
  background:var(--rb-tint);
  border:1px solid #cbddd3;border-left:6px solid var(--rb-accent);border-radius:10px;
  padding:16px 20px;margin:18px 0 26px;
}
.rb-conclusion .rb-tag{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.04em;
  color:#ffffff !important;background:var(--rb-accent) !important;
  padding:4px 13px;border-radius:999px;margin-bottom:11px;
}
.rb-conclusion p{margin:.5em 0;font-size:1.04rem;line-height:1.85;color:var(--rb-ink) !important;}
.rb-conclusion strong{color:var(--rb-accent-d) !important;}

/* 目次：番号を振り、番号はアクセント色で目立たせる */
.rb-toc{border-top:1px solid var(--rb-line);border-bottom:1px solid var(--rb-line);padding:14px 2px;margin:24px 0;}
.rb-toc-title{font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--rb-ink-soft);margin-bottom:8px;}
/* 番号はCSSカウンターで自前描画（サイト側のlist-styleリセットに影響されない） */
.rb-toc ol{margin:0;padding-left:0;list-style:none !important;counter-reset:rbtoc;}
.rb-toc li{position:relative;margin:.45em 0;padding-left:1.9em;list-style:none !important;counter-increment:rbtoc;}
.rb-toc li::before{content:counter(rbtoc) ".";position:absolute;left:0;top:0;color:var(--rb-accent);font-weight:700;}
.rb-toc a{color:var(--rb-accent-d);text-decoration:none;}
.rb-toc a:hover{text-decoration:underline;}

/* 手順：各行の塗りをやめ、番号のみアクセント。行間の余白で区切る */
.rb-steps{padding-left:0;list-style:none;counter-reset:rb-s;margin:1.1em 0;}
.rb-steps li{
  counter-increment:rb-s;position:relative;
  padding:6px 0 12px 40px;margin:0;
  border-bottom:1px solid var(--rb-line);
}
.rb-steps li:last-child{border-bottom:none;}
.rb-steps li::before{
  content:counter(rb-s);position:absolute;left:4px;top:6px;
  width:24px;height:24px;background:var(--rb-accent);color:#fff;
  border-radius:50%;text-align:center;line-height:24px;font-size:.82rem;font-weight:700;
}

/* コツ：黄色い箱をやめ、左罫線だけの控えめなメモに */
.rb-tip{
  border-left:3px solid var(--rb-accent);
  padding:2px 0 2px 14px;margin:1.3em 0;
  color:var(--rb-ink-soft);font-size:.97rem;
}
.rb-tip strong{color:var(--rb-accent-d);}

/* テーブル：ヘッダーの原色塗りをやめ、淡いアクセント地に */
.rb-table-wrap{overflow-x:auto;margin:1.2em 0;}
.rb-table{border-collapse:collapse;width:100%;min-width:420px;font-size:.95rem;}
.rb-table th,.rb-table td{border-bottom:1px solid var(--rb-line);padding:11px 12px;text-align:left;vertical-align:top;}
.rb-table th{background:var(--rb-tint);color:var(--rb-accent-d);font-weight:700;border-bottom:2px solid #cfe0d7;}
.rb-table td:first-child{font-weight:700;color:var(--rb-ink);}

/* 導線 */
.rb-outro{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--rb-line);}

/* 関連記事：箱をやめ、罫線区切りのリストに */
.rb-related{margin:8px 0 28px;}
.rb-related-title{font-weight:700;font-size:.82rem;letter-spacing:.06em;color:var(--rb-ink-soft);margin-bottom:6px;}
.rb-related a{
  display:block;color:var(--rb-accent-d);text-decoration:none;
  padding:11px 0;border-bottom:1px solid var(--rb-line);
}
.rb-related a:first-of-type{border-top:1px solid var(--rb-line);}
.rb-related a:hover{text-decoration:underline;}

/* モール導線：4色のフルカラーをやめ、トーンを統一。主張を抑えて押しやすく */
.rb-buy-lead{text-align:center;font-size:1rem;color:var(--rb-ink-soft);margin:6px 0 16px;}
.rb-malls{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.rb-mall{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:15px 10px;border-radius:10px;text-decoration:none;
  font-weight:700;font-size:1rem;min-height:54px;
  color:var(--rb-ink);background:#fff;border:1px solid #d5dad7;
  transition:border-color .15s,background .15s;
}
.rb-mall:hover{border-color:var(--rb-accent);background:var(--rb-tint);}
/* ブランド識別は控えめに（左の細いライン1本のみ） */
.rb-amazon{border-left:4px solid #ff9900;}
.rb-rakuten{border-left:4px solid #bf0000;}
.rb-yahoo{border-left:4px solid #ff0033;}
.rb-qoo10{border-left:4px solid #ff5a00;}

/* 図版（写真・インラインSVG共通） */
.rb-figure{margin:1.6em 0;}
.rb-figure svg,.rb-figure img{display:block;width:100%;height:auto;}
.rb-hero svg,.rb-hero img{border-radius:12px;}
/* アイキャッチ写真：高さを固定してバナー状に中央を切り出す（元画像が大きくても崩れない） */
.rb-hero img{height:340px;object-fit:cover;object-position:center;}
.rb-figcaption{font-size:.82rem;color:var(--rb-ink-soft);margin-top:8px;text-align:center;line-height:1.6;}

/* 箇条書きリスト（メリット等） */
.rb-list{margin:1em 0;padding-left:0;list-style:none !important;}
.rb-list li{position:relative;padding:5px 0 5px 1.4em;list-style:none !important;}
.rb-list li::before{content:"";position:absolute;left:1px;top:.95em;width:8px;height:8px;border-radius:50%;background:var(--rb-accent);}

/* よくある質問（構造化データFAQPageと一致させる可視セクション） */
.rb-faq{margin:.6em 0 0;}
.rb-faq-item{border-top:1px solid var(--rb-line);padding:15px 0;}
.rb-faq-item:last-child{border-bottom:1px solid var(--rb-line);}
.rb-faq-q{font-weight:700;color:var(--rb-ink) !important;margin:0 0 8px;padding-left:1.9em;position:relative;line-height:1.6;}
.rb-faq-a{margin:0;padding-left:1.9em;position:relative;color:var(--rb-ink) !important;}
.rb-faq-q::before,.rb-faq-a::before{position:absolute;left:0;top:1px;width:1.4em;height:1.4em;line-height:1.4em;text-align:center;border-radius:6px;font-size:.85em;font-weight:700;}
.rb-faq-q::before{content:"Q";background:var(--rb-accent);color:#ffffff !important;}
.rb-faq-a::before{content:"A";background:#e6efe9;color:var(--rb-accent-d) !important;}

/* 出典 */
.rb-refs{margin-top:2.4em;font-size:.82rem;color:var(--rb-ink-soft);border-top:1px solid var(--rb-line);padding-top:1em;}
.rb-refs ol{padding-left:1.3em;margin:.4em 0;}
.rb-refs a{color:var(--rb-ink-soft);}

/* モバイル最優先 */
@media(max-width:480px){
  .rb-article{font-size:16px;padding:14px 14px 40px;}
  .rb-title{font-size:1.4rem;}
  .rb-malls{grid-template-columns:1fr;}
  .rb-hero img{height:210px;}
}