/* ============================================================
   Onbloom Recruit — A案「夜咲きの温室」 v1.1
   WF: WF_Onbloom-Recruit_A_PC_v3.0 準拠
   デザイン言語: ベースサイト踏襲（ピル型ボタン / 角丸4px / 罫線最小限）
   カラーのみ Onbloom（ダーク × シャンパンゴールド）
   外部リソース参照なし（フォント含め全てローカル）／画像は仮
============================================================ */
/* 欧文: Adobe Fonts（Typekit）tt-commons-pro — weight 300 / 500 */

:root{
  --ink:#272b2b;
  --ink-2:#1e2121;
  --gold:#c6ad82;
  --gold-2:#ccac7c;
  --gold-deep:#bd9a69;
  --paper:#faf8f3;
  --white:#fff;
  --line:#e6e2d8;
  --line-dark:rgba(244,241,234,.16);
  --tx:#4a4c49;
  --tx-soft:#8a8a82;
  --tx-inv:#f4f1ea;
  --tx-inv-soft:rgba(244,241,234,.6);

  --font-en:"tt-commons-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-jp:"dnp-shuei-gothic-kin-std","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;

  --pad:clamp(28px, 8.3vw, 120px);
  --r:4px;              /* ベースサイト準拠の角丸 */
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}

/* ---------- loading screen ---------- */
#loader{
  position:fixed; inset:0; z-index:1000;   /* ヘッダー(900)より上 */
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-2);
  transition:opacity .9s var(--ease), visibility .9s;
}
#loader.hide{opacity:0; visibility:hidden}
.ld-svg{width:clamp(48px, 4vw, 54px); height:auto; overflow:visible}   /* SPは48px据え置き・PCのみ縮小 */
html.is-loading{overflow:hidden}   /* ローディング中は背面スクロールをロック */
.ld-stroke{
  fill:none; stroke:var(--white); stroke-width:.45; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:ld-draw 1.6s var(--ease) .2s forwards;
  transition:stroke .7s ease;
}
.ld-fill{
  fill:var(--white);
  transform:translateY(55.35px);   /* viewBox座標系でマーク全高ぶん下げておく */
  transition:fill .7s ease;
}
#loader.done .ld-stroke{stroke:var(--gold)}
#loader.done .ld-fill{fill:var(--gold)}
@keyframes ld-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .ld-stroke{animation:none; stroke-dashoffset:0}
  .ld-fill{transform:none}
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-jp); color:var(--tx); background:var(--white);
  line-height:2.05; font-size:14px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none}
.en{font-family:var(--font-en); font-weight:500}
/* アンカー着地の余白：スクロール後のヘッダー高（PC76px/SP58px）＋バッファ。
   実機SafariはスクロールでURLバーが縮み着地が上にズレるため多めに取る */
section{scroll-margin-top:100px}

.in{padding-left:var(--pad); padding-right:var(--pad); max-width:1440px; margin:0 auto}

