@charset "utf-8";

/**********************************************************
全ページ共通設定（デフォルト）モバイルファースト
**********************************************************/
body{
	font-size: 100%;
	font-size: 14px;
	font-weight: normal;
	line-height:1.5;
	font-family: "Trebuchet MS",Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust:none;
	background:#000;
	text-align:left;
	position:relative;
	word-wrap: break-word 
}

/*h1,h2, h3, h4, h5, h6, h7*/
h1, h2, h3, h4, h5, h6, h7 { font-weight:normal; }

/*float解除*/
.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.clearfix {	display: inline-block; } 
 /* Hides from IE Mac */
* html .clearfix{ height: 1%; }
.clearfix{ display:block; }
 /* IE6 */
* html .clearfix { zoom: 1;}
 /* IE7 */
*:first-child+html .clearfix { zoom: 1;}

/*イメージhover処理*/
.imghover:hover img { filter:alpha(opacity=70); opacity:0.7; }

/*コピーライト*/
#copyright { font-size:12px; text-align:center; margin-top:10px;}

/**********************************************************
モバイル
**********************************************************/
#wrap { background:#FFF; width:100%; }

/***ヘッダー***/
#head { padding:10px; position:relative; }
#head h1 a {
	display:block;
	width:165px;
	height:40px;
	margin:0 auto;
	background:url(../img/logo_sp.png) no-repeat;
	background-size:165px auto;
	background-position:center center;
	text-indent:-99999px;
}
#head #head-nav { display:none; }

/*ハンバーガーメニュー*/
#head #hamburger {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	height: 40px;
	position: absolute;
	top:10px;
	left:10px;
	cursor: pointer;
}
#head #hamburger a { display:block; width:30px; height:40px; }
#head #hamburger .icn {
	position: relative;
	width: 100%;
	height: 100%;
}
#head #hamburger .icn span {
	position: absolute;
	left: 0;
	width: 30px;
	height: 4px;
	background-color: #b5b5b5;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
#head #hamburger .icn span:nth-of-type(1) { top: 5px; }
#head #hamburger .icn span:nth-of-type(2) { top: 17px; }
#head #hamburger .icn span:nth-of-type(3) { top: 29px; }
#head #hamburger .simple-menu.on { z-index: 5000; }
#head #hamburger .simple-menu.on .icn span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
#head #hamburger .simple-menu.on .icn span:nth-of-type(2) { opacity: 0; }
#head #hamburger .simple-menu.on .icn span:nth-of-type(3) {
	-webkit-transform: translateY(-14px) rotate(45deg);
	transform: translateY(-14px) rotate(45deg);
}

/***イメージエリア***/
#main-img img { width:100%; }
#HOME img { width:100%; }
#AWAY img { width:100%; }
#TRD img { width:100%; }
#4TH img { width:100%; }
#OTHER_ITEM img { width:100%; }

#main-img { background:#000000; }
#main-img2 { background:#1b1b1b; padding-top:15px; }
#main-img2 img { width:100%; }

#main-img3 { background:#2c2c2c; padding-top:30px; }
#main-img3 img { width:100%; }

/***コンテンツエリア***/
.section { background:#2c2c2c; color:#FFF; padding:10px 10px 20px 10px;}
.section h2 { font-size:20px; text-align:center; padding-top:10px; }
.section h2 span { border-bottom:1px solid #FFF; }
.section h3 { font-size:18px; margin-top:10px; text-align:center; }
.section p { margin-top:10px; }

/***セクション1***/
#section01 ul li:first-child { text-align:center; }
#section01 ul li img { width:100%; }
#section01 ul li p { text-align:left; font-size:smaller; }
#section01 p { text-align:center; }

/***セクション2***/
#section02 ul li { padding:10px; margin-top:15px; text-align:center; }
#section02 ul li img { width:100%; }
#section02 p { text-align:center; }
#section02 ul li p { text-align:left; }
#section02 ul li p span { text-align:left; font-weight:bold; font-size:large }
#section02 ul li .btn-lineup { margin:10px 0; width:50%; margin-left:auto; }
#section02 ul li .btn-lineup a {
	display:block;
	width:100%;
	height:100%;
	padding:10px 0;
	color:#FFF;
	text-decoration:none;
	border:1px solid #FFF;
	background:url(../img/btn_arrow_d.png) no-repeat;
	background-position:95% center;
	background-size:10px auto;
	text-align:center;
}
#section02 ul li .btn-lineup a:hover {
	background:url(../img/btn_arrow_d.png) no-repeat, #2c2c2c;
	background-position:95% center, 0 0;
	background-size:10px auto, auto auto;
}

