/**
 * BlankPlate | Yet another HTML5 Starter Kit
 *
 * BlankPlate Main stylesheet
 *
 * @copyright	Copyright 2012, Dimitris Krestos
 * @license		Apache License, Version 2.0 (http://www.opensource.org/licenses/apache2.0.php)
 * @link		http://vdw.staytuned.gr/html5-starter-kit-blankplate/
 * @package		BlankPlate
 * @version		v1.2.3
 */


/*タブ全体を囲む
---------------------------------*/
.tabArea {}
.tabs_wrap {
	width: 100%;
  margin: 0 auto 0;
}
.tabs {
}
@media only screen and ( max-width: 749px ) {
  .tabs {

  }
}
/*タブタイトル部分
---------------------------------*/
.tab_title {
  
}
.tabset1 .tabs ul{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

.tabset2 .tabs ul{
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

.tabset1 .tabs ul,
.tabset2 .tabs ul {
	list-style: none outside none;
	margin: 0 auto;
	font-size: 0;
}

.tabset1 .tabs li {
	width: calc(100% / 2);/*タブ数*/
	margin: 0 auto 0;
	display: inline-block;
}
.tabset2 .tabs li {
	width: calc(100% / 4);/*タブ数*/
	margin: 0 auto 0;
	display: inline-block;
}

.tabset1 .tabs ul li:nth-child(1) a {
	background: url("../img/tab1.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(2) a {
	background: url("../img/tab2.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(1) a:hover {
	background: url("../img/tab1_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(2) a:hover {
	background: url("../img/tab2_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset1 .tabs ul li:nth-child(1).active a {
	background: url("../img/tab1_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}
.tabset1 .tabs ul li:nth-child(2).active a {
	background: url("../img/tab2_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}

/*
.tabset2 .tabs ul li:nth-child(1) a {
	background: url("../img/tab3.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset2 .tabs ul li:nth-child(2) a {
	background: url("../img/tab4.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset2 .tabs ul li:nth-child(3) a {
	background: url("../img/tab5.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}

.tabset2 .tabs ul li:nth-child(4) a {
	background: url("../img/tab6.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}

.tabset2 .tabs ul li:nth-child(1) a:hover {
	background: url("../img/tab3_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset2 .tabs ul li:nth-child(2) a:hover {
	background: url("../img/tab4_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset2 .tabs ul li:nth-child(3) a:hover {
	background: url("../img/tab5_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset2 .tabs ul li:nth-child(4) a:hover {
	background: url("../img/tab6_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	transition:background .3s;
}
.tabset2 .tabs ul li:nth-child(1).active a {
	background: url("../img/tab3_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}
.tabset2 .tabs ul li:nth-child(2).active a {
	background: url("../img/tab4_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}
.tabset2 .tabs ul li:nth-child(3).active a {
	background: url("../img/tab5_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}
.tabset2 .tabs ul li:nth-child(4).active a {
	background: url("../img/tab6_on.png") no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;  
	-o-background-size: cover; 
}
*/

.tab_title a {
	display: block;
}

.tabs a  {
	color: #fff;
	display: block;
	text-decoration: none;
	white-space: nowrap;
}

/*.tabs ul li a img {
	opacity: 1;
}
.tabs ul li a:link img:hover {
	opacity: 1;
}
*/
/*現在のタブ
---------------*/
.active {
}
.active a {
	color: white;
}
.tabs ul li.active a img {
}


/*タブコンテンツを囲む
---------------------------------*/
#tab-1 {
}
#tab-2 {
}