/* 重なり順：①スクロールする中身（z1） ②固定の題字（z2） ③文字・ボタン（z3以上）
   .sec に z-index を付けると③が題字の下に潜るので付けない */
:root {
  --blue: #08449a;
  --navy: #06204d;
  --title-opacity: 0.16;
  --title-ratio: 1.3221; /* 題字SVGの viewBox 744.6 / 563.2 */
  --img-ratio: 1.3386; /* イラスト 2048 / 1530 */

  /* スマホ（Design：題字366×276.8、イラスト696×520、下に文字118px） */
  --title-w: min(93.85vw, calc(91svh * var(--title-ratio)));
  --person-h: min(133.33vw, calc(100svh - 130px));
  --person-bottom: 118px;
  --person-anchor: 0.52; /* 顔優先の案B：画像の横52%を画面中央へ */
  --square: min(100vw, calc(100svh - 230px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #fff; }
body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
p, h2 { margin: 0; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sr-only:focus { outline: none; }

/* 固定の題字 */
.title-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.title {
  display: block;
  width: var(--title-w);
  aspect-ratio: 744.6 / 563.2;
  opacity: var(--title-opacity);
}

.sec {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.ui { position: absolute; z-index: 3; }

/* メインビジュアル */
.hero { background: #fff; }
.person {
  position: absolute;
  z-index: 1;
  height: var(--person-h);
  width: calc(var(--person-h) * var(--img-ratio));
  max-width: none;
  left: calc(50% - var(--person-h) * var(--img-ratio) * var(--person-anchor));
  bottom: var(--person-bottom);
}
.ep {
  left: 0;
  right: 0;
  bottom: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.heading {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.cue {
  left: calc(50% - 14px);
  bottom: 10px;
  color: var(--blue);
}
.tag {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: #4a5568;
  border: 1px dashed #8a94a6;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* 動画シーン（スマホ：スクエア） */
.scene-dark { background: var(--navy); }
.scene-light { background: #fff; }
.video {
  position: absolute;
  z-index: 1;
  display: block;
  left: calc(50% - var(--square) / 2);
  top: calc(50% - var(--square) / 2);
  width: var(--square);
  height: var(--square);
  object-fit: cover;
  background: var(--navy);
}
.panel {
  left: 0;
  right: 0;
  top: calc(50% + var(--square) / 2 + 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.panel-dark .heading { font-size: 30px; color: #fff; }
.panel-dark .tag { color: #d3dcec; border-color: #8fa3c7; }
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blue);
}
.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  width: calc(100vw - 80px);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.link-btn:hover { background: #06357d; }

/* ボタン類 */
.round-btn {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}
.toggle {
  right: calc(50% - var(--square) / 2 + 8px);
  top: calc(50% + var(--square) / 2 - 52px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(6, 32, 77, 0.86);
  color: #fff;
}
/* 自動再生できないときや動きを抑える設定では、静止画の中央に再生ボタンを出す */
.is-blocked .toggle {
  right: calc(50% - 36px);
  top: calc(50% - 36px);
  width: 72px;
  height: 72px;
}
.is-blocked .toggle svg { width: 30px; height: 30px; }
.replay {
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  border: 1px solid #c9d3e3;
  background: #fff;
  color: var(--blue);
}
.skip {
  position: fixed;
  z-index: 5;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--blue);
}

/* PC：横長の画面では イラスト全体を中央、動画は全面 */
@media (min-aspect-ratio: 1/1) {
  :root {
    --title-w: min(75.28vw, calc(91.1svh * var(--title-ratio)));
    --person-h: min(73.33svh, calc(90vw / var(--img-ratio)));
    --person-bottom: 90px;
    --person-anchor: 0.5;
  }
  .ep {
    bottom: 28px;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
  }
  .heading { font-size: 28px; }
  .tag { font-size: 12px; }
  .cue { display: none; }
  .replay { top: 24px; right: 24px; }
  .skip { top: 24px; right: 24px; padding: 0 20px; font-size: 14px; }

  .scene-light { background: var(--navy); }
  .video { left: 0; top: 0; width: 100%; height: 100%; }
  .panel {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 40px;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 14px;
    white-space: nowrap;
    border-radius: 999px;
  }
  .panel-dark { padding: 14px 28px; background: rgba(6, 32, 77, 0.86); }
  .panel-dark .heading { font-size: 28px; }
  .panel-light { gap: 20px; padding: 10px 10px 10px 28px; background: rgba(255, 255, 255, 0.94); }
  .eyebrow { font-size: 15px; }
  .link-btn { width: auto; min-height: 52px; padding: 0 28px; gap: 12px; font-size: 22px; }
  .toggle { right: 32px; top: auto; bottom: 40px; width: 52px; height: 52px; }
  .is-blocked .toggle { right: calc(50% - 40px); top: calc(50% - 40px); bottom: auto; width: 80px; height: 80px; }
}

/* 冒頭演出（秒数は仮。Design改訂3のタイムライン） */
.idle main, .idle .title { opacity: 0; }
.idle, .play { overflow: hidden; }

.play .title { animation: pib-title 6.2s 0.2s both; }
.play .person-l { animation: pib-person 1.8s 2s both; }
.play .person-r { animation: pib-person 1.8s 3.5s both; }
.play .ep { animation: pib-fade 0.6s 6.3s both; }
.play .cue { animation: pib-fade 0.6s 6.6s both; }
.play .skip { animation: pib-skip 0.4s both; }

@keyframes pib-title {
  0% { opacity: 0; transform: scale(0.97); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  26% { opacity: 1; transform: none; }
  77% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: var(--title-opacity); }
}
@keyframes pib-person {
  0% { opacity: 0; transform: translate(var(--sx), var(--ty)) scale(2); animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
  30% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(2); }
  45% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(2); animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes pib-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes pib-skip {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .play * { animation: none !important; }
}