/* ============================================================
   style.css — OUR VISION v2
   PC: 1440px / SP: 375px 基準
   ============================================================ */

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}

/* ---- Color tokens ---- */
:root {
  --gold: #dabf73;
  --dark-gold: #95824b;
  --gold-2: #dbc073;
  --blue: #003f6b;
  --dark: #1b1b1b;
  --brown: #231815;
  --white: #ffffff;
}

/* ---- Layout ---- */
.sp {
  display: none;
}
@media (max-width: 768px) {
  .sp {
    display: inline;
  }
  .pc {
    display: none;
  }
}

/* ============================================================
   SECTION 1: VISION FLOOR — フレームスクロール (オープニング込み)
   ============================================================ */
.tp__vf {
  position: relative;
  background: #000; /* フレーム下の背景は純黒 */
}

/* スクロールトリガー: フレームアニメーション専用 */
.tp__vf__scroll {
  position: relative;
  min-height: 800vh;
}

/* sticky 背景: フレーム画像を固定 */
.tp__vf__bg {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.tp__vf__bg-base {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

.tp__vf__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tp__vf__video-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* コート中央エリアを表示 */
  opacity: 0; /* JS制御: チラつき防止。opacityはJS側で都度セットする */
}

/* テキストパネル群 */
.tp__vf__list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.tp__vf__item {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* JS が transform を制御する
   centered パネル(1/2): top:50% + translate(-50%,-50%) → 上下中央
   top パネル(3/4):      top:10% + translate(-50%,0)   → コート画像上部 */
.tp__vf__group {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 900px;
  width: 100%;
  text-align: center;
  padding: 0 40px;
  will-change: opacity, transform;
}

/* Panel 3: 上部に配置（フレーム画像の上でテキストを見せる） */
/* left:0; width:100%; max-width:none で画面全幅を確保し text-align:center で中央固定 */
.js-vf-panel3 .tp__vf__group {
  top: 10%;
  left: 0;
  width: 100%;
  max-width: none;
  transform: translateY(0); /* X方向は使わない */
}
/* Panel 3 タイトル: JS でフォントサイズをアニメーション、改行禁止 */
.js-vf-panel3 .tp__vf__vision-title {
  font-size: 48px;
  letter-spacing: 0.96px;
  margin-bottom: 0;
  white-space: nowrap;
}
/* グラデーションオーバーレイ: 画面上半分はアリーナが見え、下に向かって黒に溶ける */
.tp__vf__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.25) 58%, rgba(0, 0, 0, 0) 75%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

/* Panel 4 テキストグループ: "VISION FLOOR" 直下に配置 */
.js-vf-panel4 .tp__vf__group {
  top: 35%;
  transform: translate(-50%, 0);
}

/* 見出しエリア */
.tp__vf__head {
  margin-bottom: 32px;
}

.tp__vf__head .en {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.67vw, 24px);
  color: var(--gold);
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: 12px;
}

.tp__vf__head .jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(22px, 3.33vw, 48px);
  color: #fff;
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ボディテキスト */
.tp__vf__body .message {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(14px, 1.53vw, 22px);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* スペーサー（最後の sticky を外すため） */
.tp__vf__block {
  height: 100vh;
}

/* SCROLL インジケーター (tp__vf__group の 32px 下) */
.tp__vf__scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  cursor: pointer;
}
.tp__vf__scroll-hint-label {
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-family: "Noto Serif JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}
.tp__vf__scroll-hint-arrow {
  width: 16px;
  height: 17px;
}

/* ─── VF テキストパネル新スタイル ─────────────────── */
.tp__vf__vision-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(40px, 6.67vw, 96px);
  color: #fff;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  margin-bottom: 24px;
  line-height: 1.2;
}

.tp__vf__tagline {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.78vw, 40px);
  color: #fff;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  margin-bottom: 32px;
}

.tp__vf__copy {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(14px, 1.67vw, 24px);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  line-height: 150%;
  letter-spacing: 0.48px;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  margin-bottom: 32px;
}

.tp__vf__our-vision {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.39vw, 20px);
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-top: 8px;
}

