@charset "UTF-8";
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.min.css */
*, ::before, ::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p, table, blockquote, address, pre, iframe, form, figure, dl {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg, img, embed, object, iframe {
  vertical-align: bottom;
}

button, input, optgroup, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button, [type=button], [type=reset], [type=submit] {
  cursor: pointer;
}

button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td, th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: 700;
}

/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}

.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}

.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}

.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}

.animate__animated.animate__delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}

.animate__animated.animate__delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}

.animate__animated.animate__delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}

.animate__animated.animate__delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}

.animate__animated.animate__faster {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}

.animate__animated.animate__fast {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}

.animate__animated.animate__slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}

.animate__animated.animate__slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}

@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
  .animate__animated[class*=Out] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shakeX {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}

@-webkit-keyframes shakeY {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}

@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}

@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}

@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}

/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}

@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}

@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}

@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}

/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}

@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}

@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}

@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}

/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}

@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}

@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}

@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}

/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/**
 * Swiper 12.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 27, 2026
 */
@media screen and (max-width: 1023px) {
  :root {
    --swiper-theme-color: #007aff;
    /*
    --swiper-preloader-color: var(--swiper-theme-color);
    --swiper-wrapper-transition-timing-function: initial;
    */
  }
  :host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
  }
  .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /* Fix of Webkit flickering */
    z-index: 1;
    display: block;
  }
  .swiper-vertical > .swiper-wrapper {
    flex-direction: column;
  }
  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
  }
  .swiper-android .swiper-slide,
  .swiper-ios .swiper-slide,
  .swiper-wrapper {
    transform: translate3d(0px, 0, 0);
  }
  .swiper-horizontal {
    touch-action: pan-y;
  }
  .swiper-vertical {
    touch-action: pan-x;
  }
  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
  }
  .swiper-slide-invisible-blank {
    visibility: hidden;
  }
  /* Auto Height */
  .swiper-autoheight,
  .swiper-autoheight .swiper-slide {
    height: auto;
  }
  .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
  }
  .swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  /* 3D Effects */
  .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
  }
  .swiper-3d .swiper-wrapper {
    transform-style: preserve-3d;
  }
  .swiper-3d {
    perspective: 1200px;
  }
  .swiper-3d .swiper-slide,
  .swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
  /* CSS Mode */
  .swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
  }
  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }
  .swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  .swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory;
  }
  .swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-slides-offset-before);
    scroll-margin-inline-start: var(--swiper-slides-offset-before);
  }
  .swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:last-child {
    margin-inline-end: var(--swiper-slides-offset-after);
  }
  .swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory;
  }
  .swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-slides-offset-before);
    scroll-margin-block-start: var(--swiper-slides-offset-before);
  }
  .swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:last-child {
    margin-block-end: var(--swiper-slides-offset-after);
  }
  .swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none;
  }
  .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none;
  }
  .swiper-css-mode.swiper-centered > .swiper-wrapper::before {
    content: "";
    flex-shrink: 0;
    order: 9999;
  }
  .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always;
  }
  .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before);
  }
  .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after);
  }
  .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before);
  }
  .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after);
  }
  /* Slide styles start */
  /* 3D Shadows */
  .swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top,
  .swiper-3d .swiper-slide-shadow-bottom,
  .swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top,
  .swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent;
  }
  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
  .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
  .swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff;
  }
  .swiper-lazy-preloader-black {
    --swiper-preloader-color: #000;
  }
  /* Slide styles end */
  .swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
  }
  .swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
  .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
  .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
  :root {
    --swiper-navigation-size: 44px;
    /*
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 4px;
    --swiper-navigation-color: var(--swiper-theme-color);
    */
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
  }
  .swiper-button-prev.swiper-button-disabled,
  .swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-button-prev.swiper-button-hidden,
  .swiper-button-next.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled .swiper-button-prev,
  .swiper-navigation-disabled .swiper-button-next {
    display: none !important;
  }
  .swiper-button-prev ::slotted(svg),
  .swiper-button-prev svg,
  .swiper-button-next ::slotted(svg),
  .swiper-button-next svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
  .swiper-button-lock {
    display: none;
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  }
  .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-button-prev .swiper-navigation-icon {
    transform: rotate(180deg);
  }
  .swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-horizontal .swiper-button-prev,
  .swiper-horizontal .swiper-button-next,
  .swiper-horizontal ~ .swiper-button-prev,
  .swiper-horizontal ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
    margin-left: 0;
  }
  .swiper-horizontal .swiper-button-prev, .swiper-horizontal ~ .swiper-button-prev, .swiper-horizontal.swiper-rtl .swiper-button-next, .swiper-horizontal.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-horizontal .swiper-button-next, .swiper-horizontal ~ .swiper-button-next, .swiper-horizontal.swiper-rtl .swiper-button-prev, .swiper-horizontal.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-horizontal .swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-horizontal .swiper-button-prev .swiper-navigation-icon, .swiper-horizontal ~ .swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-horizontal ~ .swiper-button-prev .swiper-navigation-icon, .swiper-horizontal.swiper-rtl .swiper-button-next ::slotted(.swiper-navigation-icon),
  .swiper-horizontal.swiper-rtl .swiper-button-next .swiper-navigation-icon, .swiper-horizontal.swiper-rtl ~ .swiper-button-next ::slotted(.swiper-navigation-icon),
  .swiper-horizontal.swiper-rtl ~ .swiper-button-next .swiper-navigation-icon {
    transform: rotate(180deg);
  }
  .swiper-horizontal.swiper-rtl .swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-horizontal.swiper-rtl .swiper-button-prev .swiper-navigation-icon, .swiper-horizontal.swiper-rtl ~ .swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-horizontal.swiper-rtl ~ .swiper-button-prev .swiper-navigation-icon {
    transform: rotate(0deg);
  }
  .swiper-vertical .swiper-button-prev,
  .swiper-vertical .swiper-button-next,
  .swiper-vertical ~ .swiper-button-prev,
  .swiper-vertical ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - var(--swiper-navigation-size) / 2);
    margin-top: 0;
  }
  .swiper-vertical .swiper-button-prev,
  .swiper-vertical ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
  }
  .swiper-vertical .swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-vertical .swiper-button-prev .swiper-navigation-icon,
  .swiper-vertical ~ .swiper-button-prev ::slotted(.swiper-navigation-icon),
  .swiper-vertical ~ .swiper-button-prev .swiper-navigation-icon {
    transform: rotate(-90deg);
  }
  .swiper-vertical .swiper-button-next,
  .swiper-vertical ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
  }
  .swiper-vertical .swiper-button-next ::slotted(.swiper-navigation-icon),
  .swiper-vertical .swiper-button-next .swiper-navigation-icon,
  .swiper-vertical ~ .swiper-button-next ::slotted(.swiper-navigation-icon),
  .swiper-vertical ~ .swiper-button-next .swiper-navigation-icon {
    transform: rotate(90deg);
  }
  :root {
    /*
    --swiper-pagination-color: var(--swiper-theme-color);
    --swiper-pagination-left: auto;
    --swiper-pagination-right: 8px;
    --swiper-pagination-bottom: 8px;
    --swiper-pagination-top: auto;
    --swiper-pagination-fraction-color: inherit;
    --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
    --swiper-pagination-progressbar-size: 4px;
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-border-radius: 50%;
    --swiper-pagination-bullet-inactive-color: #000;
    --swiper-pagination-bullet-inactive-opacity: 0.2;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 4px;
    --swiper-pagination-bullet-vertical-gap: 6px;
    */
  }
  .swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
  }
  .swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
    display: none !important;
  }
  /* Common Styles */
  .swiper-pagination-fraction,
  .swiper-pagination-custom,
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%;
  }
  /* Bullets */
  .swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0;
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  }
  .swiper-pagination-bullet button {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-bullet.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
  }
  .swiper-pagination-bullet:only-child {
    display: none !important;
  }
  .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
  }
  .swiper-vertical > .swiper-pagination-bullets,
  .swiper-pagination-vertical.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0px, -50%, 0);
  }
  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
  }
  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: 200ms transform, 200ms top;
  }
  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: 200ms transform, 200ms left;
  }
  .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: 200ms transform, 200ms right;
  }
  /* Fraction */
  .swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit);
  }
  /* Progress */
  .swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
    position: absolute;
  }
  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
  .swiper-pagination-lock {
    display: none;
  }
  :root {
    /*
    --swiper-scrollbar-border-radius: 10px;
    --swiper-scrollbar-top: auto;
    --swiper-scrollbar-bottom: 4px;
    --swiper-scrollbar-left: auto;
    --swiper-scrollbar-right: 4px;
    --swiper-scrollbar-sides-offset: 1%;
    --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
    --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
    --swiper-scrollbar-size: 4px;
    */
  }
  .swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  }
  .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important;
  }
  .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0;
  }
  .swiper-scrollbar-cursor-drag {
    cursor: move;
  }
  .swiper-scrollbar-lock {
    display: none;
  }
  /* Zoom container styles start */
  .swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .swiper-zoom-container > img,
  .swiper-zoom-container > svg,
  .swiper-zoom-container > canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  /* Zoom container styles end */
  .swiper-slide-zoomed {
    cursor: move;
    touch-action: none;
  }
  /* a11y */
  .swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
  }
  .swiper-thumbs .swiper-slide-thumb-active {
    /* Styles for active thumb slide */
  }
  .swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto;
  }
  .swiper-grid > .swiper-wrapper {
    flex-wrap: wrap;
  }
  .swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out;
  }
  .swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
  }
  .swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none;
  }
  .swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }
  .swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
  }
  .swiper.swiper-cube {
    overflow: visible;
  }
  .swiper-cube .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
  }
  .swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none;
  }
  .swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
  }
  .swiper-cube .swiper-slide-active,
  .swiper-cube .swiper-slide-next,
  .swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }
  .swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
  }
  .swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px);
  }
  .swiper-cube .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
  /* Cube slide shadows start */
  .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
  .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
  /* Cube slide shadows end */
  .swiper.swiper-flip {
    overflow: visible;
  }
  .swiper-flip .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
  }
  .swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none;
  }
  .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
  }
  /* Flip slide shadows start */
  .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
  .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
  /* Flip slide shadows end */
  .swiper-creative .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
  .swiper.swiper-cards {
    overflow: visible;
  }
  .swiper-cards .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden;
  }
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
:root {
  --black90: #333;
  --clrBlue: #0070BC;
  --clrLightBlue: #2E9DD2;
  --clrLightBlue02: #3786C8;
  --clrOrange: #F1875F;
  --clrYellow: #FEE600;
  --bgbasecolor01: #C8EDF3;
  --bgbasecolor02: #F0F0E8;
  --bgbasecolor03: #FFF8E8;
  --font-base: "zen-maru-gothic", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font_hikari: "ads-hikari", sans-serif;
  --font_copy: "sofia-pro-soft", sans-serif;
  --headerH_sp: 65px;
  --headerH_pc: 134px;
  --tinklestart: 2.3s;
}

