/* 2026-11-05 デザインシステム v0.2 の別版（TOP・Recruit）。design_system/20261105_NEWSKOOL_デザインシステム_v0.2.html の決まりに沿う
   鎌田「演出が AI っぽくなる。高度なレンダリングっぽいの（水星 KV のフィルム感やざらつく）を」：
   ・動きは「弾む・ふわっと出る」を使わない。光の揺らぎ・フィルムの粒・にじみ・露光のように、物の光の振る舞いで出す
   ・粒は 12 コマ／秒でとびとびに動かす（フィルムの映写と同じ。なめらかにすると CG っぽくなる） */
:root {
  --lamp:#FFC94A; --coral:#FF5C40; --magenta:#C21E78; --violet:#6A2BC2; --lav:#9298F9; --aqua:#75F4F1; --sky:#29A8FA; --lime:#DCF841;
  --night:#1B1436; --night2:#120D27; --o-tint:#FFF3E0; --black:#1A1A1A;
  --stroke:1.5px solid #1A1A1A;
}

/* ---------- 夜の欄：地・粒・周辺の暗さ ---------- */
.ds .night { position:relative; overflow:hidden; color:#fff; background:radial-gradient(120% 80% at 50% 0%, #2A1F55 0%, var(--night) 45%, var(--night2) 100%); border:0; }
.ds .night .wrap { position:relative; z-index:2; }
.ds .night .label { color:#fff; opacity:.75; }
.ds .case-night { position:relative; overflow:hidden; }
.ds .case-night .wrap { position:relative; z-index:2; }
.film { position:absolute; inset:0; pointer-events:none; z-index:1; }
.film .grain { position:absolute; inset:-60px; background:url(../img/grain.png) 0 0/256px 256px; opacity:.5; animation:grain 1s steps(12) infinite; }
.case-night .film .grain { opacity:.35; }
.film .vig { position:absolute; inset:0; background:radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(5,3,15,.55) 100%); }
@keyframes grain {
  0% { transform:translate(0,0) } 8% { transform:translate(-23px,14px) } 17% { transform:translate(31px,-9px) } 25% { transform:translate(-7px,-37px) }
  33% { transform:translate(19px,27px) } 42% { transform:translate(-41px,3px) } 50% { transform:translate(11px,-19px) } 58% { transform:translate(-17px,41px) }
  67% { transform:translate(37px,11px) } 75% { transform:translate(-29px,-23px) } 83% { transform:translate(5px,33px) } 92% { transform:translate(25px,-31px) } 100% { transform:translate(0,0) }
}

/* 文字の光のにじみ（フィルムのハレーション）：白い文字のまわりに、灯りの色がうっすら広がる */
.ds .glowt { text-shadow:0 0 1px rgba(255,255,255,.6), 0 0 18px rgba(255,201,74,.28), 0 0 42px rgba(255,92,64,.14); }

/* ---------- 光の柱（KV の寺の上のサーチライト） ---------- */
.beams { position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:screen; }
.beams i { position:absolute; bottom:-10%; width:120px; height:140%; transform-origin:50% 100%; filter:blur(14px);
  background:linear-gradient(to top, rgba(255,190,60,.8), rgba(255,190,60,.22) 55%, rgba(255,201,74,0)); clip-path:polygon(42% 100%, 58% 100%, 100% 0, 0 0); }
.beams i:nth-child(1) { left:12%; }
.beams i:nth-child(2) { left:58%; background:linear-gradient(to top, rgba(117,244,241,.40), rgba(117,244,241,.10) 55%, rgba(117,244,241,0)); }
.beams i:nth-child(3) { left:82%; }

/* ---------- 電飾 ---------- */
.strand { position:absolute; left:0; right:0; top:0; height:70px; z-index:2; pointer-events:none; }
.strand svg { position:absolute; inset:0; width:100%; height:100%; }
.strand path { fill:none; stroke:rgba(255,255,255,.28); stroke-width:1; vector-effect:non-scaling-stroke; }
.strand i { position:absolute; left:var(--x); top:var(--y, 20px); width:9px; height:9px; margin:-2px 0 0 -4.5px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff 0 18%, var(--c) 45%); opacity:var(--b, 1);
  box-shadow:0 0 6px 1px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 45%, transparent); }