/* ─── オープニングパネル専用スタイル ──────────────────────── */
.tp__vf__opening-logo {
  width: clamp(120px, 18.6vw, 220px);
  margin: 0 auto 14px;
}
.tp__vf__opening-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.tp__vf__opening-date {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 36px);
  color: #fff;
  letter-spacing: 0.72px;
  text-align: center;
  margin-bottom: 14px;
}

.tp__vf__opening-tagline {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 36px);
  color: #fff;
  text-align: center;
  line-height: normal;
}

.tp__vf__opening-lead {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 36px);
  color: #fff;
  text-align: center;
  line-height: 218%;
}
.tp__vf__opening-lead:last-child {
  margin-bottom: 0;
}

.tp__vf__opening-ruby {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 36px);
  color: #fff;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.tp__vf__opening-ruby rt {
  font-size: clamp(10px, 1.11vw, 16px);
  line-height: 218%;
  padding-bottom: 5px;
  ruby-align: center; /* ベーステキスト中央に揃える */
}

@media screen and (max-width: 768px) {
  .tp__vf__opening-date {
    font-size: 24px;
  }
  .tp__vf__opening-tagline {
    font-size: 24px;
  }
  .tp__vf__opening-ruby rt {
    line-height: 140%; /* SP: ベーステキストにより近づける */
  }

  .tp__vf__tagline {
    font-size: 24px;
  }
  .tp__vf__copy {
    font-size: 16px;
    margin-bottom: 44px;
  }
  .tp__vf__scroll-hint {
    gap: 6px;
  }
  .tp__vf__scroll-hint-label {
    font-size: 12px;
  }
  .tp__vf__scroll-hint svg {
    width: 12px;
  }
}

/* ============================================================
   SECTION 2: エンターテインメント紹介
   ============================================================ */
.tp__ent {
  position: relative;
  /* background は設定しない: tp__lower の動画が透けて見えるように */
}

/* ── 動画ヒーロー: 300vh の無コンテンツ領域
   tp__lower__bg の背景動画がそのまま見える（オーバーレイなし）
   最初の100vh: 動画フェードイン猶予 / 残り200vh: 動画鑑賞バッファ */
.tp__ent__video-hero {
  position: relative;
  height: 400vh;
}

/* 動画フェードイン用の黒幕: 初期は不透明、is-visible で消える */
.tp__ent__video-hero__fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 1;
  transition: opacity 1.2s ease;
  pointer-events: none;
  z-index: 1;
}
.tp__ent__video-hero.is-visible .tp__ent__video-hero__fade {
  opacity: 0;
}

/* コンテンツ本体ラッパー: オーバーレイとコンテンツを包む */
.tp__ent__body {
  position: relative;
}

/* ライトオーバーレイ: デフォルト非表示。is-light でフェードイン */
.tp__ent__light-overlay {
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 245, 0.9);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-in; /* 戻り */
}
.tp__ent__light-overlay.is-light {
  opacity: 1;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1); /* 出現: clip-pathと同期 */
}

/* 黒半透明オーバーレイ: 中央に向かって円形に閉じることでライトカラーを露出させる
   通常: circle(150%) = 全体を覆う
   .is-light: circle(0%) = 中央に向かって縮んで消える */
.tp__ent__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 0;
  pointer-events: none;
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 0.35s ease-in; /* 戻り */
}
.tp__ent__overlay.is-light {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1); /* 出現: ブワッと */
}

/* コンテンツ (sticky 背景の上に重なる) */
.tp__ent__inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(80px, 10vh, 160px) 40px 0; /* bottom: 0 → カルーセルで区切り */
  text-align: center;
}

/* カルーセル下のコピーラップ: カルーセルより外に出た後の中央揃えコンテナ */
.tp__ent__footer {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 0 200px;
  text-align: center;
}
.tp__ent__footer .tp__ent__copy {
  margin-bottom: 0;
  transition: color 0.35s ease-in; /* 戻り（白→白文字） */
}
/* ライトモード時: 暗いテキストに */
.tp__ent__light-overlay.is-light ~ .tp__ent__footer .tp__ent__copy {
  color: #1b1b1b;
  transition: color 1.4s cubic-bezier(0.22, 1, 0.36, 1); /* 出現（背景と同期） */
}

/* メインヘッドライン */
.tp__ent__headline {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(24px, 4.44vw, 64px);
  color: #fff;
  line-height: 1.5;
  margin-bottom: 80px;
}
.tp__ent__headline-sub {
  display: block;
}

