/* =========================================================
   10年保証について（/security/）本文スタイル

   ★このページはリニューアル前の古いデザインしかない（🟦青）。
     `10年保証について.ai` は【原稿・構成・写真の参考】であって、
     レイアウトの正ではない（全体管理チャット経由・和田さん確定 2026/08/28）。

   ・原稿  … 現行公開ページ https://aircon.co.jp/security/ が正（和田さん確定 2026/08/28）
   ・幅・余白・文字サイズ・色 … 会社概要 /company/（company.css）に合わせる
   ・共通部品（ヘッダー／サイドバー／CTA／楽に頼めて／フッター）は確定版をそのまま使う

   ★このファイルは company.css を読み込んだ上に重ねる。
     .cmp / .cmp-wrap / .cmp-main / .cmp-side / .cmp-closing / .cmp-cta は company.css のものを使う。
     ここには「10年保証にしか無いパーツ」だけを書く。

   ★数値の出どころは、各ブロックのコメントに必ず書く（借用元を残す）。
   ========================================================= */

:root{
  /* 公開中サイトのCSS変数から借用（style.css?v=13 の --c-orange）。
     会社概要にはオレンジが無いため、勝手に色を作らずここから借りた。 */
  --sec-orange:#F46A25;

  /* ★本文カラム842pxいっぱいに箱や罫線を伸ばさない。
     和田さん指摘（2026/08/28）「本文テキストの右側の空白に線が上から下まで走っている」を受けて、
     会社概要 company.css の罫線幅 736.1px に合わせて、本文内のブロックはここで止める。 */
  --sec-block:754px;   /* ★全ページ共通ルール（2026/08/28 和田さん確定）本文ブロックは754px */
}

/* ---------- ページタイトル ----------
   ★2026/08/29 差し替え済み。会社概要 .cmp-hero（company.css）をそのまま使うので
     ここには何も書かない。画像 assets/img/security/hero.jpg（2000×524）。 */

/* ---------- 10年保証バナー（本文の先頭） ----------
   ★和田さん指示 2026/08/29 で新規作成。本文ブロック754pxに収める。
     画像は2倍（3016×1072）で書き出してあるので幅なりに縮める。
     ベクター版は デザインデータ/差し替え画像/10年保証/banner-10year.svg */
.sec-banner{
  width:var(--sec-block);
  margin:36px 0 0;
  line-height:0;
}
.sec-banner img{display:block;width:100%;height:auto;}

/* ---------- セクション見出し ----------
   会社概要 .cmp-greet-ttl（31.5px / 700 / 青 / line-height:1 / 字間.02em）から借用。
   ただし10年保証の見出しは長いものがあるため、行間だけ 1.35 に広げた（1行に収まらないため）。 */
/* ★全ページ共通ルール（2026/08/28 和田さん確定）
   本文の中身はすべて 754px に収める。842px（本文カラムいっぱい）にしない。
   → サイドバーに接触して見えるため。和田さんから3回指摘が出ている。
   ※トップページと、サイドバーが無いページは対象外。 */
.sec-h2,
.sec-h3,
.sec-p,
.sec-note,
.sec-link{width:var(--sec-block);}

/* ★要修正2（2026/08/29 全体管理チャット経由で指示）
   箱（.sec-box / .sec-flow__item）の中に入る段落まで754pxになってしまい、
   箱のpadding（26px／24px）ぶん、枠線の外へ 25〜26px はみ出していた（11か所）。
   いまは文字が短く折り返しで収まっているだけで、原稿が1行伸びれば枠外に文字が出る。
   → 箱の中は「箱の幅に従う」＝100% にする。 */
.sec-box .sec-p,
.sec-box .sec-note,
.sec-flow__item .sec-p,
.sec-flow__item .sec-note,
.sec-case .sec-p,
.sec-case .sec-note,
.sec-except .sec-p,
.sec-except .sec-note{width:100%;}

/* ★和田さん指示 2026/08/29：セクションのタイトルは、他ページと同じ
   「青い帯＋白文字」にする。よくある質問 .faq-cat（faq.css）と同じ作りにそろえた。
   高さ49.5 ／ 角丸5px ／ 塗り var(--blue) ／ 18px / 700 / 白 */
.sec-h2{
  margin:59.25px 0 0;           /* 会社概要 .cmp-greet-ttl の margin-top から借用 */
  display:flex;
  align-items:center;
  min-height:49.5px;
  padding:6px 23.8px 9.5px;     /* 帯の中で文字が中心より1.75px上（faq.css と同じ） */
  background:var(--blue);
  border-radius:5px;
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;             /* 見出しは詰めない（ルール3章） */
}
.sec-h2:first-child{margin-top:0;}

