/* ============================================================

   Inferno Theme — style.css

   炎・残り火テーマ / モバイルファースト・単一ファイル完結

   セクション:

     1.  CSS Variables

     2.  Reset / Base

     3.  Background Layer (#fire-canvas, #ember-canvas, #bg-overlay)

     4.  Layout (#app, .container, .site-main, .site-footer)

     5.  Navigation

     6.  Ember Card (.glass-card 互換)

     7.  Typography / .prose

     8.  Post Card（一覧）

     9.  Post / Page 詳細

    10.  Author Box

    11.  Pagination

    12.  Footer SNS

    13.  @media tablet  (min-width: 768px)

    14.  @media desktop (min-width: 1024px)

    15.  @keyframes

    16.  @media (prefers-reduced-motion: reduce)

============================================================ */

/* ============================================================

   1. CSS Variables

============================================================ */

:root {

  /* カラー - 炎・残り火系 */

  --color-bg:           #0d0503;

  --color-overlay:      rgba(5, 2, 0, 0.62);

  --color-primary:      #ff7c35;

  --color-primary-dark: #cc5500;

  --color-accent:       #ffb347;

  --color-text:         #f0dbc2;

  --color-text-muted:   #c47a42;

  --color-heading:      #fff3e0;

  --color-border:       rgba(255, 120, 50, 0.22);

  /* Ember Morphism */

  --glass-bg:           rgba(18, 5, 0, 0.70);

  --glass-bg-hover:     rgba(28, 8, 0, 0.82);

  --glass-blur:         10px;

  --glass-border:       rgba(255, 120, 50, 0.28);

  /* Typography */

  --font-body:   'Hiragino Sans', 'Noto Sans JP', 'Meiryo', sans-serif;

  --font-mono:   'Consolas', 'SFMono-Regular', 'Courier New', monospace;

  --font-size:   16px;

  --line-height: 1.8;

  /* Layout */

  --max-width:   860px;

  --radius:      10px;

  --radius-sm:   5px;

  --spacing:     16px;

}

/* ============================================================

   2. Reset / Base

============================================================ */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html {

  font-size: var(--font-size);

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}

body {

  font-family: var(--font-body);

  font-size: 1rem;

  line-height: var(--line-height);

  color: var(--color-text);

  background: var(--color-bg);

  min-height: 100vh;

  overflow-x: hidden;

}

a {

  color: var(--color-primary);

  text-decoration: none;

}

a:hover { color: var(--color-accent); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ============================================================

   3. Background Layer

============================================================ */

#bg-layer {

  position: fixed;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  background: var(--color-bg);

}

/* WebGL 炎シェーダー（最背面） */

#fire-canvas {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  pointer-events: none;

}

/* Canvas 2D 残り火パーティクル（前面） */

#ember-canvas {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  pointer-events: none;

}

#bg-overlay {

  position: absolute;

  inset: 0;

  background: var(--color-overlay);

  z-index: 2;

}

/* ============================================================

   4. Layout

============================================================ */

#app {

  position: relative;

  z-index: 10;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

.container {

  width: 100%;

  max-width: var(--max-width);

  margin: 0 auto;

  padding: 0 var(--spacing);

}

.site-main {

  flex: 1;

  padding: 24px 0 48px;

}

.site-footer {

  padding: 20px 0;

  text-align: center;

  font-size: 0.8rem;

  color: var(--color-text-muted);

  border-top: 1px solid var(--color-border);

}

/* ============================================================

   5. Navigation

============================================================ */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  background: rgba(10, 3, 0, 0.4);

  border-bottom: 1px solid var(--glass-border);

  box-shadow: 0 2px 24px rgba(255, 80, 0, 0.15);

}

.site-header .container {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  min-height: 56px;

  gap: 16px;

  padding-top: 8px;

  padding-bottom: 8px;

}

