@charset "UTF-8";

/* ==========================================
   天満っぷ！— Style Sheet
   ========================================== */

:root {
  --bg:            #0d1219;
  --bg-header:     #080d14;
  --bg-card:       #141c28;
  --bg-card-hover: #1a2436;
  --border:        #22304a;
  --pink:          #ff2d78;
  --pink-glow:     rgba(255,45,120,.28);
  --yellow:        #ffe600;
  --yellow-glow:   rgba(255,230,0,.28);
  --cyan:          #00e8ff;
  --cyan-glow:     rgba(0,232,255,.28);
  --purple:        #dd66ff;
  --purple-glow:   rgba(221,102,255,.28);
  --orange:        #ff7b00;
  --orange-glow:   rgba(255,123,0,.28);
  --text:          #f0f4ff;
  --text-sub:      #7a8fb0;
  --radius:        12px;

  --font-display-ja: 'Dela Gothic One', "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", "Meiryo", "MS PGothic", "Noto Sans JP", sans-serif;
  --font-heading-ja: 'Zen Maru Gothic', "Hiragino Maru Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", "Meiryo", "MS PGothic", "Noto Sans JP", sans-serif;
  --font-body-ja:    'Zen Kaku Gothic New', "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", "Meiryo", "MS PGothic", "Noto Sans JP", sans-serif;
  --font-en-title:   'Shrikhand', Georgia, "Times New Roman", serif;
  --font-en-ui:      'Josefin Sans', "Helvetica Neue", Arial, sans-serif;
}

/* ── reset / base ─────────────────────── */
html { font-size: 62.5%; width: 100%; }
body {
  width: 100%;
  font-size: 1.4rem;
  font-family: var(--font-body-ja);
  color: var(--text);
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('../images/bg.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 20% center;
}
* { box-sizing: border-box; word-wrap: break-word; }
img { width: 100%; }
a { color: var(--cyan); text-decoration: none; }
a:link, a:visited, a:active, a:hover { outline: none; }

.flex { display: flex; flex-wrap: wrap; }

/* ── neon text helpers ────────────────── */
.neon-pink   { color: var(--pink);   text-shadow: 0 0 8px var(--pink-glow); }
.neon-yellow { color: var(--yellow); text-shadow: 0 0 8px var(--yellow-glow); }
.neon-cyan   { color: var(--cyan);   text-shadow: 0 0 8px var(--cyan-glow); }
.neon-purple { color: var(--purple); text-shadow: 0 0 8px var(--purple-glow); }

/* ── neon char animation ──────────────── */
@keyframes neon-char-glow {
  0%, 78%, 100% {
    color: var(--yellow);
    text-shadow: 0 0 8px var(--yellow-glow), 0 0 18px var(--yellow-glow);
  }
  82% {
    color: #fff;
    text-shadow: 0 0 4px #fff, 0 0 12px var(--yellow), 0 0 28px rgba(255,230,0,.7), 0 0 50px rgba(255,230,0,.4);
  }
  84% {
    color: var(--yellow);
    opacity: .55;
    text-shadow: 0 0 4px var(--yellow-glow);
  }
  86% {
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 4px #fff, 0 0 20px var(--yellow), 0 0 36px rgba(255,230,0,.6);
  }
  88% {
    color: var(--yellow);
    text-shadow: 0 0 8px var(--yellow-glow), 0 0 18px var(--yellow-glow);
  }
}

.maintitle-char {
  display: inline-block;
  color: var(--yellow);
  text-shadow: 0 0 8px var(--yellow-glow), 0 0 18px var(--yellow-glow);
  animation: neon-char-glow 5s linear infinite;
}
.maintitle-char-sp { display: inline-block; }

/* ── section titles ───────────────────── */
.maintitle {
  text-align: center;
  line-height: 1.3;
  padding-bottom: 7px;
}
.maintitle > span:not(.maintitle__sub) {
  display: inline-block;
  font-size: 3.6rem;
  font-weight: 700;
  font-family: var(--font-en-title);
  letter-spacing: .1em;
  color: var(--yellow);
  text-shadow: 0 0 10px var(--yellow-glow), 0 0 24px var(--yellow-glow);
}
.maintitle:after {
  content: "";
  display: block;
  margin: 10px auto 0;
  width: 4em;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,230,0,.7), 0 0 22px rgba(255,230,0,.4);
}
.subpage .maintitle > span:not(.maintitle__sub) { font-size: 2.8rem; }

