/* ============================================
   場面の中身 — 10種のブロック（しらべたら、ちがった）
   骨は「AIのいま 紙もの版」と同じ。中身だけ差し替えてある。
   ============================================
   共通の作り:
     .card        白いカード。紙が1枚のっている見た目（縁＋下に影）
     .card > .no  左肩に飛び出す番号タブ（色は .is-coral / .is-blue / .is-plain）
     .card .band  色のついた帯。見出しが入る
     .card .body  白い中身
     .bubble      吹き出し。中に台詞。しっぽは左につく
     .ct          SVG キャラクターの入れ物（中身は js/cast.js が入れる）
   ============================================ */

/* ── 共通：白いカードと番号タブ ───────────────────────────────────────── */
.card {
  position: relative;
  margin-left: 12px;              /* 番号タブが左へ飛び出すぶんを空けておく */
  border: 2px solid var(--card-line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 5px 0 rgba(90, 70, 40, .07), 0 14px 26px rgba(90, 70, 40, .09);

  .no {
    position: absolute;
    left: -20px;
    top: -6px;
    display: grid;
    place-items: center;
    min-width: 56px;
    height: 60px;
    padding: 0 10px;
    border-radius: 12px 4px 4px 14px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    box-shadow: 0 4px 0 rgba(90, 70, 40, .16);
  }

  .band {
    padding: 10px 16px 10px 50px;
    border-radius: 15px 15px 0 0;

    b {
      display: block;
      font-size: 28px;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: -.035em;
    }
  }

  .body { padding: 12px 16px 14px }

  &.is-coral { .no { background: var(--coral) } .band { background: var(--coral-tint) } }
  &.is-blue { .no { background: var(--blue) } .band { background: var(--blue-tint) } }
  &.is-plain { .no { background: #8d8375 } .band { background: #e7e0d2 } }
}

/* ── 共通：吹き出し ───────────────────────────────────────────────────── */
.bubble {
  position: relative;
  display: inline-block;
  padding: 12px 16px;
  border: 2px solid var(--card-line);
  border-radius: 18px;
  background: var(--card);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -.03em;
  box-shadow: 0 4px 0 rgba(90, 70, 40, .07);

  /* しっぽ。四角を45度まわして、2辺だけ縁を残す */
  &::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 26px;
    width: 16px;
    height: 16px;
    border-left: 2px solid var(--card-line);
    border-bottom: 2px solid var(--card-line);
    background: var(--card);
    rotate: 45deg;
  }
}

/* ── 共通：SVG キャラクターの入れ物 ───────────────────────────────────── */
.ct {
  flex: none;
  &.is-flip .ct-svg { scale: -1 1 }
}

/* ============================================
   ① hook — つかみ。よどみなく喋る男がいて、それが答えではないと消す
   ============================================ */
.bk-hook {
  justify-content: center;
  padding-bottom: 200px;
}

.hk-line {
  position: relative;
  margin: 0 0 30px;
  font-size: 56px;
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -.045em;

  em {
    position: relative;
    color: var(--coral);
    font-style: normal;

    /* 黄色い蛍光ペン。文字の下半分に敷く */
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 8px;
      height: 24px;
      border-radius: 6px;
      background: var(--yellow);
      opacity: .85;
    }
  }
}

.hk-talk {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hk-man { width: 136px }

.hk-bubble {
  flex: 1;
  margin-top: 14px;

  /* 中身の無い「よくしゃべっている」線。長さを変えて言葉らしく見せる */
  i {
    display: block;
    height: 11px;
    margin: 9px 0;
    border-radius: 999px;
    background: #ded2ba;

    &:nth-of-type(1) { width: 92% }
    &:nth-of-type(2) { width: 100% }
    &:nth-of-type(3) { width: 64% }
  }
}

.hk-x {
  position: absolute;
  right: 46px;
  top: -14px;
  color: var(--coral);
  font-size: 118px;
  font-weight: 900;
  line-height: 1;
  opacity: .92;
}

/* ============================================
   ② title — 研究の正体。録音された実際のデート
   ============================================ */
/* 🚨 ナレーター（大・右下 x348..538 / y571..856）の下に中身を入れない。
   上詰めにして全体を持ち上げ、いちばん下の出典は幅を切って左半分に収める。 */
.bk-title {
  justify-content: flex-start;
  padding-top: 100px;
  padding-bottom: 176px;
}

.ti-eyebrow {
  margin: 0 0 8px;
  color: var(--coral);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: .02em;
}

.ti-name {
  margin: 0 0 22px;
  font-size: 46px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -.045em;
}

/* 向かい合って座っている2人。あいだに小さなテーブル */
.ti-scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
  padding-bottom: 16px;

  /* 床の線 */
  &::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 5px;
    border-radius: 999px;
    background: #e0d5bf;
  }
}

.ti-p { width: 148px }

