/* ==========================================================================
   合同会社ババロア ─ ホームページ（下書き）
   参考サイト（acsl.co.jp）を 1920px / 1440px / 390px で実測し、
   その寸法比率をもとに独自実装。数値の根拠はコメントに記載しています。

   ■ 画像について
   images/ の写真は Unsplash（商用利用可・クレジット表記不要）の素材です。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  --blue:#3455FC;          /* 実測: rgb(52,85,252) */
  --blue-dark:#2340D8;
  --blue-deep:#1B2E8F;
  --cyan:#27C7F5;
  --ink:#101112;           /* 実測: rgb(16,17,18) */
  --ink-2:#4A4E57;
  --mute:#C1C4CB;          /* 実測: rgb(193,196,203) */
  --line:#E9EDEF;          /* 実測: rgb(233,237,239) */
  --bg-alt:#F2F4FB;        /* 実測: #F2F4FB */
  --white:#fff;

  /* 英字・数字の書体。Rajdhani は字形が細長く数字が詰まって見えるため Figtree に統一 */
  --ff-en:"Figtree","Helvetica Neue",Arial,sans-serif;
  /* Win/Mac では游ゴシック・ヒラギノを優先し、無い環境では読み込んだ Noto Sans JP を使う */
  --ff-ja:"YuGothic","游ゴシック","Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;

  /* 本文の文字サイズ。参考サイトは14pxだが、和文では小さく見えるため底上げしている。
     全体を一段変えたい場合はこの3つだけを触る */
  --fs-body:16px;   /* 本文 */
  --fs-sm:14px;     /* 補助テキスト */
  --fs-xs:13px;     /* 注記・キャプション */

  /* コンテナ: 1440→1200 / 1920→1380 の実測から min(1380px, 100% - 240px) */
  --cw:min(1380px, 100% - 240px);
  --head-h:136px;          /* 実測 1440:136 / 390:78 */
  --head-h-fix:72px;

  --ease:cubic-bezier(.23,1,.32,1);          /* 実測 */
  --ease-soft:cubic-bezier(.165,.84,.44,1);  /* 実測 */
  --dur:1.4s;                                 /* 実測 */
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--ff-ja);
  font-size:var(--fs-body);line-height:1.9;letter-spacing:.055em;
  color:var(--ink);background:var(--white);
  /* hidden は position:sticky を無効化するため clip を使う */
  overflow-x:clip;
}
img,svg{max-width:100%;height:auto;vertical-align:middle}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4,p,li,dt,dd{word-break:auto-phrase;line-break:strict}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip-link{position:absolute;left:0;top:-60px;z-index:999;padding:12px 20px;background:var(--blue);color:#fff;transition:top .2s var(--ease-soft)}
.skip-link:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:var(--cw);margin-inline:auto}

/* --------------------------------------------------------------------------
   3. 見出し（1文字ずつ出る）
   実測: 英 Rajdhani 600 / 1920:56px 1440:50px 390:33.28px, lh .933
        和 600 / 12px, ls .07em, 24px左に小さな2色の四角
   -------------------------------------------------------------------------- */
.heading{display:block}
.heading__en{
  position:relative;display:block;padding-left:24px;
  font-family:var(--ff-en);font-weight:600;
  font-size:clamp(33.28px,2.92vw,56px);line-height:.933;color:var(--ink);
}
.heading__en::before{
  content:"";position:absolute;left:0;top:.22em;width:9px;height:18px;
  background:linear-gradient(180deg,var(--blue) 0 50%,var(--cyan) 50% 100%);
}
.heading__ja{
  margin-top:10px;padding-left:24px;
  font-size:clamp(10.4px,.63vw,12px);font-weight:600;line-height:1;letter-spacing:.07em;
}
/* 文字ごとの出現 */
.heading__en .ch,.hero__catch .ch{display:inline-block;will-change:transform,opacity}
.js .heading__en .ch,.js .hero__catch .ch{opacity:0;transform:translateY(.42em)}
.js .is-shown .heading__en .ch,.js .hero__catch.is-shown .ch{
  opacity:1;transform:none;transition:opacity .62s var(--ease),transform .72s var(--ease);
}

/* --------------------------------------------------------------------------
   4. ボタン
   実測: 240x80（事業CTAのみ300x80）/ 角丸0 / 白パネルが translateX(-238px)→0 でワイプ
   -------------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  width:240px;height:80px;max-width:100%;
  background:var(--blue);color:var(--white);overflow:hidden;
  font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.12em;border-radius:0;
}
.btn::before{ /* 白パネル：1px内側 = 実測 238x78 */
  content:"";position:absolute;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);
  background:var(--white);transform:translateX(-100%);
  transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}
.btn > *{position:relative;z-index:1;transition:color .4s var(--ease)}
.btn:hover > *,.btn:focus-visible > *{color:var(--blue)}
.btn__arrow{width:18px;height:8px;flex:none}
.btn--wide{width:300px}
.btn--ghost{width:auto;height:auto;background:none;color:var(--white);overflow:visible}
.btn--ghost::before{display:none}
.btn--ghost:hover > *{color:var(--white)}
.btn--ghost .btn__arrow{transition:transform .4s var(--ease)}
.btn--ghost:hover .btn__arrow{transform:translateX(6px)}

.more{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.05em;color:var(--blue)}
.more__arrow{width:16px;height:8px;transition:transform .4s var(--ease)}
.more:hover .more__arrow{transform:translateX(6px)}

/* --------------------------------------------------------------------------
   5. 画像の出現（枠を保ったままワイプ＋わずかなズーム）
   -------------------------------------------------------------------------- */