.site-title {

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--color-heading);

  letter-spacing: 0.03em;

  text-shadow: 0 0 8px rgba(255, 120, 40, 0.9), 0 0 20px rgba(255, 60, 0, 0.5);

  animation: fire-title-flicker 3.5s ease-in-out infinite;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  word-wrap: break-word;

  overflow-wrap: break-word;

  max-width: calc(100% - 56px - 16px - 12px);

  flex-shrink: 1;

  min-width: 0;
  padding:4px;

}

.site-title:hover {

  text-decoration: none;

  color: var(--color-accent);

}

/* ハンバーガーボタン */

.nav-toggle {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  width: 36px;

  height: 36px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 4px;

  flex-shrink: 0;

}

.nav-toggle span {

  display: block;

  height: 2px;

  background: var(--color-primary);

  border-radius: 2px;

  transition: transform 0.2s, opacity 0.2s;

}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.nav-toggle.active span:nth-child(2) { opacity: 0; }

.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ナビゲーション（モバイル） */

.site-nav {

  display: none;

  position: absolute;

  top: 56px;

  left: 0;

  right: 0;

  background: rgba(10, 3, 0, 0.96);

  border-bottom: 1px solid var(--glass-border);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  flex-direction: column;

  padding: 8px 0;

}

.site-nav.open { display: flex; }

.site-nav a {

  display: block;

  padding: 12px var(--spacing);

  color: var(--color-text);

  font-size: 0.95rem;

  border-bottom: 1px solid rgba(255, 100, 30, 0.08);

}

.site-nav a:hover {

  background: rgba(255, 100, 30, 0.12);

  color: var(--color-accent);

  text-decoration: none;

}

/* ドロップダウン */

.nav-dropdown { position: relative; }

.nav-dropdown-trigger { display: flex !important; align-items: center; gap: 4px; cursor: pointer; }

.nav-caret {

  font-size: 0.7em;

  transition: transform 0.2s;

  display: inline-block;

}

.nav-dropdown.open .nav-caret { transform: rotate(180deg); }

.nav-dropdown-menu {

  display: none;

  list-style: none;

  padding: 0;

  background: rgba(8, 2, 0, 0.98);

  border-left: 2px solid var(--color-primary);

}

.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-menu li a {

  padding-left: calc(var(--spacing) * 2);

  font-size: 0.9rem;

}

/* ============================================================

   6. Ember Card（water-ripple の .glass-card 互換）

============================================================ */

.glass-card {

  background: var(--glass-bg);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  border: 1px solid var(--glass-border);

  border-radius: var(--radius);

  padding: 20px var(--spacing);

  margin-bottom: 20px;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50),

              inset 0 0 1px rgba(255, 100, 30, 0.20);

  transition: background 0.3s, box-shadow 0.3s, transform 0.25s, border-color 0.3s;

  animation: ember-heat-pulse 4s ease-in-out infinite;

}

.glass-card:hover {

  background: var(--glass-bg-hover);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.60),

              0 0 24px rgba(255, 100, 30, 0.18);

  transform: translateY(-3px);

  border-color: rgba(255, 150, 60, 0.50);

  animation-play-state: paused;

}

/* ============================================================

   7. Typography / .prose

============================================================ */

h1, h2, h3, h4, h5, h6 {

  color: var(--color-heading);

  line-height: 1.4;

  margin-bottom: 0.6em;

}

.prose h1 { font-size: 1.6rem; margin: 1.4em 0 0.6em; }

.prose h2 {

  font-size: 1.35rem;

  margin: 1.5em 0 0.65em;

  padding: 0.45em 0;

  border-top:    1px solid rgba(255, 130, 45, 0.55);

  border-bottom: 1px solid rgba(255, 110, 35, 0.38);

  /* ボーダーのグロー感 */

  box-shadow:

    0 -1px 0 rgba(255, 80, 0, 0.12),

     0  1px 0 rgba(255, 80, 0, 0.08);

}

.prose h3 {

  font-size: 1.15rem;

  margin: 1.2em 0 0.45em;

  padding: 0.25em 0;

  border-top:    1px solid rgba(255, 110, 35, 0.28);

  border-bottom: 1px solid rgba(255, 110, 35, 0.20);

}

.prose h4 { font-size: 1.05rem; margin: 0.8em 0 0.3em; }

