@charset "utf-8";
/* ============================================================
   株式会社サンテック コーポレートサイト
   Design canvas: 1366 x N (Illustrator, 2026-08-18 入稿)
   Content column: design x183 – x1183 (= 1000px)
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --orange:#cd4225;          /* 指示レイヤー: RGB(205,66,37) */
  --orange-lt:#d76851;
  --ink:#333333;
  --dark:#333333;            /* 製品紹介バンド */
  --line:#b3b3b3;
  --card:#ececec;
  --bar:#e6e6e6;
  --stage:1366px;
  --col:1000px;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --en:"Roboto","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
  /* 各スタイルの「ボックス上端 → 1行目インク上端」実測オフセット。
     em 指定では合わない（フォントのアセント/仮想ボディに依存するため） */
  --ink18:12.5px;  --ink16:11.94px;  --ink36:3px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--jp);font-weight:500;
  font-feature-settings:"halt" 1;   /* Illustrator の約物半角に合わせる（palt は仮名まで詰まる） */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- layout primitives ---------- */
.l-band{position:relative;width:100%}
.l-stage{position:relative;width:100%;max-width:var(--stage);margin-inline:auto}
.l-inner{position:relative;width:var(--col);margin-inline:auto}
.u-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* band art: inline SVG drawn in page coordinates */
.band-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.band-art image{pointer-events:auto}

/* ---------- type ---------- */
.t-sec{                       /* 36px 見出し（製品紹介／採用情報／お知らせ） */
  font-size:36px;font-weight:600;line-height:1;letter-spacing:.1em;
  text-align:center;text-indent:.1em;
  /* 支給デザインは見出しにプロポーショナルメトリクスが掛かっている（仮名だけ詰まる） */
  font-feature-settings:"palt" 1;
}
.t-sec-en{                    /* Roboto ExtraBold 18px の英字サブ */
  font-family:var(--en);font-size:18px;font-weight:800;line-height:1;
  letter-spacing:.2em;text-align:center;text-indent:.2em;color:var(--orange);
  margin-top:22px;
}
.t-lead{font-size:18px;font-weight:600;line-height:2.3333;letter-spacing:.042em}
.t-em{color:var(--orange);font-weight:700}

