@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-color:#111111;
	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;color:#FFFFFF;}

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


/***ヘッダー***/
#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-logo { text-align:center;}
#main-logo img { width:20%; min-width:150px; margin-top:10px;}
#main-img { background:#111111;}
#main-img img { width:100%; margin-top:30px; background:#111111;}

/***イメージエリア***/
#main-img2 img { width:100%; }

/***イメージエリア***/
#main-img3 img { width:100%; margin-bottom:30px; background:#111111;}

/***イメージエリア(追加)***/
#sub-img img { 
	width:70%; 
	margin: auto;
  	display: block;

}


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

.section p { margin-top:10px; }

/***セクション1***/
#section01 { background:#111111;}
#section01 ul li:first-child { text-align:center; }
#section01 ul li img { width:100%; padding:0 10px; }

/***セクション2***/
#section02 ul li { padding:10px; margin-top:15px; text-align:center; }
#section02 ul li img { width:100%; }
#section02 ul li p { text-align:left; }
#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-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;
}

/***セクション3***/
#section03 { background:#111111;}
#section03 ul li{float:left; margin:5px; width:15%;}
#section03 ul li:nth-child(5n+1){clear: both;}
#section03 ul li .imgleft{ width:100%;}


/***セクション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:#111111; overflow:hidden; height:auto; position:relative; }
/*パターン❶*/
#lineup h3#title-css {
	margin-top:25px;
	font-size:18px;
	border-bottom:2px solid #FFF;
	padding:15px;
	text-align:center;
	line-height:1.0;
}

#lineup ul { height:auto; overflow:hidden; position:relative; }
#lineup ul li {
	position:relative;
	font-size:12px;
	width:48%;
	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%; margin-top:20px; }
#lineup ul li p { text-align:left; }
#lineup ul li p.price { text-align:right; margin-top:0; font-size:x-small}
#lineup ul li p.own-price { color:#C00; 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;
}




/***フッター***/
footer { background:#111111; position:relative; color:#FFF; padding-top:15px; }
footer .btn-pagetop { cursor:pointer; }
footer #btn-pagetop { position:absolute; top:0; right:10px; }
footer #foot { background:#111111; 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:#111111; 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; background:#000;}
	
	/***コンテンツエリア***/
	.section h2 { font-size:36px;}
	.section h3 { font-size:24px; }
	
	/***セクション1***/
	#main-img { background:#111111; }
	

	/***セクション1***/
	#main-img2 { background:#111111; }

	/***セクション1***/
	#main-img3 { background:#111111; }
	
	/***イメージエリア(追加)***/
	#sub-img2 img { 
		width:70%; 
		margin: auto;
  		display: block;}


	#section01 ul { margin-top:20px; }
	#section01 ul li:first-child {
		float:right;
		width:40%;
		padding-right:10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	#section01 ul li:last-child {
		float:left;
		width:60%;
		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;}
	
	/***セクション3***/
	#section03 ul li {
		float:left;
		width:15%;
		text-align:center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#section03 ul li .imgleft{width:100%; }	
	#section03 ul li:nth-child(5n+1){clear: none;}
	#section03 ul li:nth-child(6n+1){clear: both;}

	
	/***セクション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:#111111;
		background-position:center top, 0 0;
		background-attachment:fixed;
	}
	#wrap {
		background:#111111;
		width:980px;
		padding:0 10px;
		margin:0 auto;
		box-shadow: 0 0 5px #111111;
		-moz-box-shadow: 0 0 5px #111111;
		-o-box-shadow: 0 0 5px #111111;
		-ms-box-shadow: 0 0 5px #111111;
		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; }
	
	/*h3のタイトル*/	
	#lineup2 ul li {
		width:23%;
		font-size:14px;
		margin:0 1% 0 1%;
		padding-bottom:10000px;
		margin-bottom:-10000px;
	}
	#lineup2 ul li:nth-child(3n+1) { clear:none; }
	#lineup2 ul li:nth-child(4n+1) { clear:both; }
	
	/***フッター***/
	footer {
		width:980px;
		margin:0 auto;
		box-shadow: 0 0 5px #111111;
		-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; }
}








/* タブ1設定(追加)============================== */

.tab-wrap {
	background: #111111;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label {
	color: #FFFFFF;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	font-size:small;
	padding: 12px 20px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.tab-label:hover {
	background: rgba(0, 191, 255,.1);
}

.tab-switch:checked + .tab-label {
	color: DeepSkyBlue;
}

.tab-label::after {
	background: DeepSkyBlue;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}



/* 横並びブロック設定(追加)============================== */




/* 横並びブロック設定(追加・使用中)============================== */

.tab-wrap2 {
	background:#111111;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	display: flex;
  	flex-wrap: wrap;
	width: 100%;


}



.tab-content2 {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-wrap2::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}