@charset "UTF-8";

/* ハンバーガーメニュー */

.mobile-menu {
    position: fixed;
    right: 0;
    top: 60px;
    width: 300px;
  }

#container {
    position: relative;
    height: 100%;
    z-index: 2;
    transition: all 0.5s;
  }

  
.mobile-menu__btn {
position: fixed;
right:50px;
top:30px;
background-color: unset;
border: none;
outline: none !important;
cursor: pointer;
z-index: 10;
}
.mobile-menu__btn > span {
background-color: rgb(89, 89, 89);
width: 35px;
height: 2px;
display: block;
margin-bottom: 9px;
transition: transform 0.7s;
-webkit-transition: transform 0.7s;
}
.mobile-menu__btn > span:last-child {
margin-bottom: 0;
}
.mobile-menu__cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(33, 33, 33, 0.4);
opacity: 0;
z-index: 10;
visibility: hidden;
transition: opacity 1s;
-webkit-transition: opacity 1s;
cursor: pointer;
}
.mobile-menu__main {
padding: 0;
perspective: 2000px;
transform-style: preserve-3d;
}
.mobile-menu__item {
list-style: none;
display: block;
transform: translate3d(0, 0, -1000px);
padding: 0 40px;
transition: transform 0.3s, opacity 0.2s;
-webkit-transition: transform 0.3s, opacity 0.2s;
}
.mobile-menu__link {
display: block;
margin-top: 30px;
color: black;
text-decoration: none;
}

.menu-open #container {
transform: translate(-300px, 60px);
-webkit-transform: translate(-300px, 60px);
box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
}
.header_nav2 .mobile-menu__main{
    /* display: none; */
    opacity: 0;
} 
.header_nav2.menu-open .mobile-menu__main{
    /* display: block; */
    opacity: 1;
} 
.menu-open .mobile-menu__cover {
opacity: 1;
visibility: visible;
}
.menu-open .mobile-menu__item {
transform: none;
-webkit-transform: none;
}
.menu-open .mobile-menu__item:nth-child(1) {
transition-delay: 0.07s;
-webkit-transition-delay: 0.07s;
}
.menu-open .mobile-menu__item:nth-child(2) {
transition-delay: 0.14s;
-webkit-transition-delay: 0.14s;
}
.menu-open .mobile-menu__item:nth-child(3) {
transition-delay: 0.21s;
-webkit-transition-delay: 0.21s;
}
.menu-open .mobile-menu__item:nth-child(4) {
transition-delay: 0.28s;
-webkit-transition-delay: 0.28s;
}
.menu-open .mobile-menu__item:nth-child(5) {
transition-delay: 0.35s;
-webkit-transition-delay: 0.35s;
}
.menu-open .mobile-menu__btn > span {
background-color: black;
}
.menu-open .mobile-menu__btn > span:nth-child(1) {
transition-delay: 70ms;
-webkit-transition-delay: 70ms;
transform: translateY(11px) rotate(135deg);
-webkit-transform: translateY(11px) rotate(135deg);
}
.menu-open .mobile-menu__btn > span:nth-child(2) {
transition-delay: 0s;
-webkit-transition-delay: 0s;
transform: translateX(-18px) scaleX(0);
-webkit-transform: translateX(-18px) scaleX(0);
}
.menu-open .mobile-menu__btn > span:nth-child(3) {
transition-delay: 140ms;
-webkit-transition-delay: 140ms;
transform: translateY(-11px) rotate(-135deg);
-webkit-transform: translateY(-11px) rotate(-135deg);
}

.main-title {
font-weight: 600;
font-size: 25px;
line-height: 1.4;
}

.sub-title {
display: block;
font-size: 13px;
color: #71a48f;
text-indent: 0.1em;
}/*# sourceMappingURL=style.css.map */
@media (max-width: 500px){
  .mobile-menu__btn {
    right:25px;
    top:25px;
    }
}
@media (max-width: 400px){
  .mobile-menu {
    top: 50px;
    width: 240px;
  }
    .menu-open #container {
      transform: translate(-230px, 70px);
      -webkit-transform: translate(-230px, 70px);
    }
    .main-title {
      font-weight: 500;
      font-size: 22px;
      line-height: 1.3;
      }
      .sub-title {
      font-size: 11px;
      }/*# sourceMappingURL=style.css.map */
}

/* ハンバーガーメニュー */

/* TOPページ　アニメーション */

