@media screen and (min-width:1921px) and (max-width:3840px){
	body{
		background-color: #000;
	}
	.app{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	section#p1{
		background-size: cover;
	}
	.p1-layer-2 img{
		width: 100%;
	}
	section#p2{
		background-size: cover;
	}
	section#p3{
		background-size: cover;
	}
}

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


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

}	

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

}



@media screen and (max-width:1366px){
	nav{
		width: 95%;
	}
	.p3-container{
		width: 95vw;
	}
	.p3-row{
		width: 100%;
		padding: 0;
	}
	.p3-box{
		width: 32%;
	}
	section#p4{
	    background-size: cover;
    	background-position: -50%;
	}
	.p4-container{
		width: 95vw;
	}
}

@media screen and (max-width:1024px){
	#app-nav-btn{
		display: block;
	}
	nav{
		display: none;
		width: 100%;
		height: 100vh;
		top: 0px;
		left: 0;
		transform: unset;
  		transition: unset;
  		border-radius: 0px;
  		background-color: rgba(255,255,255,0.85);
	}
	nav.active{
	}
	.nav-container{
		position: relative;
		width: 100%;
		height: 100%;
		justify-content: center;
		flex-direction: column;
  		align-items: center;
  		padding: 5%;
	}
	.nav-brand{
		position: relative;
		margin-left: 0px;
		opacity: 1;
		visibility: visible;
		transition: 0.3s linear;
		height: auto;
		left: unset;
		top: unset;
    	transform: none;
	}
	nav.active .nav-brand{
		opacity: 1;
		visibility: visible;
	}
	.nav-center {
	    width: 100%;
	    height: auto;
	    flex-direction: column;
	    padding-top: 50px;
	}
	ul.nav-menu {
	    width: 100%;
	    height: auto;
	    padding: 0;
	    margin: 0 0 0 0px;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	}
	ul.nav-menu li:before{
		width: 60%;
	}
	ul.nav-menu li {
	    margin: 0px 0 0px;
	    width: 100%;
	    height: auto;
	    text-align: center;
	    line-height: unset;
	}
	ul.nav-menu li a {
		display: block;
	    line-height: unset;
	    padding: 20px 0;
	}
	.nav-play{
		display: none;
	}
	.p0-container{
		width: 100%;
	}
	.p1-container{
		width: 90vw;
	}
	.chara-tab {
	    width: 85vw;
	    height: auto;
	}
	.chara-tab ul{
		width: 100%;
	}
	.chara-tab ul li {
	    width: 30%;
	    height: 70px;
	}
	.chara-tab ul li a {
	    font-size: 25px;
	    line-height: 68px;
	}
	.chara-container {
	    width: 90vw;
	    height: 600px;
	    margin: 0 auto;
	    border-radius: 10px;
	    padding-bottom: 2vw;
	}
	.chara-content {
	    width: 100%;
	    height: 100%;
	    justify-content: flex-end;
	    align-items: center;
	    flex-direction: column;
	    padding-bottom: 5vw;
	}
	.chara-intro {
	    width: 100%;
	    height: auto;
	    justify-content: center;
	    align-items: center;
	    flex-direction: row;
	    margin-bottom: 10px;
	}
	.chara-intro img {
	    margin: 0 10px 0 0;
	}
	.chara-info {
	    width: 95%;
	    height: auto;
	    justify-content: center;
	    align-items: flex-start;
	    flex-direction: row;
	    padding-left: 0px;
	}
	.chara-info p {
	    font-size: 16px;
	    line-height: 26px;
	    margin: 0;
	    text-align: left;
	    width: 50%;
	}
	.chara-info p:after,.chara-info p br{
		display: none;
	}
	.c-yt {
	    width: 50%;
	    height: 0;
	    padding-bottom: 28%;
	}
	.c-yt iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.p3-container{
		width: 90vw;
		margin: 0 auto;
	}
	.p3-container h1{
		font-size: 18px;
		line-height: 30px;
	}
	.p3-container h1 br{
		display: none;
	}
	.p3-row{
		width: 100%;
		padding: 0;
	}
	.p3-box{
		width: 32%;
	}
	.p3-box h2 {
	    font-size: 16px;
	    line-height: 20px;
	    margin: 0 0 20px 0;
	}
	.p3-box h2:after{
		bottom: -10px;
	}
	.p3-box p {
	    font-size: 14px;
	    line-height: 20px;
	}
	section#p4{
		height: 120vw;
		justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
		padding-bottom:20vw;
	    background-image: url(../img/p4-bg-m.png);
        background-position: center bottom;
	}
	.p4-container{
		width: 95vw;
		height: 40vw;
		margin: 0 auto;
		padding: 5vw 0;
		align-items: center;
	}
	.p4-container h1 {
	    font-size: 36px;
	    line-height: 36px;
	    margin: 0 0 26px 0;
	    text-align: center;
	}
	.p4-container h1:after{
		left: 50%;
		transform: translateX(-50%);
	}
	.p4-container h2 {
		text-align: center;
	}
	.p4-btns {
	    width: 100%;
	    height: auto;
	    justify-content: center;
	    align-items: center;
	}
	.p4-btns a{
		margin: 0 0 10px 0;
	}
}



