@charset "UTF-8";
/* ============================================
   custom_shopping.css
   ご注文手続き・確認・完了ページ
============================================ */

/* ============================================
   1. ページレイアウト
============================================ */
.ec-orderRole {
    max-width: 1100px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 0 0 80px !important;
    display: flex !important;
    gap: 40px !important;
}

.ec-orderRole__detail {
    flex: 1 !important;
    min-width: 0 !important;
}

.ec-orderRole__summary {
    width: 320px !important;
    flex-shrink: 0 !important;
}

/* ページタイトル */
.ec-role .ec-pageHeader h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
    text-align: center !important;
    border-bottom: 2px solid #23AC38 !important;
    padding-bottom: 16px !important;
    margin-bottom: 32px !important;
}

/* ============================================
   2. セクション見出し
============================================ */
.ec-rectHeading {
    background: #f8f8f8 !important;
    border-left: 4px solid #23AC38 !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
}

.ec-rectHeading h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 !important;
}

/* ============================================
   3. お客様情報
============================================ */
.ec-orderAccount {
    margin-bottom: 32px !important;
}

.ec-orderAccount__account {
    padding: 20px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    line-height: 1.8 !important;
}

.ec-orderAccount__account p {
    margin: 4px 0 !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* ============================================
   4. 配送情報
============================================ */
.ec-orderDelivery {
    margin-bottom: 32px !important;
}

.ec-orderDelivery__title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    margin-bottom: 16px !important;
}

.ec-orderDelivery__change .ec-inlineBtn {
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666 !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-orderDelivery__change .ec-inlineBtn:hover {
    border-color: #23AC38 !important;
    color: #23AC38 !important;
}

/* 商品リスト */
.ec-orderDelivery__item {
    margin-bottom: 20px !important;
}

.ec-borderedList {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ec-borderedList li {
    padding: 16px 0 !important;
    border-bottom: 1px dashed #e0e0e0 !important;
}

.ec-borderedList li:last-child {
    border-bottom: none !important;
}

.ec-imageGrid {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
}

.ec-imageGrid__img {
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0 !important;
}

.ec-imageGrid__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

.ec-imageGrid__content {
    flex: 1 !important;
    min-width: 0 !important;
}

.ec-imageGrid__content p {
    margin: 4px 0 !important;
    font-size: 14px !important;
    color: #333 !important;
}

.ec-imageGrid__content p span {
    margin-left: 16px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
}

/* お届け先住所 */
.ec-orderDelivery__address {
    padding: 16px 20px !important;
    background: #f8f8f8 !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
}

.ec-orderDelivery__address p {
    margin: 4px 0 !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* 配送方法セレクト */
.ec-orderDelivery__actions {
    margin-bottom: 20px !important;
}

.ec-selects {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.ec-select {
    flex: 1 !important;
    min-width: 150px !important;
}

.ec-select label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 6px !important;
}

.ec-select select {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer !important;
}

.ec-select select:focus {
    border-color: #23AC38 !important;
    outline: none !important;
}

/* お届け先追加ボタン */
.ec-orderDelivery__edit {
    text-align: right !important;
}

.ec-orderDelivery__edit .ec-inlineBtn {
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    background: #fff !important;
    border: 2px solid #23AC38 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-orderDelivery__edit .ec-inlineBtn:hover {
    background: #23AC38 !important;
    color: #fff !important;
}

/* ============================================
   5. お支払方法
============================================ */
.ec-orderPayment {
    margin-bottom: 32px !important;
}

.ec-orderPayment .ec-radio {
    padding: 16px 20px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
}

.ec-orderPayment .ec-radio > div {
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.ec-orderPayment .ec-radio > div:last-child {
    border-bottom: none !important;
}

.ec-orderPayment .ec-radio label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer !important;
}

.ec-orderPayment .ec-radio input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #23AC38 !important;
}

/* Stripe決済エリア */
#stripe-payment-block {
    margin-top: 20px !important;
    padding: 20px !important;
    background: #f8f8f8 !important;
    border-radius: 8px !important;
}

#stripe-payment-block .ec-rectHeading {
    background: transparent !important;
    border-left: none !important;
    padding: 0 0 12px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* ============================================
   6. クーポン・ポイント
============================================ */
.ec-orderCoupon {
    margin-bottom: 32px !important;
}

.ec-orderCoupon #customer_detail_box {
    padding: 16px 20px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #666 !important;
}

