@charset "UTF-8";
/* CSS Document */

/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
width: 100%;
margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
width: calc(100%/3);
height: 50px;
border-bottom: 3px solid #30c2e5;
background-color: #d9d9d9;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
border-top-right-radius: 20px;
border: 1px solid #555;
box-sizing: border-box;

}
.tab_item:hover {
opacity: 0.75;
}

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



/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #30c2e5;
color: #fff;
border: 1px solid #30c2e5;
}



/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 3% 3% 5% 3% ;
clear: both;
overflow: hidden;
border: 1px solid #30c2e4;
}

.tab_content h4.TTLs{
background: #30c2e5;
color: #fff;
padding: 1% 2%;
font-size: 18px;
margin: 6% 0 1% 0;
}

.tab_content .tab-img{
width: 90%;
margin: 1% auto;
}

.tab_content .tab-img img{
	width: 100%;
}

.tab_content .prdt-spec{
width: 100%; 
margin: 0 auto;
}	

.tab_content .prdt-spec table{
width: 100%;
border-collapse: collapse;

}

.tab_content .prdt-spec table tr:nth-child(odd){
	background: #e0e0e0;
}

.tab_content .prdt-spec table th{
	font-weight: normal;
	padding: 1.5% 0;
	width: 25%;
	text-align: center;
}

.tab_content .prdt-spec table td{
	padding: 1.5% 0;
}

.tab_content .detail-img{
	width: 100%;
	display: block;
	margin: 4% 0 0 0;
}
.tab_content .detail-img ul{
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;
}

.tab_content .detail-img ul:nth-child(n+2){
	margin: 4% 0 0 0;
}

.tab_content .detail-img ul li{
	float: left;
	list-style: none;
	width: 31%;
}

.tab_content .detail-img ul li img{
	width: 100%;
}

.tab_content .detail-img ul li:nth-child(2){
	margin: 0 3.5%;
}

.tab_content .detail-img p.minimi{
	font-size: 13px;
}

p.capt {
    font-size: 14px !important;
}


@media screen and (max-width:768px) {
	p.capt {
		font-size: 12px !important;
	}
	
	.tab_content .detail-img ul li {
		width: 60%;
		margin: 0 20%;
	}
	
	.tab_content .detail-img ul li:nth-child(2) {
		margin: 5% 20%;
	}
	.tab_item {
		height: 40px;
		line-height: 40px;
		font-size: 13px;
	}
	.tab_content h4.TTLs {
		padding: 3%;
		font-size: 14px;
		margin: 6% 0 3% 0;
		line-height: 1;
	}
	
	.tab_content .tab-img {
		width: 90%;
		margin: 5% auto;
	}
	.tab_content .detail-img ul li {
		line-height: 2;
	}
	
	.tab_content .detail-img p.minimi {
		font-size: 13px;
		margin: 5% 5% 0 5%;
	}
}