@charset "utf-8";

/* CSS Document */

.cn * {
	font-family: 'Noto Sans SC', sans-serif;
}

@media screen and (min-width: 1100px) {
	.fixed-preorder--prepurchase .fixed-preorder-inner {
		font-size: 18px;
	}

}

@media screen and (max-width: 1099px) {
	.fixed-preorder.fixed-preorder--prepurchase {
		height: 34vw;
	}
}

.dmc-switch-downloadLink.u-inactive {
	pointer-events: none;
	box-shadow: none;
	background: #333;
	opacity: .5;
	border: none;
}


.law-manual-btn {
	margin-top: 2em;
	display: inline-block;
	border: 1px solid #fff;
	padding: .5em .8em;
	font-size: 1.25vw;
	color: #fff;
	text-decoration: none;
}

.law-manual-btn--mr {
	margin-right: 1em;
}

@media only screen and (max-width: 1100px) {
	.law-manual-btn {
		width: 48%;
		text-align: center;
		font-size: 3.148vw;
	}
	.law-manual-btn.law-manual-btn--sp-mt {
		margin-top: 1em;
	}
}


/*------------------------
	pre-order固定
------------------------*/

@media screen and (min-width:1100px) {
	.fixed-preorder {
		position: fixed;
		/*縦書き	*/
		top: 100px;
		right: 0;
		width: 60px;
		height: 186px;
		border-right: none;

		/*横書き*/
		text-align: center;
		/*
		top: 0;
		right: 0;
		border-top: none;
		width: 186px;
		height: 60px;
*/
		display: block;
		z-index: 100;
		background: #be000f;
		border: 1px solid #ff1729;
		text-decoration: none;
		color: #fff;
		filter: brightness(100%);
	}

	.fixed-preorder:hover {
		filter: brightness(110%);
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;

	}
	.en .fixed-preorder-inner {
		font-size: 25px;
	}

	.fixed-preorder-inner {
		/*縦書き		*/
		position: absolute;
		left: 50%;
		top: 50%;
		white-space: nowrap;
		transform: translate(-50%, -50%) rotate(90deg);

		line-height: 60px;
		display: block;
		text-decoration: none;
		font-size: 24px;
		text-indent: .02em;
		font-family: 'Noto Sans Japanese';
	}
}

@media screen and (max-width: 1099px) {
	.fixed-preorder {
		position: fixed;
		top: 80px;
		right: 0;
		width: 8vw;
		height: 20vw;

		border-right: none;

		display: block;
		z-index: 100;
		background: #be000f;
		border: 1px solid #ff1729;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}
	.fixed-preorder-inner {
		text-decoration: none;
		white-space: nowrap;
		font-size: 3.4vw;
		text-indent: .02em;
		line-height: 8vw;
		font-family: 'Noto Sans Japanese';
		position: absolute;
		left: 50%;
		top: 50%;
		white-space: nowrap;
		transform: translate(-50%, -50%) rotate(90deg);
	}
}

/*------------------------
	大人のスイッチバナー
------------------------*/

.switch-lineup-bnr {
	margin: 4em auto 0;
	text-align: center;
}

.switch-lineup-bnr img {
	border: 1px solid #fff;
}

@media screen and (max-width: 1099px) {
	.switch-lineup-bnr img {
		width: 100%;
	}

}

.top-pv {
	display: block;
	position: relative;

}

.top-pv .top-pv__image {
	border: 1px solid #f1f1f1;
}

@media only screen and (max-width: 1100px) {
	.top-pv {
		margin: 7vw 0 10vw;
	}
}

#wrapper .inner .top-pv-text {
	font-size: 2.5vw;
	color: #fff;
	font-family: 'Noto Serif Japanese';
	position: absolute;
	text-align: center;
	bottom: 22%;
	left: 50%;
	width: 100%;
	line-height: 1;
	z-index: 4;
	transform: translateX(-50%);
	text-shadow: 0px 0px 0.6em #000, 0px 0px 0.2em #000, 0px 0px 0.6em #000, 0px 0px 0.4em #000;

}

@media only screen and (max-width: 960px) {
	#wrapper .inner .top-pv-text {
		font-size: 5.4vw;
	}
}

.top-pv:hover img {
	opacity: 1;
}

.top-pv__start {
	opacity: 1 !important;
	position: absolute;
	top: 44%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 26% !important;
	z-index: 20;
}





/*------------------------
	PC
------------------------*/

#sns .snsList .youtubeIcon {
	width: 21%;
	margin-left: 8%;

}

.instagramIcon {
	width: 20%;
	margin-left: 15.6%;
}

.cn .dmc-switch-note,
.hk .dmc-switch-note {
	text-align: center;
}

.us #main .inner .system h3:before,
.us #main .inner .system h3:after,
.uk #main .inner .system h3:before,
.uk #main .inner .system h3:after {
	content: "GAMEPLAY SYSTEMS";
	top: 0;
	font-size: inherit;
}

.us #chara01 .inner h3:before,
.us #chara01 .inner h3:after,
.uk #chara01 .inner h3:before,
.uk #chara01 .inner h3:after {
	content: "CHARACTERS";
}


