/* ============================================================
   JENIS 下層ページ v2(css/pages-v2.css)  production KAITO / 2026-10-10
   仕様: _proposal/pages-spec-v2.md(designer LUNA)。css/style.css → css/pages.css → このファイル の順で読み込む。
   クラスは pg2- / jm-(仕事紹介の地図)/ fq-(FAQ)/ ln-(LINE)/ dx-(診断)/ m-(動きの状態)。
   第1段階(2026-10-10): 共通(動き・ヒーローA/B・節の見出し・曲線)+ /jobs /faq /line /diagnosis。
   動きの約束: 初期の非表示は js/site-motion.js が .m-pre を付けたときだけ(JS無効・reduced-motionは最初から最終状態)。無限アニメなし。transform/opacity中心。
============================================================ */
html:has(body.pg2) { overflow-x: clip; }   /* body側にoverflow-x:hiddenは使わない。はみ出す要素は個別に直す */

/* ---------- 動き R1〜R7(R8=画面に入った瞬間に1回だけ=site-motion.js) ---------- */
[data-m="up"].m-pre { opacity: 0; transform: translateY(18px); }
[data-m="up"].m-pre.m-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
[data-m="stagger"].m-pre > * { opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg)); }
[data-m="stagger"].m-pre.m-in > * { opacity: 1; transform: rotate(var(--r, 0deg)); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 60ms); }
[data-m="pop"].m-pre > * { opacity: 0; transform: scale(.85); }
[data-m="pop"].m-pre.m-in > * { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.4,.64,1); transition-delay: calc(var(--i, 0) * 60ms); }
[data-m="zoom"].m-pre :is(img, .pg2-zoom) { transform: scale(1.06); }
[data-m="zoom"].m-pre.m-in :is(img, .pg2-zoom) { transform: none; transition: transform 1s cubic-bezier(.22,.61,.36,1); }
.pg2-mark { position: relative; display: inline-block; isolation: isolate; }
.pg2-mark::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .06em; height: .26em; border-radius: 3px; background: rgba(47,123,255,.22); transform-origin: left center; }
.pg2-mark.m-pre::after { transform: scaleX(0); }
.pg2-mark.m-pre.m-in::after { transform: scaleX(1); transition: transform .6s cubic-bezier(.22,.61,.36,1) .2s; }
[data-m="draw"].m-pre .pg2-line { transform: scaleX(0); }
[data-m="draw"].m-pre .pg2-line--v { transform: scaleY(0); }
[data-m="draw"].m-pre.m-in .pg2-line { transform: scaleX(1); transition: transform .8s cubic-bezier(.4,0,.2,1); }
[data-m="draw"].m-pre.m-in .pg2-line--v { transform: scaleY(1); }
.m-now, .m-now > *, .m-now::after, .m-now img, .m-now .pg2-line { transition: none !important; }
@media (prefers-reduced-motion: reduce) { [data-m], [data-m] > *, .pg2-mark::after { transition: none !important; } }

