/* =========================================================
   株式会社RISE 荷揚げ求人LP（明るい版）
   方針：白い地・大きな現場写真・読みやすい整理。
         濃い色は「仕事の中身」の章の1か所だけ。飾りの線や縞は使わない。
   ========================================================= */
:root{
  color-scheme:light;
  --bg:#f7f8fa;        /* ページの地 */
  --white:#ffffff;     /* 面・カード */
  --ink:#14202b;       /* 文字・濃い面 */
  --text:#33404c;      /* 本文 */
  --sub:#52606d;       /* 補助の文字 */
  --line:#dce2e7;      /* 区切り線（必要な所だけ） */
  --accent:#ff9f32;    /* 朝日の橙 */
  --accent-d:#f08a14;
  --accent-bg:#fff4e6; /* 橙のごく薄い面 */
  --accent-ink:#8a4b00;
  --on-dark:rgba(255,255,255,.84);
  --f-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --f-num:"Outfit","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --top:60px;
  --gutter:20px;
  --lift:0px;
  --r-photo:12px;
  --r-card:16px;
  --r-btn:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (min-width:1000px){ :root{ --top:72px; --gutter:48px; --r-photo:20px; } }
@media (min-width:1200px){ :root{ --lift:72px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--top) + 8px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-jp); font-weight:400; font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }

/* ---------- 背景にうっすら：朝日の光（下へ読むほど昇る）と、石膏ボードの紙の質感 ---------- */
body::before,body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; }
body::before{
  background:
    radial-gradient(75vmax 60vmax at 86% calc(108% - var(--p, 0) * 118%), rgba(255,159,50,.26), rgba(255,159,50,0) 62%),
    radial-gradient(60vmax 46vmax at 4% 10%, rgba(130,175,210,.2), rgba(130,175,210,0) 60%);
}
body::after{ background:url("img/board-paper.webp") center/512px repeat; opacity:.38; mix-blend-mode:multiply; }
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; }
.ib{ display:inline-block; }
.num{ font-family:var(--f-num); font-weight:600; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.skip{ position:absolute; left:-999px; top:0; background:var(--accent); color:var(--ink); padding:.6em 1em; z-index:100; font-weight:700; border-radius:0 0 8px 0; }
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--accent-d); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(1120px, 100% - var(--gutter) * 2 - var(--lift) * 2); margin-inline:auto; }
.wrap--narrow{ width:min(800px, 100% - var(--gutter) * 2 - var(--lift) * 2); }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:52px; padding:8px 24px; border:1px solid transparent; border-radius:var(--r-btn); cursor:pointer;
  font:700 16px/1.3 var(--f-jp); letter-spacing:.02em; text-decoration:none; text-align:center; white-space:nowrap;
  transition:background-color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.btn small{ font-size:12px; font-weight:500; letter-spacing:0; white-space:normal; }