.tp__ent__sub {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(18px, 2.22vw, 32px);
  color: #fff;
  line-height: 1.5;
  margin-bottom: 82px;
}

.tp__ent__sub span {
  color: var(--gold);
  font-size: clamp(24px, 4vw, 48px);
}

/* 革新的エンターテインメント ラベル */
.tp__ent__label-wrap {
  margin-bottom: 48px;
}
.tp__ent__label-ja {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(24px, 3.89vw, 56px);
  color: var(--gold-2);
  line-height: 1.5;
}
.tp__ent__label-en {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(14px, 2.22vw, 32px);
  color: var(--dark-gold);
  line-height: 1.5;
}

/* 埋め込み動画エリア */
.tp__ent__video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 80px;
}
.tp__ent__video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文 */
.tp__ent__copy {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(16px, 2.22vw, 32px);
  color: #fff;
  line-height: 1.5;
  margin-bottom: 112px;
}

/* ── エンターテインメント スライダー（ピークデザイン・フル幅）──── */

/* tp__ent__inner の外に出てフル幅表示
   position:relative + z-index:1 でオーバーレイより前面に */
.tp__ent-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-bottom: 0; /* 下のスペースは tp__ent__footer の padding-top で確保 */
}

/* stage + ボタンのコンテナ: ボタン絶対配置の基準 */
.tp__ent-slider__area {
  position: relative;
}

/* ステージ: overflow:hidden でピークをクリップ
   高さは JS の updateSlideWidths() でアクティブスライドに合わせて固定する */
.tp__ent-slider__stage {
  overflow: hidden;
  cursor: grab;
}
.tp__ent-slider__stage.is-dragging {
  cursor: grabbing;
}

.tp__ent-slider__track {
  display: flex;
  align-items: center; /* アクティブ(高)/隣接(低)の高さ差を垂直中央揃えで吸収 */
  will-change: transform;
}

/* スライド幅は JS で設定 (flex % の循環参照を回避)
   PC: 画像1000px+pad32px=1032px / 隣800px+32px=832px (gap=32px)
   SP: 画像300px+pad16px=316px  / 隣250px+16px=266px (gap=16px) */
.tp__ent-slider__slide {
  flex: none;
  padding: 0 16px; /* PC: 左右16pxずつ → 画像間ギャップ32px */
  box-sizing: border-box;
}
.tp__ent-slider__slide img {
  width: 100%;
  aspect-ratio: 3 / 2; /* PC: 横長 */
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* 矢印ボタン: スライドとスライドの隙間（peekゾーン境界）に配置
   PC: centerOff = (1440 - 1032) / 2 = 204px → 204/1440 ≈ 14.17%
       アイコン32px → 半幅16px → left: calc(14.17% - 16px)
   SP: centerOff = (375 - 316) / 2 = 29.5px → 29.5/375 ≈ 7.87%
       アイコン24px → 半幅12px → left: calc(7.87% - 12px) */
.tp__ent-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  line-height: 0;
  transition: opacity 0.2s;
}
.tp__ent-slider__btn:hover {
  opacity: 0.55;
}
.tp__ent-slider__btn img {
  width: 32px;
  height: 64px;
  display: block;
}
.tp__ent-slider__prev {
  left: calc(14.17% - 16px);
}
.tp__ent-slider__next {
  right: calc(14.17% - 16px);
}

/* ドット */
.tp__ent-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding-bottom: 4px;
}
.tp__ent-slider__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.3s;
}
.tp__ent-slider__dots span.active {
  background: var(--gold);
}

