@charset "UTF-8";
/* CSS Document */
@import url("https://use.typekit.net/doy3rmi.css");
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic&display=swap');

html, body {
    height: 100%;
}

html {
  font-size: 75%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 87.5%;
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 100%;
  }
}

body { display: flex; justify-content: center; align-items: center; margin:10px 0; text-align:center; overflow:hidden;
background: linear-gradient(0deg, #fd1e06, #02f5cc, #3507c5, #fd1e06);
background-size: 800% 800%; animation: back 23s ease infinite;}
@-webkit-keyframes back {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes back { 
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

.flex-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
     max-width: 500px;
}

h1 {
font-size: 8em;
font-family: "modula-serif", serif;
font-weight: 400;
user-select: none;
letter-spacing: 0.2em;
text-indent: 0.2em;
color: #FFFFFF;
}

h2 {
font-size: 3em;
font-family: "modula-serif", serif;
font-weight: 400;
user-select: none;
color: #FFFFFF;
letter-spacing: 0.2em;
text-indent: 0.2em;
}

p {
font-size: 1.2em;
font-family: "Sawarabi Gothic", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'sans-serif';
font-weight: 400;
user-select: none;
letter-spacing: normal;
color: #FFFFFF;
}

.my-arrow {
color: #FFFFFF;
}

.maintext {
min-width: 200px;
}

.enter {
    min-width: 200px;
    position: relative;
    transition-duration: 0.5s;
	transition-timing-function:ease-in-out;
}
.enter:hover {
    margin-top:-40px;
    transition: .7s;
}
.enter a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.animated fadeInDownBig {animation-delay: 3s; animation-duration: 4s; animation-timing-function: ease-in-out;}
@-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);
  }
}

.fadeIn {animation-duration: 4s; animation-delay: 3s;}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}