@charset "UTF-8";

/* 新聞風スタイル */

:root{
  --paper:#fbf8f3;
  --ink:#111;
  --muted:#777;
  --accent:#222;
}

html,body{
  height:100%;
  margin:0;
  background: linear-gradient(180deg,var(--paper),#fff);
  font-family: "Yu Mincho","Noto Serif JP", serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

header{
  max-width:980px;
  margin:32px auto 8px;
  padding:24px 20px 12px;
  text-align:center;
  border-top:8px solid var(--accent); /* 新聞の見出し帯 */
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

header h1{
  margin:0;
  font-size:2.6rem;
  letter-spacing:0.06em;
  font-weight:700;
  color:var(--accent);
  line-height:1;
}

/* 日付・号数風 */
header::after{
  content: "2025年10月21日　　第123号";
  display:block;
  margin-top:8px;
  font-size:0.85rem;
  color:var(--muted);
  letter-spacing:0.04em;
}

/* メインエリア */
main{
  max-width:980px;
  margin:18px auto 48px;
  padding:0 18px;
}

/* タブの見た目を新聞のセクション見出し風に */
.tab-container{
  background:#fff;
  border:1px solid #e6e1da;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  padding:16px;
  border-radius:4px;
}

/* タブボタン群 */
.tab-buttons{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.tab-button{
  padding:8px 14px;
  font-size:0.95rem;
  cursor:pointer;
  color:var(--accent);
  background:transparent;
  border:2px solid transparent;
  border-bottom:4px solid transparent;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
}
.tab-button:hover{
  color:#000;
}
.tab-button.active{
  border-bottom-color:var(--accent);
  color:var(--accent);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
}

/* コンテンツ領域：新聞の本文風にカラム表示 */
.tab-contents{
  padding-top:6px;
}
.tab-content{
  display:none;
  padding:8px 4px 20px;
  color:#222;
}
.tab-content.active{
  display:block;
}

/* 各記事本文を2カラムに（幅あれば） */
.tab-content p{
  font-size:1rem;
  line-height:1.85;
  margin:0 0 1.1rem 0;
  column-count:2;
  column-gap:2.2rem;
  column-rule:1px solid #e6e1da;
  color:#222;
}

/* 記事見出し */
.tab-content h2{
  font-size:1.3rem;
  margin:0 0 12px 0;
  letter-spacing:0.02em;
  color:var(--accent);
  border-bottom:1px solid #efeae5;
  padding-bottom:8px;
}

/* 小見出しや注釈風 */
.tab-content small{
  display:block;
  color:var(--muted);
  margin-top:6px;
  font-style:italic;
}

/* フッター */
footer{
  max-width:980px;
  margin:32px auto 80px;
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
}

/* モバイル：カラムを1にして読みやすく */
@media (max-width:720px){
  header{ margin:20px auto 6px; padding:16px 12px; }
  header h1{ font-size:1.8rem; }
  .tab-buttons{ gap:8px; }
  .tab-button{ padding:8px 10px; font-size:0.9rem; }
  .tab-content p{
    column-count:1;
    column-gap:1rem;
    column-rule:none;
  }
}