@charset "UTF-8";

/* ========================================================
                * Preview環境の土台リセット *
===========================================================
  本番はマスターページ側の共通CSSで body の既定マージンが
  リセットされているため .lp_contents スコープ外だが、プレビュー
  HTMLにはその共通CSSが無いため、ここで最小限だけ補う。
  これが無いとブラウザ既定の body{margin:8px}相当により
  ページ全体が右にずれ、右端フルブリード（100vw系のbox-shadow等）や
  絶対配置の装飾画像が右にはみ出して横スクロールが発生する
  （ユーザー指摘により発見・追加）。
========================================================= */
html,
body {
  margin: 0;
  padding: 0;
}

/* ========================================================
                      * Variable *
===========================================================
  単位システム（coding-guidelines.md 1章参照）
  - SP特化型部分       : calc(N * var(--rem))      ※Nはデザインの値（単位なし）
  - SP（768px以下）    : calc(N * (100vw / アートボード幅))
  - PC（769px以上）    : rem（1rem = 10px）
  - line-height        : 単位なし
  - letter-spacing     : em

  ▼SP特化型デザインの場合: 以下の :root 一式を案件の値に合わせて使う。
    --pw          : PCデザイン幅（例 1600）
    --sw          : SPアートボード幅（例 750）
    --artboard-pw : PC上でSPレイアウトを表示する幅（例 500）
    --artboard-sw : SPアートボード幅（例 750）
  ▼SP特化型でない場合: この :root ブロックごと削除してよい。
========================================================= */
:root {
  --pw: 1440; /* PCデザイン幅 */
  --sw: 390; /* SPアートボード幅 */
  --artboard-pw: 500; /* PC上でSPレイアウトを表示する幅 */
  --artboard-sw: 390; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  /* SP をベース値として持たせ、PC のみ min-width:769px で上書きする */
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
  --header-height: 0px;
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

/* デザイン実寸以上ではサイズを固定する */
@media (min-width: 1440px) {
  :root {
    --variable: 1px;
  }
}

[id] {
  scroll-margin-top: var(--header-height);
}

/* ========================================================
                      * Design Token *
===========================================================
  LP固有のカスタムプロパティは :root ではなく .p-feature に定義する。
  色・フォントは案件のデザインに合わせて書き換える。
  Webフォントを使う場合は読み込みコードをユーザーから受領する
  （Claudeが外部から取得・kitId推測をしてはならない）。
========================================================= */
.p-feature {
  --base-font-color: #212121;
  --color-accent: #b52024;

  /* Figma実測のブランドカラー（planning.md デザイントークン参照） */
  --color-cream: #fefeec;
  --color-osaka-green: #66b876;
  --color-web-orange: #dc8543;
  --color-yellow: #ededa2;
  --color-red: #b52024;
  --color-guest-gold: #e6b741;
  --color-card-bg: #f8f8f8;
  --color-card-border: #ededa2;
  --color-web-cream: #ffefe2; /* WEB会場タブ本文の背景（cremeより橙寄り。E担当実測） */
  --color-talkshow-accent: #23829d; /* TALK SHOWバッジ（C担当実測） */
  --color-time-badge: #f6832e; /* TALK SHOW/InstagramLIVE共通の開始時刻バッジ（C/G担当実測） */
  --color-live-pink: #ea3378; /* InstagramLIVEバッジ（G担当実測） */
  --color-live-pink-border: #ea3364; /* InstagramLIVEバッジ枠線（G担当実測） */
  --color-osaka-area-bg: #f7f7cf; /* OSAKA会場エリア全体（banner～TALK SHOW～LIMITED EVENT）の背景。critical-reviewer検出により追加 */
  --color-live-area-bg: #fcfcd9; /* InstagramLIVEセクションの背景。critical-reviewer検出により追加 */
  --color-side-deco-bg: #fff5ca; /* PC専用サイド装飾パネルの背景。critical-reviewer検出により追加 */

  /* Google Fonts（Jost / Noto Sans JP）。KVに合わせたデザイン指定フォント */
  /* Jostを先頭に置き、英字・数字はJost、日本語はNoto Sans JP以降へ
     グリフ単位で自動フォールバックさせる（Jostは和文グリフを持たないため）。
     個別に --lp-font-en を当て忘れた箇所でも英字がJostにならない事故を防ぐ
     （ユーザー指摘: 「英字はJostで反映してほしい」） */
  --lp-font-ja: "Jost", "Noto Sans JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, sans-serif;
  --lp-font-en: "Jost", Verdana, Helvetica, Arial, sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .075em;

  /* z-index 採番（coding-guidelines.md 2-5）
     ▼サイト共通（マスターページ側。LP から変更しない）
       #header : 999   ← モーダルはこれより必ず上に出す
       #footer :   2   ← Site Common Override で指定
     ▼LP 内。生の数値ではなく必ずこの変数を使う */
  --z-base: 1; /* 通常の重なり調整（画像の前後関係など） */
  --z-sticky: 10; /* LP 内の追従要素（追従CTA・SP特化型の左右ロゴ/ナビ）※ヘッダーより下 */
  --z-modal-overlay: 1000; /* モーダルの背景。#header(999) より上 */
  --z-modal: 1010; /* モーダル本体・閉じるボタン */

  /* 追従ヘッダー #header の実測高さ。script.js の initHeaderOffset() が上書きする。
     プレビュー HTML には #header が無いため 0px のまま（＝影響なし） */
  --header-h: 0px;
}

/* ========================================================
                * SP特化型：PC中央幅ロック *
===========================================================
  SP特化型デザイン（--artboard-pw:390 / --pw:1440）。PC(769px以上)では
  SPレイアウトをそのまま幅390px（--rem-pc基準）で中央に固定表示し、
  左右の余りに .project-side-deco（PC専用サイド装飾）を配置する。
  この幅ロックが無いと、幅指定を持たない要素（img等）が .lp_contents の
  実際の画面幅までそのまま伸びてサイド装飾と重なってしまう
  （lp-reviewer実表示確認で検出。coding-guidelines.md 1-3節）。
========================================================= */
@media (min-width: 769px) {
  .lp_contents {
    width: calc(390 * var(--rem));
    margin: 0 auto;
  }
}

/* ========================================================
                      * Reset (LPスコープ内) *
===========================================================
  全ブランド共通で使う .lp_contents スコープ内リセット。
  :where() で詳細度を上げずに閉じ込める。原則ここは変更しない。
========================================================= */
.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: "palt";
  }

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

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

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

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================================================
                      * Site Common Override *
===========================================================
  本番(aspx)でマスターページが出力するサイト共通要素の上書き。
  aspx 納品時は必ず入れる（coding-guidelines.md 6-7 参照）。
  - #Wrap   : 幅が効かず横スクロールが出る事例があるため width:100% を明示
  - #footer : LP 内の fixed / z-index 要素がフッターに重なるのを防ぐ
  プレビュー HTML には #Wrap / #footer が無いため無効（aspx 化後に効く）。
  .lp_contents スコープ外への例外的な指定。この 2 つ以外は追加しない。
========================================================= */
#Wrap {
  width: 100%;
}

#footer {
  position: relative;
  z-index: 100;
}

/* ========================================================
                      * Anchor Offset *
===========================================================
  本番のサイト共通ヘッダー #header は追従（fixed）のため、ページ内
  アンカーの着地位置をヘッダーの高さ分ずらす（coding-guidelines.md 3-1）。
  --header-h には script.js の initHeaderOffset() が実測値を入れる
  （高さは SP/PC・ブランドで異なるので固定値で持たない）。
  scroll-margin-top なので JS のスムーススクロールだけでなく、
  ハッシュ付き URL での直接着地・ブラウザバック・Tab フォーカスにも効く。
  アンカー上に余白も入れたい場合は calc(var(--header-h) + 20 * var(--rem)) 等にする。
========================================================= */
.lp_contents {
  & [id] {
    scroll-margin-top: var(--header-h, 0px);
  }
}

/* ========================================================
                      * Utility *
===========================================================
  u-d-lg : PC(769px以上)のみ表示 / u-d-md : SP(768px以下)のみ表示
========================================================= */
.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }
}

/* ========================================================
                      * Accordion *
===========================================================
  script.js の accordion() と対。
  .js-accordion--body には .accordion__body を併記して使う
  （.js-* にスタイルを当てない規約のため）。不要なら削除。
========================================================= */
.lp_contents {
  & .accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);
  }
}

/* ========================================================
                      * Modal *
===========================================================
  script.js の modal() と対。
  .js-modal--container には .modal を併記して使う
  （.js-* にスタイルを当てない規約のため）。不要ならこのブロックを削除。

  z-index はサイト共通ヘッダー #header(999) より上に出すため
  --z-modal-overlay / --z-modal を使う（coding-guidelines.md 2-5）。
  ※祖先要素に transform / filter / opacity(<1) / will-change / contain が
    付くと新しいスタッキングコンテキストが作られ、いくら z-index を上げても
    #header より下に潜る。モーダルは .lp_contents 直下に置き、祖先に
    これらのプロパティを付けないこと（position: fixed も同様に壊れる）。

  サイズ・色・余白は案件のデザインに合わせて書き換える
  （var(--rem) は SP特化型用。それ以外の案件は単位を合わせる）。
========================================================= */
.lp_contents {
  & .modal {
    position: fixed;
    z-index: var(--z-modal-overlay);
    inset: 0;
    display: none;
    place-items: center;
    overflow-y: auto;
    padding: calc(20 * var(--rem, 1px));
    background: rgb(0 0 0 / .7);

    &.is-open {
      display: grid;
    }
  }

  & .modal__body {
    position: relative;
    z-index: var(--z-modal);
    width: 100%;
    width: calc(330 * var(--rem, 1px));
    background: #fff;
  }
}

