@charset "UTF-8";
/* ==========================================================================
  出勤情報ページのタイムスケジュール表
  縦＝30分刻みの時間 × 横＝セラピスト（出勤の早い順）
  ・人数が多い日も見切れないよう、表は枠の中でスクロールさせる
  ・時間の列（左）とセラピスト名の行（上）はスクロールしても残す
  ・◎ × の記号と凡例は heaven-availability.css のものを使う
  配色は空き状況カレンダーと同じ（濃紺 #0b384d・罫線 #d5dce0・時間外 #eceff1）
========================================================================== */

.st-block {
  margin: 0 0 50px;
}
/* トップページでは出勤カードの下に出す。カードとの間は、他の項目どうしの間（見出しの下の余白）と同じくらいにする */
.top-timetable .st-block {
  margin: 0;
}
/* 見出しは .midasi_02（common.css）に任せる。ここでは余白だけ */
.st-title.midasi_02 {
  margin-top: 30px;
}
/* トップページ: 出勤カードの一覧の下にすでに余白（PC 50px・SP 30px）があるので、
   カード→見出しが他の項目の間（約30px）と同じになるよう詰める */
.top-timetable .st-title.midasi_02 {
  margin-top: -20px;
}
@media screen and (max-width: 750px) {
  .top-timetable .st-title.midasi_02 {
    margin-top: 0;
  }
}
.st-block .hv-legend {
  margin-bottom: 10px;
}

/* --- スクロールする枠 ------------------------------------------------- */
.st-scroll {
  max-height: 640px;
  overflow: auto;
  border: 1px solid #d5dce0;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.st-scroll:focus-visible {
  outline: 2px solid #0b384d;
  outline-offset: 2px;
}

/* --- 表 --------------------------------------------------------------- */
table.st-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #0b384d;
  font-size: 13px;
}
table.st-table th,
table.st-table td {
  padding: 0;
  border-right: 1px solid #d5dce0;
  border-bottom: 1px solid #d5dce0;
  text-align: center;
  vertical-align: middle;
}
table.st-table tr > *:last-child {
  border-right: 0;
}
table.st-table tbody tr.is-hour > * {
  border-top: 1px solid #b8c3ca;
}
table.st-table tbody tr:first-child > * {
  border-top: 0;
}

/* 列幅。人数が少ない日は枠いっぱいに広げ、多い日は1列を最小幅で並べて横にスクロールする */
table.st-table th.st-corner,
table.st-table th.st-t {
  width: 64px;
}
table.st-table th.st-cast {
  width: 104px;
}
table.st-table {
  min-width: calc(64px + var(--st-min-cols, 0) * 104px);
}

/* 左上の角・時間の列・セラピストの行はスクロールしても残す */
table.st-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 2px solid #0b384d;
}
table.st-table th.st-t,
table.st-table th.st-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f7f8f9;
  border-right: 2px solid #d5dce0;
}
table.st-table thead th.st-corner {
  z-index: 3;
  background: #fff;
}

