@charset "UTF-8";
/*----------------------------
    KV
----------------------------*/
.kv-section {
  background-color: var(--color-bg);
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  position: relative;
}
/* SP は canvas の下に旧 MV のタイトルを並べるので、高さは画面ではなく幅で決める */
@media only screen and (max-width: 767px) {
  .kv-section {
    --kv-sp-height: calc(600 / 390 * 100vw);
    height: var(--kv-sp-height);
    min-height: 0;
  }
}

/* ── canvas（写真 → キラキラ → イラスト） ── */
.kv-stage {
  position: absolute;
  inset: 0;
}
.kv-stage__canvas,
.kv-stage__fallback {
  display: block;
  height: 100%;
  width: 100%;
}
.kv-stage__fallback {
  object-fit: cover;
}
/* canvas ではシェーダーで描いている暗がり（kv.js の SHADE_PC）を、代わりの画像には CSS で重ねる */
@media only screen and (min-width: 768px) {
  .kv-stage.is-fallback::after {
    background-image: linear-gradient(163.26deg, transparent 59.05%, rgb(0 0 0 / .4) 93.12%);
    content: "";
    inset: 0;
    position: absolute;
  }
}

/* ── タイトル（スプラッシュ後も残る） ── */
/* ロゴは字形の端で切った SVG なので、位置と幅は Urbanist Medium 64px の字形の端から割り出した値 */
.kv-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(9 / 1440 * 100vw);
  position: absolute;
  right: calc(24 / 1440 * 100vw);
  bottom: calc(15.6 / 1440 * 100vw);
  z-index: 1;
}
.kv-title__logo {
  display: block;
  fill: var(--color-white);
  overflow: visible;
  width: calc(307.8 / 1440 * 100vw);
}
/* ロゴとキャッチの左端をそろえる。ロゴの E は枠より 3.8px 右から始まるので、キャッチをその分左へ出す */
.kv-title__catch {
  color: var(--color-white);
  font-size: max(12px, var(--size-24));
  font-weight: 500;
  line-height: 1.75;
  margin-left: calc(-3.8 / 1440 * 100vw);
  white-space: nowrap;
}
/* SP は canvas の下の .kv-intro に見た目を任せる。h1 を1つにするため、ここは読み上げ用に残して見た目だけ消す */
@media only screen and (max-width: 767px) {
  .kv-title {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
  }
}

/* ── スプラッシュ ── */
/* 再生しないとき（同一セッション2回目以降・JS が無効）は出さない */
html:not(.is-kv-splash) .kv-splash {
  display: none;
}
.is-kv-splash {
  overflow: hidden;
}
/* kv.js が初期状態を入れるまでの間に、完成形が一瞬見えないようにする。右下タイトルとヘッダーはスプラッシュの後に出す */
.is-kv-splash .kv-splash__letter,
.is-kv-splash .kv-splash__catch,
.is-kv-splash .kv-splash__person,
.is-kv-splash .kv-splash__illust,
.is-kv-splash .kv-title {
  opacity: 0;
}
/* common.css の .home .header { opacity: 0 } は旧 FV の JS がヘッダーを出す前提。新 KV ではスプラッシュ再生中だけ隠す */
.home .header {
  opacity: 1;
}
.is-kv-splash .header {
  opacity: 0;
  visibility: hidden;
}

/* 盤面をカンプの比率のまま画面に contain で収めるため、親の高さを cqh で参照する。
   SP では canvas の section が画面より低いので、スプラッシュは section ではなく画面に合わせる。
   bottom: 0 だとツールバーの伸縮で盤面が動くので高さは svh で固定する */
.kv-splash {
  background-color: var(--color-bg);
  container-type: size;
  display: grid;
  place-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  z-index: 2;
}
.kv-splash__board {
  --board-w: 1440;
  --board-h: 780;
  aspect-ratio: var(--board-w) / var(--board-h);
  container-type: inline-size;
  position: relative;
  width: min(100cqw, 100cqh * var(--board-w) / var(--board-h));
}
@media only screen and (max-width: 767px) {
  .kv-splash__board {
    --board-w: 390;
    --board-h: 640;
  }
}