/* h2〜h6 の上余白を統一 */

.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin-top: 72px; }

.page-with-spacing h2 { margin-top: 40px; }
.page-with-spacing h3 { margin-top: 40px; }

.prose p { margin-bottom: 1em; }

.prose ul, .prose ol { margin: 0.8em 0 1em 1.5em; }

.prose li { margin-bottom: 0.3em; }

.prose strong { color: #fff8f0; font-weight: 700; }

.prose em { color: var(--color-accent); font-style: italic; }

.prose a { color: var(--color-primary); }

.prose a:hover { color: var(--color-accent); }

.prose blockquote {

  border-left: 3px solid var(--color-primary);

  margin: 1em 0;

  padding: 0.6em 1em;

  background: rgba(255, 100, 30, 0.08);

  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  color: var(--color-text-muted);

  font-style: italic;

}

.prose pre {

  background: rgba(5, 1, 0, 0.82);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 1em;

  overflow-x: auto;

  margin: 1em 0;

  line-height: 1.6;

}

.prose code {

  font-family: var(--font-mono);

  font-size: 0.88em;

  background: rgba(255, 100, 30, 0.12);

  padding: 0.1em 0.4em;

  border-radius: 3px;

  color: var(--color-accent);

  border: 1px solid rgba(255, 120, 30, 0.18);

}

.prose pre code {

  background: none;

  border: none;

  padding: 0;

  font-size: 0.85rem;

  color: #ffcb96;

}

.prose img {

  border-radius: var(--radius-sm);

  margin: 1em auto;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);

}

.prose hr {

  border: none;

  border-top: 1px solid var(--color-border);

  margin: 1.5em 0;

}

.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9rem; }

.prose th, .prose td {

  padding: 8px 12px;

  border: 1px solid var(--color-border);

  text-align: left;

}

.prose th {

  background: rgba(255, 100, 30, 0.14);

  color: var(--color-heading);

  font-weight: 600;

}

/* ============================================================

   8. Post Card（一覧）

============================================================ */

.post-list-page { padding-top: 8px; }

.page-heading {

  font-size: 1.4rem;

  color: var(--color-heading);

  margin-bottom: 20px;

  text-shadow: 0 0 14px rgba(255, 100, 30, 0.45);

}

.post-list {

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.post-card {

  display: flex;

  flex-direction: column;

  overflow: hidden;

  padding: 0;

}

.post-card-thumb {

  display: block;

  width: 100%;

  height: 180px;

  overflow: hidden;

}

.post-card-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.35s;

}

.post-card:hover .post-card-thumb img { transform: scale(1.04); }

.post-card-body {

  padding: 16px;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.post-category {

  display: inline-block;

  font-size: 0.72rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--color-accent);

  background: rgba(255, 120, 30, 0.14);

  border: 1px solid rgba(255, 120, 30, 0.30);

  padding: 2px 8px;

  border-radius: 3px;

  text-decoration: none;

  align-self: flex-start;

}

.post-category:hover {

  background: rgba(255, 120, 30, 0.28);

  text-decoration: none;

}

.post-card-title {

  font-size: 1.05rem;

  font-weight: 700;

  line-height: 1.4;

  margin: 0;

}

.post-card-title a { color: var(--color-heading); }

.post-card-title a:hover { color: var(--color-accent); text-decoration: none; }

