@charset "UTF-8";

/* ============================================================
   学ノリ LP  |  base: Figma 1440px design / pixel-perfect
============================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* レスポンシブ第1フェーズ: デスクトップレイアウトを比率維持で縮小。
   キャンバス幅 1440px（= 90rem、body min-width）のうちコンテンツ幅は中央の
   1200px（= 75rem）。スケール基準幅はコンテンツ 1200px + 左右ガター 40px×2
   = 1280px（= 80rem）とし、1280px 以下では html の font-size を 100vw / 80 に
   連動させて rem 参照している全寸法を比率維持で縮める。
   max-width: 75rem のコンテナは中央寄せ済みのため、余り（片側 2.5rem 相当 =
   基準幅で40px）が常にガターとしてコンテンツの外側に残る。
   下限は calc(1rem * 768 / 1280) = 9.6px（768px幅=コンテンツ720px相当）。
   768px未満はSP未実装の間この下限で固定し、横スクロールで全体へ到達できる。
   ※ html の font-size 内の rem は初期値16pxを指す（自己参照にならない）。 */
@media (max-width: 1280px) {
  html {
    font-size: max(calc(100vw / 80), calc(1rem * 768 / 1280));
  }
}

/* 装飾はキャンバス（90rem）の外にも意図的にブリードしており、Figmaでは
   キャンバス端でクリップされる。ビューポート端で同様にクリップして
   横スクロールバーの発生を防ぐ。
   html は hidden：iPad Safari はルートの clip では横パンを止められないため。
   body は clip のまま（スクロールコンテナを作らない） */
html {
  overflow-x: hidden;
}

body {
  overflow-x: clip;
}

/* レスポンシブ第2フェーズ（SP）: 767px以下はSPデザイン（基準幅 390px）へ切替。
   390px では 1rem = 16px（SPデザインのpx値 ÷ 16 = rem）。
   389px以下は PC と同じ考え方で 100vw に連動させ、rem 参照している全寸法を
   比率維持で縮める（100vw / 24.375 = 390pxで16px。24.375 = 390 / 16）。
   391〜767px は 1rem = 16px 固定のまま、% 幅の要素が伸びる。
   各セクションの SP レイアウトはファイル末尾の SP ブロックで上書きする。 */
