@charset "UTF-8";
/* recruit.css — KINGDOM様 採用サイト 叩き台（2026-10-26）。色と書体は tokens.css（公式 v4）だけを使う */
:root{--rbar:64px}
body{padding-bottom:calc(var(--rbar) + env(safe-area-inset-bottom))}
.mockbar{margin:0;background:var(--ink);color:var(--on-ink);font-size:12px;text-align:center;padding:6px 12px;line-height:1.6}

/* ヘッダー */
.rh{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;height:60px;padding-inline:var(--gutter);background:rgba(255,255,255,.96);border-bottom:1px solid var(--rule)}
.rh__logo{display:flex;align-items:center;gap:10px;color:var(--logo)}
.rh__logo svg{width:116px;height:auto}
.rh__logo .en{font-size:15px;color:var(--ink-2);letter-spacing:.06em}
.rh__nav{display:none;gap:22px;font-size:14px;margin-left:auto}
.rh__nav a:hover{color:var(--accent)}
.rh__cta{margin-left:auto;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;background:var(--accent);color:var(--on-ink);font-size:13px;font-weight:500}
@media(min-width:960px){.rh__nav{display:flex}.rh__cta{margin-left:0}}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font-size:15px;font-weight:500;border:1px solid var(--ink);transition:background .2s,color .2s}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--on-ink)}
.btn--accent:hover{background:var(--accent-2)}
.btn--line{background:var(--paper);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--on-ink)}
.btn--wide{width:100%;margin-top:28px}
.ask__btns{display:grid;gap:10px;margin-top:28px}
@media(min-width:600px){.ask__btns{grid-template-columns:repeat(2,max-content)}}

/* ヒーロー */
.hero{padding:40px 0 56px;border-bottom:1px solid var(--rule)}
.hero__in{display:grid;gap:36px;align-items:center}
.hero__en{font-size:15px;color:var(--accent);margin-bottom:10px}
.hero h1{font-size:var(--fs-display);line-height:1.3}
.hero__lead{margin-top:18px;color:var(--ink-2);max-width:32em}
@media(min-width:900px){.hero{padding:72px 0 88px}.hero__in{grid-template-columns:1.1fr .9fr;gap:64px}}

/* 動画の枠（9:16・縦型） */
.vid{margin:0}
.vid__frame{position:relative;aspect-ratio:9/16;background:#222 center/cover no-repeat;overflow:hidden}
.vid__frame::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.vid__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92)}
.vid__play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--accent)}
.vid__tag{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-size:12px;line-height:1.5}
.vid figcaption{margin-top:10px;font-size:14px}
.vid figcaption small{display:block;font-size:12px;color:var(--ink-3)}
.vid--big{max-width:min(380px,62vw);width:100%;justify-self:center}

/* 流れる帯（先輩の声）：質問と答える人を載せた縦型カードが横に流れ続ける。触れたら止まる */
.reel{overflow:hidden;padding:28px 0;background:var(--ink)}
.reel__track{display:flex;gap:12px;width:max-content;animation:reel 70s linear infinite}
.reel:hover .reel__track,.reel:focus-within .reel__track{animation-play-state:paused}
.reel__c{position:relative;flex:none;width:150px;aspect-ratio:9/16;background:#333 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px;color:#fff}
.reel__c::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 30%,rgba(0,0,0,.75))}
.reel__q,.reel__who{position:relative}
.reel__q{font-size:14px;line-height:1.5}
.reel__who{font-size:11px;color:var(--on-ink-2)}
@keyframes reel{to{transform:translateX(-50%)}}
@media(min-width:900px){.reel__c{width:180px}}
.vid:not(.vid--big){max-width:200px}

/* セクション */
.sec{padding:var(--sec) 0}
.sec--tight{padding:40px 0 64px}
.sec--gray{background:var(--paper-2)}
.sec__en{font-size:14px;color:var(--accent);margin-bottom:6px}
.sec h2{font-size:var(--fs-h2)}
.sec__lead{margin-top:12px;color:var(--ink-2)}
.h2s{font-size:var(--fs-h3);margin-bottom:20px}
.note{margin-top:16px}
.more{margin-top:24px;font-size:14px}
.more a{border-bottom:1px solid currentColor}
.narrow{max-width:640px}

