
/* =======================
 PC
=======================*/

@media (min-width: 762px) {
	
	/* ============================================================
 	FV BG MOVIE
	==============================================================*/
	
	video {
		display: block;
	}
	
	.black_lay{
		position: relative;
		background: #fff;
	}
	
	.black_lay:after{
		content: "";
		display: block;
		width: 100%;
		height:100%;
		background: rgb(0 0 0 / 40%);
		position: fixed;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%);
		z-index: -1;
	}
	
	#bg-video {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -2;
		transition: all 4s cubic-bezier(0, 0, 0.11, 0.99) 0s;
	}

	#bg-video.act{
		transform: translate(-50%, -50%) scale(1.5);
	}

	/* ============================================================
 	main_wrap
	==============================================================*/
	
	
	
	#main_wrap {
		width:100%;
		height:100vh;
		min-height: 850px;
		background:url("/img/bg.jpg") no-repeat;
		background-size:cover;
		position:relative;
		overflow:hidden;
		}

	
	#h1_box{
		margin: calc(20vh + 90px) 0 20px;
		position: relative;
		z-index:1000;
	}

	#h1_box .eng_txt{
		display:block;
		font-family: 'Roboto', sans-serif;
		font-weight:400;
		font-size: 1.8rem;
		letter-spacing: 0.1rem;
		color: #454545;
		text-align: center;
		position:relative;
		font-feature-settings: 'palt';
		padding:0 0 40px;
	}
	
	#h1_box h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		font-size: 5.6rem;
		letter-spacing: 0.8rem;
		color: #454545;
		text-align: center;
		position:relative;
		font-feature-settings: 'palt';
	}

	#h1_box h1 span{
		display:block;
		padding: 0 0 48px;
	}

	#h1_box h1 span.logo{
		display:block;
		width: 510px;
		position:absolute;
		top: 40%;
		left: 50%;
		transform:translate(-50%, -50%);
	}

	#main_wrap .body_txt_wrap{
		width: 1000px;
		margin: 7vh auto 0;
		position: relative;
		z-index: 1000;
	}

	#main_wrap .body_txt_wrap p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.6rem;
		text-align: center;
		letter-spacing: 0.2rem;
		color: #454545;
		line-height:2.2;
		padding: 0 0 20px;
		text-shadow: 0 0 5px rgb(255 255 255);
	}

	.img_line01 img,.img_line02 img,.img_line03 img,.img_line04 img,
	.img_line05 img,.img_line06 img,.img_line07 img,.img_line08 img{
		width:auto;
		height:100%;
	}

	.img_line01,.img_line02,.img_line03,.img_line04,
	.img_line05,.img_line06,.img_line07,.img_line08{
		position:absolute;
		height: 200vh;
		opacity: 0;
		top: 50%;
	}

	.img_line01{
		left:30%;
		animation: bline1 60s infinite 1s;
	}
	.img_line02{
		left:0;
		animation: bline2 50s infinite 6s;
	}
	.img_line03{
		left:40%;
		animation: bline3 70s infinite;
	}
	.img_line04{
		left:0;
		animation: bline4 80s infinite 8s;
	}

	.img_line05{
		left:0;
		animation: bline1 60s infinite 16s;
	}
	.img_line06{
		left:0;
		animation: bline2 50s infinite 28s;
	}
	.img_line07{
		left:10%;
		animation: bline3 60s infinite 30s;
	}
	.img_line08{
		left:60%;
		animation: bline4 40s infinite 14s;
	}
	
	/* =========================================================================
 	movie
	===========================================================================*/
	
	
	#sec0 {
		width: 100%;
		height: 80vh;
		position:relative;
	}

	#sec0 .wrapper{
		width:880px;
		display:flex;
		justify-content:space-between;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%);
		z-index: 30;
	}
	
	#sec0 a{
		display: block;
	}

	#sec0 .txt_box{
		position:relative;
	}

	#sec0 h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.6rem;
		line-height:1;
		color: #fff;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
		padding: 46px 0 11px 4px;
	}

	#sec0 .eng_txt{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 7.6rem;
		color: #fff;
		line-height:0.9;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
	}

	#sec0 p.body_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.5rem;
		color: #fff;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
	}
	
	#sec0 .slash{
		display:block;
		width:46px;
		height:1px;
		background:#fff;
		transform:rotate(-45deg);
		margin:40px 0;
	}

	#sec0 li{
		width:400px;
		margin:16px 0;
	}

	#sec0 .img_box{
		line-height:0;
		overflow:hidden;
	}

	#sec0 a .img_box {
		transition: all 0.5s cubic-bezier(0, 0, 0.1, 0.99) 0s;
	}
	
	#sec0 a:hover .img_box {
		transform: scale(1.05);
		box-shadow: 0 0 20px 10px rgba(0,0,0,0.2);
	}
	
	
	#sec0 a .img_box img {
		transition: all 0.5s cubic-bezier(0, 0, 0.1, 0.99) 0s;
	}
	
	#sec0 a:hover .img_box img {
		transform: scale(1.1);
	}
	
	

	/* =========================================================================
 	sec1
	===========================================================================*/
	
	
	#sec1 {
		width: 100%;
		background: #F7F8FA;
		padding: 100px 0 140px;
		position:relative;
		overflow:hidden;
	}

	#sec1:before{
		content: "";
		display: block;
		width:50vw;
		height:50vw;
		background:url("../img/diversity_ling_bg.png") center;
		background-size:cover;
		position: absolute;
		top:0;
		left:0;
		transform:translate(-50%, -50%);
	}

	#sec1:after{
		content: "";
		display: block;
		width:80vw;
		height:80vw;
		background:url("../img/diversity_ling_bg.png") center;
		background-size:cover;
		position: absolute;
		top:100%;
		left:100%;
		transform:translate(-50%, -50%);
	}

	#sec1 p.body_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.5rem;
		letter-spacing: 0.1rem;
		padding:0 0 50px;
		text-align: center;
		font-feature-settings: 'palt';
	}

	#sec1 .h2_area {
		background: url(/global/img/slash_black.png) no-repeat center bottom;
		background-size:24px auto;
		margin: 0 0 20px;
		padding: 0 0 40px;
		text-align: center;
		position:relative;
		z-index:10;
	}
	
	#sec1 .h2_area h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:200;
		font-size: 4.4rem;
		font-feature-settings: 'palt';
	}
	
	#sec1 .h2_area h2 span{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		letter-spacing:0.2rem;
		line-height: 1;
		display:block;
	}

	#sec1 ul{
		display:flex;
		flex-wrap:wrap;
		width: 960px;
		gap:40px;
		margin:50px auto 0;
		position:relative;
		z-index:10;
	}
	
	#sec1 ul li{
		width:calc(50% - 20px);
		box-sizing:border-box;
		display:block;
		background:#fff;
		padding: 30px;
		border:1px solid #e5e5e5;
	}



	#sec1 h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.8rem;
		letter-spacing: 0.1rem;
		padding:18px 0;
		border-radius:4px;
		line-height:1.4;
		color:#fff;
		text-align: center;
		background:url("../img/diversity_bg2.gif");
		background-size:100% auto;
		font-feature-settings: 'palt';
	}

	
	#sec1 ul p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.5rem;
		line-height:1.8;
		padding: 16px 4% 0;
	}

	
	/* =========================================================================
 	sec2
	===========================================================================*/
	
	
	#sec2 {
		width: 100%;
		background:url("../img/diversity_bg.jpg") center;
		background-size:cover;
		padding: 100px 0 130px;
		position:relative;
	}

	#sec2:before{
		content: "";
		display: block;
		width:50vw;
		height:100%;
		background: linear-gradient( to right,  #00000000 0%, #1b1b1b78 75% );
		position: absolute;
		top:0;
		right:0;
	}

	#sec2 .wrapper{
		width:1000px;
		box-sizing:border-box;
		padding:0 0 0 550px;
	}
	
	#sec2 .txt_box{
		position:relative;
	}

	#sec2 h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.6rem;
		line-height:1;
		color: #fff;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
		padding: 0 0 11px 4px;
	}

	#sec2 .eng_txt{
		font-family: 'Roboto', sans-serif;
		font-weight: 200;
		font-size: 6.4rem;
		color: #fff;
		line-height:0.9;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
	}

	#sec2 .body_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.5rem;
		letter-spacing: 0.1rem;
		color:#fff;
		line-height:1.8;
		padding: 0 0 35px;
	}

	#sec2 .slash{
		display:block;
		width:46px;
		height:1px;
		background:#fff;
		transform:rotate(-45deg);
		margin: 30px 0;
	}

	#sec2 .prof_wrap{
		width:460px;
		box-sizing:border-box;
		padding:0 20px;
		position:relative;
	}

	#sec2 .prof_wrap:before{
		content: "";
		display: block;
		width: 100%;
		height:100%;
		background:url("../img/diversity_bg2.gif");
		background-size:cover;
		position: absolute;
		top: 20px;
		left: 0;

	}

	#sec2 .prof_wrap h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 300;
		font-size: 2.6rem;
		line-height:1.8;
		color: #fff;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
		position:relative;
	}

	#sec2 .prof_wrap h3 span{
		display:inline-block;
		background:#606271;
		padding:10px 20px 12px;
	}

	#sec2 .prof_wrap .name{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 3.2rem;
		line-height:1.4;
		color: #fff;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
		padding: 20px 20px 13px;
		position:relative;
	}

	#sec2 .prof_wrap .name span{
		display:block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 300;
		font-size: 1.6rem;
		line-height:1.4;
		color: #fff;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
	}

	#sec2 .prof_wrap ul{
		position:absolute;
		right:30px;
		bottom: 8px;
	}

	#sec2 .prof_wrap ul a{
		display: block;
		width:160px;
		box-sizing:border-box;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		padding: 8px 20px 8px;
		line-height:1;
		letter-spacing: 0.05rem;
		background: #fff;
		border-radius:20px;
		font-size: 1.8rem;
		color: #000;
		position: relative;
		font-feature-settings: 'palt';
	}

	#sec2 .prof_wrap ul a span{
		position:absolute;
		font-size: 1.4rem;
		top: 50%;
		right:16px;
		transform:translate(-50%, -50%);

	}

	#sec2 .prof_wrap ul a{
		
	}

	#sec2 .prof_wrap ul a{
		transition: all 0.5s cubic-bezier(0, 0, 0.1, 0.99) 0s;
	}

	#sec2 .prof_wrap ul a:hover{
		transform: scale(1.05);
		box-shadow: 0 0 20px 10px rgba(0,0,0,0.1);
	}

	/* =========================================================================
 	sec_job_info
	===========================================================================*/
	


	#sec_job_info {
		padding: 100px 0 150px;
		background:#fff;
	}
	
	#sec_job_info .h2_area {
		background: url(/global/img/slash_black.png) no-repeat center bottom;
		background-size:24px auto;
		margin: 0 0 60px;
		padding: 0 0 40px;
		text-align: center;
	}
	
	#sec_job_info .h2_area h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		font-size: 1.6rem;
	}
	
	#sec_job_info .h2_area span{
		font-family: 'Roboto', sans-serif;
		font-weight: 200;
		font-size: 5.6rem;
		line-height: 110%;
		display: inline-block;
	}
	
	#sec_job_info .diversity_box{
		position: relative;
		width: 1000px;
		margin: 0 auto;
		padding: 0 0 24px;
	}

	#sec_job_info table{
		width: 100%;
	}

	#sec_job_info th,#sec_job_info td{
		padding: 35px 5px;
		border-bottom: 1px solid #626262;
		vertical-align: top;
		text-align: left;
		font-size: 16px;
	}
	
	#sec_job_info tr:first-child th,#sec_job_info tr:first-child td{
		border-top: 2px solid #626262;
	}
	
	#sec_job_info tr:last-child th,#sec_job_info tr:last-child td{
		border-bottom: 2px solid #626262;
	}
	
	#sec_job_info th{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		width: 16%;
		padding: 35px 30px 35px 5px;
	}
	

	#sec_job_info .img_box{
		width:100%;
		margin: 0 0 20px;
	}
	
	#sec_job_info .info {
		font-size:1.4rem;
		margin: 30px 36px 50px;
	}
	#sec_job_info .info2 {
		font-size:1.4rem;
		margin: 24px 36px 50px;
	}

	
	#sec_job_info .box2{
		padding: 18px 34px;
		background: #e5e5e5;
		font-weight: 600;
		font-size: 16px;
	}

	#sec_job_info .note_txt{
		font-size: 1.4rem;
		letter-spacing: 0.1rem;
		line-height:1.8;
		text-indent:-1em;
		padding: 16px 0 0 1em;
	}

	
	#sec_job_info .diversity_box a:link {
	color: #587bde;
	text-decoration: underline !important; 
	}
	#sec_job_info .diversity_box a:visited {
		color: #587bde;
		text-decoration: underline;
	}
	#sec_job_info .diversity_box a:hover, a:active, a:focus { 
		text-decoration: underline;
	}
	

	
}



