/* pages/linkedin.css — linkedin.css から自動で分割。このページだけで使う記述 */
/* 画面をブラウザ風の枠に入れ、上に小さなカードを重ねる */
.li-visual { position: relative; padding: 28px 0 40px 28px; }

/* ---------- 日本のLinkedIn ---------- */

/* ---------- 日本のLinkedIn（データごとに形を変える） ---------- */
.li-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.dp { padding: 40px 36px 44px; display: flex; flex-direction: column; gap: 20px; }
.dp:first-child { padding-left: 0; }
.dp:last-child { padding-right: 0; }
.dp + .dp { border-left: 1px solid var(--line); }
.dp__label { font-size: 13px; letter-spacing: .1em; color: var(--ink-2); }
.dp__big { font-family: var(--font-en); font-weight: 200; font-size: clamp(48px, 5vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; }
.dp__big small { font-family: var(--font-ja); font-size: 15px; font-weight: 400; margin-left: 6px; }
.dp__note { font-size: 13px; color: var(--ink-2); }
/* 縦棒 */
.vbars { display: flex; align-items: flex-end; gap: 20px; height: 180px; border-bottom: 1px solid #c9ccd0; }
.vb { flex: 1; max-width: 120px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; position: relative; }
.vb__bar { width: 100%; height: var(--h); background: #dfe2e5; border-radius: 4px 4px 0 0; transition: height 1.2s var(--ease); }
.vb.is-hi .vb__bar { background: var(--li); }
.vb__val { font-family: var(--font-en); font-size: 14px; color: var(--ink-2); }
.vb.is-hi .vb__val { color: var(--li); font-weight: 500; }
.vb__x { position: absolute; bottom: -26px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.vbars { margin-bottom: 26px; }
/* 積み上げ帯 */
.stack { display: flex; height: 44px; border-radius: 6px; overflow: hidden; transform-origin: left; transition: transform 1.2s var(--ease); }
.stack__seg { width: var(--w); }
.s1 { background: #004182; } .s2 { background: var(--li); } .s3 { background: #dfe2e5; } .s4 { background: #eef0f2; }
.stack__legend { display: grid; gap: 10px; margin-top: 4px; }
.stack__legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.stack__legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.stack__legend b { margin-left: auto; font-family: var(--font-en); font-weight: 400; }
/* 二重の円（外：2026年、内：2022年） */
.gring { position: relative; width: min(220px, 100%); aspect-ratio: 1; margin: 4px auto 0; }
.gring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gring circle { fill: none; }
.gring__bg { stroke: #eef0f2; stroke-width: 10; }
.gring__bg--in { stroke-width: 6; }
.gring__now, .gring__old { stroke-dasharray: 100 100; stroke-linecap: round; stroke-dashoffset: var(--to); }
.gring__now { stroke: var(--li); stroke-width: 10; }
.gring__old { stroke: #9fb4c9; stroke-width: 6; }
.gring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.gring__num > span { font-family: var(--font-en); font-weight: 200; font-size: clamp(40px, 3.6vw, 52px); line-height: 1; font-variant-numeric: tabular-nums; }
.gring__num small { font-family: var(--font-ja); font-size: 14px; font-weight: 400; margin-left: 4px; }
.gring__num em { font-style: normal; font-size: 12px; color: var(--ink-2); }
.gring__legend { display: flex; justify-content: center; gap: 20px; font-size: 13px; }
.gring__legend li { display: flex; align-items: center; gap: 8px; }
.gring__legend i { width: 10px; height: 10px; border-radius: 50%; }
.gring__legend .is-now { background: var(--li); }
.gring__legend .is-old { background: #9fb4c9; }
.dp--ring .dp__note { text-align: center; }
.li-data.js-anim .gring__now, .li-data.js-anim .gring__old { stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease); }
.li-data.js-anim .dp.is-in .gring__old { stroke-dashoffset: var(--to); }
.li-data.js-anim .dp.is-in .gring__now { stroke-dashoffset: var(--to); transition-delay: .25s; }
/* 動き：JSが有効なときだけ、最初は0から */
.li-data.js-anim .vb__bar { height: 0; }
.li-data.js-anim .dp.is-in .vb__bar { height: var(--h); }
.li-data.js-anim .stack { transform: scaleX(0); }
.li-data.js-anim .dp.is-in .stack { transform: none; }

/* ---------- 候補者体験の曲線 ---------- */
.jc { position: relative; }
.jc__canvas { position: relative; }
.jc__svg { display: block; width: 100%; height: auto; overflow: visible; }
.jc__t { font-size: 13px; fill: #5f6368; font-family: var(--font-ja); }
.jc__t--strong { font-size: 16px; fill: #0a66c2; font-weight: 500; }
.jc__card { position: absolute; }
.jc__card--1 { left: 2%; top: 4%; width: 27%; }
.jc__card--2 { left: 36.5%; top: 2%; width: 24%; }
.jc__card--3 { left: 71%; top: 50%; width: 25%; }
.jc__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #d6d9dc; }
.jc__col { padding: 28px 28px 8px; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 8px; }
.jc__col + .jc__col { border-left: 1px dashed #d6d9dc; }
.jc__col:first-child { padding-left: 0; }
.jc__no { font-family: var(--font-en); font-size: 12px; letter-spacing: .2em; color: var(--ink-2); }
.jc__name { font-size: var(--fs-h3); font-weight: 400; }
.jc__text { font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.jc__tool-label { margin-top: 16px; padding-top: 18px; border-top: 1px dashed #d6d9dc; font-size: 11px; letter-spacing: .12em; color: var(--ink-2); }
.jc__tool-name { font-size: 17px; font-weight: 500; }
.jc__tool-name small { display: block; font-family: var(--font-en); font-size: 11px; font-weight: 400; color: var(--li); letter-spacing: .06em; margin-top: 2px; }
.jc__tool-text { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.flow__note { margin-top: clamp(40px, 5vw, 64px); font-size: var(--fs-h3); font-weight: 300; line-height: 1.8; }

/* 候補者側の画面（簡略図） */
.ui { background: var(--white); border: 1px solid var(--ui-line); border-radius: 12px; padding: 14px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.6; box-shadow: 0 16px 36px rgba(17, 18, 20, .07); }
.ui__person, .ui__co { display: flex; align-items: center; gap: 10px; }
.ui__person b, .ui__co b { display: block; font-weight: 500; font-size: 12px; }
.ui__person small, .ui__co small { display: block; font-size: 10px; color: var(--ink-2); }
.ui__bubble { background: #f2f3f5; border-radius: 10px 10px 10px 2px; padding: 8px 10px; font-size: 11px; }
.ui__cover { height: 40px; margin: -14px -14px 0; background: linear-gradient(120deg, #dfe7ef, #c8d6e4); }
.ui__co { margin-top: -20px; }
.ui__logo { width: 36px; height: 36px; border-radius: 6px; background: var(--white); border: 1px solid var(--ui-line); flex: none; }
.ui__co span:last-child { padding-top: 20px; }
.ui__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ui__thumbs span { height: 44px; background: #eef1f4; border-radius: 6px; display: grid; place-items: end start; padding: 4px 6px; font-size: 9px; color: var(--ink-2); }
.ui__job { font-size: 14px; font-weight: 500; }
.ui__meta { font-size: 11px; color: var(--ink-2); }
.ui__apply { align-self: flex-start; background: var(--li); color: #fff; font-size: 11px; padding: 4px 16px; border-radius: 999px; }

/* ---------- 費用 ---------- */
.li-cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.li-cost__title { font-size: var(--fs-h2); font-weight: 300; line-height: 1.6; }
.li-cost__text { color: var(--ink-2); line-height: 2; margin: 20px 0 28px; }
@media (max-width: 860px) {
  .li-visual { padding: 16px 0 36px 12px; }
  .jc__scroll { overflow-x: auto; margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1); padding-inline: var(--gutter-l) var(--gutter-r); }
  .jc__canvas { width: 820px; }
  .li-cost { grid-template-columns: 1fr; }
  .jc__cols { grid-template-columns: 1fr; }
  .jc__col { grid-row: auto; grid-template-rows: none; }
  .jc__col + .jc__col { border-left: 0; border-top: 1px solid var(--line); }
  .li-data { grid-template-columns: 1fr; }
  .dp, .dp:first-child, .dp:last-child { padding: 32px 0 36px; }
  .dp + .dp { border-left: 0; border-top: 1px solid var(--line); }
  .vbars { height: 150px; }
}
.dp__big em { font-style: normal; font-size: .6em; margin-left: 2px; }
.st--3 .st__nav { max-width: 760px; }

/* ======================================================================
   2026/10 追加：冒頭の動き（検索→スカウト→返信→日程→面談→面接→内定）
   図は固定サイズで作り、枠の幅に合わせて縮める（.fit／--k はJSが設定）
   ====================================================================== */
.fit { position: relative; width: 100%; aspect-ratio: var(--fw) / var(--fh); }
.fit__in { position: absolute; left: 0; top: 0; width: calc(var(--fw) * 1px); height: calc(var(--fh) * 1px); transform: scale(var(--k, 1)); transform-origin: 0 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
.av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: #fff; }
.av--a { background: #3a6ea5; } .av--b { background: #b0677a; } .av--c { background: #5b8a72; } .av--hr { background: #0a66c2; }

.rcx { padding: 0; }
.rw { position: absolute; left: 0; top: 0; width: 400px; height: 360px; background: #fff; border: 1px solid #dfe3e8; border-radius: 12px; box-shadow: 0 24px 60px rgba(10, 52, 102, .14); overflow: hidden; }
.rw__top { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid #e6e9ec; font-size: 11px; color: #5f6368; }
.rw__top b { color: #0a66c2; font-size: 14px; font-weight: 500; margin-right: 8px; }
.rw__bell { margin-left: auto; position: relative; width: 18px; color: #5f6368; display: flex; }
.rw__bell svg { width: 18px; }
.rw__bell em { position: absolute; right: -7px; top: -6px; background: #cc1016; color: #fff; font-style: normal; font-size: 9px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; transform: scale(0); transition: transform .3s var(--ease); }
.rw__body { position: relative; display: grid; grid-template-columns: 108px 1fr; height: calc(100% - 38px); }
.rw__side { padding: 12px 10px; border-right: 1px solid #eef0f2; display: flex; flex-direction: column; gap: 4px; background: #fbfcfd; }
.rw__side p { font-size: 10px; font-weight: 500; margin-top: 6px; }
.rw__chip { align-self: flex-start; white-space: nowrap; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: #e8f1fb; color: #0a66c2; opacity: 0; transform: translateY(4px); transition: .35s var(--ease); }
.rw__side .rw__chip:nth-of-type(2) { transition-delay: .15s; } .rw__side .rw__chip:nth-of-type(3) { transition-delay: .3s; } .rw__side .rw__chip:nth-of-type(4) { transition-delay: .45s; }
.rw__main { padding: 12px 14px; min-width: 0; }
.rw__q { border: 1.5px solid #0a66c2; border-radius: 8px; padding: 6px 10px; min-height: 52px; background: #fff; }
.rw__qi { display: block; font-size: 9px; color: #0a66c2; letter-spacing: .06em; margin-bottom: 2px; }
.rw__type { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: #111214; word-break: break-all; }
.rw__count { margin: 8px 0 6px; font-size: 11px; color: #5f6368; }
.rw__n { font-size: 15px; font-weight: 500; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.rw__list { display: grid; gap: 6px; }
.rw__row { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px; border: 1px solid #eef0f2; border-radius: 8px; opacity: 0; transform: translateY(8px); transition: .4s var(--ease); }
.rw__row:nth-child(2) { transition-delay: .12s; } .rw__row:nth-child(3) { transition-delay: .24s; }
.rw__row .av { grid-row: 1 / 3; }
.rw__who { min-width: 0; grid-row: 1 / 3; }
.rw__who b { display: block; font-size: 12px; font-weight: 500; color: #0a66c2; }
.rw__who small { display: block; font-size: 10px; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw__tag { white-space: nowrap; font-size: 9px; color: #057642; background: #e6f4ea; border-radius: 4px; padding: 1px 6px; justify-self: end; }
.rw__save { font-size: 10px; border: 1px solid #0a66c2; color: #0a66c2; border-radius: 999px; padding: 1px 10px; justify-self: end; }
.rw__save i { font-style: normal; } .rw__save i + i { display: none; }
.rw__compose, .rw__pipe { position: absolute; top: 0; bottom: 0; left: 108px; right: 0; background: #fff; padding: 12px 14px; opacity: 0; transform: translateX(30px); transition: .45s var(--ease); pointer-events: none; }
.rw__compose { border-left: 1px solid #e6e9ec; box-shadow: -12px 0 30px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 8px; }
.rw__ch { font-size: 13px; font-weight: 500; } .rw__ch small { display: block; font-size: 10px; color: #5f6368; font-weight: 400; }
.rw__subj { font-size: 11px; padding-bottom: 6px; border-bottom: 1px solid #eef0f2; }
.rw__msg { flex: 1; font-size: 12px; line-height: 1.75; }
.rw__type2::after, .rw__type.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.1em; background: #0a66c2; vertical-align: -2px; margin-left: 1px; animation: rcx-blink 1s steps(1) infinite; }
.rcx:not(.is-run) .rw__type2::after { display: none; }
.rw__foot { display: flex; align-items: center; gap: 8px; }
.rw__tpl { font-size: 10px; color: #5f6368; background: #f3f4f6; border-radius: 4px; padding: 2px 8px; }
.rw__send { font-size: 12px; background: #0a66c2; color: #fff; border-radius: 999px; padding: 4px 18px; transition: transform .15s; }
.rw__sent { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.8); background: #057642; color: #fff; font-size: 13px; border-radius: 999px; padding: 8px 18px; opacity: 0; transition: .3s var(--ease); }
.rw__pipe { z-index: 2; left: 0; }
.rw__ph { font-size: 12px; font-weight: 500; margin-bottom: 10px; }
.rw__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: calc(100% - 30px); }
.rw__cols p { background: #f5f7f9; border-radius: 8px; padding: 8px 6px; font-size: 11px; text-align: center; color: #5f6368; }
.rw__cols p:last-child { background: #e8f1fb; color: #0a66c2; font-weight: 500; }
.rw__card { position: absolute; top: 76px; left: calc(14px + var(--c, 0) * (100% - 28px + 6px) / 4); width: calc((100% - 28px - 18px) / 4); background: #fff; border: 1px solid #cfd8e3; border-radius: 8px; box-shadow: 0 8px 20px rgba(10, 52, 102, .12); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: left .55s var(--ease); }
.rw__card b { display: block; font-size: 11px; font-weight: 500; } .rw__card small { display: block; font-size: 9px; color: #5f6368; }
.rw__offer { font-style: normal; white-space: nowrap; font-size: 10px; background: #0a66c2; color: #fff; border-radius: 999px; padding: 1px 8px; transform: scale(0); transition: transform .35s var(--ease) .2s; }

.ph { position: absolute; left: 392px; top: 54px; width: 168px; height: 344px; background: #111214; border-radius: 28px; padding: 7px; box-shadow: 0 28px 60px rgba(17, 18, 20, .28); }
.ph__screen { position: relative; height: 100%; border-radius: 22px; overflow: hidden; background: linear-gradient(170deg, #2a5d8f, #0b2b4d); color: #fff; }
.ph__status { display: flex; justify-content: space-between; padding: 6px 14px 0; font-size: 9px; position: relative; z-index: 3; }
.ph__lock { text-align: center; padding-top: 30px; }
.ph__time { font-family: var(--font-en); font-weight: 200; font-size: 40px; line-height: 1.1; }
.ph__date { font-size: 10px; opacity: .8; }
.ph__notif { position: absolute; left: 8px; right: 8px; top: 130px; display: flex; gap: 8px; align-items: flex-start; background: rgba(255,255,255,.92); color: var(--ink); border-radius: 12px; padding: 8px; opacity: 0; transform: translateY(-16px); transition: .4s var(--ease); }
.ph__notif img { width: 16px; height: auto; margin-top: 2px; }
.ph__notif b { display: block; font-size: 10px; } .ph__notif small { display: block; font-size: 9.5px; line-height: 1.45; color: #3c4043; }
.ph__chat { position: absolute; inset: 0; top: 20px; background: #fff; color: var(--ink); display: flex; flex-direction: column; opacity: 0; transition: opacity .35s; }
.ph__head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid #eef0f2; }
.ph__head .av { width: 24px; height: 24px; font-size: 10px; }
.ph__head b { display: block; font-size: 10px; font-weight: 500; } .ph__head small { display: block; font-size: 8.5px; color: #5f6368; }
.ph__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 8px; overflow: hidden; }
.ph__msgs > * { display: none; flex: none; animation: rcx-pop .35s var(--ease); }
.ph__b { font-size: 9.5px; line-height: 1.55; padding: 6px 8px; border-radius: 10px; max-width: 88%; }
.ph__in { background: #f2f3f5; border-bottom-left-radius: 2px; align-self: flex-start; }
.ph__out { background: #0a66c2; color: #fff; border-bottom-right-radius: 2px; align-self: flex-end; }
.ph__typing { align-self: flex-end; background: #e8f1fb; border-radius: 10px; padding: 7px 9px; gap: 3px; }
.ph__typing i { width: 4px; height: 4px; border-radius: 50%; background: #0a66c2; animation: rcx-dot 1s infinite; }
.ph__typing i:nth-child(2) { animation-delay: .15s; } .ph__typing i:nth-child(3) { animation-delay: .3s; }
.ph__cal { border: 1px solid #cfd8e3; border-radius: 10px; padding: 7px; flex-direction: column; gap: 4px; align-self: flex-start; width: 88%; }
.ph__cal p { font-size: 9px; color: #5f6368; }
.ph__cal span { font-size: 9.5px; border: 1px solid #0a66c2; color: #0a66c2; border-radius: 6px; padding: 2px 6px; text-align: center; transition: .25s; }
.ph__ok { align-self: center; text-align: center; font-size: 9.5px; color: #057642; background: #e6f4ea; border-radius: 8px; padding: 5px 8px; line-height: 1.5; }

/* 状態（JSが順にクラスを足す。最初からすべて付いた状態＝最後の場面） */
.rcx.rc-s1 .rw__chip { opacity: 1; transform: none; }
.rcx.rc-s2 .rw__row { opacity: 1; transform: none; }
.rcx.rc-s3 .rw__row.is-pick { border-color: #0a66c2; background: #f3f8fd; }
.rcx.rc-s3 .is-pick .rw__save { background: #0a66c2; color: #fff; }
.rcx.rc-s3 .is-pick .rw__save i:first-child { display: none; } .rcx.rc-s3 .is-pick .rw__save i + i { display: inline; }
.rcx.rc-s4 .rw__compose { opacity: 1; transform: none; }
.rcx.rc-s5 .rw__send { transform: scale(.92); }
.rcx.rc-s5 .rw__sent { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rcx.rc-s6 .ph__notif { opacity: 1; transform: none; }
.rcx.rc-s7 .ph__chat { opacity: 1; }
.rcx.rc-s7 .m1, .rcx.rc-s9 .m3, .rcx.rc-s12 .m5 { display: block; }
.rcx.rc-s8 .m2 { display: flex; } .rcx.rc-s9 .m2 { display: none; }
.rcx.rc-s9 .rw__bell em { transform: scale(1); }
.rcx.rc-s10 .m4 { display: flex; }
.rcx.rc-s11 .ph__slot { background: #0a66c2; color: #fff; }
.rcx.rc-s13 .rw__pipe { opacity: 1; transform: none; }
.rcx.rc-p1 .rw__card { --c: 1; } .rcx.rc-p2 .rw__card { --c: 2; } .rcx.rc-p3 .rw__card { --c: 3; border-color: #0a66c2; }
.rcx.rc-s14 .rw__offer { transform: scale(1); }

.rcx__steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 18px; position: relative; counter-reset: st; }
.rcx__steps::before { content: ""; position: absolute; left: 7%; right: 7%; top: 5px; height: 1px; background: #d6d9dc; }
.rcx__steps li { position: relative; padding-top: 18px; text-align: center; font-size: 12px; color: #9aa0a6; white-space: nowrap; transition: color .3s; }
.rcx__steps li::before { content: ""; position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; border: 1.5px solid #c9ccd0; box-sizing: border-box; transition: .3s; }
.rcx__steps li.is-done { color: var(--ink); }
.rcx__steps li.is-done::before { background: #0a66c2; border-color: #0a66c2; }
.rcx__steps li.is-cur { color: #0a66c2; font-weight: 500; }
.rcx__steps li.is-cur::before { background: #fff; border-color: #0a66c2; box-shadow: 0 0 0 4px rgba(10, 102, 194, .18); }
.rcx__steps li:last-child.is-done { color: #0a66c2; font-weight: 500; }
@keyframes rcx-blink { 50% { opacity: 0; } }
@keyframes rcx-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes rcx-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .li-visual.rcx { padding: 8px 0 0; }
  .rcx__steps li { font-size: 10.5px; }
}

/* ======================================================================
   ツール3つの画面（静止画をHTMLで描く）
   ====================================================================== */
.st__shot--mock { padding: 4%; }
.st__shot--mock .fit { width: 100%; }
.tm { position: absolute; inset: 0 0 auto 0; height: 390px; background: #fff; border: 1px solid #dfe3e8; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 52, 102, .14); }
.tm__top { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px; border-bottom: 1px solid #e6e9ec; font-size: 10.5px; color: #5f6368; }
.tm__top b { color: #0a66c2; font-size: 13px; font-weight: 500; }
.tm__top .is-on { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px #111214; padding: 10px 0; }
.tm__search { margin-left: auto; width: 150px; background: #eef3f8; border-radius: 4px; padding: 3px 10px; font-size: 10px; }
.tm__search--l { margin-left: 0; margin-right: auto; }
.tm__btn { font-size: 10px; border: 1px solid #0a66c2; color: #0a66c2; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.tm__btn--fill { background: #0a66c2; color: #fff; }
.tm__mail { width: 18px; color: #5f6368; display: flex; } .tm__mail svg { width: 100%; }
.co { position: absolute; display: flex; align-items: center; gap: 6px; background: #111214; color: #fff; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 4px 12px 4px 4px; box-shadow: 0 8px 20px rgba(17, 18, 20, .2); white-space: nowrap; z-index: 2; }
.co i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #0a66c2; display: grid; place-items: center; font-family: var(--font-en); font-size: 11px; }
/* リクルーター */
.tmr { display: grid; grid-template-columns: 124px 1fr; height: calc(100% - 36px); }
.tmr__side { padding: 10px 12px; border-right: 1px solid #eef0f2; background: #fbfcfd; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tmr__side p { font-size: 10px; font-weight: 500; margin-top: 7px; }
.chip { font-size: 9.5px; background: #e8f1fb; color: #0a66c2; border-radius: 999px; padding: 1px 8px; }
.tmr__add { font-size: 9.5px; color: #9aa0a6; }
.tmr__main { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tmr__spot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 4px; }
.tmr__spot p { border: 1px solid #e6e9ec; border-radius: 6px; padding: 6px 8px; font-size: 9px; color: #5f6368; line-height: 1.4; }
.tmr__spot b { display: block; font-family: var(--font-en); font-size: 15px; font-weight: 500; color: var(--ink); }
.tmr__spot .is-hi { border-color: #0a66c2; background: #f3f8fd; }
.tmr__row { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid #eef0f2; }
.tmr__who { min-width: 0; }
.tmr__who b { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: #0a66c2; }
.tmr__who em { font-style: normal; font-size: 8.5px; font-weight: 400; color: #057642; background: #e6f4ea; border-radius: 4px; padding: 0 5px; }
.tmr__who small { display: block; font-size: 9.5px; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmr__who .tmr__job { color: #5f6368; }
/* キャリアページ */
.tmc__cover { height: 84px; background: linear-gradient(120deg, #0a3e74, #0a66c2 55%, #2eb8de); position: relative; overflow: hidden; }
.tmc__cover i { position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); }
.tmc__cover i:nth-child(1) { width: 140px; height: 140px; right: 40px; top: -60px; } .tmc__cover i:nth-child(2) { width: 80px; height: 80px; right: 160px; top: 30px; } .tmc__cover i:nth-child(3) { width: 220px; height: 220px; left: -60px; top: 20px; }
.tmc__id { display: flex; align-items: flex-end; gap: 10px; padding: 0 16px; margin-top: -22px; position: relative; }
.tmc__logo { width: 52px; height: 52px; border-radius: 8px; background: #fff; border: 1px solid #dfe3e8; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: #0a66c2; flex: none; }
.tmc__name { flex: 1; } .tmc__name b { display: block; font-size: 14px; font-weight: 500; } .tmc__name small { display: block; font-size: 9.5px; color: #5f6368; }
.tmc__tabs { display: flex; gap: 16px; padding: 8px 16px 0; border-bottom: 1px solid #e6e9ec; font-size: 10.5px; color: #5f6368; }
.tmc__tabs span { padding-bottom: 6px; } .tmc__tabs .is-on { color: #057642; box-shadow: inset 0 -2px #057642; font-weight: 500; }
.tmc__life { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 8px; padding: 10px 16px; }
.tmc__video { grid-row: 1 / 3; border-radius: 8px; background: linear-gradient(150deg, #c9d9ea, #9fb9d4 60%, #7d9fc2); position: relative; min-height: 150px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.tmc__video b { font-size: 11.5px; font-weight: 500; } .tmc__video small { font-size: 9px; opacity: .9; }
.tmc__play { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgba(255,255,255,.92); }
.tmc__play::after { content: ""; position: absolute; left: 16px; top: 12px; border-left: 12px solid #0a66c2; border-block: 8px solid transparent; }
.tmc__voice { border: 1px solid #e6e9ec; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.tmc__q { font-size: 10.5px; line-height: 1.6; }
.tmc__by { display: flex; align-items: center; gap: 6px; } .tmc__by .av { width: 22px; height: 22px; font-size: 9px; }
.tmc__by b { display: block; font-size: 9.5px; font-weight: 500; } .tmc__by small { display: block; font-size: 8.5px; color: #5f6368; }
.tmc__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tmc__tiles span { height: 46px; border-radius: 6px; padding: 4px 6px; font-size: 9px; color: #fff; display: flex; align-items: flex-end; }
.tmc__t1 { background: linear-gradient(150deg, #8fb3a0, #5b8a72); } .tmc__t2 { background: linear-gradient(150deg, #d6a5b2, #b0677a); } .tmc__t3 { background: linear-gradient(150deg, #a9c4de, #3a6ea5); }
.tmc__ad { position: absolute; right: -6px; top: 46px; width: 180px; background: #fff; border: 1px solid #dfe3e8; border-radius: 10px; padding: 8px 10px; box-shadow: 0 14px 30px rgba(10, 52, 102, .16); display: flex; flex-direction: column; gap: 3px; }
.tmc__ad small { font-size: 8.5px; color: #5f6368; } .tmc__ad b { font-size: 11px; font-weight: 500; } .tmc__ad span { align-self: flex-start; font-size: 9px; border: 1px solid #0a66c2; color: #0a66c2; border-radius: 999px; padding: 0 8px; }
/* ジョブスロット */
.tmj { display: grid; grid-template-columns: 210px 1fr; height: calc(100% - 36px); }
.tmj__list { border-right: 1px solid #eef0f2; display: flex; flex-direction: column; }
.tmj__h { padding: 10px 12px; font-size: 11px; font-weight: 500; border-bottom: 1px solid #eef0f2; } .tmj__h small { display: block; font-size: 9px; color: #5f6368; font-weight: 400; }
.tmj__card { display: flex; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #eef0f2; }
.tmj__card.is-on { background: #f3f8fd; box-shadow: inset 3px 0 #0a66c2; }
.tmj__logo { width: 28px; height: 28px; border-radius: 5px; border: 1px solid #dfe3e8; display: grid; place-items: center; font-size: 8px; color: #0a66c2; flex: none; background: #fff; }
.tmj__card b { display: block; font-size: 11px; font-weight: 500; color: #0a66c2; } .tmj__card small { display: block; font-size: 9px; color: #3c4043; } .tmj__card em { display: block; font-style: normal; font-size: 8.5px; color: #057642; }
.tmj__swap { margin: auto 10px 12px; font-size: 9.5px; text-align: center; border: 1px dashed #9cbfe4; color: #0a66c2; border-radius: 6px; padding: 5px; }
.tmj__detail { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.tmj__co { display: flex; align-items: center; gap: 6px; font-size: 10px; } .tmj__co .tmj__logo { width: 22px; height: 22px; }
.tmj__title { font-size: 17px; font-weight: 500; }
.tmj__meta { font-size: 10px; color: #5f6368; }
.tmj__btns { display: flex; gap: 6px; margin: 4px 0; } .tmj__btns .tm__btn { font-size: 11px; padding: 3px 14px; }
.tmj__match { border: 1px solid #e6e9ec; border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
.tmj__match b { font-size: 10px; font-weight: 500; } .tmj__match small { font-size: 9px; color: #5f6368; }
.tmj__bar { height: 6px; background: #eef0f2; border-radius: 3px; overflow: hidden; } .tmj__bar i { display: block; width: 75%; height: 100%; background: #057642; }
.tmj__lines { display: grid; gap: 6px; margin-top: 6px; } .tmj__lines i { height: 6px; border-radius: 3px; background: #eef0f2; } .tmj__lines i:nth-child(2) { width: 90%; } .tmj__lines i:nth-child(4) { width: 70%; }
.tmj__rec { position: absolute; right: -6px; bottom: 82px; width: 190px; background: #fff; border: 1px solid #dfe3e8; border-radius: 12px; padding: 9px 10px 9px 46px; box-shadow: 0 16px 34px rgba(10, 52, 102, .18); display: flex; flex-direction: column; }
.tmj__rec .tmj__logo { position: absolute; left: 10px; top: 24px; }
.tmj__rec small { font-size: 8.5px; color: #0a66c2; font-weight: 500; } .tmj__rec b { font-size: 11px; font-weight: 500; } .tmj__rec em { font-style: normal; font-size: 9px; color: #5f6368; }

/* ======================================================================
   費用：人材紹介の手数料が積み上がる様子と、LinkedInの定額
   ====================================================================== */
.lcx { border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px, 3vw, 32px); background: var(--white); display: grid; gap: 22px; min-width: 0; }
.lcx__calc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.lcx__calc span { background: #f5f6f7; border-radius: 8px; padding: 6px 12px; white-space: nowrap; }
.lcx__calc b { font-family: var(--font-en); font-weight: 400; font-size: 20px; color: var(--ink); margin: 0 2px 0 6px; font-variant-numeric: tabular-nums; }
.lcx__calc i { font-style: normal; color: #9aa0a6; }
.lcx__calc .is-res { background: #fdecea; color: #a8321f; } .lcx__calc .is-res b { color: #a8321f; }
.lcx__ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.lcx__n { display: flex; align-items: center; gap: 12px; font-size: 13px; flex: 1 1 240px; }
.lcx__range { flex: 1; accent-color: #0a66c2; min-width: 0; }
.lcx__out { font-family: var(--font-en); font-size: 16px; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.lcx__sals { display: flex; gap: 4px; font-size: 12px; } .lcx__sals::before { content: "年収"; color: var(--ink-2); align-self: center; margin-right: 4px; }
.lcx__sals button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; color: var(--ink-2); cursor: pointer; }
.lcx__sals button.is-on { border-color: var(--ink); color: var(--ink); }
.lcx__bars { position: relative; display: grid; gap: 14px; }
.lcx__row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 84px; align-items: center; gap: 12px; }
.lcx__lab { font-size: 13px; }
.lcx__row.is-li .lcx__lab { color: #0a66c2; font-weight: 500; }
.lcx__track { position: relative; height: 40px; }
.lcx__stack { display: flex; gap: 2px; height: 100%; }
.lcx__seg { width: var(--w); flex: none; background: #c9ccd0; border-radius: 3px; display: grid; place-items: center; font-size: 10px; color: #fff; overflow: hidden; white-space: nowrap; animation: lcx-in .35s var(--ease); }
.lcx__seg:nth-child(odd) { background: #b5b9be; }
.lcx__fixed { width: var(--li); height: 100%; background: #0a66c2; color: #fff; border-radius: 3px; display: grid; place-items: center; font-size: 11px; white-space: nowrap; }
.lcx__gap { position: absolute; top: -22px; left: var(--li); width: var(--gw); border-top: 1.5px solid #a8321f; font-size: 11px; color: #a8321f; text-align: center; padding-top: 2px; transform: translateY(-2px); white-space: nowrap; transition: width .35s var(--ease); }
.lcx__gap[hidden] { display: none; }
.lcx__line { position: absolute; top: -6px; bottom: -6px; left: calc(70px + 12px + (100% - 70px - 84px - 24px) * var(--lip)); border-left: 1.5px dashed #0a66c2; pointer-events: none; }
.lcx__sum { font-size: 12px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.lcx__sum b { font-family: var(--font-en); font-weight: 400; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 2px; }
.lcx__row.is-li .lcx__sum { color: #0a66c2; font-size: 13px; }
.lcx__bars { padding-top: 22px; }
.lcx__say { font-size: 15px; line-height: 1.9; }
.lcx__say b { font-weight: 500; } .lcx__say-t { color: #a8321f; }
.lcx__note { font-size: 11px; color: var(--ink-2); }
@keyframes lcx-in { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }
@media (max-width: 560px) {
  .lcx__row { grid-template-columns: 56px minmax(0, 1fr) 72px; gap: 8px; }
  .lcx__line { left: calc(56px + 8px + (100% - 56px - 72px - 16px) * var(--lip)); }
  .lcx__seg { font-size: 0; }
  .lcx__sum b { font-size: 16px; }
}

/* ======================================================================
   伴走：1か月目は週ごと、そのあとは月ごと。下に成果の伸び
   ====================================================================== */
.lsp__grid { display: grid; grid-template-columns: 64px repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 2fr); column-gap: 8px; row-gap: 10px; }
.lsp__m { font-size: 15px; font-weight: 500; padding: 0 0 10px 12px; border-left: 2px solid var(--ink); align-self: end; }
.lsp__m small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.lsp__m--1 { border-color: #0a66c2; }
.lsp__w { font-family: var(--font-en); font-size: 11px; letter-spacing: .08em; color: #0a66c2; padding-left: 12px; }
.lsp__lab { grid-column: 1; font-size: 12px; color: var(--ink-2); padding-top: 12px; }
.lsp__card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lsp__card b { font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.lsp__card p { font-size: 12px; color: var(--ink-2); line-height: 1.75; }
.lsp__tool { align-self: flex-start; font-family: var(--font-en); font-size: 10px; color: #0a66c2; background: #e8f1fb; border-radius: 4px; padding: 1px 6px; }
.lsp__cs { grid-row: 4; font-size: 11.5px; text-align: center; background: #0a66c2; color: #fff; border-radius: 6px; padding: 6px 4px; }
.lsp__cs--meet { background: #e8f1fb; color: #0a66c2; }
.lsp__curve { height: 92px; position: relative; margin-top: 8px; }
.lsp__curve svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lsp__area { fill: #e8f1fb; }
.lsp__path { fill: none; stroke: #0a66c2; stroke-width: 3; stroke-linecap: round; }
.lsp__out { padding: 4px 0 0 12px; border-left: 1px solid #c9ccd0; display: flex; flex-direction: column; gap: 8px; }
.lsp__out b { font-size: 13px; font-weight: 500; }
.lsp__out--hire b { color: #0a66c2; }
.lsp__checks { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ink-2); }
.lsp__checks span::before { content: "✓"; color: #0a66c2; margin-right: 4px; }
.lsp__ppl { display: flex; gap: 4px; }
.lsp__ppl i { width: 16px; height: 22px; position: relative; }
.lsp__ppl i::before { content: ""; position: absolute; left: 4px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #c9ccd0; }
.lsp__ppl i::after { content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 11px; border-radius: 8px 8px 2px 2px; background: #c9ccd0; }
.lsp__ppl i.is-hire::before, .lsp__ppl i.is-hire::after { background: #0a66c2; }
.lsp__note { margin-top: 20px; font-size: 12px; color: var(--ink-2); }
/* 動き：左から順に現れ、曲線が伸びる */
.lsp.js-anim .lsp__card, .lsp.js-anim .lsp__cs, .lsp.js-anim .lsp__out { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) var(--d, 0s), transform .5s var(--ease) var(--d, 0s); }
.lsp.js-anim.is-in .lsp__card, .lsp.js-anim.is-in .lsp__cs, .lsp.js-anim.is-in .lsp__out { opacity: 1; transform: none; }
.lsp.js-anim .lsp__path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .4, 1) .1s; }
.lsp.js-anim.is-in .lsp__path { stroke-dashoffset: 0; }
.lsp.js-anim .lsp__area { opacity: 0; transition: opacity 1s 1.6s; }
.lsp.js-anim.is-in .lsp__area { opacity: 1; }
@media (max-width: 960px) {
  .lsp__grid { display: flex; flex-direction: column; gap: 8px; }
  .lsp__grid > * { order: var(--o, 99); }
  .lsp__lab, .lsp__curve { display: none; }
  .lsp__m { margin-top: 18px; }
  .lsp__m--1 { margin-top: 0; }
  .lsp__w { margin-top: 6px; }
  .lsp__cs { align-self: flex-start; padding: 3px 10px; }
  .lsp__out { border-left: 2px solid #0a66c2; background: #f3f8fd; padding: 10px 12px; border-radius: 0 6px 6px 0; }
}
.st__shot .tm__top img, .rw__top img, .ph__notif img { width: 16px; max-width: none; max-height: none; height: auto; border-radius: 0; box-shadow: none; background: none; }
.li-cost:has(.lcx) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
@media (max-width: 860px) { .li-cost:has(.lcx) { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .lsp__m { align-self: stretch; } }
.lcx__fixed { transition: width .35s var(--ease); } .lcx__line { transition: left .35s var(--ease); }
/* 冒頭の動く図の裏には、ぼかしの色を置かない */
.li-hero:has(.rcx) .blob--blue { display: none; }

/* ===== スマホ最適化：How it works は横長の図をやめ、01〜03のステップだけで見せる ===== */
@media (max-width: 600px) {
  .jc__scroll { display: none; }
  .jc__cols { border-top: 0; }
  .jc__cols > .jc__col, .jc__cols > .jc__col:first-child { padding: 24px 0 24px 30px; position: relative; }
  .jc__cols > .jc__col:first-child { padding-top: 0; }
  .jc__col::before { content: ""; position: absolute; left: 6px; top: 30px; bottom: -6px; width: 1px; background: #c9d2db; }
  .jc__col:last-child::before { display: none; }
  .jc__col::after { content: ""; position: absolute; left: 0; top: 26px; width: 13px; height: 13px; border-radius: 50%; background: var(--li); box-shadow: 0 0 0 4px #e8f0f9; }
  .jc__col:first-child::after { top: 2px; } .jc__col:first-child::before { top: 6px; }
  .jc__col + .jc__col { border-top: 0; }
}