/* ============ 一覧ページ ============ */
.col-hero{padding-block:clamp(36px,5vw,56px) clamp(24px,3vw,32px)}
.cat-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,32px)}
.cat-nav a{
  font-size:15px;font-weight:700;padding:11px 18px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;background:#fff;transition:border-color .2s,background .2s;
}
.cat-nav a:hover{border-color:var(--ink)}
.cat-group{padding-block:clamp(40px,5vw,60px);border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav) + 8px)}
.cat-group:first-of-type{border-top:0}
.cat-hd{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline}
.cat-hd h2{font-size:clamp(21px,2.5vw,30px);font-weight:700;line-height:1.45}
.cat-hd .cnt{font-size:14px;color:var(--mute)}
.cat-hd .sub{width:100%;font-size:15px;color:var(--ink2);line-height:1.85}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:clamp(16px,2vw,22px);margin-top:clamp(22px,2.6vw,28px)}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
a.post:hover{transform:translateY(-3px);box-shadow:0 16px 36px -24px rgba(23,23,23,.35);border-color:#C8C8C2}
.post .fig{aspect-ratio:16/9;border-radius:0}
.post .b{padding:20px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.post .tagline{display:flex;flex-wrap:wrap;gap:6px}
.post h3{font-size:clamp(16.5px,1.7vw,18px);font-weight:700;line-height:1.6}
.post .dt{margin-top:auto;font-size:13px;color:var(--mute)}
.empty{
  margin-top:clamp(22px,2.6vw,28px);padding:clamp(24px,3vw,32px);background:var(--sand);
  border:1px dashed #C8C8C2;border-radius:var(--r);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;
}
.empty p{flex:1 1 340px;min-width:0;font-size:16px;line-height:1.85}
.empty p b{display:block;font-size:17px;margin-bottom:6px}

/* ============ 記事ページ ============ */
.art-wrap{display:flex;flex-wrap:wrap;gap:clamp(32px,4.4vw,56px);align-items:flex-start;padding-block:24px clamp(56px,7vw,80px)}
article.art{flex:999 1 600px;min-width:0;max-width:760px}
aside.side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--nav) + 20px)}
@media(max-width:1000px){aside.side{position:static}}

.art .tags{display:flex;flex-wrap:wrap;gap:8px}
.art h1{margin-top:18px;font-size:clamp(26px,3.6vw,44px);line-height:1.45}
.meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 24px;font-size:14px;color:var(--mute)}
.eye{margin-top:32px;aspect-ratio:16/9}

.summary{margin-top:32px;padding:clamp(20px,2.4vw,24px) clamp(22px,2.8vw,28px);background:var(--sand);border-radius:var(--r)}
.summary .t{font-size:15px;font-weight:700;color:var(--red)}
.summary p{margin-top:8px;line-height:1.9}

.toc{margin-top:32px;padding:clamp(20px,2.4vw,24px) clamp(22px,2.8vw,28px);border:1px solid var(--line);border-radius:var(--r)}
.toc .t{font-size:15px;font-weight:700}
.toc ol{margin-top:10px;padding-left:1.4em;display:flex;flex-direction:column;gap:5px;font-size:16px}
.toc a{text-decoration:underline;text-underline-offset:3px}
.toc a:hover{color:var(--red)}
.toc a[aria-current]{font-weight:700;color:var(--red)}

