/* ===================================================================
   1. 変数
   =================================================================== */
:root {
  /* レイアウト */
  --col-w: 375px; /* 中央カラム（スマホ本体）の幅 */
  --side-w: 280px; /* PC時のサイド領域の幅 */
  --side-gap: 50px; /* 中央カラムとサイドの間隔 */
  --header-h: 105px;

  /* PCでサイドを出す閾値 = カラム + サイド2枚 + 余白 */
  /* 390 + (280+20)*2 = 990 → 1040px から表示 */

  /* 色 */
  --c-bg: #d8c39b; /* 背景のベージュ */
  --c-main: #9f0e15; /* 中央カラムの赤 */
  --c-main-d: #7d1619;
  --c-cream: #f6efdf;
  --c-gold: #d8b15e;
  --c-text: #3d3227;

  /* 動物ループ帯：ウィンドウ幅に応じて可変（下限・上限つき） */
  --animal-size: clamp(40px, 4vw, 64px);
  --animal-gap: clamp(32px, 3vw, 56px);
  --animal-block-gap: clamp(56px, 6vw, 96px); /* グループ同士の間隔（メインカラムぶん広め） */
}

/* ===================================================================
   2. ベース
   =================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.8;
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
mark {
  background: none;
}
input,
select,
textarea {
  font-size: 16px;
} /* iOS自動ズーム防止 */

/* ===================================================================
   3. ヘッダー（画面幅いっぱいの白帯）
   =================================================================== */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 20px 25px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.l-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none; /* 隠れている間はタップ判定を無効化 */
}
@media (prefers-reduced-motion: reduce) {
  .l-header {
    transition: none;
  }
}

.l-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.l-header__logo mark {
  width: auto;
  height: 30px;
}
.l-header__logo mark + mark {
  margin-left: 0px;
}
.l-header__logo mark img {
  height: 100%;
}

.l-header__txt {
  margin-left: 30px;
}

.l-header__txt img {
  height: 50px;
}

/* ハンバーガー（スマホのみ） */
.c-hamburger {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
}
.c-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text);
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.is-open .c-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.is-open .c-hamburger span:nth-child(2) {
  opacity: 0;
}
.is-open .c-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===================================================================
   4. 中央カラム ＝ スマホ本体
      ここだけ作れば、そのままスマホサイトになる
   =================================================================== */
.l-main {
  width: 100%;
  max-width: var(--col-w);
  margin-inline: auto;
  /* background: var(--c-main); */
  color: var(--c-cream);
  position: relative;
  z-index: 10; /* サイドより手前 */
  min-height: 100vh;
  /* 固定CTA分の逃がし */
  scroll-margin-top: var(--header-h);
  margin-bottom: 20px;
}

/* セクション共通 */
.p-sec {
  padding: 50px 0 40px;
  background: var(--c-main);
}
.p-sec + .p-sec {
  scroll-margin-top: var(--header-h);
  margin-bottom: 20px;
}
.p-sec:last-of-type {
  margin-bottom: 0;
}

.p-sec__ttl {
  text-align: center;
  margin-bottom: 15px;
}
.p-sec__ttl em {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: 26px;
  color: var(--c-gold);
  letter-spacing: 0.04em;
}
.p-sec__ttl small {
  display: block;
  font-size: 18px;
  letter-spacing: 0;
  margin-top: 6px;
  font-weight: 700;
}

/* --- KV --- */
.p-kv {
  padding: 0;
}
.p-kv .dummy {
  aspect-ratio: 3/4;
  border-color: rgba(246, 239, 223, 0.4);
  color: rgba(246, 239, 223, 0.6);
  border-radius: 0;
}

/* --- 動画 --- */
.p-movie__frame {
  aspect-ratio: 16/10;
  background: #123;
  border: 2px solid var(--c-gold);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  width: 84%;
  margin: 0 auto 20px;
}
/* --- 動画 --- */
.p-movie__frame {
  aspect-ratio: 16/10;
  background-color: transparent;
  border: 2px solid var(--c-gold);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 84%;
  margin: 0 auto 20px;
  background-image: url(../images//storymovie_image.webp);
  background-size: cover;
  border-radius: 15px;
}
.p-movie__play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
}
.p-movie__play::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 14px solid var(--c-main);
  border-block: 9px solid transparent;
  margin-left: 4px;
}

