/* ============================================================
   PREVIEW MODE PATCH
   このファイルを style.css の後に読み込むことでアニメーションを無効化します
   ============================================================ */

/* ページローダー即時非表示 */
.c-page-loader {
  display: none !important;
}

/* スクロールアニメーション無効：初期状態から表示 */
.js-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* マーキー（流れるテキスト）停止 */
.c-marquee__track {
  animation-play-state: paused !important;
}

/* ヒーロー SCROLL ライン点滅停止 */
.p-hero__scroll::after {
  animation: none !important;
  background: rgba(255,255,255,0.6) !important;
}

/* ヘッダーはスクロール済みスタイルを常時適用（視認しやすくするため） */
.l-header {
  color: var(--ink) !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 0 4px 24px rgba(7,19,41,.08) !important;
}
.l-header .c-button--entry {
  color: #fff !important;
  background: var(--blue) !important;
}

/* ============================================================
   FIRST VIEW：添付キービジュアルへ差し替え
   ============================================================ */
.p-hero.p-hero--image {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 88px;
  overflow: hidden;
  background: #fff;
}

.p-hero--image__frame {
  position: relative;
}

.p-hero--image__frame picture {
  display: block;
}

.p-hero--image__visual {
  width: 100%;
  height: auto;
  display: block;
}

.p-hero--image__hotspot {
  z-index: 2;
  position: absolute;
  top: 69%;
  height: 12%;
  border-radius: 999px;
}

.p-hero--image__hotspot--entry {
  left: 7.4%;
  width: 15.6%;
}

.p-hero--image__hotspot--requirements {
  left: 24.5%;
  width: 15.8%;
}

@media (max-width: 767px) {
  .p-hero.p-hero--image {
    padding-top: 68px;
  }

  .p-hero--image__visual {
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .p-hero--image__hotspot {
    top: 92.2%;
    height: 6%;
  }

  .p-hero--image__hotspot--entry {
    left: 6.8%;
    width: 41.8%;
  }

  .p-hero--image__hotspot--requirements {
    left: 51%;
    width: 42.5%;
  }
}


/* ============================================================
   VISUAL PLACEHOLDER：シンプルなグレー系ダミーに変更
   ヒーロー・ファイナルCTAは除外
   ============================================================ */

/* ベースの装飾グラフィックをリセット */
.c-visual:not(.c-visual--hero):not(.c-visual--final) {
  background-color: #c8d0db !important;
}

.c-visual:not(.c-visual--hero):not(.c-visual--final)::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.25) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.25) 25%, transparent 25%),
    #b8c2cc !important;
  background-size: 40px 40px !important;
}

.c-visual:not(.c-visual--hero):not(.c-visual--final)::after {
  display: none !important;
}

/* 各バリアントを個別にリセット（specificity対策） */
.c-visual--store::before,
.c-visual--people::before,
.c-visual--shoes::before,
.c-visual--event::before,
.c-visual--social::before,
.c-visual--running::before,
.c-visual--fitting::before,
.c-visual--beginner::before,
.c-visual--track::before,
.c-visual--trial::before,
.c-visual--kids::before,
.c-visual--portrait1::before,
.c-visual--portrait2::before,
.c-visual--portrait3::before,
.c-visual--movie::before,
.c-visual--movie1::before,
.c-visual--movie2::before,
.c-visual--movie3::before,
.c-visual--sns1::before,
.c-visual--sns2::before,
.c-visual--sns3::before,
.c-visual--sns4::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.25) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,255,255,0.25) 25%, transparent 25%),
    #b8c2cc !important;
  background-size: 40px 40px !important;
}