/* ============================================================
   base.css — リセット・CSS変数・全体共通の基本スタイル
   ============================================================ */

:root{
  --navy:#0c1b3a;
  --blue:#2f6fed;
  --blue-light:#5fa8ff;
  --purple:#6a5cf2;
  --sky-bg:#eef4fc;
  --green:#1a8f4c;
  --text-main:#16213e;
  --text-sub:#5b6477;
  --white:#ffffff;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:8px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:18px;
  color:var(--text-main);
  background:var(--white);
  line-height:1.75;
  overflow-x:hidden;
}

a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}

.container{max-width:1100px; margin:0 auto; padding:0 24px;}

/* ---------- Section generic ---------- */
section{padding:96px 24px;}
.section-tinted{background:var(--sky-bg);}
.eyebrow{
  display:block; text-align:center;
  font-size:16px; font-weight:800; letter-spacing:0.18em;
  color:var(--blue); margin-bottom:20px;
}
h2.section-title{
  text-align:center;
  font-size:clamp(34px, 4vw, 46px);
  font-weight:900;
  margin-bottom:24px;
  letter-spacing:0.02em;
}
.section-lead{
  text-align:center; max-width:650px; margin:0 auto 70px;
  color:var(--text-sub); font-size:18px;
}

/* ---------- Responsive (shared) ---------- */
@media(max-width:880px){
  section{padding:64px 20px;}
}