/**
 * 日本誠真会 選挙サイト
 * 左右固定・中央スクロールレイアウト
 */

/* ===== CSS変数（サイト全体の基本設定） ===== */
:root {
    --color-primary: #E85C2C; /* メインカラー（朱色） */
    --color-primary-dark: #C4472D; /* メインカラー（暗め） */
    --color-text: #1a1a1a; /* 基本文字色 */
    --color-text-light: #555; /* 薄い文字色 */
    --color-bg: #fff; /* 背景色 */
    --card-radius: 16px; /* カードの角丸 */
    --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; /* フォント（日本語読みやすさ重視） */
}

/* ===== 全要素の基本設定 ===== */
*, *::before, *::after {
    box-sizing: border-box; /* ボックスサイズの計算方法 */
}

/* ===== bodyタグ（ページ全体） ===== */
body {
    margin: 0; /* 外側の余白 */
    font-family: var(--font-sans); /* フォント */
    font-size: 16px; /* 文字サイズ */
    line-height: 1.7; /* 行の高さ */
    color: var(--color-text); /* 文字色 */
    background-color: #fff; /* 背景色（白） */
    height: 100vh; /* 高さ（画面いっぱい） */
    overflow: hidden; /* はみ出し非表示 */
    position: relative; /* 疑似要素の基準 */
}

/* 背景画像（透明度調整用） */
body::before {
    content: ''; /* 疑似要素に必須 */
    position: fixed; /* 画面全体に固定 */
    top: 0;
    left: 0;
    width: 100%; /* 幅100% */
    height: 100%; /* 高さ100% */
    background-image: url('../images/HPトップ背景.png'); /* 背景画像 */
    background-size: cover; /* 画像を画面全体に拡大 */
    background-position: center; /* 画像を中央に配置 */
    background-repeat: no-repeat; /* 繰り返しなし */
    opacity: 0.1; /* 透明度（0.1=10%、とても薄い） */
    z-index: -1; /* コンテンツの後ろに配置 */
    pointer-events: none; /* クリック無効 */
}

/* ===== 3カラムレイアウト全体 ===== */
.layout {
    display: flex; /* 横並び */
    height: 100%; /* 高さ100% */
    width: 100%; /* 幅100% */
}

/* ===== 左カラム（メニュー＋応援ボタンの外枠） ===== */
.left-column {
    width: 36%; /* 幅 */
    min-width: 260px; /* 最小幅 */
    background: transparent; /* 背景色（透明＝背景画像が見える） */
    display: flex; /* 縦並び */
    flex-direction: column; /* 縦方向に配置 */
}

/* 左カラムの文字色・リンク下線 */
.left-column, .left-column a {
    color: #fff !important; /* 文字色（白） */
    text-decoration: none; /* 下線なし */
}

/* 左カラムのリンクホバー時 */
.left-column a:hover {
    text-decoration: none; /* 下線なし */
}

/* ===== 左メニュー（ロゴ・ナビ部分） ===== */
.left-menu {
    flex: 1; /* 残りスペースを埋める */
    overflow-y: hidden; /* スクロール不可 */
    display: flex; /* 縦並び */
    flex-direction: column; /* 縦方向に配置 */
    padding: 120px 0px 30px 100px; /* 余白（上 右 下 左） */
    transform: translateX(15px); /* 右方向にずらす */
}

/* 左メニューのスクロールバー非表示（Chrome/Safari） */
.left-menu::-webkit-scrollbar {
    display: none; /* 非表示 */
}

/* ===== 応援ボタン（左下固定） ===== */
.left-column .support-btn {
    flex-shrink: 0; /* 縮小しない */
}

/* ===== ロゴ部分 ===== */
.menu-logo {
    margin-bottom: 26px; /* 下の余白 */
    display: block; /* ブロック要素 */
}

/* ロゴのテキスト */
.menu-logo .logo-text {
    font-size: 24px; /* 文字サイズ */
    font-weight: 700; /* 太さ */
}

/* ロゴ画像 */
.menu-logo img {
    height: 40px; /* 高さ */
    width: auto; /* 幅（自動） */
}

/* ===== メニューリスト ===== */
.menu-list {
    list-style: none; /* リストマーカーなし */
    margin: 0; /* 外側の余白 */
    padding: 0 100px 0 0; /* 余白（上 右 下 左） */
    flex: 1; /* 残りスペースを埋める */
}

/* ===== メニュー項目 ===== */
.menu-item {
    font-size: 18px; /* 文字サイズ */
    padding: 0px 0; /* 余白（上下） */
    border-bottom: none; /* 下線なし */
    font-weight: 700; /* 太さ */
}

/* メニュー項目のリンク */
.menu-item a {
    display: flex; /* 横並び */
    justify-content: space-between; /* 両端揃え */
    align-items: center; /* 縦中央揃え */
    color: #fff !important; /* 文字色（白） */
    text-decoration: none; /* 下線なし */
}

/* ===== 左メニューの矢印（<記号） ===== */
.menu-arrow {
    font-size: 30px; /* 文字サイズ */
    opacity: 0.7; /* 不透明度 */
    margin-right: 80px; /* 余白（右） */
}

