/* =================================================================
 * c-kv — TOP ヒーロー（KV）  Figma: 2943:125959
 *
 * 構成（オーバーレイ型。.c-kv は display:contents の論理ラッパで、
 *  子は .element-top の flex / 絶対配置にそのまま参加する＝レイアウト不変）:
 *   .c-kv__bg        ヒーロー背景画像 kv-bg.svg（PC: flex order2 / min-height900）
 *   .c-kv__circles   左の円形画像クラスタ（element-top基準で絶対配置）
 *   .c-kv__title     右のタイトルオーバーレイ（中に注意喚起バナー）
 *   .c-kv__alert     注意喚起バナー（title基準で絶対配置）
 *
 * ※ PC実表示は @media(min-width:1024px) で element-top が縦flex化し KV→NEWS→本文の
 *    自然積みになる（bridgeの「TOPレイアウト崩れ修正」を踏襲）。order/position はそれに整合。
 * ※ TOP では .top-pc（PC表示）専用。SP表示は別 blade（front/top/mobile）が担当。
 * ※ 大見出しは KV 専用の特大ディスプレイ字（tokens h1=56pxとは別）なので実値指定。
 * 色は原則 tokens.css 経由（#ff7c43 の影色のみ KV 固有のため実値）。
 * =================================================================*/

.c-kv {
  display: contents;
}

/* ---------- 背景（kv-bg.svg） ----------
   KV 内に「鋭い曲線パターン＋ベースグラデ」を一枚で敷く層。Figma 5693:90817
   相当の役割で、viewport 固定の c-top-bg（淡いピーチ）の上に乗る。KV と一緒に
   スクロールするため、画面下方では上に流れ去って消える＝下層の c-top-bg だけが
   残るパララックス挙動になる。 */
.c-kv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  overflow: hidden;
  z-index: 1;
}

@media (min-width: 1024px) {
  /* PC: 絶対起点を解除し flex の自然積み（order2）に戻す。
     KV帯の高さもステージ（title/circles）と同じ --kv-scale で連動。
     kv-bg.svg は natural 1440×1070（ratio 0.743）のため、何もしないと
     bg高さ＝viewport幅×0.743 で title/circles の scale より大きく残り、
     狭い幅ほど bg だけ間延びして見える（alert バナー下の空白が広い）。
     max-height: 1070rem * scale で bg を縮め、object-fit:cover で
     画像下端を自然にクリップする。 */
  .c-kv__bg {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-height: calc(1070rem * var(--kv-scale, 1));
    min-height: calc(900rem * var(--kv-scale, 1));
    object-fit: cover;
    object-position: top center;
    z-index: 1;
  }
}

/* ---------- ステージ（1440px 設計キャンバス） ----------
   円クラスタ＋タイトルを 1440px の論理キャンバスに載せ、PC は中央寄せ＋等比スケール。
   13インチ等の狭い幅でも円とタイトルの相対関係（重なり/隙間）を保ったまま縮小する。
   既定は display:contents の論理ラッパなので、SP では従来どおり子が直接レイアウトに参加する。 */
.c-kv__stage {
  display: contents;
}

@media (min-width: 1024px) {
  /* PC: stage は display:contents のまま（中央寄せ＋中央基点scaleを廃止）。
     旧実装は stage を 1440px 中央配置→中心基点scaleしていたが、
     端に置いたタイトル(右)・円クラスタ(左)が幅縮小時に中央寄りへドリフトする問題があった。
     代わりに .c-kv__title / .c-kv__circles をそれぞれ viewport 右端/左端アンカーで
     個別 scale（origin: top right / top left）。これで両端の位置はFigma準拠で固定し、
     縮小は各自の端を基点に進むため Figma の「タイトル右端＝viewport 右端」が全幅で保たれる。 */
  .c-kv__stage {
    display: contents;
  }

  /* ビューポート幅に応じた縮小率（1440px 設計を基準に段階的に追従）。
     .c-kv は display:contents だが custom property は子（bg/title/circles）へ継承される。 */
  .c-kv { --kv-scale: 0.72; }
}

