:root {
  /* Color: Brand */
  --color-primary: #f49500;
  --color-accent: #538c6b;
  --color-secondary: #4c350e;
  --color-kv-yellow: #f9b700; /* KV上部のグラデーションのイエロー */

  /* Color: Text */
  --color-text: #2a2d3a;
  --color-text-sub: #555;
  --color-text-muted: #707070;

  /* Color: Background */
  --color-bg: #fff;
  --color-bg-sub: #f7f7f7;
  --color-bg-page: #e8380d;
  --gradient-kv: linear-gradient(
    to bottom,
    #f9b700 0%,
    #f9b700 31.7%,
    #f5a200 51.7%,
    #f49800 54.1%,
    #f18100 58.4%,
    #ee7100 62%,
    #e83c42 62%,
    #e94922 66.7%,
    #ea4a19 68.4%,
    #e9450f 71.7%,
    #e8380d 75%
  );

  /* Color: Border */
  --color-border: #ddd;

  /* Color: Common (header/footer 等) */
  --color-white: #fff;

  /* Font */
  --font-family-base: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --line-height-base: 1.7;

  /* Font Size */
  --font-size-xl: clamp(1.75rem, 1.5rem + 3vw, 2.75rem);   /* 特大: 28px 〜 44px（例: 特大見出し） */
  --font-size-l: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);     /* 大:   20px 〜 25.6px（例: 大見出し） */
  --font-size-m: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);   /* 中:   18px 〜 20px（例: 中見出し） */
  --font-size-base: 16px;                                   /* 標準: 16px 固定（例: 本文） */
  --font-size-s: 0.875rem;                                  /* 小:   14px 固定（例: 補足情報・小サイズボタン） */
  --font-size-xs: 0.6875rem;                                /* 極小: 11px 固定（WEBで読める最小サイズの目安。例: 注釈） */

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;

  /* Layout */
  --content-max-width: 1080px;
  --header-height: 64px;

  /* Z-index */
  --z-header: 100;
}

body {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

a {
  color: var(--color-primary);
}


/* ==========================================================================
   header-floating
   ========================================================================== */

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;

  /* PCは非表示（リンクナビが追従表示になったときだけ表示）、SPは常に表示 */
  display: none;

  @media (max-width: 768px) {
    display: block;
  }

  & .inner {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
  }

  & .menuBtn {
    position: fixed;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--color-secondary);
    border: none;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;

    & span {
      position: absolute;
      left: 50%;
      width: 22px;
      height: 2px;
      background: var(--color-white);
      transform: translateX(-50%);
      transition: transform 0.3s ease, opacity 0.3s ease;

      &:nth-child(1) { top: 15px; }
      &:nth-child(2) { top: 21px; }
      &:nth-child(3) { top: 27px; }
    }

    &.is-active span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
    &.is-active span:nth-child(2) { opacity: 0; }
    &.is-active span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }
  }
}

/* スクロールしてリンクナビが追従表示になったら、PCでも表示 */
.is-navFloating .c-header {
  display: block;
}


/* ==========================================================================
   page-top
   ========================================================================== */

.c-pageTop {
  position: fixed;
  right: var(--spacing-sm);
  bottom: calc(var(--spacing-sm) + var(--pageTop-offset, 0px)); /* --pageTop-offset はJSでフッターの帯と重ならないよう調整 */
  z-index: calc(var(--z-header) - 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 44px;
  background: var(--color-secondary);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  color: var(--color-white);
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;

  & i {
    font-size: 12px;
  }
}

/* ハンバーガーメニューと同じタイミングで表示 */
.is-navFloating .c-pageTop {
  opacity: 1;
  visibility: visible;
}


/* ==========================================================================
   footer-info
   ========================================================================== */

.c-footer {
  background: var(--color-secondary);
  text-align: center;

  & .footerInfo {
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md) var(--spacing-sm);
  }

  & .footerInfo__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    max-width: var(--content-max-width);
    margin: 0 auto;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: var(--spacing-md);
    }
  }

  & .footerInfo__text {
    color: var(--color-text);
  }

  & .footerInfo__name {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-m);
    font-weight: bold;
  }

  & .footerInfo__address,
  & .footerInfo__hours {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-s);
  }

  & .footerInfo__link {
    margin: var(--spacing-sm) 0 0;

    /* 「公式サイト」ボタン：両端を丸く、茶色に */
    & .c-btn--fill-icon {
      border-radius: 999px;
      background: var(--color-secondary);
    }
  }

  & .footerInfo__map {
    flex: none;
    max-width: 100%;
    line-height: 0;

    & iframe {
      display: block;
      width: 320px;
      max-width: 100%;
      height: auto;
      aspect-ratio: 8 / 5;
      border: 0;
    }
  }

  & .copyright {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-sm);
    color: var(--color-white);
    font-size: 0.8rem;
  }
}


