@charset "UTF-8";
/* ============================================================================
   f.css — 案F：ネオン・ナイト系

   濃紺〜黒の地に、ネオンピンクとシアンの発光アクセント。
   深夜営業を売りにする店向け。「朝4時まで」を最初に打ち出す構成。

   他案との違い：
   案B（黒×赤）は太ゴシック＋赤帯で「大衆的な活気」。
   この案は濃紺＋発光する細い線で「夜の街」。赤は使わない。
   ============================================================================ */

:root {
  --navy:   #0a0e1a;   /* 地 */
  --navy2:  #111726;   /* 一段明るい面 */
  --fg:     #e8ecf5;
  --sub:    #8b93a8;
  --pink:   #ff2fb0;
  --cyan:   #22e0ff;
  --line:   #232c42;

  --gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;

  /* ネオンの発光 */
  --glow-pink: 0 0 6px rgba(255,47,176,.9), 0 0 18px rgba(255,47,176,.55);
  --glow-cyan: 0 0 6px rgba(34,224,255,.9), 0 0 18px rgba(34,224,255,.5);

  /* common.css の固定CTAへ流し込む配色 */
  --cta-bg: var(--pink);
  --cta-fg: #0a0e1a;
  --cta-radius: 999px;
  --cta-weight: 800;
  --bar-bg: #05070d;
  --bar-fg: var(--cyan);
  --barcta-bg: var(--pink);
  --barcta-fg: #0a0e1a;
}

body {
  font-family: var(--gothic);
  font-size: 17px;
  line-height: 1.9;
  color: var(--fg);
  background: var(--navy);
}

.wrap   { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: 720px; }

.sec { padding-top: 42px; padding-bottom: 64px; }
@media (min-width: 768px) { .sec { padding-top: 64px; padding-bottom: 96px; } }

/* ---- 見出し：発光する文字＋シアンの短い罫 ---- */
.ttl {
  text-align: center;
  margin-bottom: 40px;
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-indent: .14em;
  color: #fff;
  text-shadow: var(--glow-cyan);
}
.ttl::before {
  content: attr(data-en);
  display: block;
  font-size: .38em;
  font-weight: 400;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--pink);
  text-shadow: var(--glow-pink);
  margin-bottom: 12px;
}
.ttl::after {
  content: "";
  display: block;
  width: 46px; height: 2px;
  margin: 18px auto 0;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}

/* ---- ヘッダー ---- */
.hdr {
  gap: 16px;
  padding-inline: 16px;
  background: rgba(5, 7, 13, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.hdr__brand {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .1em;
  text-decoration: none; white-space: nowrap;
  color: #fff; text-shadow: var(--glow-cyan);
}
.hdr__tel { display: none; }
@media (min-width: 768px) {
  .hdr { padding-inline: 28px; }
  .hdr__brand { font-size: 1.3rem; }
  .hdr__tel {
    display: block; margin-left: auto;
    font-size: 1.15rem; font-weight: 700; letter-spacing: .03em;
    text-decoration: none; white-space: nowrap;
    color: var(--cyan); text-shadow: var(--glow-cyan);
  }
}

/* ---- ① ファーストビュー ---- */
.hero {
  position: relative;
  min-height: 42svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 背景写真の中央に "BAR" のネオンが写り込んでいて、店名・業態と重なると読めない。
   中央も十分に暗く落とし、写真は輪郭の明かりだけを残す。 */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,14,26,.62) 0%, rgba(10,14,26,.92) 78%);
}
.hero__in { position: relative; z-index: 1; padding: 40px 20px; }
.hero__name {
  font-size: clamp(2.95rem, 13.2vw, 4.1rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,47,176,.95), 0 0 26px rgba(255,47,176,.7), 0 0 52px rgba(255,47,176,.4);
}
.hero__type {
  margin-top: 22px;
  display: inline-block;
  padding: 7px 20px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  font-size: clamp(.88rem, 3.7vw, 1.02rem);
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  box-shadow: 0 0 12px rgba(34,224,255,.35), inset 0 0 12px rgba(34,224,255,.15);
}
@media (min-width: 768px) { .hero { min-height: 88svh; } }

/* ---- ② 深夜営業の帯（この案の売り） ---- */
/* この案の売りは「深夜まで開いている」こと。
   ヒーローを小さくしたぶん、この帯を大きくして最初に目に入るようにする。 */