/* Adobe Fonts 読み込み中もテキストを表示（FOUTを許容してブロックを防ぐ） */
html {
  font: 62.5%/1.231 var(--font-base);
}

body {
  font-size: 1rem;
  color: var(--black90);
  letter-spacing: -0.001em;
  -webkit-text-size-adjust: 100%;
  counter-reset: number 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media screen and (min-width: 768px) {
  .spOnly {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .pcOnly {
    display: none;
  }
}
.animate__animated {
  opacity: 0;
}
.animate__animated.is-inview {
  opacity: 1;
}

@keyframes fadeInUpCustom {
  from {
    opacity: 0;
    transform: translate3d(0, var(--fade-distance, 40px), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpCustom {
  animation-name: fadeInUpCustom;
}

.blcHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 100;
}
.blcHeader::after {
  content: "";
  width: 100%;
  height: 7px;
  background: url(../images/img_wave_w.svg) repeat-x center top/auto 8px;
  position: absolute;
  bottom: -7px;
  left: 0;
}
.blcHeader__inner {
  width: min(100% - 32px, 1072px);
  margin-inline: auto;
}
.blcHeader .cosmologo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
}
.blcHeader .cosmologo img {
  width: 89px;
}
.blcHeader .spMenuBtn {
  position: absolute;
  top: 11px;
  right: 16px;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.blcHeader .spMenuBtn::before, .blcHeader .spMenuBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: #3786C8;
  transition: 0.3s;
}
.blcHeader .spMenuBtn::before {
  transform: translate(-50%, -7px);
}
.blcHeader .spMenuBtn::after {
  transform: translate(-50%, 5px);
}
.blcHeader .spMenuBtn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  display: block;
  background-color: #3786C8;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.blcHeader .spMenuBtn.is-open::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.blcHeader .spMenuBtn.is-open::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.blcHeader .spMenuBtn.is-open span {
  opacity: 0;
}
.blcHeader.is-open .localNavi {
  max-height: 400px;
}
.blcHeader.is-open .spMenuBtn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.blcHeader.is-open .spMenuBtn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.blcHeader.is-open .spMenuBtn span {
  opacity: 0;
}

.localNavi {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.localNavi__inner {
  padding: 15px 0 19px;
}
.localNavi__parent {
  margin-top: 16px;
}
.localNavi__ttl {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--clrBlue);
  margin-bottom: 10px;
}
.localNavi__ttl::before, .localNavi__ttl::after {
  content: "";
  width: 15px;
  height: 19px;
  margin: 0 7px;
  background: url(../images/img_drop01.svg) no-repeat center center/contain;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-1px);
}
.localNavi__list {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.localNavi__list li {
  border: #3786C8 solid 2px;
  width: calc((100% - 16px) / 3);
  border-radius: 6px;
}
.localNavi__list li a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  border-radius: 6px;
  background-color: #B7ECFE;
  color: var(--clrBlue);
  padding: 10px 0 20px;
  position: relative;
  height: 100%;
}
.localNavi__list li a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: #3786C8 solid 2px;
  border-bottom: #3786C8 solid 2px;
  transform: translateX(-50%) rotate(45deg);
  position: absolute;
  bottom: 8px;
  left: 50%;
}

@media screen and (min-width: 1024px) {
  .blcHeader::after {
    height: 19px;
    background-size: auto 19px;
    bottom: -19px;
  }
  .blcHeader__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 134px;
  }
  .blcHeader .cosmologo {
    width: min(10%, 241px);
  }
  .blcHeader .cosmologo img {
    width: min(100%, 124px);
    height: auto;
  }
  .blcHeader .spMenuBtn {
    display: none;
  }
  .localNavi {
    max-height: none;
    overflow: visible;
    width: min(90% - 20px, 831px);
  }
  .localNavi__inner {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
  }
  .localNavi__child, .localNavi__parent {
    width: min(50% - 12px, 392px);
  }
  .localNavi__parent {
    margin-top: 0;
    position: relative;
  }
  .localNavi__parent::before {
    content: "";
    width: 4px;
    height: 100%;
    background: radial-gradient(circle, var(--clrBlue) 31%, transparent 54%) center repeat-y;
    background-size: 4px 8px;
    position: absolute;
    top: 0;
    left: -24px;
    background-position-y: -2px;
  }
  .localNavi__ttl {
    font-size: 1.9rem;
  }
  .localNavi__list {
    gap: 8px;
  }
  .localNavi__list li {
    width: min((100% - 16px) / 3, 120px);
  }
}
@media (any-hover: hover) {
  .localNavi__list li a {
    transition: background-color 0.3s;
  }
  .localNavi__list li a::before {
    transition: transform 0.3s;
  }
  .localNavi__list li a:hover {
    background-color: #e5f8ff;
  }
  .localNavi__list li a:hover::before {
    transform: translate(-50%, 3px) rotate(45deg);
  }
}
.blcFooter {
  background-color: white;
  padding: 20px 4.2666666667vw;
}

.l-footer__menu {
  text-align: center;
}
.l-footer__menu li:nth-child(n+2) {
  border-top: #CCC solid 1px;
}
.l-footer__link {
  padding: 15px 0;
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
}
.l-footer__copy {
  text-align: center;
  font-size: 1rem;
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .blcFooter {
    padding-top: 30px;
  }
  .l-footer__menu {
    display: flex;
    justify-content: center;
  }
  .l-footer__menu li {
    list-style: 1;
  }
  .l-footer__menu li:nth-child(n+2) {
    border-top: none;
    margin-left: 32px;
  }
  .l-footer__link {
    padding: 0;
    display: inline-block;
  }
  .l-footer__copy {
    font-size: 1.2rem;
    margin-top: 24px;
  }
}
.btnBox {
  text-align: center;
}

.cmnBtn {
  display: inline-block;
  border: var(--clrBlue) solid 2px;
  border-radius: 10px;
  background-color: white;
  color: var(--clrBlue);
  width: min(100%, 560px);
  height: 64px;
  line-height: 60px;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0px 8px 0px 0px rgb(0, 113, 189);
  position: relative;
}
.cmnBtn--link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-right: var(--clrBlue) solid 2px;
  border-bottom: var(--clrBlue) solid 2px;
  transform: translateY(-50%) rotate(-45deg);
}
.cmnBtn--pagelink::before {
  content: "";
  position: absolute;
  top: calc(50% + 2px);
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: var(--clrBlue) solid 2px;
  border-right: var(--clrBlue) solid 2px;
  transform: translateY(-50%) rotate(-45deg);
}
@media screen and (min-width: 1024px) {
  .cmnBtn {
    border-width: 3px;
    height: 80px;
    line-height: 74px;
    font-size: 3rem;
  }
  .cmnBtn--link::before {
    right: 30px;
    width: 14px;
    height: 14px;
    border-right-width: 3px;
    border-bottom-width: 3px;
  }
  .cmnBtn--pagelink::before {
    top: calc(50% + 4px);
    right: 28px;
    width: 14px;
    height: 14px;
    border-top: var(--clrBlue) solid 3px;
    border-right: var(--clrBlue) solid 3px;
  }
}

@media (any-hover: hover) {
  .cmnBtn {
    transition: box-shadow 0.3s;
  }
  .cmnBtn:hover {
    box-shadow: 0px 3px 0px 0px rgb(0, 113, 189);
  }
  .cmnBtn--link::before {
    transition: transform 0.3s;
  }
  .cmnBtn--link:hover::before {
    transform: translate(3px, -50%) rotate(-45deg);
  }
  .cmnBtn--pagelink::before {
    transition: transform 0.3s;
  }
  .cmnBtn--pagelink:hover::before {
    transform: translateY(calc(-50% - 3px)) rotate(-45deg);
  }
}
.accordionBtn {
  display: none;
}

.accordionContents {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s;
}

.accordionBtn:checked + label + .accordionContents {
  max-height: 3000px;
}

.sectBgBlue {
  background-color: var(--bgbasecolor01);
  position: relative;
}
.sectBgBlue::before {
  content: "";
  width: 100%;
  height: 12px;
  background-repeat: repeat;
  background-position: center center;
  background-size: auto 12px;
  position: absolute;
  left: 0;
  top: -12px;
  background-image: url(../images/bg_wave_blue_top.svg);
}
@media screen and (min-width: 1024px) {
  .sectBgBlue::before {
    height: 20px;
    background-size: auto 20px;
    top: -20px;
  }
}

.sectBgBeige {
  background-color: var(--bgbasecolor03);
  position: relative;
}
.sectBgBeige::before {
  content: "";
  width: 100%;
  height: 12px;
  background-image: url(../images/bg_wave_beige02_top.svg);
  background-repeat: repeat;
  background-position: center center;
  background-size: auto 12px;
  position: absolute;
  top: -12px;
  left: 0;
}
@media screen and (min-width: 1024px) {
  .sectBgBeige::before {
    content: "";
    height: 20px;
    background-size: auto 20px;
    top: -20px;
  }
}

.sectInner {
  margin-inline: auto;
  width: min(100% - 8.5333333333vw, 1000px);
}

.contentsWrap {
  background-color: var(--bgbasecolor01);
}

.anchor-target {
  scroll-margin-top: var(--headerH_sp);
}
.anchor-target.sectWhenDrink {
  scroll-margin-top: calc(var(--headerH_sp) + 100px);
}
@media screen and (min-width: 1024px) {
  .anchor-target {
    scroll-margin-top: var(--headerH_pc);
  }
  .anchor-target.sectWhenDrink {
    scroll-margin-top: calc(var(--headerH_pc) + 160px);
  }
}

.sectfv {
  background-color: #FCEF93;
  padding-top: var(--headerH_sp);
}

.sectFvInner {
  max-width: 1070px;
  margin-inline: auto;
  padding-top: 7.4666666667vw;
}

.fvTtlArea {
  text-align: center;
  margin-inline: auto;
  padding-top: min(22.9333333333vw, 122px);
  position: relative;
  z-index: 1;
}

