/* ============================================================
   東京ラストリゾート — CS-style design language（careerscout参考／自作再実装）
   ネイビー×ホワイトのブランドは維持し、構成・動きは継承
   ============================================================ */

/* ---- フッター：SNS丸アイコン・PAGE TOP（オシャレ寄せ） ---- */
.foot-social{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-block:26px;border-top:1px solid rgba(255,255,255,.09)}
.foot-social .sns{display:flex;gap:12px}
.sns-ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;color:rgba(255,255,255,.72);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.sns-ic svg{width:17px;height:17px}
.sns-ic:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-3px)}
.foot-pagetop{display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--label);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .3s var(--ease)}
.foot-pagetop .ar{width:1px;height:26px;background:currentColor;position:relative;transition:height .3s var(--ease)}
.foot-pagetop .ar::after{content:"";position:absolute;top:0;left:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-left:1px solid currentColor;transform:rotate(45deg)}
.foot-pagetop:hover{color:var(--gold-lite)}
.foot-pagetop:hover .ar{height:34px}

/* ---- Lenis 慣性スクロール ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---- スクロール進捗バー ---- */
.cs-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 0;background:linear-gradient(90deg,var(--gold-lite),var(--gold));z-index:200;pointer-events:none;box-shadow:0 0 12px rgba(31,79,122,.5)}

/* ---- ローディング / フェード遷移 ---- */
.cs-loading{position:fixed;inset:0;z-index:9998;background:var(--bg-navy);display:grid;place-items:center;transition:opacity .7s var(--ease),visibility .7s var(--ease)}
.cs-loading .m{font-family:var(--label);letter-spacing:.4em;text-transform:uppercase;color:var(--gold-lite);font-size:.72rem;opacity:.9;animation:csPulse 1.4s ease-in-out infinite}
.cs-loading img.m{width:min(230px,58vw);height:auto;letter-spacing:0}
@keyframes csPulse{0%,100%{opacity:.35}50%{opacity:1}}
body.cs-loaded .cs-loading{opacity:0;visibility:hidden}
body.cs-fadeout{opacity:.001;transition:opacity .5s ease}

/* ---- ヘッダー縮小（スクロール時） ---- */
#site-header{transition:box-shadow .3s var(--ease),background .3s var(--ease)}
#site-header.cs-shrink .bar{height:60px}
#site-header.cs-shrink{box-shadow:0 8px 30px -22px rgba(13,26,41,.7)}
.bar{transition:height .3s var(--ease)}

/* ---- 共通 ---- */
.cs-inner{max-width:1180px;margin-inline:auto;padding-inline:24px}
.cs-inner-lg{max-width:1320px;margin-inline:auto;padding-inline:24px}
.cs-sec{position:relative;overflow:hidden}
.cs-pad{padding-block:clamp(44px,6vw,86px)}

/* ---- 縦ガイドライン（全体を貫く薄い縦罫：careerscout の bg-line） ---- */
.cs-guides{position:fixed;top:0;bottom:0;left:0;right:0;z-index:4;pointer-events:none;max-width:1320px;margin-inline:auto;padding-inline:40px;display:flex;justify-content:space-between}
.cs-guides i{display:block;width:1px;height:100%;background:rgba(150,160,175,.12);mix-blend-mode:overlay}
@media(max-width:640px){.cs-guides{padding-inline:24px}.cs-guides i:nth-child(2),.cs-guides i:nth-child(4){display:none}}

/* ---- 斜めカット（写真の断ち切り） ---- */
.cut-bl{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}   /* 下辺が左下がり */
.cut-tr{clip-path:polygon(0 0,100% 10%,100% 100%,0 100%)}/* 上辺が右上がり */
.cut-both{clip-path:polygon(0 4%,100% 0,100% 96%,0 100%)}
.cut-diag{clip-path:polygon(0 0,100% 0,100% 100%,10% 100%)}

/* ---- ブルーの斜めジグザグ・アクセント線（careerscout の赤ジグザグ） ---- */
.cs-zig{position:absolute;z-index:3;pointer-events:none}
.cs-zig span{position:absolute;background:linear-gradient(90deg,rgba(220,233,246,0),var(--gold-lite) 30%,var(--gold) 70%,rgba(220,233,246,0));transform-origin:left center;box-shadow:0 0 20px rgba(31,79,122,.35)}
.cs-zig .z1{width:118vh;height:4px;transform:rotate(-50deg)}
.cs-zig .z2{display:none}

