/* =========================================================
   Base
========================================================= */
:root {
  --container-max: 600px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #EEE;
}

/* 画面中央に寄せる親ラッパ（見出し・フォーム・注釈を同幅で中央） */
.container {
  max-width: var(--container-max);
  margin: 0 auto;        /* ← 中央寄せ */
  padding: 0 16px;       /* 端の余白 */
}

/* =========================================================
   Typography / Headings
========================================================= */
.title {
  font-weight: bold;
  text-align: center;
  margin-top: 32px;
}

.sub-title {
  font-weight: bold;
  text-align: center;
  margin: 8px 0 16px;
  font-size: 1.5em;
}

/* 使用しているラベル */
.required-label {
  background-color: red;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  padding: 2px 5px;
  display: inline-block;
  margin-left: 5px;
}

/* =========================================================
   Card (白い枠)
========================================================= */
.outer-container {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 30px;
  margin: 20px auto;          /* ← 中央寄せ */
  max-width: var(--container-max);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

/* 質問タイトル（先頭に●） */
.question-title {
  font-weight: bold;
  margin: 40px auto 5px;
  font-size: 1.1em;
  position: relative;
  padding-left: 20px;
}
.question-title::before {
  content: '●';
  position: absolute;
  left: 0;
  color: #000;
}

/* フォーム要素 */
.form-check { margin: 10px 0; }
.form-check-description { font-size: 90%; text-indent: 2em; }
.btn { margin-top: 20px; }

/* 上下の区切り線（使う場合） */
.readonly-border { margin: 20px 0; border-bottom: thin solid #888; }

/* 行内カレンダー（使う場合） */
.inline-calendar { width: 100%; height: 500px; }

/* 前週/次週などのボタン並び */
.button-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
}

/* 下部注釈（※の箇条書きもこの中に） */
.small-text{
  max-width: var(--container-max);
  /*margin: 12px auto 32px;      ← 中央寄せ */
  font-size: .9em;
  color: #333;
}

/* ※の箇条書き */
.custom-bullet { list-style: none; padding-left: 0; }
.custom-bullet li{
  position: relative;
  padding-left: 20px;
  margin: 3px 0;
}
.custom-bullet li::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

/* =========================================================
   Calendar
========================================================= */
.calendar-table{
  width: 100%;
  border-collapse: collapse;
}
.calendar-table th,
.calendar-table td{
  border: 1px solid #666;   /* 統一 */
  padding: 8px;
  text-align: center;
  position: relative;
}
.time-column      { width: 60px; }
.time-column-top  { width: 80px; }
.date-row         { background-color: #f2f2f2; }
.reservation-outside { color: #dcdcdc; }

/* 週末見出し */
.calendar-table th.土, .calendar-table td.土 { background-color: #c8e6fa; }
.calendar-table th.日, .calendar-table td.日 { background-color: #fae1e9; }

/* 斜線セル */
.diagonal-strike{ position: relative; }
.diagonal-strike::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent 49%, gray 50%, transparent 51%);
  z-index: 1;
}

/* 変更可/不可セル */
.editable {
  color: #007bff;
  cursor: pointer;
}
.editable:hover { text-decoration: underline; }

.disabled {
  background-color: #f2f2f2;
  color: #888;
  cursor: not-allowed;
}

/* =========================================================
   Loading Overlay（1本化）
========================================================= */
.loading-overlay{
  position: fixed; inset: 0;
  display: none;                      /* JSで .show を付けるか、style切替 */
  align-items: center; justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;                      /* 最前面 */
  pointer-events: all;                /* クリック遮断 */
}
.loading-overlay.show { display: flex; }  /* クラス切替で表示 */
.loading-icon { font-size: 2rem; color: #fff; margin-bottom: 10px; }
.loading-text { font-size: 1.2em; color: #fff; }

/* 表示中はスクロール固定（任意） */
body.loading { overflow: hidden; }

/* =========================================================
   Modal（使う場合）
========================================================= */
.modal{
  display: none; position: fixed; inset: 0;
  z-index: 10000;
  background-color: rgba(0,0,0,.4);
  display: flex; justify-content: center; align-items: center;
}
.modal-content{
  margin: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
  width: 550px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  text-align: left;
  line-height: normal;
}
.modal-title{ font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.modal-message{ font-size: 14px; margin-bottom: 20px; }
.modal-buttons{ display: flex; justify-content: flex-end; }
.leave-page-btn, .cancel-btn{ width:110px; line-height: revert; padding: 8px 12px; cursor: pointer; }
.leave-page-btn{ background:#007bff; color:#fff; border:none; border-radius:3px; margin-right:10px; }
.cancel-btn{ background:#f8f9fa; color:#333; border:1px solid #ccc; border-radius:3px; }
.leave-page-btn:hover{ background:#0056b3; }
.cancel-btn:hover{ background:#e2e6ea; }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 600px) {
  .outer-container { max-width: 100%; }
  .calendar-table th, .calendar-table td { font-size: 12px; padding: 5px; }
  .time-column, .time-column-top { width: 40px; }
  .button-container { gap: .5rem; margin: .5rem 0; }
  .button-container button{
    margin: 0 5px;
    padding: 5px;
    font-size: 12px;
    min-width: 80px;
    max-width: 150px;
  }
  .calendar-table { overflow-x: auto; }
}

@media (max-width: 450px) {
  .calendar-table { display: block; }
}

/* =========================================================
   ボタンのデフォルト外観を整える
========================================================= */
button.btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border: 1px solid #a9aeb5;  
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font: 500 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  padding:8px 8px; border-radius:6px; cursor:pointer;
  transition: background-color .15s, box-shadow .15s, transform .02s;
  min-width:65px; user-select:none; 
}
.btn-primary{
  color:#fff; background-color:#0d6efd;   /* 通常時の青 */
}
.btn-primary:hover{  background-color:#0b5ed7; }
.btn-primary:active{ background-color:#0a58ca; transform:translateY(1px); }
.btn:disabled{ opacity:.65; cursor:not-allowed; }


/* 無効化時（ローディング中もここに入る想定） */
.btn:disabled,
.btn[disabled]{
  opacity: .65;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}


/* =========================================================
   プルダウン
========================================================= */
select.form-select{
  /* ← 矢印を戻す（ブラウザ標準の見た目） */
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: auto !important;

  display: block;
  width: 100%;            /* 親幅に追従 */
  max-width: 300px;       /* 上限（必要に応じて変更） */
  margin: 6px 0 16px !important;  /* 左寄せ：左右autoをやめる */
  padding: 7px 9px;     /* 上下にゆとり */
  padding-right: 36px;    /* 右側に矢印分の余白 */
  line-height: 1.4;
  min-height: 40px;
  box-sizing: border-box;

  border: 1px solid #ced4da;
  border-radius: 6px;
  background-color: #fff;

  /* 念のため、背景画像の独自指定があれば無効化 */
  background-image: initial !important;
  background-repeat: no-repeat;
  background-position: right 10px center; /* ネイティブ矢印位置に干渉しない */
}

select.form-select:focus{
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* モバイル最適化（任意） */
@media (max-width: 600px){
  select.form-select{
    max-width: 100%;
    min-height: 44px;
    font-size: 16px; /* iOSズーム抑止 */
  }
}

/* =========================================================
   お客様情報の入力
========================================================= */
/* 入力欄（テキスト・メール・電話など） */
input.form-control{
  display: block;
  width: 100%;                         /* 親幅に追従 */
  max-width: 300px;  /* 上限 */
  padding: 7px 12px;                  /* 上下にゆとり */
  min-height: 40px;                    /* 高さの下限 */
  line-height: 1.4;
  box-sizing: border-box;
  text-align: left;                    /* 念のため左寄せ */
  border: 1px solid #ced4da;
  border-radius: 6px;
  background-color: #fff;
}

/* テキストエリア */
textarea.form-control{
  display: block;
  width: 100%;                         
  max-width: var(--container-max, 600px);
  padding: 10px 12px;
  min-height: 120px;                   /* 適度な初期高さ */
  line-height: 1.5;
  box-sizing: border-box;
  text-align: left;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background-color: #fff;
  resize: vertical;                    /* ユーザーが縦方向にのみ伸縮可 */
}

/* フォーカス時の視認性（input/textarea共通） */
input.form-control:focus,
textarea.form-control:focus{
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* モバイル最適化（iOSの自動ズーム対策など） */
@media (max-width: 600px){
  input.form-control{
    max-width: 100%;
    min-height: 44px;                  /* タップしやすい高さ */
    font-size: 16px;                    /* iOSのズーム抑止に有効 */
  }
  textarea.form-control{
    max-width: 100%;
    font-size: 16px;
  }
}

/* =========================================================
   初回ヒヤリング・カルテ閲覧
========================================================= */
  th{width:30%;background:#e0e0e0!important;white-space:pre-wrap;border:1px solid #555!important;}
  td{border:1px solid #555!important;}
  table{table-layout:fixed;border-collapse:collapse;}
  .table td,.table th{padding:.5rem!important;vertical-align:top;}
  .wrap{max-width:960px;margin:2rem auto;}
  .stack > * + * { margin-top: 30px; }  /* お好みで 16px, 24px など */