/* ========================================
   Table system
   表デザイン共通設定
======================================== */
:root {
  --table-border: #dfe7ed;
  --table-head-bg: #f2f5f7;
  --table-row-head-bg: #f7f9fa;
  --table-alt-bg: #fafafa;
  --table-closed-bg: #f1f3f5;
  --table-head-text: #2f4f5f;
  --table-muted-text: #8a949c;
}

/* ========================================
   Common table base
======================================== */
.c-table-wrap,
.p-reception-table-wrap,
.p-schedule-table-wrap,
.p-doctor-schedule-wrap,
.p-monthly-doctor-table-wrap,
.c-horizontal-scroll {
  position: relative;
  margin-top: 18px;
}

.c-table-wrap,
.p-reception-table-wrap,
.p-doctor-schedule-wrap,
.p-monthly-doctor-table-wrap,
.c-horizontal-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.c-table,
.p-reception-table,
.p-schedule-table,
.p-doctor-schedule,
.p-monthly-doctor-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--table-border);
  background: #fff;
}

.c-table caption,
.p-reception-table caption,
.p-schedule-table caption,
.p-schedule-table__caption,
.p-doctor-schedule caption,
.p-monthly-doctor-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.c-table th,
.c-table td,
.p-reception-table th,
.p-reception-table td,
.p-schedule-table th,
.p-schedule-table td,
.p-doctor-schedule th,
.p-doctor-schedule td,
.p-monthly-doctor-table th,
.p-monthly-doctor-table td {
  border-right: 1px solid var(--table-border);
  border-bottom: 1px solid var(--table-border);
  vertical-align: middle;
}

.c-table tr > *:last-child,
.p-reception-table tr > *:last-child,
.p-schedule-table tr > *:last-child,
.p-doctor-schedule tr > *:last-child,
.p-monthly-doctor-table tr > *:last-child {
  border-right: 0;
}

.c-table tbody tr:last-child > *,
.p-reception-table tbody tr:last-child > *,
.p-schedule-table tbody tr:last-child > *,
.p-doctor-schedule tbody tr:last-child > *,
.p-monthly-doctor-table tbody tr:last-child > * {
  border-bottom: 0;
}

.c-table thead th,
.p-reception-table thead th,
.p-schedule-table thead th,
.p-doctor-schedule thead th,
.p-monthly-doctor-table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: 800;
}

.c-table tbody th,
.p-reception-table tbody th,
.p-schedule-table tbody th,
.p-doctor-schedule tbody th,
.p-monthly-doctor-table tbody th {
  background: var(--table-row-head-bg);
  color: var(--table-head-text);
  font-weight: 800;
}

.c-table tbody td,
.p-reception-table tbody td,
.p-schedule-table tbody td,
.p-doctor-schedule tbody td,
.p-monthly-doctor-table tbody td {
  background: #fff;
  color: var(--color-text);
}

.c-table tbody tr:nth-child(even) td,
.p-reception-table tbody tr:nth-child(even) td,
.p-schedule-table tbody tr:nth-child(even) td,
.p-doctor-schedule tbody tr:nth-child(even) td,
.p-monthly-doctor-table tbody tr:nth-child(even) td {
  background: var(--table-alt-bg);
}

.is-closed,
.p-schedule-table .is-closed,
.p-doctor-schedule .is-closed,
.p-monthly-doctor-table .is-closed {
  background: var(--table-closed-bg) !important;
  color: var(--table-muted-text);
}

/* ========================================
   1. General table
   その他表・本文内の普通の表
======================================== */
.c-table {
  min-width: 520px;
}

.c-table th,
.c-table td {
  padding: 16px 18px;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}

  .c-table tbody th {
    width: 22%;
    min-width: 78px;
  }

  .c-table tbody td {
    width: 78%;
  }

.c-table--compact th,
.c-table--compact td {
  padding: 13px 15px;
}

.c-table--center th,
.c-table--center td {
  text-align: center;
  vertical-align: middle;
}

.c-table__note {
  color: var(--color-text-light);
  font-size: 0.9em;
}

/* ========================================
   2. Reception table
   窓口受付時間表・休診日
======================================== */
.p-reception-table {
  min-width: 0;
}

.p-reception-table th,
.p-reception-table td {
  padding: 15px 18px;
  line-height: 1.8;
  text-align: left;
}

.p-reception-table tbody th {
  width: 26%;
  white-space: nowrap;
}

