/* ========================================================= */
        /* BASE STYLES (PC & 共通) */
        /* ========================================================= */
        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            min-height: 100vh;
            background-image: url('../../assets2512/img/teaser_bg.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            display: flex;
            flex-direction: column;
        }

        /* ヘッダー (ロゴ) */
        .header {
            position: absolute;
            top: 30px;
            left: 30px;
            z-index: 10;
        }

        .header img {
            height: 40px; /* PCサイズでのロゴの高さ */
            width: auto;
            filter: brightness(0) invert(1);
        }

        /* メインコンテンツエリア */
        .main-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            /* PCサイズでの上下のパディング */
            padding: 50px 0 50px;
        }

        /* ティーザー画像 */
        .teaser-image img {
            /* PCでの最大幅を維持しつつ、画像が親要素の幅を超えないように調整 */
            max-width: 650px; 
            max-height: 70vh;
            height: auto;
            width: auto;
        }
        /* 追加: 画像がコンテナ幅を超えて引き伸ばされないように、幅を明示的に設定 */
        .teaser-image {
             width: 100%; /* 親要素の幅を確保 */
             text-align: center; /* 画像を中央に配置 */
        }


        /* ティーザーテキスト */
        .teaser-text {
            margin-top: 30px; /* PCサイズ: ティーザー画像の下100px */
            filter: brightness(0) invert(1);
        }

        .teaser-text img {
            max-width: 80vw;
            height: auto;
        }

        /* フッター (著作権表示) */
        .footer {
            width: 100%;
            text-align: center;
            padding: 10px 0;
            color: #fff;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.3);
        }

        /* ========================================================= */
        /* SMARTPHONE STYLES (メディアクエリ: 画面幅768px以下で適用) */
        /* ========================================================= */
        @media (max-width: 768px) {
            
            /* ロゴを小さく調整 */
            .header {
                top: 20px;
                left: 20px;
            }

            .header img {
                height: 30px; /* ロゴの高さをPCの40pxから30pxへ縮小 */
            }

            /* メインコンテンツのパディングを増やし、全体を中央に保つ */
            .main-content {
                /* スマホサイズ: 上下に十分な余白を持たせる */
                padding: 100px 0 100px; 
            }

            /* ティーザー画像 (h1画像) の最大幅を画面幅に合わせる */
            .teaser-image img {
                max-width: 90%; /* 画面幅に合わせて画像が縮小するように調整 */
                width: auto; /* 幅を自動調整 */
            }

            /* ティーザー画像とテキストの余白を調整 */
            .teaser-text {
                margin-top: 50px; /* 100pxから50pxへ縮小 */
            }

            /* ティーザーテキストの最大幅を調整 */
            .teaser-text img {
                max-width: 90vw; /* 80vwから90vwへ広げ、画面幅いっぱいに近くする */
                width: auto;
            }

            /* 著作権表示のフォントも微調整 */
            .footer {
                font-size: 12px;
                padding: 15px 0;
            }
        }