.bg-menu {
    background-color: #EF8378 !important;
}
/* 「確認画面に進む」等の.bg-menuボタン: タップ(押下)時に色が変わらず反応が分かりにくいため、
   .btn-secondaryのhover/active実装に倣い、押下中は色を暗くする */
.bg-menu:hover {
    background-color: #E07469 !important;
    border-color: #E07469 !important;
}
.btn-check:checked + .bg-menu,
.btn-check:active + .bg-menu,
.bg-menu:active,
.bg-menu.active {
    background-color: #D66658 !important;
    border-color: #D66658 !important;
}

/* 新規物品仮受注ページ: 削除ボタン(既存btn-outline-dangerのホバー色を常時適用) */
.btn-remove-row {
    margin-top: 3px;
    background-color: #e6381a !important;
    border-color: #e6381a !important;
    color: #fff !important;
}

/* 新規物品仮受注ページ: 入力行を追加ボタン(受注詳細ページ等のbtn-successと同色に統一) */
.btn-add-row {
    background-color: #6AA951 !important;
    border-color: #6AA951 !important;
    color: #fff !important;
}

/* 新規物品仮受注ページ: 販売単価の入力欄(スマホ表示時は「円」と同じ行に収まるよう2/3ほどに短縮) */
@media (max-width: 767px) {
    .sale-price-input {
        width: 66%;
        max-width: 66%;
    }
}

.bg-pink {
    background-color: #FFEAEA !important;
}

input[type="time"] {
    position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* SPD側(public/css/style.css)の.droparea相当。物品画像登録の画像選択欄で使用。
   ネイティブの<input type="file">はシャドウDOM内の「参照」ボタン+ファイル名表示の最小幅がコンテナ幅を無視するため、
   スマホ幅ではコンテナからはみ出して見切れる。SPD同様、inputは非表示にしてdivのドロップエリア+参照ボタンに置き換えることで解消する。 */
.droparea {
    height:100%;
    color:#92AAB0;
    vertical-align:middle;
    padding: 20px 20px;
    margin-bottom:10px;
    word-wrap: break-word;
    word-break: break-all;
}

/* ローディング中 */
.spinner {
    margin-top: 45vh;
    margin-left: 45vw;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #333;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

#loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: rgb(254,239,216,0.9);
    z-index: 99999;
}

/* ローディング後は非表示 */
#loader.loaded {
    display: none;
}

/*渡辺追加CSS*/
/* タイトル */
.card h4 {
    font-weight: bold;
}

/* 物品一覧: ヘッダーの操作ボタン（受注一覧に進む／新しい物品を受注する／カート）を
   スマホでも横スクロールなしの1列に収めるため、文字サイズを縮小し折り返しを許可する */
.header-action-btn {
    font-size: 0.75rem;
    white-space: normal;
}
@media (min-width: 768px) {
    .header-action-btn {
        font-size: inherit;
        white-space: nowrap;
    }
}

/* 受注詳細・仮受注詳細・受注確定ページのヘッダーボタン行: ボタン数・文言が多く、
   .header-action-btnの折り返し許可(white-space: normal)のままだとスマホ幅でボタン内の
   文字が折り返されて見た目が崩れるため、折り返しを禁止し、代わりに収まりきらない分は
   行ごと横スクロールできるようにする（他画面のheader-action-btn使用箇所には影響させない） */
