/* ==========================================================================
 * トップページ：メインコンセプトブロック
 * PDP リードに準拠した中央寄せレイアウト（Design Tokens 準拠）
 * ========================================================================== */

.front-concept {
  /* 72px 16px 80px → tokens 合成 */
  padding: calc(var(--space-16) + var(--space-2)) var(--container-gutter) var(--space-20);
  background: var(--c-bg);
}

.front-concept__inner {
  width: min(940px, 100% - (var(--container-gutter) * 2));
  margin-inline: auto;
  text-align: center;
}

/* 見出し：PDP の日本語 h2 に近いサイズ感 */
.front-concept__title {
  margin: 0 0 var(--space-6);                 /* 24px */
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); /* 28px〜32px */
  line-height: 1.6;
  font-weight: var(--fw-medium);              /* 500 */
  letter-spacing: .08em;
  color: var(--c-fg);
}

/* リード：細め＆行間広め */
.front-concept__lead {
  margin: 0;
  font-size: var(--fs-15);                    /* 15px */
  line-height: var(--lh-loose);               /* 1.8 */
  color: var(--c-fg-muted);
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
  .front-concept {
    /* 56px 16px 64px → tokens 合成 */
    padding: calc(var(--space-12) + var(--space-2)) var(--container-gutter) var(--space-8);
  }

  .front-concept__title {
    font-size: var(--fs-lg);                  /* 22px */
    line-height: var(--lh-base);              /* 1.7 */
    letter-spacing: .06em;
  }

  .front-concept__lead {
    font-size: var(--fs-14);                  /* 14px */
    line-height: var(--lh-loose);             /* 1.8 */
    text-align: left;                         /* 可読性優先 */
  }
}