.p-reception-table__note {
  display: inline-block;
  margin-top: 4px;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* ========================================
   3. Schedule table
   診療時間表
======================================== */
.p-schedule-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-schedule-table {
  min-width: 720px;
}

.p-schedule-table th,
.p-schedule-table td {
  padding: 16px 10px;
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.55;
}

.p-schedule-table tbody td {
  font-weight: 700;
}

/* PC：外来・内科・訪問を文字で表示 */
.p-schedule-mark,
.p-schedule-mark-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0;
  font-weight: 800;
  line-height: 1;
}

.p-schedule-mark--dot {
  background: var(--color-main);
  color: #fff;
}

.p-schedule-mark--dot::before {
  content: "外来";
  font-size: 0.82rem;
}

.p-schedule-mark--double {
  border: 1px solid var(--color-main);
  background: #fff;
  color: var(--color-main);
}

.p-schedule-mark--double::before {
  content: "内科";
  font-size: 0.82rem;
}

.p-schedule-mark-text {
  background: #eef2f5;
  color: #4f5a67;
}

.p-schedule-mark-text::before {
  content: "訪問";
  font-size: 0.82rem;
}

/* ========================================
   4. Doctor schedule
   担当医表
======================================== */
.p-doctor-schedule {
  min-width: 860px;
}

.p-doctor-schedule th,
.p-doctor-schedule td {
  padding: 16px 10px;
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.55;
}

.p-doctor-schedule small {
  display: inline-block;
  margin-top: 3px;
  color: var(--color-text-light);
  font-size: 0.8rem;
  line-height: 1.4;
}

.p-doctor-schedule__stack {
  display: grid;
  gap: 4px;
  line-height: 1.45;
}

.p-doctor-schedule__stack span {
  color: var(--color-text-light);
  font-size: 0.78rem;
}

.p-doctor-schedule__stack strong {
  color: var(--color-text);
  font-size: 0.96rem;
}

/* ========================================
   5. Monthly doctor table
   休日診療担当医表・毎月更新
======================================== */
.p-monthly-doctor-table {
  min-width: 0;
}

.p-monthly-doctor-table th,
.p-monthly-doctor-table td {
  padding: 14px 16px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.7;
}

.p-monthly-doctor-table tbody th {
  width: 24%;
  white-space: nowrap;
}

.p-monthly-doctor-table small {
  display: inline-block;
  margin-top: 3px;
  color: var(--color-text-light);
  font-size: 0.8rem;
}

/* ========================================
   Scroll hint
======================================== */
.c-scroll-hint,
.p-doctor-scroll-hint {
  display: none;
}

@media (max-width: 900px) {
  .c-scroll-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 156px;
    min-height: 94px;
    padding: 14px 12px;
    border-radius: 14px;
    background: rgba(24, 52, 77, 0.28);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }

  .c-scroll-hint::before {
    content: "☝";
    display: block;
    margin-bottom: 8px;
    font-size: 2rem;
    line-height: 1;
    animation: cScrollHintHand 1.2s ease-in-out infinite;
  }

  .c-scroll-hint.is-hidden {
    opacity: 0;
    visibility: hidden;
  }

  .p-doctor-scroll-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 148px;
    height: 92px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: doctorScrollHintFade 3.6s ease forwards;
  }

  .p-doctor-scroll-hint__icon {
    display: block;
    font-size: 2rem;
    line-height: 1;
  }

  .p-doctor-scroll-hint__text {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
  }
}

@keyframes cScrollHintHand {
  0%,
  100% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(7px);
  }
}

@keyframes doctorScrollHintFade {
  0% {
    opacity: 0;
  }

  12%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ========================================
   Schedule guide
   診療時間表の凡例
======================================== */
.p-schedule-guide {
  margin-top: 14px;
}

.p-schedule-guide__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-schedule-guide__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.6;
}

.p-schedule-guide__list li::before {
  content: none;
}

.p-schedule-guide__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 48px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.p-schedule-guide__label--outpatient {
  background: var(--color-main);
  color: #fff;
}

.p-schedule-guide__label--internal {
  border: 1px solid var(--color-main);
  background: #fff;
  color: var(--color-main);
}

.p-schedule-guide__label--visit {
  background: #eef2f5;
  color: #4f5a67;
}

