/* --- 1. 基本設定 & 共通変数 --- */
:root {
    --primary-yellow: #fff200;
    --primary-blue: #0000ff;
    --primary-red: #ff5252;
    --primary-orange: #ff8800;
    --bg-light-gray: #f4f4f4;
    --text-dark: #333;
    --accent-sky: #81d4fa;
    --accent-gray: #333;
    --line-green: #06C755;
}

* { box-sizing: border-box; }

/* 全体のはみ出し防止（overflow-x: clip; は sticky と相性が悪い場合があるため body で制御） */
html, body {
    margin: 0; padding: 0; width: 100%; overflow-x: hidden;
    scroll-behavior: smooth; scroll-padding-top: 100px;
    font-family: "Zen Maru Gothic", sans-serif;
    color: var(--text-dark); font-weight: 700;
    -webkit-font-smoothing: antialiased;
}

main { width: 100%; overflow-x: hidden; }

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


/* スマホメニュー展開時のみoverflowを制御する場合（JSと連動） */
body.menu-open {
    overflow: hidden;
}

/* 修正が必要な要素のラップ */
main, section, .navbar {
    max-width: 100%;
    overflow-x: hidden;
}


/* スマホメニューの突き出し防止 */
@media (max-width: 768px) {
    .nav-links {
        visibility: hidden;
    }
    .nav-links.active {
        visibility: visible;
    }
}


/* --- 2. 共通パーツ：枠・カード・タイトル --- */

.section { padding: 40px 0; width: 100%; position: relative; overflow: visible; }

.section-title_main {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 900;
    color: #0000ff;
    margin: 0;
    padding: 20px;
}


@media (max-width: 768px) {
.section-title_main {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: #0000ff;
    margin: 0;
    padding: 20px;
}

}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 900;
    color:#000;
    margin: 0 0 20px 0;
    padding: 20px;
}


.outline-box, .timeline-main-box, .entry-main-box, .terms-box, .card-yellow {
    background-color: #ffffff; border: 1px dashed var(--accent-gray);
    border-radius: 30px; padding: 40px 30px; margin-top: 0;
}

/* スマホ対応（共通枠） */
@media (max-width: 768px) {
    .outline-box, .timeline-main-box, .entry-main-box { padding: 40px 15px; border-width: 2px; }
    .section-title {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-weight: 900;
    color:#0000ff;
    margin: 0;
    padding: 20px;
}

}

/* --- 3. ヘッダー & ナビゲーション --- */
.main-header {
    position: fixed; top: 20px; left: 0; right: 0; z-index: 2000;
    padding: 0 20px; pointer-events: none;
}

.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 30px; background: rgba(255, 255, 255, 0.95);
    border: 3px solid #000000; border-radius: 50px; max-width: 1100px;
    margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    pointer-events: auto; overflow: visible;
}

.nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin-left: 20px; }
.nav-links a.nav-item {
    text-decoration: none; color: var(--text-dark); font-weight: bold;
    display: inline-block; overflow: hidden; line-height: 1.2;
}

.nav-links a.nav-item span {
    display: block; position: relative; transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); padding: 2px 0;
}

.nav-links a.nav-item span::after {
    content: attr(data-text); position: absolute; top: 100%; left: 0; width: 100%;
    color: var(--primary-blue); display: block;
}

.nav-links a.nav-item:hover span { transform: translateY(-100%); }

.logo-text { text-decoration: none; font-size: 1.1rem; font-weight: 900; color: var(--primary-blue); white-space: nowrap; }
.logo-text:hover { opacity: 0.8; }

.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; cursor: pointer; z-index: 1100; }
.hamburger span { display: block; height: 3px; width: 100%; background: var(--primary-blue); transition: 0.3s; }

@media (max-width: 768px) {
    .main-header { top: 10px; padding: 0 10px; }
    .navbar { padding: 8px 20px; border-width: 2px; }
    .logo-text { font-size: 0.9rem; }
    .hamburger { display: flex; }
    .nav-links {
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
        background: rgba(255, 255, 255, 0.98); flex-direction: column;
        align-items: center; justify-content: center; transition: 0.4s; z-index: 1050; visibility: hidden;
    }
    .nav-links.active { right: 0; visibility: visible; }
    .nav-links li { margin: 15px 0; }
}

/* --- 4. ヒーローセクション --- */
.hero {
    background-color: var(--primary-yellow) !important;
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; padding: 100px 20px 60px; width: 100%;
}

.hero::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--primary-yellow); clip-path: ellipse(150% 100% at 50% 0%); z-index: 0;
}

.hero-content { position: relative; z-index: 10; width: 100%; max-width: 900px; margin: 0 auto; text-align: center; }
.main-visual { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 10px 25px rgba(0,0,0,0.1)); }


/* --- イベント概要 --- */






/* 2. フロー自体の幅を最大化 */
#entry {
    width: 100%;
    max-width: 100%; /* 内側の余白を使い切る */
    margin: 0 auto;
}

/* --- 黄色の補足ボックス (entry-requirements) の幅も合わせる --- */
#entry .entry-requirements {
    width: 100%;
    box-sizing: border-box; /* paddingを含めた幅計算にする */
}

.btn-primary {
    background: var(--primary-blue);
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
}

.pc-only { display: block; }
.mobile-only { display: none; }


/* 特定の要素に薄い赤背景を適用するクラス */
.bg-pink {
    background-color: #fff5f5 !important; /* 非常に薄い赤 */
    border-radius: 10px;               /* 角を丸くすると柔らかい印象になります */
    padding: 20px;                    /* 背景色を入れる場合は余白が必要です */
    border: 1px solid #ffcccc;        /* 境界線を入れるとより目立ちます */
}

/* 特定の要素に薄いグレイを適用するクラス */
.bg-gray {
    margin-top: 20px;
    background-color: #fff!important; 
    border-radius: 10px;               /* 角を丸くすると柔らかい印象になります */
    padding: 10px 20px;                    /* 背景色を入れる場合は余白が必要です */
    border: 1px solid #ddd;        /* 境界線を入れるとより目立ちます */
font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}


