@charset "UTF-8";

body.menu_current ul.headerPC__list li:nth-child(2) .headerPC__category{

              color: #0079c2 !important;

}

/*=============================================================
 vision index Layout
=============================================================*/
/* base

-------------------------------------------------------------*/
#vision>.contents_inner:first-child{
	position:absolute;
	left:50%;
	z-index:11;
	transform:translateX(-50%);
}
#vision ul.topicpath li,
#vision ul.topicpath li a{color:#fff;}

/* set animation
-------------------------------------------------------------*/
/* fadeSlideB */
.fadeSlideB{
	visibility:hidden;
	opacity:0;
	transform:translate(0,50px);
}
.fadeSlideB.enter{
	visibility:visible;
	opacity:1;
	transform:translate(0,0);
	transition:.4s ease-out;
	transition-property:opacity, transform;
}
/* vision-main
-------------------------------------------------------------*/
#vision-main{
	margin-bottom:-50px;
	position:relative;
	overflow:hidden;
}
#vision-main::before{
	content:"";
	background-color:rgba(0,83,174,.8);
	display:block;
	width:1518px;
	height:1518px;
	position:absolute;
	top:0;
	right:50%;
	transform:translate(-176px,0) rotate(45deg);
	transform-origin:right top;
}
#vision-main::after,
#vision02::before,
#vision03::before{
	content:"";
	background:linear-gradient(-45deg, #0cf, #0079c2);
	background:url(/recruit/vision/img/index_p_bg00.png) no-repeat 0 0/contain;
	display:block;
	width:548px;
	height:548px;
	position:absolute;
	top:0;
	left:50%;
	z-index:-1;
	transform:translate(534px,-50%);
}
#vision-main::after{top:-100px;}
#vision-main img{
	display:inline;
	vertical-align:top;
	max-width:none;
	height:auto;
}
/* h1 */
#vision-main h1{
	color:#fff;
	font-size:58px;
	line-height:1.15;
	font-weight:300;
	box-sizing:border-box;
	text-align:center;
	width:784px;
	height:392px;
	margin:0 auto;
	padding-top:30px;
	position:relative
}
#vision-main h1 .textL{
	font-size:150%;
	font-weight:500;
	line-height:1;
}
#vision-main h1::before{
	content:"";
	background:linear-gradient(135deg, #00c4f9 50%, #0079c2);
	display:block;
	width:544px;
	height:544px;
	position:absolute;
	top:0;
	left:50%;
	z-index:-1;
	transform:translate(-50%,-50%) rotate(45deg);
}
/* vision-box */
.vision-box{position:relative;}
.vision-box .textSet{
	box-sizing:border-box;
	width:996px;
	height:996px;
	margin-left:-393px;
	padding:278px 234px 0;
	position:absolute;
	top:0;
	left:50%;
	z-index:1;
}
.vision-box .textSet::after{
	content:"";
	background:linear-gradient(90deg, #0cf, #0079c2);
	display:block;
	width:704px;
	height:704px;
	opacity:0.2;
	position:absolute;
	top:50%;
	left:50%;
	z-index:-1;
	transform:translate(-50%,-50%) rotate(-45deg);
}
.vision-box .textSet h2{
	color:#fff;
	font-size:43px;
	font-weight:bold;
	letter-spacing:0.1em;
	line-height:84px;
}
.vision-box .textSet h2>span{
	background-color:#0079c2;
	display:inline-block;
	vertical-align:top;
	margin-bottom:14px;
	padding:0 18px;
	overflow:hidden;
	position:relative;
	transform:scaleX(0);
	transform-origin:left top;
}
.vision-box .textSet h2.enter>span{
	transform:scaleX(1);
	transition:transform .3s ease-in-out .5s;
}
.vision-box .textSet h2.enter>span:nth-of-type(2){transition-delay:.6s;}
.vision-box .textSet h2.enter>span:nth-of-type(3){transition-delay:.7s;}
.vision-box .textSet h2>span::after{
	content:"";
	background-color:#0079c2;
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.vision-box .textSet h2.enter>span::after{
	left:100%;
	transition:left 0.6s ease-in-out .6s;
}
.vision-box .textSet h2.enter>span:nth-of-type(2)::after{transition-delay:.8s;}
.vision-box .textSet h2.enter>span:nth-of-type(3)::after{transition-delay:1s;}
.vision-box .textSet .text{
	font-size:18px;
	font-weight:300;
	margin-top:5px;
}
.vision-box .textSet .text,
.vision-box .pic{
	visibility:hidden;
	opacity:0;
}
.vision-box .textSet h2.enter~.text,
.vision-box .textSet h2.enter~.pic{
	visibility:visible;
	opacity:1;
	transition:opacity .7s 1.3s;
}
.vision-box .textSet h2.enter~.pic{transition:opacity 1s 1.8s;}
.vision-box .pic>div,
.vision-box .bg>div{
	position:absolute;
	left:50%;
}
/* vision01 */
#vision01{
	height:1002px;
	margin-top:-83px;
}
#vision01 .pic01{
	margin-left:324px;
	bottom:289px;
}
#vision01 .pic02{
	margin-left:60px;
	bottom:132px;
}
#vision01 .pic03{
	margin-left:-84px;
	bottom:96px;
}
#vision01 .bg01{
	margin-left:-557px;
	top:-187px;
}
#vision01 .bg02{
	margin-left:115px;
	top:-218px;
}
#vision01 .bg03{
	margin-left:326px;
	top:51px;
}
/* vision02 */
#vision02{
	height:1136px;
	margin-top:396px;
}
#vision02::before{
	width:604px;
	height:604px;
	transform:translate(-1018px,-830px);
}
#vision02 .textSet{
	margin-left:-785px;
	padding:198px 280px 0;
}
#vision02 .pic01{
	margin-left:-250px;
	top:66px;
}
#vision02 .pic02{
	margin-left:252px;
	top:467px;
}
#vision02 .pic03{
	margin-left:-152px;
	bottom:78px;
}
#vision02 .bg01{
	margin-left:-425px;
	top:-364px;
}
#vision02 .bg02{
	margin-left:-216px;
	top:-396px;
}
#vision02 .bg03{
	margin-left:-19px;
	bottom:42px;
}
#vision02 .bg04{
	margin-left:-218px;
	bottom:0;
}
/* vision03 */
#vision03{
	height:1037px;
	margin-top:313px;
}
#vision03::before{
	width:666px;
	height:666px;
	transform:translate(478px,-526px);
}
#vision03 .textSet{
	width:924px;
	height:924px;
	margin-left:-422px;
	padding:222px 264px 0;
}
#vision03 .textSet::after{
	width:654px;
	height:654px;
}
#vision03 .pic01{
	margin-left:-84px;
	bottom:105px;
}
#vision03 .bg01{
	margin-left:-452px;
	top:-151px;
}
#vision03 .bg02{
	margin-left:-572px;
	top:112px;
}
#vision03 .bg03{
	margin-left:109px;
	top:-128px;
}
#vision03 .bg04{
	margin-left:292px;
	top:84px;
}
#vision03 .bg05{
	margin-left:-546px;
	bottom:158px;
}
#vision03 .bg06{
	margin-left:-319px;
	bottom:69px;
}
#vision03 .bg07{
	margin-left:315px;
	bottom:201px;
}
#vision03 .bg08{
	margin-left:192px;
	bottom:124px;
}
#vision03 .bg01::before,
#vision03 .bg02::before,
#vision03 .bg04::before,
#vision03 .bg08::before{
	content:"";
	background:linear-gradient(45deg, #0cf, #0079c2);
	display:block;
	width:148px;
	height:148px;
	opacity:0.3;
	position:absolute;
	transform:rotate(-45deg);
	transform-origin:left top;
}
#vision03 .bg01::before{
	top:5px;
	left:44px;
}
#vision03 .bg02::before{
	top:192px;
	left:-125px;
	z-index:-1;
}
#vision03 .bg04::before{
	top:232px;
	left:219px;
}
#vision03 .bg08::before{
	top:254px;
	left:-10px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 small PC
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width: 1024px) and (max-width: 1150px) {

/* vision-main
-------------------------------------------------------------*/
/* vision02 */
#vision02{transform:translateX(calc((1150px - 100vw) / 2));}

}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width: 1023px) {

/* vision-main
-------------------------------------------------------------*/
#vision-main::before{transform:translate(-66px,0) rotate(45deg);}
#vision-main::after,
#vision02::before,
#vision03::before{content:none;}
#vision-main img{width:100%;}

/* h1 */
#vision-main h1{
	font-size:24px;
	width:332px;
	height:166px;
	padding-top:14px;
}
#vision-main h1::before{
	width:234px;
	height:234px;
}
/* vision-box */
.vision-box .textSet{
	width:100% !important;
	max-width:375px;
	height:554px;
	margin-left:0 !important;
	padding-top:97px;
	padding-right:25px !important;
	padding-left:25px !important;
	transform:translateX(-50%);
}
.vision-box .textSet.fadeSlideB{transform:translate(-50%,50px);}
.vision-box .textSet.fadeSlideB.enter{transform:translate(-50%,0);}
.vision-box .textSet::after{
	width:392px;
	height:392px;
	margin-left:22px;
}
.vision-box .textSet h2{
	font-size:22px;
	line-height:40px;
}
.vision-box .textSet h2>span{
	margin-bottom:7px;
	padding:0 10px;
}
.vision-box .textSet .text{
	font-size:14px;
	line-height:1.7;
}
.vision-box .pic>div{width:84px;}

