/* ============================================================
 * sections.css — レイアウト・各セクション・カード
 *
 * クラファン用メイン画像の雰囲気に合わせた「クリーム × ボルドー × ローズ × 金」。
 * 色は tokens.css の役割の変数（--bg / --surface / --text / --accent …）だけを使う。
 * 夜の部とフッターは tokens.css の .part--night / .site-footer が変数を差し替える。
 * 装飾（紅葉・バラ・フィギュア）と文字の登場演出は decor.css。
 * ============================================================ */

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(253, 245, 236, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  color: var(--c-bordeaux);
  white-space: nowrap;
}

.site-header__brand:hover {
  text-decoration: none;
}

.site-nav__list {
  display: flex;
  flex-shrink: 0;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  white-space: nowrap;
}

.site-nav__link[href$="#day"],
.site-nav__link[href$="#night"] {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.site-nav__link:hover {
  color: var(--c-bordeaux);
  text-underline-offset: 6px;
}

@media (max-width: 47.999em) {
  .site-header__inner {
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
  .site-header__brand {
    font-size: 1.0625rem;
    padding-top: 0.35rem;
  }
  .site-nav {
    width: min(100%, 24rem);
  }
  .site-nav__list {
    justify-content: space-between;
    gap: 0.5rem;
  }
  .site-nav__link {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }
}

/* ============ HERO ============ */
/* 写真は使わず、題字・リボン・日時のカードと紅葉・フィギュアで構成する */
.hero {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(3rem, 8vw, 6rem) var(--section-pad);
  background:
    radial-gradient(ellipse 45% 35% at 100% 0%, rgba(196, 86, 106, 0.12), transparent 70%),
    radial-gradient(ellipse 45% 35% at 0% 0%, rgba(207, 74, 38, 0.1), transparent 70%),
    var(--c-cream);
}

.hero__panel {
  position: relative;
  z-index: 1;
  width: min(100% - var(--gutter) * 2, 48rem);
  margin-inline: auto;
  padding: clamp(2.25rem, 6vw, 3.75rem) clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;
  background: var(--c-paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 0 0 6px var(--c-paper),
    inset 0 0 0 7px rgba(184, 137, 62, 0.4),
    0 18px 50px rgba(86, 16, 34, 0.12);
}

.hero__crown {
  display: block;
  width: 200px;
  height: 37px;
  margin: 0 auto var(--space-3);
  background: url("../assets/decor/ornament-crown.svg") center / contain no-repeat;
}

/* 開催日：両側に細い線 */
.hero__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-family: var(--font-numeral);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.3vw, 1.5rem);
  letter-spacing: 0.3em;
  color: var(--c-gold-ink);
}

.hero__date::before,
.hero__date::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.7;
}

/* 題字：筆記体「Halloween / Day & Night」 */
.hero__title {
  margin-top: var(--space-4);
  padding-inline: 0.1em;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.25rem, 13vw, 6.5rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-bordeaux);
  text-wrap: balance;
}

.hero__br {
  display: inline; /* 「Halloween」/「Day & Night」で常に 2 行にする */
}

/* 開催時間：上下の線と中央の仕切り */
.hero__times {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: var(--space-6) auto 0;
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
}

.hero__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-inline: clamp(0.9rem, 4vw, 2rem);
}

.hero__time + .hero__time {
  border-left: 1px solid var(--line);
}

.hero__time-label {
  font-family: var(--font-script);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--c-gold-ink);
}

.hero__time--night .hero__time-label {
  color: var(--c-bordeaux);
}

.hero__time-value {
  font-family: var(--font-numeral);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.1vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__copy {
  margin-top: var(--space-6);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--c-bordeaux);
}

.hero__lead {
  margin-top: var(--space-5);
  color: var(--text-muted);
}

.hero__fee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

.hero__fee-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__actions .btn {
  min-width: 11rem;
}

/* ============ セクション共通（昼・夜） ============ */
.part,
.photo,
.foodtrucks,
.info {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg);
  color: var(--text);
  overflow-x: clip; /* 角の紅葉のはみ出しを切る */
}

.part > .container,
.photo > .container,
.foodtrucks > .container,
.info > .container {
  position: relative;
  z-index: 1;
}

.part--night {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(196, 86, 106, 0.18), transparent 70%),
    var(--bg);
}

.part__head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

/* 筆記体の英字見出し（Day / Night / Music …） */
.part__en {
  font-family: var(--font-script);
  font-size: clamp(2.75rem, 8vw, 4.25rem);
  line-height: 1;
  color: var(--accent);
}

.photo > .container > .part__en,
.foodtrucks > .container > .part__en,
.info > .container > .part__en {
  text-align: center;
}

.part__title {
  margin-top: var(--space-2);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: var(--fs-xl);
  letter-spacing: 0.24em;
  line-height: var(--lh-tight);
  color: var(--heading);
}

/* 見出しの下の金の飾り線 */
.part__title::after,
.photo .section-title::after,
.foodtrucks .section-title::after,
.info .section-title::after {
  content: "";
  display: block;
  width: 180px;
  height: 14px;
  margin: var(--space-4) auto 0;
  background: url("../assets/decor/ornament-line.svg") center / contain no-repeat;
}

.part--night .part__title::after {
  filter: brightness(1.35);
}

.photo .section-title,
.foodtrucks .section-title,
.info .section-title {
  margin-top: var(--space-2);
  text-align: center;
  letter-spacing: 0.24em;
}

.photo .section-lead,
.foodtrucks .section-lead {
  margin-inline: auto;
  text-align: center;
}

.part__time {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  color: var(--accent);
}

