@charset "UTF-8";

/* =========================================================
   FANTASTIC JUNCTION - LP style
   モノクロ手描き / Convergence + Kiwi Maru
   ========================================================= */

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body,
h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- variables ---------- */
:root {
  --color-ink: #1a1a1a;
  --color-ink-2: #1f1f1f;
  --color-bg: #ffffff;
  --color-gray: #8a8a8a;
  --color-line: #1a1a1a;
  /* 手描き線の基準幅。Featuresのカード枠（js/main.js の buildOutline stroke-width:1.4）に合わせる。
     FB「線の太さがフィグマ上では同じなのにサイトだとバラバラ→Featuresの線に合わせる」対応 */
  --line-w: 1.4px;
  --color-accent: #e60012; /* 差し色（キャラの赤） */
  /* Featuresバッジ01〜03の色（Figma 721:368）。Artwork/Press Kitの四隅ドットもこの値を使う
     ＝FB「四隅の点の色をFeaturesの番号と同じカラーコードに」対応（2026-09-07） */
  --color-badge-pink: #d85681;
  --color-badge-blue: #53abd9;
  --color-badge-green: #85bc8d;

  /* 'YakuHanJP'は約物のみ半角詰め→残りはConvergence/Kiwi Maruへフォールバック */
  --font-en: 'YakuHanJP', 'Convergence', 'Kiwi Maru', sans-serif;
  --font-jp: 'YakuHanJP', 'Kiwi Maru', serif;

  --max-width: 1200px;
  --pc-padding: 40px;
  /* Figma SP(334-1077)：各セクションの中身は x36 から始まる（Outlineの表のみ x32） */
  --sp-padding: 36px;

  --header-h: 84px;
}

/* ---------- base ---------- */
body {
  font-family: var(--font-jp);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 15px;
  /* 横あふれをクリップ（Sound等の狭幅はみ出し・装飾を全幅で抑制）。ルート(html)がvisibleなので
     viewportに伝播しbody自体はスクロールコンテナ化しない＝FV固定(sticky)も両立。
     iOSで問題になる“transform由来のoff-canvasあふれ”はドロワーだけで、それは .c-drawer-wrap の
     内部クリップで消しているため、この hidden が fixed ヘッダーを不安定化させることはない */
  overflow-x: hidden;
}

/* ---------- layout ---------- */
.l-inner {
  width: 100%;
  max-width: calc(var(--max-width) + 40px);   /* PCの既定幅1240px。SPの余白(--sp-padding)とは切り離す */
  margin-inline: auto;
  padding-inline: var(--sp-padding);
}

/* =========================================================
   共通見出し
   ========================================================= */
.c-heading {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 72px);   /* SPはFigma 48px / PCは72px */
  line-height: 1.2;
  text-align: center;
  letter-spacing: .02em;
  position: relative;
  width: fit-content;
  margin: 0 auto clamp(34px, 6vw, 64px);
  padding-bottom: 20px;
}
/* 見出し下線はJS生成のガタガタ線（.rough-underline）に置換 */
.c-heading::after { content: none; }
.c-boil-filter { position: absolute; }
.rough-underline {
  position: absolute;
  left: 0;
  width: 100%;                 /* 文字幅いっぱい（親はfit-content / inline-block） */
  display: block;
  overflow: visible;
  color: inherit;              /* stroke=currentColorが文字色に追従（暗背景で白） */
  pointer-events: none;
}
.c-heading .rough-underline { bottom: 2px; height: 16px; }
/* ヘッダー/フッターのメニュー：ホバーで同じrough下線を表示 */
.p-header__list a .rough-underline,
.p-footer__col a .rough-underline {
  bottom: -7px;
  height: 11px;
  opacity: 0;
  transition: opacity .18s ease;
}
.p-header__list a:hover .rough-underline,
.p-footer__col a:hover .rough-underline { opacity: 1; }
/* 暗い背景セクション用（白） */
.c-heading--light { color: #fff; }
.c-heading--light::after {
  background-image: url("../img/heading-line-light.svg");
}
/* Features 固有の下線（Vector 525・より平坦なうねり） */
.c-heading--features::after {
  background-image: url("../img/heading-line-features.svg");
}
/* Sounds 固有の下線（Vector 530） */
.c-heading--sound::after {
  background-image: url("../img/heading-line-sound.svg");
}
/* Character 固有の下線（Vector 529） */
.c-heading--character::after {
  background-image: url("../img/heading-line-character.svg");
}
/* Artwork 固有の下線（Vector 528） */
.c-heading--artwork::after {
  background-image: url("../img/heading-line-artwork.svg");
}
/* Outline 固有の下線（Vector 527） */
.c-heading--outline::after {
  background-image: url("../img/heading-line-outline.svg");
}

/* =========================================================
   ローディング画面（キャラクター浮遊＋0→100プログレス）
   ========================================================= */
.p-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.p-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.p-loading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 5vw, 44px);
  width: min(84%, 640px);
}
.p-loading__char {
  height: clamp(150px, 30vw, 210px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.p-loading__char img {
  height: 100%;
  width: auto;
  display: block;
  animation: fj-loading-bob 1.9s ease-in-out infinite;
  will-change: transform;
}
@keyframes fj-loading-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
.p-loading__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(84%, 590px);
}
/* 伸びていく黒バー（幅はJSで制御・背景トラックなし） */
.p-loading__fill {
  flex: 0 0 auto;
  width: 0;
  height: 2px;
  background: #1a1a1a;
}
/* 左端の固定「0」／バー先端right横に追従して増える数字 */
.p-loading__zero,
.p-loading__count {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #000;
  font-variant-numeric: tabular-nums;
}
.p-loading__count { min-width: 40px; }
@media (prefers-reduced-motion: reduce) {
  .p-loading__char img { animation: none; }
}

/* =========================================================
   Steamボタン（ヘッダー）
   ========================================================= */
.c-btn-steam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  color: #fff;
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 99px;
  /* Figma 421:324「Component 16」＝200×44（padding上12/下16・左右60、line-height 16）。
     Figmaのストロークは枠サイズに含まれないので、CSSでは1pxボーダーぶんpaddingから引いて44pxに揃える */
  min-width: 200px;
  padding: 11px 59px 15px;
  line-height: 1;
  transition: opacity .25s, transform .25s;
}
.c-btn-steam:hover { opacity: .82; transform: translateY(-2px); }

/* =========================================================
   ヘッダー
   ========================================================= */
.p-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
}

/* 追従ヘッダーの色（暗背景セクション上で反転） */
.p-header__logo img,
.p-header__list a,
.p-header__lang,
.c-btn-steam {
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, filter .3s ease;
}
.p-header__hamburger span { transition: background-color .3s ease; }

/* ロゴは中が白・濃いフチの1枚で通常/反転共通（filter反転はしない） */
.p-header.is-inverted .p-header__list a,
.p-header.is-inverted .p-header__lang { color: #fff; }
.p-header.is-inverted .p-header__hamburger span { background: #fff; }
.p-header.is-inverted .c-btn-steam {
  background: #fff;
  color: var(--color-ink);
  border-color: #fff;
}

.p-header__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline: 20px;   /* 本文の余白(36px)とは別。ヘッダーは従来どおり画面端寄り */
  gap: 12px;
}
.p-header__logo {
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.p-header__logo img { height: 44px; width: auto; }

.p-header__nav { display: none; }

.p-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.p-header__lang {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .02em;
}
.c-btn-steam { display: none; }

/* ハンバーガー（SP） */
.p-header__hamburger {
  width: 36px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
}
.p-header__hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 2px;
}
.p-header__hamburger span:nth-child(1) { top: 0; }
.p-header__hamburger span:nth-child(2) { bottom: 0; }

/* =========================================================
   FV / Trailer ステージ（FVを画面に固定し、Trailerがせり上がって覆いかぶさる）
   ========================================================= */
.p-fvstage { position: relative; }
/* FVはステージ内でstickyに固定。後続のTrailerが暗転しながら重なる */
.p-fv {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/fv-scene.png") no-repeat center bottom / cover;
}
/* 星・ロゴ・宇宙船・煙をまとめてスクロールでフェードアウト（JSでopacity制御）。
   FV全面に敷いて、中の要素は%で絶対配置する */
.p-fv__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: opacity;
}
/* FV全面の黒ヴェール。スクロールでopacity 0→1（JSが --veil を制御）。
   FVは固定されTrailerは透明なので、この暗転が画面全体（FV領域もTrailer領域も）に一様にかかり境目が出ない */
.p-fv__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #141414;
  opacity: var(--veil, 0);
  pointer-events: none;
  will-change: opacity;
}
/* 丸い星。Figmaの星レイヤから座標を起こし、Trailerと同じ点滅（fj-twinkle）をかける。
   塗りではなく線の丸なので border で描く */
.p-fv__stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.p-fv__star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  height: var(--d);
  border: var(--line-w) solid var(--color-line);
  border-radius: 50%;
  animation: fj-twinkle 3s ease-in-out infinite;
  will-change: opacity, transform;
}
/* Trailerの星と同じ要領で周期・位相をずらす */
.p-fv__star:nth-child(5n+1) { animation-duration: 3.2s; animation-delay: 0s; }
.p-fv__star:nth-child(5n+2) { animation-duration: 2.4s; animation-delay: .9s; }
.p-fv__star:nth-child(5n+3) { animation-duration: 3.7s; animation-delay: .4s; }
.p-fv__star:nth-child(5n+4) { animation-duration: 2.8s; animation-delay: 1.5s; }
.p-fv__star:nth-child(5n+5) { animation-duration: 3.0s; animation-delay: .6s; }

