@charset "utf-8";

/* /recruit/ ==========================*/
.recruit_pankuzu{border-top: 1px solid #ddd;}
#recruit_top_mv{width: 100%; height: 700px; position: relative;
    background-image: url(../../img/page/recruit/recruit_mv.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
}
#recruit_top_mv::before{content: ""; display: block; width: 600px; aspect-ratio: 1 / 1;
    background-image: url(../../img/page/recruit/recruit_mv_logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; bottom: 50%; left: 4vw; transform: translateY(50%);
    clip-path: inset(100% 0 0 0); transition: 0.3s ease 0.8s;
}
#recruit_top_mv h1{position: absolute; bottom: 50%; left: 6vw; transform: translateY(50%);}
#recruit_top_mv h1 span{position: relative; display: inline-block; padding: 0 8px;}
#recruit_top_mv h1 span::before{content: ""; position: absolute; top: 0; left: 0; z-index: 3;
	width: 0; height: 100%; background: #004aad;}
#recruit_top_mv h1 span::after{content: ""; position: absolute; top: 0; left: 0; z-index: 1;
	width: 100%; height: 100%; background: #000;
	opacity: 0;}
#recruit_top_mv h1 span b{font-family: 'Oswald', sans-serif; color: #fff; font-size: 150px; line-height: 1;
	position: relative; z-index: 2;
	opacity: 0;}

/* 動作 */
#recruit_top_mv.is-show::before{clip-path: inset(0 0 0 0);}
#recruit_top_mv.is-show h1 span::before{animation: mask .8s ease 1.4s 1 normal forwards;}
#recruit_top_mv.is-show h1 span::after,
#recruit_top_mv.is-show h1 span b{animation: txtIn .1s ease 1.8s 1 normal forwards;}

@media screen and (max-width: 1450px){
    #recruit_top_mv::before{width: 35vw;}
    #recruit_top_mv h1 span b{font-size: 10vw;}

}
@media screen and (max-width: 960px){
    #recruit_top_mv{height: 500px; background-position: right -5vw top;}
    #recruit_top_mv::before{width: 40vw; bottom: 20px; transform: translateY(0);}
    #recruit_top_mv h1{bottom: 100px; transform: translateY(0);}
    #recruit_top_mv h1 span b{font-size: 12vw;}
}
@media screen and (max-width: 640px){
    #recruit_top_mv{height: auto; aspect-ratio: 1 / 0.8;}
    #recruit_top_mv h1{bottom: 60px;}
}


/* recruit_message */
.recruit_message{align-items: center; padding: 120px 0;}
.recruit_message_text{width: 720px; padding-right: 80px;}
.recruit_message_text h2{font-size: 40px; margin-bottom: 20px;}
.recruit_message_text p{font-size: 16px; line-height: 1.8;}
.recruit_message_img{width: calc(100% - 720px);}
.recruit_message_img figure{width: calc(100% + 50vw - 610px);}
.recruit_message_img figure img{width: 100%;}

@media screen and (max-width: 1200px){
    .recruit_message_text{width: 600px;}
    .recruit_message_img{width: calc(100% - 600px);}
    .recruit_message_img figure{width: calc(100% + 15px);}
}
@media screen and (max-width: 960px){
    .recruit_message_text{width: 55%; padding-right: 40px;}
    .recruit_message_img{width: 45%;}
    .recruit_message_text h2{font-size: 40px;}
    .recruit_message_text p{font-size: 16px;}
}
@media screen and (max-width: 640px){
    .recruit_message{padding: 30px 0 50px;}
    .recruit_message_text{width: 100%; padding-right: 0; margin-bottom: 20px;}
    .recruit_message_img{width: 100%; margin-left: -15px;}
    .recruit_message_text h2{font-size: 26px; margin-bottom: 10px;}
    .recruit_message_text p{font-size: 14px; line-height: 2;}
    .recruit_message_img figure{width: calc(100% + 30px);}
}

/* top_interview */
#top_interview{padding: 60px 0 50px; background: #f5f2f2;}
#top_interview .title_style01{margin-bottom: 40px;}

.interview_wrap{margin-left: -12px; margin-right: -12px;}
.interview_box{width: calc(100% / 4); padding: 0 12px; margin-bottom: 24px;}
.interview_box a{display: block;}
.interview_img{width: 100%; aspect-ratio: 1 / 1; overflow: hidden;}
.interview_img_inner{width: 100%; height: 100%; position: relative; transition: 0.3s ease-in;}
.interview_box a:hover{opacity: 1;}
.interview_box a:hover .interview_img_inner{transform: scale(1.03);}
.interview_title{font-size: 14px; font-weight: 400; line-height: 1.2; margin: 10px 0 2px;}
#pageWrap p + p.interview_name{font-size: 17px; margin-top: 0;}

@media screen and (max-width: 960px){
	.interview_wrap{margin-left: -10px; margin-right: -10px;}
	.interview_box{padding: 0 10px;}
}
@media screen and (max-width: 640px){
	#top_interview{padding: 30px 0 35px;}
	#top_interview .title_style01{margin-bottom: 20px;}
	.interview_box{width: calc(100% / 2);}
}