.part__time-icon {
  width: 1.75rem;
  height: 1.75rem;
  background: center / contain no-repeat;
}

.part--day .part__time-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23d4782f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='6.5' fill='%23e69a4a' stroke='none'/%3E%3Cpath d='M16 2.5v4M16 25.5v4M2.5 16h4M25.5 16h4M6.5 6.5l2.8 2.8M22.7 22.7l2.8 2.8M6.5 25.5l2.8-2.8M22.7 9.3l2.8-2.8'/%3E%3C/svg%3E");
}

.part--night .part__time-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.5 4.5A12 12 0 1 0 27.5 22 10 10 0 0 1 20.5 4.5z' fill='%23e8c57d'/%3E%3Cpath d='M24 7l.8 1.8 1.8.8-1.8.8L24 12.2l-.8-1.8-1.8-.8 1.8-.8z' fill='%23e8c57d'/%3E%3C/svg%3E");
}

.part__lead {
  margin-top: var(--space-4);
  color: var(--text-muted);
}

/* 予定しているコンテンツ */
.part__contents {
  position: relative;
  margin-top: var(--space-7);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.part__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: 0.14em;
  color: var(--heading);
}

@media (max-width: 29.999em) {
  .part__subtitle {
    font-size: var(--fs-md);
    letter-spacing: 0.06em;
  }
}

.part__subtitle::before,
.part__subtitle::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  background: var(--ornament);
  transform: rotate(45deg);
  flex: none;
}

.content-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.content-list__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1.15em;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--accent);
  font-weight: 500;
  font-size: var(--fs-sm);
}

.content-list__item::before {
  content: "✦";
  font-size: 0.75em;
  color: var(--ornament);
}

.part__contents .note {
  text-align: center;
}

.part__shops {
  margin-top: var(--space-8);
}

.part__shops-note {
  max-width: 40em;
  margin: var(--space-4) auto 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.part__crosslink {
  margin-top: var(--space-6);
  text-align: center;
}

/* ============ 店舗カード ============ */
.shop-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: var(--space-6);
}

.shop-grid > *,
.photo__grid > *,
.info-list__desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 40em) {
  .shop-grid--part,
  .shop-grid--trucks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* キッチンカーが1台のときは中央に置く */
  .shop-grid--trucks:has(> :only-child) {
    grid-template-columns: minmax(0, 26rem);
    justify-content: center;
  }
}