.header-action-btn-row {
    overflow-x: auto;
}
.header-action-btn-row .header-action-btn {
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* 物品一覧 */
.list-selecter .btn-group label.btn{
    padding: 2px 0px;
    font-size: clamp(13px,2.5vw,14px);
    border-radius: 5px !important;
    border: none;
    margin-right: 4px;
    color: #333 !important;
    box-shadow: none !important;
}
.list-selecter .btn-check:checked+.btn-gray {
    color: #fff !important;
    background-color: #38761C !important;
    border-color: #38761C !important;
}
.list-selecter .form-select {
    color: #1a1a1a;
    background-color: #f0f2f4;
    padding: 5px 25px 5px 12px;
    height: 35px;
    font-size: 15px;
    border-radius: 3px !important;
    border: none;
}
/* ディーラー別発注履歴集計 などタイトル個別CSS */
.nav-pills .nav-link.active.text-primary {
    color: #f15a24;
}

/* デスクトップで横幅広めに表示した時用 */
@media (min-width: 1580px) {
    .col-xxxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}
/* BSではオーダーが5までしかないので追加 */
.order-6 {
    order: 6 !important;
}

.order-7 {
    order: 7 !important;
}

.order-8 {
    order: 8 !important;
}
/* BS5.3ではz-indexない？ので追加 */
.z-1 {
    z-index: 1;
}
.z-2 {
    z-index: 2;
}
.z-3 {
    z-index: 3;
}
.z-4 {
    z-index: 4;
}
.z-5 {
    z-index: 5;
}
/* カード内 画像登録ボタン */
.card .add-img {
    top: -10px !important;
    height: 25px;
    width: 25px;
    transition: 0.5s;
}
.card .add-img:hover {
    color: white !important;
    background-color: #f15a24 !important;
}

/* SPD側と同じ見た目にするための定義。vendor/css/core.cssのbootstrapバージョン差で
   .border-dashedがborder-style（幅・色未指定）のみ、.border-top-dashedが未定義のため、
   SPD側(public/css/bootstrap-5.1.3.css)の値に合わせて上書きする。 */
.border-dashed {
    border: 1px dashed #808080 !important;
}
.border-top-dashed {
    border-top: 1px dashed #808080 !important;
}

/* 欠品・販売停止中のとき（カート追加ボタンはbtn-primary/btn-dangerいずれも使われ得るため両対応） */
.btn:disabled.btn-primary,
.btn:disabled.btn-danger {
    background-color: gray;
    border-color: gray;
    opacity: 0.5;
}

/* テーマの button リセットが不足している分の装飾をSPD側同様に除去（枠線・背景・パディング） */
button.more-icon {
    padding: 0;
    border: none;
    background-color: transparent;
}
/* テーマの .accordion-item にはテキスト色指定があり、カード内の他のテキストと色が変わってしまうため打ち消す */
.sp.card .accordion-item {
    color: inherit;
}
/* テーマの --bs-accordion-bg(白)がアコーディオン開閉部に効いてカードの背景と食い違うため、明示的に打ち消す */
.sp.card .accordion-item,
.sp.card .accordion-collapse,
.sp.card .accordion-body {
    background-color: transparent !important;
}
/* main.jsが開閉時に付与する .active クラスにテーマの box-shadow が反応し、色は同じでも浮き上がって見えるため打ち消す */
.sp.card .accordion-item.active {
    box-shadow: none;
}
button.more-icon::after{
    content: "\3082\3063\3068\898B\308B\a0\FF0B"; /* ←Unicode変換 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: fit-content;
    font-size: 70% !important;
    color: #1a1a1a;
    text-align: center;
    margin: auto;
    background-color: #f2f2f2;
    padding: 2px 6px;
    transition: 0.5s;
}
button.more-icon.show::after{
    content: "\3068\3058\308B\a0\2212"; /* ←Unicode変換 */
}
@media (max-width: 767px) {
    button.more-icon::after{
        background-color: #fff;
    }
}

/* SP版のカードの背景 */
.total-amount {
    border-top: 1px dashed #808080;
    padding-top: 1em;
}
/* labelのverticalを揃えたい(物品一覧の検索フォーム内に限定) */
#form label {
    display: inline-flex;
}
#form label input{
    margin-right: 5px;
    margin-left: 2px;
}
.btn-icon.btn-sm {
    width: 1.5rem;
    height: 1.5rem;
}
/* 物品カードの背景色（spd側と統一。テーマの --bs-light がほぼ白のため bg-light では反映されない） */
.sp.card.bg-light {
    background-color: #f2f2f2 !important;
}
/*入力フォームの横幅揃えたい*/
.sp.card .form-control {
    width: 100%;
    min-width: 50px;
    max-width: 140px;
    border-radius: 0.25em;
}
/* 受注確定入力: 品名・物品コードは分類のセレクトボックス(.form-select)と同じ幅に揃える(140px制限を除外) */
.sp.card .form-control.form-control-wide {
    max-width: none;
}
/* 受注確定入力: 入数・入数単位・個数単位の入力欄で、値を入力するとブラウザのオートコンプリート候補一致により
   背景色が白→グレーに変化してしまう問題への対応(ヘッダー検索フォームと同じ対応方針)。
   .sp.cardは他画面(カート・物品カード等)でも使われるため、対象をこの3項目に限定する。 */
