/*----------------------------------------
 * リクルート全般（後でrecuruit.cssに移動）
 *----------------------------------------*/
.recruit {
}

.recruit .eng_sub {
	color:#1092de;
	font-weight:700;
	font-size:1.25rem;
}

.recruit.recruit_top article .std_width {
	max-width:1200px;
}

.std_h3 {
	border:1px solid #3f9eea;
	color:#3f9eea;
}


/*----------------------------------------
 * リクルート トップページ2
 *----------------------------------------*/
.main_area_2 {
	position:relative;
	background-color:white;
	background:white url(../images/recruit/top2/sky.jpg) no-repeat center 20px;
	background-size:cover;
	z-index:1;
	height:680px;
	overflow:hidden;
}

.main_area_2 ul {
	margin:0;
}

.std_h3_bk {
	border:none;
	background-color:black;
	color:white;
	display:inline-block;
	padding:5px 10px;
}

a.std_button_more {
	background-color:#3f9eea;
	color:white;
}

a.std_button_more:visited {
	color:white;
}

a.std_button_more.white{
	background-color:white;
	color:#3f9eea;
}

a.std_button_more.white:visited {
	color:#3f9eea;
}


.pride_responsibility {
	position:absolute;
	width:100%;
	height:30%;
	top:30%;
	opacity:0;
	animation:pride_responsibility 5s ease-in-out 0s forwards;
	z-index:-1;
}
.pride_responsibility .std_width{
	background:url(../images/recruit/top2/pride_responsibility.png) no-repeat center center;
	background-size:auto 100%;
	height:300px;
}

@keyframes pride_responsibility {
	0%{
		transform: scale(0.7, 0.7);
	}
	25%{
		opacity:1;
		top:30%;
		transform: scale(1, 1);
		}
	70%{
		opacity:1;
		top:30%;
		transform: scale(1, 1);
		}
	100%{
		opacity:0;
		top:60%;
		transform: scale(0.95, 0.95);
	}
}

@keyframes main_area {
	0%{
		transform: scale(0.7, 0.7);
		opacity:0;
		}
	100%{
		transform: scale(1, 1);
		opacity:1;
		display:block;
	}
}

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

	@keyframes pride_responsibility {
		0%{
			transform: scale(0.7, 0.7);
		}
		25%{
			opacity:1;
			top:00px;
			transform: scale(1, 1);
			}
		70%{
			opacity:1;
			top:00px;
			transform: scale(1, 1);
			}
		100%{
			opacity:0;
			top:100px;
			transform: scale(0.95, 0.95);
		}
	}

}

/*----------------------------------------
 * interview
 *----------------------------------------*/
.interview {
}

.interview .midashi {
	position:relative;
	text-align:center;
	margin:0;
	padding:0;
	z-index:-1;
}
.interview .midashi .inner {
/* アニメ対応 */
	opacity:0;
}

.interview .midashi img {
	width:574px;
	height:122px;
}

.anim_interview_main {
/*
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
*/
   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.interview_main {
	margin-top:-60px;
	padding-top:70px;
	position:relative;
	padding-bottom:0px;
}


.interview_main .bx-wrapper {
	background:none;
	border:none;
	box-shadow:none;
	margin-bottom:0;
	margin-top:70px;
}

.interview_main .bx-viewport {
	overflow:visible!important;
}

.interview_main #slider3 {
	margin-top:-150px;
	margin-bottom:0;
	padding:0;
}

.interview_main #slider3 li {
	padding-top:150px;
	padding-bottom:150px;
}

.interview_main #slider3 li:after {
	width:65%;
	background-size:cover;
	background-position:right top!important;
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0) 100%);
}

