@charset "utf-8";

/* MV
----------------------------------------------------------------------------- */
.page-ttl-inner{
    background-image: url("../images/mv_staff.png");
}

@media screen and (max-width:768px){
    .page-ttl-inner{
        background-image: url("../images/mv_staff_sp.png");
    }
}


/* section
----------------------------------------------------------------------------- */
.staff-section{
    margin-bottom: 100px;
}

@media screen and (max-width:768px){
    .staff-section{
        margin-bottom: 12.5vw;
    }
}

/* main */
.staff-section-main{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 50px;
}

.staff-section-main-img{
    width:350px;
}

.staff-section-main-txt{
    width: calc(100% - 400px);
}
.staff-section-main-txt-position{
    margin-bottom: 30px;
}
.staff-section-main-txt-position span{
    color: #fff;
    background-color: #89C330;
    text-align: center;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    padding: 10px 20px;
    display: inline-block;
}

.staff-section-main-txt-name{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-size: 35px;
    margin-bottom: 50px;
}
.staff-section-main-txt-name span{
    display: inline-block;
    color: #89C330;
    font-size: 18px;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-left: 10px;
}

.staff-section-main-txt-intro{
    font-size: 25px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    margin-bottom: 30px;
}
.staff-section-main-txt-intro span{
    background: linear-gradient(transparent 40%, #FFFCB3 40%);
}

.staff-section-main-txt-message{
    font-size: 16px;
    line-height: 2.0em;
    margin-bottom: 30px;
}

@media screen and (max-width:768px){
    .staff-section-main{
        display: block;
        margin-bottom: 7.5vw;
    }

    .staff-section-main-img{
        width:100%;
        margin-bottom:7.5vw;
        text-align: center;
    }
    .staff-section-main-img img{
        max-width: 80%;
    }

    .staff-section-main-txt{
        width: 100%;
    }
    .staff-section-main-txt-position{
        margin-bottom: 5vw;
    }
    .staff-section-main-txt-position span{
        font-size: 3.75vw;
        padding: 1.25vw 5vw;
    }

    .staff-section-main-txt-name{
        font-size: 6.25vw;
        margin-bottom: 7.5vw;
    }
    .staff-section-main-txt-name span{
        font-size: 4.25vw;
        margin-left: 2.5vw;
    }

    .staff-section-main-txt-intro{
        font-size: 5vw;
        margin-bottom: 5vw;
    }

    .staff-section-main-txt-message{
        font-size: 4vw;
        margin-bottom: 5vw;
    }
}

/* sub */
.staff-section-main-txt-sub{
    margin-top: 30px;
    border-top: 1px solid #89C330;
    padding-top: 20px;
}

.staff-section-main-txt-sub dl{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.staff-section-main-txt-sub dl dt{
    display: inline-block;
    color: #89C330;
    border: 1px solid #89C330;
    padding: 10px 20px;
    margin-right: 15px;
    font-weight: bold;
    vertical-align: middle;
    border-radius: 5px;
    letter-spacing: 0.1em;
}
.staff-section-main-txt-sub dl dd{
    padding-top: 10px;
    font-size: 16px;
    line-height: 2.0em;
}

.staff-section-main-txt-sub-name{
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bold;
}
.staff-section-main-txt-sub-name span{
    display: block;
    margin-top: 10px;
    font-weight: normal;
    font-size: 16px;
}

@media screen and (max-width:768px){
    .staff-section-main-txt-sub{
        margin-top: 5vw;
        padding-top: 5vw;
    }

    .staff-section-main-txt-sub dl dt{
        white-space: nowrap;
        padding: 1.25vw 3.75vw;
        margin-right: 2.5vw;
    }
    .staff-section-main-txt-sub dl dd{
        padding-top: 0;
        font-size: 4vw;
    }

    .staff-section-main-txt-sub-name{
        margin-bottom: 5vw;
        font-size: 5vw;
    }
    .staff-section-main-txt-sub-name span{
        margin-top: 2.5vw;
        font-size: 3.75vw;
    }
}

/* col
----------------------------------------------------------------------------- */
.staff-section-col{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.staff-section-col-L,
.staff-section-col-R{
    width:calc(50% - 25px);
}

.staff-section-col table{
    width: 100%;
    margin-bottom: 30px;
}
.staff-section-col table tbody tr th{
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
    width:15%;
}
.staff-section-col table tbody tr th,
.staff-section-col table tbody tr td{
    font-size: 16px;
    padding: 5px 10px 5px 0;
}

.staff-section-col ul{
    list-style-type: disc;
    padding-left: 17px;
    margin-bottom: 20px;
}
.staff-section-col ul li{
    margin-bottom: 10px;
}

@media screen and (max-width:768px){
    .staff-section-col{
        display: block;
    }
    .staff-section-col-L,
    .staff-section-col-R{
        width:100%;
    }
    .staff-section-col-L{
        margin-bottom: 7.5vw;
    }

    .staff-section-col table{
        width: 100%;
        margin-bottom: 30px;
    }
    .staff-section-col table tbody tr th{
        font-weight: bold;
        white-space: nowrap;
        text-align: left;
        width:15%;
    }
    .staff-section-col table tbody tr th,
    .staff-section-col table tbody tr td{
        font-size: 16px;
        padding: 5px 10px 5px 0;
    }

    .staff-section-col ul{
        list-style-type: disc;
        padding-left: 17px;
        margin-bottom: 20px;
    }
    .staff-section-col ul li{
        margin-bottom: 10px;
    }
}


/* message
----------------------------------------------------------------------------- */
#message{
    background-color: #fff;
    padding: 100px 0 50px;
}

@media screen and (max-width:768px){
    
}


/* list
----------------------------------------------------------------------------- */
.staff-section-list{
    
}
.staff-section-list ul{
    
}
.staff-section-list ul li{
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 50px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.staff-section-list-img{
    width: 300px;
    margin-right: 50px;
}

.staff-section-list-txt-name{
    font-size: 20px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
}
.staff-section-list-txt-name span{
    color: #fff;
    background-color: #89C330;
    text-align: center;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    padding: 10px 20px;
    display: inline-block;
    margin-right: 10px;
}
.staff-section-list-txt p{
    margin-top: 30px;
}


@media screen and (max-width:768px){
    
}