@charset "UTF-8";

/* ==========================================================
   株式会社Willow ホームページ制作LP
   Figmaデザイン「HPチラシ-アウトライン」を再現
   ========================================================== */

/* ---------- 変数 ---------- */
:root {
  --navy: #002058; /* メインカラー（紺） */
  --red: #d61f26; /* 救急隊レッド（ロゴ・強調） */
  --orange: #f95b00; /* アクセント（オレンジ） */
  --marker: #fddf07; /* 蛍光マーカー（黄） */
  --badge-yellow: #fee991; /* 無料バッジの円（淡黄） */
  --line-green: #06c755; /* LINEグリーン */
  --link-yellow: #fbbb10; /* 「コチラから！」の黄 */
  --gray-box: #f5f5f5; /* お悩みボックスの背景 */
  --pale-blue: #e8f2fc; /* 淡い水色の帯 */
  --pale-warn: #fff2e8; /* 注意喚起セクションの帯（淡いオレンジ） */
  --footer-navy: #001536; /* フッターの濃紺 */
  --content-width: 1440px;
}

/* ---------- リセット・ベース ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul {
  list-style: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* 追従ヘッダーの高さ分 */
}

body {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 500;
  color: var(--navy);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* セクション共通の内側幅 */
.hero__inner,
.solution__inner,
.services__inner,
.service-menu__inner,
.area__inner,
.steps__inner,
.faq__inner,
.company__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================
   サイトヘッダー
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-top: 3px solid var(--red);
  box-shadow: 0 1px 8px rgba(0, 32, 88, 0.1);
}

.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ロゴマーク＋2行テキスト（救急隊・最短即日対応は赤） */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.site-header__logo-img {
  width: clamp(40px, 3.8vw, 52px);
  height: auto;
  flex-shrink: 0;
}

.site-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.site-header__logo-main {
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.site-header__logo-sub {
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  color: #5a6b85;
  letter-spacing: 0.04em;
}

.site-header__logo-main em,
.site-header__logo-sub em {
  font-style: normal;
  color: var(--red);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  margin-left: auto;
}

.site-header__nav a:not(.site-header__cta) {
  color: var(--navy);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s;
}

.site-header__nav a:not(.site-header__cta):hover {
  color: var(--orange);
}

/* ヘッダーのCTAボタン（LINE: 緑 / Web: 紺） */
.site-header__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 700;
  white-space: nowrap;
  padding: 9px clamp(12px, 1.6vw, 18px);
  border-radius: 8px;
  transition: opacity 0.2s;
}

.site-header__cta--line {
  background: var(--line-green);
}

.site-header__cta--web {
  background: var(--navy);
}

.site-header__cta:hover {
  opacity: 0.85;
}

/* ハンバーガーボタン（PCでは非表示。タブレット以下のスタイルはメディアクエリ内） */
.site-header__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
}

.site-header__menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition:
    transform 0.25s,
    opacity 0.25s;
}

/* メニューを開いているときは3本線を×印に変形させる */
.site-header__menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-header__menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- セクションタイトル（左右に罫線） ---------- */
.section-title {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  white-space: nowrap;
}

.section-title::before,
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--navy);
}

.section-title em {
  font-style: normal;
  color: var(--orange);
}

/* 濃色背景セクション用のタイトル */
.section-title--light {
  color: #fff;
}

.section-title--light::before,
.section-title--light::after {
  background: rgba(255, 255, 255, 0.6);
}

/* ---------- CTAボタン共通 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    opacity 0.15s;
}

.btn--form {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 6px 18px rgba(249, 91, 0, 0.4);
}

.btn--line {
  background: var(--line-green);
  color: #fff;
  box-shadow: 0 6px 18px rgba(6, 199, 85, 0.4);
}

.btn--navy {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 32, 88, 0.35);
}

/* 封筒アイコン（CTAボタン内で使用。文字色に追従して描画される） */
.mail-icon {
  width: 1.15em;
  height: auto;
  flex-shrink: 0;
}

.btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* 蛍光マーカー共通 */
mark {
  background: linear-gradient(transparent 55%, var(--marker) 55%);
  color: inherit;
  font-weight: inherit;
}