/* ===== 応援ボタンの詳細スタイル ===== */
.left-column .support-btn {
    display: flex; /* 横並び */
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
    gap: 0.35em; /* 要素間の隙間 */
    margin-top: 20px; /* 上の余白（メニューとの間隔） */
    margin-left: 124px; /* 余白（左） */
    margin-right: 124px; /* 余白（右） */
    margin-bottom: 180px; /* 余白（下） */
    padding: 12px 20px; /* 内側の余白 */
    text-align: center; /* 文字中央揃え */
    font-size: 15px; /* 文字サイズ */
    font-weight: 600; /* 太さ */
    background: #E85C2C; /* 背景色（赤） */
    border: 2px solid #E85C2C; /* 枠線（赤） */
    border-radius: 999px; /* 角丸（丸ボタン） */
    color: #fff !important; /* 文字色（白） */
    text-decoration: none; /* 下線なし */
    transition: all 0.3s ease; /* アニメーション */
}

/* 応援ボタンのホバー時 */
.left-column .support-btn:hover {
    background: #C94A1F; /* 背景色（濃い赤） */
    border-color: #C94A1F; /* 枠線色（濃い赤） */
    color: #fff !important; /* 文字色（白） */
}

/* ===== 中央メイン（スクロール領域） ===== */
/* 中央の見出しの枠線を消す */
.center h2, .center h3, .center h4, .center .section-title, .center .policy-category {
    border: none !important; /* 枠線なし */
}

/* 中央カラム */
.center {
    width: 35%; /* 幅 */
    min-width: 150px; /* 最小幅 */
    flex: none; /* 幅を固定（widthの値を使用） */
    overflow-y: auto; /* 縦スクロール可 */
    scrollbar-width: none; /* スクロールバー非表示（Firefox） */
    -ms-overflow-style: none; /* スクロールバー非表示（IE） */
    padding: 0; /* 余白なし（上の隙間削除） */
    background: #f5f5f5; /* 背景色（薄いグレー） */
}

/* 中央カラムのスクロールバー非表示（Chrome/Safari） */
.center::-webkit-scrollbar {
    display: none; /* 非表示 */
}

/* ===== カード共通 ===== */
.center .card {
    background: #fff; /* 背景色（白） */
    border-radius: 0; /* 角丸なし（四角） */
    padding-bottom: 24px; /* 下の余白 */
    margin-bottom: 0; /* 下の外側余白 */
    box-shadow: none; /* 影なし */
    overflow: hidden; /* はみ出し非表示 */
}

/* ===== 右SNSバー（固定） ===== */
.sns-bar {
    width: 16%; /* 幅 */
    min-width: 80px; /* 最小幅 */
    align-self: center; /* 縦中央揃え */
    display: flex; /* 縦並び */
    flex-direction: column; /* 縦方向に配置 */
    align-items: flex-start; /* 左揃え */
    justify-content: center; /* 縦中央揃え */
    padding-left: 8px; /* 余白（左） */
    gap: 18px; /* 要素間の隙間 */
    background: transparent; /* 背景色（透明＝背景画像が見える） */
}

/* SNSアイコン群 */
.sns-bar .sns-icons {
    display: flex; /* 縦並び */
    flex-direction: column; /* 縦方向に配置 */
    gap: 12px; /* 要素間の隙間 */
}

/* SNSアイコン（個別） */
.sns-bar .sns-icon {
    width: 56px; /* 幅 */
    height: 56px; /* 高さ */
    background: transparent; /* 背景透明 */
    border-radius: 0; /* 角丸なし */
    box-shadow: none; /* 影なし */
    display: flex; /* 中央揃え */
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
    transition: transform 0.2s ease; /* アニメーション */
}

/* SNSアイコンのホバー時 */
.sns-bar .sns-icon:hover {
    transform: scale(1.1); /* 拡大 */
}

/* SNSアイコン画像 */
.sns-bar .sns-icon img {
    width: 36px; /* 幅 */
    height: 36px; /* 高さ */
    display: block; /* ブロック要素 */
}

/* ===== 中央ヘッダー（ロゴ） ===== */
.center-header {
    background: #fff; /* 背景色（白） */
    padding: 16px 24px; /* 内側の余白 */
    text-align: center; /* 中央揃え */
}

.center-header-logo {
    display: block; /* ブロック要素 */
    max-width: 180px; /* 最大幅 */
    height: auto; /* 高さ自動 */
    margin: 0 auto; /* 中央揃え */
}

/* ===== フロントページ：ヒーローカード ===== */
/* ヒーローカード背景 */
.hero-card {
    background: #E85C2C !important; /* 背景色（赤） */
    color: #fff !important; /* 文字色（白） */
}

.hero-card .card-body * {
    color: #fff !important; /* 文字色（白） */
}

/* ヒーロー画像 */
.hero-card .hero-image,
.hero-card .hero-placeholder {
    width: 100%; /* 幅100% */
/*    aspect-ratio: 16/10; */ /* アスペクト比 */
    object-fit: cover; /* 画像の切り取り方法 */
}

/* ヒーロープレースホルダー */
.hero-placeholder {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); /* グラデーション背景 */
    opacity: 0.4; /* 不透明度 */
}

/* ヒーローカードの本文エリア */
.hero-card .card-body {
    padding: 10px 24px; /* 内側の余白（上を小さく） */
    text-align: center; /* 中央揃え */
}

