@charset "UTF-8";

@font-face {
	font-family: 'iconFont';
	src: url("../asset/font/iconFont.eot?#iefix") format("eot");
}
@font-face {
	font-family: "iconFont";
	src:url("../asset/font/iconFont.woff") format("woff"),
	url("../asset/font/iconFont.ttf")  format("truetype"),
	url("../asset/font/iconFont.otf")  format("opentype");
}

/*------------------------------------------------------

	COMMON

------------------------------------------------------*/
*{
/*	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;*/
	font-style:normal;
}
html{
	font-size:62.5%;
}
body#drv_410 {
	background-size:cover;
	-webkit-text-size-adjust:100%;

	overflow-x:hidden;
	background:#000;

}
body#drv_410 #content {
	font-family: "Frutiger Neue W01 Light", Frutiger, Helvetica, sans-serif;

	font-size: 16px;  font-size: 1.6rem;
	font-weight:thin ;
	color:#fff;
	letter-spacing:0.1rem;
	text-align:center;
  line-height:normal !important;
  
}

body#drv_410 #content a{
	color:#fff;
	transition: all 0.2s linear 0s;
}
body#drv_410 #content a:hover{
	color:#fddd3c;
}
h1{
	position:relative;
	z-index:3;
}
h1 img{
	width:150px;
	margin:40px 0 0;
}
body#drv_410 #content br{
	display:none;
}
body#drv_410 #content br.hideNever{
	display:inherit;
}
body#drv_410 #content img {
	max-width:100%;
}
body#drv_410 #content .blank:after{
	content:" \e600";
	font-family:"iconFont";
}
body#drv_410 #content .linkTxt{
	text-decoration:underline;
}

/* GRID 
----------------------- */
.spDiv01,.spDiv02,.spDiv03,.spDiv04{
	display:block;
	float:left;
	padding:0 15px;
	margin:5px 0;
}
.spDiv01{
	width:100%;
}
.spDiv02{
	width:50%;
}
.spDiv03{
	width:33.33333333%;
}
.spDiv04{
	width:25%;
}

@media only screen and (min-width:600px){
	h1 img{
		width:220px;
		margin:70px 0 0;
	}
	.row{
		margin:0;
	}
	.pcDiv01,.pcDiv02,.pcDiv03,.pcDiv04{
		display:block;
		float:left;
		padding:0;
		margin:0;
	}
	.pcDiv01{
		width:100%;
	}
	.pcDiv02{
		width:50%;
	}
	.pcDiv03{
		width:33.33333333%;
	}
	.pcDiv04{
		width:25%;
	}
	h2.secTtl{
		font-size:3rem;
	}
body#drv_410 #content br{
		display:inherit;
	}

}