/* top_content */
#top_content{padding: 60px 0 50px;}
.top_content_wrap .wp-block-group__inner-container{display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px;}
.top_content_wrap iframe{max-height: 500px; width: calc((100% / 3) - 32px); margin: 0 15px 30px; border: 1px solid #e6e5e5;}
.top_content_wrap p{border-bottom: 1px solid #000;}
.top_content_wrap p a{display: block; color: #004aad; padding: 10px;}
#pageWrap .top_content_wrap p + p{margin: 0;}

@media screen and (max-width: 960px){
    .top_content_wrap iframe{width: calc((100% / 2) - 32px);}
}
@media screen and (max-width: 640px){
	#top_interview{padding: 30px 0 35px;}
    .top_content_wrap iframe{width: 100%; max-height: 300px;}
}


/* top_requirement */
#top_requirement{padding: 80px 0 110px; background: #f5f2f2;}
#top_requirement h2{text-align: center;}
#top_requirement h2 small{display: block; font-size: 13px; font-weight: 500; margin-top: 10px;}

.requirement_btn_wrap{justify-content: center; margin-bottom: 40px;}
.requirement_btn{font-size: 16px; font-weight: 700; line-height: 1; background: #000; color: #fff; margin: 0 10px; padding: 10px 15px; transition: 0.3s ease;}
.requirement_btn:hover{opacity: 0.7; cursor: pointer;}
.requirement_btn.active{background: #004aad;}

.requirement_table_wrap{background: #fff; padding: 40px 40px 60px;}
.requirement_table{display: none;}
.requirement_table.show{display: block;}
.requirement_table table tr{border-bottom: 1px solid #000;}
.requirement_table table td{border: none; padding: 30px 20px; font-size: 15px;}
.requirement_table table td:nth-child(1){width: 20%; font-weight: 700;}
.requirement_table table td:nth-child(2){width: 80%;}

.requirement_table .wp-block-buttons{margin-top: 40px;}
.requirement_table .wp-block-button{width: 300px; height: 60px;}
.requirement_table .wp-block-buttons a{background: #004aad; border-radius: 0; font-size: 30px; line-height: 1;
    display: block; height: 100%; padding: 0; display: flex; justify-content: center; align-items: center;
}
@media screen and (max-width: 640px){
    #top_requirement{padding: 30px 0 80px;}
    .requirement_btn_wrap{margin-bottom: 20px;}
    .requirement_btn{width: calc(50% - 10px); margin: 0 5px; padding: 10px; text-align: center; font-size: 13px;}
    .requirement_table_wrap{padding: 30px 20px;}
    .requirement_table table td:nth-child(1){width: 100%; display: block; padding: 10px 20px; background: #f3f3f3;}
    .requirement_table table td:nth-child(2){width: 100%; display: block; padding: 20px; font-size: 14px;}

    .requirement_table .wp-block-buttons{margin-top: 20px;}
}


/* /interview/ ==========================*/
.interview_mv{padding: 30px 0 0; border-bottom: 1px solid #f0f0f0;}
.interview_mv .interview_mv_inner{position: relative;}
.interview_mv_profile{position: absolute; bottom: 50px; left: 0; z-index: 2;
    background: #000; color: #fff; padding: 10px 80px 7px 30px;}
.interview_mv_profile p{font-size: 13px; line-height: 1.5;}
.interview_mv_profile h1{font-size: 18px;}
.profile_text{font-size: 13px; line-height: 1.8; margin: 20px 0;}

.interview_pageWrap{}
.interview_pageWrap .wp-block-group{padding-top: 40px;}
.interview_pageWrap h2{font-size: 28px; font-weight: 500; font-style: italic; line-height: 1.5; padding-left: 60px; margin-bottom: 30px; position: relative;}
.interview_pageWrap h2::before{content: ""; width: 40px; height: 2px; background: #000; display: block;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.interview_pageWrap h3{font-size: 15px; font-weight: 500; display: inline-block; background: #000; color: #fff; padding: 3px 15px; margin-bottom: 10px;}
.interview_pageWrap{counter-reset: number 0;}
.interview_pageWrap .wp-block-group h3::before{
    font-family: 'Oswald', sans-serif; font-size: 16px; margin-right: 10px;
    counter-increment: number 1; content: counter(number ,decimal-leading-zero) ".";
}
.interview_pageWrap p + figure{margin-top: 30px;}

.interview_page_content #side_column{margin-top: 40px;}

.interview_pageWrap .wp-block-group{position: relative; opacity: 0; transform: translateX(-40px); transition: 0.3s ease 0.5s;}
.interview_pageWrap .wp-block-group.is-show{opacity: 1; transform: translateX(0);}

.entry_area{width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; position: relative;
    background: url(../../img/page/top/back_mv.png);
}
.entry_area::after{content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url(../../img/page/top/mv_image.png) no-repeat center bottom 25%; background-size: cover;
}
.entry_area_inner{position: relative; z-index: 2; padding: 0 15px; text-align: center;}
.entry_area_inner p{font-size: 20px;}
.entry_btn{width: 400px; height: 90px;}
.entry_btn a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;
    font-size: 60px; background: #004aad; color: #fff;
}

@media screen and (max-width: 640px){
    .interview_mv_profile{position: static; padding: 10px 20px 5px;}
    .interview_mv_profile p{font-size: 12px;}
    .interview_mv_profile h1{font-size: 16px;}

    .interview_pageWrap h2{font-size: 20px; padding-left: 40px; margin-bottom: 20px;}
    .interview_pageWrap h2::before{width: 30px;}
    .interview_pageWrap h3{font-size: 14px; padding: 3px 10px;}
    .interview_pageWrap p{font-size: 13px;}

    .entry_btn{width: 300px; height: 90px;}

}