/***セクション2***/
#section02-1 { background:#1b1b1b;}
#section02-1 ul li { padding:10px; margin-top:15px; text-align:center; }
#section02-1 ul li img { width:100%; }
#section02-1 p { text-align:center; }
#section02-1 ul li p span { text-align:left; font-weight:bold; font-size:large }
#section02-1 ul li .btn-lineup { margin:10px 0; width:50%; margin-left:auto; }
#section02-1 ul li .btn-lineup a {
	display:block;
	width:100%;
	height:100%;
	padding:10px 0;
	color:#FFF;
	text-decoration:none;
	border:1px solid #FFF;
	background:url(../img/btn_arrow_d.png) no-repeat;
	background-position:95% center;
	background-size:10px auto;
	text-align:center;
}
#section02-1 ul li .btn-lineup a:hover {
	background:url(../img/btn_arrow_d.png) no-repeat, #2c2c2c;
	background-position:95% center, 0 0;
	background-size:10px auto, auto auto;
}

/***セクション2-2***/
#section02-2 { background:#1b1b1b;}
#section02-2 ul li { padding:10px; text-align:center; }
#section02-2 ul li img { width:100%; }
#section02-2 ul li h4 { text-align:center; font-size:large; margin-top:5px; }
#section02-2 ul li p { text-align:left; }
#section02-2 ul li p span { font-size:large; }
#section02-2 ul li .btn-lineup { margin:10px 0; width:50%; margin-left:auto; }
#section02-2 ul li .btn-lineup a {
	display:block;
	width:100%;
	height:100%;
	padding:10px 0;
	color:#FFF;
	text-decoration:none;
	border:1px solid #FFF;
	background:url(../img/btn_arrow_d.png) no-repeat;
	background-position:95% center;
	background-size:10px auto;
	text-align:center;
}
#section02-2 ul li .btn-lineup a:hover {
	background:url(../img/btn_arrow_d.png) no-repeat, #2c2c2c;
	background-position:95% center, 0 0;
	background-size:10px auto, auto auto;
}

/***セクション2-3***/
#section02-3 { background:#1b1b1b;}
#section02-3 ul li { padding:10px; margin-top:15px; text-align:center; }
#section02-3 ul li img { width:100%; }
#section02-3 ul li h4 { text-align:center; font-size:large; margin-top:5px; }
#section02-3 ul li p { text-align:left; }
#section02-3 ul li p span { text-align:left; font-weight:bold; font-size:large }
#section02-3 ul li .btn-lineup { margin:10px 0; width:50%; margin-left:auto; }
#section02-3 ul li .btn-lineup a {
	display:block;
	width:100%;
	height:100%;
	padding:10px 0;
	color:#FFF;
	text-decoration:none;
	border:1px solid #FFF;
	background:url(../img/btn_arrow_d.png) no-repeat;
	background-position:95% center;
	background-size:10px auto;
	text-align:center;
}
#section02-3 ul li .btn-lineup a:hover {
	background:url(../img/btn_arrow_d.png) no-repeat, #2c2c2c;
	background-position:95% center, 0 0;
	background-size:10px auto, auto auto;
}

/***セクション2-4***/
#section02-4 ul li { padding:10px; margin-top:15px; text-align:center; }
#section02-4 ul li img { width:100%; }
#section02-4 p { text-align:center; }
#section02-4 ul li p span { text-align:left; font-weight:bold; font-size:large }
#section02-4 ul li .btn-lineup { margin:10px 0; width:50%; margin-left:auto; }
#section02-4 ul li .btn-lineup a {
	display:block;
	width:100%;
	height:100%;
	padding:10px 0;
	color:#FFF;
	text-decoration:none;
	border:1px solid #FFF;
	background:url(../img/btn_arrow_d.png) no-repeat;
	background-position:95% center;
	background-size:10px auto;
	text-align:center;
}
#section02-4 ul li .btn-lineup a:hover {
	background:url(../img/btn_arrow_d.png) no-repeat, #2c2c2c;
	background-position:95% center, 0 0;
	background-size:10px auto, auto auto;
}

/***セクション3***/
#section03 { background:#1b1b1b;}
#section03 ul li{ margin-top:15px;}
#section03 ul li .imgleft{ float:left; width:80px; margin-left:0; padding-left:0;}
#section03 ul li h4 { margin-left:80px; padding-left:10px; color:#FFF;}
#section03 ul li p { margin-left:80px; margin-top:5px; padding-left:10px;}

