:root {
	--content-width: 80vw;
	--font-base-top: min(2vw, 3.2vh);
	--font-base: 2vw;
	--margin-base: calc(var(--content-width) * 0.08);
	--offset-base: 2px;
}

body{
	background-image: url(img/background.png);
	background-attachment: fixed;
	background-size: cover;
}
body.stopped{
	position: fixed; overflow: hidden;
	left: 0; right: 0;
}


@font-face {
  font-family: "GenEiLateMin";
  src: url("font/GenEiLateMinP_v2.ttf") format("truetype");
}
@font-face {
  font-family: "GenEiLateGo";
  src: url("font/GenEiLateGoP_v2.ttf") format("truetype");
}

.sans{
	font-size: var(--font-base);
	font-family: "GenEiLateGo", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.serif{
	font-size: var(--font-base);
	font-family: "GenEiLateMin", serif;
	font-weight: 400;
	font-style: normal;
}
.rounded{
	font-size: var(--font-base);
	font-family: "M PLUS Rounded 1c", serif;
	font-weight: 700;
	font-style: normal;
}
.kaisei{
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
}
.title{font-size: calc(var(--font-base) * 2.1);}
.subtitle{font-size: calc(var(--font-base) * 1.4);}
.paragraph{font-size: calc(var(--font-base) * 0.9);}

.decorated-link{color: rgb(63, 136, 66); cursor: pointer;}
th.decorated-link{color: gold;}

body.side-open{
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

.overlay {
	display: block; position: fixed; visibility: hidden;
	width: 100%; height: 100%; top: 0; left: 0;
	background: rgba(0,0,0,0);
	transition: all .5s ease;
	z-index: 40;
}
.side-open .overlay {
	visibility: visible;
	background: rgba(0,0,0,.3);
	transition: all .5s ease;
}

.side-menu{
	display: block; position: fixed;
	width: 62.5vh; height: 100vh; top: 0; right: -62.5vh;
	text-align: left;
	z-index: 41;
	background: rgba(44, 63, 38, 0.8);
	transition: all .5s ease;
	overflow: hidden;
}
.side-open .side-menu{
	right: 0;
}
.side-menu p{user-select: none; pointer-events: none;}
.side-menu .title{font-size: calc(var(--font-base-top) * 2.1);}
.side-menu .title-on{font-size: calc(var(--font-base-top) * 2.1);}
.side-menu .subtitle{font-size: calc(var(--font-base-top) * 1.4);}
.side-menu .paragraph{font-size: calc(var(--font-base-top) * 0.9);}
.side-menu .home{pointer-events: auto; top: 7%; left: 40%; transform: translate(-50%,-50%);}
.side-menu .contents{width: 100%; text-align: center; top: 15%;}
.side-menu .gallery{width: 88%; left: 6%; height: 16%; top: 24%;}
.side-menu .game{width: 88%; left: 6%; height: 16%; top: 42%;}
.side-menu .gallery p,.side-menu .game p{top: 50%; left: 4%; transform: translate(0, -50%); z-index: 33; transition: 0.4s;}
.side-menu .gallery p.title,.side-menu .game p.title{-webkit-text-stroke: calc(var(--font-base-top) * 0.2) black; z-index: 32;}
.side-menu .darkscreen{z-index: 20; background-color: rgba(0, 0, 0, 0.28); pointer-events: none; transition: 0.4s;}
.side-menu .gallery:hover .darkscreen,.side-menu .game:hover .darkscreen{background-color: rgba(0, 0, 0, 0);}
.side-menu .links{width: 100%; text-align: center; top: 63%;}
.side-menu .discord-link{width: 48%; left: 8%; top: 72%;}
.side-menu .cien-link{width: 30%; left: 62%; top: 72%;}
.side-menu .link-button{width: 70%; left: 15%; top: 84%; height: 6%; border-radius: calc(var(--content-width) * 0.01);}
.side-menu .link-button.button1{width: 36%; left: 5%;}
.side-menu .link-button.button2{width: 24%; left: 44%;}
.side-menu .link-button.button3{width: 24%; left: 71%;}

.side-menu-btn{
	display: block; position: fixed; cursor: pointer;
	width: 6.4vw; height: 6.4vw; top: 0; right: 0; padding: 0;
	z-index: 44;
	transition: all .5s ease;
}
.side-menu-btn .menu{
	width: 100%;
	height: 100%;
	right: 0;
	transition: all .5s ease;
}
.side-open .side-menu-btn .menu{
	right: -150%;
}
.side-menu-btn .closer{
	width: 100%;
	height: 100%;
	right: -100%;
	transition: all .5s ease;
}
.side-open .side-menu-btn .closer{
	right: 0;
}

body.open-popup{overflow: hidden;}
.onetime-popup{
	display: none; position: absolute; z-index: 100;
	top: 50%; left: 50%; width: 40%; height: 40%; transform: translateX(-50%) translateY(-50%);
	background-color: white; border-radius: calc(var(--font-base) * 1);
}
.open-popup .onetime-popup{display: block;}
.onetime-popup .caution{width:100%; text-align: center; top: 35%; transform: translate(0, -50%); font-size: calc(var(--font-base) * 0.7);}
.onetime-popup .ok-button{
	width: 30%; left: 35%; top: 76%; height: 16%; transform: translate(0, -50%);
	background-color: rgb(101, 122, 95); border-radius: calc(var(--font-base) * 0.5); cursor: pointer;
}
.onetime-popup .ok-button p{width: 100%; text-align: center; top: 50%; transform: translate(0, -50%); pointer-events: none;}

#main-content.blur{filter: blur(30px);}

.main-content{width: min(100vw, 160vh); height: min(62.5vw, 100vh); top: 50vh; left: 50vw; transform: translate(-50%,-50%);}
.main-content p{user-select: none; pointer-events: none;}
.main-content .title{font-size: calc(var(--font-base-top) * 2.1);}
.main-content .title-on{font-size: calc(var(--font-base-top) * 2.1);}
.main-content .subtitle{font-size: calc(var(--font-base-top) * 1.4);}
.main-content .paragraph{font-size: calc(var(--font-base-top) * 0.9);}
.main-visual{width: 100%; height: 100%; overflow: hidden;}
.main-visual .image{z-index: 0; opacity: 0;}
.main-visual .main-visual-image{display: block; position: absolute; object-fit: cover; user-select: none;}
.loaded .main-visual .image{transform-origin: center; animation: fade 48s linear infinite, zoomout 48s linear infinite;}
.loaded .main-visual .image.main-visual2{animation-delay: 12s;}
.loaded .main-visual .image.main-visual3{animation-delay: 24s;}
.loaded .main-visual .image.main-visual4{animation-delay: 36s;}
.loaded .main-visual .darkscreen{z-index: 20; background-color: rgba(0, 0, 0, 0.28);}
.main-visual .catchcopy, .main-visual .circle-add, .main-visual .circle, .main-visual .circle-category, .main-visual .notice{left: 8%; width: 84%; z-index: 30;}
.main-visual .catchcopy{top: 20%; font-size: calc(var(--font-base-top) * 2.1);}
.main-visual .circle-add{bottom: calc(28% + var(--font-base-top) * 3.0); font-size: calc(var(--font-base-top) * 1.0);}
.main-visual .circle{bottom: 28%; font-size: calc(var(--font-base-top) * 2.4);}
.main-visual .circle-category{bottom: calc(26% - var(--font-base-top) * 3.2); font-size: calc(var(--font-base-top) * 1.0);}
.main-visual .notice{bottom: calc(26% - var(--font-base-top) * 5.4); font-size: calc(var(--font-base-top) * 1.0);}

.link-button{
	position: absolute; cursor: pointer; box-sizing: border-box;
	height: calc(var(--content-width) * 0.05); border-radius: calc(var(--content-width) * 0.025);
	color: white; border: 0.2vw solid white;
	transition: 0.4s;
}
.link-button:hover{background-color: white;}
.link-button p{transition: 0.4s;}
.link-button:hover p{color: rgb(19, 63, 19);}

#gallery-area .search{width: 100%; height: calc(var(--content-width) * 0.12);}
#gallery-area .search p{right: 52%; top: 50%; transform: translate(0, -50%);}

.switchArea{
	font-size: calc(var(--font-base) * 0.8); line-height: 1.6; letter-spacing: 0; text-align: center;
	left: 52%; top: 50%; transform: translate(0, -50%);
	width: calc(var(--content-width) * 0.12);
	background: transparent;
}
.switchArea input[type="checkbox"] {display: none;}

.switchArea label{
	display: block; box-sizing: border-box;
	height: calc(var(--content-width) * 0.05); border-radius: calc(var(--content-width) * 0.025);
	border: 0.3vw solid white;
	cursor: pointer;
}

.switchArea label span:after{
	content: "OR"; color: white;
	position: absolute; top: 50%; left: 65%; transform: translate(-50%,-50%);
}

.switchArea input[type="checkbox"]:checked + label span:after{
	content: "AND"; left: 35%;
}

.switchArea #swImg{
	position: absolute; pointer-events: none;
	width: calc(var(--content-width) * 0.05 - var(--font-base) * 0.5);
	height: calc(var(--content-width) * 0.05 - var(--font-base) * 0.5);
	background: white;
	top: calc(var(--font-base) * 0.25); left: calc(var(--font-base) * 0.25);
	border-radius:  calc(var(--content-width) * 0.025 - var(--font-base) * 0.1);
	transition: .2s;
}

.switchArea input[type="checkbox"]:checked ~ #swImg {
	transform: translateX(calc(var(--content-width) * 0.07));
}