/* --- 本文の基本ブロック --- */
.art h2{margin-top:clamp(44px,5.5vw,56px);font-size:clamp(22px,2.7vw,34px);line-height:1.45;font-weight:700;padding-bottom:12px;border-bottom:2px solid var(--ink);scroll-margin-top:calc(var(--nav) + 16px)}
.art h3{margin-top:clamp(28px,3.4vw,40px);font-size:clamp(18px,2vw,22px);line-height:1.55;font-weight:700;padding-left:14px;border-left:4px solid var(--red)}
.art p{margin-top:20px;line-height:1.95}
.art ul,.art ol{margin-top:20px;padding-left:1.4em;display:flex;flex-direction:column;gap:8px;line-height:1.9}
.art li::marker{color:var(--red)}
.art figure{margin-top:28px}
.art figure .fig{aspect-ratio:16/9}
.art figure img{width:100%;border-radius:var(--r)}
.art figcaption{margin-top:8px;font-size:13.5px;color:var(--mute);line-height:1.7}
.art .tbl-scroll{margin-top:24px;overflow-x:auto}
.art table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:420px}
.art th{background:var(--ink);color:#fff;text-align:left;font-weight:700;font-size:14px;padding:12px 16px;white-space:nowrap}
.art td{border-bottom:1px solid var(--line);padding:14px 16px;vertical-align:top;line-height:1.85;color:var(--ink2)}
.art tr td:first-child{font-weight:700;color:var(--ink)}
.art blockquote{margin-top:24px;padding:18px 22px;background:var(--sand);border-left:4px solid var(--mute);border-radius:0 var(--r) var(--r) 0}
.art blockquote p{margin:0;font-size:16px;color:var(--ink2);line-height:1.9}
.art blockquote cite{display:block;margin-top:8px;font-size:13.5px;font-style:normal;color:var(--mute)}
.point{margin-top:26px;padding:clamp(20px,2.4vw,24px);border:2px solid var(--ink);border-radius:var(--r)}
.point .t{font-size:15px;font-weight:800;color:var(--red);letter-spacing:.04em}
.point p,.point ul{margin-top:10px}
.point ul{padding-left:1.3em}
.check{margin-top:24px;list-style:none;padding-left:0;display:flex;flex-direction:column;gap:10px}
.check li{display:flex;gap:11px;align-items:flex-start;line-height:1.85}
.check li::before{content:"✓";flex:none;width:24px;height:24px;margin-top:3px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* --- 連番の失敗リスト --- */
.fails{margin-top:8px;display:flex;flex-direction:column}
.fail{padding:22px 0;border-bottom:1px solid var(--line);display:flex;gap:18px}
.fail .no{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.fail h3{margin:0;padding:0;border:0;font-size:clamp(17px,1.8vw,19px);line-height:1.6;font-weight:700}
.fail p{margin-top:6px;font-size:16px;color:var(--ink2);line-height:1.85}

/* --- 記事内CTA --- */
.mid-cta{margin:28px 0 0;padding:clamp(20px,2.4vw,24px) clamp(22px,2.8vw,28px);background:var(--ink);color:#fff;border-radius:var(--r);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.mid-cta p{margin:0;flex:1 1 300px;font-size:17px;font-weight:700;line-height:1.6}
.mid-cta .btn{flex:none}
.dl-inline{margin-top:40px;padding:clamp(22px,2.8vw,28px);background:var(--sand);border-radius:var(--r);display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.dl-inline .cover{flex:0 0 120px;aspect-ratio:3/4;background:#fff;border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--mute);padding:8px}
.dl-inline .b{flex:1 1 300px;min-width:0}
.dl-inline .c1{font-size:13px;font-weight:700;color:var(--mute)}
.dl-inline .c2{margin-top:4px;font-size:clamp(18px,2vw,20px);font-weight:700;line-height:1.5}

/* --- 記事末：無料相談＋支援内容 --- */
.art-end{margin-top:clamp(40px,5vw,56px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.art-end .top{background:var(--ink);color:#fff;padding:clamp(24px,3vw,32px)}
.art-end .top .t{font-size:clamp(19px,2.1vw,23px);font-weight:700;line-height:1.55}
.art-end .top p{margin-top:10px;font-size:15.5px;color:#DADDE0;line-height:1.85}
.art-end .top .btn-row{margin-top:20px}
.art-end .bot{padding:clamp(20px,2.4vw,26px);background:#fff}
.art-end .bot .t{font-size:14px;font-weight:700;color:var(--mute)}
.art-end .bot ul{margin-top:12px;padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
.art-end .bot a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:4px;font-size:15px;font-weight:700;line-height:1.5;transition:border-color .2s}
.art-end .bot a:hover{border-color:var(--ink);color:var(--red)}

.author{margin-top:32px;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.author .av{flex:0 0 72px;height:72px;border-radius:50%;background:var(--sand2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mute)}
.author .b{flex:1 1 300px;min-width:0}
.author .c1{font-size:13px;font-weight:700;color:var(--mute)}
.author .c2{margin-top:2px;font-size:18px;font-weight:700}
.author p{margin-top:4px;font-size:15px;color:var(--ink2)}

/* --- サイドバー --- */
.side-cta{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(22px,2.6vw,28px);display:flex;flex-direction:column;gap:12px}
.side-cta .c1{font-size:13px;font-weight:700;color:#C9CCD0}
.side-cta .c2{font-size:19px;font-weight:700;line-height:1.6}
.side-cta p{font-size:14px;color:#DADDE0;line-height:1.8}
.side-cat{padding:clamp(20px,2.4vw,24px);border:1px solid var(--line);border-radius:var(--r)}
.side-cat .t{font-size:15px;font-weight:700}
.side-cat ul{margin-top:10px;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:15px}
.side-cat a:hover{color:var(--red)}
.side-cat a[aria-current]{font-weight:700;color:var(--red)}

.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:16px}
.rel a{padding:22px;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;gap:6px;transition:border-color .22s,transform .22s}
.rel a:hover{border-color:var(--ink);transform:translateY(-2px)}
.rel .c1{font-size:13px;color:var(--mute)}
.rel .c2{font-size:17px;font-weight:700;line-height:1.6}

/* ============ パーツ見本帳 ============ */
.parts-intro{padding:clamp(22px,2.8vw,28px);background:var(--sand);border-radius:var(--r);margin-top:24px}
.parts-intro p{margin-top:12px;line-height:1.9}
.parts-intro p:first-child{margin-top:0}
.part{padding-block:clamp(36px,4.4vw,52px);border-top:1px solid var(--line)}
.part > h2{margin:0 0 6px;font-size:clamp(20px,2.3vw,26px);font-weight:700;line-height:1.45;padding:0;border:0}
.part > .use{font-size:14.5px;color:var(--mute);line-height:1.8}
.demo{margin-top:20px;padding:clamp(18px,2.2vw,26px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
.demo > *:first-child{margin-top:0}
.code{margin-top:12px}
.code summary{cursor:pointer;font-size:14px;font-weight:700;padding:11px 14px;background:var(--sand);border-radius:4px;min-height:44px;display:flex;align-items:center}
.code pre{margin-top:10px;padding:16px;background:#1C1C1C;color:#EDEDED;border-radius:4px;overflow-x:auto;font-size:13px;line-height:1.7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- 規約・ポリシーのページ（privacy / terms） ---------- */
.art.legal{max-width:860px;padding-block:clamp(24px,3vw,32px) clamp(56px,7vw,80px)}
.art.legal > h1{margin-top:12px}
.art.legal > .lede{margin-top:18px;max-width:none;font-size:15.5px;line-height:1.95}
/* 条文見出しは記事本文より控えめに。数が多いため */
.art.legal h2{margin-top:clamp(36px,4vw,48px);font-size:clamp(18px,1.9vw,22px);
  padding-bottom:10px;border-bottom:1px solid var(--ink)}
.art.legal h3{margin-top:clamp(22px,2.4vw,28px);font-size:clamp(15.5px,1.5vw,17px);
  padding-left:11px;border-left:3px solid var(--red)}
.art.legal p{margin-top:14px;font-size:15.5px;line-height:1.95}
.art.legal ul,.art.legal ol{margin-top:14px;gap:6px;font-size:15.5px;line-height:1.9}
/* (1)(2)(3) の採番は原稿どおりカッコ付きで出す */
.art.legal ol.li-num{list-style:none;padding-left:0;counter-reset:ln}
.art.legal ol.li-num > li{counter-increment:ln;padding-left:2.6em;position:relative}
.art.legal ol.li-num > li::before{content:"(" counter(ln) ")";position:absolute;left:0;
  color:var(--mute);font-variant-numeric:tabular-nums}
.art.legal ul{list-style:none;padding-left:0}
.art.legal ul > li{padding-left:1.1em;position:relative}
.art.legal ul > li::before{content:"・";position:absolute;left:0;color:var(--mute)}
.art.legal .sign{margin-top:clamp(40px,5vw,56px);padding-top:20px;
  border-top:1px solid var(--line);font-size:15px;line-height:2;color:var(--ink2)}
.art.legal a[href^="mailto:"]{text-decoration:underline;text-underline-offset:3px}