/* ========================
   基本設定・レイアウト
======================== */
body {
    margin: 0;
    padding: 0;
    /* 背景をモダンなダークグラデーションに */
    background: radial-gradient(circle at center, #2c3e50 0%, #000000 100%);
    background-attachment: fixed;
    color: #fff;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height: 1.6;
}

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

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

/* ========================
   ヘッダー・タイトル周り
======================== */
.main-header {
    padding: 40px 0;
    text-align: center;
}

.title-group {
    text-align: center;
    border-bottom: 2px solid #d4af37; /* ゴールドのライン */
    display: inline-block;
    padding-bottom: 10px;
}

.site-title-text {
    font-size: 3rem;
    letter-spacing: 0.2em;
    margin: 0;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.site-subtitle {
    font-size: 1rem;
    color: #d4af37;
    letter-spacing: 0.5em;
}

/* ========================
   スライドショー
======================== */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* ふわっと切り替わる時間 */
}

.slide.active {
    opacity: 1;
}

/* ========================
   ナビゲーションボタン
======================== */
.nav-links {
    display: flex;
    justify-content: flex-start; /* ボタンを左から順番に隙間なく並べる */
    flex-wrap: wrap;
    gap: 15px;
    margin: 40px auto; /* 箱全体を画面の中央に配置する */
    
    /* ★ここが解決の鍵：箱の最大幅を「1段目のボタン6個分」に物理的に制限する */
    max-width: 930px; 
}

.nav-item img {
    transition: transform 0.3s ease; /* アニメーションの準備 */
}

.nav-item img:hover {
    transform: scale(1.1); /* マウスが乗ったら少し拡大 */
}

/* ========================
   メッセージエリア
======================== */
.welcome-section {
    margin-bottom: 60px;
}

.message-box {
    background: rgba(0, 0, 0, 0.6); /* ボタンと同じ半透明の黒で重厚感を */
    padding: 30px 40px;
    border-radius: 4px; /* 丸みを少し抑えてシャープに */
    border: 1px solid rgba(212, 175, 55, 0.3); /* 全体を囲む薄いゴールドの線 */
    border-left: 5px solid #d4af37; /* 左側に太いゴールドのアクセントライン */
    color: #fff; /* タイトルやボタンと同じ白色に変更 */
    display: inline-block;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 奥行きを出すモダンな影 */
}

.update-info {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #d4af37; /* 日付部分をサブタイトルと同じゴールドに */
    letter-spacing: 0.1em;
}

/* ========================
   アニメーション用クラス
======================== */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* モダンなボタンのデザイン */
.nav-button {
    display: inline-block;
    padding: 12px 10px; /* ★左右の余白を20pxから10pxに縮小 */
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.1em;
    border: 2px solid #d4af37;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 130px; /* ★140pxから130pxに縮小 */
    text-align: center;
    box-sizing: border-box; /* ★線の太さや余白を含めて幅を計算させる設定 */
    white-space: nowrap; /* ★文字が2行に折れ曲がるのを防ぐ */
}

/* マウスを乗せた時の変化（ホバーエフェクト） */
.nav-button:hover {
    background: #d4af37; /* 背景をゴールドに */
    color: #000; /* 文字を黒に */
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); /* 光り輝くエフェクト */
    transform: translateY(-3px); /* 少し上に浮き上がる */
}

/* ========================
   下層ページ共通・セクション
======================== */
.page-section {
    margin-bottom: 80px;
}

.section-title {
    color: #d4af37;
    border-bottom: 1px solid #d4af37;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-size: 1.8rem;
    letter-spacing: 0.1em;
}

.about-hero-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border: 2px solid rgba(212, 175, 55, 0.5);
}

/* ========================
   カスタムドロップダウン（リンク集）
======================== */
.links-dropdown-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.custom-dropdown {
    display: inline-block;
    position: relative;
}

/* ボタンのデフォルトの三角マークを消す */
.custom-dropdown summary {
    cursor: pointer;
    list-style: none;
}
.custom-dropdown summary::-webkit-details-marker {
    display: none;
}

