:root {
            --primary: #2172b8;
            --text-dark: #212121;
            --bg-gray: #f9f9f9;
            --accent: #dd873d;
            --white: #fff;
        }
        body { font-family: Meiryo, sans-serif; color: var(--text-dark); margin: 0; padding: 0; background-color: var(--bg-gray); }
        .header { background: #1b1521; padding: 20px; text-align: center; color: var(--white); }
        .header__title a { color: var(--white); text-decoration: none; font-size: 24px; }
        .hero { width: 100%; height: 200px; background-image: url('/assets/banner.gif'); background-size: cover; background-position: center; }
        .container { max-width: 1024px; margin: 0 auto; display: flex; flex-direction: column; padding: 10px; gap: 20px; }
        .main__contents { flex: 1; }
        .nav-link { display: block; padding: 8px; border-bottom: 1px solid #ddd; text-decoration: none; color: var(--primary); }
        .headline { background: #eee; padding: 10px; font-weight: bold; border-left: 5px solid var(--primary); margin: 10px 0; }
        .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; list-style: none; padding: 0; }
        .item { background: var(--white); padding: 10px; border: 1px solid #ccc; font-size: 12px; }
        .item-placeholder { background: #ddd; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; }
        .footer { background: #333; color: #a4a0a7; padding: 20px; text-align: center; margin-top: 20px; font-size: 12px; }
        @media (min-width: 768px) { .container { flex-direction: row; } .sidebar { width: 250px; } }