@charset "utf-8";
@import url('https://use.fontawesome.com/releases/v5.15.4/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;
}

body:before {
	display: block;
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	background-size: cover;
	background-image: url(../images/common/bg.jpg);
	background-position: center center;
}
body#subpage:before {
	background-image: url(../images/common/bg2.jpg);
}

#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: Kaimin Sora Bold JIS2004 AP;
	font-weight: 900;
	font-style: normal;
	transition: 0.3s;
	margin-top: 50px;
}
.inner > section:nth-child(2) h3 {
	margin-top: 0 !important;
}
.inner > section:last-child {
	min-height: calc(100vh - 280px);
}

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: 0;
	padding: 50px;
	height: 90px;
	font-size: 5.5rem;
	text-shadow: 0 0 12px rgb(0, 0, 0),0 0 12px rgb(0, 0, 0);
    color: #fff !important;
	text-align: left;
	background: url(../images/common/h2.png) left 40px no-repeat;
}

h3 {
	font-family: Kaimin Sora Bold JIS2004 AP;
	font-weight: 900;
	font-style: normal;
}


section > h3 {
	font-size: 2.6rem;
	text-shadow: 0 0 12px rgb(0, 0, 0),0 0 12px rgb(0, 0, 0);
	color: #fff !important;
	height: 65px;
}
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 !important;
}

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: #FF9220;
}

dd {
	margin-bottom: 5px;
	overflow: hidden;
}
ul.list li {
	text-align: left;
	font-size: 1.6rem;
}
ul.left li {
	text-align: left;
}

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: #FF9220;

}


strong {
	color: rgb(251 212 102);
	font-size: inherit !important;
}
p > strong {
	margin: 0 0.3rem;
}

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


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

sup {
	font-size: 80% !important;
	font-weight: normal;
}
ruby ,
ruby rb {
	font-size: inherit
}
ruby rt{
	font-size: 50%;
	font-weight: normal;
}

pre {
	display: inline-block;
	border: 1px solid #fff4;
	background: #0004;
	padding: 8px 16px;
	margin-top: 4px;
	line-height: 1.4;
}

section#product a[target="_blank"] ,
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;
	vertical-align: text-top;
	font-size: 1.3rem !important;
	text-shadow: 0 0 3px #000;
	line-height: normal;
}

section#product a[target="_blank"] ,
section#publicity a[target="_blank"] ,
section#news a[target="_blank"] {
	background: #FF9220;

}
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";
	width: 1.28571429em;

	margin-left: 0.8rem;
	font-size: 1.1rem;
}

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


/*-----------------------------------------
Table
-----------------------------------------*/
table {
	width: 100%;
	background: rgba(0, 0, 0, 0.2);
	border: 2px solid rgba(127, 127, 127, 1);
    border-collapse: collapse;
    border-spacing: 0;
}

table th {
	background-color: rgba(54, 54, 54, 0.8);
	background-size: 300px 187.5px;
	background-position: -45px 40%;
	background-repeat: no-repeat;

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

table td {
	border: 1px solid rgba(127, 127, 127, 1);
	padding: 10px;
	font-size: 1.2rem;
}
table td[colspan="3"] {
	font-size: 1.5rem;
}


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; }
.mt5	{ margin-top:  5px !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; }

.pt0	{ padding-top:  0px !important; }
.pt10	{ padding-top: 10px !important; }
.pt20	{ padding-top: 20px !important; }

.pb0	{ padding-bottom:  0px !important; }

.right	{ text-align: right !important; }
.center	{ text-align: center !important; }
.left	{ text-align: left !important; }




/*-----------------------------------------
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 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;
}

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



/*----------------------------------------------------------------------------------
hero header
----------------------------------------------------------------------------------*/
section#hero {
	position: relative;
	overflow: hidden;
	min-height: auto;

}
section#hero .inner {
	position: relative;
	padding-bottom: 0;
}

section#hero #mainchr {
	position: relative;
	width: 50%;
	overflow: hidden;
	background-color: #000;
	z-index: 2;
}
#mainchr:before {
	content: "";
	display: block;
	height: 0;
	width: 100%;
	padding-top: 110%;
}

section#hero #mainchr #catch {
	position: absolute;
	top: calc(30/1920*100vw);
	left: calc(40/1920*100vw);
	font-family: Kaimin Sora Bold JIS2004 AP;
	font-weight: 900;
	font-style: normal;
	color: #000;
	font-size: calc(36/1920*100vw);
	z-index: 3;
	text-shadow: 0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff;
}
section#hero #hero_right {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	text-align: center;
	overflow: hidden;

}

html.loading #banner_area {
	opacity: 0;
}
#banner_area {
	position: relative;
	width: 100%;
	margin-top: 3%;
	opacity: 1;
	transition: opacity 0.3s 1.5s ease-out;
}
#banner_area a {
	position: relative;
	display: inline-block;
	border: 1px solid #FF9220;
	width: 32%;
	height: 18%;
	margin: 1.5%;
}
#banner_area a:after {
	content: "";
	position: absolute;
	display: block;
	width: 0px;
	height: 0px;
	border-width: calc(10/1920*100vw);
	border-style: solid;
	border-top-color: #FF9220;
	border-right-color: #FF9220;
	border-bottom-color: rgba(0,0,0,0);
	border-left-color: rgba(0,0,0,0);
	transition: 0.2s;
}
#banner_area a:hover:after {
	width: calc(10/1920*100vw);
	height: calc(10/1920*100vw);
	border-width: calc(5/1920*100vw);
}
#banner_area a[href^="#"]:after {
	bottom: calc(-13/1920*100vw);
	left: calc(50% - 10/1920*100vw);
	transform: rotate(135deg);
}
#banner_area a[href^="#"]:hover:after {
	bottom: calc(-16/1920*100vw);
}

