/* トイバコ ブランドオーバーレイ。Chatwoot のクラス名に乗せるだけ。本体は改変しない。 */
:root {
  --toybaco-navy: #1f3a5f;
  --toybaco-navy-deep: #163049;
  --toybaco-coral: #ff6b5b;
  --toybaco-offwhite: #faf7f2;
  --toybaco-ink: #24303f;
  --toybaco-muted: #6b7684;
  --blue-9: 31 58 95;
  --blue-10: 22 48 79;
  --blue-11: 31 58 95;
  --blue-12: 15 36 61;
  --background-color: 250 247 242;
}

html,
body,
#app {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic Medium", "Yu Gothic", Inter, sans-serif !important;
  color: var(--toybaco-ink);
}

.bg-woot-25 {
  background-color: var(--toybaco-offwhite) !important;
}

.bg-woot-500,
.bg-woot-600,
.bg-n-brand {
  background-color: var(--toybaco-navy) !important;
}

.hover\:bg-woot-600:hover,
button.bg-woot-500:hover,
a.bg-woot-500:hover {
  background-color: var(--toybaco-navy-deep) !important;
}

.text-woot-500,
.text-woot-600,
.text-n-brand {
  color: var(--toybaco-navy) !important;
}

.border-woot-500,
.ring-woot-500 {
  border-color: var(--toybaco-navy) !important;
}

input:focus,
textarea:focus,
select:focus {
  --tw-ring-color: var(--toybaco-coral) !important;
  outline-color: var(--toybaco-coral);
}

.tb-logo {
  height: 72px;
  width: auto;
}

.tb-lead {
  margin: 8px auto 0;
  max-width: 22em;
  color: var(--toybaco-muted);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  text-wrap: pretty;
}

.tb-submit {
  background-color: var(--toybaco-navy) !important;
}

.tb-submit:hover {
  background-color: var(--toybaco-navy-deep) !important;
}