.ti-table {
  width: 58px;
  height: 74px;
  margin: 0 -6px 4px;
  border-radius: 8px 8px 4px 4px;
  background: #cdb996;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .08);
}

.ti-rec {
  position: absolute;
  right: 4px;
  top: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--coral);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;

  &::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: ti-rec 1.6s ease-in-out infinite;
  }
}

@keyframes ti-rec {
  0%, 100% { opacity: 1 }
  50% { opacity: .18 }
}

.ti-nums {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;

  li {
    flex: 1;
    padding: 10px 6px 8px;
    border: 2px solid var(--card-line);
    border-radius: 14px;
    background: var(--card);
    text-align: center;
  }

  b {
    display: block;
    color: var(--coral);
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -.05em;
  }

  span {
    color: var(--ink-mid);
    font-size: 15px;
    font-weight: 700;
  }
}

.ti-src {
  margin: 0;
  width: 310px;                   /* ナレーターの手前で折り返す */
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================
   ③ real — 芯。同じ一言への、2通りの返し方
   ============================================ */
.bk-real { padding-bottom: 176px }

.rl-say {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.rl-w { width: 112px }

.rl-say .bubble { margin-top: 18px }

.rl-card {
  margin-bottom: 16px;

  .body {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  p {
    margin: 0;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -.03em;
  }
}

.rl-m { width: 104px }

.rl-note {
  margin: 0;
  color: var(--ink-mid);
  font-size: 19px;
  font-weight: 900;
  text-align: right;
}

/* ============================================
   ④ cards — 女性4500人が「清潔感がない」と感じた瞬間
   ============================================ */
/* ナレーター（小・右下 y633〜）に棒がかからないよう、中身を上に固める */
.bk-cards {
  justify-content: flex-start;
  padding-top: 96px;
}

.cd-head { font-size: 40px }

.cd-sub {
  margin: 0 0 24px;
  color: var(--ink-mid);
  font-size: 19px;
  font-weight: 900;
}

.cd-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;

  li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 2px solid var(--card-line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 4px 0 rgba(90, 70, 40, .07);
  }

  b {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.03em;
  }

  em {
    align-self: center;
    color: var(--coral);
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -.04em;
  }

  /* 棒。--w が割合（0〜1） */
  i {
    grid-column: 1 / -1;
    height: 14px;
    border-radius: 999px;
    background: var(--track);

    &::before {
      content: "";
      display: block;
      width: calc(var(--w) * 100%);
      height: 100%;
      border-radius: 999px;
      background: var(--teal);
    }
  }
}

.cd-src {
  margin: 0;
  width: 356px;                   /* ナレーター（小）の手前で折り返す */
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================
   ⑤ versus — 男はヒゲを剃り、女はにおいを見ている
   ============================================ */
.vs-row {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.vs-col {
  flex: 1;
  margin-left: 14px;

  .body { padding: 8px 10px 12px }
}

.vs-p {
  width: 100%;
  margin-bottom: 4px;
}

.vs-label {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  letter-spacing: -.03em;

  em {
    display: block;
    color: var(--coral);
    font-size: 32px;
    font-style: normal;
    letter-spacing: -.05em;
  }
}

.vs-gap {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 900;
  text-align: center;
  letter-spacing: -.04em;

  em {
    position: relative;
    color: var(--ink);
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 4px;
      height: 20px;
      border-radius: 6px;
      background: var(--yellow);
    }
  }
}

.vs-src {
  margin: 0;
  width: 356px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

/* ============================================
   ⑥ numbers — また会いたいと答えた割合と、8%の効き目
   ============================================ */
/* 🚨 ナレーター（大）は z-index 5 で中身より前に出る。下に潜らせない＝上に固める */
.bk-numbers {
  justify-content: flex-start;
  padding-top: 96px;
}

.nm-head { font-size: 42px }

.nm-pair {
  margin: 8px 0 22px;
  padding: 0;
  list-style: none;

  li {
    display: grid;
    grid-template-columns: 76px auto 1fr auto;
    gap: 0 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 8px 16px 8px 8px;
    border: 2px solid var(--card-line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 4px 0 rgba(90, 70, 40, .07);
  }

  b {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.03em;
  }

  i {
    height: 16px;
    border-radius: 999px;
    background: var(--track);

    &::before {
      content: "";
      display: block;
      width: calc(var(--w) * 100%);
      height: 100%;
      border-radius: 999px;
      background: var(--teal);
    }
  }

  em {
    color: var(--coral);
    font-size: 28px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -.04em;
  }
}

/* 顔だけ見せる。肩から下は丸く切り落とす */
.nm-face {
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 50%;
  background: #efe6d3;

  .ct-svg { translate: 0 6px }
}

.nm-stamp {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--yellow);
  font-size: 25px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  letter-spacing: -.03em;
  rotate: -1.2deg;
  box-shadow: 0 5px 0 rgba(120, 90, 20, .18);

  b { font-size: 34px; letter-spacing: -.05em }
}

.nm-src {
  margin: 0;
  width: 308px;                   /* ナレーターの手前で切る */
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

/* ============================================
   ⑦ caution — 正直な注意点。シリーズの芯。削らない
   ============================================ */
.bk-caution {
  justify-content: flex-start;
  padding-top: 96px;
}

.cu-q { font-size: 44px }

.cu-x {
  margin: 18px 0 14px;
  color: var(--coral);
  font-size: 82px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.cu-quote {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-left: 8px solid var(--coral);
  border-radius: 4px 16px 16px 4px;
  background: var(--card);
  box-shadow: 0 5px 0 rgba(90, 70, 40, .07);

  p {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.38;
    letter-spacing: -.035em;
  }

  em {
    color: var(--coral);
    font-style: normal;
  }

  small {
    color: var(--ink-mid);
    font-size: 16px;
    font-weight: 700;
  }
}

.cu-note {
  margin: 0;
  width: 308px;                   /* ナレーターの手前で折り返す */
  color: var(--ink-mid);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

/* ============================================
   ⑧ ryuichi — 私見の枠。シリーズ固定。ここだけ色が変わる
   ============================================ */
.bk-ryuichi {
  justify-content: flex-start;
  padding-top: 168px;
  padding-bottom: 200px;
}

.ry-note {
  position: relative;
  padding: 34px 26px 30px;
  border-radius: 6px;
  background: #fdf3cf;
  box-shadow: 0 6px 0 rgba(120, 90, 20, .13), 0 18px 34px rgba(90, 70, 40, .12);
  rotate: -1.4deg;
}

/* 上辺に貼ったマスキングテープ */
.ry-tape {
  position: absolute;
  left: 50%;
  top: -18px;
  width: 132px;
  height: 36px;
  translate: -50% 0;
  background: rgba(221, 92, 60, .38);
  rotate: -2.4deg;
  box-shadow: inset 0 0 0 1px rgba(221, 92, 60, .22);
}

.ry-tag {
  margin: 0 0 14px;
  color: var(--coral);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .04em;
}

.ry-body {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.035em;
}

.ry-punch {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -.04em;

  em {
    position: relative;
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 2px;
      height: 22px;
      border-radius: 6px;
      background: rgba(221, 92, 60, .3);
    }
  }
}

/* ============================================
   ⑨ story — 同じ研究の最後の質問。いちばん効く手が挙がらない
   ============================================ */
.st-q {
  margin: 0 0 18px;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.26;
  letter-spacing: -.04em;

  &::after {
    content: "";
    display: block;
    width: 124px;
    height: 7px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--coral);
    rotate: -.5deg;
  }
}

.st-think {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.st-man { width: 118px }

.st-bubble {
  flex: 1;
  margin-top: 10px;
  padding: 14px 16px;
  border: 2px solid var(--card-line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 4px 0 rgba(90, 70, 40, .07);

  ul { margin: 0; padding: 0; list-style: none }

  li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 26px;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -.03em;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--teal);
    }

    &:last-child { margin-bottom: 0 }

    /* 挙がらなかった1本。灰色にして線を引く */
    &.is-out {
      color: var(--ink-soft);
      text-decoration: line-through;
      text-decoration-color: var(--coral);
      text-decoration-thickness: 4px;

      &::before { background: var(--track) }
    }
  }
}

.st-turn {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -.04em;

  em {
    color: var(--coral);
    font-style: normal;
  }
}

/* ============================================
   ⑩ end — 着地。個人の話に落とす。CTAは置かない
   ============================================ */
/* 🚨 手をふるナレーター（大・右下 y571〜）と取り合いにならないよう、中身は上に固める。
   下半分はナレーターの居場所。中央寄せのままだと締めの一文が彼女の下に潜る。 */
.bk-end {
  justify-content: flex-start;
  padding-top: 100px;
  padding-bottom: 196px;
}

.en-lead {
  margin: 0 0 20px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: -.04em;
}

/* 9番の「選ばれなかった」と締めのあいだを橋わたしする一文。
   これが無いと、質問をしていない側の人に「だから何をすればいいのか」が渡らない
   （2026-09-20 Ryuichi 指摘） */
.en-turn {
  margin: 0 0 20px;
  width: 400px;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: -.04em;

  em {
    position: relative;
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -5px;
      right: -5px;
      bottom: 3px;
      height: 18px;
      border-radius: 6px;
      background: var(--yellow);
      opacity: .8;
    }
  }
}

.en-ask {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 356px;
  margin-bottom: 22px;
}

.en-man { width: 112px }

.en-ask .bubble {
  margin-top: 14px;
  font-size: 22px;
}

.en-punch {
  margin: 0;
  font-size: 33px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.045em;

  em {
    position: relative;
    color: var(--coral);
    font-style: normal;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -6px;
      right: -6px;
      bottom: 4px;
      height: 24px;
      border-radius: 6px;
      background: var(--yellow);
      opacity: .85;
    }
  }
}