@charset "UTF-8";

/*******************************
 businessCss 
*******************************/
.main-sub{
	background-image: url("../img/header_img.jpg");
}
/*common*/
.inner h2{
	font-size: 24px;
	margin-bottom: 1em;
	font-weight: bold;
}


/*tab*/
.sec-kinds .sec-box-inner{
	position: relative;
	background:none;
	padding: 0;
}
.tab-item {
    width: calc(100%/3 - 4px);
	margin-right: 6px;
	color: #fff;
    background-color: #479f4b;
	border-top: 3px solid #0D6310;
    display: block;
    float: left;
    transition: all 0.2s ease;
    margin-bottom: 0;
    cursor: pointer;
	padding-top: 50px;
	padding-bottom: 5px;
	
	background-repeat: no-repeat !important;
	background-position: center 10px !important;
	background-size: 30% !important;
}
.tab-item:last-of-type{
	margin-right: 0;

}

#construction + .tab-item{
	background-image: url("../img/kinds_construction_ico_off.png");
}
#sales + .tab-item{
	background-image: url("../img/kinds_sales_ico_off.png");
}
#clerk + .tab-item{
	background-image: url("../img/kinds_clerk_ico_off.png");
}

#construction:checked + .tab-item,
#sales:checked + .tab-item,
#clerk:checked + .tab-item{
	font-weight: bold;
}
#construction + .tab-item:hover,
#construction:checked + .tab-item{
	background-image: url("../img/kinds_construction_ico_on.png");
}
#sales + .tab-item:hover,
#sales:checked + .tab-item{
	background-image: url("../img/kinds_sales_ico_on.png");
}
#clerk + .tab-item:hover,
#clerk:checked + .tab-item{
	background-image: url("../img/kinds_clerk_ico_on.png");
}



.tab-item:hover {
    background: #eee;
	color: #000;
}

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

/*タブ切り替えの中身のスタイル*/
.tab-content {
    display: none;
    clear: both;
    overflow: hidden;
	background-color: #fff;
	padding: 25px;
}


/*選択されているタブのコンテンツのみを表示*/
#construction:checked ~ #content-construction,
#sales:checked ~ #content-sales,
#clerk:checked ~ #content-clerk{
    display: block;
}

/*選択されているタブのスタイルを変える*/
.sec-box-inner input:checked + .tab-item {
	background: #fff;
	color: #000;
	border-top: 3px solid #479f4b;

}
/*============================================

PC用CSS

============================================*/
@media screen and (min-width: 1024px){
	.tab-item {
		width: calc(100%/3 - 10px);
		margin-right: 15px;
		padding-top: 110px;
		padding-bottom: 20px;
		font-size: 22px;

		background-repeat: no-repeat !important;
		background-position: center 28px !important;
		background-size: 57px !important;
	}

	/*タブ切り替えの中身のスタイル*/
	.tab-content {
		padding: 50px;
	}

}