/* 
  Base Variables 
  和紙っぽい色合いと、トレイルランニングらしい力強い黒を定義
*/
:root {
    --bg-color: #f2f0e9; /* 少し温かみのある和紙色 */
    --text-color: #1a1a1a;
    --accent-color: #004d40; /* 深い森の緑 */
    --border-color: #dcd9d0;
    
    /* フォント設定 */
    --font-serif: 'Noto Sans JP', sans-serif;
    --font-sans: 'Roboto Condensed', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-serif);
    margin: 0;
    line-height: 1.8;
    /* 背景にうっすらノイズを入れて紙の質感を出す（モダンなテクニック） */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 
  Header & Hero 
  画像を大きく使いつつ、ナビゲーションはシンプルに
*/
.site-header {
    position: relative;
    border-bottom: 4px solid var(--text-color);
    background: var(--bg-color); /* 背景色を統一 */
    z-index: 100;
    /* WP Fixes: 強制的にブロック表示と余白リセット */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

/* トップバー（セカンダリナビゲーション） */
.header-top {
    background: #1a1a1a;
    color: #fff;
    padding: 8px 0;
    font-size: 0.75rem;
}

.header-top .container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.secondary-nav ul {
    display: flex;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px;
}

.secondary-nav li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.secondary-nav a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.secondary-nav a:hover {
    color: #fff;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px; /* 上下の余白を増やし、左右はcontainerに合わせる */
    max-width: 1100px; /* コンテナと同じ幅 */
    margin: 0 auto !important;    /* 中央揃え */
    background: transparent;
    position: relative;
    /* WP Fixes: gap干渉を防ぐ */
    gap: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.site-logo {
    display: flex;
    align-items: center;
    /* WP Fixes */
    margin: 0 !important;
    padding: 0 !important;
}

.site-logo img {
    height: 60px !important;
    width: auto !important;
    /* ロゴが正方形の黒背景の場合、丸くトリミング */
    border-radius: 50%;
    transition: transform 0.3s ease;
    /* WP Fixes: サイズ強制 */
    max-height: none !important;
    max-width: none !important;
    object-fit: contain;
}

.site-logo:hover img {
    transform: scale(1.05);
}

.global-nav ul {
    display: flex;
    list-style: none !important;
    gap: 20px; /* 項目数が多いので少し詰める */
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem; /* 0.85rem -> 0.9rem */
    letter-spacing: 0.05em;
    align-items: center;
}

.global-nav li,
.global-nav .menu-item {
    position: relative;
    padding: 10px 0;
    /* WP Fixes */
    list-style: none !important;
    margin-bottom: 0 !important;
}

.global-nav > ul > li > a {
    display: block;
    padding: 5px 0;
    position: relative;
}

/* ホバー時の下線アニメーション */
.global-nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.3s;
}

.global-nav > ul > li:hover > a::after {
    width: 100%;
}

/* ドロップダウンメニュー（ギミック） */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    min-width: 200px;
    padding: 10px 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 8px 20px;
    color: #333;
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.2s;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
    color: var(--accent-color);
}

.btn-entry a {
    background: var(--text-color);
    color: #fff;
    padding: 10px 20px;
    border-radius: 2px;
}

.hero-section {
    height: 70vh;
    background-color: #333;
    /* モノクロ写真を使用。オーバーレイで少し暗くし、文字を見やすく */
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/P1010445.jpg');
    background-size: cover;
    /* デフォルトは中央 */
    background-position: center center;
    display: flex;
    /* タイポグラフィは基本的に中央配置 */
    align-items: center; 
    justify-content: center;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    /* WP Fixes: 余計なマージンを排除 */
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 
  Hero Background Position Patterns 
  背景画像の配置パターンをクラスで制御
*/
.bg-pos-center {
    background-position: center center;
}

.bg-pos-bottom {
    background-position: center bottom;
}

.bg-pos-top {
    background-position: center top;
}

.bg-pos-left {
    background-position: left center;
}

.bg-pos-right {
    background-position: right center;
}

/* 
  Hero Content Position Patterns 
  タイポグラフィ（中身）の配置パターンをクラスで制御
  .hero-section に追加して使用
*/

/* 上下左右中央 (Default) */
.hero-pos-center {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 上中央 */
.hero-pos-top-center {
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
}

/* 下中央 */
.hero-pos-bottom-center {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding-bottom: 80px;
}

/* 左中央 */
.hero-pos-middle-left {
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 8%;
}

/* 右中央 */
.hero-pos-middle-right {
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding-right: 8%;
}

/* 左上 */
.hero-pos-top-left {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding-top: 80px;
    padding-left: 8%;
}

/* 右上 */
.hero-pos-top-right {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    padding-top: 80px;
    padding-right: 8%;
}

/* 左下 */
.hero-pos-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding-bottom: 80px;
    padding-left: 8%;
}

/* 右下 */
.hero-pos-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    padding-bottom: 80px;
    padding-right: 8%;
}

/* 下固定・左右中央 (今年用) */
.hero-pos-bottom-center {
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding-bottom: 80px; /* 下の余白 */
}

/* 下固定・左寄せ */
.hero-pos-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    padding-bottom: 80px;
    padding-left: 8%;
}

/* 下固定・右寄せ */
.hero-pos-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    padding-bottom: 80px;
    padding-right: 8%;
}

/* 上固定・左右中央 */
.hero-pos-top-center {
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
}

/* 上固定・左寄せ */
.hero-pos-top-left {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding-top: 80px;
    padding-left: 8%;
}

/* 上固定・右寄せ */
.hero-pos-top-right {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    padding-top: 80px;
    padding-right: 8%;
}

/* 上下中央・左寄せ */
.hero-pos-middle-left {
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 8%;
}

/* 上下中央・右寄せ */
.hero-pos-middle-right {
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding-right: 8%;
}


.hero-content img {
    max-width: 90%;
    width: 600px; /* デフォルトサイズ */
    height: auto;
    /* 黒背景の画像を透過させるモダンなテクニック */
    mix-blend-mode: screen; 
    filter: contrast(1.2); /* 少しコントラストを上げて文字をくっきり */
}

/* 
  Hero Content Size Patterns 
  タイポグラフィのサイズをクラスで制御
  .hero-content に追加して使用
*/
.hero-size-s img { width: 300px; }
.hero-size-m img { width: 400px; } /* 2/3サイズ */
.hero-size-l img { width: 600px; }
.hero-size-xl img { width: 800px; }

/* スマホでは中央に戻すなどの調整が必要ならここに追加 */
@media (max-width: 768px) {
    .hero-section {
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .hero-content img {
        width: 80%;
    }
}

/* 
  Quick Navigation (Event Day) 
  大会直前・当日に表示するクイックリンク
*/
.quick-nav-section {
    padding: 30px 0; /* 上下の余白を確保して、次のセクションとの境界を明確に */
    background: var(--bg-color); /* 背景色と馴染ませる */
}

.quick-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-nav-list li {
    flex: 1;
    min-width: 240px; /* ある程度の幅を確保 */
}

.quick-nav-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 60px;
    padding: 15px 20px;
    background-color: transparent; /* 背景なしでシンプルに */
    color: var(--text-color);
    border: 1px solid var(--text-color); /* 細い枠線 */
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0; /* 角丸なしでシャープに */
    transition: all 0.3s ease;
    box-shadow: none; /* 影なし */
    line-height: 1.4;
    letter-spacing: 0.05em;
    font-family: var(--font-sans);
}

