/**
 * マンションvs一戸建て比較シミュレーター専用スタイル
 * プレフィックス: mvh- (mansion-vs-house)
 *
 * 共通スタイルは以下から継承:
 * - common/style.css - グローバルスタイル
 * - common/common.css - 共通レイアウト
 * - common/calculator-common.css - 計算機共通スタイル
 *
 * このファイルには、マンションvs一戸建てでのみ使用される
 * 固有のスタイルのみを定義しています。
 */

/* ========================================
   シミュレーション固有のレイアウト
   ======================================== */

/* シミュレーションヘッダーは calculator-common.css から継承
   固有のスタイルは定義しない（共通スタイルを使用） */

/* ========================================
   比較エリアのレイアウト
   ======================================== */

/* 2列比較エリアは calculator-common.css から継承 */
/* .compareArea, .compare の基本スタイルは共通定義を使用 */

/* 共通項目エリアは calculator-common.css の .common-items を使用 */

/* ========================================
   入力フィールドレイアウト
   ======================================== */

.compare td {
    padding: 8px 5px;
}

.compare td:first-child {
    width: 30px;
    text-align: center;
}

.compare td:nth-child(2) {
    width: 200px;
    /* font-size: 16px; は calculator-common.css から継承 */
}

/* 解説アイコン */
.help img {
    width: 20px;
    height: 20px;
}

/* 単位表示は calculator-common.css の .unit を使用 */

/* ========================================
   結果表示エリアのカスタマイズ
   ======================================== */

/* グラフコンテナは calculator-common.css の .chart-container, .chart-wrapper を使用 */

/* 結果テーブルのスタイルは calculator-common.css から継承 */

/* 結論メッセージ */
#lblDiff {
    font-size: 16px;
    font-weight: bold;
    color: #d9534f;
}

/* ========================================
   レスポンシブ対応（固有調整）
   ======================================== */

@media screen and (max-width: 1024px) {
    .compareArea {
        flex-direction: column;
    }

    .compare {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #simHeaderSummary h1 {
        font-size: 20px;
    }

    #summary {
        font-size: 13px;
    }

    .compare td:nth-child(2) {
        width: 150px;
        font-size: 13px;
    }
}

/* ========================================
   ジャンプリンク
   ======================================== */

.jump {
    text-align: right;
    margin-top: 20px;
}

.jump a {
    color: #3FA9F5;
    text-decoration: none;
    font-size: 14px;
}

.jump a:hover {
    text-decoration: underline;
}