@charset "UTF-8";

/* ============================================================
   フロンガス回収サービス ページ
   株式会社安福冷暖
   ------------------------------------------------------------
   【テーマCSSとの干渉対策】

   すべてのセレクタを #freon で始めています。
   本文の一番外側にある <div id="freon"> がその起点です。

   ・外へ出さない
     #freon の外（#header / #footer / 他ページ）には一切影響しません。

   ・中へ入れない
     ID を起点にしているため詳細度が 1-0-0 以上になり、
     テーマ側の次のような指定にも確実に勝ちます。
       p / a / img / h2 ……………………………… style.css・normalize.css
       .page-freon h2 { margin-top:60px } ……… personal.css
       .parent-pageid-8 p { font-size:1.125rem } … personal.css
       .page-id-1136 strong { background:#f4fc02 } … personal.css

   ・クラス名の重複回避
     テーマが使用中の名前は使っていません。
       wrap  → 使わない（#contents が既に .wrap を持つため）
       btn   → button
       num   → step
       alert → notice
       box   → 使わない

   読み込み順は「テーマCSS → freon.css」を推奨します。
   （ID起点のため、順序が前後しても表示は崩れません）

   配色は「白 × 明るい青」の1テーマ固定。
   端末がダークモードでも常に明るく表示されます。
   ============================================================ */


/* ------------------------------------------------------------
   1. カラー・書体の定義
   ------------------------------------------------------------ */
#freon {
  /* 背景 */
  --white:      #FFFFFF;
  --gray:       #F1F6F9;

  /* 文字 */
  --black:      #000000;
  --ink:        #1B2A33;
  --ink-sub:    #48606D;
  --ink-weak:   #7C8F9A;

  /* 罫線 */
  --line:       #E0E8ED;
  --line-dark:  #C9D8E1;

  /* ブランドカラー（青） */
  --blue:       #0F6FA8;
  --blue-dark:  #0A4E78;
  --blue-pale:  #EBF4FA;
  --blue-line:  #BCD9EB;

  /* 行動を促す色（オレンジ） */
  --orange:      #DD6519;
  --orange-dark: #BE5211;
  --orange-end:  #FF751E;   /* ボタンのグラデーション終点 */
  --yellow-end:  #FACC26;   /* 冒頭ボタンのグラデーション終点 */
  --orange-pale: #FDF0E7;
  --orange-line: #F2D8C4;

  /* サービスの2系統 */
  --svc-a-bg:   #E6F3FA;
  --svc-b-bg:   #FFF4D6;
  --refill-bg:  #F2FBFC;

  /* 可否・状態 */
  --green:      #2E7D5B;
  --red:        #B94A62;
  --alert:      #FC4343;   /* 罰則表の見出し・注意書き */
  --alert-head: #DC2727;


  /* 環境プロジェクト */
  --eco:        #3D7A4E;
  --eco-pale:   #F0F6F0;
  --eco-line:   #CBDFCD;

  /* 制作メモ（公開時に削除する要素） */
  --memo:       #8A6100;
  --memo-bg:    #FFF7E2;
  --memo-line:  #E8C976;

  /* 影 */
  --shadow-s: 0 1px 3px rgba(27, 42, 51, .06), 0 4px 14px rgba(27, 42, 51, .05);
  --shadow-m: 0 6px 24px rgba(27, 42, 51, .09);

  /* 書体 */
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", "ヒラギノ角ゴシック Pro",
               "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  --font-num:  "Barlow", sans-serif;
}


/* ------------------------------------------------------------
   2. テーマCSSの打ち消し（このページの範囲だけ）
   ------------------------------------------------------------ */

/* テーマは box-sizing を全体指定していないため、ここで揃える */
#freon,
#freon *,
#freon *::before,
#freon *::after {
  box-sizing: border-box;
}

/* テーマの body { font-size:16px; line-height:1.5 } を上書き */
#freon {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  text-align: left;
}