/* ==========================================================
   ファーストビュー
   ========================================================== */
.hero {
  position: relative;
  padding: clamp(36px, 5.4vw, 64px) 0 clamp(56px, 7vw, 104px);
  background: linear-gradient(160deg, #eef3fa 0%, #ffffff 55%);
  overflow: hidden;
}

.hero__inner {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.hero__content {
  flex: 0 1 780px;
  min-width: 0;
  padding-bottom: 8px;
  position: relative;
  z-index: 1;
}

/* 斜めの帯バッジ「埼玉・東京の」 */
.hero__ribbon {
  display: inline-block;
  transform: skewX(-12deg);
  background: linear-gradient(90deg, #0d2a56, #1a4a92);
  padding: 8px clamp(20px, 2.4vw, 32px);
  box-shadow: 0 3px 8px rgba(13, 42, 86, 0.2);
}

.hero__ribbon span {
  display: inline-block;
  transform: skewX(12deg);
  color: #fff;
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* 見出し（業務用エアコン=青 / すぐ=赤、2行目は大きく） */
.hero__title {
  margin-top: clamp(20px, 2.8vw, 36px);
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.hero__title em {
  font-style: normal;
}

.hero__title-blue {
  color: #1d55b3;
}

.hero__title-red {
  color: var(--red);
}

.hero__title-big {
  font-size: 1.3em;
  line-height: 1.15;
}

/* 4つの強みバッジ（円形アイコンの下にラベル） */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 36px);
  margin-top: clamp(24px, 3.4vw, 44px);
}

.hero__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero__badge-icon {
  width: clamp(56px, 5.6vw, 80px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* 円枠を持たない素材は青い円のラッパーで囲んでリング型に揃える
   （imgへの直接のborder＋paddingは環境により縁が欠けるため） */
.hero__badge-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 5.6vw, 80px);
  aspect-ratio: 1 / 1;
  border: 2px solid #0b29a1;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero__badge-ring img {
  width: 62%;
  height: auto;
}

.hero__badge span {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.hero__badge em {
  font-style: normal;
  color: var(--red);
}

/* ヒーロー内CTAボタン */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(24px, 3vw, 40px);
}

.hero__cta .btn {
  padding: clamp(14px, 1.6vw, 18px) clamp(22px, 2.8vw, 40px);
  font-size: clamp(15px, 1.6vw, 20px);
  border-radius: 10px;
}

/* メインビジュアル（セクション背景として右側に配置し、左端をなじませる） */
.hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46vw;
  max-width: 940px;
  overflow: hidden;
}

.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 34%);
}

/* ==========================================================
   選ばれる理由（白背景＋カード4枚）
   ========================================================== */
.solution {
  padding: clamp(48px, 6vw, 88px) 0;
  background: #fff;
}

/* 白文字＋紺の四角ボックスに載せたラベル型見出し（小見出し程度のサイズ） */
.solution__title {
  width: fit-content;
  margin: 0 auto;
  background: var(--navy);
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px clamp(24px, 3vw, 40px);
  text-align: center;
}

/* 見出しの代わりに主役となる大きめのテキスト（2行目は黒） */
.solution__lead {
  margin-top: clamp(20px, 2.8vw, 36px);
  text-align: center;
  color: #000;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.6;
}

/* 1行目は青字で少し大きく強調 */
.solution__lead-em {
  font-style: normal;
  color: #043da2;
  font-size: 1.15em;
}

/* PC: 左半分に写真、右半分にカード2×2 */
.solution__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  max-width: 1160px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
}

.solution__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.solution__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.solution__item {
  text-align: center;
  background: var(--gray-box);
  border-radius: 16px;
  padding: clamp(24px, 2.8vw, 36px) clamp(16px, 2vw, 24px);
}

.solution__icon {
  display: block;
  width: clamp(72px, 8.5vw, 112px);
  height: auto;
  margin: 0 auto;
}

.solution__item h3 {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.5;
}

/* ==========================================================
   サービス内容（淡い水色帯＋白カード2枚）
   ========================================================== */