/* ========================================
   Mobile
======================================== */
@media (max-width: 767px) {
  .c-table th,
  .c-table td,
  .p-reception-table th,
  .p-reception-table td,
  .p-monthly-doctor-table th,
  .p-monthly-doctor-table td {
    padding: 13px 12px;
    font-size: 0.9rem;
  }

  .c-table {
    min-width: 0;
    table-layout: fixed;
  }

  .c-table th,
  .c-table td {
    padding: 13px 12px;
    word-break: break-word;
  }

  .c-table tbody th {
    width: 32%;
  }

  .p-reception-table {
    min-width: 0;
  }

  .p-reception-table tbody th {
    width: 34%;
  }

  /* 診療時間表だけ横スクロール無し */
  .p-schedule-table-wrap {
    overflow-x: visible;
  }

  .p-schedule-table {
    min-width: 0;
    table-layout: fixed;
    font-size: 0.78rem;
  }

  .p-schedule-table th,
  .p-schedule-table td {
    padding: 11px 3px;
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .p-schedule-table thead th:first-child,
  .p-schedule-table tbody th {
    width: 25%;
  }

  .p-schedule-table thead th:not(:first-child),
  .p-schedule-table tbody td {
    width: calc(75% / 7);
  }

  .p-schedule-table tbody th {
    font-size: 0.72rem;
    letter-spacing: 0;
  }

  .p-schedule-table tbody td {
    font-size: 0;
  }

  .p-schedule-table .is-closed {
    font-size: 0.9rem;
  }

  .p-schedule-mark,
  .p-schedule-mark-text {
    min-width: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  .p-schedule-mark--dot::before,
  .p-schedule-mark--double::before,
  .p-schedule-mark-text::before {
    content: "";
    font-size: 0;
  }

  .p-schedule-mark--dot {
    border: 2px solid var(--color-main);
    background: var(--color-main);
  }

  .p-schedule-mark--double {
    border: 2px solid var(--color-main);
    background: #fff;
  }

  .p-schedule-mark-text {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #4f5a67;
    font-size: 1rem;
    font-weight: 800;
  }

  .p-schedule-mark-text::before {
    content: "訪";
    font-size: 1rem;
  }

  .p-schedule-table-wrap .c-scroll-hint {
    display: none !important;
  }

  /* 担当医表は横スクロール維持 */
  .p-doctor-schedule {
    min-width: 860px;
  }

  .p-doctor-schedule th,
  .p-doctor-schedule td {
    padding: 14px 8px;
    font-size: 0.88rem;
  }

  /* 休日診療担当医表はスマホでも収める */
  .p-monthly-doctor-table {
    min-width: 0;
  }

  .p-monthly-doctor-table tbody th {
    width: 30%;
  }

  /* 凡例も表と同じ記号にする */
  .p-schedule-guide {
    margin-top: 12px;
  }

  .p-schedule-guide__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .p-schedule-guide__list li {
    gap: 9px;
    font-size: 0.84rem;
  }

  .p-schedule-guide__label {
    min-width: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0;
  }

  .p-schedule-guide__label--outpatient {
    border: 2px solid var(--color-main);
    background: var(--color-main);
  }

  .p-schedule-guide__label--internal {
    border: 2px solid var(--color-main);
    background: #fff;
  }

  .p-schedule-guide__label--visit {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: #4f5a67;
    font-size: 0;
  }

  .p-schedule-guide__label--visit::before {
    content: "訪";
    font-size: 1rem;
    font-weight: 800;
  }
}
.p-reception-time {
  font-size: 0.95rem;
  line-height: 1.7;
}

.p-reception-time__row {
  display: flex;
  gap: 12px;
}

.p-reception-time__row + .p-reception-time__row {
  margin-top: 6px;
}

.p-reception-time__label {
  flex: 0 0 80px;
  font-weight: 700;
  color: var(--color-main);
}

.p-reception-time__value {
  flex: 1;
}

/* スマホ */
@media (max-width: 767px) {
  .p-reception-time__row {
    flex-direction: column;
    gap: 2px;
  }

  .p-reception-time__label {
    flex: none;
    font-size: 0.8rem;
  }

  .p-reception-time__value {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .p-news-single__body table {
    table-layout: fixed;
    min-width: 0;
  }

  .p-news-single__body th,
  .p-news-single__body td {
    padding: 12px 4px;
    font-size: 0.86rem;
    line-height: 1.55;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* 月日 */
  .p-news-single__body th:nth-child(1),
  .p-news-single__body td:nth-child(1) {
    width: 20%;
  }

  /* 曜日 */
  .p-news-single__body th:nth-child(2),
  .p-news-single__body td:nth-child(2) {
    width: 10%;
  }

  /* 担当医師 */
  .p-news-single__body th:nth-child(3),
  .p-news-single__body td:nth-child(3) {
    width: 28%;
  }

  /* 医療機関 */
  .p-news-single__body th:nth-child(4),
  .p-news-single__body td:nth-child(4) {
    width: 42%;
  }
}