.ph{position:relative;overflow:hidden;background:var(--bg-alt)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph::after{content:"";position:absolute;inset:0;background:var(--bg-alt);transform:translateX(0);transition:transform 1.1s var(--ease);pointer-events:none}
.is-shown .ph img,.ph.is-shown img{transform:scale(1)}
.is-shown .ph::after,.ph.is-shown::after{transform:translateX(101%)}
.no-js .ph img{transform:none}
.no-js .ph::after{display:none}

/* --------------------------------------------------------------------------
   6. ヘッダー
   -------------------------------------------------------------------------- */
.header{position:absolute;inset:0 0 auto;z-index:100;height:var(--head-h);color:var(--white)}
/* 右端のお問い合わせを画面端まで伸ばすため、右の内側余白は持たせない */
.header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:100%;padding-left:80px;padding-right:0}
.header__utility a{opacity:.85}.header__utility a:hover{opacity:1}.brand{display:flex;align-items:baseline;gap:12px}
.brand__mark{font-family:var(--ff-en);font-size:27px;font-weight:600;letter-spacing:-.01em;line-height:1}
.brand__sub{font-size:10px;font-weight:600;letter-spacing:.14em;opacity:.8}
.gnav{justify-self:end;padding-right:clamp(24px,2.3vw,44px)}
.gnav__list{display:flex;align-items:center;gap:30px}
.gnav__link{position:relative;display:block;padding-bottom:10px;font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.06em;line-height:1}
.gnav__link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.35}
.gnav__link:hover::after{opacity:1}
/* 封筒アイコンの右に CONTACT の文字。画面右端まで伸ばす */
.header__contact{display:none;align-items:center;gap:12px;align-self:stretch;
  padding-inline:clamp(20px,1.7vw,32px);border-left:1px solid rgba(255,255,255,.25);
  font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.12em;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.header__contact svg{flex:none}
.header__contact:hover{background:var(--blue);color:var(--white);border-left-color:var(--blue)}
.header.is-fixed{position:fixed;height:var(--head-h-fix);background:var(--white);color:var(--ink);box-shadow:0 1px 0 rgba(16,17,18,.08);animation:headDown .35s var(--ease-soft) both}
@keyframes headDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.header.is-fixed .header.is-fixed .brand__mark{color:var(--blue-deep)}
.header.is-fixed .brand__sub{display:none}
.header.is-fixed .gnav__link{padding-bottom:0}
.header.is-fixed .gnav__link::after{display:none}
.header.is-fixed .header__contact{display:flex;border-left-color:var(--line)}
.burger{display:none;width:44px;height:44px;position:relative;justify-self:end;z-index:95}
.burger span{position:absolute;left:10px;width:24px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   7. ヒーロー（acsl.co.jp の方式を実測して再現）
   実測:
   ・KV は position:fixed（レイアウトから外れ、本文がその背後に置かれる）
   ・CSS transition ではなく JS で不透明度を制御（transition-duration は 0s）
   ・スクロール量に比例せず、4px でも動かせば 1→0。所要およそ525ms（トリガー方式）
   ・スライドは4枚、切り替え間隔 7,100ms（実測 7089/7099/7016/7206ms）
   緩やかにしたい場合は JS の HERO_FADE_PX に px 数を入れる（0 で参考サイトと同挙動）
   -------------------------------------------------------------------------- */
:root{ --hero-slide:7100ms; }  /* フェード量は JS の HERO_FADE_PX で調整 */

.hero{
  position:fixed;inset:0;z-index:2;
  display:flex;align-items:center;overflow:hidden;color:var(--white);
  will-change:opacity;
}
.hero[data-faded="1"]{pointer-events:none}
.hero[data-hidden="1"]{visibility:hidden}

/* 本文はヒーローの背後に置き、ヘッダーのぶんだけ下げる */
.main{position:relative;z-index:1;padding-top:var(--head-h)}

/* --- スライド --- */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s var(--ease);
}
.hero__slide.is-on{opacity:1}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform calc(var(--hero-slide) + 1400ms) linear;
}
.hero__slide.is-on img{transform:scale(1)}
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,34,80,.55) 0%,rgba(14,46,104,.28) 40%,rgba(12,34,80,.6) 100%),
             linear-gradient(112deg,rgba(27,46,143,.72) 0%,rgba(52,85,252,.34) 52%,rgba(39,199,245,.18) 100%);
}

.hero__inner{position:relative;z-index:2;width:100%;padding-left:clamp(26px,16.04vw,308px);padding-right:60px}
.hero__catch{font-family:var(--ff-en);font-size:clamp(50px,4.5vw,86px);font-weight:600;line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.hero__catch .ln{display:block}
.hero__lead{margin-top:26px;max-width:30em;font-size:var(--fs-body);line-height:2;letter-spacing:.07em;opacity:0;animation:fadeIn .9s var(--ease) .95s both}
.hero__cta{margin-top:34px;opacity:0;animation:fadeIn .9s var(--ease) 1.1s both}
@keyframes fadeIn{to{opacity:1}}

/* スライドのラベル（右下） */
.hero__label{
  position:absolute;right:80px;bottom:40px;z-index:2;text-align:right;
  font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.14em;
}
.hero__label b{display:block;margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.08em;font-family:var(--ff-ja)}

.hero__scroll{position:absolute;left:80px;bottom:40px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--ff-en);font-size:11px;font-weight:600;letter-spacing:.2em;writing-mode:vertical-rl}
.hero__scroll::after{content:"";width:1px;height:56px;background:currentColor;opacity:.5;transform-origin:top;animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* 実測: ドットは 80x80 の当たり判定・間隔113px */
.hero__dots{position:absolute;right:80px;top:50%;translate:0 -50%;z-index:3;display:flex;flex-direction:column}
.hero__dot{position:relative;display:grid;place-items:center;width:80px;height:80px;margin-bottom:33px;cursor:pointer}
.hero__dot:last-child{margin-bottom:0}
.hero__dot i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:background-color .4s var(--ease)}
.hero__dot.is-active i{background:var(--white)}
.hero__dot svg{position:absolute;inset:0;width:80px;height:80px;transform:rotate(-90deg);opacity:0;transition:opacity .3s}
.hero__dot.is-active svg{opacity:1}
.hero__dot circle{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1;stroke-dasharray:107;stroke-dashoffset:107}
.hero__dot.is-active circle{animation:ring var(--hero-slide) linear forwards}
@keyframes ring{to{stroke-dashoffset:0}}

/* --------------------------------------------------------------------------
   8. 共通セクション余白（実測: 大 240px / 中 168px）
   -------------------------------------------------------------------------- */
.sec{position:relative;padding-block:clamp(88px,8.75vw,168px)}
.sec--lg{padding-block:clamp(104px,12.5vw,240px)}
.sec--alt{background:var(--bg-alt)}

/* --------------------------------------------------------------------------
   9. ニュース（実測: 右に見出し306px / 日付16px / チップ100x22 / 本文lh30）
   -------------------------------------------------------------------------- */
.news__layout{display:grid;gap:48px}
.news__item{border-bottom:1px solid var(--line)}
.news__item:first-child{border-top:1px solid var(--line)}
.news__link{display:grid;grid-template-columns:1fr 40px;align-items:center;gap:8px 20px;padding-block:30px;transition:opacity .3s var(--ease-soft)}
.news__link:hover{opacity:.58}
.news__meta{grid-column:1;display:flex;align-items:center;gap:16px}
.news__date{font-family:var(--ff-en);font-size:16px;font-weight:600;letter-spacing:.05em;line-height:1;color:var(--mute)}
.news__chip{display:inline-grid;place-items:center;width:104px;height:24px;background:var(--line);font-size:12px;letter-spacing:.05em;line-height:1}
.news__title{grid-column:1;font-size:var(--fs-body);line-height:1.9;letter-spacing:.055em}
.news__arrow{grid-column:2;grid-row:1/span 2;justify-self:end;width:16px;height:8px;color:var(--blue)}
.news__aside{display:flex;flex-direction:column;gap:44px}

/* --------------------------------------------------------------------------
   10. 事業内容（stafflife.jp "Agents Business" の構成を 1920px で実測し再現）
   実測値: コンテナ1440 / 左カラム x=318 w=400 / 右カラム x=935 w=667
          写真 667x385（比 1.7325）/ 項目ピッチ 572px / 行の高さ 187px
          見出し 75px・700・lh87px・ls-1px / 本文 14px・lh30.1px・ls0.8px
          丸ボタン 58x58（白地・2px rgba(17,20,25,.1)）
          アクセント帯は右端まで（左端 = コンテナの79.86%）
   配色は参考サイトの緑 rgb(139,196,14) ではなく当サイトのブルーを使用
   -------------------------------------------------------------------------- */
.svc{position:relative;overflow:clip}  /* hidden だと左カラムの sticky が効かない */
.svc__ghost{
  position:absolute;left:-4%;top:clamp(70px,12.9vw,248px);z-index:0;pointer-events:none;
  font-family:var(--ff-en);font-size:clamp(180px,20.8vw,400px);font-weight:700;line-height:.8;
  letter-spacing:-.02em;color:rgba(52,85,252,.07);white-space:nowrap;
}
.svc__grid{position:relative;z-index:1;display:grid;gap:56px}

