/*============================================================================
 common */
:root {
	--color-t1: #e6b514;
	--color-t1-50: #e6b51488;
	--button-bg: #e6b514;
}


* {
	margin: 0;
	padding: 0;
	font-size: min(1.4vw,20px);
}

html {
	font-size: 62.5%;
}

html ,
body {
	position: relative;
	background-color: #fff;
	color: #fff;
}


body[data-status="loading"] #wrap {
	opacity: 0;
}
#wrap {
	opacity: 1;
	transition: opacity 1s;
}

section > h2 {
	width: 8.5vh;
	z-index: 1;
	margin: 5vh;
	height: calc(100% - 10vh);
	left: 0;
}

section > h2 ,
section > h2:before ,
section > h2:after {
	position: absolute;
	top: 0;
}
section > h2:before ,
section > h2:after {
	content: "";
	height: 100%;

}
section > h2:before {
	border-right: 1px solid var(--color-t1);
	top: 0.5vh;
	right: -1vh;
	opacity: 0.5;
}


section > h2:after {
	width: 100%;
	background-color: #000;
	right: -0.2vh;
	top: 0.2vh;
	transition: opacity 0.5s 1s;
	opacity: 0;
	z-index: -1;
}


#home h2 ,
#footer h2 {
	display: none;
}

body > svg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -99;
}


h2 svg text ,
svg#h2 text {
	font-size: 8vh;
	writing-mode: vertical-rl;
	transform: translateX(50%);
}

h2 svg {
	position: relative;
	height: 100%;
	width: 100%;
}
h2 svg text {
	fill: #0000;
	stroke: var(--color-t1);
	stroke-width: 0.5px;
	transition: translate 0.5s 0s;
	opacity: 1;
}
@media screen and (orientation: landscape) {
	h2 svg text {
		translate: 100% 0;
	}
}


#story		h2:after  { -webkit-clip-path: url(#storyCP); clip-path: url(#storyCP); }
#system		h2:after  { -webkit-clip-path: url(#systemCP); clip-path: url(#systemCP); }
#character	h2:after  { -webkit-clip-path: url(#characterCP); clip-path: url(#characterCP); }
#video		h2:after  { -webkit-clip-path: url(#videoCP); clip-path: url(#videoCP); }
#media		h2:after  { -webkit-clip-path: url(#mediaCP); clip-path: url(#mediaCP); }
#information	h2:after  { -webkit-clip-path: url(#informationCP); clip-path: url(#informationCP); }
#special	h2:after  { -webkit-clip-path: url(#specialCP); clip-path: url(#specialCP); }
#product	h2:after  { -webkit-clip-path: url(#productCP); clip-path: url(#productCP); }
#benefits	h2:after  { -webkit-clip-path: url(#benefitsCP); clip-path: url(#benefitsCP); }
#presskit	h2:after  { -webkit-clip-path: url(#presskitCP); clip-path: url(#presskitCP); }



h3 ,
h3 * {
	font-size: 3vmin;
	font-weight: normal;
	line-height: 1.2;
}


th {
	font-weight: normal;
}


a {
	transition: opacity 0.3s;
}

strong.attention {
	color: var(--color-t1);
}

*:not(.sns) > a:not(#aquaplus):not(.mns)[target="_blank"]:after {
	position: absolute;
	right: 0.5vw;
	top: 50%;
	translate: 0 -50%;
	content: "\f360";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.2vmin;
	color: #fff;
	text-shadow: 0 0 3px #000a;
}

a.download.mns img {
	width: auto;
	height: calc(2.1vw + 1.6vmin);
	margin-top: 9px;
}
#prdType a.download.mns img {
	width: 20vmin;
	height: auto;
}
html[lang=ja] a.download.steamItem {
	float: right;
}
a.download.steamItem {
	padding: 0.8vmin 2.5vw 0.8vmin 2vw;
}

.forMobile {
	display: none;
}

ruby {
	font-size: inherit;
}
ruby rt {
	font-size: 40%;
	margin-top: 0.5rem;
}

.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt40 { margin-top: 40px !important; }



section > .container {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;

	margin: 0;
	padding: 0;
	width: 60vw;
	max-width: 95vw;
	min-width: 60vw;
	height: auto;

	z-index: 1;
}
/*section > .container {
	position: relative;
	width: 100vh;
	max-width: 85%;
	height: 100vh;
	margin: 0 auto;
	padding: 5vmin 0;
	box-sizing: border-box;
	z-index: 1;

}*/

section {
	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	background: #000;
}

section > * {
	position: relative;
}


.new {
	position: relative;
}
.new:before ,
#character div.pointer li:nth-of-type(11):before ,
#character div.pointer li:nth-of-type(13):before ,
/*html[lang="ja"] #character div.pointer li:nth-of-type(10):before ,
html[lang="en"] #character div.pointer li:nth-of-type(10):before ,*/
html:not([lang="zh-Hans"]) #video div.pointer li:nth-of-type(2):before ,
html:not([lang="zh-Hans"]) #video div.pointer li:nth-of-type(16):before ,
html:not([lang="zh-Hans"]) #video div.pointer li:nth-of-type(17):before ,
#dummy {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-t1);

	box-shadow: 0 0 3px #000;
	transition: scale 0.3s, opacity 0.3s;
	translate: -50% -50%;

	animation: 1.3s ease-out .5s infinite heartbeat;
	z-index: 1;
}
nav#globalNav a.new:before ,
#character div.pointer li:before {
	top: 5px !important;
	left: 5px !important;
}
#character div.vis a.new:before {
	top: 10px !important;
	left: 10px !important;
}
h3.new:before {
	left: auto;
}



/*============================================================================
 nav: language */
#home nav.langNav {
	position: absolute;
	top: 0;
    right: 0;
	margin: 0;
}
nav.langNav {
	position: relative;
	z-index: 20;
	width: fit-content;
	margin: 7vmin auto;
	background: #000b;
	padding: 0px;
	font-size: 12px;
}
nav.langNav:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f0ac";
	display: inline-block;
	margin-left: 12px;
}

nav.langNav ul {
	display: inline-block;
	margin: 4px 12px 4px 0;
	padding: 0;
	list-style: none;
	font-size: inherit;
}
nav.langNav ul li {
	display: inline-block;
	font-size: inherit;
}
nav.langNav ul li:not(:nth-of-type(1)):before {
	content: "/";
	display: inline-block;
	margin-left: 5px;
}
nav.langNav a ,
nav.langNav ul span {
	display: inline-block;
	margin-left: 6px;
	padding: 1px;
	font-size: inherit;
	color: #fff;
	text-decoration: none;
}
nav.langNav ul a { color: #fff; }
nav.langNav ul span { color: #999; }

nav.langNav > a {
	background-color: red;
	margin-left: 0;
	padding: 0 12px;
	line-height: 2.3;
}
nav.langNav > a:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f56d";
	display: inline-block;
	margin-right: 6px;
}


/*============================================================================
 nav: global */
nav#globalNav {
	position: fixed;
	top: 50%;
	translate: 0 -50%;
	right: 0px;
	z-index: 20;
}

nav#globalNav #gnToggle {
	display: none;
}
nav#globalNav label {
	display: none;
	position: relative;
	float: right;
	margin: 1.5vmin 1.5vmin;
	width: 4.4vmin;
	text-align: center;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s;
	text-shadow: 0 0 3px #000;
	font-size: 4.5vmin;
}
nav#globalNav label:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f0c9";
}
nav#globalNav #gnToggle:checked ~ label:before {
	content: "\f00d";
}

nav#globalNav ul {
	padding: 0;
	list-style: none;
	clear: both;
}

nav#globalNav li {
	transition: width 0.3s;
	color: #fff;
}

nav#globalNav ul a {
	position: relative;
	display: block;
	margin-left: auto;
	padding-right: 4.5vmin;
	height: fit-content;
	text-align: left;
	text-decoration :none;
	color: inherit;

	text-shadow: -1px -1px 1px #0009, 1px -1px 1px #0009, -1px 1px 1px #0009, 1px 1px 1px #0009, 1px 1px 3px #000c;
}
nav#globalNav ul #gn-footer a {
	width: 0;
}
nav#globalNav ul a span {
	display: inline-block;
	padding-left: 2vmin;
	transition: 0.3s;
	white-space: nowrap;
	overflow: hidden;

	width: var(--gn-width);
	height: 4vmin;
	line-height: 1.4;
	font-size: 1.5vw;
	white-space: nowrap;
	opacity: 1;
}

nav#globalNav ul a:after {
	right: 2.5vmin;
	translate: 50% -75%;
	margin-left: 1rem;
}

nav#globalNav ul a:after ,
.slider .pointer li:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	width: 1vmin;
	height: 1vmin;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0px 0px 3px #000;
}



body[data-section="home"		] #gn-home ,
body[data-section="story"		] #gn-story ,
body[data-section="system"		] #gn-system ,
body[data-section="character"	] #gn-character ,
body[data-section="video"		] #gn-video ,
body[data-section="media"		] #gn-media ,
body[data-section="information"	] #gn-information ,
body[data-section="special"		] #gn-special ,
body[data-section="product"		] #gn-product ,
body[data-section="footer"		] #gn-footer {
	color: var(--color-t1);
}