/* ラベルボックス */
.label-box {
    display: inline-block; /* インラインブロック */
    padding: 6px 14px; /* 内側の余白 */
    font-size: 15px; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    border: 2px solid #000; /* 枠線（黒） */
    background: #fff; /* 背景色（白） */
    margin-bottom: 12px; /* 下の余白 */
}

/* キャッチコピー */
.catch-box {
    display: block; /* ブロック要素 */
    padding: 4px 0; /* 内側の余白（小さく） */
    font-size: 22px; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    margin-bottom: 8px; /* 下の余白（小さく） */
}

/* セクションタイトル */
.section-title {
    font-size: 1.25rem; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    margin-bottom: 16px; /* 下の余白 */
    text-align: center; /* 中央揃え */
}

/* ヒーローのタグライン（党首名） */
.hero-card .hero-tagline {
    font-size: 16px; /* 文字サイズ */
    color: var(--color-text-light); /* 文字色（薄め） */
    margin-bottom: 10px; /* 下の余白（小さく） */
}

/* 動画リンク */
.hero-video-link {
    display: inline-flex; /* インラインフレックス */
    align-items: center; /* 縦中央揃え */
    gap: 0.5rem; /* 要素間の隙間 */
    color: var(--color-primary); /* 文字色 */
    font-weight: 600; /* 太さ */
}

/* ===== 政策・公約セクション ===== */
.policy-section .card,
.intro-section .card,
.team-section .card,
.candidates-section .card,
.values-section .card,
.join-section .card {
    padding: 24px; /* 内側の余白 */
}

/* 政策カテゴリ */
.policy-category {
    margin-bottom: 24px; /* 下の余白 */
}

/* 最後の政策カテゴリ */
.policy-category:last-child {
    margin-bottom: 0; /* 下の余白なし */
}

/* 政策カテゴリの番号 */
.policy-category-num {
    font-size: 1.5rem; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    color: var(--color-primary); /* 文字色 */
    margin-bottom: 4px; /* 下の余白 */
}

/* 政策カテゴリのタイトル */
.policy-category-title {
    font-size: 1.2rem; /* 文字サイズ */
    font-weight: 600; /* 太さ */
    margin-bottom: 12px; /* 下の余白 */
}

/* 政策カード群 */
.policy-cards {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 列の設定 */
    gap: 12px; /* 要素間の隙間 */
}

/* 政策カード（個別） */
.policy-card {
    padding: 16px; /* 内側の余白 */
    background: #f8f9fa; /* 背景色 */
    border-radius: 8px; /* 角丸 */
}

/* 政策カードのアイコン・見出し・説明文 */
.policy-card-icon { font-size: 1.5rem; margin-bottom: 8px; } /* アイコン */
.policy-card h5 { font-size: 1rem; margin: 0 0 4px; } /* 見出し */
.policy-card p { font-size: 0.9rem; color: var(--color-text-light); margin: 0; } /* 説明文 */

/* メインボタン */
.main-btn {
    display: inline-block; /* インラインブロック */
    background: var(--color-primary); /* 背景色 */
    color: #fff !important; /* 文字色（白） */
    padding: 12px 18px; /* 内側の余白 */
    border-radius: 999px; /* 角丸（丸ボタン） */
    font-size: 15px; /* 文字サイズ */
    text-decoration: none; /* 下線なし */
}

/* サブボタン */
.sub-btn {
    display: inline-block; /* インラインブロック */
    background: #fff; /* 背景色（白） */
    border: 1px solid #ccc; /* 枠線 */
    padding: 11px 16px; /* 内側の余白 */
    border-radius: 999px; /* 角丸（丸ボタン） */
    text-decoration: none; /* 下線なし */
    font-size: 15px; /* 文字サイズ */
    color: #333; /* 文字色 */
}

/* ボタンエリア */
.btn-area {
    display: flex; /* 横並び */
    gap: 10px; /* 要素間の隙間 */
    flex-wrap: wrap; /* 折り返し */
    margin-top: 16px; /* 上の余白 */
}

/* ===== 紹介セクション ===== */
.intro-section .card {
    background: var(--color-primary); /* 背景色 */
    color: #fff; /* 文字色（白） */
}

/* 紹介セクションのテキスト */
.intro-section .intro-text {
    color: #fff; /* 文字色（白） */
}

/* 紹介セクションのリンク */
.intro-section .intro-link {
    color: #fff !important; /* 文字色（白） */
}

/* ===== チーム・代表者セクション ===== */
.team-leader {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: 120px 1fr; /* 列の設定（写真 + 本文） */
    gap: 20px; /* 要素間の隙間 */
    margin-bottom: 20px; /* 下の余白 */
}

/* 代表者写真 */
.leader-photo img,
.leader-placeholder {
    width: 100%; /* 幅100% */
    aspect-ratio: 1; /* 正方形 */
    object-fit: cover; /* 画像の切り取り方法 */
    border-radius: 50%; /* 角丸（丸） */
}

/* 代表者写真プレースホルダー */
.leader-placeholder {
    background: #eee; /* 背景色 */
}

