:root {
	--content-width: 72vw;
	--content-left: calc(50% - var(--content-width) / 2);
	--font-base: calc(var(--content-width) * 0.02);
}

body{
	background-image: url(img/background_.png);
	background-size: cover;
	background-attachment: fixed;
	background-clip: content-box;
	background-position: center;
	margin: 0;
}

div{margin:0;}
span{display: inline-block;}
a{color: inherit; text-decoration: none;}
button {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	outline: none;
	border-radius: 0;
}

.area{
	display: block;
	position: relative;
	width: var(--content-width);
	left: var(--content-left);
	overflow: hidden;
	margin-bottom: calc(var(--content-width) * 0.04);
}
.inner-area{display: block; position: absolute;}
.image{display: block; position: absolute; object-fit: cover;}
.fiximage{ display: block; position: fixed; object-fit: cover; user-select: none;}

.fill{width: 100%; height: 100%;}
.centered{left: 50%; transform: translate(-50%,0); text-align: center;}
.no-margin{margin: 0;}

.sans{
	font-size: var(--font-base);
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.serif{
	font-size: var(--font-base);
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
}
.title{font-size: calc(var(--font-base) * 1.5);}
.subtitle{font-size: calc(var(--font-base) * 1.1);}
.paragraph{font-size: calc(var(--font-base) * 0.7);}
.small-paragraph{font-size: calc(var(--font-base) * 0.6);}
.heading{
	font-size: calc(var(--font-base) * 1.6);
	border-left:10px solid rgb(255, 203, 107); padding:10px 8px;
	margin-top: calc(var(--content-width) * 0.1);
}
.heading2{
	font-size: calc(var(--font-base) * 1.6);
	border-left:10px solid rgb(255, 203, 107); padding:10px 8px;
	margin-top: calc(var(--content-width) * 0.06);
}
.black{color: black;}
.white{color: white;}
.red{color: rgb(255, 128, 86);}

#top{margin-bottom: calc(var(--content-width) * 0.04);}

.header{
	display: block;
	position: relative;
	width: 80vw;
	height: calc(var(--content-width) * 0.16);
	top: 0;
	left: 10vw;
	margin-bottom: calc(var(--content-width) * 0.04);
	text-align: center;
	pointer-events: none;
}
.header p{display: block; position: absolute; margin: 0; pointer-events: auto;}
#header-logo{
	height: 100%;
	top: 0; left: 0;
	pointer-events: auto;
}
.header-link{
	font-size: calc(var(--font-base) * 0.7);
	top: 70%; width: 10%;
	white-space: nowrap;
}
#header-link1{left: 30%;}
#header-link2{left: 40%;}
#header-link3{left: 50%;}
#header-link4{left: 60%;}
#header-link5{left: 70%;}
#header-link6{left: 80%;}
.symbol{
	width: 6%;
	top: 26%;
	animation: tremble 2s ease-in-out infinite;
	transform-origin: 50% 50%;
	pointer-events: auto;
}
#header-symbol1{left: 32%;}
#header-symbol2{left: 42%;}
#header-symbol3{left: 52%;}
#header-symbol4{left: 62%;}
#header-symbol5{left: 72%;}
#header-symbol6{left: 82%;}
.header-social-icon{
	display: block; position: absolute;
	width: 8%; height: 6.4vw;
	left: 92%; top: 20%;
	background-color: white; border-radius: calc(var(--content-width) * 0.01);
	pointer-events: auto;
}
.header-social-icon .image{
	width: 60%; left: 20%; top: 20%;
}

@keyframes tremble {
	0% {rotate: 0deg;}
	7.5% {rotate: 15deg;}
	22.5% {rotate: -15deg;}
	37.5% {rotate: 15deg;}
	45% {rotate: 0deg;}
	100% {rotate: 0deg;}
}

#logo-area{height: calc(var(--content-width) * 0.32);}
#logo-area .image{
	width: 70%; left: 15%; height: calc(var(--content-width) * 0.30);
	pointer-events: none;
	user-select: none;
}

