@charset "UTF-8";
/* ══ アクセス（周辺ホテル）ページ ══
   front/templates/default/area.html だけが読み込む。
   他のページには影響しない。

   色は front.css の変数から取っているので、店舗の custom.css で
   :root の --color-* を差し替えれば、このページも一緒に変わる。
   個別に直したいときだけ .f-ac-* を上書きする。 */

/* ── 地図 ─────────────────────────────────
   iframe は高さを持たないので、比率で箱を作ってその中に敷く。
   直接 height を指定すると、スマホで縦長すぎたり潰れたりする。 */
.f-ac-map{
  position:relative;width:100%;max-width:900px;aspect-ratio:16/9;max-height:360px;
  border:1px solid var(--color-border);border-radius:var(--radius);
  overflow:hidden;background:#eee;margin:0 auto 16px;
}
.f-ac-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:600px){ .f-ac-map{aspect-ratio:4/3} }

/* ── 住所と案内文 ─────────────────────── */
.f-ac-info{
  background:var(--color-bg-card);border:1px solid var(--color-border-light);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:24px;
}
.f-ac-addr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--color-text)}
.f-ac-addr-t{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--color-primary);border:1px solid var(--color-primary);
  border-radius:3px;padding:2px 7px;
}
.f-ac-mapbtn{
  flex:0 0 auto;font-size:12px;font-weight:700;text-decoration:none;
  color:#fff;background:var(--color-primary);border-radius:var(--radius-sm);padding:4px 12px;
}
.f-ac-mapbtn:hover{background:var(--color-primary-dark)}
.f-ac-note{
  font-size:13px;line-height:1.9;color:var(--color-text-2);
  margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border-light);
}
.f-ac-info .f-ac-note:first-child{margin-top:0;padding-top:0;border-top:0}

/* ── ホテル一覧 ───────────────────────── */
.f-ac-h2{
  font-size:16px;font-weight:800;color:var(--color-text);
  display:flex;align-items:baseline;gap:8px;margin:0 0 14px;
}
.f-ac-cnt{font-size:11px;font-weight:700;color:var(--color-text-3)}
.f-ac-group{margin-bottom:22px}
.f-ac-cat{
  font-size:13px;font-weight:700;color:#fff;background:var(--color-primary);
  border-radius:var(--radius-sm);padding:5px 12px;margin:0 0 8px;
  display:flex;align-items:baseline;gap:8px;
}
.f-ac-cat .f-ac-cnt{color:rgba(255,255,255,.75)}

/* 1件ずつの箱。2列にしているのは、件数が多いと縦に長くなりすぎるため。
   スマホでは1列に戻る。 */
.f-ac-list{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:760px){ .f-ac-list{grid-template-columns:1fr 1fr;gap:8px 12px} }

.f-ac-item{
  background:var(--color-bg-card);border:1px solid var(--color-border-light);
  border-radius:var(--radius-sm);padding:10px 12px;min-width:0;
}
.f-ac-name{font-size:14px;font-weight:700;color:var(--color-text);line-height:1.5}
.f-ac-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font-size:12px;color:var(--color-text-2);margin-top:4px;
}
.f-ac-tel{
  font-weight:700;color:var(--color-primary);text-decoration:none;white-space:nowrap;
}
.f-ac-tel:hover{text-decoration:underline}
/* 住所は長いので、はみ出さずに折り返す */
.f-ac-ad{flex:1 1 auto;min-width:0;word-break:break-all}
.f-ac-maplink{
  flex:0 0 auto;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;
  color:var(--color-primary);border:1px solid var(--color-primary);
  border-radius:3px;padding:1px 8px;
}
.f-ac-maplink:hover{background:var(--color-primary);color:#fff}
.f-ac-memo{font-size:11px;color:var(--color-text-3);margin-top:4px;line-height:1.7}

.f-ac-caution{
  font-size:11px;color:var(--color-text-3);line-height:1.8;
  margin-top:6px;padding-top:10px;border-top:1px solid var(--color-border-light);
}