html, body {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    /* 標準のtext-size-adjustプロパティを追加してWebKit警告を解決 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.login-container, .otp-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa;
}

.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    padding: 0 1rem;
}

.announcement-container {
    width: 100%;
    margin-bottom: 1rem;
}

.login-card, .otp-card {
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: white;
    width: 100%;
    max-width: 400px;
}

.container, .container-fluid {
    flex: 1;
    margin-bottom: 20px; /* フッターとの間隔を確保 */
}

.footer {
    background-color: #003366;
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: auto;
    flex-shrink: 0; /* フッターが縮まないようにする */
}

/* ソート可能ヘッダーのスタイル */
.sortable-header {
    cursor: pointer;
    position: relative;
}

.sortable-header a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: background-color 0.2s ease;
}

.sortable-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sortable-header a:hover {
    background-color: transparent !important;
}

.sortable-header i {
    font-size: 0.875rem;
    opacity: 0.8;
}

.sortable-header i.text-muted {
    opacity: 0.5;
}

/* フッターリンクのスタイル */
.footer-link {
    color: white !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: #87CEEB !important; /* ライトブルー */
    text-decoration: none;
    border-bottom: 1px solid #87CEEB;
    transform: translateY(-1px);
}

.footer-link:focus {
    color: #87CEEB !important;
    outline: 2px solid #87CEEB;
    outline-offset: 2px;
}

.header {
    background-color: #003366;
    color: white;
    padding: 10px 20px;
}

/* ヘッダーのログアウトボタン */
.header .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    font-size: 0.875rem;
}

.header .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

/* ヘッダーのユーザー情報表示エリア */
.header .user-info {
    max-width: 400px;
    line-height: 1.3;
}

.header .user-info .user-name {
    font-weight: 500;
    margin-bottom: 2px;
}

.header .user-info .merchant-info {
    font-size: 0.9em;
    color: #ffffff; /* 白色でベーステキストを視認しやすく */
}

.header .user-info .merchant-info .fw-bold {
    color: #87CEEB !important; /* ライトブルー - 加盟店名を強調 */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='gray' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.button {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 20px;
    font-size: 16px;
    cursor: pointer;
}

.button-merchant, .button-correction {
    background-color: #0056b3;
    color: white;
}

.home-btn {
    height: 100px; /* Increase button height */
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-btn-primary {
    background-color: #007bff; /* Primary button color */
    color: white; /* White font color */
}

.home-btn-primary:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.home-btn-success {
    background-color: #28a745; /* Success button color */
    color: white; /* White font color */
}

.home-btn-success:hover {
    background-color: #218838; /* Darker shade on hover */
}

.home-btn-warning {
    background-color: #d9534f; /* Darker shade for warning buttons */
    color: white; /* White font color */
}

.home-btn-warning:hover {
    background-color: #c9302c; /* Darker shade on hover */
}

.home-btn-secondary {
    background-color: #6c757d; /* Secondary button color */
    color: white; /* White font color */
}

.home-btn-secondary:hover {
    background-color: #5a6268; /* Darker shade on hover */
}

.home-btn-danger {
    background-color: #dc3545; /* Danger button color */
    color: white; /* White font color */
}

.home-btn-danger:hover {
    background-color: #c82333; /* Darker shade on hover */
}

.home-btn-dark {
    background-color: #343a40; /* Dark button color */
    color: white; /* White font color */
}

.home-btn-dark:hover {
    background-color: #23272b; /* Darker shade on hover */
}

/* テーブルヘッダのスタイルを変更 */
#baseTable thead th {
    background-color: #007bff; /* ブルー */
    color: #ffffff; /* 白 */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    position: sticky;
    top: 0;
    z-index: 10;
}

/* テーブルの罫線をライトグレーで描画 */
#baseTable, #baseTable th, #baseTable td {
    border: 1px solid #dee2e6; /* ライトグレー */
}

/* テーブルの背景色をホワイトに設定 */
#baseTable tbody tr {
    background-color: #ffffff; /* 白 */
}

/* テーブルの行をホバーしたときの背景色を変更 */
#baseTable tbody tr:hover {
    background-color: #e9f7ff; /* ライトブルー */
}

/* テーブルセルの内容が長い場合の処理 */
#baseTable td {
    white-space: nowrap;
    overflow: auto;
    text-overflow: clip;
    max-width: 200px;
}

/* 警告用モーダルのタイトル部のスタイルを変更 */
.modal-header-warning {
    background-color: #ffc107 !important; /* 警告用 - イエロー */
    color: #000000 !important; /* 黒 */
}
.modal-header-warning .modal-title{
    font-weight: 600;
    color: #000000;
}
.modal-header-warning  .btn-close {
    filter: invert(0) !important;
}
 
/* モーダルのタイトル部のスタイルを変更 */
.modal-header {
    background-color: #007bff; /* ブルー */
    color: #ffffff; /* 白 */
}

/* モーダルの閉じるボタンのスタイルを変更 */
.modal-header .btn-close {
    filter: invert(1); /* 白に変更 */
}

/* ヘッダ項目「編集」の背景色を灰色に変更 */
#baseTable thead th.edit-header {
    background-color: #6c757d !important; /* 灰色 */
    color: #ffffff !important; /* 白 */
}

/* ヘッダ項目「資料添付」の背景色を緑に変更 */
#baseTable thead th.attach-header {
    background-color: #28a745 !important; /* 緑 */
    color: #ffffff !important; /* 白 */
}

/* ヘッダ項目「メモ」の背景色を設定 */
#baseTable thead th.memo-header {
    background-color: #317292 !important; /* グレー系の色 */
    color: #ffffff !important; /* 白 */
}

/* シミュレーション用ヘッダーのスタイル */
.simulation-header {
    background: linear-gradient(135deg, #003366, #004080);
    color: white;
    padding: 5px 0;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.case-title {
    color: white;
    text-align: right;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.case-title span {
    color: #ffd700;
    font-weight: bold;
}

/* 一覧に戻るボタンのスタイル */
.back-to-list-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.back-to-list-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.back-to-list-btn:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.back-to-list-btn i {
    font-size: 14px;
}

/* 計算基準日の視認性向上スタイル */
.current-date {
    background: linear-gradient(135deg, #ff6b35, #ff8e53);
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.current-date::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.current-date:hover::before {
    left: 100%;
}

.current-date:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 107, 53, 0.4);
}

/* ステップバーのスタイルを追加 */
.progress-bar {
    display: flex;
    flex-direction: row; /* 横並びにする */
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f0f0f5;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar li {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #ccc;
    position: relative;
}

.progress-bar li.active {
    background-color: #007bff;
}

.progress-bar li.completed {
    background-color: #28a745;
}

.progress-bar li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #fff;
}

/* アイコンボタン */
.btn.attach-btn {
    background-image: url('/icons/journal-arrow-up.svg');
    background-color: #00eeff;
    transition: all 0.3s ease; /* ホバー時のスムーズな遷移効果 */
    width: 32px;
    height: 32px;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

.btn.attach-btn:hover {
    background-color: #00c6cc; /* より濃い青色 */
    transform: translateY(-2px); /* 少し上に浮き上がる効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加 */
    width: 32px;
    height: 32px;
}

.btn.download-btn {
    background-image: url('/icons/journal-arrow-down.svg');
    background-color: #78cf84;
    transition: all 0.3s ease; /* ホバー時のスムーズな遷移効果 */
    width: 32px;
    height: 32px;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

.btn.download-btn:hover {
    background-color: #5fb36a; /* より濃い緑色 */
    transform: translateY(-2px); /* 少し上に浮き上がる効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加 */
    width: 32px;
    height: 32px;
}

.btn.file-delete-btn {
    background-image: url('/icons/trash.svg');
    background-color: #dc3545;
    transition: all 0.3s ease; /* ホバー時のスムーズな遷移効果 */
    width: 32px;
    height: 32px;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

.btn.file-delete-btn:hover {
    background-color: #dc3545;
    transform: translateY(-2px); /* 少し上に浮き上がる効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加 */
    width: 32px;
    height: 32px;
}

.btn.preview-btn {
    background-image: url('/icons/eye.svg');
    background-color: #17a2b8;
    transition: all 0.3s ease; /* ホバー時のスムーズな遷移効果 */
    width: 32px;
    height: 32px;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

.btn.preview-btn:hover {
    background-color: #138496; /* より濃い水色 */
    transform: translateY(-2px); /* 少し上に浮き上がる効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加 */
    width: 32px;
    height: 32px;
}

/* ファイル操作用アイコンボタン */
.btn.file-icon {
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
}

.btn.file-doc-icon {
    background-image: url('/icons/file-earmark.svg');
}

.btn.memo-btn {
    background: url('/icons/sticky.svg') no-repeat center;
    background-color: #c2c8c9;
    transition: all 0.3s ease; /* ホバー時のスムーズな遷移効果 */
    width: 32px;
    height: 32px;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

/* ホバー時の背景色 */
.btn.memo-btn:hover {
    background-color: #c2c8c9;
    transform: translateY(-2px); /* 少し上に浮き上がる効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加 */
    width: 32px;
    height: 32px;
}

/* メモ追加用ボタン */
.add-memo-btn {
    background: url('/icons/pencil-square.svg') no-repeat center;
    background-color: #39acc0;
    transition: all 0.3s ease; /* ホバー時のスムーズな遷移効果 */
    width: 32px;
    height: 32px;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
}

.add-memo-btn:hover {
    background-color: #39acc0;
    transform: translateY(-2px); /* 少し上に浮き上がる効果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を追加 */
    width: 32px;
    height: 32px;
}

/* メモ表示用テキストエリアのスタイル */
textarea.memo-view {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    resize: none;
    cursor: default;
}

textarea.memo-view:focus {
    outline: none;
    box-shadow: none;
    background-color: #f8f9fa;
}

/* メモモーダル関連のスタイル */
.memo-view {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    color: #495057;
}

.memo-edit {
    background-color: #fff;
    border: 1px solid #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* メモクリアボタンのカスタムスタイル */
.btn-memo-clear {
    background-color: #fd7e14; /* オレンジ色 - 警告的なニュアンス */
    color: #fff; /* テキスト色を白に */
    border-color: #fd7e14;
}

.btn-memo-clear:hover {
    background-color: #e8710c; /* ホバー時に少し暗く */
    color: #fff;
    border-color: #d9690b;
}

.btn-memo-clear:focus {
    box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.25); /* フォーカス時のアウトライン */
    color: #fff;
}

.btn-memo-clear:active {
    background-color: #d9690b; /* アクティブ時にさらに暗く */
    color: #fff;
    border-color: #ca630a;
}

/* 編集中注記のスタイル */
#editingNotice {
    font-size: 0.9rem;
    padding: 0.5rem;
}

/* 警告ボタンのテキストカラーを白に固定 */
.btn-warning.text-white {
    color: #fff !important;
}

/* 編集中注記のスタイル */
#editingNotice {
    font-size: 0.9rem;
    padding: 0.5rem;
}

/* 添付ファイル一覧テーブルのスタイル */
#attachedFilesList .table {
    margin-bottom: 0;
}

#attachedFilesList .table th {
    background-color: #28a745; /* Bootstrap の緑色 */
    color: white;
    font-weight: 500;
    border-color: #218838; /* より濃い緑色のボーダー */
}

#attachedFilesList .table th.action-header {
    background-color: #6c757d; /* Bootstrap の灰色 */
    border-color: #5a6268; /* より濃い灰色のボーダー */
}

#attachedFilesList .table td {
    vertical-align: middle;
    border-color: #e9ecef;
}

#attachedFilesList .btn-group {
    display: flex;
    gap: 0.25rem;
}

#attachedFilesList .table tr:hover {
    background-color: #f1f8f1; /* 薄い緑色の背景 */
}