.no-autofill-bg:-webkit-autofill,
.no-autofill-bg:-webkit-autofill:hover,
.no-autofill-bg:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #333 !important;
}
@media (max-width: 767px) {
    /* SPD側の「カードを透明化し::beforeの横バーだけを見せてカードの区切りに
       見せかける」仕組みは、SPD側の物品カードがそもそも::beforeの横バーを
       区切りの主役として設計されているために機能している。
       ディーラー側の物品カードは画像・価格・ボタン等を持つ実体のあるカードであり、
       区切りは各カード自身の背景色(#f2f2f2)とmb-2 mb-lg-4の外側マージンだけで
       十分に表現できる。同じ仕組みを持ち込むと、実体のあるカードを不必要に透明化して
       上部に60pxの空白を作ってしまい、カードが途中で途切れて見える原因になっていたため
       廃止する。将来、SPD同様のステータスラベル（販売停止中／欠品中 等）を実装する際は、
       実際のラベルの見た目を見ながら改めてこの区切り方を検討する。 */
    /*.col-md-6.col-lg-4.ps-2.pe-2:last-child .sp.card.bg-light {
        padding-bottom:40px !important;
    }*/
    /* カートページ、物品の区切り */
    .cardtype-list24 .col-md-6.col-lg-4.ps-2.pe-2:nth-child(2) .sp.card.bg-light:before {
        display: none;
    }
    .cardtype-list24 .col-md-6.col-lg-4.ps-2.pe-2:nth-child(2) .sp.card.bg-light {
        padding: 30px 0 0 !important;
    }
    .page014 .cardtype-list24 .col-md-6.col-lg-4.ps-2.pe-2:nth-child(2) .sp.card.bg-light:before {
        display: block;
    }
    .page014 .cardtype-list24 .col-md-6.col-lg-4.ps-2.pe-2:nth-child(2) .sp.card.bg-light {
        padding: 60px 0 0 !important;
    }
    .total-amount {
        padding-top: 80px;
        border: none;
    }
    .total-amount:before {
        content: "";
        position: absolute;
        top: 20px;
        height: 40px;
        width: 100vw;
        margin: 0 calc(50% - 50vw);
        background-color: #F5F5F9;
        z-index: 1;
    }
    .m-retail-price-card-list .sp.card.bg-light {
        padding: 0 !important;
        background-color: #feefd8 !important;
        border-radius: 0.5rem;
    }
    .m-retail-price-card-list .sp.card.bg-light:before {
        display: none;
    }
}

/* SPD側(bootstrap-5.1.3.css)の.p-sp-1/.w-sp-100相当。カート完了画面のボタンサイズをスマホ幅で統一するために必要
   (dealer側のBootstrapビルドにはこのユーティリティが無く、未定義のままだとボタン幅が文言の長さでバラつく) */
@media (max-width: 576px) {
    .p-sp-1 {
        padding: 0.25rem !important;
    }
    .w-sp-100 {
        width: 100% !important;
    }
}

/* SPD側(bootstrap-5.1.3.css)の.table基本スタイル相当。dealer側の.tableは--bs-body-color(#697a8d、灰色がかった
   薄い色)を継承するため、SPD側(--bs-table-striped-color/--bs-table-striped-bg共に#1a1a1a寄りの濃い色・地色#f2f2f2)
   と比べて文字・縞模様の背景が薄く見える。物品画像登録・編集の物品情報テーブルにのみ限定して適用し、他画面の
   テーブル配色には影響させない。 */
.spd-color-table {
    color: #1a1a1a;
    /* --bs-table-color(縞模様が付かない偶数行が使う既定色)。--bs-table-striped-colorのみでは奇数行にしか
       効かず、偶数行(例: 物品画像登録の「画像ファイル」行)だけ元の薄い色(--bs-body-color)が残ってしまうため必須 */
    --bs-table-color: #1a1a1a;
    --bs-table-striped-color: #1a1a1a;
    --bs-table-striped-bg: #f2f2f2;
}

/* SPD側(bootstrap-5.1.3.css)の.table-cell-block相当。ディーラーカートの発注情報テーブルで、
   モバイル幅ではラベルと入力欄(セレクトボックス等)を縦に並べるために必要
   (dealer側のBootstrapビルドにはこのユーティリティが無く、未定義のままだとth/tdが横並びのままになる) */
