/* ================================================================
 * 
 * トップページ用CSS
 * 
 * ================================================================ */

/* ================================================================================= */
/* header
/* ================================================================================= */

#page_index #index_users #caption{
	letter-spacing: 0.08em;
}




/* ================================================================================= */
/* スライダ設定　※bxslider設定は別途
/* ================================================================================= */
.bxslider li{
	background-size: cover;
	background-position: center center;
}

#index_slider_01{
	background-image: url(../images/slider_image/slider_bg_engine02.jpg);
}

#index_slider_02{
	background-image: url(../images/slider_image/slider_bg_engine03.jpg);
}

#index_slider_03{
	background-image: url(../images/slider_image/slider_bg_sea01.jpg);
}

#index_slider_04{
	background-image: url(../images/slider_image/slider_bg_engine05.jpg);
}

#index_slider_05{
	background-image: url(../images/slider_image/slider_bg_woods01.jpg);
}



/* ================================================================================= */
/* Index
/* ================================================================================= */

body#page_index div.container{
	width: 1000px;
	margin: 0 auto;
	padding: 30px 0 0;
}
@media screen and (max-width: 1000px){
	body#page_index div.container{
		width: 90%;
		max-width: initial;
	}
}

/* ========================================
 * Right Column
 * ======================================== */
div#index_right{
	width: 720px;
	float: right;
	overflow: hidden;
}
@media screen and (max-width: 1200px){
	div#index_right{
		width: 70%;
	}
}
@media screen and (max-width: 1000px){
	div#index_right{
		width: 100%;
		float: none;
	}
}
/* h2タイトル */
div#index_right h2 {
	font-size: 19px;
	font-weight: bold;
	color: #000;
	letter-spacing: -0.05em;
}
div#index_right h2 > span {
	font-size: 12px;
	margin-top: 3px;
	font-weight: normal;
	display: block;
	letter-spacing: 0;
}
@media screen and (max-width: 1000px){
	div#index_right h2 > span {
		font-weight: bold;
	}
}
@media screen and (max-width: 576px){
	div#index_right h2 {
		font-size: 15px;
	}
	div#index_right h2 > span {
		font-size: 10px;
	}
}

/* User's Voice */
	div#index_right section{
		width: 720px;	/* 698px */
		height: 300px;	/*248px*/
		margin: 0 0 20px;
		padding: 20px 10px;
		overflow: hidden;
		clear: both;
		border: 1px solid #eee;
		/*gradient*/
		background: #fafafa;
		background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 60%, #eeeeee 80%, #fcfcfc 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(60%,#eeeeee), color-stop(80%,#eeeeee), color-stop(100%,#fcfcfc));
		background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 60%,#eeeeee 80%,#fcfcfc 100%);
		background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 60%,#eeeeee 80%,#fcfcfc 100%);
		background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 60%,#eeeeee 80%,#fcfcfc 100%);
		background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 60%,#eeeeee 80%,#fcfcfc 100%);
	}
	@media screen and (max-width: 1000px){
		div#index_right section{
			width: 100%;
			height: auto;
			padding: 10px 10px 0px;
		}
	}
	div#index_right section > h1{
		font-size: 19px;
		font-weight: bold;
		color: #000;
		letter-spacing: -0.05em;
		padding-bottom: 4px;
	}
	div#index_right section > h1 > span {
		font-size: 12px;
		margin-top: 3px;
		font-weight: normal;
		display: block;
		letter-spacing: 0;
	}
	/*div#index_right section > h1 img{
		width: 186px;
		height: 34px;
		padding-bottom: 4px;
	}*/
	div#index_right section > ul{
		width: 680px;
		height: 160px;
		margin: 0 auto;
		overflow: hidden;
	}
	@media screen and (max-width: 940px){
		div#index_right section > ul{
			width: 100%;
			height: auto;
		}
	}		
	div#index_right section > ul li{
		width: 170px;
		float: left;
		text-align: center;
	}
	div#index_right section > ul li img {
		transition-duration: 0.1s;	/*変化に掛かる時間*/
	}
	div#index_right section > ul li img:hover {
		transform: scale(1.1);	/*画像の拡大率*/
		transition-duration: 0.1s;	/*変化に掛かる時間*/
	}
	@media screen and (max-width: 1200px){
		div#index_right section > ul li{
			width: 160px;
		}
	}
	@media screen and (max-width: 940px){
		div#index_right section > ul li{
			width: 25%;
		}
	}
	div#index_right section > ul li a {
		text-decoration: none;
	}
	div#index_right section > ul li img.icon{
		width: 144px;
		height: 126px;
	}
	@media screen and (max-width: 940px){
		div#index_right section > ul li img.icon{
			width: 100%;
			height: auto;
		}
	}
	div#index_right section > ul li .title{
		/*height: 16px;*/
		margin-top: 10px;
	}
	@media screen and (max-width: 1000px){
		div#index_right section > ul li .title{
			font-weight: bold;
		}
	}
	@media screen and (max-width: 940px){
		div#index_right section > ul li .title{
			margin-top: 10px;
		}
	}
	@media screen and (max-width: 768px){
		div#index_right section > ul li .title{
			font-size: 10px;
			letter-spacing: -0.1em;
		}
	}
	div#caption{
		width: 698px;
		margin: 10px auto 0;
		padding: 15px 0 20px;
		background: url(../images/etc/line.png) left top repeat-x;
		text-align: center;		
	}
	@media screen and (max-width: 1000px){
		div#caption{
			width: 100%;
			padding: 15px 0 5px;
			background: none;
		}
	}
	@media screen and (max-width: 576px){
		div#caption{
			text-align: left;	
		}
		div#caption > p br{
			display: none;
		}
	}
	div#caption p{
		display: none;
		font-size: 90%;
	}