/* カラーロゴ。指示書「画面幅いっぱいくらいに出してほしい」＝約92%。宇宙船の背面なので z-index は craft より下 */
.p-fv__title {
  position: absolute;
  left: 4.8%;      /* Figma SP 728-274：x18 / 375 */
  top: 23.8%;      /* y128 / 538 */
  width: 89.9%;    /* 337 / 375 */
  margin: 0;
  z-index: 1;
}
.p-fv__title img { width: 100%; height: auto; display: block; }

/* 宇宙船（ロゴの前面） */
/* 宇宙船。FigmaはPC/SPとも横は画面中央なので left:50% + translateX(-50%) で置く。
   幅を下限つきにしても中央がずれない */
.p-fv__craft {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40.5%;      /* Figma SP：y218 / 538 */
  width: 28%;      /* 105 / 375 */
  z-index: 2;
  pointer-events: none;
}
.p-fv__ship {
  display: block;
  width: 100%;
  animation: fj-fv-bob 3.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes fj-fv-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* 煙は地面に位置固定。拡大もフェードアウトもかけない（指示書「フェードアウトの効果はなし」）。
   背景が下端基準なので bottom 基準で置く */
.p-fv__smoke {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10.4%;   /* Figma SP：下端から56 / 538 */
  width: 31.2%;    /* 117 / 375 */
  z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .p-fv__ship { animation: none; }
  .p-fv__star { animation: none; opacity: 1; }
}

/* =========================================================
   Trailer
   ========================================================= */
.p-trailer {
  position: relative;
  z-index: 1;                /* 固定されたFVの上に重なる。背景は透明にして“暗転したFV風景”を透かす */
  min-height: 100vh;
  background: transparent;
  color: #fff;
  padding: 70px 0 80px;
  overflow: hidden;
}
.p-trailer > .l-inner { position: relative; z-index: 2; }

/* 散らし星（コンテンツ層。透過するFV風景の上に乗る） */
.p-trailer__stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.p-trailer__deco {
  position: absolute;
  width: 22px;
  height: 22px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12Z'/%3E%3C/svg%3E");
}
.p-trailer__deco.is-mid { width: 11px; height: 11px; }
/* 色モディファイア。4点星（SVG）は塗り違いの画像で、丸ドットは背景色で塗る。
   ピンク #d85681 ＝var(--color-badge-pink)／水色 #53abd9 ＝var(--color-badge-blue)。
   data URI の中ではCSS変数を参照できないので実値。色を変えるときは変数と両方直す */
.p-trailer__deco.is-pink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d85681'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12Z'/%3E%3C/svg%3E");
}
.p-trailer__deco.is-blue {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2353abd9'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12Z'/%3E%3C/svg%3E");
}
.p-trailer__deco.is-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
/* 丸ドットの青。星より詳細度を上げて background 一括指定で画像を打ち消す */
.p-trailer__deco.is-dot.is-blue { width: 7px; height: 7px; background: var(--color-badge-blue); }

/* Figmaの「星」フレーム座標をセクション比率(%)に換算して配置 */
.p-trailer__deco--s1 { left: 6.7%;  top: 49.6%; }
.p-trailer__deco--s2 { left: 94%;   top: 11.9%; }
.p-trailer__deco--s3 { left: 87.6%; top: 81.8%; }
.p-trailer__deco--s4 { left: 89.2%; top: 43.2%; }
.p-trailer__deco--s5 { left: 39.7%; top: 70.9%; }
.p-trailer__deco--m1 { left: 89.2%; top: 27.9%; }
.p-trailer__deco--m2 { left: 74.9%; top: 11.5%; }
.p-trailer__deco--m3 { left: 9.8%;  top: 25.2%; }
.p-trailer__deco--m4 { left: 24.4%; top: 57.6%; }
.p-trailer__deco--m5 { left: 58.5%; top: 57.5%; }
.p-trailer__deco--m6 { left: 28.5%; top: 7.1%; }
.p-trailer__deco--m7 { left: 85.7%; top: 59%; }
.p-trailer__deco--d1 { left: 54.7%; top: 55.9%; }
.p-trailer__deco--d2 { left: 11.8%; top: 86.7%; }
.p-trailer__deco--d3 { left: 36%;   top: 13.3%; }
.p-trailer__deco--d4 { left: 11.5%; top: 38.7%; }
.p-trailer__deco--d5 { left: 70.4%; top: 13.9%; }

/* 星のきらめき（明るさを4段階の起点で変化させつつ、滑らかに補間） */
@keyframes fj-twinkle {
  0%   { opacity: .2;  transform: scale(.65); }
  25%  { opacity: .5;  transform: scale(.85); }
  50%  { opacity: 1;   transform: scale(1.08); }
  75%  { opacity: .5;  transform: scale(.85); }
  100% { opacity: .2;  transform: scale(.65); }
}
.p-trailer__deco {
  animation: fj-twinkle 3s ease-in-out infinite;
  will-change: opacity, transform;
}
.p-trailer__deco:nth-child(5n+1) { animation-duration: 3.2s; animation-delay: 0s; }
.p-trailer__deco:nth-child(5n+2) { animation-duration: 2.4s; animation-delay: .9s; }
.p-trailer__deco:nth-child(5n+3) { animation-duration: 3.7s; animation-delay: .4s; }
.p-trailer__deco:nth-child(5n+4) { animation-duration: 2.8s; animation-delay: 1.5s; }
.p-trailer__deco:nth-child(5n+5) { animation-duration: 3.0s; animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .p-trailer__deco { animation: none; opacity: 1; }
}

/* SPはFigmaのSP座標に合わせて再配置（12個・左右端中心）。余剰は非表示 */
@media (max-width: 767px) {
  .p-trailer__deco--s2,
  .p-trailer__deco--s3,
  .p-trailer__deco--s5,
  .p-trailer__deco--d4,
  .p-trailer__deco--d5 { display: none; }

  .p-trailer__deco--s1 { left: 83.5%; top: 32.7%; }
  .p-trailer__deco--s4 { left: 19.2%; top: 12%; }
  .p-trailer__deco--m1 { left: 13.6%; top: 46.1%; }
  .p-trailer__deco--m2 { left: 79.2%; top: 12.1%; }
  .p-trailer__deco--m3 { left: 77.9%; top: 10.7%; }
  .p-trailer__deco--m4 { left: 8.8%;  top: 85.8%; }
  .p-trailer__deco--m5 { left: 87.5%; top: 86.4%; }
  .p-trailer__deco--m6 { left: 86.4%; top: 42.3%; }
  .p-trailer__deco--m7 { left: 7.7%;  top: 33.7%; }
  .p-trailer__deco--d1 { left: 62.4%; top: 31.4%; }
  .p-trailer__deco--d2 { left: 12%;   top: 9%; }
  .p-trailer__deco--d3 { left: 18.7%; top: 89.7%; }
}

