/* ===== Rakuten iPhone Simulator - Styles ===== */
/* Version: 1.1.0 */
/* スコープ付きCSS: テーマ非依存 */

.rm-simulator-wrapper { 
    font-family: inherit; 
    max-width: 820px; 
    margin: 0 auto; 
    color: #333; 
}

.rm-simulator-wrapper *, 
.rm-simulator-wrapper *::before, 
.rm-simulator-wrapper *::after { 
    box-sizing: border-box; 
}

.rm-simulator-wrapper .rm-loading { 
    text-align: center; 
    padding: 40px; 
    font-size: 1.1em; 
    color: #888; 
}

/* セクション */
.rm-simulator-wrapper .rm-sec {
    border: 1px solid #e0e0e0; 
    border-radius: 10px; 
    padding: 24px; 
    margin-bottom: 20px; 
    background: #fff;
    contain: layout style; /* CLS対策: レイアウト分離 */
    content-visibility: auto; /* LCP対策: 非表示セクションの描画省略 */
    contain-intrinsic-size: auto 150px; /* CLS対策: 推定サイズ */
}

.rm-simulator-wrapper .rm-sec-title {
    margin: 0 0 16px; 
    font-size: 1.1em; 
    font-weight: bold;
    display: flex; 
    align-items: center; 
    gap: 8px;
}

.rm-simulator-wrapper .rm-sec-title .rm-step {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    background: #ff008c; 
    color: #fff;
    font-size: 14px; 
    font-weight: bold; 
    flex-shrink: 0;
}

/* 機種カード横スクロール */
.rm-simulator-wrapper .rm-device-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 4px;
}

.rm-simulator-wrapper .rm-device-card {
    flex: 0 0 auto;
    width: 110px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background-color 0.15s;
    will-change: border-color;
}

.rm-simulator-wrapper .rm-device-card:hover { 
    border-color: #ffb3d9; 
    background: #fff5f9; 
}

.rm-simulator-wrapper .rm-device-card.active { 
    border-color: #ff008c; 
    background: #fff0f6; 
    box-shadow: 0 0 0 1px #ff008c; 
}

/* ラジオボタングループ */
.rm-simulator-wrapper .rm-btn-group { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.rm-simulator-wrapper .rm-btn-group label {
    display: flex; 
    align-items: center; 
    gap: 6px; 
    padding: 10px 16px;
    border: 2px solid #e0e0e0; 
    border-radius: 6px; 
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s; /* FID対策 */
    font-size: 14px; 
    background: #fff; 
    user-select: none;
}

.rm-simulator-wrapper .rm-btn-group label:hover { 
    border-color: #ffb3d9; 
    background: #fff5f9; 
}

.rm-simulator-wrapper .rm-btn-group label:has(input:checked) { 
    border-color: #ff008c; 
    background: #fff0f6; 
    font-weight: 600; 
}

.rm-simulator-wrapper .rm-btn-group input[type="radio"] { 
    accent-color: #ff008c; 
    margin: 0; 
}

/* 申込方法・支払方法: 均等幅3列 */
.rm-simulator-wrapper .rm-btn-group-equal {
    display: flex;
    gap: 8px;
}

.rm-simulator-wrapper .rm-btn-group-equal label {
    flex: 1;
    justify-content: center;
}

/* 支払方法: スマホ専用レイアウト */
.rm-simulator-wrapper .rm-btn-group-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rm-simulator-wrapper .rm-btn-group-pay label {
    flex: 1 1 auto;
}

/* 48回払い結果ボックス内レイアウト */
.rm-simulator-wrapper .rm-inst48-effective {
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 8px;
}

.rm-simulator-wrapper .rm-inst48-effective .rm-result-price {
    font-size: 20px;
}

.rm-simulator-wrapper .rm-inst48-refund {
    font-size: 18px;
    font-weight: bold;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}

/* PC: label要素をinlineにして1行表示 */
.rm-simulator-wrapper .rm-inst48-label {
    display: inline;
}

/* PC・スマホ共通: 48回払い結果ボックスは中央寄せ */
.rm-simulator-wrapper .rm-result-box-inst48 {
    text-align: center;
}

@media (max-width: 768px) {
    /* スマホ: 機種カードは横スクロール */
    .rm-simulator-wrapper .rm-device-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .rm-simulator-wrapper .rm-device-scroll::-webkit-scrollbar {
        height: 4px;
    }
    .rm-simulator-wrapper .rm-device-scroll::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 2px;
    }

    /* 申込方法スマホ: 縦1列・左寄せ */
    .rm-simulator-wrapper .rm-btn-group-equal.rm-btn-group-app {
        flex-direction: column;
    }
    .rm-simulator-wrapper .rm-btn-group-equal.rm-btn-group-app label {
        justify-content: flex-start;
    }

    /* 支払方法スマホ: 48回=100%、24回+一括=各50%・左寄せ */
    .rm-simulator-wrapper .rm-btn-group-pay label[data-pay="inst48"] {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .rm-simulator-wrapper .rm-btn-group-pay label[data-pay="inst24"],
    .rm-simulator-wrapper .rm-btn-group-pay label[data-pay="bulk"] {
        flex: 1 1 calc(50% - 4px);
        justify-content: flex-start;
    }

    /* スマホ: labelをblockにして改行 */
    .rm-simulator-wrapper .rm-inst48-label {
        display: block;
    }
}

/* 一覧表: 容量絞り込みボタン */
.rm-simulator-wrapper .rm-cap-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    background: #fafafa;
    border-top: 1px solid #e8e8e8;
    margin-bottom: 0;
}

