@charset "UTF-8";

/*COMMON*/

body,
html {
	text-align: left;
	text-decoration: none;
}

body:before {
	content: "";
	width: 100%;
	height: 100vh;
	display: block;
	position: fixed;
	background: url(https://www.snk-corp.co.jp/official/svc/img/main/mainback_1x.jpg) center no-repeat;
	background-size: cover;
	z-index: -1;
}

/*デバイス用*/
@media only screen and (min-device-width: 720px) and (max-device-width: 1050px) {

	body,
	html {
		text-align: left;
		text-decoration: none;
		min-width: 1060px;
	}
}

@media screen and (max-width: 769px) {
	body {
		min-width: initial;
	}
}

body {
	-webkit-font-smoothing: antialiased
}

#wrapper {
	overflow-x: hidden;
	overflow-y: hidden;
	background: #000;
}


img {
	-webkit-backface-visibility: hidden;
}


@-ms-viewport {
	width: auto;
	initial-scale: 1
}

@viewport {
	width: device-width;
	initial-scale: 1
}

div,
h1,
h2,
h3,
h4,
p {
	font-family: Noto Sans Japanese, sans-serif
}



.loading {
  margin-top: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 4800;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 15%;
}


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

	.loading img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 35%;
	}

}


.textarea_m {
	line-height: 1.7em;
	font-size: 1.5rem;

}




.textarea_l {
	font-size: 1.1vw;
}

.textarea_ll {
	font-size: 2.7rem;
}


@media screen and (min-width:320px) and (max-width:1050px) {
	
	.textarea_ll {
		font-weight: 600;
		text-align: left;
		line-height: 1.2em;
		color: #000;
		font-size: 4.5vw;
	}

	.textarea_m {
		line-height: 1.7em;
		font-size: min(3.6vw, 30px);

	}

	
	.textarea_l {
		font-size: 4.5vw;
	}

}


.contents_inner {
	position: relative;
	margin-top: 0;
	width: 80%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}


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

	.contents_inner {
		position: relative;
		text-align: justify;
		width: 85%;
		margin-left: auto;
		margin-right: auto;

	}
}

/*デバイス用*/
@media screen and (min-width:720px) and (max-width:1050px) {
	.textarea_ls {
		font-size: 3.5rem;
	}

	.textarea_ss {
		font-weight: 600;
		line-height: 1.7em;
		color: #000;
		font-size: 1.8rem;
	}

	.contents_inner {
		position: relative;
		width: 60%;
		padding-bottom: 0%;
		margin-bottom: 0;
		height: auto;
	}

	.textarea_m {
		line-height: 1.7em;
		font-size: 1.5rem;

	}
}


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden
}

.clearfix {
	min-height: 1px
}

.wdt100 {
	width: 100%
}

@media screen and (min-width:320px) and (max-width:1050px) {
	.rspsv {
		width: 100%
	}
}

.rightbox {
	float: right;
	height: auto;

}

.leftbox {
	float: left;
	height: auto
}

#trigger1 {
	position: absolute;
	margin-top: -300px;
}

/*デバイス用*/
@media only screen and (min-device-width: 720px) and (max-device-width: 1050px) {}

.pagetopact {
	position: fixed;

	right: 20px;
	bottom: 20px;
	z-index: 4000;
}

.tac {
	text-align: center;
}

p.indent-1 {
	padding-left: 2em;
	text-indent: -2em;
}

.indent-2 {
	padding-left: 1em;
	text-indent: -1em;
}

p.indent-2 {
	padding-left: 2em;
	text-indent: -1em;
}

img {
	image-rendering: -webkit-optimize-contrast;
}

.header {
	position: fixed;
	margin-top: 0;
	height: 30px;
	width: 100vw;
	z-index: 100;
}


/*UNIQ*/


@media screen and (min-width:320px) and (max-width:1050px) {
	.header {
		position: relative;
		margin-top: 0;
		height: 50px;
		width: 100%;
		z-index: 1100;
		background-color: none;

	}
}

.borderline {
	border-top: 1px solid #fff;
	width: 30%;
	margin: 5% auto;
}


/*RESPONSIVE*/

@media screen and (min-width:320px) and (max-width:1050px) {
	#section1 {
		position: relative;
		width: 100%;
		height: auto;
		padding-bottom: 2%;
		margin-top: -15%;
	}

	.borderline {
		border-top: 1px solid #fff;
	}

	.pagetopact {
		position: fixed;

		right: 20px;
		bottom: 20px;
		z-index: 4000;
		width: 10%;
	}
}

.headcopy {
	position: fixed;
	width: 5%;
	margin-top: 5%;
	margin-left: 18%;
	z-index: 100;
}


.overlay {
	position: fixed;
	width: 100%;
	height: 100vh;
	background: #000;
	opacity: 0.8;
}

#section3 {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 0%;
	padding-bottom: 8%;

	overflow: hidden;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
}

.textarea_mainlead_red {
	margin-top: 4%;
	border: 1px solid red;
	padding: 1em 1em;
	color: #fff;
}