@media (max-width: 767px) {
  html {
    font-size: min(1rem, calc(100vw / 24.375));
  }
  /* ※ .page-canvas の min-width / margin-left 解除は、本体の定義より後で
     上書きする必要があるためファイル末尾の SP ブロックで行う */
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: #050505;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* iPad Safariはhtml/bodyのoverflow-xをビューポートの横パン抑止に
   反映しないため、ルート以外の要素でクリップする（非ルートのclipは
   iOSでも確実に効く）。キャンバス幅の指定はbodyから.page-canvasへ移動 */
.page-clip {
  overflow-x: clip;
}

.page-canvas {
  min-width: 90rem;
  /* ビューポートがキャンバス（90rem）より狭い間は、キャンバスを左へ半分ずらして
     左右の装飾ブリードを均等にクリップする（そのままだと右側だけがはみ出す）。
     90rem 以上では 0 になり通常フローに戻る */
  margin-left: min(0rem, calc((100vw - 90rem) / 2));
}

/* 装飾配置用レール：コンテンツ幅(1200px)を基準に中央配置するレイヤー。
   子要素は left/top を「Figma座標 - 120px」で指定する */
.deco-rail {
  position: absolute;
  left: 50%;
  top: 0;
  width: 75rem;
  height: 100%;
  margin-left: -37.5rem; /* transformだと子のmix-blend-modeが背景と合成されなくなるためmarginで中央寄せ */
  pointer-events: none;
}

/* 半透明の円装飾 */
.circle-deco {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

/* ---------- 装飾アニメーション ----------
   --dur / --delay をインラインで上書きして個体差を出す */

/* 円系: ふわふわ浮遊 */
@keyframes deco-float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  33% {
    transform: translateY(-0.875rem) translateX(0.375rem);
  }
  66% {
    transform: translateY(-0.25rem) translateX(-0.375rem);
  }
}

.anim-float {
  animation: deco-float var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
}

/* ネオン系: 不規則な点滅 */
@keyframes deco-flicker {
  0%,
  100% {
    opacity: 1;
  }
  38% {
    opacity: 1;
  }
  39% {
    opacity: 0.3;
  }
  40.5% {
    opacity: 1;
  }
  42% {
    opacity: 0.55;
  }
  43% {
    opacity: 1;
  }
  71% {
    opacity: 1;
  }
  72% {
    opacity: 0.35;
  }
  73.5% {
    opacity: 1;
  }
  76% {
    opacity: 0.7;
  }
  77% {
    opacity: 1;
  }
}

.anim-flicker {
  animation: deco-flicker var(--dur, 4.5s) linear var(--delay, 0s) infinite;
}

/* 星系: チカチカしながら揺れ回転 */
@keyframes deco-twinkle {
  0%,
  100% {
    transform: rotate(-8deg) scale(1);
    opacity: 1;
  }
  20% {
    opacity: 0.45;
  }
  50% {
    transform: rotate(8deg) scale(1.08);
    opacity: 1;
  }
  72% {
    opacity: 0.6;
  }
}

.anim-twinkle {
  animation: deco-twinkle var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}

/* ---------- インビュー表示（JSで .js-reveal を付与） ---------- */
.js-reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.js-reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* 表示完了後はtransitionを外し、合成レイヤーを解放して描画を通常に戻す */
.js-reveal.reveal-done {
  transition: none;
}

/* ネオンボタンはreveal完了後もhover拡大用のtransitionを維持する */
.neon-button.js-reveal.reveal-done {
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .anim-float,
  .anim-flicker,
  .anim-twinkle,
  .neon-button:hover .neon-button__ring::before {
    animation: none;
  }

  .neon-button:hover {
    transform: none;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

img {
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ---------- Utility ---------- */
/* SVG書き出し時のグロー余白ぶんはみ出して配置するためのラッパー */
.bleed {
  position: absolute;
}

.bleed > img {
  width: 100%;
  height: 100%;
}

/* ---------- ネオングロー ----------
   SVG内のfilter(ドロップシャドウ)はiOS Safariが低解像度でラスタライズして
   ガビガビになるため、SVGからは除去しCSSのdrop-shadowで再現する。
   値は元のfilter定義そのまま: stdDeviation10 → blur 20px = 1.25rem。
   同一shadowの連結はグロー強度の重ね掛け(Figmaのエフェクト複数掛けに対応)。 */
img[src*="arrow-down-sp.svg"],
img[src*="arrow-down-triple.svg"],
img[src*="btn-totop.svg"],
img[src*="cta-bolt1.svg"],
img[src*="cta-bolt3.svg"],
img[src*="cta-deco1.svg"],
img[src*="cta-deco3.svg"],
img[src*="icon-sparkle.svg"] {
  filter: drop-shadow(0 0 1.25rem #ff69b7) drop-shadow(0 0 1.25rem #ff69b7) drop-shadow(0 0 1.25rem #ff69b7);
}

img[src*="solution-arrow.svg"] {
  filter: drop-shadow(0 0 1.25rem #ff69b7) drop-shadow(0 0 1.25rem #ff69b7);
}

/* neon-line / neon-line2 / arrow-step は@2x.webpにグローを焼き込み済み。
   CSSのdrop-shadowはWebKit(iPad Safari)が周囲のreveal/常時アニメーションで
   要素を合成レイヤーへ昇格させた際にグロー描画領域を切り詰めるため使わない */

img[src*="mv-underline.svg"] {
  filter: drop-shadow(0 0 1.25rem #33c9ff) drop-shadow(0 0 1.25rem #33c9ff) drop-shadow(0 0 1.25rem #33c9ff);
}

img[src*="bubble-gakusei.svg"] {
  filter: drop-shadow(0 0 1.25rem #33c9ff) drop-shadow(0 0 1.25rem #33c9ff);
}

img[src*="deco-star3.svg"],
img[src*="deco-star4.svg"] {
  filter: drop-shadow(0 0 1.25rem #f1ff2b) drop-shadow(0 0 1.25rem #f1ff2b);
}

img[src*="cta-star.svg"],
img[src*="deco-star5.svg"],
img[src*="deco-stroke.svg"],
img[src*="mv-dotline-l.svg"],
img[src*="mv-dotline-r.svg"],
img[src*="plus-divider.svg"] {
  filter: drop-shadow(0 0 1.25rem #f1ff2b);
}

img[src*="mv-swoosh.svg"] {
  filter: drop-shadow(0 0 1.25rem #ffb30b) drop-shadow(0 0 1.25rem #ffb30b);
}

/* SVGからラスター化した画像は、SVGのpreserveAspectRatio(meet)と
   同じ挙動になるようcontainで嵌め込む。SPでflex-shrinkにより枠が潰れても
   アスペクト比を維持する(旧SVGはこれを暗黙にやっていた)。
   ※写真系の@2x.webpを巻き込まないよう対象アセットを列挙する */
img[src*="card-neon-border@2x.webp"],
img[src*="cta-bolt2@2x.webp"],
img[src*="cta-bolt4@2x.webp"],
img[src*="cta-deco2@2x.webp"],
img[src*="cta-deco4@2x.webp"],
img[src*="deco-star1@2x.webp"],
img[src*="deco-star2@2x.webp"],
img[src*="icon-check@2x.webp"],
img[src*="neon-line@2x.webp"],
img[src*="neon-line2@2x.webp"],
img[src*="arrow-step@2x.webp"] {
  object-fit: contain;
}

/* 回転要素ラッパー（回転後バウンディングボックスの中央に配置） */
.problem__deco-rot {
  position: relative;
}

.problem__deco-rot > img {
  width: 100%;
  height: 100%;
}

/* ---------- Neon Button ---------- */
.neon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  padding: 1.125rem 4.625rem;
  border: 0.375rem solid transparent;
  border-radius: 3.125rem;
  /* drop-shadowはiOS Safariでタイル境界により途切れるためbox-shadowで描く */
  box-shadow: 0 0 0.9375rem #45ff2c;
  font-size: 1.33331rem;
  font-weight: 900;
  line-height: 1.9375rem;
  color: #fff;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

/* 枠グラデーションのクリップ領域（ボーダー領域まで覆う）。
   overflowはpadding boxでクリップされるため、ボタン自身ではなく
   この子要素でボーダー領域ごと切り抜く */
.neon-button__ring {
  position: absolute;
  inset: -0.375rem;
  overflow: hidden;
  z-index: -2;
  border-radius: 3.125rem;
  pointer-events: none;
}

/* 回転する正方形のグラデーション面（左#2cffce→右#45ff2cに見える） */
.neon-button__ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(150%, 8rem);
  aspect-ratio: 1 / 1;
  background: conic-gradient(from 270deg, #2cffce, #45ff2c 50%, #2cffce);
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 黒い中面（枠の内側） */
.neon-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 2.75rem;
  background-color: #050505;
  box-shadow: inset 0 0 0.25rem 0 #45ff2c;
}

.neon-button:hover {
  transform: scale(1.05);
}

.neon-button:hover .neon-button__ring::before {
  /* 白いハイライトの光を混ぜて周回を分かりやすく */
  background: conic-gradient(
    from 270deg,
    #45ff2c 0deg,
    #2cffce 150deg,
    #d6fff2 180deg,
    #2cffce 210deg,
    #45ff2c 360deg
  );
  animation: neon-button-spin 3.5s linear infinite;
}

@keyframes neon-button-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.neon-button--small {
  padding: 0.375rem 2.125rem;
}

/* ---------- Section Heading ---------- */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  max-width: 75rem;
  padding: 0 1rem;
}

.section-heading__line img {
  object-fit: cover;
}

/* インビュー時に中央から左右へ伸びる（上下同タイミング） */
.section-heading.js-reveal .section-heading__line img {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.section-heading.js-reveal.is-inview .section-heading__line img {
  transform: scaleX(1);
}

.section-heading.js-reveal.reveal-done .section-heading__line img {
  transition: none;
}

.section-heading__line--top {
  transform: scaleY(-1);
}

.section-heading__line--top img {
  width: 36.625rem;
  height: 2.6875rem;
}

.section-heading__line--bottom img {
  width: 50rem;
  height: 3.6875rem;
}

.section-heading__title {
  width: 62.9375rem;
  font-size: 2.66669rem;
  font-weight: 900;
  line-height: 4.00031rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 1.25rem #33c9ff;
}

/* ============================================================
   Header
============================================================ */
.site-header {
  /* z-index: 後続の.mvより手前に置き、下端ネオン線のグローが
     セクション境界で塗り潰されないようにする */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem 0 1rem;
  /* overflowは指定しない: ネオン線のグロー(drop-shadow)を境界外へ逃がす。
     iPad Safariはclip/visibleの軸別混在を両軸clip扱いにするため、
     clipとの併用は不可。横のはみ出しはhtmlのoverflow-x:hiddenが受ける */
}

.site-header__container {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  width: 100%;
  max-width: 75rem;
}

.site-header__logo {
  position: relative;
  flex: 1 0 0;
  height: 3rem;
}

.site-header__logo a {
  position: absolute;
  left: 0.6875rem;
  top: -1.53125rem;
  display: block;
  width: 10.375rem;
  height: 5.75rem;
  overflow: hidden;
}

.site-header__logo img {
  width: 10.375rem;
  height: 6.875rem; /* 元画像比率(350:232)のまま幅166pxに拡大し、下側だけ枠でクロップ */
}

.site-header__nav {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.global-nav {
  display: flex;
  gap: 3rem;
  align-items: center;
  height: 3.4375rem;
}

.global-nav__item {
  position: relative;
  font-size: 1.14312rem;
  font-weight: 900;
  line-height: 1.829rem;
  white-space: nowrap;
}

.global-nav__item a {
  transition: opacity 0.2s ease, text-shadow 0.2s ease;
}

.global-nav__item a:hover {
  opacity: 0.85;
  text-shadow: 0 0 0.75rem #33c9ff, 0 0 0.75rem #33c9ff;
}

.global-nav__item::before {
  content: "";
  display: block;
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.125rem;
  height: 2.5rem;
  background-color: #fff;
}

.global-nav__item:last-child::after {
  content: "";
  display: block;
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.125rem;
  height: 2.5rem;
  background-color: #fff;
}

.global-nav__item:first-child {
  margin-left: 1.5rem;
}

.global-nav__item:last-child {
  margin-right: 1.5rem;
}

.site-header__line {
  position: relative;
  width: 75rem;
  height: 0;
}

/* ============================================================
   MV
============================================================ */
.mv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  padding: 0 5rem;
  background-color: #050505;
  overflow: clip;
}

.mv__taxi {
  position: absolute;
  left: 44.125rem;
  top: 13.5rem;
  width: 36.875rem;
  height: 36.875rem;
}

.mv__taxi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: hard-light;
}

.mv__ellipse13 {
  position: absolute;
  left: -5.75rem;
  top: 0.0625rem;
  width: 16.24762rem;
  height: 16.24762rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv__ellipse13-inner {
  width: 13.87169rem;
  height: 13.87169rem;
  transform: rotate(-169.08deg);
}

.mv__ellipse13-inner img {
  width: 100%;
  height: 100%;
}

.mv__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 75rem;
  padding: 2.5rem 0;
}

.mv__ellipse14 {
  position: absolute;
  left: 71.3125rem;
  top: 8.5rem;
  width: 7.75rem;
  height: 7.75rem;
}

.mv__ellipse14 img {
  width: 100%;
  height: 100%;
}

.mv__title img {
  width: 48.3125rem;
  height: 16.625rem;
  object-fit: cover;
}

.mv__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  width: 75rem;
  padding-left: 2.5rem;
}

.mv__headline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.mv__lead {
  margin-bottom: 0.5rem;
  font-size: 2rem;
  font-weight: 900;
  line-height: 3.2rem;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #33c9ff;
}

.mv__price-row {
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
  margin-bottom: 5rem;
}

.mv__price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-right: -1.5rem;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #33c9ff, 0 0 1.25rem #33c9ff, 0 0 1.25rem #33c9ff;
}

.mv__price-num {
  font-size: 4.5rem;
  line-height: 4.5rem;
}

.mv__price-unit {
  font-size: 2.5rem;
  line-height: 4.5rem;
}

.mv__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.01963rem;
  height: 4.58794rem;
  transform: rotate(0.25deg);
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.5rem;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #33c9ff, 0 0 1.25rem #33c9ff, 0 0 1.25rem #33c9ff;
}

.mv__underline {
  position: absolute;
  left: 0.76313rem;
  top: 7.06813rem;
  width: 36.25075rem;
  height: 6.28444rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}


.mv__scenes {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

.mv-scene {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.mv-scene__icon {
  display: block;
  width: 1.67081rem;
  height: 1.69131rem;
}

.mv-scene__icon img {
  width: 100%;
  height: 100%;
}

.mv-scene__text {
  font-size: 1.33331rem;
  font-weight: 900;
  line-height: 1.9375rem;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #45ff2c, 0 0 1.25rem #45ff2c;
}

.mv__scene-divider {
  position: relative;
  width: 2rem;
  height: 3.5rem;
}

.mv__bubble {
  position: absolute;
  left: 34.5rem;
  top: 19.9375rem;
  width: 13.625rem;
  height: 4.5625rem;
}

.mv__bubble-bg {
  position: absolute;
  left: -0.125rem;
  top: 0.0625rem;
  width: 11.75rem;
  height: 4.5rem;
}

.mv__bubble-text {
  position: absolute;
  left: 2rem;
  top: -0.1875rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.56rem;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #33c9ff, 0 0 1.25rem #33c9ff;
}

.mv__swoosh {
  position: absolute;
  left: 55.375rem;
  top: 8.16188rem;
  width: 19.64337rem;
  height: 7.72213rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv__swoosh-inner {
  position: relative;
  width: 19.34175rem;
  height: 6.81137rem;
  transform: rotate(-177.28deg) scaleY(-1);
}

.mv__ellipse4 {
  position: absolute;
  left: -4.1875rem;
  top: 15.5rem;
  width: 3rem;
  height: 3rem;
}

.mv__ellipse4 img {
  width: 100%;
  height: 100%;
}

.mv__start {
  position: absolute;
  left: 58.125rem;
  top: 5.3125rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #ffb30b, 0 0 1.25rem #ffb30b;
}

.mv__start-date {
  line-height: 2rem;
}

.mv__start-label {
  line-height: 1.5rem;
}

/* ---------- MVイントロ演出（ページ表示時に一度だけ再生） ---------- */

/* バウンド付きポップイン */
@keyframes mv-intro-pop {
  0% {
    opacity: 0;
    transform: scale(0.6) rotate(-2deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* せり上がりフェード */
@keyframes mv-intro-rise {
  0% {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ネオン管の点灯（チカチカしてから安定） */
@keyframes mv-intro-neon-on {
  0%,
  12% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  22% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
  36% {
    opacity: 0.4;
  }
  46% {
    opacity: 1;
  }
  55% {
    opacity: 0.65;
  }
  64%,
  100% {
    opacity: 1;
  }
}

/* タクシーが右から走り込む（transform専用:
   img の mix-blend-mode を保つため親ではなく img 自身に適用する） */
@keyframes mv-intro-drive {
  0% {
    transform: translateX(150%);
  }
  75% {
    transform: translateX(-3%);
  }
  100% {
    transform: translateX(0);
  }
}

/* ただのフェードイン */
@keyframes mv-intro-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.mv__title {
  animation: mv-intro-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.mv__headline {
  animation: mv-intro-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* fill-modeがboth/forwardsだと終了後も transform が固定され
   hoverの scale(1.05) を上書きしてしまうため backwards にする
   （100%フレーム＝自然状態なので見た目は変わらない） */
.mv__body > .neon-button {
  animation: mv-intro-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.75s backwards;
}

.mv__taxi img {
  animation: mv-intro-drive 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* 吹き出しはDOM上は .mv__headline の外だが、同じ動き・同じタイミングで一体に見せる */
.mv__bubble {
  animation: mv-intro-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.mv__swoosh {
  animation: mv-intro-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s both;
}

.mv__start {
  animation: mv-intro-neon-on 0.9s linear 1s both;
}

/* 浮遊円: 既存のふわふわを維持しつつ遅れてフェードイン */
.mv .anim-float {
  animation:
    deco-float var(--dur, 8s) ease-in-out var(--delay, 0s) infinite,
    mv-intro-fade 0.8s ease-out 1.1s both;
}

@media (prefers-reduced-motion: reduce) {
  .mv__title,
  .mv__headline,
  .mv__body > .neon-button,
  .mv__taxi img,
  .mv__bubble,
  .mv__swoosh,
  .mv__start,
  .mv .anim-float {
    animation: none;
  }
}

/* ============================================================
   Problem
============================================================ */
.problem {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
  overflow: clip;
}

.problem__bg {
  position: absolute;
  left: calc(50% + 4.03125rem);
  top: 1.0675rem;
  width: max(102.0625rem, calc(100% + 12.0625rem));
  height: 55.3125rem;
  transform: translateX(-50%);
  opacity: 0.9;
  pointer-events: none;
}

.problem__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: difference;
}

.problem__bg-gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180.99deg, #050505 1.69%, rgba(0, 0, 0, 0.3) 31.98%, rgba(3, 3, 3, 0.1) 68.34%, #050505 98.63%);
}

.problem__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  padding: 5rem 0;
}

.problem__block {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  width: 75rem;
  max-width: 75rem;
  border-radius: 2.5rem;
}

.problem__row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 2.5rem 0;
  border-radius: 2.5rem;
  background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.45), rgba(168, 28, 255, 0.9));
}

.problem-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 20rem;
  padding: 2rem;
}

.problem-card__img {
  width: 8.0625rem;
  height: 8.625rem;
}

.problem-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.problem-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #33c9ff;
}

.problem-card__title {
  font-size: 2rem;
  font-weight: 900;
  line-height: 3.2rem;
}

.problem-card__text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
}

.problem__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.97956rem;
  height: 4.8125rem;
}

.problem__arrow-inner {
  position: relative;
  width: 4.8125rem;
  height: 3.97956rem;
  transform: rotate(90deg);
}

.problem__solution {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  width: 75rem;
  max-width: 75rem;
}

.problem__solution-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 23rem;
  height: 23rem;
  padding: 2.5rem 1rem;
  border-radius: 2.5rem;
}

.solution-card__border {
  position: absolute;
  left: -0.21875rem;
  top: -0.21375rem;
  width: 23.4375rem;
  height: 23.4375rem;
  pointer-events: none;
}

.solution-card__texts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

.solution-card__title {
  width: 100%;
  font-size: 2rem;
  font-weight: 900;
  line-height: 3.2rem;
  text-align: center;
  text-shadow: 0 0 1.25rem #ff69b7, 0 0 1.25rem #ff69b7, 0 0 1.25rem #ff69b7;
}

.solution-card__title-note {
  font-size: 0.7em;
}

.solution-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.14312rem;
  font-weight: 900;
  line-height: 1.829rem;
  text-align: center;
}

.problem__deco {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.problem__deco--e11 {
  left: -3.43938rem;
  top: 3.57563rem;
  width: 7.91894rem;
  height: 7.91894rem;
}

.problem__deco--e13 {
  left: 61.07187rem;
  top: 0.655rem;
  width: 13.56794rem;
  height: 13.56794rem;
}

.problem__deco--e16 {
  left: -3.8125rem;
  top: 48.49312rem;
  width: 16.76881rem;
  height: 16.76881rem;
}

.problem__deco--e18 {
  left: 64.98375rem;
  top: 59.48875rem;
  width: 12.92594rem;
  height: 12.92594rem;
}

.problem__deco--e17 {
  left: 68.125rem;
  top: 39.63rem;
  width: 7.7805rem;
  height: 7.7805rem;
}

.problem__deco--e14 {
  left: 71.6875rem;
  top: 11.505rem;
  width: 5.86269rem;
  height: 5.86269rem;
}

.problem__deco--star1 {
  left: 67.2275rem;
  top: 54.425rem;
  width: 7.38106rem;
  height: 7.30269rem;
}

.problem__deco--star2 {
  left: 4rem;
  top: 45.9425rem;
  width: 9.90012rem;
  height: 9.80237rem;
}

/* ============================================================
   Describe
============================================================ */
.describe {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
  justify-content: flex-start;
  height: 31.63162rem;
  padding: 1rem 0 5rem;
  /* overflowは指定しない: 上端ネオン線のグロー(drop-shadow)を境界外へ逃がす。
     iPad Safariはclip/visibleの軸別混在を両軸clip扱いにするため、
     clipとの併用は不可。横のはみ出しはhtmlのoverflow-x:hiddenが受ける */
  background-color: #050505;
}

.describe__line {
  position: relative;
  width: 75rem;
  height: 0;
}

/* 素材(1268×68px)は線本体1200px+左右各34pxの光彩余白を含むため、
   余白ぶん外側へ広げて線の端をコンテンツ幅(75rem)に揃える */
.describe__line .bleed {
  inset: -2.125rem -2.83%;
}

.describe__container {
  display: flex;
  gap: 5rem;
  align-items: center;
  flex: 1 0 0;
  width: 100%;
  max-width: 75rem;
}

.describe__main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: center;
  flex: 1 0 0;
}

.describe__heading {
  font-size: 2.66875rem;
  font-weight: 700;
  line-height: 3rem;
  white-space: nowrap;
  filter: drop-shadow(0 0 0.625rem #33c9ff);
}

.describe__body {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  width: 100%;
}

.describe__text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8rem;
}

.describe__img {
  flex: 1 0 0;
}

.describe__img img {
  width: 100%;
  height: auto;
}

/* ============================================================
   Line up
============================================================ */
.lineup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 0;
  background-color: #050505;
}

.lineup__container {
  width: 100%;
  max-width: 75rem;
}

.lineup__row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  width: 100%;
}

.lineup__card {
  flex: 1 0 0;
}

.lineup__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 198;
  object-fit: cover;
}

/* ============================================================
   Steps
============================================================ */
.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  padding: 5rem 0;
  background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.9), rgba(168, 28, 255, 0.9));
}

.steps__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  max-width: 75rem;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 52.5rem;
  border-radius: 1.5rem;
}

