/* ////////////////////////////////////////////////////////////
  共通
//////////////////////////////////////////////////////////// */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://use.typekit.net/est6kpl.css");
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');

:root {
  --ver: /;
  --opa-1: 0.95;
  --color-bg: ;
  --text-white: #fff;
  --font-pp: "DE-R";
  --font-neuehaasD: "neue-haas-grotesk-display";
  --font-notoS: "Noto Serif";
  --font-ZenKakuGothicA: "Zen Kaku Gothic Antique", sans-serif;
}

@font-face {
  font-family: "DE-R";
  src: url(var(--ver)/assets/fonts/PPEditorialOld-Regular.woff2) format("woff2"),
    url(var(--ver)/assets/fonts/PPEditorialOld-Regular.woff) format("woff");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "DE-L";
  src: url(var(--ver)/assets/fonts/PPEditorialOld-Ultralight.woff2)
      format("woff2"),
    url(var(--ver)/assets/fonts/PPEditorialOld-Ultralight.woff) format("woff");
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}

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

html {
  overflow-x: hidden;
  background: var(--color-bg);
  transition: background-color 5s ease;
  will-change: background-color;
  scroll-behavior: auto;
}
body,
html {
  height: auto;
  margin: 0;
  padding: 0;
  color: var(--text-white);
  font-family: var(--font-pp);
  overflow-x: hidden !important;
}
a {
  text-decoration: underline !important;
}
:lang(ja) {
  font-family: "Noto Serif JP", serif !important;
  font-optical-sizing: auto;
  font-style: normal;
  vertical-align: 0.01em;
}

.spShow {
  display: none;
}
@media screen and (max-width: 767px) {
  /* スマホ画面（767px以下）の時のスタイル指定 */
  .spShow {
    display: block;
  }
  .pcShow {
    display: none;
  }
}
.pcShow {
  display: none;
}
@media screen and (min-width: 768px) {
  /* タブレット以上（768px以上）の時のスタイル指定 */
  .pcShow {
    display: block;
  }
}

.IKIKIIKIIKI {
  font-family: var(--font-neuehaasD);
  font-size: 73px;
  letter-spacing: 28px;
}
.IKIKIIKIIKI span.no-space {
  letter-spacing: 0;
}

::selection {
  color: var(--color-bg);
}

#mouse-stalker {
  display: none; /* 一旦、使わない */
  position: fixed;
  top: -10px;
  left: -10px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  transform: translate(0, 0);
  transition: transform 0.2s;
  transition-timing-function: ease-out;
  z-index: 999;
  mix-blend-mode: difference;
  &.is_active {
    top: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
    transition: 0.2s;
  }
}

#mouse-stalker,
.site-header,
.hero,
.countdown,
.guest-marquee {
  pointer-events: none;
}

.social,
.global-ticket-button,
.global-tt-button,
.site-header,
.hero,
.countdown,
.guest-marquee {
  z-index: 1000;
  mix-blend-mode: overlay;
}

/* ////////////////////////////////////////////////////////////
  GoogleDocumentの呼び出しエリア
//////////////////////////////////////////////////////////// */

@keyframes fadeInWrapper {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--opa-1);
  }
}
@-webkit-keyframes fadeInWrapper {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--opa-1);
  }
}

.doc-native-wrapper {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;

  opacity: 0; /* 初期は透明 */
  pointer-events: auto;
  margin: 4px;

  /* opacity だけ遷移 */
  transition: opacity 1s ease-in-out;
}
.doc-native-wrapper.is-visible {
  opacity: var(--opa-1);
}
.doc-native-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;

  transform: translateZ(0) scale(1.3);
  transform-origin: top center;

  transition: transform 1s linear;
}
/* is-visible が付いたらスケールを大きく */
.doc-native-wrapper.is-visible iframe {
  /* transform: translateZ(0) scale(1.3); */
}

#native-doc {
  position: absolute;
  /* wrapper に 4px margin があるので内側に収める */
  inset: 0px;
  display: block;
  overflow: auto;                 /* ← スクロールはここで発生 */
  height: calc(100svh - 8px);     /* 8px は上下 4px+4px の余白ぶん */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  transform: translateZ(0) scale(1.3);
  transform-origin: top center;

  transition: transform 1s line
}

#banners {
  display: none !important;
}
#contents {
  width: 100%;
  background-color: #fff;
}
#contents .doc-content {
  min-width: 100%;
  padding: 0 !important;
}
#contents .doc-content,
#contents .doc-content p,
#contents .doc-content p span,
#contents .doc-content h2 span {
  font-family: "Zen Kaku Gothic Antique", sans-serif !important;
}