/* SP レスポンシブ */
@media (max-width: 768px) {
  .tp__ent__inner {
    padding: 80px 15px 0;
  }
  .tp__ent__footer {
    padding: 24px 16px 100px;
  }
  .tp__ent__sub {
    margin-bottom: 70px;
  }
  .tp__ent__video-wrap {
    margin-bottom: 24px;
  }
  .tp__ent__copy {
    margin-bottom: 80px;
  }
  .tp__ent__label-wrap {
    margin-bottom: 24px;
  }
  /* SP: 縦型 3:4 / padding を 8px に縮小してアドジャセント画像を多く見せる */
  .tp__ent-slider__slide {
    padding: 0 8px;
  }
  .tp__ent-slider__slide img {
    aspect-ratio: 3 / 4;
  }
  /* SP: centerOff = (375 - 316) / 2 = 29.5px → 7.87% */
  .tp__ent-slider__prev {
    left: calc(7.87% - 12px);
  }
  .tp__ent-slider__next {
    right: calc(7.87% - 12px);
  }
  .tp__ent-slider__btn img {
    width: 24px;
    height: 48px;
  }
  .tp__ent__headline {
    margin-bottom: 40px;
  }
}

/* ============================================================
   LOWER WRAPPER: Safety + Achievements 共通 sticky 背景
   ============================================================ */
.tp__lower {
  position: relative;
  /* overflow: hidden を入れると sticky が効かなくなるため設定しない */
}

/* sticky 背景: 動画 + white_bg.webp テクスチャ */
.tp__lower__bg {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  margin-bottom: -100vh; /* コンテンツを被せるために負のマージン */
  z-index: 0;
}
.tp__lower__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* SP: 16:9動画を中央でクロップ（左右カット） */
}
/* Safety / Achievements: white_bg.webp テクスチャを ::before で重ねる
   (Entertainment は暗いオーバーレイなので texture 不要) */
.tp__safety::before,
.tp__achievements::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/white_bg.webp") top center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Safety 背景はエンタメ切り替えと同時に出現・消滅（反復）
   出現/消滅ともにEntertainmentオーバーレイと完全同期 */
.tp__safety::before {
  opacity: 0;
  transition: opacity 0.35s ease-in; /* 戻り: ent overlayと同期 */
}
.tp__safety.is-light::before {
  opacity: 1;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1); /* 出現: ent overlayと同期 */
}

/* ============================================================
   SECTION 3: 安全性 & パフォーマンス
   ============================================================ */
.tp__safety {
  position: relative;
  z-index: 1; /* tp__lower__bg の上に重なる */
  padding-bottom: 120px;
}

/* コンテンツ */
.tp__safety > * {
  position: relative;
  z-index: 1;
}

/* ヘッダー */
.tp__safety__header {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(0, 8vh, 120px) 40px 0;
  text-align: center;
}
.tp__safety__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(24px, 3.89vw, 56px);
  color: var(--dark);
  line-height: 1.5;
}
.tp__safety__title-en {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(14px, 2.22vw, 32px);
  color: var(--dark-gold);
  line-height: 1.5;
}

/* 2カラムブロック共通 */
.tp__safety__block {
  max-width: calc(100% - 32px);
  width: 897px;
  margin: 0 auto;
  padding-top: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tp__safety__block-img img {
  width: 720px;
  aspect-ratio: 720/450;
  object-fit: cover;
}

.tp__safety__label {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(12px, 1.67vw, 24px);
  color: var(--dark-gold);
  margin-bottom: 32px;
  text-align: center;
}
.tp__safety__block-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.78vw, 40px);
  color: var(--brown);
  line-height: 1.5;
  text-align: center;
}
.tp__safety__block-desc {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(14px, 1.67vw, 24px);
  color: var(--brown);
  line-height: 1.5;
  text-align: center;
}

.tp__safety__block-content {
  display: flex;
  gap: 40px;
  flex-direction: column;
  align-items: center;
}