/* ========================================================
                      * Animation *
===========================================================
  .js-intersection : スクロールで表示領域に入ったら is-active が付く
  （script.js の initScrollAnimations と対）。不要なら削除。
  ※SP特化型でない案件では var(--rem, 1px) がフォールバックの 1px になり
    移動量 40px 固定になる。案件の単位系に合わせて値を調整すること。
========================================================= */
.lp_contents {
  & .js-intersection {
    opacity: 0;
    translate: 0 calc(40 * var(--rem, 1px));
    transition: opacity .8s var(--transition-timing), translate .8s var(--transition-timing);

    &.is-active {
      opacity: 1;
      translate: 0 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .js-intersection {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* ========================================================
                      * Mainvisual *
========================================================= */



/* ========================================================
                      * Section *
========================================================= */

/* ========================================================
                      * Mainvisual *
===========================================================
  KV メインビジュアル（Figma node 2462:10116）。
  <h1> でラップし、alt はページ title と同一内容。
========================================================= */
.lp_contents {
  & .project-mainvisual {
    line-height: 0;
  }

  & .project-mainvisual__heading {
    margin: 0;
  }
}

/* ========================================================
                * Venue Card (開催概要カード) *
===========================================================
  KV 直下に常時表示される開催概要カード 2 種
  （Figma node 2462:10016「OSAKA会場」/ node 2462:10117「WEB会場」）。
  タブ切替（別セクションの OSAKA/WEB 会場タブ）とは独立して常時表示する。

  CAMPAIGN の「10」「%」「OFF!」「MAX」「15」「POINT BACK !」は
  Figma上はベクターパスの装飾文字だが、画像化せず CSS テキスト
  （Jost フォント + 色 + サイズ）で近似する（planning.md 実装方針メモ）。
========================================================= */
.lp_contents {
  & .section-venue-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(40 * var(--rem)) 0;
    gap: calc(30 * var(--rem));
    /* Figmaスクリーンショットの実測ピクセル(#fefeec)で確認。既存トークンと一致
       （ユーザー指摘「MV下、開催日時のエリアの背景色が違う」への対応） */
    background-color: var(--color-cream);
  }

  & .section-venue-card {
    position: relative;
    width: calc(331 * var(--rem));
    padding-bottom: calc(30 * var(--rem));
    border: 2px solid var(--color-card-border);
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    margin: calc(50 * var(--rem)) auto 0;
  }

  & .section-venue-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(40 * var(--rem));
    background-color: var(--color-yellow);
    font-size: calc(18 * var(--rem));
    font-weight: 500;
    line-height: 2;
    letter-spacing: .05em;
    text-align: center;
  }


  & .section-venue-card.section-venue-card--web {
    border: 2px solid #f6dec9;
    margin: calc(0 * var(--rem)) auto calc(30 * var(--rem));
  }

  & .section-venue-card--web .section-venue-card__header {
    background-color: #f9d7ba;
  }

  & .section-venue-card--web .section-venue-card__info-item::before {
    border-top: 1px dashed #f9d7ba !important;
  }

  & .section-venue-card__header-en {
    font-family: var(--lp-font-en);
  }

  & .section-venue-card__body {
    margin-top: calc(20 * var(--rem));
  }

  & .section-venue-card__info {
    width: calc(280 * var(--rem));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & .section-venue-card__info-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(5 * var(--rem));
  }

  /* 2つ目の情報グループ（会場）の上に点線区切りを付ける
     （dl の内容モデル上、dt/dd を持たない装飾用divを直接の子にしないための実装） */
  & .section-venue-card__info-item + .section-venue-card__info-item {
    position: relative;
    margin-top: calc(40 * var(--rem));

    &::before {
      content: "";
      position: absolute;
      top: calc(-15 * var(--rem));
      left: 50%;
      width: calc(269 * var(--rem));
      translate: -50% 0;
      border-top: 1px dashed #c6c642;
    }
  }

  & .section-venue-card__label {
    font-size: calc(15 * var(--rem));
    font-weight: bold;
    line-height: 2;
    letter-spacing: .05em;
    text-align: center;
  }

  & .section-venue-card__value {
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    letter-spacing: .05em;
    text-align: center;
  }

  & .section-venue-card__value--place {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--rem));
  }

  & .section-venue-card__pin {
    flex-shrink: 0;
    width: calc(13 * var(--rem));
    height: calc(16 * var(--rem));
    margin-bottom: calc(4 * var(--rem));
  }

  /* CAMPAIGN 01 / 02（WEB会場カードのみ） */
  & .section-venue-card__campaigns {
    display: flex;
    flex-direction: column;
    gap: calc(15 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .section-venue-card__campaign {
    width: calc(231 * var(--rem));
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
  }

  & .section-venue-card__campaign-header {
    padding: calc(5 * var(--rem)) 0;
    background-color: var(--color-yellow);
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
    color: var(--color-red);
    text-align: center;
  }

  & .section-venue-card__campaign-body {
    padding: calc(20 * var(--rem)) 0 calc(15 * var(--rem));
    background-color: var(--color-cream);
    text-align: center;
  }

  & .section-venue-card__campaign-label {
    font-size: calc(14 * var(--rem));
    font-weight: bold;
    letter-spacing: .05em;
  }

  /* ユーザー指摘によりCSS再現(span構成)からFigma実データの画像書き出しに変更。
     以前使っていた__number/__percent/__suffix/__max のspanクラスは未使用になったため削除 */
  & .section-venue-card__campaign-figure {
    margin-top: calc(10 * var(--rem));
    display: flex;
    justify-content: center;
  }

  & .section-venue-card__campaign-figure img {
    width: auto;
    height: calc(70 * var(--rem));
  }

  & .section-venue-card__note {
    width: calc(230 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
    font-size: calc(11 * var(--rem));
    line-height: 1.5;
    letter-spacing: .05em;
    text-align: center;
  }

  /* & .campaign {
    margin-top: calc(40 * var(--rem));
  } */

  & .campaign .section-venue-card__value a {
    display: inline-block;
    margin-top: calc(10 * var(--rem));
    text-decoration: underline;
  }

  & .campaign .section-venue-card__value small {
    font-size: calc(11 * var(--rem));
  }

  & .campaign .section-venue-card__value .date_2 {
    display: inline-block;
    font-size: calc(20 * var(--rem));
    font-weight: 700;
  }

  & .campaign .section-venue-card__value .point {
    font-size: calc(20 * var(--rem));
    font-weight: 700;
    color: var(--color-osaka-green);
  }

  & .campaign .section-venue-card__value .shoplist {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: unset;
    border-radius: calc(50 * var(--rem));
    font-size: calc(15 * var(--rem));
    background: var(--color-osaka-green);
    color: #fff;
    width: calc(250 * var(--rem));
    height: calc(35 * var(--rem));
    margin: calc(5 * var(--rem)) auto 0;
    padding-top: calc(5 * var(--rem));
  }

  & .campaign .section-venue-card__header {
    background-color: var(--color-osaka-green);
  }

  & .campaign .section-venue-card--web {
    border: 2px solid var(--color-osaka-green);
    margin: calc(0 * var(--rem)) auto calc(0 * var(--rem));
  }

  & .campaign .section-venue-card__header-en {
    color: #fff;
  }

  & .campaign .section-venue-card__value--place {
    text-decoration: unset;
  }

  & .campaign .section-venue-card__info-item::before {
    border-top: 1px dashed var(--color-osaka-green) !important;
}
  

}

/* ========================================================
                * 導入文（B. .project-intro） *
===========================================================
  Figma: 背景 Rectangle 39（2462:10015, y=1639-2109）。
  get_design_context で実測した結果、塗り色は変数名
  「color/white」= #ffffff だった（依頼メモの「--color-cream 想定」とは
  異なる。cream ではなく白で実装。B.md 参照）。
========================================================= */
.lp_contents {
  & .project-intro {
    position: relative;
    /* z-index:-1の装飾写真をこの要素内に閉じ込めるため、ここでスタッキング
       コンテキストを作る（無いと祖先まで突き抜けて背景ごと隠れてしまう） */
    z-index: var(--z-base);
    /* 装飾写真3点が上にはみ出し、z-index:autoの前セクションより手前に来て
       重なってしまうため（project-osaka__brands-decoと同種の不具合） */
    overflow: hidden;
    padding: calc(70 * var(--rem)) 0 calc(40 * var(--rem));
    background: #fff;
  }

  /* 装飾写真3点（Figma node 2462:10040/10041/10042。左右にはみ出す配置なので
     すでに画面端でクリップ済みの書き出し画像を使用。ユーザー指摘により追加） */
  & .project-intro__deco {
    position: absolute;
    z-index: -1; /* 静的コンテンツ(見出し等)より背面に置く。position:relativeな親内でのみ有効なため他コンテンツに影響しない */
    pointer-events: none;
  }

  & .project-intro__deco--1 {
    top: calc(129 * var(--rem));
    left: 0;
    width: calc(50 * var(--rem));
    height: calc(144 * var(--rem));
  }

  & .project-intro__deco--2 {
    position: absolute;
    top: calc(-140 * var(--rem));
    right: calc(-30 * var(--rem));
    width: calc(84 * var(--rem));
    height: calc(208 * var(--rem));
    z-index: -1;
  }

  & .project-intro__deco--3 {
    top: 0;
    left: calc(280 * var(--rem));
    width: calc(110 * var(--rem));
    height: calc(83 * var(--rem));
    overflow: hidden;
  }

  & .project-intro__heading {
    margin: 0;
    font-weight: 700;
    color: var(--base-font-color);
    text-align: center;
    letter-spacing: .046em; /* Figma実測 1.1px（24px基準） */
  }

  & .project-intro__heading-en {
    font-family: var(--lp-font-en);
    font-size: calc(24 * var(--rem));
  }

  & .project-intro__heading-ja {
    font-family: var(--lp-font-en); /* Figma実測どおりJost指定（和文グリフは自動フォールバック） */
    font-size: calc(22 * var(--rem));
  }
}

/* --------------------------------------------------------
    説明文＋アコーディオン（view more で続きを表示）
   -------------------------------------------------------- */
.lp_contents {
  & .project-intro__accordion {
    width: calc(330 * var(--rem));
    margin: calc(30 * var(--rem)) auto 0;
  }

  & .project-intro__lead-text,
  & .project-intro__more-text {
    font-family: var(--lp-font-ja);
    font-weight: 500;
    font-size: calc(14 * var(--rem));
    line-height: 1.75;
    letter-spacing: .03em; /* Figma実測 0.42px（14px基準） */
    color: var(--base-font-color);

    & + & {
      margin-top: calc(15 * var(--rem));
    }
    text-align: center;
  }

  & .project-intro__more {
    /* 閉じている間は script.js の accordion() が max-height:0 のまま保つ
       （style.css 本体の .accordion__body と対）。padding-top はここで
       付け、開いたときのみ視覚的に効く（閉時は overflow:hidden で隠れる）。 */
    padding-top: calc(15 * var(--rem));
  }

  & .project-intro__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--rem));
    width: fit-content;
    margin: calc(10 * var(--rem)) auto 0;
  }

  & .project-intro__toggle-label,
  & .project-intro__toggle-icon {
    font-family: var(--lp-font-en);
    font-size: calc(14 * var(--rem));
    color: var(--color-red);
    letter-spacing: .05em; /* Figma実測 0.7px（14px基準） */
  }

  & .project-intro__toggle-label {
    text-decoration: underline;
    text-underline-offset: .1em;
  }

  & .project-intro__toggle-icon {
    display: inline-block;

    &::before {
      content: "+";
    }
  }

  & .project-intro__accordion.is-open .project-intro__toggle-icon::before {
    content: "\2212"; /* − マイナス記号 */
  }
}

