/* ==========================================================================
   1. Base & Reset
   ========================================================================== */
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    width: 100%;
    font-size: 80%;
    vertical-align: top;
    margin: 0;
}

a:link, a:hover, a:visited {
    text-decoration: none;
}

h1, h2, h3 {
    vertical-align: bottom;
    padding: 0px;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
}

.textonly {
    display: none;
}

a img {
    border-style: none;
}

ul, li {
    list-style-type: none;
    list-style-image: none;
    margin: 0px;
    padding: 0px;
}

.MenteMsg {
    width: 100%;
    padding: 10px;
}


/* ==========================================================================
   2. Main Layout Framework (PC 1200px 基準)
   ========================================================================== */
#Main_Container {
    width: 100%;
    padding-bottom: 40px;
    margin: 0 auto;
}

#Main_Body {
    width: 1200px;
    margin: 0 auto;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding-bottom: 40px !important;
    box-sizing: border-box !important;
    gap: 20px !important;
}

.IndexMainContentsContainer {
    width: 980px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 600px;
    box-sizing: border-box !important;
}

/* PC左サイドメニュー */
#sidemenucontainer,
.Side_Menu_Genre_Container {
    width: 200px !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    float: none !important;
    clear: none !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box !important;
}

/* カラム構成バリエーション */
.TopMainContentsContainer,
.TopMainContentsContainerComp,
.MainContentsContainerComp {
    width: 655px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    min-height: 600px;
    box-sizing: border-box !important;
}

.ShopMainContentsStaff {
    width: 975px !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    min-height: 600px;
    box-sizing: border-box !important;
}

#RightMenuContainer,
#RightMenuBox,
.RightMenuCompContainer {
    width: 215px !important;
    flex-shrink: 0 !important;
    order: 3 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.MainContentsContainerTenpo {
    width: 870px !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    min-height: 600px;
    box-sizing: border-box !important;
}

#SideMenuTenpocontainer {
    width: 310px !important;
    flex-shrink: 0 !important;
    order: 2 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ShopMainContents {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 5px !important;
    float: none !important;
    clear: both !important;
    min-height: 600px;
    box-sizing: border-box !important;
}

@media screen and (min-width: 600px) {
    .ShopMainContents {
        padding: 0 5px !important;
    }
}

@media screen and (min-width: 900px) {
    .ShopMainContents {
        padding: 0 !important;
    }
}


/* 出勤ステータスバッジ */
.StatusMarkWorking {
    display: inline-block;
    padding: 3px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    background-color: #e11d48;
    border-radius: 4px;
    line-height: 1;
}



/* ==========================================================================
   3. Common Components (見出し・パンくず・ページトップ)
   ========================================================================== */

/* PC用 パンくず下 h1 キャッチコピー帯 (1200px枠・下部コンテンツと完全同期) */
#Header_Up_Container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto 5px auto !important; /* パンくずと同じく 1200px 中央寄せ */
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
}

#Header_Up_Text {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

.Header_Up_LeftMenu h1 {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    letter-spacing: 0.3px;
}

.PageMainTitle {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px 0;
    padding: 8px 8px;
    font-size: 15px;
    font-weight: bold;
    color: #334155;
    background-color: #f8fafc;
    border-left: 3px solid #64748b;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.0;
    clear: none;
}

/* スマホ・タブレット用コンパクト表示 (899px以下) */
@media screen and (max-width: 899px) {
    .PageMainTitle {
        margin: 5px 5px 10px 5px;
        padding: 4px 0 4px 10px;
        font-size: 15px;
        font-weight: bold;
        color: #475569;
        background-color: transparent;
        border: none;
        border-left: 2.5px solid #94a3b8;
        border-bottom: none;
        line-height: 1.3;
    }
}

/* --------------------------------------------------
   PCパンくず 親枠 (<nav>)
   -------------------------------------------------- */
#Pan_Wrapper,
.TopPan_Container {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 10px auto !important;
    padding: 8px 16px !important;
    background: linear-gradient(to bottom, #f8fafc, #ffffff) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    clear: both !important;
    box-sizing: border-box !important;
}

    /* --------------------------------------------------
   PCパンくず リスト本体 (<ul>) : 横並びFlex
   -------------------------------------------------- */
    #Pan_Container,
    .TopPan_Container ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
    }

    /* 各項目 (<li>) */
    .Pan_Container_Item,
    .TopPan_Container li,
    .TopPan_Container .Pan_Item {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 11.5px !important;
        font-weight: bold !important;
        color: #334155 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }

        .Pan_Container_Item a,
        .TopPan_Container .Pan_Item a {
            color: #334155 !important;
            text-decoration: none !important;
        }

            .Pan_Container_Item a:hover,
            .TopPan_Container .Pan_Item a:hover {
                color: #e11d48 !important;
                text-decoration: underline !important;
            }

/* 区切り記号 ( > ) */
.Pan_Container_Pan {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 8px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
}

.TopPan_Container .Pan_Item:not(:last-child)::after {
    content: ">" !important;
    margin: 0 8px !important;
    color: #94a3b8 !important;
    font-weight: normal !important;
}

/* ページトップボタン */
#backtotop {
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    right: 12px !important;
    bottom: 16px !important;
    z-index: 9999 !important;
}

    #backtotop a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        color: #333333 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 50% !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

        #backtotop a:hover {
            background: #ffffff !important;
            border-color: #f02b66 !important;
            color: #f02b66 !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(240, 43, 102, 0.2) !important;
        }

            #backtotop a:hover .backtotop-icon {
                fill: #f02b66 !important;
            }

