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

#interview {
	background-color: #ffffff;
	color: #000000; 
}

#interview .subpage_mv2 {
    padding: 85px 0px 120px;
}

#interview .subpage_mv2:after {
	height: 440px;
}

#interview .subpage_mv2 .text_area {
	max-width: 540px;
    width: 50%;
}

#interview .subpage_mv2 .main_img {
	position: absolute;
    top: 200px;
    right: 0;
    max-width: 730px;
    width: 55%;
}

#interview .subpage_mv2 .phrase {
	position: relative;
    max-width: 800px;
    width: 70%;
	animation-delay: 1s;
}

#interview .subpage_mv2 .phrase .sp_img {
    display: none;
}

#interview .subpage_mv2 .profile_box {
	margin: 50px 0px 0px 2.5%;
    max-width: 540px;
    width: 50%;
	animation-delay: 2s;
}

#interview .subpage_mv2 .profile_box .category_box {
    justify-content: flex-start;
}

#interview .subpage_mv2 .profile_box .category_box .label {
	display: block;
    background-color: #007db9;
    padding: 8px 20px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    min-width: 120px;
    border: solid 1px #007db9;
    border-radius: 20px;
}

#interview .subpage_mv2 .profile_box .category_box .label:last-of-type {
    background-color: #ffffff;
    color: #007db9;
	margin-left: 20px;
}

#interview .subpage_mv2 .profile_box .detail_box {
    margin-top: 30px;
}


#interview .subpage_mv2 .profile_box .detail_box p {
    font-size: 13px;
    line-height: 1.7;
}

#interview .subpage_mv2 .profile_box .detail_box .job .br_all {
    display: block;
}

#interview .subpage_mv2 .profile_box .detail_box .name {
    font-size: 20px;
	font-weight: 500;
	margin: 7px 0px;
	color: #007db9;
}

#interview .subpage_mv2 .profile_box .detail_box .join .graduation {
    display: block;
}



#interview .contents_area {
	padding:120px 0px
}

#interview .contents_area .inner {
	position: relative;
    max-width: 1200px;
}

#interview .contents_area .int_box {
    align-items:flex-start;
}

#interview .contents_area .int_box .int_title {
	width: 170px;
    margin-right: 60px;
    align-items: flex-start;
}

#interview .contents_area .int_box .int_title .number {
	position: relative;
    font-size: 72px;
    line-height: 1;
    padding-top: 20px;
    color: #007db9; 
	font-family: 'Prompt', "ヒラギノUD角ゴF Std", 'Noto Sans JP', sans-serif;
    font-weight: 500;
}

#interview .contents_area .int_box .int_title .number:before {
    position: absolute;
    content: "INTERVIEW";
    top: 0;
    font-size: 16px;
    font-family: 'KanadeviaSans';
    font-weight: bold;
}

#interview .contents_area .int_box .int_title .theme {
	font-size: 25px;
    margin-top: 30px;
    padding: 10px 10px 10px 10px;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
}

#interview .contents_area .int_box .text_box {
    width: calc(100% - 230px);
    margin: 30px 0px 0px auto;
}

#interview .contents_area .int_box .text_box p {
	text-align: justify;
	line-height: 2;
}

#interview .contents_area .img_box {
    position: absolute;
    animation-delay: 0.7s;
}




#interview .zone1 .int_box {
	max-width: 830px;
}

#interview .zone2 {
    padding:50px 0px 250px;
}

#interview .zone2 .int_box {
    max-width: 650px;
	margin-left: auto;
}

#interview .zone2 .img_box {
	max-width: 530px;
    width: 50%;
    left: -9.5%;
    top: 25%;
}

#interview .zone3 {
	position: relative;
	padding: 120px 0px 200px;
}

#interview .zone3:after {
	position: absolute;
	content: "";
	top: 0;
	left:0;
	width: 100%;
	height: calc(100% - 200px/2);
	background-color: #F0F0F0;
	z-index: -2;
}

#interview .zone3 .int_box .text_box .oneword {
	max-width:640px;
	width: 70%;
}

#interview .zone3 .int_box .text_box p {
	width: 38%;
    margin: 30px 0px 0px 0px;
}

#interview .zone3 .img_box {
	max-width: 570px;
    width: 55%;
    right: -9.5%;
    top: 25%;
	z-index: -1;
}


#interview .zone4 .fl {
	align-items: flex-start;
}

#interview .zone4 .int_box {
	max-width: 530px;
    width: 46%;
}

#interview .zone4 .int_box:last-of-type {
	margin-top: 200px;
}



#interview .offtime {
	padding:30px 0px 200px;
}

#interview .offtime .inner {
	max-width: 950px;
}

#interview .offtime .detail_box {
	position: relative;
	border: solid 1px #007db9;
    padding: 60px 60px;
    margin-left: 35px;
}

#interview .offtime .detail_box:before {
	position: absolute;
    content: attr(data-en);
    top: 0px;
    left: -45px;
    color: #007db9;
    font-size: 35px;
    font-family: 'KanadeviaSans';
    font-weight: bold;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -o-writing-mode: vertical-rl;
    transform: rotate(180deg);
}

