@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =====================================================================
   1. ブランド変数（このサイト専用。--shanabi-* 接頭辞で衝突回避）
   ===================================================================== */
:root {
  /* 夜空の紺〜黒ランプ */
  --shanabi-bg:        #0C1424; /* ページ最背面（深い夜空） */
  --shanabi-surface:   #141D33; /* 記事・カードの面 */
  --shanabi-surface-2: #1B2742; /* テーブル偶数行・ホバーなど一段明るい面 */
  --shanabi-headfoot:  #0A111E; /* ヘッダー/フッター（ほぼ黒紺） */
  --shanabi-border:    rgba(255, 255, 255, 0.12);

  /* 文字 */
  --shanabi-text:      #E6E9EF; /* 本文 */
  --shanabi-muted:     #9AA4B8; /* 補足・キャプション */

  /* 花火の暖色アクセント */
  --shanabi-accent:    #FF8A3D; /* 主アクセント（オレンジ＝CTA・メイン） */
  --shanabi-accent-2:  #FFD34D; /* 金色のスパーク（見出し装飾・強調） */
  --shanabi-accent-3:  #FF6B8A; /* 桃色のスパーク（差し色） */
  --shanabi-link:      #FFB070; /* リンク文字（ダーク背景で読める明るめ暖色） */
  --shanabi-link-hover:#FFD34D;

  /* SWELL の内部変数も上書き（カスタマイザーを使わない場合の保険） */
  --color_main:        #FF8A3D;
  --color_main_rgb:    255, 138, 61;
  --color_text:        #E6E9EF;
  --color_link:        #FFB070;
  --color_border:      rgba(255, 255, 255, 0.12);
}


/* =====================================================================
   2. ベース（背景・本文テキスト）
   ===================================================================== */
body {
  background-color: var(--shanabi-bg);
  color: var(--shanabi-text);
}

/* メイン記事エリア・コンテンツ面を一段持ち上げて可読性を確保 */
.l-mainArea,
#main,
.l-articleBody,
.p-postList,
.archive_header {
  background-color: transparent;
  color: var(--shanabi-text);
}

/* 記事本文・カードの「面」 */
article.p-blogCard,
.c-postList__item,
.swell-block-postLink,
.p-postContent .swell-block-box,
.is-style-blank_box {
  background-color: var(--shanabi-surface);
  border-color: var(--shanabi-border);
}

/* 補足・日付・キャプション */
.post-meta,
.c-postList__date,
.wp-element-caption,
figcaption,
small {
  color: var(--shanabi-muted) !important;
}


/* =====================================================================
   3. ヘッダー（地域カテゴリのナビを置く想定 / handoff §5）
   ===================================================================== */
.l-header,
.c-gnav,
.l-header__inner,
.c-gnavMenu {
  background-color: var(--shanabi-headfoot);
  color: var(--shanabi-text);
  border-bottom: 1px solid var(--shanabi-border);
}

/* グローバルナビのリンク */
.c-gnav a,
.l-header a {
  color: var(--shanabi-text);
}
.c-gnav a:hover,
.l-header a:hover {
  color: var(--shanabi-accent);
}

