@charset "UTF-8";
*{
margin: 0;
padding: 0;
}

.cf:after{
content:" ";
display: block;
clear: both;
}

header{
position: relative;
background:url(../material/pagetop/staff.png)no-repeat;
width: 1280px;
height: 560px;
margin: 0 auto;
}

.header-txt{
position: absolute;
top: 50%;;
left: 50%;
transform: translate(-50%,-50%);
}

body{
margin: 0 auto;
background:#fdfdfd;
font-family: 'Noto Sans', sans-serif,YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica','Arial';
}

h1{
font-size: 24px;
color: #707070;
text-align: center;
border-bottom: 1px solid #707070;
}

p{
font-size: 13px;
color: #707070;
}

.wrapper{
width: 920px;
margin: 0 auto;
}

.staff-list{
width: 100%;
margin: 100px auto;
overflow: hidden;
}

.staff-list-box{
width: 960px;
margin: 20px 0 0 -20px;
}

.staff-list-box:after {
display: block;
clear: both;
content: "";
}

.staff-list-box span{
display: block;
font-size: 12px;
color: #707070;
padding-top: 8px;
text-align: center;
}

.item-wrapper{
list-style: none;
}

.item {
margin: 40px;
float: left;
}

.item a{
display: block;
}

.pop{
width: 240px;
height: 240px;
overflow: hidden;
}

.pop img{
width: 100%;
height: 100%;
object-fit: contain;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.pop:hover img{
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}

.staff-list-top{
width: 70%;
margin: 0 auto;
}

#bg{
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0, .4);
}

.photo{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 800px;
height: 400px;
z-index: 2;
}

.popup-txt{
background: #f0f0f0;
width: 50%;
height: 100%;
z-index: 3;
float: left;
}

.popup-img{
width: 50%;
height: 100%;
z-index: 4;
float: left;
}

.popup-txt h2{
margin: 0 auto;
padding: 32px;
color: #707070;
text-align: center;
}

.popup-txt p{
margin: 0 auto;
padding: 0 64px;
line-height: 1.5;
color: #707070;
text-align: left;
}