/* 不動産一覧テーブルのスクロール設定 */
.table-responsive {
    max-height: calc(100vh - 300px); /* ヘッダーとフッターを考慮した高さ */
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* ===================================
   ２段表示テーブル用スタイル
   =================================== */

/* テーブル全体の基本設定 */
.table-two-row {
    border-collapse: separate;
    border-spacing: 0;
}

/* 行ペア単位でのゼブラストライプ（基本） */
.table-two-row tbody tr.row-upper:nth-child(4n-3),
.table-two-row tbody tr.row-lower:nth-child(4n-2) {
    background-color: #f8f9fa; /* 薄いグレー - 奇数ペア */
}

.table-two-row tbody tr.row-upper:nth-child(4n-1),
.table-two-row tbody tr.row-lower:nth-child(4n) {
    background-color: #ffffff; /* 白 - 偶数ペア */
}

/* 上段と下段で微妙に色を変える */
/* 奇数ペアの下段を少し濃く */
.table-two-row tbody tr.row-lower:nth-child(4n-2) {
    background-color: #f0f1f2; /* 上段より少し濃いグレー */
}

/* 偶数ペアの下段を僅かに濃く */
.table-two-row tbody tr.row-lower:nth-child(4n) {
    background-color: #f7f7f7; /* 白より僅かに濃く */
}

/* rowspanセルの視覚的強化 */
.table-two-row tbody td[rowspan="2"] {
    background-color: rgba(108, 117, 125, 0.05) !important;
    border-left: 3px solid #6c757d;
    vertical-align: middle;
    position: relative;
}

/* rowspanセルの境界線強化 */
.table-two-row tbody td[rowspan="2"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.5px;
    background-color: #dee2e6;
}

/* データ境界の視覚的分離 */
.table-two-row tbody tr.row-lower {
    border-bottom: 2px solid #dee2e6;
}

.table-two-row tbody tr.row-upper {
    border-top: 1px solid #e9ecef;
}

/* ホバー効果で行ペア全体をハイライト */
.table-two-row tbody tr.row-upper:hover,
.table-two-row tbody tr.row-lower:hover {
    background-color: #e3f2fd !important;
    transition: background-color 0.2s ease;
}

/* 行ペア全体のホバー効果（JavaScript連携） */
.table-two-row tbody tr[data-row-pair]:hover,
.table-two-row tbody tr[data-row-pair].hover-pair {
    background-color: #e3f2fd !important;
}

/* ヘッダーの２段構造対応 */
.table-two-row thead th[rowspan="2"] {
    background-color: #0056b3 !important;
    color: white !important;
    vertical-align: middle;
    border-right: 2px solid #007bff;
}

/* 2段表示での特別ヘッダーの色指定 */
.table-two-row thead th[rowspan="2"].edit-header {
    background-color: #6c757d !important; /* 灰色 */
}

.table-two-row thead th[rowspan="2"].attach-header {
    background-color: #28a745 !important; /* 緑 */
}

.table-two-row thead th[rowspan="2"].memo-header {
    background-color: #317292 !important; /* グレー系の色 */
}

.table-two-row thead tr.row-upper th {
    background-color: #007bff !important;
    color: white !important;
    border-bottom: 1px solid #0056b3;
}

.table-two-row thead tr.row-lower th {
    background-color: #0069d9 !important;
    color: white !important;
}

/* 2段表示テーブル専用の文字折り返し設定 */
.table-two-row {
    width: 100%;
    min-width: 1400px; /* 最小幅を設定してブラウザスクロールで対応 */
    table-layout: auto;
    border-collapse: collapse;
}

.table-two-row td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: none !important;
    padding: 8px;
}

/* 動的な行ペアクラスによる背景色設定（CSSクラスベース） */
.table-two-row tbody tr.row-pair-odd.row-upper {
    background-color: #f8f9fa !important;
}

.table-two-row tbody tr.row-pair-odd.row-lower {
    background-color: #f0f1f2 !important;
}

.table-two-row tbody tr.row-pair-even.row-upper {
    background-color: #ffffff !important;
}

.table-two-row tbody tr.row-pair-even.row-lower {
    background-color: #f7f7f7 !important;
}

/* より詳細な境界線設定 */
.table-two-row tbody tr.row-pair-odd {
    border-top: 2px solid #dee2e6;
}

.table-two-row tbody tr.row-pair-even {
    border-top: 2px solid #e9ecef;
}

/* 最後のペアの下線強調 */
.table-two-row tbody tr.row-lower:last-child {
    border-bottom: 3px solid #495057;
}

/* データ区切り線の強化 */
.table-two-row tbody tr.row-lower:not(:last-child) {
    border-bottom: 3px solid #adb5bd;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .table-two-row {
        font-size: 0.85em;
    }
    
    .table-two-row tbody td[rowspan="2"] {
        border-left-width: 2px;
    }
}

/* ===================================
   不動産一覧 土地・建物グルーピングスタイル
   =================================== */

/* --- 土地行の背景色 --- */
.table-two-row tbody tr.land-row.row-upper {
    background-color: #f0faf0 !important;  /* 薄い緑 */
}
.table-two-row tbody tr.land-row.row-lower {
    background-color: #e8f3e8 !important;  /* やや濃い緑 */
}

/* 土地行の左ボーダー（グループ外枠に統一） */
.table-two-row tbody tr.land-row td[rowspan="2"] {
    border-left: 3px solid #d4a574 !important;
}

/* --- 建物行の背景色（奇数） --- */
.table-two-row tbody tr.building-row.building-odd.row-upper {
    background-color: #f0f4fa !important;  /* 薄い青 */
}
.table-two-row tbody tr.building-row.building-odd.row-lower {
    background-color: #e8eef5 !important;  /* やや濃い青 */
}

/* --- 建物行の背景色（偶数） --- */
.table-two-row tbody tr.building-row.building-even.row-upper {
    background-color: #f5f8fc !important;  /* より薄い青 */
}
.table-two-row tbody tr.building-row.building-even.row-lower {
    background-color: #edf2f8 !important;  /* やや濃い青 */
}

/* 建物行の左ボーダー（グループ外枠に統一） */
.table-two-row tbody tr.building-row td[rowspan="2"] {
    border-left: 3px solid #d4a574 !important;
}

/* --- 孤立建物行（土地なし建物）--- */
/* 左右ボーダーで独立グループ枠を形成、背景色なし */
.table-two-row tbody tr.orphan-building-row td[rowspan="2"] {
    border-left: 3px solid #d4a574 !important;
}
.table-two-row tbody tr.orphan-building-row td:last-child {
    border-right: 3px solid #d4a574 !important;
}

/* --- 土地グループ境界線 --- */
.table-two-row tbody tr.land-group-last.row-lower {
    border-bottom: 3px solid #d4a574 !important;
}

/* インデント記号 */
.building-indent-mark {
    color: #90a4ae;
    margin-right: 4px;
    font-size: 0.85em;
}

/* --- 建物棟数バッジ（土地行の名称セル内） --- */
.building-count-badge {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 600;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 8px;
    background-color: #e8f5e9;
    color: #2e7d32;
    vertical-align: middle;
    line-height: 1.4;
    max-height: 1.2em;
}

/* --- ホバー効果（種別色を上書き） --- */
.table-two-row tbody tr.land-row:hover,
.table-two-row tbody tr.land-row.hover-pair,
.table-two-row tbody tr.building-row:hover,
.table-two-row tbody tr.building-row.hover-pair {
    background-color: #e3f2fd !important;
}