/* 開いたメニューの枠デザイン */
.dropdown-content {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    
    /* ボタンの真下に中央揃えで配置 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    z-index: 100; /* 他の要素より手前に表示 */
    
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* メニュー内の各リンクデザイン */
.dropdown-item {
    color: #fff;
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 4px;
    text-align: left;
    display: flex;
    justify-content: space-between; /* 文字は左、矢印は右に */
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.dropdown-item:hover {
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
}

/* スマートフォン向けの調整（画面幅が768px以下の時） */
@media screen and (max-width: 768px) {
    .site-title-text {
        font-size: 1.8rem; /* 文字サイズを少し小さくして一行に収める */
        letter-spacing: 0.1em; /* 字間を少し詰めたい場合はここを調整 */
        white-space: nowrap; /* 絶対に改行させないという強い意志の指示 */
    }

    .main-header {
        padding: 20px 0; /* ヘッダーの上下余白もスマホ用に少し詰めるとスッキリします */
    }

    .slideshow-container {
        height: 300px; /* 500pxから300pxに縮小（お好みで調整してください） */
    }

    /* 会長紹介ページでもスライドショーを使っている場合、そちらも自動で適用されます */
    .about-hero-slideshow {
        max-width: 100%; /* スマホでは横幅いっぱいに使う */
    }

    .nav-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 20px; 
        
        padding: 20px 0 20px 0;
        
        width: 100%;            /* 幅を画面いっぱいにする */
        justify-items: center;  /* 各エリア内でボタンを中央寄せ */
        justify-content: center; /* グリッド全体をコンテナの中央に配置 */
        margin: 0 auto;         /* 外側の余白を自動調整して中央寄せ */
    }

    .nav-button {
        min-width: 0;
        width: 85%;             /* 90%から85%へ少しだけ絞ると、より中央に集まって見えます */
        padding: 10px 2px; 
        font-size: 0.85rem;
        border-radius: 4px;
        box-sizing: border-box;
        text-align: center;      /* ボタン内の文字も中央寄せ */
    }

    .message-box {
        /* 上下パディングを 30px から 15px に、左右を 40px から 20px に縮小 */
        padding: 15px 20px; 
        
        /* フォントサイズも少し小さくして、全体の塊を凝縮させます */
        font-size: 0.9rem;
        
        /* PC版で設定した margin-bottom も少し詰めるとよりコンパクトになります */
        margin-bottom: 20px; 
    }

    .welcome-section {
        /* セクション全体の余白も 60px から 30px 程度に縮小 */
        margin-bottom: 30px; 
    }

    /* メインエリア（歴史などが入っている箱）の下の余白を消す */
    main.container {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* 各セクション（歴史の枠など）の下の余白を消す */
    .page-section {
        margin-bottom: 20px; /* PC版の広い余白をスマホ用に狭くする */
    }

    /* 一番最後のセクション（歴史エリア）の下の余白は完全にゼロにする */
    .page-section:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* ナビゲーション（ボタン全体を囲む箱）の上の余白を消す */
    .navigation {
        margin-top: 0;
        padding-top: 0;
    }

    /* 外部リンクボタンのサイズダウンと改行防止 */
    .official-link-btn {
        padding: 10px 20px !important; /* 上下・左右の余白をギュッと減らす */
        font-size: 0.9rem !important; /* 文字サイズを他のボタンに合わせる */
        white-space: nowrap !important; /* 「↗」が下に改行されるのを絶対に防ぐ */
    }

    /* ▼ 今回追加するコード（関連リンク集ボタンの潰れ防止） ▼ */
    .custom-dropdown summary.nav-button {
        width: auto !important;         /* 85%に縮んでしまう設定を解除 */
        min-width: 180px !important;    /* 他のボタンと近いサイズ感をキープ */
        padding: 10px 20px !important;  /* 左右の余白をしっかり取って「▼」を復活させる */
    }
}

/* ========================
   技の上達テーブル
======================== */
.skill-table-wrapper {
    background: rgba(0, 0, 0, 0.6);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    overflow-x: auto; /* スマホで表がはみ出た場合に横スクロールさせる */
}

.skill-table {
    width: 100%;
    border-collapse: collapse;
}

.skill-table td {
    padding: 10px;
    line-height: 1.4;
}

/* 元の青色文字を、ダークテーマに合う明るい水色（シアン）に変更 */
.accent-text {
    color: #00ffff;
    font-weight: bold;
}

.arrow-down {
    font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
    /* 「技の上達〜」の図解エリアを非表示にする */
    .skill-table-wrapper {
        display: none;
    }
}

/* ========================
   定例活動ブロック
======================== */
.activity-block {
    background: rgba(255, 255, 255, 0.05);
    border-left: 5px solid #d4af37;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 0 8px 8px 0;
}

.activity-name {
    margin-top: 0;
    color: #fff;
    font-size: 1.3rem;
}

.activity-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.activity-gallery img {
    height: 150px; /* 画像の高さを揃えて綺麗に並べる */
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #fff;
}

/* ========================
   歴史・沿革ボックス
======================== */
.history-box {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 30px;
}

.history-content {
    line-height: 1.8;
    font-size: 0.95rem;
    height: 600px;
    overflow-y: auto; /* 長い歴史をスクロールできるようにする */
    padding-right: 20px;
}

/* スクロールバーのデザイン（Webkit系ブラウザ用） */
.history-content::-webkit-scrollbar {
    width: 8px;
}
.history-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}
.history-content::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 4px;
}

