@-webkit-keyframes gradientAnimation {
	0%   { background-position: 0% 30%, 0 0;}
	50%  { background-position: 100% 70%, 0 0;}
	100% { background-position: 0% 30%, 0 0;}
}
@keyframes gradientAnimation {
	0%   { background-position: 0% 30%, 0 0;}
	50%  { background-position: 100% 70%, 0 0;}
	100% { background-position: 0% 30%, 0 0;}
}


@media screen and (min-width: 769px) {
	
	/*---------------------------------------
	 * BtnAction
	---------------------------------------*/ 
	
	/* ZoomUp
	---------------------------------------*/ 
	
	.hoverzoom{
		overflow: hidden;
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.hoverzoom .img{
		transition: transform 0.3s;
	}
	.hoverzoom:hover .img{
		transform: scale(1.05);
	}
	
	/* Gradation
	---------------------------------------*/ 
	
	.hovergrad{
		position: relative;
		display: block;
	}
	.hovergrad span{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left: 0;
		z-index: 3;
		text-align: center;
	}
	
	.hovergrad::before{
		content:"";
		display: block;
		width: 100%;
		height: 100%;
		background: rgb(255,159,139);
		background: linear-gradient(90deg, rgba(255,159,139,1) 0%, rgba(255,20,18,1) 100%);
		position: absolute;
		top:0;
		left:0;
		z-index: 2;
		transition: opacity .3s;
	}
	.hovergrad::after{
		content:"";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
		background: rgb(55,205,211);
		background: linear-gradient(45deg, rgba(55,205,211,1) 0%, rgba(71,145,202,1) 100%);
	}
	.hovergrad:hover::before {
		opacity:0;
  	}
  	
  	
  	/* Border
	---------------------------------------*/ 
	
	.hoverborder{
		display: block;
		position: relative;
		overflow: hidden;
	}

	.hoverborder::before{
		content:"";
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background: transparent;
		box-sizing: border-box;
		transition: all .1s;
		border: 0px solid rgba(1,65,116,.7); 
	}
	
	.hoverborder:hover::before{
		border: 4px solid rgba(1,65,116,.7);
	}

  	
	
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/  
	 
	header{
		width: 100%;
		height: 74px;
		position: fixed;
		top:0;
		left:0;
		z-index: 1000;
		transition: background .3s;
	}
	header.onscroll{
		background: rgba(255,255,255,.9);
	}
	header .logo{
		width: 196px;
		margin: 25px 0 0 44px;
	}
	header nav{
		position: absolute;
		top:0;
		right:0;
		font-size: 1.3rem;
	}
	header nav ul{
		display: inline-block;
		vertical-align: middle;
	}
	header nav ul li{
		display: inline-block;
		margin-left:1.977vw;
	}
	header nav ul.sub-nav li a{
		width:18.302vw;
		max-width: 250px;
		height: 74px;
		color: #FFFFFF;
		line-height: 74px;
		text-align: center;
	}
	.menu-btn{
		display: none;
	}
	.sp-only{
		display: none;
	}


	/*---------------------------------------
	 * Discovery
	---------------------------------------*/ 	
	
	.discovery{
		width: 100%;
		height: 576px;
		background: linear-gradient(45deg, rgba(76,173,254,.7), rgba(151,255,237,.7), rgba(170,252,174,.7), rgba(214,255,150,.7), rgba(251,255,151,.7), rgba(255,227,151,.7), rgba(255,174,163,.7), rgba(255,169,216,.7), rgba(225,166,255,.7), rgba(181,190,255,.7)) 0 0 / 1000% no-repeat, url(../img/bg_discovery-01_pc.png) 50% / cover no-repeat;
		-webkit-animation: gradientAnimation 40s linear infinite;
		animation: gradientAnimation 40s linear infinite;
	}
	.discovery .inner{
		width: calc(100% - 80px);
		/*max-width: 890px;*/
		width: 890px;
		height: 100%;
		margin: 0 auto;
		position: relative;
	}
	.discovery .inner .bnr{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: block;
		width: 642px;
		height: 388px;
		margin: 0 auto;
		background: url(../img/img_discovery-01_pc.png) 50% no-repeat;
		background-size: 100%;
	}
	.discovery .inner .bnr a{
		width: 220px;
		height: 43px;
		color: #FFFFFF;
		line-height: 43px;
		left:50%;
		top:calc(50% + 120px);
		transform: translate(-50%,-50%);
	}
	
		
	
	/*---------------------------------------
	 * Entry
	---------------------------------------*/ 
	
	.entry{
		width: 100%;
		background: linear-gradient(90deg, rgba(255,159,139,1) 0%, rgba(255,20,18,1) 100%);
		padding: 32px 0;
	}
	.entry .inner{
		width: calc(100% - 80px);
		max-width: 1000px;
		min-width: 890px;
		margin: 0 auto;
	}
	.entry .inner .box{
		display: flex;
		justify-content: space-between;
	}
	.entry .inner .box .grid{
		width: 33.3333%;
		border-right:1px solid #FFFFFF;
		padding: 30px 0;
	}
	.entry .inner .box .grid:nth-child(3n){
		border-right:none;
	}
	.entry .inner .box .grid p{
		font-weight: 700;
		line-height: 1.6;
		text-align: center;
		color: #FFFFFF;
		margin: 0 0 10px;
	}
	.entry .inner .box .grid .btn{
		display: block;
		color: #FFFFFF;
		border:1px solid #FFFFFF;
		text-align: center;
		letter-spacing: 1px;
		width: 72%;
		padding: 15px 0;
		margin: 0 auto;	
		transition:color .2s, background .2s;
	}
	.entry .inner .box .grid .btn:hover{
		background: #FFFFFF;
		color: rgb(255,20,18);
	}
	.entry .inner .box .grid .banner{
		display: block;
		width: 214px;
		margin: 0 auto;
	}
	
	
	/*---------------------------------------
	 * Footer
	---------------------------------------*/ 
	
	footer{
		width: 100%;
		background: rgb(74,97,118);
		background: linear-gradient(45deg, rgba(74,97,118,1) 0%, rgba(33,41,51,1) 100%);
		padding: 103px 0 25px;
	}
	footer .inner{
		width: calc(100% - 40px);
		max-width: 890px;
		margin: 0 auto;
	}
	footer .inner .title{
		width: 323px;
		margin: 0 auto 41px;
	}
	footer .inner .list{
		display: flex;
		justify-content: space-between;
		margin: 0 0 118px;
	}
	footer .inner .list li{
		width: 23.5%;
	}
	footer .inner small{
		display: block;
		font-size: 1rem;
		text-align: center;
		color: #FFFFFF;
		font-weight: 200;
	}
	
	
	
}



@media screen and (max-width: 768px) {
	
	/*---------------------------------------
	 * BtnAction
	---------------------------------------*/  
		
	/* Gradation
	---------------------------------------*/ 
	.hovergrad{
		background: rgb(255,159,139);
		background: linear-gradient(90deg, rgba(255,159,139,1) 0%, rgba(255,20,18,1) 100%);
	}
	
	
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/  
	 
	header{
		width: 100%;
		height: 13.333vw;
		background: #FFFFFF;
		position: fixed;
		top:0;
		left:0;
		z-index: 1000;
	}
	
	header .logo{
		width: 38.067vw;
		padding: 4.667vw 0 0 4.4vw;
	}
	header nav{
		position: absolute;
		top:0;
		right:0;
		font-size: 1.3rem;
	}
	
	header nav ul.sub-nav li a{
		display: block;
		width:30.667vw;
		height: 13.333vw;
		font-size: 3.2vw;
		color: #FFFFFF;
		line-height: 13.333vw;
		text-align: center;
		background: rgb(255,159,139);
		background: linear-gradient(90deg, rgba(255,159,139,1) 0%, rgba(255,20,18,1) 100%);
	}
	
	
	/* Menu
	---------------------------------------*/ 
	
	header nav ul.main-nav {
		
		width: 100%;
		height: calc(100vh - 13.333vw);
		position: fixed;
		top:13.333vw;
		left: -100%;
		background: #003969;
		z-index: 1000;
		padding: 14vw 6.4vw 0;
		box-sizing: border-box;
		color: #FFFFFF;
		font-size: 4vw;
	}
	header nav ul.main-nav li{
		
		border-bottom: 1px solid #FFFFFF;
	}
	header nav ul.main-nav li a{
		display: block;
		width: 100%;
		padding: 6.667vw 0;
	}
	header nav ul.main-nav li.entry-btn{
		border: none;
	}
	header nav ul.main-nav li.entry-btn a{
		margin: 14vw 0 0;
		padding: 5.667vw 0;
		background: rgb(255,159,139);
		background: linear-gradient(90deg, rgba(255,159,139,1) 0%, rgba(255,20,18,1) 100%);
		border-bottom: none;
		text-align: center;
		font-size: 5vw;
		letter-spacing: 1px;
		
	}
	
	
	/* MenuBtn
	---------------------------------------*/ 
	
	.menu-btn{
		width: 13.333vw;
		height: 13.333vw;
		position: absolute;
		top:0px;
		right:30.667vw;
		cursor: pointer;
		z-index: 2000;
		padding: 5.3vw 0 0;
		background: #CCCCCC;
		transition: background-color linear .2s;
		box-sizing: border-box;
	}
	.menu-btn.on{
		background: #003969;
	}
	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	.menu-trigger {
	  position: relative;
	  width: 4.533vw;
	  height: 2.667vw;
	  margin: 0 auto;
	  display: block;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 0.267vw;
	  background-color: #222222;
	}
	.menu-btn.on .menu-trigger span{
		background-color: #FFFFFF;
	}
	/*
	.menu-trigger.active span {
	  background-color: #FFFFFF;
	}
	*/
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 1.2vw;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}
	
	
	/* Animation*/
	
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(1.2vw) rotate(-45deg);
	  transform: translateY(1.2vw) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-1.2vw) rotate(45deg);
	  transform: translateY(-1.2vw) rotate(45deg);
	}
	
	
	/*---------------------------------------
	 * Main
	---------------------------------------*/ 
	
	.main{
		margin-top: 13.333vw;
	}
	

	/*---------------------------------------
	 * Discovery
	---------------------------------------*/ 	
	
	.discovery{
		width: 100%;
		height: 76.8vw;
		background: linear-gradient(45deg, rgba(76,173,254,.7), rgba(151,255,237,.7), rgba(170,252,174,.7), rgba(214,255,150,.7), rgba(251,255,151,.7), rgba(255,227,151,.7), rgba(255,174,163,.7), rgba(255,169,216,.7), rgba(225,166,255,.7), rgba(181,190,255,.7)) 0 0 / 1000% no-repeat, url(../img/bg_discovery-01_sp.png) 50% / cover no-repeat;
		-webkit-animation: gradientAnimation 40s ease infinite;
		animation: gradientAnimation 40s ease infinite;
	}
	.discovery .inner{
		width: calc(100% - 12.8vw);
		height: 100%;
		margin: 0 auto;
		position: relative;
	}
	.discovery .inner .bnr{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		display: block;
		width: 84vw;
		height: 57.333vw;
		background: url(../img/img_discovery-01_sp.png) 50% no-repeat;
		background-size: 100%;
	}
	.discovery .inner .bnr a{
		width:44vw;
		height:8vw;
		color: #FFFFFF;
		font-size: 1.467vw;
		line-height: 8vw;
		position: absolute;
		text-align: center;
		left:50%;
		top:calc(50% + 17.467vw);
		transform: translate(-50%,-50%);
		
	}
	
	

	/*---------------------------------------
	 * Entry
	---------------------------------------*/ 
	
	.entry{
		width: 100%;
		background: linear-gradient(90deg, rgba(255,159,139,1) 0%, rgba(255,20,18,1) 100%);
		padding: 3.333vw 0;
	}
	.entry .inner{
		width: 100%;
		margin: 0 auto;
	}
	.entry .inner .box{
		
	}
	.entry .inner .box .grid{
		width: calc(100% - 6.4vw);
		padding: 3.333vw 0;
		margin: 0 auto;
	}
	.entry .inner .box .banner-grid{
		width: 100%;
	}
	.entry .inner .box .grid p{
		font-weight: 700;
		line-height: 1.6;
		font-size: 3.467vw;
		text-align: center;
		color: #FFFFFF;
		margin: 0 0 2vw;
	}
	.entry .inner .box .grid .btn{
		display: block;
		color: #FFFFFF;
		border:1px solid #FFFFFF;
		text-align: center;
		font-size: 3.467vw;
		letter-spacing: 1px;
		width: 72%;
		padding: 2vw 0;
		margin: 0 auto;	
		/*transition:color .2s, background .2s;*/
	}
	/*
	.entry .inner .box .grid .btn:hover{
		background: #FFFFFF;
		color: rgb(255,20,18);
	}
	*/
	.entry .inner .box .grid .banner{
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	
	
	/*---------------------------------------
	 * Footer
	---------------------------------------*/ 
	
	footer{
		width: 100%;
		background: rgb(74,97,118);
		background: linear-gradient(45deg, rgba(74,97,118,1) 0%, rgba(33,41,51,1) 100%);
		padding: 10vw 0 3.333vw;
	}
	footer .inner{
		width: calc(100% - 12.8vw);
		margin: 0 auto;
	}
	footer .inner .title{
		width: 72.933vw;
		margin: 0 auto 7.2vw;
	}
	footer .inner .list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 0 10vw;
	}
	footer .inner .list li{
		width: 49%;
		margin: 0 0 2%;
	}
	footer .inner small{
		display: block;
		font-size: 1.333vw;
		line-height: 1.4;
		text-align: center;
		color: #FFFFFF;
		font-weight: 200;
	}
	
}