@charset "utf-8";
/*
  シティヘブン 空き状況セクション（AVAILABILITY）
  既存の出勤情報（SCHEDULE）はそのまま残し、その下に追加する併記方式。
  配色・書体は既存 common.css に合わせている（濃紺 #0b384d / ゴールド #b49531）。

  枠の状態は2種類の見え方に集約している。
    ◎ … ご予約可能。タップでご予約フォームへ遷移する（リンク）
    × … ご予約済み、またはネット受付の締切後（TEL枠）
  ご予約が入っている時間が「埋まっている」と分かることを優先し、
  × は薄すぎない濃さで塗る。出勤時間の外は塗らず空欄にして区別する。
*/

/* このセクションはテーマの .pop_contents 配下に入る。
   .pop_contents p（font-size:14px / line-height:1.8）に負けないよう
   詳細度を合わせている（同点なら後から読むこちらが勝つ）。 */
/* 説明のリード文。2026-08-05 のご指定で現在は出力していないが、
   文章を戻すことになったときのために指定は残してある。 */
p.hv-lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #5b6b74;
}

/* --- 共通 --- */
.hv-block { margin-bottom: 50px; }
.hv-block * { box-sizing: border-box; }

.hv-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #5b6b74;
}
.hv-legend > span {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
}
/* 凡例の記号は、表の中とまったく同じ描き方（.hv-icn）を使う。
   ここでは箱の大きさだけ与える。 */