/*------------------------------------------------------

	LOADING

------------------------------------------------------*/
#pageloader {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 1);
	z-index: 999999;
	top: 0;
}
#pageloader .loader-container {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -90px;
	text-align: center;
}
.loader:before,
.loader:after,
.loader {
	border-radius: 50%;
	width: 2.4em;
	height: 2.4em;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.loader{
	-webkit-animation: loadOrg 1.8s infinite ease-in-out;
	animation: loadOrg 1.8s infinite ease-in-out;
	font-size: 10px;
	margin: 80px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before {
	left: -3.5em;
	-webkit-animation: loadYel 1.8s infinite ease-in-out;
	animation: loadYel 1.8s infinite ease-in-out;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader:after {
	left: 3.5em;
	-webkit-animation: loadGrn 1.8s infinite ease-in-out;
	animation: loadGrn 1.8s infinite ease-in-out;
}
.loader:before,
.loader:after {
	content: '';
	position: absolute;
	top: 0;
}
@-webkit-keyframes loadYel {
	0%,
	80%,
	100% {box-shadow: 0 2.5em 0 -1.3em #fff;}
	40%  {box-shadow: 0 2.5em 0 0 #fff;}
}
@keyframes loadYel {
	0%,
	80%,
	100% {box-shadow: 0 2.5em 0 -1.3em #fff;}
	40%  {box-shadow: 0 2.5em 0 0 #fff;}
}
@-webkit-keyframes loadOrg {
	0%,
	80%,
	100% {box-shadow: 0 2.5em 0 -1.3em #fff;}
	40%  {box-shadow: 0 2.5em 0 0 #fff;}
}
@keyframes loadOrg {
	0%,
	80%,
	100% {box-shadow: 0 2.5em 0 -1.3em #fff;}
	40%  {box-shadow: 0 2.5em 0 0 #fff;}
}
@-webkit-keyframes loadGrn {
	0%,
	80%,
	100% {box-shadow: 0 2.5em 0 -1.3em #fff;}
	40%  {box-shadow: 0 2.5em 0 0 #fff;}
}
@keyframes loadGrn {
	0%,
	80%,
	100% {box-shadow: 0 2.5em 0 -1.3em #fff;}
	40%  {box-shadow: 0 2.5em 0 0 #fff;}
}

/*------------------------------------------------------

	HEADER

------------------------------------------------------*/
header{
	width:100%;
	height:44px;
	background:#000;
	position:relative;
	z-index:999;
	top:0;
	left:0;
}
header a{
	color:#fff;
}
header a:hover{
	color:#fddd3c;
}
header #brandName{
	float:left;
}
header #brandName img{
	height:24px;
	margin:10px;
}
#siteTtl a{
	color:#fddd3c;
	float:right;
	margin-right:50px;
	max-width:30%;

}
#siteTtl a,
#subLink{
	display:none;
}
@media only screen and (min-width:320px){
	#siteTtl a{
		letter-spacing:0;
		font-size:1rem;
		padding:15px 0;
		display:inline-block;
		text-align:right;
		line-height:1em;
	}
}
@media only screen and (min-width:500px){
	#siteTtl a{
		padding:15px 0;
	}
}
@media only screen and (min-width:800px){
	header{
		height:76px;
	}
	header #brandName{
		height:76px;
		min-width:350px;
	}
	
	header #brandName img{
		height:30px;
		float:left;
		margin:23px;
	}
	#siteTtl a{
		font-size:inherit;
		float:right;
		line-height:76px;
		padding:0 15px;
		display:block;
		margin:auto;
	}

	#headerSec ul li{
		float:left;
		padding:0 60px 0 90px;
	}

	#spNavBtn{
		display:none;
	}
	#headerSec nav{
		display:block;
		position:inherit;
		background:none;
	}

	#siteTtl img{
		vertical-align:middle;
	}
	#subLink{
		float:left;
		display:inherit;
		margin:0;
		height:76px;
		line-height:76px;
		background:#4d4d4d;
		font-size:12px;
		padding:0 20px;
		letter-spacing:0;
	}
	#subLink a{
		display:block;
	}
}

/*------------------------------------------------------

	NAVI FOR PC & SMAPH
	
	以下のスクリプトが絡んでいます。
	- jquery.sticky.js(ページにくっつく仕様)
	- script.js（アコーディオン仕様）

------------------------------------------------------*/
#navPc-sticky-wrapper,
#navPc{
	position:fixed;
	top:0;
	left:0;
	z-index:10000;
	width:100%;
}
#navInner{
	background:#000;
	display:none;
}
#navPc a{
	display:block;
	padding:10px;
	border-bottom:1px solid #333;
}
#menu{
	width:44px;
	height:44px;
	position:absolute;
	bottom:-44px;
	right:0;
	cursor:pointer;
	background:rgba(253,221,60,.5);
	position:absolute;
}
#menu:before{
	content: "";
	width: 16px;
	height: 3px;
	display: block;
	margin: 14px auto 0px;
	border-top: 3px solid #ccc;
	border-bottom: 3px solid #ccc;
}
#menu:after{
	content: "";
	width: 16px;
	height: 3px;
	background: #ccc;
	display: block;
	margin: 3px auto 0px;
}
#navPc li a:hover,
#diary #navPc .navDiary,
#drv_410 #navPc .navdrv_410,
#kna_dr350_300 #navPc .navKna_350_300,
#index .current{
	background:rgba(253,221,60,.5);
}
#navPc .hidePc{
	color:#666;
	font-size:1.2rem;
}

