/* ベース設定 */
#rss-sim-modern {
    max-width: 720px;
    margin: 32px auto;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    color: #222;
    line-height: 1.7;
    font-size: 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.rss-card { background: #fff; border-radius: 6px; border: 1px solid #ddd; overflow: hidden; }
.rss-header { background: #fafafa; color: #222; padding: 18px 22px; text-align: left; border-bottom: 1px solid #ddd; }
.rss-header-sub { display: block; font-size: 16px; color: #555; margin-bottom: 6px; font-weight: normal; }
.rss-header-title { margin: 0; font-size: 16px; font-weight: bold; }
.rss-body { padding: 24px; }
.rss-input-group { margin-bottom: 22px; }
.rss-label { display: block; font-weight: bold; font-size: 16px; margin-bottom: 10px; color: #222; border-left: 3px solid #5473b7; padding-left: 10px; }
.rss-warning-msg { color: #c0392b; font-size: 14px; margin-top: 5px; }

/* フォーム部品 */
.rss-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.rss-radio-label {
    flex: 1;
    min-width: 110px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rss-radio-label input[type="radio"] { display: none; }
.rss-radio-label:has(input:checked) { border-color: #5473b7; background: #f0f4fb; color: #5473b7; font-weight: bold; }

.rss-input-wrapper, .rss-select-wrapper { position: relative; }
#rss-user-pay::-webkit-outer-spin-button, #rss-user-pay::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#rss-user-pay { -moz-appearance: textfield; }
#rss-user-pay, #rss-plan-select, #rss-call-option { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; background: #fff; box-sizing: border-box; appearance: none; color: #222; }
#rss-user-pay:focus, #rss-plan-select:focus, #rss-call-option:focus { border-color: #5473b7; outline: none; }
.rss-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #666; font-size: 16px; }
.rss-select-wrapper::after { content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #888; pointer-events: none; }

.rss-checkbox-group { margin-top: 10px; }
.rss-checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 16px; }
#rss-family-discount { display: none; }
.rss-checkbox-custom { width: 20px; height: 20px; border: 1px solid #aaa; border-radius: 3px; margin-right: 12px; position: relative; flex-shrink: 0; background: #fff; }
#rss-family-discount:checked + .rss-checkbox-custom { background-color: #5473b7; border-color: #5473b7; }
#rss-family-discount:checked + .rss-checkbox-custom::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rss-discount-tag { background: #f0f4fb; color: #5473b7; font-size: 16px; padding: 3px 8px; border-radius: 2px; margin-left: 8px; white-space: nowrap; border: 1px solid #d4dff0; }

/* 年齢割引メッセージ */
.rss-discount-msg {
    color: #5473b7;
    font-size: 16px;
    margin-top: 10px;
    background: #f0f4fb;
    padding: 8px 12px;
    border-radius: 3px;
    border-left: 3px solid #5473b7;
}

/* 結果エリア */
@keyframes rssFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rssFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#rss-result-display { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ddd; animation: rssFadeUp 0.4s ease-out; }
.rss-result-container { text-align: left; }

/* 毎月の節約額 (結果表示時に下から軽くフワッと表示) */
.rss-saving-monthly { color: #5473b7; line-height: 1.3; margin-bottom: 20px; padding: 16px 20px; background: #f0f4fb; border: 1px solid #d4dff0; border-radius: 4px; animation: rssFadeUp 0.5s ease-out 0.1s backwards; }
.rss-saving-monthly.rss-is-expensive { color: #555; background: #f5f5f5; border-color: #ddd; }
.rss-saving-monthly.rss-is-expensive .rss-num-main { color: #333; }
.rss-text-small { font-size: 16px; }
.rss-num-main { font-size: 40px; font-weight: bold; }
.rss-unit-main { font-size: 18px; }
.rss-text-accent { font-size: 16px; margin-left: 6px; }

/* フォローアップメッセージ */
.rss-expensive-msg {
    font-size: 16px;
    color: #0a4f7a;
    background: #f5f9fc;
    padding: 12px;
    border-radius: 3px;
    margin-top: 10px;
    border-left: 3px solid #0a4f7a;
}
.rss-expensive-msg strong { font-size: 16px; color: #0a4f7a; }

/* 比較グラフ */
.rss-graph-box { margin-bottom: 20px; text-align: left; background: #fafafa; padding: 16px; border-radius: 4px; border: 1px solid #e5e5e5; animation: rssFadeUp 0.5s ease-out 0.2s backwards; }
.rss-graph-row { margin-bottom: 12px; display: flex; align-items: center; }
.rss-graph-row:last-child { margin-bottom: 0; }
.rss-graph-label { width: 100px; font-size: 16px; color: #444; line-height: 1.3; }
.rss-graph-bar-wrap { flex: 1; display: flex; align-items: center; background: #ececec; border-radius: 2px; height: 28px; position: relative; padding-right: 70px; }
.rss-graph-bar { height: 100%; border-radius: 2px; width: 0%; transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
.rss-bar-gray { background: #999; }
.rss-bar-pink { background: #5473b7; }
.rss-graph-val { position: absolute; right: 0; font-size: 16px; color: #222; }
.rss-color-pink { color: #5473b7; }

/* 長期節約額カード */
.rss-longterm-box { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; animation: rssFadeUp 0.5s ease-out 0.3s backwards; }
.rss-merit-box { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; animation: rssFadeUp 0.5s ease-out 0.5s backwards; }
.rss-longterm-card {
    background: #fff; border: 1px solid #ddd; border-radius: 4px;
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    padding: 14px 18px;
}
.rss-longterm-badge { background: #444; color: #fff; padding: 3px 12px; border-radius: 2px; font-size: 16px; }
.rss-longterm-content { display: flex; flex-direction: column; align-items: flex-end; }
.rss-longterm-amount { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.rss-save-num { color: #5473b7; font-size: 26px; font-weight: bold; line-height: 1; margin: 0; }
.rss-save-text-wrap { font-size: 16px; color: #333; line-height: 1; display: inline-block; }
.rss-bonus-note { font-size: 12px; color: #888; margin-top: 4px; }

/* 実質料金キャンペーンエリア */
.rss-campaign-box {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 18px;
    margin-bottom: 20px;
    animation: rssFadeUp 0.5s ease-out 0.4s backwards;
}
.rss-campaign-title {
    display: inline-block;
    background: #5473b7;
    color: #fff;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 12px;
    font-weight: bold;
}
.rss-campaign-text {
    font-size: 16px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 16px;
}
.rss-real-num {
    font-size: 30px;
    color: #5473b7;
    font-weight: bold;
}
.rss-real-unit {
    font-size: 16px;
    color: #5473b7;
    margin-left: 3px;
    font-weight: bold;
}
.rss-timeline-graph {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    height: 150px;
    padding-top: 30px;
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
}
.rss-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 130px;
}
.rss-timeline-bar-wrap {
    height: 100px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 10px;
}
.rss-timeline-bar {
    width: 50px;
    border-radius: 2px 2px 0 0;
    position: relative;
    height: 0%;
    transition: height 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.rss-timeline-val {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #5473b7;
    white-space: nowrap;
    font-weight: bold;
}
.rss-timeline-val.val-gray { color: #555; }
.rss-timeline-label {
    font-size: 16px;
    color: #444;
    line-height: 1.4;
}
.rss-timeline-sub {
    font-size: 12px;
    color: #888;
}

/* メリットカード */
.rss-merit-item {
    background: #fff; border-radius: 4px; border: 1px solid #e5e5e5;
    display: flex; flex-direction: row;
    align-items: center; padding: 14px 18px; gap: 14px;
}
.rss-merit-icon { display: flex; align-items: center; justify-content: center; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 3px; width: 38px; height: 38px; flex-shrink: 0; }
.rss-merit-text { text-align: left; line-height: 1.5; }
.rss-merit-sub { color: #888; font-size: 16px; }
.rss-merit-main { color: #5473b7; font-size: 16px; font-weight: bold; }

/* PC向けレイアウト */
@media (min-width: 481px) {
    .rss-longterm-box, .rss-merit-box { flex-direction: row; }
    .rss-longterm-card, .rss-merit-item { flex: 1; flex-direction: column; justify-content: center; text-align: center; padding: 20px 15px; }
    .rss-longterm-badge { margin-bottom: 10px; }
    .rss-merit-item { gap: 10px; }
    .rss-merit-text { text-align: center; }
    .rss-longterm-amount { justify-content: center; }
    .rss-longterm-content { align-items: center; }
}

/* 580px以下のとき、年齢選択を1行1項目に */
@media (max-width: 580px) {
    .rss-input-group:nth-child(3) .rss-radio-group { flex-direction: column; }
}

/* スマホ時の入力フォーム */
@media (max-width: 480px) {
    .rss-body { padding: 20px 15px; }
    .rss-radio-group { flex-direction: column; }
    .rss-radio-label { width: 100%; padding: 14px 15px; }
}

/* 内訳 */
.rss-breakdown-box { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 16px 20px; margin-bottom: 14px; text-align: left; animation: rssFadeUp 0.5s ease-out 0.6s backwards; }
.rss-rakuten-label { font-size: 16px; color: #333; margin: 0 0 12px 0; font-weight: bold; text-align: left; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px; }
.rss-bd-item { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 6px; color: #444; }
.rss-discount { color: #5473b7; }
.rss-breakdown-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ddd; font-weight: bold; font-size: 16px; color: #222; }
.rss-total-val { font-size: 18px; color: #5473b7; }

/* 注釈 */
.rss-notes-box { text-align: left; background: #fafafa; padding: 12px 16px; border-radius: 3px; font-size: 12px; color: #666; margin-bottom: 18px; border: 1px solid #eee; }
.rss-notes-box ul { margin: 0; padding-left: 0; list-style: none; }
.rss-notes-box li { margin-bottom: 5px; line-height: 1.6; }
.rss-notes-box li:last-child { margin-bottom: 0; }

/* CTA */
.rss-cta-box { border-radius: 4px; padding: 18px; text-align: center; animation: rssFadeUp 0.5s ease-out 0.7s backwards; transition: transform 0.2s ease; }
.rss-cta-btn { transition: background 0.2s ease, transform 0.15s ease; }
.rss-cta-btn:hover { transform: translateY(-1px); }
/* 楽天モバイルCTA: 楽天ブランド色を維持 (汎用色 #5473b7 とは別) */
.rss-cta-mikitani { background: #fff5f9; border: 1px solid #f5d4e0; }
.rss-cta-device { background: #f5f9fc; border: 1px solid #d4e5f0; }
.rss-cta-catch { margin: 0 0 8px 0; font-size: 16px; color: #555; }
.rss-cta-title { margin: 0 0 14px 0; font-size: 17px; font-weight: bold; line-height: 1.5; }
.rss-cta-mikitani .rss-cta-title { color: #bf0060; }
.rss-cta-device .rss-cta-title { color: #0a4f7a; }
.rss-cta-btn { display: block; width: 100%; padding: 14px; border-radius: 4px; font-size: 16px; font-weight: bold; text-decoration: none; box-sizing: border-box; }
.rss-cta-mikitani .rss-cta-btn { background: #bf0060; color: #fff; }
.rss-cta-mikitani .rss-cta-btn:hover { background: #99004d; color: #fff; }
.rss-cta-device .rss-cta-btn { background: #0a4f7a; color: #fff; }
.rss-cta-device .rss-cta-btn:hover { background: #073d5e; color: #fff; }

/* 極小画面向け */
@media (max-width: 480px) {
    .rss-body { padding: 18px 14px; }
    .rss-graph-label { width: 90px; }
    .rss-num-main { font-size: 32px; }
    .rss-real-num { font-size: 26px; }
}

/* ===== [rakuten_carrier_compare] 比較ショートコード ===== */
.rss-cmp-modern {
    max-width: 720px;
    margin: 32px auto;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    color: #222;
    line-height: 1.6;
    font-size: 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
    animation: rssFadeUp 0.4s ease-out;
}
.rss-cmp-error { padding: 16px; background: #fff5f5; border: 1px solid #ffd1d1; color: #b00; border-radius: 8px; margin: 20px 0; font-size: 13px; }

.rss-cmp-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.rss-cmp-ctrl { display: flex; flex-direction: column; gap: 6px; }
.rss-cmp-ctrl .rss-label { margin-bottom: 4px; }
.rss-cmp-ctrl select {
    width: 100%; padding: 12px 16px; font-size: 14px; font-weight: bold;
    border: 2px solid #e0e0e0; border-radius: 8px; background: #f9f9f9;
    transition: all 0.3s ease; box-sizing: border-box; appearance: none; color: #333;
}
.rss-cmp-ctrl select:focus { border-color: #5473b7; outline: none; }

.rss-cmp-result {
    background: #fff; border: 1px solid #ddd; border-radius: 4px;
    overflow: hidden; margin-bottom: 14px;
}
.rss-cmp-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #eee;
    font-size: 14px;
    align-items: center;
}
.rss-cmp-row:first-child { border-top: none; }
.rss-cmp-header-row {
    background: #f5f5f5;
    font-weight: bold;
    font-size: 12px;
    color: #555;
    padding: 8px 14px;
}
.rss-cmp-row-rakuten {
    background: #fafafa;
    border-left: 3px solid #5473b7;
    padding-left: 11px;
}
.rss-cmp-row-rakuten .rss-cmp-cell-name { color: #5473b7; font-weight: bold; }
.rss-cmp-row-rakuten .rss-cmp-cell-price { color: #5473b7; font-weight: bold; }

.rss-cmp-cell-name { font-weight: bold; line-height: 1.3; }
.rss-cmp-cell-name .rss-cmp-plan-sub { display: block; font-size: 11px; color: #888; font-weight: normal; margin-top: 2px; }
.rss-cmp-cell-price { text-align: right; }
.rss-cmp-cell-diff { text-align: right; font-size: 13px; }
.rss-cmp-diff-up { color: #c0392b; }
.rss-cmp-diff-down { color: #2e7d32; }
.rss-cmp-diff-zero { color: #888; }
.rss-cmp-diff-self { color: #5473b7; font-size: 11px; }
.rss-cmp-row-na { color: #aaa; }
.rss-cmp-row-na .rss-cmp-cell-price,
.rss-cmp-row-na .rss-cmp-cell-diff { color: #aaa; font-weight: normal; font-size: 12px; }

.rss-cmp-savings {
    text-align: left;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.rss-cmp-savings-monthly { color: #5473b7; line-height: 1.4; }
.rss-cmp-save-num { font-size: 24px; font-weight: bold; }
.rss-cmp-save-yearly { margin-top: 4px; font-size: 12px; color: #555; }
.rss-cmp-save-yearly span { color: #5473b7; font-weight: bold; font-size: 13px; }

.rss-cmp-cta { margin-bottom: 12px; }
.rss-cmp-note { font-size: 11px; color: #888; line-height: 1.5; margin: 0; }

@media (max-width: 480px) {
    .rss-cmp-row { grid-template-columns: 1.4fr 1fr 1fr; padding: 9px 10px; font-size: 13px; }
    .rss-cmp-header-row { font-size: 11px; padding: 7px 10px; }
    .rss-cmp-cell-name .rss-cmp-plan-sub { font-size: 10px; }
    .rss-cmp-save-num { font-size: 20px; }
}

/* ===== text="on" 解説文 (rss-doc-*) ===== */
/* font-size / color はテーマの本文設定に従わせる (勝手にいじらない) */
.rss-doc {
    margin: 32px 0 0;
    padding: 0;
}
.rss-doc-disclaimer {
    /* 免責は補足情報なので小さくてよい */
    font-size: 12px;
    color: #888;
    background: #fafafa;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 0 0 20px;
    line-height: 1.6;
}
.rss-doc-p {
    margin: 0 0 14px;
}

.rss-doc table {
    margin-bottom: 20px;
}
.rss-doc table th,
.rss-doc table td {
    vertical-align: middle;
}
.rss-doc table thead th {
    text-align: center;
}
.rss-doc table tbody th {
    text-align: center;
}
.rss-doc table tbody td {
    text-align: left;
}

/* 比較表の直上に出す確認日。font-size/color はテーマに従う。 */
.rss-table-updated {
    margin: 0 0 4px;
    text-align: right;
}

/* 出典明示 (各キャリア比較表の直下)
   font-size / color はテーマ側のスタイルに従わせる。配置だけここで決める。 */
.rss-source-note {
    margin: -10px 0 24px;
    padding: 0;
    line-height: 1.6;
}

/* ===== 2年総額目安テーブル ===== */
/* tableタグの装飾はWordPress/SWELL側のテーブルスタイルに極力委ねる。
   border・thead背景・font-size・font-color・font-weightは指定しない。
   ここで指定するのは ｢項目名(thead/tbody-th)は中央寄せ、内容(td)は左寄せ｣
   ｢上下方向は中央寄せ｣ といった配置ルールのみ。 */
.rss-total-cost-table {
    width: 100%;
    margin: 16px 0 8px;
}
.rss-total-cost-table caption {
    text-align: left;
    padding: 8px 0;
}
.rss-total-cost-table thead th {
    text-align: center;
    vertical-align: middle;
}
.rss-total-cost-table tbody th {
    text-align: center;
    vertical-align: middle;
}
.rss-total-cost-table tbody td {
    text-align: left;
    vertical-align: middle;
}
.rss-total-cost-note {
    margin: -2px 0 20px;
    padding: 12px 14px;
    background-color: #f4f4f4;
    line-height: 1.6;
    border-radius: 4px;
}

/* タブ切り替え (JSなし、radio:checked + sibling combinator)
   FID対策: JSを使わずCSSだけで切り替えるためメインスレッドを止めない。 */
.rss-total-cost-wrap {
    margin-bottom: 24px;
}
.rss-tc-tabs {
    display: block;
}
.rss-tc-radio {
    /* スクリーンリーダ向けには残しつつ視覚的に隠す */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.rss-tc-tab {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 4px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    user-select: none;
}
.rss-tc-radio:checked + .rss-tc-tab {
    border-bottom-color: currentColor;
    font-weight: bold;
}
.rss-tc-radio:focus-visible + .rss-tc-tab {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* 初期状態: 割引なしを表示、割引フル適用は隠す */
.rss-tc-panel { display: none; }
/* 割引なし(一番目のラジオ)がcheckedのときベース側を表示 */
.rss-tc-radio-base:checked ~ .rss-tc-panel-base { display: block; }
.rss-tc-radio-disc:checked ~ .rss-tc-panel-disc { display: block; }

/* ===== 著者ボックス (記事末尾) ===== */
/* EEAT (Experience/Authoritativeness) を記事ページ単体で示すため、
   運営者情報と About への動線をまとめて表示する */
.rss-author-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 40px 0 24px;
    padding: 18px 20px;
    background: #f8f9fb;
    border: 1px solid #e0e4ec;
    border-left: 4px solid #5473b7;
    border-radius: 6px;
    line-height: 1.7;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
}
.rss-author-image {
    flex: 0 0 auto;
}
.rss-author-image img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.rss-author-body {
    flex: 1 1 auto;
    min-width: 0;
}
.rss-author-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.rss-author-name {
    font-size: 17px;
    font-weight: bold;
    color: #1a1a1a;
}
.rss-author-role {
    font-size: 13px;
    color: #666;
}
.rss-author-bio {
    margin: 0 0 10px;
    font-size: 14px;
    color: #444;
    line-height: 1.7;
}
.rss-author-bio strong {
    color: #1a1a1a;
}
.rss-author-link {
    margin: 0;
    font-size: 14px;
}
.rss-author-link a {
    color: #5473b7;
    text-decoration: underline;
}
.rss-author-link a:hover {
    text-decoration: none;
}
@media (max-width: 600px) {
    .rss-author-box {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px;
    }
    .rss-author-image img {
        width: 64px;
        height: 64px;
    }
}