@charset "utf-8";
/* =========================================================
   NIGHT & SWEET GROUP / エリアページ共通スタイル v2
   scope: .nsg-area-page 配下のみ（既存テーマCSSは一切変更しない）
   依存: テーマ本体 style.css（変数 --en / --ja、.ornate-button 等）
   ========================================================= */

.nsg-area-page {
  --area-en: var(--en, 'Josefin Sans', Arial, sans-serif);
  --area-ja: var(--ja, 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif);
  --area-ink: #000;
  --area-sub: #4a4a4a;
  --area-muted: #83838c;
  --area-line: #ddd;
  --area-line-strong: #111;
  --area-surface: #f5f5f5;
  --area-pink: #cf4c80;
  --area-pink-tint: #fdf3f7;
  --area-flourish: url('../assets/img/flourish.svg');

  display: block;
  background: #fff;
  color: var(--area-ink);
  font-family: var(--area-ja);
  line-height: 1.8;
  overflow-x: clip;
}

.nsg-area-page *,
.nsg-area-page *::before,
.nsg-area-page *::after { box-sizing: border-box; }

.nsg-area-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.area-container {
  width: min(92%, 1240px);
  margin-inline: auto;
}

.area-section {
  padding-block: min(13vw, 92px);
  scroll-margin-top: 84px;
}

.area-section--tight { padding-block: min(10vw, 68px); }
.area-section--surface { background: var(--area-surface); }

/* ---------- 見出し ---------- */

.area-heading { margin-bottom: clamp(24px, 3vw, 40px); }

.area-heading h2 {
  margin: 0;
  font: 400 clamp(29px, 3.4vw, 46px)/1.2 var(--area-en);
  letter-spacing: .01em;
}

.area-heading h2::after {
  content: '';
  display: inline-block;
  width: clamp(56px, 5vw, 110px);
  height: 30px;
  margin-left: clamp(10px, 1.4vw, 20px);
  vertical-align: middle;
  background: var(--area-flourish) right center / contain no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

.area-heading > p {
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: .16em;
  line-height: 1.6;
}

.area-heading .area-heading__lead {
  margin-top: 16px;
  max-width: 42em;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: .02em;
  color: var(--area-sub);
}

/* ---------- 共通パーツ ---------- */

.area-note {
  margin: 20px 0 0;
  padding: 12px 14px;
  background: var(--area-pink-tint);
  font-size: 12px;
  line-height: 1.9;
  color: var(--area-sub);
}

.area-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--area-ink);
  border-radius: 999px;
  font-size: clamp(14px,1.3vw,16px);
  letter-spacing: .06em;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  color: var(--area-ink);
  transition: background-color .25s, color .25s, border-color .25s;
}

.area-pill--fill {
  background: var(--area-pink);
  border-color: var(--area-pink);
  color: #fff;
}

.area-pill--block { display: flex; width: 100%; }

.area-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--area-sub);
}

.area-textlink span { border-bottom: 1px solid currentColor; }

@media (hover: hover) {
  .area-pill:hover { background: #f1f1f1; }
  .area-pill--fill:hover { background: #b33e6d; border-color: #b33e6d; color: #fff; }
  .area-textlink:hover { color: var(--area-pink); }
}

/* ---------- パンくず ---------- */

.area-breadcrumb {
  border-top: 1px solid var(--area-line);
  border-bottom: 1px solid var(--area-line);
}

.area-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--area-sub);
  overflow-wrap: anywhere;
}

.area-breadcrumb li + li::before {
  content: '／';
  margin-right: 10px;
  color: var(--area-muted);
}

.area-breadcrumb a { text-decoration: none; color: inherit; }

@media (hover: hover) {
  .area-breadcrumb a:hover { text-decoration: underline; }
}

/* =========================================================
   01 AREA HERO
   ========================================================= */

.area-hero {
  position: relative;
  isolation: isolate;
  background: #fff;
}

.area-hero__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--area-surface);
}

.area-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.area-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0 55%, rgba(255,255,255,.75) 88%, #fff 100%);
}

