@charset "utf-8";
@import url('https://use.fontawesome.com/releases/v5.14.0/css/all.css');	/* FontAwesome */


body,div,pre,blockquote,
embed,object,fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/*----------------------------------------------------------------------------------
common
----------------------------------------------------------------------------------*/
html::-webkit-scrollbar { background: #f1f1f1; }
html::-webkit-scrollbar-thumb { background: #a8a8a8; box-shadow: inset 0 0 0 2px #f1f1f1; }
html::-webkit-scrollbar-corner { background: #dcdcdc; }
html::-webkit-scrollbar-button:vertical:start:decrement		{ display: block; background-image: url(../images/common/btn_vdec.png); }
html::-webkit-scrollbar-button:vertical:end:increment		{ display: block; background-image: url(../images/common/btn_vinc.png); }
html::-webkit-scrollbar-button:horizontal:start:decrement	{ display: block; background-image: url(../images/common/btn_hdec.png); }
html::-webkit-scrollbar-button:horizontal:end:increment		{ display: block; background-image: url(../images/common/btn_hinc.png); }

body {
	overflow-y: scroll;

}
html {
	font-size: 62.5%;
}
body * {
	font-size: 12px;
	font-size: 1.2rem;
}


html, body, #wrap {
	width: 100%;
	height: 100%;
}


body {
	position: relative;
	margin: 0;
	background-color: #302828;
	color: #fff;
}



#wrap {
	position: relative;
/*	max-width: 1920px;*/
	min-width: 1024px;
	margin: 0 auto;
	transition: opacity 0.3s;
}

h2, section:not(#character) section h3 {
	position: relative;
	text-align: center;
	font-family: Kaisho MCBK1;
	font-weight: 900;
	font-style: normal;
	transition: 0.3s;
}
.inner section:nth-child(2) h3 {
	margin-top: 0;
}
html.loading h2 {
	text-shadow: 0 -1px 10px rgba(255, 51, 0, 0);
	color: #fff0 !important;
}
html.loading h3 {
	text-shadow: 0 0 8px rgba(80, 50, 0, 0);
	color: #fff0 !important;
}
h2 {
	margin-top: 0;
	padding-top: 50px;
	height: 90px;
	font-size: 5rem;
	text-shadow: 0 0 12px #c60005,0 0 12px #c60005;
    color: #fff !important;
}
h2:before ,
h2:after {
	display: inline-block;
	content: " ";
	background-image: url(../images/common/h2.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	width: 130px;
    height: 55px;
    vertical-align: bottom;
}
h2:before { transform: scale(-1, 1); margin-right: 30px; }
h2:after {  margin-left: 30px; }


section > h3 {
	height: 83px;
	background: url(../images/common/h3.png) center bottom no-repeat;
	background-size: contain;
	font-size: 3rem;
	line-height: 77px;
	text-shadow: 0 0 8px rgba(80, 50, 0, 1);
	color: #fff !important;
}
section > h3 small {
	font-size: 2.5rem;
}
section > h3 br {
	display: none;
}

a {
	color: inherit;
	opacity: 1;
	transition: opacity 0.3s;
	text-decoration: none;
	font-size: inherit;
}


/*lightbox*/
a.lightbox {
	width: 100%;
	display: block;
	position: relative;
}


a i {
	color: inherit;
}
a:hover {
	opacity: 0.75;
}

dt {
	position: relative;
	float: left;
	margin-bottom: 5px;
	padding-left: 18px;
}
dl.dtw-50 dt { width: 50px; }
dl.dtw-100 dt { width: 100px; }
dl.dtw-150 dt { width: 150px; }
dl.dtw-200 dt { width: 200px; }

dt:before {
	content: " ";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	display: block;
	width: 6px;

	background: #c60005;
}

dd {
	margin-bottom: 5px;
	overflow: hidden;
}

ul.attention {
	list-style: none;
	padding: 0;
}
ul.attention li {
	position: relative;
	padding-left: 2rem;
	padding-bottom: 1rem;

}
ul.attention li:before {
	content: "\203B";
	position: absolute;
	left: 0;
	font-weight: bold;
	color: #c60005;

}


strong {
	color: rgba(255, 230, 0, 1);
	font-size: inherit !important;
}
p > strong {
	margin: 0 0.3rem;
}

strong.fusen {
	display: inline-block;
	background: #c60005;
	padding: 0 2rem;
	transform: rotate(-3deg) translate(-60px,-10px);
}


small {
	font-size: 90% !important;
}
#dlc small {
	opacity: 0.8;
}


section .inner td > a[target="_blank"] ,
section .inner p > a[target="_blank"] ,
section .inner dd > a[target="_blank"] {
	display: inline-block;
	text-decoration: none;
	margin: 0 5px;
	padding: 1px 8px 0;
	border-radius: 2px;
	line-height: 2.2rem;
	vertical-align: text-top;
	font-size: 1.3rem !important;
	background: #c60005;
}
section .inner table a[target="_blank"] {
	margin: 0;
}
section .inner a[target="_blank"]:after {
	font-family: "Font Awesome 5 free";
	font-weight: 900;
	content: "\f360";
	margin-left: 0.8rem;
	font-size: 1.1rem;
}

section .inner p > a.twitterLink {
	background: #1da1f2;
}
a.twitterLink:before {
    font-family: "Font Awesome 5 Brands";
    font-weight: 900;
    content: "\f099";
}
a.twitterLink:after {
	display: none;
}


/*-----------------------------------------
Table
-----------------------------------------*/
table {
	width: 100%;
	background: rgb(77, 68, 68);
	background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) );
	border: 1px solid rgba(255, 255, 255, 0.2);
    border-collapse: collapse;
    border-spacing: 0;
	box-shadow: 0 0 25px -5px rgba(255, 255, 255, 0.3);
}

table th {
	background-color: rgb(51, 41, 36);
	background-image: url(../images/common/bg_texture.svg);
	background-size: 300px 187.5px;
	background-position: -45px 40%;
	background-repeat: no-repeat;

	box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;

	border-right: 1px solid rgba(255,255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding: 15px 10px;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: left;
}
table th:last-child ,
table td:last-child {
	border-right: none;
}

table td {
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 10px;
	font-size: 12px;
}


table.vertical th {
	padding: 5px 0 5px 15px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	vertical-align: middle;
	text-align: left;
}



.mt0	{ margin-top:  0px !important; }
.mt10	{ margin-top: 10px !important; }
.mt20	{ margin-top: 20px !important; }
.mt30	{ margin-top: 30px !important; }
.mt40	{ margin-top: 40px !important; }
.mt100	{ margin-top:100px !important; }
.mt150	{ margin-top:150px !important; }
.mt200	{ margin-top:200px !important; }

.mb0	{ margin-bottom:  0px !important; }
.mb10	{ margin-bottom: 10px !important; }
.mb20	{ margin-bottom: 20px !important; }
.mb30	{ margin-bottom: 30px !important; }
.mb40	{ margin-bottom: 40px !important; }

.al-r	{ text-align: right; }




/*-----------------------------------------
secton common
-----------------------------------------*/
#wrap > section {
	position: relative;
	width: 100%;
	min-height: 100vh;
}



.sectionBg ,
.sectionBg:before ,
.sectionBg:after {
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
}
.sectionBg {
	overflow: hidden;
}
.sectionBg:before {
	content: " ";
	bottom: 0;
	right: 0;
	left: 0px;
}
.sectionBg:after {
	content: " ";
}

/*-----------------------------------------
*/
section#product .sectionBg:before ,
section#movie .sectionBg:before ,
section#information .sectionBg:before ,
section#shopinfo_section .sectionBg:before {
	background-color: #fff;
	background-image:
		url(../images/common/bg.png),
		linear-gradient( 180deg, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.95) 40%, rgba(10, 10, 10, 0.95) 60%, rgba(10, 10, 10, 0.8) );
}


/*-----------------------------------------
section inner*/
section > .inner {
	position: relative;
	padding-bottom: 80px;
}

section#character .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 0;
}


