.page-recruit *,.page-recruit *::before,.page-recruit *::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050305;--bg2:#050305;--bg3:#050305;
  --or:#03C9C0;--or2:#03C9C0;--or-dim:#03C9C0;
  --gold:#03C9C0;
  --red:#03C9C0;--redbg:#050305;--redbdr:#03C9C0;
  --w:#ffffff;--mu:#ffffff;--mu2:#ffffff;
  --line:rgba(245,239,230,.08);
  --fd:'Bebas Neue',sans-serif;
  --fs:'DM Sans',sans-serif; /* 旧Barlow Condensed: 全てDM Sansに統一 */
  --fb:'DM Sans',sans-serif;
  --fi:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fj:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI","Noto Sans JP",sans-serif;
  --fjh:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI","Noto Sans JP",sans-serif;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.page-recruit{margin:0;background:var(--bg);color:var(--w);font-family:var(--fj);font-weight:400;overflow-x:hidden;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* NAV (STORY と完全に同一) */
#nav{
  position:fixed;top:5%;left:0;right:0;z-index:500;
  display:flex;justify-content:flex-end;align-items:center;
  padding:0 3.5rem;height:60px;
  transition:background .4s,border-color .4s;
  border-bottom:.5px solid transparent;
}
#nav.scrolled{background:transparent;border-color:transparent}
.c-header-logo{
  position:fixed;top:5%;left:3.5rem;width:80px;height:auto;
  z-index:9999;display:block;transition:opacity .2s
}
.c-header-logo:hover{opacity:.75}

/* HAMBURGER (mobile only) */
.hburg{
  display:none;position:fixed;top:calc(3.3% + 7px);right:4%;z-index:9999;
  width:26px;height:18px;
  background:transparent;border:none;padding:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;align-items:stretch
}
.hburg span{display:block;width:100%;height:1.5px;background:#ffffff;transition:transform .25s,opacity .2s,background-color .3s ease}
.hburg.on span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hburg.on span:nth-child(2){opacity:0}
.hburg.on span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:960px){.hburg{display:flex}}
/* モーダル表示中はバーガー・RECRUIT 2026バッジを隠す(閉じる✕との重なり回避) */
body.pmodal-open .hburg,body.pmodal-open .hbadge{display:none}

