/*
Theme Name: 日光チャレンジロード
Theme URI:  https://x.com/n_challe
Description: 個人主催のスポーツ・モータースポーツイベント向けWordPressテーマ。個人主催者がほしい「これだった」を再現した、かゆいところに手が届くテンプレート。
Author:     合同会社xtion-works × officemotokids
Author URI: https://x.com/n_challe
Version:    2.2.0
License:    GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: challenge-road-child
Tags:       one-column, custom-menu, featured-images, theme-options

Challenge Road Child is a child theme of Cocoon, released under the GNU General Public License v2 or later.

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

Based on Cocoon by わいひら / https://wp-cocoon.com/
Cocoon is licensed under the GPL v2 or later.
*/

/* ========================================
   CSS変数（カラーパレット）
   ======================================== */
:root {
  --color-bg:         #121212;
  --color-bg-sub:     #1a1a1a;
  --color-bg-header:  #0a0a0a;
  --color-accent:     #e87820;
  --color-accent-sub: #1a1a1a;
  --color-text-main:  #ffffff;
  --color-text-body:  #cccccc;
  --color-text-muted: #888888;
  --color-text-faint: #555555;
  --color-green-bg:   #0a1a0a;
  --color-green-main: #5fc05f;
  --color-green-btn:  #2a5a2a;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: var(--color-bg);
}

body {
  overflow-x: hidden;
  font-family: 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-body);
  background-color: transparent;
  
  -webkit-font-smoothing: antialiased;
}


/* ========================================
   固定背景レイヤー（スクロールで画像が切り替わる）
   ======================================== */
.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1s ease;
  pointer-events: none;
  display: block;
  visibility: visible;
  overflow: hidden;
}

.fixed-bg .bg-layer {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
  display: block;
  visibility: visible;
}

.fixed-bg .bg-layer.is-active {
  opacity: 1;
}

/* 背景の上にかぶせるオーバーレイ（写真を少し薄くする） */
.fixed-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

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

a:hover {
  color: var(--color-text-main);
  transition: color 0.2s;
}

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

/* 途中で改行させたくないテキスト */
.nowrap {
  white-space: nowrap;
}

/* ========================================
   掲示板（LINE風チャットUI）
   ======================================== */
.cr-bbs {
  max-width: 520px;
  margin: 20px auto;
  padding: 0 8px;
}

.cr-bbs-notice {
  padding: 10px 14px;
  margin: 0 8px 12px;
  border-left: 3px solid;
  font-size: 13px;
  border-radius: 4px;
}

.cr-bbs-notice.cr-bbs-error {
  background-color: rgba(231, 76, 60, 0.1);
  border-color: #e74c3c;
  color: #ff8a75;
}

.cr-bbs-notice.cr-bbs-success {
  background-color: rgba(95, 192, 95, 0.1);
  border-color: var(--color-green-main);
  color: var(--color-green-main);
}

/* チャット全体 */
.cr-chat {
  background-color: #8ca7c4;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 75vh;
  min-height: 500px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* チャットヘッダー */
.cr-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background-color: #3a5979;
  color: #fff;
  flex-shrink: 0;
}

.cr-chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.cr-chat-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cr-chat-header-info {
  flex: 1;
}

.cr-chat-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.cr-chat-header-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

/* メッセージエリア */
.cr-chat-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px;
  background-color: #8ca7c4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  touch-action: pan-y;
}

.cr-chat-body::-webkit-scrollbar {
  width: 6px;
}
.cr-chat-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* 「もっと見る」 */
.cr-chat-loadmore {
  text-align: center;
  margin-bottom: 4px;
}

.cr-chat-loadmore a {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.85);
  color: #3a5979;
  font-size: 12px;
  text-decoration: none;
  border-radius: 12px;
}

/* 日付区切り */
.cr-chat-date {
  text-align: center;
  margin: 10px 0;
}

.cr-chat-date span {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 11px;
  border-radius: 12px;
}

/* メッセージ共通 */
.cr-chat-msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
}

/* ユーザー側（左） */
.cr-chat-msg-user {
  align-self: flex-start;
}

.cr-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #fff;
  color: #3a5979;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.cr-chat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cr-chat-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3px;
  padding: 0 4px;
}

.cr-chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.cr-chat-bubble {
  background-color: #fff;
  color: #1a1a1a;
  padding: 8px 12px;
  border-radius: 14px;
  border-top-left-radius: 2px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

.cr-chat-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

/* 管理者側（右） */
.cr-chat-msg-admin {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.cr-chat-msg-admin .cr-chat-content {
  align-items: flex-end;
}

.cr-chat-msg-admin .cr-chat-name {
  text-align: right;
}

.cr-chat-msg-admin .cr-chat-bubble {
  background-color: #7ac87a;
  color: #1a1a1a;
  border-radius: 14px;
  border-top-right-radius: 2px;
}

/* 空のメッセージエリア */
.cr-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 40px 20px;
}

.cr-chat-empty p:first-child {
  font-size: 40px;
  margin-bottom: 10px;
}

.cr-chat-empty p {
  margin: 4px 0;
  font-size: 14px;
}

.cr-chat-empty-sub {
  font-size: 12px !important;
  opacity: 0.7;
}

/* ===== 管理者モード ===== */
.cr-admin-mode-bar {
  background: linear-gradient(135deg, #e87820, #f5b300);
  color: #fff;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.cr-admin-logout {
  color: #fff;
  font-size: 10px;
  opacity: 0.9;
  text-decoration: underline;
}

.cr-admin-logout:hover {
  color: #fff;
  opacity: 1;
}

/* 返信アクションボタン（投稿直後に表示） */
.cr-chat-admin-action {
  margin-left: 44px;
  margin-top: -4px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cr-chat-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(232, 120, 32, 0.3);
  transition: background-color 0.2s, transform 0.1s;
}

.cr-chat-reply-btn:hover {
  background: #f59030;
}

.cr-chat-reply-btn:active {
  transform: scale(0.95);
}

.cr-chat-reply-btn-more {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
  font-size: 11px;
  padding: 4px 10px;
}

.cr-chat-reply-btn-more:hover {
  background: rgba(255, 255, 255, 0.25);
}

.cr-chat-unanswered-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: 1px;
}

/* ===== 返信モーダル（ボトムシート） ===== */
.cr-reply-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.cr-reply-modal.is-open {
  display: block;
}

.cr-reply-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: crFadeIn 0.2s ease;
}