.rm-simulator-wrapper .rm-cap-filter button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.rm-simulator-wrapper .rm-cap-filter button:hover {
    border-color: #ff008c;
    color: #ff008c;
}

.rm-simulator-wrapper .rm-cap-filter button.active {
    border-color: #ff008c;
    background: #fff0f6;
    color: #ff008c;
    font-weight: bold;
}

/* 結果テーブル */
.rm-simulator-wrapper table.rm-tbl { 
    width: 100%; 
    border-collapse: collapse; 
    margin-bottom: 20px; 
}

.rm-simulator-wrapper table.rm-tbl th,
.rm-simulator-wrapper table.rm-tbl td { 
    padding: 10px 14px; 
}

.rm-simulator-wrapper table.rm-tbl tbody th { 
    width: 40%; 
}

.rm-simulator-wrapper table.rm-tbl tbody td { 
    width: 60%; 
    text-align: right; 
}

.rm-simulator-wrapper table.rm-tbl tr.rm-total th,
.rm-simulator-wrapper table.rm-tbl tr.rm-total td { 
    font-weight: bold; 
}

/* 機種シリーズグループ */
.rm-simulator-wrapper .rm-series-group {
    margin-bottom: 12px;
}

.rm-simulator-wrapper .rm-series-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
    padding-left: 2px;
}

.rm-simulator-wrapper .rm-series-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 4px 2px;
}

.rm-simulator-wrapper .rm-series-arrow::before {
    content: '▶';
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
    display: inline-block;
}

.rm-simulator-wrapper .rm-series-toggle.open .rm-series-arrow::before {
    transform: rotate(90deg);
}

.rm-simulator-wrapper .rm-series-collapsed {
    display: none;
}

/* CLS対策: 機種カード画像のaspect-ratioを固定 */
.rm-simulator-wrapper .rm-device-card img {
    width: 80px; 
    height: 80px; 
    object-fit: contain; 
    margin-bottom: 6px;
    aspect-ratio: 1 / 1; /* CLS防止 */
}

.rm-simulator-wrapper .rm-device-card .rm-dname { 
    font-size: 13px; 
    font-weight: 600; 
    line-height: 1.3; 
}

/* 合計ボックス */
.rm-simulator-wrapper .rm-result-box {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 16px;
}

