/* ========================================
   計算機共通スタイル
   全ての計算機ページで使用する共通要素
   ======================================== */

/* 基本レイアウト */
.calc-container {
    width: 980px;
    margin: 0 auto;
    padding: 33px 22px 10px;
}

/* タイトルバー */
.calc-title {
    background: #336699;
    color: #fff;
    line-height: 27px;
    padding: 5px 0;
    font-size: 14px;
}

/* 操作メニュー */
.calc-menu {
    background: linear-gradient(to bottom, #5484b8 0%, #004062 100%);
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    padding: 0 7px;
}

/* 入力パネル共通 */
.calc-panel {
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

/* パネルカラークラス */
.calc-panel--blue {
    border: 2px solid #3FA9F5;
}

.calc-panel--blue .calc-panel__caption {
    color: #3FA9F5;
    border-bottom: 2px solid #3FA9F5;
}

.calc-panel--gold {
    border: 2px solid #C8911D;
}

.calc-panel--gold .calc-panel__caption {
    color: #C8911D;
    border-bottom: 2px solid #C8911D;
}

/* テーブルキャプション共通スタイル */
table caption {
    text-align: center;
    font-family: 'メイリオ', 'Meiryo', 'Noto Sans JP', sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid;
}

table caption div {
    font-weight: bold;
}

/* 数値入力フィールド */
.calc-input {
    border: 1px solid #ccc;
    text-align: right;
    width: 110px;
    padding: 1px 5px;
    margin: 0 3px;
    font-family: 'Noto Sans JP Bold', 'メイリオ', sans-serif;
    font-size: 26px;
    border-radius: 3px;
    background: #fff;
}

.calc-input:focus {
    border-color: #3FA9F5;
    outline: none;
    background: #f0f8ff;
}

/* 計算ボタン共通 */
.calc-button {
    display: inline-block;
    padding: 15px 60px;
    background: #DC6552;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0;
    box-shadow: 0 3px 0 #b54a3f;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    transition: all 0.2s;
    cursor: pointer;
}

.calc-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #b54a3f;
}

/* 再計算ボタン共通（計算ボタンより小さめ） */
.btnReCalc {
    -webkit-appearance: none;
    background: #DC6552;
    display: inline-block;
    text-align: center;
    padding: 2px 12px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    line-height: 26px;
    color: #fff;
    white-space: nowrap;
    text-decoration: none !important;
    font-size: 14px;
    margin: 0 10px;
}

.btnReCalc:hover {
    background: #C85542;
    transform: translateY(-1px);
}

/* ダイアログ共通 */
.calc-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    min-width: 400px;
}

.calc-dialog__header {
    background: #023F64;
    color: white;
    padding: 15px 20px;
    font-size: 16px;
    border-bottom: 3px solid #70D0FF;
}

.calc-dialog__footer {
    padding: 15px 20px;
    text-align: right;
    background: #f8f8f8;
    border-top: 1px solid #eee;
}

/* ダイアログボタン */
.calc-dialog__button {
    display: inline-block;
    padding: 8px 20px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.calc-dialog__button--primary {
    background: #336699;
    color: white;
}

.calc-dialog__button--cancel {
    background: #999;
    color: white;
}

.calc-dialog__button--danger {
    background: #d32f2f;
    color: white;
}

/* グラフコンテナ */
.calc-chart {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* ========================================
   数値入力フィールド共通
   ======================================== */

/* 数値入力フィールド基本スタイル */
.calc-number-input,
.txtNum,
input[type='number'],
input.txtNum {
    border: 1px solid #ccc;
    text-align: right;
    width: 110px;
    padding: 1px 5px !important;
    margin: 0 3px;
    font-family: 'Noto Sans JP Bold', 'メイリオ', sans-serif;
    font-size: 26px;
    border-radius: 3px;
    background: #fff;
}

/* デフォルトでスピンボタンを非表示 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ホバー時・フォーカス時のみスピンボタンを表示 */
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    height: auto !important;
    cursor: pointer;
}

/* Firefox用の設定 */
input[type="number"] {
    -moz-appearance: textfield; /* デフォルトでスピンボタン非表示 */
}

/* Firefox: ホバー時・フォーカス時のみ表示 */
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input; /* スピンボタン表示 */
}

