/* ============================================================
   モバイル可読性改善 ― 40代の読者向け文字サイズ最適化
   サイト全体で読み込まれ、各ページのインラインstyleを上書きします
   ============================================================ */

@media (max-width:768px){

  /* --- 本文(一番読まれる部分・最重要) --- */
  article p,
  article ul li,
  article ol li{
    font-size:16px;
    line-height:2;
  }

  /* --- 段落の間隔を広げ、"段落の切れ目"を明確に(2026-06-10 追加) --- */
  article p{
    margin-bottom:20px;
  }
  article ul li,
  article ol li{
    margin-bottom:10px;
  }

  /* --- 会話・引用ブロック --- */
  article p.wife-voice,
  article p.husband-voice,
  article p.humor,
  article p.quote-strong{
    font-size:15.5px;
    line-height:1.95;
  }

  /* --- リード文(記事冒頭の導入) --- */
  .lead,
  .lead p{
    font-size:15.5px;
    line-height:1.95;
  }

  /* --- 目次 --- */
  .toc-title{
    font-size:16px;
  }
  .toc ol li,
  .toc ol li a{
    font-size:15.5px;
  }

  /* --- FAQ --- */
  .faq-q{
    font-size:16.5px;
  }
  .faq-a{
    font-size:15.5px;
    line-height:2;
  }
  .faq-a .wife-note{
    font-size:14.5px;
  }

  /* --- 見出し(階層強調) --- */
  article h2{
    font-size:19px;
  }
  article h3{
    font-size:16.5px;
  }

  /* --- ボタン類 --- */
  .buy-btn,
  .cta-btn{
    font-size:14.5px;
  }

  /* --- 表(SPF表など) --- */
  table th,
  table td,
  .spf-table th,
  .spf-table td{
    font-size:14px;
    line-height:1.7;
  }

  /* --- 商品カード本文 --- */
  .product-desc{
    font-size:15px;
    line-height:1.9;
  }
  .product-specs{
    font-size:13.5px;
  }

  /* --- 結論サマリーボックス --- */
  .summary-box ul li{
    font-size:15px;
  }

  /* --- key-point(数式風ボックス)テキスト --- */
  .key-point .kp-text{
    font-size:16px;
  }

  /* --- best-choice(妻ベストチョイス)本文 --- */
  .best-choice .bc-reason{
    font-size:15px;
    line-height:1.95;
  }

  /* --- 記事メタ情報 --- */
  .article-meta{
    font-size:13.5px;
  }
}

/* ============================================================
   PC(デスクトップ)可読性改善 ― 40代の読者向け文字サイズ最適化
   2026-05-29 追加 / 2026-05-30 更新。スマホ(max-width:768px)は上記のまま、
   769px以上のみ調整。本文18px・行間と段落間隔を広げ「ゆったり高級感」に
   ============================================================ */
@media (min-width:769px){

  /* --- 本文(一番読まれる部分・最重要) --- */
  article p,
  article ul li,
  article ol li{
    font-size:18px;
    line-height:2.05;
  }

  /* --- 段落の間隔を広げて"ゆったり"した読み心地に --- */
  article p{
    margin-bottom:22px;
  }
  article ul li,
  article ol li{
    margin-bottom:10px;
  }

  /* --- 会話・引用ブロック(quote-strongは元から大きいので対象外) --- */
  article p.wife-voice,
  article p.husband-voice,
  article p.humor{
    font-size:16px;
  }

  /* --- 会話形式(dialog) --- */
  .dialog .line{
    font-size:16px;
  }

  /* --- リード文(記事冒頭の導入) --- */
  .lead,
  .lead p{
    font-size:16px;
  }

  /* --- FAQの答え --- */
  .faq-a{
    font-size:16px;
  }
}

/* ============================================================
   パンくずリスト ― 記事ページの階層ナビ(2026-06-10 カテゴリ再編 手順3で追加)
   <main>直下に置き「ホーム › カテゴリ」を表示。記事名はすぐ下のh1で示す
   ============================================================ */
.article-breadcrumb{
  font-size:12.5px;
  color:#5a5a5a;
  letter-spacing:0.04em;
  line-height:1.6;
  margin-bottom:20px;
}
.article-breadcrumb a{color:#5a5a5a;text-decoration:none;}
.article-breadcrumb a:hover{color:#b8943f;text-decoration:underline;}
.article-breadcrumb .sep{margin:0 7px;color:#cfcabb;}
.article-breadcrumb .current{color:#1a2c4e;}
@media (max-width:768px){
  .article-breadcrumb{font-size:11.5px;margin-bottom:14px;}
}

/* ============================================================
   記事末尾「カテゴリから探す」― 6カテゴリへの回遊導線(2026-06-10 カテゴリ再編 手順4)
   既存のカテゴリページ .other-cats と同じチップ型デザイン
   ============================================================ */
.cat-explore{margin:48px auto 0;max-width:820px;text-align:center;}
.cat-explore-title{font-family:'Noto Serif JP',serif;font-size:15px;color:#1a2c4e;margin-bottom:16px;letter-spacing:0.05em;}
.cat-explore-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;max-width:600px;margin:0 auto;}
.cat-explore-links a{font-size:13px;color:#5a5a5a;text-decoration:none;border:1px solid #e8e6df;border-radius:20px;padding:8px 18px;transition:all .2s;justify-self:center;}
.cat-explore-links a:hover{color:#b8943f;border-color:#c9a559;}
@media (max-width:768px){
  .cat-explore{margin-top:40px;}
  .cat-explore-links{grid-template-columns:repeat(2,1fr);max-width:360px;}
  .cat-explore-links a{font-size:12.5px;padding:7px 15px;}
}