/* =============================================================
   components/button.css
   ボタン全種（Figma 実測値）
   ============================================================= */

/* ─── 共通ベース ─── */
.btn {
  display: block;
  width: var(--btn-w);            /* 250px */
  border-radius: var(--btn-radius); /* 30px */
  padding: var(--btn-pad-y) var(--btn-pad-x);  /* 8px 30px */
  font-family: var(--font-btn);   /* Tenor Sans + Noto Sans JP */
  font-size: var(--text-btn);     /* 16px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-btn);     /* 24px */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

/* サンプル動画を見る（黄） */
.btn-sample {
  background: var(--color-btn-sample-bg);   /* #F3E769 */
  color: var(--color-btn-sample-text);      /* #000000 */
}

/* 購入はこちら（赤） */
.btn-buy {
  background: var(--color-btn-buy-bg);      /* #FF4E52 */
  color: var(--color-btn-buy-text);         /* #FCFCFC */
}

/* もっと見る / ランキング一覧を見る / トップに戻る */
.btn-back {
  background: var(--color-btn-back-bg);     /* #000000 */
  color: var(--color-btn-back-text);        /* #FFFFFF */
  margin-bottom: 20px;
}