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

@media (min-width: 762px) {
	
	
	/* =========================================================================
 	common tilte
	===========================================================================*/
	
	.line_box{
		position:relative;
		text-align: center;
		padding: 0 0 26px;
	}
	
	.line_box .ttl_eng{
		font-family: 'Ubuntu', 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 tilte
	===========================================================================*/
	
	#main_ttl_wrap{
		width: 100%;
		height:260px;
		overflow: hidden;
		position: relative;
	}
	
	#main_ttl_wrap .main_ttl_img{
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%) scale(1);
		
	}
	
	#main_ttl_wrap .main_ttl_img_act{
		transition: all 40s cubic-bezier(0,0,0,0) 0s;
		transform:translate(-50%, -50%) scale(1.4);
	}
	
	#main_ttl_wrap #main_ttl_box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%);
	}

	
	#main_ttl_wrap .m_line_box{
		position:relative;
		text-align: center;
	}
	
	#main_ttl_wrap .m_line_box:before{
		content: "";
		display: block;
		width: 0;
		height: 1px;
		background: #fff;
		position: absolute;
		bottom: 38%;
		left: 50%;
		transform:translate(-50%, -50%);
		transition: all 1s cubic-bezier(0, 0, 0.1, 1.22) 0s;
	}
	
	#main_ttl_wrap .m_line_box_act:before{
		width: 100%;
	}
	
	#main_ttl_wrap h1{
		font-family: 'Noto Serif JP', serif;
		font-weight: 400;
		font-size: 2.8rem;
		display: inline-block;
		padding: 0 20px 20px;
		line-height: 100%;
		color: #fff;
	}
	
	#main_ttl_wrap span{
		font-family: 'Ubuntu', sans-serif;
		font-weight: 400;
		font-size: 1.4rem;
		display: block;
		padding: 10px 10px 0;
		line-height: 100%;
		color: #fff;
	}
	
	#main_body_wrap{
		width: 100%;
		background: #f0faff;
		padding: 60px 0;
	}
	
	#main_body_wrap p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.6rem;
		line-height: 200%;
		text-align: center;
	}
	
	#main_body_wrap2{
		width: 100%;
		padding: 50px 0;
	}
	
	#main_body_wrap2 p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.5rem;
		letter-spacing: 1px;
		line-height: 200%;
		text-align: center;
	}
	
	/* =========================================================================
 	third main tilte
	===========================================================================*/
	
	#main_ttl_box2{
		width: 910px;
		margin: -100px auto 0;
		padding: 40px 0 0;
		background: #fff;
		position: relative;
	}
	
	#main_ttl_box2 h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 3.4rem;
		display: inline-block;
		padding: 10px 20px 0;
		line-height: 100%;
		letter-spacing:4px;
		color: #57a9e0;
	}
	
	#main_ttl_box2 h1.ls0{
		letter-spacing:0;
	}

	#third_con .line_box .ttl_eng{
		font-size: 2.4rem;
		/* font-weight: 400; */
		letter-spacing: 1px;
	}
	
	/* =========================================================================
 	third nav
	===========================================================================*/
	
	#third_con #nav_swiper_ttl{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 2.0rem;
		color: #000;
		text-align: center;
	}

	
	#third_con .nav_swiper_wrap{
		width: 100%;
		background: #f2f2f5;
		padding: 30px 0 40px;
	}
	
	#third_con .nav_swiper_wrap .swiper-wrapper{
		width: 1096px;
		margin: 10px auto 0;
		display: flex;
		justify-content:space-between;
	}
	
	.con_ryugaku .nav_swiper_wrap .swiper-wrapper{
		width: 490px !important;
	}
	
	
	#third_con .nav_swiper_wrap .swiper-slide{
		width: 100px;
	}
	#third_con .nav_swiper_wrap .img_box{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin: 0 auto 2px;
		overflow: hidden;
	}
	
	#third_con .nav_swiper_wrap h3{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.2rem;
		text-align: center;
		transition: all 0.5s ease 0s;
	}

	#third_con .nav_swiper_wrap a{
		display:block;
	}
	#third_con .nav_swiper_wrap a .img_box{
		transition: all 0.5s cubic-bezier(0.13, 0.36, 0.5, 1.9) 0s;
	}

	#third_con .nav_swiper_wrap a:hover .img_box{
		opacity: 0.5;
		transform:scale(1.1);
	}

	#third_con .nav_swiper_wrap a:hover h3{
		color:#57a9e0;

	}
		
	
	/* =========================================================================
 	common scroll
	===========================================================================*/
	
	.scroll_v{
			z-index: 9;
			width: 50px;
			position: absolute;
			bottom: 20px;
			left: 50px;
	}

	.scroll_v a {
			display:block;
			font-family: 'Roboto', sans-serif;
			font-weight: 500;
			font-size: 1.4rem;
			color: #fff;
			letter-spacing: 2px;
	}

	.scroll_v a span{
			display: block;
			width: 2px;
			background: rgba(255,255,255,1);
			padding: 37px 0;
			margin: 0 0 4px 4px;
			text-align: center;
			position: relative;
	}

  	.scroll_v a span:after {
  			position: absolute;
  			bottom: 4px;
  			right: -12px;
  			content:"";
  			width: 16px;
  			height: 2px;
  			border-radius: 50%;
  			background: #ffffff;
  			transform: rotate(-45deg);
  	}
	
	
	
	/* =========================================================================
 	LINK
	===========================================================================*/
	
	
	
	
		/* =========================================================================
 	inview anime
	===========================================================================*/
	.lazy_fadein{
		opacity:0;
	}
	.lazy_fadein_act{
		opacity:1;
		transition: all 0.5s cubic-bezier(0, 0, 0, 0);
	}
	
	.lazy_fadeinLeft_A,.lazy_fadeinLeft_B,.lazy_fadeinLeft_C,.lazy_fadeinLeft_D{
		opacity:0;
		transform: translate(-50px,0); 
	}
	.lazy_fadeinRight_A,.lazy_fadeinRight_B,.lazy_fadeinRight_C,.lazy_fadeinRight_D{
		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;

	}
	
	
	/* =========================================================================
 	BTN
	===========================================================================*/
	
	.btn_blue a{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.3rem;
		color:#fff;
		background:#add6ef;
		padding:5px 50px 7px 30px;
		border-radius:20px;
		position:relative;
		transition: all 0.5s ease 0s;
	}

	.btn_blue a:before{
		content: "";
		display: block;
		width: 6px;
		height:6px;
		border-right:solid 1px #fff;
		border-bottom:solid 1px #fff;
		position: absolute;
		top: 50%;
		left: 90%;
		transform:translate(-50%, -50%) rotate(-45deg);
	}

	.btn_blue a:hover{
		background:#ff9600;
	}


	.btn_more a{
		display:inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		letter-spacing:0.1rem;
		line-height:100%;
		padding: 19px 121px 21px;
		border-radius: 50px;
		color:#fff;
		box-shadow: 14px 20px 20px 0 rgba(16,36,71,0.2);
		background: linear-gradient( to right,  #28679e 25%, #5aa5a1 75% );
		transition: all 0.5s cubic-bezier(0, 0, 0.31, 1.66) 0s;
	}

	.btn_more a:hover{
		transform: scale(1.1);
	}
	
	
	
}


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

@media (min-width: 762px) {
    .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: #f0821e;
    	margin: 48px 0 0 -23px;
    }
    
}

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



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

@media (-ms-high-contrast:none) {

	.line_box .ttl_eng{
		font-family: 'Ubuntu', sans-serif;
		font-weight: 200;
		font-size: 5.2rem;
		background:none;
		color:#57a9e0;
		line-height: 100%;
	}

	#third_con .line_box .ttl_eng{
		font-size: 2.4rem;
	}
	
}


	
/* ============================================================
keyframe
==============================================================*/
	
@keyframes sdb {
  			0% {
    			transform: transl