/* =========================================
   Design Tokens + Base + Typography
   ========================================= */

:root{
  /* Colors */
  --c-white: #FFFFFF;
  --c-gray-50: #FAFAFA;
  --c-light-blue: #F7FBFE;
  --c-sky-50: #E6F2FA;
  --c-beige: #F6F2ED;

  --c-blue: #4A7FA7;
  --c-text: #333333;
  --c-muted: #666666;

  --c-line: #06C755;
  --c-line-shadow: #02963F;
  --c-accent: #FF5A5F;

  /* Fonts */
  --ff-sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-serif: "Noto Serif JP", "Noto Sans JP", serif;
  --ff-en: "Montserrat", system-ui, sans-serif;

  /* Base type */
  --fs-base: 16px;
  --lh-base: 1.75;

  /* UI */
  --radius: 10px;

  /* Header tokens（値だけ。挙動/構造はcomponentsへ） */
  --header-height-pc: 100px;
  --header-height-sp: 70px;

  --header-bg-solid: rgba(255,255,255,.88);
  --header-shadow: 0 1px 0 rgba(0,0,0,.06);

  --overlay-blue: rgba(74,127,167,.58);
  --drawer-shadow: -18px 0 40px rgba(0,0,0,.18);

  --menu-btn-size-pc: 80px;
  --menu-btn-size-sp: 50px;
}

/* =========================================
   Base
   ========================================= */

body{
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-white);
}

a{
  color: var(--c-blue);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

p{
  margin: 0 0 1em;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-muted);
}

h1,h2,h3,h4{
  margin: 0 0 0.6em;
  font-family: var(--ff-serif);
  font-weight: 600;
  color: var(--c-text);
}

small{ color: var(--c-muted); }

/* =========================================
   Utilities
   ========================================= */

.u-en{
  font-family: var(--ff-en);
  letter-spacing: 0.02em;
}

.is-muted{ color: var(--c-muted); }
.is-blue{ color: var(--c-blue); }
.is-white{ color: #FFFFFF; }

/* =========================================
   Typography Rules
   （コンポーネントに依存しない“文字ルール”だけ）
   ========================================= */

/* h1 - TOP */
.top h1,
.top .page-title--top{
  color: var(--c-blue);
  font-family: var(--ff-serif);
  font-size: 40px;
  line-height: 1.5;
}

/* h1 - lower pages */
.page h1,
.page .page-title{
  color: var(--c-blue);
  font-family: var(--ff-serif);
  font-size: 36px;
  line-height: 1.8;
}

/* h3 */
h3,
.heading-h3{
  font-family: var(--ff-serif);
  color: var(--c-text);
  font-size: 24px;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* =========================================
   Responsive (SP)
   ※レスポは1箇所に集約
   ========================================= */

@media (max-width: 767px){

  /* h1 - TOP */
  .top h1,
  .top .page-title--top{
    font-size: 28px;
    line-height: 1.8;
  }

  /* h1 - lower pages */
  .page h1,
  .page .page-title{
    font-size: 28px;
    line-height: 1.8;
  }

  /* h3 */
  h3,
  .heading-h3{
    font-size: 22px;
  }
}