/* ---------- TOP：About の4つの活動を吹き出しに ---------- */

/* ---------- TOP：Recruit の名札カード ---------- */
.rc-night { padding-top:120px !important; }
.rc-night .rc-lead { color:#E8E4F5; }
.tag-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tag-card { position:relative; display:flex; flex-direction:column; background:#fff; color:var(--black); text-decoration:none; border-radius:22px; padding:20px 22px 18px;
  box-shadow:0 0 0 1.5px var(--black), 6px 6px 0 0 var(--c); transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s; }
.tag-card:hover { transform:translate(-2px,-2px); box-shadow:0 0 0 1.5px var(--black), 9px 9px 0 0 var(--c), 0 0 38px -6px var(--c); }
.tag-card:active { transform:translate(4px,4px); box-shadow:0 0 0 1.5px var(--black), 2px 2px 0 0 var(--c); transition-duration:.06s; }
.tc-top { display:flex; align-items:center; gap:10px; }
.tc-ico { width:40px; height:40px; flex:none; border-radius:50%; border:var(--stroke); background:var(--c); display:inline-flex; align-items:center; justify-content:center; }
.tc-top small { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--gray); }
.tag-card b { font-size:17px; line-height:1.4; margin:4px 0 6px; }
.tag-card p { margin:0 0 14px; font-size:12.5px; line-height:1.75; color:var(--gray); }
.tag-card em { margin-top:auto; font-style:normal; font-size:12px; font-weight:700; display:flex; gap:6px; align-items:center; }
.tag-card em span { transition:transform .25s; }
.tag-card:hover em span { transform:translateX(4px); }
@media (max-width:900px) { .tag-cards { grid-template-columns:1fr 1fr; } }
@media (max-width:540px) { .tag-cards { grid-template-columns:1fr; gap:18px; } .tag-card { margin-right:6px; } .rc-night { padding-top:96px !important; } }

