body
        {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        /* ヘッダー */
        header
        {
            /*background: #333;*/
            background-image: url(./img/header01.jpg);
            background-position: center;
            color: #fff;
            padding: 10px;
            text-align: center;
            height: 120px;
        }
        /* 初期状態：PanelAを表示、PanelBを非表示 */
        .panelA {
        display: block;
        }
        .panelB {
        display: none;
        }

        
        /* 共通ナビ */
        nav
        {
            /*background: #444;*/
            background-color: #2D3026;
        }
        nav ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center; /*← 横方向中央寄せ */
        }
        nav ul li
        {
            position: relative;
        }
        nav ul li a
        {
            display: block;
            padding: 12px 20px; /*color: white;*/
            color: White;
            text-decoration: none;
        }
        nav ul li a:hover
        {
            background: #666;
        }
        
        /* ▼ PC用プルダウン */
        nav ul li ul
        {
            display: none;
            position: absolute;
            background: #555;
            min-width: 250px;
            top: 100%;
            left: 0;
        }
        nav ul li:hover ul
        {
            display: block;
        }
        nav ul li ul li
        {
            width: 100%;
        }
        
        /* 2カラムレイアウト + Menu */
        .container
        {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 20px auto;
            max-width: 1200px;
        }
        .menu
        {
            flex: 0 0 220px;
            background: #f0f0f0;
            padding: 20px;
            box-sizing: border-box;
        }
        .left
        {
            flex: 0 0 800px;
            background: #f0f0f0;
            padding: 20px;
            box-sizing: border-box;
        }
        .middleColum
        {
            flex: 0 0 20px;
        }
        .right
        {
            flex: 0 0 400px;
            background: #ddd;
            padding: 20px;
            box-sizing: border-box;
        }
        
        /* フッター */
        footer
        {
            /*background: #333;*/
            background-image: url(./img/wallppr031.gif);
            color: #fff;
            text-align: center;
            padding: 15px;
            margin-top: 20px;
        }
        
        /* ▼ ハンバーガーメニュー (スマホ用) */
        .menu-toggle
        {
            display: none;
        }
        .menu-icon
        {
            display: none;
            font-size: 24px;
            padding: 12px;
            cursor: pointer;
            color: white;
        }
        
        /* ▼ スマホ用 サブメニュー開閉チェック */
        .submenu-toggle
        {
            display: none;
        }
        .submenu-icon
        {
            display: none;
            padding: 12px;
            cursor: pointer;
            color: white;
            background: #444;
        }
        
       
        /* スマホ用 */
        @media (max-width: 1050px)
        {
            nav ul
            {
                display: none;
                flex-direction: column;
            }
            .menu-toggle:checked + .menu-icon + ul
            {
                display: flex;
            }
            .menu-icon
            {
                display: block;
                background: #444;
                background-color: #004400;
            }
        
            /* サブメニューはチェックボックスで開閉 */
            nav ul li ul
            {
                position: static;
                display: none;
            }
            .submenu-toggle:checked + .submenu-icon + ul
            {
                display: block;
            }
        
            .container
            {
                flex-direction: column;
            }
            .left, .right
            {
                flex: 1 1 100%;
                max-width: 100%;
            }
           .panelA {
            display: none;
            }
            .panelB {
            display: block;
            }

        }