/* ==========================================================================
   pageNav-basic
   ========================================================================== */

.c-pageNav {
  & .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-sm);
  }

  & .list {
    & ul {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      margin: 0;
      padding: 0;
      list-style: none;

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
        padding-top: calc(var(--spacing-sm) * 2 + 44px); /* 閉じるボタン（上16px＋高さ44px）と重ならないよう下げる */
      }
    }

    @media (max-width: 768px) {
      position: fixed;
      top: 0;
      right: 0;
      width: 80%;
      max-width: 320px;
      height: 100%;
      overflow-y: auto;
      background: var(--color-bg-page); /* KV下と同じ濃いオレンジ */
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: var(--z-header);

      &.is-open {
        transform: translateX(0);
      }
    }
  }

  & .overlay {
    display: none;

    @media (max-width: 768px) {
      &.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: calc(var(--z-header) - 1);
      }
    }
  }

  /* ボタン形状：両端を丸く、上下の余白を小さく */
  & .c-btn {
    padding: 0.1em 2em;
    line-height: 1.3;
    border-radius: 999px;
    /* 配色：KV下・SPメニュー・追従メニューすべて共通のイエローボタン */
    background: var(--color-kv-yellow);
    color: var(--color-secondary);
    box-shadow: 0 2px 6px rgba(76, 53, 14, 0.3); /* 背景との境目を分かりやすくする薄い影 */
    transition: none; /* 背景と文字の色が同時に変わる途中で同系色になり、ちらついて見えるため即時切り替え */

    &:hover {
      background: var(--color-secondary);
      color: var(--color-kv-yellow);
      opacity: 1; /* c-btn共通の半透明ホバーを打ち消す */
    }

    /* SPではボタンをメニュー幅いっぱいに広げて横幅を統一 */
    @media (max-width: 768px) {
      display: block;
      text-align: center;
    }
  }
}

/* ボタンの高さ：オレンジ背景の上にあるとき（PC幅・追従前）だけ上下の余白を広げる */
/* 左右の余白は小さくして、6個のボタンが1列に収まるようにする */
@media (min-width: 769px) {
  body:not(.is-navFloating) .c-pageNav .c-btn {
    padding-block: 0.5em;
    padding-inline: 1em;
  }
}

/* スクロール追従時：PCでもSPと同じく右から出るドロワーメニューにする */
.is-navFloating .c-pageNav {
  & .list {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    overflow-y: auto;
    background: var(--color-bg-page); /* KV下と同じ濃いオレンジ */
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: var(--z-header);

    &.js-noTransition {
      transition: none;
    }

    &.is-open {
      transform: translateX(0);
    }

    & ul {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-xs);
      padding: var(--spacing-sm);
      padding-top: calc(var(--spacing-sm) * 2 + 44px); /* 閉じるボタン（上16px＋高さ44px）と重ならないよう下げる */
    }

    /* ボタンをメニュー幅いっぱいに広げて横幅を統一 */
    & .c-btn {
      display: block;
      text-align: center;
    }
  }

  & .overlay.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-header) - 1);
  }
}


/* ==========================================================================
   heading-bar
   ========================================================================== */

.c-heading {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: #eb5e00;
  line-height: 1.2;
}

