/*
  /var/www/ccu_library_survey_app/public/css/style.css 
*/

/* ログインカード全体 */
.login-card {
  background-color: #d1e3ff;
  /* 明るい青 */
  border: 3px solid #222;
  border-radius: 12px;
  padding: 40px 40px 15px 40px;
  /* 幅を固定 */
  width: auto;
  /* 固定幅を解除 */
  min-width: 480px;
  /* 最低限の幅 */
  display: inline-block;
  /* 中身の長さに合わせて横に広がるようにする */
  /* 中身に合わせて幅を調整 */
  /* 複雑なpositionをやめて、単純なmarginに戻す */
  margin: 100px auto;
  /* 上下に100px、左右は自動中央 */
  display: block;
  /* inline-blockからblockに戻すとmargin: autoが効きます */
  max-width: fit-content;
  /* これで「中身に合わせつつ中央寄せ」が両立します */
  /*margin: 50px auto;*/
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 1行目（変更画面用）：ログインIDと図書館名の表示 */
.card-header {
  text-align: center;
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 各行のレイアウト */
.input-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* ログイン画面の各行：要素間の隙間（gap）をしっかり確保 */
.login-page .input-row {
  display: flex;
  align-items: center;
  gap: 15px;
  /* ここで「ログインID」と「入力欄」の隙間を固定 */
  width: 100%;
}

/* 入力欄：絶対に縮ませない（安心感の固定） */
.login-page .input-row input {
  width: 140px !important;
  /* 幅をしっかり確保 */
  min-width: 140px !important;
  /* 最小幅を固定 */
  flex-shrink: 0;
  /* 押し潰しを拒否 */
  background-color: #fff;
}


/* --- パスワード変更画面：専用スタイル --- */
.password-page .input-row {
  display: flex;
  /* 横並びにする */
  align-items: center;
  /* 縦方向の中央揃え */
  gap: 10px;
  /* ラベルと入力欄の隙間 */
  margin-bottom: 15px;
}

.password-page .input-row label {
  flex: 0 0 160px;
  text-align: right;
  font-weight: bold;
}

.password-page .password-guide {
  font-size: 0.85em;
  color: #555;
  text-align: center;
  margin: 10px 0;
}

/* 入力欄の見た目調整 */
.password-page .input-row input {
  flex: 1;
  max-width: 200px;
  background-color: #fff;
}

/* パスワード変更成功時の緑色のボックス */
/* --- アニメーション --- */
/* 成功ボックス内での文字とドットの並び */
.password-page .success-msg {
  display: flex;
  justify-content: center;
  /* 中央寄せ */
  align-items: center;
  gap: 2px;
  /* 文字とドットの間のスキマ */
  height: 24px;
  /* ボックスの「中身の高さ」を完全に固定します（※環境に合わせて微調整OK） */
  line-height: 1;
  /* 文字の上下の余白をリセットして計算しやすくする */
  box-sizing: border-box;
  /* パディングを含めた高さを固定 */
}

/* ドットの指定席（3文字分の幅を絶対に譲らない箱） */
.password-page .loading-dots.active {
  display: inline-block;
  width: 1.5em;
  text-align: left;
  font-size: 1.6em;
  /* 通常の文字の1.6倍の大きさに一押し太くします */
  font-weight: bold;
  /* さらにドットを太く丸く強調します */
  line-height: 1;
  /* ↓ 縦幅に影響を与えないように vertical-align を baseline にし、位置を微調整 */
  vertical-align: baseline;
  margin-top: -4px;
  /* 大きくなったドットを文字の高さに合わせるための微調整 */
}

/* 点々が育つアニメーション */
.password-page .loading-dots.active::after {
  content: '';
  animation: dots-clean 1.5s steps(4, end) infinite;
}

@keyframes dots-clean {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }

  100% {
    content: '';
  }
}

/* ラベル幅の統一：これによって入力欄の左端が両画面で揃います */
.input-row label {
  width: auto;
  flex-shrink: 0;
  font-size: 19px;
  color: #444;
  font-family: "MS PGothic", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: bold;
}

/* 右側エリア（図書館名表示やログインボタン用） */
.side-area {
  width: 200px;
  display: inline-flex;
  justify-content: flex-end;
}

/* 入力欄の設定 */
.input-row input {
  width: 130px;
  padding: 8px 10px;
  border: 2px solid #555;
  border-radius: 8px;
  /* background-color: #fff;*/
  font-size: 16px;
}

/* 図書館名エリア：柔軟に伸びるが、最小限の表示領域を確保 */
.library-name {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* ★中身を右寄せに戻す */
  flex: 1;
  /* 余白をすべて吸収 */
  min-width: 0;
  /* 突き抜け防止 */
  margin-left: 10px;
  /* 入力欄との最低限の距離 */
}

/* 1. 2行目のボタンエリアを右寄せにする */
.side-button-area {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  /* ★ここを flex-end に変更 */
  flex: 1;
  /* 右側の余白をすべて埋める */
}

/* ボタンのコンテナ：右寄せを維持 */
.side-button-area {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  /* パスワード入力欄の右に押し出す */
}

/* ボタンを縦に並べるための親 */
.button-column {
  display: flex;
  flex-direction: column;
  /* 縦並び */
  align-items: flex-end;
  /* 右端を揃える */
  gap: 8px;
  /* ログインと変更ボタンの隙間 */
}

/* パスワード変更ボタンのスタイル */
.btn-change-pass {
  background-color: #003a70;
  /* ログインボタンと区別するためにグレー等に */
  color: white;
  border: 1px solid #222;
  border-radius: 15px;
  padding: 6px 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: fit-content;
  text-decoration: none;
  /* リンクのアンダーラインを消す */
  display: inline-block;
}

/* パスワード変更ボタンを一段下げて右寄せにするためのコンテナ */
.change-pass-row {
  display: flex;
  justify-content: flex-end;
  /* 右端に寄せる */
  margin-top: 10px;
  /* ログインボタンとの間隔 */
  margin-right: 0;
  /* ボタンの右端をログインボタンと合わせる */
}

#id-library-name {
  font-size: 17px;
  font-weight: bold;
  white-space: nowrap;
  /* 重なりが解消されたので、まずは一行で試す */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 万が一溢れたら「...」にする */
}