/* テキストロゴ（まずはテキストで開始 / handoff §5）。花火の暖色グラデを一文字に */
.c-headLogo__title,
.site-title a {
  color: var(--shanabi-text);
}
.c-headLogo__title .is-spark,
.site-title .is-spark {
  background: linear-gradient(90deg, var(--shanabi-accent), var(--shanabi-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =====================================================================
   4. フッター（法的4ページはここへ移動する想定 / handoff §5）
   ===================================================================== */
.l-footer,
.l-footer__inner,
.c-widgetFooter,
.p-footerNav {
  background-color: var(--shanabi-headfoot);
  color: var(--shanabi-muted);
  border-top: 1px solid var(--shanabi-border);
}
.l-footer a,
.p-footerNav a {
  color: var(--shanabi-muted);
}
.l-footer a:hover,
.p-footerNav a:hover {
  color: var(--shanabi-accent);
}


/* =====================================================================
   5. リンク・見出し
   ===================================================================== */
.p-postContent a,
.article a {
  color: var(--shanabi-link);
  text-underline-offset: 0.18em;
}
.p-postContent a:hover,
.article a:hover {
  color: var(--shanabi-link-hover);
}

/* h2：花火が一発上がるような左ボーダー＋淡いグラデ下線 */
.p-postContent h2,
.article h2 {
  color: var(--shanabi-text);
  border: none;
  border-left: 5px solid var(--shanabi-accent);
  padding: 0.2em 0 0.3em 0.6em;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(255, 138, 61, 0.12) 100%
  );
}

/* h3：小さなスパークを先頭に */
.p-postContent h3,
.article h3 {
  color: var(--shanabi-text);
  border: none;
  padding-left: 1.1em;
  position: relative;
}
.p-postContent h3::before,
.article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: radial-gradient(circle, var(--shanabi-accent-2), var(--shanabi-accent));
  box-shadow: 0 0 6px rgba(255, 211, 77, 0.7);
}


/* =====================================================================
   6. テーブル（日程順テーブルが集客記事の主役。可読性最優先）
   ===================================================================== */
.p-postContent table,
.article table {
  border-color: var(--shanabi-border);
}
.p-postContent table th,
.article table th {
  background-color: var(--shanabi-headfoot);
  color: var(--shanabi-accent-2);
  border-color: var(--shanabi-border);
}
.p-postContent table td,
.article table td {
  background-color: var(--shanabi-surface);
  color: var(--shanabi-text);
  border-color: var(--shanabi-border);
}
/* 偶数行を一段明るく（ストライプ） */
.p-postContent table tr:nth-child(even) td,
.article table tr:nth-child(even) td {
  background-color: var(--shanabi-surface-2);
}


/* =====================================================================
   7. ボタン全般（SWELLのボタンブロック）
   ===================================================================== */
.wp-block-button__link,
.swell-block-button a {
  background-color: var(--shanabi-accent);
  color: #1A0E03;
  border: none;
}
.wp-block-button__link:hover,
.swell-block-button a:hover {
  background-color: var(--shanabi-accent-2);
  color: #1A0E03;
}


/* =====================================================================
   8. このサイト専用ユーティリティクラス
   ---------------------------------------------------------------------
   記事内では「カスタムHTMLブロック」または「クラス付け」で使う。
   下書き(article-01/02)の <!-- 免責ボックス / PR表記 / CTA --> をこれで実装する。
   ===================================================================== */

/* --- 8-1. 開催情報の免責ボックス（記事冒頭の ⚠ ボックス / handoff §7・§15-4） ---
   使い方（カスタムHTMLブロック）:
   <div class="shanabi-alert">
     <strong>⚠ 2026年◯月◯日時点の情報です。</strong>
     開催可否・日程・内容は変更の可能性があります。最新情報は必ず公式発表でご確認ください。
   </div> */
.shanabi-alert {
  background-color: rgba(255, 211, 77, 0.08);
  border: 1px solid var(--shanabi-accent-2);
  border-left: 5px solid var(--shanabi-accent-2);
  border-radius: 6px;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  color: var(--shanabi-text);
  font-size: 0.95em;
  line-height: 1.8;
}
.shanabi-alert strong {
  color: var(--shanabi-accent-2);
}

/* --- 8-2. PR表記バッジ（ステマ規制対応 / handoff §7・§15-1） ---
   ※SWELLの「広告（PR）表記機能」がある場合はそちらを優先。
     手動で出したいとき用のバッジ。
   使い方: <span class="shanabi-pr">PR</span> または記事冒頭に
   <p class="shanabi-pr-note"><span class="shanabi-pr">PR</span> 本記事はプロモーションを含みます。</p> */
.shanabi-pr {
  display: inline-block;
  background-color: var(--shanabi-muted);
  color: var(--shanabi-bg);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.1em 0.55em;
  border-radius: 3px;
  vertical-align: middle;
}
.shanabi-pr-note {
  color: var(--shanabi-muted);
  font-size: 0.85em;
  margin: 0.5em 0 1.5em;
}

/* --- 8-3. 駐車場予約CTA（収益記事の主力ゴール / site-design-sheet §5・C） ---
   1記事1ゴール＝駐車場予約。視線が必ず止まるよう暖色で強く。
   使い方:
   <div class="shanabi-cta">
     <p class="shanabi-cta__lead">満車リスクをなくすなら、行く前に駐車場を確保</p>
     <a class="shanabi-cta__btn" href="#" rel="sponsored nofollow noopener" target="_blank">
       周辺の駐車場を予約する
     </a>
     <p class="shanabi-cta__note"><span class="shanabi-pr">PR</span> 提携サービスへのリンクを含みます</p>
   </div> */
.shanabi-cta {
  background: linear-gradient(135deg, #1B2742 0%, #241636 100%);
  border: 1px solid rgba(255, 138, 61, 0.4);
  border-radius: 12px;
  padding: 1.6em 1.4em;
  margin: 2em 0;
  text-align: center;
  box-shadow: 0 0 24px rgba(255, 138, 61, 0.12);
}
.shanabi-cta__lead {
  color: var(--shanabi-text);
  font-weight: 700;
  font-size: 1.08em;
  margin: 0 0 0.9em;
}
.shanabi-cta__btn {
  display: inline-block;
  background: linear-gradient(90deg, var(--shanabi-accent), var(--shanabi-accent-3));
  color: #1A0E03 !important;
  font-weight: 700;
  text-decoration: none !important;
  padding: 0.85em 2.4em;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 18px rgba(255, 138, 61, 0.35);
}
.shanabi-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 138, 61, 0.5);
  color: #1A0E03 !important;
}
.shanabi-cta__note {
  color: var(--shanabi-muted);
  font-size: 0.8em;
  margin: 0.8em 0 0;
}

/* --- 8-4. 更新日バッジ（鮮度シグナル / site-design-sheet §10・§11） ---
   使い方: <span class="shanabi-updated">2026年◯月◯日 更新</span> */
.shanabi-updated {
  display: inline-block;
  color: var(--shanabi-accent-2);
  font-size: 0.85em;
  font-weight: 700;
}
.shanabi-updated::before {
  content: "🎆 ";
}


/* =====================================================================
   9. スマホ最適化（花火検索はモバイル比率が高い想定）
   ===================================================================== */
@media (max-width: 599px) {
  .shanabi-cta {
    padding: 1.3em 1em;
  }
  .shanabi-cta__btn {
    display: block;
    padding: 0.9em 1em;
  }
  /* 日程テーブルは横スクロール可能に（崩さず読ませる） */
  .p-postContent .swell-block-table,
  .article .wp-block-table {
    overflow-x: auto;
  }
}