@-webkit-keyframes bline1 {
  			0% {
				transform:translate(0, -50%) scale(1);
				opacity:0;
  			}
			10% {
				opacity:1;
  			}
  			100% {
    			transform:translate(-80vw,-50%) scale(3);
				opacity:0;
  			}
		}

@-webkit-keyframes bline2 {
  			0% {
				transform:translate(0, -50%) scale(1);
				opacity:0;
  			}
			10% {
				opacity:1;
  			}
  			100% {
    			transform:translate(80vw,-50%) scale(2);
				opacity:0;
  			}
		}

@-webkit-keyframes bline3 {
  			0% {
				transform:translate(0, -50%) scale(1);
				opacity:0;
  			}
			10% {
				opacity:1;
  			}
  			100% {
    			transform:translate(-80vw,-50%) scale(2);
				opacity:0;
  			}
		}

@-webkit-keyframes bline4 {
  			0% {
				transform:translate(0, -50%) scale(1);
				opacity:0;
  			}
			10% {
				opacity:1;
  			}
  			100% {
    			transform:translate(80vw,-50%) scale(3.5);
				opacity:0;
  			}
		}
        
        
        
/* ============================================================
loading
==============================================================*/

@media (min-width: 762px) {

	#loading{
		background:#fff;
		width:100vw;
		height:100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
	}
	
    .loader {
      font-size: 12px;
      width: 0.5em;
      height: 0.5em;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 9999;
      -webkit-animation: load5 1.1s infinite ease;
      animation: load5 1.1s infinite ease;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
    }

    .loader span{
    	display:block;
    	font-size:12px;
    	color: #00478b;
    	margin: 48px 0 0 -23px;
        animation: loadA 0.2s infinite ease;
    }
    
}