@media (min-width: 1140px) { .c-kv { --kv-scale: 0.80; } }
@media (min-width: 1260px) { .c-kv { --kv-scale: 0.88; } }
@media (min-width: 1360px) { .c-kv { --kv-scale: 0.95; } }
@media (min-width: 1440px) { .c-kv { --kv-scale: 1; } }

/* ---------- 左：円形画像クラスタ ---------- */
.c-kv__circles {
  position: absolute;
  top: 189rem;
  left: -35rem;
  width: 858rem;
  height: 793rem;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 1024px) {
  /* PC: 左端アンカーで等比縮小。中央基点だと幅縮小時に右寄りへドリフトしてしまう。 */
  .c-kv__circles {
    transform: scale(var(--kv-scale, 1));
    transform-origin: top left;
  }
}

.c-kv__circle {
  position: absolute;
  box-sizing: border-box;
}

.c-kv__circle-mask {
  position: relative;                    /* 内部の写真を絶対配置で重ねる土台 */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 10rem 10rem 0 #ff7c43;     /* KV固有のオフセット影色（パレット外）。border-radius変形に追従 */
  aspect-ratio: 1;
}

/* マスク内の写真：複数枚を重ねてクロスフェードで切り替える（is-active のみ表示）。
   1枚しか無い場合も is-active が付くので常時表示。切替の駆動は JS（[data-kv-mask]）。 */
.c-kv__circle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(0.03deg);          /* 縁のジャギ低減 */
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* Figma指定: フェード0.5s ease-in-out */
}

.c-kv__circle-img.is-active {
  opacity: 1;
}

.c-kv__circle--1 { width: 350rem; height: 350rem; top: 0;     left: 0;     z-index: 3; }
.c-kv__circle--2 { width: 440rem; height: 440rem; top: 21rem;  left: 418rem; z-index: 4; }
.c-kv__circle--3 { width: 240rem; height: 240rem; top: 403rem; left: 82rem;  z-index: 1; }
.c-kv__circle--4 { width: 300rem; height: 300rem; top: 493rem; left: 360rem; z-index: 2; }

/* ---------- 右：タイトルオーバーレイ ---------- */
.c-kv__title {
  position: absolute;
  top: 0;
  right: 0;
  width: 560rem;
  height: 1070rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 40rem;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 1024px) {
  /* PC: 右端アンカーで等比縮小。Figma の「タイトル右端＝viewport 右端」を全幅で保つ。 */
  .c-kv__title {
    transform: scale(var(--kv-scale, 1));
    transform-origin: top right;
  }
}

/* タイトルのマスクリベール用ラッパ。通常時は透過（レイアウト不変）、
   イントロ時のみ overflow:hidden になり中の __t-inner が下から滑り上がる。 */
.c-kv__t-reveal {
  display: inline-flex;
}

.c-kv__t-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20rem;
  position: relative;
}

.c-kv__t-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

/* 1行目グループ（テキスト + ドット） */
.c-kv__t-group {
  position: relative;
  width: 465rem;
  height: 87rem;
  margin-right: -2rem;
}

.c-kv__t-heading1 {
  position: absolute;
  top: 11rem;
  left: 0;
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 54rem;
  letter-spacing: 4.32rem;
  line-height: 75.6rem;
  white-space: nowrap;
}

.c-kv__t-dots {
  display: flex;
  width: 195rem;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 193rem;
}

.c-kv__t-dot {
  display: inline-block;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background-color: var(--color-white);
}

/* 2行目（バッジ + する） */
.c-kv__t-row2 {
  display: inline-flex;
  align-items: center;
  gap: 10rem;
  padding: 6rem 0;
  position: relative;
  flex: 0 0 auto;
}

.c-kv__t-badge {
  display: inline-flex;
  align-items: center;
  gap: 50rem;
  padding: 10rem 28rem;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--color-white);
  border-radius: 34.29rem 34.29rem 34.29rem 0;
}