body[data-section="home"		] #gn-home a:after ,
body[data-section="story"		] #gn-story a:after ,
body[data-section="system"		] #gn-system a:after ,
body[data-section="character"	] #gn-character a:after ,
body[data-section="video"		] #gn-video a:after ,
body[data-section="media"		] #gn-media a:after ,
body[data-section="information"	] #gn-information a:after ,
body[data-section="special"		] #gn-special a:after ,
body[data-section="product"		] #gn-product a:after ,
body[data-section="footer"		] #gn-footer a:after {
	width: 1.6vmin;
	height: 1.6vmin;
	background-color: var(--color-t1);
	border-radius: 0%;
}


body[data-section="story"		] #story h2:after ,
body[data-section="system"		] #system h2:after ,
body[data-section="character"	] #character h2:after ,
body[data-section="video"		] #video h2:after ,
body[data-section="media"		] #media h2:after ,
body[data-section="information"	] #information h2:after ,
body[data-section="special"		] #special h2:after ,
body[data-section="product"		] #product h2:after ,
body[data-section="benefits"	] #benefits h2:after ,
body[data-section="presskit"	] #presskit h2:after {
	opacity: 0.3;
}
body[data-section="story"		] #story h2 svg text ,
body[data-section="system"		] #system h2 svg text ,
body[data-section="character"	] #character h2 svg text ,
body[data-section="video"		] #video h2 svg text ,
body[data-section="media"		] #media h2 svg text ,
body[data-section="information"	] #information h2 svg text ,
body[data-section="special"		] #special h2 svg text ,
body[data-section="product"		] #product h2 svg text ,
body[data-section="benefits"	] #benefits h2 svg text ,
body[data-section="presskit"	] #presskit h2 svg text {
	translate: 0 0;
}


body[data-section="home"] nav#globalNav:has(~ #home[data-status="ended"]) ul a span ,
body[data-section="character"] nav#globalNav ul a span 
{ width: 0; opacity: 0; }

body[data-section="home"] nav#globalNav a.new:before ,
body[data-section="character"] nav#globalNav a.new:before {
	opacity: 0;
}


/*============================================================================
 slider */
.slider ,
.slider > .unit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.slider > .unit {
	transition: translate 0.3s;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.slider > .unit > * {
	position: relative;
	z-index: 1;
}


/*左寄せ*/
.slider[data-current="2"] > .unit:not([data-unit="2"]) ,
.slider[data-current="3"] > .unit:not([data-unit="3"]) ,
.slider[data-current="4"] > .unit:not([data-unit="4"]) ,
.slider[data-current="5"] > .unit:not([data-unit="5"]) ,
.slider[data-current="6"] > .unit:not([data-unit="6"]) ,
.slider[data-current="7"] > .unit:not([data-unit="7"]) ,
.slider[data-current="8"] > .unit:not([data-unit="8"]) ,
.slider[data-current="9"] > .unit:not([data-unit="9"]) ,
.slider[data-current="10"] > .unit:not([data-unit="10"]) ,
.slider[data-current="11"] > .unit:not([data-unit="11"]) ,
.slider[data-current="12"] > .unit:not([data-unit="12"]) ,
.slider[data-current="13"] > .unit:not([data-unit="13"]) ,
.slider[data-current="14"] > .unit:not([data-unit="14"]) ,
.slider[data-current="15"] > .unit:not([data-unit="15"]) ,
.slider[data-current="16"] > .unit:not([data-unit="16"]) ,
.slider[data-current="17"] > .unit:not([data-unit="17"]) 
{
	translate: -100% 0;
}
/*右寄せ（上書）*/
.slider[data-current=""] > .unit:not([data-unit="1"]) ,
.slider[data-current="1"] > .unit:not([data-unit="1"]) ,
.slider[data-current="2"] > .unit[data-unit="3"] ,
.slider[data-current="2"] > .unit[data-unit="3"] ~ .unit ,
.slider[data-current="3"] > .unit[data-unit="4"] ,
.slider[data-current="3"] > .unit[data-unit="4"] ~ .unit ,
.slider[data-current="4"] > .unit[data-unit="5"] ,
.slider[data-current="4"] > .unit[data-unit="5"] ~ .unit ,
.slider[data-current="5"] > .unit[data-unit="6"] ,
.slider[data-current="5"] > .unit[data-unit="6"] ~ .unit ,
.slider[data-current="6"] > .unit[data-unit="7"] ,
.slider[data-current="6"] > .unit[data-unit="7"] ~ .unit ,
.slider[data-current="7"] > .unit[data-unit="8"] ,
.slider[data-current="7"] > .unit[data-unit="8"] ~ .unit ,
.slider[data-current="8"] > .unit[data-unit="9"] ,
.slider[data-current="8"] > .unit[data-unit="9"] ~ .unit ,
.slider[data-current="9"] > .unit[data-unit="10"] ,
.slider[data-current="9"] > .unit[data-unit="10"] ~ .unit ,
.slider[data-current="10"] > .unit[data-unit="11"] ,
.slider[data-current="10"] > .unit[data-unit="11"] ~ .unit ,
.slider[data-current="11"] > .unit[data-unit="12"] ,
.slider[data-current="11"] > .unit[data-unit="12"] ~ .unit ,
.slider[data-current="12"] > .unit[data-unit="13"] ,
.slider[data-current="12"] > .unit[data-unit="13"] ~ .unit ,
.slider[data-current="13"] > .unit[data-unit="14"] ,
.slider[data-current="13"] > .unit[data-unit="14"] ~ .unit ,
.slider[data-current="14"] > .unit[data-unit="15"] ,
.slider[data-current="14"] > .unit[data-unit="15"] ~ .unit ,
.slider[data-current="15"] > .unit[data-unit="16"] ,
.slider[data-current="15"] > .unit[data-unit="16"] ~ .unit ,
.slider[data-current="16"] > .unit[data-unit="17"]
{
	translate: 100% 0;
}


.slider > .unit .container {
	width: 100vh;
	max-width: 90%;
	height: 100svh;
    margin: 0 auto;
}



/*slider変遷*/
#home #keyvis2 ,
section:not(#home, #story, #character):before ,
.slider > .unit:before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background-size: cover;
	background-position: center top;
	opacity: 0.2;
	scale: 1.1;
	transition: opacity 3s, scale 8s;
}
#home #keyvis2 {
	content: none;
	object-fit: cover;
	background-position: right top;
	width: 100%;
	height: 100%;
}


#story .slider > .unit[data-unit="1"]:before { background-image: url('../images/story/bg1.jpg'); }
#story .slider > .unit[data-unit="2"]:before { background-image: url('../images/story/bg2.jpg'); }
#story .slider > .unit[data-unit="3"]:before { background-image: url('../images/story/bg3.jpg'); }
#story .slider > .unit[data-unit="4"]:before { background-image: url('../images/story/bg4.jpg'); }

#system:before		{ background-image: url('../images/system/bg.jpg'); }

#character .slider > .unit[data-unit="1"]:before { background-image: url('../images/character/1/bg.jpg'); }
#character .slider > .unit[data-unit="2"]:before { background-image: url('../images/character/2/bg.jpg'); }
#character .slider > .unit[data-unit="3"]:before { background-image: url('../images/character/3/bg.jpg'); }
#character .slider > .unit[data-unit="4"]:before { background-image: url('../images/character/4/bg.jpg'); }
#character .slider > .unit[data-unit="5"]:before { background-image: url('../images/character/5/bg.jpg'); }
#character .slider > .unit[data-unit="6"]:before { background-image: url('../images/character/6/bg.jpg'); }
#character .slider > .unit[data-unit="7"]:before { background-image: url('../images/character/7/bg.jpg'); }
#character .slider > .unit[data-unit="8"]:before { background-image: url('../images/character/8/bg.jpg'); }
#character .slider > .unit[data-unit="9"]:before { background-image: url('../images/character/9/bg.jpg'); }
#character .slider > .unit[data-unit="10"]:before { background-image: url('../images/character/10/bg.jpg'); }
#character .slider > .unit[data-unit="11"]:before { background-image: url('../images/character/11/bg.jpg'); }

#character .slider > .unit[data-unit="12"]:before { background-image: url('../images/character/h/bg.jpg'); }
#character .slider > .unit[data-unit="13"]:before { background-image: url('../images/character/m/bg.jpg'); }
#character .slider > .unit[data-unit="14"]:before { background-image: url('../images/character/s/bg.jpg'); }
#character .slider > .unit[data-unit="15"]:before { background-image: url('../images/character/hk/bg.jpg'); }
#character .slider > .unit[data-unit="16"]:before { background-image: url('../images/character/g/bg.jpg'); }