/* 余白とリストマーカーのリセット（normalize.css / style.css 対策） */
#freon h2,
#freon h3,
#freon h4,
#freon p,
#freon ul,
#freon ol,
#freon dl,
#freon dd,
#freon figure,
#freon table {
  margin: 0;
  padding: 0;
}

#freon ul,
#freon ol {
  list-style: none;
}

/* 段落の下余白は自前で持つ */
#freon p {
  margin-bottom: 16px;
}

/* テーマの a { color:#444; transition:all .3s } と a:hover の下線を打ち消す */
#freon a {
  color: var(--blue);
  text-decoration: none;
  transition: none;
}

#freon a:hover {
  color: var(--blue);
  text-decoration: none;
}

/* normalize.css の figure { margin:1em 40px } / img { border:0 } */
#freon img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

/* normalize.css の mark { background:#ff0 } を打ち消す */
#freon mark {
  background: none;
  color: inherit;
}

/* テーマの h1〜h5 の文字サイズ・色指定を打ち消す */
#freon h2,
#freon h3,
#freon h4 {
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}

/* personal.css の .page-id-1136 strong { background:#f4fc02 } を打ち消す */
#freon b,
#freon strong {
  background: none;
  font-weight: 700;
}

/* normalize.css の small { font-size:80% } */
#freon small {
  font-size: inherit;
}

#freon table {
  border-collapse: collapse;
  border-spacing: 0;
}

#freon a:focus-visible,
#freon button:focus-visible,
#freon summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* 目次から飛んだときに見出しが隠れないように */
#freon [id] {
  scroll-margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  #freon * {
    transition: none !important;
  }
}


/* ------------------------------------------------------------
   3. セクションの箱
   ------------------------------------------------------------
   サイトの #contents（最大1200px）の中に入るため、
   画面いっぱいの帯ではなくカード状の箱を積む構成にしています。
   ------------------------------------------------------------ */
#freon .sec {
  margin-bottom: 22px;
  padding: 52px 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

#freon .sec.pale {
  border-color: var(--blue-line);
  background: var(--blue-pale);
}

/* 法令・実績・FAQ ── 落ち着いたグレー */
#freon .sec.gray {
  background: var(--gray);
}

/* 最終CTA ── 青ベタ。ページ内で唯一の強い面 */
#freon .sec.accent {
  border-color: var(--blue-dark);
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 100%);
}

#freon .sec.accent h2,
#freon .sec.accent .lead {
  color: #fff;
}

#freon .sec.accent .lead {
  opacity: .92;
}

#freon .sec.accent .eyebrow {
  color: #fff;
}

#freon .sec.accent .eyebrow .no {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* 青ベタの上では、連絡先を白いパネルに載せる */
#freon .sec.accent .contact-card {
  padding: 26px 30px;
  border-radius: 10px;
  background: var(--white);
}

#freon .sec.accent .contact-card .hours,
#freon .sec.accent .contact-card .hint {
  color: var(--black);
}

#freon .sec.accent .more-link .button.sub {
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}

#freon .sec.accent .more-link .button.sub:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

#freon .sec.accent .todo {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

#freon .sec.eco {
  border-color: var(--eco-line);
  background: var(--eco-pale);
}

/* 読みやすさのため本文幅を絞る */
#freon .narrow {
  max-width: 780px;
  margin: 0 auto;
}

#freon .center {
  text-align: center;
}


/* ------------------------------------------------------------
   4. 見出し
   ------------------------------------------------------------ */

/* 英字の小見出し（通し番号つき。番号は目次と対応します） */
#freon .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--blue);
  font-family: var(--font-num);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
}

#freon .eyebrow .no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  letter-spacing: .04em;
}

/* セクション見出し */
#freon .headline h2 {
  margin-bottom: 14px;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 900;
  line-height: 1.42;
}

#freon h2 em {
  color: var(--blue);
  font-style: normal;
}

/* 見出し下のリード文 */
#freon .lead {
  max-width: 800px;
  margin: 0 auto 20px;
  color: var(--ink-sub);
  font-size: 15.5px;
}

/* リード文・注記を黒で読ませる箇所 */
#freon .lead.ink,
#freon .note.ink {
  color: var(--black);
}