.calc-number-input:focus,
.txtNum:focus {
    border-color: #3FA9F5;
    outline: none;
    background: #f0f8ff;
}

/* 数値入力フィールド - 幅バリエーション */
.txtNum--small,
input[type="number"].txtNum--small {
    width: 60px !important;
}

.txtNum--medium,
input[type="number"].txtNum--medium {
    width: 60px !important;
}

.txtNum--default,
input[type="number"].txtNum--default {
    width: 110px !important;
}

/* ========================================
   単位表示（.unit）共通スタイル
   入力フィールドの後ろに表示される単位（万円、年、％など）
   ======================================== */

.unit {
    display: inline-block;
    width: 40px;              /* 固定幅で揃える */
    text-align: left;         /* 左寄せ */
    margin-left: 2px;         /* 入力フィールドとの間隔 */
    font-size: 14px;          /* 標準サイズ */
    vertical-align: baseline; /* ベースラインに揃える */
}

/* ========================================
   タイトルバー共通
   ======================================== */

.calc-title-wrapper,
.title-wrapper {
    width: 100%;
    background: #336699;
}

.calc-title-text,
#title {
    color: #fff;
    clear: both;
    line-height: 27px;
    width: 1024px;
    margin: 0 auto;
    font-family: 'Noto Sans JP Medium', 'メイリオ', 'Meiryo', sans-serif;
    font-size: 14px;
    padding: 5px 0;
}

.calc-title-text span,
#title span {
    display: inline-block;
    margin-left: 42px;
}

/* ========================================
   保存・呼出ダイアログ共通
   ======================================== */

/* ダイアログコンテンツ */
.calc-dialog-content,
.diacont {
    padding: 20px;
    background: white;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.calc-dialog-content input[type="text"],
.diacont input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 10px;
    box-sizing: border-box;
}

/* ダイアログボディ */
.calc-dialog-body,
.dialogBody {
    background: white;
    max-height: 400px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.calc-dialog-cont,
.dialogCont {
    padding: 20px;
    min-height: 200px;
    background: white;
}

/* データテーブル */
.calc-data-head,
.dataHead {
    width: 100%;
    border-collapse: collapse;
}

.calc-data-head th,
.dataHead th {
    background: #f0f0f0;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #336699;
    font-weight: normal;
    font-size: 14px;
    color: #333;
}

.calc-data-body,
.dataBody {
    width: 100%;
    border-collapse: collapse;
}

.calc-data-body td,
.dataBody td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    cursor: pointer;
}

.calc-data-body tr:hover,
.dataBody tr:hover {
    background: #f5f5f5;
}

.calc-data-body tr.selected,
.dataBody tr.openlist_s {
    background: #e8f4f8;
    border-left: 4px solid #336699;
}

/* タイトル編集スタイル */
.calc-title-editable,
.openTitle {
    position: relative;
    padding-right: 20px;
    cursor: pointer;
}

.calc-title-editable:hover,
.openTitle:hover {
    background-color: #f0f0f0;
    text-decoration: underline;
}

.calc-title-editable::after,
.openTitle::after {
    content: "編集";
    position: absolute;
    right: 5px;
    font-size: 11px;
    color: #999;
    opacity: 0.8;
}

.calc-title-edit-input,
.titleEditInput {
    border: 1px solid #4CAF50;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 14px;
    background-color: #fff;
    width: 90%;
}

.calc-title-edit-input:focus,
.titleEditInput:focus {
    outline: none;
    border-color: #45a049;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* ========================================
   ヘルプアイコン共通
   ======================================== */

.calc-help,
.help {
    text-decoration: none;
}

.calc-help img,
.help img {
    vertical-align: middle;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* ========================================
   保存メニュー共通
   ======================================== */

/* 保存サブメニュー */
#savesub {
    position: absolute;
    top: 36px;  /* 保存ボタンの真下に配置 */
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 100;
    min-width: 150px;
    padding: 5px 0;
}

#savesub li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#savesub a {
    display: block;
    padding: 10px 15px;
    background: white;
    color: #333 !important;  /* 視認性確保のため!importantを追加 */
    text-decoration: none;
    border-radius: 0;
    white-space: nowrap;
    cursor: pointer;
}

