/* ==========================================
   全体の基本設定（ポップで親しみやすい文字と色）
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
    background-color: #f4f9ff;
    /* ほんのり青みがかった明るい白 */
    color: #333333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: #0066cc;
    /* きれいな青色 */
    transition: color 0.3s;
}

a:hover {
    color: #004499;
}

/* ==========================================
   ✨ ヘッダー全体のレイアウト（PC基準）
   ========================================== */
header {
    background-color: #ffffff;
    border-bottom: 3px solid #333333;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 10px 20px;
}

/* ロゴとメニューを左右両端に割り振る */
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* 左右に引き離す */
    align-items: center;
}

/* 🖼️ ロゴ画像のサイズ調整 */
.logo img {
    height: 50px;
    /* 💡ヘッダーに収まるように高さを固定（お好みで調整してね） */
    width: auto;
    display: block;
}

/* 🗺️ ナビゲーションメニュー（右側にギュッとまとめる） */
#navMenu {
    margin-left: auto;
    /* 右端に寄せる */
}

#navMenu ul {
    display: flex;
    gap: 20px;
    /* メニューごとの適度な隙間 */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 🎢 メニューの文字と面白いアニメーション */
#navMenu ul li a {
    text-decoration: none;
    color: #333333;
    font-weight: 900;
    font-size: 15px;
    position: relative;
    padding: 8px 4px;
    display: inline-block;
    transition: color 0.2s, transform 0.2s;
}

/* アニメーション1：マウスを乗せるとちょっと上に弾む（バウンド効果） */
#navMenu ul li a:hover {
    color: #ff5722;
    /* ブランドカラーに変化 */
    transform: translateY(-4px) scale(1.05);
    /* ちょっと上に浮いて大きくなる */
}

/* アニメーション2：中央からシュッと伸びるオシャレな下線 */
#navMenu ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    /* スタート位置を真ん中に */
    width: 0;
    /* 最初は長さゼロ */
    height: 3px;
    background-color: #ff5722;
    transition: width 0.3s ease, left 0.3s ease;
    /* 滑らかに変化 */
}

/* マウスが乗ったときに下線を100%に伸ばす */
#navMenu ul li a:hover::after {
    width: 100%;
    left: 0;
    /* 左端まで引き戻しながら伸ばすことで中央展開に見える */
}

/* モバイル用メニューボタン（初期状態は隠す） */
.menu-btn {
    display: none;
}

/* ==========================================
   メインコンテンツ（ホームの見た目）
   ========================================== */
/* メインビジュアル */
.hero {
    background: linear-gradient(135deg, #0088ff, #0044cc);
    /* 鮮やかな青のグラデーション */
    color: #ffffff;
    text-align: center;
    padding: 80px 20px;
    border-radius: 0 0 50px 50px;
    /* 下側に丸みをつける */
    margin-bottom: 4px;
}

.hero h2 {
    font-size: 32px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
    /* 文字に少し立体感を */
}

/* コンテンツ全体の幅 */
.container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ニュースセクション */
#news h2 {
    color: #0066cc;
    font-size: 28px;
    border-bottom: 3px solid #e0f0ff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.news-list article {
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.05);
    /* ほんのり青い影 */
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.news-list .date {
    color: #888888;
    font-size: 14px;
}

.news-list .category {
    background-color: #0066cc;
    color: #ffffff;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
}

.news-list a {
    color: #333333;
    font-weight: bold;
}

.news-list a:hover {
    color: #0066cc;
}

.news-grid {
    display: flex;
    flex-direction: column;
    /* 1列にする設定 */
    gap: 35px;
    /* ✨カードとカードの間の隙間（お好みの広さに調整してね！） */
}

/* ==========================================
   フッター
   ========================================== */
footer {
    background-color: #0044cc;
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    margin-top: 60px;
}

.footer-sns a {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
}

.footer-sns a:hover {
    background-color: #ffffff;
    color: #0044cc;
}

