@import url(./reset.css); /* リセット */
@import url(./basic.css); /* Basic */
@import url(./header.css); /* ヘッダ & ヘッダパーツ */
@import url(./footer.css); /* フッタ & フッタパーツ */
@import url(./navigation.css); /* ナビ */

a.scroll {
position: absolute;
top: -4vw;
left: 2vw;
font-size: 0;
width: 2.4vw;
height: 23vw;
pointer-events: none;
background: url(../images/top/scroll.png) center top / contain no-repeat;
z-index: 10;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column-reverse;
}
@media only screen and (min-width: 769px) {
a.scroll {
width: 0.8vw;
height: 7.5vw;
}
}
a.scroll::before {
content: "";
display: block;
width: 1px;
height: 13vw;
background: white;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
transform: translateX(.4vw);
top: auto;
}
@media only screen and (min-width: 769px) {
a.scroll::before {
height: 4vw;
transform: translateX(.16vw);
}
}
a.scroll::after {
content: "";
display: block;
width: 2vw;
aspect-ratio: 1/1;
margin: auto;
position: absolute;
opacity: 0;
left:0;
right: 0;
bottom: 0;
transform: translate(.4vw, -11.6vw);
top: auto;
background: url(../images/top/scroll-arrow.png) center / contain no-repeat;
animation: scroll-arrow 3s cubic-bezier(0,.83,.23,.96) infinite both running;
}
@media only screen and (min-width: 769px) {
a.scroll::after {
width: 1vw;
left:-2px;
transform: translate(.16vw, -11.6vw);
}
}
@media only screen and (min-width: 961px) {
a.scroll::after {
width: 1vw;
transform: translate(.16vw, -11.6vw);
}
}
@keyframes scroll-arrow {
0%{
opacity: 0;
transform: translate(.4vw, -11.6vw);
}
70% {
opacity: 1;
transform: translate(.4vw, 0.8vw);
}
100% {
opacity: 1;
transform: translate(.4vw, 0.8vw);
}
}
@media only screen and (min-width: 769px) {
@keyframes scroll-arrow {
0%{
opacity: 0;
transform: translate(.16vw, -11.6vw);
}
70% {
opacity: 1;
transform: translate(.16vw, 0.8vw);
}
100% {
opacity: 1;
transform: translate(.16vw, 0.8vw);
}
}
}