.interview_main #slider3 li.p1:after {	background-image:url(../../resources/images/recruit/top/slide_01.jpg);}
.interview_main #slider3 li.p2:after {	background-image:url(../../resources/images/recruit/top/slide_02.jpg);}
.interview_main #slider3 li.p3:after {	background-image:url(../../resources/images/recruit/top/slide_03.jpg);}
.interview_main #slider3 li.p4:after {	background-image:url(../../resources/images/recruit/top/slide_04.jpg);}
.interview_main #slider3 li.p5:after {	background-image:url(../../resources/images/recruit/top/slide_05.jpg);}
.interview_main #slider3 li.p6:after {	background-image:url(../../resources/images/recruit/top/slide_06.jpg);}

.interview_main .bx-wrapper .bx-controls-direction a {
	transition:none;
	top:50%;
}



.interview_main .lead {
	font-size:1.875rem;
	line-height:1.8em;
	font-weight:700;
}

.interview_main .text_area {
	width:56%;
	float:right;
}

@media (max-width: 1410px) {
	.interview_main .text_area {width:60%;}
	.interview_main #slider3 li:after {	width:75%;}
}
@media (max-width: 1320px) {
	.interview_main .text_area {width:60%;}
	.interview_main #slider3 li:after {	
		width:78%;
		mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0) 100%);
	}
}
@media (max-width: 1220px) {
	.interview_main .text_area {width:60%;}
	.interview_main #slider3 li:after {	
		width:80%;
		mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.45) 46%, rgba(0, 0, 0, 0) 100%);
	}
	body .interview_flex {margin-top:-200px}
	.interview_main #slider3 li { padding-bottom:170px;}
}
@media (max-width: 1090px) {
	.interview_main .text_area {width:60%;}
	.interview_main #slider3 li:after {	
		width:90%;
		mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 100%);
	}

}

@media (max-width: 990px) {
	.interview_main .text_area {width:65%;}
	.interview_main #slider3 li:after {	
		width:90%;
		mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 100%);
	}
	.interview_main #slider3 li { padding-bottom:100px;}
}
@media (max-width: 920px) {
	.interview_main .text_area {width:72%;}
	.interview_main .lead { font-size:1.7rem;}
	.interview_main #slider3 li:after {	
		width:90%;
		mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 100%);
	}
	body .interview_flex {margin-top:-150px}
}
@media (max-width: 890px) {
	.interview_main .lead { font-size:1.5rem;}
	.interview_main .text_area {width:72%;}
	.interview_main #slider3 li:after {	
		width:95%;
		mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 100%);
	}
	body .interview_flex {margin-top:-150px}
}

/*
.interview_main .col2_70_26 .left {
	position:relative;
	width:530px;
	text-align:justify;
}

.interview_main .col2_70_26 .left .anim_1 .inner,
.interview_main .col2_70_26 .left .anim_2 .inner,
.interview_main .col2_70_26 .left .anim_3 .inner,
.interview_main .col2_70_26 .left .anim_4 .inner {
	opacity:0;
}
*/

.interview_main .text_area .name .bumon {
	font-size:1.5rem;
	margin-right:1em;
}

.interview_main .text_area .right {
	float:left;
}

.interview_main .text_area .right img {
	height:560px;
	width:auto;
	margin-top:-20px;
}