.service-menu {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--pale-blue);
}

/* 白文字＋紺の四角ボックスに載せたラベル型見出し（選ばれる理由と同デザイン） */
.service-menu__title {
  width: fit-content;
  margin: 0 auto;
  background: var(--navy);
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px clamp(24px, 3vw, 40px);
  text-align: center;
}

/* ラベル型見出し共通: ボックスの左右に罫線を伸ばす */
.solution__title,
.service-menu__title,
.area__title,
.steps__title {
  position: relative;
}

.solution__title::before,
.solution__title::after,
.service-menu__title::before,
.service-menu__title::after,
.area__title::before,
.area__title::after,
.steps__title::before,
.steps__title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(40px, 9vw, 140px);
  height: 1px;
  background: var(--navy);
}

.solution__title::before,
.service-menu__title::before,
.area__title::before,
.steps__title::before {
  right: calc(100% + clamp(16px, 2.4vw, 28px));
}

.solution__title::after,
.service-menu__title::after,
.area__title::after,
.steps__title::after {
  left: calc(100% + clamp(16px, 2.4vw, 28px));
}

/* 目立つテキスト */
.service-menu__lead {
  margin-top: clamp(20px, 2.8vw, 36px);
  text-align: center;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.6;
}

.service-menu__text {
  margin-top: clamp(12px, 1.6vw, 20px);
  text-align: center;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.9;
}

/* カード2枚（PC: 横並び / スマホ: 縦積み） */
.service-menu__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  max-width: 1000px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
}

.service-menu__item {
  background: #fff;
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 8px 24px rgba(0, 32, 88, 0.12);
  text-align: center;
}

/* 写真（16:9で切り抜き） */
.service-menu__photo {
  aspect-ratio: 16 / 9;
  background: var(--gray-box);
  border-radius: 12px;
}

.service-menu__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* 見出し（左にアイコン、右にテキストの横並び） */
.service-menu__item h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 700;
}

.service-menu__badge {
  width: clamp(32px, 3.4vw, 44px);
  height: auto;
  flex-shrink: 0;
}

.service-menu__item > p {
  margin-top: 10px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.8;
}

/* 対応内容ボックス */
.service-menu__scope {
  margin-top: clamp(16px, 1.8vw, 24px);
  background: var(--gray-box);
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: clamp(16px, 1.8vw, 24px);
  text-align: left;
}

.service-menu__scope h4 {
  text-align: center;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
}

.service-menu__scope ul {
  margin-top: 10px;
}

.service-menu__scope li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;
  line-height: 1.7;
}

.service-menu__scope li + li {
  margin-top: 8px;
}

.service-menu__scope li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--navy);
  font-weight: 900;
}

/* ==========================================================
   対応エリア（白背景・地図＋ポイント3つ＋対象施設タグ）
   ========================================================== */
.area {
  padding: clamp(48px, 6vw, 88px) 0;
  background: #fff;
}

/* 白文字＋紺の四角ボックスに載せたラベル型見出し（他セクションと同デザイン） */
.area__title {
  width: fit-content;
  margin: 0 auto;
  background: var(--navy);
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px clamp(24px, 3vw, 40px);
  text-align: center;
}

/* 目立つテキスト */
.area__lead {
  margin-top: clamp(20px, 2.8vw, 36px);
  text-align: center;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.6;
}

/* リード文内の強調（赤文字） */
.area__lead-em {
  font-style: normal;
  color: #e60012;
}

.area__text {
  margin-top: clamp(12px, 1.6vw, 20px);
  text-align: center;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.9;
}

/* PC: 左2/3に地図、右1/3にポイントのリスト */
.area__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: center;
  max-width: 1000px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
}

/* 地図（縦長の透過PNGを4:3の枠内に収める） */
.area__map {
  aspect-ratio: 4 / 3;
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: clamp(12px, 1.6vw, 20px);
}

.area__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.area__points {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
}

.area__point {
  display: flex;
  align-items: center;
  gap: 14px;
}