.inner > section {
	margin: 0 auto 60px;
	width: 960px;
	overflow: hidden;
}

.inner > section p ,
.inner > section p * {
	text-align: center;
	font-size: 1.8rem;
}



/*----------------------------------------------------------------------------------
hero header
----------------------------------------------------------------------------------*/
section#hero {
	position: relative;
	background-size: cover;
	background-position: center top;
	/*max-height: 100vh;*/
	height: 100vh;
	overflow-x: hidden;

}
section#hero .inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

section#hero #mainchr {
	position: relative;
	float: left;
	width: 100vh;
	height: 100vh;
	overflow: hidden;
	background-color: #c60005e0;

	width: 100%;
}
section#hero #right {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(100% - 100vh);
	min-width: 560px;
    max-width: 800px;
}

html.loading #banner_area {
	right: calc(-330/1920*100vw);
}
#banner_area {
	position: absolute;
	bottom: 0;
	right: calc(40/1920*100vw);
	transition: right 0.3s 1.5s ease-out;
}
#banner_area a {
	position: relative;
	display: block;
	border: 1px solid #c60005;
	width: calc(320/1920*100vw);
	height: calc(180/1920*100vw);
	margin-bottom: calc(30/1920*100vw);
}
#banner_area a.text {
	height: calc(40/1920*100vw);
}
#banner_area a img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
}
#banner_area a:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: calc(40/1920*100vw);
	box-shadow: 0 0 10px rgba(0,0,0,0.8) inset;
}
#banner_area a p {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	height:  calc(40/1920*100vw);
	line-height:  calc(40/1920*100vw);
	background-color: rgba(0,0,0,0.75);
	color: #fff;

	font-family: Ryumin Bold KL;
	font-size: calc(20/1920*100vw);
	text-align: center;
	text-shadow: 0 1px 0 #000;
}

section#hero img {
	backface-visibility: hidden;/*chrome縮小ボケ回避*/
}


html.loading #logo_ps54 ,
html.loading #logo_switch ,
html.loading #logo_zan2 ,
html.loading #releaseDate ,
html.loading #banner {
	opacity: 0;
}
#logo_ps54 ,
#logo_switch ,
#logo_zan2 ,
#releaseDate {
	opacity: 1;
}
#logo_ps54 ,
#logo_switch	{ transition: opacity 0.5s 0.5s; }
#logo_zan2		{ transition: opacity 0.5s 1s; }
#releaseDate	{ transition: opacity 0.5s 1.2s; }
#banner			{ transition: opacity 0.5s 1.5s; }

html.loading .mainchr {
	opacity: 0;
	transform: scale(1.1,1.1);
	-ms-filter: blur(4px);
	filter: blur(4px);
}
.mainchr {
	transition: 0.5s 0.2s ease-out;
	opacity: 1;
	transform: scale(1,1);
	-ms-filter: blur(0px);
	filter: blur(0px);
}
.mainchr.kuon {
	transition: 0.5s 0.6s ease-out;
}

#catch1,
#catch2 {
	display: block;
	position: absolute;
	width: 90%;
	right: -300%;
}
#catch1	{ transition: 0.4s 0.5s; top: -80%; }
#catch2	{ transition: 0.4s 0.7s; top: -40%; }

html:not(.loading) #catch1 ,
html:not(.loading) #catch2 {
	top: 5%;
	right: 5%;
}
html:not(.loading) #hero_info {
	right: 0;
	transition: right 1s 0.7s;
}

#logo_ps54 {
	position: absolute;
	left: 10px;
	top: 15px;
	width: 300px;
}

.mainchr {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	left: 0;
}

#logo_zan2 {
	display: block;
	position: absolute;
	bottom: 15%;
	width: 46%;
	left: 50%;
	transform: translateX(-50%);
	max-width: 700px;
}

#releaseDate {
	display: block;
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
	width: 20%;
	max-width: 320px;
}


#hero_info {
	display: inline-block;
	position: absolute;
	right: -500px;
	bottom: 4%;
}
#hero_info a {
	position: relative;
	display: block;
	border-radius: 3px 0 0 3px;
	padding: 2rem 5rem 2rem 4rem;
	box-shadow: 0 0 15px 5px #0008,0 0 0 5px #0008;
	font-size: 1.6rem;
	font-weight: bold;
	margin-top: 20px;
}
#hero_info a:nth-child(1) {	background: rgba(177, 33, 33, 1);
}
#hero_info a:nth-child(2) {	background: rgb(33, 91, 177);
}
#hero_info a:after {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);

	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f138";
	display: inline-block;
	width: 1.25em;
	text-align: center;
}


/*----------------------------------------------------------------------------------
product detail
----------------------------------------------------------------------------------*/
#prodDetail {
	background: #000;
	padding: 20px 0;
	z-index: 1;
	min-height: auto !important;
/*	box-shadow: 0 -8px 8px rgba(255,255,255,0.15);*/
}
#prodDetail .inner {
	width: 500px;
	margin: 0 auto;
	padding-bottom: 0;
}

#prodDetail dt { width: 100px; }
#prodDetail dd span {
	display: inline-block;
	width: 14.5rem;
	text-align: right;
}

#prodDetail .cero {
	float: right;
	height: 56px;
	backface-visibility: hidden;/*chrome縮小ボケ回避*/
}


/*----------------------------------------------------------------------------------
product
----------------------------------------------------------------------------------*/
#product section {
	text-align: center;
}

#product table {
	max-width: calc(100% - 80px);
	margin: 0 auto 20px;
}
#premium th ,
#premium td ,
#reservation th ,
#reservation td ,
#download th ,
#download td {
	text-align: center;
}

html:not(.mobile) #product #basic table {
	table-layout: fixed;
}
html:not(.mobile) #product #basic table th {
	width: 25%;
	white-space: nowrap;
	background-image: none;
}

#product table td.ps5 {
	background-color: #fff;
	color: #000;
	font-weight: bold;
}
#product table td.ps4 {
	background-color:#00439c;
	font-weight: bold;
}

#product table strong {
	font-size: 1.7rem !important;
}
#product table small {
	font-size: 1.1rem;
}

.textLeft p {
	text-align: left !important;
}

#information .unit .inner p {
	padding: 10px;
}
#product .unit .inner li,
#product .unit .inner dl,
#product .unit .inner dd,
#product .unit .inner p {
	text-align: left;
}

#information .unit .inner h5 ,
#information .unit .inner dl {
	margin: 12px 24px;
}
#information .unit .inner h5 {
	font-size: 1.6rem;
}
#information .unit .inner li {
	font-size: 1.4rem;
	margin-top: 3px;
}
#information .unit .inner dt {
	width: 120px;
}
#information a.reserve,
#information a.store,
#information a.link {
	padding: 1px 0;
}


/*----------------------------------------------------------------------------------
.screenshot
----------------------------------------------------------------------------------*/

.split.screenshot > .unit {
	padding: 4px;
	box-sizing: border-box;
	background: rgb(238, 223, 137);
    background-image: linear-gradient( 120deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) );
    border: 1px solid rgba(0, 0, 0, 0.3);
	border-top-color: rgba(255, 255, 255, 0.8);
	border-left-color: rgba(255, 255, 255, 0.8);
}
.split.screenshot >.unit a.lightbox {
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-top-color: rgba(0, 0, 0, 0.3);
	border-left-color: rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}
.split > .unit a.lightbox img {
	display: block;
	width: 100%;
	z-index: -1;
	backface-visibility: hidden;/*chrome縮小ボケ回避*/
}
.split.screenshot > .unit a.lightbox img {
	position: absolute;
	top: 0;
	bottom: 0;
}
.split.screenshot > .unit a.lightbox:after {
	content: " ";
	display: block;
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.split.screenshot > .unit a:after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0 0 15px rgb(0, 0, 0) inset;
}



/*----------------------------------------------------------------------------------
character
----------------------------------------------------------------------------------*/
section#character {
	background-color: #c60005;
	height: calc(1080/1920*100vw);
	min-height: 576px;
}
section#character .sectionBg {
	display: none;
}
section#character h2 {
	transform: scale(0.7);
	z-index: 10;
}

