
@media screen and (min-width:1921px) and (max-width:3840px){
	body{
		background-color: #000;
	}
	.app{
		width: 1920px;
		overflow: hidden;
		margin: 0 auto;
	}
}

@media screen and (min-width:1280px) and (max-width:1440px){
	img#p0-slogan-1{
		position: relative;
		display: block;
		transform: unset !important;
		opacity: 1 !important;
	}
	.p0-s16-logo{
		position: relative;
		width: max-content;
		height: auto;
		left: 17px;
		transform: scale(1) !important;
		opacity: 1 !important;
	}
	img#p0-slogan-2{
		position: relative;
		display: block;
		transform: unset !important;
		opacity: 1 !important;
	}
}	


@media screen and (min-width:1024px) and (max-width:1280px){

}	

@media screen and (min-width:1025px) and (max-width:1440px){

}



@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;
  		background-color: rgba(10, 11, 15, 1);
	}
	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;
	}
	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%;
	}
	.p0-content{
		margin: 0;
	}
	.p0-slogan {
	    justify-content: center;
	    padding: 0;
	}
	.p0-s16-logo{
		width: 50%;
		margin: 0 auto;
		transform: scale(1) !important;
		opacity: 1 !important;
	}
	.p0-s16-logo p {
	    left: 45%;
	    top: 30px;
	    width: 100%;
	    font-size: 14px;
	}
	.p0-s16-logo img{
		position: relative;
		display: block;
		width: 100%;
	}
	img#p0-slogan-1,img#p0-slogan-2{
		display: none;
	}
	#p0-slogan-m{
		position: relative;
		display: block;
		width: 95%;
		margin: -50px auto 0;
		left: 20px;
	}
	.p0-content > h2 {
	    font-size: 20px;
	    font-weight: 700;
	    line-height: 20px;
	    margin: 5px 0 20px 0;
	}
	.p0-btns{
		display: none;
	}
	#p0-line{
		height: 30px;
	}
	.chara-info{
		width: 95vw;
		margin: 0 auto;
	}
	section#p3{
		height: auto;
		padding: 2vh 0;
		background-size: cover;
	}
	.p3-container{
		width: 95vw;
		margin: 0 auto;
	}
	.p3-row {
	    justify-content: space-between;
	    align-items: flex-start;
	    flex-direction: inherit;
	}
	.p3-box {
	    width: 32%;
	    margin-bottom: 0px;
	}
	.spec-title h2 {
	    font-size: 22px;
	    line-height: 30px;
	    bottom: 30px;
	    z-index: 5;
	}
	.spec-title img{
		position: relative;
		display: block;
		width: 100%;
		z-index: 0;
	}
	.p4-container{
		width: 100%;
	}
}




