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

/* --------------------------------------------------------------------------
   1. カラートークン（Figma公式命名＝唯一の正）
   -------------------------------------------------------------------------- */
: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;
  /* 本文用: Figmaは游ゴシックStd デミボールド(中間の太さ)だが、Windows游ゴシックは400/700しか無く中間が出せない。
     Noto Sans JP(Webフォント・500/600の実ウェイト)で全端末に中間太さを配信する。 */
  --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 */
}

/* スマホでリンクやボタンを押した瞬間に出る「薄い青の四角」を消す（2026-08-23 前田社長指示）。
   ロゴ・ハンバーガー・ナビ・カードなど全部が対象なので html に一括で当てる。
   ※ キーボード操作のフォーカス表示（:focus-visible の outline）は消していない。 */
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;
}

/* SPでだけ効かせる改行。Figmaの書き出しがPC用とSP用で改行位置を変えている箇所に使う。
   display:none の <br> は改行しない＝PCでは無かったことになる。 */
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;
  }
}