/* Sim Campaign Compare - フロント表示 */

.scc-wrap {
    margin: 1.5em 0;
}

.scc-heading {
    display: block;
    margin: 0 0 .6em;
}

/* 横スクロール許容（モバイルで列が多い時） */
.scc-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* テーブル本体: theadに背景色なし / border:1px を付けない / フォント変更なし */
.scc-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* 比較表(ランキング以外)はキャリア列を厳密に均等幅にする(table-layout:fixed)。
   スマホはカード型に切替わるため、PC表は fixed で崩れない。 */
.scc-table:not(.scc-ranking) {
    width: 100%;
    table-layout: fixed;
}
.scc-table:not(.scc-ranking) th,
.scc-table:not(.scc-ranking) td {
    word-break: normal;
    overflow-wrap: anywhere;
}
/* 1列目(項目ラベル列)は狭めで固定。残りのキャリア列が均等に分配される */
.scc-table:not(.scc-ranking) .scc-col-label,
.scc-table:not(.scc-ranking) tbody th[scope="row"] {
    width: 84px;
}

.scc-table th,
.scc-table td {
    vertical-align: middle;
    padding: 12px 14px;
    border-bottom: 1px solid #e6e8eb;
}

/* 項目名(1列目のth)と見出し行のth: 中央寄せ。太字打消しはしない */
.scc-table thead th,
.scc-table tbody th[scope="row"],
.scc-table .scc-col-label {
    text-align: center;
}

/* 列ヘッダ(キャリアロゴ+キャリア名)は上下中央に揃える */
.scc-table thead th {
    vertical-align: middle;
}

/* 内容(td)は左寄せ */
.scc-table td {
    text-align: left;
}

/* CTA（申込ボタン） */
.scc-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1em 0 0;
}

.scc-cta {
    display: inline-block;
    padding: .7em 1.4em;
    border-radius: 8px;
    background: #e8511d;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.3;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}

.scc-cta:hover,
.scc-cta:focus {
    filter: brightness(1.05);
    color: #fff;
}

/* 更新日（表の右上に小さく） */
.scc-updated {
    margin: 0 0 .4em;
    text-align: right;
    font-size: .8em;
    color: #888;
}

.scc-cta--small {
    padding: .4em .9em;
    font-size: .9em;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

/* 申込列は折り返さず最小幅を確保 */
.scc-ranking td:last-child {
    white-space: nowrap;
    text-align: center;
}

/* 比較表の申込行のボタンは中央寄せ */
.scc-cta-tr td {
    text-align: center;
}

/* 適用条件・おすすめ機種の行は文字を小さく */
.scc-row-condition td,
.scc-row-devices td,
.scc-row-devices_ikkatsu td {
    font-size: .8em;
    color: #555;
}

/* 対象外表示 */
.scc-excluded {
    color: #999;
}

/* 新規契約で対象外キャリアの注記(表の下) */
.scc-excluded-note {
    margin: .6em 0 0;
    font-size: .85em;
    color: #777;
}

/* ランキングの特典額・還元方法セル（金額の下に還元方法） */
.scc-benefit-amount {
    display: block;
    font-weight: 700;
}
.scc-benefit-method {
    display: block;
    font-size: .85em;
    color: #666;
}

/* 分割付与の内訳（特典額の下に小さく） */
.scc-benefit-grant {
    display: block;
    margin-top: .2em;
    font-size: .8em;
    color: #888;
}

/* ランキング表: 1位行を少し強調 */
.scc-ranking tbody tr:first-child th[scope="row"] {
    font-weight: 700;
}

/* ランキングの順位セル: 順位 / ロゴ / キャリア名 を縦並び */
.scc-rank-cell {
    text-align: center;
}
.scc-rank-num,
.scc-rank-carrier {
    display: block;
}
.scc-rank-logo {
    display: block;
    margin: .3em auto;
    width: 80px;
    height: auto;
    object-fit: contain;
}

/* 比較表の列ヘッダ: 順位(ロゴの上) */
.scc-col-rank {
    display: block;
    margin: 0 0 .3em;
    font-weight: 700;
}

/* 比較表の列ヘッダ: ロゴ / キャンペーン名 を縦並び */
.scc-col-logo {
    display: block;
    margin: 0 auto .3em;
    width: 80px;
    height: auto;
    object-fit: contain;
}
.scc-col-name {
    display: block;
}

/* キャリア行セル: ロゴ画像をキャリア名の上に縦並び */
.scc-cell-logo {
    display: block;
    margin: 0 auto .3em;
    width: 80px;
    height: auto;
    object-fit: contain;
}
.scc-cell-carrier {
    display: block;
}

/* ===== レスポンシブ: PC=表 / スマホ=カード ===== */
/* 既定(PC)はカードを隠す(.scc-cards より後に書き、詳細度も同等以上にして確実に非表示) */
.scc-cards.scc-sp-only {
    display: none;
}

/* スマホ用カード(レイアウトのみ。表示制御は .scc-sp-only 側で行う) */
.scc-cards {
    gap: 16px;
}
.scc-card {
    border: 1px solid #e0e3e8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.scc-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25em;
    padding: 14px;
    background: #f5f7fa;
    border-bottom: 1px solid #e6e8eb;
}
.scc-card-rank {
    font-weight: 700;
}
.scc-card-logo {
    width: 96px;
    height: auto;
    object-fit: contain;
}
.scc-card-carrier {
    font-weight: 700;
}
.scc-card-body {
    margin: 0;
    padding: 4px 14px 12px;
}
.scc-card-body dt {
    margin-top: 12px;
    font-size: .8em;
    font-weight: 700;
    color: #666;
}
.scc-card-body dd {
    margin: 2px 0 0;
}
.scc-card-cta {
    padding: 0 14px 16px;
    text-align: center;
}
.scc-card-cta .scc-cta {
    display: block;
}

@media (max-width: 768px) {
    /* スマホ: 表(横スクロール)を隠してカードを表示 */
    .scc-scroll.scc-pc-only {
        display: none;
    }
    .scc-cards.scc-sp-only {
        display: grid;
    }
}

@media (max-width: 600px) {
    .scc-cta-row {
        flex-direction: column;
    }
    .scc-cta {
        text-align: center;
    }
}