@charset "utf-8";

/* =========================================================
 *  THEME MEIHOU — meihou-ac.co.jp/business/airconditioner/ の
 *                 フォント・色味に合わせた配色テーマ
 *
 *  読み込み順: reset → style → theme-b → e-redesign → theme-meihou（最後）
 *  変更するもの: 色（トークン + ハードコード箇所の上書き）/ フォント / 字間・ウェイト
 *  変更しないもの: 文章 / 画像 / 掲載内容 / 料金・数値 / CTA文言 / セクション順 / レイアウト / 機能
 *
 *  ---- 参照元の実測値（2026-08-18 / 実ブラウザの computed style から採取）----
 *  フォント : "Noto Sans CJK JP", -apple-system, system-ui — 本文400 / 見出し700
 *  字間     : 1.05px（絶対値。小さい文字ほど広く効く＝このサイトの署名的な特徴）
 *  文字     : 見出し #003864（濃紺）/ 本文 #222222・#444444 / 補足 #868686
 *  背景     : #FFFFFF / #F8F8F8 / #F1F9FC（淡い水色）
 *  濃色ブロック: #003864（ヒーロー・パンくず）/ #002A4B（フッター）/ #5295B4（CONTACT）
 *  差し色   : #FF5E00（オレンジ）— 最上部の細い線・見出し脇の小三角・注意アイコンなど少量
 *  罫線     : #EFEFEF   角丸: 3px（ほぼ直角）   影: なし
 *
 *  ---- 実装上の判断（参照元をそのまま使わなかった2点。理由つき）----
 *  1. フォントは "Noto Sans JP"(Webフォント) を先頭に置く。
 *     参照元の "Noto Sans CJK JP" は端末にインストールされていないと -apple-system に落ち、
 *     Mac と Windows で別の書体になる。同じ書体を確実に出すため Webフォント版を先に置く。
 *  2. テキストに乗るオレンジは #C94700（暗め）を使う。
 *     参照元の #FF5E00 は白地に対して 2.7:1 しかなく、文字色にすると読めない
 *     （参照元も #FF5E00 は塗り・線・記号にだけ使い、文字色には使っていない）。
 *     塗り（CTA・限定シール・チェック記号）は #FF5E00 のまま使う。
 * ========================================================= */

