@charset "utf-8";

.staff_list{display: flex;flex-wrap: wrap;margin: -12px;}
.staff_list .box{margin: 12px;width: calc((100% / 2) - 24px);position: relative;display: flex;flex-wrap: wrap;background: #EBEEF3;}
.staff_list .box a{position: absolute;display: block;inset: 0;z-index: 10;text-indent: -999em;}
.staff_list .box > *{position: relative;box-sizing: border-box;}
.staff_list .box dt{width: 260px;}
.staff_list .box dt .tmb{font-family: empty;font-size: 0;padding-bottom: 140%;position: relative;overflow: hidden;}
.staff_list .box dt .tmb img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: all 1s;}
.staff_list .box dd{width: calc(100% - 260px);padding: 68px 60px;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}
.staff_list .box dd .name{display: block;color: #111;font-size: 18px;margin-bottom: 32px;}
.staff_list .box dd .name strong{margin-right: 12px;font-size: 28px;font-weight: 600;display: inline-block;vertical-align: middle;}
.staff_list .box dd .info li{font-size: 18px;color: #111;line-height: 140%;margin-top: 5px;}
.staff_list .box dd .spr{display: block;margin-top: 50px;width: 48px;height: 48px;border: 1px solid rgba(255, 255, 255, 0.50);background: #fff url('../layout/images/main/more_spr_b.png') no-repeat center center;transition: all 0.1s;}
.staff_list .box:hover{background: linear-gradient(127deg, #192E4A 1.07%, #021125 100.01%);box-shadow: 0 24px 48px -24px rgba(12, 30, 55, 0.35);}
.staff_list .box:hover dt .tmb img{transform: scale(1.05);}
.staff_list .box:hover dd *{color: #fff !important;}

.staff_view{display: flex;justify-content: space-between;flex-wrap: wrap;}
.staff_view dt{width: 340px;position: relative;}
.staff_view dt .track{position: sticky;top: 140px;}
.staff_view dt .tmb{padding-bottom: 145%;position: relative;}
.staff_view dt .tmb img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.staff_view dt .tab{margin-top: 20px;}
.staff_view dt .tab li a{text-decoration: none;color: #3E3E3E;font-weight: 400;font-size: 24px;opacity: 0.7;line-height: 160%;position: relative;}
.staff_view dt .tab li.active a{color: #022950;padding-left: 15px;opacity: 1;font-weight: 500;}
.staff_view dt .tab li.active a::before{content: '';display: block;position: absolute;top: 50%;transform: translate(0, -50%);left: 0;width: 6px;height: 6px;border-radius: 6px;background: #022950;}
.staff_view dd{width: calc(100% - 340px - 120px);}
.staff_view dd .title{border-bottom: 1px solid #111;padding-bottom: 40px;}
.staff_view dd .title .name{margin-bottom: 30px;color: #686868;display: block;font-size: 22px;}
.staff_view dd .title .name strong{margin-right: 10px;font-weight: 600;color: #111;font-size: 44px;}
.staff_view dd .title .info li{margin-bottom: 5px;font-size: 18px;color: #111;line-height: 140%;}
.staff_view dd .category{padding: 40px 0 40px 110px;position: relative;border-bottom: 1px solid #ddd;}
.staff_view dd .category > strong{position: absolute;top: 50%;transform: translate(0, -50%);left: 0;padding: 10px 14px;border-radius: 100px;background: #2D5AA6;font-size: 18px;color: #fff;font-weight: normal;}
.staff_view dd .category ul li{display: inline-block;vertical-align: middle;position: relative;padding: 0 15px;font-size: 18px;color: #3E3E3E;}
.staff_view dd .category ul li::before{content: '';display: block;position: absolute;top: 50%;transform: translate(0, -50%);left: 0;width: 1px;height: 10px;background: #ccc;}
.staff_view dd .category ul li:first-child:before{display: none;}
.staff_view dd .infobox{border-top: 1px solid #ddd;padding: 40px 0;}
.staff_view dd .category + .infobox{border-top: none;}
.staff_view dd .infobox .head{margin-bottom: 30px;}
.staff_view dd .infobox .head em{font-style: normal;display: block;color: #2D5AA6;font-weight: 600;font-size: 18px;}
.staff_view dd .infobox .head h5{font-size: 28px;color: #111;font-weight: 700;margin-top: 5px;}
.staff_view dd .infobox .detail li{position: relative;padding-left: 20px;color: #3E3E3E;font-size: 18px;line-height: 140%;margin: 5px 0;}
.staff_view dd .infobox .detail li::before{content: '';display: block;position: absolute;top: 12px;left: 0;width: 8px;height: 1px;background: #2D5AA6;}
.staff_view dd .infobox .detail_wrap{padding: 28px 30px;background: #F4F5F7;margin-top: 30px;}
.staff_view dd .infobox .detail_wrap > strong{display: block;color: #111;font-size: 20px;font-weight: 700;line-height: 130%;border-bottom: 1px solid #ccc;padding-bottom: 15px;margin-bottom: 15px;}

/* for mobile */
@media screen and (max-width: 1000px){

    .staff_list{display: block;margin: -10px 0;}
    .staff_list .box{margin: 10px 0;width: auto;}
    .staff_list .box dt{width: 130px;height: 100%;}
    .staff_list .box dt .tmb{padding-bottom: 140%;}
    .staff_list .box dd{width: calc(100% - 130px);padding: 20px;}
    .staff_list .box dd .name{font-size: 13px;margin-bottom: 15px;}
    .staff_list .box dd .name strong{margin-right: 5px;font-size: 18px;margin-top: -4px;}
    .staff_list .box dd .info li{font-size: 13px;}
    .staff_list .box dd .spr{margin-top: 20px;width: 30px;height: 30px;background-size: 7px auto;}

    .staff_view{display: block;}
    .staff_view dt{width: 200px;margin: 0 auto;}
    .staff_view dt .tab{display: none;}
    .staff_view dd{width: auto;margin-top: 30px;}
    .staff_view dd .title{padding-bottom: 20px;}
    .staff_view dd .title .name{margin-bottom: 15px;font-size: 14px;}
    .staff_view dd .title .name strong{margin-right: 5px;font-size: 20px;}
    .staff_view dd .title .info li{font-size: 14px;}
    .staff_view dd .category{padding: 20px 0;}
    .staff_view dd .category > strong{position: static;transform: none;padding: 5px 12px;font-size: 12px;}
    .staff_view dd .category ul{margin-top: 15px;}
    .staff_view dd .category ul li{padding: 0 10px;font-size: 13px;letter-spacing: -1px;}
    .staff_view dd .category ul li:first-child{padding-left: 0;}
    .staff_view dd .infobox{padding: 20px 0;}
    .staff_view dd .infobox .head{margin-bottom: 15px;}
    .staff_view dd .infobox .head em{font-size: 13px;}
    .staff_view dd .infobox .head h5{font-size: 18px;}
    .staff_view dd .infobox .detail li{padding-left: 15px;font-size: 14px;letter-spacing: -1px;}
    .staff_view dd .infobox .detail li::before{top: 9px;width: 8px;}
    .staff_view dd .infobox .detail_wrap{padding: 20px;margin-top: 15px;}
    .staff_view dd .infobox .detail_wrap > strong{font-size: 15px;padding-bottom: 10px;margin-bottom: 10px;}

}