@charset "utf-8";
/* CSS Document */

header.fix { position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; }
#mv { position: relative; overflow-x: hidden; position: fixed; }

#mv .swiper-vision { position: fixed; width: 100%; height: 100vh; }

#mv h2,#mv h6 { opacity: 0; }
#mv .swiper-slide-active h2,#mv .swiper-slide-duplicate-active h2,#mv .swiper-slide-prev h2 {
	animation-name: fadeupAnime02;/*アニメーションの定義名*/
	animation-duration:1.0s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
	animation-delay: 2.0s;
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeupAnime02{
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1.0;
  }
}

#mv .swiper-slide-active h6,#mv .swiper-slide-duplicate-active h6,#mv .swiper-slide-prev h6 {
	animation-name: fadeupAnime06;/*アニメーションの定義名*/
	animation-duration:1.0s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
	animation-delay: 2.0s;
}
/*アニメーションの開始から終了までを指定する*/
@keyframes fadeupAnime06{
  0% {
	  opacity: 0;
	  transform: translateX(-100px);
  }
  100% {
	  opacity: 1.0;
	  transform: translateX(0px);
  }
}


@media screen and (max-width: 899px) {
	#mv h2 { position: absolute; top: 20vh; left: 5%; z-index: 10; font-size: 1.8rem; }
	#mv h2 span { display: block; font-size: 0.5em; }
	#mv h6 { position: absolute; right: 2%; bottom: 62vh; color: rgba(255,92,4,0.5); }
	#mv h6 { font-size: 2.7rem; }
}
@media screen and (max-width: 379px) {
	#mv h2 { font-size: 1.4rem; line-height: 1.7; top: 15vh; }
	#mv h6 { font-size: 2.5rem; position: absolute; right: 2%; bottom: 62vh; }
}
@media screen and (min-width: 380px) and (max-width: 599x) {
	#mv h2 { position: absolute; top: 10vh; }
	#mv h6 { font-size: 4.0rem; position: absolute; right: 2%; bottom: 65vh; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#mv h2 { font-size: 2.4rem; top: 15vh; }
	#mv h6 { font-size: 5.0rem; }
}
@media screen and (min-width: 900px) {	
	#mv h2 { position: absolute; left: 15%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; color: #333; }
	#mv h2 span { display: block; font-size: 0.5em; }
	#mv h6 { position: absolute; left: 25%; bottom: 5vh; color: rgba(255,92,4,0.5); }
}
@media screen and (min-width: 900px) and (max-width: 1079px) {
	#mv h2 { font-size: 1.9rem; }
	#mv h6 { font-size: 5.5rem; }
}
@media screen and (min-width: 1080px) and (max-width: 1199px) {
	#mv h2 { font-size: 2.0rem; }
	#mv h6 { font-size: 6.0rem; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px) {
	#mv h2 { font-size: 2.1rem; }
	#mv h6 { font-size: 6.5rem; }
}
@media screen and (min-width: 1480px) {
	#mv h2 { font-size: 2.2rem; }
	#mv h6 { font-size: 7.0rem; }
}

#mv .swiper-parentDiv .swiper-pagination { display: flex; justify-content: flex-end; width: 96%; }
#mv .swiper-pagination-bullet { border-radius: 0px; width: 30px; height: 2px; background: var(--base-color); margin: 10px 1px; }


/*-- Scroll Down -------------------------------------------------------------*/
.scroll-down {
  position:fixed; right:3%; bottom:2%; z-index:5;
  height: 100vh;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 899px) {
	.scroll-down { position:fixed; right:6%; bottom:6%; }
}
@media screen and (max-width: 599px) {
	.scroll-down { position:fixed; right:12%; bottom:6%; }
}
.scroll-down:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg,rgba(#fff, 0) 0, rgba(#fff, .8) 80%, rgba(#fff, .8) 100%);
  }

.scroll-down a {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 13px;
  padding: 10px 10px 110px;
  color: var(--base-color);
  font-size: 11px;
  font-family:'Roboto Condensed', sans-serif;
  font-weight:bold;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: .2s;
  overflow: hidden;
  margin: auto;
}

.scroll-down a:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: var(--base-color);
}

.scroll-down a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #000;
}

.scroll-down a:hover {
  opacity: .5;
}

@media screen and (max-width: 899px) {
	.scroll-down a { font-size: 10px; margin: 0; color: var(--base-color); }
}

#mvScrl a:after {
  animation: mvScrl01 2.0s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes mvScrl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}