.hk .dmc-switch-date,
.cn .dmc-switch-date {
	font-size: 2.7vw;
}


@media screen and (min-width:1100px) {
	.us #main .inner .system h3,
	.uk #main .inner .system h3 {
		font-size: 5vw;
	}

	.uk .dmc-switch-date,
	.us .dmc-switch-date {
		font-size: 3.4vw;
	}
}


@media screen and (max-width: 1099px) {
	.us #main .inner .system h3,
	.uk #main .inner .system h3 {
		font-size: 380%;
	}
	.uk .dmc-switch-date,
	.us .dmc-switch-date,
	.hk .dmc-switch-date,
	.cn .dmc-switch-date {
		font-size: 5.8vw;
	}
}

.us .rating-image.us-esrb {
	width: 170px;
}

@media screen and (max-width: 1099px) {
	.us .rating-image.us-esrb {
		width: 150px;
	}
	.uk #main .inner h4,
	.us #main .inner h4,
	.hk #main .inner h4,
	.cn #main .inner h4 {
		white-space: normal;
	}
}

.rating-image--pegi {
	width: 68px;
}


@media screen and (min-width:1100px) {
	/*------------------------
	switch 
------------------------*/
	#wrapper .inner .dmc-switch-downloadLink p {
		font-size: 1.5vw;
	}
	.cn #wrapper .inner .dmc-switch-downloadLink p,
	.hk #wrapper .inner .dmc-switch-downloadLink p,
	.uk #wrapper .inner .dmc-switch-downloadLink p,
	.us #wrapper .inner .dmc-switch-downloadLink p {
		font-size: 1.5vw;
	}
	.top-pv {
		margin-top: 2.4vw;
		margin-bottom: 4vw;
	}
	.top-pv__image {
		filter: brightness(100%);
		transition: .3s;
	}
	.top-pv:hover .top-pv__image {
		filter: brightness(80%);
	}
	.dmc-switch-date .dmc-switch-date--en {
		font-size: 3.4vw;
	}
	.dmc-switch-date .dmc-switch-date--hk {
		font-size: 2.6vw;
	}
	.dmc-switch-date .dmc-switch-date--cn {
		font-size: 2.5vw;
	}
	.spec .series {
		margin: 2em auto 0;
		width: 570px;
		clear: both;
	}

	.spec .series a {
		position: relative;
		border: solid 1px white;
		text-decoration: none;
		color: white;
		display: block;
		margin: 0 auto;
		padding: 4% 6%;
		line-height: 1.4em;
		position: relative;
		box-sizing: border-box;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.spec .series a:hover {
		border: solid 1px #960000;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.spec .series a p {
		color: white;
		font-family: 'Noto Sans Japanese';
		font-size: 120%;
		font-weight: 500;
		line-height: 1.4em;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.spec .series a:hover p {
		color: #960000;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.spec .series a p {
		text-align: center;
		color: white;
		font-family: 'Noto Sans Japanese';
		font-size: 120%;
		font-weight: 500;
		line-height: 1.4em;
		transition: all 0.3s ease-in-out;

	}
	.spec .series p:before {
		position: absolute;
		content: "";
		display: inline-block;
		-webkit-transform: translateY(-50%) rotate(135deg);
		-ms-transform: translateY(-50%) rotate(135deg);
		transform: translateY(-50%) rotate(135deg);
		position: absolute;
		right: 20px;
		top: 50%;
		width: 10px;
		height: 10px;
		border-top: solid 2px #ffffff;
		border-left: solid 2px #ffffff;
		display: block;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.spec .series a:hover p:before {
		border-color: #960000;
	}
	#main .inner .system h3 {
		font-size: 6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 1.5em 0 0.2em;
		position: relative;
	}
	#main .inner .system h3:before {
		content: "SYSTEM";
		position: absolute;
		left: 0.15%;
		top: 0;
	}
	#main .inner .system .system-ttl--en:before {
		content: "Game Systems";
		position: absolute;
		left: 0.15%;
	}
	#main .inner .system h3:after {
		content: "SYSTEM";
		position: absolute;
		left: 0.3%;
		top: 0;
	}
	#main .inner .system .system-ttl--en:after {
		content: "Game Systems";
		position: absolute;
		left: 0.15%;
		top: 0;
	}


	#main .inner .system p {
		margin-top: 2em;
	}
	.system-text {
		margin-bottom: 5em;
	}

	.chara1-text,
	.chara2-text,
	.chara3-text {
		margin-top: 2.5em;
	}

	.devilTrigger-text {
		padding-bottom: 10em;
	}

	#wrapper .inner .dmc-switch-note {
		margin-top: 2.4em;
		font-size: .85vw;
	}

	.spec-note {
		color: #fff;
		line-height: 1.4;
		margin-top: 2em;
	}
	.switch-logo {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 5.9375vw;
		max-width: 114px;
	}
	.dmc-switch-downloadLink {
		filter: brightness(100%);
		box-shadow: 0px 0px 10px 0px #ff0000;
		border: solid 1px #ff1729;
		text-decoration: none;
		color: white;
		display: block;
		margin: 0 auto;
		padding: 3% 6% 3% 1%;
		line-height: 1.4em;
		/* Old browsers */
		background: -moz-linear-gradient(top, #d10010 1%, #a8000d 100%);
		/* FF3.6-15 */
		background: -webkit-linear-gradient(top, #d10010 1%, #a8000d 100%);
		/* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #d10010 1%, #a8000d 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		position: relative;
		box-sizing: border-box;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		width: 66%;
		text-align: center;
		margin-top: 6.25%;

	}
	.dmc-switch-downloadLink:hover {
		filter: brightness(110%);
		box-shadow: 0px 0px 16px 0px #ff0000;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;

	}
	.dmc-switch-downloadLink p {
		color: white;
		font-family: 'Noto Sans Japanese';
		font-size: 1.1vw;
		font-weight: 500;
		line-height: 1.4em;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.dmc-switch-downloadLink span {
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		right: 7%;
		top: 40%;
		width: 1vw;
		height: 1vw;
		border-top: solid 2px #ffffff;
		border-left: solid 2px #ffffff;
		display: block;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.dmc-switch-ecrmLink {
		border: solid 1px white;
		text-decoration: none;
		color: white;
		display: block;
		margin: 0 auto;
		padding: 1.4em 1% 1.4em 1%;
		line-height: 1.4em;
		background: black;
		position: relative;
		box-sizing: border-box;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		width: 400px;
		text-align: center;
		margin-top: 16px;

	}
	.dmc-switch-ecrmLink:hover {
		border: solid 1px #960000;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.dmc-switch-ecrmLink p {
		color: white;
		font-family: 'Noto Sans Japanese';
		font-size: 1.1vw;
		font-weight: 500;
		line-height: 1.4em;
		text-align: center;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.dmc-switch-ecrmLink:hover p {
		color: #960000;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.dmc-switch-ecrmLink:hover span {
		border-top: solid 2px #960000;
		border-left: solid 2px #960000;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.dmc-switch-ecrmLink span {
		-webkit-transform: translateY(-50%) rotate(135deg);
		-ms-transform: translateY(-50%) rotate(135deg);
		transform: translateY(-50%) rotate(135deg);
		position: absolute;
		right: 7%;
		top: 50%;
		width: 10px;
		height: 10px;
		border-top: solid 2px #ffffff;
		border-left: solid 2px #ffffff;
		display: block;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.mv-inner {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 17%;
		z-index: 2;
	}
	a:hover .mv-inner img {
		opacity: 1;
	}
	#wrapper .inner .trailerText {
		color: #fff;
		font-size: 2.5vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		text-align: center;
		margin-top: .33em;
	}
	#wrapper {
		background: url(../images/common/conts_bg01.jpg) right repeat-y, black;
	}
	#wrapper .inner p {
		font-family: 'Noto Sans Japanese';
		font-size: 1vw;
		font-weight: 500;
		line-height: 2em;
		letter-spacing: 0.1em;

	}
	.products {
		background: url(../images/common/sku-bg.jpg);
		background-size: 100% auto;
		background-repeat: repeat;
		padding: 8.541% 0 6.25%;
	}
	.products-ttl {
		font-family: 'Cinzel', serif;
		font-size: 5.2083vw;
		color: #fff;
		text-align: center;
		margin-bottom: 4.1666vw;
	}
	.products-sku {
		min-height: 100px;
		border: 1px solid #777;
		background: rgba(0, 0, 0, .8);
		width: 78.125%;
		margin: 0 auto;
	}

	.dmc-switch-intro {
		font-size: 2.3vw;
		font-weight: bold;
		color: #fff;
		font-family: 'Noto Serif Japanese';
		line-height: 1.6;
		text-align: center;
		margin-bottom: 1em;
	}
	.dmc-switch-date {
		text-align: center;
		font-family: 'Noto Serif Japanese';
		font-size: 3.4vw;
		line-height: 1;
		font-weight: bold;
	}

	.dmc-switch-date.dmc-switch-date--hk {
		font-size: 3vw;
	}
	.dmc-switch-date.dmc-switch-date--cn {
		font-size: 2.5vw;
	}
	.dmc-switch-date--small {
		font-size: .7em;
		padding-right: .3em;
	}
	.dmc-switch-date--strong {
		letter-spacing: .2em;
	}
	.dmc-switch-date--day {
		margin: 0 -.5em;
	}
	.dmc-switch-image {
		width: 68.75%;
		margin: 6.25% auto 10.8333%;
	}
	.dmc-switch-image img {
		width: 100%;
	}
	.intro-text {
		margin-bottom: 3em;
	}
	.intro-image {
		margin-bottom: 10%;
	}
	/*------------------------
		split
	------------------------*/
	.split {
		position: relative;
		display: block;
		width: 100%;
		letter-spacing: -.40em;
		line-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	.inner {
		position: relative;
		padding: 0;
		margin: 0;
		display: inline-block;
		line-height: 0;
		position: relative;
		width: 50%;
		box-sizing: border-box;
		letter-spacing: normal;
		vertical-align: top;
	}

	.split_img > img {
		width: 100%;
	}
	.split_img {
		width: 50%;
		display: inline-block;
		height: 100%;
		line-height: 0;
		vertical-align: top;
		background-size: 50% auto !important;
		background-position: top bottom;
	}
	#scroll {
		right: 0;
		top: 0;
		position: fixed;
	}
	/*------------------------
		main
	------------------------*/
	#main {}
	#main .split_img {
		background: url(../images/dmc3/main_img01.jpg) 0 0 no-repeat fixed, black;
	}
	#main .inner {
		color: white;
		padding: 0 4%;
	}
	#main .inner h2 {
		width: 120%;
		margin-left: -10%;
		margin-top: 10%;
	}
	#main .inner h4 {
		color: white;
		font-family: 'Noto Serif Japanese';
		font-size: 2.6vw;
		font-weight: 700;
		line-height: 1.4em;
		margin-bottom: 1em;
	}
	#main .inner .dmc3-system-lead {
		font-size: 1vw;
		line-height: 2em;
	}
	#main .inner .en-introLead {
		margin-bottom: 4em;
	}
	.en #main .inner h4 {
		font-size: 2.1vw;
	}
	#main .inner .img02 {
		margin-top: 4em;

		margin-bottom: 10%;
		position: relative;
	}
	#main .inner .img02 img {
		border: 1px solid #f1f1f1;
	}
	#main .inner .story {
		margin-bottom: 7em;
	}
	#main .inner .story h3 {
		font-size: 6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 0 0 0.2em;
		position: relative;
	}
	#main .inner .story h3:before {
		content: "STORY";
		position: absolute;
		left: 0.15%;
	}
	#main .inner .story h3:after {
		content: "STORY";
		position: absolute;
		left: 0.3%;
	}
	#main .inner .story h4 {
		margin: 0 0 1em;
	}

	#main .inner .story p {
		margin-top: 2em;
	}
	.en #main .inner .img03 {
		margin-bottom: 30px;
	}
	.en #main .inner .img04 {
		margin-top: 0;
	}
	#main .inner .img04 {
		margin: 4.8em 0 2.5em;
	}
	/*------------------------
		chara01
	------------------------*/
	#chara01 .split_img {
		background: url(../images/dmc3/chara01_img01.jpg) 0 0 no-repeat fixed, black;
	}
	#chara01 .inner {
		color: white;
		padding: 0 4%;
	}
	#chara01 .inner h3 {
		font-size: 6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 1em 0 .9em;
		position: relative;
	}
	#chara01 .inner h3:before {
		content: "CHARACTER";
		position: absolute;
		left: 0.15%;
	}
	#chara01 .inner .character-ttl--en:before {
		content: "Characters";
		position: absolute;
		left: 0.15%;
		top: 0;
	}
	#chara01 .inner h3:after {
		content: "CHARACTER";
		position: absolute;
		left: 0.3%;
	}
	#chara01 .inner .character-ttl--en:after {
		content: "Characters";
		position: absolute;
		left: 0.15%;
		top: 0;
	}
	#chara01 .inner .img02 {
		margin-top: 3em;
	}
	#chara01 .inner h4 {
		font-size: 3.6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 1em 0 0.5em;
		position: relative;
		letter-spacing: 0.05em;
	}
	/*
	#chara01 .inner h4:before {
		content: "DANTE";
		position: absolute;
		left: 0.15%;
	}
	#chara01 .inner h4:after {
		content: "DANTE";
		position: absolute;
		left: 0.3%;
	}
*/
	#chara01 .inner h4 span {
		font-size: 50%;
		font-family: 'Noto Serif Japanese';
		margin-left: 1.5em;
		position: absolute;
		font-weight: 700;
		top: 15%;
	}
	#chara01 .inner h4 span:before {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		left: -30%;
	}
	#chara01 .inner h4 span:after {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		right: -30%;
	}
	#chara01 .inner p {
		margin-bottom: 10em;
	}
	/*------------------------
		chara02
	------------------------*/
	#chara02 .split_img {
		background: url(../images/dmc3/chara02_img01.jpg) 0 0 no-repeat fixed, black;
	}
	#chara02 .inner {
		color: white;
		padding: 0 4%;
	}
	#chara02 .inner h3 {
		font-size: 6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 1em 0;
		position: relative;
	}


	#chara02 .inner h4 {
		font-size: 3.6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 2em 0 0.5em;
		position: relative;
		letter-spacing: 0.05em;
	}
	/*
	#chara02 .inner h4:before {
		content: "TRISH";
		position: absolute;
		left: 0.15%;
	}

	#chara02 .inner h4:after {
		content: "TRISH";
		position: absolute;
		left: 0.3%;
	}
*/
	#chara02 .inner h4 span {
		font-size: 50%;
		font-family: 'Noto Serif Japanese';
		margin-left: 1.5em;
		position: absolute;
		font-weight: 700;
		top: 15%;
	}
	#chara02 .inner h4 span:before {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		left: -28%;
	}
	#chara02 .inner h4 span:after {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		right: -28%;
	}
	#chara02 .inner p {
		margin-bottom: 10em;
	}


	/*------------------------
		chara03
	------------------------*/
	#chara03 .split_img {
		background: url(../images/dmc3/chara03_img01.jpg) 0 0 no-repeat fixed, black;
	}

	#chara03 .inner {
		color: white;
		padding: 0 4%;
	}

	#chara03 .inner h3 {
		font-size: 6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 1em 0;
		position: relative;
	}


	#chara03 .inner h4 {
		font-size: 3.6vw;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 2em 0 0.5em;
		position: relative;
		letter-spacing: 0.05em;
	}

	/*
	#chara02 .inner h4:before {
		content: "TRISH";
		position: absolute;
		left: 0.15%;
	}

	#chara02 .inner h4:after {
		content: "TRISH";
		position: absolute;
		left: 0.3%;
	}
*/
	#chara03 .inner h4 span {
		font-size: 50%;
		font-family: 'Noto Serif Japanese';
		margin-left: 1.5em;
		position: absolute;
		font-weight: 700;
		top: 15%;
	}

	#chara03 .inner h4 span:before {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		left: -28%;
	}

	#chara03 .inner h4 span:after {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		right: -28%;
	}

	#chara03 .inner p {
		margin-bottom: 10em;
	}

}