ul.slide .inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
}
section#character ul.slide .inner:before ,
section#character ul.slide .inner:after {
	content: " ";
	position: absolute;
	top: 57%;
	bottom: 0;
	display: block;
	width: 100%;
}
section#character ul.slide .inner:before {
	left: 0;
	background-color: rgba(0,0,0,0.6);
	opacity: 0;
	transition: opacity 0.3s 0.6s;
}
section#character ul.slide .inner:after {
	background: url(../images/character/split.png) no-repeat;
	background-size: contain;
	left: 100%;
	transition: left 0.1s 0.3s;
}


section#character label.cat_select:nth-child(3) { top: calc(50% - (300/1920*100vw)); }
section#character label.cat_select:nth-child(5) { top: calc(50% - (225/1920*100vw)); }
section#character label.cat_select:nth-child(7) { top: calc(50% - (150/1920*100vw)); }

label.cat_select {
	position: absolute;
	left: 0;
	z-index: 30;
	display: block;
	width: calc(240/1920*100vw);
	min-width: 180px;
	height: calc(60/1920*100vw);
	padding-right: calc(10/1920*100vw);

	border-radius: 0 5px 5px 0;
	border: 1px solid rgba(255, 230, 0, 0.9);
	border-left: none;
	box-shadow: 0 0 calc(8/1920*100vw) rgba(255, 252, 81, 0.7), 0 0 calc(6/1920*100vw) rgba(0,0,100,0.5) inset;
	cursor: pointer;
	background-image: url(../images/common/bg_texture.svg), linear-gradient( 180deg, rgba(255, 230, 0, 0.7), rgba(109, 98, 1, 0.7) );
	background-size: calc(200/1920*100vw) calc(125/1920*100vw), 100% 100%;
	background-position: calc(-30/1920*100vw) 40%, 0 0;
	background-repeat: no-repeat;

	line-height: calc(57/1920*100vw);
	font-family: Shin Go Bold;
	font-size: calc(22/1920*100vw);
	text-align: center;
	text-shadow: 0 0 calc(6/1920*100vw) #000, 0 0 calc(6/1920*100vw) #000;

	transition: 0.2s;
}


label.cat_select small {
	font-size: calc(13/1920*100vw);
}

input[name=chr_select] {
	position: absolute;
	left: -9999px;
}
input[name=chr_select]:checked + label {
	width: calc(280/1920*100vw);
	min-width: 220px;

	background-image: url(../images/common/bg_texture.svg), linear-gradient( 180deg, rgba(196, 0, 7, 0.9), rgba(122, 0, 4, 0.9) );
}
label.cat_select:hover {
	width: calc(280/1920*100vw);
}
input[name=chr_select]:checked + label:after {
	content: " ";
	display: block;
	position: absolute;
	right: calc(6/1920*100vw);
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	width: calc(18/1920*100vw);
	height: calc(18/1920*100vw);
	background: url(../images/common/arrow.svg) no-repeat;
	background-size: cover;
}


section#character section[data-type="slider"] {
	margin-top: 100vh;
	opacity: 0;
}

section#character input[name=chr_select]#toggle_new:checked ~ section[data-cat=chr_new] ,
section#character input[name=chr_select]#toggle_inherit:checked ~ section[data-cat=chr_inherit] ,
section#character input[name=chr_select]#toggle_npc:checked ~ section[data-cat=chr_npc] {
	margin-top: 0;
	opacity: 1;
	transition: opacity 0.3s;
}



section#character ul.slide .screenshot {
	position: absolute;
	bottom: 25%;
	left: 5%;
	z-index: 40;
	transition: opacity 0.3s 1s;
	opacity: 0;
}
section#character ul.slide .screenshot a {
	width: auto;
	display: inline-block;
	margin-left: calc(10/1920*100vw);
}
section#character ul.slide .screenshot img {
	height: calc(80/1920*100vw);
	box-shadow:0 0 7px rgba(0, 0, 0, 0.8);
}

section#character ul.slide .profile {
	position: relative;
	width: 50%;
	top: calc(56% - (200/1920*100vw));
	left: 45%;
	z-index: 20;
	opacity: 0;
	transition: opacity 0.3s 0.6s;
}


html.loading section#character h3 {
	transition: 0.3s;
	text-shadow: 0 -1px 10px #6188c500;

}

section#character ul.slide .profile h3 {
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
	width: calc(840/1920*100vw);
	height: calc(180/1920*100vw);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

section#character ul.slide .profile h3 span.new {
	height: 6rem;
}
section#character ul.slide .profile p {
	display: block;
	margin-top: calc(20/1920*100vw);
	text-align: left;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: calc(22/1920*100vw);
	text-shadow: 0 0 5px #000, 0 0 5px #000;
}
section#character ul.slide .profile p.cv {
	margin-top: calc(60/1920*100vw);
}
section#character ul.slide .cv:before {
	content: "\58F0: ";
	margin-right: 0.5rem;
	font-size: calc(18/1920*100vw);
}
section#character ul.slide .from {
	float: right;
	display: block;
	margin-top: 0;
	margin-right: 2px;
	padding: 2px 16px;
	border-radius: 20px;
	box-shadow: 0 0 2px #fff;
	font-size: 1.5rem;
}
section#character ul.slide .from.itsu	{ background-color: #00f2; }
section#character ul.slide .from.chiri	{ background-color: #f002; }

section#character ul.slide .from:after {
	content: "\3088\308A";
	margin-left: 0.5rem;
	font-size: 1.3rem;
}

section#character ul.slide img.body {
	position: absolute;
	top: calc(50% - 500/1920*100vw);
	right: calc(840/1920*100vw);
	z-index: 20;
	opacity: 0;
	transform: scale(1.05,1.05);
	-ms-filter: blur(3px);
	filter: blur(3px);
	transition: 0s 0s;
	height: calc(1200/1920*100vw);
}

#chr_n01 h3 { background-image: url(../images/character/name_n01.png); } /*オシュトル（ハク）*/
#chr_n02 h3 { background-image: url(../images/character/name_n02.png); } /*アンジュ*/
#chr_n03 h3 { background-image: url(../images/character/name_n03.png); } /*フミルィル*/
#chr_n04 h3 { background-image: url(../images/character/name_n04.png); } /*ムネチカ*/
#chr_n05 h3 { background-image: url(../images/character/name_n05.png); } /*ムネチカ*/
#chr_n06 h3 { background-image: url(../images/character/name_n06.png); } /*ムネチカ*/
#chr_n07 h3 { background-image: url(../images/character/name_n07.png); } /*ムネチカ*/

#chr_i01 h3 { background-image: url(../images/character/name_i01.png); } /*クオン*/
#chr_i02 h3 { background-image: url(../images/character/name_i02.png); } /*ネコネ*/
#chr_i03 h3 { background-image: url(../images/character/name_i03.png); } /*ルルティエ*/
#chr_i04 h3 { background-image: url(../images/character/name_i04.png); } /*アトゥイ*/
#chr_i05 h3 { background-image: url(../images/character/name_i05.png); } /*ノスリ*/
#chr_i06 h3 { background-image: url(../images/character/name_i06.png); } /*オウギ*/
#chr_i07 h3 { background-image: url(../images/character/name_i07.png); } /*ウルゥル・サラァナ*/
#chr_i08 h3 { background-image: url(../images/character/name_i08.png); } /*ヤクトワルト*/
#chr_i09 h3 { background-image: url(../images/character/name_i09.png); } /*キウル*/

#chr_n01 .inner { background-image: url(../images/character/bg_n01.jpg); } 
#chr_n02 .inner { background-image: url(../images/character/bg_n02.jpg); } 
#chr_n03 .inner { background-image: url(../images/character/bg_n03.jpg); } 
#chr_n04 .inner { background-image: url(../images/character/bg_n04.jpg); } 
#chr_n05 .inner { background-image: url(../images/character/bg_n05.jpg); } 
#chr_n06 .inner { background-image: url(../images/character/bg_n06.jpg); } 
#chr_n07 .inner { background-image: url(../images/character/bg_n07.jpg); } 