/* 印刷時の背景色保持 */
@media print {
    .table-two-row tbody tr.row-upper:nth-child(4n-3),
    .table-two-row tbody tr.row-lower:nth-child(4n-2) {
        background-color: #f8f9fa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .table-two-row tbody td[rowspan="2"] {
        background-color: rgba(13, 110, 253, 0.05) !important;
        border-left: 2px solid #0d6efd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* --- 不動産グルーピング 印刷対応 --- */
    .table-two-row tbody tr.land-row.row-upper {
        background-color: #f0faf0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .table-two-row tbody tr.land-row.row-lower {
        background-color: #e8f3e8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .table-two-row tbody tr.building-row.row-upper {
        background-color: #f0f4fa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .table-two-row tbody tr.building-row.row-lower {
        background-color: #e8eef5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 左ボーダー（グループ外枠に統一） */
    .table-two-row tbody tr.land-row td[rowspan="2"] {
        border-left: 3px solid #d4a574 !important;
    }
    .table-two-row tbody tr.building-row td[rowspan="2"] {
        border-left: 3px solid #d4a574 !important;
    }

    /* 孤立建物の印刷対応 */
    .table-two-row tbody tr.orphan-building-row td[rowspan="2"] {
        border-left: 3px solid #d4a574 !important;
    }
    .table-two-row tbody tr.orphan-building-row td:last-child {
        border-right: 3px solid #d4a574 !important;
    }

    /* グループ境界線を印刷にも適用 */
    .table-two-row tbody tr.land-group-last.row-lower {
        border-bottom: 2px solid #d4a574 !important;
    }

    /* 棟数バッジの印刷スタイル（インライン維持、縦幅影響なし） */
    .building-count-badge {
        border: 1px solid #4caf50;
        background-color: transparent !important;
        color: #2e7d32 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 印刷時はホバー効果を無効化 */
    .table-two-row tbody tr.land-row:hover,
    .table-two-row tbody tr.land-row.hover-pair,
    .table-two-row tbody tr.building-row:hover,
    .table-two-row tbody tr.building-row.hover-pair {
        background-color: inherit !important;
    }
}

/* ===================================
   財産総額画面 不動産カテゴリ グルーピングスタイル
   =================================== */

/* --- 土地行の背景色 --- */
.inheritance-table tr.sub-item.total-land-row {
    background-color: #f0faf0 !important;
}
.inheritance-table tr.sub-item.total-land-row th:first-child {
    border-left: 3px solid #d4a574 !important;
}

/* --- 建物行の背景色 --- */
.inheritance-table tr.sub-item.total-building-row {
    background-color: #f0f4fa !important;
}
.inheritance-table tr.sub-item.total-building-row th:first-child {
    border-left: 3px solid #d4a574 !important;
}

/* --- 孤立建物行（土地なし建物）--- */
/* 左右ボーダーで独立グループ枠を形成、背景色なし */
.inheritance-table tr.sub-item.total-orphan-building-row th:first-child {
    border-left: 3px solid #d4a574 !important;
}
.inheritance-table tr.sub-item.total-orphan-building-row td:last-child {
    border-right: 3px solid #d4a574 !important;
}

/* --- 土地グループ境界線 --- */
.inheritance-table tr.sub-item.total-group-last {
    border-bottom: 3px solid #d4a574 !important;
}

/* アクセシビリティ強化 */
.table-two-row tbody tr:focus-within {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

/* 2段表示のスタイル */
.table .row-upper td,
.table .row-lower td {
    vertical-align: middle;
    padding: 0.5rem;
}

/* 上段行の背景色を少し明るく */
.table .row-upper {
    background-color: rgba(248, 249, 250, 0.8);
}

/* 下段行の背景色 */
.table .row-lower {
    background-color: rgba(255, 255, 255, 1);
}

/* ストライプ効果の調整 */
.table-striped > tbody > .row-upper:nth-of-type(odd),
.table-striped > tbody > .row-lower:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ホバー効果を2行セットで適用 */
.table-hover > tbody > .row-upper:hover,
.table-hover > tbody > .row-upper:hover + .row-lower {
    background-color: rgba(0, 123, 255, 0.1);
}

.table-hover > tbody > .row-lower:hover,
.table-hover > tbody > .row-lower:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* rowspanを使用するセルの境界線調整 */
.table .row-upper td[rowspan="2"] {
    border-bottom: none;
}

.table .row-lower {
    border-top: none;
}

/* スクロールバーのスタイリング */
.table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

/* テーブルヘッダーを固定 */
.table-responsive .table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #007bff !important; /* 青色に統一 */
    color: #ffffff !important;
}

/* table-responsive内でも個別ヘッダーのスタイルを適用 */
.table-responsive .table thead th.edit-header {
    background-color: #6c757d !important; /* 灰色 */
    color: #ffffff !important; /* 白 */
}

.table-responsive .table thead th.attach-header {
    background-color: #28a745 !important; /* 緑 */
    color: #ffffff !important; /* 白 */
}

.table-responsive .table thead th.memo-header {
    background-color: #317292 !important; /* グレー系の色 */
    color: #ffffff !important; /* 白 */
}

/* フォームラベルのスタイル */
.form-label {
    background-color: #003366; /* blueから#007bffに変更 */
    color: white;
    padding: 5px;
    border-radius: 4px;
}

/* 必須マークのスタイル */
.required-mark {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 4px;
    font-size: 0.75em;
    font-weight: bold;
    color: #ffffff;
    background-color: #ff4d4d;
    border-radius: 3px;
}

/* モーダル内のフォームラベルのスタイルを強制適用 */
.modal .form-label,
#editValueModal .form-label,
#bulkDistributionModal .form-label {
    background-color: #003366 !important;
    color: white !important;
    padding: 5px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

/* 評価額モーダル内の相続人ラベル専用スタイル */
.value-input-group .form-label {
    background-color: #003366 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* 一括分配モーダル内の相続人ラベル専用スタイル */
.percentage-allocation-section .form-label {
    background-color: #003366 !important;
    color: white !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* エラーメッセージのスタイル */
.error-message {
    color: red;
    font-size: 0.9em;
}

/* 無効な入力フィールドのスタイル */
.is-invalid {
    border-color: red;
}

/* グローバルエラーメッセージのスタイル */
.global-error-message {
    color: red;
    font-size: 1em;
    margin-bottom: 1em;
}

/* Bootstrap text-dangerクラスをオーバーライド */
.text-danger {
    color: #ff4d4d !important; /* より明るく鮮やかな赤色 */
    font-weight: bold; /* 太字にして目立たせる */
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.5); /* 白い縁取りのような効果を追加 */
}

/* パネルのスタイル */
.panel-heading {
    margin-bottom: 10px;
}

.panel-heading h5 {
    color: #007bff;
    font-weight: bold;
    margin: 0;
    margin-bottom: 15px;
}

.panel-body {
    background-color: #e9ecef !important; /* より濃いグレー (#f8f9fa から #e9ecef に変更) */
    border: 1px solid #dee2e6 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* 内側に微細な影を追加してさらに強調 */
}

/* 自動計算される入力フィールドのスタイル */
.auto-calculated {
    background-color: #e8f5e9 !important; /* 薄い緑色 */
    border-color: #a5d6a7 !important; /* やや濃い緑色のボーダー */
}

.auto-calculated:read-only {
    opacity: 1 !important; /* readonlyでも透明度を維持 */
    cursor: not-allowed; /* 編集不可を示すカーソル */
}

/* 自動計算フィールドのラベルスタイル */
.auto-calculated-label {
    background-color: #28a745 !important; /* 濃い緑色 */
    color: white !important;
    border-color: #4caf50 !important; /* さらに濃い緑色のボーダー */
}

/* 自動入力マークのスタイル */
.auto-input-mark {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    color: #6c757d;
    margin-left: 0.5rem;
}

/* 手動入力マークのスタイル */
.manual-input-mark {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    background-color: #cff4fc;
    border-radius: 0.25rem;
    color: #055160;
    margin-left: 0.5rem;
}

/* 計算中表示のスタイル */
.calculating {
    background-color: #fff3cd !important;
    border-color: #ffeaa7 !important;
    cursor: not-allowed !important;
    opacity: 0.8;
    position: relative;
}

.calculating::after {
    content: "計算中...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 193, 7, 0.95);
    color: #856404;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}

/* 計算中のカード全体 */
.card.calculation-in-progress {
    opacity: 0.8;
    pointer-events: none;
}

.card.calculation-in-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 5;
}

/* 計算状態インジケーター */
.calculation-status {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    display: inline-block;
    min-width: 80px;
    text-align: center;
}

.calculation-status.waiting {
    background-color: #ffc107;
    color: #856404;
    animation: pulse 1.5s infinite;
}

.calculation-status.calculating {
    background-color: #17a2b8;
    color: white;
    animation: calculating-spinner 1s infinite linear;
}

.calculation-status.completed {
    background-color: #28a745;
    color: white;
}

.calculation-status.text-danger {
    background-color: #dc3545;
    color: white;
}

.calculation-status.text-muted {
    background-color: #6c757d;
    color: white;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes calculating-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 計算中プログレスメッセージ */
#calculation-progress-message {
    animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 計算中フィールドの無効化表示 */
input:disabled.calculating,
select:disabled.calculating,
textarea:disabled.calculating {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

/* 計算中表示のスタイル */
.calculating {
    background-color: #f8f9fa;
    color: #6c757d;
    font-style: italic;
}

/* ファイルアップロード関連のスタイル */
#dropZone {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

#dropZone.dragover {
    border-color: #0d6efd;
    background-color: #e7f1ff;
    color: #0d6efd;
}

.file-restrictions.alert-secondary {
    background-color: #f8f9fa;
    border-left: 4px solid #6c757d;
}

.file-restrictions ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.file-restrictions li {
    margin-bottom: 0.2rem;
}

/* テキストリストのスタイル */
.text-muted.small ul {
    padding-left: 1.2rem;
}

.text-muted.small li {
    margin-bottom: 0.2rem;
}

/* アイコンの基本スタイル */
.bi {
    display: inline-block;
    vertical-align: -0.125em;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* ファイルリストコンテナのスタイル */
.file-list-container {
    background-color: #f8f9fa;
    border-color: #dee2e6 !important;
}

.file-list-container h6 {
    color: #495057;
    margin-bottom: 0.5rem;
}

.file-list-container h6 i {
    margin-right: 0.5rem;
}

/* 空のファイルリストのスタイル */
#fileList:empty::after,
#fileList .text-muted {
    color: #6c757d;
    font-size: 0.875rem;
    padding: 1rem;
}

/* ファイルリストアイテムのスタイル */
.file-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.file-list-item:last-child {
    border-bottom: none;
}

/* 親族構成一覧のスタイル */
.family-generation-0 td {
    background-color: #f8f9fa;
}

.family-generation-1 td:first-child {
    padding-left: 2rem;
}

.family-generation-2 td:first-child {
    padding-left: 4rem;
}

.family-generation-3 td:first-child {
    padding-left: 6rem;
}

/* 無効化されたボタンのスタイル */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 無効化されたボタンのスタイル強化 */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;  /* ツールチップを表示させるため */
}

/* ツールチップのスタイル */
[title]:hover::after {
    content: attr(title);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    z-index: 100;
    margin-top: -2.5rem;
    max-width: 200px;
    text-align: center;
}

/* 編集中/追加先の情報強調表示 */
.text-primary.fw-bold {
    color: #0d6efd !important;
    font-weight: bold !important;
    background-color: #e9f5ff;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.amount-received-title {
    color: #0d6efd !important;
    font-weight: bold !important;
    background-color: #e9f5ff;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    font-size: 28px;
}

/* モーダルタイトルのスタイル調整 */
.modal-title {
    font-weight: 600;
    color: #f8f9fa;
}

:root {
    /* 相続順位に応じた色 */
    --inheritance-spouse-color: #9c27b0;
    --inheritance-first-color: #0d6efd;
    --inheritance-second-color: #198754;
    --inheritance-third-color: #d35400;
    --inheritance-none-color: #6c757d;
    
    /* テキスト色 */
    --inheritance-text-color: #ffffff;
    
    /* リンク色 */
    --inheritance-link-color: #000000;
}

/* 相続順位に応じたバッジスタイル */
.badge.inheritance-spouse {
    background-color: var(--inheritance-spouse-color);
    color: var(--inheritance-text-color);
}

.badge.inheritance-first {
    background-color: var(--inheritance-first-color);
    color: var(--inheritance-text-color);
}

.badge.inheritance-second {
    background-color: var(--inheritance-second-color);
    color: var(--inheritance-text-color);
}

.badge.inheritance-third {
    background-color: var(--inheritance-third-color);
    color: var(--inheritance-text-color);
}

.badge.inheritance-none {
    background-color: var(--inheritance-none-color);
    color: var(--inheritance-text-color);
}

/* 相続順位の凡例スタイル */
.inheritance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 5px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.inheritance-legend-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.inheritance-legend-color {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 3px;
}

/* テーブル上部に凡例を追加 */
.table-legend-container {
    margin-bottom: 15px;
}

/* プレビュー関連のスタイル */
.preview-container {
    min-height: 300px;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 10px;
    margin-bottom: 1rem;
/*    display: flex;*/
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

.preview-image {
    max-width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.preview-pdf {
    width: 100%;
    height: 70vh;
    border: none;
}

/* ファイルアイコン関連 */
.file-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.file-doc-icon {
    background-image: url('/icons/file-earmark.svg');
}

.file-pdf-icon {
    background-image: url('/icons/file-earmark-pdf.svg');
}

.file-word-icon {
    background-image: url('/icons/file-earmark-word.svg');
}

.file-excel-icon {
    background-image: url('/icons/file-earmark-excel.svg');
}

.file-image-icon {
    background-image: url('/icons/file-earmark-image.svg');
}

/* 路線価カード追加ボタンのスタイル */
.card-add-buttons {
    margin-bottom: 1rem;
}

.card-add-buttons .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* カード削除ボタンのスタイル */
.card-header .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.card-header .btn:hover {
    opacity: 0.8;
}

/* 路線価カードのアニメーション */
.roadside-card {
    transition: all 0.3s ease-in-out;
}

.roadside-card.fadeIn {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 路線価カード追加ボタン群のスタイリング */
#addCardButtonsRow {
    transition: all 0.3s ease-in-out;
    transform: translateY(0);
}

#addCardButtonsRow.moving {
    transform: translateY(-5px);
}

#addCardButtonsRow .card {
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

#addCardButtonsRow .card:hover {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, 0.02);
}

#addCardButtonsRow .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

#addCardButtonsRow .card:hover::before {
    left: 100%;
}

#addCardButtonsRow .btn {
    transition: all 0.2s ease-in-out;
    border-width: 1px;
    font-weight: 500;
}

#addCardButtonsRow .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#addCardButtonsRow .btn:active {
    transform: translateY(0);
}

/* レスポンシブデザイン対応 */
@media (max-width: 576px) {
    #addCardButtonsRow .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #addCardButtonsRow .btn {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
}

/* 追加ボタン群の表示・非表示アニメーション */
#addCardButtonsRow {
    opacity: 1;
    max-height: 200px;
    overflow: hidden;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#addCardButtonsRow[style*="display: none"] {
    opacity: 0;
    max-height: 0;
    transform: scale(0.95);
}