/* ---- 左：説明 ---- */
.svc__lead{min-width:0}
.svc__label{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-en);font-size:16px;font-weight:500;letter-spacing:.5px;color:var(--ink)}
.svc__label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.svc__label span{background:rgba(52,85,252,.1);padding:2px 6px}
.svc__big{
  margin-top:22px;font-family:var(--ff-en);font-weight:700;
  font-size:clamp(44px,3.9vw,75px);line-height:1.16;letter-spacing:-1px;color:var(--blue);
}
.svc__sub{margin-top:28px;font-size:20px;font-weight:700;line-height:1.68;letter-spacing:.08em}
.svc__body{margin-top:18px;font-size:var(--fs-body);line-height:1.95;letter-spacing:.05em;color:var(--ink-2)}
.svc__more{margin-top:34px}

/* View more + 丸ボタン（実測 58x58） */
.vm{display:inline-flex;align-items:center;gap:16px;font-family:var(--ff-en);font-size:13.5px;font-weight:500;letter-spacing:1px;color:var(--ink)}
.vm__circle{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--white);border:2px solid rgba(17,20,25,.1);color:var(--blue);transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.vm__circle svg{width:16px;height:8px}
.vm:hover .vm__circle{background:var(--blue);border-color:var(--blue);color:var(--white)}

/* ---- 右：番号つきリスト ---- */
.svc__list{position:relative;min-width:0}
.svc__band{position:absolute;top:0;bottom:0;left:68.25%;width:100vw;background:var(--blue);z-index:0}
.svc__item{position:relative;z-index:1}
.svc__photo{aspect-ratio:667/385}
.svc__photo .ph{width:100%;height:100%}
/* 第3列=31.75% は帯の開始位置(68.25%)にちょうど一致する */
.svc__row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) 31.75%;align-items:center;gap:0 26px;padding-block:28px}
.svc__row::after{content:"";position:absolute;left:0;bottom:0;width:68.25%;height:1px;background:rgba(17,20,25,.14)}
.svc__no{
  font-family:var(--ff-en);font-size:76px;font-weight:700;line-height:1;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:2px var(--blue);
}
.svc__name{font-family:var(--ff-en);font-size:31px;font-weight:700;line-height:1.1;letter-spacing:0;color:var(--ink)}
.svc__desc{margin-top:8px;font-size:var(--fs-sm);line-height:1.9;letter-spacing:.05em;color:var(--ink-2)}
.svc__vm{display:inline-flex;align-items:center;gap:14px;justify-self:center;font-family:var(--ff-en);font-size:13.5px;font-weight:500;letter-spacing:1px;color:var(--white);white-space:nowrap}
.svc__vm i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.65);transition:background-color .35s var(--ease)}
.svc__vm i svg{width:14px;height:7px}
.svc__item:hover .svc__vm i{background:rgba(255,255,255,.22)}

/* --------------------------------------------------------------------------
   11. 強み（実測 1920/コンテナ1380 基準）
   画像 1134x716 を左へ -196px / 白カード 570x504 を左52.17%・上250px
   CTA 300x80 を左30.43%・上94.69%   ステージ比 1380:754
   -------------------------------------------------------------------------- */
.str__stage{position:relative;margin-top:72px}
.str__item{position:relative;aspect-ratio:1380/754}
.str__item + .str__item{margin-top:104px}
.str__visual{position:absolute;left:-14.20%;top:0;width:82.17%;height:94.96%}
.str__visual .ph{width:100%;height:100%}
.str__visual .ph img{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
.str__visual .ph img.is-current{opacity:1}
.str__card{position:absolute;left:52.17%;top:33.16%;width:41.30%;min-height:66.84%;background:var(--white);padding:clamp(24px,2.6vw,50px);z-index:2}
.str__num{font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--blue);display:flex;align-items:center;gap:14px}
.str__num::before{content:"";width:34px;height:1px;background:currentColor}
.str__en{margin-top:18px;font-family:var(--ff-en);font-size:clamp(24px,2.08vw,40px);font-weight:600;line-height:1.05;color:var(--ink)}
.str__ja{margin-top:18px;font-size:clamp(14px,.94vw,18px);font-weight:700;letter-spacing:.05em;line-height:1.8}
.str__text{margin-top:14px;font-size:var(--fs-sm);line-height:2;color:var(--ink-2)}
.str__more{margin-top:22px}
.str__cta{position:absolute;left:30.43%;top:94.69%;z-index:3}
/* 右の 01/02/03 */
.str__rail{display:none;position:absolute;right:0;top:0;z-index:4}
.str__rail li{display:flex;align-items:center;gap:16px;padding-left:14px;border-left:2px solid var(--line);font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--mute);transition:color .4s var(--ease-soft),border-color .4s var(--ease-soft)}
.str__rail li + li{margin-top:22px}
.str__rail li.is-active{color:var(--blue);border-left-color:var(--blue)}

/* --------------------------------------------------------------------------
   12. 料金
   -------------------------------------------------------------------------- */
.price__grid{display:grid;gap:1px;margin-top:56px;background:var(--line);border:1px solid var(--line)}
.price__cell{background:var(--white);padding:40px}
.price__en{font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--blue)}
.price__name{margin-top:10px;font-size:17px;font-weight:700;letter-spacing:.05em;line-height:1.7}
.price__amount{margin-top:16px;font-family:var(--ff-en);font-size:34px;font-weight:600;line-height:1}
.price__amount small{font-family:var(--ff-ja);font-size:13px;font-weight:400;letter-spacing:.06em}
.price__note{margin-top:14px;font-size:var(--fs-xs);line-height:1.9;color:var(--ink-2)}
.price__foot{margin-top:22px;font-size:var(--fs-xs);color:var(--ink-2);letter-spacing:.05em}

/* --------------------------------------------------------------------------
   13. 会社情報（青帯は写真の上に青を重ねる＝実測の banner_vision 相当）
   -------------------------------------------------------------------------- */
.cmp__band{position:relative;overflow:hidden;margin-top:56px;color:var(--white)}
.cmp__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__band::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(27,46,143,.92) 0%,rgba(52,85,252,.84) 58%,rgba(75,123,255,.72) 100%)}
.cmp__bandInner{position:relative;z-index:1;padding:clamp(44px,5vw,96px) clamp(24px,3.75vw,72px)}
.cmp__lead{max-width:34em;font-size:var(--fs-body);line-height:2;letter-spacing:.06em}
.cmp__links{display:grid;margin-top:52px;border:1px solid rgba(255,255,255,.4)}
.cmp__links a{display:flex;align-items:center;justify-content:center;gap:14px;padding:26px 12px;font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.12em;transition:background-color .17s}
.cmp__links a:hover{background:rgba(255,255,255,.12)}
.cmp__links li + li a{border-top:1px solid rgba(255,255,255,.4)}
.profile{margin-top:64px}
.profile__row{display:grid;gap:4px 32px;padding-block:22px;border-bottom:1px solid var(--line)}
.profile__row:first-child{border-top:1px solid var(--line)}
.profile__key{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--blue);line-height:2}
.profile__val{line-height:2;letter-spacing:.05em}
.profile__val .tbd{color:var(--mute)}

/* --------------------------------------------------------------------------
   14. 採用（実測 1920/コンテナ1380 基準 / ステージ比 1380:859）
   見出し 左61.38%,上0 / ボタン 左61.59%,上25.03%
   写真1 左15.22%,上15.83%,34.93%x38.88%
   淡青  左6.52%, 上29.69%,101.81%x67.17%
   写真2 左41.88%,上39.58%,54.20%x60.42%
   写真3 左0.43%, 上54.60%,34.93%x38.88%
   -------------------------------------------------------------------------- */