.c-kv__t-badge-txt {
  position: relative;
  width: fit-content;
  margin-top: -1.07rem;
  color: var(--color-key);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 58rem;
  text-align: center;
  letter-spacing: 5.8rem;
  line-height: 81.2rem;
  white-space: nowrap;
}

.c-kv__t-suru {
  position: relative;
  width: fit-content;
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 60rem;
  text-align: center;
  letter-spacing: 7.2rem;
  line-height: 84rem;
  white-space: nowrap;
}

/* 3行目 */
.c-kv__t-row3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.c-kv__t-heading3 {
  position: relative;
  width: fit-content;
  margin-top: -2.14rem;
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 66rem;
  letter-spacing: 9.24rem;
  line-height: 92.4rem;
  white-space: nowrap;
}

/* サブテキスト */
.c-kv__t-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18rem;
  padding: 24rem 0;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top: 2rem solid var(--color-white);
}

.c-kv__t-sub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15rem;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.c-kv__t-p {
  position: relative;
  width: fit-content;
  margin-top: -1.07rem;
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 16.9rem;
  text-align: center;
  line-height: 16.9rem;
  white-space: nowrap;
}

.c-kv__t-s1 { letter-spacing: 0.43rem; }
.c-kv__t-s2 { letter-spacing: -0.86rem; }
.c-kv__t-s3 { letter-spacing: -0.29rem; }

.c-kv__t-subline {
  position: relative;
  width: fit-content;
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: 16.9rem;
  text-align: center;
  letter-spacing: 2.54rem;
  line-height: 16.9rem;
  white-space: nowrap;
}

/* ---------- 注意喚起バナー（ステージ外・全幅コンテナ基準で絶対配置） ----------
   Figma(2943:126016)では x=820 / 幅620 ＝ 右端1440で 1440px キャンバスの右端ぴったり
   （左だけ角丸＝画面右端にブリード）。ステージ内(right:0)に置くと「中央±720×scale」の
   ステージ右端に貼り付くため、ビューポート幅が 1440px 以外だと右側に隙間が空く。
   そこでステージ外（.c-kv 直下＝position:relative の .element-top）に出し right:0 で
   常にビューポート右端へアンカー。垂直位置とサイズだけ --kv-scale でステージに連動させる
   （transform-origin:top right で右端を固定したまま等比縮小＝右端の隙間が出ない）。 */
.c-kv__alert {
  position: absolute;
  top: calc(825rem * var(--kv-scale, 1));
  right: 0;
  transform: scale(var(--kv-scale, 1));
  transform-origin: top right;
  z-index: 3;
  display: flex;
  width: 580rem;
  align-items: center;
  gap: 16rem;
  padding: 24rem 16rem 24rem 24rem;
  background-color: var(--color-white);
  border-radius: 16rem 0 0 16rem;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
}

.c-kv__alert:hover {
  opacity: 0.85;
}

.c-kv__alert-inner {
  display: flex;
  gap: 20rem;
  flex: 1;
  flex-grow: 1;
  align-items: center;
  position: relative;
}

.c-kv__alert-label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  flex: 0 0 auto;
  position: relative;
}

.c-kv__alert-dot {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, var(--color-orange-01) 0%, var(--color-key) 100%);
  flex-shrink: 0;
}

.c-kv__alert-label-txt {
  width: fit-content;
  color: var(--color-key);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 13rem;
  letter-spacing: 0.65rem;
  line-height: 23.4rem;
  white-space: nowrap;
}

.c-kv__alert-sep {
  position: relative;
  width: 1px;
  height: 12rem;
  background-color: var(--color-neutral-01);
  flex-shrink: 0;
}

.c-kv__alert-body {
  display: flex;
  gap: 4rem;
  flex: 1;
  flex-grow: 1;
  align-items: center;
  position: relative;
}

.c-kv__alert-msg {
  flex: 1;
  color: var(--color-neutral-01);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: 12rem;
  letter-spacing: 0.6rem;
  line-height: 21.6rem;
}

.c-kv__alert-icon {
  position: relative;
  width: 14rem;
  height: 14rem;
  flex-shrink: 0;
}

