html {
	height:100vh;
}
body {
	height:100vh;
	margin:0;
	background-color: #f4f4f4;
}
#head{
	width:100%;
	height:3rem;
}
#tail{
		position: fixed;
		left:0;
		bottom:0;
		width:100vw;
		height:3rem;
		/* display:none; */
		z-index: 9;
		background-color: gray;
		color:white;
		font-size: 0.8rem;
		line-height: 3rem;
		text-align: center;
		font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#bottomspace{
	width:100%;
	height:6rem;
}
#nav{
	position: fixed;
	width:100%;
	height:3rem;
	left:0;
	top:0;
	z-index:10;
	background-color:gray;
	display:flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	align-content:center;

	font-family: sans-serif;
	color:white;
}

#nav > div{
	display:flex;
	height:100%;
	align-items:center;
}

	#logo{
		font-size:2rem;
		line-height: 2.2rem;
		font-weight: 900;
		height:80%;
		margin:0 8px;
	}
	#logo img{
		height:100%;
	}

#page{
	height:calc(100vh - 6rem);
	display:flex;
	position: relative;
	z-index:1;
}
#units{
	width:100%;
	height:calc(100vh - 6rem);
	counter-reset: num;
}

#sidebar{
	background-color:gray;
	overflow: hidden;
	position: fixed;
	right:0;
	top:3rem;
	width:0px;
	height:calc(100vh - 3rem);
	
	transition-property: all;
	transition-duration: 300ms;
	transition-delay: 0s;
	transition-timing-function: ease; 
	color:white;

}
#total{
	width:192px;
	height:40px;
	font-size: 1.5rem;
	line-height: 40px;
	opacity: 0.6;
	margin-right:0.5rem;
}
#total>div{
		display:inline-block;
		font-size:0.8em;
		opacity: 0.6;
	}

#order{
	border-radius: 24px;
	background-color: black;
	width:158px;
	height:40px;
	font-size: 1.4rem;
	line-height: 40px;
	opacity: 0.2;
	margin-right:0.5rem;
	cursor:pointer;
}
div.ja::after{
	content: "次へ進む";
}
div.en::after{
	content: "Next";
	font-size: 1.3rem;
}
div.zh::after{
	content: "下一個";
	font-size: 1.3rem;
}

#cart{
	padding:0.5rem;
	overflow-y: scroll;
	height:calc(100vh - 6rem);
	z-index: 2000;
	display:flex;
	justify-content: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	align-items: flex-start;
}
.cartItem{
	width:120px;
	height:120px;
	display:inline-flex;
	margin:8px 2px;
	/* background-color: #eee; */
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;

	transition-property: all;
	transition-duration: 300ms;
	transition-delay: 0s;
	transition-timing-function: ease; 
	transform-origin: top left;

	position: relative;

	cursor:pointer;
	z-index: 2001;


}
.cartItemClosebox{
	display:none;
	position: absolute;
	left:-8px;
	top:-8px;
	width:28px;
	height:28px;
	background-color: black;
	border-radius: 18px;

	font-family: helvetica,sans-serif;
	font-weight: 900;
	font-size:28px;
	line-height: 28px;
	text-align: center;
	transform: rotate(45deg);
	border:3px solid black;
	box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.4);

	cursor:pointer;
	z-index: 2002;
}
.cartItemClosebox::before{
	content:"╋";			
}

#cart_info{
	width:calc(100% - 2rem);
	padding:1rem;
	height:auto;
	color:white;
	font-size:1rem;
}
#textTrack{
	display:none;
	position: absolute;
	overflow-y: scroll;
	height:calc(100vh - 3rem);
	width:calc(40vw - 6rem);
	margin:0 3rem;
	/* 
	right:3rem;
	top:10rem;
	margin:1rem;
	height:calc(100vh - 26rem);
	width:calc(80%);

	overflow-x: scroll;
	writing-mode: vertical-rl; */
		/* text-combine-upright: all; */
	/* white-space : pre-line; */

}
#sheet{
	display:none;
	position: fixed;
	bottom:12px;
	left:12px;
	margin:auto;
	width:calc(100vw - 24px);
	height:calc(50vh - 24px);
	background-color:rgba(255,255,255,0.8);
}
#mask{
	display:none;
	width:100vw;
	height:100vh;
	position: fixed;
	left:0;
	top:0;
	background-color:rgba(0,0,0,0.5);
	z-index: 10000;
}