.copyright {
    font-size: 14px;
}

/* ==========================================
   レスポンシブ表示（スマホ用の設定）
   ========================================== */
@media (max-width: 768px) {

    /* スマホのときはナビゲーションをいったん隠す */
    #navMenu {
        display: none;
    }

    /* ハンバーガーボタンを表示 */
    .menu-btn {
        display: block;
        width: 30px;
        height: 25px;
        background: none;
        border: none;
        position: relative;
        cursor: pointer;
    }

    .menu-btn span {
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #0066cc;
        border-radius: 2px;
    }

    /* 三本線の位置合わせ */
    .menu-btn span:nth-child(1) {
        top: 0;
    }

    .menu-btn span:nth-child(2) {
        top: 11px;
    }

    .menu-btn span:nth-child(3) {
        top: 22px;
    }

    .hero h2 {
        font-size: 24px;
    }
}

/* ==========================================
   JavaScriptと連動するスマホメニューの動き
   ========================================== */
@media (max-width: 768px) {

    /* openがついたらメニューを表示する */
    #navMenu.open {
        display: block;
        position: absolute;
        top: 70px;
        /* ヘッダーのすぐ下に配置 */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        border-bottom: 4px solid #0066cc;
        padding: 20px 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    #navMenu.open ul {
        flex-direction: column;
        /* メニューを縦並びにする */
        align-items: center;
        gap: 15px;
    }

    /* ボタンが押されたら三本線を「×」の形にするアニメーション */
    .menu-btn.open span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }

    .menu-btn.open span:nth-child(2) {
        opacity: 0;
        /* 真ん中の線を消す */
    }

    .menu-btn.open span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }

    /* ボタンの線が滑らかに動くようにする */
    .menu-btn span {
        transition: all 0.3s;
    }
}

/* ==========================================
   microCMS用の画像と表のポップなデザイン
   ========================================== */
/* ニュース本文の文字調整 */
.news-content p {
    margin-bottom: 15px;
    color: #444444;
}

.news-content h4 {
    color: #0066cc;
    margin: 25px 0 10px;
    font-size: 18px;
}

/* 画像をポップに丸める */
.news-img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    border: 3px solid #0066cc;
    /* 青い枠線をつけてポップに */
    margin: 15px 0;
    box-shadow: 0 6px 0 #d0e8ff;
}

/* 表（テーブル）をポップにする */
.news-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #0066cc;
    border-radius: 12px;
    overflow: hidden;
    margin: 15px 0;
}

.news-table th,
.news-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0f0ff;
}

.news-table th {
    background-color: #e0f0ff;
    /* 薄い青色の背景 */
    color: #0066cc;
    font-weight: bold;
    text-align: left;
    width: 30%;
}

.news-table td {
    background-color: #ffffff;
    color: #333333;
}

/* 一番下のセルの線を消して綺麗にする */
.news-table tr:last-child th,
.news-table tr:last-child td {
    border-bottom: none;
}

/* ニュース一覧のリンクエリア全体 */
.news-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* メンバー名タグのデザイン */
.category-member {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 20px;
    color: #ffffff;
    background-color: #0066cc;
    /* クワルブルー */
    margin-bottom: 10px;
}

/* ニュースカードにマウスを乗せたら少し浮き上がらせる */
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 #e0f0ff;
    transition: all 0.2s ease;
}

/* 一覧ページのチラ見せ本文のスタイル */
.news-summary {
    margin-top: 10px;
    font-size: 14px;
    color: #666666;
    /* 少し薄いグレーでメリハリをつける */
    line-height: 1.6;
}

/* タイトルを少し太く強調 */
.news-card h3 {
    margin: 5px 0;
    font-size: 18px;
    color: #333333;
}

/* ==========================================
   ニュースカードを確実に四角で囲むデザイン
   ========================================== */