.maintitle:has(.maintitle__sub)::after { display: none; }
.maintitle__sub {
  display: block;
  font-family: var(--font-heading-ja);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-sub);
  text-shadow: none;
  letter-spacing: .14em;
  margin-top: 0;
}
.subpage .maintitle__sub { font-size: 1.8rem; }
.maintitle__sub::before {
  content: "";
  display: block;
  margin: 10px auto 10px;
  width: 4em;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,230,0,.7), 0 0 22px rgba(255,230,0,.4);
}

.areatitle {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  font-family: var(--font-heading-ja);
  color: #fff;
  text-shadow: 0 0 10px var(--pink-glow), 0 0 22px var(--pink-glow);
  letter-spacing: .1em;
  opacity: 0;
  transition: opacity .7s ease;
}
.areatitle.is-visible { opacity: 1; }
.areatitle i {
  margin-right: .4em;
  color: var(--pink);
  text-shadow: 0 0 10px var(--pink-glow);
}
.areatitle span {
  display: block;
  font-size: 1.0rem;
  font-family: var(--font-en-ui);
  color: var(--text-sub);
  text-shadow: none;
  margin-top: 1em;
  letter-spacing: .22em;
}

.bgtitle {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
  background: var(--bg-header);
  color: var(--cyan);
  border: 1px solid rgba(0,232,255,.3);
  border-radius: 6px;
  letter-spacing: .1em;
  margin-bottom: 10px;
  font-family: var(--font-heading-ja);
}
.bgtitle span { color: var(--cyan); }

/* ── back-to-top ──────────────────────── */
#totop {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  text-align: center;
  font-size: 1.8rem;
  color: #fff;
  background: var(--pink);
  box-shadow: 0 4px 16px rgba(255,45,120,.4);
  cursor: pointer;
  z-index: 900;
}

/* ── HEADER ───────────────────────────── */
header {
  background-image: url('../images/bg_header.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
}
.headerInner { max-width: 1200px; margin: 0 auto; }
.h1text {
  display: block;
  text-align: center;
  padding: 4px 4px 4px 1em;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: .08em;
  font-family: var(--font-body-ja);
}
#headerlogo { text-align: center; }
.h1img { display: inline-block; font-size: 0; }

.site-logo-img {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
}
.site-logo-img--footer { height: 32px; }

.site-logo-text {
  font-family: var(--font-display-ja);
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--yellow);
  text-shadow: 0 0 12px var(--yellow-glow);
  line-height: 1.2;
}
.site-logo-sub {
  display: block;
  font-family: var(--font-en-title);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-sub);
  letter-spacing: .3em;
  text-shadow: none;
  margin-top: 2px;
}

/* hamburger */
.sp_searchBtn {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  background: var(--pink);
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(255,45,120,.35);
  cursor: pointer;
}

/* nav */
#Navilist { background: rgba(8,13,20,.96); }
.Navilist_inner { padding: 0 10px; }

.areaNavi { justify-content: center; }
.areaNavi li { text-align: center; }
.areaNavi a {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-sub);
  display: block;
  padding: 10px 14px;
  letter-spacing: .05em;
  transition: color .25s;
  font-family: var(--font-heading-ja);
}

#side_genremenu { border-top: 1px solid var(--border); }
.genrenavi { display: flex; flex-wrap: wrap; justify-content: center; }
.genrenavi li { list-style: none; }
.genrenavi a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-sub);
  transition: color .25s;
  border-bottom: 2px solid transparent;
  font-family: var(--font-heading-ja);
}
.genrenavi a.current { color: var(--yellow); border-bottom-color: var(--yellow); }
.genrenavi a i { font-size: 1.5rem; }
.genre-snack    a.current { color: var(--pink);   border-bottom-color: var(--pink);   }
.genre-cabaret  a.current { color: var(--purple); border-bottom-color: var(--purple); }
.genre-girlsbar a.current { color: var(--cyan);   border-bottom-color: var(--cyan);   }
.genre-lounge   a.current { color: var(--yellow); border-bottom-color: var(--yellow); }
.genre-concafe  a.current { color: var(--orange); border-bottom-color: var(--orange); }

/* ── HERO SLIDER ──────────────────────── */
#hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.hero-slider {
  flex: 1;
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background-color: var(--bg);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .75s ease;
  pointer-events: none;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: var(--slide-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.38);
  pointer-events: none;
}
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--slide-img);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide.is-prev {
  opacity: 0;
}

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 0;
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.hero-dots:empty { display: none; }
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,230,0,.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .3s, border-color .3s, box-shadow .3s;
  appearance: none;
  -webkit-appearance: none;
}
.hero-dot.is-active {
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 0 8px var(--yellow-glow);
}