#banner_area a[href*=".html"]:after {
	right: calc(-13/1920*100vw);
	top: calc(50% - 10/1920*100vw);
	transform: rotate(45deg);
}
#banner_area a[href*=".html"]:hover:after {
	right: calc(-16/1920*100vw);
}


#banner_area a.text {
	height: 4%;
}
#banner_area a img {
	position: relative;

	display: block;
	width: 100%;
}

#banner_area a:not(.text) p {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	opacity: 1;
	transition: opacity 0.3s;
}
#banner_area a p {
	margin: 0;
	padding: 4px 0 6px;
	height: 20%;
	line-height: 1.2;
	background-color: rgba(0,0,0,0.75);
	color: #fff;

	font-family: Kaimin Sora Bold JIS2004 AP;
	font-size: calc(20/1920*100vw);
	text-align: center;
	text-shadow: 0 1px 0 #000;

	opacity: 1;
	transition: opacity 0.3s;
}
#banner_area a:hover:not(.text) p {
	opacity: 0;
}


section#hero img {
	image-rendering: -webkit-optimize-contrast;/*chrome縮小ボケ回避*/
}


html.loading #logo_ps54 ,
html.loading #logo_steam ,
html.loading #logo_mm ,
html.loading #releaseDate ,
html.loading #banner {
	opacity: 0;
}
html.loading #catch {
	transform: translateX(-120%);

}
#logo_ps54 ,
#logo_steam ,
#logo_mm ,
#releaseDate  {
	opacity: 1;
}
#catch {
	transform: translateX(0px);
}
#catch			{ transition: transform 0.5s 0.3s ease-out; }

#logo_mm		{ transition: opacity 0.5s 0.5s; }

#logo_ps54 ,
#logo_steam 	{ transition: opacity 0.5s 1s; }

#banner			{ transition: opacity 0.5s 2s; }



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);
}

html:not(.loading) #hero_info {
	right: 0;
	transition: right 1s 0.7s;
}

#logo_ps54 {
	width: 25%;
	vertical-align: middle;
	margin-right: 2%;
}
#logo_steam {
	width: 12.5%;
	vertical-align: middle;
}


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

#logo_mm {
	display: block;
	margin: 10% auto 3.5%;
	width: 75%;
}


#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";
	width: 1.28571429em;

	display: inline-block;
	width: 1.25em;
	text-align: center;
}


/*----------------------------------------------------------------------------------
product detail
----------------------------------------------------------------------------------*/
section#prodDetail {
	background: #000;
	padding: 1% 0;
	z-index: 1;
	min-height: 100px;
	box-shadow: 0 -8px 8px rgba(255,255,255,0.15);

	height: calc(170/1920*100vw);
	box-sizing: border-box;
}
html:not(.mobile) section#prodDetail {
	position: absolute;
	width: 50%;
	min-width: 512px;
	transform: translate(100%,-100%);
	float: right;
}

section#prodDetail * {
	font-size: calc(14/1920*100vw);
}
section#prodDetail .inner {
	width: calc(650/1920*100vw);
	min-width: 350px;
	margin: 0 auto;
}

#prodDetail dt {
	width: 20%;
}


#prodDetail .cero {
	float: right;
	height:  calc(90/1920*100vw);
	min-height: 55px;
	image-rendering: -webkit-optimize-contrast;/*chrome縮小ボケ回避*/
}


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


#product section:not(#basic) th {
	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 td.steam {
	background-color:#1b2838;
	font-weight: bold;
}

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

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

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

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


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

section#character .screenshot {
	position: absolute;
	bottom: 27%;
	left: 50%;
	transition: opacity 0.3s 1s;
	opacity: 0;
	width: 50%;
	z-index: 11;
}
section#product .screenshot ,
section#system .screenshot {
	display: block;
	position: relative;
	padding-bottom: 0 !important;
	padding-top: 0;
}

.screenshot .unit ,
section#character .screenshot a {
	position: relative;
	display: block;
	float: left;
/*	margin-right: calc(10/1920*100vw);*/
	overflow: hidden;
	box-shadow: 0px 0px 20px -9px #fff;
    border: 1px solid #fff4;
	z-index: 20;
}
section#system .screenshot .unit {
	display: block;
	margin: 1%;
}
section#character .screenshot a {
	width: 26%;
	margin-right: 1.5%;
}

.screenshot .unit:before ,
section#character .screenshot a:before {
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.screenshot .unit img ,
section#character .screenshot img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}



/*----------------------------------------------------------------------------------
story
----------------------------------------------------------------------------------*/
section#story p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: calc(24/1080*100vh);

}


/*----------------------------------------------------------------------------------
system
----------------------------------------------------------------------------------*/
section#system p {
	padding-left: 20px;
	text-align: left;
}
html.mobile section#system br {
	display: none;
}


