@font-face {
	font-family: 'rat';
	src: url('INT-RATIOText-Web.otf') format("opentype");
	font-weight: normal;
	font-style: normal;
	font-weight: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}
html {
	font-size: 0.8vw;
  /* scrollbar-width: none; */
}
body {
  font-family: rat, sans-serif;
  width: 100%;
	font-size: 1rem;
	line-height: 1.3em;
  scrollbar-width: none;
}
h1 {
  font-size: 2.5em;
  line-height: 1.3em;
	/* padding-bottom: 0.5em; */
}
h2 {
  font-size: 1.5rem;
  line-height: 1.3em;
	padding-bottom: 1em;
}
h3 {
  font-size: 1.25em;
  line-height: 1.3em;
	padding-bottom: 1em;
}
h4 {
  font-size: 1em;
  line-height: 1.3em;
}

p, ul {
	padding-bottom: 1.3em;
}
p:last-child, ul:last-child {
	padding: 0;
}
ul {
	list-style-type: disc;
}
li {
	margin-left: 1em;
}
a {
	cursor: pointer;
	color: black;
	text-decoration: underline;
}
.center {
	text-align: center;
}
#alreadyOrdered {
	display: none;
}
#bigZoom {
	width: 60vw;
	padding: 2vw;
	display: grid;
	grid-template-columns: 3;
	grid-template-rows: auto auto;
	column-gap: 2vw;
  row-gap: 2vw;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10001;
	background-color: white;
	display: none;
}
.spacer {
	padding-top: 0.5em;
}
#alreadyOrdered {
	text-align: right;
  font-size: 1.25em;
  line-height: 1.3em;
}
#bigZoom .img {
	grid-column: span 3;
}
#bigZoom .img img {
	width: 100%;
}
#bigZoom .title, #bigZoom .data, #bigZoom .button {
	grid-column: span 1;
	/* align-self: center; */
}
#bigContent {
	width: 60vw;
	padding: 2vw;
	display: grid;
	grid-template-columns: 23fr 23fr 23fr 31fr;
  column-gap: 2vw;
  row-gap: 2vw;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10002;
	display: none;
	background-color: white;
}
#bigContent .form {
	grid-row: span 2;
}
#bigContent .mod {
	font-size: 0.85em;
  line-height: 1.3em;
}
#bigContent>div {
}
#bigContent .img {
	grid-column: span 3;
}
#bigContent img {
	width: 100%;
}
.alternate .b {
	display: none;
}
.alternate:hover .b {
	display: block;
}
.alternate:hover .a {
	display: none;
}
#bigContent input {
	width: 100%;
	font-size: 1rem;
	padding: 0.5em;
	margin-bottom: 0.5em;
}
#bigContent input[type=submit] {
	background-color: red;
	color: white;
	border: none;
	cursor: pointer;
}
#bigContent input[type=submit]:hover {
	background-color: blue;
	color: white;
	border: none;
}
.kusanagi {
	display: none;
}
#big {
	top: 0px;
	position: fixed;
	width: 100%;
	height: 100%;
	cursor: pointer;
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 10000;
}
#content {
  margin: auto;
  width: calc(100vw - 2vw);
  margin: auto;
  z-index: 100;
}
#piece {
  margin-top: 1vw;
  width: 100%;
  height: calc(100vh - 2vw);
  overflow: hidden;
  position: relative;
	opacity: 1;
	transition: opacity 1s;
}
#gray {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  top: 0px;
  mix-blend-mode: hue;
  z-index: 0;
}
#description {
	margin: auto;
	box-sizing: border-box;
	height: 100vh;
  padding-top: 5vh;
	width: 70%;
	padding-bottom: 2em;
  /* float: right; */
}
#launcher {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 2vw 2vw;
	z-index: 5000;
	transition: opacity 1s;
	opacity: 1;
	width: 60vw;
}
.lang {
	position: absolute;
	right: 2vw;
	top: 2vw;
  font-size: 1.25rem;
  line-height: 1.3em;
}
#archive .lang {
	right: 0vw;
	top: 0vw;
}
.anime {
	opacity: 0;
	transition: opacity 1s;
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.button {
	padding: 1em;
	padding-bottom: 0.5em;
	/* margin: 1rem; */
	background-color: red;
	text-decoration: none;
	color: white;
	margin-right: 1px;
	text-align: center;
	cursor: pointer;
}
.button:hover {
	background-color: blue;
	text-decoration: none;
}
.columns {
  column-count: 2;
  column-gap: 2vw;
	padding-bottom: 2rem;
}
/* .play {
	display: none;
} */
iframe {
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  mix-blend-mode: exclusion;
  pointer-events: none;
  opacity: 1;
}
#selector {
  z-index: 1000;
  display: block;
  position: fixed;
	top: 2vw;
	right: 2vw;
	display: none;
}
#archive {
	margin: 1vw;
	/* width: 100%; */
	/*  */
	grid-column-gap: 1vw;
	grid-row-gap: 1vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.itemDesc {
	display: block;
	margin-top: 0.5rem;
}
.buy {
	cursor: pointer;
}
@keyframes burn {
  from {background-position: 0px 0px;}
  to {background-position: 2vw 2vw;}
}
/* .bought:hover::before {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	content: "";
	background-image: url("../favicon-96x96.png");
	background-repeat: repeat;
	background-position: center;
	background-size: 2vw;
	z-index: 1000;
  transform: rotate(0deg);
	-webkit-animation: burn 2s infinite linear;
  -moz-animation:    burn 2s infinite linear;
  -o-animation:      burn 2s infinite linear;
  animation:         burn 2s infinite linear;
} */
.imgTypo {
	height: 0.8em;
	margin-bottom: -0.05em;
}
.item::before{
	padding-top: 65.5%;
}
.item, .titleItem {
	grid-column: span 1;
	/* padding: 0.5vw; */
	position: relative;
}
.item {
	/* background-color: blue; */
}
.item:hover {
	opacity: 0.8;
}
.titleItem {
	grid-column: span 1;
	grid-row: span 1;
}-
.titleItem {
	text-align: center;
}
.titleItem h1 {
	/* margin-bottom: 1em; */
}
.item img {
	width: 100%;
	object-fit: contain;
	cursor: pointer;
}
.centering {
	position: absolute;
	left: 50%;
	top: 40%;
	width: 100%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.ended {
	display: none;
}
@media screen and (orientation: portrait) {
	html {
		font-size: 1.8vw;
	}
	#launcher {
		width: 80vw;
	}
	#bigContent .img, #bigContent .form, #bigContent .mod {
		grid-column: span 4;
	}
	#archive {
		grid-template-columns: repeat(2, 1fr);
	}
}