.quick-nav-list a:hover {
    background-color: var(--text-color); /* ホバーで黒反転 */
    color: #fff;
    transform: translateY(-2px);
    opacity: 1;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .quick-nav-list {
        flex-direction: column; /* 縦並び */
    }
    
    .quick-nav-list li {
        width: 100%;
    }
}

/* 
  Live Stream Section (for Race Day)
*/
.section-live {
    padding: 60px 0;
    margin-top: 40px; /* クイックナビとの間にしっかり余白を確保 */
    background-color: #000; /* ライブ感のある黒背景 */
    color: #fff;
    text-align: center;
}

.section-live .section-title {
    color: #fff;
}

.section-live .section-title::after {
    background: #fff;
}

.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.live-item {
    background: #222;
    border-radius: 4px;
    overflow: hidden;
}

/* 
  Live Grid System 
  配信枠の数に応じて柔軟にレイアウト調整
*/
.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動折り返し */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 
  配信数が少ない時（1〜2個）は中央寄せで大きく表示したい場合など
  必要に応じてJSでクラスを付与するか、下記のように個数に応じてスタイルを変える
*/
.live-grid.count-1 {
    display: flex;
    justify-content: center;
}
.live-grid.count-1 .live-item {
    max-width: 600px;
    width: 100%;
}

.live-grid.count-2 {
    grid-template-columns: 1fr 1fr; /* 2カラム固定 */
}

/* スマホでは常に1カラム */
@media (max-width: 768px) {
    .live-grid,
    .live-grid.count-2 {
        grid-template-columns: 1fr;
    }
}

.live-item {
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s;
}

.live-item:hover {
    transform: translateY(-5px);
}

.live-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.live-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.live-info {
    padding: 20px;
    text-align: left;
}

.live-badge {
    display: inline-block;
    background: #c0392b; /* YouTube Red */
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    margin-bottom: 10px;
    vertical-align: middle;
}

.live-title {
    font-size: 1.1rem;
    margin: 0 0 5px;
    line-height: 1.4;
    font-family: var(--font-sans);
}

.live-time {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
    font-family: var(--font-sans);
}

/* 
  News Section 
  シンプルで読みやすく
*/
.section-news {
    padding: 80px 0;
}

.section-title {
    font-family: var(--font-sans);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    position: relative;
    /* 中央寄せの修正: left/transformをやめてmargin autoにする */
    display: table;
    margin: 0 auto 40px;
}

.section-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--text-color);
    margin: 10px auto 0;
}

.news-list {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

/* スクロールエリアの追加 */
.news-scroll-area {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 15px; /* スクロールバーとの余白 */
    /* スクロールバーのデザイン */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) #ddd;
}

.news-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.news-scroll-area::-webkit-scrollbar-track {
    background: #ddd;
    border-radius: 3px;
}

.news-scroll-area::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 3px;
}

.news-list li {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    display: flex;
    gap: 20px;
    align-items: baseline;
    transition: background-color 0.2s;
}

.news-list li:hover {
    background-color: rgba(0,0,0,0.02);
}

.news-list .date {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.9rem;
    color: #666;
    /* 日付幅を固定して揃える */
    flex: 0 0 100px; 
}

.news-list .title {
    flex: 1;
    line-height: 1.6;
}

/* 重要タグなどの装飾 */
.news-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

.tag-important {
    background-color: #c0392b;
    color: #fff;
}

.tag-info {
    background-color: #7f8c8d;
    color: #fff;
}

/* 
  ========================================
  SPONSOR GRID SYSTEM (Optical Balance)
  ========================================
  枠線や固定幅を使わず、Flexboxで「高さ」と「重心」を揃える手法。
  ロゴの形状（横長・正方形）に関わらず、視覚的な重さを統一します。
*/

.section-sponsors {
    background-color: #fff;
    padding: 80px 0;
    text-align: center;
}

.sponsor-intro {
    margin-bottom: 60px;
    font-size: 0.9rem;
    color: #666;
}

.sponsor-group {
    margin-bottom: 60px;
}

.rank-title {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 25px;
    display: inline-block;
    position: relative;
}

/* 共通グリッド設定 */
.sponsor-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; /* 上下中央揃え（ここが重要） */
    /* 横の余白は広めに、縦の余白は適度に */
    gap: 30px 50px; 
}

.sponsor-item {
    display: block; /* aタグの場合もあるのでblock化 */
    text-decoration: none;
    transition: opacity 0.3s transform 0.3s;
}

.sponsor-item:hover {
    opacity: 0.7;
    transform: translateY(-2px);
}

.sponsor-item img {
    width: auto;      /* 幅はなりゆき */
    height: auto;     /* 高さは親要素またはmax-heightに従う */
    display: block;   /* 下の余白を消す */
    
    transition: all 0.3s ease;
}

.sponsor-item:hover img {
    transform: translateY(-2px);
}

/* 
  Tierごとのサイズ制御 (高さ基準)
  横長ロゴも正方形ロゴも、高さで制限することでバランスを取ります。
  max-widthも併用し、極端に横長のロゴが大きくなりすぎるのを防ぎます。
*/

/* Tier 1: Premium (一番大きい) */
.tier-premium .sponsor-item img {
    max-height: 70px; /* 高さ制限 */
    max-width: 280px; /* 幅制限 */
}

/* Tier 2: Major */
.tier-major .sponsor-item img {
    max-height: 55px;
    max-width: 220px;
}

/* Tier 3: Main */
.tier-main .sponsor-item img {
    max-height: 50px;
    max-width: 200px;
}

/* Tier 4: Core */
.tier-core .sponsor-item img {
    max-height: 50px;
    max-width: 200px;
}

/* Tier 4: Active */
.tier-active .sponsor-item img {
    max-height: 40px;
    max-width: 160px;
}

/* Tier 5: Supporters (小さくたくさん並べる) */
.tier-active-supporter,
.tier-supporting,
.tier-trail-supporter,
.tier-course-supporter {
    gap: 20px 30px; /* 余白を詰める */
}

.tier-active-supporter .sponsor-item img,
.tier-supporting .sponsor-item img,
.tier-trail-supporter .sponsor-item img,
.tier-course-supporter .sponsor-item img {
    max-height: 30px;
    max-width: 120px;
}

/* 
  Mobile Menu Styles 
*/
.mobile-menu-trigger {
    display: none; /* PCでは非表示 */
    width: 30px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 200; /* メニューより上に */
}

.mobile-menu-trigger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-color);
    position: absolute;
    left: 0;
    transition: all 0.3s;
}

.mobile-menu-trigger span:nth-child(1) { top: 0; }
.mobile-menu-trigger span:nth-child(2) { top: 9px; }
.mobile-menu-trigger span:nth-child(3) { bottom: 0; }