/* ========================================================
                * 会場タブ（B. .project-venue-tabs） *
===========================================================
  data-tabs="venue" のトリガーのみ実装。パネルの中身は各セクション担当が
  .js-tabs--panel[data-tab-panel="osaka|web"] として個別実装する
  （E担当の .project-web と同じ「分散パネル」方式。B.md参照）。
========================================================= */
.lp_contents {
  & .project-venue-tabs {
    position: relative;
    width: calc(331 * var(--rem));
    margin: calc(60 * var(--rem)) auto 0;
    z-index: 0;
  }

  & .project-venue-tabs__buttons {
    display: flex;
    justify-content: space-between;
    gap: calc(11 * var(--rem));
  }

  & .project-venue-tabs__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--rem));
    width: calc(160 * var(--rem));
    height: calc(52 * var(--rem));
    border-radius: calc(4 * var(--rem));
    box-shadow: 0 calc(3 * var(--rem)) calc(5 * var(--rem)) rgb(0 0 0 / .1);
  }

  & .project-venue-tabs__trigger--osaka {
    background: var(--color-osaka-green);
  }

  & .project-venue-tabs__trigger--web {
    background: var(--color-web-orange);
  }

  & .project-venue-tabs__trigger-label {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(15 * var(--rem));
    color: #fff;
    letter-spacing: .05em; /* Figma実測 0.75px（OSAKA側実測値をWEB側にも統一適用。B.md参照） */
  }

  & .project-venue-tabs__arrow {
    width: 0;
    height: 0;
    border-left: calc(5 * var(--rem)) solid transparent;
    border-right: calc(5 * var(--rem)) solid transparent;
    border-top: calc(5 * var(--rem)) solid #fff;
  }

  & .project-venue-tabs__note {
    margin: calc(15 * var(--rem)) 0 0;
    font-family: var(--lp-font-ja);
    font-size: calc(11 * var(--rem));
    line-height: 1.5;
    letter-spacing: .05em; /* Figma実測 0.55px（11px基準） */
    color: var(--base-font-color);
    text-align: center;
  }
}

/* ========================================================
                * タブパネルの表示制御（共通実装） *
===========================================================
  E担当メモにより、venueタブ切替の共通表示制御はB担当（本ファイル）で
  実装する想定のため、data-tab-panel属性を持つ要素全般に対する汎用ルールを
  ここで定義する。各セクションが個別に .project-web 等へ同趣旨の
  display:none/is-active ルールを重複して書いていても害はない
  （統合時にどちらか一本化してよい。B.md参照）。
  .js-** にはスタイルを当てない規約のため、対象は data-tab-panel 属性
  セレクタ（併記スタイルクラスに相当）とする。
========================================================= */
.lp_contents {
  & [data-tab-panel] {
    display: none;

    &.is-active {
      display: block;
    }
  }
}

/* ========================================================
        * OSAKA会場パネル（B担当分. .project-osaka） *
===========================================================
  .js-tabs--panel[data-tab-panel="osaka"] の併記スタイルクラス。
  上の汎用ルールで display:none/is-active は制御されるため、
  ここでは中身のレイアウトのみ定義する。
========================================================= */
.lp_contents {
  /* OSAKA会場エリア（banner～TALK SHOW～LIMITED EVENT）共通の背景。
     critical-reviewer検出により追加（Figma Rectangle 17 相当） */
  & .project-osaka {
    position: relative;
    /* z-index:-1の装飾写真をこの要素内に閉じ込めるためのスタッキングコンテキスト */
    z-index: var(--z-base);
    background-color: var(--color-osaka-area-bg);
    /* __brands-decoが下にはみ出し、position:relativeを持たない後続セクション
       （z-index:autoのためこのz-index:1の箱より奥に回る）に重なって隠してしまうため
       （PC表示でTALK SHOWの見出し・タブが隠れて見える不具合の原因） */
    overflow: hidden;
    padding-bottom: calc(60 * var(--rem));
  }

  /* 「多くのブランドが出展！」見出し右に添える装飾写真（Figma node 2462:10044。
     ユーザー指摘により追加） */
  & .project-osaka__brands-deco {
    position: absolute;
    z-index: -1; /* 静的コンテンツ(見出し等)より背面に置く。position:relativeな親内でのみ有効 */
    top: calc(143 * var(--rem));
    left: calc(281 * var(--rem));
    width: calc(109 * var(--rem));
    height: calc(297 * var(--rem));
    pointer-events: none;
  }

  & .project-osaka__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(80 * var(--rem));
    background: var(--color-osaka-green);
  }

  & .project-osaka__banner-title {
    margin: 0;
    font-size: calc(34 * var(--rem));
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em; /* Figma実測 1.02px（34px基準） */
  }

  & .project-osaka__banner-title-en {
    font-family: var(--lp-font-en);
  }

  & .project-osaka::before {
    position: absolute;
    content: "";
    background: url(../img/260901/osaka_bg_1.png) no-repeat;
    background-size: 100%;
    width: 100%;
    height: calc(1950 * var(--rem));
    top: calc(635 * var(--rem));
    left: 0;
    z-index: -1;
  }

  & .project-osaka .project-web__campaign {
    width: calc(331 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
  }

  & .project-osaka .project-web__promo.__3 {
    width: calc(230 * var(--rem));
  }

  & .project-osaka .project-web__campaign-body {
    padding: calc(25 * var(--rem)) 0 calc(15 * var(--rem));
  }

  & .project-osaka .project-web__campaign-head {
      background: var(--color-osaka-green);
  }

  & .project-osaka .project-web__campaign-body {
      border: 1px solid var(--color-osaka-green);
  }

}

/* --------------------------------------------------------
    「多くのブランドが出展！」＋ブランドロゴ横スクロール
   -------------------------------------------------------- */
.lp_contents {
  & .project-osaka__brands {
    margin-top: calc(60 * var(--rem));
  }

  & .project-osaka__brands-heading {
    margin: 0;
    font-family: var(--lp-font-ja);
    font-weight: 700;
    font-size: calc(18 * var(--rem));
    color: var(--base-font-color);
    letter-spacing: .03em; /* Figma実測 0.54px（18px基準） */
    text-align: center;
  }

  & .project-osaka__marquee {
    margin-top: calc(30 * var(--rem));
    overflow: hidden;
  }

  & .project-osaka__marquee-row {
    overflow: hidden;

    & + .project-osaka__marquee-row {
      margin-top: calc(30 * var(--rem));
    }
  }

  & .project-osaka__marquee-track {
    display: flex;
    width: max-content;
    animation: project-osaka-marquee 28s linear infinite;
  }

  & .project-osaka__marquee-row--top .project-osaka__marquee-track {
    height: calc(40 * var(--rem));
    animation-duration: 22s;
  }

  & .project-osaka__marquee-row--bottom .project-osaka__marquee-track {
    height: calc(38 * var(--rem));
    animation-duration: 30s;
  }

  & .project-osaka__marquee-item {
    display: flex;
    flex: none;
    align-items: center;
    height: 100%;
    margin-right: calc(30 * var(--rem));
  }

  & .project-osaka__marquee-item img {
    display: block;
    width: auto;
    height: 100%;
  }
}

