/* ============================================================
   アプデ人事 LP 装飾レイヤー
   - DOM要素は追加しない（background と ::after のみ）
   - 装飾は body.hr-lp（= /update-hr トップ）だけ。CTAの強調は hr-layout 全体
   - 巨大英字は ::after の content。本文テキストとして抽出されない
     （2026-08-19「h1の英字キッカーがSERPタイトルを壊した」件の再発防止）
   ============================================================ */

body.hr-lp {
  --dec-l-mark: rgba(0, 128, 182, 0.055);
  --dec-d-mark: rgba(255, 255, 255, 0.07);
  --dec-mark-size: 50px;
  --dec-mark-top:  10px;

  /* 点と線のネットワーク装飾（assets/images/decor/*.svg・scripts/make_hr_decor_svg.py）。
     セクションの高さがまちまちなので % ではなく固定pxで敷く */
  --dec-net-h: 380px;

  /* ⚠️ 2026-09-10 に削除した変数
       --dec-*-dot / --dec-dot-size / --dec-dot-r … 斑点（ユーザー指示で全廃）
       --dec-*-blob … 隅のぼかし（白背景に統一したので不要）
       --dec-mesh-size … 実績の網目テクスチャ（青背景ごと廃止）
       --ring-*        … 旧ヒーローの同心円（軌道に置き換え） */
}

/* 白で統一した面。地色はここ1箇所（各セクションのインラインも #fff に揃えてある） */
body.hr-lp .bg-white-lp { background: #fff; }


/* ------------------------------------------------------------
   1) 装飾の基準になる箱
   isolation:isolate で ::after(z-index:-1) を「自分の背景の上・中身の下」に置く。
   子要素に position/z-index を足さないのでレイアウトは無改変。
   overflow:hidden は巨大英字が横スクロールを起こさないため。
   ------------------------------------------------------------ */
body.hr-lp #about,
body.hr-lp #features,
body.hr-lp #doc-cta,
body.hr-lp #simulator,
body.hr-lp #price,
body.hr-lp #flow,
body.hr-lp #case,
body.hr-lp #column,
body.hr-lp #faq,
body.hr-lp #strength,
body.hr-lp #contact-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ------------------------------------------------------------
   2) 青ベタ面（特徴＝FEATURES だけ）
   ⚠️ 2026-09-10 変更: もとは「hr_bg.jpg を持つラッパー」に敷いてヒーローと特徴の
      2セクションをまたいで青くしていた。ヒーローを明るい面（＋3D軌道）にしたので、
      青は #features だけに移した。#features は px-0 の全幅セクションなので、
      section 自身に敷いても画面端まで届く（#hr-hero は max-width 中央寄せなので届かない。
      ヒーロー側を section に敷けないのはそのため）。
      同心円（--ring-*）は旧ヒーローのスマホモックの中心に合わせた装飾だったので廃止。
   ------------------------------------------------------------ */
body.hr-lp #features {
  background-image:
    url("/assets/images/decor/net-left-light.svg"),
    url("/assets/images/decor/net-right-light.svg"),
    url("/assets/images/hr_bg.jpg") !important;
  background-size:
    auto var(--dec-net-h),
    auto calc(var(--dec-net-h) * 0.86),
    100% 100% !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position:
    left -30px top 7%,
    right -24px bottom 8%,
    center top !important;
}

/* ------------------------------------------------------------
   2b) ヒーロー（明るい面）
   青背景をやめたので、白抜きだった文字を濃色に振り直す。
   ⚠️ 背景は #hr-hero ではなく1枚外の .hr-hero-band に敷く。
      #hr-hero は PC で max-width:1280px の中央寄せなので、自身に敷くと 1920px で
      左右に地の色の帯が出る（実際に出した）。
   ------------------------------------------------------------ */
body.hr-lp .hr-hero-band {
  /* 点と線のネットワーク・三角形・点格子（assets/images/decor/*.svg・scripts/make_hr_decor_svg.py で生成）。
     左は見出しの周り、右は軌道の外側。どちらも画面の端に寄せて中央は空けている。
     ⚠️ background-position を1つだけ書くと全レイヤーに効く。層ごとに指定すること。 */
  background-image:
    url("/assets/images/decor/net-left.svg"),
    url("/assets/images/decor/net-right.svg"),
    radial-gradient(ellipse 52% 62% at 80% 34%, rgba(0, 128, 182, 0.10), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f4fafd 100%) !important;
  background-size:
    auto 88%,
    auto 76%,
    100% 100%,
    100% 100% !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position:
    left -24px center,
    right -16px top 18%,
    center top,
    center top !important;
}