@media screen and (max-width:768px){
	.app{
		width: 100%;
		height: auto;
	}
	section#p0{
		background: url('../img/p0bg-m.jpg') no-repeat top center;
		background-size: cover;
		background-color: #000;
		min-height: 700px;
    	height: auto;
	}
	.p0-container{
		width: 100%;
	}
	.p0-content{
		margin: 0;
	}
	.p0-slogan {
	    justify-content: center;
	    padding: 0;
	}
	.p0-s16-logo{
		width: 50%;
		margin: 0 auto;
		transform: scale(1) !important;
		opacity: 1 !important;
	}
	.p0-s16-logo p {
	    left: 45%;
	    top: 30px;
	    width: 100%;
	    font-size: 14px;
	}
	.p0-s16-logo img{
		position: relative;
		display: block;
		width: 100%;
	}
	img#p0-slogan-1,img#p0-slogan-2{
		display: none;
	}
	#p0-slogan-m{
		position: relative;
		display: block;
		width: 95%;
		margin: -50px auto 0;
		left: 20px;
	}
	.p0-content > h2 {
	    font-size: 20px;
	    font-weight: 700;
	    line-height: 20px;
	    margin: 5px 0 20px 0;
	}
	.p0-btns{
		display: none;
	}
	#p0-line{
		height: 30px;
	}
	section#p1{
		height: auto;
		padding: 5vh 0;
	}
	.p1-container{
		width: 95vw;
	}
	.p1-container p {
	    font-size: 14px;
	    font-weight: 500;
	    line-height: 24px;
	    margin: 0px 0 25px 0;
	}
	.p1-yt {
	    width: 360px;
	    height: 202px;
	    margin-top: 5%;
	}
	section#p2{
		height: auto;
		background-size: cover;
		padding: 2vh 0 0vh;
	}
	.p2-container{
		height: auto;
	}
	.chara-tab{
		width: 100%;
	}
	.chara-tab ul{
		width: 100%;
	}
	.chara-tab ul li {
	    width: 25%;
	    margin: 0 5px;
	}
	.chara-tab ul li a img {
	    position: relative;
	    display: block;
	    width: 100%;
	}
	.chara-container {
	    height: auto;
	    padding-top: 200px;
	}
	.chara-content {
	    height: auto;
	    justify-content: center;
	    align-items: flex-end;
	    padding: 0 0 5vh;
	}
	.chara-info {
	    width: 95vw;
	    height: auto;
	    justify-content: flex-start;
	    align-items: center;
	    flex-direction: column;
	    /* padding-top: 150px; */
	    margin: 250px auto 0;
	    background-color: rgba(0,0,0,0.8);
	    padding: 5px;
	}
	#c-t5 .chara-info {
	    padding: 5px;
	}
	.c-title{
		width: 100%;
	}
	.c-title h1 {
	    font-size: 40px;
	    line-height: 40px;
	    margin: 0;
	    text-align: center;
	    display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.c-title h1 img{
		height: 45px;
	}
	.c-title h1 br{
		display: none;
	}
	.c-title h1 span{
		font-size: 40px;
		margin: 0;
	}
	.c-yt{
		width: 100%;
		margin: 5px auto;
	}
	.c-intro {
		display: none;
	    width: 100%;
	    height: auto;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	}
	.c-intro h2 {
	    font-size: 20px;
	    line-height: 20px;
	    margin: 5px auto;
	    text-align: center;
	}
	.c-intro p {
	    width: 100%;
	    height: auto;
	    font-size: 14px;
	    font-weight: 400;
	    line-height: 24px;
	    margin: 0;
	    text-align: left;
	}
	.c-img{
		height: 125%;
	}
	.c-bg{
		display: none;
	}
	section#p3{
		height: auto;
		background-size: cover;
		padding: 5vh 0;
	}
	.p3-container{
		width: 95vw;
		margin: 0 auto;
	}
	.p3-container h1 {
	    font-size: 16px;
	    margin: 0 0 20px 0;
	}
	.p3-container h1 br{
		display: none;
	}
	.p3-row {
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	}
	.p3-box {
	    width: 100%;
	    margin-bottom: 30px;
	    filter: blur(0px) !important;
    	opacity: 1 !important;
	}
	.spec-title h2 {
	    font-size: 26px;
	    line-height: 30px;
	    bottom: 40px;
	    z-index: 5;
	}
	.spec-title img{
		position: relative;
		display: block;
		width: 100%;
		z-index: 0;
	}
	.p3-box p{
		font-size: 14px;
		margin: 0;
	}
	section#p4{
		height: auto;
		background-size: cover;
		padding: 5vh 0;
	}
	.p4-container{
		width: 95vw;
		margin: 0 auto;
	}
	.p4-container h1{
		font-size: 20px;
		font-weight: 500;
	}
	.p4-btns{
		width: 100%;
	}
	.p4-btns a{
		margin: 7.5px 0;
	}
	.p6-fast-container a {
	    margin: 0 10px;
	}
	.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){
	section#p0 {
	    background: url(../img/p0bg-m.jpg) no-repeat top center;
	    background-size: cover;
	    background-color: #000;
	    min-height: 950px;
	    height: auto;
	}
	.p0-s16-logo p {
	    left: 45%;
	    top: 60px;
	    width: 100%;
	    font-size: 20px;
	}
	.p1-container p br{
		display: none;
	}
	.chara-tab ul li {
	    width: 115px;
	    margin: 0 5px;
	}
	.chara-info{
		width: max-content;
	}
	.c-yt {
	    width: 360px;
	    margin: 5px auto;
	}
	.p3-row {
	    justify-content: space-between;
	    align-items: flex-start;
	    flex-direction: inherit;
	}
	.p3-box {
	    width: 32%;
	    margin-bottom: 0px;
	}
	.spec-title h2 {
	    font-size: 17px;
	    line-height: 30px;
	    bottom: 20px;
	    z-index: 5;
	}
	.p4-btns a {
	    margin: 0 7.5px;
	}
}



@media screen and (min-width:325px) and (max-width:375px){

}

@media screen and (min-width:325px) and (max-width:374px){

}

@media screen and (max-width:320px){
	
}