@keyframes crFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cr-reply-modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  animation: crSlideUp 0.25s ease;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

@keyframes crSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.cr-reply-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.cr-reply-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 50%;
}

.cr-reply-close:hover {
  background: #f0f0f0;
}

.cr-reply-modal-content textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px; /* 16px未満だとiOSでズームされる */
  font-family: inherit;
  resize: none;
  min-height: 100px;
  box-sizing: border-box;
}

.cr-reply-modal-content textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.cr-reply-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.cr-reply-modal-footer #crReplyCount {
  font-size: 12px;
  color: #888;
}

.cr-reply-submit {
  padding: 12px 28px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 120px;
}

.cr-reply-submit:hover {
  background: #f59030;
}

.cr-reply-submit:active {
  transform: scale(0.97);
}

/* iOS Safariでのキーボード対応 */
@media (max-width: 767px) {
  .cr-reply-modal-content {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .cr-reply-modal-content textarea {
    min-height: 80px;
  }
}

/* 入力フォーム（画面下部） */
.cr-chat-input {
  background-color: #e5e5e5;
  padding: 10px 12px;
  flex-shrink: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.cr-chat-input-name-row {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.cr-chat-input-name {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  background: #fff;
  color: #1a1a1a;
  border-radius: 20px;
  font-size: 13px;
  font-family: inherit;
}

.cr-chat-refresh {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, background-color 0.2s;
}

.cr-chat-refresh:hover {
  background-color: #e0e0e0;
  transform: rotate(180deg);
}

.cr-chat-refresh:active {
  transform: rotate(360deg);
}

.cr-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.cr-chat-input-row textarea {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ccc;
  background: #fff;
  color: #1a1a1a;
  border-radius: 18px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  min-height: 36px;
  max-height: 120px;
  line-height: 1.4;
  box-sizing: border-box;
}

.cr-chat-input-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.cr-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.cr-chat-send:hover {
  background-color: #f59030;
}

.cr-chat-input-counter {
  font-size: 10px;
  color: #666;
  text-align: right;
  margin-top: 4px;
  padding: 0 4px;
}

/* 通知メッセージ（入力欄の下） */
.cr-chat-notice {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  animation: crChatNoticeIn 0.3s ease;
}

.cr-chat-notice-success {
  background-color: #e6f7e6;
  color: #2e7d32;
  border-left: 3px solid #4caf50;
}

.cr-chat-notice-error {
  background-color: #fde8e8;
  color: #c62828;
  border-left: 3px solid #e74c3c;
}

@keyframes crChatNoticeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* モバイル調整 */
@media (max-width: 767px) {
  .cr-bbs {
    padding: 0;
    margin: 0;
  }
  .cr-chat {
    border-radius: 0;
    height: calc(100vh - 60px);
    min-height: 400px;
  }
  .cr-chat-msg {
    max-width: 90%;
  }
  .cr-chat-bubble {
    font-size: 13px;
  }

  /* ========== 掲示板ページ限定：モバイルで全画面チャット ========== */
  body.cr-bbs-page {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* ヘッダー・フッター・サイドナビ・背景を非表示 */
  body.cr-bbs-page .site-header,
  body.cr-bbs-page .site-footer,
  body.cr-bbs-page .side-nav-left,
  body.cr-bbs-page .side-nav-right,
  body.cr-bbs-page .fixed-bg,
  body.cr-bbs-page .article-back,
  body.cr-bbs-page .article-title,
  body.cr-bbs-page .article-meta,
  body.cr-bbs-page .article-thumbnail,
  body.cr-bbs-page .article-cta {
    display: none !important;
  }

  /* ページラッパーを全画面に */
  body.cr-bbs-page,
  body.cr-bbs-page .page-body,
  body.cr-bbs-page main.lp-main,
  body.cr-bbs-page .article-page,
  body.cr-bbs-page .article-body,
  body.cr-bbs-page .article-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
    height: 100%;
    background: transparent !important;
  }

  /* 掲示板本体を全画面に（右端ストリップの分は空ける） */
  body.cr-bbs-page .cr-bbs {
    position: fixed;
    top: 0;
    left: 0;
    right: 40px;
    bottom: 0;
    z-index: 900;
  }

  body.cr-bbs-page .cr-chat {
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  /* 右端の固定ストリップ（( Menu ) + 事前エントリー）だけは残す → メニュー操作可能 */
  body.cr-bbs-page .fixed-right-strip {
    display: flex !important;
    z-index: 1001;
  }

  /* モバイルメニューオーバーレイ表示時はチャット上に乗る */
  body.cr-bbs-page .mobile-menu {
    z-index: 1100;
  }
}

/* PC表示では少し大きめに */
@media (min-width: 1024px) {
  .cr-bbs {
    max-width: 600px;
  }
  .cr-chat {
    height: 80vh;
  }
}

/* ========================================
   #gallery — ギャラリー（モバイルファースト）
   ======================================== */
.gallery-grid {
  display: grid;
  /* モバイル: 2列 */
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg-sub);
}

.gallery-item .gallery-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item .gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* タブレット以上: 3列 */
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .gallery-item .gallery-caption {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* PC: 4列 */
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .gallery-item .gallery-caption {
    opacity: 1;
    font-size: 12px;
  }
}

/* 大きいPC: 5列 */
@media (min-width: 1600px) {
  .gallery-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ========== ライトボックス（画像クリックで拡大） ========== */
.cr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}

.cr-lightbox.is-open {
  display: flex;
}

.cr-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.cr-lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 0 20px;
}

.cr-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cr-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.cr-lightbox-prev,
.cr-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cr-lightbox-prev { left: 20px; }
.cr-lightbox-next { right: 20px; }

.cr-lightbox-prev:hover,
.cr-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 767px) {
  .cr-lightbox-prev,
  .cr-lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .cr-lightbox-prev { left: 8px; }
  .cr-lightbox-next { right: 8px; }
}

/* ========================================
   記事ページ（投稿・固定ページ）
   ======================================== */
.article-page {
  background-color: var(--color-bg);
  padding: 60px 30px 80px;
  position: relative;
  z-index: 2;
}

.article-back {
  display: inline-block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 40px;
  border-bottom: 1px solid var(--color-text-faint);
  padding-bottom: 2px;
}

.article-back:hover {
  color: var(--color-text-main);
}

.article-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.article-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1.5;
  margin-bottom: 24px;
}