#video:before		{ background-image: url('../images/video/bg.jpg'); }
#media:before		{ background-image: url('../images/media/bg.jpg'); }
#information:before	{ background-image: url('../images/information/bg.jpg'); }
#special:before		{ background-image: url('../images/special/bg.jpg'); }
#product:before		{ background-image: url('../images/product/bg.jpg'); }
#benefits:before	{ background-image: url('../images/product/bg.jpg'); }
#footer:before		{ background-image: url('../images/footer/bg.jpg'); }
#presskit:before	{ background-image: url('../images/footer/bg.jpg'); }

#home[data-status="ended"] #keyvis2 {
	scale: 1;
	opacity: 1;
}


body[data-section="story"		] .slider[data-current=""] > .unit[data-unit="1"]:before ,
body[data-section="character"	] .slider[data-current=""] > .unit[data-unit="1"]:before ,
.slider[data-current="1"] > .unit[data-unit="1"]:before ,
.slider[data-current="2"] > .unit[data-unit="2"]:before ,
.slider[data-current="3"] > .unit[data-unit="3"]:before ,
.slider[data-current="4"] > .unit[data-unit="4"]:before ,
.slider[data-current="5"] > .unit[data-unit="5"]:before ,
.slider[data-current="6"] > .unit[data-unit="6"]:before ,
.slider[data-current="7"] > .unit[data-unit="7"]:before ,
.slider[data-current="8"] > .unit[data-unit="8"]:before ,
.slider[data-current="9"] > .unit[data-unit="9"]:before ,
.slider[data-current="10"] > .unit[data-unit="10"]:before ,
.slider[data-current="11"] > .unit[data-unit="11"]:before ,
.slider[data-current="12"] > .unit[data-unit="12"]:before ,
.slider[data-current="13"] > .unit[data-unit="13"]:before ,
.slider[data-current="14"] > .unit[data-unit="14"]:before ,
.slider[data-current="15"] > .unit[data-unit="15"]:before ,

body[data-section="system"		] #system:before ,


body[data-section="video"		] #video:before ,
body[data-section="media"		] #media:before ,
body[data-section="information"	] #information:before ,
body[data-section="special"		] #special:before ,
body[data-section="product"		] #product:before ,
body[data-section="benefits"	] #benefits:before ,
body[data-section="footer"		] #footer:before ,
body[data-section="presskit"	] #presskit:before {
	scale: 1;
	opacity: 0.6;
}



/*移動ボタン*/
div[data-current=""] .prev ,
div[data-current="1"] .prev ,
div.slider.last .next ,
body[data-section="story"		] #story .prev ,
body[data-section="story"		] #story .next {
	display: none;
}

.slider .prev ,
.slider .next {
	position: absolute;
	bottom: 50%;
	z-index: 10;

	cursor: pointer;
	width: 3vmin;
	height: 6vmin;
	filter: drop-shadow(0px 0px 3px #000);
	transition: scale 0.3s, opacity 0.3s;
	translate: 0% 50%;
	animation: 1.3s ease-out .5s infinite heartbeat;

}
.slider.stopAnimation .prev ,
.slider.stopAnimation .next {
	animation: none;
}
@keyframes heartbeat {
	from {scale: 1.25;}
	to {scale: 1.0;}
}

.slider .prev:before ,
.slider .next:before {
	content: "";
	background: url('../images/common/arrow.svg') no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

/*反転用にあえてtransfrom*/
.slider .prev { transform: scale(-1, 1); left: -5vw;}
.slider .next { transform: scale( 1, 1); right: -5vw;}




/*ポインター*/
.slider .pointer {
	position: absolute;
	left: 50%;
	bottom: 2vh;
	translate: -50% 0%;
	z-index: 10;
	width: fit-content;
	max-width: calc(100% - 20vw);
}
.slider .pointer ul {
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
}
.slider .pointer li {
	position: relative;
	display: block;
	margin: 0.5vw; 
	width: 2vw;
	height: 2vw;

	transition: opacity 0.3s;
	opacity: 1;
	cursor: pointer;
	box-sizing: border-box;
}

.slider.pointerSquare .pointer li:after ,
.slider.pointerLandscape .pointer li:after {
	border-radius: 0;
}

.slider .pointer li:after {
	left: 50%;
	translate: -50% -50%;
}

div[data-current=""] .pointer li:nth-child(1) ,
div[data-current="1"] .pointer li:nth-child(1) ,
div[data-current="2"] .pointer li:nth-child(2) ,
div[data-current="3"] .pointer li:nth-child(3) ,
div[data-current="4"] .pointer li:nth-child(4) ,
div[data-current="5"] .pointer li:nth-child(5) ,
div[data-current="6"] .pointer li:nth-child(6) ,
div[data-current="7"] .pointer li:nth-child(7) ,
div[data-current="8"] .pointer li:nth-child(8) ,
div[data-current="9"] .pointer li:nth-child(9) ,
div[data-current="10"] .pointer li:nth-child(10) ,
div[data-current="11"] .pointer li:nth-child(11) ,
div[data-current="12"] .pointer li:nth-child(12) ,
div[data-current="13"] .pointer li:nth-child(13) ,
div[data-current="14"] .pointer li:nth-child(14) ,
div[data-current="15"] .pointer li:nth-child(15) 
{
	cursor: default;
	opacity: 1;
}
div[data-current=""] .pointer li:nth-child(1):after ,
div[data-current="1"] .pointer li:nth-child(1):after ,
div[data-current="2"] .pointer li:nth-child(2):after ,
div[data-current="3"] .pointer li:nth-child(3):after ,
div[data-current="4"] .pointer li:nth-child(4):after ,
div[data-current="5"] .pointer li:nth-child(5):after ,
div[data-current="6"] .pointer li:nth-child(6):after ,
div[data-current="7"] .pointer li:nth-child(7):after ,
div[data-current="8"] .pointer li:nth-child(8):after ,
div[data-current="9"] .pointer li:nth-child(9):after ,
div[data-current="10"] .pointer li:nth-child(10):after ,
div[data-current="11"] .pointer li:nth-child(11):after ,
div[data-current="12"] .pointer li:nth-child(12):after ,
div[data-current="13"] .pointer li:nth-child(13):after ,
div[data-current="14"] .pointer li:nth-child(14):after ,
div[data-current="15"] .pointer li:nth-child(15):after 
{
	background-color: var(--color-t1);
	border-radius: 0%;
	scale: 1.1;
}



.slider.pointerThumb .pointer li {
	width: 3.5vw;
	height: 3.5vw;
}


.slider.pointerThumb .pointer li:after {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid #fff;
	transition: scale 0.3s, oacity 0.3s;
}
.slider.pointerThumb.pointerLandscape .pointer li {
	width: 7vw;
}
.slider.pointerThumb.pointerLandscape .pointer li ,
.slider.pointerThumb.pointerLandscape .pointer li:after {
	height: calc(7vw * 0.5625);
}

#video .slider.pointerThumb.pointerLandscape .pointer li {
	width: 3.5vw;
}
#video .slider.pointerThumb.pointerLandscape .pointer li ,
#video .slider.pointerThumb.pointerLandscape .pointer li:after {
	height: calc(3.5vw * 0.5625);
}


.slider.pointerThumb .pointer li div {
	display: block;
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: calc(100% + 6px);
	height: calc(100% + 6px);
	transition: scale 0.3s, border-radius 0.3s;
	border: 1px solid var(--color-t1);
	visibility: hidden;
	transition: scale 0.3s;
	scale: 1.1;
}

div[data-current=""].pointerThumb .pointer li:nth-child(1) div ,
div[data-current="1"].pointerThumb .pointer li:nth-child(1) div ,
div[data-current="2"].pointerThumb .pointer li:nth-child(2) div ,
div[data-current="3"].pointerThumb .pointer li:nth-child(3) div ,
div[data-current="4"].pointerThumb .pointer li:nth-child(4) div ,
div[data-current="5"].pointerThumb .pointer li:nth-child(5) div ,
div[data-current="6"].pointerThumb .pointer li:nth-child(6) div ,
div[data-current="7"].pointerThumb .pointer li:nth-child(7) div ,
div[data-current="8"].pointerThumb .pointer li:nth-child(8) div ,
div[data-current="9"].pointerThumb .pointer li:nth-child(9) div ,
div[data-current="10"].pointerThumb .pointer li:nth-child(10) div ,
div[data-current="11"].pointerThumb .pointer li:nth-child(11) div ,
div[data-current="12"].pointerThumb .pointer li:nth-child(12) div ,
div[data-current="13"].pointerThumb .pointer li:nth-child(13) div ,
div[data-current="14"].pointerThumb .pointer li:nth-child(14) div ,
div[data-current="15"].pointerThumb .pointer li:nth-child(15) div 
{
	visibility: visible;
}

#character .slider .pointer li:nth-child(1):after { background-image: url('../images/character/1/pointer.png'); }
#character .slider .pointer li:nth-child(2):after { background-image: url('../images/character/2/pointer.png'); }
#character .slider .pointer li:nth-child(3):after { background-image: url('../images/character/3/pointer.png'); }
#character .slider .pointer li:nth-child(4):after { background-image: url('../images/character/4/pointer.png'); }


