/* =========================================================================
   書籍サイト 共通CSS site.css v0.2（v0.1 に 写真・投稿・年表・左右並び・冒頭の大きな写真 を追加）
   色の線: グレーは無彩色（R=G=B）だけ。線 #D9D9D9／明るい箱 #F2F2F2／背景 #FFFFFF／
           本文 #1A1A1A／薄い文字 #595959。生成り・ベージュ系は使わない。
   主色 --main・差し色 --accent は site.json → {{theme}} が :root に流し込む（下は保険の既定値）。
   組版: 見出し＝明朝・本文＝ゴシック。本文 17px・行間 1.8・1行 38字（--measure）。
   ========================================================================= */

:root{
  --main:#1F3B5C;          /* 保険の既定値。実際は {{theme}} が上書き */
  --accent:#9E4F1A;
  --bg:#FFFFFF;
  --box:#F2F2F2;           /* 明るい箱 */
  --line:#D9D9D9;          /* 基準の線 */
  --line-strong:#8C8C8C;   /* 濃い線（表の頭など） */
  --text:#1A1A1A;
  --muted:#595959;
  --on-dark:#FFFFFF;
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","游明朝","Yu Mincho",YuMincho,"Noto Serif JP","HGS明朝E",serif;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","游ゴシック","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
  --measure:38rem;         /* 1行の長さ 34〜40字（rem＝17px 基準。em だと見出しの中で伸びるので rem） */
  --gutter:20px;           /* 画面の両端の余白（スマホ） */
  --wrap:1080px;           /* ヘッダー・フッターの最大幅 */
  --radius:4px;
}

/* ---------- 土台 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:17px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:1rem;line-height:1.8;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img,video,iframe,svg{max-width:100%;}
img{height:auto;display:block;}
a{color:var(--main);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px;}
::selection{background:var(--main);color:var(--on-dark);}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
@media (min-width:760px){ :root{--gutter:32px;} }

/* スキップリンク（Tab で最初に現れる） */
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:100;
  background:var(--main);color:var(--on-dark);padding:.6em 1em;border-radius:var(--radius);
  text-decoration:none;font-weight:700;
}
.skip:focus{top:8px;}

/* ---------- 見出し（明朝） ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;line-height:1.5;letter-spacing:.04em;
  font-feature-settings:"palt";color:var(--text);
}
h1{font-size:clamp(1.75rem,5vw,2.4rem);margin:1.2em 0 .8em;}
h2{font-size:clamp(1.4rem,3.6vw,1.75rem);margin:2.6em 0 .9em;padding-top:.6em;border-top:1px solid var(--line);}
h2:first-child{margin-top:1em;border-top:0;padding-top:0;}
h3{font-size:1.2rem;margin:2em 0 .7em;}
h4{font-size:1.05rem;margin:1.6em 0 .5em;}
h1 + p,h2 + p,h3 + p{margin-top:0;}

/* ---------- ヘッダー ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;flex-direction:column;gap:2px;min-width:0;}
.site-name{
  font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:.12em;
  color:var(--main);text-decoration:none;line-height:1.3;
}
.site-name:hover{text-decoration:underline;}
.tagline{margin:0;font-size:.8rem;color:var(--muted);letter-spacing:.06em;line-height:1.5;}

/* ナビ本体 */
.nav-toggle{flex:1 1 auto;}
.nav-button{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;
  font-size:.95rem;font-weight:700;color:var(--main);
  border:1px solid var(--line);border-radius:var(--radius);padding:.5em .9em;background:var(--bg);
  user-select:none;
}
.nav-button::-webkit-details-marker{display:none;}
.nav-button::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.15em);transition:transform .2s;}
.nav-toggle[open] .nav-button::after{transform:rotate(-135deg) translateY(-.1em);}
.nav-button:hover{background:var(--box);}
.gnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px;}
.gnav a{
  display:inline-block;padding:.45em 0;font-size:.95rem;letter-spacing:.06em;
  color:var(--text);text-decoration:none;border-bottom:2px solid transparent;
}
.gnav a:hover{border-bottom-color:var(--line-strong);}
.gnav a[aria-current="page"]{color:var(--main);font-weight:700;border-bottom-color:var(--accent);}