.article-thumbnail {
  margin-bottom: 32px;
}

.article-thumbnail img {
  width: 100%;
  height: auto;
}

.article-body p {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 2;
  margin-bottom: 24px;
}

.article-body h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-accent-sub);
}

.article-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-main);
  margin-top: 32px;
  margin-bottom: 12px;
}

.article-body ul,
.article-body ol {
  padding-left: 24px;
  margin-bottom: 24px;
}

.article-body li {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 2;
}

.article-body a {
  color: var(--color-accent);
  text-decoration: underline;
}

.article-body img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}

.article-cta {
  margin-top: 48px;
  padding: 32px;
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
  text-align: center;
}

.article-cta p {
  margin-bottom: 16px;
  color: var(--color-text-body);
}

@media (min-width: 1400px) {
  .article-title {
    font-size: 28px;
  }
}

/* ========================================
   WPForms — ダークテーマ用の調整
   ======================================== */
.wpforms-container {
  color: var(--color-text-body);
}

.wpforms-container label,
.wpforms-field-label,
.wpforms-field-sublabel {
  color: var(--color-text-main) !important;
  font-weight: 500;
}

.wpforms-container .wpforms-field-description,
.wpforms-field-label-inline {
  color: var(--color-text-body) !important;
}

/* 入力欄 */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="password"],
.wpforms-container input[type="date"],
.wpforms-container input[type="time"],
.wpforms-container select,
.wpforms-container textarea {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #555 !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  border-radius: 2px !important;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--color-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(232, 120, 32, 0.2) !important;
}

/* プレースホルダー */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: #999 !important;
}

/* チェックボックス・ラジオ */
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-radio label,
.wpforms-container ul.wpforms-field-checkbox li,
.wpforms-container ul.wpforms-field-radio li {
  color: var(--color-text-body) !important;
}

/* 送信ボタン */
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
  background-color: var(--color-accent) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 32px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
  background-color: #f59030 !important;
}

/* エラーメッセージ */
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error {
  color: #ff6b6b !important;
  font-size: 12px !important;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error {
  border-color: #ff6b6b !important;
}

/* 成功メッセージ */
.wpforms-confirmation-container {
  background-color: var(--color-green-bg) !important;
  color: var(--color-green-main) !important;
  border: 1px solid var(--color-green-main) !important;
  padding: 20px !important;
  border-radius: 2px !important;
}

/* 必須マーク */
.wpforms-container .wpforms-required-label {
  color: var(--color-accent) !important;
}

/* ========================================
   エントリー確認フォーム
   ======================================== */
.cr-entry-lookup {
  max-width: 500px;
  margin: 20px auto;
  padding: 32px 24px;
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
}

.cr-entry-lookup label {
  display: block;
  font-size: 13px;
  color: var(--color-text-main);
  margin-bottom: 8px;
  font-weight: 500;
}

.cr-entry-lookup input[type="email"] {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  background-color: #ffffff;
  color: #1a1a1a;
  border: 1px solid #555;
  border-radius: 2px;
  margin-bottom: 16px;
}

.cr-entry-lookup button {
  width: 100%;
  padding: 14px;
  background-color: var(--color-accent);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cr-entry-lookup button:hover {
  background-color: #f59030;
}

.cr-entry-result {
  margin-top: 24px;
  padding: 20px;
  border-radius: 2px;
}

.cr-entry-result.found {
  background-color: var(--color-green-bg);
  border: 1px solid var(--color-green-main);
  color: var(--color-green-main);
}

.cr-entry-result.not-found {
  background-color: rgba(255, 107, 107, 0.1);
  border: 1px solid #ff6b6b;
  color: #ff6b6b;
}

.cr-entry-result h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: inherit;
}

.cr-entry-result .entry-detail {
  color: var(--color-text-body);
  font-size: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* エントリー詳細の項目リスト */
.entry-field-list {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 13px;
}

.entry-field-list dt {
  color: var(--color-text-muted);
  font-weight: normal;
}

.entry-field-list dd {
  color: var(--color-text-body);
}

/* お問い合わせリンク */
.cr-contact-link a {
  display: inline-block;
  color: var(--color-accent) !important;
  font-size: 13px;
  padding: 8px 16px;
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  transition: all 0.2s;
}

.cr-contact-link a:hover {
  background-color: var(--color-accent);
  color: #ffffff !important;
}

/* ========================================
   エントリー一覧
   ======================================== */
.cr-entry-list {
  margin: 20px 0;
  padding: 24px;
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
}

.cr-entry-list-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-accent-sub);
}

