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

body.hr-lp {
  --dec-l-dot:  rgba(0, 128, 182, 0.10);
  --dec-l-blob: rgba(0, 128, 182, 0.07);
  --dec-l-mark: rgba(0, 128, 182, 0.055);
  --dec-d-dot:  rgba(255, 255, 255, 0.10);
  --dec-d-blob: rgba(255, 255, 255, 0.09);
  --dec-d-mark: rgba(255, 255, 255, 0.07);

  --dec-dot-size: 18px;
  --dec-dot-r:    1.4px;
  --dec-mark-size: 50px;
  --dec-mark-top:  10px;

  /* ヒーローの同心円（「発信が広がる」＝SNSリーチのメタファー）
     中心はMV（スマホ画像）の実測中心に合わせてある */
  --ring-x:  52%;
  --ring-y:  207px;
  --ring-r1: 210px;
  --ring-r2: 310px;
  --ring-r3: 440px;
  --ring-c1: rgba(255, 255, 255, 0.15);
  --ring-c2: rgba(255, 255, 255, 0.10);
  --ring-c3: rgba(255, 255, 255, 0.06);
}


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

/* ------------------------------------------------------------
   2) 青ベタ面（ヒーロー＋特徴）
   ⚠️ #hr-hero は PC で max-width:1280px の中央寄せ。section 自身に背景を
      敷くと画面端まで届かない（斑点が途中で切れる）。1つ外側の
      「hr_bg.jpg を持つラッパー」に敷いて全幅にする。
      #hr-hero / #features は背景を持たないのでラッパーが透ける。
   ------------------------------------------------------------ */
body.hr-lp div:has(> #hr-hero) {
  background-image:
    radial-gradient(circle, var(--dec-d-dot) var(--dec-dot-r), transparent calc(var(--dec-dot-r) + 0.6px)),
    radial-gradient(circle at var(--ring-x) var(--ring-y), transparent calc(var(--ring-r1) - 1.2px), var(--ring-c1) calc(var(--ring-r1) - 0.2px), var(--ring-c1) calc(var(--ring-r1) + 0.2px), transparent calc(var(--ring-r1) + 1.2px)),
    radial-gradient(circle at var(--ring-x) var(--ring-y), transparent calc(var(--ring-r2) - 1.2px), var(--ring-c2) calc(var(--ring-r2) - 0.2px), var(--ring-c2) calc(var(--ring-r2) + 0.2px), transparent calc(var(--ring-r2) + 1.2px)),
    radial-gradient(circle at var(--ring-x) var(--ring-y), transparent calc(var(--ring-r3) - 1.2px), var(--ring-c3) calc(var(--ring-r3) - 0.2px), var(--ring-c3) calc(var(--ring-r3) + 0.2px), transparent calc(var(--ring-r3) + 1.2px)),
    radial-gradient(ellipse 46% 26% at 96% 4%, var(--dec-d-blob), transparent 70%),
    url("/assets/images/hr_bg.jpg") !important;
  background-size:
    var(--dec-dot-size) var(--dec-dot-size),
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
}

/* ------------------------------------------------------------
   3) 明るい面
   ------------------------------------------------------------ */
body.hr-lp #about,
body.hr-lp #simulator,
body.hr-lp #price,
body.hr-lp #flow,
body.hr-lp #case,
body.hr-lp #column,
body.hr-lp #faq {
  background-image:
    radial-gradient(circle, var(--dec-l-dot) var(--dec-dot-r), transparent calc(var(--dec-dot-r) + 0.6px)),
    radial-gradient(ellipse 55% 45% at 92% 6%, var(--dec-l-blob), transparent 70%),
    radial-gradient(ellipse 50% 40% at 4% 92%, var(--dec-l-blob), transparent 70%) !important;
  background-size:
    var(--dec-dot-size) var(--dec-dot-size),
    100% 100%,
    100% 100% !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
}

/* ------------------------------------------------------------
   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-dot-size: 22px; --dec-mark-size: 96px; --dec-mark-top: 24px;
    --ring-x: 74%; --ring-y: 250px;
    --ring-r1: 250px; --ring-r2: 370px; --ring-r3: 530px;
  }
}
@media (min-width: 1024px) {
  body.hr-lp {
    --dec-dot-size: 26px; --dec-dot-r: 1.6px; --dec-mark-size: 140px; --dec-mark-top: 40px;
    /* MV中心は「ページ中央から右に約320px」で追従する（実測: 1440px=1040, 1920px=1321） */
    --ring-x: calc(50% + 320px); --ring-y: 474px;
    --ring-r1: 330px; --ring-r2: 480px; --ring-r3: 680px;
  }
}

/* ============================================================
   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;
  }
}