/*タブ切り替え全体のスタイル*/
.tabs {
padding-bottom: 40px;
background-color: #e6f7ff;
/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
width: 1200px;
margin: 60px auto 0;
}

/*タブのスタイル*/
.tab_item {
width: calc(100%/4);
height: 60px;
/*border-bottom: 3px solid #DFBA7D;*/
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background-color: #1A2236;
line-height: 60px;
font-size: 1.8rem;
letter-spacing: .1rem;
text-align: center;
color: #DFBA7D;
display: block;
float: left;
text-align: center;
font-weight: nomal;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}

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

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


/*選択されているタブのコンテンツのみを表示*/
#kitchen:checked ~ #kitchen_content,
#bathroom:checked ~ #bathroom_content,
#powderrest:checked ~ #powderrest_content,
#others:checked ~ #others_content
 {
display: block;
}

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


/* -------------------------------------------------------------------------------------------------------- */
/* 1200*/
/* -------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {

.tabs {
width: 91.6666vw;
}

.tab_item {
font-size: 1.5vw;
height: 5vw;
line-height: 5vw;
}

}

/* -------------------------------------------------------------------------------------------------------- */
/* 960*/
/* -------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {

}


/* -------------------------------------------------------------------------------------------------------- */
/* 768 */
/* -------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

}

/* -------------------------------------------------------------------------------------------------------- */
/* 640 */
/* -------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {

.tab_item {
width:100%;
}
.tab_item {
font-size: 3.75vw;
height: 10vw;
line-height: 10vw;
border-bottom:1px solid #FFF;
margin-bottom:3.125vw;
}
.tab_item a {
display: block;
}

}