@media only screen and (min-width:800px){
	#navPc-sticky-wrapper,
	#navPc{
		display:block;
		text-align:center;
		background:none;
		position:relative;
		top:auto;
		left:auto;
	}
	#navPc {
		width: 100%;
		background:rgba(0,0,0,.7);
		text-align: center;
		width:100%;
		position:fixed;
		z-index:9999;
	}
	#navPc li{
		display:inline-block;
		width:15%;
		border-left:1px solid #333;
		background:none;
		text-align:center;
	}
	#navPc li:first-child{
		border:none;
	}
	#navPc a{
		padding:10px 0 13px;
		display:block;
	}
	#navPc a:last-child{
		border-bottom:none;
	}
	#navPc img{
		vertical-align:middle;
		max-width:80%;
		height:auto;
	}
	
	#navInner{
		display:block;
		background:none;
	}
	#menu{
		display:none;
	}
	#navPc .blank{
		display:none;
	}

}


/*------------------------------------------------------

	NAVI FOR SMAPH

------------------------------------------------------*/
#navSmaphStatic{
	background:#111;
	text-align:left;
}
#navSmaphStatic li{
	display:inline-block;
	width:50%;
	text-align:center;
	padding:10px 0;
	background:rgba(253,221,60,.5);
	border-bottom:1px solid #333;
	border-right:1px solid #333;
}
#navSmaphStatic li:nth-child(even){
	border-right:none;
}/*
#navSmaphStatic li:last-child{
	border-bottom:none;
}*/
#navSmaphStatic img{
	height:16px;
	vertical-align:middle;
}
#diary #navSmaphStatic .navDiary,
#drv_410 #navSmaphStatic .navdrv_410,
#kna_dr350_300 #navSmaphStatic .navKna_350_300,
#index .current{
	background:rgba(253,221,60,.5);
}


@media only screen and (min-width:800px){
	#navSmaphStatic{
		display:none;
	}
}

/*------------------------------------------------------

	PAGE TOP

------------------------------------------------------*/
#pageTop{
	padding:100px 0;
}
#pageTop > div{
	position:relative;
	width:90px;
	height:90px;
	margin:0 auto;
}


/*------------------------------------------------------

	FOOTER (PAGE NAVIGATION)

------------------------------------------------------*/
#navFooter{
	background:rgba(0,0,0,.9);
	letter-spacing:0;
}
#navFooter .contInner{
	padding:10% 0;
}
#navFooter .td{
	text-align:left;
	padding:5% 10%;
}
#navFooter .first{
	background:url("../img/common/bg_texture.gif");
	margin:0 5%;
	padding:5%;
	letter-spacing:0.1em;
}
#navFooter .second{
	padding:0;
	margin:5%;
}
#navFooter .td li{
	position:relative;
}
#navFooter .second .secondRow:after{
	content:" \e600";
	font-family:"iconFont";
	position:absolute;
	right:0;
	top:50%;
	margin-top:-5px;
}

#navFooter .firstRow{
	font-size:1.4rem;
	margin:10px 0;
	font-weight:300;
}
#navFooter .firstRow small{
	font-size:12px;
	color:#999;
	padding:0 10px 0 0;
	vertical-align:middle;
	display:block;
}
#navFooter .firstRow,
#navFooter .firstRow a{
	font-size:1.6rem;
}