#section4 {
	position: relative;
	width: 100%;
	height: auto;
	background-color: #fff;
	padding-top: 8%;
	padding-bottom: 10%;


}

.textarea_notice {
	margin-top: 2%;
	color: #fff;
	width: 80%;
	line-height: 1.2em;
	margin-left: 10%;

}

.snklogo {
	position: fixed;
	margin-left: 1%;
	top: -6px;
	z-index: 100;
}

@media screen and (min-width:320px) and (max-width:1050px) {
	.backimg {
		position: fixed;
		top: -5px;
		right: -10%;
		filter: blur(5px);
		opacity: 0.6;
		width: 140%;
		z-index: 100;

	}

	.headcopy {
		position: absolute;
		width: 16%;
		margin-top: 20vw;
		margin-left: 15%;
		z-index: 1100;
	}


	#section3 {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: 5%;
		padding-bottom: 21%;

		overflow: hidden;

	}



	.kofbnr {
		text-align: center;
		margin-top: 10%;
		width: 70%;
	}

	.textarea_ft {
		color: #fff;
		font-weight: 800;
		text-align: center;
		margin-top: 3%;
	}

	.textarea_mainlead_red {
		margin-top: 4%;
		border: 2px solid red;
		padding: 1em 1em;
		color: #fff;
	}

	.textarea_mainlead_u {
		margin-top: 1em;
		font-weight: 600;
		color: #fff;
		word-break: break-all;
	}

	.sec2left {
		width: 100%;
		margin-bottom: 5%;
	}

	.sec2right {
		width: 100%;
	}

	.textarea_contentstit br {
		display: block;
	}


	.snklogo {
		position: fixed;
		margin-left: 2%;
		margin-top: 2%;
		width: 23%;
		z-index: 100;
	}

	
}



.top_info_box {
	position: absolute;
	width: 100vw;
	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.infobox_infowrp {
	position: relative;
	margin-top: 0px;
	margin-left: 0;
	width: 15vw;
	height: 11%;
	text-align: center;
}

@media screen and (min-width:320px) and (max-width:1050px) {
	.top_info_box {
		position: absolute;
		width: 100vw;
		height: 100vh;

		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.infobox_infowrp {
		position: relative;
		margin-top: 0px;
		margin-left: 0;
		width: 40vw;
		height: 20%;
		text-align: center;

	}
}


.trigger1 {
	position: absolute;
	margin-top: 20%;
	height: 100px;
	z-index: 100;
}



.move2 {
	width: 100vw;
	height: 100vh;
	position: absolute;
	background-image: url("https://www.snk-corp.co.jp/official/svc/img/main/snkback2.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;

	z-index: 1000 !important;

}

.trigger2 {
	position: absolute;
	margin-top: -50%;
	height: 100px;
	z-index: 1100;
}




@media screen and (min-width:320px) and (max-width:1050px) {
	.trigger2 {
		position: absolute;
		margin-top: 40%;
		height: 200px;
		z-index: 1100;
	}
}


.active {
	color: deepskyblue;
	transition: 0.3s all;
}



#sec0 {
	width: 100%;
	height: 100vh;
	background-color: #fff;

}



.infobox_infowrp2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30%;
	height: auto;
	transform: translate(-50%, -45%);



}


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

	.infobox_infowrp2 {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 50%;
		height: auto;
		transform: translate(-50%, -45%);
	}

}

#footerwrp {
	position: relative;
	width: 100%;
	height: 50px;
	background-color: #000;
	z-index: 1100;
}

.ftsnk {
	width: 15%;
	margin: 0 auto;
	z-index: 100;
}

.ftsnslist {
	position: relative;
	width: 12%;
	margin: 3% auto;
}

.ftsnslist li {
	width: 30%;
	float: left;
}

.ftsnslist li:last-child {
	margin-right: -20%;
}

.notice {
	font-weight: 400;
	font-size: 1.3rem;
	text-align: justify;
	line-height: 1.8em;
	width: 60%;
	margin: 3% auto;
}

.snslist {
	position: absolute;
	right: 2%;
	margin-top: -10px;
	z-index: 100;
}

.snslist li {
	float: left;
	margin-right: 30%;
}

.snslist li:last-child {
	margin-right: -40%;
}

.notice_img {
	position: absolute;
	right: 2%;
	bottom: 2%;
	z-index: 100;
	width: 30%;
}

.scroll {
	position: absolute;
	left: 1%;
	bottom: 2%;
	z-index: 100;
}


@media screen and (min-width:320px) and (max-width:1050px) {
	.trigger1 {
		position: absolute;
		margin-top: 35%;
		height: 200px;
	}

	.scroll {
		position: absolute;
		width: 14%;
		left: 42%;
		bottom: 17vw;
		z-index: 100;
	}

	.snslist {
		position: absolute;
		right: 2%;
		margin-top: 2%;
		width: 20%;
		z-index: 100;
	}

	.snslist li {
		float: left;
		margin-right: 20%;
		width: 35%;
	}

	.snslist li:last-child {
		margin-right: -40%;
	}

	.notice_img {
		position: absolute;
		right: inherit;
		bottom: 3%;
		margin-top: 30vw;
		z-index: 100;
		width: 90%;
		margin-left: 3%;
	}

	.snklogo {
		position: absolute;
		margin-left: 3%;
		margin-top: 2%;
		width: 23%;
		z-index: 100;
	}
}



