@media screen and (max-width:3840px){
	body{
		background-color: #000;
	}
	.app{
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
	}
	section#p1,section#p2,section#p3,section#p4,section#p5{
		background-size: cover;
	}
	.bottom-nav{
		background-size: cover;
	}
	.section-deco{
		width: 100%;
	}
}

@media screen and (min-width:2561px) and (max-width:3840px){
	
	
	.nav-brand {
	    width: 240px;
	    height: 172px;
	    left: 10vw;
	}
	nav {
        max-width: 80vw;
        left: 50%;
        transform: translate(-50%);
    }
    .nav-container{
    	width: 100%;
    }
    .nav-center {
	    width: max-content;
	    height: auto;
	}
	ul.nav-menu li a {
	    padding: 1.5rem 1.8em;
	    font-size: 48px;
	    line-height: normal;
	}
	.bottom-nav-container {
	    width: 80vw;
	    height: 90px;
	}
	section#p1,section#p2,section#p3,section#p4{
		height: 100vh;
	}
	.p2-container,.p4-container,.p5-container{
		width: 80vw;
	}
	.p2-left h1 {
	    font-size: 12.5em;
	}
	.p2-left p {
	    font-size: 2.75em;
	}
	.chara-tab {
	    width: auto;
	    height: auto;
	    left: 10vw;
	    top: 25vh;
	}
	.chara-tab ul li a img {
	    width: 5vw;
	}
	.chara-tab ul li a,.chara-tab ul li.active a,.chara-tab ul li:hover a{
		background-size: cover;
	}
	.chara-info {
	    width: 80vw;
	}
	.chara-info-container h2 {
	    font-size: 6.25em;
	    line-height: normal;
	    margin: 0 0 0 15px;
	}
	.chara-info-container h1 {
	    font-size: 12.5em;
	    line-height: normal;
	    margin: 0 0 50px 0;
	}
	.chara-info-container p {
	    font-size: 2.65em;
	    line-height: normal;
	}
	.chara-info .chara-v-a {
	    transform: translate(-50%, -50%) scale(2.5);
	}
	.chara-info > img {
	    width: 100%;
	}
	.chara-vbg {
	    width: 50%;
	    height: 50vh;
	}
	.chara-vbg video {
	    top: 50%;
	    width: 100%;
	    transform: translateY(-50%);
	}
	.p4-container h1 {
	    font-size: 12.5em;
	    line-height: normal;
	}
	.p4-container p {
	    font-size: 2.75em;
	}
	section#p5{
	    height: auto;
    	padding: 3vw 0;
	}
	.p5-container h1 {
	    font-size: 9em;
	}
	.p5-container h2 {
	    font-size: 2.75em;
	}
	#p5-chara {
	    right: 10vw;
	    bottom: -100px;
	}
}


@media screen and (min-width:1921px) and (max-width:2560px){
	.nav-brand,.chara-tab {
	    left: 560px;
	}
	.chara-tab {
	    left: 560px;
	    top: 30vh;
	}
	section#p1,section#p2,section#p3,section#p4{
		height: 100vh;
	}
	.chara-vbg video {
	    top: 50%;
	    width: 100%;
	    transform: translateY(-50%);
	}
}

@media screen and (min-width:1440px) and (max-width:1920px){
	#p5-chara {
	    right: 0px;
	}
}

@media screen and (min-width:1440px) and (max-width:1560px){
	.nav-brand{
		left: 4vw;
	}
	.chara-tab {
	    left: 5vw;
	}
	#p5-chara{
		right: 0;
	}
	.chara-vbg video {
	    top: 50%;
	    width: 100%;
	    transform: translateY(-50%);
	}
}	