.rec__stage{position:relative;aspect-ratio:1380/859}
.rec__block{position:absolute;left:6.52%;top:29.69%;width:101.81%;height:67.17%;background:var(--bg-alt);z-index:0}
.rec__ph{position:absolute;z-index:1}
.rec__ph--1{left:15.22%;top:15.83%;width:34.93%;height:38.88%}
.rec__ph--2{left:41.88%;top:39.58%;width:54.20%;height:60.42%;z-index:2}
.rec__ph--3{left:.43%;top:54.60%;width:34.93%;height:38.88%}
.rec__ph .ph{width:100%;height:100%}
.rec__body{position:absolute;left:61.38%;top:0;width:36%;z-index:3}
.rec__text{margin-top:22px;font-size:var(--fs-body);line-height:2;color:var(--ink-2)}
.rec__cta{margin-top:30px}
/* 実測: 1440/1920 とも左端 x=コンテナ-10px, 上から約61%。
   ラベル全体が写真1（左15.22%〜）に掛からないよう、線は60pxに留める */
.rec__join{position:absolute;left:.72%;top:44%;z-index:4;display:flex;align-items:center;gap:14px;font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--blue-deep);white-space:nowrap}
.rec__join::before{content:"";width:clamp(32px,4.3vw,60px);height:1px;background:currentColor;flex:none}

/* --------------------------------------------------------------------------
   15. 下部CTA / フッター
   -------------------------------------------------------------------------- */
.footer{padding-top:100px;background:var(--white)}
.footer__sitemap{display:grid;gap:48px}
.footer__colTitle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.1em}
.footer__colTitle svg{width:14px;height:7px;color:var(--blue)}
.footer__links{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.footer__links a{font-size:var(--fs-sm);letter-spacing:.05em;line-height:2;transition:color .3s var(--ease-soft)}
.footer__links a:hover{color:var(--blue)}
.footer__aside{display:flex;flex-direction:column;gap:10px}
.footer__aside a{font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.1em}
.footer__corp{margin-top:22px;font-size:var(--fs-xs);line-height:2;letter-spacing:.05em;color:var(--ink-2)}
.footer__totop{display:grid;place-items:center;width:64px;height:64px;margin-left:auto;margin-top:40px;background:var(--blue);color:var(--white);transition:background-color .17s}
.footer__totop:hover{background:var(--blue-dark)}
.footer__bar{margin-top:48px;padding-block:22px;background:var(--blue);color:var(--white)}
.footer__barInner{display:grid;gap:10px;align-items:center;justify-items:center}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer__legal a{font-size:11px;letter-spacing:.08em;opacity:.9}
.footer__legal a:hover{opacity:1;text-decoration:underline}
.footer__copy{font-family:var(--ff-en);font-size:11px;font-weight:600;letter-spacing:.1em;opacity:.9}

/* --------------------------------------------------------------------------
   16. スクロール表示
   -------------------------------------------------------------------------- */
/* 実測(acsl.co.jp): 不透明度0→1・translateY(40px→0) を 1.4s / cubic-bezier(.23,1,.32,1) */
.js [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js [data-reveal].is-shown{opacity:1;transform:none}
[data-d="1"]{transition-delay:.12s}[data-d="2"]{transition-delay:.24s}[data-d="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hero__bg img,.hero__lead,.hero__cta{animation:none!important;opacity:1!important;transform:none!important}
  .hero__scroll::after,.hero__dot.is-active circle{animation:none}
  .hero__slide img{transition:none;transform:none}
  .ph img{transform:none!important}.ph::after{display:none}
  .js .heading__en .ch,.js .hero__catch .ch{opacity:1!important;transform:none!important}
}

/* --------------------------------------------------------------------------
   17. ブレークポイント
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  :root{--cw:calc(100% - 52px);--head-h:78px}
  .header__inner{padding-inline:26px}
    .gnav{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--blue-deep);color:var(--white);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .gnav.is-open{opacity:1;visibility:visible}
  .gnav__list{flex-direction:column;gap:26px;text-align:center}
  .gnav__link{font-size:20px;padding-bottom:0}
  .gnav__link::after{display:none}
  .burger{display:block}
  .header.is-fixed .burger{color:var(--ink)}
  .burger[aria-expanded="true"]{color:var(--white)}
  .header__contact,.header.is-fixed .header__contact{display:none}
  .hero__dots{display:none}
  .hero__scroll{left:26px;bottom:26px}
  .hero__label{right:26px;bottom:26px}
  .hero__inner{padding-right:26px}

  /* 強み：重なりを解いて縦積み */
  .str__item{aspect-ratio:auto}
  .str__item + .str__item{margin-top:72px}
  .str__visual{position:relative;left:0;width:calc(100% + 26px);margin-left:-26px;height:auto;aspect-ratio:1134/716}
  .str__card{position:relative;left:0;top:0;width:92%;margin:-48px 0 0 auto;min-height:0;padding:28px}
  .str__cta{position:relative;left:0;top:0;margin-top:32px}
  /* 採用：重なりを解いて縦積み */
  .rec__stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:20px}
  .rec__block{display:none}
  .rec__ph,.rec__body,.rec__join{position:relative;left:0;top:0;width:100%;height:auto}
  .rec__ph--1,.rec__ph--3{aspect-ratio:800/554}
  .rec__ph--2{aspect-ratio:1240/860}
  .rec__join{order:-1;margin-bottom:4px}
  .rec__body{order:-2}
  .svc__band{display:none}
  .svc__ghost{font-size:30vw;top:0;left:-6%}
  .svc__row{grid-template-columns:auto minmax(0,1fr);gap:0 18px;padding-block:20px}
  .svc__row::after{width:100%}
  .svc__no{font-size:52px;-webkit-text-stroke-width:1.6px}
  .svc__name{font-size:22px}
  .svc__vm{grid-column:1/-1;justify-self:start;margin-top:14px;color:var(--blue)}
  .svc__vm i{border-color:rgba(52,85,252,.4)}
  .price__cell{padding:28px}
  .btn{width:187px;height:62px;font-size:13px}
  .btn--wide{width:220px}
}
@media (min-width:768px){
  .news__layout{grid-template-columns:minmax(0,1fr) 306px}
  .price__grid{grid-template-columns:repeat(2,1fr)}
  .profile__row{grid-template-columns:150px minmax(0,1fr)}
  .cmp__links{grid-template-columns:repeat(3,1fr)}
  .cmp__links li + li a{border-top:0;border-left:1px solid rgba(255,255,255,.4)}
  .footer__sitemap{grid-template-columns:repeat(3,minmax(0,1fr)) 210px}

}
@media (min-width:1024px){
  .header__contact{display:flex}
  .str__rail{display:block}
  /* 実測(1920/コンテナ1440): 左インセット5.42% / 左カラム27.8% / 間15.06% / 右カラム46.3%
     padding だと % の基準が縮むため、空の列を含む4カラムで指定する */
  .svc__grid{grid-template-columns:5.42% 27.8% 15.06% 46.3%;gap:0}
  /* 実測: 元サイトは sticky top:0 の枠が 818px、親カラム 1989px で約1,170px ピン留めされる。
     当サイトは固定ヘッダー(72px)の下に来るよう top:110px とする */
  .svc__lead{grid-column:2;position:sticky;top:110px;align-self:start}
  .svc__list{grid-column:4}
  .price__grid{grid-template-columns:repeat(4,1fr)}
}


/* ==========================================================================
   下層ページ共通（acsl.co.jp の下層テンプレートを 1920px で実測し再現）
   実測: ヘッダーパネル高さ約880px / 英題は大きく白、下に横罫 / 和文サブ
        左下に濃い青のブロックで CONTENTS アンカーナビ（14px/600, 白）
        パネル直下にパンくず（右寄せ）
   ========================================================================== */
.page{padding-top:var(--head-h-fix)}

