/* 歴史IFアーカイブ style.css v1
   地: 生成り #EFE7D6 / 生成り明 #F6F0E1 / 墨 #26221E / エンジ #A5262C
   役割色はサイト用シェード（生成り地で読める濃さ）を使う */
:root{
  --paper:#EFE7D6; --paper2:#F6F0E1; --ink:#26221E; --enji:#A5262C;
  --gold:#7A5E12; --rose:#B03060; --teal:#0B6E6E; --green:#1E7040;
  --orange:#9E4E0A; --purple:#8338E8; --blue:#2B5EA8;
  --line:#C9BCA0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  font-size:16.5px; line-height:1.85;
}
h1,h2,h3,.mincho{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700}
a{color:var(--blue)}
img{max-width:100%; display:block}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}

/* ヘッダー */
.site-header{border-bottom:3px solid var(--ink); background:var(--paper2)}
.header-in{display:flex; align-items:center; gap:18px; padding:14px 0 12px}
.site-name{font-family:"Shippori Mincho",serif; font-weight:800; font-size:30px; letter-spacing:.04em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand-tag{font-family:"Shippori Mincho",serif; font-size:15px; color:var(--ink); opacity:.85}
.header-nav{margin-left:auto; display:flex; gap:10px}
/* ボタン様式: フラット色＋枠線（サイトではボタン専用） */
.btn{
  display:inline-block; font-family:"Shippori Mincho",serif; font-weight:700;
  background:var(--paper2); color:var(--ink); border:3px solid var(--ink);
  padding:6px 18px; text-decoration:none; font-size:15.5px; line-height:1.5;
}
.btn:hover{background:var(--ink); color:var(--paper2)}
.btn-enji{background:var(--enji); border-color:var(--ink); color:var(--paper2); font-size:17px; padding:10px 28px}
.btn-enji:hover{background:var(--ink)}
/* 黒帯スローガン */
.slogan-bar{background:var(--ink); color:var(--paper2); text-align:center; padding:9px 12px; font-family:"Shippori Mincho",serif; font-size:17px; letter-spacing:.06em}
.slogan-bar .maybe{background:var(--enji); color:var(--paper2); padding:2px 10px 3px; margin-left:2px}

/* マーカー表現（非ボタン要素）: ●＋色文字 / 縦バー＋色文字 */
.mk{font-weight:700; font-size:14.5px}
.mk::before{content:"●"; margin-right:6px; font-size:11px; vertical-align:2px}
.mk-teal{color:var(--teal)} .mk-rose{color:var(--rose)} .mk-gold{color:var(--gold)}
.mk-blue{color:var(--blue)} .mk-green{color:var(--green)} .mk-purple{color:var(--purple)}
.bar-label{border-left:5px solid var(--enji); padding-left:10px; font-weight:700}
.meta-row{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px; align-items:center}
.date{color:var(--ink); opacity:.75}

/* ヒーロー（最新記事の特集面） */
.hero{position:relative; margin-top:26px; border:3px solid var(--ink); background:var(--ink)}
.hero-img{aspect-ratio:16/9; overflow:hidden}
.hero-img img{width:100%; height:100%; object-fit:cover}
.hero-kicks{position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; z-index:3}
.kick{background:var(--ink); color:var(--paper2); font-size:13.5px; font-weight:700; padding:3px 12px 4px; letter-spacing:.05em}
.kick .kick-enji{color:#F0A8AD}
.hero-shade{position:absolute; left:0; right:0; bottom:0; padding:64px 30px 22px; background:linear-gradient(to top, rgba(20,17,13,.88) 30%, rgba(20,17,13,0)); color:var(--paper2); z-index:2}
.hero-title{font-size:40px; line-height:1.35; margin:0 0 8px; text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hero-lead{font-size:16.5px; margin:0 0 14px; max-width:760px}
.hero-cta-row{display:flex; gap:12px; align-items:center}

/* セクション */
.section{margin:44px 0}
.section-head{display:flex; align-items:baseline; gap:16px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:18px}
.section-head h2{font-size:25px; margin:0}
.section-head .more{margin-left:auto}

/* 区分ブロック＋行リスト */
.cat-block{margin-bottom:30px}
.cat-name{font-size:19px; margin:0 0 10px}
.rows{border-top:1px solid var(--line)}
.row-item{display:flex; gap:16px; padding:13px 6px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); align-items:baseline}
.row-item:hover{background:var(--paper2)}
.row-num{font-family:"Shippori Mincho",serif; font-weight:700; color:var(--enji); white-space:nowrap}
.row-main{flex:1}
.row-title{font-family:"Shippori Mincho",serif; font-weight:700; font-size:18px}
.row-sum{font-size:14.5px; opacity:.85}
.row-year{white-space:nowrap; font-size:14px; opacity:.75}

/* 記事カード（一覧ページ）: 16:9 サムネイル＋下部グラデにタイトル重ね */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.card{border:2px solid var(--ink); background:var(--paper2); text-decoration:none; color:var(--ink); display:block}
.card-thumb{position:relative; aspect-ratio:16/9; overflow:hidden}
.card-thumb img{width:100%; height:100%; object-fit:cover}
.card-thumb .era{position:absolute; top:10px; left:10px; background:var(--ink); color:var(--paper2); font-size:12.5px; font-weight:700; padding:2px 9px 3px}
.card-thumb .thumb-title{
  position:absolute; left:0; right:0; bottom:0; padding:38px 16px 12px;
  background:linear-gradient(to top, rgba(20,17,13,.88) 25%, rgba(20,17,13,0));
  color:var(--paper2); font-family:"Shippori Mincho",serif; font-weight:700; font-size:20px; line-height:1.45;
}
.card-meta{padding:12px 16px 14px}
.card-sum{font-size:14.5px; margin-top:6px; opacity:.9}

/* 記事ページ */
.crumb{font-size:14px; margin:20px 0 4px}
.article-head{margin:10px 0 6px}
.article-num{color:var(--enji); font-family:"Shippori Mincho",serif; font-weight:700; font-size:17px}
.article-title{font-size:36px; line-height:1.4; margin:4px 0 10px}
.article-hero{border:3px solid var(--ink); margin:18px 0 26px}
.article-hero img{aspect-ratio:16/9; object-fit:cover; width:100%}
.overview{background:var(--paper2); border:2px solid var(--ink); padding:20px 24px; margin:0 0 34px}
.overview h2{font-size:20px; margin:0 0 10px}
.overview ol{margin:8px 0 14px; padding-left:22px}
.overview li{margin-bottom:8px}
.sec{margin:38px 0}
.sec h2{font-size:26px; border-bottom:2px solid var(--ink); padding-bottom:6px; margin:0 0 16px}
.sec h2 .sec-sub{font-size:15px; color:var(--enji); margin-right:12px; letter-spacing:.08em}
.sec h3{font-size:20px; margin:24px 0 8px}
.sec p{margin:0 0 14px}
.sec figure{margin:18px 0}
.sec figure img{border:2px solid var(--ink); aspect-ratio:16/9; object-fit:cover; width:100%}
strong.lead{color:var(--enji)}
.sim-block{border-left:5px solid var(--gold); padding-left:16px; margin-bottom:26px}
.sim-block h3{margin-top:0}
table.diff{border-collapse:collapse; width:100%; margin:10px 0 6px; font-size:15.5px}
table.diff th, table.diff td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top}
table.diff th{background:var(--paper2); font-family:"Shippori Mincho",serif}
table.diff td.item{font-weight:700; white-space:nowrap}
.sources{font-size:15px}
.sources li{margin-bottom:6px}
.note{font-size:14px; opacity:.85; border-top:1px solid var(--line); padding-top:10px; margin-top:14px}
.related-list{list-style:none; padding:0; margin:0}
.related-list li{padding:8px 4px; border-bottom:1px solid var(--line)}
.related-num{color:var(--enji); font-family:"Shippori Mincho",serif; font-weight:700; margin-right:10px}
.about-box{background:var(--paper2); border:2px solid var(--ink); padding:20px 24px}

/* フッター */
.site-footer{margin-top:60px; background:var(--ink); color:var(--paper2); padding:30px 0 36px}
.site-footer a{color:var(--paper2)}
.footer-name{font-family:"Shippori Mincho",serif; font-size:21px; font-weight:800}
.footer-small{font-size:13.5px; opacity:.85}

/* モバイル（640px以下）: 画像の上を軽くする */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 14px}
  .brand-tag{display:none}
  .site-name{font-size:24px}
  .header-nav .btn{padding:5px 12px; font-size:14px}
  .slogan-bar{font-size:14.5px}
  .hero{margin-top:16px}
  .hero-kicks .kick-sub{display:none}
  .hero-shade{position:static; background:none; color:var(--ink); padding:16px 4px 4px}
  .hero-title{font-size:27px; text-shadow:none}
  .hero-lead{font-size:15.5px}
  .cards{grid-template-columns:1fr}
  .card-thumb .thumb-title{font-size:18px}
  .row-item{flex-wrap:wrap; gap:4px 12px}
  .article-title{font-size:27px}
  .sec h2{font-size:22px}
  table.diff td.item{white-space:normal}
  .section-head h2{font-size:21px}
}