body {
    /* padding-top: 20px; */
    padding-bottom: 20px;
    background-color: #f8f9fa;
}
.container {
    max-width: 800px; /* 予約・登録・ログインフォームの最大幅 */
    background-color: #ffffff;
    padding: 30px;
    padding-bottom: 50px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin: auto; /* 中央寄せ */
}
/* カレンダーページのコンテナは少し広めに */
.container.calendar-page {
    max-width: 960px;
}
/* パスワード再発行などのフォームで使う、さらに狭いコンテナ */
.container.small-container {
    max-width: 500px; /* ログインページと同じ幅に設定 */
}

/* タイトル帯のスタイル */
.page-title-band {
    background-color: #FFD7A8; /* 半分の濃さの淡いオレンジがかった黄色 */
    width: 100%; /* ビューポートの全幅 */
    padding: 20px 0; /* 上下のパディング */
    margin-bottom: 30px;
    text-align: center; /* h2を中央寄せ */
}
@media (max-width: 768px) {
    .page-title-band {
        margin-bottom: 0;
    }
}

/* ログイン情報のスタイル */
.login-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem !important;
}

h2 {
    /* page-title-band内のh2に適用されるため、中央寄せは親で、下マージンは0に */
    margin-bottom: 0;
    color: #343a40;
}
h4 {
    color: #343a40;
}
p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}
.form-group label {
    font-weight: bold;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.zip-code-group .form-control {
    display: inline-block;
    width: calc(50% - 10px); /* 調整 */
}
.form-inline span {
    display: inline-block;
    width: 10px;
    text-align: center;
    margin: 3px;
}
/* エラーメッセージのスタイル */
.err,
.error-message {
    color: #dc3545;
    font-size: 0.875em;
    font-weight: bold;
    margin-bottom: 10px;
}
.error-message {
    display: none; /* 初期状態では非表示 */
}

/* 確認・完了画面のスタイル */
.confirmation-item {
    margin-bottom: 15px;
}
.confirmation-item label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #555;
}
.confirmation-item span {
    display: block;
    padding: 8px 12px;
    background-color: #e9ecef;
    border-radius: 4px;
    min-height: 2rem;
}
.confirmation-item span span {
    display: inline;
    padding: 0;
}
.btn-group {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.btn-group .btn {
    flex: 1;
    margin: 0 5px;
}
@media (max-width: 576px) {
    .btn-group {
        flex-direction: column;
    }
    .btn-group .btn {
        margin: 5px 0;
    }
}
.text-center {
    text-align: center;
}
.mt-4 {
    margin-top: 1.5rem !important;
}
.ml-2 {
    margin-left: 0.5rem !important;
}
.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}
.table th, .table td {
    vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05);
}
.nowrap {
    white-space: nowrap;
}