/* 小数点入力フィールドのスタイル */
.decimal-input {
    text-align: right;
}

.decimal-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 小数点入力フィールドの無効状態 */
.decimal-input.is-invalid {
    border-color: #dc3545;
}

.decimal-input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* 小数点入力フィールドのプレースホルダー */
.decimal-input::placeholder {
    color: #6c757d;
    font-style: italic;
}

/* 小数点入力フィールドのホバー効果 */
.decimal-input:hover:not(:focus):not([readonly]) {
    border-color: #86b7fe;
}

/* 倍率入力フィールド専用のスタイル */
#m_multiplicationFactor {
    font-weight: 500;
    font-size: 1.1rem;
}

#m_multiplicationFactor:focus {
    transform: scale(1.02);
    transition: transform 0.1s ease-in-out;
}

/* 批准方式のカテゴリカードスタイル */
.approval-category-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.approval-category-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.approval-category-card .card-header {
    border-bottom: none;
    font-weight: 500;
}

.approval-category-card .card-header h6 {
    font-size: 1rem;
    font-weight: 600;
}

.approval-category-card .card-body {
    padding: 1.5rem;
}

/* 各カテゴリの色分け */
.approval-category-card .card-header.bg-primary {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
}

.approval-category-card .card-header.bg-success {
    background: linear-gradient(135deg, #28a745, #1e7e34) !important;
}

.approval-category-card .card-header.bg-warning {
    background: linear-gradient(135deg, #ffc107, #e0a800) !important;
}

.approval-category-card .card-header.bg-info {
    background: linear-gradient(135deg, #17a2b8, #138496) !important;
}

.approval-category-card .card-header.bg-secondary {
    background: linear-gradient(135deg, #6c757d, #545b62) !important;
}

/* 評価計算カードのスタイル */
.approval-summary-card {
    border: 2px solid #495057;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.approval-summary-card .card-header {
    background: linear-gradient(135deg, #343a40, #23272b) !important;
    border-bottom: none;
}

.approval-summary-card .card-header h6 {
    font-size: 1.1rem;
    font-weight: 600;
}

/* 入力グループのスタイル調整 */
.approval-category-card .input-group-text {
    background-color: #f8f9fa;
    border-color: #ced4da;
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
}

.approval-category-card .form-control:focus + .input-group-text {
    border-color: #80bdff;
    background-color: #e3f2fd;
}

/* アイコンとテキストの間隔調整 */
.approval-category-card .card-header i {
    font-size: 1.1rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .approval-category-card .card-body {
        padding: 1rem;
    }
    
    .approval-category-card .col-md-4 {
        margin-bottom: 1rem;
    }
    
    .approval-category-card .input-group-text {
        font-size: 0.8rem;
    }
}

/* フォーカス時のカードハイライト */
.approval-category-card:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    border-color: #80bdff;
}

/* 自動計算フィールドのスタイル統一 */
.approval-category-card .auto-calculated {
    background-color: #f8f9fa;
    color: #495057;
}

.approval-category-card .auto-calculated:focus {
    background-color: #f8f9fa;
    box-shadow: none;
}

/* 宅地造成費カード: 折りたたみヘッダースタイル */
.land-prep-collapse-header {
    cursor: pointer;
    user-select: none;
    transition: filter 0.2s ease;
}

.land-prep-collapse-header:hover {
    filter: brightness(1.1);
}

/* シェブロンアイコンの回転アニメーション */
.land-prep-chevron {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 0.85rem;
}

/* 展開時: aria-expanded="true" で90度回転 */
.land-prep-collapse-header[aria-expanded="true"] .land-prep-chevron {
    transform: rotate(90deg);
}

/* ヘッダー内の控除額バッジ */
.land-prep-deduction-badge {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25em 0.6em;
    opacity: 0.95;
}

.land-prep-deduction-badge:empty {
    display: none;
}

/* アコーディオン機能のスタイル */
.clickable {
    cursor: pointer;
}

.clickable:hover {
    background-color: #f8f9fa;
}

.toggle-icon {
    cursor: pointer;
    user-select: none;
}

.toggle-icon:hover {
    background-color: #e9ecef;
}

/* アイコンのスタイル */
.icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    transition: transform 0.2s ease;
    fill: #6c757d;
}

.icon-right {
    transform: rotate(0deg);
}

.icon-down {
    transform: rotate(90deg);
}

/* テーブル行のスタイル */
.main-item {
    border-bottom: 1px solid #dee2e6;
}

.main-item:hover {
    background-color: #f8f9fa;
}

/* サブアイテム行のスタイル */
.sub-item {
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
}

.sub-item:hover {
    background-color: #e9ecef;
}

/* 非表示状態 */
.d-none {
    display: none !important;
}

/* クリック可能なセルのスタイル */
.clickable-cell {
    cursor: pointer;
}

.clickable-cell:hover {
    background-color: #e3f2fd;
    color: #1976d2;
}

/* ラジオボタン列のスタイル */
.radio-column {
    text-align: center;
    vertical-align: middle;
    width: 30px;
    padding: 0;
}

.no-border-right {
    border-right: none !important;
}

.no-border-left {
    border-left: none !important;
}

/* 自動幅調整 - 省略表示を防ぐ（相続シミュレーション専用） */
.inheritance-table .auto-width {
    width: auto;
    white-space: normal; /* nowrapから変更 */
    word-wrap: break-word; /* 長い文字列を折り返し */
    overflow-wrap: break-word; /* 現代的な書き方 */
    overflow: visible; /* overflowをvisibleに */
    text-overflow: initial; /* text-overflowを無効化 */
}

/* ===========================================
   財産総額と相続税概算テーブル関連のスタイル
   =========================================== */

/* CSS変数定義 */
/*:root {
    --base-table-width: 800px;
    --heir-column-width: 140px; /* 160px から 140px に縮小 */
/*    --acquisition-amount-column-width: 220px; /* 200px から 220px に拡大 */
/*}*/

/* 相続人テーブルの基本スタイル */
.inheritance-table {
    table-layout: fixed !important; /* auto から fixed に変更して列幅を制御 */
    width: 100%;
    min-width: var(--base-table-width);
    border-collapse: collapse;
    font-size: 15px; /* 13px から 15px に拡大 */
}

/* 固定列（項目名、合計、アイコン）のスタイル */
.inheritance-table .fixed-column {
    min-width: 120px;
    white-space: normal; /* 折り返しを許可 */
    word-wrap: break-word; /* 長い文字列を折り返し */
    overflow: hidden; /* はみ出しを隠す */
    text-overflow: ellipsis; /* 省略記号を表示 */
    font-size: 15px; /* 13px から 15px に拡大 */
    padding: 8px 12px;
}

/* 相続人列のスタイル */
.inheritance-table .heir-column {
    min-width: var(--heir-column-width);
    width: var(--heir-column-width); /* 固定幅を設定して制御 */
    max-width: var(--heir-column-width); /* 最大幅を制限 */
    font-size: 15px; /* 13px から 15px に拡大 */
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden; /* はみ出しを隠す */
}

/* 相続人ヘッダーのコンテンツ */
.heir-header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

/* 相続人名のスタイル */
.heir-name {
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    word-break: break-all;
    hyphens: auto;
    white-space: normal; /* 折り返しを許可 */
    overflow: hidden; /* はみ出しを隠す */
    text-overflow: ellipsis; /* 省略記号を表示 */
    max-width: 100%; /* 親要素の幅に制限 */
}

.heir-name-short {
    font-size: 15px; /* 13px から 15px に拡大 */
}

.heir-name-medium {
    font-size: 14px; /* 12px から 14px に拡大 */
}

.heir-name-long {
    font-size: 13px; /* 12px から 13px に拡大 */
}

/* 代襲相続人マークのスタイル */
.succession-heir-mark {
    display: inline-block;
    background-color: #28a745; /* 緑色 */
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    padding: 1px 3px;
    margin-left: 3px;
    vertical-align: top;
    line-height: 1;
}

/* 相続人ボタンのスタイル */
.heir-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.heir-icon-wrapper {
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.heir-icon-wrapper:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* 資産の税務上評価額列のスタイル - 評価額列の幅を拡大 */
.inheritance-table .acquisition-amount-column {
    min-width: var(--acquisition-amount-column-width);
    width: var(--acquisition-amount-column-width) !important; /* 固定幅を設定 */
    max-width: var(--acquisition-amount-column-width) !important; /* 最大幅を制限 */
    font-size: 15px; /* 13px から 15px に拡大 */
    padding: 8px 12px;
    text-align: right;
    white-space: nowrap !important; /* 折り返しを無効にして数値表示を保持 */
    overflow: hidden !important; /* はみ出しを隠す */
    text-overflow: ellipsis !important; /* 省略記号を表示 */
    line-height: 1.3; /* 行間を調整 */
    vertical-align: top; /* 縦方向の配置を上揃え */
    box-sizing: border-box; /* パディングを含む幅計算 */
}

/* テーブルセルの基本スタイル */
.inheritance-table td,
.inheritance-table th {
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    vertical-align: top; /* 上揃えに変更 */
    font-size: 15px; /* 13px から 15px に拡大 */
    height: auto; /* 高さを自動調整 */
}

/* テーブル行の高さを自動調整 */
.inheritance-table tr {
    height: auto;
}

/* ラジオボタン列のスタイル */
.radio-column {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    text-align: center;
    padding: 4px;
}

/* アイコンセルのスタイル */
.icon-cell {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;
    padding: 4px;
}

/* 上部スクロールバーのスタイル */
.table-scroll-top {
    width: 100%;
    height: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dee2e6;
    border-bottom: none;
    background-color: #f8f9fa;
}

.table-scroll-top-content {
    height: 1px;
    background-color: transparent;
}

/* 下部スクロールバーのスタイル */
.table-scroll-bottom {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dee2e6;
    border-top: none;
    max-height: 600px;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
    :root {
        --heir-column-width: 120px; /* 140px から 120px に縮小 */
        --acquisition-amount-column-width: 200px; /* 180px から 200px に拡大 */
    }
    
    .inheritance-table {
        font-size: 14px; /* 12px から 14px に拡大 */
    }
    
    .fixed-column,
    .heir-column,
    .acquisition-amount-column,
    .inheritance-table td,
    .inheritance-table th {
        font-size: 14px; /* 12px から 14px に拡大 */
    }
    
    .heir-name-short {
        font-size: 14px; /* 新規追加 */
    }
    
    .heir-name-medium {
        font-size: 13px; /* 新規追加 */
    }
    
    .heir-name-long {
        font-size: 12px; /* 新規追加 */
    }
}

@media (max-width: 768px) {
    :root {
        --heir-column-width: 100px; /* 120px から 100px に縮小 */
        --acquisition-amount-column-width: 180px; /* 160px から 180px に拡大 */
    } 
    
    .inheritance-table {
        font-size: 13px; /* 11px から 13px に拡大 */
    }
    
    .fixed-column,
    .heir-column,
    .acquisition-amount-column,
    .inheritance-table td,
    .inheritance-table th {
        font-size: 13px; /* 11px から 13px に拡大 */
        padding: 6px 8px;
    }
    
    .heir-header-content {
        min-height: 50px;
    }
    
    .heir-name-short {
        font-size: 13px; /* 新規追加 */
    }
    
    .heir-name-medium {
        font-size: 12px; /* 新規追加 */
    }
    
    .heir-name-long {
        font-size: 11px; /* 新規追加 */
    }
}

/* アイコン一覧モーダル専用のテーブルスタイル */
#iconModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto; /* 横スクロールを許可 */
    padding: 16px;
    /* テーブルが大きくなった場合のスクロール対応 */
    min-width: 0; /* Flexboxでの縮小を許可 */
}

/* アイコンモーダル専用テーブル - シンプルなスタイル */
#iconModal #iconTable {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 16px; /* フォントサイズを大きく */
    /* table-layoutはauto（デフォルト）にして内容に応じてサイズ調整 */
    table-layout: auto;
    /* 財産テーブル用の動的min-width計算を無効化 */
    min-width: auto !important;
}

#iconModal #iconTable th,
#iconModal #iconTable td {
    padding: 12px; /* パディングを大きく */
    vertical-align: top;
    border: 1px solid #dee2e6;
    /* 自然な文字折り返しを許可 */
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* アイコン列は最小限の幅に設定 */
#iconModal #iconTable th:first-child,
#iconModal #iconTable td:first-child {
    width: 120px; /* アイコンが大きくなったので幅を少し拡大 */
    text-align: center;
}

/* 説明列は残りの幅を使用 */
#iconModal #iconTable th:last-child,
#iconModal #iconTable td:last-child {
    width: auto;
    /* 自然な文字折り返しのため制限を最小限に */
}

