/*
Theme Name: Warigai Bousui
Theme URI: https://warigai-bousui.example.com
Author: (制作者名を記載)
Author URI: https://warigai-bousui.example.com
Description: 株式会社割貝防水 コーポレートサイト用WordPressテーマ。塩ビシート防水を専門に、防水工事全般・シーリング・外壁塗装・塗床・足場・外構工事にも対応する防水工事会社のコーポレートサイト向けに作成。
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warigai-bousui
*/

/* ==========================================================================
   CSS変数定義
   デザイン変更時はこの:rootブロックの値を書き換えるだけで
   サイト全体のトンマナを一括変更できるようにする。
   トンマナ方針：「全体的に爽やかな印象」（クライアント確定の最重要方針）
   白基調＋明るい水色〜青系を基調とし、濃紺一色・グレー多用は避ける。
   ========================================================================== */
:root {
  /* --- カラー：白×水色〜青系（防水＝水を想起させる、爽やかな配色） --- */
  --color-primary: #14657d;      /* 見出し・ヘッダー等のメインカラー（重くなりすぎない深めの青） */
  --color-secondary: #eaf7fb;    /* セクション背景等のサブカラー（爽やかな薄い水色） */
  --color-accent: #17a6c9;       /* CTAボタン・リンク等のアクセントカラー（明るい水色） */
  --color-accent-dark: #0f88a8;  /* アクセントカラーのhover時の濃色 */
  --color-accent-light: #d7f3fa; /* 淡い水色（背景アクセント・バッジ等に使用） */
  --color-text: #333333;         /* 本文テキスト */
  --color-text-light: #6b7f85;   /* 補足テキスト・キャプション（青みがかったグレーで統一感を出す） */
  --color-white: #ffffff;
  --color-border: #d9edf2;       /* 罫線・区切り線（青みがかった薄いボーダー） */

  /* --- フォント：可読性が高くクセのないゴシック体（軽やかな印象を保つ） --- */
  --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* --- レイアウト --- */
  --content-max-width: 1200px;   /* コンテンツ最大幅 */
  --header-height: 80px;         /* ヘッダー高さ（固定ヘッダー用） */
  --section-padding-pc: 100px;   /* PC時のセクション上下余白（広めに取り清潔感を出す） */
  --section-padding-sp: 60px;    /* スマホ時のセクション上下余白 */
  --radius-base: 10px;           /* 角丸の基本値（硬すぎない印象のパーツに使用） */

  /* --- アニメーション --- */
  --transition-base: 0.3s ease;  /* hover等の基本トランジション速度 */
}

/* ==========================================================================
   リセット・共通ベーススタイル
   ========================================================================== */

/* ボックスサイズの計算方法を統一し、padding/borderがwidthに影響しないようにする */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ヘッダーのナビからのアンカーリンク移動をスムーズスクロールにする（ヘッダーから各セクションへ飛べるようにする対応） */
html {
  scroll-behavior: smooth;
}

/* ブラウザ標準のmargin/paddingを除去して余白のばらつきをなくす */
body,
h1, h2, h3, h4, h5, h6,
p,
ul,
ol,
figure {
  margin: 0;
  padding: 0;
}

/* ページ全体の基本フォント・行間・文字色を指定 */
body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-white);
}

/* リスト項目のマーカーを非表示にし、ナビ等で自由にレイアウトできるようにする */
ul,
ol {
  list-style: none;
}

/* 画像がコンテナ幅を超えないようにし、レスポンシブ対応を容易にする */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リンクの下線・色をリセットし、パーツごとに個別スタイルを当てやすくする */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}

/* コンテンツ幅を中央寄せで統一するための共通クラス */
.l-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* 各セクションの上下余白をPC/スマホで出し分ける共通クラス */
.l-section {
  padding: var(--section-padding-pc) 0;
}

@media (max-width: 767px) {
  .l-section {
    padding: var(--section-padding-sp) 0;
  }
}