/* ============================================================
   採用「職種ページ」（Sales / Creative / Engineer 下層）専用スタイル
   - クラスは .fwdr- prefix（forward role）に統一し、forward.css の
     .fwd- と名前空間を分離する。forward.css / forward.js は無改修で
     読み込むのみ。site.css も同様に無改修（新規クラスはすべてここへ）。
   - 色は site.css のトークン（--brand 系）のみを使用。新色は追加しない。
   - Sales GATE 2（01 HERO〜09 PROCESS & ENTRY）の実装分。
   ============================================================ */

/* ------------------------------------------------------------
   01 — ROLE HERO
   TOPの .fwd-hero（sticky 2ビート＋handoff機構）とは別の独立実装。
   下層は1画面で完結する「内容の高さぶんだけ」の静的HEROとして構成する
   （100vh/100dvh固定にしない。TOPのdynamic viewport対応もここには持ち込まない）。
   背景は sg-hero-poster.webp（ShaderGradientの静止画）＋ 既存の
   navy用grain（recruit-bg-grain-navy.webp）のみ。WebGL/canvasは読み込まない。
------------------------------------------------------------ */
/* min-heightはSales/Creative/Engineer共通のこのルールだけで統一する
   （ページ個別のmargin-bottom/padding-bottomの調整は行わない）。
   値は現状の3職種の中でコピー量が最も多い状態（モバイル：Engineer
   ×461px、PC：Creative/Engineer×500px）が収まる高さを基準に設定。
   今後いずれかの職種のコピーが増減しても、この共通floorの範囲内で
   あれば3職種の高さは自動的に揃ったままになる。 */
.fwdr-hero {
  position: relative;
  overflow: hidden;
  background-color: #06264d;
  padding: 6.5rem 0 5rem;
  min-height: 29rem;
}
@media (min-width: 768px) {
  .fwdr-hero {
    padding: 9rem 0 6.5rem;
    min-height: 31.5rem;
  }
}

.fwdr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/recruit/assets/sg-hero-poster.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* TOPのnavy面で使っているのと同じgrain素材。下層でも同じ質感にすることで
   「別サイトに見えない」という要件を満たす。新規アセットは追加しない。 */
.fwdr-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/recruit/recruit-bg-grain-navy.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  mix-blend-mode: multiply;
}
/* posterは右上が明るいシアン基調のため、左揃えの本文コピーが乗る左側だけ
   確実に沈めておく（TOPのHEROが同じ理由で持っている構図の層と同趣旨）。 */
.fwdr-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 24, 66, 0.86) 0%, rgba(2, 24, 66, 0.5) 42%, rgba(2, 24, 66, 0.1) 72%);
}

.fwdr-hero__inner {
  position: relative;
  z-index: 1;
}

.fwdr-hero__title {
  margin: 1.1rem 0 0;
  max-width: 18ch;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.fwdr-hero__role {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8fe8ff;
}
.fwdr-hero__lead {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}
/* SP限定の意味区切り改行。PCでは非表示（=1行のまま）にし、767px以下
   でだけ改行として機能させる。text-wrap: balance（.fwdr-hero__title）
   や通常の自動折り返し（.fwdr-hero__lead）が語の途中（「動／く」
   「理／解」等）で分断してしまう場合に、単語のまとまりを保った位置に
   限定して使用する（Engineerのみ使用。Sales/Creativeは対象外）。 */
.fwdr-hero__break-sp {
  display: none;
}
@media (max-width: 767px) {
  .fwdr-hero__break-sp {
    display: inline;
  }
}

/* SP限定の意味区切り改行（.fwdr-hero__break-spと同じ考え方）。02 THE
   ROLEの.fwd-scene__titleは全ページ共通クラスのため、ここではCreative
   の当該h2だけに使う専用クラスとして分離する。PCでは非表示（=1行の
   まま）、767px以下でのみ改行として機能させ、通常の自動折り返しが
   語の途中（「伝わ／る」）で分断するのを避ける（Creative 02タイトル
   のみ使用）。 */
.fwdr-role__break-sp {
  display: none;
}
@media (max-width: 767px) {
  .fwdr-role__break-sp {
    display: inline;
  }
}
/* 上記のPC版。768px以上でだけ改行として機能させる。02 THE ROLEの
   大statement（.fwdr-def__statement）のように、PCの行長では末尾が
   1文字（「す。」等）だけ次行に落ちてしまうケースで、意味の切れ目に
   改行位置を固定するために使う。SPでは無効なので、SP側の折り返しは
   .fwdr-role__break-sp と併用して別々に制御できる。 */
.fwdr-role__break-pc {
  display: none;
}
@media (min-width: 768px) {
  .fwdr-role__break-pc {
    display: inline;
  }
}
/* 途中で折り返させたくない語のためのユーティリティ。「Webマーケティング」
   のようにラテン文字＋カタカナが連続する語では、SPの狭い行長で
   「Webマ／ーケティング」のように長音符が行頭へ落ちることがあるため、
   語全体をひとまとまりとして扱う。 */
.fwdr-nowrap {
  white-space: nowrap;
}

/* PCのみ：採用TOPから遷移した直後にTypographyの強さが弱く感じられたための
   補正。構造・レイアウトは変えず、スケールと余白の重心だけを上げる。
   SP（1024px未満）はこのブロックの影響を受けず現状のまま。 */
@media (min-width: 1024px) {
  .fwdr-hero__title {
    font-size: clamp(3.4rem, 1.6rem + 3vw, 4.4rem);
  }
  .fwdr-hero__lead {
    max-width: 40rem;
  }
}

/* ------------------------------------------------------------
   02 — THE ROLE（Sales / Engineer 共通部品）
   大型1文＋補足本文。カード枠を使わず、左の細い縦罫だけで
   「引用・定義」であることを示す。
------------------------------------------------------------ */
.fwdr-def {
  margin-top: 2.75rem;
  max-width: 46rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--border);
}
.fwdr-def__statement {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem);
  font-weight: 900;
  line-height: 1.55;
  color: var(--brand-deep);
  text-wrap: balance;
}
.fwdr-def__note {
  margin: 0;
  max-width: 40rem;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------
   03 — WHAT YOU DO（.fwdr-scope）
   Sales / Creative 共用の担当領域グリッド。番号＋細い罫線＋見出し＋
   リストのみで構成し、角丸カードにしない。Salesは4グループを
   番号付き2×2で提示する。
------------------------------------------------------------ */
.fwdr-scope {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}
@media (min-width: 700px) {
  .fwdr-scope {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 2.75rem;
  }
}
.fwdr-scope__item {
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.fwdr-scope__num {
  display: block;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-scope__heading {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--brand-deep);
  line-height: 1.5;
}
.fwdr-scope__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.fwdr-scope__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.fwdr-scope__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* ------------------------------------------------------------
   04 — HOW WE WORK（循環図）
   .fwd-cycle をそのまま流用し、ノードの中身だけSalesの仕事内容に
   置き換える（forward.css は編集しない）。
   SP（≤700px）のみ、このセクション限定で forward.css 側の既定
   （3列グリッドで折り返す配置）を上書きし、01→06→戻り、を
   一方向の縦プロセスとして読めるようにする。id で howwework 配下に
   スコープすることで、採用TOP（.fwd-cycle をそのまま使うページ）の
   見た目には一切影響しない。
------------------------------------------------------------ */
/* forward.css の .fwd-cycle__label は「白背景に濃紺文字」で設計されており
   （TOPのPROJECTセクションが白面のため）、そのまま濃紺の04面に置くと
   濃紺の上に濃紺文字が乗り、事実上読めなくなる。#howwework 限定で
   白系の色に上書きする（forward.css自体は編集しない）。 */
#howwework .fwd-cycle__label {
  color: rgba(255, 255, 255, 0.92);
}
#howwework .fwd-cycle__return-label {
  font-weight: 900;
}
@media (max-width: 700px) {
  #howwework .fwd-cycle__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #howwework .fwd-cycle__node {
    width: 100%;
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 1rem;
    padding: 0.9rem 0;
  }
  #howwework .fwd-cycle__node + .fwd-cycle__arrow + .fwd-cycle__node {
    border-top: 1px solid var(--border);
  }
  #howwework .fwd-cycle__icon {
    flex: none;
    width: 3rem;
    height: 3rem;
  }
  #howwework .fwd-cycle__icon svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  #howwework .fwd-cycle__badge {
    display: block;
    margin-bottom: 0.2rem;
  }
  #howwework .fwd-cycle__label {
    font-size: 0.85rem;
  }
  /* forward.css は700px以下で矢印を display:none にしている（横並び前提のため）。
     縦プロセスでは「次へ続く」ことを示す下向き矢印として復活させる。 */
  #howwework .fwd-cycle__arrow {
    display: block;
    align-self: center;
    margin: 0;
    padding-left: 1.5rem;
    transform: rotate(90deg);
  }
  /* 湾曲SVGはSPで視認性が下がるため使わない。戻りは末尾のラベル行のみで表現する。 */
  #howwework .fwd-cycle__return-svg {
    display: none;
  }
  #howwework .fwd-cycle__return {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border);
  }
  /* 「また、顧客の課題へ」は湾曲SVGを持たないSPで唯一「循環」を伝える要素。
     forward.css既定の色（濃紺文字＋淡色pill）は白背景前提のため、navy面では
     pillごと消して、地の上のTypographyとしてcyan（記号）＋白系（本文）で
     読ませる。カード化・pill化はしない。 */
  #howwework .fwd-cycle__return-label {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transform: none;
    background: transparent;
    padding: 0;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
  }
  #howwework .fwd-cycle__return-label i {
    font-style: normal;
    font-size: 1rem;
    color: var(--brand-cyan);
  }
}