.ec-orderCoupon .ec-inlineBtn {
    margin-top: 12px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    background: #fff !important;
    border: 2px solid #23AC38 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.ec-orderCoupon .ec-inlineBtn:hover {
    background: #23AC38 !important;
    color: #fff !important;
}

/* ポイント入力 */
.ec-orderPayment .ec-input input[type="number"] {
    width: 120px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    text-align: center !important;
}

.ec-orderPayment .ec-input input[type="number"]:focus {
    border-color: #23AC38 !important;
    outline: none !important;
}

/* ============================================
   7. お問い合わせ
============================================ */
.ec-orderConfirm {
    margin-bottom: 32px !important;
}

.ec-orderConfirm textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    resize: vertical !important;
    min-height: 120px !important;
}

.ec-orderConfirm textarea:focus {
    border-color: #23AC38 !important;
    outline: none !important;
}

/* ============================================
   8. 合計ボックス（右サイドバー）
============================================ */
.ec-totalBox {
    position: sticky !important;
    top: 20px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.ec-totalBox__spec {
    display: flex !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    color: #666 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.ec-totalBox__spec:last-of-type {
    border-bottom: none !important;
}

.ec-totalBox__spec dt {
    font-weight: 500 !important;
}

.ec-totalBox__spec dd {
    font-weight: 600 !important;
    color: #333 !important;
}

.ec-totalBox__total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    margin-top: 12px !important;
    border-top: 2px solid #23AC38 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.ec-totalBox__price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-left: 8px !important;
}

.ec-totalBox__taxLabel {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #999 !important;
    margin-left: 4px !important;
}

.ec-totalBox__paymentTotal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
    background: linear-gradient(135deg, #f8fdf9 0%, #fff 100%) !important;
    border: 2px solid #23AC38 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.ec-totalBox__paymentTotal .ec-totalBox__price {
    color: #23AC38 !important;
}

.ec-totalBox__taxRate {
    font-size: 12px !important;
    color: #999 !important;
    padding: 8px 0 !important;
}

.ec-totalBox__taxRate dt,
.ec-totalBox__taxRate dd {
    display: inline !important;
}

/* ポイントブロック */
.ec-totalBox__pointBlock {
    padding: 12px 0 !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: 12px !important;
}

.ec-totalBox__pointBlock .ec-totalBox__spec {
    border-bottom: none !important;
    padding: 6px 0 !important;
}