@keyframes project-osaka-marquee {
  from {
    transform: translateX(0);
  }

  to {
    /* 同じセットを2つ並べているため、半分(-50%)動かすとシームレスにループする */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .project-osaka__marquee-track {
    animation: none;
  }
}

/* ========================================================
                      * TALK SHOW *
===========================================================
  日付タブ（16〜20日）× ゲストカードスライダー（Swiper v8.4.7）。
  data-slider="talkshow-0916"〜"talkshow-0920" の5インスタンス。
  詳細は _sections/C.md を参照。
========================================================= */
.project-talkshow ,
.section-live {
  /* --color-talkshow-accent / --color-time-badge は統合時に style.css の .p-feature へ集約済み */

  position: relative;
  /* 前セクション.project-osakaがz-index:1(--z-base)を持つため、こちらがautoのままだと
     z-index順で.project-osaka側が手前に来て見出し・タブが埋もれて見えなくなる
     （PC表示で発覚。ユーザー検証により特定） */
  z-index: var(--z-base);
  padding: calc(60 * var(--rem)) 0;

  /* ---------- 見出し（TALK SHOW / トークショー） ---------- */
  & .project-talkshow__heading {
    position: relative;
    padding: calc(18 * var(--rem)) 0 calc(14 * var(--rem));
    text-align: center;

    &::before,
    &::after {
      position: absolute;
      left: 50%;
      width: calc(360 * var(--rem));
      height: 1px;
      background-color: var(--base-font-color);
      content: "";
      translate: -50% 0;
    }

    &::before {
      top: 0;
    }

    &::after {
      bottom: 0;
    }
  }

  & .project-talkshow__heading-en {
    font-family: var(--lp-font-en);
    font-size: calc(30 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--base-font-color);
    text-align: center;
    letter-spacing: .03em;
  }

  & .project-talkshow__heading-ja {
    margin-top: calc(10 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1;
    color: var(--base-font-color);
    text-align: center;
    letter-spacing: .05em;
  }

  /* ---------- 日付タブ ---------- */
  & .project-talkshow__tab-list {
    display: flex;
    justify-content: center;
    gap: calc(5 * var(--rem));
    width: calc(330 * var(--rem));
    margin: calc(20 * var(--rem)) auto calc(15 * var(--rem));
  }

  & .project-talkshow__tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: calc(62 * var(--rem));
    height: calc(35 * var(--rem));
    border-radius: calc(4 * var(--rem));
    background-color: #fff;
    box-shadow: 0 calc(3 * var(--rem)) calc(10 * var(--rem)) rgb(0 0 0 / .1);
    color: var(--base-font-color);

    &.is-active {
      background-color: var(--color-osaka-green);
      color: #fff;
    }
  }

  & .project-talkshow__tab-date {
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    font-weight: 500;
    line-height: 1;
  }

  & .project-talkshow__tab-day {
    margin-left: calc(2 * var(--rem));
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    line-height: 1;
  }

  /* ---------- タブパネル / スライダー ---------- */
  & .project-talkshow__panel {
    display: none;

    &.is-active {
      display: block;
    }
  }

  & .project-talkshow__slider {
    position: relative;

    /* Swiperライブラリ本体のCSS（swiper-wrapper / swiper-slide の基本レイアウト）は
       共通読み込みのswiper-bundle.min.cssに依存する。ここでは見た目の上書きのみ行う。
       矢印ボタンはこの要素基準で絶対配置するため、左右のpaddingは付けない
       （カード自体は .project-talkshow__card の margin:0 auto で中央寄せする）。 */
    & .swiper-wrapper {
      align-items: flex-start;
    }
  }

  /* 前後スライド矢印（Swiperナビゲーション。coding-guidelines.md 5-2 の型に準拠） */
  & .project-talkshow__arrow {
    position: absolute;
    top: calc(261 * var(--rem));
    z-index: var(--z-base);
    width: calc(40 * var(--rem));
    height: calc(40 * var(--rem));
    margin-top: calc(-20 * var(--rem));

    &::after {
      content: none;
    }

    & img {
      width: 100%;
      height: 100%;
    }
  }

  & .project-talkshow__arrow--prev {
    left: calc(7 * var(--rem));
  }

  & .project-talkshow__arrow--next {
    right: calc(6 * var(--rem));
  }

  /* ---------- ゲストカード本体 ---------- */
  & .project-talkshow__card {
    width: calc(330 * var(--rem));
    margin: 0 auto;
  }

  & .project-talkshow__card-date {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(42 * var(--rem));
    border-radius: calc(4 * var(--rem)) calc(4 * var(--rem)) 0 0;
    background-color: var(--color-osaka-green);
    font-family: var(--lp-font-en);
    font-size: calc(22 * var(--rem));
    font-weight: 500;
    color: #fff;
    text-align: center;
    padding-top: calc(3 * var(--rem));
  }

  & .project-talkshow__card-day {
    margin-left: calc(4 * var(--rem));
    font-family: var(--lp-font-ja);
    font-size: calc(14 * var(--rem));
    font-weight: 500;
  }

  & .project-talkshow__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(15 * var(--rem)) calc(20 * var(--rem)) calc(20 * var(--rem));
    border-radius: 0 0 calc(4 * var(--rem)) calc(4 * var(--rem));
    background-color: #fff;
    box-shadow: 0 calc(4 * var(--rem)) calc(10 * var(--rem)) rgb(0 0 0 / .1);
  }

  /* TALK SHOWバッジ（青） */
  & .project-talkshow__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--rem));
    width: calc(113 * var(--rem));
    height: calc(18 * var(--rem));
    border: 1px solid var(--color-talkshow-accent);
    border-radius: calc(2 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    font-weight: 500;
    color: var(--color-talkshow-accent);
    text-align: center;
  }

  & .project-talkshow__badge-icon {
    width: calc(9 * var(--rem));
    height: calc(12 * var(--rem));
  }

  /* ゲスト写真（Figma 2462:10355 は140x140の角丸4pxマスク。critical-reviewer検出により円形から修正） */
  & .project-talkshow__photo {
    overflow: hidden;
    width: calc(140 * var(--rem));
    height: calc(140 * var(--rem));
    margin-top: calc(15 * var(--rem));
    border-radius: calc(4 * var(--rem));

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  /* トークテーマ見出し */
  & .project-talkshow__theme {
    width: 100%;
    margin-top: calc(16 * var(--rem));
  }

  & .project-talkshow__time {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--rem));
    padding: calc(5 * var(--rem)) calc(8 * var(--rem)) calc(3 * var(--rem));
    border-radius: calc(2 * var(--rem));
    background-color: var(--color-time-badge);
    color: #fff;
  }

  & .project-talkshow__time-value {
    font-family: var(--lp-font-en);
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1;
  }

  & .project-talkshow__time-label {
    font-family: var(--lp-font-en);
    font-size: calc(10 * var(--rem));
    font-weight: 500;
    line-height: 1;
    padding-top: calc(2 * var(--rem));
  }

  & .project-talkshow__theme-title {
    margin-top: calc(10 * var(--rem));
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    color: var(--base-font-color);
    letter-spacing: .05em;
  }

  /* ゲスト紹介カード（GUESTバッジ・名前・説明文・read more） */
  & .project-talkshow__guest {
    width: 100%;
    margin-top: calc(10 * var(--rem));
  }

  & .project-talkshow__guest-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(5 * var(--rem)) calc(8 * var(--rem)) calc(3 * var(--rem));
    border-radius: calc(2 * var(--rem));
    background-color: var(--color-guest-gold);
    font-family: var(--lp-font-en);
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    color: #fff;
    line-height: 1;
  }

  & .project-talkshow__photo_group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(10 * var(--rem));
  }

  & .project-talkshow__guest-name {
    margin-top: calc(10 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1.5;
    color: var(--base-font-color);
  }

  & .project-talkshow__guest-name:nth-of-type(n+2) {
    margin-top: calc(5 * var(--rem));
  }

  & .project-talkshow__guest-role {
    font-weight: 400;
  }

  & .project-talkshow__guest-desc {
    margin-top: calc(10 * var(--rem));
    padding: calc(10 * var(--rem));
    background-color: var(--color-card-bg);
  }

  & .project-talkshow__guest-text {
    /* 開閉をなめらかにするため、line-clampではなくJS(initReadMore)が
       設定するmax-heightをtransitionさせる方式にしている（ユーザー指摘対応） */
    overflow: hidden;
    font-size: calc(12 * var(--rem));
    font-weight: 400;
    line-height: 1.5;
    color: var(--base-font-color);
    transition: max-height .4s var(--transition-timing);
  }

  & .project-talkshow__more {
    margin-top: calc(8 * var(--rem));
    text-align: right;

    & a {
      display: inline-flex;
      align-items: center;
      gap: calc(4 * var(--rem));
      font-family: var(--lp-font-en);
      font-size: calc(12 * var(--rem));
      font-weight: 500;
      color: var(--color-red);
      text-underline-offset: calc(2 * var(--rem));
    }

    /* InstagramLIVEのread moreアイコン（+ / ×）に統一（ユーザー指摘対応） */
    & a[aria-expanded="true"] .project-talkshow__more-icon {
      transform: rotate(0deg);
    }
  }

  & .project-talkshow__more-icon {
    display: inline-block;
    font-weight: 400;
    font-size: calc(14 * var(--rem));
    line-height: 1;
    margin-bottom: calc(4 * var(--rem));
    transition: transform .3s var(--transition-timing);
  }
}


