@charset "utf-8";

/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:50%;
	
	}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
	    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    
	}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
	    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
	circlemove 1.6s ease-in-out infinite,
	cirlemovehide 1.6s ease-out infinite;
	
	}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
	0%{bottom:45px;}
	100%{bottom:-5px;}
	
	}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
	0%{opacity:0}
	50%{opacity:1;}
	80%{opacity:0.9;}
	100%{opacity:0;}
	
	}

/* 線の描写 */
.scrolldown2:after{
	content:"";
	    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
	    /*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
	
	}

/*========= レイアウトのためのCSS ===============*/
.haco{
	margin:0 auto;
	position:relative;
	top: 140%;
	width:100%;
	height:200px;
	/*transform: translateY(100%) translateX(120%);*/
	
	}

.haco2{
	margin:0 auto;
	margin-bottom:600px;
	position:relative;
	top:25%;
	left:10%;
	width:100%;
	height:200px;
	/*transform: translateY(100%) translateX(120%);*/
	
	}
	
.haco h1{
	font-size:80px;
	color:#fff;
	margin:90vh 0;
	text-align:center;
	font-family:"M PLUS 1p","メイリオ","serif";
	text-shadow:3px 3px 3px #000;
	letter-spacing:8px;
	
	}
	
.title{
	font-size:80px;
	margin-bottom:80vh;
	
	}
	
	

.haco2 h1{
	font-size:70px;
	color:#fff;
	text-align:left;
	font-family:"M PLUS 1p","メイリオ","serif";
	text-shadow:3px 3px 3px #000;
	letter-spacing:5px;

	}
	
	
.roll{
	top: 50%;
	left: 50%;
	transform: translateY(500%) translateX(0);
	z-index:2;
	color:#eee;
	text-shadow: 0 0 15px #666;
	text-align: center;
	bottom:40px;
	font-size:100px;
	font-family:  "M PLUS 1p","メイリオ","serif";
	
	}

#header{
	width:100%;
	height: 100vh;
	position: relative;
	
	} 

#header:before{
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	/*背景画像設定*/
	background:url(image/tori2.jpg) no-repeat center;
	background-size:cover;
	
	}
	
.name{
	color:#fff;
	height:1000px;
	position: -webkit-sticky;
	position: sticky;
	top:55vh;
	text-align:center;
	font-size:100px;
	margin-top:300vh;
	margin-left:5vw;
	text-shadow:3px 3px 3px #000;

	}

	
.v{
	background-color:#000;
	background-image:url(image/mori.JPG) ;
	background-size:cover;
	background-position:right;
	height:100vh;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	
	}

.vip{
	background-color:#000;
	background-image:url(image/vipn.JPG);
	background-size:cover;
	background-position:center;
	height:100vh;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	
	}

#container{
	position: relative;
	z-index:1;
	/*background:rgba(204,102,0,0.2);*/
	margin-top:0px;
	padding:0 0 350px 0;
	text-align: center;
	height:700vh;

	}

#container1{
	position: relative;
	z-index:1;
	/*background:rgba(204,102,0,0.2);*/
	padding:200px;
	text-align: center;
	height:1450px;

	}
	
/*==================================================*/
.gura {
	height:150vh;
  background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(255,255,255,0));
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,1), rgba(255,255,255,0));
  background: linear-gradient(to top,rgba(0,0,0,1), rgba(255,255,255,0));
  /*グラデーション以外は省略*/
  z-index:100;
  
}
	
.gura2 {
	height:150vh;
  background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(0,0,0,1));
  background: -webkit-linear-gradient(bottom,rgba(255,255,255,0), rgba(0,0,0,1));
  background: linear-gradient(to top,rgba(255,255,255,0), rgba(0,0,0,1));
  /*グラデーション以外は省略*/
  z-index:100;
  position:relative;
  top:-150vh;
	}
	
.gura3 {
	height:150vh;
  background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(255,255,255,0));
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,1), rgba(255,255,255,0));
  background: linear-gradient(to top,rgba(0,0,0,1), rgba(255,255,255,0));
  /*グラデーション以外は省略*/
  z-index:100;
  position:relative;
  top:-50vh;
}
.gura4 {
	height:150vh;
  background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(0,0,0,1));
  background: -webkit-linear-gradient(bottom,rgba(255,255,255,0), rgba(0,0,0,1));
  background: linear-gradient(to top,rgba(255,255,255,0), rgba(0,0,0,1));
  /*グラデーション以外は省略*/
  z-index:100;
  position:relative;
  top:-120vh;
	}
	
.kuro{
	background-color:#000;
	height:100vh;
	padding-bottom:1000px
	}
	
.kuro2{
	background-color:#000;
	height:100vh;
  position:relative;
  top:-150vh;
	}
	