/***セクション4***/
#section04 ul { margin-top:15px;}
#section04 ul li:first-child { width:100%; margin:0 auto; }
#section04 ul li iframe { width:100%; height:100%; }
#section04 ul li h4 { color:#FFFFFF; margin-top:10px;}
#section04 ul li p { margin-top:5px; }

/***ラインナップ***/
/*h3のタイトル*/
#lineup { background:#000; overflow:hidden; height:auto; position:relative; }
/*パターン❶*/
#lineup h3#title-css {
	color:#FFF;
	font-size:18px;
	background:#000;
	border-bottom:3px solid #FFF;
	padding:5px;
	text-align:left;
	line-height:1.0;
}

/*パターン❷*/
#lineup h3#title-img {
	background:url(../img/bg-h3.png) repeat-x;
	background-position:left bottom;
	text-align:left;
	padding:5px;
}
#lineup h3#title-img img { width:150px;}

/*パターン❸*/
#lineup h3#title-mark {
	background:url(../img/mark-h3.png) no-repeat;
	background-position:left center;
	background-size:30px auto;
	font-size:28px;
	text-align:left;
	padding-left:40px;
	font-style:italic;
}

#lineup ul { height:auto; overflow:hidden; position:relative; }
#lineup ul li {
	position:relative;
	font-size:12px;
	width:49%;
	padding-bottom:10000px;
	margin-bottom:-10000px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align:center;
}
#lineup ul li:hover { color:#05e300; }
#lineup ul li:nth-child(odd) { float:left; clear:both; }
#lineup ul li:nth-child(even) { float:right; }
#lineup ul li img { width:100%; }
#lineup ul li p { text-align:left; }
#lineup ul li p.price { text-align:right; margin-top:0;}
#lineup ul li p.own-price { color:#b81313; text-align:right; margin-top:0; margin-bottom:20px;}
#lineup ul li a {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	text-indent:-9999px;
}



/***トップラインナップメニュー***/
#menulineup li a {
   float:left;
   list-style:none;
}
#menulineup ul li img { width:120px; }



/***フッター***/
footer { background:#000; position:relative; color:#FFF; padding-top:15px; }
footer .btn-pagetop { cursor:pointer; }
footer #btn-pagetop { position:absolute; top:0; right:10px; }
footer #foot { background:#333333; padding:10px 10px 0 10px;}
footer #foot h1 a {
	display:block;
	width:165px;
	height:40px;
	margin:0 auto;
	background:url(../img/logo_sp.png) no-repeat;
	background-size:165px auto;
	background-position:center center;
	text-indent:-99999px;
}
footer #foot ul { margin-top:15px; }
footer #foot ul li { float:left; margin:0 20px 15px 0; }
footer #foot ul li a { color:#FFF; text-decoration:none; font-size:12px; }
footer #foot ul li a:hover { color:#05e300;}
footer #copyright { background:#333333; margin-top:0; }

/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:480px){
	#section04 ul li iframe { height:300px; }

}