/* ハンバーガーメニューが開いた時のアイコン変化 */
.mobile-menu-open .mobile-menu-trigger span:nth-child(1) {
    transform: rotate(45deg);
    top: 9px;
}
.mobile-menu-open .mobile-menu-trigger span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-open .mobile-menu-trigger span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 9px;
}

/* 背景オーバーレイ */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
}

/* 
  Responsive Design 
  スマホ表示時の調整
*/
@media (max-width: 900px) { /* ナビゲーションが崩れる幅で切り替え */
    .header-top {
        display: none; /* モバイルではトップバーを隠してメニュー内に統合するか、シンプルにする */
    }

    .header-inner {
        padding: 15px 20px;
    }

    .mobile-menu-trigger {
        display: block;
    }

    .global-nav {
        display: block; /* display: noneを上書き */
        position: fixed;
        top: 0;
        right: -100%; /* 画面外に隠す */
        width: 80%;
        max-width: 300px;
        height: 100dvh; /* dvhでアドレスバー考慮 */
        background: #fff;
        padding: 60px 20px 100px; /* 上部padding縮小、下部拡大 */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 150;
    }

    /* メニューが開いた時 */
    .mobile-menu-open .global-nav {
        right: 0;
    }

    .global-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .global-nav li {
        width: 100%;
        padding: 0;
        border-bottom: 1px solid #eee;
    }

    .global-nav > ul > li > a {
        padding: 15px 0;
        font-size: 1rem;
        position: relative;
    }

    /* PC用の下線アニメーションをモバイルでは無効化
       （+アイコン用疑似要素と衝突し、斜線化するのを防ぐ） */
    .global-nav > ul > li > a::after,
    .global-nav > ul > li:hover > a::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* モバイルでのドロップダウン（アコーディオン化） */
    .dropdown-menu {
        position: static; /* 絶対配置を解除 */
        transform: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 10px 15px; /* インデント */
        display: none; /* JSで制御するため初期は非表示 */
        opacity: 1;
        visibility: visible;
        background: transparent;
        min-width: auto;
    }

    /* PC用ホバー変形をモバイルで無効化（下層リンクの左ズレ防止） */
    .has-dropdown:hover .dropdown-menu {
        transform: none;
    }

    .dropdown-menu::before {
        display: none;
    }

    .dropdown-menu a {
        padding: 8px 0;
        color: #666;
        font-size: 0.9rem;
        white-space: normal;
    }

    .dropdown-menu a:hover {
        background: transparent;
        color: var(--accent-color);
    }

    /* 開閉用のアイコン */
    .has-dropdown > a::before {
        content: '+';
        position: absolute;
        right: 0;
        top: 15px;
        font-weight: 400;
        font-size: 1.2rem;
        width: auto;
        height: auto;
        background: none;
        transition: transform 0.3s;
    }

    .has-dropdown.is-open > a::before {
        transform: rotate(45deg);
    }

    .has-dropdown.is-open .dropdown-menu {
        display: block;
    }
    
    /* モバイルメニュー内にセカンダリナビ（Englishなど）を追加表示するエリア */
    .mobile-secondary-links {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 2px solid #eee;
    }
    
    .mobile-secondary-links a {
        display: block;
        padding: 10px 0;
        color: #666;
        font-size: 0.85rem;
    }
}

/* PCでは非表示・スタイルリセット */
@media (min-width: 901px) {
    .mobile-secondary-links {
        display: none;
    }
    
    /* WP Fixes: PC表示時にスマホ用スタイルが漏れないように強制リセット */
    .global-nav {
        height: auto !important;
        position: static !important;
        width: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    .header-inner {
        height: auto !important;
        min-height: 0 !important;
    }
    
    .mobile-menu-trigger {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

/* 
  Page Hero (下層ページ用)
*/
.page-hero {
    height: 30vh;
    min-height: 250px;
    background-color: #333;
    /* 森の画像（トップと同じでも良いが、少し暗めにする） */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    margin-bottom: 0; /* ローカルナビがある場合は0 */
}

.page-hero-inner {
    padding: 20px;
}

.page-title {
    font-family: var(--font-sans);
    font-size: 2.5rem;
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-title-sub {
    font-size: 0.9rem;
    margin-top: 10px;
    opacity: 0.8;
}

/* 
  Local Navigation (横スクロール)
*/
.local-nav-wrapper {
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0; /* 必要に応じてstickyにする */
    z-index: 90;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.local-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */
    white-space: nowrap;
    /* スクロールバー非表示（モダンブラウザ） */
    scrollbar-width: none; 
}

.local-nav::-webkit-scrollbar {
    display: none;
}

.local-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.local-nav li {
    flex: 0 0 auto;
}

.local-nav a {
    display: block;
    padding: 15px 20px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.local-nav a:hover,
.local-nav a.current {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* 
  PDF Card Style
*/
.pdf-card-container {
    margin: 30px 0;
}

.pdf-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pdf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-color: var(--accent-color);
}

.pdf-icon {
    flex: 0 0 50px;       /* 60px -> 50px */
    height: 50px;         /* 60px -> 50px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;          /* 赤 -> グレー */
    background: #f5f5f5;  /* 赤薄 -> グレー薄 */
    border-radius: 4px;
    margin-right: 20px;
}

.pdf-icon svg {
    width: 28px;          /* 48px -> 28px (CSSで強制上書き) */
    height: 28px;
}

.pdf-info {
    flex: 1;
}

.pdf-title {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 5px;
}

.pdf-meta {
    display: block;
    font-size: 0.85rem;
    color: #888;
    font-family: var(--font-sans);
}

.pdf-action {
    padding-left: 20px;
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
}

.pdf-action::after {
    content: '→';
    margin-left: 5px;
    transition: transform 0.3s;
}

.pdf-card:hover .pdf-action::after {
    transform: translateX(5px);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .pdf-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    
    .pdf-icon {
        margin: 0 0 15px 0;
    }
    
    .pdf-action {
        padding-left: 0;
        margin-top: 15px;
    }
}

/* 
  Page Content Styles
*/
.page-container {
    padding: 60px 20px;
    max-width: 900px; /* 読みやすい幅に制限 */
}

.page-body {
    line-height: 1.8;
    font-size: 1rem;
}

/* 見出しスタイル */
.heading-primary {
    font-size: 1.5rem;
    margin: 40px 0 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
}

.heading-secondary {
    font-size: 1.25rem;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-sans);
    font-weight: 700;
}

.page-body p {
    margin-bottom: 2em;
}

/* 画像スタイル */
.page-body figure {
    margin: 40px 0;
}

.page-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.page-body figcaption {
    font-size: 0.8rem;
    color: #666;
    margin-top: 10px;
    text-align: center;
}

.text-right {
    text-align: right;
}

/* 
  Voice Card (Volunteer Leader)
*/
.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.voice-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--text-color);
    display: block;
}

.voice-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.voice-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #eee;
}

.voice-content {
    padding: 20px;
}

.voice-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 10px;
    font-family: var(--font-sans);
}

.voice-text {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.voice-readmore {
    display: block;
    margin-top: 15px;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: right;
}

/* 
  Article Body (for Voice Detail)
*/
.article-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 60px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.article-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
}

.article-title {
    font-size: 2rem;
    margin: 0 0 10px;
    font-family: var(--font-sans);
}