/* 3行目：ボタン全体の配置設定 */
.footer-row {
  margin-top: 30px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  /* メッセージを左、ボタンを右へ */
  align-items: center;
  margin-right: 5%;
  margin-left: 5%;
}

/* 右側のボタン群の配置 */
.footer-button-group {
  display: flex;
  align-items: center;
  gap: 20px;
  /* ログアウトボタンとデータ更新ボタンの間の隙間 */
  flex-shrink: 0;
  /* ボタンが縮まないように固定 */
}

/* メッセージエリア：左側のスペースを自由に使う */
#status-message {
  flex-grow: 1;
  /* 空きスペースをメッセージエリアが利用 */
  margin-right: 20px;
  /* ボタンとの距離を確保 */
}

/* ボタンの共通スタイル（ここを書き換え） */
.btn-blue,
.survey-page {
  min-width: 150px;
  /*  width: 150px;*/
  /* 横幅を200pxに固定 */
  /*height: 60px;*/
  /* 高さを60pxに固定 */
  /* ★ここを追加：これで最低限の幅が統一されます */
  text-align: center;
  /* ★ここを追加：文字を中央寄せ */
  /* 他の設定はそのまま維持 */
}

/* データ更新ボタン（右端） */
.footer-row .btn-blue {
  display: inline-block;
  background-color: #003a70;
  color: white;
  border: 1px solid #222;
  /* ★修正：指定の角丸にする */
  border-radius: 20px;
  padding: 10px 40px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0;
}