.cr-entry-count {
  font-size: 14px;
  color: var(--color-text-body);
}

.cr-entry-count strong {
  color: var(--color-accent);
  font-size: 20px;
  margin: 0 4px;
}

.cr-entry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cr-entry-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-accent-sub);
  font-weight: 500;
  letter-spacing: 1px;
}

.cr-entry-table tbody td {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--color-text-body);
}

.cr-entry-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.cr-entry-list-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.cr-entry-list-empty {
  text-align: center;
  padding: 40px;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .cr-entry-table {
    font-size: 12px;
  }
  .cr-entry-table th,
  .cr-entry-table td {
    padding: 8px 6px;
  }
  .entry-field-list {
    grid-template-columns: 100px 1fr;
    font-size: 12px;
  }
}

/* ========================================
   タイポグラフィ
   ======================================== */
.hero-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text-main);
}

.section-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text-main);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.card-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text-main);
}

.body-text {
  font-size: 15px;
  line-height: 1.8;
}

.meta-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ========================================
   ヘッダー（モバイルファースト）
   ======================================== */
.site-header {
  position: relative;
  z-index: 1000;
  background-color: var(--color-bg-header);
  border-bottom: 1px solid var(--color-accent-sub);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header .site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: 1px;
}

.site-header .site-logo-img {
  display: block;
  max-height: 40px;
  width: auto;
}

.site-header .site-logo-text {
  display: inline-block;
}

/* ヘッダー内のメニューボタンは非表示（右端固定に移動） */
.hamburger {
  display: none;
}

.hamburger span {
  display: none;
}

/* ========================================
   右端固定: ( Menu ) + エントリーCTA（縦書き・常時表示）
   ======================================== */
.fixed-right-strip {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1001;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  background-color: rgba(30, 30, 30, 0.85);
}

.fixed-right-strip .strip-menu-btn {
  writing-mode: vertical-rl;
  font-size: 12px;
  color: var(--color-accent);
  letter-spacing: 3px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 8px 0;
  transition: color 0.3s;
}

.fixed-right-strip .strip-menu-btn:hover {
  color: #f59030;
}

.fixed-right-strip .strip-cta {
  writing-mode: vertical-rl;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fixed-right-strip .strip-cta-text {
  font-size: 13px;
  color: var(--color-text-main);
  letter-spacing: 3px;
}

.fixed-right-strip .strip-cta-link {
  font-size: 11px;
  color: var(--color-accent);
  letter-spacing: 2px;
  transition: color 0.3s;
}

.fixed-right-strip .strip-cta-link:hover {
  color: #f59030;
}

/* モバイルメニュー（全画面） */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background-color: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(4px);
  flex-direction: column;
  padding: 60px 32px 40px;
  overflow-y: auto;
}

.mobile-menu.is-open {
  display: flex;
}

/* 閉じるボタン */
.mobile-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  color: var(--color-accent);
  letter-spacing: 2px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  z-index: 1101;
}

.mobile-menu-close:hover {
  color: #f59030;
}

/* メニューリンク — PCの右パネルと同じ */
.mobile-menu .mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15px;
  color: var(--color-text-body);
  letter-spacing: 1px;
  transition: color 0.3s;
}

.mobile-menu .mobile-nav-link:hover {
  color: var(--color-text-main);
}

.mobile-menu .mobile-nav-link .arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
}

/* モバイルメニュー内のメッセージ */
.mobile-menu .mobile-message {
  margin-top: 24px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.8;
}

/* モバイルメニュー内の補助リンク */
.mobile-menu .mobile-sub {
  margin-top: 16px;
  font-size: 11px;
  display: flex;
  gap: 12px;
}

.mobile-menu .mobile-sub a {
  color: var(--color-text-faint);
}

/* モバイルメニュー内のエントリーCTA */
.mobile-menu .mobile-cta {
  margin-top: 28px;
  text-align: center;
}

.mobile-menu .mobile-cta .cta-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mobile-menu .mobile-cta .cta-bracket-open,
.mobile-menu .mobile-cta .cta-bracket-close {
  font-size: 36px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.mobile-menu .mobile-cta .cta-text {
  font-size: 16px;
  color: var(--color-text-main);
  letter-spacing: 2px;
  white-space: nowrap;
}

.mobile-menu .mobile-cta .cta-link {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

/* メニュー内の最新情報カード */
.mobile-news-card {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-news-card .mobile-news-date {
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

.mobile-news-card .mobile-news-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
}

.mobile-news-card .mobile-news-img {
  width: 70px;
  height: 50px;
  object-fit: cover;
  flex-shrink: 0;
}

.mobile-news-card .mobile-news-title {
  font-size: 12px;
  color: var(--color-text-body);
  line-height: 1.6;
}

.mobile-news-card .mobile-news-link {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  transition: color 0.3s;
}

.mobile-news-card .mobile-news-link:hover {
  color: var(--color-text-main);
}

/* メニュー背景オーバーレイ（メニュー外をタップで閉じる） */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
}

.mobile-menu-overlay.is-open {
  display: block;
}

/* モバイル セクションナビ（横スクロール）— 非表示 */
.section-nav-sp {
  display: none;
}

.section-nav-sp a {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}

.section-nav-sp a.is-active {
  color: var(--color-text-main);
  border-bottom-color: var(--color-accent);
}

/* ========================================
   ヒーローセクション
   ======================================== */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  position: relative;
  overflow: visible;
  background: transparent;
  margin-bottom: -60px;
  padding-bottom: 120px;
}

/* ヒーロー内のテキストを見やすく — 半透明の背景パネル */
#hero .hero-inner {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 40px 60px;
  text-align: center;
}