.fvTtl__txt {
  position: relative;
  z-index: 1;
}
.fvTtl__subTtlTxt {
  display: block;
  margin-bottom: min(3.2vw, 18px);
  color: white;
  font-size: min(4.4rem, 8.5333333333vw);
  font-family: var(--font_hikari);
  letter-spacing: -0.2em;
  text-align: center;
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}
.fvTtl__subTtlTxtInner {
  background: url(../images/bg_txt_fv01.svg) no-repeat center center/contain;
  padding: min(3.2vw, 22px) min(6.4vw, 40px) min(3.2vw, 22px) min(6.4vw, 30px);
}
.fvTtl__mainTtlTxt {
  display: block;
  color: var(--clrLightBlue02);
  font-size: min(7.2rem, 14.9333333333vw);
  font-family: var(--font_hikari);
  letter-spacing: -0.22em;
  text-align: center;
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  opacity: 0;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
}

.fvTtl__imgmizu {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(26.1333333333vw, 137px);
  height: auto;
  z-index: 0;
  opacity: 0;
  transition: transform 0.3s 1.8s cubic-bezier(0.135, 0.976, 0.288, 1.174), opacity 0.3s 1.8s;
}

.fvImgArea {
  margin: 6.4vw 0.5333333333vw 0 1.0666666667vw;
  position: relative;
}