/* アイコン画像のサイズ */
#iconModal #iconTable img {
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* テーブルヘッダーのスタイル */
#iconModal #iconTable thead th {
    background-color: var(--bs-primary); /* Bootstrap primary色を使用 */
    color: white; /* テキストを白に */
    font-weight: bold;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* アイコン選択可能行のホバー効果 */
#iconModal #iconTable .icon-row:not(.not-selectable):hover {
    background-color: rgba(0, 123, 255, 0.1);
    cursor: pointer;
}

/* 選択不可能行のスタイル */
#iconModal #iconTable .icon-row.not-selectable {
    background-color: #f8f9fa;
    opacity: 0.7;
}

#iconModal #iconTable .icon-row.not-selectable img {
    opacity: 0.6;
}

/* モーダルダイアログのサイズ調整 */
#iconModal .modal-dialog {
    max-width: 1000px; 
    width: 90%; 
    margin: 20px auto; 
}

#iconModal .modal-content {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}

#iconModal .modal-header {
    /* グローバルの.modal-headerスタイル（青い背景）を継承 */
    padding: 12px 16px;
    flex-shrink: 0; 
}

#iconModal .modal-title {
    font-size: 18px; /* タイトルフォントサイズを大きく */
    font-weight: bold;
    margin: 0;
}

/* アイコンモーダル内の段落とリストのスタイル */
#iconModal #iconTable p {
    margin: 0 0 10px 0; /* マージンを大きく */
    padding: 0;
    line-height: 1.6; /* 行間を広く */
    font-size: 16px; /* フォントサイズを大きく */
    /* 自然な文字折り返しを許可 */
    word-wrap: break-word;
    word-break: break-word;
}

#iconModal #iconTable p:last-child {
    margin-bottom: 0;
}

#iconModal #iconTable p strong {
    font-weight: bold;
    color: #007bff; 
}

#iconModal #iconTable .icon-notes {
    margin: 10px 0 0 0; /* マージンを大きく */
    padding-left: 20px; /* パディングを大きく */
    list-style-type: disc;
    font-size: 15px; /* フォントサイズを大きく */
}

/* 一括分配モーダルの入力フィールドスタイル */
#bulkDistributionModal .value-input-group {
    margin-bottom: 1rem;
}

#bulkDistributionModal .value-input-group label {
    font-weight: 600;
    color: #ffffff;
    background-color: #0d6efd; /* Bootstrap primary blue */
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    display: block;
    text-align: center;
    font-size: 0.875rem;
}

#bulkDistributionModal .value-input-group label:hover {
    background-color: #0b5ed7; /* Darker blue on hover */
}

#bulkDistributionModal .input-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    overflow: hidden;
}

#bulkDistributionModal .input-group .form-control {
    border: none;
    box-shadow: none;
}

#bulkDistributionModal .input-group .btn {
    border: none;
    box-shadow: none;
}

#bulkDistributionModal .input-group .input-group-text {
    background-color: #e9ecef;
    border: none;
    font-weight: 600;
    color: #495057;
}

#bulkDistributionModal .percentage-decrease,
#bulkDistributionModal .percentage-increase {
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* パーセンテージ増減ボタンのスタイル */
.percentage-increase,
.percentage-decrease {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #6c757d !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: all 0.15s ease-in-out !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.percentage-increase:hover,
.percentage-decrease:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3) !important;
}

.percentage-increase:focus,
.percentage-decrease:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

.percentage-increase:active,
.percentage-decrease:active {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    transform: translateY(0) !important;
}

/* 増減ボタンのアイコンスタイル */
.percentage-increase i,
.percentage-decrease i {
    font-size: 0.9rem !important;
    line-height: 1 !important;
}

/* 入力グループ内での統一感を保つ */
.input-group .percentage-increase,
.input-group .percentage-decrease {
    border-radius: 0 !important;
}