/* ========================
   歴史・沿革エリア（新モダン構造）
======================== */
.history-item-modern {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 0;
}

/* 最後の線は消す */
.history-item-modern:last-child {
    border-bottom: none;
}

/* 左側の「年代」の幅を固定 */
.history-year {
    width: 240px; 
    flex-shrink: 0;
    color: #d4af37;
    font-weight: bold;
    font-size: 1.1rem;
}

/* 右側の「出来事」エリア */
.history-detail {
    flex-grow: 1;
    line-height: 1.8;
}

/* 出来事の中の余計な全角スペースを見えなくする念のための設定 */
.history-detail {
    text-indent: 0;
}

/* --- スマホ専用の表示切替 --- */
@media screen and (max-width: 768px) {
    .history-item-modern {
        flex-direction: column; /* PCの横並びを、スマホでは縦並びに変える！ */
        gap: 5px;
    }
    
    .history-year {
        width: 100%;
        border-bottom: 1px dashed rgba(212, 175, 55, 0.4); /* 年代の下に飾り線を引く */
        padding-bottom: 5px;
        margin-bottom: 10px;
    }
}

/* ========================
会長者紹介ページ専用
======================== */
.sub-section-title {
    color: #d4af37;
    font-size: 1.5rem;
    margin-bottom: 20px;
    border-left: 4px solid #d4af37;
    padding-left: 15px;
}

/* 戦績リスト */
.records-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

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

.records-list li {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 0;
    font-weight: bold;
}

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

.records-list .year {
    width: 120px;
    color: #d4af37;
}

.records-list .event {
    flex: 1;
}

.records-list .result {
    width: 150px;
    text-align: right;
    color: #00ffff; /* 講士館とはページと合わせたアクセントカラー */
}

/* メディア・ギャラリー */
.media-grid-top {
    margin-bottom: 20px;
}

.media-full {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.media-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 20px;
}

.media-grid img, .gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gallery-grid-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
}

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

.caption {
    font-size: 0.85rem;
    margin-top: 10px;
    color: #ccc;
}

/* 書籍 */
.book-box {
    display: inline-block;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}