.kuro3{
	background-color:#000;
	height:100vh;
  position:relative;
  top:-120vh;
  
	}
/*----------------------------スクロールフェードイン----------------*/
/*===========================スクロールバー非表示============================*/
div{
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
    
	}
	
div::-webkit-scrollbar{
	display:none;/* Chrome, Safari 対応 */
	
	}
/*===========inview===========*/

.fadeIn_left {
	opacity: 0;
	transform: translate(-50%, 0);
	transition: 2s;
  /*background-color:#666;*/
	}
	
.fadeIn_left.is-show {
	transform: translate(0, 0);
	opacity: 1;
	
	}

.fadeIn_left2 {
	opacity: 0;
	transform: translate(-50%, 0);
	transition: 3s;
	/*background-color:#666;*/

	}
	
.fadeIn_left2.is-show {
	transform: translate(0, 0);
	opacity: 1;

	}

.fadeIn_left3 {
	opacity: 0;
	transform: translate(-50%, 0);
	transition: 4s;
  /*background-color:#666;*/

	}
	
.fadeIn_left3.is-show {
	transform: translate(0, 0);
	opacity: 1;
	}

.fadeIn_left4 {
	opacity: 0;
	transform: translate(0, 50%);
	transition: 2s;
	/*background-color:#666;*/
	overflow:none;

}

.fadeIn_left4.is-show {
	transform: translate(0, 0);
	opacity: 1;
  
}

.fadeIn_left5 {
	opacity: 0;
	transform: translate(0, 50%);
	transition: 3s;
	/*background-color:#666;*/

	}
	
.fadeIn_left5.is-show {
	transform: translate(0, 0);
	opacity: 1;
  
	}

.fadeIn_left6 {
	opacity: 0;
	transform: translate(0, 50%);
	transition: 4s;
  /*background-color:#666;*/

	}

.fadeIn_left6.is-show {
	transform: translate(0, 0);
	opacity: 1;
  
	}


/*===========.txtBox===========*/

.txtBox {
	text-align: center;

	}
.txtBox2 {
	text-align: left;
	padding-left:30px;
	margin-bottom:80vh;
	
	}

/*===========base===========*/

* {
	box-sizing: border-box;
	
	}
	
.section {
	max-width: 100%;
	margin: 0 auto;
	padding:0;
	overflow-x: hidden;
	/*background-color:rgba(0,0,0,0.5); */
	
	}

.section p._a {
	font-size: 12px;
	font-weight: bold;
	margin: 30px 0 0;
	
	}
	
.section p._a .link {
	display: inline-block;
	color: #607D8B;
	padding-left: 1.3em;
	text-indent: -1.3em;
	
	}
	
.section p._a .link:before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-top: 2px solid #607D8B;
	border-right: 2px solid #607D8B;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-right: 10px;
	
	}

/*----------------------------article-------------------------------*/

div .section{
    overflow: hidden;
    
	}

.tume{
	position:relative;
	top:-25%;
	
	}

.big{
	justify-content:space-around;
	max-width:1200px;
	margin:0 auto;
	position: relative;
	left:10%;
	top:-100%;
	}
	

.big2{
	justify-content:space-around;
	max-width:1200px;
	margin:0 auto;
	position: relative;
	left:10%;
	
	}
	
.pro{
	margin:0;
	padding:15px 0;
	width:380px;
	
	}
	
.ho{
	margin:0;
	padding:15px 0;
	width:380px;
	/*height:210px;*/
	
	}
	
.st{
	margin:0;
	padding:15px 0 ;
	width:380px;
	/*height:210px;*/
	
	}

h2{
	color:#fff;
	text-shadow:1px 1px 1px #000;
	margin-top:10px;
	margin-bottom:15px;
	font-family: "Noto Sans JP","メイリオ","serif";
	
	}
	

p{
	color:#fff;
	margin:0;
	padding:0;
	font-size:20px;
	/*font-weight:bold;*/
	font-family: "M PLUS 1p","メイリオ","sans-serif";
	
	}
	
.licens{
	margin:0;
	padding:15px 0 ;
	width:380px;
	/*height:210px;*/

	}
	

.skill{
	margin:0;
	padding:15px 0 ;
	width:380px;
	/*height:210px;*/
	
	}
	
.ver{
	margin:0;
	padding:15px 0 ;
	width:380px;
	/*height:210px;*/
	
	}
	
.hp{
	margin:0 auto;
	padding:15px 0 ;
	max-width:1200px;
	/*height:210px;*/
	display:flex;

	}
	

.you{
	width:1200px;
	margin:0 auto;
	padding:15px 0 ;
	width:380px;
	/*height:210px;*/
	justify-content:center;
	
	}
	