/* ---- 二段見出し（EN小＋JP大）: careerscout の ttl-01 相当 ---- */
.cs-ttl{display:flex;flex-direction:column;gap:.5em;margin-bottom:1.5em}
.cs-ttl .en{font-family:var(--label);font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-size:.74rem;display:inline-flex;align-items:center;gap:.7em}
.cs-ttl .en::before{content:"";width:14px;height:2px;background:var(--gold);display:inline-block;transform:rotate(-58deg) translateY(-1px)}
.cs-ttl .jp{font-family:var(--mincho);font-weight:700;font-size:clamp(1.55rem,3.6vw,2.5rem);line-height:1.45;color:var(--ink);letter-spacing:.03em}
.cs-ttl.on-dark .jp{color:#fff}.cs-ttl.on-dark .en{color:var(--gold-lite)}
.cs-ttl.center{align-items:center;text-align:center}
.cs-ttl.center .en::before{display:none}
.cs-lead{font-size:.98rem;line-height:2.05;color:var(--sub);max-width:60ch}
.cs-ttl.on-dark + .cs-lead,.cs-lead.on-dark{color:rgba(255,255,255,.8)}

/* ---- deco-line（斜め/縦の装飾線がスクロールで引かれる） ---- */
.cs-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.cs-deco span{position:absolute;top:-4%;height:108%;width:1px;background:currentColor;opacity:.10;transform:scaleY(0);transform-origin:top;transition:transform 1.15s var(--ease)}
.cs-deco span.g{background:var(--gold);opacity:.5;width:2px}
.cs-deco span:nth-child(1){left:12%;transition-delay:.02s}
.cs-deco span:nth-child(2){left:28%;transition-delay:.12s}
.cs-deco span:nth-child(3){left:50%;transition-delay:.22s}
.cs-deco span:nth-child(4){left:72%;transition-delay:.32s}
.cs-deco span:nth-child(5){left:88%;transition-delay:.42s}
.is-in .cs-deco span{transform:scaleY(1)}
/* 赤→ブルーのアクセントブロック（careerscout deco-red 相当） */
.cs-accent{position:absolute;width:64px;height:64px;background:var(--gold);opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s;z-index:2}
.is-in .cs-accent{opacity:1;transform:translateY(0)}

/* ---- reveal ---- */
.cs-fade{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-in.cs-fade,.is-in .cs-fade{opacity:1;transform:none}
.is-in .cs-fade{transition-delay:calc(var(--i,0) * .09s)}
/* 画像ワイプ */
.cs-anime{position:relative;overflow:hidden}
.cs-anime img{transform:scale(1.12);transition:transform 1.4s var(--ease)}
.cs-anime::after{content:"";position:absolute;inset:0;background:var(--bg-navy);transform:scaleX(1);transform-origin:right;transition:transform 1.1s var(--ease)}
.is-in.cs-anime img,.is-in .cs-anime img{transform:scale(1)}
.is-in.cs-anime::after,.is-in .cs-anime::after{transform:scaleX(0)}

/* ---- 流れる英字マーキー ---- */
.cs-marquee{overflow:hidden;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}
.cs-marquee .track{display:inline-flex;will-change:transform}
.cs-marquee .track span{font-family:var(--label);font-weight:500;text-transform:uppercase;letter-spacing:.06em;padding-right:.6em}

/* ---- ボタン（矢印つき） ---- */
.cs-btn{display:inline-flex;align-items:center;gap:1.1em;font-family:var(--label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;padding:18px 30px;border:1px solid currentColor;color:var(--ink);position:relative;transition:color .4s var(--ease),background .4s var(--ease)}
.cs-btn .ar{position:relative;width:34px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.cs-btn .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.cs-btn:hover .ar{width:46px}
.cs-btn.solid{background:var(--bg-navy);color:#fff;border-color:var(--bg-navy)}
.cs-btn.solid:hover{background:var(--gold);border-color:var(--gold)}
.cs-btn.gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.cs-btn.gold:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.cs-btn.ghost-d{color:#fff}
.cs-btn.ghost-d:hover{background:#fff;color:var(--bg-navy)}

/* ============================================================
   HERO（分割2面のクロスフェード＋大英字＋キャッチ）
   ============================================================ */
.cs-hero{position:relative;height:100svh;min-height:620px;background:var(--bg-navy);overflow:hidden;color:#fff}
.cs-hero__imgs{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.cs-hero__col{position:relative;overflow:hidden}
.cs-hero__col .l{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:csHeroFade 12s infinite;filter:grayscale(1) contrast(1.08) brightness(.72)}
.cs-hero__col.a .l1{animation-delay:0s}.cs-hero__col.a .l2{animation-delay:6s}
.cs-hero__col.b .l1{animation-delay:.4s}.cs-hero__col.b .l2{animation-delay:6.4s}
@keyframes csHeroFade{0%{opacity:0;transform:scale(1.14) translate(1.5%,1%)}6%{opacity:1}45%{opacity:1}52%{opacity:0}100%{opacity:0;transform:scale(1.02) translate(-1.5%,-1%)}}
/* 背景の無造作なドリフト（ゆっくり不規則に揺れる） */
@keyframes csDrift{0%{transform:scale(1.06) translate(0,0)}33%{transform:scale(1.09) translate(-1.4%,0.8%)}66%{transform:scale(1.07) translate(1.2%,-1.1%)}100%{transform:scale(1.06) translate(0,0)}}
/* ネイビーのモノトーン化（AI特有の色ムラを消す） */
.cs-hero__imgs::after{content:"";position:absolute;inset:0;z-index:1;background:var(--bg-navy);mix-blend-mode:color;opacity:.55}
.cs-hero::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(9,17,28,.7) 0%,rgba(9,17,28,.38) 42%,rgba(9,17,28,.82) 100%)}
/* グレイン（粒子）でエディトリアルな質感 */
.cs-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.10;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cs-hero__inner{position:relative;z-index:3;height:100%;max-width:1320px;margin-inline:auto;padding:0 40px;display:flex;flex-direction:column;justify-content:center}
.cs-hero__inner::before{content:"";position:absolute;left:clamp(22px,3vw,40px);top:50%;z-index:0;width:min(620px,52vw);height:clamp(470px,62vh,660px);transform:translate(-18px,-48%);opacity:0;background:linear-gradient(106deg,rgba(7,18,30,.76) 0%,rgba(9,17,28,.58) 62%,rgba(9,17,28,.32) 100%);border:1px solid rgba(220,233,246,.16);clip-path:polygon(0 0,91% 0,100% 10%,100% 100%,8% 100%,0 91%);box-shadow:0 28px 80px rgba(0,0,0,.32);-webkit-backdrop-filter:blur(1.5px) saturate(1.08);backdrop-filter:blur(1.5px) saturate(1.08);transition:opacity 1s var(--ease) .16s,transform 1.15s var(--ease) .16s}
.cs-hero__inner > *{position:relative;z-index:1}
body.cs-loaded .cs-hero.is-in .cs-hero__inner::before{opacity:1;transform:translate(0,-48%)}
.cs-hero__catch{font-family:var(--mincho);font-weight:700;font-size:clamp(1.5rem,3.3vw,2.55rem);line-height:1.42;letter-spacing:.04em;margin-bottom:.45em;opacity:0;transform:translateY(30px);animation:csUp 1s var(--ease) .5s forwards}
.cs-hero__catch b{color:var(--gold-lite);font-weight:700}
.cs-hero__en{display:block;font-family:var(--label);font-weight:600;font-size:clamp(2.8rem,6.4vw,5.65rem);line-height:.8;letter-spacing:.01em;color:#fff;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(30px);animation:csUp 1.1s var(--ease) .7s forwards;text-shadow:0 8px 40px rgba(0,0,0,.35)}
.cs-hero__en span{display:block}
.cs-hero__row{display:flex;align-items:flex-end;gap:34px;margin-top:.7em;flex-wrap:wrap}
.cs-hero__en2{font-family:var(--label);font-weight:600;font-size:clamp(1.4rem,3vw,2.4rem);line-height:1;color:var(--gold-lite)}
.cs-hero__txt{font-size:.9rem;line-height:2;color:rgba(255,255,255,.82);opacity:0;animation:csFadeIn 1s ease .95s forwards}
/* 文字の下の小さな図形（斜めの二重ライン＋ドット） */
.cs-hero__mark{position:relative;height:14px;margin-top:22px;opacity:0;animation:csFadeIn 1s ease 1.15s forwards}
.cs-hero__mark span{position:absolute;left:0;top:0;height:3px;width:64px;background:var(--gold);transform:skewX(-42deg)}
.cs-hero__mark span:nth-child(2){top:9px;left:20px;width:40px;height:1.5px;background:rgba(220,233,246,.65)}
.cs-hero__mark span:nth-child(3){top:1px;left:74px;width:6px;height:6px;background:var(--gold-lite);border-radius:50%;transform:none}
.cs-hero__copy{position:absolute;right:40px;bottom:26px;z-index:3;font-family:var(--label);letter-spacing:.14em;font-size:.62rem;color:rgba(255,255,255,.5)}
.cs-hero .cs-deco span{opacity:.16}
@keyframes csUp{to{opacity:1;transform:none}}
@keyframes csFadeIn{to{opacity:1}}
@keyframes csScrollHint{0%{transform:translateY(0);opacity:.9}60%{transform:translateY(14px);opacity:0}100%{opacity:0}}
.cs-hero__scroll{position:absolute;left:40px;bottom:24px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--label);font-size:.58rem;letter-spacing:.24em;color:rgba(255,255,255,.6)}
.cs-hero__scroll i{width:1px;height:44px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.cs-hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:1px;height:16px;background:var(--gold-lite);animation:csScrollHint 1.8s var(--ease) infinite}

/* ============================================================
   BLIND（スクロールで斜めブラインドが開く・ピン留め）
   ============================================================ */
.cs-blind{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--bg-navy)}
.cs-blind::before{content:"";position:absolute;inset:-18%;z-index:1;pointer-events:none;opacity:.16;background:repeating-linear-gradient(108deg,transparent 0 58px,rgba(220,233,246,.34) 59px 60px,transparent 61px 122px);mix-blend-mode:screen;animation:csBlindFlow 18s linear infinite}
.cs-blind::after{content:"";position:absolute;left:50%;top:52%;z-index:1;width:min(82vmin,620px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.2;background:radial-gradient(circle,transparent 0 34%,rgba(220,233,246,.3) 34.4% 34.8%,transparent 35.2% 54%,rgba(255,255,255,.18) 54.4% 54.8%,transparent 55.2% 72%,rgba(220,233,246,.24) 72.4% 72.8%,transparent 73.2%),conic-gradient(from 18deg,transparent 0 18%,rgba(220,233,246,.48) 19%,transparent 21% 46%,rgba(255,255,255,.22) 47%,transparent 49% 100%);animation:csBlindSpin 36s linear infinite;mix-blend-mode:screen}
@keyframes csBlindFlow{to{transform:translate3d(11%,0,0)}}
@keyframes csBlindSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.cs-blind__bg{position:absolute;inset:0;z-index:0}
.cs-blind__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cs-blind__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,17,28,.55),rgba(9,17,28,.8))}
.cs-blind__panels{position:absolute;inset:0;z-index:2;display:flex}
/* アプリ内ブラウザ（is-inapp）：mix-blend-mode 系の装飾はGPU負荷が高くガタつくため停止。
   ヒーローの色被せはブレンドをやめて半透明ネイビーで近似（画像はグレースケール済みでほぼ同じ見え方） */
html.is-inapp .cs-hero::after{display:none}
html.is-inapp .cs-hero__imgs::after{mix-blend-mode:normal;opacity:.55}
html.is-inapp .cs-blind::before,html.is-inapp .cs-blind::after,html.is-inapp .cs-blind__text::before{display:none}
/* backdrop-filter はスクロール毎フレームの再ぼかしが走り WebView が最も苦手なため無効化
   （ヘッダーはほぼ不透明な白、CTAは元々95%不透明、FVパネルは濃いグラデで見た目は維持される） */
html.is-inapp header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.985)}
html.is-inapp .cs-fixcta__main{-webkit-backdrop-filter:none;backdrop-filter:none}
html.is-inapp .cs-hero__inner::before{-webkit-backdrop-filter:none;backdrop-filter:none}
/* FV背景のクロスフェード＝全画面filter付き4枚の常時合成も重いので、1枚目を静止表示 */
html.is-inapp .cs-hero__col .l{animation:none}
html.is-inapp .cs-hero__col .l1{opacity:1;transform:none}
/* ツールバー開閉によるWebViewリサイズでセクションが伸縮しないよう、高さをJS計測のpx値で固定。
   vh/svh 連動の要素（min-height・FVパネル・同心円デコ・斜めライン）もすべて --inapp-vh 基準に置換 */
html.is-inapp .cs-hero,html.is-inapp .cs-blind{height:var(--inapp-vh,100svh)}
html.is-inapp .cs-hero{min-height:620px}
html.is-inapp .cs-hero__deco{width:clamp(420px,calc(var(--inapp-vh,100svh)*.66),780px)}
html.is-inapp .cs-zig .z1{width:calc(var(--inapp-vh,100svh)*1.18)}
@media(max-width:768px){
  html.is-inapp .cs-hero__inner::before{height:clamp(475px,calc(var(--inapp-vh,100svh)*.6),545px)}
}
.cs-blind__panels i{flex:1;height:120%;margin-top:-10%;background:var(--bg-navy);transform:skewX(-8deg);transform-origin:top;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.cs-blind__panels i:nth-child(even){background:var(--navy-2)}
.cs-blind__content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:0 24px;pointer-events:none}
.cs-blind__text{position:relative;will-change:transform}
.cs-blind__text::before{content:"";position:absolute;inset:-18% -24%;z-index:0;background:linear-gradient(112deg,transparent 0 34%,rgba(220,233,246,.18) 46%,rgba(255,255,255,.12) 50%,transparent 62% 100%);transform:translateX(-42%);animation:csBlindSweep 6.4s var(--ease) infinite;mix-blend-mode:screen;pointer-events:none}
.cs-blind__text > *{position:relative;z-index:1}
@keyframes csBlindSweep{0%,18%{transform:translateX(-48%);opacity:0}42%{opacity:1}78%,100%{transform:translateX(48%);opacity:0}}
.cs-blind__content .en{font-family:var(--label);font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-lite);font-size:.95rem;margin-bottom:1.1em;display:inline-block}
.cs-blind__content h2{font-family:var(--mincho);font-weight:700;font-size:clamp(2.4rem,6.8vw,5rem);line-height:1.3;letter-spacing:.02em}
.cs-blind__content h2 b{color:var(--gold-lite)}
.cs-blind__h .ln{display:block;overflow:hidden;padding:.06em 0}
.cs-blind__h .ln .in{display:inline-block;will-change:transform}

/* ============================================================
   PICKUP（対応領域ストリップ・ネイビー）
   ============================================================ */
.cs-strip{background:var(--bg-navy);color:#fff}
.cs-strip .cs-ttl{margin-bottom:1.6em}
.cs-strip__list{display:grid;grid-template-columns:1fr;gap:0}
.cs-strip__item{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:34px 28px;border-bottom:1px solid rgba(255,255,255,.12)}
.cs-strip__item:first-child{border-top:1px solid rgba(255,255,255,.12)}
.cs-strip__bg{position:absolute;inset:0;z-index:0}
.cs-strip__bg img{width:100%;height:100%;object-fit:cover;opacity:.32;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1s var(--ease)}
.cs-strip__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,17,28,.9) 20%,rgba(9,17,28,.55) 65%,rgba(9,17,28,.72))}
.cs-strip__item:hover .cs-strip__bg img{opacity:.55}
/* 無造作なドリフト（周期をバラして不規則に） */
.cs-strip__bg img{animation:csDrift 19s ease-in-out infinite}
.cs-strip__item:nth-child(2) .cs-strip__bg img{animation-duration:24s;animation-delay:-5s}
.cs-strip__item:nth-child(3) .cs-strip__bg img{animation-duration:15s;animation-delay:-9s}
.cs-strip__item:nth-child(4) .cs-strip__bg img{animation-duration:27s;animation-delay:-2s}
.cs-strip__item:nth-child(5) .cs-strip__bg img{animation-duration:21s;animation-delay:-13s}
.cs-about__card .bg img{animation:csDrift 23s ease-in-out infinite}
.cs-about__card:nth-child(2) .bg img{animation-duration:29s;animation-delay:-8s}
.cs-strip__item > :not(.cs-strip__bg){position:relative;z-index:1}
.cs-strip__no{font-family:var(--label);font-size:1rem;color:var(--gold-lite);letter-spacing:.1em}
.cs-strip__ttl{font-family:var(--mincho);font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:700;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.cs-strip__ttl small{display:block;font-family:var(--label);font-weight:400;font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.62);text-transform:uppercase;margin-top:.45em}
.cs-strip__ar{width:38px;height:1px;background:var(--gold);position:relative;transition:width .4s var(--ease)}
.cs-strip__item:hover .cs-strip__ar{width:54px}
.cs-strip__ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg)}