#hero .hero-logo {
  display: block;
  max-width: 240px;
  width: auto;
  height: auto;
  margin: 0 auto 20px;
}

#hero .hero-title {
  color: var(--color-text-main);
}

#hero .hero-subtitle {
  color: var(--color-text-body);
}

#hero .hero-date {
  color: var(--color-text-body);
}

/* PC表示ではbrを無効にして1行に */
#hero .hero-date br {
  display: none;
}

/* ヒーローのCTAボタン */
#hero .hero-cta {
  position: relative;
  z-index: 2;
}

#hero .hero-subtitle {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

#hero .hero-date {
  font-size: 16px;
  color: var(--color-text-body);
  margin-top: 20px;
}

#hero .hero-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
}

/* ボタン共通 */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-text-main);
}

.btn-primary:hover {
  background-color: #f59030;
  color: #ffffff;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text-main);
  border: 1px solid var(--color-text-muted);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-text-main);
}

/* ========================================
   セクション共通
   ======================================== */
.page-body {
  background-color: transparent;
  position: relative;
  z-index: 2;
}

.lp-section {
  padding: 80px 20px;
  position: relative;
  overflow: visible;
  background-color: var(--color-bg);
  margin-bottom: 40px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  /* フェードイン初期状態 — 下に30pxずれて透明 */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* スクロールで画面に入ったらフェードイン */
.lp-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 偶数セクションに白背景 */
.lp-section:nth-child(even) {
  background-color: var(--color-bg-sub);
}

/* セクション上部の斜め */
.lp-section::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 30px;
  background: inherit;
  transform: skewY(-1.2deg);
  z-index: -1;
}

/* 画鋲（ピン）装飾 — 左上と右上の2箇所 */
.lp-section .pin-left,
.lp-section .pin-right {
  position: absolute;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.lp-section .pin-left {
  left: 20px;
}

.lp-section .pin-right {
  right: 20px;
}

/* ピンの光沢 */
.lp-section .pin-left::after,
.lp-section .pin-right::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

/* --- 不規則な隙間とバリエーション --- */

/* 1番目: ニュース */
#news {
  margin-bottom: 260px;
}

#highlights {
  margin-bottom: 340px;
}
#highlights::before {
  transform: skewY(-1.8deg);
}

#classes {
  margin-bottom: 280px;
}
#classes::before {
  transform: skewY(1.2deg);
}

#gear {
  margin-bottom: 260px;
}
#gear::before {
  transform: skewY(-1.5deg);
}
#news::before {
  transform: skewY(-0.8deg);
}

/* 2番目: イベント */
#event {
  margin-bottom: 450px;
}
#event::before {
  transform: skewY(1.5deg);
}

/* 3番目: ガイドライン */
#guideline {
  margin-bottom: 300px;
}
#guideline::before {
  transform: skewY(-2deg);
}

/* 4番目: コース — 一番広い */
#course {
  margin-bottom: 525px;
}
#course::before {
  transform: skewY(0.5deg);
}

/* 5番目: アクセス */
#access {
  margin-bottom: 340px;
}
#access::before {
  transform: skewY(-1.8deg);
}

/* 6番目: エントリー */
#entry {
  margin-bottom: 375px;
}
#entry::before {
  transform: skewY(1deg);
}

/* 7番目: FAQ — 最後 */
#flow {
  margin-bottom: 280px;
}
#flow::before {
  transform: skewY(1.2deg);
}

#faq {
  margin-bottom: 260px;
}
#faq::before {
  transform: skewY(-0.6deg);
}

#gallery {
  margin-bottom: 180px;
}
#gallery::before {
  transform: skewY(1deg);
}

/* 背景画像付きセクション（セクション間のアクセント） */
.photo-break {
  min-height: 50vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}

.photo-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.photo-break-content {
  position: relative;
  z-index: 1;
}

.photo-break-content h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 12px;
}

.photo-break-content p {
  font-size: 15px;
  color: var(--color-text-body);
  max-width: 500px;
  margin: 0 auto;
}

.lp-section .section-label {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.03);
  margin-bottom: -20px;
  position: relative;
  z-index: 0;
  /* 初期状態: 左にずれて透明 */
  transform: translateX(-40px);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.6s ease, color 0.4s ease;
}

/* セクションが見えたら: スライドイン */
.lp-section.is-visible .section-label {
  transform: translateX(0);
  opacity: 1;
}

/* セクションがアクティブ（今ここ）の時: 少し濃くなる */
.lp-section.is-current .section-label {
  color: rgba(255, 255, 255, 0.08);
}

/* ========================================
   #news — 新着情報
   ======================================== */
.news-list {
  list-style: none;
}