.phead{position:relative;overflow:hidden;color:var(--white);
  background:linear-gradient(104deg,var(--blue-deep) 0%,var(--blue) 56%,#5C7BFF 100%);
  min-height:clamp(320px,41vw,780px);display:flex;align-items:center}
.phead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,transparent 0 42%,rgba(255,255,255,.07) 42% 62%,transparent 62%),
             linear-gradient(72deg,transparent 0 56%,rgba(255,255,255,.05) 56% 78%,transparent 78%)}
.phead__mark{position:absolute;right:-2%;bottom:-6%;z-index:0;
  font-family:"Figtree",var(--ff-ja);font-size:clamp(110px,13vw,250px);font-weight:600;line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none}
/* .container と併用するため width は指定しない（指定すると左端に張り付く） */
.phead__inner{position:relative;z-index:1;padding-block:clamp(60px,6vw,110px)}
.phead__en{font-family:"Figtree",var(--ff-ja);font-weight:500;
  font-size:clamp(40px,4.9vw,94px);line-height:1;letter-spacing:-.035em}
.phead__rule{height:1px;margin-top:clamp(20px,2.3vw,44px);background:rgba(255,255,255,.45)}
.phead__ja{margin-top:clamp(16px,1.6vw,30px);font-size:clamp(17px,1.46vw,28px);font-weight:700;letter-spacing:.1em}
.phead__note{margin-top:18px;max-width:40em;font-size:var(--fs-sm);line-height:2;color:rgba(255,255,255,.84)}

/* CONTENTS アンカーナビ（実測: 項目 14px/600・字送り0.7px・白） */
.anchors{position:relative;z-index:2;background:var(--blue-deep);color:var(--white)}
.anchors__inner{display:grid;gap:14px 40px;padding-block:22px}
.anchors__label{font-family:var(--ff-en);font-size:11px;font-weight:600;letter-spacing:.24em;color:rgba(255,255,255,.7)}
.anchors__list{display:flex;flex-wrap:wrap;gap:12px 34px}
.anchors__list a{position:relative;font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.7px;
  padding-bottom:4px;transition:color .3s var(--ease)}
.anchors__list a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.anchors__list a:hover::after{transform:scaleX(1)}

/* パンくず */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-block:18px;
  font-size:var(--fs-xs);letter-spacing:.07em;color:var(--ink-2)}
.crumb a:hover{color:var(--blue);text-decoration:underline}
.crumb span{opacity:.5}
.crumb--onblue{color:rgba(255,255,255,.8)}
.crumb--onblue a:hover{color:var(--white)}

/* 本文セクション */
.sec--sub{padding-block:clamp(64px,6.8vw,130px);scroll-margin-top:calc(var(--head-h-fix) + 20px)}
.sec--sub + .sec--sub{border-top:1px solid var(--line)}
.lead{margin-top:clamp(26px,3vw,52px);max-width:46em;font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:var(--ink-2)}
.lead + .lead{margin-top:1.4em}
.h3{margin-top:clamp(34px,3.4vw,60px);font-size:clamp(17px,1.25vw,22px);font-weight:700;letter-spacing:.06em;line-height:1.7}
.h3:first-child{margin-top:0}

/* 定義リスト（会社概要・規約など） */
.deflist{margin-top:clamp(26px,2.6vw,46px)}
.deflist__row{display:grid;gap:4px 32px;padding-block:20px;border-bottom:1px solid var(--line)}
.deflist__row:first-child{border-top:1px solid var(--line)}
.deflist__key{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--blue);line-height:2}
.deflist__val{font-size:var(--fs-body);line-height:2;letter-spacing:.05em}
.deflist__val .tbd{color:var(--mute)}

/* 番号つきカード */
.cards{display:grid;gap:1px;margin-top:clamp(30px,3vw,52px);background:var(--line);border:1px solid var(--line)}
.card{background:var(--white);padding:clamp(24px,2.6vw,44px)}
.card__no{font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--blue)}
.card__title{margin-top:10px;font-size:clamp(16px,1.15vw,20px);font-weight:700;letter-spacing:.05em;line-height:1.7}
.card__text{margin-top:12px;font-size:var(--fs-body);line-height:2;color:var(--ink-2)}
.card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.card__tags li{padding:6px 13px;background:var(--bg-alt);font-size:var(--fs-xs);letter-spacing:.05em;line-height:1.6}

/* 手順 */
.steps{counter-reset:st;margin-top:clamp(30px,3vw,52px)}
.step{position:relative;padding:0 0 clamp(28px,2.8vw,44px) clamp(56px,5vw,86px);border-left:1px solid var(--line);margin-left:18px}
.step:last-child{border-left-color:transparent;padding-bottom:0}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:-4px;translate:-50% 0;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;background:var(--blue);color:var(--white);
  font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.06em}
.step__title{font-size:clamp(15px,1.1vw,18px);font-weight:700;letter-spacing:.06em;line-height:1.7}
.step__text{margin-top:8px;font-size:var(--fs-body);line-height:2;color:var(--ink-2)}

/* FAQ */
.qa{margin-top:clamp(26px,2.6vw,46px);border-top:1px solid var(--line)}
.qa__item{border-bottom:1px solid var(--line)}
.qa__q{display:grid;grid-template-columns:auto minmax(0,1fr) 20px;align-items:center;gap:16px;
  width:100%;padding-block:22px;text-align:left;font-size:var(--fs-body);font-weight:700;letter-spacing:.05em;line-height:1.7}
.qa__mark{font-family:var(--ff-en);font-size:15px;font-weight:600;color:var(--blue)}
.qa__sign{position:relative;width:14px;height:14px;justify-self:end}
.qa__sign::before,.qa__sign::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.qa__sign::after{transform:rotate(90deg)}
.qa__q[aria-expanded="true"] .qa__sign::after{transform:rotate(0)}
.qa__a{display:none;padding:0 0 26px 34px;font-size:var(--fs-body);line-height:2;color:var(--ink-2)}
.qa__a.is-open{display:block;animation:fadeUp .6s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* フォーム */
.form{margin-top:clamp(30px,3vw,52px);max-width:720px}
.field{margin-bottom:26px}
.field__label{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em}
.field__req{padding:3px 8px;background:var(--blue);color:#fff;font-size:11px;letter-spacing:.06em;line-height:1}
.field__opt{padding:3px 8px;background:var(--line);color:var(--ink-2);font-size:11px;letter-spacing:.06em;line-height:1}
.input,.textarea,.select{width:100%;margin-top:10px;padding:14px 16px;border:1px solid var(--line);
  background:var(--white);font:inherit;font-size:var(--fs-body);letter-spacing:.04em;border-radius:0}
.textarea{min-height:190px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue)}
.form__note{margin-top:18px;font-size:var(--fs-xs);line-height:1.9;color:var(--ink-2)}
.form__submit{margin-top:30px}

/* 連絡先の3枠 */
.infos{display:grid;gap:1px;margin-top:clamp(30px,3vw,52px);background:var(--line);border:1px solid var(--line)}
.info{background:var(--white);padding:clamp(22px,2.4vw,38px);text-align:center}
.info__en{font-family:var(--ff-en);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--blue)}
.info__ja{margin-top:8px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em}
.info__text{margin-top:10px;font-size:var(--fs-body);line-height:1.9;color:var(--ink-2)}

/* 条文 */
.article{margin-top:clamp(26px,2.6vw,46px)}
.article h4{margin-top:30px;font-size:var(--fs-body);font-weight:700;letter-spacing:.06em;line-height:1.8}
.article h4:first-child{margin-top:0}
.article p{margin-top:10px;font-size:var(--fs-body);line-height:2;color:var(--ink-2)}
.article ol{margin-top:10px;padding-left:1.4em;list-style:decimal}
.article ol li{font-size:var(--fs-body);line-height:2;color:var(--ink-2)}

