/* ==========================================================================
   4P〜エントリー（2回目提出分）
   既存の見出し・本文・吹き出し・金の細罫をそのまま使い、各ページの“あしらい”だけ足す
   ========================================================================== */

/* ---------- 04・05 仕事内容：吹き出しのサブタイトル＋職種名 ---------- */
.bg-num--job{top:calc(var(--header) + 4px);font-size:150px;-webkit-text-stroke:1px #c0a17138}
.bg-num--job::after{content:"JOB"}
.job-title{display:flex;flex-direction:column;align-items:flex-start;margin-top:16px}
.job-voice{display:flex;align-items:flex-end;gap:8px}
.job-voice img{flex:none;width:54px;height:auto}
.bubble--sub{
  margin-bottom:16px;padding:10px 14px;
  font-size:14px;line-height:1.6;letter-spacing:.04em;
  border-radius:6px;border-color:var(--gold);
}
.bubble--sub::after{border-color:var(--gold);left:16px}
.job-title .catch{margin-top:4px}
.tone-navy .bubble--sub{background:#0d2531;color:#fff;border-color:#c0a171b0}
.tone-navy .bubble--sub::after{background:#0d2531;border-color:#c0a171b0}
.quotes--navy li{background:#ffffff0d;color:#fff;border-left-color:var(--gold);box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .job-voice{opacity:0;transform:translateY(10px) scale(.96);transform-origin:left bottom;transition:opacity .5s var(--ease) .2s,transform .7s cubic-bezier(.4,1.5,.5,1) .2s}
  .is-active .job-voice{opacity:1;transform:none}
  .is-active .job-voice img{animation:hop 2s ease-in-out infinite}
}

/* 05：成長ステップ */
.steps{position:relative;display:flex;flex-direction:column;gap:10px;margin:2px 0;padding-left:18px}
.steps::before{content:"";position:absolute;left:4px;top:10px;bottom:10px;border-left:1px dashed var(--gold)}
.steps li{position:relative;padding:10px 14px;background:#fff;box-shadow:0 6px 18px -14px #03172280}
.steps li::before{content:"";position:absolute;left:-18px;top:16px;width:9px;height:9px;background:var(--gold);border-radius:0 50% 50% 50%;transform:rotate(45deg)}
.steps i{display:block;font:400 10px/1.4 var(--serif-en);letter-spacing:.3em;color:var(--gold-d)}
.steps p{font-size:13.5px;line-height:1.8;color:var(--ink)}

/* ---------- 06 働きやすさ：「ないもの」に金の打ち消し線 ---------- */
.nots{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.nots li{position:relative;padding:6px 14px;border:1px solid #c0a17160;font-family:var(--serif);font-weight:600;font-size:13.5px;line-height:1.5;color:#fff}
.nots span{position:relative}
.nots span::after{content:"";position:absolute;left:-4px;right:-4px;top:55%;height:1px;background:var(--gold);transform-origin:left;transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .nots span::after{transform:scaleX(0);transition:transform .6s var(--ease)}
  .is-active .nots li:nth-child(1) span::after{transform:none;transition-delay:1.1s}
  .is-active .nots li:nth-child(2) span::after{transform:none;transition-delay:1.3s}
  .is-active .nots li:nth-child(3) span::after{transform:none;transition-delay:1.5s}
}

/* ---------- 07 裁量 ---------- */
.lead--ink{color:var(--ink);font-size:18px;line-height:1.7;padding-left:14px;border-left:2px solid var(--gold)}
.idea-tags{display:flex;flex-wrap:wrap;gap:6px}
.idea-tags li{padding:4px 12px;border-radius:999px;background:var(--navy);color:var(--base);font-size:11.5px;letter-spacing:.08em}
.idea-tags li::before{content:"+ ";color:var(--gold)}

/* ---------- 08 求める人物像 ---------- */
.who{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.who div{padding:12px 12px 13px;background:#fff;border-top:2px solid var(--gold)}
.who b{display:block;font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:.1em;margin-bottom:4px}
.who p{font-size:12.5px;line-height:1.75}

/* ---------- 09 クロージング：動画と同じ群像を背景に ---------- */
.page--closing{justify-content:flex-end}
.closing-media{position:absolute;inset:0;overflow:hidden}
.closing-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:.32;filter:grayscale(.3) contrast(1.05)}
.closing-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#03172233 0,#031722cc 52%,var(--navy) 72%)}
@media (prefers-reduced-motion:no-preference){
  .closing-media img{transform:scale(1.12);transition:transform 6s ease-out}
  .is-active .closing-media img{transform:scale(1)}
}
.page--closing .page-grid{margin:auto 0 0;gap:30px}
.catch--xl{font-size:31px;line-height:1.6}
.closing-cta{display:flex;flex-direction:column;gap:10px}
.closing-cta .cta--line{color:var(--base)}

/* ---------- 10・11 会社概要／募集要項 ---------- */
.info{border-top:1px solid var(--line)}
.info>div{display:grid;grid-template-columns:5.6em 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.info dt{font-family:var(--serif);font-weight:600;font-size:13px;color:var(--gold-d);letter-spacing:.08em;line-height:1.85}
.info dd{font-size:13.5px;line-height:1.85;color:var(--ink)}
.info a{border-bottom:1px solid var(--gold)}
.info--req>div{padding:11px 0}
.pay+.pay{margin-top:8px}
.pay small{display:block;font-size:11px;color:var(--sub);line-height:1.5}
.pay b{font-family:var(--serif-en);font-weight:400;font-size:22px;letter-spacing:.02em;margin:0 2px;color:var(--ink)}
.benefits{display:flex;flex-direction:column}
.ginza--ink{color:var(--gold-d);opacity:.7;margin-top:12px}
.ginza--ink svg{max-height:64px}
.ginza--ink figcaption{color:var(--gold-d);letter-spacing:.3em}

/* ---------- 12 エントリー ---------- */
.entry-form{display:flex;flex-direction:column;gap:13px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;letter-spacing:.06em;color:#fff}
.req,.opt{font-size:9.5px;line-height:1;padding:4px 6px;letter-spacing:.08em}
.req{background:var(--gold);color:var(--navy)}
.opt{border:1px solid #c0a17170;color:var(--gold)}
.field input,.field textarea,.field select{
  width:100%;padding:11px 12px;border:1px solid #c0a17150;border-radius:0;
  background:#ffffff0a;color:#fff;font:16px/1.5 var(--sans);letter-spacing:.03em;
  -webkit-appearance:none;appearance:none;
  transition:border-color .25s,background-color .25s;
}
.field textarea{resize:vertical;min-height:96px}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.field select option{color:var(--ink)}
.field ::placeholder{color:#f3f4f455}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background-color:#ffffff14}
.field.is-error input{border-color:#e08a7a}
.field .err{font-size:11.5px;color:#f0a596}
.submit{margin-top:6px;width:100%;cursor:pointer}
.form-note{font-size:12px;line-height:1.8;color:var(--gold)}
.form-note:empty{display:none}
.foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:26px;margin-top:6px;border-top:1px solid #c0a17130}
.foot img{width:170px;height:auto;filter:brightness(0) invert(1);opacity:.85}
.foot small{font-size:10px;letter-spacing:.12em;color:#f3f4f480}

/* ---------- PC：章ナビが13項目になるので詰める ---------- */
@media (min-width:900px){
  .chapter-nav{gap:11px}
  .chapter-nav a{font-size:11.5px;gap:14px}
}
@media (min-width:900px) and (max-height:820px){
  .chapter-nav{gap:6px}
  .chapter-nav a{font-size:11px}
}

/* ---------- 画面が低い端末 ---------- */
@media (max-height:760px){
  .job-title{margin-top:10px}
  .bubble--sub{font-size:13px;padding:8px 12px;margin-bottom:14px}
  .job-voice img{width:46px}
  .steps li{padding:8px 12px}
  .steps p{font-size:13px;line-height:1.7}
  .who p{font-size:12px}
  .lead--ink{font-size:16px}
  .catch--xl{font-size:27px}
  .info>div{padding:10px 0}
}
@media (max-width:380px){
  .bubble--sub{font-size:12.5px}
  .who{grid-template-columns:1fr}
  .info>div{grid-template-columns:5em 1fr;gap:8px}
}

/* ---------- 文字量の多いページの調整 ---------- */
.catch--job{font-size:24px;letter-spacing:.03em;white-space:nowrap}
.catch--long{font-size:22.5px;letter-spacing:.03em}
.quotes--row{flex-direction:row;flex-wrap:wrap;gap:6px}
.quotes--row li{font-size:14px;padding:6px 12px}
.quotes--row li:nth-child(2){margin-left:0}
.who{grid-template-columns:1fr;gap:6px}
.who div{display:grid;grid-template-columns:4.6em 1fr;align-items:center;gap:10px;padding:10px 12px;border-top:0;border-left:2px solid var(--gold)}
.who b{font-size:14px;margin:0}
#people .quotes li{font-size:14px;padding:6px 12px}
.page.is-overflow .next-arrow{display:none}
@media (max-width:380px){.catch--job{font-size:21px}.catch--long{font-size:20px}}
#job1 .page-grid,#job2 .page-grid,#people .page-grid{gap:18px}
#job1 .sec-body,#people .sec-body{gap:10px}
#job1 .sec-en,#job2 .sec-en{font-size:50px}
@media (max-height:700px){
  #job1 .sec-en,#job2 .sec-en{font-size:38px}
  #job1 .page-grid,#job2 .page-grid,#people .page-grid{gap:12px}
  #job1 .sec-body,#job2 .sec-body,#people .sec-body{gap:8px;font-size:13px;line-height:1.8}
  .catch--job{font-size:21px}
  .bubble--sub{margin-bottom:12px}
  .steps{gap:6px}
  .who div{padding:8px 10px}
  #people .quotes li,.quotes--row li{font-size:13px;padding:5px 10px}
  #job1 .sec-body .em,#job2 .sec-body .em,#people .sec-body .em{font-size:14.5px;padding-top:12px}
}

/* ---------- スライド制御：transform で動かす（JSと対） ---------- */
.slider{overflow:hidden;scroll-snap-type:none;scroll-behavior:auto}
.track{will-change:transform;transition:transform .75s cubic-bezier(.22,1,.36,1);backface-visibility:hidden}
.track.is-dragging{transition:none}
.page{height:var(--ph,100dvh);scroll-snap-align:none;scroll-snap-stop:normal}
@media(prefers-reduced-motion:reduce){.track{transition:none}}

.page.is-far{visibility:hidden}
/* 動く背景の上で毎フレームぼかし計算をしないよう、ヘッダーは不透明度で処理 */
.site-header,body.is-scrolled .site-header{-webkit-backdrop-filter:none;backdrop-filter:none}
body.is-scrolled .site-header{background:rgba(243,244,244,.96)}
body.is-scrolled[data-tone="navy"] .site-header{background:rgba(3,23,34,.96)}