/* ---------- 共通: 曲線の区切り・節の見出し(c)透かし番号型・小さな部品 ---------- */
.pg2-sec { position: relative; padding: 72px 0 80px; }
.pg2-sec--blue { background: linear-gradient(180deg, #F3F8FE, #E8F1FC); --wave: #F3F8FE; }
.pg2-sec--white { background: #fff; --wave: #fff; }
.pg2-sec--soft { background: #F4F6F9; --wave: #F4F6F9; }
.pg2-wave { position: absolute; left: 0; top: -39px; width: 100%; height: 40px; display: block; color: var(--wave, #fff); pointer-events: none; }
.pg2-wave path { fill: currentColor; }
.pg2-head { position: relative; margin: 0 0 32px; }
.pg2-head .pg-eyebrow { margin: 0; }
.pg2-head .pg-h2 { font-size: 34px; }
.pg2-head__lead { margin: 10px 0 0; font-size: 15.5px; line-height: 1.85; color: var(--pg-sub); max-width: 640px; }
.pg2-no { position: absolute; left: -10px; top: -46px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 120px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: rgba(47,123,255,.1); pointer-events: none; user-select: none; }
.pg2-pill-tent { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #C9D6EA; color: var(--pg-sub); font-size: 11.5px; font-weight: 800; line-height: 1; white-space: nowrap; }

/* ---------- ヒーロー A(写真型)・B(図解型) ---------- */
.pg2-hero { position: relative; z-index: 3; overflow-x: clip; background: linear-gradient(180deg, #F3F8FE 0%, #E8F1FC 100%); }
.pg2-hero::before, .pg2-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.pg2-hero::before { right: 0; top: -180px; width: min(620px, 100%); height: 620px; background: radial-gradient(circle, rgba(47,123,255,.15), rgba(47,123,255,0) 68%); }
.pg2-hero::after { left: 0; bottom: -220px; width: min(460px, 100%); height: 460px; background: radial-gradient(circle, rgba(255,162,98,.12), rgba(255,162,98,0) 70%); }
.pg2-hero--b::before { right: auto; left: 0; top: -200px; }
.pg2-hero--b::after { left: auto; right: 0; bottom: -200px; background: radial-gradient(circle, rgba(47,123,255,.13), rgba(47,123,255,0) 70%); }
.pg2-hero .pg-wrap { position: relative; z-index: 1; }
.pg2-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 560px; align-items: center; gap: 24px; padding: 18px 0 70px; min-height: 360px; }
.pg2-hero--b .pg2-hero__in { grid-template-columns: minmax(0, 1fr) 520px; padding-bottom: 52px; min-height: 300px; }
.pg2-hero .pg-h1 { font-size: 44px; line-height: 1.28; }
.pg2-hero .pg-lead { max-width: 520px; }
.pg2-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.pg2-hero__cta .btn { padding: 15px 30px; }
.pg2-count { display: inline-flex; align-items: flex-end; gap: 6px; font-family: var(--font-display); color: var(--pg-navy); }
.pg2-count > * { line-height: 1; }
.pg2-count__l { font-size: 14px; font-weight: 800; color: var(--pg-sub); margin-right: 4px; padding-bottom: .2em; }
.pg2-count b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 58px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--pg-blue-d); font-variant-numeric: tabular-nums; }
.pg2-count span:last-child { font-size: 20px; font-weight: 900; padding-bottom: .09em; }
.pg2-count b { padding-bottom: 0; }
.pg2-count__d { display: block; margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--pg-sub); }
.pg2-hero__note { display: none; }

/* 傾けて重ねた3枚の写真(トップの診断ティーザーと同じ見せ方) */
.pg2-collage { position: relative; height: 340px; }
.pg2-ph { position: absolute; margin: 0; border-radius: 24px; background: #fff; padding: 4px; box-shadow: 0 18px 34px -16px rgba(20,50,110,.45), 0 0 0 1px rgba(220,231,246,.9); transform: rotate(var(--r, 0deg)); }
.pg2-ph__in { position: relative; overflow: hidden; border-radius: 20px; width: 100%; height: 100%; }
.pg2-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg2-ph__badge { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(3,23,77,.82); color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.pg2-ph--1 { --r: -2.2deg; left: 0; top: 34px; width: 340px; height: 214px; z-index: 1; }
.pg2-ph--2 { --r: 2.4deg; right: 0; top: 0; width: 300px; height: 196px; z-index: 2; }
.pg2-ph--3 { --r: -1.4deg; right: 56px; top: 196px; width: 330px; height: 206px; z-index: 3; }
.pg2-ph--1 img { object-position: 38% 50%; }

.pg2-wave--in { top: auto; bottom: -1px; z-index: 0; }

@media (max-width: 1100px) {
  .pg2-hero__in { grid-template-columns: minmax(0, 1fr) 470px; }
  .pg2-ph--1 { width: 290px; height: 190px; }
  .pg2-ph--2 { width: 260px; height: 176px; }
  .pg2-ph--3 { width: 290px; height: 190px; right: 40px; }
}
@media (max-width: 860px) {
  .pg2-hero__in, .pg2-hero--b .pg2-hero__in { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 0 40px; min-height: 0; }
  .pg2-hero__in > * { min-width: 0; }
  .pg2-collage { order: 2; height: 205px; max-width: 420px; margin: 4px auto 0; width: 100%; }
  .pg2-ph--1 { left: 0; top: 24px; width: 64%; height: 150px; }
  .pg2-ph--2 { right: 0; top: 0; width: 56%; height: 128px; }
  .pg2-ph--3 { display: none; }
  .pg2-ph--s { display: none; }
  .pg2-hero .pg-h1 { font-size: 32px; }
  .pg-jobs .pg2-hero .pg-h1 { font-size: clamp(26px, 8vw, 34px); }   /* 320=26 / 375=30 / 390=31.2 */
  .pg-jobs .pg2-hero .pg-h1 .nb { display: block; white-space: nowrap; }
  .pg-jobs .pg2-hero .pg-h1 .pg2-mark { display: block; width: fit-content; }
  .pg2-collage { max-width: 560px; }
  .pg-jobs .pg2-hero__note { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--pg-sub); }
}
@media (min-width: 600px) and (max-width: 860px) {
  .pg2-collage { height: 240px; }
  .pg2-ph--1 { height: 176px; }
  .pg2-ph--2 { height: 150px; }
}
@media (max-width: 768px) {
  .pg2-sec { padding: 52px 0 60px; }
  .pg2-head .pg-h2 { font-size: 27px; }
  .pg2-no { font-size: 84px; top: -32px; }
  .pg2-count b { font-size: 46px; }
  .pg2-hero__cta .btn { width: 100%; justify-content: center; }
}