.mus{
	margin:0 auto;
	padding:15px 0 ;
	max-width:800px;
	/*height:210px;*/
	display:flex;
	
	}
	
img{
	max-width:350px;
	height:200px;
	background-size:cover;
	background-position:center;

	}
	

.music{
	width:250px;
	text-decoration:none;
	
	}
	
figcaption{
	font-family: "M PLUS 1p","メイリオ","sans-serif";
	text-decoration:none;
	
	}
	
a{
	text-decoration:none;
	color:#fff;
	
	}
	
/*==========================================hover:カーソル時ズーム設定=====================================*/
.hover{	
	transition: all 0.3s ease 0s;
}
.hover:hover {
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
	

/*===============================フッターCSS=============================================*/
footer{
	margin-top:1000px;
	width:100%;
    text-align:center;
    background-color:#fff;
	/*margin-top:26px;*/
	padding-top:26px;
	position: -webkit-sticky;
	position: sticky;
	display: inline-block;
	z-index: 2;
	}
	
small{
	margin:0 auto;
	
	}


/*-----------------------------------スマホ版-----------------------*/
@media(max-width:600px){
	.v{
		background-position:75%;
		
		}
		
	h1,h2{
		margin:0 4vh;
		
		}
		
	.txtBox2 {
	text-align: left;
	padding:0px;
	margin:0;
	position:relative;
	left:5%;
	margin-bottom:80vh;
	
	}
		
	}

@media(max-width:800px){
	html{
		margin-right:auto;
		margin-left:auto;
		
		}
		
	.haco,.haco2{
		width:100%;
		height:150px;
		
		}
	/*.haco{
		position:relative;
		top: 20%;
		width:100%;
		
		}*/
		
	h1,h2{
		font-size:50px;
		
		}
	.haco h1{
		font-size:23px;
	
	}
	
	.haco2 h1{
		font-size:25px;
	
	}
		
	.haco2{
		position:relative;
		top:25%;
		left:0%;
		width:100%;
	
	}
	.roll{
		top: 50%;
		left: 50%;
		transform: translateY(700%) translateX(0);
		z-index:2;
		color:#eee;
		text-shadow: 0 0 15px #666;
		text-align: center;
		bottom:40px;
		
	}
	
	.kuro2{
		top:-320vh;
		
		}
		
	.gura2{
		top:-320vh;
		
		}
		
	.kuro3{
		top:-160vh;
		}
		
	.gura3{
		top:-100vh;
		
		}
		
	.gura4{
		top:-160vh;
		
		}
		
	#container{
		position: relative;
		z-index:1;
		/*background:rgba(204,102,0,0.2);*/
		padding:0;
		margin-top:1000px;
		height:500vh;
		
		}
		
	#container1{
		position: relative;
		z-index:1;
		/*background:rgba(204,102,0,0.2);*/
		padding:0;
		margin-top:1000px;
		}
		
	.big{
		display:block;
		justify-content:center;
		left:0%;
		
		}
		
	.big2{
		left:0%;
		
		}
		
	.hp{
		margin:0 auto;
		padding:15px 0 ;
		max-width:1200px;
		/*height:210px;*/
		display:block;

	}
	.you{
		width:100%;
		margin:0 auto;
		padding:15px 0 ;
		width:380px;
		/*height:210px;*/
		justify-content:center;
		
	}
	.pro,.ho,.st,.licens,.skill,.ver,.scroll{
		margin:0 auto;
		
		}

		
	}
	
@media(max-width:1200px){
	.roll{
		top: 50%;
		left: 50%;
		transform: translateY(100%) translateX(0);
		z-index:2;
		color:#eee;
		text-shadow: 0 0 15px #666;
		text-align: center;
		bottom:40px;
		
	}
	
	#container{
		position: relative;
		z-index:1;
		/*background:rgba(204,102,0,0.2);*/
		padding:100px 0px 300px 0px;
		text-align: center;
		height:700vh;
		}
		
	.big{
		display:block;
		justify-content:center;
		
		}
		
	.mus{
		display:block;

		
		}
		
	.music{
		margin-right:auto;
		margin-left:auto;
		
		}
		
	.pro,.ho,.st,.licens,.skill,.ver,.scroll{
		margin:0 auto;
		
		}
		
	}

@media screen and (max-width:768px){

    #header,
    #header:before{
		height: 100vh;

    }
    
}

/*-----------------------------------pc版-----------------------*/
@media(min-width:400px){
	html{
		margin-right:auto;
		margin-left:auto;
		
		}
	}

@media screen and (min-width:1900px){
	.kuro3{
		top:-150vh;
		
		}
		
	.gura4{
		top:-150vh;
		
		}
    }