@charset "utf-8";
/* ============================================================
   SHIP / sections.css — 共通セクションパーツ
   面の色は必ず交互（sec--dark / sec--light）。白背景を連続させない
   ============================================================ */

/* ---------- セクションの器 ---------- */
.sec{ position:relative; padding-block:clamp(72px,10vw,120px); }
.sec--dark{ background:var(--navy-950); color:var(--white); }
.sec--mid{ background:var(--navy-900); color:var(--white); }
.sec--navy{ background:var(--navy); color:var(--white); }
.sec--light{ background:var(--paper); color:var(--ink); }
.sec--heat{ background:var(--heat); color:var(--white); }

/* 斜めの断ち（角度は全セクション統一） */
.sec--slant{
  clip-path:polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
  /* 隣接セクションに全量重ねる。半量だと断ち際に body 色のくさびが露出する */
  margin-block:calc(var(--slant) * -1);
  padding-block:calc(clamp(72px,10vw,120px) + var(--slant));
  position:relative; z-index:1;
}

/* ---------- セクション見出し（No + 英字 + 和文 + サブ） ---------- */
.sec-head{ position:relative; margin-bottom:clamp(36px,5vw,60px); }
.sec-head__no{
  font-family:var(--display); font-size:clamp(1.5rem,4vw,2.5rem);
  line-height:1; letter-spacing:.04em; color:var(--heat);
}
.sec-head__en{
  font-family:var(--display);
  font-size:clamp(3rem,11vw,8rem); line-height:.86;
  letter-spacing:.01em; margin-left:-.03em;
  color:rgba(255,255,255,.13);
}
.sec--light .sec-head__en{ color:rgba(10,15,23,.1); }
.sec--heat .sec-head__en{ color:rgba(255,255,255,.24); }
.sec-head__ja{
  font-weight:900; font-feature-settings:"palt" 1;
  font-size:clamp(1.5rem,4.6vw,2.5rem); line-height:1.4;
  letter-spacing:-.015em; margin-top:12px;
  padding-top:20px; border-top:var(--rule) solid var(--heat);
  display:inline-block;
}
.sec-head__sub{
  margin-top:16px; font-weight:700;
  font-size:clamp(.9375rem,1.9vw,1.0625rem); line-height:1.75;
  max-width:44rem;
}
.sec--dark .sec-head__sub,.sec--mid .sec-head__sub{ color:var(--navy-300); }
.sec--light .sec-head__sub{ color:#4A5464; }

/* ---------- 本文 ---------- */
.prose{ max-width:44rem; }
.prose p + p{ margin-top:1.4em; }
.prose strong{ font-weight:900; color:var(--heat); }
.sec--light .prose{ color:#22293A; }
/* 朱の面の上は白文字が3.33:1でAA未満のため、本文を太らせて可読性を確保する */
.sec--heat .prose,.sec--heat .card__d,.sec--heat .ticks li{ font-weight:700; }
.sec--heat .sec-head__sub{ font-weight:900; }

/* ---------- 2カラム ---------- */
.duo{ display:grid; gap:clamp(28px,5vw,56px); align-items:start; }
@media (min-width:900px){ .duo{ grid-template-columns:1fr 1fr; } .duo--wide{ grid-template-columns:1.15fr .85fr; } }

/* ---------- カード ---------- */
.cards{ display:grid; gap:2px; background:rgba(255,255,255,.16); }
@media (min-width:768px){ .cards--3{ grid-template-columns:repeat(3,1fr); } .cards--4{ grid-template-columns:repeat(4,1fr); } .cards--2{ grid-template-columns:repeat(2,1fr); } }
.card{ background:var(--navy-950); padding:clamp(24px,3.4vw,36px); }
.sec--light .cards{ background:rgba(10,15,23,.14); }
.sec--light .card{ background:var(--paper); }
.card__no{ font-family:var(--display); font-size:1.75rem; line-height:1; color:var(--heat); }
.card__t{ font-weight:900; font-size:1.125rem; line-height:1.5; margin-top:14px; }
.card__d{ margin-top:12px; font-size:.9375rem; line-height:1.85; }
.sec--dark .card__d,.sec--mid .card__d{ color:var(--navy-300); }
.sec--light .card__d{ color:#4A5464; }
.card__icon{ width:38px; height:38px; margin-bottom:18px; color:var(--heat); }

/* ---------- ステップ（横スクロール可） ---------- */
.steps{ display:grid; gap:2px; background:rgba(255,255,255,.16); }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--navy-950); padding:clamp(22px,3vw,32px); position:relative; }
.step__no{
  font-family:var(--display); font-size:clamp(2rem,5vw,3.25rem); line-height:1;
  color:var(--heat);
}
.step__t{ font-weight:900; font-size:1.125rem; margin-top:10px; }
.step__d{ margin-top:10px; font-size:.875rem; line-height:1.8; color:var(--navy-300); }
.step__hard{
  margin-top:14px; padding-top:14px; border-top:3px solid rgba(255,255,255,.26);
  font-size:.8125rem; line-height:1.7; color:var(--white);
}
.step__hard b{ color:var(--heat); font-weight:900; }

/* ---------- 定義リスト（会社概要・募集要項） ---------- */
.dl{ border-top:var(--rule) solid currentColor; }
.dl__row{ display:grid; gap:4px; padding:18px 0; border-bottom:3px solid rgba(255,255,255,.24); }
.sec--light .dl__row{ border-bottom-color:rgba(10,15,23,.16); }
@media (min-width:768px){ .dl__row{ grid-template-columns:15rem 1fr; gap:24px; } }
.dl__k{ font-family:var(--ui); font-size:.8125rem; font-weight:700; letter-spacing:.1em; color:var(--heat); }
/* 明面の上では朱がコントラスト不足（2.9:1）になるため濃色に落とす */
.sec--light .dl__k{ color:#8E2408; }
.dl__v{ font-size:.9375rem; line-height:1.8; }

/* ---------- リスト ---------- */
.ticks li{ position:relative; padding-left:30px; margin-top:12px; font-size:.9375rem; line-height:1.8; }
.ticks li::before{ content:""; position:absolute; left:0; top:.7em; width:18px; height:5px; background:var(--heat); }
.sec--heat .ticks li::before{ background:var(--white); }
.sec--heat .ticks.crosses li::before{ background:var(--navy-950); }
.crosses li::before{ background:var(--navy-500); }

/* ---------- 準備中ボックス ---------- */
.pending{
  border:3px solid rgba(255,255,255,.34);
  padding:clamp(32px,5vw,56px); text-align:center;
}
.sec--light .pending{ border-color:rgba(10,15,23,.22); }
.pending__t{ font-weight:900; font-size:clamp(1.125rem,3vw,1.5rem); }
.pending__d{ margin-top:14px; font-size:.9375rem; line-height:1.9; color:var(--navy-300); }
.sec--light .pending__d{ color:#4A5464; }
.pending__wage{
  display:inline-block; margin-top:24px; padding:14px 24px;
  border:var(--rule) solid var(--heat);
  font-weight:900; font-size:clamp(1rem,2.6vw,1.25rem);
}

/* ---------- メンバー ---------- */
.member{ display:grid; gap:clamp(24px,4vw,48px); align-items:start; }
@media (min-width:900px){ .member{ grid-template-columns:22rem 1fr; } }
.member__fig{ background:var(--navy); padding:32px; display:grid; place-items:center; }
.member__fig img,.member__fig svg{ width:100%; max-width:220px; height:auto; }
.member__role{ font-family:var(--ui); font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--heat); }
.member__name{ font-weight:900; font-size:clamp(1.5rem,4vw,2.25rem); line-height:1.2; margin-top:8px; }
.member__lead{ margin-top:14px; font-weight:700; font-size:1.0625rem; line-height:1.7; }
.qa{ margin-top:28px; }
.qa__q{ font-weight:900; font-size:1rem; line-height:1.6; padding-left:34px; position:relative; }
.qa__q::before{ content:"Q"; position:absolute; left:0; top:0; font-family:var(--display); color:var(--heat); font-size:1.25rem; }
.qa__a{ margin:10px 0 26px; padding-left:34px; font-size:.9375rem; line-height:1.9; color:var(--navy-300); }
.sec--light .qa__a{ color:#4A5464; }
.grid-people{ display:grid; gap:2px; background:rgba(255,255,255,.16); }
@media (min-width:600px){ .grid-people{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid-people{ grid-template-columns:repeat(4,1fr); } }
.person{ background:var(--navy-950); padding:24px; text-align:center; }
.person__fig{ background:var(--navy); padding:18px; margin-bottom:16px; }
.person__fig img,.person__fig svg{ width:100%; max-width:110px; margin-inline:auto; height:auto; }
.person__n{ font-weight:900; font-size:1rem; }
.person__r{ font-family:var(--ui); font-size:.6875rem; font-weight:700; letter-spacing:.12em; color:var(--heat); margin-top:6px; }
.person__c{ font-size:.8125rem; line-height:1.7; color:var(--navy-300); margin-top:10px; }

/* ---------- 図解の器 ---------- */
.figbox{ background:var(--navy-950); border:3px solid rgba(255,255,255,.22); padding:0; overflow:hidden; }
/* 図解画像は枠いっぱいに。イラスト等を並べる用途では余白を戻す */
.figbox--pad{ padding:clamp(20px,3vw,36px); }
.sec--light .figbox{ background:var(--navy-950); border-color:rgba(10,15,23,.24); }
.figbox img{ width:100%; height:auto; min-width:0; }

/* ---------- CTAブロック ---------- */
.cta{ text-align:center; }
.cta__h{
  font-weight:900; font-feature-settings:"palt" 1;
  font-size:clamp(1.75rem,7vw,4.5rem); line-height:1.15; letter-spacing:-.02em;
}
.cta__d{ margin-top:20px; font-weight:700; font-size:clamp(.9375rem,2vw,1.125rem); }
.cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }

/* ---------- 下層ページのページヘッダー ---------- */
.phead{
  position:relative; background:var(--navy-950);
  padding:calc(80px + clamp(48px,8vw,90px)) 0 clamp(48px,8vw,90px);
  overflow:hidden;
}
.phead__en{
  font-family:var(--display); font-size:clamp(3.5rem,15vw,11rem); line-height:.82;
  color:rgba(255,255,255,.1); letter-spacing:.01em; margin-left:-.03em;
}
.phead__ja{
  font-weight:900; font-feature-settings:"palt" 1;
  font-size:clamp(1.75rem,6vw,3.75rem); line-height:1.22; letter-spacing:-.02em;
  margin-top:-.2em;
}
.phead__lead{ margin-top:22px; padding-left:18px; border-left:var(--rule) solid var(--heat); font-weight:700; font-size:clamp(.9375rem,2vw,1.125rem); line-height:1.75; max-width:40rem; }

/* ---------- スクロール出現 ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .45s var(--ease), transform .45s var(--ease); }
[data-reveal][data-d="1"].is-in{ transition-delay:.06s }
[data-reveal][data-d="2"].is-in{ transition-delay:.12s }
[data-reveal][data-d="3"].is-in{ transition-delay:.18s }
[data-reveal][data-d="4"].is-in{ transition-delay:.24s }

/* 1文字出現 */
.split .ch{ display:inline-block; }
.js .split .ch{ opacity:0; transform:translateY(24px); }
.split.is-in .ch{ opacity:1; transform:none; transition:opacity .34s var(--ease), transform .34s var(--ease); }

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].is-in,.split .ch{ opacity:1!important; transform:none!important; transition:none!important; }
}

/* ============================================================
   下層ページMV（.phero）— 見出しは画像に焼き込み済み
   比率を画像に固定し、どの画面幅でも文字が切れないようにする
   ============================================================ */
.phero{
  position:relative;
  background:var(--navy-950);
  padding-top:var(--hdr-h,74px);
}
.phero__stage{
  position:relative; overflow:hidden;
  aspect-ratio:1600 / 700;
}
@media (max-width:767px){ .phero__stage{ aspect-ratio:4 / 5; } }
.phero__stage img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.phero__stage img{ animation:pheroZoom 9s linear forwards; }
@keyframes pheroZoom{ from{ transform:scale(1) } to{ transform:scale(1.035) } }

/* パンくず兼CTA帯 */
.phero__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px var(--pad);
  border-top:var(--rule) solid var(--white);
  background:var(--navy-950);
}
.crumb{ display:flex; gap:10px; align-items:center; font-family:var(--ui); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-300); }
.crumb a{ color:var(--white); }
.crumb span{ color:var(--heat); }
@media (hover:hover){ .crumb a:hover{ color:var(--heat); } }

@media (prefers-reduced-motion:reduce){ .phero__stage img{ animation:none; } }

/* ============================================================
   スクロール連動の横スクロールセクション
   縦スクロールを横移動に変換する。SPでは縦積みにフォールバック
   ============================================================ */
.hscroll{ position:relative; }
.hscroll__pin{ position:sticky; top:var(--hdr-h,74px); overflow:hidden; }
.hscroll__track{ display:flex; gap:2px; will-change:transform; }
.hscroll__track > *{ flex:0 0 auto; }
@media (min-width:900px){
  .js .hscroll{ height:320vh; }
  .js .hscroll__pin{ height:calc(100svh - var(--hdr-h,74px)); display:flex; align-items:center; }
  .js .hscroll__track > *{ width:min(38vw,460px); }
}
@media (max-width:899px), (prefers-reduced-motion:reduce){
  .hscroll{ height:auto!important; }
  .hscroll__pin{ position:static; height:auto!important; }
  .hscroll__track{ flex-direction:column; }
  .hscroll__track > *{ width:auto; }
}