@charset "utf-8";

#tab{
margin-bottom: 40px;
padding-top: 30px;
}
#tab ul{
border-bottom: 3px solid #ff9023;
display: flex;
align-items:stretch;
flex-wrap: nowrap;
justify-content: center;
}
#tab li{
flex-basis: 20%;
max-width: 20%;
margin:0 0.5%; 
text-align: center;
background: #eee;
border-radius: 5px 5px 0 0;
color: #ff9023;
padding: 10px 0;
display: block;
transition: all .4s;
cursor: pointer;
}
#tab li.active{
background: #ff9023;
color: #fff;
}
#tab li:hover{
background: #ff9023;
color: #fff;
}
.tabContent{
display: none;
}
#salesStaff,
#constructionStaff,
#clericalStaff,
#craftsman{
padding-bottom:60px; 
}
.staffList{
display: flex;
align-items:stretch;
flex-wrap: wrap;
}
.staffList article{
flex-basis: 15.2%;
max-width: 15.2%;
line-height: 140%;
margin:0 0.7% 20px;
}
.staffList .staffPhoto{
border: 1px solid #ddd; 
display: block;
height: 150px;
overflow: hidden;
text-align: center;
width: 100%;
}
.staffList .staffPhoto img{
max-width: 600px;
height: 100%;
width: 100%;
object-fit: cover;
object-position: top center;
font-family: 'object-fit: cover; object-position: top center;';
}
.staffList .name{
}
.staffList .shop{
}
.staffList .birthplace{
}
.staffList .bt a{
margin-top: 5px;
width: 100%;
padding: 5px;
} #staffDetail .photo{
max-width: 600px;
width: 40%;
float: left; 	
}
#staffDetail .table{
width: 58%;
float: right;
}
#staffDetail .table dl{
display: flex;
justify-content: space-between;
align-items:stretch;
flex-wrap: wrap;
margin-bottom: 1px;
}
#staffDetail .table dt,
#staffDetail .table dd{
padding:5px 10px; 
font-size: 90%;
}
#staffDetail .table dt{
flex-basis: 40%;
max-width: 40%;
text-align: left;
font-weight: 400;
background: #ffcda0;
}
#staffDetail .table dd{
flex-basis: 60%;
max-width: 60%;
border-bottom: 1px solid #eee;
font-weight: 300;
}
#staffDetail .comment{
margin: 20px 0;
}
#staffDetail .freePhoto{
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
#staffDetail .freePhoto article{
flex-basis: 32%;
max-width: 32%;
margin:0 0.5%;
}
#staffDetail .freePhoto img{
width: 100%;
max-width: 1100px;
} @media screen and (max-width: 1000px) {
.staffList article{
flex-basis: 18.6%;
max-width: 18.6%;
margin:0 0.7% 20px;
}
} @media screen and (max-width: 760px) {
.staffList article{
flex-basis: 23%;
max-width: 23%;
margin:0 1% 20px;
}
} @media screen and (max-width: 600px) {
#message .photo{
width: 100%;
margin-left:0;
float: none;
margin-bottom: 10px; 
}
#message{
padding-bottom:40px; 
}
#salesStaff,
#constructionStaff,
#clericalStaff,
#craftsman{
padding-bottom:30px; 
}
#tab ul{
border-bottom: 3px solid #ff9023;
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
#tab li {
flex-basis: 24.5%;
max-width: 24.5%;
margin: 0 ;
text-align: center;
background: #eee;
border-radius:0;
color: #ff9023;
padding: 10px 0;
display: block;
}
#tab li:hover{ }
.staffList{
justify-content: space-between;
}
.staffList article{
flex-basis: 47%;
max-width: 47%;
} #staffDetail .photo{
width: 100%;
float: none; 
margin-bottom: 10px;
}
#staffDetail .table{
width: 100%;
float: none;
}
#staffDetail .table dl{
display: block;
margin-bottom: 10px;
}
#staffDetail .table dt,
#staffDetail .table dd{
padding:1px 5px;
max-width: 100%;
}
#staffDetail .table dt{
font-weight: 500;
}
#staffDetail .table dd{
border-bottom:none;
}
#staffDetail .comment{
border-top: 1px dashed #ccc;
padding-top: 10px;
}
#staffDetail .freePhoto{
display: block;
}
#staffDetail .freePhoto article{
width: 100%;
margin:0 0 10px 0; 
}
}