.p-movie__play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(159 14 21 / 50%);
  display: grid;
  place-items: center;
  border: solid 2px #fff;
  transition: all 0.5s ease;
}
.p-movie__play::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 14px solid #fff;
  border-block: 9px solid transparent;
  margin-left: 4px;
}

.p-movie__play:hover {
  transform: scale(1.2);
}

/* --- 日程 --- */
.p-date {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.4;
}
.p-date small {
  font-size: 0.8em;
  font-weight: 500;
}
.p-date time {
  display: block;
  font-size: 0.8em;
}
.p-lead {
  width: 84%;
  margin: auto;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  text-align: justify;
  letter-spacing: -0.05em;
}
.p-sec article {
  width: 84%;
  margin: 30px auto 40px;
}
.p-sec article:last-of-type {
  margin-bottom: 0;
}

.p-sec article h3 {
  width: 100%;
  font-size: 20px;
  position: relative;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: left;
}
.p-sec article h3 mark {
  width: 40px;
  height: 46px;
  background: url(../images/star_ornament.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  padding-bottom: 0.1em;
}
.p-sec article h3 span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 0;
  background: url(../images/read_back.svg) no-repeat;
  background-size: contain;
  text-align: center;
}

#market.p-sec article h3 {
  margin-bottom: 20px;
}

.p-sec article.map {
  width: 100%;
}
.p-sec article h2.map {
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.p-sec article h2.map img {
  margin-bottom: 10px;
}
.p-sec article h2.map small {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
}
.p-sec article.map img {
  width: 84%;
  margin: auto;
}

.p-sec article h4 {
  text-align: center;
  font-size: 20px;
  margin: 0.5em 0;
  font-weight: 700;
}

.p-sec article img {
  border-radius: 10px;
  margin-bottom: 0;
}

.p-sec article h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 0 10px;
}
.p-sec article h5 mark {
  width: 30px;
  height: 34px;
  background: url(../images/star_ornament.svg) no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  line-height: 1;
  margin-right: 5px;
  padding-bottom: 0.1em;
}

.p-sec article figure {
  margin: 0 0 10px;
}
.p-sec article figure img + img {
  margin-top: 20px;
}

.p-sec article p {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  text-align: justify;
  margin-top: 10px;
  letter-spacing: 0.05em;
}
.p-sec article p.comingsoon {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  text-align: center;
  font-size: 36px;
  margin: 50px;
  color: #c2bcb0;
  line-height: 1;
  border-top: solid 1px #c2bcb0;
  border-bottom: solid 1px #c2bcb0;
  width: 300px;
  display: block;
  margin: 30px auto 100px;
  padding: 20px 0;
}
.p-sec article p.comingsoon.pb30 {
  margin-bottom: 30px;
}
.p-sec article p.note {
  font-size: 13px;
  margin-top: -0.5em;
}

.p-sec article.shoplist {
  margin: 0;
  width: 100%;
}
.p-sec article.shoplist h3 {
  width: 84%;
  margin: 10px auto;
  padding: 0 30px;
}
.p-sec article.shoplist h3 mark {
  left: 20px;
}

/* --- カルーセル本体（Swiper） --- */
.c-carousel {
  --swiper-navigation-size: 16px;
  --swiper-navigation-color: var(--c-cream);
  --swiper-navigation-top-offset: 23%; /* 画像の高さに合わせた目安。実画像差し替え後に微調整 */
  --swiper-pagination-color: var(--c-gold);
  --swiper-pagination-bullet-inactive-color: var(--c-cream);
  --swiper-pagination-bullet-inactive-opacity: 0.4;
  --swiper-pagination-bullet-size: 6px;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  padding: 0 4px 28px; /* 下部はページネーション分の余白 */
  width: 94%;
  --shop-gap: 20px; /* カード同士の隙間。JS(spaceBetween)もこの値を読む */
}

/* ===================================================================
   12. ショップリストのカルーセル帯：PCでは画面いっぱいに広げる
   =================================================================== */