#navFooter .secondRow{
	font-size:1.2rem;
	position: relative;
	padding: 0 0 0 22px;
	margin:10px 0;
	vertical-align: middle;
	text-decoration: none;
	font-weight:100;
}
#navFooter .secondRow:before{
	content:"";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	vertical-align: middle;
	left: 3px;
	width: 4px;
	height: 4px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#navFooter .second li{
	border-bottom:1px dotted #666;
}
#navFooter .td li.title{
	border-bottom:1px solid #333;
	color:#666;
	font-size:1.4rem;
	letter-spacing:.05em;
	margin-bottom:10px;
}
#navFooter .secondRow.last{
	margin-bottom:20px;
}
#navFooter .second .secondRow a{
	display:block;
	padding:10px 0;
}

#snsBtn{
	padding:5%;
}
#snsBtn li{
	display:inline-block;
	vertical-align:middle;
	margin:0 10px;
}
#snsBtn a{
	display:block;
	width:32px;
	height:32px;
}
#snsBtn a img{
	width:100%;
}

@media only screen and (min-width:415px){
	#navFooter .contInner{
		padding:5% 0 0;
	}
	#navFooter .contInner .tr{
		display:table;
		width:100%;
		text-align:center;
	}
	#navFooter .td{
		display:table-cell;
		padding:3% 7%;
	}
	#navFooter .first{
		border:none;
		width:50%;
	}
	#navFooter .second{
		padding:5%;
		margin:5%;
	}
	#navFooter .firstRow,
	#navFooter .firstRow a{
		font-size:16px;
		font-size:1.6rem;
		padding-top:5px;
		padding-bottom:5px;
	}
	#navFooter .secondRow{
		font-size:14px;
		font-size:1.4rem;
	}
	#navFooter .firstRow small{
		display:inline-block;
	}

}
/*------------------------------------------------------

	FOOTER (CORPORATE)

------------------------------------------------------*/
#corporatLink,
#copy{
	line-height:30px;
	font-size:12px;
	display:block;
}
#corporatLink a{
	display:block;
}
.spDisNon{
	display:none;
}



@media only screen and (min-width:800px){
#corporatLink{
	float:right;
}
#corporatLink a{
	display:inline-block;
	vertical-align:middle;
}
#corporatLink a:before{
	content:" | ";
}
#corporatLink a:first-child:before{
	content:none;
}
#copy{
	float:left;
}
}


div.bd div{
	background:background: rgb(234,190,7);
	background: -moz-linear-gradient(-45deg,  rgba(234,190,7,.5) 20%, rgba(245,151,1,.3) 50%, rgba(83,96,43,.5) 80%);
	background: -webkit-linear-gradient(-45deg,  rgba(234,190,7,.5) 20%,rgba(245,151,1,.3) 50%,rgba(83,96,43,.5) 80%);
	background: linear-gradient(135deg,  rgba(234,190,7,.5) 20%,rgba(245,151,1,.3) 50%,rgba(83,96,43,.5) 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eabe07', endColorstr='#53602b',GradientType=1 );
	position:absolute;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
.bd div.bdT{
	width: 100%;
	height:1px;
	top:0;
	left:0;
}
.bd div.bdB{
	width: 100%;
	height:1px;
	bottom:0;
	right:0;
}
.bd div.bdR{
	height:100%;
	width :1px;
	right:0;
	top:0;
}
.bd div.bdL{
	height:100%;
	width:1px;
	left:0;
	bottom:0;
}
.active .bd div.bdT{
	width:100%;
	height:5px;
	top:0;
	left:0;
	}
.active .bd div.bdB{
	width:100%;
	height:5px;
	bottom:0;
	right:0;
}
.active .bd div.bdR{
	height:100%;
	width:5px;
	right:0;
	top:0;
}
.active .bd div.bdL{
	height:100%;
	width :5px;
	left:0;
	bottom:0;
}
.bd div.bdT,
.bd div.bdB{
	width: 0;
}
.bd div.bdR,
.bd div.bdL{
	height:0;
}

/* clear fix
----------------------- */
.cf:after{content: "."; display: block; height: 0; font-size:0;	clear: both; visibility:hidden;}
.cf{display: inline-block;} 
/* Hides from IE Mac */
* html .cf{	height: 1%;}
.cf{display:block;}
/* End Hack */