/* ==============================================
   CSS変数 / カラーテーマ
   ============================================== */
:root {
  --color-bg-overlay: rgba(255, 248, 235, 0.30);    /* 背景が透けて見える白めの幕 */
  --color-accent: #f5ead0;       /* クリームアイボリー（オレンジ背景に映える） */
  --color-accent-dim: #c8b48a;
  --color-text: #fdf6ec;         /* 温かみのあるクリーム白 */
  --color-text-sub: #c8b090;
  --color-border: rgba(245, 234, 208, 0.35);
  --color-badge-bg: rgba(245, 234, 208, 0.10);
  --font-serif: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;
  --transition-base: 0.3s ease;
}

/* ==============================================
   リセット・ベース
   ============================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
  width: 100%;
}

body {
  font-family: var(--font-serif);
  color: var(--color-text);
  background-color: #5c3420;   /* 背景画像未配置時の温かい暗褐色 */
  /* 背景画像 — assets/bg.png を配置後に有効になります */
  background-image: url('assets/bg.png');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ==============================================
   背景オーバーレイ（暗幕）
   ============================================== */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: 0;
  pointer-events: none;
}

/* ==============================================
   パーティクル装飾（光の粒）
   ============================================== */
.particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.particles span {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  animation: particle-float linear infinite;
}

/* 各パーティクルの位置・サイズ・タイミングをずらす */
.particles span:nth-child(1)  { left:  8%; width: 2px; height: 2px; animation-duration: 12s; animation-delay:  0s; }
.particles span:nth-child(2)  { left: 20%; width: 4px; height: 4px; animation-duration: 18s; animation-delay:  3s; }
.particles span:nth-child(3)  { left: 35%; width: 2px; height: 2px; animation-duration: 15s; animation-delay:  6s; }
.particles span:nth-child(4)  { left: 50%; width: 3px; height: 3px; animation-duration: 20s; animation-delay:  1s; }
.particles span:nth-child(5)  { left: 65%; width: 2px; height: 2px; animation-duration: 14s; animation-delay:  8s; }
.particles span:nth-child(6)  { left: 75%; width: 4px; height: 4px; animation-duration: 17s; animation-delay:  4s; }
.particles span:nth-child(7)  { left: 88%; width: 2px; height: 2px; animation-duration: 11s; animation-delay:  9s; }
.particles span:nth-child(8)  { left: 42%; width: 3px; height: 3px; animation-duration: 22s; animation-delay:  2s; }
.particles span:nth-child(9)  { left: 57%; width: 2px; height: 2px; animation-duration: 16s; animation-delay:  7s; }
.particles span:nth-child(10) { left: 15%; width: 3px; height: 3px; animation-duration: 19s; animation-delay:  5s; }

@keyframes particle-float {
  0%   { bottom: -10px; opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { bottom: 110vh; opacity: 0; transform: translateX(40px); }
}

/* ==============================================
   メインコンテナ
   ============================================== */
.container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: 4rem 2.5rem 3.5rem;
  width: 100%;
  max-width: 680px;
  /* コンテンツエリアに暗幕パネルを追加して視認性を確保 */
  background: rgba(22, 10, 3, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 4px;
  border: 1px solid rgba(245, 234, 208, 0.12);
  margin: 3rem 1rem;
  animation: fade-in 1.2s ease both;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==============================================
   タイトル画像
   ============================================== */
.title-image-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.title-image {
  max-width: 80vw;
  width: 480px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 20px rgba(20, 8, 2, 0.50));
}

/* title.png 未配置時のプレースホルダー */
.title-placeholder {
  display: none; /* JS の onerror で表示 */
  background: linear-gradient(135deg, #3d2010 0%, #5c3420 100%);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2.5rem 3rem;
  text-align: center;
}

.title-placeholder-text {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  text-shadow: 0 2px 8px rgba(20, 8, 2, 0.5);
}

/* ==============================================
   準備中バッジ
   ============================================== */
.coming-soon {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.coming-soon__line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent));
}

.coming-soon__line:last-child {
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.coming-soon__text {
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.5em;
  color: var(--color-accent);
  background: var(--color-badge-bg);
  border: 1px solid var(--color-border);
  padding: 0.45em 1.4em 0.45em 1.8em; /* letter-spacing 分だけ右を詰める */
  border-radius: 2px;
  animation: pulse-glow 2.8s ease-in-out infinite;
  white-space: nowrap;
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 1px 4px rgba(245, 234, 208, 0.20); opacity: 1; }
  50%       { text-shadow: 0 2px 12px rgba(245, 234, 208, 0.60); opacity: 0.88; }
}

/* ==============================================
   開催情報テーブル
   ============================================== */
.event-info {
  width: 100%;
}

.event-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  line-height: 1.8;
}

.event-table th,
.event-table td {
  padding: 0.85em 1.2em;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.event-table th {
  width: 7em;
  white-space: nowrap;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.event-table td {
  color: var(--color-text);
}

.event-table tbody tr:first-child th,
.event-table tbody tr:first-child td {
  border-top: 1px solid var(--color-border);
}

.event-table .sub {
  font-size: 0.88em;
  color: var(--color-text-sub);
}

/* ==============================================
   フッター
   ============================================== */
.footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1.5rem 1rem 2rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-sub);
  letter-spacing: 0.05em;
}

/* ==============================================
   レスポンシブ対応
   ============================================== */
@media (max-width: 480px) {
  /* iOS Safari の background-attachment: fixed バグ回避 */
  body {
    background-attachment: scroll;
  }

  .container {
    gap: 2rem;
    padding: 2.5rem 1.2rem 2.5rem;
    margin: 0;
    border-radius: 0;
    flex: 1;
    min-height: 100dvh;
  }

  .title-image {
    max-width: 90vw;
  }

  /* 「準備中」バッジ */
  .coming-soon__text {
    letter-spacing: 0.3em;
    padding: 0.45em 1.1em 0.45em 1.4em;
    font-size: clamp(0.95rem, 4vw, 1.2rem);
  }

  /* テーブルを縦2段組みに */
  .event-table th,
  .event-table td {
    display: block;
    width: 100%;
    padding: 0.4em 0.8em;
    border-bottom: none;
  }

  .event-table th {
    padding-top: 0.9em;
    font-size: 0.82em;
    letter-spacing: 0.12em;
    opacity: 0.85;
  }

  .event-table td {
    padding-bottom: 0.9em;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }

  .event-table tbody tr:first-child th {
    border-top: 1px solid var(--color-border);
  }
}