.area-hero__copy {
  position: relative;
  z-index: 1;
  padding-block: 26px 36px;
}

.area-eyebrow {
  margin: 0;
  font: 400 11px/1.6 var(--area-en);
  letter-spacing: .22em;
  color: var(--area-sub);
}

.area-eyebrow span { margin-inline: 6px; color: var(--area-pink); }

.area-hero h1 {
  margin: 14px 0 0;
  font-size: clamp(23px, 6.2vw, 34px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .04em;
}

.area-hero__lead {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: clamp(14px,1.3vw,16px);
  line-height: 2;
  color: var(--area-sub);
}

.area-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.area-hero__actions .ornate-button { width: auto; min-width: 190px; }
@media (max-width: 600px) {
  .area-hero__actions .ornate-button {
    min-width: auto;
    width: calc(50% - 5px); }
  .area-hero__actions .area-pill {
    width: calc(50% - 5px);
  }
}

@media (min-width: 768px) {
  .area-hero h1 { font-size: clamp(30px, 3.6vw, 44px); }
}

@media (min-width: 1001px) {
  .area-hero__photo { position: absolute; inset: 0; aspect-ratio: auto; }
  .area-hero__photo::after {
    background: linear-gradient(96deg, #fff 0 26%, rgba(255,255,255,.93) 46%, rgba(255,255,255,.6) 66%, rgba(255,255,255,.2) 100%);
  }
  .area-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(440px, 34vw, 520px);
    padding-block: 48px;
  }
  .area-hero__copy > * { max-width: 690px; }
}

.area-sparkles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.area-sparkles i {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  opacity: 0;
  background: radial-gradient(circle, #fff 0 4%, rgba(255,249,235,.82) 8%, rgba(255,225,243,.55) 20%, transparent 68%);
  animation: area-twinkle var(--p, 3.4s) var(--d, 0s) infinite ease-in-out;
}

.area-sparkles i:nth-child(1) { left: 78%; top: 24%; --p: 3.4s; --d: -.6s; }
.area-sparkles i:nth-child(2) { left: 88%; top: 56%; --p: 4.2s; --d: -2.1s; }

@keyframes area-twinkle {
  0%, 30%, 100% { opacity: 0; }
  55% { opacity: .95; }
  78% { opacity: .3; }
}

@media (max-width: 1000px) {
  .area-sparkles i:nth-child(1) { left: 84%; top: 16%; }
  .area-sparkles i:nth-child(2) { left: 14%; top: 34%; }
}

@media (prefers-reduced-motion: reduce) {
  .area-sparkles { display: none; }
}

/* =========================================================
   02 SHOP
   ========================================================= */

.area-shop-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-shop-list > li { display: flex; }

@media (min-width: 768px) {
  .area-shop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.area-shop {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--area-line);
  background: #fff;
}

.area-shop__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--area-surface);
}

.area-shop__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 店内写真が未入稿の店舗はロゴを切らずに収める */
.area-shop__photo--logo {
  background: #fff;
  border-bottom: 1px solid var(--area-line);
}

.area-shop__photo--logo img { object-fit: contain; padding: 7% 10%; }

.area-shop__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(16px, 2vw, 24px);
}

.area-shop__name {
  display: block;
  font: 400 clamp(18px, 1.7vw, 23px)/1.4 var(--area-en);
  overflow-wrap: anywhere;
}

.area-shop__concept {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--area-sub);
}

.area-shop__data {
  margin: 16px 0 0;
  border-top: 1px solid var(--area-line);
}

.area-shop__data > div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  padding-block: 10px;
  border-bottom: 1px solid var(--area-line);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.area-shop__data dt { color: var(--area-muted); }
.area-shop__data dd { margin: 0; overflow-wrap: anywhere; }

.area-shop__note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--area-muted);
}

.area-shop__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: auto;
  padding-top: 18px;
}

@media (hover: hover) {
  .area-shop:hover { border-color: var(--area-pink); }
}

/* 掲載店舗が1件のエリア用：フィーチャー店舗カード
   店舗が2〜3件に増えたら li から area-shop--feature を、
   ul から area-shop-list--single を外すだけで通常グリッドへ戻る */
