@charset "utf-8";

/* ==========================================================================
   base.css — サイト全体の土台
   色・文字・共通パーツをここにまとめています。
   「色を変えたい」「文字を大きくしたい」ときは、まずこのファイルを見てください。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 色と文字の設定（ここを変えるとサイト全体に反映されます）
   -------------------------------------------------------------------------- */
:root {
  /* 色 */
  --bg:          #FBFBFC;  /* 背景（オフホワイト） */
  --ink:         #16233A;  /* 文字（濃紺） */
  --green:       #1E3B32;  /* ボタン・リンク（深緑） */
  --red:         #D0342C;  /* アクセント（赤） */
  --line:        #E3EAF0;  /* 薄い罫線・方眼 */
  --gray:        #5A6A80;  /* 補足テキスト */
  --hover-bg:    #F2F5F8;  /* カードにマウスを乗せたときの背景 */

  /* 濃緑セクション（お問い合わせ）の中で使う色 */
  --on-green-line: #3B584E;
  --on-green-text: #D9E2DD;
  --on-green-mute: #9FB3AA;

  /* フォント */
  --font-body: "Noto Sans JP", sans-serif;          /* 本文 */
  --font-head: "Zen Kaku Gothic New", sans-serif;   /* 見出し */
  --font-mono: "JetBrains Mono", monospace;         /* 英数字・ラベル */

  /* レイアウト */
  --container: 1080px;  /* コンテンツの最大幅 */
  --pad-x: 24px;        /* 左右の余白 */

  /* 記事カード（記録）の背景の濃さ。0 = 透明 〜 1 = そのまま表示
     写真を濃くしすぎると、上に乗っている文字が読みにくくなります。
     0.5 が、写真がはっきり見えて文字も読める上限の目安です。 */
  --post-photo-opacity:  0.5;   /* 写真（右上側） */
  --post-stripe-opacity: 0.3;   /* 斜線（左下側） */
}


/* --------------------------------------------------------------------------
   2. リセット（ブラウザごとの初期スタイルの差をならす）
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;  /* メニューをクリックしたときになめらかに移動 */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------------------------------------------------
   3. リンク
   -------------------------------------------------------------------------- */
a {
  color: var(--green);
  text-decoration: none;
}

a:hover {
  color: var(--red);
}


/* --------------------------------------------------------------------------
   4. 共通のレイアウト部品
   -------------------------------------------------------------------------- */

/* 中央寄せの箱（横幅1080pxまで） */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* セクションの上下の余白 */
.section-inner {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* 背景を白で塗るセクション（方眼を隠す） */
.section-white {
  background: var(--bg);
}

/* 上に境界線を引くセクション */
.section-bordered {
  border-top: 1px solid var(--ink);
}


/* --------------------------------------------------------------------------
   5. 共通の見出し部品
   -------------------------------------------------------------------------- */

/* 「01  INSPECTION SHEET ───────」の行 */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

/* --- セクション番号は CSS が自動で振ります ---
   HTML 側は <span class="section-label__num"></span> と空にしておけば、
   上から順に 01, 02, 03… と番号が入ります。
   セクションを追加・削除・並べ替えしても、自動で振り直されるので
   HTML の数字を直す必要はありません。 */
.page {
  counter-reset: section;   /* ページの先頭で 0 に戻す */
}

.section-label__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--green);
  color: var(--bg);
  padding: 4px 8px;
}

.section-label__num::before {
  counter-increment: section;                        /* 1つ進める */
  content: counter(section, decimal-leading-zero);   /* 1桁のときは 01 と0埋め */
}

.section-label__en {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.08em;
}

.section-label__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--ink);
}

/* 濃緑セクションの中で使う配色違い */
.section-label--dark .section-label__num { background: var(--bg); color: var(--green); }
.section-label--dark .section-label__en  { color: var(--on-green-mute); }
.section-label--dark .section-label__line { background: var(--on-green-line); }

/* 大見出し（h2） */
.section-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.05em;
  display: inline-block;
  margin-bottom: 16px;
}

.section-title--mb   { margin-bottom: 36px; }  /* 下に余白をとる場合 */
.section-title--sm   { margin-bottom: 10px; }  /* 下の余白が小さい場合 */
/* 濃緑の上に置く場合
   字間を -0.05em → -0.02em に戻しています。
   白い文字は濃い背景の上でわずかに太って見えるため、
   同じ字間でも黒い文字より詰まって読めるためです。 */
.section-title--light {
  color: var(--bg);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* 見出しの右にメタ情報を並べる行 */
.section-head .section-title { margin-bottom: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.section-head__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray);
}

/* セクション冒頭の説明文 */
.lead {
  font-size: 14px;
  line-height: 2;
  max-width: 52em;
  margin-bottom: 36px;
}

.lead--tight { margin-bottom: 32px; max-width: none; }
.lead--flush { margin-bottom: 0; max-width: 44em; }


/* --------------------------------------------------------------------------
   6. 共通のボタン
   -------------------------------------------------------------------------- */

/* ヘッダー右上の小さいボタン */
.btn-cta {
  background: var(--green);
  color: var(--bg);
  padding: 10px 18px;
  font-weight: 700;
}
/* 「無料相談」のボタンは、ホバーで背景がアクセント色（赤）に変わります */
.btn-cta:hover { background: var(--red); color: var(--bg); }

/* ヒーローの大きいボタン */
.btn-primary {
  background: var(--green);
  color: var(--bg);
  padding: 16px 32px;
  font-weight: 700;
  font-size: 15px;
}
.btn-primary:hover { background: var(--red); color: var(--bg); }

/* 下線だけのテキストリンク */
.btn-text {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  padding-bottom: 2px;
  font-size: 14px;
}
.btn-text:hover { color: var(--red); border-bottom-color: var(--red); }


/* --------------------------------------------------------------------------
   7. 共通の小さい部品
   -------------------------------------------------------------------------- */

/* 数字のあとの「件」「位」など */
.unit      { font-size: 18px; font-weight: 500; }
.unit--sm  { font-size: 14px; font-weight: 500; }

/* 赤文字 */
.text-alert { color: var(--red); }

/* 状態マーク（● 設定済 / ▲ 改善中 / ○ 未着手） */
.mark--done { color: var(--green); }
.mark--wip  { color: var(--ink); }
.mark--todo { color: var(--red); }


/* --------------------------------------------------------------------------
   8. 表（テーブル）の共通スタイル
   -------------------------------------------------------------------------- */

/* 画面が狭いとき、表だけ横スクロールさせる入れ物 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 640px;   /* これ以下に縮むと横スクロールになる */
  border-collapse: collapse;
  border: 1px solid var(--ink);
  background: var(--bg);
}

/* 見出し行 */
.data-table thead tr {
  background: var(--green);
  color: var(--bg);
  text-align: left;
}

.data-table th {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

/* 本体行 */
.data-table tbody tr {
  border-bottom: 1px solid var(--line);
}

.data-table tbody tr:last-child {
  border-bottom: 0;
}

.data-table td {
  padding: 13px 16px;
}

/* 余白の調整用 */
.block-mb-sm { margin-bottom: 24px; }
.block-mb-md { margin-bottom: 40px; }
.block-mb-lg { margin-bottom: 56px; }