#chr_i01 .inner { background-image: url(../images/character/bg_i01.jpg); } 
#chr_i02 .inner { background-image: url(../images/character/bg_i02.jpg); } 
#chr_i03 .inner { background-image: url(../images/character/bg_i03.jpg); } 
#chr_i04 .inner { background-image: url(../images/character/bg_i04.jpg); } 
#chr_i05 .inner { background-image: url(../images/character/bg_i05.jpg); } 
#chr_i06 .inner { background-image: url(../images/character/bg_i06.jpg); } 
#chr_i07 .inner { background-image: url(../images/character/bg_i07.jpg); } 
#chr_i08 .inner { background-image: url(../images/character/bg_i08.jpg); } 
#chr_i09 .inner { background-image: url(../images/character/bg_i09.jpg); } 


#chr_n01 img.body { margin-right: 0px; }/*840*/
#chr_n02 img.body { margin-right: calc(  20/1920*100vw); }
#chr_n03 img.body { margin-right: calc(-210/1920*100vw); }
#chr_n04 img.body { margin-right: calc( -90/1920*100vw); }
#chr_n05 img.body { margin-right: calc( -170/1920*100vw); margin-top: calc( -110/1920*100vw); }
#chr_n06 img.body { margin-right: calc( -50/1920*100vw); }
#chr_n07 img.body { margin-right: calc( -100/1920*100vw); margin-top: calc( -100/1920*100vw); }

#chr_i01 img.body { margin-right: 0px; }
#chr_i02 img.body { margin-right: calc(  40/1920*100vw); }
#chr_i03 img.body { margin-right: calc( 100/1920*100vw); }
#chr_i04 img.body { margin-right: 0px; }
#chr_i05 img.body { margin-right: calc(-320/1920*100vw); }
#chr_i06 img.body { margin-right: 0px; }
#chr_i07 img.body { margin-right: 0px; }
#chr_i08 img.body { margin-right: calc(-310/1920*100vw); top: calc(50% - 530/1920*100vw) !important; }
#chr_i09 img.body { margin-right: calc( -20/1920*100vw); top: calc(50% - 630/1920*100vw) !important; }

@media (max-width: 1024px) {
	section#character ul.slide img {
		top: calc(50% - 500/1920*1024px);
		right: calc(840/1920*1024px);
		height: calc(1200/1920*1024px);
	}
	
	#chr_n02 img.body { margin-right: calc(  20/1920*1024px); }
	#chr_n03 img.body { margin-right: calc(-210/1920*1024px); }
	#chr_n04 img.body { margin-right: calc( -90/1920*1024px); }
	
	#chr_i02 img.body { margin-right: calc(  40/1920*1024px); }
	#chr_i03 img.body { margin-right: calc( 100/1920*1024px); }
	#chr_i05 img.body { margin-right: calc(-320/1920*1024px); }
	#chr_i08 img.body { margin-right: calc(-310/1920*1024px); top: calc(50% - 530/1920*1024px) !important; }
	#chr_i09 img.body { margin-right: calc( -20/1920*1024px); top: calc(50% - 630/1920*1024px) !important; }
}


section[data-current="1"] #chr_n01 img.body ,
section[data-current="2"] #chr_n02 img.body ,
section[data-current="3"] #chr_n03 img.body ,
section[data-current="4"] #chr_n04 img.body ,
section[data-current="5"] #chr_n05 img.body ,
section[data-current="6"] #chr_n06 img.body ,
section[data-current="7"] #chr_n07 img.body ,

section[data-current="1"] #chr_i01 img.body ,
section[data-current="2"] #chr_i02 img.body ,
section[data-current="3"] #chr_i03 img.body ,
section[data-current="4"] #chr_i04 img.body ,
section[data-current="5"] #chr_i05 img.body ,
section[data-current="6"] #chr_i06 img.body ,
section[data-current="7"] #chr_i07 img.body ,
section[data-current="8"] #chr_i08 img.body ,
section[data-current="9"] #chr_i09 img.body
{
	transition: opacity 0.3s 0.8s ease-out,
		transform 0.3s 0.8s ease-out,
		-ms-filter 0.3s 0.8s ease-out,
		filter 0.3s 0.8s ease-out
		!important;
	opacity: 1 !important;
	transform: scale(1,1) !important;
	-ms-filter: blur(0px) !important;
	filter: blur(0px) !important;
}
section[data-current="1"] #chr_n01 .screenshot ,
section[data-current="2"] #chr_n02 .screenshot ,
section[data-current="3"] #chr_n03 .screenshot ,
section[data-current="4"] #chr_n04 .screenshot ,
section[data-current="5"] #chr_n05 .screenshot ,
section[data-current="6"] #chr_n06 .screenshot ,
section[data-current="7"] #chr_n07 .screenshot ,

section[data-current="1"] #chr_n01 .profile ,
section[data-current="2"] #chr_n02 .profile ,
section[data-current="3"] #chr_n03 .profile ,
section[data-current="4"] #chr_n04 .profile ,
section[data-current="5"] #chr_n05 .profile ,
section[data-current="6"] #chr_n06 .profile ,
section[data-current="7"] #chr_n07 .profile ,

section[data-current="1"] #chr_i01 .profile ,
section[data-current="2"] #chr_i02 .profile ,
section[data-current="3"] #chr_i03 .profile ,
section[data-current="4"] #chr_i04 .profile ,
section[data-current="5"] #chr_i05 .profile ,
section[data-current="6"] #chr_i06 .profile ,
section[data-current="7"] #chr_i07 .profile ,
section[data-current="8"] #chr_i08 .profile ,
section[data-current="9"] #chr_i09 .profile ,

section[data-current="1"] #chr_n01 .inner:before ,
section[data-current="2"] #chr_n02 .inner:before ,
section[data-current="3"] #chr_n03 .inner:before ,
section[data-current="4"] #chr_n04 .inner:before ,
section[data-current="5"] #chr_n05 .inner:before ,
section[data-current="6"] #chr_n06 .inner:before ,
section[data-current="7"] #chr_n07 .inner:before ,

section[data-current="1"] #chr_i01 .inner:before ,
section[data-current="2"] #chr_i02 .inner:before ,
section[data-current="3"] #chr_i03 .inner:before ,
section[data-current="4"] #chr_i04 .inner:before ,
section[data-current="5"] #chr_i05 .inner:before ,
section[data-current="6"] #chr_i06 .inner:before ,
section[data-current="7"] #chr_i07 .inner:before ,
section[data-current="8"] #chr_i08 .inner:before ,
section[data-current="9"] #chr_i09 .inner:before
{
	opacity: 1 !important;
}
section[data-current="1"] #chr_n01 .inner:after ,
section[data-current="2"] #chr_n02 .inner:after ,
section[data-current="3"] #chr_n03 .inner:after ,
section[data-current="4"] #chr_n04 .inner:after ,
section[data-current="5"] #chr_n05 .inner:after ,
section[data-current="6"] #chr_n06 .inner:after ,
section[data-current="7"] #chr_n07 .inner:after ,

section[data-current="1"] #chr_i01 .inner:after ,
section[data-current="2"] #chr_i02 .inner:after ,
section[data-current="3"] #chr_i03 .inner:after ,
section[data-current="4"] #chr_i04 .inner:after ,
section[data-current="5"] #chr_i05 .inner:after ,
section[data-current="6"] #chr_i06 .inner:after ,
section[data-current="7"] #chr_i07 .inner:after ,
section[data-current="8"] #chr_i08 .inner:after ,
section[data-current="9"] #chr_i09 .inner:after
{
	left: 0 !important;
}

