@charset "UTF-8";
/* ==========================================================================
   base.css — reset / タイポ役割クラス / 共通部品
   class 命名は既存LP（buffmee）の流儀を踏襲：ケバブケースの役割名・BEM不使用・
   状態クラスは is- 接頭辞。
   ========================================================================== */

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-ja);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.48;
  letter-spacing: 0.04px;
  color: var(--content-base);
  background-color: var(--background-base);
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; margin: 0; padding: 0; }

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

a { color: var(--content-link); }

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

/* ---------- タイポ役割クラス ---------- */
.t-title-40m { font-weight: var(--fw-medium); font-size: 40px; line-height: 1.2;  letter-spacing: 0.1px; }
.t-title-28m { font-weight: var(--fw-medium); font-size: 28px; line-height: 1.2;  letter-spacing: 0.07px; }
.t-title-20m { font-weight: var(--fw-medium); font-size: 20px; line-height: 1.4;  letter-spacing: 0.05px; }
.t-title-20b { font-weight: var(--fw-bold);   font-size: 20px; line-height: 1.2;  letter-spacing: 0.05px; }
.t-title-16m { font-weight: var(--fw-medium); font-size: 16px; line-height: 1.4;  letter-spacing: 0.04px; }
.t-subtitle-14m { font-weight: var(--fw-medium); font-size: 14px; line-height: 1.2; letter-spacing: 0.035px; }
.t-body-16r  { font-weight: var(--fw-regular); font-size: 16px; line-height: 1.48; letter-spacing: 0.04px; }
.t-body-14r  { font-weight: var(--fw-regular); font-size: 14px; line-height: 1.48; letter-spacing: 0.035px; }
.t-label-16m { font-weight: var(--fw-medium); font-size: 16px; line-height: 1.14; letter-spacing: 0; }
.t-label-14m { font-weight: var(--fw-medium); font-size: 14px; line-height: 1.14; letter-spacing: 0; }
.t-label-12m { font-weight: var(--fw-medium); font-size: 12px; line-height: 1.14; letter-spacing: 0; }
.t-label-10m { font-weight: var(--fw-medium); font-size: 10px; line-height: 1.14; letter-spacing: 0; }
.t-note-12r  { font-weight: var(--fw-regular); font-size: 12px; line-height: 1.48; letter-spacing: 0.03px; }
.t-note-10r  { font-weight: var(--fw-regular); font-size: 10px; line-height: 1.48; letter-spacing: 0.025px; }

/* ---------- ページ骨格 ---------- */
.lp-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  background-color: var(--color-surface-base);
  overflow-x: clip;
}

.section {
  padding-block: var(--spacing-3xl) var(--spacing-4xl);
  padding-inline: var(--gutter);
}

.section-white { background-color: var(--surface-section); }
.section-beige { background-color: var(--surface-section-alt); }

/* セクション区切り */
.divider {
  display: block;
  height: 10px;
  border-block: var(--border-base) solid var(--border-divider);
  background-color: transparent;
}

/* ---------- 共通部品：ピル型ボタン（白地＋1px枠＋オフセット影） ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-s);
  min-height: var(--size-xl);
  min-width: var(--size-2xs);
  padding-inline: var(--spacing-l);
  border: var(--border-base) solid var(--color-text-main);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-base);
  box-shadow: var(--shadow-offset-m);
  color: var(--content-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-pill:hover {
  background-color: var(--color-surface-alt);
}

.btn-pill-s {
  min-height: var(--height-control-xs);
  padding: 10px var(--spacing-l);
  box-shadow: var(--shadow-offset-s);
}

/* ---------- 見出し下の点線装飾（4×4 の四角 ×4。CSS で再現） ---------- */
.heading-dots {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
}
.heading-dots::before,
.heading-dots::after {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--content-accent);
}

/* ---------- ステート ---------- */
@media (hover: hover) {
  .btn-pill:hover { transform: translate(1px, 1px); box-shadow: var(--shadow-offset-s); }
}
.btn-pill:active { transform: translate(4px, 4px); box-shadow: none; }

/* キーボード操作の可視性（WCAG 2.4.7） */
:focus-visible {
  outline: 3px solid var(--color-parts-primary);
  outline-offset: 2px;
}

/* タップ標的 ≥24×24px の両軸（WCAG 2.5.8）。インラインリンクは 2.5.8 のインライン例外 */
a, button, [role="button"], input, select, textarea {
  min-height: var(--size-2xs);
  min-width: var(--size-2xs);
}
/* 本文中のインラインリンクは例外（min-* はインライン要素に効かないため明示的に解除） */
a.is-inline-link { min-height: 0; min-width: 0; }

/* スキップリンク。フォーカス時だけ見えるようにする（未フォーカス時にレイアウトを押し下げない） */
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  padding: var(--spacing-s) var(--spacing-l);
  background-color: var(--color-surface-base);
  color: var(--content-base);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- ユーティリティ ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sp-only { display: block; }
.pc-only { display: none; }

body { background-color: var(--background-outer); }

@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: block; }
}

/* ---------- モーション ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}