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

@media (min-width: 762px) {
	
	
	/* =========================================================================
 	common tilte
	===========================================================================*/
	
	.line_box{
		position:relative;
		text-align: center;
		padding: 0 0 26px;
	}
	
	.line_box .ttl_eng{
		font-family: 'Roboto', sans-serif;
		font-weight: 200;
		font-size: 5.2rem;
		background: linear-gradient( to right,  #7dbfeb 25%, #46a5e4 75% );
		-webkit-background-clip: text;
		color: transparent;
		line-height:120%;
	}
	
	.line_box:before{
		content: "";
		display: block;
		width: 0;
		height: 1px;
		background: #57a9e0;
		position: absolute;
		bottom:0;
		left: 50%;
		transform:translate(-50%,0);
		transition: all 0.5s cubic-bezier(0, 0, 0.1, 1.22) 0s;
	}
	
	.line_box_act:before{
		width: 36px;
	}
	
	
	/* =========================================================================
 	second main title
	===========================================================================*/
	

	#sec_main_wrap{
		width:100%;
		height: 400px;
		overflow:hidden;
		position: relative;
	}

	 #sec_main_wrap:before{
		width:1300px;
		 height: 400px;
		content: "";
        display: block;
        background: linear-gradient( to right,  #005292 10%, #00529200 100% );
        position: absolute;
        top: 0;
        left:0;
	}

	
	#sec_main_wrap #copy_box{
		position: absolute;
		top: 56%;
		left:100px;
		transform: translate(0, -50%);
	}

	#sec_main_wrap #copy_box p{
		display:inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
		color:#fff;
		line-height:1.4;
		padding:2px 16px 4px;
		border:1px solid #fff;
	}

	#sec_main_wrap #copy_box h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 4.6rem;
		letter-spacing: 0.1rem;
		color:#fff;
		line-height:1.4;
		border-bottom:2px solid #fff;
	}
	
	#sec_main_wrap #copy_box h1 span{
		font-size: 3.2rem;
		padding:0 0 0 6px;
	}
    
	
	

	
	
	/* =========================================================================
 	common scroll
	===========================================================================*/
	
	.scroll_v{
			z-index: 7000;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform:translate(-50%, 0);
	}

	.scroll_v a {
			display:block;
			width: 14px;
			text-align:center;
	}

	.scroll_v a span{
			display: block;
			width: 2px;
			background: rgba(255,255,255,0.5);
			padding: 67px 0px;
			margin: 3px 0 0 6px;
			text-align: center;
			position: relative;
	}
		
	.scroll_v a span:before {
  			position: absolute;
  			top: 0;
  			right: 0;
  			content:"";
  			border-radius: 2px;
  			width: 2px;
  			height: 16px;
  			background-color: #fff;
  			animation: sdb 3s infinite;
  	}
	
	
	/* =========================================================================
 	LINK
	===========================================================================*/
	
	.btn_list a{
         display: block;
         font-family: 'Roboto', sans-serif;
         font-weight: 400;
         font-size: 1.4rem;
         color: #fff;
         letter-spacing: 2px;
        
         padding: 24px 34px;
         width: 190px;
         position: relative;
    }

    .btn_list a:after{
    	content: "";
		display: block;
		width: 10px;
		height:10px;
		border-right:solid 1px #fff;
		border-bottom:solid 1px #fff;
		position: absolute;
		top: 50%;
		left: 86%;
		transform:translate(-50%, -50%) rotate(-45deg);
		transition: all 0.25s ease-out 0s;
    }

    .btn_list a:hover:after{
    	left: 90%;
    	
    }

    .btn_list li{
    	width: 258px;
    	 background: #0096d7;
    	 position:relative;
    	 transition: all 0.5s cubic-bezier(0.13, 0.36, 0.22, 0.96) 0s;
    }

    .btn_list li:before{
    	content: "";
		display: block;
		width: 0;
		height:100%;
		background:#005292;
		position: absolute;
		left:0;
		top:0;
		transition: all 0.25s cubic-bezier(0.13, 0.36, 0.22, 0.96) 0s;
    }

    .btn_list li:hover{
    	transform: translate(-5px,-5px);
    	box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.4);
    }

    .btn_list li:hover:before{
    	width: 100%;
    }
	
	
	
	/* =========================================================================
 	inview anime
	===========================================================================*/
	.lazy_fadein{
		opacity:0;
	}
	.lazy_fadein_act{
		opacity:1;
		transition: all 0.5s cubic-bezier(0, 0, 0, 0);
	}
	
	.lazy_fadeinLeft{
		opacity:0;
		transform: translate(-50px,0); 
	}
	.lazy_fadeinRight{
		opacity:0;
		transform: translate(50px,0); 
	}
	
	.lazy_fadeinLeft_active,.lazy_fadeinRight_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0,0); 
		opacity:1;
	}

	
	.lazy_fadeinUp,.lazy_fadeinUpA,.lazy_fadeinUpB,.lazy_fadeinUpC,.lazy_fadeinUpD{
		opacity:0;
		transform: translate(0,10px); 
	}
	
	
	.lazy_fadeinUp_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0,0); 
		opacity:1;
	}
	
	.lazy_fadeinDownA,.lazy_fadeinDownB,.lazy_fadeinDownC,.lazy_fadeinDownD{
		opacity:0;
		transform: translate(0,-10px); 
	}
	
	.lazy_fadeinDown_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate(0,0); 
		opacity:1;
	}
	
	.lazy_fadeinUpCenter{
		opacity:0;
		transform:translate(-50%, 10%);
	}
	
	.lazy_fadeinUpCenter_active{
		transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform:translate(-50%, 0);
		opacity:1;
	}
	
	.lazy_fadeinScaleA,.lazy_fadeinScaleB,.lazy_fadeinScaleC,.lazy_fadeinScaleD{
		opacity:0;
		transform: scale(1.2);
	}
	.lazy_fadeinScale_active{
		transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: scale(1);
		opacity:1;
	}
	
	
	
}