.btn small.num{ font-size:17px; font-weight:600; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:none; }
.btn--primary{ background:var(--accent); color:var(--ink); }
.btn--primary:hover{ background:#ffad4f; box-shadow:0 8px 20px rgba(255,159,50,.35); }
.btn--line{ background:var(--white); color:var(--ink); border-color:#c3ccd4; }
.btn--line:hover{ border-color:var(--ink); }
.btn--white{ background:var(--white); color:var(--ink); border-color:#c3ccd4; }
.btn--white:hover{ border-color:var(--ink); }
.btn--green{ background:#06c755; color:#fff; }
.btn--sm{ min-height:40px; padding:6px 16px; font-size:14px; }
.btn--xl{ min-height:76px; padding:12px 28px; font-size:18px; }
.btn[hidden]{ display:none; }

/* ---------- 上の帯 ---------- */
.top{
  position:fixed; inset:0 0 auto 0; height:var(--top); z-index:50;
  display:flex; align-items:center; gap:20px; padding:0 var(--gutter);
  background:rgba(255,255,255,.92); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
}
.top__logo{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; color:var(--sub); font-size:13px; font-weight:700; }
.top__logo img{ width:auto; height:18px; }
.top__nav{ display:none; gap:28px; font-size:15px; font-weight:700; color:var(--ink); }
.top__nav a{ text-decoration:none; padding:8px 0; border-bottom:2px solid transparent; transition:border-color .18s; }
.top__nav a:hover{ border-color:var(--accent); }
@media (min-width:1000px){
  .top__logo img{ height:22px; }
  .top__nav{ display:flex; }
}

/* ---------- 右端の階の表示（パソコンだけ） ---------- */
.lift{ display:none; }
@media (min-width:1200px){
  .lift{
    display:block; position:fixed; z-index:40; right:16px; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:12px; padding:8px 0;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .lift a{
    display:flex; align-items:center; justify-content:flex-end; gap:8px; height:30px; padding:0 14px 0 12px; position:relative;
    text-decoration:none; color:#8a96a3; font-size:12px; font-weight:700; white-space:nowrap;
  }
  .lift a b{ font:600 13px/1 var(--f-num); min-width:1.6em; text-align:right; }
  .lift a span{ max-width:0; overflow:hidden; opacity:0; transition:max-width .25s var(--ease), opacity .2s; }
  .lift a:hover span,.lift a:focus-visible span{ max-width:6em; opacity:1; }
  .lift a:hover{ color:var(--ink); }
  .lift a.is-on{ color:var(--ink); }
  .lift a.is-on::after{ content:""; position:absolute; right:4px; top:7px; bottom:7px; width:3px; border-radius:2px; background:var(--accent); }
}

/* ---------- 共通：章 ---------- */
main{ display:block; }
.sec{ padding-block:clamp(60px,8vw,104px); }
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--sub); }
.eyebrow b{ font:600 13px/1 var(--f-num); color:var(--ink); background:var(--accent); padding:5px 9px; border-radius:6px; }
.h2{ margin-top:14px; color:var(--ink); font-weight:900; font-size:clamp(30px,4.2vw,52px); line-height:1.3; letter-spacing:.01em; text-wrap:balance; }
.h2--xl{ font-size:clamp(34px,6vw,72px); line-height:1.2; }
.h3{ color:var(--ink); font-weight:900; font-size:22px; line-height:1.4; }
.lead{ margin-top:16px; max-width:40em; font-size:clamp(16px,1.4vw,18px); }

/* ---------- GL：最初の画面（明るく動くグラフィック＋空を抜いた写真＋大きなRISE） ---------- */
.hero{
  position:relative; overflow:clip; isolation:isolate; padding-top:var(--top);
  /* WebGL が動かない端末では、このグラデーションがそのまま背景になる */
  background:
    radial-gradient(55% 65% at 76% 64%, #ffb25e 0%, rgba(255,178,94,0) 72%),
    radial-gradient(45% 55% at 94% 26%, #ffd5a8 0%, rgba(255,213,168,0) 70%),
    linear-gradient(115deg, #eaf3ff 0%, #fff8f1 46%, #ffe7cf 100%);
}
.hero__gl{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; display:block; opacity:0; transition:opacity 1.2s ease; }
.hero__gl.is-on{ opacity:1; }
.hero::after{ content:""; position:absolute; inset:auto 0 0 0; height:90px; z-index:-1; background:linear-gradient(0deg, rgba(247,248,250,.9), rgba(247,248,250,0)); pointer-events:none; }
.hero__in{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  grid-template-areas:"label" "title" "art" "lead" "facts" "cta";
  padding:20px var(--gutter) 40px;
}
.hero__label{ grid-area:label; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:14px; font-weight:700; color:var(--ink); }
.hero__label b{ color:#fff; background:var(--ink); padding:3px 10px; border-radius:6px; }
.hero__title{ grid-area:title; container-type:inline-size; margin-top:10px; color:var(--ink); font-weight:900; letter-spacing:-.01em; }
.hero__title .l{ display:block; overflow:hidden; line-height:1.2; white-space:nowrap; padding-bottom:.04em; }
.hero__title .l--sm{ line-height:1.5; }
.hero__title .l > span{ display:inline-block; }
.hero__lead{ grid-area:lead; margin-top:4px; font-size:16px; font-weight:500; color:var(--ink); max-width:30em; }
.hero__cta{ grid-area:cta; display:grid; grid-template-columns:1.2fr 1fr; gap:12px; margin-top:20px; }
.hero__cta .btn{ padding-inline:10px; }
.facts{
  grid-area:facts; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin-top:18px; padding:16px 18px;
  background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.85); border-radius:var(--r-card);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 30px rgba(170,90,20,.10);
}
.facts li{ display:flex; flex-direction:column; gap:2px; }
.facts small{ font-size:13px; font-weight:500; color:var(--sub); }
.facts b{ color:var(--ink); font-size:16px; font-weight:700; line-height:1.3; }
.facts .num{ font-size:clamp(20px,5.6vw,30px); font-weight:600; margin-right:2px; }

/* 写真と大きなRISE：スクロールとマウスで少しずつずれて、奥行きが出る */
.hero__art{ grid-area:art; position:relative; height:min(60svh, 480px); margin:6px calc(var(--gutter) * -1) 0; pointer-events:none; }
/* スマホ：RISEの文字の後ろに必ず橙の光を敷き、白い文字が見えるようにする */
.hero__art::before{ content:""; position:absolute; left:50%; top:13%; width:112%; height:40%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(255,150,52,.95), rgba(255,170,90,.55) 55%, rgba(255,190,120,0)); filter:blur(8px); }
.hero__word{
  position:absolute; left:50%; top:13%; width:86%; max-width:none; height:auto;
  transform:translate(-50%,-50%) translate3d(calc(var(--mx, 0) * -16px), calc(var(--hp, 0) * 70px), 0);
}
.hero__cut{ position:absolute; inset:0; display:block; transform:translate3d(calc(var(--mx, 0) * 10px), calc(var(--hp, 0) * -60px), 0); }
.hero__cut img{
  position:absolute; bottom:0; left:50%; height:76%; width:auto; max-width:none; transform:translateX(-47%);
  filter:drop-shadow(0 26px 30px rgba(20,32,43,.20));
  -webkit-mask-image:linear-gradient(0deg, transparent 0, #000 14%); mask-image:linear-gradient(0deg, transparent 0, #000 14%);
}
@media (min-width:1000px){
  .hero{ min-height:min(100svh, 920px); }
  .hero__in{
    grid-template-columns:minmax(0,44fr) minmax(0,56fr); column-gap:40px;
    grid-template-rows:1fr auto auto auto auto auto 1fr;
    grid-template-areas:". art" "label art" "title art" "lead art" "cta art" "facts art" ". art";
    max-width:1440px; margin-inline:auto; padding:24px calc(var(--gutter) + var(--lift)) 56px var(--gutter);
    min-height:calc(min(100svh, 920px) - var(--top));
  }
  .hero__label,.hero__title,.hero__lead,.hero__cta,.facts{ position:relative; z-index:2; }
  .hero__label{ font-size:15px; }
  .hero__title{ margin-top:16px; }
  .hero__lead{ margin-top:18px; font-size:17px; }
  .hero__cta{ grid-template-columns:auto auto; justify-content:start; margin-top:26px; }
  .hero__cta .btn{ padding-inline:28px; }
  .facts{ grid-template-columns:auto auto; justify-content:start; gap:16px 40px; margin-top:28px; padding:18px 24px; width:fit-content; }
  .facts b{ white-space:nowrap; }
  /* 写真と大きなRISEは右の欄の中に収める（左の文字と重ならない） */
  .hero__art{ grid-area:art; position:relative; z-index:1; height:auto; margin:0; align-self:stretch; container-type:size; }
  .hero__art::before{ display:none; }
  .hero__word{ left:50%; top:30%; width:112%; filter:drop-shadow(0 18px 40px rgba(255,138,40,.35)); }
  .hero__cut img{ left:-6cqw; right:auto; height:min(100cqh, 88cqw); transform:none; -webkit-mask-image:linear-gradient(0deg, transparent 0, #000 9%); mask-image:linear-gradient(0deg, transparent 0, #000 9%); }
}

/* 最初の1回だけ：見出しが下から上がり、写真がせり上がり、RISEが浮かび上がる */
@media (prefers-reduced-motion:no-preference){
  .hero__title .l:nth-child(1) > span{ animation:rise .7s var(--ease) both; }
  .hero__title .l:nth-child(2) > span{ animation:rise .8s var(--ease) .12s both; }
  .hero__cut img{ animation:cutIn 1.1s var(--ease) .15s both; }
  .hero__word{ animation:wordIn 1.4s var(--ease) both; }
}
@keyframes rise{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes cutIn{ from{ opacity:0; translate:0 7%; } to{ opacity:1; translate:0 0; } }
@keyframes wordIn{ from{ opacity:0; } to{ opacity:1; } }
/* ---------- 1F：働き方と条件 ---------- */
.plans{ display:grid; gap:16px; margin-top:32px; }
@media (min-width:860px){ .plans{ grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; } }
.plan{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(22px,3vw,36px); }
.plan__kind{ display:inline-block; font-size:13px; font-weight:700; color:var(--accent-ink); background:var(--accent-bg); padding:3px 10px; border-radius:6px; }
.plan h3{ margin-top:12px; color:var(--ink); font-size:clamp(20px,2.2vw,26px); font-weight:900; line-height:1.4; }
.plan__pay{ margin-top:16px; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; color:var(--ink); line-height:1.1; }
.plan__pay small{ font-size:15px; font-weight:700; }
.plan__pay b{ font-size:clamp(40px,5vw,56px); font-weight:600; }
.plan__pay span{ font-size:17px; font-weight:700; }
.plan__note{ margin-top:10px; font-size:14px; line-height:1.6; }
.plan dl{ margin-top:20px; }
.plan dl div{ display:grid; grid-template-columns:5em 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.6; }
.plan dt{ font-weight:700; color:var(--sub); }
.plan dd{ color:var(--ink); font-weight:500; }
.checks{ display:grid; gap:14px 28px; margin-top:28px; }
@media (min-width:640px){ .checks{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .checks{ grid-template-columns:repeat(4,auto); justify-content:space-between; } }
.checks li{ position:relative; padding-left:30px; font-size:14px; line-height:1.6; }
.checks li::before{
  content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2314202b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.checks b{ display:block; color:var(--ink); font-size:16px; font-weight:700; }

/* 報酬の目安 */
.sim{ display:grid; gap:24px; margin-top:clamp(40px,6vw,72px); background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(22px,3.4vw,44px); }
.sim[hidden]{ display:none; }
@media (min-width:900px){ .sim{ grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,56px); align-items:stretch; } }
.sim__tag{ display:inline-block; font-size:13px; font-weight:700; color:var(--accent-ink); background:var(--accent-bg); padding:3px 10px; border-radius:6px; }
.sim h3{ margin-top:10px; color:var(--ink); font-size:clamp(22px,2.8vw,32px); font-weight:900; line-height:1.4; }
.sim__desc{ margin-top:6px; font-size:15px; }
.seg{ border:0; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; min-width:0; }
.seg legend,.slide > span:first-child{ padding:0; margin-bottom:8px; color:var(--ink); font-size:15px; font-weight:700; }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; inset:0; }
.seg span{ display:block; text-align:center; padding:12px 2px; font-size:12px; border:1.5px solid var(--line); border-radius:12px; color:var(--ink); font-weight:700; transition:border-color .15s, background-color .15s; }
.seg span b{ font-size:clamp(16px,2.2vw,20px); margin-right:1px; }
@media (max-width:520px){ .seg{ gap:6px; } .seg span{ white-space:nowrap; font-size:10px; padding:12px 0; letter-spacing:-.02em; } .seg span b{ font-size:14px; margin-right:0; } }
.seg span small{ display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--sub); }
.seg input:checked + span{ border-color:var(--accent-d); background:var(--accent-bg); }
.seg input:focus-visible + span{ outline:3px solid var(--accent-d); outline-offset:2px; }
.slide{ display:block; margin-top:22px; }
.slide > span:first-child{ display:flex; align-items:baseline; gap:4px; }
.slide output{ margin-left:auto; font-size:26px; color:var(--ink); }
.slide input{ -webkit-appearance:none; appearance:none; display:block; width:100%; height:32px; margin:0; background:transparent; cursor:pointer; }
.slide input::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--accent) var(--v,50%), #e3e8ed var(--v,50%)); }
.slide input::-moz-range-track{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--accent) var(--v,50%), #e3e8ed var(--v,50%)); }
.slide input::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%; background:var(--white); border:3px solid var(--accent-d); box-shadow:0 2px 6px rgba(20,32,43,.2); }
.slide input::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--white); border:3px solid var(--accent-d); box-shadow:0 2px 6px rgba(20,32,43,.2); }
.slide__ends{ display:flex; justify-content:space-between; padding:0 8px; font:500 13px/1 var(--f-num); color:var(--sub); }
.slide__ends i{ font-style:normal; }
.slide__note{ margin-top:10px; padding:8px 12px; border-radius:8px; background:var(--accent-bg); color:var(--accent-ink); font-size:13px; font-weight:700; line-height:1.6; }
.sim__out{ background:var(--accent-bg); border-radius:12px; padding:clamp(22px,3vw,36px); display:flex; flex-direction:column; justify-content:center; }
.sim__label{ color:var(--ink); font-size:15px; font-weight:700; }
.sim__num{ display:flex; align-items:baseline; gap:6px; margin-top:4px; color:var(--ink); line-height:1.1; }
.sim__num b{ font-size:clamp(52px,7.4vw,88px); font-weight:600; }
.sim__num span{ font-size:20px; font-weight:700; }
.sim__formula{ margin-top:8px; color:var(--ink); font-size:15px; font-weight:500; }
.sim__fine{ margin-top:18px; font-size:13px; line-height:1.7; color:var(--text); }

/* ---------- 2F：仕事（このページで1か所だけの濃い色） ---------- */
.job{ background:var(--ink); color:#fff; }
.job .eyebrow{ color:var(--on-dark); }
.job .h2{ color:#fff; }
.job .lead{ color:var(--on-dark); }
.scrolly{ margin-top:36px; }
.scrolly__stage{ display:none; }
.scrolly__steps{ display:grid; gap:44px; width:min(560px, 100% - var(--gutter) * 2); margin-inline:auto; }
.step picture{ display:block; overflow:hidden; border-radius:var(--r-photo); aspect-ratio:4/3; background:#22303c; }
.step picture img{ width:100%; height:100%; object-fit:cover; }
.step[data-i="2"] picture img{ object-position:16% 50%; }
.step__no{ margin-top:18px; color:var(--accent); font-size:15px; }
.step h3{ margin-top:2px; color:#fff; font-size:clamp(34px,9vw,44px); font-weight:900; line-height:1.25; }
.step > p:last-child{ margin-top:8px; color:var(--on-dark); }
@media (min-width:900px){
  .scrolly{
    display:grid; grid-template-columns:minmax(0,54fr) minmax(0,46fr); column-gap:clamp(40px,5vw,80px);
    width:min(1240px, 100% - var(--gutter) * 2 - var(--lift) * 2); margin:56px auto 0;
  }
  .scrolly__stage{
    display:block; position:sticky; top:calc(var(--top) + 28px); align-self:start;
    height:min(calc(100svh - var(--top) - 56px), 700px); border-radius:var(--r-photo); overflow:hidden; background:#22303c;
  }
  .scrolly__frames picture{ position:absolute; inset:0; opacity:0; transition:opacity .22s linear; }
  .scrolly__frames picture.is-on{ opacity:1; }
  .scrolly__frames img{ width:100%; height:100%; object-fit:cover; }
  .scrolly__frames picture[data-i="0"] img{ object-position:62% 50%; }
  .scrolly__frames picture[data-i="2"] img{ object-position:22% 40%; }
  .scrolly__frames picture[data-i="3"] img{ object-position:40% 50%; }
  .scrolly__bars{ position:absolute; z-index:2; inset:14px 14px auto 14px; display:flex; gap:6px; }
  .scrolly__bars i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.45); transition:background-color .2s; }
  .scrolly__bars i.is-on{ background:#fff; }
  .scrolly__stage::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,32,43,.38), rgba(20,32,43,0) 14%, rgba(20,32,43,0) 74%, rgba(20,32,43,.55)); pointer-events:none; }
  .scrolly__no{ position:absolute; z-index:2; left:20px; bottom:14px; display:flex; align-items:baseline; gap:8px; color:#fff; }
  .scrolly__no b{ font-size:40px; font-weight:600; }
  .scrolly__no span{ font-size:15px; opacity:.85; }
  .scrolly__steps{ display:block; width:auto; margin:0; }
  .step{ min-height:74svh; display:flex; flex-direction:column; justify-content:center; opacity:.32; transition:opacity .22s linear; }
  .step.is-on{ opacity:1; }
  .step picture{ display:none; }
  .step__no{ margin-top:0; font-size:17px; }
  .step h3{ font-size:clamp(44px,5.4vw,76px); line-height:1.2; }
  .step > p:last-child{ margin-top:14px; max-width:24em; font-size:17px; }
}
.skills{ display:grid; gap:24px; margin-top:clamp(48px,7vw,88px); }
@media (min-width:860px){ .skills{ grid-template-columns:repeat(3,1fr); gap:40px; } }
.skills li{ padding-top:18px; border-top:1px solid rgba(255,255,255,.28); }
.skills h3{ color:#fff; font-size:22px; font-weight:900; line-height:1.4; }
.skills p{ margin-top:6px; color:var(--on-dark); font-size:15px; }
.aside{ margin-top:36px; color:var(--accent); font-size:clamp(17px,2vw,22px); font-weight:700; }

/* ---------- 3F：正直な話 ---------- */
.honest,.faq{ background:rgba(255,255,255,.62); }
.truths{ margin-top:36px; counter-reset:t; border-bottom:1px solid var(--line); }
.truths li{ counter-increment:t; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; padding:24px 0; border-top:1px solid var(--line); }
.truths li::before{ content:counter(t,decimal-leading-zero); font:600 15px/2.1 var(--f-num); color:var(--sub); }
.truths h3{ color:var(--ink); font-size:clamp(22px,2.6vw,30px); font-weight:900; line-height:1.4; }
.truths li > div{ grid-column:2; }
.truths .but{ position:relative; margin-top:10px; padding-left:30px; color:var(--ink); font-weight:700; }
.truths .but::before{
  content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 16.5V6M6.5 10.5 11 6l4.5 4.5' fill='none' stroke='%2314202b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;
}
@media (min-width:900px){
  .truths li{ grid-template-columns:44px minmax(0,5fr) minmax(0,7fr); gap:0 28px; padding:30px 0; align-items:start; }
  .truths li > div{ grid-column:3; padding-top:4px; }
}
.closing{ display:grid; gap:24px; margin-top:clamp(48px,7vw,88px); align-items:center; }
.closing picture{ display:block; overflow:hidden; border-radius:var(--r-photo); aspect-ratio:4/3; }
.closing img{ width:100%; height:100%; object-fit:cover; }
.closing figcaption{ color:var(--ink); font-size:clamp(24px,3vw,38px); font-weight:900; line-height:1.55; text-wrap:balance; }
@media (min-width:900px){ .closing{ grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:clamp(40px,5vw,72px); } }

/* ---------- 4F：ある1日 ---------- */
.dayline{ margin-top:36px; border-left:2px solid var(--ink); }
.dayline li{ position:relative; display:grid; grid-template-columns:4.6em 1fr; gap:0 12px; padding:14px 0 14px 20px; }
.dayline li::before{ content:""; position:absolute; left:-7px; top:24px; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--ink); }
.dayline time{ grid-row:span 2; color:var(--ink); font-size:26px; font-weight:600; line-height:1.4; }
.dayline time:not(.num){ font-size:22px; font-weight:900; }
.dayline h3{ color:var(--ink); font-size:17px; font-weight:700; line-height:1.6; }
.dayline p{ font-size:15px; line-height:1.6; }
@media (min-width:900px){
  .dayline{ display:grid; grid-template-columns:repeat(5,1fr); border-left:0; border-top:2px solid var(--ink); margin-top:48px; }
  .dayline li{ display:block; padding:28px 20px 0 0; }
  .dayline li::before{ left:0; top:-7px; }
  .dayline time{ display:block; font-size:36px; line-height:1.2; margin-bottom:8px; }
  .dayline time:not(.num){ font-size:30px; line-height:1.44; }
}
.crew{ display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; margin:clamp(44px,6vw,80px) calc(var(--gutter) * -1) 0; padding:0 var(--gutter); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.crew::-webkit-scrollbar{ display:none; }
.crew figure{ position:relative; scroll-snap-align:center; overflow:hidden; border-radius:var(--r-photo); }
.crew figcaption{ position:absolute; left:12px; bottom:12px; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.88); color:var(--ink); font-size:14px; font-weight:700; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.crew img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
@media (min-width:900px){
  .crew{ grid-auto-flow:row; grid-template-columns:1fr 1fr 1.34fr; grid-auto-columns:auto; gap:20px; margin-inline:0; padding:0; overflow:visible; }
  .crew img{ aspect-ratio:auto; }
  .crew figure{ aspect-ratio:auto; height:clamp(260px,26vw,340px); }
}
.message{ display:grid; margin-top:clamp(44px,6vw,80px); background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.message picture{ display:block; min-height:220px; }
.message img{ width:100%; height:100%; object-fit:cover; }
.message figcaption{ padding:clamp(24px,4vw,56px); }
.message__tag{ display:inline-block; font-size:13px; font-weight:700; color:var(--accent-ink); background:var(--accent-bg); padding:3px 10px; border-radius:6px; }
.message__big{ margin-top:14px; color:var(--ink); font-size:clamp(22px,2.6vw,32px); font-weight:900; line-height:1.55; }
.message blockquote p + p{ margin-top:14px; font-size:15px; }
.message__sign{ margin-top:20px; color:var(--ink); font-weight:700; font-size:15px; }
@media (min-width:900px){ .message{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); } }

/* ---------- 5F：質問 ---------- */
.qa{ margin-top:28px; border-top:1px solid var(--line); }
.qa details{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; position:relative; padding:20px 44px 20px 0; color:var(--ink); font-size:clamp(16px,1.6vw,18px); font-weight:700; line-height:1.6; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; position:absolute; right:4px; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:50%;
  background:var(--bg) linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat; transition:transform .25s var(--ease), background-color .2s;
}
.qa summary::before{ content:""; position:absolute; right:17px; top:50%; width:2px; height:12px; margin-top:-6px; background:var(--ink); z-index:1; transition:transform .25s var(--ease); }
.qa details[open] summary::before{ transform:scaleY(0); }
.qa details[open] summary::after{ background-color:var(--accent-bg); }
.qa summary:hover::after{ background-color:var(--accent-bg); }
.qa details p{ padding:0 44px 22px 0; }

/* ---------- RF：応募 ---------- */
.entry{ position:relative; overflow:clip; padding-block:clamp(72px,10vw,140px); background:#dfe9ee; color:var(--ink); }
.entry__photo{ position:absolute; inset:0; display:block; }
.entry__photo img{ width:100%; height:100%; object-fit:cover; object-position:60% 30%; }
.entry::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(247,248,250,.78); }
@media (min-width:900px){ .entry::before{ background:linear-gradient(90deg, rgba(247,248,250,.95) 0%, rgba(247,248,250,.82) 42%, rgba(247,248,250,.12) 100%); } }
.entry .wrap{ position:relative; z-index:2; }
.entry .eyebrow{ color:var(--ink); }
.entry .lead{ color:var(--ink); font-weight:500; }
.entry__title{ color:var(--ink); font-weight:900; letter-spacing:.01em; margin-top:14px; }
.entry__big{ display:block; font-size:clamp(40px,7vw,96px); line-height:1.2; }
.entry__sub{ display:block; margin-top:8px; font-size:clamp(24px,3.2vw,44px); line-height:1.35; }
.entry__points{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px; }
.entry__points li{ position:relative; padding-left:28px; color:var(--ink); font-weight:700; font-size:15px; }
.entry__points li::before{
  content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%2314202b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.entry__cta{ display:grid; gap:14px; margin-top:28px; max-width:720px; }
.entry__flow{ display:grid; gap:12px; margin-top:32px; max-width:960px; counter-reset:f; }
.entry__flow li{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:var(--r-card); }
.entry__flow b{ flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; font-size:16px; }
.entry__flow h3{ color:var(--ink); font-size:16px; font-weight:700; line-height:1.5; }
.entry__flow p{ font-size:14px; line-height:1.6; color:var(--text); }
@media (min-width:860px){ .entry__flow{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:700px){ .entry__cta{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } }
.entry__fine{ margin-top:16px; font-size:14px; color:var(--ink); }

/* ---------- 会社概要・フッター ---------- */
.company{ padding-block:clamp(48px,6vw,80px); }
.company dl{ margin-top:16px; border-top:1px solid var(--line); }
.company dl div{ display:grid; grid-template-columns:6.4em 1fr; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.7; }
.company dt{ font-weight:700; color:var(--sub); }
.company dd{ color:var(--ink); }
.company__grid{ display:grid; gap:28px; margin-top:16px; }
.company__grid dl{ margin-top:0; }
@media (min-width:860px){ .company__grid{ grid-template-columns:1fr 1fr; gap:56px; align-items:start; } }
.company__offices{ border-top:1px solid var(--line); }
.company__offices li{ padding:14px 0; border-bottom:1px solid var(--line); }
.office__n{ color:var(--ink); font-size:15px; font-weight:700; line-height:1.6; }
.office__n small{ margin-left:10px; color:var(--sub); font-size:12px; font-weight:500; }
.office__a{ margin-top:2px; color:var(--ink); font-size:15px; line-height:1.7; }
.foot{ background:var(--ink); color:#fff; text-align:center; padding:48px 20px; display:grid; gap:12px; justify-items:center; }
.foot img{ height:28px; width:auto; }
/* 文末の「。」の右の余白と字間が右に残って左へずれて見えるので、palt で詰め、字間の分を左に足して中央に合わせる */
.foot p{ color:var(--accent); font-weight:700; letter-spacing:.06em; padding-left:.06em; font-feature-settings:"palt"; font-size:clamp(15px,1.6vw,19px); line-height:1.8; }
.foot p .ib{ margin-inline:.25em; }
.foot small{ color:var(--on-dark); font-size:13px; }

/* ---------- スマホ：下に固定する応募バー ---------- */
.dock{
  position:fixed; z-index:45; inset:auto 0 0 0; display:grid; grid-template-columns:1.4fr 1fr; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(255,255,255,.95); border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transform:translateY(110%); transition:transform .3s var(--ease);
}
.dock.is-on{ transform:none; }
.dock .btn{ min-height:48px; padding-inline:8px; }
@media (max-width:999px){ .foot{ padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width:1000px){ .dock{ display:none; } }

/* ---------- 写真が画面に入るとき、少しだけ落ち着く動き（対応ブラウザだけ・設定で止まる） ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .closing img,.crew img,.message img,.step picture img{ animation:settle linear both; animation-timeline:view(); animation-range:entry 0% entry 90%; }
  }
}
@keyframes settle{ from{ transform:scale(1.07); } to{ transform:none; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}


@media (min-width:1440px){
  :root{ --gutter:clamp(48px, 4vw, 96px); }
  .wrap{ width:min(1600px, 100% - var(--gutter) * 2 - var(--lift) * 2); }
  .wrap--narrow{ width:min(960px, 100% - var(--gutter) * 2 - var(--lift) * 2); }
  .hero{ min-height:min(100svh, 1080px); }
  .hero__in{ max-width:none; column-gap:56px; min-height:calc(min(100svh, 1080px) - var(--top)); }
  .scrolly{ width:min(1680px, 100% - var(--gutter) * 2 - var(--lift) * 2); }
  .scrolly__stage{ height:min(calc(100svh - var(--top) - 56px), 860px); }
  .h2{ font-size:clamp(30px, 3.1vw, 64px); }
  .lead{ max-width:46em; font-size:clamp(16px, 1.05vw, 20px); }
}