/* whatszoil
 * ----------------------- */
a#index_whatszoil{
	display: block;
	width: 270px;	/* 263px */
	height: 100px;	/* 83px */
	padding: 15px 0 0 5px;
	background: #daeef3 url(../images/bg/bg_index_whatszoil.png)/* 130px -10px*/ no-repeat;
	margin: 0 0 20px;
	border: 1px solid #eee;
	float: left;
	position: relative;
	text-decoration: none;
}
@media screen and (max-width: 1200px){
	a#index_whatszoil{
		width: 40%;
		background-position-x: right !important;
	}
}
@media screen and (max-width: 768px){
	a#index_whatszoil{
		background-size: auto 70px;
		background-position-y: bottom;
	}
}

/* lineup
 * ----------------------- */
a#index_lineup{
	display: block;
	width: 430px;	/* 408px */
	height: 100px;	/* 78px */
	padding: 14px 10px 0;	/* 20px 10px 0 */
	border: 1px solid #eee;
	background: #d4ebf4 url(../images/bg/bg_index_lineup.png) no-repeat;
	overflow: hidden;
	position: relative;
	float:right;
	text-decoration: none;
}
@media screen and (max-width: 1200px){
	a#index_lineup{
		width: 58%;
		background-size: cover;
		background-position-x: right;
	}
}
@media screen and (max-width: 768px){
	a#index_lineup{
		width: 58%;
		background-position-x: 15%;	/* right */
	}
}

/* racersvoice
 * ----------------------- */
 a#index_racersvoice{
	display: block;
	width: 380px;	/*358px*/
	height: 100px;	/* 78px */
	padding: 20px 10px 0;
	background: url(../images/bg/bg_index_racersvoice.png) center center no-repeat;
	border: 1px solid #eee;
	float: left;
	position: relative;
	text-decoration: none;
}
@media screen and (max-width: 1200px){
	a#index_racersvoice{
		width: 50%;
		background-size: cover;
	}
}


/* movie
 * ----------------------- */
a#index_movie{
	display: block;
	width: 320px;	/* 300px */
	height: 100px;	/* 80px */
	margin: 0 0 20px;
	padding: 20px 10px 0;
	background: #7dcef4 url(../images/bg/bg_index_movie.png) left center;
	float: right;
	position: relative;
}
@media screen and (max-width: 1200px){
	a#index_movie{
		width: 49%;
		background-size: cover;
		background-position: right;
	}
}
a#index_movie img{
	display: none;
}

/* shoplist
 * ----------------------- */
 a#index_shoplist{
	display: block;
	width: 380px;	/* 358px */
	height: 100px;	/* 78px */
	margin: 0 0 20px;
	padding: 20px 10px 0;
	background: #daeef3 url(../images/bg/bg_index_shoplist.png) 180px -12px no-repeat;
	border: 1px solid #eee;
	clear:both;
	float: left;
	position: relative;
	text-decoration: none;
}
@media screen and (max-width: 1200px){
	a#index_shoplist{
		width: 50%;
	}
}
@media screen and (max-width: 940px){
	a#index_shoplist{
		background: #daeef3 url(../images/bg/bg_index_shoplist.png) right -12px no-repeat;
	}
}

/* shop registration
 * ----------------------- */
 a#index_registration{
	display: block;
	width: 320px;	/* 298px */
	height: 100px;	/* 78px */
	margin: 0 0 20px;
	padding: 20px 10px 0;
	background: #caf17e url(../images/bg/bg_index_registration.png) -80px 17px no-repeat;
	border: 1px solid #eee;
	float: right;
	position: relative;
	text-align: right;
	text-decoration: none;
}
@media screen and (max-width: 1200px){
	 a#index_registration{
		width: 49%;
	}
}

/* follow SUPERZOIL
 * ----------------------- */
#index_sns{
	width: 100%;
	height: 50px;
	clear: both;
	overflow: hidden;
}
#index_sns > div:first-child{
	width: 540px;	/* 480px */
	height: 100%;
	padding: 15px 30px;
	background: #f5f5f5;
	float: left;
	text-align: right;
}
@media screen and (max-width: 1200px){
	#index_sns > div:first-child{
		width: calc(100% - 180px);	/* iconサイズ50px + margin10px * 3 */
	}
}
@media screen and (max-width: 544px){
	#index_sns > div:first-child{
		padding: 16px 5px;
	}
	#index_sns > div h2{
		font-size: 3.5vw;
	}
}
/*#index_sns > div:first-child img{
	width: auto;
	height: 20px;
	padding: 5px 0;
}*/
#index_sns > a.icon_index_sns{
	margin-left: 10px;
}
#index_sns > a:hover{
	opacity: .7;
}


