/* =============================================
   column-noav-theme.css
   column*.html を no_av_no_life.html 風に寄せる
   テーマオーバーライド
   ============================================= */

/* --- Google Fonts (Noto Serif JP) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');

/* --- CSS 変数上書き --- */
:root {
  --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --bg-card-dark: rgba(22, 33, 62, 0.7);
  --bg-card-soft: rgba(30, 40, 70, 0.6);
  --text-main: #e8e8e8;
  --text-muted: #b0b0b0;
  --accent-pink: #ff4081;
  --accent-pink-soft: rgba(255, 64, 129, 0.8);
  --accent-blue: #00d4ff;
  --accent-gold: #ffd700;
  --border-soft: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- body: 背景グラデーション --- */
body {
  background: var(--bg-gradient) !important;
  background-attachment: fixed !important;
  color: var(--text-main) !important;
  font-family: system-ui,"Segoe UI","Noto Sans JP",  -apple-system, BlinkMacSystemFont,
     "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  line-height: 1.9 !important;
  letter-spacing: 0.05em !important;
}

/* --- .wrap: ガラスモーフィズムカード --- */
.wrap {
  background: var(--bg-card-soft) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: var(--glass-shadow) !important;
}

.wrap::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 64, 129, 0.12) 0, transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(0, 212, 255, 0.1) 0, transparent 60%) !important;
}

/* --- .container / .card: ガラス効果 --- */
.container,
.card {
  background: linear-gradient(145deg, var(--bg-card-dark), var(--bg-card-soft)) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--glass-shadow) !important;
}

.container::before,
.card::before {
  background: radial-gradient(120% 70% at 20% 0%, rgba(255, 64, 129, 0.08), transparent 58%) !important;
}

.container::after,
.card::after {
  border-color: rgba(255, 64, 129, 0.12) !important;
}

/* --- リンク色 --- */
a {
  color: var(--accent-pink) !important;
  transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

a:hover {
  color: var(--accent-blue) !important;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.5) !important;
}

/* --- h1: セリフ体 + グラデーション --- */
h1 {
  font-family: "Noto Serif JP", serif !important;
  background: linear-gradient(90deg, #fff, #ffd700) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* --- セクション見出し h2 / .section-title --- */
.section-title,
.section h2,
.card-inner h2 {
  font-family: "Noto Serif JP", serif !important;
  color: #fff !important;
  border-bottom: 2px solid rgba(255, 64, 129, 0.3) !important;
  padding-bottom: 0.8rem !important;
  display: inline-block !important;
}

/* h2 前のドットをピンク系に */
.section-title::before {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold)) !important;
  box-shadow: 0 0 0 6px rgba(255, 64, 129, 0.12) !important;
}

/* --- h3 サブ見出し: 左ボーダー --- */
h3,
.section h3 {
  color: #fff !important;
  padding-left: 0.8rem !important;
  border-left: 4px solid var(--accent-pink) !important;
  font-size: 1.1rem !important;
}

/* --- strong: ゴールドハイライト --- */
strong {
  color: var(--accent-gold) !important;
  background: linear-gradient(transparent 70%, rgba(255, 215, 0, 0.2) 70%) !important;
  padding: 0 0.15rem !important;
}

/* --- p: テキスト色統一 --- */
p {
  color: var(--text-main) !important;
}

/* --- .hero: ピンク系グロウ --- */
.hero {
  background:
    radial-gradient(ellipse at top left, rgba(255, 64, 129, 0.15) 0, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 212, 255, 0.12) 0, transparent 55%),
    linear-gradient(145deg, var(--bg-card-dark), var(--bg-card-soft)) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: var(--glass-shadow) !important;
}

.hero::after {
  background: linear-gradient(120deg, rgba(255, 64, 129, 0.6), rgba(0, 212, 255, 0.5)) border-box !important;
}

/* --- .eyebrow: ピンク系 --- */
.eyebrow {
  background: rgba(255, 64, 129, 0.1) !important;
  border-color: rgba(255, 64, 129, 0.3) !important;
  color: var(--text-muted) !important;
}

.eyebrow-dot {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold)) !important;
  box-shadow: 0 0 0 5px rgba(255, 64, 129, 0.2) !important;
}

/* --- .lead --- */
.lead,
.lede {
  color: #ddd !important;
}

/* --- .hero-meta --- */
.hero-meta span {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: var(--border-soft) !important;
}

.hero-meta span::before {
  color: var(--accent-pink) !important;
}

/* --- .note: ゴールド系 --- */
.note {
  background: rgba(255, 215, 0, 0.05) !important;
  border: 1px dashed var(--accent-gold) !important;
  color: #e0d8c0 !important;
}

.note strong {
  color: var(--accent-gold) !important;
}

/* --- .toc: ダーク + ピンクアクセント --- */
.toc {
  background: var(--bg-card-dark) !important;
  border-color: var(--border-soft) !important;
}

.toc h2,
.toc-title {
  color: var(--accent-pink) !important;
}

.toc a {
  color: var(--text-main) !important;
  border-bottom-color: rgba(255, 64, 129, 0.35) !important;
}

.toc a:hover {
  color: var(--accent-pink) !important;
}

/* --- .section: ガラスモーフィズム --- */
.section {
  background: var(--bg-card-soft) !important;
  border-color: var(--border-soft) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.section::before {
  background: radial-gradient(ellipse at top right, rgba(255, 64, 129, 0.1) 0, transparent 55%) !important;
}

/* --- .badge: ピンク系 --- */
.badge {
  border-color: rgba(255, 64, 129, 0.25) !important;
}

.badge-dot {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold)) !important;
}

/* --- .summary-box: 暖色系 --- */
.summary-box {
  background: rgba(255, 215, 0, 0.04) !important;
  border-color: rgba(255, 215, 0, 0.2) !important;
}

/* --- .callout / .callout-card --- */
.callout {
  border-color: rgba(255, 64, 129, 0.35) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.callout-card {
  border-color: rgba(255, 64, 129, 0.18) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* --- .tag: ピンクホバー --- */
.tag {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.tag:hover,
.tag:active {
  border-color: rgba(255, 64, 129, 0.6) !important;
  background: linear-gradient(135deg, rgba(255, 64, 129, 0.2), rgba(5, 10, 30, 0.98)) !important;
}

/* --- FAQ --- */
.faq-list dt {
  color: var(--accent-pink) !important;
}

.faq-list dd {
  color: var(--text-muted) !important;
}

/* --- .top-button: ピンク→ゴールド --- */
.top-button {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold)) !important;
  box-shadow: 0 12px 34px rgba(255, 64, 129, 0.35) !important;
}

.top-button:hover {
  box-shadow: 0 16px 36px rgba(255, 64, 129, 0.5) !important;
}

/* --- li ビュレット --- */
li::before {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-gold)) !important;
  box-shadow: 0 0 0 6px rgba(255, 64, 129, 0.1) !important;
}

/* --- .btn: ピンク系 --- */
.btn {
  background: rgba(255, 64, 129, 0.14) !important;
  border-color: rgba(255, 64, 129, 0.3) !important;
}

.btn:hover {
  background: rgba(0, 212, 255, 0.16) !important;
  border-color: rgba(0, 212, 255, 0.45) !important;
}

/* --- .footer-note --- */
.footer-note {
  color: var(--text-muted) !important;
}