.hero {
    position: relative; /* 子要素の基準点 */
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 動画がはみ出さないようにする */
}

/* 背景動画のスタイル */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面いっぱいに比率を保って拡大 */
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* コンテンツ（ロゴ）のスタイル */
.hero-content {
    position: relative; /* 動画より前面に表示 */
    z-index: 1;
    width: 100%;
    max-width: 900px;
    text-align: center;
}

/* 動画が明るすぎて文字やロゴが見にくい場合（オーバーレイ） */
.hero::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
}



/* メイン画像の最適化 */
.hero h1 {
    margin: 0;
    line-height: 0;
}



/* スマホ表示での調整 */
@media (max-width: 768px) {
.hero {
    background-color: var(--primary-yellow) !important;
    min-height: 30vh; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; padding: 100px 20px 60px; width: 100%;
}

    .hero-content {
        max-width: 100%;    /* スマホでは横幅いっぱいまで許容 */
    }
}

/* --- aboutセクションの装飾 --- */
.message-wrapper {
    max-width: 800px;        /* 横幅を制限して読みやすくする */
    margin: 0 auto;          /* ブロック自体を中央に配置 */
    padding: 0px;
    line-height: 2;          /* 行間を広げて読みやすく */
}

.message-wrapper p {
    margin-bottom: 2em;
    font-size: 1.2rem;
    /* ここにも念のため指定 */
    text-align: center !important;
}


.message-wrapper img {
    width: 100%;
}

/* スマホでの微調整 */
@media (max-width: 768px) {
    .message-wrapper p {
        font-size: 0.8rem;
    }
}

/*======================================*/

.carousel-track {
    display: flex; width: max-content; height: 100%;
    animation: carousel-loop 80s linear infinite;
}

.carousel-img { height: 100%; width: auto; object-fit: contain; margin: 0 20px; padding: 10px 0; }

@keyframes carousel-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% * 5 / 7)); }
}




@media (max-width: 768px) {
    .hero-carousel { height: 50%; }
}

/* --- 5. 歌OH！鹿児島カラオケ応援GPとは？ (#about) --- */
#about.section { background-color: #ffffff; }

@media (max-width: 768px) {
    #about.section { 
            background-color: #ffffff;
    margin-top: 0;
    padding-top: 0;
    }
}


/* --- 6. お知らせ (#news) --- */
#news { background-color: #ffffff !important; }

.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { padding: 15px 0; border-bottom: 1px dashed #ddd; display: flex; gap: 20px; }
.news-list span { color: #666; font-size: 0.9rem; min-width: 100px; }

/* --- 7. 開催概要 (#outline) --- */
#outline { background-color: #ffffff !important; }


/* --- 会場MCセクション スタイル --- */


/* --- 特別協賛バナーの設定 --- */

/* 下部など、通常のバナーサイズ（既存の設定がある場合は調整してください） */
.sponsor-logos .tier-1 .logo-img {
    max-width: 640px; /* 通常のサイズ */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sponsor-logos .tier-2 .logo-img {
    max-width: 360px; /* 通常のサイズ */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}



/* ページ上部 (top-sponsor) の中にある時だけ小さくする */
.top-sponsor {
    padding: 20px 0; /* 上下の余白 */
    text-align: center;
}

.top-sponsor .sponsor-logos.tier-1 .logo-img {
    max-width: 250px; /* 一回り小さいサイズに指定 */
}

/* スマホ表示での調整 */
@media (max-width: 768px) {
    .top-sponsor .sponsor-logos.tier-1 .logo-img {
        max-width: 180px; /* スマホではさらに一回り小さく */
    }
}




.mc-section {
    margin-top: 40px;
    padding: 40px 0 60px;
    border-bottom: 1px dashed #eee; /* テーブルとの区切り線 */
}

.mc-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-blue);
    margin-bottom: 25px;
}






.mc-photo img {
    width: 100%;
    max-width: 180px; /* 写真のサイズ調整 */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%; /* 丸文字に合わせて写真も丸く */
}

.mc-name {
    font-size: 1.1rem;
    font-weight: 900;
    margin: 0;
    color: var(--text-dark);
}

/* スマホ対応：1人ずつ縦に表示 */
@media (max-width: 768px) {

    
    .mc-photo img {
        max-width: 150px; /* スマホでは少しコンパクトに */
    }
}

/* --- 5. 概要・About --- */
#about .card-yellow { background: #fffde7; border-color: var(--primary-yellow); width: 100%; }
#about h3 { text-align: center; font-size: 1.6rem; font-weight: 900; color: var(--primary-blue); margin-bottom: 50px; width: 100%; }
#about .card-yellow p { font-size: 1.2rem; line-height: 1.9; font-weight: 700; text-align: justify; margin: 0; }

.outline-table { width: 100%; border-collapse: collapse; }
.outline-table th, .outline-table td { padding: 20px; border-bottom: 1px dashed #ddd; text-align: left; }
.outline-table th { background: #f9f9f9; width: 30%; }

/* 会場MC */
.mc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 800px; margin: 0 auto; }
.mc-item { text-align: center; }
.mc-photo img { width: 100%; max-width: 180px; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; }
@media (max-width: 768px) { .mc-grid { grid-template-columns: 1fr; } }


/*-----------------------------------------------------------------------------*/
/* --- 審査基準 & 賞のご案内 アップデート --- */
/* --- 6. 審査員 (#judges) --- */
#judges { background-color: #ff4747 !important; padding: 0; position: relative; z-index: 1; }
/* テーブル全体のレイアウトを固定して幅を制御しやすくする */
.judging-table {
    table-layout: fixed;
    width: 100%;
}

/* 各列の幅を指定 */
.judging-table th:nth-child(1) {
    width: 25%; /* 審査項目 */
}

.judging-table td:nth-child(2),
.judging-table th:nth-child(2) {
    width: 55%; /* 採点内容（ここを一番広く） */
}

.judging-table td:nth-child(3),
.judging-table th:nth-child(3) {
    width: 20%; /* 配点（ここを狭く） */
}

/* 「配点」の列（ヘッダーと中身）を中央寄せにする */
.judging-table th:nth-child(3),
.judging-table td.score {
    text-align: center;
}

/* スマホ表示での調整（横幅が狭いので比率を微調整） */
@media (max-width: 768px) {
    .judging-table th:nth-child(1) { width: 30%; }
    .judging-table td:nth-child(2) { width: 45%; }
    .judging-table td:nth-child(3) { width: 25%; }
    
    .judging-table th, .judging-table td {
        padding: 10px 5px; /* 余白を削って文字を収める */
        font-size: 0.85rem;
    }
}





#judging-criteria + .wave-deco,
.wave-deco + #judging-criteria {
    margin-top: -2px;         /* わずかに重ねることで1pxの白い線を消す */
}

/* 内部のコンテナ設定 */
#judging-criteria .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.judging-lead {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: var(--primary-blue);
    font-weight: 900;
}