.news-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-accent-sub);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.news-item .news-date {
  font-size: 13px;
  color: var(--color-text-muted);
}

.news-item .news-title {
  font-size: 16px;
  color: var(--color-text-body);
  transition: color 0.2s;
}

.news-item .news-title:hover {
  color: var(--color-accent);
}

/* ========================================
   #event — 次回開催案内
   ======================================== */
.event-card {
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
  padding: 32px 24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  word-wrap: break-word;
}

.event-card dl {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px 16px;
  margin-top: 20px;
}

.event-card dt {
  font-size: 14px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  word-break: keep-all;
  padding-top: 2px;
}

.event-card dd {
  font-size: 18px;
  color: var(--color-text-body);
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.7;
}

/* ========================================
   #guideline — ガイドライン（2カラム）
   ======================================== */
.guideline-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.guideline-card {
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.guideline-card .card-number {
  font-size: 10px;
  color: var(--color-text-muted);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.guideline-card p {
  font-size: 15px;
  color: var(--color-text-body);
  margin-top: 12px;
}

/* ========================================
   #entry — エントリーCTA
   ======================================== */
#entry {
  background-color: var(--color-green-bg);
}

.entry-status {
  font-size: 14px;
  color: var(--color-green-main);
  font-weight: 500;
  margin-bottom: 20px;
}

.btn-entry {
  background-color: var(--color-green-btn);
  color: var(--color-green-main);
  padding: 16px 40px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  border: 1px solid var(--color-green-main);
  text-align: center;
  display: inline-block;
}

.btn-entry:hover {
  background-color: #3a7a3a;
  color: #ffffff;
}

/* エントリーボタン群 */
.entry-buttons {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.entry-buttons .btn-entry {
  padding: 16px 20px;
}

@media (max-width: 767px) {
  .entry-buttons {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   #highlights — おすすめポイント（目立たせる）
   ======================================== */
#highlights {
  position: relative;
}

/* おすすめポイントのタイトルを少し大きく・目立たせる */
#highlights .section-title {
  font-size: 26px;
  background: linear-gradient(90deg, var(--color-accent), #f59030);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 1px;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.highlight-card {
  position: relative;
  background: linear-gradient(135deg, rgba(232, 120, 32, 0.08) 0%, rgba(245, 144, 48, 0.04) 100%);
  border: 1px solid rgba(232, 120, 32, 0.3);
  padding: 24px 20px;
  transition: transform 0.3s, border-color 0.3s;
}

.highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-accent), #f59030);
}

.highlight-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
}

.highlight-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 12px;
  line-height: 1.4;
}

.highlight-content {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.8;
}

.highlight-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-accent);
  letter-spacing: 1px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-accent);
  transition: color 0.3s;
}

.highlight-link:hover {
  color: #f59030;
}

@media (max-width: 767px) {
  #highlights .section-title {
    font-size: 22px;
  }
  .highlights-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .highlight-card {
    padding: 20px 16px;
  }
  .highlight-title {
    font-size: 16px;
  }
  .highlight-content {
    font-size: 13px;
  }
}

/* ========================================
   #classes — 参加クラス / #gear — 車検・服装
   ======================================== */
.classes-list,
.gear-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ========================================
   #flow — 当日までの流れ
   ======================================== */
.flow-list {
  max-width: 680px;
  margin: 0 auto;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}

.flow-step:hover {
  border-color: var(--color-accent);
  transform: translateX(4px);
}

.flow-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(232, 120, 32, 0.3);
}

.flow-body {
  flex: 1;
}

.flow-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-main);
  line-height: 1.5;
}

.flow-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 6px;
  line-height: 1.7;
}

/* 矢印 */
.flow-arrow {
  text-align: center;
  font-size: 20px;
  color: var(--color-accent);
  padding: 8px 0;
  opacity: 0.6;
}

/* 最終ステップを強調 */
.flow-step.flow-final {
  background: linear-gradient(135deg, var(--color-bg-sub) 0%, rgba(232, 120, 32, 0.15) 100%);
  border-color: var(--color-accent);
}

.flow-step.flow-final .flow-num {
  background-color: #f59030;
  font-size: 22px;
  box-shadow: 0 4px 16px rgba(232, 120, 32, 0.5);
}

.flow-step.flow-final .flow-title {
  color: var(--color-accent);
  font-size: 18px;
}

@media (max-width: 767px) {
  .flow-step {
    gap: 14px;
    padding: 16px 18px;
  }
  .flow-num {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .flow-title {
    font-size: 14px;
  }
  .flow-desc {
    font-size: 12px;
  }
  .flow-step.flow-final .flow-title {
    font-size: 16px;
  }
}

/* ========================================
   #faq — よくある質問
   ======================================== */
.faq-item {
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-accent-sub);
}

.faq-item:first-of-type {
  padding-top: 0;
}

/* Q. / A. のレイアウト — ラベルと本文を横並びにして2行目も揃える */
.faq-item .card-title,
.faq-item .faq-answer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  color: var(--color-text-body);
  margin-top: 8px;
  line-height: 1.8;
  align-items: flex-start;
}

.faq-item .card-title span,
.faq-item .faq-answer span {
  display: inline !important;
}

.faq-label {
  flex-shrink: 0 !important;
  width: 2em !important;
  min-width: 2em !important;
  font-weight: 700;
  color: var(--color-accent);
}

/* ========================================
   右下固定ボタン（トップに戻る + エントリー）
   ======================================== */

/* ========================================
   フッター
   ======================================== */