/* ---------- reveal motion ---------- */
.rv{opacity:0; transform:translateY(32px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.rv.is-in{opacity:1; transform:none}
.rv-img{overflow:hidden; position:relative; border-radius:var(--r)}
/* 中身は常に12%拡大で保持（インナーパララックスの可動域）。
   パララックスは transform と独立した translate プロパティで行う */
.rv-img img{transform:scale(1.26); transition:transform 1.6s var(--ease); will-change:translate}
.rv-img::after{content:""; position:absolute; inset:0; background:currentColor; transform:scaleX(1); transform-origin:right center; transition:transform 1.1s var(--ease)}
.rv-img.is-in img{transform:scale(1.16)}
/* 区切りワイド画像はパララックス量が大きいため可動域も大きく */
.divider .rv-img img{transform:scale(1.34)}
.divider .rv-img.is-in img{transform:scale(1.24)}
.rv-img.is-in::after{transform:scaleX(0)}
@media (prefers-reduced-motion: reduce){
  .rv,.rv-img img,.rv-img::after{transition:none !important; opacity:1 !important; transform:none !important}
  .rv-img::after{display:none}
}

/* ---------- typography（トラッキングはベースサイト準拠：和文=ほぼnormal / 英字大見出し=タイト） ---------- */
.dsp{font-size:clamp(64px, 9.2vw, 132px); line-height:1.02; letter-spacing:-.015em; font-weight:500}
.sec-en{font-size:clamp(48px, 5.7vw, 82px); line-height:1.05; letter-spacing:-.01em; font-weight:500}
.sec-jp{font-size:26px; line-height:1.5; font-weight:600; letter-spacing:.02em; margin-top:20px}
.h2{font-size:clamp(24px, 2.4vw, 34px); line-height:1.55; font-weight:600; letter-spacing:.01em; word-break:auto-phrase}
.nb{display:inline-block}  /* 文節単位の折り返し用 */
.h3{font-size:26px; line-height:1.5; font-weight:600; letter-spacing:.01em}
.h4{font-size:16px; line-height:1.6; font-weight:600; letter-spacing:.01em}
.tx{font-size:14px; line-height:2.05}
.tx.s{font-size:12.5px; line-height:1.9; color:var(--tx-soft)}
.lbl{font-size:11px; letter-spacing:.08em; color:var(--tx-soft); font-family:var(--font-en); font-weight:300}
.mini-en{font-size:13px; letter-spacing:.06em; font-weight:500; font-family:var(--font-en); color:var(--gold-deep); text-transform:uppercase}
.num{font-family:var(--font-en); font-size:44px; font-weight:500; line-height:1; letter-spacing:0}
.num i{font-style:normal; font-family:var(--font-jp); font-size:17px; font-weight:600}
.hr{height:1px; background:var(--line)}

/* ---------- buttons（ベースサイト準拠：ピル型） ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:22px;
  min-height:60px; padding:0 28px 0 34px; font-size:13px; letter-spacing:normal; font-weight:600;
  border:none; border-radius:9999px; background:var(--ink); color:var(--white);
  cursor:pointer; font-family:inherit; position:relative; overflow:hidden;
  transition:color .45s var(--ease);
}
.btn::before{content:""; position:absolute; inset:0; border-radius:9999px; background:var(--gold); transform:scaleX(0); transform-origin:right center; transition:transform .5s var(--ease)}
.btn:hover::before{transform:scaleX(1); transform-origin:left center}
.btn:hover{color:var(--ink-2)}
.btn > *{position:relative; z-index:1}
.btn.p{background:var(--gold); color:var(--ink-2)}
.btn.p::before{background:var(--ink-2)}
.btn.p:hover{color:var(--tx-inv)}
.btn.s{min-height:46px; padding:0 20px 0 26px; font-size:12px; gap:14px}
.on-dark .btn{background:var(--white); color:var(--ink)}
.on-dark .btn:hover{color:var(--ink-2)}
.on-dark .btn.p{background:var(--gold); color:var(--ink-2)}
.on-dark .btn.p::before{background:var(--white)}
.on-dark .btn.p:hover{color:var(--ink)}
/* 白背景（フォームカード内）ではホバーを白ではなくアイボリーに */
.form-card .btn.p::before{background:var(--paper)}
.form-card .btn.p:hover{color:var(--ink)}
.btn .ar{font-family:var(--font-en); font-weight:300; transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
/* 送信中スピナー */
.btn.sending{cursor:wait; opacity:.85}
.btn.sending .ar{display:none}
.btn.sending::after{
  content:""; position:relative; z-index:1; flex:none;
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(30,33,33,.25); border-top-color:var(--ink-2);
  animation:btnspin .7s linear infinite;
}
@keyframes btnspin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
  .btn.sending::after{animation:none; border-top-color:rgba(30,33,33,.25)}
}

.chip{display:inline-block; border-radius:9999px; background:rgba(198,173,130,.14); color:var(--tx); font-size:11px; letter-spacing:.02em; padding:10px 20px; line-height:1.5}
.tag{display:inline-block; border-radius:9999px; background:rgba(198,173,130,.2); color:#9a7f4e; font-size:10.5px; letter-spacing:.04em; padding:6px 14px}

/* ============================================================ HEADER */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:900; height:96px;
  display:flex; align-items:center; gap:40px; padding:0 clamp(20px,3vw,44px);
  transition:background .5s var(--ease), height .5s var(--ease), transform .5s var(--ease);
}
.hd.solid{background:rgba(30,33,33,.92); backdrop-filter:blur(14px); height:76px}
.hd.hide{transform:translateY(-100%)}
.hd .logo img{height:32px; width:auto}
.hd nav{display:flex; gap:28px; margin-left:20px}
.hd nav a{font-family:var(--font-en); font-weight:300; font-size:13px; letter-spacing:.01em; color:var(--tx-inv); position:relative; padding:6px 0}
.hd nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right center; transition:transform .4s var(--ease)}
.hd nav a:hover::after{transform:scaleX(1); transform-origin:left center}
.hd .cta{margin-left:auto}
.hd .cta .t-short{display:none}   /* SP(640px以下)で.t-fullと入れ替え */
@media (max-width:1100px){ .hd nav{display:none} }

/* ---------- SPメニュー（ハンバーガー＋フルスクリーンオーバーレイ） ---------- */
.menu-btn{
  display:none; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  width:44px; height:44px; margin-right:-8px;
  background:none; border:none; cursor:pointer;
}
.menu-btn span{
  display:block; width:24px; height:1.5px; border-radius:1px;
  background:var(--tx-inv);
  transition:transform .45s var(--ease), background .3s;
}
.menu-btn.open span:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
.menu-btn.open span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg)}
@media (max-width:1100px){ .menu-btn{display:flex} }