/* ------------------------------------------------------------
   05 — CROSS TEAM（.fwdr-cross）
   Salesが単独で完結せず、Creative / Engineerと双方向にやり取りして
   顧客の成果へ収束することを示す関係図。3枚のカードや人物アイコンの
   横並びにはせず、SALESを起点にした「誰から誰へ・何が渡るか」を
   Typography・thin rule・cyanの矢印・余白だけで見せる。
   ------------------------------------------------------------
   GATE 2 再レビュー修正：PC版が左40%に縦積みされ右側に大きな空白が
   残る指摘を受け、72rem幅を実際に使う横方向の構成へ組み替えた。
   SALESは囲みボックスをやめ、左rule＋大きめTypographyの「主語」に。
   CREATIVE行・ENGINEER行はPCで横に並べ、戻りの一覧は全幅で横流し。
   最後の「顧客の成果」は全幅の罫線の右端に置き、「左（SALES）から
   右（成果）へ流れて着地する」という向きを空間そのもので表現する。
------------------------------------------------------------ */
.fwdr-cross {
  margin-top: 3rem;
}
.fwdr-cross__grid {
  display: grid;
  gap: 2.25rem;
}
@media (min-width: 860px) {
  .fwdr-cross__grid {
    grid-template-columns: 12rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 3rem;
    row-gap: 2.5rem;
  }
}
/* SALES：囲みボックスではなく、.fwdr-defと同じ「左rule＋大型文字」の
   語彙で「この関係図の主語」を示す。PCではhubの列が2段（出向き／
   戻り）にまたがるようにして、常に視界の起点として機能させる。 */
.fwdr-cross__hub {
  padding-left: 1.1rem;
  border-left: 3px solid var(--brand-cyan);
}
@media (min-width: 860px) {
  .fwdr-cross__hub {
    grid-column: 1;
    grid-row: 1 / 3;
  }
}
.fwdr-cross__hub-label {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--brand-deep);
  line-height: 1.15;
}
/* 出向き2本（→CREATIVE／→ENGINEER）。PCでは横に並べて72rem幅を使い、
   SPは自然に縦積みへ戻る（modeを指定していないため既定はブロック）。 */
.fwdr-cross__out {
  display: grid;
  gap: 2rem;
}
@media (min-width: 860px) {
  .fwdr-cross__out {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}
.fwdr-cross__lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-deep);
}
.fwdr-cross__lane-arrow {
  color: var(--brand-cyan);
  font-weight: 700;
}
.fwdr-cross__lane-from {
  color: var(--muted-foreground);
  font-weight: 700;
}
.fwdr-cross__lane-to {
  letter-spacing: 0.03em;
}
.fwdr-cross__lane-list {
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.fwdr-cross__lane-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.fwdr-cross__lane-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}
/* 戻り1本（CREATIVE／ENGINEER→SALES）。出向き2本の下に全幅で置き、
   短い名詞4つを横流しにして「出向きより軽い返り」であることも示す。 */
.fwdr-cross__return {
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 860px) {
  .fwdr-cross__return {
    grid-column: 2;
    grid-row: 2;
  }
}
.fwdr-cross__lane-list--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
/* 収束先。全幅の罫線の右端に置き、SALESを起点に左から右へ流れて
   「顧客の成果」に着地する、という向きを空間そのもので表現する。 */
.fwdr-cross__result {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.65rem;
}
@media (min-width: 860px) {
  .fwdr-cross__result {
    justify-content: flex-end;
  }
}
.fwdr-cross__result-arrow {
  color: var(--brand-cyan);
  font-size: 1.15rem;
}
.fwdr-cross__result-label {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 900;
  color: var(--brand-deep);
}
@media (prefers-reduced-motion: no-preference) {
  .fwdr-cross__hub,
  .fwdr-cross__out > *,
  .fwdr-cross__return,
  .fwdr-cross__result {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 450ms ease, transform 450ms ease;
  }
  .fwd-build.is-built .fwdr-cross__hub,
  .fwd-build.is-built .fwdr-cross__out > *,
  .fwd-build.is-built .fwdr-cross__return,
  .fwd-build.is-built .fwdr-cross__result {
    opacity: 1;
    transform: none;
  }
  .fwdr-cross__out > *:nth-child(1) { transition-delay: 100ms; }
  .fwdr-cross__out > *:nth-child(2) { transition-delay: 200ms; }
  .fwd-build.is-built .fwdr-cross__return {
    transition-delay: 320ms;
  }
  .fwd-build.is-built .fwdr-cross__result {
    transition-delay: 440ms;
  }
}

