/* >> staff list Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

.staffList{ @extend %flexBox; justify-content: center; align-items: flex-start;
    .staff__item{@extend %flexBox; justify-content: center; align-items: flex-start; max-width: 360px; padding: 0.5rem; text-align: center; margin-bottom: 3rem; background-color: white;

        @media #{$mq-tab_720}{width: 40%; max-width: 100%; margin-right: 20%; margin-bottom: 5rem;
            &:nth-child(2n){margin-right: 0;}
        }
        &:last-child{margin-right: 0;}

        .staff__item__image{
            display: block; 
            width: 100%; 
            overflow: hidden;
            @media #{$mq-tab_720}{width: 100%; margin: 0; }
            @media #{$mq-pc_1280}{width: 200px; }
            .staff__item__image__hover{
                @include transition;
                display: block;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                z-index: 1;
            }
            &:hover{
                .staff__item__image__hover{
                    opacity: 1;
                }
            }
        }
        .staff__item__content{ width: 100%;   text-align: left;
            padding: 1rem;
            @media #{$mq-iPad_land}{ width: calc(100% - 130px); }
            @media #{$mq-pc_1280}{width: calc(100% - 202px); }
        }
        .staff__item__title{display: block; width: 100%; font-size: 1.5rem; line-height: 1.2; font-weight: 600;
            @media #{$mq-tab_720}{font-size: 1.2rem;}
            @media #{$mq-iPad_land}{font-size: 1.5rem;}
            @media #{$mq-pc_1280}{font-size: 2.1rem;}
        }
        .staff__item__position{display: block; width: 100%; font-size: 0.9rem; line-height: 1.1; font-weight: 800; margin: 0.5rem auto; padding-bottom: 0.5rem; color: $color-gray; border-bottom: 1px solid lighten($color-gray,30%);}
    
        .staff__item__link{@include transition; display: block; margin: 0 auto; background-repeat: no-repeat;
            a{ display: inline-block; margin: 0 auto; padding: 0.35rem; font-size: 0.9rem; line-height: 1.1; font-weight: 600; color: $color-baseText;
                &:before{content: '';     display: inline-block;
                    vertical-align: middle;
                    position: relative;
                    width: 28px;
                    height: 28px;
                    margin-right: 0.5rem;
                    background-color: $color-darkBlue;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 14px 14px;}
                &:hover{
                    color: $color-primary;
                    &:before{
                        background-color: $color-primary;
                    }
                }
            }
            &.link--mail{
                a{
                    &:before{background-image: url('../images/icons/contact-mail.svg');}
                }
            }
            &.link--tel{
                a{
                    &:before{background-image: url('../images/icons/contact-phone.svg');}
                }
                
            }

        }
        .btn{margin-top: 0.5rem;}
    }
}