#message{
	display:none;
	width:420px;
	height:150px;
	position: fixed;
	left:calc(50% - 210px);
	top:30%;
	background-color: white;
	text-align: center;
	font-family: sans-serif;
	font-weight: 900;
	font-size: 1.7rem;
	line-height: 150px;
	color:gray;
	z-index: 10001;
	border-radius: 24px;
}
.work {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* background-color: lightgray; */
	background-color:#f4f4f4;
	position: relative;

}
.work.s100 {
	width: 100%;
	height: 100%;
	/* box-shadow: 0 0 0 1px rgba(0,0,0,0.05); */
}
.work.s10 {
	width: 10%;
	height: 10%;
}
.work.s20 {
	width: 20%;
	height: 20%;
}
.work.s33 {
	width: 33.3333%;
	height: 33.3333%;
}
.episode{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: lightgray;
	
	position: relative;

	width: 100%;
	height: 100%;
	display:none;

	font-size:2rem;
}
.episode p{
	text-align: left;
	font-size:1.2rem;
	max-width: 800px;
	margin:auto;
	margin-top:3rem;
}
.red{
	background-color: red;
}

.stage {
	width: 90%;
	height: 90%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	text-align: center;
	/* background-color: #eee; */
	position: relative;
}

/* div[id^="xi"]{
	position: absolute;
	left:100px;
	top:100px;
} */
.square {
	width: 100%;
	height: 100%;
	/* background-color: #eee; */
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	position: relative;
}
.xsquare {
	width: 50%;
	height: 50%;
	/* background-color: #eee; */
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	position: relative;
}

.number{
	position: absolute;
	left:0.4rem;
	top:3.4rem;
	display:none;
	width:2.2rem;
	height:2.2rem;
	border-radius: 1.1rem;
	background-color:gray;

	color:white;
	font-family: sans-serif;
	font-size: 1rem;
	font-weight: 900;
	text-align: center;
	line-height: 2.2rem;
	letter-spacing:-0.1rem;
	
}
.number::after{
	counter-increment: num;
	content: counter(num);
}
.caption{
	position: absolute;
	bottom:48px;
	left:0;
	width:100%;
	line-height: 24px;
	display:none;
	justify-content:center;
	font-family: sans-serif;
	word-break:keep-all;
	font-size:0.9rem;
}
	.caption span:nth-child(1){
		font-weight: 900;
		font-size:1rem;
		display:block;
	}
	@media screen and (max-width:700px) {
		.caption span{
			display:block;
		}
	}

.btn{
	display:none;
	position: absolute;
	
	bottom:8px;
	width:128px;
	line-height: 32px;
	background-color: #555;
	border-radius: 16px;
	cursor:pointer;
	justify-content:center;
	font-family: sans-serif;
	font-size: 1rem;
	font-weight: 900;
}
.btn.info{
	left:calc(50% + 44px);
	opacity:1;
	width:32px;
}
.btn.add{
	left:calc(50% - 92px);
}

.btn.info.ja::after{
	content: "？";
	height:32px;
	color:white;
}

.btn.info.en::after{
	content: "?";
	height:32px;
	color:white;	
	font-size: 0.7rem;
}

.btn.info.zh::after{
	content: "?";
	height:32px;
	color:white;	
	font-size: 0.7rem;
}
	
.btn.add.ja::after{
	content: "カートに追加";
	height:32px;
	color:white;
}