.article-meta {
    color: #888;
    font-size: 0.9rem;
}

.article-body {
    font-size: 1.05rem;
    line-height: 2;
    color: #333;
}

.article-body p {
    margin-bottom: 2em;
}

.article-body h3 {
    font-size: 1.4rem;
    margin: 50px 0 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--accent-color);
    font-family: var(--font-sans);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .voice-grid {
        grid-template-columns: 1fr;
    }
    
    .article-container {
        padding: 30px 20px;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
}

/* 
  Tabbed Interface (for Entry List)
*/
.tab-container {
    margin: 40px 0;
}

.tab-nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    border-bottom: 2px solid #ddd;
    gap: 10px;
}

.tab-nav li {
    padding: 15px 30px;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--font-sans);
    color: #888;
    background: #f9f9f9;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s;
    letter-spacing: 0.05em;
    font-size: 1.1rem;
}

.tab-nav li:hover {
    background: #eee;
    color: #555;
}

.tab-nav li.active {
    background: var(--accent-color);
    color: #fff;
    /* アクティブなタブの下線を消して一体化させる */
    margin-bottom: -2px; 
    border-bottom: 2px solid var(--accent-color);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 
  Entry List Table
*/
.list-search-area {
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.search-input {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 300px;
    max-width: 100%;
    font-size: 0.9rem;
}

.btn-search {
    background: #333;
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-sans);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    white-space: nowrap; /* スマホで折り返さない */
}

.entry-table th,
.entry-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.entry-table th {
    background: #f0f0f0;
    font-weight: 700;
    font-family: var(--font-sans);
    color: #333;
    border-bottom: 2px solid #ccc;
}

.entry-table td {
    background: #fff;
}

.entry-table tr:hover td {
    background: #fafafa;
}

/* カラム幅の目安 */
.col-bib { width: 80px; text-align: center; }
.col-name { font-weight: 700; }
.col-area { width: 120px; }

/* スマホ対応 */
@media (max-width: 768px) {
    .tab-nav li {
        padding: 10px 15px;
        font-size: 0.9rem;
        flex: 1;
        text-align: center;
    }
    
    .list-search-area {
        flex-direction: column;
    }
    
    .search-input {
        width: 100%;
    }
    
    .btn-search {
        padding: 10px;
        width: 100%;
    }
}
.page-toc {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 50px;
    border: 1px solid #eee;
}

.toc-title {
    font-size: 1.1rem;
    margin: 0 0 15px;
    font-family: var(--font-sans);
    text-align: center;
    letter-spacing: 0.05em;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
}

.toc-list li {
    position: relative;
}

.toc-list a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid #ccc;
    transition: color 0.3s, border-color 0.3s;
}

.toc-list a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* 
  Standard White Section Groups (info-box, recruitment-box, etc.)
  サイト全体の「白い枠で囲まれた情報セクション」のデザインを統一