#interview .offtime .detail_box p {
	line-height: 2;
}



#interview .bg_area {
    padding-top: 30%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#interview .person1 .bg_area {
    background-image: url("../img/people/interview/person/1/bg.jpg");
}

#interview .person2 .bg_area {
    background-image: url("../img/people/interview/person/2/bg.jpg");
}

#interview .person3 .bg_area {
    background-image: url("../img/people/interview/person/3/bg.jpg");
}

#interview .person4 .bg_area {
    background-image: url("../img/people/interview/person/4/bg.jpg");
}

#interview .person5 .bg_area {
    background-image: url("../img/people/interview/person/5/bg.jpg");
}

#interview .person6 .bg_area {
    background-image: url("../img/people/interview/person/6/bg.jpg");
}

#interview .person7 .bg_area {
    background-image: url("../img/people/interview/person/7/bg.jpg");
}

#interview .person8 .bg_area {
    background-image: url("../img/people/interview/person/8/bg.jpg");
}

#interview .person9 .bg_area {
    background-image: url("../img/people/interview/person/9/bg.jpg");
}

#interview .person10 .bg_area {
    background-image: url("../img/people/interview/person/10/bg.jpg");
}

#interview .person11 .bg_area {
    background-image: url("../img/people/interview/person/11/bg.jpg");
}

#interview .person12 .bg_area {
    background-image: url("../img/people/interview/person/12/bg.jpg");
}

#interview .person13 .bg_area {
    background-image: url("../img/people/interview/person/13/bg.jpg");
}

#interview .person14 .bg_area {
    background-image: url("../img/people/interview/person/14/bg.jpg");
}

#interview .person15 .bg_area {
    background-image: url("../img/people/interview/person/15/bg.jpg");
}

#interview .person16 .bg_area {
    background-image: url("../img/people/interview/person/16/bg.jpg");
}

#interview .person17 .bg_area {
    background-image: url("../img/people/interview/person/17/bg.jpg");
}

#interview .person18 .bg_area {
    background-image: url("../img/people/interview/person/18/bg.jpg");
}

#interview .person19 .bg_area {
    background-image: url("../img/people/interview/person/19/bg.jpg");
}




/*過去流用分(type2)*/

#interview .type2 .zone2 .int_box:last-of-type,
#interview .type2 .zone3 .int_box:last-of-type {
	margin-top: 80px;
}

#interview .type2 .zone3 .int_box:first-of-type {
    margin-left: auto;
    max-width: 830px;
}

#interview .type2 .zone3 .int_box:first-of-type .text_box p {
    width: 100%;
}

#interview .type2 .zone3 .int_box .text_box p {
    margin-top: 0px;
}

#interview .type2 .zone3 .img_box {
    top: 62%;
}

#interview .type2 .zone4 .int_box:last-of-type {
    margin-top: 120px;
}



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

#interview .subpage_mv2:after {
    height: 400px;
}

#interview .subpage_mv2 .main_img {
    width: 50%;
}



#interview .contents_area .int_box .int_title {
    margin-right: 30px;
}

#interview .contents_area .int_box .text_box {
    width: calc(100% - 200px);
}



#interview .zone1 {
	padding: 50px 0px 120px;
}

#interview .zone1 .int_box {
    max-width: 750px;
}

#interview .zone2 {
    padding: 50px 0px 180px;
}

#interview .zone2 .int_box {
    max-width: 540px;
}

#interview .zone2 .img_box {
    width: 45%;
    left: -6%;
    top: 40%;
}

#interview .zone3 .int_box .text_box p {
    width: 42%;
}

#interview .zone3 .img_box {
    max-width: 530px;
    width: 43%;
    right: -6%;
    top: 35%;
}

#interview .zone4 {
	padding: 30px 0px 120px;
}

#interview .zone4 .int_box:last-of-type {
    margin-top: 120px;
}



#interview .offtime {
    padding: 30px 0px 150px;
}

#interview .offtime .inner {
    max-width: 750px;
}

#interview .offtime .detail_box {
    padding: 50px 50px;
}



/*過去流用分(type2)*/

#interview .type2 .zone2 .img_box {
    top: 30%;
}

#interview .type2 .zone3 .img_box {
    top: 50%;
}

#interview .type2 .zone4 .int_box:last-of-type {
    margin-top: 80px;
}

}



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

#interview .subpage_mv2 {
    padding: 85px 0px 80px;
}

#interview .subpage_mv2:after {
    height: 350px;
}

#interview .subpage_mv2 .phrase .pc_img {
    display:none;
}

#interview .subpage_mv2 .phrase .sp_img {
    display: block;
}

#interview .subpage_mv2 .profile_box {
    margin: 80px auto 0px;
    max-width: 100%;
    width: 100%;
}

#interview .subpage_mv2 .profile_box .detail_box .job br {
    display: none;
}

#interview .subpage_mv2 .profile_box .detail_box .join .graduation {
    display: inline-block;
	margin-left: 20px;
}



#interview .contents_area .int_box {
    max-width: 100%;
	width: 100%;
}

#interview .contents_area .int_box .int_title {
    margin-right: 0px;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