.hero_catch {
  font-size: 1.1rem;
  color: var(--text-sub);
  letter-spacing: .28em;
  margin-bottom: 14px;
  font-family: var(--font-en-title);
}
.hero_title {
  font-family: var(--font-display-ja);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--yellow);
  text-shadow: 0 0 14px var(--yellow-glow), 0 0 32px var(--yellow-glow);
  margin-bottom: 18px;
}
.hero_sub {
  font-size: 1.3rem;
  color: var(--text-sub);
  line-height: 2;
  font-family: var(--font-body-ja);
  letter-spacing: .04em;
}

/* ── GENRE NAV ────────────────────────── */
#genre_nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 18px 10px;
}
.genre_list {
  list-style: none;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.genre_btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  transition: box-shadow .3s, background .3s;
  border: 1px solid;
  font-family: var(--font-heading-ja);
}
.genre_btn.genre_snack    { color: var(--pink);   border-color: rgba(255,45,120,.4);  background: rgba(255,45,120,.05);  box-shadow: 0 2px 10px rgba(255,45,120,.12); }
.genre_btn.genre_cabaret  { color: var(--purple); border-color: rgba(221,102,255,.4); background: rgba(221,102,255,.05); box-shadow: 0 2px 10px rgba(221,102,255,.12); }
.genre_btn.genre_girlsbar { color: var(--cyan);   border-color: rgba(0,232,255,.4);   background: rgba(0,232,255,.05);   box-shadow: 0 2px 10px rgba(0,232,255,.12); }
.genre_btn.genre_lounge   { color: var(--yellow); border-color: rgba(255,230,0,.4);   background: rgba(255,230,0,.05);   box-shadow: 0 2px 10px rgba(255,230,0,.12); }
.genre_btn.genre_concafe  { color: var(--orange); border-color: rgba(255,123,0,.4);   background: rgba(255,123,0,.05);   box-shadow: 0 2px 10px rgba(255,123,0,.12); }

/* ── BANNER ───────────────────────────── */
.bannerblock { padding: 24px 20px; text-align: center; }
.bannerblock_inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.banner_item {
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px 40px;
  color: var(--text-sub);
  font-size: 1.2rem;
  letter-spacing: .1em;
  min-width: 200px;
}

/* ── SHOPLIST ─────────────────────────── */
.mainsection { padding: 48px 0; }
.shoplist_wrapper { padding-top: 60px; margin-top: -60px; }
.shoplist_inner { padding: 20px 10px 48px; }

.shops { list-style: none; padding: 0; margin: 0; gap: 24px; }
.shops--premium { margin-bottom: 0; }
.shops--free    { margin-top: 0; }

/* 有料・無料の区切り線 */
.shops-divider {
  display: flex;
  align-items: center;
  margin: 28px 0 24px;
  gap: 0;
}
.shops-divider::before,
.shops-divider::after {
  content: "";
  flex: 1;
  height: 1px;
}
.shops-divider::before { background: linear-gradient(to right,  transparent, rgba(255,45,120,.75)); }
.shops-divider::after  { background: linear-gradient(to left,   transparent, rgba(255,45,120,.75)); }
.shops-divider .divider-feet {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 10px;
}
.shops-divider .foot {
  font-size: 1.3rem;
  color: var(--pink);
  opacity: 0.8;
  display: inline-block;
}
.shops-divider .foot:nth-child(even) { margin-bottom: 7px; }
.shops-divider .foot--r i { display: inline-block; transform: scaleX(-1); }

.shopbox {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: border-color .3s, box-shadow .3s, transform .3s, opacity .5s ease;
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.shopbox.is-visible { opacity: 1; }
.shopbox--premium {
  border-color: rgba(255,230,0,.25);
  box-shadow: 0 2px 16px rgba(255,230,0,.07);
}

.shopbox__badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  background: var(--yellow);
  color: #111;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 4px 12px 4px 10px;
  border-radius: 20px;
  font-family: var(--font-heading-ja);
  letter-spacing: .04em;
  box-shadow: 0 2px 14px rgba(255,230,0,.55), 0 0 22px rgba(255,230,0,.18);
  animation: badge-pulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
.shopbox__badge i { font-size: .9em; color: #8a6000; }

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 2px 14px rgba(255,230,0,.55), 0 0 22px rgba(255,230,0,.18); }
  50%       { box-shadow: 0 2px 22px rgba(255,230,0,.85), 0 0 36px rgba(255,230,0,.38); }
}