.input-group .percentage-decrease {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.input-group .percentage-increase {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* パーセンテージ入力フィールドとの境界線統一 */
.input-group .percentage-decrease {
    border-right: 0 !important;
}

.input-group .percentage-increase {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* パーセンテージ入力フィールドのボーダー調整 */
.input-group .percentage-input,
.input-group .bulk-percentage-input {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* input-group-textとの境界線調整 */
.input-group .input-group-text {
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* パーセンテージ入力エリア全体のスタイル改善 */
.percentage-allocation-section .input-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.percentage-allocation-section .input-group:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* パーセンテージボタンの視覚的フィードバック改善 */
.percentage-increase:hover i,
.percentage-decrease:hover i {
    animation: buttonPulse 0.3s ease-in-out;
}

@keyframes buttonPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* アクセシビリティ向上 - フォーカス時の視認性 */
.percentage-increase:focus-visible,
.percentage-decrease:focus-visible {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* 無効状態のスタイル */
.percentage-increase:disabled,
.percentage-decrease:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* =============================================================================
   相続税テーブル専用スタイル
   ============================================================================= */

/* 相続税テーブルのヘッダー背景色（緑を基調） */
.inheritance-table.tax-table thead th {
    background-color: #d4edda !important; /* table-successと同じ緑色 */
    color: #155724 !important;
    border: 0.5px solid #000 !important; /* ボーダーを黒色に変更 */
    border-collapse: separate !important; /* ボーダーを分離して表示 */
    position: relative !important; /* z-indexを有効にするため */
    z-index: 10 !important; /* ボーダーを前面に表示 */
}

/* 相続税テーブル全体のボーダー設定 */
.inheritance-table.tax-table {
    border-collapse: separate !important; /* ボーダーを分離 */
    border-spacing: 0 !important; /* セル間隔を0に */
}

/* 相続税テーブルの明細行背景色（財産テーブルと同じ色） */
.inheritance-table.tax-table tbody tr {
    background-color: #ffffff !important; /* 白色背景 */
}

.inheritance-table.tax-table tbody tr:hover {
    background-color: #f8f9fa !important; /* ホバー時はライトグレー */
}

/* 相続税テーブルの明細行セル背景色を統一 */
.inheritance-table.tax-table tbody td,
.inheritance-table.tax-table tbody th {
    background-color: inherit !important; /* 親要素の背景色を継承 */
    color: #212529 !important; /* 明細行のテキスト色を黒に設定 */
    border: 0.5px solid #000 !important; /* 明細行のボーダーを黒色に変更 */
}

/* 相続税テーブル専用のno-borderクラス設定（より高い優先度） */
.inheritance-table.tax-table tbody td.no-border-right,
.inheritance-table.tax-table tbody th.no-border-right {
    border-right: none !important;
}

.inheritance-table.tax-table tbody td.no-border-left,
.inheritance-table.tax-table tbody th.no-border-left {
    border-left: none !important;
}

/* 都道府県セレクトボックスのスタイル */
#g_prefecture {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#g_prefecture:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#g_prefecture optgroup {
    font-weight: bold;
    color: #495057;
    background-color: #f8f9fa;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
}

#g_prefecture option {
    font-weight: normal;
    color: #212529;
    background-color: #fff;
    padding: 0.25rem 0.5rem;
}

#g_prefecture option:hover,
#g_prefecture option:focus {
    background-color: #007bff;
    color: #fff;
}

/* 都道府県選択のヘルプテキスト */
.form-text.text-muted {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* 路線価用トグルスイッチ（共通定義） */
.roadside-toggle {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 40px;
}

.roadside-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.roadside-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dc3545; /* 赤色（いいえ状態） */
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.roadside-toggle-label:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.roadside-toggle-text {
    font-size: 12px;
    font-weight: bold;
    color: white;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.roadside-toggle-text.yes {
    opacity: 0;
}

.roadside-toggle-text.no {
    opacity: 1;
}

.roadside-toggle-handle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 34px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* チェック状態（はい）のスタイル */
.roadside-toggle-input:checked + .roadside-toggle-label {
    background-color: #28a745; /* 緑色（はい状態） */
}

.roadside-toggle-input:checked + .roadside-toggle-label .roadside-toggle-handle {
    transform: translateX(80px);
}

.roadside-toggle-input:checked + .roadside-toggle-label .roadside-toggle-text.yes {
    opacity: 1;
}

.roadside-toggle-input:checked + .roadside-toggle-label .roadside-toggle-text.no {
    opacity: 0;
}

/* フォーカス状態のスタイル */
.roadside-toggle-input:focus + .roadside-toggle-label {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 互換性のため既存のクラス名をエイリアス定義 */
.cliff-land-toggle,
.narrow-frontage-toggle,
.irregular-land-toggle,
.depreciation-toggle {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 40px;
}

.cliff-land-toggle-input,
.narrow-frontage-toggle-input,
.irregular-land-toggle-input,
.depreciation-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cliff-land-toggle-label,
.narrow-frontage-toggle-label,
.irregular-land-toggle-label,
.depreciation-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #dc3545; /* 赤色（いいえ状態） */
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cliff-land-toggle-label:hover,
.narrow-frontage-toggle-label:hover,
.irregular-land-toggle-label:hover,
.depreciation-toggle-label:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.cliff-land-toggle-text,
.narrow-frontage-toggle-text,
.irregular-land-toggle-text,
.depreciation-toggle-text {
    font-size: 12px;
    font-weight: bold;
    color: white;
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.cliff-land-toggle-text.yes,
.narrow-frontage-toggle-text.yes,
.irregular-land-toggle-text.yes,
.depreciation-toggle-text.yes {
    opacity: 0;
}

.cliff-land-toggle-text.no,
.narrow-frontage-toggle-text.no,
.irregular-land-toggle-text.no,
.depreciation-toggle-text.no {
    opacity: 1;
}

.cliff-land-toggle-handle,
.narrow-frontage-toggle-handle,
.irregular-land-toggle-handle,
.depreciation-toggle-handle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 34px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* チェック状態（はい）のスタイル */
.cliff-land-toggle-input:checked + .cliff-land-toggle-label,
.narrow-frontage-toggle-input:checked + .narrow-frontage-toggle-label,
.irregular-land-toggle-input:checked + .irregular-land-toggle-label,
.depreciation-toggle-input:checked + .depreciation-toggle-label {
    background-color: #28a745; /* 緑色（はい状態） */
}

.cliff-land-toggle-input:checked + .cliff-land-toggle-label .cliff-land-toggle-handle,
.narrow-frontage-toggle-input:checked + .narrow-frontage-toggle-label .narrow-frontage-toggle-handle,
.irregular-land-toggle-input:checked + .irregular-land-toggle-label .irregular-land-toggle-handle,
.depreciation-toggle-input:checked + .depreciation-toggle-label .depreciation-toggle-handle {
    transform: translateX(80px);
}

.cliff-land-toggle-input:checked + .cliff-land-toggle-label .cliff-land-toggle-text.yes,
.narrow-frontage-toggle-input:checked + .narrow-frontage-toggle-label .narrow-frontage-toggle-text.yes,
.irregular-land-toggle-input:checked + .irregular-land-toggle-label .irregular-land-toggle-text.yes,
.depreciation-toggle-input:checked + .depreciation-toggle-label .depreciation-toggle-text.yes {
    opacity: 1;
}

.cliff-land-toggle-input:checked + .cliff-land-toggle-label .cliff-land-toggle-text.no,
.narrow-frontage-toggle-input:checked + .narrow-frontage-toggle-label .narrow-frontage-toggle-text.no,
.irregular-land-toggle-input:checked + .irregular-land-toggle-label .irregular-land-toggle-text.no,
.depreciation-toggle-input:checked + .depreciation-toggle-label .depreciation-toggle-text.no {
    opacity: 0;
}

/* フォーカス状態のスタイル */
.cliff-land-toggle-input:focus + .cliff-land-toggle-label,
.narrow-frontage-toggle-input:focus + .narrow-frontage-toggle-label,
.irregular-land-toggle-input:focus + .irregular-land-toggle-label,
.depreciation-toggle-input:focus + .depreciation-toggle-label {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* ===========================================
   排他制御・計算中状態のスタイル
   =========================================== */

/* 計算中フィールドの無効化表示（上書き防止） */
input:disabled.calculating,
select:disabled.calculating,
textarea:disabled.calculating {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

/* =================================================================
   属性ベース計算フィールド識別・視覚化システム（開発者連携強化）
   ================================================================= */

/**
 * 計算対象フィールドの基本識別スタイル
 * data-calculation="true" 属性を持つフィールドの視覚的な識別
 */
[data-calculation="true"] {
    border-left: 3px solid #28a745;
    position: relative;
    transition: all 0.3s ease;
}

[data-calculation="true"]:focus {
    border-left-color: #20c997;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/**
 * 計算対象フィールドの識別用ツールチップ（開発者向け情報表示）
 */
[data-calculation="true"]::after {
    content: "計算対象";
    position: absolute;
    top: -8px;
    right: 5px;
    background: #28a745;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

[data-calculation="true"]:hover::after {
    opacity: 1;
}

/**
 * 計算中の視覚的ハイライト（排他制御アクティブ状態）
 */
.calculation-field-highlighted {
    border-left: 4px solid #ffc107 !important;
    background-color: #fff3cd !important;
    animation: calculation-pulse 2s infinite;
}

.calculation-field-highlighted::after {
    content: "計算中" !important;
    background: #ffc107 !important;
    color: #212529 !important;
    opacity: 1 !important;
}

/**
 * 計算フィールドのパルスアニメーション
 */
@keyframes calculation-pulse {
    0% { border-left-color: #ffc107; }
    50% { border-left-color: #ffcd39; }
    100% { border-left-color: #ffc107; }
}

/**
 * 計算完了時の成功フィードバック
 */
.calculation-success {
    border-left: 3px solid #28a745 !important;
    background-color: #d1eddb !important;
    transition: all 0.5s ease;
}

.calculation-success::after {
    content: "計算完了" !important;
    background: #28a745 !important;
    color: white !important;
    opacity: 1 !important;
}

/**
 * 計算エラー時の警告フィードバック
 */
.calculation-error {
    border-left: 3px solid #dc3545 !important;
    background-color: #f8d7da !important;
}

.calculation-error::after {
    content: "計算エラー" !important;
    background: #dc3545 !important;
    color: white !important;
    opacity: 1 !important;
}

/* =================================================================
   開発環境向けデバッグ用スタイル（本番環境では無効化可能）
   ================================================================= */

/**
 * 開発モードでの計算対象フィールド一覧表示
 * body.debug-mode 時のみ有効
 */
body.debug-mode [data-calculation="true"] {
    outline: 2px dashed #17a2b8;
    outline-offset: 2px;
}

body.debug-mode [data-calculation="true"]::before {
    content: "🔢";
    position: absolute;
    top: -5px;
    left: -5px;
    background: #17a2b8;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 1001;
}
/* =============================================================================
バリデーションエラー表示の改善
============================================================================= */

/* バリデーションエラーサマリーのスタイル */
.alert.alert-danger ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.alert.alert-danger ul li {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.alert.alert-danger ul li:last-child {
    margin-bottom: 0;
}

/* 契約日フィールドのヘルプテキスト */
.form-text.text-muted {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
}

.form-text.text-muted .bi {
    margin-right: 0.25rem;
    font-size: 0.8rem;
}

/* エラーフィールドの視覚的強調 */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    animation: shake 0.5s ease-in-out;
}

/* エラーフィールドのシェイクアニメーション */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* バリデーションエラーメッセージの統一スタイル */

/* 共通バリデーションエラーコンテナ（契約日エラーと統一） */
.validation-error {
    background-color: rgba(220, 53, 69, 0.15);
    border: 2px solid #dc3545;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 0.5rem 0;
    display: flex;
    align-items: flex-start;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

.validation-error .bi {
    color: #dc3545;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* 標準のinvalid-feedbackも統一スタイルに更新 */
.invalid-feedback {
    background-color: rgba(220, 53, 69, 0.15);
    border: 2px solid #dc3545;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 0.5rem 0;
    display: flex !important;
    align-items: flex-start;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

/* invalid-feedbackにアイコンが含まれる場合のスタイル */
.invalid-feedback .bi {
    color: #dc3545;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* アイコンなしのinvalid-feedbackの場合は疑似要素でアイコンを追加 */
.invalid-feedback:not(:has(.bi))::before {
    content: "⚠";
    color: #dc3545;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    line-height: 1;
}

/* フォーカス時のエラーフィールドスタイル */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* エラーアラートの強調表示 */
.alert.alert-warning {
    border-left: 4px solid #fd7e14;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.alert.alert-warning .bi {
    color: #fd7e14;
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

/* リアルタイムバリデーション成功時のスタイル */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #28a745;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.valid-feedback {
    display: block;
    font-size: 0.875rem;
    color: #28a745;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* 契約日範囲エラーの特別なスタイル（統一クラスを使用） */
.contract-date-error {
    /* validation-errorクラスと同じスタイルを継承 */
    background-color: rgba(220, 53, 69, 0.15);
    border: 2px solid #dc3545;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin: 0.5rem 0;
    display: flex;
    align-items: flex-start;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

.contract-date-error .bi {
    color: #dc3545;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* エラーメッセージのアニメーション */
.invalid-feedback,
.alert.alert-danger,
.alert.alert-warning {
    animation: fadeInError 0.3s ease-in-out;
}

@keyframes fadeInError {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* モバイル対応 */
@media (max-width: 768px) {
    .alert.alert-danger,
    .alert.alert-warning {
        font-size: 0.875rem;
        padding: 0.75rem;
    }
    
    .invalid-feedback {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* 利用者管理専用スタイル */
.user-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.user-status.active {
    background-color: #d1edff;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.user-status.inactive {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* 利用者一覧の検索フォーム */
.user-search-form {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}

.user-search-form .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

/* 利用者フォームのスタイル */
.user-form-container {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 0 auto;
}

.user-form-section {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f8f9fa;
}

.user-form-section h4 {
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 利用者権限バッジ */
.user-authorization-badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
}

.user-authorization-badge.admin {
    background-color: #dc3545;
    color: white;
}

.user-authorization-badge.manager {
    background-color: #fd7e14;
    color: white;
}

.user-authorization-badge.user {
    background-color: #0d6efd;
    color: white;
}

.user-authorization-badge.viewer {
    background-color: #6c757d;
    color: white;
}

/* 利用者更新完了画面のスタイル */
.user-change-highlight {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.user-change-highlight:hover {
    background-color: #ffeaa7;
}

.user-old-value {
    color: #dc3545;
    text-decoration: line-through;
}

.user-new-value {
    color: #28a745;
    font-weight: bold;
}

.user-arrow-icon {
    color: #6c757d;
    margin: 0 10px;
}

.user-no-changes {
    background-color: #d1ecf1;
    border-left: 4px solid #17a2b8;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

.user-current-info-highlight {
    background-color: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}

/* 利用者テーブルの改良 */
.user-table-container {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-table {
    margin-bottom: 0;
}

.user-table th {
    background-color: #495057;
    color: white;
    font-weight: 600;
    border: none;
    padding: 12px;
    vertical-align: middle;
}

.user-table td {
    padding: 12px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

.user-table tr:hover {
    background-color: #f8f9fa;
}

/* 利用者検索の詳細検索トグル */
.user-detail-search-toggle {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    transition: all 0.3s ease;
}

.user-detail-search-toggle:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .user-form-container {
        padding: 15px;
        margin: 10px;
    }
    
    .user-search-form {
        padding: 15px;
    }
    
    .user-table-container {
        font-size: 0.875rem;
    }
    
    .user-table th,
    .user-table td {
        padding: 8px;
    }
}

/* ============================================================================
 * ステップバー機能
 * ============================================================================ */

/* ステップバーコンテナ */
.step-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 10px;
    background: linear-gradient(135deg, #003366, #004080);
    border-radius: 8px;
    margin: 10px 0;
    overflow-x: auto;
    white-space: nowrap;
    /* スクロールバーのスタイリング（WebKit系ブラウザ） */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.1);
}

/* WebKit系ブラウザのスクロールバースタイル */
.step-bar::-webkit-scrollbar {
    height: 8px;
}

.step-bar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.step-bar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
}

.step-bar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* 個別ステップ */
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    margin: 0 5px;
    min-width: 120px;
    position: relative;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* ステップの状態による色分け */
.step.completed {
    background-color: rgba(40, 167, 69, 0.9);
    border: 2px solid #28a745;
    color: white;
}

.step.current {
    background-color: rgba(0, 123, 255, 0.9);
    border: 2px solid #007bff;
    font-weight: bold;
    color: white;
}

.step:not(.completed):not(.current) {
    background-color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #2c3e50;
}

/* ステップ番号 */
.step-number {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 15px;
    text-shadow: none;
    transition: all 0.3s ease;
}

.step.completed .step-number {
    background-color: #ffffff;
    color: transparent;
    border: 3px solid #28a745;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    position: relative;
}

/* 完了ステップにチェックマークを追加 */
.step.completed .step-number::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #28a745;
}

.step.current .step-number {
    background-color: #ffffff;
    color: #007bff;
    border: 3px solid #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.step:not(.completed):not(.current) .step-number {
    background-color: #ffffff;
    color: #6c757d;
    border: 3px solid #6c757d;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

/* ステップラベル */
.step-label {
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
    max-width: 100px;
    word-wrap: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ステップ間の接続線（疑似要素で実装） */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 38px;
    right: -20px;
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.step.completed:not(:last-child)::after {
    background-color: #28a745;
}

/* リンク化されたステップ */
.step-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.step-link:hover {
    text-decoration: none;
    color: inherit;
    background-color: rgba(0, 123, 255, 0.3);
    border-radius: 4px;
    transform: translateY(-2px);
}

.step-link:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background-color: rgba(0, 123, 255, 0.2);
}

.step.completed .step-link:hover {
    background-color: rgba(40, 167, 69, 0.3);
}

.step.completed .step-link:focus {
    outline: 2px solid #28a745;
    background-color: rgba(40, 167, 69, 0.2);
}

/* ステップ番号のホバー効果 */
.step-link:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.step.completed .step-link:hover .step-number {
    background-color: #28a745;
    color: transparent;
    border-color: #28a745;
}

.step.completed .step-link:hover .step-number::after {
    color: white;
}

.step.current .step-link:hover .step-number {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.step:not(.completed):not(.current) .step-link:hover .step-number {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

/* リンク無効時のコンテンツ */
.step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .step {
        min-width: 80px;
        padding: 8px 10px;
        margin: 0 2px;
    }
    
    .step-number {
        width: 25px;
        height: 25px;
        line-height: 23px;
        font-size: 12px;
    }
    
    .step-label {
        font-size: 10px;
        max-width: 70px;
    }
    
    .step:not(:last-child)::after {
        right: -15px;
        width: 20px;
        top: 28px;
    }
}

@media (max-width: 576px) {
    .step-bar {
        padding: 15px 10px;
    }
    
    .step {
        min-width: 60px;
        padding: 6px 8px;
        margin: 0 1px;
    }
    
    .step-number {
        width: 20px;
        height: 20px;
        line-height: 18px;
        font-size: 10px;
    }
    
    .step-label {
        font-size: 9px;
        max-width: 50px;
    }
    
    .step:not(:last-child)::after {
        right: -10px;
        width: 15px;
        top: 23px;
    }
    
    /* 一覧に戻るボタンのレスポンシブ対応 */
    .back-to-list-btn {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* 一覧に戻るボタンのレスポンシブ対応（中画面） */
@media (max-width: 768px) {
    .back-to-list-btn {
        font-size: 13px;
        padding: 5px 10px;
    }
    
    .back-to-list-btn i {
        font-size: 12px;
    }
}

/* 被相続人設定ボタンのスタイル */
#setDecedentAsContractorBtn,
#setDecedentAsBeneficiaryBtn {
    white-space: nowrap;
    font-size: 0.875rem;
}

#setDecedentAsContractorBtn:hover,
#setDecedentAsBeneficiaryBtn:hover {
    background-color: #e9ecef;
}

/* 契約者・被保険者フィールドのヘルプテキスト */
.form-text.text-muted {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ===================================
   生前贈与機能専用スタイル
   =================================== */

/* 生前贈与項目の基本スタイル */
.gift-item {
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    padding: 1rem;
    position: relative;
}

.gift-item .card-header {
    background-color: #e3f2fd;
    border-bottom: 1px solid #bbdefb;
    padding: 0.75rem 1rem;
    margin: -1rem -1rem 1rem -1rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

/* 生前贈与カテゴリヘッダー */
.category-header.gift-category {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 5px solid #1976d2;
    color: #1565c0;
    font-weight: 600;
}

.category-header.gift-category .gift-indicator {
    display: inline-block;
    background-color: #1976d2;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

/* 元資産情報表示 */
.original-asset-info {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.25rem;
    padding: 0.75rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.original-asset-info .info-label {
    font-weight: 600;
    color: #856404;
    margin-right: 0.5rem;
}

.original-asset-info .info-value {
    color: #533f03;
}

/* 生前贈与アイコン */
.gift-icon {
    color: #1976d2;
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

/* ツールチップ拡張 */
.gift-tooltip {
    position: relative;
    cursor: help;
}

.gift-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.gift-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 生前贈与フォーム専用スタイル */
.gift-form-section {
    border: 2px dashed #bbdefb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1rem 0;
    background-color: #fafafa;
}

.gift-form-section .section-title {
    color: #1565c0;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.gift-form-section .section-title::before {
    content: "🎁";
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

/* 生前贈与ボタンスタイル */
.btn-gift {
    background-color: #1976d2;
    border-color: #1976d2;
    color: white;
}

.btn-gift:hover {
    background-color: #1565c0;
    border-color: #1565c0;
    color: white;
}

.btn-gift:focus {
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

/* 生前贈与専用テーブルスタイル */
.gift-table {
    border: 1px solid #bbdefb;
}

.gift-table thead {
    background-color: #e3f2fd;
}

.gift-table thead th {
    border-bottom: 2px solid #1976d2;
    color: #1565c0;
    font-weight: 600;
}

.gift-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .gift-item {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .gift-form-section {
        padding: 1rem;
        margin: 0.75rem 0;
    }
    
    .original-asset-info {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    .gift-tooltip::after {
        font-size: 0.75rem;
        padding: 0.4rem;
    }
}

/* ========================================
 * ファイル削除フラグ対応のスタイル
 * ======================================== */

/* 削除対象としてマークされたファイルの行 */
.marked-for-deletion {
    background-color: #f8f9fa;
    opacity: 0.6;
    text-decoration: line-through;
    transition: all 0.3s ease-in-out;
}

.marked-for-deletion td {
    color: #6c757d;
}

/* 削除予定テキストのスタイル */
.marked-for-deletion .text-muted {
    font-style: italic;
    font-size: 0.875em;
}

/* 復元ボタンのスタイル */
.file-restore-btn {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
    transition: all 0.2s ease-in-out;
}

.file-restore-btn:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
}

/* ファイル一覧モーダルでの削除対象ファイルの視覚的区別 */
.file-list-modal .marked-for-deletion .file-icon {
    opacity: 0.5;
}

/* ファイルアップロードモーダルでの削除対象ファイル表示 */
.file-upload-modal .marked-for-deletion {
    border: 1px dashed #dc3545;
    background-color: #f8d7da;
}

/* 削除予定通知バッジ */
.deletion-notice {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    background-color: #dc3545;
    color: #fff;
    margin-left: 0.5rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .marked-for-deletion .deletion-notice {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

/* ===============================
   統一プレビュー機能のスタイル
   =============================== */

/* 統一プレビューコンテナ */
.unified-preview-container {
    display: flex;
    flex-direction: column;
    height: 70vh;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

/* 統一操作パネル */
.preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    min-height: 48px;
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zoom-display {
    min-width: 50px;
    text-align: center;
    font-weight: 500;
    color: #495057;
    font-size: 0.875rem;
}

/* 画像ビューポート */
.image-viewport {
    flex: 1;
    overflow: auto;
    position: relative;
    background: 
        radial-gradient(circle at 20px 20px, #aaa 1px, transparent 1px),
        radial-gradient(circle at 0px 0px, #aaa 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #f8f9fa;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 20px;
}

.preview-image {
    max-width: none;
    max-height: none;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    cursor: grab;
}

.preview-image:active {
    cursor: grabbing;
}

/* ステータス表示 */
.preview-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: 0.875rem;
    color: #6c757d;
    flex-shrink: 0;
}

.file-info {
    font-weight: 500;
    color: #495057;
}

.zoom-info {
    font-weight: 600;
    color: #007bff;
}

/* PDFビューアースタイルと統一 */
.preview-toolbar .btn {
    padding: 4px 8px;
    font-size: 0.875rem;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
    border: 1px solid #ced4da;
}

.preview-toolbar .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.preview-toolbar .btn:active {
    transform: translateY(0);
}

.preview-toolbar .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Graph APIプレビューコンテナ */
.graph-preview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.preview-header {
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.preview-header h6 {
    color: #495057;
    font-weight: 600;
}

/* ネイティブプレビューコンテナ */
.native-preview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.preview-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
}

.preview-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* スクロールバーのスタイリング */
.image-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.image-viewport::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.image-viewport::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.image-viewport::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .unified-preview-container {
        height: 60vh;
    }
    
    .preview-toolbar {
        flex-wrap: wrap;
        padding: 6px 12px;
    }
    
    .toolbar-group {
        gap: 4px;
    }
    
    .preview-toolbar .btn {
        padding: 2px 6px;
        font-size: 0.75rem;
    }
    
    .preview-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 576px) {
    .image-container {
        padding: 10px;
    }
    
    .preview-toolbar {
        justify-content: center;
    }
    
    .toolbar-group {
        gap: 2px;
    }
}

/* 画像プレビューのエラー処理 */
.preview-image {
    transition: opacity 0.3s ease;
}

.preview-image[src*="data:image/svg+xml"] {
    opacity: 0.7;
    filter: grayscale(50%);
}

/* カスタムプレビューのz-index調整 */
.unified-preview-container {
    position: relative;
    z-index: 1;
}

.preview-toolbar {
    z-index: 2;
    position: relative;
}

/* ファイルプレビューモーダルの横幅をさらに広く */
#previewFileModal .modal-dialog {
    max-width: 95vw; /* 画面幅の95%を使用 */
    width: 95vw;
}

/* 小さな画面では最大幅を制限 */
@media (max-width: 768px) {
    #previewFileModal .modal-dialog {
        max-width: 100vw;
        width: 100vw;
        margin: 0;
    }
}

/* プレビューコンテナの横幅を最大化 */
#previewFileModal .preview-container {
    width: 100%;
    max-width: 100%;
}

/* グラフAPIプレビューのiframe横幅最適化 */
#previewFileModal .graph-preview-container iframe {
    width: 100%;
    max-width: 100%;
}

/* カスタム画像プレビューの横幅最適化 */
#previewFileModal .unified-preview-container {
    width: 100%;
    max-width: 100%;
}

#previewFileModal .image-viewport {
    width: 100%;
    max-width: 100%;
}

/* ========================================
   一覧画面 sticky列 共通スタイル
   ======================================== */

/**
 * テーブル横スクロールコンテナ（table-responsive代替）
 * - table-responsiveと同じ背景色を維持
 * - position: stickyを阻害しないようoverflow-xのみ適用
 */
.list-table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 28rem;
}

/* テーブルヘッダーを固定 */
.list-table-scroll-container .table thead th {
    background-color: #007bff !important; /* 青色に統一 */
    color: #ffffff !important;
}

/**
 * 左固定列（ユニークキー列）
 * - シミュレーションID、加盟店コード、アカウントID等
 * - Safari対応のため transform: translateZ(0) を使用
 * - 右側に視覚的な境界線を追加（濃いグレー）
 */
.list-table-sticky-left {
    position: sticky;
    left: 0;
    z-index: 20;
    background: white;
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.15);
    border-right: 2px solid #6c757d;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/**
 * 右固定列（操作列）
 * - 編集・削除ボタン等
 * - 左側に視覚的な境界線を追加（濃いグレー）
 */
.list-table-sticky-right {
    position: sticky;
    right: 0;
    z-index: 20;
    background: white;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.15);
    border-left: 2px solid #6c757d;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/**
 * 全セル共通: テキスト折り返し防止
 * - 横スクロール時の一覧性確保
 */
.list-table-nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ========================================
   一覧テーブル ケバブメニュー（⋮）
   ======================================== */

/**
 * ケバブメニュートリガーボタン
 * - Bootstrap Dropdown の▼矢印を非表示
 * - ホバー時に背景色を付与
 */
.list-kebab-trigger::after {
    display: none;
}

.list-kebab-trigger {
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

/**
 * ドロップダウンメニューの z-index
 * - sticky列（z-index: 20）より上に表示
 */
.list-table-sticky-right .dropdown-menu {
    z-index: 1050;
}

/**
 * ドロップダウンメニュー項目のアイコン間隔
 */
.list-table-sticky-right .dropdown-item i {
    width: 1.25em;
    text-align: center;
}

/* モバイル: 左sticky列（ID列）を解除し、右sticky列（ケバブメニュー）は維持 */
@media (max-width: 767.98px) {
    .list-table-sticky-left {
        position: static;
        box-shadow: none;
        border-right: 1px solid #dee2e6;
    }

    thead .list-table-sticky-left {
        position: static;
    }
}
/* ========================================
   レスポンシブ対応（Phase 0）
   ======================================== */

/**
 * ヘッダーのレスポンシブ対応
 */
.header {
    background-color: #003366;
    padding: 10px 20px;
}

/* ヘッダーのコンテンツコンテナ */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.header-logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-logo {
    max-height: 50px;
    transition: max-height 0.3s ease;
}

.header-brand-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-nav {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* ハンバーガーメニューボタンのスタイル */
.navbar-toggler {
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.25rem;
    transition: box-shadow 0.15s ease-in-out;
}

.navbar-toggler:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* ログイン者情報（ヘッダー内表示） */
.user-info-header {
    color: #fff;
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

.user-info-text {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.user-name {
    font-weight: 600;
    white-space: nowrap;
}

.user-role .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

/* プランバッジ */
.badge-plan-fc {
    background: linear-gradient(135deg, #b8860b, #daa520);
    color: #fff;
    font-weight: 600;
}

.badge-plan-active {
    background-color: #0d6efd;
    color: #fff;
}

.badge-plan-trial {
    background-color: #ffc107;
    color: #212529;
    font-weight: 600;
}

.badge-plan-trial-warning {
    background-color: #fd7e14;
    color: #fff;
    font-weight: 600;
}

.badge-plan-trial-danger {
    background-color: #dc3545;
    color: #fff;
    font-weight: 600;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.user-merchant {
    font-size: 0.75rem;
    opacity: 0.9;
    white-space: nowrap;
}

/* Offcanvasメニューのスタイル */
.offcanvas-body .nav a,
.offcanvas-body .nav button {
    padding: 12px;
    font-size: 1rem;
    width: 100%;
}

/**
 * ログイン画面・OTP画面のレスポンシブ対応
 */
.login-container, .otp-container {
    padding: 20px;
}

/**
 * ホーム画面のレスポンシブ対応
 */
.home-btn {
    padding: 15px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/**
 * タッチターゲットの最小サイズ確保
 */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
}

/**
 * スマホ向けスタイル（768px以下）
 */
@media (max-width: 768px) {
    /* ヘッダー */
    .header {
        padding: 8px 15px;
    }
    
    .header-logo {
        max-height: 40px;
    }
    
    /* ログイン者情報（スマホ：名前のみ、所属は非表示） */
    .user-info-header {
        font-size: 0.75rem;
    }
    
    .user-info-text {
        gap: 0.15rem;
    }
    
    .user-name {
        font-size: 0.8rem;
    }
    
    .user-role .badge {
        font-size: 0.65rem;
    }
    
    /* ログイン・OTP画面 */
    .login-container, .otp-container {
        padding: 10px;
    }
    
    .login-card, .otp-card {
        max-width: 100%;
        padding: 1.5rem 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .login-card h2, .otp-card h2 {
        font-size: 1.5rem;
    }
    
    /* ホーム画面のボタン */
    .home-btn {
        padding: 18px;
        font-size: 1.1rem;
        min-height: 60px;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* フォーム要素 */
    .form-control {
        font-size: 16px; /* iOS zoom防止 */
    }
    
    input[type="email"],
    input[type="password"],
    input[type="text"],
    input[type="number"] {
        font-size: 16px; /* iOS zoom防止 */
        padding: 12px;
    }
    
    /* ボタンのサイズ調整 */
    .btn {
        padding: 12px 16px;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/**
 * ホバー効果はPC専用
 */
@media (hover: hover) {
    .btn:hover {
        transform: translateY(-2px);
    }
    
    .home-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

/**
 * レスポンシブ設計: 2段階のみ（PC/スマホ）
 * - PC: 768px以上（タブレット含む）
 * - スマホ: 768px未満
 * 
 * 保守性重視のため、ブレークポイントは768pxのみを使用
 */

/**
 * ========================================
 * 独自ハンバーガーメニュー（Bootstrap不使用）
 * ========================================
 */

/* ハンバーガーボタン */
.hamburger-btn {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.25rem;
    color: #fff;
    font-size: 1.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    position: relative; /* バッジ配置のため */
}

.hamburger-btn:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.1);
}

.hamburger-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

/* ハンバーガーボタンの通知バッジ */
.hamburger-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background-color: #dc3545; /* Bootstrap danger color */
    border-radius: 50%;
    border: 2px solid #003d7a; /* ヘッダー背景色に合わせる */
    animation: pulse-badge 2s ease-in-out infinite;
}

/* バッジのアニメーション */
@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

/* サイドメニュー本体 */
.side-menu {
    position: fixed;
    top: 0;
    right: -320px; /* 初期状態は画面外 */
    width: 300px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1050;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.side-menu.active {
    right: 0; /* 表示時は画面内に */
}

/* サイドメニューヘッダー */
.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.side-menu-header h5 {
    margin: 0;
    font-weight: 600;
    color: #212529;
}

/* 閉じるボタン */
.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #212529;
}

.close-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* サイドメニューボディ */
.side-menu-body {
    padding: 1rem;
}

/* メニューリスト */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    margin-bottom: 0.5rem;
}

/* メニューリンク */
.menu-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #007bff;
    text-decoration: none;
    border: 1px solid #007bff;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    background-color: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.menu-link:hover {
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
}

.menu-link-btn {
    border-color: #dc3545;
    color: #dc3545;
}

.menu-link-btn:hover {
    background-color: #dc3545;
    color: #fff;
}

/* 業務マニュアル専用スタイル（緑色） */
.menu-link-success {
    border-color: #28a745;
    color: #28a745;
}

.menu-link-success:hover {
    background-color: #28a745;
    color: #fff;
}

/* 背景オーバーレイ */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
 * Phase 3: 管理画面 + ナビゲーション改善
 * ======================================== */

/* 全入力画面共通 - ナビゲーションボタン */
@media (max-width: 768px) {
    .page-nav-buttons > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .page-nav-buttons > div > .btn {
        margin: 0 !important;
        flex: 1 1 auto;
        min-width: 100px;
        text-align: center;
    }
}

/* ステップバー - 576px 以下でラベル非表示（番号のみ） */
@media (max-width: 576px) {
    .step-label {
        display: none;
    }
    .step {
        min-width: 35px;
    }
}

/* ========================================
 * Phase 4: 財産入力画面テーブル + シナリオタイプ最適化
 * ======================================== */

/* 共通テーブルフォント縮小 */
@media (max-width: 768px) {
    .container .table {
        font-size: 0.8rem;
    }
    .container .table th,
    .container .table td {
        padding: 0.3rem 0.4rem;
    }
}

/* シナリオタイプ選択バー モバイル最適化 */
@media (max-width: 768px) {
    .modal-body .alert-primary .d-flex.align-items-center.justify-content-center {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .modal-body .alert-primary .d-flex .form-label {
        font-size: 0.85rem;
    }
}

/* ========================================
 * Phase 5: 残りの画面 + 仕上げ
 * ======================================== */

/* 基本情報画面 - フォームラベルをモバイルでスタック */
@media (max-width: 768px) {
    .panel-body .row > .col-sm-2 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.25rem;
    }
    .panel-body .row > .col-sm-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}