.hours-table {
  width: 100%;
  /* 列は等幅。まとめた曜日（日・祝）だけが横に長くて入らなかったので、
     その列は小さい文字で 2 行に積む（ユーザー指示 2026-09-24
     「「日/祝」の形、日は左上、祝が左下にくるようなフォントサイズを縮めて、
     それでフッター診察表は等幅にならないかな？」）。 */
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgb(var(--hours-table-text-rgb));
  text-align: center;
}

.hours-table__caption {
  caption-side: top;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  color: rgb(var(--hours-table-heading-rgb));
  padding: 0 0 14px;
}

.hours-table th {
  padding: 10px 6px;
  font-weight: 500;
  vertical-align: middle;
  border-bottom: 1px solid rgb(var(--hours-table-rule-rgb));
  color: rgb(var(--hours-table-heading-rgb));
}

.hours-table td {
  padding: 10px 6px;
  vertical-align: middle;
  border-bottom: 1px solid rgb(var(--hours-table-rule-rgb));
  text-align: center;
}

.hours-table__corner {
  width: 96px;
  border-bottom: 1px solid rgb(var(--hours-table-rule-rgb));
}

.hours-table__day {
  text-align: center;
  white-space: nowrap;
  font-size: 16px;
  font-feature-settings: "palt";
}

/* 2 つ以上の曜日をまとめた列は、小さい文字で縦に積む。横に並べると
   その列だけが必要な幅を押し上げ、等幅の表に収まらない。
   1 つ目を左上・最後を右下に置き、その間を線で仕切る
   （ユーザー指示 2026-09-24「日（左上）祝（右下）間にスラッシュ」→
   「スラッシュだと気持ち悪くなってきた、ちゃんと対角線っぽくラインに差し替えたい」）。 */
.hours-table__day--stack {
  /* 中身は左上から右下への対角に置き、塊ごと列の中央に寄せる。
     こうすると他の曜日（1 文字・中央寄せ）と並びが揃う
     （ユーザー指示 2026-09-24「もっと左上→右下への対角線上に３つの文字が
     並ぶようにできないわけ？全体中央寄せで、そうすると他曜日と違和感ないでしょ」）。 */
  text-align: center;
}

.hours-table__day__diagonal {
  /* 分数のように組む。日が左上、祝が右下。塊の大きさを決めて絶対配置にすると、
     他の曜日（1 文字）と重心が揃い、列幅も食わない。 */
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.72em;
  line-height: 1;
  width: 2.2em;
  height: 2.1em;
}

.hours-table__day__diagonal > span {
  position: absolute;
}

/* 仕切りは文字ではなく線で引く。スラッシュの字は「3 つ目の文字」に読めてしまう
   （ユーザー指摘 2026-09-24）。線なら休診セルの対角線と同じ語彙になり、
   色も同じ罫線のトークンから引ける。角度は塊の対角（縦 2.1 / 横 2.2）に合わせる。 */
.hours-table__day__diagonal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6em;
  height: 1px;
  background-color: rgb(var(--hours-table-rule-rgb));
  transform: translate(-50%, -50%) rotate(-44deg);
}

.hours-table__day__diagonal > span:first-child {
  top: 0;
  left: 0;
}

.hours-table__day__diagonal > span:last-child {
  right: 0;
  bottom: 0;
}

.hours-table__time {
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 96px;
  padding-right: 10px;
}

.hours-table__open {
  color: rgb(var(--hours-table-open-rgb));
  font-size: 16px;
  line-height: 1;
}

.hours-table__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hours-table--closed {
  background-color: rgba(var(--hours-table-closed-surface-rgb), 0.55);
  color: rgb(var(--hours-table-heading-rgb));
}

/* 曜日を上、時間帯を下に積む（ユーザー指示 2026-09-24「上記は、ハンバーガーメニューと
   同じ、ラベルと診療時間を縦並びにして」）。全画面メニューの .sidebar-three__hours と
   同じ形。横並びだと曜日の列が max-content で広がり、狭い段では時間帯が入らなかった。 */
.hours-table__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgb(var(--hours-table-text-rgb));
  font-variant-numeric: tabular-nums;
}