/* ノベルティ見出し（背景色の帯＋中央にタイトル画像、左右にイラスト） */
.c-heading--novelty {
  position: relative; /* イラストを重ねる基準 */
  padding: 8px 0;
  background: #6c9bd2;
  text-align: center;

  /* タイトル画像（右イラストの領域「端から2%＋幅17.6%」と8pxのすき間を左右で差し引いた、重ならない最大幅） */
  & .c-heading__title {
    display: block;
    width: calc(100% - 2 * (2% + 17.6% + 8px));
    max-width: 570px;
    height: auto;
    margin: 0 auto;
  }

  /* 左右のイラスト（NEW SPOTのイラストと同じ揺れアニメーション） */
  & .c-heading__illust {
    position: absolute;
    height: auto;
    transform-origin: 50% 100%; /* 足元を軸に揺らす */
    animation: c-spot-illust-sway 2.4s ease-in-out infinite alternate;
    pointer-events: none;
  }

  /* 左：やや上方にはみ出す */
  & .c-heading__illust--left {
    top: clamp(-40px, -4vw, -16px);
    left: 2%;
    width: 14.4%;
    max-width: 120px;
  }

  /* 右：やや下方にはみ出す */
  & .c-heading__illust--right {
    right: 2%;
    bottom: clamp(-40px, -4vw, -16px);
    width: 17.6%;
    max-width: 160px;
    animation-delay: -1.2s; /* 左のイラストと揺れのタイミングをずらす */
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-heading--novelty .c-heading__illust {
    animation: none;
  }
}

/* 抽選会見出し（背景色の帯＋中央にタイトル画像。画像はHTMLの<picture>でPC／SPを切り替え） */
.c-heading--lottery {
  padding: 8px 16px;
  background: #ec6d65;

  & .c-heading__title {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
  }
}

/* 抽選会の景品（見出し帯と同じ背景色の角丸h3＋画像2枚。PCは横並び、SPは縦並び） */
.c-lottery {
  margin-top: var(--spacing-xs); /* リスト上の余白（0.4em）と合わせて約15px */

  /* 抽選券の説明文 */
  & .c-lottery__text {
    margin: 0.8em 0 0;
    line-height: var(--line-height-base);

    /* ※の注意書き（時間・場所の注意書きと同じく、改行して1段階小さく） */
    & .note {
      display: block;
      font-size: var(--font-size-s);
    }
  }

  /* 「─ 景品 ─」の形（両脇の罫線はコンテンツ幅いっぱいまで伸ばす） */
  & .c-lottery__title {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    color: #ec6d65;
    font-size: var(--font-size-m);
    font-weight: bold;

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 2px;
      background: currentColor; /* 文字と同じ色 */
    }
  }

  & .c-lottery__images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: var(--spacing-sm);

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }

    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}


/* ==========================================================================
   button-fill-icon
   ========================================================================== */

.c-btn--fill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.6em 1.6em;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.85;
  }

  &::after {
    content: "\f105"; /* Font Awesome 6 Free Solid: angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1em;
    flex-shrink: 0;
  }
}


/* ==========================================================================
   button-sm
   ========================================================================== */

.c-btn--sm {
  font-size: var(--font-size-s);
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}


/* ==========================================================================
   button-brown
   ========================================================================== */

.c-btn--brown {
  border: 1px solid var(--color-secondary);
  background: var(--color-white);
  color: var(--color-secondary);
  transition: background-color 0.2s, color 0.2s;

  /* マウスオーバー時はブラウンの塗りボタンに */
  &:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    opacity: 1;
  }
}


/* ==========================================================================
   button-mitsukoshi（三越 POP UP SHOP ボタン専用の色）
   ========================================================================== */

.c-btn--mitsukoshi {
  background: #a40000;
}


/* ==========================================================================
   button-shine
   ========================================================================== */

.c-btn--shine {
  position: relative;
  overflow: hidden;

  & .c-btn__shine {
    position: absolute;
    top: -3em;
    left: -3em;
    width: 3em;
    height: 3em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    animation: c-btn-shine-run 3s ease-in infinite;
  }
}

@keyframes c-btn-shine-run {
  0% {
    transform: scale(0) rotate(50deg);
    opacity: 0;
  }

  40% {
    transform: scale(1) rotate(50deg);
    opacity: 1;
  }

  70% {
    transform: scale(40) rotate(50deg);
    opacity: 0;
  }

  100% {
    transform: scale(60) rotate(50deg);
    opacity: 0;
  }
}


