/* ═══ 歴史の中を生きる力 — 記事共通スタイル（NCC規格部品込み）═══
   マスター: blog/rakuichi-rakuza.html のインラインCSSから部品化
   palette: 漆黒#0B0908 / 和金#C9A961・#E6C988 / 朱#B5322A / 古紙#EDE3CC */
:root{
  --ink-0:#0B0908; --ink-2:#14110D; --ink-3:#1B1712;
  --gold:#C9A961; --gold-hi:#E6C988; --gold-soft:#9B8447;
  --vermilion:#B5322A; --washi:#EDE3CC; --washi-dim:#C9BFA6;
  --hairline:rgba(201,169,97,0.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Serif JP",serif; color:var(--washi);
  background:
    radial-gradient(ellipse at 50% -10%, #1d1710 0%, transparent 55%),
    linear-gradient(180deg, #100d0a 0%, var(--ink-0) 100%);
  background-color:var(--ink-0);
  line-height:1.95; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold); color:var(--ink-0)}
.washi-noise{
  position:fixed; inset:0; z-index:50; pointer-events:none; opacity:0.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.89  0 0 0 0 0.80  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; border-bottom:1px solid var(--hairline);
  background:rgba(11,9,8,0.7);
}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo .seal{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--gold);
  font-family:"Shippori Mincho B1",serif;font-weight:800;color:var(--gold-hi);font-size:16px;
}
.logo .jp{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:15px;letter-spacing:0.08em}
.back{
  color:var(--gold); text-decoration:none;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:14px; letter-spacing:0.16em;
  border-bottom:1px solid var(--hairline); padding-bottom:2px;
}
.back:hover{color:var(--gold-hi); border-color:var(--gold)}
main{max-width:760px; margin:0 auto; padding:64px 24px 90px}
.crumb{
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:12.5px; letter-spacing:0.2em; color:var(--gold-soft); margin-bottom:26px;
}
.crumb a{color:var(--gold-soft); text-decoration:none}
.crumb a:hover{color:var(--gold-hi)}
.cat-band{
  display:inline-block; padding:4px 12px; background:var(--vermilion); color:var(--washi);
  font-family:"Shippori Mincho B1",serif; font-weight:600; font-size:11.5px; letter-spacing:0.22em;
  margin-bottom:20px;
}
h1{
  font-family:"Shippori Mincho B1",serif; font-weight:800;
  font-size:clamp(27px, 4.6vw, 40px); line-height:1.5; letter-spacing:0.04em;
  margin:0 0 18px;
  background:linear-gradient(180deg, var(--washi) 0%, var(--gold-hi) 70%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  text-wrap:pretty;
}
.meta{
  display:flex; gap:18px; align-items:baseline; flex-wrap:wrap;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:13.5px; letter-spacing:0.16em; color:var(--gold);
  padding-bottom:26px; margin-bottom:36px;
  border-bottom:1px solid var(--hairline);
}
.meta .author{font-family:"Shippori Mincho B1",serif; font-style:normal; color:var(--washi-dim); letter-spacing:0.1em}
.lead{
  font-size:16.5px; color:rgba(237,227,204,0.88); margin:0 0 36px;
  font-weight:500; text-wrap:pretty;
}
.hero-img{
  position:relative; aspect-ratio:16/9; margin:0 0 10px;
  border:1px solid var(--hairline);
  overflow:hidden;
  background:#0a0807;
}
.hero-img img{
  width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  display:block;
  filter:brightness(0.92) contrast(1.04) saturate(0.96);
}
@media (prefers-reduced-motion: no-preference){
  .hero-img img{ animation: heroPan 40s ease-in-out infinite alternate; }
}
@keyframes heroPan{ from{transform:scale(1.0)} to{transform:scale(1.12)} }
.hero-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,9,8,0.18) 0%, transparent 30%, rgba(11,9,8,0.42) 100%);
}
/* 画像404時のフォールバック（onerrorで .noimg 付与） */
figure.hero-img.noimg img{display:none}
figure.hero-img.noimg::before{
  content:"図版準備中 — IMAGE FORTHCOMING"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:monospace; font-size:11px; letter-spacing:0.3em;
  color:rgba(201,169,97,0.45);
  background:
    repeating-linear-gradient(135deg, rgba(201,169,97,0.07) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--ink-3) 0%, var(--ink-0) 100%);
}
.img-credit{
  margin:0 0 40px; text-align:right;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:11.5px; letter-spacing:0.14em; color:var(--gold-soft);
}
.img-credit.hidden{visibility:hidden}
h2{
  font-family:"Shippori Mincho B1",serif; font-weight:700;
  font-size:clamp(20px, 3vw, 25px); letter-spacing:0.06em; line-height:1.6;
  color:var(--gold-hi);
  margin:52px 0 18px; padding-left:16px;
  border-left:2px solid var(--gold);
}
h3{
  font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:17px; letter-spacing:0.06em; color:var(--washi);
  margin:34px 0 12px;
}
p{margin:0 0 22px; font-size:15.5px; color:rgba(237,227,204,0.84); text-wrap:pretty}
strong{color:var(--gold-hi); font-weight:600}
article a{color:var(--gold-hi); text-decoration:none; border-bottom:1px solid var(--hairline)}
article a:hover{border-color:var(--gold)}
blockquote{
  margin:38px auto; padding:30px 34px;
  background:rgba(237,227,204,0.04);
  border:1px solid rgba(201,169,97,0.14);
  font-family:"Shippori Mincho B1",serif;
  font-size:16px; color:var(--washi); letter-spacing:0.1em;
  position:relative;
}
blockquote::before{
  content:"「"; position:absolute; top:-18px; left:14px;
  font-family:"Shippori Mincho B1",serif; font-size:40px; color:var(--gold);
  opacity:0.7;
}
@media (min-width:700px){
  blockquote.vert-quote{
    writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
    min-height:240px; max-height:340px;
    display:flex; align-items:flex-start;
    line-height:2.2; padding:34px 40px;
    margin-left:auto; margin-right:auto;
  }
  blockquote.vert-quote cite{ margin-top:0; margin-left:18px; letter-spacing:0.3em; }
}
blockquote cite{
  display:block; margin-top:10px;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:12.5px; color:var(--gold); letter-spacing:0.18em;
}