@media (min-width: 768px) {
  /* .l-main（幅 var(--col-w) に固定）の制約を突き抜けて画面幅いっぱいに広げる、
     いわゆる full-bleed。.l-main が中央寄せされていることを利用した計算式 */
  .p-sec article.shoplist {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /* D・Bのラベルだけは、帯の中で元のカラム幅に収めて中央寄せのまま */
  .p-sec article.shoplist h3 {
    max-width: var(--col-w);
    width: 84%;
    margin-inline: auto;
  }

  /* カードは1枚ずつ独立したスライド。画面幅に応じて見える枚数が自然に増減する */
  .c-carousel {
    width: 100%;
    /* max-width: 1400px; */
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
    /* 赤帯(var(--col-w))の中に「余白＋カード＋隙間＋カード＋余白」がぴったり収まる幅。
       余白・隙間はどちらも --shop-gap（＝Swiperの spaceBetween と同じ値） */
    --shop-card-w: calc((var(--col-w) - var(--shop-gap) * 3) / 2);
  }
  .c-carousel .swiper-slide {
    width: var(--shop-card-w);
  }

  /* 1コマずつ動かしつつ「2枚の真ん中」を画面中央に置くための半コマずらし。
     centeredSlides は"アクティブな1枚"の中心を画面中央に置くので、
     アクティブ(左)カードの中心を (カード幅＋隙間)÷2 だけ左へ寄せると、
     アクティブ＋その右隣の2枚の中間がちょうど中央になる。
     left はSwiperが書き換える transform とは別プロパティなので干渉しない */
  .c-carousel .swiper-wrapper {
    left: calc((var(--shop-card-w) + var(--shop-gap)) / -2);
  }

  nav.swiper_btns {
    max-width: 1400px;
    width: 100%;
    margin-inline: auto;
  }

  /* Swiper公式CSSの height:100% が祖先のflex stretchで確定値になり、
   スライドごと間延びするのを防ぐ（Swiperの既知の挙動への対処） */
  .c-carousel .swiper-wrapper {
    height: auto;
    align-items: flex-start;
  }
}

nav.swiper_btns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 10px;
  width: 94%;
  margin: 15px auto;
  max-width: 355px;
  min-height: 40px;
}
.swiper-button-prev,
.swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: none;
  top: calc(50% - 20px);
  transform: translate(0, 10px);
}
.swiper-button-prev {
  left: 0;
}
.swiper-button-prev::after {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
}
.swiper-button-next {
  right: 0;
}
.swiper-button-next::after {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
}

.swiper-pagination {
  position: static;
  margin: auto;
  transform: translateX(0) !important;
}
.swiper-pagination-bullet {
  background: #fff;
}

.c-shopCard__img {
  margin-bottom: 8px;
  overflow: hidden; /* 画像が枠より大きくてもはみ出させない保険 */
}
.p-sec article .c-shopCard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 実画像の縦横比に関わらず、aspect-ratioで作った箱にきっちり収める */
  display: block;
  border-radius: 0;
}
.p-sec article p.c-shopCard__desc {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 0.4em;
}
.p-sec article p.c-shopCard__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-cream);
  margin: 0;
  word-break: break-word;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 0.3em;
}
.p-sec article p.c-shopCard__time {
  font-size: 16px;
  margin: 0;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
}
.p-sec article p.c-shopCard__time small {
  font-size: 0.8em;
  color: rgba(246, 239, 223, 0.7);
}

.p-sec article.schedule {
  width: 100%;
}
.p-sec article.schedule h2 small {
  display: block;
  text-align: center;
}

.p-sec article.schedule h3 {
  max-width: 315px;
  margin: 0 auto 40px;
}

/* ===================================================================
   11. 出店スケジュール表（日付をタップ → その日の出店ショップを上に表示）
   =================================================================== */
/* 視覚的には隠すが、スクリーンリーダーには読ませる */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.c-schedule {
  --sch-line: #e6dcc8;
  --sch-open: #f2d68f; /* 出店している日のセル */
  --sch-hit: #ffee3a; /* 選択した日に出店する店（店名・日付の強調色） */
  --sch-off: #e3e3e3; /* 全店休みの日 */
  width: 92%;
  margin: 0 auto 0;
  position: relative;
}
.c-schedule__note {
  margin: 0 0 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}