@media (min-width:768px){
  .anchors__inner{grid-template-columns:auto minmax(0,1fr);align-items:center}
  .deflist__row{grid-template-columns:170px minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .infos{grid-template-columns:repeat(3,1fr)}
  .crumb--right{justify-content:flex-end}
}
@media (min-width:1024px){
  .cards--4{grid-template-columns:repeat(4,1fr)}
}

/* ==========================================================================
   下層ページ本文（acsl.co.jp /business/ /company/ を 1920px で実測し再現）
   実測:
   ・記事の内容幅は 1200px（ファーストビューの 1380px より狭い）
   ・小見出し「—— ACHIEVEMENT 01」Rajdhani 14px/600 ls0.7px #3455FC、先頭に34pxの罫
   ・項目見出し 18px/600 行間30px 字送り1.35px ／ 本文 14px 行間28px 字送り1.05px
   ・ジグザグは 2列×552px・列間96px、画像 920x440（比2.09）、右列を下げる
   ・人物は 写真＋役職＋氏名18px/600＋ローマ字 Rajdhani 13.5px/600 #C1C4CB
   ・沿革は 日付320px ＋ 本文880px、各行に罫線
   ========================================================================== */
.container--article{width:min(1200px, 100% - 240px);margin-inline:auto}
@media (max-width:1023px){ .container--article{width:calc(100% - 52px)} }

/* 小見出し */
.eyebrow{display:flex;align-items:center;gap:16px;
  font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.7px;line-height:1;color:var(--blue)}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}

/* 宣言ブロック（左=大きな和文 / 右=説明） */
.stmt{display:grid;gap:clamp(22px,2.4vw,44px);margin-top:clamp(30px,3vw,56px)}
.stmt__title{margin-top:18px;font-size:clamp(19px,1.46vw,28px);font-weight:700;line-height:1.75;letter-spacing:.055em}
.stmt__body{font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:var(--ink-2)}
.stmt__body + .stmt__body{margin-top:1.2em}
@media (min-width:1024px){ .stmt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,5vw,96px);align-items:start} }

/* 全幅の写真帯 */
.band{position:relative;overflow:hidden;height:clamp(180px,20.8vw,400px);margin-top:clamp(40px,4vw,72px)}
.band img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(27,46,143,.62) 0%,rgba(52,85,252,.38) 58%,rgba(39,199,245,.2) 100%)}

/* ジグザグ（互い違いの2列） */
.zig{display:grid;gap:clamp(40px,4vw,64px);margin-top:clamp(34px,3.4vw,60px)}
.zig__item{padding-bottom:clamp(28px,2.6vw,44px);border-bottom:1px solid var(--line)}
.zig__img{aspect-ratio:920/440;overflow:hidden;background:var(--bg-alt);margin-bottom:clamp(20px,2vw,34px)}
.zig__img img{width:100%;height:100%;object-fit:cover}
.zig__title{margin-top:14px;font-size:clamp(16px,1.15vw,18px);font-weight:700;line-height:1.67;letter-spacing:.075em}
.zig__text{margin-top:12px;font-size:var(--fs-body);line-height:2;letter-spacing:.055em;color:var(--ink-2)}
.zig__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.zig__tags li{padding:6px 13px;background:var(--bg-alt);font-size:var(--fs-xs);letter-spacing:.05em;line-height:1.6}
@media (min-width:1024px){
  .zig{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(48px,5vw,96px);row-gap:0;align-items:start}
  .zig__item{padding-bottom:56px}
  /* 右列を下げて互い違いに。transform は表示アニメーションに上書きされるため margin で指定する */
  .zig__item:nth-child(even){margin-top:96px}
}

/* 人物一覧 */
.people{display:grid;gap:clamp(34px,3.4vw,56px);margin-top:clamp(30px,3vw,52px)}
.person__img{aspect-ratio:3/2;overflow:hidden;background:var(--bg-alt)}
.person__img img{width:100%;height:100%;object-fit:cover}
.person__role{margin-top:18px;font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-2)}
.person__name{margin-top:8px;font-size:18px;font-weight:700;line-height:1.4}
.person__roma{margin-top:6px;font-family:var(--ff-en);font-size:13.5px;font-weight:600;letter-spacing:.06em;color:var(--mute)}
.person__text{margin-top:14px;padding-bottom:24px;border-bottom:1px solid var(--line);font-size:var(--fs-body);line-height:2;color:var(--ink-2)}
@media (min-width:768px){ .people{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 沿革・一覧表（実測: 日付320 / 本文880） */
.hist{margin-top:clamp(30px,3vw,52px);border-top:1px solid var(--line)}
.hist__row{display:grid;gap:6px 0;padding-block:20px;border-bottom:1px solid var(--line)}
.hist__key{font-size:var(--fs-body);font-weight:700;letter-spacing:.04em;line-height:2}
.hist__val{font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:var(--ink-2)}
.hist__val strong{color:var(--ink);font-weight:700}
.hist__price{font-family:var(--ff-en);font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
@media (min-width:768px){
  .hist__row{grid-template-columns:320px minmax(0,1fr);gap:0 0}
  .hist__row--price{grid-template-columns:minmax(0,1fr) 180px;align-items:baseline}
  .hist__row--price .hist__val{text-align:right}
}

/* ==========================================================================
   一覧＋写真（hopnet.co.jp/recruit/ の "OUR JOB" を 1920px で実測し再現）
   実測: リンク行 430x89px・18px・字送り1.5px・白地に罫線
        右の写真の下に濃色(#333)の見出し帯 534x120px・20px
        背景の淡い帯が左列の背後に広がる
   ========================================================================== */
.joblist{position:relative;margin-top:clamp(34px,3.4vw,60px)}
.joblist__band{display:none}
.joblist__grid{position:relative;z-index:1;display:grid;gap:clamp(24px,2.6vw,46px)}
.joblist__list{background:var(--white);border-top:1px solid var(--line)}
.joblist__row{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:16px;
  padding:clamp(20px,2vw,30px) clamp(18px,1.8vw,28px);
  border-bottom:1px solid var(--line);
  font-size:clamp(16px,1.25vw,18px);letter-spacing:.08em;line-height:1.6;
  transition:background-color .3s var(--ease),padding-left .3s var(--ease)}
.joblist__row:hover{background:var(--bg-alt);padding-left:clamp(24px,2.4vw,38px)}
.joblist__row svg{width:26px;height:8px;color:var(--blue);transition:transform .4s var(--ease)}
.joblist__row:hover svg{transform:translateX(6px)}
.joblist__media{position:relative;align-self:start}
.joblist__media .ph{aspect-ratio:728/520}
.joblist__cap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(20px,2vw,32px) clamp(20px,2vw,34px);
  background:#333;color:var(--white);
  font-size:clamp(16px,1.25vw,20px);letter-spacing:.075em;line-height:1.5}
.joblist__cap svg{width:34px;height:8px;flex:none;transition:transform .4s var(--ease)}
.joblist__cap:hover svg{transform:translateX(7px)}
@media (min-width:1024px){
  .joblist__band{display:block;position:absolute;left:calc(50% - 50vw);right:28%;
    top:clamp(30px,3vw,56px);bottom:clamp(30px,3vw,56px);background:var(--bg-alt);z-index:0}
  .joblist__grid{grid-template-columns:minmax(0,430fr) minmax(0,534fr);column-gap:clamp(40px,4.4vw,78px);align-items:start}
}

/* 人物カード（実測: 3列×360px・間54px・中央列を90px下げる・役職タグ #333 128x27） */
.member{display:grid;gap:clamp(28px,2.8vw,48px);margin-top:clamp(34px,3.4vw,60px)}
.member__card{position:relative}
.member__img{position:relative;aspect-ratio:360/341;overflow:hidden;background:var(--bg-alt)}
.member__img img{width:100%;height:100%;object-fit:cover}
.member__tag{position:absolute;left:0;bottom:0;z-index:1;display:inline-grid;place-items:center;
  min-width:128px;height:27px;padding-inline:12px;background:#333;color:var(--white);
  font-size:12px;letter-spacing:1.5px;line-height:1}
.member__meta{margin-top:18px;font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-2)}
.member__name{margin-top:8px;font-size:20px;font-weight:700;letter-spacing:.08em;line-height:1.4}
.member__roma{margin-top:6px;font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--blue)}
.member__text{margin-top:14px;font-size:var(--fs-body);line-height:2;color:var(--ink-2)}
@media (min-width:768px){
  .member{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,2.8vw,54px)}
  .member__card:nth-child(3n+2){margin-top:90px}
}

