/* ============================================================
   access.css — アクセス・診療時間
   HIDAMARI DENTAL — DELTA アンカー（無彩色プレミアム）
   ============================================================ */

/* ============================ 基本情報 + 地図 ============================ */
.access-info__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.access-info__name { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; letter-spacing: 0.04em; margin-bottom: 8px; }
.access-info__director { font-size: 14px; color: var(--ink-2); margin-bottom: 28px; }
.access-info__list { border-top: 1px solid var(--line); margin-bottom: 30px; }
.access-info__list > div { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.access-info__list dt { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.access-info__list dd { font-size: 14px; line-height: 1.8; letter-spacing: 0.04em; }
.access-info__list dd a { border-bottom: 1px solid var(--line); }

.hours-table { width: 100%; font-size: 13px; border-top: 1px solid var(--line); }
.hours-table th, .hours-table td { padding: 10px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.hours-table th { font-family: var(--font-en); font-weight: 600; color: var(--ink-2); }
.hours-table td:first-child, .hours-table th:first-child { text-align: left; font-family: var(--font-en); white-space: nowrap; }
.hours-table .open { color: var(--ink); }
.hours-table .half { color: var(--ink-2); }
.hours-table .closed { color: var(--grey); }
.hours-note { font-size: 12px; line-height: 1.8; color: var(--ink-3); margin-top: 12px; }

.access-map { overflow: hidden; border-radius: 4px; border: 1px solid var(--line); }
.access-map__placeholder { position: relative; aspect-ratio: 4 / 3; }
.access-map__placeholder img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); }
.access-map__tag { position: absolute; top: 14px; left: 14px; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.1em; background: var(--bg); color: var(--ink); padding: 5px 12px; border-radius: 100px; }
.access-map__link { margin-top: 18px; }

/* ============================ 交通アクセス ============================ */
.directions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.direction-card { border: 1px solid var(--line); border-radius: 4px; padding: clamp(28px, 3vw, 40px); }
.direction-card__icon { display: block; width: 48px; height: 48px; color: var(--ink); margin-bottom: 22px; }
.direction-card__icon svg { width: 100%; height: 100%; }
.direction-card__title { font-size: 17px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 14px; }
.direction-card__lead { font-size: 14px; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 10px; }
.direction-card__desc { font-size: 13.5px; line-height: 1.9; letter-spacing: 0.03em; color: var(--ink-2); }
.direction-card__note { font-size: 12px; color: var(--ink-3); }

/* ============================ 初診の流れ（ダーク） ============================ */
.first-visit__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); counter-reset: fv; }
.first-visit__step { position: relative; padding-top: 22px; border-top: 1px solid var(--hair-dark); }
.first-visit__num { font-family: var(--font-en); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--on-dark-2); }
.first-visit__title { font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--on-dark); margin: 12px 0 10px; }
.first-visit__desc { font-size: 13px; line-height: 1.85; letter-spacing: 0.03em; color: var(--on-dark-2); }

/* ============================ 予約 ============================ */
.reserve__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.reserve__copy { font-size: clamp(22px, 3vw, 32px); font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; margin-bottom: 32px; }
.reserve__tel-label { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 6px; }
.reserve__tel { font-family: var(--font-en); font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: 0.02em; color: var(--ink); display: inline-block; }
.reserve__tel-note { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

.reserve__card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: clamp(28px, 3.5vw, 48px); }
.reserve__card-title { font-family: var(--font-en); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; margin-bottom: 26px; }
.reserve__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.reserve__field label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); }
.reserve__field input, .reserve__field select {
  width: 100%; padding: 13px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  font-size: 14px; color: var(--ink); transition: border-color 0.3s;
}
.reserve__field input:focus, .reserve__field select:focus { outline: none; border-color: var(--ink); }
.reserve__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reserve__submit {
  width: 100%; margin-top: 8px; padding: 16px; background: var(--ink); color: var(--bg);
  font-family: var(--font-en); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 100px; transition: background 0.4s var(--ease-out);
}
.reserve__submit:hover { background: var(--dark-2); }
.reserve__note { font-size: 11.5px; color: var(--ink-3); margin-top: 16px; text-align: center; }

/* ============================ デモモーダル ============================ */
.demo-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(17,17,17,0.55); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out); padding: 20px; }
.demo-modal.show { opacity: 1; pointer-events: auto; }
.demo-modal__content { background: var(--bg); border-radius: 8px; padding: clamp(36px, 5vw, 56px); max-width: 420px; text-align: center; }
.demo-modal__icon { display: inline-block; color: var(--ink); margin-bottom: 18px; }
.demo-modal__title { font-size: 20px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 14px; }
.demo-modal__desc { font-size: 14px; line-height: 1.9; color: var(--ink-2); margin-bottom: 28px; }
.demo-modal__btn { margin: 0 auto; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1023px) {
  .first-visit__steps { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
  .access-info__grid { grid-template-columns: 1fr; gap: 44px; }
  .directions__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .first-visit__steps { grid-template-columns: 1fr; }
  .reserve__grid { grid-template-columns: 1fr; gap: 44px; }
}