@media screen and (min-width:1921px) and (max-width:3840px){
	
}

@media screen and (min-width:1280px) and (max-width:1440px){
	nav{
		width: 90vw;
	}
	.p0-container,.p3-container{
		width: 90vw;
	}
	.p3-box img{
		max-width: 100%;
		height: auto;
	}
	.p3-box{
		width: 24%;
	}
	.p3-c-l1{
		transform: translateX(-30%);
	}
	.p3-c-l2{
		transform: translateX(-30%);
	}
	.p3-c-r1{
		transform: translateX(30%);
	}
	.p3-c-r2{
		transform: translateX(30%);
	}
}	


@media screen and (min-width:1024px) and (max-width:1280px){
	nav{
		width: 90vw;
	}
	.p0-container,.p3-container{
		width: 90vw;
	}
	.p0-content h1 {
	    font-size: 60px;
	    margin: 0 0 30px 0;
	}
	.p1-container {
	    left: unset;
	}
	.p1-chara{
		display: none;
	}
	.p3-box img{
		max-width: 100%;
		height: auto;
	}
	.p3-box{
		width: 24%;
	}
	.p3-c-l1{
		transform: translateX(-45%);
	}
	.p3-c-l2{
		transform: translateX(-45%);
	}
	.p3-c-r1{
		transform: translateX(45%);
	}
	.p3-c-r2{
		transform: translateX(45%);
	}
}	

@media screen and (max-width:1025px){  
	
}

@media screen and (min-width:1025px) and (max-width:1440px){
	
}

@media screen and (min-width:1024px) and (max-width:1042px){

}	

@media screen and (max-width:1024px){
	
}

@media screen and (min-width:768px) and (max-width:1024px){
	#app-nav-btn{
		display: block;
	}
	nav{
		display: none;
		width: 100%;
		height: 100vh;
		top: 0px;
		left: 0;
		transform: unset;
		background-color: rgba(201, 239, 250, 1);
		justify-content: center;
		flex-direction: column;
  		align-items: center;
  		padding: 5%;
  		border-radius: 0;
	}
	.nav-left{
		width: 100%;
		height: auto;
		/*flex-direction: column;*/
	}
	.nav-left > img{
		width: 160px;
		margin: 10px auto 50px;
	}
	ul.nav-menu{
		width: 100%;
		height: auto;
		padding: 0 0 50px 0;
		margin: 0 0 20px 0px;
		flex-direction: column;
	}
	ul.nav-menu li{
		margin: 0 0 5px 0;
		width: max-content;
		height: auto;
		border-bottom: 1px solid #a0c9d5;
	}
	ul.nav-menu li:before{
		display: none;
	}
	ul.nav-menu li a{
		position: relative;
		padding: 0 25px;
		text-align: center;
		font-size: 18px;
		line-height: 60px;
		text-decoration: none;
		color: #2e2b2d;
		transition: 0.3s ease;
	}
	a.nav-play-btn{
		margin: 0 auto;
	}
	.p0-container,.p3-container{
		width: 90vw;
	}
	.p0-content h1 {
	    font-size: 60px;
	    margin: 0 0 30px 0;
	}
	.p1-container {
	    left: unset;
	}
	.p1-chara{
		display: none;
	}
	.p3-box img{
		max-width: 100%;
		height: auto;
	}
	.p3-box{
		width: 24%;
	}
	.p3-c-l1{
		transform: translateX(-45%);
	}
	.p3-c-l2{
		transform: translateX(-45%);
	}
	.p3-c-r1{
		transform: translateX(45%);
	}
	.p3-c-r2{
		transform: translateX(45%);
	}
	.p4-box img{
		height: auto;
	}
}

@media screen and (max-width:768px){
	.app{
		width: 100%;
		height: auto;
	}
	#app-nav-btn{
		display: block;
	}
	nav{
		display: none;
		width: 100%;
		height: 100vh;
		top: 0px;
		left: 0;
		transform: unset;
		background-color: rgba(201, 239, 250, 1);
		justify-content: center;
		flex-direction: column;
  		align-items: center;
  		padding: 5%;
  		border-radius: 0;
	}
	.nav-left{
		width: 100%;
		height: auto;
		/*flex-direction: column;*/
	}
	.nav-left > img{
		width: 160px;
		margin: 10px auto 50px;
	}
	ul.nav-menu{
		width: 100%;
		height: auto;
		padding: 0 0 50px 0;
		margin: 0 0 20px 0px;
		flex-direction: column;
	}
	ul.nav-menu li{
		margin: 0 0 5px 0;
		width: max-content;
		height: auto;
		border-bottom: 1px solid #a0c9d5;
	}
	ul.nav-menu li:before{
		display: none;
	}
	ul.nav-menu li a{
		position: relative;
		padding: 0 25px;
		text-align: center;
		font-size: 18px;
		line-height: 60px;
		text-decoration: none;
		color: #2e2b2d;
		transition: 0.3s ease;
	}
	a.nav-play-btn{
		margin: 0 auto;
	}
	section#p0{
		width: 100%;
		height: 100vh;
		align-items: flex-end;
		overflow: hidden;
	}
	section#p0{
		background: url('../img/p0bg-m.jpg') no-repeat center;
		background-size: cover;
	}
	.p0-container{
		width: 90%;
		height: auto;
		margin: 0px auto 0;
		justify-content: flex-start;
		align-items: center;
		z-index: 10;
	}
	.p0-content{
		width: 100%;
	}
	.p0-content h1{
		font-size: 40px;
		font-weight: 700;
		text-align: center;
		line-height: 40px;
		margin: 0 0 20px 0;
	}
	.p0-content p{
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		margin: 0 0 15px 0;
	}
	a.p0-play-btn {
	    width: 50%;
	    height: auto;
	    padding: 5px 0;
	    border-radius: 3px;
	    transition: 0.3s ease;
	    margin: 0 auto;
	}
	a.p0-play-btn i{
		font-size: 30px;
		margin-right: 10px;
		color: #38204e;;
	}
	a.p0-play-btn p{
		margin: 0;
		font-size: 18px;
		font-weight: 700;
		color: #38204e;
	}
	.p0-container > img{
		position: relative;
		display: block;
		width: 70%;
		margin: 20px auto;
	}
	#p0v{
		display: none;
	}
	.s11-flat{
		display: none;
	}