/* 広い画面: 開閉ボタンを隠し、横一列に */
@media (min-width:760px){
  .nav-toggle{flex:0 0 auto;}
  .nav-button{display:none;}
  .nav-toggle:not([open]) .gnav{display:block;} /* 念のため（JSが閉じた直後の幅変更対策） */
  .gnav ul{justify-content:flex-end;}
}
/* 狭い画面: ボタンで開く縦メニュー */
@media (max-width:759px){
  .nav-toggle{flex:0 0 100%;order:3;}
  .header-inner{align-items:flex-start;}
  .nav-button{margin-top:4px;}
  .gnav{margin-top:8px;border-top:1px solid var(--line);}
  .gnav ul{flex-direction:column;gap:0;}
  .gnav li{border-bottom:1px solid var(--line);}
  .gnav a{display:block;padding:.75em 4px;border-bottom:0;}
  .gnav a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--accent);padding-left:12px;}
}

/* ---------- パンくず ---------- */
.crumbs{font-size:.85rem;color:var(--muted);padding:12px 0 0;line-height:1.7;max-width:var(--measure);margin:0 auto;} /* 本文の読む幅に揃える */
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--main);}
.crumbs [aria-current="page"]{color:var(--text);}

/* ---------- 本文の器（読む幅＋全幅の帯） ----------
   main は3列グリッド。普通の要素は中央の読む幅（--measure）に入り、
   .band など「全幅」の部品だけ外側の列まで広がる。負のマージンを使わないので横はみ出しが出ない。 */
.page{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [content-start] min(var(--measure), calc(100% - 2*var(--gutter)))
    [content-end] minmax(var(--gutter),1fr)
    [full-end];
  padding:1.5rem 0 4rem;
}
.page > *{grid-column:content;min-width:0;}
.page > .band,.page > .full{grid-column:full;}
.page > .band > *,.page > .full > *{max-width:var(--measure);margin-left:auto;margin-right:auto;}
.page > .band > .cards,.page > .full > .cards{max-width:calc(var(--measure) + 12em);}
.page > .cards.wide,.page > .media.wide{grid-column:content;max-width:none;}
@media (min-width:1024px){
  .page > .cards.wide,.page > .media.wide{width:min(100% + 12em, calc(100vw - 2*var(--gutter)));justify-self:center;}
}
.page:focus{outline:none;}

p{margin:0 0 1.4em;}
ul,ol{margin:0 0 1.4em;padding-left:1.4em;}
li{margin:.25em 0;}
li::marker{color:var(--main);}
strong{font-weight:700;}
em{font-style:normal;font-weight:700;text-emphasis:filled sesame;-webkit-text-emphasis:filled sesame;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--box);padding:.1em .4em;border-radius:3px;}
pre{background:var(--box);border:1px solid var(--line);padding:1em;overflow-x:auto;border-radius:var(--radius);}
pre code{background:none;padding:0;}
hr{border:0;border-top:1px solid var(--line);margin:2.5em 0;}
blockquote{
  margin:1.6em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--main);
  font-family:var(--serif);color:var(--text);
}
blockquote p:last-child{margin-bottom:0;}
figure{margin:1.6em 0;}
figcaption{font-size:.85rem;color:var(--muted);margin-top:.5em;}

/* 表: 幅が足りなければ表の中だけ横に流れる（ページははみ出さない） */
table{border-collapse:collapse;width:100%;margin:1.6em 0;font-size:.95rem;display:block;overflow-x:auto;}
thead{background:var(--box);}
th,td{text-align:left;vertical-align:top;padding:.65em .8em;border-bottom:1px solid var(--line);}
th{font-weight:700;border-bottom:2px solid var(--line-strong);}

/* ---------- 部品 ---------- */

/* .lead 冒頭の大きめの一文（明朝・主色） */
.lead{
  font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.4rem);line-height:1.9;
  color:var(--main);margin:0 0 1.6em;letter-spacing:.03em;
}

/* .bigq 大きな問い。1ページの中心に1つ */
.bigq{
  font-family:var(--serif);font-size:clamp(1.5rem,4.5vw,2.2rem);line-height:1.6;letter-spacing:.04em;
  margin:2.2em 0;padding:1em 0 1em 1em;border-left:4px solid var(--accent);color:var(--text);
}
.bigq::before{content:"問い";display:block;font-family:var(--sans);font-size:.8rem;letter-spacing:.3em;color:var(--accent);margin-bottom:.6em;}

