/* ============================================================
   base.css - サイト共通の土台
   全ページで最初に読み込む。ここより後に読むCSSはページ固有のみ。
   デザイントークン / リセット / body / h1 / ナビ / 共通パーツ
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Rajdhani:wght@500;700&family=Noto+Serif+JP:wght@400;500&display=swap');

/* ===== デザイントークン ===== */
:root {
  /* --- 背景 --- */
  --bg:          #121212;
  --bg-card:     #1f1f1f;
  --bg-panel:    #1a1a1a;
  --bg-nav:      #1a0000;

  /* --- アクセント（赤） --- */
  --accent:        #f05454;
  --accent-light:  #ff7676;
  --accent-deep:   #923232;
  --accent-bright: #e01414;

  /* --- テキスト --- */
  --text:       #eee;
  --text-muted: #ccc;
  --text-sub:   #bbb;
  --text-faint: #555;
  --text-ghost: #444;

  /* --- 罫線 --- */
  --border:        #333;
  --border-subtle: #2a2a2a;

  /* --- 影・グロー --- */
  --shadow-card:       0 0 10px rgba(255, 0, 0, 0.2);
  --shadow-card-hover: 0 0 20px rgba(255, 0, 0, 0.4);
  --glow-accent:       0 0 20px rgba(240, 84, 84, 0.3);
  --glow-accent-soft:  0 0 14px rgba(240, 84, 84, 0.4);
  --inset-nav: 1px 1px 1px rgba(53, 6, 6, 0.7) inset,
               -1px -1px 1px rgba(143, 22, 22, 0.7) inset;

  /* --- フォント --- */
  --font-base:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'Cinzel', serif;      /* 英字見出し */
  --font-ui:      'Rajdhani', sans-serif; /* ナビ・ラベル・ボタン */
  --font-jp:      'Noto Serif JP', serif; /* 日本語本文 */

  /* --- 角丸 --- */
  --radius:    15px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* --- 動き --- */
  --ease: 0.3s;
  --ease-fast: 0.2s;
}

/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性が .carousel-btn などの display 指定に負けないように */
[hidden] { display: none !important; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
  margin: 0;
  padding: 0 0 40px;
}

/* ===== ページタイトル ===== */
h1 {
  text-align: center;
  margin: 0 0 20px;
  padding: 20px 10px 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8em, 7vw, 3.2em);
  letter-spacing: 0.18em;
  color: var(--accent);
  text-shadow: 0 0 32px rgba(240, 84, 84, 0.35);
}

/* ===== ナビゲーション ===== */
.navber {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--bg-nav);
  position: sticky;
  top: 0;
  z-index: 100;
}

.dropmenu {
  list-style-type: none;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
}

.dropmenu li {
  background: var(--accent-deep);
  text-align: center;
  box-shadow: var(--inset-nav);
  width: 25%;
  margin: 0;
  padding: 0;
  position: relative;
}

.dropmenu li a {
  margin: 0;
  padding: 10px 4px;
  display: block;
  color: #000;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.85em, 2.5vw, 1.15em);
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}

.dropmenu li a:hover {
  background: var(--accent-bright);
}

/* ===== コンテンツ wrapper ===== */
.content {
  z-index: 1;
  text-align: center;
  padding: 0 16px;
  overflow-x: hidden;
}

/* ===== メインビジュアル（フル幅） ===== */
#main-visual {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* ===== プロローグ / リード文 =====
   nowrap + 横スクロールをやめ、狭い画面では自然に折り返す。
   max-width で1行の長さを抑えているので、広い画面では従来どおり1行に収まる。 */
#prol {
  text-align: center;
  margin: 28px auto;
  max-width: 820px;
  padding: 0 20px;
}

#prol p {
  font-family: var(--font-jp);
  font-size: clamp(0.78em, 2.2vw, 0.95em);
  line-height: 2.2;
  letter-spacing: 0.12em;
  color: #d8d8d8;
  margin: 0 0 0.9em;
  text-wrap: pretty;
}

#prol p:last-child {
  margin-bottom: 0;
}

/* ===== エフェクト用キャンバス ===== */
canvas {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ===== スマホ大 (<=500px) ===== */
@media (max-width: 500px) {
  #prol {
    padding: 0 16px;
  }

  #prol p {
    line-height: 2.0;
    letter-spacing: 0.08em;
  }
}

/* ===== 標準スマホ (<=390px) ===== */
@media (max-width: 390px) {
  #prol p {
    line-height: 1.95;
    letter-spacing: 0.06em;
  }
}