#freon .note.ink b {
  color: var(--black);
}

/* 見出しブロックと本編の区切り */
#freon .headline {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

#freon .sec.pale .headline {
  border-bottom-color: var(--blue-line);
}

#freon .sec.eco .headline {
  border-bottom-color: var(--eco-line);
}

#freon .sec.accent .headline {
  border-bottom-color: rgba(255, 255, 255, .3);
}

#freon .headline > :last-child {
  margin-bottom: 0;
}

#freon .sec h3 {
  margin: 44px 0 16px;
  font-size: 20px;
  font-weight: 900;
}

#freon .sec h3:first-child {
  margin-top: 0;
}

/* 表や図の下に置く注記 */
#freon .note {
  margin: 12px 0 0;
  color: var(--ink-weak);
  font-size: 13px;
  line-height: 1.85;
}

#freon .note b {
  color: var(--ink-sub);
}

#freon .hint {
  margin: 5px 0 0;
  color: var(--ink-weak);
  font-size: 12.5px;
  line-height: 1.75;
}


/* ------------------------------------------------------------
   5. ボタン（テーマの .btn と衝突しないよう .button）
   ------------------------------------------------------------ */
#freon .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 28px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--orange) 8%, var(--orange-end) 100%);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}

#freon .button:hover {
  color: #fff;
  filter: brightness(.92);
}

/* 冒頭の問い合わせボタン（オレンジ → 黄） */
#freon .button.bright {
  background: linear-gradient(90deg, var(--orange) 0%, var(--yellow-end) 100%);
}

#freon .button .ico {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

/* 白地・青枠の副ボタン */
#freon .button.sub {
  padding: 14px 26px;
  border: 1.5px solid var(--blue-line);
  background: var(--white);
  color: var(--blue);
  font-size: 15px;
}

#freon .button.sub:hover {
  border-color: var(--blue);
  background: var(--blue-pale);
  color: var(--blue);
}

/* 文字幅にあわせる */
#freon .button.fit {
  width: auto;
}


/* ------------------------------------------------------------
   6. アイコン（ページ末尾のスプライトを参照）
   ------------------------------------------------------------ */
#freon .ico {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#freon .sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ------------------------------------------------------------
   7. 制作メモ（公開時に削除する）
   ------------------------------------------------------------ */
#freon .memo {
  margin-bottom: 22px;
  padding: 16px 22px;
  border: 1px solid var(--memo-line);
  border-radius: 8px;
  background: var(--memo-bg);
  font-size: 13.5px;
  line-height: 1.85;
}

#freon .memo p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
}

#freon .memo b {
  color: var(--memo);
}

#freon .todo {
  display: inline-block;
  margin: 0 4px;
  padding: 1px 8px;
  border: 1px solid var(--memo-line);
  border-radius: 4px;
  background: var(--memo-bg);
  color: var(--memo);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}


/* ------------------------------------------------------------
   8. ヒーロー（写真一面 ＋ 文字のせ）
   ------------------------------------------------------------ */
#freon .hero {
  position: relative;
  margin-bottom: 22px;
  border-radius: 12px;
  overflow: hidden;
}

#freon .hero-photo {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: left 80%;
}

/* 写真の下半分を暗くして、白文字を読めるようにする */
#freon .hero-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 130px 46px 40px;
  background: linear-gradient(to top,
              rgba(8, 38, 58, .92) 0%,
              rgba(8, 38, 58, .78) 38%,
              rgba(8, 38, 58, .30) 72%,
              rgba(8, 38, 58, 0) 100%);
  color: #fff;
}

#freon .hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

#freon .hero-tags li {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
}

#freon .hero-body h2 {
  max-width: 22em;
  margin-bottom: 14px;
  color: #fff;
  font-size: clamp(23px, 3.4vw, 38px);
  font-weight: 900;
  line-height: 1.36;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

#freon .hero-body h2 mark {
  padding: 0 3px;
  background: linear-gradient(transparent 62%, rgba(255, 190, 90, .85) 62%);
  color: #fff;
}