/*----------------------------------------------------------------------------------
character
----------------------------------------------------------------------------------*/
section#character {
	height: calc(1080/1920*100vw);
	min-height: 750px;
}
section#character .sectionBg {
	display: none;
}
section#character h2 {
	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 .profile {
	position: relative;
	width: 50%;
	top: calc(50% - (300/1920*100vw));
	left: 50%;
	z-index: 20;
	opacity: 0;
	transition: opacity 0.3s 0.6s;
}


section#character ul.slide .profile h3 {
	position: relative;
	font-size: calc(65/1920*100vw);
	margin-bottom: 0;
	margin-left: -1rem;
	text-shadow: 0 0 12px rgb(0 0 0), 0 0 12px rgb(0 0 0);
}

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(30/1920*100vw);
}
section#character ul.slide .cv:before {
	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;
}

.btnCv {
	position: relative;
	margin-left: calc(18/1920*100vw);
	display: inline-block;
	cursor: pointer;
	opacity: 1;
	width:  calc(32/1920*100vw);
	height:  calc(32/1920*100vw);
	padding: calc(2/1920*100vw);
	font-size: calc(20/1920*100vw) !important;
}
.btnCv:before {
	content: "";
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: block;
	border: 1px solid #fff8;
	background: #fff2;
	transform: rotate(45deg);
	transition: 0.3s;
}
#jp_container.jp-state-playing ~ #wrap span.btnCv.current {
	color: #FF9220;
}
#jp_container.jp-state-playing ~ #wrap span.btnCv.current:before {
	border-color: #FF9220;
	transform: rotate(135deg);
}

.btnCv:hover {
	opacity: 0.7;
}

.btnCv:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f028";
	width: 1.28571429em;

	display: inline-block;
	text-align: center;
	line-height: 1;
	transition: 0.3s;
}


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

section#character img.body ,
section#character img.bustup {
	position: absolute;
	top: 55%;
	right: 50%;
	z-index: 10;
	opacity: 0;
	transform: scale(1.05,1.05) translateY(-47.5%);
	-ms-filter: blur(3px);
	filter: blur(3px);
	transition: 0s 0s;
	width: 50%;
}


#chr01 img.body { margin-right: -6%; }
#chr02 img.body { margin-right: -4%; }
#chr03 img.body { margin-right: -6%; }
#chr04 img.body { margin-right: 4%; }

li img.bustup	{ margin-right: -8%; margin-top: -5%; }



section[data-current="1"] li#chr01 img.body ,
section[data-current="2"] li#chr02 img.body ,
section[data-current="3"] li#chr03 img.body ,
section[data-current="4"] li#chr04 img.body ,
section[data-current="5"] li#chr05 img.bustup ,
section[data-current="6"] li#chr06 img.bustup ,
section[data-current="7"] li#chr07 img.bustup ,
section[data-current="8"] li#chr08 img.bustup ,
section[data-current="9"] li#chr09 img.bustup ,
section[data-current="10"] li#chr10 img.bustup ,
section[data-current="11"] li#chr11 img.bustup ,
section[data-current="12"] li#chr12 img.bustup ,
section[data-current="13"] li#chr13 img.bustup ,
section[data-current="14"] li#chr14 img.bustup ,
section[data-current="15"] li#chr15 img.bustup ,
section[data-current="16"] li#chr16 img.bustup ,
section[data-current="17"] li#chr17 img.bustup ,
section[data-current="18"] li#chr18 img.bustup ,
section[data-current="19"] li#chr19 img.bustup ,
section[data-current="20"] li#chr20 img.bustup ,
section[data-current="21"] li#chr21 img.bustup ,
section[data-current="22"] li#chr22 img.bustup ,
section[data-current="23"] li#chr23 img.bustup ,
section[data-current="24"] li#chr24 img.bustup ,
section[data-current="25"] li#chr25 img.bustup ,
section[data-current="26"] li#chr26 img.bustup ,
section[data-current="27"] li#chr27 img.bustup 
{
	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;
	transform: scale(1,1) translateY(-50%);
	-ms-filter: blur(0px);
	filter: blur(0px);
}
section[data-current="1"] li#chr01 .screenshot ,
section[data-current="2"] li#chr02 .screenshot ,
section[data-current="3"] li#chr03 .screenshot ,
section[data-current="4"] li#chr04 .screenshot ,
section[data-current="5"] li#chr05 .screenshot ,
section[data-current="6"] li#chr06 .screenshot ,
section[data-current="7"] li#chr07 .screenshot ,
section[data-current="8"] li#chr08 .screenshot ,
section[data-current="9"] li#chr09 .screenshot ,
section[data-current="10"] li#chr10 .screenshot ,
section[data-current="11"] li#chr11 .screenshot ,
section[data-current="12"] li#chr12 .screenshot ,
section[data-current="13"] li#chr13 .screenshot ,
section[data-current="14"] li#chr14 .screenshot ,
section[data-current="15"] li#chr15 .screenshot ,
section[data-current="16"] li#chr16 .screenshot ,
section[data-current="17"] li#chr17 .screenshot ,
section[data-current="18"] li#chr18 .screenshot ,
section[data-current="19"] li#chr19 .screenshot ,
section[data-current="20"] li#chr20 .screenshot ,
section[data-current="21"] li#chr21 .screenshot ,
section[data-current="22"] li#chr22 .screenshot ,
section[data-current="23"] li#chr23 .screenshot ,
section[data-current="24"] li#chr24 .screenshot ,
section[data-current="25"] li#chr25 .screenshot ,
section[data-current="26"] li#chr26 .screenshot ,
section[data-current="27"] li#chr27 .screenshot ,

