:root {
	--content-width: 70vw;
	--font-base: calc(var(--content-width) * 0.02);
	--margin-base: calc(var(--content-width) * 0.08);
	--offset-base: 6px;
}

body{
	background-image: url(img/background.png);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

.sans{
	font-size: var(--font-base);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.serif{
	font-size: var(--font-base);
	font-family: "Noto Serif JP", 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) * 1.8);}
.subtitle{font-size: calc(var(--font-base) * 1.2);}
.paragraph{font-size: calc(var(--font-base) * 0.9);}

.decorated-link{color: rgb(61, 128, 172); cursor: pointer;}
th.decorated-link{color: rgb(241, 217, 79);}

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(67, 116, 161); color: white;
}
table td{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(180, 219, 224);
}
table tr:nth-child(2n) th {
	background-color: rgb(95, 140, 182);
}
table tr:nth-child(2n+1) td {
	background-color: rgb(196, 227, 231);
}

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) * 1.0);
}
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) * 1.0);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	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) * 1.0);
	background-color: white;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
}
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) * 1.0);
	margin-right: calc(var(--font-base) * 0.5);
}
form .uploader{
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 0.9);
}
form label{
	padding: 0 calc(var(--font-base) * 2) 0 calc(var(--font-base) * 0.5);
	font-size: calc(var(--font-base) * 0.9);
}
form button{
	width: calc(var(--content-width) * 0.20); left: calc(var(--content-width) * 0.40);
	height: calc(var(--content-width) * 0.08);
	background-color: rgb(95, 140, 182); color: white;
	margin-top: calc(var(--content-width) * 0.04);
	margin-bottom: calc(var(--content-width) * 0.04);
	transition: 0.4s;
}
form button p{
	display: block; position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
}
form button:hover{background-color: rgb(223, 135, 157); color: white;}

.whiteblock{background-color: rgba(255, 254, 247, 0.8);}

.link-button{background: linear-gradient(135deg, rgb(134, 181, 212), rgb(86, 137, 170));}
.link-button-cover{background-color: rgb(224, 245, 255);}
.link-button p{transition: 0.4s;}
.link-button:hover p{color: white;}

.twoblock-visual .image{border-radius: calc(var(--font-base) * 0.3);}

div#game-container{
	display: block; position: fixed;
/*	width: var(--content-width);
	height: calc(var(--content-width) * 0.5625);
	top: 50%; left: 50%; transform: translate(-50%, -50%);*/
}

.puzzle-list{display: flex; position: relative; width: 90%; left: 5%;}
.puzzle-container{
	display: inline-block; position: relative; width: 30%; height: calc(var(--content-width) * 0.40);
	margin-left: 1.6%; margin-right: 1.6%; margin-bottom: calc(var(--margin-base) * 1);
}
.puzzle-thumbs{width: 100%; height: calc(var(--content-width) * 0.27);}
.puzzle-form{display: block; position: absolute; width: 100%; height: calc(var(--content-width) * 0.10); top: calc(var(--content-width) * 0.27);}
.puzzle-form button{width: 60%; height: 60%; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0;}
.puzzle-form button p{white-space: nowrap;}

.back-form{display: block; position: fixed; width: calc(var(--content-width) * 0.08); height: calc(var(--content-width) * 0.08); top: 0; right: 0;}
.back-form button{background-color: transparent; margin: 0;}
.back-form button:hover{background-color: transparent; margin: 0;}

.puzzle-new-form button{height: calc(var(--content-width) * 0.06);}
.puzzle-new-form button p{white-space: nowrap;}

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

.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: 20;
}
.side-open .overlay {
	visibility: visible; cursor: pointer;
	background: rgba(0,0,0,.2);
	transition: all .5s ease;
}

.side-menu{
	display: block; position: fixed;
	width: 40%; height: 100%; top: 0; right: -40%;
	text-align: left;
	background: linear-gradient(135deg, rgb(89, 167, 212), rgb(79, 121, 146));
	z-index: 21;
	transition: all .5s ease;
}
.side-open .side-menu{
	right: 0;
	transition: all .5s ease;
}