/* ========================================================
                  * LIMITED EVENT / 会場MAP *
===========================================================
  OSAKA会場タブパネル内、TALK SHOW の下に入る想定のセクション。
  出力元: _sections/D.html
  - 4タブ（ご予約制／体験ブース／フード／PICK UP）は Vanilla JS の
    is-active クラス切替で実装（.js-tabs--* の型。JS本体は script.js に
    統合時に追加。D.md 参照）。
  - タブ内のアイテム横並びは Swiper(v8.4.7) の .js-slider で実装。
  - 会場MAPは既存 .modal / .js-modal--* 型のモーダルで実装。
  単位は SP特化型のため calc(N * var(--rem)) を使用。
========================================================= */
.lp_contents {

  /* ---------- ルート ----------
     幅は330pxに制限しつつ、OSAKA会場エリア共通の背景（Figma Rectangle 17）は
     box-shadowで画面幅までフルブリードさせる（box-shadowはスクロール領域を
     広げないため横スクロールの原因にならない。critical-reviewer検出により追加） */
  & .project-limited-event {
    position: relative;
    /* 前セクション.project-talkshowがz-index:1(--z-base)を持つため、こちらもauto
       のままだと隠れてしまう（project-talkshowと同種の不具合の予防） */
    z-index: var(--z-base);
    margin: 0 auto;
    /* 会場MAP画像の直後にWEB会場バナーが余白なく続いていたため下余白を追加
       （ユーザー指摘「WEB会場とマップの間の余白がない」への対応） */

    /* box-shadowは要素の外側の帯（フルブリード部分）しか塗らないため、
       要素自身の内側は background-color で塗る必要がある（ユーザー確認で
       中央が白く抜けているバグを発見。修正） */
    /* background-color: var(--color-osaka-area-bg);
    box-shadow: 0 0 0 100vw var(--color-osaka-area-bg); */
  }

  /* ---------- 見出し（LIMITED EVENT / 限定イベント）----------
     TALK SHOW（.project-talkshow__heading）と同型のコンポーネント。
     critical-reviewer検出（見出し欠落）により追加 */
  & .project-limited-event__heading {
    position: relative;
    padding: calc(18 * var(--rem)) 0 calc(14 * var(--rem)) 0;
    margin-bottom: calc(20 * var(--rem));
    text-align: center;

    &::before,
    &::after {
      position: absolute;
      left: 50%;
      width: calc(360 * var(--rem));
      height: 1px;
      background-color: var(--base-font-color);
      content: "";
      translate: -50% 0;
    }

    &::before {
      top: 0;
    }

    &::after {
      bottom: 0;
    }
  }

  & .project-limited-event__heading-en {
    display: block;
    font-family: var(--lp-font-en);
    font-size: calc(30 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--base-font-color);
    letter-spacing: .03em;
  }

  & .project-limited-event__heading-ja {
    display: block;
    margin-top: calc(10 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1;
    letter-spacing: .1em;
  }

  & .project-limited-event .project-limited-campaign__zoom {
    width: unset;
    height: unset;
    background: #f2f2f2;
    font-size: calc(12 * var(--rem));
    padding: calc(15 * var(--rem)) 0 calc(10 * var(--rem));
    line-height: 1;
    font-weight: 500;
    border-radius: calc(54 * var(--rem));
  }

  /* ---------- 4タブ（2x2グリッド） ---------- */
  & .project-event-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(5.5 * var(--rem));
        row-gap: calc(5 * var(--rem));
        padding: 0 calc(30 * var(--rem));
  }

  & .project-event-tabs__button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(40 * var(--rem));
    background: #fff;
    color: var(--base-font-color);
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
    border-radius: calc(4 * var(--rem));
    box-shadow: 0 calc(3 * var(--rem)) calc(10 * var(--rem)) rgba(0, 0, 0, .1);

    &.is-active {
      background: var(--color-osaka-green);
      color: #fff;
    }
  }

  /* ---------- タブパネル ----------
     表示切替は .js-tabs--panel の hidden 属性の付け外しで行う
     （.js-* にスタイルを当てない規約のため、display の制御はここに書かず
     HTML の hidden 属性 ⇔ ブラウザ標準の [hidden]{display:none} に任せる。
     D.md 5章のJS実装要件を参照） */
  & .project-event-panels {
    margin-top: calc(15 * var(--rem));
  }

  /* ========================================================
                        * ツアーカード *
  ===========================================================
    ご予約制イベント5件（まみたす含む）のswiperスライドで共用。
    写真が無いゲストは .section-tour-card__photo 自体を省略する。
  ========================================================= */
  & .section-tour-card {
    background: #fff;
    border-radius: calc(4 * var(--rem));
    box-shadow: 0 calc(3 * var(--rem)) calc(10 * var(--rem)) rgba(0, 0, 0, .1);
    overflow: hidden;
  }

  & .section-tour-card__badge {
    padding: calc(15 * var(--rem)) 0 calc(10 * var(--rem));
    background: var(--color-osaka-green);
    color: #fff;
    font-size: calc(20 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
    text-align: center;
  }

  & .section-tour-card__content {
    padding: 0 calc(20 * var(--rem)) calc(20 * var(--rem));
  }

  & .section-tour-card__photo {
    width: calc(140 * var(--rem));
    height: calc(140 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
    border-radius: calc(4 * var(--rem));
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .section-tour-card__title {
    margin-top: calc(15 * var(--rem));
    font-size: calc(15 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
  }

  & .section-tour-card__schedule {
    margin-top: calc(10 * var(--rem));
    font-size: calc(12 * var(--rem));
    letter-spacing: .05em;

    & dt {
      font-weight: 700;
    }

    & dd {
      margin-top: calc(2 * var(--rem));
      font-weight: 500;
      line-height: 1.5;
    }
  }

  & .section-tour-card__note {
    margin-top: calc(10 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: 1.5;
    letter-spacing: .05em;
  }

  & .section-tour-card__divider {
    margin-top: calc(17 * var(--rem));
    border-top: 1px solid var(--color-osaka-green);
  }

  & .section-tour-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10 * var(--rem));
    margin-top: calc(15 * var(--rem));
  }

  & .section-tour-card__fee {
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .05em;
  }

  & .section-tour-card__button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(120 * var(--rem));
    height: calc(35 * var(--rem));
    border: 1px solid var(--color-osaka-green);
    border-radius: calc(50 * var(--rem));
    color: var(--color-osaka-green);
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
    text-align: center;
    padding-top: calc(4 * var(--rem));
  }

  & .section-tour-card__intro {
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--rem));
    margin-top: calc(15 * var(--rem));
  }

  & .section-tour-card__intro-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(58 * var(--rem));
    height: calc(18 * var(--rem));
    background: var(--color-guest-gold);
    border-radius: calc(2 * var(--rem));
    color: #fff;
    font-family: var(--lp-font-en);
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
  }

  & .section-tour-card__intro-name {
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
  }

  & .project-talkshow__guest-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(0 * var(--rem));
    padding: calc(10 * var(--rem));
    background: var(--color-card-bg);
    border-radius: calc(2 * var(--rem));
  }

  & .project-talkshow__guest-text {
    width: 100%;
    /* 開閉をなめらかにするため、line-clampではなくJS(initReadMore)が
       設定するmax-heightをtransitionさせる方式にしている（ユーザー指摘対応） */
    overflow: hidden;
    font-size: calc(12 * var(--rem));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .05em;
    transition: max-height .4s var(--transition-timing);
  }

  & .project-talkshow__more {
    margin-top: calc(8 * var(--rem));
    text-align: right;

    & a {
      display: inline-flex;
      align-items: center;
      gap: calc(4 * var(--rem));
      font-family: var(--lp-font-en);
      font-size: calc(12 * var(--rem));
      font-weight: 500;
      color: var(--color-red);
      text-underline-offset: calc(2 * var(--rem));
    }

    /* InstagramLIVEのread moreアイコン（+ / ×）に統一（ユーザー指摘対応） */
    & a[aria-expanded="true"] .project-talkshow__more-icon {
      transform: rotate(0deg);
    }
  }

  & .section-tour-card__intro-more {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: calc(2 * var(--rem));
    color: var(--color-red);
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    letter-spacing: .05em;
    text-decoration: underline;
  }

  /* 写真が無いゲストは .section-tour-card__title が先頭要素になるため上余白を補う */
  & .section-tour-card__content > .section-tour-card__title:first-child {
    margin-top: calc(20 * var(--rem));
  }

  /* ---------- ご予約制イベントSwiper（まみたす含む5件を1枚ずつ全幅表示） ----------
     以前は「まみたすカードを固定表示＋その他4件を別の一部見えスライダー」という
     デザインに存在しない構成だったため、Figma実データ（単一カード＋左右矢印）に
     合わせて1つのswiperに統合した（ユーザー指摘により修正） */
  & .section-tour-slider {
    position: relative;
    margin-top: calc(2 * var(--rem));

    & .swiper-wrapper {
      align-items: flex-start;
    }

    & .swiper-slide .section-tour-card {
      width: calc(330 * var(--rem));
      margin: 0 auto;
    }

    & .swiper-pagination {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(6 * var(--rem));
      margin-top: calc(30 * var(--rem));

      /* InstagramLIVEと同じバー型に統一（ユーザー指摘対応） */
      & .swiper-pagination-bullet {
        width: calc(40 * var(--rem));
        height: calc(3 * var(--rem));
        margin: 0;
        border-radius: calc(3 * var(--rem));
        background: var(--color-osaka-green);
        opacity: .4;
      }

      & .swiper-pagination-bullet-active {
        opacity: 1;
      }
    }
  }

  /* 前後スライド矢印（TALK SHOWと同じ型。coding-guidelines.md 5-2） */
  & .section-tour-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-base);
    width: calc(40 * var(--rem));
    height: calc(40 * var(--rem));
    margin-top: calc(-20 * var(--rem));

    &::after {
      content: none;
    }

    & img {
      width: 100%;
      height: 100%;
    }
  }

  & .section-tour-slider__arrow--prev {
    left: calc(7 * var(--rem));
  }

  & .section-tour-slider__arrow--next {
    right: calc(6 * var(--rem));
  }

  /* ========================================================
                  * 体験ブース／フード／PICK UP アイテム *
  ========================================================= */
  & .section-event-slider {
    /* ご予約制（.section-tour-slider）と同じ1枚ずつ全幅表示に統一
       （ユーザー指摘：スライドのデザインをご予約制と揃えてほしい） */
    & .swiper-slide .section-event-item {
      width: calc(330 * var(--rem));
      margin: 0 auto;
    }

    /* 矢印の縦位置はカード内の写真中心に合わせる（バナー46px+写真160px/2）。
       ご予約制のカードとは写真位置が異なるため個別に上書き */
    & .section-tour-slider__arrow {
      top: calc(235 * var(--rem));
    }

    & .section-tour-slider__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: var(--z-base);
      width: calc(40 * var(--rem));
      height: calc(40 * var(--rem));
      margin-top: calc(-20 * var(--rem));
  
      &::after {
        content: none;
      }
  
      & img {
        width: 100%;
        height: 100%;
      }
    }
  
    & .section-tour-slider__arrow--prev {
      left: calc(7 * var(--rem));
    }
  
    & .section-tour-slider__arrow--next {
      right: calc(6 * var(--rem));
    }

    & .swiper-pagination {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(6 * var(--rem));
      margin-top: calc(30 * var(--rem));

      /* ご予約制／InstagramLIVEと同じバー型に統一（ユーザー指摘対応） */
      & .swiper-pagination-bullet {
        width: calc(40 * var(--rem));
        height: calc(3 * var(--rem));
        margin: 0;
        border-radius: calc(3 * var(--rem));
        background: var(--color-osaka-green);
        opacity: .4;
      }

      & .swiper-pagination-bullet-active {
        opacity: 1;
      }
    }
  }

  & .section-event-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: calc(4 * var(--rem));
    box-shadow: 0 calc(3 * var(--rem)) calc(10 * var(--rem)) rgba(0, 0, 0, .1);
    overflow: hidden;
  }

  & .section-event-item__image {
    width: calc(260 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
    object-fit: cover;
  }

  & .section-event-item__content {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--rem));
    flex: 1;
    padding: calc(15 * var(--rem));
  }

  & .section-event-item__tag {
    /* ご予約制カード（.section-tour-card__badge）と同じ、カード全幅の
       バナー型に統一（ユーザー指摘: スライダーのデザインをご予約制に揃える） */
    padding: calc(11 * var(--rem)) 0;
    background: var(--color-osaka-green);
    color: #fff;
    font-size: calc(20 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
    text-align: center;
  }

  & .section-event-item__title {
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
  }

  & .section-event-item__desc {
    font-size: calc(12 * var(--rem));
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .05em;
    display: -webkit-box;
  }

  /* ========================================================
                        * 会場MAP *
  ========================================================= */
  & .project-venue-map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--rem));
    width: 100%;
    margin-top: calc(60 * var(--rem));
    color: var(--base-font-color);
  }

  & .project-venue-map-link__icon {
    width: calc(14 * var(--rem));
    height: calc(18 * var(--rem));
  }

  & .project-venue-map-link__label {
    font-family: var(--lp-font-ja);
    font-size: calc(18 * var(--rem));
    font-weight: 700;
    letter-spacing: .05em;
  }

  & .project-venue-map-link__label-en {
    font-family: var(--lp-font-en);
    font-size: calc(20 * var(--rem));
    font-weight: 700;
  }

  & .project-venue-map-teaser {
    position: relative;
    display: block;
    width: calc(290 * var(--rem));
    margin: calc(20 * var(--rem)) auto 0;
    border-radius: calc(4 * var(--rem));
    overflow: hidden;
    z-index: 0;

    & img {
      width: 100%;
      height: auto;
      aspect-ratio: 290 / 356;
      object-fit: cover;
    }
  }

  & .project-venue-map-teaser::before {
    position: absolute;
    content: "";
    background: url(../img/260901/icn_zoom_white.svg) no-repeat;
    background-size: 100%;
    width: calc(40 * var(--rem));
    height: calc(35 * var(--rem));
    bottom: calc(10 * var(--rem));
    right: calc(10 * var(--rem));
    z-index: 10;
  }
  /* ========================================================
                      * 会場MAP モーダル *
  ===========================================================
    .modal / .modal__body は style.css 側の共通定義を使用（変更しない）。
    ここでは modal__body 内側のレイアウトのみ定義する。
  ========================================================= */
  /* Figma「Frame 126」実データにより、白カード無し・画像を暗いオーバーレイに
     直接乗せる構成と判明（ユーザー指摘により修正） */
  & .project-modal-venue-map {
    position: relative;
    background: transparent;
  }

  & .project-modal-venue-map__close {
    position: absolute;
    z-index: var(--z-base);
    top: calc(-30 * var(--rem));
    right: 0;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
  }

  & .project-modal-venue-map__image img {
    width: 100%;
    height: auto;
    border-radius: calc(4 * var(--rem));
  }
}