/*slider*/
section#character section[data-cat="chr_new"] ul.pointer:hover li:nth-child(1) { background-image: url(../images/character/tn_n01.png); }
section#character section[data-cat="chr_new"] ul.pointer:hover li:nth-child(2) { background-image: url(../images/character/tn_n02.png); }
section#character section[data-cat="chr_new"] ul.pointer:hover li:nth-child(3) { background-image: url(../images/character/tn_n03.png); }
section#character section[data-cat="chr_new"] ul.pointer:hover li:nth-child(4) { background-image: url(../images/character/tn_n04.png); }
section#character section[data-cat="chr_new"] ul.pointer:hover li:nth-child(5) { background-image: url(../images/character/tn_n05.png); }
section#character section[data-cat="chr_new"] ul.pointer:hover li:nth-child(6) { background-image: url(../images/character/tn_n06.png); }
section#character section[data-cat="chr_new"] ul.pointer:hover li:nth-child(7) { background-image: url(../images/character/tn_n07.png); }

section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(1) { background-image: url(../images/character/tn_i01.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(2) { background-image: url(../images/character/tn_i02.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(3) { background-image: url(../images/character/tn_i03.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(4) { background-image: url(../images/character/tn_i04.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(5) { background-image: url(../images/character/tn_i05.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(6) { background-image: url(../images/character/tn_i06.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(7) { background-image: url(../images/character/tn_i07.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(8) { background-image: url(../images/character/tn_i08.png); }
section#character section[data-cat="chr_inherit"] ul.pointer:hover li:nth-child(9) { background-image: url(../images/character/tn_i09.png); }


section#character section[data-type="slider"] ul.pointer:hover li.current {
	border: 1px solid #c60005;
	background-color: rgba(0,0,0,0.4);
	box-shadow: 0 0 10px rgba(255, 51, 0, 0.7);
}

section#character section[data-type="slider"] ul.pointer:hover li {
	width: 64px;
	height: 64px;
	background-size: cover;
	background-repeat: no-repeat;
}

section#character section[data-type="slider"] ul.slide ,
section#character section[data-type="slider"] ul.slide li {
	height: 100%;
}




/*-----------------------------------------
 data-type="slider"
-----------------------------------------*/
section#character section[data-type="slider"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	width: auto;
	overflow: hidden;
}


section[data-type="slider"] ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

section[data-type="slider"] ul.slide {
	list-style: none;
	position: relative;
	min-height: 100%;
	overflow: hidden;
}

section[data-type="slider"] ul.slide li {
	display: block;
	float: left;
	min-height: 100%;
	position: relative;
}

section[data-type="slider"] .next ,
section[data-type="slider"] .prev {
	position: absolute;
	bottom: calc(50% - 45px);
	transition: 0.3s;
	z-index: 30;
}
section[data-type="slider"].single .next ,
section[data-type="slider"].single .prev {
	display: none;
}

section[data-type="slider"]:not(.last) .next:hover ,
section[data-type="slider"]:not([data-current="1"]) .prev:hover {
	opacity: 0.7;
	transform: scale(1.2);
}
section[data-type="slider"] .next { right: 40px; }
section[data-type="slider"] .prev { left: 40px; }

section[data-type="slider"] .next img,
section[data-type="slider"] .prev img {
	width: 9rem;
	cursor: pointer;
}
section[data-type="slider"] .next img { transform: rotate(90deg); }
section[data-type="slider"] .prev img { transform: rotate(-90deg); }

section[data-type="slider"].last				.next img ,
section[data-type="slider"][data-current="1"]	.prev img { 
	cursor: auto;
	opacity: 0.3;
}
section[data-type="slider"] ul.pointer {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 80px;
	z-index: 30;
	text-align: center;
	background: #0005;
	line-height: 1;
}
section[data-type="slider"].single ul.pointer {
	display: none;
}

section#character section[data-type="slider"] ul.pointer {
	right: auto;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 0 5px 5px 0;
	border: 1px solid rgba(255, 230, 0, 0.9);
	border-left: none;
	box-shadow: 0 0 calc(8/1920*100vw) rgba(255, 252, 81, 0.7), 0 0 calc(6/1920*100vw) rgba(0,0,100,0.5) inset;
	background-image: url(../images/common/bg_texture.svg);
	background-size: calc(200/1920*100vw) calc(125/1920*100vw);
	background-position: calc(-30/1920*100vw) 40%;
	background-repeat: no-repeat;
	padding: 0 5px 0 20px;
}


section[data-type="slider"] ul.pointer li {
	display: inline-block;
	background-color: rgba(255,255,255,0.3);
	width: 12px;
	height: 12px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 4px;
	margin: 12px 6px;
	cursor: pointer;
	transition: 0.3s;
	z-index: 5;
}



section[data-type="slider"] ul.pointer li:not(.current):hover {
	border: 1px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,0.8);
}
section[data-type="slider"] ul.pointer li.current {
	cursor: auto;
	border: 1px solid rgba(255,255,255,1);
	background-color: rgba(255,255,255,0.8);
}




/*----------------------------------------------------------------------------------
movie
----------------------------------------------------------------------------------*/
#movie .inner > section {
	overflow-y: unset;
	width: 100%;
}

#movie .inner iframe {
	display: block;
	box-shadow: 0 5px 10px rgba(30,0,0,0.3);
	margin: 15px auto;
	background: rgba(0,0,0,1);
	box-shadow: 0 0 15px rgba(0, 0, 0, 1)
}




/*----------------------------------------------------------------------------------
publicity
----------------------------------------------------------------------------------*/
#publicity {
	padding-bottom: 100px !important;
}

#wrap > section#publicity .sectionBg:after {
	background-position:
	top left,
	bottom -45px right;
}
#publicity table th ,
#publicity table td {
	text-align: center;
}
#publicity table tr th:nth-child(2) ,
#publicity table tr th:last-child ,
#publicity table tr td:nth-child(2) ,
#publicity table tr td:last-child {
	text-align: left;
}
#publicity th {
	background-size: 200px 125px;
	background-position: -100px 20%;
}
#publicity section {
	overflow: initial;
}





/*----------------------------------------------------------------------------------
information
----------------------------------------------------------------------------------*/
section > .unit ,
.split .explanation {
	position: relative;
	background: rgb(77, 68, 68);
	background-image: linear-gradient( 90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25) );

	border: 1px solid rgba(0, 0, 0, 0.3);
	margin: 0 40px;
	padding: 40px;
}
section > .unit:before ,
.split .explanation:before {
	content: " ";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	z-index: 0;
	background-image: url(../images/common/corner1.png), url(../images/common/corner2.png), url(../images/common/corner3.png), url(../images/common/corner4.png);
	background-position: left top, right top, left bottom, right bottom;
	background-repeat: no-repeat;
	box-sizing: border-box
}

.unit * ,
.explanation * {
	text-align: left;
	position: relative;
	z-index: 1;
}

#information p {
	text-align: left;
	padding: 0 0.5rem;
}
#information ul {
	padding-left: 20px;
}
#information ul li {
	margin-bottom: 0.5rem;
}

#information section > img {
	max-width: 860px;
	display: block;
	margin: 0px auto 40px;
}



h4 {
	position: relative;
	text-align: center !important;
	background-color: rgb(51, 41, 36);
	background-image: url(../images/common/bg_texture.svg);
	background-size: 300px 187.5px;
	background-position: -45px 40%;
	background-repeat: no-repeat;

	box-shadow: 0 0 20px rgba(0, 0, 0, 1) inset;

	border: 1px solid rgba(255,255, 255, 0.2);
	margin-top: 40px;
	padding: 10px 0;
	height: 45px;
    box-sizing: border-box;
	font-size: 1.4rem;
	line-height: 1.7;
}
html.mobile h4 {
	height: auto;
}
.explanation h4 {
	margin-top: 0px;
}
.unit h4 * {
	text-align: inherit;
}


h5 {
	margin: 30px 0px 15px;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	box-shadow: 0 8px 8px -8px rgba(0,0,0,1);
	font-size: 1.6rem;
	line-height: 2;
	text-align: center !important;
}

h6 {
	margin: 20px 0px 10px;
	font-size: 1.8rem;
	border-bottom: 1px solid #fff8;
}
.split h6 {
	margin-top: 40px;
}


/*----------------------------------------------------------------------------------
footer
----------------------------------------------------------------------------------*/
footer ,
footer * {
	text-align: center;
	margin: 0;
}