#freon .hero-body p {
  max-width: 46em;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

#freon .hero-body b {
  color: #fff;
}


/* ------------------------------------------------------------
   9. 問い合わせ（冒頭の電話＋ボタン、最終CTAのカード）
   ------------------------------------------------------------ */

/* 冒頭：左に電話とボタン、右に安心の4項目 */
#freon .sec.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px 83px;
  padding: 20px 44px 23px;
  border-color: transparent;
}

#freon .call {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 482px;
  max-width: 100%;
  text-align: center;
}

#freon .call .label {
  margin: 0;
  color: var(--black);
  font-size: 12.5px;
  font-weight: 700;
}

#freon .call .tel {
  color: var(--blue);
  font-family: var(--font-num);
  font-size: 49px;
  font-weight: 700;
  line-height: 1.6;
}

#freon .call .hours {
  margin: 0 0 36px;
  color: var(--black);
  font-size: 12.5px;
  line-height: 1.7;
}

/* 最終CTAのカード */
#freon .contact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}

#freon .contact-card .label {
  margin: 0;
  color: var(--ink-weak);
  font-size: 12.5px;
  font-weight: 700;
}

#freon .contact-card .tel {
  display: block;
  color: var(--blue);
  font-family: var(--font-num);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
}

#freon .contact-card .hours {
  margin: 0;
  color: var(--ink-weak);
  font-size: 12.5px;
  line-height: 1.7;
}


/* ------------------------------------------------------------
   10. 安心の4項目（チェックつきの一覧）
   ------------------------------------------------------------ */
#freon .trust {
  display: grid;
  gap: 1px;
  width: 540px;
  max-width: 100%;
}

#freon .trust li {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 44px;
  padding: 0 16px;
}

#freon .trust img {
  flex: none;
  width: 28px;
}

#freon .trust b {
  flex: none;
  width: 205px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

#freon .trust span {
  color: var(--blue);
  font-size: 16px;
  line-height: 1.3;
}


/* ------------------------------------------------------------
   11. 目次（ページ内リンク）
   ------------------------------------------------------------ */
#freon .sec.toc {
  padding: 20px 44px 15px;
}

#freon .toc h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 900;
}

#freon .toc h2::before {
  content: "";
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background: var(--blue);
}

#freon .toc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: 2px 22px;
}

#freon .toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--line);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.6;
}

#freon .toc a:hover {
  color: var(--blue);
}

/* テーマの .num と衝突しないよう .step */
#freon .toc .step {
  flex: none;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--blue-pale);
  color: var(--blue);
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}

#freon .toc a:hover .step {
  background: var(--blue);
  color: #fff;
}

#freon .toc .ico {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--line-dark);
  stroke-width: 2.2;
}

#freon .toc a:hover .ico {
  color: var(--orange);
}


/* ------------------------------------------------------------
   12. お悩みカード（CASE 01〜03）
   ------------------------------------------------------------ */
#freon .cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}

#freon .case {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-s);
  color: var(--ink);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}

#freon .case:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  color: var(--ink);
}

#freon .case-photo {
  position: relative;
  display: block;
}

#freon .case img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

#freon .case .tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 13px;
  border-radius: 0 0 6px 0;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-num);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
}

#freon .case h3 {
  margin: 20px 22px 9px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 900;
}

#freon .case p {
  margin: 0 22px 14px;
  color: var(--black);
  font-size: 14px;
  line-height: 1.85;
}

/* カード下端の青い帯 */
#freon .case .more {
  display: block;
  margin-top: auto;
  padding: 17px 22px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}


/* ------------------------------------------------------------
   13. 図版（仕組み図）と写真
   ------------------------------------------------------------ */
#freon .figure-box {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

/* 色付きの面では、カードの影を少し強めて浮かせる */
#freon .sec.pale .figure-box,
#freon .sec.gray .figure-box,
#freon .sec.gray .table,
#freon .sec.gray .faq details,
#freon .sec.pale .flow li,
#freon .sec.pale .docs li {
  box-shadow: var(--shadow-s);
}