html.menu-open{overflow:hidden}
html.menu-open .hd{transform:none !important}   /* メニュー表示中はヘッダーを必ず出す */

.sp-menu{
  position:fixed; inset:0; z-index:890;         /* ヘッダー(900)の下＝ボタンは常に押せる */
  display:flex; flex-direction:column; justify-content:center;
  padding:96px var(--pad) 40px;
  background:
    radial-gradient(900px 620px at 85% 10%, rgba(198,173,130,.15), transparent 62%),
    radial-gradient(700px 520px at 8% 92%, rgba(198,173,130,.08), transparent 56%),
    var(--ink-2);
  visibility:hidden;
  clip-path:inset(0 0 100% 0);                  /* 上からのワイプで開閉 */
  transition:clip-path .7s var(--ease), visibility .7s;
}
.sp-menu.open{visibility:visible; clip-path:inset(0 0 0 0)}
.sp-menu-mark{
  position:absolute; right:-4%; bottom:-6%; height:64vh; width:auto;
  fill:var(--gold); opacity:.05; pointer-events:none;
}
.sp-menu-nav{display:flex; flex-direction:column}
.sp-menu-nav a{
  position:relative; display:flex; align-items:baseline; gap:14px;
  padding:15px 0; line-height:1.3;
  border-bottom:1px solid var(--line-dark);
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.sp-menu-nav a:last-child{border-bottom:none}
.sp-menu-nav a i{font-style:normal; font-weight:300; font-size:11px; letter-spacing:.14em; color:var(--gold); min-width:22px}
.sp-menu-nav a span{font-weight:300; font-size:clamp(22px, 6vw, 27px); letter-spacing:.015em; color:var(--tx-inv)}
.sp-menu-nav a small{margin-left:auto; padding-left:12px; font-size:10.5px; letter-spacing:.06em; color:var(--tx-inv-soft); white-space:nowrap}
.sp-menu-nav a:active span{color:var(--gold-2)}
.sp-menu-foot{
  margin-top:44px; display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.sp-menu-corp{font-weight:300; font-size:12px; letter-spacing:.05em; color:var(--tx-inv-soft)}
/* 開いたときに時間差で出す */
.sp-menu.open .sp-menu-nav a, .sp-menu.open .sp-menu-foot{opacity:1; transform:none}
.sp-menu.open .sp-menu-nav a:nth-child(1){transition-delay:.22s}
.sp-menu.open .sp-menu-nav a:nth-child(2){transition-delay:.29s}
.sp-menu.open .sp-menu-nav a:nth-child(3){transition-delay:.36s}
.sp-menu.open .sp-menu-nav a:nth-child(4){transition-delay:.43s}
.sp-menu.open .sp-menu-nav a:nth-child(5){transition-delay:.5s}
.sp-menu.open .sp-menu-nav a:nth-child(6){transition-delay:.57s}
.sp-menu.open .sp-menu-foot{transition-delay:.68s}
@media (min-width:1101px){ .sp-menu{display:none} }
@media (max-height:700px){
  .sp-menu{padding-top:80px}
  .sp-menu-nav a{padding:11px 0}
  .sp-menu-foot{margin-top:28px}
}
@media (prefers-reduced-motion: reduce){
  .sp-menu{transition:none}
  .sp-menu-nav a, .sp-menu-foot{transition:none}
}

/* ============================================================ 最下層の3D背景（Contact US以降で現れる） */
#bloom-bg-bottom{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; display:block;
  background:
    radial-gradient(1000px 700px at 82% 14%, rgba(198,173,130,.16), transparent 62%),
    radial-gradient(760px 560px at 6% 96%, rgba(198,173,130,.08), transparent 60%),
    var(--ink-2);
}
section, footer{position:relative; z-index:1}

/* ============================================================ S01 HERO */
.hero{
  background:
    radial-gradient(1000px 700px at 82% 14%, rgba(198,173,130,.16), transparent 62%),
    radial-gradient(760px 560px at 6% 96%, rgba(198,173,130,.08), transparent 60%),
    var(--ink-2);
  color:var(--tx-inv); position:relative; overflow:hidden;
}
.hero .in{position:relative; z-index:2}
.hero-ttl{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  z-index:3;               /* タイトルは3Dオブジェクトの上 */
}
.hero-ttl .line{display:block; overflow:hidden}
.hero-ttl .line > span{display:block; transform:translateY(110%); transition:transform 1.1s var(--ease)}
.is-loaded .hero-ttl .line > span{transform:none}
.is-loaded .hero-ttl .line:nth-child(2) > span{transition-delay:.12s}
.hero-low{
  padding-top:clamp(36px, 4vw, 56px); padding-bottom:clamp(56px, 7vw, 96px);
  display:grid; grid-template-columns:1fr clamp(300px, 30vw, 440px); gap:clamp(40px, 5.5vw, 80px); align-items:end;
}
.hero-low .h2{max-width:20em}
.hero-ctas{display:flex; gap:16px; margin-top:52px; flex-wrap:wrap}
/* 3D Bloom Object＝旧KV枠（縦3:4）。金線・金粉は枠外に溢れる。
   枠を上に食い込ませ、メインコピーの右下にわずかに被せる */
/* 食い込み量は viewport 高さに依存しない式（どの画面高でも被り≒35px を維持） */
.hero-kv3d{position:relative; aspect-ratio:3/4; align-self:start; margin-top:calc(-50svh + 113px)}
#bloom-bg{
  position:absolute; left:50%; top:50%; width:280%; height:210%;
  transform:translate(-50%, -52%);
  pointer-events:none; display:block;
}
.hero-scroll{
  position:absolute; left:var(--pad); bottom:46px;
  display:flex; align-items:center; gap:14px; color:var(--tx-inv-soft); font-size:10.5px; letter-spacing:.08em;
}
@media (max-width:900px){
  .hero-low{grid-template-columns:1fr}
  /* SPでもファーストビューに花を覗かせる：KVを先頭に置き、タイトル画面へ食い込ませる */
  .hero-kv3d{order:-1; width:min(88vw, 440px); margin:-34svh auto 16px; align-self:auto}
}
.hero-scroll .bar-v{width:1px; height:46px; background:rgba(198,173,130,.4); position:relative; overflow:hidden}
.hero-scroll .bar-v::after{content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold); animation:scr 2.2s var(--ease) infinite}
@keyframes scr{ 0%{top:-100%} 55%{top:0} 100%{top:100%} }
@media (max-width:900px){ .hero-low{grid-template-columns:1fr} }