#interview .contents_area .int_box .int_title .theme {
    font-size: 22px;
    margin: 0px 0px 0px 30px;
    writing-mode: inherit;
    -webkit-writing-mode: inherit;
    -ms-writing-mode: inherit;
    -o-writing-mode: inherit;
}

#interview .contents_area .int_box .text_box {
    width: 100%;
}



#interview .zone2 {
    padding: 0px 0px 120px;
}

#interview .zone2 .int_box .text_box p {
    width: 55%;
    margin-left: auto;
}

#interview .zone2 .img_box {
    width: 45%;
    left: -6.5%;
    top: 132px;
}

#interview .zone3 {
    padding: 120px 0px 120px;
	
}

#interview .zone3:after {
	height: 100%;
}

#interview .zone3 .int_box .text_box p {
    width: 55%;
}

#interview .zone3 .img_box {
    max-width: 530px;
    width: 45%;
    right: -6.5%;
    top: 132px;
}

#interview .zone4 {
    padding: 120px 0px 120px;
}

#interview .offtime {
    padding: 0px 0px 120px;
}



/*過去流用分(type2)*/
#interview .type2 .zone2 .img_box {
    top: 132px;
}

#interview .type2 .zone2 .int_box:last-of-type .text_box p {
    width: 100%;
}

#interview .type2 .zone3 .img_box {
    top: 70%;
}




}




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

#interview .subpage_mv2 {
    padding: 65px 0px 50px;
}

#interview .subpage_mv2 .text_area {
    width: 100%;
}

#interview .subpage_mv2 .main_img {
    position: relative;
    width: 100%;
    top: 0;
    margin: 30px auto;
}

#interview .subpage_mv2 .phrase {
    width:100%;
}

#interview .subpage_mv2 .profile_box {
    margin: 30px auto 0px;
    animation-delay: 0s;
}


#interview .subpage_mv2 .profile_box .category_box .label {
    padding: 5px 15px;
    font-size: 10px; 
	min-width:auto;
}

#interview .subpage_mv2 .profile_box .category_box .label:last-of-type {
    margin-left: 10px;
}

#interview .subpage_mv2 .profile_box .detail_box p {
    font-size: 12px;
}

#interview .subpage_mv2 .profile_box .detail_box .job br {
    display: block;
}

#interview .subpage_mv2 .profile_box .detail_box .name {
    font-size: 16px;
}

#interview .subpage_mv2 .profile_box .detail_box .join .graduation {
    display: block;
    margin-left: 0px;
}



#interview .contents_area .int_box .int_title .number {
    width: 100%;
    text-align: center;
    display: block;
    font-size: 50px;
    margin: 0px auto 15px;
}

#interview .contents_area .int_box .int_title .number:before {
    font-size: 13px;
    left: 0;
    right: 0;
}

#interview .contents_area .int_box .int_title .theme {
    font-size: 16px;
    margin: auto;
    padding: 5px 8px 8px 8px;
}

#interview .contents_area .img_box {
    position: relative;
	width: 100%;
    top: 0;
	left: 0;
	right: 0;
	margin:30px auto 0px;
    animation-delay: 0s;
    z-index: 0;
}



#interview .zone1 {
    padding: 30px 0px 80px;
}

#interview .zone2 {
    padding: 0px 0px 80px;
}

#interview .zone2 .int_box .text_box p,
#interview .zone3 .int_box .text_box p {
    width: 100%;
}

#interview .zone3 {
    padding: 80px 0px;
	background-color: #F0F0F0;
}

#interview .zone3:after {
	display: none;
}

#interview .zone3 .int_box .text_box .oneword {
    width: 100%;
}

#interview .zone4 {
    padding: 80px 0px;
}

#interview .zone4 .int_box:last-of-type {
    margin-top: 80px;
}



#interview .offtime {
    padding: 0px 0px 80px;
}

#interview .offtime .detail_box {
    margin: 40px 0px 0px 0px;
    padding: 30px;
}

#interview .offtime .detail_box:before {
    top: -30px;
    left: 0;
	right: 0;
	margin: auto;
	text-align: center;
    font-size: 25px;
    writing-mode: inherit;
    -webkit-writing-mode: inherit;
    -ms-writing-mode: inherit;
    -o-writing-mode: inherit;
    transform: none;
}



#interview .bg_area {
    padding-top: 60%;
}



#interview .person3 .bg_area,
#interview .person4 .bg_area,
#interview .person12 .bg_area,
#interview .person13 .bg_area {
	background-position:right 25% center;
}
	
#interview .person7 .bg_area {
	background-position:left 15% center;
}

#interview .person10 .bg_area {
	background-position:left 0% center;
}

#interview .person11 .bg_area,
#interview .person14 .bg_area {
	background-position:left 25% center;
}

#interview .person16 .bg_area,
#interview .person17 .bg_area {
	background-position:right 15% center;
}

#interview .person18 .bg_area {
	background-position:right 10% center;
}



/*過去流用分(type2)*/
#interview .type2 .zone2 .img_box,
#interview .type2 .zone3 .img_box {
    top: 0;
}



}