.step-card__main {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  min-height: 10.6875rem;
}

.step-card__number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 7.5rem;
  height: 7.5rem;
  border: 0.3125rem solid #fff;
  border-radius: 10rem;
  background-image: linear-gradient(224.67deg, rgba(163, 59, 255, 0.4) 31.07%, rgba(34, 170, 255, 0.4) 62.15%);
  box-shadow: 0 0 1.25rem 0 #ff69b7, 0 0 1.25rem 0 #ff69b7, 0 0 1.25rem 0 #ff69b7;
  white-space: nowrap;
}

.step-card__step {
  margin-bottom: -0.5rem;
  font-size: 1.14288rem;
  font-weight: 700;
  line-height: 1.71469rem;
}

.step-card__num {
  font-size: 2.66669rem;
  font-weight: 900;
  line-height: 4.00031rem;
}

.step-card__icon {
  flex-shrink: 0;
  width: 7.5rem;
  height: 7.5rem;
}

.step-card__icon img {
  width: 100%;
  height: 100%;
}

.step-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  flex: 1 0 0;
  padding: 1.5rem 0;
}

.step-card__title {
  width: 100%;
  font-size: 2rem;
  font-weight: 900;
  line-height: 3.2rem;
}

.step-card__title-note {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
}

.step-card__text {
  width: 100%;
  font-size: 1.14288rem;
  font-weight: 700;
  line-height: 1.71469rem;
}

