@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-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}

#interview_list .interview_text:after{
content: "";
display: inline-block;
position: absolute;
bottom: 15px;
right: 5%;
z-index: -2;
width: 100px;
height: 26px;
background: url(../img/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_top{
margin-top: 65px;
padding: 15px 0;
}

#interview_top h3{
display: inline-block;
margin-right: 5%;
margin-bottom: 10px;
padding: 10px 10px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
}

#interview_top img{
width: 60%;
margin-top: -30px;
margin-bottom: -20px;
margin-left: 40%;
}

#interview_main{
padding: 100px 0 50px;
background-color: rgba(207,0,14,0.1);
}

#interview_main ul{
padding: 30px 5% 30px;
border-radius: 20px 20px 0 0;
box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}

#interview_main li:not(:last-child){
margin-bottom: 40px;
padding-bottom: 40px;
background: url("../img/pic_taxi02.svg") bottom center/100px 42px no-repeat;
}

#interview_main img{
display: block;
width: 70%;
margin: 0 auto 15px;
border-radius: 20px 20px 0 0;
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

#interview_main .main_ph{
margin-top: -100px;
}

#interview_main h4{
margin-bottom: 5px;
}

#interview_bottom{
position: relative;
padding: 30px 0;
}

#interview_bottom:after{
content: "";
display: inline-block;
position: absolute;
top: -30px;
right: 5%;
width: 100px;
height: 40px;
background: url("../img/pic_taxi01.svg")top left/cover no-repeat;
}

#interview_bottom h3{
display: inline-block;
margin-bottom: 10px;
padding: 10px 10px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
}

#interview_bottom img{
display:block;
width: 70%;
margin: 0 auto 15px;
}

#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_main li:not(:last-child){
padding-bottom: 60px;
}
}


/*md interview_detail*/
@media screen and (min-width: 768px) {
#interview_top .inner_md,
#interview_bottom .inner_md{
display: flex;
justify-content: space-between;
align-items: center;
}

#interview_top .inner_md{
flex-direction: row-reverse;
}

#interview_top .interview_ph,
#interview_bottom .interview_ph{
width: 37%;
}

#interview_top .interview_profile,
#interview_bottom .interview_message{
width: 60%;
}

#interview_top h3{
margin-top: 20px;
margin-right: 0;
margin-bottom: 5px;
padding: 15px 15px;
}

#interview_top img{
width: 100%;
margin-top: -45px;
margin-bottom: 0;
margin-left: 0;
}

#interview_bottom{
padding: 50px 0;
}

#interview_bottom:after{
width: 120px;
height: 48px;
}

#interview_bottom h3{
margin-bottom: 10px;
padding: 15px 15px;
}

#interview_bottom img{
width: 100%;
margin: 0 auto;
}

#interview_main ul{
padding: 50px 10% 50px;
border-radius: 30px 30px 0 0;
}

#interview_main li:not(:last-child){
background: url("../img/pic_taxi02.svg") bottom center/120px 50px no-repeat;
}

#interview_main img{
width: 80%;
margin: 0 auto 30px;
border-radius: 30px 30px 0 0;
}

#interview_main .main_ph{
margin-top: -100px;
}

#interview_main h4{
margin-bottom: 10px;
font-size: 1.8rem;
}

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