.news-list-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.news-card {
    background: #ffffff !important;
    /* 背景を白に */
    padding: 25px !important;
    border-radius: 16px !important;
    /* 角を丸く */
    border: 3px solid #0066cc !important;
    /* 太めの青い枠線でポップに */
    box-shadow: 0 6px 0 #e0f0ff !important;
    /* ポップな立体感の影 */
    transition: all 0.2s ease;
    display: block;
}

/* ニュース内の文字の位置調整 */
.news-header {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
}

/* 詳細ページ全体の囲み */
.news-detail-area {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 24px;
    border: 3px solid #0066cc;
    box-shadow: 0 8px 0 #e0f0ff;
    margin-top: 40px;
}

/* 詳細ページの大きなタイトル */
.detail-title {
    font-size: 26px;
    color: #333333;
    margin: 15px 0 30px 0;
    line-height: 1.4;
    border-bottom: 2px dashed #e0f0ff;
    /* 下に可愛い点線 */
    padding-bottom: 20px;
}

/* 一覧に戻るボタン */
.back-btn-wrap {
    text-align: center;
    margin: 40px 0;
}

.back-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #0066cc;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 5px 0 #004488;
    transition: all 0.2s;
}

.back-btn:hover {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #004488;
}

/* ==========================================
   詳細ページ内の画像と表の見た目修正
   ========================================== */

/* 1. 画像がデカすぎるのを防ぐ */
.news-content img {
    max-width: 100% !important;
    /* 横幅がハミ出さないように */
    height: auto !important;
    display: block;
    margin: 20px auto;
    /* 真ん中に寄せる */
    border-radius: 12px;
    border: 3px solid #0066cc;
    /* ポップな青枠 */
    box-shadow: 0 6px 0 #e0f0ff;
}

/* 2. 表（テーブル）の罫線が消えるのを防ぐ */
.news-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    /* 線の重なりを防ぐ */
    margin: 20px 0;
    border: 2px solid #0066cc !important;
    /* 外枠の線 */
}

.news-content th,
.news-content td {
    border: 1px solid #0066cc !important;
    /* マス目ごとの線 */
    padding: 12px 15px !important;
    text-align: left;
}

.news-content th {
    background-color: #e0f0ff !important;
    /* 見出しの背景を薄い青に */
    color: #0066cc !important;
    font-weight: bold;
}

.news-content td {
    background-color: #ffffff !important;
}

/* ==========================================
   イベントページ用のポップなデザイン
   ========================================== */
.event-list-page {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 20px;
}

.event-card {
    background: #ffffff;
    border-radius: 20px;
    border: 3px solid #0066cc;
    box-shadow: 0 8px 0 #e0f0ff;
    display: flex;
    /* 横並びにする */
    overflow: hidden;
}

/* 左側の画像エリア */
.event-img-box {
    width: 30%;
    min-width: 200px;
    background: #f0f0f0;
}

.event-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像を枠にぴったり収める */
}

/* 右側の情報エリア */
.event-info-box {
    width: 70%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-meta {
    display: flex;
    gap: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 10px;
}

.event-info-box h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
}

/* 詳細を見るボタン */
.event-more-btn {
    align-self: flex-start;
    /* 左寄せ */
    padding: 8px 20px;
    background-color: #ff9900;
    /* 目立つポップなオレンジ！ */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 4px 0 #cc7700;
    transition: all 0.2s;
}

.event-more-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #cc7700;
}

.event-grid {
    display: flex;
    flex-direction: column;
    /* 1列にする設定 */
    gap: 35px;
    /* ✨カードとカードの間の隙間（お好みの広さに調整してね！） */
}

/* スマホ用の画面幅になったら縦並びにする */
@media (max-width: 600px) {
    .event-card {
        flex-direction: column;
    }

    .event-img-box {
        width: 100%;
        height: 150px;
    }

    .event-info-box {
        width: 100%;
    }
}

