@charset "UTF-8";
/* =========================================================
   プライムス サービス下層 共通 service.css
   対象: preparation / commissioning / inspection / freon-recovery
   Figma「WEB」より数値忠実実装。基準幅 PC=1920 / SP=375
   style.css のトークン・ヘッダー・フッター・ボタン等を再利用し、
   本ページ固有(ヒーロー帯 + 作業種別ブロック)のみ定義する。
   ========================================================= */

/* 種別色(青ヘッダー/box)。styleのトークンに無いので個別定義 */
:root{
  --c-svc-blue:#275aa6;   /* 青ヘッダーバー / 青box */
  --c-svc-line:#5689d5;   /* ペア間 1px線 */
  --c-svc-panel:#e3f2fd;  /* freon 薄青パネル */
}

/* main は overflow:hidden で横スクロール抑止(style.css既定と同) */
.svc-main{position:relative;width:100%;overflow:hidden;background:#fff}

/* =========================================================
   HERO 帯 (mv 1920x430)  bg #333 重ね + サービス写真
   ========================================================= */
.svc-mv{
  position:relative;
  width:100%;
  height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#333333;          /* 画像が無い/暗オーバーレイの下地 */
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.svc-mv::after{                /* #333 を重ね(Figma fill #333 + サービス写真) */
  content:"";position:absolute;inset:0;
  background:rgba(51,51,51,.45);
  z-index:0;
}
.svc-mv__copy{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:30px;
  text-align:center;
}
.svc-mv__en{
  font:500 64px/64px var(--f-en);
  color:#fff;letter-spacing:0;
  /* leading-trim: lh64/cap → 上下を詰める */
  margin-top:-9px;margin-bottom:-10px;
}
.svc-mv__jp{
  font:500 20px/24px var(--f-jp);
  color:#fff;letter-spacing:0;
  margin-top:-6px;margin-bottom:-7px;
}

/* =========================================================
   本文ラッパ (pad-top100 / bottom150 / gap80)
   ========================================================= */
.svc-body{
  position:relative;
  padding:100px 0 150px;
  display:flex;flex-direction:column;align-items:center;
  gap:80px;
  background:#fff;
}
/* 導入文(中央寄せ) Noto/Inter 14 lh28 #333。
   Figmaは~460-560px幅の中央コラムで2行に折返す。560pxで近似。 */
.svc-intro{
  width:560px;max-width:calc(100% - 40px);
  font:500 14px/28px var(--f-jp);
  color:var(--c-text);text-align:center;
  /* leading-trim lh28 */
  margin-top:-7px;margin-bottom:-7px;
}
.svc-intro--inter{font-family:var(--f-inter)}

/* 作業種別ブロック群 (width1200 / gap50) */
.svc-blocks{
  width:1200px;max-width:calc(100% - 40px);
  display:flex;flex-direction:column;
  gap:50px;
}

/* =========================================================
   作業種別ブロック 共通
   ========================================================= */
.svc-block{display:flex;flex-direction:column}
/* 青ヘッダーバー(高さ52) */
.svc-bar{
  height:52px;
  display:flex;align-items:center;justify-content:center;
  padding:0 20px;
  background:var(--c-svc-blue);
  font:700 16px/32px var(--f-jp);
  color:#fff;text-align:center;
}
.svc-bar + .svc-card{border-radius:0}   /* バー直下はカード上角を直角に */
.svc-bar{border-radius:0}

/* 青box(白box外周の青ふち)。pad[0,50,50,50] (バーあり) / pad50 (バーなし) */
.svc-card{
  background:var(--c-svc-blue);
  padding:50px;
  display:flex;flex-direction:column;
}
.svc-block--bar .svc-card{padding:0 50px 50px}   /* 上はバーに接するので0 */

/* 白角丸box r30 pad50 gap50 */
.svc-white{
  background:#fff;border-radius:30px;
  padding:50px;
  display:flex;flex-direction:column;align-items:center;
  gap:50px;
}

/* =========================================================
   タイプA: Before/After ペア (preparation)
   ========================================================= */
.svc-pair{
  width:720px;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:30px;
}
.svc-pair + .svc-pairline{margin:0}
.svc-pairline{                       /* ペア間 1px 線(720幅) */
  width:720px;height:1px;border:none;
  background:var(--c-svc-line);
  margin:0;
}
.svc-col{
  width:300px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;
  gap:30px;
}
.svc-col__label{
  width:100%;
  font:700 16px/32px var(--f-jp);
  color:var(--c-svc-blue);text-align:center;
}
/* ラベル+画像(gap20) のまとまり */
.svc-shot-wrap{
  display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;
}
.svc-shot{
  position:relative;width:300px;height:200px;flex-shrink:0;overflow:hidden;
  background:#333;
}
.svc-shot img{width:100%;height:100%;object-fit:cover;display:block}
.svc-badge{                          /* Before/After 白文字バッジ(左下) */
  position:absolute;left:10.5px;bottom:8px;
  font:500 16px/32px var(--f-en);color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  z-index:1;
}
.svc-col__desc{
  width:300px;
  font:500 14px/21px var(--f-jp);
  color:var(--c-text);text-align:left;
}
/* 中央の矢印円 56x56 (→ 白矢印) */
.svc-arrow{
  flex-shrink:0;
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#3268b8,#5689d5);
  align-self:center;
}
.svc-arrow svg{display:block}

/* =========================================================
   タイプB: 単一画像 (commissioning / inspection)
   ========================================================= */
.svc-single{
  width:720px;
  display:flex;flex-direction:column;align-items:center;
  gap:30px;
}
.svc-single__title{
  width:100%;
  font:700 20px/40px var(--f-jp);
  color:var(--c-svc-blue);text-align:center;
}
.svc-single__shot{
  width:720px;height:480px;overflow:hidden;background:#333;
}
.svc-single__shot img{width:100%;height:100%;object-fit:cover;display:block}
.svc-single__cap{
  width:720px;
  font:500 14px/21px var(--f-jp);
  color:var(--c-text);text-align:center;
}

/* =========================================================
   タイプC: フロン回収パネル (freon-recovery)
   白box内: 小見出し+画像+本文 / 1px線 / 小見出し+薄青パネル / 追記
   ========================================================= */
.svc-freon{
  width:720px;
  display:flex;flex-direction:column;align-items:center;
  gap:50px;
}
.svc-freon__sec{
  width:720px;
  display:flex;flex-direction:column;align-items:center;
  gap:30px;
}
.svc-freon__title{
  width:100%;
  font:600 20px/30px var(--f-inter);
  color:var(--c-svc-blue);text-align:center;
}
.svc-freon__shot{width:720px;height:480px;overflow:hidden;background:#333}
.svc-freon__shot img{width:100%;height:100%;object-fit:cover;display:block}
.svc-freon__text{
  width:720px;
  font:500 14px/28px var(--f-inter);
  color:var(--c-text);text-align:center;
}
.svc-freon__line{
  width:720px;height:1px;border:none;background:var(--c-svc-line);margin:0;
}
/* 薄青パネル pad50 中の箇条書き Inter600 14 LEFT #275aa6 */
.svc-freon__panel{
  width:720px;
  padding:50px;
  background:var(--c-svc-panel);
  display:flex;align-items:center;justify-content:center;
}
.svc-freon__list{
  font:600 14px/28px var(--f-inter);
  color:var(--c-svc-blue);text-align:left;
  white-space:pre-line;     /* \n を改行として表示 */
}

/* =========================================================
   @media SP (max-width:768px)  ※375専用フレーム準拠
   ========================================================= */
@media (max-width:768px){
  /* ---- HERO 帯 (375x280) ---- */
  .svc-mv{height:280px}
  .svc-mv__copy{gap:16px}
  .svc-mv__en{font-size:36px;line-height:36px;margin-top:-5px;margin-bottom:-6px}
  .svc-mv__jp{font-size:14px;line-height:20.3px;margin-top:-4px;margin-bottom:-5px}

  /* ---- 本文 (pad-top80 / bottom80 / gap80) ---- */
  .svc-body{padding:80px 0;gap:80px}
  .svc-intro{width:auto;max-width:none;padding:0 24px}
  .svc-blocks{width:auto;max-width:none;padding:0 10px;gap:80px}

  /* ---- 青ヘッダーバー / box ---- */
  .svc-bar{height:50px;font-size:14px;line-height:21px;border-radius:0}
  .svc-card{padding:30px 0;border-radius:30px}
  .svc-block--bar .svc-card{padding:0 0 30px;border-radius:0 0 30px 30px}
  /* 白box: 335幅 / 横padは画像295が収まるよう20pxへ(縦積み) */
  .svc-white{
    width:335px;max-width:calc(100% - 40px);margin:0 auto;
    padding:50px 20px;gap:50px;border-radius:30px;
  }

  /* ---- タイプA Before/After 縦積み ---- */
  .svc-pair{width:100%;flex-direction:column;align-items:center;gap:30px}
  .svc-pairline{width:100%}
  .svc-col{width:100%;align-items:center}
  .svc-col__label,.svc-col__desc{width:295px;max-width:100%}
  .svc-shot{width:295px;max-width:100%;height:196.7px}
  .svc-col__desc{text-align:left}
  /* 矢印は下向き(縦積みの間) */
  .svc-arrow{transform:rotate(90deg)}

  /* ---- タイプB 単一画像 縦積み ---- */
  .svc-single{width:100%}
  .svc-single__title{font-size:16px;line-height:32px}
  .svc-single__shot{width:295px;max-width:100%;height:196.7px;margin:0 auto}
  .svc-single__cap{width:295px;max-width:100%;text-align:left}

  /* ---- タイプC フロン 縦積み ---- */
  .svc-freon{width:100%;gap:50px}
  .svc-freon__sec{width:100%}
  .svc-freon__title{font-size:18px;line-height:27px}
  .svc-freon__shot{width:295px;max-width:100%;height:196.7px;margin:0 auto}
  .svc-freon__text{width:100%;text-align:left}
  .svc-freon__line{width:100%}
  .svc-freon__panel{width:100%;padding:30px 20px}
  .svc-freon__list{font-size:13px;line-height:26px}
}

/* =========================================================
   タイプD: 4コマ集約 (preparation 2026-10-02 手書き指示)
   PC 2列×2段 / SP 1列
   ========================================================= */
.svc-grid4{
  width:100%;max-width:840px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:50px 40px;
}
.svc-grid4__item{display:flex;flex-direction:column;gap:20px}
.svc-grid4__shot + .svc-grid4__title{margin-top:-4px}
.svc-grid4__title + .svc-grid4__cap{margin-top:-12px}
.svc-grid4__title{
  font:700 16px/32px var(--f-jp);
  color:var(--c-svc-blue);text-align:center;
}
.svc-grid4__shot{aspect-ratio:3/2;overflow:hidden;background:#333}
.svc-grid4__shot img{width:100%;height:100%;object-fit:cover;display:block}
.svc-grid4__cap{font:500 14px/21px var(--f-jp);color:var(--c-text);text-align:left}
@media (max-width:768px){
  .svc-grid4{grid-template-columns:1fr;gap:40px;max-width:295px;margin:0 auto}
  .svc-grid4__title{font-size:15px;line-height:26px}
}

/* =========================================================
   2026-10-07b 並び替え: 画像 → 作業タイトル → 説明文
   間隔は .svc-grid4 に合わせる (画像→タイトル16 / タイトル→説明8)
   ========================================================= */
.svc-single__shot + .svc-single__title{margin-top:-14px}
.svc-single__title + .svc-single__cap{margin-top:-22px}
.svc-shot-wrap + .svc-col__label{margin-top:-14px}
.svc-col__label + .svc-col__desc{margin-top:-22px}
.svc-freon__shot + .svc-freon__title{margin-top:-14px}
.svc-freon__sec:has(.svc-freon__shot) + .svc-freon__text{margin-top:-42px}
/* 矢印は画像(高さ200)の縦中央に */
.svc-arrow{align-self:flex-start;margin-top:72px}
@media (max-width:768px){
  .svc-arrow{align-self:center;margin-top:0}
}

/* 10/7 フロン回収：導入文の下の大きな画像 */
.svc-lead-img{width:960px;max-width:calc(100% - 48px);margin:40px auto 0;aspect-ratio:4096/1743;overflow:hidden}
.svc-lead-img img{width:100%;height:100%;object-fit:cover;display:block}

/* 10/7 元画像が小さい写真は引き伸ばさず小さめに表示（PCのみ） */
@media (min-width:769px){
  .svc-shot--small{width:460px;height:auto;margin-left:auto;margin-right:auto;background:none}
  .svc-shot--small.svc-shot--xs{width:340px}
  .svc-shot--small img{height:auto;object-fit:contain}
}

/* 2026-10-23 grid化した法令点検の説明文: 2列幅ではPC用の強制改行を出さない */
.svc-grid4__cap .pc-br{display:none}

/* 2026-10-23 導入文のリンク（環境省フロン排出抑制法ポータル）と注記 */
.svc-intro__link{color:var(--c-svc-blue);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.svc-intro__link:hover{opacity:.75}
.svc-intro__note{font-size:.86em;color:#555}