/* ★ 文字の下だけ装飾を薄める（2026-09-11）
   点と線のネットワークは `auto 88%` と大きいので、見出し・リード文・タグ・CTAの
   **真裏を線と点が横切って読みにくかった**（ユーザー指摘）。
   装飾を小さくすると画面の密度が落ちるので、代わりに
   **文字のある左側にだけ白いベールを1枚かける**。外側に向かって消えるので、
   装飾は端のほうで今までどおり見える。

   ⚠️ z-index の位置関係:
        .hr-hero-band の背景（装飾）        … 一番下
        この ::before（ベール）              … z-index 0
        #hr-hero .hero-media（軌道）         … z-index 1
        見出し・リード・タグ・CTA            … z-index 2
      ベールは軌道より下なので、右側の軌道の見え方は変わらない。
   ⚠️ .hr-hero-band は全幅なので、ベールも全幅に敷いたうえで**位置と広がりを%で指定**する。
      要素を左半分だけにすると、1920pxで文字の位置とズレる。 */
body.hr-lp .hr-hero-band { position: relative; }

body.hr-lp .hr-hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 52% at 24% 46%,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.88) 48%,
      rgba(255, 255, 255, 0) 82%),
    /* CTA の「まずは相談だけでも、お気軽に」まわりがまだ線に掛かるので、もう1枚下に重ねる */
    radial-gradient(ellipse 30% 26% at 22% 82%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0) 78%);
}

/* SPは装飾を下に小さく逃がしてあるので、ベールは弱くてよい（かけすぎると地が真っ白になる） */
@media screen and (max-width: 767px) {
  body.hr-lp .hr-hero-band::before {
    background:
      radial-gradient(ellipse 78% 30% at 50% 76%,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0) 84%);
  }
}

/* SPは幅が狭く、装飾が本文の真裏に来てしまう。左だけを下に小さく置く */
@media screen and (max-width: 767px) {
  body.hr-lp .hr-hero-band {
    background-size:
      auto 34%,
      0 0,
      100% 100%,
      100% 100% !important;
    background-position:
      left -30px bottom 4%,
      right 0 top 0,
      center top,
      center top !important;
  }
}

/* 見出しは「大きく・太く・ゆったり組んだ青」。参考にしたのは NP掛け払い のFV。
   ⚠️ 元は tracking-tight（字間を詰める）＋ leading-[1.2] だった。逆方向に振っている:
      字間を開け、行間を1.5にして、日本語の大見出しとして読ませる組みにする。
      Tailwindのユーティリティ1個より、この3段セレクタのほうが強いので !important は不要。 */
body.hr-lp #hr-hero .hero-headline h1 {
  color: #0072a8;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
body.hr-lp #hr-hero .hero-headline p {
  color: rgba(22, 41, 58, 0.38);
  letter-spacing: 0.22em;
}
body.hr-lp #hr-hero .hero-lead p {
  color: #555;
  font-size: 15px;
  line-height: 1.95;
}

/* ★ 実績バッジ（2026-09-11）。マークアップは views/pages/hr/home.php の $hero_badges。
   参考はストックの「実績アイコン コレクション」（金の月桂樹＋リボンの実績アイコン集）。
   ⚠️ 参考画像は**黒地に金**だが、このFVは白地・ブランド色は青。金をそのまま持ってくると浮くので
      **輪は金のまま／文字は紺と青**にして白地に馴染ませている。輪の青版（laurel-blue.svg）も
      用意してあるので、金をやめたいときは background-image を差し替えるだけでよい。
   ⚠️ 輪は `background-image` で敷き、文字はその上にHTMLで置く。
      SVGに文字を入れると `<img>` の中はページのフォントを使えない（別ドキュメント扱い）。 */
body.hr-lp #hr-hero .hero-badges {
  margin: 0 0 22px;
}

