/* =========================
  Base (Minimum Foundation)
  - tokens & layout utilities
========================= */

:root{
  /* Typography */
  --font-sans: "Noto Sans JP", system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.2;
  --lh-normal: 1.75;

  /* Colors */
  --c-text: #0f172a;
  --c-text-muted: rgba(15, 23, 42, 0.72);

  --c-primary: #0b4fa3;
  --c-primary-dark: #083f84;
  --c-danger: #b01717;
  --c-gold: #d2a21b;
  --c-brown: #5a4508;

  /* Layout */
  --max-wide: 1920px;
  --max-container: 980px;
  --max-container-wide: 1200px;
  --gutter: 20px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 14px 34px rgba(15, 23, 42, 0.08);
  --sh-md: 0 18px 44px rgba(15, 23, 42, 0.12);
  --sh-lg: 0 26px 70px rgba(15, 23, 42, 0.10);

  /* Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing */
  --section-py: 72px;
  --section-py-sp: 56px;

  /* Components */
  --badge-py: 10px;
  --badge-px: 18px;

  --rule-w: 46px;
  --rule-h: 3px;
}

/* =========================
  Font sizes (LP scale)
========================= */

/* Hero */
:root{
  --fs-hero-title: clamp(28px, 2.2vw + 19px, 48px);
  --fs-hero-lead: 16px;

  /* Section titles */
  --fs-section-title: clamp(20px, 2.18vw + 11.82px, 38px);

  /* Body */
  --fs-body: 16px;
  --fs-body-lg: 18px;

  /* Small text */
  --fs-small: 12px;
}

/* Typography */
body{
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-text);
}

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

.l-container{
  max-width: var(--max-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--wide{
  max-width: var(--max-container-wide);
  padding-inline: 24px;
  margin-inline: auto;
}

/* Utility */
.u-center{ text-align: center; }
/* util: 改行禁止 */
.u-nowrap{
  white-space: nowrap;
}
/* util: SP改行 */
.u-sp{ display: none; }
@media (max-width: 767px){
  .u-sp{ display: inline; }
}

/* In-view animation (initial only) */
.js-inview{
  opacity: 0;
  transform: translateY(16px);
}
.js-inview.is-inview{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* ==============================
   Page (common)
   ============================== */
.p-page{
  padding: 56px 0 80px;
}
.p-page__inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.p-page__head{
  margin: 0 0 22px;
}
.p-page__eyebrow{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}
.p-page__title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
}
.p-page__lead{
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  opacity: .85;
}

.p-page__back{
  margin-top: 22px;
}
.p-page__backLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  color: inherit;
}