/* ------------------------------------------------------------
   06 — WHY THIS ROLE（.fwdr-why）
   既存Salesページの「この仕事の魅力」4項目を、内容・順序とも変更せず
   番号付きエディトリアルへ組み替える。カード化しない。
------------------------------------------------------------ */
.fwdr-why {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}
@media (min-width: 700px) {
  .fwdr-why {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    row-gap: 2.5rem;
  }
}
.fwdr-why__item {
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.fwdr-why__num {
  display: block;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-why__body {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--brand-deep);
}

/* ------------------------------------------------------------
   07 — WHO WE'RE LOOKING FOR（.fwdr-spec）
   既存Salesページの必須条件／歓迎条件を、内容を一切変更せず
   2カラムのrule区切りへ整理する。カード化しない。
------------------------------------------------------------ */
.fwdr-spec {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 700px) {
  .fwdr-spec {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}
.fwdr-spec__col {
  padding-top: 1.1rem;
  border-top: 2px solid var(--brand-deep);
}
.fwdr-spec__head {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--brand-deep);
}
.fwdr-spec__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}
.fwdr-spec__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}
.fwdr-spec__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* ------------------------------------------------------------
   08 — JOB INFO（.fwdr-info）
   既存Salesページの募集要項dlを、内容を一切変更せず
   horizontal ruleで区切った行へ整理する。表形式カードにしない。
------------------------------------------------------------ */
.fwdr-info {
  margin-top: 3rem;
  display: grid;
  gap: 0;
}
.fwdr-info__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.fwdr-info__row:last-of-type {
  border-bottom: 1px solid var(--border);
}
@media (min-width: 700px) {
  .fwdr-info__row {
    grid-template-columns: 10rem 1fr;
    gap: 2rem;
  }
}
.fwdr-info__dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--brand-cyan);
}
.fwdr-info__dd {
  margin: 0;
  display: grid;
  gap: 0.35rem;
}
.fwdr-info__dd p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--brand-deep);
}
.fwdr-info__note {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------
   09 — PROCESS & ENTRY
   forward.css の .fwd-process をそのまま流用する。ただしTOPのPROCESS
   セクションは白背景前提の配色（濃紺文字）のため、navy面に置くと
   #howwework の.fwd-cycle__labelと同じ理由で読めなくなる。
   #entry 配下限定で白系へ上書きする（forward.css自体は編集しない）。
------------------------------------------------------------ */
#entry .fwd-process__label {
  color: #fff;
}
#entry .fwd-process__note {
  color: rgba(255, 255, 255, 0.72);
}

/* ENTRY CTA部分：TOPの.fwd-entryセクションを丸ごと流用すると
   独自のradial gradient背景が二重になるため、Sales側は
   .fwd-scene--navy .fwd-scene--texturedの地（01/04と同じ）の上に
   直接置く軽量版として実装する。既存.fwd-entry__rolesはそのまま流用。 */
.fwdr-entry-cta {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 34rem;
}
.fwdr-entry-cta__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 900;
  color: #fff;
}
/* 見出しの折り返し位置を意味の切れ目へ固定する（#audit-B4）。
   「<職種>に応募・相談する」はSPの自動折り返しだと最後の「る」だけが
   次行に落ちることがあった（Creative 375/390px、Sales 320px で実測）。
   .fwd-break-sp のような <br> では「エンジニアに応募・相談する」が
   1行に収まる幅でも必ず改行してしまうため、
   「応募・相談する」を切らないことだけを指定して、改行するかどうかは
   幅に任せる。文言・font-size・レイアウトは変更していない。 */
.fwdr-nobr {
  white-space: nowrap;
}
.fwdr-entry-cta__lead {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.78);
}
.fwdr-entry-cta__actions {
  margin-top: 1.75rem;
}

/* ------------------------------------------------------------
   CREATIVE 03 — WHAT YOU DO（.fwdr-chapters）
   GATE1再々レビューで.fwdr-craft（EDIT/WRITE/ORGANIZE→CREATE）は廃止。
   Creativeの3大業務「GOURMET MEDIA」「LINE OFFICIAL ACCOUNT」
   「WEB SITE」を、同格の3つのeditorial chapterとして誌面のように展開する。
   カード化・box shadow・アイコン・fake UIは使わず、大きな英字
   Typography＋thin rule＋短いリードとリストのみで構成する。
   PCでは各chapterを20rem（見出し柱）＋残り（本文）の非対称グリッドとし、
   両chapterとも同じ軸（柱=左／本文=右）で揃える。GATE2レビューで
   「01は左上・02は右下に大きく散らばり、1セクションとしてのまとまりが
   弱い」という指摘を受け、以前あった2つ目のchapterの柱反転（右寄せ）は
   廃止した。TOP PROJECTセクションのCASE 01→CASE 02のように、同じ
   スタート位置に並ぶ一続きの2章として読めることを優先する。
------------------------------------------------------------ */
.fwdr-chapters__intro {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted-foreground);
}
.fwdr-chapters {
  margin-top: 2.5rem;
}
.fwdr-chapter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
}
.fwdr-chapter:first-child {
  border-top: none;
  padding-top: 0;
}
@media (min-width: 860px) {
  .fwdr-chapter {
    grid-template-columns: 20rem 1fr;
    column-gap: 3.5rem;
    align-items: start;
  }
}
.fwdr-chapter__num {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-chapter__word {
  display: block;
  margin-top: 0.5rem;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--brand-deep);
}
.fwdr-chapter__heading {
  margin: 0 0 1rem;
  max-width: 30rem;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
  font-weight: 900;
  line-height: 1.55;
  color: var(--brand-deep);
  text-wrap: balance;
}
.fwdr-chapter__lead {
  margin: 0 0 1.5rem;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--muted-foreground);
}
.fwdr-chapter__list {
  margin: 0;
  padding: 0;
  max-width: 34rem;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.fwdr-chapter__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.fwdr-chapter__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}
/* 2業務を貫く着地点。fake数値は使わず、短いstatementのみで
   「作って終わりではない」思想を示す（.fwdr-cross__resultと同系統）。 */
.fwdr-chapters__result {
  margin-top: 0.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem;
}
.fwdr-chapters__result-arrow {
  color: var(--brand-cyan);
  font-size: 1rem;
}
.fwdr-chapters__result-note {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--brand-deep);
}
@media (prefers-reduced-motion: no-preference) {
  .fwdr-chapter,
  .fwdr-chapters__result {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 450ms ease, transform 450ms ease;
  }
  .fwd-build.is-built .fwdr-chapter,
  .fwd-build.is-built .fwdr-chapters__result {
    opacity: 1;
    transform: none;
  }
  .fwdr-chapters > .fwdr-chapter:nth-of-type(1) { transition-delay: 80ms; }
  .fwdr-chapters > .fwdr-chapter:nth-of-type(2) { transition-delay: 200ms; }
  .fwdr-chapters > .fwdr-chapter:nth-of-type(3) { transition-delay: 320ms; }
  .fwd-build.is-built .fwdr-chapters__result {
    transition-delay: 440ms;
  }
}

