@charset "UTF-8";
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
@import url(https://fonts.googleapis.com/css2?family=Marcellus&display=swap);
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0; }

.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0; }

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(-30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0; }

.scroll_left.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0); }

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0; }

.scroll_right.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0); }

/*------------------------*/
/*------------------------*/
/*------- layout -------*/
ul.box {
  width: 80%;
  max-width: 300px;
  margin: 0 auto;
  padding: 10vw;
  list-style: none; }

ul.box li {
  margin-bottom: 400px; }
  ul.box li img {
    max-width: 100%; }

/*------- base -------*/
.scrollify{
  width: 100%;
  height: 100vh;
}

.section01{
  background-color: #ff7575;
}

.section02{
  background-color: #75ff75;
}

.section03{
  background-color: #ffff75;
}

.section04{
  background-color: #75baff;
}
.container{
  position: relative;
}
.page_wrap{
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.page_wrap li{
  margin-bottom: 20px;
}

.page_wrap a{
  border: 1px solid #e1e1e1;
  border-radius: 50%;
  display: block;
  width: 10px;
  height: 10px;
}
.page_wrap a.active{
  background: #eeeeee;
}