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

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

.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) * 2.0);}
.subtitle{font-size: calc(var(--font-base) * 1.4);}
.paragraph{font-size: calc(var(--font-base) * 1.0);}

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

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

.link-button{background: linear-gradient(135deg, rgb(201, 107, 0), rgb(201, 107, 0));}
.link-button-cover{background-color: rgb(255, 243, 203);}
.link-button p{transition: 0.4s;}
.link-button:hover p{color: rgb(255, 243, 203);}

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

.logo{
	width: 50%;
	top: 50%; left: 50%;
	opacity: 0;
	transform-origin: center;
	transform: scale(1,1) translate(-50%,-50%);
	animation: logo 0.8s forwards ease-in;
	animation-delay: 1.2s;
}
.notion{
	top: 64%; left: 50%;
	opacity: 0;
	transform: scale(1,1) translate(-50%,-50%);
	animation: notion 1.2s forwards ease-in;
	animation-delay: 2.0s;
}