#benefits .slider .pointer li:nth-child(1):after { background-image: url('../images/product/pointer1.png'); }
#benefits .slider .pointer li:nth-child(2):after { background-image: url('../images/product/pointer2.png'); }
#benefits .slider .pointer li:nth-child(3):after { background-image: url('../images/product/pointer3.png'); }



/*ダイレクト移動ボタン*/
ul.dsNav {
	display: block;
	width: fit-content;
	list-style: none;
	margin: 1vmin auto;
	padding: 0;
}
ul.dsNav li {
	position: relative;
	margin: 1vmin 0;
	padding: 0.5vmin 4vmin 0.5vmin 2vmin;
	background: #ffd900;
	color: #000;
	border-radius: 4vmin;
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s;
}
ul.dsNav li:after {
	position: absolute;
	content: "";
	background: url('../images/common/arrow_b.svg') no-repeat;
	background-size: contain;
	width: 1.2vmin;
	height: 2.4vmin;
	position: absolute;
	right: 1.8vmin;
	top: 50%;
	translate: 50% -50%;
	animation: 1.3s ease-out .5s infinite heartbeat;
}

ul.dsNav li small {
	font-size: 75%;
	margin-right: 0.5rem;
}




/*============================================================================
 vis */
 .vis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin-top: 2vmin;
	padding: 1vmin;
	transition: opacity 1s 0.75s;
}

.vis a {
	position: relative;
	display: inline-block;
	margin-right: 2vmin;
	margin-bottom: 2vmin;
	height: auto;
	overflow: hidden;
	z-index: 10;
	box-shadow: 0 0 8px -3px #000;
}

.vis a:after {
	content: "";
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.vis.sd a:after {
	padding-top: 75%;
}
.vis.vt140 a:after {
	padding-top: 140%;
}

.vis img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}

.vis a[href^="https://youtu.be/"]:before {
	content: attr(title);
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--button-bg);
	box-shadow: 0 0 3px #000;
	color: #000;
	font-size: 1.2vmin;
	padding: 0.2vmin 1vmin;
	z-index: 1;
}



 /*============================================================================
 home */
#home .link {
	position: absolute;
	bottom: 0;
	right: 5%;

	width: 46vw;
	box-sizing: border-box;

	background: red;
	margin: 0 1vmin;
	padding: 1vh 2vw 1vh 1vw;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
#home .link ,
#home .link * {
	font-size: 2vmin;
}

#reserve {
	display: grid;
	grid-template-columns: repeat(4, 25%);
	gap: 0.5vw;

	position: absolute;
	top: 50%;
	right: 5%;
/*	width: fit-content;*/
	width: 47vw;
	height: 13vmin;
	translate: 0% -50%;
	transform: translateY(34vh);
}



#home[data-status="play"] video {
	transition: opacity 0.3s;
	opacity: 1;
}
#home[data-status="ended"] video {
	transition: opacity 1s;
	opacity: 0;
}



#home video {
	position: absolute;
	opacity: 0;
	transition: opacity 0.3s;
}

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
	#home video {
		width: 100%;
		top: 50%;
		transform: translate(0, -50%);
	}
}
@media (max-aspect-ratio: 16/9) {
	#home video {
		height: 100%;
		left: 50%;
		transform: translate(-50%, 0);
	}
}


#home {
	background-color: #fff;
}


#home img {
	position: absolute;
}
#home .logo_switch	{ top: 2vmin; height: 6vmin; left: 2vmin;}
#home .logo_ps5		{ top: 3.5vmin; height: 3vmin; left: 11vmin;}
#home .logo_steam	{ top: 3vmin; height: 4vmin; left: 28vmin;}

#catch ,
#home .logo_utashiro ,
#release ,
#price ,
#home .steamWidget {
	position: absolute;
	translate: 50% -50%;
	top: 50%;
	right: 75%;
}

#catch {
    font-size: 1.4vw;
	width: 25%;
	transform: translateY(-28vh);
	color: #cf3150;
}


/*#catch ,*/
#catch ,
#release ,
#price {
	filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 2px #fff);
}

#home .logo_utashiro {
	width: 30%;
	transform: translateY(-10vh);
}

#catch ,
#release {
	line-height: 1.4;
    text-align: center;
    padding: 1vw;
}
#release {
    font-size: 2vw;
    width: 25%;
	transform: translateY(10vh);

	background-size: cover;
	background-clip: text;

	color: #000;
	transition: 0.3s;
}
#home[data-status="ended"] #release {
	color: #0000;
    background-image: url('../images/home/overlay.jpg');
}
#release strong {
	font-size: 140%;
	margin: 0 0.3rem;
}


#price  {
	width: 33%;
	transform: translateY(34vh);
}

#home .steamWidget {
	width: 30%;
	transform: translateY(30vh);
}



/*sns*/
#home .sns {
	position: absolute;
	top: 5.5vh;
	right: 2.5vmin;
}
#home .logo_ps5 ,
#home .logo_steam ,
#home .sns i.fa-svg:before {
	transition: filter 0.3s;
}
#home[data-status="ended"] .logo_ps5 ,
#home[data-status="ended"] .logo_steam ,
#home[data-status="ended"] .sns i.fa-svg:before
{
	/*白オーバーレイ*/
/*	filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(238deg) brightness(105%) contrast(101%);*/
	filter: invert(100%);
}

.sns a {
	margin-left: 2vmin;
	vertical-align: middle;
}
i.fa-svg {
	position: relative;
	display: inline-block;
	font-size: 3vh;
	width: 1.28571429em;
	height: 1.5em;
}
i.fa-svg:before {
	content: "";
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
i.fa-svg.x-twitter:before		{ background-image: url('../images/common/brands_x.svg');}
i.fa-svg.facebook-square:before { background-image: url('../images/common/brands_facebook.svg');}
i.fa-svg.line:before			{ background-image: url('../images/common/brands_line.svg');}



/*============================================================================
 story */
#story .container {
	opacity: 0;
	transition: opacity 0s 1s;
}


body #story p {
	font-size: 120%;
	margin-bottom: 2vmin;
	opacity: 0;
	translate: 0 -1vmin;
	line-height: 1.6;
}
body[data-section="story"] #story p:nth-child(1) { transition: opacity 1s 1s,	 translate 1s 1s	; }
body[data-section="story"] #story p:nth-child(2) { transition: opacity 1s 1.25s, translate 1s 1.25s; }
body[data-section="story"] #story p:nth-child(3) { transition: opacity 1s 1.5s,	 translate 1s 1.5s	; }
body[data-section="story"] #story p:nth-child(4) { transition: opacity 1s 1.75s, translate 1s 1.75s; }
body[data-section="story"] #story p:nth-child(5) { transition: opacity 1s 2.0s,	 translate 1s 2.0s	; }
body[data-section="story"] #story p:nth-child(6) { transition: opacity 1s 2.25s, translate 1s 2.25s; }
body[data-section="story"] #story p:nth-child(7) { transition: opacity 1s 2.5s,	 translate 1s 2.5s	; }
body[data-section="story"] #story p:nth-child(8) { transition: opacity 1s 2.75s, translate 1s 2.75s; }
body[data-section="story"] #story p:nth-child(9) { transition: opacity 1s 3.0s, translate 1s 3.0s; }
body[data-section="story"] #story p:nth-child(10) { transition: opacity 1s 3.25s, translate 1s 3.25s; }
body[data-section="story"] #story p:nth-child(11) { transition: opacity 1s 3.5s, translate 1s 3.5s; }

body[data-section="story"] #story .container ,
body[data-section="story"] #story p {
	opacity: 1;
}
body[data-section="story"] #story p {
	translate: 0 0;
}



/*============================================================================
 system */
#system .unit .container ,
#information .unit .container {
	position: absolute;
	top: 50%;
	left: 50%;
	height: auto;
	translate: -50% -50%;
}

#system .container p {
	text-align: center;
}


#system h3 ,
#product h3 ,
#benefits h3 ,
#information h3 ,
#special h3 ,
#presskit h3 {
	text-align: center;
	margin-bottom: 4vmin;
}
#system h3 {
	margin-bottom: 0;
}

#product h4 ,
#benefits h4 ,
#information h4 ,
#presskit h4 {
	margin-bottom: 0.5vw;
	border-bottom: 1px solid #fff;
}

#system .vis ,
#information .vis ,
#benefits .vis {
	justify-content: center;
}
#benefits .vis {
	height: 50vh;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: start;
}
#system .vis a {
	width: 30vmin;
}
#benefits .contents ,
#benefits .vis a {
	width: 30vmin;
	align-items: center;
}

#benefits .contents h4 {
    font-size: 1.4vmin;
}
#benefits .contents p {
    font-size: 1.4vmin;
	margin-bottom: 0.75rem;
}
#benefits .contents {
	height: 100%;
}