section[data-current="1"] li#chr01 .profile ,
section[data-current="2"] li#chr02 .profile ,
section[data-current="3"] li#chr03 .profile ,
section[data-current="4"] li#chr04 .profile ,
section[data-current="5"] li#chr05 .profile ,
section[data-current="6"] li#chr06 .profile ,
section[data-current="7"] li#chr07 .profile ,
section[data-current="8"] li#chr08 .profile ,
section[data-current="9"] li#chr09 .profile ,
section[data-current="10"] li#chr10 .profile ,
section[data-current="11"] li#chr11 .profile ,
section[data-current="12"] li#chr12 .profile ,
section[data-current="13"] li#chr13 .profile ,
section[data-current="14"] li#chr14 .profile ,
section[data-current="15"] li#chr15 .profile ,
section[data-current="16"] li#chr16 .profile ,
section[data-current="17"] li#chr17 .profile ,
section[data-current="18"] li#chr18 .profile ,
section[data-current="19"] li#chr19 .profile ,
section[data-current="20"] li#chr20 .profile ,
section[data-current="21"] li#chr21 .profile ,
section[data-current="22"] li#chr22 .profile ,
section[data-current="23"] li#chr23 .profile ,
section[data-current="24"] li#chr24 .profile ,
section[data-current="25"] li#chr25 .profile ,
section[data-current="26"] li#chr26 .profile ,
section[data-current="27"] li#chr27 .profile ,

section[data-current="1"] li#chr01 .inner:before ,
section[data-current="2"] li#chr02 .inner:before ,
section[data-current="3"] li#chr03 .inner:before ,
section[data-current="4"] li#chr04 .inner:before ,
section[data-current="5"] li#chr05 .inner:before ,
section[data-current="6"] li#chr06 .inner:before ,
section[data-current="7"] li#chr07 .inner:before ,
section[data-current="8"] li#chr08 .inner:before ,
section[data-current="9"] li#chr09 .inner:before ,
section[data-current="10"] li#chr10 .inner:before ,
section[data-current="11"] li#chr11 .inner:before ,
section[data-current="12"] li#chr12 .inner:before ,
section[data-current="13"] li#chr13 .inner:before ,
section[data-current="14"] li#chr14 .inner:before ,
section[data-current="15"] li#chr15 .inner:before ,
section[data-current="16"] li#chr16 .inner:before ,
section[data-current="17"] li#chr17 .inner:before ,
section[data-current="18"] li#chr18 .inner:before ,
section[data-current="18"] li#chr19 .inner:before ,
section[data-current="20"] li#chr20 .inner:before ,
section[data-current="21"] li#chr21 .inner:before ,
section[data-current="22"] li#chr22 .inner:before ,
section[data-current="23"] li#chr23 .inner:before ,
section[data-current="24"] li#chr24 .inner:before ,
section[data-current="25"] li#chr25 .inner:before ,
section[data-current="26"] li#chr26 .inner:before ,
section[data-current="27"] li#chr27 .inner:before 
{
	opacity: 1 !important;
}
section[data-current="1"] li#chr01 .inner:after ,
section[data-current="2"] li#chr02 .inner:after ,
section[data-current="3"] li#chr03 .inner:after ,
section[data-current="4"] li#chr04 .inner:after ,
section[data-current="5"] li#chr05 .inner:after ,
section[data-current="6"] li#chr06 .inner:after ,
section[data-current="7"] li#chr07 .inner:after ,
section[data-current="8"] li#chr08 .inner:after ,
section[data-current="9"] li#chr09 .inner:after ,
section[data-current="10"] li#chr10 .inner:after ,
section[data-current="11"] li#chr11 .inner:after ,
section[data-current="12"] li#chr12 .inner:after ,
section[data-current="13"] li#chr13 .inner:after ,
section[data-current="14"] li#chr14 .inner:after ,
section[data-current="15"] li#chr15 .inner:after ,
section[data-current="16"] li#chr16 .inner:after ,
section[data-current="17"] li#chr17 .inner:after ,
section[data-current="18"] li#chr18 .inner:after ,
section[data-current="19"] li#chr19 .inner:after ,
section[data-current="20"] li#chr20 .inner:after ,
section[data-current="21"] li#chr21 .inner:after ,
section[data-current="22"] li#chr22 .inner:after ,
section[data-current="23"] li#chr23 .inner:after ,
section[data-current="24"] li#chr24 .inner:after ,
section[data-current="25"] li#chr25 .inner:after ,
section[data-current="26"] li#chr26 .inner:after ,
section[data-current="27"] li#chr27 .inner:after 
{
	left: 0 !important;
}


/*slider*/

section#character div.pointer #toggle_chrpt {
	display: none
}