.book-img {
    max-width: 300px;
    height: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.mt-4 { margin-top: 2rem; }
.text-right { text-align: right; }

/* ========================
   会長紹介ページ・スライドショー用調整
======================== */
.about-hero-slideshow {
    border-radius: 8px; /* 角を丸くする */
    background: rgba(0, 0, 0, 0.3); /* 画像の隙間（余白）を暗くして馴染ませる */
    max-width: 800px; /* 写真が大きくなりすぎないように幅を制限 */
    margin: 0 auto; /* 中央寄せ */
}

@media screen and (max-width: 768px) {
    /* 各セクションの見出し（会長紹介のタイトルなど）の調整 */
    .section-title {
        font-size: 1.2rem;    /* 文字をスマホの横幅に収まるサイズまで小さくする */
        white-space: nowrap;  /* 絶対に改行させない指示 */
        letter-spacing: -0.05em; /* 文字と文字の隙間をほんの少しだけ詰める */
        margin-bottom: 20px;  /* タイトル下の余白もスマホ用に少し縮める */
    }

    .records-list {
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style: none !important;
    }

    .records-list li {
        display: flex !important;
        flex-direction: column !important; /* 年、大会、結果を縦に綺麗に並べる */
        padding: 15px !important;
        margin-bottom: 15px !important;
        
        /* スマホで見やすいように、うっすらと枠で囲ってカード風にします */
        background: rgba(255, 255, 255, 0.05); 
        border: 1px solid rgba(212, 175, 55, 0.2); 
        border-radius: 8px; 
        text-align: left;
    }

    .records-list .year {
        display: block !important;
        color: #d4af37;
        font-weight: bold;
        font-size: 1.1rem;
        border-bottom: 1px dashed rgba(212, 175, 55, 0.4); /* 年代の下に点線を引く */
        padding-bottom: 5px;
        margin-bottom: 10px !important; /* 大会名との距離を確保 */
        margin-right: 0 !important;
        width: 100%;
    }

    .records-list .event {
        display: block !important;
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0 !important;
        padding: 0 !important;
    }

    .records-list .result {
        display: inline-block !important;
        align-self: flex-start; 
        background: rgba(212, 175, 55, 0.3); 
        padding: 5px 12px !important;
        border-radius: 4px;
        font-weight: bold;
        margin-top: 10px !important;
        margin-left: 0 !important; 
        
        /* ▼ ここからが「絶対改行させない」ための強力な追加設定です ▼ */
        white-space: nowrap !important;
        word-break: keep-all !important;     /* 日本語の強制改行を禁止する */
        overflow-wrap: normal !important;    /* 枠での折り返しを禁止する */
        width: fit-content !important;       /* 枠の幅を文字の長さにピッタリ合わせる */
        min-width: max-content !important;   /* 最小幅を「文字が一行に収まる長さ」に強制する */
        flex-shrink: 0 !important;           /* 親要素から押しつぶされて縮むのを防ぐ */
    }}

/* ========================
   道場紹介ページ専用
======================== */

/* 道場ブロック */
.dojo-block {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 40px;
}

.dojo-title {
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}

/* 住所・連絡先のグリッド */
.dojo-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.info-item {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 4px;
    border-left: 3px solid #d4af37;
    line-height: 1.6;
}

.info-item strong {
    color: #d4af37;
}

/* 画像ギャラリー（横並び） */
.flex-gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.flex-gallery img {
    height: 200px;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ------------------------
   モダンスケジュール表
------------------------ */
.schedule-wrapper {
    overflow-x: auto; /* スマホではみ出る場合はスクロール */
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.6);
    margin-bottom: 10px;
}

.modern-table th, .modern-table td {
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 12px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}

.modern-table th {
    background: rgba(212, 175, 55, 0.2);
    color: #d4af37;
    font-weight: bold;
    white-space: nowrap;
}

/* ------------------------
   スタッフ（指導員）カード
------------------------ */
.staff-grid {
    display: grid;
    /* PCでは2列、スマホでは1列に自動調整 */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.staff-card {
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #00ffff; /* 名前の色に合わせたアクセント */
    transition: transform 0.3s ease;
}

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

.staff-img {
    width: 120px;
    height: 120px; /* 画像を正方形に統一してスッキリ見せる */
    object-fit: cover;
    border-radius: 50%; /* 画像を丸く切り抜く（モダンデザインの定番） */
    border: 2px solid #d4af37;
    flex-shrink: 0;
}

.staff-info {
    flex: 1;
}

.staff-name {
    color: #00ffff; /* 元の青文字を視認性の高いシアンに変更 */
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    padding-bottom: 5px;
}

.staff-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ddd;
    margin: 0;
}

/* その他ユーティリティ */
.hover-scale { transition: transform 0.3s; }
.hover-scale:hover { transform: scale(1.05); }
.mb-5 { margin-bottom: 3rem; }

/* ========================
   総本部リンクボタン
======================== */
.official-link-btn {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(135deg, #d4af37 0%, #aa8529 100%); /* ゴールドのグラデーション */
    color: #000; /* 文字は黒で引き締める */
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 50px; /* 角を丸くして現代的に */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); /* ふんわりとした光彩 */
    transition: all 0.3s ease;
    letter-spacing: 0.1em;
}

/* マウスを乗せた時の光るアニメーション */
.official-link-btn:hover {
    transform: translateY(-3px); /* 少し上に浮く */
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.7); /* 光彩が強くなる */
    background: linear-gradient(135deg, #f5d76e 0%, #d4af37 100%); /* 少し明るいゴールドに */
    color: #000;
}

.mt-5 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1.5rem; }