body.hr-lp #hr-hero .hero-badges ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  /* ⚠️ タグ（.hero-tags ul）は 430px で頭打ちにしているが、バッジは**外してある**。
     輪は丸いので、同じ幅でも文字に使える横幅はタグの箱よりずっと狭い。
     430pxに揃えると長いリード（8文字級）が輪に掛かる（実際に掛かった）。 */
  margin: 0;
  padding: 0;
  list-style: none;
}

body.hr-lp #hr-hero .hr-badge {
  position: relative;
  /* 文字を「バッジの幅に対する割合」で決めるためのコンテナ。
     輪の内径は viewBox 240 に対して直径 2*74*0.92 ≒ 136 ＝ **幅の約57%**。
     文字数 --n で割れば、どの画面幅でも輪に収まる級数が自動で出る。 */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 月桂樹のSVGは 240x200。同じ比率の箱にして contain で敷く＝輪の中心と箱の中心が合う */
  /* 月桂樹のSVGは 216x186。同じ比率の箱にして contain で敷く＝輪の中心と箱の中心が合う */
  aspect-ratio: 216 / 186;
  padding: 5% 7% 6%;
  background: url("/assets/images/badges/laurel-gold.svg") no-repeat center / contain;
  text-align: center;
  line-height: 1.15;
}

body.hr-lp #hr-hero .hr-badge__lead {
  font-size: 11px;   /* cqw 非対応ブラウザ向けの控えめな既定値 */
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #16293a;
  /* リードは折り返さず1行で。長い文言は級数を落として輪に収める（--n で自動計算） */
  white-space: nowrap;
  transform: scale(min(1, 1));
}

body.hr-lp #hr-hero .hr-badge__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  margin-top: 1px;
}

body.hr-lp #hr-hero .hr-badge__main {
  display: block;
  font-size: 30px;   /* cqw 非対応ブラウザ向け */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0072a8;
}

body.hr-lp #hr-hero .hr-badge__main em {
  font-size: 0.58em;
  font-style: normal;
  font-weight: 700;
  margin-left: 1px;
}

body.hr-lp #hr-hero .hr-badge__foot {
  font-size: 13px;
  font-weight: 700;
  color: #16293a;
}

/* 数字が無いバッジ（「サブスク・／成果報酬」）。数字より字数が多いので上限を下げる。
   ⚠️ 2行以上になるので line-height が効く。行数は home.php 側の main 配列で決まる */
body.hr-lp #hr-hero .hr-badge--text .hr-badge__main {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
}

/* ★ 文字数に応じた自動フィット。
   上限（min の左）は「短い文言のときに大きくなりすぎない」ための頭打ち。
   係数（cqw の数字）は輪の内径の割合から取ってある。文言を変えても実測し直さなくてよい。 */
@supports (font-size: 1cqw) {
  /* ⚠️ **cqw はパディングを引いたコンテンツボックス基準**（枠の幅ではない）。
     枠の幅で係数を出したら文字が3割小さくなった（実測でlead 75px想定→54px）。
     いまは左右7%のパディングなので コンテンツ = 枠の86%。輪の内側の空きは枠の**約76%**。
     🔴 **「文字幅 < 内径」で判定してはいけない。** 円は中心から離れるほど横幅が狭いので、
        上の行が輪に掛かっていても通ってしまう（実際それで「全部OK」と報告して指摘された）。
        必ず**行ごとに「その高さでの弦 2*sqrt(r^2 - dy^2)」**と比べる。 */
  body.hr-lp #hr-hero .hr-badge__lead {
    font-size: min(15px, calc(54cqw / var(--n, 6)));
  }

  body.hr-lp #hr-hero .hr-badge__main {
    font-size: min(34px, calc(84cqw / var(--n, 3)));
  }

  body.hr-lp #hr-hero .hr-badge--text .hr-badge__main {
    font-size: min(21px, calc(58cqw / var(--n, 4)));
  }

  /* 🔴 foot（「削減」）を13px固定にしていたら、輪が小さくなるSPで**行全体がはみ出した**
     （320pxで弦を4.4px超過。数字との比率もPC 0.38 に対しSP 0.52 まで太っていた）。
     main と同じく文字数から決める。上限13pxは据え置きなのでPCの見た目は変わらない。 */
  body.hr-lp #hr-hero .hr-badge__foot {
    font-size: min(13px, calc(18cqw / var(--fn, 2)));
  }
}