/* .cards / .card カード並び（内容が3枚なら3列、狭ければ自動で1列） */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:16px;margin:1.6em 0;list-style:none;padding:0;}
.cards.two,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:760px){ .cards.four{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:480px){ .cards.two,.cards.four{grid-template-columns:1fr;} }
.card{
  background:var(--box);border:1px solid var(--line);border-radius:var(--radius);padding:1.2em 1.2em 1.1em;
  display:flex;flex-direction:column;gap:.4em;min-width:0;
}
.card > :first-child{margin-top:0;}
.card > :last-child{margin-bottom:0;}
.card h3,.card h2{font-size:1.1rem;margin:0 0 .2em;color:var(--main);}
.card p{margin:0;font-size:.95rem;line-height:1.75;}
.card .num{font-family:var(--serif);font-size:2rem;line-height:1;color:var(--accent);letter-spacing:.02em;}
a.card{text-decoration:none;color:inherit;}
a.card:hover{border-color:var(--main);}
a.card .go{margin-top:auto;color:var(--main);font-size:.9rem;font-weight:700;}

/* .band 主色の帯（全幅）。中の文字は白 */
.band{background:var(--main);color:var(--on-dark);padding:2.4em var(--gutter);margin:2.4em 0;}
.band h1,.band h2,.band h3,.band h4,.band .lead,.band .bigq{color:var(--on-dark);border-color:rgba(255,255,255,.35);}
.band h2{border-top:0;padding-top:0;margin-top:0;}
.band a{color:var(--on-dark);}
.band .bigq::before{color:var(--on-dark);}
.band :focus-visible{outline-color:var(--on-dark);}
.band > :last-child{margin-bottom:0;}
.band .card{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);}
.band .card h3,.band .card .num,.band .card .go{color:var(--on-dark);}
.band .cta{background:var(--on-dark);color:var(--main);border-color:var(--on-dark);}

/* .cta 外部への行き先ボタン */
.cta{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--accent);color:var(--on-dark);text-decoration:none;font-weight:700;letter-spacing:.06em;
  padding:.85em 1.5em;border-radius:var(--radius);border:2px solid var(--accent);
  margin:.4em .6em 1em 0;transition:transform .2s,background .2s;
}
.cta::after{content:"→";font-weight:400;transition:transform .2s;}
.cta:hover{transform:translateY(-2px);}
.cta:hover::after{transform:translateX(3px);}
.cta.prev::after{content:none;}
.cta.prev::before{content:"←";font-weight:400;transition:transform .2s;}
.cta.prev:hover::before{transform:translateX(-3px);}
.cta.ghost{background:transparent;color:var(--main);border-color:var(--main);}
.cta.ghost:hover{background:var(--main);color:var(--on-dark);}
.cta-row{display:flex;flex-wrap:wrap;gap:0 4px;margin:1.6em 0;}
@media (max-width:480px){ .cta{width:100%;justify-content:center;margin-right:0;} }