@media (min-width: 64em) {
  .shop-grid--part {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.shop-card__media {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}

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

/* 画像が未登録のとき：アイコンを中央に小さく */
.shop-card__img--none {
  object-fit: contain;
  padding: 22%;
  opacity: 0.5;
}

/* 複数画像：重ねて配置し、.is-active の 1 枚だけをクロスフェード（切り替えは render.js） */
.shop-card__img--slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.shop-card__img--slide.is-active {
  opacity: 1;
}

/* 詳細ページへのリンク付き画像：左下に CHECK → を常時表示（ホバー前提にしない） */
.shop-card__media-link {
  display: block;
  color: inherit;
}

.shop-card__media-link:hover {
  text-decoration: none;
}

.shop-card__media-link:hover .shop-card__img {
  transform: scale(1.03);
}

.shop-card__img {
  transition: transform 0.6s var(--ease), opacity 1.2s ease;
}

.shop-card__media-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.shop-card__check {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 1em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.shop-card__check-arrow {
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.shop-card__media-link:hover .shop-card__check-arrow,
.shop-card__media-link:focus-visible .shop-card__check-arrow {
  transform: translateX(3px);
}

.shop-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.shop-card__genre {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
}

.shop-card__name {
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.5;
  color: var(--heading);
}

.shop-card__name-link:hover,
.shop-card__name-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.shop-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-muted);
}

.shop-card__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.shop-card__menu li {
  padding: 0.15em 0.8em;
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: var(--fs-xs);
}

.shop-card__price {
  font-size: var(--fs-sm);
}

.shop-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.shop-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.shop-card__link--icon {
  justify-content: center;
  width: 44px;
  padding: 0;
}

.shop-card__link:hover,
.shop-card__link:focus-visible {
  text-decoration: none;
  border-color: var(--accent);
  background: var(--surface-soft);
}

/* 未定枠（COMING SOON） */
.shop-card--placeholder {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.shop-card--placeholder .shop-card__media {
  display: grid;
  place-items: center;
  background: var(--surface-soft);
}

.shop-card__placeholder-img {
  width: 72px;
  opacity: 0.5;
}

.shop-card--placeholder .shop-card__body {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.shop-card__coming {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.22em;
  color: var(--accent);
}

.shop-card__coming-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ============ PHOTO SPOT ============ */
.photo {
  --bg: var(--c-cream-2);
}

.photo__grid {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

@media (min-width: 40em) {
  .photo__grid {
    grid-template-columns: minmax(0, 36rem);
    justify-content: center;
  }
}

/* ポラロイド風のフレーム */
.photo-card {
  padding: var(--space-3) var(--space-3) var(--space-5);
  background: var(--c-paper);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(86, 16, 34, 0.14);
  transform: rotate(-1.2deg);
}

.photo-card:nth-child(2) {
  transform: rotate(1.2deg);
}

.photo-card__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-alt);
}

.photo-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* フォトブース：チラシ → 動画 → 動画 を1枚ずつ横スライドで見せる */
.booth-slider {
  position: relative;
}

.booth-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 2px;
  background: #24090f;
}

.booth-slider__track::-webkit-scrollbar {
  display: none;
}

.booth-slider__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.booth-slider__slide {
  flex: 0 0 100%;
  aspect-ratio: 1122 / 1402;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.booth-slider__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

video.booth-slider__media {
  cursor: pointer;
}

.booth-slider__arrow {
  position: absolute;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 244, 228, 0.6);
  border-radius: 50%;
  background: rgba(36, 9, 15, 0.6);
  color: #fff4e4;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.booth-slider__arrow--prev { left: 0.5rem; }
.booth-slider__arrow--next { right: 0.5rem; }

.booth-slider__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.booth-slider__counter {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: rgba(36, 9, 15, 0.7);
  color: #fff4e4;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.photo-card__hint {
  margin-top: var(--space-3);
  padding-inline: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (min-width: 40em) {
  .photo__grid:has(> .photo-card--booth) {
    grid-template-columns: minmax(0, 30rem);
  }
}

.photo-card__caption {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.photo-card__title {
  margin-top: var(--space-3);
  padding-inline: var(--space-2);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--heading);
}

.photo-card__text {
  margin-top: var(--space-2);
  padding-inline: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ============ DUSK（昼→夜の切り替え帯） ============ */
.dusk {
  position: relative;
  padding-block: clamp(4rem, 9vw, 6rem) clamp(3.5rem, 7vw, 5rem);
  text-align: center;
  background: linear-gradient(180deg, var(--c-cream-2) 0%, #e7a986 26%, #a8424a 48%, #5c1426 66%, var(--c-wine) 100%);
}

.dusk__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dusk__copy {
  margin-top: var(--space-5);
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: 0.16em;
  color: var(--c-ivory);
  text-shadow: 0 2px 12px rgba(42, 12, 20, 0.6);
}

.dusk__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--c-ivory-muted);
}

/* ============ DJ・音楽（夜の部の中） ============ */
.music-program {
  margin-top: var(--space-8);
  text-align: center;
}

.music-program__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  text-align: left;
}

@media (min-width: 48em) {
  .music-program__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.dj-intro,
.music-program__schedule {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.dj-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dj-list__avatar {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-gold-light);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.dj-intro__title,
.music-program__title {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
  color: var(--heading);
}

.dj-intro__pending {
  margin-top: var(--space-3);
  color: var(--accent);
}

.dj-intro__text {
  max-width: 21em;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.dj-list {
  width: 100%;
  margin-top: var(--space-4);
}

.dj-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-4);
}

.dj-list__item + .dj-list__item {
  border-top: 1px solid var(--line);
}

.dj-list__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.dj-list__role {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.dj-list__links {
  justify-content: center;
  margin-top: var(--space-4);
}

.music-timetable {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  margin-top: var(--space-4);
}

/* 時間の列幅を全行でそろえる（「17:00〜17:30」と「17:30〜」が混在するため） */
.music-timetable__item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.music-timetable__item time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.25;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.music-timetable__item time span {
  margin-inline: 0.25rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
}

.music-timetable__item p {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

@media (max-width: 30em) {
  .music-timetable__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .music-timetable__item time {
    font-size: 1.375rem;
  }
}

.music-program .note {
  text-align: left;
}

/* ============ キッチンカー ============ */
.foodtrucks__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

/* ============ 開催案内 ============ */
.info {
  --bg: var(--c-cream-2);
}

.info-list {
  max-width: 46rem;
  margin: var(--space-7) auto 0;
  padding: clamp(1.25rem, 4vw, 2.75rem);
  background: var(--c-paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 0 0 6px var(--c-paper),
    inset 0 0 0 7px rgba(184, 137, 62, 0.35),
    var(--shadow-card);
}

.info-list__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px dashed var(--line);
}

.info-list__row:last-child {
  border-bottom: 0;
}

@media (min-width: 40em) {
  .info-list__row {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.info-list__term {
  font-family: var(--font-mincho);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--heading);
}

.info-list__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.info-list__link {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============ FOOTER ============ */
.site-footer {
  padding-block: var(--space-8) var(--space-7);
  text-align: center;
  background: var(--c-bordeaux-deep);
  color: var(--text);
}

.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--c-gold-light);
}

.site-footer__brand-ja {
  margin-top: var(--space-1);
  font-family: var(--font-mincho);
  font-weight: 500;
  letter-spacing: 0.3em;
}

.site-footer__date {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.site-footer__organizer {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.site-footer__contact a,
.site-footer__sns a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__sns {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* ============================================================
 * 店舗詳細ページ（shop.html）
 * ============================================================ */
.shop-detail {
  position: relative;
  padding: var(--space-7) 0 var(--space-9);
  background: var(--bg);
  overflow-x: clip;
}

.shop-detail > .container {
  position: relative;
  z-index: 1;
}

.shop-detail__back {
  margin-bottom: var(--space-6);
}

.shop-detail__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shop-detail__head .part__en {
  font-size: clamp(2.5rem, 7vw, 3.5rem);
}

.shop-detail__section {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.shop-detail__genre {
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: var(--accent-ink);
}

.shop-detail__title {
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  color: var(--heading);
}

/* 写真：横一列に並べて横スクロール（scroll-snap） */
.shop-detail__slider {
  margin-top: var(--space-6);
}

.shop-detail__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.shop-detail__track::-webkit-scrollbar {
  display: none;
}

.shop-detail__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.shop-detail__slide {
  flex: 0 0 86%;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: var(--shadow-card);
}

.shop-detail__slider--single .shop-detail__slide {
  flex-basis: 100%;
}

.shop-detail__slide img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.shop-detail__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.shop-detail__counter {
  min-width: 4em;
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.shop-detail__nav {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
}

.shop-detail__nav:hover,
.shop-detail__nav:focus-visible {
  border-color: var(--accent);
}

.shop-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.shop-detail__desc {
  font-size: var(--fs-md);
}

.shop-detail__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.shop-detail__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.shop-detail__menu li {
  padding: 0.25em 0.9em;
  border-radius: 999px;
  background: var(--surface-soft);
}

/* お店からのひとこと：上下の細い金線と筆記体の見出しで、引用のように見せる */
.shop-detail__message {
  position: relative;
  margin-top: var(--space-4);
  padding: var(--space-6) var(--space-2) var(--space-5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.shop-detail__message + .shop-detail__links {
  margin-top: var(--space-3);
}

.shop-detail__message-en {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  padding: 0 0.6em;
  background: var(--bg);
  font-family: var(--font-script);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
}

.shop-detail__message-text {
  white-space: pre-line;
  font-size: 0.9375rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--text);
}

.shop-detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.shop-detail__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 500;
}

.shop-detail__link:hover,
.shop-detail__link:focus-visible {
  background: var(--surface-soft);
  text-decoration: none;
}

/* Instagram ボタン：Instagram のロゴと同じグラデーション */
.shop-detail__insta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  min-height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 8px 24px rgba(204, 35, 102, 0.3);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shop-detail__insta-btn:hover,
.shop-detail__insta-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(204, 35, 102, 0.45);
  text-decoration: none;
}

.shop-detail__insta-btn:focus-visible {
  outline: 2px solid var(--c-bordeaux);
  outline-offset: 3px;
}

.shop-detail__insta-btn svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.shop-detail__insta-arrow {
  opacity: 0.85;
}

.shop-detail__notice {
  margin-top: var(--space-7);
}

.shop-detail__empty {
  padding: var(--space-7) 0;
  color: var(--text-muted);
}

@media (min-width: 48em) {
  .shop-detail__slide {
    flex-basis: calc((100% - var(--space-4)) / 2);
  }
  .shop-detail__slider--single .shop-detail__slide {
    flex-basis: 60%;
  }
  .shop-detail__body {
    max-width: 44rem;
  }
  .shop-detail__insta-btn {
    width: auto;
    min-width: 20rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-card__img,
  .shop-card__img--slide,
  .shop-detail__insta-btn {
    transition: none;
  }
  .shop-card__media-link:hover .shop-card__img,
  .shop-detail__insta-btn:hover,
  .shop-detail__insta-btn:focus-visible {
    transform: none;
  }
}

/* ============ 暖かな紙面と夕暮れの光（2026-10） ============ */
body {
  background: radial-gradient(ellipse at 8% 0%, var(--peach), transparent 45%),
    linear-gradient(135deg, var(--bg), var(--bg-alt));
}
.hero {
  padding-top: clamp(4.5rem, 9vw, 7rem);
  background:
    url("../assets/decor/festoon-lights.svg") center top / max(100%, 800px) auto no-repeat,
    radial-gradient(circle at 8% 36%, var(--light-core) 0, var(--warm-glow) 1%, transparent 4%),
    radial-gradient(circle at 91% 54%, var(--light-core) 0, var(--warm-glow) 1%, transparent 4%),
    radial-gradient(circle at 12% 70%, var(--warm-glow) 0, transparent 5%),
    radial-gradient(ellipse at 0% 10%, var(--rose-haze), transparent 48%),
    radial-gradient(ellipse at 100% 35%, var(--peach), transparent 52%),
    linear-gradient(180deg, var(--bg-alt), var(--bg));
}
.hero__panel {
  width: min(100% - var(--gutter) * 2, 50rem);
  padding-block: clamp(2.75rem, 6vw, 4rem);
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 35%, var(--surface) 35%, var(--bg) 75%, var(--paper-edge));
  box-shadow: inset 0 0 0 7px var(--bg), inset 0 0 0 8px var(--ornament),
    0 24px 65px color-mix(in srgb, var(--accent) 20%, transparent);
}
.hero__crown { width: min(76%, 320px); height: 58px; }
.hero__date { color: var(--heading); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: .22em; }
.hero__title { color: var(--heading); text-shadow: 0 2px var(--surface); }
.hero__times { width: 100%; border: 0; padding: 0; gap: .75rem; }
.hero__time {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: .8rem .5rem 1rem;
  border: 1px solid var(--ornament);
  border-radius: 3px;
  background: linear-gradient(145deg, var(--surface), var(--bg-alt));
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--line);
}
.hero__time + .hero__time { border-left: 1px solid var(--ornament); }
.hero__time--night {
  background: linear-gradient(135deg, var(--night-surface), var(--night-bg));
  box-shadow: inset 0 0 0 3px var(--night-bg), inset 0 0 0 4px var(--ornament);
}
.hero__time-label { display: flex; align-items: center; gap: .5rem; color: var(--heading); }
.hero__time--night .hero__time-label,
.hero__time--night .hero__time-value { color: var(--night-gold); }
.hero__time-label::before {
  content: ""; width: 21px; height: 21px; flex: none;
  background: var(--ornament); border-radius: 50%;
}
.hero__time--day .hero__time-label::before {
  background: var(--ornament); border: 4px solid var(--bg);
  outline: 1px dashed var(--ornament); outline-offset: 2px;
}
.hero__time--night .hero__time-label::before {
  background: transparent; box-shadow: -6px 3px 0 0 var(--night-gold); transform: translate(5px, -3px);
}
.hero__copy {
  padding: .85rem 1.25rem 2.1rem;
  margin-inline: -.5rem;
  color: var(--ribbon-text);
  background: url("../assets/decor/ribbon.svg") center / 100% 100% no-repeat;
}
.part--day, .foodtrucks {
  background: radial-gradient(ellipse at 0% 40%, var(--bg-alt), transparent 45%),
    radial-gradient(ellipse at 100% 80%, var(--peach), transparent 55%), var(--bg);
}
.photo, .info {
  background: radial-gradient(ellipse at 50% 30%, var(--surface), transparent 75%),
    linear-gradient(120deg, var(--bg-alt), var(--peach));
}
.part__en { font-size: clamp(3.25rem, 8vw, 4.75rem); }
.part__title::after,
.photo .section-title::after,
.foodtrucks .section-title::after,
.info .section-title::after {
  width: 220px; height: 40px;
  background-image: url("../assets/decor/ornament-crown.svg");
}
.part__time { padding: .45rem 1.5rem; border: 1px solid var(--line); background: var(--surface); border-radius: 2px; }
.shop-card {
  padding: 10px 10px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--photo-frame);
  box-shadow: var(--shadow-card);
}
.shop-card__body { padding: 1.25rem .75rem 1.5rem; }
.shop-card__media { border-radius: var(--radius-sm); }
.shop-card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--photo-tone); pointer-events: none;
}
.shop-card--placeholder { border-style: solid; background: var(--photo-frame); box-shadow: var(--shadow-card); }
.shop-card--placeholder .shop-card__media {
  background: radial-gradient(ellipse at center, var(--surface), var(--bg-alt));
}
.photo-card { border: 1px solid var(--line); border-radius: 2px; }
.part--night {
  background:
    url("../assets/decor/festoon-lights.svg") center top / max(100%, 850px) auto no-repeat,
    radial-gradient(circle at 7% 14%, color-mix(in srgb, var(--warm-glow) 60%, transparent) 0, transparent 3%),
    radial-gradient(circle at 94% 24%, color-mix(in srgb, var(--warm-glow) 45%, transparent) 0, transparent 4%),
    radial-gradient(ellipse at 0% 28%, var(--night-purple), transparent 48%),
    radial-gradient(ellipse at 100% 60%, var(--night-surface), transparent 60%), var(--bg);
}
/* 白いポラロイド枠でも文字面は夜の読みやすい配色を保持。 */
.part--night .shop-card__body, .shop-zoom.theme-night .shop-card__body { background: var(--surface); margin-inline: -10px; padding-inline: 1.35rem; margin-top: 10px; }
.part--night .shop-card--placeholder .shop-card__media { background: linear-gradient(135deg, var(--night-surface), var(--night-bg)); }
.part--night .shop-card__placeholder-img { opacity: .8; }
.dj-intro, .music-program__schedule { border-radius: 3px; box-shadow: var(--shadow-card); }
.info-list { border-radius: 3px; }
@media (max-width: 39.999em) {
  .hero__panel { padding-inline: 1.15rem; }
  .hero__crown { height: 40px; }
  .hero__times { gap: .5rem; }
  .hero__time-value { font-size: 1.45rem; letter-spacing: 0; }
  .hero__copy { font-size: 1.15rem; letter-spacing: .03em; }
  .hero__actions .btn { min-width: 0; flex: 1; padding-inline: .7rem; font-size: .875rem; }
  .part__title::after, .photo .section-title::after,
  .foodtrucks .section-title::after, .info .section-title::after { width: 180px; height: 33px; }
}

/* ---------- 出店店舗のシャボン玉（js/bubbles.js） ---------- */
.shop-bubbles-wrap { position: relative; }
.shop-bubbles {
  --bubble-base: clamp(112px, 16vw, 170px);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  align-items: flex-start;
  gap: clamp(.9rem, 2.5vw, 2rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2.75rem 1.5rem 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.shop-bubbles::-webkit-scrollbar { display: none; }
.shop-bubbles__arrow {
  position: absolute;
  top: calc(50% - 1.5rem);
  z-index: 2;
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.shop-bubbles__arrow--prev { left: -.5rem; }
.shop-bubbles__arrow--next { right: -.5rem; }
.shop-bubbles__arrow:disabled { opacity: .3; cursor: default; }
.shop-bubbles-wrap.is-scrollable .shop-bubbles__arrow { display: block; }
.shop-bubbles__hint {
  display: none;
  margin: -1.5rem 0 1rem;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-align: center;
}
.shop-bubbles-wrap.is-scrollable .shop-bubbles__hint { display: block; }
@media (hover: none) {
  .shop-bubbles-wrap.is-scrollable .shop-bubbles__arrow { display: none; }
}
.shop-bubble {
  flex: 0 0 auto;
  width: var(--bubble-base);
  scroll-snap-align: center;
  will-change: transform;
}
.shop-bubble__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shop-bubble__img,
.shop-bubble--decor .shop-bubble__body {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.shop-bubble__img {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .55),
    0 0 0 2px rgba(255, 255, 255, .5),
    0 0 0 5px rgba(242, 198, 196, .45),
    0 12px 28px rgba(86, 16, 34, .18);
  transition: transform .25s ease;
}
.shop-bubble__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.shop-bubble__photo.is-active { opacity: 1; }
.shop-bubble__img--none .shop-bubble__photo { object-fit: contain; padding: 28%; }
/* 泡のつや（左上の光と虹色のふち） */
.shop-bubble__body::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .85) 0 7%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .35) 0 4%, rgba(255, 255, 255, 0) 10%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 60%, rgba(232, 197, 125, .28) 72%, rgba(196, 86, 106, .3) 82%, rgba(160, 200, 255, .3) 92%, rgba(255, 255, 255, .5) 100%);
}
.shop-bubble--decor .shop-bubble__body {
  cursor: default;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 55%, rgba(232, 197, 125, .3) 75%, rgba(160, 200, 255, .3) 90%, rgba(255, 255, 255, .55) 100%);
}
.shop-bubble__name {
  max-width: 11em;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 2px 8px rgba(86, 16, 34, .1);
}
.shop-bubble__body:hover .shop-bubble__img,
.shop-bubble__body:focus-visible .shop-bubble__img { transform: scale(1.06); }
.shop-bubble__body:focus-visible { outline: none; }
.shop-bubble__body:focus-visible .shop-bubble__img { outline: 3px solid var(--accent); outline-offset: 4px; }
/* クリックではじける */
.shop-bubble.is-popping .shop-bubble__body { animation: bubble-pop .26s ease-out forwards; }
.shop-bubble.is-popping .shop-bubble__body::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .9);
  animation: bubble-burst .26s ease-out forwards;
  pointer-events: none;
}
@keyframes bubble-burst {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.7); opacity: 0; }
}
@keyframes bubble-pop {
  60% { transform: scale(1.18); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.shop-list-toggle-wrap { margin: 0 0 var(--space-5, 2rem); text-align: center; }
.shop-list-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.shop-list-toggle::after { content: "▾"; transition: transform .2s ease; }
.shop-list-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.shop-list-toggle:hover,
.shop-list-toggle:focus-visible { background: var(--accent); color: var(--on-accent); }
@media (max-width: 560px) {
  .shop-bubbles { --bubble-base: 34vw; }
}

/* ---------- シャボン玉から拡大する店舗カード（dialog） ---------- */
.shop-zoom {
  width: min(440px, calc(100% - 2rem));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.shop-zoom::backdrop { background: rgba(42, 12, 20, .55); backdrop-filter: blur(3px); }
.shop-zoom__panel {
  position: relative;
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(42, 12, 20, .35);
  transform-origin: center;
}
.shop-zoom__close {
  position: sticky;
  top: .6rem;
  z-index: 3;
  float: right;
  width: 2.5rem; height: 2.5rem;
  margin: .6rem .6rem -3.1rem 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(42, 12, 20, .25);
}
.shop-zoom__content { padding-bottom: 1.5rem; }
.shop-zoom .shop-zoom__card { margin: 0; border: 0; box-shadow: none; }
.shop-zoom .shop-zoom__card::before,
.shop-zoom .shop-zoom__card::after { content: none; }
.shop-zoom__more {
  display: block;
  width: fit-content;
  margin: .25rem auto 0;
  padding: .7rem 2rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.shop-zoom__more::after { content: " →"; }
.shop-zoom__more:hover,
.shop-zoom__more:focus-visible { filter: brightness(1.1); }
.shop-grid[hidden],
.shop-bubbles[hidden],
.shop-list-toggle[hidden] { display: none; }
.shop-zoom.theme-night .shop-zoom__panel { background: var(--surface); }
.shop-zoom.theme-night .shop-zoom__card { background: var(--surface); }
/* 拡大表示の写真：横スクロールで全部見られる */
.shop-zoom__gallery { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-alt); }
.shop-zoom__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.shop-zoom__track::-webkit-scrollbar { display: none; }
.shop-zoom__track:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.shop-zoom__photo {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  scroll-snap-align: start;
}
.shop-zoom__arrow {
  position: absolute;
  top: calc(50% - 1.2rem);
  width: 2.4rem; height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 248, 238, .9);
  color: var(--c-bordeaux);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(42, 12, 20, .25);
  cursor: pointer;
}
.shop-zoom__arrow--prev { left: .5rem; }
.shop-zoom__arrow--next { right: .5rem; }
.shop-zoom__arrow:disabled { opacity: 0; pointer-events: none; }
.shop-zoom__counter {
  position: absolute;
  right: .6rem; bottom: .6rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: rgba(42, 12, 20, .65);
  color: #fff8ee;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

/* ---------- Instagram のアイコン（公式カラー） ---------- */
.insta-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(214, 36, 159, .25);
}
.insta-badge svg { width: 21px; height: 21px; }
.is-instagram.shop-card__link--icon,
.is-instagram.shop-detail__link--icon {
  border-color: transparent;
  background: none;
}
.is-instagram.shop-card__link--icon:hover,
.is-instagram.shop-card__link--icon:focus-visible,
.is-instagram.shop-detail__link--icon:hover,
.is-instagram.shop-detail__link--icon:focus-visible {
  border-color: transparent;
  background: none;
}
.is-instagram:hover .insta-badge,
.is-instagram:focus-visible .insta-badge { transform: scale(1.08); }
.insta-badge { transition: transform .2s ease; }
/* 詳細ページのボタンは全体が公式カラーなので、中のバッジは背景なし */
.shop-detail__insta-btn .insta-badge { width: 24px; height: 24px; background: none; box-shadow: none; }

/* ---------- 開催案内の下の注意書き ---------- */
.info-notes {
  max-width: 40rem;
  margin: var(--space-6, 2rem) auto 0;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.info-notes__title {
  margin: 0 0 .5rem;
  color: var(--heading);
  font-family: var(--font-mincho);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .1em;
}
.info-notes__list { margin: 0; padding: 0; list-style: none; }
.info-notes__list li {
  position: relative;
  padding-left: 1.1em;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.8;
}
.info-notes__list li::before { content: "※"; position: absolute; left: 0; }

/* ---------- 詳細ページ：昼・夜どちらに出店するか ---------- */
.shop-detail__parts { margin-top: var(--space-3); }
.shop-detail__parts-label {
  margin: 0 0 .4rem;
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.shop-detail__parts-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.shop-detail__part {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
}
.shop-detail__part--day { border: 1px solid var(--line); background: var(--c-paper, #fff8e9); color: var(--c-ink, #3b1c22); }
.shop-detail__part--night { background: var(--c-wine, #2a0c14); color: var(--c-ivory, #fbefe0); }
.shop-detail__part-name { font-weight: 500; }
.shop-detail__part-time { font-family: var(--font-numeral); font-size: 1.05em; letter-spacing: .05em; }
.shop-detail__part--night .shop-detail__part-time { color: var(--c-gold-light, #e8c57d); }

/* フォトブースの下の注意書きは中央に */
.photo__note {
  text-align: center;
}

/* セクションの境目で背景の色が段になって見えないよう、
   明るいセクションどうしは境目を同じクリーム（--c-cream-2）でつなぐ */
.part--day, .foodtrucks {
  background: linear-gradient(180deg, transparent calc(100% - 180px), var(--c-cream-2) 100%),
    radial-gradient(ellipse at 0% 40%, var(--bg-alt), transparent 45%),
    radial-gradient(ellipse at 100% 80%, var(--peach), transparent 55%), var(--bg);
}

.photo {
  background: linear-gradient(180deg, var(--c-cream-2) 0, transparent 180px),
    linear-gradient(180deg, transparent calc(100% - 180px), var(--c-cream-2) 100%),
    radial-gradient(ellipse at 50% 30%, var(--surface), transparent 75%),
    linear-gradient(120deg, var(--bg-alt), var(--peach));
}

.info {
  background: linear-gradient(180deg, var(--c-cream-2) 0, transparent 180px),
    radial-gradient(ellipse at 50% 30%, var(--surface), transparent 75%),
    linear-gradient(120deg, var(--bg-alt), var(--peach));
}

/* Photographic trial — hero and Day only (2026-10-23). */
.hero {
  background:
    linear-gradient(180deg, transparent 65%, var(--bg) 100%),
    url("../assets/decor/photo-garland-lights.webp") center top / min(100%, 1200px) auto no-repeat,
    url("../assets/decor/photo-velvet-bokeh.webp") center top / cover no-repeat,
    var(--bg);
}
.hero__panel {
  width: min(100% - var(--gutter) * 2, 46rem);
  background: linear-gradient(color-mix(in srgb, var(--surface) 65%, transparent), color-mix(in srgb, var(--surface) 65%, transparent)),
    url("../assets/decor/photo-cream-paper.webp") center / cover, var(--surface);
  box-shadow: inset 0 0 0 7px var(--surface), inset 0 0 0 8px var(--line),
    0 24px 65px color-mix(in srgb, var(--text) 24%, transparent);
}
.hero__copy {
  background: none;
  color: var(--heading);
  padding: 1rem .5rem;
  border-block: 1px solid var(--line);
  margin-inline: 0;
}
.part--day {
  background: linear-gradient(180deg, var(--bg), transparent 220px, transparent calc(100% - 180px), var(--bg-alt)),
    linear-gradient(color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg) 94%, transparent)),
    url("../assets/decor/photo-velvet-bokeh.webp") center top / cover, var(--bg);
}
.part--day .part__head {
  padding: 2rem clamp(1rem, 3vw, 2rem);
  background: linear-gradient(color-mix(in srgb, var(--surface) 75%, transparent), color-mix(in srgb, var(--surface) 75%, transparent)),
    url("../assets/decor/photo-cream-paper.webp") center / cover, var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.part--day .part__shops { margin-top: 3rem; }
.part--day .shop-grid { margin-top: 2rem; }
.part--day .shop-card {
  border-radius: 3px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 10%, transparent);
}
.part--day .shop-bubble__img {
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px var(--line),
    0 10px 24px color-mix(in srgb, var(--text) 14%, transparent);
}
.part--day .shop-bubble__name { background: var(--surface); color: var(--heading); }

/* Photographic continuation: light cotton paper / dark wine velvet. */
.photo, .info, .foodtrucks, .shop-detail {
  background:
    linear-gradient(180deg, var(--section-entry, var(--c-cream-2)), transparent 180px, transparent calc(100% - 160px), var(--c-cream-2)),
    linear-gradient(110deg, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--peach) 28%, var(--bg))),
    url("../assets/decor/photo-cream-paper.webp") center / 800px auto, var(--bg);
}
.foodtrucks { --section-entry: var(--night-bg); padding-top: calc(var(--section-pad) + 140px); }
.shop-detail { --section-entry: var(--c-cream); }
.dusk {
  background: linear-gradient(180deg, var(--c-cream-2), var(--peach) 16%, var(--rose-haze) 28%, var(--night-surface) 54%, var(--night-bg) 100%);
}
.dusk__copy, .dusk__sub { position: relative; color: var(--c-ivory); }
.part--night {
  background:
    linear-gradient(180deg, var(--bg), transparent 180px, transparent calc(100% - 200px), var(--bg)),
    linear-gradient(color-mix(in srgb, var(--bg) 65%, transparent), color-mix(in srgb, var(--bg) 65%, transparent)),
    radial-gradient(ellipse at 0% 28%, color-mix(in srgb, var(--night-purple) 55%, transparent), transparent 55%),
    url("../assets/decor/photo-night-velvet.webp") center / cover, var(--bg);
}
.shop-card, .part--day .shop-card, .photo-card, .info-list, .info-notes,
.notice--foodtruck, .shop-detail__body, .shop-detail__message,
.shop-zoom__panel, .shop-zoom .shop-zoom__card {
  background: linear-gradient(color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface) 78%, transparent)),
    url("../assets/decor/photo-cream-paper.webp") center / 700px auto, var(--surface);
  color: var(--text);
  border-radius: 3px;
}
.part--night .shop-card, .part--night .shop-card__body,
.dj-intro, .music-program__schedule,
.shop-zoom.theme-night .shop-zoom__panel, .shop-zoom.theme-night .shop-zoom__card,
.shop-zoom.theme-night .shop-card__body {
  background: linear-gradient(color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)),
    url("../assets/decor/photo-night-velvet.webp") center / cover, var(--surface);
  color: var(--text);
}
.part--night .part__head { padding-block: 1rem 2rem; }
.part--night .shop-bubble__name { background: var(--surface); color: var(--text); }
.part--night .shop-bubble__img {
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 1px var(--line), var(--shadow-card);
}
.photo__grid, .music-program__grid, .part--night .shop-grid { margin-top: var(--space-7); }
.shop-detail__body { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.shop-detail__message { border: 1px solid var(--line); }
.site-footer {
  padding-top: 160px;
  background: linear-gradient(180deg, var(--c-cream-2), transparent 140px),
    linear-gradient(color-mix(in srgb, var(--bg) 80%, transparent), color-mix(in srgb, var(--bg) 80%, transparent)),
    url("../assets/decor/photo-night-velvet.webp") center / cover, var(--bg);
}
.part--night .part__title::after, .photo .section-title::after,
.foodtrucks .section-title::after, .info .section-title::after {
  background: none; height: 1px; width: 100px;
  border-top: 1px solid var(--ornament); margin-block: 1.25rem;
}
@media (max-width: 39.999em) {
  .foodtrucks { padding-top: calc(var(--section-pad) + 100px); }
  .site-footer { padding-top: 145px; }
}

/* Fictional Sasebo-inspired Halloween scenery. Background layers stay beneath
   all content/props; opaque edge fades join the existing section colors.
   The central veil protects copy; outer margins retain the town atmosphere. */
.hero {
  background:
    linear-gradient(180deg, transparent 65%, var(--bg) 100%),
    url("../assets/decor/photo-garland-lights.webp") center top / min(100%, 1200px) auto no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 35%, transparent), color-mix(in srgb, var(--bg) 76%, transparent) 38% 62%, color-mix(in srgb, var(--bg) 35%, transparent)),
    url("../assets/decor/photo-town-harbor-day.webp") 48% center / cover no-repeat,
    var(--bg);
}
.part--day, .photo, .foodtrucks, .info, .shop-detail {
  --town-scene: url("../assets/decor/photo-town-arcade-day.webp");
  --town-position: center center;
  --town-entry: var(--bg-alt);
  background:
    linear-gradient(180deg, var(--town-entry), transparent 180px, transparent calc(100% - 180px), var(--bg-alt)),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 76%, transparent), color-mix(in srgb, var(--bg) 94%, transparent) 32% 68%, color-mix(in srgb, var(--bg) 76%, transparent)),
    var(--town-scene) var(--town-position) / cover no-repeat,
    var(--bg);
}
.part--day { --town-entry: var(--bg); }
.photo {
  --town-scene: url("../assets/decor/photo-town-islands-day.webp");
  --town-position: 55% center;
}
.foodtrucks {
  --town-entry: var(--night-bg);
  --town-scene: url("../assets/decor/photo-town-harbor-day.webp");
  --town-position: 38% center;
}
.info {
  --town-scene: url("../assets/decor/photo-town-islands-day.webp");
  --town-position: 65% center;
}
.shop-detail { --town-entry: var(--bg); --town-position: 48% center; }
.part--night {
  background:
    linear-gradient(180deg, var(--bg), transparent 180px, transparent calc(100% - 200px), var(--bg)),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 76%, transparent), color-mix(in srgb, var(--bg) 92%, transparent) 30% 70%, color-mix(in srgb, var(--bg) 76%, transparent)),
    url("../assets/decor/photo-town-street-night.webp") center / cover no-repeat,
    var(--bg);
}
.dusk {
  background:
    linear-gradient(180deg, var(--bg-alt), color-mix(in srgb, var(--peach) 78%, transparent) 18%, color-mix(in srgb, var(--night-surface) 62%, transparent) 45%, var(--night-bg) 100%),
    url("../assets/decor/photo-town-harbor-night.webp") center 55% / cover no-repeat,
    var(--night-bg);
}
.site-footer {
  background:
    linear-gradient(180deg, var(--c-cream-2), transparent 150px, transparent 70%, var(--bg)),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 76%, transparent), color-mix(in srgb, var(--bg) 92%, transparent) 30% 70%, color-mix(in srgb, var(--bg) 76%, transparent)),
    url("../assets/decor/photo-town-harbor-night.webp") center 60% / cover no-repeat,
    var(--bg);
}
@media (max-width: 39.999em) {
  .hero { background-position: center, center top, center, 44% center, center; }
  .part--day, .shop-detail { --town-position: 49% center; }
  .photo, .info { --town-position: 58% center; }
  .foodtrucks { --town-position: 35% center; }
  /* Keep the arcade/harbor readable at portrait widths without stretching.
     A smaller central veil still gives all unboxed text a light backdrop. */
  .part--day, .photo, .foodtrucks, .info, .shop-detail {
    background-image:
      linear-gradient(180deg, var(--town-entry), transparent 140px, transparent calc(100% - 140px), var(--bg-alt)),
      linear-gradient(90deg, color-mix(in srgb, var(--bg) 74%, transparent), color-mix(in srgb, var(--bg) 94%, transparent) 20% 80%, color-mix(in srgb, var(--bg) 74%, transparent)),
      var(--town-scene);
  }
}