/* remedy-agent-finder: すべてのクラスに raf- / raf__ プレフィックスを付け、
   テーマへ漏れないよう自己完結させる。ポップアップは position: fixed のオーバーレイとして
   document.body 直下に生成される(記事の overflow/z-index の影響を受けないため)。

   トークンはホスト側(remedy-tokyo.co.jp/media, SWELLテーマ)の実測値をそのまま使う。
   新しいブランド色は追加しない(finder-design/RESTYLE.md 準拠)。 */

/* --raf-* トークンはポップアップにも必要。ダイアログは document.body 直下の
   .raf__overlay に描画され .raf の外に出るため、.raf 単独ではなく
   .raf, .raf__overlay の両方にトークンを定義する(以前は .raf にしかなく、
   ポップアップが透明・白文字不可視になっていた)。 */
.raf,
.raf__overlay {
  --raf-fg: #333;
  --raf-fg-secondary: #6b7280;
  --raf-line: #a2965a;
  --raf-link: #765d24;
  --raf-btn-bg: #e5d480;
  --raf-btn-border: #cbbb6c;
  --raf-label-bg: #000;
  --raf-tag-border: #ccc;
  --raf-tag-bg: #f9f9f9;
  --raf-surface: #fff;
  --raf-surface-secondary: #f9f9f9;
  --raf-stroke: #e5e5e5;
  --raf-radius: 6px;
  --raf-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --raf-font: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

.raf {
  box-sizing: border-box;
  max-width: 640px;
  margin: 32px auto;
  font-family: var(--raf-font);
  color: var(--raf-fg);
}

.raf *,
.raf *::before,
.raf *::after,
.raf__overlay *,
.raf__overlay *::before,
.raf__overlay *::after {
  box-sizing: border-box;
}

/* 見出しは本文と揃え、人物紹介から予約操作へは中央の軸でつなぐ。 */
.raf .raf__teaser {
  text-align: left;
}

.raf .raf__heading {
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 6px solid var(--raf-line);
  color: #000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

/* 1.6.0 spec 1(b): この業界(プリセットが無ければ一般順)の担当者を最大3名、
   3カラムのグリッドで見せる(ピル・カード枠・グラデーションは使わない)。 */
.raf .raf__teaser-agents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.raf .raf__teaser-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.raf .raf__teaser-agent-portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .raf .raf__teaser-agent-portrait {
    width: 72px;
    height: 72px;
  }
}

.raf .raf__teaser-agent-name {
  color: var(--raf-fg);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.raf .raf__teaser-agent-company {
  color: #6b7280;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .raf .raf__teaser-company-label {
    display: block;
  }
}

/* 1.6.0 spec 1(f): 「業界を選んで探す」は本文の外(details/summary)に隠しておく。
   ネイティブの details を使うため、開閉に追加JSは要らない。 */
.raf .raf__teaser-toggle {
  margin: 12px 0 0;
  text-align: center;
}

.raf .raf__teaser-toggle summary {
  color: var(--raf-link);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.raf .raf__teaser-toggle summary::-webkit-details-marker {
  display: none;
}

.raf .raf__teaser-toggle summary::before {
  content: "▸ ";
}

.raf .raf__teaser-toggle[open] summary::before {
  content: "▾ ";
}

.raf .raf__teaser-toggle .raf__teaser-chips {
  margin-top: 10px;
  justify-content: center;
}

.raf .raf__open-btn {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  padding: 12px 24px;
  border: 2px solid var(--raf-btn-border);
  border-radius: 5px;
  background: var(--raf-btn-bg);
  color: #000;
  font-size: 15.6px;
  font-weight: 500;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.raf .raf__open-btn:hover,
.raf .raf__open-btn:focus-visible {
  background: #ddc767;
}

.raf .raf__teaser-prompt {
  margin: 20px 0 10px;
  color: var(--raf-fg-secondary);
  font-size: 13px;
}

.raf .raf__teaser-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.raf .raf__teaser-chip {
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--raf-tag-border);
  border-radius: 4px;
  background: var(--raf-tag-bg);
  color: var(--raf-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.raf .raf__teaser-chip:hover,
.raf .raf__teaser-chip:focus-visible {
  border-color: var(--raf-line);
  background: #fff;
}

.raf .raf__privacy-note {
  margin: 0;
  color: var(--raf-fg-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.raf .raf__privacy-details {
  margin: 0;
  color: var(--raf-fg-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.raf .raf__privacy-details summary {
  width: fit-content;
  cursor: pointer;
}

.raf .raf__privacy-details p {
  margin: 4px 0 0;
}

.raf__overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 24, 39, 0.55);
}

.raf__overlay[hidden] {
  display: none;
}

body.raf__lock-scroll {
  overflow: hidden;
}

.raf__dialog {
  position: relative;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  border-radius: 8px;
  background: var(--raf-surface);
  box-shadow: var(--raf-shadow);
  font-family: var(--raf-font);
  color: var(--raf-fg);
  text-align: left;
}

.raf__dialog h2 {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 6px solid var(--raf-line);
  color: #000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

/* JUDGE fix #2: panel switches move focus to the panel programmatically
   (not via keyboard), so suppress the focus ring there while keeping it for
   real keyboard navigation elsewhere in the dialog. */
.raf__panel:focus:not(:focus-visible),
.raf__dialog h2:focus:not(:focus-visible) {
  outline: none;
}

.raf__step-sub {
  margin: 0 0 20px;
  color: var(--raf-fg-secondary);
  font-size: 13px;
  line-height: 1.7;
}

.raf__close {
  position: absolute;
  top: 12px;
  right: 12px;
  /* m8: 44px未満はタップ領域として狭すぎる。 */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--raf-fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.raf__panel[hidden] {
  display: none;
}

.raf__field {
  display: block;
  margin: 0 0 16px;
}

.raf__field span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--raf-fg);
}

.raf__field em {
  color: var(--raf-fg-secondary);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.raf__field select,
.raf__field input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--raf-tag-border);
  border-radius: 4px;
  background: #fff;
  color: var(--raf-fg);
  /* I7: 16px未満だとiOS Safariがフォーカス時に自動ズームし、ダイアログが
     横にはみ出したまま戻らなくなる。 */
  font-size: 16px;
}

.raf__field-error {
  margin: 6px 0 0;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.6;
}

.raf__field-error[hidden] {
  display: none;
}

.raf__field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}

.raf__field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--raf-fg);
}

.raf__field-label-row em,
.raf__field em.raf__optional {
  color: var(--raf-fg-secondary);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

/* 業界/年齢チップ: サイトのタグ(2px #ccc・角丸4px)と同じ見た目。
   選択中はラベルボックスと同じ黒背景・白文字にする(色分けバッジではなく
   「選ばれている」ことそのものを塗りで示す)。実データは data-raf-industry /
   data-raf-age の(非表示)select が持ち、既存の送信・テスト契約はそこだけを見ればよい。 */
.raf__chipgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.raf__chipgrid--income {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 10px;
}

.raf__chip {
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid var(--raf-tag-border);
  border-radius: 4px;
  background: var(--raf-tag-bg);
  color: var(--raf-fg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.raf__chip--income {
  min-height: 40px;
  font-size: 12px;
}

.raf__chip:hover,
.raf__chip:focus-visible {
  border-color: var(--raf-line);
}

.raf__chip--active {
  border-color: #000;
  background: #000;
  color: #fff;
}

.raf__income-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--raf-tag-border);
  border-radius: 4px;
  background: #fff;
  color: var(--raf-fg);
  /* I7: 16px未満だとiOS Safariが自動ズームする。 */
  font-size: 16px;
}

.raf__panel .raf__privacy-note {
  margin: 0 0 16px;
  color: var(--raf-fg-secondary);
}

.raf__textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--raf-tag-border);
  border-radius: 4px;
  background: #fff;
  color: var(--raf-fg);
  /* I7: 16px未満だとiOS Safariが自動ズームする。 */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  min-height: 88px;
}

.raf__char-counter {
  margin: 6px 0 0;
  text-align: right;
  font-size: 12px;
  color: var(--raf-fg-secondary);
}

.raf__field-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--raf-fg-secondary);
}