/* ========================================================
                * WEB会場タブ（E. .project-web） *
===========================================================
  タブ切替（data-tabs="venue"）の WEB 会場側パネル。
  B担当実装のタブJS（.js-tabs--container[data-tabs="venue"]）が
  .js-tabs--panel に is-active を付け外しする想定。
  .js-** にはスタイルを当てない規約のため、表示制御は併記クラス
  .project-web 側に持たせる（詳細は E.md 参照）。
========================================================= */
/* --color-web-cream は統合時に style.css の .p-feature へ集約済み（このファイルでの再定義は不要） */

.lp_contents {
  /* 統合時に修正: OSAKA会場/WEB会場ボタンはタブではなくアンカーリンクのため
     常時表示にする（ユーザー指摘）。display:noneは撤廃 */
  & .project-web {
    position: relative;
    z-index: var(--z-base);
    background: var(--color-web-cream);
  }

  /* CAMPAIGN周りの装飾写真（Figma node 2462:10238/10239）は、.project-web__body の
     不透明な背景（静的コンテンツ）に隠れてしまい視覚効果が出ないため見送った。
     .project-web__body より前面（かつテキストと重ならない領域）に置く再設計が必要。
     要ユーザー確認・要対応（planning.md参照） */


    & .project-web::before {
      position: absolute;
      content: "";
      background: url(../img/260901/web_bg_2.png) no-repeat;
      background-size: 100%;
      width: 100%;
      height: calc(1732 * var(--rem));
      top: calc(98 * var(--rem));
      left: 0;
      z-index: -1;
    }
}

/* --------------------------------------------------------
    見出しバナー「WEB会場」
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(80 * var(--rem));
    background: var(--color-web-orange);
  }

  & .project-web__banner-title {
    font-size: calc(34 * var(--rem));
    color: #fff;
    font-weight: 700;
    letter-spacing: .03em;
  }

  & .project-web__banner-title-en {
    font-family: var(--lp-font-en);
  }
}

/* --------------------------------------------------------
    本文エリア（送料無料訴求〜coming soon）
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__body {
    padding: calc(50 * var(--rem)) calc(30 * var(--rem)) calc(60 * var(--rem));
  }
}

/* --------------------------------------------------------
    送料無料訴求
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__shipping {
    margin-bottom: calc(15 * var(--rem));
    font-family: "Jost", var(--lp-font-ja);
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 2;
    letter-spacing: .05em;
    text-align: center;
  }

  & .project-web__shipping-num {
    font-size: calc(20 * var(--rem));
  }

  & .project-web__shipping-note {
    font-size: calc(12 * var(--rem));
    vertical-align: baseline; /* リセットの sup（vertical-align:super）を上付き無しに上書き */
    top: 0;
  }
}

/* --------------------------------------------------------
    CAMPAIGN カード（01 / 02 共通）
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__campaign {
    & + .project-web__campaign {
      margin-top: calc(20 * var(--rem));
    }
  }

  & .project-web__campaign-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(40 * var(--rem));
    border-radius: calc(4 * var(--rem)) calc(4 * var(--rem)) 0 0;
    background: var(--color-web-orange);
    font-family: var(--lp-font-en);
    font-size: calc(18 * var(--rem));
    font-weight: 500;
    color: #fff;
    letter-spacing: .03em;
  }

  & .project-web__campaign-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(25 * var(--rem)) 0;
    border: 1px solid var(--color-web-orange);
    border-top: none;
    border-radius: 0 0 calc(4 * var(--rem)) calc(4 * var(--rem));
    background: #fff;
  }

  & .project-web__campaign-annotation {
    margin-top: calc(15 * var(--rem));
    font-size: calc(11 * var(--rem));
    line-height: 1.5;
    letter-spacing: .05em;
    text-align: center;
  }
}

/* --------------------------------------------------------
    CAMPAIGN 01：「全商品10%OFF!」
    ※「10」「%」「OFF!」はベクター画像ではなく CSS テキストで再現
      （coding-guidelines.md 4章 / planning.md 実装方針メモ）
   -------------------------------------------------------- */
.lp_contents {
  /* ユーザー指摘によりCSS再現(span構成)からFigma実データの画像書き出しに変更。
     「全商品」「人気アイテム」ラベルも書き出し画像に含まれているため別要素は不要 */
  & .project-web__promo {
    width: calc(180 * var(--rem));
    margin-bottom: calc(10 * var(--rem));
  }

  & .project-web__promo.__1 {
    width: calc(195 * var(--rem));
  }

  & .project-web__promo img {
    width: 100%;
  }
}

/* --------------------------------------------------------
    CAMPAIGN 02：「人気アイテムMAX15%POINT BACK!」
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__promo--point img {
    height: auto;
  }
}

/* --------------------------------------------------------
    目印アイコン注記（10%OFF / ポイントUP 共通）
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--rem));
    width: calc(290 * var(--rem));
    background: var(--color-card-bg);
  }

  & .project-web__note--off {
    height: calc(61 * var(--rem));
    padding: 0 calc(23 * var(--rem));
  }

  & .project-web__note--point {
    height: calc(56 * var(--rem));
    padding: 0 calc(10 * var(--rem));
  }

  & .project-web__note-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(78 * var(--rem));
    height: calc(23 * var(--rem));
    background: #f3ded7; /* 「限定価格」バッジ背景（Figma実測） */
    font-size: calc(13 * var(--rem));
    font-weight: 500;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .project-web__note-badge--point {
    width: calc(116 * var(--rem));
    background: #f1f2d3; /* 「ポイントアップ」バッジ背景（Figma実測） */
  }

  & .project-web__note-line {
    flex-shrink: 0;
    display: block;
    width: calc(25 * var(--rem));
    border-top: 1px dotted var(--base-font-color);
  }

  & .project-web__note--point .project-web__note-line {
    width: calc(13 * var(--rem));
  }

  & .project-web__note-text {
    font-size: calc(12 * var(--rem));
    line-height: 1.5;
    letter-spacing: .04em;
  }

  & .project-web__note-text-accent {
    font-weight: 700;
  }

  & .project-web__note-text-num {
    font-size: calc(16 * var(--rem));
  }

  & .project-web__note-text-percent {
    font-size: calc(13 * var(--rem));
  }
}

/* --------------------------------------------------------
    「Wでお得なアイテムはこちら！」リンクバナー
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__link {
    margin-top: calc(25 * var(--rem));
    text-align: center;
  }

  & .project-web__link-anchor {
    margin: auto;
    width: fit-content;
    display: block;
    font-family: var(--lp-font-en);
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    line-height: 2;
    letter-spacing: .05em;
  }

  & .project-web__link-max {
    font-size: calc(14 * var(--rem));
  }

  & .project-web__link-highlight {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--rem));
    padding: 0 calc(2 * var(--rem));
    background: linear-gradient(transparent 50%, #fff 0%);
  }

  & .project-web__link-bracket {
    flex-shrink: 0;
    display: inline-block;
    width: calc(10 * var(--rem));
    height: calc(20 * var(--rem));
    border: 1px solid #bdbd2d; /* Figma実測のブラケット装飾色 */
  }

  & .project-web__link-bracket--left {
    border-right: none;
    border-bottom: none;
  }

  & .project-web__link-bracket--right {
    border-top: none;
    border-left: none;
  }

  & .project-web__link-accent {
    font-size: calc(18 * var(--rem));
    color: var(--color-red);
    letter-spacing: .05em;
  }
}

/* --------------------------------------------------------
    coming soon プレースホルダー（商品一覧は仮）
   -------------------------------------------------------- */
.lp_contents {
  & .project-web__coming {
    display: block;
    margin-top: calc(35 * var(--rem));
    text-align: center;
  }

  & .project-web__coming-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(250 * var(--rem));
    height: calc(48 * var(--rem));
    border-radius: calc(999 * var(--rem));
    background: var(--color-web-orange);
    font-family: var(--lp-font-en);
    font-size: calc(20 * var(--rem));
    font-weight: 500;
    color: #fff;
    letter-spacing: .05em;
  }
}

/* ========================================================
          * LIMITED EVENT: PC表示の描画不具合対応 *
===========================================================
  PC幅（769px以上）で.project-limited-event内の文字が描画され
  ない現象があり（レイアウト・計算スタイルは正常なのに実際の
  ペイントだけ欠落する、原因を特定できないブラウザ側の不具合）、
  ユーザー自身の検証（DevToolsでz-index:2を当てたら直った）を
  もとに対応。要素自身とその全子要素の両方にposition:relative
  + z-index:2を明示すると解消することを実機で確認済み
  （.project-osaka/.project-talkshowでは同じ対応でも再現性が
  無く未解決。.project-limited-eventのみ適用）。
========================================================= */
@media (min-width: 769px) {
  .project-limited-event,
  .project-limited-event * {
    /* 既存の入れ子セレクタ（詳細度が高い）に負けないよう!importantが必要。
       .project-osaka/.project-talkshowが--z-baseを使っているため、
       それより前面になるよう+1した値を使う（生数値を避けるためcalc()化） */
    /* position: relative !important; */
    z-index: calc(var(--z-base) + 1) !important;
  }
}

