/* にいがた Go To トラベル — サイト本体スタイル */
:root {
  --ng-pink: #ff4f8b;
  --ng-pink-deep: #e83672;
  --ng-orange: #d86530;
  --ng-orange-deep: #a8471e;
  --ng-blue: #5eb8d8;
  --ng-blue-deep: #2a8fb5;
  --ng-ink: #1a1a1a;
  --ng-paper: #f7f4ef;
  --ng-line: #d9d2c8;
  --ng-white: #fff;
  --ng-dark: #141820;
  --ng-header: 88px;
  color-scheme: light only;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: light only;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-text-fill-color: currentColor;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption {
  margin: 0;
}

body {
  min-height: 100vh;
  font-family: helvetica-neue-lt-pro, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ng-ink);
  line-height: 1.7;
  background: var(--ng-dark);
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

.displayUnderMd {
  display: none;
}

@media (max-width: 767px) {
  .displayUnderMd {
    display: inline;
  }

  .displayMoreMd {
    display: none;
  }
}

.u-white-outline {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

/* loading */
.loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading__logo {
  width: min(180px, 50vw);
  margin: 0 auto 20px;
}

.loading__spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 3px solid #eee;
  border-top-color: var(--ng-orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px 40px;
  pointer-events: none;
}

.header__bottom,
.headerHumberger,
.header__reservation {
  pointer-events: auto;
}

.header__logoLink {
  display: grid;
  position: fixed;
  left: 40px;
  right: 40px;
  bottom: 32px;
  z-index: 1001;
  width: auto;
  line-height: 0;
  pointer-events: none;
}

.header__brandSet {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 12%) minmax(0, 1fr) minmax(0, 24%);
  align-items: end;
  column-gap: clamp(20px, 3.2vw, 48px);
  width: 100%;
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.header__brandSet--c {
  opacity: 0;
}

.header.is-brand-bottom-c .header__brandSet--w {
  opacity: 0;
}

.header.is-brand-bottom-c .header__brandSet--c {
  opacity: 1;
}

/* 風景ギャラリー中は下部ブランドを隠す */
.header.is-brand-hidden .header__brandSet--w,
.header.is-brand-hidden .header__brandSet--c {
  opacity: 0;
  pointer-events: none;
}

.header.is-brand-hidden .header__brandSet--w .header__brandLogo,
.header.is-brand-hidden .header__brandSet--c .header__brandLogo,
.header.is-brand-hidden .header__brandSet--w .header__brandHomeLink,
.header.is-brand-hidden .header__brandSet--c .header__brandHomeLink {
  pointer-events: none;
}

/* PC: エリアポップアップ表示中はヘッダーブランドを隠す */
@media (min-width: 901px) {
  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--w,
  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--c {
    opacity: 0;
    pointer-events: none;
  }

  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--w .header__brandLogo,
  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--c .header__brandLogo,
  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--w .header__brandHomeLink,
  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--c .header__brandHomeLink,
  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--w .header__brandLogo2Link,
  body:has(.ng-areas-intro.is-popover-open) .header__brandSet--c .header__brandLogo2Link {
    pointer-events: none;
  }
}

.header__brandLogo2 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 39.55 / 29.05;
  justify-self: stretch;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
}

.header__brandLogo2Link,
.header__brandHomeLink {
  display: block;
  width: 100%;
  justify-self: stretch;
  line-height: 0;
  pointer-events: none;
}

.header__brandSet--w .header__brandLogo2Link,
.header__brandSet--w .header__brandHomeLink {
  pointer-events: auto;
}

.header.is-brand-bottom-c .header__brandSet--w .header__brandLogo2Link,
.header.is-brand-bottom-c .header__brandSet--w .header__brandHomeLink {
  pointer-events: none;
}

.header.is-brand-bottom-c .header__brandSet--c .header__brandLogo2Link,
.header.is-brand-bottom-c .header__brandSet--c .header__brandHomeLink {
  pointer-events: auto;
}

.header.is-brand-hidden .header__brandLogo2Link,
.header.is-brand-hidden .header__brandHomeLink {
  pointer-events: none;
}

.header__brandLabel {
  display: block;
  position: relative;
  top: -0.5vw;
  width: 100%;
  height: auto;
  aspect-ratio: 301.76 / 15.04;
  justify-self: stretch;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.header.is-brand-label-hidden .header__brandLabel {
  opacity: 0;
  visibility: hidden;
}

.header__brandLogo {
  display: block;
  position: relative;
  top: 0.95vw;
  width: 100%;
  height: auto;
  /* logo-w / logo-c で切替時に跳ねないよう枠を統一 */
  aspect-ratio: 85.42 / 41.37;
  justify-self: stretch;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}

.header__brandSet--w .header__brandLogo {
  pointer-events: auto;
}

.header.is-brand-bottom-c .header__brandSet--w .header__brandLogo {
  pointer-events: none;
}

.header.is-brand-bottom-c .header__brandSet--c .header__brandLogo {
  pointer-events: auto;
}

.header__brandSet--w .header__brandLogo2,
.header__brandSet--w .header__brandLabel,
.header__brandSet--w .header__brandLogo {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}

.header__brandSet--c .header__brandLogo2,
.header__brandSet--c .header__brandLabel,
.header__brandSet--c .header__brandLogo {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.45)) drop-shadow(0 2px 6px rgba(255, 255, 255, 0.35));
}

.header__bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1002;
  margin-left: auto;
}

.header__reservation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--ng-orange);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.32), 0 0 0 0px rgba(255, 255, 255, 0.28);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.header__reservation:hover {
  background: var(--ng-orange-deep);
  color: #fff;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.32), 0 0 0 0px rgba(255, 255, 255, 0.28);
}

.header.is-brand-c .header__reservation {
  background: var(--ng-orange);
  color: #fff;
}

.header.is-brand-c .header__reservation:hover {
  background: var(--ng-orange-deep);
  color: #fff;
}

.headerHumberger {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  position: relative;
  padding: 0;
}

.headerHumberger__stick {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, top 0.3s, background 0.25s;
}

.headerHumberger__stick:nth-child(1) {
  top: 14px;
}

.headerHumberger__stick:nth-child(2) {
  top: 21px;
}

.headerHumberger__stick:nth-child(3) {
  top: 28px;
}

.header.is-brand-c .headerHumberger__stick,
.header[data-nav="open"] .headerHumberger__stick {
  background: var(--ng-ink);
}

.header[data-nav="open"] .headerHumberger__stick:nth-child(1) {
  top: 21px;
  transform: rotate(40deg);
}

.header[data-nav="open"] .headerHumberger__stick:nth-child(2) {
  opacity: 0;
}

.header[data-nav="open"] .headerHumberger__stick:nth-child(3) {
  top: 21px;
  transform: rotate(-40deg);
}

.header__menu {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: #fff;
  color: var(--ng-ink);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s ease, opacity 0.35s, visibility 0.35s;
  overflow-y: auto;
  pointer-events: none;
}

.header[data-nav="open"] .header__menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header__menuInner {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 24px 48px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.header__menuLogo {
  width: min(240px, 70%);
  height: auto;
  display: block;
  margin: 0 auto;
}

.header__menuList {
  display: grid;
  gap: 18px;
  text-align: center;
}

.header__menuList a {
  display: inline-block;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ng-ink);
  transform: none !important;
}

.header__menuList a:hover {
  color: var(--ng-orange);
}

.header__menuSub {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: auto;
}