.backtotop-icon {
    width: 22px !important;
    height: 22px !important;
    fill: #475569 !important;
    transition: fill 0.2s ease !important;
}

@media (min-width: 600px) {
    #backtotop {
        right: 18px !important;
        bottom: 18px !important;
    }

        #backtotop a {
            width: 42px !important;
            height: 42px !important;
        }

    .backtotop-icon {
        width: 24px !important;
        height: 24px !important;
    }
}


/* ==========================================================================
   4. PC用 サイドメニュー表示スタイル (900px以上)
   ========================================================================== */
.Side_Menu_Genre_Container,
.AreaSelectContainer,
.genremenucontainer,
.EtcContainer,
.InformationContainer,
.ApplicationContainer,
.MenuSearchContainer {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.Side_Menu_Title,
.AreaTitleContainer,
.CommonTitleContainer,
.GenremenuImgBox,
.InformationImgBox,
.ApplicationImgBox,
.EtcImgBox,
.AreaSelectImgBox {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    line-height: 1.3 !important;
}

.CommonContentsContainer,
.GenremenuBox,
.AreaSelectmenuBox,
.EtcmenuBox {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidemenu_list,
.AreaListBox {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

    .sidemenu_list li,
    .AreaListBox li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        box-sizing: border-box !important;
    }

        .sidemenu_list li:last-child,
        .AreaListBox li:last-child {
            border-bottom: none !important;
        }

        .sidemenu_list li a,
        .AreaListBox li a {
            display: block !important;
            padding: 9px 14px !important;
            font-size: 12.5px !important;
            color: #334155 !important;
            text-decoration: none !important;
            background-color: #ffffff !important;
            transition: all 0.2s ease !important;
        }

            .sidemenu_list li a:hover,
            .AreaListBox li a:hover {
                background-color: #fff1f2 !important;
                color: #e11d48 !important;
            }

        .sidemenu_list li.gsactive,
        .sidemenu_list li.is-active,
        .AreaListBox li.is-active,
        li.gsactive {
            background-color: #ffe4e6 !important;
            border-left: 4px solid #e11d48 !important;
            box-sizing: border-box !important;
        }

            .sidemenu_list li.gsactive a,
            .sidemenu_list li.is-active a,
            .AreaListBox li.is-active a,
            li.gsactive a {
                background-color: transparent !important;
                color: #e11d48 !important;
                font-weight: bold !important;
            }

/* ==========================================================================
   5. [共通] SPヘッダーバー & ドロワー基盤スタイル (スクロール完全一本化版)
   ========================================================================== */

/* SP用固定ヘッダーバー */
.sp-header-bar {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    z-index: 1001 !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
}

.sp-hamburger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 2 !important;
}

.sp-hamburger-icon {
    width: 22px !important;
    height: 22px !important;
    fill: #1e293b !important;
    display: block !important;
}

.sp-header-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    z-index: 1 !important;
}

    .sp-header-logo a {
        display: block !important;
        line-height: 0 !important;
    }

    .sp-header-logo img {
        height: 17px !important;
        width: auto !important;
        display: block !important;
    }

.sp-header-user {
    display: flex;
    align-items: center;
    z-index: 2 !important;
}

.sp-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #1e293b;
}

    .sp-user-btn svg {
        width: 14px;
        height: 14px;
        fill: #e11d48;
    }

/* 共通スライドドロワー外枠 */
.drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000000 !important;
}

    .drawer-overlay.is-active {
        display: block;
    }

/* ★親枠：スクロールを完全無効化（overflow: hidden）して高さ100%固定 */
.drawer-menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh !important;
    height: 100dvh !important;
    background: #ffffff;
    z-index: 2000001 !important;
    overflow: hidden !important; /* ★二重スクロール衝突を解消 */
    box-sizing: border-box;
    transition: left 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
}

.drawer-overlay.is-active .drawer-menu {
    left: 0;
}

