/* ahamo-price-master/assets/css/apm-style.css */

/* --- CWV (CLS) 対策：領域確保 --- */
.apm-table { table-layout: fixed; contain: content; }
.apm-img-box { min-width: 60px; min-height: 60px; aspect-ratio: 1 / 1; }
.apm-mobile-sort-container { min-height: 45px; }

/* --- 元のデザインを一行も削らず保持 --- */
.apm-date { text-align: right; margin-bottom: 10px; font-size: 0.9em; color:#666; }
.apm-table { border-collapse: collapse; border: 1px solid #ccc; margin-bottom: 30px; width: 100%; }
.apm-table th, .apm-table td { border: 1px solid #ccc; padding: 10px; vertical-align: middle; }
.apm-table thead th.sortable { text-align: center; font-weight: bold; background: #5473b7; color: #fff; cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
.apm-table thead th.sortable:first-child { text-align: left; padding-left: 20px; }
.apm-table th.sortable:hover { opacity: 0.9; }
.apm-table th.sortable::after { content: "↕"; font-size: 0.8em; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); opacity: 0.5; color: #fff; }
.apm-table th.sortable.asc::after { content: "▲"; opacity: 1; }
.apm-table th.sortable.desc::after { content: "▼"; opacity: 1; }
.apm-table tbody th { text-align: left; vertical-align: middle; }
.apm-name-wrap { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; }
.apm-img-box { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 4px; border: 1px solid #eee; flex-shrink: 0; padding: 2px; }
.apm-product-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.apm-name-text { display: block; line-height: 1.4; font-weight: bold; }
.apm-price { text-align: center; white-space: nowrap; }
.apm-discount { text-align: center; color: #0073aa; white-space: nowrap; vertical-align: middle; } 
.apm-discount-label { display: block; font-size: 0.7em; color: #666; margin-bottom: 2px; }
.apm-onetime { display: block; margin-top: 8px; font-size: 0.9em; color: #333; font-weight: bold; border-top: 1px dashed #ddd; padding-top: 4px; }
.apm-table td.apm-burden { text-align: center; vertical-align: middle; }
.apm-smart-burden { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.apm-burden-main { display: inline-flex; align-items: baseline; white-space: nowrap; }
.apm-smart-burden .num { font-size: 1.5em; font-weight: 800; color: #e60012; letter-spacing: -0.02em; }
.apm-smart-burden .unit { font-size: 1em; font-weight: bold; color: #333; margin-left: 2px; }
.apm-smart-burden .note { font-size: 0.75em; color: #666; margin-top: 4px; white-space: nowrap; }
.apm-smart-burden .installment { font-size: 0.8em; color: #333; margin-top: 2px; white-space: nowrap; }
.kaedoki-label-wrapper { margin-top: 5px; }
.kaedoki-label { display: inline-flex; white-space: nowrap; line-height: 1; vertical-align: middle; }
.label-part { padding: 3px 10px; color: #fff; font-weight: 900; font-size: 10px; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); position: relative; }
.label-left-red { background-color: #D30025; clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); padding-right: 15px; z-index: 2; }
.label-right-part { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); margin-left: -12px; padding-left: 18px; z-index: 1; }
.label-gold-grad { background: linear-gradient(45deg, #B78D4A 0%, #E4C585 50%, #B78D4A 100%); }
.label-green-grad { background: linear-gradient(45deg, #00A63F 0%, #57C97D 100%); }
.label-plus-mark { color: #FFFAD0; margin-left: 1px; }
.apm-comment-box { background-color: #fcfcfc; border: 1px solid #ddd; padding: 20px; margin-top: 10px; margin-bottom: 40px; border-radius: 4px; }
.apm-comment-title { font-weight: bold; font-size: 1.1em; margin-bottom: 10px; display: block; }
.apm-mobile-sort-container { display: none; margin-bottom: 15px; text-align: right; }
.apm-mobile-sort-select { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font-size: 0.95em; }

@media (max-width: 600px) {
    .apm-mobile-sort-container { display: block; }
    .apm-table, .apm-table tbody, .apm-table tr, .apm-table th, .apm-table td { display: block; width: 100%; border: none; }
    .apm-table thead { display: none; }
    .apm-table tr { margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); background: #fff; overflow: hidden; }
    .apm-table tbody th { background: #5473b7; color: #fff; padding: 12px 15px; font-size: 1.1em; text-align: center; border-bottom: 1px solid #eee; }
    .apm-name-wrap { justify-content: center; flex-direction: column; text-align: center; gap: 5px; } 
    .apm-img-box { width: 80px; height: 80px; margin: 0 auto; }
    .apm-table td { padding: 10px 15px; text-align: right !important; border-bottom: 1px dotted #eee; position: relative; padding-left: 110px; min-height: 54px; }
    .apm-table td:last-child { border-bottom: none; }
    .apm-table td::before { content: attr(data-label); position: absolute; left: 15px; top: 12px; font-weight: bold; color: #666; font-size: 0.9em; }
    .apm-table td.apm-burden { background: #fff9f9; padding-top: 15px; padding-bottom: 15px; }
    .apm-table td.apm-burden::before { color: #e60012; font-size: 1em; top: 18px; } 
    .apm-smart-burden { align-items: flex-end; } 
    .apm-smart-burden .num { font-size: 1.8em; } 
    .apm-smart-burden .note { font-size: 0.8em; margin-top: 5px; }
    .apm-smart-burden .installment { font-size: 0.85em; margin-top: 4px; color: #444; }
    .apm-price, .apm-discount, .apm-onetime { white-space: normal; text-align: right; }
}