body.hr-lp #hr-hero .hero-badges__note {
  margin: 4px 0 0;
  max-width: 430px;
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
  color: rgba(22, 41, 58, 0.42);
}

/* 支援範囲のタグ（参考: NP掛け払いのFV）。白地に青枠・青文字の四角を3列×2段 */
body.hr-lp #hr-hero .hero-tags {
  margin-top: -12px;
  margin-bottom: 30px;
}

body.hr-lp #hr-hero .hero-tags ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 430px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.hr-lp #hr-hero .hero-tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 6px 4px;
  border: 1px solid rgba(0, 128, 182, 0.55);
  border-radius: 6px;
  background: #fff;
  color: #0072a8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.35;
}

/* CTAの上の一言。両脇の「＼ ／」は文字ではなく擬似要素の線
   （フォントによって太さと間隔が変わるため） */
body.hr-lp #hr-hero .hero-cta__lead {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #16293a;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.hr-lp #hr-hero .hero-cta__lead::before,
body.hr-lp #hr-hero .hero-cta__lead::after {
  content: "";
  width: 1.5px;
  height: 17px;
  background: #16293a;
  border-radius: 1px;
}

body.hr-lp #hr-hero .hero-cta__lead::before { transform: rotate(-22deg); }
body.hr-lp #hr-hero .hero-cta__lead::after  { transform: rotate(22deg); }

/* ⚠️ 字間を開けたぶん、SPでは「アップデートせよ。」が1行に収まらなくなる（実測: 390px幅で3行に割れた）。
   9文字 × (字送り) が本文幅342pxを超えないところまで文字を落とす */
@media screen and (max-width: 767px) {
  body.hr-lp #hr-hero .hero-headline h1 {
    font-size: 32px;
    letter-spacing: 0.04em;
  }

  /* 幅430px枠の中では3列だと1マスが100px弱になり文字が詰まる。SPは2列 */
  body.hr-lp #hr-hero .hero-tags ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.hr-lp #hr-hero .hero-tags li {
    min-height: 42px;
    font-size: 13px;
  }
}
/* 白いぼかし円は明るい面では見えないだけでなく、下の光と喧嘩する */
body.hr-lp #hr-hero .hero-decor { display: none !important; }

/* ------------------------------------------------------------
   3) 明るい面
   ------------------------------------------------------------ */
body.hr-lp #about,
body.hr-lp #doc-cta,
body.hr-lp #simulator,
body.hr-lp #price,
body.hr-lp #flow,
body.hr-lp #case,
body.hr-lp #column,
body.hr-lp #faq,
body.hr-lp #strength,
body.hr-lp #contact-cta {
  background-image:
    url("/assets/images/decor/net-left.svg"),
    url("/assets/images/decor/net-right.svg") !important;
  background-size:
    auto var(--dec-net-h),
    auto calc(var(--dec-net-h) * 0.86) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position:
    left -30px top 8%,
    right -24px bottom 10% !important;
}

/* 1つおきに左右を入れ替える。全部同じ配置だと、スクロールしたときに
   同じ絵が等間隔で出てきて「壁紙」に見えてしまう */
body.hr-lp #simulator,
body.hr-lp #flow,
body.hr-lp #column,
body.hr-lp #contact-cta {
  background-position:
    left -34px bottom 6% !important;
  background-image: url("/assets/images/decor/net-left.svg") !important;
  background-size: auto calc(var(--dec-net-h) * 0.92) !important;
  background-repeat: no-repeat !important;
}

body.hr-lp #price,
body.hr-lp #faq {
  background-position:
    right -30px top 10% !important;
  background-image: url("/assets/images/decor/net-right.svg") !important;
  background-size: auto var(--dec-net-h) !important;
  background-repeat: no-repeat !important;
}

@media screen and (max-width: 767px) {
  body.hr-lp { --dec-net-h: 220px; }
}

/* ------------------------------------------------------------
   4) 巨大英字の透かし（::after の content）
   ------------------------------------------------------------ */