@media screen and (max-width:1440px){
	.nav-brand {
	    left: 2.5vw;
	    top: 10px;
	}
	nav{
		top: 20px;
	}
	.nav-container {
	    width: 95vw;
	}
	ul.nav-menu{
		gap: 20px;
	}
	ul.nav-menu li{
		width: 130px;
	}
	.bottom-nav{
	    width: 100%;
		background-size: cover;
	}
	.bottom-nav-container {
	    width: 90vw;
	    justify-content: space-between;
	    align-items: center;
	}
	.btmn-left {
	    width: auto;
	    height: 100%;
	    justify-content: flex-start;
	    align-items: center;
	    gap: 10px;
	}
	.btmn-title {
	    justify-content: center;
	    align-items: flex-start;
	    flex-direction: column;
	}
	.btmn-title h3 {
	    font-size: 26px;
	    line-height: 26px;
	}
	.btmn-title h1 {
	    font-size: 36px;
	    line-height: 36px;
	}
	.btmn-right ul li {
	    height: auto;
	}
	.steam-btn,.pc-btn {
	    width: 200px;
	    height: 76px;
	    font-size: 36px;
	    background-size: contain;
	}
	img#nav-left-fire {
	    left: -10%;
	}
	img#nav-right-fire {
	    right: -10%;
	}
	.p1-container,.p2-container,.p4-container,.p5-container{
		width: 95%;
	}
	.chara-tab {
	    left: 2.5vw;
	}
	.chara-info {
	    width: 95vw;
	}
	.chara-info > img {
	    width: 100%;
	}
	.chara-vbg {
	    width: 50%;
        height: 0;
        padding-bottom: 56.25%;
        background-color: unset;
	}
	.chara-vbg video{
		width: 100%;
	}
	#p5-chara {
	    right: -10%;
	}
}