:host .doc-content :is(
  span[style*="width: 673.72"][style*="height: 448.54"],
  span[style*="width: 2048"][style*="height: 1002"]
),
:host .doc-content :is(
  span[style*="width: 673.72"][style*="height: 448.54"],
  span[style*="width: 2048"][style*="height: 1002"]
) > img {
  width: 100% !important;
  height: auto !important;
}

/* 初期は無効（チラつき防止） */
:host { 
  --gdoc-filter: none;
}

:host img {
  mix-blend-mode: normal !important;
  filter: var(--gdoc-filter, none) !important;
  -webkit-filter: var(--gdoc-filter, none) !important; /* Safari 対応 */
}



.doc-content p {
  line-height: 2.2em !important;
}

/* ////////////////////////////////////////////////////////////
  .site-header エリア
//////////////////////////////////////////////////////////// */

.site-header {
  /* display: none; 一旦、使わない */
  padding-right: 1rem;
  position: fixed;
  top: 0;
  right: 0;
  font-weight: bold;
}
.site-header .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 0 1.1rem;
  font-size: 14px;
  flex-direction: row;
  flex-wrap: nowrap;
}
.site-header .container .time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header .container .time .weekday {
  padding: 0.2em 1em;
  border: 1px solid #fff;
  border-radius: 50%;
}
.site-header .container .time .hms {
  display: inline-block;
  width: 4.3rem;
}

/* ////////////////////////////////////////////////////////////
  .hero エリア（logotype に完全追従・変数なし）
//////////////////////////////////////////////////////////// */

.hero {
  position: relative;
  overflow: hidden;
}

/* 基準箱：ここをコンテナにする */
.hero .branding {
  position: fixed;
  top: 4svh;
  left: 3%;
  width: clamp(380px, 30vw, 520px);
  aspect-ratio: 953.19 / 562.4;

  /* cqw/cqh を使うため block/inline 両軸をコンテナ化 */
  container-type: size;
  container-name: hero-branding;
}

.hero .branding .logotype {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* フォールバック（コンテナ単位が無い場合は % で追従） */
.hero .branding .logomark-wrapper {
  position: absolute;
  left: 88%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 18.85%;
  height: auto;
}

/* 対応ブラウザでは cqw/cqh を使って安定追従 */
@supports (left: 1cqw) {
  .hero .branding .logomark-wrapper {
    left: 88cqw;
    top: 58cqh;
    width: 21.85cqw;
  }
}

/* 端のサイズ帯だけ微調整したいときはコンテナクエリで局所補正（任意） */
@container hero-branding (width < 420px) {
  .hero .branding .logomark-wrapper {
    left: 87.5cqw;
    top: 66.8cqh;
    width: 21.6cqw;
  }
}
@container hero-branding (width > 500px) {
  .hero .branding .logomark-wrapper {
    left: 88.2cqw;
    top: 57.6cqh;
    width: 21.5cqw;
  }
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.02);
  }
}
.hero .branding .logomark.heartbeat {
  animation: heartbeat 0.7s ease-in-out;
  transform-origin: center center;
}

.hero .hero-title {
  position: fixed;
  top: 4svh; /* SVG版 */
  right: 1.4%;
  letter-spacing: 28px;
  font-size: 80px;
}
.hero .hero-title .logo-IKIKIIKIIKI {
  width: 38rem;
  height: auto;
}

.hero .scroll {
  position: fixed;
  top: 50%;
  right: 0.5%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.scroll-indicator {
  position: relative;
  width: 11px;
  height: 180px;
  overflow: hidden;
}
.scroll-track {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: var(--text-white);
  opacity: 0.3;
  transform: translateX(-50%);
}
.scroll-bar {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: var(--text-white);
  transform: translate(-50%, -100%);
  animation: movescrollbar 2s infinite cubic-bezier(0.93, 0.04, 0.16, 0.9);
  opacity: 1;
}
.scroll-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 5px;
  height: 5px;
  transform: translate(-42%, 0);
  border-radius: 50%;
  background-color: #fff;
}
@keyframes movescrollbar {
  0% {
    transform: translate(-50%, -100%);
  }
  100% {
    transform: translate(-50%, -3%);
  }
}
.scroll-text {
  transform: rotate(90deg);
  font-size: 12px;
  margin-top: 10px;
}

