@charset "utf-8";
/* =========================================================
   主要協力会社様専用 /support/  ページ固有CSS
   デザイン：デザインデータ/主要協力会社様専用/主要協力会社様専用.ai
             アートボード 1500.6 × 4494.7（pt=px・1:1。換算しない）
   土台：assets/company.css（幅・色・見出し・本文・「楽に頼めて」・CTA余白）

   ※共通部品（header / sidebar / cta / footer / .cmp-closing / .cmp-photos2）は
     一切上書きしていない。ここは .sup- から始まる独自クラスと、
     .cmp-〇〇.sup-〇〇 の複合セレクタ（このページだけに効く）しか使わない。

   ★ページの中身はデザインどおり「見出し2行＋写真1枚＋本文5行＋ボタン1つ」だけ。
     現行ページにある募集要項5件は新デザインに無いため入れていない
     （2026/08/28 ★★★★大原則「デザインが全て正」／全体管理チャットで和田さん確認済み）。

   ★色について
     デザイン実測の青は #0054AC だが、ルール5章により実装は #0954A5（var(--blue)）。
     見出し・ボタンの背景ともこれを使う。
   ========================================================= */

/* ---------- ページタイトル帯 ----------
   デザイン実測：ナビの下端 y=232.5 → 帯の下端 y=626.5 ＝ 394.0px
   タイトル文字「エアコン工事業者様へ」は白フチ・光彩つきで帯の画像に入っているため、
   帯ごと1枚の画像として切り出している（リファレンス7章）。
   HTMLの <h1> は読み上げ・検索用に見えない形で置く。 */
.cmp-hero.sup-hero{height:394px;}
.cmp-hero.sup-hero img{height:394px;}

/* ---------- 2カラムの開始位置 ----------
   デザイン実測：帯の下端 626.5 → 2カラムの上端 743.1 ＝ 116.6px
   （サイドバーの1つめのボタンの位置から逆算。選ばれる10の理由と同じ測り方） */
.cmp-wrap.sup-wrap{margin-top:116.6px;}
.cmp-main.sup-main{padding-top:0;position:relative;min-height:786.4px;}
.cmp-side.sup-side{padding-top:0;}

/* ★「楽に頼めて」までの余白について（調整していない・理由）
   このページは本文が短く、確定版サイドバーのほうが下に出る。
   デザインも同じで、ボタンの下端 1529.5 に対しサイドバーの下端は 2134.8。
   デザイン：サイドバー下端 2134.8 →「楽に頼めて」見出し 2329.8 ＝ 195.0px
   実装　　：.cmp-closing の margin-top:198.75px（確定版・変更禁止）＝ ほぼ同じ
   ただし確定版サイドバーはデザインのサイドバーより約79px背が高いため、
   ページ全体としては「楽に頼めて」以降が約83px下がる。
   サイドバーは確定版なので触らない。特定商取引法と同じ扱い。 */

/* =========================================================
   本文（デザインの座標にそのまま置く）
   基準：本文カラムの左端 ＝ デザインの x=278.0（見出しの左端）
   ========================================================= */

/* ---------- 見出し（青・2行） ----------
   デザイン実測：1行目 x=278.0／2行目 x=278.3／28.54pt／行送り47.7px */
.sup-h{
  position:absolute;
  left:0;
  top:-1.2px;
  margin:0;
  width:754px;
  font-size:28.54px;
  line-height:47.7px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:.04em;   /* デザイン実測のトラッキング1.28px÷28.54 */
}

/* ---------- 写真（握手） ----------
   デザイン実測：x=277.0 y=880.5 713.0×353.0 */
.sup-fig{
  position:absolute;
  left:0;
  top:137.4px;
  width:754px;
  height:353px;
  margin:0;
}
.sup-fig img{display:block;width:100%;height:100%;object-fit:cover;}

/* ---------- 本文（5行） ----------
   デザイン実測：x=279.0／15.0pt／行送り33.07px
   ★幅はデザイン実測（633.4px）ではなく余裕をもたせている。
     Illustratorは約物（、。（））を半角に詰めて組むので、同じ文字サイズでも
     Noto Sans JP のほうが1行が少し長くなる。デザイン実測どおりの幅にすると
     意図しない位置で折り返してデザインと違う改行になるため。
     改行は <br> で固定してあるので、左端と改行位置はデザインと一致する。 */
