/* ============================================================
   base.css — サイト全体の土台
   ------------------------------------------------------------
   全ページで最初に読み込まれるファイル。
   色・フォント・共通ボタンなど「どのページにも出るもの」だけを置きます。
   ページ固有のスタイルは assets/css/pages/ に分けてあるので、
   ここに個別ページ用のCSSを足さないでください。
   （旧サイトで全ページのCSSが1か所に積み上がったのが不具合の原因でした）
   ============================================================ */

/* ------------------------------------------------------------
   1. 色とサイズの定義（★ブランドカラーを変えるならここ）
   ---------------------------------------------------------- */
:root {
  --main:       #057bc0;   /* ブランドの青 */
  --main-light: #e8f4fb;   /* 薄い青（背景用） */
  --sub:        #fbee2e;   /* アクセントの黄 */
  --dark:       #1a1a1a;   /* 本文の文字色 */
  --cta:        #06C755;   /* LINEの緑 */
  --navy:       #0a1a2e;   /* フッター・スティッキーの紺 */

  --muted:      #6b7b88;   /* 補足テキスト */
  --line:       #e6edf3;   /* 罫線 */

  --wrap:       1100px;    /* 本文の最大幅 */
  --sticky-h:   60px;      /* スティッキーフッターの高さ */
}

/* ------------------------------------------------------------
   2. リセット
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  color: var(--dark);
  background: #fff;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* 下部のスティッキーバーに隠れないための余白 */
  padding-bottom: var(--sticky-h);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; }

/* キーボード操作の人にだけ、はっきりしたフォーカス枠を出す */
:focus-visible {
  outline: 3px solid var(--main);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 動きを減らす設定の人には、アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------
   3. セクション共通
   ---------------------------------------------------------- */
.section { padding: 90px 24px; }
.section-inner { max-width: var(--wrap); margin: 0 auto; }

.section-label {
  font-size: 13px; font-weight: 700; letter-spacing: .25em;
  color: var(--main); text-align: center; margin-bottom: 16px;
}
.section-title {
  font-size: clamp(26px, 4vw, 44px); font-weight: 900;
  text-align: center; line-height: 1.3; margin-bottom: 60px;
  text-wrap: balance;
}
.section-title .blue { color: var(--main); }

/* 見出しの上に置く小さなラベル（PHILOSOPHY — 指導方針 など）
   ヒーローの中では色が変わります（components/hero.css） */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--main);
  margin: 0 0 16px;
}

/* ------------------------------------------------------------
   4. 共通ボタン
   ---------------------------------------------------------- */
.btn-outline,
.btn-filled,
.btn-small {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50px; text-decoration: none;
  font-weight: 700; letter-spacing: .04em;
  transition: background .2s, color .2s, opacity .2s, transform .2s;
}

.btn-outline {
  padding: 14px 32px; font-size: 15px;
  border: 2px solid var(--main); color: var(--main); background: #fff;
}
.btn-outline:hover { background: var(--main); color: #fff; transform: translateY(-2px); }

.btn-filled {
  padding: 14px 40px; font-size: 15px;
  background: var(--main); color: #fff; border: 2px solid var(--main);
}
.btn-filled:hover { opacity: .88; transform: translateY(-2px); }

.btn-small {
  padding: 10px 24px; font-size: 13px;
  border: 2px solid var(--main); color: var(--main); background: #fff;
}
.btn-small:hover { background: var(--main); color: #fff; }

/* LINEボタン（緑）はヘッダー・フッター側で個別に定義しています */
.line-icon { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }

/* ------------------------------------------------------------
   5. スクロールで出てくる演出
   ---------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* JSが動かなかったときに中身が消えたままにならないよう、
   既定は「見えている」状態。JSが .anim-ready を付けてから隠します。 */
.anim-ready { opacity: 0; }
/* ★速さの調整はここ。短すぎると、目を向けたときには動き終わっています。 */
.anim-ready.visible { animation: fadeUp 1.05s cubic-bezier(.22, .61, .36, 1) forwards; }

/* ------------------------------------------------------------
   6. レスポンシブ
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .section { padding: 60px 20px; }
  .section-title { margin-bottom: 40px; }
}