html{
font-family:serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body{margin:0;padding:0;
color:#000000;background-color:#ffffff}
.table{margin:0;padding:0;}
.header{
position:fixed;
left:0;
top:0;
margin:0;padding:0px;
z-index:500;
width:100%;
height:72px;
text-align:center;
background:rgba(255,255,255,.0);
opacity:1
}
.footer{
position:fixed;
bottom:-4px;
right:0;
width:100%;
height:28px;
padding:8px 68px 0px;
z-index:490;
text-align:right;
vertical-align:text-bottom;
background:url(footback.png) repeat-x bottom center;
}
.seal{
position:fixed;
bottom:0;right:0;
height:64px;
z-index:500;
text-align:right;
background:rgba(0,0,0,.0);
}
.main{
margin:0;padding:0;
font-size:1.5rem;
width:100%;
height:100%;
z-index:0;
}
.col1{ color : #e93b72;}
.col2{ color : #116a62;}
.r2{ color : #ff5b92;}
.pix{
	-ms-interpolation-mode: nearest-neighbor;   /* IE */
	image-rendering: -webkit-crisp-edges;       /* Safari */
	image-rendering: -moz-crisp-edges;          /* Firefox */
	image-rendering: pixelated;
}
.invisible{ display:none;}

.btdiv{
display:flex;
font-family:sans-serif;
font-size:1.1rem;
margin:0;
padding:0;
width:100%;
border:0px;
background-color:rgba(0,0,0,.0);
text-align:center;
}
.hd1{
top:0;
margin:16px 0px;
padding:0;
font-family:serif;
color:#116a62;
font-size:3rem;
z-index:100;
text-align:left;
text-shadow:2px 2px 2px #fff,-2px -2px 2px #fff;
}
.hd2{
 font-family:sans-serif;
 color:#000;
 font-size:1.5rem;
 margin:0;padding:1rem 136px 0.5rem 32px;
 z-index:220;
 background:
 url(hback_L.png) no-repeat center left,
 url(hback_R.png) no-repeat center right;
 text-shadow:2px 0px 2px #fff,-2px 0px 2px #fff;
}
.td1{
position:relative;bottom:1px;
width:100%;
height:56px;
margin:0;padding:0;
}
.td1:link{text-decoration:none;}
.td1:hover{
text-decoration:none;
font-weight:normal;
}

.btli{position:relative;top:-24px;color:#ffffff;width:16.6%;height:80px;margin:0;padding:0.3% 0.2%;background-color:#000000;transition:0.3s;}
.bt1{font-family:Arial sans-serif;font-size:1.4rem;text-align:center;vertical-align:bottom;
color:#ffffff;border-bottom:1px solid #ffffff}
.bt2{font-size:0.7rem;text-align:right;vertical-align:top;color:#ffffff}
.btli:hover{position:relative;top:0px;transition:0.3s;}
.bton{top:-13px;color:#000000;background-color:rgba(255,255,255,.6);}
.bton1{color:#000000;border-bottom:1px solid #000}
.bton2{color:#000000}
.btli ul{
 position:relative;
 max-height:0px;
 overflow:hidden;
 text-align:left;
 top:-17px;
 margin:0px 0px;
 padding:0px;
 background-color:rgba(64,64,64,.7);;
 transition:0.4s;
}
.btli ul li{
 list-style:none;
 width:100%;
 margin:0px;
 padding:2px 16px;
 color:#ffffff;
 text-decoration:none;
 font-size:0.5rem;
}
.btli ul a{
 width:100%;
 margin:0px;
 padding:0px;
 color:#fff !important;
 text-decoration:none !important;
 transition:0.4s;
}
.btli ul li:hover{
 background-color:rgba(255,48,0,.6);
 color:#ff8;
}
.btli:hover ul{
 max-height:200px;
 top:-2px;
}

.slider{position:relative;width:100%;height:520px;text-align:left;border:0px dotted #000;margin:0;padding:0;overflow:hidden;
}
.slider svg{position:absolute;z-index:200}
.slider #toleft{left:-100px;top:0}
.slider #toright{right:-100px;top:0}
.slider #toleft:hover{cursor:pointer}
.slider #toright:hover{cursor:pointer}
.slider .slide{
display:flex;
width:100%;
height:288px;
position:relative;
left:150px;
top:128px;
 transition:0.3s ease-out;
}
.slider .slide img{
 padding:0 15px;
 text-align:center;
 vertical-align:middle;
 transition:0.3s ease-out;
}
.flavor{
 font-size:0.8em;
 font-family:serif;
 position:absolute;
 z-index:220;left:0;bottom:0;
 margin:0;padding:2px 145px;
 background:rgba(255,255,255,.6);
}
.zoom{
 transform:scale(2.0, 2.0) translate(0%,0%);
 margin:0 150px;
 padding:0;
 z-index:240;
}
br.atL{display:none;}
div.sphere{display:none;}
/* modal -----------------------------------------------------------*/
.modal-wrapper{
	width:100%; height:100%;
	position:fixed;
	top:0;left:0;
	background: rgba(0,0,0,0.5);
	pointer-events:none;
	opacity:0;
	z-index:900;
	transition:0.2s ease-out;
}
.modal-wrapper.show{
	opacity:1; pointer-events:all;
}
.modal-image{
	position:absolute;
	max-width:80%;
	max-height:80%;
	top:50%; left:50%;
	z-index:1000;
	transform:translate(-50%,-50%);
	object-fit:cover;
	opacity:0;
	transition:0.4s ease-out;
}
.modal-image.show{
	opacity:1;
	transform:scale(2.0, 2.0) translate(-25%,-25%);
	transition:0.4s ease-out;
}
/* play -----------------------------------------------------------*/
.borderon td{
	border:1px solid rgba(16,16,16,.3);
}
#controller{
	position:relative;
	left:0px;top:0px;
	width:700px;
	height:300px;
}
#controller .contimg{
	position:absolute;
	left:140px;
	top:80px;
	z-index:50;
}
#line_bt01{
	position:absolute;
	z-index:100;
}
#controller .text{
	font-family:sans-serif;
	font-size:16px;
	position:absolute;
	z-index:150;
}
/* system --------------------------------------------------------------*/
.display {
	position:relative;
	left:0px;top:0px;
	max-width:1200px;
	height:480px;
}
.display .contimg{
	position:absolute;
	left:0px;
	top:0px;
	z-index:50;
}
.display .lines{
	position:absolute;
	z-index:100;
}
.display .text{
	font-family:sans-serif;
	font-size:16px;
	position:absolute;
	z-index:150;
}
/* character -----------------------------------------------------------*/
.walks{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	width:92%;
	min-height:100px;
	margin:0;
	padding:0 1% 0 4%;
	z-index:120;
}
.walks div{
 margin:0;
 padding:0;
}
.walk{
position:relative;
	width:48px;
	height:64px;
	margin:4px;
	border:2px solid rgba(32,32,32,.4);
	background:rgba(0,0,0,.1);
	transition: 0.2s;
}
.walk:hover{cursor:pointer;}
.down{margin:20px 4px 4px;
}
.x3{
width:144px;
}
.char{
 position:relative;
 top:48px;left:0px;
 margin:0 10px 0 26px;
 z-index:100;
 transform:scale(2.0, 2.0) translate(25%,0%);
 transition:0.3s ease-out;
}
.h{top:0px;}
.slibar{
 position:absolute;
 top:256px;right:10px;
 margin:0;padding:0;
 font-family:sans-serif;
 font-size:0.6em;
 z-index:300;
}
.backsheet{
position:fixed;
width:100%;
height:100%;
z-index:-10;
background:#fff url(../img/line_0.png) no-repeat top right;
}
.backcover{
position:fixed;
width:100%;
height:100%;
z-index:-5;
background:url(meshback.png) repeat fixed;
}
.charabox{
 position:relative;
 width:100%;
 height:35em;
 overflow:hidden;
 transition:0.2s ease-out;
}
#port1{
 position:absolute;
 width:100%;
 height:200%;
 overflow:hidden;
 z-index:110;
}
#port1 img{
 position:absolute;
 right:10%;
 transition:0.5s ease-out;
}
.charabox .portrait{
 position:absolute;
 top:-1em;right:10%;
 width:50%;
 transition:0.5s ease-out;
}
.name{
 position:relative;
 font-family:serif;
 font-style:italic;
 color:#000;
 margin:0;padding:1rem 140px 0.5rem 40px;
 z-index:100;
 background:
 url(nameback_L.png) no-repeat center left,
 url(nameback_R.png) no-repeat center right,
 rgba(255,255,255,.4);
 text-shadow:5px 5px 1px rgba(0,0,0,.3);
 transition:0.2s ease-out;
}
.name .mainname{
 font-size:2.0em;
}
.name .subname{
 font-size:0.8em;
}
.text0{
 position:relative;
 margin:0 5px;
 padding:0 5px;
 font-size:1em;
}
.text1{
 position:relative;
 width:90%;
 top:-5.5em;
 font-size:0.8em;
 margin:1em 0.8em;
 padding:5.5em 0.8em 1em;
 border-left:1px solid #000;
 background-color:rgba(255,255,255,.5);
 transition:0.6s ease-out;
}
.text2{
 position:relative;
 width:95%;
 top:-3em;
 font-family:sans-serif;
 font-size:0.7em;
 margin:0 0.8em -1.5em;
 padding:3.2em 0.8em 0.5em;
 border-left:1px solid #000;
 z-index:0;
}
.text3{
 position:relative;
 width:95%;
 top:-3em;
 font-family:serif;
 font-size:0.8em;
 margin:0 0.8em -1.5em;
 padding:3.2em 0.8em 0.5em;
 border-left:1px solid #000;
}
.hd3{
 font-size: 1.3em;
 margin:0.7em 0.5em 0.2em -0.2em;
 padding:0.7em 0.5em 0.2em;
 border-left:1px solid #000;
 font-family:sans-serif;
}
/* status simulator -------------------------------------------------*/
#sphere{
	position: absolute;
	right:0px;top:200px;
	background-color: rgba(0,0,0,.4);
}
.st-input{
 position:absolute;
 width:6em;height:6em;
 top:70%;left:60%;
 z-index: 100;
}
.lv{
 font-size:1em;
 width:2.5em;height:1em;
 padding:0px 3px;
 text-align:right;
}
.st-output td{
	text-align:right;
	font-size:0.7em;
}
.st-output .st_ind{
	font-size:1.2em;
}
#def,#swd,#rmt,#mag,#mvtp,#mmtp{
	font-size:1.2em;
	font-weight: bold;
}
.el{
 width:3.5em;
 font-family:sans-serif;
}
select{
	width:128px;
}
.sph-i{
 position:absolute;
 left:0px;top:0px;
 transform:scale(3.0, 3.0) translate(50%,50%);
}
.abi{
	width: 600px;
	border:1px solid #000;
}
.th1{
	margin: 0px;
	background-color: rgba(0,0,0,0.1);
}
#abiSp,#abiEq{
	vertical-align: top;	
}
.dis{ opacity: 0.4;}
.serif{font-family:serif}
/* faq --------------------------------------------------------------*/
select.faqlist{
 width:80%;
}
.map{
 line-height:70%;
}
/* footer -----------------------------------------------------------*/
.blank{
margin:0;padding:0;width:0;height:0;
font-size:0px;
}
.foottitle::after{ content:"ver1.03b"}
.footspe::before { content:"2021-2023"}
/* スマホ向け -----------------------------------------------------------*/
@media screen and (max-width: 780px){
	.footer{background-image:url(footbackL.png);}
	.btli{top:-12px;height:56px;}
	.btli:hover{padding-top:12px;}
	.bton{top:0px;}
	.bt1{font-size:0.7rem;}
	.btli ul li{padding:2px 3px;font-size:0.4rem;}
	.slider{height:360px;}
	.flavor{padding:2px 48px;}
	.zoom{margin:0;transform:scale(1.0, 1.0) translate(0%,0%);}
	br.atL{display:block;}
	div.sphere{display:block;height:660px;}
	.slider svg{transform:scale(0.5, 0.5) translate(0%,-35%);}
	.slider .slide{left:50px;top:48px;}
	.footer{height:56px;}
	#controller{left:0px;transform:scale(0.5, 0.5) translate(-50%,-25%);}
	.display {width:200%;min-height:256px;transform:scale(0.5, 0.5) translate(-50%,-25%);}
	.display .text{font-size:24px;}
	.ss{width:320px;height:240px;}
	#sphere{transform:scale(0.5, 0.5) translate(50%,-50%);}
}