/* ==========================================================================
   note-basic
   ========================================================================== */

.c-note {
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--color-text-sub);

  &:where(ol) {
    margin: 0;
    padding-left: 1.4em;
  }

  & li::marker {
    content: "※";
  }

  & li:not(:first-child) {
    margin-top: 0.2em;
  }
}


/* ==========================================================================
   price-compact
   ========================================================================== */

.c-price {
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-text);

  & span {
    margin-left: 0.4em;
    font-size: var(--font-size-s);
    font-weight: normal;
    color: var(--color-text-sub);
  }

  & .prefix {
    margin-left: 0;
    margin-right: 0.3em;
  }
}


/* ==========================================================================
   card-shop
   ========================================================================== */

.c-card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);

  & .shop {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }

  & .logo {
    width: clamp(80px, 80px + 5vw, 120px);
    height: clamp(80px, 80px + 5vw, 120px);
    flex-shrink: 0;
    object-fit: contain;
  }

  & .shopInfo {
    flex: 1;
    min-width: 0;

    & .c-btn {
      width: 100%;
    }

    /* 「ショップページ」ボタン：リンクナビと同じ形状＋細い茶色枠 */
    & .c-btn--fill-icon {
      padding: 0.1em 0.5em;
      line-height: 1.3;
      white-space: nowrap; /* 文字を改行させない */
      border: 1px solid var(--color-secondary);
      border-radius: 999px;
      background: var(--color-white);
      color: var(--color-text);
      transition: none; /* 色の切り替え途中のちらつき防止 */

      &:hover {
        background: var(--color-secondary);
        color: var(--color-white);
        opacity: 1; /* 共通の半透明ホバーを打ち消す */
      }
    }
  }

  & .shopName {
    margin: 0;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    font-weight: bold;
    color: var(--color-text);
  }

  & .shopMeta {
    margin: 0.5em 0;
    font-size: var(--font-size-s);
    color: var(--color-text-sub);
    text-align: center;
  }

  & .media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  & .body {
    padding: var(--spacing-sm);

    & .c-note {
      margin: 0 0 var(--spacing-sm);
    }
  }

  & .caption {
    margin: 0 0 0.5em;
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
  }

  & .option {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-s);
    font-weight: normal;
    color: var(--color-text);
  }

  & .productList {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & .product {
    padding: var(--spacing-xs) 0;
    border-top: 1px solid var(--color-border);

    &:first-child {
      border-top: none;
    }

    & .c-price {
      margin: 0;
    }
  }

  & .productName {
    margin: 0 0 0.2em;
    font-weight: bold;
    color: var(--color-text);
  }
}

.c-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PCは常に2列 */
  gap: var(--spacing-md);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   card-event
   ========================================================================== */

.c-card--event {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);

  & .media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  & .body {
    padding: var(--spacing-sm);

    /* ボタンは中身の幅に合わせて中央寄せ */
    & .c-btn--fill-icon {
      width: fit-content;
      margin: var(--spacing-sm) auto 0;
    }
  }

  /* タイトル上のタグ（ワークショップ・期間限定催事など） */
  & .tag {
    width: fit-content;
    margin: 0 0 4px;
    padding: 0.1em 0.8em;
    border-radius: 4px;
    background: var(--color-secondary); /* 見出しと同じ茶色 */
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: bold;
  }

  & .eventTitle {
    margin: 0 0 0.5em;
    font-size: var(--font-size-m);
    font-weight: bold;
    color: var(--color-secondary);
  }

  & .lead {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
  }
}