.hv-lg {
  flex: none;
  display: inline-block;
  width: 22px;
  height: 22px;
  font-style: normal;
}
/* 出勤時間外は表と同じく灰色地に「－」 */
.hv-lg.hv-dash-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #7b8a93;
  background: #eceff1;
  border: 1px solid #d5dce0;
}
.hv-upd { margin-left: auto; font-size: 12px; color: #7d8d96; }

/* 出勤の予定が無い週 */
table.hv-cal td.hv-emptyweek {
  padding: 30px 10px;
  font-size: 13px;
  font-weight: 400;
  color: #5b6b74;
  background: #fff;
}

/* 時刻・日付は等幅のライニング数字に揃える（既定の旧式数字だと読みにくいため） */
.hv-dnum,
.hv-cal th.hv-th-time,
.hv-tab-d,
.hv-chip {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* --- A案: 一覧表 ---------------------------------------------------------
   2026-08-05 クライアントご指定により、ホットペッパービューティーの
   予約カレンダーと同じ見た目に合わせている。
   数値は実画面から採取したもの（getComputedStyle の実測値）。
   採取結果は 案件資材/20260805_ホットペッパー参考/採取した仕様.md にまとめてある。

   書体だけはサイト（円環）のものを使う＝ font-family は指定しない。

   文字色は 2026-08-06 のご指摘（濃い色ばかりでごちゃついて見える）を受けて
   **3段階の濃淡**にしている。数がいちばん多い × と、左右2列ある時間の列を
   弱め、日付・年月と ◎（ご予約可能）を残すことで、見たいところに目が行くようにした。

     【濃】日付・年月バー・整え日     #0b384d   白地で 12.45:1／灰色地で 10.78:1
     【　】◎ ご予約可能             #cc4466   白地で  4.58:1
     【　】日付（土日）              #b55b5b   白地で  4.55:1
     【中】時間の列・凡例・週送り     #5b6b74   白地で  5.53:1
     【中弱】× ご予約済み             #6d7478   白地で  4.75:1
     【淡】－ 出勤時間外              #7b8a93   灰色地で 3.08:1

   太さも合わせて2軸で差を付けている（見出し＝太字／中身＝通常）。

   ※ × の #6d7478 は、2026-08-05 に「×が薄くて見づらい」とのご指摘を受けて
     採用した濃さと同じ値。それより薄くはしていない。

   配色は 2026-08-06 のご指定で「白ベース」に整理した。
   **灰色にするのは『－（出勤時間外）』と『整え日（お休み）』だけ**＝
   その日ご予約を受けていない時間。それ以外は白地にして、
   出勤している時間帯（◎ と ×）を白でひとまとまりに見せる。

     罫線                #d5dce0
     時間の列 背景       #fff
     日付の見出し        文字 #0b384d / 背景 #fff
     見出し（土・日）    文字 #b55b5b（赤字だけで区別・地は白）
     ◎ ご予約可能        #cc4466（二重丸）／ 背景 #fff
     × ご予約済み        文字 #0b384d / 背景 #fff
     － 出勤時間外        文字 #0b384d / 背景 #eceff1  ← 灰色
     整え日              文字 #0b384d / 背景 #eceff1  ← 灰色
-------------------------------------------------------------------------- */

/* 表示中の週だけ出す（JSが動かない場合は1週目が出る） */
.hv-week { display: none; }
.hv-week.is-active { display: block; }

.hv-tablewrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d5dce0;
}
table.hv-cal {
  width: 100%;
  /* 列幅を固定する。自動計算のままだと、出勤の予定が無い週は本文が空になるぶん
     列幅が変わってしまう（2026-08-06 ご指摘）。幅は colgroup で決める。 */
  table-layout: fixed;
  border-collapse: separate; /* sticky 列で罫線を保つため collapse にしない */
  border-spacing: 0;
  background: #fff;
}
/* 左右の端（時間の列／週送りのセル）の幅。日付の列は残りを均等に分け合う。
   パソコンはこのセルに「前の一週間 / 次の一週間」が入るので、その幅を確保する。 */
.hv-col-side { width: 100px; }
/* 中身は通常の太さ。太字は見出し（日付・年月）だけに残す。
   すべて太字だと全部が同じ強さで主張して詰まって見えるため（2026-08-06 ご指摘）。 */
table.hv-cal th,
table.hv-cal td {
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-right: 1px solid #d5dce0;
}
/* 表の右端は外枠があるので、行の最後のセルの右罫線は消す。
   ただし日付の行は最後のセルが「日付」で、その右に週送りのセル（2段結合）が
   続くため対象外にする（消すと境目の線が無くなる。2026-08-06 ご指摘）。 */
table.hv-cal tr:not(.hv-dayrow) > *:last-child { border-right: 0; }
/* 30分の行は細い罫線、正時の行は太い罫線（参考画面の timeSharpLine と同じ出し分け） */
table.hv-cal tbody tr > * { border-top: 1px solid #d5dce0; }
table.hv-cal tbody tr.is-hour > * { border-top: 2px solid #d5dce0; }
/* 本文の1行目は上罫線を出さない。見出し側が2pxの下罫線を持っているため、
   1行目が正時（2px）か否か（1px）、また出勤の予定が無い週かどうかで
   境目の線の太さが変わってしまう（2026-08-06 ご指摘）。 */
table.hv-cal tbody tr:first-child > * { border-top: 0; }

/* 見出し1行目 … 前の一週間 ／ 年月 ／ 次の一週間 */
tr.hv-navrow > th {
  height: 38px;
  padding: 0;
  color: #0b384d;
  background: #fff;
  border-right: 0;
}
.hv-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between; /* 左端に「前の一週間」、右端に「次の一週間」 */
  height: 38px;
}
/* 年月は独立した行にして、月ごとにその月の日付の上へ置く（2026-08-06 ご指定）。
   月をまたぐ週は「2026年8月」と「2026年9月」の2つに分かれる。 */
/* パソコンでは「前の週 / 次の週」を左右の端に置き、
   年月の段と日付の段の2段ぶんを結合する（2026-08-06 ご指定）。
   スマートフォンでは幅いっぱいの1段に置くので、こちらの行は隠す。 */
tr.hv-navrow { display: none; }
th.hv-side {
  width: 62px;
  min-width: 62px;
  padding: 0 4px;
  vertical-align: middle;
  background: #fff;
  border-right: 1px solid #d5dce0;
  /* 日付の行と同じ太さの下罫線。付けないと本文との境目の線が
     左右の端だけ細くなる（2026-08-06 ご指摘）。 */
  border-bottom: 2px solid #d5dce0;
}
/* 右端のセルは左罫線を持たない。持たせると年月のセルの右罫線と重なって
   左側（1px）より太くなる（2026-08-06 ご指摘）。 */
th.hv-side-next { border-right: 0; border-left: 0; }
tr.hv-monthrow > th.hv-monthcell {
  height: 30px;
  font-size: 12px;
  font-weight: 700;
  color: #0b384d;
  background: #fff;
}
.hv-weekbtn {
  flex: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #5b6b74;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
}
.hv-weekbtn:hover:not(:disabled) { text-decoration: underline; }
.hv-weekbtn:disabled { color: #9aa8b0; cursor: default; }


/* 見出し2行目 … 日付 */
tr.hv-dayrow > th {
  /* 「満」のスタンプ（.hv-dstamp）を重ねる土台。
     ※ここは `th` だけで指定すること。`th.hv-day` のように詳細度を上げると、
       スマートフォン側の `position: sticky`（下の @media）に打ち勝ってしまい、
       縦スクロール中に日付の行が本文の上へずれて出る（2026-08-08 ご指摘）。
       スマートフォンでは sticky が土台になるので、この指定は上書きされてよい。 */
  position: relative;
  /* 高さは固定。中身が変わっても列ごとに高さがずれないようにしている */
  height: 51px;
  padding: 5px 2px;
  /* 見出しの中身は日付だけ（満了は「満」のスタンプを重ねる形にしたため）。
     上端そろえだと下に空きが出るので中央に置く。 */
  vertical-align: middle;
  font-weight: 700; /* 見出しなので太字。中身（時間・記号）は通常の太さ */
  color: #0b384d;
  background: #fff;
  border-top: 1px solid #d5dce0;
  border-bottom: 2px solid #d5dce0;
}
/* 日付と曜日は1行に並べる（2026-08-06 ご指定）。
   年月が上のバーに出ているので、見出しは「7（金）」の1行で足りる。
   見出しが低くなるぶん、表の枠が見える範囲も広がる。 */
.hv-dnum { font-size: 12px; line-height: 1.4; }
.hv-dwd { font-size: 12px; line-height: 1.4; }
/* 日付の見出しは白地。土日は赤字だけで区別する（2026-08-06 ご指定）。
   ※祝日は判定に祝日データが要るため未対応 */
tr.hv-dayrow > th.sat,
tr.hv-dayrow > th.sun { color: #b55b5b; }

/* 時間の列 … 参考画面と同じく左右の両方に置く */
table.hv-cal th.hv-th-time {
  width: 62px;
  min-width: 62px;
  padding: 0 10px 0 0;
  /* 正時と30分で大きさを変えていたが、そろえるご指定（2026-08-06）。
     大きい方（13px）に統一している。 */
  font-size: 13px;
  text-align: right;
  color: #5b6b74;
  background: #fff;
}
table.hv-cal th.hv-th-corner { background: #fff; }
/* 左端の時間列だけは横スクロールしても残す（14日ぶんを横に送るため） */
table.hv-cal tbody th.hv-th-time:first-child,
table.hv-cal thead th.hv-th-time:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
table.hv-cal thead th.hv-th-time:first-child { z-index: 4; }

/* 枠 */
table.hv-cal td {
  width: 62px;
  min-width: 62px;
  height: 35px;
  background: #fff;
}
/* 2026-08-06 ご指定により、灰色にするのは
   「－（出勤時間外）」と「整え日（お休み）」＝**その日は受けていない時間**だけ。
   ◎ も × も白地にして、出勤している時間帯は白でひとまとまりに見せる。
   （ご予約済み .is-booked とTEL枠 .is-tel は同じ見た目のまま。
     内部の区別はクラス名として残してある） */
table.hv-cal td.closed { background: #eceff1; }
.hv-dash { color: #7b8a93; }

/* --- 記号 ---------------------------------------------------------------
   参考画面は ◎ と × を文字ではなくCSSで描いている（枠線の丸／回転させた棒）。
   同じ作りにして、文字自体は読み上げのために残したうえで画面外へ送る。 */
.hv-icn {
  position: relative;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  text-decoration: none;
}
/* 表の中ではセルいっぱいに広げる（どこを押しても反応するように） */
table.hv-cal .hv-icn { width: 100%; height: 100%; }
/* 凡例では22px角の箱として置く */
.hv-legend .hv-lg.hv-icn { width: 22px; height: 22px; }
.hv-icn::before,
.hv-icn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  margin: 0 auto;
}
/* ◎ … 二重丸 */
.hv-icn-open::before {
  top: 50%;
  width: 14px;
  height: 14px;
  border: 1px solid #cc4466;
  border-radius: 100px;
  transform: translateY(-8px);
}
.hv-icn-open::after {
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid #cc4466;
  border-radius: 100px;
  transform: translateY(-5px);
}
a.hv-icn-open:hover::before,
a.hv-icn-open:hover::after { background: rgba(204, 68, 102, 0.12); }
/* × … 10px の棒を2本、±45度で交差させる */
.hv-icn-close::before,
.hv-icn-close::after {
  top: 50%;
  width: 10px;
  height: 1px;
  background: #6d7478;
}
.hv-icn-close::before { transform: translateY(-50%) rotate(-45deg); }
.hv-icn-close::after { transform: translateY(-50%) rotate(45deg); }
/* TEL … 文字のまま見せる（TEL枠を残す設定のときだけ出る） */
.hv-icn-tel {
  text-indent: 0;
  color: #909000;
}
table.hv-cal .hv-icn-tel { line-height: 35px; }
.hv-legend .hv-icn-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  font-size: 11px;
  font-weight: 700;
}

/* お休みの日は縦につなげた1マスにして「整え日」と出す */
table.hv-cal td.hv-offday { background: #eceff1; }
.hv-offlabel {
  display: inline-block;
  /* 縦組み。Safari は 10.1（iOS 10.3）から接頭辞なしで効くが、
     それより古い版のために -webkit- も併記しておく。
     text-orientation は指定していない＝既定の mixed のまま。
     和文は既定で1文字ずつ縦に立つので、この3文字では指定が要らない
     （指定すると Safari 側で接頭辞が必要になるため、あえて使っていない）。 */
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 10px; /* 参考画面の休業日と同じ字間 */
  /* 列そのものの見出しにあたるので、日付と同じ濃紺で置く（2026-08-06 ご指定）。
     数が少ない（週に2〜6列）ため、濃くしても画面は詰まらない。
     数がいちばん多い × は中弱のままにして、そちらで軽さを保つ。 */
  color: #0b384d;
}

/* 読み上げ用の文字（画面には出さない）。
   テーマ側に定義が無くても確実に隠れるよう、ここでも持っている。 */
.hv-block .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 満了の日は、日付に丸い「満」のスタンプを重ねる（2026-08-08 クライアント確定）
   地は敷かず枠と文字だけなので、下の日付が透けて見える。 */
.hv-dstamp {
  position: absolute;
  /* 左右は日付の中央、上下は**日付の上側にかぶさる**位置（2026-08-08 クライアントご指定）。
     ※中央にぴったり重ねると日付と「満」が潰れて両方読めなくなるため、
       円の下半分だけが日付の上端にかかるところまで上げている。
       26% から 2px 下げたところが最終位置。 */
  top: calc(26% + 2px);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  /* 傾けない（2026-08-08 クライアントご指定）。中央に重ねるだけ。 */
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  /* 文字と枠はサイト共通のゴールド。地は敷かず、下の日付を透かす */
  color: #b49531;
  background: none;
  border: 1.5px solid #b49531;
  border-radius: 100px;
  /* 判子を薄く押した見え方。下の日付が読める濃さで止めている */
  opacity: 0.85;
  pointer-events: none;
}

/* --- B案: 日付リスト --- */
.hv-listwrap { border-top: 1px solid #d5dce0; }
.hv-listwrap dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  border-bottom: 1px solid #d5dce0;
}
.hv-listwrap dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 30%;
  padding: 15px 10px;
  font-size: 14px;
  text-align: center;
  background: #eceff1;
}
.hv-listwrap dt.sat { color: #3f87b5; }
.hv-listwrap dt.sun { color: #b55b5b; }
.hv-listwrap dd {
  width: 70%;
  margin: 0;
  padding: 13px 16px;
  font-size: 14px;
  background: #f3f5f6;
}

/* --- 時間チップ（B案・C案 共通） --- */
.hv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hv-chip {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 78px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: center;
  border: 1px solid transparent;
}
.hv-chip .hv-mk {
  font-size: 11px;
  font-style: normal;
}
/* ◎ … ご予約可能。タップでご予約フォームへ */
a.hv-chip.ok {
  color: #0b384d;
  text-decoration: none;
  background: #fff;
  border-color: #0b384d;
  transition: 0.15s;
}
a.hv-chip.ok:hover {
  color: #fff;
  background: #0b384d;
}
/* × … ご予約済み */
.hv-chip.no {
  color: #93a1a8;
  background: #e6ebee;
  border-color: #dde3e6;
}
.hv-chip.no .hv-mk { color: #aab5bb; }

/* △ … TEL枠を「お問い合わせにて承ります」として残す設定にしたときだけ使う
   （inc/heaven-availability.php の HEAVEN_AVAIL_TEL_AS_X を false にした場合） */
.hv-lg.tel { color: #8a7430; background: #f4f1e6; border-color: #e0d7bd; }
a.hv-chip.tel {
  color: #8a7430;
  text-decoration: none;
  background: #f9f6ec;
  border-color: #ddd2b2;
  transition: 0.15s;
}
a.hv-chip.tel:hover { color: #fff; background: #b49531; border-color: #b49531; }
table.hv-cal td.tel { color: #8a7430; background: #f9f6ec; }
table.hv-cal td.tel a.hv-o { color: #8a7430; }
table.hv-cal td.tel a.hv-o:hover { color: #fff; background: #b49531; }

/* --- C案: 日付タブ --- */
.hv-tabs {
  display: flex;
  overflow-x: auto;
  border: 1px solid #d5dce0;
  border-bottom: none;
}
.hv-tab {
  flex: 1 1 0;
  min-width: 58px;
  padding: 10px 2px 8px;
  font-family: inherit;
  color: #5b6b74;
  cursor: pointer;
  background: #f7f9fa;
  border: none;
  border-right: 1px solid #d5dce0;
}
.hv-tab:last-child { border-right: none; }
.hv-tab.is-active { color: #fff; background: #0b384d; }
.hv-tab-d { display: block; font-size: 15px; }
.hv-tab-w { display: block; margin-top: 1px; font-size: 11px; }
.hv-tab-w.sat { color: #3f87b5; }
.hv-tab-w.sun { color: #b55b5b; }
.hv-tab.is-active .hv-tab-w,
.hv-tab.is-active .hv-tab-w.sat,
.hv-tab.is-active .hv-tab-w.sun { color: #fff; opacity: 0.85; }
.hv-dot {
  display: block;
  width: 6px;
  height: 6px;
  margin: 5px auto 0;
  border-radius: 50%;
}
.hv-dot.has { background: #b49531; }
.hv-dot.none { background: transparent; }
.hv-tab.is-active .hv-dot.has { background: #e3c76a; }
.hv-body {
  padding: 22px;
  border: 1px solid #d5dce0;
}
.hv-panel { display: none; }
.hv-panel.is-active { display: block; }
.hv-empty {
  margin: 0;
  padding: 18px 0;
  font-size: 14px;
  line-height: 1.9;
  color: #a5aeb4;
  text-align: center;
}

/* --- 予約ボタン --- */
.hv-cta {
  margin-top: 22px;
  text-align: center;
}
.hv-btn {
  display: inline-block;
  min-width: 300px;
  padding: 15px 30px;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  background: #0b384d;
  transition: 0.3s;
}
.hv-btn:hover { background: #174256; }
.hv-btn small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.75;
}

/* --- 「満枠」と「お休み」の区別（重要）---------------------------------
   満枠 = 出勤しているが空きなし。お休み = そもそも出勤していない。
   意味がまったく違うため、必ず見分けがつくようにする。
   満枠の日も時間の枠は並べる（すべて×＝ご予約で埋まっている、と伝わる）。 */

/* B案: 満枠の日 */
.hv-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #fff;
  background: #b49531;
}
.hv-listwrap dl.is-full dt { background: #e4e8ea; }
.hv-listwrap dl.is-full dd { background: #f8fafa; }
.hv-full {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: #7b8990;
}

/* C案: 満枠のタブ・パネル */
.hv-dot.full { background: #b9c3c8; }
.hv-tab.is-active .hv-dot.full { background: rgba(255, 255, 255, 0.55); }
.hv-empty.is-full {
  padding: 0 0 14px;
  color: #7b8990;
}

/* --- ご予約ページ側（空き状況から引き継いだ内容の表示） --- */
.hv-prefill-notice {
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #0b384d;
  background: #f4f1e6;
  border-left: 3px solid #b49531;
}
/* contact.css の .formArea input[type="text"] より詳細度を上げる必要がある */
.formArea input[type="text"].hv-prefilled,
.formArea .hv-prefilled select,
.formArea .selectbtn.hv-prefilled select {
  background-color: #fdfaf0;
  border-color: #ddd2b2;
}

@media screen and (max-width: 750px) {
  .hv-upd { width: 100%; margin-left: 0; }
  .hv-legend { gap: 10px 14px; font-size: 12px; }

  /* スクロールできることを明示する（縦にも横にも動くため） */
  .hv-block .hv-scrollhint { display: block; }

  /* 縦に長くなりすぎるため、スクロールボックスに収める。
     基準は既存の出勤情報（common.css の .krc_calendar）の 314px。

     ただしこちらは見出し2行が常に上に貼り付いている（＝その高さぶん、
     枠が見える範囲が削られる）ため、箱を314pxにすると出勤情報より
     中身が3割ほど少なく見えてしまう。
     そこで **見出しの高さぶんを足して**、枠が並んで見える部分が
     出勤情報と同じ314pxになるようにしている。
     見出しの高さは画面幅で変わるため、JSが実測した --hv-head を使う
     （JSが動かない場合は、いちばん高いときの値）。
     +2px は上下の枠線ぶん（box-sizing: border-box のため）。 */
  .hv-tablewrap {
    height: calc(314px + 2px + var(--hv-head, 105px));
    overflow: auto;
  }
  /* 縦スクロール中も日付を見失わないよう、見出しの2行を上に固定する。
     2行目は1行目の高さぶん下げる。左端の時間列は左固定と併用するため
     重なり順を一段上げる。 */
  /* スマートフォンでは「前の週 / 次の週」を幅いっぱいの1段として上に置き、
     左右の端は空白のセルにする（2026-08-06 ご指定）。 */
  tr.hv-navrow { display: table-row; }
  th.hv-side .hv-weekbtn { display: none; } /* 左右の端は空白にする */
  th.hv-side { width: 46px; min-width: 46px; padding: 0; }
  .hv-nav { height: auto; }
  .hv-weekbtn { font-size: 13px; padding: 9px 8px; }
  tr.hv-monthrow > th.hv-monthcell { height: 26px; }
  /* 縦スクロール中も残す3段。位置はJSが実測した値で決める
     （週送りの段の高さ／年月の段まで含めた高さ）。 */
  tr.hv-navrow > th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: auto;
    /* 週送りの段の下に罫線（2026-08-06 ご指定）。
       年月のセル側の上罫線と重ねると中央だけ2pxになるため、そちらは外す。 */
    border-bottom: 1px solid #d5dce0;
  }
  tr.hv-monthrow > th.hv-monthcell { border-top: 0; }
  tr.hv-monthrow > th { position: sticky; top: var(--hv-nav, 36px); z-index: 3; }
  tr.hv-dayrow > th { position: sticky; top: var(--hv-nav2, 62px); z-index: 3; height: 48px; } /* 高さは固定（列ごとにずれないように） */
  table.hv-cal thead th.hv-th-time:first-child { z-index: 5; }

  /* お休みの1マスは表の高さぶん縦に伸びるため、中央寄せだと
     スクロール範囲の外に「整え日」が出てしまう。
     上寄せ＋sticky にして、縦スクロール中も見えるようにする。 */
  table.hv-cal td.hv-offday { vertical-align: top; padding: 10px 0; }
  /* 「整え日」は、スクロール中も見えるように上へ貼り付けている（sticky）。
     貼り付け位置を見出しのすぐ下にしていたため上寄せに見えていたので、
     **見えている範囲（見出しの下の314px）の中央**に来るようにした。

       見出しの高さ（--hv-head・JSが実測）
       ＋ (314px − ラベルの高さ54px) ÷ 2 = 130px

     これで、スクロールしていても常に枠の中央あたりに見える。
     ※パソコンは高さの制限が無いので sticky を使わず、セルの中央に置いている。 */
  .hv-offlabel {
    position: sticky;
    top: calc(var(--hv-head, 105px) + 130px);
    letter-spacing: 6px;
  }

  /* 1週間＝7列でも、時間の列が左右にあると幅が足りず横スクロールになる。
     スマートフォンでは右側の時間列だけ隠して、1画面に収める。
     （左の列は残るので時刻は追える） */
  /* 右端の列（時間の列／週送りのセル）はスマートフォンでは出さない。
     display:none で消すと、iPhone(Safari)で列の幅だけが残って
     右端に空白の帯が出ることがあったため、
     **セルは残したまま幅0にして中身を隠す**方式にしている（2026-08-07 ご指摘）。 */
  .hv-col-side { width: 46px; }
  .hv-col-side-right { width: 0; }
  table.hv-cal tr > .hv-th-time:last-child,
  th.hv-side-next {
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  /* 右端の罫線は「行の最後のセル」ではなく **右端の列** で判定する。
     スマートフォンは右の時間列をJSが取り除くため、行の最後のセル＝右端の列になるが、
     お休みの列（縦につないだ1マス）が右端にある週は、2行目以降でその左隣が
     行の最後になり、**境目の罫線まで消えてしまう**（2026-08-08 ご指摘）。
     いったん戻したうえで、目印を付けた右端の列だけ消す。 */
  table.hv-cal tbody tr > *:last-child:not(.hv-th-time) { border-right: 1px solid #d5dce0; }
  table.hv-cal tbody tr > *.hv-lastday:last-child,
  table.hv-cal tbody tr > td.hv-emptyweek:last-child { border-right: 0; }

  /* サイトの書体（Zen Old Mincho）は数字の幅が揃わないため、右揃えだと
     「14：00」と「14：30」で左端がずれて見える（2026-08-07 ご指摘）。
     左揃えにして、左端をぴったり合わせている。 */
  table.hv-cal th.hv-th-time {
    width: 44px;
    min-width: 44px;
    padding: 0;
    text-align: center; /* 文字の塊自体は中央に置く */
    font-size: 11px;
  }
  /* 文字は左揃えのまま、幅を固定した箱に入れて中央に配置する。
     こうすると左端がぴったり揃い、かつ左右の余白も同じになる。 */
  .hv-time-t {
    display: inline-block;
    width: 38px;
    text-align: left;
  }
  /* 7列＋時間列が主要な端末幅（360px以上）に収まるようにする。
     表は width:100% なので、幅に余裕がある端末では自動で広がる。 */
  table.hv-cal td { width: 33px; min-width: 33px; height: 32px; }
  /* 日付と曜日を1行にしたぶん、列に必要な幅が増える。
     スマートフォンで7列が収まるよう、ここだけ1px小さくしている。 */
  /* 11px だと 360px 幅の端末（Androidに多い）で7列が収まらないため 10px。
     日付と曜日を1行にしたぶん、列に必要な幅が増えている。 */
  .hv-dnum { font-size: 10px; }
  .hv-dwd { font-size: 10px; }
  /* 1行にしたぶん列に必要な幅が増えるので、見出しの左右の余白も詰める */
  tr.hv-dayrow > th { padding: 5px 1px; }
  .hv-monthcell { font-size: 11px; }
  /* 位置（日付の上側にかぶさる）はパソコンと同じ割合。
     列が37pxしか無いので大きさだけ詰める。 */
  .hv-dstamp {
    width: 18px;
    height: 18px;
    font-size: 9px;
    border-width: 1px;
    opacity: 0.95;
  }
  .hv-icn-tel { line-height: 32px; font-size: 11px; }

  .hv-listwrap dt { width: 32%; padding: 13px 6px; font-size: 13px; }
  .hv-listwrap dd { width: 68%; padding: 11px 10px; }
  .hv-chips { gap: 5px; }
  /* 3列そろえ。最終行が1個でも横に伸びないよう max-width で止める */
  .hv-chip {
    flex: 1 1 calc(33.33% - 4px);
    max-width: calc(33.33% - 4px);
    min-width: 0;
    padding: 6px 2px;
    font-size: 12px;
  }
  .hv-tab { flex: 0 0 58px; }
  .hv-body { padding: 16px 14px; }
  .hv-btn { width: 100%; min-width: 0; padding: 14px 16px; font-size: 14px; }
}