@media screen and (min-width:1921px) and (max-width:3840px){
	
}

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


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

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

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

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

}	

@media screen and (max-width:1024px){
	.steam-bar{
		display: none;
	}
	.sidebar{
		display: none;
	}
	a#newyear-btn-m{
		display: block;
	}
}

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

@media screen and (max-width:768px){
	#app-nav-btn {
	    right: 5px;
	    top: 5px;
	}
	ul.p-nav {
	    width: 95%;
	}
	ul.p-nav li {
	    width: 100%;
	    height: 50px;
	}
	ul.p-nav li a {
	    height: 50px;
	    line-height: 50px;
	    font-size: 26px;
	    background-size: contain;
	}
	.fast-btn {
	    width: 80%;
	    margin: 10px auto 20px;
	    justify-content: space-between;
	}
	.fast-btn a {
	    margin: 0px 5px;
	    width: 15%;
	}
	.fast-btn a img {
	    width: auto;
	}
	section#p1{
		height: 100vh;
		background: url('../img/p1bg-m.jpg') no-repeat top center !important;
		background-size: contain !important;
		align-items: flex-end;
	}
	.p1-head{
		top: 1%;
		padding: 5px;
	}
	ul.p1-nav{
		display: none;
	}
	.brand p{
		display: none;
	}
	.p1-container{
		width: 95%;
	}
	.p1-title{
		position: relative;
		margin-bottom: 50px;
	}
	.p1-title-pc{
		display: none;
	}
	.p1-title-m{
		display: block;
		width: 100%;
		max-width: 100%;
	}
	.p1-container .steam{
		display: none;
	}
	.p1-video,#p0v{
		display: none;
	}
	section#p2{
		height: auto;
	}
	.webp section#p2{
		background: url('../imgp/p2bg-m.webp') no-repeat center;
		background-size: cover;
	}
	.no-webp section#p2{
		background: url('../img/p2bg-m.jpg') no-repeat center;
		background-size: cover;
	}
	.p2-container{
		width: 95%;
		padding: 20px 0;
	}
	.p2-title{
		width: 100%;
	}
	.p2-container p {
	    width: 90%;
	    font-size: 14px;
	    line-height: 30px;
	    margin: 0 auto;
	}
	.p2-lightning-1,.p2-lightning-2{
		display: none;
	}
	section#p3{
		height: auto;
		background-size: cover !important;
	}
	.p3-container {
	    width: 95%;
	    height: auto;
	    padding-top: 50px;
	}
	ul.chara-tab {
	    position: relative;
	    padding: 0px;
	    margin: 0;
	    left: unset;
	    top: unset;
	    transform: unset;
	    display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		flex-wrap: wrap;
	    justify-content: space-between;
	    align-items: flex-end;
	}
	ul.chara-tab:before{
		display: none;
	}
	ul.chara-tab li{
		width: 32%;
	}
	.chara-container {
	    width: 100%;
	    height: auto;
	    margin-top: 10px;
	    padding-bottom: 20px;
	}
	.chara-content {
	    width: 100%;
	    height: 800px;
	    justify-content: flex-end;
	    align-items: flex-start;
	    padding-top: 320px;
	}
	#t3 .chara,#t4 .chara,#t5 .chara{
	    width: 100%;
	    height: calc(320px + 98px);
	    bottom: unset;
	    top: 0;
	    left: 0;
	    z-index: 5;
	    background-size: contain !important;
	}
	.webp #t3 .chara{
		background: url('../imgp/t3-chara.webp') no-repeat bottom center;
	}
	.no-webp #t3 .chara{
		background: url('../img/t3-chara.png') no-repeat bottom center;
	}
	.webp #t4 .chara{
		background: url('../imgp/t4-chara.webp') no-repeat bottom center;
	}
	.no-webp #t4 .chara{
		background: url('../img/t4-chara.png') no-repeat bottom center;
	}
	.webp #t5 .chara{
		background: url('../imgp/t5-chara.webp') no-repeat bottom center;
	}
	.no-webp #t5 .chara{
		background: url('../img/t5-chara.png') no-repeat bottom center;
	}
	.chara-info {
	    width: 100%;
	    height: auto;
	}
	.chara-info h1 {
	    width: 100%;
	    font-size: 45px;
	    margin: 5px 0 10px;
	    line-height: 45px;
	}
	.chara-info p {
		display: none;
	    font-size: 14px;
	    margin: 0px 0 10px;
	    line-height: 28px;
	}
	.skill {
	    width: 100%;
	    padding: 10px;
	}
	section#p4{
		width: 100%;
		height: auto;
	}
	.webp section#p4{
		background: #000;
	}
	.no-webp section#p4{
		background: #000;
	}
	.p4-container {
	    width: 95%;
	    height: auto;
	    padding-top: 50px;
	    padding-bottom: 20px;
	}
	.p4-content {
	    width: 100%;
	    height: auto;
	    padding-top: 0vh;
	}
	a#p4-video-btn {
	    position: relative;
	    display: block;
	    top: unset;
	    right: unset;
	    width: 100%;
	    height: 30vh;
	}
	.webp a#p4-video-btn{
		background: url('../imgp/p4img-m.webp') no-repeat top center;
		background-size: contain;
	}
	.no-webp a#p4-video-btn{
		background: url('../img/p4img-m.jpg') no-repeat top center;
		background-size: contain;
	}
	a#p4-video-btn img{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.p4-content h1 {
	    width: 100%;
	    font-size: 45px;
	    margin: 5px 0 10px;
	    line-height: 45px;
	}
	.p4-content p {
	    width: 100%;
	    margin: 0px 0 20px;
	}
	.p4-content .skill {
	    width: 100%;
	}
	.p5-part-1{
		height: auto;
	}
	.p5-part-1-container{
		width: 95%;
		height: 100%;
		align-items: center;
		padding: 10vh 0;
	}
	.p5-part-1-container h1{
		font-size: 40px;
		margin: 0px 0 30px;
	    line-height: 50px;
	    text-align: center;
	}
	.p5-part-1-container p{
		font-size: 16px;
		text-align: center;
		line-height: 26px;
	}
	.p5-chara{
		display: none;
	}
	.p5-part-2-container{
		width: 100%;
		height: 100%;
	}
}

@media screen and (min-width:376px) and (max-width:540px){

}

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

}

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