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



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/




/* 1201px - */
@media screen and (min-width: 1201px), print {

	
.ss {
	display: none;
}	


/* splash
--------------------- */
#splash {
	width: 100%;
	height:100vh;
	background: url(../img/splash.jpg) no-repeat center;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000;
}
	#splash p {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1000001;
		margin-top: -17.5px;
		margin-left: -80px;
	}


	
	
#header .nav {
	background: none;
}



/* slider
--------------------- */
#mainimage {
	width: 100%;
	height:100vh;
	overflow: hidden;
	position: relative;
}
	#mainimage ul li {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100vh;
		text-align: center;
	}
		
		#mainimage .text {
			width: 357px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -50px;
			margin-left: -180px;
			z-index: 10;
		}
			#mainimage .text p {
				width: 357px;
				margin: 0 auto;
				border: solid 1px #bb897d;
			}
				#mainimage .text p a {
					display: block;
					height: 62px;
					background: rgba(255,255,255,0.5) url(../common/img/icon_arrow_pink.png) no-repeat right 15px center;
					color: #000;
					font-size: 26px;
					line-height: 62px;
					padding-left: 30px;

					transition: 0.3s;
					-webkit−transition: 0.3s;
				}
				#mainimage .text p a:hover {
					background: url(../common/img/icon_arrow.png) no-repeat right 10px center;
				}
	
	
	





}







/* 901px - 1200px */
@media only screen and (min-width: 901px) and (max-width: 1200px), print {


.ss {
	display: none;
}	


video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}



/* slider
--------------------- */
#mainimage {
	width: 100%;
	height:100vh;
	overflow: hidden;
	position: relative;
}
	#mainimage ul li {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100vh;
		text-align: center;
	}
		#mainimage .text {
			width: 357px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -50px;
			margin-left: -180px;
			display: block;
			z-index: 10;
		}
			#mainimage .text h2 {
				margin-bottom: 45px;
				text-align: center;
			}

			#mainimage .text p {
				width: 357px;
				margin: 0 auto;
				border: solid 1px #bb897d;
			}
				#mainimage .text p a {
					display: block;
					height: 62px;
					background: rgba(255,255,255,0.5) url(../common/img/icon_arrow_pink.png) no-repeat right 15px center;
					color: #000;
					font-size: 24px;
					line-height: 62px;
					padding-left: 30px;

					transition: 0.3s;
					-webkit−transition: 0.3s;
				}
				#mainimage .text p a:hover {
					background: url(../common/img/icon_arrow.png) no-repeat right 10px center;
				}







}








/* - 900px */
@media only screen and (max-width: 900px) {

.sb {
	display: none;
}	
	




/* splash
--------------------- */
#splash {
	width: 100%;
	height:100vh;
	background: url(../img/splash_sp.jpg) no-repeat center;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000;
}
	#splash p {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1000001;
		margin-top: -17.5px;
		margin-left: -80px;
	}	




/* slider
--------------------- */
#mainimage {
	width: 100%;
	height:100vh;
	overflow: hidden;
	position: relative;
}
	#mainimage ul li {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100vh;
		text-align: center;
	}
		#mainimage .text {
			width: 100%;
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -50px;
			z-index: 100;
		}
			#mainimage .text p {
				width: 250px;
				margin: 0 auto;
				border: solid 1px #bb897d;
			}
				#mainimage .text p a {
					display: block;
					height: 62px;
					background: rgba(255,255,255,0.5) url(../common/img/icon_arrow_pink.png) no-repeat right 15px center;
					font-size: 16px;
					color: #000;
					line-height: 62px;
					padding-left: 30px;

					transition: 0.3s;
					-webkit−transition: 0.3s;
				}
				#mainimage .text p a:hover {
					background: url(../common/img/icon_arrow.png) no-repeat right 10px center;
				}
	
	
	

	

}