/* 写真リンクカード（青地に2列） */
.linkcards{position:relative;overflow:hidden;background:var(--blue);
  padding-block:clamp(56px,6vw,110px)}
.linkcards__mark{position:absolute;left:2%;bottom:-4%;z-index:0;
  font-family:"Figtree",var(--ff-ja);font-size:clamp(90px,11vw,210px);font-weight:600;line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.1);white-space:nowrap;pointer-events:none}
.linkcards__grid{position:relative;z-index:1;display:grid;gap:clamp(20px,2.2vw,38px)}
.linkcard{display:block;background:var(--white)}
.linkcard__img{aspect-ratio:500/260;overflow:hidden;background:var(--bg-alt)}
.linkcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.linkcard:hover .linkcard__img img{transform:scale(1.05)}
.linkcard__cap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;background:var(--blue-deep);color:var(--white);
  font-size:var(--fs-body);letter-spacing:.07em;line-height:1.5}
.linkcard__cap svg{width:30px;height:8px;flex:none;transition:transform .4s var(--ease)}
.linkcard:hover .linkcard__cap svg{transform:translateX(7px)}
@media (min-width:768px){ .linkcards__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 地図（Google マップ埋め込み。APIキー不要の出力形式を使用） */
.map{position:relative;margin-top:clamp(30px,3vw,52px);aspect-ratio:16/7;background:var(--bg-alt);overflow:hidden}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)}
.map__note{margin-top:14px;font-size:var(--fs-xs);line-height:1.9;color:var(--ink-2)}
@media (max-width:767px){ .map{aspect-ratio:4/3} }

/* ==========================================================================
   主張パネル（acsl.co.jp/business/「ACSLの価値」を参考）
   青い面に巨大な透かし英文を敷き、左にラベル／右に本文を置く
   ========================================================================== */
.vpanel{position:relative;overflow:hidden;color:var(--white);
  margin-top:clamp(34px,3.4vw,60px);
  background:linear-gradient(104deg,var(--blue-deep) 0%,var(--blue) 58%,#5C7BFF 100%);
  padding:clamp(40px,4.4vw,80px) clamp(24px,3vw,60px)}
.vpanel__ghost{position:absolute;left:3%;top:50%;translate:0 -50%;z-index:0;
  font-family:"Figtree",var(--ff-ja);font-size:clamp(44px,5.2vw,100px);font-weight:600;
  line-height:1.02;letter-spacing:-.03em;color:rgba(255,255,255,.14);pointer-events:none}
.vpanel__inner{position:relative;z-index:1;display:grid;gap:clamp(20px,2.2vw,40px)}
.vpanel__label{font-size:clamp(16px,1.25vw,20px);font-weight:700;letter-spacing:.1em;line-height:1.6}
.vpanel__body{font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:rgba(255,255,255,.92)}
.vpanel__body + .vpanel__body{margin-top:1.2em}
@media (min-width:1024px){ .vpanel__inner{grid-template-columns:minmax(0,260px) minmax(0,1fr);column-gap:clamp(40px,4vw,76px);align-items:start} }

/* ==========================================================================
   階段状のSTEP図（acsl.co.jp/business/「STEP型の概念検証型アプローチ」を参考）
   箱を段階的に上げて並べ、工程が進む様子を示す
   ========================================================================== */
.stair{display:grid;gap:clamp(20px,2vw,32px);margin-top:clamp(34px,3.4vw,60px)}
.stair__item{position:relative;background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:clamp(22px,2.2vw,34px);align-self:start}
.stair__no{font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--mute)}
.stair__icon{display:grid;place-items:center;width:52px;height:52px;margin-top:14px;border-radius:50%;
  background:var(--bg-alt);color:var(--blue)}
.stair__icon svg{width:24px;height:24px}
.stair__title{margin-top:16px;font-size:clamp(16px,1.15vw,19px);font-weight:700;letter-spacing:.06em;color:var(--blue);line-height:1.6}
.stair__sub{margin-top:10px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;line-height:1.7}
.stair__list{margin-top:12px}
.stair__list li{position:relative;padding-left:16px;font-size:var(--fs-sm);line-height:1.95;color:var(--ink-2)}
.stair__list li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--blue)}
@media (min-width:1024px){
  .stair{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,2vw,32px);align-items:start}
  /* 1段ずつ持ち上げて階段に見せる */
  .stair__item:nth-child(1){margin-top:132px}
  .stair__item:nth-child(2){margin-top:88px}
  .stair__item:nth-child(3){margin-top:44px}
  .stair__item:nth-child(4){margin-top:0}
}

/* 代表挨拶（写真＋本文） */
.rep{display:grid;gap:clamp(26px,3vw,56px);margin-top:clamp(30px,3vw,56px);align-items:start}
.rep__photo{position:relative}
.rep__photo .ph{aspect-ratio:3/4}
.rep__photo .ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.rep__sign{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rep__role{font-size:var(--fs-xs);letter-spacing:.1em;color:var(--ink-2)}
.rep__name{margin-top:8px;font-size:21px;font-weight:700;letter-spacing:.1em;line-height:1.4}
.rep__roma{margin-top:6px;font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--blue)}
@media (min-width:768px){ .rep{grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:clamp(36px,4vw,72px)} }

/* フォームの送信状態 */
.form__state{display:none;margin-top:24px;padding:20px 24px;border-left:3px solid var(--blue);background:var(--bg-alt);
  font-size:var(--fs-sm);line-height:1.9}