@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #00478b, 1.8em -1.8em 0 0em rgba(0,71,139, 0.2), 2.5em 0em 0 0em rgba(0,71,139, 0.2), 1.75em 1.75em 0 0em rgba(0,71,139, 0.2), 0em 2.5em 0 0em rgba(0,71,139, 0.2), -1.8em 1.8em 0 0em rgba(0,71,139, 0.2), -2.6em 0em 0 0em rgba(0,71,139, 0.5), -1.8em -1.8em 0 0em rgba(0,71,139, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,71,139, 0.7), 1.8em -1.8em 0 0em #00478b, 2.5em 0em 0 0em rgba(0,71,139, 0.2), 1.75em 1.75em 0 0em rgba(0,71,139, 0.2), 0em 2.5em 0 0em rgba(0,71,139, 0.2), -1.8em 1.8em 0 0em rgba(0,71,139, 0.2), -2.6em 0em 0 0em rgba(0,71,139, 0.2), -1.8em -1.8em 0 0em rgba(0,71,139, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,71,139, 0.5), 1.8em -1.8em 0 0em rgba(0,71,139, 0.7), 2.5em 0em 0 0em #00478b, 1.75em 1.75em 0 0em rgba(0,71,139, 0.2), 0em 2.5em 0 0em rgba(0,71,139, 0.2), -1.8em 1.8em 0 0em rgba(0,71,139, 0.2), -2.6em 0em 0 0em rgba(0,71,139, 0.2), -1.8em -1.8em 0 0em rgba(0,71,139, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,71,139, 0.2), 1.8em -1.8em 0 0em rgba(0,71,139, 0.5), 2.5em 0em 0 0em rgba(0,71,139, 0.7), 1.75em 1.75em 0 0em #00478b, 0em 2.5em 0 0em rgba(0,71,139, 0.2), -1.8em 1.8em 0 0em rgba(0,71,139, 0.2), -2.6em 0em 0 0em rgba(0,71,139, 0.2), -1.8em -1.8em 0 0em rgba(0,71,139, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,71,139, 0.2), 1.8em -1.8em 0 0em rgba(0,71,139, 0.2), 2.5em 0em 0 0em rgba(0,71,139, 0.5), 1.75em 1.75em 0 0em rgba(0,71,139, 0.7), 0em 2.5em 0 0em #00478b, -1.8em 1.8em 0 0em rgba(0,71,139, 0.2), -2.6em 0em 0 0em rgba(0,71,139, 0.2), -1.8em -1.8em 0 0em rgba(0,71,139, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,71,139, 0.2), 1.8em -1.8em 0 0em rgba(0,71,139, 0.2), 2.5em 0em 0 0em rgba(0,71,139, 0.2), 1.75em 1.75em 0 0em rgba(0,71,139, 0.5), 0em 2.5em 0 0em rgba(0,71,139, 0.7), -1.8em 1.8em 0 0em #00478b, -2.6em 0em 0 0em rgba(0,71,139, 0.2), -1.8em -1.8em 0 0em rgba(0,71,139, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(0,71,139, 0.2), 1.8em -1.8em 0 0em rgba(0,71,139, 0.2), 2.5em 0em 0 0em rgba(0,71,139, 0.2), 1.75em 1.75em 0 0em rgba(0,71,139, 0.2), 0em 2.5em 0 0em rgba(0,71,139, 0.5), -1.8em 1.8em 0 0em rgba(0,71,139, 0.7), -2.6em 0em 0 0em #00478b, -1.8em -1.8em 0 0em rgba(0,71,139, 0.2);
  }
  87.5% {

    box-shadow: 0em -2.6em 0em 0em rgba(0,71,139, 0.2), 1.8em -1.8em 0 0em rgba(0,71,139, 0.2), 2.5em 0em 0 0em rgba(0,71,139, 0.2), 1.75em 1.75em 0 0em rgba(0,71,139, 0.2), 0em 2.5em 0 0em rgba(0,71,139, 0.2), -1.8em 1.8em 0 0em rgba(0,71,139, 0.5), -2.6em 0em 0 0em rgba(0,71,139, 0.7), -1.8em -1.8em 0 0em #00478b;
  }
}

@keyframes loadA {
  			0% {
    			opacity: 0;
  			}
  			50% {
    			opacity: 1;
  			}
  			100% {
    			opacity: 0;
  			}
		}

@keyframes fade_loop {
  			0% {
    			transform: scale(1);
				filter: brightness(1) invert(1);
  			}
  			30% {
    			transform: scale(1.1);
				filter: brightness(1) invert(1);
  			}
  			70% {
    			transform: scale(1.1);
				filter: brightness(1) invert(1);
  			}
			100% {
    			transform: scale(1);
				filter: brightness(1) invert(1);
  			}
		}