#benefits div[data-unit="3"] p ,
#benefits div[data-unit="3"] li {
	font-size: 1.6vmin;
}
#benefits div[data-unit="3"] ul {
	margin-left: 1.5rem;
}
#benefits div[data-unit="3"] p {
	margin-bottom: 1.5rem;
}



/*============================================================================
 character */
#character h3 {
	position: relative;
	margin: 4vmin 0 4vmin;
	font-size: 9vmin;
	line-height: 1;
	z-index: 1;
}

#character .unit svg.name  {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 16vmin;
	translate: 100% 0;
	transition: translate 0.5s 1s;
	z-index: 0;
}
#character .unit svg.first {
	transform: translateY(-13vmin);
}
#character .unit svg.name text {
	fill: #0000;
	stroke: #c6ddfc88;
	stroke-width: 1px;
	font-size: 16vmin;
	translate: 0 2px;
	text-anchor: end;
}
#character .unit svg.first text {
	translate: 0 -4px;
}

body[data-section="character"	] #character div[data-current=""] .unit[data-unit="1"] svg.name ,
#character div[data-current="1"] .unit[data-unit="1"] svg.name ,
#character div[data-current="2"] .unit[data-unit="2"] svg.name ,
#character div[data-current="3"] .unit[data-unit="3"] svg.name ,
#character div[data-current="4"] .unit[data-unit="4"] svg.name ,
#character div[data-current="5"] .unit[data-unit="5"] svg.name ,
#character div[data-current="6"] .unit[data-unit="6"] svg.name ,
#character div[data-current="7"] .unit[data-unit="7"] svg.name ,
#character div[data-current="8"] .unit[data-unit="8"] svg.name ,
#character div[data-current="9"] .unit[data-unit="9"] svg.name ,
#character div[data-current="10"] .unit[data-unit="10"] svg.name ,
#character div[data-current="11"] .unit[data-unit="11"] svg.name ,
#character div[data-current="12"] .unit[data-unit="12"] svg.name ,
#character div[data-current="13"] .unit[data-unit="13"] svg.name 
{
	translate: 0 0;
}



/*fullbody*/
body #character div .unit img.fullbody {
	position: absolute;
	top: 50%;
	left: 51%;
	translate: calc(-50% + 30vmin) calc(-50% - 5vh);
	width: auto;
	height: 90vh;
	opacity: 0;
	transition: left 0.8s 0.3s, opacity 0.8s 0.3s;
}
body[data-section="character"	] #character div[data-current=""] .unit[data-unit="1"] img.fullbody ,
#character div[data-current="1"] .unit[data-unit="1"] img.fullbody ,
#character div[data-current="2"] .unit[data-unit="2"] img.fullbody ,
#character div[data-current="3"] .unit[data-unit="3"] img.fullbody ,
#character div[data-current="4"] .unit[data-unit="4"] img.fullbody {
	left: 50%;
	opacity: 1;
}



/*CV*/
.cv {
	position: relative;
	display: flex;
	align-items: flex-start;
	z-index: 10;
}
.cv div {
	position: relative;
	display: inline-block;
	font-size: 3vmin;
	line-height: 5vmin;
	/*padding-left: 2.5vmin;*/
	padding: 0 2.5vmin 0 6vmin;

	background: #0008;
	border-radius: 5vmin;
	box-shadow: 0 0 8px #fff6;
	height: 5vmin;
	margin-right: 1.5vmin;
	margin-bottom: 2vmin;
	box-sizing: border-box;
}

#character .unit[data-unit="11"] .cv ,
#character .unit[data-unit="11"] ~ .unit .cv {
	flex-direction: column;
}
#character .unit[data-unit="11"] .cv div.original ,
#character .unit[data-unit="11"] ~ .unit .cv div.original {
	margin-top: 3vmin;
}

#preload { display: none; }
.cv div:before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 2vmin;
	content: "\58F0:";
	font-size: 70%;
	line-height: 1;
}

.cv div .voice {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	margin-left: 1vmin;
	width: 5vmin;
	height: 5vmin;
	border-radius: 50%;
	cursor: pointer;
    font-size: 3vmin;
}
.cv div .voice:first-child {
	margin-left: 2vmin;
}
.cv div .voice:before ,
.cv div .voice:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}
.cv div .voice:before {
	content: "";
	background: var(--button-bg);
	transition: scale 0.3s, opacity 0.3s;
	animation: none;
	line-height: 1;
	scale: 1;
}
.cv div .voice[data-status="play"]:before {
	background: var(--color-t1);
	animation: 1.3s ease-out .5s infinite heartbeat;
}

.cv div .voice:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f028";

	line-height: 5.1vmin;
	font-size: 60%;
	text-align: center;
	color: #000;
}
.cv div .voice[data-status="play"]:after {
	content: "\f04b";
}



.detail {
	position: relative;
	padding: 1vmin;
	line-height: 2;
	text-shadow: 0 0 3px #000;
	z-index: 1;
}

#character .unit[data-unit="1"] .detail ,
#character .unit[data-unit="2"] .detail {
	width: 60vmin;
}



/*vis*/
#character .vis {
	opacity: 0;
	width: 50vmin;
}

#character .vis a {
	width: 33vmin;
}

body[data-section="character"	] #character div[data-current=""] .unit[data-unit="1"] .vis ,
#character div[data-current="1"] .unit[data-unit="1"] .vis ,
#character div[data-current="2"] .unit[data-unit="2"] .vis ,
#character div[data-current="3"] .unit[data-unit="3"] .vis ,
#character div[data-current="4"] .unit[data-unit="4"] .vis ,
#character div[data-current="5"] .unit[data-unit="5"] .vis ,
#character div[data-current="6"] .unit[data-unit="6"] .vis ,
#character div[data-current="7"] .unit[data-unit="7"] .vis ,
#character div[data-current="8"] .unit[data-unit="8"] .vis ,
#character div[data-current="9"] .unit[data-unit="9"] .vis ,
#character div[data-current="10"] .unit[data-unit="10"] .vis ,
#character div[data-current="11"] .unit[data-unit="11"] .vis ,
#character div[data-current="12"] .unit[data-unit="12"] .vis ,
#character div[data-current="13"] .unit[data-unit="13"] .vis
{
	opacity: 1;
}


/*============================================================================
 video */
#video .ratioUnit h3 {
	position: absolute;
	top: -7vmin;
	left: 0;
	width: 100%;
	text-align: center;
}

#video .ratioUnit {
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;

	width: 100%;
	height: 0;
	padding-top: 56.25%;
	background: #000a;
}
#video .ratioUnit:has(.youtube):before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f110";
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-block;
	font-size: 5dvw;
	width: 5dvw;
	transform: translate(-50%,-50%);
	opacity: 0.2;
	animation: turn 1s linear infinite;
	animation-timing-function: steps(8, end);
}
@keyframes turn {
	to {
		transform: translate(-50%,-50%) rotate(1turn);
	}
}

#video .ratioUnit iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 15px -5px #fff;
}

#video .vis a {
	width: calc(50% - 2vmin);
}



/*============================================================================
 media */
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	line-height: 1.6;
}




#media td {
	text-align: center;
	padding: 4px 1em;
}
#media tbody tr:nth-child(odd) {
	background: #fff3;
}
#media a:not(:has(img)) ,
#information a:not(:has(img)):not(.steamItem) ,
#presskit  .unit a ,
a.linkButton {
	position: relative;
	display: inline-block;
	color: #fff;
	padding: 0 1.7vw 0 0.5vw;
	background: var(--color-t1);
	text-decoration: none;
	text-shadow: 0 0 3px #000;
	border-radius: 3px;
	font-size: 80% !important;
}

/*============================================================================
 information */
#information small {
	font-size: 80%;
}

div.item.flex {
	display: flex;
}

#information div.detail {
	margin-left: 1vw;
	padding-top: 0;
}
#information div.detail h4 {
	margin-top: 1rem;
}
#information div.detail * {
	font-size: 1vw;
}

p.attention {
	font-size: 75% !important;
}
p.attention:before {
	content: "\203B";/* ※ */
	color: var(--color-t1);
	margin-right: 0.2rem;
	font-weight: bold;
}

dl {
	overflow: hidden;
}
dt {
	position: relative;
	float: left;
	width: 5vw;
	margin-right: 1.5vw;
	overflow: hidden;
}
dl.dt-fit dt {
	width: fit-content;
    overflow: hidden;
	padding-right: 1.0vw;
}

dd {
	overflow: hidden;;
}

ul.attention {
	list-style-type: "\203B";
}
ul.attention li::marker {
	color: #ea527e;
	font-weight: bold;
}

ul ,
ol {
	padding-left: 1.5vw;
	line-height: 1.5;
}

#information div.fig {
	max-width: 30%;
}
#information div.fig img {
	width: 100%;
	height: auto;
}


#information div.vis a {
    width: 10vw;
    margin: 0;
}

#information .dlc2chr a:after {
	display: none;
}

#information .dlc2chr img {
	width: 5vw;
}

/*#information .pointer {
	display: none;
}*/