footer {
	margin-top: -40px;
	position: relative;
	background: #000;
	overflow: hidden;
	padding: 40px 0;
	z-index: 1;
}
footer #corp {
	margin-bottom: 20px;
}
footer #aquaplus ,
footer #tamsoft {
	display: inline-block;
}
footer #aquaplus	{ margin: 7px 15px; vertical-align: bottom;}
footer #tamsoft		{ margin: 0px 15px; }
footer #aquaplus img { height: 30px; }
footer #tamsoft img { height: 50px; }



footer .sns {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}


.sns a {
	position: relative;
	box-sizing: border-box;
	text-align: center;

	display: inline-block;
	margin: 0 15px 15px;
}

.sns i {
	font-size: 3.5rem;
}

.legalAttr {
	margin-bottom: 20px;
}
.legalAttr p {
	padding: 3px 20px;
}


#toTop {
	position: fixed;
	right: 32px;
	z-index: 30;
	transition: 0.3s;
}
html#subpage body:not(.shopinfo_section) #toTop,
body#home:not(.hero) #toTop {
	bottom: 30px;
}


#toTop:hover {
	transform: scale(1.2);
}
#toTop img {
	width: 9rem;
}
#toTop i {
	font-size: 6rem;
	text-shadow: 0 0 5px rgba(50,0,0,1);
	width: 6rem;
	text-align: center;

}



/*----------------------------------------------------------------------------------
subpage
----------------------------------------------------------------------------------*/
header {
	position: relative;
	z-index: 1;
}
header a {
	position: absolute;
	display: block;
	left: 40px;
	top: 40px;
}
header img {
	display: block;
	width: 200px;
	backface-visibility: hidden;/*chrome縮小ボケ回避*/
}


.split {
	position: relative;
	overflow: hidden;
	padding-top: 8px;
}
html#subpage .split {
	padding-bottom: 40px;
}

section .split > .unit {
	position: relative;
	float: left;
	box-sizing: border-box;
	margin: 0 1% 10px;
	overflow: hidden;
}
section .split > .unit a {
	display: block;
	position: relative;
}
section > .split > .unit img {
	display: block;
	margin: 0 auto;
}
#shopinfo section > .split > .unit img {
	max-width: calc(100% - 20px);
}

.split.col1 .unit { width: calc(100% - 2%); }
.split.col3 .unit { width: calc(33.33% - 2%); }
html:not(.mobile) .split.col4 .unit { width: calc(25% - 2%) }
html:not(.mobile) .split.col5 .unit { width: calc(20% - 2%) }
html.mobile .split.col4 .unit ,
html.mobile .split.col5 .unit ,
.split.col2 .unit { width: calc(50% - 2%); }



.split .split {
	margin: 1% 0;
}
.split .split .unit {
	position: relative;
	float: left;
}
.split .split .unit:nth-child(odd) {
	margin-left: 2%;
}

section#information .split .split .unit {
	margin-left: 1%;
	margin-right: 1%;
}
section .split .unit .inner {
	backface-visibility: hidden;
}
html#subpage .split .unit .inner {
	margin-bottom: 20px;
}

#dlc .split .unit {
	margin-top: 30px;
}

#dlc .split .unit img {
	max-width: 100%;
	margin-bottom: 10px;
}

.split .unit h4 { margin-top: 30px; }
.split.col1 h4 { font-size: 1.7rem; }
.split.col3 h4 { font-size: 1.6rem; }
.split.col4 h4 { font-size: 1.4rem; }

.split .unit h4 a:before {
	position: absolute;
	right: 1rem;
	top: calc(50% - 0.5rem);
}
.split .unit h4 .new {
	margin-left: 16px;
	font-size: 1.7rem;
}
.split.col3 .unit h4 a:before { right: 1rem; }
.split.col4 .unit h4 a:before { right: 0.8rem; }

body#shopinfo .split .unit {
	min-height: 550px;
}

body#shopinfo .split .unit h4.line2 {
	padding-top: 3px;
}
body#shopinfo .split .unit h4 small {
	position: absolute;
	bottom: -10px;
	display: block;
	left: 0;
	right: 0;
	font-weight: normal;
	font-size: 1rem !important;
}

.split .unit p {
	display: block;
	margin: 6px;
	box-sizing: border-box;
	backface-visibility: hidden;/*chrome縮小ボケ回避*/
}


.split .unit img.nowprinting {
	width: calc(100% - 80px);
	margin: 40px auto;
	opacity: 0.5;
}

.split .unit p {
	margin: 5px 0 0;
}
.split .unit p.type {
	font-size: 1.4rem;
	font-weight: bold;
	padding-bottom: 2px;
}
.split .unit p.detail {
	max-width: calc(100% - 20px);
    margin: 10px auto 0;
	background: #fff6;
	border-radius: 5px;
	font-size: 1.2rem;
	padding: 3px 0;
}
.split .unit p.attention {
	margin-top: 15px;
	color: #7e0c36;
	font-size: 1.4rem;
}

#original .attention {
	margin-bottom: 5rem;
}

.split .explanation {
	padding-bottom: 3rem;
}

.split .explanation p {
	font-size: inherit;
	text-align: left;
}

.split .explanation dl {
	text-align: left;
	width: 300px;
	margin: 0 auto 15px;
}
.split .explanation dl dt {
	width: 130px;
}

#shopinfo a.reserve ,
#shopinfo a.store ,
#shopinfo p.applicable {
	max-width: calc(100% - 20px);
    margin: 10px auto 0 !important;
	box-sizing: border-box
}
#shopinfo a.reserve ,
#shopinfo a.store {
	padding: 12px;
}
a.reserve ,
a.store ,
a.link ,
p.applicable {
	display: block;
	text-align: center;
	border-radius: 3px;
	box-shadow: 0 1px 3px #0006;
	font-size: 1.2rem !important;
}
a.reserve ,
a.store ,
p.applicable {
	padding: 6px 0 !important;
}

p.applicable.limited {
	color:rgb(252, 115, 115)
}
p.applicable {
	border: 1px solid rgba(255,255,255,0.3);
	padding: 3px 0;

}
a.reserve {
	background: #e77a48;
}
a.store.pss {
	background: #00439c !important;
	line-height: normal !important;
}
a.store.pss.ps5 {
	background: #fff !important;
	color: #000;
}
a.store.mns {
	background: #E60012;
}
a.link {
	background: #3fad35;
	padding-left: 2rem;
}
a.reserve:before ,
a.store:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f07a";
	float: left;
	margin: 3px 8px 0 8px;
}
a.reserve:after ,
a.store:after ,
a.link:after {
	float: right;
	margin: 3px 8px 0 0;
	line-height: 1;
}




/*----------------------------------------------------------------------------------
guideline
----------------------------------------------------------------------------------*/
#guideline_section h2 {
	font-size: 4.4rem;
	padding-bottom: 0;
	line-height: 2;
	letter-spacing: -0.3rem;
}
#guideline_section h2 span {
	letter-spacing: -0.8rem;
	font-size: inherit;
}
#guideline_section .unit {
	background: #fff;
	padding: 10px 40px;
	margin: 0 20px 20px;
}

#guideline_section .unit * {
	font-size: 1.6rem;
	line-height: 1.8;
	text-align: left;
}

#guideline_section ul:not(.attention) {
	padding-left: 20px;
	margin: 30px 0;
}
#guideline_section li {
	margin-bottom: 1.6rem;
}
#guideline_section .unit p a {
	display: inline-block;
	background: #777;
	border-radius: 3px;
	padding: 0 1rem;
	margin: 0 0.5rem;
	line-height: 2.4rem;
}
#guideline_section .unit p a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f078";
	margin-right: 0.5rem;
}