/* MOBILE MENU OVERLAY */
.hmenu{
  position:fixed;inset:0;z-index:9000;
  background:rgba(5,3,5,.96);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s
}
.hmenu.on{opacity:1;visibility:visible}
.hmenu-list{
  list-style:none;display:flex;flex-direction:column;gap:1.4rem;text-align:center;padding:0
}
.hmenu-list a{
  font-family:var(--fb);font-size:16px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:#ffffff;text-decoration:none;
  transition:color .2s
}
.hmenu-list a:hover{color:var(--gold)}
.hmenu-bk{
  display:inline-block;padding:11px 28px;margin-top:.5rem;
  border:1px solid rgba(3,201,192,.55);color:var(--gold)!important
}
.hmenu-sns{
  display:flex;gap:1.75rem;justify-content:center;margin-top:2.25rem
}
.hmenu-sns a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;color:#ffffff;
  transition:color .2s,transform .2s
}
.hmenu-sns a:hover{color:var(--gold);transform:translateY(-2px)}
.hmenu-sns svg{width:100%;height:100%}
.nlinks{display:flex;gap:2rem;list-style:none;align-items:center}
.nlinks a{font-family:var(--fb);font-size:16px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:#ffffff;text-decoration:none;transition:color .2s}
.nlinks a:hover{color:var(--gold)}
/* 明るいセクション(Stage/Election)がナビ裏に来た時はメニュー文字を黒に */
#nav.on-light .nlinks a{color:#100f0d}
#nav.on-light .nlinks a:hover{color:var(--or)}

/* ── LAYOUT */
.wrap{max-width:1328px;margin:0 auto;padding:0 4rem;text-align:center}
.sec{position:relative;padding:6rem 0}
/* セクションごとに背景を少しずつ変える(ひとつおきに微妙に明るく) */
.sec:nth-of-type(even){background:var(--bg2)}
.sec:nth-of-type(odd){background:var(--bg)}
/* 全セクションの eyebrow / タイトルを Apply Now と同一に統一 */
.enlab{font-family:var(--fb);font-size:20px;font-weight:400;line-height:1.7;letter-spacing:.18em;text-transform:uppercase;color:var(--w);margin:0 0 1rem;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.jtit{font-family:var(--fj);font-weight:700;font-size:clamp(34px,6.5vw,60px);letter-spacing:.03em;line-height:1.1;color:var(--w);margin-bottom:1.5rem;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.jtit .o{color:var(--w)}
.jtit .r{color:var(--w)}
@media(max-width:768px){
  .enlab{font-size:16px;margin:0 0 1rem}
  .jtit{line-height:1.3}
}
.lead{font-size:clamp(15px,1.6vw,18px);font-weight:400;line-height:2;color:var(--w)}
.lead.mu{color:var(--mu2)}
.lead p + p{margin-top:.3rem}

/* ── HERO */
#hero{position:relative;height:100vh;min-height:680px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(0px,5vh,80px) 4rem 0;overflow:hidden;text-align:center}
#hvideo{position:absolute;top:-12%;left:0;width:100%;height:124%;object-fit:cover;z-index:0;opacity:.34}
#hcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hov{display:none}
.hov2{display:none}
.hvgnt{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.5) 92%,rgba(0,0,0,.72) 100%)}
.hgrain{position:absolute;inset:-50%;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px;opacity:.14;mix-blend-mode:overlay;animation:hgrain 1.2s steps(6) infinite}
@keyframes hgrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,3%)}80%{transform:translate(3%,-2%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.hgrain{animation:none}}
.hcnt{position:relative;z-index:3;max-width:1400px;width:100%;display:flex;flex-direction:column;align-items:center}
/* RECRUIT 2026 バッジ: STORYの言語スイッチャー(ESボタン)と同じ位置・サイズ */
.hbadge{position:fixed;top:calc(5% + 54px);right:3.5rem;z-index:9998;
  background:none;border:.5px solid rgba(245,239,230,.35);color:#ffffff;
  font-size:10px;font-family:var(--fb);letter-spacing:.08em;white-space:nowrap;
  padding:4px 12px;text-align:center;transition:color .3s ease,border-color .3s ease}
/* The Stage / The Election(白背景)がヘッダー裏に来た時だけ右上の白要素を黒に */
body.hdr-dark .hbadge{color:#100f0d;border-color:rgba(16,15,13,.45)}
body.hdr-dark .hburg:not(.on) span{background:#100f0d}
@media(min-width:769px){.hbadge{min-width:80px;padding:4px 16px}}
/* HERO テキスト: 巨大タイポ(主人公) + キッカー + タグライン */
.hkick{position:relative;z-index:3;font-family:var(--fi);font-weight:600;
  font-size:28px;line-height:1.02;letter-spacing:-.05em;text-transform:none;color:var(--or);
  margin:0 0 1rem}
.hbig{font-family:var(--fj);font-weight:700;
  font-size:clamp(40px,9vw,108px);line-height:1.25;letter-spacing:-0.05em;color:var(--w);margin:0 0 2rem;
  text-align:center}
.hbig .hcwrap{display:inline-block;overflow:hidden;line-height:1.06;padding:.06em .02em 0;white-space:nowrap;vertical-align:top}
.hbig .hc{display:inline-block;will-change:transform}
.htag{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
  font-size:clamp(18px,2.9vw,34px);line-height:1.3;letter-spacing:.02em;color:#ffffff;margin:.7rem 0 2rem}
.hlines{position:relative;z-index:3;font-family:var(--fjh);font-weight:600;font-size:31px;letter-spacing:-0.05em;color:var(--w);line-height:1.7;margin:0 0 2.5rem}
.hctas{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:1.25rem;flex-wrap:wrap}
/* SCROLL インジケーター: STORYと同一 */
.scrl{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;color:#ffffff
}
.sarr{
  width:20px;height:20px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  animation:arrBounce 1.6s ease-in-out infinite
}
@keyframes arrBounce{
  0%,100%{transform:rotate(45deg) translate(-2px,-2px);opacity:.6}
  50%{transform:rotate(45deg) translate(2px,2px);opacity:1}
}

/* ── BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--fi);font-size:13px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:1rem 1.8rem;border-radius:2px;
  transition:transform .25s,box-shadow .25s,background .25s}
.btn-or{background:#02948D;color:var(--w);box-shadow:none;font-family:var(--fb);font-size:18px;letter-spacing:.26em;padding:12px 3rem;border-radius:0}
.btn-or:hover{background:#03C9C0;transform:translateY(-2px);box-shadow:none}
/* PC版ヒーロー: CTAを下げ、Apply Nowボタンを約200%横長に */
@media(min-width:769px){
  /* ヒーロー全体を左揃え(共通の左端=4remパディング)・タイトルを囲んで集約・やや下寄り */
  #hero{align-items:flex-start;text-align:left;padding-top:clamp(90px,17vh,210px)}
  #hero .hcnt{align-items:flex-start}
  /* 並び順: キッカー → タイトル → タグライン → CTA (DOM順のまま) */
  #hero .hbig{text-align:left;margin:0 0 1.6rem;position:relative;top:1.5rem}
  /* キッカーはタイトルの上(少し下げた位置) */
  #hero .hkick{position:relative;left:auto;right:auto;top:1.8rem;margin:0 0 1.2rem;text-align:left}
  #hero .hlines{position:static;left:auto;right:auto;bottom:auto;margin:0 0 1.6rem;text-align:left}
  #hero .hctas{position:static;left:auto;right:auto;bottom:auto;transform:none;width:auto;margin:0;justify-content:flex-start}
  #hero .btn-or{min-width:34rem;justify-content:center;padding-top:9.6px;padding-bottom:9.6px}
}
.btn-gh{color:var(--or);border:1px solid var(--or-dim)}
.btn-gh:hover{background:rgba(3,201,192,.08)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ── STATS (01) */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3rem;margin-top:3rem;
  border-top:1px solid var(--line);padding-top:3rem}
.stat .slab{font-family:var(--fs);font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--or);text-transform:uppercase;margin-bottom:.7rem}
.stat .snum{font-family:var(--fi);font-weight:800;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--w)}
.stat .snum em{font-style:normal;font-size:.4em;font-weight:500;color:var(--mu2);margin-left:.3em}
.stat .sjp{font-family:var(--fjh);font-weight:700;font-size:clamp(22px,3vw,30px);color:var(--w)}
.stat .ssub{font-size:13px;color:var(--mu);margin-top:.4rem}

/* ── NEW CATEGORY (02) */
.triple{margin-top:.5rem}
.triple .tr{font-family:var(--fjh);font-weight:700;font-size:clamp(22px,3.2vw,34px);line-height:1.6}
.triple .tr .o{color:var(--or)}
.afterline{display:none}

/* ── JOBS (03) */
.jobs{display:flex;flex-direction:column;gap:1.4rem;margin-top:.5rem}
.job{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--or);
  padding:2rem 2.2rem;border-radius:3px;transition:background .25s,transform .25s}
.job:hover{background:var(--bg3);transform:translateX(4px)}
.job .jlab{font-family:var(--fs);font-size:12px;font-weight:600;letter-spacing:.26em;color:var(--or);text-transform:uppercase;margin-bottom:.7rem}
.job .jname{font-family:var(--fjh);font-weight:700;font-size:clamp(20px,2.6vw,26px);margin-bottom:.7rem}
.job .jdesc{font-size:14px;color:var(--mu2);line-height:1.9}
.salary{margin-top:1.8rem;border:1px solid var(--w);padding:2.2rem}
.salary .slab{font-family:var(--fs);font-size:20px;font-weight:400;letter-spacing:.18em;color:var(--or);text-transform:uppercase;margin-bottom:.9rem}
.salary .sbig{font-family:var(--fi);font-weight:800;font-size:clamp(32px,4.4vw,46px);line-height:1;margin-bottom:1rem}
.salary .sbig em{font-style:normal;font-size:.5em;color:var(--mu2);font-weight:500}
.salary .snote{font-size:14px;color:var(--mu2);line-height:1.9}

/* ── CHECKLIST (04 / 05) */
.lead-strong{font-family:var(--fjh);font-weight:700;font-size:clamp(19px,2.6vw,26px);line-height:1.7;margin-bottom:1.6rem}
.lead-strong .o{color:var(--or)}
.checks{list-style:none;margin:2rem 0;display:flex;flex-direction:column;align-items:center;gap:.85rem}
.checks li{position:relative;padding-left:2rem;font-size:16px;color:var(--w)}
.checks li::before{content:"—";position:absolute;left:0;color:var(--or);font-weight:700}
.checks.bad li::before{color:var(--red)}
.quote{border-left:3px solid var(--or);background:rgba(3,201,192,.06);padding:1.6rem 2rem;
  font-family:var(--fjh);font-weight:500;font-size:clamp(16px,2vw,20px);line-height:1.8;border-radius:0 3px 3px 0}
.quote.warn{border-left-color:var(--red);background:var(--redbg)}

/* ── PEOPLE (06) */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:1rem}
.person{background:var(--bg2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.person .pphoto{aspect-ratio:4/3;background:linear-gradient(135deg,#050305,#050305);
  display:flex;align-items:center;justify-content:center;color:var(--mu);font-family:var(--fi);font-size:11px;letter-spacing:.2em}
.person .pbody{padding:1.5rem 1.6rem}
.person .prole{font-family:var(--fs);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--or);text-transform:uppercase;margin-bottom:.6rem}
.person .ppath{font-family:var(--fjh);font-weight:700;font-size:18px;margin-bottom:.6rem}
.person .pquote{font-size:13px;color:var(--mu2);line-height:1.8}
.placeholder-note{margin-top:1.4rem;font-size:12px;color:var(--mu);font-family:var(--fi);letter-spacing:.05em}

/* ── SPIRITS (07) */
.spirits{margin-top:1rem;border-top:1px solid var(--line)}
.spirit{display:flex;align-items:center;justify-content:center;gap:1.8rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.spirit .sn{font-family:var(--fi);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--or);min-width:2.5rem}
.spirit .st{font-family:var(--fjh);font-weight:700;font-size:clamp(18px,2.4vw,24px)}

/* ── ELECTION (09) */
.box{background:radial-gradient(120% 140% at 0% 0%,rgba(3,201,192,.10),transparent 55%),var(--bg2);
  border:1px solid var(--line);border-radius:4px;padding:3rem 2.6rem;margin-top:1rem}
.box .bhead{font-family:var(--fjh);font-weight:700;font-size:clamp(20px,2.8vw,28px);line-height:1.6;margin-bottom:1.4rem}
.box .bsub{font-size:15px;color:var(--mu2);line-height:1.95;margin-bottom:1.8rem}
.box .bhi{border-top:1px solid var(--or-dim);padding-top:1.6rem;font-family:var(--fjh);font-weight:700;
  font-size:clamp(16px,2.2vw,21px);line-height:1.7;color:var(--or)}

/* ── TIMELINE (10 / 11) */
.tl{margin-top:1rem;border-top:1px solid var(--line)}
.tl .row{display:grid;grid-template-columns:160px 1fr;gap:1.5rem;align-items:baseline;
  padding:1.3rem 0;border-bottom:1px solid var(--line)}
.tl .row .when{font-family:var(--fs);font-weight:700;font-size:14px;letter-spacing:.16em;color:var(--or);text-transform:uppercase}
.tl .row .what{font-family:var(--fj);font-size:16px;color:var(--w)}

/* ── PROCESS (12) */
.flow{display:flex;flex-direction:column;gap:0;margin-top:1rem}
.flow .step{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:1.3rem 1.8rem;
  font-family:var(--fjh);font-weight:500;font-size:16px;display:flex;align-items:center;gap:1.2rem}
.flow .step .sx{font-family:var(--fs);font-weight:700;font-size:12px;color:var(--or);letter-spacing:.1em}
.flow .step .sxn{font-size:13px;color:var(--mu);font-family:var(--fb);margin-left:auto}
.flow .arrow{align-self:center;color:var(--or-dim);font-size:18px;margin:.5rem 0}
.flow-note{margin-top:1.8rem;font-size:14px;color:var(--mu2);line-height:1.9}

/* ── REQUIREMENTS (募集要項) — 正社員 / アルバイト 2カラム */
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;text-align:left}
.req-card{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:2.4rem 2.2rem}
.req-row:last-child{border-bottom:none}
.req-val b{font-weight:700;color:var(--w)}
.req-col{display:flex;flex-direction:column;gap:1.5rem}
.req-job{display:block}
.req-job + .req-job{margin-top:.75rem}
.req-common{background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:1.4rem 2.2rem;text-align:left}
@media(max-width:768px){.req-common{padding:1.2rem 1.5rem}}
.req-type{font-family:var(--fjh);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--w);margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.req-row{display:grid;grid-template-columns:4.5rem 1fr;gap:.9rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--line)}
.req-row:last-child{border-bottom:none}
.req-label{font-family:var(--fb);font-size:13px;font-weight:400;letter-spacing:.1em;color:var(--gold)}
.req-val{font-family:var(--fj);font-size:15px;color:var(--w);line-height:1.7}
.req-note{display:block;font-family:var(--fj);font-size:12px;color:var(--w);margin-top:.35rem;line-height:1.6}
@media(max-width:768px){
  .req-grid{grid-template-columns:1fr;gap:1.2rem}
  .req-card{padding:1.8rem 1.5rem}
  .req-row{grid-template-columns:5rem 1fr;gap:.7rem}
  /* スマホ: 共通(勤務地/最寄駅/営業時間)をアルバイトの後ろへ */
  .req-col{display:contents}
  .req-common{order:1}
}

/* ── FAQ (13) — accordion */
/* ── FAQ (13) — 2カラム + 罫線アコーディオン */
#faq .wrap{text-align:left}
.faq-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2.5rem,5vw,6rem);align-items:stretch}
.faq-intro{display:flex;flex-direction:column}
@media(min-width:861px){.faq-intro{padding-top:2.5rem}.faq-btn{margin-bottom:2.5rem}}
.faq-intro .enlab{margin:0 0 1rem}
.faq-intro .jtit{margin:0 0 1.6rem}
.faq-desc{font-family:var(--fj);font-size:15px;line-height:2;color:var(--w);max-width:420px;margin:0 0 2.2rem}
/* STORY の VIP PACKAGES ボタンと同一スタイル(ソリッドゴールド) */
.faq-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 3rem;min-width:min(300px,70vw);margin-top:auto;align-self:flex-start;
  background:#02948D;color:var(--w);
  font-family:var(--fb);font-size:18px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .15s}
.faq-btn:hover{background:#03C9C0;transform:translateY(-2px)}

.faq{display:block}
.qa{background:transparent;border:none;border-bottom:1px solid var(--line);overflow:hidden}
.qa:hover .q{color:var(--or)}
.qa .q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  background:none;border:none;cursor:pointer;text-align:left;color:var(--w);
  font-family:var(--fjh);font-weight:700;font-size:clamp(15px,1.6vw,17px);line-height:1.55;
  padding:1.6rem 0;transition:color .2s
}
.qa .qi{position:relative;flex-shrink:0;width:20px;height:20px}
.qa .qi::before,.qa .qi::after{content:"";position:absolute;left:50%;top:50%;
  background:rgba(3,201,192,.65);transition:background .3s,opacity .3s}