.area-shop-list--single { grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .area-shop--feature {
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: stretch;
  }
  .area-shop--feature .area-shop__photo { aspect-ratio: 16 / 10; height: 100%; }
  .area-shop--feature .area-shop__body {
    justify-content: center;
    padding: clamp(24px, 3vw, 44px);
  }
  .area-shop--feature .area-shop__actions { margin-top: 24px; }
  .area-shop--feature .area-pill--block { width: auto; min-width: 240px; align-self: flex-start; }
}

/* =========================================================
   03 CAST
   ========================================================= */

.area-cast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .area-cast-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 登録件数が1〜複数件で変動するエリア用：件数に応じて自然に並ぶ
   （4列固定のままだと1〜2名登録時に空列ができるため） */
.area-cast-grid--auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

@media (min-width: 768px) {
  .area-cast-grid--auto {
    grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
    justify-content: start;
  }
}

.area-cast-grid > li { display: flex; }

.area-cast {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.area-cast__photo {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--area-surface);
  border: 1px solid var(--area-line);
}

.area-cast__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.area-cast__name {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: .08em;
}

.area-cast__shop {
  display: block;
  margin-top: 5px;
  font: 400 11.5px/1.6 var(--area-en);
  letter-spacing: .06em;
  color: var(--area-muted);
}

/* 店舗詳細ページへの内部導線パネル */
.area-cast-shops {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--area-line-strong);
  background: #fff;
}

@media (min-width: 768px) {
  .area-cast-shops { grid-column: span 2; }
}

.area-cast-shops h3 {
  margin: 0 0 6px;
  font: 400 clamp(15px, 1.4vw, 18px)/1.5 var(--area-en);
}

.area-cast-shops p {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--area-sub);
}

.area-cast-shops ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-cast-shops li + li { border-top: 1px solid var(--area-line); }

.area-cast-shops .area-textlink { width: 100%; justify-content: space-between; }

@media (hover: hover) {
  .area-cast:hover .area-cast__name { color: var(--area-pink); }
}

/* =========================================================
   04 CONCEPT
   ========================================================= */

.area-concept__inner {
  display: grid;
  gap: clamp(26px, 3.5vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .area-concept__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* 比較対象の店舗が1件のエリア用：1カラムに戻す */
.area-concept__inner--single { grid-template-columns: 1fr; max-width: 46em; }

.area-concept__lead {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .06em;
}

.area-concept__body {
  margin: 18px 0 0;
  font-size: clamp(14px,1.3vw,16px);
  line-height: 2.05;
  color: var(--area-sub);
}

.area-locations {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--area-line-strong);
}

.area-locations > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  align-items: baseline;
  padding-block: 16px;
  border-bottom: 1px solid var(--area-line);
}

.area-locations__name { font: 400 clamp(15px, 1.4vw, 18px)/1.5 var(--area-en); }

.area-locations__place {
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--area-sub);
}

/* =========================================================
   05 ACCESS
   ========================================================= */

.area-access-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--area-line-strong);
}

.area-access-list > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 28px;
  padding-block: clamp(20px, 2.4vw, 26px);
  border-bottom: 1px solid var(--area-line);
}

@media (min-width: 768px) {
  .area-access-list > li {
    grid-template-columns: minmax(170px, 1fr) minmax(0, 2.2fr) auto;
    align-items: center;
  }
}

.area-access__name { font: 400 clamp(18px, 1.6vw, 20px)/1.4 var(--area-en); }

.area-access__data {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

.area-access__data > div {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}

.area-access__data dt { flex: 0 0 68px; color: var(--area-muted); }
.area-access__data dd { margin: 0; overflow-wrap: anywhere; width: calc(100% - 80px); }
.area-access__data a { color: inherit; }

.area-access__action { justify-self: start; }

@media (min-width: 768px) {
  .area-access__action { justify-self: end; }
}

/* =========================================================
   06 AREA GUIDE
   ========================================================= */

.area-guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3vw, 40px);
}