/* 既存の単体 GET TICKETS ボタン（単体使用のフォールバック） */
.global-ticket-button {
  z-index: 10;
  position: fixed;
  top: 8.5rem;
  right: 1rem;
  display: inline-block;
  font-weight: bold;
  text-decoration: none !important;
  padding: 0.4em 1.2em;
  font-size: 1.2rem;
  font-family: var(--font-neuehaasD);
  letter-spacing: 0.05em;
  border: 1px solid var(--text-white);
  border-radius: 400px;
  will-change: transform, opacity, box-shadow;
  animation: ticketFlash 1s ease-in-out infinite;
  transition: background 0.3s ease, color 0.3s ease;
}
.global-ticket-button:hover {
  background: var(--text-white);
  color: var(--color-bg);
}
@keyframes ticketFlash {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 transparent;
  }
  40% {
    opacity: 0.8;
    box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.9);
  }
  60% {
    opacity: 0.9;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.4);
  }
  100% {
    opacity: 1;
    box-shadow: 0 0 0 transparent;
  }
}

/* ▼ 追加：2つのボタンを束ねる固定コンテナ（TIME TABLE + GET TICKETS） */
.global-cta {
  position: fixed;
  top: 8.5rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  mix-blend-mode: overlay;
  pointer-events: auto;
}
.global-cta .global-tt-button,
.global-cta .global-ticket-button {
  position: static; /* 親で固定 */
  display: inline-block;
  font-weight: bold;
  text-decoration: none !important;
  padding: 0.4em 1.2em;
  font-size: 1.2rem;
  font-family: var(--font-neuehaasD);
  letter-spacing: 0.05em;
  border: 1px solid var(--text-white);
  border-radius: 400px;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.22s ease;
}
.global-cta .global-ticket-button {
  will-change: transform, opacity, box-shadow;
  animation: ticketFlash 1s ease-in-out infinite; /* チケットのみ点滅 */
}
.global-cta .global-tt-button:hover,
.global-cta .global-ticket-button:hover {
  background: var(--text-white);
  color: var(--color-bg);
}

nav.social {
  position: fixed;
  bottom: 6svh;
  right: 3%;
  font-size: 1.8rem;
  font-family: var(--font-neuehaasD);
  text-align: right;
}
nav.social a {
  color: inherit;
  text-decoration: none;
  margin: 0 0.25rem;
}

/* ////////////////////////////////////////////////////////////
  カウントダウンエリア
//////////////////////////////////////////////////////////// */

.countdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  color: var(--text-white);
  font-family: var(--font-neuehaasD);
  opacity: 0.3;
}
.coming-soon-title {
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin-bottom: -1rem;
}
.countdown .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0rem;
}
.countdown .inner .time-block {
  text-align: center;
  width: 10rem;
}
.countdown .inner .time-block .number {
  position: relative;
  display: block;
  margin: 0 auto;
  font-size: 7rem;
  text-align: center;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.countdown .inner .time-block:not(:last-child) .number::after {
  content: ":";
  position: absolute;
  top: 50%;
  right: 0rem;
  transform: translateY(-60%);
  font-size: inherit;
  line-height: 1;
}
.countdown .inner .time-block .label {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-top: -2rem;
}

#countdown.justnow .inner p {
  font-size: 2.6rem;
  text-align: center;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
  マーキーエリア
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

.guest-marquee {
  position: fixed;
  bottom: 0;
  width: calc(100% - 8px);
  margin: 4px;
  overflow: hidden;
  height: 4rem;
  display: flex;
  align-items: center;
  font-size: 4rem;
  line-height: 1.8;
  color: var(--text-white);
  font-family: var(--font-neuehaasD);
  box-sizing: border-box;
}
.marquee-inner {
  white-space: nowrap;
  display: inline-block;
  animation: marquee-scroll 40s linear infinite;
  padding-left: 100%;
}
@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
  YouTube埋め込み
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

.promo-video {
  position: fixed;
  left: calc(1rem + env(safe-area-inset-left));
  bottom: 6svh;
  width: 270px;
  aspect-ratio: 16 / 9; /* 高さは成り行き（16:9） */
  height: auto; /* 明示しておくと安心 */
  border: 0;
  z-index: 1200; /* 必要に応じて調整 */
  mix-blend-mode: normal;
}

/* SP: 非表示 */
@media (max-width: 767px) {
  .promo-video {
    display: none;
  }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
  SPレイアウト
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 767px) {
  html,
  body {
    overflow-x: hidden !important;
  }
  #mouse-stalker,
  .site-header,
  .hero .event-date,
  .sidebar,
  .sidebar.fixed,
  .main-header,
  #main-header.fixed {
    display: none;
  }
  ::selection {
    color: inherit;
  }

  .hero,
  .guest-marquee {
    opacity: 0.6;
  }
  .countdown {
    opacity: 0.4;
  }

  .hero {
    height: 100svh;
    overflow: visible;
    position: relative;
  }

  /* コンテナ（基準箱）はそのまま固定配置。幅は端末幅ベースに */
  .hero .branding {
    top: 3svh;
    left: 4svw;
    width: clamp(200px, 50vw, 520px);
    aspect-ratio: 953.19 / 562.4;
    container-type: size; /* 念押し（既に指定済みでもOK） */
    container-name: hero-branding;
  }

  /* ロゴタイプはコンテナいっぱいに敷き詰め（デスクトップと同様の前提） */
  .hero .branding .logotype {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* フォールバック：cqw/cqh 非対応ブラウザ用（% で追従） */
  .hero .branding .logomark-wrapper {
    position: absolute;
    left: 66%;
    top: 24%;
    transform: translate(-50%, -50%);
    width: 16%;
    height: auto;
  }

  /* cqw/cqh 対応ブラウザではこちらで“完全追従” */
  @supports (left: 1cqw) {
    .hero .branding .logomark-wrapper {
      left: 66cqw; /* ← コンテナ幅に対する相対位置 */
      top: 24cqh; /* ← コンテナ高に対する相対位置 */
      width: 16cqw; /* ← コンテナ幅に対する相対サイズ */
    }
  }

  /* 画面がさらに狭い帯域での軽微な当たり取り（任意微調整） */
  @container hero-branding (width < 360px) {
    .hero .branding .logomark-wrapper {
      left: 86.5cqw;
      top: 57cqh;
      width: 23cqw;
    }
  }

  /* 横向き時（高さが詰まる）に少し下げて縮める（任意微調整） */
  @media (orientation: landscape) {
    .hero .branding .logomark-wrapper {
      left: 66cqw;
      top: 28cqh;
      width: 14cqw;
    }
  }

  .hero .scroll {
    display: none;
    top: 50%;
    right: 0;
  }
  .hero .hero-title {
    position: fixed;
    top: inherit;
    left: 0;
    right: 0;
    bottom: 2svh;
    font-size: 57px;
    display: flex !important;
    justify-content: space-between;
    width: 100%;
    padding: 0 4svw;
    margin: 0;
    letter-spacing: normal !important;
    text-align: center;
  }

  @keyframes heartbeat {
    0%,
    100% {
      transform: scale(1);
    }
    10% {
      transform: scale(1.02);
    }
  }
  .hero .branding .logomark.heartbeat {
    animation: heartbeat 0.7s ease-in-out;
    transform-origin: center center;
  }

  /* ▼ 追加：SP時のCTAコンテナ位置 */
  .global-cta {
    top: 3svh;
    right: 1rem;
    gap: 1rem;
    flex-direction: column-reverse;
  }

  .global-cta a {
    font-size: 0.9rem !important;
    padding: 1rem 1.2rem !important;
    text-align: center;
    line-height: 0;
    width: -webkit-fill-available;
  }

  .global-ticket-button {
    top: 3svh;
  }
  .global-ticket-button span.pcShow {
    display: none !important;
  }

  .countdown {
    width: 100%;
    transform: translate(-50%, -60%);
  }
  .coming-soon-title {
    font-size: 2rem;
  }
  .countdown .inner {
    gap: 0.3rem;
  }
  .countdown .inner .time-block {
    width: 5rem;
  }
  .countdown .inner .time-block .number {
    font-size: 4rem;
  }
  .countdown .inner .time-block:not(:last-child) .number::after {
    right: -0.3rem;
  }
  .countdown .inner .time-block .label {
    font-size: 0.8rem;
    margin-top: -1rem;
  }

  .guest-marquee {
    height: 3rem;
    font-size: 2.6rem;
    bottom: 7svh;
  }
  nav.social {
    display: none;
  }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
  タブレットレイアウト
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media screen and (min-width: 768px) and (max-width: 1366px) {
  .site-header,
  nav.social {
    display: none;
  }
  /* ▼ 追加：タブレット時のCTA位置 */
  .global-cta {
    top: 2svh;
  }
  .global-ticket-button {
    top: 2svh;
  }
  /* 単体使用時のフォールバック */
  .hero .branding {
    top: 2svh;
  }

  .hero .branding .logomark-wrapper {
    top: 58.8cqh;
  }

  .hero .hero-title {
    top: inherit;
    bottom: 9svh;
    width: 29rem;
  }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
  スマホ＋タブレットレイアウト（＝1024px以下）
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media (max-width: 1024px) {
  .doc-native-wrapper {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
  }
  #native-doc {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    transform: translateZ(0) scale(1);
    inset: 0;
  }
  #contents {
    padding: 0;
    text-shadow: 0 0 0.3px rgba(0, 0, 0, 0.02);
    -webkit-font-smoothing: antialiased;
  }
  #contents p span {
    overflow: auto !important;
    width: auto !important;
    height: auto !important;
  }
  #contents p img {
    width: 100% !important;
    height: auto !important;
  }
  #contents .doc-content {
    padding: 1.8rem !important;
    max-width: 100%;
  }
  #contents .doc-content p,
  #contents .doc-content li {
    line-height: 1.7;
  }
  table {
    width: 100%;
  }
}