/* ========================================================
                      * Limited Campaign *
===========================================================
  Figma: SPフレーム(2462:10007)内 y=5522〜6102 相当。
  見出し(2462:10643) + アプリクーポン告知バナー(2462:10662系) +
  LINEクーポン告知バナー(2462:10676系) + サンプルセットA(2462:10657系)/
  B(2462:10644系)カード（+ボタン=モーダルトリガー）で構成。

  4枚のバナーは「左:日付バッジ98x98 / 中央:テキスト / 右:アイコンor+ボタン」
  という共通レイアウトのため .project-limited-campaign__banner 型を共通化し、
  中身（アイコン/リンク一覧/+ボタン）だけを差し替えている。

  Figma上の日付バッジ色(#fde8d7 / #e7aa78)は既存のデザイントークン
  （--color-yellow / --color-red 等）と一致しないため、このセクション
  限定のカスタムプロパティとして .project-limited-campaign に定義する。

  各バナー背面に写真が回り込む装飾フレーム（Figma上の "Frame 51" /
  "Mask group"）は、テキスト・日付バッジの可読性を優先し実装を簡略化
  （白カード一枚に統一）。詳細は F.md の判断メモを参照。
========================================================= */
.lp_contents {
  & .project-limited-campaign {
    position: relative;
    /* z-index:-1の装飾画像をこの要素内に閉じ込めるためのスタッキングコンテキスト */
    z-index: var(--z-base);
    /* __decoが右側にはみ出し、ページ全体を横スクロールさせてしまうため */
    overflow: hidden;
    /* 下余白が無くInstagramLIVEに詰まって見えていたため追加
       （ユーザー指摘「LIMITED CAMPAIGNとInstagramLIVEの間の余白がない」への対応） */
    padding: calc(0 * var(--rem)) calc(30 * var(--rem)) calc(60 * var(--rem));
    /* WEB会場タブの背景（Figma上は同じ Rectangle 40 の続き）と同色で継続させる。
       critical-reviewer検出により追加 */

    --campaign-badge-bg: #fde8d7;
    --campaign-badge-text: #e7aa78;
    --campaign-zoom-bg: #d9d9d9;
  }

  & .project-limited-campaign__deco {
    position: absolute;
    z-index: -1;
    top: calc(-23 * var(--rem));
    left: calc(88 * var(--rem));
    width: calc(423 * var(--rem));
    height: calc(404 * var(--rem));
    pointer-events: none;
  }

  & .project-limited-campaign__heading {
    font-family: var(--lp-font-en);
    font-size: calc(25 * var(--rem));
    font-weight: 700;
    text-align: center;
    letter-spacing: .03em;
  }

  & .project-limited-campaign__banners {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--rem));
    margin-top: calc(25 * var(--rem));
  }

  /* ---- バナーカード共通型 ---- */
  & .project-limited-campaign__banner {
        position: relative;
        display: flex;
        align-items: center;
        gap: calc(12 * var(--rem));
        width: 100%;
        min-height: calc(110 * var(--rem));
        padding: calc(10 * var(--rem)) calc(10 * var(--rem)) calc(10 * var(--rem)) calc(10 * var(--rem));
        border-radius: calc(4 * var(--rem));
        background: #fff url(../img/260901/campaign_bg_1.png) no-repeat;
        background-size: cover;
        box-shadow: 0 calc(3 * var(--rem)) calc(10 * var(--rem)) rgb(0 0 0 / .1);
  }

  & .project-limited-campaign__banner.__2 {
    background: #fff url(../img/260901/campaign_bg_2.png) no-repeat;
    background-size: cover;
  }
  & .project-limited-campaign__banner.__3 {
    background: #fff url(../img/260901/campaign_bg_3.png) no-repeat;
    background-size: cover;
  }

  & a.project-limited-campaign__banner--link {
    /* LINEクーポンはカード全体がリンクになる（.lp_contents a のホバー透過を維持） */
    color: inherit;
  }

  & .line_app {
    display: block;
    width: calc(85 * var(--rem));
    margin-left: auto;
    margin-top: calc(0 * var(--rem));
  }

  /* ---- 日付バッジ ---- */
  & .project-limited-campaign__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(98 * var(--rem));
    height: calc(98 * var(--rem));
    border-radius: calc(4 * var(--rem));
    background: var(--campaign-badge-bg);
  }

  & .project-limited-campaign__badge-caption {
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    color: var(--campaign-badge-text);
    letter-spacing: .05em;
  }

  & .project-limited-campaign__badge-date {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(0 * var(--rem));
    margin-top: calc(2 * var(--rem));
    z-index: 0;
  }

  & .project-limited-campaign__badge.__1::before {
    position: absolute;
    content: "";
    width: calc(1 * var(--rem));
    height: calc(15 * var(--rem));
    background-color: var(--campaign-badge-text);
    top: calc(41 * var(--rem));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  & .project-limited-campaign__date__1 {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(0 * var(--rem));
    z-index: 0;
  }

  & .project-limited-campaign__date__1 .date {
    transform: rotate(90deg);
    width: calc(32 * var(--rem));
    margin-left: calc(-5 * var(--rem));
    line-height: 1;
    padding-top: calc(0 * var(--rem));
  }

  & .project-limited-campaign__badge.__1 {
    position: relative;
    gap: calc(20 * var(--rem));
    padding-left: calc(5 * var(--rem));
    z-index: 0;
  }

  & .project-limited-campaign__badge-day {
    font-family: var(--lp-font-en);
    font-size: calc(32 * var(--rem));
    font-weight: 700;
    line-height: 1;
    color: var(--campaign-badge-text);
    letter-spacing: 0;
  }

  & .project-limited-campaign__badge-day--single {
    font-size: calc(38 * var(--rem));
  }

  & .project-limited-campaign__badge-separator {
    display: inline-block;
    width: calc(12 * var(--rem));
    height: calc(1 * var(--rem));
    background: var(--campaign-badge-text);
  }

  & .date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50 * var(--rem));
    height: calc(15 * var(--rem));
    margin: auto;
    font-size: calc(10 * var(--rem));
    border-radius: calc(20 * var(--rem));
    background: var(--campaign-badge-text);
    color: #fff;
    padding-top: calc(2 * var(--rem));
  }

  & .time {
    display: block;
    font-size: calc(18 * var(--rem));
    color: var(--campaign-badge-text);
    padding-top: calc(4 * var(--rem));
    font-weight: 500;
  }

  /* ---- テキストブロック ---- */
  & .project-limited-campaign__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  & .project-limited-campaign__title {
    font-size: calc(14 * var(--rem));
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--color-web-orange);
    line-height: 1;
  }

  & .project-limited-campaign__title--underline {
    font-size: calc(12 * var(--rem));
    text-decoration: underline;
    text-underline-offset: calc(2 * var(--rem));
  }

  & .project-limited-campaign__text {
    margin-top: calc(6 * var(--rem));
    font-size: calc(11 * var(--rem));
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
  }

  & .project-limited-campaign__note {
    display: block;
    font-size: calc(11 * var(--rem));
    line-height: 1.5;
    color: #606060;
  }


  & .project-limited-campaign__links {
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--rem));
    margin-top: calc(9 * var(--rem));
  }

  & .project-limited-campaign__links a {
    display: inline;
    font-size: calc(9 * var(--rem));
    font-weight: 700;
    letter-spacing: 0;
  }

  & .project-limited-campaign__links a::after {
    content: "";
    display: inline-block;
    width: calc(5 * var(--rem));
    height: calc(5 * var(--rem));
    margin-left: calc(4 * var(--rem));
    border-right: calc(1.5 * var(--rem)) solid currentColor;
    border-bottom: calc(1.5 * var(--rem)) solid currentColor;
    transform: rotate(-45deg);
  }

  /* ---- 右側：アイコン（アプリ/LINE） ---- */
  & .project-limited-campaign__icon {
    flex-shrink: 0;
    width: calc(60 * var(--rem));
    height: calc(60 * var(--rem));
  }

  & .project-limited-campaign__icon img {
    width: 100%;
    height: 100%;
  }

  /* ---- 右側：+ボタン（サンプルセットA/B＝モーダルトリガー） ---- */
  & .project-limited-campaign__zoom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(80 * var(--rem));
    height: calc(80 * var(--rem));
    border-radius: calc(4 * var(--rem));
    background: url(../img/260901/limited-campaign_a.jpg) no-repeat;
    background-size: 100%;
    z-index: 0;
  }

  & .project-limited-campaign__zoom.__2 {
    background: url(../img/260901/limited-campaign_b.jpg) no-repeat;
    background-size: 100%;
  }

  & .project-limited-campaign__zoom img {
    width: calc(17 * var(--rem));
    height: calc(21 * var(--rem));
    bottom: calc(5 * var(--rem));
    right: calc(6 * var(--rem));
    position: absolute;
    transform: rotate(-45deg);
  }

  /* ---- サンプルセット画像モーダル（.modal / .modal__body は style.css 側の共通型） ---- */
  & .project-modal-sample__body {
    position: relative;
    width: calc(330 * var(--rem));
    padding: calc(15 * var(--rem));
    border-radius: calc(8 * var(--rem));
  }

  & .project-modal-sample__close {
    position: absolute;
    top: calc(-30 * var(--rem));
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    border-radius: 50%;
    color: #fff;
    font-size: calc(20 * var(--rem));
    line-height: 1;
  }

  & .project-modal-sample__title {
    margin-bottom: calc(10 * var(--rem));
    font-size: calc(16 * var(--rem));
    font-weight: 700;
    text-align: center;
    color: var(--color-web-orange);
  }

  & .project-modal-sample__text {
    font-size: calc(13 * var(--rem));
    font-weight: 500;
  }

  & .project-modal-sample__text span {
    font-weight: 700;
  }

  & .project-modal-sample__text:nth-of-type(n+2) {
    margin-top: calc(10 * var(--rem));
  }

  & .modal__body small {
    display: block;
    margin-top: calc(15 * var(--rem));
  }

  & #ModalSampleC .project-modal-sample__body {
    padding: calc(40 * var(--rem)) calc(20 * var(--rem));
  }

  & #ModalSampleC .project-modal-sample__title {
    margin-bottom: calc(20 * var(--rem));
    font-size: calc(16 * var(--rem));
    background: #eeeeee;
    padding: calc(10 * var(--rem)) 0 calc(5 * var(--rem));
    color: unset;
  }

  & .project-modal-sample__image img {
    width: 100%;
    height: auto;
    border-radius: calc(4 * var(--rem));
  }
}