/* 02 フロン回収作業：左に説明、右に写真 */
#freon .how-top {
  display: grid;
  grid-template-columns: 544px 1fr;
  align-items: center;
  margin-bottom: 22px;
  padding: 46px 0;
}

#freon .how-top h2 {
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 900;
  line-height: 1.42;
}

#freon .how-top p:not(.eyebrow) {
  max-width: 461px;
  margin: 14px 0 0;
  color: var(--black);
  font-size: 16px;
}

#freon .how-top img {
  width: 100%;
  aspect-ratio: 566 / 258;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: cover;
}

/* 横に長い図は、この枠の中だけでスクロールさせる */
#freon .figure-scroll {
  overflow-x: auto;
}

#freon .figure-scroll img {
  width: 100%;
  min-width: 660px;
}

#freon .figure-box .note {
  margin-top: 16px;
  text-align: center;
}


/* ------------------------------------------------------------
   14. 対象機器の写真グリッドと銘板
   ------------------------------------------------------------ */
#freon .kiki {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

#freon .kiki li {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}

#freon .kiki img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#freon .kiki b {
  display: block;
  margin: 14px 16px 3px;
  font-family: var(--font-head);
  font-size: 15px;
}

#freon .kiki span {
  display: block;
  margin: 0 16px 16px;
  color: var(--black);
  font-size: 12.5px;
  line-height: 1.7;
}

/* 銘板で確認する方法 */
#freon .plate {
  padding-top: 51px;
}

#freon .sec .plate h3 {
  margin: 12px 0 0;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 700;
}

#freon .plate > p:not(.note) {
  margin: 12px 0 0;
  color: var(--black);
  font-size: 13px;
  line-height: 1.85;
}

#freon .plate .figure-scroll img {
  max-width: 900px;
}


/* ------------------------------------------------------------
   15. 表
   ------------------------------------------------------------ */
#freon .table {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  overflow-x: auto;         /* ページ本体は横スクロールさせない */
}

#freon table {
  width: 100%;
  min-width: 580px;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

#freon th,
#freon td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  line-height: 1.75;
}

#freon thead th {
  border-bottom: none;
  background: var(--blue-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

#freon tbody th {
  width: 1%;
  background: var(--gray);
  font-weight: 700;
  white-space: nowrap;
}

#freon tbody tr:last-child > * {
  border-bottom: none;
}

/* 表中の補足（kW表記など） */
#freon th small {
  display: block;
  color: var(--ink-weak);
  font-size: 12.5px;
  font-weight: 400;
}

/* 表中の可否 */
#freon .ok,
#freon .ng {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

#freon .ok { color: var(--green); }
#freon .ng { color: var(--red); }

#freon .ok .ico,
#freon .ng .ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}


/* 04 法律の小見出し */
#freon .sec h3.law-head {
  margin: 44px 0 16px;
  color: var(--blue);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  text-align: center;
}

#freon .sec h3.law-head.warn {
  color: var(--alert-head);
  font-size: clamp(21px, 2.8vw, 27px);
}

/* 図の直後に続く表 */
#freon .after-fig {
  margin-top: 20px;
}

/* 罰則の表は見出し行を赤に */
#freon .penalty thead th {
  background: var(--alert);
}


/* ------------------------------------------------------------
   16. サービス一覧（2系統を左右に並べる）
   ------------------------------------------------------------ */
#freon .svcs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 500px));
  justify-content: center;
  align-items: start;
  gap: 48px;
  padding: 18px 0;
}

#freon .sec .svc h3 {
  margin: 0;
  padding: 12px 0;
  color: var(--blue);
  font-size: 19px;
  text-align: center;
}

#freon .svc > p {
  margin: 0;
  padding: 9px 0;
  color: var(--black);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

#freon .svc dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 17px 29px;
  border-radius: 10px;
  background: var(--svc-a-bg);
}

#freon .svc dt {
  color: var(--blue);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