/* ロゴは行送り込みのテキストと同じ高さで組むので、SVG にした分の下余白を gap に足す */
.kv-splash__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(50.57 / 1440 * 100cqi);
  position: absolute;
  left: 50%;
  top: 35.42%;
  transform: translate(-50%, -50%);
}
.kv-splash__logo-svg {
  display: block;
  overflow: visible;
  width: calc(529.3 / 1440 * 100cqi);
}
.kv-splash__catch {
  color: var(--color-primary);
  font-size: calc(34 / 1440 * 100cqi);
  font-weight: 500;
  line-height: 1.75;
  white-space: nowrap;
  /* 末尾の「。」は字面の右に空白があり、枠でセンターにすると左に寄って見えるので、字面がセンターになるようずらす。
     translate は GSAP がインラインで none にして transform に寄せるため使えない */
  position: relative;
  left: 0.4em;
}
@media only screen and (max-width: 767px) {
  .kv-splash__logo {
    gap: calc(27.18 / 390 * 100cqi);
    top: 51.76%;
  }
  .kv-splash__logo-svg {
    width: calc(305.8 / 390 * 100cqi);
  }
  .kv-splash__catch {
    font-size: calc(20 / 390 * 100cqi);
  }
}

.kv-splash__people,
.kv-splash__illusts {
  list-style: none;
}
.kv-splash__person,
.kv-splash__illust {
  position: absolute;
  left: calc(var(--x) / var(--board-w) * 100%);
  top: calc(var(--y) / var(--board-h) * 100%);
  width: calc(var(--w) / var(--board-w) * 100%);
}
.kv-splash__person img,
.kv-splash__illust img {
  display: block;
  height: auto;
  width: 100%;
}

.kv-splash__person--01 { --x: 398; --y: 497.26; --w: 208.45; }
.kv-splash__person--02 { --x: 639.54; --y: 473; --w: 202.94; }
.kv-splash__person--03 { --x: 875.57; --y: 497.26; --w: 165.44; }

.kv-splash__illust--01 { --x: 122; --y: 120; --w: 265.37; }
.kv-splash__illust--02 { --x: 119; --y: 410; --w: 244.72; }
.kv-splash__illust--03 { --x: 1057.02; --y: 63.95; --w: 334.36; }
.kv-splash__illust--04 { --x: 1118.99; --y: 379; --w: 275.31; }

.kv-splash__person--01-sp { --x: 5; --y: 454.05; --w: 120.69; }
.kv-splash__person--02-sp { --x: 144.84; --y: 440; --w: 117.49; }
.kv-splash__person--03-sp { --x: 281.49; --y: 454.05; --w: 95.78; }

.kv-splash__illust--01-sp { --x: 0; --y: 24.85; --w: 141.24; }
.kv-splash__illust--02-sp { --x: 130; --y: 108.29; --w: 95.29; }
.kv-splash__illust--03-sp { --x: 209.86; --y: 39.26; --w: 107.73; }
.kv-splash__illust--04-sp { --x: 289.28; --y: 124.69; --w: 87.72; }

/* ── SP: canvas の下のタイトル（.sp-only。display はここで指定しない） ── */
/* 中の z-index を閉じ込め、fixed のスプラッシュより上に出ないようにする。
   背景色が無いと、後ろの固定背景（.parallax-bg）の写真が透けて見える */
.kv-intro {
  background-color: var(--color-white);
  isolation: isolate;
  /* 下の余白を中の margin で取ると .kv-intro の外へ抜け、白の背景がない所から後ろの写真が見えるので padding で取る */
  padding-block: 10px 72px;
  position: relative;
}
/* KV の高さが vw で決まり、下の .concept-section との境目が小数の位置に来る。iOS Safari ではそこに隙間が描かれ、後ろの .parallax-bg が線に見えるので、境目を白でまたいでふさぐ。
   margin で重ねると .concept-section の余白が変わるので使わない */
.kv-intro::after {
  background-color: var(--color-white);
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}
.kv-intro__logo {
  font-family: var(--font-en);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.1;
  margin-left: 20px;
}
.kv-intro__catch {
  font-size: 18px;
  font-weight: 500;
  margin: 5px 0 0 20px;
}