.side-menu-ul{
	position: absolute;
	width: 100%;
	height: 90%;
	top: 5%;
	overflow-x: hidden;
	overflow-y: scroll;
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.side-menu-ul::-webkit-scrollbar{
	display: none;
}
.side-menu-ul li{
	display: block; position: relative;
	height: 9%;
	padding: 0 calc(var(--font-base) * 1.2);
}
.side-menu-ul li.margin-top{margin-top: 5%;}
.side-menu-ul li p{display: block; position: absolute; top: 50%; transform: translate(0,-50%); padding: 0 calc(var(--font-base) * 1.2); font-size: calc(var(--font-base) * 1.1);}
.side-menu-ul li p.title{font-size: calc(var(--font-base) * 1.4);}
.side-menu-ul li p.category{padding: 0 0;}
.side-menu-ul .decorated-link{color: rgb(205, 226, 245); transition: all .4s;}
.side-menu-ul .decorated-link:hover{color: white;}

.side-menu-btn {
	display: block; position: fixed;
	top: calc(var(--font-base) * 1);
	right: calc(var(--font-base) * 1);
	width: calc(var(--font-base) * 2.5);
	height: calc(var(--font-base) * 2.5);
	padding: 0;
	cursor: pointer;
	z-index: 24;
	background: rgb(100,100,100);
}
.side-open .side-menu-btn{
	background: none;
}

.ellipsis-v {
	position: relative;
	display: block;
	cursor: pointer;
	width: 50%;
	left: 25%;
	height: 50%;
	top: 25%;
}

.ellipsis-v .point {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 4px;
	margin: auto;
	background: white;
	transition: all .4s;
}

.ellipsis-v .point.top {
	top: 0;
}

.ellipsis-v .point.mid {
	top: 0;
	bottom: 0;
}

.ellipsis-v .point.bot {
	bottom: 0;
}

.side-open .side-menu-btn:hover .top,
.side-open .top {
	width: 140%;
	height: 4px;
	background: rgb(205, 226, 245);
	transform-origin: left top;
	transform: rotate(45deg) translate(0, -2px);
}

.side-open .mid {
	opacity: 0;
}

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	width: 140%;
	height: 4px;
	background: rgb(205, 226, 245);
	transform-origin: left bottom;
	transform: rotate(-45deg) translate(0, 1px);
	}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
	background: white;
}

.logo-pc{width: 40%; left: 30%; margin-top: calc(var(--margin-base) * 1); margin-bottom: calc(var(--margin-base) * 1);}
.logo-sp{display: none;}

#concept-area p{width: 64%; left: 50%; transform: translate(-50%,0);}

.group-image{width: calc(var(--content-width) * 0.7); left: calc(var(--content-width) * 0.15); height: calc(var(--content-width) * 0.7); pointer-events: none;}
.group-center{width: calc(var(--content-width) * 0.24); height: calc(var(--content-width) * 0.18); left: calc(var(--content-width) * 0.23); top: calc(var(--content-width) * 0.26);}
.group-ring{width: calc(var(--content-width) * 0.5); left: calc(var(--content-width) * 0.1); top: calc(var(--content-width) * 0.1);}
.group-box{width: calc(var(--content-width) * 0.14); height: calc(var(--content-width) * 0.07);}
.group-box1{left: calc(var(--content-width) * (0.35 - 0.07)); top: calc(var(--content-width) * (0.12 - 0.035));}
.group-box2{left: calc(var(--content-width) * (0.16 - 0.07)); top: calc(var(--content-width) * (0.20 - 0.035));}
.group-box3{left: calc(var(--content-width) * (0.09 - 0.07)); top: calc(var(--content-width) * (0.35 - 0.035));}
.group-box4{left: calc(var(--content-width) * (0.16 - 0.07)); top: calc(var(--content-width) * (0.50 - 0.035));}
.group-box5{left: calc(var(--content-width) * (0.35 - 0.07)); top: calc(var(--content-width) * (0.58 - 0.035));}
.group-box6{left: calc(var(--content-width) * (0.54 - 0.07)); top: calc(var(--content-width) * (0.50 - 0.035));}
.group-box7{left: calc(var(--content-width) * (0.61 - 0.07)); top: calc(var(--content-width) * (0.35 - 0.035));}
.group-box8{left: calc(var(--content-width) * (0.54 - 0.07)); top: calc(var(--content-width) * (0.20 - 0.035));}

#concept-area p.indent-left{width: 56%;}

.tool-image{width: 100%; height: calc(var(--content-width) * 0.7);}
.tool-image .image{width: 48%; left: 8%; top: 50%; transform: translate(0,-50%);}
#concept-area .tool-image p{width: 32%; left: 60%; top: 50%; transform: translate(0,-50%);}

#concept-area .link-button{width: 30%; left: 35%; height: calc(var(--content-width) * 0.06);}
#concept-area .link-button p{width: auto; left: 50%; transform: translate(-50%,-50%);}

#product-area p{width: 64%; left: 50%; transform: translate(-50%,0);}

#hearing-area p{width: 88%; left: 50%; transform: translate(-50%,0);}
#hearing-area table p{width: 96%;}
#hearing-area form button p{transform: translate(-50%,-50%);}

#complete-area .link-button{width: 30%; left: 35%; height: calc(var(--content-width) * 0.06);}

#puzzle-explanation-area .indent{width: 76%; left: 12%;}
#puzzle-explanation-area .image-relative{width: 70%; left: 15%;}

#login-area .indent{width: 76%; left: 12%;}
#login-area form table{width: 76%; left: 12%;}
#login-area form .full-input{
	width: calc(var(--font-base) * 20);
}
#login-area form button{
	width: calc(var(--content-width) * 0.20); left: calc(var(--content-width) * 0.40);
	height: calc(var(--content-width) * 0.06);
}