#savesub a:hover {
    background: #f0f0f0;
}

/* ポップアップメニューの表示制御 */
.pop {
    display: none;
}

/* ========================================
   オーバーレイとローディング
   ======================================== */

.calc-overlay,
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

.calc-loading,
.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

/* ========================================
   2列比較レイアウト共通
   ======================================== */

/* 比較エリア：2列レイアウト */
.compareArea {
    display: flex;
    justify-content: center;  /* 中央揃えに戻す */
    gap: 20px;
    margin: 20px 0;
}

/* compareAreaの中にある2列レイアウトのcompare要素 */
.compareArea .compare {
    flex: 1;  /* flexコンテナ内で均等に配分 */
}

/* 各比較パネル */
.compare {
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

/* 左側パネル（青色系） */
.compare:first-child,
.compareArea .compare:first-child {
    border: 2px solid #3FA9F5;
}

/* 右側パネル（金色系） */
.compare:last-child,
.compareArea .compare:last-child {
    border: 2px solid #C8911D;
}

/* テーブルキャプション共通 */
.compare table {
    width: 100%;
    padding: 5px 10px;
}

.compare table caption {
    margin-bottom: 15px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid;
}

.compare table caption div {
    font-weight: bold;
}

/* キャプションボーダー色 */
.compare:first-child table caption,
.compareArea .compare:first-child caption {
    border-bottom-color: #3FA9F5;
}

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

/* ========================================
   共通項目エリア
   2カラムレイアウトの外に配置される共通入力項目
   ======================================== */

/* 共通項目エリアのレイアウト */
.common-items {
    display: block;
    width: 100%;
    max-width: 980px;
    margin: 10px auto !important;
    box-sizing: border-box;
    padding: 20px;
    border: none !important;  /* 2カラムの色分け枠線を削除 */
}

/* 共通項目のキャプション（青色ボーダー） */
.common-items table caption {
    border-bottom-color: #023F64 !important;
}

/* 共通項目のテーブルレイアウト */
.common-items table {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    table-layout: auto;
}

/* 共通項目：1カラムレイアウト（入力項目が少ない場合） */
.common-items--single-column table {
    max-width: 500px;  /* 中央揃えで狭い幅 */
}

/* ========================================
   テーブルレイアウト共通スタイル
   各ページで上書き可能な基本設定
   ======================================== */

/* テーブル基本設定 */
.compare table,
.calc-table {
    width: 100%;
    border-collapse: collapse;
}

/* テーブル行の基本高さ */
.compare table tr,
.calc-table tr {
    height: 45px; /* デフォルト高さ、各ページで上書き可能 */
}

/* テーブルセル基本パディング */
.compare table td,
.calc-table td,
.case table td,
.case table th {
    padding: 7px 2px;
    vertical-align: middle;
    font-size: 16px;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
    font-weight: normal; /* ユーザーエージェントスタイルシートのth要素bold設定を上書き */
}

/* ヘルプアイコン列（第1列） */
.compare table td:first-child,
.calc-table td:first-child {
    width: 30px;
    text-align: center;
}

/* ラベル列（第2列） */
.compare table td:nth-child(2),
.calc-table td:nth-child(2) {
    width: auto;
    padding-right: 10px;
}

/* 入力フィールド列（最終列） */
.compare table td:last-child,
.calc-table td:last-child {
    width: 140px;
    text-align: left;
    white-space: nowrap;
}

/* 比較パネル用入力フィールド */
.compare input[type="number"],
.compare .txtNum,
.case input[type="number"],
.case .txtNum {
    width: 110px; /* デフォルト幅。txtNum--small/medium で上書き可能 */
    padding: 4px 20px 4px 8px !important;  /* 右側余白を増やしてスピンボタンと数値が重ならないように */
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: 'Noto Sans JP Bold', 'メイリオ', sans-serif;
    font-size: 26px !important;
    line-height: 1.4;
    text-align: right;
    background: #fff;
    margin: 0 3px;
    box-sizing: border-box;
}

.compare input[type="number"]:focus,
.compare .txtNum:focus,
.case input[type="number"]:focus,
.case .txtNum:focus {
    border-color: #3FA9F5;
    outline: none;
    background: #f0f8ff;
}

/* ========================================
   操作メニュー共通
   ======================================== */

#ope {
    margin-bottom: 16px;
    list-style-type: none;
    display: flex;
    border-radius: 5px;
    padding: 0 20px;  /* 7px → 20px に変更して左右の余白を確保 */
    height: 36px;
    line-height: 36px;
    background: linear-gradient(to bottom, #5484b8 0%, #004062 100%);
}

#ope li {
    position: relative;
}