body.hr-lp #about::after,
body.hr-lp #features::after,
body.hr-lp #simulator::after,
body.hr-lp #price::after,
body.hr-lp #flow::after,
body.hr-lp #case::after,
body.hr-lp #column::after,
body.hr-lp #faq::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  right: 0;
  top: var(--dec-mark-top);
  text-align: center;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: var(--dec-mark-size);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--dec-l-mark);
  user-select: none;
}
body.hr-lp #features::after { color: var(--dec-d-mark); }

body.hr-lp #about::after    { content: "ABOUT"; }
body.hr-lp #simulator::after{ content: "SIMULATOR"; }
body.hr-lp #features::after { content: "FEATURES"; }
body.hr-lp #price::after    { content: "PRICE"; }
body.hr-lp #flow::after     { content: "FLOW"; }
body.hr-lp #case::after     { content: "CASE"; }
body.hr-lp #column::after   { content: "COLUMN"; }
body.hr-lp #faq::after      { content: "FAQ"; }

/* ------------------------------------------------------------
   5) タブレット以上 / PC でスケールを上げる
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  body.hr-lp {
    --dec-mark-size: 96px; --dec-mark-top: 24px; --dec-net-h: 420px;
  }
}
@media (min-width: 1024px) {
  body.hr-lp {
    --dec-mark-size: 140px; --dec-mark-top: 40px; --dec-net-h: 460px;
  }
}

/* ============================================================
   6) CTAボタン: 色は元のまま。「押せる感」だけを強める
      影で浮かせる → hoverで持ち上げる → activeで沈める
      /update-hr 配下の全ページに適用してヘッダーの見えを揃える
   ============================================================ */
body.hr-layout {
  --btn-shadow:            0 3px 10px rgba(0, 46, 68, 0.20);
  --btn-shadow-hover:      0 8px 20px rgba(0, 46, 68, 0.28);
  --btn-shadow-blue:       0 3px 10px rgba(0, 92, 130, 0.30);
  --btn-shadow-blue-hover: 0 8px 20px rgba(0, 92, 130, 0.38);
}

body.hr-layout #hr-pc-header .pc-btn,
body.hr-layout #hr-hero .hero-cta a,
body.hr-layout #price .price-cta a,
body.hr-layout #hr-bottom-cta a {
  transition: box-shadow 0.25s ease, transform 0.15s ease, background 0.3s, opacity 0.3s;
}
body.hr-layout #hr-pc-header .pc-btn:active,
body.hr-layout #hr-hero .hero-cta a:active,
body.hr-layout #price .price-cta a:active,
body.hr-layout #hr-bottom-cta a:active { transform: translateY(1px); }

/* 下部追従CTA */
body.hr-layout #hr-bottom-cta a.cta-entry { box-shadow: var(--btn-shadow); font-weight: 700; }
body.hr-layout #hr-bottom-cta a.cta-entry:hover { box-shadow: var(--btn-shadow-hover); transform: translateY(-2px); }
body.hr-layout #hr-bottom-cta a.cta-contact:hover { transform: translateY(-2px); }

/* 料金セクション: 1つ目を塗り（主）／2つ目は白地に枠線（副） */
body.hr-layout #price .price-cta a:first-child {
  background: #0080B6 !important;
  border-color: #0080B6 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: var(--btn-shadow-blue);
}
body.hr-layout #price .price-cta a:first-child:hover { box-shadow: var(--btn-shadow-blue-hover); transform: translateY(-2px); }
body.hr-layout #price .price-cta a:last-child {
  background: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 46, 68, 0.10);
}
body.hr-layout #price .price-cta a:last-child:hover { transform: translateY(-2px); }

@media (min-width: 1024px) {
  body.hr-layout #hr-pc-header .pc-btn--solid { box-shadow: var(--btn-shadow); font-weight: 700; }
  body.hr-layout #hr-pc-header .pc-btn--solid:hover { opacity: 1; box-shadow: var(--btn-shadow-hover); transform: translateY(-2px); }
  body.hr-layout #hr-pc-header .pc-btn--ghost:hover { transform: translateY(-2px); }

  body.hr-layout #hr-hero .hero-cta .is-solid { box-shadow: var(--btn-shadow); font-weight: 700; }
  body.hr-layout #hr-hero .hero-cta .is-solid:hover { opacity: 1; box-shadow: var(--btn-shadow-hover); transform: translateY(-2px); }
  body.hr-layout #hr-hero .hero-cta .is-ghost:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  body.hr-layout #hr-pc-header .pc-btn:hover,
  body.hr-layout #hr-hero .hero-cta a:hover,
  body.hr-layout #price .price-cta a:hover,
  body.hr-layout #hr-bottom-cta a:hover { transform: none; }
}