/* ============================================================ S02 INTRO */
.intro{background:var(--paper); padding-top:clamp(72px,7.5vw,104px); padding-bottom:clamp(72px,7.5vw,104px)}
.intro .grid{display:grid; grid-template-columns:clamp(240px,25vw,360px) 1fr; gap:clamp(40px,5.5vw,80px)}
.intro .por .rv-img{color:var(--paper)}
.intro .por img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(.88)}
.intro .por p{margin-top:16px; font-size:16px; font-weight:700; color:var(--ink); letter-spacing:.02em}
.intro .body{padding-top:2px; max-width:44em}
.intro .body > .tx{max-width:33em}
.intro .stmt{margin-top:clamp(40px,4.5vw,64px)}
@media (max-width:900px){ .intro .grid{grid-template-columns:1fr} }

/* ============================================================ S03 MISSION (反転) */
.mission{
  background:
    radial-gradient(880px 600px at 90% 4%, rgba(198,173,130,.13), transparent 60%),
    var(--ink);
  color:var(--tx-inv);
}
.mission .sec-en{color:var(--gold)}
.mission .tx{color:var(--tx-inv)}
.mission-head{padding-top:clamp(72px,7.5vw,104px); display:grid; grid-template-columns:1fr clamp(280px,30vw,440px); gap:clamp(40px,5.5vw,80px); align-items:end}
.mission-head .fig .rv-img{color:var(--ink)}
.mission-head .fig img{width:100%; height:260px; object-fit:cover; filter:saturate(.9)}
.mission-stmt{padding-top:clamp(56px,6vw,88px)}
.mission-stmt .h2{color:var(--tx-inv)}
.mission-list{padding-top:clamp(48px,5.2vw,72px)}
.mission-list .grid{display:grid; grid-template-columns:clamp(200px,20vw,300px) 1fr; gap:clamp(30px,4vw,60px)}
.mission-list .li{display:flex; align-items:baseline; gap:24px; padding:17px 0; border-bottom:1px solid var(--line-dark)}
.mission-list .li:first-child{border-top:1px solid var(--line-dark)}
.mission-list .li .no{width:30px; flex:none; font-family:var(--font-en); font-weight:300; font-size:12px; letter-spacing:.14em; color:var(--gold)}
.mission-roles{padding-top:clamp(44px,4.6vw,64px); padding-bottom:clamp(72px,7.5vw,104px)}
.mission-roles .grid{display:grid; grid-template-columns:clamp(200px,20vw,300px) 1fr; gap:clamp(30px,4vw,60px)}
.mission-roles .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.mission-roles .card{
  border-radius:var(--r); padding:30px 26px; min-height:160px; display:flex; flex-direction:column;
  background:rgba(244,241,234,.06); transition:background .5s var(--ease);
}
.mission-roles .card:hover{background:rgba(198,173,130,.16)}
.mission-roles .card .no{font-family:var(--font-en); font-weight:300; font-size:12px; letter-spacing:.14em; color:var(--gold)}
.mission-roles .card .h4{margin-top:16px; color:var(--tx-inv)}
@media (max-width:900px){
  .mission-head,.mission-list .grid,.mission-roles .grid{grid-template-columns:1fr}
  .mission-roles .cards{grid-template-columns:1fr}
}