/* 小見出し（会社概要 .cmp-label 19px / 700 / 青 から借用） */
.sec-h3{
  margin:44px 0 0;
  font-size:19px;
  font-weight:700;
  color:var(--blue);
  line-height:1.5;
  letter-spacing:var(--h-tracking);
}

/* ---------- 本文 ----------
   会社概要 .cmp-greet-body（14.4px / 行ピッチ39px）から借用。
   10年保証は本文量が多いため、行ピッチだけ 30px に詰めた（39pxだと間延びする）。 */
.sec-p{
  margin:24.25px 0 0;
  font-size:14.4px;
  line-height:30px;
}
.sec-p + .sec-p{margin-top:18px;}

/* 注釈（会社概要には該当パーツが無い。本文14.4pxに対して小さめの12.7pxとした） */
.sec-note{
  margin:14px 0 0;
  font-size:12.7px;
  line-height:22px;
  color:#555;                   /* 制作ルール5章「補足 #555」 */
}
.sec-note + .sec-note{margin-top:4px;}

/* ---------- よくある修理例（6項目） ----------
   現行ページは1項目ずつ画像。新デザインではテキスト化して2列に並べた。
   本文カラム842px ／ 2列 ／ 間20px → 1枚 411px */
.sec-cases{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:26px 0 0;
  width:var(--sec-block);
}
.sec-case{
  width:367px;   /* (754 - 20) ÷ 2 */
  border:1px solid var(--rule-top);   /* 会社概要 --rule-top #BFD4EA から借用 */
  border-radius:4px;
  padding:18px 20px 20px;
}
.sec-case__no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1;
}
.sec-case__ttl{
  margin:0 0 0 10px;
  font-size:14.7px;             /* 会社概要 .cmp-dl__t から借用 */
  font-weight:700;
  color:var(--blue);
  vertical-align:middle;
}
.sec-case__head{display:flex;align-items:center;}
.sec-case__price{
  margin:14px 0 0;
  font-size:13.7px;             /* 会社概要 .cmp-dl__d から借用 */
  line-height:1.6;
}
.sec-case__free{
  margin:10px 0 0;
  font-size:14.7px;
  font-weight:700;
  color:var(--sec-orange);
  line-height:1.5;
}

/* ---------- 安心！（本体交換の説明） ---------- */
.sec-box{
  width:var(--sec-block);
  margin:30px 0 0;
  padding:24px 26px;
  background:#F4F7FB;           /* 青系のごく薄い地。--rule-top #BFD4EA を薄めた色 */
  border-radius:4px;
}
.sec-box__ttl{
  margin:0;
  font-size:19px;               /* 会社概要 .cmp-label から借用 */
  font-weight:700;
  color:var(--blue);
  line-height:1.5;
}
.sec-box .sec-p{margin-top:12px;}

/* ---------- 写真 ---------- */
.sec-figure{width:var(--sec-block);margin:26px 0 0;}
/* ★元画像より大きく引き伸ばさない（縦横比も保つ）。
   現行ページの実寸： photo02.jpg 704×298 ／ photo03.jpg 704×459 ／ img01.jpg 364×130
   本文カラム842pxに合わせて拡大すると粗くなるため、原寸のまま左に置く。 */
.sec-figure img{display:block;width:auto;max-width:100%;height:auto;}
.sec-figure figcaption{
  margin:10px 0 0;
  font-size:12.7px;
  line-height:1.8;
  color:#555;
}
/* 素材が未確定のもの（グレーの箱のまま残す） */
.sec-imgbox{
  margin:26px 0 0;
  height:240px;
  background:#e2e7eb;
  border:2px dashed #bfc6cc;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#7d858c;font-size:13px;line-height:1.9;
}

/* ---------- 修理の流れ（4ステップ） ---------- */
.sec-flow{width:var(--sec-block);margin:26px 0 0;}
.sec-flow__item{
  position:relative;
  padding:20px 24px;
  border:1px solid var(--rule-top);
  border-radius:4px;
}
.sec-flow__item + .sec-flow__item{margin-top:38px;}
/* ステップ間の矢印 */
.sec-flow__item + .sec-flow__item::before{
  content:"";
  position:absolute;
  left:50%;
  top:-26px;
  width:0;height:0;
  margin-left:-9px;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:14px solid var(--rule-top);
}
.sec-flow__ttl{
  margin:0;
  display:flex;
  align-items:center;
  font-size:19px;               /* 会社概要 .cmp-label から借用 */
  font-weight:700;
  color:var(--blue);
  line-height:1.5;
}
.sec-flow__no{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-right:12px;
  border-radius:50%;
  background:var(--blue);color:#fff;
  font-size:15px;font-weight:700;line-height:1;
}
.sec-flow__item .sec-p{margin-top:14px;}
.sec-flow__item .sec-note{margin-top:10px;}

