@charset "utf-8";
/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	margin: 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.tabs::after {
	content: "";
	display: block;
	width: calc((100% - 12px)/3);
} 
/*タブのスタイル*/
.tabItem {
	width: calc((100% - 12px)/3);
	height: 50px;
	border: 1px solid #d9d9d9;
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	color: #565656;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	margin-bottom: 4px;
	margin-right: 1px;
	margin-left: 1px;
}
.tabItem:hover {
	opacity: 0.75;
	background-color: #3483c5;
	color: #fff;
}
/*ラジオボタンを全て消す*/
input[name="tabItem"] {
	display: none;
}
/*タブ切り替えの中身のスタイル*/
.tabContent {
	display: none;
	clear: both;
	overflow: hidden;
	margin-top: 40px;
	width: 100%;
}
.tabContent ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.tabContent ul li {
	width: calc((100% - 12px)/2);
	margin-bottom: 20px;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #allContent,
#wallpaper:checked ~ #wallpaperContent,
#carpet:checked ~ #carpetContent,
#tile:checked ~ #tileContent,
#curtain:checked ~ #curtainContent,
#other:checked ~ #otherContent,
#floor-sheet:checked ~ #floor-sheetContent,
#mounting:checked ~ #mountingContent,
#sliding-doors:checked ~ #sliding-doorsContent,
#decorative-sheet:checked ~ #decorative-sheetContent,
#bathroom-renovation:checked ~ #bathroom-renovationContent {
	display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tabItem {
	background-color: #1974c1;
	color: #fff;
}
@media (min-width: 768px) {
	.tabItem {
		width: calc((100% - 20px) / 3);
	}
}
@media (min-width: 900px) {
	.tabItem {
		width: calc((100% - 20px) / 5);
	}
	.tabContent ul li {
		width: calc((100% - 12px)/3);
	}
}
@media (min-width: 1300px) {
	.tabContent ul li {
		width: calc((100% - 24px)/4);
	}
	.tabContent ul:before {
		content: "";
		display: block;
		width: calc((100% - 24px)/4); /* .boxに指定したwidthと同じ幅を指定する */
		height: 0;
		order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
	}
	.tabContent ul:after {
		content:"";
		width: calc((100% - 24px)/4);
	}
}