#ope a {
    color: #fff;
    padding-left: 25px;
    margin-right: 25px;
    font-size: 13.5px;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

/* アイコン付きメニュー項目 */
#ope #save {
    background: url(../../img/ico_save.png) no-repeat left center;
}

#ope #open {
    background: url(../../img/ico_open.png) no-repeat left center;
}

#ope #print {
    background: url(../../img/ico_print.png) no-repeat left center;
}

#ope #totalhelp {
    background: url(../../img/ico_help.png) no-repeat left center;
}

#ope a:hover {
    opacity: 0.8;
}

/* ========================================
   現在のデータ表示エリア
   ======================================== */

#openName {
    display: none;
    padding: 10px;
    background: #f0f8ff;
    border-radius: 5px;
    margin-bottom: 15px;
    color: #333;
    font-size: 14px;
}

#openName .data-title {
    font-weight: bold;
    color: #3FA9F5;
}

#openName .close-data {
    float: right;
    color: #999;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
}

#openName .close-data:hover {
    color: #333;
}

/* ========================================
   計算ボタンエリア
   ======================================== */

.calc {
    text-align: center;
    margin: 30px 0;
}

/* ========================================
   見出しスタイル共通
   結果表示エリアや説明文で使用
   ======================================== */

/* 見出し（セクション区切り用） */
.calc-section-title,
.midashi {
    color: #666;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}

/* 見出し下の説明文 */
.calc-section-desc,
.midashires {
    color: #333;
    font-size: 14px;
    padding: 5px 0;
    line-height: 1.6;
}

/* 見出し下の説明文バリエーション */
.midashires--large {
    font-size: 24px;
    font-weight: bold;
    padding: 10px 0;
}

.midashires--wide-spacing {
    line-height: 250%;
}

.midashires--large-spacing {
    line-height: 180%;
}

/* 結果表示用段落 */
.result-text {
    font-size: 16px;
    line-height: 40px;
    width: 850px;
    margin: 0 auto;
}

/* ========================================
   グラフコンテナ共通スタイル
   ======================================== */

/* 1カラムレイアウト用グラフコンテナ（標準） */
.chart-container {
    position: relative;
    height: 450px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* 1カラムレイアウト用の外側ラッパー（背景色エリア） */
.chart-wrapper {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 20px;
}

/* テーブル中央配置 */
.table-centered {
    width: auto;
    margin: 0 auto;
}

/* テキストサイズバリエーション */
.text-small {
    font-size: 14px;
}

.text-tiny {
    font-size: 90%;
}

/* カラーバリエーション */
.text-muted {
    color: #666;
}

.text-primary {
    color: #023F64;
}

.text-warning {
    color: #CC1F03;
}

/* ========================================
   結果表示エリア基本
   ======================================== */

#ans {
    margin-top: 30px;
}

#ans .ans {
    background: white;
    padding: 30px 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 結果テーブル基本スタイル */
#ans .ans table {
    border-collapse: collapse;
    margin: 0 auto 15px;
}

#ans .ans th,
#ans .ans td {
    padding: 7px 20px;
}

#ans .ans th {
    background: #f5f6fb;
    font-weight: normal;
    text-align: left;
}

#ans .ans td {
    text-align: right;
}

/* 結果表示ラベル共通スタイル */
#ans .ans .result-value,
#ans .ans td label,
.result-value-label {
    font-family: 'Noto Sans JP Bold', sans-serif;
    font-size: 21px;
    color: #CC1F03;
    display: inline-block;
    margin: 0 3px;
}

/* ========================================
   結果メッセージ共通スタイル
   グラフ下の比較・分析メッセージ用
   ======================================== */

/* 結果メッセージ本文（固定テキスト部分は継承） */
.result-message {
    line-height: 200%;
}

/* 結果メッセージに左マージンを追加（必要な場合のみ使用） */
.result-message--with-margin {
    margin-left: 95px;
}