.c-schedule__frame {
  position: relative; /* ヒント(.c-schedule__hint)の位置基準 */
  padding: 0 0 8px; /* 上は日付ボタンの▼マーカー分 */
  margin-bottom: 50px;
  margin-top: 30px;
}

/* 表が画面に入ったとき数秒だけ出す「ボタンが押せます」ヒント */
.c-schedule__hint {
  position: absolute;
  top: 48px;
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: 90%;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgb(0 101 80 / 70%);
  color: #fff;
  font-size: 12px !important;
  line-height: 1.5;
  text-align: center;
  pointer-events: none; /* 下のボタン操作を妨げない */
  opacity: 0;
  transform: translate(-50%, -6px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.c-schedule__hint.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .c-schedule__hint {
    transition: none;
  }
}
.c-schedule__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  color: var(--c-text);
}
.c-schedule__table th,
.c-schedule__table td {
  padding: 0;
  border: 1px solid var(--sch-line);
}

/* --- ヘッダー（日付） --- */
.c-schedule__corner {
  width: 25%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.c-schedule__day {
  background: #fff;
  text-align: center;
  line-height: 1.15;
  transition: background-color 0.25s;
}
.c-schedule__day--sat {
  color: #2f8fc9;
}
.c-schedule__day--sun,
.c-schedule__day--red {
  color: #d1242f;
}
.c-schedule__day--green {
  color: #2e9a4a;
}
.c-schedule__day.is-off {
  padding: 5px 0 4px;
  background: var(--sch-off);
  color: var(--c-text);
}
.c-schedule__day.is-active {
  background: var(--sch-hit);
}
.c-schedule__date,
.c-schedule__wd {
  display: block;
}
.c-schedule__date {
  font-size: 13px;
  font-weight: 700;
}
.c-schedule__wd {
  font-size: 8px;
  font-weight: 500;
}

/* 日付ボタン（thの中身いっぱいに広げてタップしやすく） */
.c-schedule__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 5px 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.c-schedule__btn::before {
  content: "▼";
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  transition: color 0.25s;
}
.c-schedule__day.is-active .c-schedule__btn::before {
  color: var(--sch-hit);
}
.c-schedule__btn:focus-visible {
  outline: 2px solid var(--c-main);
  outline-offset: -2px;
}
@media (hover: hover) {
  .c-schedule__day:not(.is-off):not(.is-active):hover {
    background: #fff8cf;
  }
}

/* --- 本体（店名・出店セル） --- */
.c-schedule__table tbody tr {
  --shop-bg: #fff;
  height: 40px; /* 店名が1行でも2行でも行の高さを揃える */
}
.c-schedule__table tbody tr:nth-child(odd) {
  --shop-bg: #f8f0dd; /* ゼブラ */
}
.c-schedule__table tbody tr.is-hit {
  --shop-bg: var(--sch-hit); /* 選択した日に出店する店：店名を強調（上のゼブラより後に書くこと） */
}
.c-schedule__table .c-schedule__shop {
  padding: 4px 5px;
  background: var(--shop-bg);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  transition: background-color 0.25s;
}
.c-schedule__table tr.is-hit .c-schedule__shop {
  font-weight: 700;
}
.c-schedule__table td.is-open {
  background: var(--sch-open);
}
.c-schedule__table td.is-off {
  background: var(--sch-off);
}

@media (prefers-reduced-motion: reduce) {
  .c-schedule__day,
  .c-schedule__btn::before,
  .c-schedule__table .c-schedule__shop {
    transition: none;
  }
}

/*event*/
.p-sec article.event {
  margin-top: 0;
}
.p-sec article.event figure {
  position: relative;
}
.p-sec article.event figure mark {
  position: absolute;
  left: -10px;
  top: -8px;
  width: 50px;
  height: 60px;
  padding-bottom: 2%;
  background: url(../images/star_ornament.svg) no-repeat;
  background-position: center;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
}

.p-sec article.event h3 {
  display: block;
  text-align: left;
  position: relative;
}
.p-sec article.event h3 span {
  display: block;
  text-align: left;
  background: none;
  padding: 0;
  line-height: 1.4;
  color: var(--c-bg);
}
.p-sec article.event h3 span small {
  display: block;
  font-weight: 400;
}
.p-sec article.event h3 small.free {
  position: absolute;
  top: 0;
  right: 0;
}

.p-sec article.event h3 b {
  font-size: 30px;
  line-height: 1.4;
}
.p-sec article.event p.p-date {
  text-align: left;
  font-size: 25px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.4;
}
.p-sec article.event p.p-date small {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 500;
}
.p-sec article.event p.p-date time {
  display: inline-block;
  font-size: 0.9em;
}
.p-sec article.event dl.flex {
  display: flex;
  align-items: center;
  line-height: 1;
}

.p-sec article.event dl dt {
  font-size: 16px;
  padding-right: 0;
}
.p-sec article.event dl dd {
  font-size: 20px;
  font-weight: 700;
  margin-left: 0;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.6;
}

.p-sec article.event dl dd span {
  font-weight: 400;
}
.p-sec article.event dl dd small {
  font-weight: 400;
  margin: 0.2em;
}
#map.p-sec article.map {
  margin-top: auto;
}