.mainsecleft {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;
	width: 40%;
	max-width: 1200px;
	background-size: cover;
  z-index: 100;
}

.mainsecright {
	position: relative;
	width: 60%;
	margin-left: 40%;
	height: auto;

}

@media screen and (min-width:320px) and (max-width:1050px) {
	.mainsecleft {
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;
	width: 100%;
	max-width: inherit;
	background-size: cover;
  z-index: 100;
	}

	.mainsecright {
		position: relative;
		width: 100%;
      padding-left:5%;
      padding-right:5%;
        margin-top: 100vw;
		margin-left: 5%;
		height: auto;
	}
}

#mainsection {
	position: relative;
	padding-bottom: 3%;
}

.minsecleft_logo {
	position: relative;
	width: 85%;
	margin: 8vw auto;
	margin-bottom: 0;
	z-index: 100;
}


.mainsecright_logo {
	position: relative;
	width: 52%;
	margin: 0 auto;
}


.textarea_commonlead {
	margin-left: 0%;
	font-weight: 400;
	text-align: justify;
	color: #fff;
	z-index: 150;
}

.snslist {
	position: absolute;
	right: 2.3%;
	margin-top: 2px;
	z-index: 100;
}

.snslist li {
	float: left;
	margin-right: 30%;
}

.snslist li:last-child {
	margin-right: -40%;
}

@media screen and (min-width:320px) and (max-width:1050px) {
	#footerwrp {
		position: relative;
		width: 100%;
		height: 50px;
		background-color: #000;
		z-index: 1100;
	}

	.textarea_commonhead {
		position: relative;
		font-weight: 600;
		color: #fff;
		z-index: 100;
	}

	.textarea_commonlead {
		position: relative;
		width: 100%;
		margin-left: 0%;
		font-weight: 400;
		text-align: justify;
		color: #fff;
		z-index: 250;
	}

	.introwrp_copy {
		position: absolute;
		margin-top: -10%;
		width: 35%;
		right: -10%;
		opacity: 0.4;
		z-index: 50;

	}

	.gallerylist {
		position: relative;
		margin-top: 15%;
		width: 100%;
		z-index: 150;
	}

	.gallerylist li {
		float: left;
		width: 48%;
		margin-right: 4%;
		margin-bottom: 6%;
	}

	.gallerylist li:nth-child(3n) {
		margin-right: 4%;
	}

	.gallerylist li:nth-child(2n) {
		margin-right: -40%;
	}

	.minsecleft_logo {
	position: relative;
	width: 110%;
	margin: 8vw auto;
	margin-bottom: 0;
      margin-left: -5%;
	z-index: 100;
	}

	.snslist {
		position: absolute;
		right: 0%;
		margin-top: 2.1%;
		width: 15%;
		z-index: 100;
	}

	.snslist li {
		float: left;
		margin-right: 10%;
		width: 35%;
	}

	.snslist li:last-child {
		margin-right: -40%;
	}
}

.aboutwrp {
	position: relative;
	z-index: 150;
}

.aboutwrp img {
	width: 80%;
	margin-left: 10%;
}


@media screen and (min-width:720px) and (max-width:1050px) {
	.snklogo {
		position: absolute;
		margin-left: 3%;
		margin-top: 12px;
		width: 23%;
		z-index: 100;
	}

	.snslist {
		position: absolute;
		right: 0%;
		margin-top: 10px;
		width: 10%;
		z-index: 100;
	}

	.snslist li {
		float: left;
		margin-right: 20%;
		width: 35%;
	}

	.snslist li:last-child {
		margin-right: -40%;
	}
}

@media screen and (min-width:320px) and (max-width:1050px) {
	.aboutwrp img {
		width: 100%;
		margin-left: 0%;
	}

	.textarea_notice {
		margin-top: 3%;
		color: #fff;
		width: 100%;
		line-height: 1.2em;
		margin-left: 0%;

	}

	.spscroll {
		position: fixed;
		width: 100%;
		height: auto;
		background-color: #ac8359;
		bottom: 0;
	}
}

.changeimg4 {
	margin-left: 30%;
	margin-top: 3%;
}



.textarea_topscroll {
	color: #fff;
	padding: 2%;
	font-weight: 500;
	text-align: center;
	margin-bottom: 0;
}

.toplead {
	width: 80%;
}

.gallerymainimg {
	width: 50%;
	margin: 0 auto;
	margin-bottom: 2%;

}

.galleryhead {
	width: 25%;
	margin: 0 auto;
	margin-bottom: 0%;
	padding-top: 5%;
}

.gallerynum {
	margin-top: -10%;
	font-size: 15rem;
	margin-bottom: 0;
	font-family: 'Playfair Display', serif;
	text-align: center;
	color: #ac8359;
}

.textarea_galleryhead {
	text-align: center;
	color: #fff;
	font-weight: 600;
	margin-bottom: 0;
	line-height: 0.9em;

}