/* 曜日は値の見出しなので、表の th と同じ扱い（見出し色）にし、太字で値と区別する。
   ユーザー指示 2026-09-24「診療時間のデザイン良いので、本文フッターもこの表記に
   あわせてください（曜日が太字になっている箇所）」。基準は全画面メニューの
   .sidebar-three__hours dt（font-weight 700 / 見出し色）。 */
/* 曜日の群は「始まり」を線で示す。太さだけで区別すると、読む側が行を数えることに
   なる（ユーザー指摘 2026-09-24）。行頭に細い横罫を置き、文字は中くらいの太さに戻す。 */
.hours-table__list dt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 500;
  /* 「ラベル＋罫線」の形はブランド色で揃える（ユーザー指示 2026-09-26）。
     区画のラベル・来院案内の群・フッターの見出しと同じ色になる。
     --hours-table-heading-rgb は表の列見出しにも使われているのでトークンは触らない。 */
  color: var(--amoxi-base-strong);
}

/* 罫は文字の後ろに置く。HERO の札（文字のあとに短い罫）と並びを揃えるため
   （ユーザー指示 2026-09-25「『柿生駅、北口徒歩3分 ー』ってなってるってことは、
   診療時間セクションの曜日別の表示のところも、同じにそろえたい」）。 */
.hours-table__list dt::after {
  /* 1 本線に戻す（ユーザー指示 2026-09-24）。二重線は一度試したが採らなかった。 */
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  /* 罫は字と同じ色（ユーザー指摘 2026-09-26「月・火・水・金 ブランドカラーに
     なってない」）。--hours-table-rule-rgb は表の罫（29・36・42・91・312 行）にも
     使われているので、トークンではなくここだけを字の色に追従させる。 */
  background-color: currentColor;
  opacity: 0.6;
}

.hours-table__list dd {
  margin: 0;
  /* 値は曜日より内側へ入れる。同じ左端に並ぶと、どこまでが 1 つの群なのかが
     読み取れない（ユーザー指摘 2026-09-25「診療時間の時間帯テキストなどは、
     これ、インデントしてくれ。見にくい」）。下げ幅は曜日の後ろの罫と同じ 28px に
     合わせ、この一覧の中で 1 つの寸法を使い回す。 */
  padding-left: 28px;
  /* 値（時間帯・休診の内容）は曜日（dt）より小さく、区画の本文より小さかった
     （14px、本文 16px。ユーザー指摘 2026-09-25「一番伝えなければいけないことが
     一番フォントサイズ小さいのがだめ」）。曜日より大きくし、本文以上にする。 */
  font-size: 16px;
}

td.hours-table--closed {
  /* 休みのセルは面 + 対角線（左上 → 右下。ユーザー決裁 2026-09-23）。背景で描くと border-collapse の表では
     セル幅に収まらず隣まで伸びるので、セルの中に置いた要素で描く。
     ::before はセルの箱に対して position: absolute で貼り、対角線を 1 本だけ引く。 */
  position: relative;
  padding: 0;
  background-color: rgba(var(--hours-table-closed-surface-rgb), 0.55);
}

td.hours-table--closed::before {
  /* 角から角へ 1 本。linear-gradient は「その角度の平行線の帯」なので、153x45 の
     横長のセルでは線が緩い角度で長く伸びて見える。セルの箱に合わせて伸ばせる SVG
     （preserveAspectRatio="none"）なら、幅と高さが変わっても必ず角から角へ引ける。 */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23c9c9cd' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media (max-width: 575px) {
  .hours-table {
    font-size: 13px;
  }

  /* 狭い画面では 8 列（時間 + 曜日 7）が 345px に収まらない。余白を詰め、
     時間の列の固定幅も下げる（2026-09-24 に実測。日・祝 の列が 15px はみ出していた）。
   */
  .hours-table th {
    padding: 8px 1px;
  }

  .hours-table td {
    padding: 8px 1px;
  }

  .hours-table__corner {
    width: 76px;
  }

  .hours-table__time {
    width: 76px;
    padding-right: 4px;
  }

  .hours-table__open {
    font-size: 15px;
  }

  .hours-table__list {
    font-size: 14px;
  }

  .hours-table__list dd {
    font-size: 16px;
  }
}