/* ------------------------------------------------------------
   CREATIVE 04 — HOW WE WORK（.fwdr-flow）
   6工程（内容・順序とも変更なし）を、01→06 の一本のプログレッション
   として読ませる。2＋2＋1＋1のグループ分割と、06の上に置いていた太い
   cyanの罫線は廃止。06は「特別なカード」ではなく、同じ流れの6番目の
   ステップとして扱い、次の依頼へ戻ることは直下のloopノート一文だけで
   表現する。
     - 1180px以上：CSS Gridの6カラム（repeat(6, minmax(0,1fr))）
     - 860〜1179px：同じDOM順のまま3カラム×2行（上段01→02→03 /
       下段04→05→06）。行をまたぐUターン矢印は置かない
     - 859px以下：現行どおりの縦フロー。ステップ間の余白・番号位置・
       hairlineだけを揃える
   矢印は工程の間にだけ置く小さな細いcyanの記号で、gap内へ絶対配置する
   ため読み順（01→06）には影響しない。カード背景・影・角丸・円形node・
   アイコン・progress barは使わない。
   このブロックは .fwdr-flow* 限定で、Salesの.fwd-cycle /
   Engineerの.fwdr-pipelineとはセレクタを共有しない。
------------------------------------------------------------ */
.fwdr-flow {
  margin-top: 3rem;
}
.fwdr-flow__track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.fwdr-flow__step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.fwdr-flow__step:first-child {
  border-top: none;
  padding-top: 0;
}
.fwdr-flow__num {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--brand-cyan);
}
.fwdr-flow__label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
/* 工程間の矢印。横並びのときだけ、カラム間のgapの中央へ絶対配置する。
   行頭（01／3カラム時の04）には前工程がないので出さない。 */
.fwdr-flow__arrow {
  display: none;
  position: absolute;
  top: 1.02rem;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 400;
  color: var(--brand-cyan);
}

/* 860〜1179px：3カラム×2行。DOM／読み順は01→06のまま */
@media (min-width: 860px) {
  .fwdr-flow__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.75rem;
    row-gap: 1.75rem;
  }
  .fwdr-flow__step {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.95rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .fwdr-flow__step:first-child {
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .fwdr-flow__label {
    font-size: 0.9375rem;
  }
  .fwdr-flow__arrow {
    display: block;
    left: -1.2rem;
  }
  .fwdr-flow__step:nth-child(3n + 1) .fwdr-flow__arrow {
    display: none;
  }
}

/* 1180px以上：6カラムの水平フロー */
@media (min-width: 1180px) {
  .fwdr-flow__track {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0;
  }
  .fwdr-flow__arrow {
    display: block;
    left: -1.05rem;
  }
  .fwdr-flow__step:nth-child(3n + 1) .fwdr-flow__arrow {
    display: block;
  }
  .fwdr-flow__step:first-child .fwdr-flow__arrow {
    display: none;
  }
}

.fwdr-flow__loop {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}
.fwdr-flow__loop i {
  font-style: normal;
  font-size: 1rem;
  color: var(--brand-cyan);
}
@media (prefers-reduced-motion: no-preference) {
  .fwdr-flow__step,
  .fwdr-flow__loop {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 420ms ease, transform 420ms ease;
  }
  .fwd-build.is-built .fwdr-flow__step,
  .fwd-build.is-built .fwdr-flow__loop {
    opacity: 1;
    transform: none;
  }
  .fwdr-flow__track > .fwdr-flow__step:nth-child(1) { transition-delay: 80ms; }
  .fwdr-flow__track > .fwdr-flow__step:nth-child(2) { transition-delay: 150ms; }
  .fwdr-flow__track > .fwdr-flow__step:nth-child(3) { transition-delay: 220ms; }
  .fwdr-flow__track > .fwdr-flow__step:nth-child(4) { transition-delay: 290ms; }
  .fwdr-flow__track > .fwdr-flow__step:nth-child(5) { transition-delay: 360ms; }
  .fwdr-flow__track > .fwdr-flow__step:nth-child(6) { transition-delay: 430ms; }
  .fwd-build.is-built .fwdr-flow__loop {
    transition-delay: 500ms;
  }
}

/* ------------------------------------------------------------
   CREATIVEページ全体：背景の素材感を少し引き上げる（GATE1再レビュー）
   forward.css / site.cssは編集せず、Creativeページ（.fwdr-page-creative
   でスコープ）に限定した特異度の高いセレクタで、既存の::before質感層
   のopacityのみ調整する。Sales / Engineer / 採用TOPは同じ.fwd-scene--*
   クラスを共有しているため、ページ単位のスコープなしに数値を変えると
   他ページにも影響してしまう。ここではCreativeの３セクション
   （#role / #whatyoudo / #howwework）だけを対象にする。
   01 HERO（.fwdr-hero__bg）はSalesと共有の同一コンポーネントのため、
   Sales保護のためここでは調整しない。
------------------------------------------------------------ */
/* forward.css側で採用サイト全体の統一fine grain systemへ刷新した際に
   再調整（GATE1再々レビュー #3・texture統一）。旧ラスターgrain-light
   （opacity 0.7）／旧textured（opacity 0.62）は、置き換え後のSVG
   レシピとは前提が異なるため、そのままでは強すぎる／合わない。
   新レシピの既定値（白 0.075・濃紺 0.112）に対し、Creativeとして
   これまでどおり心持ち強めの密度を保つ程度に留める。 */
.fwdr-page-creative #role.fwd-scene--grain-light::before {
  opacity: 0.107;
}
.fwdr-page-creative #howwework.fwd-scene--textured::before {
  opacity: 0.146;
}

/* ------------------------------------------------------------
   CREATIVE 03 — WHAT YOU DO 背景再設計（GATE1再々レビュー #2）
   単色のvar(--brand-light)ベタ塗り（PC/SPとも単調・間延びして見える
   という指摘）を、Creativeページ限定でeditorial paper canvasへ
   再設計する。forward.cssの.fwd-scene--light/.fwd-scene--noise自体は
   無編集のまま、.fwdr-page-creative + #whatyoudo + 元クラスという
   高い特異度で上書きする（Sales / Engineer / TOPは同じクラスを
   共有するが、.fwdr-page-creativeスコープが無いため無影響）。
   1) paper base：var(--brand-light)（#eaf6ff）より白へ寄せた
      #f4f9fd。02 THE ROLEの純白（--background）とは区別しつつ、
      薄いblue castだけを残す。
   2) atmospheric wash：section自身のbackgroundに極薄の放射状
      グラデーションを2枚重ねる。GOURMET MEDIA（chapter A、見出し柱が
      左）側は左上に極薄cyan、LINE OFFICIAL ACCOUNT（chapter B、
      見出し柱が右）側は右下に極薄blueを配置し、chapterごとに
      「奥行きの重心」を変える。境界が見えるほど濃くしない。
   3) ghost typography：巨大・極薄・aria-hidden の語彙で
      #whatyoudo直下に追加。chapter Aの負の
      空間には「MEDIA」、chapter Bには「ACCOUNT」を配置し、画面端へ
      わずかにはみ出させる。foregroundの本文とは重ならない位置・
      opacityに留める。 */
