/* =========================================================
   小さい CTA ボタン（ヘッダー・ドロワー用）
   .btn-mini--accent … オレンジ / .btn-mini--white … 白
   ---------------------------------------------------------
   --u：倍率つきの 1px。Figma（186×43）の寸法を「px値 × --u」で書き、
   大きさを変えたいときは --u だけを変える（高さ・文字・アイコン・角丸・影が同じ比率で変わる）。
   置き場所ごとの --u と幅は layout/header.css で指定
   ========================================================= */
.btn-mini {
  --u: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--u));
  width: 186px;
  height: calc(43 * var(--u));
  border-radius: calc(4.774 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 900;
  line-height: 1.7;
  white-space: nowrap;
  filter: drop-shadow(calc(1.91 * var(--u)) calc(1.91 * var(--u)) calc(.955 * var(--u)) rgba(0, 0, 0, .25));
  transition: transform .2s, opacity .2s;
}
.btn-mini:hover { transform: translateY(-2px); opacity: .92; }
.btn-mini__icon { width: calc(19.1 * var(--u)); height: calc(19.1 * var(--u)); }
.btn-mini__arrow { width: calc(16.23 * var(--u)); height: calc(16.23 * var(--u)); }
.btn-mini--accent { background: var(--accent); color: var(--bg); }
.btn-mini--white {
  background: var(--bg);
  color: var(--main);
  border: calc(2.387 * var(--u)) solid var(--bg);
}