/* ============================================================
   記事・一覧・お問い合わせ の層

   組み方は本家 mona.media の記事に合わせてある。
   表紙 → 書き手 → 要点 → 目次 → 本文 → よくあるご質問 → 出典 → 前後。
   一覧は横一列に流さない。表紙のついた札を並べる。

   ・二段組で丈が違うところは、短いほうを貼る（版の決まり事）
   ・class で opacity を動かさない（motion-playbook §4.2c）
   ============================================================ */

#news,#cat,#contact-page{padding-top:clamp(104px,14vh,150px)}
#news .crumb,#cat .crumb,#contact-page .crumb{margin-bottom:clamp(14px,2vh,22px)}

/* ============================================================
   札（カード）— 一覧と分類で共用
   ============================================================ */
.nl{margin-top:clamp(22px,3.4vh,36px)}
.nl__h1{margin-top:0}
.nl__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  padding-bottom:16px;margin-bottom:clamp(18px,2.6vh,26px);
  border-bottom:1px solid rgba(39,1,71,.16);
}
.nl__f{
  appearance:none;cursor:pointer;border:1px solid rgba(39,1,71,.22);background:transparent;
  padding:6px 14px;border-radius:999px;font:inherit;font-size:11.5px;letter-spacing:.04em;
  color:var(--sumi-70,rgba(28,18,38,.72));transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.nl__f:hover{background:rgba(39,1,71,.06)}
.nl__f.is-on{background:var(--ink-1,#270147);border-color:var(--ink-1,#270147);color:#F6EFE4;font-weight:700}
.nl__n{margin-left:auto;font-size:11px;letter-spacing:.1em;color:var(--sumi-50,rgba(28,18,38,.5));font-variant-numeric:tabular-nums}

.nl__g{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px);
}
.nc{min-width:0}
.nc[hidden]{display:none}
.nc > a{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  border:1px solid rgba(39,1,71,.14);background:rgba(255,255,255,.55);
  transition:border-color .25s ease, box-shadow .3s ease, translate .3s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.nc > a:hover{
  border-color:rgba(39,1,71,.34);translate:0 -3px;
  box-shadow:0 22px 40px -30px rgba(39,1,71,.55);
}
.nc__pic{display:block;overflow:hidden;background:#1E0A38;aspect-ratio:1200/630}
.nc__pic img{
  width:100%;height:100%;object-fit:cover;display:block;
  scale:1;transition:scale .5s var(--ease-wood,cubic-bezier(.16,1,.3,1));
}
.nc > a:hover .nc__pic img{scale:1.045}
.nc__b{display:flex;flex-direction:column;gap:8px;padding:clamp(14px,1.7vw,20px);flex:1}
.nc__top{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.08em}
.nc__top em{
  font-style:normal;padding:3px 10px;border:1px solid rgba(39,1,71,.22);border-radius:999px;
  color:var(--ink-1,#270147);font-weight:700;white-space:nowrap;
}
.nc__top time{color:var(--sumi-40,rgba(28,18,38,.44));font-family:var(--f-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.nc__t{
  font-family:var(--f-mincho,serif);font-weight:800;
  font-size:clamp(14.5px,1.55vw,17px);line-height:1.65;color:var(--sumi,#1C1226);
}
.nc > a:hover .nc__t{color:var(--ink-1,#270147)}
.nc__d{
  font-size:12px;line-height:1.9;color:var(--sumi-60,rgba(28,18,38,.62));
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.nc__go{margin-top:auto;padding-top:6px;font-size:11px;letter-spacing:.08em;color:var(--ink-1,#270147)}
.nc__go i{font-style:normal;margin-left:6px;display:inline-block;transition:translate .28s var(--ease-wood,cubic-bezier(.16,1,.3,1))}
.nc > a:hover .nc__go i{translate:5px 0}

/* 先頭の一本だけ横に大きく取る。一覧に山が要る */
.nc--big{grid-column:1/-1}
.nc--big > a{flex-direction:row;align-items:stretch}
.nc--big .nc__pic{flex:0 0 clamp(300px,42%,540px);aspect-ratio:auto}
/* 表紙の字は左寄せで刷ってある。中央を切ると字が落ちる */
.nc--big .nc__pic img{object-position:0 50%}
.nc--big .nc__b{gap:11px;padding:clamp(18px,2.4vw,32px);justify-content:center}
.nc--big .nc__t{font-size:clamp(18px,2.4vw,28px);line-height:1.5}
.nc--big .nc__d{-webkit-line-clamp:4;font-size:13px}

.nl__empty{margin:26px 0 0;font-size:13px;color:var(--sumi-50,rgba(28,18,38,.5))}
/* 絞り込みで残った札は位置だけ動かす。透明度は触らない（§4.2c） */
.nc.is-shift{animation:ncIn .42s cubic-bezier(.16,1,.3,1) both}
@keyframes ncIn{from{translate:0 10px}to{translate:0 0}}

.nl__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-top:clamp(24px,3.4vh,36px);padding-top:18px;border-top:1px solid rgba(39,1,71,.16);
  font-size:11.5px;
}
.nl__foot > span{color:var(--sumi-50,rgba(28,18,38,.5));letter-spacing:.1em}
.nl__foot a{color:var(--ink-1,#270147);text-underline-offset:3px}
.nl__back{margin-left:auto}
.nl__back i{font-style:normal;margin-left:5px}

@media (max-width:1000px){ .nl__g{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .nl__g{grid-template-columns:minmax(0,1fr)}
  .nc--big > a{flex-direction:column}
  .nc--big .nc__pic{flex:none;aspect-ratio:1200/630}
}

/* ============================================================
   分類の頭

   class 名は .cah。.cah は使えない — main.js の文字割りが
   一文字ずつに class="ch" を振るので、この頁で news.css を読むと
   見出しの全文字が「分類の頭」の箱になり、下に 40px の余白を持つ。
   二行に折れた見出しの行間が 37px から 191px に開いた（実測）。
   ============================================================ */
.cah{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(20px,3.4vw,48px);align-items:center;
  margin:clamp(10px,1.6vh,18px) 0 clamp(24px,3.6vh,40px);
}
.cah__h1{
  margin:clamp(10px,1.6vh,16px) 0 0;font-family:var(--f-mincho,serif);font-weight:900;
  font-size:clamp(26px,3.8vw,44px);line-height:1.35;color:var(--sumi,#1C1226);
}
.cah__l{margin:clamp(12px,1.8vh,18px) 0 0;font-size:clamp(13.5px,1.5vw,15.5px);line-height:2;color:var(--sumi-70,rgba(28,18,38,.74))}
.cah__n{margin:clamp(10px,1.6vh,14px) 0 0;font-size:11px;letter-spacing:.12em;color:var(--sumi-50,rgba(28,18,38,.5));font-variant-numeric:tabular-nums}
.cah__pic{margin:0;overflow:hidden;border:1px solid rgba(39,1,71,.14)}
.cah__pic img{width:100%;height:auto;display:block}
@media (max-width:800px){ .cah{grid-template-columns:minmax(0,1fr)} .cah__pic{order:-1} }

/* ============================================================
   記事
   ============================================================ */
.nx{padding-top:clamp(104px,14vh,150px)}
/* 本文の幅は「柱」で決める。中で max-width を掛けると、
   柱は伸びたのに中身だけ縮んで、右に何も無い帯ができる（実際そうなっていた） */
.nx__wrap{
  --gx:clamp(24px,4vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:var(--gx);align-items:start;margin-top:clamp(14px,2vh,22px);
  max-width:calc(768px + 300px + var(--gx));margin-inline:auto;
}
.nx__body{min-width:0}
.nx__cover{margin:0 0 clamp(18px,2.6vh,28px);overflow:hidden;border:1px solid rgba(39,1,71,.14)}
.nx__cover img{width:100%;height:auto;display:block}
.nx__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;
  font-size:11.5px;letter-spacing:.05em;color:var(--sumi-50,rgba(28,18,38,.52));
}
.nx__cat{
  display:inline-block;padding:4px 12px;border:1px solid rgba(39,1,71,.24);border-radius:999px;
  color:var(--ink-1,#270147);text-decoration:none;font-weight:700;
}
.nx__cat:hover{background:rgba(39,1,71,.06)}
.nx__dates{display:flex;gap:12px}
.nx__meta time,.nx__min{font-family:var(--f-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums}
.nx__h1{
  margin:clamp(12px,1.8vh,18px) 0 0;font-family:var(--f-mincho,serif);font-weight:900;
  font-size:clamp(25px,3.6vw,42px);line-height:1.45;letter-spacing:.01em;color:var(--sumi,#1C1226);
}
.nx__lead{margin:clamp(14px,2vh,20px) 0 0;font-size:clamp(14px,1.6vw,16.5px);line-height:2;color:var(--sumi-70,rgba(28,18,38,.76))}

.nx__au{
  display:flex;align-items:center;gap:12px;
  margin:clamp(18px,2.6vh,26px) 0 0;padding:12px 0;
  border-top:1px solid rgba(39,1,71,.12);border-bottom:1px solid rgba(39,1,71,.12);
}
.nx__av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#F1E9E0;flex:none;display:grid;place-items:center}
.nx__av img{width:66%;height:auto;display:block}
.nx__aub b{display:block;font-size:13px;color:var(--sumi,#1C1226)}
.nx__aub em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.08em;color:var(--sumi-50,rgba(28,18,38,.5));margin-top:2px}

/* 要点。読む前に、何が書いてあるか分かるように */
.nx__sum{
  margin:clamp(22px,3.2vh,32px) 0 0;padding:clamp(15px,2vw,22px);
  background:rgba(232,179,60,.09);border-left:3px solid var(--kin,#E8B33C);
}
.nx__sum b{display:block;margin-bottom:9px;font-family:var(--f-mincho,serif);font-size:14.5px;color:var(--sumi,#1C1226)}
.nx__sum ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.nx__sum li{position:relative;padding-left:16px;font-size:13px;line-height:1.9;color:var(--sumi-80,rgba(28,18,38,.84))}
.nx__sum li::before{content:"";position:absolute;left:0;top:.78em;width:6px;height:6px;background:var(--kin,#E8B33C);rotate:45deg}

/* 目次 */
.tc{
  margin:clamp(24px,3.4vh,34px) 0 0;padding:clamp(15px,2vw,20px);
  border:1px solid rgba(39,1,71,.16);background:rgba(255,255,255,.5);
}
.tc__h{display:block;margin-bottom:10px;font-family:var(--f-mincho,serif);font-size:14.5px;color:var(--sumi,#1C1226)}
.tc__l{list-style:none;margin:0;padding:0;counter-reset:tc;display:grid;gap:6px}
.tc__l a{font-size:12.5px;line-height:1.75;color:var(--sumi-80,rgba(28,18,38,.82));text-decoration:none;text-underline-offset:3px}
.tc__l a:hover{color:var(--ink-1,#270147);text-decoration:underline}
.tc__2{counter-increment:tc}
.tc__2 > a::before{content:counter(tc) ". ";color:var(--ink-4,#8129DB);font-family:var(--f-mono,ui-monospace,monospace);font-size:11px}
.tc__3{padding-left:1.5em}
.tc__3 > a{font-size:11.5px;color:var(--sumi-60,rgba(28,18,38,.62))}
.tc__3 > a::before{content:"— ";color:var(--sumi-40,rgba(28,18,38,.36))}
.tc__l--side a.is-now{color:var(--ink-1,#270147);font-weight:700}

.nx__h2{
  margin:clamp(36px,5.2vh,56px) 0 clamp(10px,1.6vh,16px);scroll-margin-top:120px;
  font-family:var(--f-mincho,serif);font-weight:900;
  font-size:clamp(18px,2.3vw,26px);line-height:1.55;color:var(--sumi,#1C1226);
  padding-left:14px;border-left:3px solid var(--ink-1,#270147);
}
.nx__h3{
  margin:clamp(24px,3.4vh,34px) 0 clamp(8px,1.2vh,12px);scroll-margin-top:120px;
  font-family:var(--f-mincho,serif);font-weight:700;
  font-size:clamp(15px,1.8vw,19px);line-height:1.6;color:var(--ink-1,#270147);
}
.nx__body > p{margin:0 0 clamp(14px,2vh,20px);font-size:clamp(14px,1.5vw,16px);line-height:2.1;color:var(--sumi-80,rgba(28,18,38,.84))}
.nx__body a{color:var(--ink-1,#270147);text-underline-offset:3px}

/* よくあるご質問 */
.fq{margin-top:clamp(30px,4.4vh,48px)}
.fq__i{padding:clamp(13px,1.8vh,18px) 0;border-bottom:1px dotted rgba(39,1,71,.22)}
.fq__q{
  margin:0 0 6px;font-family:var(--f-mincho,serif);font-weight:700;
  font-size:clamp(14px,1.6vw,16.5px);line-height:1.7;color:var(--sumi,#1C1226);
  position:relative;padding-left:26px;
}
.fq__q::before{content:"Q";position:absolute;left:0;top:0;font-family:var(--f-mono,ui-monospace,monospace);font-size:13px;color:var(--ink-4,#8129DB)}
.fq__a{margin:0;padding-left:26px;font-size:13px;line-height:2;color:var(--sumi-70,rgba(28,18,38,.74));position:relative}
.fq__a::before{content:"A";position:absolute;left:0;top:0;font-family:var(--f-mono,ui-monospace,monospace);font-size:13px;color:var(--kin,#B8862A)}

.nx__src{
  margin-top:clamp(30px,4.4vh,48px);padding:14px 18px;
  border-left:3px solid rgba(39,1,71,.2);background:rgba(39,1,71,.04);
  font-size:11.5px;line-height:1.95;color:var(--sumi-60,rgba(28,18,38,.6));
}
.nx__src a{word-break:break-all}
.nx__cta{
  margin-top:clamp(26px,3.8vh,40px);padding-top:clamp(20px,3vh,28px);
  border-top:1px solid rgba(39,1,71,.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
}
.nx__cta p{margin:0;font-size:13.5px;color:var(--sumi-70,rgba(28,18,38,.74))}

/* 前後の記事 */
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(26px,3.8vh,40px)}
.pn__i{
  display:block;padding:clamp(13px,1.8vw,18px);text-decoration:none;color:inherit;
  border:1px solid rgba(39,1,71,.16);background:rgba(255,255,255,.5);
  transition:border-color .25s ease,background .25s ease;
}
.pn__i:hover{border-color:rgba(39,1,71,.34);background:rgba(255,255,255,.8)}
.pn__i span{display:block;font-size:10px;letter-spacing:.14em;color:var(--ink-4,#8129DB);margin-bottom:5px}
.pn__i b{display:block;font-family:var(--f-mincho,serif);font-size:13px;line-height:1.7;font-weight:700;color:var(--sumi,#1C1226)}
.pn__i--n{text-align:right}
.pn__i--n:only-child{grid-column:2}
@media (max-width:700px){ .pn{grid-template-columns:minmax(0,1fr)} .pn__i--n{text-align:left} .pn__i--n:only-child{grid-column:1} }

/* 右は本文より短い。貼らないと、読み進めるあいだ右半分が空く */
.nx__side{position:sticky;top:clamp(100px,13vh,128px);align-self:start;min-width:0;display:grid;gap:16px}
.nx__box{border:1px solid rgba(39,1,71,.16);background:rgba(255,255,255,.6);padding:clamp(14px,1.8vw,20px)}
.nx__box h2{
  margin:0 0 12px;font-family:var(--f-lat,sans-serif);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);font-weight:700;
}
.nx__toc .tc__l{max-height:44vh;overflow:auto}
.nx__rel,.nx__svc{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.nx__rel a{display:block;text-decoration:none;color:inherit}
.nx__rc{display:block;font-size:9.5px;letter-spacing:.12em;color:var(--ink-4,#8129DB);margin-bottom:3px}
.nx__rel b{display:block;font-size:12.5px;line-height:1.7;font-weight:500;color:var(--sumi,#1C1226)}
.nx__rel a:hover b{color:var(--ink-1,#270147);text-decoration:underline;text-underline-offset:3px}
.nx__svc a{font-size:12.5px;line-height:1.7;color:var(--sumi,#1C1226);text-underline-offset:3px}

/* 読んだ量。動くのはこれだけ */
.nx__prog{
  position:fixed;left:0;top:0;height:2px;z-index:60;pointer-events:none;
  width:calc(var(--read,0) * 100%);
  background:linear-gradient(90deg, var(--ink-1,#270147), var(--kin,#E8B33C));
}
@media (max-width:900px){
  .nx__wrap{grid-template-columns:minmax(0,1fr)}
  .nx__side{position:static}
  .nx__toc{display:none}          /* 本文の中に目次があるので重複させない */
}
@media (min-width:901px){ .tc{display:none} }   /* 広い画面では右の目次を使う */

/* ============================================================
   お問い合わせ
   ============================================================ */
.ct{
  --gx:clamp(24px,4vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:var(--gx);align-items:start;margin-top:clamp(24px,3.6vh,42px);
  max-width:calc(730px + 320px + var(--gx));margin-inline:auto;
}
.ct__main{min-width:0}
.ct__h2{
  margin:clamp(26px,4vh,40px) 0 clamp(8px,1.4vh,14px);
  font-family:var(--f-mincho,serif);font-weight:900;font-size:clamp(17px,2.1vw,23px);
  line-height:1.55;color:var(--sumi,#1C1226);padding-left:13px;border-left:3px solid var(--ink-1,#270147);
}
.ct__main .ct__h2:first-child{margin-top:0}
.ct__p{margin:0;font-size:clamp(14px,1.5vw,16px);line-height:2.1;color:var(--sumi-80,rgba(28,18,38,.84))}
.ct__ol{margin:0;padding-left:1.3em;display:grid;gap:10px}
.ct__ol li{font-size:13.5px;line-height:1.95;color:var(--sumi-80,rgba(28,18,38,.84))}
.ct__ol b{display:block;font-family:var(--f-mincho,serif);font-size:15px;color:var(--sumi,#1C1226)}
.ct__links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ct__links li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:8px 16px;padding:11px 0;border-bottom:1px dotted rgba(39,1,71,.22)}
.ct__links a{font-size:13.5px;color:var(--ink-1,#270147);font-weight:700;text-underline-offset:3px}
.ct__links span{font-size:12px;line-height:1.8;color:var(--sumi-60,rgba(28,18,38,.62))}
.ct__note{
  margin-top:clamp(26px,4vh,40px);padding:16px 20px;
  border-left:3px solid var(--shu,#C44A2E);background:rgba(196,74,46,.06);
}
.ct__note b{display:block;margin-bottom:6px;font-family:var(--f-mincho,serif);font-size:15px;color:var(--sumi,#1C1226)}
.ct__note p{margin:0;font-size:12.5px;line-height:2;color:var(--sumi-70,rgba(28,18,38,.74))}
.ct__side{position:sticky;top:clamp(100px,13vh,128px);align-self:start;display:grid;gap:16px;min-width:0}
.ct__card{border:1px solid rgba(39,1,71,.16);background:rgba(255,255,255,.62);padding:clamp(16px,2vw,22px)}
.ct__card h2{
  margin:0 0 12px;font-family:var(--f-lat,sans-serif);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4,#8129DB);font-weight:700;
}
.ct__row{display:grid;grid-template-columns:4.2em 1fr;gap:10px;margin:0 0 9px;font-size:13px;line-height:1.8}
.ct__row span{font-size:10.5px;letter-spacing:.1em;color:var(--sumi-50,rgba(28,18,38,.5));padding-top:3px}
.ct__row a{color:var(--ink-1,#270147);font-weight:700;text-underline-offset:3px}
.ct__fine{margin:12px 0 0;font-size:11px;line-height:1.8;color:var(--sumi-50,rgba(28,18,38,.5))}
.ct__ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.ct__ul li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.85;color:var(--sumi-70,rgba(28,18,38,.74))}
.ct__ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--kin,#E8B33C);rotate:45deg}
@media (max-width:900px){
  .ct{grid-template-columns:minmax(0,1fr)}
  .ct__side{position:static}
  .ct__links li{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   追従ヘッダーとの取り合い

   この層の頁は節が一枚きりである。継紙（.sheet）は前の節へ
   重なるために margin-top を負に取り、padding-top を詰める。
   重なる相手がいないここでは、そのぶん頁の頭が
   追従ヘッダーの下へ潜る（実測：一覧で 41px、記事で 95px 潜っていた）。

   .sec.sheet は二つの class を持つので、.nx 一つでは勝てない。
   同じ数以上の札で上書きする。
   ============================================================ */
.nx.sec.sheet,
#news.sec.sheet,
#cat.sec.sheet,
#contact-page.sec.sheet{
  margin-top:0;
  padding-top:clamp(126px,16vh,168px);
}

/* ---------- 指で触る画面 ----------
   記事側で 40px を切っていたのは、目次・分類の切り替え・
   お問い合わせの一覧・パンくず。どれも面を広げるだけで直る。 */
@media (max-width:900px){
  .tc__l a{display:block;padding:9px 2px;font-size:13px}
  .nl__f{min-height:44px}
  .ct__links a{display:inline-flex;align-items:center;min-height:40px}
  .crumb a{display:inline-block;padding:7px 0}
  .nx__cat{min-height:40px;display:inline-flex;align-items:center}
  .pn__i{min-height:76px}
  .ct__row a{display:inline-flex;align-items:center;min-height:40px}
  .nx__svc a{display:block;padding:10px 0}
  .nl__back{display:inline-block;padding:9px 0}
}