.shops_nametitle {
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
}
.shop_category_wrapper { gap: 6px; margin-bottom: 10px; }
.shops_category {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: .04em;
  border: 1px solid;
  font-family: var(--font-heading-ja);
}
.shops_category.cat-snack    { color: var(--pink);   border-color: rgba(255,45,120,.4);  background: rgba(255,45,120,.08); }
.shops_category.cat-cabaret  { color: var(--purple); border-color: rgba(221,102,255,.4); background: rgba(221,102,255,.08); }
.shops_category.cat-girlsbar { color: var(--cyan);   border-color: rgba(0,232,255,.4);   background: rgba(0,232,255,.08); }
.shops_category.cat-lounge   { color: var(--yellow); border-color: rgba(255,230,0,.4);   background: rgba(255,230,0,.08); }
.shops_category.cat-concafe  { color: var(--orange); border-color: rgba(255,123,0,.4);   background: rgba(255,123,0,.08); }

.shops_name { line-height: 1.4; margin: 0; }
.shops_name a, .shops_name span.name-main {
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-heading-ja);
  letter-spacing: .04em;
}
.shops_name .name-kana {
  display: block;
  font-size: 1.1rem;
  font-family: var(--font-body-ja);
  color: var(--text-sub);
  font-weight: 400;
  margin-top: 4px;
  letter-spacing: .04em;
}

.shopimage {
  line-height: 0;
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  position: relative;
  background: var(--bg-card-hover);
  overflow: hidden;
}
.shopimage a, .shopimage > span {
  display: block;
  position: absolute;
  inset: 0;
}
.shopimage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s;
}
.img_placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.img_placeholder::after {
  content: "PHOTO";
  font-family: var(--font-en-ui);
  font-size: 1.2rem;
  letter-spacing: .35em;
  color: rgba(255,255,255,.1);
}

.shop-catch {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--text);
  padding: 12px 16px;
  border-left: 3px solid var(--pink);
  background: rgba(255,45,120,.04);
  margin: 0;
}
.shopbox:has(.cat-snack)    .shop-catch { border-left-color: var(--pink);   background: rgba(255,45,120,.04); }
.shopbox:has(.cat-cabaret)  .shop-catch { border-left-color: var(--purple); background: rgba(221,102,255,.04); }
.shopbox:has(.cat-girlsbar) .shop-catch { border-left-color: var(--cyan);   background: rgba(0,232,255,.04); }
.shopbox:has(.cat-lounge)   .shop-catch { border-left-color: var(--yellow); background: rgba(255,230,0,.04); }
.shopbox:has(.cat-concafe)  .shop-catch { border-left-color: var(--orange); background: rgba(255,123,0,.04); }

.shopdata {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shopinfo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 1.3rem;
  color: var(--text-sub);
}
.shopinfo-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.hours-day, .hours-night {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.hours-day   i { color: var(--yellow); }
.hours-night i { color: var(--cyan); }
.shopinfo-row {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  line-height: 1.6;
}
.shopinfo-row > i {
  flex-shrink: 0;
  color: var(--pink);
  margin-top: .15em;
  width: 1em;
  text-align: center;
}
.shopinfo-address > i { color: var(--purple); }
.shopinfo-label {
  font-size: 1.1rem;
  color: var(--text-sub);
  opacity: .75;
  flex-shrink: 0;
  white-space: nowrap;
}

.shoptel {
  font-size: 2.2rem;
  font-weight: 900;
  font-family: var(--font-en-ui);
  align-items: center;
  gap: 8px;
}
.shoptel::before {
  content: "\f095";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .6em;
  color: var(--cyan);
}
.shoptel a { color: var(--text); }

.shopadress {
  font-size: 1.3rem;
  color: var(--text-sub);
  align-items: flex-start;
  gap: 6px;
  line-height: 1.6;
}
.shopadress::before {
  content: "\f3c5";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--pink);
  flex-shrink: 0;
  margin-top: 2px;
}

.weblist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.weblist li a {
  font-size: 1.2rem;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color .25s, color .25s;
}
.weblist li a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.weblist_tabelog  a::before { content: "\f35d"; }
.weblist_gurunavi a::before { content: "\f35d"; }
.weblist_google   a::before { content: "\f3c5"; }
.weblist_official a::before { content: "\f015"; }

