@charset "UTF-8";

button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .footer_menu_list.isSP {
        display: none !important;
    }
}

/* 非アクティブクラス実装 */
.footer_menu_list.not_active {
    opacity: 0.3;
    cursor: not-allowed;
}

/* CSSでは数を出さないように */
.indication::before {
    content: "";
}

/* indeterminate状態（ハイフンマークみたいな見た目に） */
input[type="checkbox"]:indeterminate {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 4px;
    width: 11px;
    height: 3px;
    background-color: white;
    display: block;
    transform: none;
    border: none;
}

/* 自動補完の背景色変更 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
    background-color: #FDF2EA !important;
    -webkit-box-shadow: 0 0 0px 1000px #FDF2EA inset !important;
    -webkit-text-fill-color: #000 !important;
}

/* オートコンプリートのCSS */
#autocomplete-list {
    position: absolute;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 325px;
    overflow-y: auto;
    left: auto;
    z-index: 1000;
    top: var(--header-height);
}

.autocomplete-item {
    padding: 8px;
    cursor: pointer;
}

.autocomplete-item.active {
    background-color: #007BFF;
    color: white;
}

.autocomplete-item:hover {
    background-color: #eee;
}

/* 住所リストに追加 */
.add-address-list:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

/* バリデーションのメッセージ */
.validation-message {
    color: #FFF;
    font-size: 0.9rem;
    background-color: #dc2626;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 12px;
    border-radius: 30px;
}

.form_purchase label.label_no_margin {
    margin: 0;
}

/* サブカテゴリー用 */
.dropdown-menu li.category-group-label {
    background-color: #f9f9f9;
    cursor: default;
    pointer-events: none;
    color: #333;
}

.dropdown-menu li.category-grouped {
    padding-left: 30px;
    font-size: 0.95rem;
    color: var(--secondary-color);
}

.select-category optgroup {
    font-weight: bold;
    color: #333;
    background-color: #f2f2f2;
}

.select-category option {
    padding-left: 10px;
}

.select-category optgroup option {
    padding-left: 30px;
}

/* 注文のクレジットカード用 */
.List_PayMethod .zeus_card_type_select {
    margin-bottom: 1rem;
}

/* 注文のクレジットカード用：ラジオを縦並びに */
.List_PayMethod .zeus_card_type_select label {
    display: block !important;
    /* 横並び打ち消し */
    margin-bottom: 0.5rem;
    margin-right: 0 !important;
    /* 右マージンもリセット */
    cursor: pointer;
    font-size: 1.2rem;
}

.List_PayMethod .zeus_card_type_select label input[type="radio"] {
    width: auto;
}

/* 絞り込みのボタンのホバーアクション */
.filter_item .filter_option a {
    cursor: default;
    /* 通常時 */
    /* transition: background-color 0.2s ease; */
}

.filter_item .filter_option a:hover {
    cursor: pointer;
}

.filter_item .filter_option .disabled-option {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

.spotlight::after {
    content: "スポットライト";
}

.downlight::after {
    content: "ダウンライト";
}

.baselight::after {
    content: "ベースライト";
}

.exterior::after {
    content: "エクステリア";
}

.bracket::after {
    content: "ブランケット";
}

.pendant::after {
    content: "ペンダント";
}

.ceiling::after {
    content: "シーリング";
}

.ceilingfan::after {
    content: "シーリングファン";
}

.ceilingSmall::after {
    content: "小型シーリング";
}

.kitchen::after {
    content: "キッチンライト";
}

.indirect::after {
    content: "間接照明";
}

.chandelier::after {
    content: "シャンデリア";
}

.led::after {
    content: "LED電球・ランプ";
}

.bathroom::after {
    content: "トイレ・浴室・洗面所";
}

.emergency::after {
    content: "非常・誘導・防犯灯";
}

.rail::after {
    content: "配線ダクトレール";
}

.step::after {
    content: "フットライト";
}

.standlight::after {
    content: "スタンドライト";
}

.deskStand::after {
    content: "デスクスタンド";
}

.illumination::after {
    content: "イルミネーション";
}

.remote::after {
    content: "リモコン";
}

.dimmer::after {
    content: "調光器";
}

.option::after {
    content: "オプション";
}

.fan::after {
    content: "換気扇";
}

.ac::after {
    content: "エアコン";
}

.detector::after {
    content: "火災報知機・煙探知機";
}

.airPurifiers::after {
    content: "空気清浄機";
}

.doorphone::after {
    content: "インターホン・ドアホン";
}

/* トースト通知 */
.Toast_Message {
    left: -50%;
    transition: left 0.5s ease;
}

.Toast_Message.active {
    left: 50%;
}


/* ========== スマホ 480px以上 ========== */
@media (min-width: 480px) {
    .Toast_Message.active {
        left: 5%;
    }
}

/* ========== デスクトップ 1600px以上 ========== */
@media (min-width: 1600px) {
    .Toast_Message.active {
        left: 3%;
    }
}

/* 色上書き */
#keyword:valid {
    color: #000;
}