.textarea_gallerysub1 {
	text-align: center;
	color: #fff;
	font-weight: 500;
	margin-top: 0.5em;
	margin-bottom: 0.2em;
}

.textarea_gallerysub2 {
	text-align: center;
	color: #fff;
	font-weight: 400;
	margin-bottom: 1.5em;
}





.gallerywrp {
	position: relative;
	padding-top: 7%;
	z-index: 100;
}

.leftimg {
	position: absolute;
	margin-top: 3%;
	left: 1%;
	width: 15%;
}

.gallerylead {
	width: 80%;
	margin: 0 auto;
	margin-bottom: 1%;
}

.gallerylead span {
	font-weight: 600;

}

.pnlist {
	width: 8%;
	margin: 10% auto;
}

.pnlist li a:link {
	color: #fff;

}

.pnlist li a:visited {
	color: #fff;

}

.pnlist li a:hover {
	color: #fff;

}

.pnlist li {
	float: left;
	font-weight: 500;
	color: #fff;
	margin-right: 20%;
}

.pnlist li:last-child {
	margin-right: -20%;
}


@media screen and (min-width:320px) and (max-width:1050px) {
	.toplead {
		width: 100%;
	}

	.pnlist {
		width: 22%;
		margin: 10% auto;
	}

	.pnlist li {
		float: left;
		font-weight: 500;
		color: #fff;
		margin-right: 20%;
	}

	.pnlist li:last-child {
		margin-right: -20%;
	}

	.gallerynum {
		margin-top: -5%;
		font-size: 7rem;
		font-family: 'Playfair Display', serif;
		text-align: center;
		color: #ac8359;
	}

	.galleryhead {
		width: 45%;
		margin: 0 auto;
		margin-bottom: 0%;
		padding-top: 5%;
	}

	.gallerylead {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 2%;
	}

	.gallerymainimg {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 5%;

	}

	.leftimg {
		position: absolute;
		margin-top: 15%;
		left: 0;
		width: 28%;
		z-index: 100;
	}
}

.imgdln {
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-touch-callout: none;
	-moz-user-select: none;
	user-select: none;
}

.aboutcopy {
	position: absolute;
	width: 10%;
	margin-top: -5%;
	margin-left: 75%;
}

.ingrowrp_neogeohead {
	position: absolute;
	margin-top: -2vw;
	right: -0%;
	width: 35%;
	z-index: 1100 !important;
}

.artistlist {
	width: 100%;
	margin-bottom: 10%;
}

.artistlist li {
	float: left;
	width: 30%;
	margin-right: 5%;
}

.artistlist li:nth-child(3n) {
	margin-right: -20%;
}

.artistlist li img {
	border: 5px solid #ac8359;
}

@media screen and (min-width:320px) and (max-width:1050px) {
	.ingrowrp_neogeohead {
		position: absolute;
		margin-top: -55vw;
		right: -5%;
		width: 35%;
	}

	.artistlist {
		width: 80%;
		margin: 0 auto;
		margin-bottom: 10%;
	}

	.artistlist li {
		float: left;
		width: 100%;
		margin-right: 0%;
		margin-bottom: 20%;
	}

	.artistlist li img {
		width: 60%;
		margin-left: 20%;
	}

	.artistlist li:nth-child(3n) {
		margin-right: inherit;
	}

	.artistlist li:nth-child(2n) {
		margin-right: -20%;
	}
}


.artistwrp {
	position: relative;
	margin-top: 15%;
	z-index: 100;
}

.textarea_artistwrplead {
	margin-top: 0;
	color: #fff;
	font-weight: 400;
	text-align: justify;
	line-height: 1.6em;
}

.textarea_artitswrphead {
	margin-top: 5%;
	font-weight: 600;
	color: #fff;
	text-align: center;
}

.changeimg5 {
	margin-left: 30%;
	margin-top: 7%;
	width: 34%;
}

.trigger5 {
	position: absolute;
	margin-top: 180%;
	height: 100px;
	z-index: 1100;
}

.artisttit {
	width: 50%;
	margin: 0 auto;
	margin-bottom: 5%;
}

.mb5 {
	margin-bottom: 2%;
}

.glayout {
	opacity: 0.3;
}



.loadimg {
	position: relative;
	z-index: 6000 !important;
}

.mainimg {
	position: absolute;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/main/main_mainvisual.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	z-index: 10;
}

.mainimg2 {
	position: absolute;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/main/top_mainimg2.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	z-index: 10;
}

.mainimg3 {
	position: absolute;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/main/top_mainimg6.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	z-index: 10;
}

.mainimg4 {
	position: absolute;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/main/top_mainimg3.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	z-index: 10;
}

.kirakirastar {
	position: absolute;
	width: 5%;
}

.s2 {
	margin-left: 46%;
	margin-top: -4%;
}

.s1 {
	margin-left: 25%;
}

.s3 {
	margin-left: 50%;
	margin-top: 8%;
}