.tp__safety__block-link {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  border: 1px solid #95824b;
  background: #dabf73;
  width: 540px;
  height: 120px;
  position: relative;
  transition: opacity 0.3s;
}
.tp__safety__block-link:hover {
  opacity: 0.7;
}
.tp__safety__block-link p {
  color: #231815;
  text-align: center;
  font-family: "Noto Serif JP";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.tp__safety__block-link p span {
  font-size: 18px;
}
.tp__safety__block-link svg {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}
.tp__safety__block-note {
  color: #231815;
  text-align: center;
  font-family: "Noto Serif JP";
  font-size: 16px;
  line-height: 150%; /* 24px */
}
.tp__safety__block-note a {
  color: #0920ca;
  line-height: 150%;
  text-decoration-line: underline !important;
}

/* タグ */
.tp__safety__tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 56px;
}
.tp__safety__tag {
  width: 259px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  background: var(--gold);
  border: 1px solid var(--dark-gold);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(16px, 1.67vw, 24px);
  color: var(--brown);
  line-height: 1.5;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .tp__safety {
    padding-bottom: 80px;
  }
  .tp__safety__block-title {
    text-align: center;
  }
  .tp__safety__label {
    text-align: center;
    margin-bottom: 40px;
  }
  .tp__safety__block-desc {
    margin-top: 0;
    text-align: center;
  }
  .tp__safety__tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(23px, 2.64vw, 38px);
    max-width: 558px; /* 260×2 + 38 */
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .tp__safety__tag:first-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(6px, 1.32vw, 19px)); /* 1カラム分の幅に揃える */
  }
  .tp__safety__tag {
    width: 100%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    background: var(--gold);
    border: 1px solid var(--dark-gold);
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-size: clamp(16px, 1.67vw, 24px);
    color: var(--brown);
    line-height: 1.5;
    white-space: nowrap;
  }
  .tp__safety__tags {
    width: 100%;
  }
  .tp__safety__tag {
    padding: 10px 8px;
    white-space: normal; /* 折り返しを許可 */
    font-size: clamp(13px, 3.5vw, 16px); /* 横幅に応じて縮む */
    word-break: keep-all; /* 日本語の不自然な分割を防ぐ */
  }
}

/* ============================================================
   SECTION 4: これまでの使用実績
   ============================================================ */
.tp__achievements {
  position: relative;
  z-index: 1; /* tp__lower__bg の上に重なる */
  padding-bottom: 100px;
}

/* コンテンツ（tp__lower__bg の上に重なる） */
.tp__achievements > * {
  position: relative;
  z-index: 1;
}

/* ヘッダー */
.tp__achievements__header {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 80px;
}
.tp__achievements__label {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(12px, 1.67vw, 24px);
  color: var(--dark-gold);
  line-height: 1.5;
}
.tp__achievements__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(20px, 2.78vw, 40px);
  color: var(--brown);
  line-height: 1.5;
}

/* 実績行 */
.tp__ach-row {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 48px;
  padding: 0 90px 48px 0;
}

.tp__ach-row.reverse {
  /* 右:テキスト / 左:画像 はデフォルトで OK */
  padding: 0 0 48px 90px;
  grid-template-columns: 0.78fr 1fr;
}

/* 左:画像 → grid-column順のまま */
.tp__ach-row--img-left .tp__ach-row__img {
  order: 1;
}
.tp__ach-row--img-left .tp__ach-row__text {
  order: 2;
}

/* 右:画像 → テキストを先に */
.tp__ach-row--img-right .tp__ach-row__text {
  order: 1;
}
.tp__ach-row--img-right .tp__ach-row__img {
  order: 2;
}

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

/* ---- Achievements スライダー ---- */
.tp__ach-slider {
  position: relative;
  user-select: none;
}
.tp__ach-slider__wrap {
  overflow: hidden;
  cursor: grab;
  width: 100%;
}
.tp__ach-slider__wrap.is-dragging {
  cursor: grabbing;
}
.tp__ach-slider__track {
  display: flex;
  will-change: transform;
}
.tp__ach-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}
.tp__ach-slider__slide img {
  pointer-events: none;
}
/* ドット */
.tp__ach-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 24px;
}
.tp__ach-slider__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(35, 24, 21, 0.22);
  cursor: pointer;
  transition: background 0.3s;
}
.tp__ach-slider__dots span.active {
  background: #9b8044;
}

.tp__ach-row__text h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(16px, 2.22vw, 32px);
  color: var(--brown);
  line-height: 1.5;
  margin-bottom: 32px;
}
.tp__ach-row__text p {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(14px, 1.67vw, 24px);
  color: var(--brown);
  line-height: 1.5;
}

/* ============================================================
   SECTION 5: FINAL CTA
   ============================================================ */
.tp__final-cta {
  position: relative;
  height: 100vh;
  min-height: 960px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding-top: 106px;
}
.tp__final-cta__bg {
  position: absolute;
  inset: 0;
}
.tp__final-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* テキスト上に暗めオーバーレイ */
.tp__final-cta__title {
  position: relative;
  z-index: 1;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(32px, 4.44vw, 64px);
  color: #fff;
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform;
}