@media screen and (max-width: 768px) {
    /* 1. コンテンツの強制表示（フェードインが止まるのを防ぐ） */
    .page-section {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        height: auto !important;
        display: block !important;
    }

    /* 2. ギャラリー画像のスタック（画像が右に突き抜けるのを防ぐ） */
    .flex-gallery {
        display: flex !important;
        flex-direction: column !important; /* 横並びを縦並びに強制 */
        gap: 15px;
        width: 100% !important;
    }
    .flex-gallery img {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* 3. 稽古時間表の再構築（テーブル破壊） */
    .modern-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }
    .modern-table tbody, .modern-table tr, .modern-table th, .modern-table td {
        display: block !important;
        width: 100% !important;
    }
    .modern-table tr {
        margin-bottom: 25px !important;
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px;
        overflow: hidden;
    }
    .modern-table th {
        background: rgba(212, 175, 55, 0.2) !important;
        color: #d4af37 !important;
        padding: 12px !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    }
    .modern-table td {
        padding: 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        line-height: 1.6;
    }

    /* 4. 指導陣紹介のカード調整 */
    .staff-grid {
        display: block !important;
        width: 100% !important;
    }
    .staff-card {
        display: flex !important; /* 強制的にFlexを当てる */
        flex-direction: column !important; /* 写真を上に、テキストを下に */
        align-items: center !important;
        padding: 20px !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }
    .staff-img {
        width: 180px !important;
        height: auto !important;
        margin: 0 0 20px 0 !important;
        border-radius: 50%; /* スマホでは丸くするとモダンに見えます */
    }
    .staff-info {
        width: 100% !important;
    }

    /* --- 追加：指導員・準指導員用の2列表示（スマホ専用） --- */
    .staff-grid-half {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 横に2等分して並べる */
        gap: 15px !important; /* カード同士の隙間 */
    }
    
    .staff-grid-half .staff-card {
        margin-bottom: 0 !important; /* gridのgapで隙間を作るためゼロに */
        padding: 15px 10px !important; /* 2列で狭くなるので内側の余白を少し減らす */
        justify-content: flex-start !important; /* テキストの長さが違っても上揃えにする */
    }

    .staff-grid-half .staff-img {
        width: 100px !important; /* 2列でも綺麗に収まるように写真を少し小さく */
        margin-bottom: 10px !important;
    }

    .staff-grid-half .staff-name {
        font-size: 1rem !important; /* 名前を少しだけ小さく */
        margin-bottom: 5px !important;
    }

    .staff-grid-half .staff-desc {
        font-size: 0.85rem !important; /* 説明文も圧迫感がないように小さく */
        line-height: 1.4 !important;
    }
}

/* ========================
   ニュース・お知らせページ専用
======================== */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-card {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #d4af37;
    border-radius: 4px;
    padding: 25px;
    display: flex;
    gap: 30px;
    transition: background 0.3s ease;
}