.strip {
  border-block: 1px solid var(--line);
  background: var(--navy2);
  padding: 44px 20px;
  text-align: center;
}
.strip__main {
  font-size: clamp(2.1rem, 10vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  text-shadow: var(--glow-pink);
}
.strip__main em {
  font-style: normal;
  font-size: 1.5em;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  padding-inline: .06em;
}
.strip__sub {
  margin-top: 14px;
  font-size: clamp(1.02rem, 4.3vw, 1.18rem); letter-spacing: .14em; color: var(--sub);
}

/* ---- ③ おすすめ：ネオン枠のカード ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.c {
  background: var(--navy2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.c:hover { border-color: var(--pink); box-shadow: 0 0 16px rgba(255,47,176,.3); }
.c img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .92; }
.c__b { padding: 11px 13px 15px; }
.c__b h3 { font-size: 0.95rem; font-weight: 700; line-height: 1.5; }
.c__p {
  margin-top: 4px;
  font-size: 1.05rem; font-weight: 800;
  color: var(--cyan); text-shadow: var(--glow-cyan);
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .c__b h3 { font-size: 1rem; }
  .c__p { font-size: 1.25rem; }
}

/* ---- ④ 全幅のネオン写真 ---- */
.band { margin: 0; line-height: 0; border-block: 1px solid var(--line); }
.band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; opacity: .85; }

/* ---- ⑤ お店について ---- */
.prose { text-align: center; font-size: 0.99rem; color: var(--fg); }
.prose p + p { margin-top: 1.4em; }

/* ---- ⑥ ご宴会 ---- */
.plans { display: grid; gap: 16px; }
.p {
  background: var(--navy2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
}
.p h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: .08em; }
.p__p {
  margin-top: 6px;
  font-size: 1.9rem; font-weight: 800; line-height: 1.15;
  color: var(--pink); text-shadow: var(--glow-pink);
}
.p__p small { font-size: .42em; }
.p__d { margin-top: 8px; font-size: 0.85rem; color: var(--sub); }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* ---- ⑦ ご予約 ---- */
.reserve__lead { text-align: center; font-size: 0.97rem; color: var(--sub); margin-bottom: 30px; }
.reserve__btns { display: grid; gap: 14px; max-width: 460px; margin-inline: auto; }
.rbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 68px; border-radius: 999px;
  text-decoration: none; font-weight: 800; line-height: 1.3;
  transition: box-shadow .2s;
}
.rbtn small { font-size: .64rem; font-weight: 400; opacity: .8; margin-top: 2px; }
.rbtn--net {
  background: var(--pink); color: #0a0e1a;
  box-shadow: 0 0 18px rgba(255,47,176,.55);
}
.rbtn--net:hover { box-shadow: 0 0 28px rgba(255,47,176,.8); }
.rbtn--tel {
  border: 1px solid var(--cyan); color: var(--cyan);
  text-shadow: var(--glow-cyan);
  box-shadow: 0 0 12px rgba(34,224,255,.28), inset 0 0 12px rgba(34,224,255,.12);
}
@media (min-width: 600px) { .reserve__btns { grid-template-columns: 1fr 1fr; } }

/* ---- ⑧ 店舗情報 ---- */
.dl {
  display: grid; grid-template-columns: 6.5em 1fr;
  font-size: 0.93rem;
  border-top: 1px solid var(--line);
}
.dl dt, .dl dd { padding: 15px 4px; border-bottom: 1px solid var(--line); }
.dl dt { color: var(--sub); white-space: nowrap; letter-spacing: .08em; }
.dl dd a { color: var(--cyan); font-weight: 700; text-shadow: var(--glow-cyan); }

/* ---- 地図：夜の配色に沈める。色分けは残す ---- */
.map { margin-top: 64px; line-height: 0; filter: brightness(.78) saturate(.85); }
.map iframe { width: 100%; height: 330px; border: 0; display: block; }
@media (min-width: 768px) { .map iframe { height: 420px; } }

/* ---- フッター ---- */
.ftr {
  background: #05070d; color: var(--sub);
  text-align: center; padding: 44px 20px; font-size: 0.85rem;
  border-top: 1px solid var(--line);
}
.ftr__name {
  font-size: 1.25rem; font-weight: 700; letter-spacing: .1em;
  color: #fff; text-shadow: var(--glow-pink); margin-bottom: 10px;
}
.ftr p + p { margin-top: .6em; }
.ftr a { color: var(--cyan); }
.ftr__note { margin-top: 18px; opacity: .5; font-size: .66rem; line-height: 1.8; }

/* ---- Googleマップ周りの余白 ----
   地図の上には .map の margin-top、下には店舗情報セクションの下パディングが
   入っていて、地図だけが宙に浮いたように見えていた。
   上下とも詰めて、地図を帯として画面幅いっぱいに置く。
   #info はIDセレクタなので、前にある .sec の指定より確実に優先される。 */
#info { padding-bottom: 0; }
.map { margin-top: 0; }