/* article.css — ページ種別固有スタイル。base.css と併用 */
/* =========================================================
   本文ラッパ・パンくず
========================================================= */
.page{max-width:760px;margin:0 auto;padding:24px 20px 72px}
.breadcrumb{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--sub);list-style:none;margin-bottom:18px}
.breadcrumb a{color:var(--sub);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--line)}
.article-head{margin-bottom:22px}
.article-head .cat{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--teal);background:var(--teal-soft);border-radius:99px;padding:3px 12px;
}
.article-head h1{
  font-family:var(--font-display);font-weight:900;font-size:26px;line-height:1.5;
  color:var(--navy);margin:12px 0 8px;
}
.article-head .meta{font-size:12px;color:var(--sub)}
.lead{font-size:15px;color:var(--ink);margin:0 0 4px}
/* =========================================================
   タグ・バッジ
========================================================= */
.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--teal);background:var(--teal-soft);border-radius:99px;padding:3px 12px;
}
.tag.navy{color:#fff;background:var(--navy)}
.badge-check{
  display:inline-block;font-size:11px;font-weight:700;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px 10px;
}
.badge-check::before{content:"\2713 ";color:var(--teal)}
/* =========================================================
   記事本文
========================================================= */
.article h2{
  font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--navy);
  line-height:1.5;padding:10px 14px;margin:36px 0 16px;
  background:var(--card);border-left:5px solid var(--teal);border-radius:0 10px 10px 0;
}
.article h3{
  font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--navy);
  line-height:1.5;padding-bottom:6px;margin:28px 0 12px;
  border-bottom:2px dashed var(--line);
}
.article p{font-size:14.5px;margin-bottom:14px}
.article ul{margin:0 0 16px;padding-left:1.2em}
.article li{font-size:14.5px;margin-bottom:8px}
.link-inline{
  color:var(--teal);font-weight:500;text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.link-inline:hover{color:var(--orange)}
.box-point{
  background:var(--teal-soft);border-radius:12px;padding:16px 18px;margin:18px 0;
  font-size:13.5px;position:relative;
}
.box-point::before{
  content:"POINT";display:inline-block;font-family:var(--font-display);font-weight:900;
  font-size:11px;letter-spacing:.15em;color:#fff;background:var(--teal);
  border-radius:99px;padding:1px 12px;margin-bottom:6px;
}
.box-point p{margin:4px 0 0;font-size:13.5px}
.box-warn{
  background:var(--yellow-soft);border-radius:12px;padding:16px 18px;margin:18px 0;
}
.box-warn::before{
  content:"注意";display:inline-block;font-family:var(--font-display);font-weight:900;
  font-size:11px;letter-spacing:.15em;color:#fff;background:var(--yellow);
  border-radius:99px;padding:1px 12px;margin-bottom:6px;
}
.box-warn p{margin:4px 0 0;font-size:13.5px}
/* CTA */
.cta-btn{
  display:inline-block;text-align:center;background:var(--orange);color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  padding:14px 32px;border:none;border-radius:99px;
  box-shadow:0 4px 0 var(--orange-dark);
  transition:transform .1s ease, box-shadow .1s ease;
}
.cta-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--orange-dark)}
.cta-btn.block{display:block;width:100%}
.cta-note{font-size:11.5px;color:var(--sub);text-align:center;margin-top:8px}
/* CTAをまとめる誘導ブロック */
.cta-block{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 20px;margin:20px 0;text-align:center;
}
.cta-block .ttl{
  font-family:var(--font-display);font-weight:900;font-size:16.5px;color:var(--navy);margin-bottom:6px;
}
.cta-block .desc{font-size:13px;color:var(--sub);margin-bottom:14px}
/* =========================================================
   FAQ
========================================================= */
.faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;
}
.faq-item .q{
  font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--navy);
  display:flex;gap:8px;
}
.faq-item .q::before{content:"Q.";color:var(--teal)}
.faq-item .a{font-size:13.5px;color:var(--ink);margin-top:8px;padding-left:1.5em}
/* =========================================================
   関連記事カード
========================================================= */
.related h2{
  font-family:var(--font-display);font-weight:900;font-size:18px;color:var(--navy);
  margin:44px 0 16px;
}
.a-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.a-grid{grid-template-columns:1fr}}
.a-card{
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.a-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(22,50,79,.14)}
.a-card .thumb{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--teal-soft),#D8E9F2);font-size:40px;
}
.a-card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.a-card .cat{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--teal);background:var(--teal-soft);border-radius:99px;padding:2px 10px;
}
.a-card .ttl{
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
  color:var(--navy);line-height:1.55;
}
.a-card:hover .ttl{color:var(--teal)}
.a-card .excerpt{
  font-size:12.5px;color:var(--sub);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.a-card .meta{font-size:11px;color:var(--sub);margin-top:auto;padding-top:4px}
/* ---------- この記事専用:例文ボックス ---------- */
.example-box{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--orange);
  border-radius:0 12px 12px 0;padding:14px 16px;margin:12px 0 20px;
}
.example-box .who{
  font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.05em;margin-bottom:6px;
}
.example-box p{font-size:13.5px;margin:0}
.example-box p+p{margin-top:8px}