.post-card-desc {

  font-size: 0.88rem;

  color: var(--color-text-muted);

  line-height: 1.6;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.post-meta {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 4px 10px;

  font-size: 0.78rem;

  color: var(--color-text-muted);

}

.post-meta-item { display: inline-flex; align-items: center; gap: 4px; }

.post-meta-label { font-size: 0.72rem; opacity: 0.75; }

.post-meta-sep { opacity: 0.4; }

/* 著者欄（カード内） */

.post-card-author {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 6px;

  padding-top: 10px;

  border-top: 1px solid var(--color-border);

}

.post-card-author-photo {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  object-fit: cover;

  border: 1px solid var(--color-border);

}

.post-card-author-photo-placeholder {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: rgba(255, 100, 30, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1rem;

}

.post-card-author-info { display: flex; flex-direction: column; gap: 1px; }

.post-card-author-name { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }

.post-card-author-title { font-size: 0.72rem; color: var(--color-text-muted); }

/* ============================================================

   9. Post / Page 詳細

============================================================ */

.post-header { margin-bottom: 24px; }

.post-title {

  font-size: 1.5rem;

  line-height: 1.35;

  margin-bottom: 12px;

  text-shadow: 0 0 10px rgba(255, 120, 40, 0.35);

}

.post-thumbnail {

  width: 100%;

  border-radius: var(--radius-sm);

  margin-top: 16px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);

}

.post-body { margin-top: 8px; }

.post-footer {

  margin-top: 24px;

  padding-top: 16px;

  border-top: 1px solid var(--color-border);

}

.back-link { color: var(--color-text-muted); font-size: 0.88rem; }

.back-link:hover { color: var(--color-primary); text-decoration: none; }

.page-header { margin-bottom: 24px; }

.page-title {

  font-size: 1.5rem;

  line-height: 1.35;

  margin-bottom: 0;

  text-shadow: 0 0 10px rgba(255, 120, 40, 0.35);

}

.page-thumbnail {

  width: 100%;

  border-radius: var(--radius-sm);

  margin-top: 16px;

}

.page-body { margin-top: 8px; }

.no-posts { color: var(--color-text-muted); text-align: center; padding: 40px 0; }

/* ============================================================

   10. Author Box

============================================================ */

.author-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 12px;

  margin-top: 24px;

}

.author-box-photo {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid var(--color-primary);

  box-shadow: 0 0 16px rgba(255, 100, 30, 0.45);

}

.author-box-photo-placeholder {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: rgba(255, 100, 30, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 2rem;

  border: 2px solid var(--color-border);

}

.author-box-name { font-size: 1rem; font-weight: 700; color: var(--color-heading); }

.author-box-title { font-size: 0.82rem; color: var(--color-text-muted); }

.author-box-bio { font-size: 0.88rem; line-height: 1.7; }

/* ============================================================

   11. Pagination

============================================================ */

.pagination {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-top: 32px;

  flex-wrap: wrap;

}

.pagination-btn {

  display: inline-flex;

  align-items: center;

  padding: 8px 18px;

  background: var(--glass-bg);

  border: 1px solid var(--glass-border);

  border-radius: var(--radius-sm);

  color: var(--color-text);

  font-size: 0.9rem;

  text-decoration: none;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  transition: background 0.2s, border-color 0.2s, color 0.2s;

}

.pagination-btn:hover {

  background: rgba(255, 100, 30, 0.20);

  border-color: var(--color-primary);

  color: var(--color-accent);

  text-decoration: none;

}

.pagination-btn.disabled { opacity: 0.35; pointer-events: none; }

.pagination-info { font-size: 0.88rem; color: var(--color-text-muted); }

.pagination-current { color: var(--color-accent); font-weight: 700; }

/* ============================================================

   12. Footer SNS

============================================================ */

.footer-sns {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-bottom: 12px;

  flex-wrap: wrap;

}

.footer-sns-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  font-size: 0.85rem;

  font-weight: 700;

  background: rgba(255, 100, 30, 0.12);

  border: 1px solid rgba(255, 100, 30, 0.25);

  color: var(--color-text);

  text-decoration: none;

  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;

}

.footer-sns-link:hover {

  background: rgba(255, 100, 30, 0.30);

  border-color: var(--color-primary);

  color: var(--color-accent);

  text-decoration: none;

  box-shadow: 0 0 12px rgba(255, 100, 30, 0.40);

}

/* ブランドカラー */

.footer-sns-twitter   { border-color: rgba(29,  161, 242, 0.4); }

.footer-sns-instagram { border-color: rgba(225,  48, 108, 0.4); }

.footer-sns-youtube   { border-color: rgba(255,   0,   0, 0.4); }

.footer-sns-facebook  { border-color: rgba( 66, 103, 178, 0.4); }