/* 結果メッセージ内の強調テキスト（変動値・結論部分） */
.result-message-highlight {
    color: #CC1F03;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Noto Sans JP Bold', 'メイリオ', sans-serif;
}

/* 無効化フィールド（入力不要項目） */
.disabled-field {
    background-color: #F0F0F0 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ========================================
   シミュレーションヘッダー共通
   全計算機ページで使用する共通ヘッダー要素
   ======================================== */

#simHeader,
.pa-sim-header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    /* 背景色は削除 - 各ページで個別に設定可能に */
    border-radius: 5px;
    /* box-shadow は削除 - 必要に応じて個別ページで設定 */
}

#simHeaderSummary,
.pa-sim-header-summary {
    flex: 1;
}

#simHeaderSummary h1,
.pa-sim-header-summary h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    font-weight: bold;
}

#summary,
.pa-summary {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

#simHeader #img,
.pa-header-image {
    position: relative;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#simHeader #img img,
.pa-header-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

#readHelp,
.pa-read-help {
    /* position: absolute を削除して通常フローに配置 */
    /* 画像の下に配置されるようにする */
    display: block;
    background: rgba(255,255,255,0.9);
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    color: #333;
    text-align: center;
    white-space: nowrap;
}

/* openLink - loan-reduction.html などで使用される特殊リンク */
.openLink {
    display: inline-block;
    background: #4285f4;
    color: white;
    padding: 5px 15px;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
    margin: 5px 0;
    transition: background 0.3s ease;
}

.openLink:hover {
    background: #3367d6;
}

/* ========================================
   ダイアログ共通スタイル
   保存・呼出ダイアログで使用
   ======================================== */

/* ダイアログポップアップ基本 */
.dialog-popup {
    background: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.dialog-popup .diahead {
    background: #023F64;
    color: white;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: normal;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid #70D0FF;
}

.dialog-popup .diacont {
    padding: 20px;
    background: white;
    color: #333;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

/* ダイアログフッター */
.dialog-popup .diafoot,
.diafoot {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #eee;
    background: #f8f8f8;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
}

.dialog-popup .diafoot a,
.diafoot a {
    display: inline-block;
    padding: 8px 20px;
    margin-left: 10px;
    background: #336699;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.dialog-popup .diafoot a:hover,
.diafoot a:hover {
    background: #023F64;
}

.dialog-popup .diafoot a.cancel,
.diafoot a.cancel {
    background: #999;
}

.dialog-popup .diafoot a.cancel:hover,
.diafoot a.cancel:hover {
    background: #777;
}

.dialog-popup .diafoot a#delete,
.diafoot a#delete {
    background: #d32f2f;
}

.dialog-popup .diafoot a#delete:hover,
.diafoot a#delete:hover {
    background: #b71c1c;
}

/* ========================================
   保存ダイアログ
   ======================================== */

#savedialog {
    min-width: 450px;
    width: 450px;
}

#savedialog .diahead {
    white-space: nowrap;
    background: #023F64;
    color: white;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: normal;
    border-radius: 0;
    border-bottom: 3px solid #70D0FF;
}

/* ========================================
   呼出ダイアログ
   ======================================== */

#opendialog {
    min-width: 600px;
}

#opendialog h3 {
    padding: 15px 20px;
    margin: 0;
    background: #023F64;
    color: white;
    font-size: 16px;
    font-weight: normal;
    border-radius: 0;
    border-bottom: 3px solid #70D0FF;
}

/* ダイアログ内のテーブルスタイル */
.dialog-popup table {
    color: #333;
}

.dialog-popup .dataHead th {
    background: #f0f0f0;
    color: #333;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #336699;
    font-weight: normal;
    font-size: 14px;
}

.dialog-popup .dataBody td {
    color: #333;
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    cursor: pointer;
}

.dialog-popup .dataBody tr:hover {
    background: #f5f5f5;
}

.dialog-popup .dataBody tr.openlist_s {
    background: #e8f4f8;
    border-left: 4px solid #336699;
}

/* ダイアログ内の入力フィールド */
.dialog-popup input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 10px;
    box-sizing: border-box;
    color: #333;
    background: white;
}

/* ========================================
   保存メニュー（サブメニュー）
   ======================================== */