/* ===================================================================
   10. スクロールフェードイン
   =================================================================== */
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-fade {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ===================================================================
   5. サイド（PC専用の装飾エリア）
      中央カラムを基準に calc() で左右へ押し出す
   =================================================================== */
.l-side {
  display: none; /* スマホでは非表示 */
  position: fixed;
  top: 105px;
  width: calc(50% - 270px);
  max-width: 460px;
  z-index: 5;
  transition:
    filter 0.5s ease,
    top 0.5s ease,
    opacity 0.5s ease;
}
body.headerfade .l-side {
  top: 35px;
}

/* ショップリストのカルーセル帯が画面内にある間、左右のasideをぼかす */
body.is-shopFocus .l-side {
  filter: blur(6px);
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .l-side {
    transition: none;
  }
}
.l-side--left {
  right: calc(50% + var(--col-w) / 2 + var(--side-gap));
  text-align: center;
  padding-top: 40px;
}
.l-side--right {
  left: calc(50% + var(--col-w) / 2 + var(--side-gap));
  padding-top: 60px;
}

/* 左：タイトルロゴ＋イラスト */
.l-side__logo {
  margin-bottom: 40px;
}
.l-side__copy {
  font-size: 13px;
  line-height: 2;
}
.l-side__illust {
  height: 90px;
  margin-top: 32px;
}

/* 右：グローバルナビ */
.l-side--right nav {
  position: relative;
}
.l-side--right nav figure {
  position: absolute;
}
.l-side--right nav .bird01 {
  top: 0;
  right: 34%;
  width: 16%;
  margin: 0;
  animation: bird 5s ease infinite;
}
.l-side--right nav .bird02 {
  top: 15%;
  right: 8%;
  width: 17%;
  margin: 0;
  animation: bird 10s ease infinite;
}
@keyframes bird {
  0%,
  100% {
    transform: translate(0, -10px) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(0, 0) rotate(10deg) scale(1.05);
  }
  50% {
    transform: translate(0, -10px) rotate(0deg) scale(1);
  }
  75% {
    transform: translate(0, 0) rotate(-10deg) scale(1.05);
  }
}

.c-gnav__item + .c-gnav__item {
  margin-top: 0;
}
.c-gnav__link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 18px;
  font-weight: 700;
  padding: 0;
  transition: opacity 0.2s;
  color: var(--c-main);
}

.c-gnav__link mark {
  width: 60px;
  transform: translate(0, -10px);
}
.c-gnav__link mark img {
  width: 100%;
}
.c-gnav__link span {
  display: flex;
  align-items: center;
}
.c-gnav__link span::after {
  content: "";
  display: block;
  margin-left: 0.5em;
  background-color: #ffffff;
  width: 8px;
  height: 10px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  transition: all 0.5s ease;
}

.c-gnav__link:hover span {
  opacity: 0.6;
  transition: all 0.5s ease;
}
.c-gnav__link:hover span::after {
  margin-left: 1em;
}

