@charset "utf-8";
/* ============================================================
   お問い合わせ（contact/index.html）
   支給: サンテック_Web_08_お問い合わせ / PC アートボード 1366x4964.7（SP デザイン無し）
   座標はアートボード実測（design px）。フォームはエラー文で行が伸びるため、
   帯の絶対配置ではなく「実測マージンのフロー」で組む（行の高さ・余白は実測値）。
   ============================================================ */

/* ---------- ヒーロー：写真はアートボード y0–600（上 120 はヘッダーが重なる） ---------- */
.ct-hero{--hero-h:600px;--ttl-y:258.7px;margin-top:-120px}   /* 共通値 268.2 だと英字 ink が 9.5px 下がる（正本 ink y281.5）。共通側の修正依頼中 */
.ct-hero .phero__jp{margin-top:24.6px}                          /* 和文 ink y394 */
@media (min-width:901px){.ct-hero .phero__jp{position:relative;left:-2.5px}}   /* 実測: 白文字マスクで x +2.5px（企業情報・お知らせの同じ見出しは 0） */
.ct-hero picture{display:contents}
.ct-hero .phero__img{object-position:center top}

/* ---------- 共通 ---------- */
.ct{width:1000px;margin:0 auto;font-feature-settings:"palt" 1}   /* 正本の仮名はプロポーショナル（Illustrator 自動カーニング）。halt では 6% 広い */
.ct-link{color:var(--red);transition:opacity var(--dur) var(--ease)}
.ct-link:hover{opacity:.7}
.ct-link:focus-visible,.f-btn:focus-visible,.ct .c-pill:focus-visible,.pp-box__scroll:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ステップ表示 183/523/863 × y728 320x80 r20 */
.ct-steps{display:flex;gap:20px;margin-top:83px}
.ct-steps__item{display:flex;align-items:center;justify-content:center;width:320px;height:80px;padding-top:1.5px;
  border-radius:20px;background:var(--card);color:var(--ink);
  font-size:20px;font-weight:700;letter-spacing:.1em;text-indent:.1em;line-height:1;white-space:pre;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.ct-steps__item.is-current{background:var(--red);color:#fff}

/* 導入文 16/38（ink y875 → 行ボックス上端 862.9） */
.ct-intro{margin-top:54.9px;font-size:16px;line-height:38px;letter-spacing:.1em;white-space:nowrap}
.ct-intro__gap{margin-top:38px}

/* 見出し 24（ink 上端 − 0.07em） */
.ct-h2{font-size:24px;font-weight:700;letter-spacing:.1em;line-height:1;white-space:nowrap}
.ct-h2--req{margin-top:80.4px}    /* y1209.3 */
.ct-h2--cust{margin-top:91.3px}   /* y2213.3 */
.ct-h2--pp{margin-top:88.3px}     /* y3446.3 */

/* ---------- 表組み（上下罫 #d2d2d2 1px / 見出しセル 260px #ececec） ---------- */
.f-table{margin-top:39.7px;border-top:1px solid #d2d2d2}
.f-row{display:grid;grid-template-columns:260px 1fr;border-bottom:1px solid #d2d2d2}
.f-label{position:relative;display:flex;align-items:center;padding-left:25px;background:var(--card);
  font-size:18px;font-weight:700;letter-spacing:.1em;line-height:1;white-space:nowrap}
.f-label__txt{display:block}
.f-req{display:flex;align-items:center;justify-content:center;width:40px;height:20px;margin-left:12px;padding-top:.5px;
  background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:0;line-height:1}
.f-field{padding:0 0 0 24.5px;min-width:0}

/* お客様情報：行 120（内容 119 + 罫 1）、入力欄 501x46 を上下中央 */
.f-table--cust .f-field{display:flex;flex-wrap:wrap;align-items:center;align-content:center;min-height:119px;padding-block:10px}
.f-label--sub .f-label__sub{position:absolute;left:25px;top:calc(50% - 32.3px);font-size:14px;letter-spacing:.1em}
.f-label--sub .f-label__txt,.f-label--sub .f-req{position:relative;top:0}
/* 必須バッジはデザイナーの手置きで行ごとに間隔が違う。実測で 2px 広い 3 行（電話番号・郵便番号・住所） */
@media (min-width:901px){.f-table--cust .f-row:nth-of-type(4) .f-req,.f-table--cust .f-row:nth-of-type(8) .f-req,.f-table--cust .f-row:nth-of-type(9) .f-req{margin-left:14px}}

.f-input{width:501px;height:46px;padding:0 19px 0 19.5px;border:1px solid var(--card);border-radius:0;background:#fff;
  font-size:16px;font-weight:500;letter-spacing:.1em;line-height:1;outline:0;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.f-input--zip{width:201px}
.f-zip__mark{margin:0 5px 0 .5px;font-size:18px;letter-spacing:0;line-height:1}
.f-input::placeholder,.f-textarea::placeholder{color:#d2d2d2;opacity:1}
.f-input:focus,.f-textarea:focus{border-color:#8c8c8c;box-shadow:0 0 0 3px rgba(207,23,14,.18)}
.f-input[aria-invalid],.f-textarea[aria-invalid]{border-color:var(--red)}

/* お問い合わせ内容（チェックボックス 22x22 線 2px #ececec / 行送り 50） */
.f-row--type .f-label{align-items:flex-start;padding-top:49.2px}
.f-row--type .f-field{padding:34.4px 0 34.1px 24px}
.f-check{position:relative;display:flex;align-items:center;height:50px;cursor:pointer;
  font-size:16px;font-weight:700;letter-spacing:.1em;line-height:1;white-space:nowrap}
.f-check input{position:absolute;left:0;top:14px;width:22px;height:22px;margin:0;opacity:0}
.f-check__box{flex:none;width:22px;height:22px;border:2px solid var(--card);background:#fff;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.f-check__txt{margin-left:14.5px}
.f-check:hover .f-check__box{border-color:#c8c8c8}
.f-check input:checked + .f-check__box{border-color:transparent;background:url(../img/contact/cb-checked.svg) center/31.43px 31.43px no-repeat}   /* mask は file:// で消えるので背景画像 */
.f-check input:focus-visible + .f-check__box{outline:2px solid var(--red);outline-offset:2px}

/* お問い合わせ詳細（テキストエリア 691x241 → ファイル 171x36.5 ×2 → 注記） */
.f-row--detail .f-label{align-items:flex-start;padding-top:49.1px}
.f-row--detail .f-field{padding:49px 0 51.1px 24.5px}
.f-textarea{display:block;width:691px;height:241px;min-height:120px;padding:7.9px 19.5px;border:1px solid var(--card);border-radius:0;
  background:#fff;font-size:16px;font-weight:500;letter-spacing:.1em;line-height:38px;resize:vertical;outline:0;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.f-file{display:flex;align-items:center;margin-top:13.5px}
.f-textarea + .f-file{margin-top:20.5px}
.f-file__btn{display:flex;align-items:center;justify-content:center;flex:none;width:171px;height:36.5px;padding:.5px 0 0 1.6px;
  border:1px solid var(--ink);background:var(--card);cursor:pointer;
  font-size:16px;font-weight:700;letter-spacing:.1em;line-height:1;white-space:nowrap;
  transition:background-color var(--dur) var(--ease)}
.f-file__btn:hover{background:#dcdcdc}
.f-file__btn:focus-within{outline:2px solid var(--red);outline-offset:2px}
.f-file__name{margin-left:20.5px;color:#d2d2d2;font-size:16px;letter-spacing:.1em;line-height:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:480px}
.f-file__name.is-filled{color:var(--ink)}
.f-note{margin-top:13.4px;color:var(--red);font-size:16px;letter-spacing:.1em;line-height:1;white-space:nowrap}

/* エラー（form.js が [data-row] に差し込む。デザイン未支給） */
.f-error{flex-basis:100%;margin-top:8px;color:var(--red);font-size:14px;font-weight:500;letter-spacing:.05em;line-height:1.5}
.f-checks + .f-error{margin-top:4px}

/* ---------- プライバシーポリシー枠 1000x251（線 #d2d2d2）・中身はスクロール ---------- */
.pp-box{position:relative;height:251px;margin-top:39.2px;border:1px solid #d2d2d2;background:#fff}
.pp-box__scroll{position:absolute;left:24px;top:17.3px;bottom:17px;width:955px;padding-right:30px;overflow-y:auto;
  font-size:14px;line-height:28px;letter-spacing:.1em;text-align:justify;text-justify:inter-character;
  overscroll-behavior:contain;font-feature-settings:"palt" 1}   /* データ: 枠幅 925・メトリクス・字送り 100。本文幅を 925 に合わせると palt＋.1em で改行位置も一致 */
.pp-box__scroll h3{margin:10px 0 0;font-size:14px;font-weight:500;line-height:28px}
.pp-box__scroll p + p{margin-top:0}
.pp-box__scroll ul{margin:0}
.pp-box__scroll li{padding-left:1em;text-indent:-1em}
.pp-box__scroll li::before{content:"・"}
/* スクロールバー：つまみ 7px #ececec（x1156–1163 / 上端 y3537） */
.pp-box__scroll::-webkit-scrollbar{width:7px}
.pp-box__scroll::-webkit-scrollbar-track{background:transparent;margin-block:9.2px}
.pp-box__scroll::-webkit-scrollbar-thumb{background:var(--card);border-radius:3.5px}
@supports not selector(::-webkit-scrollbar){
  .pp-box__scroll{scrollbar-width:thin;scrollbar-color:var(--card) transparent}
}

/* ---------- 同意ボックス 1000x175 #f5f5f5（#ececec 53%）＋確認ボタン 210x50 ---------- */
.f-agree{position:relative;height:175px;margin:67px 0 125.2px;padding-top:21.5px;background:#f5f5f5;text-align:center}
.f-agree__txt{font-size:16px;line-height:38px;letter-spacing:.1em;white-space:nowrap}
.f-agree__chk{position:absolute;left:341.1px;top:100.1px;display:flex;align-items:center;height:38px;cursor:pointer;
  font-size:16px;letter-spacing:.1em;line-height:1;white-space:nowrap}
.f-agree__box{flex:none;width:18px;height:18px;background:url(../img/contact/cb-empty.svg) center/25.71px 25.71px no-repeat}
.f-agree__chk input:checked + .f-agree__box{background-image:url(../img/contact/cb-checked.svg)}
.f-agree__chk input:focus-visible + .f-agree__box{outline:2px solid var(--red);outline-offset:3px}
.f-agree__lbl{margin-left:15.5px}

.f-btn{display:flex;align-items:center;justify-content:center;width:210px;height:50px;padding:1px 0 0 1.8px;
  background:var(--ink);color:#fff;font-size:18px;font-weight:500;letter-spacing:.1em;line-height:1;white-space:nowrap;
  transition:background-color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.f-btn:hover:not(:disabled){background:var(--red)}
.f-btn:disabled{opacity:.35;cursor:not-allowed}
.f-btn--next{position:absolute;left:395px;top:148px}
.f-error--agree{position:absolute;left:0;right:0;top:210px;margin:0;text-align:center}   /* 未同意で確認を押したとき（デザイン外の状態） */
.f-btn--back{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.f-btn--back:hover:not(:disabled){background:var(--card);color:var(--ink)}

/* ---------- 02 内容確認 / 03 完了（デザイン未支給。01 の文法で起こす） ---------- */
.ct-h2--flow{margin-top:80px}
.ct-lead{margin-top:30px;font-size:16px;line-height:38px;letter-spacing:.1em}
.f-confirm{margin-top:39.7px;border-top:1px solid #d2d2d2}
.f-confirm__row{display:grid;grid-template-columns:260px 1fr;border-bottom:1px solid #d2d2d2}
.f-confirm dt{display:flex;align-items:center;padding:20px 25px;background:var(--card);font-size:18px;font-weight:700;letter-spacing:.1em;line-height:1.5}
.f-confirm dd{padding:26px 24.5px;min-height:70px;font-size:16px;letter-spacing:.1em;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.f-actions{display:flex;justify-content:center;gap:20px;margin:60px 0 125.2px}
.ct-panel--done .ct-lead{margin-top:30px}

/* ============================================================
   〜900px：SP（支給 SP 無し。トップ／強み／企業情報 SP の文法で縦積み。README 申し送り）
   ============================================================ */
@media (max-width:900px){
  .ct-hero{--hero-h-sp:650px;--ttl-y-sp:472.5px;margin-top:-50px}
  .ct-hero .phero__en{font-size:45px;margin-top:5.2px}
  .ct-hero .phero__jp{font-size:18px;margin-top:8.9px}
  /* SP のみ：白い作業着の上に白文字が乗るため、下から薄い影を敷く（デザイン外。README 申し送り） */
  .ct-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:320px;
    background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0));pointer-events:none}
  .ct-hero .stage{z-index:1}

  .ct{width:330px}
  .ct-steps{gap:8px;margin-top:40px}
  .ct-steps__item{width:calc((100% - 16px) / 3);height:58px;padding-top:1px;border-radius:12px;
    font-size:13px;white-space:nowrap}
  .ct-steps__in{display:flex;flex-direction:column;align-items:center;gap:5px}
  .ct-steps__in > span{display:block}
  .ct-steps__no{font-size:12px}

  .ct-intro{margin-top:32px;font-size:14px;line-height:26px;letter-spacing:.05em;white-space:normal;text-align:justify}
  .ct-intro p + p{margin-top:6px}
  .ct-intro .ct-intro__gap{margin-top:20px}

  .ct-h2{font-size:18px;line-height:1.4;white-space:normal}
  .ct-h2--req,.ct-h2--cust,.ct-h2--pp{margin-top:50px}
  .ct-h2--req{margin-top:48px}

  .f-table{margin-top:18px}
  .f-row{display:block}
  .f-label{min-height:46px;padding:12px 15px;font-size:15px}
  .f-req{margin-left:10px}
  .f-row--type .f-label,.f-row--detail .f-label{align-items:center;padding-top:12px}
  .f-field,.f-row--type .f-field,.f-row--detail .f-field{padding:16px 0 22px}
  .f-table--cust .f-field{min-height:0;padding-block:16px 22px}
  .f-label--sub{flex-wrap:wrap;row-gap:4px}
  .f-label--sub .f-label__sub{position:static;flex-basis:100%;font-size:12px}

  .f-input{width:100%;font-size:16px;padding-inline:14px;letter-spacing:.05em}
  .f-input--zip{width:160px}
  .f-input::placeholder,.f-textarea::placeholder{font-size:14px}

  .f-check{align-items:flex-start;height:auto;min-height:0;padding:7px 0;font-size:14px;line-height:1.6;white-space:normal}
  .f-check input{top:7px}
  .f-check__box{margin-top:0}
  .f-check__txt{margin-left:12px;padding-top:1px}
  .f-checks{margin-block:-7px}

  .f-textarea{width:100%;height:220px;padding:10px 14px;font-size:16px;line-height:28px;letter-spacing:.05em}
  .f-textarea::placeholder{line-height:26px}
  .f-file{flex-wrap:wrap;gap:8px 14px;margin-top:12px}
  .f-textarea + .f-file{margin-top:18px}
  .f-file__btn{width:150px;height:36px;font-size:14px}
  .f-file__name{margin-left:0;max-width:100%;font-size:13px}
  .f-note{margin-top:14px;font-size:13px;line-height:1.6;white-space:normal}

  .pp-box{height:250px;margin-top:18px}
  .pp-box__scroll{left:15px;top:14px;bottom:14px;width:auto;right:8px;padding-right:12px;font-size:13px;line-height:24px;letter-spacing:.05em}
  .pp-box__scroll h3{margin-top:8px;font-size:13px;line-height:24px}
  .pp-box__scroll::-webkit-scrollbar-track{margin-block:0}

  .f-agree{height:auto;margin:40px 0 100px;padding:22px 15px 58px}
  .f-agree__txt{font-size:14px;line-height:26px;letter-spacing:.05em;white-space:normal;text-align:left}
  .f-agree__chk{position:static;justify-content:center;height:auto;margin-top:16px;font-size:14px}
  .f-agree__lbl{margin-left:10px}
  .f-btn--next{left:calc(50% - 105px);top:auto;bottom:-25px}
  .f-error--agree{top:auto;bottom:-55px}

  .ct-h2--flow{margin-top:48px}
  .ct-lead{margin-top:18px;font-size:14px;line-height:26px;letter-spacing:.05em}
  .ct-lead br{display:none}
  .f-confirm{margin-top:24px}
  .f-confirm__row{display:block}
  .f-confirm dt{padding:12px 15px;font-size:15px}
  .f-confirm dd{min-height:0;padding:14px 0 18px;font-size:14px}
  .f-actions{flex-direction:column-reverse;align-items:center;gap:14px;margin:40px 0 100px}
}