/* ---------- 保証対象外 ---------- */
.sec-except{
  width:var(--sec-block);
  margin:30px 0 0;
  padding:24px 26px;
  border:1px solid var(--rule);   /* 会社概要 --rule #3F7EC1 から借用 */
  border-radius:4px;
}
.sec-except__ttl{
  margin:0;
  font-size:19px;
  font-weight:700;
  color:var(--blue);
  line-height:1.5;
}
.sec-except__lead{margin:14px 0 0;font-size:14.4px;line-height:1.8;}
.sec-except__list{margin:10px 0 0;padding:0;list-style:none;}
.sec-except__list li{
  font-size:14.4px;
  line-height:30px;
}

/* ---------- 規約リンク ---------- */
.sec-link{
  margin:34px 0 0;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
}
.sec-link a{color:var(--blue);text-decoration:underline;}

/* =========================================================
   スマホ（768px以下）
   会社概要と同じく、サイドバーは出さない／左右余白8％
   ========================================================= */
@media (max-width:768px){
  .sec-banner{width:100%;margin-top:24px;}

  /* ★要修正1（2026/08/29 全体管理チャット経由で指示）
     PCの本文ブロック754pxが、スマホでも残っていた。
     768px幅で本文カラムは645pxに縮むのに見出し・本文が754pxのままで、
     右端が815px＝画面を47pxオーバーし、横スクロールが出ていた。
     → スマホでは 754px を解除して 100% に戻す。 */
  .sec-h2,
  .sec-h3,
  .sec-p,
  .sec-note,
  .sec-link{width:100%;}

  .sec-h2{font-size:16px;margin-top:40px;line-height:1.5;padding:8px 14px 10px;min-height:44px;}
  .sec-h3{font-size:17px;margin-top:30px;}
  .sec-p{font-size:14px;line-height:26px;margin-top:16px;}
  .sec-note{font-size:12px;line-height:20px;}

  .sec-cases{gap:12px;margin-top:20px;width:100%;}
  .sec-case{width:100%;padding:16px 16px 18px;}
  .sec-box,.sec-flow,.sec-except,.sec-figure{width:100%;}

  .sec-box{padding:18px;margin-top:24px;}
  .sec-box__ttl{font-size:17px;}

  .sec-imgbox{height:180px;}

  .sec-flow__item{padding:16px 16px 18px;}
  .sec-flow__item + .sec-flow__item{margin-top:32px;}
  .sec-flow__ttl{font-size:16px;align-items:flex-start;}
  .sec-flow__no{width:26px;height:26px;font-size:13px;margin-right:10px;}

  .sec-except{padding:18px;margin-top:24px;}
  .sec-except__ttl{font-size:17px;}
  .sec-except__lead,
  .sec-except__list li{font-size:14px;line-height:26px;}

  .sec-link{font-size:15px;margin-top:26px;}
}

/* =========================================================
   2026/08/30 和田さん指示の4点
   ========================================================= */

/* ① よくある修理例のイラスト
   旧ページの case_img01〜05.png をそのまま使う（加工していない）。
   ★2026/08/30 和田さん指示：旧ページと同じ「文字が左・イラストが右」の配置。
     箱の中を格子（グリッド）にして、
       左列＝番号つきタイトル → 金額 → 無料の一文
       右列＝イラスト（縦は中央）
     に並べる。イラストは枠に収まる大きさまで縮める。 */