.sns-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.btn-official {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 9px 14px;
  border: 1px solid rgba(0,232,255,.45);
  border-radius: var(--radius);
  color: var(--cyan);
  background: rgba(0,232,255,.08);
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--font-heading-ja);
  transition: border-color .25s, color .25s, background .25s, box-shadow .25s;
}
.btn-official i { color: var(--cyan); font-size: 1.1rem; flex-shrink: 0; }
.btn-tabelog {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  width: fit-content;
  height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(255,150,0,.45);
  border-radius: 20px;
  color: #ff9600;
  background: rgba(255,150,0,.07);
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--font-heading-ja);
  transition: box-shadow .25s;
}
.snslist { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.snsicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  transition: box-shadow .25s, opacity .25s;
}
.snsicon--instagram { color: #f13f79; background: rgba(241,63,121,.1);  border: 1px solid rgba(241,63,121,.35); }
.snsicon--twitter   { color: #1da1f2; background: rgba(29,161,242,.1);  border: 1px solid rgba(29,161,242,.35); }
.snsicon--tiktok    { color: var(--text);     background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.snslist--locked .snsicon {
  color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  cursor: not-allowed;
}

.shopmore { margin-top: auto; padding-top: 8px; }
.btn_detail {
  display: block;
  text-align: center;
  padding: 11px;
  border: 1px solid rgba(255,45,120,.4);
  border-radius: var(--radius);
  color: var(--pink);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .1em;
  transition: background .25s, box-shadow .25s;
  font-family: var(--font-heading-ja);
}

/* ── LISTING PAGE ─────────────────────── */
#listing_content { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.listing_lead {
  text-align: center;
  font-size: 1.6rem;
  line-height: 2;
  margin-bottom: 48px;
  color: var(--text);
}
.plan_list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.plan_item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  width: 100%;
  max-width: 340px;
}
.plan_item.plan_standard { border-color: rgba(0,232,255,.4); box-shadow: 0 4px 24px rgba(0,232,255,.1); }
.plan_item.plan_premium  { border-color: rgba(255,230,0,.4); box-shadow: 0 4px 24px rgba(255,230,0,.1); }
.plan_name {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: var(--font-en-title);
  letter-spacing: .15em;
}
.plan_standard .plan_name { color: var(--cyan); }
.plan_premium  .plan_name { color: var(--yellow); }
.plan_price {
  font-size: 3.2rem;
  font-weight: 900;
  font-family: var(--font-en-ui);
  margin-bottom: 4px;
}
.plan_standard .plan_price { color: var(--cyan); }
.plan_premium  .plan_price { color: var(--yellow); }
.plan_unit { font-size: 1.2rem; color: var(--text); margin-bottom: 20px; }
.plan_features { list-style: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.plan_features li { font-size: 1.3rem; color: var(--text); padding-left: 1.5em; position: relative; line-height: 1.6; }
.plan_features li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
.plan_premium .plan_features li::before { color: var(--yellow); }

.listing_contact {
  margin-top: 48px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid rgba(255,45,120,.4);
  border-radius: var(--radius);
  padding: 36px 24px;
  box-shadow: 0 4px 32px rgba(255,45,120,.12);
}
.listing_contact h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px var(--pink-glow), 0 0 22px var(--pink-glow);
  margin-bottom: 14px;
  font-family: var(--font-heading-ja);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
}
.listing_contact h3 i {
  color: var(--pink);
  text-shadow: 0 0 10px var(--pink-glow);
}
.listing_contact p {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 16px;
}
.btn_contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: var(--pink);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(255,45,120,.35);
  transition: box-shadow .25s, transform .2s;
  letter-spacing: .08em;
  font-family: var(--font-heading-ja);
}

/* ── COMPANY / PRIVACY ────────────────── */
#company, #privacy_content {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background: rgba(8,13,20,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.profile { margin-bottom: 32px; }
.profile_name {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 18px;
  font-family: var(--font-heading-ja);
  letter-spacing: .08em;
}
.profile dl { display: grid; grid-template-columns: 120px 1fr; gap: 12px 20px; }
.profile dt { font-weight: 700; color: var(--text); font-size: 1.3rem; }
.profile dd { font-size: 1.4rem; color: var(--text); line-height: 1.7; }
.profile a { color: var(--cyan); }

