/* --- ここからフォント定義 (新規追加) --- */
        /*
         * 以下のパスは、HTMLファイルと同じ階層に 'fonts' フォルダを作成し、
         * その中にGoogle Fontsからダウンロードした .ttf ファイルを置いた場合を想定しています。
         * サーバーの構成に合わせてパスを調整してください。
        */
        @font-face {
            font-family: 'Noto Sans JP';
            font-style: normal;
            font-weight: 400;
            src: url('fonts/NotoSansJP-Regular.woff2') format('woff2'),
                 url('fonts/NotoSansJP-Regular.ttf') format('truetype');
            font-display: swap;
        }
        @font-face {
            font-family: 'Noto Sans JP';
            font-style: normal;
            font-weight: 700;
            src: url('fonts/NotoSansJP-Bold.woff2') format('woff2'),
                 url('fonts/NotoSansJP-Bold.ttf') format('truetype');
            font-display: swap;
        }
        @font-face {
            font-family: 'M PLUS Rounded 1c';
            font-style: normal;
            font-weight: 700;
            src: url('fonts/MPLUSRounded1c-Bold.woff2') format('woff2'),
                 url('fonts/MPLUSRounded1c-Bold.ttf') format('truetype');
            font-display: swap;
        }
        @font-face {
            font-family: 'M PLUS Rounded 1c';
            font-style: normal;
            font-weight: 800;
            src: url('fonts/MPLUSRounded1c-ExtraBold.woff2') format('woff2'),
                 url('fonts/MPLUSRounded1c-ExtraBold.ttf') format('truetype');
            font-display: swap;
        }
        @font-face {
            font-family: 'M PLUS Rounded 1c';
            font-style: normal;
            font-weight: 900;
            src: url('fonts/MPLUSRounded1c-Black.woff2') format('woff2'),
                 url('fonts/MPLUSRounded1c-Black.ttf') format('truetype');
            font-display: swap;
        }
        /* --- ここまでフォント定義 --- */

        html {
            scroll-behavior: smooth; /* スムーズスクロールを有効化 */
        }
        body {
            font-family: 'Noto Sans JP', sans-serif;
            background-color: #E2E8F0; 
        }
        .font-mplus-rounded {
            font-family: 'M PLUS Rounded 1c', sans-serif;
        }
        
        .bg-section {
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            position: relative;
        }
        
        /* FVセクションの基本スタイル（PC） */
        .fv-section-base {
            background-image: url('parts/top-bg.png'); /* 修正 */
            aspect-ratio: 1920 / 700; /* PC版のアスペクト比を 1920/700 に変更 */
        }

        /* フッター背景 */
        .footer-bg {
            background-image: url('parts/footer-bg.png'); /* フッター背景画像 */
            background-size: cover;
            background-position: center;
        }

        @keyframes fade-in-up {
            from {
                transform: translateY(16px);
            }
            to {
                transform: translateY(0);
            }
        }
        .reveal.visible {
            animation: fade-in-up 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }
        
        .vod-button {
            transition: all 0.3s ease;
            display: block;
        }
        .vod-button:hover {
            transform: translateY(-4px) scale(1.05);
            filter: brightness(1.1);
        }

        /* 装飾画像の基本スタイル */
        /* SNSセクション以外の装飾はz-index: 15 (コンテンツ枠の上) を維持 */
        .deco-image { 
            position: absolute;
            pointer-events: none; /* クリックイベントを透過 */
        }



        /* 各デコレーション画像の位置とサイズを調整 */
        /* セクション2 (この番組は) */
        .section-2 .deco-left {
            left: 15%; top: 15%; width: 25%; max-width: 150px; /* PC: 枠内に配置 */
            z-index: 15;
            transform: rotate(-10deg); /* 回転を追加 */
        }
        .section-2 .deco-right {
            right: 15%; top: 10%; width: 25%; max-width: 150px; /* PC: 枠内に配置 */
            z-index: 15;
            transform: rotate(10deg); /* 回転を追加 */
        }
        /* セクション2 (この番組は) の枠外装飾 */
        .section-2 .deco-left-outer {
            left: -20%; top: -10%; width: 20%; max-width: 150px;
            z-index: 5;
            transform: rotate(-5deg);
        }
        .section-2 .deco-right-outer {
            right: -20%; bottom: -10%; width: 20%; max-width: 150px;
            z-index: 5;
            transform: rotate(5deg);
        }



        /* セクション3 (公式グッズ) */
        .section-goods .deco-left {
            left: 15%; top: 10%; width: 25%; max-width: 150px; /* PC: 枠内に配置 */
            z-index: 15;
            transform: rotate(-10deg); /* 回転を追加 */
        }
        .section-goods .deco-right {
            right: 15%; top: 8%; width: 25%; max-width: 130px; /* PC: 枠内に配置 */
            z-index: 15;
            transform: rotate(10deg); /* 回転を追加 */
        }
        /* セクション3 (公式グッズ) の枠外装飾 */
        .section-goods .deco-left-outer {
            left: -15%; top: -10%; width: 20%; max-width: 120px;
            z-index: 5;
            transform: rotate(-5deg);
        }
        .section-goods .deco-right-outer {
            right: -20%; bottom: 20%; width: 20%; max-width: 200px;
            z-index: 5;
            transform: rotate(30deg);
        }


        /* セクション4 (最新の見逃し配信) */
        .section-latest-vod .deco-left-top {
            left: 15%; top: 15%; width: 25%; max-width: 150px; /* 枠内・左上 */
            z-index: 15;
            transform: rotate(10deg);
        }
        .section-latest-vod .deco-right-top {
            right: 15%; top: 15%; width: 25%; max-width: 150px; /* 枠内・右上 */
            z-index: 15;
            transform: rotate(-10deg);
        }
        .section-latest-vod .deco-left-bottom {
            left: 17%; bottom: 20%; width: 25%; max-width: 150px; /* 枠内・左下 */
            z-index: 15;
            transform: rotate(50deg);
        }
        .section-latest-vod .deco-right-bottom {
            right: 18%; bottom: 10%; width: 25%; max-width: 150px; /* 枠内・右下 */
            z-index: 15;
            transform: rotate(10deg);
        }
        /* セクション4 (最新の見逃し配信) の枠外装飾 */
        .section-latest-vod .deco-left-top-outer {
            position: absolute;
            z-index: -99; /* コンテンツ枠の下に表示 */
            pointer-events: none;
            left: -10%; /* 枠外・左上 */
            top: -40%;
            width: 25%;
            max-width: 200px;
            transform: rotate(20deg);
        }
        .section-latest-vod .deco-right-bottom-outer {
            position: absolute;
            z-index: 5;
            pointer-events: none;
            right: -15%; /* 枠外・右下 */
            bottom: -35%;
            width: 25%;
            max-width: 230px;
            transform: rotate(15deg) scaleX(-1);
        }


        /* セクション5 (配信で見る) - 「この番組は」と同じCSSを適用 */
        .section-vod .deco-left {
            left: 18%; top: 15%; width: 25%; max-width: 120px; /* PC: 枠内に配置 */
            z-index: 15;
            transform: rotate(-10deg); /* 回転を追加 */
        }
        .section-vod .deco-right {
            right: 13%; top: 15%; width: 25%; max-width: 200px; /* PC: 枠内に配置 */
            z-index: 15;
            transform: rotate(0deg); /* 回転を追加 */
        }
        /* セクション5 (配信で見る) の枠外装飾 - 「この番組は」と同じCSSを適用 */
        .section-vod .deco-left-outer {
            left: -20%; top: -10%; width: 20%; max-width: 150px;
            z-index: 5;
            transform: rotate(-5deg);
        }
        .section-vod .deco-right-outer {
            right: -20%; bottom: -10%; width: 20%; max-width: 150px;
            z-index: 5;
            transform: rotate(5deg);
        }


        /* セクション6 (SNSショート動画) - 枠外4隅に装飾配置 */
        .section-sns .deco-top-left {
            left: -10%; top: -20%; width: 20%; max-width: 200px;
            z-index: 5; /* コンテンツ枠の下に表示 */
            transform: rotate(1deg); /* 回転を追加 */
        }
        .section-sns .deco-top-left-2 { /* 新規追加 */
            left: 0%; top: -22%; width: 20%; max-width: 150px;
            z-index: 4; /* z-indexを5より低く */
            transform: rotate(-5deg); 
        }
        .section-sns .deco-top-right {
            right: -20%; top: 30%; width: 20%; max-width: 200px;
            z-index: 5;
            transform: rotate(0deg); /* 回転を追加 */
        }
        .section-sns .deco-bottom-left {
            left: -20%; bottom: 30%; width: 50%; max-width: 250px;
            z-index: 5;
            transform: rotate(-10deg); /* 回転を追加 */
        }
        .section-sns .deco-bottom-right {
            right: -10%; bottom: -10%; width: 30%; max-width: 200px;
            z-index: 5;
            transform: rotate(10deg); /* 回転を追加 */
        }


        /* SNSセクションの埋め込みコンテンツの高さ */
        .tiktok-embed {
             /* style属性で指定 */
        }
        .twitter-timeline {
             /* data-heightで指定 */
        }
        .youtube-embed-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;
            /* スマホでは9:16、PCでは指定高 */
        }
        
        .youtube-embed-wrapper-inner {
            position: relative;
            padding-bottom: 177.77%; /* 9:16 アスペクト比 */
            height: 0;
            overflow: hidden;
        }

        .youtube-embed-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
        }
        
        @media (min-width: 1024px) { /* lg and up */
            .youtube-embed-wrapper-inner {
                padding-bottom: 0; /* PCではアスペクト比を無効化 */
                height: 640px; /* PCでは固定高 */
            }
        }


        /* スマートフォンでの位置調整 (例: 画面幅が767px未満の場合) */
        @media (max-width: 767px) {
            /* FVセクションのスマホ用画像とアスペクト比 */
            .fv-section-base {
                background-image: url('parts/top-bg-vertical.png'); 
                aspect-ratio: 700 / 700; /* スマホ用 700x700 (1:1) アスペクト比 */
            }

            /* 各タイトル画像のサイズ調整 */
            .section-title {
                width: 60%; /* スマホでの幅を調整 */
                max-width: 10rem; /* スマホでの最大幅を設定 */
            }



            /* セクション2 (この番組は) */
            .section-2 .deco-left { left: 8%; top: 30%; width: 25%; max-width: 50px; transform: translate(-40%, -160%) rotate(-10deg); } /* スマホ: 枠の左外側・上方 */
            .section-2 .deco-right { right: 8%; top: -48%; width: 25%; max-width: 50px; transform: translate(40%, 350%) rotate(10deg); } /* スマホ: 枠の右外側・下方 */
            /* セクション2 (この番組は) の枠外装飾 (スマホ用) */
            .section-2 .deco-left-outer {
                left: -5%; top: -20%; width: 30%; max-width: 50px;
                transform: rotate(-20deg);
            }
            .section-2 .deco-right-outer {
                right: -8%; bottom: -13%; width: 30%; max-width: 100px;
                transform: rotate(5deg);
            }


            /* セクション3 (公式グッズ) */
            .section-goods .deco-left { left: 8%; top: 22%; width: 25%; max-width: 60px; transform: translate(-40%, -160%) rotate(-10deg); }
            .section-goods .deco-right { right: 8%; top: -27%; width: 25%; max-width: 50px; transform: translate(40%, 350%) rotate(10deg); } 
            /* セクション3 (公式グッズ) の枠外装飾 (スマホ用) */
            .section-goods .deco-left-outer {
                left: -8%; bottom: 20%; width: 20%; max-width: 50px;
                transform: rotate(-20deg);
            }
            .section-goods .deco-right-outer {
                right: -15%; bottom: -15%; width: 40%; max-width: 150px;
                transform: rotate(25deg);
            }


            /* セクション4 (最新の見逃し配信) */
            .section-latest-vod .deco-left-top { left: 8%; top: 80%; width: 25%; max-width: 60px; transform: translate(-40%, -160%) rotate(-10deg); }
            .section-latest-vod .deco-right-top { right: 8%; top: 90%; width: 25%; max-width: 60px; transform: translate(40%, -160%) rotate(10deg); }
            .section-latest-vod .deco-left-bottom { left: 0%; bottom: 0%; width: 25%; max-width: 60px; transform: translate(-40%, 160%) rotate(50deg); }
            .section-latest-vod .deco-right-bottom { right: 0%; bottom: 20%; width: 25%; max-width: 60px; transform: translate(40%, 160%) rotate(10deg); }
            
            /* セクション4 (最新の見逃し配信) の枠外装飾 (スマホ用) */
            .section-latest-vod .deco-left-top-outer {
                left: -15%; /* 枠外・左上 */
                top: -45%;
                width: 20%;
                max-width: 80px;
                transform: rotate(35deg);
            }
            .section-latest-vod .deco-right-bottom-outer {
                right: -15%; /* 枠外・右下 */
                top: -40%;
                width: 20%;
                max-width: 80px;
                transform: rotate(-45deg) scaleX(-1);
            }


            /* セクション5 (配信で見る) - 「この番組は」と同様のCSSを適用 */
            .section-vod .deco-left { left: 8%; top: 30%; width: 25%; max-width: 50px; transform: translate(-40%, -160%) rotate(-10deg); } /* スマホ: 枠の左外側・上方 */
            .section-vod .deco-right { right: 8%; top: -32%; width: 25%; max-width: 60px; transform: translate(40%, 350%) rotate(-20deg); } /* スマホ: 枠の右外側・下方 */
            /* セクション5 (配信で見る) の枠外装飾 (スマホ用) - 「この番組は」と同様のCSSを適用 */
            .section-vod .deco-left-outer {
                left: -5%; top: -15%; width: 30%; max-width: 50px;
                transform: rotate(15deg);
            }
            .section-vod .deco-right-outer {
                right: -10%; bottom: -14%; width: 30%; max-width: 100px;
                transform: rotate(5deg);
            }


            /* セクション6 (SNSショート動画) - 枠外4隅に装飾配置 (スマホ用) */
            .section-sns .deco-top-left {
                left: -6%; top: -4%; width: 20%; max-width: 80px;
                transform: rotate(10deg); /* 回転を追加 */
            }
            .section-sns .deco-top-left-2 { /* 新規追加 */
                left: 2%; top: -5%; width: 20%; max-width: 60px;
                z-index: 4;
                transform: rotate(-10deg); 
            }
            .section-sns .deco-top-right {
                right: -5%; top: -6%; width: 20%; max-width: 80px;
                transform: rotate(12deg); /* 回転を追加 */
            }
            .section-sns .deco-bottom-left {
                left: -5%; bottom: -3%; width: 20%; max-width: 80px;
                transform: rotate(-10deg); /* 回転を追加 */
            }
            .section-sns .deco-bottom-right {
                right: -5%; bottom: -3%; width: 20%; max-width: 80px;
                transform: rotate(10deg); /* 回転を追加 */
            }
        }