@charset "UTF-8";
/* ==========================================================================
   コーディングルール / デザイントークン
   --------------------------------------------------------------------------
   - rem 基準は 10px（html { font-size: 62.5% }）。 1.6rem = 16px
   - 余白・サイズは 8 の倍数を基本に統一
   - 値を変えるときは上（:root）だけ触れば全体に反映される
   ========================================================================== */

:root {
  /* --- レイアウト幅 ------------------------------------------------------ */
  --site-width: 1400px;   /* サイト全体の最大幅 */
  --inner-width: 1100px;  /* コンテンツ（インナー）の最大幅 */
  --gutter: 24px;         /* 画面端の最小余白（SPで端に文字がくっつくのを防ぐ） */

  /* --- 余白（スペーシング） --------------------------------------------- */
  --space-section: 80px;  /* セクション毎の余白 */
  --space-content: 40px;  /* セクション内コンテンツ間の余白 */
  --space-list: 20px;     /* li 等のリスト要素の gap */
  /* 補助・細かい調整で使う想定（8の倍数で刻む） */
  --space-2xs: 8px;
  --space-xs: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 48px;
  --space-xl: 64px;

  /* --- フォントサイズ ---------------------------------------------------- */
  /* clamp(最小, 可変, 最大) で中間幅でも崩れないようにしてある。
     可変が不要なら 2つ目の値を消して固定値にしてもOK。 */
  --fs-title: clamp(2.4rem, 2.1rem + 0.8vw, 3.2rem); /* FV以外のタイトル 32px〜24px */
  --fs-heading: clamp(2.0rem, 1.8rem + 0.5vw, 2.4rem); /* 見出し 24px〜20px */
  --fs-text: 1.6rem;   /* 本文・その他テキスト 16px */
  --fs-small: 1.4rem;  /* 注釈・キャプション 14px */
  /* FV のタイトルはデザイン毎に振り幅が大きいので個別指定推奨（例: 4.8rem） */
  --fs-fv-title: clamp(3.2rem, 2.4rem + 2.4vw, 5.6rem);

  /* --- 行間・字間（日本語向けに少し広め） -------------------------------- */
  --lh-tight: 1.4;   /* 見出し用 */
  --lh-base: 1.8;    /* 本文用 */
  --ls-base: 0.04em; /* 標準の字間 */

  /* --- フォントファミリー ------------------------------------------------ */
  --font-base: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Inter", var(--font-base); /* 英字・数字を別フォントにしたい場合 */

  /* --- カラー ------------------------------------------------------------ */
  --c-main: #1a1a2e;    /* メイン（ブランド色） */
  --c-accent: #e94560;  /* アクセント（CTA・リンク等） */
  --c-text: #333333;    /* 本文テキスト */
  --c-text-weak: #777777; /* 補助テキスト */
  --c-bg: #ffffff;      /* 背景 */
  --c-bg-sub: #f5f5f7;  /* セクション交互の背景など */
  --c-border: #e0e0e0;  /* 罫線・区切り */

  /* --- 装飾 -------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --transition: 0.3s ease; /* ホバー等の標準トランジション */

  /* --- z-index（段階を決めておくと衝突しない） --------------------------- */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* --- ブレイクポイント（参考値・CSS変数はメディアクエリ条件には使えない）-- */
  /* SP: 768px 以下 / TB: 1024px 以下 を想定 */
}

/* ==========================================================================
   ブレイクポイント別の上書き
   余白・幅など数値そのものが変わるものはここで変数を上書きする。
   フォントは clamp で可変にしてあるので基本ここでは触らない。
   ========================================================================== */

/* タブレット（〜1024px） */
@media (max-width: 1024px) {
  :root {
    --space-section: 64px;
    --space-content: 32px;
  }
}

/* スマホ（〜768px） */
@media (max-width: 768px) {
  :root {
    --space-section: 48px;
    --space-content: 24px;
    --space-list: 16px;
    --gutter: 16px;
  }
}

/* ==========================================================================
   ベース（リセット）展開設定
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* → rem を 10px 基準にするためのルール */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-text);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition);
}
a:hover {
  opacity: 0.7;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* 見出し系の展開設定（サイズは上のユーティリティ or 個別で指定） */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
}

/* キーボード操作時のフォーカスを見やすく（アクセシビリティ対応ライン） */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* アニメーション減らす設定の人に配慮 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   レイアウト用ユーティリティ
   ========================================================================== */

/* サイト全体のラッパー（最大幅 1400px・中央寄せ・端に余白） */
.l-site {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* インナー（最大幅 1100px・中央寄せ）。.l-site の中で使う想定 */
.l-inner {
  width: 100%;
  max-width: var(--inner-width);
  margin-inline: auto;
}

/* セクションに上下に section 余白をつける。
   ※ margin ではなく padding に統一しておくと、隣接セクションで余白が
     相殺・打ち消しされる事故が起きない（重要）。 */
.l-section {
  padding-block: var(--space-section);
}

/* セクション内のコンテンツを縦に積むときの間隔 */
.l-stack > * + * {
  margin-top: var(--space-content);
}

/* リスト（li の gap = 20px） */
.l-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-list);
}

/* ==========================================================================
   テキスト用ユーティリティ（必要に応じて使う）
   ========================================================================== */

.t-title   { font-size: var(--fs-title); }
.t-heading { font-size: var(--fs-heading); }
.t-text    { font-size: var(--fs-text); }
.t-small   { font-size: var(--fs-small); color: var(--c-text-weak); }
.t-fv      { font-size: var(--fs-fv-title); }