/* ============================================================ S04 CASE STUDY */
.case{background:var(--white); padding-bottom:clamp(72px,7.5vw,104px)}
.case-head{padding-top:clamp(72px,7.5vw,104px)}
.case-head .lead{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5.5vw,80px); margin-top:28px; align-items:end}
.case-head .lead .sec-jp{margin-top:0}
.case-01{padding-top:clamp(48px,5.2vw,72px); display:grid; grid-template-columns:clamp(300px,29vw,420px) 1fr; gap:clamp(36px,4.8vw,70px); align-items:start}
.case-01 .por .rv-img{color:var(--white)}
.case-01 .por img{width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(.88)}
.case-01 .bio > .tx{max-width:36em}
.chips{display:flex; gap:10px; margin:12px 0; flex-wrap:wrap}
.pull{padding-top:clamp(36px,3.8vw,52px)}
.pull .frame{background:var(--paper); border-radius:var(--r); display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,60px); padding:clamp(30px,3.4vw,48px) clamp(28px,3vw,44px)}
.pull .num{display:inline-block; margin:12px 0 6px; color:var(--ink); font-size:clamp(34px,3.2vw,46px)}
.pull .num b{font-family:var(--font-jp); font-size:.72em}
.income{padding-top:clamp(24px,2.4vw,32px)}
.income .panel{background:var(--paper); border-radius:var(--r); padding:clamp(28px,3vw,44px)}
.income .bars{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:36px; align-items:end}
.income .bar-w{height:129px; display:flex; align-items:flex-end}
.income .bar{width:100%; height:calc(var(--h) * 1px); border-radius:var(--r) var(--r) 0 0; background:linear-gradient(to top, rgba(198,173,130,.55), rgba(198,173,130,.2)); transform:scaleY(0); transform-origin:bottom center; transition:transform 1.2s var(--ease)}
.income.is-in .bar{transform:scaleY(1)}
.income .bar.max{background:linear-gradient(to top, var(--gold), rgba(198,173,130,.45))}
.income .bars .num{margin-top:18px; font-size:34px}
.income .bars > div:nth-child(2) .bar{transition-delay:.12s}
.income .bars > div:nth-child(3) .bar{transition-delay:.24s}
.income .bars > div:nth-child(4) .bar{transition-delay:.36s}
@media (max-width:640px){
  .income .panel{padding:26px 20px}
  .income .bars{grid-template-columns:repeat(2,1fr); gap:26px 18px; margin-top:28px}
  .income .bars .num{font-size:23px}
  .income .bars .num i{font-size:12px}
  .income .bar-w{height:96px}
  .income .bar{height:calc(var(--h) * 0.74px)}  /* 比率を保ったまま縮小 */
}
.income .note{margin-top:32px}
.case-sub{padding-top:clamp(56px,6vw,88px)}
.case-sub .cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,3.8vw,56px)}
.case-sub .por .rv-img{color:var(--white)}
.case-sub .por img{width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.88)}
.case-sub .mini-en{margin-top:28px}
.case-sub .h3{margin-top:12px}
/* 紹介文は段落マージンなし・均一な行送りのみで組む */
.bio-flow{margin-top:22px}
.bio-flow .tx{margin:0}
@media (max-width:900px){ .case-head .lead,.case-01,.case-sub .cols,.pull .frame{grid-template-columns:1fr} }