.save-menu {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.save-menu-item {
    color: #333;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    transition: background-color 0.2s;
}

.save-menu-item:hover {
    background-color: #f0f0f0;
    color: #000;
}

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

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

    .compare {
        width: 100% !important;
        margin-bottom: 20px;
    }

    #ans .ans table {
        width: 100%;
        font-size: 14px;
    }
}

/* ========================================
   ダイアログ - データ一覧テーブル列幅
   ======================================== */

.openID {
    width: 60px;
}

.openTitle {
    width: auto;
}

.openUpdated {
    width: 150px;
}

.updateTitle {
    width: 100px;
}

/* ========================================
   ジャンプリンク（▲入力エリアへ▲ 等）
   ======================================== */

.jump {
    margin-top: 30px;
    text-align: center;
}

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

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

/* ========================================
   エラー表示
   ======================================== */

.blow {
    position: relative;
    margin-top: 5px;
}

.err {
    background: #ff6b6b;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    z-index: 10;
}

/* ========================================
   基本レイアウト
   ======================================== */

body.sim-page {
    min-width: 1024px;
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
    background: #f5f5f5;
}

#htmlArea {
    width: 100%;
    min-height: 100vh;
    position: relative;
}

#simpleCont {
    width: 980px;
    margin: 0 auto;
    padding: 33px 22px 10px;
}

.content-wrapper {
    width: 100%;
    background: #f5f5f5;
}

/* ========================================
   フォーカス管理
   ======================================== */

.firstFocus {
    /* 初期フォーカス要素（JavaScript連携用） */
    border-color: #3FA9F5 !important;
}

/* ========================================
   レスポンシブ無効化（計算機は固定幅で表示）
   ======================================== */

@media screen and (max-width: 1024px) {
    body.sim-page {
        width: 100%;
        overflow-x: auto;
    }
}

/* ========================================
   印刷対応
   全計算機共通の印刷スタイル
   ======================================== */

@media print {
    /* 印刷時に非表示にする要素 */
    #ope,
    #header,
    #footer,
    .jump,
    .help,
    .calc-help-icon,
    #save,
    #open,
    #print,
    #title,
    #totalhelp,
    .button-group,
    .btnReCalc,
    .calc-button,
    #simHeader,
    .pa-sim-header,
    .rvb-sim-header {
        display: none !important;
    }

    /* ボディの背景色 */
    body,
    body#sim1 {
        width: auto;
        background: white;
    }

    /* 比較エリアのページ分割防止 */
    .compareArea {
        page-break-inside: avoid;
    }

    /* 比較パネルの影削除 */
    .compare,
    .pa-compare {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    /* 結果エリアは新ページから開始 */
    #ans {
        page-break-before: always;
    }

    /* 結果パネルの影削除とページ分割防止 */
    #ans .ans,
    .pa-result,
    .rvb-result-area {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    /* データテーブルの調整 */
    .rvb-data-table {
        font-size: 0.7rem;
    }
}

/* ========================================
   グラフタイトル共通スタイル
   Chart.jsで描画されるグラフのタイトルを
   HTMLテキストとして表示する際に使用
   ======================================== */

/* クラス① - グラフタイトル基本スタイル（全グラフ共通） */
.chart-title {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
    color: #023F64;
    font-weight: bold;
    text-align: center;
    margin: 15px 0 10px;
}

/* クラス② - 通常タイプ（グラフ1つ、全幅表示） */
.chart-title--standard {
    font-size: 21px;
}

/* クラス③ - 比較タイプ（グラフ2つ横並び、半幅表示） */
.chart-title--comparison {
    font-size: 18px;
}

/* ========================================
   結果テーブル共通スタイル
   各シミュレーターの計算結果テーブルに適用
   ======================================== */

/* 結果テーブルの基本レイアウト */
#ans .ans table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}

/* ヘッダー行（項目名）を中央揃え */
#ans .ans table th {
    text-align: center !important;
    padding: 8px;
}

/* データセルは右揃え */
#ans .ans table td {
    text-align: right !important;
    padding: 8px;
}

/* 合計行を強調（黄色背景） */
#ans tr.total th,
#ans tr.total td {
    background: #fff3cd;
    font-size: 16px;
}