.btn.add.en::after{
	content: "Add to Cart";
	height:32px;
	color:white;
	font-size: 0.8rem;
}
.btn.add.zh::after{
	content: "加入購物車";
	height:32px;
	color:white;
	font-size: 0.8rem;
}

.hilite{
	box-shadow: 0 0 0 2px lightgray;
}




/* @media screen and (max-height:1200px) {			
	.stage{
		height:85%;
		margin-bottom:1.2rem;
	}
	.work.s10 {
		margin-top:16px;
		height:calc(10% - 16px);
	}
}
@media screen and (max-height:700px) {
	.stage{
		height:83%;
		margin-bottom:1.4rem;
	}
} */

@media screen and (max-height:1200px) {			
	
	.work.s100 {
		padding-bottom:1.5rem;
		height:calc(100% - 1.5rem);
	}
}
@media screen and (max-height:840px) {
	.work.s100 {
		padding-bottom:3rem;
		height:calc(100% - 3rem);
	}
}
@media screen and (max-height:700px) {
	.work.s100 {
		padding-bottom:3.5rem;
		height:calc(100% - 3.5rem);
	}
}

@media screen and (max-width:700px) {
	#logo{
		font-size:1rem;
		line-height: 1rem;
		margin-left:8px;
		height:60%;
	}

	.cartItem{
		width:86px;
		height:86px;
	}
	#tail{
		display:block;
	}
	#total{
		position: fixed;
		right:4px;
		bottom:4px;
		opacity: 1;
	}
	#message{
		width:320px;
		height:100px;
		position: fixed;
		left:calc(50% - 160px);
		top:30%;
		line-height: 100px;
		font-size: 1.4rem;
	}

	#tail{
		text-align: left;
		line-height: 0.8rem;
	}
	#credit{
		font-size: 0.6rem;
		margin:11px 1px 0px 4px;
		width:40%;
	}
	.number{

	}


	#order{	
		width:134px;
		font-size:1.3rem;
		margin-left:8px;
	}


}
@media screen and (max-width:400px) {
	#logo{
		height:48%;
	}
	.caption{
		font-size:0.85rem;
		line-height: 1.2rem;
		
	}
	.stage{
		width: 83%;
		height: 83%;
	}
	#order{	
		width:110px;
		font-size: 1.2rem;
		margin-left:8px;
	}
	/* .work.s100 {
		padding-bottom:0.5rem;
		height:calc(100% - 0.5rem);
	} */
}
@media screen and (max-width:330px) {
	#logo{
		height:36%;
	}
	.work.s100 {
		/* padding-bottom:3rem;
		height:calc(100% - 3rem); */
	}
	.stage{
		width: 80%;
		height: 80%;
	}
	#order{	
		width:90px;
		font-size: 1rem;
	}
}
#mode{
	display:flex;
	height:36px;
}
#mode a{
	text-decoration: none;
}

#mode a:link {
	color:black;
}
#mode a:visited {
	color:black;
}
#mode a > div:hover {
	color:black;
	background-color:black;
}
#mode a:active {
	color:black;
}

div#mode > a > div{
	display:flex;
	width:36px;
	height:36px;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	align-content:space-between ;
	flex-wrap:wrap;
	overflow: hidden;
	border-radius: 2px;
}
div#mode > a > div > div
{
	width:2px;
	height:2px;
	background-color:rgba(255,255,255,0.6);
	margin:1px;

}
/* div#mode > a:nth-child(1) > div > div
{
	width:2px;
	height:2px;
} */
div#mode > a:nth-child(2) > div > div
{
	width:5px;
	height:5px;
}
div#mode > a:nth-child(2) > div > div
{
	width:10px;
	height:10px;
}
div#mode > a:nth-child(3) > div > div
{
	width:100%;
	height:calc(100% - 2px);
}
@media all and (-ms-high-contrast:none) {
	*::-ms-backdrop,

	.btn{
		left:45%;
	}
}
/* div.caption{
	color:red;
} */