/* ============================================================ S05 RECRUITMENT */
.recruit{background:var(--paper); padding-bottom:clamp(72px,7.5vw,104px)}
.recruit-head{padding-top:clamp(72px,7.5vw,104px)}
.recruit-jobs{padding-top:clamp(44px,4.6vw,64px)}
.recruit-jobs .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:28px}
.recruit-jobs .card{
  border-radius:var(--r); background:var(--white); padding:32px 26px; min-height:200px;
  display:flex; flex-direction:column; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.recruit-jobs .card:hover{transform:translateY(-4px); box-shadow:0 20px 44px -22px rgba(39,43,43,.22)}
.recruit-jobs .card .no{font-family:var(--font-en); font-weight:300; font-size:12px; letter-spacing:.14em; color:var(--gold-deep)}
.recruit-jobs .card .h4{margin-top:17px; flex:1}
.recruit-jobs .card .tag{align-self:flex-start; margin-top:16px}
.recruit-emp{padding-top:clamp(24px,2.4vw,32px)}
.recruit-emp .panel{border-radius:var(--r); background:var(--white); padding:clamp(30px,3.4vw,44px); display:grid; grid-template-columns:clamp(220px,24vw,340px) 1fr; gap:clamp(28px,3vw,44px)}
.recruit-tbl{padding-top:clamp(40px,4.2vw,56px)}
.recruit-tbl .row{display:grid; grid-template-columns:clamp(150px,15vw,220px) 1fr; gap:clamp(20px,2.8vw,40px); padding:28px 0; border-bottom:1px solid var(--line)}
.recruit-tbl .row:first-child{border-top:1px solid var(--line)}
.recruit-tbl .row.hl{padding:32px 0}
.recruit-tbl .row .num{font-size:clamp(32px,3vw,44px); color:var(--ink)}
.recruit-tbl .row .num .sep{font-family:var(--font-jp); font-weight:600; font-size:.6em; padding:0 6px}
@media (max-width:1000px){ .recruit-jobs .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){ .recruit-emp .panel,.recruit-tbl .row{grid-template-columns:1fr} }
@media (max-width:640px){ .recruit-jobs .cards{grid-template-columns:1fr} }

/* ============================================================ S06 SELECTION */
.selection{background:var(--white); padding-top:clamp(72px,7.5vw,104px); padding-bottom:clamp(72px,7.5vw,104px)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px}
.steps .step{border-radius:var(--r); background:var(--paper); padding:32px 28px}
.steps .lbl{color:var(--gold-deep); font-weight:500}
.steps .h4{margin-top:16px; min-height:56px}
.steps .chip{padding:7px 14px; font-size:10.5px; background:rgba(198,173,130,.18)}
@media (max-width:900px){ .steps{grid-template-columns:1fr} }

/* ============================================================ S07 JOIN US */
.join{
  background:
    radial-gradient(940px 660px at 10% 8%, rgba(198,173,130,.14), transparent 62%),
    var(--ink-2);
  color:var(--tx-inv);
}
.join .sec-en{color:var(--gold)}
.join .tx{color:var(--tx-inv)}
.join-head{padding-top:clamp(72px,7.5vw,104px); display:grid; grid-template-columns:1fr clamp(280px,30vw,440px); gap:clamp(40px,5.5vw,80px); align-items:end}
.join-head .sec-jp{font-size:clamp(26px,2.4vw,34px)}
.join-head .kv .rv-img{color:var(--ink-2)}
.join-head .kv img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:20% 50%; filter:saturate(.9)}
.join-stmt{padding-top:clamp(56px,6vw,88px)}
.join-stmt .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5.5vw,80px); align-items:start}
.join-form{padding-top:clamp(48px,5vw,72px); padding-bottom:clamp(72px,7.5vw,104px)}
.form-card{border-radius:var(--r); background:var(--white); color:var(--tx); overflow:hidden}
.form-card .tx{color:var(--tx)}
.form-card .ttl{padding:38px clamp(24px,3.4vw,48px) 0}
.form-card .ttl .h2{font-size:26px; color:var(--ink)}
/* タブ風ヘッダー（静的・切り替えなし） */
.form-tabs{display:flex; margin-top:28px; background:var(--paper)}
.form-tabs .tab{
  background:var(--white); box-shadow:inset 0 3px 0 var(--gold);
  padding:16px 44px; font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.02em;
}
.form-body{padding:36px clamp(24px,3.4vw,48px) 44px}
/* 必須／任意バッジ */
.req,.opt{font-size:10px; line-height:1; padding:4px 8px; border-radius:2px; letter-spacing:.08em; flex:none; font-weight:600}
.req{background:#a24a45; color:#fff}
.opt{color:var(--tx-soft); border:1px solid #d6d0c2}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px 40px}
.form-grid .w{grid-column:1/-1}
.form-body .lbl{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-jp); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink);
}
.fld{
  width:100%; height:54px; border:1px solid #d6d0c2; border-radius:var(--r); margin-top:10px; background:var(--white);
  font:inherit; font-size:14px; padding:0 18px; color:var(--ink); -webkit-appearance:none; appearance:none;
  transition:border-color .35s, box-shadow .35s;
}
.fld:hover{border-color:#bfb7a4}
.fld:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(198,173,130,.25)}
.fld::placeholder{color:#b8b2a5}
textarea.fld{height:130px; padding:14px 18px; resize:vertical; line-height:1.8}
select.fld{
  background-image:linear-gradient(45deg, transparent 50%, var(--tx-soft) 50%), linear-gradient(135deg, var(--tx-soft) 50%, transparent 50%);
  background-position:calc(100% - 24px) 55%, calc(100% - 19px) 55%; background-size:5px 5px; background-repeat:no-repeat;
}
.radio-chips{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
.radio-chips label{cursor:pointer}
.radio-chips input{position:absolute; opacity:0; pointer-events:none}
.radio-chips .chip{background:var(--white); border:1px solid #d6d0c2; color:var(--ink); padding:12px 24px; font-size:12.5px; transition:background .35s, color .35s, border-color .35s}
.radio-chips input:checked + .chip{background:var(--ink); border-color:var(--ink); color:var(--tx-inv)}
.file-drop{
  height:92px; border:1px dashed #c3bba8; border-radius:var(--r); background:var(--white); margin-top:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  letter-spacing:.02em; cursor:pointer; transition:background .35s, border-color .35s;
}
.file-drop:hover{background:rgba(198,173,130,.1); border-color:var(--gold-deep)}
.file-drop b{font-size:13px; color:var(--tx); font-weight:600; line-height:1.5}
.file-drop small{font-size:11.5px; color:var(--tx-soft); line-height:1.6}
.form-sep{margin:36px 0 26px}
/* ハニーポット（bot対策・画面外） */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; opacity:0; pointer-events:none}
/* 送信メッセージ・完了表示 */
.form-msg{margin:0 0 18px; text-align:center; font-size:13.5px; font-weight:700; color:var(--ink)}
.form-msg.error{color:#a24a45}
.form-done{padding:56px clamp(24px,3.4vw,48px) 64px; text-align:center}
.form-done .h4{color:var(--ink); font-size:20px}
.form-done .tx{margin-top:12px; color:var(--tx)}
.consent{display:flex; align-items:center; justify-content:center; gap:14px; cursor:pointer}
.consent input{width:22px; height:22px; accent-color:var(--gold-deep); flex:none}
.consent .tx{font-size:13.5px; font-weight:600; color:var(--ink)}
.consent .tx a{text-decoration:underline; text-underline-offset:3px}
.consent .tx a:hover{color:var(--gold-deep)}
.form-submit{margin-top:30px; display:flex; justify-content:center}
.form-submit .btn{min-width:340px}
.form-note{border-radius:var(--r); background:rgba(244,241,234,.08); padding:16px 20px; font-size:11.5px; color:var(--tx-inv-soft); margin-top:20px; line-height:1.75}
@media (max-width:900px){ .join-head,.join-stmt .grid,.form-grid{grid-template-columns:1fr} }

/* ============================================================ DIVIDER（Join Us と Contact US の間のワイド画像） */
.divider{position:relative; z-index:1; height:clamp(330px, calc(48vh + 30px), 570px); overflow:hidden}
.divider .rv-img{position:absolute; inset:0; color:var(--ink-2); border-radius:0}
.divider img{width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.9)}

/* ============================================================ S08 CONTACT + FOOTER（ファーストビューと同トーン・背面3Dを透かす） */
.contact{background:transparent; color:var(--tx-inv); padding-top:clamp(88px,9vw,128px); padding-bottom:clamp(56px,6vw,88px)}
.contact .sec-en{color:var(--gold)}
.contact .tx{color:var(--tx-inv)}
.contact .lead{display:grid; grid-template-columns:1fr auto; gap:clamp(40px,5.5vw,80px); margin-top:44px; align-items:end}
.contact .lead .tx{max-width:30em; margin-top:18px}
.footer{background:transparent; color:var(--tx-inv)}
.footer .top{padding-top:56px; padding-bottom:48px; display:grid; grid-template-columns:clamp(200px,22vw,320px) 1fr; gap:clamp(40px,5.5vw,80px); align-items:start}
.footer .wordmark img{height:34px; width:auto}
.footer .fnav{display:flex; flex-wrap:wrap; gap:14px 32px}
.footer .fnav a{font-family:var(--font-en); font-weight:300; font-size:13px; letter-spacing:.01em; color:var(--tx-inv); position:relative; padding:2px 0}
.footer .fnav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:right center; transition:transform .4s var(--ease)}
.footer .fnav a:hover::after{transform:scaleX(1); transform-origin:left center}
.footer .corp{margin-top:26px; font-style:normal; font-size:11.5px; line-height:1.9; color:var(--tx-inv-soft)}
.footer .corp-name{font-family:var(--font-en); font-weight:500; font-size:13px; letter-spacing:.02em; color:var(--tx-inv); margin-bottom:8px}
.footer .corp-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  color:var(--gold); font-size:12px; padding-bottom:3px;
  border-bottom:1px solid rgba(198,173,130,.45); transition:border-color .35s;
}
.footer .corp-link:hover{border-color:var(--gold)}
.footer .corp-link .en{font-weight:300}
.footer .cr{padding-bottom:130px}
.footer .cr p{font-family:var(--font-en); font-weight:300; font-size:12px; letter-spacing:.02em; color:var(--tx-inv-soft)}
@media (max-width:900px){ .footer .top,.contact .lead{grid-template-columns:1fr} }

