/* style.css */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header {
  background: #2c7;
  color: white;
  padding: 1em;
  text-align: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

nav li {
  margin: 0.5em 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

main {
  padding: 1.5em;
}

section {
  margin-bottom: 2em;
}

h2 {
  color: #2c7;
  border-bottom: 2px solid #2c7;
  padding-bottom: 0.3em;
}

form {
  display: flex;
  flex-direction: column;
}

form input, form textarea {
  margin-bottom: 1em;
  padding: 0.7em;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background: #2c7;
  color: white;
  border: none;
  padding: 0.7em;
  border-radius: 5px;
  cursor: pointer;
}

footer {
  background: #eee;
  text-align: center;
  padding: 1em;
}

/* スマホ対応 */
@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }
}


:root { --headerH: 96px; }

/* ===== 入口サイネージ用デジタル時計（更新） ===== */
#megaClock{
  /* 上下は最小に、左右に必ず余白 */
  padding: 8px 24px;          /* ← 左右24pxの余白を確保 */
  background: #777;
  color: #fff;
  display: flex;
  align-items: flex-start;     /* 上から詰める */
  justify-content: center;
}

.clockWrap{
  width: 100%;
  text-align: center;
  line-height: 1.05;           /* 行間最小化 */
}

.clockTime{
  display: inline-block;
  white-space: nowrap;         /* 折返しなし */
  font-family: "Roboto Mono",ui-monospace, SFMono-Regular, Menlo,  "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  font-weight: 900;
  color: #ffd400;              /* ← 文字色：黄色 */
  /* フォールバックの初期値（JSで自動調整） */
  font-size: 120px;
}

.clockDate{
  margin-top: .25em;           /* できるだけ詰める */
  font-weight: 700;
  opacity: .9;
  font-size: 48px;             /* 必要なら調整可。日付は端に触れにくいので固定でOK */
}

/* 横向きになった場合の調整（必要なら） */
@media (orientation: landscape){
  #megaClock{ min-height: calc(100vh - var(--headerH)); }
  .clockTime{ font-size: clamp(72px, 18vw, 320px); }
  .clockDate{ font-size: clamp(20px, 4vw, 56px); }
}


/* ===== ステータス／診療時間 表示をデジタル時計風に ===== */
#statusArea {
  text-align: center;
  margin-top: 24px;
}

.statusMain {
  font-family: "Roboto Mono",ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0000ff;   /* 好みで変更可（例: シアン） */
  font-size: clamp(12px, 6vw, 18px);
  margin-bottom: .3em;
}

.statusSub {
  font-family: "Roboto Mono",ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0000aa;   /* ← 黄色に変更 */
  font-size: clamp(12px, 6vw, 16px); /* 大きく表示 */
  line-height: 1.2;
  display: block;
  text-align: center;
}

#live {
  font-size: 1.0rem;   /* この中の文字サイズを一括で拡大 */
}