.fv_tinkle {
  position: absolute;
  height: auto;
  opacity: 0;
  animation-duration: 1.6s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.fv_tinkle01 {
  top: 10.6666666667vw;
  left: 6.4vw;
  width: 4.8vw;
  animation-delay: calc(var(--tinklestart) + 0.5s);
}

.fv_tinkle02 {
  top: 6.1333333333vw;
  left: 10.9333333333vw;
  width: 4.2666666667vw;
  animation-delay: calc(var(--tinklestart) + 1s);
}

.fv_tinkle03 {
  top: 9.8666666667vw;
  left: 25.0666666667vw;
  width: 5.0666666667vw;
  animation-delay: calc(var(--tinklestart) + 1.2s);
}

.fv_tinkle04 {
  top: 2.6666666667vw;
  left: 30.4vw;
  width: 4.5333333333vw;
  animation-delay: calc(var(--tinklestart) + 0.8s);
}

.fv_tinkle05 {
  top: 10.9333333333vw;
  right: 23.7333333333vw;
  width: 4.5333333333vw;
  animation-delay: calc(var(--tinklestart) + 0.8s);
}

.fv_tinkle06 {
  top: 7.4666666667vw;
  right: 6.4vw;
  width: 4.2666666667vw;
  animation-delay: calc(var(--tinklestart) + 1.5s);
}

.fv_tinkle07 {
  top: 14.1333333333vw;
  right: 5.0666666667vw;
  width: 4.5333333333vw;
  animation-delay: calc(var(--tinklestart) + 0.6s);
}

.fvimg_main {
  width: 100%;
  height: auto;
  transform: translateY(30px);
  opacity: 0;
  transition: opacity 0.3s 2.5s, transform 0.3s 2.5s;
}

.is-animestart .fvTtl__subTtlTxt {
  animation-name: bounceInLeft;
  opacity: 1;
}
.is-animestart .fvTtl__mainTtlTxt {
  animation-name: bounceInLeft;
  opacity: 1;
}
.is-animestart .fvTtl__imgmizu {
  transform: translate(-50%, 0);
  opacity: 1;
}
.is-animestart .fvimg_main {
  opacity: 1;
  transform: translateY(0px);
}
.is-animestart .fv_tinkle {
  animation-name: flashcustom;
}

@-webkit-keyframes flashcustom {
  from, 50%, to {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  .sectfv {
    padding-top: var(--headerH_pc);
    padding-left: 20px;
    padding-right: 20px;
  }
  .sectFvInner {
    padding-top: 77px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
  }
  .fvTtlArea {
    flex-basis: auto;
    padding-top: 44px;
  }
  .fvTtl__subTtlTxt {
    margin-bottom: 10px;
    color: white;
    font-size: 4.4rem;
  }
  .fvTtl__subTtlTxtInner {
    padding: 22px 40px 22px 30px;
  }
  .fvTtl__mainTtlTxt {
    font-size: 7.8rem;
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
    paint-order: stroke;
  }
  .fvTtl__imgmizu {
    top: -76px;
    left: 50%;
    width: 137px;
    height: 172px;
    transform: translateX(-50%);
  }
  .fvImgArea {
    margin: 0;
    width: min(54.6%, 584px);
  }
  .fv_tinkle {
    position: absolute;
    height: auto;
  }
  .fv_tinkle01 {
    top: 61px;
    left: 37px;
    width: 28px;
  }
  .fv_tinkle02 {
    top: 37px;
    left: 64px;
    width: 24px;
  }
  .fv_tinkle03 {
    top: 60px;
    left: 149px;
    width: 28px;
  }
  .fv_tinkle04 {
    top: 16px;
    left: 181px;
    width: 28px;
  }
  .fv_tinkle05 {
    top: 64px;
    right: 142px;
    width: 25px;
  }
  .fv_tinkle06 {
    top: 43px;
    right: 38px;
    width: 24px;
  }
  .fv_tinkle07 {
    top: 83px;
    right: 30px;
    width: 26px;
  }
}
.sectIntro {
  padding: min(13.3333333333vw, 60px) 0 min(6.4vw, 36px);
}
.sectIntro::before {
  content: none;
}
@media screen and (min-width: 768px) {
  .sectIntro {
    padding-bottom: 86px;
  }
}
@media screen and (min-width: 1024px) {
  .sectIntro {
    padding: min(13.3333333333vw, 60px) 0 156px;
  }
}

.intro__picturebookBox {
  position: relative;
}
.intro__picturebookCopy {
  text-align: center;
  margin-bottom: 12px;
  font-size: 3.2rem;
  font-family: var(--font_hikari);
  color: var(--clrBlue);
  letter-spacing: -0.1em;
}
.intro__picturebookCopy span {
  display: inline-block;
  position: relative;
}
.intro__picturebookCopy span::before, .intro__picturebookCopy span::after {
  content: "";
  width: 2px;
  height: 35px;
  background-color: var(--clrBlue);
  position: absolute;
  top: 50%;
}
.intro__picturebookCopy span::before {
  left: -12px;
  transform: translateY(-50%) rotate(-24deg);
}
.intro__picturebookCopy span::after {
  right: -12px;
  transform: translateY(-50%) rotate(24deg);
}
.intro__picturebookImg {
  text-align: center;
}
.intro__picturebookImg a {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  border: white solid 1px;
}
.intro__picturebookBtnBox {
  margin-top: 20px;
}
.intro__picturebookOtherimg {
  margin-top: 40px;
  text-align: center;
}
.intro__picturebookOtherimg img {
  width: min(76.8vw, 400px);
  margin-left: min(9.8666666667vw, 52px);
}
.intro__function {
  margin-top: min(16vw, 60px);
}
.intro__explainImg {
  text-align: center;
}
.intro__explainImg img {
  width: min(90%, 400px);
}
.intro__explain {
  position: relative;
}
.intro__explain__list {
  display: grid;
  grid-template-columns: calc(50% - 8px) calc(50% - 8px);
  row-gap: 32px;
  column-gap: 16px;
  margin-top: 40px;
}
.intro__explain__itemWrap {
  --fade-distance: 30px;
}
.intro__explain__item {
  border: var(--clrLightBlue02) solid 2px;
  border-radius: 8px;
  background-color: white;
  padding: 20px 0 8px;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  z-index: 1;
}
.intro__explain__itemInner {
  width: 100%;
}
.intro__explain__num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  background-color: var(--clrLightBlue02);
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 2.6rem;
  font-family: var(--font_hikari);
}
.intro__explain__txt {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--clrLightBlue02);
}
.intro__explain__subtxt {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--clrLightBlue02);
  margin: 5px 7px 0;
  padding-top: 5px;
  border-top: var(--clrLightBlue02) solid 1px;
}
.intro__balloonWrap {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.intro__balloonImg {
  order: 2;
  width: min(20.2666666667vw, 120px);
  height: min(29.3333333333vw, 174px);
  margin-top: -8.5333333333vw;
  position: relative;
  z-index: 1;
}
.intro__balloonBox {
  order: 1;
  background-color: var(--clrLightBlue02);
  color: white;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
  border-radius: 16px;
  margin: 0 16px;
  padding: 12px 16px 20px;
  line-height: 1.6;
  position: relative;
}
.intro__balloonBox::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 11px solid var(--clrLightBlue02);
  border-top: 0;
  position: absolute;
  bottom: -8px;
  left: 16vw;
  transform: rotate(-45deg);
}
.intro__balloonBox strong {
  color: #FFFE01;
}
@media screen and (min-width: 768px) {
  .intro__explain__list {
    grid-template-columns: calc(50% - 12px) calc(50% - 12px);
    column-gap: 24px;
  }
  .intro__explain__item {
    padding: 40px 10px 24px;
    height: 140px;
  }
  .intro__explain__txt {
    font-size: 2rem;
  }
  .intro__explain__subtxt {
    font-size: 1.5rem;
    margin: 10px 7px 0;
    padding-top: 10px;
  }
  .intro__balloonWrap {
    flex-direction: row;
    margin-top: 80px;
    padding-left: 20px;
    align-items: flex-start;
    gap: 14px;
  }
  .intro__balloonImg {
    order: 1;
    max-width: 162px;
    height: auto;
    margin-top: 0;
  }
  .intro__balloonBox {
    order: 2;
    font-size: 2.3rem;
    margin: 0;
    padding: 24px 30px;
    line-height: 1.6;
    width: 724px;
    letter-spacing: -0.02em;
  }
  .intro__balloonBox::before {
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom-width: 11px;
    bottom: auto;
    top: 50%;
    left: -13px;
    transform: rotate(135deg);
  }
}
@media screen and (min-width: 1024px) {
  .intro__picturebookBtnBox {
    margin-top: 48px;
  }
  .intro__picturebookOtherimg {
    margin-top: 0;
    position: absolute;
    bottom: 128px;
    left: calc(50% + 290px);
  }
  .intro__picturebookOtherimg img {
    width: 231px;
    margin-left: 0;
  }
  .intro__function {
    margin-top: 140px;
  }
  .intro__explainImg {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
  .intro__explainImg img {
    width: 460px;
  }
  .intro__explain {
    position: relative;
  }
  .intro__explain__list {
    grid-template-columns: calc((100% - 480px) / 2) calc((100% - 480px) / 2);
    row-gap: 46px;
    column-gap: 480px;
    margin-top: 0;
  }
  .intro__explain__itemWrap {
    position: relative;
  }
  .intro__explain__itemWrap::after {
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .intro__explain__itemWrap:nth-child(1)::after {
    width: 219px;
    height: 44px;
    background-image: url(../images/linepoint_intro01.svg);
    position: absolute;
    top: 31px;
    right: -213px;
  }
  .intro__explain__itemWrap:nth-child(2)::after {
    width: 129px;
    height: 51px;
    background-image: url(../images/linepoint_intro02.svg);
    position: absolute;
    top: 66px;
    left: -124px;
  }
  .intro__explain__itemWrap:nth-child(3)::after {
    width: 149px;
    height: 66px;
    background-image: url(../images/linepoint_intro03.svg);
    position: absolute;
    top: 11px;
    right: -143px;
  }
  .intro__explain__itemWrap:nth-child(4)::after {
    width: 129px;
    height: 66px;
    background-image: url(../images/linepoint_intro04.svg);
    position: absolute;
    top: 13px;
    left: -124px;
  }
  .intro__explain__itemWrap:nth-child(5)::after {
    width: 219px;
    height: 204px;
    background-image: url(../images/linepoint_intro05.svg);
    position: absolute;
    top: -126px;
    right: -213px;
  }
  .intro__explain__itemWrap:nth-child(6)::after {
    width: 222px;
    height: 106px;
    background-image: url(../images/linepoint_intro06.svg);
    position: absolute;
    top: -28px;
    left: -217px;
  }
  .intro__explain__item {
    border-width: 3px;
    padding: 28px 0 12px;
    height: 144px;
  }
  .intro__explain__num {
    width: 48px;
    height: 48px;
    top: -24px;
    font-size: 3.5rem;
  }
  .intro__explain__txt {
    font-size: 2rem;
  }
  .intro__explain__subtxt {
    font-size: 1.3rem;
    margin: 10px 7px 0;
    padding-top: 10px;
  }
  .intro__balloonWrap {
    margin-top: 140px;
    padding-left: 43px;
  }
  .intro__balloonImg {
    width: 162px;
    margin-top: -56px;
  }
  .intro__balloonBox {
    width: 724px;
  }
}

.hlLv2 {
  text-align: center;
}
.hlLv2--intro {
  margin-bottom: min(10.6666666667vw, 40px);
  font-size: 4rem;
  color: var(--clrLightBlue02);
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  font-family: var(--font_hikari);
  letter-spacing: -0.15em;
  line-height: 1.5;
}
.hlLv2--intro .spUnderline {
  display: inline-block;
  background: radial-gradient(circle, var(--clrLightBlue02) 40%, transparent 60%) bottom repeat-x;
  background-size: 10px 5px; /* ドットの間隔と高さ */
  padding: 0 7px 2px;
}
@media screen and (min-width: 1024px) {
  .hlLv2--intro {
    margin-bottom: 80px;
    font-size: 6rem;
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
  }
  .hlLv2--intro .spUnderline {
    background: radial-gradient(circle, var(--clrLightBlue02) 34%, transparent 44%) bottom repeat-x;
    background-size: 16px 12px; /* ドットの間隔と高さ */
    padding: 0 7px 6px;
  }
  .hlLv2--intro .spUnderline:nth-of-type(1) {
    background-position-x: -2px;
  }
  .hlLv2--intro .spUnderline:nth-of-type(2) {
    background-position-x: 4px;
  }
}

@media (any-hover: hover) {
  .intro__picturebookImg a img {
    transition: transform 0.3s;
  }
  .intro__picturebookImg a:hover img {
    transform: scale(1.08);
  }
}
.sectDehydrate {
  background-color: var(--bgbasecolor02);
  padding: min(17.0666666667vw, 76px) 0 min(32vw, 120px);
  position: relative;
}
.sectDehydrate::before {
  content: "";
  width: 100%;
  height: 12px;
  background-image: url(../images/bg_wave_beige01_top.svg);
  background-repeat: repeat;
  background-position: center center;
  background-size: auto 12px;
  position: absolute;
  top: -12px;
  left: 0;
}
@media screen and (min-width: 1024px) {
  .sectDehydrate {
    padding: 100px 0 min(32vw, 180px);
  }
  .sectDehydrate::before {
    height: 19px;
    background-size: auto 19px;
    top: -19px;
  }
}

.hlLv2--dehydrate {
  margin-bottom: min(10.6666666667vw, 40px);
  font-size: 4rem;
  color: #b7875f;
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  font-family: var(--font_hikari);
  letter-spacing: -0.2em;
  line-height: 1.5;
}
.hlLv2--dehydrate .spUnderline {
  display: inline-block;
  background: radial-gradient(circle, #b7875f 40%, transparent 60%) bottom repeat-x;
  background-size: 10px 5px; /* ドットの間隔と高さ */
  padding: 0 5px 2px;
}
@media screen and (min-width: 1024px) {
  .hlLv2--dehydrate {
    margin-bottom: 25px;
    font-size: 6rem;
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
  }
  .hlLv2--dehydrate .spUnderline {
    background: radial-gradient(circle, #b7875f 34%, transparent 44%) bottom repeat-x;
    background-size: 16px 12px; /* ドットの間隔と高さ */
    padding: 0 6px 5px;
  }
}

.dehydrate__topInner {
  position: relative;
  height: min(157.0666666667vw, 840px);
}
.dehydrate__toplistItem {
  position: absolute;
  width: min(41.6vw, 220px);
  height: min(29.3333333333vw, 149px);
  background: url(../images/bg_balloon_dehydrate01.svg) no-repeat center center/contain;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #756357;
  font-size: min(4.2666666667vw, 2.4rem);
  font-weight: 700;
  line-height: 1.5;
}
.dehydrate__toplistItem.cloud01 {
  top: min(6.9333333333vw, 38px);
  right: min(50% + 4.2666666667vw, 50% + 24px);
}
.dehydrate__toplistItem.cloud02 {
  top: 0px;
  left: min(50% + 1.8666666667vw, 50% + 14px);
  z-index: 1;
}
.dehydrate__toplistItem.cloud03 {
  top: min(20.8vw, 110px);
  left: max(50% - 16.5333333333vw, 50% - 88px);
}
.dehydrate__toplistItem.cloud04 {
  top: min(38.9333333333vw, 208px);
  right: min(50% + 4.2666666667vw, 50% + 25px);
}
.dehydrate__toplistItem.cloud05 {
  top: min(41.3333333333vw, 220px);
  left: min(50% + 1.3333333333vw, 50% + 9px);
}
.dehydrate__toplistItem.cloud06 {
  top: min(110.6666666667vw, 592px);
  right: min(50% + 2.6666666667vw, 50% + 17px);
}
.dehydrate__toplistItem.cloud07 {
  top: min(103.7333333333vw, 557px);
  left: min(50% + 5.3333333333vw, 50% + 31px);
  z-index: 1;
}
.dehydrate__toplistItem.cloud08 {
  top: min(128.8vw, 687px);
  left: max(50% - 18.4vw, 50% - 97px);
}
.dehydrate__childimg {
  position: absolute;
  width: min(57.0666666667vw, 304px);
  height: min(48.8vw, 261px);
  top: min(62.9333333333vw, 337px);
  left: max(50% - 30.6666666667vw, 50% - 166px);
}
.dehydrate__childimg img {
  position: absolute;
}
.dehydrate__childimg img.partsFace {
  width: min(44.2666666667vw, 237px);
  height: min(40.5333333333vw, 217px);
  top: 0;
  left: min(10.4vw, 56px);
  transform: translateY(-1px);
  transition: transform 0.5s 0.9s;
}
.dehydrate__childimg img.partsBody {
  width: min(28.2666666667vw, 150px);
  height: min(16.5333333333vw, 90px);
  top: min(32.2666666667vw, 171px);
  left: min(21.6vw, 116px);
}
.dehydrate__childimg img.partsMoya {
  width: min(8.5333333333vw, 46px);
  height: min(12.8vw, 68px);
  top: min(alc(0.8vw), 3px);
  left: min(1.0666666667vw, 7px);
  opacity: 0;
  transform: translate(12px, 15px);
  transition: transform 0.5s 0.3s, opacity 0.5s 0.3s;
}
.dehydrate__childimg img.partsBreath {
  width: min(14.1333333333vw, 76px);
  height: min(11.4666666667vw, 62px);
  top: min(35.4666666667vw, 189px);
  left: 0;
  opacity: 0;
  transform: translate(15px, -12px);
  transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
}
.dehydrate__childimg img.partsDrop {
  width: min(5.6vw, 27px);
  height: min(4.8vw, 26px);
  top: min(32.8vw, 174px);
  left: min(51.4666666667vw, 276px);
  opacity: 0;
  transform: translate(-15px, -15px);
  transition: transform 0.5s 0.9s, opacity 0.5s 0.9s;
}
.dehydrate__childimg.is-inview .partsFace {
  transform: translateY(3px);
}
.dehydrate__childimg.is-inview .partsMoya {
  opacity: 1;
  transform: translate(0, 0);
}
.dehydrate__childimg.is-inview .partsBreath {
  opacity: 1;
  transform: translate(0, 0);
}
.dehydrate__childimg.is-inview .partsDrop {
  opacity: 1;
  transform: translate(0, 0);
}
.dehydrate__mizuchanimg {
  position: relative;
  width: min(85.8666666667vw, 458px);
  height: min(53.6vw, 288px);
  margin: 20px auto 0;
  transform: translateX(min(-1.3333333333vw, -8px));
}
.dehydrate__mizuchanimg__balloon {
  position: absolute;
  width: min(65.8666666667vw, 351px);
  height: min(46.1333333333vw, 245px);
  top: 0;
  left: min(20.2666666667vw, 108px);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: min(8vw, 4.3rem);
  font-family: var(--font_hikari);
  text-align: center;
  background: url(../images/bg_dehydrate_balloon_sp.svg) no-repeat center center/contain;
  letter-spacing: -0.1em;
}
.dehydrate__mizuchanimg__chara {
  position: absolute;
  width: min(25.8666666667vw, 137px);
  height: min(26.4vw, 141px);
  top: min(27.2vw, 146px);
  left: 0;
}
.dehydrate__btmBox {
  text-align: center;
  margin-top: 28px;
}
.dehydrate__btmTxt {
  color: var(--clrLightBlue02);
  font-size: 3rem;
  font-family: var(--font_hikari);
  text-align: center;
  letter-spacing: -0.15em;
}
.dehydrate__btmImg {
  width: 57.8666666667vw;
  margin-top: 16px;
  margin-inline: auto;
  padding-left: 5px;
}
@media screen and (min-width: 1024px) {
  .dehydrate__top {
    position: relative;
    max-width: 897px;
    margin-inline: auto;
  }
  .dehydrate__topInner {
    position: relative;
    height: 608px;
  }
  .dehydrate__toplistItem {
    width: 235px;
    height: 158px;
    font-size: 2.5rem;
    line-height: 1.3;
    letter-spacing: -0.05em;
  }
  .dehydrate__toplistItem.cloud01 {
    top: 58px;
    left: 94px;
    right: auto;
    z-index: 1;
  }
  .dehydrate__toplistItem.cloud02 {
    top: 0px;
    left: 338px;
    z-index: 0;
  }
  .dehydrate__toplistItem.cloud03 {
    top: 223px;
    left: 428px;
  }
  .dehydrate__toplistItem.cloud04 {
    top: 72px;
    left: 515px;
    right: auto;
  }
  .dehydrate__toplistItem.cloud05 {
    top: 178px;
    left: 664px;
  }
  .dehydrate__toplistItem.cloud06 {
    top: 154px;
    left: 257px;
    right: auto;
    z-index: 1;
  }
  .dehydrate__toplistItem.cloud07 {
    top: 362px;
    left: 36px;
  }
  .dehydrate__toplistItem.cloud08 {
    top: 187px;
    left: 0;
    z-index: 0;
  }
  .dehydrate__childimg {
    width: 321px;
    height: 274px;
    top: 333px;
    left: 247px;
  }
  .dehydrate__childimg img.partsFace {
    width: 246px;
    height: auto;
    top: 0;
    left: 60px;
  }
  .dehydrate__childimg img.partsBody {
    width: 157px;
    height: auto;
    top: 177px;
    left: 119px;
  }
  .dehydrate__childimg img.partsMoya {
    width: 48px;
    height: auto;
    top: 4px;
    left: 6px;
  }
  .dehydrate__childimg img.partsBreath {
    width: 79px;
    height: auto;
    top: 197px;
    left: 0;
  }
  .dehydrate__childimg img.partsDrop {
    width: 29px;
    height: auto;
    top: 183px;
    left: 291px;
  }
  .dehydrate__mizuchanimg {
    position: absolute;
    width: 392px;
    height: 234px;
    top: 366px;
    left: 546px;
    margin-top: 0;
    margin-left: 0;
    transform: translateX(0);
  }
  .dehydrate__mizuchanimg__balloon {
    width: 246px;
    height: 172px;
    left: 0;
    font-size: 3rem;
    background: url(../images/bg_dehydrate_balloon.svg) no-repeat center center/contain;
    padding-bottom: 16px;
  }
  .dehydrate__mizuchanimg__chara {
    width: 157px;
    height: auto;
    top: 73px;
    left: 236px;
  }
  .dehydrate__btmBox {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 68px;
  }
  .dehydrate__btmTxt {
    width: auto;
    font-size: 4.5rem;
  }
  .dehydrate__btmImg {
    width: 288px;
    margin-top: 0;
    margin-inline: 0;
    padding-left: 0;
  }
}

.sectWhenDrink {
  position: relative;
  padding: min(20.2666666667vw, 76px) 0 0;
  margin-bottom: max(-9.6vw, -68px);
}
.sectWhenDrink .hlLv3 {
  text-align: center;
  font-size: 4.4rem;
  color: var(--clrLightBlue02);
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  font-family: var(--font_hikari);
  letter-spacing: -0.15em;
  line-height: 1.5;
}
.sectWhenDrink .hlLv3 .spUnderline {
  display: inline-block;
  background: radial-gradient(circle, var(--clrLightBlue02) 40%, transparent 60%) bottom repeat-x;
  background-size: 10px 5px; /* ドットの間隔と高さ */
  padding: 0 7px 2px;
}
.sectWhenDrink .hlLv3 .spUnderline:first-child {
  letter-spacing: -0.06em;
  padding: 0 10px 2px;
}
.sectWhenDrink .hlLv3 .num {
  font-size: 6.4rem;
  line-height: 1;
}
@media screen and (min-width: 1024px) {
  .sectWhenDrink {
    padding: 108px 0 0;
    margin-bottom: -57px;
  }
  .sectWhenDrink .hlLv3 {
    font-size: 6rem;
    color: var(--clrLightBlue02);
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
    paint-order: stroke;
    margin-bottom: 60px;
  }
  .sectWhenDrink .hlLv3 .spUnderline {
    background: radial-gradient(circle, var(--clrLightBlue02) 34%, transparent 44%) bottom repeat-x;
    background-size: 16px 12px; /* ドットの間隔と高さ */
    padding: 0 7px 5px 0px;
  }
  .sectWhenDrink .hlLv3 .spUnderline:first-child {
    letter-spacing: -0.15em;
    padding: 0 0 5px 10px;
  }
  .sectWhenDrink .hlLv3 .spUnderline:nth-of-type(2) {
    background-position-x: 2px;
  }
  .sectWhenDrink .hlLv3 .num {
    font-size: 8rem;
    padding: 0 10px;
  }
}

.hlLv2--whenDrink {
  position: absolute;
  top: -80px;
  left: calc(50% - 56px);
  width: 112px;
  height: 135px;
  background: url(../images/img_drop01.svg) no-repeat center center/contain;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.4rem;
  font-family: var(--font_hikari);
  text-align: center;
  letter-spacing: -0.15em;
  line-height: 1;
  padding-top: 2.6666666667vw;
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  .hlLv2--whenDrink {
    top: -129px;
    left: calc(50% - 84px);
    width: 168px;
    height: 202px;
    font-size: 4.8rem;
    padding-top: 0;
  }
}

.whenDrink__oneeight {
  padding-top: min(18.6666666667vw, 100px);
  position: relative;
  max-width: 500px;
  margin-inline: auto;
}
.whenDrink__oneeightTtlBox {
  background-color: #2E9DD2;
  position: relative;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: min(5.3333333333vw, 30px);
  z-index: 0;
}
.whenDrink__oneeightTtlBox::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #2E9DD2;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
.whenDrink__oneeightTtlBox::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 11px solid #2e9dd2;
  border-bottom: 0;
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
}
.whenDrink__oneeightTtlImg {
  position: absolute;
  top: max(-17.0666666667vw, -92px);
  left: calc(50% - min(10.2666666667vw, 56px));
  transform: scaleX(-1);
  z-index: -2;
  width: min(20.5333333333vw, 112px);
}
.whenDrink__oneeightTtTxt {
  text-align: center;
}
.whenDrink__oneeightBody {
  background-color: white;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: min(9.3333333333vw, 57px) min(7.7333333333vw, 46px);
}
.whenDrink__oneeightList {
  display: flex;
  flex-direction: column;
  gap: min(6.4vw, 34px);
}
.whenDrink__oneeightListItem {
  position: relative;
  display: flex;
  align-items: center;
  gap: min(2.6666666667vw, 14px);
}
.whenDrink__oneeightListItem .num {
  color: white;
  font-size: 3.2rem;
  font-family: var(--font_hikari);
  width: min(10.6666666667vw, 58px);
  height: min(10.6666666667vw, 58px);
  border-radius: 50%;
  background-color: #EEEEEE;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex: 0 0 min(10.6666666667vw, 58px);
}
.whenDrink__oneeightListItem .num::before {
  content: "";
  width: min(2.4vw, 13px);
  height: min(2.1333333333vw, 11px);
  background-color: #EEEEEE;
  mask: url(../images/img_whendrink_numside.svg) no-repeat center center/contain;
  position: absolute;
  top: max(-1.0666666667vw, -7px);
  left: max(-0.2666666667vw, -2px);
}
.whenDrink__oneeightListItem .txt {
  font-size: min(5.8666666667vw, 3.2rem);
  font-weight: 900;
  width: 1fr;
}
.whenDrink__oneeightListItem .txt .fss {
  font-size: 1.6rem;
  margin-left: -0.5em;
}
.whenDrink__oneeightListItem.item01 {
  --itemColor: #ed1c24;
}
.whenDrink__oneeightListItem.item01::before {
  content: "";
  width: min(22.4vw, 123px);
  height: min(19.2vw, 105px);
  background: url(../images/bgimg_whendrink01_sp.webp) no-repeat center center/contain;
  position: absolute;
  top: max(-5.0666666667vw, -27px);
  left: min(48.8vw, 266px);
}
.whenDrink__oneeightListItem.item01 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item01 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item01 .txt {
  color: var(--itemColor);
}
.whenDrink__oneeightListItem.item02 {
  --itemColor: #f16a24;
}
.whenDrink__oneeightListItem.item02::before {
  content: "";
  width: min(20.2666666667vw, 112px);
  height: min(19.7333333333vw, 108px);
  background: url(../images/bgimg_whendrink02_sp.webp) no-repeat center center/contain;
  position: absolute;
  top: min(2.9333333333vw, 15px);
  left: min(57.0666666667vw, 313px);
}
.whenDrink__oneeightListItem.item02 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item02 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item02 .txt {
  color: var(--itemColor);
}
.whenDrink__oneeightListItem.item03 {
  --itemColor: #fbb03b;
}
.whenDrink__oneeightListItem.item03 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item03 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item03 .txt {
  color: var(--itemColor);
}
.whenDrink__oneeightListItem.item04 {
  --itemColor: #ffc700;
}
.whenDrink__oneeightListItem.item04 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item04 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item04 .txt {
  color: var(--itemColor);
}
.whenDrink__oneeightListItem.item05 {
  --itemColor: #8cc63f;
}
.whenDrink__oneeightListItem.item05 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item05 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item05 .txt {
  color: var(--itemColor);
}
.whenDrink__oneeightListItem.item06 {
  --itemColor: #40a799;
}
.whenDrink__oneeightListItem.item06 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item06 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item06 .txt {
  color: var(--itemColor);
}
.whenDrink__oneeightListItem.item07 {
  --itemColor: #2d9dd2;
}
.whenDrink__oneeightListItem.item07::before {
  content: "";
  width: min(21.3333333333vw, 134px);
  height: min(17.0666666667vw, 108px);
  background: url(../images/bgimg_whendrink03_sp.webp) no-repeat center center/contain;
  position: absolute;
  top: max(-21.8666666667vw, -119px);
  left: min(60.8vw, 310px);
}
.whenDrink__oneeightListItem.item07 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item07 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item07 .txt {
  color: var(--itemColor);
}
.whenDrink__oneeightListItem.item08 {
  --itemColor: #0071bc;
}
.whenDrink__oneeightListItem.item08::before {
  content: "";
  width: min(25.6vw, 140px);
  height: min(16.8vw, 93px);
  background: url(../images/bgimg_whendrink04_sp.webp) no-repeat center center/contain;
  position: absolute;
  top: max(-3.2vw, -17px);
  left: min(52.8vw, 289px);
}
.whenDrink__oneeightListItem.item08 .num {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item08 .num::before {
  background-color: var(--itemColor);
}
.whenDrink__oneeightListItem.item08 .txt {
  color: var(--itemColor);
}
.whenDrink__otherImg {
  position: relative;
  width: min(70.4vw, 385px);
  height: min(36.8vw, 204px);
  margin: min(15.2vw, 57px) auto 0;
  transform: translateX(max(-3.4666666667vw, -20px));
}
.whenDrink__otherImg img {
  width: min(29.3333333333vw, 160px);
  height: auto;
}
.whenDrink__otherImg .whenDrink__otherImg__balloon {
  position: absolute;
  top: max(-0.5333333333vw, -5px);
  right: 0;
  width: min(40vw, 219px);
  height: min(18.6666666667vw, 102px);
  background: url(../images/bg_whendrink_btm_balloon.svg) no-repeat center center/contain;
  text-align: center;
  color: white;
  font-family: var(--font_hikari);
  font-size: min(8vw, 4.3rem);
  letter-spacing: -0.1em;
  padding-top: min(4.5333333333vw, 27px);
}
@media screen and (min-width: 1024px) {
  .whenDrink__oneeight {
    padding-top: 0;
    max-width: inherit;
  }
  .whenDrink__oneeightTtlBox {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 9px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 30px;
  }
  .whenDrink__oneeightTtlBox::before {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .whenDrink__oneeightTtlBox::after {
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 16px solid #2e9dd2;
    bottom: -15px;
  }
  .whenDrink__oneeightTtlImg {
    position: static;
    transform: translateX(0) scaleX(1);
    z-index: 0;
    width: 105px;
  }
  .whenDrink__oneeightBody {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 75px 79px;
  }
  .whenDrink__oneeightList {
    flex-wrap: wrap;
    height: 316px;
    gap: 33px;
  }
  .whenDrink__oneeightListItem {
    height: 5.4em;
    gap: 14px;
  }
  .whenDrink__oneeightListItem .num {
    font-size: 4rem;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
  }
  .whenDrink__oneeightListItem .num::before {
    content: "";
    width: 13px;
    height: 11px;
    top: -5px;
    left: -1;
  }
  .whenDrink__oneeightListItem .txt {
    font-size: 2.8rem;
  }
  .whenDrink__oneeightListItem .txt .fss {
    font-size: 2rem;
  }
  .whenDrink__oneeightListItem.item01::before {
    width: 114px;
    height: 97px;
    background: url(../images/bgimg_whendrink01.webp) no-repeat center center/contain;
    top: -25px;
    left: 247px;
  }
  .whenDrink__oneeightListItem.item02::before {
    width: 103px;
    height: 100px;
    background: url(../images/bgimg_whendrink02.webp) no-repeat center center/contain;
    top: 12px;
    left: 289px;
  }
  .whenDrink__oneeightListItem.item05 {
    line-height: 1;
  }
  .whenDrink__oneeightListItem.item07::before {
    content: "";
    width: 124px;
    height: 100px;
    background: url(../images/bgimg_whendrink03.webp) no-repeat center center/contain;
    top: -114px;
    left: 285px;
  }
  .whenDrink__oneeightListItem.item08::before {
    width: 130px;
    height: 86px;
    background: url(../images/bgimg_whendrink04.webp) no-repeat center center/contain;
    top: -20px;
    left: 267px;
  }
  .whenDrink__otherImg {
    width: 345px;
    height: 182px;
    margin-top: 75px;
    transform: translateX(0);
  }
  .whenDrink__otherImg img {
    width: 142px;
  }
  .whenDrink__otherImg .whenDrink__otherImg__balloon {
    position: absolute;
    top: 2px;
    width: 196px;
    height: 92px;
    font-size: 3.9rem;
    padding-top: 22px;
  }
}

@keyframes swaymove {
  0% {
    transform: rotate(0deg);
  }
  25% {
    /* 1/4のタイミングで左5度傾く */
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    /* 3/4のタイミングで右5度傾く */
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.animate__swaymove {
  -webkit-animation-name: swaymove;
  animation-name: swaymove;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.sectDrinkOther {
  padding-top: min(19.2vw, 76px);
}
@media screen and (min-width: 1024px) {
  .sectDrinkOther {
    padding-top: 92px;
  }
}

.hlLv2--drinkOther {
  text-align: center;
  margin-bottom: min(12.2666666667vw, 76px);
  font-size: 4.4rem;
  color: var(--clrOrange);
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  font-family: var(--font_hikari);
  letter-spacing: -0.25em;
  line-height: 1.5;
}
.hlLv2--drinkOther .spUnderline {
  display: inline-block;
  background: radial-gradient(circle, var(--clrOrange) 40%, transparent 60%) bottom repeat-x;
  background-size: 10px 5px; /* ドットの間隔と高さ */
  padding: 0 9px 2px;
}
.hlLv2--drinkOther .spUnderline:first-child {
  padding: 0 7px 2px;
}
@media screen and (min-width: 1024px) {
  .hlLv2--drinkOther {
    margin-bottom: 86px;
    font-size: 6.6rem;
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
    paint-order: stroke;
  }
  .hlLv2--drinkOther .spUnderline {
    background: radial-gradient(circle, var(--clrOrange) 34%, transparent 44%) bottom repeat-x;
    background-size: 16px 12px; /* ドットの間隔と高さ */
    padding: 0 3px 2px 10px;
  }
  .hlLv2--drinkOther .spUnderline:first-child {
    padding: 0 7px 2px;
  }
  .hlLv2--drinkOther .spUnderline:nth-of-type(2) {
    background-position-x: -2px;
  }
}

.drinkOther__listBoxWrap {
  display: flex;
  overflow-x: auto;
  margin-left: -4.2666666667vw;
  margin-right: -4.2666666667vw;
  padding-top: 32px;
  padding-bottom: 10px;
}
.drinkOther__listBox {
  display: flex;
}
.drinkOther__listItem {
  border: var(--clrOrange) solid 3px;
  background-color: white;
  padding: 39px 13px 13px;
  border-radius: 16px;
  position: relative;
}
.drinkOther__listItem:last-child::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 4.2666666667vw;
  height: 1px;
}
@media screen and (max-width: 1023px) {
  .drinkOther__listItem {
    animation: none;
    opacity: 1;
  }
}
.drinkOther__listNum {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--clrOrange);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: white;
  font-family: var(--font_hikari);
  font-size: 4.4rem;
  text-align: center;
  line-height: 58px;
}
.drinkOther__listTxt {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4.5em;
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--clrOrange);
  text-align: center;
  line-height: 1.5;
}
.drinkOther__listImg {
  height: 153px;
}
.drinkOther__balloonBox {
  margin-top: 48px;
  position: relative;
  z-index: 0;
}
.drinkOther__balloonBox::before {
  content: "";
  width: 81px;
  height: 84px;
  background: url(../images/img_mizuchan02_sp.png) no-repeat center top/contain;
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: -1;
}
.drinkOther__balloonBox::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 11px solid var(--clrOrange);
  border-bottom: 0;
  position: absolute;
  top: -8px;
  left: 23.2vw;
  transform: rotate(45deg);
}
.drinkOther__balloonTxt {
  text-align: center;
  color: white;
  font-weight: 500;
  background-color: var(--clrOrange);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  width: 100%;
  height: 4.5em;
}
.drinkOther__btm {
  margin-top: 40px;
  position: relative;
  height: min(361px + 122.6666666667vw, 452px);
}
.drinkOther__btmTxt {
  padding: 50px 0 56px;
  text-align: center;
  font-size: 2.5rem;
  line-height: 2;
  background: url(../images/bg_drinkother_btmtxt_sp.svg) no-repeat center center/contain;
}
.drinkOther__btmTxt .normal {
  color: var(--black90);
  font-weight: 700;
  display: inline-block;
  background: radial-gradient(circle, var(--black90) 20%, transparent 46%) bottom repeat-x;
  background-size: 12px 4px;
  padding: 0 5px;
}
.drinkOther__btmTxt .normal:nth-of-type(3) {
  margin-top: 5px;
}
.drinkOther__btmTxt strong {
  color: var(--clrOrange);
  font-weight: 900;
  background: radial-gradient(circle, var(--clrOrange) 20%, transparent 46%) bottom repeat-x;
  background-size: 12px 4px;
  padding: 0 4px 3px;
}
.drinkOther__btmImgLeft, .drinkOther__btmImgRight {
  position: absolute;
}
.drinkOther__btmImgLeft {
  bottom: 0;
  right: calc(50% + min(14.9333333333vw, 86px));
}
.drinkOther__btmImgLeft img {
  width: min(32vw, 161px);
  height: auto;
}
.drinkOther__btmImgRight {
  bottom: 0;
  left: calc(50% + min(13.6vw, 83px));
}
.drinkOther__btmImgRight img {
  width: min(32.5333333333vw, 164px);
  height: auto;
}
@media screen and (min-width: 768px) {
  .drinkOther__btm {
    height: 422px;
  }
  .drinkOther__btmTxt {
    padding: 80px 0 86px;
    font-size: 2.5rem;
    background-image: url(../images/bg_drinkother_btmtxt_pc.svg);
  }
}
@media screen and (min-width: 1024px) {
  .drinkOther__listBoxWrap {
    display: block;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .drinkOther__listBox {
    display: grid;
    grid-template-columns: calc(50% - 32px) calc(50% - 32px);
    gap: 64px;
  }
  .drinkOther__listItem {
    padding: 45px 28px 29px;
  }
  .drinkOther__listItem:last-child::after {
    display: none;
  }
  .drinkOther__listNum {
    top: -32px;
    width: 56px;
    height: 56px;
    font-size: 4.2rem;
    line-height: 56px;
  }
  .drinkOther__listTxt {
    height: 3em;
    font-size: 2.1rem;
  }
  .drinkOther__listImg {
    height: auto;
    text-align: center;
  }
  .drinkOther__balloonBox {
    margin-top: 40px;
  }
  .drinkOther__balloonBox::before {
    width: 81px;
    height: 84px;
    top: -60px;
    left: 8px;
  }
  .drinkOther__balloonBox::after {
    left: 90px;
  }
  .drinkOther__btm {
    height: 486px;
  }
  .drinkOther__btmTxt {
    padding: 102px 0 85px;
    font-size: 3.2rem;
    background: url(../images/bg_drinkother_btmtxt_pc.svg) no-repeat center center/contain;
  }
  .drinkOther__btmTxt .normal {
    color: var(--black90);
    font-weight: 700;
    display: inline-block;
    background: radial-gradient(circle, var(--black90) 30%, transparent 46%) bottom repeat-x;
    background-size: 14px 6px;
    padding: 0 2px;
  }
  .drinkOther__btmTxt .normal:nth-of-type(2) {
    background-position: 4px bottom;
  }
  .drinkOther__btmTxt .normal:nth-of-type(3) {
    margin-top: 5px;
  }
  .drinkOther__btmTxt .normal:nth-of-type(4) {
    background-position: 4px bottom;
  }
  .drinkOther__btmTxt strong {
    background: radial-gradient(circle, var(--clrOrange) 30%, transparent 46%) bottom repeat-x;
    background-size: 14px 6px;
    padding: 0 0 5px;
  }
  .drinkOther__btmImgLeft {
    left: 49px;
    right: auto;
  }
  .drinkOther__btmImgLeft img {
    width: 217px;
    height: auto;
  }
  .drinkOther__btmImgRight {
    right: 32px;
    left: auto;
  }
  .drinkOther__btmImgRight img {
    width: 221px;
    height: auto;
  }
}
@media screen and (min-width: 1280px) {
  .drinkOther__listTxt {
    font-size: 2.3rem;
  }
}

.sectChildHydration {
  padding: min(23.4666666667vw, 76px) 0;
}

.hlTopTxt {
  text-align: center;
  font-size: 4.2rem;
  font-weight: 900;
  color: #0171BB;
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  margin-bottom: 40px;
}

.hlLv2--childHydration {
  text-align: center;
  color: var(--clrLightBlue02);
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.5;
}
.hlLv2--childHydration .marker {
  background: linear-gradient(transparent 70%, white 50%);
}
.hlLv2--childHydration strong {
  font-weight: 900;
}

.hlLv3__innerTtl {
  text-align: center;
  color: var(--clrLightBlue02);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.4;
  padding-bottom: 2.6666666667vw;
  border-bottom: var(--clrLightBlue02) solid 2px;
  position: relative;
  margin-bottom: 40px;
}
.hlLv3__innerTtl::before, .hlLv3__innerTtl::after {
  content: "";
  border-style: solid;
  border-width: 12px 10px 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.hlLv3__innerTtl::before {
  border-color: var(--clrLightBlue02) transparent transparent;
  bottom: -12px;
}
.hlLv3__innerTtl::after {
  border-color: white transparent transparent;
  bottom: -9px;
}

@media screen and (min-width: 1024px) {
  .sectChildHydration {
    padding: 116px 0;
  }
  .hlTopTxt {
    font-size: 5.6rem;
    font-weight: 900;
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
    paint-order: stroke;
    margin-bottom: 52px;
  }
  .hlLv2--childHydration {
    font-size: 4.2rem;
  }
  .hlLv3__innerTtl {
    font-size: 3.2rem;
    padding-bottom: 28px;
    margin-bottom: 52px;
    border-bottom-width: 3px;
  }
  .hlLv3__innerTtl::before, .hlLv3__innerTtl::after {
    border-width: 14px 12px 0;
  }
  .hlLv3__innerTtl::before {
    bottom: -14px;
  }
  .hlLv3__innerTtl::after {
    bottom: -9px;
  }
}
.childHydration__lead {
  color: var(--black90);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: justify;
  margin-bottom: 40px;
}
.childHydration__txt {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: justify;
  margin-bottom: 40px;
}
.childHydration__txt strong {
  color: var(--clrLightBlue02);
  font-weight: 900;
}
.childHydration__innerBox {
  background-color: white;
  padding: 25px 4.2666666667vw 4.2666666667vw;
  border-radius: 16px;
}
.childHydration__lisklist {
  display: grid;
  grid-template-columns: calc(50% - 6px) calc(50% - 6px);
  row-gap: 32px;
  column-gap: 12px;
  margin-bottom: 40px;
}
.childHydration__lisklistItem {
  border: var(--clrLightBlue02) solid 2px;
  border-radius: 8px;
  padding: min(6.4vw, 30px) 12px 2.6666666667vw;
  text-align: center;
  color: var(--clrLightBlue02);
  font-size: 1.8rem;
  font-weight: 900;
  position: relative;
}
.childHydration__lisklistItem:nth-child(2), .childHydration__lisklistItem:nth-child(3) {
  background-color: #FFFBC3;
}
.childHydration__lisklistItem:nth-child(1), .childHydration__lisklistItem:nth-child(4) {
  background-color: #C8EDF3;
}
.childHydration__lisklistNum {
  position: absolute;
  top: -19px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background-color: var(--clrLightBlue02);
  border-radius: 50%;
  color: white;
  font-family: var(--font_hikari);
  font-size: 2.4rem;
  font-weight: 400;
  text-align: center;
  line-height: 36px;
}
@media screen and (min-width: 1024px) {
  .childHydration__lead {
    font-size: 2.4rem;
    line-height: 1.6;
    margin: 0 auto 52px;
    width: 800px;
  }
  .childHydration__txt {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 40px;
  }
  .childHydration__innerBox {
    background-color: white;
    padding: 52px 80px 60px;
    border-radius: 24px;
  }
  .childHydration__lisklist {
    width: 688px;
    grid-template-columns: calc(50% - 24px) calc(50% - 24px);
    row-gap: 48px;
    column-gap: 48px;
    margin: 0 auto 60px;
  }
  .childHydration__lisklistItem {
    border-width: 3px;
    border-radius: 16px;
    padding: 40px 0 40px;
    font-size: 2.6rem;
  }
  .childHydration__lisklistNum {
    top: -23px;
    width: 48px;
    height: 48px;
    font-size: 3.6rem;
    line-height: 48px;
  }
}

.badconditionWrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.badcondition__item {
  padding-bottom: 16px;
}
.badcondition__item .accordionContents {
  margin-top: -16px;
}

.badcondition__label {
  display: block;
  background-color: var(--clrLightBlue02);
  border-radius: 16px;
  color: white;
  font-size: 2.4rem;
  font-weight: 900;
  height: 64px;
  line-height: 64px;
  text-align: center;
  position: relative;
}
.badcondition__label::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 20px;
  width: 14px;
  height: 14px;
  border-right: white solid 3px;
  border-bottom: white solid 3px;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s;
}
.badcondition__btn:checked + .badcondition__label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.badcondition__btn:checked + .badcondition__label::after {
  transform: translateY(calc(-50% + 4px)) rotate(225deg);
}
.badcondition__contentsInner {
  border: var(--clrLightBlue02) solid 3px;
  border-top: none;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: min(7.4666666667vw + 16px, 44px) 3.7333333333vw;
}
.badcondition__ttl {
  text-align: center;
  color: var(--clrLightBlue02);
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.4;
}
.badcondition__ttl--constipation {
  text-align: left;
  position: relative;
}
.badcondition__ttl--constipation::after {
  content: "";
  width: 56px;
  height: 58px;
  background: url(../images/img_badcondition_constipation_sp.webp) no-repeat center center/contain;
  position: absolute;
  bottom: 0;
  right: 5px;
}
.badcondition__lead {
  text-align: justify;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 500;
}
.badcondition__subttl {
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--clrLightBlue02);
}
.badcondition__subttl::before {
  content: "◆";
  margin-right: 5px;
}
.badcondition__txt {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}
.badcondition__list {
  padding: 3px 0;
}
.badcondition__list li {
  padding-left: 1em;
  position: relative;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}
.badcondition__list li::before {
  content: "・";
  position: absolute;
  top: 0em;
  left: 0;
}

@media screen and (min-width: 1024px) {
  .badconditionWrap {
    flex-direction: row;
    gap: 40px;
  }
  .badcondition__item {
    width: calc(50% - 20px);
  }
  .badcondition__contentsInner {
    padding: 44px 24px;
  }
  .badcondition__ttl {
    font-size: 1.7rem;
  }
  .badcondition__ttl--constipation::after {
    content: "";
    width: 50px;
    height: 53px;
    right: 0px;
  }
  .badcondition__lead {
    line-height: 1.6;
  }
  .badcondition__txt {
    line-height: 1.6;
  }
}
@media screen and (min-width: 1280px) {
  .badcondition__ttl {
    font-size: 1.9rem;
  }
}
.sectPoint {
  padding: min(17.0666666667vw, 76px) 0 min(29.8666666667vw, 112px);
}

.hlLv2--point {
  color: var(--clrOrange);
  font-size: 3.7rem;
  font-weight: 900;
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  text-align: center;
  line-height: 1.5;
  position: relative;
}
.hlLv2--point::after {
  content: "";
  width: 80px;
  height: 100px;
  position: absolute;
  top: -46px;
  right: 0;
  background: url(../images/img_mizuchan01@2x.webp) no-repeat center center/contain;
}

@media screen and (min-width: 1024px) {
  .sectPoint {
    padding: 134px 0 160px;
  }
  .hlLv2--point {
    font-size: 5.6rem;
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
    paint-order: stroke;
  }
  .hlLv2--point::after {
    top: -16px;
    right: -23px;
    background-image: url(../images/img_mizuchan01.webp);
  }
}
.pointBox {
  position: relative;
  border: var(--clrOrange) solid 3px;
  border-radius: 16px;
  margin-top: 84px;
  padding: 60px max(3.7333333333vw, 14px) 32px;
  background-color: white;
}
.pointBox__num {
  position: absolute;
  width: 72px;
  height: 72px;
  background-color: var(--clrOrange);
  border-radius: 50%;
  text-align: center;
  color: white;
  padding-top: 15px;
  top: -37px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  font-family: var(--font_hikari);
  letter-spacing: -0.15em;
}
.pointBox__num span {
  display: block;
  font-size: 3.2rem;
  line-height: 1;
}
.pointBox__ttl {
  text-align: center;
  color: var(--clrOrange);
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: 28px;
  line-height: 1.5;
}
.pointBox__marker {
  background: linear-gradient(transparent 70%, #FFFE03 50%);
}
.pointBox__txt {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: justify;
}
.pointBox__txt strong {
  color: var(--clrOrange);
  font-weight: 700;
}
.pointBox__txt + .pointBox__txtatt {
  margin-top: 2em;
}
.pointBox__txtatt {
  font-size: 1.1rem;
  font-weight: 300;
  margin-top: 5px;
  line-height: 1.5;
  text-align: justify;
  color: #808080;
}
.pointBox__txtatt.num {
  padding-left: 2.7em;
  text-indent: -2.7em;
}
.pointBox__txtatt.num::before {
  counter-increment: number 1;
  content: "※" counter(number) "：";
}
.pointBox__txtatt.nonum {
  padding-left: 1em;
  text-indent: -1em;
}
.pointBox__txtatt.nonum::before {
  content: "※";
}
@media screen and (min-width: 1024px) {
  .pointBox {
    border-width: 4px;
    border-radius: 24px;
    margin-top: 116 px;
    padding: 92px 74px 52px;
  }
  .pointBox__num {
    width: 104px;
    height: 104px;
    padding-top: 18px;
    top: -52px;
    font-size: 2rem;
  }
  .pointBox__num span {
    font-size: 4.8rem;
  }
  .pointBox__ttl {
    font-size: 3.2rem;
    margin-bottom: 56px;
  }
  .pointBox__txt {
    font-size: 2rem;
  }
  .pointBox__txt + .pointBox__txtatt {
    margin-top: 3em;
  }
}

.point__catch {
  margin-top: 48px;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--clrLightBlue02);
}
.point__catch span {
  background: linear-gradient(transparent 70%, white 50%);
}
.point__txt {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 36px;
  text-align: justify;
}
.point__imgBox {
  text-align: center;
  margin-top: 10px;
}
.point__imgBox img {
  width: min(75.4666666667vw, 444px);
}
.point__btnBox {
  text-align: center;
  margin-top: 30px;
}
.point__btnBox__btmtxt {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: min(9.6vw, 48px);
}
@media screen and (min-width: 768px) {
  .point__txt {
    text-align: center;
  }
  .point__imgBox {
    margin-top: 30px;
  }
  .point__btnBox__btmtxt {
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .point__catch {
    margin-top: 96px;
    font-size: 4rem;
  }
  .point__txt {
    font-size: 2.4rem;
    margin-top: 52px;
    text-align: center;
  }
  .point__imgBox {
    margin-top: 36px;
  }
  .point__imgBox img {
    width: 443px;
  }
  .point__btnBox {
    text-align: center;
    margin-top: 44px;
  }
}

.sectEnvironment {
  padding: min(16vw, 60px) 0;
}
.sectEnvironment .sectInner {
  width: min(100% - 8.5333333333vw, 1200px);
}

.hlLv2--environment {
  color: var(--clrLightBlue02);
  font-size: 3.4rem;
  font-weight: 900;
  -webkit-text-stroke: 8px white;
  text-stroke: 8px white;
  paint-order: stroke;
  text-align: center;
  line-height: 1.5;
  position: relative;
  margin-bottom: 30px;
}

.hlLv3--environment {
  text-align: center;
  color: var(--clrLightBlue02);
  font-size: 3.2rem;
  font-weight: 900;
  margin-bottom: 32px;
  line-height: 1.5;
}
.hlLv3--environment .marker {
  background: linear-gradient(transparent 70%, white 50%);
}

@media screen and (min-width: 1024px) {
  .sectEnvironment {
    padding: 120px 0 160px;
  }
  .hlLv2--environment {
    font-size: 5.6rem;
    -webkit-text-stroke: 12px white;
    text-stroke: 12px white;
    paint-order: stroke;
    margin-bottom: 70px;
  }
  .hlLv3--environment {
    font-size: 4.8rem;
    margin-bottom: 64px;
  }
}
.environment__imgBox {
  margin-left: -4.2666666667vw;
  margin-right: -4.2666666667vw;
  margin-bottom: 6.4vw;
  text-align: center;
}
.environment__waterserverBox {
  display: flex;
  flex-direction: column;
  margin-bottom: 76px;
}
.environment__waterserverTxtBox {
  display: contents;
}
.environment__waterserverLogo {
  order: 2;
  text-align: center;
  margin-top: 60px;
}
.environment__waterserverLogo img {
  width: min(43.7333333333vw, 245px);
}
.environment__waterserverTxt {
  order: 1;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}
.environment__waterserverImgBox {
  order: 3;
  text-align: center;
  margin-top: 30px;
}
.environment__waterserverImg {
  display: inline-block;
  width: min(83.4666666667vw, 313px);
  padding-right: min(17.8666666667vw, 67px);
}
.environment__selectPointBoxWrap {
  overflow-x: auto;
  margin-left: -4.2666666667vw;
  margin-right: -4.2666666667vw;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.environment__selectPointBox {
  display: flex;
}
.environment__selectPointItem {
  border: var(--clrLightBlue02) solid 3px;
  background-color: white;
  border-radius: 16px;
  position: relative;
}
.environment__selectPointItem:last-child::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 4.2666666667vw;
  height: 1px;
}
@media screen and (max-width: 1023px) {
  .environment__selectPointItem {
    animation: none;
    opacity: 1;
  }
}
.environment__selectTxt {
  text-align: center;
  color: var(--clrLightBlue02);
  font-size: 1.8rem;
  font-weight: 900;
  padding: 15px 10px;
  position: relative;
  line-height: 1.5;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.environment__selectTxt::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 11px solid white;
  border-bottom: 0;
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
}
.environment__selectTxt sup {
  color: var(--black90);
}
.environment__selectImg img {
  vertical-align: bottom;
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
}
.environment__attTxt {
  font-size: 1.1rem;
  line-height: 1.5;
}
.environment__btnBox {
  margin-top: 60px;
  text-align: center;
}
.environment__btn {
  display: inline-block;
  width: min(100%, 560px);
  position: relative;
  border: var(--clrBlue) solid 2px;
  background-color: var(--clrYellow);
  border-radius: 10px;
  height: 64px;
  font-size: 2rem;
  font-weight: 900;
  color: var(--clrBlue);
  padding-top: 26px;
  box-shadow: 0px 8px 0px 0px rgb(0, 113, 189);
}
.environment__btn::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 15px;
  width: 10px;
  height: 10px;
  border-right: var(--clrBlue) solid 2px;
  border-bottom: var(--clrBlue) solid 2px;
  transform: rotate(-45deg);
}
.environment__btn .microCopy {
  width: min(46.6666666667vw, 260px);
  height: 34px;
  line-height: 34px;
  color: white;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 900;
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--clrBlue);
  border-radius: 17px;
}
.environment__btn .microCopy::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 7px solid var(--clrBlue);
  border-bottom: 0;
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .environment__imgBox img {
    border-radius: 16px;
  }
  .environment__waterserverBox {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 20px;
    max-width: 851px;
    margin-inline: auto;
  }
  .environment__waterserverTxtBox {
    display: block;
    width: calc(100% - 331px);
  }
  .environment__waterserverLogo {
    text-align: center;
    margin-top: 0;
    margin-bottom: 48px;
  }
  .environment__waterserverTxt {
    font-size: 2rem;
  }
  .environment__waterserverImgBox {
    text-align: center;
    margin-top: 0;
  }
  .environment__waterserverImg {
    display: block;
    width: 311px;
    padding-right: 0;
  }
}
@media screen and (min-width: 1024px) {
  .environment__waterserverTxtBox {
    width: 520px;
  }
  .environment__waterserverTxt {
    font-size: 2.4rem;
  }
  .environment__selectPointBoxWrap {
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-bottom: 0;
  }
  .environment__selectPointBox {
    display: flex;
    gap: 36px;
  }
  .environment__selectPointItem {
    flex: 0 1 auto;
  }
  .environment__selectPointItem:last-child::after {
    display: none;
  }
  .environment__selectTxt {
    padding: 25px 0px 34px;
  }
  .environment__attTxt {
    text-align: center;
    margin-top: 20px;
  }
  .environment__btnBox {
    margin-top: 80px;
  }
  .environment__btn {
    border-width: 3px;
    border-radius: 16px;
    height: 104px;
    font-size: 3rem;
    padding-top: 45px;
    box-shadow: 0px 8px 0px 0px rgb(0, 113, 189);
  }
  .environment__btn::after {
    top: 59px;
    right: 28px;
    width: 14px;
    height: 14px;
    border-right: var(--clrBlue) solid 3px;
    border-bottom: var(--clrBlue) solid 3px;
  }
  .environment__btn .microCopy {
    width: min(46.6666666667vw, 260px);
    height: 50px;
    line-height: 50px;
    font-size: 2.4rem;
    top: -26px;
    border-radius: 25px;
  }
  .environment__btn .microCopy::after {
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 9px solid var(--clrBlue);
    bottom: -9px;
  }
}
@media screen and (min-width: 1280px) {
  .environment__selectTxt {
    font-size: 2.4rem;
  }
}

@media (any-hover: hover) {
  .environment__btn {
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  .environment__btn::after {
    transition: right 0.3s;
  }
  .environment__btn .microCopy {
    transition: transform 0.3s;
  }
  .environment__btn:hover {
    background-color: #fff177;
    box-shadow: 0px 3px 0px 0px rgb(0, 113, 189);
  }
  .environment__btn:hover::after {
    right: 24px;
  }
  .environment__btn:hover .microCopy {
    transform: translate(-50%, -4px);
  }
}
.sectCompanyInfo {
  padding-bottom: 72px;
}

.companyInfo__ttl {
  text-align: center;
  margin-bottom: 60px;
}
.companyInfo__ttl img {
  width: min(50%, 275px);
  height: auto;
}
.companyInfo__tbl {
  display: grid;
  grid-template-columns: 10em 1fr;
  border-top: white solid 1px;
}
.companyInfo__tbl dt, .companyInfo__tbl dd {
  font-size: 1.4rem;
  font-weight: 500;
  padding: 36px 0;
  border-bottom: white solid 1px;
}
.companyInfo__tbl dt {
  padding-left: 10px;
}

@media screen and (min-width: 768px) {
  .companyInfo__ttl {
    margin-bottom: 72px;
  }
  .companyInfo__tbl {
    grid-template-columns: 44.5% 55.5%;
  }
  .companyInfo__tbl dt, .companyInfo__tbl dd {
    font-size: 2rem;
    padding: 36px 0;
  }
  .companyInfo__tbl dt {
    padding-left: calc(100% - 200px);
  }
  .companyInfo__tbl dd {
    padding-right: calc(100% - 310px);
  }
}/*# sourceMappingURL=style.css.map */