.footer-sns-line      { border-color: rgba(  0, 195,   0, 0.4); }

.footer-sns-note      { border-color: rgba( 60, 180, 120, 0.4); }

.footer-sns-tiktok    { border-color: rgba(100, 220, 220, 0.4); }

/* ============================================================

   13. @media tablet (min-width: 768px)

============================================================ */

@media (min-width: 768px) {

  .nav-toggle { display: none; }

  .site-nav {

    display: flex !important;

    position: static;

    background: none;

    border: none;

    flex-direction: row;

    align-items: center;

    padding: 0;

    gap: 4px;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

  }

  .site-nav a {

    padding: 6px 12px;

    border-radius: var(--radius-sm);

    border-bottom: none;

    font-size: 0.9rem;

    transition: background 0.2s, color 0.2s;

  }

  .site-nav a:hover { background: rgba(255, 100, 30, 0.12); }

  /* ドロップダウン（デスクトップ hover） */

  .nav-dropdown-menu {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    min-width: 160px;

    border-radius: var(--radius-sm);

    border: 1px solid var(--glass-border);

    border-left: 2px solid var(--color-primary);

    backdrop-filter: blur(var(--glass-blur));

    -webkit-backdrop-filter: blur(var(--glass-blur));

    background: rgba(10, 3, 0, 0.96);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);

    z-index: 200;

  }

  .nav-dropdown:hover .nav-dropdown-menu { display: block; }

  .nav-dropdown-menu li a { padding-left: var(--spacing); }

  /* 著者ボックス横並び */

  .author-box { flex-direction: row; text-align: left; align-items: flex-start; }

  /* ポストカード横並び（サムネあり） */

  .post-card:has(.post-card-thumb) { flex-direction: row; }

  .post-card:has(.post-card-thumb) .post-card-thumb {

    flex-shrink: 0;

    width: 200px;

    height: auto;

  }

  .post-card:has(.post-card-thumb) .post-card-thumb img {

    width: 200px;

    height: 100%;

    aspect-ratio: unset;

  }

}

/* ============================================================

   14. @media desktop (min-width: 1024px)

============================================================ */

@media (min-width: 1024px) {

  :root { --font-size: 17px; }

  .post-title  { font-size: 1.9rem; }

  .page-title  { font-size: 1.9rem; }

  .prose h1    { font-size: 1.8rem; }

  .prose h2    { font-size: 1.45rem; }

  .site-main   { padding: 36px 0 72px; }

  .glass-card  { padding: 28px 32px; }

}

/* ============================================================

   15. @keyframes

============================================================ */

/* サイトタイトル炎明滅 */

@keyframes fire-title-flicker {

  0%,  100% { text-shadow: 0 0  8px rgba(255,120,40,0.90), 0 0 20px rgba(255, 60, 0,0.50); opacity: 1.00; }

  15%        { text-shadow: 0 0 12px rgba(255,150,50,1.00), 0 0 28px rgba(255, 80, 0,0.70); opacity: 0.97; }

  30%        { text-shadow: 0 0  6px rgba(255,100,20,0.70), 0 0 14px rgba(200, 40, 0,0.40); opacity: 0.95; }

  50%        { text-shadow: 0 0 14px rgba(255,160,60,1.00), 0 0 32px rgba(255, 90, 0,0.80); opacity: 1.00; }

  70%        { text-shadow: 0 0  7px rgba(255,100,20,0.75), 0 0 16px rgba(200, 40, 0,0.45); opacity: 0.96; }

  85%        { text-shadow: 0 0 11px rgba(255,140,45,0.95), 0 0 25px rgba(255, 70, 0,0.65); opacity: 0.98; }

}

/* カードの熱感パルス */

@keyframes ember-heat-pulse {

  0%,  100% { box-shadow: 0 4px 24px rgba(0,0,0,0.50), inset 0 0 1px rgba(255,100,30,0.20); }

  50%        { box-shadow: 0 4px 24px rgba(0,0,0,0.50), inset 0 0 4px rgba(255,100,30,0.40); }

}

