/* Y'S GEAR : layout.css */


.contentsTop .contentsWidth {
	margin: 0 0 30px 0;
	padding: 0 5px;
	background: #000;
	color: #fff;
}


/*======================================================================*
 *  [ mainImage | メイン画像 ]
 *======================================================================*/

.mainImage {
	position: relative;
	padding: 36.2244898% 0 0 0;
	background: url(../img/bg_main.jpg) center top no-repeat;
	background-size: contain;
	text-align: center;
}
.mainImage img {
	position: absolute;
	left: 50%;
}
.mainImage .logo {
	top: 10%;
	margin: 0 0 0 -211px;
}
.mainImage .text {
	bottom: 10px;
	margin: 0 0 0 -135px;
}


/*======================================================================*
 *  [ linkNav | ページ内リンク ]
 *======================================================================*/

.linkNav {
	margin: 0 0 20px 0;
	padding: 0 10px;
	color: #989898;
	line-height: 30px;
	text-align: center;
}
.linkNav li {
	display: inline-block;
}
.linkNav li + li:before {
	display: inline-block;
	height: 30px;
	margin: 0 .5em 0 .1em;
	vertical-align: bottom;
	content: "/";
}
.linkNav a {
	display: inline-block;
	height: 30px;
	background-size: 100% auto;
	text-indent: 100%;
	white-space: nowrap;
	vertical-align: bottom;
	overflow: hidden;
}
.linkNav a:hover {
	background-position: left bottom;
}
.linkNav a.mt-09 	{ width:  50px; background-image: url(../img/nav_mt-09.png); }
.linkNav a.mt-09tr 	{ width: 121px; background-image: url(../img/nav_mt-09tr.png); }
.linkNav a.mt-07 	{ width:  51px; background-image: url(../img/nav_mt-07.png); }
.linkNav a.yzf-r25 	{ width:  66px; background-image: url(../img/nav_yzf-r25.png); }
.linkNav a.yzf-r3	{ width:  56px; background-image: url(../img/nav_yzf-r3.png); }
.linkNav a.serow 	{ width:  60px; background-image: url(../img/nav_serow.png); }
.linkNav a.wr250r 	{ width:  66px; background-image: url(../img/nav_wr250r.png); }
.linkNav a.bolt-c 	{ width: 110px; background-image: url(../img/nav_bolt-c.png); }


/*======================================================================*
 *  [ movieList | 動画一覧 ]
 *======================================================================*/

.movieList section {
	float: left;
	width: 50%;
	margin: 0 0 50px 0;
	padding: 0 15px;
	box-sizing: border-box;
}
.movieList section:nth-child(2n+1) {
	clear: both;
}

.movieList .movie {
	margin: 0 0 20px 0;
	padding: 5px;
	background: rgb(84,84,84); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(84,84,84,1) 0%, rgba(57,57,57,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(84,84,84,1)), color-stop(100%,rgba(57,57,57,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(84,84,84,1) 0%,rgba(57,57,57,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(84,84,84,1) 0%,rgba(57,57,57,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(84,84,84,1) 0%,rgba(57,57,57,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(84,84,84,1) 0%,rgba(57,57,57,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#393939',GradientType=1 ); /* IE6-9 */
}
.movieList .movie div {
	position: relative;
	height: 0;
	padding: 56.25% 0 0 0;
	background: #666;
	overflow: hidden;
}
.movieList .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*======================================================================*
 *  [ Media Queries 568 ] 
 *======================================================================*/

@media screen and (max-width: 568px) {
	
	.contentsTop .contentsWidth {
		margin: 0;
		padding: 0 0 20px 0;
	}
	
	
	/*==================================================================*
	 *  [ mainImage | メイン画像 ]
	 *==================================================================*/
	
	.mainImage .logo {
		width: auto;
		height: 24px;
		margin: 0 0 0 -108px;
	}
	
	
	/*==================================================================*
	 *  [ movieList | 動画一覧 ]
	 *==================================================================*/
	
	.movieList section {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;
		padding: 10px;
	}
	.movieList section h3 {
		text-align: center;
	}
	
	.movieList .movie {
		margin: 0 0 10px 0;
	}
	
}


/*======================================================================*
 *  [ Media Queries 375 ] 
 *======================================================================*/

@media screen and (max-width: 375px) {
	
	/*==================================================================*
	 *  [ mainImage | メイン画像 ]
	 *==================================================================*/
	
	.mainImage {
		padding: 50% 0 0 0;
		background-size: cover;
	}
	
}