/* =========================================================================
   2026-09-26 デザイン性の底上げ（layers.html 専用・かおりさん「全部やっていいよ」）
   1 構図の変化（TEAM を左右反転、FLOW を左右2段組）
   2 背景の巨大な英字（輪郭文字・スクロールでゆっくり横へ）
   3 画面いっぱいの写真の区切り（MEMBERS と FLOW の間）
   4 明暗のリズム（ROLES をチャコール、FLOW を紙）
   5 細部（ROLES のカードはカーソルで色が戻る、上端に読んだ位置のライムの細線）
   ========================================================================= */

/* ---------- 2 背景の巨大な英字 ---------- */
.ly-ghost {
  position: absolute; left: 0; top: 50%; z-index: 0; margin: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--f-en); font-weight: 900; font-style: italic; font-size: 32vw; line-height: 0.8; letter-spacing: -0.01em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(242, 239, 232, 0.11);
  transform: translate3d(var(--gx, 0px), -50%, 0); will-change: transform;
}
.team .ly-ghost, .ly-flowPaper .ly-ghost { -webkit-text-stroke-color: rgba(10, 10, 10, 0.1); }
.ly-ghost--roles { top: 58%; }
.ly-ghost--team { top: 52%; }
.ly-ghost--flow { top: 30%; font-size: 38vw; }

/* ---------- 4 ROLES をチャコールに ---------- */
.roles__stage { background: var(--charcoal); }
.roles__intro { background: linear-gradient(90deg, rgba(26, 27, 30, 0.96) 80%, rgba(26, 27, 30, 0)); }
.roles__viewport { z-index: 1; }
.roles__intro { z-index: 3; }

/* ---------- 5 ROLES のカード：カーソルを乗せると写真に色が戻る ---------- */
@media (hover: hover) {
  .role:hover .role__img img { filter: grayscale(0) brightness(0.95) contrast(1.05); }
}

/* ---------- 1 TEAM：写真のカードを左、見出しを右へ ---------- */
@media (min-width: 900px) {
  .team__grid { position: relative; z-index: 1; grid-template-columns: 1fr 30%; }
  .team__intro { order: 2; }
  .team__deck { order: 1; }
}

/* ---------- 3 画面いっぱいの写真の区切り ---------- */
.ly-cine { position: relative; z-index: 7; height: calc(var(--vh) * 115); overflow: hidden; background: #000; }
.ly-cine__media { position: absolute; inset: -8% 0; }
.ly-cine__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  filter: contrast(1.12) brightness(0.8);
  transform: translate3d(0, var(--cy, 0px), 0) scale(var(--cz, 1.14)); will-change: transform;
}
.ly-cine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 30%, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, 0.85) 100%);
}
.ly-cine__copy {
  position: absolute; left: calc(var(--gutter) + var(--rail)); bottom: 16vh; z-index: 1; margin: 0; color: var(--paper);
  opacity: var(--co, 0); transform: translate3d(0, calc((1 - var(--co, 0)) * 30px), 0);
}
.ly-cine__en { display: block; font-family: var(--f-en); font-weight: 900; font-style: italic; font-size: clamp(48px, 7vw, 120px); line-height: 0.9; }
.ly-cine__ja { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 900; font-size: clamp(16px, 1.4vw, 21px); letter-spacing: 0.06em; }
.ly-cine__ja::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ---------- 1＋4 FLOW：紙の地・左に見出し、右に手順と FAQ ---------- */
.ly-flowPaper { background: var(--paper) url('../img/paper.jpg') center / 900px auto; color: var(--black); overflow: visible; }
.ly-flowPaper .wrap { position: relative; z-index: 1; }
.ly-flowPaper .label b { border-color: var(--black); }
.ly-flowPaper .flow__title { color: var(--gray); }
.ly-flowPaper .flow__title > span:not(.ch) { color: var(--black); }
.ly-flowPaper .flow__title { white-space: nowrap; }
/* 青い払いは見出しの列の中、「STARTS HERE.」の下だけ（PC・スマホ共通） */
.ly-flowPaper .ly-flowSlash { left: -0.15em; top: 1.95em; width: 5.4em; height: 0.95em; }
.ly-flowPaper .flow__line { background: rgba(10, 10, 10, 0.15); }
.ly-flowPaper .flow__line i { background: var(--black); }
.ly-flowPaper .step::before { background: var(--paper); border-color: rgba(10, 10, 10, 0.4); }
.ly-flowPaper .step.is-on::before { background: var(--black); border-color: var(--black); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--lime); }
.ly-flowPaper .step__no { color: rgba(10, 10, 10, 0.5); }
.ly-flowPaper .step h3, .ly-flowPaper .step:last-child h3 { color: var(--black); }
.ly-flowPaper .step p { color: rgba(10, 10, 10, 0.7); }
.ly-flowPaper .note { color: rgba(10, 10, 10, 0.55); }
.ly-flowPaper .faq { border-top-color: rgba(10, 10, 10, 0.2); }
.ly-flowPaper .faq__item { border-bottom-color: rgba(10, 10, 10, 0.2); }
.ly-flowPaper .faq__q, .ly-flowPaper .faq__q[aria-expanded='true'] { color: var(--black); }
.ly-flowPaper .faq__a p { color: rgba(10, 10, 10, 0.75); }