@media (max-width: 767.98px) {
    /* SPD側には無い追加対応。th/tdをdisplay:blockにしても<table>自体はtable-layout:autoのまま幅を内容
       (物品画像登録確認の画像プレビュー枠など)に合わせて広げてしまい、カード幅からはみ出して右にずれて
       見える問題があったため、tableをtable-layout:fixed・幅100%に固定して防止する。
       .table-cell-blockは受注確認・物品一括登録等、他画面のテーブルでも共用されているため、影響範囲を
       物品画像登録・編集のテーブル(.spd-color-tableも付与済み)のみに限定する。 */
    .table-cell-block.spd-color-table {
        width: 100%;
        table-layout: fixed;
    }
    .table-cell-block th,
    .table-cell-block td {
        width: 100%;
        display: block;
    }
}

/* 仮受注詳細・受注詳細・受注確定ページの受注基本情報テーブル: table-layout:autoのままだと
   項目名(法人名/クリニック名/受注日時/受注ステータス/受注ID)の列が必要以上に広がり、値の開始位置が
   項目名から離れすぎて見えるため、デスクトップ幅では項目名列を固定幅にして値を項目名の直後に詰める */
@media (min-width: 768px) {
    .order-info-table {
        table-layout: fixed;
    }
    .order-info-table td:first-child {
        width: 200px;
    }
}

/* Bootstrap標準の.min-w-0相当(dealer側のビルドには無い)。flexアイテムのデフォルトmin-width:auto(内容依存)を
   打ち消すために必要。受注一覧の受注年月日(自)/(至)入力は.d-flexの中で並んでいるが、min-width指定が無いと
   input要素の内容依存の最小幅がそのまま確保され、スマホ幅ではみ出してレイアウトが崩れる。 */
.min-w-0 {
    min-width: 0;
}

/* 受注一覧のCSV出力行専用。モバイル幅ではテキスト・セレクト・実行ボタンを縦に並べ、それぞれ幅いっぱいに広げる
   (デスクトップは既存のまま横並び・右詰め)。 */
@media (max-width: 767.98px) {
    .csv-export-row {
        flex-direction: column;
        align-items: stretch !important;
    }
    .csv-export-row > * {
        width: 100%;
        margin: 0 0 0.5rem 0 !important;
    }
    .csv-export-row > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* ディーラーカート(入力/確認/完了)専用。page-auth.cssの.authentication-wrapperはmin-height:100vhを
   持つが、これはSPD側のようにヘッダー等を持たない単独ログイン画面向けの値。dealer側はヘッダー付きの
   サイドバーレイアウト(parts/app.blade.php)にこのカードを組み込むため、100vh分をそのまま乗せると
   ヘッダーの高さの分だけビューポートを超えてしまい、内容が短い「カートが空です」「受注完了」画面で
   不要な縦スクロールが発生してしまう。デスクトップ・モバイルいずれでもこの高さ強制だけは打ち消す。 */
.dealer-cart-wrapper {
    min-height: auto !important;
}

/* モバイル表示時のみ、SPD同様に画面中央に表示する。height:100%で親(.flex-grow-1がすでに
   .content-wrapperのflexコンテキスト内で残り高さいっぱいに伸びている)の高さぶんだけ広げることで、
   .authentication-wrapper自身が持つalign-items:center/justify-content:centerで
   中の白カードが画面中央に表示される(内容が長い場合は通常通り伸びるためスクロールは発生しない)。
   PC表示時はheight:100%を適用せず、現状通り上詰めのままとする。 */
@media (max-width: 767.98px) {
    .dealer-cart-wrapper {
        height: 100%;
    }
}

.header-search-form-width {
    width: 60vw;
}

.header-search-form-padding-left {
    padding-left: 42px;
}

/* ヘッダー検索フォーム オートコンプリート時の背景色上書き */
.header-search-form-width input:-webkit-autofill,
.header-search-form-width input:-webkit-autofill:hover,
.header-search-form-width input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #333 !important;
}

@media (min-width: 1200px) {
    .header-search-form-width {
        width: 42vw;
    }

    .header-search-form-padding-left {
        padding-left: 20px;
    }
}