/* ボタンエリア */
.ec-totalBox__btn {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.ec-totalBox__btn .ec-blockBtn--action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #23AC38 0%, #1a8a2c 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.ec-totalBox__btn .ec-blockBtn--action:hover {
    background: linear-gradient(135deg, #1a8a2c 0%, #156d23 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(35, 172, 56, 0.3) !important;
}

/* お見積作成ボタン */
.ec-totalBox__btn .btn_color {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
}

.ec-totalBox__btn .btn_color:hover {
    background: linear-gradient(135deg, #2980b9 0%, #1f6dad 100%) !important;
}

.ec-totalBox__btn .ec-blockBtn--cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    background: #fff !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.ec-totalBox__btn .ec-blockBtn--cancel:hover {
    border-color: #999 !important;
    color: #333 !important;
}

/* ============================================
   9. レスポンシブ
============================================ */
@media (max-width: 900px) {
    .ec-orderRole {
        flex-direction: column !important;
        width: 95% !important;
    }
    
    .ec-orderRole__summary {
        width: 100% !important;
    }
    
    .ec-totalBox {
        position: static !important;
    }
}

@media (max-width: 768px) {
    .ec-role .ec-pageHeader h1 {
        font-size: 20px !important;
    }
    
    .ec-rectHeading {
        padding: 10px 14px !important;
    }
    
    .ec-rectHeading h2 {
        font-size: 15px !important;
    }
    
    .ec-selects {
        flex-direction: column !important;
    }
    
    .ec-imageGrid {
        gap: 12px !important;
    }
    
    .ec-imageGrid__img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .ec-imageGrid__content p {
        font-size: 13px !important;
    }
    
    .ec-imageGrid__content p span {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 4px !important;
    }
    
    .ec-totalBox {
        padding: 20px 16px !important;
    }
    
    .ec-totalBox__price {
        font-size: 20px !important;
    }
    
    .ec-totalBox__btn .ec-blockBtn--action {
        height: 48px !important;
        font-size: 15px !important;
    }
    /* カートページ上部余白 レスポンシブ */
    .cart_page .ec-layoutRole__mainTop {
        width: 90% !important;
        margin: 24px auto 0 !important;
    }
}
/* ========================================
   注文完了ページ
======================================== */

/* メインコンテナ */
.ec-cartCompleteRole {
    max-width: 700px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 60px 0 80px !important;
    text-align: center !important;
}

/* 完了アイコン */
.ec-cartCompleteRole::before {
    content: "✓" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 24px !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #23AC38 0%, #1a8a2c 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(35, 172, 56, 0.3) !important;
}

/* 完了メッセージ見出し */
.ec-cartCompleteRole .ec-reportHeading,
.ec-cartCompleteRole h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
    margin-bottom: 32px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* 説明文エリア */
.ec-cartCompleteRole .ec-reportDescription,
.ec-cartCompleteRole .ec-off4Grid,
.ec-cartCompleteRole > p {
    padding: 24px 32px !important;
    background: #f8f8f8 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #555 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* 注文番号強調 */
.ec-cartCompleteRole .ec-reportDescription strong,
.ec-cartCompleteRole strong {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
}

/* ボタンエリア */
.ec-cartCompleteRole .ec-off4Grid__cell,
.ec-cartCompleteRole .ec-blockBtn--cancel,
.ec-cartCompleteRole .ec-blockBtn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 32px !important;
}

/* トップページへボタン */
.ec-cartCompleteRole .ec-blockBtn--cancel,
.ec-cartCompleteRole .ec-blockBtn,
.ec-cartCompleteRole a.ec-blockBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 56px !important;
    margin: 32px auto 0 !important;
    padding: 0 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #23AC38 0%, #1a8a2c 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-cartCompleteRole .ec-blockBtn--cancel:hover,
.ec-cartCompleteRole .ec-blockBtn:hover,
.ec-cartCompleteRole a.ec-blockBtn:hover {
    background: linear-gradient(135deg, #1a8a2c 0%, #156b22 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(35, 172, 56, 0.4) !important;
}

/* ========================================
   注文完了ページ レスポンシブ
======================================== */
@media (max-width: 768px) {
    .ec-cartCompleteRole {
        padding: 40px 0 60px !important;
    }

    .ec-cartCompleteRole::before {
        width: 64px !important;
        height: 64px !important;
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }

    .ec-cartCompleteRole .ec-reportHeading,
    .ec-cartCompleteRole h1 {
        font-size: 22px !important;
        margin-bottom: 24px !important;
    }

    .ec-cartCompleteRole .ec-reportDescription,
    .ec-cartCompleteRole .ec-off4Grid,
    .ec-cartCompleteRole > p {
        padding: 20px !important;
        font-size: 13px !important;
    }

    .ec-cartCompleteRole .ec-blockBtn--cancel,
    .ec-cartCompleteRole .ec-blockBtn,
    .ec-cartCompleteRole a.ec-blockBtn {
        max-width: 100% !important;
        height: 52px !important;
        font-size: 15px !important;
        margin-top: 24px !important;
    }
}
/* カートページ上部余白 */
.cart_page .ec-layoutRole__mainTop {
    margin-top: 24px !important;
}

/* ご注文手続きページ上部余白 */
.ec-layoutRole__mainTop {
    margin-top: 24px !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .ec-layoutRole__mainTop {
        width: 90% !important;
        margin: 24px auto 0 !important;
    }
}
/* ========================================
   クーポンページ
======================================== */

/* コンテナ */
.ec-registerRole {
    max-width: 600px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 40px 0 80px !important;
}

.ec-off1Grid__cell {
    width: 100% !important;
}

/* 説明文 */
.ec-addressRole__actions {
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 24px !important;
}

/* フォームエリア */
.ec-registerRole .ec-borderedDefs {
    border: none !important;
    margin-bottom: 32px !important;
}

.ec-registerRole .ec-borderedDefs dl {
    padding: 16px 0 !important;
    border-bottom: 1px dashed #ddd !important;
}

.ec-registerRole .ec-borderedDefs dl:last-child {
    border-bottom: none !important;
}

.ec-registerRole .ec-borderedDefs dt label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* ラジオボタン */
.ec-registerRole .form-check {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.ec-registerRole .form-check-input {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    accent-color: #23AC38 !important;
    cursor: pointer !important;
}

.ec-registerRole .form-check-label {
    font-size: 14px !important;
    color: #333 !important;
    cursor: pointer !important;
}

/* 入力フィールド */
.ec-registerRole .form-control {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.ec-registerRole .form-control:focus {
    border-color: #23AC38 !important;
    box-shadow: 0 0 0 3px rgba(35, 172, 56, 0.1) !important;
    outline: none !important;
}

/* ボタンエリア */
.ec-RegisterRole__actions {
    margin-top: 32px !important;
}

.ec-off4Grid__cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
}

/* 登録ボタン */
.ec-registerRole .ec-blockBtn--action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #23AC38 0%, #1a8a2c 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.ec-registerRole .ec-blockBtn--action:hover {
    background: linear-gradient(135deg, #1a8a2c 0%, #156d23 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(35, 172, 56, 0.3) !important;
}

/* 戻るボタン */
.ec-registerRole .ec-blockBtn--cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    background: #fff !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.ec-registerRole .ec-blockBtn--cancel:hover {
    border-color: #23AC38 !important;
    color: #23AC38 !important;
}

/* ========================================
   クーポンページ レスポンシブ
======================================== */
@media (max-width: 768px) {
    .ec-registerRole {
        width: 90% !important;
        padding: 24px 0 60px !important;
    }

    .ec-off4Grid__cell {
        max-width: 100% !important;
        width: 90% !important;
        margin: 0 auto !important;
    }

    .ec-registerRole .ec-blockBtn--action {
        height: 52px !important;
        font-size: 15px !important;
        padding: 0 40px !important;
    }


    .ec-registerRole .ec-blockBtn--cancel {
        height: 44px !important;
        font-size: 13px !important;
        padding: 0 32px !important;
    }
    .ec-off1Grid__cell{
        width: 90%!important;
        margin: 0 auto!important;
    }
}

/* =======================================
   お届け先複数指定ページ
======================================== */

/* コンテナ */
.ec-AddAddress {
    max-width: 800px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 40px 0 80px !important;
}

/* 説明文 */
.ec-AddAddress__info {
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 24px !important;
    text-align: center !important;
}

/* 新規お届け先追加ボタン */
.ec-AddAddress__new {
    margin-bottom: 32px !important;
}

.ec-AddAddress__new .ec-inlineBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    background: #fff !important;
    border: 2px solid #23AC38 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.ec-AddAddress__new .ec-inlineBtn:hover {
    color: #fff !important;
    background: #23AC38 !important;
}

/* 商品カード */
.ec-AddAddress__add {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* 商品情報エリア */
.ec-AddAddress__item {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px dashed #ddd !important;
}

/* 商品サムネイル */
.ec-AddAddress__itemThumb {
    flex-shrink: 0 !important;
    width: 100px !important;
    height: 100px !important;
    overflow: hidden !important;
}

.ec-AddAddress__itemThumb img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
}

/* 商品コンテンツ */
.ec-AddAddress__itemtContent {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.ec-AddAddress__itemtTitle {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
}

.ec-AddAddress__itemtPrice {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
    margin-bottom: 4px !important;
}

.ec-AddAddress__itemtNumber {
    font-size: 13px !important;
    color: #666 !important;
}

/* お届け先選択エリア */
.ec-AddAddress__select {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: flex-end !important;
    margin-bottom: 12px !important;
}

.ec-AddAddress__selectAddress {
    flex: 1 !important;
    min-width: 200px !important;
}

.ec-AddAddress__selectNumber {
    width: 100px !important;
}

/* ラベル */
.ec-AddAddress__select label,
.ec-AddAddress .ec-select label,
.ec-AddAddress .ec-input label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 6px !important;
}

/* セレクトボックス */
.ec-AddAddress .form-select,
.ec-AddAddress .ec-select select {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color 0.3s ease !important;
}

.ec-AddAddress .form-select:focus,
.ec-AddAddress .ec-select select:focus {
    border-color: #23AC38 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(35, 172, 56, 0.1) !important;
}

/* 数量入力 */
.ec-AddAddress .form-control,
.ec-AddAddress .ec-input input {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color 0.3s ease !important;
}

.ec-AddAddress .form-control:focus,
.ec-AddAddress .ec-input input:focus {
    border-color: #23AC38 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(35, 172, 56, 0.1) !important;
}

/* 削除ボタン */
.ec-AddAddress .ec-inlineBtn.delete {
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: #dc3545 !important;
    background: #fff !important;
    border: 1px solid #dc3545 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-AddAddress .ec-inlineBtn.delete:hover {
    color: #fff !important;
    background: #dc3545 !important;
}

/* お届け先追加ボタン */
.ec-AddAddress__btn {
    margin-top: 16px !important;
}

.ec-AddAddress__btn .ec-inlineBtn,
.ec-AddAddress__btn .ec-inlineBtn.add {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    background: #fff !important;
    border: 1px solid #23AC38 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-AddAddress__btn .ec-inlineBtn:hover,
.ec-AddAddress__btn .ec-inlineBtn.add:hover {
    color: #fff !important;
    background: #23AC38 !important;
}

/* アクションボタンエリア */
.ec-AddAddress__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 400px !important;
    margin: 40px auto 0 !important;
}

/* 確定ボタン */
.ec-AddAddress__actions .ec-blockBtn--action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #23AC38 0%, #1a8a2c 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.ec-AddAddress__actions .ec-blockBtn--action:hover {
    background: linear-gradient(135deg, #1a8a2c 0%, #156d23 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(35, 172, 56, 0.3) !important;
}

/* 戻るボタン */
.ec-AddAddress__actions .ec-blockBtn--cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666 !important;
    background: #fff !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.ec-AddAddress__actions .ec-blockBtn--cancel:hover {
    border-color: #23AC38 !important;
    color: #23AC38 !important;
}

/* =======================================
   お届け先複数指定 レスポンシブ
======================================== */
@media (max-width: 768px) {
    .ec-AddAddress {
        width: 90% !important;
        padding: 24px 0 60px !important;
    }

    .ec-AddAddress__add {
        padding: 16px !important;
    }

    .ec-AddAddress__item {
        gap: 12px !important;
    }

    .ec-AddAddress__itemThumb,
    .ec-AddAddress__itemThumb img {
        width: 80px !important;
        height: 80px !important;
    }

    .ec-AddAddress__select {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .ec-AddAddress__selectAddress,
    .ec-AddAddress__selectNumber {
        width: 100% !important;
        min-width: auto !important;
    }

    .ec-AddAddress__actions {
        max-width: 100% !important;
    }

    .ec-AddAddress__actions .ec-blockBtn--action {
        height: 52px !important;
        font-size: 15px !important;
        padding: 0 40px !important;
    }

    .ec-AddAddress__actions .ec-blockBtn--cancel {
        height: 44px !important;
        font-size: 13px !important;
        padding: 0 32px !important;
    }
}