/* ============================================================ SP refinement（640px以下の調整） */
@media (max-width:640px){
  /* タイポグラフィ：行間を締める */
  .dsp{font-size:clamp(38px, 12.2vw, 64px)}  /* RECRUITMENTが375px幅に収まる級数 */
  .tx{font-size:13.5px; line-height:1.9}
  .tx.s{font-size:12px; line-height:1.75}
  .sec-jp{font-size:20px; margin-top:14px}
  .h3{font-size:21px}
  .h4{font-size:15px}
  /* ボタン：一回り小さく */
  .btn{min-height:50px; padding:0 24px 0 28px; font-size:12.5px; gap:14px}
  .btn.s{min-height:40px; padding:0 16px 0 20px; font-size:11.5px; gap:10px}
  .hero-ctas{gap:12px; margin-top:34px}
  /* ヘッダー */
  .hd{height:72px; gap:16px}
  .hd.solid{height:58px}
  section{scroll-margin-top:88px}   /* SP: solidヘッダー58px＋バッファ30px */
  .hd .logo img{height:29px}
  .hd .cta{min-height:36px; padding:0 14px 0 18px; gap:8px}
  .hd .cta .t-full{display:none}
  .hd .cta .t-short{display:inline}
  .hero-scroll{bottom:28px}
  /* リスト・カード */
  .mission-list .li{padding:14px 0}
  .mission-roles .card{padding:24px 20px; min-height:0}
  .recruit-jobs .card{padding:24px 20px; min-height:0}
  .recruit-emp .panel{padding:24px 20px; gap:18px}
  .recruit-tbl .row{padding:18px 0; gap:6px}
  .recruit-tbl .row.hl{padding:22px 0}
  .recruit-tbl .row .num{font-size:30px}
  .steps{gap:14px; margin-top:36px}
  .steps .step{padding:24px 20px}
  .steps .h4{min-height:0}
  .chips{gap:8px}
  .chip{padding:8px 16px}
  /* フォーム */
  .form-card .ttl{padding:26px 20px 0}
  .form-tabs{margin-top:22px}
  .form-tabs .tab{padding:13px 26px; font-size:14px}
  .form-body{padding:24px 20px 30px}
  .form-grid{gap:18px}
  .form-body .lbl{font-size:12.5px}
  .fld{height:50px; font-size:16px; padding:0 14px}  /* 16px＝iOSのフォーカスズーム防止 */
  textarea.fld{height:120px; padding:12px 14px}
  .radio-chips .chip{padding:11px 18px; font-size:12px}
  .file-drop{height:82px}
  .file-drop small{padding:0 16px; text-align:center}
  .form-sep{margin:24px 0 18px}
  .consent{gap:11px}
  .consent input{width:20px; height:20px}
  .consent .tx{font-size:12.5px}
  .form-submit{margin-top:22px}
  .form-submit .btn{min-width:0; padding:0 44px}
  .form-note{font-size:11px; line-height:1.7; padding:12px 14px; margin-top:14px}
  /* その他 */
  .divider{height:clamp(220px, calc(30vh + 30px), 310px)}
  .contact .lead{gap:24px}
  .footer .top{padding-top:40px; padding-bottom:32px; gap:28px}
  .footer .cr{padding-bottom:92px}
}