/*------------------------
	SP・TB
------------------------*/

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

	#wrapper .inner p {
		font-family: 'Noto Sans Japanese';
		font-size: 100%;
		font-weight: 500;
		line-height: 2em;
		letter-spacing: 0.1em;
	}
	.intro-image {
		margin-top: 8%;
	}
	.sp-gradient {
		height: 150vw;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%);
		/* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%);
		/* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}

	/*------------------------
	switch 
------------------------*/
	.series {
		position: relative;
		width: 100%;
		margin: 1.5em auto 2em;
	}
	.dmc-switch-ecrmLink {
		position: relative;
		width: 88.889%;
		margin: 4% auto 0;
	}

	.series a,
	.dmc-switch-ecrmLink {
		border: solid 1px white;
		text-decoration: none;
		color: white;
		display: block;
		font-weight: 700;
		padding: 5% 0;
		line-height: 1.4em;
		font-size: 94%;
		font-family: 'Noto Sans Japanese';
	}

	.series a p,
	.dmc-switch-ecrmLink p {
		margin: 0 3%;
		text-align: center;
	}

	.series a p:before,
	.dmc-switch-ecrmLink p:before {
		content: "";
		display: inline-block;
		-webkit-transform: translateY(-50%) rotate(135deg);
		-ms-transform: translateY(-50%) rotate(135deg);
		transform: translateY(-50%) rotate(135deg);
		position: absolute;
		right: 4%;
		top: 50%;
		width: 2.3vw;
		height: 2.3vw;
		border-top: solid 2px #ffffff;
		border-left: solid 2px #ffffff;
		display: block;
	}
	#wrapper .inner .dmc-switch-note {
		margin-top: 1.6em;
		font-size: 1.8vw;
	}
	.spec-note {
		color: #fff;
		font-size: 1.8vw;
		line-height: 1.4;
		margin-top: 2em;
	}
	.switch-logo {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 12.5vw;
		max-width: 114px;
	}

	.dmc-switch-downloadLink {
		position: relative;

		text-decoration: none;
		color: white;
		display: block;
		font-weight: 500;
		background: black;
		padding: 4.5% 0;
		line-height: 1.4em;
		text-align: center;
		font-family: 'Noto Sans Japanese';
		margin-top: 6%;
		box-shadow: 0px 0px 10px 0px #ff0000;
		border: solid 1px #ff1729;
		background: #d10010;
		/* Old browsers */
		background: -moz-linear-gradient(top, #d10010 1%, #a8000d 100%);
		/* FF3.6-15 */
		background: -webkit-linear-gradient(top, #d10010 1%, #a8000d 100%);
		/* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #d10010 1%, #a8000d 100%);
		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}

	#wrapper .inner .dmc-switch-downloadLink p {
		color: white;
		font-family: 'Noto Sans Japanese';
		font-weight: 500;
		line-height: 1.4em;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		font-size: 140%;
	}

	.dmc-switch-downloadLink span {
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		right: 6%;
		top: 36%;
		width: 3vw;
		height: 3vw;
		border-top: solid 2px #ffffff;
		border-left: solid 2px #ffffff;
		display: block;
	}
	.mv-inner {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 19%;
		z-index: 2;
		width: 32%;
	}

	#wrapper .inner .trailerText {
		color: #fff;
		font-size: 12px;
		font-family: 'Cinzel', serif;
		line-height: 1;
		text-align: center;
		margin-top: .33em;
	}
	#wrapper {
		background: url(../images/common/conts_bg01.jpg) right repeat-y;
	}

	#wrapper .inner p {
		font-family: 'Noto Sans Japanese';
		font-size: 100%;
		font-weight: 500;
		line-height: 2em;
		letter-spacing: 0.1em;
	}

	.products {
		background: url(../images/common/sku-bg.jpg);
		background-size: 100% auto;
		background-repeat: repeat;
		padding: 12% 3.7% 14%;
	}
	.products-ttl {
		font-family: 'Cinzel', serif;
		font-size: 460%;
		color: #fff;
		text-align: left;
		margin-bottom: .4em;
	}
	.products-sku {
		min-height: 100px;
		border: 1px solid #777;
		background: rgba(0, 0, 0, .8);
		width: 100%;
		margin: 0 auto;
	}

	.dmc-switch-intro {
		font-size: 5.605vw;
		font-weight: bold;
		color: #fff;
		font-family: 'Noto Serif Japanese';
		line-height: 1.6;
		text-align: center;
		margin-bottom: 1em;
	}
	.dmc-switch-date {
		text-align: center;
		font-family: 'Noto Serif Japanese';
		font-size: 7.4vw;
		line-height: 1;
		font-weight: bold;
	}
	.dmc-switch-date.dmc-switch-date--hk {
		font-size: 6.8vw;
	}
	.hk .dmc-switch-date {
		font-size: 6.4vw;
	}
	.dmc-switch-date .dmc-switch-date--cn {
		font-size: 5.2vw;
	}
	.dmc-switch-date--small {
		font-size: .7em;
		padding-right: .3em;
	}
	.dmc-switch-date--strong {
		letter-spacing: .2em;
	}
	.dmc-switch-date--day {
		margin: 0 -.5em;
	}
	.dmc-switch-image {
		width: 68.75%;
		margin: 6.25% auto 10%;
	}
	.dmc-switch-image img {
		width: 100%;
	}

	#main .inner .system h3 {
		font-size: 530%;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 1.5em 0 0;
		position: relative;
	}
	#main .inner .system h3:before {
		content: "SYSTEM";
		position: absolute;
		left: 0.15%;
	}
	#main .inner .system .system-ttl--en:before {
		content: "Game Systems";
		top: 0;
	}

	#main .inner .system .system-ttl--en:after {
		content: "Game Systems";
	}
	#main .inner .system h4 {
		margin: .4em 0 1em;
	}
	.devilTrigger-text {
		margin: 1em 0 7em;
	}
	.chara1-text,
	.chara2-text,
	.chara3-text {
		margin-top: 1em;
		color: #fff;
	}
	.system-text {
		margin-bottom: 3em;
	}

	/*------------------------
		main
	------------------------*/
	#main {
		background: url(../images/dmc3/main_img01_sp.png) center top no-repeat;
		background-size: 100% auto;
	}
	#main .inner {
		color: white;
		padding: 0 3.7%;
	}
	#main .inner h2 {
		width: 107.2%;
		margin: 0 -3.7%;
		padding-top: 94%;
	}
	#main .inner h4 {
		color: white;
		font-family: 'Noto Serif Japanese';
		font-size: 200%;
		font-weight: 700;
		line-height: 1.4em;
		margin-bottom: 0.6em;
	}
	#main .inner .dmc3-system-lead {
		font-size: 100%;
		line-height: 2em;
	}
	.cn #main .inner .dmc3-system-lead {
		font-size: 100%;
	}
	.en #main .inner h4,
	.hk #main .inner h4,
	.cn #main .inner h4 {
		white-space: normal;
		font-size: 170%;
	}
	#main .inner .img02 {
		margin-top: 3em;
		margin-bottom: 2em;
		position: relative;

	}
	#main .inner .img02 img {
		border: 1px solid #fff;
	}
	#main .inner .story {
		margin-bottom: 7em;
	}
	#main .inner .story h3 {
		font-size: 530%;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 1.32em 0 0;
		position: relative;
	}
	#main .inner .story h3:before {
		content: "STORY";
		position: absolute;
		left: 0.15%;
	}
	#main .inner .story h3:after {
		content: "STORY";
		position: absolute;
		left: 0.3%;
	}
	.cn #main .inner .story h4 {
		font-size: 180%;
	}
	#main .inner .story h4 {
		margin: .4em 0 1em;
	}
	#main .inner .img03 {
		margin-bottom: 1em;
	}
	.en #main .inner .img04 {
		margin-top: 0;
	}
	#main .inner .img04 {
		margin: 3em 0 1em;
	}
	.en #chara01 .inner h3 {
		font-size: 440%;
	}
	/*------------------------
		chara01
	------------------------*/
	#chara01 .inner {
		color: white;
		padding: 0 3.7%;
	}
	#chara01 .inner h3 {
		font-size: 460%;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin-bottom: 0.2em;
		position: relative;
		white-space: nowrap;
	}
	#chara01 .inner h3:before {
		content: "CHARACTER";
		position: absolute;
		left: 0.15%;
	}
	#chara01 .inner h3:after {
		content: "CHARACTER";
		position: absolute;
		left: 0.3%;
	}
	#chara01 .inner .character-ttl--en:before {
		content: "Characters";
		position: absolute;
		left: 0.15%;
	}
	#chara01 .inner .character-ttl--en:after {
		content: "Characters";
		position: absolute;
		left: 0.15%;
	}

	#chara01 .inner .img01 {
		width: 107.4%;
		margin: 0 -3.7%;
	}
	#chara01 .inner h4 {
		font-size: 300%;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: .8em 0 .5em;
		position: relative;
		letter-spacing: 0.05em;
	}
	#chara01 .inner h4:before {
		content: "DANTE";
		position: absolute;
		left: 0.15%;
	}
	#chara01 .inner h4:after {
		content: "DANTE";
		position: absolute;
		left: 0.3%;
	}
	#chara01 .inner h4 span {
		font-size: 50%;
		font-family: 'Noto Serif Japanese';
		margin-left: 1.5em;
		position: absolute;
		font-weight: 700;
		top: 15%;
	}
	#chara01 .inner h4 span:before {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		left: -30%;
	}
	#chara01 .inner h4 span:after {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		right: -30%;
	}
	#chara01 .inner p {
		margin-bottom: 5em;
	}
	/*------------------------
		chara02
	------------------------*/
	#chara02 .inner,
	#chara03 .inner {
		color: white;
		padding: 0 3.7%;
	}
	#chara02 .inner h3,
	#chara03 .inner h3 {
		font-size: 460%;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin-bottom: 0.2em;
		position: relative;
	}
	#chara02 .inner .img01,
	#chara03 .inner .img01 {
		width: 107.4%;
		margin: 0 -3.7%;
	}
	#chara02 .inner h4,
	#chara03 .inner h4 {
		font-size: 300%;
		font-family: 'Cinzel', serif;
		line-height: 1;
		margin: 0.5em 0 0.3em;
		position: relative;
		letter-spacing: 0.05em;
	}
	#chara02 .inner h4:before {
		content: "VERGIL";
		position: absolute;
		left: 0.15%;
	}
	#chara03 .inner h4:before {
		content: "LADY";
		position: absolute;
		left: 0.15%;
	}
	#chara02 .inner h4:after {
		content: "VERGIL";
		position: absolute;
		left: 0.3%;
	}
	#chara03 .inner h4:after {
		content: "LADY";
		position: absolute;
		left: 0.3%;
	}
	#chara02 .inner h4 span,
	#chara03 .inner h4 span {
		font-size: 50%;
		font-family: 'Noto Serif Japanese';
		margin-left: 1.5em;
		position: absolute;
		font-weight: 700;
		top: 15%;
	}
	#chara02 .inner h4 span:before,
	#chara03 .inner h4 span:before {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		left: -28%;
	}
	#chara02 .inner h4 span:after,
	#chara03 .inner h4 span:after {
		content: "";
		width: 0.7em;
		height: 2px;
		display: block;
		background: white;
		position: absolute;
		top: 50%;
		right: -28%;
	}
	#chara02 .inner p,
	#chara03 .inner p {
		margin-bottom: 7em;
	}
}