.header__menuSub a {
  font-size: 14px;
  font-weight: 700;
  color: #444;
}

.header__menuSub a:hover {
  color: var(--ng-orange);
}

.header__menuCta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-top: 12px;
  padding: 0 22px;
  border-radius: 16px;
  background: var(--ng-pink);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.header__menuCtaContent {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
}

.header__menuCtaTitle {
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.35;
}

.header__menuCta:hover {
  background: var(--ng-pink-deep);
}

/* popup — 右上（ヘッダー操作の下に配置） */
.ng-popup {
  position: fixed;
  right: 24px;
  left: auto;
  top: 96px;
  bottom: auto;
  z-index: 900;
  width: min(300px, calc(100vw - 48px));
  background: #fff;
  color: var(--ng-ink);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  padding: 18px 16px 16px;
}

.ng-popup[hidden] {
  display: none !important;
}

.header[data-nav="open"]~.ng-popup {
  display: none !important;
}

.ng-popup__eyebrow {
  color: var(--ng-pink);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.ng-popup__title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  margin: 0 0 12px;
}

.ng-popup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 8px;
  background: var(--ng-pink);
  color: #fff;
  font-weight: 800;
}

.ng-popup__btn:hover {
  background: var(--ng-pink-deep);
}

.ng-popup__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: #666;
}

/* hero — 背景は期間セクションまで固定 */
.mainVisual {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  color: #fff;
  /* 固定子要素のスペーサー */
}

.mainVisual__background,
.mainVisual__slider,
.mainVisual__item {
  position: absolute;
  inset: 0;
}

.mainVisual__background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 0;
}

.mainVisual__imageContainer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.mainVisual__imageContainer.is-active {
  opacity: 1;
}

.mainVisual__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mainVisual__content {
  position: fixed;
  inset: 0;
  z-index: 2;
  padding: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0.7s ease, transform 0.7s ease;
}

.mainVisual__content>* {
  pointer-events: auto;
}

.mainVisual.is-scrolled .mainVisual__content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-24px);
  pointer-events: none;
}

.mainVisual__heroRow {
  position: relative;
  width: 100%;
  height: 100%;
}

.mainVisual__fanBlock {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(650px, 78vw);
  max-width: 650px;
  transform: translate(-50%, -50%);
}

.fanAnimationStage {
  width: 100%;
  margin-bottom: -4%;
}

.fanAnimation {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fanAnimation g[id$="-animation"] {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}

/* 割引テキスト — 枠なし・ピンク・ゴシック・イタリック */
.ng-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: auto;
  max-width: min(380px, 92vw);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  color: var(--ng-pink);
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-style: italic;
  line-height: 1.15;
  text-align: right;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.35);
}

.ng-plan__lead {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--ng-pink);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: inherit;
}

.ng-plan__off {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.02em;
  margin: 2px 0 0;
  color: var(--ng-pink);
  line-height: 0.78;
}

.ng-plan__num {
  font-size: clamp(104px, 15vw, 156px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.78;
}

.ng-plan__pct {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: 0.02em;
  padding-bottom: 0.18em;
  margin-left: 0.02em;
}

.ng-plan__cap {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 700;
  color: var(--ng-pink);
  line-height: 1.45;
  text-align: inherit;
  letter-spacing: 0.04em;
}

.ng-plan__cap em {
  font-style: italic;
  color: #fff;
  font-size: 1.35em;
  font-weight: 900;
  padding: 0 0.08em;
}

.ng-plan--large {
  width: auto;
  max-width: min(480px, 100%);
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
  padding-bottom: 0;
}

.ng-plan--large .ng-plan__lead {
  font-size: clamp(20px, 2.6vw, 28px);
}

.ng-plan--large .ng-plan__off {
  justify-content: center;
}

.ng-plan--large .ng-plan__num {
  font-size: clamp(128px, 18vw, 196px);
}

.ng-plan--large .ng-plan__pct {
  font-size: clamp(48px, 6.5vw, 72px);
}

.ng-plan--large .ng-plan__cap {
  font-size: clamp(16px, 2vw, 20px);
}

/* summary — 固定MVの上に半透明で被さる（背景固定が意味を持つ） */
.campaignSummary {
  --cs-yellow: #ffe600;
  position: relative;
  z-index: 3;
  background: transparent;
  color: #fff;
  font-family: helvetica-neue-lt-pro, sans-serif;
  padding: 72px 24px 100px;
  opacity: 0;
  transition: opacity 0.9s ease;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.campaignSummary.is-active {
  opacity: 1;
}

.campaignSummary__container {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.campaignSummary__inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 56px);
  background: rgba(12, 16, 24, 0.62);
  border: none;
  border-radius: 0;
  padding: 2em 1.5em 4em;
  text-align: center;
  box-shadow: none;
}

.campaignSummary__periods {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.campaignSummary__period {
  width: 100%;
}

.campaignSummary__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  line-height: 1;
}

.campaignSummary__heading::before,
.campaignSummary__heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
}

.campaignSummary__heading span::before {
  content: "【";
}

.campaignSummary__heading span::after {
  content: "】";
}

.campaignSummary__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.campaignSummary__text span {
  white-space: nowrap;
}

.campaignSummary__note {
  margin: 4px 0 0;
  max-width: 760px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.campaignSummary__highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 1vw, 56px);
  text-align: left;
  container-type: inline-size;
  container-name: campaign-highlight;
}

.campaignSummary__rate {
  --campaign-rate-size: min(34cqw, 220px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0.65 1 320px;
  min-width: min(100%, 320px);
  max-width: 100%;
}

.campaignSummary__cap {
  flex: 1 1 480px;
  min-width: min(100%, 480px);
  max-width: 100%;
  container-type: inline-size;
  container-name: campaign-cap;
}

/* 2列が入らなくなったら縦並び用の見た目に切替（ビューポート分岐ではなくコンテナ幅） */
@container campaign-highlight (max-width: 827px) {
  .campaignSummary__rate {
    --campaign-rate-size: min(42cqw, 168px);
    align-items: center;
  }

  .campaignSummary__rateHead {
    justify-content: center;
  }

  .campaignSummary__rateLead {
    font-size: min(6.4cqw, 26px);
  }

  .campaignSummary__rateValue {
    justify-content: center;
  }

  .campaignSummary__ratePct {
    font-size: min(16cqw, 64px);
  }

  .campaignSummary__badge {
    font-size: min(3.8cqw, 16px);
  }

  .campaignSummary__capHeading {
    justify-content: center;
  }

  .campaignSummary__capValue {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    white-space: normal;
  }

  .campaignSummary__capLead {
    font-size: min(4.4cqw, 18px);
  }

  .campaignSummary__capUnit {
    font-size: min(5.5cqw, 24px);
  }
}

.campaignSummary__rateHead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.campaignSummary__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--campaign-rate-size) * 0.48);
  height: calc(var(--campaign-rate-size) * 0.48);
  border-radius: 50%;
  border: 2px solid var(--cs-yellow);
  background: transparent;
  color: var(--cs-yellow);
  font-size: clamp(14px, 1.65vw, 20px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  flex: 0 0 auto;
}