/* ══ NCC規格部品 ══ */
/* TL;DR — 三行で要点（金枠） */
.tldr{
  margin:0 0 40px; padding:24px 28px 20px;
  border:1px solid rgba(201,169,97,0.45);
  background:rgba(201,169,97,0.06);
  position:relative;
}
.tldr::before{
  content:"三行で要点"; position:absolute; top:-11px; left:20px;
  padding:0 10px; background:var(--ink-0);
  font-family:"Shippori Mincho B1",serif; font-weight:700;
  font-size:12.5px; letter-spacing:0.22em; color:var(--gold-hi);
}
.tldr ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.tldr li{
  font-size:14.5px; color:rgba(237,227,204,0.88); line-height:1.8;
  padding-left:20px; position:relative;
}
.tldr li::before{
  content:"—"; position:absolute; left:0; color:var(--gold);
}
/* 情報ボックス */
.ibox{
  margin:30px 0; padding:20px 24px 14px;
  border:1px solid var(--hairline);
  background:rgba(20,16,12,0.5);
  position:relative;
}
.ibox .ibox-t{
  display:flex; gap:9px; align-items:center;
  margin:0 0 10px;
  font-family:"Shippori Mincho B1",serif; font-weight:700;
  font-size:14px; letter-spacing:0.12em; color:var(--gold-hi);
}
.ibox p{font-size:14px; margin-bottom:12px}
.ibox p:last-child{margin-bottom:6px}
/* 警告ボックス */
.warn{
  margin:30px 0; padding:20px 24px 14px;
  border:1px solid rgba(181,50,42,0.5);
  background:rgba(181,50,42,0.08);
}
.warn .ibox-t{color:#E8A49E}
.warn p{font-size:14px; margin-bottom:12px}
.warn p:last-child{margin-bottom:6px}
/* 比較表 */
.tbl-wrap{margin:34px 0; overflow-x:auto; -webkit-overflow-scrolling:touch}
table.cmp{
  width:100%; border-collapse:collapse; min-width:520px;
  font-size:13.5px;
}
table.cmp caption{
  caption-side:top; text-align:left; padding-bottom:10px;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:12.5px; letter-spacing:0.18em; color:var(--gold-soft);
}
table.cmp th{
  font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:13px; letter-spacing:0.1em; color:var(--gold-hi);
  text-align:left; padding:11px 14px;
  border-bottom:1px solid rgba(201,169,97,0.4);
  background:rgba(201,169,97,0.06);
}
table.cmp td{
  padding:11px 14px; color:rgba(237,227,204,0.84);
  border-bottom:1px solid var(--hairline);
  vertical-align:top; line-height:1.7;
}
table.cmp td:first-child{
  font-family:"Shippori Mincho B1",serif; font-weight:600; color:var(--washi);
  white-space:nowrap;
}
/* SVG図解 */
figure.svg-fig{margin:38px 0; padding:0}
figure.svg-fig svg{display:block; width:100%; height:auto; border:1px solid var(--hairline); background:rgba(11,9,8,0.5); cursor:zoom-in; transition:border-color 200ms}
figure.svg-fig:hover svg{border-color:rgba(201,169,97,0.45)}
figure.svg-fig figcaption{
  margin-top:10px; text-align:center;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:12.5px; letter-spacing:0.2em; color:var(--gold-soft);
}
figure.svg-fig figcaption::after{
  content:"（クリックで拡大）"; margin-left:8px;
  font-size:11px; opacity:0.75; letter-spacing:0.1em;
}
/* 図解ライトボックス */
.fig-lightbox{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  padding:4vmin;
  background:rgba(5,4,3,0.92);
  backdrop-filter:blur(10px);
  opacity:0; pointer-events:none;
  transition:opacity 250ms ease;
  cursor:zoom-out;
}
.fig-lightbox.open{opacity:1; pointer-events:auto}
.fig-lightbox .box{
  width:min(1280px, 96vw);
  max-height:92vh;
  display:flex; flex-direction:column; gap:12px;
}
.fig-lightbox svg{
  width:100%; height:auto; max-height:80vh;
  border:1px solid rgba(201,169,97,0.4);
  background:#0B0908;
  box-shadow:0 30px 90px rgba(0,0,0,0.8);
  transform:scale(0.96);
  transition:transform 280ms cubic-bezier(0.22,1,0.36,1);
}
.fig-lightbox.open svg{transform:scale(1)}
.fig-lightbox .cap{
  text-align:center;
  font-family:"Cormorant Garamond","Noto Serif JP",serif; font-style:italic;
  font-size:13px; letter-spacing:0.18em; color:var(--gold-soft);
}
.fig-lightbox .close-hint{
  position:absolute; top:18px; right:24px;
  font-family:"Shippori Mincho B1",serif; font-size:12px;
  letter-spacing:0.18em; color:var(--washi-dim);
  border:1px solid var(--hairline); padding:7px 14px;
  background:rgba(20,16,12,0.6);
}
/* 筆者の視点（独自分析） */
.analysis{
  margin:44px 0 0; padding:26px 28px;
  border:1px solid var(--hairline);
  background:rgba(237,227,204,0.035);
  position:relative;
}
.analysis::before{
  content:"筆者の視点"; position:absolute; top:-11px; left:20px;
  padding:0 10px; background:var(--ink-0);
  font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:12.5px; letter-spacing:0.22em; color:var(--vermilion);
}
.analysis p{font-size:14.5px}
.analysis p:last-child{margin-bottom:0}
/* 現代への教訓 */
.lesson{
  margin:44px 0 0; padding:26px 28px;
  border:1px solid var(--hairline);
  background:rgba(20,16,12,0.5);
  position:relative;
}
.lesson::before{
  content:"現代への教訓"; position:absolute; top:-11px; left:20px;
  padding:0 10px; background:var(--ink-0);
  font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:12.5px; letter-spacing:0.22em; color:var(--gold);
}
.lesson p{margin:0; font-size:14.5px}
/* Next Steps */
.next-steps{
  margin:44px 0 0; padding:26px 28px 18px;
  border:1px solid var(--hairline);
  background:rgba(20,16,12,0.5);
  position:relative;
}
.next-steps::before{
  content:"Next Steps — 今日できること"; position:absolute; top:-11px; left:20px;
  padding:0 10px; background:var(--ink-0);
  font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:12.5px; letter-spacing:0.18em; color:var(--gold);
}
.next-steps ol{margin:0; padding-left:0; list-style:none; counter-reset:ns}
.next-steps li{
  counter-increment:ns;
  display:flex; gap:14px; align-items:baseline;
  padding:10px 0; font-size:14.5px;
  border-bottom:1px solid rgba(201,169,97,0.1);
}
.next-steps li:last-child{border-bottom:none}
.next-steps li::before{
  content:counter(ns);
  flex-shrink:0; width:24px; height:24px;
  display:grid; place-items:center; align-self:center;
  border:1px solid var(--gold); color:var(--gold-hi);
  font-family:"Cormorant Garamond",serif; font-size:12px;
}
.next-steps .t{
  margin-left:auto; flex-shrink:0;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:11.5px; letter-spacing:0.12em; color:var(--gold-soft);
  white-space:nowrap;
}
/* 出典 */
.sources{
  margin:52px 0 0; padding-top:26px;
  border-top:1px solid var(--hairline);
}
.sources h2{margin-top:0; border-left:none; padding-left:0; font-size:17px}
.sources ol{margin:0; padding-left:22px}
.sources li{
  font-size:13px; color:var(--washi-dim); line-height:1.9; margin-bottom:6px;
}
.sources a{color:var(--gold-hi); text-decoration:none; border-bottom:1px solid var(--hairline)}
.sources a:hover{border-color:var(--gold)}
.disclaimer-note{
  margin:18px 0 0; font-size:12px; color:var(--gold-soft);
  font-family:"Cormorant Garamond","Noto Serif JP",serif; font-style:italic;
  letter-spacing:0.06em;
}

footer{
  border-top:1px solid var(--hairline);
  padding:36px 24px; text-align:center;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:12.5px; letter-spacing:0.22em; color:var(--gold-soft);
}
footer a{color:var(--gold); text-decoration:none}

/* ══ 読書体験の演出 ══ */
.read-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) 100%);
  box-shadow:0 0 8px rgba(201,169,97,0.5);
  z-index:60;
}
.book-frame{position:fixed; inset:10px; pointer-events:none; z-index:55}
.book-frame span{position:absolute; width:26px; height:26px; border:1px solid rgba(201,169,97,0.35)}
.book-frame .tl{top:0; left:0; border-right:none; border-bottom:none}
.book-frame .tr{top:0; right:0; border-left:none; border-bottom:none}
.book-frame .bl{bottom:0; left:0; border-right:none; border-top:none}
.book-frame .br{bottom:0; right:0; border-left:none; border-top:none}
.lead::first-letter{
  font-family:"Shippori Mincho B1",serif; font-weight:800;
  font-size:3.1em; line-height:0.9;
  float:left; margin:6px 12px 0 0; padding:6px 10px;
  color:var(--washi);
  border:1px solid var(--vermilion);
  background:rgba(181,50,42,0.16);
  text-shadow:0 0 14px rgba(181,50,42,0.4);
}
h2 .ord{
  display:inline-block; margin-right:14px;
  font-family:"Cormorant Garamond",serif; font-weight:600; font-style:italic;
  color:transparent; -webkit-text-stroke:1px rgba(201,169,97,0.65);
  font-size:1.25em; vertical-align:-2px;
}
.sources h2 .ord{display:none}
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0; transform:translateY(26px); transition:opacity 700ms ease-out, transform 700ms ease-out}
  .rv.in{opacity:1; transform:translateY(0)}
}

