/**
 * 住宅ローン減税シミュレーション専用スタイル
 */

/* ==============================================
   入力フォームスタイル
   ============================================== */
.igrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.iit {
    flex-basis: 50%;
    margin-left: 40px;
}

.iii {
    flex-basis: 40%;
    text-align: right;
}

.iiu {
    flex-basis: 10%;
    margin-left: 5px;
}

.readonly {
    background: #ccc;
}

/* ==============================================
   結果表示エリア
   ============================================== */
#ans table {
    width: 890px;
}

#ans td {
    text-align: left;
}

#ans .at,
#ans caption {
    color: #023F64;
    text-align: left;
    font-size: 16px;
}

#ans .bline {
    border-bottom: 1px solid #aaa;
}

#ans p {
    line-height: 30px;
    margin: 0 24px;
}

/* ==============================================
   ボタンスタイル
   ============================================== */
/* 計算ボタンは共通スタイル .calc-button (calculator-common.css) を使用 */

/* ==============================================
   入力フィールドスタイル
   ============================================== */
#sim17 input[type='number'],
#sim17 input.txtNum {
    border: 1px solid #ccc;
    text-align: right;
    width: 110px;
    padding: 1px 20px 1px 5px !important; /* 右側余白を増やしてスピンボタンと数値が重ならないように */
    margin: 0 3px;
    font-family: 'Noto Sans JP Bold', sans-serif;
    font-size: 26px;
}

#sim17 select {
    border: 1px solid #ccc;
    padding: 5px !important;
    margin: 0 3px;
    font-size: 27px;
}

/* ==============================================
   詳細計算結果エリア
   ============================================== */
#ans2 {
    line-height: 30px;
}

#ans2 .at {
    color: #023F64;
    text-align: left;
    font-size: 16px;
}

#ans2 ul {
    list-style-type: none;
}

#ans2 li li {
    margin-left: 40px;
}

/* 結果数値の強調表示は共通スタイル .result-message-highlight を使用 */

/* ==============================================
   解説リンクスタイル
   ============================================== */
.openLink {
    background: url(../../img/kaisetu.png) no-repeat 15px center #fff;
    box-shadow: 0 0 2px #dbdde0;
    line-height: 34px;
    padding: 0 10px 0 45px;
    text-decoration: none;
    color: #003f5e;
    display: block;
    transition: all 0.2s ease;
    border-radius: 17px;
    font-size: 16px;
    border: 1px solid #fff;
    text-align: left;
    width: 173px;
}

.openLink:first-child {
    margin-bottom: 10px;
}

.openLink:hover {
    border: 1px solid #003f5e;
}

/* ==============================================
   繰上返済vs資産運用セクション
   ============================================== */
#sim2 input[type='number'],
#sim2 input.txtNum {
    border: 1px solid #ccc;
    text-align: right;
    width: 110px;
    padding: 1px 20px 1px 5px !important; /* 右側余白を増やしてスピンボタンと数値が重ならないように */
    margin: 0 3px;
    font-family: 'Noto Sans JP Bold', sans-serif;
    font-size: 26px;
}

#sim2 select {
    border: 1px solid #ccc;
    padding: 5px !important;
    margin: 0 3px;
    font-size: 27px;
}

/* ==============================================
   補足説明スタイル
   ============================================== */
.supple {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

/* ==============================================
   扶養親族入力エリア
   ============================================== */
#huyo1, #huyo2, #huyo3, #huyo4, #huyo5, #huyo6, #huyo7 {
    transition: all 0.3s ease;
}

/* ==============================================
   直接入力モード切り替え
   ============================================== */
.direct, .adirect {
    display: none;
}

.notdirect, .anotdirect {
    display: block;
}

/* ==============================================
   比較エリアスタイル上書き
   ============================================== */
/* 住宅タイプ別比較（#sim）では枠線色による識別は不要 */
#sim .compare,
#sim .compare:last-child,
#sim .compareArea .compare:last-child {
    border: none !important;
}

#sim .compare table caption,
#sim .compare:last-child table caption,
#sim .compareArea .compare:last-child caption {
    border-bottom-color: #023F64 !important;
}

/* 繰上返済vs資産運用（#sim2）では2ケース比較のため枠線色で識別 */
/* .compareArea内の2カラム要素のみに枠線色を適用 */
#sim2 .compareArea .compare:first-child {
    border: 2px solid #3FA9F5 !important;  /* 左側：青色（繰上返済） */
}

#sim2 .compareArea .compare:last-child {
    border: 2px solid #C8911D !important;  /* 右側：金色（資産運用） */
}

#sim2 .compareArea .compare:first-child table caption {
    border-bottom-color: #3FA9F5 !important;
}

#sim2 .compareArea .compare:last-child table caption {
    border-bottom-color: #C8911D !important;
}

/* 住宅性能選択エリア（.compareAreaの外）は枠線色なし */
#sim2 > .compare {
    border: none !important;
}

/* ==============================================
   住宅性能選択エリアのテーブルスタイル
   ============================================== */
#sim2 .compare table {
    width: 100%;
    table-layout: fixed;  /* 固定レイアウトで幅を制御 */
}

#sim2 .compare table td:first-child {
    width: 50%;  /* 「検討している住宅の性能を選択してください」のセル */
    white-space: nowrap;  /* 改行を防ぐ */
}

#sim2 .compare table td:last-child {
    width: 50%;  /* selectボックスのセル */
}

/* ==============================================
   ラジオボタン配置調整
   ============================================== */
/* ラジオボタングループ全体の右側を入力フィールドの右端と揃える */
/* .iiu（10% + margin-left: 5px）分の余白を確保 */
.igrp .iii .radio-group {
    display: inline-block;
    margin-right: calc(10% + 5px);
}

/* ==============================================
   レスポンシブ対応（必要に応じて）
   ============================================== */
@media screen and (max-width: 1024px) {
    .igrp {
        flex-direction: column;
        align-items: flex-start;
    }

    .iit, .iii, .iiu {
        flex-basis: auto;
        width: 100%;
        text-align: left;
        margin: 5px 0;
    }
}