/*タブ切り替え全体のスタイル*/
.tabs {
padding-bottom: 40px;
width: 1080px;
margin:0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap:10px;
}

/*タブのスタイル*/
.tab_item {
width: calc( (100% - 30px) / 4 );
height: 56px;
line-height: 52px;
/*font-family: var(--font-ebgaramond);*/
font-size: 1rem;
letter-spacing: .2em;
text-align: center;
color: #777;
display: block;
text-align: center;
transition: all 0.2s ease;
background-color: #bbb;
border: 2px solid #333;
}
.tab_item:hover {
opacity: 0.75;
cursor: pointer;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content {
width: 100%;
margin-top: 40px;
display: none;
padding: 0;
clear: both;
overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#kitchen:checked   ~ #kitchen_content,
#bathroom:checked  ~ #bathroom_content,
#powder:checked    ~ #powder_content,
#toilet:checked    ~ #toilet_content,
#ecology:checked   ~ #ecology_content,
#amenity:checked   ~ #amenity_content,
#security:checked  ~ #security_content,
#structure:checked ~ #structure_content{
display: block;
opacity: 1;
}

/*選択されているタブのスタイルを変える*/
.tab_item.is-active {
background-color: #605336;
color: #fff;
}

/*余白調整*/
.flex-break {
  display: block;      
  width: 100%;         
  height: 40px;        
  flex-basis: 100%;   
}


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

.tabs {
width: 91.6666vw;
}

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

}

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


.tab_item {
  font-size: 1.7vw;
  height: 6vw;
  line-height: 5.5vw;
}
}


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

.tab_item {
width:100%;
}
.tab_item {
font-size: 4vw;
height: 10vw;
line-height: 9vw;
margin-bottom:2vw;
}
.tab_item a {
display: block;
}

}