#privacy_content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cyan);
  margin: 32px 0 10px;
  font-family: var(--font-heading-ja);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
#privacy_content p {
  font-size: 1.4rem;
  line-height: 2;
  color: var(--text);
}

/* ── FOOTER ───────────────────────────── */
footer {
  background: var(--bg-header);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 40px 20px 20px;
  margin-top: 60px;
}
.footerlogo { margin-bottom: 20px; display: flex; justify-content: center; }
.footerNavilist {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-bottom: 20px;
}
.footerNavilist a { font-size: 1.2rem; color: var(--text-sub); transition: color .25s; font-family: var(--font-body-ja); }
.copyright { font-size: 1.1rem; color: var(--text-sub); font-family: var(--font-body-ja); }
.copyright a { color: var(--text-sub); text-decoration: none; }

/* ── SP ( ≤768px ) ────────────────────── */
@media screen and (max-width: 768px) {
  .sp_view { display: inline-block; }
  .pc_view { display: none; }

  /* 背景画像位置 */
  body::before { background-position: 10% center; }

  /* 背景に半透明の暗いオーバーレイ */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.8);
    pointer-events: none;
  }

  main { padding-top: 56px; }

  /* TOP ページのみ：初期ヘッダーを3倍高に */
  body:not(.subpage) header {
    height: 168px;
    transition: height .35s ease;
    overflow: hidden;
  }
  body:not(.subpage) main { padding-top: 168px; }
  body:not(.subpage).is-scrolled header { height: 56px; }
  body:not(.subpage).is-scrolled main   { padding-top: 56px; }

  /* TOP ページ：headerInner を縦積み（ロゴ上・h1text下） */
  body:not(.subpage) header .headerInner {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
  }

  /* 高ヘッダー時：h1textを表示・縮小時に隠す */
  body:not(.subpage) header .h1text {
    display: block !important;
    font-size: 0.95rem;
    text-align: center;
    padding: 0;
    opacity: 1;
    max-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    transition: opacity .25s ease, max-height .3s ease;
  }
  body:not(.subpage).is-scrolled header .h1text {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
  }

  /* 高ヘッダー時：ロゴを大きく（1pxスクロールで縮小）1.2倍 */
  body:not(.subpage) header .site-logo-img {
    height: 90px;
    transition: height .3s ease;
  }
  body:not(.subpage).is-scrolled header .site-logo-img { height: 41px; }

  /* headerlogo: 初期100px高・ロゴを下寄せ */
  body:not(.subpage) header #headerlogo {
    height: 100px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 12px;
    transition: height .35s ease, padding-bottom .35s ease;
  }
  body:not(.subpage).is-scrolled header #headerlogo {
    height: 44px;
    padding-bottom: 0;
  }

  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 14px;  /* 両端等幅でロゴ中央寄せ */
  }
  #headerlogo { margin: 0; }
  .site-logo-img { height: 41px; }  /* 34 × 1.2 */
  .site-logo-text { font-size: 2.2rem; }
  .site-logo-sub { display: none; }
  .h1text { display: none; }

  .sp_searchBtn { position: fixed; top: 6px; right: 8px; }

  #Navilist {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 998;
    padding-bottom: 60px;
  }

  .bgtitle {
    background: var(--cyan);
    color: var(--bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: calc(100% + 20px);
    margin: 0 -10px 10px;
    font-weight: 700;
  }
  .bgtitle span { color: var(--bg); }

  .areaNavi { display: grid; grid-template-columns: 1fr 1fr; }
  .areaNavi li { border-bottom: 1px solid var(--border); }
  .areaNavi a { padding: 14px 10px; font-size: 1.3rem; }

  #side_genremenu { padding: 10px; }
  .genrenavi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .genrenavi a { justify-content: center; border-radius: 8px; border: 1px solid var(--border); padding: 12px 8px; }
  .genre-snack    a { color: var(--pink);   border-color: rgba(255,45,120,.3); }
  .genre-cabaret  a { color: var(--purple); border-color: rgba(221,102,255,.3); }
  .genre-girlsbar a { color: var(--cyan);   border-color: rgba(0,232,255,.3); }
  .genre-lounge   a { color: var(--yellow); border-color: rgba(255,230,0,.3); }
  .genre-concafe  a { color: var(--orange); border-color: rgba(255,123,0,.3); }

  .hero-slider { flex: none; width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
  .hero_title { font-size: 2.8rem; }

  #genre_nav { padding: 14px 10px; }
  .genre_list { gap: 8px; }
  .genre_btn { padding: 9px 14px; font-size: 1.3rem; }

  .mainsection { padding: 24px 0; }
  .shoplist_inner { padding: 20px 4% 32px; }
  .shoplist_wrapper { padding-top: 56px; margin-top: -56px; }
  body:not(.subpage) .shoplist_wrapper { scroll-margin-top: 112px; }

  .site-logo-img--footer { height: 88px; }

  .shops { display: flex; flex-direction: column; gap: 24px; }
  .shopbox { width: 100%; }

  .maintitle { margin-bottom: 20px; }
  .maintitle > span:not(.maintitle__sub) { font-size: 2.6rem; }

  #genre_nav .genre_list { display: grid; grid-template-columns: 1fr 1fr; }
  .genre_btn { justify-content: center; }

  .plan_item { max-width: 100%; }
}

/* ── PC ( ≥769px ) ────────────────────── */
@media screen and (min-width: 769px) {
  .sp_view { display: none; }
  .pc_view { display: inline-block; }

  a[href^="tel:"] { pointer-events: none; }
  img { transition: .4s opacity; }

  .headerInner, .mainsection > *, .shoplist_inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  main { width: 100%; }
  .shoplist_inner { width: 96%; }

  header { position: sticky; top: 0; z-index: 999; padding: 16px 0 0; transition: padding .3s ease; }
  #headerlogo { padding: 0 20px 14px; transition: padding .3s ease; }
  .h1text { padding: 6px 0 6px 1em; margin-bottom: 8px; text-align: left; }
  .site-logo-img { width: 450px; height: auto; transition: width .3s ease; }
  body.is-scrolled header { padding: 8px 0 0; }
  body.is-scrolled #headerlogo { padding: 0 20px 6px; }
  body.is-scrolled header .site-logo-img { width: 225px; }
  body.subpage header { padding: 8px 0 0; }
  body.subpage #headerlogo { padding: 0 20px 6px; }
  body.subpage header .site-logo-img { width: 225px; }
  .shoplist_wrapper { scroll-margin-top: 100px; }
  .site-logo-img--footer { width: 360px; height: auto; }
  .site-logo-text { font-size: 3.4rem; }
  #Navilist { display: block !important; }
  .Navilist_inner { max-width: 1200px; margin: 0 auto; }

  .areaNavi li { margin: 0 .5em; }
  .areaNavi a { font-size: 1.5rem; padding: 12px 16px; }

  #side_genremenu { padding: 4px 0; }
  .genrenavi a { padding: 10px 20px; font-size: 1.4rem; }
  .bgtitle { display: none; }

  .shoplist_wrapper { margin-top: 0; padding-top: 60px; }
  .shops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; }
  .shopbox { grid-column: span 2; }          /* 無料：常に3店舗/行 */
  .shopbox--premium { grid-column: span 3; }  /* 有料：常に2店舗/行 */
  .shoptel { font-size: 2.2rem; }
  .maintitle { margin-bottom: 36px; }
  .btn_detail { cursor: pointer; }
  .profile dl { grid-template-columns: 140px 1fr; }
  .hero-slider { min-height: 360px; }

}