.mainsecright_backimage {
	position: fixed;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/main/mainbackimage.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: cover;
	width: 60%;
	height: 100vh;
	z-index: 10;
	margin-left: 40%;
}

.mainsecright_overlay {
	position: fixed;
	width: 60%;
	height: 100vh;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/common/02.png);
	z-index: 20;
	margin-left: 40%;
}


.global-menuwrp {
	position: fixed;
	width: 60%;
	padding: 12px 2px 9px 2px;
	background: rgb(0, 0, 0);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 21%, rgba(0, 0, 0, 1) 81%, rgba(0, 0, 0, 0) 100%);
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(to right, transparent, #10c6f6, transparent) 1;
	background-position: center;
	z-index: 1000;
	border-style: solid;
}




.global-menu {
	position: relative;
	width: 85%;
	margin: 0 auto;
	z-index: 1000;
	text-align: left;
	z-index: 1100;
}

.global-menu li {
	float: left;
	margin-right: 2%;
}

.global-menu li a {
	color: #10c6f6;
	text-decoration: none;
	transition: color 0.3s ease;
}

.global-menu li a:hover p,
.global-menu li a.current p {
	color: white;
	/* ホバー時とカレント時の色 */
	transition: color 0.3s ease;
}

.textarea_gnavi {
	font-family: "microgramma-extended", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #10c6f6;
	font-size: 0.8vw;
	margin-bottom: 0;
}

#mid_battlesystem {
	position: relative;
	height:auto;
	padding-bottom: 8%;
	width: 50%;
	margin-left: 45%;
	z-index: 100;
   padding-top: 100px; 
  margin-top: -100px; 
}

#mid_characters {
position: relative;
	height:auto;
	padding-bottom: 10%;
	width: 50%;
	margin-left: 45%;
	z-index: 100;
  padding-top: 100px; 
  margin-top: -100px; 
}

#mid_onlineandgallery {
	position: relative;
	height: auto;

	padding-bottom: 10%;
}

#mid_product {
position: relative;
	height:auto;
	padding-bottom: 0%;
	width: 50%;
	margin-left: 45%;
	z-index: 100;
 padding-top: 100px; 
  margin-top: -100px; 
}

#mid_online {
	position: relative;
	height:auto;
	padding-bottom: 10%;
	width: 50%;
	margin-left: 45%;
	z-index: 100;
   padding-top: 100px; 
  margin-top: -100px; 
}

#mid_gallery {
position: relative;
	height:auto;
	padding-bottom: 10%;
	width: 50%;
	margin-left: 45%;
	z-index: 100;
   padding-top: 100px; 
  margin-top: -100px; 
}


.langselect {
	position: absolute;
	width: 7vw;
	margin-top: -5px;
	z-index: 2100;
	right:10px;
	
}
.langselect li {
	float: left;
	width: 2.5vw;
	margin-right: 7px;
	
}
.langselect li a {
	cursor: pointer;
}
.langselect li:last-child {
	margin-right: -20%;
}

.snk_snslist {
	position: relative;
	width: 80%;
	margin: 0 auto;
}
.snk_snslist li {
	float: left;
	margin-right: 3%;
	width: 20%;
}
.snk_snslist li:last-child {
	width:30%;
	margin-right: -20%;
}
.snk_snslist li:nth-child(2) {
	width:23%;
	margin-right: 3%;
}
.snk_snslist li:first-child {
	width:15%;
	margin-right: 5%;
}

.snk_snswrp {
	position: absolute;
	width: 100%;
	padding:1.5% 1% 1.5% 1%;
	background-color: rgba(0,0,0,0.8);
	z-index: 1000;
	bottom:0;
}

.main_platformlogo {
	position: relative;
	width: 45%;
	margin: 1vw auto;
	z-index: 100;
}

.main_available {
	position: relative;
	width: 85%;
	margin: 1.5vw auto;
	margin-bottom: 0;
	z-index: 100;
    -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}

.main_availablesub {
	position: relative;
    width: 30%!important;
	margin: 0.5vw auto;
	z-index: 100;
}

.main_trailer {
	position: relative;
	width: 70%;
	margin: 3vw auto;
	z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}

.pvbtn {
	position: absolute;
	margin-top: 6.0vw;
	margin-left: 40%;
	width: 16%;
}

.main_intro_tit {
  width: 100%;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}


.introwrp {
	position: relative;
	width: 85%;
  margin: 3vw auto;
	z-index: 100;
}
.main_intro_copy {
  width: 90%;
  margin: 2vw auto;
  margin-bottom: 0;
}

.main_intro_copysub {
  width: 85%;
  margin: 1vw auto;
}

.sectit {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 3vw;
}

.secleft {
  width: 55%;
}
.secleft img {
  border:1px solid #fff;
}

.secright {
  width: 40%;
  margin-left: 5%;
}

.textarea_seclead {
  margin-top: 0.5vw;
  border-top:1px solid #fff;
  padding-top:0.5vw;
  color:#fff;
  font-weight: 600;
  text-align: justify;
}
.textarea_spec {
  margin-top: 2vw;
  border-top:1px solid #fff;
  padding-top:2vw;
  color:#fff;
  font-weight: 600;
  text-align: left;
}