/* ---------- privacy policy modal ---------- */
.consent .tx a{cursor:pointer}
.pp-modal{
  /* リセット(*{margin:0})でdialog標準のセンタリングが消えるため明示指定 */
  position:fixed; inset:0; margin:auto;
  border:none; border-radius:var(--r); padding:0;
  width:min(680px, calc(100vw - 40px)); max-height:min(78vh, 720px);
  background:var(--white); color:var(--tx);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
}
.pp-modal::backdrop{background:rgba(30,33,33,.66); backdrop-filter:blur(4px)}
.pp-head{
  position:sticky; top:0; background:var(--white); z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px 16px; border-bottom:1px solid var(--line);
}
.pp-title{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:.02em}
.pp-close{
  width:36px; height:36px; border:none; border-radius:9999px; cursor:pointer;
  background:var(--paper); color:var(--ink); font-size:18px; line-height:1;
  transition:background .3s;
}
.pp-close:hover{background:rgba(198,173,130,.25)}
.pp-body{padding:20px 28px 32px; font-size:13.5px; line-height:1.95}
.pp-body h4{font-size:14px; font-weight:700; color:var(--ink); margin:22px 0 6px; letter-spacing:.02em}
.pp-body p{margin:0}
.pp-body p + p{margin-top:8px}
.pp-body ul{margin:6px 0 0; padding-left:1.4em; list-style:disc}
.pp-body li{margin-top:2px}
.pp-date{margin-top:26px !important; color:var(--tx-soft); font-size:12px}
@media (max-width:640px){
  .pp-head{padding:16px 20px 12px}
  .pp-body{padding:16px 20px 28px; font-size:13px}
}

/* ---------- fixed bottom CTA ---------- */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  background:rgba(30,33,33,.94); backdrop-filter:blur(14px); color:var(--tx-inv);
  display:flex; align-items:center; gap:20px; padding:14px clamp(20px,3vw,44px);
  transform:translateY(110%); transition:transform .6s var(--ease);
}
.cta-bar.show{transform:none}
.cta-bar p{flex:1; font-size:13px}
@media (max-width:760px){ .cta-bar p{display:none} .cta-bar{justify-content:center; padding:10px 14px; gap:10px} }