/* ==========================================================================
   地球防衛隊サイト — base.css
   00-design-system.md の写経。カラートークン / タイポ / レイアウト土台。
   PC=1440基準・本文コンテナ1100 / SP=375基準・左右20px。
   ========================================================================== */

:root {
  --color-main:     #50694B; /* メイン: ブランド緑。英字見出し・サブ見出し・アクセント・CTA右 */
  --color-ink:      #373737; /* 黒: 本文・和文見出し・オーバーレイ(70%) */
  --color-sub:      #9E9B7C; /* サブ: CTA左・カテゴリチップ・区切り線・強調帯 */
  --color-bg-soft:  #EDEBE5; /* 背景薄: セクション背景・カード背景・生成り */
  --color-gray180:  #B4B4B4; /* チップ枠線・淡カード下地 */
  --color-gray245:  #F5F5F5; /* アクティブチップ背景・コラムカード(サービスページ) */
  --color-gray153:  #999999; /* SP開閉ボタン等 */
  --color-white:    #FFFFFF;
  --color-black:    #000000; /* 画像下地 */
  --color-required: #E43C23; /* 必須アスタリスク（お問い合わせ） */
  --divider-line:   #787878; /* フォーム枠線・工程ステップ区切り */
  --color-sub-hover:#787878; /* サブ色のホバー後（0831修正・相談ボックスの見本で実測） */
  --overlay-ink:    rgba(55, 55, 55, .70); /* #373737@70% 写真オーバーレイ・見出し帯 */
}

/* --------------------------------------------------------------------------
   2. タイポグラフィ（フォントスタック）
   -------------------------------------------------------------------------- */
:root {
  --font-jp:     "Yu Gothic Std", "YuGothic", "Yu Gothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  --font-body:   "Noto Sans JP", var(--font-jp);
  --font-en:     "Montserrat", sans-serif;   /* 見出し英字・数字（Bold/SemiBold/Medium） */
  --font-en-alt: "Mulish", sans-serif;       /* ラベル英字（ABOUT US / FIREPROOFING 等） */
  --font-logo:   "Noto Sans JP", sans-serif; /* ロゴ「地球防衛隊」Bold */
}

html { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-jp);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

/* --------------------------------------------------------------------------
   3. レイアウト土台
   本文コンテナ 1100px 中央寄せ。全幅帯は width:100% で背景、内側だけ 1100 に制約。
   中間(768〜1140)は流体縮小、SP(〜767)は左右20px。
   -------------------------------------------------------------------------- */
:root {
  --content-w: 1100px;
  --side-pad:  20px;
  --bp-sp:     767px; /* SP切替の基準 */
}

.l-inner {
  width: min(var(--content-w), 100% - (var(--side-pad) * 2));
  margin-inline: auto;
}

br.br--sp { display: none; }
@media (max-width: 767px) { br.br--sp { display: inline; } }

/* 全幅帯（背景を敷き、内側だけ 1100 に制約したいセクション） */
.l-fullbleed {
  width: 100%;
}

/* --------------------------------------------------------------------------
   4. タイポユーティリティ（タイプスケール table の写経）
   用途固有の細かい値は各コンポーネント／ページCSSで上書き。
   -------------------------------------------------------------------------- */
/* ページ英字ヒーロー（COLUMN / CONTACT / 404 / THANK YOU） */
.u-hero-en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: 6.4px;
}
/* セクション英字見出し（SERVICE / CASE / STRENGTHS / FAQ / INFORMATION） */
.u-sec-en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 4px;
}
/* セクション和文見出し（想定されるケース / 対応範囲 / 施工の流れ など・緑） */
.u-sec-jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 4.8px;
  color: var(--color-main);
}
/* サブ見出し（和・緑）／CTAリンク／詳しく見る */
.u-subhead {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1.6px;
  color: var(--color-main);
}
/* 本文（標準） */
.u-body {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1.6px;
}

/* --------------------------------------------------------------------------
   5. アクセシビリティ
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}