/* ===== Home 専用（2026-09-30 モブ群衆ヒーロー） =====
   editorial.css の後に読み込む。Homeだけ白背景・日本語見出しに戻す。 */

:root {
  --bg: #fff;
  --bg-card: #fff;
}

/* ===== Hero ===== */
.mob-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(100vh, 900px);
  min-height: 560px;
  padding-top: 56px;
  overflow: hidden;
  border-bottom: 2px solid var(--text);
}
.mob-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 88px) 32px 0;
}
.mob-hero-kicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 900;
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.mob-hero-kicker span {
  background: var(--text);
  color: #fff;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  align-self: center;
}
.mob-hero-kicker small { font-size: 0.8rem; font-weight: 700; color: var(--text-dim); letter-spacing: 0.2em; }
.mob-hero-title {
  font-family: var(--jp);
  font-weight: 900;
  font-size: clamp(3.2rem, min(10.5vw, 13vh), 9.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.mob-hero-title span { display: block; white-space: nowrap; }
.mob-hero-ore { color: var(--orange); }
.mob-hero-sub {
  margin-top: 18px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dim);
}

/* 文字の下の残り高さを埋める。横は枠外（overflow visible）まで群衆とビルが続く */
.mob-crowd {
  display: block;
  flex: 1 1 0;
  min-height: 200px;
  width: 100%;
  margin-top: 24px;
  overflow: visible;
  user-select: none;
}

/* 灰色は歩き続け、是乃（オレンジ）だけが立ち尽くす */
.mob-row { animation: crowdLeft linear infinite; }
.mob-row-r { animation-name: crowdRight; }
@keyframes crowdLeft  { to { transform: translateX(-1600px); } }
@keyframes crowdRight { to { transform: translateX(1600px); } }
.mob-walker { animation: walkBob 0.9s ease-in-out infinite; }
@keyframes walkBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.is-offscreen .mob-row, .is-offscreen .mob-walker { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mob-row, .mob-walker { animation: none; }
}

/* ===== 見出し：日本語を主に、英語は添え字 ===== */
.section-title {
  align-items: baseline;
  gap: 16px;
  font-family: var(--jp);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  border-bottom: 2px solid var(--text);
  padding-bottom: 10px;
}
.section-title::before { display: none; }
.section-title { flex-wrap: wrap; row-gap: 4px; }
.section-title .ttl-en {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.4em;
  letter-spacing: 0.14em;
  color: var(--orange);
}

/* 衣装切替ボタン：ラベルが1文字ずつ折り返さないように */
.costume-toggle-btn { white-space: nowrap; }

/* ===== Responsive ===== */
/* 768px はホーム内スクリプトの matchMedia と揃える */
@media (max-width: 768px) {
  .mob-hero { height: auto; min-height: 0; }
  .mob-hero-sub { font-size: 0.8rem; }
  .mob-hero-copy { padding: 40px 16px 0; }
  .mob-hero-title { font-size: calc((100vw - 32px) / 6.4); } /* 「モブといえば」6文字が1行に収まる幅 */
  .mob-crowd { flex: none; height: 62vw; }
  .section-title { font-size: 1.9rem; }
  /* スマホは立ち絵の顔に被るので、切替ボタンを画像の上に出す */
  .costume-toggle { position: static; transform: none; padding-top: 12px; }
}