@media (min-width: 900px) {
  .area-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.area-guide__item {
  padding-top: 18px;
  border-top: 1px solid var(--area-line-strong);
}

.area-guide__item h3 {
  margin: 0 0 10px;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.7;
}

.area-guide__item p {
  margin: 0;
  font-size: clamp(14px,1.3vw,16px);
  line-height: 2.05;
  color: var(--area-sub);
}

.area-guide__item p + p { margin-top: 1em; }

.area-guide__item a { color: inherit; }

/* =========================================================
   07 FAQ
   ========================================================= */

.area-faq { border-top: 1px solid var(--area-line-strong); }

.area-faq details { border-bottom: 1px solid var(--area-line); }

.area-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
}

.area-faq summary::-webkit-details-marker { display: none; }

.area-faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font: 22px/1 var(--area-en);
  color: var(--area-pink);
}

.area-faq details[open] summary::after { content: '−'; }

.area-faq__q { display: flex; gap: 12px; align-items: baseline; }

.area-faq__q::before {
  content: 'Q';
  font: 400 15px/1 var(--area-en);
  color: var(--area-pink);
}

.area-faq__a {
  padding: 0 0 22px 27px;
  font-size: 14px;
  line-height: 2.05;
  color: var(--area-sub);
}

.area-faq__a a { color: inherit; }

/* =========================================================
   08 RECRUIT
   ========================================================= */

.area-recruit__inner {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 48px);
  background: var(--area-pink-tint);
}

@media (min-width: 768px) {
  .area-recruit__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

.area-recruit h2 {
  margin: 0;
  font: 400 clamp(32px, 4vw, 48px)/1.1 var(--area-en);
}

.area-recruit__copy {
  margin: 12px 0 0;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.7;
  letter-spacing: .04em;
}

.area-recruit__note {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--area-sub);
}

.area-recruit__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* リンク未設定時の案内（偽リンクを置かない） */
.area-recruit__pending {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px dashed var(--area-muted);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--area-sub);
}
.area-recruit .btn-outline-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--area-ink);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .04em;
}

/* =========================================================
   09 OTHER AREAS（他エリア共通部品）
   ========================================================= */

.area-others-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.2vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .area-others-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.area-other {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #1a1a1a;
}

.area-other__photo { display: block; aspect-ratio: 16 / 9; }

.area-other__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  transition: opacity .3s;
}

.area-other__label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(16px, 2vw, 24px);
  background: linear-gradient(transparent, rgba(0,0,0,.62));
}

.area-other__en {
  display: block;
  font: 400 clamp(16px, 1.7vw, 22px)/1.3 var(--area-en);
  letter-spacing: .04em;
}

.area-other__ja {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .12em;
}

.area-other__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  font: 18px/1 var(--area-en);
}

@media (hover: hover) {
  .area-other:hover .area-other__photo img { opacity: .92; }
}

/* ---------- フォーカス可視化 ---------- */

.nsg-area-page a:focus-visible,
.nsg-area-page summary:focus-visible {
  outline: 2px solid var(--area-pink);
  outline-offset: 4px;
}

/* ---------- 狭幅・固定UI対応 ---------- */

@media (max-width: 600px) {
  .area-section { scroll-margin-top: 70px; }
  .nsg-area-page .area-section:last-of-type { padding-bottom: min(16vw, 72px); }
}

@media (max-width: 360px) {
  .area-container { width: calc(100% - 28px); }
  .area-shop__data > div { grid-template-columns: 60px minmax(0, 1fr); gap: 8px; }
  .area-access__data dt { flex-basis: 56px; }
  .area-pill { padding-inline: 14px; font-size: 12px; }
}

/* =========================================================
   ここから東京歌舞伎町エリアページ用
   ここから北海道すすきのエリアページ用
   両エリア共通の差分のみ。その他は上記の共通スタイルを使用。
   ========================================================= */
@media (min-width: 900px) {
  .nsg-area-page--tokyo-kabukicho .area-shop--feature .area-shop__photo,
  .nsg-area-page--hokkaido-susukino .area-shop--feature .area-shop__photo {
    object-fit: cover;
    width: 100%;
    object-position: center center;
  }
}