.site-footer {
  padding: 40px 20px;
  border-top: 1px solid var(--color-accent-sub);
  text-align: center;
  background-color: var(--color-bg);
  position: relative;
  z-index: 1;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin-bottom: 24px;
}

.footer-links a {
  font-size: 11px;
  color: #ffffff;
}

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

.footer-copy {
  font-size: 10px;
  color: #ffffff;
}

/* ========================================
   テーマ情報ページ（/theme-info/）
   ======================================== */
.cr-theme-info-page {
  max-width: 800px;
}

.cr-theme-info-card {
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-accent-sub);
  padding: 28px 24px;
  margin-bottom: 24px;
}

.cr-theme-info-card h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-accent-sub);
}

.cr-theme-info-card p {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.9;
  margin-bottom: 12px;
}

.cr-theme-info-table {
  width: 100%;
  border-collapse: collapse;
}

.cr-theme-info-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  width: 120px;
  border-bottom: 1px solid var(--color-accent-sub);
  font-weight: normal;
}

.cr-theme-info-table td {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-text-body);
  border-bottom: 1px solid var(--color-accent-sub);
}

.cr-theme-info-list {
  list-style: none;
  padding: 0;
}

.cr-theme-info-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-accent-sub);
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.8;
}

.cr-theme-info-list li:last-child {
  border-bottom: none;
}

.cr-theme-info-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.cr-theme-info-feature {
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--color-accent);
}

.cr-theme-info-feature h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-main);
  margin: 0 0 8px;
}

.cr-theme-info-feature p {
  font-size: 13px;
  margin: 0;
}

.cr-theme-info-cta {
  text-align: center;
  border-color: var(--color-accent);
}

.cr-theme-info-cta h2 {
  border-bottom-color: var(--color-accent);
}

@media (max-width: 767px) {
  .cr-theme-info-card {
    padding: 20px 16px;
  }
  .cr-theme-info-features {
    grid-template-columns: 1fr;
  }
  .cr-theme-info-table th {
    width: 90px;
  }
}

.footer-credit {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
  letter-spacing: 0.5px;
}

.footer-credit a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

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

/* ========================================
   左サイドナビ（PC用・章ナビ）
   ======================================== */
/* ========================================
   左サイドナビ → 章ナビ（テキストリンク）を右に配置
   右サイドナビ → リッチパネルを左に配置（のりくら花火参考）
   ======================================== */
.side-nav-left,
.side-nav-right {
  display: none;
}

/* ========================================
   右固定: メニューパネル（のりくら花火参考）
   ======================================== */
.side-nav-right {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 0;
  z-index: 500;
  width: 300px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background-color: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(4px);
  padding: 28px 24px;
  /* 縦スクロールバーをさりげなく */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.side-nav-right::-webkit-scrollbar {
  width: 6px;
}
.side-nav-right::-webkit-scrollbar-track {
  background: transparent;
}
.side-nav-right::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* メニュー上部の「( Menu )」ラベル */
.side-nav-label {
  font-size: 12px;
  color: var(--color-accent);
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 24px;
}

/* メニューリンク — テキスト + → + 下線 */
.side-nav-right .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: var(--color-text-body);
  letter-spacing: 1px;
  transition: color 0.3s;
}

.side-nav-right .nav-link:hover {
  color: var(--color-text-main);
}

.side-nav-right .nav-link .arrow {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s;
}

.side-nav-right .nav-link:hover .arrow {
  color: var(--color-text-main);
}

.side-nav-right .nav-link.is-active {
  color: var(--color-text-main);
}

.side-nav-right .nav-link.is-active .arrow {
  color: var(--color-accent);
}

