@charset "utf-8";

#campaign_cont .title{
	width: 935px;
}

.sh_series{
	padding-top: 50px;
}
/*タブのスタイル*/
.tab_item {
	width: 240px;
	padding: 50px 0 20px;
	border-left: solid 1px #fff;
	line-height: 1.3;
	font-size: 16px;
	text-align: center;
	display: block;
	float: left;
	position: relative;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.series_area {
  display: none;
  padding: 35px 0 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab_lv:checked ~ #lv_area,
#tab_rz:checked ~ #rz_area,
#tab_xz:checked ~ #xz_area,
#tab_sv:checked ~ #sv_area{
  display: block;
	border: none;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item .lv{
  background: #AB9C3D;
  color: #fff;
	position: relative;
} 
.tabs input:checked + .tab_item .lv:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #AB9C3D;	
}
.tabs input:checked + .tab_item .tab_img{
	width: 50%;
	top: -10px;
	left: 60px;
	z-index: 10;
}

.tabs input:checked + .tab_item .sv{
  background: #0C610E;
  color: #fff;
	position: relative;
} 
.tabs input:checked + .tab_item .sv:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #247026;
}

.tabs input:checked + .tab_item .xz{
  background: #002060;
  color: #fff;
	position: relative;
} 
.tabs input:checked + .tab_item .xz:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #002060;	
}

.tabs input:checked + .tab_item .rz{
  background: #B85B5D;
  color: #fff;
	position: relative;
}
.tabs input:checked + .tab_item .rz:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #B85B5D;	
}

/* hover */
.tabs input:hover + .tab_item .lv{
  background: #b3a650;
  color: #fff;
	position: relative;
} 
.tabs input:hover + .tab_item .lv:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #b3a650;	
}
.tabs input:hover + .tab_item .tab_img{
	width: 50%;
	top: -10px;
	left: 60px;
	z-index: 10;
}

.tabs input:hover + .tab_item .sv{
  background: #247026;
  color: #fff;
	position: relative;
} 
.tabs input:hover + .tab_item .sv:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #247026;	
}

.tabs input:hover + .tab_item .xz{
  background: #193670;
  color: #fff;
	position: relative;
} 
.tabs input:hover + .tab_item .xz:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #193670;	
}

.tabs input:hover + .tab_item .rz{
  background: #bf6b6d;
  color: #fff;
	position: relative;
}
.tabs input:hover + .tab_item .rz:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #bf6b6d;	
}
.tab_item .sh_series_tab{
	padding: 50px 0 20px;
	background: -moz-linear-gradient(top, rgba(180,180,181,1) 0%, rgba(226,226,226,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(180,180,181,1) 0%,rgba(226,226,226,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(180,180,181,1) 0%,rgba(226,226,226,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.tab_item .sh_series_tab p{
	font-size:90%;
	margin:0px;
	padding:110px 0 25px;
	color:#333;
	cursor:pointer;
}

.tab_item .sh_series_tab span{
	display: block; 
	font-size:240%;
	line-height:96%;
	padding:0px; 
	margin:0px; 
}
.tab_img{
	width: 45%;
	position:  absolute;
	top: 0px;
	left: 68px;
}




/* ------------------------------------------------------------------------------------------------------------
	media
 ------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px) {
	#campaign_cont .title{
		width: auto;
	}
	.sh_series{
		padding-top: 20px;
	}
	.tabs input:checked + .tab_item {
			background-color: #fff;
			background-image: none;
			color: #fff;
	} 
	.tab_item {
		width: 25%;
		margin: 0;
		padding: 0;
		background-color: #fff;
		background-image: none;
		border: none;
	}
	.tab_item .sh_series_tab{
		padding: 10px 0;
		height: 68px;
	}
	
	.tab_item .sh_series_tab span{
		font-size: 160%;
	}
}