/* YouTube（サムネ＋再生ボタン、クリックで再生） */
.p-trailer__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.p-trailer__play {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
}
.p-trailer__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-trailer__play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s;
}
.p-trailer__play-bg { fill: #ff0000; transition: fill .25s; }
.p-trailer__play:hover .p-trailer__play-btn { transform: scale(1.08); }
.p-trailer__play:hover .p-trailer__play-bg { fill: #e60000; }
.p-trailer__video iframe,
.p-pk-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-trailer__body { margin-top: 36px; }
.p-trailer__lead {
  font-feature-settings: 'pwid' on, 'palt' on, 'calt' off;
  font-family: var(--font-en), var(--font-jp);
  font-weight: 400;
  font-size: clamp(30px, 8.5vw, 64px);
  line-height: 1.25;
  text-align: center;
  margin-bottom: 26px;
}
.p-trailer__desc { display: grid; gap: 1.1em; }
.p-trailer__desc p {
  font-family: var(--font-jp);
  font-size: 18px;              /* SP：リード文18px */
  line-height: 1.85;
  color: rgba(255, 255, 255, .86);
}

/* =========================================================
   Features
   ========================================================= */
.p-features { position: relative; padding: 80px 0 96px; }

/* 周囲の手描き装飾（PCのみ） */
.p-features__deco { display: none; }

.p-features__list {
  display: grid;
  gap: 44px 26px;
}
.p-feature {
  position: relative;
  /* Figma SP：サムネがカードから20px、文字は38px（＝20＋margin-inline 18px） */
  padding: 20px 20px 26px;
  /* カード枠は手描きイラスト（border-imageではなく背景でストレッチ） */
  background: url("../img/card-frame.png") no-repeat center / 100% 100%;
}
.p-feature__num {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 46px;
  font-family: var(--font-en);
  font-size: 16px;
  line-height: 1;
  padding: 4px 12px;
  text-align: center;
  color: #fff;
  border: 1px solid #0a0a0a;
  border-radius: 6px;
  z-index: 10;
}
/* FB「色変更」対応（2026-08-22）。3色ともFigma `721:368` の値に合わせた（01/02も従来より彩度が低い） */
.p-feature__num--red { background: var(--color-badge-pink); }
.p-feature__num--blue { background: var(--color-badge-blue); }
.p-feature__num--green { background: var(--color-badge-green); }
.p-feature__thumb {
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 370 / 210;
}
.p-feature__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-feature__title {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: #080808;
  display: flex;
  align-items: baseline;
  /* 英字が長いとカードからはみ出すため、収まらないときだけ和文サブを折り返す */
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.p-feature__sub {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  color: #1a1a1a;
}
.p-feature__text {
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a1a;
}
/* Figma SP：本文と見出しはサムネより18px内側（カード端から38px） */
.p-feature__title,
.p-feature__text { margin-inline: 18px; }
/* Featuresカード：枠トリム描画アニメ（JS動作時のみ。no-JS/reduced-motionはcard-frame.pngのまま） */
/* 枠はSVGで描くのでcard-frame.pngは外すが、背景は白のまま残す。
   透明にすると左端の木など背景装飾がカードを透けてしまう */
.p-feature.is-feat-anim { background: #fff; }
.p-feature.is-feat-anim .p-feature__thumb,
.p-feature.is-feat-anim .p-feature__title,
.p-feature.is-feat-anim .p-feature__text { opacity: 0; }
.p-feature__thumb { position: relative; }
.p-feat-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
/* バッジ：枠はSVGトリム、塗り＋数字は枠が描き終わってからフェード */
.p-feature__num.is-feat-badge { background: transparent; border: none; }
.p-feature__num-fill { position: absolute; inset: 0; border-radius: 6px; z-index: 0; }
.p-feature__num-text { position: relative; z-index: 2; }

/* =========================================================
   Sound
   ========================================================= */
.p-sound { padding: 72px 0 80px; }
.p-sound__wrap {
  display: grid;
  gap: 30px;
}
.p-sound__cover {
  width: 100%;
  max-width: none;   /* Figma SP：ジャケットは中身の幅いっぱい(303px @375) */
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
}
.p-sound__cover img { width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; }
.p-sound__track {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: var(--line-w) solid var(--color-line);
  cursor: pointer;
  transition: opacity .2s ease;
}
.p-sound__track:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
@media (hover: hover) {
  .p-sound__track:hover .p-sound__name { text-decoration: underline; text-underline-offset: 4px; }
}
.p-sound__name {
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1.3;
  color: #1a1a1a;
  white-space: nowrap;
}
.p-sound__artist {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .02em;
  color: #1a1a1a;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
}

/* ジャケット一覧 / View more（Figma 669-264：1289幅に168pxタイル×7＋gap14px）
   ※FB「View more →と左の3つの四角を取る」でHTMLから削除済み（2026-08-20）。
     復活する可能性があるためスタイルのみ残置している */
.p-sound__jackets {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.p-sound__jacket {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.p-sound__jacket img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
@media (hover: hover) {
  .p-sound__jacket:hover { opacity: .82; transform: translateY(-3px); }
}
.p-sound__jacket:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

.p-sound__more { margin-top: 24px; text-align: right; }
.p-sound__more-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 22px;
  line-height: 1;
  color: var(--color-ink);
}
.p-sound__more-arrow { transition: transform .25s ease; }
@media (hover: hover) {
  .p-sound__more-link:hover .p-sound__more-arrow { transform: translateX(6px); }
}

@media (min-width: 768px) {
  .p-sound__jackets { grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 56px; }
  .p-sound__more { margin-top: 40px; }
  .p-sound__more-link { font-size: 32px; gap: 20px; }
}
@media (min-width: 1024px) {
  /* 曲数が増えても1タイル168px相当を保つため7カラム固定 */
  .p-sound__jackets { grid-template-columns: repeat(7, 1fr); }
}

/* SP: トラックリストはスクロールボックス＋上下フェード＋常時カスタムスクロールバー */
.p-sound__bar { display: none; }

@media (max-width: 767px) {
  .p-sound__listwrap { position: relative; min-width: 0; }
  .p-sound__list {
    max-height: 236px;
    overflow-y: auto;
    padding-right: 18px;
    scrollbar-width: none;           /* ネイティブは隠してカスタムを表示 */
  }
  /* SPは幅が足りないので長い曲名だけ折り返す（nowrapのままだとグリッドの
     min-content幅がリストを押し広げ、アーティスト名が画面外に切れる） */
  .p-sound__name { white-space: normal; }
  .p-sound__list::-webkit-scrollbar { display: none; }

  /* カスタムスクロールバー（Figma: 6px 濃いトラック＋薄いサム・常時表示） */
  .p-sound__bar {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
    z-index: 3;
  }
  .p-sound__bar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    min-height: 24px;
    background: #d9d9d9;
    border-radius: 3px;
    cursor: grab;
    touch-action: none;
  }
  .p-sound__bar-thumb:active { cursor: grabbing; }

  /* 上下フェード（スクロールバー領域は避ける） */
  .p-sound__listwrap::before,
  .p-sound__listwrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 14px;
    height: 34px;
    pointer-events: none;
    z-index: 2;
    transition: opacity .2s ease;
  }
  .p-sound__listwrap::before {
    top: 0;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  }
  .p-sound__listwrap::after {
    bottom: 0;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
  }
  /* 最上部では上フェードを消す / 最下部では下フェードを消す */
  .p-sound__listwrap.at-top::before { opacity: 0; }
  .p-sound__listwrap.at-bottom::after { opacity: 0; }
}

/* =========================================================
   Sound：試聴プレイヤー（モーダル / Figma 669-263）
   ========================================================= */
/* 曲名はボタン化（クリックで試聴）。見た目は元のテキストのまま */
.p-sound__name {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-weight: inherit;
}
.p-sound__name:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }

.p-splayer {
  position: fixed;
  inset: 0;
  /* Artworkモーダルと同じ階層。ヘッダー(100)より前面に出す */
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(72, 72, 72, .8);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.p-splayer.is-open { opacity: 1; visibility: visible; }

.p-splayer__inner { position: relative; }

/* 閉じるボタン：カード左上の外側（Figma 52px角の白ボックス） */
.p-splayer__close {
  position: absolute;
  top: -64px;
  left: -87px;
  width: 52px;
  height: 52px;
  background: #fff;
  border: 0;
  cursor: pointer;
}
.p-splayer__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  background: var(--color-ink);
}
.p-splayer__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.p-splayer__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.p-splayer__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.p-splayer__card {
  width: min(415px, calc(100vw - 48px));
  aspect-ratio: 415 / 599;
  padding: 11.8% 19.76% 4%;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.p-splayer__cover { width: 100%; aspect-ratio: 1; overflow: hidden; }
.p-splayer__cover img { width: 100%; height: 100%; object-fit: cover; }

/* 曲名・アーティスト（Figmaには無いが再生中の曲がわかるよう追加） */
.p-splayer__meta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 32px;
}
.p-splayer__title { font-family: var(--font-en); font-size: 14px; line-height: 1.3; color: #1a1a1a; }
.p-splayer__artist { font-family: var(--font-en); font-size: 10px; letter-spacing: .02em; color: #616161; }

/* シークバー / 音量バー（つまみは非表示・塗り分けのみ） */
.p-splayer__seek,
.p-splayer__vol {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border-radius: 10px;
  background: linear-gradient(to right, #616161 var(--fill, 0%), #bababa var(--fill, 0%));
  cursor: pointer;
}
.p-splayer__seek { height: 6px; margin-top: 12px; }
.p-splayer__vol { height: 2px; }
.p-splayer__seek::-webkit-slider-thumb,
.p-splayer__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
}
.p-splayer__seek::-moz-range-thumb,
.p-splayer__vol::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: transparent; }
.p-splayer__seek:focus-visible,
.p-splayer__vol:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }

.p-splayer__controls {
  margin-top: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.p-splayer__nav {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.p-splayer__nav svg { width: 46px; height: 46px; }
.p-splayer__toggle {
  width: 125px;
  height: 46px;
  flex-shrink: 0;
  border: 0;
  border-radius: 5px;
  background: var(--color-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .2s;
}
@media (hover: hover) {
  .p-splayer__nav:hover { opacity: .8; transform: scale(1.06); }
  .p-splayer__toggle:hover { opacity: .8; }
}
.p-splayer__nav:focus-visible,
.p-splayer__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 一時停止アイコン（再生中）／再生アイコン（停止中）を状態で出し分け */
.p-splayer__pause { display: flex; gap: 3px; }
.p-splayer__pause span { display: block; width: 8px; height: 24px; border-radius: 1px; background: #fff; }
.p-splayer__play { display: none; }
.p-splayer.is-paused .p-splayer__pause { display: none; }
/* 三角はボタン全面（125×46）のSVGとして描くことでFigma通りの位置・比率になる */
.p-splayer.is-paused .p-splayer__play { display: block; width: 100%; height: 100%; }

.p-splayer__volume {
  margin-top: 41px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
}
.p-splayer__vol-icon { flex-shrink: 0; display: flex; }

@media (max-width: 767px) {
  /* 閉じるボタンはカード外側だと画面からはみ出すため右上に寄せる */
  .p-splayer__close { top: -60px; left: auto; right: 0; width: 44px; height: 44px; }
  .p-splayer__close span { width: 22px; }
  .p-splayer__card { padding: 10% 12% 4%; }
  .p-splayer__controls { margin-top: 20px; }
  .p-splayer__volume { margin-top: 26px; }
}

/* =========================================================
   Character
   ========================================================= */
.p-character { position: relative; padding: 72px 0 40px; }

/* 周囲の草装飾（PCのみ） */
.p-character__deco { display: none; }

/* 見出し＋ナビ（見出しは中央、矢印はその右） */
.p-character__head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 34px;
}
.p-character__head .c-heading { grid-column: 2; margin-bottom: 0; }
.p-character__nav { display: flex; gap: 12px; }
.p-character__nav--top {
  grid-column: 3;
  justify-self: start;
  margin-left: 44px;
  display: none;              /* SPは非表示（サイド矢印を使う）。PCで表示 */
}
.p-character__arrow {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, transform .2s;
}
/* ホバー演出はマウス端末のみ（タッチでボタンがずれないように） */
@media (hover: hover) {
  .p-character__arrow:hover { opacity: .8; transform: scale(1.06); }
  .p-character__arrow--side:hover { transform: translateY(-50%) scale(1.06); }
}
.p-character__arrow svg { width: 46px; height: 46px; }

/* 灰色バンド＋Swiper */
.p-character__band {
  position: relative;
  background: #e9e9e9;
  padding: 44px 0;
}
.p-character__swiper {
  width: 100%;
  overflow: hidden;
}
/* 枠は .p-feature と同じ「JSで描く手描き線」に揃える（2026-09-07）。
   Featuresは is-feat-anim が付いたまま残るため、実際に画面に出ている枠は card-frame.png ではなく
   main.js の buildOutline() が描くSVG（stroke 1.4）。枠画像を引き伸ばす方式だと
   カードの縦横比の違いで線幅が不均一になる（実測：縦1.25 / 横1.74px）ので、同じ生成器で描く。
   JSが枠を描いたら .is-char-outline が付き、フォールバックの枠画像を白背景に差し替える。 */
.p-character__card {
  box-sizing: border-box;
  width: 64%;          /* Figma SP：240 / 375 */
  max-width: 300px;
  height: auto;
  position: relative;
  padding: 20px 20px 26px;
  /* no-JS / reduced-motion 用のフォールバック（.p-feature と同じ考え方） */
  background: url("../img/card-frame.png") no-repeat center / 100% 100%;
}
.p-character__card.is-char-outline { background: #fff; }
/* Coming soon: 白カードに黒60%を重ねて暗色化 */
.p-character__card.is-soon {
  background:
    linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)),
    url("../img/card-frame.png") no-repeat center / 100% 100%;
}
.p-character__card.is-soon.is-char-outline {
  background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)) #fff;
}
.p-character__num {
  position: absolute;
  top: 22px;
  left: 24px;
  font-family: var(--font-en);
  font-size: 30px;
  line-height: 1;
  color: var(--color-badge-pink);
  z-index: 2;
}
.p-character__img {
  height: 283px;   /* Figma SP：画像の高さ283 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 18px;
}
/* 6枚とも同じキャンバス（546×720）で書き出してあるので、同じ大きさで描けば地面（影）の位置が揃う。
   カード幅よりキャンバスが横長になる場合があるため max-width で抑え、
   はみ出し分は object-position: bottom で上に逃がす（＝足元は常にボックス下端） */
.p-character__img img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.p-character__name {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 26px;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.p-character__card.is-soon .p-character__name { color: #fff; }
.p-character__text {
  font-size: 15px;
  line-height: 1.6;
  color: #1a1a1a;
}

/* サイド矢印（SP用） */
.p-character__arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: none;
}
.p-character__arrow--side { display: flex; }
.p-character__arrow--prev { left: 8px; }
.p-character__arrow--next { right: 8px; }

/* =========================================================
   Artwork
   ========================================================= */
.p-artwork { position: relative; padding: 72px 0 80px; }

/* 装飾（PCのみ） */
.p-artwork__deco { display: none; }

/* 外枠＝Figmaの手描き枠画像をborder-image(9スライス)で。角固定・辺はroundでタイル→可変サイズでも歪まない
   ※ 疑似要素ではなく要素自身のborderで描く。iOSでは中に overflow-x:auto の子があると
      親の ::before が描画されず枠が消える（実機検証で確定。padding は border 5px 分を差し引き済み） */
.p-artwork__frame {
  position: relative;
  padding: 24px 12px 24px;   /* Figma SP：外枠302に対し画像266（左右18）・上30（border 6px を引いた値） */
  border: 6px solid transparent;   /* 実効線幅 13×6/56 ≒ 1.4px＝Featuresの枠に揃える */
  border-image: url("../img/artwork-frame-black.png") 56 round;
}
/* JSが手描き枠（Featuresと同じSVG線）を描いたら枠画像のborderを外す。
   paddingは border 6px 分を戻して外形も中身の位置も変えない。フォールバックは上の border-image */
.p-artwork__frame.is-hand-outline {
  padding: 30px 18px;
  border: 0;
}
.p-artwork__dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: var(--line-w) solid var(--color-line);
  box-sizing: border-box;
  z-index: 2;
}
/* 初期色（Figma／reduced-motion時のフォールバック）：TL白 TRピンク BL青 BR白 */
.p-artwork__dot--tl { top: -13px; left: -13px; }
.p-artwork__dot--tr { top: -13px; right: -13px; background: var(--color-badge-pink); }
.p-artwork__dot--bl { bottom: -13px; left: -13px; background: var(--color-badge-blue); }
.p-artwork__dot--br { bottom: -13px; right: -13px; }
/* borderを外すと絶対配置の基準がpadding box→border boxに変わり6px内側にずれるので戻す */
.is-hand-outline > .p-artwork__dot--tl { top: -7px; left: -7px; }
.is-hand-outline > .p-artwork__dot--tr { top: -7px; right: -7px; }
.is-hand-outline > .p-artwork__dot--bl { bottom: -7px; left: -7px; }
.is-hand-outline > .p-artwork__dot--br { bottom: -7px; right: -7px; }
/* 枠SVGはドットの下に敷く（Featuresのz-index:4のままだとドットを線が横切る） */
.p-artwork__frame > .p-feat-outline,
.p-pk-box > .p-feat-outline { z-index: 1; }
/* 四隅ドットの色が「パッと」瞬時に切り替わり、白/ピンク/青の玉が4隅を巡回する */
.p-artwork__frame .p-artwork__dot { animation: fj-dot-rot 8s steps(1, end) infinite; }
.p-artwork__frame .p-artwork__dot--tl { animation-delay: 0s; }   /* 白 */
.p-artwork__frame .p-artwork__dot--tr { animation-delay: -2s; }  /* ピンク */
.p-artwork__frame .p-artwork__dot--br { animation-delay: -4s; }  /* 白 */
.p-artwork__frame .p-artwork__dot--bl { animation-delay: -6s; }  /* 青 */
@keyframes fj-dot-rot {
  0%   { background: #fff; }
  25%  { background: #d85681; }   /* var(--color-badge-pink)：@keyframes内は変数が効かない端末があるため実値 */
  50%  { background: #fff; }
  75%  { background: #53abd9; }   /* var(--color-badge-blue) */
  100% { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .p-artwork__frame .p-artwork__dot { animation: none; }
}

/* グリッド（PC）/ スライダー（SP） */
.p-artwork__grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.p-artwork__grid::-webkit-scrollbar { display: none; }
.p-artwork__item {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0;
  border: var(--line-w) solid var(--color-line);
  border-radius: 3px;
  /* overflow:hidden は付けない。付けるとホバーの青枠(::after)がボーダーの内側でクリップされ、
     画像のフチより内側にしか描けなくなる（FB「青線が少し内側」）。角丸は画像側で処理する */
  aspect-ratio: 480 / 273;
  background: #fff;
  cursor: pointer;
}
.p-artwork__item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
/* ホバー時の青い手描き枠（デフォルト表示なし）
   FB「マウスオンの青い線が太くて波が強い→もう少し細く、波も弱めに」対応（2026-08-20）:
   引き伸ばし背景（artwork-frame-blue.png・線24px相当＝太い）をやめ、border-image(9スライス)方式に変更。
   artwork-frame-blue-thin.png は**線が枠端に接するよう描き起こした**専用素材（線12px / 994×580）。
   線色は2026-09-07に #5994ff → **#53abd9**（＝var(--color-badge-blue)＝Featuresバッジ02）へ差し替え済み。
   色は素材に焼き込まれているので、変えるときは img/artwork-frame-blue-thin.png を作り直すこと。
   外枠(artwork-frame-black.png)を流用していた頃は線が素材内で9px内側にあり、
   画像のフチから浮いて見えていた（FB「青線が画像の少し内側」）。
   border 17px / slice 56 で実効線幅は約3.6px。
   inset を -1.4px（＝アイテムのボーダー分）にして、青線を**画像のフチそのもの**に重ねている。
   揺れの強さは #frame-boil フィルタ側（scale/dur）で調整している */
.p-artwork__item::after {
  content: "";
  position: absolute;
  inset: calc(var(--line-w) * -1);   /* ボーダー分だけ外へ出して画像のフチに合わせる */
  border: 17px solid transparent;
  border-image: url("../img/artwork-frame-blue-thin.png") 56 round;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 2;
}
@media (hover: hover) {
  .p-artwork__item:hover::after { opacity: 1; filter: url(#frame-boil); }
}

/* SP用ナビ矢印（外枠の中・画像の下） */
.p-artwork__nav {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
}
.p-artwork__arrow {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s;
}
.p-artwork__arrow--light { background: #fff; color: var(--color-ink); }
@media (hover: hover) {
  .p-artwork__arrow:hover { opacity: .8; }
}

/* ===== モーダル（ライトボックス） ===== */
.p-artwork__modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 60px 20px;
  background: rgba(70, 70, 70, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.p-artwork__modal.is-open { opacity: 1; visibility: visible; }
.p-artwork__modal-close {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
}
.p-artwork__modal-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
}
.p-artwork__modal-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.p-artwork__modal-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
/* 画像ごとに縦横比が違っても表示枠を固定し、常に同じサイズ枠内に収める */
.p-artwork__modal-fig {
  width: min(1000px, 92vw);
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  display: flex;
}
.p-artwork__modal-fig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.p-artwork__modal-nav {
  display: flex;
  gap: 40px;
}

/* =========================================================
   Outline
   ========================================================= */
.p-outline { position: relative; padding: 72px 0 20px; }
/* 表を装飾より前面に（plant等の背景装飾が文字に被らないように） */
.p-outline .l-inner { position: relative; z-index: 1; }
.p-outline__deco { display: none; }
/* SP・タブレット：背景イラストを表の下に横並びで配置。
   Figma SP `733-328`（Group 5469）＝ enemy_17 / **enemy_20** / 岩 の3点。
   以前は真ん中が草(kusa)になっていた。x33 → 40幅 → 間43 → 54幅 → 間46 → 170幅 で
   合計386pxとなり375px画面からは岩が11pxはみ出す（Figmaでも右端で切れている）のでクリップする */
@media (max-width: 1023px) {
  .p-outline__deco {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 48px;
    padding-left: 33px;
    overflow: hidden;
  }
  .p-outline__deco-item {
    position: static;
    flex: 0 0 auto;
    background: no-repeat center bottom / contain;
  }
  /* SPで出すのは3点だけ。他はPC専用 */
  .p-outline__deco--plant,
  .p-outline__deco--enemy19,
  .p-outline__deco--kusa1,
  .p-outline__deco--kusa2,
  .p-outline__deco--set-br { display: none; }
  /* HTMLの並び順はPC配置基準なので order で左→右を作り直す */
  .p-outline__deco--enemy17 { order: 1; width: 40px;  height: 52px; background-image: url("../img/deco-enemy17.png"); }
  .p-outline__deco--enemy20 { order: 2; width: 54px;  height: 52px; margin-left: 43px; background-image: url("../img/deco-enemy20.png"); }
  .p-outline__deco--diamond { order: 3; width: 170px; height: 93px; margin-left: 46px; background-image: url("../img/deco-diamond.png"); }
}
.p-outline__table {
  max-width: 700px;
  margin: 0 auto;
}
/* Figma SPだけ表が311px（左右32px）と他セクション(36px)より少し広い */
@media (max-width: 767px) {
  .p-outline .l-inner { padding-inline: 32px; }
}
.p-outline__row {
  display: grid;
  /* Figma SP 334:1194：ラベル列114 / 間20 / 1行のピッチ65px */
  grid-template-columns: 114px 1fr;
  gap: 10px 20px;
  padding: 20px 0;   /* 1行のピッチ65px（Figma SP） */
  border-bottom: var(--line-w) solid var(--color-line);
}
.p-outline__row dt {
  font-family: var(--font-en);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "palt" 1;
}
.p-outline__row dd {
  /* 欧文はConvergence→和文はKiwi Maruの順で当てる */
  font-family: var(--font-en);
  font-size: 14px;
  line-height: 1.6;
  color: #2b2b2b;
  font-feature-settings: "palt" 1;
  letter-spacing: .01em;
}

/* =========================================================
   フッター
   ========================================================= */
.p-footer {
  position: relative;
  margin-top: clamp(90px, 14vw, 170px);
  background: #1a1a1a;
  color: #fff;
  padding: 24px var(--sp-padding) 52px;
}
/* 上辺の手描き山シルエット
   Figma `681:324` / `718:302`「背景シルエット 1」の書き出し（上部の余白をトリムして2880px幅に縮小）。
   **2026-08-24：SPもPCと同じ画像に統一**（Figma `718-298` の画像ハッシュがPCと一致）。
   以前のSP専用ベクター `footer-horizon-sp.svg` は未使用になった。
   高さは画像のトリム後比率（530/2880＝18.4%）に合わせた 18.5vw。画像下部のベタ黒がフッターの黒とつながる。
   `bottom: calc(100% - 1px)` はフッターに1px重ねるため。ぴったり100%だと端末のサブピクセル丸めで
   境目に白い筋が出ることがある */
.p-footer__mountain {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: clamp(50px, 18.5vw, 266px);
  background: url("../img/footer-horizon.png") no-repeat center bottom / 100% 100%;
  pointer-events: none;
}
.p-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  text-align: center;
}
.p-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.p-footer__badge { width: 88px; height: auto; }
.p-footer__worldmap { width: 130px; height: auto; }

.p-footer__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.p-footer__cols { display: flex; gap: 48px; }
.p-footer__col { display: grid; gap: 12px; }
.p-footer__col a {
  font-family: var(--font-en);
  font-size: 18px;
  position: relative;
  display: inline-block;
}
.p-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.p-footer__wishlist-label {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .02em;
}
.p-footer__steam { display: inline-block; width: 160px; transition: transform .25s; }
.p-footer__steam img { width: 100%; height: auto; display: block; }
.p-footer__steam:hover { transform: translateY(-2px); }
.p-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.p-footer__link,
.p-footer__copy {
  font-family: var(--font-en);
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
}
.p-footer__link { transition: opacity .2s; }
.p-footer__link:hover { opacity: .6; }

/* =========================================================
   ドロワー（SPメニュー）
   ========================================================= */
/* ドロワー用ラッパー：viewport全面をfixedで覆いoverflow:hiddenで内部クリップ。
   閉じてる時に画面右外へ逃がすドロワーがドキュメントをはみ出さない＝横スクロール/ iOSのfixed不安定を根絶 */
.c-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;         /* 画面外(translateX(100%))のドロワーをクリップ */
  pointer-events: none;     /* 閉じてる間はクリックを透過 */
}
.c-drawer {
  position: absolute;       /* ラッパー基準。ラッパーがクリップするので外にはみ出さない */
  inset: 0;
  background: #fff;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 40px;   /* ドロワーは本文の余白(36px)とは別 */
  overflow-y: auto;
}
.c-drawer.is-open { transform: translateX(0); }
.c-drawer__head {
  display: flex;
  align-items: center;
  position: relative;
  height: 65px;
}
.c-drawer__close {
  width: 18px;
  height: 18px;
  position: relative;
}
.c-drawer__close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-ink);
}
.c-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.c-drawer__close span:nth-child(2) { transform: rotate(-45deg); }
.c-drawer__logo {
  height: 60px;
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.c-drawer__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-drawer__nav ul {
  display: grid;
  gap: 24px;
  text-align: center;
}
.c-drawer__nav a {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .03em;
  transition: opacity .2s;
}
.c-drawer__nav a:hover { opacity: .55; }
.c-drawer__sns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}
.c-drawer__sns a {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-drawer__sns a svg { width: 15px; height: 15px; }

/* =========================================================
   言語切替ポップアップ（JP/ENボタン直下・右寄せ）
   ========================================================= */
.p-header__lang-wrap { position: relative; }

.c-lang-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 120;
  min-width: 128px;
  background: var(--color-ink);
  color: #fff;
  padding: 32px 24px 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.c-lang-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.c-lang-pop__close {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
}
.c-lang-pop__close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #fff;
}
.c-lang-pop__close span:nth-child(1) { transform: rotate(45deg); }
.c-lang-pop__close span:nth-child(2) { transform: rotate(-45deg); }
.c-lang-pop__list {
  display: grid;
  gap: 10px;
  text-align: center;
}
.c-lang-pop__btn {
  font-family: var(--font-jp);
  font-size: 15px;
  color: #fff;
  transition: opacity .2s;
}
.c-lang-pop__btn:hover { opacity: .7; }
.c-lang-pop__btn.is-current { text-decoration: underline; text-underline-offset: 4px; }

/* =========================================================
   スクロールアニメーション
   ========================================================= */
.js-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.js-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Featureカードを1枚ずつ、ふわっと浮かび上がらせる */
.p-feature.js-fade {
  transform: translateY(46px);
  transition-duration: .9s;
  transition-timing-function: cubic-bezier(.34, 1.3, .5, 1);
}
.p-feature.js-fade:nth-child(2) { transition-delay: .2s; }
.p-feature.js-fade:nth-child(3) { transition-delay: .4s; }
.p-feature.js-fade.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js-fade { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* body固定（メニュー/モーダル展開時） */
body.is-locked { overflow: hidden; }

/* =========================================================
   背景装飾のふわふわ浮遊
   ========================================================= */
@keyframes fj-float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(4px, -14px) rotate(2deg); }
  50%  { transform: translate(0, -24px) rotate(0deg); }
  75%  { transform: translate(-4px, -14px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* 背景イラストは「生き物」だけを漂わせる（草・植物・岩・鉱物・きのこは静止） */
.p-features__deco--enemy,
.p-artwork__deco--enemy20,
.p-outline__deco--enemy17,
.p-outline__deco--enemy19,
.p-outline__deco--enemy20 {
  animation: fj-float 3.6s ease-in-out infinite;
  will-change: transform;
}
/* 生き物ごとに周期・位相をずらして非同期に */
.p-features__deco--enemy  { animation-duration: 3.8s; animation-delay: -.4s; }
.p-artwork__deco--enemy20 { animation-duration: 4.0s; animation-delay: -.9s; }
.p-outline__deco--enemy17 { animation-duration: 4.4s; animation-delay: -1.6s; }
.p-outline__deco--enemy19 { animation-duration: 3.2s; animation-delay: -2.4s; }
.p-outline__deco--enemy20 { animation-duration: 4.0s; animation-delay: -.9s; }
@media (prefers-reduced-motion: reduce) {
  .p-features__deco-item,
  .p-character__deco-item,
  .p-artwork__deco-item,
  .p-outline__deco-item { animation: none; }
}

/* 別ページ遷移を示す斜め矢印（ドロワー/フッターのPress Kit用） */
.c-extarrow { display: inline-block; margin-left: 5px; vertical-align: -1px; flex-shrink: 0; }

/* =========================================================
   タブレット以上
   ========================================================= */
@media (min-width: 768px) {
  :root { --header-h: 92px; }

  .l-inner { padding-inline: var(--pc-padding); }

  .p-trailer__desc p { font-size: 15px; }   /* リード文18pxはSPのみ、タブレット以上は従来15px */

  /* FV：Figma PC 728-273（1440幅・FV高さ944基準）。
     宇宙船と煙は幅%のままだと1024px付近で小さくなりすぎるので下限を入れる
     （1440pxでFigma通りの262px/215px、それ以下は220px/180pxで止める） */
  .p-fv__title { left: 4.2%; top: 15.3%; width: 91.7%; }
  .p-fv__craft { top: 32.8%; width: clamp(220px, 18.2vw, 262px); }
  .p-fv__smoke { bottom: 12.9%; width: clamp(180px, 14.9vw, 215px);
                 transform: translateX(-55%); }   /* Figmaでは船の中心より約10px左 */

  /* Trailer */
  .p-trailer { padding: 110px 0 120px; }
  .p-trailer__video {
    max-width: 960px;
    margin: 0 auto;
  }
  /* Figma：リード362 ＋ 間82 ＋ 本文594 ＝ 1038 */
  .p-trailer__body {
    display: grid;
    grid-template-columns: minmax(300px, 362px) 1fr;
    gap: clamp(36px, 5vw, 82px);
    align-items: start;
    max-width: 1040px;
    margin: 60px auto 0;
  }
  .p-trailer__lead { text-align: left; margin-bottom: 0; line-height: 1.3; }

  /* Features */
  /* Figma：カード下端3246 → Sound見出し3464 の218pxを、
     Featuresの下余白158＋Soundの上余白62 に配分する。
     ground_kusaがカード下端から58px下＋高さ96px＝154px必要なため、120pxだと切れてしまう */
  .p-features { padding: 100px 0 158px; }
  /* minmax(0,1fr) にしないと見出しの min-content で列幅が不揃いになり、はみ出す */
  .p-features__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .p-feature__num { top: -17px; min-width: 65px; font-size: 25px; padding: 5px 16px; z-index: 10; }
  /* 「Exploration」のような長い単語がタブレット幅で収まるよう可変に（1024px以上で40px） */
  .p-feature__title { font-size: clamp(24px, 3.6vw, 40px); }
  .p-feature__sub { font-size: 20px; }
  /* 位置・サイズはFigma PC(1440幅)の座標をそのまま%換算している */
  /* --fx＝中身（最大1326px）の左端。装飾のxはこれを起点に置く。
     ビューポート%基準だと広い画面でカードから離れて右下の草と木が重なる */
  .p-features__deco { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
    --fx: max(40px, calc(50% - 663px)); }
  .p-features__deco-item { position: absolute; background: no-repeat center / contain; }
  /* 縦は%だとセクション高に引きずられてFigmaから20〜56pxずれるため実寸で置く。
     top:162px＝上余白100＋見出し上端から61.7px / bottom値は下余白158pxからの逆算 */
  /* 左右の木と草はFigma `721-417`（Group 5460）で追加された分。
     元コンポは幅1748pxで描かれており、中身1326pxの外側に281px／141pxの余白がある前提。
     サイトは可変幅なので「中身の左右端からの距離」で置き、1440px級では端で切れるよう max()/min() で丸めている
       1920px … Figmaどおり（木も草も全体が見える）
       1440px … 木は葉の部分が見え、幹はカードの裏に回る／草は左端で切れる */
  /* 左セット＝木(object_life_togetogeB 96×261)＋草(ground_kusa 11 200×96)。
     セット内の位置関係はFigmaのまま固定し、箱ごと寄せる。
     1440px級では左端で切れるが、木の右端がカード左端に触れる位置で止める（-180px） */
  .p-features__deco--set-l {
    width: 237px; height: 357px;
    left: max(-180px, calc(50% - 944px));
    top: 96px;
    background:
      url("../img/deco-togeb.png") no-repeat 141px 0    / 96px  261px,
      url("../img/deco-grass.png") no-repeat 0    261px / 200px 96px;
  }
  /* 右セット＝草(ground_kusa 10 200×96)＋木(object_life_togetogeC 98×151)。
     Figmaでは木が草の右端に少し重なる。画面が狭いときは右端に接する位置で止める */
  .p-features__deco--set-r {
    width: 283px; height: 154px;
    left: min(calc(var(--fx) + 1184px), calc(100% - 283px));
    bottom: 4px;
    background:
      url("../img/deco-togec.png") no-repeat 185px 0   / 98px  151px,
      url("../img/deco-grass.png") no-repeat 0    58px / 200px 96px;
  }
  /* enemy_18：基本は中身の左端から1086px・上から105px。
     ただし狭い画面ではそのままだと画面外に出るので、中身の右端に接する位置で止める（＝内側に寄る） */
  .p-features__deco--enemy {
    width: 100px; height: 62px;
    left: min(calc(var(--fx) + 1086px), calc(100% - 140px));
    top: 105px;
    background-image: url("../img/deco-enemy18.png");
  }
  .p-features__deco--small { width: 66px;  height: 79px; left: calc(var(--fx) + 280px);  bottom: 45px; background-image: url("../img/deco-small.png"); }   /* object_life_small01 */
  .p-features .l-inner { position: relative; z-index: 1; }

  /* Sound */
  .p-sound { padding: 62px 0 110px; }   /* 上はFeaturesの下余白と合わせて220px（Figma準拠） */
  /* 768〜1023pxは1カラムのまま。2カラムにすると曲名32pxの最小幅に押されて
     ジャケットが潰れる（107pxになっていた）／横にはみ出すため、PC(1024〜)から2カラムにする */
  .p-sound__wrap { gap: 40px; }
  .p-sound__cover { margin: 0 auto; max-width: 420px; }
  /* Figma 421:356：1行のピッチ70px（曲名の箱38px＋上下16px）。従来は75pxで5px広かった */
  .p-sound__track { padding: 15px 2px; }
  .p-sound__name { font-size: 32px; line-height: 1.2; }
  .p-sound__artist { font-size: 15px; }

  /* Outline（Figma 421:215：ラベル列114px / gap30 / ラベル20px・値16px） */
  .p-outline__row { grid-template-columns: 114px 1fr; gap: 25px 30px; padding: 25px 0; }
  .p-outline__row dt { font-size: 20px; line-height: 1.8; }
  .p-outline__row dd { font-size: 16px; line-height: 1.8; }

  /* Footer */
  .p-footer { padding: 44px var(--pc-padding) 72px; }
  .p-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;          /* 768〜1023pxで横に収まらないときは2段に折り返す */
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    gap: 40px;
  }
  /* 縮むとロゴ2枚が枠からあふれて右のナビに重なるため縮めない（768〜1023pxで発生していた） */
  .p-footer__brand { flex-direction: row; align-items: center; gap: 22px; flex-shrink: 0; }
  .p-footer__badge { width: 128px; }
  .p-footer__worldmap { width: 190px; }

  /* 右クラスタ: 3列×2行。下段を各列の真下に左揃え */
  .p-footer__right {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 44px;
    row-gap: 40px;
    align-items: start;
  }
  .p-footer__cols { display: contents; }
  .p-footer__col a { font-size: 24px; }
  .p-footer__cta { align-items: flex-start; }
  .p-footer__bottom { display: contents; }
}

/* =========================================================
   PC
   ========================================================= */
@media (min-width: 1024px) {
  /* ---------------------------------------------------------------
     Figma PC(421-206 / 1440幅)の実寸に合わせたコンテンツ幅
     FB「枠や文章などのデザインが…サイズ感が違う」対応（2026-08-22）
     l-inner は左右40pxのpaddingを持つので max-width = 中身の幅 + 80
       Features 中身1326（カード426×3＋gap24）→ 1406
       Sound    中身1282（ジャケ578＋gap37＋リスト667）→ 1362
       Artwork  中身1248（外枠の幅）→ 1328
     --------------------------------------------------------------- */
  .p-features .l-inner { max-width: 1406px; }
  .p-sound    .l-inner { max-width: 1362px; }
  .p-artwork  .l-inner { max-width: 1328px; }

  /* Features：カード426 / gap24。カード内はサムネが枠から28px、文字は53px（＝28+25） */
  .p-features__list { gap: 24px; }
  /* Figmaのカードは高さ502px固定（本文の行数に関係なく下に余白を残す） */
  .p-feature { padding: 30px 28px 34px; min-height: 502px; }
  .p-feature__thumb { margin-bottom: 36px; }
  .p-feature__title { margin-inline: 25px; margin-bottom: 20px; }
  .p-feature__text  { margin-inline: 25px; }

  /* Sound：ジャケット578px・トラックリスト667px（Figma 421:245 / 421:356） */
  .p-sound__wrap { grid-template-columns: minmax(0, 578px) 1fr; gap: 37px; align-items: center; }
  .p-sound__cover { margin: 0; max-width: none; }

  /* カード幅に余裕が出るのでFigma通り40px固定に戻す */
  .p-feature__title { font-size: 40px; }
  /* PCでは svh と vh の差が出ないので、念のため画面高いっぱいを保証する */
  .p-fv { min-height: 100vh; }

  /* Character（PC: 上部矢印・288pxカード複数表示） */
  .p-character { padding: 100px 0 80px; }
  .p-character__head { margin-bottom: 44px; }
  .p-character__nav--top { display: flex; }
  .p-character__arrow--side { display: none; }
  /* Figma：帯724 / カード288×623 / 画像360 / 名前38 / 本文240幅。
     内訳は 上29 → 画像360 → 35.5 → 名前38 → 15 → 本文120 → 下25.5 */
  .p-character__band { padding: 50px 0; }
  .p-character__card { width: 288px; max-width: none; padding: 30px 24px 27px; }   /* Figma 30/24/27 */
  .p-character__img { height: 360px; margin-bottom: 36px; }
  .p-character__name { font-size: 32px; line-height: 1.2; margin-bottom: 15px; }

  .p-character__deco { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .p-character__deco-item { position: absolute; background: no-repeat center / contain; }
  /* Figma `721-420`（Group 5461）：見出し上端から jyari +17px / small10 +24px（＝セクション上端から117 / 124px）。
     %指定だとセクション高に引きずられて20px上にずれていた。
     xは見出しが中央基準なので中央からの距離で置く（ビューポート%だと広い画面で見出しから離れる） */
  .p-character__deco--jyari   { width: 146px; height: 78px; left: max(0px, calc(50% - 397px));                 top: 117px; background-image: url("../img/deco-jyari.png"); }    /* ground_jyari 4 */
  .p-character__deco--small10 { width: 88px;  height: 68px; left: min(calc(50% + 352px), calc(100% - 108px)); top: 124px; background-image: url("../img/deco-small10.png"); } /* object_tech_small10 */

  /* Artwork（PC: 2×3グリッド・全表示） */
  .p-artwork { padding: 100px 0 110px; }
  /* 外枠は広く、中身（グリッド）は狭く。Figma：外枠1248 / グリッド978 / 上下77・左右135の余白
     （%はいずれも幅に対して解決される。border-image分の5pxを引いている） */
  .p-artwork__frame { padding: calc(clamp(44px, 6.17%, 77px) - 6px) calc(clamp(50px, 10.8%, 135px) - 6px); }
  .p-artwork__frame.is-hand-outline { padding: clamp(44px, 6.17%, 77px) clamp(50px, 10.8%, 135px); }
  .p-artwork__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    overflow: visible;
  }
  .p-artwork__item { flex: none; scroll-snap-align: none; aspect-ratio: 480 / 273; }
  .p-artwork__nav { display: none; }

  /* Figma `724-324`（Group 5465）。--ax＝外枠(1248px)の左端を起点にする。
     元コンポは幅1705pxで、外枠の外側左169px／右288pxに装飾が置かれている前提。
     1440pxでは右の余白が96pxしかないので、
       ・外枠に重ならない位置（--ax+1256px）を下限
       ・Figmaどおりの位置と「画面端から20px」の小さい方を上限
     として max(下限, min(Figma値, 画面端)) で寄せる。外枠は背景が透明なので重ねると中が透ける */
  .p-artwork__deco { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
    --ax: max(40px, calc(50% - 624px)); }
  .p-artwork__deco-item { position: absolute; background: no-repeat center / contain; }

  /* 左上セット＝玉(object_tech_ballB 227×141)＋岩肌(ground_iwahada 1 174×82) */
  .p-artwork__deco--set-tl {
    width: 352px; height: 223px;
    left: calc(var(--ax) - 76px);
    top: 2px;
    background:
      url("../img/deco-ballb.png")   no-repeat 125px 0    / 227px 141px,
      url("../img/deco-iwahada.png") no-repeat 0     141px / 174px 82px;
  }
  /* 右上の生き物（enemy_20 3） */
  .p-artwork__deco--enemy20 {
    width: 101px; height: 95px;
    left: max(calc(var(--ax) + 1256px), min(calc(var(--ax) + 1341px), calc(100% - 121px)));
    top: 182px;
    background-image: url("../img/deco-enemy20.png");
  }
  /* 右セット＝玉(object_tech_ballA 158×234)＋岩肌(ground_iwahada 2 132×62) */
  .p-artwork__deco--set-r {
    width: 211px; height: 340px;
    left: max(calc(var(--ax) + 1256px), min(calc(var(--ax) + 1325px), calc(100% - 231px)));
    top: 844px;
    background:
      url("../img/deco-balla.png")   no-repeat 53px 0   / 158px 234px,
      url("../img/deco-iwahada.png") no-repeat 0    278px / 132px 62px;
  }
  /* 左下の砂利（ground_jyari 3）。Figmaでも画面左端で切れている */
  .p-artwork__deco--jyari {
    width: 125px; height: 67px;
    left: max(-62px, calc(var(--ax) - 169px));
    bottom: 16px;
    background-image: url("../img/deco-jyari.png");
  }

  /* Outline 装飾（PCはフロート配置のため下に余白を確保） */
  .p-outline { padding-bottom: 160px; }
  /* 岩(diamond)を right:-100px で画面外へはみ出させているため、装飾レイヤー側でクリップする。
     body の overflow-x:hidden はユーザー操作を止めるだけで scrollWidth は広がったままになり、
     iOS Safari で横パンが漏れる／アンカー移動で横にズレる原因になるので発生源を断つ */
  /* Figma `724-326`（Group 5466）。縦は見出し上端＋100pxを起点にした実寸、
     xは表(700px)が中央寄せなので中央からの距離。%指定だとセクション高に引きずられて最大86pxずれる */
  .p-outline__deco { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .p-outline__deco-item { position: absolute; background: no-repeat center / contain; }
  .p-outline__deco--enemy19 { width: 97px;  height: 123px; left: min(calc(50% + 509px), calc(100% - 117px)); top: 143px; background-image: url("../img/deco-enemy19.png"); }
  .p-outline__deco--plant   { width: 198px; height: 294px; left: max(-100px, calc(50% - 671px));             top: 181px; background-image: url("../img/deco-plant.png"); }   /* object_life_plant03 */
  .p-outline__deco--kusa1   { width: 148px; height: 71px;  left: min(calc(50% + 385px), calc(100% - 168px)); top: 292px; background-image: url("../img/deco-grass.png"); }   /* ground_kusa 12 */
  .p-outline__deco--kusa2   { width: 148px; height: 71px;  left: max(-60px, calc(50% - 560px));              top: 486px; background-image: url("../img/deco-grass.png"); }   /* ground_kusa 7 */
  .p-outline__deco--enemy17 { width: 56px;  height: 73px;  left: max(20px, calc(50% - 575px));               top: 756px; background-image: url("../img/deco-enemy17.png"); }
  /* PCは右下を1枚(set-br)にまとめているので、SP専用の2点は出さない */
  .p-outline__deco--enemy20,
  .p-outline__deco--diamond { display: none; }
  /* 右下＝object_tech_diamondB＋ground_jyari 2＋ground_jyari 1 を1枚に統合した画像。
     旧 deco-diamond.png にはFigma原本に無い薄いグレーの輪郭が焼き込まれていたため、原本から書き出し直している */
  .p-outline__deco--set-br  { width: 439px; height: 318px;  left: min(calc(50% + 363px), calc(100% - 200px)); top: 700px; background-image: url("../img/deco-outline-br.png"); }
  .p-outline .l-inner { position: relative; z-index: 1; }

}

/* =========================================================
   PCヘッダー（グローバルナビ表示）
   ナビが窮屈にならない幅で切替。未満はハンバーガー格納
   ========================================================= */
@media (min-width: 1200px) {
  :root { --header-h: 108px; }

  .p-header__inner { padding-inline: 32px; }
  .p-header__hamburger { display: none; }
  .p-header__logo { position: static; transform: none; }
  .p-header__logo img { height: 64px; }

  .p-header__nav {
    display: block;
    margin-left: auto;
  }
  .p-header__list {
    display: flex;
    align-items: center;
    gap: clamp(20px, 1.9vw, 40px);
  }
  .p-header__list a {
    font-family: var(--font-en);
    font-size: 16px;
    letter-spacing: .02em;
    position: relative;
    display: inline-block;
  }
  /* ホバー下線は見出しと同じrough-underline（JSで注入・別途CSS） */
  /* Press Kit は別ページ遷移：縦線区切り＋斜め矢印 */
  .p-header__pk { position: relative; padding-left: clamp(16px, 1.6vw, 30px); }
  .p-header__pk::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 18px;
    background: #1a1a1a;
    opacity: .35;
  }
  .p-header.is-inverted .p-header__pk::before { background: #fff; opacity: .5; }
  .p-header__pk a { display: inline-flex; align-items: center; }
  .p-header__ext { margin-left: 5px; flex-shrink: 0; }
  .p-header__actions { margin-left: clamp(20px, 2vw, 40px); gap: 18px; }
  .c-btn-steam { display: inline-flex; }
}

/* =========================================================
   Press Kit ページ
   ========================================================= */
/* Hero */
.p-pk-hero {
  position: relative;
  background: #131316;
  padding-top: var(--header-h);
  overflow: hidden;
}
.p-pk-hero__img { width: 100%; display: block; }
/* 右下固定の Press Kit バッジ（背景に応じて色反転） */
.p-pk-badge {
  position: fixed;
  right: clamp(16px, 2.2vw, 38px);
  bottom: clamp(16px, 2.2vw, 38px);   /* 下側余白＝右余白に揃える（ボタンを下げる） */
  z-index: 95;
  width: clamp(88px, 11vw, 150px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* スケール：戻り0.35s（下記）／入り0.6s（:hover側） */
  transition: transform .35s cubic-bezier(0, 0, 0.15, 1);
}
.p-pk-badge:hover {
  transform: scale(0.88);   /* ホバーで収縮 */
  transition: transform .6s cubic-bezier(0.15, 0.72, 0.33, 0.99);
}
.p-pk-badge__star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;              /* 暗背景の上 → 白星（fill=currentColor）。回転はJS */
  transition: color .3s ease;
  will-change: transform;
}
.p-pk-badge__star svg { display: block; width: 100%; height: 100%; }
.p-pk-badge__text {
  position: relative;
  font-family: var(--font-en);
  font-size: clamp(15px, 1.7vw, 24px);
  line-height: 1.15;
  color: #1a1a1a;             /* 白星の上 → 黒文字 */
  transition: color .3s ease;
}
.p-pk-badge__dl {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .14em;
  vertical-align: -.16em;
  color: inherit;             /* 文字色に追従（currentColor） */
}
/* 白背景の上では反転（黒星＋白文字） */
.p-pk-badge.is-inverted .p-pk-badge__star { color: #1a1a1a; }
.p-pk-badge.is-inverted .p-pk-badge__text { color: #fff; }

/* 共通: セクション余白 */
.p-pk-outline,
.p-pk-video,
.p-pk-shots,
.p-pk-logos { position: relative; }

/* Outline */
.p-pk-outline { padding: 104px 0 80px; }
.p-pk-outline__deco { display: none; }
/* 手描き枠（border-image・Artworkと同じ手法）。疑似要素を使わない理由は .p-artwork__frame のコメント参照 */
.p-pk-box {
  position: relative;
  max-width: 710px;
  margin: 0 auto;
  padding: 60px 32px 39px;   /* Figma SP 456:225/456:261：枠302に対し中身226（左右38）・上66（border 6px を引いた値） */
  border: 6px solid transparent;   /* 実効線幅 13×6/56 ≒ 1.4px＝Featuresの枠に揃える */
  border-image: url("../img/artwork-frame-black.png") 56 round;
}
.p-pk-box.is-hand-outline {
  padding: 66px 38px 45px;
  border: 0;
}
.p-pk-box .p-artwork__dot { z-index: 2; }
/* presskitのOutlineボックスはFigmaに合わせ 左上=ピンク / 右上=白（＝色巡回の初期位相） */
.p-pk-box .p-artwork__dot--tl { background: var(--color-badge-pink); }
.p-pk-box .p-artwork__dot--tr { background: #fff; }
/* 四隅ドットの色巡回（Artworkと同じ。初期＝TLピンク/TR白/BR白/BL青 に合わせて位相ずらし） */
.p-pk-box .p-artwork__dot { animation: fj-dot-rot 8s steps(1, end) infinite; }
.p-pk-box .p-artwork__dot--tl { animation-delay: -2s; }  /* ピンク */
.p-pk-box .p-artwork__dot--tr { animation-delay: 0s; }   /* 白 */
.p-pk-box .p-artwork__dot--br { animation-delay: -4s; }  /* 白 */
.p-pk-box .p-artwork__dot--bl { animation-delay: -6s; }  /* 青 */
@media (prefers-reduced-motion: reduce) {
  .p-pk-box .p-artwork__dot { animation: none; }
}
.p-pk-block { position: relative; padding-bottom: 22px; margin-bottom: 22px; }
/* 区切り線は手描き風（ジグザグ）に */
.p-pk-block::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: repeat-x left center / 28px 6px url("../img/divider-wave.svg");
}
.p-pk-block__title {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 32px;   /* Figma SP/PCとも32px */
  margin-bottom: 14px;
}
.p-pk-block__text {
  /* 欧文はConvergence→和文はKiwi Maruの順で当てる */
  font-family: var(--font-en);
  font-size: 15px;
  line-height: 1.85;
  color: #1a1a1a;
  /* 文字詰め（約物・和欧間のアキを詰める） */
  font-feature-settings: "palt" 1;
  letter-spacing: .01em;
}
/* 同一ブロック内で段落が続く場合の間隔 */
.p-pk-block__text + .p-pk-block__text { margin-top: 1em; }
.p-pk-qf__title {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 32px;   /* Figma SP/PCとも32px */
  margin: 6px 0 16px;
  line-height: 1.2;
}
/* Figma 478:521：ラベルを上・値を下に積む2段組み（ラベル/値とも15px・各24px＝行48px、
   区切り線まで12px、次の行まで12px＝ピッチ72px）。旧実装は dt/dd の横2列だった */
.p-pk-facts__row {
  position: relative;
  display: block;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.p-pk-facts__row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: repeat-x left center / 28px 6px url("../img/divider-wave.svg");
}
.p-pk-facts__row:last-child { margin-bottom: 0; }
.p-pk-facts__row:last-child::after { display: none; }
.p-pk-facts__row dt { font-family: var(--font-en); font-size: 15px; line-height: 1.6; font-feature-settings: "palt" 1; }
.p-pk-facts__row dd { font-family: var(--font-en); font-size: 15px; line-height: 1.6; word-break: break-all; font-feature-settings: "palt" 1; letter-spacing: .01em; }
.p-pk-facts__row dd a { text-decoration: underline; text-underline-offset: 3px; }

/* Video */
.p-pk-video { padding: 56px 0 76px; }
.p-pk-video__deco { display: none; }
.p-pk-video__frame {
  position: relative;
  max-width: 706px;
  margin: 0 auto;
  aspect-ratio: 706 / 401;
  overflow: hidden;
  border: var(--line-w) solid var(--color-line);
  background: #fff;
}
/* 再生ボタン＝赤い円（Figma Group5） */
.p-pk-video__play-btn { width: 74px; height: 74px; }
.p-pk-video__play-bg { fill: #f41d21; transition: fill .25s; }
.p-pk-video__frame .p-trailer__play:hover .p-pk-video__play-bg { fill: #d4181c; }

/* Screenshots（無限オートスクロール・サイズ可変） */
.p-pk-shots { padding: 56px 0 76px; }
.p-pk-shots__marquee {
  overflow: hidden;
  margin-top: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.p-pk-shots__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: fj-marquee 40s linear infinite;
}
.p-pk-shots__item {
  flex: 0 0 auto;
  margin-right: 22px;
  height: 200px;
  aspect-ratio: 16 / 9;
  border: var(--line-w) solid var(--color-line);
  background: #fff;
  overflow: hidden;
}
.p-pk-shots__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* サイズ可変（デザイン参照） */
.p-pk-shots__item--lg { height: 260px; }
.p-pk-shots__item--md { height: 224px; }
.p-pk-shots__item--sm { height: 180px; }
@keyframes fj-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .p-pk-shots__track { animation: none; }
}

/* Logos */
.p-pk-logos { padding: 56px 0 84px; }
.p-pk-logos__row {
  display: flex;
  flex-direction: column;   /* SP＝縦積み（Figma準拠） */
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 43px);   /* Figma：タイトルロゴとえんロゴの間隔43px */
}
/* SPはFigma 463:291＝305px（画面いっぱい近く）、PCは672:277＝288px */
.p-pk-logos__wordmark { width: min(305px, 100%); height: auto; }
/* 黒ロゴをそのまま置く（旧：黒地に白ロゴ）。背景は敷かない */
.p-pk-logos__emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 161px;    /* Figma SP 463:296＝161×161 */
  height: 161px;
}
.p-pk-logos__emblem img { width: 100%; height: 100%; object-fit: contain; }

/* 背景装飾の浮遊は「生き物」だけ（moon＝enemy_15 / snail）。草・植物・クリスタルは静止 */
.p-pk-outline__deco--enemy { animation: fj-float 4s ease-in-out infinite; will-change: transform; }
.p-pk-video__deco--snail  { animation: fj-float 4.6s ease-in-out infinite; animation-delay: -1.4s; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .p-pk-outline__deco--enemy,
  .p-pk-video__deco--snail { animation: none; }
}

@media (min-width: 768px) {
  .p-pk-facts__row { grid-template-columns: 140px 1fr; }
  .p-pk-logos__row { flex-direction: row; }   /* タブレット以上＝横並び */
}

@media (min-width: 1024px) {
  .p-pk-outline { padding: 140px 0 100px; }
  /* 左＝Outline見出し＋装飾 / 右＝ボックス の2カラム */
  .p-pk-outline__inner {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 710px);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }
  .p-pk-outline__aside { position: relative; align-self: stretch; }
  .p-pk-outline__title { text-align: left; margin: 6px 0 0; font-size: 64px; }
  .p-pk-outline__title::after { left: 0; transform: none; width: 100%; }
  /* presskit各セクション見出しはFigma準拠で64px */
  .p-pk-video .c-heading,
  .p-pk-shots .c-heading,
  .p-pk-logos .c-heading { font-size: 64px; }
  /* Figma 358:1881：枠710pxに対し中身は538px（左右86px）。上52 / 下67（いずれもborder 5pxを引く） */
  .p-pk-box { margin: 0; max-width: none; padding: 46px 80px 61px; }
  .p-pk-box.is-hand-outline { padding: 52px 86px 67px; }
  .p-pk-qf__title { margin: 51px 0 32px; }
  .p-pk-block__title,
  .p-pk-qf__title { font-size: 32px; }
  .p-pk-video { padding: 80px 0 100px; }
  .p-pk-shots { padding: 80px 0 100px; }
  .p-pk-shots__item { margin-right: 30px; height: 300px; }
  .p-pk-shots__item--lg { height: 390px; }
  .p-pk-shots__item--md { height: 340px; }
  .p-pk-shots__item--sm { height: 264px; }
  .p-pk-logos { padding: 80px 0 110px; }
  .p-pk-logos__emblem { width: 186px; height: 186px; }   /* Figma 669-323：えんロゴ186px */
  .p-pk-logos__wordmark { width: 288px; }                /* Figma 672:277：PCは288×131 */

  /* 装飾（左カラム内・PC） */
  .p-pk-outline__deco { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .p-pk-outline__deco-item { position: absolute; background: no-repeat center / contain; }
  .p-pk-outline__deco--plant { width: clamp(230px, 24vw, 340px); aspect-ratio: 816 / 1278; left: 0; top: 470px; background-image: url("../img/presskit-plant.png"); }
  .p-pk-outline__deco--enemy { width: clamp(100px, 9vw, 135px); aspect-ratio: 719 / 443; left: 44%; top: 265px; background-image: url("../img/presskit-moon.png"); }

  .p-pk-video__deco { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .p-pk-video .l-inner { position: relative; z-index: 1; }
  .p-pk-video__deco--grass { width: 190px; aspect-ratio: 2373 / 1144; left: 3%; top: 12%; background-image: url("../img/presskit-kusa.png"); }
  .p-pk-video__deco--crystal { width: 78px; aspect-ratio: 615 / 744; right: 4%; top: 30%; background-image: url("../img/presskit-crystal.png"); }
  .p-pk-video__deco--snail { width: 86px; aspect-ratio: 480 / 388; left: 7%; bottom: 16%; background-image: url("../img/presskit-snail.png"); }
  .p-pk-video__deco--grass2 { width: 178px; aspect-ratio: 2373 / 1144; right: 4%; bottom: 8%; background-image: url("../img/presskit-kusa.png"); }
}