/* ボタンの共通スタイル*/
.btn-blue {
  display: inline-block;
  background-color: #003a70;
  color: white;
  border: 1px solid #222;
  border-radius: 15px;
  padding: 8px 25px;
  font-size: 18px;
  font-family: "MS PGothic", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-blue:hover {
  background-color: #0056b3;
}


/* --- 補充セクション --- */
/* パスワード変更画面など、ラベルが長い場合用のクラス */
.input-row.wide-label label {
  width: 160px;
  /* 標準の100pxより広げて「パスワードの変更」に対応 */
}

/* カード内のタイトル表示（図書館名など） */
.card-header {
  text-align: center;
  margin-bottom: 25px;
  font-size: 26px;
  font-weight: bold;
  color: #333;
  /* 10100000 などのIDと名前の間に適度な空白を */
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* エラーメッセージの共通スタイル */
.error-msg {
  background-color: #fff2f2;
  border: 1px solid #d9534f;
  color: #d9534f;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

/* --- 図書館情報入力画面(survey-page)専用の設定 --- */

/* 入力画面の基本設定 */
.survey-page .survey-container {
  background-color: #d1e3ff;
  /* 明るい青 */
  border: 3px solid #222;
  border-radius: 12px;
  padding: 40px 40px 15px 40px;
  /* 固定幅を解除 */
  width: auto;
  /* 最低限の幅 */
  min-width: 480px;

  display: inline-block;

  width: 95%;
  max-width: 1200px;
  padding: 30px 0;
  margin: 30px auto;
  box-sizing: border-box;
}

/* 設問行 */
.survey-page .input-row {
  margin: 0 5%;
  padding: 12px 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 1. タイトルの中央寄せ */
.survey-page .survey-title {
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  color: #333;
  margin: 20px 0;
}

/* 2. 紺色のカテゴリ帯（Ⅰ.施設） */
.survey-page .section-title-band {
  background-color: #002060;
  /* 濃い紺色 */
  color: #ffffff;
  padding: 8px 25px;
  margin: 20px 5% 10px 5%;
  /* 左右の余白を設問行(5%)に合わせる */
  border-radius: 25px;
  /* 仕様どおりの深い角丸 */
  font-size: 18px;
  font-weight: bold;
  box-sizing: border-box;
}

/* 左側：項目名エリア */
.survey-page .item-label-area {
  flex: 1;
  display: flex;
  /* 番号とテキストを横並びにする */
  align-items: flex-start;
  /* 頭揃え */
  font-size: 18px;
  /* 仕様に合わせて1px下げ */
  font-weight: bold;
  color: #444;
  padding-right: 20px;
  line-height: 1.4;
  min-width: 0;
  text-align: left;
}

/* 4. 設問番号の固定幅設定 */
.survey-page .q-number {
  display: inline-block;
  white-space: nowrap;
  /* 絶対に改行させない */
  /* 番号エリアの幅（1-10などが増えてもズレないように） */
  flex-shrink: 0;
  /* 幅を固定 */
  font-weight: bold;
  color: #333;

  min-width: 60px;
  /* 52-① などの長い番号に合わせて最低幅を広げる */
  margin-right: 0px;
  /* 番号のすぐ右側に 15px の固定隙間を作る */
  text-align: left;
  /* 番号を左寄せにする（右寄せにしたい場合は right） */
}

/* 5. 項目名テキスト（番号の右側） */
.survey-page .q-label-text {
  flex: 1;
}

/* 右側：入力コンテナ（器としての320pxは維持）通常は320pxだが、中身が溢れる場合は広がるように変更 */
.survey-page .item-input-area {
  min-width: 320px;
  /* 最低幅は維持 */
  width: auto;
  /* 固定幅を解除 */
  flex-shrink: 1;
  /* 親要素に合わせて収縮を許可 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* --- 入力パーツ別の個別設定：サイズを統一 --- */

/* 1. 全ての入力欄（テキスト、数値、セレクト、日付）を共通ルールで縛る */
.survey-page .item-input-area input[type="text"],
.survey-page .item-input-area input[type="number"],
.survey-page .item-input-area input[type="date"],
.survey-page .item-input-area select {
  width: 320px !important;
  /* 320pxに統一 */
  max-width: 100%;
  /* 画面が狭いときははみ出さない */
  box-sizing: border-box;
  /* 余白を含めて320pxに計算する（ズレ防止の要） */
  border-radius: 10px;
  border: 1px solid #333;
  padding: 6px 15px;
  font-size: 16px;
  height: 40px;
  /* 高さを揃えるとさらに綺麗です */
}

/* 1.1　二連プルダウン（時・分）専用：320pxの固定幅を解除する */
.survey-page .time-picker-group select {
  width: auto !important;
  /* 320pxを打ち消し */
  min-width: 80px;
  /* 選択肢が見える最低限の幅 */
  padding: 6px 30px 6px 15px;
  /* 右側に矢印の余白を確保 */
}

.survey-page .time-picker-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 親要素（item-input-area）の中での並び */
}

.survey-page .time-picker-group span {
  font-weight: bold;
  margin-right: 10px;
  white-space: nowrap;
  /* 「分」などの文字を改行させない */
}

/* 2. ラジオボタン：320pxの制限から除外して中身に合わせる */
.survey-page .radio-group-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 25px;
  width: auto;
  /* 320pxにこだわらず、中身の幅にする */
}

.survey-page .radio-group-container {
  display: flex;
  flex-wrap: wrap;
  /* ★重要：幅が足りない時は自動で折り返す */
  justify-content: flex-end;
  gap: 15px;
  /* 選択肢同士の隙間 */
  width: auto;
  /* 320pxの縛りを解く */
}

.survey-page .radio-label {
  white-space: nowrap;
  /* 選択肢の文字自体は改行させない */
  font-size: 16px;
  /* 少し小さくすると収まりが良くなります */
}

.survey-page .radio-label input[type="radio"] {
  width: 18px !important;
  /* ボタン自体は小さく */
  height: 18px !important;
  margin: 0 !important;
  position: static !important;
}

/* ==========================================================
 * アンケート編集画面（.survey-page）専用
 * 過年度データと相違（変更）がある入力欄のハイライト
 * ========================================================== */
.survey-page .form-control.is-different,
.survey-page .form-select.is-different,
.survey-page .survey-textarea.is-different,
.survey-page select.is-different,
.survey-page input[type="text"].is-different,
.survey-page input[type="number"].is-different,
.survey-page textarea.is-different {
  /* 背景を薄いブルーに変更 */
  background-color: #eef6ff !important;

  /* 枠線を濃いブルーに変更し、太さを少し抑える */
  border: 2px solid #0056b3 !important;

  /* 発光エフェクトを消し、落ち着いた影に変更（あるいはなしでもOK） */
  box-shadow: none !important;

  /* フォントの太さは強調しすぎず適度に */
  font-weight: 600 !important;

  /* 文字色はそのままクッキリと */
  color: #000000 !important;
}

/* --- 単一チェックボックス（ON/OFF）専用設定 --- */
/* 1. チェックボックス：ラジオボタン同様、320pxの制限から除外し右寄せにする */
.survey-page .form-check {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 右端に寄せる */
  gap: 10px;
  width: 320px;
  /* 器の幅は他の入力欄と合わせる */
  height: 40px;
  /* テキスト入力等のheight:40pxと合わせることで上下中央に配置 */
}

/* 2. チェックボックス本体のサイズ */
.survey-page .form-check-input {
  width: 20px !important;
  /* 他のパーツに負けないサイズ感 */
  height: 20px !important;
  margin: 0 !important;
  cursor: pointer;
  /* position: static !important; はデベロッパーツールの表示崩れ対策 */
}

/* 3. 「選択」ラベルの調整 */
.survey-page .form-check-label {
  font-size: 16px;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  user-select: none;
  /* ラベルクリックでチェックが走る際の誤選択防止 */
}

/* 3. ガイドテキスト（入力要領） */
.survey-page .item-input-area .guide-text {
  display: block;
  font-size: 13px !important;
  color: #555 !important;
  font-weight: normal !important;
  line-height: 1.5;
  margin-top: 8px;
  text-align: left;
  width: 320px;
  /* 入力欄と同じ幅にする */
}

/* 4. エラーメッセージ（カレンダー等） */
.survey-page .date-error-msg {
  color: #d9534f;
  font-size: 13px;
  margin-top: 5px;
  text-align: right;
  width: 320px;
}

/* 右側エリアの並び：入力欄の下に説明が来るように */
.survey-page .item-input-area {
  flex-direction: column;
  align-items: flex-end;
}


/* --- 図書館情報入力画面(survey-page) 内の追加パーツ --- */

/* 1. 必須バッジ（論理名の横） */
.survey-page .required-badge {
  display: inline-block;
  color: #fff;
  background-color: #e74c3c;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 10px;
  vertical-align: middle;
}

/* 2. メッセージバナー（データ更新完了・エラー） */
.survey-page .msg-banner {
  /* 幅の固定を解除し、コンテンツに合わせて広がるようにする */
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: bold;
  /* margin の競合を避ける */
  margin: 0;
  white-space: nowrap;
  /* 改行を防いで中央に収める */
}

.survey-page .msg-banner.is-success {
  background-color: #e6fffa;
  color: #234e52;
  border: 1px solid #b2f5ea;
  /*  animation: fadeOutMsg 3.5s forwards;*/
}

.survey-page .msg-banner.is-error {
  background-color: #fff5f5;
  color: #c53030;
  border: 1px solid #feb2b2;
}

/* 3. フッターのログアウトボタン */
.survey-page .btn-logout {
  display: inline-block;
  padding: 10px 25px;
  background-color: #666;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.survey-page .btn-logout:hover {
  background-color: #444;
}

/* 4. バリデーションエラー時の入力欄強調 */
/* is-invalid が付いている場合は、is-different があってもこちらを優先 */
.survey-page input.form-control.is-invalid,
.survey-page textarea.form-control.is-invalid,
.survey-page select.form-control.is-invalid {
  border: 2px solid #e74c3c !important;
  /* 赤枠 */
  background-color: #fff5f5 !important;
  /* 赤背景 */
}

/* ワーニング時の入力欄強調（黄色・オレンジ系） */
.survey-page input.form-control.is-warning,
.survey-page textarea.form-control.is-warning,
.survey-page select.form-control.is-warning {
  border: 2px solid #f39c12 !important;
  /* 黄枠 */
  background-color: #fffcf5 !important;
  /* 黄背景 */
}

/* ===================================================
 * ワーニング（警告）インライン確認ボタン用スタイル（追記分）
 * =================================================== */

/* 1. 警告文とボタンを包むコンテナ */
.survey-page .inline-warning-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  margin-left: 8px;
  padding: 6px 12px;
  background-color: #fcf8e3;
  /* 既存のワーニング背景色と統一 */
  border: 1px solid #f39c12;
  /* 既存のワーニング枠線色と統一 */
  border-radius: 4px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 2. 警告文テキストのスタイル */
.survey-page .warning-msg {
  color: #c77c02;
  /* マイルドなオレンジに合わせた濃いめの警告文字色 */
  font-size: 12px;
  font-weight: bold;
}

/* 3. 確認ボタンの横並びエリア */
.survey-page .inline-confirm-area {
  display: flex;
  gap: 6px;
}

/* 4. 「これで確定」ボタン（安心感のある緑） */
.survey-page .btn-inline-ok {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

.survey-page .btn-inline-ok:hover {
  background-color: #218838;
}

/* 5. 「修正する」ボタン（冷静さを促すグレー） */
.survey-page .btn-inline-ng {
  background-color: #6c757d;
  color: #fff;
  border: none;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

.survey-page .btn-inline-ng:hover {
  background-color: #5a6268;
}

/* 1. エラーメッセージの基本形を定義（どのページでも適正サイズに） */
.error-message-live {
  font-size: 13px !important;
  /* 少し小さくして圧迫感をなくす */
  padding: 6px 10px !important;
  margin-top: 5px !important;
  border-radius: 4px;
  border: 1px solid #d9534f;
  background-color: #fff2f2;
  color: #d9534f;
  font-weight: bold;
  width: 320px;
  /* 入力欄(320px)と幅を合わせる */
  box-sizing: border-box;
  /* パディング込みで幅を計算 */
}

/* アンケートページ(.survey-page)用のエラーメッセージ調整 */
.survey-page .error-message-live {
  /* 1. 幅の制限を解除して、コンテンツに応じて広がるようにする */
  width: auto !important;
  min-width: 320px;
  /* 最低幅は入力欄と揃える */
  max-width: 500px;
  /* 広がりすぎないよう最大幅を設定 */

  /* 2. 左寄せにして、窮屈さを解消 */
  text-align: left;

  /* 3. パディングと余白の最適化 */
  padding: 10px 15px !important;
  margin: 8px 0 0 0 !important;

  /* 4. フォントサイズの微調整 */
  font-size: 14px !important;
  line-height: 1.5;
  /* 行間を広げて読みやすく */

  /* 5. 既存のデザインとの整合性 */
  border: 1px solid #d9534f;
  background-color: #fff2f2;
  color: #d9534f;
  border-radius: 6px;
  font-weight: bold;
}


/* 備考専用のテキストエリア設定 */
.survey-page .survey-textarea {
  /* 入力エリアの横幅いっぱいに広げる */
  width: 100% !important;
  /* 最小でも450px程度確保（320pxより長くする） */
  min-width: 600px;
  /* 2行〜3行分の高さを確保 */
  min-height: 80px;

  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #333;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
  resize: vertical;
  /* ユーザーが手動で上下に広げることを許可 */
}

/* 備考の行だけ、右側の入力エリアを広く取るための調整 */
/* 物理項目名がクラス等で付与されている場合、その行を広げる */
.input-row:has(textarea) .item-input-area {
  flex: 2;
  /* 通常の項目より比率を大きくする */
  max-width: 600px;
  /* 必要に応じて最大幅を設定 */
}





/* --- 入力モード時 (mode-confirm クラスがない時) --- */
body:not(.mode-confirm) #btn-back-to-input,
body:not(.mode-confirm) #api-save-btn {
  display: none !important;
}

body:not(.mode-confirm) #btn-logout,
body:not(.mode-confirm) #btn-to-confirm {
  display: inline-block !important;
  /* またはデフォルトの表示形式 */
}

/* --- 確認モード時 (mode-confirm クラスがある時) --- */
body.mode-confirm #btn-logout,
body.mode-confirm #btn-to-confirm {
  display: none !important;
}

body.mode-confirm #btn-back-to-input,
body.mode-confirm #api-save-btn {
  display: inline-block !important;
}

/* もし確認モード時に、背景色までグレーになってしまうのが嫌な場合 */
body.mode-confirm .survey-page input:disabled,
body.mode-confirm .survey-page select:disabled,
body.mode-confirm .survey-page textarea:disabled {
  background-color: #ffffff !important;
  /* 背景を白に固定 */
  border: 1px solid #333 !important;
  /* 枠線も元通りに */
}

/* 過年度データとの相違箇所（確認モード時のみ黄色） */
body.mode-confirm .row-highlight-diff {
  background-color: #f7f311 !important;
  font-weight: bold !important;
  ;
}

body.mode-confirm .row-highlight-diff,
body.mode-confirm .row-highlight-diff .form-select,
body.mode-confirm .row-highlight-diff select {
  background-color: #f7f311 !important;
  font-weight: bold !important;
}



/* アニメーション：成功メッセージ用 */
@keyframes fadeOutMsg {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

/* 5. 見出し（h1～h3） */
h1.survey-heading {
  font-size: 22px;
  margin-left: 15px;
  color: white;
  padding: 0.5em;
  /*文字周りの余白*/
  padding: 15px 20px;
  ;
  /*余白*/
  background: #003a70;
  /*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;
  /*左側の角を丸く*/
  text-align: left;
}

h2.survey-heading {
  font-size: 20px;
  margin-left: 20px;
  text-align: left;
}

h3.survey-heading {
  font-size: 18px;
  margin-left: 25px;
  text-align: left;
}

/* disabled属性がついている要素の見た目を調整 */
.survey-page input:disabled,
.survey-page select:disabled,
.survey-page textarea:disabled {
  /* 文字色を黒で強制固定 */
  color: #000000 !important;
  /* 不透明度を最大に（ブラウザの自動薄色化を防ぐ） */
  opacity: 1 !important;
  /* 背景色はJSや他のCSSで制御されている場合を考慮し、あえて指定しない（または適宜調整） */
}