/* ============================================================
   SECTION 6: OUR ARENA
   ============================================================ */
.tp__our-arena {
  position: relative;
  /* min-height: 637px; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 0px 70px;
  text-align: center;
}
.tp__our-arena__bg {
  position: absolute;
  inset: 0;
}
.tp__our-arena__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp__our-arena > *:not(.tp__our-arena__bg):not(.tp__our-arena__button) {
  position: relative;
  z-index: 1;
}

/* PAGE TOP */
.tp__our-arena__page-top {
  margin-bottom: 40px;
}
.tp__page-top-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 24px;
  transition: opacity 0.3s;
}
.tp__page-top-btn:hover {
  opacity: 0.7;
}
.tp__page-top-arrow {
  width: 16px;
  height: 17px;
}

/* ロゴ */
.tp__our-arena__logo {
  width: 165.094px;
  height: 125px;
  margin: 0 auto 40px;
  transition: opacity 0.3s;
}
.tp__our-arena__logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.tp__our-arena__logo:hover {
  opacity: 0.7;
}

/* ページタイトル */
.tp__our-arena__page-title {
  margin-bottom: 40px;
}
.tp__our-arena__page-title .en {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.78vw, 40px);
  color: var(--blue);
  line-height: 1.2;
}
.tp__our-arena__page-title .ja {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 0.97vw, 14px);
  color: var(--blue);
  line-height: 1.2;
  margin-top: 4px;
}

.tp__our-arena__button {
  width: 720px;
  color: var(--blue);
  text-align: center;
  font-family: Barlow;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  position: relative;
  z-index: auto; /* stacking context を作らず ::before が外の背景にブレンドできるようにする */
  margin-bottom: 25px;
  transition: opacity 0.3s;
}
/* 背景だけに mix-blend-mode: plus-lighter を適用 */
.tp__our-arena__button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #b19648;
  mix-blend-mode: plus-lighter;
  z-index: 0;
}

.tp__our-arena__button p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 13px 0;
  position: relative;
  z-index: 1;
}

.tp__our-arena__button span {
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 16.8px */
}

.tp__our-arena__button svg {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  z-index: 1;
  transition: all 0.3s ease;
}

.tp__our-arena__button:hover svg {
  transform: translateY(-50%) translateX(5px);
}

/* ナビリンク */
.tp__our-arena__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  width: 720px;
  margin: 0 auto 64px;
}
.tp__our-arena__nav-item {
  border-bottom: #dbc073 1px solid;
  text-align: center;
  padding-bottom: 24px;
  transition: opacity 0.3s;
}
.tp__our-arena__nav-item:first-child {
  padding-left: 0;
}
.tp__our-arena__nav-item:last-child {
  padding-right: 0;
  border-right: none;
}
.tp__our-arena__nav-item .en {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 0.97vw, 14px);
  color: var(--gold-2);
  opacity: 0.7;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: start;
}
.tp__our-arena__nav-item .ja {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.25vw, 18px);
  color: #fff;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: color 0.3s;
}

.tp__our-arena__nav-item:hover {
  opacity: 0.7;
}

.tp__our-arena__nav-item .ja .arrow {
  font-family: "Barlow", sans-serif;
  font-size: 1em;
  display: inline-block;
  transition: transform 0.3s;
  opacity: 0.7;
}

.tp__our-arena__nav-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* フッター */
.tp__our-arena__footer {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 0.69vw, 10px);
  color: #fff;
  line-height: 20px;
}

/* ============================================================
   SCROLL FADE アニメーション
   js-scroll-fade クラスに適用
   ============================================================ */
.js-scroll-fade {
  opacity: 0;
  transition: opacity 1.8s ease;
}
.js-scroll-fade.is-visible {
  opacity: 1;
}

/* ============================================================
   バースト画面切り替えオーバーレイ
   ============================================================ */
.tp__burst-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
}
/* バースト中: js-scroll-fade のトランジションを無効化 */
body.is-bursting .js-scroll-fade {
  transition: none !important;
}

