@charset "utf-8";
/* CSS Document */
::selection {color:#FFFFFF; background:#0449d6; text-shadow: none;}
::-moz-selection {color:#FFFFFF; background:#0449d6; text-shadow: none;}
/*
@font-face {
	font-family: "Yu Gothic" "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	src: local("Yu Gothic Medium");
	font-weight: 500;
	font-size:16px;
}
*/
body {
	color: #212121;
    font-family: "Yu Gothic", "Yu Gothic", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
    font-size: 18px;
    line-height: 26px;
/*	color: #330808;*/
}

*{vertical-align: top;}


a{color: #000; display: inline-block; transition: 0.6s;}
a:hover{opacity: 0.6; text-decoration: none; transition: 0.6s;}
/*@media screen and (max-width: 1300px){
	*{transition: 0.6s;}}*/

/*==========================================================
	
	loading

==========================================================*/
#pageloading-wrap {
   background: #FFFFFF;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   display: table;
   z-index: 99999;
}
#pageloading-icon {
   display: table-cell;
   vertical-align: middle;
}
.line-scale-party>div, .line-scale-pulse-out-rapid>div, .line-scale-pulse-out>div, .line-scale>div, .line-spin-fade-loader>div{background-color: #ff9700!important;}


/*==========================================================
	
	entry

==========================================================*/
#entry{
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 9;
}

#entry a{display: block;
width: 100%; height: 100%;}

#entry .sp{display: none;}

@media screen and (max-width: 700px) {
	#entry{
		right: 0;
		bottom: 0;
	}
	#entry .sp{
		display: block;
		width: 100%;
	}
	#entry .pc{display: none;}
}



/*==========================================
============================================

		header 

============================================
==========================================*/
header{
	position: fixed;
	width: 100%;
	z-index: 11;
	font-size: 14px;
	font-weight: bold;
	top: 0;
	height: 90px;
	transition: 0.6s;
	background: #fff;
	box-shadow: 0 10px 10px -10px rgba(53, 47, 47, 0.15);
}
/*header.scroll{background: #222222; transition: 0.6s;}*/

header a{color: #330808;}
header > div{width: 95%; margin: 0 auto 0;}

header h1{position: absolute; z-index: 10; top: 20px;}
header h1 a{
	width: 355px;
	padding-top: 51px;
	background: url(../../img/common/h1.png) no-repeat;
	background-size: cover;
	height: 0;
	overflow: hidden;
	font-size: 0;
}
header h1 span{font-size: 13px;}


#toggle{display: none;}
/*@media only screen and (max-width: 1250px){header > div{width: 1000px;}}*/

@media only screen and (max-width: 1380px){	
	header h1{width: 20%;}
	header h1 a{background-size: 100%;width: 100%;}

}


@media only screen and (max-width: 1290px){	
	.no_scroll{overflow: hidden;}
	header{height: 80px;}	

	header h1{position: absolute; z-index: 10; top: 15px;}
	header h1 a{
		width: 355px;
		padding-top: 51px;
		background: url(../../img/common/h1.png) no-repeat;
		background-size: cover;
		height: 0;
		overflow: hidden;
		font-size: 0;
	}
	#toggle{
		cursor: pointer;
		display: block;
		text-align: center;
		width: 80px;
		height: 80px;
		/*background: #ffffff;*/
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	#toggle *{transition: 0.8s;}

	.trigger{
		position: relative;
		width: 30px;
		height: 25px;		
	}

	.trigger span{
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #ffa100;
		z-index: 999;
	}

	.trigger span:nth-of-type(1) { top: 3px;}
	.trigger span:nth-of-type(2) { top: 11px;}
	.trigger span:nth-of-type(3) { bottom: 3px;}

	.trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(6px) scale(0);
	transform: translateY(6px) scale(0);
	}

	.trigger.active span:nth-of-type(2) {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);	
	background-color: #fff;
	
	}

	.trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-6px) scale(0);
	transform: rotate(226deg) translateY(5px) translateX(6px);
	background-color: #fff;
	}
}

@media only screen and (max-width: 640px){	
	header h1{top: 24px;    z-index: -1;}

	header h1 a{
		width: 250px;
		padding-top: 35px;
		background-size: contain;
	}
}

@media only screen and (max-width: 320px){	
	header h1 a{
		width: 210px;
		padding-top: 29px;
		
	}
}


/*==========================================
============================================

		footer

============================================
==========================================*/

footer{
	width: 100%;
	overflow: hidden;
	text-align: center;
	color: #fff;
	padding: 150px 0 0 ;
}

footer ul{
	overflow: hidden;
	text-align: center;
	margin:30px 0 140px;
}

footer ul li{
	display: inline-block;
	margin: 0 15px;
}

footer ul li a{
	display: inline-block;
	height: 0;
	padding-top: 80px;
	overflow: hidden;
	line-height: 100px;
	width: 441px;	
	transition: 0s!important;
}

footer ul li.btn01 a{ background: url("../../img/common/btn01_v1.png") no-repeat; transition: 0s!important;}
footer ul li.btn02 a{ background: url("../../img/common/btn02.png") no-repeat; transition: 0s!important;}

footer ul li.btn01 a:hover{ background: url("../../img/common/btn01_v1_hover.png") bottom no-repeat; padding-top: 80px; opacity: 1; transition: 0s!important;}
footer ul li.btn02 a:hover{ background: url("../../img/common/btn02_hover.png") bottom no-repeat; padding-top: 80px; opacity: 1; transition: 0s!important;}


footer div{width: 95% ;margin: 0 auto;}
footer div img{float: left;}
footer div small{
	color: #ffa100;
	font-size: 14.95px;
	float: right;
	font-weight: bold;
	margin-bottom: 30px;
}

@media screen and (max-width: 970px) {
	
	footer ul{width: 470px;  margin: 50px auto 90px;}
	footer ul li{margin: 10px 0;}
}

@media screen and (max-width: 740px) {
	
	footer img{width: 80%;}
	footer div img{display: none;}
	footer div{ margin: 0 auto 25px;}
	footer div small{text-align: center; float: none;}
	footer{padding: 90px 0 80px;}
	footer ul{margin: 25px auto 40px;}
	footer ul li{margin: 5px 0;}
}

@media screen and (max-width: 500px) {
	footer ul{width: 80%;}
	footer ul li{width: 100%;}
	footer ul li.btn01 a,footer ul li.btn02 a{width: 100%;  background-size: 100%; padding-top: 20%;}
}