/* カレンダー固有のスタイル */
#availability-calendar-page .container {
    max-width: 960px;
}
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.calendar-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* レスポンシブ対応 */
}
.calendar-month {
    flex: 1;
    min-width: 400px; /* カレンダーの最小幅 */
    margin: 10px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    overflow: hidden; /* テーブルの角丸を維持 */
}
.calendar-month h4 {
    background-color: #007bff;
    color: white;
    padding: 10px 0;
    margin-bottom: 0;
    border-bottom: 1px solid #dee2e6;
}
.calendar-month table {
    margin-bottom: 0; /* テーブル下部の余白を削除 */
}
.calendar-month th, .calendar-month td {
    width: calc(100% / 7); /* 7列均等幅 */
    height: 70px; /* 日付セルの高さ */
    vertical-align: top; /* 日付を上部に配置 */
    padding: 5px;
}
.calendar-month td {
    cursor: pointer;
    transition: background-color 0.2s;
}
.calendar-month td:hover:not(.unavailable) {
    background-color: #e2e6ea;
}
/* 曜日ヘッダーの色 */
.calendar-month thead th:first-child { color: #dc3545; } /* 日曜日 */
.calendar-month thead th:last-child { color: #007bff; } /* 土曜日 */

/* 日付セルのスタイル */
.day-number {
    font-size: 1.1em;
    font-weight: normal; /* 太さをnormalに */
    text-align: left;
    margin-bottom: 5px;
    color: #343a40; /* 日付の文字色を黒に強制 */
}
.availability-status {
    font-size: 1.1rem;
    font-weight: normal; /* 太さをnormalに */
    text-align: right;
    margin-top: auto; /* 下部に配置 */
    color: #343a40 !important; /* 黒に近い色 */
    font-family: Google Sans Mono, monospace;;
}

/* 今日 */
.calendar-month td.bg-today-light {
    background-color: #DDFFDD !important; /* 淡い赤 */
}
/* 新しい土日の淡い背景色 */
.calendar-month td.bg-sunday-light {
    background-color: #FFDDDD !important; /* 淡い赤 */
}
.calendar-month td.bg-saturday-light {
    background-color: #DDEEFF !important; /* 淡い青 */
}
/* 祝日の背景色を日曜日と同じに */
.calendar-month td.bg-warning {
    background-color: #FFDDDD !important; /* 淡い赤 */
}

/* 予約不可の日 (×印、背景グレー) */
.calendar-month td.unavailable {
    background-color: #A9A9A9 !important; /* 濃いめのグレー */
    cursor: not-allowed;
    opacity: 0.7;
}
.calendar-month td.unavailable a {
    pointer-events: none; /* リンクを無効化 */
    cursor: not-allowed;
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* 親要素の色を継承 */
}

body .datepicker td,
body .datepicker th {
    width: 40px;
    height: 40px;
}

/* 凡例 */
.legend {
    margin-top: 30px;
    text-align: center;
}
.legend span {
    display: inline-block;
    margin: 0 5px;
    color: #343a40;
    font-family: Google Sans Mono, monospace;
}
/* 凡例の○△×マークの色は、spanに直接適用されるため不要 */


@media (max-width: 768px) {
    /* カレンダー全体を縦に並べる */
    .calendar-container {
        display: block;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    /* 各カレンダーの幅を揃える */
    .calendar-month {
        flex: none;
        min-width: unset;
        width: 100%;
        margin: 0 0 20px 0;
        box-sizing: border-box;
    }
    /* カレンダー内のテーブルの幅を揃える */
    .calendar-month table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }
    /* カレンダータイトルの幅を揃える */
    .calendar-month h4 {
        width: 100%;
        box-sizing: border-box;
    }
}

/* 各ページ固有のコンテナ幅とh2色 */
#booking-completion-page .container,
#register-completion-page .container {
    max-width: 600px;
}
#booking-completion-page h2,
#register-completion-page h2 {
    color: #28a745;
}
#login-page .container {
    max-width: 500px;
}
#my-bookings-page .container, /* booking.html はこのスタイルを継承 */
#booking-detail-page .container { /* 予約詳細ページも広めに */
    max-width: 900px;
}
/* ナビゲーションタブのスタイル調整 */
.nav-tabs .nav-link {
    color: #495057; /* アクティブでないタブの文字色 */
    background-color: #e9ecef; /* アクティブでないタブの背景色を薄いグレーに */
    border-color: #dee2e6 #dee2e6 #fff; /* ボーダーの色調整 */
}

.nav-tabs .nav-link.active {
    color: #495057; /* アクティブなタブの文字色 */
    background-color: #fff; /* アクティブなタブの背景色は白に */
    border-color: #dee2e6 #dee2e6 #fff;
}
/* forgot_password.html, forgot_password_completion.html 用 */
#forgot-password-page .container,
#forgot-password-completion-page .container {
    max-width: 500px; /* ログインページと同じ幅に設定 */
}
#forgot-password-completion-page h2 {
    color: #343a40; /* アイコンの色も考慮して基本色に */
}

input:read-only,
input:read-only {
    opacity: 1 !important; /* 透明度も念のため設定 */
}
input#bookingDate {
    background-color: inherit !important;
}

/* 新しいindex.htmlのスタイル */
#navigation-page .container {
    max-width: 600px;
    text-align: center;
}
#navigation-page ul {
    list-style: none;
    padding: 0;
}
#navigation-page li {
    margin-bottom: 10px;
}
#navigation-page a {
    display: block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}
#navigation-page a:hover {
    background-color: #0056b3;
}

