@import "components/footer-n02khYd.css";
@import "components/header-MBXlf8K.css";
@import "cookie-consent--6CIBXa.css";

@font-face {
  font-family: "GT Flexa";
  src: url("../fonts/GT-Flexa-Compressed-Black.924ce594-FoVme0t.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter";
  src: url("../fonts/inter_regular.8c0fe73b-OALPGca.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "inter-bold";
  src: url("../fonts/inter_bold.1e3e4a31-UcBBc4t.ttf");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-black: #1f1f1f;
  --c-white: #fff;
  --c-beige: #eeede6;
  --c-light-grey: #c5c4be;
  --c-text: #434649;
  --c-red: #ff6633;

  --c-hoshi: #9242f5;
  --c-loki: #ff85fa;
  --c-jizo: #fff73f;

  --hs-bar-color-off: var(--c-white);
  --hs-bar-color-on:  var(--c-loki);
}

.bg-beige {
  background: var(--c-beige);
}

.bg-red {
  background: var(--c-red);
}

.bg-b {
  background: var(--c-black);
}

.bg-light-grey {
  background: var(--c-light-grey);
}

.bg-hoshi {
  background: var(--c-hoshi);
}

.bg-loki {
  background: var(--c-loki);
}

.bg-jizo {
  background: var(--c-jizo);
}

.bg-w {
  background: var(--c-white);
}

.font-black {
  color: var(--c-black);
}

.font-white {
  color: var(--c-white);
}

.font-hoshi {
  color: var(--c-hoshi);
}

.font-light-grey {
  color: var(--c-light-grey);
}

h1, h2, h3 {
  font-family: "GT Flexa", sans-serif;
}

h1 {
  font-size: clamp(2.5rem, 6vw + 1rem, 8.125rem);
}

h2 {
  font-size: clamp(2rem, 4vw + 1rem, 6.25rem);
}

p {
  line-height: 1.5;
  color: #434649;
  font-family: "inter", sans-serif;
}

.btn-jizo{
  height: 50px;
  padding: 0 32px;
  font-family: "GT Flexa", sans-serif;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.btn-jizo--yellow {
  background: var(--c-jizo);
  color: var(--c-black);
  border-color: transparent;
}

.btn-jizo--yellow:hover {
  background: var(--c-black);
  color: var(--c-white);
}

.btn-jizo--white{
  background: transparent;
  color: var(--c-black);
  border: 2px solid var(--c-black);
}

.btn-jizo--white:hover{
  background: var(--c-black);
  color: var(--c-white);
  border-color: var(--c-black);
}

.btn-jizo--black {
  background: var(--c-black);
  color: var(--c-white);
}

.btn-jizo--black:hover {
  background: var(--c-white);
  color: var(--c-black);
}

.hs-bar {
  width: 8px;
  height: 48px;
  display: inline-block;
  transform-origin: center center;
  animation: hs-bar-tilt 4s ease-in-out infinite;
  background-color: var(--hs-bar-color-off);
}

.hs-bar-4 {
  animation: hs-bar-alone 4s ease-in-out infinite;
}


@keyframes hs-bar-alone{
  0%, 30%, 100%{
    transform: rotate(0deg);
    background-color: var(--hs-bar-color-off);
  }
  55%, 70%{
    transform: rotate(45deg);
    background-color: var(--hs-bar-color-on);
  }
}

@keyframes hs-bar-tilt{
  0%, 30%, 100%{
    transform: rotate(-30deg);
    background-color: var(--hs-bar-color-off);
  }
  55%, 70%{
    transform: rotate(10deg);
    background-color: var(--hs-bar-color-on);
  }
}

.icon-square {
  width: 20px;
  height: 40px;
  flex: 0 0 auto;
  display: block;
}

.hs-section {
  position: relative;
}