.step-card__notes {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  min-height: 7.125rem;
  padding-bottom: 1.5rem;
}

.step-card__notes-inner {
  width: max-content;
}

.step-card__notes p {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4rem;
}

.steps__arrow {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.steps__arrow-box {
  position: relative;
  width: 2.58412rem;
  height: 3.125rem;
}

.steps__deco {
  position: absolute;
  left: 1.1875rem;
  top: 48.72937rem;
  width: 12.92594rem;
  height: 12.92594rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ============================================================
   Scenes（だから、こんなシーンで使える！）
============================================================ */
.scenes {
  position: relative;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 5rem 0;
  background-color: #050505;
}

.scenes__container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
  width: 75rem;
  max-width: 75rem;
}

.scenes__body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.scenes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  flex: 1 0 0;
}

.scene-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  align-self: start;
}

.scene-card--1 {
  grid-column: 1;
  grid-row: 1;
}

.scene-card--2 {
  grid-column: 2;
  grid-row: 1;
  padding-top: 3rem;
}

.scene-card--3 {
  grid-column: 3;
  grid-row: 1;
}

.scene-card__img {
  position: relative;
  width: 23.375rem;
  border-radius: 0.9375rem;
}

.scene-card__img img {
  width: 100%;
  height: auto;
  border-radius: 0.9375rem;
}

.scene-card__img--overlay img {
  object-position: bottom;
}

.scene-card__img--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.9375rem;
  background-image: linear-gradient(35.64deg, rgba(56, 22, 0, 0.1) 22.64%, rgba(255, 255, 255, 0) 67.2%);
}

.scene-card__text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
  white-space: nowrap;
}

.scenes__deco {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* アイコン＋バースト線をひとまとまりでパララックスさせるグループ */
.scenes__deco-group {
  position: absolute;
  pointer-events: none;
}

.scenes__deco-group--left {
  left: 1.625rem;
  top: 5.35438rem;
  width: 6.6875rem;
  height: 8.375rem;
}

.scenes__deco-group--right {
  left: 67.4375rem;
  top: 3.54188rem;
  width: 6.875rem;
  height: 11.15625rem;
}

.scenes__deco--star {
  left: 0;
  top: 0;
  width: 3.75rem;
  height: 2.8125rem;
}

.scenes__deco--mic {
  left: 1.875rem;
  top: 3.9375rem;
  width: 4.8125rem;
  height: 4.4375rem;
}

.scenes__deco--mic2 {
  left: 2.5625rem;
  top: 0;
  width: 4.31069rem;
  height: 4.65388rem;
}

.scenes__deco--thumb {
  left: 0;
  top: 5.095rem;
  width: 5.99981rem;
  height: 6.0625rem;
}

/* ============================================================
   Route（運行ルート）
============================================================ */
.route {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  padding-bottom: 5rem;
  overflow: clip;
  background-color: #050505;
}

.route__container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  width: 100%;
  max-width: 75rem;
}

.route__intro {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  width: 100%;
}

.route__text {
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
}

.route__map-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75rem;
  max-width: 75rem;
}

.route__map {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 75rem;
  height: 9.4375rem;
}

.route__line {
  position: absolute;
  left: 3.375rem;
  top: 4.16688rem;
  width: 67.5rem;
  height: 0;
}

.route__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border: 0.0625rem solid #fff;
  border-radius: 0.25rem;
  background-color: #050505;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
  white-space: nowrap;
}

.route__start {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  width: 5rem;
  border-radius: 6.25rem;
}

.route__start-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 6.25rem;
  background-color: #ba6bff;
  font-size: 1.33331rem;
  font-weight: 900;
  line-height: 1.9375rem;
  color: #050505;
}

.route__start-label {
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3125rem;
  text-align: center;
}

.route__goal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: flex-end;
  border-radius: 6.25rem;
}

.route__goal-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 6.25rem;
  background-color: #ff69b7;
  font-size: 1.33331rem;
  font-weight: 900;
  line-height: 1.9375rem;
  color: #050505;
}