/* ============================================================

   16. インタラクティブエフェクト（inferno-fx.js 連携）

============================================================ */

/* ── アイドル スモークレイヤー ── */

#smoke-layer {

  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  opacity: 0;

  /* 下から煙が立ち昇るグラデーション */

  background:

    radial-gradient(ellipse 120% 60% at 50% 110%,

      rgba(5, 2, 0, 0.0)  0%,

      rgba(8, 3, 0, 0.70) 50%,

      rgba(5, 2, 0, 0.92) 100%),

    linear-gradient(

      to top,

      rgba(10, 4, 0, 0.95) 0%,

      rgba(12, 5, 0, 0.60) 40%,

      rgba(8,  3, 0, 0.15) 70%,

      transparent          100%

    );

}

/* ── 水洗いオーバーレイ ── */

#water-wash {

  position: fixed;

  inset: 0;

  z-index: 9999;

  pointer-events: none;

  opacity: 0;

  /* 清涼な青の波 */

  background: linear-gradient(

    to bottom,

    rgba(20,  80, 200, 0.00) 0%,

    rgba(30, 100, 220, 0.82) 25%,

    rgba(50, 140, 255, 0.95) 50%,

    rgba(30, 100, 220, 0.82) 75%,

    rgba(20,  80, 200, 0.00) 100%

  );

}

#water-wash.active {

  animation: water-wash-sweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;

}

@keyframes water-wash-sweep {

  0%   { opacity: 0;    transform: translateY(-110%); }

  15%  { opacity: 0.95; transform: translateY(-30%);  }

  50%  { opacity: 1.00; transform: translateY( 20%);  }

  85%  { opacity: 0.90; transform: translateY( 70%);  }

  100% { opacity: 0;    transform: translateY( 110%); }

}

/* ── クリック残り火バースト ── */

@keyframes ember-burst {

  0%   { transform: translate(0, 0)              scale(1.0); opacity: 1.0; }

  40%  { transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.6)) scale(0.7); opacity: 0.8; }

  100% { transform: translate(var(--tx), var(--ty)) scale(0.05); opacity: 0.0; }

}

/* ── 見出し炎テキスト効果 ── */

.fire-heading {

  animation: heading-burn 4.5s ease-in-out infinite;

}

@keyframes heading-burn {

  0%,  100% { text-shadow: 0 0  4px rgba(255,120,40,0.35); }

  20%        { text-shadow: 0 0  8px rgba(255,150,50,0.65), 0 0 16px rgba(255,80, 0,0.35); }

  40%        { text-shadow: 0 0  3px rgba(255, 90,20,0.25); }

  65%        { text-shadow: 0 0 10px rgba(255,165,60,0.75), 0 0 22px rgba(255,95, 0,0.45); }

  85%        { text-shadow: 0 0  5px rgba(255,110,30,0.40); }

}

/* ── strong タグ高温テキスト効果 ── */

.fire-strong {

  color: #ffd580 !important;

  animation: strong-burn 2.8s ease-in-out infinite;

}