*/
.info-box,
.recruitment-box,
.wp-block-group.has-background.is-style-white-box {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 35px 30px;
    margin: 30px 0 60px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

/* 統一見出しスタイル (h3) */
.info-box-title,
.info-box h3,
.recruitment-box h3,
.page-body .info-box h3,
.page-body .recruitment-box h3 {
    margin-top: 0 !important; 
    margin-bottom: 25px;
    padding: 0 0 12px 0;
    font-size: 1.3rem;
    font-family: var(--font-sans);
    font-weight: 700;
    color: #1a1a1a;
    display: block;
    border-bottom: 1px solid #ddd;
    border-left: none;
    background: transparent;
}

/* 不要な疑似要素装飾を完全に排除 */
.info-box-title::after, .info-box h3::after, .recruitment-box h3::after,
.info-box-title::before, .info-box h3::before, .recruitment-box h3::before {
    display: none !important;
}

/* 統一項目名スタイル (dt / outline-term / result-title) */
.info-box dt,
.recruitment-box dt,
.outline-list dt,
.dl-horizontal dt,
.info-item .info-term,
.info-term,
.result-category-title {
    font-weight: 700;
    color: #333;
    font-family: var(--font-sans);
    font-size: 1.15rem;
    padding: 0 0 0 15px;
    display: block;
    width: 100%;
    background: transparent !important;
    border-left: 3px solid #999 !important;
    border-bottom: none !important;
    border-top: none !important;
    border-right: none !important;
    margin-top: 35px;
    margin-bottom: 15px;
    line-height: 1.4;
    border-radius: 0 !important;
    letter-spacing: 0.02em;
    clear: both;
}

/* 項目名の不要な古い疑似要素装飾を個別に排除（アコーディオン等に影響させない） */
.info-box dt::before, 
.recruitment-box dt::before, 
.outline-list dt::before, 
.dl-horizontal dt::before, 
.info-item .info-term::before, 
.info-term::before {
    display: none !important;
}

/* アコーディオンアイコンの表示を保証 */
.accordion-header::before,
.accordion-header::after {
    display: block !important;
}

/* 最初の項目の上余白を詰める */
.info-box dt:first-child,
.recruitment-box dt:first-child,
.outline-list dt:first-child,
.dl-horizontal dt:first-child,
.info-item:first-child .info-term,
.result-category:first-child .result-category-title {
    margin-top: 0;
}

/* 内容スタイル (dd / outline-desc) */
.info-box dd,
.recruitment-box dd,
.outline-list dd,
.dl-horizontal dd,
.info-item .info-desc,
.info-desc {
    margin: 0 0 30px 0;
    padding-left: 18px;
    line-height: 1.85;
    color: #444;
    display: block;
    border: none !important;
    background: transparent !important;
}

/* 
  Info Item / info-box (Block Editor Compatible) 
  不要な古い個別スタイルを無効化し、上記統一ルールに従わせる
*/
.info-item {
    margin-bottom: 0;
    border: none !important;
}

.info-item + .info-item {
    margin-top: 0;
    padding-top: 0;
    border-top: none !important;
}

/* エディタ内のブロックラッパーが生成する余計な隙間を消す */
.outline-list .acf-block-body,
.outline-list .block-editor-block-list__layout {
    display: contents;
}

.info-box > .dl-horizontal,
.info-box > dl {
    padding: 0;
}

/* InnerBlocksの余白調整 */
.info-desc p {
    margin-bottom: 1em;
}
.info-desc p:last-child {
    margin-bottom: 0;
}

/* PC表示での横並び調整（必要であれば） */
/* プロトタイプは dt がブロック要素的に振る舞っていたので、基本は縦積みでOK */
/* もし横並びにしたい場合は以下を有効化 */
/*
@media (min-width: 769px) {
    .info-item {
        display: flex;
        gap: 20px;
        align-items: baseline;
    }
    .info-term {
        flex: 0 0 200px;
        margin-bottom: 0;
    }
    .info-desc {
        flex: 1;
    }
}
*/

/* 
  List Styles
*/
.list-check {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.list-check li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.list-check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 5px;
    height: 5px;
    background-color: #1a1a1a;
}

.list-map {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.list-map li {
    padding: 8px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.list-map li:last-child {
    border-bottom: none;
}

/*
  Highlight Box
*/
.highlight-box {
    background: #fff;
    border: 1px solid #ccc;
    color: var(--text-color);
    padding: 20px;
    margin: 20px 0;
    text-align: left;
    border-radius: 4px;
}

.highlight-text {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.note-text {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.btn-map {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 10px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
    vertical-align: middle;
}

.btn-map:hover {
    background-color: #003832;
    transform: translateY(-2px);
    opacity: 1;
}

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

/* 
  Buttons (Modern Grayscale & Absolute Alignment)
  フォントのベースラインに左右されない、視覚的・数学的に完璧な中央揃えを追求
*/
.btn,
.wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 32px !important; /* 上下パディングではなく、heightで高さを固定して中央制御 */
    height: 54px !important;    /* 高さを固定することで、垂直方向の基準を確定 */
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s;
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
    background: #333 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: none !important;
    gap: 12px;
    cursor: pointer;
    line-height: 0 !important; /* 行間によるズレを根絶 */
    white-space: nowrap;
}

/* ボタン内のテキストとSVGを個別に制御 */
.btn svg,
.wp-block-button__link svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    display: block !important;
    margin: 0 !important;
}

/* テキストノードのみを垂直移動して微調整するのではなく、
   flexの子要素として正しく中央に配置されるよう、必要に応じてspan等で包むことを想定 */
.btn:hover,
.wp-block-button__link:hover {
    background: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    color: #fff !important;
    opacity: 1 !important;
}

/* フォトページ等のラッパー調整 */
.text-center .btn,
.text-center .wp-block-button__link {
    margin: 0 auto;
}

/* WPボタンブロックのラッパー調整 */
.wp-block-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 20px;
}

/* 
  Accordion
*/
.accordion-list {
    border-top: 1px solid #eee;
}

.accordion-item {
    border-bottom: 1px solid #eee;
}

.accordion-header {
    padding: 20px 50px 20px 20px; /* アイコン分の右余白を確保 */
    cursor: pointer;
    font-weight: 700;
    position: relative;
    list-style: none;
    transition: background-color 0.2s;
    background: #f9f9f9;
}

.accordion-header:hover {
    background-color: #f5f5f5;
}

.accordion-header::-webkit-details-marker {
    display: none;
}

/* 共通十字アイコン描画設定 */
.accordion-header::before,
.accordion-header::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    background-color: #333;
    transition: all 0.3s ease;
    display: block !important; /* 表示を保証 */
}

/* 横棒 */
.accordion-header::before {
    width: 16px;
    height: 2px;
    margin-top: -1px;
}

/* 縦棒 */
.accordion-header::after {
    width: 2px;
    height: 16px;
    margin-top: -8px;
    right: 27px; /* (16 / 2) + 20 - (2 / 2) = 27px で中央 */
}

/* 開いた時の変化 */
details[open] .accordion-header::before {
    transform: rotate(180deg);
}

details[open] .accordion-header::after {
    transform: rotate(90deg);
    opacity: 0; /* 縦棒を消してマイナスにする */
}

.accordion-content {
    padding: 20px;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.7;
    background: #fff;
    border-top: 1px solid #eee;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .dl-horizontal {
        margin-bottom: 30px;
    }
    
    .dl-horizontal dt {
        margin-top: 25px;
        font-size: 1.05rem;
    }

    .dl-horizontal dd {
        padding-left: 0;
    }
    
    .toc-list {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}
/* 
  Schedule Timeline Styles (List View)
  汎用テーブル・リストコンポーネント
  - .schedule-timeline: ラッパー
  - .timeline-item: 行（デフォルト白背景、ボーダーのみ）
  - .type-highlight: 強調行（白背景、文字強調）
  - .type-bus: バス行（薄いグレー背景）
  - .timeline-tag: モノトーンタグ
*/
.schedule-timeline {
    margin-top: 40px;
    position: relative;
}

.schedule-day {
    margin-bottom: 60px;
}

.schedule-date {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    background: #333;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.schedule-date .day-en {
    font-size: 1rem;
    opacity: 0.8;
}

.timeline-list {
    border: 1px solid #e0e0e0;
    border-top: none;
}

/* 行のスタイル（基本は白） */
.timeline-item {
    display: flex; /* PCでは横並び */
    border-bottom: 1px solid #e0e0e0;
    padding: 20px;
    transition: background-color 0.2s;
    background-color: #fff;
    align-items: flex-start; /* 上揃え（内容量に応じて） */
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-item:hover {
    background-color: #fafafa; /* ごく薄いグレー */
}

/* 時間カラム */
.timeline-time {
    flex: 0 0 160px; /* 固定幅 */
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a1a1a; /* 黒に近いグレー */
    padding-right: 20px;
    padding-top: 2px; /* タイトルとベースラインを合わせる微調整 */
}

/* 内容エリア */
.timeline-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 30px;
}

/* タイトル */
.timeline-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    flex: 1 1 auto;
    min-width: 200px;
    color: var(--text-color);
}

/* 場所（アイコンなし、シンプル） */
.timeline-place {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    flex: 0 0 auto;
    text-align: right;
}

/* 補足情報 */
.timeline-note {
    font-size: 0.85rem;
    color: #888;
    margin: 5px 0 0;
    width: 100%;
    line-height: 1.5;
}

/* 
  タグスタイル（モノトーン・シック） 
*/
.timeline-tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 700;
    margin-right: 10px;
    vertical-align: middle;
    transform: translateY(-2px);
    border: 1px solid transparent;
}

/* バス：白背景＋黒枠＋黒文字 */
.tag-bus, 
.tag-free-bus { 
    background-color: #fff;
    color: #333;
    border-color: #333;
}

/* 関門：黒背景＋白文字（あるいはアクセントカラー） */
.tag-gate { 
    background-color: #333;
    color: #fff;
}

/* 
  行タイプ別のスタイル 
*/

/* ハイライト行（スタート・フィニッシュ） */
/* 背景色は白のまま、文字や太さで強調 */
.timeline-item.type-highlight {
    background-color: #fff;
}

.timeline-item.type-highlight .timeline-title {
    font-size: 1.2rem; /* 少し大きく */
    letter-spacing: 0.05em;
    /* 必要であればアクセントカラーを少し使う */
    /* color: var(--accent-color); */
}

/* バス行（薄いグレー背景） */
.timeline-item.type-bus {
    background-color: #f7f7f7; /* 青みを消したグレー */
}

.timeline-item.type-bus:hover {
    background-color: #eeeeee;
}

/* 複数行ラッパー */
.timeline-sub-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 30px;
}

.timeline-sub-row + .timeline-sub-row {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ccc; /* グレーの点線 */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .timeline-item {
        flex-direction: column;
        padding: 15px;
    }

    .timeline-time {
        flex: none;
        width: 100%;
        margin-bottom: 10px;
        font-size: 1rem;
        padding-top: 0;
    }

    .timeline-content {
        display: block;
    }

    .timeline-title {
        margin-bottom: 5px;
        font-size: 1.05rem;
    }

    .timeline-place {
        text-align: left;
        margin-top: 5px;
        font-size: 0.85rem;
        display: block;
    }
    
    .timeline-tag {
        margin-bottom: 5px;
    }
}
.news-archive-container {
    padding: 60px 0;
    max-width: 800px;
    margin: 0 auto;
}

