/*
 * JUGEM-BOARD A19 Split Button UI
 * 左側＝着色アイコンエリア / 右側＝白背景・黒文字
 * 管理者メニュー、管理者各ページ、店舗画面、ログイン画面に適用。
 */

:root{
    --sb-split-text:#182230;
    --sb-split-sub:#667085;
    --sb-split-line:#dfe7f1;
    --sb-split-shadow:0 7px 18px rgba(31,55,88,.10);
    --sb-split-shadow-hover:0 11px 23px rgba(31,55,88,.16);
}

/* =========================================================
   1. 管理者メニューの大ボタン
   ========================================================= */
.sb-am .sb-am-action{
    background:#fff !important;
    color:var(--sb-split-text) !important;
    border:1px solid var(--sb-split-line) !important;
    box-shadow:var(--sb-split-shadow) !important;
    padding:0 48px 0 0 !important;
    gap:0 !important;
    min-height:118px !important;
    border-radius:20px !important;
    overflow:hidden !important;
}
.sb-am .sb-am-action::after{display:none !important;}
.sb-am .sb-am-action:hover{
    background:#fff !important;
    color:var(--sb-split-text) !important;
    transform:translateY(-3px) !important;
    box-shadow:var(--sb-split-shadow-hover) !important;
    filter:none !important;
}
.sb-am .sb-am-action .sb-am-icon{
    align-self:stretch !important;
    flex:0 0 88px !important;
    width:88px !important;
    height:auto !important;
    min-height:118px !important;
    margin:0 !important;
    border-radius:0 !important;
    background:var(--c) !important;
    box-shadow:none !important;
    color:#fff !important;
}
.sb-am .sb-am-action .sb-am-icon svg{
    width:34px !important;
    height:34px !important;
    stroke:#fff !important;
}
.sb-am .sb-am-action .sb-am-action-text{
    flex:1 1 auto !important;
    padding:20px 18px !important;
    min-width:0 !important;
}
.sb-am .sb-am-action .sb-am-action-title{
    color:var(--sb-split-text) !important;
    text-shadow:none !important;
    font-size:22px !important;
    margin-bottom:6px !important;
}
.sb-am .sb-am-action .sb-am-action-desc{
    color:var(--sb-split-sub) !important;
    font-size:14.5px !important;
    line-height:1.45 !important;
}
.sb-am .sb-am-action .sb-am-go{
    right:13px !important;
    width:30px !important;
    height:30px !important;
    background:#f4f7fb !important;
    box-shadow:none !important;
    color:#7a8799 !important;
}
.sb-am .sb-am-action .sb-am-go svg{stroke:#7a8799 !important;}
.sb-am .sb-am-action .sb-am-badge{
    top:10px !important;
    right:10px !important;
    border-color:rgba(255,255,255,.96) !important;
}

/* =========================================================
   2. 管理者各ページの共通アクションボタン
   既存SVGを左の着色帯に表示
   ========================================================= */
.sb-ui-admin-page .sb-ui-action,
.sb-af.sb-ui-admin-page .sb-ui-action{
    --sb-split:#348eea;
    position:relative !important;
    overflow:hidden !important;
    justify-content:flex-start !important;
    gap:0 !important;
    min-height:52px !important;
    padding:0 18px 0 72px !important;
    border:1px solid color-mix(in srgb,var(--sb-split) 24%,#dfe7f1) !important;
    border-radius:15px !important;
    background:#fff !important;
    color:var(--sb-split-text) !important;
    box-shadow:var(--sb-split-shadow) !important;
    text-shadow:none !important;
    font-weight:850 !important;
}
.sb-ui-admin-page .sb-ui-action:hover,
.sb-af.sb-ui-admin-page .sb-ui-action:hover{
    background:#fff !important;
    color:var(--sb-split-text) !important;
    filter:none !important;
    transform:translateY(-2px) !important;
    box-shadow:var(--sb-split-shadow-hover) !important;
}
.sb-ui-admin-page .sb-ui-action::before,
.sb-af.sb-ui-admin-page .sb-ui-action::before{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:54px !important;
    height:auto !important;
    min-height:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    background-color:var(--sb-split) !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:21px 21px !important;
    box-shadow:none !important;
}
.sb-ui-admin-page .sb-ui-mini,
.sb-af.sb-ui-admin-page .sb-ui-mini{
    min-height:42px !important;
    padding-left:53px !important;
    padding-right:13px !important;
    border-radius:12px !important;
    font-size:14px !important;
}
.sb-ui-admin-page .sb-ui-mini::before,
.sb-af.sb-ui-admin-page .sb-ui-mini::before{
    width:40px !important;
    background-size:17px 17px !important;
}
.sb-ui-admin-page .sb-ui-blue{--sb-split:#348eea !important;}
.sb-ui-admin-page .sb-ui-pink{--sb-split:#ef4f87 !important;}
.sb-ui-admin-page .sb-ui-green{--sb-split:#2fb66d !important;}
.sb-ui-admin-page .sb-ui-orange{--sb-split:#ff9d2a !important;}
.sb-ui-admin-page .sb-ui-teal{--sb-split:#24b2a4 !important;}
.sb-ui-admin-page .sb-ui-purple{--sb-split:#8b63df !important;}
.sb-ui-admin-page .sb-ui-red{--sb-split:#ef5564 !important;}
.sb-ui-admin-page .sb-ui-gold{--sb-split:#efa928 !important;}
.sb-ui-admin-page .sb-ui-gray{--sb-split:#64738f !important;}

/* =========================================================
   3. 管理者設定：WebPush / Backup / Restoreカード
   ========================================================= */
.sb-ui-admin-page .sb-as-action{
    background:#fff !important;
    color:var(--sb-split-text) !important;
    border:1px solid color-mix(in srgb,var(--c) 24%,#dfe7f1) !important;
    box-shadow:var(--sb-split-shadow) !important;
    padding:0 42px 0 0 !important;
    gap:0 !important;
    min-height:78px !important;
    overflow:hidden !important;
}
.sb-ui-admin-page .sb-as-action:hover{
    background:#fff !important;
    opacity:1 !important;
    box-shadow:var(--sb-split-shadow-hover) !important;
}
.sb-ui-admin-page .sb-as-action .sb-as-icon{
    align-self:stretch !important;
    flex:0 0 72px !important;
    width:72px !important;
    height:auto !important;
    min-height:78px !important;
    border-radius:0 !important;
    background:var(--c) !important;
    box-shadow:none !important;
}
.sb-ui-admin-page .sb-as-action .sb-as-icon svg{stroke:#fff !important;}
.sb-ui-admin-page .sb-as-action .sb-as-action-text{padding:14px 16px !important;}
.sb-ui-admin-page .sb-as-action .sb-as-action-title{color:var(--sb-split-text) !important;}
.sb-ui-admin-page .sb-as-action .sb-as-action-desc{color:var(--sb-split-sub) !important;}
.sb-ui-admin-page .sb-as-action .sb-as-go{
    position:absolute !important;
    right:11px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    background:#f3f6fa !important;
}
.sb-ui-admin-page .sb-as-action .sb-as-go svg{stroke:#7a8799 !important;}

/* 通知端末管理の操作ボタン */
.sb-ui-admin-page .sb-device-action{
    position:relative !important;
    overflow:hidden !important;
    min-height:44px !important;
    padding:0 14px 0 49px !important;
    border:1px solid #e1e7ef !important;
    border-radius:12px !important;
    background:#fff !important;
    color:var(--sb-split-text) !important;
    box-shadow:0 4px 10px rgba(31,55,88,.08) !important;
    gap:0 !important;
}
.sb-ui-admin-page .sb-device-action svg{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:38px !important;
    height:100% !important;
    padding:11px !important;
    box-sizing:border-box !important;
    stroke:#fff !important;
}
.sb-ui-admin-page .sb-device-action.stop svg{background:#e4a11b !important;}
.sb-ui-admin-page .sb-device-action.start svg{background:#24a663 !important;}
.sb-ui-admin-page .sb-device-action.block svg{background:#d94b4b !important;}
.sb-ui-admin-page .sb-device-action.unblock svg{background:#2d7de0 !important;}
.sb-ui-admin-page .sb-device-label-form button{
    position:relative !important;
    overflow:hidden !important;
    min-height:44px !important;
    padding:0 14px 0 48px !important;
    border:1px solid #e1e7ef !important;
    background:#fff !important;
    color:var(--sb-split-text) !important;
    box-shadow:0 4px 10px rgba(31,55,88,.08) !important;
}
.sb-ui-admin-page .sb-device-label-form button::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;width:38px;
    background:#64738f center/18px 18px no-repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
}

/* =========================================================
   4. 店舗画面のボタン
   ========================================================= */
.sb-store-page .sb-store-nav-button,
.sb-store-page .sb-store-logout,
.sb-store-page .sb-store-pdf-button,
.sb-store-page .sb-store-read-button,
.sb-store-page .sb-store-reply-confirm-button,
.sb-store-page .sb-store-comment-send,
.sb-store-page .sb-store-pwa-slot #sb-pwa-push-button{
    --sb-store-split:#348eea;
    position:relative !important;
    overflow:hidden !important;
    justify-content:center !important;
    min-height:48px !important;
    padding:0 16px 0 62px !important;
    border:1px solid color-mix(in srgb,var(--sb-store-split) 25%,#dfe7f1) !important;
    border-radius:14px !important;
    background:#fff !important;
    color:var(--sb-split-text) !important;
    box-shadow:0 5px 14px rgba(31,55,88,.09) !important;
    text-shadow:none !important;
}
.sb-store-page .sb-store-nav-button:hover,
.sb-store-page .sb-store-logout:hover,
.sb-store-page .sb-store-pdf-button:hover,
.sb-store-page .sb-store-read-button:hover,
.sb-store-page .sb-store-reply-confirm-button:hover,
.sb-store-page .sb-store-comment-send:hover,
.sb-store-page .sb-store-pwa-slot #sb-pwa-push-button:hover{
    background:#fff !important;
    color:var(--sb-split-text) !important;
    filter:none !important;
    transform:translateY(-1px) !important;
    box-shadow:0 9px 18px rgba(31,55,88,.14) !important;
}

/* 既存の mask アイコンを「左帯＋白アイコン」に変換 */
.sb-store-page .sb-store-nav-button::before,
.sb-store-page .sb-store-logout::before,
.sb-store-page .sb-store-pdf-button::before,
.sb-store-page .sb-store-read-button::before,
.sb-store-page .sb-store-comment-send::before,
.sb-store-page .sb-store-pwa-slot #sb-pwa-push-button::before{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:48px !important;
    height:auto !important;
    margin:0 !important;
    background-color:var(--sb-store-split) !important;
    -webkit-mask-size:20px 20px !important;
    mask-size:20px 20px !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    color:#fff !important;
}
/* mask の色は background-color で決まるため、帯全体を作るため ::before は mask を解除し、SVGを背景画像へ */
.sb-store-page .sb-store-nav-button::before,
.sb-store-page .sb-store-logout::before,
.sb-store-page .sb-store-pdf-button::before,
.sb-store-page .sb-store-read-button::before,
.sb-store-page .sb-store-comment-send::before,
.sb-store-page .sb-store-pwa-slot #sb-pwa-push-button::before{
    -webkit-mask:none !important;
    mask:none !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:20px 20px !important;
}
.sb-store-page .sb-store-month-nav .sb-store-nav-button:nth-of-type(1){--sb-store-split:#348eea;}
.sb-store-page .sb-store-month-nav .sb-store-nav-button:nth-of-type(1)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.sb-store-page .sb-store-month-nav .sb-store-nav-button:nth-of-type(2){--sb-store-split:#348eea;}
.sb-store-page .sb-store-month-nav .sb-store-nav-button:nth-of-type(2)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}
.sb-store-page .sb-store-nav-current{--sb-store-split:#24b2a4 !important;}
.sb-store-page .sb-store-nav-current::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;
}
.sb-store-page .sb-store-logout{--sb-store-split:#ef5564 !important;}
.sb-store-page .sb-store-logout::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3'/%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E") !important;
}
.sb-store-page .sb-store-pdf-button{--sb-store-split:#348eea !important;}
.sb-store-page .sb-store-pdf-button::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h8'/%3E%3C/svg%3E") !important;
}
.sb-store-page .sb-store-pdf-icon{display:none !important;}
.sb-store-page .sb-store-read-button,
.sb-store-page .sb-store-reply-confirm-button{--sb-store-split:#2fb66d !important;}
.sb-store-page .sb-store-read-button::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.6 2.6L16.5 9'/%3E%3C/svg%3E") !important;
}
.sb-store-page .sb-store-reply-confirm-button{
    padding-left:16px !important;
    color:var(--sb-split-text) !important;
}
.sb-store-page .sb-store-reply-confirm-button svg{
    align-self:stretch !important;
    width:44px !important;
    height:46px !important;
    margin:-1px 7px -1px -17px !important;
    padding:12px !important;
    box-sizing:border-box !important;
    background:#2fb66d !important;
    stroke:#fff !important;
}
.sb-store-page .sb-store-comment-send{--sb-store-split:#ff8b2a !important;}
.sb-store-page .sb-store-comment-send::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") !important;
}
.sb-store-page .sb-store-pwa-slot #sb-pwa-push-button{--sb-store-split:#24b2a4 !important;}
.sb-store-page .sb-store-pwa-slot #sb-pwa-push-button::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E") !important;
}

/* =========================================================
   5. 管理者/店舗ログイン
   ========================================================= */
.sb-lg .sb-lg-submit{
    position:relative !important;
    overflow:hidden !important;
    min-height:52px !important;
    padding:0 20px 0 66px !important;
    border:1px solid #dfe7f1 !important;
    border-radius:15px !important;
    background:#fff !important;
    color:var(--sb-split-text) !important;
    box-shadow:var(--sb-split-shadow) !important;
}
.sb-lg .sb-lg-submit::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;width:52px;
    background:#348eea center/21px 21px no-repeat;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5M15 12H3'/%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E");
}
.sb-lg .sb-lg-submit:hover{
    opacity:1 !important;
    background:#fff !important;
    box-shadow:var(--sb-split-shadow-hover) !important;
}

/* =========================================================
   6. スマホ
   ========================================================= */
@media(max-width:700px){
    .sb-am .sb-am-action{
        min-height:92px !important;
        border-radius:16px !important;
        padding-right:42px !important;
    }
    .sb-am .sb-am-action .sb-am-icon{
        flex-basis:68px !important;
        width:68px !important;
        min-height:92px !important;
    }
    .sb-am .sb-am-action .sb-am-icon svg{width:28px !important;height:28px !important;}
    .sb-am .sb-am-action .sb-am-action-text{padding:14px 13px !important;}
    .sb-am .sb-am-action .sb-am-action-title{font-size:20px !important;margin-bottom:4px !important;}
    .sb-am .sb-am-action .sb-am-action-desc{font-size:14px !important;}

    .sb-ui-admin-page .sb-ui-action,
    .sb-af.sb-ui-admin-page .sb-ui-action{
        width:100%;
        min-height:52px !important;
        padding-left:68px !important;
        padding-right:14px !important;
        justify-content:flex-start !important;
    }
    .sb-ui-admin-page .sb-ui-action::before,
    .sb-af.sb-ui-admin-page .sb-ui-action::before{width:52px !important;}
    .sb-ui-admin-page .sb-ui-mini,
    .sb-af.sb-ui-admin-page .sb-ui-mini{
        min-height:46px !important;
        padding-left:54px !important;
    }
    .sb-ui-admin-page .sb-ui-mini::before,
    .sb-af.sb-ui-admin-page .sb-ui-mini::before{width:42px !important;}

    .sb-ui-admin-page .sb-as-action{min-height:72px !important;}
    .sb-ui-admin-page .sb-as-action .sb-as-icon{flex-basis:62px !important;width:62px !important;min-height:72px !important;}
    .sb-ui-admin-page .sb-as-action .sb-as-action-text{padding:11px 12px !important;}

    .sb-store-page .sb-store-nav-button,
    .sb-store-page .sb-store-logout,
    .sb-store-page .sb-store-pdf-button,
    .sb-store-page .sb-store-read-button,
    .sb-store-page .sb-store-comment-send,
    .sb-store-page .sb-store-pwa-slot #sb-pwa-push-button{
        min-height:50px !important;
        padding-left:60px !important;
        padding-right:12px !important;
        border-radius:14px !important;
    }
    .sb-store-page .sb-store-nav-button::before,
    .sb-store-page .sb-store-logout::before,
    .sb-store-page .sb-store-pdf-button::before,
    .sb-store-page .sb-store-read-button::before,
    .sb-store-page .sb-store-comment-send::before,
    .sb-store-page .sb-store-pwa-slot #sb-pwa-push-button::before{width:48px !important;}
}

/* =========================================================
   A20. 外周枠を左側の着色部分と同色に統一
   2pxで視認性を確保しつつ、重すぎない太さに設定。
   ========================================================= */

/* 管理者メニュー */
.sb-am .sb-am-action{
    border:2px solid var(--c) !important;
}

/* 管理者各ページ */
.sb-ui-admin-page .sb-ui-action,
.sb-af.sb-ui-admin-page .sb-ui-action{
    border:2px solid var(--sb-split) !important;
}

/* 管理者設定内の大きなカード型ボタン */
.sb-ui-admin-page .sb-as-action{
    border:2px solid var(--c) !important;
}

/* 通知端末管理ボタン：左アイコン色と外周枠を一致 */
.sb-ui-admin-page .sb-device-action.stop{
    --sb-device-border:#e4a11b;
    border:2px solid var(--sb-device-border) !important;
}
.sb-ui-admin-page .sb-device-action.start{
    --sb-device-border:#24a663;
    border:2px solid var(--sb-device-border) !important;
}
.sb-ui-admin-page .sb-device-action.block{
    --sb-device-border:#d94b4b;
    border:2px solid var(--sb-device-border) !important;
}
.sb-ui-admin-page .sb-device-action.unblock{
    --sb-device-border:#2d7de0;
    border:2px solid var(--sb-device-border) !important;
}
.sb-ui-admin-page .sb-device-label-form button{
    border:2px solid #64738f !important;
}

/* 店舗画面 */
.sb-store-page .sb-store-nav-button,
.sb-store-page .sb-store-logout,
.sb-store-page .sb-store-pdf-button,
.sb-store-page .sb-store-read-button,
.sb-store-page .sb-store-reply-confirm-button,
.sb-store-page .sb-store-comment-send,
.sb-store-page .sb-store-pwa-slot #sb-pwa-push-button{
    border:2px solid var(--sb-store-split) !important;
}

/* ログイン */
.sb-lg .sb-lg-submit{
    border:2px solid #348eea !important;
}