/* 代表者名・経歴 */
.leader-name { font-size: 1.25rem; margin-bottom: 8px; } /* 名前 */
.leader-bio { font-size: 0.95rem; color: var(--color-text-light); } /* 経歴 */

/* スケジュールプレースホルダー */
.schedule-placeholder {
    padding: 16px; /* 内側の余白 */
    background: #f5f5f5; /* 背景色 */
    border-radius: 8px; /* 角丸 */
    font-size: 0.9rem; /* 文字サイズ */
    color: var(--color-text-light); /* 文字色 */
}

/* ===== 候補者セクション ===== */
.candidates-grid {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* 列の設定 */
    gap: 16px; /* 要素間の隙間 */
}

/* 候補者カード */
.candidate-card {
    background: #f8f9fa; /* 背景色 */
    border-radius: 8px; /* 角丸 */
    overflow: hidden; /* はみ出し非表示 */
}

/* 候補者写真 */
.candidate-photo img,
.candidate-placeholder {
    width: 100%; /* 幅100% */
    aspect-ratio: 1; /* 正方形 */
    object-fit: cover; /* 画像の切り取り方法 */
}

/* 候補者写真プレースホルダー */
.candidate-placeholder {
    background: #ddd; /* 背景色 */
}

/* 候補者リンク・名前・所属・職業・プロフィールリンク・SNS */
.candidate-link { padding: 12px; display: block; } /* リンク */
.candidate-name { font-size: 0.95rem; font-weight: 600; margin: 0 0 4px; } /* 名前 */
.candidate-block, .candidate-profession { font-size: 0.8rem; color: var(--color-text-light); margin: 0; } /* 所属・職業 */
.candidate-profile-link { display: block; padding: 0 12px 12px; font-size: 0.85rem; color: var(--color-primary); } /* プロフィールリンク */
.candidate-sns { padding: 0 12px 12px; display: flex; gap: 8px; } /* SNS */

/* 候補者なし表示 */
.candidates-empty {
    padding: 24px; /* 内側の余白 */
    text-align: center; /* 中央揃え */
    background: #f8f9fa; /* 背景色 */
    border-radius: 8px; /* 角丸 */
}

/* ===== 価値観セクション ===== */
.value-item {
    padding: 16px 0; /* 内側の余白（上下） */
}

/* 価値観項目 */
.value-item:last-child { margin-bottom: 0; } /* 最後の項目は下余白なし */
.value-item h4 { font-size: 1.1rem; margin-bottom: 4px; } /* 見出し */
.value-item p { font-size: 0.95rem; color: var(--color-text-light); margin: 0; } /* 説明文 */

/* ===== 参加・応援セクション ===== */
.join-section .card {
    background: var(--color-primary); /* 背景色 */
    color: #fff; /* 文字色（白） */
}

/* 参加カード群 */
.join-cards {
    display: grid; /* グリッドレイアウト */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 列の設定 */
    gap: 16px; /* 要素間の隙間 */
    margin-top: 16px; /* 上の余白 */
}

/* 参加カード（個別） */
.join-card {
    padding: 20px; /* 内側の余白 */
    background: rgba(255,255,255,0.15); /* 背景色（半透明白） */
    border-radius: 8px; /* 角丸 */
}

/* 参加カードの見出し・説明文 */
.join-card h4 { margin-bottom: 8px; } /* 見出し */
.join-card p { font-size: 0.9rem; margin-bottom: 12px; opacity: 0.95; } /* 説明文 */

/* 参加ボタン */
.join-button {
    display: inline-block; /* インラインブロック */
    padding: 10px 16px; /* 内側の余白 */
    background: #fff; /* 背景色（白） */
    color: var(--color-primary) !important; /* 文字色 */
    border-radius: 999px; /* 角丸（丸ボタン） */
    font-weight: 600; /* 太さ */
}

/* ===== 中央フッター ===== */
.center-footer {
    display: block; /* 表示 */
    background: #fff; /* 背景色（白） */
    padding: 40px 24px; /* 内側の余白 */
    text-align: center; /* 中央揃え */
}

/* フッター内部 */
.footer-inner {
    max-width: 600px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
}

/* フッターロゴ */
.footer-logo {
    display: block; /* ブロック要素 */
    max-width: 150px; /* 最大幅 */
    height: auto; /* 高さ自動 */
    margin: 0 auto 24px; /* 中央揃え、下余白 */
}

/* フッター注意書き */
.footer-notice {
    margin-bottom: 20px; /* 下の余白 */
    color: #666; /* 文字色（グレー） */
    font-size: 0.9rem; /* 文字サイズ */
}

.footer-notice p {
    margin: 4px 0; /* 上下の余白 */
}

/* フッター住所 */
.footer-address {
    margin-bottom: 24px; /* 下の余白 */
    color: #333; /* 文字色 */
    font-size: 0.95rem; /* 文字サイズ */
}

.footer-address p {
    margin: 4px 0; /* 上下の余白 */
}

/* フッターメニュー */
.footer-menu {
    display: flex; /* 横並び */
    flex-wrap: wrap; /* 折り返し */
    justify-content: center; /* 中央揃え */
    gap: 16px; /* 要素間の隙間 */
    list-style: none; /* リストマーカーなし */
    margin: 0 0 20px; /* 外側の余白 */
    padding: 0; /* 内側の余白 */
}