/*----------------------------------------
 * interview FLEX
 *----------------------------------------*/
 .anim_interview_flex {
   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.interview_flex {
	margin-top:-102px;
	background: linear-gradient(90deg, rgba(111,168,201,1) 48%, rgba(83,155,207,1) 52%);
}

.interview_flex .std_width {
	padding-top:30px;
}

.interview_flex .flex_senior {

	display:flex;

}

.interview_flex .flex_senior .column {
	margin-top:-100px;
	width:calc(100% / 6);
	border-right:1px solid white;
	overflow:hidden;
}
.interview_flex .flex_senior .column .inner{
	width:100%;
/* アニメ対応 */
	opacity:0;
}

.interview_flex .flex_senior .column:last-child {
	border-right:none;
}

.interview_flex .flex_senior .column img {
	display:block;
	width:70%;
	margin-left:auto;
	margin-right:auto;
    transition: all 0.3s 0s ease;
}

.interview_flex .flex_senior .column a:hover img {
	transform: scale(1.05, 1.05);
}

.interview_flex .flex_senior .column strong {
	display:block;
	font-size:1.125rem;
	text-align:center;
	padding-top:10px;
	padding-bottom:20px;
}

@media (max-width: 1300px) {
	.interview_flex .flex_senior .column strong {font-size:1rem;}
}

@media (max-width: 1210px) {
	.interview_flex .flex_senior .column strong {font-size:0.875rem;}
}

@media (max-width: 980px) {
	.interview_flex .flex_senior .column strong {font-size:0.8rem;}
}

@media (max-width: 880px) {
	.interview_flex .flex_senior .column strong {font-size:0.75rem;}
}

.interview_flex .flex_senior .column.col1{
	padding-top:90px;
	background-color:#6fa8c9;
	color:#d1e3ee;
	padding-bottom:20px;
}
.interview_flex .flex_senior .column.col2{
	padding-top:74px;
	background-color:#6fa8c9;
	color:#d1e3ee;
}
.interview_flex .flex_senior .column.col3{
	padding-top:58px;
	background-color:#50b9c7;
	color:#afdfe5;
}
.interview_flex .flex_senior .column.col4{
	padding-top:42px;
	background-color:#35bfa9;
	color:#a3e2d8;
}
.interview_flex .flex_senior .column.col5{
	padding-top:26px;
	background-color:#3ba6c4;
	color:#a5d6e4;
}
.interview_flex .flex_senior .column.col6{
	padding-top:10px;
	background-color:#539bcf;
	color:#b0d1ea;
}


/*----------------------------------------
 * number
 *----------------------------------------*/
.number {
}

.number .midashi {
	text-align:center;
	margin:0;
	padding:0;

}
.number .midashi .inner {
/* アニメ対応 */
	opacity:0;
}


.number .midashi img {
	width:574px;
	height:122px;
}

 .anim_number_main {
   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.number_main {
	margin-top:-60px;
	padding-top:110px;
	position:relative;
	padding-bottom:90px;
	background-color:#e5e5e5;
}

.number_main:after {
	width:100%;
	background-image:url(../../resources/images/recruit/top/number_bg.jpg);
	background-size:cover;
	background-position:right top!important;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
}

.number_main .text_area h3,
.number_main .text_area .lead,
.number_main .text_area .eng_sub,
.number_main .text_area .text {
/* アニメ対応 */
	opacity:0;
}




.number_main .lead {
    font-size: 1.875rem;
    line-height: 1.8em;
    font-weight: 700;
}

.number_main .number_flex {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.number_main .number_flex .column {
	width:24%;
	margin-bottom:20px;
	text-align:center;
	overflow:hidden;
}

.number_main .number_flex .column .inner2 {
	background-color:white;
/* アニメ対応 */
	opacity:0;
}

.number_main .number_flex .column strong {
	display:block;
	padding-bottom:15px;
}

.number_main .number_flex .column img {
	width:100%;
	height:auto;
}




/*----------------------------------------
 * aboutus
 *----------------------------------------*/

.midashi.aboutus  {
	text-align:center;
	margin:0;
	padding:0;

}

.midashi.aboutus .inner {
/* アニメ対応 */
	opacity:0;
}


.midashi.aboutus  img {
	width:574px;
	height:122px;
}

.aboutus_main {
	margin-top:-102px;
	padding-top:110px;
	position:relative;
	padding-bottom:40px;
	background-color:#e5e5e5;
}

.anim_aboutus_main {
/* アニメ対応 */
   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
   margin-top:40px;
}

.aboutus_main:after {
	width:100%;
	background-image:url(../../resources/images/recruit/top/aboutus_bg.jpg);
	background-size:100% auto;
	background-position:right top!important;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%,  rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
}

.aboutus_main .lead {
    font-size: 1.875rem;
    line-height: 1.8em;
    font-weight: 700;
	color:white;
}

.aboutus_main .std_h3 {
	border:1px solid white;
	color:white;
}
.aboutus_main .h4_std_h3 .inner{
/* アニメ対応 */
	opacity:0;
}


.aboutus_main .text_area h3,
.aboutus_main .text_area .lead,
.aboutus_main .text_area .eng_sub,
.aboutus_main .text_area .text {
/* アニメ対応 */
	opacity:0;
}



.aboutus_main .std_flex3 .column {
    width: 32.5%;
    position: relative;
    overflow: hidden;
	line-height:1.6em;
}

.aboutus_main .std_flex3 .column .inner_area {
    position: relative;
    z-index: 1;
}

.aboutus_main .std_flex3 .column a.photo_area {
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 1;
}

.aboutus_main .std_flex3 .column h4 {
    position: absolute;
    display: inline-block;
    border: 1px solid black;
    padding: 0.5em 1em;
    margin: 10px 0 0 10px;
    z-index: 4;
}

.aboutus_main .std_flex3 .column a.more {
    float: right;
    display: block;
    width: 3em;
    position: relative;
    margin: 10px 20px 0 20px;
 }

.aboutus_main .std_flex3 .column a.more:after {
    content: "";
    display: block;
    position: absolute;
    width: 65px;
    height: 7px;
    bottom: -3px;
    right: -2px;
    border-bottom: 1px solid #3f9eea;
    border-right: 1px solid #3f9eea;
    transform: skew(45deg);
    transition: all 0.3s 0s ease;
}



.aboutus_main .std_column2 .left,
.aboutus_main .std_column2 .right {
    position: relative;
    overflow: hidden;
	line-height:1.6em;
}

.aboutus_main .std_column2 .left .inner,
.aboutus_main .std_column2 .right .inner {
    position: relative;
    z-index: 1;
}

.aboutus_main .std_column2 .left a.photo_area,
.aboutus_main .std_column2 .right a.photo_area {
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 1;
}

.aboutus_main .std_column2 .left a.more,
.aboutus_main .std_column2 .right a.more,
.info a.more {
    float: right;
    display: block;
    width: 3em;
    position: relative;
    margin: 10px 20px 0 20px;
 }

.aboutus_main .std_column2 .left a.more:after,
.aboutus_main .std_column2 .right a.more:after,
.info a.more:after {
    content: "";
    display: block;
    position: absolute;
    width: 65px;
    height: 7px;
    bottom: -3px;
    right: -2px;
    border-bottom: 1px solid #3f9eea;
    border-right: 1px solid #3f9eea;
    transform: skew(45deg);
    transition: all 0.3s 0s ease;
}

.aboutus_main .std_column2 .inner2 {
	background-color:none;
/* アニメ対応 */
	opacity:0;
}

.aboutus_main .std_column2 .text_wrapper {
	opacity:0;
}

/*----------------------------------------
 * お知らせ
 *----------------------------------------*/

.info {
	padding-top:50px;
}

.info .lead {
    font-size: 1.875rem;
    line-height: 1.8em;
    font-weight: 700;
	margin-top:0;
}

.info .std_flex2 h3,
.info .std_flex2 .eng_sub {
/* アニメ対応 */
	opacity:0;
}


.info .std_flex2 .column.left {
	width:15em;
}

.info .std_flex2 .column.right {
	width: calc(100% - 15em);
	margin-top:25px;
	position:relative;
}

.info .std_flex2 .column.right .inner {
/* アニメ対応 */
	opacity:0;
}

.info .std_flex2 .column.right dl {
	padding: 0.5em 0;
	margin:0;
}

.info .std_flex2 .column.right dl:first-child {
	border-top:1px solid #ccc;
}

.info .std_flex2 .column.right dl:last-child {
	border-bottom:1px solid #ccc;
}

.info .std_flex2 .column.right dl dt {
	float:left;
	width:5em;
}

.info .std_flex2 .column.right dl dd {
	margin-left:6em;
}


/*----------------------------------------
 * アニメーション関連
 *----------------------------------------*/

.main_area_2 .std_column2 .inner {
	position:relative;
	z-index:1;
	/* アニメーションの準備 */
/*
	opacity:0;
*/
}

.main_area_2 .std_column2 .inner .top_std_h3 {
	font-size:42px;
	line-height:1.28em;
}

.main_area_2 .std_column2 .inner .top_std_h3 .midashi1,
.main_area_2 .std_column2 .inner .top_std_h3 .midashi2,
.main_area_2 .std_column2 .inner .eng_sub,
.main_area_2 .std_column2 .inner .main_text,
.main_area_2 .std_column2 .inner .main_illust{
	/* アニメーションの準備 */
	opacity:0;
}

.main_area_2 .left {
	width:380px;
}

.main_area_2 .right {
	float:left;
	margin-left:-243px;
	/* アニメーションの準備 */
	/*
	opacity:0;
	*/
}

.main_area_2 ul {
	opacity:0;
}

.main_area_2 li div.photo1{
	position:relative;
	width:235px;
	height:415px;
	transform: skewX(-7deg);
	overflow:hidden;
	margin-bottom:15px;
}

.main_area_2 li div.photo1 img{
	position:absolute;
/*
	width:415px;
	height:415px;
*/
	width:445px;
	height:445px;
	max-width:200%;
	top:0;
	left:-100px;
	transform: skewX(7deg);
}

.main_area_2 li div.photo2{
	position:relative;
	width:235px;
	height:200px;
	transform: skewX(-7deg);
	overflow:hidden;
	margin-left:-42px;
}

.main_area_2 li div.photo2 img{
	position:absolute;
	width:280px;
	height:200px;
	max-width:200%;
	top:0;
/*
	left:-23px;
*/
	left:-10px;
	transform: skewX(7deg);
}

.main_area_2 .bx-wrapper {
	border: none !important;
	background: transparent  !important;
	box-shadow:none;
	max-width: 100% !important;
	margin-bottom:0 !important;
}

.main_area_2 .bx-viewport{
	width:300% !important;
    background: transparent  !important;
	position:relative;
/* アニメの設定 */
	opacity:0;
/*
	clip-path: polygon(265px 0%, 100% 0%, 100% 100%, 185px 100%);
	*/
}

/*　アニメの設定 */
.main_area_2 .bx-viewport:before {
	content:'';
	display:block;
	width:100%;
	height:100%;
	background-color:#1092de;
	top:0;
	left:0;
	position:absolute;
	z-index:2;
}


section.sec7_recruit:after {
	content:'';
	display:block;
	width:100%;
	height:25%;
	background-color:#1092de;
	bottom:0%;
	left:0;
	position:absolute;
	z-index:-1;
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.main_area_2 #slider2 li {
	width:235px !important;
	height:680px;
}

.main_area_2 #slider2 li img {
	transition: all 0.3s 3.5s ease;
}

.main_area_2 #slider2 li img:hover {
	transform: scale(1.1, 1.1)  skewX(7deg);
	 filter: brightness(105%);
}

.main_area_2 #slider2 li.slider_1 { background:url(../images/top/sec7_slide/001.jpg) no-repeat left top;}
.main_area_2 #slider2 li.slider_2 { background:url(../images/top/sec7_slide/002.jpg) no-repeat left top;}
.main_area_2 #slider2 li.slider_3 { background:url(../images/top/sec7_slide/003.jpg) no-repeat left top;}
.main_area_2 #slider2 li.slider_4 { background:url(../images/top/sec7_slide/004.jpg) no-repeat left top;}
.main_area_2 #slider2 li.slider_5 { background:url(../images/top/sec7_slide/005.jpg) no-repeat left top;}
.main_area_2 #slider2 li.slider_6 { background:url(../images/top/sec7_slide/006.jpg) no-repeat left top;}
.main_area_2 #slider2 li.slider_7 { background:url(../images/top/sec7_slide/007.jpg) no-repeat left top;}




.main_area_2 .ca_main_area_1_1{
	animation:ca_main_area_1_1 2s ease 4.5s forwards;
}

@keyframes ca_main_area_1_1 {
	0%{
		opacity:0;
		margin-top:40px;
	}
	100%{
		opacity:1;
		margin-top:0px;
	}
}

.main_area_2 .ca_main_area_1_2{
	animation:ca_main_area_1_2 2s ease 4.6s forwards;
}

@keyframes ca_main_area_1_2 {
	0%{
		opacity:0;
		margin-top:50px;
	}
	100%{
		opacity:1;
		margin-top:10px;
	}
}

.main_area_2 .ca_main_area_1_3{
	animation:ca_main_area_1_3 2s ease 4.7s forwards;
}

@keyframes ca_main_area_1_3 {
	0%{
		opacity:0;
		margin-top:40px;
	}
	100%{
		opacity:1;
		margin-top:0px;
	}
}

.main_area_2 .ca_main_area_1_4{
	animation:ca_main_area_1_4 2s ease 4.8s forwards;
}

@keyframes ca_main_area_1_4 {
	0%{
		opacity:0;
		margin-top:60px;
	}
	100%{
		opacity:1;
		margin-top:20px;
	}
}

@media screen and (max-width: 768px) {
	@keyframes ca_main_area_1_4 {
		0%{
			opacity:0;
			margin-top:40px;
		}
		100%{
			opacity:1;
			margin-top:0px;
		}
	}
}


.main_area_2 .ca_main_area_1_5{
	animation:ca_main_area_1_5 2s ease 4.9s forwards;
}

@keyframes ca_main_area_1_5 {
	0%{
		opacity:0;
		margin-top:40px;
	}
	100%{
		opacity:1;
		margin-top:0px;
	}
}








.main_area_2 {
	animation:ca_main_area_2_1 2s ease 0s forwards;
}

.main_area_2 ul {
	animation:ca_main_area_2_1 0s ease 4s forwards;
}

.main_area_2 .bx-viewport{
	animation:ca_main_area_2_2 1.0s ease 4.5s forwards;
}

.main_area_2 .bx-viewport:before{
	animation:ca_main_area_2_3 1.0s ease 5.1s forwards;
}

@keyframes ca_main_area_2_1 {
	0%{
		opacity:0;
		/*
		transform: scale(0.5, 0.5);
		transform-origin: left center;
		*/
	}
	50%{
		/*
		transform: scale(1, 1);
		*/
	}
	100%{
		opacity:1;
	}
}

@keyframes ca_main_area_2_2 {
	0%{
		opacity:0;
		transform: scale(0.8, 0.8);
		clip-path: polygon(265px 0, 265px 0, 185px 100%, 185px 100%);
	}
	50% {
		opacity:1;
	}
	100%{
		opacity:1;
		transform: scale(1.0, 1.0);
		clip-path: polygon(265px 0, 100% 0, 100% 100%, 185px 100%);
	}
}

@keyframes ca_main_area_2_3 {
	0%{
		clip-path: polygon(265px 0, 100% 0, 100% 100%, 185px 100%);
	}
	100%{
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	}
}

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

	@keyframes ca_main_area_2_2 {
		0%{
			opacity:0;
			transform: scale(0.8, 0.8);
			clip-path: polygon(278px 0, 278px 0, 235px 100%, 235px 100%);
		}
		50% {
			opacity:1;
		}
		100%{
			opacity:1;
			transform: scale(1.0, 1.0);
			clip-path: polygon(278px 0, 100% 0, 100% 100%, 235px 100%);
		}
	}

}