/* =================================================================
 * SP（TOP モバイル）— .SP ツリー専用オーバーライド
 *   front/top/mobile に c-kv を @include した際の SP レイアウト。
 *   Figma SP: 3092:69996（幅390 / KV枠=770px / タイトル→円クラスタ→注意喚起の縦積み）。
 *   旧 .SP .kv / .title / .frame*（top-sp/top-main.css）からの移植。
 *   ※ すべて .SP にスコープし PCツリー(.top-pc .c-kv)には一切影響させない。
 *      .SP は 992px 超で display:none のため媒体クエリは不要（表示切替に委ねる）。
 * =================================================================*/

/* KV枠：770pxヒーロー（display:contents を解除して実ボックス化）。
   ブリッジが .SP を flow 化し frame-10 に z-index:2 を与えるため、KVは
   position:relative の通常フロー塊にする（absoluteにすると frame-10 の背面に隠れる）。
   ※ 地色のソフトピーチは viewport 固定の .c-top-bg が担う（ここでは透過）。
   　 鋭い曲線オーバーレイは .c-kv__bg img（kv-bg.svg）が SP でも担当。 */
.SP .c-kv {
  display: block;
  position: relative;
  width: 100%;
  height: 770rem;
  overflow: hidden;
  z-index: 1;
  background-color: transparent;
}

/* SP: KV 内の曲線パターン img を 770rem 枠ぴったりに被せる */
.SP .c-kv__bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---------- 円形画像クラスタ（SP配置） ---------- */
.SP .c-kv__circles {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 1;
}

.SP .c-kv__circle-mask {
  box-shadow: 6rem 6rem 0 #ff7c43;   /* SPは6px（PCは10px） */
}

.SP .c-kv__circle--1 { width: 110rem; height: 110rem; top: 365rem; left: 24rem;  z-index: 3; }
.SP .c-kv__circle--2 { width: 170rem; height: 170rem; top: 350rem; left: 195rem; z-index: 4; }
.SP .c-kv__circle--3 { width: 100rem; height: 100rem; top: 520rem; left: 70rem;  z-index: 2; }
.SP .c-kv__circle--4 { width: 120rem; height: 120rem; top: 530rem; left: 200rem; z-index: 1; }

/* ---------- タイトル ---------- */
/* タイトルラッパを dissolve し、中の t-inner と alert を .c-kv 直下の絶対配置にする
   （PCは alert が title 内基準だが、SPは枠下部の独立カードにするため） */
.SP .c-kv__title {
  display: contents;
}

/* SP: 位置決め・影・重なりは __t-reveal（マスク外側）に持たせる。
   こうすることでイントロ時に __t-reveal が overflow:hidden になっても、
   ドロップシャドウ自体はマスクの外＝クリップされずに描画される。 */