.rm-simulator-wrapper .rm-result-label { 
    font-size: 14px; 
    color: #666; 
    margin-bottom: 4px; 
}

.rm-simulator-wrapper .rm-result-price { 
    font-size: 32px; 
    font-weight: bold; 
    color: #ff008c; 
}

.rm-simulator-wrapper .rm-result-price small { 
    font-size: 16px; 
    font-weight: normal; 
    color: #333; 
}

.rm-simulator-wrapper .rm-result-sub { 
    font-size: 13px; 
    color: #888; 
    margin-top: 6px; 
}

/* ポイント還元 */
.rm-simulator-wrapper .rm-point-tag {
    display: inline-block; 
    background: #ff008c; 
    color: #fff; 
    font-size: 12px; 
    font-weight: bold;
    padding: 2px 8px; 
    border-radius: 10px; 
    margin-left: 4px; 
    vertical-align: middle;
}

/* 注記 */
.rm-simulator-wrapper .rm-note { 
    font-size: 12px; 
    color: #999; 
    margin-top: 12px; 
    line-height: 1.5; 
}

/* 結果ブロック見出し */
.rm-simulator-wrapper .rm-block-title {
    text-align: center; 
    font-size: 1.1em; 
    font-weight: bold; 
    margin: 20px 0 10px;
    padding-bottom: 8px;
}

/* CTAボタン */
.rm-simulator-wrapper .rm-cta-wrap { 
    text-align: center; 
    margin: 20px 0 8px; 
}