.score-sub {
    font-size: 0.8rem;
    color: #666;
    font-weight: normal;
}

/* 賞品一覧の特別な装飾 */
.highlight-gold {
    background-color: #ffffd0;
}

.highlight-gold th {
    color: #d4af37; /* ゴールド系 */
    font-size: 1.2rem;
}

.table-note {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
}

/* モバイル対応：テーブルを崩さない工夫 */
@media (max-width: 768px) {
    .outline-table th, .outline-table td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }
    .judging-table .score {
        font-size: 1.1rem;
    }
}




/* --- 8. 審査員 (#judges) --- */


.judge-main {
    width: 100%;             /* 横幅いっぱい */
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 2px dashed #eee;
}

.judge-main .main-item {
    max-width: 1000px;       /* outline-box内の最大幅に合わせる */
    margin: 0 auto;          /* 全体を中央寄せ */
    text-align: center;      /* 内部のインライン要素（写真、名前）を中央寄せ */
}

/* 中央寄せ用のブロックコンテナ */
.judge-main .judge-block-center {
    display: block;          /* Flexを解除してブロックに */
    text-align: center;
}
.judge-main .judge-photo {
    display: inline-block;    /* 写真をインラインブロックにして中央寄せを効かせる */
    width: 350px;            /* 写真のサイズを大きく固定 */
    margin-bottom: 30px;      /* プロフィール文との間隔 */
}

.judge-main .judge-photo img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.judge-main .judge-profile {
    max-width: 800px;        /* プロフィール文の横幅を少し絞って読みやすく */
    margin: 0 auto;          /* 文の塊を中央に */
    font-size: 1.1rem;       /* 文字を少し大きく */
    line-height: 1.8;
    text-align: left;        /* 文自体は左寄せが読みやすいが、中央寄せにするなら center */
}

/* スマホ対応（変更なし） */
@media (max-width: 768px) {
    .judge-main .judge-photo {
        width: 80%;
    }


.judge-main .judge-profile {
    margin: 0 auto;          /* 文の塊を中央に */
    font-size: 0.9rem;       /* 文字を少し大きく */
    line-height: 1.8;
    text-align: left;        /* 文自体は左寄せが読みやすいが、中央寄せにするなら center */
}

}

/* --- 審査員セクションのレイアウト強制修正 --- */

/* 2カラム横並びの土台 */
.judge-sub-grid {
    display: grid !important; /* グリッドを強制適用 */
    grid-template-columns: 1fr 1fr; /* 均等に2分割 */
    gap: 40px; /* 左右の間隔 */
    width: 100%;
    margin-top: 40px;
    text-align: center; /* 中身（写真や名前）は中央寄せ */
}

/* 各審査員のカード */
.judge-sub-grid .judge-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 内部パーツを中央に揃える */
}

/* サブ審査員の名前タグ（幅を固定しすぎない） */
.judge-sub-grid .judge-name {
    width: auto;
    min-width: 200px;
    padding: 10px 20px;
}



/* サブ審査員の写真（丸形） */
.judge-sub-grid .judge-photo img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #eee;
    margin-bottom: 20px;
}

/* サブ審査員の紹介文 */
.judge-sub-grid .judge-profile {
    text-align: left; /* 文章は左寄せで見やすく */
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

/* スマホでは1列にする */
@media (max-width: 768px) {
    .judge-sub-grid {
        grid-template-columns: 1fr; /* 1列に強制 */
        gap: 50px;
    }
}


/* --- 9. 大会の流れ (#timeline) --- */



/* タイムラインの縦線：白くならないよう濃い青に */
#timeline .timeline::before {
    background: #0033aa !important;
    opacity: 1;
}



.timeline { position: relative; padding: 40px 0; }
.timeline::before {
    content: ''; position: absolute; top: 0; bottom: 160px; left: 50%;
    width: 4px; background: var(--primary-blue); transform: translateX(-50%);
}

.timeline-item { position: relative; width: 100%; margin-bottom: 40px; display: flex; align-items: center; }
.timeline-item::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px; background: var(--primary-blue); border: 4px solid #fff; border-radius: 50%; z-index: 2;
}
.timeline-item.highlight::after { background: var(--primary-red); }
.timeline-item.left { justify-content: flex-start; padding-right: 52%; }
.timeline-item.right { justify-content: flex-end; padding-left: 52%; }
.timeline-item.center { justify-content: center; }
.timeline-item.center::after { display: none; }