.area__point-icon {
  width: clamp(48px, 4.6vw, 64px);
  height: auto;
  flex-shrink: 0;
}

.area__point-body h3 {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
}

.area__point-body p {
  margin-top: 4px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
}

/* 締めの一文（左にビルのアイコン） */
.area__catch {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  text-align: center;
  font-size: clamp(18px, 2.2vw, 27px);
  font-weight: 900;
  line-height: 1.6;
}

/* リング型アイコンと揃えた青い円のラッパーで囲む
   （imgへの直接のborder＋paddingは環境により縁が欠けるため） */
.area__catch-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 6.4vw, 84px);
  aspect-ratio: 1 / 1;
  border: 2px solid #0b29a1;
  border-radius: 50%;
  flex-shrink: 0;
}

.area__catch-ring img {
  width: 62%;
  height: auto;
}

/* 対象施設タグ */
.area__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(10px, 1.4vw, 16px);
  margin-top: clamp(16px, 2vw, 28px);
}

.area__tags li {
  background: var(--pale-blue);
  color: var(--navy);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  padding: 8px clamp(16px, 2vw, 24px);
  border-radius: 999px;
}

/* ==========================================================
   施工の流れ（淡い水色帯・数字付きステップカード4つ）
   ========================================================== */
.steps {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--pale-blue);
}

/* 白文字＋紺の四角ボックスに載せたラベル型見出し（他セクションと同デザイン） */
.steps__title {
  width: fit-content;
  margin: 0 auto;
  background: var(--navy);
  color: #fff;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px clamp(24px, 3vw, 40px);
  text-align: center;
}

/* 目立つテキスト */
.steps__lead {
  margin-top: clamp(20px, 2.8vw, 36px);
  text-align: center;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  line-height: 1.6;
}

/* ステップカード（PC: 1行5列 / タブレット・スマホ: 2列） */
.steps__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 行間ははみ出した番号バッジが上のカードと重ならない広さにする */
  gap: clamp(40px, 5vw, 56px) clamp(16px, 2vw, 28px);
  max-width: 1160px;
  margin: clamp(36px, 4.4vw, 56px) auto 0;
}

.steps__item {
  position: relative;
  background: #fff;
  border-radius: 16px;
  /* 上パディングは番号バッジの下半分＋余白のぶん広めに取る */
  padding: clamp(36px, 4vw, 52px) clamp(16px, 2vw, 24px)
    clamp(20px, 2.4vw, 32px);
  box-shadow: 0 8px 24px rgba(0, 32, 88, 0.12);
  text-align: center;
}

/* 番号は青い丸に白文字のバッジ型。上半分をカードの上端からはみ出させる */
.steps__num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 4.6vw, 64px);
  aspect-ratio: 1 / 1;
  background: #043da2;
  color: #fff;
  border-radius: 50%;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  line-height: 1;
}

/* ステップのアイコン画像（サイズの違う素材を同じ高さの枠に収める） */
.steps__photo {
  display: block;
  width: 100%;
  height: clamp(72px, 8.4vw, 116px);
  object-fit: contain;
  margin-top: clamp(12px, 1.4vw, 18px);
}

.steps__item h3 {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700;
  line-height: 1.5;
}

.steps__item p {
  margin-top: 8px;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.7;
}

/* セクション下部のメッセージ（横並び・背景付きボックス） */
.steps__notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  max-width: 1000px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
}

.steps__notes li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 22px);
  background: #fff;
  border-radius: 12px;
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2.4vw, 32px);
  text-align: center;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 700;
  line-height: 1.8;
}

/* 文章の左のチェックマーク（水色の円に白いチェック） */
.steps__notes li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  aspect-ratio: 1 / 1;
  background: #4aa8e0;
  color: #fff;
  border-radius: 50%;
  font-size: 1.1em;
  font-weight: 900;
  flex-shrink: 0;
}

/* ==========================================================
   こんなお悩み（紺帯＋白カード PC: 1行4列 / タブレット・スマホ: 2行2列）
   ========================================================== */
.services {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--navy);
}

.services__lead {
  margin-top: clamp(16px, 2.4vw, 28px);
  text-align: center;
  color: #fff;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  line-height: 1.8;
}

