<style>
    /* 全体を包む枠（最大幅770px ＆ 中央寄せ） */
    #johnnie-walker {
        background-color: #f4d21f; /* ご指定のイエロー背景 */
        max-width: 770px;
        margin: 0 auto;
        padding: 50px 20px;
        font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    }

    /* 横並びの魔法（フレックスボックス） */
    #johnnie-walker .mv section .flex-inner {
        display: flex;
        justify-content: center; 
        align-items: center;     
        gap: 40px; 
    }

    /* 左側の画像サイズ調整 */
    #johnnie-walker .mv section .img-box img {
        max-height: 450px; 
        width: auto;
        display: block; 
    }

    /* 右側のテキスト全体のスタイル */
    #johnnie-walker .mv section .text-box {
        color: #111111; /* 背景が明るいので、文字は引き締まる黒（濃いグレー）に設定 */
    }

    /* 見出し（ジョニーウォーカー ブロンド） */
    #johnnie-walker .mv section .text-box h1 {
        font-size: 36px; 
        margin: 0 0 15px 0; 
        line-height: 1.3; 
        letter-spacing: 2px; 
        font-weight: bold;
    }
    
    /* キャッチコピー（夕方からの〜） */
    #johnnie-walker .mv section .text-box p.catch {
        font-size: 20px;
        font-weight: bold;
        margin: 0 0 20px 0;
        line-height: 1.5;
        border-bottom: 2px solid red; /* デザインのアクセントに下線を追加 */
        padding-bottom: 10px;
        display: inline-block;
        color: red;
    }

    /* 説明文（ミックスのために〜） */
    #johnnie-walker .mv section .text-box p.text {
        font-size: 16px; 
        margin: 0;
        line-height: 1.9; 
        letter-spacing: 1px;
    }

    /* ==========================================
       【スマホ用のレスポンシブ対応（画面幅767px以下）】
       ========================================== */
    @media screen and (max-width: 767px) {
        #johnnie-walker {
            padding: 40px 15px; 
        }
        
        #johnnie-walker .mv section .flex-inner {
            flex-direction: column; /* スマホ時は上から下の縦並びに */
            gap: 25px; 
            text-align: center; /* 縦並びの時は文字を中央揃え */
        }

        #johnnie-walker .mv section .img-box img {
            max-height: 350px; /* スマホではボトルの高さを少し小さく */
            margin: 0 auto;    /* 画像も中央寄せ */
        }

        #johnnie-walker .mv section .text-box h1 {
            font-size: 28px; 
            margin-bottom: 15px;
        }

        #johnnie-walker .mv section .text-box p.catch {
            font-size: 17px; 
            margin-bottom: 15px;
        }

        #johnnie-walker .mv section .text-box p.text {
            font-size: 15px; 
            text-align: left; /* 長めの文章はスマホ時でも左揃えの方が見やすいため調整 */
        }
    }
</style>