/* Year Archive Navigation */
.news-year-nav {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.news-year-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.news-year-nav li a {
    text-decoration: none;
    color: #888;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    transition: color 0.3s;
}

.news-year-nav li a:hover {
    color: var(--text-color);
}

.news-year-nav li.current a {
    color: var(--text-color);
    border-bottom: 2px solid var(--text-color);
    padding-bottom: 5px;
}

.news-archive-list {
    list-style: none;
    padding: 0;
    margin: 0 0 60px;
}

.news-item {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.news-item:first-child {
    border-top: 1px solid var(--border-color);
}

.news-item a {
    display: block;
    padding: 25px 20px;
    color: var(--text-color);
}

.news-item:hover {
    background-color: rgba(0,0,0,0.02);
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: #666;
}

.news-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    background: #eee;
    color: #333;
    font-weight: 700;
}

.tag-important {
    background-color: #d32f2f;
    color: #fff;
}

.tag-info {
    background-color: #004d40;
    color: #fff;
}

.news-item .news-title {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

/* Article Detail (Single) */
.article-container {
    max-width: 800px;
    margin: 60px auto;
}

.article-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

.article-title {
    font-size: 2rem;
    font-family: var(--font-serif);
    margin-bottom: 20px;
    line-height: 1.4;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #666;
    font-family: var(--font-sans);
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.8;
}

.article-body p {
    margin-bottom: 30px;
}

.article-body h2, .article-body h3 {
    margin: 60px 0 30px;
}

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

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 60px 0;
    font-family: var(--font-sans);
}

.pagination .nav-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination a.page-numbers,
.pagination span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.pagination a.page-numbers:hover {
    background-color: var(--text-color);
    color: #fff;
    border-color: var(--text-color);
}

.pagination .page-numbers.current {
    background-color: var(--text-color);
    color: #fff;
    border-color: var(--text-color);
    font-weight: 700;
}

.pagination .dots {
    border: none;
    background: transparent;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .page-hero {
        height: 200px;
        min-height: auto;
    }
    
    .page-title {
        font-size: 1.8rem;
    }
    
    .news-item a {
        padding: 20px 15px;
    }
    
    .news-meta {
        font-size: 0.8rem;
    }
    
    .news-item .news-title {
        font-size: 1rem;
    }
}
.site-footer {
    background: #2a2a2a; /* 画像に近いダークグレー */
    color: #fff;
    padding: 60px 0 30px;
    font-size: 0.85rem;
    position: relative;
    font-family: var(--font-sans);
}

.footer-sns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.footer-sns a {
    color: #888;
    transition: color 0.3s;
}

.footer-sns a:hover {
    color: #fff;
}

.footer-nav-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto 60px;
}

.footer-col {
    flex: 1;
    min-width: 200px;
    padding: 0 15px;
}

.footer-menu-group {
    margin-bottom: 30px;
}

.footer-heading, .footer-heading-link {
    font-weight: 700;
    color: #fff;
    margin: 0 0 15px;
    display: block;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.footer-heading-link {
    text-decoration: none;
}

.footer-heading-link:hover {
    opacity: 0.7;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 30px;
    color: #888;
    font-size: 0.75rem;
}

.sp-only {
    display: none;
}

/* ページトップへ戻るボタン */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 100;
}

.back-to-top:hover {
    opacity: 1;
    transform: translateY(-5px);
}

/* 
  Responsive Footer (Accordion) 
*/
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-nav-area {
        flex-direction: column;
        gap: 0;
        margin-bottom: 30px;
    }

    .footer-col {
        padding: 0;
        border-bottom: 1px solid #444;
    }
    
    .footer-col:last-child {
        border-bottom: none;
    }

    .footer-menu-group {
        margin-bottom: 0;
        border-bottom: 1px solid #333;
    }
    
    .footer-menu-group:last-child {
        border-bottom: none;
    }

    /* アコーディオンのヘッダー */
    .footer-heading, .footer-heading-link {
        margin: 0;
        padding: 15px 0;
        font-size: 0.95rem;
        position: relative;
        cursor: pointer;
        display: block; /* リンクもブロック要素に */
    }

    /* アコーディオンの開閉アイコン */
    .accordion-group .footer-heading::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 400;
        font-size: 1.2rem;
        transition: transform 0.3s;
    }

    /* 開いている状態のアイコン */
    .accordion-group.is-open .footer-heading::after {
        transform: translateY(-50%) rotate(45deg); /* + を x に */
    }

    /* アコーディオンの中身（初期状態は非表示） */
    .accordion-group .footer-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        opacity: 0;
    }

    /* 開いている状態の中身 */
    .accordion-group.is-open .footer-links {
        max-height: 500px; /* 十分な高さを指定 */
        opacity: 1;
        padding-bottom: 20px;
    }
    
    .footer-links li {
        margin-bottom: 12px;
        padding-left: 10px;
    }

    .sp-only {
        display: inline;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/*
  Q&A Nav (Dropdown)
*/
.qa-nav {
    position: relative;
}

.qa-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
}

.qa-nav-toggle:hover {
    color: var(--accent-color);
}

.qa-nav-icon {
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 8px;
}

.qa-nav-toggle[aria-expanded="true"] .qa-nav-icon {
    transform: rotate(180deg);
}

.qa-nav-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-top: 1px solid var(--border-color);
}

.qa-nav-list.is-open {
    display: block;
}

.qa-nav-list li {
    border-bottom: 1px solid #f0f0f0;
}

.qa-nav-list li:last-child {
    border-bottom: none;
}

.qa-nav-list a {
    display: block;
    padding: 12px 24px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.qa-nav-list a:hover {
    color: var(--accent-color);
    background: #f8f8f6;
    padding-left: 28px;
}

/* Desktop: ドロップダウンの幅制限 */
@media (min-width: 769px) {
    .qa-nav-list {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 91;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
}

/*
  Q&A Styles
*/
.qa-category {
    margin-bottom: 60px;
    scroll-margin-top: 100px; /* ローカルナビの分ずらす */
}

.qa-category-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-color);
    font-family: var(--font-sans);
}

.qa-item {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s;
}

.qa-item[open] {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.qa-question {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
    display: flex;
    gap: 15px;
    padding: 25px 60px 25px 25px; /* 右パディングを増やしてアイコン被りを防止 */
    cursor: pointer;
    list-style: none;
    position: relative;
    align-items: flex-start;
    transition: background-color 0.2s;
}

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

.qa-question:hover {
    background-color: #f9f9f9;
}

/* 開閉アイコン */
.qa-question::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 25px;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--accent-color);
    line-height: 1;
    transition: transform 0.3s;
}

details[open] .qa-question::after {
    transform: rotate(45deg);
}

.qa-question::before {
    content: 'Q.';
    font-family: var(--font-sans);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--accent-color);
    flex-shrink: 0; /* 縮まないように */
}

.qa-answer {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    padding: 0 25px 25px 65px; /* Qの幅+gap分インデント */
    position: relative;
    /* アニメーション用 */
    animation: slideDown 0.3s ease-out;
}

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

