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

/* ========================================
   2カラムレイアウト調整
   ======================================== */

/* 住宅ローンシミュレーション固有の2カラムレイアウト幅制限 */
.compareArea {
    max-width: 940px;  /* #simpleContの980pxからpaddingを除いた値 */
    margin: 20px auto !important;
}

.compareArea .compare {
    max-width: 460px;  /* 2カラムの各カラムの最大幅（gap 20pxを考慮） */
}

/* ========================================
   入力エリア固有スタイル
   ======================================== */

/* ローンキャプション（ローン1/ローン2見出し） */
.hl-loan-caption {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    display: inline-block;
    margin-right: 10px;
}

.hl-loan-caption-1 {
    color: #3FA9F5;
}

.hl-loan-caption-2 {
    color: #C8911D;
}

/* caption要素内のレイアウト調整（改行防止） */
table caption {
    white-space: nowrap;
}

/* セクションヘッダー（初期の借入条件） */
.hl-section-header {
    padding: 0;
    border: none;
    background: transparent;
}

.loanCateKariire1 {
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 5px 15px;
    background: #3FA9F5;
    text-align: center;
    width: 417px;
}

.loanCateKariire2 {
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 5px 15px;
    background: #C8911D;
    text-align: center;
    width: 417px;
}

/* プラン名入力欄 */
.hl-plan-name-input {
    width: 230px;
}

/* 借入金利ラベル */
.hl-rate-label {
    width: 170px;
    white-space: nowrap;
}

.hl-rate-label-left {
    float: left;
}

.hl-rate-label-right {
    float: right;
}

/* 年目～のラベル */
.hl-rate-year-label {
    text-align: right;
    white-space: nowrap;
}

/* テキスト入力 */
.hl-text-input {
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

/* セレクトボックス */
.hl-select {
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;  /* 他の入力フィールドと同じサイズに */
    background-color: #fff;
}

/* 折りたたみ可能セクション（pill型ボタン） */
.loanCate {
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    color: #023f64;
    font-weight: bold;
    padding: 3px 15px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 100%);
    border: 1px solid #023f64;
    width: 417px;
    cursor: pointer;
    transition: all 0.2s;
}

.loanCate:hover {
    background: linear-gradient(to bottom, #f8f8f8 0%, #ebebeb 100%);
}

/* 折りたたみ可能セクション（pill型ボタン）- 開いた状態 */
.loanCateOpen {
    border-radius: 30px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 3px 15px 5px;
    background: linear-gradient(to bottom, #7ba5ba 0%, #023f64 100%);
    border: 1px solid #fff;
    width: 417px;
    cursor: pointer;
    transition: all 0.2s;
}

/* 開いた状態の子要素も白色に */
.loanCateOpen .loanCateTitle,
.loanCateOpen .loanCateExp,
.loanCateOpen .loanCateMark {
    color: #fff;
}

.loanCateTitle {
    font-weight: bold;
    font-size: 15px;
    color: #333;
    margin-right: 10px;
}

.loanCateExp {
    font-size: 12px;
    color: #666;
    text-align: left;
}

.loanCateMark {
    margin-left: 5px;
    font-size: 11px;
}

/* ネストされたテーブル */
.hl-nested-table {
    width: 100%;
    border-collapse: collapse;
}

.hl-nested-table td {
    padding: 8px 5px;
}

/* 繰上返済テーブル */
.hl-prepayment-table {
    width: 100%;
    border-collapse: collapse;
}

.hl-prepayment-table th {
    padding: 8px;
    text-align: center;
    font-size: 13px;
}

.hl-prepayment-table td {
    padding: 5px;
    text-align: center;
}

/* 一括クリアボタン */
.clearKuriage {
    display: inline-block;
    margin-left: 15px;
    padding: 4px 12px;
    font-size: 12px;
    color: #fff;
    background-color: #a0ce4a;
    border-radius: 10px;
    box-shadow: 1px 1px 2px #aaa;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.clearKuriage:hover {
    opacity: 0.7;
}

/* コピーボタン */
#btnCopy {
    -webkit-appearance: none;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-family: 'Noto Sans JP';
    padding: 3px 10px;
    background: #3FA9F5;
    border: 1px solid #3FA9F5;
    transition: all 0.2s ease;
    border-radius: 13px;
    box-shadow: 0 0 4px #ccc;
    cursor: pointer;
}

#btnCopy:hover {
    opacity: 0.8;
}

/* ========================================
   結果表示エリア固有スタイル
   ======================================== */

/* タブナビゲーション */
.hl-tab-nav {
    position: relative;
    display: flex;
    gap: 5px;
    margin-bottom: 0;
    border-bottom: 2px solid #999;
}

.hl-tab-button {
    display: inline-block;
    padding: 3px 20px;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    margin-right: 10px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.5;
}

.hl-tab-button:nth-child(1) {
    background-color: #f5601e;
}

.hl-tab-button:nth-child(2) {
    background-color: #3FA9F5;
}

.hl-tab-button:nth-child(3) {
    background-color: #C8911D;
}

.hl-tab-button.hl-tab-active {
    opacity: 1;
}

/* タブコンテンツ */
.hl-tab-content {
    border: 1px solid #999;
    border-top: none;
    padding: 20px;
    background-color: #fff;
    margin-top: -1px;
}

.hl-tab-pane {
    display: none;
}