.lp_contents {

    & .project-campaign_area_ggm_wrap {
      margin-bottom: calc(5 * var(--rem));
      display: flex;
      justify-content: center;
      align-items: center;
      gap: calc(10 * var(--rem));
    }

    & .project-campaign_area_ggm_wrap.__2 {
      margin-bottom: calc(8 * var(--rem));
      margin-top: calc(25 * var(--rem));
    }

    & .project-campaign_area_ggm_img {
      width: calc(100 * var(--rem));
    }

    & .project-campaign_area_ggm_text {
      font-size: calc(12 * var(--rem));
      text-align: left;
      line-height: 1.5;
    }

    & .bold {
      font-weight: 600;
    }

    & .project-campaign_area_app_wrap {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      gap: calc(6 * var(--rem));
      margin-top: calc(6 * var(--rem));
      margin-bottom: calc(0 * var(--rem));
    }

    & .project-campaign_area_app_wrap.__2 {
      margin-top: calc(40 * var(--rem));
    }

    & .project-campaign_area_app_link {
      position: relative;
      font-size: calc(11 * var(--rem));
      font-weight: bold;
      z-index: 0;
      letter-spacing: 0;
      line-height: 1;
    }

    & .project-campaign_area_app_link::before {
      position: absolute;
      content: "";
      background: url(../img/260901/app_arrow.svg) no-repeat;
      background-size: 100%;
      width: calc(8 * var(--rem));
      height: calc(10 * var(--rem));
      top: 50%;
      transform: translateY(-50%);
      right: calc(-14 * var(--rem));
      z-index: 1;
    }
    

}


.project-campaign_area_app_wrap.second {
  width: calc(250 * var(--rem));
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--rem));
  margin-top: calc(6 * var(--rem));
  margin-bottom: calc(0 * var(--rem));
  margin-left: calc(-10 * var(--rem));
}

/* ========================================================
                      * InstagramLIVE *
===========================================================
  日付タブ(5日) × ゲストカードスライダー(Swiper v8.4.7)。
  Figma node: 2515:16168（Group 260 / fileKey TV9D51lPdKofvNdjE80Y4v）
  詳細は _sections/G.md を参照（振り分けロジック・懸念点）。

  このセクション固有の色（既存 style.css の .p-feature トークンに
  無いもの）は .section-live にスコープしたカスタムプロパティとして
  定義する（style.css 本体は変更しない）。
========================================================= */
.section-live {
  /* --color-live-pink / --color-live-pink-border / --color-time-badge は統合時に style.css の .p-feature へ集約済み */

  padding: calc(60 * var(--rem)) 0;
  background: var(--color-live-area-bg);
}

.section-live .project-talkshow__badge-icon {
  width: calc(75 * var(--rem));
  height: auto;
}

.section-live .project-talkshow__badge  {
  border: unset;
}

.section-live {
  & .section-live__heading {
    padding: calc(24 * var(--rem)) calc(14 * var(--rem)) calc(20 * var(--rem));
    border-top: 1px solid var(--base-font-color);
    border-bottom: 1px solid var(--base-font-color);
    text-align: center;
  }

  & .section-live__heading-title {
    font-family: var(--lp-font-en);
    font-weight: 700;
    font-size: calc(30 * var(--rem));
    line-height: 1;
    letter-spacing: .03em;
    color: var(--base-font-color);
  }

  & .section-live__heading-subtitle {
    margin-top: calc(10 * var(--rem));
    font-family: var(--lp-font-ja);
    font-weight: 500;
    font-size: calc(12 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    color: var(--base-font-color);
  }
}

/* ---------- インスタライブCTA・ページネーション ---------- */
.section-live {
  & .section-live__cta {
    display: block;
    width: calc(180 * var(--rem));
    height: calc(35 * var(--rem));
    margin: calc(15 * var(--rem)) auto 0;
    border: 1px solid var(--color-live-pink-border);
    border-radius: calc(50 * var(--rem));
    font-family: var(--lp-font-ja);
    font-weight: 500;
    font-size: calc(12 * var(--rem));
    line-height: calc(35 * var(--rem));
    letter-spacing: .05em;
    text-align: center;
    color: var(--color-live-pink);
  }

  & .section-live__pagination {
    /* Swiper既定の position:absolute; bottom:8px を打ち消して通常フローに戻す。
       Figma上ページネーションは白カードの外（ページ背景側）にあるため、
       .section-live__panel-card の外側（.section-live__panelの直下）に配置
       （ユーザー指摘対応。JS側は initSlider() で .section-live__panel を検索範囲に） */
    position: relative;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--rem));
    margin-top: calc(16 * var(--rem));
  }

  & .section-live__pagination .swiper-pagination-bullet {
    width: calc(40 * var(--rem));
    height: calc(3 * var(--rem));
    margin: 0;
    border-radius: calc(3 * var(--rem));
    background: var(--color-osaka-green);
    opacity: .4;
  }

  & .section-live__pagination .swiper-pagination-bullet-active {
    opacity: 1;
  }
}

/* ========================================================
                      * Feature *
===========================================================
  Figma: SPフレーム(2462:10007)内 y=7008〜7950 相当。
  見出し(2462:10305) + 関連記事2カラム(2462:10306/10307) +
  特集ブロック(2462:10312 "Group 90") で構成。
  前セクション(InstagramLIVE)との間隔60px・次セクションとの
  間隔57pxをそのまま.project-feature の padding として反映。
========================================================= */
.lp_contents {
  & .project-feature {
    padding: calc(60 * var(--rem)) 0;
    /* ユーザー確認: FEATURE本体（見出し＋関連記事2カラム）はcreamで正しい。
       末尾のBiopleブランド紹介ブロック（.project-feature__block）はFEATUREとは
       別エリアで背景は白のため、そちらは個別にwhiteを指定して打ち消す */
    background: var(--color-cream);
    /* Figma上の「point-green」。既存トークン --color-osaka-green(#66b876) とは
       別の色のため、このセクション内に限定したカスタムプロパティとして定義する */
    --feature-accent-green: #7eb897;
  }

  & .project-feature__heading {
    font-family: var(--lp-font-en);
    font-size: calc(25 * var(--rem));
    font-weight: 700;
    text-align: center;
    letter-spacing: .03em;
  }

  /* ---- 関連記事 2カラムティーザー ---- */
  & .project-feature__teasers {
    display: flex;
    margin: calc(25 * var(--rem)) auto calc(40 * var(--rem));
    padding: 0 calc(30 * var(--rem));
    gap: calc(11 * var(--rem));
  }

  & .project-feature__teaser {
    flex: 1 1 0;
  }

  & .project-feature__teaser-link {
    display: block;
  }

  & .project-feature__teaser-caption {
    margin-top: calc(15 * var(--rem));
    font-size: calc(12 * var(--rem));
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .03em;
  }

  /* ---- Biopleブランド紹介ブロック(Group 90) ----
     ユーザー確認: FEATUREエリアとは別区分で、背景は白が正しい。
     親.project-featureのcreamをこのブロックの範囲だけ打ち消す */
  & .project-feature__block {
    margin-top: calc(0 * var(--rem));
    padding-bottom: calc(50 * var(--rem));
    background: #fff;
  }

  & .project-feature__block-logo {
    margin-top: calc(35 * var(--rem));
    text-align: center;

    /* リセット（.lp_contents & img { display:block }）により text-align だけでは
       中央寄せが効かないため margin-inline:auto を明示（critical-reviewer検出） */
    & img {
      width: calc(140 * var(--rem));
      height: auto;
      margin-inline: auto;
    }
  }

  & .project-feature__block-text {
    margin-top: calc(25 * var(--rem));
    padding: 0 calc(30 * var(--rem));
    font-size: calc(14 * var(--rem));
    font-weight: 500;
    line-height: 1.75;
    text-align: center;
    letter-spacing: .03em;
  }
}

.project-feature__block-cta {
  margin-top: calc(30 * var(--rem));
  text-align: center;
}

.project-feature__block-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(250 * var(--rem));
  height: calc(48 * var(--rem));
  border-radius: calc(999 * var(--rem));
  background: #7eb897;
  font-family: var(--lp-font-en);
  font-size: calc(22 * var(--rem));
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: .05em;
}

/* ========================================================
                * PC専用サイド装飾 (I) *
===========================================================
  Figma: PCフレーム 2462:10714 の直接の子。
  - left  : "left"(2462:10715) > "Group 7"(2462:10716)
  - right : "Group 257"(2462:11438) > "Group 256"(2462:11440)
  SP特化型デザイン（--pw:1440 / --sw:390 / --artboard-pw:390 / --artboard-sw:390）の
  左右の余り(525pxずつ)に置く装飾。PC(769px以上)のみ表示・常に追従(position:fixed)。
  PC専用のため寸法は calc(N * var(--rem-pc)) を使用する（coding-guidelines.md 1-3）。
  座標はFigma実測値（PCフレーム全体基準）をそのままパネル内ローカル座標として使用
  （left側はキャンバスx=0基準と一致、right側はキャンバスx=915を0とした相対値に変換済み）。
  表示制御は既存の .u-d-lg ユーティリティ（768px以下で display:none）を利用。
========================================================= */
.lp_contents {
  & .project-side-deco {
    position: fixed;
    top: 0;
    z-index: var(--z-sticky);
    width: calc(366 * var(--rem));
    height: 100vh;
    pointer-events: none; /* 中央390pxの実コンテンツを避けた純装飾のため操作を透過させる */
  }

  /* 注: ネストの「&--modifier」（区切りなし）はブラウザによって
     .project-side-deco--left に展開されず無効化される場合があるため、
     BEMモディファイアは明示クラスセレクタで指定する。 */
  & .project-side-deco--left {
    width: 40%;
    left: 0;
  }

  & .project-side-deco--right {
    width: 40%;
    right: 0;
  }

  /* left: 「Biople FES」ロゴ + 「OSAKA」文字（Figma実測: レイヤーごとにabsolute配置） */
  & .project-side-deco__logo {
    width: calc(110 * var(--rem));
    height: auto;
  }

  & .project-side-deco__fes {
    position: absolute;
    bottom: calc(-25 * var(--rem));
    left: calc(-10 * var(--rem));
    width: calc(40 * var(--rem));
  }

  & .project-side-deco__osaka {
    position: absolute;
    bottom: calc(-28 * var(--rem));
    right: calc(8 * var(--rem));
    /* width: calc(90 * var(--rem)); */
    font-family: var(--lp-font-en);
    font-weight: 500;
    font-size: calc(24 * var(--rem));
    line-height: 1;
    letter-spacing: .05em;
    color: #1e3135;
    white-space: nowrap;
  }

  /* right: KVアートワークの一部を切り出した装飾（日程バッジ+タグ部分） */
  & .project-side-deco__photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100 * var(--rem));
    margin-left: 4%;
    height: auto;
  }

  & .project-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(130 * var(--rem));
    margin-top: 3%;
    margin-left: -2%;
    height: auto;
  }

}

#Contents {
  background-color: #FFF5CA;
}

.slider {
  width: 100%;
}

.slider-img {
  margin: 0 calc(5 * var(--rem));
}

.slider-img img {
  width: 100%;
  border-radius: calc(4 * var(--rem));
}