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





/*　粒子アニメーション
-----------------------------*/
#wrapper{
max-width: 100vw;
height:auto;
	margin: 200px 0 0 0;
	padding: 0;

	overflow: hidden;
}
}

#particle{
	width: 100vw;
	height:100vh;
z-index: 3;
}


/*　カバー
-----------------------------*/
.index-cover .index-cover-bg {
	position: relative;
	width: 100vw;
	height: 100vh;
	background:#000 url("../img/index/cover-bg.png") -500px -400px;
	background-attachment: scroll;
	overflow: hidden;
	z-index: 0;
}

.index-cover .index-cover-bg .bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}

.index-cover .index-cover-bg .bar span {
	display: block;
	position: absolute;
	left: 60%;
	top: 0;
	width: 680px;
	height: 100vh;
	overflow: hidden;
}

.index-cover .index-cover-bg .bar span img {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 1920px;
	height: 100vh;
	margin: 0 0 0 -600px;
}

.index-cover .index-cover-bg .bar.slider-bar {
	-webkit-transform: skewX(-45deg);
	transform: skewX(-45deg);
}

.index-cover .index-cover-bg .bar.slider-bar img {
	-webkit-transform: skewX(45deg);
	transform: skewX(45deg);
}


@-webkit-keyframes slide-slider-bar {
	0% {
		-webkit-transform: translateX(-1980px) skewX(-45deg);
	}
	100% {
		-webkit-transform: translateX(0) skewX(-45deg);
	}
}

@keyframes slide-slider-bar {
	0% {
		transform: translateX(-1980px) skewX(-45deg);
	}
	100% {
		transform: translateX(0) skewX(-45deg);
	}
}

.index-cover .index-cover-bg .slider-bar {
	-webkit-animation-name: slide-slider-bar;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function:cubic-bezier(0.1, 0.97, 0.33, 1.0);
	-webkit-animation-iteration-count:backwards;
	animation-name: slide-slider-bar;
	animation-duration: 2s;
	animation-timing-function:cubic-bezier(0.1, 0.97, 0.33, 1.0);
	animation-iteration-count:backwards;
}

@-webkit-keyframes slide-slider-bar-img {
	0% {
		-webkit-transform: translateX(1980px) skewX(45deg);
	}
	100% {
		-webkit-transform: translateX(0) skewX(45deg);
	}
}

@keyframes slide-slider-bar-img {
	0% {
		transform: translateX(1980px) skewX(45deg);
	}
	100% {
		transform: translateX(0) skewX(45deg);
	}
}

.index-cover .index-cover-bg .slider-bar img {
	-webkit-animation-name: slide-slider-bar;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function:cubic-bezier(0.08, 0.99, 0.30, 0.89);
	-webkit-animation-iteration-count:backwards;
	animation-name: slide-slider-bar-img;
	animation-duration: 2s;
	animation-timing-function:cubic-bezier(0.08, 0.99, 0.30, 0.89);
	animation-iteration-count:backwards;
}

/* キャッチコピー
---------------------*/
#smc {
position: absolute;
	top:300px;
	left: 5%;
	width: 70vw;
	height: 100vh;
	z-index: 4;
  font-size: 2.0rem;
	line-height: 1.2;
	color:#fff;
	font-weight:bold;
font-family:"Monotype Corsiva";
}
#smc span {
	font-weight:normal;
  font-size: 1.6rem;
}

.neontext {
  animation: flicker 5.0s infinite alternate;
  color: #fff;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
      text-shadow:
      0 0 2px #fff,
      0 0 5px #fff,
      0 0 9px #fff,
      0 0 20px #fffaf0,
      0 0 40px #fffaf0,
      0 0 45px #fffaf0,
      0 0 50px #fffaf0,
      0 0 75px #fffaf0;
  }
  20%, 24%, 55% {
text-shadow: none;
  }
}


/*　スクロール
-----------------------------*/
.link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 5;
}
a.link {
	cursor:pointer;
}
a.anchor {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

/*=== 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
	position:absolute;
	bottom:1%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-40px;
	bottom:0px;
    /*テキストの形状*/
	color: #fff;
	font-size: 18px;
	text-shadow:1px 1px 3px #40e0d0;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 4px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:4px;
	height: 50px;
	background:#fff;
}