/*============================================================================
special */
#special div.item.flex {
	justify-content: flex-start;
    flex-wrap: wrap;
}

#special div.item p {
	text-align: center;
	margin-bottom: 1vh;
}
#special div.item.flex p {
	padding: 0.5vw;
	box-sizing: border-box;
    width: 20%;
}
#special div.item.flex a {
	position: relative;
	display: inline-block;
}
#special div.item.flex img {
	width: 100%;
}
#special a[target="_blank"]:after {
	right: 0.25vw !important;
	top: 0.25vw !important;
	translate: 0 0 !important;
	text-shadow: 0 0 3px #000a !important;
}

/*============================================================================
 product | benefits */
#benefits .grid {
	display: grid;
	grid-template-columns: 34% 66%;
	gap: 0.5vw;
}
#benefits .grid > div img {
	width: 100%;
}

#benefits h4 {
	text-indent: -0.6em;
    padding-left: 0.6em;
}
#benefits h4:not(:nth-of-type(1)) {
	margin-top: 1.5em;
}
#benefits h4 small {
	display: block;
}
#benefits .grid p {
	font-size: 75%;
	padding: 0 0.6em;
}


#benefits .unit .container {
	margin-top: 5vh;
 }
#product table {
	border-spacing: 0;
	border-top: 1px solid var(--color-t1-50);
	border-right: 1px solid var(--color-t1-50);
	background: #0003;
}
#product table th,
#product table td {
	border-left: 1px solid var(--color-t1-50);
	border-bottom: 1px solid var(--color-t1-50);
	padding: 0.75rem 1.5rem;
}

table.prdInfo th div {
	position: relative;
	text-align: left;
/*	text-align-last: justify;       /* Chrome・Firefox用 */
/*	text-justify: inter-ideograph;  /* IE・Edge用 */
	box-sizing: border-box;
	line-height: 1;
	font-size: 1.5rem;
}
#product table td ,
#product table td div ,
#product table td span {
	font-size: 1.5rem;
	text-align: center;
}
#product table td.ns2	{ background-color: rgb(230,0,18); color: #fff; }
#product table td.ps5	{ background-color: rgb(2, 57, 193); color: #fff; }
#product table td.steam	{ background-color: #75b022; color: #fff; }

/*table.prdInfo th div:after ,*/
dt:after {
	position: absolute;
	right: 0;
	top: 5%;
	bottom: 5%;
	display: block;
	content: "";
	width: 1px;
	border-left: 1px solid var(--color-t1);
	border-right: 1px solid var(--color-t1);
/*	background-color: var(--color-t1);*/
}
#information table.prdInfo td {
	padding: 1vh 0;
	line-height: 1.2;
}

#product td div { position: relative; }
#product .cero	{ position: absolute; right: 0; bottom: 0; height: 6vmin; }

#product sup {
	font-size: 60%;
}

#prdType {
	display: flex;
	margin-top: 3vmin;
}
#prdType div {
	text-align: center;
	width: 33.33%;
	font-size: 1.2vmin;
}
#prdType div {
	margin: 0;
	padding: 0 1vmin;
}
#prdType div.vis a {
	width: 100%;
	margin: 0;
}

#prdType h3 {
	font-size: min(1.4vw, 20px);
	border-bottom: 1px solid var(--color-t1);
	padding-bottom: 8px;
	margin-bottom: 0.3vmin;
	width: 100%;
}
#prdType .price {
	margin-bottom: 2vmin;
}

#product strong {
	font-size: 125%;
}
#prdType strong {
	margin: 0 auto;
	line-height: 1;
}

#product small ,
#benefits small {
	font-size: 70%;
	margin: 0 0.2rem;
}
#product .price td small {
	display: block;
	line-height: 1;
	margin-bottom: 0.5rem;
}
#product .price th small {
	line-height: 2;
}
#prdType h3 small {
	display: block;
	margin: 0.5vmin auto 0;
	font-family: initial;
}
#benefits .flex small {
	font-size: 85%;
}

#prdType img {
	display: block;
	margin: 0 auto;
}

#prdType p.attention {
	margin: 2vmin auto 0;
	padding: 1vmin 0;
	box-sizing: border-box;

	background: #0003;
	border: 1px solid #fff8;
	font-size: inherit;
}
#prdType div.vis p.attention {
	width: 100%;
}


.shoppriv ,
.ns2WL ,
.ps5WL 		{ grid-row: 1 / 3; }
.steamWL	{ grid-row: 1 / 2; }
.steamItem	{ grid-row: 2 / 3; }

.shoppriv {
	position: relative;
	width: 20vmin;
	height: 100%;
	padding: 2vmin 0 0;
	box-sizing: border-box;
	border: 1px solid #fff8;

    display: block;
    border-radius: 2px;

	text-transform: unset;
	text-align: center;
	text-decoration: none;
	font-size: inherit;
	background-color: #aaa;
	background: -webkit-linear-gradient(top, #0000 5%, #0005 95%), #aaa;
    background: linear-gradient(to bottom, #0000 5%, #0005 95%), #aaa;
    background: linear-gradient(to right, #0000 5%, #0005 95%), #aaa;
	color: #fffc;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.shoppriv strong {
	position: absolute;
	left: 0;
	top: 2.5vmin;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 140%;
	color: #fff;
	text-shadow: none;
}
.shoppriv:after {
	display: block;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f0d7";
	position: absolute;
	left: 50%;
	top: 55%;
	translate: -50% -50%;
	font-size: 200%;
	color: #fff;
	text-shadow: none;
}

.ns2WL ,
.ps5WL ,
.steamWL {
	position: relative;
	margin: 0;
	border: 1px solid #fff8;
	box-sizing: border-box;
	cursor: pointer;
	font-size: inherit;

    display: block;
    border-radius: 2px;
    text-transform: unset;
}
.ns2WL {
	height: 13.5vmin;
    background: rgb(230,0,18);
}
.ns2WL img {
	position: relative !important;
	display: block;
	height: 75%;
	margin: 0 auto;
}
.ps5WL {
	height: 13.5vmin;
    background: #224fb0;
    background: -webkit-linear-gradient(top, #4269bd 5%, #224fb0 95%);
    background: linear-gradient(to bottom, #4269bd 5%, #224fb0 95%);
    background: linear-gradient(to right, #4269bd 5%, #224fb0 95%);
}
.steamWL {
	height: 8.5vmin;
    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%);
}

.ps5WL:before ,
.steamWL:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	display: block;
	background-size: contain;
	width: 60%;
	height: 70%;
}
.ps5WL:before {
	left: 48%;
	background: url('../images/common/logo_ps5.svg') center center no-repeat;
}
.steamWL:before {
	background: url('../images/common/logo_steam_w.svg') center center no-repeat;
}
.shoppriv span ,
.ns2WL span ,
.ps5WL span ,
.steamWL input[type="submit"] {
	position: absolute;
	left: 0;
	top: 9.7vmin;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: transparent;
	border: none;
	font-size: inherit;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	text-decoration: none;
    text-align: center;
	cursor: pointer;
}
.ns2WL span {
	color: #fffe;
}
.ps5WL span {
	color: #a9caef;
}
.steamWL input[type="submit"] {
    top: unset;
    color: #d2efa9;
    bottom: -2vmin;
}

a.steamItem {
	position: relative;
	display: block;
	margin: 0;
	padding: 0.8vmin 0;

	box-sizing: border-box;
	background: #000c;
	border: 1px solid #fff8;
	border-radius: 2px;

	font-size: inherit;
	text-align: center;
	text-decoration: none;
	color: #fff;
}

#reserve {
	font-size: 0.75vw;
}

#reserve .shoppriv ,
#reserve .ps5WL ,
#reserve .steamWL ,
#reserve a.steamItem ,
#reserve a.mns {
	display: block;
	width: 100%;
}
#reserve a.mns {
	font-size: inherit;
	text-decoration: none;
	text-align: center;
	color: #333;
}
#reserve a.mns img {
	position: relative;
	width: 100%;
	height: auto;
	margin-top: 0;
}



#prdType div > img ,
#prdType p.attention ,
#prdType .steamWL ,
#prdType .steamItem {
	width: 20vmin;
}


#benefits .flex {
	display: flex;
	flex-wrap: wrap;
}
#benefits .flex > div {
	position: relative;
	margin: 0 0.5vmin 1vmin;
	text-align: center;
	background: #0007;
	box-shadow: 0 0 10px -3px #fff;
	width: calc(25% - 1vmin);
	font-size: 1.2vmin;
}
#benefits .flex div:has(> div.split) {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: calc(40% - 1vmin);
}

#benefits .flex div > * {
	position: relative;
	display: block;
	width: 100%;
	font-size: inherit;
}
#benefits .flex div > div.split {
	width: calc(50% - 0.5vmin);
}

#benefits .flex h4 {
	border: none;
	margin: 0;
	height: 3.2vmin;
	align-content: center;
}

#benefits .flex h4 a {
	display: block;
	color: #fff;
	text-decoration: none;
	line-height: 1;
	font-size: inherit;
}