.form__state.is-on{display:block;animation:fadeUp .5s var(--ease) both}
.form__state--err{border-left-color:#C4452F}
.form.is-sending button[type=submit]{opacity:.5;pointer-events:none}
.form__done{display:none;margin-top:clamp(30px,3vw,52px);padding:clamp(32px,3.4vw,56px);border:1px solid var(--line);text-align:center}
.form__done.is-on{display:block;animation:fadeUp .6s var(--ease) both}
.form__done h3{font-size:clamp(18px,1.4vw,24px);font-weight:700;letter-spacing:.06em;line-height:1.7}
.form__done p{margin-top:16px;font-size:var(--fs-body);line-height:2;color:var(--ink-2)}
.field__error{display:none;margin-top:8px;font-size:var(--fs-xs);color:#C4452F;letter-spacing:.04em}
.field.is-invalid .field__error{display:block}
.field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{border-color:#C4452F}

/* ロゴ（元サイトのババロアのマークを使用。#E8BB18） */
.brand__logo{width:34px;height:34px;flex:none;object-fit:contain}
.brand{align-items:center}
.header .brand__logo--on-dark{display:block}
.header .brand__logo--on-light{display:none}
.header.is-fixed .brand__logo--on-dark{display:none}
.header.is-fixed .brand__logo--on-light{display:block}
.footer__logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer__logo img{width:30px;height:30px}
.footer__logo span{font-family:var(--ff-en);font-size:19px;font-weight:700;letter-spacing:.04em;color:var(--blue-deep)}

/* メインページ：強みセクションを淡い面で区切る（前後のセクションと見分けるため） */
#strength{background:#F7F9FD;padding-block:clamp(72px,7vw,132px) clamp(96px,9.4vw,180px)}
#strength .str__card{box-shadow:0 18px 48px rgba(16,24,64,.08)}
#strength + .sec,#strength + section{padding-top:clamp(72px,7vw,132px)}

/* ==========================================================================
   下部のお問い合わせ導線
   写真の上に濃紺を重ね、巨大な透かし文字を背負わせる。
   見出し・本文・2つの行動・連絡先を1つの面にまとめる
   ========================================================================== */
.cta{position:relative;overflow:hidden;color:var(--white);
  padding-block:clamp(72px,7.5vw,140px)}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(14,22,58,.94) 0%,rgba(27,46,143,.9) 46%,rgba(52,85,252,.82) 100%)}
.cta__ghost{position:absolute;right:-2%;bottom:-8%;z-index:1;
  font-family:"Figtree",var(--ff-ja);font-size:clamp(90px,11.5vw,220px);font-weight:600;line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.08);white-space:nowrap;pointer-events:none}
.cta__inner{position:relative;z-index:2;display:grid;gap:clamp(30px,3.4vw,64px)}
.cta__en{font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.75)}
.cta__title{margin-top:18px;font-size:clamp(23px,2.2vw,40px);font-weight:700;line-height:1.6;letter-spacing:.04em}
.cta__text{margin-top:22px;font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:rgba(255,255,255,.88)}
.cta__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(28px,2.8vw,44px)}
.cta .btn{background:var(--white);color:var(--blue-deep)}
.cta .btn::before{background:var(--blue)}
.cta .btn:hover > *{color:var(--white)}
.cta__ghostBtn{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  width:240px;height:80px;max-width:100%;border:1px solid rgba(255,255,255,.5);
  font-family:var(--ff-en);font-size:14px;font-weight:600;letter-spacing:.12em;
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.cta__ghostBtn svg{width:18px;height:8px;transition:transform .4s var(--ease)}
.cta__ghostBtn:hover{background:rgba(255,255,255,.14);border-color:var(--white)}
.cta__ghostBtn:hover svg{transform:translateX(6px)}
.cta__direct{display:grid;gap:2px;align-content:start;
  padding:clamp(24px,2.4vw,38px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.cta__dLabel{font-family:var(--ff-en);font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.72)}
/* 電話番号は連絡先として読み取りやすさを優先し、字送りを詰めず大きく置く */
.cta__dMain{display:inline-block;margin-top:14px;font-family:var(--ff-en);
  font-size:clamp(26px,2.3vw,36px);font-weight:600;letter-spacing:-.01em;line-height:1.2;
  text-decoration:none}
.cta__dMain:hover{opacity:.82}
.cta__dSub{margin-top:14px;font-size:var(--fs-xs);line-height:1.85;letter-spacing:.02em;color:rgba(255,255,255,.78)}
.cta__dMail{display:inline-block;margin-top:4px;font-family:var(--ff-en);font-size:17px;font-weight:500;
  letter-spacing:-.005em;text-decoration:underline;text-underline-offset:4px}
.cta__dMail:hover{color:#BFD0FF}
.cta__dSub a{text-decoration:underline;text-underline-offset:3px}
.cta__dSub a:hover{color:#BFD0FF}
@media (min-width:900px){
  .cta__inner{grid-template-columns:minmax(0,1fr) minmax(0,420px);column-gap:clamp(48px,5vw,96px);align-items:center}
}

/* 画像は枠ごと、本文と同じ動きで現れる（参考サイトと同方式） */
.js .band,.js .zig__img,.js .joblist__media,.js .rep__photo,.js .svc__visual,.js .member__img{
  opacity:0;transform:translateY(40px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.js .band.is-shown,.js .zig__img.is-shown,.js .joblist__media.is-shown,
.js .rep__photo.is-shown,.js .svc__visual.is-shown,.js .member__img.is-shown{opacity:1;transform:none}
.no-js .band,.no-js .zig__img,.no-js .joblist__media,.no-js .rep__photo,.no-js .svc__visual,.no-js .member__img{opacity:1;transform:none}

/* 守秘義務についての注記（実績ページ） */
.nda{position:relative;z-index:1;margin-top:clamp(56px,5.6vw,104px);
  padding:clamp(28px,3vw,52px);border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.07)}
.nda__label{display:flex;align-items:center;gap:14px;
  font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.16em;color:#8CB4FF}
.nda__label::before{content:"";width:30px;height:1px;background:currentColor}
.nda__title{margin-top:16px;font-size:clamp(17px,1.3vw,22px);font-weight:700;letter-spacing:.06em;line-height:1.7}
.nda__text{margin-top:16px;font-size:var(--fs-body);line-height:2;letter-spacing:.05em;color:rgba(255,255,255,.88)}
.nda__text + .nda__text{margin-top:1em}

/* 404 */
.nf{position:relative;overflow:hidden;color:var(--white);min-height:calc(100svh - var(--head-h-fix));
  display:flex;align-items:center;
  background:linear-gradient(104deg,var(--blue-deep) 0%,var(--blue) 56%,#5C7BFF 100%)}
.nf::after{content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,transparent 0 42%,rgba(255,255,255,.07) 42% 62%,transparent 62%)}
.nf__ghost{position:absolute;right:-2%;bottom:-10%;z-index:0;
  font-family:"Figtree",var(--ff-ja);font-size:clamp(150px,22vw,420px);font-weight:600;line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.1);pointer-events:none}
.nf__inner{position:relative;z-index:1;width:100%;padding-block:clamp(60px,6vw,110px)}
.nf__code{font-family:"Figtree",var(--ff-ja);font-size:clamp(56px,6.3vw,120px);font-weight:500;line-height:1;letter-spacing:-.04em}
.nf__title{margin-top:clamp(18px,2vw,34px);font-size:clamp(19px,1.6vw,30px);font-weight:700;letter-spacing:.08em;line-height:1.7}
.nf__text{margin-top:20px;max-width:40em;font-size:var(--fs-body);line-height:2;color:rgba(255,255,255,.88)}
.nf__links{display:grid;gap:1px;margin-top:clamp(34px,3.4vw,56px);background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.3)}
.nf__links a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;background:rgba(255,255,255,.06);
  font-size:var(--fs-sm);letter-spacing:.06em;transition:background-color .3s var(--ease)}
.nf__links a:hover{background:rgba(255,255,255,.18)}
.nf__links svg{width:26px;height:8px;flex:none;transition:transform .4s var(--ease)}
.nf__links a:hover svg{transform:translateX(6px)}
@media (min-width:768px){ .nf__links{grid-template-columns:repeat(2,1fr)} }

/* メインページ：採用セクションの上下余白を詰める（強みセクションと同基準） */
#recruit{padding-block:clamp(72px,7vw,132px) clamp(80px,7.8vw,150px)}
#recruit .rec__stage{margin-top:clamp(-20px,-1.2vw,0px)}