@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){
	.p1-1-container,
	.p1-2-container,
	.p2-container,
	.p3-container,
	.p4-container,
	.p5-container{
	    width: 95vw;
	    margin: 0 auto;
	}
}



@media screen and (max-width:1024px){
	.global-text-1,.global-text-2{
		display: none;
	}
	#app-nav-btn{
		display: block;
	}
	nav{
		display: none;
		width: 100%;
		height: 100vh;
		top: 0px;
		left: 0;
		transform: unset;
		background: url(../img/nav-bg-m.jpg) center center;
		background-size: cover;
  		transition: unset;
	}
	nav.active{
		background: url(../img/nav-bg-m.jpg) center center;
		background-size: cover;
	}
	.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;
	}
	.p1-1-container {
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	    padding: 0;
	}
	.p2-title{
		width: 95vw;
		margin: 0 auto;
	}
	.p2-title p{
		font-size: 14px;
		line-height: 20px;
	}
	.p2-container {
	    width: 100vw;
	}
	#c-tag-left,#c-tag-right{
		display: none;
	}
	.chara-tab ul:before{
		left: 70px;
	}
	.chara-tab ul:after{
		right: 70px;
	}
	#sc-tab-1{left: 50px;}
	#sc-tab-2{left: 0;}
	#sc-tab-3{left: 50px;}
	#c-tab-1{right: 50px;}
	#c-tab-2{right: 0;}
	#c-tab-3{right: 50px;}
	section#p3{
		height: auto;
	    background-position: bottom center;
	}
	.p3-container {
	    width: 95vw;
	}
	.p3-s-container{
		height: auto;
	}
	.p3-s-box{
		width: 45%;
	}
	.p3-s-box h1{
	    font-size: 24px;
	    line-height: 28px;
	}
	span.hr-1 {
	    margin: 10px auto 10px;
	}
	.p3-s-box p {
	    font-size: 14px;
	    line-height: 26px;
	    padding: 0 0 0 40px;
	}
	.p3-s-container img{
		width: 50%;
	}
	.p4-container {
	    width: 95vw;
	}

}




