/*  interview_list
------------------ */
#interview_list{}
#interview_list ul{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}
#interview_list ul li{
    border-bottom: 1px dashed #eee;
}
#interview_list ul li:first-child{
    border-top: 1px solid #eee;
}
#interview_list ul li:last-child{
    border-bottom: 1px solid #eee;
}
#interview_list ul li a{
    padding: 30px 0;
    display: block;
    text-decoration: none;
    color: #444;
}
#interview_list ul li a .inner{
    display: flex;
    flex-direction: row;
}
#interview_list ul li a .inner .img{
    max-width: 160px;
    line-height: 0;
}
#interview_list ul li a .inner .txt{
    padding: 0 0 0 40px;
    flex: 1;
}
#interview_list ul li a .inner .txt .ttl{
    margin: 40px 0;
    font-size: 2rem;
    font-weight: 600;
    color: #333;
}
#interview_list ul li a .inner .txt .ttl .video{
    margin-right: .4em;
}
#interview_list ul li a .inner .txt .ttl .video::before{
    content: "\f167";
    font-family: "font awesome 5 brands";
    color: #c4302b;
}

/*  interview_single
------------------ */
#interview_single{}
#interview_single .eyecatch{
    line-height: 0;
}
#interview_single .set{
    display: flex;
    flex-direction: row;
}
#interview_single .set .status{
    width: 360px;
    padding: 0 60px 0 20px;
}
#interview_single .set .status .img{}
#interview_single .set .status .img.haseyecatch{
    margin-top: -120px;
}
#interview_single .set .status .year{
    margin-top: 40px;
}
#interview_single .set .status .school{
    font-size: 2rem;
    font-weight: 600;
}
#interview_single .set .status .name{
    margin: 20px 0 0;
    font-size: 2rem;
    font-weight: 600;
}
#interview_single .set .status .from{
    margin: 20px 0 0;
}
#interview_single .set .status .deviation{
    margin: 10px 0 0;
}
#interview_single .set .main{
    flex: 1;
    margin: 60px 0 0;
}
#interview_single .set .main .youtube{}
#interview_single .set .main .youtube + .youtube{
    margin-top: 20px;
}
#interview_single .set .main .youtube .thumb{
    background: #f5f5f5;
}
#interview_single .set .main .youtube .thumb button{
    width: 100%;
    height: 0;
    padding: 56.25% 0 0;
    border: none;
    background: none;
    display: block;
    cursor: pointer;
    position: relative;
}
#interview_single .set .main .youtube .thumb button::before,
#interview_single .set .main .youtube .thumb button::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#interview_single .set .main .youtube .thumb button::before{
    content: "\f167";
    font-family: "font awesome 5 brands";
    color: #c4302b;
    font-size: 64px;
    z-index: 1;
}
#interview_single .set .main .youtube .thumb button::after{
    width: 40px;
    height: 40px;
    background: #fff;
}
#interview_single .set .main .youtube .thumb button img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .2s;
}
#interview_single .set .main .youtube .popup{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
#interview_single .set .main .youtube .popup .wrap{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#interview_single .set .main .youtube .popup .bg{
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.95);
    position: absolute;
    top: 0;
    left: 0;
}
#interview_single .set .main .youtube .popup .set{
    width: calc(100% - 20px);
    max-width: 1280px;
    margin: 0;
    position: relative;
}
#interview_single .set .main .youtube .popup .set .inner{
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
}
#interview_single .set .main .youtube .popup .set .inner iframe{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
#interview_single .set .main .youtube .popup .set .inner .close{
    width: 40px;
    height: 40px;
    position: absolute;
    top: -40px;
    right: 0;
}
#interview_single .set .main .youtube .popup .set .inner .close button{
    width: 40px;
    height: 40px;
    display: block;
    background: none;
    border: none;
    cursor: pointer;
}

#interview_single .set .main .youtube .popup .set .inner .close button::before,
#interview_single .set .main .youtube .popup .set .inner .close button::after{
    content: "";
    width: 100%;
    height: 1px;
    background: #333;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
}
#interview_single .set .main .youtube .popup .set .inner .close button::before{
    transform: rotate(45deg);
}
#interview_single .set .main .youtube .popup .set .inner .close button::after{
    transform: rotate(-45deg);
}
#interview_single .set .main article{}
#interview_single .set .main article h2{
    margin: 40px 0;
}
#interview_single .set .main article p{
    font-size: 1.6rem;
    line-height: 2.2;
    letter-spacing: 0.2rem;
    text-align: justify;
}
#interview_single .set .main .gototop{
    margin: 40px 0 100px;
    padding: 40px 0 0;
    border-top: 1px solid #ddd;
    text-align: center;
}
#interview_single .set .main .gototop a{
    padding: 10px 20px;
    display: inline-block;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    background: #eee;
}


@media (pointer: fine) {
    #interview_list ul li a:hover .inner .img{
        opacity: 0.8;
    }
    #interview_single .set .main .gototop a:hover{
        background: #ddd;
    }
    #interview_single .set .main .youtube .thumb button:hover img{
        opacity: .6;
    }
    #interview_single .set .main .youtube .popup .set .inner .close button:hover{
        opacity: .6;
    }    
}
@media screen and (max-width: 1024px){
    /*  interview_list
    ------------------ */
    #interview_list ul li a{
        padding: 20px 0;
    }
    #interview_list ul li a .inner .img{
        width: 80px;
    }
    #interview_list ul li a .inner .txt{
        padding: 0 0 0 20px;
    }
    #interview_list ul li a .inner .txt .ttl{
        margin: 0 0 20px;
        font-size: 1.6rem;
    }
    #interview_list ul li a .inner .txt .name,
    #interview_list ul li a .inner .txt .school{
        font-size: 1.2rem;
    }
    /*  interview_single
    ------------------ */
    #interview_single .eyecatch{
        width: calc(100% + 40px);
        margin-left: -20px;
    }
    #interview_single .eyecatch img{
        width: 100%;
    }
    #interview_single .set{
        flex-direction: column;
        width: calc(100% + 40px);
        margin: 0 0 0 -20px;
    }
    #interview_single .set .status{
        width: 100%;
        padding: 40px 20px;
    }
    #interview_single .set .status .img{
        display: none;
    }
    #interview_single .set .status .img.haseyecatch{
        margin-top: 0;
    }
    #interview_single .set .status .year{
        margin-top: 0;
    }
    #interview_single .set .status .school{
        font-size: 1.8rem;
    }
    #interview_single .set .status .name{
        margin: 10px 0 0;
        font-size: 1.8rem;
    }
    #interview_single .set .status .from{
        margin: 10px 0 0;
    }
    #interview_single .set .status .deviation{
        margin: 8px 0 0;
    }
    #interview_single .set .main{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    #interview_single .set .main article{
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
    }
    #interview_single .set .main article p{
        line-height: 2;
        letter-spacing: 0.1rem;
        font-size: 1.4rem;
    }
    #interview_single .set .main .youtube{
        max-width: 800px;
        margin: 80px auto;
        padding: 0 20px;
    }
    #interview_single .set .main .youtube + .youtube{
        margin-top: -60px;
    }
    #interview_single .set .main .youtube .thumb button{
        margin: 0 auto;
    }
}