@media (min-width: 900px) {
  .ly-flowGrid { display: grid; grid-template-columns: 5fr 7fr; column-gap: 6vw; align-items: start; }
  .ly-flowHead { position: sticky; top: 16vh; }
  /* 左の列の幅に収まる大きさ・3行。1文字ずつに分けた見出しでも単語の途中で折れないよう nowrap */
  .ly-flowPaper .flow__title { font-size: clamp(48px, 6.4vw, 112px); white-space: nowrap; }

  /* 右の列では手順を縦に並べる */
  .ly-flowBody .flow__steps { margin-top: 5vh; }
  .ly-flowBody .flow__steps ol { grid-template-columns: 1fr; gap: 0; }
  .ly-flowBody .flow__line { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .ly-flowBody .flow__line i { transform: scaleY(var(--flow, 0)); transform-origin: top; }
  .ly-flowBody .step { padding: 0 0 5vh 40px; }
  .ly-flowBody .step::before { top: 6px; }
  .ly-flowBody .step__no { position: static; display: block; margin-bottom: 4px; }
  .ly-flowBody .faq { margin-top: 8vh; }
}

/* FINAL の上端に紙の破れ縁（紙の FLOW から黒の FINAL へ） */
.final > .tear { z-index: 9; }

/* ---------- 5 読んだ位置を示す細いライムの線（信号） ---------- */
.ly-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 55; height: 2px; pointer-events: none; }
.ly-progress i { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- スマホ ---------- */
@media (max-width: 899px) {
  .ly-ghost { font-size: 46vw; }
  .ly-ghost--roles { display: none; }
  .ly-cine { height: calc(var(--vh) * 90); }
  .ly-cine__media img { object-position: 50% 28%; }
  .ly-cine__copy { left: var(--gutter); right: var(--gutter); bottom: 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ly-ghost { transform: translate3d(0, -50%, 0); }
  .ly-cine__media img { transform: none; }
  .ly-cine__copy { opacity: 1; transform: none; }
}

/* ROLES 右端の紙のパネル：手書きをやめ、サイトの英字と同じ書体で（2026-09-26） */
.roles__panel .ly-panelText {
  margin: 0 0 0 12%; transform: none;
  font-family: var(--f-en); font-weight: 900; font-style: italic;
  font-size: clamp(24px, 2.1vw, 34px); line-height: 0.92; letter-spacing: 0.01em; color: var(--black);
}

/* ---------- 2026-09-26 追加の整理 ----------
   ROLES の紙のパネルを外したので、カードの列の右の余白（パネル分）も戻す */
@media (min-width: 900px) { .roles__track { padding-right: 0; } }

/* スマホの MISSION：拳の写真を大きな写真（キーボードの手）の右下の角に重ね、
   「ひとりのプレイ → 仲間とつながる」を1か所で見せる。本文は写真の下から */
@media (max-width: 899px) {
  .mission__row { position: relative; }
  .ly-mPhoto { position: absolute; right: -6px; top: calc((100vw - 2 * var(--gutter)) * 0.75 - 15vw); width: 46vw; margin: 0; z-index: 2; }
  .mission__body { margin-top: 18vw; }
}

/* スマホの上部：スクロールしたら黒い帯の上にロゴとメニュー（本文と重ならない） */
@media (max-width: 899px) {
  .nav { transition: transform 0.5s var(--ease-out), background-color 0.3s, padding 0.3s; }
  .nav.is-scrolled { mix-blend-mode: normal; color: var(--paper); background: rgba(10, 10, 10, 0.94); padding-top: 12px; padding-bottom: 12px; }
}