.SP .c-kv__t-reveal {
  position: absolute;
  top: calc(50% - 275px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  filter: drop-shadow(0 2rem 12rem rgba(51, 51, 51, 0.18));
}

.SP .c-kv__t-inner {
  position: static;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 13rem;
}

.SP .c-kv__t-main {
  gap: 8rem;
  padding-left: 2rem;
}

/* 1行目グループ：DOMは「見出し→ドット」なので column-reverse でドットを上に置く */
.SP .c-kv__t-group {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6rem;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
}

.SP .c-kv__t-heading1 {
  position: static;
  font-size: 34rem;
  letter-spacing: 1.7rem;
  line-height: 47.6rem;
}

.SP .c-kv__t-dots {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28rem;
  width: auto;
}

.SP .c-kv__t-dot {
  width: 7rem;
  height: 7rem;
}

/* 2行目（デザイン バッジ ＋ する） */
.SP .c-kv__t-row2 {
  gap: 8rem;
  padding: 4rem 0;
}

.SP .c-kv__t-badge {
  gap: 30.75rem;
  padding: 6rem 20rem;
  border-radius: 24rem 24rem 24rem 0;
}

.SP .c-kv__t-badge-txt {
  margin-top: -0.66rem;
  font-size: 34rem;
  letter-spacing: 4.08rem;
  line-height: 47.6rem;
}

.SP .c-kv__t-suru {
  font-size: 36rem;
  letter-spacing: 4.32rem;
  line-height: 50.4rem;
}

/* 3行目（総合メーカー） */
.SP .c-kv__t-row3 {
  gap: 5.27rem;
}

.SP .c-kv__t-heading3 {
  margin-top: -1.32rem;
  font-size: 42rem;
  letter-spacing: 3.78rem;
  line-height: 50.4rem;
}

/* サブテキスト（区切り線つき・2行） */
.SP .c-kv__t-sub {
  min-height: 62rem;
  gap: 11.07rem;
  padding: 14rem 0;
}

.SP .c-kv__t-sub-inner {
  gap: 10rem;
}

.SP .c-kv__t-p,
.SP .c-kv__t-subline {
  width: 100%;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 1.65;
  text-align: center;
  /* Figma(SP)通りサブテキストは各行1行で固定（改行位置の崩れ＝QA No.34）。
     旧 max-width:300rem + white-space:normal だと1行目が途中で折り返し3行化していた。 */
  white-space: nowrap;
}

.SP .c-kv__t-p { margin-top: -0.66rem; }

/* PC用の字詰め微調整spanはSPでは均一に戻す */
.SP .c-kv__t-s1,
.SP .c-kv__t-s2,
.SP .c-kv__t-s3 { letter-spacing: 0.48rem; }

/* ---------- 注意喚起バナー（枠下部の独立カード・縦組み） ---------- */
.SP .c-kv__alert {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 60rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(350px, calc(100% - 32px));
  gap: 12rem;
  padding: 10rem 16rem;
  border-radius: 16rem;
  box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.SP .c-kv__alert-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.SP .c-kv__alert-label {
  gap: 5.28rem;
}

.SP .c-kv__alert-sep {
  display: none;   /* SPはラベルと本文を縦積み・区切り線なし */
}

.SP .c-kv__alert-body {
  gap: 4rem;
  width: 100%;
}

.SP .c-kv__alert-label-txt,
.SP .c-kv__alert-msg {
  font-size: 12rem;
  line-height: 21.6rem;
}

.SP .c-kv__alert-icon {
  width: 13.2rem;
  height: 13.2rem;
}

/* =================================================================
 * イントロアニメーション（初回表示時のみ）  Figma: 5693:89391
 *
 *  - 曲線（うねうね線）の「描画」アニメは対象外。背景模様は一括フェードイン。
 *  - そのあと少し遅延させて 写真（円クラスタ）→ タイトル → 注意喚起。
 *  - タイトルは「マスクで下から滑り上げ（ぬるり）」: __t-reveal を overflow:hidden に、
 *    中の __t-inner を translate:0 100% から 0 へスライドして“隠し板の下から”現れる。
 *  - 写真・注意喚起は「下から少し上へ」フェードイン（rise）。全体 ~1.5s 以内。
 *  - html.kv-intro は TOP 初回表示時のみ head のインライン script が付与する
 *    （sessionStorage で 2 回目以降は付与しない＝再生しない）。CSS が head で
 *    読まれた時点で fill-mode:both の 0% 状態が初回ペイントに乗る＝ちらつき無し。
 *    再生完了後は scripts 側がクラスを外す＝overflow:hidden を残さない（SP の影クリップ回避）。
 *  - 移動は transform ではなく独立した `translate` プロパティで行い、既存の
 *    transform:scale / translateX と合成する。
 *  - prefers-reduced-motion: reduce のときは一切再生せず自然表示（初期 hidden を残さない）。
 *  - PC（.top-pc）/ SP（.SP）どちらの c-kv にも同じ html.kv-intro で効く。
 * =================================================================*/
@media (prefers-reduced-motion: no-preference) {
  @keyframes c-kv-intro-rise {
    from { opacity: 0; translate: 0 24rem; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes c-kv-intro-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* マスクの“下”から滑り上がる（__t-reveal の overflow:hidden に隠れて出てくる） */
  @keyframes c-kv-intro-reveal {
    from { translate: 0 100%; }
    to   { translate: 0 0; }
  }

  /* ① 背景模様：曲線は描かず一括フェードイン（最初の beat） */
  html.kv-intro .c-kv__bg {
    animation: c-kv-intro-fade 0.6s ease both;
  }

  /* ② 写真（円クラスタ）：❶❷❸❹ の順に下から少し上へ */
  html.kv-intro .c-kv__circle {
    animation: c-kv-intro-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.kv-intro .c-kv__circle--1 { animation-delay: 0.25s; }
  html.kv-intro .c-kv__circle--2 { animation-delay: 0.35s; }
  html.kv-intro .c-kv__circle--3 { animation-delay: 0.45s; }
  html.kv-intro .c-kv__circle--4 { animation-delay: 0.55s; }

  /* ③ タイトル：マスクで下から滑り上げ（ぬるり） */
  html.kv-intro .c-kv__t-reveal {
    overflow: hidden;
  }
  html.kv-intro .c-kv__t-inner {
    animation: c-kv-intro-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.6s;
  }

  /* ④ 注意喚起バナー（❺）：少し遅れて下から上へ */
  html.kv-intro .c-kv__alert {
    animation: c-kv-intro-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.95s;
  }
}

/* =================================================================
 * イントロ終了後のループアニメーション  Figma: 5693:89851
 *
 *  - Blob アニメーション：各円マスクの border-radius をゆるく変形し、正円から
 *    不定形へ揺らぐ（4 つは別キーフレーム／別 duration で同じ形に揃わない）。
 *    box-shadow（オレンジのオフセット影）も border-radius に追従して一緒に揺れる。
 *    ※ Figma は SVG clipPath morphing を例示するが、既存のオフセット影（box-shadow）を
 *      保つため border-radius 変形で同等表現とした（軽量・影が形に追従する利点）。
 *  - 写真切り替え：マスク内の複数 <img> を JS が is-active で巡回しクロスフェード
 *    （表示2〜3s・フェード0.5s ease-in-out・マスク毎に時間差。CSS 側は .c-kv__circle-img
 *      の opacity transition が担当）。画像が1枚のときは切り替わらない。
 *  - 正円スタート：0%/100% を border-radius:50% にしてイントロ終端（正円）から連続。
 *  - prefers-reduced-motion: reduce では変形させない（正円のまま）。
 * =================================================================*/
@keyframes c-kv-blob-1 {
  0%, 100% { border-radius: 50%; }
  33%      { border-radius: 57% 43% 47% 53% / 53% 48% 52% 47%; }
  66%      { border-radius: 45% 55% 54% 46% / 47% 52% 48% 53%; }
}
@keyframes c-kv-blob-2 {
  0%, 100% { border-radius: 50%; }
  30%      { border-radius: 46% 54% 56% 44% / 55% 46% 54% 45%; }
  60%      { border-radius: 55% 45% 44% 56% / 46% 54% 46% 54%; }
}
@keyframes c-kv-blob-3 {
  0%, 100% { border-radius: 50%; }
  40%      { border-radius: 54% 46% 45% 55% / 48% 55% 45% 52%; }
  70%      { border-radius: 44% 56% 53% 47% / 56% 44% 56% 44%; }
}
@keyframes c-kv-blob-4 {
  0%, 100% { border-radius: 50%; }
  35%      { border-radius: 48% 52% 56% 44% / 44% 53% 47% 56%; }
  65%      { border-radius: 56% 44% 46% 54% / 54% 47% 53% 46%; }
}

@media (prefers-reduced-motion: no-preference) {
  .c-kv__circle--1 .c-kv__circle-mask { animation: c-kv-blob-1 14s ease-in-out infinite; }
  .c-kv__circle--2 .c-kv__circle-mask { animation: c-kv-blob-2 17s ease-in-out infinite; }
  .c-kv__circle--3 .c-kv__circle-mask { animation: c-kv-blob-3 13s ease-in-out infinite; }
  .c-kv__circle--4 .c-kv__circle-mask { animation: c-kv-blob-4 19s ease-in-out infinite; }
}