@media screen and (max-width: 480px) {
	#wrapper .inner .dmc-switch-note {
		font-size: 11px;
		text-indent: -1em;
		padding-left: 1em;
	}
}

/*------------------------
		spec
	------------------------*/

.spec {
	background: rgba(0, 0, 0, .8);
	padding: 3.90625vw 16vw 2.604vw;
	margin: 0 auto;
	border-bottom: solid #444 1px;
	font-family: 'Noto Sans Japanese';
}



@media only screen and (max-width: 1100px) {
	.spec {
		margin: 0 auto;
		padding: 7.037037vw 5.5555vw 5.5555vw;
	}
}


.spec-ttl {
	color: #fff;
	font-weight: bold;
	font-size: 1.4583vw;
	margin-bottom: 1.65em;
}

@media only screen and (max-width: 1100px) {
	.spec-ttl {
		color: #fff;
		font-size: 4.2vw;
		margin-bottom: 1.6em;
	}
}

.spec-list {
	margin: 0 auto -1.25vw;
}

@media only screen and (max-width: 1100px) {

	.spec-list {
		margin-bottom: -1em;
	}
}

.spec-list:after {
	content: "";
	display: table;
	clear: both;

}

.spec-list .spec-item:nth-of-type(2n) {
	margin-right: 0;
}