@media screen and (max-width:768px){
	.app{
		width: 100%;
		height: auto;
	}
	section#p0{
		height: auto;
	}
	.p0-container {
	    width: 95vw;
	    height: 100%;
	    margin: 0 auto;
	    padding: 60vw 0;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	}	
	.p0-slogan{
		width: 100%;
	}
	.p0-btns-container {
	    display: none;
	}
	.p0-btns .steam-btn {
	    margin-right: 5px;
	}
	.p0-bg-video video{
		height: 100%;
	}
	section#p1{
		height: auto;
		background-size: cover;
		background: unset;
		padding-top: 25vh;
	}
	.p1-container{
		width: 95vw;
		height: auto;
	    padding: 5vw 0 20vw;
	}
	.p1-slogan {
	    height: auto;
	    margin-bottom: 5vw;
	    padding-left: 0;
	    width: 100%;
	}
	.p1-slogan h1 {
	    font-size: 8vw;
	    line-height: 9vw;
	    margin: 0 0 20px 0;
	    width: 100%;
	}
	.p1-yt {
	    width: 100%;
	    height: 0;
	    padding-bottom: 56.25%;
	}
	.p1-yt iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.v-play{
		width: 100px;
		height: 100px;
	}
	.p1-bg .p1-layer img{
		height: 101%;
	}
	section#p2 {
	    min-height: 100vw;
	    height: auto;
	    background-size: cover;
	}
	.p2-container {
	    width: 100%;
	    height: 100%;
	    margin: 0px auto 0;
	    padding-top: 0;
	    padding-bottom: 3vw;
	}
	.chara-tab {
		position: relative;
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	    left: unset;
	    bottom: unset;
	    transform: unset;
	    margin-bottom: 10px;
	}
	.chara-tab ul {
	    width: 100%;
	    height: auto;
	    justify-content: center;
	    flex-direction: column;
	}
	.chara-tab ul li {
	    width: 100%;
	    height: auto;
	    margin: 0;
	}
	.chara-tab ul li a {
	    font-size: 20px;
	    line-height: 45px;
	}
	.chara-container {
	    position: relative;
	    width: 100%;
	    height: auto;
	    margin: 0 auto;
	    z-index: 5;
	}
	.chara-content {
	    position: relative;
	    width: 95vw;
	    height: 70vh;
	    justify-content: space-between;
	    align-items: flex-start;
	    flex-direction: column;
	    margin: 0 auto;
	    background-size: cover !important;
	    padding: 5vw 0;
	    overflow: hidden;
	    border-radius: 0 10px 0 10px;
	}
	.chara-intro {
	    width: 95%;
	    margin: 0 auto;
	    height: auto;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	}
	.chara-intro img {
	    margin: 0 auto 0px;
	    max-width: 100%;
	}
	.chara-intro h2{
		display: none;
	}
	.chara-info {
	    position: relative;
	    width: 95%;
	    height: auto;
	    z-index: 10;
        padding: 2vw;
	    border-radius: 5px;
	    margin: 0 auto;
	    background-color: rgba(0, 0, 0, 0.85);
	}
	.chara-info p{
		display: none;
		font-size: 14px;
	}
	.chara-info p br{
		display: none;
	}
	.c-yt {
	    position: relative;
	    border-radius: 0 10px 0 10px;
	    overflow: hidden;
	    width: 100%;
	    height: 0;
	    padding-bottom: 56.25%;
	}
	.c-yt iframe {
	    width: 100%;
	    height: 100%;
	    z-index: 0;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.c-img {
	    display: block;
	    bottom: 0;
	    z-index: 6;
	    pointer-events: none;
	    height: 100%;
	}
	section#p3{
		height: auto;
		padding: 5vw 0;
		background-size: cover !important;
	}
	.p3-container{
		width: 95vw;
		height: auto;
	}
	.p3-container h1 {
	    font-size: 16px;
	    line-height: 26px;
	    margin: 0 0 25px 0;
	}
	.p3-container h1 br{
		display: none;
	}
	.p3-row{
		padding: 0 2vw;
	}
	.p3-box{
		width: 100%;
		margin-bottom: 8vw;
	}
	.p3-box h2{
		font-size: 25px;
	}
	section#p4{
		height: 160vw;
		justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
		padding-bottom: 40vw;
	    background-image: url(../img/p4-bg-m.png);
        background-position: center bottom;
        background-size: contain;
	}
	.p4-container{
		width: 95vw;
		height: 100vw;
		margin: 0 auto;
		padding: 5vw 0;
		align-items: center;
	}
	.p4-container h1 {
	    font-size: 36px;
	    line-height: 36px;
	    margin: 0 0 26px 0;
	    text-align: center;
	}
	.p4-container h1:after{
		left: 50%;
		transform: translateX(-50%);
	}
	.p4-container h2 {
		text-align: center;
	}
	.p4-btns {
	    width: 100%;
	    height: auto;
	    justify-content: center;
	    align-items: center;
	}
	.p4-btns a{
		margin: 0 0 10px 0;
	}
	section#p6{
		width: 100%;
		height: auto;
		background-size: cover;
		padding: 10vw 0;
	}
	section#p6 h1 {
	    font-size: 5vw;
	    line-height: 5vw;
	    margin: 0 0 5vw 0;
	}
	.p6-fast-container a{
		margin: 0 2vw;
	}
	.p6-fast-container a:hover{
		padding: 0;
	}
	.p6-fast-container a:hover span{
		width: auto;
		opacity: 0;
		visibility: hidden;
		margin: 0;
	}
	.footer-logo img {
	    margin: 10px;
	}
	.term {
	    width: 100%;
	}
	.term p {
	    margin: 10px 0 0 0;
	}
}
@media screen and (min-width:850px) and (max-width:1024px){

}	

@media screen and (min-width:768px) and (max-width:850px){
	.p0-container {
	    padding: 30vw 0;
	}
	.p4-btns a {
	    margin: 0 5px;
	}
}



@media screen and (min-width:720px) and (max-width:768px){

}

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

}

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