section#character div.pointer label {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	display: block;
	background: #FF922066;
	cursor: pointer;
	overflow: hidden;
}
section#character div.pointer label:after {
	position: absolute;
	top: calc(50% - 12px);
	right: 2px;
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-image: url(../images/common/icon-pin-slash.png);
	background-size: cover;
	opacity: 0.5;
	transition: opacity 0.3s;
}
section#character div.pointer label:hover:after {
	opacity: 1;
}

section#character div.pointer #toggle_chrpt:checked ~ label:after {
	background-image: url(../images/common/icon-pin.png);
}

html:not(.mobile) section#character section[data-type="slider"] div.pointer ul {
	padding: 0 1vw;
}

html:not(.mobile) section#character section[data-type="slider"] div.pointer:hover ul ,
html:not(.mobile) section#character section[data-type="slider"] div.pointer #toggle_chrpt:checked ~ ul {
	padding: 0.5vw calc(28px + 0.75vw) 0 0.5vw;
}

html:not(.mobile) section#character section[data-type="slider"] div.pointer:hover label,
html:not(.mobile) section#character section[data-type="slider"] div.pointer #toggle_chrpt:checked ~ label {
	width: 28px;
}


html:not(.mobile) section#character div.pointer:hover li:nth-child(1),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(1) { background-image: url(../images/character/tn01.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(2),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(2) { background-image: url(../images/character/tn02.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(3),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(3) { background-image: url(../images/character/tn03.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(4),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(4) { background-image: url(../images/character/tn04.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(5),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(5) { background-image: url(../images/character/tn05.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(6),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(6) { background-image: url(../images/character/tn06.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(7),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(7) { background-image: url(../images/character/tn07.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(8),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(8) { background-image: url(../images/character/tn08.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(9),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(9) { background-image: url(../images/character/tn09.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(10),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(10) { background-image: url(../images/character/tn10.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(11),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(11) { background-image: url(../images/character/tn11.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(12),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(12) { background-image: url(../images/character/tn12.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(13),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(13) { background-image: url(../images/character/tn13.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(14),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(14) { background-image: url(../images/character/tn14.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(15),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(15) { background-image: url(../images/character/tn15.png); }
html:not(.mobile) section#character div.pointer ul li:nth-child(15) { clear: both; }
html:not(.mobile) section#character div.pointer:hover li:nth-child(16),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(16) { background-image: url(../images/character/tn16.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(17),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(17) { background-image: url(../images/character/tn17.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(18),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(18) { background-image: url(../images/character/tn18.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(19),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(19) { background-image: url(../images/character/tn19.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(20),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(20) { background-image: url(../images/character/tn20.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(21),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(21) { background-image: url(../images/character/tn21.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(22),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(22) { background-image: url(../images/character/tn22.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(23),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(23) { background-image: url(../images/character/tn23.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(24),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(24) { background-image: url(../images/character/tn24.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(25),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(25) { background-image: url(../images/character/tn25.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(26),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(26) { background-image: url(../images/character/tn26.png); }
html:not(.mobile) section#character div.pointer:hover li:nth-child(27),
html:not(.mobile) section#character div.pointer #toggle_chrpt:checked ~ ul li:nth-child(27) { background-image: url(../images/character/tn27.png); }



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


html:not(.mobile) section#character section[data-type="slider"] div.pointer:hover li ,
html:not(.mobile) section#character section[data-type="slider"] div.pointer #toggle_chrpt:checked ~ ul li {
	position: relative;
/*	display: inline-block;*/
	width: 4vw;
	height: 4vw;
	background-size: cover;
	background-repeat: no-repeat;
	transform: rotate(0deg);
	margin: 0 0 0.5vw 0.5vw;
}




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"] div.pointer {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3vw;
	z-index: 30;
/*	text-align: center;*/
	background: #0005;
	line-height: 1;
}
section[data-type="slider"].single div.pointer {
	display: none;
}

section#character section[data-type="slider"] div.pointer {
	right: auto;
	background-color: rgba(0, 0, 0, 0.7);
/*	border-radius: 0 5px 5px 0;*/
	border: 1px solid #FF9220cc;
	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;
	padding: 0;
}

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




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




/*----------------------------------------------------------------------------------
movie
----------------------------------------------------------------------------------*/

.split.col1 .splitUnit ,
html.mobile .split .splitUnit {
	width: calc(100% - 40px); 
}

html:not(.mobile) .split.col3 .splitUnit {
	width: calc(33.33% - 40px);
}

html:not(.mobile) .split.col2 .splitUnit {
	width: calc(50% - 40px);
}


.split {
	padding: 20px 0;
	overflow: hidden;
}
.split .splitUnit {
	position: relative;
	margin: 0 20px;
	float: left;
	box-sizing: border-box;
}


.ratioUnit {
	box-shadow: 0px 0px 30px -10px #fff8;
	border: 1px solid #fff3;
	background: #1115;
}
.ratio16-9 .ratioUnit {
	position: relative;
	width: 100%;
}
.ratio16-9 .ratioUnit:before {
	position: relative;
	content: "";
	display: block;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.ratioUnit iframe {
	position: absolute;
	display: block;
	top: 0;
	width: 100%;
	height: 100%;
}


/*----------------------------------------------------------------------------------
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%;
}






/*----------------------------------------------------------------------------------
news
----------------------------------------------------------------------------------*/
section > .unit ,
.split .explanation {
	position: relative;
	background: rgb(0, 0, 0, 0.2);
	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 8px 40px;
	padding: 40px;
	font-size: 1.4rem;
}
section > .unit:before ,
.split .explanation:before {
	content: " ";
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	z-index: 0;
	background-repeat: no-repeat;
	box-sizing: border-box
}

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

#news h3 {
	margin-bottom: 0px;
}

