/* ==========================================================
   事業所概要（office.php）
   ========================================================== */

/* ---------- 事業所情報 ---------- */
.ssg-oinfo { position: relative; z-index: 2; padding: 64px 20px 24px; }
.ssg-oinfo__inner { max-width: 1040px; margin: 0 auto; }
.ssg-oinfo__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); margin-bottom: 32px; }
.ssg-oinfo__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(16px, 3vw, 32px); display: block; }
.ssg-oinfo__box { padding: clamp(20px, 3vw, 40px); }
.ssg-otable { width: 100%; border-collapse: collapse; font-size: 18px; }
.ssg-otable th {
  text-align: left;
  vertical-align: top;
  width: 30%;
  padding: 18px 16px;
  color: var(--ssg-deep);
  font-weight: 700;
  border-bottom: 1px dashed var(--ssg-line);
}
.ssg-otable td { padding: 18px 16px; border-bottom: 1px dashed var(--ssg-line); }
.ssg-otable__line { display: block; }
.ssg-otable .ssg-dots { gap: 0; }
@media (max-width: 767px) {
  .ssg-oinfo__photos { margin-bottom: 20px; }
  .ssg-otable, .ssg-otable tbody, .ssg-otable tr, .ssg-otable th, .ssg-otable td { display: block; }
  .ssg-otable th { width: auto; padding: 16px 4px 2px; border-bottom: 0; }
  .ssg-otable td { padding: 0 4px 16px; }
}

/* ---------- アクセスマップ ---------- */
.ssg-oaccess { padding: clamp(8px, 1.4vw, 20px) 20px clamp(24px, 3vw, 40px); }
.ssg-oaccess__inner { max-width: 1040px; margin: 0 auto; }
.ssg-oaccess__map { display: block; width: 100%; height: clamp(280px, 40vw, 420px); border: 0; border-radius: 24px; box-shadow: var(--ssg-shadow); }

/* ---------- ご利用料金 ---------- */
.ssg-ofee { padding: 0 20px 104px; }
.ssg-ofee__inner { max-width: 1040px; margin: 0 auto; }
.ssg-ofee .ssg-head { margin-bottom: 48px; }
.ssg-ofee__date { margin: 12px 0 0; display: inline-block; font-size: 16px; font-weight: 700; color: var(--ssg-deep); border: 2px solid var(--ssg-deep); border-radius: 999px; padding: 2px 16px; }
.ssg-ofee__scroll { overflow-x: auto; border-radius: 24px; background: #fff; margin-bottom: 14px; box-shadow: var(--ssg-shadow); }
.ssg-ftable { width: 100%; min-width: 640px; border-collapse: collapse; text-align: center; }
.ssg-ftable--sm { min-width: 480px; }
.ssg-ftable thead tr { background: var(--ssg-deep); color: #fff; }
.ssg-ftable thead th { padding: 14px; font-weight: 700; }
.ssg-ftable thead .ssg-ftable__hour { padding: 12px 8px; line-height: 1.5; font-size: 16px; }
.ssg-ftable__hour span { display: block; }
.ssg-ftable tbody th, .ssg-ftable tbody td { padding: 14px; height: 62px; border-bottom: 1px solid #EAF5DC; }
.ssg-ftable tbody th { color: var(--ssg-deep); font-weight: 700; }
.ssg-ftable tbody tr:last-child th, .ssg-ftable tbody tr:last-child td { border-bottom: 0; }
.ssg-ofee__notes { margin: 0 0 56px; padding-left: 1.2em; font-size: 17px; list-style: disc; }
.ssg-ofee__common { border-radius: 24px; padding: 24px 32px; display: grid; gap: 10px; }
.ssg-ofee__row { display: flex; gap: 4px 24px; }
.ssg-ofee__row + .ssg-ofee__row { padding-top: 10px; border-top: 1px solid #EAF5DC; }
.ssg-ofee__lbl { flex-shrink: 0; font-weight: 700; color: var(--ssg-deep); min-width: 4.5em; }
.ssg-ofee__row > span:last-child { min-width: 0; }
.ssg-ofee__small { font-size: .8em; } /* 「共通（…）」の括弧内はPCでも少し小さく */
@media (max-width: 767px) {
  .ssg-ofee__small { display: inline-block; font-size: 16px; }
  .ssg-ofee__common { padding: 20px 22px; }
}
/* 注記は行末に1文字だけ残らないよう折り返しを整える */
.ssg-ofee__notes li { text-wrap: pretty; word-break: auto-phrase; }