/********************************************
タブレット
*********************************************/
@media screen and (min-width:768px){
	body { font-size:16px; }
	
	/***コンテンツエリア***/
	.section h2 { font-size:36px;}
	.section h3 { font-size:20px; }
	
	/***セクション1***/
	#section01 { background:#1b1b1b;}
	#section01 ul { margin-top:20px; }
	#section01 ul li:first-child {
		float:right;
		width:50%;
		padding-right:10px;
		padding-left:15px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section01 ul li:last-child {
		float:left;
		width:50%;
		padding-right:30px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	/***セクション2***/
	#section02 ul { height:auto; overflow:hidden; }
	#section02 ul li{
		position:relative;
		width:49%;
		padding-bottom:10000px;
		margin-bottom:-10000px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section02 ul li:nth-child(odd){ float:left; clear:both;}
	#section02 ul li:nth-child(even){ float:right;}
	
	/***セクション2-1***/
	#section02-1 ul { height:auto; overflow:hidden; }
	#section02-1 ul li{
		position:relative;
		width:49%;
		padding-bottom:10000px;
		margin-bottom:-10000px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section02-1 ul li:nth-child(odd){ float:left; clear:both;}
	#section02-1 ul li:nth-child(even){ float:right;}

/***セクション2-2***/
	#section02-2 ul { height:auto; overflow:hidden; }
	#section02-2 ul li{
		position:relative;
		width:49%;
		padding-bottom:10000px;
		margin-bottom:-10000px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section02-2 ul li:nth-child(odd){ float:left; clear:both;}
	#section02-2 ul li:nth-child(even){ float:right;}
	
	/***セクション2-2***/
	#section02-3 ul { height:auto; overflow:hidden; }
	#section02-3 ul li{
		position:relative;
		width:49%;
		padding-bottom:10000px;
		margin-bottom:-10000px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section02-3 ul li:nth-child(odd){ float:left; clear:both;}
	#section02-3 ul li:nth-child(even){ float:right;}
	
	/***セクション3***/
	#section03 ul li {
		float:left;
		width:33%;
		padding:0 20px;
		text-align:center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section03 ul li .imgleft{ float:none; width:100%; }
	#section03 ul li h4 { margin-left:0; padding-left:0px; margin-top:10px;}
	#section03 ul li p { margin-left:0; padding-left:0px; text-align:left;}
	
	/***セクション4***/
	#section04 ul { margin-top:20px; }
	#section04 ul li:first-child { float:left; width:100%; }
	#section04 ul li:last-child {
		float:left;
		width:0%;
		padding-left:20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section04 ul li h4 { margin-top:0;}
	#section04 ul li iframe { height:200px; }
	
	/***ラインナップ***/
	/*h3のタイトル*/
	#lineup h3 { margin-bottom:20px;}
	#lineup h3#title-css { font-size:30px; }
	#lineup h3#title-img img { width:180px;}
	#lineup h3#title-mark {
		background-size:40px auto;
		font-size:36px;
		padding-left:50px;
	}	
	#lineup ul li {
		width:31.3%;
		font-size:14px;
		margin:0 1% 0 1%;
		padding-bottom:10000px;
		margin-bottom:-10000px;
	}
	#lineup ul li:nth-child(odd) { clear:none; }
	#lineup ul li:nth-child(even) { float:left; }
	#lineup ul li:nth-child(3n+1) { clear:both; }
	
	/***フッター***/
	footer #foot h1 { text-align:left; }
	footer #foot ul li a { font-size:14px; }
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1024px) {
	body {
		background:url(../img/bg.jpg) no-repeat, #000;
		background-position:center top, 0 0;
		background-attachment:fixed;
	}
	#wrap {
		background:#000;
		width:980px;
		padding:0 10px;
		margin:0 auto;
		box-shadow: 0 0 5px #000;
		-moz-box-shadow: 0 0 5px #000;
		-o-box-shadow: 0 0 5px #000;
		-ms-box-shadow: 0 0 5px #000;
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=0, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=90, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=180, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=270, strength=3, enabled=true);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	/***ヘッダー***/
	#head h1 { float:left; }
	#head h1 a {
		display:block;
		width:305px;
		height:40px;
		margin:0;
		background:url(../img/logo.png) no-repeat;
		background-size:305px auto;
		background-position:left center;
		text-indent:-99999px;
	}
	#head #hamburger { display:none; }	
	#head #head-nav { display:block; float:right; }
	#head #head-nav ul { margin-top:10px; }
	#head #head-nav ul li { display:inline-block; margin-left:10px; }
	#head #head-nav ul li a { color:#FFF; text-decoration:none; }
	#head #head-nav ul li a:hover { color:#05e300;}
	
	/***セクション***/
	.section { padding:20px;}
	
	/***ラインナップ***/
	/*h3のタイトル*/	
	#lineup ul li {
		width:23%;
		font-size:14px;
		margin:0 1% 0 1%;
		padding-bottom:10000px;
		margin-bottom:-10000px;
	}
	#lineup ul li:nth-child(3n+1) { clear:none; }
	#lineup ul li:nth-child(4n+1) { clear:both; }
	
	/***フッター***/
	footer {
		width:980px;
		margin:0 auto;
		box-shadow: 0 0 5px #000;
		-moz-box-shadow: 0 0 5px #000
		-o-box-shadow: 0 0 5px #000
		-ms-box-shadow: 0 0 5px #000;
		filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=0, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=90, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=180, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=270, strength=3, enabled=true);
	}
	footer #foot h1 { float:left; }
	footer #foot h1 a {
		display:block;
		width:305px;
		height:40px;
		margin:0;
		background:url(../img/logo.png) no-repeat;
		background-size:305px auto;
		background-position:left center;
		text-indent:-99999px;
	}
	footer #foot ul { float:right; }
}