@keyframes strong-burn {

  0%,  100% { text-shadow: none;                                      color: #ffd580; }

  35%        { text-shadow: 0 0 6px rgba(255,165,40,0.80);            color: #ffe8a0; }

  70%        { text-shadow: 0 0 3px rgba(255,120,20,0.50);            color: #ffcc60; }

}

/* ── 見出し火花（heading spark）── */

.heading-spark {

  position: fixed;

  border-radius: 50%;

  pointer-events: none;

  z-index: 9001;

  animation: heading-spark-fly var(--dur, 0.9s) ease-out forwards;

}

@keyframes heading-spark-fly {

  0%   { transform: translate(0, 0)                                    scale(1.0); opacity: 1.0; }

  30%  { transform: translate(calc(var(--sx) * 0.4), calc(var(--sy) * 0.35)) scale(0.8); opacity: 0.9; }

  100% { transform: translate(var(--sx), var(--sy))                   scale(0.0); opacity: 0.0; }

}

/* ── ホバー熱感エフェクト ── */

.heat-active {

  border-color: rgba(255, 170, 70, 0.60) !important;

  box-shadow:

    0 10px 40px rgba(0, 0, 0, 0.60),

    0 0 32px rgba(255, 120, 40, 0.30),

    inset 0 0 8px rgba(255, 100, 30, 0.25) !important;

}

/* ============================================================

   17. Hero Section（ファーストビュー）

============================================================ */

/* ── コンテナ ── */

.hero-section {

  position: relative;

  width: 100%;

  /* SP: ヘッダー (56px) を除いた全画面高さ */

  min-height: calc(100svh - 56px);

  overflow: hidden;

  flex-shrink: 0;

}

/* ── レスポンシブメディアコンテナ ── */

.hero-media {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}

/* モバイル用（768px未満） */

.hero-media-mobile {

  display: block;

}

.hero-media-pc {

  display: none;

}

/* ── 背景メディア（画像・動画 共通） ── */

.hero-bg-media {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

/* ── 暗化オーバーレイ（炎テーマ：ディープレッド） ── */

.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to bottom,

    rgba(5, 2, 0, 0.35) 0%,

    rgba(5, 2, 0, 0.50) 65%,

    rgba(5, 2, 0, 0.72) 100%

  );

  z-index: 1;

}

/* ── テキストオーバーレイコンテナ ── */

.hero-content {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: clamp(1.5rem, 6vw, 4rem);

}

.hero-align-center { align-items: center; text-align: center; }

.hero-align-left   { align-items: flex-start; text-align: left; }

.hero-align-right  { align-items: flex-end;   text-align: right; }

/* ── ヒーロー内テキスト（fluid typography） ── */

.hero-content h1 {

  font-size: clamp(1.8rem, 6vw, 4rem);

  font-weight: 700;

  color: #fff3e0;

  line-height: 1.15;

  margin: 0 0 0.45em;

  text-shadow:

    0 2px 16px rgba(0, 0, 0, 0.88),

    0 0  32px rgba(255, 100, 30, 0.55);

  animation: fire-title-flicker 3.5s ease-in-out infinite;

  filter: url(#fire-glow);

  border: none;

  box-shadow: none;

  padding: 0;

}

.hero-content h2 {

  font-size: clamp(1.4rem, 4vw, 2.8rem);

  font-weight: 600;

  color: var(--color-heading);

  line-height: 1.2;

  margin: 0 0 0.5em;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);

  border: none;

  box-shadow: none;

  padding: 0;

}

.hero-content p {

  font-size: clamp(0.95rem, 2.6vw, 1.3rem);

  color: rgba(240, 219, 194, 0.92);

  line-height: 1.7;

  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);

  margin: 0;

  max-width: 680px;

}

.hero-content h1 + p,

.hero-content h2 + p { margin-top: 0.4em; }

/* ── レスポンシブメディア切り替え (768px以上 = PC) ── */

@media (min-width: 768px) {

  .hero-media-mobile {

    display: none;

  }

  .hero-media-pc {

    display: block;

  }

}

/* ── PC: 固定高さ 600px ── */

@media (min-width: 768px) {

  .hero-section {

    min-height: unset;

    aspect-ratio: 16 / 6;

  }

}

/* ============================================================

   18. @media (prefers-reduced-motion: reduce)

============================================================ */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation: none !important;

    transition: none !important;

  }

  html { scroll-behavior: auto; }

  .glass-card:hover { transform: none; }

  #water-wash.active { display: none; }

}

/* ===== ショートコード: カテゴリ・ピラーカードグリッド ===== */

.sc-categories-grid,

.sc-pillars-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 1rem;

  margin: 1.5rem 0;

}

/* ピラーグリッドは2カラムレイアウト */

.sc-pillars-grid {

  grid-template-columns: repeat(2, 1fr) !important;

}

.sc-category-card,

.sc-pillar-card {

  display: flex;

  flex-direction: column;

  text-decoration: none;

  border-radius: 10px;

  overflow: hidden;

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,200,100,0.15);

  transition: transform .18s, box-shadow .18s, border-color .18s;

  position: relative;

}