/* 日時・場所などの情報リスト（イベントカード・ノベルティ・抽選会共通） */
:is(.c-card--event, .c-novelty, .c-lottery) .infoList {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.5em; /* ラベルと右側のテキストの間 */
  row-gap: 0.8em;
  margin: 0;
  padding: 0.4em 0;
  padding-top: calc(var(--spacing-sm) + 0.4em);
  border-top: 1px solid var(--color-border);

  /* 「日時」「場所」などのラベル */
  & dt {
    /* 右側テキストの1行目と上下中央をそろえる：（右側1行の高さ − ラベルの高さ）÷ 2 */
    margin-top: calc((var(--font-size-base) * var(--line-height-base) - (var(--font-size-s) * 1.3 + 0.2em)) / 2);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: var(--font-size-s);
    font-weight: normal;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }

  & dd {
    margin: 0;
    color: var(--color-text);
  }

  /* 時間（途中で改行させず、入りきらない時は日付との間で改行） */
  & .time {
    display: inline-block;
  }

  /* ※の注意書き（本文より1段階小さく） */
  & .note {
    display: block;
    font-size: var(--font-size-s);
  }
}

/* ノベルティ・抽選会の情報リスト：イベントカードと違い、上に区切り線は不要（共通の .infoList より後に書いて上書きする） */
:is(.c-novelty, .c-lottery) .infoList {
  padding-top: 0.4em;
  border-top: none;
}

/* 抽選会：PCは「時間」「場所」を横並び（ラベル・内容・ラベル・内容の4列） */
@media (min-width: 769px) {
  .c-lottery .infoList {
    grid-template-columns: auto auto auto 1fr;

    /* 時間の内容と「場所」ラベルの間をあける */
    & dd + dt {
      margin-left: var(--spacing-md);
    }
  }
}

/* ノベルティ本文（上：時間・場所・条件、下：ノベルティ画像を横並び。SPは画像も縦並び） */
.c-novelty {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);

  /* 画像3枚を均等幅で横並び */
  & .c-novelty__images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }

    & img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}


/* ==========================================================================
   button-fill
   ========================================================================== */

.c-btn {
  display: inline-block;
  padding: 0.6em 2em;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.85;
  }
}



/* ==========================================================================
   spot-list
   ========================================================================== */

.c-spot-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0;
  padding: 0;
  list-style: none;
}

.c-spot {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);

  &:nth-child(odd) {
    flex-direction: row-reverse;
  }

  @media (max-width: 768px) {
    &,
    &:nth-child(odd) {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-sm);
    }
  }
}

.c-spot__image {
  position: relative; /* イラストを重ねる基準 */
  flex: 0 0 50%;

  & img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 画像の角に重ねるイラスト（高さは画像の40%、下と外側に1emはみ出す） */
  & .c-spot__illust {
    position: absolute;
    bottom: -1em;
    z-index: 1;
    width: auto;
    height: 40%;
    aspect-ratio: auto;
    object-fit: contain;
    transform-origin: 50% 100%; /* 足元を軸に揺らす */
    animation: c-spot-illust-sway 2.4s ease-in-out infinite alternate;
    pointer-events: none;
  }

  & .c-spot__illust--right {
    right: -1em;
  }

  & .c-spot__illust--left {
    left: -2em;

    @media (max-width: 768px) {
      left: -1em; /* SPは画面端まで余裕がないため、はみ出しを控えめに */
    }

    animation-delay: -1.2s; /* 隣のイラストと揺れのタイミングをずらす */
  }

  /* 大きめのイラスト（通常の1.5倍） */
  & .c-spot__illust--lg {
    bottom: -2em; /* 大きい分、下に1em多くずらす */
    height: 60%;
  }

  /* 少し控えめなサイズ（--lg と併用して高さだけ上書き） */
  & .c-spot__illust--md {
    height: 48%;
  }

  /* 上側に配置（下基準の指定を解除し、上に2emはみ出す） */
  & .c-spot__illust--top {
    top: -2em;
    bottom: auto;
  }
}

@keyframes c-spot-illust-sway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .c-spot__image .c-spot__illust {
    animation: none;
  }
}

.c-spot__body {
  flex: 1;
}

.c-spot__title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-m);
  font-weight: bold;
  line-height: 1.4;

  /* 文字の下にだけ下線（色は h2 と同じ、太さは太字の線とほぼ同じ） */
  text-decoration: underline;
  text-decoration-color: #eb5e00;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: none; /* 文字の下にはみ出る部分で線が途切れないように */
}

.c-spot__text {
  margin: 0;
}


/* ==========================================================================
   shop-card
   ========================================================================== */