.cattit {
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}

.textarea_m {
font-size: min(0.9vw, 25px);

}
.exleft {
  width: 60%;
}

.exright {
  width: 40%;
  padding-left:5%;
}

.exwrp {
  position: relative;
  margin-top: 4vw;
  border:2px solid #10C6F6;
  background-color: rgba(0,0,0,0.4);
  padding:3% 3% 3% 3%;
}

.productlogo {
  width: 60%;
  margin: 0 auto;
}

.product_platform {
  width: 40%;
   margin: 0.3vw auto;
}

.product_available {
    width: 100%;
   margin: 2vw auto;
    -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}

.product_storelist {
  position: relative;
  margin-left: -0.5vw;
}
.product_storelist li {
  float: left;
  width: 47.8%;
  margin-right: 3%;
  margin-bottom: 3%;
  border:1px solid #fff;
}
.product_storelist li:nth-child(2n) {
  margin-right: -20%;
}


 .product_storelist li {
    display: inline-block;
    margin: 10px;
     -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
  }

  #mid_product a {
    width: 100%;
    transition: filter 0.3s ease, background-color 0.3s ease;
  }

  #mid_product a:hover {
    filter: brightness(1.2) saturate(1.5);
    background-color: rgba(255, 255, 255, 0.2);
  }

			
.testarea_ftplatform {
	color: #fff;
	width: 90%;
	margin: 2vw auto;
  text-align: left;
	margin-left: 0%;
	line-break: auto;
  font-size: min(0.65vw, 12px);
}

.ps_logo {
	width: min(1.3vw, 18px);
	display: inline-block;
}

.ps {
	width: min(3vw, 40px);
	display: inline-block;
}


@media screen and (min-width:320px) and (max-width:1050px) {
	
.langselect {
	position: absolute;
	width: 160px;
	margin-top: 10px;
	z-index: 2100;
	right:30px;
	
}
.langselect li {
	float: left;
	width: 60px;
	margin-right: 7px;
	
}
.langselect li a {
	cursor: pointer;
}
.langselect li:last-child {
	margin-right: -20%;
}

  .textarea_spec {
  margin-top: 5vw;
  border-top:1px solid #fff;
  padding-top:5vw;
  color:#fff;
  font-weight: 600;
  text-align: left;
  line-height: 1.7em;
}
  .product_storelist {
  position: relative;
  margin-left: 6vw;
}
.product_storelist li {
  float: left;
  width: 90%;
  margin-right: 3%;
  margin-bottom: 3%;
  border:1px solid #fff;
}
  .product_available {
    width: 140%;
    
   margin: 4vw auto;
margin-left: -22%;
}
  .productlogo {
  width: 100%;
  margin: 0 auto;
}
  .product_platform {
  width: 80%;
   margin: 2vw auto;
}
  .exwrp {
  position: relative;
  margin-top: 4vw;
  border:2px solid #10C6F6;
  background-color: rgba(0,0,0,0.4);
  padding:5% 3% 3% 3%;
}
  .exleft {
  width: 95%;
    
    margin-left: 2.5%;
}

.exright {
  width: 95%;
  margin-top: 3vw;
  margin-right: 2.5%;
  padding-left:0%;
}

  
  .textarea_seclead {
  margin-top: 3vw;
  border-top:1px solid #fff;
  padding-top:3vw;
  color:#fff;
  font-weight: 600;
  text-align: justify;
}
  #mid_product {
position: relative;
	height:auto;
	padding-bottom: 5%;
	width: 90%;
	margin-left: 5%;
	z-index: 100;
 padding-top: 100px; 
  margin-top: -100px; 
}
  #mid_gallery {
position: relative;
	height:auto;
	padding-bottom: 10%;
	width: 90%;
	margin-left: 5%;
	z-index: 100;
   padding-top: 100px; 
  margin-top: -100px; 
}
  
  #mid_online {
	position: relative;
	height:auto;
	padding-bottom: 10%;
	width: 90%;
	margin-left: 5%;
	z-index: 100;
   padding-top: 100px; 
  margin-top: -100px; 
}
  #mid_characters {
position: relative;
	height:auto;
	padding-bottom: 10%;
	width: 90%;
	margin-left: 5%;
	z-index: 100;
  padding-top: 100px; 
  margin-top: -100px; 
}
  
  .sectit {
  position: relative;
  width: 170%;
  margin: 5vw auto;
  margin-bottom: 7vw;
    margin-left: -34%;
}
  .secright {
  width: 100%;
    margin-top: 4vw;
  margin-left: 0%;
}
  #mid_battlesystem {
	position: relative;
	height:auto;
	padding-bottom: 10%;
	width: 90%;
	margin-left: 5%;
	z-index: 100;
   padding-top: 100px; 
  margin-top: -100px; 
}
  
	.testarea_ftplatform {
		color: #fff;
		width:75%;
		margin-top: 4vw ;
       font-size: min(2.4vw, 14px);
      text-align: left;
	}
		.ps_logo {
		width: min(4vw, 20px);
		display: inline-block;
	}

	.ps {
		width: min(9vw, 50px);
		display: inline-block;
	}

}