/* .media 動く絵・動画の枠（16:9） */
.media{
  margin:1.8em 0;background:var(--box);border:1px solid var(--line);border-radius:var(--radius);
  aspect-ratio:16/9;overflow:hidden;position:relative;
}
.media > iframe,.media > video,.media > img,.media > object{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;}
.media > video{background:#000000;}
.media + .source{margin-top:-1.2em;}

/* .source 出典の小さな注記 */
.source{font-size:.85rem;color:var(--muted);line-height:1.7;margin:0 0 1.6em;padding-left:1em;border-left:2px solid var(--line);}
.source a{color:var(--muted);}

/* .draft-banner 下書きの印（--preview のときビルド器が入れる） */
.draft-banner{
  background:var(--box);color:var(--text);border:2px dashed var(--accent);border-radius:var(--radius);
  padding:.7em 1em;margin:0 0 1.4em;font-weight:700;letter-spacing:.04em;
}
.draft-banner::before{content:"⚠ ";color:var(--accent);}

/* ---------- v0.2 追加部品 ----------
   .wide   … 読む幅より少し広げる（広い画面だけ）。.photo .split .posts .timeline のどれにも付けられる
   .hero   … トップ冒頭。大きな写真＋見出し＋一言。本文の先頭に置くと全幅になる
   .photo  … 写真と短い説明（figure）
   .posts  … 当時の投稿を「日付＋本文の抜粋」で並べる（引用だと分かる見た目）
   .timeline … 年表（縦の流れ）
   .split  … 写真と文章の左右並び（狭い画面では縦）
   写真の切り抜き位置: img に .pos-top / .pos-bottom を付けると上寄せ・下寄せで切る */

.page > .wide{grid-column:content;max-width:none;}
@media (min-width:1024px){
  .page > .wide{width:min(100% + 12em, calc(100vw - 2*var(--gutter)));justify-self:center;}
}
img.pos-top{object-position:50% 12%;}
img.pos-bottom{object-position:50% 88%;}

/* .hero 冒頭の大きな写真。既定は「文字｜写真」の左右2分割、狭い画面は 写真→文字 の縦積み */
.hero{
  background:var(--box);color:var(--text);
  border-bottom:1px solid var(--line);
  margin:0 0 1.5rem;padding:0;
}
.page > .hero{grid-column:full;}
.page > .hero:first-child{margin-top:-1.5rem;}
.hero-inner{
  max-width:var(--wrap);margin:0 auto;padding:1.6rem var(--gutter) 2rem;
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem 2.5rem;align-items:center;
}
.hero-photo{margin:0;order:-1;min-width:0;}
.hero-photo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--bg);
}
.hero-photo figcaption{font-size:.8rem;color:var(--muted);margin-top:.5em;line-height:1.6;}
.hero-text{min-width:0;}
.hero-text > :first-child{margin-top:0;}
.hero-text > :last-child{margin-bottom:0;}
.hero-kicker{
  margin:0 0 .6em;font-size:.82rem;letter-spacing:.3em;color:var(--accent);font-weight:700;
}
.hero h1,.hero .hero-title{font-size:clamp(1.9rem,4.8vw,2.9rem);line-height:1.35;margin:0 0 .5em;padding:0;border:0;color:var(--main);}
.hero-lead{
  font-family:var(--serif);font-size:clamp(1.05rem,2.2vw,1.25rem);line-height:1.9;letter-spacing:.03em;
  margin:0 0 1.2em;color:var(--text);
}
.hero .cta-row{margin:0;}
.hero .cta{margin-bottom:.4em;}
@media (min-width:760px){
  .hero-inner{grid-template-columns:minmax(0,11fr) minmax(0,9fr);padding-top:2.6rem;padding-bottom:3rem;}
  .hero-photo{order:0;}
}
/* .hero.overlay 写真の上に文字を載せる版。文字は白、下から暗くして読みやすさを保つ */
.hero.overlay{position:relative;background:#000000;color:var(--on-dark);border-bottom:0;overflow:hidden;}
.hero.overlay .hero-photo{position:absolute;inset:0;margin:0;order:0;z-index:0;}
.hero.overlay .hero-photo img{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;}
.hero.overlay::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.12) 100%);
}
.hero.overlay .hero-inner{
  grid-template-columns:minmax(0,1fr);align-items:end;
  min-height:clamp(22rem, 62vh, 34rem);padding-top:3rem;padding-bottom:2.4rem;
}
.hero.overlay .hero-text{position:relative;z-index:2;max-width:var(--measure);}
.hero.overlay h1,.hero.overlay .hero-title,.hero.overlay .hero-lead,.hero.overlay .hero-kicker{color:var(--on-dark);}
.hero.overlay .hero-lead{text-shadow:0 1px 2px rgba(0,0,0,.6);}
.hero.overlay .hero-photo figcaption{
  position:absolute;right:var(--gutter);top:.6rem;margin:0;z-index:2;
  color:rgba(255,255,255,.85);font-size:.72rem;text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.hero.overlay .cta.ghost{color:var(--on-dark);border-color:var(--on-dark);}
.hero.overlay .cta.ghost:hover{background:var(--on-dark);color:var(--main);}
.hero.overlay :focus-visible{outline-color:var(--on-dark);}

/* .photo 写真と短い説明 */
.photo{margin:1.8em 0;}
.photo img{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--box);}
.photo.cover img{aspect-ratio:3/2;object-fit:cover;}
.photo figcaption{
  font-size:.85rem;color:var(--muted);line-height:1.7;margin-top:.6em;padding-top:.5em;
  border-top:1px solid var(--line);
}
.photo.small{max-width:24rem;}

/* .posts / .post 当時の投稿を「日付＋本文の抜粋」で並べる */
.posts{list-style:none;margin:1.8em 0;padding:0;display:grid;gap:1.2rem;}
.posts.two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:759px){ .posts.two{grid-template-columns:1fr;} }
.post{
  position:relative;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--main);
  border-radius:var(--radius);padding:1.1em 1.3em 1.1em 3em;min-width:0;
}
.post::before{
  content:"\201C";position:absolute;left:.55em;top:.35em;
  font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--accent);
}
.post-date{display:block;font-size:.82rem;letter-spacing:.08em;color:var(--muted);margin:0 0 .5em;font-weight:700;}
.post-body{margin:0;padding:0;border:0;font-family:var(--serif);font-size:.98rem;line-height:1.85;color:var(--text);}
.post-body p{margin:0 0 .8em;}
.post-body p:last-child{margin-bottom:0;}
.post-body p.more{color:var(--muted);font-size:.9rem;}
.post .source{border:0;padding:0;margin:.7em 0 0;font-size:.8rem;}
.post .source a{color:var(--muted);}