#news p {
	text-align: left;
	padding: 0 0.5rem;
}
#news ul {
	padding-left: 20px;
}
#news ul li {
	margin-bottom: 0.5rem;
}
#news section {
	margin-bottom: 120px;
}
#news section img {
	max-width: 860px;
	display: block;
	margin: 0px auto 40px;
}



h4 {
	position: relative;
	text-align: center;
	background-color: rgb(51, 41, 36);
	background-image: url(../images/common/h2.png);
	background-position: -100px center;
	background-repeat: no-repeat;

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

	border: 1px solid rgba(255,255, 255, 0.2);
	margin-top: 40px;
	height: 45px;
    box-sizing: border-box;
	font-size: 1.4rem;
	line-height: 1.7;

	padding: 10px 18px;
	text-align: left;
}
html.mobile h4 {
	height: auto;
}
.explanation h4 {
	margin-top: 0px;
}
.split h4 * {
	text-align: inherit;
	font-size: inherit;
}

.unit h4 small {
	font-size: 80%;
}

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: 10px 0px 10px;
	font-size: inherit;
	font-weight: normal;
	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;
}
.legalAttr a {
	display: inline-block;
	margin-top: 0.7rem;
	padding: 0.1rem 1.5rem;
	border: 1px solid #fff8;
	border-radius: 4px;
}
.legalAttr a[target="_blank"]:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f360";
	width: 1.28571429em;

	margin-left: 0.8rem;
	font-size: 1.1rem;
}

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


#toTop:hover {
	transform: scale(1.2);
}
#toTop img {
	width: 40px;
}
#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;
	image-rendering: -webkit-optimize-contrast;/*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 h4 a ,
section .split h4 span {
	display: block;
/*	padding: 8px 0;*/
	padding: 0;
	position: relative;
}
section > .split > .unit img {
	display: block;
	margin: 0 auto;
	image-rendering: -webkit-optimize-contrast;/*chrome縮小ボケ回避*/
}
#shopinfo section > .split > .unit img {
	max-width: calc(100% - 20px);
	image-rendering: -webkit-optimize-contrast;/*chrome縮小ボケ回避*/
}

.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#news .split .split .unit {
	margin-left: 1%;
	margin-right: 1%;
}
section .split .unit .inner {
	backface-visibility: hidden;
}
html#subpage .split .unit .inner {
	margin-bottom: 40px;
}

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

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

.split .unit h4 { margin-top: 0px; }
.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 {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	text-align: center;
}
.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; }

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

section#shopinfo .split .unit h4.line2 p {
	position: absolute;
	top: -6px;
	left: 0;
	right: 0;
	margin: 0;
	font-size: inherit;
}
section#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;
	image-rendering: -webkit-optimize-contrast;/*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.pict {
	max-width: calc(100% - 20px);
    margin: 6px auto 0;
	background: #8886;
	font-size: 1.2rem;
	padding: 3px 15px 3px 0;
}
.split .unit p.pict:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
/*	content: "\f3e0";*/
	content: "\f007";
	width: 1.28571429em;

	display: block;
	float: left;
	margin: 0px 0px 0 6px;
	padding: 1px;
	opacity: 0.5;
	border: 1px solid #fff5;
	border-radius: 2px;
}

.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 span.reserve ,
#shopinfo a.reserve ,
#shopinfo a.store ,
#shopinfo p.applicable {
	max-width: calc(100% - 20px);
    margin: 16px auto 0 !important;
	box-sizing: border-box
}
#shopinfo span.reserve ,
#shopinfo a.reserve ,
#shopinfo a.store {
	padding: 12px;
}
span.reserve ,
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;
}
span.reserve ,
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;
}
span.reserve.pre {
	background: #7c7b7b77;
}
a.reserve.pre {
	display: none;
}
section#product a.store.pss {
	background: #00439c;
}
a.store.pss.ps5 {
	background: #fff;
	color: #000;
}

a.manual {
	padding: 1rem 2rem !important;
}

section#product a.store.steam {
    color: #d2efa9;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
    background: #75b022;
    background: -webkit-linear-gradient( top, #6fa720 5%, #588a1b 95%);
    background: linear-gradient( to bottom, #6fa720 5%, #588a1b 95%);
    background: linear-gradient( to right, #6fa720 5%, #588a1b 95%);
}
a.link {
	background: #3fad35;
	padding-left: 2rem;
}
a.reserve:before ,
a.store:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f07a";
	width: 1.28571429em;

	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;
}
h4 > a:after {
	position: absolute;
	right: 0;
	top: calc(50% - 0.9rem);
}



/*----------------------------------------------------------------------------------
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";
	width: 1.28571429em;

	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;
	overflow: hidden;
}
#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;
}



/*-----------------------------------------
more
-----------------------------------------*/
a.more {
	position: relative;
	display: block;
	margin: 5rem auto 0;
	width: 400px;
	height: 32px;
	padding: 1rem 0 1.5rem;
	border: 1px solid rgba(255, 230, 0, 0.9);
	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;

}
a.more span {
	position: relative;
	z-index: 1;
	font-size: 2.5rem;
	font-family: Kaimin Sora Bold JIS2004 AP;
	text-shadow: 0 0 12px rgb(0, 0, 0),0 0 12px rgb(0, 0, 0);
}
a.more:before {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../images/common/h2.png) left center no-repeat;
	z-index: 0;
	opacity: 0.75;
}