.services__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 1160px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
}

.services__item {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* 写真と、その下端に被せるアイコンの受け皿 */
.services__photo {
  position: relative;
  /* アイコンの下半分がはみ出す分の余白 */
  margin-bottom: clamp(24px, 2.6vw, 32px);
}

.services__icon {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}

/* アイコンの上半分が写真の下端に重なるように中央配置 */
.services__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: clamp(48px, 5.2vw, 64px);
  height: auto;
}

.services__item h3 {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: clamp(15px, 1.55vw, 19px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.services__item p {
  margin-top: 10px;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================
   2027年エアコン問題
   ========================================================== */
.notice {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--pale-warn);
}

.notice__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.notice__box {
  max-width: 1080px;
  margin: clamp(28px, 3.6vw, 44px) auto 0;
  background: #fff;
  border: 2px solid var(--orange);
  border-radius: 10px;
  padding: clamp(24px, 3.2vw, 40px) clamp(20px, 3vw, 48px);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  text-align: left;
}

.notice__texts {
  flex: 1;
  min-width: 0;
}

.notice__img {
  flex-shrink: 0;
  width: clamp(220px, 26vw, 340px);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}

.notice__text {
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 500;
  line-height: 2;
}

.notice__text + .notice__text {
  margin-top: 6px;
}

.notice__text strong {
  color: var(--orange);
}

/* ==========================================================
   よくある質問
   ========================================================== */
.faq {
  padding: clamp(48px, 6vw, 88px) 0;
  background: #fff;
}

.faq__list {
  max-width: 960px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
  display: grid;
  gap: 16px;
}

.faq__item {
  background: #f5f7fa;
  border-radius: 12px;
  padding: 4px clamp(18px, 2.4vw, 28px);
}

.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 40px 18px 0;
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "＋";
  position: absolute;
  right: 4px;
  color: var(--orange);
  font-size: 24px;
  font-weight: 700;
}

.faq__item[open] summary::after {
  content: "－";
}

.faq__q,
.faq__a-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  font-size: 17px;
}

.faq__q {
  background: var(--navy);
}

.faq__a-mark {
  background: var(--orange);
}

.faq__a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 2px 0 20px;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.9;
}

/* ==========================================================
   会社概要
   ========================================================== */
.company {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--pale-blue);
}

.company__box {
  max-width: 1100px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
  background: #fff;
  border-radius: 16px;
  padding: clamp(24px, 3.4vw, 48px);
  box-shadow: 0 10px 28px rgba(0, 32, 88, 0.12);
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.2vw, 48px);
}

/* 代表者プロフィール */
.company__rep {
  flex-shrink: 0;
  align-self: center;
  width: clamp(180px, 18vw, 230px);
  margin: 0;
  text-align: center;
}

.company__rep-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}

.company__rep-caption {
  margin-top: 12px;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
}

.company__rep-title {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: 2px;
}

.company__table {
  flex: 1;
  min-width: 0;
  border-collapse: collapse;
  width: 100%;
}

.company__table th,
.company__table td {
  text-align: left;
  padding: 16px 8px;
  border-bottom: 1px solid #dbe4ee;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  vertical-align: top;
}

.company__table tr:first-child th,
.company__table tr:first-child td {
  border-top: 1px solid #dbe4ee;
}

.company__table th {
  width: 8.5em;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================
   お問い合わせ（紺帯・LINE/Webのリンクカード2枚）
   ========================================================== */
.line {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--navy);
}

.line__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* 黄色の小見出し（左右にキラキラ） */
.line__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  color: var(--link-yellow);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

.line__title img {
  width: clamp(26px, 2.8vw, 40px);
  height: auto;
  flex-shrink: 0;
}

/* 大見出し（「今すぐ」だけ黄色） */
.line__lead {
  margin-top: clamp(16px, 2.2vw, 28px);
  text-align: center;
  color: #fff;
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 900;
  line-height: 1.5;
}

.line__lead-em {
  font-style: normal;
  color: var(--link-yellow);
}

