/* =========================
   全体基本設定
========================= */
body {
  margin: 0;
  background-color: #ffffff;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #222;
}
/* 本文領域 */
main {
  position: relative;      
  z-index: 10;             
  background-color: #ffffff;
}
/* notice（記録枠）も前面に */
.notice {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 20px;
  margin: 30px 0;
}
/* =========================
   ページレベル制御
========================= */
/* レベル1：通常 */
body.level-1 {
  background-color: #ffffff;
  color: #000;
}
/* レベル2：違和感 */
body.level-2 {
  background-color: #d9d9d9;
  color: #222;
}
/* レベル3：不穏 */
body.level-3 {
  background-color: #bfbfbf;
  color: #222;
}
/* レベル4：重苦しい */
body.level-4 {
  background-color: #8f8f8f;
  color: #111;
}
/* レベル5：世界崩壊前夜 */
body.level-5 {
  background-color: #000000;
  color: #000;
}
/* レベル5でも「記録」は読める */
body.level-5 main {
  background-color: #e6e6e6;
  color: #111;
}
/* notice の可読性維持 */
body.level-5 .notice {
  background-color: #f2f2f2;
  color: #111;
}
/* =========================
   表（予報テーブル）
========================= */
.forecast-table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  font-size: 14px;
}
.forecast-table th,
.forecast-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: center;
}
.forecast-table th {
  background-color: #f5f5f5;
  font-weight: normal;
}
.forecast-table tr:nth-child(even) td {
  background-color: #fafafa;
}
/* =========================
   天気レイヤー（背景専用）
========================= */
#weather-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;   /* ← main(10)より必ず後ろ */
}
/* 雨・雪共通 */
.rain,
.snow {
  display: none;
  position: absolute;
  inset: 0;
}
/* ===== 雨 ===== */
body.weather-rain .rain {
  display: block;
  background-image:
    repeating-linear-gradient(
      120deg,
      rgba(255,255,255,0.2) 0px,
      rgba(255,255,255,0.2) 1px,
      transparent 1px,
      transparent 12px
    );
  animation: rainMove 0.4s linear infinite;
}
@keyframes rainMove {
  from { background-position: 0 0; }
  to   { background-position: -40px 80px; }
}
/* ===== 雪 ===== */
body.weather-snow .snow {
  display: block;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.8) 2px, transparent 3px);
  background-size: 40px 40px;
  animation: snowMove 10s linear infinite;
}
@keyframes snowMove {
  from { background-position: 0 0; }
  to   { background-position: 0 400px; }
}
/* ===== 晴れ ===== */
body.weather-clear .rain,
body.weather-clear .snow {
  display: none;
}
/* ===== 霧 ===== */
body.weather-fog #weather-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,0.25),
      rgba(200,200,200,0.35),
      rgba(180,180,180,0.45)
    );
  animation: fogMove 20s linear infinite;
}
@keyframes fogMove {
  from {
    transform: translate(-5%, -5%);
  }
  to {
    transform: translate(5%, 5%);
  }
}
/* 強制完全暗転 */
body.force-black {
  background: #000 !important;
}
body.force-black main,
body.force-black .notice {
  background: #000 !important;
  color: #000 !important;
}
body.force-black #weather-layer {
  display: none !important;
}
.record-image {
  display: block;          /* ← 重要 */
  margin: 20px auto;       /* ← 左右 auto で中央寄せ */
  max-width: 90%;
  height: auto;
}
/* =========================
   フッター（コピーライト＋ページ番号）
========================= */
.site-footer {
  position: relative;
  padding: 20px;
  font-size: 12px;
  text-align: center;
}
/* コピーライト文字 */
.footer-copy {
  display: inline-block;
  color: #f00;   /* ← フッター文字色 */
}
/* ページ番号 */
.footer-page {
  position: absolute;
  left: 50%;
  transform: translateX(120px);
  color: #f00;   /* ← ページ数の色（少し薄く） */
}
.career-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 14px;
}
.career-table th,
.career-table td {
  border: 1px solid #ccc;
  padding: 10px 12px;
  vertical-align: top;
}
.career-table th {
  width: 160px;
  background-color: #f5f5f5;
  text-align: left;
  font-weight: normal;
}