/* ===== ノンハラ コラム 共通スタイル =====
   全国公益法人協会 Design System v1.0 準拠（LPと同一トークン） */
:root{
  --navy-900:#0E2147; --navy-800:#15305F; --navy-700:#1B3F77; --navy-600:#234E91; --navy-500:#2B62AE;
  --blue-500:#2F8BD2; --blue-400:#4FA6E2; --blue-300:#7BC1ED; --blue-200:#BFE0F4; --blue-100:#E6F3FB;
  --ink-900:#161E2D; --ink-700:#3F4759; --ink-600:#5A6376; --ink-500:#7B8497;
  --ink-200:#E2E5EC; --ink-100:#F1F3F7; --ink-50:#F8F9FB; --white:#FFFFFF;
  --navy:var(--navy-700); --blue:var(--blue-500);
  --bg:var(--ink-50); --text:var(--ink-700); --text-light:var(--ink-500); --line:var(--ink-200);
  --ff-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --ff-en:"Inter","Noto Sans JP",system-ui,sans-serif;
  --sh-1:0 1px 2px rgba(14,33,71,.06),0 1px 1px rgba(14,33,71,.04);
  --sh-2:0 4px 12px rgba(14,33,71,.08),0 2px 4px rgba(14,33,71,.04);
  --sh-3:0 12px 32px rgba(14,33,71,.12),0 4px 8px rgba(14,33,71,.06);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--ff-jp);color:var(--text);background:var(--bg);line-height:1.9;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;}
img{max-width:100%;height:auto;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}

/* ---- ボタン（LPと共通） ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;
  font-weight:700;text-decoration:none;cursor:pointer;transition:.2s;border:none;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-sm{padding:11px 20px;font-size:13px;}
.btn-lg{padding:18px 36px;font-size:16px;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(47,139,210,.3);}
.btn-outline{background:#fff;color:var(--blue);border:1.5px solid var(--blue);}

/* ---- ヘッダー ---- */
.col-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.col-head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;}
.col-logo{text-decoration:none;color:var(--navy);font-weight:900;font-size:20px;line-height:1.2;
  display:flex;flex-direction:column;gap:2px;}
.col-logo span{font-size:11px;font-weight:500;color:var(--text-light);letter-spacing:.02em;}

/* ---- パンくず ---- */
.crumbs{padding:16px 0 0;font-size:12.5px;color:var(--text-light);}
.crumbs a{color:var(--text-light);text-decoration:none;}
.crumbs a:hover{color:var(--blue);text-decoration:underline;}
.crumbs span{margin:0 8px;}
.crumbs .cur{margin:0;color:var(--ink-600);
  display:inline-block;max-width:32em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}

/* ---- 記事本体 ---- */
.art{max-width:760px;margin:0 auto;padding:40px 24px 80px;}
.chip{display:inline-block;background:var(--blue-100);color:var(--navy-600);
  font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;}
.art-head{padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:40px;}
.art-head h1{font-size:32px;font-weight:700;line-height:1.55;color:var(--navy);margin:18px 0 14px;
  text-wrap:balance;letter-spacing:.01em;}
.art-meta{font-family:var(--ff-en);font-size:13px;color:var(--text-light);font-feature-settings:"tnum" 1;}

.art-hero{margin:0 0 40px;}
.art-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;
  box-shadow:var(--sh-2);display:block;}

.toc{margin:0 0 44px;padding:24px 28px 26px;background:var(--ink-50);
  border:1px solid var(--line);border-radius:12px;}
.toc-ttl{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.06em;margin-bottom:12px;}
.toc ol{margin:0;padding-left:1.5em;}
.toc li{font-size:14.5px;line-height:1.9;}
.toc li + li{margin-top:5px;}
.toc a{color:var(--ink-700);text-decoration:none;}
.toc a:hover{color:var(--blue);text-decoration:underline;}

.art-body h2{scroll-margin-top:88px;}
.art-body{font-size:16.5px;line-height:2.05;}
.art-body > * + *{margin-top:1.6em;}
.art-body h2{font-size:24px;font-weight:700;color:var(--navy);line-height:1.6;
  margin-top:2.6em;padding-left:16px;border-left:5px solid var(--blue);}