/* dt と dd は詰め、項目どうしは gap で離す */
#freon .svc dd {
  margin-top: -12px;
  color: var(--black);
  font-size: 13px;
  line-height: 1.75;
}

/* B. 使用中の管理 ── オレンジ系 */
#freon .sec .svc.b h3,
#freon .svc.b dt {
  color: var(--orange-dark);
}

#freon .svc.b dl {
  padding: 16px 24px;
  background: var(--svc-b-bg);
}

/* 「毎年ガスを補充している」 */
#freon .refill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 20px;
  background: var(--refill-bg);
}

#freon .refill img {
  flex: none;
  width: 181px;
  border-radius: 40px;
}

#freon .refill div {
  max-width: 584px;
}

#freon .sec .refill h3 {
  margin: 0 0 11px;
  color: var(--blue);
  font-size: 21px;
  line-height: 1.3;
}

#freon .refill p {
  margin: 0;
  color: var(--black);
  font-size: 14.5px;
  line-height: 1.9;
}


/* ------------------------------------------------------------
   17. 注意喚起（テーマの .alert と衝突しないよう .notice）
   ------------------------------------------------------------ */
#freon .notice {
  margin: 12px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--orange-line);
  border-radius: 10px;
  background: var(--white);
  color: var(--alert);
  font-size: 14.5px;
  line-height: 1.9;
  text-align: center;
}


/* ------------------------------------------------------------
   18. 依頼の流れ
   ------------------------------------------------------------ */
#freon #flow .headline {
  margin-bottom: 28px;
}

#freon .flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: step;
}

#freon .flow li {
  position: relative;
  padding: 22px 24px 22px 92px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  counter-increment: step;
}

/* 番号は工程が進むほど淡い青に */
#freon .flow li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 900;
}

#freon .flow li:nth-child(2)::before { background: #1288CF; }
#freon .flow li:nth-child(3)::before { background: #1AA1F2; }
#freon .flow li:nth-child(4)::before { background: #43A5DF; }
#freon .flow li:nth-child(5)::before { background: #76C6F5; }
#freon .flow li:nth-child(6)::before { background: #A5D6F3; }

#freon .flow h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}

#freon .flow p {
  margin: 0;
  color: var(--ink-sub);
  font-size: 14.5px;
}


/* ------------------------------------------------------------
   19. お渡しする書類
   ------------------------------------------------------------ */
#freon .docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 18px;
}

#freon .docs li {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  text-align: center;
}

#freon .docs img {
  width: 88px;
  margin: 0 auto 14px;
}

#freon .docs b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: 15px;
}

#freon .docs span {
  display: block;
  color: var(--ink-sub);
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
}

#freon .docs .todo {
  display: table;
  margin: 8px auto 0;
  color: var(--ink-sub);
  font-size: 13px;
}


/* ------------------------------------------------------------
   20. 対応エリア
   ------------------------------------------------------------ */
#freon .areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 500px));
  justify-content: center;
  align-items: start;
  gap: 18px;
}

#freon .areas li {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

#freon .sec .areas h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

#freon .areas p {
  margin: 0;
  color: var(--ink-sub);
  font-size: 14px;
  line-height: 1.9;
}


/* ------------------------------------------------------------
   21. よくあるご質問
   ------------------------------------------------------------ */
#freon .faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#freon .faq details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

#freon .faq summary {
  position: relative;
  display: block;
  padding: 17px 52px 17px 54px;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.65;
  list-style: none;
  cursor: pointer;
}

#freon .faq summary::-webkit-details-marker {
  display: none;
}

#freon .faq summary::before {
  content: "Q";
  position: absolute;
  left: 18px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
}

/* 開閉の矢印 */
#freon .faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 26px;
  width: 10px;
  height: 10px;
  border-right: 2.3px solid var(--blue);
  border-bottom: 2.3px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

#freon .faq details[open] summary::after {
  transform: rotate(-135deg);
}

#freon .faq summary:hover {
  background: var(--gray);
}

#freon .faq .answer {
  position: relative;
  padding: 0 26px 20px 54px;
}