/* ============================================================
   MISSION（理念＋画像クラスター）
   ============================================================ */
.cs-mission{background:var(--bg-alt)}
.cs-mission__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.cs-mission__body .cs-lead{margin-top:0}
.cs-mission__imgs{position:relative;height:520px}
.cs-mission__imgs .im{position:absolute;overflow:hidden;box-shadow:0 30px 60px -30px rgba(13,26,41,.4)}
.cs-mission__imgs .im img{width:100%;height:100%;object-fit:cover}
.cs-mission__imgs .im1{width:64%;height:64%;top:0;left:0}
.cs-mission__imgs .im2{width:46%;height:40%;bottom:0;right:0}
.cs-mission__imgs .im3{width:34%;height:30%;bottom:6%;left:8%;border:6px solid var(--bg-alt)}

/* ============================================================
   FEATURE（選ばれる理由 / ダーク画像背景に番号リスト）
   ============================================================ */
.cs-feature{position:relative;color:#fff;background:var(--bg-navy)}
.cs-feature .cs-inner{position:relative;z-index:2}
/* 画像＋巨大見出しの食い込み（careerscout FEATURE） */
.cs-feature__hero{position:relative;margin-bottom:clamp(24px,4vw,44px)}
.cs-feature__img{aspect-ratio:16/6.6;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 82%,80% 100%,0 100%)}
.cs-feature__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}
.cs-feature__head{position:relative;z-index:2;margin-top:-0.62em;padding-left:.02em}
.cs-feature__en{display:block;font-family:var(--label);font-weight:600;font-size:clamp(3.2rem,11vw,8rem);line-height:.82;text-transform:uppercase;letter-spacing:.005em;text-shadow:0 8px 40px rgba(0,0,0,.55)}
.cs-feature__jp{display:block;font-family:var(--mincho);font-weight:700;font-size:clamp(1.35rem,3vw,2rem);margin-top:.4em;color:#fff}
.cs-feature__list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.cs-feature__list li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.96rem;line-height:1.8}
.cs-feature__list .num{font-family:var(--label);font-weight:600;font-size:1.2rem;color:var(--gold-lite);line-height:1.4}

