:root {
            --brand-red: #bd2521;
            --bg-gray: #f2f2f2;
            --text-dark: #333;
        }
/* --- 上部お知らせ (スクロールで消える) --- */
        .top-info {
            background-color: var(--brand-red);
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 13px;
            padding: 5px 0;
            width: 100%;
        }
 .top-info a{
    color: #fff;
 }
        /* --- 追従（スティッキー）ラッパー --- */
        .sticky-wrapper {
            position: sticky;
            top: 0;
            z-index: 1000;
            width: 100%;
        }

        /* --- メインヘッダー --- */
        .site-header {
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: center;
            padding: 10px 30px;
        }

        .header-logo {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
        }

        /* =========================================
           PC用スタイリング (画面幅992px以上)
        ========================================= */
        @media (min-width: 992px) {
            .sp-only { display: none !important; }
            
            /* ▼ PC用ロゴ設定：横幅最低410px ▼ */
            .header-logo img {
                min-width: 410px;
                width: 410px;
                height: auto;
            }

            .pc-nav {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-size: 16px; /* 14pxから16pxに拡大 */
                font-weight: bold;
            }
            .pc-nav a { padding: 0 15px; white-space: nowrap; }
            .pc-nav .divider { width: 1px; height: 18px; background-color: #e0e0e0; }

            .pc-actions {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 15px;
            }
            .action-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 13px; /* 11pxから13pxに拡大 */
                font-weight: bold;
                color: #000;
            }
            .action-item img {
                width: 26px;
                height: 26px;
                margin-bottom: 5px;
                object-fit: contain;
            }
            .pc-search {
                display: flex;
                align-items: center;
                border: 1px solid #666;
                border-radius: 25px;
                padding: 6px 15px;
                background-color: #fff;
                margin-left: 10px;
                width: 230px;
            }
            .pc-search input {
                border: none;
                outline: none;
                font-size: 12px;
                width: 100%;
            }
            .pc-search button {
                background: none;
                border: none;
                cursor: pointer;
                display: flex;
                align-items: center;
            }
            .pc-search button img { width: 29px; height: 29px; }
        }

        /* =========================================
           ▼ 拡大時（画面幅が少し狭いPC）の調整 ▼
        ========================================= */
        @media (min-width: 992px) and (max-width: 1450px) {
            .site-header {
                padding: 15px 15px;
            }

            /* 左側メニューの調整 */
            .pc-nav a {
                padding: 0 6px;
                font-size: 13px; /* 11pxから13pxに拡大 */
            }
            .pc-nav .divider {
                height: 12px;
            }

            /* 右側アイコン下のテキストを非表示にする */
            .action-item span {
                display: none;
            }
            /* 右側アイコンの間隔を少しだけ詰める */
            .pc-actions {
                gap: 8px;
            }
            /* 検索バーの幅も縮める */
            .pc-search {
                width: 140px;
                margin-left: 5px;
            }
            .pc-search input {
                font-size: 11px;
            }
        }

        /* =========================================
           スマホ用スタイリング (画面幅991px以下)
        ========================================= */
        @media (max-width: 991px) {
            .pc-only { display: none !important; }
            
            .top-info {
                font-size: 11px;
                padding: 8px 0;
            }
            
            .site-header {
                padding: 0 10px;
                height: 60px;
            }

            /* スマホ用ロゴ設定 */
            .header-logo img {
                height: 35px;
                width: auto;
                min-width: auto;
            }

            .sp-header-left {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 15px;
            }
            .sp-header-right {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 15px;
            }
            
            /* CSSだけで作る三本線（ハンバーガーメニュー） */
            .hamburger-icon {
                width: 26px;
                height: 20px;
                position: relative;
                cursor: pointer;
            }
            .hamburger-icon span,
            .hamburger-icon::before,
            .hamburger-icon::after {
                content: '';
                display: block;
                position: absolute;
                width: 100%;
                height: 3px;
                background-color: var(--text-dark);
                border-radius: 2px;
            }
            .hamburger-icon::before { top: 0; }
            .hamburger-icon span { top: 50%; transform: translateY(-50%); }
            .hamburger-icon::after { bottom: 0; }

            /* 画像を使う検索アイコン */
            .sp-search-icon {
                width: 26px;
                height: 26px;
                cursor: pointer;
                object-fit: contain;
            }

            .sp-header-right img {
                width: 24px;
                height: 24px;
            }

            /* スマホ検索展開時 */
            .sp-search-wrap {
                display: none;
                background-color: var(--bg-gray);
                padding: 15px;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                z-index: 999;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }
            .sp-search-wrap.active { display: block; 
                background: #eee;
            }
            
            .sp-search-inner {
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 30px;
                display: flex;
                align-items: center;
                padding: 8px 20px;
            }
            .sp-search-inner input {
                border: none;
                outline: none;
                width: 100%;
                font-size: 16px;
            }
            .sp-search-inner button{
                background: none;
                border: none;
            }
            .sp-search-inner img { width: 27px; height: 27px; }

            /* スマホドロワーメニュー */
            .drawer-overlay {
                display: none;
                position: fixed;
                top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0,0,0,0.5);
                z-index: 2000;
            }
            .drawer-menu {
                position: fixed;
                top: 0; left: -85%;
                width: 85%; height: 100%;
                background: #fff;
                z-index: 2001;
                overflow-y: auto;
                transition: left 0.3s ease;
            }
            .drawer-menu.active { left: 0; }
            
            .drawer-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 15px;
                border-bottom: 1px solid #ddd;
            }
            
            /* CSSだけで作るバツ印（閉じるボタン） */
            .css-close-btn {
                width: 30px;
                height: 30px;
                position: relative;
                cursor: pointer;
            }
            .css-close-btn::before,
            .css-close-btn::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 24px;
                height: 3px;
                background-color: var(--text-dark);
                border-radius: 2px;
            }
            .css-close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
            .css-close-btn::after { transform: translate(-50%, -50%) rotate(-45deg); }
            
            .login-btn {
                background-color: var(--brand-red);
                color: #fff !important;
                text-align: center;
                padding: 15px;
                font-weight: bold;
                display: block;
            }
            
            .drawer-keywords {
                padding: 15px;
                background-color: #fff;
            }
            .drawer-keywords h3 {
                color: var(--brand-red);
                font-size: 16px;
                margin-bottom: 8px;
                font-weight: bold;
            }
            .drawer-keywords p { font-size: 13px; font-weight: bold; }
            
            /* アコーディオン */
            .menu-title {
                padding: 15px;
                background-color: #777;
                color: #fff;
                display: flex;
                justify-content: space-between;
                font-weight: bold;
                cursor: pointer;
                border-bottom: 1px solid #fff;
            }
            .menu-title a{
                color: #fff !important;
            }
            .menu-title.red { background-color: var(--brand-red); }
            
            .sub-menu-wrapper {
                display: grid;
                grid-template-rows: 0fr;
                transition: grid-template-rows 0.35s ease-in-out;
            }
            .sub-menu-wrapper.is-open { grid-template-rows: 1fr; }
            
            .sub-menu {
                overflow: hidden;
                background-color: #fff;
            }
            .sub-menu a {
                display: flex;
                justify-content: space-between;
                padding: 15px;
                border-bottom: 1px solid #ddd;
                font-size: 14px;
                font-weight: bold;
            }
            
            .support-info { padding: 20px 15px; }
            .support-info h4 {
                color: var(--brand-red);
                font-size: 18px;
                margin-bottom: 10px;
            }
            .support-info p { font-size: 12px; line-height: 2; font-weight: bold; }
        }