:root{
  --manila:#c7b795;      /* 書類フォルダの色。トップはこの地 */
  --manila-d:#b3a07c;
  --paper:#f3ede1;       /* フォルダの中の紙。記事ページはこの地 */
  --ink:#17140f;
  --red:#7a1f16;
  --muted:#6d6252;
  --rule:#a99madeup;
}
:root{--rule:#a99a7c}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-size:17px;line-height:1.9;
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif}
.gothic,h1,h2,.name,.tab,.ledger dt,.state{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif}
a{color:var(--red)}
img{max-width:100%}

/* ---- 共通 ---- */
/* 地はマニラで統一。紙色はカードと本文パネルにだけ使う */
body{background:var(--manila)}
header.site{border-bottom:2px solid var(--ink);margin-bottom:40px;padding-block:30px 26px}
header.site .wrap{max-width:860px;margin:0 auto;padding:0 24px}
.name{margin:0;font-size:26px;font-weight:700;letter-spacing:.22em}
.name a{color:inherit;text-decoration:none}
.tag{margin:12px 0 0;font-size:13.5px;line-height:1.85;color:#4d4436;max-width:34em}
.rule{display:none}

/* ---- フォルダ（トップ） ---- */
.folder .wrap{max-width:860px;margin:0 auto;padding:0 24px}

.files{list-style:none;padding:0;margin:0}
.files li{margin:26px 0}
.file{display:grid;grid-template-columns:150px 1fr;gap:0;background:var(--paper);
  border:1px solid var(--manila-d);border-left:6px solid var(--manila);
  text-decoration:none;color:inherit;position:relative}
.file .shot{padding:16px 0 16px 16px}
.file .shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid #ded4c0;filter:saturate(.82)}
.file .body{padding:16px 20px 18px}
.file .tab{position:absolute;top:-1px;right:22px;background:var(--red);color:#f3ede1;
  font-size:11px;letter-spacing:.24em;padding:5px 12px 4px}
.file h2{margin:2px 0 12px;font-size:21px;line-height:1.5;font-weight:700;letter-spacing:.02em;
  max-width:22em}
.ledger{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0;font-size:12.5px}
.ledger dt{color:var(--muted);letter-spacing:.1em}
.ledger dd{margin:0;color:#3d372c}
.state{display:inline-block;border:1.5px solid var(--red);color:var(--red);
  font-size:11px;letter-spacing:.18em;padding:2px 9px;margin-top:12px}

/* ---- 書類（記事） ---- */
.doc .wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.sheet{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;align-items:start;
  background:var(--paper);border:1px solid var(--manila-d);border-left:6px solid var(--manila-d)}
.sheet>.rail{padding:34px 26px 34px 30px;border-right:1px solid var(--rule)}
.sheet>div:last-child{padding:34px 40px 44px}
.rail{position:sticky;top:0;font-size:12.5px;line-height:1.8}
.rail .ledger{grid-template-columns:1fr;gap:0}
.rail .ledger dt{margin-top:12px}
.rail .state{margin-top:16px}
h1.title{font-size:29px;line-height:1.5;margin:0 0 30px;font-weight:700;letter-spacing:.01em;
  max-width:20em;border-bottom:1px solid var(--rule);padding-bottom:22px}
article{max-width:34em}
article h2{font-size:19px;margin:50px 0 16px;font-weight:700;letter-spacing:.04em}
article h2::before{content:"";display:block;width:34px;border-top:3px solid var(--red);
  margin-bottom:12px}
article p{margin:0 0 1.55em}
article hr{display:none}
article figure{margin:34px 0}
article figure img{display:block;width:100%;border:1px solid var(--rule)}
article figcaption{color:var(--muted);font-size:12.5px;line-height:1.75;margin-top:9px;
  padding-left:12px;border-left:2px solid var(--rule)}
article ol,article ul{color:var(--muted);font-size:13.5px;line-height:1.95;padding-left:1.4em}
.back{display:inline-block;margin-top:52px;font-size:13.5px;letter-spacing:.06em}
.follow{background:var(--paper);border:1px solid var(--manila-d);border-left:6px solid var(--red);
  padding:26px 28px 28px;margin:52px 0 0}
.follow-h{margin:0;font-size:17px;font-weight:700;letter-spacing:.04em;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif}
.follow-t{margin:12px 0 20px;font-size:14px;line-height:1.85;color:#4a4336;max-width:32em}
.follow-b{display:inline-block;background:var(--red);color:#f3ede1;text-decoration:none;
  font-size:14.5px;letter-spacing:.08em;padding:12px 26px;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif}
.follow-b:hover,.follow-b:focus-visible{background:#5d1810}
.doc .follow{margin:52px 40px 0}
@media (max-width:760px){.doc .follow{margin:40px 24px 0}}
@media (max-width:560px){.follow{padding:22px 20px 24px}.follow-b{display:block;text-align:center}}
footer.site{margin-top:48px;border-top:1px solid var(--manila-d);padding-block:22px 56px;
  color:var(--muted);font-size:12px;letter-spacing:.14em}

@media (max-width:760px){
  .sheet{grid-template-columns:1fr}
  .sheet>.rail{border-right:0;border-bottom:1px solid var(--rule);padding:24px}
  .sheet>div:last-child{padding:26px 24px 34px}
  .rail{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}
  .rail .ledger{grid-template-columns:auto 1fr;gap:2px 12px}
  .rail .ledger dt{margin-top:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .file{grid-template-columns:96px 1fr}
  .file .shot{padding:12px 0 12px 12px}
  .file .body{padding:12px 14px 16px}
  .file h2{font-size:17px}
  .file .tab{right:12px}
  .name{font-size:21px;letter-spacing:.16em}
  h1.title{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}