* {
	//color:#efefef;
	//line-height:100%;
	font-family: mincho;
}

#wish-content * {
	color:#d1d0c5;
	line-height:100%;
}

p{
	//color:#efefef;
	color:#d1d0c5;
	line-height:normal;
	
	//src: local("MS PMincho"), local("ＭＳ　Ｐ明朝");
	margin:0;
}

tiny{
	font-size:33%;
}

#changelog pos{
	font-style: italic;
	color: #0d0;
}

#changelog neg{
	font-style: italic;
	color: #d00;
}

hr{
	border-color:#d1d0c5;
	background-color:#d1d0c5;
	width:75%;
	margin: 0 auto 8px 0;
	float:left;
}

.grid {
	display:grid;
	width: 90%;
	height: auto;
	grid-template-columns: repeat(auto-fit,268px);
	grid-row-gap: 20px;
}

.grid-element {
	background-color:#4d4a3440;
	height:auto;
	//margin:8px;
	width:240px;
	padding: 8px 8px 16px 8px;
}

.grid-element > * {
	//color:#efefef;
	text-align:right !important;
	line-height: 100%;
}

.infoeia * {
	line-height:100%;
}

@keyframes flash {
	0% {
		background-color:#4d4a3440;
	}
	50% {
		background-color:#878d5170;
	}
	100% {
		background-color:#4d4a34b0;
	}
}

.grid-element.hl {
	background-color:#4d4a3440;
	animation:flash 2s ease 1.5s forwards;
}

.grid-element a {
	position:relative;
}

.grid-element a * {
	margin: 16px 0 0 32px;
}

.grid-element a p {
	max-width:calc(100% - 32px);
	padding: 4px;
	position:absolute;
	overflow-wrap:anywhere;
	mix-blend-mode:exclusion;
}

.grid-element img {
	width:calc(100% - 32px);
	border: 1px solid #9aa343;
}

.grid-element img:hover {
	border: 1px solid #d3cb54;
}

.grid-element small {
	font-size:12px;
}

.grid-element h2 {
	//margin:8px;
	font-size: 22px;
	margin: 8px 0 0 0;
	font-weight:400;
	border:none;
}

.infoeia h2 {
	//margin:8px;
	font-size: 32px;
	margin: 8px 0;
	font-weight:400;
}

.infoeia .but {
	float:left;
}

.shop-single {
	display:flex;
	//justify-content:space-between;
	width:75%;
}

#galleria-focus {
	position:absolute;
	width:100%;
	height:100%;
	margin: -54px 0 0 -32px;

	z-index:5;

	transition: margin 1s, opacity 250ms;
	transition-timing-function: linear;

	pointer-events:none;
}

#galleria-focus img{
	z-index:3;
	border: 1px solid #d1d0c5;
}

#galleria-focus #back{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#151312a0;
	cursor: zoom-out;
	z-index:2;
}

#galleria-focus img {
	margin: auto;
	display: block;
	width:50%;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.galleria {
	flex: 0 0 40%;
	//display: inline-block;
}

.galleria #large {
	display: grid;
	grid-row-gap: 8px;
	position:relative;

	margin:0 8px 8px 8px;
}

.galleria #large a {
	width:100%;
	//height:0;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	position: absolute;

	padding-top:100%;

	flex-direction:column;

	z-index:1;
}

table small {
	font-size: 60%;
}

.galleria #small {
	display: grid;
	grid-template-columns: repeat(5, calc(20% - 8px));
	grid-gap: 8px;
	padding: 0 8px 8px 8px;
	justify-content: space-between;
}

.galleria #small img {
	aspect-ratio:1;
	object-fit:cover;
}

.galleria a {
	margin:auto;
}

.galleria img {
	width: 100%;
	cursor: pointer;
	box-sizing:border-box;
	border: 1px solid #d1d0c5;
}

.galleria #large img {
	//object-fit:contain;
	object-fit:cover;
	cursor: zoom-in;
	position:absolute;
	//margin-top:calc(-100% - 8px);
	float:left;

	min-height:0;
	max-height:100%;

	//width: auto;
	//width:100%;
	//height:100%;
	height:auto;
	max-width: 100%;
}

.galleria #large p {
	position: absolute;
	width: calc(100% - 16px);
	z-index: 4;
	top: 0;
	padding: 8px;
	mix-blend-mode:difference;
}

.infoeia {
	line-height:125%;
	min-width:0;
	width:100%;
	max-width:110%;
	margin-left:8px;
	overflow-wrap:break-word;
}

button {
	margin-top:8px;
	width:100%;
}

h4 {
	border-bottom:1px gray solid;
}

.but {
	margin-top:8px;
	margin-right: 1%;
	width: 44%;
	//width:calc(100% - 12px);
	color:#2d3d14;
	background-color:#818744;
	padding: 2px 6px;
	border-radius: 3px;
	float:right;
	user-select:none;
	line-height:100%;
}

.dead {
	color:#372d16;
	background-color:#535035;
}

.dead:hover {
	color:#8f8045;
}

#reader p{
	hyphens: auto;
	text-align:justify;
}

#reader > p {
	margin-right: 16px;
	text-indent:4vw;
}

#wish {
	background-color: #00000088;
	position:absolute;
	display:none;
}

#border {
	position:absolute;
}