/*	.s11-flat-active{
		opacity: 1;
		visibility: visible;
		z-index: 5;
		width: 50vw;
		transform: translate(-50%,-50%);
	}*/
	section#p1{
		height: 100vh;
	}
	.p1-container{
		width: 90%;
		height: auto;
		margin: 0 auto;
		left: unset;
		top: unset;
	}
	.p1-container-active{
		top: unset;
	}
	.p1-content{
		width: 100%;
		height: auto;
		padding: 5%;
		background-color: #e2f8ff;
		border-radius: 3px;
		box-shadow: 0 5px 10px rgba(73, 101, 109, 0.65);
		z-index: 10;
	}
	.p1-content h3{
		font-size: 20px;
		line-height: 20px;
		margin: 0 0 5px 0;
	}
	.p1-content h1{
		font-size: 30px;
		line-height: 30px;
	}
	a.p1-yt{
		position: relative;
		width: 100%;
		height: auto;
		background-color: #131313;
		text-decoration: none;
		display: block;
		margin: 20px auto;
	}
	a.p1-yt iframe{
		z-index: 0;
		width: 100%;
		height: 100%;
	}
	.p1-content p{
		font-size: 14px;
		font-weight: 400;
		line-height: 26px;
	}
	.axe-1{
		top: -50%;
		right: -50%;
		transform: rotateZ(-10deg)scale(0.7);
	}
	.axe-1-active{
		transform: rotateZ(0deg)scale(0.7);
	}
	.axe-2{
		top: -50%;
		left: -50%;
		transform: rotateZ(10deg)scale(0.7);
	}
	.axe-2-active{
		transform: rotateZ(0deg)scale(0.7);
	}
	.p1-bg{
		width: 100%;
		height: 100vh;
	}
	.p1-chara-continer{
		display: none;
	}
	.p2-container{
		width: 90%;
		padding: 20px 0;
	}
	.p2-title{
		font-size: 30px;
		margin: 50px auto;
	}
	.p2-title-active{
		margin: 30px auto;
	}
	.c-tab-content{
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
	}
	.c-bimg{
		width: 100%;
		height: 40vh;
		padding-right: 0;
	}
	.c-bimg-pic{
		position: relative;
		display: block;
		right: unset;
		z-index: 0;
		height: 100%;
		margin: 0 auto;
	}
	.c-bimg-move{
		right: unset;
	}
	.c-bimg-sub{
		display: none;
	}
	.c-info{
		width: 100%;
		padding-left: 0px;
		margin-top: 10px;
	}
	.c-info h1{
		font-size: 30px;
		color: #e6d992;
		line-height: 30px;
		margin: 0 0 5px 0;
	}
	.c-info h2{
		font-size: 20px;
		color: #a68e5b;
		line-height: 20px;
		margin: 0 0 20px 0;
	}
	.c-info p{
		font-size: 14px;
		line-height: 22px;
		margin: 0 0 20px 0;
	}
	a.c-yt{
		width: 100%;
		height: auto;
	}
	a.c-yt iframe{
		width: 100%;
		height: 100%;
	}
	section#p3{
		height: auto;
		background-size: cover;
		padding: 20px 0;
	}
	.p3-container{
		width: 90%;
		margin: 0 auto;
	}
	.p3-title{
		width: 100%;
		height: auto;
		margin: 0 auto 20px;
	}
	.p3-title h1{
		font-size: 40px;
		line-height: 40px;
		width: max-content;
	}
	.p3-container > h3{
		font-size: 16px;
		line-height: 26px;
		font-weight: 400;
		margin: 0 auto 20px;
		width: 100%;
	}
	.p3-content{
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
	}
	.p3-box{
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}
	.p3-box:nth-child(1){
		margin-top: 0;
	}
	.p3-box:nth-child(2){
		margin-top: 0px;
	}
	.p3-box:nth-child(3){
		margin-top: 0px;
	}
	.p3-box:nth-child(4){
		margin-top: 0px;
	}
	.p3-box p{
		font-size: 14px;
		line-height: 22px;
	}
	.p3-c-l1,.p3-c-l2,.p3-c-r1,.p3-c-r2{
		display: none;
	}
	section#p4{
		height: auto;
	}
	.p4-container{
		width: 90%;
		padding: 20px 0;
	}
	.p4-container h1{
		font-size: 30px;
		line-height: 30px;
		margin: 0px auto 20px;
	}
	.p4-container h3{
		font-size: 16px;
		line-height: 26px;
		margin: 0px auto 25px;
	}
	.p4-content{
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
	}
	.p4-box{
		width: 100%;
		height: auto;
		margin: 0 0 20px 0;
	}
	.act-btn{
		width: 60vw;
		padding: 10px 0;
		font-size: 20px;
		margin: 20px auto;
	}
	.p5-fast-container{
		width: 100%;
		height: 70px;
	}
	.p5-fast-container a{
		margin: 0 10px;
	}
}

@media screen and (min-width:376px) and (max-width:540px){

}

@media screen and (min-width:325px) and (max-width:374px){

}

@media screen and (max-width:320px){
	
}