.sc-pillar-card-link {

  text-decoration: none;

  color: inherit;

}

.sc-pillar-card-link::after {

  content: "";

  position: absolute;

  inset: 0;

}

.sc-pillar-children,

.sc-pillar-children li a {

  position: relative;

  z-index: 1;

}

.sc-category-card:hover,

.sc-pillar-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 24px rgba(255,100,0,0.18);

  border-color: rgba(255,140,0,0.4);

}

.sc-card-img {

  width: 100%;

  height: 110px;

  object-fit: cover;

  display: block;

}

.sc-category-body,

.sc-pillar-body {

  padding: .65rem .8rem;

  display: flex;

  flex-direction: column;

  gap: .3rem;

  flex: 1;

}

.sc-category-name,

.sc-pillar-title {

  font-weight: 600;

  font-size: .92rem;

  color: #ffd080;

  line-height: 1.3;

}

.sc-category-desc,

.sc-pillar-desc {

  font-size: .78rem;

  color: rgba(255,255,255,0.6);

  line-height: 1.4;

  flex: 1;

}

.sc-category-count,

.sc-pillar-meta {

  font-size: .72rem;

  color: rgba(255,255,255,0.45);

  margin-top: auto;

}

.sc-pillar-children {

  list-style: none;

  padding: 0;

  margin: .4rem 0 0;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  gap: .2rem .4rem;

}

.sc-pillar-children li a {

  font-size: .75rem;

  color: rgba(255,200,100,0.75);

  text-decoration: none;

}

.sc-pillar-children li a:hover { text-decoration: underline; }

.sc-pillar-more {

  font-size: .72rem;

  color: rgba(255,255,255,0.35);

}

/* ブログイントロ（blog-index.md の本文） */

.blog-intro {

  margin-bottom: 2rem;

}

/* === FAQ アコーディオン === */

.faq-section {

  margin: 2rem 0 1.5rem;

}

.faq-heading {

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: .85rem;

  color: var(--text, #e2e8f0);

}

.faq-item {

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 8px;

  margin-bottom: .5rem;

  overflow: hidden;

  background: rgba(255,255,255,0.03);

}

.faq-question {

  padding: .85rem 1.1rem;

  cursor: pointer;

  font-weight: 600;

  font-size: .95rem;

  list-style: none;

  display: flex;

  justify-content: space-between;

  align-items: center;

  user-select: none;

}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {

  content: "＋";

  font-size: 1rem;

  flex-shrink: 0;

  margin-left: .5rem;

  opacity: .7;

}

details[open] > .faq-question::after { content: "－"; }

.faq-answer {

  padding: 0 1.1rem .85rem;

  font-size: .9rem;

  line-height: 1.75;

  color: var(--text-muted, rgba(226,232,240,0.75));

}

/* ============================================================
   目次（TOC）
============================================================ */
.toc-section {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  background: rgba(79, 195, 247, 0.05);
  border: 1px solid rgba(79, 195, 247, 0.18);
  border-radius: 10px;
}
.toc-heading {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
  color: var(--color-text-muted);
}
.toc-content ul {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
}
.toc-content li { margin: 0.3rem 0; }
.toc-content a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.85rem;
}
.toc-content a:hover { text-decoration: underline; }

/* ============================================================
   子ページ一覧（ピラーページ）
============================================================ */
.child-posts-list {
  margin: 2rem 0 1.5rem;
  padding: 1.2rem 1.4rem;
  background: rgba(79, 195, 247, 0.05);
  border: 1px solid rgba(79, 195, 247, 0.18);
  border-radius: 10px;
}

.child-posts-heading {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.8rem;
  padding: 0;
}

.child-posts-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.child-post-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s;
}

.child-post-link:hover { background: rgba(79, 195, 247, 0.08); }

.child-post-arrow {
  color: var(--color-primary);
  font-size: 0.85rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.child-post-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.child-post-title {
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.15s;
}

.child-post-link:hover .child-post-title { color: var(--color-primary); }

.child-post-desc {
  color: var(--color-text-muted);
  font-size: 0.77rem;
  line-height: 1.4;
}