@media screen and (min-width: 769px) and (max-width: 1100px) {
  .shops { grid-template-columns: repeat(6, 1fr); gap: 20px; }
}

/* ── hover ( pointer devices only ) ──── */
@media (hover: hover) {
  .areaNavi a:hover { color: var(--cyan); }

  .genrenavi a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
  .genre-snack    a:hover { color: var(--pink);   border-bottom-color: var(--pink);   }
  .genre-cabaret  a:hover { color: var(--purple); border-bottom-color: var(--purple); }
  .genre-girlsbar a:hover { color: var(--cyan);   border-bottom-color: var(--cyan);   }
  .genre-lounge   a:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
  .genre-concafe  a:hover { color: var(--orange); border-bottom-color: var(--orange); }

  .genre_btn.genre_snack:hover    { box-shadow: 0 4px 20px rgba(255,45,120,.25),  0 0 24px rgba(255,45,120,.15); }
  .genre_btn.genre_cabaret:hover  { box-shadow: 0 4px 20px rgba(221,102,255,.25), 0 0 24px rgba(221,102,255,.15); }
  .genre_btn.genre_girlsbar:hover { box-shadow: 0 4px 20px rgba(0,232,255,.25),   0 0 24px rgba(0,232,255,.15); }
  .genre_btn.genre_lounge:hover   { box-shadow: 0 4px 20px rgba(255,230,0,.25),   0 0 24px rgba(255,230,0,.15); }
  .genre_btn.genre_concafe:hover  { box-shadow: 0 4px 20px rgba(255,123,0,.25),   0 0 24px rgba(255,123,0,.15); }

  .shopbox:has(.cat-snack):hover {
    border-color: rgba(255,45,120,.8);
    box-shadow: 0 8px 40px rgba(255,45,120,.45), 0 0 16px rgba(255,45,120,.2);
    transform: translateY(-2px);
  }
  .shopbox:has(.cat-cabaret):hover {
    border-color: rgba(221,102,255,.8);
    box-shadow: 0 8px 40px rgba(221,102,255,.45), 0 0 16px rgba(221,102,255,.2);
    transform: translateY(-2px);
  }
  .shopbox:has(.cat-girlsbar):hover {
    border-color: rgba(0,232,255,.8);
    box-shadow: 0 8px 40px rgba(0,232,255,.45), 0 0 16px rgba(0,232,255,.2);
    transform: translateY(-2px);
  }
  .shopbox:has(.cat-lounge):hover {
    border-color: rgba(255,230,0,.8);
    box-shadow: 0 8px 40px rgba(255,230,0,.45), 0 0 16px rgba(255,230,0,.2);
    transform: translateY(-2px);
  }
  .shopbox:has(.cat-concafe):hover {
    border-color: rgba(255,123,0,.8);
    box-shadow: 0 8px 40px rgba(255,123,0,.45), 0 0 16px rgba(255,123,0,.2);
    transform: translateY(-2px);
  }

  .shopimage a:hover img { opacity: .82; }
  .weblist li a:hover { border-color: var(--cyan); color: var(--cyan); }
  a.snsicon--instagram:hover { box-shadow: 0 4px 14px rgba(241,63,121,.4); opacity: .85; }
  a.snsicon--twitter:hover   { box-shadow: 0 4px 14px rgba(29,161,242,.4); opacity: .85; }
  a.snsicon--tiktok:hover    { box-shadow: 0 4px 14px rgba(255,255,255,.15); opacity: .85; }

  .btn-official:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0,232,255,.15);
    box-shadow: 0 4px 14px rgba(0,232,255,.2);
  }
  .btn-tabelog:hover { box-shadow: 0 4px 14px rgba(255,100,0,.3); }
  .btn_detail:hover {
    background: rgba(255,45,120,.1);
    box-shadow: 0 4px 16px rgba(255,45,120,.2);
    color: var(--pink);
  }
  .btn_contact:hover {
    box-shadow: 0 6px 28px rgba(255,45,120,.5);
    transform: translateY(-1px);
    color: #fff;
  }

  .footerNavilist a:hover { color: var(--cyan); }
  .copyright a:hover { color: var(--cyan); }
  #totop:hover { opacity: .85; }
  .hero-dot:hover { background: rgba(255,230,0,.3); }
  a:hover img { opacity: .78; }
}