.rm-simulator-wrapper .rm-cta-btn {
    display: inline-block; 
    padding: 16px 40px; 
    font-size: 16px; 
    font-weight: bold; 
    color: #fff;
    background: linear-gradient(135deg, #ff008c 0%, #ff5ca8 100%);
    border: none; 
    border-radius: 50px; 
    cursor: pointer; 
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255, 0, 140, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.rm-simulator-wrapper .rm-cta-btn:hover {
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(255, 0, 140, 0.4);
}

.rm-simulator-wrapper .rm-cta-btn:active { 
    transform: translateY(0); 
}

/* データ鮮度インジケーター */
.rm-simulator-wrapper .rm-freshness {
    text-align: center; 
    font-size: 12px; 
    color: #999; 
    margin-top: 16px; 
    padding: 8px 0;
}

/* 緊急性バッジ */
.rm-simulator-wrapper .rm-urgency {
    display: inline-block; 
    background: #e60033; 
    color: #fff; 
    font-size: 13px; 
    font-weight: bold;
    padding: 4px 14px; 
    border-radius: 4px; 
    margin-bottom: 12px;
    animation: rm-pulse 2s infinite;
}

@keyframes rm-pulse { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0.7; } 
}

/* iPhone 16e 特価バナー */
.rm-simulator-wrapper .rm-special-banner {
    background: linear-gradient(135deg, #ff008c 0%, #ff5ca8 100%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(255, 0, 140, 0.3);
    animation: rm-pulse 2s infinite;
}

/* 一覧表の特価表示 */
.rm-simulator-wrapper .rm-list-special {
    display: inline-block;
    background: linear-gradient(135deg, #ff008c 0%, #ff5ca8 100%);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}

/* 最安プランハイライト */
.rm-simulator-wrapper .rm-best-deal {
    background: #fffbe6; 
    border: 1px solid #ffd700; 
    border-radius: 8px;
    padding: 12px 16px; 
    margin: 12px 0; 
    font-size: 14px; 
    text-align: center;
}

.rm-simulator-wrapper .rm-best-deal strong { 
    color: #ff008c; 
}

/* キャンペーンバナー */
.rm-simulator-wrapper .rm-campaign-banners { 
    margin-top: 16px; 
}

.rm-simulator-wrapper .rm-campaign-banners a { 
    display: block; 
    margin-bottom: 10px; 
}

.rm-simulator-wrapper .rm-campaign-banners img {
    width: 100%; 
    height: auto; 
    border-radius: 8px; 
    transition: opacity 0.2s;
}

.rm-simulator-wrapper .rm-campaign-banners img:hover { 
    opacity: 0.85; 
}

/* エラー表示 */
.rm-simulator-wrapper .rm-error-box { 
    text-align: center; 
    padding: 40px 20px; 
}

.rm-simulator-wrapper .rm-error-msg { 
    color: #d32f2f; 
    font-size: 15px; 
    margin-bottom: 16px; 
}

.rm-simulator-wrapper .rm-retry-btn {
    display: inline-block; 
    padding: 10px 24px; 
    font-size: 14px; 
    font-weight: bold;
    color: #fff; 
    background: #ff008c; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer;
    transition: background 0.2s;
}

.rm-simulator-wrapper .rm-retry-btn:hover { 
    background: #e0007c; 
}

/* 一覧表モード */
.rm-simulator-wrapper .rm-list-heading { 
    font-size: 1.1em; 
    font-weight: bold; 
    margin: 0 0 12px; 
}

.rm-simulator-wrapper .rm-list-tabs { 
    display: flex; 
    gap: 0; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #e0e0e0; 
}

.rm-simulator-wrapper .rm-list-tabs button {
    background: none; 
    border: none; 
    border-bottom: 3px solid transparent;
    padding: 10px 20px; 
    font-size: 14px; 
    font-weight: 600; 
    cursor: pointer;
    color: #666; 
    transition: color 0.15s, border-color 0.15s;
}

.rm-simulator-wrapper .rm-list-tabs button:hover { 
    color: #ff008c; 
}

.rm-simulator-wrapper .rm-list-tabs button.active { 
    color: #ff008c; 
    border-bottom-color: #ff008c; 
}

.rm-simulator-wrapper table.rm-list-tbl { 
    width: 100%; 
    border-collapse: collapse; 
    table-layout: fixed; 
}

.rm-simulator-wrapper table.rm-list-tbl thead th {
    padding: 10px 12px; 
    vertical-align: middle;
    position: sticky; 
    top: 0; 
    z-index: 2;
}

.rm-simulator-wrapper table.rm-list-tbl td,
.rm-simulator-wrapper table.rm-list-tbl tbody th {
    padding: 10px 12px; 
    vertical-align: middle;
}

.rm-simulator-wrapper table.rm-list-tbl thead th.rm-sortable { 
    cursor: pointer; 
    user-select: none; 
}

.rm-simulator-wrapper table.rm-list-tbl thead th.rm-sortable::after { 
    content: ' ↕'; 
    font-size: 10px; 
    opacity: 0.4; 
}

.rm-simulator-wrapper table.rm-list-tbl thead th.rm-sort-asc::after { 
    content: ' ↑'; 
    opacity: 1; 
}

.rm-simulator-wrapper table.rm-list-tbl thead th.rm-sort-desc::after { 
    content: ' ↓'; 
    opacity: 1; 
}

.rm-simulator-wrapper table.rm-list-tbl thead th:nth-child(1) { 
    width: 30%; 
}

.rm-simulator-wrapper table.rm-list-tbl thead th:nth-child(2) { 
    width: 45%; 
}

.rm-simulator-wrapper table.rm-list-tbl thead th:nth-child(3) { 
    width: 25%; 
}

.rm-simulator-wrapper .rm-list-cpn { 
    font-size: 11px; 
    line-height: 1.5; 
}

.rm-simulator-wrapper .rm-list-cpn ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

.rm-simulator-wrapper .rm-list-cpn li::before { 
    content: '・'; 
}

.rm-simulator-wrapper .rm-list-price { 
    font-weight: bold; 
    color: #ff008c; 
    white-space: nowrap; 
    font-size: 16px; 
}

.rm-simulator-wrapper .rm-list-original { 
    font-size: 12px; 
    color: #999; 
    text-decoration: line-through; 
}

.rm-simulator-wrapper .rm-list-cond { 
    font-size: 11px; 
    color: #888; 
}

/* ===== 一覧表モード: PC テーブル ===== */
.rm-simulator-wrapper .rm-tbl-device-header {
    font-size: 1.05em;
    font-weight: bold;
    padding: 10px 14px;
    background: #f5f5f5;
    border-left: 4px solid #ff008c;
    margin-top: 24px;
    margin-bottom: 0;
    border-radius: 4px 4px 0 0;
}

.rm-simulator-wrapper .rm-tbl-device-header:first-child {
    margin-top: 0;
}

.rm-simulator-wrapper .rm-tbl-device-header a {
    text-decoration: none;
}

.rm-simulator-wrapper table.rm-list-tbl-detail {
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
}

.rm-simulator-wrapper table.rm-list-tbl-detail thead th:nth-child(1) { width: 10%; }
.rm-simulator-wrapper table.rm-list-tbl-detail thead th:nth-child(2) { width: 15%; }
.rm-simulator-wrapper table.rm-list-tbl-detail thead th:nth-child(3) { width: 55%; }
.rm-simulator-wrapper table.rm-list-tbl-detail thead th:nth-child(4) { width: 20%; }

.rm-simulator-wrapper table.rm-list-tbl-detail td,
.rm-simulator-wrapper table.rm-list-tbl-detail th {
    vertical-align: middle;
    text-align: left;
}

.rm-simulator-wrapper table.rm-list-tbl-detail td:last-child {
    text-align: right;
}

.rm-simulator-wrapper .rm-cpn-amt {
    font-weight: bold;
    white-space: nowrap;
}

/* ===== 一覧表モード: スマホ アコーディオンカード ===== */
.rm-simulator-wrapper .rm-mob-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.rm-simulator-wrapper .rm-mob-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
}

.rm-simulator-wrapper .rm-mob-card-head img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.rm-simulator-wrapper .rm-mob-card-info {
    flex: 1;
    min-width: 0;
}

.rm-simulator-wrapper .rm-mob-card-name {
    display: block;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm-simulator-wrapper .rm-mob-card-min {
    font-size: 13px;
}

.rm-simulator-wrapper .rm-mob-toggle {
    flex-shrink: 0;
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.rm-simulator-wrapper .rm-mob-detail {
    padding: 0 12px 12px;
    border-top: 1px solid #f0f0f0;
}

.rm-simulator-wrapper .rm-mob-cap-label {
    font-weight: bold;
    font-size: 13px;
    padding: 8px 0 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}

.rm-simulator-wrapper .rm-mob-row {
    padding: 8px 0;
    border-bottom: 1px solid #f8f8f8;
}

.rm-simulator-wrapper .rm-mob-row-pay {
    font-size: 12px;
    margin-bottom: 2px;
}

.rm-simulator-wrapper .rm-mob-row-price {
    font-size: 15px;
    margin-bottom: 4px;
}

.rm-simulator-wrapper .rm-mob-row-cpn {
    font-size: 12px;
}

.rm-simulator-wrapper .rm-mob-row-cpn ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rm-simulator-wrapper .rm-mob-row-cpn li::before {
    content: '・';
}

/* レスポンシブ */
@media (max-width: 600px) {
    .rm-simulator-wrapper .rm-sec { 
        padding: 16px; 
    }
    
    .rm-simulator-wrapper .rm-btn-group label { 
        padding: 8px 12px; 
        font-size: 13px; 
    }
    
    .rm-simulator-wrapper .rm-result-price { 
        font-size: 26px; 
    }
    
    .rm-simulator-wrapper .rm-cta-btn { 
        padding: 14px 28px; 
        font-size: 15px; 
    }
    
    .rm-simulator-wrapper table.rm-list-tbl { 
        font-size: 12px; 
    }
    
    .rm-simulator-wrapper table.rm-list-tbl th, 
    .rm-simulator-wrapper table.rm-list-tbl td { 
        padding: 8px 6px; 
    }
    
    .rm-simulator-wrapper .rm-list-price { 
        font-size: 14px; 
    }
}