/* ══ 理解度チェック ══ */
.quiz-sec{
  margin:44px 0 0;
  padding:26px 28px;
  background:rgba(20,16,12,0.55);
  border:1px solid var(--hairline);
  border-radius:4px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(201,169,97,0.06);
}
.quiz-sec .qz-head{
  display:flex; gap:12px; align-items:center; margin-bottom:6px;
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:12px; letter-spacing:0.26em; color:var(--gold);
}
.quiz-sec .qz-head .ja{
  font-family:"Shippori Mincho B1",serif; font-style:normal; font-weight:700;
  color:var(--washi); font-size:17px; letter-spacing:0.1em;
}
.quiz-sec .qz-sub{font-size:12.5px; color:var(--washi-dim); margin:0 0 20px}
.qz-item{margin-bottom:26px}
.qz-item:last-of-type{margin-bottom:0}
.qz-item .qz-q{
  font-family:"Shippori Mincho B1",serif; font-weight:600;
  font-size:15.5px; letter-spacing:0.05em; line-height:1.7;
  color:var(--washi); margin:0 0 12px;
}
.qz-item .qz-q .no{
  font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500;
  color:var(--gold); margin-right:10px; letter-spacing:0.1em;
}
.qz-opts{display:flex; flex-direction:column; gap:8px}
.qz-opt{
  display:flex; align-items:center; gap:13px; text-align:left;
  padding:11px 15px;
  border:1px solid var(--hairline);
  background:rgba(11,9,8,0.45);
  color:var(--washi); cursor:pointer;
  font-family:"Noto Serif JP",serif; font-size:13.5px; letter-spacing:0.03em;
  transition:all 200ms; border-radius:0;
}
.qz-opt:hover{border-color:var(--gold); background:rgba(201,169,97,0.06)}
.qz-opt .key{
  width:24px; height:24px; flex-shrink:0;
  display:grid; place-items:center;
  border:1px solid var(--gold); color:var(--gold-hi);
  font-family:"Cormorant Garamond",serif; font-weight:600; font-size:12px;
}
.qz-opt.correct{border-color:var(--gold); background:rgba(201,169,97,0.16); color:var(--gold-hi)}
.qz-opt.correct .key{background:var(--gold); color:var(--ink-0)}
.qz-opt.wrong{border-color:var(--vermilion); background:rgba(181,50,42,0.13)}
.qz-opt.wrong .key{background:var(--vermilion); border-color:var(--vermilion); color:var(--washi)}
.qz-opt:disabled{cursor:default}
.qz-fb{
  margin:10px 0 0; min-height:1em;
  font-size:12.5px; color:var(--gold); letter-spacing:0.06em;
  font-family:"Noto Serif JP",serif; line-height:1.7;
}