/*-----------------------------------------
Loading
-----------------------------------------*/
#loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 1.2rem;
	line-height: 1.2rem;
	background-color: rgba(0,0,0,0.6);
	font-size: 1rem;
	letter-spacing: 0.5rem;
	z-index: 10;
	opacity: 1;
	transition: 0.3s;
}
#loading:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: #ffffff99;
	animation: 2s ease-in-out 0.5s infinite loading;
}
#loading:after {
	position: relative;
	content: "LOADING";
	display: block;
	text-align: center;
	width: 100%;
	z-index: 0;
}
@keyframes loading {
	0%		{ width: 0%;	left: 0;	right: auto; }
	49%		{ width: 100%;	left: 0;	right: auto; }
	50%		{ width: 100%;	left: auto;	right: 0; }
	100%	{ width: 0%;	left: auto;	right: 0; }
}

html:not(.loading) #loading {
	opacity: 0;
	top: -1.2rem;
}



/*-----------------------------------------
global nav
-----------------------------------------*/
#globalNav {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 20;
	width: 520px;
	z-index: 50;
}
#globalNav #gn-toggle {
	display: block;
	position: absolute;
	right: 36px;
	top: 30px;
	text-align: center;
	transition: opacity 0.3s;
	z-index: 30;
	width: 80px;

}
#globalNav #gn-toggle:hover {
	opacity: 0.75;
}
#globalNav #gn-toggle:before {
	content: " ";
	display: block;
	width: 8rem;
	height: 8rem;
	background: url(../images/common/menu.svg);
	background-size: contain;

	cursor: pointer;
}

#globalNav input[type=checkbox] {
	position: absolute;
	right: -9999px;
}
#globalNav input[type=checkbox]:checked ~ #gn-toggle:before {
	background-image: url(../images/common/cross.svg);
}

#globalNav nav {
	overflow: hidden;
	max-height: 0;
	transition: 0.3s;
	background: #000c;
	z-index: 20;
}
#globalNav input[type=checkbox]:checked ~  nav {
	max-height: 1600px;
}

#globalNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#globalNav li {
	position: relative;
}
#globalNav li:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	background: rgba(255, 230, 0, 0.3);
	transition: width 0.15s;
}
/*#globalNav #gn-system:before,
#globalNav #gn-character:before {
	display: none;
}*/

#globalNav li:hover:before {
	width: 100%;
}
#globalNav nav a ,
#globalNav nav span {
	position: relative;
	display: block;
	padding: 10px 0;
	text-align: center;
	transition: 0.3s;
}
#globalNav nav span {
	color: #fff6;
}

body.shop			#gn-shop_info_		> a ,

body.hero			#gn-home		> a ,
body.product		#gn-product		> a ,
body.premium		#gn-premium		> a ,
body.reservation	#gn-reservation	> a ,
body.download		#gn-download	> a ,
body#shopinfo		#gn-shopinfo	> a ,
body#guideline		#gn-guideline	> a ,
body.overview		#gn-overview	> a ,
body.system			#gn-system		> a ,
body.character		#gn-character	> a ,
body.movie			#gn-movie		> a ,
body.information	#gn-information	> a ,
body.publicity		#gn-publicity	> a {
	color: #c60005;
	text-shadow: 0 0 4px #000;
}

body.premium		#gn-premium		> a ,
body.reservation	#gn-reservation	> a ,
body.download		#gn-download	> a ,
body#shopinfo		#gn-shopinfo	> a ,
body#guideline		#gn-guideline	> a {
	font-weight: bold;
}

#globalNav nav li:not(#gn-home) a ,
#globalNav nav li:not(#gn-home) span {
	border-top: 1px solid #fff9;
}

#globalNav nav > ul > li > a ,
#globalNav nav > ul > li > span {
	font-family: Kaisho MCBK1;
	font-weight: 900;
	font-style: normal;
	font-size: 3.5rem;
	width: 100%;
	padding: 5px 0 15px;
}

#globalNav ul ul li {
	width: 60%;
	margin: 0 auto;
}
#globalNav ul ul a {
	font-size: 1.3rem;
	font-weight: normal;
}

#gn-home img {
	display: block;
	margin: 15px auto;
	height: 80px;
	max-width: 100%;
}

#gn-system a {
	letter-spacing: -0.5rem;
}
html:not(.mobile) #gn-guideline a {
	font-size: 2.8rem !important;
}

#globalNav a:hover {
	opacity: 1 !important;
}

body:not(#subpage) #gn-shopinfo a:before ,
body:not(#subpage) #gn-guideline a:before ,
html#subpage #globalNav li:not(#gn-shopinfo) > a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	position: absolute;
	top: calc(50% - 0.8rem);
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0rem;
}
body:not(#subpage) #gn-shopinfo a:before ,
body:not(#subpage) #gn-guideline a:before {
	content: "\f101";
	right: 3rem;
}
/*html#subpage #globalNav li:not(#gn-shopinfo) > a:before {
	content: "\f100";
	left: 3rem;
}*/



/* NEW */
#gn-toggle:after {
	display: none;
	right: 0px;
	top: 4px;
}
#globalNav li a:after {
	display: none;
	right: 6px;
	top: 8px;
}
h2 span.new ,
h3 span.new {
	display: inline-block;
	width: 1.3rem;
	margin-left: 12px;
}
h2 span.new {
	height: 7rem;
}
h3 span.new {
	height: 3.2rem;
}

th div.new::after ,
td div.new::after {
	top: -4px;
	right: -4px;
}

section[data-type="slider"] .pointer li:after {
	right: -6px;
	top: -6px;
}
.new:after {
	right: 5px;
	top: 5px;
}
#character .pointer li:after,
#movie .pointer li:after,
dt.new:after {
	right: -3px;
	top: -3px;
}

.pointer li,
.new { position: relative; }


#character .pointer li:after,
#movie .pointer li:after,
.new:after {
	width: 8px;
	height: 8px;
}
#gn-toggle:after ,
#globalNav li a:after {
	width: 12px;
	height: 12px;
}



/*
#character section[data-cat='chr_new'] .pointer li:nth-child(5):after,
#character section[data-cat='chr_new'] .pointer li:nth-child(6):after,
#character section[data-cat='chr_new'] .pointer li:nth-child(7):after,
#movie .pointer li:nth-child(1):after,*/
.new:after ,
#gn-toggle:after ,
#globalNav li a:after {
	content: " ";
	position: absolute;
	border-radius: 50%;
	background-color: #c60005;
	box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1);
	animation: blink 1s ease-in-out infinite alternate;
}


@keyframes blink {
	0% { opacity: 1; }
	100% { opacity: 0.4; }
}


/*----------------------------------------------------------------------------------
mobile
----------------------------------------------------------------------------------*/
html.mobile .forPC {
	display: none;
}
html:not(.mobile) .forMobile {
	display: none;
}

html.mobile body {
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
html.mobile #wrap {
	min-width: auto;
}
html.mobile h2 {
	height: 4rem;
	font-size: 3rem;
}
html.mobile h2:before,
html.mobile h2:after {
	width: 70px;
	height: 31px;
}

html.mobile section > h3 {
	background-size: cover;
	font-size: 2rem;
	line-height: 2.2rem;
	width: 100%;
	margin: 0 auto 2rem;
	padding-top: 4rem;
}
html.mobile section > h3 br {
	display: inline;
}
html.mobile section > h3 small {
	font-size: 1.6rem;
}

html.mobile .inner > section {
	width: 100%;
}
html.mobile section .inner p > a[target="_blank"] {
	margin-bottom: 4px;
}


/*----------------------------------------------------------------------------------
hero header
----------------------------------------------------------------------------------*/
html.mobile section#hero {
	margin-bottom: 0px;
}
html.mobile section#hero #right {
	display: none;
}

html.mobile #logo_ps54 {
	left: 8px;
	top: 8px;
	width: 200px;
}
html.mobile #mainchr {
	margin-left: -50px;
}
html.mobile #logo_zan2 {
	top: 60%;
	width: 80%;
}
html.mobile #releaseDate {
	bottom: 10%;
	width: 50%;
}
html.mobile #banner_area {
	right: 0px;
	left: 0;
	bottom: -72px;
	transition: 0s 0s;