/* イベント詳細の特別スタイル */
.event-detail-area {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 24px;
    border: 3px solid #ff9900;
    /* イベントはポップなオレンジ枠！ */
    box-shadow: 0 8px 0 #ffeecd;
    margin-top: 40px;
}

.event-title-color {
    border-bottom: 2px dashed #ff9900 !important;
}

/* 日時と場所を囲むグレーのボックス */
.event-detail-meta {
    background-color: #fcf8f2;
    border: 2px dashed #ff9900;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}

/* 告知画像のサイズ調整 */
.event-detail-thumb {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 30px auto;
    border-radius: 16px;
    border: 3px solid #ff9900;
    box-shadow: 0 6px 0 #ffeecd;
}

/* オレンジ版の戻るボタン */
.back-btn.orange {
    background-color: #ff9900;
    box-shadow: 0 5px 0 #cc7700;
}

.back-btn.orange:hover {
    box-shadow: 0 2px 0 #cc7700;
}

/* ==========================================
   動画・ライブページ用のポップなデザイン
   ========================================== */
.channel-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    flex-wrap: wrap;
    /* スマホで崩れないように折り返し */
}

/* チャンネル切り替えボタンの共通デザイン */
.tab-btn {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 50px;
    border: 3px solid #0066cc;
    /* 公式はブルー */
    background: #ffffff;
    color: #0066cc;
    cursor: pointer;
    box-shadow: 0 4px 0 #e0f0ff;
    transition: all 0.2s;
}

/* ボタンを押したときのへこむ動き */
.tab-btn.active {
    background: #0066cc;
    color: #ffffff;
    box-shadow: none;
    transform: translateY(4px);
}

/* えごくろボタン（パープル） */
.tab-btn.egokuro {
    border-color: #9900cc;
    color: #9900cc;
    box-shadow: 0 4px 0 #f5e6ff;
}

.tab-btn.egokuro.active {
    background: #9900cc;
    color: #ffffff;
}

/* こうちゃボタン（イエロー/オレンジ） */
.tab-btn.kocha {
    border-color: #ff9900;
    color: #cc7700;
    box-shadow: 0 4px 0 #fff2e0;
}

.tab-btn.kocha.active {
    background: #ff9900;
    color: #ffffff;
    border-color: #ff9900;
}

/* 動画カードが並ぶグリッド（画面幅に合わせて自動で3〜4列になります） */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
    margin-bottom: 50px;
}

/* 動画カード全体（リンク要素） */
.video-card {
    text-decoration: none;
    /* 下線を消す */
    background: #ffffff;
    border-radius: 16px;
    border: 3px solid #333333;
    box-shadow: 0 6px 0 #dddddd;
    overflow: hidden;
    transition: all 0.2s;
    display: block;
}

/* カードをホバーしたときにフワッと浮き上がる演出 */
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 #cccccc;
}

/* YouTubeのサムネイルを「16:9」に強制固定するプロの裏技 */
.video-thumb-wrap {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    /* 16:9の比率 */
    background: #000;
}

.video-thumb-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 各メンバー名、またはライブ中を表すポップなバッジ */
.video-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    border-radius: 8px;
    background: #0066cc;
    /* 公式 */
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.video-badge.egokuro {
    background: #9900cc;
}

.video-badge.kocha {
    background: #ff9900;
}