.tags{text-align: center;}
.tags input{display: none;}
.tags label{
	display: inline-block; border-radius: calc(var(--content-width) * 0.02); box-sizing: border-box;
	color: white; border: 0.3vw solid white;
	margin: calc(var(--font-base) * 0.2); cursor: pointer;
}
.tags label.active{color: rgb(19, 63, 19); background: white;}
.tags label span{
	font-size: calc(var(--font-base) * 0.8); padding: calc(var(--font-base) * 0.4) calc(var(--font-base) * 0.6);
}

#gallery-area .gallery{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#gallery-area .gallery .image-full{height: calc(var(--content-width) * 0.20); cursor: pointer; transition: 0.4s;}
#gallery-area .gallery .image-full.disabled{display: none;}
#gallery-area .gallery .image-full:hover{background-color: rgba(255, 255, 255, 0.16);}
#gallery-area .image-popup{height: 80%; top: 5%; left: 50%; user-select: none; transform: translate(-50%, 0); z-index: 20; background-color: rgba(255, 255, 255, 0.28);}
#gallery-area .image-popup.disabled{display: none;}
#gallery-area .title-popup{left: 50%; top: 90%; font-size:calc(var(--font-base) * 1.1); white-space: nowrap; transform: translate(-50%, -50%); z-index: 20;}
#gallery-area .title-popup.disabled{display: none;}
#gallery-area .character-name{left: 6%; width: 88%;}