.line__text {
  margin-top: clamp(12px, 1.6vw, 20px);
  text-align: center;
  color: #fff;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.9;
}

/* LINE・Webのリンクカード */
.line__channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 32px);
  max-width: 1160px;
  margin: clamp(28px, 3.6vw, 48px) auto 0;
}

.line__channel {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  background: var(--line-green);
  color: #fff;
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px);
  text-decoration: none;
  /* opacityはGSAPのフェードインと競合するためtransitionに含めない */
  transition: transform 0.15s;
}

.line__channel:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* Web問い合わせ側は白背景・紺文字 */
.line__channel--web {
  background: #fff;
  color: var(--navy);
}

/* 左端のアイコン（LINE公式ブランドアイコン・メール） */
.line__channel-icon {
  width: clamp(52px, 5vw, 68px);
  height: auto;
  flex-shrink: 0;
}

.line__channel-icon--mail {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--pale-blue);
  color: var(--navy);
  border-radius: 50%;
}

.line__channel-icon--mail svg {
  width: 55%;
  height: auto;
}

.line__channel-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  min-width: 0;
}

.line__channel-title {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 900;
}

.line__channel-text {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  line-height: 1.6;
}

/* LINEカード内のQRコード（緑背景でも読み取れるよう白枠付き） */
.line__channel-qr {
  display: block;
  margin-left: auto;
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  flex-shrink: 0;
}

.line__channel-qr img {
  display: block;
  width: clamp(68px, 6.6vw, 92px);
  height: auto;
}

.line__channel-arrow {
  margin-left: auto;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* QRがあるカードでは矢印はQRの隣に寄せる */
.line__channel-qr + .line__channel-arrow {
  margin-left: 0;
}

/* ==========================================================
   お問い合わせフォーム（紺帯＋白カード）
   ========================================================== */
.form {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--navy);
}

.form__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

.form__lead {
  margin-top: clamp(16px, 2vw, 24px);
  text-align: center;
  color: #fff;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
}

.form__box {
  max-width: 720px;
  margin: clamp(28px, 3.6vw, 44px) auto 0;
  background: #fff;
  border-radius: 16px;
  padding: clamp(24px, 3.4vw, 48px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.form__field + .form__field {
  margin-top: 20px;
}

.form__field label {
  display: block;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  margin-bottom: 8px;
}

.form__required {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: 1px;
}

.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--navy);
  background: #f7f9fc;
  border: 1px solid #c9d4e2;
  border-radius: 8px;
  padding: 12px 14px;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 0;
  border-color: var(--orange);
  background: #fff;
}

.form__field textarea {
  resize: vertical;
}

/* 送信前の同意文言（プライバシーポリシーへのリンク付き） */
.form__consent {
  margin-top: clamp(20px, 2.6vw, 28px);
  text-align: center;
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.8;
}

.form__consent a {
  color: #043da2;
}

.form__submit {
  display: flex;
  width: min(100%, 340px);
  margin: 28px auto 0;
  padding: 18px 24px;
  font-size: 19px;
}

/* ハニーポット（ボット対策）: 画面には表示しない */
.form__hp {
  display: none;
}

/* ==========================================================
   追従CTA
   ========================================================== */
