/* =====================================================================
   R3B 課題解決フレーム（改良ラウンド3 追補）
   - トップページだけが読み込む（r3-process.css の直後）
   - 対象は、工程セクション（#r86-journey）の中と、第一画面に置いたポジショニング文の1行だけ
   - 色は案2のトークンだけを使う。色の新規定義はしない
   - 文字の大きさ・余白は r3-foundation.css の変数を使う
     （例外は1つ：ポジショニング文は、狭い画面で2行に収まる大きさを上限にする。下の説明を参照）
   - このファイルの読み込みを外せば、足した要素は素の段落に戻る（既存のCSS・JSは書き換えていない）
   ===================================================================== */

/* ---------------------------------------------------------------------
   ポジショニング文（正式コピー。文言は一字も変えない）
   折り返すのは、HTML に置いた wbr の位置（文節の切れ目）だけ。語の途中では折らない。
   どうしても入りきらない幅のときだけ、はみ出さないように途中で折る
   --------------------------------------------------------------------- */
.r3b-position {
  max-width: 20em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 工程セクションの総題（大見出し）
   前半「…スペシャリスト／」と後半「課題を…対応します」は、どちらも16字。
   狭い画面でも この2行に収まるよう、16字が本文の幅に入る大きさを上限にする。
   上限に届かない幅では見出しの大きさ（27px／22px）のまま。390px 幅で約21px、360px 幅で約19px */
:root h2.r3b-position { font-size: min(var(--r3-h2), calc((100vw - 2 * var(--gap)) / 16.9)); }

/* 第一画面：見出しのすぐ下に、明朝・小見出しの大きさで置く */
.r3b-position-hero {
  margin: 16px 0 0;
  font-family: var(--font-head);
  font-size: var(--r3-h3);
  font-size: min(var(--r3-h3), calc((100vw - 2 * var(--gap)) / 16.9));
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
  color: var(--ink);
}
@media (max-width: 900px) {
  /* この幅では第一画面の要素が order で並ぶ。見出し（order 3）の次、説明文（order 4）の前に置く */
  .r3b-position-hero { order: 3; margin: 0; }
}

/* ---------------------------------------------------------------------
   工程セクションの導入：課題の例（.intro）のすぐ下に、応える事実と条件を続ける
   --------------------------------------------------------------------- */
.r3-process .intro.r3b-intro { margin-bottom: 16px; }
.r3b-basis { max-width: var(--r3-measure); margin: 0; color: var(--ink); }
.r3b-lead { max-width: var(--r3-measure); margin: 0 0 16px; }

/* 小見出し：句読点の後だけで折り返す（「工場の／仕事。」のように語のまとまりを割らない） */
.r3b-phrase { word-break: keep-all; overflow-wrap: anywhere; }

/* 但し書きに続ける一文（左の罫線はつなげ、段落の間だけ空ける） */
.r3b-caveat-more { padding-top: 8px; }

/* ---------------------------------------------------------------------
   「応えること」：工程名のすぐ下に1行。事実の説明の前に置く
   （写真の並びでは段落、3Dの工程の一覧ではボタンの中の span）
   --------------------------------------------------------------------- */
.r3b-answer {
  display: block;
  margin: 0 0 8px;
  font-size: var(--r3-sub);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--ink);
}
.r3b-answer-label {
  display: inline-block;
  margin-right: 4px;
  padding: 0 8px;
  border: 1px solid var(--sea);
  border-radius: 2px;
  font-size: var(--r3-note);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--sea);
  white-space: nowrap;
}
/* 文のほうは、ひとまとまりで折り返す。札の横に入りきらないときは、文ごと次の行へ送る
   （「ご相談」のような語の途中で、札の横に残りと分かれて折れるのを避ける） */
.r3b-answer-text { display: inline-block; word-break: auto-phrase; }
.r3-flow-step .r3b-answer { margin: 4px 0; }
@media (max-width: 600px) {
  /* 狭い画面では、札の行と文の行に分けてそろえる（文の長さで並びが変わらないように） */
  .r3b-answer-text { display: block; }
}

/* ---------------------------------------------------------------------
   セクションの末尾：相談シートへの導線（一文＋リンクの並び）
   罫線と上の余白は、これまでリンクの並びが持っていたものを、この囲みに移す
   --------------------------------------------------------------------- */
.r3b-next { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.r3b-next-lead { max-width: var(--r3-measure); margin: 0; color: var(--ink); }
.r3-process .r3b-next .r75-result-links { margin-top: 8px; padding-top: 0; border-top: 0; }