.timeline-card {
    background-color: #ffffff; border: 3px solid var(--primary-blue); border-radius: 12px;
    padding: 0; width: 100%; text-align: center; position: relative; z-index: 1;
    overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.timeline-card h3 { background-color: var(--primary-blue) ; color: #ffffff; margin: 0; padding: 10px 15px; font-size: 1.1rem; font-weight: 900; }
.timeline-card p { padding: 15px; margin: 0; font-size: 1rem; color: var(--text-dark); }

/* 特殊カード色 */
.timeline-item.highlight .timeline-card.red-bg { border-color: var(--primary-red); }
.timeline-item.highlight .timeline-card.red-bg h3 { background-color: var(--primary-red); }

.timeline-item.center.highlight .timeline-card.red-gradient {
    background-color: #ffffff;           /* 全体は白背景 */
    border: 3px solid var(--primary-red); /* 囲みは赤色 */
    background-image: none;              /* グラデーションを解除 */
    width: 80%;                          /* センターカードの幅調整 */
    margin: 0 auto;
}


.timeline-item.center.highlight .timeline-card.red-gradient h3 {
    background-color: var(--primary-red);
    color: #ffffff;                      /* 文字を白に */
    margin: 0;
    padding: 15px;
    font-size: 1.3rem;                   /* 本選なので少し大きく */
    font-weight: 900;
    border-bottom: none;                 /* 境界線をリセット */
}


.timeline-item.center.highlight .timeline-card.red-gradient p {
    background-color: #ffffff;           /* 指定の白背景 */
    color: var(--text-dark);             /* 文字は暗い色 */
    padding: 20px;
    margin: 0;
    font-weight: 900;
    font-size: 1.2rem;
}

/* スマホ対応の幅調整 */
@media (max-width: 768px) {
    .timeline-item.center.highlight .timeline-card.red-gradient {
        width: 100%;
    }
}


@media (max-width: 768px) {
    .timeline::before { left: 20px; bottom: 80px; }
    .timeline-item::after { left: 20px; }
    .timeline-item.left, .timeline-item.right, .timeline-item.center { justify-content: flex-start; padding-left: 50px; padding-right: 0; }
}

/* --- 10. 応募規約 (#terms) --- */
#terms { background-color: #fffad0 !important; }

/* --- 11. 応募方法 (#entry) --- */

/* 1. フローを包むメインボックスの制限を緩和 */
#entry .entry-main-box {
    max-width: 800px; /* 元が 800px 等の場合はここを大きくする */
    margin: 0 auto;
    width: 100%;
}

.flow-step { 
    width: 80%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 30px;
}
@media (max-width: 768px) {
.flow-step { 
    width: 90%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 30px;
}
}

.step-image { 
    width: 100%; 
    text-align: center; 
}

.step-image img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 10px; 
    border: 1px solid #ddd;
}

.qr-code img { 
    max-width: 130px; 
}
.arrow { 
    font-size: 32px; 
    color: var(--line-green); 
    margin: 15px 0; 
    font-weight: bold; 
    text-align: center; 
}

@media (max-width: 768px) {
    .step-image img { max-width: 100%; }
    .step-header.step-green p { font-size: 1.1rem; }
}




/* ロゴ画像のサイズ調整 */
.navbar .logo img {
    height: 40px; /* ヘッダーの高さに合わせて調整 */
    width: auto;
    object-fit: contain;
}



/* スマホ対応：ハンバーガーメニューの位置調整 */
@media (max-width: 768px) {
    header {
        top: 10px;
        padding: 0 10px;
    }
    .navbar {
        padding: 8px 20px;
        border-width: 2px; /* スマホではボーダーを少し細く */
    }
    .navbar .logo img {
        height: 30px;
    }
}

/* --- ファイナリスト発表 (#finalists) --- */

#finalists { background-color: #ffffff !important; }

.finalist-grid {
    display: grid;
    /* PCでは4人横並び */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 15px;
    width: 100%;
}

.finalist-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* 写真部分のラッパー（ナンバーを重ねる基準） */
.finalist-photo-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

/* 丸囲みのエントリーナンバー */
.entry-number {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 40px;
    height: 40px;
    background-color: var(--primary-red);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    z-index: 10;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.finalist-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形に統一 */
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #eee;
}

/* 名前と年齢 */
.finalist-name {
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0 0 8px;
    color: var(--text-dark);
}

.finalist-age {
    font-size: 0.9rem;
    font-weight: normal;
    color: #666;
}

/* 意気込み */
.finalist-message {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-dark);
    text-align: left; /* 長文なので左寄せが読みやすい */
    margin: 0;
    /* 140文字程度なら少し表示を制限しても綺麗です */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* スマホ対応：2人横並び */
@media (max-width: 768px) {
    .finalist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
    }
    
    .entry-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .finalist-name {
        font-size: 0.95rem;
    }

    .finalist-message {
        font-size: 0.75rem;
    }
}



/* --- 12. 賞のご案内 & 受賞者の発表 (#awards) --- */


/* --- 賞のご案内 レイアウト修正 --- */

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

/* 1段目：グランプリ専用スタイル */
.main-award-row {
    flex-direction: column; /* 縦並びにして中央寄せ */
    align-items: center;
    text-align: center;
    padding-bottom: 40px;
    border-bottom: 3px dashed #eee;
    margin-bottom: 20px;
}

.main-award-row .award-left {
    flex: none;
    width: 100%;
    margin-bottom: 20px;
}

.main-award-row .award-icon img {
    max-width: 120px; /* アイコンを一回り大きく */
}

.main-award-row .award-tag {
    font-size: 1.4rem; /* タグを大きく */
    padding: 10px 40px;
    width: auto;
    display: inline-block;
}

.main-award-row .award-prize {
    font-size: 1.4rem; /* テキストも大きく */
    line-height: 1.6;
}

/* 2段目以降：横並び設定（PC） */
.awards-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2カラム */
    gap: 30px 40px;
}

/* サブグリッド内のカード調整 */
.awards-sub-grid .award-row {
    flex-direction: column; /* 各カード内は縦並び */
    align-items: center;
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    border-bottom: none; /* 個別の境界線は消す */
}

.awards-sub-grid .award-left {
    flex: none;
    width: 100%;
    margin-bottom: 10px;
}