/* 🔴LIVEバッジだけは赤く点滅（アニメーション）させる */
.video-badge.live {
    background: #ff0000;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* カードの下側のタイトルを入れるボックス */
.video-detail-box {
    padding: 15px;
}

.video-detail-box h4 {
    font-size: 14px;
    color: #333333;
    line-height: 1.5;
    margin: 0;
    font-weight: bold;
    /* タイトルが長すぎるときに自動で2行にして、後ろを「…」にする魔法 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* ✨これを標準プロパティとして追加 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* データがない時や読み込み中のテキストスタイル */
.no-data,
.loading {
    grid-column: 1 / -1;
    /* グリッド全体に広げる */
    text-align: center;
    font-size: 16px;
    color: #666666;
    padding: 40px 0;
}

/* 動画・ライブの公開日用スタイル */
.video-date {
    font-size: 12px;
    color: #777777;
    margin-top: 8px;
    margin-bottom: 0;
    text-align: right;
    /* 右寄せにしてスッキリ */
    font-family: monospace;
    /* 数字が綺麗に揃うフォント */
}

/* ==========================================
   ページネーション（切り替えボタン）のデザイン
   ========================================== */
.pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0;
}

.page-btn {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
    border: 3px solid #333333;
    border-radius: 10px;
    box-shadow: 0 4px 0 #333333;
    cursor: pointer;
    transition: all 0.1s;
}

.page-btn:hover {
    background: #f5f5f5;
}

/* 今見ているページのボタンは凹んで色が変わる */
.page-btn.active {
    background: #0066cc;
    /* ニュース等と合わせるならメイン色に */
    color: #ffffff;
    box-shadow: none;
    transform: translateY(4px);
}

/* ==========================================
   全ページ共通：メインタイトルのオシャレ化
   ========================================== */
.page-title {
    text-align: center;
    /* ✨文字を中央寄せにする */
    font-size: 2.5rem;
    /* ✨サイズを大きく（スマホでも程よく大きく！） */
    font-weight: 900;
    /* ✨ガッツリ太くして存在感を出す */
    letter-spacing: 0.1em;
    /* ✨文字と文字の間隔を少し広げて海外風に */
    margin: 50px 0 30px 0;
    /* ✨上下に心地よい余白を作る（上は広め、下は程よく） */
    color: #333333;
    /* ✨パキッとしすぎない上品な黒 */
    position: relative;
    /* 下線（飾り）をつけるための準備 */

    /* 💡 もし英語のフォントをパキッとさせたいならこれを入れるとオシャレ！ */
    font-family: 'Arial Black', 'Impact', sans-serif;
}

/* 🎀 隠し味：タイトルの下に可愛い短い下線を引く */
.page-title::after {
    content: "";
    display: block;
    width: 50px;
    /* 線の長さ */
    height: 5px;
    /* 線の太さ */
    background: #333333;
    /* 線の色（グループのメインカラーに変えてもOK！） */
    margin: 15px auto 0 auto;
    /* 線も中央に配置 */
    border-radius: 10px;
    /* 線を丸っこくしてマイルドに */
}

/* ==========================================
   🗓️ スケジュールページ専用デザイン
   ========================================== */
.schedule-nav-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 30px 0;
}

.month-selector {
    display: flex;
    align-items: center;
    gap: 20px;
}

.current-month-display {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.today-btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background: #ff5722;
    border: 3px solid #333333;
    border-radius: 20px;
    box-shadow: 0 4px 0 #333333;
    cursor: pointer;
    transition: 0.1s;
}

.today-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* カレンダーのリスト構造 */
.schedule-list {
    background: #ffffff;
    border: 4px solid #333333;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 0 #333333;
    margin-bottom: 40px;
}

.schedule-row {
    display: flex;
    border-bottom: 2px solid #eeeeee;
    transition: background-color 0.5s;
}

.schedule-row:last-child {
    border-bottom: none;
}

/* 日付部分 */
.day-box {
    width: 80px;
    padding: 15px;
    background: #f9f9f9;
    border-right: 2px solid #eeeeee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.day-num {
    font-size: 24px;
    font-weight: 900;
    font-family: 'Impact', sans-serif;
}

.day-text {
    font-size: 12px;
    color: #666;
}

/* 土日のカラー指定 */
.schedule-row.is-sat .day-num {
    color: #0066cc;
}

.schedule-row.is-sun .day-num {
    color: #cc0000;
}

.schedule-row.is-today {
    background-color: #f0f7ff;
}

.today-badge {
    background: #ff5722;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    margin-top: 4px;
}