#changeLang {
	position: fixed;
	top: 25px;
	right: 100px;
	z-index: 30;
}

#changeLang a {
	display: inline-block;
	width: 75px;
	text-align: center;
	margin-left: 5px;

	background: #0008;
	border: 1px solid #fff8;

	padding: 3px 0 5px;
	font-family: Kaimin Sora Bold JIS2004 AP;
    font-style: normal;
	font-size: 1.5rem;
}

/*-----------------------------------------
global nav
-----------------------------------------*/
#globalNav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: #0009;
}
#globalNav #gn-bgtoggle {
	display: block;
	position: relative;
	top: 0;
	width: 100%;
}
#globalNav #gn-toggle {
	display: block;
	position: absolute;
	right: 20px;
	top: 20px;
	text-align: center;
	transition: opacity 0.3s;
	z-index: 30;
	width: 40px;
}
#globalNav #gn-toggle:hover {
	opacity: 0.75;
}
#globalNav #gn-toggle:before {
	content: " ";
	display: block;
	width: 40px;
	height: 40px;
	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-bgtoggle {
	height: 100vh;
}
#globalNav input[type=checkbox]:checked ~ #gn-toggle:before {
	background-image: url(../images/common/cross.svg);
}

#globalNav nav {
	position: absolute;
	top: 0;
	right: 80px;
	overflow: hidden;
	max-height: 0;
	min-width: 240px;
	transition: max-height 0.3s, border 0.3s, box-shadow 0.3s;
	background: #000c;
	z-index: 20;
	width: calc(500/1080*100vh);
	border: 0px solid #fff9;
	box-shadow: 0 0 20px #fff0;
}
#globalNav input[type=checkbox]:checked ~  nav {
	max-height: 1600px;
	box-shadow: 0 0 20px #fff6;
	border-width: 1px;
	border-top-width: 0;

}

#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;
}
/*#globalNav nav span {
	color: #fff6;
}*/

body.hero			#gn-home		> a ,
body.product		#gn-product		> a ,
body.reservation	#gn-reservation	> a ,
body.download		#gn-download	> a ,
body.preorder		#gn-preorder	> a ,
body.upgrade		#gn-upgrade		> a ,
body.shopinfo		#gn-shopinfo	> a ,

body.story			#gn-story		> a ,

body.system			#gn-system		> a ,
body.field			#gn-field		> a ,
body.battle			#gn-battle		> a ,
body.town			#gn-town		> a ,

body.character		#gn-character	> a ,
body.movie			#gn-movie		> a ,
body.news			#gn-news	> a ,
body.publicity		#gn-publicity	> a {
	color: rgb(225 207 101);
	text-shadow: 0 0 4px #000;
}

body.reservation	#gn-reservation	> a ,
body.download		#gn-download	> a ,
body.preorder		#gn-preorder	> a ,
body.upgrade		#gn-upgrade		> a ,
section#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 {
	position: relative;
	font-family: Kaimin Sora Bold JIS2004 AP;
	font-weight: 900;
	font-style: normal;
	font-size: calc(44/1080*100vh);
	width: 100%;
	padding: calc(12/1920*100vh) 0 calc(20/1080*100vh);
}

#globalNav ul ul li {
	width: 90%;
	margin: 0 auto;
}
#globalNav ul ul a {
	font-size: calc(18/1080*100vh);
	font-weight: normal;
}


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

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


a.more:after ,
#globalNav a[href*=".html"]:before ,
#globalNav a[href^="./"]:before {
	content: "";
	position: absolute;
	display: block;
	background: url(../images/common/arrow.svg) no-repeat;
	background-size: contain;
	transform: rotate(90deg);

	top: calc(50% - 22/1080*100vh);
	right: calc(10/1080*100vh);
	width: calc(44/1080*100vh);
	height: calc(44/1080*100vh);
}
#globalNav li li a[href*=".html"]:before {
	top: calc(50% - 15/1080*100vh);
	right: calc(0/1080*100vh);
	width: calc(30/1080*100vh);
	height: calc(30/1080*100vh);
}

/*html#subpage #globalNav li:not(#gn-shopinfo) > a:before {
	content: "\f100";
	left: 3rem;
}*/



/* NEW */
#gn-toggle:after {
	display: none;
	right: 0px;
	top: 0px;
}
#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;
}