.awards-sub-grid .award-tag {
    width: 100%;
    font-size: 1rem;
}

.awards-sub-grid .award-prize {
    font-size: 1.1rem;
}

/* スマホ対応：すべて1カラム */
@media (max-width: 768px) {
    .awards-sub-grid {
        grid-template-columns: 1fr;
    }
    
    .main-award-row .award-tag {
        font-size: 1.1rem;
    }
    
    .main-award-row .award-prize {
        font-size: 1.1rem;
    }
}
/* グランプリ専用のテキスト中央寄せ設定 */
.main-award-row .award-right {
    width: 100%;
    text-align: center; /* テキストを中央に配置 */
}

.main-award-row .award-prize {
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0 auto;
    display: inline-block; /* 中央揃えを確実にするため */
    text-align: center;
}
.award-row { display: flex; align-items: flex-start; gap: 30px; padding-bottom: 30px; border-bottom: 1px dashed #eee; }
.award-row:last-child { border-bottom: none; }
.award-left { flex: 0 0 200px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.award-icon { margin-bottom: 10px; }
.award-icon img { max-width: 80px; height: auto; }
.award-tag { display: inline-block; padding: 8px 15px; border-radius: 20px; color: #ffffff; font-weight: 900; font-size: 0.95rem; width: 100%; text-align: center; }

/* 色設定 */
.award-tag.gold   { background-color: #f1c40f; }
.award-tag.silver { background-color: #bdc3c7; }
.award-tag.bronze { background-color: #836e1b;}
.award-tag.green  { background-color: var(--line-green); }
.award-tag.red  { background-color: red; }

.award-right { flex: 1; text-align: left; }
.award-prize { font-size: 1.15rem; font-weight: 900; color: var(--primary-blue); margin-bottom: 10px; }
.award-text { font-size: 0.95rem; line-height: 1.8; color: var(--text-dark); }

/* 受賞者グリッド用 */
.awards-grid { display: flex; flex-direction: column; gap: 30px; align-items: center; }
.award-item { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.winner-name { font-size: 1.4rem; font-weight: 900; margin: 0; }
.winner-age { font-size: 1rem; font-weight: normal; color: #666; }
.winner-song { font-size: 1rem; margin-top: 5px; color: var(--text-dark); }
.main-award { padding-bottom: 30px; border-bottom: 2px dashed #eee; margin-bottom: 20px; }


#entry-requirements-container .section-title,
.entry-section .section-title {
    color: #ffffff !important;
}

/* --- エントリー要項（縦並び表示） --- */
.entry-requirements-container {
    display: block; /* 横並びを解除 */
    width: 100%;
    margin-top: 20px;
}

.req-list {
    line-height: 1.8;
    margin-top: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

/* タグの配置調整 */
.req-box .award-tag {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
}

/* --- 受賞者の発表 写真表示カスタマイズ --- */

/* 受賞者カード全体の調整 */
#awards .award-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

/* 写真部分のラッパー（ファイナリスト発表の構造を継承） */
.award-photo-wrapper {
    position: relative;
    width: 100%;
    max-width: 240px; /* ファイナリスト写真に近いサイズ感に調整 */
    margin-bottom: 15px;
}

/* 受賞ラベル（グランプリ等の文字）を写真の上に重ねる */
#awards .award-photo-wrapper {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center;
    width: 100%;
    max-width: 220px;
    margin-bottom: 15px;
}



/* メイン（グランプリ）のサイズを少し強調 */
.main-award .award-photo-wrapper {
    max-width: 300px;
}



/* 写真本体：白枠をつけて際立たせる */
#awards .award-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* スマホ表示の微調整 */
@media (max-width: 768px) {
    #awards .award-photo-wrapper {
        max-width: 200px;
    }
    #awards .award-label {
        font-size: 0.9rem;
        padding: 8px 10px;
    }
}


/* 受賞者情報のテキスト調整 */
.winner-info {
    text-align: center;
}

.winner-name {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.winner-song {
    font-size: 0.95rem;
    color: var(--text-dark);
}

/* スマホ表示 */
@media (max-width: 768px) {
    
    .award-photo-wrapper {
        max-width: 200px;
    }
}




@media (max-width: 768px) {
    .award-row { flex-direction: column; align-items: center; }
    .award-right { text-align: center; }
    .sub-awards-grid { grid-template-columns: 1fr; }
}


/* 応募規約などの strong タグを黄色のハイライトで強調する */
.terms-box strong, 
.outline-box strong,
.judging-table strong {
    font-weight: 900;
    /* #ffff00 は最も明度が高い純粋な黄色です */
    background: linear-gradient(transparent 40%, #ffff00 40%);
    padding: 0 4px ;
    margin-right: 6px;
    border-radius: 3px;
}

/* --- 8. 応募方法 & フロー --- */
#entry { background-color: #06C755 !important; }
#entry .section-title { color: #ffffff !important; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); }

.entry-flow {
     width: 100%; 
     max-width: 100%; 
     margin: 0 auto; 
     display: flex; 
     flex-direction: column; 
     align-items: center;
     }

.step-header.step-green { background-color: var(--line-green); border-radius: 30px; padding: 15px 25px; width: 100%; margin-bottom: 30px; text-align: center; }
.step-header.step-green p { font-size: 1.2rem; font-weight: 900; margin: 0; color: #ffffff; }

.req-box { background: #fff; padding: 25px; border-radius: 15px; margin-bottom: 30px; border: 2px solid #eee; }

/* --- 予選会セクション専用追加スタイル --- */

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

.check-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 5px;
}

.check-list li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-size: 0.8em;
}



/* 予選会用のテーブル内のstrong（ハイライト） */
#yosenkai {
    background-color: #fff; /* 薄いグレーの背景 */
}

#yosenkai .outline-table strong {
background: linear-gradient(transparent 40%, #ffff00 40%);
padding: 0 4px;
}

/* スマホではエントリー要項を1列にする */
@media (max-width: 768px) {
    .entry-requirements div {
        grid-template-columns: 1fr !important;
    }
}


/* --- 利用規約内の h4 デザイン --- */

.terms-content h4 {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--primary-blue);
    background-color: #f9f9f9; /* 薄いグレーの背景 */
    padding: 10px 15px;
    border-left: 5px solid var(--primary-blue); /* 左側に青い太線 */
    border-radius: 5px; /* 少し角を丸く */
    margin: 30px 0 15px 0;
    display: block;
    line-height: 1.4;
}

/* 最初の見出しの上の余白を調整 */
.terms-content h4:first-child {
    margin-top: 10px;
}

/* --- 13. 特別番組の紹介 (#special-program) --- */
#special-program { background-color: #4285F4 !important; }

.calendar-action { margin-top: 30px; text-align: center; }
.btn-calendar {
    display: inline-flex; align-items: center; justify-content: center; background-color: #ffffff;
    color: #4285F4; border: 2px solid #4285F4; padding: 12px 25px; border-radius: 30px;
    text-decoration: none; font-weight: 900; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(66, 133, 244, 0.2);
}
.btn-calendar:hover { background-color: #4285F4; color: #ffffff; transform: translateY(-2px); }
.calendar-icon { margin-right: 10px; font-size: 1.2rem; }
.program-info .outline-table th { width: 30%; }


/* --- 特別番組セクションの画像調整 --- */

/* 画像を中央揃えにするためのコンテナ */
.program-image-centered {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.program-image-centered img {
    width: 50%;           /* 一回り小さく設定（お好みで40〜60%に調整してください） */
    max-width: 400px;     /* PCで大きくなりすぎないように制限 */
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* program-main の横並び設定を解除して中央に寄せる */
.program-content .program-main {
    display: block;       /* flexを解除 */
    max-width: 700px;     /* 表の幅を少し絞る */
    margin: 0 auto;       /* 中央揃え */
}

/* スマホでは画像をもっと大きく見せる（見やすさ重視） */
@media (max-width: 768px) {
    .program-image-centered img {
        width: 80%;       /* スマホでは80%くらいが見やすいです */
    }
}


@media (max-width: 768px) {
    .btn-calendar { width: 100%; font-size: 0.9rem; }
}

/* --- 14. SPONSOR (#sponsor) --- */
#sponsor { background-color: #ffffff !important; }

.sponsor-grid { width: 100%; max-width: 900px; margin: 0 auto; text-align: center; }
.sponsor-group { margin-bottom: 60px; }
.sponsor-label::after { content: ''; display: block; width: 40px; height: 3px; background-color: var(--primary-blue); margin: 10px auto 0; border-radius: 2px; }


/* --- ページ上部：特別協賛ラベルの調整 --- */

/* 通常のラベル設定（既存のものがあれば、それに準じます） */
.sponsor-label {
    font-weight: 900;
    margin-bottom: 10px;
    color: var(--text-dark);
}

/* ページ上部 (top-sponsor) 内にある時だけ小さくする */
.top-sponsor .sponsor-label {
    font-size: 0.85rem;      /* 文字サイズを一回り小さく */
    letter-spacing: 0.1em;   /* 文字間隔を少し広げて上品に */
    margin-bottom: 5px;      /* 画像との隙間を詰める */
    opacity: 0.8;            /* 少し透過させて主張を控えめに（お好みで） */
}

/* 前回の回答と合わせた、上部バナー全体の調整 */
.top-sponsor {
    text-align: center;
    padding: 15px 0;         /* 上下の余白をコンパクトに */
}

.top-sponsor .logo-img {
    max-width: 220px;        /* 前回の回答よりさらに少し絞るとバランスが良いです */
}

/* スマホでの微調整 */
@media (max-width: 768px) {
    .top-sponsor .sponsor-label {
        font-size: 0.75rem;
    }
}



.sponsor-logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; margin-bottom: 48px; }
/* --- スポンサーロゴ：拡大せず中央に配置する設定 --- */

.sponsor-logos.tier-1 .logo-img {
    /* 幅を固定(width)から最大幅(max-width)に変更 */
    width: auto;               /* 画像本来の幅を優先 */
    max-width: 380px;          /* これ以上は大きくしない（PC用） */
    height: auto;
    max-height: 120px;         /* 高さを制限して揃える */
    
    /* 余計な引き伸ばしを防止 */
    object-fit: contain;       
    
    /* 枠内の装飾を微調整 */
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    display: block;
    margin: 0 auto;            /* 中央寄せ */
}

/* スマホ表示での調整 */
@media (max-width: 768px) {
    .sponsor-logos.tier-1 .logo-img {
        max-width: 80%;        /* スマホ画面からはみ出さないように */
        max-height: 80px;      /* スマホでは高さを少し抑える */
    }
}



.logo-img { max-width: 100%; height: auto; object-fit: contain; background: #fff; padding: 15px; border-radius: 8px; }
.tier-1 .logo-img { width: 380px; }
.tier-2 .logo-img { width: 300px; }
.tier-3 .logo-img { width: 180px; }

/* --- 15. お問い合わせ (#contact) --- */
#contact {
    /* 背景色（例：薄いグレーや白） */
    background-color: #feffeb !important; 
    /* 背景画像 */
    background-image: url('images/bg_square_yellow.png') !important;
    /* 画像の設定 */
    background-repeat: repeat !important;
    background-size: auto;
    background-position: center;
    /* 背景色と画像を馴染ませる（薄くしたい場合は soft-light や overlay） */
    background-blend-mode: multiply; 
    padding: 80px 0;
    border-top: 2px solid #f2ff00;
}

#contact .outline-box {
    background: #ffffff;
}

.contact-info { text-align: center; padding: 20px 0; }
.organizer-name { font-size: 1.5rem; font-weight: 900; color: var(--primary-blue); margin-bottom: 20px; }
.contact-details p { font-size: 1.1rem; margin: 10px 0; color: var(--text-dark); }
.contact-details a { color: var(--text-dark); text-decoration: none; font-weight: 900; }
.contact-details a:hover { text-decoration: underline; color: var(--primary-blue); }

/* --- スポンサー名（テキスト表示用）のスタイル --- */

.sponsor-text-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* バナー間の隙間 */
    margin: 20px auto 0;
    max-width: 800px; /* 2つ並んだ時の全体の最大幅 */
}

.sponsor-name {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 横に2つ並べる設定 */
    flex: 0 0 calc(50% - 10px); 
    min-height: 80px;
    
    background-color: #ffffff;
    border: 1px solid #eee; 
    border-radius: 8px;
    
    padding: 10px;
    
    /* ★フォントを角ゴシックに変更 */
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-weight: 900; /* 最も太い設定 */
    font-size: 1.25rem; /* ゴシック体に合わせて少しだけ大きく調整 */
    letter-spacing: 0.1em;
    color: var(--text-dark);
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}


/* スマホ表示（横幅が狭くても2並びを維持） */
@media (max-width: 768px) {
    .sponsor-text-list {
        gap: 10px; /* スマホでは隙間を狭く */
        padding: 0 10px;
    }
    
    .sponsor-name {
        flex: 0 0 calc(50% - 5px);
        min-height: 60px;
        font-size: 1rem;
    }
}





/* --- スクロールアニメーション用スタイル --- */


/* PCのみ表示、スマホでは非表示 */
.pc-only { display: block; }
@media (max-width: 768px) {
    .pc-only { display: none !important; }
}



.section-bottom-deco {
    position: absolute;
    bottom: -60px;       /* セクションの最下部（境界線）に配置 */
    width: 150px;        /* 画像のサイズ */
    z-index: 100;        /* 他の要素より上に */
    pointer-events: none;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 20%;
}

/* 偶数番目のセクションは右、奇数番目は左にする設定 */
/* または、IDごとに個別に指定します */

/* 基本は右配置 */
.section-bottom-deco {
    right: 5%;
}

/* 特定のセクションを左配置に上書き */
#news .section-bottom-deco,
#timeline .section-bottom-deco,
#awards .section-bottom-deco {
    right: auto;
    left: 5%;
}

.section-bottom-deco.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ゆらゆらアニメーション */
.section-bottom-deco.is-active img {
    animation: yura-yura 3s ease-in-out infinite;
    width: 100%;
    height: auto;
}

@keyframes yura-yura {
    0%, 100% { transform: rotate(-5deg) translateX(0); }
    50% { transform: rotate(5deg) translateX(10px); }
}





/* --- 見出しの派手な装飾 (#about) --- */

#about .section-title {
    font-size: 2.8rem; /* PCではさらに大きく */
    font-weight: 900;
    margin-bottom: 20px;
    display: inline-block; /* 中央寄せのため */
    text-align: center;
    width: 100%;
}



/* スマホ表示での調整 */
@media (max-width: 768px) {
    #about .card-yellow p {
        font-size: 1rem;  /* スマホでは画面に合わせて微調整 */
        line-height: 1.7;
    }
}

/* スマホ対応（縮小） */
@media (max-width: 768px) {
    #about .section-title {
        font-size: 1.8rem;
        color:#0000ff
    }
    
    #about h3 {
        font-size: 1.2rem;
    }
}




/* タイムラインの各項目にあるポインター（丸）も調整 */
.timeline-item::after {
    background: var(--primary-blue);
    border: 4px solid #fff;
}



/* --- 7. 審査基準 & 賞のご案内 --- */
#judging-criteria {
    background-color: var(--accent-sky) !important;
    background-repeat: repeat; background-blend-mode: overlay; padding: 20px 0; margin-top: -2px;
}

.judging-table .score { font-size: 1.3rem; font-weight: 900; color: var(--primary-red); text-align: center; }
.judging-table2 .score { font-size: 1.3rem; font-weight: 900; color: var(--primary-red); text-align: left; }


#awards { background-color: var(--primary-yellow) !important; }
.award-label { display: inline-block; padding: 10px 15px; border-radius: 8px; color: #ffffff; font-weight: 900; font-size: 1rem; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; margin-bottom: 12px; }
.award-label.gold { background: linear-gradient(135deg, #f1c40f, #d4af37); }
.award-label.silver { background: linear-gradient(135deg, #bdc3c7, #95a5a6); }
.award-label.bronze { background: linear-gradient(135deg, #e67e22, #d35400); }
.award-label.green { background: linear-gradient(135deg, #2ecc71, #27ae60); }

.award-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.sub-awards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 30px; margin-top: 40px; }

@media (max-width: 768px) { 
    .sub-awards-grid { grid-template-columns: 1fr; } 
}


.judge-main .judge-name::before, .judge-main .judge-name::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%); border-style: solid;
}
.judge-main .judge-name::before { bottom: -17px; border-width: 15px 12px 0 12px; border-color: #000000 transparent transparent transparent; z-index: 1; }
.judge-main .judge-name::after { bottom: -14px; border-width: 15px 12px 0 12px; border-color: #ffffff transparent transparent transparent; z-index: 2; }

.judge-main .judge-photo { display: inline-block; width: 350px; margin-bottom: 30px; }
.judge-main .judge-photo img { width: 100%; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.judge-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; text-align: center; }
.judge-sub-grid .judge-photo img { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; border: 3px solid #eee; margin-bottom: 20px; }

@media (max-width: 768px) { .judge-sub-grid { grid-template-columns: 1fr; } .judge-main .judge-photo { width: 80%; } }




/*========================================================================*/


/* --- 審査員セクション 前後の波装飾 --- */

.wave-deco {
    width: 100%;
    line-height: 0;   /* 画像下の隙間を消す */
    font-size: 0;     /* 隙間防止 */
    background-color: #ffffff; /* 波の外側（背景）の色 */
}

.wave-deco img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- セクション間の隙間を完全に埋める --- */
.wave-top { margin-bottom: -2px !important; }
.wave-bottom { margin-top: -2px !important; }

/* 下の波専用の設定：背景を白ではなく水色にする */
.wave-bottom-to-sky {
    background-color: var(--accent-sky) !important; /* 次のセクションの色を敷く */
    line-height: 0;
    font-size: 0;
    margin-top: -1px;    /* 上の赤セクションとの隙間消し */
    margin-bottom: -1px; /* 下の水色セクションとの隙間消し */
    position: relative;
    z-index: 10;
}

.wave-bottom-to-sky img {
    width: 100%;
    display: block;
}

/* スマホ等で波が小さくなりすぎないよう調整（任意） */
@media (max-width: 768px) {
    .wave-deco img {
        min-height: 40px;
        object-fit: cover;
    }
}





/*========================================================================*/

/* --- 特別番組 放送決定セクションの装飾 --- */

.program-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5); /* ほんのり背景を敷いて浮かせる */
    border-radius: 15px;
}

/* 放送決定バッジ：リボン風の目立つデザイン */
.broadcast-badge {
    display: inline-block;
    background: var(--primary-red);
    color: #fff;
    padding: 8px 25px;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 50px;
    margin-bottom: 15px;
}

/* タイトル：極太ゴシックで番組ロゴ風に */
.program-header h3 {
    font-size: 2.2rem; /* 大きく */
    font-weight: 900;
    color: var(--primary-blue);
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.02em;

}

/* ふわふわ動くアニメーション */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .program-header h3 {
        font-size: 1.6rem;
    }
    .broadcast-badge {
        font-size: 0.9rem;
        padding: 6px 18px;
    }
}


/*========================================================================*/


/* --- トップへ戻るボタン スタイル --- */

.page-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 80px; /* 画像のサイズに合わせて調整 */
    z-index: 1000;
    cursor: pointer;
    opacity: 0; /* 初期状態は隠す */
    visibility: hidden;
    transition: all 0.4s ease;
}

/* スクロールして表示された時の状態 */
.page-top.is-active {
    opacity: 1;
    visibility: visible;
}

.page-top img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    animation: pulse 2s infinite;
}

/* ホバーした時に少し浮き上がる演出 */
.page-top:hover img {
    transform: translateY(-10px);
}

/* スマホでは非表示にする場合（お好みで） */
@media (max-width: 768px) {
    .page-top {
        display: none;
    }
}

/* お問い合わせボタンのスタイル */
.btn-inquiry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-blue);
    color: #ffffff;
    border: 2px solid var(--primary-blue);
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 900;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 255, 0.1);
}

.btn-inquiry:hover {
    background-color: var(--primary-blue);
    color: #ffffff;
    transform: translateY(-2px);
}

.inquiry-icon {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .btn-inquiry {
        width: 100%; /* スマホでは幅いっぱいに広げる */
        font-size: 0.95rem;
    }
}

.txt_red {
    color: var(--primary-red);
}

.txt_large {
    font-size: 1.2rem;
}

.txt_large_2 {
    font-size: 2rem;
}


/*--------------------------------------*/

/* 基準となるアイテム */
.timeline-item {
    position: relative; /* これを基準にアイコンを配置します */
}

/* ふわふわ動くアイコンの共通設定 */
.floating-icon {
    position: absolute;
    top: 50%; /* 上から中央に */
    animation: float-heart 2s ease-in-out infinite; /* 前回のふわふわアニメーションを流用 */
    z-index: 10;
}

/* 左側のアイテム用：右側に配置 */
.timeline-item.left .floating-icon {
    right: -40px; /* アイテムの右外へ */
}

/* 右側のアイテム用：左側に配置 */
.timeline-item.right .floating-icon {
    left: -40px; /* アイテムの左外へ */
}

/* 真ん中のアイテム用（もし調整が必要なら） */
.timeline-item.center .floating-icon {
    left: 50%;
    margin-left: -10px; /* センターカードの上中央に置く場合 */
    top: -30px;
}

@media (max-width: 768px) {
    .floating-icon {
        display: none; /* スマホではアイコンを消す */
    }
}

/* アニメーション部分を以下のように書き換えます */
@keyframes float-heart {
    0%, 100% { 
        transform: translateY(0) scale(1); /* 元のサイズ・位置 */
    }
    50% { 
        transform: translateY(-10px) scale(1.2); /* 浮き上がりつつ、少し大きく（手前に） */
    }
}

/* アイコン自体の設定（そのまま維持） */
.floating-icon {
    position: absolute;
    top: 50%;
    font-size: 1.5rem;
    /* 動きの滑らかさを維持するために ease-in-out はそのまま */
    animation: float-heart 2s ease-in-out infinite;
    z-index: 10;
}


.custom-img {
    width: 140px;  /* 幅を300pxに固定 */
    height: auto;  /* 比率を保つ */
}

/*-------------*/
/* スマホ表示でのテーブル崩れ対策 */
@media (max-width: 768px) {
    .outline-table, 
    .outline-table tbody, 
    .outline-table tr, 
    .outline-table th, 
    .outline-table td {
        display: block;        /* 表の機能を解除してブロック要素に */
        width: 100% !important; /* 横幅を100%に */
        box-sizing: border-box;
    }

    .outline-table th {
        background-color: #f0f0f0; /* 見出しを目立たせる */
        border-bottom: none !important;
        padding: 10px;
    }

    .outline-table td {
        border-bottom: 1px dashed #ddd; /* 項目ごとの区切り線 */
        padding: 15px 10px;
    }

    /* リスト（ul/li）がはみ出さないように調整 */
    .outline-table td ul {
        padding-left: 20px;
        margin: 5px 0;
    }
}

/*========================*/

/* スマホ（768px未満）で非表示にするクラス */
@media (max-width: 767px) {
    .no-hp {
        display: none !important;
    }
}

/* PC（768px以上）で非表示にするクラス */
@media (min-width: 768px) {
    .no-pc {
        display: none !important;
    }
}