#concept-area{height: calc(var(--content-width) * 0.7); margin-bottom: 0;}
#concept-area p{margin: 0; padding: 0;}
#concept-title{top: 10%; left: 5%;}
#concept-children{top: 8%; left: 40%; transform: translate(0,-50%); color: rgb(192, 192, 12);}
#concept-curiosity{top: 12%; left: 40%; transform: translate(0,-50%); color: rgb(197, 146, 52);}
#concept-challenge{top: 16%; left: 40%; transform: translate(0,-50%); color: rgb(167, 63, 63);}
#concept-communication{top: 20%; left: 40%; transform: translate(0,-50%); color: rgb(45, 88, 122);}
#concept-cozy{top: 24%; left: 40%; transform: translate(0,-50%); color: rgb(79, 155, 79);}
#concept-paragraph1{top: 8%; left: 60%; transform: translate(0,-50%);}
#concept-paragraph2{top: 12%; left: 60%; transform: translate(0,-50%);}
#concept-paragraph3{top: 16%; left: 60%; transform: translate(0,-50%);}
#concept-paragraph4{top: 20%; left: 60%; transform: translate(0,-50%);}
#concept-paragraph5{top: 24%; left: 60%; transform: translate(0,-50%);}
#concept-paragraph8{top: 87%; left: 5%;}

#overview-area {overflow: hidden; background-color: rgb(197, 245, 255);}
#overview-area p{display: block; position: relative; margin: 0;}
#overview-area table{
	display: block; position: relative;
	background-color: rgb(236, 252, 255);
	width: calc(var(--content-width) * 0.72); left: calc(var(--content-width) * 0.14);
	margin: 0 0 calc(var(--content-width) * 0.04) 0;
	border-collapse: collapse;
}
#overview-area p.title{left: 14%; margin: calc(var(--content-width) * 0.04) 0 calc(var(--content-width) * 0.01) 0;}
#overview-table th{
	border: calc(var(--font-base) * 0.1) solid dimgray;
	width: calc(var(--content-width) * 0.18);
}
#overview-table td{
	border: calc(var(--font-base) * 0.1) solid dimgray;
	width: calc(var(--content-width) * 0.54);
	padding: calc(var(--font-base) * 0.2) calc(var(--font-base) * 0.4);
}
#overview-area div.paragraph{
	display: block; position: relative;
	margin: 0 0 calc(var(--content-width) * 0.04) 0;
	left: 14%; width: 72%;
}
#access-map{
	display: block; position: relative;
	width: 72%; left: 14%; height: calc(var(--content-width) * 0.48);
	margin-bottom: calc(var(--content-width) * 0.04);
}

#footer-area{
	background-color: #55c4f8;
	width: 100%; left: 0;
	margin-bottom: 0;
}
#footer-paragraph{
	display: block; position: relative;
	top: calc(var(--content-width) * 0.03); height: calc(var(--content-width) * 0.18);
}
#footer-area .paragraph{
	display: block; position: relative;
	margin: 0 calc(var(--content-width) * 0.01) 0 0;
	left: calc(var(--content-left) + var(--content-width) * 0.30);
}

#service-image-area{
	height: calc(var(--content-width) * 0.5);
}
#service-image-area .image{
	width: calc(var(--content-width) * 0.2); height: calc(var(--content-width) * 0.25);
}
#service-image1{ left: 10%; top: 0;}
#service-image2{ left: 30%; top: 0;}
#service-image3{ left: 50%; top: 0;}
#service-image4{ left: 70%; top: 0;}
#service-image5{ left: 10%; top: calc(var(--content-width) * 0.25);}
#service-image6{ left: 30%; top: calc(var(--content-width) * 0.25);}
#service-image7{ left: 50%; top: calc(var(--content-width) * 0.25);}
#service-image8{ left: 70%; top: calc(var(--content-width) * 0.25);}