.hl-tab-pane.hl-tab-pane-active {
    display: block;
}

/* 結果エリア内の説明タイトル */
.ansTitle {
    padding: 5px 20px;
    border-bottom: 1px solid #ccc;
    font-size: 90%;
    margin-bottom: 5px;
}

/* グラフ凡例 */
.legend {
    padding: 7px 20px;
    text-align: right;
}

.legend span {
    display: inline-block;
    font-size: 14px;
}

.chartColor {
    width: 10px;
    height: 10px;
    margin: 0 5px 0 10px;
}

/* 2カラムグラフテーブル */
.hl-chart-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto 15px;
}

.hl-chart-cell {
    width: 50%;
    text-align: right;
}

/* グラフコンテナのサイズ */
.hl-chart-cell .chart-container {
    position: relative;
    width: 414px;
    height: 300px;
    margin: 0 auto;
}

.hl-chart-cell canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 414px !important;
    height: 300px !important;
}

/* 残元金グラフのサイズ（比較タブ） */
#chart3.chart-container {
    position: relative;
    width: 908px;
    height: 300px;
    margin: 0 auto;
}

#chart3 canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 908px !important;
    height: 300px !important;
}

/* 返済状況グラフのサイズ（詳細タブ） */
#chart4.chart-container,
#chart5.chart-container,
#chart6.chart-container,
#chart7.chart-container {
    position: relative;
    height: 300px;
    margin: 0 auto;
}

/* 比較テーブル */
.hl-comparison-table {
    margin: 20px auto;
    border-collapse: collapse;
    width: 80%;
}

.hl-comparison-table th,
.hl-comparison-table td {
    padding: 5px 20px;
    border: 1px solid #ddd;
    text-align: center;
}

.hl-comparison-table th {
    color: #fff;
    font-weight: normal;
}

.hl-comparison-table th:nth-child(2) {
    background: #3FA9F5;
    width: 200px;
}

.hl-comparison-table th:nth-child(3) {
    background: #C8911D;
    width: 200px;
}

.hl-comparison-table td label {
    font-family: 'Noto Sans JP Bold', sans-serif;
    font-size: 26px;
    color: #CC1F03;
    display: inline-block;
    margin: 0 3px;
}

/* 比較結果サマリー */
.hl-comparison-summary {
    margin: 5px 0 10px;
    text-align: center;
    line-height: 180%;
}

.hl-comparison-summary label {
    font-family: 'Noto Sans JP Bold', sans-serif;
    font-size: 21px;
    color: #CC1F03;
    display: inline-block;
    margin: 0 3px;
}

/* グラフ配置 */
.hl-chart-row {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.hl-chart-half {
    flex: 1;
}

/* サマリーテーブル（詳細タブ用） */
/* 優先度順に設定 */
.tbLoanSummary {
    border-collapse: collapse;
    margin: 0 10px 10px;
}

.ans table.tbLoanSummary {
    width: 750px;
}

.tbLoanSummary th,
.tbLoanSummary td {
    padding: 5px 20px;
    border: 1px solid #999;
    text-align: center;
}

.tbLoanSummary th {
    color: #fff;
    background: #f5f6fb;  /* .ans thから継承されるデフォルト */
    font-weight: normal;  /* .ans thから継承されるデフォルト */
}

/* インラインスタイルで個別に背景色を指定 */
/* th[style*="background:#3FA9F5"] や th[style*="background:#C8911D"] がインラインで適用される */

/* 返済表 */
.hl-schedule-table-container {
    margin: 15px 0;
}

/* .ans table のスタイル適用 */
.ans table.tbLoan {
    border-collapse: collapse;
    width: 900px;
    margin: 0 auto 15px;
}

.tbLoan {
    border-collapse: collapse;
    width: 100%;
    font-size: 90%;
}

.tbLoan th,
.tbLoan td {
    border: 1px solid #999;
    padding: 1px 5px;
}

.tbLoan th {
    padding-top: 10px;
}

.tbLoan td {
    text-align: right;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 行ハイライト */
.tbLoan tbody tr:hover td {
    border-bottom: 5px solid #ed8641;
}

/* 通常月のカラム背景色 */
.tbLoan td.m {
    background: #e3f3fd;
}

/* ボーナス月のカラム背景色 */
.tbLoan td.b {
    background: #f0e6d2;
}

/* 残元金カラム */
.tbLoan td.c {
    background: #f0f0f0;
    font-weight: bold;
}

/* 返済表注記 */
.hl-schedule-note {
    color: #3b7d31;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media (max-width: 768px) {
    .hl-chart-row {
        flex-direction: column;
    }

    .hl-tab-button {
        padding: 8px 12px;
        font-size: 12px;
    }

    .hl-comparison-table,
    .hl-summary-table {
        width: 100%;
        font-size: 12px;
    }

    .hl-prepayment-table {
        font-size: 11px;
    }

    .hl-prepayment-table th,
    .hl-prepayment-table td {
        padding: 5px 3px;
    }
}

/* ========================================
   印刷対応
   ======================================== */

@media print {
    .hl-tab-nav {
        display: none;
    }

    .hl-tab-pane {
        display: block !important;
        page-break-before: always;
    }

    .hl-tab-pane:first-child {
        page-break-before: auto;
    }

    .clearKuriage,
    .hl-copy-button {
        display: none;
    }
}