.qa-answer::before {
    content: 'A.';
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    position: absolute;
    left: 25px;
    top: 0;
    color: #333;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .qa-item {
        margin-bottom: 15px;
    }
    
    .qa-question {
        padding: 20px;
        font-size: 1rem;
        padding-right: 40px; /* アイコン被り防止 */
    }
    
    .qa-question::after {
        right: 15px;
        top: 20px;
    }
    
    .qa-answer {
        padding: 0 20px 20px;
        margin-top: 0;
    }
    
    .qa-answer::before {
        position: static;
        display: block;
        margin-bottom: 5px;
    }
}

/* ==========================================================================
   Partners Page Styles
   ========================================================================== */
.partner-list-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.partner-rank-section {
    margin-bottom: 80px;
}

.partner-rank-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.partner-rank-header h2 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    margin: 0;
    display: inline-block;
    background: var(--bg-color);
    padding: 0 20px;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.partner-rank-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
    z-index: 0;
}

.partner-item-detail {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    padding: 30px;
    transition: all 0.3s;
    border-radius: 4px;
}

.partner-item-detail:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.partner-logo-col {
    flex: 0 0 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 30px;
    border-right: 1px solid #eee;
}

.partner-logo-col img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
}

.partner-info-col {
    flex: 1;
    padding-left: 30px;
}

.partner-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 10px;
    font-family: var(--font-sans);
}

.partner-desc {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 15px;
    line-height: 1.6;
}

.partner-link {
    font-size: 0.85rem;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
}

.partner-link::after {
    content: '\2192';
    margin-left: 5px;
    transition: transform 0.3s;
}

.partner-link:hover::after {
    transform: translateX(3px);
}

.partner-simple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.partner-simple-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    border-radius: 4px;
    transition: all 0.3s;
}

.partner-simple-item:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.partner-simple-item img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
}

@media (max-width: 768px) {
    .partner-item-detail {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .partner-logo-col {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .partner-info-col {
        padding-left: 0;
    }

    .partner-simple-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* ==========================================================================
   Result Page Styles
   ========================================================================== */
.result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.result-list li {
    margin-bottom: 0;
}

.result-year-group {
    margin-bottom: 30px;
}

.accordion-item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 15px;
    background: #fff;
    overflow: hidden;
}

.result-category {
    margin-bottom: 20px;
}

.result-category-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    border-left: 4px solid var(--accent-color);
    padding-left: 10px;
    font-family: var(--font-sans);
}

/* ==========================================================================
   Access Page Styles
   ========================================================================== */
.access-map-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.access-map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.access-header {
    text-align: center;
    margin-bottom: 40px;
}

.venue-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.venue-address {
    color: #666;
    margin-bottom: 20px;
    font-family: var(--font-sans);
}

.access-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.access-card {
    background: #fff;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.access-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--accent-color);
    display: block;
}

.access-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-color);
    font-family: var(--font-sans);
}

.route-step {
    margin-bottom: 20px;
}

.route-step-title {
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.route-time {
    color: #888;
    font-size: 0.9rem;
    font-family: var(--font-sans);
}

.btn-navi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    background: #fff;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    border-radius: 4px;
    transition: all 0.3s;
    margin-top: 20px;
    font-family: var(--font-sans);
}

.btn-navi:hover {
    background: var(--accent-color);
    color: #fff;
}

.btn-navi svg {
    margin-right: 10px;
    width: 20px;
    height: 20px;
}

.access-note {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #666;
    margin-top: 20px;
}

.access-image-full {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .access-methods {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ==========================================================================
   Contact Page Styles
   ========================================================================== */
.contact-section {
    background: #fff;
    padding: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 40px;
}

.contact-note {
    background: #f9f9f9;
    padding: 20px;
    border: 1px solid #e0e0e0;
    margin-bottom: 40px;
    font-size: 0.95rem;
    border-radius: 4px;
}

.contact-group {
    margin-bottom: 40px;
}

.contact-group:last-child {
    margin-bottom: 0;
}

.contact-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    font-family: var(--font-sans);
}

.contact-info {
    margin-bottom: 20px;
}

.contact-label {
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-size: 0.9rem;
}

.contact-email {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: var(--accent-color);
    text-decoration: underline;
}

.contact-hours {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

/* ==========================================================================
   Links Page Styles
   ========================================================================== */
.link-section {
    margin-bottom: 60px;
}

.link-section-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-color);
    font-family: var(--font-sans);
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.link-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s;
}

.link-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    border-color: var(--accent-color);
}

.link-item a {
    display: flex;
    padding: 20px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    justify-content: space-between;
    align-items: center;
}

.link-item a::after {
    content: '\2192';
    color: var(--accent-color);
    font-family: var(--font-sans);
    margin-left: 10px;
}

@media (min-width: 769px) {
    .link-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Download Page Styles
   ========================================================================== */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.download-grid .pdf-card-container {
    margin: 0;
    height: 100%;
}

.download-grid .pdf-card {
    height: 100%;
    box-sizing: border-box;
}

.section-group {
    margin-bottom: 50px;
}

/* ==========================================================================
   Bus / Transport Page Styles
   ========================================================================== */
.bus-note {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

.bus-price {
    font-weight: bold;
    color: var(--accent-color);
}

.tab-content h3 {
    margin-top: 30px;
    font-size: 1.2rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    font-weight: 700;
}

.tab-content h4 {
    margin-top: 20px;
    font-size: 1.05rem;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
}

/* ==========================================================================
   Trailwork Page Styles
   ========================================================================== */
.photo-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 40px 0;
}

.photo-stack img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/*
  WP Gallery — サムネイルグリッド
*/
.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 20px 0;
}
.wp-block-gallery .wp-block-image {
    margin: 0;
}
.wp-block-gallery .wp-block-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.wp-block-gallery .wp-block-image img:hover {
    opacity: 0.85;
}
@media (max-width: 600px) {
    .wp-block-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .wp-block-gallery .wp-block-image img {
        height: 120px;
    }
}

/* 単体画像もクリック可能に */
.page-body > .wp-block-image img {
    cursor: pointer;
    transition: opacity 0.2s;
}
.page-body > .wp-block-image img:hover {
    opacity: 0.85;
}

/*
  Lightbox
*/
.sfmt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    cursor: zoom-out;
}
.sfmt-lightbox.is-active {
    opacity: 1;
}
.sfmt-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.sfmt-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    background: none;
    border: none;
    font-family: sans-serif;
}
.sfmt-lightbox-close:hover {
    opacity: 1;
}

/* ==========================================================================
   Outline / Definition List Styles
   大会要項などの事務的な情報を表示するためのリスト
   ========================================================================== */
.outline .page-container {
    max-width: 980px;
}

.outline .page-body {
    background: transparent;
    border: 0;
    padding: 0;
}

.outline .page-body h2 {
    font-size: 2.05rem;
    margin: 0 0 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #222;
    font-family: var(--font-sans);
    line-height: 1.4;
}

.outline .page-body h3,
.outline .page-body h4 {
    display: block;
    background: transparent;
    color: var(--accent-color);
    font-family: var(--font-sans);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0 0 0 18px;
    margin: 28px 0 10px;
    position: relative;
    line-height: 1.4;
}