:root {
  /* ---- Primary: 文字に乗せるオレンジ（見出しアクセント・番号・強調） ---- */
  --c-main: #C94700;
  --c-main-dark: #A03700;
  --c-main-light: #FF8640;
  --c-main-grad-from: #FF6E1A;
  --c-main-grad-to: #C94700;
  --c-main-bg-soft: #FFF3EC;
  --c-main-bg-soft-2: #FFE6D8;
  --c-main-border-soft: #FFC49E;

  /* ---- Sub: 濃紺（構造色・バッジ・ステップ番号・フォーム） ---- */
  --c-sub: #003864;
  --c-sub-dark: #002A4B;
  --c-sub-light: #5295B4;
  --c-sub-bg: #D6E4EE;
  --c-sub-bg-soft: #F1F9FC;

  /* ---- CTA: 塗りは参照元のオレンジそのまま（下を暗くして白文字を読ませる） ---- */
  --c-accent: #FF5E00;
  --c-accent-dark: #D94E00;

  /* ---- 警告（残枠・締切） ---- */
  --c-warn: #FF5E00;
  --c-warn-dark: #C94700;
  --c-warn-bg: #FFF3EC;
  --c-warn-border: #FFC49E;

  /* ---- 限定シールもオレンジ系（参照元に金色はない） ---- */
  --c-gold: #FF6E1A;
  --c-gold-light: #FF9A52;
  --c-gold-dark: #C94700;

  /* ---- Neutral: 見出しは濃紺・本文はグレー（参照元の特徴） ---- */
  --c-white: #fff;
  --c-ink: #003864;
  --c-text: #333333;
  --c-text-muted: #444444;
  --c-text-light: #868686;
  --c-bg: #FFFFFF;
  --c-bg-soft: #F8F8F8;
  --c-bg-cool: #F1F9FC;
  --c-border: #E3E3E3;
  --c-shadow: rgba(0, 56, 100, 0.07);
  --c-shadow-strong: rgba(0, 56, 100, 0.13);

  /* ---- フォント ---- */
  --font-base: "Noto Sans JP", "Noto Sans CJK JP", -apple-system, system-ui,
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

/* =========================================================
 *  1. タイポグラフィ — 字間 1.05px（絶対値）は継承させて全体に効かせる
 * ========================================================= */
body {
  font-family: var(--font-base);
  letter-spacing: 1.05px;
  color: var(--c-text);
}

/* FV メインコピーだけ最太に（本番と同じ 900 = Noto Sans JP Black） */
.fv-title, .fv-price-inline, .fv-price-inline small {
  font-family: var(--font-base);
  font-weight: 900;
  letter-spacing: 1.05px;
}
.section-title, .reason-title, .case-title, .flow-title,
.price-headline, .scarcity-title, .voice-result, .faq-q {
  font-weight: 700;
  letter-spacing: 1.05px;
}
/* 英字ラベルだけ参照元と同じくもう少し広く取る */
.eyebrow { letter-spacing: 0.14em; font-weight: 700; }
.case-no { letter-spacing: 0.14em; font-weight: 700; }

/* =========================================================
 *  2. FV — 参照元のヒーローは「濃紺の帯に白の太字」
 *     下段の白ブロック（.fv-lower）内は明るい文脈のまま
 * ========================================================= */
.fv {
  background: linear-gradient(168deg, #00456F 0%, #003864 52%, #002A4B 100%);
  color: #fff;
}
.fv::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  opacity: 0.55;
}
.fv-pill {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #fff;
  box-shadow: none;
}
.fv-title { color: #fff; }
.fv-price-inline { color: #FF5E00; text-shadow: none; }
.fv-visual-note { color: rgba(255, 255, 255, 0.62); }

/* 白ブロック内（本文・メリット・オファー・CTA）は濃色文字 */
.fv-sub { color: var(--c-text); }
.fv-sub .nope { color: var(--c-main); font-weight: 600; }
.fv-merit,
.fv-lower .fv-merit {
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  box-shadow: none;
}
.fv-merit::before { color: #FF5E00; }
.fv--tate .fv-lower {
  background: #fff;
  box-shadow: none;
}
.fv-offer {
  border: 1px solid var(--c-border);
  box-shadow: none;
}
.fv-offer-limit { color: var(--c-sub); }
.fv-offer-limit .spark { color: #FF5E00; }
.fv-offer-new, .fv-offer-arrow { color: var(--c-main); }
.fv-offer-old { text-decoration-color: var(--c-main); }

/* 「毎月3社限定」シール — オレンジ塗り + 濃紺文字（白文字は小さい字で読めないため） */
.fv-badge-limit {
  background: radial-gradient(circle at 50% 34%, var(--c-gold-light), var(--c-gold) 80%);
  color: #002A4B;
  box-shadow: 0 6px 16px rgba(0, 20, 40, 0.30);
}

.fv-kv-label { box-shadow: 0 4px 14px rgba(0, 20, 40, 0.22); }

/* 取引先ロゴ帯 — 参照元の淡い水色帯 */
.fv-partners { background: #F1F9FC; }
.fv-partners-title { color: var(--c-sub); }

/* =========================================================
 *  3. CTA ボタン — 参照元のオレンジ。影は持たせない（参照元は影ゼロ）
 * ========================================================= */
.btn {
  background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
  box-shadow: none;
}
.btn:hover {
  box-shadow: none;
  filter: brightness(1.06);
}

/* =========================================================
 *  4. FV キービジュアル内のダッシュボード（製品UIのモック）
 *     データ系列の色は情報として残し、構造色だけ参照元の紺に寄せる
 * ========================================================= */
.fv-dash { border-color: #E3E3E3; box-shadow: 0 5cqw 11cqw rgba(0, 20, 40, 0.22); color: #222222; }
.fv-dash-tabs i { background: #E8ECEF; }
.fv-dash-tabs i.on { background: var(--c-sub); }
.fv-dash-sub { color: #868686; }
.fv-dash .kpi { border-color: #E8ECEF; }
.kpi-l { color: #444444; }
.t-row { border-top-color: #EFEFEF; color: #333333; }
.t-row span:not(:first-child) { color: #444444; }
.t-head { color: #868686; }

/* =========================================================
 *  5. 開発事例
 * ========================================================= */
.case-visual { background: linear-gradient(135deg, #F1F9FC, #E2EFF6); }
.case-cat { color: var(--c-sub); }
.case-card { box-shadow: none; border-color: var(--c-border); }
.case-card:hover { box-shadow: 0 2px 10px rgba(0, 56, 100, 0.10); }
.case-result { border-left-color: #FF5E00; }
.case-result .co { color: var(--c-sub); }
.case-result .metric { color: var(--c-main); }

/* =========================================================
 *  6. 導入の流れ
 * ========================================================= */
.flow-num { box-shadow: none; }

/* =========================================================
 *  7. お客様の声
 * ========================================================= */
.voice-quote::before { color: var(--c-sub-light); }
.voices-carousel .carousel-arrow {
  background: var(--c-sub);
  border-color: var(--c-sub-dark);
  box-shadow: none;
}
.voices-carousel .carousel-arrow:hover { background: var(--c-sub-dark); }

/* 開発事例カルーセルの矢印ボタンも同じ紺 + 白矢印に統一 */
.case-carousel .carousel-arrow {
  background: var(--c-sub);
  color: #fff;
  border-color: var(--c-sub-dark);
  box-shadow: none;
}
.case-carousel .carousel-arrow:hover { background: var(--c-sub-dark); }

/* =========================================================
 *  8. 価格
 * ========================================================= */
.price-amount-new, .price-headline .accent, .price-limit-note { color: var(--c-main); }
.price-row--new {
  background: linear-gradient(180deg, var(--c-main-bg-soft), var(--c-main-bg-soft-2));
  box-shadow: none;
}
.price-row--new .price-row-label { color: var(--c-main-dark); }
.price-amount-old { text-decoration-color: var(--c-main); }

/* =========================================================
 *  9. 残枠（希少性）— 参照元のフッター相当の濃紺ブロック
 * ========================================================= */
.scarcity { background: linear-gradient(168deg, #003864 0%, #002A4B 100%); }
.scarcity-alert {
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  box-shadow: none;
}
.scarcity-ribbon { background: #FF5E00; color: #fff; }
.scarcity-title { color: #fff; }
.scarcity-title .num, .scarcity-title .hot { color: #FF9A52; }
.slot { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.slot-cap { color: rgba(255, 255, 255, 0.92); }
/* 「毎月のご契約は〜」を文節（<wbr>）でのみ折り返す（末尾1字の孤立防止） */
.slot-cap { word-break: keep-all; overflow-wrap: anywhere; }
.slot-cap strong { color: #fff; }
.scarcity-body { color: rgba(255, 255, 255, 0.94); }
.scarcity-body .hot { color: #fff; }
.scarcity-alert .btn-note { color: rgba(255, 255, 255, 0.82); }

/* =========================================================
 *  10. 最終CTA（無料相談フォーム）— 参照元の CONTACT ブロック（中間の青）
 *      参照元そのままの #5295B4 だと白文字が 3.0:1 で本文サイズに足りないため、
 *      上端は参照元と同色にして下へ向けて暗くしている
 * ========================================================= */
#form { background: linear-gradient(168deg, #5295B4 0%, #47859F 45%, #3A6D88 100%); }
#form .section-title { color: #fff; }
/* eyebrow「無料相談」を外した分、見出しを一回り大きく */
#form .section-title--form-hero { font-size: clamp(2.3rem, 8.8vw, 3.6rem); }
#form .section-title .accent { color: #FFD0AE; }
#form .eyebrow { color: rgba(255, 255, 255, 0.86); }
#form .form-lead { color: rgba(255, 255, 255, 0.94); }
#form .form { box-shadow: none; }

/* =========================================================
 *  11. 例外: 選ばれる理由は元の字間を維持（改行位置の保全）
 *  参照元の字間 1.05px をスマホ幅でこのセクションに当てると、
 *  budoux の文節改行の位置が本番と変わり、行が短く割れて右側が
 *  大きく空く（本文が左に寄って見える）。見出しも「低価/格」と
 *  語中で割れる。このセクションだけ元の字間(0.015em)に戻し、
 *  本番と同じ配置・改行を保つ。
 * ========================================================= */
.reason-title, .reason-body { letter-spacing: 0.015em; }