.c-gnav__link:hover mark {
  animation: icon-float 1.5s ease infinite;
}
@keyframes icon-float {
  0%,
  100% {
    transform: translate(0, -10px) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(0, -10px) rotate(10deg) scale(1.05);
  }
  50% {
    transform: translate(0, -10px) rotate(0deg) scale(1);
  }
  75% {
    transform: translate(0, -10px) rotate(-10deg) scale(1.05);
  }
}

/* ===================================================================
   4-2. Shop List（カテゴリ見出し＋カルーセル）
   =================================================================== */
.p-shopGroup + .p-shopGroup {
  margin-top: 32px;
}

.p-shopGroup__badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--c-gold);
  padding: 6px 6px 6px 4px;
  margin-bottom: 14px;
}
.p-shopGroup__letter {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-main-d);
  font-weight: 700;
  flex-shrink: 0;
}
.p-sec article p.p-shopGroup__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-cream);
}

/* ===================================================================
   5-2. 動物ループ帯
      画面幅いっぱいの1本の帯として、中央カラムの「裏」を通す。
      中央カラム(z-index:10)より下、サイド(z-index:5)より上に置くことで
      左右のサイド領域だけ動物が見え、カラムの下は自然に隠れる。
   =================================================================== */
.l-animals {
  display: none; /* スマホでは非表示（PCと同じ切替） */
  position: fixed;
  left: 0;
  right: 0;
  top: min(720px, calc(100dvh - 180px)); /* 画面が低いときは自動で引き上げ、帯が画面外に消えないようにする */
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  transition:
    filter 0.5s ease,
    opacity 0.5s ease;
}

body.is-shopFocus .l-animals {
  filter: blur(6px);
  opacity: 0.6;
}

.l-animals__track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: 100%;
  animation: animals-loop 30s linear infinite;
  will-change: transform;
}

/* グループ（兎・リス・熊 / 鷺・狐・ハリネズミ）ごとのまとまり */
.l-animals__track .block {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(50vw);
  /* margin-right: 375px; */ /* グループ「間」の間隔：継ぎ目をまたぐのでmarginで統一 */
}
.l-animals__item {
  flex-shrink: 0;
}
.l-animals__item.rabit {
  width: 5vw;
  margin-right: 8vw;
  animation: animal_move_A 3s linear infinite;
}
.l-animals__item.squirrel {
  width: 4vw;
  margin-right: 5vw;
  animation: animal_move_C 4s linear infinite;
}
.l-animals__item.baer {
  width: 18vw;
  animation: animal_move_B 5s linear infinite;
}
.l-animals__item.heron {
  width: 8.5vw;
  margin-right: 8vw;
  animation: animal_move_A 6s linear infinite;
}
.l-animals__item.fox {
  width: 12vw;
  margin-right: 5vw;
  animation: animal_move_B 3s linear infinite;
}
.l-animals__item.hedgehog {
  width: 5vw;
  margin-right: 1vw;
  animation: animal_move_D 3s linear infinite;
}

.l-animals__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@keyframes animals-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes animal_move_A {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(10deg) scale(1.05);
  }
  50% {
    transform: rotate(0deg) scale(1);
  }
  75% {
    transform: rotate(-10deg) scale(1.05);
  }
}
@keyframes animal_move_B {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(5deg) scale(1.02);
  }
  50% {
    transform: rotate(2.5deg) scale(1);
  }
  75% {
    transform: rotate(0deg) scale(1.05);
  }
}