.spec-item {
	float: left;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 1.25vw;
	margin-right: 3.645vw;
	margin-bottom: 1em;
	width: 48%;
	margin-right: 4%;
}

@media only screen and (max-width: 1100px) {
	.spec-item {
		width: 100%;
		font-size: 3.148vw;
		margin-bottom: 1em;
		margin-right: 0;
	}
}

@media screen and (max-width:480px) {
	.spec-item {
		font-size: 11px;
	}
}

.spec-item.rating-wrap {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.spec-item__head {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	color: rgba(255, 255, 255, .6);
}

.spec-item__data {
	color: #fff;
}

.spec-note-list {
	margin-bottom: -1em;
}

.spec-note-item {
	color: #fff;
	font-size: .9375vw;
	text-align: center;
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 1em;
}

@media only screen and (max-width: 1300px) {
	.spec-note-item {
		font-size: 12px;
	}
}

@media only screen and (max-width: 1100px) {
	.spec-note-item {
		text-align: left;
		font-size: 2.8vw;
	}
}


@media screen and (max-width: 480px) {
	.spec-note {
		font-size: 11px;
		text-indent: -1em;
		padding-left: 1em;
	}
}

.rating-wrap,
.cero-wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.cero-wrap--bio0-package {
	margin-top: 4%;
}

@media only screen and (max-width: 1100px) {
	.cero-wrap--bio0-package {
		margin-top: 10%;
	}
}

.cero-wrap--mb {
	margin-bottom: 4%;
}

.rating-head,
.cero-wrap {

	font-size: 1.25vw;
	color: rgba(255, 255, 255, .6);
}

@media only screen and (max-width: 1100px) {
	.rating-head,
	.cero-wrap {
		font-size: 3.48148vw;
	}
}

.rating-data,
.cero-wrap {
	font-size: 1.25vw;
	color: #fff;
	margin-right: 1em;
}

@media only screen and (max-width: 1100px) {
	.spec-item .rating__head,
	.spec-item .rating-data {
		font-size: 3.148vw;
	}

}

.rating-image,
.cero-image {
	min-width: 30px;
}

.rating-image.us-esrb {
	min-width: 140px;
}

@media only screen and (max-width: 1100px) {
	.rating-image,
	.cero-image {
		width: 6vw;
	}

}

.rating-image img,
.cero-image img {
	width: 100%;
}

@media only screen and (max-width: 1100px) {
	.rating-image,
	.cero-image {
		width: 8vw;
	}
}

/*------------------------
	end of	spec
	------------------------*/

/*------------------------
		#sns
	------------------------*/

@media only screen and (max-width: 1100px) {
	.hk #sns .snsList,
	.cn #sns .snsList {
		width: 30%;
	}
	.hk #sns .snsList li:nth-child(1),
	.cn #sns .snsList li:nth-child(1) {
		width: 26.42487%;
	}
	.hk #sns .snsList li:nth-child(2),
	.cn #sns .snsList li:nth-child(2) {
		width: 26.42487%;
	}
	.hk #sns .snsList li:nth-child(3),
	.cn #sns .snsList li:nth-child(3) {
		width: 26.42487%;
	}
}