.route__goal-label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3125rem;
  text-align: center;
  white-space: nowrap;
}

.route__stops {
  position: absolute;
  left: 50%;
  top: 3.1875rem;
  transform: translateX(-50%);
  display: flex;
  gap: 2rem;
  align-items: center;
}

.route__stop-group {
  display: flex;
  align-items: center;
}

.route-stop {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  border-radius: 6.25rem;
}

.route-stop__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 6.25rem;
  background-color: #fff;
  box-shadow: 0 0 0.625rem #ff69b7, 0 0 0.625rem #ff69b7, 0 0 0.625rem #ff69b7;
  font-size: 1.14312rem;
  font-weight: 900;
  line-height: 1.829rem;
  color: #050505;
  text-align: center;
}

.route-stop__label-box {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 2.5rem;
}

.route-stop__label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2rem;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 1.25rem #050505, 0 0 1.25rem #050505, 0 0 1.25rem #050505, 0 0 1.25rem #050505;
}

.route__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.25rem 3.75rem;
  border: 0.0625rem solid #050505;
  background-image: linear-gradient(183.54deg, #ff69b7 17.17%, #ba6bff 60.51%, rgba(186, 107, 255, 0.6) 82.54%);
}

.route__banner p {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
  color: #050505;
  white-space: nowrap;
}

/* ============================================================
   Info（運行情報）
============================================================ */
.info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  padding: 5rem 0;
  background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.9), rgba(168, 28, 255, 0.9));
  overflow: clip;
}

.info__container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  width: 75rem;
  max-width: 75rem;
}

.info__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60rem;
  padding: 1rem 2.5rem;
  border-radius: 5rem;
  background-color: #fff;
  /* drop-shadowはiOS Safariでinviewのtransitionと干渉して乱れるためbox-shadowで描く */
  box-shadow: 0 0 0.625rem #33c9ff;
}

.info-item {
  position: relative;
  display: flex;
  gap: 2.5rem;
  align-items: center;
  width: 50rem;
  padding: 1.5rem 0 1.5rem 1.5rem;
}

.info-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.125rem;
  background-image: repeating-linear-gradient(90deg, #050505 0, #050505 0.125rem, transparent 0.125rem, transparent 0.875rem);
}

.info-item--last::after {
  content: none;
}

.info-item__label {
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 10rem;
  padding-left: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
  color: #3392ff;
}

.info-item__value {
  width: 41rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
  color: #050505;
}

/* ※注記は折り返し行を※の後ろに揃えるぶら下げインデント */
.info-item__note {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

/* ============================================================
   FAQ
============================================================ */
.faq {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
  padding: 5rem 7.5rem 7.5rem;
  background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.9), rgba(168, 28, 255, 0.9));
}

.faq__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  width: 62.5rem;
}

.faq-item {
  width: 100%;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1.375rem;
  border: 0.125rem solid #fff;
  border-radius: 2.5rem;
  text-align: left;
}

.faq-item__q-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 41.55331rem;
}

.faq-item__q-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 6.25rem;
  background-color: #33c9ff;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 500;
  font-size: 1.14312rem;
  line-height: 1.829rem;
  color: #050505;
  text-align: center;
}

.faq-item__q-text {
  font-size: 1.14312rem;
  font-weight: 900;
  line-height: 1.829rem;
  color: #fff;
  white-space: nowrap;
}

.faq-item__icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 0.95588rem;
  height: 0.875rem;
}

/* 開閉アイコン（＋/−）: 横バーは固定、縦バーの回転で＋⇄−を遷移 */
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.20588rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__a-clip {
  overflow: hidden;
}

.faq-item__a-inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0 0.5rem 1.5rem;
}

.faq-item__a-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 6.25rem;
  background-color: #ff69b7;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 500;
  font-size: 1.14312rem;
  line-height: 1.829rem;
  color: #050505;
  text-align: center;
}

.faq-item__a-text {
  padding-top: 0.1875rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8rem;
}

.faq__deco {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.faq__deco--1 {
  left: 69rem;
  top: 15.58563rem;
  width: 13.56794rem;
  height: 13.56794rem;
}

.faq__deco--2 {
  left: -7.875rem;
  top: 52.27313rem;
  width: 18.51213rem;
  height: 18.51213rem;
}

.faq__deco--3 {
  left: 64.25rem;
  top: 51.14813rem;
  width: 18.51213rem;
  height: 18.51213rem;
}

.faq__deco--4 {
  left: 65.6875rem;
  top: 11.14813rem;
  width: 6.62006rem;
  height: 6.62006rem;
}

/* ============================================================
   CTA
============================================================ */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: center;
  justify-content: center;
  height: 30.5rem;
  padding: 5rem;
  overflow: clip;
  /* iPad Safariでmix-blend-modeが別レイヤーの背景に効かないバグ対策 */
  isolation: isolate;
}

.cta__bg {
  position: absolute;
  left: 50%;
  top: 0.02312rem;
  width: max(89.8125rem, 100%);
  height: 30.5rem;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

.cta__bg img {
  position: absolute;
  left: calc(50% + 0.09375rem);
  top: -13.75rem;
  width: max(90.875rem, calc(100% + 1.0625rem));
  height: 49.1875rem;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: bottom;
  mix-blend-mode: difference;
  opacity: 0.9;
}

.cta__frame {
  position: absolute;
  left: 8.375rem;
  top: 4.71063rem;
  width: 58rem;
  height: 21.125rem;
  border: 0.3125rem solid #fff;
  border-radius: 1.875rem;
  box-shadow: 0 0 1.25rem 0 #ffb30b, 0 0 1.25rem 0 #ffb30b;
  pointer-events: none;
}

.cta__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  width: 56rem;
  height: 19.25rem;
  max-width: 75rem;
  padding: 2.5rem 5rem;
  border-radius: 2.5rem;
}

.cta__container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2.5rem;
  /* 元はrgba(5,5,5,.8)→rgba(255,255,255,.8)のmultiply。iPad Safariは
     合成レイヤーを跨ぐmix-blend-modeが効かないため、数学的に等価な
     黒オーバーレイ(グレースケールのmultiply = 黒のnormal合成)に置換。
     α = 0.8×(1 - c/255): 上端c=5→α0.784、下端c=255→α0 */
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.784) 39.9%, rgba(0, 0, 0, 0));
  pointer-events: none;
}

.cta__heading {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  font-weight: 900;
  text-align: center;
}

.cta__title {
  min-width: 100%;
  font-size: 2.66669rem;
  line-height: 4.00031rem;
  text-shadow: 0 0 1.25rem #ff69b7, 0 0 1.25rem #ff69b7, 0 0 1.25rem #ff69b7;
}

.cta__subtitle {
  width: 48.75rem;
  max-width: 50rem;
  font-size: 1.6rem;
  line-height: 2.56rem;
}

.cta .neon-button {
  position: relative;
}

.cta__deco {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cta__deco--note {
  left: 59.5rem;
  top: 11.64813rem;
  width: 3.79944rem;
  height: 3.70587rem;
}

.cta__deco--l1 {
  left: 0.4725rem;
  top: 12.14813rem;
  width: 9rem;
  height: 8.5rem;
}

.cta__deco--l2 {
  left: -0.9375rem;
  top: 16.41437rem;
  width: 7.9425rem;
  height: 7.68606rem;
}

.cta__deco--r1 {
  left: 64.75rem;
  top: 11.21063rem;
  width: 9rem;
  height: 8.5rem;
}

.cta__deco--r2 {
  left: 67.21813rem;
  top: 15.47687rem;
  width: 7.9425rem;
  height: 7.68606rem;
}

/* ============================================================
   Footer
============================================================ */
.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 0;
  background-color: #050505;
}

.site-footer__container {
  display: flex;
  gap: 10rem;
  align-items: center;
  width: 75rem;
}

.site-footer__logo img {
  width: 13.0625rem;
  height: 7.8125rem;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  font-size: 1.14288rem;
  font-weight: 700;
  line-height: 1.71469rem;
  white-space: nowrap;
}