/* --- セラピストの見出し ---------------------------------------------- */
table.st-table th.st-cast {
  border-top: 4px solid #0b384d;
}
table.st-table th.st-cast.region--tokyo    { border-top-color: #365370; }
table.st-table th.st-cast.region--yokohama { border-top-color: #5c3d6b; }
table.st-table th.st-cast.region--osaka    { border-top-color: #802a33; }
table.st-table th.st-cast.region--shizuoka { border-top-color: #5a664e; }

/* 中身を上ぞろえにし、店舗・名前・時間・満了の段を横一列にそろえる */
table.st-table thead th {
  vertical-align: top;
}
table.st-table th.st-cast a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 8px 4px 7px;
  color: inherit;
  text-decoration: none;
}
table.st-table th.st-cast a:hover {
  opacity: 0.7;
}
.st-store {
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #fff;
  background: #0b384d;
}
.region--tokyo .st-store    { background: #365370; }
.region--yokohama .st-store { background: #5c3d6b; }
.region--osaka .st-store    { background: #802a33; }
.region--shizuoka .st-store { background: #5a664e; }
.st-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.st-time {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: #5b6b74;
  white-space: nowrap;
}
.st-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
}
.st-full {
  padding: 0 6px;
  font-size: 11px;
  line-height: 1.6;
  color: #fff;
  background: #cc4466;
  border-radius: 10px;
}

/* --- 時間の列 -------------------------------------------------------- */
/* 正時と30分は同じ大きさ・色（セラピストページのカレンダーと同じ。2026-09-29 別所様ご依頼） */
table.st-table th.st-t {
  font-weight: 400;
  font-size: 13px;
  color: #5b6b74;
  white-space: nowrap;
}

/* --- マス ------------------------------------------------------------ */
table.st-table tbody td,
table.st-table tbody th {
  height: 34px;
}
table.st-table td.st-out {
  background: #eceff1;
}
table.st-table td.st-in {
  background: #fff;
}
table.st-table td.st-work {
  background: #f3f6f8;
}
table.st-table td .hv-icn {
  width: 100%;
  height: 34px;
}
table.st-table td.ok {
  background: #fff;
}
table.st-table td.ok:hover {
  background: #fbeef2;
}

/* --- リクエスト出勤の列（ALL タブで、その日に出勤の無い店舗） --------------- */
table.st-table th.st-req a {
  color: #5b6b74;
}
table.st-table th.st-req .st-name {
  font-size: 12px;
  font-weight: 400;
}
table.st-table td.st-req-cell {
  vertical-align: top;
  background: repeating-linear-gradient(135deg, #f7f8f9 0 8px, #eef1f3 8px 16px);
}
/* 表の枠の縦の真ん中に置く（スクロールしても真ん中に残る）。
   sticky の top の % はスクロール枠の高さが基準なので、50% ＋自身の半分戻しで中央になる。
   上の見出しの行（約115px）を除いた、時間のマスの部分の真ん中に合わせるため、その半分だけ下げる */
table.st-table td.st-req-cell a {
  position: sticky;
  top: calc(50% + 58px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 4px;
  font-size: 12px;
  line-height: 1.6;
  color: #0b384d;
  text-decoration: none;
  white-space: nowrap;
}
table.st-table td.st-req-cell .st-req-go {
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #fff;
  background: #0b384d;
}
table.st-table td.st-req-cell a:hover {
  opacity: 0.75;
}

/* 今の時刻の行。満了（ピンク）と見分けがつくよう青にする（2026-09-29 別所様ご依頼） */
table.st-table tr.is-now th.st-t {
  color: #fff;
  background: #2f6fae;
}

.st-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #7b8a93;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .st-scroll {
    max-height: 70vh;
  }
  table.st-table th.st-corner,
  table.st-table th.st-t {
    width: 48px;
  }
  table.st-table th.st-cast {
    width: 76px;
  }
  table.st-table {
    min-width: calc(48px + var(--st-min-cols, 0) * 76px);
  }
  table.st-table th.st-cast a {
    padding: 6px 2px;
  }
  .st-name {
    font-size: 12px;
  }
  .st-time,
  .st-store,
  .st-full {
    font-size: 10px;
  }
  table.st-table th.st-t {
    font-size: 11px;
  }
  table.st-table tbody td,
  table.st-table tbody th,
  table.st-table td .hv-icn {
    height: 30px;
  }
}

/* --- セラピストのダイアログ（列見出しを押すと開く） ------------------- */
html.st-dialog-open {
  overflow: hidden;
}
/* パソコンでは、スクロールバーが消えたぶん後ろのページが横にずれないよう、幅を残す
   （スマートフォンのスクロールバーは幅を取らないので不要。残すとダイアログが狭くなる） */
@media screen and (min-width: 768px) {
  html.st-dialog-open {
    scrollbar-gutter: stable;
  }
}
.st-dlg-label span {
  display: inline-block;
}
.st-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  border-top: 5px solid #0b384d;
  color: #0b384d;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: auto;
}
.st-dialog.region--tokyo    { border-top-color: #365370; }
.st-dialog.region--yokohama { border-top-color: #5c3d6b; }
.st-dialog.region--osaka    { border-top-color: #802a33; }
.st-dialog.region--shizuoka { border-top-color: #5a664e; }
.st-dialog::backdrop {
  background: rgba(11, 56, 77, 0.55);
}
.st-dlg-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: #5b6b74;
  cursor: pointer;
}
.st-dlg-close:focus {
  outline: none;
}
.st-dlg-close:focus-visible {
  outline: 2px solid #0b384d;
  outline-offset: -4px;
}
.st-dlg-work span {
  display: inline-block;
  white-space: nowrap;
}
.st-dlg-body {
  display: flex;
  gap: 20px;
  padding: 28px 24px 16px;
}
.st-dlg-photo {
  flex: 0 0 190px;
  /* スライダー（Swiper）が測った幅で箱が広がり続けないよう、最小幅を 0 にする */
  min-width: 0;
  overflow: hidden;
}
.st-dlg-photo img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* 写真のスライド（2枚以上のとき）。矢印と丸はセラピストページと同じ色（common.css）で、小さめにする */
.st-dlg-slider {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.st-dlg-slider img {
  box-shadow: none;
}
.st-dlg-slider .swiper-button-prev,
.st-dlg-slider .swiper-button-next {
  width: 28px;
  height: 40px;
  margin-top: -20px;
}
.st-dlg-slider .swiper-button-prev::after,
.st-dlg-slider .swiper-button-next::after {
  font-size: 20px;
}
.st-dlg-slider .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
}
.st-dlg-info {
  flex: 1 1 auto;
  min-width: 0;
}
.st-dlg-name {
  margin: 10px 0 6px;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.st-dlg-age {
  margin-left: 8px;
  font-size: 14px;
  color: #5b6b74;
}
/* 字の間隔が狭いとのご指摘（2026-09-29）。行の高さ・字間・項目どうしの余白を広げる。
   サイト全体の行の高さが詰まっているため、ダイアログの中では明示する */
.st-dialog {
  line-height: 1.8;
  letter-spacing: 0.04em;
  line-break: strict;
}
.st-dlg-spec,
.st-dlg-work {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.8;
  color: #5b6b74;
}
.st-dlg-work {
  margin-bottom: 0;
}
.st-dlg-work span {
  margin-left: 0.5em;
  font-size: 15px;
  color: #0b384d;
}
.st-dlg-label {
  margin: 20px 0 10px;
  padding-top: 16px;
  border-top: 1px solid #e3e8eb;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.st-dlg-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-dlg-times a {
  display: block;
  min-width: 64px;
  padding: 7px 8px;
  border: 1px solid #cc4466;
  font-size: 14px;
  line-height: 1;
  color: #cc4466;
  text-align: center;
  text-decoration: none;
}
.st-dlg-times a:hover {
  background: #fbeef2;
}
.st-dlg-none {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #5b6b74;
}
.st-dlg-btns {
  display: flex;
  gap: 10px;
  padding: 0 24px 24px;
}
.st-dlg-btn {
  flex: 1 1 0;
  padding: 14px 8px;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  background: #0b384d;
  text-align: center;
  text-decoration: none;
}
.st-dlg-btn.is-sub {
  color: #0b384d;
  background: #fff;
  border: 1px solid #0b384d;
}
.st-dlg-btn:hover {
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .st-dlg-body {
    gap: 14px;
    padding: 24px 16px 14px;
  }
  .st-dlg-photo {
    flex-basis: 38%;
  }
  .st-dlg-name {
    font-size: 18px;
  }
  /* 「時間」だけが次の行に落ちないよう、字間を詰めずに少し小さくする */
  .st-dlg-label {
    font-size: 12px;
    letter-spacing: 0;
  }
  .st-dlg-times a {
    min-width: 58px;
    font-size: 13px;
  }
  .st-dlg-btns {
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 18px;
  }
  .st-dlg-btn {
    font-size: 14px;
  }
}