.outline .page-body h3::before,
.outline .page-body h4::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
    font-size: 1.2em;
    line-height: 1;
}

.outline .page-body p,
.outline .page-body li {
    font-size: 1rem;
    line-height: 1.85;
}

.outline .page-body p {
    margin: 0 0 14px;
}

.outline .page-body ul,
.outline .page-body ol {
    margin: 8px 0 16px;
    padding-left: 1.3em;
}

.outline .page-body hr {
    border: 0;
    border-top: 1px solid #d8d8d8;
    margin: 18px 0 20px;
}

/* 
  Definition List (Block Style: outline-list) 
*/
.outline-list {
    margin-bottom: 40px;
}

.outline-item {
    display: block;
    margin-bottom: 35px;
    padding: 0;
}

.outline-term {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--accent-color);
    font-family: var(--font-sans);
    line-height: 1.4;
    font-size: 1.2rem;
    padding: 0 0 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

/* 左端にアクセント */
.outline-term::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: var(--accent-color);
    margin-right: 12px;
}

.outline-desc {
    line-height: 1.8;
    color: var(--text-color);
    font-size: 1rem;
    padding-left: 15px;
}

/* 募集要項を包むグループ（プロトタイプのinfo-box再現） */
.recruitment-box {
    background: #fff;
    border: 1px solid #dcd9d0;
    padding: 40px;
    margin: 30px 0 60px;
    border-radius: 4px;
}

.recruitment-box .outline-list:last-child {
    margin-bottom: 0;
}

.outline-desc p {
    margin-bottom: 15px;
}

.outline-desc ul, 
.outline-desc ol {
    margin: 15px 0;
    padding-left: 1.2em;
}

.outline-desc li {
    margin-bottom: 8px;
}

.outline-desc p {
    margin: 0 0 10px;
}

.outline-desc p:last-child {
    margin-bottom: 0;
}

.outline-desc ul,
.outline-desc ol {
    margin: 10px 0 0;
    padding-left: 20px;
}

.outline-desc li {
    margin-bottom: 5px;
}

.outline-note {
    font-size: 0.88rem;
    color: #666;
    margin-top: 10px;
}

/* エディタ内: outline-list子ブロックの隙間を消す */
.outline-list .acf-block-body,
.outline-list .block-editor-block-list__layout,
.outline-list > .acf-innerblocks-container {
    display: contents;
}
.outline-list > .acf-innerblocks-container > .acf-block-component,
.outline-list > .acf-innerblocks-container > [data-block],
.outline-list .block-editor-block-list__layout > [data-block] {
    margin-top: 0;
    margin-bottom: 0;
}

.text-highlight {
    color: #c0392b;
    font-weight: 700;
}

@media (max-width: 768px) {
    .outline .page-body h2 {
        font-size: 1.45rem;
        margin-bottom: 18px;
    }

    .outline .page-body h3,
    .outline .page-body h4 {
        font-size: 1.25rem;
        margin-top: 18px;
    }

    .outline-item {
        padding: 25px 15px;
    }

    .outline-term {
        font-size: 1.15rem;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .outline-desc {
        padding-left: 0;
    }
}

/* テーブル（entry-table）のモダン化 */
.entry-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0 60px; /* 前後の余白をより広めに確保 */
    background: #fff;
    font-size: 0.95rem;
}

.entry-table caption {
    caption-side: top;
    text-align: left;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.2rem; /* 少し大きく */
    letter-spacing: 0.05em;
    margin-bottom: 20px; /* テーブルとの隙間 */
    color: var(--text-color);
    padding: 5px 0 5px 15px; /* 左側にゆとりを */
    border-left: 6px solid var(--text-color); /* バーを太くして存在感を出す */
    line-height: 1.4;
    display: table-caption; /* 確実にタイトルとして配置 */
}

.entry-table th {
    background-color: #f9f8f4;
    border: 1px solid #dcd9d0;
    padding: 15px; /* パディングを広げてクリーンに */
    text-align: center;
    font-weight: 700;
}

.entry-table td {
    border: 1px solid #dcd9d0;
    padding: 12px 15px;
    line-height: 1.6;
}

.entry-table tr:nth-child(even) td {
    background-color: #fafafa;
}

/* ボタンブロック（wp-block-buttons）の調整 */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* ボタン同士の隙間を確保 */
    margin: 20px 0;
}

.wp-block-button__link {
    background-color: #1a1a1a;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 700;
    transition: background-color 0.3s;
}

.wp-block-button__link:hover {
    background-color: #333;
    opacity: 1;
}

/* ページ内リズムの調整 */
.page-body h2 {
    margin-top: 60px;
    margin-bottom: 30px;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 10px;
}

.page-body h3 {
    margin-top: 60px; /* 見出し前の余白をたっぷり取ることで、項目を際立たせる */
    margin-bottom: 25px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    border-left: none; /* ボーダーを削除 */
    padding-left: 0;   /* パディングもリセット */
    color: var(--text-color);
}

/* ページ内のリスト（箇条書き）から不要な黒丸を消す */
.page-body ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.page-body li {
    margin-bottom: 10px;
    line-height: 1.7;
    position: relative;
}

/* 通常の箇条書き（数字なし）のみにアクセントをつける場合は別途定義可能ですが、
   今回は全てのリストをスッキリさせるため、一律でブレットを廃止します */

.page-body p + ul {
    margin-top: -10px; /* 直前の段落との距離を詰めて関連性を持たせる */
}

.page-body p + h3 {
    margin-top: 50px;
}

/* ハイライトボックスの余白調整 */
.highlight-box {
    margin: 40px 0;
    padding: 30px !important;
}
.info-table-group {
    border-top: 1px solid #dcd9d0;
    margin-bottom: 40px;
    background-color: #fff;
    border-left: 1px solid #dcd9d0;
    border-right: 1px solid #dcd9d0;
}

.info-table-row {
    display: flex;
    border-bottom: 1px solid #dcd9d0;
    min-height: 60px;
}

.info-table-row__label {
    flex: 0 0 240px;
    background-color: #f9f8f4;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    border-right: 1px solid #dcd9d0;
}

.info-table-row__label .label-text {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}

.info-table-row.is-sub-item .info-table-row__label {
    padding-left: 45px;
}

.info-table-row__content {
    flex: 1;
    padding: 20px 30px;
    background-color: #fff;
    font-size: 1rem;
    line-height: 1.8;
}

.info-table-row__content > div:first-child {
    display: block !important;
}

.info-table-row__content p {
    margin: 0 0 15px;
}
.info-table-row__content p:last-child {
    margin-bottom: 0;
}
.info-table-row__content ul, 
.info-table-row__content ol {
    margin: 15px 0 0;
    padding-left: 1.5em;
}
.info-table-row__content li {
    margin-bottom: 8px;
}

@media screen and (max-width: 782px) {
    .info-table-group {
        border-left: none;
        border-right: none;
    }
    .info-table-row {
        flex-direction: column;
    }
    .info-table-row__label {
        flex: none;
        width: 100%;
        padding: 15px 20px;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    .info-table-row__content {
        padding: 20px;
    }
    .info-table-row.is-sub-item .info-table-row__label {
        padding-left: 30px;
    }
}