/*html:not(:lang(ja)) #character .pointer li:nth-child(10):after,
html:not(:lang(ja)) #character .pointer li:nth-child(11):after,
html:not(:lang(ja)) #character .pointer li:nth-child(12):after,
html:not(:lang(ja)) #character .pointer li:nth-child(13):after,
html:not(:lang(ja)) #character .pointer li:nth-child(14):after,
html:not(:lang(ja)) #character .pointer li:nth-child(15):after,
html:not(:lang(ja)) #character .pointer li:nth-child(16):after,
html:not(:lang(ja)) #character .pointer li:nth-child(17):after,
html:not(:lang(ja)) #character .pointer li:nth-child(18):after,
html:not(:lang(ja)) #character .pointer li:nth-child(19):after,
html:not(:lang(ja)) #character .pointer li:nth-child(20):after,
#character .pointer li:nth-child(21):after,
#character .pointer li:nth-child(22):after,
#character .pointer li:nth-child(23):after,
#character .pointer li:nth-child(24):after,
#character .pointer li:nth-child(25):after,
#character .pointer li:nth-child(26):after,
#character .pointer li:nth-child(27):after,*/
.new:after ,
#gn-toggle:after ,
#globalNav li a:after {
	content: " ";
	position: absolute;
	border-radius: 50%;
	background-color: #FF9220;
	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: 70px;
	font-size: 3rem;
    padding: 65px 0 0 20px;
	margin-bottom: 0;
}
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;
}

html.mobile a.more {
	width: 90%;
}

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

html.mobile #logo_ps54 {
	width: 200px;
}
html.mobile #logo_steam {
	width: 80px;
}

html.mobile #mainchr {
	width: 100%;
}
html.mobile #logo_mm {
	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 section#hero #mainchr #catch {
	top: auto;
	bottom: calc(100/1920*100vw);
	left: calc(100/1920*100vw);
	color: #fff;
    text-shadow: 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 5px #000;
}

html.mobile section#hero #hero_right {
	position: relative;
	width: 100%;
	padding-bottom: 30px;
}

/*----------------------------------------------------------------------------------
product detail
----------------------------------------------------------------------------------*/
html.mobile section#prodDetail {
	min-height: auto;
	height: auto;
}
html.mobile section#prodDetail * {
    font-size: 1.2rem;
}
html.mobile section#prodDetail .inner {
	padding: 20px 12px;
	width: 95%;
	margin: 0 auto;
}
html.mobile #prodDetail dt {
	width: 65px;
}

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

html.mobile #prodDetail dd br {
	display: none;
}

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



html.mobile .mobile_table_scroll {
	position: relative;
	overflow: auto;
	white-space: nowrap;
	padding: 4%;
	box-sizing: border-box;
}

/*tableにスクロールバーを追加*/
html.mobile .mobile_table_scroll::-webkit-scrollbar {
	height: 5px;
}
html.mobile .mobile_table_scroll::-webkit-scrollbar-track {
	background: #fff4;
	border-radius: 5px;
	margin: 0 5px;
}
html.mobile .mobile_table_scroll::-webkit-scrollbar-thumb {
	background: #FF9220;
	border-radius: 5px;
}



html.mobile #product table {
	width: 95%;
	max-width: none;
	margin: 0 auto;
}

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

/*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;
}



/*----------------------------------------------------------------------------------
story
----------------------------------------------------------------------------------*/
html.mobile #story .inner > section > p {
	font-size: 1.6rem;
	margin: 2rem 2rem 0;
	text-align: left;
}


/*----------------------------------------------------------------------------------
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"] div.pointer ul li:nth-child(5):after {
	content: "\000A";
	white-space: normal;
}

html.mobile section#character ul.slide img.body {
	margin-top: -10%;
	right: calc(50% - 50vw);
	height: 80%;
	width: auto;
	max-width: none;
}

html.mobile section#character ul.slide li img.bustup {
	margin-top: -10%;
	right: calc(50% - 60vw);
	top: 45%;
	height: 60%;
	width: auto;
	max-width: none;
}
html.mobile section#character ul.slide .profile {
    width: 90%;
    top: 50%;
    left: 0px;
    background: #0008;
    padding: 2% 5%;
}

html.mobile section#character ul.slide .profile h3 {
	font-size: calc(180/1920*100vw);
	padding-left: 8px;
}

html.mobile section#character ul.slide .profile p {
    font-size: calc(60/1920*100vw);
}


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 {
	padding: 2px 6px !important;
}

html.mobile .btnCv {
    margin-left: calc(72/1920*100vw);
    width: calc(128/1920*100vw);
    height: calc(128/1920*100vw);
    padding: calc(8/1920*100vw);
    font-size: calc(84/1920*100vw) !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.6rem;
}

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

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



/*----------------------------------------------------------------------------------
movie
----------------------------------------------------------------------------------*/

html.mobile section#movie section[data-type="slider"] div.pointer ul {
	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; }


/*----------------------------------------------------------------------------------
news
----------------------------------------------------------------------------------*/
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 {
	right: auto;
}
html.mobile #globalNav nav > ul > li > a ,
html.mobile #globalNav nav > ul > li > span {
	font-size: 2.5rem;
	padding: 8px 0 10px;
}
html.mobile #globalNav nav > ul ul > li > a ,
html.mobile #globalNav nav > ul ul > li > span {
	padding: 8px 0 8px;
}


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

html.mobile #globalNav nav > ul > li#gn-guideline a {
	font-size: 2rem;
}
html.mobile #changeLang {
	top: 15px;
	right: 60px;
}


/*-----------------------------------------
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;
	position: fixed;
	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.5);
	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*/