@charset "utf-8";

/* ==========================
swiperslider
========================== */

#parallax.swiper-container { width: 100%; overflow-y: hidden; position: relative; }
#parallax .swiper-slide {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: #fff;
}

#parallax .swiper-slide:nth-of-type(1) { background-color: #f00; }
#parallax .swiper-slide:nth-of-type(2) { background-color: #73a82d; }
#parallax .swiper-slide:nth-of-type(3) { background-color: #2a6d39; }

#parallax .swiper-pagination 
{ position: absolute; z-index: 1; left: calc(50% - 11px); }

#parallax .swiper-pagination-bullet { display: block; float: left; width: 1px; height: 30px; border-radius: 0; opacity: .8; margin-top: 20px ; cursor: pointer; -webkit-transition: var(--transition); transition: var(--transition); background-color: #fff; margin-left: 0px; }
#parallax .swiper-pagination-bullet:not(:first-child) { margin-left: 10px; }
#parallax .swiper-pagination-bullet-active { height: 50px; margin-top: 0px ;background-color: var(--color-theme); }

@media screen and (min-width: 768px) {
#parallax .swiper-slide { font-size: 60px; }
}

@media screen and (max-width: 767px) {
#parallax.swiper-container { height: 50vh; overflow-y: hidden; }
#parallax .swiper-slide { height: 50vh; }
#parallax .swiper-pagination { top: calc(50vh - 18px); }

}

/* スクロールダウンの位置 */
.scroll {
position: absolute;
right: 50%;
top: 100vh;
writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
animation: scroll 2s infinite;
background-color: hsla(0,0%,100%,1);
opacity: 0;
bottom: 0px;
content: "";
height: 50px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
animation-iteration-count: 5;
}
@keyframes scroll {
1% {
transform: scale(1, 0);
transform-origin: 0 0;
opacity: .8;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
opacity: .8;
}
51% {
transform: scale(1, 1);
transform-origin: 0 100%;
opacity: .8;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
opacity: .8;
}

}