/* ---------- CTA ---------- */
.c-pill{                      /* 白ピル + 赤い矢印（実測: 210x50.5、ラベル中心=左端+92.4） */
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:210px;height:50px;padding-right:25.2px;
  border:1px solid var(--ink);border-radius:25px;background:#fff;color:var(--ink);
  font-size:16px;font-weight:700;letter-spacing:.11em;text-indent:.11em;line-height:1;
  white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.c-pill .c-arw{position:absolute;right:30px;top:50%;transform:translateY(-50%)}
.c-pill:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.c-pill:hover .c-arw path{fill:#fff}
.c-arw{width:25.8px;height:14px;flex:none}
.c-arw .a1{fill:#d71522}
.c-arw .a2{fill:#9d1f24}
.c-pill .c-arw path{transition:fill .35s var(--ease)}

.c-btn-contact{               /* オレンジのお問い合わせボタン（ヘッダー／フッター） */
  display:inline-flex;align-items:center;justify-content:center;gap:7.5px;
  width:210px;height:50px;border-radius:25px;background:var(--orange);color:#fff;
  font-size:18px;font-weight:700;letter-spacing:.09em;text-indent:.09em;line-height:1;
  white-space:nowrap;
  transition:opacity .35s var(--ease),background-color .35s var(--ease);
}
.c-btn-contact:hover{background:#b7371c}
.c-btn-contact .fa-solid{font-size:21.5px;text-indent:0}

/* ============================================================
   ヘッダー（デザイン: 1366 x 120）
   ============================================================ */
.hdr{position:absolute;top:0;left:0;width:100%;height:120px;z-index:50}
.hdr__stage{position:relative;height:120px}
.hdr__home{position:absolute;left:25px;top:38px;width:277px}
.hdr__home img{width:100%}
.hdr__group{position:absolute;left:322px;top:46.5px;width:104px}
.hdr__nav{position:absolute;left:0;top:0;width:100%;height:100%}
.hdr__row{position:absolute;display:flex;font-size:16px;font-weight:500;letter-spacing:.08em;line-height:1}
.hdr__row--sub{top:35px;left:886px}
.hdr__row--main{top:66.5px;left:658px}
.hdr__row a{transition:color .35s var(--ease)}
.hdr__row a:hover{color:var(--orange)}
.hdr__row--sub a + a{margin-left:38px}
.hdr__row--main a + a{margin-left:42px}
.hdr__cta{position:absolute;left:1129px;top:34.5px}

/* FV に重なる白抜きヘッダー（00_パーツ_フォーマット_ヘッダー2.ai） */
.hdr--overlay{color:#fff}
.hdr--overlay::before{
  content:"";position:absolute;inset:0;
  /* 実測: y0–45 は不透明の黒、そこから y120 で透明へ落ちる */
  background:linear-gradient(180deg,#000 0%,#000 37.5%,rgba(0,0,0,.958) 53.3%,
              rgba(0,0,0,.856) 68.3%,rgba(0,0,0,.61) 83.3%,rgba(0,0,0,.31) 93.3%,rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.hdr--overlay .hdr__stage{z-index:1}
.hdr--overlay .hdr__row a:hover{color:#f6b9a9}

/* 下層ページ用の白ヘッダー（デザイン: 白ベタ 1366x120 がキービジュアルに重なる） */
.hdr--solid{background:#fff;color:var(--ink)}

.hdr__burger{display:none}

/* ============================================================
   TOP : FV（動画）  design y 0–768
   ============================================================ */
.fv{height:768px;overflow:hidden;background:#0d1b3d}
.fv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fv .l-stage{height:768px}
.fv__catch{
  position:absolute;left:180px;top:440.7px;
  color:#fff;font-size:72px;font-weight:800;line-height:1.7153;letter-spacing:.083em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* ============================================================
   TOP : イントロ + ワンストップ体制  design y 768–2477.807
   ============================================================ */
.about{height:1709.807px;overflow:hidden}
.about .l-stage{height:1709.807px}
.about__lead{position:absolute;left:183px;top:calc(891px - 768px - var(--ink18));width:820px}
.about__wordmark{position:absolute;left:0;top:calc(1040.576px - 768px);width:733px}
/* 45°のクリッピングは Illustrator のクリップパスをそのまま px で再現 */
.about__photo{
  position:absolute;left:0;top:calc(1149.883px - 768px);width:1145px;height:500px;
  object-fit:cover;object-position:left top;
  clip-path:polygon(0 0,1141.758px 0,641.758px 500px,0 500px);
}
.about__drill{
  position:absolute;left:613.412px;top:calc(1716.132px - 768px);
  width:1174.228px;height:783.201px;max-width:none;object-fit:cover;
  clip-path:polygon(1638.003px 21.613px,509.756px 21.613px,-230.219px 761.588px,898.028px 761.588px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%);
}
.about__h{
  position:absolute;left:176.5px;top:calc(1775.5px - 768px - 5.36px);
  font-size:71px;font-weight:700;line-height:1;letter-spacing:.0906em;
  font-feature-settings:"palt" 1;
}
.about__body{position:absolute;left:183px;top:calc(1902.5px - 768px - var(--ink18));width:640px}
.about__cta{position:absolute;left:182px;top:calc(2288.5px - 768px)}

/* ============================================================
   TOP : 製品紹介  design y 2477.807–5409.807
   ============================================================ */
.products{background:var(--dark);color:#fff;padding-top:124.7px;padding-bottom:127.8px}
.products .t-sec-en{color:var(--orange)}
.pgrid{display:grid;grid-template-columns:repeat(3,310px);
       column-gap:35px;row-gap:28px;margin-top:62px;align-items:start}
.pcard__fig{display:flex;align-items:center;justify-content:center;
            width:310px;height:248px;background:#fff;overflow:hidden}
/* 支給デザインは 4 枚のカード地色が黒（残り 11 枚は白）。写真の地色に合わせた指定を再現 */
.pcard__fig--dark{background:#000}
/* 製品写真は 310:248 に揃えて枠いっぱいに配置（申し送り #18）。
   写真ごとに縦横比が違うため、素材側で地色を枠まで延長してある */
.pcard__fig img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.pcard__t{margin-top:19.3px;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:.014em;
          white-space:nowrap}   /* 支給デザインの見出しはポイント文字＝折り返さない */
.pcard__d{margin-top:12.6px;font-size:14px;font-weight:500;line-height:1.857;letter-spacing:.055em;
          text-align:justify}  /* 支給デザインの説明文は均等配置（エリア内文字） */
.pcard__d .br{display:block}
.c-patent{
  display:flex;align-items:center;justify-content:center;
  width:310px;height:35.5px;margin-top:14px;border-radius:8px;background:#fff;
  color:#f03a1e;font-size:16px;font-weight:700;letter-spacing:.045em;text-indent:.045em;line-height:1;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.c-patent:hover{background:var(--orange);color:#fff}

/* ============================================================
   TOP : 採用情報  design y 5409.807–6707.807
   ============================================================ */
.recruit{height:1298px;background:var(--orange);color:#fff;overflow:hidden}
.recruit .l-stage{height:1298px}
.recruit__photo{
  position:absolute;left:-127.279px;top:calc(5220.365px - 5409.807px);
  width:2229.527px;height:1487.094px;max-width:none;object-fit:cover;
  clip-path:polygon(965.809px 400.809px,1838.76px 400.809px,910.128px 1329.442px,37.176px 1329.442px);
}
.recruit__head{position:absolute;left:0;top:calc(5539px - 5409.807px - var(--ink36));width:100%}
.recruit__head .t-sec-en{color:#fff}
.recruit__catch{
  position:absolute;left:183px;top:calc(5740px - 5409.807px - 18.67px);
  font-size:71px;font-weight:600;line-height:1.4085;letter-spacing:.103em;
  font-feature-settings:"palt" 1;
  text-indent:17px;                  /* 支給デザインの 1 行目は 17px 字下げ */
}
.recruit__body{position:absolute;left:183px;top:calc(5971.5px - 5409.807px - var(--ink18));width:520px}
.recruit__cta{position:absolute;left:182px;top:calc(6104.8px - 5409.807px)}
.rlinks{position:absolute;left:703.5px;top:calc(6303.473px - 5409.807px);width:479px}
.rlink{
  display:flex;align-items:center;position:relative;
  height:79px;padding-left:39.5px;background:rgba(0,0,0,.7);
  font-size:20px;font-weight:600;letter-spacing:.06em;line-height:1;color:#fff;
  transition:background-color .35s var(--ease);
}
.rlinks li + li{margin-top:20px}
.rlink:hover{background:rgba(0,0,0,.85)}
.rlink .c-arw{position:absolute;right:39.5px;top:50%;transform:translateY(-50%)}

/* ============================================================
   TOP : お知らせ  design y 6707.807–7588.85
   ============================================================ */
.news{padding-top:126.2px;padding-bottom:127.85px}
.news .t-sec-en{color:var(--orange)}
.nlist{position:relative;margin-top:61.85px;margin-left:100px;
       padding-left:30px;border-left:1px solid var(--line)}
.nrow{display:flex;align-items:baseline;position:relative;
      gap:50px;height:75px;padding-top:27.8px;border-bottom:1px solid var(--line)}
.nlist > li:first-child .nrow{border-top:1px solid var(--line)}
.nrow::before{content:"";position:absolute;left:-30px;top:28.5px;
              width:3px;height:18px;background:var(--orange)}
.nrow__d{flex:none;width:82px;font-family:var(--en);font-size:18px;font-weight:500;
         letter-spacing:.02em;line-height:1}
.nrow__t{font-size:16px;font-weight:500;letter-spacing:.062em;line-height:1;
         transition:color .35s var(--ease)}
a.nrow:hover .nrow__t{color:var(--orange)}
.c-more{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:220px;height:50px;margin:64.15px auto 0;padding-left:52px;
  background:#f2f2f2;clip-path:polygon(10px 0,220px 0,210px 50px,0 50px);
  font-family:var(--en);font-size:14px;font-weight:800;letter-spacing:.06em;line-height:1;
  transition:filter .35s var(--ease);
}
.c-more::before{content:"";position:absolute;left:32px;top:14px;width:9.2px;height:23px;
                background:#040000;box-shadow:17.5px 0 0 #999899,35px 0 0 #d83324}
.c-more:hover{filter:brightness(.94)}

/* ============================================================
   フッター（00_パーツ_フォーマット_フッター.ai / 1366 x 837）
   ============================================================ */
.ftr{position:relative;height:837px;overflow:hidden;background:#fff}
.ftr .l-stage{height:837px}
/* 写真は原寸（1438x984）を design(-36,-75) に置き、帯 y115–587 でクリップ。
   暗幕は実測どおり #666 の乗算（＝写真 x0.4） */
.ftr__media{position:absolute;left:0;top:115px;width:100%;height:472px;overflow:hidden}
.ftr__photo{position:absolute;left:-36px;top:-190px;width:1438px;height:984px;max-width:none}
.ftr__scrim{position:absolute;inset:0;background:#666;mix-blend-mode:multiply}
.ftr__card{position:absolute;left:183px;top:12px;width:1000px;height:377px;
           background:var(--card);border-radius:30px;text-align:center}
.ftr__h{margin-top:32.5px;font-size:36px;font-weight:600;line-height:1;letter-spacing:.1em;text-indent:.1em;
        font-feature-settings:"palt" 1}
.ftr__en{margin-top:23px;font-family:var(--en);font-size:18px;font-weight:800;
         line-height:1;letter-spacing:.2em;text-indent:.2em;color:var(--orange)}
.ftr__note{margin-top:23px;font-size:18px;font-weight:500;line-height:1;letter-spacing:.04em}
.ftr__cols{display:flex;justify-content:center;margin-top:44px}
.ftr__col{position:relative;width:275px;padding-top:10px}
.ftr__col + .ftr__col::before{content:"";position:absolute;left:0;top:0;width:1px;height:148px;background:var(--line)}
.ftr__icon{display:block;height:38px;font-size:34px;line-height:1;color:var(--ink)}
.ftr__lbl{margin-top:16px;font-size:16px;font-weight:500;line-height:1;letter-spacing:.04em}
.ftr__tel{display:inline-block;margin-top:15.5px;font-family:var(--en);font-size:30px;
          font-weight:700;line-height:1;letter-spacing:.031em;color:var(--ink);
          transition:color .35s var(--ease)}
.ftr__tel:hover{color:var(--orange)}
.ftr__hours{margin-top:12px;font-size:14px;font-weight:500;line-height:1;letter-spacing:.02em}
.c-pill--ftr{margin-top:19px}
.ftr__logos{position:absolute;left:0;top:453px;width:100%;display:flex;justify-content:center;gap:32px}
.ftr__logo{display:flex;align-items:center;justify-content:center;
           width:240px;height:70px;background:#fff;transition:opacity .35s var(--ease)}
.ftr__logo:hover{opacity:.72}
.ftr__logo img{max-width:221px;max-height:39px;width:auto}
.ftr__base{position:absolute;left:0;top:587px;width:100%;height:210px;background:#fff}
/* 以下の座標は .ftr__base（design y587）からの相対値 */
.ftr__home{position:absolute;left:135px;top:37.7px;width:277px}
.ftr__addr{position:absolute;left:137px;top:calc(101.4px - .16em);
           font-size:14px;font-weight:400;line-height:2.05;letter-spacing:.03em;font-style:normal}
.ftr__nav{position:absolute;left:542px;top:calc(82.2px - .16em);display:flex;
          font-size:16px;font-weight:500;line-height:1;letter-spacing:.08em}
.ftr__nav a + a{margin-left:42px}
.ftr__nav a,.ftr__sub a{transition:color .35s var(--ease)}
.ftr__nav a:hover,.ftr__sub a:hover{color:var(--orange)}
.ftr__cta{position:absolute;left:1019px;top:64px}
.ftr__sub{position:absolute;left:860px;top:calc(155.5px - .16em);display:flex;
          font-size:14px;font-weight:500;line-height:1;letter-spacing:.06em}
.ftr__sub a + a{margin-left:34px}
.ftr__copy{position:absolute;left:0;top:797px;width:100%;height:40px;background:var(--bar);
           display:flex;align-items:center;justify-content:center;
           font-size:14px;font-weight:500;letter-spacing:.04em;line-height:1}

/* ============================================================
   私たちの強み
   ============================================================ */
/* --- キービジュアル（design y 0–888） --- */
.shero{height:888px;overflow:hidden;background:#fff}
.shero .l-stage{height:888px}
.shero__band{position:absolute;left:0;top:335.791px;width:990px;height:172.8px;
             /* 支給デザインは #cd4225 のベタに同色を乗算したグラデーション */
             background-image:linear-gradient(90deg,#cd4225 0%,#a51105 100%);
             display:flex;align-items:center;padding-left:19.5px}
.shero__t{color:#fff;font-size:128px;font-weight:800;line-height:1;letter-spacing:.006em;
          font-feature-settings:"palt" 1;
          position:relative;top:-5.5px}
.shero__sub > *,.shero__sub{position:relative}
.shero__sub{position:absolute;left:179.865px;top:538.591px;width:960px;height:80px;
            border:1.83px solid var(--orange);background:#fff;
            display:flex;align-items:center;justify-content:center;
            font-size:40px;font-weight:700;line-height:1;letter-spacing:.097em;
            font-feature-settings:"palt" 1;
            text-indent:.097em;color:var(--orange);
            padding-bottom:8px}   /* 実測: テキストは枠中心より 1.9px 上 */

/* --- パンくず（design y 888–933） --- */
.scrumb{height:45px;background:var(--orange);color:#fff}
.scrumb .l-inner{display:flex;align-items:center;height:45px;
                 font-size:16px;font-weight:700;letter-spacing:.06em;line-height:1}
.scrumb .sep{margin:0 16px;font-size:11px}
.scrumb a{transition:opacity .35s var(--ease)}
.scrumb a:hover{opacity:.7}

/* --- 私たちの強み（design y 933–1676.282） --- */
.sintro{height:743.282px;overflow:hidden}
.sintro .l-stage{height:743.282px}
.sintro__head{position:absolute;left:0;top:calc(1062px - 933px - var(--ink36));width:100%}
.sintro__body{position:absolute;left:183px;top:calc(1196.5px - 933px - var(--ink18));width:640px}
.sintro__fig{position:absolute;left:833px;top:calc(1196.105px - 933px);width:350px;margin:0}
.sintro__fig img{width:350px;height:350px;object-fit:cover}
.sintro__fig::before{content:"";position:absolute;left:30px;top:-30px;width:350px;height:350px;
                     border:1px solid var(--orange-lt)}

/* --- 匠／きさげ作業（design y 1676.282–2475.407） --- */
.stakumi{height:799.125px;background:#000;color:#fff;overflow:hidden}
.stakumi .l-stage{height:799.125px}
/* 「匠」と「きさげ作業」は重なって組まれているため 1 枚のアウトライン画像として実装 */
.stakumi__mark{position:absolute;left:80px;top:calc(1780px - 1676.282px);width:572px}
.stakumi__body{position:absolute;left:183px;top:calc(2057px - 1676.282px - var(--ink18));width:520px;
               font-size:18px;font-weight:600;line-height:2.3333;letter-spacing:.042em}

/* --- 各プロセス（design y 2475.407–5603.787） --- */
.sproc{height:3128.38px;overflow:hidden}
.sproc .l-stage{height:3128.38px}
.sp-fig{position:absolute;left:var(--x);top:var(--y);width:680px;height:510px;margin:0;overflow:hidden}
.sp-fig img{width:100%;height:100%;object-fit:cover}
.sp-h{position:absolute;left:var(--tx);top:calc(var(--hy) - var(--ink36));width:var(--tw);
      font-size:36px;font-weight:600;line-height:1;letter-spacing:.1em;
      font-feature-settings:"palt" 1;
      text-align:center;text-indent:.1em}
.sp-rule{position:absolute;left:var(--rx);top:var(--ry);width:30px;height:6px;background:var(--orange)}
.sp-p{position:absolute;left:var(--tx);top:calc(var(--by) - var(--ink16));width:var(--tw);
      font-size:16px;font-weight:500;line-height:2.375;letter-spacing:.04em;text-align:justify}

/* ============================================================
   展示会用ビルド（指示レイヤー「※展示会用は、隠す」）
   body に .is-expo を付ける / ?expo=1 でも切替可
   ============================================================ */
.is-expo .hdr__nav,
.is-expo .recruit__cta,
.is-expo .c-more,
.is-expo .rlink .c-arw{display:none}

/* ============================================================
   レスポンシブ
   ※ 支給デザインは 1366 固定の 1 案のみ。SP/タブレットは
   　 デザイン階層を保ったままの縦積みとして実装（README 参照）
   ============================================================ */
@media (max-width:1365px){
  :root{--col:min(1000px, calc(100% - 80px))}
  .l-inner{width:var(--col)}

  /* 1366 未満はヘッダーを可変レイアウトへ（デザインの絶対座標のままだと横スクロールする） */
  .hdr__stage{display:flex;align-items:center;padding-inline:24px}
  .hdr__home,.hdr__group,.hdr__cta,.hdr__nav,.hdr__row{position:static;left:auto;top:auto}
  .hdr__home{flex:none;width:min(277px,22vw)}
  .hdr__group{flex:none;width:min(104px,8vw);margin-left:20px}
  .hdr__nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
            gap:8px 24px;margin-left:auto;width:auto;height:auto}
  .hdr__row{display:flex;gap:clamp(14px,2vw,42px);font-size:15px}
  .hdr__row--sub a + a,.hdr__row--main a + a{margin-left:0}
  .hdr__cta{flex:none;margin-left:24px}

  .fv,.fv .l-stage{height:min(768px,62vw)}
  .fv__catch{left:6vw;top:auto;bottom:14%;font-size:min(72px,5.4vw)}

  .about,.about .l-stage{height:auto}
  .about{padding-top:120px;padding-bottom:120px}
  .about .band-art{display:none}
  .about__lead,.about__wordmark,.about__photo,.about__drill,.about__h,.about__body,.about__cta{
    position:static;width:auto;height:auto;left:auto;top:auto;
    clip-path:none;-webkit-mask-image:none;mask-image:none}
  .about__lead{width:min(820px,100%);margin-inline:auto}
  .about__wordmark{width:min(733px,80%);margin:56px 0 0}
  .about__photo{width:100%;margin-top:24px}
  .about__h{margin-top:88px;font-size:min(71px,6vw)}
  .about__body{margin-top:40px;width:min(640px,100%)}
  .about__cta{display:inline-flex;margin-top:48px}
  .about__drill{display:block;width:100%;max-width:100%;margin-top:56px}

  .pgrid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:35px}
  .pcard__fig{width:100%;height:auto;aspect-ratio:310/248}
  .pcard__t{white-space:normal}

  .recruit,.recruit .l-stage{height:auto}
  .recruit{padding:120px 0}
  .recruit .band-art{display:none}
  .recruit__head,.recruit__catch,.recruit__body,.recruit__cta,.rlinks,.recruit__photo{
    position:static;width:auto;height:auto;left:auto;top:auto;clip-path:none}
  .recruit__photo{display:block;width:100%;max-width:100%;margin-top:48px;order:9}
  .recruit__catch{margin-top:64px;font-size:min(71px,6vw)}
  .recruit__body{margin-top:40px}
  .recruit__cta{display:inline-flex;margin-top:44px}
  .rlinks{margin-top:56px;width:min(479px,100%)}

  .nlist{margin-left:0}

  .ftr,.ftr .l-stage{height:auto}
  .ftr__photo,.ftr__scrim{position:absolute;top:115px}
  .ftr__card{position:relative;left:auto;top:auto;width:min(1000px,calc(100% - 40px));
             height:auto;margin:0 auto;padding-bottom:40px}
  .ftr__logos{position:relative;top:auto;margin-top:48px}
  .ftr__base{position:relative;top:auto;height:auto;padding:56px 0 24px}
  .ftr__home,.ftr__addr,.ftr__nav,.ftr__cta,.ftr__sub,.ftr__copy{
    position:static;left:auto;top:auto}
  .ftr__inner{width:min(1000px,calc(100% - 40px));margin-inline:auto}
  .ftr__nav,.ftr__sub{flex-wrap:wrap;gap:16px 32px;margin-top:24px}
  .ftr__nav a + a,.ftr__sub a + a{margin-left:0}
  .ftr__cta{display:inline-flex;margin-top:24px}
  .ftr__copy{margin-top:40px}

  /* --- 私たちの強み --- */
  .shero,.shero .l-stage{height:auto;min-height:0}
  .shero{padding-top:120px}
  .shero__art{position:relative;width:100%;height:min(500px,44vw);inset:auto}
  .shero__band{position:relative;left:auto;top:auto;width:min(990px,94%);height:auto;
               margin-top:-88px;padding:20px 20px 20px 34px}
  .shero__t{font-size:min(128px,9.6vw)}
  .shero__sub{position:relative;left:auto;top:auto;width:min(960px,94%);height:auto;
              margin:24px auto 40px;padding:18px 12px;font-size:min(40px,3.4vw);text-align:center}

  .sintro,.sintro .l-stage{height:auto}
  .sintro{padding:104px 0}
  .sintro .band-art{display:none}
  .sintro__head,.sintro__body,.sintro__fig{position:static;left:auto;top:auto;width:auto}
  .sintro__body{margin:96px auto 0;width:min(640px,100%)}
  .sintro__fig{width:min(350px,80%);margin:56px auto 0}
  .sintro__fig img{width:100%;height:auto;aspect-ratio:1}
  .sintro__fig::before{display:none}

  .stakumi,.stakumi .l-stage{height:auto}
  .stakumi{padding:96px 0}
  .stakumi .l-stage{display:flex;flex-direction:column;
                    width:min(1000px,calc(100% - 80px));margin-inline:auto}
  .stakumi .band-art{position:relative;order:9;inset:auto;width:100%;
                     height:min(560px,52vw);margin-top:56px}
  .stakumi__mark,.stakumi__body{position:static;left:auto;top:auto;width:auto}
  .stakumi__mark{width:min(572px,82%)}
  .stakumi__body{margin-top:40px;width:min(520px,100%)}

  .sproc,.sproc .l-stage{height:auto}
  .sproc{padding-bottom:96px}
  .sproc .l-stage{display:flex;flex-direction:column}
  .sp-fig,.sp-h,.sp-rule,.sp-p{position:static;left:auto;top:auto;width:auto}
  .sp-fig{width:min(680px,100%);height:auto;margin:96px auto 0}
  .sp-fig img{width:100%;height:auto;aspect-ratio:4/3}
  .sp-h{width:min(1000px,calc(100% - 80px));margin:40px auto 0}
  .sp-rule{width:30px;height:6px;margin:28px auto 0}
  .sp-p{width:min(680px,calc(100% - 80px));margin:32px auto 0}
}

@media (max-width:900px){
  /* トップは FV に重なる白抜きヘッダーのまま（白ロゴが白地に沈むのを避ける）、
     下層ページは白ベタヘッダー */
  .hdr{height:72px}
  .hdr--solid{position:relative;background:#fff;color:var(--ink)}
  .hdr--overlay{position:absolute;background:transparent}
  .hdr--overlay .hdr__burger span{background:#fff}
  .hdr--overlay.is-open .hdr__burger span{background:var(--ink)}
  .hdr__stage{height:72px}
  .hdr__stage{padding-inline:12px}
  .hdr__home{width:min(198px,44vw)}
  .hdr__group{display:none}
  .hdr__cta{margin-left:auto;margin-right:46px}
  .c-btn-contact{width:132px;height:44px;font-size:14px;gap:8px}
  .hdr__burger{display:flex;position:absolute;right:12px;top:16px;
               width:40px;height:40px;flex-direction:column;justify-content:center;
               align-items:center;gap:7px;z-index:60}
  .hdr__burger span{display:block;width:24px;height:2px;background:var(--ink);
                    transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .hdr__nav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100dvh;
            background:#fff;padding:96px 28px 40px;
            transform:translateX(100%);transition:transform .4s var(--ease);
            box-shadow:-8px 0 30px rgba(0,0,0,.12);overflow-y:auto}
  .hdr.is-open .hdr__nav{transform:translateX(0)}
  .hdr.is-open .hdr__burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .hdr.is-open .hdr__burger span:nth-child(2){opacity:0}
  .hdr.is-open .hdr__burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .hdr__row{position:static;flex-direction:column;font-size:16px}
  .hdr__row--main a,.hdr__row--sub a{padding:16px 0;border-bottom:1px solid #eee}
  .hdr__row--sub a + a,.hdr__row--main a + a{margin-left:0}
  .fv{margin-top:0}

  .shero{padding-top:0}
  .shero__band{margin-top:-56px}
  .sp-fig{margin-top:72px}
}

@media (max-width:640px){
  :root{--col:calc(100% - 40px)}
  .fv,.fv .l-stage{height:76vw}
  .fv__catch{font-size:30px;bottom:12%}
  .about{padding-top:72px;padding-bottom:72px}
  .about__h{font-size:32px}
  .t-lead,.about__body,.sintro__body,.stakumi__body{font-size:15px;line-height:2.1}
  .t-sec,.ftr__h,.sproc__h{font-size:26px}
  .t-sec-en,.ftr__en{font-size:14px;margin-top:16px}
  .pgrid{grid-template-columns:1fr;row-gap:40px;margin-top:40px}
  .products{padding:72px 0}
  .recruit{padding:72px 0}
  .recruit__catch{font-size:32px}
  .rlink{height:64px;font-size:16px;padding-left:24px}
  .rlink .c-arw{right:24px}
  .news{padding:72px 0}
  .nrow{display:block;height:auto;padding:20px 0}
  .nrow__d{margin-bottom:8px}
  .nrow::before{top:22px}
  .ftr__cols{flex-wrap:wrap;gap:32px}
  .ftr__col{width:100%}
  .ftr__col + .ftr__col::before{display:none}
  .ftr__logos{flex-wrap:wrap;gap:16px}
  .shero__t{font-size:34px}
  .shero__sub{font-size:16px}
  .stakumi{padding:64px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}