.raf__error {
  margin: 0 0 12px;
  color: #b91c1c;
  font-size: 13px;
}

.raf__error[hidden] {
  display: none;
}

.raf__submit {
  width: 100%;
  padding: 12px 24px;
  border: 2px solid var(--raf-btn-border);
  border-radius: 5px;
  background: var(--raf-btn-bg);
  color: #000;
  font-size: 15.6px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
}

.raf__submit:hover,
.raf__submit:focus-visible {
  background: #ddc767;
}

.raf__near {
  margin: 0 0 16px;
  padding: 0;
  color: var(--raf-fg-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.raf__near[hidden] {
  display: none;
}

/* 結果一覧: サイトの監修者プロフィールブロックと同じ組み方(丸い写真+右側テキスト)。
   カードの枠・影は付けず、1px の罫線と余白だけで担当者ごとを区切る。 */
.raf__list {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

/* 1人1段。写真・紹介文・予約操作をまとめ、罫線だけで担当者を区切る。 */
.raf__item {
  display: block;
  padding: 16px 0 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--raf-stroke);
}

.raf__item:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

/* 支援実績は紹介文の中へ。全幅の帯を作らず、経歴の近くで読めるようにする。 */
.raf__highlight {
  margin: 4px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--raf-line);
  background: #faf8f1;
}

.raf__highlight-caption {
  margin: 0 0 2px;
  color: #6f5a2c;
  font-size: 11px;
  font-weight: 700;
}

.raf__highlight-text {
  margin: 0;
  color: #222;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.raf__row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

/* D: 「こんなすごい人に」を伝えるため、写真は一覧より大きめ(SP 80px / PC 88px)。 */
.raf__portrait {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.raf__body {
  grid-column: 2;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  overflow-wrap: anywhere;
}

.raf__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.raf__identity .raf__supervise-tag {
  align-self: center;
  margin: 0;
}

.raf__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.raf__actions .raf__cta {
  max-width: none;
  min-height: 44px;
  margin: 0;
}

@media (min-width: 800px) {
  .raf__row {
    grid-template-columns: 88px minmax(0, 1fr) 208px;
    gap: 20px;
  }

  .raf__actions {
    grid-column: 3;
    align-self: center;
  }

  .raf__actions .raf__cta {
    padding: 11px 10px;
    font-size: 13px;
    letter-spacing: 0;
  }
}

.raf__label {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 4px;
  padding: 3px 5px;
  border-radius: 1px;
  background: var(--raf-label-bg);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}


.raf__name {
  margin: 0;
  color: #000;
  font-size: 17px;
  font-weight: 700;
}

.raf__area,
.raf__slot {
  margin: 0;
  color: var(--raf-fg-secondary);
  font-size: 13px;
}

/* 一致ポイント(highlightに未使用のときだけ表示。バッジ・ピル・色分けなし)。 */
.raf__reason {
  margin: 0;
  color: var(--raf-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}

.raf__cta {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
  padding: 10px 20px;
  border: 2px solid var(--raf-btn-border);
  border-radius: 5px;
  background: var(--raf-btn-bg);
  color: #000;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.raf__cta:hover,
.raf__cta:focus-visible {
  background: #ddc767;
}

.raf__notice {
  margin: 0 0 12px;
  color: var(--raf-fg-secondary);
  font-size: 13px;
  text-align: left;
}

.raf__notice[hidden] {
  display: none;
}

.raf__fallback {
  display: inline-block;
  margin: 0 0 16px;
  color: var(--raf-link);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}

.raf__fallback[hidden] {
  display: none;
}

.raf__back {
  display: inline-flex;
  align-items: center;
  /* m8: 44px未満はタップ領域として狭すぎる。 */
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  border: none;
  background: none;
  color: var(--raf-link);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* カレンダー画面の冒頭リキャップ(選んだ担当者 + 入力済み条件)。 */
.raf__calendar-recap {
  margin: 0 0 16px;
  padding: 0;
}

.raf__calendar-recap-title {
  margin: 0 0 8px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.raf__recap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.raf__recap-chip {
  padding: 3px 8px;
  border: 2px solid var(--raf-tag-border);
  border-radius: 4px;
  background: var(--raf-tag-bg);
  color: var(--raf-fg);
  font-size: 12px;
}

.raf__recap-chip--note {
  margin-top: 8px;
  display: inline-block;
  border-color: var(--raf-line);
  background: #fff;
  color: var(--raf-link);
  font-weight: 700;
}

.raf__calendar {
  min-width: 0;
  min-height: 480px;
}

/* TimeRex の埋め込みローダー/埋め込みページは、UAがモバイルと判定されない場合
   550px のデスクトップ最小幅で描画する。ポップアップの余白でその幅を下回る
   ときは、デスクトップ描画をそのまま縮小して見せる(予約LPモジュール
   article-agent-booking.module/module.css の同ロジックを移植)。 */
.raf__calendar.raf__calendar--ready {
  overflow-x: hidden !important;
}

.raf__timerex-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.raf__timerex-frame {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

.raf__calendar.raf__calendar--scaled {
  min-height: 0;
}

.raf__timerex-shell.raf__timerex-shell--scaled {
  width: var(--raf-timerex-width) !important;
  min-width: var(--raf-timerex-width) !important;
  max-width: none !important;
  margin: 0 !important;
  transform: scale(var(--raf-timerex-scale));
  transform-origin: left top;
}

.raf__complete-message {
  margin: 40px 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.8;
}

@media (min-width: 800px) {
  .raf__portrait {
    width: 88px;
    height: 88px;
  }
}

@media (max-width: 640px) {
  .raf__overlay {
    padding: 0;
    align-items: stretch;
  }

  .raf__dialog {
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100dvh; /* iOS Safari: 100vh includes the area under the URL bar */
    padding: 16px;
    border-radius: 0;
  }

  .raf__row {
    text-align: left;
  }

  .raf__portrait {
    width: 80px;
    height: 80px;
  }

  .raf__chipgrid--income {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 結果画面の見出し・検索条件の要約 */
.raf__results-head {
  margin: 0 0 16px;
}
.raf__results-title {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 6px solid var(--raf-line);
  color: #000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}
.raf__conditions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.raf__condition-chip {
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid var(--raf-tag-border);
  border-radius: 4px;
  background: var(--raf-tag-bg);
  color: var(--raf-fg);
  font-size: 12px;
  line-height: 1.6;
}
.raf__condition-edit {
  margin-left: auto;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--raf-link);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  min-height: 32px;
}
.raf__results-title:focus:not(:focus-visible) {
  outline: none;
}
@media (max-width: 480px) {
  .raf__results-title { font-size: 17px; }
}

.raf__match-note {
  margin: 0 0 8px;
  color: #333;
  font-size: 14px;
  font-weight: 700;
}
.raf__match-note[hidden] {
  display: none;
}

/* エラー時の2つの導線(担当者一覧から選ぶ／条件を変更する)を1行に詰めず縦に並べる */
.raf__panel .raf__fallback:not([hidden]),
.raf__panel .raf__back {
  display: block;
  margin: 12px 0 0;
  min-height: 44px;
  line-height: 44px;
}

/* C: 記事文脈からの希望業界プリセット表示。 */
.raf .raf__teaser-headline {
  margin: 0 0 8px;
  color: var(--raf-fg-secondary);
  font-size: 13px;
  font-weight: 500;
}

.raf .raf__teaser-chip--active {
  border-color: var(--raf-line);
  background: #fff;
  font-weight: 700;
}

/* C: 最短空き行。誇張のない静かな1行(数字は必ずAPIの実データ)。 */
.raf .raf__teaser-earliest {
  margin: 0 0 12px;
  text-align: center;
  color: var(--raf-fg-secondary);
  font-size: 13px;
}

.raf .raf__teaser-earliest[hidden] {
  display: none;
}

/* D: 結果カードの経歴事実(roster由来)。既存の監修者プロフィールブロックと
   同じ組み方(黒ラベル+肩書、太字氏名、経歴・出身校の地文)にそろえる。 */
.raf__kicker {
  margin: 0;
  color: var(--raf-fg-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.raf__career {
  margin: 0;
  color: var(--raf-fg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

/* 「記事監修」タグ: ピル/色分けにしない黒縁のみの小さな注記。 */
.raf__supervise-tag {
  display: inline-block;
  align-self: flex-start;
  margin: 2px 0 0;
  padding: 2px 6px;
  border: 1px solid #000;
  border-radius: 2px;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.raf__profile-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--raf-link);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}

/* B: 絞り込み件数の見出し。 */
.raf__reveal-count {
  margin: 0 0 12px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.raf__reveal-count[hidden] {
  display: none;
}

/* B: reveal時のカード出現(reduced motionでは付けない=raf__item--staggerを使わない)。
   個々の遅延はJS側でstyle.animationDelayに直接入れる(カードごとに異なるため)。 */
.raf__item--stagger {
  animation: raf-item-enter 0.32s ease both;
}

@keyframes raf-item-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* B: 「予感」ローディング画面。実処理をテキストと巡回する写真だけで見せ、
   スピナー・プログレスバー・パーセント表示は使わない。 */
.raf__loading-title {
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 6px solid var(--raf-line);
  color: #000;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

/* 1.6.0 spec 2: 1人ずつ(96px肖像+太字氏名+経歴企業のグレー1行)をクロスフェードで見せる。 */
.raf__loading-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  text-align: center;
  opacity: 1;
  transition: opacity 0.28s ease;
}

.raf__loading-agent:not(.raf__loading-agent--visible) {
  opacity: 0;
}

.raf__loading-agent-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.raf__loading-agent-portrait[hidden] {
  display: none;
}

.raf__loading-agent-name {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 700;
}

.raf__loading-agent-companies {
  margin: 0;
  color: var(--raf-fg-secondary);
  font-size: 13px;
}

/* 2px の進捗ライン。パーセント表示はせず、応答が来たら満タンにする。 */
.raf__loading-progress {
  width: 100%;
  height: 2px;
  margin: 0 0 16px;
  background: #e5e5e5;
}

.raf__loading-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--raf-line);
  transition: width 1.8s ease-out;
}

.raf__loading-step {
  margin: 0;
  color: var(--raf-fg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}

/* reduced motion: 巡回・stagger演出を止め、平文の状態表示だけにする
   (アニメーション対象クラス自体をJS側で付けないため、ここは保険として無効化)。 */
@media (prefers-reduced-motion: reduce) {
  .raf__item--stagger {
    animation: none;
  }

  .raf__loading-agent {
    transition: none;
  }

  .raf__loading-progress-bar {
    transition: none;
  }
}