.fwdr-page-creative #whatyoudo.fwd-scene--light {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 650px at 10% 15%, rgba(33, 189, 234, 0.055), transparent 62%),
    radial-gradient(1100px 750px at 90% 88%, rgba(31, 145, 227, 0.05), transparent 62%),
    #f4f9fd;
}
.fwdr-page-creative #whatyoudo.fwd-scene--noise::before {
  opacity: 0.115;
}
.fwdr-whatyoudo__ghost {
  position: absolute;
  z-index: 0;
  margin: 0;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.fwdr-whatyoudo__ghost--a {
  top: 5rem;
  left: 1rem;
  font-size: clamp(4rem, 3.2rem + 6vw, 8rem);
  color: rgba(11, 31, 58, 0.04);
}
.fwdr-whatyoudo__ghost--b {
  bottom: 4rem;
  right: 1rem;
  font-size: clamp(3.5rem, 2.8rem + 5vw, 6.5rem);
  color: rgba(33, 189, 234, 0.055);
}
@media (max-width: 859px) {
  .fwdr-whatyoudo__ghost--a {
    top: 2rem;
    left: 0.5rem;
    font-size: 3.5rem;
  }
  .fwdr-whatyoudo__ghost--b {
    top: auto;
    bottom: 2.5rem;
    right: 0.5rem;
    left: auto;
    font-size: 3rem;
  }
}

/* ------------------------------------------------------------
   CREATIVE 05 — CROSS TEAM（.fwdr-transform / GATE2）
   Salesの.fwdr-cross（hub&spoke型のrelationship diagram）とは別の
   語彙。04 HOW WE WORK（.fwdr-flow）が「時間軸」であるのに対し、
   05は「情報の出入りと変換点」を見せる。IN（受け取る）→EDIT
   （Creativeが編集する、cyanの太い上罫で強調した変換点）→OUT
   （届ける）の3区分を、thin ruleとTypographyのみ・カード化せずに
   構成する。末尾のRETURN行で、公開後の反響・データが次の編集材料
   として戻ることを示す。Creative→Engineerの直接連携は現時点で
   FIX済みの事実の裏付けが弱いため、主構成には含めていない。
------------------------------------------------------------ */
.fwdr-transform {
  margin-top: 3rem;
}
.fwdr-transform__row {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 860px) {
  .fwdr-transform__row {
    flex-direction: row;
    align-items: stretch;
    gap: 2rem;
  }
}
.fwdr-transform__col {
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.fwdr-transform__col--edit {
  border-top: 2px solid var(--brand-cyan);
}
@media (min-width: 860px) {
  .fwdr-transform__col {
    flex: 1 1 0;
  }
  .fwdr-transform__col--edit {
    flex: 1.3 1 0;
  }
}
.fwdr-transform__label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
}
.fwdr-transform__desc {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--brand-deep);
}
.fwdr-transform__desc--emphasis {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
}
.fwdr-transform__list {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.fwdr-transform__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.fwdr-transform__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}
.fwdr-transform__arrow {
  display: none;
}
@media (min-width: 860px) {
  .fwdr-transform__arrow {
    display: flex;
    align-items: center;
    flex: none;
    padding-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-cyan);
  }
}
.fwdr-transform__return {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.fwdr-transform__return-arrow {
  color: var(--brand-cyan);
  font-size: 1rem;
}
.fwdr-transform__return-label {
  font-size: 0.92rem;
  color: var(--muted-foreground);
}
@media (prefers-reduced-motion: no-preference) {
  .fwdr-transform__col,
  .fwdr-transform__return {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 450ms ease, transform 450ms ease;
  }
  .fwd-build.is-built .fwdr-transform__col,
  .fwd-build.is-built .fwdr-transform__return {
    opacity: 1;
    transform: none;
  }
  .fwdr-transform__row > .fwdr-transform__col:nth-of-type(1) { transition-delay: 80ms; }
  .fwdr-transform__row > .fwdr-transform__col:nth-of-type(2) { transition-delay: 200ms; }
  .fwdr-transform__row > .fwdr-transform__col:nth-of-type(3) { transition-delay: 320ms; }
  .fwd-build.is-built .fwdr-transform__return {
    transition-delay: 420ms;
  }
}

/* ------------------------------------------------------------
   CREATIVE 06 — WHY THIS ROLE（.fwdr-reasons / GATE2）
   Salesの.fwdr-why（均一な2×2グリッド・1階層の本文のみ）とは構造を
   変え、短い言い切り（headline）＋補足文（body）の2階層を、
   単一カラムでthin rule区切りに並べる。03（2 chapter）・05（3区分）
   と質感がかぶらないようにする。内容は03/04でFIX済みの事実のみから
   導いている（新しい主張の捏造はしていない）。
------------------------------------------------------------ */
.fwdr-reasons {
  margin-top: 3rem;
  display: grid;
  gap: 0;
}
.fwdr-reasons__item {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}
.fwdr-reasons__item:last-child {
  border-bottom: 1px solid var(--border);
}
.fwdr-reasons__num {
  display: block;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-reasons__headline {
  margin: 0 0 0.5rem;
  max-width: 32rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--brand-deep);
}
.fwdr-reasons__body {
  margin: 0;
  max-width: 34rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}
@media (min-width: 700px) {
  .fwdr-reasons__item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 1.5rem;
  }
  .fwdr-reasons__num {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
  .fwdr-reasons__headline {
    grid-column: 2;
    grid-row: 1;
  }
  .fwdr-reasons__body {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ------------------------------------------------------------
   CREATIVE 07 — WHO WE'RE LOOKING FOR（.fwdr-traits / GATE2再レビュー）
   必須／歓迎の2カラム条件一覧（.fwdr-spec--secondary、旧実装）は撤去。
   「未経験応募可」と「デザイナー職ではない」の両方に矛盾しないよう、
   応募資格の列挙ではなく「どんな人が向いているか」の5項目を主役にする。
   単純な5枚のカードにはせず、number＋headline＋short description＋
   thin ruleの単一カラムで構成し、前段の大きなpersona paragraphが
   持っていたeditorial（大きな文字で人物像を語る）思想を、1文の
   段落から5つの短い言い切りへ引き継ぐ。経験の有無についての言及は
   本文の下にfootnoteとして小さく添えるに留め、主役にしない。
------------------------------------------------------------ */
.fwdr-traits {
  margin: 2.5rem 0 0;
  display: grid;
  gap: 0;
}
.fwdr-traits__item {
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
}
.fwdr-traits__item:last-child {
  border-bottom: 1px solid var(--border);
}
.fwdr-traits__num {
  display: block;
  margin-bottom: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-traits__headline {
  margin: 0 0 0.5rem;
  max-width: 32rem;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--brand-deep);
}
.fwdr-traits__desc {
  margin: 0;
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--muted-foreground);
}
@media (min-width: 700px) {
  .fwdr-traits__item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    column-gap: 1.5rem;
  }
  .fwdr-traits__num {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0;
  }
  .fwdr-traits__headline {
    grid-column: 2;
    grid-row: 1;
  }
  .fwdr-traits__desc {
    grid-column: 2;
    grid-row: 2;
  }
}
.fwdr-traits__footnote {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  max-width: 38rem;
  font-size: 0.85rem;
  line-height: 1.85;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------
   CREATIVE 08 — JOB INFO（.fwdr-keyline / GATE2）
   .fwdr-info（既存募集要項dl）はそのまま流用し、その手前に既存
   募集要項の範囲内から抜粋した4項目を1行のkey lineとして追加する。
   新しい条件の捏造はしていない。
------------------------------------------------------------ */
.fwdr-keyline {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.fwdr-keyline li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-deep);
}
.fwdr-keyline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* ============================================================
   ENGINEER role page（Sales GATE2 / Creative GATE1-2 とは別の
   デザインキャラクター：System / Product / Architecture）。
   Salesの relationship diagram、Creativeの2 chapter layout・
   IN/EDIT/OUTはいずれもコピーせず、structured grid・thin line・
   node（小さな四角マーカー）・monospace風labelを共通語彙とする。
   写真・fake terminal・fake UI・アイコンの大量使用・box shadow・
   角丸カードグリッドは使用しない。
   ============================================================ */

/* ------------------------------------------------------------
   01 — ROLE HERO
   Sales / Creativeと同じ.fwdr-hero（forward.css/role.css側の共通
   コンポーネント）をそのまま使用するため、Engineer専用のCSSは
   不要（以前あった独自architecture line & node図・.fwdr-eng-hero系
   のCSSは削除した）。
------------------------------------------------------------ */

/* ------------------------------------------------------------
   03 — WHAT YOU BUILD（.fwdr-layers）
   Creativeの.fwdr-chapter（20rem見出し柱＋本文の非対称グリッド）は
   使わない。PRODUCT/SaaSとWEB/FRONTENDの2領域を、左のnodeを
   縦のspine（1本の線）で結んだ「system layer」として積み上げる。
------------------------------------------------------------ */
.fwdr-layers {
  position: relative;
  margin-top: 3rem;
  padding-left: 2.5rem;
}
.fwdr-layers::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--border);
}
.fwdr-layer {
  position: relative;
  padding-bottom: 3rem;
}
.fwdr-layer:last-child {
  padding-bottom: 0;
}
.fwdr-layer__node {
  position: absolute;
  left: -2.5rem;
  top: 0.35rem;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--brand-cyan);
  background: var(--background);
}
.fwdr-layer__num {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-layer__label {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--brand-deep);
}
.fwdr-layer__headline {
  margin: 1rem 0 0;
  max-width: 28rem;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  font-weight: 800;
  line-height: 1.55;
  color: var(--brand-deep);
  text-wrap: balance;
}
.fwdr-layer__lead {
  margin: 0.85rem 0 0;
  max-width: 32rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--muted-foreground);
}
.fwdr-layer__list {
  margin: 1.25rem 0 0;
  padding: 0;
  max-width: 32rem;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
@media (min-width: 700px) {
  .fwdr-layer__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
  }
}
.fwdr-layer__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.fwdr-layer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* ------------------------------------------------------------
   04 — HOW WE BUILD（.fwdr-pipeline / .fwdr-stack）
   6工程（DISCOVER〜IMPROVE）を、nodeとthin lineで結んだ工程列として
   示す。PCは横一列＋track全体を貫く1本の線、SPは縦一列＋左の
   spine。最後のIMPROVEのnodeだけcyanで塗り、loop note（改善が
   次のDISCOVERへ戻ること）を下に添える。直後にTECH STACKを
   architecture legend（区分ラベル＋技術名の並記のみ、chipやlogoに
   しない）として一体で提示する。
