@charset "UTF-8";
/*------------------------------------------------------------
contents common settings
------------------------------------------------------------ */
.anim_parent{ width: 100%; height: 100vh; position: relative; min-height: 720px;
 background-image: url("../img/anim/space.jpg"); background-size: cover; background-position: center center; background-attachment: fixed;}

.s_net{ animation: s_net 10s ease; display: block; position: absolute; width: 300px; margin: auto; top: calc(50% - 250px); left: 0; right: 0;}
.linen{ animation: linen 10s ease; display: block; position: absolute; width: 700px; margin: auto; top: calc(50% + 50px); left: 0; right: 0;}
.inquiry{ animation: inquiry 10s ease; display: block; position: absolute; width: 300px; margin: auto; top: calc(50% + 200px); left: 0; right: 0;}
.arrow{ animation: arrow 10s ease; display: block; position: absolute; width: 61px; margin: auto; bottom: 20px; left: 0; right: 0; opacity: 1;}
.arrow_not{ display: block; position: absolute; width: 61px; margin: auto; bottom: 20px; left: 0; right: 0; opacity: 1;}
.arrow_anim{ animation: arrow_anim 1s ease infinite;}


@keyframes s_net {
0% { opacity: 0; top: calc(50% - 150px);}
5% { opacity: 0; top: calc(50% - 150px);}
20% { opacity: 1; top: calc(50% - 150px);}
40% { top: calc(50% - 250px);}
100%{ top: calc(50% - 250px);}
}

@keyframes linen {
0% { opacity: 0; }
40% { opacity: 0;}
60% { opacity: 1;}
100%{ opacity: 1;}
}

@keyframes inquiry {
0% { opacity: 0; visibility: hidden;}
60% { opacity: 0; visibility: hidden;}
  61%{ visibility:inherit;}
80% { opacity: 1;}
100%{ opacity: 1;}
}

@keyframes arrow {
0% { opacity: 0;}
60% { opacity: 0;}
80%{ opacity: 1;}
}

@keyframes arrow_anim {
0% { opacity: 1;}
50% { opacity: 0.5;}
100%{ opacity: 1;}
}


@media screen and (max-width: 800px) {
.anim_parent{ min-height: 100px; height: calc(100vh - 50px);}
.s_net{ width: 300px; margin: auto; top: calc(50% - 250px); left: 0; right: 0;}
.linen{ width: 90%; margin: auto; }
.inquiry{ top: calc(50% + 150px); width: 60%;}
.arrow{ bottom: 30px;}
.anim_parent{ background-attachment: inherit;}
}