.sup-p{
  position:absolute;
  left:0;
  top:518.97px;
  width:754px;
  margin:0;
  font-size:15px;
  line-height:33.07px;
  color:var(--text);
  /* ★このページの本文は、デザイン側で字間が −0.69px（−.046em）詰めてある
     （.ai の text.tsv：−0.9 / −0.74 / −0.6 / −0.41 / −0.8 px）。
     詰めないと1行が23pxぶん長くなり、デザインと合わない。
     選ばれる10の理由のデザインは字間ほぼ0だったので、あちらでは詰めていない。
     ※ルール3章の「字間 0〜.02em・マイナス禁止」は見出しの決まりなので、
     　本文にはデザイン実測をそのまま入れている。要確認事項として報告済み。 */
  letter-spacing:-.046em;
}

/* ---------- お問い合わせフォームのボタン ----------
   デザイン実測：x=281.0 y=1472.5 385.0×57.0 角丸6px
   文字は 20.54pt・白。デザインのx座標ではなく「ボタンの中央」でそろえる（ルール3章） */
.sup-btn{
  position:absolute;
  left:3px;
  top:729.4px;
  margin:0;
  width:385px;
  height:57px;
}
.sup-btn a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:6px;
  background:var(--blue);
  color:#fff;
  font-size:20.54px;
  font-weight:700;
  line-height:1;
  letter-spacing:.076em;
  text-indent:.076em;   /* 中央ぞろえ＋字間のときは字間と同じ値を入れる（リファレンス1章） */
  text-decoration:none;
}
.sup-btn a:hover{opacity:.85;}

/* =========================================================
   スマホ（768px以下）
   ※このページはスマホ専用のデザインが無いため、会社概要・特定商取引法と
     同じ考え方（縦積み・左右8%・文字14px前後）にそろえた。
     PCの絶対配置は全部やめて、上から順に流す。
   ========================================================= */
@media (max-width:768px){
  /* タイトル文字が画像に入っているため、高さを固定して切り抜くと文字が欠ける。
     帯まるごと縮めて全部見せる。 */
  /* ---------- ファーストビューの帯（スマホ） ----------
     ★2026/09/04 和田さん指示：10年保証（/security/）と同じ高さに揃える。
     基準は company.css の @media(max-width:768px) の .cmp-hero{height:180px}。
     以前は「幅なり」にしていたが、4ページで見え方がバラついていたため基準に統一した。
     画像は object-fit:cover で左右が切られる。 */
  .cmp-hero.sup-hero{height:180px;}
  .cmp-hero.sup-hero img{height:180px;aspect-ratio:auto;object-fit:cover;}

  .cmp-wrap.sup-wrap{margin-top:40px;}
  .cmp-main.sup-main{min-height:0;}

  .sup-h,.sup-fig,.sup-p,.sup-btn{
    position:static;left:auto;top:auto;width:auto;
  }
  .sup-h{font-size:20px;line-height:1.6;}
  .sup-h br{display:none;}
  .sup-fig{margin-top:22px;height:auto;}
  .sup-fig img{height:auto;aspect-ratio:713/353;}
  /* スマホ専用デザインが無いので、字間はデザインの−.046emではなく読みやすさ優先で標準に戻す */
  .sup-p{margin-top:22px;font-size:14px;line-height:2.05;letter-spacing:normal;}
  .sup-p br{display:none;}
  .sup-btn{margin-top:26px;width:auto;height:auto;}
  .sup-btn a{
    height:56px;font-size:16px;
    letter-spacing:.04em;text-indent:.04em;
  }
}

/* ★2026/09/03 修正：この754pxブロックがスマホ用メディアクエリの「外」に書かれていたため、
   スマホにも754pxが効いて、ページ全体が横に広がる崩れが起きていた（会社概要でクライアント指摘）。
   PC専用（min-width:769px）で包んで、スマホには効かないようにした。中身は1文字も変えていない。 */
@media (min-width:769px){
/* ★全ページ共通ルール（2026/08/28 和田さん確定）本文ブロックは754px。
   842px（本文カラムいっぱい）にしない。サイドバーに接触して見えるため。
   ※トップページと、サイドバーが無いページは対象外。 */
.cmp-main .sup-h,
.cmp-main .sup-p,
.cmp-main .sup-fig,
.cmp-main .sup-btn{max-width:754px;}
.cmp-main .sup-h,
.cmp-main .sup-p{width:754px;}
}