@charset "UTF-8";

/* ============================================
   custom_mypage.css
   マイページ用スタイル
   ============================================ */

/* ============================================
   1. マイページ共通レイアウト
============================================ */
.mypage .ec-layoutRole__main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* ============================================
   2. ページタイトル（ログインページと統一）
============================================ */
.mypage .ec-pageHeader {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.mypage .ec-pageHeader h1 {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
    text-align: center !important;
    padding: 0 0 16px !important;
    border-bottom: 2px solid #23AC38 !important;
    border-top: none !important;
}

/* ============================================
   3. ナビゲーションタブ（緑基調）
============================================ */
.mypage .ec-navlistRole {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 40px !important;
    padding: 0 !important;
}

.mypage .ec-navlistRole__navlist {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.mypage .ec-navlistRole__item {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    flex: 0 1 auto !important;
}

.mypage .ec-navlistRole__item a {
    display: block !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #666 !important;
    text-decoration: none !important;
    background: #f5f5f5 !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.mypage .ec-navlistRole__item a:hover {
    color: #23AC38 !important;
    border-color: #23AC38 !important;
    background: #f0f9f1 !important;
}

.mypage .ec-navlistRole__item.active a {
    color: #fff !important;
    background: #23AC38 !important;
    border-color: #23AC38 !important;
    font-weight: 600 !important;
}

/* ============================================
   4. ウェルカムメッセージ
============================================ */
.mypage .ec-welcomeMsg {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 40px !important;
    padding: 20px 24px !important;
    background: #f0f9f1 !important;
    border-radius: 12px !important;
    text-align: center !important;
    border-bottom: none!important;
}

.mypage .ec-welcomeMsg p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #333 !important;
}

.mypage .ec-welcomeMsg p:first-child {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* ============================================
   5. コンテンツエリア（85%幅で中央寄せ）
============================================ */
.mypage .ec-mypageRole {
    max-width: 85% !important;
    width: 85% !important;
    margin: 40px auto 0px !important;
    padding: 0 0 24px !important;
}

/* 履歴件数テキスト */
.mypage .ec-mypageRole .ec-para-normal {
    text-align: center !important;
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 24px !important;
}

/* ============================================
   6. 注文履歴カード
============================================ */
.mypage .ec-historyRole {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto 24px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.ec-historyRole__contents{
    border: none!important;
    padding: 0!important;
}

/* ページャーも同様に */
.mypage .ec-pagerRole {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto !important;
}

/* ヘッダー部分 */
.mypage .ec-historyRole__header {
    background: #f9f9f9 !important;
    padding: 20px 24px !important;
}

.mypage .ec-historyListHeader {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px 24px !important;
}

.mypage .ec-historyListHeader__date {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
}

.mypage .ec-historyListHeader .ec-definitions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.mypage .ec-historyListHeader .ec-definitions dt {
    font-size: 13px !important;
    color: #999 !important;
    font-weight: normal !important;
}

.mypage .ec-historyListHeader .ec-definitions dd {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* 詳細を見るボタン */
.mypage .ec-historyListHeader__action {
    margin: 0 0 0 auto !important;
}

.mypage .ec-historyListHeader__action .ec-inlineBtn {
    display: inline-block !important;
    padding: 10px 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;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

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

/* 商品詳細部分 */
.mypage .ec-historyRole__detail {
    padding: 20px 24px !important;
}

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

.mypage .ec-imageGrid__img {
    width: 80px !important;
    min-width: 80px !important;
    height: 80px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
}

.mypage .ec-imageGrid__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.mypage .ec-imageGrid__content {
    flex: 1 !important;
}

.mypage .ec-historyRole__detailTitle {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 8px !important;
}

.mypage .ec-historyRole__detailPrice {
    font-size: 14px !important;
    color: #23AC38 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* ============================================
   7. スマホ対応
============================================ */
@media (max-width: 768px) {
    .mypage .ec-layoutRole__main {
        padding: 0 16px !important;
    }
    
    .mypage .ec-pageHeader {
        margin: 0 0 32px !important;
    }
    
    .mypage .ec-pageHeader h1 {
        font-size: 20px !important;
    }
    
    .mypage .ec-navlistRole {
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 32px !important;
    }
    
    .mypage .ec-navlistRole__navlist {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .mypage .ec-navlistRole__item a {
        padding: 10px 16px !important;
        font-size: 12px !important;
    }
    
    .mypage .ec-welcomeMsg {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage .ec-mypageRole {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage .ec-historyRole {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage .ec-pagerRole {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage .ec-historyRole__header {
        padding: 16px !important;
    }
    
    .mypage .ec-historyListHeader {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    .mypage .ec-historyListHeader__action {
        margin: 0 !important;
        width: 100% !important;
    }
    
    .mypage .ec-historyListHeader__action .ec-inlineBtn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .mypage .ec-historyRole__detail {
        padding: 16px !important;
    }
    
    .mypage .ec-imageGrid__img {
        width: 60px !important;
        min-width: 60px !important;
        height: 60px !important;
    }
    
    .mypage .ec-historyRole__detailTitle {
        font-size: 14px !important;
    }
}

/* ============================================
   8. 注文履歴詳細ページ
============================================ */
.mypage .ec-orderRole {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 40px !important;
    box-sizing: border-box !important;
}

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

.mypage .ec-orderRole__summary {
    width: 320px !important;
    min-width: 320px !important;
    margin-top: 0 !important;
    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
}

/* 注文情報 */
.mypage .ec-orderOrder {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.mypage .ec-orderOrder .ec-definitions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.mypage .ec-orderOrder .ec-definitions:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.mypage .ec-orderOrder .ec-definitions dt {
    font-size: 14px !important;
    color: #666 !important;
    min-width: 120px !important;
}

.mypage .ec-orderOrder .ec-definitions dd {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* セクション見出し（ボタンと差別化） */
.mypage .ec-rectHeading {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    padding: 12px 20px !important;
    margin: 0 0 20px !important;
    border-radius: 8px !important;
    border: 2px solid #23AC38 !important;
}

.mypage .ec-rectHeading h2,
.mypage .ec-rectHeading .h2,
body.mypage .ec-rectHeading h2,
body#page_mypage .ec-rectHeading h2,
.mypage .ec-orderDelivery .ec-rectHeading h2,
.mypage .ec-orderPayment .ec-rectHeading h2,
.mypage .ec-orderConfirm .ec-rectHeading h2,
.mypage .ec-orderMails .ec-rectHeading h2 {
    background: transparent !important;
    background-color: transparent !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #23AC38 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* 配送情報 */
.mypage .ec-orderDelivery {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.mypage .ec-orderDelivery__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.mypage .ec-orderDelivery__item {
    margin-bottom: 20px !important;
}

.mypage .ec-orderDelivery__item .ec-imageGrid {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
}

.mypage .ec-orderDelivery__item .ec-imageGrid__img {
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.mypage .ec-orderDelivery__item .ec-imageGrid__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

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

.mypage .ec-orderDelivery__address {
    margin: 16px 0 !important;
    padding: 16px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
}

.mypage .ec-orderDelivery__address p {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.6 !important;
}

.mypage .ec-orderDelivery__address p:last-child {
    margin-bottom: 0 !important;
}

.mypage .ec-definitions--soft {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.mypage .ec-definitions--soft dt {
    color: #666 !important;
}

.mypage .ec-definitions--soft dd {
    color: #333 !important;
    margin: 0 !important;
}

/* お支払い情報 */
.mypage .ec-orderPayment {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

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

/* お問い合わせ */
.mypage .ec-orderConfirm {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.mypage .ec-orderConfirm p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #666 !important;
}

/* メール配信履歴 */
.mypage .ec-orderMails {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.mypage .ec-orderMail {
    padding: 16px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    margin-top: 16px !important;
}

.mypage .ec-orderMail__time {
    font-size: 12px !important;
    color: #999 !important;
    margin-bottom: 8px !important;
}

.mypage .ec-orderMail__link a {
    font-size: 14px !important;
    color: #23AC38 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.mypage .ec-orderMail__body {
    margin-top: 12px !important;
    padding: 16px !important;
    background: #fff !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.mypage .ec-orderMail__close a {
    display: inline-block !important;
    margin-top: 12px !important;
    font-size: 13px !important;
    color: #23AC38 !important;
    cursor: pointer !important;
}

/* 合計ボックス */
.mypage .ec-totalBox {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
}

.mypage .ec-totalBox__spec {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.mypage .ec-totalBox__spec dt {
    font-size: 14px !important;
    color: #666 !important;
}

.mypage .ec-totalBox__spec dd {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.mypage .ec-totalBox__total,
.mypage .ec-totalBox__paymentTotal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin: 16px 0 !important;
    font-size: 14px !important;
    color: #333 !important;
}

.mypage .ec-totalBox__price {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
    margin-left: auto !important;
}

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

.mypage .ec-totalBox__taxRate {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

.mypage .ec-totalBox__taxRate dd {
    margin: 0 !important;
}

/* 再注文ボタン（テキスト中央揃え） */
.mypage .ec-totalBox .ec-blockBtn--action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #23AC38 0%, #1a8a2c 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.mypage .ec-totalBox .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;
}

/* 戻るボタン */
.mypage .ec-orderRole__detail > a.ec-inlineBtn,
.mypage .ec-orderRole__detail .ec-inlineBtn.ec-font-bold {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 200px !important;
    height: 48px !important;
    margin: 40px auto 80px !important;
    padding: 0 24px !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;
    line-height: 1 !important;
}

.mypage .ec-orderRole__detail > a.ec-inlineBtn:hover,
.mypage .ec-orderRole__detail .ec-inlineBtn.ec-font-bold:hover {
    color: #23AC38 !important;
    border-color: #23AC38 !important;
    background: #f0f9f1 !important;
}

/* ============================================
   9. 注文履歴詳細 スマホ対応
============================================ */
@media (max-width: 768px) {
    .mypage .ec-orderRole {
        max-width: 100% !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    
    .mypage .ec-orderRole__summary {
        width: 100% !important;
        min-width: 100% !important;
        position: static !important;
        order: -1 !important;
    }
    
    .mypage .ec-orderOrder,
    .mypage .ec-orderDelivery,
    .mypage .ec-orderPayment,
    .mypage .ec-orderConfirm,
    .mypage .ec-orderMails {
        padding: 16px !important;
    }
    
    .mypage .ec-rectHeading {
        padding: 10px 16px !important;
    }
    
    .mypage .ec-rectHeading h2 {
        font-size: 14px !important;
    }
    
    .mypage .ec-totalBox {
        padding: 16px !important;
    }
    
    .mypage .ec-totalBox__price {
        font-size: 20px !important;
    }
    
    .mypage .ec-orderRole__detail > a.ec-inlineBtn,
    .mypage .ec-orderRole__detail .ec-inlineBtn.ec-font-bold {
        width: 100% !important;
        max-width: 200px !important;
    }
}

/* ============================================
   10. お気に入り一覧ページ
============================================ */
.mypage .ec-favoriteRole {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto !important;
}

.mypage .ec-favoriteRole__header {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.mypage .ec-favoriteRole__header p {
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
}

.mypage .ec-favoriteRole__detail {
    margin-bottom: 40px !important;
}

.mypage .ec-favoriteRole__itemList {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mypage .ec-favoriteRole__item {
    position: relative !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.mypage .ec-favoriteRole__item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* 削除ボタン */
.mypage .ec-favoriteRole__item .ec-closeBtn--circle {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.mypage .ec-favoriteRole__item .ec-closeBtn--circle:hover {
    background: #e57373 !important;
}

.mypage .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon {
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mypage .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon img {
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    object-fit: contain !important;
}

/* 商品画像 */
.mypage .ec-favoriteRole__itemThumb {
    display: block !important;
    text-decoration: none !important;
}

.mypage .ec-favoriteRole__item-image {
    width: 100% !important;
    overflow: hidden !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.mypage .ec-favoriteRole__item-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.mypage .ec-favoriteRole__item:hover .ec-favoriteRole__item-image img {
    transform: scale(1.05) !important;
}

/* 商品名 */
.mypage .ec-favoriteRole__itemTitle {
    padding: 16px 20px 10px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.5 !important;
    min-height: 48px !important;
}

/* 価格 */
.mypage .ec-favoriteRole__itemPrice {
    padding: 0 20px 20px !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #23AC38 !important;
}

/* ============================================
   11. お気に入り一覧 スマホ対応
============================================ */
@media (max-width: 1024px) {
    .mypage .ec-favoriteRole__itemList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    .mypage .ec-favoriteRole {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage .ec-favoriteRole__itemList {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    .mypage .ec-favoriteRole__itemTitle {
        padding: 12px 16px 8px !important;
        font-size: 14px !important;
        min-height: 40px !important;
    }
    
    .mypage .ec-favoriteRole__itemPrice {
        padding: 0 16px 16px !important;
        font-size: 16px !important;
    }
    
    .mypage .ec-favoriteRole__item .ec-closeBtn--circle {
        width: 24px !important;
        height: 24px !important;
        top: 6px !important;
        right: 6px !important;
    }
    
    .mypage .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon {
        width: 10px !important;
        height: 10px !important;
    }
}


/* ============================================
   12. 会員情報編集ページ
============================================ */
.mypage .ec-editRole {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto !important;
}

.mypage .ec-editRole .ec-off1Grid {
    margin: 0 !important;
    display: block !important;
}

.mypage .ec-editRole .ec-off1Grid__cell {
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* フォーム全体 */
.mypage .ec-borderedDefs {
    background: #fff !important;
    padding: 32px !important;
    margin-bottom: 32px !important;
}

.mypage .ec-borderedDefs dl {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

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

.mypage .ec-borderedDefs dt {
    width: 240px !important;
    min-width: 240px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.mypage .ec-borderedDefs dd {
    flex: 1 !important;
    margin: 0 !important;
}

/* ラベル */
.mypage .ec-borderedDefs .ec-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: inline !important;
}

.mypage .ec-borderedDefs .ec-required {
    display: inline-block !important;
    margin-left: 8px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #e57373 !important;
    border-radius: 4px !important;
}

/* 入力フィールド共通 */
.mypage .ec-borderedDefs input[type="text"],
.mypage .ec-borderedDefs input[type="tel"],
.mypage .ec-borderedDefs input[type="email"],
.mypage .ec-borderedDefs input[type="password"],
.mypage .ec-borderedDefs select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    color: #333 !important;
    background: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

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

/* 半分幅の入力 */
.mypage .ec-halfInput {
    display: flex !important;
    gap: 12px !important;
}

.mypage .ec-halfInput input {
    flex: 1 !important;
}

/* 郵便番号入力 */
.mypage .ec-zipInput {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.mypage .ec-zipInput > span {
    font-size: 14px !important;
    color: #666 !important;
}

.mypage .ec-zipInput input {
    width: 200px !important;
    flex: none !important;
}

.mypage .ec-zipInputHelp {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mypage .ec-zipInputHelp a {
    font-size: 13px !important;
    color: #23AC38 !important;
    text-decoration: none !important;
}

.mypage .ec-zipInputHelp a:hover {
    text-decoration: underline !important;
}

/* セレクトボックス */
.mypage .ec-select {
    margin-bottom: 12px !important;
}

.mypage .ec-select select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
}

/* 住所入力 */
.mypage .ec-input {
    margin-bottom: 12px !important;
}

.mypage .ec-input:last-child {
    margin-bottom: 0 !important;
}

/* 電話番号入力 */
.mypage .ec-telInput input {
    width: 300px !important;
}

/* 生年月日 */
.mypage .ec-birth {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mypage .ec-birth select {
    width: auto !important;
    min-width: 100px !important;
}

.mypage .ec-birth span {
    font-size: 14px !important;
    color: #666 !important;
}

/* ラジオボタン */
.mypage .ec-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.mypage .ec-radio > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.mypage .ec-radio input[type="radio"] {
    display: none !important;
}

.mypage .ec-radio label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #666 !important;
    background: #f5f5f5 !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mypage .ec-radio label:hover {
    border-color: #23AC38 !important;
    background: #f0f9f1 !important;
}

.mypage .ec-radio input[type="radio"]:checked + label {
    color: #fff !important;
    background: #23AC38 !important;
    border-color: #23AC38 !important;
}

/* 登録ボタン */
.mypage .ec-RegisterRole__actions {
    margin-top: 32px !important;
    margin-bottom: 80px !important;
}

.mypage .ec-RegisterRole__actions .ec-off4Grid {
    display: flex !important;
    justify-content: left !important;
}

.mypage .ec-RegisterRole__actions .ec-off4Grid__cell {
    width: 100% !important;
    max-width: 400px !important;
}

.mypage .ec-RegisterRole__actions .ec-blockBtn--cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 600 !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;
}

.mypage .ec-RegisterRole__actions .ec-blockBtn--cancel: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;
}

/* ============================================
   13. 会員情報編集 スマホ対応
============================================ */
@media (max-width: 768px) {
    .mypage .ec-editRole {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage .ec-borderedDefs {
        padding: 20px 16px !important;
    }
    
    .mypage .ec-borderedDefs dl {
        flex-direction: column !important;
        padding: 16px 0 !important;
    }
    
    .mypage .ec-borderedDefs dt {
        width: 100% !important;
        min-width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
    }
    
    .mypage .ec-borderedDefs dd {
        width: 100% !important;
    }
    
    /* 入力フィールドを大きく */
    .mypage .ec-borderedDefs input[type="text"],
    .mypage .ec-borderedDefs input[type="tel"],
    .mypage .ec-borderedDefs input[type="email"],
    .mypage .ec-borderedDefs input[type="password"],
    .mypage .ec-borderedDefs select {
        width: 100% !important;
        height: 52px !important;
        font-size: 16px !important;
        padding: 0 16px !important;
    }
    
    .mypage .ec-halfInput {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .mypage .ec-halfInput input {
        width: 100% !important;
    }
    
    .mypage .ec-zipInput {
        flex-wrap: wrap !important;
    }
    
    .mypage .ec-zipInput input {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }
    
    .mypage .ec-telInput input {
        width: 100% !important;
    }
    
    .mypage .ec-input {
        margin-bottom: 12px !important;
    }
    
    .mypage .ec-input input {
        width: 100% !important;
    }
    
    .mypage .ec-select {
        margin-bottom: 12px !important;
    }
    
    .mypage .ec-select select {
        width: 100% !important;
    }
    
    .mypage .ec-birth {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .mypage .ec-birth select {
        min-width: 90px !important;
        height: 48px !important;
        font-size: 16px !important;
    }
    
    .mypage .ec-radio {
        gap: 8px !important;
    }
    
    .mypage .ec-radio label {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    .mypage .ec-RegisterRole__actions .ec-off4Grid {
        display: flex !important;
        justify-content: center !important;
    }
    
    .mypage .ec-RegisterRole__actions .ec-blockBtn--cancel {
        height: 52px !important;
        font-size: 15px !important;
    }
}

/* ============================================
   23. お届け先一覧ページ（強制上書き）
============================================ */
body.mypage .ec-off1Grid,
body.mypage .ec-mypageRole .ec-off1Grid,
#page_mypage_delivery .ec-off1Grid {
    display: block !important;
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.mypage .ec-off1Grid__cell,
body.mypage .ec-mypageRole .ec-off1Grid__cell,
#page_mypage_delivery .ec-off1Grid__cell {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    float: none !important;
}

body.mypage .ec-addressRole,
#page_mypage_delivery .ec-addressRole {
    width: 100% !important;
    max-width: 100% !important;
}

body.mypage .ec-addressRole__actions,
#page_mypage_delivery .ec-addressRole__actions {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 40px !important;
}

body.mypage .ec-addressRole__actions .ec-inlineBtn,
#page_mypage_delivery .ec-addressRole__actions .ec-inlineBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 280px !important;
    height: 56px !important;
    padding: 0 32px !important;
    font-size: 15px !important;
    font-weight: 600 !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;
}

body.mypage .ec-addressRole__actions .ec-inlineBtn:hover,
#page_mypage_delivery .ec-addressRole__actions .ec-inlineBtn: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;
}

/* ============================================
   24. お届け先一覧 スマホ対応
============================================ */
@media (max-width: 768px) {
    body.mypage .ec-off1Grid,
    body.mypage .ec-mypageRole .ec-off1Grid,
    #page_mypage_delivery .ec-off1Grid {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    body.mypage .ec-addressRole__actions .ec-inlineBtn,
    #page_mypage_delivery .ec-addressRole__actions .ec-inlineBtn {
        width: 100% !important;
        min-width: auto !important;
        height: 52px !important;
        font-size: 14px !important;
    }
}


/* ============================================
   16. お届け先追加・編集フォーム
============================================ */
body.mypage .ec-mypageRole > .ec-off1Grid,
.mypage .ec-mypageRole > .ec-off1Grid {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto !important;
}

body.mypage .ec-mypageRole > .ec-off1Grid > .ec-off1Grid__cell,
.mypage .ec-mypageRole > .ec-off1Grid > .ec-off1Grid__cell {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    float: none !important;
}

/* 登録ボタンエリア（お届け先追加用） */
body.mypage .ec-off1Grid .ec-RegisterRole__actions,
body.mypage .ec-mypageRole .ec-RegisterRole__actions,
.mypage .ec-off1Grid .ec-RegisterRole__actions,
.mypage .ec-mypageRole .ec-RegisterRole__actions {
    margin-top: 32px !important;
    margin-bottom: 80px !important;
}

/* 登録ボタン中央配置（強制上書き） */
body.mypage .ec-RegisterRole__actions .ec-off4Grid,
body.mypage .ec-mypageRole .ec-RegisterRole__actions .ec-off4Grid,
body.mypage .ec-off1Grid .ec-RegisterRole__actions .ec-off4Grid,
body.mypage .ec-editRole .ec-RegisterRole__actions .ec-off4Grid,
.mypage .ec-RegisterRole__actions .ec-off4Grid,
.mypage .ec-off1Grid .ec-RegisterRole__actions .ec-off4Grid,
.mypage .ec-editRole .ec-RegisterRole__actions .ec-off4Grid {
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

body.mypage .ec-RegisterRole__actions .ec-off4Grid__cell,
body.mypage .ec-off1Grid .ec-RegisterRole__actions .ec-off4Grid__cell,
body.mypage .ec-editRole .ec-RegisterRole__actions .ec-off4Grid__cell,
.mypage .ec-RegisterRole__actions .ec-off4Grid__cell,
.mypage .ec-off1Grid .ec-RegisterRole__actions .ec-off4Grid__cell,
.mypage .ec-editRole .ec-RegisterRole__actions .ec-off4Grid__cell {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* ============================================
   17. お届け先追加・編集フォーム スマホ対応
============================================ */
@media (max-width: 768px) {
    body.mypage .ec-mypageRole > .ec-off1Grid,
    .mypage .ec-mypageRole > .ec-off1Grid {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================
   18. フォームエラーメッセージ
============================================ */
.mypage .ec-borderedDefs .ec-halfInput {
    flex-wrap: wrap !important;
}

.mypage .ec-borderedDefs .ec-errorMessage {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #e57373 !important;
    background: #fef2f2 !important;
    border-radius: 6px !important;
    display: block !important;
}

/* 入力フィールドのエラー状態 */
.mypage .ec-borderedDefs input.error,
.mypage .ec-borderedDefs select.error,
.mypage .ec-borderedDefs input:invalid:not(:placeholder-shown),
.mypage .ec-borderedDefs select:invalid:not(:placeholder-shown) {
    border-color: #e57373 !important;
    background: #fef2f2 !important;
}

/* エラー時の入力フィールド */
.mypage .ec-borderedDefs .error input,
.mypage .ec-borderedDefs .error select {
    border-color: #e57373 !important;
}

/* 半分幅入力のエラーメッセージ位置調整 */
.mypage .ec-halfInput .ec-errorMessage {
    flex-basis: 100% !important;
    order: 10 !important;
}

/* ============================================
   最終上書き（優先度確保）
============================================ */
.ec-RegisterRole__actions .ec-off4Grid {
    display: flex !important;
    justify-content: center !important;
}

.ec-RegisterRole__actions .ec-off4Grid__cell {
    margin: 0 auto !important;
    float: none !important;
}


/* ============================================
   19. 退会手続きページ
============================================ */
.mypage .ec-withdrawRole {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto 80px !important;
}

.mypage .ec-withdrawRole form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.mypage .ec-withdrawRole .ec-off3Grid {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 40px !important;
    width: 100% !important;
}

.mypage .ec-withdrawRole .ec-off3Grid__cell {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: #fff !important;
    padding: 40px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* アイコン */
.mypage .ec-withdrawRole .ec-off3Grid__cell > div[style] {
    font-size: 1px !important;
}

.mypage .ec-withdrawRole .ec-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff3e0 !important;
    border-radius: 50% !important;
}

.mypage .ec-withdrawRole .ec-icon img {
    width: 40px !important;
    height: 40px !important;
}

/* タイトル */
.mypage .ec-withdrawRole__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #e57373 !important;
    margin: 0 0 20px !important;
}

/* 説明文 */
.mypage .ec-withdrawRole__description {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* ボタンエリア */
.mypage .ec-withdrawRole .ec-off4Grid {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 80px !important;
}

.mypage .ec-withdrawRole .ec-off4Grid__cell {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

.mypage .ec-withdrawRole .ec-blockBtn--cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #e57373 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mypage .ec-withdrawRole .ec-blockBtn--cancel:hover {
    background: #d32f2f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(229, 115, 115, 0.3) !important;
}

/* ============================================
   20. 退会手続き スマホ対応
============================================ */
@media (max-width: 768px) {
    .mypage .ec-withdrawRole {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage .ec-withdrawRole .ec-off3Grid__cell {
        padding: 32px 20px !important;
    }
    
    .mypage .ec-withdrawRole .ec-icon {
        width: 64px !important;
        height: 64px !important;
    }
    
    .mypage .ec-withdrawRole .ec-icon img {
        width: 32px !important;
        height: 32px !important;
    }
    
    .mypage .ec-withdrawRole__title {
        font-size: 18px !important;
    }
    
    .mypage .ec-withdrawRole__description {
        font-size: 13px !important;
    }
    
    .mypage .ec-withdrawRole .ec-blockBtn--cancel {
        height: 52px !important;
        font-size: 15px !important;
    }
}

/* ============================================
   21. 退会手続き最終確認ページ
============================================ */
.mypage .ec-withdrawConfirmRole__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #e57373 !important;
    margin: 0 0 20px !important;
    text-align: center !important;
}

.mypage .ec-withdrawConfirmRole__description {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ボタンエリア */
.mypage .ec-withdrawConfirmRole__cancel,
.mypage .ec-off4Grid .ec-withdrawConfirmRole__cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #666 !important;
    background: #fff !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-bottom: 16px !important;
}

.mypage .ec-withdrawConfirmRole__cancel:hover,
.mypage .ec-off4Grid .ec-withdrawConfirmRole__cancel:hover {
    color: #23AC38 !important;
    border-color: #23AC38 !important;
    background: #f0f9f1 !important;
}

/* はい、退会しますボタン */
.mypage .ec-off4Grid .ec-blockBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #e57373 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mypage .ec-off4Grid .ec-blockBtn:hover {
    background: #d32f2f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(229, 115, 115, 0.3) !important;
}

/* ボタンエリア中央配置 */
.mypage form > .ec-off4Grid {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 80px !important;
}

.mypage form > .ec-off4Grid > .ec-off4Grid__cell {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* ============================================
   22. 退会手続き最終確認 スマホ対応
============================================ */
@media (max-width: 768px) {
    .mypage .ec-withdrawConfirmRole__title {
        font-size: 18px !important;
    }
    
    .mypage .ec-withdrawConfirmRole__description {
        font-size: 13px !important;
    }
    
    .mypage .ec-withdrawConfirmRole__cancel,
    .mypage .ec-off4Grid .ec-blockBtn {
        height: 52px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   25. カード情報変更ページ
============================================ */
#page_mypage_stripe_payment_card_info .ec-off1Grid,
body.mypage .ec-off1Grid:has(#payment-form) {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto !important;
}

#page_mypage_stripe_payment_card_info .ec-off1Grid__cell,
body.mypage .ec-off1Grid:has(#payment-form) .ec-off1Grid__cell {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* カード情報セクション */
.mypage .ec-borderedDefs .ec-title,
.mypage .ec-borderedDefs dt {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* 登録されたカード情報 */
.mypage #card-list {
    padding: 16px 0 !important;
}

.mypage #card-list .card-info {
    padding: 16px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
}

.mypage #payment-no-card {
    font-size: 14px !important;
    color: #666 !important;
}

/* カード情報登録セクションのレイアウト */
.mypage #payment-form .ec-borderedDefs dl {
    display: block !important;
}

.mypage #payment-form .ec-borderedDefs dt {
    width: 100% !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.mypage #payment-form .ec-borderedDefs dd {
    width: 100% !important;
    max-width: 600px !important;
}

/* Stripe入力エリア（横幅拡大） */
.mypage #payment-element,
.mypage .ec-borderedDefs dd:has(#payment-element),
.mypage .ec-halfInput:has(#payment-element),
.mypage #payment-element.ec-halfInput {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mypage #payment-element .StripeElement,
.mypage #payment-element .__PrivateStripeElement,
.mypage #payment-element iframe {
    width: 100% !important;
    min-width: 100% !important;
}

/* エラーメッセージ */
.mypage #card-errors {
    margin-top: 12px !important;
    font-size: 13px !important;
    color: #e57373 !important;
}

/* 登録ボタン */
.mypage #payment-form .ec-off4Grid {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 80px !important;
    width: 100% !important;
}

.mypage #payment-form .ec-off4Grid__cell {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    float: none !important;
}

.mypage #payment-form .ec-blockBtn--cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    font-size: 16px !important;
    font-weight: 600 !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;
}

.mypage #payment-form .ec-blockBtn--cancel: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;
}

/* ============================================
   26. カード情報変更 スマホ対応
============================================ */
@media (max-width: 768px) {
    #page_mypage_stripe_payment_card_info .ec-off1Grid,
    body.mypage .ec-off1Grid:has(#payment-form) {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .mypage #payment-form .ec-borderedDefs dd,
    .mypage #payment-element,
    .mypage .ec-halfInput:has(#payment-element),
    .mypage #payment-element.ec-halfInput {
        max-width: 100% !important;
    }
    
    .mypage #payment-form .ec-blockBtn--cancel {
        height: 52px !important;
        font-size: 15px !important;
    }
}

/* ============================================
   会員ランク情報ブロック
============================================ */
#customer_rank {
    max-width: 85% !important;
    width: 85% !important;
    margin: 0 auto 24px !important;
    padding: 16px 20px !important;
    background: linear-gradient(135deg, #f8fdf9 0%, #fff 100%) !important;
    border: 2px solid #23AC38 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(35, 172, 56, 0.1) !important;
}

#customer_rank .heading02 {
    display: none !important;
}

#customer_rank .container-fluid {
    padding: 0 !important;
}

#customer_rank .col-md-10,
#customer_rank .col-md-offset-1 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* 現在のランク表示 */
#customer_rank .current-rank {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    background: transparent !important;
}

#customer_rank .current-rank .rank {
    color: #23AC38 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

#customer_rank span {
    color: #23AC38 !important;
    font-weight: 700 !important;
}

/* 次回更新時のランク */
#customer_rank .next_info {
    display: inline-block !important;
    margin: 8px 0 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: #555 !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    line-height: 1.6 !important;
}

#customer_rank .next_info p {
    margin: 2px 0 !important;
    display: inline !important;
}

#customer_rank .next_info .rank {
    color: #23AC38 !important;
    font-weight: 700 !important;
}

/* マイページ上部余白 */
.mypage .ec-layoutRole__mainTop {
    margin-top: 24px !important;
}

/* レスポンシブ */
@media (max-width: 768px) {
    #customer_rank {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto 20px !important;
        padding: 12px 16px !important;
    }
    
    #customer_rank .current-rank {
        font-size: 13px !important;
    }
    
    #customer_rank .current-rank .rank {
        font-size: 14px !important;
    }
    
    #customer_rank .next_info {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}