/* ============================================================
loading
==============================================================*/
@media (min-width: 762px) {
	#loading{
		width:100vw;
		height:100vh;
		position:relative;
		background: #fff;
	}

	.loadci{
		display:block;
		position: absolute;
		top: calc(50%);
		left: 50%;
		transform:translate(-50%, -50%);
		width: 300px;
	}

	.loadci img{
		animation: loadcia 2.0s cubic-bezier(0, 0, 0.15, 1);
	}
	
	.loader,
	.loader:before,
	.loader:after {
	  border-radius: 50%;
	  width: 1.0em;
	  height: 1.0em;
	  position: absolute;
	  top: calc(50% + 25px);
	  left:0;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  -webkit-animation: load7 1.8s infinite ease-in-out;
	  animation: load7 1.8s infinite ease-in-out;
	}
	.loader {
	  color: #005292;
	  font-size: 10px;
	  margin: 0 auto;
	  position: relative;
	  text-indent: -9999em;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	  -webkit-animation-delay: -0.16s;
	  animation-delay: -0.16s;
	}
	.loader:before,
	.loader:after {
	  content: '';
	  position: absolute;
	  top: 0;
	}
	.loader:before {
	  left: -2.5em;
	  -webkit-animation-delay: -0.32s;
	  animation-delay: -0.32s;
	}
	.loader:after {
	  left: 2.5em;
	}

	.load_txt {
		display:block;
		font-size: 1.2rem;
		color: #005292;
		position: absolute;
		top: calc(50% + 82px);
		left: 50%;
		transform:translate(-50%, -50%);
		animation: loadtxt 1.5s infinite ease-in-out;
	}
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes loadcia {
	0% {
		transform: translate(0, 30px);
		opacity: 0;
	}
	30% {
		transform: translate(0, 30px);
		opacity: 0;
	}
	100% {
		transform: translate(0,0);
		opacity: 1;
	}
}
@keyframes loadtxt {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/* ============================================================
keyframe
==============================================================*/

	
@keyframes sdb {
  			0% {
    			transform: translate(0, -10px);
    			opacity: 0;
    			height:10px;
  			}
  			30% {
    			opacity: 1;
  			}
  			80% {
    			transform: translate(0, 100px);
    			opacity: 0;
    			height:60px;
  			}
  			100% {
    			opacity: 0;
  			}
		}