/* 基本設定 */
        body {
            font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }

        h1 {
            text-align: center;
            color: #1a5c9a;
            margin-bottom: 30px;
        }

        /* ------------------------------------------- */
        /* アイテム共通スタイル */
        /* ------------------------------------------- */

        .group-column {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .group-column h2 {
            /* グループごとの見出しスタイル */
            color: #c0392b; 
            font-size: 1.6em;
            margin-bottom: 20px;
            padding-bottom: 5px;
            border-bottom: 3px solid #f6d8d4;
        }

        .grid-item {
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #fcfcfc;
        }

        .item-image {
            width: 100%; /* 親要素の幅に合わせて画像をレスポンシブにする */
            height: auto;
            display: block;
            margin-bottom: 10px;
            border-radius: 4px;
        }

        .grid-item h3 {
            color: #3873ba;
            font-size: 1.1em;
            margin: 5px 0;
        }
        .grid-item p {
            font-size: 0.9em;
            color: #555;
        }

        /* ------------------------------------------- */
        /* グリッドレイアウトの定義 */
        /* ------------------------------------------- */

        /* 【内側のコンテナ】: グループ内のアイテムを並べる（最低600pxから2列） */
        .inner-grid-container {
            display: grid;
            /* 599pxまでは1列、600px以上では2列にする */
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
            gap: 20px; /* アイテム間のスペース */
        }

        /* 【外側のコンテナ】: グループを並べる（PCサイズで2列） */
        .outer-grid-container {
            display: grid;
            grid-template-columns: 1fr; /* デフォルト（スマホ/タブレット）は1列 */
            gap: 40px; /* グループ間のスペース */
/*            max-width: 1400px;*/
            max-width: 80%;
            margin: 40px auto;
        }

        /* ------------------------------------------- */
        /* メディアクエリ（PCでの4列化）          */
        /* ------------------------------------------- */

        /* 1200px以上：外側コンテナを2列にし、グループを横並びにする（2列 x 2グループ = 4列） */
        @media (min-width: 1200px) {
            .outer-grid-container {
                /* 2つのグループを横に並べる */
                grid-template-columns: 1fr 1fr; 
            }
        }