/* ナナトリ コラム 2026-09-25 — HP と同じトークン（モノクロ・Inter＋Noto Sans JP・角丸4px）。編集誌の余白・英字の小見出し・細い罫線 */
:root{--ink:#202020;--sub:#595959;--ctl:#767676;--line:#D9D7D2;--paper:#F7F6F4;--bg:#fff;--r:4px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink:#202020;--bg:#fff}}
:root[data-theme="dark"]{--ink:#202020;--bg:#fff}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/2 "Noto Sans JP",system-ui,sans-serif;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}img{display:block;max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.k{display:block;font:400 11px Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--sub)}
/* header（HP と同じ形） */
header{position:sticky;top:0;background:rgba(255,255,255,.96);z-index:20;border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:8px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}.logo svg{width:34px;height:20px}.logo b{font-weight:500;font-size:16px;letter-spacing:.16em}.logo small{display:block;font:400 10px Inter,sans-serif;letter-spacing:.32em;color:var(--sub);line-height:1}
nav.g{display:flex;margin-left:auto}nav.g a{margin-left:24px;font-size:12.5px;color:var(--sub);text-decoration:none;white-space:nowrap}nav.g a:hover{color:var(--ink)}
.hbtns{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--ink);color:#fff;padding:0 22px;border-radius:var(--r);font-size:14px;font-weight:500;border:1px solid var(--ink);text-decoration:none;letter-spacing:.06em;line-height:1.4;text-align:center}
.btn:hover{background:#000}.btn.ghost{background:#fff;color:var(--ink)}.btn.ghost:hover{background:var(--paper)}
.hd .btn{padding:0 14px;font-size:13px}
.band{height:3px;background:linear-gradient(90deg,#E8735A 0 14.3%,#E9B44C 0 28.6%,#8FB48E 0 42.9%,#2F8F83 0 57.1%,#7FB5D5 0 71.4%,#8E6BA8 0 85.7%,#F2A7A0 0)}
/* 記事 */
.bc{font-size:12px;color:var(--sub);padding:22px 0 0;display:flex;flex-wrap:wrap;gap:6px}.bc a{text-decoration:none}.bc a:hover{text-decoration:underline}
.art{max-width:760px;margin:0 auto;padding:40px 0 96px;counter-reset:ch}
.kick{display:flex;gap:10px;align-items:center}.cat{font-size:12px;letter-spacing:.14em;color:var(--sub);border:1px solid var(--line);border-radius:var(--r);padding:2px 10px}.pl{font:400 11px Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.art h1{font-weight:500;font-size:36px;line-height:1.5;letter-spacing:.04em;margin:18px 0 14px}
.ameta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--sub)}.ameta b{font:400 12.5px Inter,sans-serif;color:var(--ink)}
.ahero{margin:32px 0 0}.ahero img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.acatch{font-size:13px;color:var(--sub);margin-top:10px;letter-spacing:.08em}
.supervisor{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:32px 0 8px}.supervisor p{margin:6px 0 0;font-size:13.5px;line-height:1.85;color:var(--sub)}.supervisor b{color:var(--ink);font-weight:500}
.lead{font-size:17px;line-height:2.05;margin:32px 0 0}
.def{background:var(--paper);border-left:2px solid var(--ink);padding:18px 20px;margin:28px 0 0;font-size:15px;line-height:1.95}
.art h2{counter-increment:ch;font-weight:500;font-size:25px;line-height:1.55;letter-spacing:.04em;margin:72px 0 20px;padding-top:28px;border-top:1px solid var(--line)}
.art h2::before{content:counter(ch,decimal-leading-zero);display:block;font:300 13px Inter,sans-serif;letter-spacing:.3em;color:var(--sub);margin-bottom:10px}
.art section.faq h2::before{content:"Q&A"}
.art h3{font-weight:500;font-size:19px;line-height:1.6;margin:40px 0 10px}
.art h4{font-weight:500;font-size:16.5px;margin:28px 0 6px}
.art p{margin:18px 0 0}.art ul,.art ol{margin:18px 0 0;padding-left:1.4em}.art li{margin:6px 0}
.art strong{font-weight:700;background:linear-gradient(transparent 70%,#EDEBE6 0)}
.note{font-size:13.5px;color:var(--sub);line-height:1.85}
.fig{margin:36px 0 0}.fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}.fig figcaption{font-size:12.5px;color:var(--sub);margin-top:10px;line-height:1.7}
.tblwrap{overflow-x:auto;margin:24px 0 0}
.art table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.75}.art th,.art td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:top}.art th{font-weight:400;color:var(--sub);font-size:12.5px;letter-spacing:.08em;border-bottom-color:var(--ink)}
.art td.n{font-family:Inter,"Noto Sans JP",sans-serif;white-space:nowrap}
.steps{list-style:none;padding:0!important;counter-reset:st;border-top:1px solid var(--line)}.steps li{counter-increment:st;position:relative;padding:16px 0 16px 52px!important;margin:0!important;border-bottom:1px solid var(--line)}.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:14px;font:300 22px Inter,sans-serif}
.src-box{margin:48px 0 0;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;font-size:13px;line-height:1.85;color:var(--sub)}.src-box h3{margin:0 0 6px;font-size:14px;color:var(--ink)}.src-box ul{margin:0;padding-left:1.2em}.src-box a{word-break:break-all}
.faq .qa{border-bottom:1px solid var(--line);padding:16px 0}.faq .q{font-weight:500;margin:0}.faq .q::before{content:"Q.";font-family:Inter;margin-right:8px}.faq .a{margin:8px 0 0;color:var(--sub);font-size:15px}
.sum{margin:56px 0 0;padding:24px;background:var(--paper);border-radius:var(--r)}.sum h3{margin:0;font-size:16px}.sum ol{margin:12px 0 0}
.ctabox{margin:48px 0 0;background:var(--ink);color:#fff;border-radius:var(--r);padding:32px 28px}.ctabox .k{color:#aaa}.ctabox h3{color:#fff;font-size:21px;margin:10px 0 0;font-weight:500;line-height:1.6}.ctabox p{color:#ddd;font-size:14.5px}
.ctabtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.ctabox .btn{background:#fff;color:var(--ink);border-color:#fff}.ctabox .btn.ghost{background:transparent;color:#fff}
.ctabox .ctanote{font-size:12px;color:#aaa;margin:12px 0 0}
.rel{margin:64px 0 0}.rel h4{font-size:13px;letter-spacing:.2em;color:var(--sub);margin:0 0 14px;font-weight:400}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.relc{text-decoration:none;display:block}.relc img{aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}.relc .c{font-size:11.5px;color:var(--sub);display:block;margin-top:10px}.relc h4{font-size:14.5px;line-height:1.6;margin:4px 0 0;font-weight:500;letter-spacing:.02em}.relc:hover h4{text-decoration:underline}
/* 一覧 */
.jhd{padding:88px 0 56px;border-bottom:1px solid var(--line)}.jhd h1{font-weight:500;font-size:44px;line-height:1.45;letter-spacing:.04em;margin:14px 0 0}.jhd p{max-width:640px;color:var(--sub);margin:22px 0 0}
.grp{padding:64px 0 0}.gh h2{font-weight:500;font-size:26px;margin:10px 0 0}.gh p{color:var(--sub);font-size:14px;margin:8px 0 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;margin-top:32px}
.card{text-decoration:none;display:block}.card img{aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}.card .c{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--sub);margin-top:14px}.card h3{font-weight:500;font-size:17px;line-height:1.6;margin:6px 0 0}.card p{font-size:13.5px;color:var(--sub);line-height:1.8;margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card .d{font:400 12px Inter,sans-serif;color:var(--ctl);display:block;margin-top:8px}.card:hover h3{text-decoration:underline}
main+footer,footer{margin-top:96px}
footer{padding:48px 0 96px;font-size:12.5px;color:var(--sub);border-top:1px solid var(--line)}
.fcols{display:flex;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}.fcols a{display:inline-block;padding:6px 0;margin-right:14px;text-decoration:underline}
.copy{margin-top:28px}
.sticky{display:none}
.sp{display:none}
@media (max-width:920px){
  body{font-size:16px}.wrap{padding:0 16px}nav.g{display:none}.hd{height:60px}
  .art{padding:28px 0 72px}.art h1{font-size:26px}.art h2{font-size:21px;margin-top:56px}.art h3{font-size:17.5px}.lead{font-size:16px}
  .rel-grid,.cards{grid-template-columns:1fr}.cards{gap:36px}
  .jhd{padding:56px 0 40px}.jhd h1{font-size:30px}.sp{display:inline}
  .ctabox{padding:26px 18px}.ctabtns .btn{width:100%}
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .sticky a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:var(--r);background:var(--ink);color:#fff;text-decoration:none;font-size:14.5px;font-weight:500}.sticky a.tel{flex:0 0 34%;background:#fff;color:var(--ink);border:1px solid var(--ink)}
  footer{padding-bottom:110px}
}
@media (max-width:640px){.art table.stack,.art table.stack tbody,.art table.stack tr,.art table.stack td{display:block;width:100%}.art table.stack tr{padding:10px 0;border-bottom:1px solid var(--line)}.art table.stack td{border:0;padding:2px 0}.art table.stack td:first-child{font-weight:700}.art table.stack tr:first-child{display:none}}