@keyframes animal_move_C {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  15% {
    transform: translate(0, 0) rotate(5deg) scale(1.02);
  }
  30% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  45% {
    transform: translate(0, 0) rotate(5deg) scale(1.02);
  }
  60% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  80% {
    transform: translate(0, 0) rotate(5deg) scale(1.02);
  }
  94% {
    transform: translate(0, -60px) rotate(360deg) scale(1.1);
  }
  96% {
    transform: translate(-10px, 0px) rotate(365eg) scale(1.1);
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

@keyframes animal_move_D {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  15% {
    transform: translate(0, 0) rotate(5deg) scale(1.02);
  }
  30% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  45% {
    transform: translate(0, 0) rotate(5deg) scale(1.02);
  }
  60% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  80% {
    transform: translate(0, 0) rotate(5deg) scale(1.02);
  }
  90% {
    transform: translate(30px, -70px) rotate(360deg) scale(1.2);
  }
  95% {
    transform: translate(30px, 0) rotate(345deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

/* --- PC表示の切り替え --- */
@media (min-width: 768px) {
  .l-side {
    display: block;
  }
  .l-animals {
    display: block;
  }
  .c-hamburger {
    display: none;
  }
  .l-drawer {
    display: none;
  }
}

@media (min-width: 1500px) and (max-height: 860px) {
  　.l-animals {
    top: unset;
    bottom: -80px;
  }

  .l-animals__item img {
    width: 80%;
    height: 80%;
    object-fit: none;
    display: block;
    margin: auto;
  }
}
/* ===================================================================
   6. 下部固定CTA
   =================================================================== */
.l-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 90;
  width: 100%;
  max-width: var(--col-w);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom); /* ホームバー回避 */
}
.l-cta__btn {
  flex: 1;
  min-height: 56px; /* タップ領域の確保 */
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--c-main-d);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.l-cta__btn:first-child {
  border-left: 0;
  background: #4a6b4e;
}

/* ===================================================================
   7. ドロワー（スマホ）
   =================================================================== */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-bg);
  padding: 80px 28px;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
  overscroll-behavior: contain; /* 背面への伝播を止める */
  visibility: hidden;
}
.l-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.l-drawer .c-gnav__link {
  font-size: 16px;
  padding: 12px 4px;
}

.l-drawer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

body.is-locked {
  overflow: hidden;
}
/* ===================================================================
   9. 動画モーダル
   =================================================================== */
.l-modal {
  position: fixed;
  inset: 0;
  z-index: 300; /* ドロワー(200)より手前 */
  display: grid;
  place-items: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}
.l-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.l-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}
.l-modal__body {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}
.l-modal__videoWrap {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.l-modal__videoWrap video {
  width: 100%;
  height: 100%;
  display: block;
}
.l-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 44px;
  height: 44px; /* タップ領域確保 */
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .l-modal {
    transition: none;
  }
}

/* ===================================================================
   8. フッター
   =================================================================== */
.l-footer {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--col-w);
  margin-inline: auto;
  background: var(--c-main);
  color: var(--c-cream);
  text-align: left;
  padding: 40px 3% calc(80px + env(safe-area-inset-bottom));
  font-style: normal;
}

.l-footer * {
  font-style: normal;
}

.l-footer address {
  line-height: 1.4;
}

.l-footer address h5 {
  margin: 0;
  font-size: 18px;
  margin-top: 0.3em;
}
.l-footer address span.phone {
  font-size: 24px;
  font-weight: 700;
}
.l-footer address time {
  font-size: 16px;
  display: block;
}

.l-footer dl dt {
  font-size: 12px;
  line-height: 1.4;
  text-indent: -1em;
  padding-left: 1em;
}
.l-footer h6 {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
}
.l-footer h6 b {
  font-weight: normal;
  font-weight: 700;
}
@media (max-width: 1100px) {
  .l-header {
    gap: 1.45vw;
    padding-inline: 1.45vw;
    padding: 2.27vw 2.7vw 2.7vw;
  }

  .l-header__logo {
    gap: 1vw;
  }
  .l-header__logo mark {
    width: auto;
    height: 4.5vw;
  }
  .l-header__logo mark + mark {
    margin-left: 3.6vw;
  }
  .l-header__txt {
    margin-left: 2.7vw;
  }

  .l-header__txt img {
    height: 4.5vw;
  }

  .l-side {
    top: 105px;
    width: calc(50% - 26vw);
    z-index: 5;
  }

  .l-side--left {
    left: 2.5vw;
  }

  .l-side--right {
    left: unset;
    right: 2vw;
    padding-top: 60px;
    width: 25vw;
  }

  .c-gnav__link {
    font-size: 1.5vw;
    gap: 1vw;
  }
  .c-gnav__link mark {
    width: 5vw;
    transform: translate(0, -0.9vw);
  }
}

