@charset "UTF-8";

/* ==============================================
   1. 通常商品リスト・テーブル (JSON版) 用スタイル
   ============================================== */
.ym-list-link { text-decoration: underline; color: #1976d2; font-weight: bold; }
.ym-list-link:hover { text-decoration: none; opacity: 0.8; }

.ym-sync-container .ym-tabs-container { display: flex; width: 100%; margin-bottom: 20px; gap: 5px; }
.ym-sync-container .ym-tab-button { flex: 1; padding: 12px 5px; cursor: pointer; border: 1px solid #ddd; background: #f9f9f9; font-weight: bold; border-radius: 4px; color: #666; }
.ym-sync-container .ym-tab-button.active { background-color: #5473b7 !important; color: #ffffff !important; border-color: #5473b7 !important; }

.ym-sync-container .ym-sortable-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.ym-sync-container .ym-sortable-table thead th { background-color: #5473b7 !important; color: #ffffff !important; padding: 12px 10px !important; font-size: 0.95em; border: 1px solid #ccc !important; text-align: center !important; cursor: pointer; }
.ym-sync-container .ym-sortable-table thead th:hover { background-color: #5473b7 !important; opacity: 1 !important; }
.ym-sync-container .ym-sortable-table thead th::after { content: '↕'; font-size: 0.8em; margin-left: 5px; color: #aaccff; vertical-align: middle; }

.ym-sync-container .ym-model-row { display: block; font-weight: bold; margin-bottom: 3px; font-size: 1.05em; color: #1976d2; text-decoration: underline; }

/* 発売日表示 (PC用デフォルト) */
.ym-release-date { display: block; font-weight: normal; font-size: 0.85em; color: #666; margin-top: 2px; }

.ym-sync-container .ym-price-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ym-sync-container .ym-price-teika { text-decoration: line-through; color: #aaa; font-size: 0.8em; }
.ym-sync-container .ym-price-waribiki { background-color: #ffebee; color: #c62828; font-weight: bold; font-size: 0.8em; padding: 2px 8px; border-radius: 12px; display: inline-block; margin-bottom: 2px; }
.ym-sync-container .ym-price-total { font-weight: bold; font-size: 1.1em; color: #111; margin-top: 2px; font-family: sans-serif; }
.ym-sync-container .ym-jisshitsu-box { display: block; background: #fff8f8; border: 1px solid #ffcdd2; padding: 4px 8px; border-radius: 4px; color: #d32f2f; font-size: 0.9em; font-weight: bold; margin-top: 6px; text-align: center; }
.ym-sync-container .ym-jisshitsu-price { font-size: 1.5em; line-height: 1; }

.ym-sync-container .wp-block-table tbody th, .ym-sync-container .wp-block-table tbody td { text-align: left !important; color: inherit; vertical-align: middle; padding: 15px 12px; border-bottom: 1px solid #eee; }
.ym-sync-container .wp-block-table tbody td { text-align: right !important; }
.ym-sync-container .wp-block-table tbody tr:last-child td { border-bottom: none; }
.ym-sync-container .ym-footer-note { font-size: 0.75em; color: #666; margin-top: 10px; line-height: 1.4; text-align: right; }

/* PC用画像 (CLS対策: 高さ固定・object-fit) */
.ym-pc-img { 
    width: 60px; 
    height: 60px; 
    object-fit: contain;
    background-color: #fff;
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 10px; 
    border-radius: 4px; 
    border: 1px solid #eee; 
    transition: opacity 0.3s; 
}

.ym-sp-img { display: none; }
.ym-th-content { display: flex; align-items: center; }
.ym-link { text-decoration: none; color: inherit; display: block; }
.ym-sp-button { display: block; margin: 10px auto 0; width: fit-content; background: #d32f2f; color: #fff !important; text-decoration: none !important; padding: 8px 16px; border-radius: 6px; font-weight: bold; font-size: 0.9em; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.ym-sp-button:hover { opacity: 0.8; }

/* スマホ表示 (600px以下) */
@media screen and (max-width: 600px) {
    .ym-sync-container .ym-sortable-table, .ym-sync-container .ym-sortable-table tbody, .ym-sync-container .ym-sortable-table tr, .ym-sync-container .ym-sortable-table td, .ym-sync-container .ym-sortable-table th { display: block; width: 100%; }
    .ym-sync-container .ym-sortable-table thead { display: none; }
    .ym-sync-container .ym-sortable-table tr { margin-bottom: 24px; border: none; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); background: #fff; overflow: hidden; }
    .ym-sync-container .ym-sortable-table tbody th { background-color: #5473b7 !important; color: #fff !important; text-align: center !important; padding: 12px !important; }
    
    /* 発売日を白文字にする */
    .ym-release-date { color: #ffffff !important; opacity: 0.9; }

    .ym-pc-img { display: none; }
    .ym-th-content { display: block; text-align: center; width: 100%; }
    .ym-model-row { color: #fff !important; font-size: 1.2em; }
    .ym-link .ym-model-row { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.7); }
    
    .ym-sync-container .ym-sortable-table tbody td:nth-of-type(1) { background-color: #fff; padding: 20px 15px !important; display: flex; flex-direction: column; align-items: center; }
    .ym-sync-container .ym-sortable-table tbody td:nth-of-type(2) { background-color: #f8f9fa; border-top: 1px dashed #e0e0e0; padding: 15px !important; }
    
    /* スマホ用画像 (CLS対策: 高さ固定・object-fit) */
    .ym-sp-img { 
        display: block; 
        width: 120px; 
        height: 120px; 
        object-fit: contain;
        margin-bottom: 15px; 
        order: 1; 
    }
    
    .ym-sync-container .ym-sortable-table tbody td:nth-of-type(1)::before { content: "端末価格"; display: block; font-size: 0.8em; color: #999; font-weight: bold; margin-bottom: 5px; order: 2; width: 100%; text-align: center; }
    .ym-sync-container .ym-price-cell { order: 3; align-items: center !important; gap: 4px; }
    
    .ym-sync-container .ym-sortable-table tbody td:nth-of-type(2)::before { content: "実質負担 (48回払い)"; display: block; font-size: 0.8em; color: #999; font-weight: bold; margin-bottom: 8px; }
    .ym-sync-container .ym-jisshitsu-box { display: inline-block; width: auto; padding: 4px 12px; font-size: 1.1em; background: transparent; border: none; color: #d32f2f; margin-top: 2px; }
    
    .ym-sync-container .ym-footer-note { text-align: left; }
    .ym-sp-button { margin: 15px auto 5px; padding: 12px 20px; font-size: 0.95em; width: 80%; }
}

/* ==============================================
   2. 認定中古品 (SBC) テーブル用スタイル
   ============================================== */
.yis-wrapper { margin-bottom: 2em; }
.yis-meta { font-size: 0.8em; color: #666; text-align: right; margin-bottom: 5px; }

.yis-tabs { display: flex; flex-wrap: wrap; width: 100%; gap: 0; }
.yis-tabs input[type="radio"] { display: none; }

.yis-tabs label {
    flex: 1; text-align: center; padding: 12px 5px;
    background: #f4f4f4; border: 1px solid #ddd; border-bottom: none;
    cursor: pointer; font-size: 0.9rem; font-weight: bold; color: #555;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px 5px 0 0; line-height: 1.3; white-space: nowrap;
}

/* 選択されたタブ */
.yis-tabs input:checked + label {
    background: #fff; border-bottom: 1px solid #fff;
    color: #d30000; z-index: 2; position: relative;
}

.yis-tabs .yis-content {
    display: none; width: 100%; border: 1px solid #ddd;
    padding: 15px; background: #fff; box-sizing: border-box;
    z-index: 1; margin-top: -1px;
}

/* タブ切り替えロジック (SBCはCSSのみで実装) */
#yis-tab1:checked ~ #yis-content-mnp,
#yis-tab2:checked ~ #yis-content-new,
#yis-tab3:checked ~ #yis-content-kihen { display: block; }

/* テーブル内部 */
.yis-table { width: 100%; border-collapse: collapse; margin: 0; }
.yis-table th, .yis-table td { border: 1px solid #e5e5e5; padding: 10px; text-align: left; vertical-align: middle; }
.yis-table th { background: #f9f9f9; width: 40%; font-weight: bold; }

.yis-price-original { text-decoration: line-through; color: #999; font-size: 0.9em; margin-right: 5px; }
.yis-price-arrow { color: #333; margin: 0 5px; font-size: 0.9em; }
.yis-price-sale { color: #d30000; font-weight: bold; font-size: 1.1em; }
.yis-yen { font-size: 0.8em; color: #333; font-weight: normal; }

@media (max-width: 600px) {
    .yis-tabs label { font-size: 0.75rem; padding: 10px 2px; }
    .yis-table th, .yis-table td { font-size: 0.85rem; padding: 8px; }
}

/* ==============================================
   3. 追加キャンペーン (Tsuika) テーブル用スタイル
   ============================================== */
/* 勝手な装飾（背景色や中央寄せ）を削除し、レイアウトのみを元のコードに合わせる */
.ym-tsuika-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.ym-tsuika-table th, 
.ym-tsuika-table td {
    /* 元のコードではborder指定がありませんでしたが、
       テーブルとして崩れないよう最低限の線だけ残しています。
       もし線も不要なら border: none; にしてください。 */
    border: 1px solid #e5e5e5;
    padding: 8px;
    vertical-align: middle;
    word-wrap: break-word; /* はみ出し防止 */
}

/* 余計な色や配置指定を削除 */
.ym-tsuika-table .ym-breakdown { font-size: 0.85em; color: #666; }
.ym-tsuika-table .ym-highlight { font-weight: bold; color: #d32f2f; }