/* 広い画面では表と補記を横に並べる（ユーザー決裁 2026-09-23: 66.6 : 33.3）。
   表が主・補記が従なので、主に 2 倍の幅を与える。狭い画面では縦に積む
   （補記は表の下に付く従属情報なので、順序はそのまま）。

   横に並べるのは 992px 以上。2026-09-24 に一度 1200px へ上げたが、それは補記が
   「曜日の列 + 時間帯の列」の 2 列で、992〜1199px（.container 960px = 補記の列 297px）に
   必要な 314px が入らなかったため。**曜日を上に積む形に変えて必要な幅が
   最長の時間帯 204px だけになった**ので、992px に戻す。 */
.hours-table__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  /* 補記は表に従属する情報なので、表の最終行と底を揃える。上揃えだと
     補記だけが浮いて、独立した別の塊に見える（ユーザー指摘 2026-09-23）。 */
  align-items: end;
}

@media (min-width: 992px) {
  .hours-table__layout {
    /* 補記の列は「最も長い行が 1 行に収まる幅」で固定する。2fr/1fr だと
       1440 で列 377px に対し文字が 218px しか使わず右が 159px 空き、
       しかも最長の行（426px）は入らずに折れていた（2026-09-24 に実測）。
       固定にすると空きと折れが同時に消え、表は残りを使う。 */
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 40px;
    /* 横に並べるときは高さを揃える。表 138px に対し補記 203px で 65px 違っていた
       （2026-09-24 に実測）。固定値で足すと中身が変わるたびにずれるので、
       表を段の高さいっぱいに伸ばし、行に余りを分けさせる。 */
    align-items: stretch;
  }

  .hours-table__layout .hours-table {
    height: 100%;
  }

  .hours-table__layout .hours-table__list {
    margin-top: 0;
  }

  /* 補記を左、表を右にする並び。呼び出し側が印を付けたときだけ効く。
     列の幅は入れ替えるだけで、固定幅は補記の側に付いたままにする
     （補記は「最も長い行が 1 行に収まる幅」で決めてあり、表は残りを使う）。 */
  .hours-table__layout--notes-first {
    grid-template-columns: 460px minmax(0, 1fr);
  }

  .hours-table__layout--notes-first .hours-table {
    order: 2;
  }

  .hours-table__layout--notes-first .hours-table__list {
    order: 1;
  }
}

/* 曜日行の下線は「見出しと中身の境」で、行と行の区切り（1px 灰）とは役割が違う。
   同じ線だと、曜日行が 1 行目と同格に見える。太さと濃さを上げて段を分ける
   （ユーザー指摘 2026-09-23「曜日行（タイトル）の下線は、ほかと一緒だとわかりにくい」）。 */
.hours-table thead th,
.hours-table thead .hours-table__corner {
  /* 曜日行の下線は「見出しと中身の境」。行の区切り（1px の実線）とは語彙を変えて
     二重線にする（ユーザー指摘 2026-09-23）。太さは 3px 必要（border-style: double は
     線・空き・線の 3 分割なので、3px 未満だと 1 本に潰れる）。 */
  border-bottom-width: 3px;
  border-bottom-color: rgb(var(--hours-table-rule-rgb));
  border-bottom-style: double;
}

/* 表だけでは読み取れない 2 つの事実（受付の終わり・休診日）を表の下に添える。
   フッターのように補記の一覧を置かない場所で使う。 */
.hours-table__notes {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgb(var(--hours-table-text-rgb));
}

.hours-table__notes > span {
  display: block;
}

/* 時間帯は行の見出しだが、曜日の列見出しより強く出す必要はない。太字だと表の中で
   最も強い要素になる（ユーザー指摘 2026-09-24）。.hours-table th (0,1,1) に勝つため
   要素名を前置して (0,2,1) にする。 */
.hours-table th.hours-table__time {
  font-weight: 400;
}

/* 表が主役ではない置き場（全画面メニュー・フッター）の変種。行を高くして息を入れる。
   詰めて置くと、読む側が行を数えることになる（ユーザー指示 2026-09-24
   「診療時間表、縦への拡張ができてないね…もうすこし余裕もたせてよ」）。
   基底 .hours-table th (0,1,1) に勝つよう (0,2,1) で書く。 */
.hours-table--roomy th,
.hours-table--roomy td {
  padding-top: 20px;
  padding-bottom: 20px;
}

.hours-table--roomy + .hours-table__notes {
  margin-top: 18px;
}