/* 時刻入力欄の横並びスタイル */
.time-input-group {
    display: flex;
    flex-flow: row wrap;
    align-items: center; /* 垂直方向中央揃え */
    gap: 5px; /* 要素間の隙間 */
}
.time-input-group label {
    margin-bottom: 0; /* ラベルの余白を調整 */
}
.time-input-group select {
    flex-grow: 1; /* プルダウンが均等に広がるように */
    max-width: 80px;
}
.time-input-group span {
    font-weight: bold;
    margin: 0 3px; /* 「:」や「～」の左右のスペース */
}
/* 予約重複警告メッセージ用のスタイル (form.html から移動) */
.overlap-warning {
    color: #dc3545; /* Bootstrapのdangerカラー */
    font-weight: bold;
    margin-top: 5px;
    display: none; /* 初期状態では非表示 */
}
.available-time-slot {
    cursor: pointer;
    color: #007bff; /* Bootstrap primary color */
    text-decoration: underline;
}
.available-time-slot:hover {
    color: #0056b3; /* Darker on hover */
}

/* 予約日入力欄のボタン用スタイル */
.booking-date-group {
    display: flex;
    align-items: center;
    gap: 10px; /* ボタンと入力欄の間のスペース */
}
.booking-date-group .form-control {
    flex-grow: 1; /* 入力欄がスペースを埋める */
}
.booking-date-group .btn {
    white-space: nowrap;
}
/* 無効化されたボタンの背景色とカーソルを変更 */
.booking-date-group .btn:disabled {
    background-color: #e9ecef; /* 少し薄い灰色 */
    color: #6c757d; /* テキスト色を薄くする */
    cursor: not-allowed;
}

@media (min-width: 992px) {
  .modal-lg {
    max-width: 700px; /* お好みの幅に調整 */
  }
}

/* 検索結果リストのコンテナ */
.member-list-container {
    overflow-x: auto; /* 横スクロールを有効にする */
}

/* リストアイテムのスタイル */
.member-list-item {
    display: flex;
    flex-wrap: nowrap; /* 項目が折り返さないようにする */
}

/* 各項目の幅を固定し、内容が長くなっても縮まないようにする */
.member-list-item .member-id,
.member-list-item .member-name,
.member-list-item .member-email {
    flex-shrink: 0; /* 縮小しない */
    padding-right: 15px; /* 右側に余白を追加 */
}

/* 各項目の幅を具体的に設定 */
.member-list-item .member-id {
    width: 150px; /* IDの幅 */
    overflow: hidden;
}

.member-list-item .member-name {
    width: 200px; /* 氏名の幅 */
    overflow: hidden;
}

.member-list-item .member-email {
    width: 250px; /* メールアドレスの幅 */
    overflow: hidden;
}

#togglePassword {
    cursor: pointer;
}

/* タイトルバンドの調整 */
.page-title-band {
    /* .page-title-bandをFlexコンテナにし、子要素を中央揃えにする */
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の全体中央揃え */
    position: relative; /* 子要素の絶対配置の基準にする */
    padding: 15px 15px;
    border-bottom: 1px solid #eee;
}

/* 戻るリンクのスタイル */
.back-link-with-icon {
    /* 戻るリンクを左端に絶対配置 */
    position: absolute;
    left: 15px; /* 左側のパディングに合わせる */
    font-size: 1em; /* アイコンのサイズ調整 */
    color: #333; /* アイコンの色を本文色に合わせる */
    text-decoration: none; /* 下線を削除 */
    line-height: 1; /* アイコンの縦位置調整 */
    padding: 5px; /* クリックしやすいようにパディング */
}

.back-link-with-icon:hover {
    color: #c00; /* ホバーで色を変えるなど */
    text-decoration: none;
}

/* タイトルのスタイル */
.page-title-text {
    /* ページタイトル自体は中央に配置 */
    margin: 0;
    font-size: 1.5em; /* フォントサイズを調整 */
    font-weight: 700;
    color: #333;
}

/* 画面幅が広い場合の調整（オプション） */
@media (min-width: 768px) {
    .page-title-band {
        padding: 20px 30px;
    }

    .back-link-with-icon {
        left: 30px; /* PC/タブレットのパディングに合わせる */
        font-size: 1em;
    }
    
    .page-title-text {
        font-size: 1.8em;
    }
}

table .pc_cell {
    display: table-cell;
}
table .sp {
    display: none;
}
@media (max-width: 768px) {
    table .pc_cell {
        display: none;
    }
    table .sp {
        display: block;
    }
}