/* pages/directsourcing-newgrad.css — 新卒ダイレクトソーシング支援のページだけで使う記述 */

/* ---------- ファーストビュー ---------- */
.ngh { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 112px); }
.ngh__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ngh__lead { margin-top: 20px; max-width: 30em; font-size: 15px; line-height: 2; color: var(--ink-2); }

/* 図：新卒向けの媒体 → Scoutalia AI → 1つのリスト */
.ngf { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 0; row-gap: 20px; }
.ngf__media { grid-row: 1; display: grid; gap: 8px; }
.ngf__media li { font-size: 12px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; white-space: nowrap; animation: ngf-chip 7s calc(var(--i) * 1s) infinite; }
.ngf__lines { grid-row: 1; width: 100%; height: 100%; overflow: visible; }
.ngf__ln { fill: none; stroke: #c9d6e3; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; animation: ngf-flow 1.6s linear infinite; }
.ngf__hub { grid-row: 1; display: grid; gap: 4px; place-items: center; text-align: center; width: 132px; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 20px 40px rgba(17, 18, 20, .18); }
.ngf__hl { font-family: var(--font-en); font-size: 14px; letter-spacing: .02em; align-self: end; }
.ngf__hn { font-size: 10.5px; line-height: 1.5; opacity: .75; align-self: start; padding: 0 14px; }
.ngf__list { grid-column: 1 / -1; grid-row: 2; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px 6px; box-shadow: 0 16px 40px rgba(10, 52, 102, .08); }
.ngf__lh { font-size: 11px; color: var(--ink-2); letter-spacing: .06em; margin-bottom: 4px; }
.ngf__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); animation: ngf-row .6s var(--ease) both; animation-delay: calc(.4s + var(--i) * .25s); }
.ngf__list li:first-child { border-top: 0; }
.ngf__y { font-family: var(--font-en); font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--paper); }
.ngf__w { font-size: 13px; min-width: 0; }
.ngf__w small { display: block; font-size: 11px; color: var(--ink-2); }
.ngf__s { font-style: normal; font-size: 11px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.ngf__s--m { background: var(--ink); color: #fff; }
.ngf__s--r { background: #e8f1fb; color: #0a66c2; }
.ngf__s--i { border: 1px solid var(--line); color: var(--ink-2); }
@keyframes ngf-flow { to { stroke-dashoffset: -16; } }
@keyframes ngf-chip { 0%, 12%, 100% { border-color: var(--line); } 4% { border-color: var(--brand-blue); } }
@keyframes ngf-row { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 1年の動き：カーソルが1年を進み、スカウト（封筒）が学生へ飛ぶ ---------- */
.ngy__scroll { overflow-x: auto; scrollbar-width: none; }
.ngy__scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .ngy__scroll { overflow: visible; } }
.ngy__stage { position: relative; }
@media (max-width: 999px) { .ngy__stage { min-width: 920px; } }
.ngy__grid { display: grid; grid-template-columns: 112px minmax(0, 1fr); row-gap: 12px; }
.ngy__lab { font-size: 12px; color: var(--ink-2); align-self: center; line-height: 1.5; }
.ngy__lab--us { color: var(--ink); font-weight: 500; font-size: 13px; }
.ngy__lab small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-2); }
.ngy__m, .ngy__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.ngy__m span { font-size: 11px; color: var(--ink-2); padding-left: 5px; border-left: 1px solid var(--line); }
/* 学生の動き */
.ngy__s { display: flex; align-items: center; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; line-height: 1.35; color: var(--ink-2); transition: border-color .3s, color .3s; }
.ngy__s.is-cur { border-color: var(--ink); color: var(--ink); }
/* LinkedIn Student Career Week */
.ngy__row--ev { min-height: 40px; align-items: center; }
.ngy__ev { display: flex; align-items: center; gap: 6px; }
.ngy__ev b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8f1fb; color: #0a66c2; font-size: 13px; font-weight: 500; transition: background .3s, color .3s, box-shadow .3s; }
.ngy__ev small { font-family: var(--font-en); font-size: 10px; letter-spacing: .06em; color: #0a66c2; }
.ngy__ev.is-on b { background: #0a66c2; color: #fff; }
.ngy__ev.is-pulse b { box-shadow: 0 0 0 8px rgba(10, 102, 194, .15); }
/* スカウト */
.ngy__row--sc { min-height: 150px; }
.ngy__b { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px; border-radius: 10px; background: #f3f4f6; color: var(--ink-2); min-width: 0; transition: background .4s, color .4s; }
.ngy__b.is-on { background: var(--ink); color: #fff; }
.ngy__b--prep.is-on { background: #e6e8eb; color: var(--ink); }
.ngy__bt { font-size: 13px; font-weight: 500; line-height: 1.4; }
.ngy__bn { margin-top: auto; font-size: 11px; line-height: 1.5; opacity: .75; }
.ngy__viz { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ngy__me { flex: none; width: 22px; color: var(--brand-sky); }
.ngy__me svg, .ngy__env svg, .ngy__key svg { display: block; width: 100%; height: auto; }
.ngy__ds { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; max-width: 70%; justify-content: flex-end; }
.ngy__d { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #9aa0a6; transition: background .3s, transform .3s; }
.ngy__d.is-hit { background: var(--brand-sky); }
.ngy__d.is-ping { transform: scale(1.5); }
.ngy__box { margin-left: auto; display: grid; gap: 4px; padding: 6px 8px; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 8px; }
.ngy__box small { font-size: 10px; opacity: .7; }
.ngy__box .ngy__ds { max-width: none; margin: 0; justify-content: flex-start; }
.ngy__doc { display: grid; gap: 4px; width: 34px; padding: 6px; border-radius: 4px; background: #fff; }
.ngy__doc i { height: 3px; border-radius: 2px; background: #c9ccd0; }
.ngy__doc i:nth-child(2) { width: 80%; } .ngy__doc i:nth-child(3) { width: 60%; }
.ngy__env { position: absolute; left: 0; top: 50%; width: 16px; margin-top: -6px; color: var(--brand-sky); pointer-events: none; z-index: 2; }
/* 今の位置 */
.ngy__cur { position: absolute; top: 0; bottom: 0; left: 112px; width: 2px; margin-left: -1px; background: var(--brand-sky); border-radius: 2px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ngy.is-run .ngy__cur { opacity: 1; }
.ngy__note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 18px; font-size: 12px; color: var(--ink-2); }
.ngy__key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.ngy__key svg { width: 16px; color: var(--brand-sky); }

.ngx__note { margin-top: 24px; font-size: 13px; line-height: 1.9; color: var(--ink-2); }

@media (max-width: 900px) {
  .ngh__in { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ngf__hub { width: 104px; }
  .ngf__media li { font-size: 11px; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) { .ngf__ln, .ngf__media li, .ngf__list li { animation: none; } }

/* ---------- イベント×スカウト：学生の温度が上がる ---------- */
.ngw { display: grid; gap: 18px; }
.ngw__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; }
.ngw__chart { position: relative; height: clamp(220px, 26vw, 300px); margin-top: 48px; }
.ngw__y { font-size: 12px; color: var(--ink-2); }
.ngw__y small { font-size: 11px; }
.ngw__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ngw__grid line { stroke: #e6e8eb; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ngw__solo { fill: none; stroke: #b9bec4; stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.ngw__line { fill: none; stroke: url(#ngwG); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ngw__area { fill: url(#ngwA); }
.ngw__both { clip-path: inset(0 var(--hide, 0%) 0 0); }
.ngw__pin { position: absolute; transform: translate(-50%, -14px); display: flex; align-items: baseline; gap: 1px; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px rgba(17, 18, 20, .12); font-family: var(--font-en); font-size: 12px; color: var(--ink-2); opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap; }
.ngw__pin b { font-size: 18px; font-weight: 500; color: var(--c, var(--ink)); font-variant-numeric: tabular-nums; }
.ngw__pin::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c, var(--ink)); box-shadow: 0 0 0 4px #fff; }
.ngw__pin.is-on { opacity: 1; transform: translate(-50%, -22px); }
.ngw__pin[data-i="0"] { --c: #2eb8de; } .ngw__pin[data-i="1"] { --c: #8fae8a; } .ngw__pin[data-i="2"] { --c: #f2a33a; } .ngw__pin[data-i="3"] { --c: #e5484d; }
.ngw__lg { display: flex; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--ink-2); }
.ngw__lg span { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }
.ngw__lg .is-both { border-image: linear-gradient(90deg, #2eb8de, #e5484d) 1; }
.ngw__lg .is-solo { margin-left: 8px; border-top: 2px dashed #b9bec4; }
.ngw__st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ngw__s { display: grid; align-content: start; gap: 8px; padding: 18px 18px 20px; border-radius: 14px; background: #fff; border-top: 3px solid #e6e8eb; transition: border-color .4s, box-shadow .4s; }
.ngw__s.is-on[data-i="0"] { border-top-color: #2eb8de; } .ngw__s.is-on[data-i="1"] { border-top-color: #8fae8a; } .ngw__s.is-on[data-i="2"] { border-top-color: #f2a33a; } .ngw__s.is-on[data-i="3"] { border-top-color: #e5484d; }
.ngw__ph { font-size: 12px; letter-spacing: .1em; color: var(--ink-2); }
.ngw__s b { font-size: 16px; font-weight: 500; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.ngw__ch { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--paper); }
.ngw__ch svg { width: 14px; color: var(--brand-sky); }
.ngw__ch--event { background: #e8f1fb; color: #0a66c2; }
.ngw__ic { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ngw__ic--ev { background: #0a66c2; } .ngw__ic--act { background: #e5484d; }
@media (max-width: 760px) {
  .ngw__st { grid-template-columns: 1fr 1fr; }
  .ngw__chart { margin-top: 40px; }
  .ngw__pin { font-size: 10px; padding: 3px 7px; } .ngw__pin b { font-size: 14px; }
}

/* ---------- 新卒の色：DS支援と同じ部品を、青ではなく青緑で（使い回しに見せない） ---------- */
.ngk { --brand-blue: #1a9bb0; --brand-sky: #3fc1b0; }
.ngk .dsw2__who--us { background: #0f3b44; }
.ngk .dsw2__c--us { background: #e3f4f2; }
.ngk .dsw2__c--both { background: #eef8f7; }
.ngk .dpm { --g3: #0f3b44; }
.ngk .dpm__x--g1.is-on { background: rgba(26, 155, 176, .07); }
.ngk .dpm__x--g2.is-on { background: rgba(63, 193, 176, .09); }
.ngk .csc__vis--ds { background: #0f3b44; }
.ngk .stp li.is-key, .ngk .stp .is-key { --brand-blue: #1a9bb0; }

/* ===== スマホ最適化：Schedule は横長の表をやめ、時期ごとの縦ステップに（.ngy__v はJSで作る） ===== */
.ngy__v { display: none; }
@media (max-width: 600px) {
  .ngy__scroll { display: none; }
  .ngy__v { display: grid; position: relative; margin-bottom: 20px; }
  .ngy__v::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: #c9d2db; }
  .ngy__vi { position: relative; padding: 0 0 28px 30px; }
  .ngy__vi:last-child { padding-bottom: 0; }
  .ngy__vi::before { content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--brand-blue); box-shadow: 0 0 0 4px #e7f0f8; }
  .ngy__vp { font-family: var(--font-en); font-size: 13px; color: var(--brand-blue); letter-spacing: .06em; }
  .ngy__vt { margin-top: 4px; font-size: 17px; font-weight: 500; }
  .ngy__vn { margin-top: 4px; font-size: 14px; color: var(--ink-2); line-height: 1.8; }
  .ngy__vs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
  .ngy__vs span { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--paper); color: var(--ink-2); }
  .ngy__vs span.is-ev { background: #e7f0f8; color: var(--brand-blue); }
  .ngw__st { grid-auto-rows: 1fr; }
}