/* イベント部分 */
.events-box {
    flex: 1;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.no-event {
    color: #bbb;
    font-size: 14px;
    margin: 0;
}

/* アコーディオン部分 */
.event-item {
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.event-summary {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    background: #fafafa;
    user-select: none;
}

.event-summary:hover {
    background: #f0f0f0;
}

.event-title-text {
    flex: 1;
    color: #333;
}

/* メンバーバッジ（好みに応じて色を変えてね） */
.event-member {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    border: 2px solid #333;
    background: #fff;
}

.badge-egokuro {
    background: #ffcdd2;
}

.badge-kocha {
    background: #bbdefb;
}

/* 詳細の引き出しアニメーション */
.event-detail-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fffdf9;
}

.detail-inner {
    padding: 15px;
    border-top: 2px solid #333;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}

/* ==========================================
   リッチエディタ（詳細）の中の表に罫線を引く設定
   ========================================== */
.detail-inner table {
    width: 100%;
    border-collapse: collapse;
    /* 隣り合う線を1本にまとめる */
    margin: 15px 0;
    font-size: 14px;
}

/* 表のヘッダー（一番上の項目セル） */
.detail-inner th {
    background-color: #f5f5f5;
    color: #333333;
    font-weight: bold;
    padding: 10px;
    border: 2px solid #333333;
    /* ✨セルの周りの枠線 */
}

/* 表のデータセル（中身） */
.detail-inner td {
    padding: 10px;
    border: 2px solid #333333;
    /* ✨セルの周りの枠線 */
    background-color: #ffffff;
}

/* ==========================================
   📱 スマホ対応（はみ出し防止＆レスポンシブ）
   ========================================== */

/* 1. スケジュール枠全体のはみ出し防止 */
.schedule-list {
    width: 100%;
    box-sizing: border-box;
    /* 枠線や余白を含めて画面幅におさめる */
}

/* 2. 表（table）が入った時に横スクロールできるようにする */
.detail-inner {
    overflow-x: auto;
    /* 表が画面幅を超えたら、その部分だけ横スクロール可能に */
    word-break: break-word;
    /* 長い文章やURLで折り返す */
}

/* 3. スマホ画面（幅768px以下）での調整 */
@media screen and (max-width: 768px) {

    /* 日付部分を少しコンパクトにしてイベント側の幅を確保 */
    .day-box {
        width: 60px;
        padding: 10px 5px;
    }

    .day-num {
        font-size: 20px;
    }

    /* イベント部分の余白調整 */
    .events-box {
        padding: 8px 10px;
    }

    /* アコーディオンの見出し（タイトル・メンバー）の折り返し対応 */
    .event-summary {
        flex-wrap: wrap;
        /* 要素が多くなったら縦に折り返す */
        gap: 6px;
        padding: 8px;
    }

    .event-title-text {
        font-size: 13px;
        width: 100%;
        /* タイトルを100%にして改行させる */
    }

    .event-member {
        font-size: 10px;
        padding: 1px 6px;
    }

    /* 詳細内の表（table）のセル幅を自動調整 */
    .detail-inner table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        /* 表が崩れないように横スクロールさせる */
    }
}

/* ==========================================
   🏠 トップページ（HOME）専用デザイン
   ========================================== */
/* 🌅 メインビジュアル */
.main-visual {
    background: #222222;
    /* 💡ここにお好みの背景画像(url)を入れると一気に豪華になります */
    color: #ffffff;
    text-align: center;
    padding: 100px 20px;
    margin-bottom: 50px;
    border-bottom: 5px solid #333333;
}

.mv-inner h1 {
    font-family: 'Arial Black', 'Impact', sans-serif;
    font-size: 3.5rem;
    letter-spacing: 0.05em;
    margin: 0;
}

.mv-inner p {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    color: #cccccc;
    margin: 5px 0 0 0;
}

/* 📦 各セクションの余白調整 */
.top-section {
    margin-bottom: 60px;
}

.top-section-title {
    font-family: 'Arial Black', 'Impact', sans-serif;
    font-size: 22px;
    border-left: 6px solid #333333;
    padding-left: 12px;
    margin-bottom: 25px;
    color: #333333;
}

/* ➔ もっと見るボタンの折り返し */
.top-more-wrap {
    text-align: right;
    margin-top: 20px;
}

.top-more-btn {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    border-bottom: 2px solid #333333;
    padding-bottom: 3px;
    transition: 0.2s;
}

.top-more-btn:hover {
    color: #ff5722;
    /* ホバーした時にブランドカラーに光る */
    border-color: #ff5722;
    transform: translateX(5px);
}

/* 📅 今日のスケジュール専用ボックス */
.top-schedule-box {
    background: #ffffff;
    border: 3px solid #333333;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 6px 0 #333333;
}

.no-today-event {
    color: #999999;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
}

/* 📱 SNSリンクの並び */
.sns-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.sns-card {
    display: block;
    text-decoration: none;
    color: #333333;
    padding: 25px;
    border: 4px solid #333333;
    border-radius: 15px;
    box-shadow: 0 6px 0 #333333;
    transition: 0.1s;
    background: #ffffff;
}

.sns-card:active {
    transform: translateY(6px);
    box-shadow: none;
}

.sns-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}

