/* フクジム ローカルデザインシステム v1 (記事ページ用)
   参考: デジタル庁デザインシステム(アクセシビリティ要件とデザイントークンの考え方)
         PayPay App Style Guide(シンプル/一貫性/ハッピーの哲学、カードとボタンの使い方)
   トークン: 余白は8px倍数、本文16px以上・行高1.8、角丸はカード20px/ボタン999px、
             テキストと背景のコントラスト比4.5:1以上を目安にする。 */

body.refresh{
  --ink:#1a1d21; --muted:#4b5563; --line:#c9d2dd;
  --brand:#0040a0; --brand-dark:#002f75;
  --accent:#d9002b; --accent-soft:#fff1f3;
  --paper:#ffffff; --bg:#f2f5f9; --focus:#f7c948;
  background:var(--bg); color:var(--ink);
}
body.refresh a{color:var(--brand); text-decoration:underline; text-underline-offset:3px}
body.refresh a:hover{color:var(--brand-dark)}
body.refresh :focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
  box-shadow:0 0 0 5px #111111; border-radius:4px;
}
body.refresh .wrap{max-width:840px}
body.refresh main{padding:0 0 56px}
body.refresh h1{font-size:32px; line-height:1.45; margin:0 0 16px; letter-spacing:.01em}
body.refresh h2{
  font-size:22px; line-height:1.5; margin:0 0 16px; padding:0; border:none;
  display:flex; align-items:center; gap:12px;
}
body.refresh h2 .num{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:var(--brand); color:#fff; font-size:17px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
body.refresh h3{font-size:18px; margin:24px 0 8px}
body.refresh p{margin:10px 0}
body.refresh .small{color:var(--muted)}

/* ヘッダー */
body.refresh header.site{border-bottom:none; box-shadow:0 1px 0 rgba(16,42,80,.08)}
body.refresh .logo{font-size:24px}
body.refresh .logo::before{
  content:""; display:inline-block; width:12px; height:12px; border-radius:4px;
  background:var(--accent); margin-right:8px; vertical-align:baseline;
}

/* ヒーロー */
.hero{
  background:linear-gradient(135deg,#ffffff 55%,#eaf1fb 100%);
  border-bottom:1px solid var(--line);
  padding:24px 0 40px; margin-bottom:40px;
}
.hero .crumb{margin-bottom:16px}
.chip{
  display:inline-block; font-size:13px; font-weight:700; line-height:1;
  padding:7px 12px; border-radius:999px; margin-bottom:16px;
  background:var(--accent-soft); color:var(--accent); border:1px solid #f3c2cc;
}
.hero .lead{font-size:18px; line-height:1.85; margin:0 0 8px}
.pr-note{
  display:inline-block; font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; margin-bottom:16px;
  background:#fff;
}

/* セクションカード */
.section{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 4px 16px rgba(16,42,80,.06);
  padding:32px; margin:0 0 24px;
}

/* 要点サマリー */
.summary{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
.summary .point{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 16px;
}
.summary .point .n{
  display:inline-flex; width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; font-size:15px;
  align-items:center; justify-content:center; margin-bottom:8px;
}
.summary .point strong{display:block; font-size:16px; margin-bottom:4px}
.summary .point span{font-size:14px; color:var(--muted); line-height:1.6; display:block}

/* チェックリスト */
.checklist{list-style:none; margin:16px 0; padding:0}
.checklist li{
  position:relative; padding:12px 16px 12px 48px; margin:10px 0;
  background:#f7fafc; border:1px solid var(--line); border-radius:12px; line-height:1.7;
}
.checklist li::before{
  content:"✓"; position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff;
  font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* 比較カード */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0}
.compare .svc{
  border:1px solid var(--line); border-radius:16px; padding:24px 20px; background:#fff;
}
.compare .svc h3{margin:0 0 8px; font-size:19px}
.compare .svc .for{
  display:inline-block; font-size:13px; font-weight:700; padding:5px 10px;
  border-radius:999px; background:#eaf1fb; color:var(--brand-dark); margin-bottom:10px;
}
.compare .svc p{font-size:15px; line-height:1.75}

/* PR・CTA */
.pr-card{
  border:2px solid var(--accent); border-radius:20px; background:#fff;
  padding:28px; margin:24px 0;
}
.pr-card .pr-label{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--accent); border-radius:6px; padding:4px 8px; margin-bottom:12px;
}
.pr-card h3{margin-top:20px}
.pr-card h3:first-of-type{margin-top:4px}
.cta{margin-top:12px}
.cta a{
  display:flex; align-items:center; justify-content:center; min-height:52px;
  padding:12px 20px; border-radius:999px; background:var(--accent); color:#fff;
  font-weight:700; font-size:16px; text-decoration:none; text-align:center;
  box-shadow:0 4px 12px rgba(217,0,43,.25);
}
.cta a:hover{background:#b00023; color:#fff}
.cta a::after{content:"›"; font-size:22px; margin-left:8px; line-height:1}

/* ステップ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0}
.steps .step{
  border:1px solid var(--line); border-radius:16px; padding:20px 16px; background:#fff; text-align:left;
}
.steps .step .n{
  display:inline-flex; width:28px; height:28px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:700; font-size:15px;
  align-items:center; justify-content:center; margin-bottom:8px;
}
.steps .step strong{display:block; margin-bottom:4px}
.steps .step span{font-size:14px; color:var(--muted); line-height:1.6; display:block}

/* 関連リンク */
.related{
  background:#eaf1fb; border:1px solid #bcd0ee; border-radius:20px; padding:28px; margin:24px 0;
}
.related h2{border:none; margin-bottom:8px}
.related ul{margin:8px 0 0; padding-left:20px}
.related li{margin:8px 0}

body.refresh footer.site{margin-top:8px}

@media (max-width:640px){
  body.refresh h1{font-size:26px}
  body.refresh h2{font-size:20px}
  .section{padding:24px 18px; border-radius:16px}
  .pr-card{padding:22px 18px}
  .summary,.compare,.steps{grid-template-columns:1fr}
  .hero{padding:16px 0 32px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}