/* ============================================================
   BUSINESS（5事業・番号／マーキー）
   ============================================================ */
.cs-biz{position:relative;background:var(--bg-navy);color:#fff;padding-bottom:clamp(60px,8vw,110px)}
.cs-biz__marquee{color:rgba(255,255,255,.05);font-size:clamp(4rem,13vw,11rem);line-height:1;padding-block:.1em .3em}
.cs-biz__head{max-width:1180px;margin-inline:auto;padding-inline:24px;margin-top:-1.2em;position:relative;z-index:2}
.cs-biz__list{max-width:1320px;margin:36px auto 0;padding-inline:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
/* 写真全面＋オーバーレイ＋文字（careerscout流） */
.cs-biz__item{position:relative;overflow:hidden;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px 30px;color:#fff}
.cs-biz__bg{position:absolute;inset:0;z-index:0}
.cs-biz__bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.cs-biz__item:hover .cs-biz__bg img{transform:scale(1.07)}
.cs-biz__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,17,28,.18) 0%,rgba(9,17,28,.5) 52%,rgba(9,17,28,.9) 100%)}
.cs-biz__item > :not(.cs-biz__bg){position:relative;z-index:1}
.cs-biz__num{font-family:var(--label);font-weight:600;font-size:1.05rem;color:#fff;letter-spacing:.06em;margin-bottom:auto}
.cs-biz__label{font-family:var(--gothic);font-weight:700;font-size:1.04rem;letter-spacing:.04em;margin-bottom:.3em}
.cs-biz__en{font-family:var(--label);font-weight:600;font-size:1.72rem;line-height:1.08;letter-spacing:.01em;text-transform:uppercase;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.cs-biz__circ{margin-top:22px}
.cs-biz__item:hover .cs-circ{background:var(--gold);border-color:var(--gold);color:#fff}
.cs-biz__tag{position:absolute;top:0;right:0;z-index:1;background:var(--gold);color:#fff;font-family:var(--label);font-size:.58rem;letter-spacing:.12em;padding:6px 13px}
.cs-biz__cta{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#142b43 0%,#0a1522 68%);display:flex;flex-direction:column;justify-content:center;padding:42px 34px;min-height:400px;clip-path:polygon(0 0,100% 0,100% 90%,88% 100%,0 100%)}
.cs-biz__cta::before{content:"CONSULT";position:absolute;right:-.18em;bottom:-.05em;z-index:-1;font-family:var(--label);font-weight:600;font-size:clamp(4.7rem,10vw,8.5rem);line-height:.8;letter-spacing:.02em;color:rgba(255,255,255,.035);text-transform:uppercase}
.cs-biz__cta::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(112deg,transparent 0 34px,rgba(220,233,246,.22) 35px 36px,transparent 37px 78px),radial-gradient(circle at 18% 24%,rgba(220,233,246,.22),transparent 34%);mix-blend-mode:screen;opacity:.8}
.cs-biz__cta-ttl{margin-bottom:1em}
.cs-biz__cta-ttl .jp{font-size:clamp(1.32rem,2.5vw,1.65rem);line-height:1.4}
.cs-biz__cta-txt{color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.9;margin-bottom:1.6em;max-width:28em}
.cs-biz__cta-btn{align-self:flex-start;background:rgba(31,79,122,.94);color:#fff;border-color:rgba(31,79,122,.94);min-width:230px;justify-content:space-between;box-shadow:0 18px 44px -24px rgba(31,79,122,.72)}
.cs-biz__cta-btn:hover{background:#fff;border-color:#fff;color:var(--bg-navy)}

/* ============================================================
   CTA バンド
   ============================================================ */
.cs-band{position:relative;color:#fff;text-align:center;overflow:hidden}
.cs-band__bg{position:absolute;inset:0;z-index:0}
.cs-band__bg img{width:100%;height:100%;object-fit:cover}
.cs-band__bg::after{content:"";position:absolute;inset:0;background:rgba(9,17,28,.72)}
.cs-band .cs-inner{position:relative;z-index:2}
.cs-band h2{font-family:var(--mincho);font-size:clamp(1.5rem,3.6vw,2.4rem);font-weight:700;margin-bottom:.6em;line-height:1.5}
.cs-band p{color:rgba(255,255,255,.82);margin-bottom:2em}
.cs-band .cs-deco span{opacity:.2}

/* ============================================================
   NEWS / COLUMN グリッド
   ============================================================ */
.cs-news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.cs-news__card{display:block;transition:transform .4s var(--ease)}
.cs-news__card:hover{transform:translateY(-6px)}
.cs-news__media{aspect-ratio:16/9;overflow:hidden;margin-bottom:18px;background:var(--bg-alt);clip-path:polygon(0 0,100% 0,100% 86%,88% 100%,0 100%)}
.cs-news__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cs-news__card:hover .cs-news__media img{transform:scale(1.05)}
.cs-news__meta{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.cs-news__meta time{font-family:var(--label);font-size:.74rem;letter-spacing:.08em;color:var(--sub)}
.cs-news__meta .c{font-family:var(--label);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--bg-navy);padding:3px 10px}
.cs-news__card h3{font-size:1rem;line-height:1.6;font-weight:700}

/* ============================================================
   ABOUT 2カード
   ============================================================ */
.cs-about{position:relative;overflow:hidden}
.cs-about__wm{position:absolute;right:-1.5%;top:1%;z-index:0;font-family:var(--label);font-weight:700;font-size:clamp(6rem,20vw,17rem);line-height:.8;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);opacity:.04;pointer-events:none;user-select:none}
.cs-about__grid{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(18px,2.6vw,38px);align-items:start;position:relative;z-index:1}
.cs-about__card{position:relative;overflow:hidden;min-height:clamp(360px,40vw,470px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:clamp(28px,3vw,46px);clip-path:polygon(0 0,100% 0,100% 89%,89% 100%,0 100%)}
.cs-about__card.b{margin-top:clamp(38px,7vw,104px);clip-path:polygon(0 0,100% 0,100% 100%,11% 100%,0 89%)}
.cs-about__card .bg{position:absolute;inset:0;z-index:0}
.cs-about__card .bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);filter:grayscale(.12) contrast(1.03)}
.cs-about__card:hover .bg img{transform:scale(1.07)}
.cs-about__card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(13,26,41,.12) 30%,rgba(13,26,41,.86))}
.cs-about__no{position:relative;z-index:2;font-family:var(--label);font-weight:600;font-size:1rem;letter-spacing:.16em;color:var(--gold-lite);margin-bottom:auto}
.cs-about__card .tx{position:relative;z-index:2;max-width:36ch}
.cs-about__card .e{font-family:var(--label);font-weight:600;letter-spacing:.04em;font-size:clamp(1.7rem,3.2vw,2.5rem);text-transform:uppercase;display:block;line-height:.98;margin-bottom:.34em}
.cs-about__card .j{display:block;font-family:var(--mincho);font-weight:700;font-size:1.02rem;color:#fff;letter-spacing:.05em;margin-bottom:.7em}
.cs-about__card p{font-size:.86rem;line-height:1.9;color:rgba(255,255,255,.82);max-width:33ch}
.cs-about__card .cs-about__circ{position:absolute;top:clamp(24px,3vw,42px);right:clamp(24px,3vw,42px)}

/* ============================================================
   FOOTER CTA（大画像＋マーキー＋2列CTA）— 既存footerの上に載せる
   ============================================================ */
.cs-fcta{position:relative;color:#fff;overflow:hidden}
.cs-fcta__bg{position:absolute;inset:0;z-index:0}
.cs-fcta__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cs-fcta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,26,41,.8),rgba(13,26,41,.92))}
.cs-fcta__marquee{position:relative;z-index:2;color:rgba(255,255,255,.08);font-size:clamp(3rem,10vw,8rem);line-height:1;padding-top:.2em}
.cs-fcta__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 24px clamp(60px,8vw,96px)}
.cs-fcta__row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 0;border-top:1px solid rgba(255,255,255,.16)}
.cs-fcta__row:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.cs-fcta__row .e{font-family:var(--label);font-weight:600;font-size:1.5rem;letter-spacing:.1em;text-transform:uppercase}
.cs-fcta__row .j{font-size:.9rem;color:rgba(255,255,255,.78);margin-top:.3em}