/* ══ X フォロー ══ */
.x-follow{ margin:44px 0 0; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:22px 26px;
  background:rgba(20,16,12,0.55);
  border:1px solid var(--hairline);
  border-radius:4px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(201,169,97,0.06);
}
.x-follow .avatar{
  width:54px; height:54px; flex-shrink:0;
  border:1px solid var(--gold); display:grid; place-items:center;
  font-family:"Shippori Mincho B1",serif; font-weight:800;
  color:var(--gold-hi); font-size:22px; position:relative;
}
.x-follow .avatar::before{content:""; position:absolute; inset:3px; border:1px solid rgba(201,169,97,0.4)}
.x-follow .who{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.x-follow .nm{
  font-family:"Shippori Mincho B1",serif; font-weight:700;
  font-size:15.5px; letter-spacing:0.06em; color:var(--washi);
}
.x-follow .at{
  font-family:"Cormorant Garamond","Noto Serif JP",serif; font-style:italic;
  font-size:13px; letter-spacing:0.14em; color:var(--gold-soft);
}
.x-follow .btn-x{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 20px;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  color:var(--ink-0); text-decoration:none;
  font-family:"Shippori Mincho B1",serif; font-weight:700;
  font-size:13px; letter-spacing:0.1em;
  box-shadow:0 4px 18px rgba(201,169,97,0.22), inset 0 1px 0 rgba(255,255,255,0.3);
  transition:transform 200ms, box-shadow 200ms;
  border-bottom:none;
}
.x-follow .btn-x:hover{transform:translateY(-2px); box-shadow:0 8px 28px rgba(181,50,42,0.38)}
.x-follow .btn-x .xmark{font-family:"JetBrains Mono",monospace; font-weight:400; font-size:15px}
@media (max-width:640px){
  .x-follow{flex-direction:column; align-items:flex-start}
  .x-follow .btn-x{align-self:stretch; justify-content:center}
}

/* ══ 読了の落款 ══ */
.fin{ display:flex; justify-content:center; padding:54px 0 10px; }
.fin .stamp{
  width:92px; height:92px; display:grid; place-items:center;
  border:3px solid var(--vermilion);
  background:rgba(181,50,42,0.14);
  color:var(--vermilion); position:relative;
  transform:rotate(-6deg) scale(2.4); opacity:0; filter:blur(4px);
  transition:transform 480ms cubic-bezier(0.34,1.3,0.45,1), opacity 380ms ease, filter 380ms ease;
}
.fin .stamp::before{content:""; position:absolute; inset:5px; border:1px solid rgba(181,50,42,0.6)}
.fin.stamped .stamp{transform:rotate(-6deg) scale(1); opacity:1; filter:blur(0)}
.fin .stamp .k{
  font-family:"Shippori Mincho B1",serif; font-weight:800;
  font-size:26px; line-height:1.25; text-align:center; letter-spacing:0.1em;
}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important}
  .fin .stamp{transform:rotate(-6deg) scale(1); opacity:1; filter:none}
}