/* ============================================================
   SP (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* --- VISION FLOOR Panel 3: SP 初期サイズ (JS アニメ開始値に合わせる) --- */
  .js-vf-panel3 .tp__vf__vision-title {
    font-size: 24px;
    letter-spacing: 0.48px;
    font-weight: 700;
  }

  /* --- Hero --- */
  .tp__ov__bg-pc {
    display: none;
  }
  .tp__ov__bg-sp {
    display: block;
    position: absolute;
    width: 196.27%;
    left: 50%;
    top: -7.64%;
    transform: translateX(calc(-50% + 1.5px));
    pointer-events: none;
  }
  .tp__ov__bg-sp img {
    width: 100%;
    height: auto;
  }
  .tp__ov__grad-pc {
    display: none;
  }
  .tp__ov__grad-sp-upper {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    top: 30.67%;
    height: 12.68%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
  }
  .tp__ov__grad-sp-lower {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    top: 34.85%;
    height: 58.74%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 51.442%, rgba(0, 0, 0, 0) 90.385%);
    pointer-events: none;
  }

  .tp__ov__title {
    top: 32.88%;
    font-size: clamp(28px, 9.6vw, 36px);
  }
  .tp__ov__headline {
    top: 41.63%;
    font-size: clamp(18px, 6.4vw, 24px);
    left: calc(50% + 3.5px);
  }
  .tp__ov__body {
    top: 48.4%;
  }
  .tp__ov__body p {
    font-size: clamp(12px, 4.27vw, 16px);
  }
  .tp__ov__body-pc {
    display: none;
  }
  .tp__ov__body-sp {
    display: block;
  }
  .tp__ov__scroll {
    top: 85.84%;
    gap: 4px;
  }
  .tp__ov__scroll-label {
    font-size: 12px;
  }
  .tp__ov__scroll-arrow {
    width: 10px;
    height: 9px;
  }

  .tp__ov__hamburger {
    display: block;
    position: absolute;
    right: 0;
    top: 85.71%;
    width: 64px;
    height: 64px;
    cursor: pointer;
    opacity: 0;
    will-change: opacity;
  }
  .tp__ov__hamburger svg {
    width: 100%;
    height: 100%;
  }

  /* --- Vision Floor フレームスクロール (SP) --- */
  .tp__vf__group {
    padding: 0 24px;
  }
  .tp__vf__head .jp {
    font-size: clamp(18px, 5.3vw, 28px);
  }
  .tp__vf__head .en {
    font-size: 12px;
  }
  .tp__vf__body .message {
    font-size: clamp(13px, 3.7vw, 16px);
    line-height: 1.7;
  }

  /* --- Safety --- */
  .tp__safety__block {
    padding-top: 80px;
  }
  .tp__safety__header {
    padding: 0 20px 0;
  }
  .tp__safety__block-link {
    width: 343px;
    height: 71px;
    max-width: 100%;
  }
  .tp__safety__block-link p {
    font-size: 16px;
  }
  .tp__safety__block-link p span {
    font-size: 12px;
  }
  .tp__safety__block-link svg {
    right: 16px;
    width: 12px;
    height: 12px;
  }
  .tp__safety__block-note {
    font-size: 12px;
  }

  /* --- Achievements --- */
  .tp__achievements {
    padding-bottom: 40px;
  }
  .tp__achievements__header {
    padding: 0;
    margin-bottom: 40px;
  }
  .tp__ach-row,
  .tp__ach-row.reverse {
    /* grid-template-columns: 1fr; */
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    padding: 0 0 24px;
    overflow: hidden;
    align-items: stretch; /* PC の align-items:center を上書き → 子を横幅いっぱいに伸ばす */
  }
  .tp__ach-row__img {
    min-width: 0;
  }
  .tp__ach-row.reverse {
    flex-direction: column-reverse;
  }
  .tp__ach-row--img-left .tp__ach-row__img,
  .tp__ach-row--img-right .tp__ach-row__text {
    order: 1;
  }
  .tp__ach-row--img-left .tp__ach-row__text,
  .tp__ach-row--img-right .tp__ach-row__img {
    order: 2;
  }
  .tp__ach-row__text h3 {
    margin: 0 30px 12px;
    text-align: center;
  }
  .tp__ach-row__text p {
    margin: 0 30px;
    text-align: center;
  }

  .tp__ach-slider__dots {
    display: none;
  }

  /* SP peek スライダー: アクティブ300px、左右が見切れるデザイン */
  .tp__ach-slider__slide {
    flex: 0 0 80vw; /* 375px時 = 300px */
  }

  /* --- Final CTA --- */
  .tp__final-cta {
    padding-top: 58px;
  }
  .tp__final-cta__title {
    white-space: normal;
    padding: 0 20px;
  }

  /* --- OUR ARENA --- */
  .tp__our-arena {
    padding: 48px 0 78px;
  }
  .tp__our-arena__nav {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    gap: 24px;
    margin: 0 auto 40px;
  }
  .tp__our-arena__nav-item {
    padding: 0 16px 24px 33px;
    border-right: none;
  }
  .tp__our-arena__nav-item:first-child {
    padding-left: 33px;
  }
  .tp__our-arena__nav-item:last-child {
    padding-right: 16px;
  }
  .tp__our-arena__button {
    width: calc(100% - 32px);
  }
  .tp__our-arena__button p {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 21px 33px 19px;
    gap: 0;
    line-height: 0.8;
    gap: 5px;
  }
  .tp__our-arena__button svg {
    right: 16px;
  }
}