#freon .faq .answer::before {
  content: "A";
  position: absolute;
  left: 18px;
  top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: var(--orange-pale);
  color: var(--orange-dark);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
}

#freon .faq .answer p {
  margin: 0;
  color: var(--ink-sub);
  font-size: 14.5px;
  line-height: 1.9;
}


/* ------------------------------------------------------------
   22. 木を植える男プロジェクト
   ------------------------------------------------------------ */
#freon .sec.eco .eyebrow {
  color: var(--eco);
  font-size: 15px;
}

#freon .sec.eco .eyebrow .no {
  background: var(--eco);
}

#freon .sec.eco p {
  margin-bottom: 24px;
  color: var(--ink-sub);
  font-size: 15px;
  line-height: 2.05;
}

#freon .eco-banner {
  display: inline-block;
  margin-top: 6px;
  border: 1px solid var(--eco-line);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}

#freon .eco-banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
}

#freon .eco-banner img {
  width: 100%;
  max-width: 772px;
}

/* スマホでは改行しない */
#freon .br-pc {
  display: inline;
}


/* ============================================================
   23. レスポンシブ
   ============================================================ */

/* --- タブレット（〜900px）--------------------------------- */
@media (max-width: 900px) {
  #freon .sec {
    padding: 40px 26px;
  }

  #freon .sec.intro {
    padding: 28px 26px;
  }

  #freon .hero-photo {
    aspect-ratio: 16 / 9;
  }

  #freon .hero-body {
    padding: 100px 28px 30px;
  }

  #freon .how-top {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0;
  }

  #freon .how-top p:not(.eyebrow) {
    max-width: none;
  }

  #freon .kiki {
    grid-template-columns: repeat(2, 1fr);
  }

  #freon .svcs,
  #freon .areas {
    grid-template-columns: minmax(0, 560px);
    gap: 28px;
  }

  #freon .refill {
    flex-direction: column;
    text-align: center;
  }

  #freon .refill p {
    text-align: left;
  }

  #freon .contact-card {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
}

/* --- スマートフォン（〜600px）----------------------------- */
@media (max-width: 600px) {
  #freon .sec {
    margin-bottom: 16px;
    padding: 32px 18px;
    border-radius: 10px;
  }

  #freon .sec.intro {
    padding: 24px 18px;
  }

  #freon .hero-photo {
    aspect-ratio: 4 / 5;
    object-position: 62% center;
  }

  #freon .hero-body {
    padding: 90px 20px 26px;
    background: linear-gradient(to top,
                rgba(8, 38, 58, .95) 0%,
                rgba(8, 38, 58, .85) 45%,
                rgba(8, 38, 58, .35) 78%,
                rgba(8, 38, 58, 0) 100%);
  }

  #freon .call .tel {
    font-size: 40px;
  }

  #freon .call .hours {
    margin-bottom: 20px;
  }

  /* チェック・項目名を1行目、補足を2行目に */
  #freon .trust li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 2px 14px;
    padding: 8px 0;
  }

  #freon .trust img {
    grid-row: span 2;
  }

  #freon .trust b {
    width: auto;
  }

  #freon .trust span {
    font-size: 14px;
  }

  #freon .kiki {
    grid-template-columns: 1fr;
  }

  #freon .svc dl,
  #freon .svc.b dl {
    padding: 16px 18px;
  }

  #freon .refill {
    padding: 24px 18px;
  }

  #freon .contact-card .tel {
    font-size: 30px;
  }

  #freon .flow li {
    padding: 64px 18px 20px;
  }

  #freon .flow li::before {
    left: 18px;
    top: 18px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  #freon .faq summary {
    padding: 15px 44px 15px 48px;
    font-size: 15px;
  }

  #freon .faq .answer {
    padding-right: 18px;
    padding-left: 48px;
  }

  #freon .br-pc {
    display: none;
  }
}


/* ------------------------------------------------------------
   24. 下部のリンクボタン
   ------------------------------------------------------------ */
#freon .more-link {
  margin: 26px 0 0;
  text-align: center;
}