.sec-case{
  display:grid;
  grid-template-columns:1fr 108px;
  grid-template-areas:
    "head  fig"
    "price fig"
    "free  free";
  column-gap:14px;
  align-items:center;
}
.sec-case__head{grid-area:head;}
.sec-case__price{grid-area:price;}
.sec-case__free{grid-area:free;}
.sec-case__fig{
  grid-area:fig;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sec-case__fig img{
  max-width:108px;
  max-height:96px;
  width:auto;
  height:auto;
}

/* ② ルームエアコン／業務用エアコンを1つの網掛けにまとめ、右にイラスト枠 */
.sec-box--illust{
  display:flex;
  gap:26px;
  align-items:flex-start;
}
.sec-box__body{
  flex:1 1 auto;
  min-width:0;
}
/* 2つ目の見出し（業務用エアコンの場合）は、1つ目との間を空ける */
.sec-box__ttl--2nd{
  margin-top:26px;
}
/* イラストの枠。★2026/08/30 和田さんのSVGを配置済み。
   白背景はプレースホルダ時代の名残だったため削除（和田さん指示・チャットI）。
   イラストは網掛けの地の上に直接乗る */
.sec-box__illust{
  flex:0 0 200px;
  width:200px;
  align-self:stretch;           /* 文章と同じ高さまで伸ばす */
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sec-box__illust img{display:block;width:100%;height:auto;}
/* PC＝縦組み版／スマホ＝和田さん作の横長SP版（768px以下で入れ替え）
   ★セレクタは .sec-box__illust img と同じ形＋クラスにすること。
   　.sec-box__illust-sp 単体だと上の行に詳細度で負けて両方表示される（実際に起きた） */
.sec-box__illust img.sec-box__illust-sp{display:none;}
/* 中の本文は、箱いっぱいではなく本文の幅で折り返す */
.sec-box--illust .sec-p,
.sec-box--illust .sec-note{width:100%;}

/* ④ 修理の流れ①：旧ページと同じ「文章左・図右」 */
.sec-flow__cols{
  display:flex;
  align-items:center;
  gap:24px;
}
.sec-flow__txt{flex:1 1 auto;min-width:0;}
.sec-flow__txt .sec-p,
.sec-flow__txt .sec-note{width:100%;}
.sec-flow__figimg{flex:0 0 340px;width:340px;height:auto;}

/* --- スマホ（768px以下） --- */
@media (max-width:768px){
  .sec-box--illust{
    flex-direction:column;
    gap:18px;
  }
  .sec-box__illust{
    flex:0 0 auto;
    width:100%;
    height:auto;                /* 180px固定だとPC用の縦長画像がはみ出したため（2026/08/30） */
    min-height:0;
  }
  .sec-box__illust img.sec-box__illust-pc{display:none;}
  .sec-box__illust img.sec-box__illust-sp{display:block;max-width:400px;margin:0 auto;}
  /* グレーのステッカー画像はスマホでは62%に（和田さん指示 2026/08/30：赤枠ぐらいの大きさ） */
  .sec-figure--sticker img{width:62%;margin:0 auto;}
  .sec-flow__cols{flex-direction:column;align-items:flex-start;gap:12px;}
  .sec-flow__figimg{flex:0 0 auto;width:100%;max-width:375px;}
  .sec-case{grid-template-columns:1fr 96px;column-gap:10px;}
  .sec-case__fig img{max-width:96px;max-height:84px;}
}

/* =========================================================
   ★2026/08/31 クライアント指示（10年保証PDF）
   業務用エアコンの記述をページ本文から外し、
   延長保証サービス規約への案内をここ1か所にまとめた。
   ラベル画像はFV下バナーの「業務用エアコン」を切り出したもの。
   ========================================================= */
.sec-pro{
  width:var(--sec-block);
  margin:30px 0 0;
  padding:24px 26px;
  border:1px solid var(--rule);
  border-radius:4px;
}
.sec-pro__label{margin:0;}
.sec-pro__label img{width:245px;height:auto;display:block;}
.sec-pro__link{
  margin:14px 0 0;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
}
.sec-pro__link a{color:var(--blue);text-decoration:underline;}

@media (max-width:768px){
  .sec-pro{width:100%;padding:18px 16px;}
  .sec-pro__label img{width:186px;}
  .sec-pro__link{font-size:14px;}
}

/* =========================================================
   2026/09/19 吉川様（V6）スマホ：
   ①「ルームエアコン」見出しの文字を「業務用エアコン」と同じ大きさに
   ②「業務用エアコン」見出しを中央ぞろえ
   「ルームエアコン」はバナー画像 banner-10year.png（3016×1072）の上部に焼き込まれていて、
   スマホ幅では文字が約12pxと小さかった（業務用＝約19px）。
   → スマホだけ、バナー画像の上部（見出し部分・高さ240px）を隠し、
     同じ画像の見出し部分（x986〜2030・y41〜172を実測）だけを 0.19倍で上に出し直す。
     0.19倍＝文字の高さが業務用ラベル（186px幅表示）とそろう倍率。画像は増やさない。PCは1pxも変えない。
   ========================================================= */
@media (max-width:768px){
  .sec-banner{overflow:hidden;}
  /* 上に240px分ずらし、ずらした分（240 ÷ 1072 ＝ 高さの22.39%）を切り取って見えなくする。
     切り取らないと、小さい見出しが上の大きい見出しに重なって見えた（9/19 412pxで実測） */
  .sec-banner img{margin-top:-7.958%;clip-path:inset(22.39% 0 0 0);}   /* 240 ÷ 3016 ＝ 見出し部分の高さ（幅に対する割合） */
  .sec-banner::before{
    content:"";
    display:block;
    width:198px; height:25px;            /* 1044×131 × 0.19 */
    margin:0 auto 12px;
    background:url(img/security/banner-10year.png) no-repeat;
    background-size:573px auto;           /* 3016 × 0.19 */
    background-position:-187px -8px;      /* 986×0.19 ／ 41×0.19 */
  }
  .sec-pro__label img{margin:0 auto;}
}