#benefits .flex a[data-lightbox="shopPriv"] ,
#benefits .flex span[data-lightbox="shopPriv"] {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}
#benefits .flex a[data-lightbox="shopPriv"]:after ,
#benefits .flex span[data-lightbox="shopPriv"]:after {
	position: relative;
	display: block;
	content: "";
	height: 0;
	width: 100%;
	padding-top: 100%;
}
#benefits .flex img {
	position: absolute;
	left: 50%;
	top: 0%;
	translate: -50% 0%;
	width: 100%;
}
#benefits .flex img.square {
	top: 50%;
	translate: -50% -50%;
}
#benefits .flex img.landscape {
	height: 100%;
	width: auto;
}

#benefits .flex p {
	height: 4.5vmin;
	align-content: center;
}

#benefits .flex a.reserve {
	background-color: #aaa;
	background: -webkit-linear-gradient(top, #0000 5%, #0005 95%), #aaa;
    background: linear-gradient(to bottom, #0000 5%, #0005 95%), #aaa;
    background: linear-gradient(to right, #0000 5%, #0005 95%), #aaa;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	text-decoration: none;
}
#benefits .flex a.reserve ,
#benefits .flex span {
	height: 3.5vmin;
	align-content: center;
}
#benefits .flex span {
	background: #333;
}

#benefits .flex a.reserve.premium {
	background-color: #ffe134;
    background: -webkit-linear-gradient(top, #0000 5%, #0005 95%), #ffe134;
    background: linear-gradient(to bottom, #0000 5%, #0005 95%), #ffe134;
    background: linear-gradient(to right, #0000 5%, #0005 95%), #ffe134;
	color: #000;
	text-shadow: none;
}
#benefits .flex a.reserve.normal {
	background-color: #2e8ec5;
	background: -webkit-linear-gradient(top, #0000 5%, #0005 95%), #2e8ec5;
    background: linear-gradient(to bottom, #0000 5%, #0005 95%), #2e8ec5;
    background: linear-gradient(to right, #0000 5%, #0005 95%), #2e8ec5;
}

#benefits .flex a.reserve:before ,
#benefits .flex a.reserve:after {
	top: 50%;
	translate: 0 -50%;
	color: inherit;
}
#benefits .flex a.reserve:before {
	display: block;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: '\f07a';
	position: absolute;
	left: 0.5em;
}
#benefits .flex a.reserve:after {
	right: 0.5em;
}




/*============================================================================
 footer */

footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4vmin;
	font-size: 1.3vmin;
	text-align: center;

}

footer * {
	text-align: center;
}


#footer .logo_utashiro {
	position: absolute;
	top: 25%;
	left: 50%;
	translate: -50% -50%;
	width: 60vmin;
}


#footer .logo_switch2	{ height: 6.5vmin; }
#footer .logo_ps5		{ height: 4.5vmin; }
#footer .logo_steam		{ height: 6vmin; }
#footer .cero			{ height: 6vmin; }
#footer .criware		{ height: 6vmin; }


footer .brand {
	margin: 7vmin;
}
footer .brand img {
	margin: 0 3vmin;
	vertical-align: middle;
}

footer .legalAttr {
	margin: 7vmin;
}
footer .legalAttr p {
	font-size: 80%;
}

footer #aquaplus {
	margin: 0 auto;
}
footer #aquaplus img {
	width: 25vmin;
}



/*============================================================================
 PRESS KIT */

 section#presskit .logo_utashiro {
	display: block;
	margin: 0 auto 5vh;
	width: 25vmin;
 }

section#presskit > nav.langNav {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0px;
}

section#presskit {
	overflow: initial;
	height: auto;
}


section#presskit h2 ,
section#presskit:before {
	position: fixed;
}

section#presskit .unit {
	margin-top: 6vh;
}
section#presskit h4 {
	margin-bottom: 3vh;
	margin-right: 0;
}

section#presskit > .container {
	position: relative;
	top: 0;
	translate: -50% 0%;
	background: #0005;
	padding: 3rem 4rem;
	box-sizing: border-box;
}

section#presskit .unit p {
	margin-bottom: 1rem;
}

section#presskit .unit > ol ,
section#presskit td > ul ,
section#presskit .unit > ul {
	padding-left: 1.5rem;
}
section#presskit .unit li {
	margin: 0.75rem 0;
}

section#presskit .unit a {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

section#presskit footer {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	margin-top: 15vh;
}

section#presskit a.pkDownload {
	margin-top: 1rem;
	padding: 1rem 3rem;
	border: 1px solid #fffc;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	background: -webkit-linear-gradient(top, #0000 5%, #0005 95%), #ecb245;
    background: linear-gradient(to bottom, #0000 5%, #0005 95%), #ecb245;
    background: linear-gradient(to right, #0000 5%, #0005 95%), #ecb245;
}
section#presskit a.pkDownload small {
	font-size: 80%;
	padding: 0 0.5rem;
}

th.tVtop {
	vertical-align: top;
    padding-top: 1em;
}


/*============================================================================
 LOADING */
 #loading {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#loading:before {
	content: "";
	display: block;
	position: absolute;
	background-color: var(--color-t1);
	top: 0;
	width: 100%;
	height: 3px;
	animation: progress-bar 3s linear infinite;
}
@keyframes progress-bar {
	0% {
		left: 0%;
		width: 0%;
	}
	50% {
		left: 0%;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0%;
	}

}

#loading:after {
	content: "Now Loading";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	display: block;
	transform: translate(0%,-50%);
	color: var(--color-t1);
	text-align: center;
	animation: 1.3s ease-out .5s infinite heartbeat;
}
body[data-status="loading"] #loading {
	display: block;
	z-index: 100;
}