.minsecleft_logo_upper {
  	position: absolute;
	width: 85%;
	margin: 8vw auto;
    margin-left: 4.4vw;
	margin-bottom: 0;
  opacity: 0.5;
	z-index: 101;
}

.bglogo {
  position: fixed;
  width: 75%;
  margin-left: 32%;
  margin-top:15vw;
  filter: blur(4px);
  z-index: 10;

}

.bgoverlay {
  	position: fixed;
	width: 60%;
	height: 100vh;
  background: rgb(0,0,121);
background: linear-gradient(0deg, rgba(0,0,121,1) 0%, rgba(0,0,121,0) 0%, rgba(0,0,121,0.5) 48%, rgba(0,0,121,0) 100%);
	
	z-index: 20;
	margin-left: 40%;
}

.newmark {
  position: absolute;
  margin-top: -4.7vw;
  margin-left: -3vw;
  width: 12%;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}
.newmark_sectit {
  position: absolute;
  margin-top: -1.5vw;
  margin-left: -2vw;
  width: 12%;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}
.newmark_sectit2 {
  position: absolute;
  margin-top: -1.5vw;
  margin-left: -2vw;
  width: 15%;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}


.spbr {
  display: none;
}
.textarea_ms {
   font-size: min(1.5vw, 15px);
  line-height: 1.6em;
}


.textarea_characters {
  font-weight: 700;
  color:#fff;
  text-align: center;
  line-height: 1.7em;
    -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}


.charaex_img {
	position: absolute;
	width: 59%;
	margin-top: -8.5%;
	right: -14%	;
	z-index: 3;
}

.charaex_img2 {
	position: relative;
	width: 60%;
	z-index: 5;
}

.characters_mainimg {
	width: 100%;
}


@media screen and (min-width:320px) and (max-width:1050px) {
	.characters_mainimg {
	width: 115%;
		margin-left: -6vw;
		margin-bottom: 9vw;
}

	.textarea_characters {
  font-weight: 700;
  color:#fff;
  text-align: center;
  line-height: 1.7em;
    -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	font-feature-settings:"palt" 1;
	letter-spacing: -0.08em;
}
	.minsecleft_logo_upper {
 	position: absolute;
	width: 100%;
	margin: 8vw auto;
	margin-bottom: 0;
  margin-left: -5%;
  opacity: 0.5;
	z-index: 101;
}
	.charaex_img {
	position: relative;
	width: 125%;
	margin-top: -20%;
		margin-bottom: 2vw;	
	right: -0%;
	z-index: 3;
}

.charaex_img2 {
	position: relative;
	width: 90%;
	margin-left: 5%;
	padding-bottom:2vw;
	z-index: 5;
}

  .bglogo {
  position: fixed;
  width: 130%;
  margin-left: -15%;
  margin-top:65vw;
  filter: blur(4px);
  z-index: 10;

}
  
  .bgoverlay {
  	position: fixed;
	width: 100%;
	height: 100vh;
  background: rgb(0,0,121);
background: linear-gradient(0deg, rgba(0,0,121,1) 0%, rgba(0,0,121,0) 0%, rgba(0,0,121,0.5) 48%, rgba(0,0,121,0) 100%);
	
	z-index: 20;
	margin-left: 0%;
}
  .spbr {
  display: block;
}
  .textarea_m {
font-size: min(4.5vw, 25px);

}
  .textarea_ms {
   font-size: min(3vw, 20px);
    
}

  .secleft {
  width: 100%;
}
.secleft img {
  border:1px solid #fff;
}
  
  .main_intro_copy {
  width: 100%;
  margin: 2vw auto;
  margin-bottom: 0;
}

.main_intro_copysub {
  width: 100%;
  margin: 1vw auto;
}
  .mainimg {
	position: absolute;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/main/main_mainvisual.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	width: 100%;
	height: 140.6vw;
	z-index: 10;
}
  .mainsecright_backimage {
	position: fixed;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/main/mainbackimage.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: cover;
	width: 100%;
	height: 100vh;
	z-index: 10;
	margin-left: 0%;
}
  .mainsecright_overlay {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-image: url(https://www.snk-corp.co.jp/official/svc/img/common/02.png);
	z-index: 20;
	margin-left: 0%;
}
  .main_platformlogo {
	position: relative;
	width: 80%;
	margin: 1vw auto;
	z-index: 100;
}
  .main_available {
	position: relative;
	width: 160%;
	margin: 2.6vw auto;
    margin-left: -31%;
	margin-bottom: 2vw;
	z-index: 100;
    -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}
  .main_availablesub {
	position: relative;
    width: 70%!important;
	margin: 0.5vw auto;
	z-index: 100;
}
  
  .newmark {
  position: absolute;
  margin-top: -4vw;
  margin-left: -3vw;
  width: 12%;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}
.newmark_sectit {
  position: absolute;
  margin-top: -1.5vw;
  margin-left: -2vw;
  width: 12%;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}
.newmark_sectit2 {
  position: absolute;
  margin-top: -4vw;
  margin-left: -5vw;
  width: 20%;
  z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}
.pvbtn {
	position: absolute;
	margin-top: 11.8vw;
	margin-left: 40%;
	width: 16%;
	z-index: 100;
}
  .introwrp {
	position: relative;
	width: 100%;
  margin: 3vw auto;
	z-index: 100;
}
  .main_trailer {
	position: relative;
	width: 100%;
	margin: 5vw auto;
	z-index: 100;
  -webkit-filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
	filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, .8));
}
}