.c-shopList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 0;
  padding: 0;
  list-style: none;

  @media (max-width: 768px) {
    gap: 12px;
  }
}

.c-shopCard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);
}

/* ショップ画像（3:2の比率で、周りに店名エリアと同じ12pxの余白） */
.c-shopCard__logo {
  padding: 12px 12px 0; /* 下は店名エリアの上余白（12px）があるため0 */

  & img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover; /* 比率が少し違う画像も3:2に切り抜いて表示 */
  }
}

.c-shopCard__label {
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 0.1em 0.8em;
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: bold;
  line-height: 1.6;

  &.c-shopCard__label--new {
    background: var(--color-secondary);
    color: var(--color-white);
  }

  &.c-shopCard__label--move,
  &.c-shopCard__label--renewal {
    background: var(--color-white);
    color: var(--color-secondary);
  }
}

.c-shopCard__body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 20px;
  padding: 12px;

  /* SPはロゴの下に店名・階数・業種を縦に並べる */
  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ショップロゴ（4枚とも同じ幅。PCは高さを右側の店名＋業種の高さが上限に） */
.c-shopCard__brand {
  display: flex;
  flex: 0 0 96px;
  align-self: stretch; /* 右側のテキストと同じ高さに伸ばす */
  align-items: center;

  /* SPは縦並びのため、幅だけ固定して高さは画像なり */
  @media (max-width: 768px) {
    flex: none;
    align-self: center; /* ロゴだけ中央揃え */
    width: 96px;
  }

  & img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%; /* テキストより高くなる場合は、縦横比を保ったまま枠内に縮める */
    object-fit: contain;
  }
}

/* 業種の行（階数＋業種を横並び） */
.c-shopCard__meta {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
}

/* 階数（文字色と同じ色の細い角丸枠） */
.c-shopCard__floor {
  flex-shrink: 0;
  padding: 0 0.4em;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--color-text);
  line-height: 1.4;

  @media (max-width: 768px) {
    font-size: var(--font-size-xs);
  }
}

/* 「詳しくはこちら」ボタンの外枠 */
.c-shopCard__more {
  padding: 0 12px 12px;

  @media (max-width: 768px) {
    padding-inline: 8px;
  }

  /* ボタンは中身の幅に合わせて中央寄せ */
  & .c-btn--fill-icon {
    width: fit-content;
    margin: 0 auto;
    white-space: nowrap; /* 「詳しくはこちら」を改行させない */

    /* SPはカード幅が狭いため、文字サイズはそのままで左右の余白とアイコンとの間隔を詰める */
    @media (max-width: 768px) {
      gap: 0.4em;
      padding-inline: 0.6em;
    }
  }
}

/* 店名・業種（PCはロゴの右、SPはロゴの下に2段で並べる） */
.c-shopCard__info {
  flex: 1;
  min-width: 0;
}

.c-shopCard__name {
  margin: 0 0 2px;
  font-size: var(--font-size-base);
  font-weight: bold;
  line-height: 1.4;

  @media (max-width: 768px) {
    font-size: var(--font-size-s);
  }
}

.c-shopCard__category {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-sub);
  line-height: 1.4;

  @media (max-width: 768px) {
    font-size: var(--font-size-xs);
  }
}

.c-shopCard__date {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline; /* 日付の数字と曜日は下辺（ベースライン）揃え */
  gap: 0 0.3em;
  padding: 6px; /* 上下左右とも同じ余白 */
  background: var(--color-accent);
  font-size: var(--font-size-base);
  font-weight: bold;
  color: var(--color-white);
  line-height: 1.4;
  text-align: center;

  @media (max-width: 768px) {
    font-size: var(--font-size-s);
  }

  /* 日付の左に並べるタグ（日付の数字と上下中央揃え） */
  & .c-shopCard__label {
    align-self: center;
    margin: 0 0.2em 0 0;
  }
}

/* 日付の数字部分（曜日より1段階大きく） */
.c-shopCard__dateNum {
  font-size: var(--font-size-m);

  @media (max-width: 768px) {
    font-size: var(--font-size-base);
  }
}


/* ==========================================================================
   movie
   ========================================================================== */