/* ボタン：黒は点が灯る・白は矢印 */
.ds .btn { position:relative; display:inline-flex; align-items:center; gap:10px; }
.ds .btn:not(.btn-o)::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--o); transition:box-shadow .3s, transform .3s; }
.ds .btn:not(.btn-o):hover::before { transform:scale(1.35); box-shadow:0 0 0 4px rgba(243,146,0,.25), 0 0 12px 2px var(--o); }
.ds .btn-w { background:#fff !important; color:var(--black) !important; }

/* ---------- 画面に入ったとき：露光のように明るさが戻る（動かさない） ---------- */
.ds .rv { opacity:0; filter:brightness(1.6) blur(3px); }
.ds .rv.in { opacity:1; filter:none; transition:opacity .7s ease-out, filter 1.1s ease-out; transition-delay:calc(var(--i, 0) * 120ms); }

/* ---------- Recruit ページ ---------- */

.role-sec.v2 .rs-head { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.rs-badge { position:relative; width:72px; height:72px; flex:none; border-radius:50%; background:var(--c); border:var(--stroke); display:flex; align-items:center; justify-content:center; box-shadow:4px 4px 0 0 var(--black); }
.rs-badge em { position:absolute; right:-6px; top:-6px; width:26px; height:26px; border-radius:50%; background:#fff; border:var(--stroke); font-style:normal; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.role-sec.v2 .rs-head .label { margin:0 0 4px; }
.role-sec.v2 .rs-head .sec-title { margin:0; }
.rs-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:980px; }
.rs-cols > div { background:#fff; border:var(--stroke); border-radius:18px; padding:20px 22px 8px; }
.rs-cols h3 { display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.06em; margin:0 0 6px; }
.rs-cols h3::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--c); border:var(--stroke); }
.rs-cols ul { list-style:none; margin:0; padding:0; }
.rs-cols li { padding:10px 0; border-top:1px dashed #CFCFCF; font-size:14px; line-height:1.7; }
.rs-cols li:first-child { border-top:0; }
.role-sec.v2.pale { background:#F4F4F4; }
@media (max-width:540px) { .rs-cols { grid-template-columns:1fr; } .rs-badge { width:58px; height:58px; } }
.ds .night .values > div { border-color:rgba(255,255,255,.5); }

/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion:reduce) {
  .film .grain { animation:none; }
  .ds .rv { opacity:1; filter:none; }
}
@media (max-width:540px) { .strand i:nth-of-type(2n) { display:none; } }
.ds span.toggle-text:hover { color:inherit; text-decoration:none; }

/* ---------- TOP：About。本文は1行40字まで、その下に問いのブロックを横に流す（2026-11-08） ---------- */
.top-about { overflow-x:clip; }
.top-about .ta-txt { max-width:40em; }
.qs { margin:52px 0 48px; display:grid; gap:12px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.top-about .ta-body .qs { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.qs-row { display:flex; width:max-content; animation:qs var(--d) linear infinite; }
.qs-row:nth-child(2) { margin-left:-220px; }
.qs-row:nth-child(4) { margin-left:-110px; }
.qs-row ul { display:flex; gap:12px; list-style:none; margin:0 12px 0 0; padding:0; }
.qs-row li { flex:none; white-space:nowrap; padding:14px 22px; border:var(--stroke); border-radius:14px; background:#fff; font-size:15px; font-weight:700; line-height:1.4; }
.qs-row li.hot { background:var(--o-tint); }
.qs:hover .qs-row { animation-play-state:paused; }
@keyframes qs { to { transform:translateX(-50%); } }
@media (max-width:540px) { .qs { margin:36px 0 32px; gap:10px; } .qs-row li { font-size:13px; padding:11px 16px; border-radius:12px; } }
@media (prefers-reduced-motion:reduce) {
  .qs-row { animation:none; width:auto; flex-wrap:wrap; }
  .qs-row ul[aria-hidden] { display:none; }
  .qs-row ul { flex-wrap:wrap; }
  .qs-row:nth-child(2), .qs-row:nth-child(4) { margin-left:0; }
}
.ds .rs-cols + .role-h { margin-top:48px; }
.ds .role-dl, .ds .role-h { max-width:980px; }
/* 2026-11-10 求める人物像（3項目） */
.ds .rs-cols + .role-h, .ds .people + .role-h { margin-top:48px; }
.people { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:980px; }
.people > div { background:#fff; border:var(--stroke); border-radius:18px; padding:20px 22px 10px; }
.people small { display:inline-block; font-size:12px; font-weight:800; padding:2px 10px; border-radius:99px; background:var(--c); border:var(--stroke); }
.people h4 { font-size:18px; line-height:1.5; margin:12px 0 8px; }
.people p { font-size:13px; line-height:1.8; margin:0 0 10px; }
.people ul { list-style:none; margin:0; padding:0; }
.people li { padding:9px 0 9px 16px; border-top:1px dashed #CFCFCF; font-size:13px; line-height:1.7; position:relative; }
.people li::before { content:""; position:absolute; left:0; top:17px; width:6px; height:6px; border-radius:50%; background:var(--c); }
@media (max-width:820px) { .people { grid-template-columns:1fr; } }
/* 2026-11-11 Recruit：ずっと追従する ENTRY ボタン */
.entry-fab { position:fixed; right:24px; bottom:24px; z-index:60; display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:99px; background:var(--o, #F39202); color:#fff; border:var(--stroke); box-shadow:4px 4px 0 #333; font-weight:800; letter-spacing:.12em; font-size:15px; text-decoration:none; }
.entry-fab .dot { width:8px; height:8px; border-radius:50%; background:#fff; }
.entry-fab:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 #333; }
@media (max-width:540px) { .entry-fab { right:16px; bottom:16px; padding:13px 22px; font-size:14px; } }
@media (prefers-reduced-motion: reduce) { .entry-fab:hover { transform:none; } }
/* 2026-11-11 Recruit の KV：夜の風景を舞台に、現場の写真を傾けたプリントのように重ねる（水星の KV を参考に）。弾ませず、にじみと光の揺らぎで */

/* 2026-11-11 鎌田「SP の KV の中にまとまってないのが嫌」：スマホは写真を KV の上半分の中に収める */
@media (max-width:820px) { .rk-card { width:58vw; padding:6px 6px 18px; } .rc-hero.has-rk { padding-top:58vh; } }

/* 2026-11-11 RECRUIT 差し替え：映像の KV（最後に黒地のコピー）→ ボディコピー → カード → VALUES */
.rkv { position:relative; height:100vh; height:100svh; min-height:520px; overflow:hidden; background:#000; }
.rkv video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rkv .v-sp { display:none; }
@media (max-aspect-ratio:4/5) { .rkv .v-pc { display:none; } .rkv .v-sp { display:block; } }
.rkv-grain { position:absolute; inset:-50%; z-index:2; pointer-events:none; opacity:.08; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation:rkvg .5s steps(4) infinite; }
@keyframes rkvg { 25% { transform:translate(-3%,2%); } 50% { transform:translate(2%,-3%); } 75% { transform:translate(-2%,-2%); } }
.rkv-cap { position:absolute; left:40px; bottom:44px; z-index:3; margin:0; color:#fff; font-size:11px; font-weight:700; letter-spacing:.3em; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.rkv-end { position:absolute; inset:0; z-index:4; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20px; opacity:0; pointer-events:none; }
.rkv-end.on { opacity:1; }
.rkv-end p { margin:0 0 22px; font-size:11px; font-weight:700; letter-spacing:.32em; color:var(--o); }
.rkv-end h1 { margin:0; color:#fff; font-size:clamp(30px,5.2vw,80px); line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.rkv-end h1 span { display:inline-block; }
@media (max-width:820px) { .rkv-cap { left:20px; bottom:96px; } .rkv-end h1 { font-size:clamp(30px,9vw,44px); } .rkv-end h1 span { display:block; } }
/* 日本語の「誰もが楽しめる夜をつくる。」は改行せず一行で（2026-11-12 鎌田） */
.rkv-end h1:lang(ja) { white-space:nowrap; }
@media (max-width:820px) { .rkv-end h1:lang(ja) { font-size:min(6.4vw, 44px); } .rkv-end h1:lang(ja) span { display:inline; } }
/* 最後は画面中央にコピー一本だけ（NEWSKOOL RECRUIT の文字はなし。2026-11-12 鎌田）。英語も一行で */
.rkv-end h1 { white-space:nowrap; } .rkv-end h1 span { display:inline; }
@media (max-width:820px) { .rkv-end h1:lang(en) { font-size:min(5.2vw, 40px); } .rkv-end h1 span { display:inline; } }
@media (prefers-reduced-motion:reduce) { .rkv-grain { animation:none; } }
.rc-copy { position:relative; color:#fff; padding:200px 0; background:#14110F url(../img/recruit-sky.webp) center/cover no-repeat; }
.rc-copy::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.42) 50%, rgba(0,0,0,.66)); }
.rc-copy .wrap { position:relative; }
.rc-copy .label { color:#fff; opacity:.8; }
.rc-copy-t { margin:0; max-width:900px; font-size:clamp(20px,2.3vw,30px); line-height:2; font-weight:600; letter-spacing:.02em; }
@media (max-width:820px) { .rc-copy { padding:120px 0; } .rc-copy-t { font-size:18px; line-height:2.05; } }
.rc-cards { background:#fff; }
.rc-values .values p { color:#D9D6E2; }
.rc-copy-t p { margin:0 0 1.1em; } .rc-copy-t p:last-child { margin:0; }
/* 2026-11-11 鎌田「ボタンは基本中央に（フッターは除く）」 */
.ds .btn { display:flex; width:fit-content; margin-left:auto; margin-right:auto; justify-content:center; }
.ds footer .btn { display:inline-flex; margin-left:0; margin-right:0; }
/* 2026-11-11 鎌田「Recruit の動画、PC で画面が切れる。ブラウザの下端に動画の下端を合わせる」：ヘッダーの高さを引く */
.rkv { height:calc(100vh - 86px); height:calc(100svh - 86px); min-height:480px; }
@media (max-width:540px) { .rkv { height:calc(100vh - 64px); height:calc(100svh - 64px); } }