/* .timeline 年表（縦の流れ） */
.timeline{list-style:none;margin:1.8em 0 1.8em .4em;padding:0 0 0 1.5em;border-left:2px solid var(--line);}
.timeline li{position:relative;margin:0 0 1.8em;padding:0;min-width:0;}
.timeline li:last-child{margin-bottom:.4em;}
.timeline li::before{
  content:"";position:absolute;left:calc(-1.5em - 8px);top:.55em;
  width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--line);
}
.timeline li.now::before{background:var(--main);width:16px;height:16px;left:calc(-1.5em - 10px);top:.45em;}
.tl-year{
  display:block;font-family:var(--serif);font-size:1.4rem;line-height:1.3;letter-spacing:.06em;
  color:var(--main);font-weight:600;
}
.timeline .now .tl-year{color:var(--accent);}
.tl-body > :first-child{margin-top:.2em;}
.tl-body > :last-child{margin-bottom:0;}
.timeline h3{font-size:1.1rem;margin:.1em 0 .3em;}
.timeline p{margin:0 0 .6em;font-size:.95rem;}
.timeline .photo{margin:.8em 0 0;max-width:20rem;}
@media (min-width:600px){
  .timeline li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 1em;align-items:start;}
  .tl-year{padding-top:.1em;}
  .tl-body > :first-child{margin-top:0;}
}

/* .split 写真と文章の左右並び（狭い画面では縦。写真が上） */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem 2rem;align-items:center;margin:2em 0;}
.split > .photo{margin:0;}
.split-text{min-width:0;}
.split-text > :first-child{margin-top:0;}
.split-text > :last-child{margin-bottom:0;}
.split-text h2{border-top:0;padding-top:0;}
.split-text h3{margin-top:0;}
@media (min-width:600px){
  .split{grid-template-columns:minmax(0,2fr) minmax(0,3fr);}
  .split.flip > .photo{order:2;}
  .split.half{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- フッター ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--box);margin-top:2rem;}
.footer-inner{padding-top:1.8rem;padding-bottom:2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-start;justify-content:space-between;}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4em 1.8em;}
.footer-links a{font-size:.9rem;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-strong);padding:.2em 0;display:inline-block;}
.footer-links a:hover{color:var(--main);border-bottom-color:var(--main);}
.copyright{margin:0;font-size:.85rem;color:var(--muted);flex:0 0 100%;}

/* ---------- 動きを減らす設定の人 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .cta:hover{transform:none;}
}

/* ---------- 印刷（最低限） ---------- */
@media print{
  body{font-size:11pt;color:#000000;background:#FFFFFF;}
  .skip,.nav-toggle,.site-footer .footer-nav,.draft-banner{display:none !important;}
  .site-header,.site-footer{border:0;background:none;}
  .page{display:block;padding:0;}
  .band{background:none;color:#000000;border:1px solid #000000;}
  .band h1,.band h2,.band h3,.band .lead,.band .bigq,.band a{color:#000000;}
  .cta{background:none;color:#000000;border:1px solid #000000;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#595959;}
  .media{aspect-ratio:auto;}
  h1,h2,h3{page-break-after:avoid;}
  /* v0.2 の部品 */
  .hero,.hero.overlay{background:none;color:#000000;border:0;}
  .hero.overlay::before{display:none;}
  .hero.overlay .hero-photo{position:static;}
  .hero.overlay .hero-photo img{height:auto;aspect-ratio:4/3;}
  .hero.overlay .hero-inner{min-height:0;}
  .hero h1,.hero .hero-title,.hero .hero-lead,.hero .hero-kicker,.hero.overlay figcaption{color:#000000;text-shadow:none;position:static;}
  .hero-photo img,.photo img{border:1px solid #000000;max-height:60vh;object-fit:contain;}
  .post,.timeline li,.split,.photo{page-break-inside:avoid;}
  .post{border-color:#000000;}
  .timeline{border-left-color:#000000;}
  .timeline li::before{background:#000000;box-shadow:none;}
}