.pattern6::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #FFF;
  z-index: 2;
  transition: transform 1s 0.3s;
  -webkit-transition: transform 1s 0.3s;
}
.pattern6.show::before{
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
.pattern6 img{
  opacity: 0;
  transition: 1.2s 0.3s;
  -webkit-transition: 1.2s 0.3s;
}
.pattern6.show img{
  opacity: 1;
}
.pattern6 p{
  color: #FFF;
  opacity: 0;
  transform: translateX(-40px);
  -webkit-transform: translateX(-40px);
  transition: .8s;
  -webkit-transition: .8s;
  transition-delay: 1.2s;
  -webkit-transition-delay: 1.2s;
  z-index: 1;
  overflow: hidden;
}
.pattern6.show p{
  opacity: 1;
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.pattern6 p::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #FFF;
  transition: .8s;
  -webkit-transition: .8s;
  transition-delay: 1.7s;
  -webkit-transition-delay: 1.7s;
}
.pattern6.show p::before{
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

/* TOPページ　アニメーション */


/* 文字アニメーション */

.animate-title.animate {
  opacity: 0;
}
.animate-title.animate.inview {
  opacity: 1;
}
.animate-title.animate.inview .char {
  display: inline-block;
  -webkit-animation-name: kf-animate-chars;
          animation-name: kf-animate-chars;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
          animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animate-title.animate.inview .char:nth-child(1) {
  -webkit-animation-delay: 0.09s;
          animation-delay: 0.09s;
}
.animate-title.animate.inview .char:nth-child(2) {
  -webkit-animation-delay: 0.13s;
          animation-delay: 0.13s;
}
.animate-title.animate.inview .char:nth-child(3) {
  -webkit-animation-delay: 0.17s;
          animation-delay: 0.17s;
}
.animate-title.animate.inview .char:nth-child(4) {
  -webkit-animation-delay: 0.21s;
          animation-delay: 0.21s;
}
.animate-title.animate.inview .char:nth-child(5) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.animate-title.animate.inview .char:nth-child(6) {
  -webkit-animation-delay: 0.29s;
          animation-delay: 0.29s;
}
.animate-title.animate.inview .char:nth-child(7) {
  -webkit-animation-delay: 0.33s;
          animation-delay: 0.33s;
}
.animate-title.animate.inview .char:nth-child(8) {
  -webkit-animation-delay: 0.37s;
          animation-delay: 0.37s;
}
.animate-title.animate.inview .char:nth-child(9) {
  -webkit-animation-delay: 0.41s;
          animation-delay: 0.41s;
}



.animate-title.animate2 {
  opacity: 0;
}
.animate-title.animate2.inview2 {
  opacity: 1;
}
.animate-title.animate2.inview2 .char {
  display: inline-block;
  -webkit-animation-name: kf-animate-chars;
          animation-name: kf-animate-chars;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
          animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animate-title.animate2.inview2 .char:nth-child(1) {
  -webkit-animation-delay: 0.14s;
          animation-delay: 0.14s;
}
.animate-title.animate2.inview2 .char:nth-child(2) {
  -webkit-animation-delay: 0.18s;
          animation-delay: 0.18s;
}
.animate-title.animate2.inview2 .char:nth-child(3) {
  -webkit-animation-delay: 0.22s;
          animation-delay: 0.22s;
}
.animate-title.animate2.inview2 .char:nth-child(4) {
  -webkit-animation-delay: 0.26s;
          animation-delay: 0.26s;
}
.animate-title.animate2.inview2 .char:nth-child(5) {
  -webkit-animation-delay: 0.30s;
          animation-delay: 0.30s;
}
.animate-title.animate2.inview2 .char:nth-child(6) {
  -webkit-animation-delay: 0.34s;
          animation-delay: 0.34s;
}
.animate-title.animate2.inview2 .char:nth-child(7) {
  -webkit-animation-delay: 0.38s;
          animation-delay: 0.38s;
}
.animate-title.animate2.inview2 .char:nth-child(8) {
  -webkit-animation-delay: 0.42s;
          animation-delay: 0.42s;
}
.animate-title.animate2.inview2 .char:nth-child(9) {
  -webkit-animation-delay: 0.46s;
          animation-delay: 0.46s;
}
.animate-title.animate2.inview2 .char:nth-child(10) {
  -webkit-animation-delay: 0.51s;
          animation-delay: 0.51s;
}
.animate-title.animate2.inview2 .char:nth-child(11) {
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
}
.animate-title.animate2.inview2 .char:nth-child(12) {
  -webkit-animation-delay: 0.59s;
          animation-delay: 0.59s;
}
.animate-title.animate2.inview2 .char:nth-child(13) {
  -webkit-animation-delay: 0.63s;
          animation-delay: 0.63s;
}
.animate-title.animate2.inview2 .char:nth-child(14) {
  -webkit-animation-delay: 0.67s;
          animation-delay: 0.67s;
}

@-webkit-keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}/*# sourceMappingURL=style.css.map */


/* 文字アニメーション */


/* about 文字部分 */


.animate.up .item {
  transform: translateY(10px);
  -webkit-transform: translateY(10px);
}

.animate.down .item {
  transform: translateY(-6px);
  -webkit-transform: translateY(-6px);
}

.animate.left .item {
  transform: translateX(40px);
  -webkit-transform: translateX(40px);
}

.animate.right .item {
  transform: translateX(-40px);
  -webkit-transform: translateX(-40px);
}

.animate .item {
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  opacity: 0;
}
.animate.inview .item {
  opacity: 1;
  transform: none;
  -webkit-transform: none;
}
.animate.inview .item:nth-child(1) {
  transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
}
.animate.inview .item:nth-child(2) {
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
.animate.inview .item:nth-child(3) {
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.animate.inview .item:nth-child(4) {
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}
.animate.inview .item:nth-child(5) {
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.animate.inview .item:nth-child(6) {
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
}
.animate.inview .item:nth-child(7) {
  transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
}
.animate.inview .item:nth-child(8) {
  transition-delay: 0.8s;
  -webkit-transition-delay: 0.8s;
}
.animate.inview .item:nth-child(9) {
  transition-delay: 0.9s;
  -webkit-transition-delay: 0.9s;
}
.animate.inview .item:nth-child(10) {
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
}

@media (max-width: 900px){
  .animate.inview .item:nth-child(1) {
    transition-delay: .7s;
    -webkit-transition-delay: .7s;
  }
  .animate.inview .item:nth-child(2) {
    transition-delay: 0.9s;
    -webkit-transition-delay: 0.9s;
  }
  .animate.inview .item:nth-child(3) {
    transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s;
  }
}

/* about 文字部分 */

/* about 画像 */

.cover-slide {
  position: relative;
  overflow: hidden;
}
.cover-slide::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f3f4f2;
  opacity: 0;
}
.cover-slide.inview::after {
  opacity: 1;
  -webkit-animation-name: kf-cover-slide;
          animation-name: kf-cover-slide;
  -webkit-animation-duration: 1.6s;
          animation-duration: 1.6s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
/* @media (max-width: 900px){
  .cover-slide.inview::after {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
  }
} */

@-webkit-keyframes kf-cover-slide {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.1% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

@keyframes kf-cover-slide {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.1% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
.img-zoom{
  opacity: 0;
}
.inview.img-zoom{
  opacity: 1;
  transition: transform 0.3s ease;
  -webkit-animation-name: kf-img-show;
          animation-name: kf-img-show;
  -webkit-animation-duration: 1.6s;
          animation-duration: 1.6s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
}
/* @media (max-width: 900px){
  .inview.img-zoom{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
  }
} */

@-webkit-keyframes kf-img-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kf-img-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 900px){
  .inview.img-zoom{
    margin-right: 50px;
  }
}

/* about 画像 */

/* about h3 */

@keyframes updown-animation{
  0%{
    transform: translateY(110%); 
  }
  10%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0); 

  }
}
@keyframes updown-animation{
  0%{
    -webkit-transform: translateY(110%); 
  }
  10%{
    -webkit-transform: translateY(0);
  }
  100%{
    -webkit-transform: translateY(0); 

  }
}


.about_page h3>div{
  display: flex; 
  justify-content: center;
  overflow: hidden; 
}
.about_page h3>div.animate .up{
  transform: translateY(110%);
  -webkit-transform: translateY(110%);
}
.about_page h3>div.animate.inview .up{
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
}
.about_page h3>div.animate.inview .up{
  display: block; 
  /* animation: 3.5s updown-anim 0s forwards; */
  -webkit-animation-name: updown-animation;
          animation-name: updown-animation;
  -webkit-animation-duration: 7.5s;
          animation-duration: 7.5s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.about_h3_main.animate.inview .up:nth-child(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.about_h3_main.animate.inview .up:nth-child(2) {
  animation-delay: 0.05s;
  -webkit-animation-delay: 0.05s;
}
.about_h3_main.animate.inview .up:nth-child(3) {
  animation-delay: 0.1s;
  -webkit-animation-delay: 0.1s;
}
.about_h3_main.animate.inview .up:nth-child(4) {
  animation-delay: 0.15s;
  -webkit-animation-delay: 0.15s;
}
.about_h3_main.animate.inview .up:nth-child(5) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.about_h3_main.animate.inview .up:nth-child(6) {
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}
.about_h3_main.animate.inview .up:nth-child(7) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}

.about_h3_sub.animate.inview .up:nth-child(1) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.about_h3_sub.animate.inview .up:nth-child(2) {
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}
.about_h3_sub.animate.inview .up:nth-child(3) {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.about_h3_sub.animate.inview .up:nth-child(4) {
  animation-delay: 0.35s;
  -webkit-animation-delay: 0.35s;
}
.about_h3_sub.animate.inview .up:nth-child(5) {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.about_h3_sub.animate.inview .up:nth-child(6) {
  animation-delay: 0.45s;
  -webkit-animation-delay: 0.45s;
}
.about_h3_sub.animate.inview .up:nth-child(7) {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}



/* hobby 背景 */

.rect{
  position: absolute;
  z-index: 1;
  width: 100%;
}

body{margin:0;}
#rotating-section{ 
				position:relative;
				background:#F9F9F8  top center no-repeat fixed;
				height:auto;
				overflow:hidden;
				}
.rect1,.rect2,.rect3,.rect4{
		position:absolute;
		width:100px;
		height:100px;
		bottom:-150px;
		background:rgb(239, 237, 228);
		-webkit-animation: mymove2 9s linear infinite;
}

.rect1{left:50%;}
.rect2{left:10%;-webkit-animation-delay:3.3s;}
.rect3{left:25%;-webkit-animation-delay:7s;}
.rect4{left:85%;-webkit-animation-delay:4s;}


.rect5,.rect6,.rect7,.rect8{
		position:absolute;
		width:50px;
		height:50px;
		background:#f3efe7;
		bottom:-150px;
		-webkit-animation: mymove2 12s linear infinite;	
}

.rect5{left:0%;}
.rect6{left:15%;-webkit-animation-delay:4.2s;}
.rect7{left:45%;-webkit-animation-delay:2.8s;}
.rect8{left:77%;-webkit-animation-delay:6.4s;}


.rect9,.rect10{
		position:absolute;
		width:250px;
		height:250px;
		background:#f3f2de;
		bottom:-250px;
		border-radius:50%;
		-webkit-animation: mymove3
     14s linear infinite;	
}

.rect9{left:3%;}
.rect10{left:95%;-webkit-animation-delay:1s;}

.rect13,.rect14{
		position:absolute;
		width:0px;
		height:0px;
		border:solid 40px transparent;
		border-bottom:solid 40px #f5f5ed;
		bottom:-150px;
		-webkit-animation: mymove4 9s linear infinite;
}


.rect13{left:45%;border-bottom:solid 65px #f3e6e1;-webkit-animation-delay:2.6s;}
.rect14{left:72%;border-bottom:solid 120px #E1F3EB;-webkit-animation:mymove5 6s liner infinte;-webkit-animation-delay:4s;}


.rect11,.rect12{
		position:absolute;
		width:0px;
		height:0px;
		border:solid 40px transparent;
		border-bottom:solid 40px #f7eae4;
		bottom:-150px;
		-webkit-animation: mymove5 8s linear infinite;
}

.rect11{left:30%;}
.rect12{left:65%;border-bottom:solid 60px rgb(241, 240, 224);-webkit-animation-delay:1.3s;}

.rect15{
		position:absolute;
		width:300px;
		height:300px;
		background:#f9f5e8;
		bottom:-400px;
		-webkit-animation: mymove3 10s linear infinite;
}

.rect15{left:55%;}


.rect17{
		position:absolute;
		width:150px;
		height:150px;
		background:#f5f9e8;
		bottom:-400px;
	}

@-webkit-keyframes mymove2{
	
	0%{	transform:rortate(0deg);opacity:0.8;}
	100%{transform:rotate(540deg);opacity:0.3;bottom:3340px;}
	}

@-webkit-keyframes mymove3{
	
	0%{	transform:rortate(0deg);opacity:0.8;}
	100%{transform:rotate(720deg);opacity:0.3;bottom:3440px;}
	}

@-webkit-keyframes mymove4{	
	0%{	transform:rortate(0deg);opacity:0.8;}
	100%{transform:rotate(720deg);opacity:0.2;bottom:3440px;}
	}

@-webkit-keyframes mymove5{	
	0%{	opacity:0.7;}
	100%{opacity:0.4;bottom:3040px;}
	}



  /* ページトップ */

  /*リンクの形状*/
#page-top a{
  position: relative;
  color: rgb(111, 125, 116);
  opacity: 1;
  font-size: 30px;
  transition:all 0.3s;
}

#page-top a:hover{
  /* font-size: 60px; */
  opacity: 0.6;
  color: rgb(43, 55, 47);
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 60px;
  z-index: 4;
  opacity: 0;
  padding-bottom: 15px;
  transform: translateY(100px);
}
@media (max-width: 500px){
  #page-top {
    right: 30px;
  }
}
#page-top a::after{
  content: " ";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transform: translate(9.8px,4.3px);
  border:  rgb(111, 125, 116) solid 2px;
  transition: all .3s ;
}
#page-top a:hover::after{
  width: 60px;
  height: 60px;
  border:  rgb(43, 55, 47) solid 2px;
  transform: translate(25%,15%);
}
/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}