.c-movie {
  aspect-ratio: 16 / 9;
  background: var(--color-bg-sub);

  & iframe,
  & img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }
}


/* ==========================================================================
   confetti
   ========================================================================== */

.c-confetti {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.c-confetti__piece {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--size);
  will-change: transform;
  animation: confetti-fall var(--fall) linear var(--delay) infinite backwards;

  & img {
    display: block;
    width: 100%;
    height: auto;
    animation: confetti-sway var(--sway) ease-in-out infinite alternate;
  }
}

@keyframes confetti-fall {
  from { transform: translateY(-10vh); }
  to   { transform: translateY(110vh); }
}

@keyframes confetti-sway {
  from { transform: translateX(calc(var(--swing) * -1)) rotate(0deg) rotateY(0deg); }
  to   { transform: translateX(var(--swing)) rotate(var(--spin)) rotateY(180deg); }
}

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


/* ==========================================================================
   kv-animation
   ========================================================================== */

.kv-stage-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gradient-kv);
  z-index: 0;
}

.kv-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform, opacity;
  pointer-events: none;
}

/* ---- z-index ---- */
.l-book        { z-index: 1; }
.l-building    { z-index: 2; }
.l-stage       { z-index: 3; }
.l-cafe        { z-index: 4; }
.l-kids        { z-index: 5; }
.l-kitchencar  { z-index: 6; }
.l-left_group  { z-index: 7; }
.l-balloon     { z-index: 8; }
.l-title_jp    { z-index: 9; }
.l-title_en    { z-index: 10; }

/* ---- 初期状態 ---- */
.l-book        { opacity: 0; transform: translateY(4%) scale(0.94); }
.l-building    { opacity: 0; transform-origin: 52% 78%; transform: translateY(6%) scale(0.4); }
.l-stage       { opacity: 0; transform-origin: 50% 72%; transform: translateY(6%) scale(0.5); }
.l-cafe        { opacity: 0; transform-origin: 78% 70%; transform: translateY(6%) scale(0.5); }
.l-kids        { opacity: 0; transform-origin: 45% 88%; transform: translateY(8%) scale(0.5); }
.l-kitchencar  { opacity: 0; transform-origin: 82% 78%; transform: translateY(7%) scale(0.5); }
.l-left_group  { opacity: 0; transform-origin: 15% 85%; transform: translateY(8%) scale(0.5); }
.l-balloon     { opacity: 0; transform: translateY(10%) scale(0.6); }
.l-title_jp    { opacity: 0; transform: scale(0.7); }
.l-title_en    { opacity: 0; transform: translateY(-6%) scale(0.6); }

/* ---- アニメーション ---- */
.play .l-book {
  animation: bookOpen .6s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: .15s;
}
.play .l-building {
  animation: growUp .65s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: .55s;
}
.play .l-stage {
  animation: growUp .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: .95s;
}
.play .l-cafe {
  animation: growUp .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 1.15s;
}
.play .l-kids {
  animation: growUp .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 1.3s;
}
.play .l-kitchencar {
  animation: growUp .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 1.45s;
}
.play .l-left_group {
  animation: growUp .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 1.6s;
}
.play .l-balloon {
  animation: floatUp .7s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 2.35s;
}
.play .l-title_jp {
  animation: titleZoomIn .6s cubic-bezier(.25,.8,.35,1) forwards;
  animation-delay: 3.2s;
}
.play .l-title_en {
  animation: titleBurst .8s cubic-bezier(.2,1.4,.4,1) forwards;
  animation-delay: 4.05s;
}

@keyframes bookOpen {
  0%   { opacity: 0; transform: translateY(4%) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes growUp {
  0%   { opacity: 0; transform: translateY(6%) scale(0.35); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(10%) scale(0.6); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes titleBurst {
  0%   { opacity: 0; transform: translateY(-8%) scale(0.4) rotate(-4deg); }
  55%  { opacity: 1; transform: translateY(2%) scale(1.12) rotate(1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes titleZoomIn {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .kv-stage-wrap .kv-layer {
    opacity: 1;
    transform: none;
  }
  .play .kv-layer {
    animation: none;
  }
}