/* 質問のタブとカード */
.tabs{display:flex;gap:8px;margin:28px 0 20px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.tab{flex:none;min-height:40px;padding:0 16px;border:1px solid var(--rule);background:var(--paper);font-size:14px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.qgrid{display:grid;gap:12px}
@media(min-width:700px){.qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.qgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qc{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--rule);background:var(--paper);transition:border-color .2s}
@media(min-width:700px){.qc{gap:8px;padding:20px 20px 18px;min-height:132px}}
.qc:hover{border-color:var(--ink)}
.qc[hidden]{display:none}
.qc__th{font-size:12px;color:var(--accent);letter-spacing:.06em}
.qc__q{font-size:16px;line-height:1.55;flex:1}
@media(min-width:700px){.qc__q{font-size:18px}}
.qgrid{gap:8px}
@media(min-width:700px){.qgrid{gap:12px}}
.qc__n{font-size:13px;color:var(--ink-3)}
.qc__n::before{content:"▶";font-size:10px;margin-right:6px;color:var(--accent)}
.qc__add{position:absolute;top:16px;right:16px;font-style:normal;font-size:11px;padding:2px 8px;border:1px dashed var(--ink-3);color:var(--ink-3)}

/* 4つ */
.four{display:grid;gap:16px;margin-top:32px}
@media(min-width:700px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.four__c{display:flex;flex-direction:column;background:var(--paper);padding-bottom:20px}
.four__c img{width:100%;aspect-ratio:4/3;object-fit:cover}
.four__n{font-size:22px;color:var(--accent);margin:14px 18px 0}
.four__c h3{font-size:var(--fs-h3);margin:2px 18px 8px}
.four__c p{font-size:14px;color:var(--ink-2);margin:0 18px;flex:1}
.four__go{display:block;margin:14px 18px 0;font-size:13px;color:var(--accent)}
.four__go::after{content:" →"}

/* 見学・相談 */
.two{display:grid;gap:16px;margin-top:28px}
@media(min-width:800px){.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.two__c{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--rule);background:var(--paper)}
.two__c h3{font-size:var(--fs-h3)}
.two__c p{font-size:14px;color:var(--ink-2)}
.two__c .btn{align-self:flex-start}
.two__c--link:hover{border-color:var(--ink)}
.dates{display:flex;flex-wrap:wrap;gap:8px}
.dates li{min-width:84px;padding:8px 10px;border:1px solid var(--rule);font-size:13px;text-align:center;line-height:1.4}
.dates li b{display:block;font-size:16px;font-weight:500}
.dates--pick li{padding:0;border:0}
.dates--pick label{display:block;min-width:92px;padding:8px 10px;border:1px solid var(--rule);text-align:center;cursor:pointer;line-height:1.4}
.dates--pick input{position:absolute;opacity:0}
.dates--pick input:checked+span{color:var(--on-ink)}
.dates--pick label:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.dates--pick b{display:block;font-size:16px;font-weight:500}

/* 動画の下の問いかけ */
.ask{padding:56px 0;background:var(--ink);color:var(--on-ink)}
.ask__lead{font-size:var(--fs-h3)}
.ask .btn--line{background:transparent;color:var(--on-ink);border-color:var(--on-ink)}
.ask .btn--line:hover{background:var(--on-ink);color:var(--ink)}
.ask .note{color:var(--on-ink-2)}

/* 質問ページ */
.qhead{padding:32px 0 8px}
.crumb{font-size:12px;color:var(--ink-3)}
.crumb a{border-bottom:1px solid var(--rule)}
.qhead__th{margin-top:20px;font-size:13px;color:var(--accent)}
.qhead__q{font-size:var(--fs-h2);margin-top:6px;line-height:1.4}
.qhead__n{margin-top:10px;font-size:14px;color:var(--ink-3)}
.answers{display:grid;gap:28px}
@media(min-width:800px){.answers{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;align-items:start}}
.answers__label{font-size:13px;color:var(--ink-3);margin-bottom:12px}
.answers__list{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.ans-text{padding:20px;background:var(--paper-2);font-size:14px;color:var(--ink-2)}

/* 申し込み */
.fs{border:0;padding:0;margin:0 0 28px}
.fs legend{font-family:var(--f-mincho);font-size:var(--fs-h3);margin-bottom:14px}
.fs__sub{font-size:13px;color:var(--ink-3);margin:18px 0 10px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opts--5{grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.opts--5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0}
.opt span{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:10px 14px;border:1px solid var(--rule);font-size:15px;cursor:pointer}
.opt small{font-size:12px;color:var(--ink-3)}
.opt input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:13px;margin-bottom:6px}
.fld input{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--rule);font-size:16px}
.done{padding:40px 0;text-align:left}
.done .en{color:var(--accent)}
.done h2{font-size:var(--fs-h3);margin:6px 0 12px}
.done .btn{margin-top:24px}

/* フッターと下のバー */
.rf{padding:48px 0 32px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-3)}
.rf__in{display:grid;gap:10px}
.rf__logo svg{width:120px;color:var(--logo)}
.rf a{border-bottom:1px solid var(--rule)}
.rbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;height:calc(var(--rbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--rule)}
.rbar a{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500}
.rbar a:first-child{background:var(--accent);color:var(--on-ink)}
@media(min-width:960px){.rbar{display:none}body{padding-bottom:0}}
.p-sd .rbar{display:none}
.p-sd{padding-bottom:0}
.mockbar a{text-decoration:underline}

/* 企画の要点 */
.plan h2{font-size:var(--fs-h3);margin:44px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.plan p,.plan li{font-size:15px}
.plan ul.dot li{position:relative;padding-left:1.1em;margin-bottom:6px}
.plan ul.dot li::before{content:"・";position:absolute;left:0}
.flow{display:grid;gap:8px;margin-top:8px}
@media(min-width:800px){.flow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flow li{padding:14px 16px;border:1px solid var(--rule);font-size:14px;line-height:1.6}
.flow li b{display:block;font-family:var(--f-mincho);font-size:17px;font-weight:500;margin-bottom:4px}
.flow li.is-key{border:2px solid var(--accent)}
.flow li.is-key b{color:var(--accent)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{border-bottom:1px solid var(--rule);padding:10px 8px;text-align:left;vertical-align:top}
.tbl th{font-weight:500;white-space:nowrap;color:var(--ink-2)}
.src{font-size:12px;color:var(--ink-3);margin-top:6px;overflow-wrap:anywhere}
.src a{border-bottom:1px solid var(--rule)}
.tblwrap{overflow-x:auto}