.global-portal #sns {
	background: none;
	margin-bottom: 3vw;
}

#sns {
	font-family: 'Noto Sans Japanese';
	border-top: none;
	border-bottom: none;
	padding-top: 2.1vw;
	padding-bottom: 1.74997vw;
	text-align: center;
	background: #000;
}

@media only screen and (max-width: 1100px) {
	#sns {
		padding: 4vw 0;
	}
}

#sns .listTtl {
	color: #ccc;
	font-size: 1.25vw;
	margin-bottom: 1.49775vw;
	text-align: center;
}

@media only screen and (max-width: 1100px) {
	#sns .listTtl {
		font-size: 3.75vw;
		margin-bottom: 14px;
	}
}

#sns > div {
	width: 100%;
}

#sns img {
	width: 100%;
}

#sns .snsList {
	margin-bottom: 2.77778vw;
	width: 16%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 0 auto;
}

@media only screen and (max-width: 1100px) {
	#sns .snsList {
		width: 50%;
	}
}

#sns .snsList li:nth-child(1) {
	width: 17.61658%;
	margin-right: 6%;
}

#sns .snsList li:nth-child(2) {
	width: 17.61658%;
}

@media only screen and (min-width: 1100px) {
	#sns .snsList a {
		-webkit-transition: .3s ease;
		transition: .3s ease;
	}
	#sns .snsList a:hover {
		opacity: .5;
	}
}