.site-footer__list a {
  transition: opacity 0.2s ease, text-shadow 0.2s ease;
}

.site-footer__list a:hover {
  opacity: 0.85;
  text-shadow: 0 0 0.75rem #33c9ff, 0 0 0.75rem #33c9ff;
}

.site-footer__list li {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.site-footer__copyright {
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
  color: #7d7d7d;
}

.site-footer__totop {
  position: absolute;
  left: 71.6875rem;
  top: 6.58563rem;
  width: 4.5rem;
  height: 4.5rem;
  pointer-events: auto;
}

/* ============================================================
   SP（767px以下 / 基準幅 390px・1rem = 16px）
   ※ rem 値は SPデザインの px ÷ 16
============================================================ */

/* SP専用要素・改行のPC側デフォルト */
.sp-only {
  display: none;
}

.br-sp {
  display: none;
}

.sp-menu-toggle {
  display: none;
}

@media (max-width: 767px) {
  .sp-only {
    display: block;
  }

  .br-sp {
    display: inline;
  }

  .br-pc {
    display: none;
  }

  .page-canvas {
    min-width: 0;
    margin-left: 0;
  }

  /* 装飾レールはビューポート幅基準に切替 */
  .deco-rail {
    left: 0;
    width: 100%;
    margin-left: 0;
  }

  .neon-button {
    padding: 1rem 5rem;
    border-width: 0.25rem;
    font-size: 1rem;
    line-height: 1.8rem;
    box-shadow: 0 0 0.46875rem #45ff2c;
  }

  /* ---------- Section Heading ---------- */
  .section-heading {
    gap: 0.25rem;
    padding: 0;
  }

  .section-heading__line--top img {
    width: 14.1875rem;
    height: 1.03919rem;
  }

  .section-heading__line--bottom img {
    width: 21.5rem;
    height: 1.5625rem;
  }

  .section-heading__title {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.25rem;
  }

  /* ---------- Header ---------- */
  .site-header {
    padding: 0;
    gap: 0;
    overflow: visible;
  }

  .site-header__container {
    position: relative;
    max-width: 100%;
    height: 3.75rem;
    padding: 0 1.25rem;
    gap: 0;
    justify-content: space-between;
    background-color: #000;
    border-bottom: 0.0625rem solid #fff;
  }

  .site-header__logo {
    flex: 0 0 auto;
    height: auto;
  }

  .site-header__logo a {
    position: static;
    width: 4.25rem;
    height: 2.875rem;
  }

  .site-header__logo img {
    width: 4.25rem;
    height: auto;
  }

  .site-header__nav {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 100;
    background-color: rgba(5, 5, 5, 0.97);
    border-bottom: 0.0625rem solid #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }

  body.is-menu-open .site-header__nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }

  .global-nav {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 0;
    padding: 0.5rem 0;
    opacity: 0;
    transform: translateY(-0.375rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  body.is-menu-open .global-nav {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
  }

  .global-nav__item {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
  }

  .global-nav__item:first-child {
    margin-left: 0;
  }

  .global-nav__item:last-child {
    margin-right: 0;
  }

  .global-nav__item::before,
  .global-nav__item:last-child::after {
    content: none;
  }

  .global-nav__item a {
    display: block;
    padding: 0.875rem 1.5rem;
  }

  .site-header .neon-button--small {
    display: none;
  }

  .site-header__line {
    display: none;
  }

  .sp-menu-toggle {
    position: relative;
    display: block;
    width: 1.5rem;
    height: 1.125rem;
  }

  .sp-menu-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.1875rem;
    border-radius: 0.09375rem;
    background-color: #fff;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .sp-menu-toggle__bar:nth-child(1) {
    top: 0;
  }

  .sp-menu-toggle__bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  .sp-menu-toggle__bar:nth-child(3) {
    bottom: 0;
  }

  body.is-menu-open .sp-menu-toggle__bar:nth-child(1) {
    transform: translateY(0.46875rem) rotate(45deg);
  }

  body.is-menu-open .sp-menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  body.is-menu-open .sp-menu-toggle__bar:nth-child(3) {
    transform: translateY(-0.46875rem) rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__nav,
    .global-nav,
    .sp-menu-toggle__bar {
      transition: none;
    }
  }

  /* ---------- MV ---------- */
  .mv {
    padding: 0 1.25rem;
  }

  .mv__container {
    max-width: 100%;
    padding: 0.625rem 0 1.5rem;
    gap: 0.5rem;
    align-items: center;
  }

  /* 391〜767px ではコンテンツをSPデザイン幅(350px)のまま中央寄せし、
     絶対配置の装飾（タクシー・START等）とのズレを防ぐ */
  .mv__title {
    width: 100%;
    max-width: 21.875rem;
  }

  .mv__title img {
    width: 100%;
    height: auto;
  }

  .mv__taxi {
    left: 50%;
    top: 7.3125rem;
    width: 17.125rem;
    height: 17.125rem;
    margin-left: -6.1875rem;
  }

  .mv__start {
    left: 50%;
    top: 9.125rem;
    margin-left: -9.6875rem;
    gap: 0.25rem;
    align-items: flex-start;
    font-size: 1rem;
  }

  .mv__start-date {
    line-height: 1.125rem;
  }

  .mv__start-label {
    line-height: 1.125rem;
  }

  .mv__swoosh {
    left: 50%;
    top: 11.1375rem;
    width: 4.82763rem;
    height: 1.67394rem;
    margin-left: -10.7rem;
  }

  .mv__swoosh-inner {
    width: 4.76419rem;
    height: 1.44938rem;
  }

  .mv__ellipse4 {
    left: 50%;
    top: 13.9375rem;
    margin-left: -9.1875rem;
  }

  .mv__ellipse13 {
    left: 50%;
    top: 0;
    width: 9.69963rem;
    height: 9.69963rem;
    margin-left: 4.375rem;
  }

  .mv__ellipse13-inner {
    width: 8.28125rem;
    height: 8.28125rem;
  }

  .mv__ellipse14 {
    left: 50%;
    top: 16.6875rem;
    width: 6.4375rem;
    height: 6.4375rem;
    margin-left: -13.5625rem;
  }

  .mv__bubble {
    left: 50%;
    top: 24.75rem;
    margin-left: 3.9rem;
    width: 8.175rem;
    height: 2.7375rem;
  }

  .mv__bubble-bg {
    left: -0.075rem;
    top: 0.0375rem;
    width: 7.05rem;
    height: 2.7rem;
  }

  .mv__bubble-text {
    left: 1.2rem;
    top: -0.1125rem;
    font-size: 0.96rem;
    line-height: 1.536rem;
  }

  .mv__body {
    width: 100%;
    max-width: 21.875rem;
    margin-top: 19.6rem;
    padding-left: 0;
    gap: 1.5rem;
    align-items: center;
  }

  .mv__headline {
    align-items: center;
    width: 100%;
  }

  .mv__lead {
    margin-bottom: 0;
    font-size: 1.33331rem;
    line-height: 1.9375rem;
  }

  .mv__price-row {
    margin-bottom: 2.5rem;
    padding: 0;
  }

  .mv__price {
    margin-right: -0.75rem;
  }

  .mv__price-num {
    font-size: 2.25rem;
    line-height: 3.2rem;
  }

  .mv__price-unit {
    font-size: 1.6rem;
    line-height: 2.56rem;
  }

  .mv__brand {
    width: auto;
    height: 3.29394rem;
    font-size: 2rem;
    line-height: 3.2rem;
  }

  .mv__underline {
    left: 50%;
    top: 3.9375rem;
    transform: translateX(-50%);
    width: 19.21031rem;
    height: 3.33025rem;
  }

  .mv__underline img {
    width: 100%;
    height: auto;
  }

  .mv__scenes {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    width: auto;
    margin: 0 auto;
  }

  .mv-scene__icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .mv-scene__text {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .mv__scene-divider {
    display: none;
  }

  .mv__dotline {
    position: absolute;
    top: 9rem;
    width: 5.81994rem;
    height: 3.98963rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mv__dotline--l {
    left: 0.08rem;
  }

  .mv__dotline--r {
    right: -0.25rem;
  }

  /* 元ベクターは縦長(39.33×76.96px)。Figmaの変形をそのまま適用する */
  .mv__dotline-rot {
    position: relative;
    width: 2.45819rem;
    height: 4.80969rem;
  }

  .mv__dotline--l .mv__dotline-rot {
    transform: rotate(126.06deg) skewX(11.45deg) scaleY(0.98);
  }

  .mv__dotline--r .mv__dotline-rot {
    transform: rotate(53.94deg) skewX(-11.45deg) scaleY(-0.98);
  }

  /* ---------- Problem ---------- */
  .problem__bg {
    left: 50%;
    top: -1.6875rem;
    width: max(86.1875rem, 150%);
    height: 46.6875rem;
  }

  .problem__inner {
    width: 100%;
    padding: 2.5rem 1.25rem;
    gap: 0.5rem;
  }

  .problem__block {
    width: 100%;
    gap: 1.5rem;
  }

  .problem__row {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 0 2.5rem;
  }

  .problem-card {
    width: 100%;
    height: auto;
    padding: 0;
    gap: 0.25rem;
  }

  .problem-card__img {
    width: 4rem;
    height: 4.25rem;
  }

  .problem-card__body {
    gap: 0.5rem;
  }

  .problem-card__title {
    font-size: 1.33331rem;
    line-height: 1.9375rem;
  }

  .problem-card__text {
    font-weight: 500;
    line-height: 1.5rem;
  }

  /* ※ .problem__arrow は js-reveal 対象で transform が上書きされるため、
     下向きへの回転は内側の SP 用要素に掛ける */
  .problem__arrow {
    width: 2.0625rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
  }

  .problem__arrow-inner {
    display: none;
  }

  .problem__arrow-sp {
    position: relative;
    width: 2.5rem;
    height: 2.0625rem;
    transform: rotate(90deg);
  }

  .problem__solution {
    width: 100%;
    gap: 0.25rem;
  }

  .problem__solution-row {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 2rem;
  }

  .solution-card {
    width: 100%;
    height: auto;
    padding: 1.5rem 0;
    gap: 0.5rem;
    border-radius: 1.25rem;
  }

  .solution-card__border {
    display: none;
  }

  /* Figma書き出しの丸ドット枠線(rx20/白/線幅4/round/dasharray 1 10)。
     カードは幅・高さ可変のためrectを100%追従にしたインラインSVGで描く */
  .solution-card__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 0.625rem #ff69b7);
  }

  .solution-card__texts {
    gap: 1rem;
  }

  .solution-card__title {
    font-size: 1.33331rem;
    line-height: 1.9375rem;
  }

  .solution-card__text {
    height: auto;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
  }

  /* SPで残す装飾のみ再配置（横位置はビューポート右端基準）し、他は非表示 */
  .problem__deco--e11 {
    left: auto;
    right: -7.39rem;
    top: 6rem;
  }

  .problem__deco--star1 {
    left: auto;
    right: -0.3125rem;
    top: 59.225rem;
    width: 6.33725rem;
    height: 6.27463rem;
  }

  .problem__deco--star2 {
    left: -0.5rem;
    top: 80.475rem;
    width: 6.33725rem;
    height: 6.27463rem;
  }

  .problem__deco--star3 {
    display: flex;
    left: auto;
    right: 0.625rem;
    /* セクション高さはコンテンツ依存で変動し、top固定だとoverflow:clipで
       下端が見切れるため、下端基準で配置する */
    top: auto;
    bottom: 1.25rem;
    width: 6.33725rem;
    height: 6.27463rem;
  }

  .problem__deco--e13,
  .problem__deco--e16,
  .problem__deco--e18,
  .problem__deco--e17,
  .problem__deco--e14 {
    display: none;
  }

  /* ---------- Describe ---------- */
  .describe {
    height: auto;
    padding: 1rem 1.25rem 2.5rem;
    gap: 1rem;
  }

  /* SPデザインでは上部ネオンラインなし（写真から始まる） */
  .describe__line {
    display: none;
  }

  .describe__container {
    flex-direction: column;
    gap: 1rem;
  }

  .describe__img {
    order: -1;
    flex: none;
    width: 100%;
  }

  .describe__main {
    flex: none;
    width: 100%;
    gap: 1.5rem;
  }

  .describe__heading {
    font-size: 1.33331rem;
    line-height: 1.9375rem;
  }

  .describe__body {
    gap: 1.5rem;
    align-items: center;
  }

  /* ---------- Line up（SPデザインでは非表示） ---------- */
  .lineup {
    display: none;
  }

  /* ---------- Steps ---------- */
  .steps {
    padding: 2.5rem 1.25rem;
    gap: 1.5rem;
  }

  .steps .circle-deco {
    display: none;
  }

  .steps__deco {
    left: -0.375rem;
    top: 17.9rem;
    width: 6.70231rem;
    height: 6.70231rem;
  }

  .steps__deco .problem__deco-rot {
    width: 100% !important;
    height: 100% !important;
  }

  .steps__deco--sp2 {
    display: flex;
    left: -0.875rem;
    top: 51.7rem;
    width: 6.70231rem;
    height: 6.70231rem;
  }

  .steps__deco--sp3 {
    display: flex;
    left: auto;
    right: -0.125rem;
    top: 45.3rem;
    width: 6.70231rem;
    height: 6.70231rem;
  }

  .steps__body {
    gap: 1rem;
  }

  .step-card {
    width: 100%;
  }

  .step-card__main {
    flex-wrap: wrap;
    gap: 1rem;
    min-height: 0;
    padding: 0;
  }

  .step-card__number {
    width: 2rem;
    height: 2rem;
    border-width: 0.125rem;
    box-shadow: 0 0 0.625rem 0 #ff69b7;
  }

  .step-card__step {
    display: none;
  }

  .step-card__num {
    font-size: 1.14312rem;
    line-height: 1.829rem;
  }

  .step-card__icon {
    display: none;
  }

  .step-card__body {
    display: contents;
  }

  .step-card__title {
    flex: 1 0 0;
    width: auto;
    font-size: 1.33331rem;
    line-height: 1.9375rem;
  }

  .step-card__title-note {
    display: block;
    font-size: 1rem;
    line-height: 1.8rem;
  }

  .step-card__text {
    width: 100%;
    font-size: 1rem;
    line-height: 1.8rem;
    padding: 0;
  }

  .step-card__text br:not(.br-keep) {
    display: none;
  }

  .step-card__notes {
    min-height: 0;
    padding: 0.5rem 0 0;
  }

  .step-card__notes-inner {
    width: 100%;
  }

  .step-card__notes p {
    padding-left: 1em;
    font-size: 0.75rem;
    line-height: 1.2rem;
    text-indent: -1em;
  }

  .steps__arrow-box {
    width: 2.0625rem;
    height: 2.5rem;
  }

  /* ---------- Scenes ---------- */
  .scenes {
    padding: 2.5rem 0;
  }

  .scenes__container {
    width: 100%;
    gap: 1.5rem;
    padding: 0 1.25rem;
  }

  .scenes__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .scene-card {
    width: 100%;
    gap: 0.5rem;
  }

  .scene-card--2 {
    padding-top: 0;
  }

  .scene-card__img {
    width: 100%;
  }

  .scenes__deco-group--left {
    left: 1.5rem;
    top: 3.3rem;
    width: 2.3rem;
    height: 1.9rem;
  }

  .scenes__deco--star {
    width: 2.27725rem;
    height: 1.83556rem;
  }

  .scenes__deco--mic {
    display: none;
  }

  .scenes__deco-group--right {
    left: auto;
    right: 1.5rem;
    top: 2.82rem; /* 左の星と見た目の垂直中心が揃う位置（回転星の外接ボックスは縦長） */
    width: 2.6rem;
    height: 2.8rem;
  }

  .scenes__deco--mic2 {
    left: 0;
    top: 0;
    transform: scale(0.6);
    transform-origin: 0 0;
  }

  .scenes__deco--thumb {
    display: none;
  }

  /* ---------- Route ---------- */
  .route {
    position: relative;
    gap: 1.5rem;
    padding: 2.5rem 0;
  }

  .route__deco {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .route__deco--e13 {
    left: auto;
    right: -2.975rem;
    top: 23.375rem;
    width: 10.10009rem;
    height: 10.10009rem;
  }

  .route__deco--e14 {
    left: -2.25rem;
    top: 40.875rem;
    width: 9.69963rem;
    height: 9.69963rem;
  }

  .route__deco--e15 {
    left: 1.9375rem;
    top: 48.1875rem;
    width: 4.20481rem;
    height: 4.20481rem;
  }

  .route__container {
    gap: 1.5rem;
    padding: 0 1.25rem;
  }

  .route__intro {
    gap: 1.5rem;
  }

  .route__map-wrap {
    width: 100%;
  }

  .route__map {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
    width: 100%;
    height: auto;
  }

  /* デザインはPCと同じ白1pxの直線を縦に使用。
     丸数字の中心（=線）を画面中央に置き、各行は中心からの距離で配置する */
  .route__line {
    left: 50%;
    top: 1.625rem;
    width: 0.0625rem;
    height: 46.625rem;
    background-color: #fff;
  }

  .route__line .bleed {
    display: none;
  }

  /* DOM順は line→start→goal→stops のため order で 乗車地→経由地→終点 に並べ替え。
     margin-left はマップフレーム基準の Figma 座標 */
  /* 丸の中心が50%に来る位置（バッジ+間隔+丸半径 = 7.5625rem を差し引く） */
  .route__start {
    order: 1;
    flex-direction: row;
    gap: 1rem;
    width: auto;
    margin-left: calc(50% - 7.5625rem);
  }

  /* 縦並びレイアウトに合わせて矢印を下向きにする */
  .route__start-circle {
    transform: rotate(90deg);
  }

  .route__badge {
    padding: 0.25rem 1rem;
    font-size: 1rem;
    line-height: 1.8rem;
  }

  .route__start-label {
    width: auto;
    height: auto;
    line-height: 1.3125rem;
  }

  /* relative にして絶対配置の線より前面に出す（static だと線が数字の上に描画される） */
  .route__stops {
    order: 2;
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-left: 0;
    margin-left: calc(50% - 0.9375rem);
  }

  .route__stop-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .route-stop {
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    width: auto;
    min-height: 2.5rem;
  }

  .route-stop__label-box {
    height: auto;
    align-items: center;
  }

  .route-stop__label {
    font-size: 0.875rem;
    line-height: 1.2rem;
    text-align: left;
  }

  /* 終点サークル（バッジ64px + 間隔16px + 半径26px = 6.625rem）の中心が50%に乗る位置 */
  .route__goal {
    order: 3;
    flex-direction: row;
    gap: 1rem;
    margin-left: calc(50% - 6.625rem);
  }

  .route__goal-label {
    text-align: left;
  }

  .route__banner {
    padding: 0.5rem 0;
    margin-top: 1.5rem;
  }

  .route__banner p {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  /* ---------- Info ---------- */
  /* SPデザインでは背景はグラデーションなしの黒 */
  .info {
    padding: 2.5rem 0;
    background-image: none;
    background-color: #050505;
  }

  .info .circle-deco {
    display: none;
  }

  .info__container {
    width: 100%;
    gap: 1.5rem;
    padding: 0 1.25rem;
  }

  .info__panel {
    width: 100%;
    padding: 0.25rem 1.25rem;
    border-radius: 1.25rem;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 1rem 0;
  }

  .info-item__label {
    width: auto;
    padding-left: 0;
  }

  .info-item__value {
    width: 100%;
    font-weight: 500;
    line-height: 1.5rem;
  }

  /* ---------- FAQ ---------- */
  .faq {
    padding: 2.5rem 1.25rem 3.75rem;
  }

  .faq__body {
    width: 100%;
    gap: 1.5rem;
  }

  /* SPは角丸枠ではなく、項目下の白い区切り線のみのリスト形式 */
  .faq-item__question {
    padding: 0.75rem 0;
    border: none;
    border-bottom: 0.0625rem solid #fff;
    border-radius: 0;
  }

  .faq-item__q-inner {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
    gap: 0.75rem;
  }

  .faq-item__q-text {
    white-space: normal;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .faq-item__icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  .faq-item__icon::before,
  .faq-item__icon::after {
    width: 0.875rem;
    height: 0.1875rem;
    border-radius: 0.09375rem;
  }

  .faq-item__a-inner {
    gap: 0.75rem;
    padding: 0.75rem 0 0.25rem;
  }

  .faq-item__a-text {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .faq__deco {
    display: none;
  }

  /* ---------- CTA ---------- */
  .cta {
    height: auto;
    padding: 2.5rem 1.5rem;
  }

  .cta__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .cta__bg img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-position: center;
  }

  .cta__frame {
    display: none;
  }

  .cta__container {
    width: 100%;
    height: auto;
    padding: 2.5rem 1.25rem;
    gap: 1.5rem;
  }

  /* 元はrgba(5,5,5,.8) 53.85%→rgba(5,5,5,.56)のmultiply。等価な黒normal:
     α = 1-(a×c/255+1-a): 上端a=.8,c=5→0.784、下端a=.56,c=5→0.549 */
  .cta__container::before {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.784) 53.85%, rgba(0, 0, 0, 0.549));
  }

  .cta__heading {
    gap: 0.5rem;
  }

  .cta__title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.56rem;
  }

  .cta__subtitle {
    width: 100%;
    max-width: none;
    font-size: 1rem;
    line-height: 1.8rem;
  }

  .cta__deco .problem__deco-rot {
    width: 100% !important;
    height: 100% !important;
  }

  /* 稲妻はPC用アセット（.cta__deco）を隠し、
     SPデザインのベクター（.cta__bolt）を左右のビューポート端基準で配置 */
  .cta__deco--note {
    display: none;
  }

  .cta__deco--l1,
  .cta__deco--l2,
  .cta__deco--r1,
  .cta__deco--r2 {
    display: none;
  }

  .cta__bolt {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .cta__bolt .bleed {
    position: absolute;
  }

  .cta__bolt--l1 {
    left: 1.75rem;
    top: 10.64375rem;
    width: 3.375rem;
    height: 3.1875rem;
  }

  .cta__bolt--l2 {
    left: 1.25rem;
    top: 12.23063rem;
    width: 2.94519rem;
    height: 2.85013rem;
  }

  .cta__bolt--r1 {
    right: 1.6875rem;
    top: 10.64375rem;
    width: 3.375rem;
    height: 3.1875rem;
  }

  .cta__bolt--r2 {
    right: 1.2125rem;
    top: 12.23063rem;
    width: 2.94519rem;
    height: 2.85013rem;
  }

  /* 回転前の素のベクター寸法（回転後が外側ボックスに収まる） */
  .cta__bolt-rot {
    position: relative;
    width: 2.41031rem;
    height: 2.27125rem;
  }

  .cta__bolt-rot--lg {
    width: 3.375rem;
    height: 3.1875rem;
  }

  /* ---------- Footer ---------- */
  .site-footer {
    padding: 2.5rem 0 6.5rem;
  }

  .site-footer__container {
    width: 100%;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 0 2.5rem;
  }

  .site-footer__logo {
    display: none;
  }

  .site-footer__list {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 1rem;
  }

  .site-footer__sep {
    display: none;
  }

  .site-footer__list li::before {
    content: "|";
    margin-right: 1rem;
  }

  .site-footer__copyright {
    padding: 1.5rem 2.5rem 0;
    font-size: 0.875rem;
  }

  .site-footer__totop {
    left: auto;
    right: 1.625rem;
    top: auto;
    bottom: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
  }
}