@charset "UTF-8";
/* device.css — デバイス別のブラッシュアップ（2026-10-28 岩田さん「パソコン・スマホ・タブレットごとに最適化」→ 全デバイス B案に決定）
   recruit_video.css の後に読む。:root は比較時の .vb と同じ強さで上書きするために付けている。
   比べたときの A案・B案入りの版＝_device/device_AB_compare_2026-10-28.css
   区切り：スマホ 〜599／タブレット縦 600〜959／タブレット横・小さいPC 960〜1199／PC 1200〜 */

/* ── 今の版の崩れを直す ── */
/* 募集要項のリンクが枠の中で右にずれていた（.four__go の左右の余白が .two__c の内側の余白と二重） */
.two__c .four__go{margin:4px 0 0}
/* 横に送る棚：止まる位置を本文の左端にそろえる（人間関係の棚だけ左にずれて始まっていた） */
.shelf{scroll-padding-inline:var(--gutter)}
/* 柱の最後のカードの後ろの空きを詰める */
.pil{padding-bottom:clamp(32px,6vw,72px)}
/* 広い画面でヒーローの文字と動画が左右の端に離れていた：動画の右端を本文の幅（--maxw）にそろえる */
@media(min-width:960px){
 .hero2__stack{right:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
}
/* 本文の幅にそろえた分、動画3本を少し小さくして見出し（最大520px）と重ならないようにする */
@media(min-width:1200px){
 .hero2__stack video{width:min(13vw,190px)}
 .hero2__stack video:nth-child(2){width:min(16vw,230px)}
}
/* ══ デバイスごとの並び（2026-10-28 岩田さん「B案で」） ══ */
/* スマホ：質問の棚を横に送らず、2列の一覧で全部見せる */
@media(max-width:599px){
 :root .shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;margin-inline:0;padding:12px 0 0;scroll-snap-type:none}
 :root .qc{width:auto;aspect-ratio:3/4}
 :root .qc__q{font-size:14px}
 :root .qc__body{padding:10px 10px 10px;gap:6px}
 :root .pil__band{height:180px}
 :root .pil__head p{font-size:13px}
}
/* タブレット（縦・横）：ヒーローを左に文字・右に縦の映像の2段組に。質問は一覧 */
@media(min-width:600px) and (max-width:1199px){
 :root .hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(220px,34vw,340px));align-items:center;gap:clamp(24px,4vw,48px);min-height:0;padding:clamp(32px,5vw,56px) var(--gutter);background:var(--ink)}
 :root .hero2::after,:root .hero2__media::after{content:none;display:none}
 :root .hero2__media{position:relative;inset:auto;order:2;height:auto;aspect-ratio:9/16;border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
 :root .hero2__bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
 :root .hero2__stack{display:none}
 :root .hero2__txt{order:1;margin:0;padding:0;max-width:none}
 :root .hero2__txt > *{max-width:none}
 :root .hero2 h1{font-size:clamp(40px,6.6vw,72px)}
 :root .hero2__play{max-width:420px}
 :root .shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;margin-inline:0;padding:20px 0 0;scroll-snap-type:none}
 :root .qc{width:auto}
 :root .stories__in{gap:24px}
}
@media(min-width:960px) and (max-width:1199px){
 :root .shelf{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* PC：柱を「左に柱の説明（残る）・右に質問の一覧」の2段組に */
@media(min-width:1200px){
 :root .pil{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:clamp(56px,6vw,96px) var(--gutter) 0}
 :root .pil__band{position:sticky;top:84px;height:auto;aspect-ratio:3/4;border-radius:8px;align-items:flex-end}
 :root .pil__head{flex-direction:column;align-items:flex-start;gap:6px;padding:0 28px 28px}
 :root .pil > .wrap{max-width:none;margin:0;padding:0}
 :root .shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
 :root .qc{width:auto}
 :root #dates{margin-top:clamp(56px,6vw,96px)}
}