display: none;
}
/*
html.mobile #banner_area a {
	float: left;
	width: 49%;
	height: auto;
	margin-bottom: 0;
	margin-left: 1%;
	box-sizing: border-box;
}
html.mobile #banner_area a:after {
	bottom: 30%;
}
html.mobile #banner_area a:before {
	content: " ";
	display: block;
	width: 100%;
	position: relative;
	height: 0;
	padding-top: 56.25%;
}
html.mobile #banner_area a p {
	height: 30%;
	padding-top: 5%;
	box-sizing: border-box;
}
*/


/*----------------------------------------------------------------------------------
product detail
----------------------------------------------------------------------------------*/
html.mobile #prodDetail .inner {
	width: 95%;
	margin: 0 auto;
}
html.mobile #prodDetail dt {
	width: 65px;
	padding-left: 12px;
}

html.mobile #prodDetail dd span {
	width: auto;
}

html.mobile #prodDetail dd small {
	display: block;
	margin-bottom: 0.5rem;
}
html.mobile #prodDetail dd br {
	display: none;
}

/*----------------------------------------------------------------------------------
product
----------------------------------------------------------------------------------*/
html.mobile #product img ,
html.mobile #information img {
	max-width: 95% !important;
	height: auto;
}



html.mobile .mobile_table_scroll {
	overflow: auto;
	white-space: nowrap;
	padding: 4%;
	box-sizing: border-box;
}
html.mobile #product table {
	width: 95%;
	max-width: none;
}

html.mobile #product table strong {
	font-size: 1.5rem;
}

html.mobile #product img {
	width: 95%;
}

html.mobile #dlc dt {
	float: none;
}

html.mobile #dlc dd {
	margin: 0 0 10px;
	padding: 0 10px;
}

html.mobile #dlc .unit .inner p {
	margin: 0 auto;
}

html.mobile #dlc .unit .inner .store:after {
	display: none;
}



/*----------------------------------------------------------------------------------
overview
----------------------------------------------------------------------------------*/
html.mobile #overview .inner > section > p {
	font-size: 1.4rem;
	margin: 0 2rem;
}
html.mobile #overview .inner > section > p > br {
	display: none;
}

/*----------------------------------------------------------------------------------
character
----------------------------------------------------------------------------------*/
html.mobile section#character {
	min-height: 100vh;
}
html.mobile section#character .inner {
	background-position: 80% top;
}


html.mobile section#character .screenshot {
	display: none;
}

html.mobile section#character section[data-type="slider"] ul.pointer li:nth-child(5):after {
	content: "\000A";
	white-space: normal;
}

html.mobile section#character ul.slide img.body {
	top: 10rem;
	right: calc(540/1920*100vw);
	height: 80%;
	width: auto;
	max-width: none;
}
html.mobile section#character ul.slide .profile {
	width: 90%;
	top: 31.5rem;
	left: 5%;
}
html.mobile section#character ul.slide .profile p {
	text-shadow: 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000;
}
html.mobile section#character ul.slide .profile p br {
	display: none;
}
html.mobile section#character ul.slide .cv ,
html.mobile section#character ul.slide .from {
	font-size: 1.1rem;
	padding: 2px 6px !important;
}
html.mobile section#character ul.slide .cv:before ,
html.mobile section#character ul.slide .from:after {
	font-size: 1.0rem;
	margin: 0;
}
html.mobile section#character ul.slide .from.itsu	{ background-color: #00fa; }
html.mobile section#character ul.slide .from.chiri	{ background-color: #f00a; }

html.mobile section#character ul.slide .profile p {
	font-size: 1.2rem;
}

html.mobile section#character section[data-type="slider"] .prev ,
html.mobile section#character section[data-type="slider"] .next {
	bottom: auto;
	top: 11rem;
}

html.mobile section#character section[data-type="slider"] ul.pointer {
	padding: 0;
	bottom: 35px;
}
html.mobile section#character section[data-type="slider"] ul.pointer li {
	margin: 6px;
}

html.mobile section#character input[name=chr_select]:checked + label {
	width: 120px;
}

html.mobile section#character label.cat_select {
	left: auto;
	right: 0;
	border-radius: 5px 0 0 5px;
	border-left: 1px solid rgba(255, 230, 0, 0.9);
	border-right: none;
}
html.mobile section#character label.cat_select:nth-child(5) {
    top: calc(50% - (50/1920*100vw));
}
html.mobile section#character label.cat_select {
	width: 90px;
    min-width: auto;
    height: calc(180/1920*100vw);
	line-height: calc(70/1920*100vw);
	font-size: calc(70/1920*100vw);
	padding-top: 5px;
}
html.mobile section#character label.cat_select small {
	display: block;
}


/*----------------------------------------------------------------------------------
movie
----------------------------------------------------------------------------------*/
html.mobile section#movie .inner {
	overflow: hidden;
}
html.mobile section#movie .inner:after {
	content: " ";
	display: block;
	padding-top: 56.25%;
}
html.mobile section#movie iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
}
html.mobile section#movie section[data-type="slider"] ul.pointer {
	bottom: 60px;
}

/*----------------------------------------------------------------------------------
publicity
----------------------------------------------------------------------------------*/
html.mobile section#publicity section::-webkit-scrollbar{ height: 5px; }
html.mobile section#publicity section::-webkit-scrollbar-track{ background: #F1F1F1; }
html.mobile section#publicity section::-webkit-scrollbar-thumb { background: #BCBCBC; }


/*----------------------------------------------------------------------------------
information
----------------------------------------------------------------------------------*/
html.mobile section > .unit,
html.mobile .split .explanation {
	margin: 0 5px;
	padding: 15px;
}html.mobile section > .unit p,
html.mobile .split .explanation p {
	font-size: 1.5rem;
}
/*----------------------------------------------------------------------------------
shopinfo
----------------------------------------------------------------------------------*/
html.mobile header img {
	width: 100px;
}
html#subpage.mobile .split .unit {
	width: calc(100% - 2%);
}



/*-----------------------------------------
toTop
global nav
-----------------------------------------*/
html.mobile #globalNav {
	width: 100%;
}

html.mobile #toTop img ,
html.mobile #globalNav #gn-toggle:before {
	font-size: 3rem;
	width: 3rem;
	height: 3rem;
}
html.mobile #toTop {
	right: 15px;
	bottom: 15px;
}
html.mobile #globalNav #gn-toggle {
	right: 15px;
	top: 15px;
	width: 3rem;
}
html.mobile #globalNav nav > ul > li > a ,
html.mobile #globalNav nav > ul > li > span {
	font-size: 2.5rem;
	padding: 0px 0 10px;
}
html.mobile #globalNav nav > ul ul > li > a ,
html.mobile #globalNav nav > ul ul > li > span {
	padding: 4px 0;
}


html.mobile #gn-home img {
	margin: 10px auto;
	height: 40px;
}

html.mobile #globalNav nav > ul > li#gn-guideline a {
	font-size: 2rem;
}


/*-----------------------------------------
slider
-----------------------------------------*/
html.mobile section[data-type="slider"] .next { right: 5px; }
html.mobile section[data-type="slider"] .prev { left: 5px; }
html.mobile section[data-type="slider"] .next img,
html.mobile section[data-type="slider"] .prev img {
	width: 3rem;
}


html.mobile .split.col3 .unit { width: calc(50% - 2%); }


/*-----------------------------------------
lightbox
-----------------------------------------*/
html.mobile #lightbox-container-image-box {
	max-width: 100% !important;
	height: auto !important;
}
html.mobile #lightbox-nav a {
	height: 100% !important;
}


/*-----------------------------------------
videoWrap
-----------------------------------------*/
#videoWrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.5s 0.2s;
	overflow: hidden;
}
body:not(.hero) #videoWrap {
	position: fixed;
}

html:not(.loading) #videoWrap {
	opacity: 1;
}
#videoWrap:after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../images/common/bg2.png) rgba(0,0,0,0.6);
	box-shadow: 0 0 calc(200/1920*100vw) rgba(0,0,0,1) inset;
}
video {
    position: absolute;
}
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  video {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
}
@media (max-aspect-ratio: 16/9) {
  video {
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}
/*EOF*/