.sns-card h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 900;
}

.sns-card p {
    margin: 0;
    font-size: 13px;
    color: #666666;
}

/* 各SNSのワンポイントカラー（ホバー時にお好みで） */
.x-card:hover {
    background: #f7f7f7;
}

.youtube-card:hover {
    background: #ffebee;
}

.tiktok-card:hover {
    background: #f4f4f4;
}

/* 🎨 各SNS独自のホバー背景色設定 */
.sns-card.twitcasting-card:hover {
    background: #e3f2fd;
}

/* キャスブルー */
.sns-card.instagram-card:hover {
    background: #fdf2f8;
}

/* インスタピンク */
.sns-card.discord-card:hover {
    background: #eef2ff;
}

/* ディスコードブルー */
.sns-card.line-card:hover {
    background: #e8f5e9;
}

/* LINEグリーン */
.sns-card.threads-card:hover {
    background: #f5f5f5;
}

/* モノトーン */
.sns-card.bluesky-card:hover {
    background: #e0f2fe;
}

/* スカイブルー */
/* ==========================================
   🧳 フッター専用デザイン（2段構成強化版）
   ========================================== */
footer {
    background-color: #f5f5f5;
    border-top: 3px solid #333333;
    padding: 40px 20px;
    margin-top: 80px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* 🗺️ 上段：サイトマップエリア */
.footer-sitemap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

/* フッターのロゴサイズ調整 */
.footer-logo img {
    height: 40px;
    width: auto;
    display: block;
    opacity: 0.8;
    /* ちょっと馴染むように少し薄く */
}

/* メインメニューの横並び */
.sitemap-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.sitemap-links li a {
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.sitemap-links li a:hover {
    color: #ff5722;
}

/* CONTACTボタンだけアクセント（オレンジ文字） */
.sitemap-links li a.sitemap-contact {
    color: #ff5722;
    border-bottom: 2px solid #ff5722;
    padding-bottom: 2px;
}

.sitemap-links li a.sitemap-contact:hover {
    opacity: 0.7;
}

/* 区切り線 */
.footer-divider {
    border: none;
    border-top: 1px solid #dddddd;
    margin: 25px 0;
}

/* 🔗 下段：ガイドライン関連 */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    flex-wrap: wrap;
}

.footer-links li a {
    color: #777777;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    transition: color 0.2s;
}

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

/* コピーライト */
.copyright {
    text-align: center;
    font-size: 11px;
    color: #999999;
    margin: 0;
    letter-spacing: 0.05em;
}

/* 📱 スマホ対応の微調整 */
@media (max-width: 768px) {
    .sitemap-links {
        gap: 15px 20px;
        /* スマホでは少し隙間を詰めて折り返しやすく */
    }
}

/* ==========================================
   📈 メインビジュアル内のYouTube統計カウンター
   ========================================== */
.mv-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 25px;
    animation: fadeInUp 1s ease 0.5s both;
    /* タイトルより少し遅れてフェードイン */
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 項目ラベル（SUBSCRIBERSなど） */
.stat-label {
    font-size: 11px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.15em;
    margin-bottom: 5px;
}

/* 動き出す数字本体 */
.stat-number {
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    font-family: 'Impact', 'Arial Black', sans-serif;
    /* 太く力強いフォント */
    letter-spacing: 0.05em;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* スマホ用の表示微調整 */
@media (max-width: 768px) {
    .mv-stats {
        gap: 20px;
    }

    .stat-number {
        font-size: 24px;
    }

    .stat-label {
        font-size: 10px;
    }
}

/* ==========================================
   🎬 メインビジュアル内 YouTube移動ボタン
   ========================================== */
.mv-btn-wrap {
    margin-top: 30px;
    animation: fadeInUp 1s ease 0.8s both;
    /* 数字の後にフワッと表示 */
}

.youtube-mv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #e50914;
    /* YouTubeレッド */
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.05em;
    padding: 12px 35px;
    border-radius: 50px;
    /* 丸みのあるボタン */
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}

/* マウスを乗せたときの動き */
.youtube-mv-btn:hover {
    background-color: #ff121c;
    /* 少し明るい赤に */
    transform: translateY(-2px);
    /* ぽこっと浮き出る */
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.6);
}