------------------------------------------------------------ */
.fwdr-pipeline {
  margin-top: 3rem;
}
.fwdr-pipeline__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 960px) {
  .fwdr-pipeline__track {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
  .fwdr-pipeline__track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0.4rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
  }
}
.fwdr-pipeline__step {
  position: relative;
  padding: 0 0 1.5rem 2.5rem;
}
@media (min-width: 960px) {
  .fwdr-pipeline__step {
    flex: 1 1 0;
    padding: 1.5rem 1rem 0 0;
  }
}
.fwdr-pipeline__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.fwdr-pipeline__step:last-child::before {
  bottom: auto;
  height: 1.2rem;
}
@media (min-width: 960px) {
  .fwdr-pipeline__step::before {
    display: none;
  }
}
.fwdr-pipeline__node {
  position: absolute;
  left: -0.24rem;
  top: 0.02rem;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--brand-cyan);
  background: var(--brand-deep);
}
@media (min-width: 960px) {
  .fwdr-pipeline__node {
    left: 0;
    top: 0;
  }
}
.fwdr-pipeline__step--last .fwdr-pipeline__node {
  background: var(--brand-cyan);
}
.fwdr-pipeline__num {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-pipeline__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.fwdr-pipeline__desc {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}
.fwdr-pipeline__loop {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}
.fwdr-pipeline__loop i {
  font-style: normal;
  font-size: 1rem;
  color: var(--brand-cyan);
}

.fwdr-stack {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.fwdr-stack__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fwdr-stack__row:first-child {
  border-top: none;
  padding-top: 0;
}
@media (min-width: 700px) {
  .fwdr-stack__row {
    grid-template-columns: 9rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}
.fwdr-stack__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-cyan);
}
.fwdr-stack__items {
  font-size: 0.92rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

/* ------------------------------------------------------------
   05 — CROSS TEAM（.fwdr-hub / GATE再レビュー）
   初版（.fwdr-feedback：5段階が均等な強さで横一列）は「ENGINEERが
   変換点である」という主従が弱く、04のtimelineとも似て見える、との
   指摘を受けて再設計。内容・コピーは無変更のまま、ENGINEERだけを
   明確なvisual center（大きなTypography＋上下の太いcyan rule）とし、
   他4要素（SALES/CREATIVE・FEEDBACK/DATA・PRODUCT/WEB・USER/CLIENT）
   はsecondary（小さめ・muted・細いnode）として両脇に置く。末尾の
   loop noteの上に、USER/CLIENT側からFEEDBACK/DATA側へ戻る「Uターン」
   をthin dashed lineの折り返し（左右の短い縦tick）として視覚化し、
   テキストのみだった初版より循環が明確に伝わるようにする。
   card・rounded box・iconは使わない。
------------------------------------------------------------ */
.fwdr-hub {
  margin-top: 3rem;
}
.fwdr-hub__row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 960px) {
  .fwdr-hub__row {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
  }
}
.fwdr-hub__side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 960px) {
  .fwdr-hub__side {
    flex: 1 1 0;
  }
}
.fwdr-hub__minor {
  position: relative;
  padding: 0.85rem 0 0 1.25rem;
  border-top: 1px solid var(--border);
}
.fwdr-hub__minor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 7px;
  height: 7px;
  border: 1px solid var(--border);
}
.fwdr-hub__minor-label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}
.fwdr-hub__minor-desc {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.fwdr-hub__minor-arrow {
  margin-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--border);
}
.fwdr-hub__core {
  padding: 1.75rem 0;
  border-top: 3px solid var(--brand-cyan);
  border-bottom: 3px solid var(--brand-cyan);
  text-align: center;
}
@media (min-width: 960px) {
  .fwdr-hub__core {
    flex: 1.5 1 0;
  }
}
.fwdr-hub__core-label {
  display: block;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--brand-deep);
}
.fwdr-hub__core-desc {
  margin: 0.85rem auto 0;
  max-width: 20rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}