/* ============================================================
   下層ページ：ページタイトルヒーロー＋左固定アンカーナビ
   ============================================================ */
.cs-pagehero{position:relative;height:clamp(260px,34vw,390px);background:var(--bg-navy);color:#fff;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.cs-pagehero__bg{position:absolute;inset:0;display:grid;grid-template-columns:1.18fr .82fr;transform:scale(1.02)}
.cs-pagehero__bg .h{background-size:cover;background-position:center;filter:grayscale(.22) contrast(1.08);opacity:.88}
.cs-pagehero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,17,28,.84) 0%,rgba(9,17,28,.5) 48%,rgba(9,17,28,.78) 100%)}
.cs-pagehero::after{content:"";position:absolute;right:-2%;bottom:0;z-index:1;width:min(38vw,520px);height:74%;background:linear-gradient(135deg,rgba(220,233,246,.32),rgba(9,17,28,.04) 58%);clip-path:polygon(20% 0,100% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:.85}
.cs-pagehero__inner{position:relative;z-index:2;max-width:1320px;margin-inline:auto;width:100%;padding:0 40px clamp(30px,4vw,54px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(20px,4vw,70px)}
.cs-pagehero__inner::after{content:"";display:block;width:clamp(90px,14vw,190px);height:1px;margin-bottom:.85rem;background:linear-gradient(90deg,var(--gold-lite),rgba(220,233,246,0))}
.cs-pagehero__en{font-family:var(--label);font-weight:600;font-size:clamp(2.5rem,6vw,4.9rem);line-height:.92;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 10px 34px rgba(0,0,0,.34)}
.cs-pagehero__jp{font-family:var(--mincho);font-weight:700;font-size:.96rem;letter-spacing:.16em;color:var(--gold-lite);margin-top:.8em;display:inline-flex;align-items:center;gap:10px}
.cs-pagehero__jp::before{content:"";width:18px;height:2px;background:var(--gold);display:inline-block;transform:skewX(-32deg)}
.cs-pagehero.is-company .cs-pagehero__bg{grid-template-columns:.92fr 1.08fr}
.cs-pagehero.is-contact .cs-pagehero__bg{grid-template-columns:.72fr 1.28fr}
.cs-pagehero.is-contact .cs-pagehero__inner{text-align:right}
.cs-pagehero.is-news .cs-pagehero__bg{grid-template-columns:1.32fr .68fr}
.cs-pagehero.is-sustainability .cs-pagehero__bg{grid-template-columns:.8fr 1.2fr}
.cs-pagehero.is-company::after,.cs-pagehero.is-news::after{right:auto;left:-2%;transform:scaleX(-1)}
.cs-crumb{background:var(--bg-alt);font-size:.74rem;color:var(--sub)}
.cs-crumb .cs-inner{padding-block:14px;display:flex;gap:10px;align-items:center}
.cs-crumb a{color:var(--sub)}.cs-crumb a:hover{color:var(--gold-deep)}

.cs-doc{display:grid;grid-template-columns:180px 1fr;gap:56px;align-items:start}
@media(max-width:820px){.cs-doc{grid-template-columns:1fr;gap:0}.cs-doc .cs-sidenav{display:none}}
.cs-sidenav{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px}
.cs-sidenav a{font-family:var(--label);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);padding:10px 0 10px 34px;position:relative;transition:color .3s var(--ease)}
.cs-sidenav a::before{content:"";position:absolute;left:0;top:50%;width:22px;height:1px;background:var(--line);transition:width .3s var(--ease),background .3s var(--ease)}
.cs-sidenav a.current,.cs-sidenav a:hover{color:var(--ink)}
.cs-sidenav a.current::before{width:30px;background:var(--gold)}

/* ============================================================
   下層：事業詳細ブロック（画像×テキスト交互・大きめ画像）
   ============================================================ */
.cs-detail{position:relative}
.cs-detail + .cs-detail{border-top:1px solid var(--line)}
.cs-detail__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cs-detail.rev .cs-detail__grid{grid-template-columns:.95fr 1.05fr}
.cs-detail.rev .cs-detail__media{order:2}
.cs-detail__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-navy);clip-path:polygon(0 0,100% 0,100% 86%,90% 100%,0 100%)}
.cs-detail.rev .cs-detail__media{clip-path:polygon(0 0,100% 0,100% 100%,10% 100%,0 86%)}
.cs-detail__media img{width:100%;height:100%;object-fit:cover}
.cs-detail__media .badge{position:absolute;top:0;left:0;background:var(--gold);color:#fff;font-family:var(--label);font-size:.62rem;letter-spacing:.14em;padding:6px 14px;z-index:2}
.cs-detail__no{position:absolute;right:18px;bottom:12px;font-family:var(--label);font-weight:600;font-size:2.6rem;color:rgba(255,255,255,.85);z-index:2;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.cs-detail__body h2{font-family:var(--mincho);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin:.2em 0 .5em}
.cs-detail__body .e{font-family:var(--label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-size:.72rem}
.cs-detail__body p{color:var(--sub);line-height:2}
.cs-detail__body .cs-btn{margin-top:1.6em}
.cs-detail__media.shot img{object-position:top center}
.cs-detail__media.link{cursor:pointer}
.cs-detail__media.link .ext{position:absolute;right:0;bottom:0;z-index:2;background:rgba(9,17,28,.85);color:#fff;font-family:var(--label);font-size:.62rem;letter-spacing:.1em;padding:8px 14px;display:flex;align-items:center;gap:8px}
.cs-detail__media.link:hover img{transform:scale(1.04);transition:transform .8s var(--ease)}

/* ============================================================
   会社概要テーブル / 沿革 / アクセス
   ============================================================ */
.cs-table{width:100%;border-collapse:collapse;font-size:.94rem}
.cs-table th,.cs-table td{text-align:left;padding:20px 8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.9}
.cs-table th{width:26%;font-weight:700;color:var(--ink);white-space:nowrap}
.cs-table td{color:var(--sub)}
.cs-history{border-left:2px solid var(--line);margin-left:8px}
.cs-history li{position:relative;padding:0 0 30px 34px}
.cs-history li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--bg)}
.cs-history .y{font-family:var(--label);font-weight:600;color:var(--gold-deep);letter-spacing:.06em;margin-bottom:.3em}
.cs-map{aspect-ratio:16/7;background:var(--bg-alt);overflow:hidden}
.cs-map iframe{width:100%;height:100%;border:0}

/* ============================================================
   お問い合わせフォーム（cs調）
   ============================================================ */
.cs-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;max-width:820px;margin-inline:auto}
.cs-form .full{grid-column:1/-1}
.cs-form label{display:block;font-size:.82rem;font-weight:700;margin-bottom:8px;color:var(--ink)}
.cs-form label .req{background:var(--gold);color:#fff;font-size:.6rem;padding:2px 8px;margin-left:8px;font-weight:500;letter-spacing:.06em}
.cs-form input,.cs-form select,.cs-form textarea{width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:.95rem;color:var(--ink);transition:border-color .3s var(--ease)}
.cs-form input:focus,.cs-form select:focus,.cs-form textarea:focus{outline:none;border-color:var(--gold)}
.cs-form textarea{min-height:150px;resize:vertical}
.cs-form .submit{text-align:center;margin-top:8px}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media(max-width:1000px){
  .cs-mission__grid{grid-template-columns:1fr;gap:40px}
  .cs-mission__imgs{height:60vw;min-height:320px}
  .cs-feature__list{grid-template-columns:1fr;gap:0}
  .cs-biz__list{grid-template-columns:1fr 1fr}
  .cs-news__grid{grid-template-columns:1fr 1fr}
  /* About：モバイルは全幅（画面端まで）で見せる */
  .cs-about__grid{grid-template-columns:1fr;gap:2px;width:100vw;margin-left:calc(50% - 50vw)}
  .cs-about__card{clip-path:none;min-height:76vw}
  .cs-about__card.b{margin-top:0}
  .cs-about__card .tx{max-width:none}
}
@media(max-width:1000px){
  .cs-detail__grid,.cs-detail.rev .cs-detail__grid{grid-template-columns:1fr;gap:28px}
  .cs-detail.rev .cs-detail__media{order:0}
  .cs-form{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cs-hero__inner,.cs-pagehero__inner{padding-inline:22px}
  .cs-hero__inner::before{left:12px;right:14px;top:51%;width:auto;height:clamp(475px,60svh,545px);transform:translate(-14px,-48%);background:linear-gradient(105deg,rgba(7,18,30,.74) 0%,rgba(9,17,28,.56) 64%,rgba(9,17,28,.32) 100%);clip-path:polygon(0 0,90% 0,100% 9%,100% 100%,7% 100%,0 92%)}
  body.cs-loaded .cs-hero.is-in .cs-hero__inner::before{transform:translate(0,-48%)}
  .cs-hero__imgs{grid-template-columns:1fr}
  .cs-hero__imgs .cs-hero__col.b{display:none}
  .cs-biz__list{grid-template-columns:1fr}
  .cs-news__grid{grid-template-columns:1fr}
  .cs-strip__item{grid-template-columns:auto 1fr;gap:16px;padding:22px 16px}
  .cs-strip__ar{display:none}
  .cs-fcta__row{flex-direction:column;align-items:flex-start;gap:14px}
  .cs-hero__scroll{display:none}
  .cs-pagehero__bg,
  .cs-pagehero.is-company .cs-pagehero__bg,
  .cs-pagehero.is-contact .cs-pagehero__bg,
  .cs-pagehero.is-news .cs-pagehero__bg,
  .cs-pagehero.is-sustainability .cs-pagehero__bg{grid-template-columns:1fr}
  .cs-pagehero{height:clamp(210px,58vw,260px)}
  .cs-pagehero::after{width:58vw;height:64%;opacity:.62}
  .cs-pagehero__inner{display:block}
  .cs-pagehero__inner::after{display:none}
  .cs-pagehero.is-contact .cs-pagehero__inner{text-align:left}
  .cs-table th{width:34%;white-space:normal}
}

/* ============================================================
   丸い固定CTA（careerscout の スカウト/クイック ボタン）
   ============================================================ */
.cs-fixcta{position:fixed;right:28px;bottom:28px;z-index:90;display:flex;align-items:center;gap:10px}
.cs-fixcta a{transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.cs-fixcta__tel{width:50px;height:50px;border-radius:50%;background:var(--bg-navy);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -14px rgba(13,26,41,.75)}
.cs-fixcta__tel svg{width:20px;height:20px}
.cs-fixcta__tel:hover{background:var(--navy-2);transform:translateY(-3px)}
.cs-fixcta__main{display:flex;align-items:center;gap:11px;background:var(--gold);color:#fff;border-radius:999px;padding:13px 22px;box-shadow:0 14px 30px -16px rgba(31,79,122,.72)}
.cs-fixcta__main .t{display:flex;flex-direction:column;line-height:1.15}
.cs-fixcta__main .t b{font-family:var(--gothic);font-weight:700;font-size:.88rem;letter-spacing:.04em}
.cs-fixcta__main .t small{font-family:var(--label);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.cs-fixcta__main .ic{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.cs-fixcta__main .ic svg{width:14px;height:14px}
.cs-fixcta__main:hover{background:var(--gold-deep);transform:translateY(-3px)}
@media(max-width:640px){
  body{padding-bottom:64px}
  .cs-fixcta{left:auto;right:14px;bottom:max(14px,env(safe-area-inset-bottom));gap:8px}
  .cs-fixcta__tel{width:44px;height:44px;flex:none;box-shadow:0 12px 28px -14px rgba(13,26,41,.85)}
  .cs-fixcta__tel svg{width:18px;height:18px}
  .cs-fixcta__main{flex:0 0 auto;min-width:154px;justify-content:center;padding:12px 14px;gap:8px;background:rgba(31,79,122,.95);box-shadow:0 12px 28px -16px rgba(31,79,122,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .cs-fixcta__main .t b{font-size:.78rem}
  .cs-fixcta__main .t small{display:none}
  .cs-fixcta__main .ic{width:24px;height:24px}
  .cs-fixcta__main .ic svg{width:12px;height:12px}
}

/* ============================================================
   円形の矢印ボタン（careerscout の丸アロー）
   ============================================================ */
.cs-circ{width:52px;height:52px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;position:relative;flex:none;transition:background .4s var(--ease),color .4s var(--ease)}
.cs-circ::after{content:"";width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-left:-3px}
a:hover > .cs-circ,.cs-circ:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ============================================================
   FLOW（ご相談の流れ・番号ステップ）
   ============================================================ */
.cs-flow{position:relative;overflow:hidden}
.cs-flow__wm{position:absolute;left:-1%;bottom:-6%;z-index:0;font-family:var(--label);font-weight:700;font-size:clamp(6rem,24vw,22rem);line-height:.8;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);opacity:.035;pointer-events:none;user-select:none}
.cs-flow .cs-inner{position:relative;z-index:1}
.cs-flow__head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(18px,3vw,48px);flex-wrap:wrap;margin-bottom:clamp(30px,4vw,58px)}
.cs-flow__lead{color:var(--sub);font-size:.9rem;line-height:1.95;max-width:30em}
.cs-flow__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,22px)}
.cs-flow__step{position:relative;padding:clamp(26px,2.3vw,38px) clamp(20px,1.7vw,28px);background:var(--bg);border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cs-flow__step:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(13,26,41,.12)}
.cs-flow__step .n{font-family:var(--label);font-weight:600;font-size:clamp(2.4rem,3.2vw,3rem);color:var(--gold);line-height:1;display:block;letter-spacing:.02em}
.cs-flow__step .e{font-family:var(--label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin:1em 0 .3em}
.cs-flow__step h3{font-family:var(--mincho);font-size:1.18rem;font-weight:700;margin-bottom:.55em;letter-spacing:.03em}
.cs-flow__step p{font-size:.86rem;line-height:1.85;color:var(--sub)}
@media(max-width:900px){.cs-flow__grid{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:520px){.cs-flow__grid{grid-template-columns:1fr}}
/* ============================================================
   SP：大きく・大胆に＋モーション強化
   ============================================================ */
@media(max-width:768px){
  /* ヒーローを大きく */
  .cs-hero{min-height:92svh}
  .cs-hero__catch{font-size:clamp(1.55rem,6.9vw,2.16rem);line-height:1.42;margin-bottom:.45em}
  .cs-hero__en{font-size:clamp(3.4rem,15.2vw,4.8rem);line-height:.82;white-space:normal}
  .cs-hero__en2{font-size:clamp(1.2rem,5.7vw,1.42rem)}
  .cs-hero__row{gap:14px;margin-top:.75em}
  .cs-hero__txt{font-size:.82rem;line-height:1.85}
  /* 見出しを大きく */
  .cs-ttl{margin-bottom:1.2em}
  .cs-ttl .jp{font-size:clamp(1.7rem,7.6vw,2.3rem);line-height:1.4}
  .cs-blind__content h2{font-size:clamp(1.85rem,7.7vw,2.9rem);line-height:1.32}
  .cs-blind__content .en{font-size:.82rem}
  /* SPはBlind装飾の常時アニメがスクロールのカクつき要因になるため停止（静止表示は維持） */
  .cs-blind::before,.cs-blind::after{animation:none !important}
  /* スイープは静止させると光の筋が固定表示されるため非表示 */
  .cs-blind__text::before{display:none}
  /* 画像を大きく見せる */
  .cs-strip__item{padding:34px 18px;min-height:120px}
  .cs-strip__bg img{opacity:.42}
  .cs-strip__ttl{font-size:1.4rem}
  .cs-strip__no{font-size:1.1rem}
  .cs-biz__media{aspect-ratio:16/11}
  .cs-detail__media{aspect-ratio:3/2}
  .cs-news__media{aspect-ratio:16/10}
  .cs-about__card{min-height:300px;padding:34px}
  .cs-mission__imgs{height:78vw;min-height:340px}
  /* 事業カードの高さを低く */
  .cs-biz__item{min-height:300px;padding:28px 24px}
  .cs-biz__en{font-size:1.5rem}
  .cs-biz__cta{min-height:auto;padding:32px 24px}
  /* お知らせ：横スクロール（カルーセル） */
  .cs-news__grid{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:-22px;padding:0 22px 12px;scrollbar-width:none}
  .cs-news__grid::-webkit-scrollbar{display:none}
  .cs-news__card{flex:0 0 82%;scroll-snap-align:start}
  /* 登場モーションを大きく */
  .cs-fade{transform:translateY(46px) scale(.985)}
  .is-in.cs-fade,.is-in .cs-fade{transform:none}
  .cs-anime img{transform:scale(1.18)}

  /* SPの事業一覧は横長の全幅帯にして、画面を強く使う */
  .cs-biz{padding-bottom:80px}
  .cs-biz__head{padding-inline:24px}
  .cs-biz__list{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-inline:0;gap:0}
  .cs-biz__item{min-height:280px;padding:30px 28px 26px;margin:0;border-top:1px solid rgba(255,255,255,.12);clip-path:none}
  .cs-biz__item:nth-child(even){clip-path:polygon(0 0,100% 0,100% 100%,7% 100%,0 90%)}
  .cs-biz__item:nth-child(odd){clip-path:polygon(0 0,100% 0,93% 100%,0 100%)}
  .cs-biz__bg img{object-position:center}
  .cs-biz__bg::after{background:linear-gradient(90deg,rgba(9,17,28,.88) 0%,rgba(9,17,28,.62) 44%,rgba(9,17,28,.25) 100%)}
  .cs-biz__num{font-size:1rem;margin-bottom:auto}
  .cs-biz__label{font-size:1.1rem;margin-bottom:.45em}
  .cs-biz__en{font-size:clamp(1.9rem,8vw,2.65rem);line-height:.96;max-width:9em}
  .cs-biz__circ{width:48px;height:48px;margin-top:18px}
  .cs-biz__cta{margin-inline:24px;margin-top:24px;margin-bottom:18px;min-height:auto}
}

@media(prefers-reduced-motion:reduce){
  .cs-strip__bg img,.cs-about__card .bg img{animation:none !important}
  .cs-fade,.cs-anime img,.cs-deco span,.cs-accent{transition:none !important;opacity:1 !important;transform:none !important}
  .cs-anime::after{display:none}
  .cs-hero__catch,.cs-hero__en,.cs-hero__txt{animation:none;opacity:1;transform:none}
  .cs-hero__catch .in{transform:none !important;animation:none !important}
  .cs-hero__col .l{animation:none;opacity:1}
  .cs-load__mark .sh{stroke-dashoffset:0 !important;fill-opacity:1 !important;animation:none !important}
  .cs-load__mark .tb{transform:none !important;opacity:1 !important;animation:none !important}
  .cs-load__word .ln b{transform:none !important;animation:none !important}
  .cs-load__logo img{transform:none !important;animation:none !important}
  .cs-load__meta{opacity:1 !important;animation:none !important}
  .cs-load__bar i{transform:scaleX(1) !important;animation:none !important}
  .cs-sticky__media img{transition:none !important}
  .cs-sticky__block{opacity:1 !important}
  .cs-hero__deco .spin{animation:none !important}
  .cs-blind::before,.cs-blind::after{animation:none !important}
}

/* ============================================================
   追加モーション：SVGライン・ドロー・ロゴ／行マスク／スティッキー切替
   ============================================================ */

/* ---- ローディング：エンブレム描画＋ワードマークのマスク登場＋進捗ライン ---- */
.cs-loading{background:radial-gradient(120% 90% at 50% 42%,#132741 0%,var(--bg-navy) 62%)}
.cs-load{display:flex;flex-direction:column;align-items:center;gap:0;padding:0 24px}
.cs-load__mark{width:clamp(52px,8vw,72px);height:auto;overflow:visible;margin-bottom:clamp(20px,3vw,30px);filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.cs-load__mark .sh{stroke-dasharray:170;stroke-dashoffset:170;animation:csDraw 1s var(--ease) .15s forwards,csShFill 1s ease 1s forwards}
.cs-load__mark .tb{transform:scale(.82);transform-origin:center;opacity:0}
.cs-load__mark .tb.h{animation:csBar .5s var(--ease) .78s forwards}
.cs-load__mark .tb.v{animation:csBar .5s var(--ease) .9s forwards}
@keyframes csShFill{to{fill-opacity:1}}
@keyframes csBar{to{transform:scale(1);opacity:1}}

/* 支給ロゴ（ヘッダーと同一の正式表記・白版）をマスクで立ち上げる */
.cs-load__logo{display:block;overflow:hidden;padding:.35em 0}
.cs-load__logo img{display:block;width:min(320px,74vw);height:auto;transform:translateY(115%);animation:csLineUp .95s var(--ease) .3s forwards;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.cs-load__word{display:flex;flex-direction:column;align-items:center;line-height:.98;text-align:center}
.cs-load__word .ln{display:block;overflow:hidden;padding:.04em 0}
.cs-load__word .ln b{display:block;font-family:var(--label);font-weight:700;font-size:clamp(1.55rem,4.6vw,2.55rem);letter-spacing:.14em;
  background:linear-gradient(176deg,#ffffff 0%,#dce9f6 42%,#1f4f7a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(115%)}
.cs-load__word .ln:nth-child(1) b{animation:csLineUp .85s var(--ease) 1s forwards}
.cs-load__word .ln:nth-child(2) b{animation:csLineUp .85s var(--ease) 1.14s forwards}
.cs-load__meta{margin-top:clamp(16px,2.4vw,24px);font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(220,233,246,.72);opacity:0;animation:csInk .7s ease 1.5s forwards}
.cs-load__bar{margin-top:clamp(24px,3.2vw,34px);width:min(46vw,220px);height:1px;background:rgba(220,233,246,.18);overflow:hidden;position:relative}
.cs-load__bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-deep),var(--gold-lite));animation:csLoadBar 2.15s var(--ease) .1s forwards;box-shadow:0 0 10px rgba(220,233,246,.5)}
@keyframes csDraw{to{stroke-dashoffset:0}}
@keyframes csInk{from{opacity:0}to{opacity:1}}
@keyframes csLoadBar{0%{transform:scaleX(0)}70%{transform:scaleX(.82)}100%{transform:scaleX(1)}}

/* ---- ヒーロー：行マスク・リベール＋読込連動の登場 ---- */
.cs-hero__catch{opacity:1;transform:none;animation:none}
.cs-hero__catch .cs-line{display:block;overflow:hidden;padding-bottom:.02em}
.cs-hero__catch .cs-line .in{display:block;transform:translateY(118%)}
body.cs-loaded .cs-hero.is-in .cs-hero__catch .cs-line:nth-child(1) .in{animation:csLineUp .9s var(--ease) .05s forwards}
body.cs-loaded .cs-hero.is-in .cs-hero__catch .cs-line:nth-child(2) .in{animation:csLineUp .9s var(--ease) .2s forwards}
body.cs-loaded .cs-hero.is-in .cs-hero__catch .cs-line:nth-child(3) .in{animation:csLineUp .9s var(--ease) .35s forwards}
.cs-hero__en{animation:none}
body.cs-loaded .cs-hero.is-in .cs-hero__en{animation:csUp 1.1s var(--ease) .34s forwards}
.cs-hero__txt{animation:none}
body.cs-loaded .cs-hero.is-in .cs-hero__txt{animation:csFadeIn 1s ease .56s forwards}
@keyframes csLineUp{from{transform:translateY(118%)}to{transform:translateY(0)}}

/* ---- ヒーロー背後のうっすら図形（ターゲット／同心円モチーフ） ---- */
.cs-hero__deco{position:absolute;left:33%;top:55%;transform:translate(-50%,-50%);width:clamp(420px,66vh,780px);aspect-ratio:1;z-index:2;pointer-events:none;
  -webkit-mask-image:linear-gradient(104deg,#000 18%,rgba(0,0,0,.55) 44%,transparent 66%);mask-image:linear-gradient(104deg,#000 18%,rgba(0,0,0,.55) 44%,transparent 66%)}
.cs-hero__deco svg{width:100%;height:100%;overflow:visible;display:block}
.cs-hero__deco .spin{transform-origin:300px 300px;animation:csSpin 150s linear infinite}
.cs-hero__deco .ring{fill:none;stroke:var(--gold-lite);stroke-width:1;opacity:.16}
.cs-hero__deco .ring.w{stroke:#fff;opacity:.07}
.cs-hero__deco .dia{fill:none;stroke:var(--gold-lite);stroke-width:1;opacity:.13}
.cs-hero__deco .cross{stroke:rgba(255,255,255,.10);stroke-width:1}
.cs-hero__deco .dot{fill:var(--gold-lite);opacity:.5}
.cs-hero__deco .dot.mid{opacity:.8}
@keyframes csSpin{to{transform:rotate(360deg)}}
@media(max-width:768px){
  .cs-hero__deco{left:50%;top:46%;width:clamp(300px,86vw,460px);
    -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 92%);mask-image:radial-gradient(closest-side,#000 55%,transparent 92%)}
}

/* ---- 見出しの日本語折り返し：均等化＋語中で割らない ---- */
.cs-ttl .jp,.cs-feature__jp,.cs-blind__content h2,.cs-sticky__block h3,.cs-mission__body .cs-ttl .jp,.cs-about__grid .tx p{text-wrap:balance}
/* 改行してよい位置だけで折り返す（語・カタカナの内部では折り返さない） */
.nb{display:inline-block}

/* ---- EXPERTISE：スクロール連動スティッキー画像切替 ---- */
.cs-sticky{background:var(--bg-alt);overflow:visible}
.cs-sticky__grid{display:grid;grid-template-columns:.9fr 1fr;gap:clamp(30px,6vw,88px);align-items:start}
.cs-sticky__visual{position:sticky;top:100px;align-self:start}
.cs-sticky__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-navy);clip-path:polygon(0 0,100% 0,100% 92%,88% 100%,0 100%)}
.cs-sticky__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.09);transition:opacity .85s var(--ease),transform 1.3s var(--ease);filter:grayscale(.14) contrast(1.03)}
.cs-sticky__media img.is-on{opacity:1;transform:scale(1)}
.cs-sticky__media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(13,26,41,0) 40%,rgba(13,26,41,.55));z-index:1}
.cs-sticky__word{position:absolute;left:20px;top:18px;z-index:2;font-family:var(--label);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1rem,1.8vw,1.5rem);line-height:1.06;color:#fff;max-width:74%;text-shadow:0 4px 24px rgba(0,0,0,.4);transition:opacity .32s ease,transform .32s ease}
.cs-sticky__word.is-swap{opacity:0;transform:translateY(8px)}
.cs-sticky__idx{position:absolute;right:20px;bottom:26px;z-index:2;display:flex;align-items:center;gap:10px;font-family:var(--label);color:rgba(255,255,255,.85);font-size:.82rem;letter-spacing:.1em}
.cs-sticky__idx b{font-size:1.7rem;font-weight:600;color:var(--gold-lite);line-height:1}
.cs-sticky__idx i{width:36px;height:1px;background:rgba(255,255,255,.5);display:block}
.cs-sticky__body{padding-top:clamp(10px,3vw,40px)}
.cs-sticky__block{padding:clamp(28px,4vw,50px) 0;border-top:1px solid var(--line);min-height:46vh;display:flex;flex-direction:column;justify-content:center;opacity:.4;transition:opacity .5s var(--ease)}
.cs-sticky__block:first-child{border-top:none}
.cs-sticky__block.is-active{opacity:1}
.cs-sticky__block .no{font-family:var(--label);font-weight:600;color:var(--gold-deep);font-size:.92rem;letter-spacing:.14em}
.cs-sticky__block .en{font-family:var(--label);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-size:.72rem;margin:.7em 0 .5em;display:block}
.cs-sticky__block h3{font-family:var(--mincho);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ink);letter-spacing:.03em;margin-bottom:.55em}
.cs-sticky__block p{color:var(--sub);font-size:.92rem;line-height:2;margin-bottom:1.5em;max-width:34em}
.cs-btn.sm{padding:13px 24px;font-size:.72rem}
@media(max-width:900px){
  .cs-sticky__grid{display:block}
  .cs-sticky__visual{position:sticky;top:64px;z-index:1;margin-bottom:24px}
  .cs-sticky__media{aspect-ratio:16/9}
  .cs-sticky__word{font-size:1.05rem}
  .cs-sticky__block{min-height:auto;padding:26px 0;opacity:1}
  .cs-sticky__body{padding-top:0}
}