.art-body h3{font-size:19px;font-weight:700;color:var(--navy-600);line-height:1.6;margin-top:2.2em;}
.art-body p{text-align:justify;}
.art-body strong,.art-body b{font-weight:700;color:var(--ink-900);}
.art-body a{color:var(--blue);text-underline-offset:3px;}
.art-body ul,.art-body ol{padding-left:1.4em;}
.art-body li + li{margin-top:.5em;}
.art-body blockquote{background:#fff;border-left:4px solid var(--blue-200);border-radius:0 10px 10px 0;
  padding:20px 24px;color:var(--ink-600);font-size:15.5px;box-shadow:var(--sh-1);}
.art-body table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;
  border-radius:10px;overflow:hidden;box-shadow:var(--sh-1);}
.art-body th{background:var(--navy-700);color:#fff;font-weight:700;text-align:left;padding:12px 16px;}
.art-body td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top;}
.art-body figure{margin:2.4em 0;}
.art-body figure.chart{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px 20px 18px;box-shadow:var(--sh-1);}
.art-body figure.chart svg,
.art-body figure.chart img{display:block;width:100%;height:auto;}
.art-body figure.chart figcaption{margin-top:0;padding-top:12px;border-top:1px solid var(--line);
  text-align:left;font-size:12px;line-height:1.8;}
.art-body figcaption{font-size:13px;color:var(--text-light);margin-top:8px;text-align:center;}
/* 補足ボックス（裁判例・豆知識など） */
.art-body .note{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 26px;
  box-shadow:var(--sh-1);font-size:15.5px;}
.art-body .note > :first-child{margin-top:0;}
.art-body .note-title{font-weight:700;color:var(--navy);font-size:15px;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;}
.art-body .note-title::before{content:"";width:4px;height:16px;background:var(--blue);border-radius:2px;}
/* 点検リスト（図版と同じ体裁：中央のタイトル＋区切り線＋中央の結論） */
.art-body .note-check{padding:26px 24px 20px;}
.art-body .note-check .note-title{display:block;text-align:center;font-size:19px;color:var(--navy);
  margin-bottom:20px;}
.art-body .note-check .note-title::before{content:none;}
.art-body .note-check .check-list{list-style:none;margin:0;padding:0;counter-reset:chk;}
.art-body .note-check .check-list li{counter-increment:chk;display:flex;align-items:center;
  gap:18px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;}
.art-body .note-check .check-list li:last-child{margin-bottom:0;}
.art-body .note-check .check-q{flex:1;margin:0;font-size:14.5px;line-height:1.7;}
.art-body .note-check .check-q::before{content:counter(chk) ". ";font-weight:700;color:var(--navy);}
.art-body .note-check .check-opts{flex:none;display:flex;gap:8px;}
.art-body .note-check .check-opts label{display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--navy);white-space:nowrap;
  transition:background .15s,border-color .15s;}
.art-body .note-check .check-opts label:hover{background:#F7FAFD;border-color:var(--blue);}
.art-body .note-check .check-opts input{margin:0;accent-color:var(--blue);cursor:pointer;}
.art-body .note-check .note-foot{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);
  text-align:center;font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.75;}

/* ---- 記事末CTA ---- */
/* ---- 記事末CTA（淡い青のパネル。前後の白カードと切り替える） ---- */
.art-cta{margin-top:72px;border-radius:18px;padding:40px;text-align:left;
  background:var(--blue-100);border:1px solid var(--blue-200);box-shadow:var(--sh-1);}
.art-cta-eyebrow{display:inline-block;margin:0 0 14px;padding:7px 16px;border-radius:999px;
  background:#fff;color:var(--blue);font-size:12.5px;font-weight:700;letter-spacing:.04em;}
.art-cta h2{font-size:22px;color:var(--navy);font-weight:700;line-height:1.6;}
.art-cta h2.art-cta-brand{font-size:40px;line-height:1.1;letter-spacing:.04em;margin:0;}
.art-cta .art-cta-lead{margin-top:12px;font-size:19px;font-weight:700;color:var(--navy);
  line-height:1.6;text-align:left;}
.art-cta p{margin-top:16px;font-size:14.5px;line-height:1.95;color:var(--text);text-align:left;}
.art-cta-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 22px;}
.art-cta-points li{font-size:14px;font-weight:700;color:var(--navy);display:flex;
  align-items:center;gap:7px;}
.art-cta-points li::before{content:"✓";color:var(--blue);font-size:13px;}
.art-cta-btns{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;}
.art-cta-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--blue-200);
  font-size:12px;line-height:1.85;color:var(--text-light);text-align:left;}

.art-operator{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--text-light);line-height:1.9;}

.art-nav{margin-top:32px;text-align:center;}
.art-nav a{color:var(--blue);text-decoration:none;font-size:14px;font-weight:700;}
.art-nav a:hover{text-decoration:underline;}