@media screen and (max-width:768px){
	.global-text-1,.global-text-2{
		display: none;
	}
	.app{
		width: 100%;
		height: auto;
	}
	.sec-title{
		padding: 10px 0;
	}
	.sec-title h1{
		font-size: 18px;
    	letter-spacing: 2px;
    	line-height: 18px;
    	width: 70%;
    	margin: 0 auto;
	}
	.sec-title h2{
		font-size: 50px;
		letter-spacing: -6px;
		line-height: 50px;
	}
	.p1-bg{
	    min-height: 700px;
    	height: auto;
		background: url('../img/p01bg-m.jpg') no-repeat top center;
		background-size: cover;
	}
	section#p1-1{
		height: 500px;
		align-items: flex-end;
	}
	.p1-1-container {
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	    padding: 0;
	}
	img#p1-cb-logo {
	    position: relative;
	    display: block;
	    width: 50%;
	}
	img#p1-title-1 {
	    margin: 0;
	    width: 100%;
	}
	.p1-btns{
		display: none;
	}
	.p1-1-container > p{
		display: none;
	}
	section#p1-2{
		height: auto;
		padding-top: 30px;
		padding-bottom: 5%;
	}
	.p1-2-container {
	    width: 95vw;
	    justify-content: flex-start;
	}	
	.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: 0;
	    align-items: flex-start;
	    justify-content: flex-start;
	    background-size: cover;
	}
	.p2-title{
		position: relative;
		width: 100vw;
		top: 0px;
	}
	.p2-container {
	    width: 100vw;
	    height: auto;
	}
	.chara-tab {
		position: relative;
	    height: auto;
	    left: unset;
	    top: unset;
	    transform: unset;
	}
	#c-tag-left,#c-tag-right{
		display: none;
	}
	.chara-tab ul {
	    width: 100%;
	    height: auto;
	    padding: 0;
	    margin: 0 auto;
	    display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: center;
	}
	.chara-tab ul:before,.chara-tab ul:after{
		display: none;
	}
	.chara-tab ul li{
		position: relative;
		width: 16%;
		height: auto;
		margin: 0;
		top: unset !important;
		left: unset !important;
		right: unset !important;
		bottom: unset !important;
		transform: unset !important;
	}
	.chara-tab ul li a{
		width: 100%;
		position: relative;
	}
	.chara-simg{
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.chara-simg img{
		position: relative;
		width: 100%;
	}
	.chara-container {
	    height: auto;
	}
	.chara-content {
	    width: 100%;
	    height: auto;
	    padding-bottom: 0;
	}
	.chara-info {
	    width: 95vw;
	    height: 100%;
	    justify-content: space-between;
	    align-items: center;
	    top: unset;
	    background-color: transparent;
	    bottom: 0;
	    padding: 5% 2%;
	}
	.chara-info h1{
		font-size: 42px;
		line-height: 42px;
	}
	.chara-info h1 a{
		width: 60px;
	}
	.chara-content > img {
	    position: relative;
	    display: block;
	    pointer-events: none;
	    height: 600px;
	}
	section#p3 {
	    min-height: 900px;
	    height: auto;
	    padding-top: 25px;
	    background-size: cover;
	}
	.p3-container {
	    width: 95vw;
	    height: auto;
	    margin: 0 auto;
	}
	.p3-s-container{
		height: auto;
	}
	.p3-s-box{
		width: 100%;
		height: auto;
	}
	.p3-s-box h1 {
	    font-size: 26px;
	    line-height: 32px;
	}
	.p3-s-box p {
	    font-size: 14px;
	    line-height: 20px;
	    padding: 0 0 0 30px;
	}
	.p3-s-container img{
		position: relative;
		width: 100%;
		left: unset;
		right: unset;
	}
	span.hr-1{
		margin: 15px auto 15px;
	}
	section#p3 > h3 {
	    font-size: 18px;
	    font-weight: 600;
	    line-height: 30px;
	    margin: 30px auto;
	    width: 95vw;
	}
	section#p4 {
	    height: auto;
	    padding: 10% 0;
	    background-size: cover;
	}
	.p4-container {
	    width: 95vw;
        flex-direction: initial;
	}
	.p4-container h4 {
	    font-size: 14px;
	    font-weight: 400;
	    padding: 0;
	    margin: 30px 0;
	    line-height: 20px;
	}
	.p4-container h4 br{
		display: none;
	}
	.p4-btns{
		display: none;
	}
	.p4-container > p{
		display: none;
	}
	.p6-fast-container a{
		margin: 0 10px;
	}
	.footer-logo img{
		margin: 10px;
	}
	.term{
		width: 100%;
	}
	.term p{
		margin: 10px 0 0 0;
	}
	.term p br{
		display: none;
	}
}
@media screen and (min-width:850px) and (max-width:1024px){
	section#p1-1 {
	    height: 1000px;
	}
	.p3-s-box{
		width: 100%;
		height: auto;
	}
}	

@media screen and (min-width:768px) and (max-width:850px){
	.p1-bg {
	    height: auto;
	    background: url(../img/p01bg-m.jpg) no-repeat top center;
	    background-size: cover;
	}
	section#p1-1 {
	    height: 800px;
	}
	img#p1-title-1 {
	    margin: 0;
	    width: 400px;
	}
	img#p1-title-2 {
	    width: 380px;
	    margin: 0 0 0 50px;
	    left: 30px;
	}
	.p1-1-container h3 {
	    width: 100%;
	    margin: 10px auto 0;
	    font-size: 28px;
	    text-align: center;
	}
	.p1-content p {
	    position: relative;
	    width: 80%;
	    font-size: 18px;
	    font-weight: 400;
	    color: #171717;
	    text-align: center;
	    padding: 0;
	    margin: 0 auto 40px;
	    line-height: 30px;
	}
	.p1-yt {
	    width: 480px;
	    height: 270px;
	    margin-top: 5%;
	}
	.p1-yt iframe {
	    width: 100%;
	    height: 100%;
	}
	.p2-container {
	    width: 95vw;
	    height: auto;
	}
	.chara-tab {
	    top: 15px;
	}
	.chara-tab ul {
	    width: 50%;
	}
	.p3-s-box{
		width: 100%;
	}
	.c-intro-v {
	    width: 360px;
	    height: 200px;
	    margin: 0px auto 0;
	}
	.p3-box {
	    margin: 0 auto 10px;
	   	width: 430px;
    	height: 510px;
	}
	.p3-s-box{
		width: 100%;
		height: auto;
	}
}



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