.bkg_sp {
	position: absolute;
	background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 51%, rgba(0,0,0,0) 100%);
	margin-top: 30vw;
	height: 25vw;
	width: 100%;
	margin-left: -5%;
	z-index: 100;
}


.spsnklogo {
	position: absolute;
	width: 15vw;
	margin-left: 10px;
	z-index:300;
}



.characterprofilewrp {
  margin-top: 10%;
  margin-bottom: 10%;
  display: flex;
  flex-direction: column;

}
				
.characterprofilewrp {
  margin-top: 10%;
  margin-bottom: 10%;
  display: flex;
  flex-direction: column;

}

.character_profile {
  display: flex;
  align-items: flex-start;
  padding: 0px;
  border-bottom:1px solid rgba(255,255,255,0.6);
  margin-bottom: 1%;
}

.profile_t {
  color: #fff;
  font-weight: 600;
  font-size: min(1vw, 20px);
  min-width: 9vw;
  flex-shrink: 0;
  margin-right: 0px;

  padding: 0% 2% 1% 0%;

}

.profile_d {
  color: #fff;
  font-weight: 500;
  font-size: min(1vw, 20px);
  flex: 1;
  word-wrap: break-word;

  padding: 0% 2% 1% 0%;

}

@media screen and (min-width:320px) and (max-width:1050px) {
  .profile_t {
    min-width: 27vw;
    font-size: min(3vw, 19px);
  }

  .profile_d {
    font-size: min(3vw, 19px);
  }


  .characterwrp {
    position: relative;
    width: 100%;
    margin-top: 0;
    height: auto;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 14%, rgba(0, 0, 0, 0.7) 88%, rgba(0, 0, 0, 0) 100%);
    z-index: 150;
  }
  }


.ft_creditarea {
  text-align: center;
  padding-top:15px;
  color:#fff;
}

.trigger3 {
  position: absolute;
  margin-top: -120%;
}


.cmlogo {
	position: absolute;
	margin-top: 0;
	right:0;
	width: 7%;
	z-index: 100;
}
@media screen and (min-width:320px) and (max-width:1050px) {
	.cmlogo {
	position: absolute;
	margin-top: 0%;
	right:0;
	width: 15%;
	z-index: 100;
}
}



/*スマホナビ*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;
  /*ナビの高さ*/
  background: #0445b3;
  /*動き*/
  transition: all 0.5s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
  right: 0;
}


/*ナビゲーション*/
#g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
	width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

/*リストのレイアウト設定*/

#g-nav li {
  list-style: none;
  text-align: center;
  margin-bottom: 1%;
  position: relative; /* 疑似要素を相対配置するために必要 */
	padding-top:2%;
	padding-bottom:4%;
}

#g-nav li::before {
  content: ""; 
  display: block;
  width: 8%; 
  height: 2px; 
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 46.2%; 
}

#g-nav li:first-child,
#g-nav li:last-child {
   /* 1段目と最終段の上の空きを非表示にする */
  padding-bottom: 0; /* 1段目と最終段の下の空きを非表示にする */
}

#g-nav li:first-child::before,
#g-nav li:last-child::before {
  display: none; /* 1段目と最終段のボーダーを非表示にする */
}



#g-nav li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/*タブレット*/
@media screen and (min-width:768px) and (max-width:1050px) {

  /*ナビゲーション*/
  #g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -55%);
  }

}


.openbtn1 {
  position: fixed;
  z-index: 1000;
  top: 0px;
  right: 5px;
  cursor: pointer;
  width: 50px;
  height: 50px;
}

.openbtn1 span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  background-color: #fff;
  width: 45%;
}

.openbtn1 span:nth-of-type(1) {
  top: 15px;
}

.openbtn1 span:nth-of-type(2) {
  top: 23px;
}

.openbtn1 span:nth-of-type(3) {
  top: 31px;
}

.openbtn1.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 45%;
  background-color: #fff;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 45%;
  background-color: #fff;
}

.textarea_gnav_sp {
	font-size: 4vw;
}


.loading-text {
  color:#10C6F6;
  font-weight: 600;
  font-size: 1vw;
  z-index: 2000;
}

.patch {
	position: absolute;
	width: 100.5%;
	bottom: 2.3vw;
}
@media screen and (min-width:320px) and (max-width:1050px) {
	.patch {
	position: relative;
	width: 100.5%;
	bottom: inherit;
		margin-top: 5%;
		margin-bottom: 10%;
		z-index: 100;
}
.loading-text {
  color:#10C6F6;
  font-weight: 600;
  font-size: 4vw;
  z-index: 2000;
}
}