.campaignSummary__rateLead {
  margin: 0;
  color: var(--cs-yellow);
  font-size: min(5.2cqw, 34px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.campaignSummary__rateValue {
  display: flex;
  align-items: flex-end;
  margin: 0;
  color: var(--cs-yellow);
  line-height: 0.82;
}

.campaignSummary__rateNum {
  margin-right: -0.06em;
  font-size: var(--campaign-rate-size);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.82;
  font-variant-numeric: tabular-nums;
}

.campaignSummary__ratePct {
  margin: 0 0 0 -0.01em;
  font-size: min(13.5cqw, 88px);
  font-weight: 900;
  line-height: 0.82;
}

.campaignSummary__capHeading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  line-height: 1;
}

.campaignSummary__capHeading::before,
.campaignSummary__capHeading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
}

.campaignSummary__capHeading span::before {
  content: "【";
}

.campaignSummary__capHeading span::after {
  content: "】";
}

.campaignSummary__capLead {
  margin-right: 0.25em;
  font-size: min(4.8cqw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.campaignSummary__capValue {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0 0 10px;
  line-height: 1;
  white-space: nowrap;
}

.campaignSummary__capNum {
  font-size: min(21cqw, 110px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
}

.campaignSummary__capUnit {
  font-size: min(7cqw, 30px);
  font-weight: 800;
}

.campaignSummary__examples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: min(2.4cqw, 12px);
  container-type: inline-size;
  container-name: campaign-examples;
}

.campaignSummary__example {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) auto minmax(0, 1.2fr);
  align-items: center;
  column-gap: min(3.4cqw, 18px);
  min-height: min(15cqw, 68px);
  padding: min(2.8cqw, 10px) min(4.2cqw, 22px);
  border-radius: min(2.6cqw, 12px);
  background: #fff;
  color: #1a1a1a;
}

.campaignSummary__exampleCond {
  text-align: center;
  font-size: min(5cqw, 22px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: scaleX(0.94);
  transform-origin: center;
  display: inline-block;
}

.campaignSummary__exampleSep {
  display: block;
  width: 1px;
  height: 64%;
  align-self: center;
  background: #1a1a1a;
  opacity: 1;
}

.campaignSummary__exampleResult {
  display: inline-flex;
  align-items: baseline;
  justify-self: start;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
  transform: scaleX(0.80);
  transform-origin: left center;
}

.campaignSummary__exampleResult strong {
  font-size: min(13.5cqw, 58px);
  font-weight: 900;
  line-height: 1;
}

.campaignSummary__exampleResult small {
  margin-left: 0.06em;
  font-size: min(5.2cqw, 20px);
  font-weight: 900;
  line-height: 1;
}

.campaignSummary__exampleResult b {
  margin-left: 0.06em;
  font-size: min(13.5cqw, 40px);
  font-weight: 900;
  line-height: 1;
}

.campaignSummary__button {
  margin-top: 0;
  text-align: center;
}

.campaignSummary__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(420px, 100%);
  min-height: 56px;
  padding: 0 36px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.28);
  color: #fff;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.campaignSummary__cta:hover {
  background: #fff;
  color: #1a1a1a;
  transform: translateY(-1px);
}

.ng-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.ng-btn:hover {
  transform: translateY(-1px);
}

.ng-btn--primary {
  background: var(--ng-pink);
  color: #fff;
}

.ng-btn--primary:hover {
  background: var(--ng-pink-deep);
}

.ng-btn--secondary {
  background: var(--ng-blue);
  color: #fff;
}

.ng-btn--secondary:hover {
  background: var(--ng-blue-deep);
}

.ng-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.ng-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.ng-btn--block {
  width: 100%;
}

.ng-btn.is-disabled,
.ng-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* spots carousel — 大きいスライド／矢印下／全幅 */
.ng-spots {
  position: relative;
  z-index: 3;
  background: #fff;
  padding: 72px 0 0;
  overflow: hidden;
}

.ng-spots__inner {
  max-width: none;
  margin: 0 0 28px;
  padding: 0 48px 0 56px;
  text-align: left;
}

.ng-spots__title {
  font-size: clamp(44px, 9vw, 80px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--ng-ink);
  margin-bottom: 12px;
}

.ng-spots__lead {
  color: #555;
  font-size: 16px;
}

.ng-spots__carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ng-spots__stage {
  position: relative;
  height: min(480px, 52vw);
  min-height: 280px;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.ng-spots__stage.is-dragging {
  cursor: grabbing;
}

.ng-spots__arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 0px;
}

.ng-spots__arrow {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ng-pink);
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  z-index: 4;
}

.ng-spots__arrow:hover {
  color: var(--ng-pink-deep);
}

.ng-spots__card {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 18.5vw;
  margin: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  filter: saturate(0.75);
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
  pointer-events: none;
  z-index: 1;
}

.ng-spots__card.is-left-2 {
  transform: translate(calc(-50% - 40vw), -50%) scale(1);
  opacity: 0.45;
  z-index: 1;
}

.ng-spots__card.is-left-1,
.ng-spots__card.is-left {
  transform: translate(calc(-50% - 20vw), -50%) scale(1);
  opacity: 0.7;
  z-index: 2;
}

.ng-spots__card.is-right-1,
.ng-spots__card.is-right {
  transform: translate(calc(-50% + 20vw), -50%) scale(1);
  opacity: 0.7;
  z-index: 2;
}

.ng-spots__card.is-right-2 {
  transform: translate(calc(-50% + 40vw), -50%) scale(1);
  opacity: 0.45;
  z-index: 1;
}

.ng-spots__card.is-far-left,
.ng-spots__card.is-far-right,
.ng-spots__card.is-hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 0;
}

.ng-spots__card.is-center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: none;
  z-index: 3;
}

.ng-spots__card img {
  width: 100%;
  height: min(360px, 40vw);
  min-height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  pointer-events: none;
}

.ng-spots__card figcaption {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  font-weight: 800;
  font-size: clamp(15px, 2vw, 20px);
  text-align: center;
  color: var(--ng-ink);
  background: none;
  transition: opacity 0.35s ease;
}

.ng-spots__card.is-center figcaption {
  height: auto;
  overflow: visible;
  opacity: 1;
}

/* spots collage */
.ng-spots {
  padding: clamp(80px, 10vw, 128px) 24px clamp(72px, 8vw, 120px);
  overflow: visible;
  z-index: 4;
}