/* ============================================================
   スクロールインジケーター（右下固定）
   Figma: 縦ライン + 下向き三角が にょきにょき 伸びる
   ============================================================ */
.tp__scroll-ind {
  position: fixed;
  right: clamp(20px, 4vw, 40px);
  bottom: clamp(32px, 5vh, 56px);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tp__scroll-ind.is-visible {
  opacity: 1;
}

/* トラック: overflow:hidden でクリッピング領域を確保 */
.tp__scroll-ind__track {
  position: relative;
  width: 9px;
  height: 160px;
  overflow: hidden;
}

/* SWEEP = 1px ライン（tail）。矢印は ::after で clip-path 描画。
   回転なしなので位置ずれゼロ。ラインが上から入り、矢印が先頭を行く。
   ライン高さ(200px) > トラック高さ(160px) → トラックがはみ出しを隠す。 */
.tp__scroll-ind__sweep {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 200px;
  background: #fff;
  animation: scroll-ind-sweep 2.2s linear infinite;
}

/* 下向き三角矢印: clip-path で正確に中央配置 */
.tp__scroll-ind__sweep::after {
  content: "";
  position: absolute;
  bottom: -7px; /* ラインの真下に配置 */
  left: -2.5px; /* 1px ライン中心から (9px矢印-1px) / 2 = 4px 左にオフセット */
  width: 9px;
  height: 7px;
  background: #fff;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

@keyframes scroll-ind-sweep {
  /* ① 初期状態: ライン30px + 矢印が見えた状態でスタート
     sweep top=-170px → sweepの下端が30px地点 → 矢印先端が37px地点 */
  0% {
    top: -170px;
    opacity: 1;
    animation-timing-function: linear;
  }
  /* ② arrowhead が下端でピタッと止まる
     arrowhead bottom = sweep_top + 200 + 7 = 160 → sweep_top = -47 */
  56% {
    top: -47px;
    opacity: 1;
  }
  /* ③ 一瞬そのまま止まる（hold） */
  68% {
    top: -47px;
    opacity: 1;
    animation-timing-function: ease-in;
  }
  /* ④ フェードアウト */
  80% {
    top: -47px;
    opacity: 0;
  }
  /* ⑤ 初期位置へ瞬時に戻る（opacity は 0 のまま） */
  80.001% {
    top: -170px;
    opacity: 0;
    animation-timing-function: ease-out;
  }
  /* ⑥ フワっとフェードイン */
  90% {
    top: -170px;
    opacity: 1;
  }
  /* ⑦ 次のループまで間を置く */
  100% {
    top: -170px;
    opacity: 1;
  }
}

/* SCROLL テキスト（矢印の右隣・Figma スタイル） */
.tp__scroll-ind__label {
  position: absolute;
  left: 30px;
  top: 0;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
  line-height: 80%;
  white-space: nowrap;
  transform: rotate(90deg);
  transform-origin: left top;
}

@media (max-width: 768px) {
  .tp__scroll-ind {
    right: 25px;
    bottom: 28px;
  }
  .tp__scroll-ind__label {
    left: 23px;
    font-size: 12px;
  }
}