#border > .bord {
	width:100%;
	height:100%;
	position:absolute;
	display:flex;
	flex-wrap: wrap;
	align-content:space-between;
	justify-content: space-between;
}

.quad .container {
	container-type:inline-size;
	height:100%;
	width:100%;
	position:absolute;
}

.bord p {
	position:absolute;
	z-index:50;

	font-size:3.5cqh;
	transform:rotate(-90deg) scaleX(1.8) translate3d(0,0,0);
	transform-origin: 0% 0%;

	color: #b9a239;
	user-select: none;
}

#b1 > div{
	//flex-basis:50%;
	//max-height:50%;
	//max-width:50%;
	//position:relative;
	//display:flex;
	width:50%;
	height:50%;
	color:#222222;
}

.quad {
	//display:inline-flex;
	//width: auto;
	//height: auto;
	//max-height: fit-content;
	width:100%;
	//max-width:fit-content;
	height:100%;
	position:relative;
	writing-mode:vertical-rl;

	display:flex;
	//flex-direction:column;
	//justify-content:space-between;
}

#viewer-gui{
	z-index:0;
}

#b1 > div img{
	position:relative;
	//height:max-content;
	//width:auto;
	
	max-height:100%;

	//max-width:100%;
	width:100%;

	position:relative;
	pointer-events:none;
	z-index:45;
}

#b2 > div{
	height:100%;
	width:50%;
}

#b2 > div img{
	height:100%;
	max-width:100%;
	position:relative;
	pointer-events:none;
	z-index:44;
}

#b3 > div{
	height:50%;
	width:100%;
}

#b3 > div img{
	width:100%;
	max-height:100%;
}



#wish-box {
	position:relative;
	width: 50%;
	height: 25%;
	align-content: center;
	text-align: center;
	margin: auto;
	padding:8px;
	top: 50%;
	transform: translateY(-50%);
	background-color:#27221f;

	z-index:100;
}

#wish-back {
	position:absolute;
	z-index:45;
}
#wish-back:hover {
	cursor:pointer;
}

#wish-content{
	height:calc(100% - 80px);
	padding: 16px;
	overflow-y:auto;
}

#wish-info{
	height:16px);
	//padding: 16px;
}

h1{
	border-bottom: 2px solid grey;
}
h2{
	border-bottom: 2px solid grey;
}
h6{
	margin: 4px 0 8px 0;
}
h8{
	font-size:14px;

}
h10{
	font-size:11px;

}

@font-face{
	font-family: gothic;
	src: local("MS PGothic"), local("ＭＳ　Ｐゴシック");
}
@font-face{
	font-family: mincho;
	src: local("MS PMincho"), local("Arial"), local("ＭＳ　Ｐ明朝");
}

body{
	margin:16px 0 0 0;
	//background-color:#0000bb;
	background-color: #ffcc00; //ja
	line-height:0;
	//width:calc(100% - 2px);
	width:100%;
	overflow:hidden;
}

.label{
	background-color:#0000ee88;
	font-size:20px;
	line-height:20px;
	padding:8px;
}
.label:hover{
	cursor: pointer;
}

hl{
	color:#9aa343;
}

a{
	color:#9aa343;
	text-decoration: none;
	//display: inline-block;
}
a:hover{
	color:#d3cb54
}

footer p{
	color:#000;
}

footer a{
	//color:#dd8f00;
	color:#00e;
}

footer a:hover{
	color:#e3be08;
}

tr:nth-child(even){
	//background:#5b5858;
	background:#333030;
}
tr:nth-child(odd){
	//background:#676762;
	background:#393737;
}
th{
	background:#4040b5;
}
th p{
	text-align:center !important;
}
table{
	border-spacing:0;
	color:#efefef;
	//text-align:center;
}
table table{
	width:100%;
}
table table td{
	width:33.3%;
	text-align:center;
}
table table tr{
	background-color:unset !important;
}
td p {
	text-align:center !important;
}
table .smalls{
	font-size:10px;
	/*display:inline;*/
}
table img{
	width:100%;
	padding:8px;
	box-sizing:border-box;
	vertical-align:bottom;
}

.album{
	float:right;
	color:#efefef;
}

.info{
	padding:0 0 16px 16px;
	width:33%;
}
.info b{
	color:#4040b5;
}
.art{
	padding:0;
	width:15%;
}

#viewer{
	width:0%;
	height:100%;
	border:0;
	flex: none;
	image-rendering:pixelated;

	transition:all 1s;
	transition-timing-function:linear;
}

#viewer-real{
	width:100%;
	height:100%;
	//padding: 32px;
	background-color: #27221f;
}

#border{
	opacity:0;
}

#ui{
	height:100%;
}

#reader{
	position:relative;

	background-color:#27221f;
	flex-grow:1;
	height:calc(100% - 32px);
	padding: 32px 0 0 32px;
	float:right;
	overflow-y:auto;

	transition:all 1s;
	transition-timing-function:linear;
}

#looking-glass{
	width:100%;
	height:100%;
	border:0;
}

#changelog{
	height:96px;
	overflow-y:scroll;
	margin:0.5vw 0;
	background-color:#111111aa;
	border: 1px #efefef solid;
	resize:vertical;
}

footer{
	text-align:center;
	margin:8px 0;
	height:24px;
}