@charset "UTF-8";
/* recruit_video.css — 動画が先のトップ（2026-10-27 岩田さん「動画を見てみたいと思うように」）。recruit.css の後に読む */
/* ヒーロー：スマホ＝全面に話している先輩の映像／PC＝左に文字・右に3本の縦映像が浮く */
.hero2{position:relative;min-height:calc(100svh - 90px - var(--rbar));display:flex;align-items:flex-end;color:#fff;background:#111;overflow:hidden}
.hero2__media{position:absolute;inset:0}
.hero2__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.85) 100%);pointer-events:none}
.hero2__stack{display:none}
.hero2__txt{position:relative;z-index:2;width:100%;padding-top:40px;padding-bottom:28px}
.hero2__en{font-size:14px;letter-spacing:.08em;opacity:.85}
.hero2__ask{display:inline-block;margin-top:14px;padding:8px 14px;background:rgba(255,255,255,.96);color:var(--ink);font-size:16px;line-height:1.5;max-width:100%;transition:opacity .4s,transform .4s}
.hero2__ask.is-out{opacity:0;transform:translateY(6px)}
.hero2 h1{font-size:clamp(40px,11vw,96px);line-height:1.15;margin-top:14px;color:#fff}
.hero2__lead{margin-top:12px;font-size:15px;color:rgba(255,255,255,.88);max-width:28em}
.hero2__play{display:flex;align-items:center;gap:14px;margin-top:22px;width:100%;max-width:420px;min-height:64px;padding:10px 20px 10px 12px;border:0;background:var(--accent);color:#fff;text-align:left;font-size:17px;font-weight:500;cursor:pointer}
.hero2__play small{display:block;font-size:12px;font-weight:400;opacity:.85}
.hero2__pi{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;position:relative}
.hero2__pi::after{content:"";position:absolute;left:17px;top:13px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--accent)}
.hero2__play:hover{background:var(--accent-2)}
.hero2__sub{display:flex;gap:18px;margin-top:16px;font-size:14px}
.hero2__sub a{border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
@media(min-width:960px){
 .hero2{min-height:min(820px,calc(100vh - 90px));align-items:center;background:var(--ink)}
 .hero2__bg{display:none}.hero2::after{display:none}
 .hero2__stack{display:flex;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);gap:18px;align-items:center}
 .hero2__stack video{width:min(15vw,220px);aspect-ratio:9/16;object-fit:cover;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:float 7s var(--ease-io) infinite alternate}
 .hero2__stack video:nth-child(2){width:min(18vw,260px);animation-delay:-2.3s}
 .hero2__stack video:nth-child(3){animation-delay:-4.6s}
 .hero2__txt{max-width:var(--maxw);padding-bottom:40px}
 .hero2__txt > *{max-width:520px}
}
@keyframes float{from{transform:translateY(-14px)}to{transform:translateY(14px)}}

/* ストーリーの丸アイコン */
.stories{padding:22px 0 18px;border-bottom:1px solid var(--rule)}
.stories__h{font-size:12px;color:var(--ink-3);margin-bottom:12px}
.stories__in{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
.st{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer}
.st__ring{width:78px;height:78px;border-radius:50%;padding:3px;background:conic-gradient(var(--accent),#e0a24a,var(--accent))}
.st__ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 22%;border:3px solid var(--paper)}
.st__n{font-size:12px}

/* 柱：背景に実映像が流れる帯＋質問の棚 */
.pil{padding:0 0 56px}
.pil__band{position:relative;height:clamp(220px,42vw,420px);overflow:hidden;background:#111;color:#fff;display:flex;align-items:flex-end}
.pil__band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.pil__band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.75))}
.pil__head{position:relative;z-index:1;display:flex;gap:16px;align-items:flex-end;padding-bottom:22px;width:100%}
.pil__n{flex:none;white-space:nowrap;font-size:clamp(40px,8vw,96px);line-height:.9;color:#fff;opacity:.9}
.pil__head h2{font-size:var(--fs-h2);color:#fff}
.pil__head p{font-size:14px;color:rgba(255,255,255,.88);max-width:36em;margin-top:6px}
.shelf{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px var(--gutter) 6px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:thin}

/* 質問カード＝動く縦型カード */
.qc{position:relative;flex:none;display:block;width:clamp(168px,44vw,236px);aspect-ratio:9/16;min-height:0;padding:0;border:0;background:#222;overflow:hidden;scroll-snap-align:start;color:#fff;border-radius:6px}
.qc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.qc:hover video{transform:scale(1.04)}
.qc__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82))}
.qc__body{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 12px;display:flex;flex-direction:column;gap:8px}
.qc__q{font-size:16px;line-height:1.5;color:#fff}
.qc__n{display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.85)}
.qc__n::before{content:none}
.qc__faces{display:flex}
.qc__faces img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid #fff;margin-right:-8px}
.qc__faces img:last-child{margin-right:0}
.qc__add{position:absolute;top:10px;left:10px;right:auto;font-style:normal;font-size:11px;padding:2px 8px;background:rgba(255,255,255,.9);color:var(--ink);border:0}
.qc::after{content:"";position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92)}
.qc::before{content:"";position:absolute;z-index:1;top:19px;right:18px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--accent)}
.qgrid .qc{width:auto}
.qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.qgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 質問ページの動画（押すと全画面プレーヤー） */
.vid__frame{display:block;width:100%;border:0;padding:0;cursor:pointer;background:#222;border-radius:6px}
.vid__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid__frame::before{z-index:1}
.vid__play{z-index:2}

/* 全画面プレーヤー（ストーリー型） */
.pl{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:flex;justify-content:center}
.pl[hidden]{display:none}
.pl__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:700px){.pl__v{position:relative;width:auto;height:100%;aspect-ratio:9/16}}
.pl::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 55%,rgba(0,0,0,.85));pointer-events:none}
.pl__bars{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:4px;max-width:520px;margin:0 auto}
.pl__bars i{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.pl__bars i b{display:block;height:100%;width:0;background:#fff}
.pl__bars i.is-done b{width:100%}
.pl__top{position:absolute;z-index:3;top:calc(22px + env(safe-area-inset-top));left:14px;right:8px;display:flex;justify-content:space-between;align-items:center;max-width:520px;margin:0 auto}
.pl__who{font-size:13px}
.pl__x{width:44px;height:44px;border:0;background:none;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.pl__prev,.pl__next{position:absolute;z-index:2;top:15%;bottom:30%;width:35%;border:0;background:none;cursor:pointer}
.pl__prev{left:0}.pl__next{right:0}
.pl__cap{position:absolute;z-index:3;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto}
.pl__th{font-size:12px;color:#f3c3c6}
.pl__q{font-size:22px;line-height:1.45;margin-top:4px}
.pl__note{font-size:11px;color:rgba(255,255,255,.7);margin-top:8px}
.pl__cta{position:absolute;z-index:3;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1.3fr 1fr;gap:8px;max-width:520px;margin:0 auto}
.pl__cta a{display:flex;align-items:center;justify-content:center;min-height:52px;font-size:14px;font-weight:500;background:var(--accent);color:#fff}
.pl__cta a+a{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5)}
body.is-pl{overflow:hidden}
@media (prefers-reduced-motion:reduce){.hero2__stack video{animation:none}}

.hero2__txt .hero2__play{max-width:420px}
@media(min-width:960px){.hero2{min-height:min(820px,calc(100vh - 90px))}}

/* 開いたときの自動フォーカスで×に赤い枠が出ていた（2026-10-27 岩田さん「赤枠トル」） */
.pl:focus{outline:none}
.pl__x:focus:not(:focus-visible){outline:none}

/* スマホのヒーロー：顔に文字がかからないよう、映像（上）と文字（下）の2段に（2026-10-27 岩田さん「顔の位置修正」） */
@media(max-width:959px){
 .hero2{display:block;min-height:0;background:#111}
 .hero2::after{content:none}
 .hero2__media{position:relative;inset:auto;height:min(46svh,440px);overflow:hidden}
 .hero2__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,0) 62%,rgba(17,17,17,.85) 90%,#111 100%)}
 .hero2__bg{object-position:50% 34%}
 .hero2__txt{margin-top:-56px;padding-top:0;padding-bottom:32px}
 .hero2__ask{margin-top:8px}
 .hero2 h1{font-size:clamp(34px,10vw,56px);margin-top:10px}
 .hero2__lead{font-size:14px;margin-top:8px}
 .hero2__play{margin-top:16px}
}

/* ヒーローが見えている間は下の固定バーを隠す（ヒーローに同じボタンがある・狭い画面でボタンが隠れた 2026-10-27） */
.rbar{transition:transform .3s var(--ease)}
.rbar.is-hide{transform:translateY(100%)}

/* 日付のボックスはすべて同じ大きさ（2026-10-27 岩田さん）。スマホ3列・PC4列のマス目 */
.dates,.dates--pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dates li,.dates--pick label{min-width:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
@media(min-width:700px){.dates--pick{grid-template-columns:repeat(4,minmax(0,1fr))}}
.two__c .dates{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:500px){.two__c .dates{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* 複数選べる店舗：チェックの印 */
.opt input[type="checkbox"]+span{padding-left:44px;position:relative}
.opt input[type="checkbox"]+span::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border:1px solid var(--ink-3);background:var(--paper)}
.opt input[type="checkbox"]:checked+span::before{background:var(--ink);border-color:var(--ink)}
.opt input[type="checkbox"]:checked+span::after{content:"";position:absolute;left:20px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}