/* ============================================================
   8) FLOW の各ステップにイラストを置く
   コラムのサムネで使っているイラスト素材から、工程と意味が対応する
   5点（同じフラット系で揃えたもの）を選定。
   - DOMは変更しない（.flow-step の ::after だけ）
   - 素材は白背景。白い円チップの中に置くので継ぎ目が出ない
   ⚠️ スマホ(<768px)では出さない。右に場所を空けると
      「契約前ミーティング」が必ず2行に折り返し、FLOW全体が +108px 伸びる
      （44pxまで縮めても解消しないことを実測済み）
   ============================================================ */
@media (min-width: 768px) {
  body.hr-lp #flow .flow-step { padding-right: 104px !important; }
  body.hr-lp #flow .flow-step::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    box-shadow: 0 2px 8px rgba(0, 40, 70, 0.18);
    pointer-events: none;
  }
  body.hr-lp #flow .flow-step:nth-child(1)::after { background-image: url("/assets/images/flow/step1.png"); }
  body.hr-lp #flow .flow-step:nth-child(2)::after { background-image: url("/assets/images/flow/step2.png"); }
  body.hr-lp #flow .flow-step:nth-child(3)::after { background-image: url("/assets/images/flow/step3.png"); }
  body.hr-lp #flow .flow-step:nth-child(4)::after { background-image: url("/assets/images/flow/step4.png"); }
  body.hr-lp #flow .flow-step:nth-child(5)::after { background-image: url("/assets/images/flow/step5.png"); }
}

/* PCは5列に並ぶので、チップは各カードの上部中央へ */
@media (min-width: 1024px) {
  body.hr-lp #flow .flow-step {
    padding-right: 18px !important;
    padding-top: 108px !important;
  }
  body.hr-lp #flow .flow-step::after {
    right: auto;
    left: 50%;
    top: 26px;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
  }
}


/* ------------------------------------------------------------
   7) スマホのヘッダー（2026-09-10 白地に変更）
   PCヘッダー（hr-pc.css）を白地にしたのに合わせる。ロゴも色付き版に差し替え済み。
   ⚠️ 背景は app.js が「最上部=transparent / スクロール後=青」をインラインで書き込むので、
      CSSから勝つには !important が要る。
   ⚠️ メニューを開いたときだけは元の透明に戻す（下の青いパネルを透けさせるため）。
      その状態ではロゴと横棒を白へ反転する。 */
body.hr-layout [data-hr-header] {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom-color: rgba(0, 128, 182, 0.12) !important;
}

body.hr-layout #hr-menu-toggle .hr-bar {
  background-color: #16293a;
}

/* 🔴 スマホヘッダーのロゴは `class="h-7 w-auto"` が付いているが、
   **ビルド済みの style.css に .h-7 も .w-auto も無い**（`.h-16` はある）。
   これまで正しく見えていたのは、旧ロゴの実寸が 154×36 でたまたまその大きさだったから。
   色付きロゴ（1086×218）に差し替えた瞬間、flexに潰されて 302×61 で出た。
   クラスに頼らずここで実寸を決める。 */
body.hr-layout [data-hr-header] a img {
  height: 28px;
  width: auto;
}

body.hr-layout:has(#hr-menu-toggle.is-open) [data-hr-header] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}

body.hr-layout:has(#hr-menu-toggle.is-open) #hr-menu-toggle .hr-bar {
  background-color: #fff;
}

/* 色付きロゴを白へ。開いている間だけ（青いパネルの上なので） */
body.hr-layout:has(#hr-menu-toggle.is-open) [data-hr-header] .pc-logo img,
body.hr-layout:has(#hr-menu-toggle.is-open) [data-hr-header] img {
  filter: brightness(0) invert(1);
}