@charset "utf-8";
/* ============================================================
   株式会社サンテック コーポレートサイト — 共通スタイル
   支給データ 260918_santek_web（Illustrator 30.5 / 2026-09-18 入稿）

   キャンバス   PC 1366px / SP 375px（どちらもアートボード幅）
   コンテンツ列 PC x183–x1183（1000px）
   座標         各帯（.band）の中を実測座標で絶対配置する。
                帯の高さはアートボード上の実測値。1 帯の誤差が下の帯へ伝播しない。

   ブレークポイント（README §4 参照）
     1366px〜      PC キャンバス等倍
     901〜1365px   PC キャンバスを zoom で段階縮小（transform は横スクロールが残るので不可）
     〜900px       SP キャンバス（375px）を zoom で段階拡大・縮小

   ページ固有のスタイルは assets/css/<page>.css に置く（このファイルは共通部品のみ）。
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --red:#cf170e;             /* 指示「修正カラー」RGB(207,23,14)。旧 RGB(205,66,37) から変更 */
  --ink:#333333;
  --card:#ececec;
  --line:#b3b3b3;
  --bar:#e6e6e6;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --en:"Roboto","Helvetica Neue",Arial,sans-serif;
  --en-cond:"Roboto Condensed","Roboto",Arial,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --dur:.35s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}   /* 固定ヘッダーの高さ分、アンカー先を下げる */
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--jp);font-weight:500;line-height:1;
  font-feature-settings:"halt" 1;   /* Illustrator の約物半角に合わせる（palt は仮名まで詰まる） */
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video,picture{display:block;max-width:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure,dl,dd,table{margin:0}
table{border-collapse:collapse;border-spacing:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
address{font-style:normal}

/* キーボード操作時のフォーカス（デザインに無い状態。マウス操作では出ない） */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.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}

/* ---------- canvas / band primitives ----------
   .band   … 全幅の帯（背景は全幅に敷く）。height は各ページ CSS で実測値を指定
   .stage  … キャンバス幅の座標系。子要素はここを原点に絶対配置する */
.band{position:relative;width:100%}
.stage{position:relative;width:1366px;height:100%;margin-inline:auto}
.stage > *{position:absolute}
.u-sp{display:none!important}

/* ---------- 共通テキスト ----------
   line-height:1 のとき、Noto Sans JP の漢字インク上端はボックス上端の約 0.07em 下。
   各ページの top は「実測インク上端 − 0.07em」で置く。 */

/* セクション見出し（和文 SemiBold 36 / 英字 Roboto ExtraBold 18・赤） */
.c-ttl{text-align:center;white-space:nowrap}
.c-ttl__jp{display:block;font-size:36px;font-weight:600;letter-spacing:.1em;text-indent:.1em;line-height:1}
.c-ttl__en{display:block;font-family:var(--en);font-size:18px;font-weight:800;letter-spacing:.2em;text-indent:.2em;
  color:var(--red);line-height:1}

/* 白ピル＋赤矢印（210x50 / 線 1px #333） */
.c-pill{                      /* 実測: 文字の中心 x92.1・矢印の左端 x154.4 で固定（ラベル長によらない） */
  position:relative;display:flex;align-items:center;justify-content:center;padding:0 25.8px 3px 0;   /* 文字は箱の中心より 1.5px 上（全ページの正本で実測） */
  width:210px;height:50px;border:1px solid var(--ink);border-radius:25px;background:#fff;color:var(--ink);
  font-size:16px;font-weight:700;letter-spacing:.1em;white-space:nowrap;line-height:1;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.c-pill__arw{position:absolute;left:152.5px;top:50%;margin-top:-7.4px;width:26.6px;height:14.8px;transition:filter var(--dur) var(--ease)}
.c-pill:hover{background:var(--red);border-color:var(--red);color:#fff}
.c-pill:hover .c-pill__arw{filter:brightness(0) invert(1)}

/* 赤ピル（お問い合わせ） */
.c-cta{
  display:flex;align-items:center;justify-content:flex-start;
  border-radius:999px;background:var(--red);color:#fff;font-weight:700;letter-spacing:.1em;
  white-space:nowrap;line-height:1;
  transition:background-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.c-cta:hover{background:#a8120b}
.c-cta__ico{flex:none;background:url(../img/common/ico-mail-s.svg) center/contain no-repeat}
/* アイコンは mask-image にしない：Chrome は mask の画像を CORS で取得するため、file:// で開くと表示されない */

/* ============================================================
   ヘッダー（PC 1366x120 / SP 375x50）
   ============================================================ */
/* 上部固定（クライアント依頼）。sticky なのでレイアウトは流れのまま＝デザイン座標は変わらない */
.site-header{position:sticky;top:0;z-index:50;height:120px;background:#fff}
.site-header .stage{height:120px}
.hdr-logo{left:27px;top:40.5px;display:flex;align-items:flex-start;transition:opacity var(--dur) var(--ease)}
.hdr-logo:hover{opacity:.7}
.hdr-logo__mark{width:273.5px;height:40.5px}
.hdr-logo__group{width:113px;height:auto;margin:6.6px 0 0 16.6px}   /* x317.1 / y47.1 */
.gnav{left:548.5px;top:51.4px}
.gnav__list{display:flex;gap:40.5px}                  /* 「　　 」区切り＝2.525em（実測 x548.5/694.5/805.5/916/1028） */
.gnav__list a{display:block;font-size:16px;font-weight:500;letter-spacing:.1em;line-height:1;
  transition:color var(--dur) var(--ease)}
.gnav__list a:hover{color:var(--red)}   /* 現在ページの色替えはデザインに無いので付けない */
.hdr-cta{left:1129px;top:35px;width:210px;height:50px;padding-left:32.6px;padding-bottom:3px;font-size:18px}   /* 実測: 文字・アイコンのインクが 1.5px 下がるのを補正 */
.hdr-cta .c-cta__ico,.ftr-cta .c-cta__ico{width:22.1px;height:16.8px;margin:2px 6.1px 0 -.4px}   /* SVG viewBox 22.1x16.8（図形 21.3x16 ＋余白） */
.hdr-menu{display:none}

/* SP ドロワー（デザイン未支給。README §6 申し送り） */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity var(--dur) var(--ease)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:300px;max-width:86%;background:#fff;
  padding:70px 28px 40px;overflow-y:auto;transform:translateX(100%);transition:transform var(--dur) var(--ease)}
.drawer__list{border-top:1px solid var(--line)}
.drawer__list a{display:flex;align-items:center;justify-content:space-between;padding:17px 4px;
  border-bottom:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:.1em}
.drawer__list a::after{content:"";width:13px;height:7px;flex:none;background:url(../img/common/ico-arrow.svg) center/contain no-repeat}
.drawer__cta{margin-top:28px;justify-content:center;height:46px;font-size:15px}
.drawer__cta .c-cta__ico{width:17px;height:13px;margin-right:8px}
.drawer__sub{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;font-size:12px;letter-spacing:.1em}
.drawer__close{position:absolute;top:10px;right:9.5px;width:30px;height:30px;border:1.134px solid var(--red);border-radius:50%}
.drawer__close::before,.drawer__close::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.134px;background:var(--red)}
.drawer__close::before{transform:rotate(45deg)}
.drawer__close::after{transform:rotate(-45deg)}
.is-menu-open .drawer{visibility:visible;pointer-events:auto}
.is-menu-open .drawer__scrim{opacity:1}
.is-menu-open .drawer__panel{transform:none}
.is-menu-open{overflow:hidden}

/* ============================================================
   フッター（お問い合わせカード＋TBK＋会社情報） PC 1366x837
   ============================================================ */
.site-footer{position:relative;background:#fff}
.ftr-contact{height:587px}
.ftr-contact__bg{position:absolute;left:0;right:0;top:115px;height:472px;overflow:hidden;background:#666}
.ftr-contact__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.ftr-contact__bg::after{content:"";position:absolute;inset:0;background:#666;mix-blend-mode:multiply}  /* 支給: #666 乗算 */
.ftr-card{left:183px;top:15px;width:1000px;height:374px;border-radius:40px;background:var(--card);
  box-shadow:0 0 24px rgba(0,0,0,.13);
  font-feature-settings:"palt" 1}   /* 見出し・リード・ラベル・受付時間は Illustrator のカーニング「メトリクス」＝palt 相当 */
.ftr-card .c-pill{font-feature-settings:"halt" 1}   /* ボタン文字はカーニング 0 */
.ftr-card > *{position:absolute}
.ftr-card .c-ttl{left:0;right:0;top:0}
.ftr-card .c-ttl__jp{margin-top:29.75px}                 /* ink y48 */
.ftr-card .c-ttl__en{margin-top:23.55px;position:relative;left:-1.5px}                 /* ink y106 */
.ftr-card__lead{left:0;right:0;top:133.8px;text-align:center;font-size:18px;letter-spacing:.1em;text-indent:.1em;white-space:nowrap}
.ftr-card__col{top:203.5px;width:250px;height:150px;display:flex;flex-direction:column;align-items:center}
.ftr-card__col--tel{left:185px}
.ftr-card__col--web{left:565px}
.ftr-card__sep{left:499.5px;top:195px;width:1px;height:148px;background:var(--line)}
.ftr-card__ico{background:center/contain no-repeat}
.ftr-card__col--tel .ftr-card__ico{width:36px;height:36px;margin-top:-.5px;background-image:url(../img/common/ico-phone.svg)}
.ftr-card__col--web .ftr-card__ico{width:41px;height:31px;margin-top:.5px;background-image:url(../img/common/ico-mail.svg)}
.ftr-card__label{margin-top:13.9px;font-size:16px;letter-spacing:.1em;text-indent:.1em;white-space:nowrap}
.ftr-card__col--web .ftr-card__label{margin-top:17.9px}   /* アイコンは SVG viewBox（図形＋0.5px 余白）の実寸で描く */
.ftr-card__tel{margin-top:16.35px;font-family:var(--en);font-size:30px;font-weight:700;line-height:1;white-space:nowrap}
.ftr-card__tel a{transition:color var(--dur) var(--ease)}
.ftr-card__tel a:hover{color:var(--red)}
.ftr-card__hours{margin-top:3.85px;font-size:14px;letter-spacing:.1em;text-indent:.1em;white-space:nowrap}
.ftr-card__col--web .c-pill{margin-top:16px}
.ftr-tbk{left:563px;top:453px;width:240px;height:70px;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:opacity var(--dur) var(--ease)}
.ftr-tbk:hover{opacity:.8}
.ftr-tbk img{position:absolute;left:51.2px;top:20.5px;width:149px;height:29px}   /* viewBox 149x29 = design 矩形 x614.2 y473.5。ロゴは箱の中央から右へ 5.5px（デザインどおり） */

.ftr-info{height:210px}
/* .ftr-info の座標は帯上端（フッター y587）基準 */
.ftr-logo{left:137px;top:40px;width:273.5px;height:40.5px;transition:opacity var(--dur) var(--ease)}
.ftr-logo:hover{opacity:.7}
.ftr-logo img{width:273.5px;height:40.5px}
.ftr-addr{left:137px;top:93.5px;font-size:14px;line-height:28px;letter-spacing:.06em;white-space:nowrap;font-weight:400}
.ftr-addr a{transition:color var(--dur) var(--ease)}
.ftr-addr a:hover{color:var(--red)}
.ftr-nav{left:542.4px;top:81.4px}
.ftr-nav__list{display:flex;gap:40.5px}
.ftr-nav__list a,.ftr-sub a{display:block;letter-spacing:.1em;line-height:1;transition:color var(--dur) var(--ease)}
.ftr-nav__list a{font-size:16px}
.ftr-nav__list a:hover,.ftr-sub a:hover{color:var(--red)}
.ftr-cta{left:1019px;top:64.3px;width:210px;height:50px;padding-left:32.6px;padding-bottom:3px;font-size:18px}
.ftr-sub{right:135.5px;top:155.1px;display:flex;gap:31.4px;font-size:14px}
.ftr-copy{height:40px;background:var(--bar);display:flex;align-items:center;justify-content:center;
  font-size:14px;letter-spacing:.06em;white-space:nowrap}
.ftr-copy small{font-size:inherit;padding-top:1px}

/* ============================================================
   下層ページ共通：ページヒーロー＋パンくず
   PC: 写真帯（高さはページ CSS で --hero-h）＋赤帯 45px
   ============================================================ */
.phero{position:relative;height:var(--hero-h,600px);overflow:hidden;background:#595757}
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .stage{position:relative}
.phero__ttl{left:178px;top:var(--ttl-y,268.2px);color:#fff}
.phero__en{display:block;font-family:var(--en);font-size:96px;font-weight:900;letter-spacing:.1em;line-height:1;white-space:nowrap;
  margin-top:11px}
.phero__jp{display:block;margin-top:22.6px;font-size:40px;font-weight:500;letter-spacing:.1em;line-height:1;white-space:nowrap}
.crumb{height:45px;background:var(--red);color:#fff}
.crumb ol{left:182px;top:13.7px;display:flex;align-items:center;font-size:16px;letter-spacing:.1em;white-space:nowrap;
  font-feature-settings:"palt" 1}   /* kern=AUTO */
.crumb li{display:flex;align-items:center}
.crumb li + li::before{content:"";position:relative;top:2px;width:13px;height:15px;margin:0 16.2px 0 12.8px;background:#fff;
  clip-path:polygon(0 0,100% 50%,0 100%)}   /* 実測（企業情報・強み・お問い合わせ）: HOME ink y903.5 / 三角 x248 */
.crumb a{transition:opacity var(--dur) var(--ease)}
.crumb a:hover{opacity:.7}

/* ============================================================
   901〜1365px：PC キャンバスを段階縮小（zoom はレイアウトに効く）
   ============================================================ */
@media (max-width:1365px) and (min-width:1321px){html{zoom:.967}}
@media (max-width:1320px) and (min-width:1281px){html{zoom:.938}}
@media (max-width:1280px) and (min-width:1241px){html{zoom:.908}}
@media (max-width:1240px) and (min-width:1201px){html{zoom:.879}}
@media (max-width:1200px) and (min-width:1161px){html{zoom:.85}}
@media (max-width:1160px) and (min-width:1121px){html{zoom:.82}}
@media (max-width:1120px) and (min-width:1081px){html{zoom:.791}}
@media (max-width:1080px) and (min-width:1041px){html{zoom:.762}}
@media (max-width:1040px) and (min-width:1001px){html{zoom:.733}}
@media (max-width:1000px) and (min-width:961px){html{zoom:.703}}
@media (max-width:960px)  and (min-width:931px){html{zoom:.681}}
@media (max-width:930px)  and (min-width:901px){html{zoom:.659}}

/* ============================================================
   〜900px：SP キャンバス（375px）
   ============================================================ */
@media (max-width:900px){
  .stage{width:375px}
  .u-pc{display:none!important}
  .u-sp{display:revert!important}

  /* header 375x50 */
  .site-header,.site-header .stage{height:50px}
  html{scroll-padding-top:50px}
  .hdr-logo{left:11.9px;top:15.2px}
  .hdr-logo__mark{width:134px;height:19.8px}
  .hdr-logo__group{width:55.4px;height:auto;margin:3.2px 0 0 8.1px}
  .gnav{display:none}
  .hdr-cta{left:225.3px;top:12.5px;width:103px;height:25px;padding-left:16px;padding-bottom:2px;font-size:9px}
  .hdr-cta .c-cta__ico{width:10.9px;height:8.3px;margin-left:-.2px;margin-right:2.3px}
  .hdr-menu{display:block;left:335.5px;top:10px;width:30px;height:30px;border:1.134px solid var(--red);border-radius:50%}
  .hdr-menu span,.hdr-menu::before{content:"";position:absolute;left:8.7px;width:12.7px;height:1.134px;background:var(--red)}
  .hdr-menu::before{top:11.2px}
  .hdr-menu span{top:17.6px}

  /* footer 375x1047.35 */
  .ftr-contact{height:762.9px}
  .ftr-contact__bg{top:482.9px;height:280px}
  .ftr-card{left:0;top:15px;width:375px;height:570px}
  .ftr-card .c-ttl__jp{font-size:24px;margin-top:31.5px}
  .ftr-card .c-ttl__en{font-size:12px;margin-top:11.05px;left:0}
  .ftr-card__lead{top:94px;font-size:14px;line-height:30px;white-space:normal}
  .ftr-card__col{width:375px;left:0!important}
  .ftr-card__col--tel{top:181px}
  .ftr-card__col--web{top:391px}
  .ftr-card__sep{left:22.5px;top:348.6px;width:330px;height:1px}
  .ftr-card__label{margin-top:13.5px}
  .ftr-card__col--web .ftr-card__ico{margin-top:-1px}
  .ftr-card__col--web .ftr-card__label{margin-top:17px}
  .ftr-card__col--web .c-pill{margin-top:16px}
  .ftr-card__tel{margin-top:16.6px}
  .ftr-card__hours{margin-top:4.2px}
  .ftr-tbk{left:127.5px;top:695.9px;width:120px;height:35px}
  .ftr-tbk img{left:25.55px;top:10.25px;width:74.5px;height:14.5px}
  .ftr-info{height:259.6px}
  /* .ftr-info の座標は帯上端（SP フッター y762.9）基準 */
  .ftr-logo{left:22.5px;top:32.7px;width:216.4px;height:32px}
  .ftr-logo img{width:216.4px;height:32px}
  .ftr-addr{left:22.5px;top:77.5px;font-size:10px;line-height:20px}
  .ftr-nav{left:22.5px;top:164.3px}
  .ftr-nav__list{gap:30.3px}
  .ftr-nav__list a{font-size:12px}
  .ftr-cta{left:19.2px;top:199.9px;width:140px;height:33.3px;padding-left:21.7px;padding-bottom:0;font-size:12px}
  .ftr-cta .c-cta__ico{width:14.7px;height:11.2px;margin-left:-.25px;margin-right:4.05px}
  .ftr-sub{right:25.5px;top:204.4px;display:grid;grid-template-columns:auto;justify-items:end;gap:7.4px;font-size:9px}   /* 「よくある質問」削除（2026-09-28 ご指示）。お知らせ・プライバシーポリシーは右揃えの2行 */
  .ftr-copy{height:25px;font-size:8px}

  /* 下層ヒーロー（SP デザインは企業情報のみ支給。ページ CSS で上書き） */
  .phero{height:var(--hero-h-sp,300px)}
  .phero__ttl{left:22.5px;top:var(--ttl-y-sp,150px)}
  .phero__en{font-size:45px;margin-top:4.6px}     /* SP 正本（企業情報）: 英字 45 / 和文 18 */
  .phero__jp{font-size:18px;margin-top:10.3px}
  .crumb{height:25px}
  .crumb ol{left:29.9px;top:8.2px;font-size:9px}
  .crumb li + li::before{top:0;width:7.8px;height:9px;margin:0 9.5px}
}
@media (max-width:900px) and (min-width:861px){html{zoom:2.296}}
@media (max-width:860px) and (min-width:821px){html{zoom:2.189}}
@media (max-width:820px) and (min-width:781px){html{zoom:2.083}}
@media (max-width:780px) and (min-width:741px){html{zoom:1.976}}
@media (max-width:740px) and (min-width:701px){html{zoom:1.869}}
@media (max-width:700px) and (min-width:661px){html{zoom:1.763}}
@media (max-width:660px) and (min-width:621px){html{zoom:1.656}}
@media (max-width:620px) and (min-width:581px){html{zoom:1.549}}
@media (max-width:580px) and (min-width:541px){html{zoom:1.443}}
@media (max-width:540px) and (min-width:501px){html{zoom:1.336}}
@media (max-width:500px) and (min-width:461px){html{zoom:1.229}}
@media (max-width:460px) and (min-width:431px){html{zoom:1.149}}
@media (max-width:430px) and (min-width:411px){html{zoom:1.096}}
@media (max-width:410px) and (min-width:391px){html{zoom:1.043}}
@media (max-width:374px) and (min-width:351px){html{zoom:.936}}
@media (max-width:350px){html{zoom:.853}}