.ng-spots__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.ng-spots__title {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  color: #271b19;
  font-family: a-otf-gothic-mb101-pr6n, sans-serif;
  font-size: clamp(20px, 6.2vw, 84px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.12;
}

.ng-spots__titleImg {
  display: block;
  width: auto;
  height: 2em;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

.ng-spots__titleLine {
  display: block;
  white-space: nowrap;
}

.js-section-fade-body {
  opacity: 0;
  transform: translate3d(0, 96px, 0);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-section-fade.is-in .js-section-fade-body {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ng-spots__lead {
  display: grid;
  gap: 4px;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  color: #271b19;
  font-family: helvetica-neue-lt-pro, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: clamp(13px, 1.45vw, 19px);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.65;
}

.ng-spots__lead p {
  margin: 0;
}

.ng-spots__patternViewport {
  width: 100%;
}

.ng-spots__pattern {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.ng-spots__patternSvg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ng-spots__patternImg {
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: transform;
}

.ng-spots__patternViewport.is-visible .ng-spots__patternImg {
  opacity: 1;
}

@media (max-width: 767px) {
  .ng-spots {
    padding: clamp(72px, 14vw, 96px) 16px 28px;
  }

  .ng-spots__lead {
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 22px;
  }

  .ng-spots__leadBreak {
    display: block;
  }

  .ng-spots__patternViewport {
    overflow: hidden;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  .ng-spots__pattern {
    width: 920px;
    max-width: none;
    margin: 0;
    will-change: transform;
  }
}

/* booking — 旅行のご予約（独立セクション） */
.ng-booking {
  position: relative;
  z-index: 1;
  background: #fff;
  color: #271b19;
}

.ng-booking__track {
  display: flex;
  align-items: center;
  padding: clamp(56px, 7vw, 96px) 24px clamp(64px, 8vw, 104px);
}

.ng-booking__stage {
  width: 100%;
}

.ng-booking__inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

.ng-booking__title {
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  color: #271b19;
  font-family: helvetica-neue-lt-pro, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: clamp(18px, 5.8vw, 80px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.ng-booking__titleImg {
  display: block;
  width: auto;
  height: 1em;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

.ng-booking__logos {
  min-height: 0;
  margin: 0 auto clamp(28px, 3.5vw, 40px);
}

.ng-booking__logosGrid {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1000px);
  min-height: 0;
  margin-inline: auto;
  container-type: inline-size;
  container-name: ng-booking-logos;
  --ng-booking-logo-scale: 0.75;
  --ng-booking-logo-gap: clamp(16px, 2vw, 28px);
  /* 下段6個の画像幅合計。グリッド幅に収まるよう縮尺 */
  --ng-booking-logos-base: 1340;
  gap: var(--ng-booking-logo-gap);
}

.ng-booking__logosRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: var(--ng-booking-logo-gap);
}

.ng-booking__logosItem {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ng-booking__logosItem img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* 最大0.75倍。下段6個+gapがグリッド幅を超える場合は比例縮小 */
.ng-booking__logosItem--ikyu img {
  width: min(
    calc(178px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 178 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--yahoo img {
  width: min(
    calc(326px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 326 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--knt img {
  width: min(
    calc(380px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 380 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--jtb img {
  width: min(
    calc(210px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 210 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--rurubu img {
  width: min(
    calc(273px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 273 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--nta img {
  width: min(
    calc(186px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 186 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--yumeyado img {
  width: min(
    calc(156px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 156 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--yukoyuko img {
  width: min(
    calc(245px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 245 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--rakuten img {
  width: min(
    calc(177px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 177 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--jalan img {
  width: min(
    calc(209px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 209 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logosItem--tobutoptours img {
  width: min(
    calc(367px * var(--ng-booking-logo-scale)),
    calc((100cqw - 5 * var(--ng-booking-logo-gap)) * 367 / var(--ng-booking-logos-base))
  );
}

.ng-booking__logos--soon {
  width: 100%;
  max-width: 920px;
  padding: clamp(28px, 4vw, 48px) 24px;
  border: 4px dashed rgba(39, 27, 25, 0.35);
  border-radius: 24px;
}

.ng-booking__soon {
  margin: 0;
  color: #271b19;
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.35;
}

.ng-booking__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.ng-booking__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 280px);
  min-height: 54px;
  padding: 0 clamp(28px, 3.5vw, 44px);
  border: 1.5px solid #271b19;
  border-radius: 999px;
  background: #fff;
  color: #271b19;
  font-size: clamp(14px, 1.55vw, 17px);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.ng-booking__btn:not([aria-disabled="true"]):hover {
  background: #271b19;
  color: #fff;
}

.ng-booking.is-soon .ng-booking__btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.ng-booking__notes {
  display: grid;
  gap: 6px;
  color: #271b19;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

.ng-booking__notes p {
  margin: 0;
}

/* ボタン・注記を隠している間だけ余白を詰める（復活時は is-compact が外れる） */
.ng-booking.is-compact .ng-booking__track {
  min-height: 0;
  padding: clamp(48px, 5vw, 72px) 24px;
}

.ng-booking.is-compact .ng-booking__title {
  margin-bottom: clamp(16px, 2vw, 24px);
}

.ng-booking.is-compact .ng-booking__logos {
  min-height: 0;
  margin-bottom: 0;
}

.ng-booking.is-compact .ng-booking__logos--soon {
  padding: clamp(18px, 2.4vw, 28px) 24px;
}

@media (max-width: 767px) {
  .ng-booking__track {
    min-height: auto;
    align-items: flex-start;
    padding: 64px 16px 40px;
  }

  .ng-booking__logosGrid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    --ng-booking-logo-scale: 0.55;
    --ng-booking-logo-gap: 16px;
  }

  .ng-booking__logosRow {
    display: contents;
  }

  .ng-booking__logosItem {
    flex: 0 1 auto;
  }

  /* 固定width(min)を外し、max-widthのみで折り返し可能に */
  .ng-booking__logosItem img {
    width: auto;
  }

  .ng-booking__logosItem--ikyu img {
    max-width: calc(178px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--yahoo img {
    max-width: calc(326px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--knt img {
    max-width: calc(380px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--jtb img {
    max-width: calc(210px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--rurubu img {
    max-width: calc(273px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--nta img {
    max-width: calc(186px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--yumeyado img {
    max-width: calc(156px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--yukoyuko img {
    max-width: calc(245px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--rakuten img {
    max-width: calc(177px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--jalan img {
    max-width: calc(209px * var(--ng-booking-logo-scale));
  }

  .ng-booking__logosItem--tobutoptours img {
    max-width: calc(367px * var(--ng-booking-logo-scale));
  }

  .ng-booking__actions {
    flex-direction: column;
    align-items: center;
  }

  .ng-booking__btn {
    width: min(100%, 320px);
  }

  .ng-booking__notes {
    font-size: 13px;
  }

  .ng-booking.is-compact .ng-booking__track {
    padding: 40px 16px 36px;
  }
}

/* areas — 導入（地図＋ポップアップ） */
.ng-areas-intro {
  position: relative;
  z-index: 3;
  min-height: max(780px, min(100vh, 920px));
  min-height: max(780px, min(100svh, 920px));
  background: #fff;
  color: var(--ng-ink);
  overflow-x: hidden;
}

.ng-areas-intro.is-popover-open {
  /* 直下の湯・食・遊ロゴより手前に出し、はみ出し部分の被りを防ぐ */
  z-index: 5;
}

.ng-areas-intro__inner {
  position: relative;
  /* 地図を右に寄せつつ、ページ横スクロールは出さない */
  transform: translateX(4%);
  box-sizing: border-box;
  width: min(100%, 1360px);
  min-height: max(780px, min(100vh, 920px));
  min-height: max(780px, min(100svh, 920px));
  margin: 0 auto;
  /* 下の湯ロゴとポップアップが被らないよう底余白を確保 */
  padding: 72px 48px 220px 56px;
}

.ng-areas-intro__copy {
  position: relative;
  z-index: 2;
  width: min(50%, 530px);
  padding-top: clamp(12px, 14vh, 140px);
}

.ng-areas-intro__title {
  margin: 0;
  overflow: visible;
  color: #111;
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.28;
}

.ng-areas-intro__titleImg {
  display: block;
  width: auto;
  height: 3.5em;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.ng-areas-intro__lead {
  margin: 1em 0 0;
  max-width: 32em;
  color: #222;
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.04em;
}

.ng-areas-intro__map {
  position: absolute;
  top: 52%;
  left: 28%;
  right: auto;
  z-index: 1;
  width: min(74%, 880px);
  margin: 0;
  /* top-right 起点で scale のみ動かす（left/right 切替は補間できず跳ねるため使わない） */
  transform: translateY(-46%) scale(1);
  transform-origin: top right;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ng-areas-intro__map .ng-areas__mapSvg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(720px, 86vh);
  max-height: min(720px, 86svh);
}

/* 地図操作の軽い誘導チップ（最初のエリア選択まで） */
.ng-areas-intro__tapHint {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: min(280px, calc(100% - 24px));
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(39, 27, 25, 0.25);
  color: #271b19;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 16px rgba(39, 27, 25, 0.22));
  text-align: center;
}

.ng-areas-intro__tapHintIcon {
  flex: 0 0 auto;
  display: block;
  width: 14px;
  height: 14px;
}

.ng-areas-intro__tapHint.is-show {
  display: flex;
  opacity: 1;
  animation: ngAreasTapHintFloat 1.8s ease-in-out infinite;
}

@keyframes ngAreasTapHintFloat {
  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 6px));
  }
}

.ng-areas__mapSvg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.ng-areas__mapSvg--c [data-area] {
  cursor: pointer;
  transition: opacity 0.35s ease, filter 0.2s ease;
}

.ng-areas__mapSvg--c path[data-area] {
  stroke: none;
  outline: none;
}

.ng-areas__mapSvg--c path[data-area]:hover,
.ng-areas__mapSvg--c g[data-area]:hover path {
  filter: brightness(0.92);
}

.ng-areas-intro.is-popover-open .ng-areas__mapSvg--c [data-area].is-area-dimmed {
  opacity: 0.28;
  filter: none;
}

.ng-areas-intro.is-popover-open .ng-areas__mapSvg--c [data-area].is-area-active {
  opacity: 1;
}

/* 縮小時はエリア名ラベル（円＋文字パス）を隠す */
.ng-areas__mapSvg--c g[data-area] {
  transition: opacity 0.28s ease;
}

.ng-areas-intro.is-popover-open .ng-areas__mapSvg--c g[data-area],
.ng-areas-intro.is-popover-open .ng-areas__mapSvg--c g[data-area].is-area-active,
.ng-areas-intro.is-popover-open .ng-areas__mapSvg--c g[data-area].is-area-dimmed {
  opacity: 0;
  pointer-events: none;
}

/* areas popover wrap（矢印はカード外） */
.ng-areas-popover-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: min(470px, calc(100% - 24px));
  opacity: 0;
  transform: translate(-50%, calc(-50% + 14px));
  pointer-events: none;
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ng-areas-popover-wrap.is-open {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.ng-areas-popover-wrap[hidden] {
  display: none;
}

.ng-areas-popover-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

.ng-areas-popover {
  --area-color: #cce198;
  --area-ink: #271b19;
  position: relative;
  left: auto;
  top: auto;
  z-index: 1;
  box-sizing: border-box;
  width: min(350px, calc(100vw - 120px));
  max-width: 350px;
  max-height: min(78vh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 40px 16px 18px;
  color: var(--area-ink);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--area-color) 38%, #fff) 0%,
      color-mix(in srgb, var(--area-color) 14%, #f7f4ef) 100%
    );
  border: 1px solid color-mix(in srgb, var(--area-color) 55%, #271b19 12%);
  border-radius: 14px;
  box-shadow:
    0 18px 42px rgba(39, 27, 25, 0.16),
    0 2px 10px rgba(39, 27, 25, 0.06);
  transform: none;
  opacity: 1;
  pointer-events: auto;
  transition: background 0.35s ease, border-color 0.35s ease;
}

.ng-areas-popover.is-open {
  opacity: 1;
  transform: none;
}

.ng-areas-popover[data-area="murakami"] { --area-color: #cce198; }
.ng-areas-popover[data-area="niigata"] { --area-color: #a2daf7; }
.ng-areas-popover[data-area="yahiko"] { --area-color: #95d0c0; }
.ng-areas-popover[data-area="nagaoka"] { --area-color: #a3bce2; }
.ng-areas-popover[data-area="uonuma"] { --area-color: #d1bada; }
.ng-areas-popover[data-area="joetsu"] { --area-color: #f7c8ce; }
.ng-areas-popover[data-area="sado"] { --area-color: #f8c491; }

.ng-areas-popover__media {
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(39, 27, 25, 0.08);
  line-height: 0;
}

.ng-areas-popover__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 700 / 468;
  object-fit: cover;
}

.ng-areas-popover__close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--area-ink);
  box-shadow: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
}

.ng-areas-popover__close:hover {
  opacity: 1;
  color: var(--ng-orange);
}

/* PC用：カード下の閉じる（スマホでは非表示） */
.ng-areas-popover__dismiss {
  display: none;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 10px 32px;
  border: 1.5px solid #271b19;
  border-radius: 999px;
  background: transparent;
  color: #271b19;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ng-areas-popover__dismiss:hover {
  background: #271b19;
  color: #fff;
}

.ng-areas-popover__nav {
  --nav-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.2 2.2 L6.8 5 3.2 7.8' fill='none' stroke='%23d86530' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nav-chevron-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.2 2.2 L6.8 5 3.2 7.8' fill='none' stroke='%23a8471e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 3;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--nav-chevron);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  color: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transform: none;
}

.ng-areas-popover__nav:hover {
  background-image: var(--nav-chevron-hover);
}

.ng-areas-popover__nav--prev {
  transform: scaleX(-1);
}

.ng-areas-popover__nav--next {
  transform: none;
}

.ng-areas-popover__title {
  position: relative;
  margin: 0 8px 10px 0;
  color: var(--area-ink);
  font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.ng-areas-popover__body {
  position: relative;
  margin: 0;
  color: color-mix(in srgb, var(--area-ink) 88%, #271b19);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.ng-areas-popover__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  min-height: 44px;
  padding: 0 24px;
  border: 1.5px solid var(--area-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--area-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ng-areas-popover__link:hover {
  background: var(--area-ink);
  border-color: var(--area-ink);
  color: #fff;
  transform: translateY(-1px);
}

.ng-areas-popover__link[hidden] {
  display: none;
}

/* PC: マップ右上退避 + ポップアップ右から登場 */
@media (min-width: 901px) {
  .ng-areas-intro.is-popover-open {
    /* overflow-x:hidden だと縦もクリップされるため visible に */
    overflow: visible;
  }

  /* マップは __inner 内、ポップアップは兄弟のため stacking を親で上げる */
  .ng-areas-intro.is-popover-open .ng-areas-intro__inner {
    position: relative;
    z-index: 30;
    pointer-events: none;
    /* 既定は右寄せなし。広い画面だけわずかに右へ */
    transform: translateX(0);
  }

  .ng-areas-intro.is-popover-open .ng-areas-intro__copy,
  .ng-areas-intro.is-popover-open .ng-areas-intro__map {
    pointer-events: auto;
  }

  .ng-areas-intro.is-popover-open .ng-areas-intro__map {
    /* ポップアップより手前。右寄りを維持しつつ見切れない位置 */
    z-index: 31;
    transform: translate(0%, -52%) scale(0.28);
  }

  .ng-areas-popover-wrap {
    left: auto;
    right: max(4%, 16px);
    top: 54%;
    z-index: 20;
    max-width: min(520px, 52vw);
    transform: translate3d(64px, -50%, 0);
  }

  .ng-areas-popover-wrap.is-open {
    transform: translate3d(0, -50%, 0);
  }

  .ng-areas-popover {
    width: min(400px, 34vw);
    max-width: 400px;
    padding-top: 18px;
    /* 試しに背景・枠を消してマップとの重なりを確認 */
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ng-areas-popover__close {
    display: none;
  }

  .ng-areas-popover__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #271b19;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ng-areas-popover__dismiss:hover {
    background: transparent;
    color: var(--ng-orange);
  }
}

/* やや広い PC: 少し右へ */
@media (min-width: 1280px) {
  .ng-areas-intro.is-popover-open .ng-areas-intro__inner {
    transform: translateX(2%);
  }

  .ng-areas-intro.is-popover-open .ng-areas-intro__map {
    transform: translate(4%, -52%) scale(0.3);
  }

  .ng-areas-popover-wrap {
    right: max(7%, calc((100% - 1360px) / 2 + 5%));
    max-width: min(520px, 46vw);
  }
}

/* 余裕のある幅: いまの「いい感じ」の右寄り */
@media (min-width: 1520px) {
  .ng-areas-intro.is-popover-open .ng-areas-intro__inner {
    transform: translateX(4%);
  }

  .ng-areas-intro.is-popover-open .ng-areas-intro__map {
    transform: translate(8%, -52%) scale(0.3);
  }

  .ng-areas-popover-wrap {
    right: max(10%, calc((100% - 1360px) / 2 + 8%));
  }
}

@media (max-width: 900px) {
  .ng-areas-intro.is-popover-open {
    overflow: visible;
  }

  .ng-areas-popover-wrap {
    top: auto;
    bottom: 20px;
    max-width: min(430px, calc(100% - 16px));
    transform: translate(-50%, 14px);
  }

  .ng-areas-popover-wrap.is-open {
    transform: translate(-50%, 0);
  }

  .ng-areas-popover {
    width: min(320px, calc(100vw - 100px));
  }

  .ng-areas-popover__nav {
    width: 36px;
    height: 36px;
    background-size: 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ng-areas-intro__map,
  .ng-areas-intro__map .ng-areas__mapSvg,
  .ng-areas-popover-wrap {
    transition: opacity 0.15s ease;
  }

  .ng-areas-popover-wrap.is-open {
    transform: translate(-50%, 0);
  }

  @media (min-width: 901px) {
    .ng-areas-popover-wrap.is-open {
      transform: translate3d(0, -50%, 0);
    }
  }
}

/* areas detail — 湯・食・遊（ドキュメント流しの全画面＋カード横スライド登場） */
html.is-areas-detail-snap {
  scroll-snap-type: y mandatory;
}

html.is-areas-detail-snap.is-areas-detail-snap--soft {
  scroll-snap-type: y proximity;
}

.ng-areas-detail {
  position: relative;
  z-index: 3;
  background: #1a1a1a;
  color: #fff;
}

.ng-areas-detail__panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 100vh;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.ng-areas-detail__bgs {
  position: absolute;
  inset: 0;
  background: #1a1a1a;
}

.ng-areas-detail__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.ng-areas-detail__bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.ng-areas-detail__bg.is-active {
  opacity: 1;
}

.ng-areas-detail__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
}

.ng-areas-detail__panel.is-soon::after {
  background: rgba(20, 20, 20, 0.55);
}

.ng-areas-detail__card {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  /* 幅は固定。縮小は高さ由来の --card-scale のみ */
  width: 400px;
  margin: max(48px, calc(var(--ng-header, 88px) - 12px)) 0 0 max(16px, calc((100% - 1360px) / 2 + 12px));
  padding: 24px 26px 28px;
  background: rgba(12, 16, 24, 0.62);
  border: 1.5px dashed rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  opacity: 0;
  transform-origin: top left;
  transform: translate3d(-56px, 0, 0) scale(var(--card-scale, 1));
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.ng-areas-detail__panel.is-inview .ng-areas-detail__card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(var(--card-scale, 1));
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.is-areas-detail-snap {
    scroll-snap-type: none;
  }

  .ng-areas-detail__card {
    opacity: 1;
    transform: scale(var(--card-scale, 1));
    transition: none;
  }

  .ng-areas-detail__kanjiImg {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.ng-areas-detail__kanji {
  margin: 0 0 10px;
  line-height: 0;
}

.ng-areas-detail__kanjiImg {
  display: block;
  width: auto;
  height: clamp(64px, 8vw, 120px);
  opacity: 0;
  transform: rotate(-140deg) scale(0.55);
  transform-origin: 50% 50%;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.ng-areas-detail__panel.is-inview .ng-areas-detail__kanjiImg {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.ng-areas-detail__title {
  margin: 0 0 12px;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.ng-areas-detail__body {
  margin: 0;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.ng-areas-detail__body p {
  margin: 0 0 0.85em;
}

.ng-areas-detail__body p:last-child {
  margin-bottom: 0;
}

.ng-areas-detail__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}

.ng-areas-detail__btn {
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}

.ng-areas-detail__soon {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.7;
}

/* brand（リニューアル前の brand-message を踏襲） */
.brand-message {
  position: relative;
  z-index: 3;
  background: #fff;
  padding: 80px 3% 80px;
}

.brand-message__inner {
  max-width: 960px;
  margin: 0 auto;
}

.logo-message {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  text-align: left;
}

.logo-message img {
  width: min(100%, 300px);
  height: auto;
  margin: 0 auto 12px;
  display: block;
}

.logo-message h3 {
  margin: 8px 0 14px;
  padding: 4px 0;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.55;
  font-weight: 800;
  color: #0f6f7d;
  letter-spacing: 0.01em;
  text-align: center;
}

.logo-message p {
  margin-top: 10px;
  font-size: clamp(0.92rem, 1.2vw, 1rem);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: #1d3135;
  padding: 0;
  text-align: left;
}

.logo-message-link {
  display: table;
  margin: 12px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: #138b9e;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.logo-message-link:hover {
  opacity: 0.88;
  color: #fff;
}

@media (max-width: 768px) {
  .logo-message img {
    width: min(100%, 230px);
    margin-bottom: 10px;
  }

  .logo-message h3 {
    font-size: 1rem;
  }

  .logo-message p {
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.75;
  }

  .logo-message-link {
    margin-top: 10px;
    padding: 7px 12px;
    font-size: 0.84rem;
  }
}

/* campaign / reserve */
.ng-campaign {
  position: relative;
  z-index: 3;
  background: #8f1f3c;
  color: #fff;
  padding: 80px 24px 100px;
}

.ng-campaign__container {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

.ng-campaign__catch {
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 36px;
}

.ng-campaign__box {
  margin-bottom: 36px;
}

.ng-campaign__boxTitle {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.ng-campaign__boxText {
  margin-bottom: 16px;
  line-height: 1.8;
}

.ng-reserve {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 20px;
}

.ng-campaign__overview,
.ng-campaign__panel {
  background: var(--ng-paper);
  color: var(--ng-ink);
  border-radius: 16px;
  padding: 28px 24px;
}

.ng-campaign__overview .ng-campaign__boxTitle,
.ng-campaign__overview .ng-campaign__boxText,
.ng-campaign__overview .ng-campaign__itemText,
.ng-campaign__overview .ng-campaign__itemNote,
.ng-campaign__panel .ng-campaign__boxTitle,
.ng-campaign__panel .ng-campaign__boxText,
.ng-campaign__panel .ng-campaign__itemText {
  color: var(--ng-ink);
}

.ng-campaign__panel .ng-campaign__itemText {
  margin-bottom: 8px;
}

.ng-campaign__itemText--bullet {
  padding-left: 1.12em;
  text-indent: -1.12em;
}

.ng-campaign__mark {
  padding: 0 0.12em;
  background: linear-gradient(transparent 70%, color-mix(in srgb, #ff4f4f 37%, transparent) 70%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ng-campaign__panel .ng-campaign__itemText+.ng-campaign__boxText {
  margin-top: 16px;
}

.ng-campaign__panel .ng-campaign__boxText:last-child {
  margin-bottom: 0;
}

.ng-campaign__panel .ng-btn--secondary {
  border: 1px solid var(--ng-blue);
}

.ng-campaign__panel .ng-btn--secondary:hover {
  border-color: var(--ng-blue-deep);
}

.ng-campaign__panel .ng-btn--ghost {
  color: var(--ng-ink);
  background: #fff;
  border-color: var(--ng-line);
}

.ng-campaign__panel .ng-btn--ghost:hover {
  background: var(--ng-ink);
  color: #fff;
  border-color: var(--ng-ink);
}

.ng-campaign__item+.ng-campaign__item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ng-line);
}

.ng-campaign__itemTitle {
  color: var(--ng-pink-deep);
  font-size: 16px;
  margin-bottom: 8px;
}

/* fixed banner */
.fixedBanner {
  position: fixed;
  top: 50%;
  right: 20px;
  left: auto;
  bottom: auto;
  z-index: 850;
  opacity: 0;
  visibility: hidden;
  transform: translate(16px, -50%);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  pointer-events: none;
  overflow: visible;
}

.fixedBanner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  pointer-events: auto;
}

.fixedBanner__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ng-pink);
  border-radius: 14px;
  padding: 22px 14px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: background 0.2s;
  overflow: visible;
}

.fixedBanner__link:hover {
  background: var(--ng-pink-deep);
}

.fixedBanner__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
}

.fixedBanner__title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.14em;
}

/* news */
.ng-news {
  position: relative;
  z-index: 3;
  background: #fff;
  color: var(--ng-ink);
  padding: clamp(64px, 8vw, 112px) 24px;
}

.ng-news__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  width: min(100%, 960px);
  margin: 0 auto;
}

.ng-news__title {
  margin: 0;
  text-align: center;
  font-size: clamp(18px, 5.8vw, 80px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.ng-news__titleImg {
  display: block;
  width: auto;
  height: 1.5em;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

.ng-news__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #231815;
}

.ng-news__item {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #231815;
  color: #231815;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-align: left;
}

.ng-news__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ng-news__link:hover {
  color: var(--ng-orange);
}

/* footer */
.footer {
  position: relative;
  z-index: 3;
  min-height: 420px;
  color: #fff;
  overflow: hidden;
}

.footer__background,
.footer__slider {
  position: absolute;
  inset: 0;
}

.footer__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.footer__image.is-active {
  opacity: 1;
}

.footer__content {
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  background: rgba(0, 0, 0, 0.55);
}

.footer__campaignLogo {
  width: min(240px, 70%);
  margin: 16px auto;
}

.footer__catch {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
}

.footer__links,
.footer__note,
.footer__campaignInfo,
.footer__copyright {
  margin-top: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.footer__linkText {
  color: var(--ng-blue);
  font-weight: 800;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .mainVisual__content {
    padding: 0;
  }

  /* スマホでもSVG内部の比率・配置は維持 */
  .mainVisual__heroRow {
    display: block;
  }

  .mainVisual__fanBlock {
    width: min(94vw, 650px);
    max-width: 650px;
  }

  .ng-spots__stage {
    height: min(300px, 62vw);
  }

  .ng-spots__card,
  .ng-spots__card.is-center,
  .ng-spots__card.is-left-1,
  .ng-spots__card.is-left,
  .ng-spots__card.is-right-1,
  .ng-spots__card.is-right,
  .ng-spots__card.is-left-2,
  .ng-spots__card.is-right-2 {
    width: 28vw;
  }

  .ng-spots__card.is-left-2 {
    transform: translate(calc(-50% - 56vw), -50%) scale(1);
    opacity: 0.35;
  }

  .ng-spots__card.is-left-1,
  .ng-spots__card.is-left {
    transform: translate(calc(-50% - 30vw), -50%) scale(1);
    opacity: 0.65;
  }

  .ng-spots__card.is-right-1,
  .ng-spots__card.is-right {
    transform: translate(calc(-50% + 30vw), -50%) scale(1);
    opacity: 0.65;
  }

  .ng-spots__card.is-right-2 {
    transform: translate(calc(-50% + 56vw), -50%) scale(1);
    opacity: 0.35;
  }

  .ng-spots__card img {
    height: min(220px, 48vw);
  }

  .ng-areas-intro {
    min-height: 0;
  }

  .ng-areas-intro__inner {
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: auto;
    padding: 88px 16px 64px;
  }

  .ng-areas-intro__copy {
    width: 100%;
    padding-top: 0;
  }

  .ng-areas-intro__title {
    font-size: clamp(22px, 6.4vw, 30px);
    letter-spacing: 0.02em;
    line-height: 1.32;
  }

  .ng-areas-intro__lead {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.75;
  }

  .ng-areas-intro__map {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: min(92%, 460px);
    margin: 24px auto 0;
    transform: none;
  }

  .ng-areas-intro__map .ng-areas__mapSvg {
    max-height: none;
  }

  .ng-areas-popover {
    width: min(320px, calc(100vw - 100px));
    max-width: 350px;
    max-height: min(72vh, 520px);
    padding: 36px 14px 16px;
  }

  html.is-areas-detail-snap.is-areas-detail-snap--soft .ng-areas-detail__panel {
    scroll-snap-stop: normal;
  }

  .ng-areas-detail__panel {
    align-items: stretch;
  }

  .ng-areas-detail__card {
    --card-scale: 1;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    width: auto;
    margin: 0;
    padding: 16px 16px 18px;
    transform-origin: bottom left;
    transform: translate3d(-32px, 0, 0);
  }

  .ng-areas-detail__panel.is-inview .ng-areas-detail__card {
    transform: translate3d(0, 0, 0);
  }

  .ng-areas-detail__kanjiImg {
    height: clamp(72px, 22vw, 104px);
  }

  .ng-areas-detail__title {
    font-size: clamp(16px, 4.6vw, 20px);
  }

  .ng-areas-detail__body {
    font-size: 12px;
    line-height: 1.7;
  }

  .ng-areas-detail__actions {
    margin-top: 14px;
    gap: 8px;
  }

  .ng-areas-detail__btn {
    min-height: 42px;
    font-size: 12px;
  }

  .ng-reserve {
    grid-template-columns: 1fr;
  }

  .ng-campaign {
    padding: 56px 16px 72px;
  }

  .ng-campaign__overview,
  .ng-campaign__panel {
    padding: 22px 16px;
  }
}

@media (max-width: 767px) {
  .header {
    padding: 16px 14px;
  }

  .ng-areas-intro__inner {
    transform: none;
  }

  .ng-areas-intro__map {
    width: min(86%, 300px);
  }

  .header__logoLink {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: auto;
    height: auto;
    pointer-events: none;
  }

  .header__brandSet--w,
  .header__brandSet--c {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .header.is-brand-bottom-c .header__brandSet--w,
  .header.is-brand-bottom-c .header__brandSet--c {
    display: block;
  }

  /* SPは logo2 / キャンペーンロゴが上部固定なので、下部セクションでも消さない */
  .header.is-brand-hidden .header__brandSet--w {
    opacity: 1;
    pointer-events: none;
  }

  .header.is-brand-hidden .header__brandSet--c {
    opacity: 0;
    pointer-events: none;
  }

  .header.is-brand-hidden.is-brand-bottom-c .header__brandSet--w {
    opacity: 0;
  }

  .header.is-brand-hidden.is-brand-bottom-c .header__brandSet--c {
    opacity: 1;
  }

  .header.is-brand-hidden .header__brandLabel {
    opacity: 0;
  }

  .header.is-brand-hidden .header__brandSet--w .header__brandLogo2Link,
  .header.is-brand-hidden .header__brandSet--w .header__brandHomeLink {
    pointer-events: auto;
  }

  .header.is-brand-hidden.is-brand-bottom-c .header__brandSet--w .header__brandLogo2Link,
  .header.is-brand-hidden.is-brand-bottom-c .header__brandSet--w .header__brandHomeLink {
    pointer-events: none;
  }

  .header.is-brand-hidden.is-brand-bottom-c .header__brandSet--c .header__brandLogo2Link,
  .header.is-brand-hidden.is-brand-bottom-c .header__brandSet--c .header__brandHomeLink {
    pointer-events: auto;
  }

  .header__brandLogo2Link,
  .header__brandHomeLink,
  .header__brandLogo2,
  .header__brandLogo,
  .header__brandLabel {
    position: fixed;
    pointer-events: none;
    width: auto;
    max-width: none;
    max-height: none;
    justify-self: auto;
  }

  .header__brandSet--w .header__brandLogo2Link,
  .header__brandSet--w .header__brandHomeLink,
  .header__brandSet--w .header__brandLogo {
    pointer-events: auto;
  }

  .header.is-brand-bottom-c .header__brandSet--w .header__brandLogo2Link,
  .header.is-brand-bottom-c .header__brandSet--w .header__brandHomeLink,
  .header.is-brand-bottom-c .header__brandSet--w .header__brandLogo {
    pointer-events: none;
  }

  .header.is-brand-bottom-c .header__brandSet--c .header__brandLogo2Link,
  .header.is-brand-bottom-c .header__brandSet--c .header__brandHomeLink,
  .header.is-brand-bottom-c .header__brandSet--c .header__brandLogo {
    pointer-events: auto;
  }

  .header__brandLogo2Link {
    top: 12px;
    left: 12px;
    height: 36px;
    aspect-ratio: 39.55 / 29.05;
    z-index: 1001;
  }

  .header__brandLogo2Link .header__brandLogo2 {
    position: static;
    width: auto;
    height: 100%;
    aspect-ratio: auto;
  }

  .header__brandHomeLink {
    top: 8px;
    left: 66px;
    height: 46px;
    aspect-ratio: 85.42 / 41.37;
    z-index: 1001;
  }

  .header__brandHomeLink .header__brandLogo {
    position: static;
    width: auto;
    height: 100%;
    aspect-ratio: auto;
    top: 0;
  }

  .header__brandLogo2 {
    top: 12px;
    left: 12px;
    height: 36px;
    aspect-ratio: auto;
  }

  .header__brandLogo {
    position: fixed;
    top: 8px;
    left: 66px;
    right: auto;
    height: 46px;
    aspect-ratio: auto;
  }

  .header__brandLabel {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    height: auto;
    aspect-ratio: 301.76 / 15.04;
    object-fit: contain;
    object-position: left bottom;
  }

  body:has(.fixedBanner.is-visible) .header__brandLabel {
    bottom: max(64px, calc(52px + env(safe-area-inset-bottom)));
  }

  .ng-spots__carousel {
    grid-template-columns: 1fr;
  }

  /* スマホ：中央はほぼ全幅、左右に前後スライドが少し見える */
  .ng-spots__stage {
    height: calc(86vw * 10 / 16 + 52px);
    min-height: 220px;
    overflow: hidden;
  }

  .ng-spots__card,
  .ng-spots__card.is-center,
  .ng-spots__card.is-left-1,
  .ng-spots__card.is-left,
  .ng-spots__card.is-right-1,
  .ng-spots__card.is-right,
  .ng-spots__card.is-left-2,
  .ng-spots__card.is-right-2,
  .ng-spots__card.is-far-left,
  .ng-spots__card.is-far-right,
  .ng-spots__card.is-hidden {
    position: absolute;
    top: 0;
    left: 50%;
    width: 86%;
    transform: translateX(-50%);
    opacity: 0;
    filter: none;
    pointer-events: none;
    z-index: 0;
    visibility: hidden;
  }

  .ng-spots__card.is-center {
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
    z-index: 3;
  }

  .ng-spots__card.is-left-1,
  .ng-spots__card.is-left {
    transform: translateX(calc(-50% - 94%));
    opacity: 0.55;
    visibility: visible;
    z-index: 2;
  }

  .ng-spots__card.is-right-1,
  .ng-spots__card.is-right {
    transform: translateX(calc(-50% + 94%));
    opacity: 0.55;
    visibility: visible;
    z-index: 2;
  }

  .ng-spots__card.is-left-2 {
    transform: translateX(calc(-50% - 188%));
  }

  .ng-spots__card.is-right-2 {
    transform: translateX(calc(-50% + 188%));
  }

  .ng-spots__card img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .ng-spots__card.is-center figcaption {
    margin-top: 10px;
    padding: 0 8px;
  }

  .ng-spots__arrow {
    font-size: 40px;
  }

  .fixedBanner {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
  }

  .fixedBanner.is-visible {
    transform: translateY(0);
  }

  .fixedBanner__link {
    display: flex;
    width: 100%;
    border-radius: 0;
    padding: 0 16px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
  }

  .fixedBanner__content {
    min-height: 52px;
    width: 100%;
    justify-content: center;
    padding: 0;
  }

  .fixedBanner__title {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1.35;
  }

  .mainVisual__content {
    padding: 0;
  }

  .campaignSummary {
    padding: 40px 12px 64px;
    min-height: auto;
  }

  .campaignSummary__inner {
    gap: 28px;
    padding: 1.5em 1em 2.5em;
  }

  .campaignSummary__text {
    font-size: 15px;
    row-gap: 2px;
    column-gap: 0;
  }

  .campaignSummary__text span {
    white-space: normal;
  }

  .campaignSummary__note {
    max-width: none;
    font-size: 11px;
    padding: 0 4px;
  }

  .campaignSummary__examples {
    width: 100%;
  }

  .campaignSummary__example {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
    column-gap: 10px;
    min-height: 60px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .campaignSummary__exampleCond {
    font-size: 12px;
    white-space: nowrap;
    transform: scaleX(0.94);
    transform-origin: center;
    display: inline-block;
  }

  .campaignSummary__exampleResult {
    transform: scaleX(0.86);
    transform-origin: left center;
    display: inline-flex;
  }

  .campaignSummary__exampleResult strong {
    font-size: min(8.2vw, 34px);
  }

  .campaignSummary__exampleResult {
    transform: scaleX(0.76);
  }

  .campaignSummary__exampleResult small {
    font-size: min(3.2vw, 14px);
  }

  .campaignSummary__exampleResult b {
    font-size: min(8.2vw, 28px);
  }

  .campaignSummary__cta {
    min-width: 100%;
    min-height: 52px;
    font-size: 14px;
    padding: 0 16px;
  }

  .ng-popup {
    left: auto;
    right: 12px;
    width: min(300px, calc(100vw - 24px));
    top: 84px;
    bottom: auto;
  }

}