/* =========================================================
 * base.css
 * リセット / デザイントークン / 共通タイポグラフィ / ユーティリティ
 * ========================================================= */

/* -------- Reset（modern-css-reset ベース） -------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"],
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

/* -------- デザイントークン -------- */
:root {
  /* Color */
  --color-text-black: #121212;     /* テキスト 黒 */
  --color-text-sub: #3F3B3A;       /* テキスト サブ / 背景 ダーク */
  --color-text-sub-light: #85827D; /* テキスト サブ薄 */
  --color-accent: #C0AF72;         /* テキスト アクセント */
  --color-bg-deep-beige: #D3BF7C;  /* 背景 濃ベージュ */
  --color-bg-beige: #F9F7F2;       /* 背景サブ ベージュ系 */
  --color-bg-beige-mid: #F6F3EB;   /* 背景サブ 中間ベージュ */
  --color-bg-beige-warm: #F2EDE2;  /* 背景サブ 暖ベージュ（代表挨拶） */
  --color-bg-blue-gray: #F0F2F5;   /* 背景サブ 青系（Blog/FAQ） */
  --color-blog-en: #C1AB05;        /* Blog英語ラベルの金 */
  --color-text-blog: #1F282F;      /* ブログカード文字色 */
  --color-bg-white: #FFFFFF;       /* 背景 ホワイト */
  --color-bg-dark: #3F3B3A;        /* 背景 ダーク */
  --color-navy: #00103E;           /* 見出し用の紺 / お問合せCTA */

  /* Typography */
  --font-en: "Lato", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* Layout */
  --container-max: 1024px;     /* 中央コンテンツ幅（PC） */
  --container-pad-pc: 208px;   /* 左右の余白（1440 - 1024 = 416 / 2 = 208） */
  --container-pad-sp: 16px;    /* SP の左右余白 */
  --header-h: 100px;

  /* Effect */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 16px rgba(18, 18, 18, 0.06);
  --transition-base: 0.2s ease;

  /* Z-index */
  --z-header: 100;
  --z-fixed-cta: 90;
}

/* -------- Body / Base typography -------- */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-jp);
  color: var(--color-text-black);
  background: var(--color-bg-white);
  line-height: 1.75;
  font-size: 16px;
  /* palt（約物・かなの字幅詰め）は使わない */
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 * Typography tokens（唯一の正・レスポンシブ）
 * モバイルをベース、@media(min-width:1025px) で PC へ。
 * これらが font-size / font-weight / line-height / letter-spacing の唯一の定義。
 * ★ページCSSでこれらの値を重複記述しないこと。arbitrary は例外のみ。
 * font-family は要素側（本文=既定 font-jp / 英字は .t-en を併用）。
 * ============================================================ */
.t-en { font-family: var(--font-en); }

/* ---- 見出し（Bold・letter-spacing .05em） ---- */
.t-h2, .t-h3, .t-h4, .t-h5, .t-h6 {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
/* SP → PC でサイズが変わる（コメントは SP→PC のサイズ） */
.t-h2 { font-size: 24px; }   /* 24 → 40（見出し） */
.t-h3 { font-size: 20px; }   /* 20 → 30 */
.t-h4 { font-size: 20px; }   /* 20 → 28 */
.t-h5 { font-size: 20px; }   /* 20 → 24（カード見出し: blog/faq） */
.t-h6 { font-size: 20px; }   /* 20 PC/SP同 */
.t-h2-bold { font-size: 24px; }  /* 24 → 32（サブ見出し用） */
@media (min-width: 1025px) {
  .t-h2 { font-size: 40px; }
  .t-h3 { font-size: 30px; }
  .t-h4 { font-size: 28px; }
  .t-h5 { font-size: 24px; }
  .t-h2-bold { font-size: 32px; }
}
.t-h2-bold { font-weight: 700; line-height: 1.4; letter-spacing: 0.05em; }

/* ---- 本文 text-*（Regular / Bold）: サイズ据置、line-height を PC で拡大 ---- */
.t-text-lg      { font-size: 18px; line-height: 28px; font-weight: 400; }
.t-text-lg-bold { font-size: 18px; line-height: 28px; font-weight: 700; }
.t-text-md      { font-size: 16px; line-height: 24px; font-weight: 400; }
.t-text-md-bold { font-size: 16px; line-height: 24px; font-weight: 700; }
.t-text-sm      { font-size: 14px; line-height: 24px; font-weight: 400; }
.t-text-sm-bold { font-size: 14px; line-height: 22px; font-weight: 700; }
@media (min-width: 1025px) {
  .t-text-lg, .t-text-lg-bold { line-height: 32px; }
  .t-text-md, .t-text-md-bold { line-height: 28px; }
  .t-text-sm-bold { line-height: 24px; }
}
/* PCでサイズが1段上がる要素用の上書き（例: 本文 SP14→PC16 = t-text-sm lg:t-text-md）。
 * sizeがSP→PCで変わるケースに、要素へ base + lg: の2クラスを付ける。 */
@media (min-width: 1025px) {
  .lg\:t-text-md      { font-size: 16px; line-height: 28px; font-weight: 400; }
  .lg\:t-text-md-bold { font-size: 16px; line-height: 28px; font-weight: 700; }
  .lg\:t-text-lg      { font-size: 18px; line-height: 32px; font-weight: 400; }
  .lg\:t-text-lg-bold { font-size: 18px; line-height: 32px; font-weight: 700; }
  .lg\:t-text-sm      { font-size: 14px; line-height: 24px; font-weight: 400; }
  .lg\:t-text-sm-bold { font-size: 14px; line-height: 24px; font-weight: 700; }
}

/* ---- メタ meta-*（日付・タグ等・Regular/Bold） ---- */
.t-meta-lg      { font-size: 14px; line-height: 24px; font-weight: 400; }
.t-meta-lg-bold { font-size: 14px; line-height: 24px; font-weight: 700; }  /* FAQ質問文（PC/SP同） */
.t-meta-md      { font-size: 12px; line-height: 22px; font-weight: 400; }
.t-meta-md-bold { font-size: 12px; line-height: 22px; font-weight: 700; }
.t-meta-sm      { font-size: 10px; line-height: 1.4; font-weight: 400; }

/* ---- 英字サブラベル（About Parbeacu 等: Lato Regular 14→16） ---- */
.t-label { font-family: var(--font-en); font-size: 14px; line-height: 1.75; font-weight: 400; letter-spacing: 0.08em; }
@media (min-width: 1025px) { .t-label { font-size: 16px; } }

/* -------- Layout -------- */
.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
}

@media (min-width: 1025px) {
  .l-container {
    padding-inline: 0;
  }
}

.l-section {
  padding-block: 80px;
}

@media (min-width: 1025px) {
  .l-section { padding-block: 120px; }
}

/* -------- Utility -------- */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.u-pc-only { display: none; }
.u-sp-only { display: initial; }

@media (min-width: 1025px) {
  .u-pc-only { display: initial; }
  .u-sp-only { display: none; }
}