@charset "utf-8";
/* CSS Document */
.all-page-main-photo-01{ background-image: url('../images/staff-top-main-01.png'); background-position: center top;}
.staff-area-01 h2{ color: #ff4f58; font-size: 30px; line-height: 40px; margin-bottom: 60px; text-align: center;}
.staff-area-01 dd ul{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%;}
.staff-area-01 dd ul li:nth-child(odd){ margin-right: 20px; margin-bottom: 35%; position: relative; width: calc(60% - 20px);}
.staff-area-01 dd ul li:nth-child(even){ width: 40%;}
.staff-area-01 dd ul li:nth-child(3){ margin-left: 20px; margin-right: 0; order: 4;}
.staff-area-01 dd ul li:nth-child(4){ order: 3;}
.staff-area-01 dd ul li:nth-child(5){ order: 5;}
.staff-area-01 dd ul li:last-child{ order: 6;}
.staff-area-01 dd ul li div{ width: 100%;}
.staff-area-01 dd ul li div:first-child{ position: relative;}
.staff-area-01 dd ul li div:first-child span{ background-color: rgba( 255, 255, 255, .8); bottom: 20px; display: block; color: #ff4f58; font-size: 16px; font-weight: bold; left: 0; position: absolute; text-align: center; width: 100%;}
.staff-area-01 dd ul li div:last-child{ position: absolute; bottom: -240px; right: -60%; width: 70%;}
.staff-area-01 dd ul li:nth-child(3) div:last-child{ left: -60%; right: inherit;}
.staff-area-01 dd ul li p{ font-size: 14px; line-height: 24px; position: relative;}
.staff-area-01 dd ul li p:first-child{ font-size: 24px; line-height: 34px; margin-bottom: 10px;}
.staff-area-01 dd ul li p:nth-child(2)::before,.staff-area-01 dd ul li p:nth-child(3)::before,.staff-area-01 dd ul li p:last-child::before{ color: #ffffff; display: block; margin: 0 20px 0 10px; position: relative; z-index: 1;}
.staff-area-01 dd ul li p:nth-child(2)::before{ content: "資格";}
.staff-area-01 dd ul li p:nth-child(3)::before{ content: "趣味";}
.staff-area-01 dd ul li p:last-child::before{ content: "メッセージ";}
.staff-area-01 dd ul li p:nth-child(2)::after,.staff-area-01 dd ul li p:nth-child(3)::after,.staff-area-01 dd ul li p:last-child::after{ background-color: #f39500; border-radius: 10px; content: ""; display: inline-block; height: 20px; left: 0; position: absolute; top: 2px; width: 48px; z-index: 0;}
.staff-area-01 dd ul li p:last-child::after{ width: 92px;}
.staff-area-01 dd ul li p:nth-child(3){ margin: 10px auto;}
.staff-area-01 dd ul li p:last-child{ text-align: justify;}

@media screen and (max-width: 969px){
    .staff-area-01 dd ul li:nth-child(odd){ margin-bottom: 0;}
    .staff-area-01 dd ul li:nth-child(even){ margin-bottom: 60px;}
    .staff-area-01 dd ul li div:last-child{ position: inherit; bottom: 0; right: 0; width: 100%;}
    .staff-area-01 dd ul li:nth-child(3) div:last-child{ left: 0; right: inherit;}
}
@media screen and (max-width: 599px){
    .staff-area-01 dd ul li:nth-child(odd){ margin-right: 0; width: 100%;}
    .staff-area-01 dd ul li:nth-child(even){ width: 100%;}
    .staff-area-01 dd ul li:nth-child(3){ margin-left: 0; margin-right: 0; order: 3;}
    .staff-area-01 dd ul li:nth-child(4){ order: 4;}
}
@media screen and (max-width: 600px){
    .all-page-main-photo-01 h2 br{ display: none;}
}
@media screen and (max-width: 429px){
    .all-page-main-photo-01 h2{ top: 20%;}
}