.news-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 日付のデザイン */
.news-date {
    font-family: monospace;
    font-size: 1.2rem;
    color: #d4af37;
    font-weight: bold;
    min-width: 120px;
    padding-top: 5px;
}

/* 記事コンテンツ */
.news-content {
    flex: 1;
}

.news-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: #fff;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 8px;
}

/* 優勝や祝などの強調タイトル */
.news-title.highlight {
    color: #f5d76e;
}

.accent-red {
    color: #ff4d4d; /* ダークテーマに映える明るめの赤 */
    font-weight: bold;
}

.news-text {
    line-height: 1.8;
    margin-bottom: 10px;
}

.news-meta {
    font-size: 0.9rem;
    color: #999;
    margin-top: 15px;
}

/* 大会結果のリストデザイン */
.result-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 15px 0;
}

.result-group h4 {
    margin: 0 0 10px 0;
    color: #00ffff;
}

.result-group ul, .win-list, .sub-win-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.8;
}

.win-list li {
    font-size: 1.1rem;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    padding: 5px 0;
}

.sub-win-list {
    margin-top: 15px;
    font-size: 0.95rem;
    color: #ddd;
}

/* 画像レイアウト */
.news-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 15px;
}

.news-flex-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.text-content {
    flex: 1;
}

.news-image-small {
    max-width: 250px;
    height: auto;
    border-radius: 4px;
}

.news-image img {
    max-width: 100%;
    max-height: 250px; /* PCでの最大の高さを制限 */
    width: auto;       /* 比率を維持するためautoに設定 */
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* スマホ対応：画面が狭い時は縦並びにする */
@media screen and (max-width: 768px) {
    .news-card {
        flex-direction: column;
        gap: 10px;
    }
    .news-date {
        font-size: 1rem;
    }
    .news-flex-content {
        flex-direction: column;
    }
    .news-image img {
        max-height: 180px; /* スマホでは高さをさらに抑えてコンパクトにする */
    }
}

/* ========================
   講士館時計（会長日記）ページ専用
======================== */
.diary-container {
    /* 長い文章は横幅が広すぎると目で追うのが疲れるため、850pxに制限します */
    max-width: 850px; 
    margin: 0 auto;
}

.diary-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.diary-card {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-top: 5px solid #d4af37; /* 上部に太いゴールドのラインでノート風に */
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.diary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.diary-title {
    color: #fff;
    font-size: 1.6rem;
    margin: 0;
    letter-spacing: 0.05em;
}

.diary-date {
    color: #d4af37;
    font-family: monospace;
    font-size: 1.1rem;
}

.diary-body p {
    line-height: 2; /* 読みやすいように行間を広めに確保 */
    font-size: 1.05rem;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
    text-align: justify; /* 文章の右端を綺麗に揃える */
}

.diary-body p:last-child {
    margin-bottom: 0;
}

/* スマホ対応（画面が狭い場合） */
@media screen and (max-width: 600px) {
    .diary-card {
        padding: 20px;
    }
    .diary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .diary-title {
        font-size: 1.3rem;
    }
}

/* ========================
   フッター・クレジット
======================== */
.main-footer {
    padding: 60px 0 30px;
    background-color: #000; /* 全体の黒い背景に合わせる */
    color: #666;           /* 文字は控えめなグレー */
    font-size: 0.75rem;     /* 小さめの文字サイズ */
    border-top: 1px solid #222; /* 薄い境界線 */
}

.footer-credit {
    margin-top: 8px;
    letter-spacing: 0.05em;
}

.footer-credit a {
    color: #888;
    text-decoration: none;
    border-bottom: 1px dotted #444; /* 控えめな下線 */
    transition: all 0.3s ease;
}

.footer-credit a:hover {
    color: #fff;              /* ホバー時に白く光る */
    border-bottom-color: #fff;
}

/* ========================
   スマホ表示用のフッター余白調整
======================== */
@media screen and (max-width: 768px) {
    .main-footer {
        padding: 15px 0 15px; /* 上の余白を60px→30px、下の余白を30px→15pxに縮小 */
    }
}