/* フッターメニューのリンク */
.footer-menu a {
    color: #333; /* 文字色 */
    font-size: 0.9rem; /* 文字サイズ */
    text-decoration: none; /* 下線なし */
}

.footer-menu a:hover {
    text-decoration: underline; /* ホバー時下線 */
}

/* コピーライト */
.copyright {
    font-size: 0.85rem; /* 文字サイズ */
    color: #666; /* 文字色（グレー） */
    margin: 0; /* 余白なし */
}

/* ===== 動画サムネイルリンク ===== */
.video-thumb {
    display: block;
    position: relative;
    width: 100%;
    margin: 16px 0;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
}

.video-thumb img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.2s;
}

.video-thumb:hover img {
    opacity: 0.85;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    pointer-events: none;
    transition: background 0.2s;
}

.video-thumb:hover .video-play-btn {
    background: #E85C2C;
}

/* ===== モバイルヘッダー（常に表示） ===== */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    padding: 10px 20px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    height: 56px;
}

.mobile-header-logo {
    height: 32px;
    width: auto;
}

.mobile-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-menu-btn img {
    width: 32px;
    height: 32px;
    display: block;
}

/* ===== モバイルナビオーバーレイ ===== */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #fff;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-nav-overlay.is-open {
    display: flex;
}

.mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    height: 56px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.mobile-nav-top-logo {
    height: 32px;
    width: auto;
}

.mobile-nav-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0 20px;
    flex: 1;
}

.mobile-nav-list li {
    border-bottom: 1px solid #eee;
}

.mobile-nav-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    color: #1a1a1a !important;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
}

.mobile-nav-list li a:hover {
    color: #E85C2C !important;
}

.mobile-nav-arrow {
    font-size: 14px;
    color: #aaa;
}