/* ========================================
 * Left Column
 * ======================================== */

/* Page Plugin
 * ----------------------- */
div#index_left_plugin{
	width: 250px;
	height: 370px;
}
@media screen and (max-width: 1000px){
	div#index_left_plugin{
		width: 100%;
		height: auto;
		max-width: 500px;	/* 250px */
		margin: 0 auto;
	}
}

/* facebook */
#index_left_plugin .fb_iframe_widget,
#index_left_plugin .fb_iframe_widget span,
#index_left_plugin .fb_iframe_widget iframe[style]{
    width: 100% !important;
}

/* ZOIL ARCHIVE
 * ----------------------- */
div#index_left{
	width: 250px;
	float: left;
	padding: 10px 0 0;
	margin-bottom: 20px;
	background: #59afb9;
	border: 0;
	/*position*/
	position: relative;
	/*font*/
	font-size: 96%;
	letter-spacing: 0.015em;
}
@media screen and (max-width: 1000px){
	div#index_left{
		margin-top: 20px;
		width: 100%;
	}
}

div#index_left h1{
	font-size: 19px;
	font-weight: bold;
	color: #fff;
	letter-spacing: -0.05em;
	margin: 0 10px 10px;
}
div#index_left h1 > span {
	font-size: 12px;
	margin-top: 3px;
	font-weight: normal;
	display: block;
	letter-spacing: 0;
}

/*div#index_left h1 img{
	padding: 6px 2px;
}*/

div#index_left .scroll-pane{
	width: 256px;
	/*height: 590px;*/
	height: 200px;
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 1000px){
	div#index_left .scroll-pane{
		width: calc(100% + 5px);
	}
}
/* Edge のみ適用 */
/*@supports (-ms-ime-align: auto) {*/
	/* 横スクロールバー非表示 */
	/*#tab_motorcycle .jspHorizontalBar .jspPane {
		position: static;
	}*/
	.jspHorizontalBar .jspTrack .jspDrag {
		display: none;
	}
	#tab_motorcycle .jspPane {
		min-width: 100%;
		width: auto !important;
		left: 0;
	}
/*}*/

/*タブコントローラ*/
ul#index_tab_controller{
	width: 100%;
	height: 53px;	/* 50px */
	float: right;
	position: relative;
	right: 16px;
	z-index: 200;
	margin: 0 0 14px;
}
@media screen and (max-width: 1000px){
	ul#index_tab_controller{
		right: 0;
		display: flex;
		height: 60px;
	}
}

ul#index_tab_controller li{
	width: 104px;
	height: 53px;	/* 50px */
	position: absolute;
}
@media screen and (max-width: 1000px){
	ul#index_tab_controller li{
		width: 50%;
		height: 60px;
		text-align: center;
		position: static;
	}
	ul#index_tab_controller li > a{
		display: block;
	}
}

ul#index_tab_controller li#controller_car{
	background: none;
	right: 114px;
}
@media screen and (max-width: 1000px){
	ul#index_tab_controller li#controller_car{
		right: 0;
	}
}

ul#index_tab_controller li#controller_motorcycle{
	background: none;
	right: 0;
}

ul#index_tab_controller li.tab_acc{
	height: 53px;	/* 50px */
	border-bottom: 3px solid #fff;
}
@media screen and (max-width: 1000px){
	ul#index_tab_controller li.tab_acc{
		height: 60px;
	}
}
ul#index_tab_controller li:hover{
	border-bottom: 3px solid #ff0;
}

ul#index_tab_controller li img{
	width: 104px;
	height: 50px;
}

ul#index_tab_controller + div{
	width: 100%;
	clear: both;
	font-size: 92%;
	background: transparent;
}
ul#index_tab_controller + div a{
	color: #fff;
	text-decoration: none;
}

ul#index_tab_controller + div a.hover{
	color: #ff0;
	text-decoration: underline;
}
ul#index_tab_controller + div a.hover img{
	border: 1px solid #ff0;
}

/*PDF記事部分*/
	ul#index_tab_controller + div dl{
		width: 250px;
	}
	ul#index_tab_controller + div dl.tab_acc{
		display: block;
	}
	
	ul#index_tab_controller + div dl dt{
		clear: both;
		float: left;
		margin: 8px 6px 0 10px;
	}
	ul#index_tab_controller + div dl dd{
		width: 252px;	/* 234px */
		min-height: 48px;	/* 32px */
		padding: 8px 8px 8px 10px;
		border-top: 1px solid #fff;
	}
	@media screen and (max-width: 1000px){
		ul#index_tab_controller + div dl#tab_car dd{
			width: calc(100% + 5px);
		}
		ul#index_tab_controller + div dl#tab_motorcycle dd{
			width: 100%;
		}
	}
	ul#index_tab_controller + div dl dd a{
		display: block;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	ul#index_tab_controller + div dl dt img{
		width: 56px;
		height: 32px;
		border: 1px solid #fff;
		border-radius: 1px;
	}