/* ===== Contrast Panel (body直下・単体) ===== */

.doc-native-wrapper {
  mix-blend-mode: difference;
  isolation: isolate;
}

/* 画面全体に被せる “差の絶対値オーバーレイ” */
.doc-native-wrapper .doc-blend-overlay {
  position: absolute;
  inset: 0;
  z-index: 2; /* iframe の上にかぶせる */
  background: #fff;
  mix-blend-mode: difference; /* Docs の画だけを反転 */
  pointer-events: none;
  opacity: var(--blend-alpha, 1);
  transition: opacity 0.22s ease;
}

/* クラスが外れた時に戻る時も滑らか */
.social,
.global-ticket-button,
.global-tt-button,
.site-header,
.hero,
.countdown,
.guest-marquee {
  transition: opacity 0.22s ease;
}

/* 画面右下寄りに固定（パネル自体） */
#lm-contrast-panel {
  position: fixed;
  bottom: 15svh;
  right: 3%;
  z-index: 2000;
  width: 160px;
  mix-blend-mode: normal !important;
  pointer-events: auto;
  color: inherit;
  transition: mix-blend-mode 0.4s ease, filter 0.4s ease;
}

/* 超・低高さでは上寄せに退避 */
@media (max-height: 780px) {
  #lm-contrast-panel,
  .lm-contrast__panel {
    bottom: 20svh;
  }
}

.lm-contrast__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.lm-contrast__label-row label {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}
.lm-contrast__label-row output {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#lmContrastRange {
  width: 100%;
}

/* モバイル位置微調整（必要なら） */
@media (max-width: 767px) {
  #lm-contrast-panel {
    display: none;
    bottom: 8px;
    right: 8px;
  }
}

/* 可変不透明度（既存 --opa-1 は保持） */
:root {
  --contrast-percent: 100;
}
.doc-native-wrapper.is-visible {
  opacity: 1;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
  キョロキョロ　目ラベルの基礎
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

#lm-contrast-panel .lm-contrast__label-row label[for="lmContrastRange"] {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 0.18s ease;
  cursor: pointer;
}

/* キョロキョロ */
@keyframes kyoro {
  0% {
    transform: scaleX(1);
  }
  20% {
    transform: scaleX(-1);
  }
  40% {
    transform: scaleX(1);
  }
  60% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}
#lm-contrast-panel
  .lm-contrast__label-row
  label[for="lmContrastRange"].is-kyoro {
  animation: kyoro 0.8s ease-in-out;
}

/* hover/focusでも */
#lm-contrast-panel .lm-contrast__label-row label[for="lmContrastRange"]:hover,
#lm-contrast-panel
  .lm-contrast__label-row
  label[for="lmContrastRange"]:focus-visible {
  animation: kyoro 0.6s ease-in-out;
}

/* 動きを控える設定なら止める */
@media (prefers-reduced-motion: reduce) {
  #lm-contrast-panel .lm-contrast__label-row label[for="lmContrastRange"] {
    transition: none;
    animation: none !important;
  }
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////
  SPスクロール中フェード（.global-cta は除外）
///////////////////////////////////////////////////////////////////////////////////////////////////////// */

.fade-on-scroll {
  transition: opacity .8s ease;
}

@media (max-width: 767px) {
  body.is-sp-scrolling .fade-on-scroll {
    opacity: 0;
    pointer-events: none; /* 誤タップ防止。必要なければ外してOK */
  }

  /* ドキュメント本体は消さない（可読性確保） */
  body.is-sp-scrolling .doc-native-wrapper {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* CTAは常に表示 */
  .global-cta {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}