.sticky-cta {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sticky-cta .btn {
  padding: 15px 28px;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ==========================================================
   サイトフッター
   ========================================================== */
.site-footer {
  background: var(--footer-navy);
  color: #fff;
}

.site-footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 36px 24px 28px;
  text-align: center;
}

.site-footer__logo-img {
  display: block;
  width: 60px;
  height: auto;
  margin: 0 auto 12px;
}

.site-footer__logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.site-footer__addr {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.85;
}

.site-footer__links {
  margin-top: 16px;
  font-size: 13px;
}

.site-footer__links a {
  color: inherit;
  opacity: 0.85;
}

.site-footer__links a:hover {
  opacity: 1;
}

.site-footer__copy {
  display: block;
  margin-top: 20px;
  font-size: 12px;
  opacity: 0.7;
}

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

/* タブレット */
@media (max-width: 960px) {
  /* ヘッダーはハンバーガーメニューに切り替え */
  .site-header__menu-btn {
    display: flex;
  }

  /* ナビはヘッダー直下に垂れ下がるドロワーにする（.is-open で表示）
     display の切り替えではアニメーションできないため、max-height と透明度で開閉する */
  .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    background: #fff;
    padding: 4px 24px 24px;
    box-shadow: 0 16px 24px rgba(0, 32, 88, 0.15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      visibility 0.35s;
  }

  .site-header__nav.is-open {
    max-height: 600px;
    opacity: 1;
    visibility: visible;
  }

  .site-header__nav a:not(.site-header__cta) {
    padding: 16px 4px;
    border-bottom: 1px solid #e3eaf3;
    font-size: 16px;
  }

  .site-header__nav .site-header__cta {
    margin-top: 12px;
    justify-content: center;
    padding: 14px;
  }

  /* バッジは折り返しを許可 */
  .hero__badges {
    flex-wrap: wrap;
  }

  /* 選ばれる理由はタブレット・スマホで縦積み（写真の下にカード2×2） */
  .solution__body {
    grid-template-columns: 1fr;
  }

  /* 対応エリアは縦積み（地図の下にポイントのリスト） */
  .area__body {
    grid-template-columns: 1fr;
  }

  /* ポイントは内容幅にして中央寄せ */
  .area__points {
    width: fit-content;
    margin: 0 auto;
  }

  .area__point {
    width: fit-content;
  }

  /* 施工の流れはタブレット・スマホで2列 */
  .steps__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5枚目（最後）のカードは全幅にして孤立させない */
  .steps__item:last-child {
    grid-column: 1 / -1;
  }

  /* お悩みカードはタブレット・スマホで2行2列 */
  .services__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* カード幅に合わせて見出しを縮小し、折り返しを防ぐ */
  .services__item h3 {
    font-size: clamp(13px, 3vw, 19px);
  }
}

/* スマートフォン */
@media (max-width: 680px) {
  /* 追従CTA分の余白を確保 */
  body {
    padding-bottom: 64px;
  }

  .hero__inner {
    flex-direction: column;
  }

  .hero__content {
    flex: none;
  }

  .hero__photo {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    max-width: none;
    height: 280px;
    min-height: 0;
    border-radius: 12px;
  }

  .hero__photo::after {
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 22%
    );
  }

  /* バッジは横並びのまま2段に折り返す */
  .hero__badges {
    gap: 16px 20px;
  }

  /* 長いセクションタイトルの折り返し防止 */
  .section-title {
    font-size: 18px;
    gap: 16px;
  }

  .notice .section-title {
    font-size: clamp(13px, 4.2vw, 16px);
  }

  /* 2027年問題ボックスは縦積み */
  .notice__box {
    flex-direction: column;
  }

  .notice__img {
    width: 100%;
  }

  /* 会社概要は縦積み */
  .company__box {
    flex-direction: column;
    align-items: stretch;
  }

  .company__rep {
    width: min(60%, 220px);
    margin: 0 auto;
  }

  /* お悩みカードは左右の余白を詰めて見出しのはみ出しを防ぐ */
  .services__item {
    padding: 16px 12px;
  }

  /* サービス内容カードは縦積み */
  .service-menu__list {
    grid-template-columns: 1fr;
  }

  /* 施工の流れ下部のメッセージは縦積み */
  .steps__notes {
    grid-template-columns: 1fr;
  }

  /* お問い合わせのLINE・Webカードは縦積み */
  .line__channels {
    grid-template-columns: 1fr;
  }

  /* スマホでは自分の画面のQRは読み取れないため非表示（タップで遷移） */
  .line__channel-qr {
    display: none;
  }

  /* ヒーローCTAは縦積みで全幅 */
  .hero__cta {
    flex-direction: column;
  }

  .hero__cta .btn {
    width: 100%;
  }

  /* 追従CTAは画面下部の全幅バー */
  .sticky-cta {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    gap: 0;
  }

  .sticky-cta .btn {
    flex: 1;
    border-radius: 0;
    padding: 16px 8px;
    font-size: 14px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  }
}