.mobile-nav-support {
    margin: 20px;
    display: block;
    background: #E85C2C;
    color: #fff !important;
    text-align: center;
    padding: 14px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.mobile-nav-support:hover {
    background: #cc4a1c;
}

.mobile-nav-sns {
    padding: 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.mobile-nav-sns a {
    width: 44px;
    height: 44px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.mobile-nav-sns a:hover {
    transform: scale(1.1);
}

.mobile-nav-sns img {
    width: 26px;
    height: 26px;
    display: block;
}

/* ===== モバイル対応（960px以下） ===== */
@media (max-width: 960px) {
    body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }
    .layout {
        flex-direction: column;
        min-height: 100vh;
    }
    /* モバイルヘッダーを表示 */
    .mobile-header {
        display: flex;
    }
    /* 左カラムを非表示 */
    .left-column {
        display: none !important;
    }
    /* SNSバーを非表示 */
    .sns-bar {
        display: none !important;
    }
    /* 中央カラム（固定ヘッダー分の余白） */
    .center {
        width: 100%;
        min-width: auto;
        flex: 1;
        overflow-y: visible;
        padding-top: 56px;
    }
}

/* ===== 通常ページ（投稿・固定ページ） ===== */
.entry-title { font-size: 1.75rem; margin-bottom: 1rem; } /* ページタイトル */
.entry-content p { margin-bottom: 1rem; } /* 本文の段落 */
.entry-content h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; } /* 見出し2 */
.entry-content a { color: var(--color-primary); } /* リンク */

/* ===== カスタムセクション ===== */
.custom-section {
    padding: 24px; /* 内側の余白 */
}

/* カスタムセクションのタイトル */
.custom-section .section-title {
    font-size: 1.25rem; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    margin-bottom: 16px; /* 下の余白 */
}

/* カスタムセクションの本文 */
.custom-section .section-content {
    font-size: 1rem; /* 文字サイズ */
    line-height: 1.8; /* 行の高さ */
}

/* カスタムセクションの本文内の要素 */
.custom-section .section-content p {
    margin-bottom: 1rem; /* 段落の下余白 */
}

.custom-section .section-content img {
    max-width: 100%; /* 画像の最大幅 */
    height: auto; /* 高さ自動 */
    border-radius: 8px; /* 角丸 */
    margin: 16px 0; /* 上下の余白 */
}

/* カスタムセクションの画像エリア */
.custom-section .section-image {
    margin-top: 16px; /* 上の余白 */
}

.custom-section .section-image img {
    width: 100%; /* 幅100% */
    height: auto; /* 高さ自動 */
    border-radius: 8px; /* 角丸 */
}

/* 背景スタイル：メインカラー */
.custom-section.bg-primary {
    background: var(--color-primary); /* 背景色 */
    color: #fff; /* 文字色（白） */
}

.custom-section.bg-primary .section-title,
.custom-section.bg-primary .section-content,
.custom-section.bg-primary .section-content p,
.custom-section.bg-primary a {
    color: #fff; /* 文字色（白） */
}

/* 背景スタイル：薄いグレー */
.custom-section.bg-light {
    background: #f5f5f5; /* 背景色 */
}

/* セクションタグ */
.section-tags {
    display: flex; /* 横並び */
    flex-wrap: wrap; /* 折り返し */
    gap: 8px; /* 要素間の隙間 */
    margin-bottom: 12px; /* 下の余白 */
}

/* タグ個別 */
.section-tag {
    display: inline-block; /* インラインブロック */
    padding: 4px 10px; /* 内側の余白 */
    font-size: 0.85rem; /* 文字サイズ */
    font-weight: 600; /* 太さ */
    color: var(--color-primary); /* 文字色 */
    background: rgba(232, 92, 44, 0.1); /* 背景色（薄いメインカラー） */
    border-radius: 4px; /* 角丸 */
}

/* メインカラー背景時のタグ */
.custom-section.bg-primary .section-tag {
    color: #fff; /* 文字色（白） */
    background: rgba(255, 255, 255, 0.2); /* 背景色（半透明白） */
}

/* ===== 日本誠真会専用セクション ===== */

/* セクション背景色：赤・ピンク交互 */
/* 奇数セクション（赤）- 私たちについて、メンバー、活動スケジュール、ダウンロード */
.about-section .card,
.members-section .card,
.schedule-section .card,
.download-section .card {
    background: #E85C2C !important; /* 背景色（赤） */
    color: #fff !important; /* 文字色（白） */
}

.about-section .card *,
.members-section .card *,
.schedule-section .card *,
.download-section .card * {
    color: #fff !important; /* 文字色（白） */
}

/* 偶数セクション（薄い赤）- ニュース、顧問・アドバイザー、お問い合わせ */
.news-section .card,
.advisers-section .card,
.contact-section .card {
    background: #F5A89A !important; /* 背景色（薄い赤/サーモンピンク） */
    color: #1a1a1a !important; /* 文字色（黒） */
}

.news-section .card *,
.advisers-section .card *,
.contact-section .card * {
    color: #1a1a1a !important; /* 文字色（黒） */
}

/* 紹介バナーセクション */
.intro-section .card {
    background: #E85C2C !important; /* 背景色（赤） */
}

/* アコーディオン内の背景色調整 */
.about-section .accordion-inner,
.members-section .accordion-inner,
.schedule-section .accordion-inner,
.download-section .accordion-inner,
.news-section .accordion-inner,
.advisers-section .accordion-inner,
.contact-section .accordion-inner {
    background: transparent !important; /* 背景色（透明） */
    border-left: none !important; /* 左枠線なし */
}

/* 各セクション内のボタン調整（白背景・黒文字で統一） */
.about-section .accordion-toggle,
.members-section .accordion-toggle,
.schedule-section .accordion-toggle,
.download-section .accordion-toggle,
.news-section .accordion-toggle,
.advisers-section .accordion-toggle,
.contact-section .accordion-toggle {
    background: #fff !important; /* 背景色（白） */
    border-color: #1a1a1a !important; /* 枠線（黒） */
    color: #1a1a1a !important; /* 文字色（黒） */
}

.about-section .accordion-toggle:hover,
.members-section .accordion-toggle:hover,
.schedule-section .accordion-toggle:hover,
.download-section .accordion-toggle:hover,
.news-section .accordion-toggle:hover,
.advisers-section .accordion-toggle:hover,
.contact-section .accordion-toggle:hover {
    background: #f0f0f0 !important; /* 背景色（薄いグレー） */
}

/* 閉じるボタン調整（白背景・黒文字で統一） */
.about-section .accordion-close,
.members-section .accordion-close,
.schedule-section .accordion-close,
.download-section .accordion-close,
.news-section .accordion-close,
.advisers-section .accordion-close,
.contact-section .accordion-close {
    background: #fff !important; /* 背景色（白） */
    border: 2px solid #1a1a1a !important; /* 枠線（黒） */
    color: #1a1a1a !important; /* 文字色（黒） */
}

/* 外部リンクボタン調整 */
.about-section .external-link-btn,
.members-section .external-link-btn,
.schedule-section .external-link-btn,
.download-section .external-link-btn,
.news-section .external-link-btn,
.advisers-section .external-link-btn,
.contact-section .external-link-btn {
    background: #fff !important; /* 背景色（白） */
    color: #E85C2C !important; /* 文字色（赤） */
}

/* お問い合わせ情報の背景調整 */
.contact-section .contact-info {
    background: rgba(255,255,255,0.2) !important; /* 背景色（半透明白） */
}

/* 私たちについてセクション */
.about-section .card {
    padding: 24px; /* 内側の余白 */
}

.about-content {
    margin-bottom: 20px; /* 下の余白 */
}

.about-content p {
    margin-bottom: 12px; /* 段落の下余白 */
    line-height: 1.8; /* 行の高さ */
}

/* メンバーセクション */
.members-section .card,
.advisers-section .card {
    padding: 24px; /* 内側の余白 */
}

.member-item,
.adviser-item {
    padding: 16px 0; /* 内側の余白（上下） */
    border-bottom: 1px solid #eee; /* 下線 */
}

.member-item:last-of-type,
.adviser-item:last-of-type {
    border-bottom: none; /* 最後の項目は下線なし */
    margin-bottom: 16px; /* 下の余白 */
}

.member-role,
.adviser-role {
    font-size: 0.85rem; /* 文字サイズ */
    color: var(--color-primary); /* 文字色 */
    font-weight: 600; /* 太さ */
    margin-bottom: 4px; /* 下の余白 */
}

.member-name,
.adviser-name {
    font-size: 1.1rem; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    margin-bottom: 8px; /* 下の余白 */
}

.member-bio,
.adviser-bio {
    font-size: 0.95rem; /* 文字サイズ */
    color: var(--color-text-light); /* 文字色 */
    line-height: 1.7; /* 行の高さ */
    margin: 0; /* 余白なし */
}

/* ニュース・スケジュール・お問い合わせ・ダウンロードセクション */
.news-section .card,
.schedule-section .card,
.contact-section .card,
.download-section .card {
    padding: 24px; /* 内側の余白 */
}

.section-desc {
    font-size: 0.95rem; /* 文字サイズ */
    color: var(--color-text-light); /* 文字色 */
    margin-bottom: 16px; /* 下の余白 */
}

/* お問い合わせ情報 */
.contact-info {
    background: #f8f9fa; /* 背景色 */
    padding: 16px; /* 内側の余白 */
    border-radius: 8px; /* 角丸 */
    margin-bottom: 16px; /* 下の余白 */
}

.contact-info p {
    margin: 4px 0; /* 上下の余白 */
    font-size: 0.95rem; /* 文字サイズ */
}

.contact-note {
    font-size: 0.85rem !important; /* 文字サイズ */
    color: var(--color-text-light); /* 文字色 */
    margin-top: 12px !important; /* 上の余白 */
}

/* ===== アコーディオン（折りたたみ）機能 ===== */

/* アコーディオンボタンのラッパー（中央配置用） */
.accordion-btn-wrapper {
    display: flex; /* フレックス */
    justify-content: center; /* 中央揃え */
    margin-top: 16px; /* 上の余白 */
}

/* アコーディオンのトグルボタン */
.accordion-toggle {
    display: inline-flex; /* インラインフレックス */
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
    gap: 8px; /* 要素間の隙間 */
    padding: 12px 28px; /* 内側の余白 */
    background: #fff; /* 背景色（白） */
    border: 2px solid #1a1a1a; /* 枠線（黒） */
    border-radius: 999px; /* 角丸 */
    color: #1a1a1a; /* 文字色（黒） */
    font-size: 0.95rem; /* 文字サイズ */
    font-weight: 600; /* 太さ */
    cursor: pointer; /* カーソル */
    transition: all 0.3s ease; /* アニメーション */
    text-decoration: none; /* 下線なし */
    margin: 16px auto 0; /* 余白（中央配置） */
}

.accordion-toggle:hover {
    background: #f0f0f0; /* 背景色（薄いグレー） */
    color: #1a1a1a; /* 文字色（黒） */
}

.accordion-toggle.is-active {
    background: #f0f0f0; /* 背景色（薄いグレー） */
    color: #1a1a1a; /* 文字色（黒） */
}

/* アコーディオンの中身 */
.accordion-content {
    max-height: 0; /* 最大高さ（閉じた状態） */
    overflow: hidden; /* はみ出し非表示 */
    transition: max-height 0.4s ease; /* アニメーション */
    margin-top: 0; /* 上の余白 */
}

.accordion-content.is-open {
    margin-top: 20px; /* 上の余白（開いた状態） */
}

/* アコーディオン内のコンテンツ */
.accordion-inner {
    padding: 20px; /* 内側の余白 */
    background: transparent; /* 背景色（透明） */
    border-radius: 12px; /* 角丸 */
    border-left: none; /* 左枠線なし */
    text-align: center; /* 中央揃え */
}

.accordion-inner h4 {
    font-size: 1.1rem; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    margin-bottom: 12px; /* 下の余白 */
    color: var(--color-primary); /* 文字色 */
}

.accordion-inner p {
    font-size: 0.95rem; /* 文字サイズ */
    line-height: 1.8; /* 行の高さ */
    margin-bottom: 12px; /* 下の余白 */
}

.accordion-inner p:last-child {
    margin-bottom: 0; /* 最後の段落は下余白なし */
}

.accordion-inner ul {
    list-style: none; /* リストマーカーなし */
    padding: 0; /* 内側の余白 */
    margin: 0 0 16px 0; /* 外側の余白 */
}

.accordion-inner ul li {
    padding: 8px 0; /* 内側の余白（上下） */
    padding-left: 20px; /* 内側の余白（左） */
    position: relative; /* 相対位置 */
    font-size: 0.95rem; /* 文字サイズ */
    line-height: 1.6; /* 行の高さ */
}

.accordion-inner ul li::before {
    content: '●'; /* リストマーカー */
    position: absolute; /* 絶対位置 */
    left: 0; /* 左位置 */
    color: var(--color-primary); /* 文字色 */
    font-size: 0.6rem; /* 文字サイズ */
    top: 12px; /* 上位置 */
}

/* セクション内のサマリー（簡潔版） */
.section-summary {
    font-size: 1rem; /* 文字サイズ */
    line-height: 1.8; /* 行の高さ */
    margin-bottom: 8px; /* 下の余白 */
}

/* 外部リンクボタン */
.external-link-btn {
    display: inline-flex; /* インラインフレックス */
    align-items: center; /* 縦中央揃え */
    gap: 6px; /* 要素間の隙間 */
    padding: 10px 20px; /* 内側の余白 */
    background: var(--color-primary); /* 背景色 */
    color: #fff !important; /* 文字色（白） */
    border-radius: 999px; /* 角丸 */
    font-size: 0.9rem; /* 文字サイズ */
    font-weight: 600; /* 太さ */
    text-decoration: none; /* 下線なし */
    margin-top: 12px; /* 上の余白 */
    transition: background 0.3s ease; /* アニメーション */
}

.external-link-btn:hover {
    background: var(--color-primary-dark); /* 背景色（暗め） */
}

/* 閉じるボタン（アコーディオン最下部） */
.accordion-close {
    display: inline-flex; /* インラインフレックス */
    align-items: center; /* 縦中央揃え */
    justify-content: center; /* 横中央揃え */
    gap: 8px; /* 要素間の隙間 */
    width: auto; /* 幅（自動） */
    padding: 12px 28px; /* 内側の余白（もっと詳しくと同じ） */
    margin: 20px auto 0; /* 中央配置 */
    background: #fff; /* 背景色（白） */
    border: 2px solid #1a1a1a; /* 枠線（黒） */
    border-radius: 999px; /* 角丸（丸型、もっと詳しくと同じ） */
    color: #1a1a1a; /* 文字色（黒） */
    font-size: 0.95rem; /* 文字サイズ */
    font-weight: 600; /* 太さ */
    cursor: pointer; /* カーソル */
    transition: all 0.3s ease; /* アニメーション */
}

.accordion-close:hover {
    background: #f0f0f0; /* 背景色（薄いグレー） */
}

/* ===== メンバー・アドバイザー プロフィール（大きな画像版） ===== */

/* プロフィール全体 */
.member-profile,
.adviser-profile {
    margin-bottom: 32px; /* 下の余白 */
}

.member-profile:last-child,
.adviser-profile:last-child {
    margin-bottom: 0; /* 最後は下余白なし */
}

/* 大きな正方形写真（横幅フル） */
.member-photo-large,
.adviser-photo-large {
    width: 100%; /* 横幅フル */
    aspect-ratio: 1 / 1; /* 1:1 正方形 */
    overflow: hidden; /* はみ出し非表示 */
    background: #f0f0f0; /* 背景色（プレースホルダー） */
    border-radius: 8px; /* 角丸 */
    margin-bottom: 16px; /* 下の余白 */
}

.member-photo-large img,
.adviser-photo-large img {
    width: 100%; /* 幅 */
    height: 100%; /* 高さ */
    object-fit: cover; /* カバー */
    object-position: center top; /* 上部中央を基準 */
}

/* プロフィール情報ブロック */
.member-info-block,
.adviser-info-block {
    text-align: center; /* 中央揃え */
}

.member-info-block .member-role,
.adviser-info-block .adviser-role {
    display: block; /* ブロック要素 */
    padding: 0; /* 余白なし */
    background: transparent; /* 背景透明 */
    color: #fff; /* 文字色（白） */
    font-size: 1.1rem; /* 文字サイズ（大きく） */
    font-weight: 600; /* 太さ */
    border-radius: 0; /* 角丸なし */
    margin-bottom: 8px; /* 下の余白 */
}

.member-info-block .member-name,
.adviser-info-block .adviser-name {
    font-size: 1.3rem; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    margin-bottom: 12px; /* 下の余白 */
}

.member-info-block .member-bio,
.adviser-info-block .adviser-bio {
    font-size: 0.95rem; /* 文字サイズ */
    line-height: 1.8; /* 行の高さ */
    color: #555; /* 文字色 */
    text-align: left; /* 左揃え */
}

/* アドバイザーカテゴリ見出し */
.adviser-category {
    font-size: 1.1rem; /* 文字サイズ */
    font-weight: 700; /* 太さ */
    color: var(--color-primary); /* 文字色 */
    margin: 24px 0 16px; /* 余白 */
    padding-bottom: 8px; /* 下の内側余白 */
    border-bottom: 2px solid var(--color-primary); /* 下線 */
}

.adviser-category:first-of-type {
    margin-top: 0; /* 最初の見出しは上余白なし */
}

/* ===== お問い合わせ FAQ ボタン ===== */
.btn-faq {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    margin: 8px 0 16px;
}
.btn-faq:hover {
    background: var(--color-primary-dark);
}

.btn-faq-white {
    background: #fff;
    color: #E85C2C !important;
}
.btn-faq-white:hover {
    background: #f0f0f0;
}

.btn-faq-pink,
.schedule-section .card .btn-faq-pink {
    background: #F5A89A;
    color: #1a1a1a !important;
}
.btn-faq-pink:hover,
.schedule-section .card .btn-faq-pink:hover {
    background: #f09080;
    color: #1a1a1a !important;
}

/* ===== ダウンロード 注意書き ===== */
.download-notice {
    background: #fffde7 !important;
    border: 3px solid #f5a623 !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-size: 0.9rem;
    line-height: 2;
    color: #1a1a1a !important;
    text-align: left !important;
    margin: 16px 0;
}

/* ===== ダウンロード テーブル ===== */
.download-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.9rem;
}
.download-table th,
.download-table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}
.download-table th {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.download-table td:first-child {
    text-align: left;
}
.download-table a {
    color: var(--color-primary);
    font-weight: 600;
}