: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;
}

@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(160, 112, 8); cursor: pointer;}
th.decorated-link{color: gold;}

table{
	position: relative; table-layout: fixed;
	border-collapse: separate; border-spacing:  calc(var(--font-base) * 0.4);
	font-size: calc(var(--font-base) * 0.9);
}
table th{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(201, 107, 0); color: white;
	border-radius: calc(var(--font-base) * 0.2);
}
table td{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(173, 221, 128);
	border-radius: calc(var(--font-base) * 0.2);
}
table tr:nth-child(2n) th {
	background-color: rgb(230, 138, 0);
}
table tr:nth-child(2n+1) td {
	background-color: rgb(145, 199, 94);
}

form table{width: 88%; left: 6%;}
form table tr{width: 100%;}
form table th{width: 30%;}
form table th.required:after{content: " ※";}
form .half-input{
	width: calc(var(--font-base) * 10);
	height: calc(var(--font-base) * 2);
	border: 0;
	margin-right: calc(var(--font-base) * 1);
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 0.9);
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
}
form .full-input{
	width: calc(var(--font-base) * 23.2);
	height: calc(var(--font-base) * 2);
	border: 0;
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 0.9);
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
}
form textarea{
	width: calc(var(--font-base) * 23.2);
	height: calc(var(--font-base) * 7);
	border: 0;
	padding: calc(var(--font-base) * 0.5) calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 0.9);
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
	background-color: white;
}
form .date-input{
	width: calc(var(--font-base) * 4);
	height: calc(var(--font-base) * 2);
	border: 0;
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 0.9);
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
	margin-right: calc(var(--font-base) * 0.5);
}
form .uploader{
	padding: 0 calc(var(--font-base) * 1);
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
}
form button{
	width: calc(var(--content-width) * 0.20); left: calc(var(--content-width) * 0.40);
	height: calc(var(--content-width) * 0.05);
	background-color: rgb(201, 107, 0);
	border-radius: calc(var(--font-base) * 0.4);
	margin-top: calc(var(--content-width) * 0.04);
	margin-bottom: calc(var(--content-width) * 0.04);
}
.contact-button-cover{
	width: calc(100% - var(--offset-base) * 4); height: calc(100% - var(--offset-base) * 4);
	left: calc(var(--offset-base) * 2); top: calc(var(--offset-base) * 2);
	background-color: rgb(255, 236, 149);
	border-radius: calc(var(--font-base) * 0.4);
	transition: 0.4s;
}
form button:hover .contact-button-cover{opacity: 0;}
form button p{
	display: block; position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
}
form button:hover p{color: white;}

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 .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%;}
.main-visual .image{z-index: 0; opacity: 0;}
.loaded .main-visual .image{animation: fade 24s linear infinite;}
.loaded .main-visual .image.main-visual2{animation-delay: 6s;}
.loaded .main-visual .image.main-visual3{animation-delay: 12s;}
.loaded .main-visual .image.main-visual4{animation-delay: 18s;}
.loaded .main-visual .darkscreen{z-index: 20; background-color: rgba(0, 0, 0, 0.28);}
.main-visual .catchcopy{top: 35%; left: 4%; z-index: 30; transform: translate(0,-50%); font-size: calc(var(--font-base-top) * 1.8);}
.main-visual .circle-add{bottom: calc(14% + var(--font-base-top) * 2.8); right: 40%; z-index: 30; font-size: calc(var(--font-base-top) * 1.0);}
.main-visual .circle{bottom: 14%; right: 40%; z-index: 30; font-size: calc(var(--font-base-top) * 2.4);}
.main-menu{width: 36%; left: 64%; height: 100%; background-color: rgba(68, 95, 59, 0.8); z-index: 30;}
.main-menu .contents{width: 100%; text-align: center; top: 12%;}
.main-menu .gallery{width: 88%; left: 6%; height: 16%; top: 24%;}
.main-menu .gallery p{top: 50%; left: 4%; transform: translate(0, -50%); z-index: 32;}
.main-menu .game{width: 88%; left: 6%; height: 16%; top: 48%;}
.main-menu .game p{top: 50%; left: 4%; transform: translate(0, -50%); z-index: 32;}
.main-menu .darkscreen{z-index: 20; background-color: rgba(0, 0, 0, 0.28); pointer-events: none; transition: 0.4s;}
.main-menu .gallery:hover .darkscreen{background-color: rgba(0, 0, 0, 0);}
.main-menu .game:hover .darkscreen{background-color: rgba(0, 0, 0, 0);}
.main-menu .discord-link{width: 48%; left: 8%; top: 72%;}
.main-menu .cien-link{width: 30%; left: 62%; top: 72%;}
.main-menu .link-button{width: 70%; left: 15%; top: 78%; height: 6%; border-radius: 7% / 50%;}

.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.3vw solid white;
	transition: 0.4s;
}
.link-button:hover{background-color: white;}
.link-button p{transition: 0.4s;}
.link-button:hover p{color: darkgreen;}

#gallery-area .link-button, #game-top-area .link-button{width: calc(var(--content-width) * 0.05); right: calc(var(--content-width) * 0.06); top: 0;}

#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; height: calc(var(--content-width) * 0.05); border-radius: calc(var(--content-width) * 0.025); box-sizing: border-box;
	color: white; border: 0.3vw solid white;
	margin: calc(var(--font-base) * 0.2); cursor: pointer;
}
.tags label.active{color: darkgreen; background: white;}
.tags label span{
	font-size: calc(var(--font-base) * 0.8); padding: calc(var(--font-base) * 0.35) 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.24); 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.28);}
#gallery-area .image-popup{height: 80vh; top: 5vh; 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: 90vh; font-size:calc(var(--font-base) * 1.4); white-space: nowrap; transform: translate(-50%, -50%); z-index: 20;}
#gallery-area .title-popup.disabled{display: none;}

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

.main-visual-maneater{width: 90%; left: 5%; height: auto;}
.caption-maneater{width: 100%;}
.screenshots-maneater{width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
.screenshots-maneater .image-full{width: 30%; cursor: pointer;}

#game-area-maneater .link-button{position: relative; width: 60%; left: 20%;}
#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;}