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




nav#home-main-navigation1,
nav#home-main-navigation2 {
	display: none;
}




#main-visual-mob {
	width: 100%;
	height: 400px;
	margin: 0;
	padding: 0;
	background-color: #000;
	background-image: url(../images/home/keyvisual-mob.jpg);
	background-size: 100%;
	background-position: left top;
	background-repeat: no-repeat;
	position: fixed;
	z-index: 99;
	top: 0;
}

#main-visual {
	display: none;
}

#main-visual-mob #home-mainlogo {
	width: 100%;
	margin: 0;
	z-index: 100;
	position: fixed;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0));
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0));
	background: linear-gradient(top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0));
}

#main-visual-mob #home-mainlogo img {
	width: 60%;
	margin: 14% 20% 0 20%;
}




#purchaselink-mob {
	width: 100%;
	padding: 10px 0 15px 0;
	position: relative;
	margin-top: 400px;
	text-align: center;
	background: #333;
	color: #fff;
}

#purchaselink-mob .inner {
	width: 94%;
	margin: 0 3%;
}

#purchaselink-mob a,
#purchaselink a {
	color: #0297f3;
}

#purchaselink-mob a:hover,
#purchaselink a:hover {
	color: #ffff00;
}

#purchaselink .lity-iframe {
	border: 2px solid #fff;
}




.home-footer {
	z-index: 9000;
	position: relative;
	top: 0;
}




@media screen and (min-width: 400px) {

	#main-visual-mob,
	#main-visual {
		height: 500px;
		background-size: 110%
	}
	
	#purchaselink-mob {
		margin-top: 500px;
	}

}




@media screen and (min-width: 480px) {

	#main-visual-mob,
	#main-visual {
		height: 600px;
	}
	
	#purchaselink-mob {
		margin-top: 600px;
	}

}




@media screen and (min-width: 550px) {

	#main-visual-mob {
		background-position: left bottom;
	}

}




@media screen and (min-width: 640px) {

	#main-visual-mob,
	#main-visual {
		height: 650px;
		background-size: 100%
	}
	
	#main-visual-mob #home-mainlogo img {
		width: 40%;
		margin: 10% 30% 0 30%;
	}
	
	#main-visual #home-mainlogo img {
		width: 40%;
		margin: 3% 30% 0 30%;
	}
	
	#purchaselink-mob {
		margin-top: 650px;
	}

}




@media screen and (min-width: 801px) {

	header {
		position: fixed !important;
	}

	nav#home-main-navigation-mob {
		display: none;
	}
	
	#home-nav-container {
		width: 100%;
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
		background: linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
		padding: 2% 0 3% 0;
	}
	
	nav#home-main-navigation1,
	nav#home-main-navigation2 {
		width: 100%;
		text-align: center;
		color: #fff;
		text-transform: uppercase;
		display: block;
	}
	
	nav#home-main-navigation1,
	nav#home-main-navigation2 {
		height: 30px;
		font-size: 0.85em;
	}
	
	nav#home-main-navigation1 ul li,
	nav#home-main-navigation2 ul li {
		font-weight: bold;
		letter-spacing: 0.05em;
		display: inline-block;
		background-image: url(../images/fatearrow_next.png);
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: left 50%;
		padding: 0 10px 0 30px;
		line-height: 30px;
		color: #fff;
	}
	
	nav#home-main-navigation1 a:hover,
	nav#home-main-navigation2 a:hover {
		color: #a5daef;
		text-shadow: 0 0 6px #7ac9e9;
	}
	
	
	
	
	#main-visual-mob {
		display: none;
	}
	
	#main-visual {
		display: block;
		width: 100%;
		height: 600px;
		margin: 0;
		padding: 0;
		background-color: #000;
		background-image: url(../images/home/keyvisual.jpg);
		background-size: auto 120%;
		background-position: 50% 100%;
		background-repeat: no-repeat;
		position: fixed;
		z-index: 99;
		top: 0;
	}
	
	#main-visual #home-mainlogo {
		width: 100%;
		margin: 0;
		z-index: 100;
		position: fixed;
		background: none;
	}
	
	#main-visual #home-mainlogo img {
		width: 50%;
		margin: 12% 25% 0 25%;
	}
	
	#purchaselink-mob {
		display: none;
	}
	
	#purchaselink {
		width: 50%;
		margin: 0 0 0 5%;
		padding: 5px;
		border: 1px solid #ccc;
		position: absolute;
		bottom: 10%;
		text-align: center;
		color: #fff;
	}
	
	#purchaselink .inner {
		width: 100%;
		margin: 0;
		padding: 10px;
		background: rgba(0, 0, 0, .7);
	}
	
	
	
	
	.home-footer {
		margin-top: 600px;
	}

}




@media screen and (min-width: 900px) {
	
	nav#home-main-navigation1,
	nav#home-main-navigation2 {
		height: 30px;
		font-size: 1em;
		color: #ccc;
	}

	#main-visual #home-mainlogo img {
		width: 40%;
		margin: 15% 30% 0 30%;
	}

}




@media screen and (min-width: 960px) {

	#main-visual {
		height: 640px;
	}
	
	.home-footer {
		margin-top: 640px;
	}
	
	#purchaselink {
		width: 40%;
	}

}




@media screen and (min-width: 1200px) {

	#main-visual {
		height: 100vh;
		text-align: center;
	}

	#main-visual #home-mainlogo img {
		width: 40%;
		max-width: 500px;
		margin: 11% 0 0 0;
	}
	
	#purchaselink {
		width: 34%;
	}
	
	.home-footer {
		margin-top: 100vh;
	}

}