@media (max-width: 900px) {
  .l-side--left {
    left: 1vw;
  }

  .l-side--right {
    right: 0vw;
    width: 24vw;
  }
}

@media (max-width: 767px) {
  .l-header {
    gap: 1.45vw;
    padding-inline: 1.45vw;
    padding: 3vw;
  }
  .l-header__logo {
    gap: 1vw;
  }
  .l-header__logo mark {
    width: auto;
    height: 7vw;
  }
  .l-header__logo mark + mark {
    margin-left: 2vw;
  }
  .l-header__txt {
    margin-left: 2.7vw;
  }
  .l-header__txt img {
    height: 8vw;
  }

  .l-main {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .p-sec article {
    width: 84%;
    margin: 7vw auto 7vw;
  }
  .p-sec__ttl small {
    font-size: 4.8vw;
    letter-spacing: 0;
    margin-top: 6px;
    font-weight: 700;
  }
  .p-lead {
    font-size: 4.8vw;
  }
  .p-date {
    font-size: 6.5vw;
    margin-bottom: 4vw;
  }
  .p-sec article h3 {
    font-size: 5vw;
  }
  .p-sec article h3 mark {
    width: 10.6vw;
    height: 12vw;
    left: -4vw;
    font-size: 6.5vw;
    padding-bottom: 0.1em;
  }
  .p-sec article h3 span {
    width: 100%;
    padding: 2.2vw 0;
  }
  .p-sec article h4 {
    font-size: 4.5vw;
  }
  .p-sec article p {
    font-size: 4vw;
    margin-top: 2vw;
  }
  .p-sec article p.note {
    font-size: 3.8vw;
    margin-top: -0.5em;
  }

  .p-sec article h5 {
    font-size: 5vw;
    margin: 0 0 2vw;
  }
  .p-sec article h5 mark {
    width: 9vw;
    height: 10vw;
    font-size: 5vw;
    margin-right: 0.2em;
  }
  .p-sec article.shoplist h3 {
    width: 100%;
  }
  .c-carousel {
    width: 100%;
    padding: 0 4vw; /* 左右の余白。JSの spaceBetween:"4.35%"(=4vw÷92vw) とセット */
    margin-bottom: 12vw;
  }
  .swiper-wrapper {
    height: unset !important;
  }
  /* スライド幅はSwiper(slidesPerView:2)が計算するので、ここでは指定しない */
  .c-shopCard__img {
    margin-bottom: 1vw;
  }
  .p-sec article p.c-schedule__hint {
    font-size: 3.2vw !important;
    margin-top: 12vw;
    text-align: center;
  }
  .p-sec article p.c-shopCard__desc {
    font-size: 3vw;
  }
  .p-sec article p.c-shopCard__name {
    font-size: 4.5vw;
  }
  .p-sec article p.c-shopCard__time {
    font-size: 4.5vw;
  }

  .p-sec article.schedule h3 {
    max-width: unset;
    width: 91%;
    margin: 0 auto 40px;
  }

  .p-sec article.event figure mark {
    left: -10px;
    top: -8px;
    width: 14vw;
    height: 15vw;
    font-size: 8vw;
  }
  .p-sec article.event h3 b {
    font-size: 7.5vw;
  }
  .p-sec article.event p.p-date {
    font-size: 5vw;
    margin-bottom: 2vw;
  }
  .p-sec article.event dl dt {
    font-size: 4vw;
    margin-right: 0.5em;
  }
  .p-sec article.event dl dd {
    font-size: 4.6vw;
  }
  #map.p-sec article.map {
    margin-top: auto;
  }
  .l-footer {
    width: 100%;
    max-width: 100%;
    padding: 40px 8% calc(80px + env(safe-area-inset-bottom));
  }

  .l-footer address h5 {
    font-size: 4.5vw;
  }
  .l-footer address span.phone {
    font-size: 5.5vw;
  }
  .l-footer address time {
    font-size: 4vw;
  }

  .l-footer dl dt {
    font-size: 3vw;
  }
  .l-footer h6 {
    font-size: 4.5vw;
  }
}