/* vision01 */
#vision01{
	height:624px;
	margin-top:-13px;
}
#vision01 .textSet::after{
	width:442px;
	height:442px;
	margin-top:35px;
}
#vision01 .pic01{
	width:78px;
	margin-left:45px;
	top:105px;
	bottom:auto;
}
#vision01 .pic02{
	margin-left:74px;
	bottom:28px;
}
#vision01 .pic03{
	margin-left:-20px;
	bottom:-10px;
}
#vision01 .bg01{
	width:216px;
	margin-left:-220px;
	top:-93px;
}
#vision01 .bg02{
	width:147px;
	margin-left:29px;
	top:-77px;
}
#vision01 .bg03{
	width:105px;
	margin-left:105px;
	top:20px;
}
/* vision02 */
#vision02{
	height:725px;
	margin-top:200px;
}
#vision02 .textSet{padding-top:30px;}
#vision02 .textSet::after{margin-left:-45px;}
#vision02 .textSet .text{padding-right:25%;}
#vision02 .pic01{
	margin-left:0;
	top:-28px;
	left:14px;
}
#vision02 .pic02{
	margin-left:86px;
	top:249px;
}
#vision02 .pic03{
	margin-left:-78px;
	bottom:58px;
}
#vision02 .bg01{
	width:148px;
	margin-left:-151px;
	top:-190px;
}
#vision02 .bg02{
	width:326px;
	margin-left:-74px;
	top:-202px;
}
#vision02 .bg03{
	width:294px;
	margin-left:-40px;
	bottom:18px;
}
#vision02 .bg04{
	width:162px;
	margin-left:-126px;
}
/* vision03 */
#vision03{
	height:647px;
	margin-top:102px;
}
#vision03 .textSet{
	height:498px;
	padding-top:93px;
}
#vision03 .textSet::after{
	width:382px;
	height:382px;
	margin-top:21px;
	margin-left:12px;
}
#vision03 .pic01{
	margin-left:-38px;
	bottom:44px;
}
#vision03 .bg01{
	width:145px;
	margin-left:-150px;
	top:-67px;
}
#vision03 .bg02{
	width:111px;
	margin-left:-191px;
	top:26px;
}
#vision03 .bg03{
	width:136px;
	margin-left:19px;
	top:-71px;
}
#vision03 .bg04{
	width:111px;
	margin-left:90px;
	top:11px;
}
#vision03 .bg05{
	width:156px;
	margin-left:-214px;
	bottom:83px;
}
#vision03 .bg06{
	width:115px;
	margin-left:-111px;
	bottom:43px;
}
#vision03 .bg07{
	width:144px;
	margin-left:80px;
	bottom:88px;
}
#vision03 .bg08{
	width:104px;
	margin-left:26px;
	bottom:54px;
}
#vision03 .bg01::before,
#vision03 .bg02::before,
#vision03 .bg04::before,
#vision03 .bg08::before{
	width:56px;
	height:56px;
}
#vision03 .bg01::before{
	top:2px;
	left:15px;
}
#vision03 .bg02::before{
	top:64px;
	left:-31px;
}
#vision03 .bg04::before{
	top:90px;
	left:87px;
}
#vision03 .bg08::before{
	top:112px;
	left:-5px;
}

}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones small (portrait)
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:374px){

/* vision-main
-------------------------------------------------------------*/
/* vision-box */
.vision-box .textSet{
	padding-right:15px !important;
	padding-left:15px !important;
}

}