/*------------------------
	end of	#sns
	------------------------*/

/*------------------------
	selectlang
	------------------------*/

.c-selectLang {
	font-family: 'Noto Sans Japanese';
	border-top: solid #444 1px;
	background: #000;
	text-align: center;
	padding: 1.3em 0;
	font-size: 1.26vw;
}

@media only screen and (max-width: 1100px) {
	.c-selectLang {
		font-size: 2.375vw;
	}
}

@media only screen and (max-width: 600px) {
	.c-selectLang {
		font-size: 14px;
	}
}

.c-selectLang a {
	position: relative;
	color: #fff;
	text-decoration: none;
}

.c-selectLang a:before {
	content: "";
	background: url(../images/common/selectLang-icon.png) center no-repeat;
	background-size: contain;
	content: '';
	display: block;
	height: 1em;
	width: 1em;
	position: absolute;
	top: 52%;
	left: -1.5em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*------------------------
	endo of selectlang
	------------------------*/

@media screen and (max-width:480px) {
	#wrapper .inner p {
		font-size: 11px;
		line-height: 1.55;
	}
	#wrapper .inner .dmc-switch-note {
		font-size: 10px;
	}
}

.en #wrapper .inner .dmc-switch-note,
.en .spec-note {
	text-indent: -.5em;
	padding-left: .5em;
}

@media screen and (max-width:350px) {
	.series a p:before,
	.dmc-switch-ecrmLink p:before {
		right: 2%;
	}
}