@charset "UTF-8";

:root{
  font-size: 62.5%;
}

@media (min-width: 768px){
  :root{
    font-size: min(10px, calc(10 * (100vw / 1440)));
  }
}

@media (max-width: 767px){
  .pconly{
    display: none !important;
  }
}

@media (min-width: 768px){
  .sponly{
    display: none !important;
  }
}

.global-contents{
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  color: var(--color-main);
}

@media (hover: hover){
  main :where(a){
    transition: opacity var(--transition-default);
  }

  main :where(a:hover){
    opacity: 0.6;
  }
}

@keyframes skewUp{
  0% {
    transform: translate3d(0, 20rem, 0) skewY(12deg);
    opacity: 0;
  }

  100% {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}

.u-animation[data-animation-type="skew-up"]{
  opacity: 0;
}

.u-animation[data-animation-type="skew-up"].is-animate{
  animation: skewUp 1.6s var(--transition-default) forwards;
}

@keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.u-animation[data-animation-type="fade-in"]{
  opacity: 0;
}

.u-animation[data-animation-type="fade-in"].is-animate{
  animation: fadeIn 1s var(--transition-default) forwards;
}