/*===============================================
　画面の横幅が480pxまで▼▼▼▼▼
===============================================*/


@media (max-width:761px){
	
	/* ============================================================
 	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);
	}
	
	/* ============================================================
 	main_wrap
	==============================================================*/
	

    #main_wrap {
		width:100%;
		background:url("/img/bg.jpg") no-repeat;
		background-size:cover;
		position:relative;
		overflow:hidden;
		padding: 0 0 120px;
		}

	
	#h1_box{
		width: 80vw;
		margin: 110px auto 30px;
		position:relative;
		z-index: 10;
	}

	#h1_box .eng_txt{
		display:block;
		font-family: 'Roboto', sans-serif;
		font-weight:400;
		font-size: 1.4rem;
		line-height:1.4;
		letter-spacing: 0.1rem;
		color: #454545;
		text-align: center;
		position:relative;
		font-feature-settings: 'palt';
		padding:0 0 10px;
	}
	
	#h1_box h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		font-size: 3.6rem;
		line-height: 1;
		letter-spacing: 0.4rem;
		text-align: center;
		color: #454545;
		position:relative;
		font-feature-settings: 'palt';
	}

	#h1_box h1 span{
		display:block;
		line-height: 1.4;
	}

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

	#main_wrap .body_txt_wrap{
		width: 79vw;
		margin: 90px auto 30px;
		position: relative;
		z-index: 10;
	}

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


	.img_line01,.img_line02,.img_line03,.img_line04,
	.img_line05,.img_line06,.img_line07,.img_line08{
		position:absolute;
		width:100vw;
		bottom:0;
		opacity: 0;
		z-index: 0;
	}

	.img_line01{
		animation: bline1s 60s infinite 1s;
	}
	.img_line02{
		animation: bline2s 50s infinite 6s;
	}
	.img_line03{
		animation: bline3s 70s infinite;
	}
	.img_line04{
		animation: bline4s 80s infinite 8s;
	}

	.img_line05{
		animation: bline1s 60s infinite 36s;
	}
	.img_line06{
		animation: bline2s 50s infinite 58s;
	}
	.img_line07{
		animation: bline3s 60s infinite 60s;
	}
	.img_line08{
		animation: bline4s 40s infinite 44s;
	}
	
	/* =========================================================================
 	movie
	===========================================================================*/
	
	
	#sec0 {
		width: 100%;
		padding: 80px 0;
		position:relative;
	}

	#sec0 a{
		display: block;
	}

	#sec0 .txt_box{
		position:relative;
		padding: 0 0 28px;
	}

	#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: 0 0 11px 4px;
	}

	#sec0 .eng_txt{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 5.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;
	}

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

	#sec1:before{
		content: "";
		display: block;
		width: 100vw;
		height: 100vw;
		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: 150vw;
		height: 150vw;
		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: 300;
		font-size: 2.7rem;
		letter-spacing: 0rem;
		font-feature-settings: 'palt';
	}
	
	#sec1 .h2_area h2 span{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		letter-spacing: 0.1rem;
		line-height: 1;
		display:block;
	}

	#sec1 ul{
		display:flex;
		flex-wrap:wrap;
		width: 90vw;
		gap: 20px;
		margin:50px auto 0;
		position:relative;
		z-index:10;
	}
	
	#sec1 ul li{
		width: 100%;
		box-sizing:border-box;
		display:block;
		background:#fff;
		padding: 20px 16px;
		border:1px solid #e5e5e5;
	}



	#sec1 h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		letter-spacing: 0.05rem;
		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 3% 0;
	}

	
	/* =========================================================================
 	sec2
	===========================================================================*/
	
	
	#sec2 {
		width: 100%;
		background:url("../img/diversity_bg.jpg") center;
		background-size:cover;
		padding: 140px 0 160px;
		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;
		text-align: center;
	}

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

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

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

	#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.2rem;
		line-height: 2;
		color: #fff;
		letter-spacing: 0.1rem;
		font-feature-settings: 'palt';
		position:relative;
	}

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

	#sec2 .prof_wrap .name{
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 2.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.4rem;
		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: 88%;
		margin: 18px auto;
		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.6rem;
		color: #000;
		position: relative;
		text-align: center;
		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{
		
	}


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


	#sec_job_info {
		padding: 100px 0;
		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: 4.2rem;
		line-height: 110%;
		display: inline-block;
	}
	
	#sec_job_info .h2_area p{
		padding: 60px 0 0;
	}
	
	#sec_job_info .diversity_box{
		/* font-size: 14px; */
		position: relative;
		width: 92vw;
		margin: 0 auto;
	}

	#sec_job_info table{
		width: 100%;
	}

	#sec_job_info th{
		display: block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		padding: 10px 0 10px 20px;
		text-align: left;
		color: #fff;
		font-size: 1.4rem;
		background: #a4a4a4;
	}

	#sec_job_info td{
		display: block;
		padding: 20px 5% 40px;
		text-align: left;
		font-size: 1.4rem;
		line-height: 1.8;
	}
	
	
	#sec_job_info td span{
		display: block;
		font-size: 1.4rem;
		padding: 5px 0 0;
		line-height: 160%;
	}
	
	#sec_job_info .info {
		margin: 30px 5% 80px;
		font-size: 1.3rem;
	}
	#sec_job_info .info2 {
		margin: 20px 5% 50px;
		font-size: 1.3rem;
	}

	
	#sec_job_info .box2{
		padding: 7px 16px;
		background: #e5e5e5;
		font-weight: 600;
		font-size:1.6rem;
	}

	#sec_job_info .note_txt{
		font-size: 1.3rem;
		letter-spacing: 0.1rem;
		line-height: 1.4;
		text-indent:-1em;
		padding: 20px 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;
	}


}

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

@-webkit-keyframes bline2s {
  			0% {
				transform:translate(0, 0) scale(1);
				opacity:0;
  			}
			10% {
				opacity:1;
  			}
  			100% {
    			transform:translate(0,50vh) scale(3.5);
				opacity:0;
  			}
		}

@-webkit-keyframes bline3s {
  			0% {
				transform:translate(0, 0) scale(1);
				opacity:0;
  			}
			10% {
				opacity:1;
  			}
  			100% {
    			transform:translate(0,-80vh) scale(2.5);
				opacity:0;
  			}
		}

@-webkit-keyframes bline4s {
  			0% {
				transform:translate(0, 0);
				opacity:0;
  			}
			10% {
				opacity:1;
  			}
  			100% {
    			transform:translate(0,60vh) scale(3);
				opacity:0;
  			}
		}



/*===============================================
　画面の横幅が350pxまで▼▼▼▼▼
===============================================*/

/*********  SPヘッダー iPhone5サイズ対応 ************/
@media (max-width:349px) {
	
	
}


/* ============================================================
loading
==============================================================*/

@media (max-width:761px){
	
	#loading{
		background:#fff;
		width:100vw;
		height:100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
	}
	
    .loader {
      font-size: 1.2rem;
      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:1.2rem;
    	color: #00478b;
    	margin: 48px 0 0 -23px;
        animation: loadA 0.2s infinite ease;
    }
    
}