/*
ふるさと納税制度改正対応CSS
完全統合版 - PHP識別子完全対応
*/

/* ===== 基本レイアウト ===== */
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.furusato-article {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* ===== ヘッダーセクション ===== */
.furusato-header {
    background: linear-gradient(135deg, #E6F2FA 0%, #F0F4F8 100%);
    padding: 2rem;
    border-radius: 12px 12px 0 0;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.furusato-header h1 {
    color: #2E86C1;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    text-align: center;
    line-height: 1.3;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

.publish-date {
    color: #7F8C8D;
    font-size: 0.9rem;
    font-weight: 500;
}

.category {
    background: #2E86C1;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.article-summary {
    background: rgba(255,255,255,0.8);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #2E86C1;
    margin-top: 1rem;
}

.article-summary p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #2C3E50;
}

/* ===== セクション共通スタイル ===== */
.introduction,
.reform-details,
.strategy-section,
.conclusion,
.faq-section,
.related-links {
    padding: 2rem;
    margin: 2rem 0;
}

.introduction {
    background: linear-gradient(135deg, #E9F7EF 0%, #F0F4F8 100%);
    border-radius: 12px;
    border-left: 5px solid #28B463;
}

.reform-details {
    background: linear-gradient(135deg, #FFF5E5 0%, #F0F4F8 100%);
    border-radius: 12px;
    border-left: 5px solid #E67E22;
}

/* ===== 計算ツールセクション ===== */
.furusato-calc {
    background: #F9F9F9;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border: 2px solid #E6F2FA;
}

.furusato-calc h2 {
    color: #2E86C1;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.calculator-container {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.simulation-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.input-group input,
.input-group select {
    padding: 0.8rem;
    border: 2px solid #E6F2FA;
    border-radius: 6px;
    background: #F9F9F9;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: #2E86C1;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.1);
}

/* ===== 結果表示 ===== */
.result-display {
    background: linear-gradient(135deg, #E9F7EF 0%, #F0F8FF 100%);
    padding: 2rem;
    border-radius: 8px;
    margin-top: 2rem;
    border: 2px solid #28B463;
}

.result-display h4 {
    color: #28B463;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin: 0.5rem 0;
    background: rgba(255,255,255,0.8);
    border-radius: 6px;
    border-left: 4px solid #28B463;
}

.result-item.difference {
    border-left-color: #E67E22;
    font-weight: 700;
}

.result-item .label {
    font-weight: 600;
    color: #2C3E50;
}

.result-item .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #28B463;
}

.result-item .value.positive {
    color: #28B463;
}

.result-item .value.negative {
    color: #E74C3C;
}

/* ===== チャートセクション ===== */
.furusato-chart {
    background: #E9F7EF;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border-left: 5px solid #28B463;
}

.furusato-chart h2 {
    color: #28B463;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.chart-container {
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
}

.chart-container canvas {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    background: #F9F9F9;
}

.chart-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.chart-btn {
    background: linear-gradient(135deg, #28B463 0%, #2ECC71 100%);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chart-btn:hover {
    background: linear-gradient(135deg, #239B56 0%, #28B463 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 180, 99, 0.3);
}

/* ===== タイムラインセクション ===== */
.reform-timeline-section {
    background: #FFF5E5;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border-left: 5px solid #E67E22;
}

.reform-timeline-section h2 {
    color: #E67E22;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    background: #FFFFFF;
    padding: 1.5rem;
    margin: 1rem 0;
    border-left: 4px solid #BDC3C7;
    border-radius: 0 8px 8px 0;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.timeline-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.timeline-item.current {
    border-left-color: #28B463;
    background: linear-gradient(135deg, #E9F7EF 0%, #FFFFFF 100%);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #BDC3C7;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
}

.timeline-item.current::before {
    background: #28B463;
}

.timeline-date {
    font-weight: 700;
    color: #2E86C1;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.timeline-content h4 {
    color: #2C3E50;
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.timeline-content p {
    color: #5D6D7E;
    margin: 0;
    line-height: 1.6;
}

/* ===== 戦略カード ===== */
.strategy-section {
    background: linear-gradient(135deg, #F0F4F8 0%, #E6F2FA 100%);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
}

.strategy-section h2 {
    color: #2E86C1;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}

.furusato-card {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 2rem;
    margin: 1.5rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-top: 4px solid #2E86C1;
    transition: all 0.3s ease;
}

.furusato-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.furusato-card h4 {
    color: #2E86C1;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.card-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.strategy-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.strategy-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #E6F2FA;
    position: relative;
    padding-left: 1.5rem;
}

.strategy-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28B463;
    font-weight: bold;
}

.recommended-action {
    background: linear-gradient(135deg, #E9F7EF 0%, #F0F8FF 100%);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #28B463;
    margin-top: 1rem;
}

/* ===== 時期別戦略 ===== */
.timing-strategy {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.timing-strategy h4 {
    color: #E67E22;
    font-size: 1.2rem;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E67E22;
}

.timing-strategy ul {
    list-style: none;
    padding: 0;
}

.timing-strategy li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.timing-strategy li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #E67E22;
    font-weight: bold;
}

/* ===== 選択基準 ===== */
.selection-criteria {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.selection-criteria h4 {
    color: #8E44AD;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.selection-criteria ol {
    padding-left: 1.5rem;
}

.selection-criteria li {
    margin: 0.8rem 0;
    line-height: 1.7;
}

/* ===== シミュレーションセクション ===== */
.furusato-sim {
    background: #FFF5E5;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border-left: 5px solid #E67E22;
}

.furusato-sim h2 {
    color: #E67E22;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.simulation-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.case-study {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.case-study h4 {
    color: #E67E22;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.before,
.after {
    padding: 1rem;
    border-radius: 6px;
}

.before {
    background: #FFF5E5;
    border-left: 4px solid #E67E22;
}

.after {
    background: #E9F7EF;
    border-left: 4px solid #28B463;
}

.before h5,
.after h5 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.before p,
.after p {
    margin: 0.3rem 0;
    font-size: 0.9rem;
}

.case-conclusion {
    background: linear-gradient(135deg, #F0F4F8 0%, #E6F2FA 100%);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #2E86C1;
    text-align: center;
    font-weight: 600;
}

.simulate-button {
    background: linear-gradient(135deg, #E67E22 0%, #F39C12 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 2rem auto;
}

.simulate-button:hover {
    background: linear-gradient(135deg, #D35400 0%, #E67E22 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.3);
}

/* ===== 影響ボックス ===== */
.impact-box {
    background: #FFF3CD;
    border: 1px solid #FFC107;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.impact-box h4 {
    color: #856404;
    margin-bottom: 1rem;
}

.impact-box ul {
    margin: 0;
    padding-left: 1.5rem;
}

.impact-box li {
    margin: 0.5rem 0;
    color: #856404;
}

/* ===== 計算変更セクション ===== */
.calculation-change {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.calculation-change h4 {
    color: #2E86C1;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.comparison-table {
    overflow-x: auto;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: center;
    border: 1px solid #E6F2FA;
}

.comparison-table th {
    background: #2E86C1;
    color: white;
    font-weight: 600;
}

.comparison-table tr:nth-child(even) {
    background: #F8F9FA;
}

/* ===== FAQセクション ===== */
.faq-section {
    background: linear-gradient(135deg, #F0F4F8 0%, #E6F2FA 100%);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
}

.faq-section h2 {
    color: #2E86C1;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}

.faq-item {
    background: #FFFFFF;
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid #2E86C1;
}

.faq-item h4 {
    color: #2E86C1;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.faq-item p {
    margin: 0;
    line-height: 1.7;
    color: #2C3E50;
}

/* ===== まとめセクション ===== */
.conclusion {
    background: linear-gradient(135deg, #E9F7EF 0%, #F0F8FF 100%);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    border: 3px solid #28B463;
}

.conclusion h2 {
    color: #28B463;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}

.key-points {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.key-points h3 {
    color: #28B463;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.key-points ul {
    list-style: none;
    padding: 0;
}

.key-points li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #E9F7EF;
    position: relative;
    padding-left: 1.5rem;
}

.key-points li::before {
    content: '★';
    position: absolute;
    left: 0;
    color: #28B463;
    font-weight: bold;
}

.action-plan {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.action-plan h3 {
    color: #E67E22;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.action-plan ol {
    padding-left: 1.5rem;
}

.action-plan li {
    margin: 1rem 0;
    line-height: 1.7;
    font-weight: 500;
}

.final-message {
    background: linear-gradient(135deg, #FFF5E5 0%, #F0F8FF 100%);
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    border: 2px solid #E67E22;
    text-align: center;
}

.final-message p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2C3E50;
    font-weight: 500;
}

/* ===== 関連リンクセクション ===== */
.related-links {
    background: #F8F9FA;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
}

.related-links h2 {
    color: #2C3E50;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.related-links ul {
    list-style: none;
    padding: 0;
}

.related-links li {
    margin: 1rem 0;
}

.related-links a {
    color: #2E86C1;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.related-links a:hover {
    color: #1B4F72;
    text-decoration: underline;
}

/* ===== レスポンシブデザイン ===== */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .furusato-header {
        padding: 1.5rem;
    }
    
    .furusato-header h1 {
        font-size: 1.8rem;
    }
    
    .article-meta {
        flex-direction: column;
        text-align: center;
    }
    
    .simulation-form {
        grid-template-columns: 1fr;
    }
    
    .chart-controls {
        flex-direction: column;
    }
    
    .chart-btn {
        width: 100%;
    }
    
    .simulation-cases {
        grid-template-columns: 1fr;
    }
    
    .before-after {
        grid-template-columns: 1fr;
    }
    
    .comparison-table {
        font-size: 0.9rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .furusato-header {
        padding: 1rem;
    }
    
    .furusato-header h1 {
        font-size: 1.5rem;
    }
    
    .introduction,
    .reform-details,
    .strategy-section,
    .conclusion,
    .faq-section {
        padding: 1.5rem;
    }
    
    .furusato-calc,
    .furusato-chart,
    .furusato-sim {
        padding: 1.5rem;
    }
    
    .calculator-container,
    .chart-container {
        padding: 1rem;
    }
    
    .furusato-card {
        padding: 1.5rem;
    }
    
    .timeline-item {
        padding: 1rem;
    }
    
    .case-study {
        padding: 1.5rem;
    }
}

.faq-section {
    margin: 2rem 0;
}

.faq-item {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fafafa;
}

.faq-question {
    display: block;
    color: #2c5aa0;
    font-weight: bold;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.faq-answer {
    display: block;
    color: #333;
    line-height: 1.6;
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.conclusion {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.conclusion h2 {
    color: #2c5aa0;
    margin-bottom: 1rem;
}

.key-points, .action-plan {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: white;
    border-radius: 6px;
    border-left: 4px solid #2c5aa0;
}

.key-points h3, .action-plan h3 {
    color: #2c5aa0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* リストを左寄せにする設定 */
.key-points ul, .action-plan ol {
    text-align: left;
    padding-left: 1.5rem;
    margin: 0;
}

.key-points ul li, .action-plan ol li {
    text-align: left;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.key-points ul li strong {
    color: #d32f2f;
}

.final-message {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #e8f5e8;
    border-radius: 6px;
    border-left: 4px solid #388e3c;
}

.final-message p {
    margin: 0;
    font-style: italic;
    color: #2e7d32;
}

/* 親要素のテキスト配置をリセット */
.conclusion * {
    text-align: left;
}

/* 見出しのみ中央寄せにしたい場合は以下を追加 */
.conclusion h2, .conclusion h3 {
    text-align: center;
}

/* ===== 印刷用スタイル ===== */
@media print {
    .chart-controls,
    .simulate-button {
        display: none;
    }
    
    .furusato-article {
        box-shadow: none;
    }
    
    .timeline-item,
    .furusato-card,
    .case-study {
        page-break-inside: avoid;
    }
    
    .furusato-header {
        background: #F0F4F8 !important;
    }
}

/* ===== アニメーション ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* ===== ユーティリティクラス ===== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.p-1 {
    padding: 1rem;
}

.p-2 {
    padding: 2rem;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.color-primary {
    color: #2E86C1;
}

.color-success {
    color: #28B463;
}

.color-warning {
    color: #E67E22;
}

.color-danger {
    color: #E74C3C;
}
/* ===== シミュレーション結果表示 ===== */
.simulation-result-display {
    background: linear-gradient(135deg, #F0F8FF 0%, #E9F7EF 100%);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
    border: 3px solid #2E86C1;
    box-shadow: 0 6px 20px rgba(46, 134, 193, 0.2);
}

.simulation-result-display h4 {
    color: #2E86C1;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid #2E86C1;
    padding-bottom: 0.5rem;
}

/* シミュレーションサマリー */
.simulation-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-item {
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.summary-label {
    font-weight: 600;
    color: #2C3E50;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.summary-value.positive {
    color: #28B463;
}

.summary-value.negative {
    color: #E74C3C;
}

/* シミュレーションタイムライン */
.simulation-timeline {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.simulation-timeline h5 {
    color: #2E86C1;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.simulation-timeline-item {
    background: #F8F9FA;
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 8px;
    border-left: 4px solid #BDC3C7;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.simulation-timeline-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.simulation-timeline-item.current-year {
    border-left-color: #28B463;
    background: linear-gradient(135deg, #E9F7EF 0%, #F8F9FA 100%);
}

.timeline-year {
    font-weight: 700;
    color: #2E86C1;
    font-size: 1.1rem;
    min-width: 80px;
    text-align: center;
}

.timeline-details {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.limit-amount {
    color: #2E86C1;
    font-size: 1rem;
}

.safe-amount {
    color: #28B463;
    font-size: 0.9rem;
}

.change-amount {
    font-weight: 600;
    font-size: 0.9rem;
}

.change-amount.positive {
    color: #28B463;
}

.change-amount.negative {
    color: #E74C3C;
}

.max-benefit {
    color: #E67E22;
    font-size: 0.9rem;
}

/* シミュレーションチャート */
.simulation-chart-container {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.simulation-chart-container h5 {
    color: #2E86C1;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.simulation-chart-container canvas {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    background: #F9F9F9;
    border: 1px solid #E6F2FA;
}

/* 推奨アクション */
.simulation-recommendations {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.simulation-recommendations h5 {
    color: #E67E22;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.impact-assessment {
    background: #F8F9FA;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.impact-assessment.high-positive {
    background: linear-gradient(135deg, #E9F7EF 0%, #F0F8FF 100%);
    border: 2px solid #28B463;
}

.impact-assessment.moderate-positive {
    background: linear-gradient(135deg, #E9F7EF 0%, #F8F9FA 100%);
    border: 2px solid #82E0AA;
}

.impact-assessment.neutral {
    background: linear-gradient(135deg, #F8F9FA 0%, #E6F2FA 100%);
    border: 2px solid #BDC3C7;
}

.impact-assessment.moderate-negative {
    background: linear-gradient(135deg, #FFF5E5 0%, #F8F9FA 100%);
    border: 2px solid #F8C471;
}

.impact-assessment.high-negative {
    background: linear-gradient(135deg, #FADBD8 0%, #F8F9FA 100%);
    border: 2px solid #E74C3C;
}

.impact-level {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.impact-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2C3E50;
}

.recommendations-list {
    margin: 1.5rem 0;
}

.recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem;
    margin: 0.8rem 0;
    background: #F8F9FA;
    border-radius: 6px;
    border-left: 3px solid #2E86C1;
}

.recommendation-icon {
    font-size: 1.2rem;
    margin-top: 0.1rem;
}

.recommendation-text {
    flex: 1;
    line-height: 1.6;
    color: #2C3E50;
}

.next-steps {
    background: linear-gradient(135deg, #E6F2FA 0%, #F0F8FF 100%);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid #2E86C1;
    margin-top: 1.5rem;
}

.next-steps h6 {
    color: #2E86C1;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.next-steps ol {
    padding-left: 1.5rem;
    margin: 0;
}

.next-steps li {
    margin: 0.8rem 0;
    line-height: 1.6;
    color: #2C3E50;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .simulation-summary {
        grid-template-columns: 1fr;
    }
    
    .simulation-timeline-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .timeline-details {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .recommendation-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .simulation-result-display {
        padding: 1.5rem;
    }
    
    .simulation-timeline,
    .simulation-chart-container,
    .simulation-recommendations {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .simulation-result-display {
        padding: 1rem;
    }
    
    .simulation-timeline,
    .simulation-chart-container,
    .simulation-recommendations {
        padding: 1rem;
    }
    
    .summary-item {
        padding: 1rem;
    }
    
    .simulation-timeline-item {
        padding: 1rem;
    }
    
    .recommendation-item {
        padding: 0.8rem;
    }
}