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

	
}	


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

}	

@media screen and (min-width:1025px) and (max-width:1440px){
	.p0-container,
	.p1-container,
	.p2-container,
	.p3-container,
	.chara-info,
	.p4-container,
	.p5-container{
	    width: 95vw;
	    margin: 0 auto;
	}
	.p1-content p {
	    width: 100%;
	}
	.p2-info{
		width: 50%;
	}
	section#p4{
		padding: 5% 0;
	}
	.p4-box{
		width: 400px;
	}
}

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

}	

@media screen 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(20, 20, 20, 1);
  		transition: unset;
	}
	nav.active{
		background-color: rgba(20, 20, 20, 1);
	}
	.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;
	}
	nav.active .nav-brand{
		opacity: 1;
		visibility: visible;
	}
	.nav-right {
	    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:after{
		display: none;
	}
	ul.nav-menu li {
	    margin: 0px 0 0px;
	    width: 100%;
	    height: auto;
	    text-align: center;
	    line-height: unset;
	}
	ul.nav-menu li:after {
	    content: '';
	    position: relative;
	    display: block;
	    width: 100%;
	    height: 1px;
	    background: url(../img/navline.png) center;
	    background-repeat: repeat-x;
	}
	ul.nav-menu li a {
		display: block;
	    line-height: unset;
	    padding: 20px 0;
	}
	.nav-play{
		display: none;
	}
	.app{
		width: 100%;
		height: auto;
	}
	
	.p0-1-bg{
		min-height: 140vh;
		height: auto;
		background: url('../img/p01bg-m.png') no-repeat top center;
		background-size: contain;
		background-color: #eab859;
	}
	section#p0{
		height: 50vh;
		align-items: flex-end;
	}
	.p0-container {
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	    padding: 0;
	}
	img#s13-logo{
		display: none;
	}
	img#p0title{
		width: 100%;
		margin: 10px 0 10px;
	}
	.p0-container h3 {
	    width: 100%;
	    margin: 0px 0px;
	    font-size: 16px;
	}
	.p0-btns{
		display: none;
	}
	.p0-container > p{
		display: none;
	}
	section#p1{
		height: auto;
		padding-top: 40vh;
		padding-bottom: 5%;
	}
	.p1-container {
	    width: 95vw;
	    justify-content: flex-start;
	}	
	.p1-container h1 {
	    font-size: 27px;
	    margin: 0 0 10px 0;
	    line-height: 30px;
	}
	.p1-container h2 {
	    font-size: 16px;
	    line-height: 20px;
	}
	i.p-block {
	    width: 100%;
	    height: 1px;
	    margin: 15px 0;
	}
	.p1-content {
	    width: 100%;
	    height: auto;
	    justify-content: flex-start;
	    align-items: flex-start;
	    flex-direction: column;
	}
	.p1-content p {
	    width: 100%;
	    font-size: 14px;
	    line-height: 26px;
	    color: #000;
	}
	.p1-yt {
	    width: 100%;
	    height: auto;
	    margin-top: 5%;
	}
	.p1-yt iframe {
	    width: 100%;
	    height: 25vh;
	}
	section#p2 {
		min-height: 100vh;
	    height: auto;
	    padding-top: 10%;
	    background: url('../img/p2bg-m.png') no-repeat top center;
	    background-size: contain;
	    background-color: #000;
	    align-items: flex-end;
	}
	.p2-container {
	    width: 95vw;
	    height: 100%;
	}
	.p2-content {
	    width: 100%;
	    height: auto;
	    justify-content: flex-start;
	    align-items: flex-start;
	}
	.p2-info {
	    width: 100%;
	    height: auto;
	}
	.p2-info h2 {
	    font-size: 20px;
	    font-weight: 500;
	    padding: 0;
	    margin: 0 0 0px 0;
	    line-height: 20px;
	}
	.p2-info h1 {
	    font-size: 40px;
	    margin: 0 0 10px 0;
	    line-height: 40px;
	}
	.p2-info h3 {
	    font-size: 16px;
	    font-weight: 500;
	    padding: 0;
	    margin: 0 0 0px 0;
	}
	.p2-info p {
	    font-size: 14px;
	    padding: 0;
	    margin: 0 0 0px 0;
	    line-height: 26px;
	}
	.p2-yt {
	    width: 100%;
	    height: 20vh;
	    margin-top: 5%;
	}
	a.more {
	    position: relative;
	    display: block;
	    width: 325px;
	    height: 65px;
	    font-size: 26px;
	    font-weight: 500;
	    right: unset;
	    bottom: unset;
	    margin: 5% auto;
	}
	section#p3 {
	    min-height: 100vh;
	    height: auto;
	    padding-top: 10%;
	}
	.p3-container {
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	}
	.chara-tab {
	    width: 100%;
	    height: auto;
	    margin: 2% auto 0;
	}
	.chara-tab ul {
	    width: 100%;
	    height: auto;
	    padding: 0;
	    margin: 0;
	    justify-content: space-between;
	    align-items: center;
	}
	.chara-tab ul li{
		width: 30%;
		margin: 0;
	}
	.chara-tab ul li a{
		width: 100%;
	}
	.chara-simg{
		width: 100%;
		overflow: hidden;
	}
	.chara-container {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    bottom: 0;
	    left: 50%;
	    transform: translateX(-50%);
	}
	.chara-content {
	    width: 100%;
	    height: 100%;
	    justify-content: center;
	    align-items: flex-end;
	    padding-bottom: 5%;
	}
	.chara-info {
	    width: 95vw;
	    height: auto;
	    justify-content: flex-start;
	    align-items: center;
	    top: unset;
	    background-color: #f8eeda;
	    padding: 2%;
	}
	.c-info-left {
	    width: 100%;
	    height: auto;
	}
	.c-info-left h1 {
	    font-size: 40px;
	    margin: 0 0 10px 0;
	    line-height: 40px;
	}
	.c-info-left h1:after{
		display: none;
	}
	.c-info-left .c-intro {
	    width: 100%;
	    padding: 10px;
	    display: none;
	}
	.c-info-left .c-intro p {
	    font-size: 14px;
	    line-height: 26px;
	}
	.c-info-right {
	    width: 100%;
	    height: auto;
	}
	.c-intro-v {
	    width: 100%;
	    height: 200px;
	    margin: 0px auto 0;
	}
	#t4-chara{
		left: -10%;
	}
	section#p4 {
	    height: auto;
	    padding: 10% 0;
	    background-size: cover;
	}
	.p4-container {
	    width: 95vw;
	}
	.p4-container h1 {
	    font-size: 35px;
	    line-height: 35px;
	    margin: 10px 0;
	}
	.p4-container h1 br{
		display: none;
	}
	.p4-container p {
		width: 100%;
	    font-size: 14px;
	    font-weight: 400;
	    line-height: 26px;
	}
	.p4-content {
	    width: 95vw;
	    margin: 20px auto 0;
	}
	.p4-box{
		margin-bottom: 20px;
		height: auto;
	}
	section#p5 {
        width: 100%;
	    height: auto;
	    justify-content: center;
	    align-items: flex-start;
	    padding: 5vh 0;
	    background-size: cover;
	}
	.p5-container {
	    position: relative;
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	    z-index: 10;
	}
	.p5-container > h1 {
	    font-size: 26px;
	    margin: 0 0 20px 0;
	    left: unset;
	}
	.p5-container > h2 {
	    font-size: 26px;
	    margin: 0 0 20px 0;
	    left: unset;
	}
	.p5-container > p {
	    display: none;
	}
	.p5-container > h3 {
	    font-size: 14px;
	    color: #e01c34;
	    line-height: 30px;
	    width: 80%;
	}
	.p5-container > h3 br{
		display: none;
	}
	.p5-btns{
		display: none;
	}
	section#p6 {
	    display: none;
	}
}