.qa .qi::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.qa .qi::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.qa.open .qi::after{opacity:0}
.qa.open .qi::before{background:var(--or)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.qa .a-in{padding:0 0 1.7rem;font-size:15px;color:var(--mu2);line-height:1.95;text-align:left}
@media(max-width:860px){
  .faq-grid{display:flex;flex-direction:column;gap:0}
  .faq-intro{display:contents}
  .faq{order:1}
  .faq-btn{order:2;margin-top:2.4rem;align-self:center}
  .faq-desc{max-width:none;margin-bottom:2.4rem}
}

/* ── APPLY (14) */
.apply-grid{display:flex;flex-direction:column;gap:1.5rem;margin-top:2.5rem}
/* 参考: 左に ENTRY→(塗りの外・色固定) | 右側の役割部分だけ白フィル。左右は他セクションと同じ幅で整列 */
.applybtn{position:relative;display:flex;flex-direction:row;align-items:center;gap:1.1rem;
  text-align:left;text-decoration:none;color:#ffffff;background:transparent;border:none;border-radius:0;
  padding:0.6rem 0;overflow:visible}
.applybtn>*{position:relative;z-index:1}
.applybtn .aarw{flex-shrink:0;font-family:var(--fi);font-weight:600;font-size:42px;letter-spacing:-.05em;line-height:1.02;color:#ffffff;white-space:nowrap}
.applybtn .aar{display:inline-block;font-weight:900;-webkit-text-stroke:1.4px currentColor;margin-left:.08em}
.applybtn .atxt{position:relative;flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0;
  border-left:1.5px solid rgba(255,255,255,.45);padding:.45rem 1.4rem;overflow:hidden}
.applybtn .atxt::before{content:"";position:absolute;inset:0;z-index:0;background:#ffffff;
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.applybtn:hover .atxt::before,.applybtn.apply-hl .atxt::before{transform:scaleX(1)}
.applybtn .atxt>*{position:relative;z-index:1}
.applybtn.apply-hl .atxt{box-shadow:0 0 0 2px var(--or)}
.applybtn .an{font-family:var(--fj);font-weight:700;font-size:clamp(34px,5vw,48px);line-height:1.2;color:inherit;letter-spacing:-0.02em;transition:color .35s}
.applybtn:hover .an,.applybtn.apply-hl .an{color:#000000}
.applybtn .ae{font-family:var(--fs);font-size:14px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
/* スマホ: ENTRY↓を上に1回だけ。帯(役割)は左右の縦線で挟み、横幅は最長(VIP)に統一・中央寄せ */
.apply-entry{display:none}
@media(max-width:768px){
  .apply-entry{display:flex;justify-content:center;align-items:center;gap:.15em;
    font-family:var(--fi);font-weight:600;font-size:24px;letter-spacing:.2em;color:#ffffff;margin-bottom:1.3rem}
  .apply-entry .aar{display:inline-block;transform:rotate(90deg);font-weight:900;-webkit-text-stroke:1.2px currentColor}
  .apply-grid{display:grid;grid-template-columns:max-content;justify-content:center;gap:1.4rem}
  .applybtn{flex-direction:column;align-items:stretch;text-align:center;gap:0;padding:0}
  .applybtn .aarw{display:none}
  .applybtn .atxt{flex:none;width:100%;align-items:center;text-align:center;
    border-left:1.5px solid rgba(255,255,255,.45);border-right:1.5px solid rgba(255,255,255,.45);
    padding:.6rem 1.3rem}
  .applybtn .an{font-size:22px}
  .applybtn .ae{font-size:12px}
}
#jobs .rgc{cursor:default}
/* Apply Now の見出し・本文を左揃え(ENTRYの左端に揃える) */
#apply .enlab,#apply .jtit,#apply .lead,#apply .lead p{text-align:left}
/* スマホ版: FAQ・Apply のヘッダーテキストを中央寄せ(Q&A・応募ボタンは対象外) */
@media(max-width:768px){
  #faq .enlab,#faq .jtit,.faq-desc{text-align:center}
  #apply .enlab,#apply .jtit,#apply .lead,#apply .lead p{text-align:center}
}
/* APPLY: eyebrow/タイトルは base .enlab/.jtit(全セクション共通)。ここはApply固有のみ */
/* STORYは font-smoothing 未指定(subpixel)。RECRUIT body の antialiased を打ち消す */
#apply{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
#apply .wrap{text-align:center}
#apply .jtit .o{color:var(--w)}/* Applyの強調は白(他セクションはオレンジ/赤を維持) */
/* スマホで小さく(2行維持)するタイトル。他セクションは34px(あなたの物語を始めましょうと同寸) */
#apply .jtit,#category .jtit,#election .jtit,#spirits .jtit{font-size:clamp(29px,6.5vw,60px)}
/* Apply見出しの2行の余白をPCで少し広く */
@media(min-width:769px){#apply .jtit,#election .jtit,#category .jtit,#spirits .jtit,#stage .jtit,#jobs .jtit,#people .jtit,#requirements .jtit,#process .jtit,#english .jtit,#faq .jtit{line-height:1.25}}
/* サブ ＝ STORY .csub.j */
#apply .lead.mu{font-family:var(--fj);font-weight:400;font-size:clamp(13px,1.6vw,19px);letter-spacing:.04em;line-height:1.7;color:var(--w)}
/* 二文目は本文扱い: English「50フレーズ…」(基底.lead)と完全一致 */
#apply .lead.mu p + p{font-size:clamp(15px,1.6vw,18px);font-weight:400;letter-spacing:normal;line-height:2;color:var(--w);margin-top:.3rem}
@media(max-width:768px){
  #apply .lead.mu{font-size:14px;line-height:2.04}
}

/* ── FOOTER (STORY と完全に同一) */
.page-recruit footer{
  padding:3.5rem 4rem;border-top:.5px solid rgba(3,201,192,.13);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  font-family:var(--fb);font-weight:300;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto
}
.fsns{display:flex;gap:1.75rem;justify-content:center;margin-top:.75rem;margin-bottom:1.75rem}
.fsns a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;color:#ffffff;
  transition:color .2s,transform .2s
}
.fsns a:hover{color:var(--gold);transform:translateY(-2px)}
.fsns svg{width:100%;height:100%}
.fcopy{font-size:12px;color:#ffffff;letter-spacing:.08em;margin-top:2.5rem;transform:translateY(-1.5rem)}
@media(max-width:768px){
  .fcopy{transform:translateY(-2.5rem)}
}
.finfo-block{max-width:640px;width:100%}
.finfo-eyebrow{display:none}
.mbr{display:none}
.finfo-name{font-family:"Inter",Arial,Helvetica,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.01em;color:#ffffff;margin-bottom:.5rem;line-height:1.1}
.finfo-lang{font-size:13px;color:var(--mu);margin-bottom:2.25rem;letter-spacing:.15em;text-transform:uppercase}
.finfo-list{color:#ffffff;font-size:13px;line-height:1.95;width:100%;max-width:1100px}
.finfo-row{display:flex;flex-direction:column;align-items:center}
.finfo-row a{color:inherit;text-decoration:none;transition:color .2s}
.finfo-row a:hover{color:var(--gold)}
@media(min-width:769px){
  .finfo-block{max-width:1100px}
  .finfo-row{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:.6rem}
  .finfo-row:last-child{margin-bottom:0}
  .finfo-row span{padding:0 .9rem;border-right:1px solid rgba(245,239,230,.3)}
  .finfo-row span:last-child{border-right:none}
}
@media(max-width:768px){
  .page-recruit footer{padding:3.5rem 1.5rem 2rem}
  .mbr{display:block;width:100%;height:0}
  .finfo-eyebrow{font-size:14px;letter-spacing:3px}
  .finfo-name{font-size:22px}
  .finfo-list{font-size:12px}
  .finfo-row span{display:block;margin-bottom:.4rem}
  .finfo-row span:last-child{margin-bottom:0}
}

/* ── REVEAL */
.rv{opacity:0;transform:translateY(28px)}

/* ── RESPONSIVE */
@media(max-width:960px){
  #nav{padding:0 1.5rem}
  .nlinks{display:none}
  .hbadge{left:auto;right:3.6rem;top:calc(3.3% + 4px);transform:none}
  .scrl{bottom:1.5rem}
}
@media only screen and (max-width:900px){
  .c-header-logo{width:40px;top:3.3%;left:4%}
  #nav{top:3.3%;height:30px}
}
@media(max-width:768px){
  .wrap{padding:0 1.4rem}
  #hero{padding:2.5rem 1.5rem 0}/* 上余白で塊を少し下寄りに */
  /* ヒーロー: キッカーを上(RECRUIT 2026直下)、まずは+CTAを下(スクロールボタン直上)に振り分け */
  /* タイトル+キッカーを1つの塊として画面中央に(キッカーはタイトルの下) */
  #hero .hcnt{position:relative;order:1;top:-1.5rem}
  .hkick{font-size:22px;letter-spacing:-.05em;line-height:1.5;position:relative;order:2;left:auto;right:auto;top:-2.2rem;margin:1.2rem 0 0;text-align:center}
  .hbig{letter-spacing:-0.05em;margin:0}
  .hlines{font-size:15px;position:absolute;left:0;right:0;bottom:5rem;margin:0;text-align:center;will-change:transform;transform:translateZ(0)}
  #hero .hctas{position:absolute;left:0;right:0;bottom:10.5rem;margin:0;justify-content:center;will-change:transform;transform:translateZ(0)}
  #hero .btn-or{padding-top:3px;padding-bottom:3px;font-size:15px}
  .sec{padding:4rem 0}
  .rstate{padding:4rem 0;min-height:auto}
  #election{padding:6rem 0 4rem;min-height:auto}/* 上余白をThe Stage(6rem)に合わせる */
  .stats{grid-template-columns:1fr;gap:2rem}
  .people{grid-template-columns:1fr}
  .tl .row{grid-template-columns:110px 1fr;gap:1rem}
  .hctas{gap:1.2rem}
}

/* ════════════════════════════════════════════════════
   STORY-STYLE REDESIGN — 01 STAGE → 12 PROCESS
   full-bleed imagery / alternating / grids — recruit palette
   ════════════════════════════════════════════════════ */

/* ── full-bleed IMAGE STATEMENT (舞台 / category / election) */
.rstate{position:relative;min-height:72vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:6rem 0;overflow:hidden;background:var(--bg);border-top:1px solid var(--line)}
.rstate.sm{min-height:auto}
/* The Election は余白拡大の対象外(元の4rem維持) — PCのみ(モバイルは上余白をStageに合わせる) */
@media(min-width:769px){#election{padding:4rem 0}}
.rstate>.wrap{position:relative;z-index:2;width:100%}
.rstate-bg{position:absolute;inset:-4% 0;z-index:0;background-size:cover;background-position:center}
.rstate-ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(5,3,5,.74),rgba(5,3,5,.84) 45%,rgba(5,3,5,.96))}
.rstate-ov.warm{background:
  radial-gradient(120% 90% at 70% 25%,rgba(3,201,192,.16),transparent 55%),
  linear-gradient(180deg,rgba(5,3,5,.72),rgba(5,3,5,.86) 50%,rgba(5,3,5,.97))}
/* big triple lines (02) */
.rtriple{margin-top:0.3rem;font-family:var(--fjh);font-weight:600;font-size:27px;line-height:1.7}
/* 見出し下マージンとの相殺対策：カテゴリ見出しの下余白を詰める */
#category .jtit{margin-bottom:0.7rem}
/* 横線削除分、三連と本文の間隔を確保 */
#category .lead{margin-top:0.7rem}
/* カテゴリ本文はスマホのみ12px */
@media(max-width:768px){#category .lead p{font-size:12px}}
/* 英語ラベル「A New Category」と見出しの間隔（PC・スマホとも0.7rem） */
#category .enlab{margin-bottom:0.7rem}
/* Stage見出しと本文の間隔を詰める */
#stage .jtit{margin-bottom:0.7rem}
/* Stage本文の段落間を少し詰める */
#stage .lead p + p{margin-top:0.15rem}
/* Stage・JOBS・People・Spirits・Timelinesラベルの下間隔をCategoryに合わせる */
#stage .enlab,#jobs .enlab,#people .enlab,#spirits .enlab,#timelines .enlab,#requirements .enlab,#process .enlab,#english .enlab,#apply .enlab,#faq .enlab,#election .enlab{margin-bottom:0.7rem}
/* People・Spirits 見出し下の間隔も0.7rem */
#people .jtit,#spirits .jtit,#jobs .jtit{margin-bottom:0.7rem}
/* English・Apply・FAQ・Election の見出し→リード間隔も0.7rem */
#english .jtit,#apply .jtit,#faq .jtit,#election .jtit{margin-bottom:0.7rem}
#election .relect{margin-top:0}
/* スマホ版はラベル→見出しの間隔を0.5remに */
@media(max-width:768px){
  #stage .enlab,#jobs .enlab,#people .enlab,#spirits .enlab,#timelines .enlab,#requirements .enlab,#process .enlab,#english .enlab,#apply .enlab,#faq .enlab,#election .enlab,#category .enlab,#who .esl,#notforyou .esl{margin-bottom:0.5rem}
}
/* Spirits リード(1段落目)=大強調 / 本文(2段落目)=18・SP12 */
#spirits .lead p:first-child{font-size:27px;font-weight:600;letter-spacing:-0.05em;line-height:1.7;margin-bottom:0.7rem}
@media(max-width:768px){#spirits .lead p{font-size:12px}#spirits .lead p:first-child{font-size:16px}}
/* English/Apply/Election リード=大強調 / 本文=18・SP12 */
#english .lead:not(.mu) p:first-child,#apply .lead.mu p,#election .re-h{font-size:27px;font-weight:600;letter-spacing:-0.05em;line-height:1.7;margin-bottom:0.7rem}
/* The Election のリードだけ少し大きく(PC) */
#election .re-h{font-size:31px}
@media(max-width:768px){
  #english .lead:not(.mu) p:first-child,#apply .lead.mu p,#election .re-h{font-size:16px}
  #english .lead:not(.mu) p,#election .re-s{font-size:12px}
}
/* English/Election のクローザーを本文(18/12・400)に下げる */
#english .en-hi,#election .re-hi{font-size:18px;font-weight:400}
@media(max-width:768px){#english .en-hi,#election .re-hi{font-size:12px}}
/* 英語ラベル(The Stage / Who We Want / Not For You 等)を紫に */
.enlab,.esl{color:var(--or)}
/* Stage本文(2文目)はスマホ12px。1文目は別ルールで16px維持 */
@media(max-width:768px){#stage .lead p{font-size:12px}}
.rt-i{display:inline}
.rtriple .o{color:var(--w)}
@media(min-width:769px){.rtriple{white-space:nowrap}}
@media(max-width:768px){.rtriple{font-size:16px}.rt-i{display:inline}.rtriple .rt-i:last-child{display:block}}
/* PC専用の改行(モバイルは自然折り返し) */
.pbr{display:none}
@media(min-width:769px){.pbr{display:block;width:100%;height:0}}
/* ラベル類のサイズ統一: PC20px / モバイル16px(=.enlabと同寸) */
@media(max-width:768px){
  .esl,.salary .slab,.eimg-tag{font-size:16px}
  .rslbl,.rglab,.rperson .prole{font-size:12px}
}

/* election copy (09) */
.relect{margin:1.6rem auto 0}
/* 総選挙＝見せ場: フルビューポート＋特大タイトル(PCのみ。モバイルは他セクションと同じ高さ) */
@media(min-width:769px){#election{min-height:80vh}}
/* The Election: 薄い白背景(画像うっすら)・黒文字 */
#election{--w:#100f0d}
/* The Election: 白背景に黒ドット(The Stageと同じてんてん) */
#election .rstate-ov{background-color:rgba(255,255,255,.86);
  background-image:radial-gradient(rgba(16,15,13,.08) .5px,transparent .9px);background-size:9px 9px}
/* A New Category: 暗い背景(グリッドは ::after で story と統一) */
#category .rstate-ov{
  background-image:linear-gradient(180deg,rgba(5,3,5,.74),rgba(5,3,5,.84) 45%,rgba(5,3,5,.96));
  background-size:cover;background-position:center}
#election .jtit{font-size:clamp(54px,10vw,108px);font-weight:800}
.re-h{font-family:var(--fjh);font-weight:700;font-size:clamp(20px,2.6vw,28px);line-height:1.6;color:var(--w);margin-bottom:1.2rem}
.re-s{font-family:var(--fj);font-size:15px;color:var(--w);line-height:1.95;margin-bottom:1.6rem}
.re-hi{display:inline-block;font-family:var(--fjh);font-weight:700;font-size:clamp(16px,2.1vw,21px);
  line-height:1.7;color:var(--w)}
/* 英語セクション結びを .re-hi と同じフォントに */
.en-hi{font-family:var(--fjh);font-weight:700;font-size:clamp(16px,2.1vw,21px);line-height:1.7;color:var(--w)}

/* ── STATS bar (story UNVRS style) */
.rstats{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
.rstat{position:relative;padding:1.5rem 1.5rem;text-align:center;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.rstat::after{content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:1px;height:72%;background:rgba(245,239,230,.22)}
.rstat:last-child::after{display:none}
.rsnum{display:block;font-family:var(--fi);font-weight:600;font-size:clamp(41px,5.4vw,70px);letter-spacing:-.05em;line-height:1.02;color:var(--w)}
.rsnum em{font-style:normal;font-family:var(--fjh);font-weight:700;font-size:clamp(22px,2.6vw,30px);color:var(--w);margin-left:.15em}
.rsjp{display:block;font-family:var(--fjh);font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.15;color:var(--w)}
.rslbl{display:block;font-family:var(--fs);font-size:14px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:.85rem}
@media(max-width:768px){
  .rstats{grid-template-columns:1fr 1fr;row-gap:1.2rem}
  .rstat{padding:1rem .7rem}
  .rsnum{font-size:clamp(40px,5.4vw,70px)}
  .rstat:nth-child(2n)::after{display:none}
}

/* ── EXPERIENCE alternating image/text (story .exp) */
.exp{display:grid;grid-template-columns:0.85fr 1.15fr;min-height:520px;overflow:hidden;text-align:left}
.exp.rev{direction:rtl}
.exp.rev>*{direction:ltr}
.eimg{position:relative;overflow:hidden;min-height:340px;background:#050305}
@media(min-width:961px){.eimg{align-self:stretch;height:auto}}
.eimg-tag{display:none}
.eimg-bg{position:absolute;top:-15%;bottom:-15%;left:0;right:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.exp:hover .eimg-bg{transform:scale(1.05)}
.eimg-tag{position:absolute;bottom:1.4rem;right:1.4rem;font-family:var(--fs);font-size:20px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--or);border:.5px solid var(--or);padding:4px 11px}
.etxt{padding:4rem 3.2rem;display:flex;flex-direction:column;justify-content:center;text-align:left}
.enum{font-family:var(--fi);font-weight:800;font-size:90px;color:rgba(3,201,192,.10);line-height:1;margin-bottom:-1.2rem;user-select:none}
.esl{font-family:var(--fb);font-size:20px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--w);margin-bottom:1rem}
.etit{font-family:var(--fjh);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.3;color:var(--w);margin-bottom:1.4rem}
.etit .o{color:var(--w)}.etit .r{color:var(--w)}
.elead{font-family:var(--fjh);font-weight:700;font-size:clamp(17px,2vw,21px);line-height:1.7;color:var(--w);margin-bottom:1rem}
.elead .o{color:var(--w)}
.ebo{font-family:var(--fj);font-size:15px;line-height:2;color:var(--w)}
.echecks{list-style:none;margin:1.6rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.4rem}
@media(max-width:768px){.echecks{grid-template-columns:1fr}}
.echecks li{position:relative;padding-left:1.7rem;font-size:15px;color:var(--w);font-family:var(--fj)}
.echecks li::before{content:"—";position:absolute;left:0;color:var(--or);font-weight:700}
.echecks.bad li::before{color:var(--red)}
.equote{margin-top:1.8rem;border:1px solid var(--or);color:var(--or);
  padding:0.85rem 1.5rem;font-family:var(--fjh);font-weight:500;font-size:clamp(15px,1.8vw,18px);line-height:1.7}
/* Not For You(exp.rev) はPCで右揃い */
@media(min-width:961px){
  .exp.rev .etxt{text-align:right}
  .exp.rev .echecks li{padding-left:0;padding-right:1.7rem}
  .exp.rev .echecks li::before{left:auto;right:0}
  /* 画像側を画面端までフルブリード（見切れる）。テキストは他セクションの内容幅に揃える */
  .exp{width:100vw;margin-left:calc(50% - 50vw)}
  .exp:not(.rev) .etxt{padding-left:4rem;padding-right:max(4rem,calc((100vw - 1328px)/2 + 4rem))}
  .exp.rev .etxt{padding-right:4rem;padding-left:max(4rem,calc((100vw - 1328px)/2 + 4rem))}
}
@media(max-width:960px){
  /* story The Place(スマホ)に合わせ、画像を画面いっぱい(フルブリード)に */
  .exp,.exp.rev{grid-template-columns:1fr;direction:ltr;min-height:auto;width:100vw;margin-left:calc(50% - 50vw)}
  .eimg{min-height:280px}
  .etxt{padding:2rem 1.5rem 0}
  .enum{font-size:70px}
}
/* Who We Want(#who) 個別調整：見出し拡大・内容を少し右へ・白枠を内容幅に */
#who .etit{font-size:clamp(34px,4.8vw,56px)}
#who .equote{width:fit-content;max-width:100%}
@media(min-width:961px){
  /* フルブリード解除→他セクション(.wrap)幅に統一。画像カラムを縮小 */
  #who .exp{width:auto;margin-left:0;grid-template-columns:0.8fr 1.2fr;min-height:auto}
  #who .etxt{padding-left:3.5rem;padding-right:0;justify-content:flex-end;padding-bottom:0}
}
/* Not For You(#notforyou) も同調整（右揃えレイアウトに合わせてミラー） */
#notforyou .etit{font-size:clamp(34px,4.8vw,56px)}
#notforyou .equote{width:fit-content;max-width:100%;margin-left:auto}
/* スマホ: Who/Not For You の白枠は全幅・左揃えで整える */
@media(max-width:960px){
  #who .equote,#notforyou .equote{width:auto;max-width:100%;margin-left:0;margin-right:0}
}
/* スマホ: 画像の上余白を無くし、画像をセクション最上部に */
@media(max-width:768px){
  #who,#notforyou{padding-top:0}
}
@media(min-width:961px){
  /* フルブリード解除→他セクション(.wrap)幅に統一。画像カラムを縮小 */
  #notforyou .exp{width:auto;margin-left:0;grid-template-columns:0.8fr 1.2fr;min-height:auto}
  #notforyou .etxt{padding-right:3.5rem;padding-left:0;justify-content:flex-end;padding-bottom:0}
  /* 最終項目「指摘を素直に受け取れない」を右カラムへ */
  #notforyou .echecks li:last-child{grid-column:2}
}

/* ── centered HEADER */
.rhead{margin:0 auto 3rem;text-align:center}

/* ── ROLE card grid (story .sig-grid) */
.rgrid{display:grid;gap:0;background:var(--line);width:100%}
.rgrid.c4{grid-template-columns:repeat(2,1fr)}
.rgc{position:relative;overflow:hidden;background:var(--bg2);min-height:220px;text-align:left}
.rgc-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.001);transition:transform .75s cubic-bezier(.16,1,.3,1)}
.rgc:hover .rgc-bg{transform:scale(1.08);filter:none}
.rgc-ov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,3,5,.2) 0%,rgba(5,3,5,.5) 52%,rgba(5,3,5,.9) 100%);
  transition:opacity .5s}
.rgc:hover .rgc-ov{opacity:.82}
/* storyのSIGNATURE EXPERIENCESと同じ薄い黒オーバーレイ(ホバーで消える) */
.rgc::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(5,3,5,.55),rgba(5,3,5,.75));transition:opacity .4s}
.rgc:hover::after{opacity:0}
.rgc::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background .35s;z-index:3}
.rgc:hover::before{background:var(--or)}
.rgnum{position:absolute;top:1.2rem;right:1.5rem;z-index:3;font-family:var(--fi);font-weight:800;
  font-size:44px;line-height:1;color:rgba(245,239,230,.16);transition:color .35s,transform .35s}
.rgc:hover .rgnum{color:rgba(3,201,192,.55);transform:translateY(-2px)}
.rgc-body{position:relative;z-index:2;padding:3.8rem 1.9rem 2.2rem;display:flex;flex-direction:column;
  height:100%;justify-content:flex-end}
.rgic{display:inline-flex;width:30px;height:30px;margin-bottom:1rem;color:var(--or);
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.rgc:hover .rgic{transform:translateY(-3px) scale(1.08)}
.rgic svg{width:100%;height:100%}
.rglab{font-family:var(--fs);font-size:14px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:.6rem}
.rgname{font-family:var(--fj);font-weight:700;font-size:20px;line-height:1.25;color:var(--w);margin-bottom:.7rem}
@media(min-width:769px){.rgname{font-size:28px}}
.rgdesc{font-family:var(--fj);font-size:14px;color:var(--w);line-height:1.85}
@media(max-width:768px){.rgrid.c4{grid-template-columns:1fr}}
/* Four Stages: スマホは画面中央に来たカードを自然にカラー化(PCのホバー相当) */
@media(max-width:768px){
  #jobs .rgc-bg{transition:transform .75s cubic-bezier(.16,1,.3,1),filter .6s ease}
  #jobs .rgc.in-color .rgc-bg{filter:none;transform:scale(1.04)}
  #jobs .rgc.in-color::after{opacity:0}
  #jobs .rgc.in-color .rgc-ov{opacity:.82}
  #jobs .rgc.in-color::before{background:var(--or)}
}

/* ── PEOPLE cards (06) */
.rpeople{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--line);width:100%;perspective:1200px}
.rperson{background:var(--bg2);text-align:left;position:relative;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.rperson .pph{aspect-ratio:4/5;background:radial-gradient(120% 120% at 50% 30%,#050305,#050305);
  display:flex;align-items:center;justify-content:center;color:rgba(3,201,192,.55);
  font-family:var(--fs);font-size:11px;font-weight:400;letter-spacing:.18em;border-bottom:1px solid var(--or-dim)}
/* 主人公たち: 4枚とも当ての画像(プレースホルダ「PHOTO」文字はfont-size:0で非表示) */
#people .rperson .pph{background:#050305 url('../images/recruit/20250315-CEL01335-170.webp') center/cover no-repeat;font-size:0}
.rperson .pbd{padding:1.5rem 1.6rem}
.rperson .prole{font-family:var(--fs);font-size:14px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:.5rem}
.rperson .pname{font-family:var(--fjh);font-weight:700;font-size:18px;color:var(--w);margin-bottom:.5rem;line-height:1.2}
.rperson .ppath{font-family:var(--fjh);font-weight:400;font-size:17px;color:var(--w);margin-bottom:0;line-height:1.9}
.rperson .ppath .o{color:var(--or);font-size:15px}
.rperson .pq{font-family:var(--fj);font-size:13px;color:var(--w);line-height:1.8}
@media(max-width:960px){.rpeople{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rpeople{grid-template-columns:1fr;gap:.9rem;background:transparent}
  .rperson .ppath{font-size:14px;white-space:normal}
  .rperson .ppath .o{font-size:13px}}
.rperson .pph{position:relative;cursor:pointer;transition:filter .35s,color .35s}
@media(max-width:768px){.rperson .pph{aspect-ratio:16/10}}
.rperson:hover .pph{filter:brightness(1.18);color:rgba(3,201,192,.9)}
.rperson:hover{transform:scale(1.04) translateZ(40px) rotateX(4deg);box-shadow:0 28px 60px rgba(0,0,0,.62);z-index:3}
/* ===== People: 添付風 白角丸カード + 横スクロール(自動スライド+手動ドラッグ) ===== */
#people .people-vp{overflow-x:auto;overflow-y:hidden;padding:24px 0 46px;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
#people .people-vp::-webkit-scrollbar{display:none}
#people .people-vp.grabbing{cursor:grabbing}
#people .people-vp.grabbing .rperson{transition:none}
#people .rhead{margin-bottom:1rem}
#people .rpeople{display:flex;flex-wrap:nowrap;gap:0;width:max-content;background:transparent;perspective:none;padding:0}
#people .rperson{flex:0 0 340px;margin-right:1.4rem;position:relative;
  background:#0d0d0d;color:#ffffff;border-radius:18px;overflow:hidden;transform:none;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
#people .rperson:hover{transform:translateY(-10px);box-shadow:0 26px 56px rgba(0,0,0,.30);z-index:3}
#people .rperson .pph{aspect-ratio:1/1.1;border-bottom:none;
  background:#050305 url('../images/recruit/20250315-CEL01335-170.webp') center/cover no-repeat;font-size:0}
/* スライド中もゆっくりパン/ズーム(ケンバーンズ) */
@keyframes pphKen{0%{transform:scale(1.03) translate(.6%,.6%)}100%{transform:scale(1.13) translate(-2.5%,-2.5%)}}
#people .rperson .pph{background-size:cover;animation:pphKen 13s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){#people .rperson .pph{animation:none}}
/* スマホ: Ken Burns(写真ズーム)を止め、スライド中の毎フレーム再描画を回避(自動スライド/スワイプ/中央カラー化は維持) */
@media(max-width:768px){#people .rperson .pph{animation:none}}
/* スワイプ/スライドで画面中央に来たカードを自然にカラー化(PC・SP共通) */
#people .rperson .pph{transition:filter .5s ease}
#people .rperson.in-color .pph{filter:none}
/* PC: SP同様にtransform自動スクロール(マーキー)。重複(ループ用)カードも表示しシームレスにループ・ドラッグ操作可 */
@media(min-width:769px){
  #people .people-vp{cursor:grab}
}
#people .rperson:hover .pph{filter:none;color:transparent}
#people .rperson .pbd{position:relative;padding:1rem 1.5rem 1.4rem}
#people .rperson .prole{color:var(--or);font-size:12px;letter-spacing:.18em;margin-bottom:.5rem}
#people .rperson .pname{color:#ffffff;font-size:22px;font-weight:700;line-height:1.2;margin-bottom:.45rem}
#people .rperson .ppath{color:#fff;font-size:17px;line-height:1.7}
#people .rperson .ppath .o{color:var(--or);font-size:14px}
@media(max-width:768px){
  #people .rperson{flex-basis:280px;transition:none}
  #people .rperson:hover{transform:none;box-shadow:0 10px 30px rgba(0,0,0,.18)}
  #people .rperson .pname{font-size:20px}
  #people .rperson .ppath{font-size:14px}
}
.rperson .pph::after{content:"READ STORY ＋";position:absolute;bottom:.9rem;right:.9rem;
  font-family:var(--fs);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--w);background:rgba(5,3,5,.5);border:1px solid rgba(3,201,192,.7);padding:5px 11px;
  transition:background .3s,color .3s,border-color .3s;pointer-events:none}
.rperson:hover .pph::after,.rperson .pph:focus-visible::after{background:var(--or);border-color:var(--or);color:#050305}
/* People モーダル */
.pmodal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:rgba(5,3,5,0);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility .4s ease,background .5s ease}
.pmodal.open{opacity:1;visibility:visible;pointer-events:auto;background:rgba(5,3,5,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pmodal-card{position:relative;width:100%;max-width:1200px;max-height:min(620px,calc(100vh - 4rem));display:flex;background:var(--bg2);border:1px solid var(--line);overflow:hidden;
  text-align:left;opacity:0;transform:translateY(26px) scale(.93);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.pmodal.open .pmodal-card{opacity:1;transform:none}
.pmodal-ph{flex:0 0 42%;align-self:stretch;min-height:420px;background:#050305 url('../images/recruit/20250315-CEL01335-170.webp') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:rgba(3,201,192,.5);
  font-family:var(--fs);font-size:12px;letter-spacing:.2em;border-right:1px solid var(--or-dim)}
.pmodal-bd{flex:1;padding:2.6rem 2.6rem;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pmodal-role{font-family:var(--fs);font-size:13px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:.5rem}
.pmodal-name{font-family:var(--fjh);font-weight:700;font-size:26px;color:var(--w);line-height:1.2;margin-bottom:.7rem}
.pmodal-path{font-family:var(--fjh);font-weight:700;font-size:15px;color:var(--w);line-height:1.5;margin-bottom:1.2rem}
.pmodal-path .o{color:var(--or)}
.pmodal-quote{font-family:var(--fj);font-size:14px;color:var(--w);line-height:2;white-space:pre-line}
.pmodal-close{position:absolute;top:.7rem;right:.7rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(5,3,5,.5);border:1px solid var(--line);color:var(--w);font-size:22px;line-height:1;cursor:pointer;border-radius:50%;transition:background .25s;z-index:5}
.pmodal-close:hover{background:rgba(3,201,192,.35)}
@media(max-width:680px){
  .pmodal{padding:1rem}
  .pmodal-card{flex-direction:column;max-width:440px;max-height:calc(100dvh - 2rem)}
  .pmodal-ph{flex:none;min-height:240px;aspect-ratio:4/3;border-right:none;border-bottom:1px solid var(--or-dim)}
  /* 本文が長い場合はこのエリア内でスクロール(カードはビューポートに収める) */
  .pmodal-bd{padding:2rem 1.8rem 2.2rem;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .pmodal-name{font-size:23px}
  .pmodal-quote{font-size:12px;line-height:1.85}
}

/* ── SEVEN SPIRITS grid (07) */
.rspirits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%;text-align:left}
.rsp{position:relative;overflow:hidden;background:var(--bg2);padding:2.6rem 1.6rem 1.8rem;min-height:150px;
  display:flex;flex-direction:column;justify-content:flex-end;transition:transform .3s}
.rsp:hover{transform:translateY(-4px)}
.rsp .spn{position:absolute;top:-.12em;right:.3rem;font-family:var(--fi);font-weight:800;
  font-size:clamp(62px,8vw,108px);color:rgba(3,201,192,.13);line-height:1;z-index:0;pointer-events:none;
  letter-spacing:-.02em;transition:color .35s,transform .35s}
.rsp:hover .spn{color:rgba(3,201,192,.5);transform:translateY(2px)}
.rsp .spt{position:relative;z-index:1;font-family:var(--fjh);font-weight:700;font-size:clamp(22px,2.7vw,32px);color:var(--w);margin-top:0;line-height:1.3;white-space:nowrap}
/* PC: テキストを下げつつ、左余白と下余白を同じ(1.6rem)に */
@media(min-width:769px){#spirits .rsp{padding:3.2rem 1.6rem 1.6rem}}
@media(max-width:768px){
  /* スマホ: 7帯の塊を16:9の箱に収め、各帯を等分(縦を縮める)・文字を小さく */
  .rspirits{grid-template-columns:1fr;grid-template-rows:repeat(7,1fr);gap:3px;aspect-ratio:9/14;margin-top:-1rem}
  .rsp{min-height:0;padding:0 1.6rem;flex-direction:row;align-items:center;justify-content:flex-start}
  .rsp .spn{font-size:24px;top:50%;transform:translateY(-50%);right:.6rem}
  .rsp .spt{font-size:18px;line-height:1.2}
}
/* スマホ: 画面中央に来たSpiritカードを自然に強調(ゆるやかなスケール+番号を緑) */
@media(max-width:768px){
  #spirits .rsp{transition:transform .55s cubic-bezier(.16,1,.3,1)}
  #spirits .rsp.centered{transform:scale(1.05)}
  #spirits .rsp.centered .spn{color:rgba(3,201,192,.55)}
}

/* ── TIMELINE with center spine + nodes (10 / 11) */
.rtl{width:100%;max-width:1020px;margin:0 auto}
.rtl-row{display:grid;grid-template-columns:1fr 56px 1.4fr;align-items:center;column-gap:1.4rem;min-height:88px}
.rtl-row .when{justify-self:end;text-align:right;font-family:var(--fi);font-weight:800;
  font-size:clamp(16px,1.7vw,21px);letter-spacing:.01em;color:var(--or);white-space:nowrap}
.rtl-node{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.rtl-node::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rtl-row:first-child .rtl-node::before{top:50%}
.rtl-row:last-child .rtl-node::before{bottom:50%}
.rtl-node::after{content:"";position:relative;z-index:1;width:11px;height:11px;border-radius:50%;
  background:var(--or);box-shadow:0 0 0 4px rgba(3,201,192,.14);transition:transform .3s,box-shadow .3s}
.rtl-row:hover .rtl-node::after{transform:scale(1.3);box-shadow:0 0 0 5px rgba(3,201,192,.22)}
.rtl-row .what{font-family:var(--fjh);font-weight:500;font-size:clamp(15px,1.8vw,18px);color:var(--w);line-height:1.6;text-align:left}
@media(max-width:768px){
  .rtl{max-width:none}
  .rtl-row{grid-template-columns:72px 34px 1fr;column-gap:.5rem;min-height:70px}
  .rtl-row .when{font-size:14px}
  .rtl-row .what{font-size:15px}
  .rtl-node::after{width:9px;height:9px;box-shadow:0 0 0 3px rgba(3,201,192,.14)}
}

/* ── 2カラム並列タイムライン (育つ場所 | 1日の流れ) */
.tl2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.tl2-col .rhead{margin-bottom:2rem}
.tl2-col .rtl{max-width:none}
/* PC2カラム時: 両スパインを同一長＋各行を均等配分 */
@media(min-width:861px){
  .tl2 .rtl{display:flex;flex-direction:column;height:500px}
  .tl2 .rtl-row{flex:1;min-height:0}
}
@media(max-width:860px){.tl2{grid-template-columns:1fr;gap:3.5rem}}

/* ── HORIZONTAL TIMELINE (10 育つ場所 / 11 1日の流れ) — 横スクロール年表 */
#growth .wrap{text-align:left}
.htl-head{display:flex;justify-content:center;align-items:flex-end;gap:1.5rem;margin-bottom:3.5rem;text-align:center}
.htl-head .enlab{margin:0 0 .7rem}
.htl-head .jtit{margin:0}
.htl-nav{display:flex;gap:.75rem;flex-shrink:0}
.htl-arrow{width:50px;height:50px;border-radius:50%;border:1px solid rgba(245,239,230,.25);background:transparent;
  color:var(--w);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s,background .25s,opacity .25s}
.htl-arrow svg{width:20px;height:20px}
.htl-arrow:hover{border-color:var(--or);color:var(--or);background:rgba(3,201,192,.06)}
.htl-arrow:disabled{opacity:.3;cursor:default}
.htl-arrow:disabled:hover{border-color:rgba(245,239,230,.25);color:var(--w);background:transparent}
.htl{position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.htl::-webkit-scrollbar{display:none}
.htl-track{display:flex}
.htl-item{flex:1 1 0;min-width:0;position:relative}
.htl-year{font-family:var(--fi);font-weight:600;font-size:clamp(17px,1.6vw,23px);color:var(--or);
  letter-spacing:.01em;line-height:1;margin-bottom:.85rem;padding-right:1rem}
.htl-line{position:relative;border-top:1px solid rgba(245,239,230,.18)}
.htl-caret{position:absolute;top:0;left:0;width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--w)}
.htl-body{padding:1.5rem 1rem 0 0}
.htl-t{font-family:var(--fjh);font-weight:700;font-size:clamp(13px,1.1vw,15px);color:var(--w);line-height:1.6}
@media(max-width:768px){
  .htl-head{flex-direction:column;align-items:center;gap:1.4rem;margin-bottom:2.5rem}
  .htl-item{flex:0 0 58%}
  .htl-year{font-size:18px;margin-bottom:.7rem}
  .htl-body{padding-top:1.2rem}
}

/* ── PROCESS flow (12) — コンパクト横ステッパー */
.rflow{display:flex;width:100%}
.rflow-step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.rflow-step:not(:last-child)::before{content:"";position:absolute;top:34px;left:50%;width:100%;height:1.5px;background:var(--or-dim);z-index:0}
.rflow-num{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;border:1.5px solid var(--or-dim);background:#0d0d0d;
  display:flex;align-items:center;justify-content:center;font-family:var(--fi);font-weight:800;font-size:23px;color:var(--or);
  margin-bottom:1.4rem;transition:border-color .3s,background .3s}
.rflow-step:hover .rflow-num{border-color:var(--or);background:rgba(3,201,192,.1)}
.rflow-txt{display:flex;flex-direction:column;gap:.45rem}
.rflow-st{font-family:var(--fjh);font-weight:600;font-size:clamp(16px,1.4vw,19px);color:var(--w);line-height:1.5}
.rflow-sxn{font-family:var(--fb);font-size:14px;letter-spacing:.02em;color:var(--or);line-height:1.45}
.rflow-note{margin:3rem auto 0;font-family:var(--fj);font-size:14px;color:var(--w);line-height:1.95}
@media(min-width:1000px){.rflow-note{white-space:nowrap}}
@media(max-width:768px){
  .rflow{flex-direction:column;width:fit-content;max-width:100%;margin:0 auto}
  .rflow-step{flex:none;flex-direction:row;align-items:center;text-align:left;gap:1.3rem;padding:0 0 1.1rem}
  .rflow-step:not(:last-child)::before{top:0;left:34px;width:1.5px;height:100%}
  .rflow-num{margin-bottom:0;flex-shrink:0}
  .rflow-txt{padding-top:0}
  .rflow-note{margin-top:1.2rem}
}
/* スマホ: The Process の円を小さく・文字をA Night(.what14/.when13)に合わせる */
@media(max-width:768px){
  #process .rflow-num{width:48px;height:48px;font-size:16px}
  #process .rflow-step:not(:last-child)::before{left:24px}
  #process .rflow-st{font-size:14px}
  #process .rflow-sxn{font-size:13px}
}
/* PC: minimum readable body text = 15px */
@media(min-width:769px){
  .rgdesc,.rperson .pq,.rflow-step .sxn,.rflow-note,.salary .snote{font-size:15px}
}
/* ── DM Sans 3段スケール統一 (PC 20/14/11 ・ SP 15/12/10) — ここが唯一の正 */
.enlab,.esl,.eimg-tag,.salary .slab{font-size:20px}
.faq-btn,.rflow-sxn,.rslbl,.rglab,.rperson .prole,.req-label,.rtl-row .when,.pmodal-role{font-size:14px}
.hbadge,.rperson .pph,.rperson .pph::after,.pmodal-ph{font-size:11px}
@media(max-width:768px){
  .enlab,.esl,.eimg-tag,.salary .slab{font-size:15px}
  .faq-btn,.rflow-sxn,.rslbl,.rglab,.rperson .prole,.req-label,.rtl-row .when,.pmodal-role{font-size:12px}
  .hbadge,.rperson .pph,.rperson .pph::after,.pmodal-ph{font-size:10px}
}
/* ── 本文・ラベル系の太さを 700→600 に */
.elead,.qa .q,.applybtn .an,.rperson .pname,.rperson .ppath,.pmodal-name,.pmodal-path,.rsnum em,.rsjp,.htl-t{font-weight:600}
/* ── 本文テキストのサイズ統一（PC 18px / SP 15px） */
.lead,.lead p,.ebo,.echecks li,.re-s,.rflow-note{font-size:18px}
#apply .lead.mu{font-size:18px}
@media(max-width:768px){
  .lead,.lead p,.ebo,.echecks li,.re-s,.rflow-note{font-size:14px}
  #apply .lead.mu{font-size:14px}
}
/* FAQ説明文は本文と同じ PC18/SP12 */
.faq-desc{font-size:16px}
@media(max-width:768px){ .faq-desc{font-size:12px} }
/* Stage本文1文目・People「働く人の声」を rtriple に合わせる（24/16・700・行間1.7・字間-0.05em） */
#people .lead p,#jobs .lead p{font-size:27px;font-weight:600;line-height:1.7;letter-spacing:-0.05em}
#stage .lead p:first-child{font-size:32px;font-weight:600;line-height:1.7;letter-spacing:-0.05em}
@media(max-width:768px){ #stage .lead p:first-child,#people .lead p,#jobs .lead p{font-size:16px} }
/* 全タイトル・応募ボタン職種名の文字間隔を詰める */
.jtit,.etit{letter-spacing:-0.05em}
.applybtn .an,.rtriple,.rgname,.elead,.re-h{letter-spacing:-0.05em}
/* タイトルサイズを「7つの精神」=clamp(29px→60px)に統一（ElectionはPCのみ除外） */
.jtit{font-size:clamp(29px,6.5vw,60px)}
#who .etit,#notforyou .etit{font-size:clamp(29px,6vw,60px)}
/* 舞台・カテゴリ・JOBS・People・Spiritsの大見出しを PC最大72px */
#stage .jtit,#category .jtit,#jobs .jtit,#people .jtit,#spirits .jtit,#requirements .jtit,#process .jtit,#english .jtit,#apply .jtit,#faq .jtit,#timelines .jtit{font-size:clamp(29px,7vw,78px)}
/* The Stage の見出しだけ少し大きく・太さ800 */
#stage .jtit{font-size:clamp(29px,7vw,86px);font-weight:800}
/* The Stage ラベル+見出しだけ少しだけ下に(PCのみ。スマホは余白を他と揃える) */
@media(min-width:769px){#stage .enlab,#stage .jtit{position:relative;top:0.8rem}}
@media(max-width:768px){
  #election .jtit{font-size:clamp(29px,6.5vw,60px)}
  /* JOBS見出しはスマホでも1行に */
  #jobs .jtit .mbr{display:none}
}
/* ── 募集要項：値=PC14/SP12、注記・説明文=12px固定 */
.req-val{font-size:14px}
.req-note{font-size:12px}
@media(max-width:768px){
  .req-val{font-size:12px}
}
/* ── WHO/NOT チェック項目を 14px に */
.echecks li{font-size:14px}
/* ── Who We Want / Not For You を基準に反映 */
#who .esl,#notforyou .esl{margin-bottom:0.7rem}
#who .etit,#notforyou .etit{margin-bottom:0.7rem}
.elead{font-size:27px;font-weight:600;letter-spacing:-0.05em;line-height:1.7;margin-bottom:0.7rem}
@media(max-width:768px){.elead{font-size:16px}.ebo{font-size:12px}}
/* .esl(Who/Not For Youラベル)はベース白指定が後にあるため末尾で紫を確定 */
.esl{color:var(--or)}
/* セクション背景を黒/グレーの2トーン交互で境目を明確に（画像背景のStage/Category/Electionは対象外） */
#jobs{background:#0B0B0B;overflow:hidden}
/* Four Stages: セクション背景画像(grayscale + 暗幕オーバーレイ＝他セクションと同加工) */
#jobs>.wrap{position:relative;z-index:2}
/* 背景を少しだけぼかす(insetを広げてぼけたエッジを隠す) */
#jobs .rstate-bg{filter:grayscale(1) blur(3px);inset:-3%}
/* The Process: セクション背景画像(grayscale + 暗幕 + ぼかし) */
#process{overflow:hidden}
#process>.wrap{position:relative;z-index:2}
#process .rstate-bg{filter:grayscale(1) blur(3px);inset:-3%}
/* 背景画像はすべて白黒(グレースケール) */
#hvideo,.rstate-bg,.rgc-bg,#people .rperson .pph,.eimg-bg{filter:grayscale(1)}
/* Who We Want / Not For You: 画面内に入ったらモノクロ→カラー */
#who .eimg-bg,#notforyou .eimg-bg{transition:transform .8s cubic-bezier(.16,1,.3,1),filter 1.1s ease}
#who .eimg.in-color .eimg-bg,#notforyou .eimg.in-color .eimg-bg{filter:grayscale(0)}
/* スマホ: 大型フルブリード画像のgrayscaleフィルターがスクロールを重くするため、filter自体を無効化(常時カラー=The Place同様)・遷移なし。in-color状態も上書き */
@media(max-width:768px){
  #who .eimg-bg,#notforyou .eimg-bg,
  #who .eimg.in-color .eimg-bg,#notforyou .eimg.in-color .eimg-bg{filter:none;transition:none}
}
#people{background-color:#171717;position:relative}
#people::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(8,6,8,.84),rgba(8,6,8,.9)),url('../images/recruit/20250315-CEL01401-184.webp');
  background-size:cover;background-position:center;filter:grayscale(1)}
#people>*{position:relative;z-index:1}
#who{background:#0B0B0B}
#notforyou{background:#0d0d0d}
#spirits{background:#0B0B0B;position:relative;overflow:hidden}
/* Seven Spirits: ぼかした背景画像(グレースケール+暗幕で可読性確保) */
#spirits::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(rgba(11,11,11,.80),rgba(11,11,11,.90)),url('../images/recruit/20250315-CEL00931-60.webp') center/cover no-repeat;
  filter:blur(8px) grayscale(1);transform:scale(1.3)}
#spirits>.wrap{position:relative;z-index:1}
#timelines{background:#171717}
#requirements{background:#0B0B0B}
#process{background:#1c1c1c}
#english{background:#0B0B0B;position:relative;overflow:hidden}
/* About English: 背景画像(グレースケール+暗幕で可読性確保) */
#english::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(rgba(11,11,11,.74),rgba(11,11,11,.86)),url('../images/recruit/20250315-CEL01250-146.webp') center/cover no-repeat;
  filter:grayscale(1);will-change:transform}
#english>.wrap{position:relative;z-index:1}
#faq{background:#0B0B0B}
#apply{background-color:#070707;position:relative;padding-top:5rem}/* 上余白を story JOIN THE NIGHT(.cta)に合わせる */
/* スマホ: story .cta の実測上余白(143px=padding+cta-in/ceyeのtransform分)に合わせる */
@media(max-width:768px){#apply{padding-top:143px}}
#apply::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),radial-gradient(150% 150% at 100% 0%,rgba(8,6,8,.06) 0%,rgba(8,6,8,.48) 55%,rgba(8,6,8,.92) 100%),linear-gradient(90deg,rgba(8,6,8,.75) 0%,rgba(8,6,8,.3) 38%,transparent 62%),url('../images/recruit/20250315-CEL00922-54.webp');
  background-size:cover;background-position:center;filter:grayscale(1);will-change:transform}
#apply>*{position:relative;z-index:1}
/* story「Join the Night」と全く同じグリッド模様を各セクション背景へ(白線4px間隔/スマホ2px) */
#category::after,#english::after,#apply::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(to right,transparent 0,transparent 3px,rgba(255,255,255,.06) 3px,rgba(255,255,255,.06) 4px),
    repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.06) 3px,rgba(255,255,255,.06) 4px)}
#category::after{z-index:1}
@media(max-width:768px){
  #category::after,#english::after,#apply::after{
    background-image:
      repeating-linear-gradient(to right,transparent 0,transparent 1px,rgba(255,255,255,.06) 1px,rgba(255,255,255,.06) 2px),
      repeating-linear-gradient(to bottom,transparent 0,transparent 1px,rgba(255,255,255,.06) 1px,rgba(255,255,255,.06) 2px)}
}
/* Timeline: 帯(パネル)なし。PCは背景を中央で左右に少し違う色に分割 */
@media(min-width:769px){#timelines{background:linear-gradient(to right,#131313 50%,#1c1c1c 50%)}}
/* Timeline: PCは縦線(●列)を見出し中央に合わせて真ん中揃い（左右カラム対称＋中央配置） */
@media(min-width:861px){
  /* 全幅化して各内容を背景半分(25%/75%)の中心へ */
  #timelines .wrap{max-width:none;padding-left:0;padding-right:0}
  #timelines .tl2{gap:0}
  #timelines .tl2-col{display:flex;flex-direction:column;align-items:center}
  #timelines .tl2-col .rhead{margin-left:auto;margin-right:auto}
  #timelines .tl2-col .rtl{max-width:460px;margin-left:auto;margin-right:auto;width:100%;transform:translateX(-2.5rem)}
  #timelines .rtl-row{grid-template-columns:1fr 48px 1fr}
}
/* Timeline: ラベル・見出しの余白は他セクションと統一(enlabは標準を継承=0.7rem/0.5rem) */
#timelines .jtit{margin-bottom:0.7rem}
#timelines .tl2-col .rhead{margin-bottom:1rem}
/* スマホ: Timeline2カラムを全幅・別色のバンドに */
@media(max-width:860px){
  #timelines{padding:0;background:#131313}
  #timelines .tl2{gap:0}
  #timelines .tl2-col{margin-left:-1.4rem;margin-right:-1.4rem;padding:6rem 1.4rem}
  #timelines .tl2-col:nth-child(1){background:#131313}
  #timelines .tl2-col:nth-child(2){background:#1c1c1c}
}
/* スマホ: Growth/A Night の上下余白を他セクション(6rem)に合わせる。色帯は維持、グラフは詰める */
@media(max-width:768px){
  #timelines .tl2-col .rhead{margin-bottom:1.4rem}
  #timelines .rtl{display:block}
  #timelines .rtl-row{min-height:46px}
  #timelines .rtl-row .what{font-size:14px;line-height:1.35}
  #timelines .rtl-row .when{font-size:13px}
}
/* スマホ: 各セクションの上下余白を A New Category(6rem)に統一 */
@media(max-width:768px){
  #jobs,#people,#spirits,#requirements,#process,#english,#faq{padding-top:6rem;padding-bottom:6rem}
  /* People: カルーセルの .people-vp 下padding(46px)分を相殺し、カード下余白を96pxに */
  #people{padding-bottom:calc(6rem - 46px)}
}
/* 全セクションの上下余白を揃える（#stageの72vhを解除しpadding基準に） */
#stage{min-height:auto}
/* Stage・Categoryの背景画像を削除して黒背景に */
#stage .rstate-bg,#stage .rstate-ov{display:none}
@media(min-width:769px){#category .rstate-bg{background-position:center top}}
/* The Stage: 白背景・黒文字に反転 */
#stage{--w:#100f0d;
  background-color:#fff;
  background-image:radial-gradient(rgba(16,15,13,.10) .5px,transparent .9px);
  background-size:9px 9px}
#stage .rslbl{color:#6f6657}                /* ラベル(gold)を白背景向けに */
/* スマホのみ: 背景のてんてんを細かく(密なグリッド)。Stage/Electionは色も薄く */
@media(max-width:768px){
  #stage{background-image:radial-gradient(rgba(16,15,13,.05) .5px,transparent .9px);background-size:5px 5px}
  #election .rstate-ov{background-image:radial-gradient(rgba(16,15,13,.04) .5px,transparent .9px);background-size:5px 5px}
}
#stage .rstat::after{background:rgba(16,15,13,.18)}  /* 区切り線を黒側に */
#category{background:#050305}
/* リード(大強調)を全て同じ紫に（強調スパン含む） */
#stage .lead p:first-child,#jobs .lead p,#people .lead p,#spirits .lead p:first-child,#english .lead:not(.mu) p:first-child,#apply .lead.mu p,#election .re-h,.rtriple,.rtriple .o,.elead,.elead .o{color:var(--or)}
/* The Stage / The Election のリード文・統計ラベルを指定カラーに */
#stage .lead p:first-child,#election .re-h,#stage .rslbl,#stage .enlab,#election .enlab{color:#289c91}
/* JOBS英語ラベルをApplyボタンの英語(.ae)と同じ11/10pxに */
.rglab{font-size:11px}
@media(max-width:768px){.rglab{font-size:10px}}
/* ボタン・帯（カード）の枠線を削除（Requirements/Spirits/Apply/People） */
.req-card,.req-common,.rsp{border:none}
.rperson .pph::after{border:none}
/* Requirements: 角丸なし＋共通帯を伸ばして左右カラムの下端を揃える */
.req-card,.req-common{border-radius:0}
.req-common{flex:1}
/* English: 本文「50フレーズ…」とクローザー「語学力は…」をPC1行に */
@media(min-width:769px){
  #english .lead:not(.mu) p:last-child,#english .en-hi{white-space:nowrap}
}
/* Apply見出しをPCでも2行に改行 */
#apply .jtit .mbr{display:block;width:100%;height:0}
/* Process注記をスマホ12pxに（本文と統一） */
@media(max-width:768px){.rflow-note{font-size:12px}}

/* ── SHUTTO TRANSLATION WIDGET */
body .stt-lang-select.tr{border-radius:0;color:#ffffff;background:rgba(0,0,0,0);border:.5px solid rgba(245,239,230,.35);top:100px;right:200px}
body .stt-lang-select .stt-text{color:#ffffff}
body .stt-lang-select .stt-select .stt-item{color:#ffffff}
body .stt-lang-select:not(.on):hover .stt-text:after{color:#ffffff}
@media(max-width:768px){
  body .stt-lang-select.tr{top:26px;right:162px}
  body .stt-lang-select .stt-text{padding:8px 26px 8px 16px}
  body .stt-lang-select .stt-text:after{top:8px}
  body .stt-lang-select .stt-select{padding:7px 0 7px 7px}
  body .stt-lang-select .stt-select .stt-item{color:#999}
}

/* ── WEBVIEW OPTIMIZATIONS (LINE, Instagram, Facebook, TikTok, X, Snapchat) */
.is-webview #hcanvas{display:none}
.is-webview .hgrain{animation:none}
.is-webview #hvideo{will-change:auto}
/* hero entrance handled by JS lightweight timeline */
.is-webview #people .rperson .pph{animation:none}
.is-webview #people .people-vp{overflow-x:auto;cursor:default}
.is-webview #people .rperson{transition:none}
.is-webview #people .rperson:hover{transform:none;box-shadow:none}
.is-webview .hlines,.is-webview #hero .hctas{will-change:auto;transform:none}
/* hero height locked via JS for webviews */
.is-webview #people::before{display:none}