/* セレクトボックスの選択色 */
select.changed {
    background-color: #FDF2EA !important;
}

/* 商品がないCSS */
.no-items {
    padding: 30px 20px 60px;
    font-size: 1.2rem;
    text-align: center;
    color: #666;
}

/* タブレット（768px以上） */
@media (min-width: 768px) {
    .no-items {
        padding: 0px 30px 90px;
    }

    .OrderedProduct figure {
        width: auto;
    }
}

/* PC（1024px～） */
@media (min-width: 1024px) {
    .no-items {
        padding: 0;
    }
}


/* 共通のオートコンプリートリスト */
.autocomplete-list {
    display: none;
    position: absolute;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

/* 候補アイテム */
.autocomplete-item {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.autocomplete-item:hover {
    background-color: #f0f0f0;
}

.autocomplete-item.active {
    background-color: #007BFF;
    color: white;
}

/* 数字入力欄 */
.quantity-value {
    padding: 0 !important;
    border: none !important;
    appearance: textfield !important;
    background-color: #fff !important;
}

/* スピンボタンを消す（Chrome・Safari） */
.quantity-value::-webkit-inner-spin-button,
.quantity-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 画面全体のオーバーレイ＋スピナー */
.facet-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
}

body.is-facet-loading .facet-overlay {
    display: flex;
}

.facet-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #c9c9c9;
    border-right-color: transparent;
    animation: facet-spin 0.8s linear infinite;
}

@keyframes facet-spin {
    to {
        transform: rotate(360deg);
    }
}

/* モーダル内の操作を一時無効化＆薄くする */
body.is-facet-loading #modal-Filter .filter_item {
    opacity: .6;
    pointer-events: none;
}

body.is-facet-loading {
    cursor: progress;
}

/* タイトル横の小型スピナー（お好みで） */
#modal-Filter .facet-inline-spinner {
    display: none;
    margin-left: .5em;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: facet-spin .7s linear infinite;
}

body.is-facet-loading #modal-Filter .facet-inline-spinner {
    display: inline-block;
}

/* 新しいカード入力フォーム専用 */
.form_NewCardArea {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
}

/* ラベルと入力欄 */
.form_NewCardArea label {
    display: none;
}

/* テキスト・電話・セレクト共通 */
.form_NewCardArea input[type="text"],
.form_NewCardArea input[type="tel"],
.form_NewCardArea select {
    width: 100%;
}

/* 有効期限 + CVV 横並び */
.form_NewCardArea .AddCard_row {
    display: flex;
    gap: 1rem;
}

.form_NewCardArea .AddCard_col {
    flex: 1;
}

/* サブ画像の時だけ、flex-startに */
.item_pic_common.subImage {
    align-items: start;
}

/* 横長の時は別のクラスに */
.item_pic_common.is-tate img {
    width: auto;
    height: 100%;
}

@media (max-width: 767px) {
    .wrapper_OrderedProduct.last-item {
        margin-right: 20px;
    }
}

.product_cart .item_pic_common.is-tate img,
.product_estimate .item_pic_common.is-tate img,
.product_order .item_pic_common.is-tate img {
    max-height: 100px;
}

@media (max-width: 767px) {

    .product_cart .item_pic_common.is-tate img,
    .product_estimate .item_pic_common.is-tate img,
    .product_order .item_pic_common.is-tate img {
        max-height: 80px;
    }
}