/* クリックした瞬間 */
.youtube-mv-btn:active {
    transform: translateY(0);
}

.youtube-mv-btn .btn-icon {
    font-size: 18px;
}

/* SNSグリッド内でウィジェットの見た目を整える */
.discord-widget-card {
    padding: 0 !important;
    /* カードの内側余白を消してピッタリフィットさせる */
    overflow: hidden;
    height: 100%;
    min-height: 400px;
}

.discord-widget-card iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 動画埋め込み（16:9） */
.video-player-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 20px 0 30px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.video-player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 各コンテンツボックス */
.detail-section {
    background: #fff;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 0 #333;
}

.detail-section h2 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #eee;
}

.text-content {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    white-space: pre-wrap;
    /* スプレッドシート内の改行をそのまま再現 */
}

/* AI枠・おすすめ枠のテーマカラー */
.ai-box {
    background: #f0f7ff;
    border-color: #0066cc;
    box-shadow: 0 4px 0 #0066cc;
}

.recommend-box {
    background: #fff0f5;
    border-color: #e6005c;
    box-shadow: 0 4px 0 #e6005c;
}

/* おすすめ動画の横並びコンテナ */
.recommend-video-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

/* 各おすすめ動画カード（画面幅に応じて2〜3列で横並び） */
.recommend-card {
    flex: 1 1 280px;
    /* 最小幅280pxで柔軟に伸縮 */
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #000;
}

/* 埋め込みプレイヤーのアスペクト比維持（16:9） */
.recommend-embed-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9比率 */
}

.recommend-embed-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 一覧に戻るボタンのコンテナ */
.back-button-container {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 40px 0 20px 0;
    padding: 0 16px;
    flex-wrap: wrap;
    /* スマホなどで狭い時は縦並びに自動調整 */
}

/* ボタン共通スタイル */
.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

/* ホバー時の効果 */
.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

/* 動画一覧ボタンの個別カラー */
.back-btn.video-back {
    background-color: #333333;
    /* ダークグレー（またはお好みのメインカラー） */
}

/* 配信一覧ボタンの個別カラー */
.back-btn.live-back {
    background-color: #e50914;
    /* ライブ配信感のある赤系 */
}