@charset "utf-8";
/* CSS Document */

/*sm interview_list*/
#interview_list ul li{
margin-bottom: 50px;
padding-bottom: 100px;
}

#interview_list .interview_frame{
position: relative;
}

#interview_list .interview_ph img{
width: 200px;
height: 200px;
margin-left: 20px;
object-fit: cover;
}

#interview_list .interview_number{
position: absolute;
top: 20%;
left: 60%;
font-size: 10.0rem;
}

#interview_list .interview_text{
position: absolute;
top: 180px;
z-index: -1;
width: 100%;
padding: 30px 5% 40px;
box-sizing: border-box;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}

#interview_list .interview_text:after{
content: "";
display: inline-block;
position: absolute;
bottom: 15px;
right: 5%;
z-index: -2;
width: 100px;
height: 26px;
background: url(../images/pic_mark01.svg)top left/cover no-repeat;
}

#interview_list .interview_text h4{
font-size: 1.4rem;
}

#interview_list .interview_text p{
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


/*sm interview_list390*/
@media screen and (min-width: 390px) {
#interview_list .interview_number{
left: 55%;
}
}

/*sm interview_list411*/
@media screen and (min-width: 411px) {
#interview_list .interview_number{
left: 50%;
}
}

/*sm interview_list520*/
@media screen and (min-width: 520px) {
#interview_list .interview_number{
left: 40%;
}
}


/*md　interview_list*/
@media screen and (min-width: 768px) {
#interview_list ul{
width: 660px;
margin: 0 auto;
}

#interview_list ul li{
margin-bottom: 80px;
padding-bottom: 0;
}

#interview_list ul li:last-child{
margin-bottom: 100px;
}

#interview_list .interview_ph img{
margin-left: 0;
}

#interview_list .interview_number{
top: 5%;
left: 20%;
font-size: 12.0rem;
}

#interview_list .interview_text{
top: 100px;
right: 0;
width: 470px;
padding: 30px 10px 30px 70px;
}

#interview_list .interview_text p{
font-size: 1.8rem;
}

#interview_list .interview_text h4{
font-size: 1.6rem;
}
}


/*lg　interview_list*/
@media screen and (min-width: 1024px) {
#interview_list ul{
width: 860px;
margin: 0 auto;
}

#interview_list .interview_text{
width: 670px;
padding: 30px 30px 30px 70px;
}

#interview_list .interview_number{
left: 15%;
}

#interview_list .interview_frame:hover .interview_text{
border-radius: 20px;
box-shadow: 6px 6px 15px 0px rgba(0, 0, 0, 0.2);
}

#interview_list .interview_frame:hover .interview_ph img{
transform: scale(1.05);
}

#interview_list .interview_ph img,
#interview_list .interview_text{
transition: 0.3s;
}
}


/*sm interview_detail*/
#interview_detail h3{
margin-bottom: 30px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
}

#interview_top{
padding: 0 0 30px 0;
}

#interview_top img{
width: 70%;
margin-bottom: 15px;
border-radius: 0 0 20px 0;
}

#interview_top h4{
margin: 0  0 10px 5%;
}

#interview_top .interview_career{
margin: 0 5%;
padding: 20px 5%;
border-radius: 20px 0 0 0;
box-sizing: border-box;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}

#interview_main li{
padding: 30px 0;
}

#interview_main li:nth-of-type(2n){
background-color: rgba(207,0,14,0.1);
}

#interview_main li:nth-of-type(2n+1){
background-color: rgba(255,255,255,1.0);
}

#interview_main h5,
#interview_bottom h5{
margin-bottom: 5px;
}

#interview_bottom img{
position: relative;
z-index: -1;
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 0 0 0 20px;
}

#interview_bottom .interview_message{
margin-top: -30px;
padding: 30px 5% 30px;
border-radius: 20px 20px 0 0;
box-sizing: border-box;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}

#interview_bottom .interview_message :after{
content: "";
display: inline-block;
position: absolute;
top: -100px;
right: 3%;
width: 60px;
height: 30px;
background: url("../images/pic_bus.svg")top left/cover no-repeat;
}

#interview_detail .frame_btn{
margin-top: 30px;
font-size: 1.8rem;
text-align: center;
}

#interview_detail .frame_btn p{
margin: 0 auto;
}


/*sm interview_detail360*/
@media screen and (min-width: 360px) {
#interview_bottom img{
height: 180px;
}

#interview_bottom .interview_message :after{
top: -100px;
width: 70px;
height: 33px;
}
}


/*sm interview_detail375*/
@media screen and (min-width: 375px) {
#interview_bottom .interview_message :after{
top: -100px;
width: 80px;
height: 38px;
}
}


/*sm interview_detail411*/
@media screen and (min-width: 411px) {
#interview_bottom .interview_message :after{
top: -110px;
width: 90px;
height: 42px;
}
}


/*md interview_detail*/
@media screen and (min-width: 768px) {
#interview_detail h3{
font-size: 2.2rem;
text-align: center;
}

#interview_top{
padding: 0;
}

#interview_top{
display: flex;
justify-content: space-between;
align-items: stretch;
}

#interview_top .interview_ph{
width: 50%;
}

#interview_top .interview_ph img{
width: 100%;
height: 100%;
object-fit: cover;
margin-bottom: 0;
border-radius: 0 0 30px 0;
}

#interview_top .interview_profile{
width: 60%;
padding: 50px 0;
}

#interview_top h4{
margin-bottom: 10px;
}

#interview_top .interview_career{
margin: 0 0 0 -10%;
padding: 15px 5%;
border-radius: 30px 0 0 0;
}

#interview_main li{
padding: 50px 0;
}

#interview_main h5,
#interview_bottom h5{
margin-bottom: 10px;
font-size: 1.8rem;
}

#interview_bottom img{
height: 350px;
border-radius: 0 0 0 30px;
}

#interview_bottom .interview_message{
margin-top: -50px;
padding: 50px 5% 50px;
border-radius: 30px 30px 0 0;
}

#interview_bottom .interview_message :after{
top: -120px;
right: 0;
width: 120px;
height: 60px;
}

#interview_detail .frame_btn{
margin-top: 50px;
}
}


/*lg interview_detail*/
@media screen and (min-width: 1024px) {
#interview_bottom img{
width: 60%;
height: 400px;
}

#interview_bottom .main_ph{
position: relative;
z-index: -2;
background: url("../images/bg_interview.jpg")center right/cover no-repeat;
}
}


/*lg interview_detail*/
@media screen and (min-width: 1280px) {
#interview_top .interview_ph{
width: 30%;
}

#interview_top .interview_profile{
width: 80%;
}

#interview_bottom img{
width: 50%;
}
}


/*lg interview_detail1440*/
@media screen and (min-width: 1440px) {
#interview_bottom img{
height: 500px;
}
}