/* 制作ガイド（column-generator §8）。カテゴリの色は表紙と札にだけ使う（§8.1）。
   技法だけ 1homepage.jp/column から：色で種類を即読・大きな英字の表紙・5点のカード・記事冒頭の札と読了目安・追従する目次・進み具合の線。 */
.guide{max-width:calc(var(--max) + var(--g)*2);margin:0 auto}
.guide--top{background:#fff;max-width:none}
.guide--top>*{max-width:var(--max);margin-left:auto;margin-right:auto}

/* チップ（§8.1：押すと絞り込む。JSが無くても全件見える） */
.gchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,36px)}
.gchip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px;border:1px solid var(--line);background:#fff;border-radius:99px;font:inherit;font-size:14px;font-weight:700;color:var(--navy-d);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.gchip span{font-size:12px;font-weight:500;opacity:.7}
.gchip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,var(--gold))}
.gchip[aria-pressed="true"]{background:var(--navy-d);border-color:var(--navy-d);color:#fff}
@media (hover:hover){.gchip:hover{border-color:var(--c,var(--gold))}}

/* カード（§8.2：PC3列・SP1列、SPは表紙を横長に低く） */
.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.gcard a{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px;height:100%;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;transition:box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.gcard a>*:not(.gcover){padding:0 clamp(16px,1.6vw,22px)}
.gcard a>.gcard__r{padding-bottom:18px}
.gcard[hidden]{display:none}
.gcover{position:relative;display:grid;align-content:end;gap:8px;aspect-ratio:16/10;padding:clamp(18px,2vw,26px);background:var(--c);color:var(--cf);overflow:hidden}
.gcover::after{content:"";position:absolute;right:-18%;top:-34%;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid currentColor;opacity:.22}
.gcover__en{font-family:"Fraunces",var(--serif);font-weight:700;font-size:clamp(30px,2.6vw,44px);line-height:1;letter-spacing:.02em;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.gcover__bar{display:block;width:36px;height:3px;background:currentColor;transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.gcover__ja{font-size:13px;font-weight:700;letter-spacing:.08em}
.gcard__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;font-size:13px;color:var(--sub)}
.gtag{display:inline-block;padding:2px 10px;background:var(--c);color:var(--cf);font-size:12px;font-weight:700}
.gcard__t{font-size:clamp(16px,.4vw + 14px,18px);line-height:1.6;color:var(--navy-d);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard__s{font-size:14px;line-height:1.75;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard__r{font-size:12px;color:var(--sub)}
@media (hover:hover){
  .gcard a:hover{box-shadow:0 18px 36px rgba(11,26,58,.14);transform:translateY(-4px)}
  .gcard a:hover .gcover__en{transform:translateY(-6px)}
  .gcard a:hover .gcover__bar{transform:scaleX(2.2)}
}
.gcard a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:1000px){.gcards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.gcards{grid-template-columns:1fr}.gcover{aspect-ratio:16/7}}
.guide__note{margin-top:20px;font-size:13px;color:var(--sub)}

/* 絞り込みの切り替え（説明の動き：選んだ種類だけが入れ替わって出る） */
.js .gcard.is-enter a{animation:genter .45s cubic-bezier(.16,1,.3,1) both}
@keyframes genter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* 記事ページ（§8.3） */
.is-guide .hd{background:var(--navy-d)}
.gprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.gprog i{display:block;height:100%;width:100%;background:var(--c);transform:scaleX(var(--p,0));transform-origin:left}
.art__hd{background:var(--paper);border-bottom:1px solid var(--line)}
.art__band{display:flex;align-items:center;gap:14px;padding:clamp(96px,12vh,120px) var(--g) 18px;max-width:calc(var(--max) + var(--g)*2);margin:0 auto;color:var(--c)}
.art__band b{font-family:"Fraunces",var(--serif);font-weight:700;font-size:clamp(40px,5vw,76px);line-height:1}
.art__band i{display:block;width:48px;height:3px;background:var(--c)}
.art__band small{font-size:14px;font-weight:700;color:var(--navy-d)}
.art__in{max-width:calc(var(--max) + var(--g)*2);margin:0 auto;padding:0 var(--g) clamp(32px,4vw,48px);display:grid;gap:14px}
.crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--sub)}
.crumb a{color:var(--sub)}
.art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13px;color:var(--sub)}
.art__st{padding:1px 8px;border:1px solid var(--gold);color:var(--gold-d);font-size:12px;font-weight:700}
.art__h{font-family:var(--serif);font-weight:700;font-size:clamp(24px,1.6vw + 14px,36px);line-height:1.5;color:var(--navy-d);max-width:30em;text-wrap:pretty}
.art__sum{max-width:44em;line-height:1.9}
.art__sum mark{background:linear-gradient(transparent 58%,rgba(179,142,88,.45) 58%);color:inherit;padding:0 2px}
.art__grid{max-width:calc(var(--max) + var(--g)*2);margin:0 auto;padding:clamp(32px,4vw,56px) var(--g);display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(32px,4vw,64px)}
.art__main{min-width:0;display:grid;gap:clamp(24px,3vw,36px);align-content:start}
.glearn{border:1px solid var(--line);border-top:4px solid var(--c);background:#fff;padding:18px 22px;display:grid;gap:10px}
.glearn b{font-weight:700;color:var(--navy-d)}
.glearn ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.glearn li{position:relative;padding-left:26px}
.glearn li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--c);border-bottom:2px solid var(--c);transform:rotate(-45deg)}
.art__body{font-size:16px;line-height:2.05}
.art__body>*+*{margin-top:1.2em}
.art__body h2{position:relative;margin-top:2.4em;padding:10px 0 10px 18px;font-family:var(--serif);font-size:clamp(20px,.8vw + 15px,26px);line-height:1.5;color:var(--navy-d);border-left:5px solid var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%);scroll-margin-top:90px}
.gnum{display:inline-block;margin-right:10px;font-family:"Fraunces",var(--serif);color:var(--c);font-size:.9em}
.art__body h3{font-size:18px;color:var(--navy-d)}
.art__body ul,.art__body ol{padding-left:1.4em}
.art__body li+li{margin-top:.4em}
.art__body strong{color:var(--navy-d)}
.art__body a{color:var(--navy);font-weight:700}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
.art__body table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.7;background:#fff}
.art__body th{background:var(--navy-d);color:#fff;text-align:left;padding:10px 12px;font-weight:700;white-space:nowrap}
.art__body td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.gnote{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:14px 18px;border:1px solid var(--gold);background:var(--gold-l)}
.gnote b{display:grid;place-items:center;min-width:44px;padding:2px 8px;background:var(--gold);color:var(--navy-d);font-size:12px}
.gnote p{margin:0;line-height:1.8}
.gcta{display:grid;justify-items:center;gap:14px;padding:clamp(28px,3vw,40px) 20px;background:var(--navy-d);color:#fff;text-align:center}
.art__side{position:relative}
.gtoc--pc{position:sticky;top:96px;display:grid;gap:10px;border-left:1px solid var(--line);padding-left:18px}
.gtoc b{font-size:13px;letter-spacing:.1em;color:var(--gold-d)}
.gtoc ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:t}
.gtoc li{counter-increment:t}
.gtoc a{display:block;font-size:13px;line-height:1.6;color:var(--sub);text-decoration:none;transition:color .25s}
.gtoc a::before{content:counter(t,decimal-leading-zero) "　";font-family:"Fraunces",var(--serif);color:var(--c)}
.gtoc a.is-now{color:var(--navy-d);font-weight:700}
.gtoc--sp{display:none;border:1px solid var(--line);background:#fff;padding:12px 16px}
.gtoc--sp summary{cursor:pointer;font-weight:700;color:var(--navy-d)}
.gtoc--sp ol{margin-top:10px}
@media (max-width:900px){.art__grid{grid-template-columns:minmax(0,1fr)}.art__side{display:none}.gtoc--sp{display:block}}
.guide--rel{padding-top:0}
@media (prefers-reduced-motion:reduce){.js .gcard.is-enter a{animation:none}.gcard a,.gcover__en,.gcover__bar{transition:none}}
.art__main{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){.art__body th{white-space:normal}.art__body th,.art__body td{padding:8px 9px;font-size:13px}}
.art__body ul{list-style:disc}.art__body ol{list-style:decimal}.art__body li::marker{color:var(--c)}
.art__band{flex-wrap:wrap}.art__band small{white-space:nowrap}
.guide--top .gcards,.guide--top .more{max-width:var(--max);margin-left:auto;margin-right:auto}