#screen-full{z-index: 10; background-color:rgba(0, 0, 0, 0.60); z-index: 10;}
#screen-full.disabled{display: none;}

#visual-area .area-content{width: 50%; left: 25%;}
#visual-area .image-relative{width: 100%; cursor: pointer;}
#visual-area p{width: 92%; left: 4%;}
#visual-area .back-button{position: absolute; width: calc(var(--content-width) * 0.05); right: calc(var(--content-width) * 0.02); z-index: 1;}
#visual-area .back-button p.paragraph{width: auto; left: 50%; font-size: calc(var(--font-base) * 0.9);}
#visual-area p.paragraph{font-size: calc(var(--font-base) * 0.7);}

.main-visual-maneater{width: 72%; left: 14%; height: auto;}
.caption-maneater{width: 100%;}
.screenshots-maneater{width: 80%; left: 10%; display: flex; flex-wrap: wrap; justify-content: center;}
.screenshots-maneater .image-full{width: 30%; cursor: pointer;}
#game-area-maneater .link-button{position: relative; width: 50%; left: 25%;}
#game-area-maneater .link-button p{font-size: calc(var(--font-base) * 1.0);}
#game-area-maneater .image-popup{left: 50%; height: 80vh; top: 10vh; transform: translate(-50%, 0); z-index: 20; background-color: rgba(255, 255, 255, 0.28);}
#game-area-maneater .image-popup.disabled{display: none;}

div#game-container{display: block; position: fixed; width: min(100vw, 100vh)!important; height: min(100vw, 100vh)!important; left: 50%; top: 50%; transform: translate(-50%,-50%);}