.fwdr-hub__return {
  margin-top: 2.5rem;
}
.fwdr-hub__return-line {
  display: none;
}
@media (min-width: 960px) {
  .fwdr-hub__return-line {
    display: block;
    position: relative;
    height: 1px;
    border-top: 1px dashed var(--border);
  }
  .fwdr-hub__return-line::before,
  .fwdr-hub__return-line::after {
    content: "";
    position: absolute;
    top: -0.6rem;
    width: 1px;
    height: 0.6rem;
    background: var(--border);
  }
  .fwdr-hub__return-line::before {
    left: 12%;
  }
  .fwdr-hub__return-line::after {
    right: 12%;
  }
}
.fwdr-hub__return-label {
  margin: 1.25rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--muted-foreground);
}
.fwdr-hub__return-label i {
  font-style: normal;
  font-size: 1rem;
  color: var(--brand-cyan);
}
@media (max-width: 959px) {
  .fwdr-hub__return-label {
    padding-top: 1.5rem;
    border-top: 1px dashed var(--border);
  }
}

/* ------------------------------------------------------------
   07 — WHO WE'RE LOOKING FOR（.fwdr-commonfit / .fwdr-positions）
   Engineerは経験者募集であることを明確にした上で、まず
   FRONTEND/SERVER SIDE共通の人物像（.fwdr-commonfit：番号＋短文
   のみの単一カラム）を主役として提示し、その下でFRONTEND /
   SERVER SIDEの必須・歓迎条件を.fwdr-positionsとして明確に分離
   する（2職種の条件を1つの一覧に混ぜない）。カードgridにはしない。

   GATE再レビュー：内容・条件は無変更のまま、「求人票そのまま感」を
   弱めるため、各職種見出しの下に小さなtechnical descriptor
   （WEB / WORDPRESS / FRONT-END 等）を添え、必須・歓迎・大切に
   していることの見出しに04と同じmonospace風のtag（REQUIRED /
   WELCOME / MINDSET）を付与し、04 TECH STACK・05 CROSS TEAMと
   地続きのSystem/Product/Architectureの語彙へ寄せる。カード化は
   せず、列間の1本のthin ruleのみで3区分を分ける。
------------------------------------------------------------ */
.fwdr-commonfit {
  margin-top: 2.5rem;
  display: grid;
  gap: 0;
}
.fwdr-commonfit__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.fwdr-commonfit__item:last-child {
  border-bottom: 1px solid var(--border);
}
.fwdr-commonfit__num {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-commonfit__text {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-deep);
}

.fwdr-positions {
  margin-top: 3.5rem;
}
.fwdr-position {
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
}
.fwdr-position:first-child {
  border-top: none;
  padding-top: 0;
}
.fwdr-position__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.fwdr-position__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-position__label {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--brand-deep);
}
.fwdr-position__descriptor {
  margin: 0.35rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.fwdr-position__groups {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 860px) {
  .fwdr-position__groups {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.5rem;
  }
  .fwdr-position__group:not(:first-child) {
    padding-left: 2.5rem;
    border-left: 1px solid var(--border);
  }
}
.fwdr-position__group-head {
  margin: 0 0 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.fwdr-position__group-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-cyan);
}
.fwdr-position__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.fwdr-position__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.fwdr-position__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-cyan);
}

/* 日本語の折り返しを文節単位にする（#design-audit）。
   職種ページのHEROと各セクションにも同じ扱いを広げる。 */
.fwdr-hero {
  word-break: auto-phrase;
}

/* ------------------------------------------------------------
   05 CROSS TEAM 導入 — 左：ストーリー ／ 右：写真（Sales / Creative のみ）
   写真を独立した装飾として挟むのをやめ、CROSS TEAM の見出し・本文と
   ひとつの導入ビジュアルに統合したブロック。
   ⚠️ .fwdr-lead-host（= #crossteam）に付けたクラスでのみ効く。写真素材の
      ない Engineer は従来どおり .fwd-scene の padding のまま動かない。
   ⚠️ 面は導入だけ LIGHT BLUE。図解は白のまま残すので、HOW WE WORK
      （濃紺）→ 導入（淡青）→ 図解（白）と明度が一段ずつ上がる。
   ⚠️ 余白そのものをデザインとして使う。左カラムは本文グリッドの左端に
      置き、写真は右へ寄せて画面端まで抜く。要素を詰めない。
------------------------------------------------------------ */
/* section 側：導入が自前の上下余白を持つので、section の上 padding は殺す。
   図解側（.fwdr-lead-host__body）で改めて間隔を取り直す。 */
.fwdr-lead-host.fwd-scene {
  padding-top: 0;
}
.fwdr-lead-host__body {
  padding-top: 4rem;
}
@media (min-width: 48rem) {
  .fwdr-lead-host__body {
    padding-top: 5.5rem;
  }
}

.fwdr-lead {
  position: relative;
  /* .fwd-scene--grain-light::before（白面のgrain）より前に出す。
     導入は淡青なので、白面用のgrainを重ねると濁る。 */
  z-index: 1;
  background: var(--brand-light);
}
/* 導入面のgrain。淡青の面に使う既存の数値（.fwd-scene--noise = 0.115 /
   multiply）と同値。ここで新しい濃さを作らない。 */
.fwdr-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain);
  opacity: 0.115;
  mix-blend-mode: multiply;
}
.fwdr-lead__inner {
  position: relative;
  z-index: 1;
  padding-block: 4rem;
}

/* 左カラム ------------------------------------------------- */
/* 見出し。このページで唯一「読むだけで絵になる」大きさまで上げる。
   .fwd-scene__title（最大2.6rem）よりはっきり大きいが、行数が増えると
   逆に読みにくくなるため、改行位置はHTML側の<br>で固定している。 */
.fwdr-lead__title {
  margin: 1.2rem 0 0;
  /* SPは 8.2vw 追従。360px以上で29px以上を確保しつつ、320pxでも
     Creativeの「ここで形を変える。」が2行を超えないようにしている。 */
  font-size: clamp(1.65rem, 8.2vw, 2rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--brand-deep);
}
/* 改行位置は幅で変える。Creativeの「情報は、ここで形を変える。」は
   SPでは「情報は、」で、TB以上では「ここで」で折る方が行長が揃う。 */