/* ヘッダー枠（高さ50px固定・縮まない） */
.drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 16px !important;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.drawer-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.drawer-close-icon {
    width: 22px !important;
    height: 22px !important;
    fill: #64748b !important;
    display: block !important;
}
.drawer-body {
    padding: 0 0 180px 0 !important; /* ★下部余白をたっぷり取って最後まで引っ張り出せるようにする */
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    background: #ffffff;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}


/* ==========================================================================
   ドロワー最下部：エリア選択強制実体化スタイル
========================================================================== */
@media screen and (max-width: 899px) {

    /* ドロワー内のエリアコンテナ（強制的に枠を表示） */
    .drawer-body .AreaSelectContainer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 230px !important; /* ★高さを物理的に確保 */
        margin: 15px 0 30px 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-top: 1px solid #cbd5e1 !important;
        box-sizing: border-box !important;
        order: 99 !important; /* ★GNavより確実に一番下に配置 */
    }

    /* 「エリア選択」の見出しタイトル */
    .drawer-body .AreaTitleContainer {
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        width: 100% !important;
        height: 42px !important;
        background-color: #f1f5f9 !important;
        color: #1e293b !important;
        font-size: 13.5px !important;
        font-weight: bold !important;
        padding: 0 14px !important;
        margin: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-sizing: border-box !important;
    }

    /* エリアリスト (ul) */
    .drawer-body ul.AreaListBox {
        display: flex !important;
        visibility: visible !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        background: #ffffff !important;
    }

        /* 各エリア項目 (li) */
        .drawer-body ul.AreaListBox li {
            display: block !important;
            visibility: visible !important;
            width: 100% !important;
            height: 44px !important;
            border-bottom: 1px solid #f1f5f9 !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

            /* ★エリアリンク（文字色を確実に「濃いグレー #1e293b」に固定） */
            .drawer-body ul.AreaListBox li a {
                display: flex !important;
                visibility: visible !important;
                align-items: center !important;
                width: 100% !important;
                height: 100% !important;
                padding: 0 16px !important;
                font-size: 13.5px !important;
                font-weight: bold !important;
                color: #1e293b !important; /* ★白文字同化を完全防止 */
                text-decoration: none !important;
                background-color: #ffffff !important;
                box-sizing: border-box !important;
            }

            /* 選択中のアクティブエリア（赤背景・白文字） */
            .drawer-body ul.AreaListBox li.is-active a {
                background: linear-gradient(135deg, #f02b66, #d80046) !important;
                color: #ffffff !important;
            }

    /* ドロワー内の邪魔な透明バナー枠を完全消去 */
    .drawer-body .WakuLeftMenuBNR,
    .drawer-body [class*="WakuLeftMenu"] {
        display: none !important;
    }
}

    /* ==========================================================================
   6. [共通] ドロワー内 サイドメニュー（種類・ジャンル・エリア選択）
   ========================================================================== */
    .drawer-body #sidemenucontainer {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: #ffffff !important;
    }

    .drawer-body .genremenucontainer,
    .drawer-body .Side_Menu_Genre_Container,
    .drawer-body .AreaSelectContainer {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    /* 見出しタイトル */
    .drawer-body .GenremenuImgBox,
    .drawer-body .Side_Menu_Title,
    .drawer-body .AreaTitleContainer {
        background: #f8fafc !important;
        color: #334155 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 10px 14px !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        line-height: 1.3 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }

        .drawer-body .GenremenuImgBox::before,
        .drawer-body .Side_Menu_Title::before,
        .drawer-body .AreaTitleContainer::before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }

        .drawer-body .Side_Menu_Title::before,
        .drawer-body .genremenucontainer:nth-of-type(1) .GenremenuImgBox::before,
        .drawer-body .genremenucontainer:nth-of-type(2) .GenremenuImgBox::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M7.5 7l-2-4h13l-2 4H7.5zm-4.3-4.5l1.6 3.2L11 14.3V20H7v2h10v-2h-4v-5.7l6.2-8.6 1.6-3.2H3.2z'/%3E%3C/svg%3E");
        }

        .drawer-body .AreaTitleContainer::before,
        .drawer-body .genremenucontainer:nth-of-type(3) .GenremenuImgBox::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23475569'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
        }

    /* リストアイテム */
    .drawer-body .sidemenu_list li,
    .drawer-body .AreaListBox li,
    .drawer-body .smenu_sub_list,
    .drawer-body .smenu_sub_list_active,
    .drawer-body .smenusub_sub_list,
    .drawer-body .smenusub_sub_list_active {
        display: block !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-left: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .drawer-body .sidemenu_list li:last-child,
        .drawer-body .AreaListBox li:last-child,
        .drawer-body .smenusub_sub_list:last-child,
        .drawer-body .smenusub_sub_list_active:last-child {
            border-bottom: none !important;
        }

        /* 通常リンク（濃い文字色で確実に可視化） */
        .drawer-body .sidemenu_list li a,
        .drawer-body .AreaListBox li a,
        .drawer-body .smenu_sub_list a,
        .drawer-body .smenusub_sub_list a {
            display: flex !important;
            align-items: center !important;
            min-height: 44px !important;
            padding: 8px 14px 8px 20px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #334155 !important;
            border: none !important;
            background: #ffffff !important;
            text-decoration: none !important;
            transition: background-color 0.15s ease !important;
        }

            .drawer-body .sidemenu_list li a:hover,
            .drawer-body .AreaListBox li a:hover,
            .drawer-body .smenu_sub_list a:hover,
            .drawer-body .smenusub_sub_list a:hover {
                background-color: #f8fafc !important;
            }

        /* 選択中（アクティブ）リンク */
        .drawer-body .sidemenu_list li.is-active a,
        .drawer-body .AreaListBox li.is-active a,
        .drawer-body .smenu_sub_list_active a,
        .drawer-body .smenusub_sub_list_active a {
            background: linear-gradient(135deg, #f02b66, #d80046) !important;
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        /* 並び順制御 */
        /* 1. 上段：ジャンル・種類選択 */
        .drawer-body .Side_Menu_Genre_Container,
        .drawer-body .genremenucontainer {
            order: 1 !important;
        }

        /* 2. 中段：ナビゲーション（一般ModernGNav / 求人RecruitGNav） */
        .drawer-body .ModernGNav,
        .drawer-body .RecruitGNav {
            order: 2 !important;
            margin: 10px 0 !important;
        }

        /* 3. ★最下部：エリア選択（一般・求人ともに .AreaSelectContainer で一番下に固定） */
        .drawer-body .AreaSelectContainer {
            order: 3 !important; /* ★ナビより下の位置に強制固定 */
            display: block !important;
            visibility: visible !important;
            width: 100% !important;
            margin-top: 15px !important;
            margin-bottom: 40px !important;
        }

        /* 4. 不要なバナー枠は非表示 */
        .drawer-body .WakuLeftMenuBNR,
        .drawer-body .booksidemenu {
            display: none !important;
        }

    /* ==========================================================================
   7. 【求人専用】ドロワー内ナビゲーションスタイル (RecruitGNav)
   ========================================================================== */
    .drawer-body .RecruitGNav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .drawer-body .RecruitGNavList {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .drawer-body .RecruitGNavItem {
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-left: none !important;
    }

        .drawer-body .RecruitGNavItem:last-child {
            border-bottom: none !important;
        }

    .drawer-body .RecruitGNavLink {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 42px !important;
        height: auto !important;
        padding: 8px 14px !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        border: none !important;
        border-left: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
        transition: background-color 0.15s ease !important;
    }

        .drawer-body .RecruitGNavLink:hover {
            background-color: #f8fafc !important;
        }

    .drawer-body .RecruitNavIcon {
        width: 18px !important;
        height: 18px !important;
        fill: #64748b !important;
        flex-shrink: 0 !important;
    }

    .drawer-body .RecruitNavText {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .drawer-body .RecruitNavTitle {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .drawer-body .RecruitNavSub {
        display: none !important;
    }

    .drawer-body .RecruitGNavLink.is-active {
        background: linear-gradient(135deg, #f02b66, #d80046) !important;
        border: none !important;
        border-left: none !important;
        box-shadow: none !important;
    }

        .drawer-body .RecruitGNavLink.is-active .RecruitNavTitle {
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        .drawer-body .RecruitGNavLink.is-active .RecruitNavIcon {
            fill: #ffffff !important;
        }


    /* ==========================================================================
   8. 【一般専用】ドロワー内ナビゲーションスタイル (ModernGNav)
   ========================================================================== */
    .drawer-body .ModernGNav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .drawer-body .ModernGNavList {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .drawer-body .ModernGNavItem {
        width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-left: none !important;
    }

        .drawer-body .ModernGNavItem:last-child {
            border-bottom: none !important;
        }

    .drawer-body .ModernGNavLink {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 42px !important;
        height: auto !important;
        padding: 8px 14px !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        border: none !important;
        border-left: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
        transition: background-color 0.15s ease !important;
    }

        .drawer-body .ModernGNavLink:hover {
            background-color: #f8fafc !important;
        }

    .drawer-body .GNavIcon {
        width: 18px !important;
        height: 18px !important;
        fill: #64748b !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .drawer-body .GNavTitle {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .drawer-body .GNavSub {
        display: none !important;
    }

    .drawer-body .ModernGNavLink.is-active {
        background: linear-gradient(135deg, #f02b66, #d80046) !important;
        border: none !important;
        border-left: none !important;
        box-shadow: none !important;
    }

        .drawer-body .ModernGNavLink.is-active .GNavTitle {
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        .drawer-body .ModernGNavLink.is-active .GNavIcon {
            fill: #ffffff !important;
        }


/* ==========================================================================
   9. 900px未満共通 (★パンくず追従位置完全固定・めり込み防止完全版)
   ========================================================================== */
@media screen and (max-width: 899px) {

    html body #Main_Body {
        width: 100% !important;
        flex-direction: column !important;
        padding: 5px !important;
    }

        html body #Main_Body > #sidemenucontainer {
            display: none !important;
        }

    html body .IndexMainContentsContainer {
        width: 100% !important;
    }

    /* ------------------------------------------------------------------
       ① 求人ページ専用 通常パンくず (<nav class="TopPan_Container">)
       ------------------------------------------------------------------ */
    html body nav.TopPan_Container,
    html body .TopPan_Container {
        display: block !important;
        width: 100% !important;
        margin-top: 50px !important; /* 固定ヘッダー分の余白 */
        margin-bottom: 0 !important;
        padding: 6px 12px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

        html body nav.TopPan_Container ul,
        html body .TopPan_Container ul {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            white-space: nowrap !important;
            padding: 0 !important;
            margin: 0 !important;
            list-style: none !important;
            width: auto !important;
        }

        html body nav.TopPan_Container li,
        html body .TopPan_Container li,
        html body .TopPan_Container .Pan_Item {
            display: inline-flex !important;
            align-items: center !important;
            flex-shrink: 0 !important;
            font-size: 11px !important;
            white-space: nowrap !important;
        }

            html body .TopPan_Container .Pan_Item:not(:last-child)::after {
                content: ">" !important;
                margin: 0 6px !important;
                color: #94a3b8 !important;
            }

    /* ------------------------------------------------------------------
       ② 一般ページ専用 通常パンくず (#Pan_Wrapper / #Pan_Container)
       ------------------------------------------------------------------ */
    html body #HeaderMenuContainer {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
    }

    /* バナーがない時のパンくず上部余白(固定ヘッダー50px回避) */
    html body #Pan_Wrapper {
        margin-top: 50px !important;
    }

    /* バナーがある時はバナーが50px回避し、パンくずの上部余白を0に */
    .sp-only-header-bnr {
        display: block !important;
        width: 100% !important;
        margin-top: 50px !important; /* 固定ヘッダー回避 */
        margin-bottom: 8px !important;
        padding: 8px 10px 0 10px !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

        .sp-only-header-bnr .HeaderBnrWaku,
        .sp-only-header-bnr .HeaderBnrBox,
        .sp-only-header-bnr .HeaderBnrBox a {
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
        }

        .sp-only-header-bnr img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: contain !important; /* 見切れ・はみ出しを完全防止 */
            display: block !important;
            margin: 0 auto !important;
            border-radius: 6px !important;
        }

    html body #HeaderMenuBox {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    html body #Pan_Wrapper {
        display: block !important;
        width: calc(100% - 20px) !important;
        margin: 6px 10px 8px 10px !important;
        padding: 6px 12px !important;
        background: linear-gradient(to bottom, #f8fafc, #ffffff) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body #Pan_Container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        list-style: none !important;
    }

    html body .Pan_Container_Item {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    html body .Pan_Container_Pan {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        font-size: 10px !important;
        margin: 0 6px !important;
    }

    html body .TopPan_Container::-webkit-scrollbar,
    html body #Pan_Wrapper::-webkit-scrollbar,
    html body #Pan_Container::-webkit-scrollbar {
        height: 0px !important;
        display: none !important;
    }

    /* ------------------------------------------------------------------
       店舗ページ専用：パンくず・h1の隙間ゼロ密着 ＆ 追従対応
       ------------------------------------------------------------------ */
    /* 通常時：固定ヘッダー直下に隙間なく配置 */
    html body .ShopPan_Container {
        margin-top: 50px !important; /* 固定ヘッダー分の50px */
        margin-bottom: 0 !important; /* ★h1との間の隙間を完全ゼロ化 */
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }

        /* h1ブロック：パンくずの真下にマージン0で密着 */
        html body .ShopPan_Container + #Header_Up_Container {
            margin-top: 0 !important; /* ★スペースを完全消去 */
        }

        /* 追従時：上スクロールでヘッダー直下にピタッと出現 */
        html body .ShopPan_Container.pan-sticky-layer {
            display: block !important;
            position: fixed !important;
            top: 50px !important;
            left: 0 !important;
            width: 100% !important;
            height: 38px !important;
            min-height: 38px !important;
            max-height: 38px !important;
            z-index: 1000 !important;
            margin: 0 !important;
            margin-top: 0 !important;
            padding: 0 !important;
            background-color: #ffffff !important;
            border: none !important;
            border-bottom: 1px solid #cbd5e1 !important;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transform: translateY(-100%) !important;
            transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
        }

            html body .ShopPan_Container.pan-sticky-layer.is-active-layer {
                opacity: 1 !important;
                pointer-events: auto !important;
                transform: translateY(0) !important;
            }

            html body .ShopPan_Container.pan-sticky-layer ul {
                display: flex !important;
                align-items: center !important;
                height: 100% !important;
                padding: 0 12px !important;
                margin: 0 !important;
                white-space: nowrap !important;
            }

    /* ------------------------------------------------------------------
       ③ ★追従パンくず専用レイヤー (.pan-sticky-layer)
       【完全修復】高さ38px固定 ＆ 不透明な白(#ffffff) ＆ 上下中央配置！
       ヘッダー(50px)直下にピタッと隙間なく密着し、文字の頭が絶対に切れない！
       ------------------------------------------------------------------ */
    html body nav.TopPan_Container.pan-sticky-layer,
    html body #Pan_Wrapper.pan-sticky-layer,
    html body .pan-sticky-layer {
        display: block !important;
        position: fixed !important;
        top: 50px !important; /* ★固定ヘッダー(50px)直下 */
        left: 0 !important;
        width: 100% !important;
        height: 38px !important; /* ★高さを固定 */
        min-height: 38px !important;
        max-height: 38px !important;
        z-index: 1000 !important; /* ★ヘッダー直下の最前面に出す */
        margin: 0 !important;
        margin-top: 0 !important; /* ★ズレ落ち完全消去 */
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid #cbd5e1 !important; /* スッキリした境界線 */
        background-color: #ffffff !important; /* ★不透明な白で背後を100%遮断 */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-100%) !important;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
    }

        /* 追従バー内のリスト：上下ど真ん中（center）に完全整列 */
        html body .pan-sticky-layer ul,
        html body .pan-sticky-layer #Pan_Container {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important; /* ★上下中央に完璧に揃える */
            height: 100% !important;
            padding: 0 12px !important;
            margin: 0 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            white-space: nowrap !important;
            box-sizing: border-box !important;
        }

        /* 追従バー内の文字サイズとラインハイト */
        html body .pan-sticky-layer li,
        html body .pan-sticky-layer .Pan_Item,
        html body .pan-sticky-layer .Pan_Container_Item {
            display: inline-flex !important;
            align-items: center !important;
            font-size: 11.5px !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }

        /* 上スクロール時にスッと降りてくる（ヘッダー下端に吸着） */
        html body nav.TopPan_Container.pan-sticky-layer.is-active-layer,
        html body #Pan_Wrapper.pan-sticky-layer.is-active-layer,
        html body .pan-sticky-layer.is-active-layer {
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: translateY(0) !important;
        }

    /* ------------------------------------------------------------------
       ④ h1ブロック：パンくず真下に密着配置 (クリーン背景・横スクロール)
       ------------------------------------------------------------------ */
    html body #Header_Up_Container {
        display: block !important;
        width: 100% !important;
        background-color: #f8fafc !important; /* ★ピンクを廃止し、上品な淡いグレーに */
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 7px 12px !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

        html body #Header_Up_Container::-webkit-scrollbar {
            height: 2px !important;
        }

        html body #Header_Up_Container::-webkit-scrollbar-thumb {
            background: #cbd5e1 !important;
            border-radius: 2px !important;
        }

    html body #Header_Up_Text {
        width: max-content !important; /* 文字幅に合わせて横スクロール */
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    html body .Header_Up_LeftMenu {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

        html body .Header_Up_LeftMenu h1 {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: #1e293b !important;
            line-height: 1.2 !important;
            margin: 0 !important;
            padding: 1px 0 1px 8px !important;
            background: transparent !important;
            border: none !important;
            border-left: 3px solid #e11d48 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            white-space: nowrap !important;
            display: inline-block !important;
            letter-spacing: 0.2px !important;
        }

    /* common.css の display: none !important に打ち勝つセレクタ */
    html body #HeaderMenuBox > .headertitleBox,
    .headertitleBox {
        display: block !important; /* ★headertitleBox を確実に表示させる */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ロゴ・ログイン・コメント枠は消し、バナーだけを残す */
    html body .headertitleBox .headertitlembox,
    html body .headertitleBox .headerUserName,
    html body .headertitleBox .HeaderTitleComment {
        display: none !important;
    }

    /* バナーが存在しない場合、親ボックスの余計な隙間をゼロにする */
    html body .headertitleBox:not(:has(.HeaderBnrWaku)) {
        display: none !important;
    }
}






/* ==========================================================================
   サイト共通 もっと見るボタン (レスポンシブ完全対応版)
   ========================================================================== */
.CommonMoreBtnContainer {
    width: 100% !important;
    text-align: center !important;
    margin: 18px auto 8px auto !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* ボタン本体 (基本デザイン統制適用) */
.CommonMoreBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 34px !important;
    font-size: 13.5px !important;
    font-weight: bold !important;
    background: linear-gradient(to bottom, #f02b66, #d80046) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
    border: none !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    user-select: none !important;
}

    .CommonMoreBtn:hover {
        opacity: 0.92 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(233, 30, 99, 0.45) !important;
        color: #ffffff !important;
    }

    .CommonMoreBtn:active {
        transform: translateY(0) !important;
    }

    /* ボタン内テキスト */
    .CommonMoreBtn span {
        display: inline-block !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    /* ボタン内 右矢印SVGアイコン */
    .CommonMoreBtn svg {
        width: 15px !important;
        height: 15px !important;
        fill: #ffffff !important;
        flex-shrink: 0 !important;
        transition: transform 0.2s ease !important;
    }

    .CommonMoreBtn:hover svg {
        transform: translateX(3px) !important;
    }

/* タブレット対応 (600px - 899px) */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .CommonMoreBtnContainer {
        margin: 16px auto 8px auto !important;
    }

    .CommonMoreBtn {
        padding: 9px 30px !important;
        font-size: 13px !important;
    }
}

/* スマホ対応 (599px以下) */
@media screen and (max-width: 599px) {
    .CommonMoreBtnContainer {
        margin: 14px auto 6px auto !important;
        padding: 0 16px !important;
    }

    .CommonMoreBtn {
        width: 100% !important;
        max-width: 280px !important;
        height: 42px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
    }

        .CommonMoreBtn svg {
            width: 14px !important;
            height: 14px !important;
        }
}














/* ==========================================================================
   【完全復旧】PICK UP オススメ優良求人 カルーセル ＆ カード枠
   ========================================================================== */

/* 1. バナー カルーセル枠 (両サイドチラ見せ中央配置) */
.recruit-special-bnr-section {
    margin: 20px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    clear: both !important;
}

.recruit-special-bnr-badge {
    background: #e63f31 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.05em !important;
}

.spec-bnr-slider {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
    touch-action: pan-y !important;
}

.spec-bnr-track {
    display: flex !important;
    gap: 12px !important;
    will-change: transform !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    align-items: center !important;
}

.spec-bnr-slide {
    flex: 0 0 80% !important;
    width: 80% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

@media (min-width: 600px) {
    .spec-bnr-slide {
        flex: 0 0 70% !important;
        width: 70% !important;
        max-width: 460px !important;
    }
}

.spec-bnr-link {
    display: block !important;
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    line-height: 0 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
    background: #000000 !important;
}

.spec-bnr-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.spec-bnr-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #333333 !important;
    border: 1px solid #e2e8f0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    user-select: none !important;
}

.spec-bnr-prev {
    left: 4px !important;
}

.spec-bnr-next {
    right: 4px !important;
}



/* ==========================================================================
   ページインデックス完全対応 (ID・クラス完全両対応版)
   ========================================================================== */

/* 1. 外枠コンテナ */
.ShopSearchIndexPageListContainer,
.BlogNewPageIndexCompContainer {
    width: 100% !important;
    margin: 24px 0 20px 0 !important;
    text-align: center !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* 該当件数テキスト */
.ShopSearchIndexText {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #64748b !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* 2. リスト本体 (★ID・クラス両方に完全一致) */
#ShopSearchIndexPageBox,
ul#ShopSearchIndexPageBox,
.ShopSearchIndexPageBox,
ul.ShopSearchIndexPageBox {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    /* 各リスト項目 (li) */
    #ShopSearchIndexPageBox li,
    ul#ShopSearchIndexPageBox li,
    .ShopSearchIndexPageBox li,
    ul.ShopSearchIndexPageBox li {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        /* 3. 各ページ番号リンク (li a) */
        #ShopSearchIndexPageBox li a,
        ul#ShopSearchIndexPageBox li a,
        .ShopSearchIndexPageBox li a,
        ul.ShopSearchIndexPageBox li a {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 38px !important;
            height: 38px !important;
            padding: 0 10px !important;
            font-size: 13px !important;
            font-weight: bold !important;
            color: #334155 !important;
            background-color: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 6px !important;
            text-decoration: none !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
            transition: all 0.2s ease !important;
            box-sizing: border-box !important;
            user-select: none !important;
        }

            /* ホバー時 */
            #ShopSearchIndexPageBox li a:hover,
            ul#ShopSearchIndexPageBox li a:hover,
            .ShopSearchIndexPageBox li a:hover,
            ul.ShopSearchIndexPageBox li a:hover {
                background-color: #fff1f2 !important;
                border-color: #f43f5e !important;
                color: #e11d48 !important;
                transform: translateY(-1px) !important;
                box-shadow: 0 3px 8px rgba(225, 29, 72, 0.15) !important;
            }

        /* 4. ★現在のページ (<li class="activepage">1</li>: 統制デザイン適用) */
        #ShopSearchIndexPageBox li.activepage,
        ul#ShopSearchIndexPageBox li.activepage,
        .ShopSearchIndexPageBox li.activepage,
        ul.ShopSearchIndexPageBox li.activepage {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 38px !important;
            height: 38px !important;
            padding: 0 10px !important;
            font-size: 13px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            background: linear-gradient(to bottom, #f02b66, #d80046) !important;
            border: 1px solid transparent !important;
            border-radius: 6px !important;
            box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
            box-sizing: border-box !important;
            cursor: default !important;
            user-select: none !important;
        }

        /* 「次へ」「最後」「>」リンクのパディング調整 */
        #ShopSearchIndexPageBox li.NextLink a,
        ul#ShopSearchIndexPageBox li.NextLink a,
        .ShopSearchIndexPageBox li.NextLink a,
        ul.ShopSearchIndexPageBox li.NextLink a {
            padding: 0 12px !important;
            font-size: 12.5px !important;
        }

/* 5. スマホ表示最適化 (599px以下) */
@media screen and (max-width: 599px) {
    #ShopSearchIndexPageBox,
    ul#ShopSearchIndexPageBox,
    .ShopSearchIndexPageBox,
    ul.ShopSearchIndexPageBox {
        gap: 4px !important;
    }

        #ShopSearchIndexPageBox li a,
        #ShopSearchIndexPageBox li.activepage,
        ul#ShopSearchIndexPageBox li a,
        ul#ShopSearchIndexPageBox li.activepage,
        .ShopSearchIndexPageBox li a,
        .ShopSearchIndexPageBox li.activepage,
        ul.ShopSearchIndexPageBox li a,
        ul.ShopSearchIndexPageBox li.activepage {
            min-width: 34px !important;
            height: 34px !important;
            padding: 0 8px !important;
            font-size: 12px !important;
            border-radius: 5px !important;
        }
}



/* ==========================================================================
  データなし共通表示 (NoDataContainer: 全ページ共通仕様)
   ========================================================================== */
.NoDataContainer {
    width: 100% !important;
    padding: 36px 20px !important;
    text-align: center !important;
    background-color: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* 中央アイコン (上品なスレートグレー) */
.NoDataIcon {
    width: 42px !important;
    height: 42px !important;
    fill: #94a3b8 !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
}

/* メイン見出し (「〇〇未登録」「該当する情報が見つかりませんでした」) */
.NoDataTitle {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #334155 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.3 !important;
}

/* サブテキスト説明文 */
.NoDataSubText {
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* スマホ表示最適化 (599px以下) */
@media screen and (max-width: 599px) {
    .NoDataContainer {
        padding: 26px 14px !important;
        margin: 12px 0 !important;
    }

    .NoDataIcon {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 8px !important;
    }

    .NoDataTitle {
        font-size: 14px !important;
    }

    .NoDataSubText {
        font-size: 11.5px !important;
    }
}



/* ==========================================================================
   ブログ削除・違反報告リンク (BlogIhanBox)
   ========================================================================== */
.BlogIhanBox {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* ★右下にスマートに配置 */
    margin: 14px 0 20px 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

    .BlogIhanBox a {
        font-size: 11px !important;
        color: #94a3b8 !important;
        transition: color 0.15s ease !important;
    }

        .BlogIhanBox a:hover {
            color: #e11d48 !important; /* ホバーでローズピンク */
        }

/* ==========================================================================
   バナーコントローラ
   ========================================================================== */

/* スマホ表示 (1列・縦並び) */
.IndexBnrWaku,
.SubListBnrWaku,
.SubBnrWaku,
.bnr_waku {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 5px auto 10px auto;
    vertical-align: top;
}

/* 内側コンテンツ枠 */
.IndexBnrBox,
.SubListBnrWaku,
.SubBnrWaku,
.bnr_contents {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
}

    .IndexBnrBox a,
    .SubListBnrWaku a,
    .SubBnrWaku a,
    .bnr_contents a {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    /* 広告バッジ */
    .IndexBnrBox::before,
    .SubListBnrWaku::before,
    .SubBnrWaku::before,
    .bnr_contents::before {
        content: "PR";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: rgba(0, 0, 0, 0.6);
        color: #ffffff;
        font-size: 10px;
        line-height: 1;
        padding: 3px 6px;
        letter-spacing: 0.5px;
        pointer-events: none;
    }

    /* 画像バナー 全幅表示 (カットなし) */
    .IndexBnrBox img,
    .SubListBnrWaku img,
    .SubBnrWaku img,
    .bnr_contents img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* 文字広告枠の装飾 */
    .IndexBnrBox:has(p),
    .SubListBnrWaku:has(p),
    .SubBnrWaku:has(p),
    .bnr_contents:has(p) {
        border: 1px solid #e0e0e0;
        background: #fafafa;
        padding: 22px 12px 10px 12px;
        border-radius: 4px;
    }

    /* 文字広告テキスト */
    .IndexBnrBox p,
    .SubListBnrWaku p,
    .SubBnrWaku p,
    .bnr_contents p {
        margin: 0 0 3px 0;
        padding: 0;
        font-size: 13px;
        line-height: 1.45;
        text-align: left;
        word-break: break-all;
        color: #333333;
    }

        .IndexBnrBox p:last-child,
        .SubListBnrWaku p:last-child,
        .SubBnrWaku p:last-child,
        .bnr_contents p:last-child {
            margin-bottom: 0;
        }

/* タブレット・PC表示 (600px以上) */
@media screen and (min-width: 600px) {
    /* 1件のみの場合は真ん中(中央寄せ) */
    .IndexBnrWaku,
    .SubListBnrWaku,
    .SubBnrWaku,
    .bnr_waku {
        display: block !important;
        width: 48% !important;
        margin: 5px auto 10px auto !important;
        vertical-align: top !important;
    }

        /* 2件連続している場合の1件目 (直後にバナーがある時は横並び) */
        .IndexBnrWaku:has(+ .IndexBnrWaku),
        .IndexBnrWaku:has(+ .bnr_waku),
        .SubListBnrWaku:has(+ .IndexBnrWaku),
        .SubListBnrWaku:has(+ .bnr_waku),
        .SubBnrWaku:has(+ .IndexBnrWaku),
        .SubBnrWaku:has(+ .bnr_waku),
        .bnr_waku:has(+ .IndexBnrWaku),
        .bnr_waku:has(+ .bnr_waku) {
            display: inline-block !important;
            margin: 25px 0.8% 20px 0.8% !important;
        }

        /* 2件連続している場合の2件目 (直前にバナーがある時は横並び) */
        .IndexBnrWaku + .IndexBnrWaku,
        .IndexBnrWaku + .bnr_waku,
        .SubListBnrWaku + .IndexBnrWaku,
        .SubListBnrWaku + .bnr_waku,
        .SubBnrWaku + .IndexBnrWaku,
        .SubBnrWaku + .bnr_waku,
        .bnr_waku + .IndexBnrWaku,
        .bnr_waku + .bnr_waku {
            display: inline-block !important;
            margin: 25px 0.8% 20px 0.8% !important;
        }

        .IndexBnrBox p,
        .SubListBnrWaku p,
        .SubBnrWaku p,
        .bnr_contents p {
            font-size: 13px;
            line-height: 1.5;
        }
}