@charset "UTF-8";

/* --- 画面下部の追従ボタン --- */
#sp-sticky-cart-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #fff;
    padding: 10px 15px;
    box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9998;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    max-width: 400px;
    border-radius: 5px 0 0 0;
}
.sticky-btn-inner {
    width: 100%;
    max-width: 700px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.sticky-price-info {
    display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; flex: 1;
}
.sticky-price-label { font-size: 10px; color: #666; margin-bottom: 2px; }
.sticky-price-val {display: flex;align-items: center;gap: 3px;flex-wrap: wrap;}
.s-price {color: #d9534f;font-size: 21px;font-weight: bold;}
.s-discount {
    background: #d9534f;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.discount_rate:empty, .s-discount:empty { display: none !important; }

#sp-sticky-cart-btn button {
    flex: 1;
    max-width: 160px;
    background-color: #AF6565;
    color: #fff;
    border: none;
    padding: 16px 10px;
    font-size: 14px;
    font-weight: normal;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.2s;
}
#sp-sticky-cart-btn button:active, #sp-sticky-cart-btn button:hover { opacity: 0.8; }


/* =========================================
   モーダル全体（フェードアニメーション）
========================================= */
#sp-cart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000001;
    display: flex;
    align-items: center;
    justify-content: center;
    /* デフォルトは透明・非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#sp-cart-modal.is-active {
    /* アクティブ時に表示 */
    opacity: 1; visibility: visible;
}

.modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.modal-inner {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000003;
    box-sizing: border-box;
    /* スライドアニメーションの仕込み */
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
#sp-cart-modal.is-active .modal-inner {
    /* アクティブ時に元の位置へスライド */
    transform: translateY(0);
}

.modal-close {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    font-size: 28px; color: #666; cursor: pointer; line-height: 1; z-index: 10; padding: 5px;
}
.modal-scroll-area {
    overflow-y: auto; padding: 30px 20px 20px; text-align: left;
}

/* --- モーダル内の価格テーブル --- */
.modal-price-box {
    background: #fdfafb;
    border: 1px solid #e8d5d8;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    display: none!important;
}
.modal-price-box table { width: 100%; border-collapse: collapse; margin: 0; }
.modal-price-box th {
    text-align: left; font-weight: normal; font-size: 13px; color: #666;
    padding: 5px 0; vertical-align: top; border: none; background: transparent; width: auto;
}
.modal-price-box td { text-align: right; padding: 5px 0; border: none; background: transparent; }
.modal-price-box .fixed_price_str, .modal-price-box .special_price_str { display: block; line-height: 1.4; }
.modal-price-box .strike { text-decoration: line-through; color: #999; font-size: 14px; }
.modal-price-box .special_price, .modal-price-box .selling_price { color: #d9534f; font-size: 22px; font-weight: bold; }
.modal-price-box .taxin { font-size: 12px; color: #666; margin-left: 4px; }
.modal-price-box .discount_rate {
    display: inline-block; background: #d9534f; color: #fff;
    font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-top: 4px;
}

/* --- 各セクションとフォーム --- */
.modal-section { margin-bottom: 30px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
}
.icon-circle {
    display: inline-block;
    width: 19px;
    height: 19px;
    border: 4px solid #AF6565;
    border-radius: 50%;
    margin-right: 5px;
    box-sizing: border-box;
}
.modal-form-group { margin-bottom: 15px; background: #fff; padding: 0; }
.modal-form-group label { display: block; font-size: 13px; color: #333; margin-bottom: 8px; }
.qty-form-area .modal-form-group label { 
    display: none;
}
.modal-form-group select, .modal-form-group input[type="number"], .modal-form-group input[type="text"] {
    width: 100%;
    background-color: #F3F1EF;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 11px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.modal-form-group select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.41%200L6%204.58%2010.59%200%2012%201.41l-6%206-6-6z%22%20fill%3D%22%23999%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    height: auto;
}
.modal-form-group select:focus, .modal-form-group input:focus { outline: none; border-color: #a36b6f; }

/* 数量＋－ボタン */
.qty-wrapper { display: flex; align-items: center; }
.qty-btn {
    width: 44px;
    height: 44px;
    background: #F3F1EF;
    border: none;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}
.qty-btn:active { background: #e5e5e5; }
.qty-wrapper input[name="CNT-1"] { flex: 1; margin: 0 10px; text-align: center; }

/* モーダル下部（合計金額＆カートボタン） */
.modal-footer {
    padding: 10px 20px 20px;
    background: #F3F1EF;
    border-top: 1px solid hsl(30 14% 85% / 1);
    /* box-shadow: 0 -2px 5px rgba(0,0,0,0.02); */
}
.modal-total-price {
    text-align: center;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}
.modal-total-price .total-num {color: #d9534f;font-size: 20px;margin: 0 4px;}
.modal-total-price .taxin { font-size: 11px; color: #666; font-weight: normal; }
#sp-modal-submit {
    width: 100%;
    background-color: #af6565;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
#sp-modal-submit:active, #sp-modal-submit:hover { opacity: 0.8; }
.cart-icon { margin-right: 8px; }

@media screen and (max-width:768px){

/* --- 画面下部の追従ボタン --- */
#sp-sticky-cart-btn {
    position: fixed;
    bottom: 57px;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10px 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9998;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    max-width: 100%;
    border-radius: 0;
}
.sticky-btn-inner {
    width: 100%;
    max-width: 700px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.sticky-price-info {
    display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; flex: 1;
}
.sticky-price-label { font-size: 10px; color: #666; margin-bottom: 2px; }
.sticky-price-val { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.s-price { color: #d9534f; font-size: 20px; font-weight: bold; }
.s-discount {
    background: #d9534f; color: #fff; font-size: 11px;
    padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.discount_rate:empty, .s-discount:empty { display: none !important; }

#sp-sticky-cart-btn button {
    flex: 1;
    max-width: 300px;
    background-color: #AF6565;
    color: #fff;
    border: none;
    padding: 16px 10px;
    font-size: 14px;
    font-weight: normal;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.2s;
}
#sp-sticky-cart-btn button:active, #sp-sticky-cart-btn button:hover { opacity: 0.8; }


/* =========================================
   モーダル全体（フェードアニメーション）
========================================= */
#sp-cart-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000001;
    display: flex;
    align-items: center;
    justify-content: center;
    /* デフォルトは透明・非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#sp-cart-modal.is-active {
    /* アクティブ時に表示 */
    opacity: 1; visibility: visible;
}

.modal-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.modal-inner {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* z-index: 10000; */
    box-sizing: border-box;
    /* スライドアニメーションの仕込み */
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
#sp-cart-modal.is-active .modal-inner {
    /* アクティブ時に元の位置へスライド */
    transform: translateY(0);
}

.modal-close {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    font-size: 28px; color: #666; cursor: pointer; line-height: 1; z-index: 10; padding: 5px;
}
.modal-scroll-area {
    overflow-y: auto; padding: 30px 20px 20px; text-align: left;
}

/* --- モーダル内の価格テーブル --- */
.modal-price-box {
    background: #fdfafb;
    border: 1px solid #e8d5d8;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    display: none!important;
}
.modal-price-box table { width: 100%; border-collapse: collapse; margin: 0; }
.modal-price-box th {
    text-align: left; font-weight: normal; font-size: 13px; color: #666;
    padding: 5px 0; vertical-align: top; border: none; background: transparent; width: auto;
}
.modal-price-box td { text-align: right; padding: 5px 0; border: none; background: transparent; }
.modal-price-box .fixed_price_str, .modal-price-box .special_price_str { display: block; line-height: 1.4; }
.modal-price-box .strike { text-decoration: line-through; color: #999; font-size: 14px; }
.modal-price-box .special_price, .modal-price-box .selling_price { color: #d9534f; font-size: 22px; font-weight: bold; }
.modal-price-box .taxin { font-size: 12px; color: #666; margin-left: 4px; }
.modal-price-box .discount_rate {
    display: inline-block; background: #d9534f; color: #fff;
    font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-top: 4px;
}

/* --- 各セクションとフォーム --- */
.modal-section { margin-bottom: 30px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
}
.icon-circle {
    display: inline-block;
    width: 19px;
    height: 19px;
    border: 4px solid #AF6565;
    border-radius: 50%;
    margin-right: 5px;
    box-sizing: border-box;
}
.modal-form-group { margin-bottom: 15px; background: #fff; padding: 0; }
.modal-form-group label { display: block; font-size: 13px; color: #333; margin-bottom: 8px; }
.qty-form-area .modal-form-group label { 
    display: none;
}
.modal-form-group select, .modal-form-group input[type="number"], .modal-form-group input[type="text"] {
    width: 100%;
    background-color: #F3F1EF;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 11px;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.modal-form-group select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.41%200L6%204.58%2010.59%200%2012%201.41l-6%206-6-6z%22%20fill%3D%22%23999%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    height: auto;
}
.modal-form-group select:focus, .modal-form-group input:focus { outline: none; border-color: #a36b6f; }

/* 数量＋－ボタン */
.qty-wrapper { display: flex; align-items: center; }
.qty-btn {
    width: 44px;
    height: 44px;
    background: #F3F1EF;
    border: none;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}
.qty-btn:active { background: #e5e5e5; }
.qty-wrapper input[name="CNT-1"] { flex: 1; margin: 0 10px; text-align: center; }

/* モーダル下部（合計金額＆カートボタン） */
.modal-footer {
    padding: 10px 20px 20px;
    background: #F3F1EF;
    border-top: 1px solid hsl(30 14% 85% / 1);
    /* box-shadow: 0 -2px 5px rgba(0,0,0,0.02); */
}
.modal-total-price {
    text-align: center;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}
.modal-total-price .total-num {color: #d9534f;font-size: 20px;margin: 0 4px;}
.modal-total-price .taxin { font-size: 11px; color: #666; font-weight: normal; }
#sp-modal-submit {
    width: 100%;
    background-color: #af6565;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
#sp-modal-submit:active, #sp-modal-submit:hover { opacity: 0.8; }
.cart-icon { margin-right: 8px; }
    
}