@media screen and (max-width:768px){
	.app{
		width: 100%;
		height: auto;
	}
	
	.p0-1-bg{
		min-height: 1080px;
		height: auto;
		background: url('../img/p01bg-m.png') no-repeat top center;
		background-size: contain;
		background-color: #eab859;
	}
	section#p0{
		height: 500px;
		align-items: flex-end;
	}
	.p0-container {
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	    padding: 0;
	}
	img#s13-logo{
		display: none;
	}
	img#p0title{
		width: 100%;
		margin: 10px 0 10px;
	}
	.p0-container h3 {
	    width: 100%;
	    margin: 0px 0px;
	    font-size: 16px;
	}
	.p0-btns{
		display: none;
	}
	.p0-container > p{
		display: none;
	}
	section#p1{
		height: auto;
		padding-top: 275px;
		padding-bottom: 5%;
	}
	.p1-container {
	    width: 95vw;
	    justify-content: flex-start;
	}	
	.p1-container h1 {
	    font-size: 27px;
	    margin: 0 0 10px 0;
	    line-height: 30px;
	}
	.p1-container h2 {
	    font-size: 16px;
	    line-height: 20px;
	}
	i.p-block {
	    width: 100%;
	    height: 1px;
	    margin: 15px 0;
	}
	.p1-content {
	    width: 100%;
	    height: auto;
	    justify-content: flex-start;
	    align-items: flex-start;
	    flex-direction: column;
	}
	.p1-content p {
	    width: 100%;
	    font-size: 14px;
	    line-height: 26px;
	    color: #000;
	}
	.p1-yt {
	    width: 100%;
	    height: auto;
	    margin-top: 5%;
	}
	.p1-yt iframe {
	    width: 100%;
	    height: 25vh;
	}
	section#p2 {
		min-height: 700px;
	    height: auto;
	    padding-top: 10%;
	    background: url('../img/p2bg-m.png') no-repeat top center;
	    background-size: cover;
	    background-color: #000;
	    align-items: flex-end;
	}
	.p2-container {
	    width: 95vw;
	    height: 100%;
	}
	.p2-content {
	    width: 100%;
	    height: auto;
	    justify-content: flex-start;
	    align-items: flex-start;
	}
	.p2-info {
	    width: 100%;
	    height: auto;
	}
	.p2-info h2 {
	    font-size: 20px;
	    font-weight: 500;
	    padding: 0;
	    margin: 0 0 0px 0;
	    line-height: 20px;
	}
	.p2-info h1 {
	    font-size: 40px;
	    margin: 0 0 10px 0;
	    line-height: 40px;
	}
	.p2-info h3 {
	    font-size: 16px;
	    font-weight: 500;
	    padding: 0;
	    margin: 0 0 0px 0;
	}
	.p2-info p {
	    font-size: 14px;
	    padding: 0;
	    margin: 0 0 0px 0;
	    line-height: 26px;
	}
	.p2-yt {
	    width: 100%;
	    height: 20vh;
	    margin-top: 5%;
	}
	a.more {
	    position: relative;
	    display: block;
	    width: 325px;
	    height: 65px;
	    font-size: 26px;
	    font-weight: 500;
	    right: unset;
	    bottom: unset;
	    margin: 5% auto;
	}
	section#p3 {
	    min-height: 900px;
	    height: auto;
	    padding-top: 10%;
	}
	.p3-container {
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	}
	.chara-tab {
	    width: 100%;
	    height: auto;
	    margin: 2% auto 0;
	}
	.chara-tab ul {
	    width: 100%;
	    height: auto;
	    padding: 0;
	    margin: 0;
	    justify-content: space-between;
	    align-items: center;
	}
	.chara-tab ul li{
		width: 32%;
		margin: 0;
	}
	.chara-tab ul li a{
		width: 100%;
	}
	.chara-simg{
		width: 100%;
		overflow: hidden;
	}
	.ctab-id{
		font-size: 12px;
	}
	.chara-container {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    bottom: 0;
	    left: 50%;
	    transform: translateX(-50%);
	}
	.chara-content {
	    width: 100%;
	    height: 100%;
	    justify-content: center;
	    align-items: flex-end;
	    padding-bottom: 5%;
	}
	.chara-info {
	    width: 95vw;
	    height: auto;
	    justify-content: flex-start;
	    align-items: center;
	    top: unset;
	    background-color: #f8eeda;
	    padding: 2%;
	}
	.c-info-left {
	    width: 100%;
	    height: auto;
	}
	.c-info-left h1 {
	    font-size: 40px;
	    margin: 0 0 10px 0;
	    line-height: 40px;
	}
	.c-info-left h1:after{
		display: none;
	}
	.c-info-left .c-intro {
	    width: 100%;
	    padding: 10px;
	    display: none;
	}
	.c-info-left .c-intro p {
	    font-size: 14px;
	    line-height: 26px;
	}
	.c-info-right {
	    width: 100%;
	    height: auto;
	}
	.c-intro-v {
	    width: 100%;
	    height: 200px;
	    margin: 0px auto 0;
	}
	#t4-chara{
		left: -10%;
	}
	section#p4 {
	    height: auto;
	    padding: 10% 0;
	    background-size: cover;
	}
	.p4-container {
	    width: 95vw;
	}
	.p4-container h1 {
	    font-size: 35px;
	    line-height: 35px;
	    margin: 10px 0;
	}
	.p4-container h1 br{
		display: none;
	}
	.p4-container p {
		width: 100%;
	    font-size: 14px;
	    font-weight: 400;
	    line-height: 26px;
	}
	.p4-content {
	    width: 95vw;
	    margin: 20px auto 0;
	}
	.p4-box{
		margin-bottom: 20px;
		height: auto;
	}
	section#p5 {
        width: 100%;
	    height: auto;
	    justify-content: center;
	    align-items: flex-start;
	    padding: 5vh 0;
	    background-size: cover;
	}
	.p5-container {
	    position: relative;
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	    z-index: 10;
	}
	.p5-container > h1 {
	    font-size: 26px;
	    margin: 0 0 20px 0;
	    left: unset;
	}
	.p5-container > h2 {
	    font-size: 26px;
	    margin: 0 0 20px 0;
	    left: unset;
	}
	.p5-container > p {
	    display: none;
	}
	.p5-container > h3 {
	    font-size: 14px;
	    color: #e01c34;
	    line-height: 30px;
	    width: 80%;
	}
	.p5-container > h3 br{
		display: none;
	}
	.p5-btns{
		display: none;
	}
	section#p6 {
	    display: none;
	}
}

