@charset "utf-8";

/* ************************************************ 
*	タブ
* ************************************************ */
.job-list { 
  display: block; 
  margin-left: 0; 
  margin-right: 0; 
  margin-top: 0 !important;
  padding-top: 10px; /* 少し余白を残したい場合は適宜調整 */
}
.job-card { 
  margin-bottom: 20px; 
}
.job-card-head {
  min-height: 40px; /* 2行分のエリアタグが収まる高さに調整 */
}

/*タブ切り替え全体のスタイル*/
.job-tabs {
width: 100%;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: start;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/*タブのスタイル*/
.job-tab_item,
.job-tab_item2,
.job-tab_item3,
.job-tab_item4,
.job-tab_item5 {
width: 150px;
height: 70px;
margin: 0 10px 0 0;
background-color: #fdf5e0;
border-radius: 20px 20px 0 0;
font-size: min(1.6vw,17px);
text-align: center;
color: #0074A5;
display: block;
align-content: center;
text-align: center;
font-weight: normal;
transition: all 0.5s ease;
cursor: pointer;
cursor: hand;
}
.job-tab_item5 {
margin: 0;
}
.job-tab_item:hover,
.job-tab_item2:hover,
.job-tab_item3:hover,
.job-tab_item4:hover,
.job-tab_item5:hover {
color: #fff;
background-color: #00A0E5;
}

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

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



/*選択されているタブのスタイルを変える*/
.job-tabs input:checked + .job-tab_item,
.job-tabs input:checked + .job-tab_item2,
.job-tabs input:checked + .job-tab_item3,
.job-tabs input:checked + .job-tab_item4,
.job-tabs input:checked + .job-tab_item5 {
  background-color: #00A0E5;
  color: #fff;
}



/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){

}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.job-tab_item,
.job-tab_item2,
.job-tab_item3,
.job-tab_item4,
.job-tab_item5 {
width: 120px;
height: 50px;
margin: 0 5px 0 0;
}


}

/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.job-tab_item,
.job-tab_item2,
.job-tab_item3,
.job-tab_item4,
.job-tab_item5 {
width: 24%;
height: 60px;
margin: 0 1% 0 0;
border-radius: 10px 10px 0 0;
font-size: 4.5vw;
}
.job-tab_item5 {
margin: 0 0 0 0;
}


}