#activity-area{
	height: calc(var(--content-width) * 0.6);
	background-color: rgb(197, 245, 255);
	border-radius: calc(var(--content-width) * 0.01);
}
#activity-area p.title{
	display: block; position: relative;
	left: 50%;
}
#activity-area p.subtitle{
	display: block; position: relative;
	left: 50%;
}
#activity-area .paragraph{
	display: block; position: relative;
	padding: 0 calc(var(--font-base) * 1.2) 0 calc(var(--font-base) * 1.2);
}
.activity-block{
	display: block; position: absolute;
	width: 28%; height: 35%;
	background-color: rgb(236, 252, 255);
	border-radius: calc(var(--content-width) * 0.01);
}
#activity-annual{left: 4%; top: 20%;}
#activity-communication{left: 36%; top: 20%;}
#activity-outdoor{left: 68%; top: 20%;}
#activity-creation{left: 4%; top: 60%;}
#activity-daily{left: 36%; top: 60%;}
#activity-learning{left: 68%; top: 60%;}

#service-area p.title{
	display: block; position: relative;
	left: 10%; margin: calc(var(--content-width) * 0.04) 0 calc(var(--content-width) * 0.01) 0;
}
#service-area p.subtitle{
	display: block; position: relative;
	left: 15%; margin: calc(var(--content-width) * 0.02) 0 calc(var(--content-width) * 0.01) 0;
}
#service-area div.paragraph{
	display: block; position: relative;
	margin: 0 0 calc(var(--content-width) * 0.04) 0;
	left: 20%; width: 60%;
}

#daily-area p.title{
	display: block; position: relative;
	left: 0; margin: calc(var(--content-width) * 0.04) 0 calc(var(--content-width) * 0.01) 0;
}
#daily-area .image{
	display: inline-block; position: relative;
	width: 30%;
}

#process-area p.title{
	display: block; position: relative;
	left: 10%; margin: calc(var(--content-width) * 0.04) 0 calc(var(--content-width) * 0.01) 0;
}
#process-area p.subtitle{
	display: block; position: relative;
	left: 15%; margin: calc(var(--content-width) * 0.02) 0 calc(var(--content-width) * 0.01) 0;
}
#process-area div.paragraph{
	display: block; position: relative;
	margin: 0 0 calc(var(--content-width) * 0.04) 0;
	left: 20%; width: 60%;
}
#process-area a{color: steelblue;}

#staff-area{
	height: calc(var(--content-width) * 1.2);
}
#staff-area .title{
	display: block; position: absolute;
	width: 100%; text-align: center;
}
#staff-area .image{width: 16%;}
#staff-area .paragraph{
	display: block; position: absolute;
	width: 18%;
}
#staff-image1{ top: calc(var(--content-width) * 0.12); left: 12% }
#staff-paragraph1{ top: calc(var(--content-width) * 0.36); left: 12%; }
#staff-image2{ top: calc(var(--content-width) * 0.12); left: 32% }
#staff-paragraph2{ top: calc(var(--content-width) * 0.36); left: 32%; }
#staff-image3{ top: calc(var(--content-width) * 0.12); left: 52% }
#staff-paragraph3{ top: calc(var(--content-width) * 0.36); left: 52%; }
#staff-image4{ top: calc(var(--content-width) * 0.12); left: 72% }
#staff-paragraph4{ top: calc(var(--content-width) * 0.36); left: 72%; }
#staff-image5{ top: calc(var(--content-width) * 0.6); left: 22% }
#staff-paragraph5{ top: calc(var(--content-width) * 0.84); left: 22%; }
#staff-image6{ top: calc(var(--content-width) * 0.6); left: 42% }
#staff-paragraph6{ top: calc(var(--content-width) * 0.84); left: 42%; }
#staff-image7{ top: calc(var(--content-width) * 0.6); left: 62% }
#staff-paragraph7{ top: calc(var(--content-width) * 0.84);left: 62%; }
#staff-area div#staff-paragraph8{ width: 50%; left: 25%; top: calc(var(--content-width) * 1.08);}

#management-area p.title{
	display: block; position: relative;
	left: 10%; margin: calc(var(--content-width) * 0.04) 0 calc(var(--content-width) * 0.01) 0;
}
#management-area p.paragraph{
	display: block; position: relative;
	left: 15%; margin: calc(var(--content-width) * 0.02) 0 calc(var(--content-width) * 0.01) 0;
}
#management-area a{color: steelblue;}

.side-menu{display: none;}
.side-menu-btn{display: none;}