
@media screen and (min-width:1921px) and (max-width:3840px){
	header{
		width: 100%;
		max-width: 1920px;
	}
	#p0v,#p2v{
		top: 50%;
		right: unset;
		left: 50%;
		bottom: unset;
		transform: translate(-50%,-50%);
		min-width: unset;
		min-height: unset;
		max-width: 1920px;
	}
	.p5-1,.p5-3,footer{
		max-width: 1920px;
		margin: 0 auto;
	}
}

@media screen and (min-width:1280px) and (max-width:1440px){
	.p2-container{
		width: 95%;
	}
	.chara-container{
		width: 100%;
	}
}	


@media screen and (min-width:1024px) and (max-width:1280px){
	.p2-container{
		width: 95%;
	}
	.chara-container{
		width: 100%;
	}
	.p4-container{
		width: 100%;
	}
	.p4-box {
	    transform: scale(0.9);
	}
}	

@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){
	header{
		display: none;
	} 
	.m-nav{
		display: block;
	}
	section#p4 {
	    height: auto;
	}
	.webp section#p4{
		background: url('../imgp/p4bg.webp') no-repeat center top #270d0d;
	}
	.no-webp section#p4{
		background: url('../img/p4bg.jpg') no-repeat center top #270d0d;
	}
	.p4-container {
	    width: 95%;
	    height: 100%;
	    padding-top: 285px;
	}
	.p4-title {
	    width: 100%;
	    height: auto;
	}
	.p4-title h1 {
	    font-size: 20px;
	}
	.p4-title p {
	    line-height: 24px;
	    font-size: 16px;
	}
	.p4-content {
	    width: 100%;
	    height: auto;
	    margin: 35px auto 0;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	}
	.p4-box {
	    margin-bottom: 50px;
	}
	.p4-box-img {
	    width: 100%;
	    height: auto;
	}
	.p4-box-img img {
	    max-width: 100%;
	}
	.p4-box-info {
	    margin: 5px auto 0;
	}
	.p5-2-container h1{
		width: 90%;
		margin: 0 auto;
	}
}

@media screen and (min-width:768px) and (max-width:1024px){
	.p1-container {
	    width: 90%;
	    margin: 0 auto;
	}
	.p1-container p {
	    font-size: 18px;
	}
	.p2-container {
	    width: 100%;
	}
	.p2-content {
	    margin-left: 25px;
	}
	#p2v{
		top: 50%;
		right: unset;
		left: 60%;
		bottom: unset;
		transform: translate(-50%,-50%);
	}
	.p3-container {
	    width: 95%;
	}
	.p3-title{
		width: 100%;
	}
	.p3-title h1 {
	    font-size: 24px;
	}
	.chara-container{
		width: 100%;
	}
	
}

@media screen and (max-width:767px){
	section#p0 {
	    height: 90vh;
	    overflow: hidden;
	}
	.p0-container {
	    width: 100%;
	    margin: 0 auto;
	}
	.p0-content {
	    position: relative;
	    width: 95%;
		margin: 0 auto;
	}
	.p0-top{
		width: 100%;
	}
	.p0-top h3{
		display: none;
	}
	a.logo-container {
	    margin: 0;
	    width: 100%;
	}
	a.logo-container img{
		max-width: 35%;
	}
	
	.p0-title h2 {
	    font-size: 26px;
	}
	.p0-title h1 {
	    font-size: 40px;
	}
	.cb-download-container{
		display: none;
	}
	.m-regis-btn{
		display: block;
	}
	.p0-coverbg {
		left: 50%;
		transform: translateX(-50%);
	    bottom: 0;
	}
	#p0v{
		top: 50%;
		right: unset;
		left: 50%;
		bottom: unset;
		transform: translate(-50%,-50%);
	}

	section#p1 {
	    height: 400px;
	}
	.p1-container {
		width: 90%;
	    height: 400px;
	    margin: 0 auto;
	}
	.p1-container h1 {
	    font-size: 20px;
	}
	.p1-container p {
	    font-size: 16px;
	}

	section#p2 {
	    height: auto;
	}
	.p2-container {
		width: 95%;
	    height: 100%;
	    margin: 0 auto;
	    flex-direction: unset;
	}
	.p2-content {
	    width: 100%;
	    flex-direction: initial;
	    padding-top: 80%;
	    margin: 0 auto;
	}
	.p2-content p {
	    font-size: 16px;
	    line-height: 30px;
	    text-align: center;
	}
	.p2-video {
	    width: 100%;
	    height: 212px;
	    margin: 10px auto;
	    padding: 0px;
	    background-size: cover !important;
	}
	.p2-video-container {
	    position: relative;
	    width: 300px;
	    height: 169px;
	    margin: 30px auto;
	}
	.p2-video-container a {
	    width: 100%;
	    height: 100%;
	}
	.p2-video-container iframe {
	    position: relative;
	    width: 100%;
	    height: 169px;
	}
	#p2v{
		top: 50%;
		right: unset;
		left: 45%;
		bottom: unset;
		transform: translate(-50%,-50%);
	}

	section#p3 {
	    height: auto;
	}
	.p3-container {
	    width: 100%;
	    height: 100%;
	}
	.p3-title {
	    width: 90%;
	}
	.p3-title h1 {
	    padding: 0px 0 10px 0;
	    font-size: 20px;
	}
	.p3-title p {
	    display: none;
	}
	.chara-container {
		width: 100%;
	    height: auto;
	    padding-top: 200px;
	}
	.chara-content {
	    height: auto;
	}
	.chara-info {
	    width: 100%;
	    min-height: 200px;
	    margin: 270px auto 0;
	    padding: 15px 20px;
	}

	.p4-box {
	    width: 100%;
	    height: auto;
	    margin-bottom: 50px;
	}
	.p4-box-img {
	    width: 100%;
	    height: auto;
	}
	.p4-box-img img {
	    max-width: 100%;
	}
	.p4-box-info {
	    margin: 5px auto 0;
	}

	.p5-1 {
	    height: 360px;
	}
	.p5-1-container img {
	    max-width: 80%;
	}
	.p5-2 {
	    height: 170px;
	}
	.p5-2-container{
		flex-direction: inherit;
	}
	
	.p5-2-container h1 {
	    width: 95%;
	    line-height: 30px;
	    font-size: 20px;
	    letter-spacing: 5px;
	}
	.p5-3 {
	    height: 150px;
	}
	.p5-3-container .m-regis-btn{
		z-index: 100;
	}
}

@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){
	.p0-title {
	    margin: 40px 0 40px;
	}
	.p0-title h2 {
	    font-size: 20px;
	}
	.p0-title h1 {
	    font-size: 34px;
	}

	.p2-container {
	    width: 100%;
	    height: 100%;
	    margin: 0 auto;
	    flex-direction: unset;
	}
	.p2-video {
	    width: 100%;
	    height: 212px;
	    margin: 10px auto;
	    padding: 0;
	    background-size: cover !important;
	}
	.p2-video-container {
	    position: relative;
	    width: 300px;
	    height: 169px;
	    margin: 30px auto;
	}
}