@media screen and (max-width:1024px){
	.nav-brand{
		display: none;
	}
	body{
		padding: 0;
	}
	.section-deco{
		width: auto;
	}
	#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: #0e69d9;
	}
	nav.active{
	}
	.nav-container{
		position: relative;
		width: 100%;
		height: 100%;
		justify-content: center;
		flex-direction: column;
  		align-items: center;
  		padding: 5%;
	}
	.nav-center {
	    width: 100%;
	    height: auto;
	    flex-direction: column;
	    padding-top: 0px;
	    background-color: transparent;
        backdrop-filter: unset;
	}
	.nav-center:after{
		display: none;
	}
	ul.nav-menu {
	    width: 100%;
	    height: auto;
	    padding: 0;
	    margin: 0 0 0 0px;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	    gap: 5vw;
	}
	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;
	    font-size: 30px;
	}
	.nav-play{
		display: none;
	}
	h1.app-title {
	    font-size: 10vw;
	    line-height: 11vw;
	}
	h4.app-subtitle {
	    font-size: 5.5vw;
	    line-height: 6vw;
	}
	.bottom-nav {
	    position: relative;
	    width: 100%;
	    height: auto;
	    bottom: unset;
	    left: unset;
	    right: unset;
	    background: url(../img/nav-bg.png) no-repeat center;
	    background-size: cover;
	}
	.bottom-nav-container {
	    width: 100%;
	    height: auto;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	    padding: 3vw;
	}
	.btmn-left {
	    width: auto;
	    height: 100%;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	    gap: 10px;
	}
	.btmn-title {
	    width: auto;
	    height: 100%;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	}
	.btmn-title h3 {
	    font-size: 5vw;
	    line-height: 5vw;
	}
	.btmn-title h1 {
	    font-size: 6vw;
	    line-height: 8vw;
	}
	.btmn-right,img#nav-left-fire,img#nav-right-fire{
		display: none;
	}
	section#p1{
		position: relative;
		width: 100%;
		height: auto;
	}
	section#p1 .section-deco{
		display: none;
	}
	img.p1-bg-m{
		display: block;
	}
	.mainvideo{
		position: relative;
        min-width: auto;
        min-height: auto;
        left: unset;
        right: unset;
        top: unset;
        bottom: unset;
        padding-bottom: 56.25%;
	}
	video#mainvideo{
		width: 100%;
	}
	section#p2 {
        min-height: 60vh;
        height: auto;
        padding: 10vw 0 15vw;
        background-size: cover;
    }
    .p2-container{
    	width: 95vw;
    	justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	    gap: 5vw;
    }
    .p2-left, .p2-right {
	    width: 100%;
	}
	.p2-left h1 {
	    font-size: 4.25em;
	    margin: 0 0 20px 0;
	}
	.p2-left p {
	    font-size: 1.3em;
	}
	.p2-left p br{
		display: none;
	}
	.p2-right:after {
	    width: 100%;
	    height: 0;
	    padding-bottom: 56.25%;
	    bottom: -10px;
	    left: -10px;
	    background-size: contain;
	}
	section#p3 {
	    width: 100%;
	    height: auto;
	    background-size: cover;
	    padding: 15vw 0 0vw;
	}
	.p3-container{
		width: 100%;
	}
	.chara-tab {
		position: relative;
	    width: auto;
	    height: auto;
	    left: unset;
	    top: unset;
	    margin-bottom: 5vw;
	}
	.chara-container {
	    width: 100%;
	    height: 100%;
	    margin: 0 auto;
	}
	.chara-content {
	    width: 100%;
	    height: auto;
	    justify-content: center;
	    align-items: center;
	}
	.chara-info {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	}
	.chara-info-container {
	    margin-top: 0;
	    width: 95vw;
	}
	.chara-info-container h2 {
	    font-size: 2.125em;
	    line-height: 50px;
	    margin: 0;
	    padding: 0;
	}
	.chara-info-container h1 {
	    font-size: 15vw;
	    line-height: 15vw;
	    margin: 0 0 30px 0;
	    padding: 0;
	}
	.chara-info-container p {
	    font-size: 1.3em;
	    line-height: normal;
	    margin: 0;
	    padding: 0;
	}
	.chara-info .chara-v-a {
	    left: 50%;
	    top: 80%;
	    transform: translate(-50%, -50%);
	}
	.chara-info > img {
	    position: relative;
	    bottom: 0;
	    left: unset;
	    transform: unset;
	    width: 100%;
	}
	.chara-vbg {
	    position: absolute;
	    right: 0;
	    top: unset;
	    transform: unset;
	    bottom: 0;
	    width: 100%;
	    height: 0;
	    padding-bottom: 56.25%;
	    clip-path: unset;
	}
	.chara-vbg video{
		width: 100%;
	}
	section#p4{
        width: 100%;
        height: auto;
        background: url(../img/p4-bg-m.png) no-repeat center bottom;
        padding: 10vh 0 45vh;
        background-size: cover;
        background-color: #d2f1ff;
	}
	.p4-container{
		width: 95vw;
	}
	.p4-container h1 {
	    font-size: 15vw;
        line-height: 15vw;
        margin: 0 0 30px 0;
        padding: 0;
        mix-blend-mode: unset;
        color: #154e9c;
	}
	.p4-container p {
	    font-size: 1.3em;
	    line-height: normal;
	    margin: 0;
	    padding: 0;
	    mix-blend-mode: unset;
        color: #154e9c;
	}
	.p4-container p br{
		display: none;
	}
	section#p5 {
	    width: 100%;
	    height: auto;
	    background: url(../img/p5-bg.png) no-repeat center;
	    background-size: cover;
	    padding: 10vw 0 0;
        flex-direction: column;
        overflow: hidden;
	}
	.p5-container{
		width: 95vw;
	}
	.p5-container h1 {
	    font-size: 10vw;
        line-height: 10vw;
        margin: 0 0 15px 0;
        padding: 0;
        font-weight: 900;
	}
	.p5-container h2{
	    font-size: 1.3em;
	    line-height: normal;
	    margin: 0;
	    padding: 0;
	}
	.p5-container h2 br{
		display: none;
	}
	#p5-chara {
        position: relative;
        display: block;
        right: unset;
        bottom: 0;
        width: 100%;
        margin-bottom: -15vw;
	}
}

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


@media screen and (max-width:768px){
	
	.app{
		width: 100%;
		height: auto;
	}
	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 {
	    gap: 3vw;
	}
	.p6-fast-container a{
		margin: 0;
	}
	.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){

}



@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){
	
}