/*============================================================================
 hover(PC) */
 @media (hover: hover) {
	a[href^="images/"] img {
		transition: scale 0.6s;
	}
	a[href^="images/"]:hover img {
		transition: scale 0.6s;
		scale: 1.1;
	}
	a:not([href^="images/"]):hover {
		opacity: 0.7;
		cursor: pointer;
	}

	nav#globalNav label:hover {
		opacity: 0.7;
	}

	body nav#globalNav ul:hover a span {
		width: var(--gn-width) !important;
		opacity: 1 !important;
		padding-left: 2vmin !important;
	}
	body nav#globalNav ul:hover a.new:before {
		opacity: 1 !important;
	}

	.slider .prev:hover ,
	.slider:has(.prev:hover) .next ,
	.slider .next:hover ,
	.slider:has(.next:hover) .prev {
		animation: none;
	}
	.slider .prev:hover ,
	.slider .next:hover  {
		scale: 1.25;
		opacity: 0.7;
	}
	.slider .pointer li:hover {
		opacity: 0.6;
	}

	ul.dsNav li:hover {
		opacity: 0.7;
	}

	div[data-current=""] .pointer li:nth-child(1):hover:after ,
	div[data-current="1"] .pointer li:nth-child(1):hover:after ,
	div[data-current="2"] .pointer li:nth-child(2):hover:after ,
	div[data-current="3"] .pointer li:nth-child(3):hover:after ,
	div[data-current="4"] .pointer li:nth-child(4):hover:after ,
	div[data-current="5"] .pointer li:nth-child(5):hover:after ,
	div[data-current="6"] .pointer li:nth-child(6):hover:after ,
	div[data-current="7"] .pointer li:nth-child(7):hover:after ,
	div[data-current="8"] .pointer li:nth-child(8):hover:after ,
	div[data-current="9"] .pointer li:nth-child(9):hover:after 
	{
		opacity: 1;
	}

	#character .slider .pointer li:hover:after {
		scale: 1.1;
	}

	.cv div .voice:hover:before {
		scale: 1.1;
		opacity: 0.7;
	}


	.steamWL:hover {
		color: #fff;
		background: #6aa621;
		background: -webkit-linear-gradient(top, #8ed629 5%, #6aa621 95%);
		background: linear-gradient(to bottom, #8ed629 5%, #6aa621 95%);
		background: linear-gradient(to right, #8ed629 5%, #6aa621 95%);
	}

}



/*============================================================================
 mobile */
@media screen and (orientation: portrait) {

	section > h2 {
		margin: 0.5vh 2vh 0;
		height: 9vh;
		width: calc(100% - 4vh);
	}
	section > h2:before ,
	section > h2:after {
		height: auto;
		width: 100%;
	}
	section > h2:before {
		border-right: none;
		border-bottom: 1px solid var(--color-t1);
		top: auto;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	h2 svg text ,
	svg#h2 text {
		font-size: 5vh;
		writing-mode: horizontal-tb;
		transform: translateY(6vh);
		translate: 0 100%;
	}

	/*table scroll*/
	.mobile_table_scroll {
		position: relative;
		overflow-x: auto;
	}
	.mobile_table_scroll table {
		width: auto;
		min-width: 120vw;
		border-collapse: collapse;
		white-space: nowrap;
		margin-bottom: 5px;
	}

	#product table td ,
	#product table td div ,
	#product table td span {
		font-size: 1rem;
	}
	.mobile_table_scroll_guide {
		margin-top: 5px;
	}
	.mobile_table_scroll_guide:before {
		display: block;
		font-family: "Font Awesome 5 Free";
		font-weight: 600;
		content: "\f337\a0\30B9\30AF\30ED\30FC\30EB\53EF\80FD";
		padding: 0.5vw 0;
		text-align: center;
		font-size: 80%;
		background: var(--color-t1);
		color: #000;
	}
	/*tableにスクロールバーを追加*/
	.mobile_table_scroll::-webkit-scrollbar {
		height: 5px;
	}
	.mobile_table_scroll::-webkit-scrollbar-track {
		background: #fff4;
		border-radius: 5px;
		margin: 0;
	}
	.mobile_table_scroll::-webkit-scrollbar-thumb {
		background:  var(--color-t1);
		border-radius: 5px;
	}

	/*common*/
	* { font-size: min(2.5vw, 16px); }

	.forMobile { display: inline; }

	.forPC {
		display: none;
	}

	*:not(.sns) > a:not(#aquaplus)[target="_blank"]:after {
		font-size: 1.6vmin;
		right: 1.5vw;
	}
	h3 {
		font-size: 3vw;
	}

	#media a ,
	#information a ,
	#presskit  .unit a {
		padding-right: 5vw;
	}

	section > .container {
		width: 87vw;
		left: 0;
		translate: 5vw -50%;
	}


	/*home*/
	body #home #keyvis2 { width: 300%; transform: translateX(-59%); }

	#catch ,
	#home .logo_utashiro ,
	#release ,
	#price ,
	#home .steamWidget ,
	#reserve ,
	#home .link {
		top: auto;
		bottom: 0;
		right: 50%;
		translate: 50% 0%;
	}
	#catch				{ width: 35vh; transform: translateY(10vh); top: 0; bottom: auto;}
	#home .logo_utashiro	{ width: 37vh; transform: translateY(-36.5vh); }
	#release			{ width: 30vh; transform: translateY(-26.5vh); font-size: 1.5vh;}
	#price				{ width: 35vh; transform: translateY(-16.5vh); }
	#home .steamWidget	{ width: 95vw; transform: translateY(-6vh); }
	#reserve			{ width: 95vw; transform: translateY(-5.5vh); align-items: center; height: 9vh; font-size: 0.9vh; }
	/*#reserve .shoppriv, #reserve .steamWL, #reserve a.steamItem
	{ width: 30vmin; }*/
	#home .link			{ width: 93vw; margin: 0; }


	.shoppriv strong {
		font-size: 150%;
		top: 2vh;
	}
	.shoppriv span {
		bottom: 1.5vh;
	}
	#reserve .steamWL {
		height: 5vh;
	}
	/*.steamWL input[type="submit"] {
		padding-top: 2.25vh;
	}*/

	#reserve .steamItem {
		height: 3.5vh;
		padding: 1vh 0 0;
	}
	a.download.mns img {
	height: calc(5vw + 1.6vmin);
}

	#home .sns {
		top: 4.5vh;
	}

	/*footer*/
	footer .legalAttr p { display: block; }

	.sns a {
		margin-left: 4vmin;
	}
	i.fa-svg {
		font-size: 2.4vh;
	}


	/*nav*/
	nav#globalNav:has(#gnToggle:checked) {
		background: #0009;
	}
	nav#globalNav label {
		display: inline-block;
	}



	body nav#globalNav #gnToggle:checked ~ ul a span {
		opacity: 1 !important;
		width: var(--gn-width-mobile) !important;
		padding-left: 2vmin;
	}

	body nav#globalNav #gnToggle:not(:checked) ~ ul a.new:before {
		opacity: 0 !important;
	}

	body nav#globalNav #gnToggle:checked ~ ul a.new:before {
		opacity: 1 !important;
	}

	nav#globalNav ul a {
		padding: 0.75vmin 6.5vmin 0.75vmin 0;
	}
	nav#globalNav ul a:after {
		right: 3.5vmin;
	}

	nav#globalNav ul a span  {
		text-align: right;
		font-size: 4vw;
		height: 6vw;
		width: 0; opacity: 0; padding-left: 0;
	}

	nav.langNav {
		font-size: 9px;
	}



	/*slider*/
	.slider .pointer {
		width: 100%;
	}
	.slider .prev { left: -3vw;}
	.slider .next { right: -3vw;}
	.slider .prev ,
	.slider .next {
		width: 2vw;
		height: 4vw;
	}
	.slider .pointer ul {
		flex-wrap: wrap;
	}
	
	.slider.pointerThumb .pointer li {
		width: 10vw;
		height: 10vw;
		margin: 1.5vw;
	}

	.slider.pointerThumb.pointerLandscape .pointer li {
		width: 15vw !important;
		margin: 1vw;
	}
	.slider.pointerThumb.pointerLandscape .pointer li ,
	.slider.pointerThumb.pointerLandscape .pointer li:after {
		height: calc(15vw * 0.5625) !important;
	}



	/*story*/
	body #story p {
		font-size: 120%;
		line-height: 1.75;
	}

	/*system*/
	#system .vis a {
		width: 45%;
	}
	#system div[data-unit="2"] .vis a {
		width: 45%;
	}
	/*#system .container p {
		text-align: left;
	}*/
	
	/*character*/
	/*#character .slider > .unit[data-unit="4"]:before ,
	#character .slider > .unit[data-unit="5"]:before {
		background-position: 70% 0;
	}*/
	
	#character h3 {
		font-size: min(12vmin, 70px);
		margin-top: 13vh;
		margin-bottom: 7vmin;
	}
	.cv {
		flex-direction: column;
	}
	.cv div {
		font-size: min(4vmin, 25px);
		height: 6.5vmin;
		line-height: 6.5vmin;
		padding: 0 3vmin 0 7vmin;
	}

	.cv div .voice {
		margin-left: 1.5vmin;
		width: 6.5vmin;
		height: 6.5vmin;
	}
	.cv div .voice:first-child {
		margin-left: 3vmin;
	}
	.cv div .voice:after {
		line-height: 6.5vmin;
		font-size: 70%;
	}


	body #character div .unit img.fullbody {
		translate: calc(-50% + 18vmin) calc(-50% - 15vmin);
	}
	#character .unit[data-unit="1"] .detail ,
	#character .unit[data-unit="2"] .detail {
		width: 57%;
	}
	#character .vis {
		width: 100%;
		align-items:flex-start;
		flex-direction: column;
	}
	/*#character .vis:has(> :nth-child(4)) {
		flex-direction: row;
	}*/
	#character .vis a {
		width: 40%
	}


	/*product*/
	#prdType div {
		font-size: 1.8vmin;
	}
	#prdType h3 {
		font-size: min(2.4vw, 20px);
	}
	#prdType img ,
	#prdType p.attention ,
	#prdType .steamWL ,
	#prdType .steamItem {
		width: 25vmin;
	}
	#prdType div.vis img {
		width: 100%;
	}
	#prdType .steamWL {
		height: 11vmin;
	}

	#prdType .steamItem {
		height: 7vmin;
		padding: 2vmin 0 0;
	}

	#product .vis {
		height: 70vh;
	}
	#product .vis a {
		width: 35vmin;
	}

	#product .contents p {
		font-size: 2.2vmin;
	}

	table.prdInfo th {
		width: 24vw;
	}


	ul.dsNav li {
		margin: 2vmin 0;
		padding: 2vmin 6vmin 2vmin 3vmin;
		background: #ffd900;
		color: #000;
		border-radius: 4vmin;
	}
	ul.dsNav li:after {
		right: 2.7vmin;
	}


	#product .flex > div {
		width: calc(33% - 1vmin);
		font-size: 1.9vmin;
	}
	#product .flex div:has(div.split) {
		width: calc(66% - 1vmin);
	}

	#product .flex h4 {
		height: 4vmin;
	}

	#product .flex a[data-lightbox="shopPriv"]:after ,
	#product .flex span[data-lightbox="shopPriv"]:after {
		padding-top: 66%;
	}
	#product .flex img:not(.landscape,.square) {
		translate: -50% -10%;
	}
	#product .flex p {
		height: 6.5vmin;
	}
	#product .flex a.reserve ,
	#product .flex span {
		height: 4vmin;
	}
	#benefits .unit > .container {
		margin-top: 15vh;
	}

	#information div.item.flex {
		display: block;
	}

	#information div.fig {
		max-width: 100%;
	}

	#information div.detail * {
		font-size: 2.5vw;
	}
	#information .dlc2chr img {
		width: 20vw;
	}
	#information div.item {
		display: block;
		width: 75%;
		margin: 0 auto;
	}
	dt {
		width: 15vw;
	}
	ol {
		padding-left: 3vw;
	}

	#special div.item.flex p {
	   width: 25%;
	}


	@media (hover: hover) {
		body nav#globalNav ul:hover a span {
			width: var(--gn-width-mobile) !important;
		}
	}
}