@media screen and (min-width:768px) and (max-width:1024px){
	.p0-1-bg{
		height: auto;
		min-height: 1920px;
		background: url('../img/p01bg-m.png') no-repeat top center;
		background-size: cover;
		background-color: #eab859;
	}
	section#p0 {
	    height: 1024px;
	    align-items: flex-end;
	}
	.p0-container h3 {
	    width: 100%;
	    margin: 0px 0px;
	    font-size: 30px;
	}
	.p1-container h1 {
	    font-size: 52px;
	    margin: 0 0 10px 0;
	    line-height: 30px;
	}
	.p1-content p {
	    width: 100%;
	    font-size: 20px;
	    line-height: 36px;
	    color: #fff;
	}
	.p1-yt {
	    width: 432px;
	    height: 256px;
	    margin-top: 5%;
	}
	section#p2 {
	    min-height: 1440px;
	    height: auto;
	    padding-top: 10%;
	    background: url(../img/p2bg-m.png) no-repeat top center;
	    background-size: cover;
	    background-color: #000;
	    align-items: flex-end;
	}
	.p2-info h1 {
	    font-size: 52px;
	    margin: 0 0 10px 0;
	    line-height: 52px;
	}
	.p2-info p {
	    width: 100%;
	    font-size: 20px;
	    line-height: 36px;
	}
	.p2-yt {
	    width: 432px;
	    height: 256px;
	    margin: 10px auto 0;
	}
	section#p3 {
	    background: url(../img/p3bg.png) no-repeat center;
	    background-size: cover;
	}
	.c-info-left h1 {
		width: 100%;
	    text-align: center;
	}
	.c-info-left h2{
		text-align: center;
	}
	.c-info-left i.p-block{
		margin: 10px auto;
	}
	#t4-chara{
		left: 35%;
	}
	.c-intro-v {
	    width: 432px;
	    height: 256px;
	    margin: 0px auto 0;
	}
	.p4-container h1{
		font-size: 52px;
		line-height: 52px;
	}
	.p4-box {
	    height: auto;
	    width: 100%;
	}
	.p4-container p {
	    width: 100%;
	    font-size: 20px;
	    font-weight: 400;
	    line-height: 36px;
	}
	section#p5 {
	    background: url(../img/p5bg.png) no-repeat center;
	    background-size: cover;
	}
	.p5-container > h1,.p5-container > h2 {
	    font-size: 40px;
	    margin: 0 0 20px 0;
	    left: unset;
	}
	.p5-container > h3 {
	    font-size: 20px;
	    color: #e01c34;
	    line-height: 36px;
	    width: 80%;
	}
}

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