/* ── PAGE LOADING ─────────────────────── */
#page-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity .5s ease;
}
#page-loading.is-done {
  opacity: 0;
  pointer-events: none;
}
.loading-feet {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.loading-feet .foot {
  font-size: 2.6rem;
  color: var(--pink);
  opacity: 0;
  display: inline-block;
  animation: footstep-in .35s ease forwards;
  text-shadow: 0 0 12px var(--pink-glow), 0 0 28px var(--pink-glow);
}
.loading-feet .foot:nth-child(even) { margin-bottom: 12px; }
.loading-feet .foot--r i { display: inline-block; transform: scaleX(-1); }
.loading-feet .foot:nth-child(1) { animation-delay: .0s; }
.loading-feet .foot:nth-child(2) { animation-delay: .28s; }
.loading-feet .foot:nth-child(3) { animation-delay: .56s; }
.loading-feet .foot:nth-child(4) { animation-delay: .84s; }
.loading-feet .foot:nth-child(5) { animation-delay: 1.12s; }
.loading-feet .foot:nth-child(6) { animation-delay: 1.40s; }
@keyframes footstep-in {
  0%   { opacity: 0; transform: scale(.4) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.1) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.loading-text {
  font-family: var(--font-en-ui);
  font-size: 1.1rem;
  letter-spacing: .5em;
  color: var(--text-sub);
  animation: blink-text 1.4s ease infinite;
}
@keyframes blink-text {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}