/* ベース設定 */
#rss-sim-modern {
    max-width: 580px;
    margin: 40px auto;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.rss-card { background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; border: 1px solid rgba(0,0,0,0.05); }
.rss-header { background: linear-gradient(135deg, #ff008c 0%, #cc0070 100%); color: #fff; padding: 24px; text-align: center; }
.rss-header-sub { display: block; font-size: 13px; opacity: 0.9; margin-bottom: 5px; letter-spacing: 1px; font-weight: bold; }
.rss-header-title { margin: 0; font-size: 24px; font-weight: 900; }
.rss-body { padding: 30px; }
.rss-input-group { margin-bottom: 24px; }
.rss-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; color: #333; border-left: 4px solid #ff008c; padding-left: 8px;}
.rss-warning-msg { color: #d32f2f; font-size: 12px; margin-top: 5px; font-weight: bold; }

/* フォーム部品 */
.rss-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.rss-radio-label { 
    flex: 1; 
    min-width: 100px; 
    border: 2px solid #e0e0e0; 
    border-radius: 8px; 
    padding: 12px 5px; 
    text-align: center; 
    cursor: pointer; 
    font-size: 13px; 
    font-weight: bold; 
    color: #555; 
    transition: all 0.2s ease; 
    background: #f9f9f9; 
    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: #ff008c; background: #fff0f7; color: #ff008c; }

.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: 14px 16px; font-size: 15px; 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-user-pay:focus, #rss-plan-select:focus, #rss-call-option:focus { border-color: #ff008c; background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(255, 0, 140, 0.1); }
.rss-unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: bold; color: #888; }
.rss-select-wrapper::after { content: ''; position: absolute; right: 16px; 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-weight: bold; font-size: 14px; }
#rss-family-discount { display: none; }
.rss-checkbox-custom { width: 22px; height: 22px; border: 2px solid #ccc; border-radius: 6px; margin-right: 12px; position: relative; transition: all 0.2s; flex-shrink: 0;}
#rss-family-discount:checked + .rss-checkbox-custom { background-color: #ff008c; border-color: #ff008c; }
#rss-family-discount:checked + .rss-checkbox-custom::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rss-discount-tag { background: #ffebf5; color: #ff008c; font-size: 12px; padding: 3px 8px; border-radius: 4px; margin-left: 8px; white-space: nowrap;}

/* 年齢割引メッセージ */
.rss-discount-msg {
    color: #ff008c;
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    background: #ffebf5;
    padding: 8px;
    border-radius: 6px;
    animation: fadeIn 0.3s;
}

/* 結果エリア */
#rss-result-display { margin-top: 30px; animation: fadeIn 0.5s; border-top: 2px dashed #ff008c; padding-top: 30px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.rss-result-container { text-align: center; }

/* 毎月の節約額 */
.rss-saving-monthly { color: #ff008c; line-height: 1; margin-bottom: 24px; transition: color 0.3s; }
.rss-saving-monthly.rss-is-expensive { color: #555; }
.rss-saving-monthly.rss-is-expensive .rss-num-main { color: #333; }
.rss-text-small { font-size: 16px; font-weight: bold; }
.rss-num-main { font-size: 52px; font-weight: 900; letter-spacing: -2px; }
.rss-unit-main { font-size: 24px; font-weight: bold; }
.rss-text-accent { font-size: 18px; font-weight: bold; margin-left: 2px; }

/* フォローアップメッセージ */
.rss-expensive-msg {
    font-size: 13px;
    color: #0072bf;
    background: #f5f9ff;
    padding: 12px;
    border-radius: 8px;
    margin-top: 10px;
    font-weight: normal;
    animation: fadeIn 0.3s;
    border: 1px solid #cce3f2;
}
.rss-expensive-msg strong { font-size: 14px; color: #00568f; }

/* 比較グラフ */
.rss-graph-box { margin-bottom: 24px; text-align: left; background: #fffcfd; padding: 20px; border-radius: 12px; border: 1px solid #ffebf5; }
.rss-graph-row { margin-bottom: 15px; display: flex; align-items: center; }
.rss-graph-row:last-child { margin-bottom: 0; }
.rss-graph-label { width: 90px; font-size: 13px; font-weight: bold; color: #555; line-height: 1.2; }
.rss-graph-bar-wrap { flex: 1; display: flex; align-items: center; background: #f0f0f0; border-radius: 8px; height: 32px; position: relative; padding-right: 60px; }
.rss-graph-bar { height: 100%; border-radius: 8px; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); width: 0%; }
.rss-bar-gray { background: #b3b3b3; }
.rss-bar-pink { background: linear-gradient(90deg, #ff4da6, #ff008c); box-shadow: 0 2px 5px rgba(255,0,140,0.3); }
.rss-graph-val { position: absolute; right: 0; font-size: 14px; font-weight: bold; color: #333; }
.rss-color-pink { color: #ff008c; }

/* 長期節約額カード */
.rss-longterm-box, .rss-merit-box { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.rss-longterm-card { 
    background: #fff; border: 2px solid #ffebf5; border-radius: 12px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); 
    display: flex; flex-direction: row; justify-content: space-between; align-items: center; 
    padding: 15px 20px;
}
.rss-longterm-badge { background: #333; color: #fff; padding: 4px 16px; border-radius: 20px; font-size: 13px; font-weight: bold; }
.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: #ff008c; font-size: 28px; font-weight: 900; line-height: 1; margin: 0; }
.rss-save-text-wrap { font-size: 16px; font-weight: bold; color: #333; line-height: 1; display: inline-block; }
.rss-bonus-note { font-size: 11px; color: #888; margin-top: 4px; font-weight: bold; }

/* 実質料金キャンペーンエリア */
.rss-campaign-box {
    background: #fffcfd;
    border: 2px solid #ffebf5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
    animation: fadeIn 0.5s;
}
.rss-campaign-title {
    display: inline-block;
    background: #ff008c;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 15px;
}
.rss-campaign-text {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: bold;
}
.rss-real-num {
    font-size: 36px;
    color: #ff008c;
    font-weight: 900;
    letter-spacing: -1px;
}
.rss-real-unit {
    font-size: 16px;
    color: #ff008c;
    font-weight: bold;
    margin-left: 2px;
}
.rss-timeline-graph {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    height: 140px;
    padding-top: 30px;
    border-top: 2px dashed #ffebf5;
    margin-top: 10px;
}
.rss-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
}
.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: 6px 6px 0 0;
    position: relative;
    transition: height 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    height: 0%;
}
.rss-timeline-val {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 14px;
    color: #ff008c;
    white-space: nowrap;
}
.rss-timeline-val.val-gray { color: #555; }
.rss-timeline-label {
    font-size: 12px;
    font-weight: bold;
    color: #555;
    line-height: 1.3;
}
.rss-timeline-sub {
    font-size: 10px;
    font-weight: normal;
    color: #888;
}

/* メリットカード */
.rss-merit-item { 
    background: #fffcfd; border-radius: 12px; border: 1px solid #ffebf5; 
    box-shadow: 0 2px 8px rgba(255,0,140,0.05); display: flex; flex-direction: row; 
    align-items: center; padding: 15px 20px; gap: 15px;
}
.rss-merit-icon { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; width: 42px; height: 42px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(255,0,140,0.1); }
.rss-merit-text { text-align: left; line-height: 1.4; }
.rss-merit-sub { color: #888; font-size: 12px; font-weight: normal; }
.rss-merit-main { color: #ff008c; font-size: 15px; 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 #eee; border-radius: 12px; padding: 20px; margin-bottom: 15px; text-align: left; }
.rss-rakuten-label { font-size: 14px; color: #333; margin: 0 0 15px 0; font-weight: bold; text-align: center; border-bottom: 2px solid #f5f5f5; padding-bottom: 10px; }
.rss-bd-item { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; color: #555; }
.rss-discount { color: #ff008c; font-weight: bold; }
.rss-breakdown-total { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 2px dashed #ff008c; font-weight: 900; font-size: 16px; color: #333; }
.rss-total-val { font-size: 22px; color: #ff008c; }

/* 注釈 */
.rss-notes-box { text-align: left; background: #f9f9f9; padding: 15px; border-radius: 10px; font-size: 11px; color: #666; margin-bottom: 24px; }
.rss-notes-box ul { margin: 0; padding-left: 0; list-style: none; }
.rss-notes-box li { margin-bottom: 6px; line-height: 1.5; }
.rss-notes-box li:last-child { margin-bottom: 0; }

/* CTA */
.rss-cta-box { border-radius: 16px; padding: 25px 20px; text-align: center; animation: fadeIn 0.5s; }
.rss-cta-mikitani { background: #fff0f7; border: 2px solid #ff008c; box-shadow: 0 8px 20px rgba(255,0,140,0.15); }
.rss-cta-device { background: #f5f9ff; border: 2px solid #0072bf; box-shadow: 0 8px 20px rgba(0,114,191,0.15); }
.rss-cta-catch { margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #333; }
.rss-cta-title { margin: 0 0 20px 0; font-size: 18px; font-weight: 900; line-height: 1.4; }
.rss-cta-mikitani .rss-cta-title { color: #bf0000; }
.rss-cta-device .rss-cta-title { color: #00568f; }
.rss-cta-btn { display: block; width: 100%; padding: 16px; border-radius: 50px; font-size: 18px; font-weight: bold; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.rss-cta-mikitani .rss-cta-btn { background: #ff008c; color: #fff; box-shadow: 0 4px 15px rgba(255, 0, 140, 0.3); }
.rss-cta-mikitani .rss-cta-btn:hover { background: #e6007e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 0, 140, 0.4); color: #fff;}
.rss-cta-device .rss-cta-btn { background: #0072bf; color: #fff; box-shadow: 0 4px 15px rgba(0, 114, 191, 0.3); }
.rss-cta-device .rss-cta-btn:hover { background: #00568f; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 114, 191, 0.4); color: #fff;}

/* 極小画面向け */
@media (max-width: 480px) {
    .rss-graph-label { width: 80px; font-size: 12px; }
    .rss-num-main { font-size: 40px; }
}