@charset 'UTF-8';
/* ========================================================================
/*
/* splash
/*
========================================================================= */


/* Base
--------------------------------------------------------- */
:root {
  box-sizing: border-box;

  touch-action: manipulation;
  --icon-mail: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 23"><path d="m31,2.04l-9.93,8.61,10.14,10c.49-.77.78-1.68.78-2.65V5c0-1.11-.38-2.13-1-2.96Z"/><path d="m29.5.7c-.74-.43-1.59-.7-2.5-.7H5c-1,0-1.93.3-2.72.82l13.46,11.82L29.5.7Z"/><path d="m16.4,14.71c-.19.16-.42.24-.66.24s-.47-.08-.66-.25l-2.86-2.51L2.25,22.16c.79.53,1.74.84,2.75.84h22c1.05,0,2.03-.34,2.84-.9l-10.28-10.13-3.16,2.74Z"/><path d="m.85,2.22c-.54.8-.85,1.75-.85,2.78v13c0,1.02.31,1.96.84,2.75l9.88-9.88L.85,2.22Z"/></svg>');
  --icon-phone: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.85 30.87"><path d="m29.28,22.13l-3.93-2.12c-.96-.52-1.7-.14-2.53.99-1.81,2.49-2.69,2.98-4.91,1.74-2.07-1.16-3.56-2.53-5.42-4.39-1.86-1.86-3.24-3.34-4.39-5.42-1.24-2.22-.75-3.1,1.74-4.91,1.13-.82,1.51-1.57.99-2.53l-2.12-3.93C7.85-.1,6.63-.29,4.81.32,2.31,1.17-.12,4.79,0,6.5c.36,5.02,2.87,11.04,8.1,16.27,5.23,5.23,11.25,7.74,16.27,8.1,1.72.12,5.31-2.32,6.16-4.83.61-1.82.42-3.04-1.25-3.91Z"/><path d="m17.52,6.99c-.83,0-1.49.68-1.49,1.51,0,.82.68,1.49,1.5,1.49.01,0,.03,0,.04,0,.89,0,1.73.34,2.36.97.63.63.98,1.48.97,2.38,0,.83.66,1.51,1.49,1.51h.01c.82,0,1.49-.66,1.5-1.49.01-1.71-.64-3.32-1.85-4.53-1.21-1.21-2.84-1.84-4.53-1.85Zm8.95-2.57c-2.39-2.39-5.61-3.7-8.95-3.69-.83,0-1.5.68-1.49,1.51,0,.83.67,1.49,1.5,1.49,0,0,.03,0,.04,0,2.56,0,4.97,1,6.78,2.81s2.82,4.24,2.81,6.82c0,.83.67,1.5,1.49,1.51h0c.83,0,1.5-.67,1.5-1.49.01-3.38-1.3-6.56-3.69-8.95Z"/></svg>');
  --mask-circle: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50"/></svg>');
  --arrow01: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 28"><polygon points="18.6 .09 16.2 2.52 25.45 12.27 .1 12.27 .1 15.73 25.45 15.73 16.2 25.48 18.59 27.91 31.9 14 18.6 .09"/></svg>');
}

.splash {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.splash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
  z-index: 2;
  transform: translate(-50%, -50%);
}
.splash__logo img {
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: .8s;

  aspect-ratio: 482.21/80.31;
  animation-fill-mode: forwards;
}
@media screen and (max-width: 991.98px) {
  .splash__logo img {
    width: clamp(280px, 45.9vw, 340px);
  }
}
@media print, screen and (min-width: 992px) {
  .splash__logo img {
    width: clamp(360px, 33.1vw, 420px);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.splash__mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  animation-timing-function: cubic-bezier(.25, 1, .5, 1);

  -webkit-mask-image: linear-gradient(#000, #000), var(--mask-circle);
          mask-image: linear-gradient(#000, #000), var(--mask-circle);
  -webkit-mask-position: 0 0, center center;
          mask-position: 0 0, center center;
  -webkit-mask-size: 100% 100%, 0 0;
          mask-size: 100% 100%, 0 0;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation-fill-mode: forwards;
}
.splash__mask.--mask1 {
  background-color: #c7e7a6;
  animation-duration: 1s;
  animation-delay: .2s;
}
.splash__mask.--mask1.is-active {
  animation-name: expandHole;
}
.splash__mask.--mask2 {
  background-color: #c7e7a6;
  animation-duration: 1.1s;
}
.splash__mask.--mask2.is-active {
  animation-name: expandHole;
}
.splash__mask.--mask3 {
  background-color: #7431b2;
  animation-duration: 1s;
  animation-delay: .2s;
}
.splash__mask.--mask3.is-active {
  animation-name: expandHole;
}
.splash__mask.--mask4 {
  background-color: #7431b2;
  animation-duration: 1.1s;
}
.splash__mask.--mask4.is-active {
  animation-name: expandHole;
}
@keyframes expandHole {
  0% {
    opacity: 1;

    -webkit-mask-size: 100% 100%, 0 0;
            mask-size: 100% 100%, 0 0;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;

    -webkit-mask-size: 100% 100%, hypot(100vw, 100vh) hypot(100vw, 100vh);
            mask-size: 100% 100%, hypot(100vw, 100vh) hypot(100vw, 100vh);
  }
}