.fwdr-lead__br-pc {
  display: none;
}
@media (min-width: 48rem) {
  .fwdr-lead__title {
    font-size: clamp(2rem, 4.4vw, 3.6rem);
  }
  .fwdr-lead__br-sp {
    display: none;
  }
  .fwdr-lead__br-pc {
    display: inline;
  }
}
/* 本文。見出しを大きくした分、本文は上げない。見出しとの間を広く取り、
   2〜3行で読み終わる長さに保つ。 */
.fwdr-lead__body {
  margin: 2rem 0 0;
  max-width: 24em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--muted-foreground);
}

/* 右カラム（写真） ----------------------------------------- */
.fwdr-lead__figure {
  position: relative;
  /* grain 2枚とコピーを重ねるので、blend が背後の淡青面へ漏れないよう
     独立したスタッキングコンテキストにする。 */
  isolation: isolate;
  overflow: hidden;
  margin: 2.25rem -1.25rem 0;
  /* SPは 5:3。左右は1pxも切らない（＝3人の並びは必ず全部入る）まま、
     高さだけ元画像から10%落とす。3:2のままだと樹冠の余白が縦に効いて
     セクションが間延びし、逆に1.75:1まで詰めるとコピー帯が人物に
     迫って窮屈になる。その中間。
     ⚠️ この比率は Sales / Creative で必ず共通にする。2ページを並べた
        ときにSPの写真だけ高さが違うと、シリーズとして見えなくなる。 */
  aspect-ratio: 5 / 3;
  background-color: #fff;
}
.fwdr-lead__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* object-position は職種ごと。TB以上は 16:9 に切る（＝高さの15.6%を
   落とす）ため、3人の頭頂部が上で切れず、かつ足元の余分な地面だけが
   下から抜ける重心を素材ごとに実画面で決めている。
   Salesは頭上の樹冠が広く空きすぎていたので 30% → 45% へ下げ、
   上を多めに落として下（3人の体・足元側）を見せる配分にしている。
   素材の頭頂部は上から約27%の位置にあり、16:9でも5:3でも上の
   切り落としは最大でも高さの8%弱なので、顔・頭は切れない。 */
.fwdr-lead__figure--sales .fwdr-lead__img {
  object-position: center 45%;
  /* Salesの素材だけ、屋外の順光で肌のハイライトが浮いて顔が白く見える
     （実測：肌の輝度 178/169/162・Creativeは 138/140、明部の比率も約1.4倍）。
     原因はgrainではなく素材そのものなので、grainの数値ではなくこの写真だけ
     トーンで受ける。contrast を 3% だけ落とすと、明部だけが戻って画像全体の
     平均輝度は動かない（実測 107.45→107.75）。
     ⚠️ brightness で下げると写真全体が暗くなるので使わない。色相は不変
        （実測 13.1° で変化なし）、彩度の変化も -1% に留める。
     ⚠️ crop・object-position・写真サイズ・コピー位置には影響しない。
        Creative / 採用TOP の写真には適用しない（現状の見え方でFIX済み）。 */
  filter: contrast(0.97);
}
.fwdr-lead__figure--creative .fwdr-lead__img {
  object-position: center 26%;
}
/* 写真の上のgrainは2枚。1枚目は採用サイト共通の .fwd-photo-grain
   （--fwd-grain-photo / 0.05 / overlay）。位置だけここで与える。 */
.fwdr-lead__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* 2枚目は --fwd-grain / 0.095 / multiply。overlay 単体は
   明るい写真ではほとんど効かず、写真だけが紙の面から浮いてしまう。
   ⚠️ 面のgrainを一段強めた回（淡色面 0.095→0.115）でも、写真側はここを
      上げない。写真は面と違って高周波をもともと多く含み、上げても粒は
      増えず暗くなるだけなので、面と写真は別々に決める。
   実測で平均色相差 0.3〜0.9°、平均輝度 -3.0〜-3.3% に収まる範囲。 */
.fwdr-lead__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 72px 72px;
  background-image: var(--fwd-grain);
  opacity: 0.095;
  mix-blend-mode: multiply;
}
/* 写真の上の1フレーズ。地は CASE 01 の .fwd-case__num と同じ
   var(--brand-deep) ＋ #fff。新しいnavyは作らない。左辺のCYANは
   .fwd-eyebrow まわりで使っている細罫と同じ語彙。
   1つの大きな矩形にせず、行の文字数だけ帯を伸ばして段差を作る。 */
.fwdr-lead__copy {
  position: absolute;
  z-index: 3;
  left: 1.25rem;
  bottom: 1.25rem;
  margin: 0;
}
.fwdr-lead__copy span {
  display: table;
  padding: 0.2em 0.55em;
  border-left: 4px solid var(--brand-cyan);
  background: var(--brand-deep);
  color: #fff;
  font-size: clamp(1.35rem, 5.4vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.fwdr-lead__copy span + span {
  margin-top: 0.25rem;
}

/* TB（768px〜）：まだ縦積み。左の余白を十分に取り、写真だけ 16:9 へ。
   写真は本文グリッドの中に収め、PCのような画面端までの抜きはしない。 */
@media (min-width: 48rem) {
  .fwdr-lead__inner {
    padding-block: 5rem;
  }
  .fwdr-lead__figure {
    max-width: 42rem;
    margin: 2.75rem auto 0 0;
    /* TB / PC は 16:9。屋外写真は3人が横に並ぶ構図なので、上の木立と
       下の地面を落とした方が3人の関係だけが残り、導入面が縦に
       間延びしない。高さで15.6%落ちるが顔・頭頂部・顎は切れない。 */
    aspect-ratio: 16 / 9;
  }
  .fwdr-lead__copy {
    left: 1.75rem;
    bottom: 1.75rem;
  }
  .fwdr-lead__copy span {
    border-left-width: 5px;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
  }
}
/* PC（1180px〜）：非対称2カラム。左は本文グリッドの左端に固定し、
   写真は画面右端まで抜く。1180pxを境にしているのは、これ未満だと
   左カラムが見出し2行を収められる幅（約360px）に届かないため。
   左 padding の下限 8.5rem は、左サイドナビ（右端121px）の下に
   見出しが入らないようにするための値。 */
@media (min-width: 73.75rem) {
  .fwdr-lead__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(30rem, 52vw, 47.5rem);
    gap: 4rem;
    align-items: center;
    max-width: none;
    padding: 5.5rem 0 5.5rem max(8.5rem, calc((100vw - 72rem) / 2 + 4.5rem));
  }
  .fwdr-lead__figure {
    max-width: none;
    margin: 0;
  }
  .fwdr-lead__copy {
    left: 2rem;
    bottom: 2rem;
  }
  .fwdr-lead__copy span {
    font-size: clamp(2rem, 2.9vw, 3.2rem);
  }
}