/* メッセージ */
.side-nav-message {
  margin-top: 20px;
  padding-top: 16px;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* 補助リンク（注意事項・お問い合わせ等） */
.side-nav-sub {
  margin-top: 16px;
  font-size: 10px;
  color: var(--color-text-faint);
  display: flex;
  gap: 12px;
}

.side-nav-sub a {
  color: var(--color-text-faint);
  transition: color 0.3s;
}

.side-nav-sub a:hover {
  color: var(--color-text-body);
}

/* エントリーCTA — 括弧で囲む */
.side-nav-cta {
  margin-top: 28px;
}

.side-nav-cta .cta-block {
  display: block;
  text-align: center;
  padding: 20px 0;
  transition: opacity 0.3s;
}

.side-nav-cta .cta-block:hover {
  opacity: 0.8;
}

/* 括弧 + テキストを横一行で並べる */
.side-nav-cta .cta-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.side-nav-cta .cta-bracket-open,
.side-nav-cta .cta-bracket-close {
  font-size: 42px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.side-nav-cta .cta-text {
  font-size: 18px;
  color: var(--color-text-main);
  letter-spacing: 3px;
  white-space: nowrap;
}

.side-nav-cta .cta-link {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 1px;
  transition: color 0.2s;
}

.side-nav-cta .cta-block:hover .cta-link {
  color: #f59030;
}

/* メニュー下部のロゴ */
.side-nav-logo,
.mobile-menu-logo {
  margin-top: 24px;
  padding-top: 16px;
  text-align: center;
  display: block;
  visibility: visible;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.side-nav-logo img,
.mobile-menu-logo img {
  max-width: 160px;
  width: auto !important;
  height: auto !important;
  opacity: 1;
  display: inline-block !important;
  visibility: visible;
  margin: 0 auto;
}

.mobile-menu-logo img {
  max-width: 200px;
}

/* スクロール進捗バー */
.scroll-progress {
  margin-top: 20px;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.scroll-progress .bar {
  height: 100%;
  width: 0%;
  background-color: var(--color-accent);
  transition: width 0.1s;
}

/* ========================================
   左固定パネル
   ======================================== */
.side-nav-left {
  position: fixed;
  left: 70px;
  bottom: 18%;
  z-index: 500;
  width: 240px;
  display: none;
}

/* パネル全体のレイアウト: 縦書きラベル | コンテンツ */
.side-panel-layout {
  display: flex;
  gap: 12px;
}

/* 縦書き「（最新情報）」— 画像の外側 */
.side-vertical-label {
  writing-mode: vertical-rl;
  font-size: 13px;
  letter-spacing: 3px;
  color: #ffffff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 右側のコンテンツ列 */
.side-panel-content {
  flex: 1;
  min-width: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 12px;
}

/* タイトル（画像の上） */
.side-panel-heading {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

/* 画像（テキストを重ねない） */
.side-panel-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

/* テキストエリア（画像の下） */
.side-panel-info {
  padding-top: 14px;
}

.side-panel-info .side-info-date {
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
}

.side-panel-info .side-info-title {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.8;
  margin-top: 10px;
}

/* 詳細はこちらリンク */
.side-panel-info .side-info-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  transition: color 0.3s;
}

.side-panel-info .side-info-link:hover {
  color: var(--color-text-main);
}

.side-panel-info .side-info-link .arrow {
  font-size: 14px;
}

/* ========================================
   モバイル専用の調整 (767px以下)
   ======================================== */
@media (max-width: 767px) {

  /* --- ヒーロー --- */
  /* タイトルが変なところで切れないように */
  .hero-title {
    font-size: 26px;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* 次回開催の行を制御 */
  #hero .hero-date {
    font-size: 14px;
    word-break: keep-all;
  }

  /* モバイルではbrを有効に */
  #hero .hero-date br {
    display: block;
  }

  /* ヒーロー内パネルのパディングを狭く */
  #hero .hero-inner {
    padding: 28px 20px;
  }

  /* ヒーローロゴ */
  #hero .hero-logo {
    max-width: 180px;
    margin-bottom: 16px;
  }

  /* ヘッダーロゴ */
  .site-header .site-logo-img {
    max-height: 32px;
  }
  .site-header .site-logo-text {
    font-size: 12px;
  }

  /* --- 開催概要カード --- */
  .event-card {
    padding: 24px 16px;
  }

  .event-card dl {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px 10px;
  }

  .event-card dt {
    font-size: 12px;
  }

  .event-card dd {
    font-size: 15px;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* nowrap付きでもモバイルでは折り返す */
  .event-card dd .nowrap {
    white-space: normal;
  }

  /* --- エントリーボタン --- */
  /* モバイルでは縦積み＋同じ幅に */
  #entry .event-card div[style] {
    flex-direction: column !important;
  }

  .btn-entry {
    width: 100%;
    text-align: center;
  }

  /* --- セクション間隔をモバイルでは控えめに --- */
  #news { margin-bottom: 120px; }
  #highlights { margin-bottom: 180px; }
  #event { margin-bottom: 200px; }
  #classes { margin-bottom: 160px; }
  #guideline { margin-bottom: 140px; }
  #gear { margin-bottom: 150px; }
  #course { margin-bottom: 220px; }
  #access { margin-bottom: 160px; }
  #entry { margin-bottom: 180px; }
  #flow { margin-bottom: 160px; }
  #faq { margin-bottom: 120px; }
  #gallery { margin-bottom: 100px; }

  /* --- セクションラベル（大きい透かし文字）を小さく --- */
  .lp-section .section-label {
    font-size: 28px;
  }
}

/* ========================================
   タブレット以上 (768px)
   ======================================== */
@media (min-width: 768px) {
  .hero-title {
    font-size: 42px;
  }

  #hero .hero-cta {
    flex-direction: row;
  }

  .guideline-grid {
    flex-direction: row;
  }

  .guideline-card {
    flex: 1;
  }

  .news-item {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

/* ========================================
   PC — 3カラム + 左右パネル (1400px以上)
   ======================================== */
@media (min-width: 1400px) {
  .hero-title {
    font-size: 52px;
  }

  .section-title {
    font-size: 24px;
  }

  /* 中央コンテンツに左右余白（左パネル310px + 右パネル340px） */
  .page-body {
    padding: 0 350px 0 330px;
  }

  .lp-main {
    max-width: 900px;
    margin: 0 auto;
  }

  .side-nav-left {
    display: block;
  }

  .side-nav-right {
    display: flex;
  }

  /* モバイル専用ナビを非表示 */
  .section-nav-sp {
    display: none;
  }

  /* 右端ストリップを非表示（PCでは右パネルがある） */
  .fixed-right-strip {
    display: none;
  }

  /* PC用ヘッダーナビ */
  .header-nav-pc {
    display: flex;
    gap: 24px;
  }

  .header-nav-pc a {
    font-size: 12px;
    color: var(--color-text-muted);
    letter-spacing: 1px;
  }

  .header-nav-pc a:hover {
    color: var(--color-text-main);
  }

  .lp-section {
    padding: 80px 40px;
  }
}

/* PCナビはモバイルで非表示 */
.header-nav-pc {
  display: none;
}

/* モバイルで右端ストリップ分の余白を確保 */
body {
  padding-right: 44px;
}

/* 掲示板ページはチャット側で独自に余白管理するので無効化 */
body.cr-bbs-page {
  padding-right: 0;
}

@media (min-width: 1400px) {
  body {
    padding-right: 0;
  }
}