/* ---- 一覧ページ ---- */
.list-head{background:linear-gradient(135deg,var(--navy-800),var(--navy-700));color:#fff;padding:56px 0 52px;margin-top:16px;}
.list-head h1{font-size:32px;font-weight:700;line-height:1.5;}
.list-head p{margin-top:14px;color:var(--blue-200);font-size:15px;}
.list{max-width:1000px;margin:0 auto;padding:48px 24px 80px;display:grid;gap:24px;grid-template-columns:repeat(2,1fr);}
.card{background:#fff;border-radius:14px;padding:28px 32px;box-shadow:var(--sh-1);
  text-decoration:none;display:block;transition:.2s;border:1px solid transparent;}
.card:hover{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:var(--blue-200);}
.card{padding:0;overflow:hidden;}
.card-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--ink-100);}
.card-body{padding:24px 28px 26px;}
.card h2{font-size:20px;color:var(--navy);font-weight:700;line-height:1.6;margin:12px 0 10px;}
.card p{font-size:14.5px;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card time{font-family:var(--ff-en);font-size:12.5px;color:var(--text-light);
  display:block;margin-top:14px;font-feature-settings:"tnum" 1;}

/* ---- フッター ---- */
footer{background:#16263f;color:rgba(255,255,255,.78);padding:36px 0;font-size:13.5px;}
.copy{text-align:center;color:rgba(255,255,255,.6);font-size:12px;}

/* ---- スマホ ---- */
@media(max-width:768px){
  .wrap{padding:0 20px;}
  .col-head-inner{height:60px;}
  .col-logo{font-size:17px;}
  .col-logo span{display:none;}
  .art{padding:28px 20px 64px;}
  .toc{padding:20px 20px 22px;margin-bottom:34px;}
  .toc li{font-size:14px;}
  .art-head h1{font-size:25px;}
  .art-body{font-size:16px;line-height:1.95;}
  .art-body h2{font-size:20px;padding-left:12px;border-left-width:4px;}
  .art-body h3{font-size:17.5px;}
  .art-body p{text-align:left;}
  .art-body table{display:block;overflow-x:auto;white-space:nowrap;}
  /* 図版は縮小すると文字が読めなくなるため、最小幅を確保して横スクロールさせる */
  .art-body figure.chart{padding:18px 14px 14px;overflow-x:auto;}
  .art-body figure.chart::before{content:"→ 横にスクロールできます";display:block;
    font-size:11.5px;color:var(--text-light);margin-bottom:10px;}
  .art-body figure.chart svg,
  .art-body figure.chart img{min-width:600px;}
  .art-body figure.chart figcaption{min-width:600px;}
  .art-body .note-check .check-list li{flex-direction:column;align-items:flex-start;gap:11px;}
  .art-body .note-check .check-opts{width:100%;}
  .art-body .note-check .check-opts label{flex:1;justify-content:center;}
  .art-cta{padding:32px 22px 28px;}
  .art-cta h2{font-size:19px;}
  .art-cta h2.art-cta-brand{font-size:32px;}
  .art-cta .art-cta-lead{font-size:17.5px;}
  .art-cta-btns .btn{width:100%;}
  .art-cta-points{gap:8px 18px;}
  .list-head h1{font-size:25px;}
  .list{grid-template-columns:1fr;gap:20px;}
  .card-body{padding:20px 20px 22px;}
  .card h2{font-size:17.5px;}
  .crumbs .cur{max-width:14em;}
}

/* 記事の追従バー（読み切らない人向け。20%スクロールで出し、記事末CTAが見えたら隠す） */
.art-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:14px;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(0,0,0,.08);
  padding:12px 20px;transform:translateY(100%);transition:transform .25s ease;}
.art-sticky[hidden]{display:none;}
.art-sticky.is-on{transform:translateY(0);}
.art-sticky-txt{margin:0;flex:1;min-width:0;font-size:14px;line-height:1.5;}
.art-sticky-txt strong{color:var(--navy);font-weight:700;margin-right:10px;}
.art-sticky-txt span{color:var(--text-light);font-size:13px;}
.art-sticky .btn{flex:none;}
.art-sticky-x{flex:none;background:none;border:0;padding:4px 6px;cursor:pointer;
  color:var(--text-light);font-size:20px;line-height:1;}
@media(max-width:768px){
  .art-sticky{padding:10px 14px;gap:10px;}
  .art-sticky-txt span{display:none;}
}