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

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

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) * 3.2);}
.subtitle{font-size: calc(var(--font-base) * 2.2);}
.paragraph{font-size: calc(var(--font-base) * 1.4);}
.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: var(--content-width);
	height: calc(var(--content-width) * 1);
	top: 0;
	left: var(--content-left);
	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{
	width: 80%;
	top: 0%; left: 5%;
	pointer-events: auto;
}
.header-link{
	font-size: calc(var(--font-base) * 1.6);
	width: 28%;
}
#header-link1{top: 56%; left: 4%;}
#header-link2{top: 56%; left: 36%;}
#header-link3{top: 56%; left: 68%;}
#header-link4{top: 92%; left: 4%;}
#header-link5{top: 92%; left: 36%;}
#header-link6{top: 92%; left: 68%;}
.symbol{
	width: calc(var(--content-width) * 0.16);
	height: calc(var(--content-width) * 0.16);
	animation: tremble 2s ease-in-out infinite;
	transform-origin: 50% 50%;
	pointer-events: auto;
}
#header-symbol1{top: 36%; left: 10%;}
#header-symbol2{top: 36%; left: 42%;}
#header-symbol3{top: 36%; left: 74%;}
#header-symbol4{top: 72%; left: 10%;}
#header-symbol5{top: 72%; left: 42%;}
#header-symbol6{top: 72%; left: 74%;}
.header-social-icon{
	display: block; position: absolute;
	width: calc(var(--content-width) * 0.14); height: calc(var(--content-width) * 0.14);
	left: calc(var(--content-left) + var(--content-width) * 0.82); top: calc(var(--content-width) * 0.16);
	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{display:none;}

#concept-area{height: calc(var(--content-width) * 2); margin-bottom: 0;}
#concept-area p{margin: 0; padding: 0; line-height: 1.1;}
#concept-area .image{object-position: 40% 50%;}
#concept-title{font-size: calc(var(--font-base) * 4); top: 2%; left: 7%;}
#concept-area .paragraph{font-size: calc(var(--font-base) * 1.3);}
#concept-children{top: 14%; left: 7%; transform: translate(0,-50%); color: rgb(192, 192, 12);}
#concept-curiosity{top: 18%; left: 7%; transform: translate(0,-50%); color: rgb(197, 146, 52);}
#concept-challenge{top: 22%; left: 7%; transform: translate(0,-50%); color: rgb(167, 63, 63);}
#concept-communication{top: 26%; left: 7%; transform: translate(0,-50%); color: rgb(45, 88, 122);}
#concept-cozy{top: 30%; left: 7%; transform: translate(0,-50%); color: rgb(79, 155, 79);}
#concept-paragraph1{top: 14%; left: 29%; transform: translate(0,-50%);}
#concept-paragraph2{top: 18%; left: 31%; transform: translate(0,-50%);}
#concept-paragraph3{top: 22%; left: 32%; transform: translate(0,-50%);}
#concept-paragraph4{top: 26%; left: 42%; transform: translate(0,-50%);}
#concept-paragraph5{top: 30%; left: 20%; transform: translate(0,-50%);}
#concept-paragraph8{top: 85%; left: 28%;}

#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.80); left: calc(var(--content-width) * 0.10);
	margin: 0 0 calc(var(--content-width) * 0.04) 0;
	border-collapse: collapse;
}
#overview-area p.title{left: 10%; 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.20);
}
#overview-table td{
	border: calc(var(--font-base) * 0.1) solid dimgray;
	width: calc(var(--content-width) * 0.60);
	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: 10%; width: 80%;
}
#access-map{
	display: block; position: relative;
	width: 80%; left: 10%; 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.06); height: calc(var(--content-width) * 0.4);
}
#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.10);
	width: 80%;
}

#service-image-area{
	height: calc(var(--content-width) * 0.7);
}
#service-image-area .image{
	width: calc(var(--content-width) * 0.25); height: calc(var(--content-width) * 0.35);
}
#service-image1{ left: 0%; top: 0;}
#service-image2{ left: 25%; top: 0;}
#service-image3{ left: 50%; top: 0;}
#service-image4{ left: 75%; top: 0;}
#service-image5{ left: 0%; top: calc(var(--content-width) * 0.35);}
#service-image6{ left: 25%; top: calc(var(--content-width) * 0.35);}
#service-image7{ left: 50%; top: calc(var(--content-width) * 0.35);}
#service-image8{ left: 75%; top: calc(var(--content-width) * 0.35);}

#activity-area{
	height: calc(var(--content-width) * 1.4);
	background-color: rgb(197, 245, 255);
	border-radius: calc(var(--content-width) * 0.02);
}
#activity-area p.title{
	display: block; position: relative;
	left: 50%; margin: calc(var(--content-width) * 0.02) 0 0 0;
}
#activity-area p.subtitle{
	display: block; position: relative;
	left: 50%;
}
#activity-area .paragraph{
	display: block; position: relative;
	font-size: calc(var(--font-base) * 1.3);
	padding: 0 calc(var(--font-base) * 1.2) 0 calc(var(--font-base) * 1.2);
}
.activity-block{
	display: block; position: absolute;
	width: 48%; height: 28%;
	background-color: rgb(236, 252, 255);
	border-radius: calc(var(--content-width) * 0.02);
}
#activity-annual{left: 1%; top: 10%;}
#activity-communication{left: 51%; top: 10%;}
#activity-outdoor{left: 1%; top: 40%;}
#activity-creation{left: 51%; top: 40%;}
#activity-daily{left: 1%; top: 70%;}
#activity-learning{left: 51%; top: 70%;}

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

#daily-area p.title{
	display: block; position: relative;
	left: 6%; margin: calc(var(--content-width) * 0.08) 0 calc(var(--content-width) * 0.02) 0;
}
#daily-area .image{
	display: block; position: relative;
	width: 80%; left: 10%;
}

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

#staff-area{
	height: calc(var(--content-width) * 3.84);
}
#staff-area .title{
	display: block; position: absolute;
	width: 100%; text-align: center;
}
#staff-area .image{width: 32%;}
#staff-area .paragraph{
	display: block; position: absolute;
	font-size: calc(var(--font-base) * 1.3);
	width: 36%;
}
#staff-image1{ top: calc(var(--content-width) * 0.24); left: 9% }
#staff-paragraph1{ top: calc(var(--content-width) * 0.72); left: 9%; }
#staff-image2{ top: calc(var(--content-width) * 0.24); left: 59% }
#staff-paragraph2{ top: calc(var(--content-width) * 0.72); left: 59%; }
#staff-image3{ top: calc(var(--content-width) * 1.08); left: 9% }
#staff-paragraph3{ top: calc(var(--content-width) * 1.56); left: 9%; }
#staff-image4{ top: calc(var(--content-width) * 1.08); left: 59% }
#staff-paragraph4{ top: calc(var(--content-width) * 1.56); left: 59%; }
#staff-image5{ top: calc(var(--content-width) * 1.92); left: 9% }
#staff-paragraph5{ top: calc(var(--content-width) * 2.40); left: 9%; }
#staff-image6{ top: calc(var(--content-width) * 1.92); left: 59% }
#staff-paragraph6{ top: calc(var(--content-width) * 2.40); left: 59%; }
#staff-image7{ top: calc(var(--content-width) * 2.76); left: 9% }
#staff-paragraph7{ top: calc(var(--content-width) * 3.24);left: 9%; }
#staff-area div#staff-paragraph8{ width: 60%; left: 20%; top: calc(var(--content-width) * 3.6);}

#management-area p{
	display: block; position: relative;
	margin: calc(var(--content-width) * 0.08);
	left: 14%;
}
#management-area a{color: steelblue;}

body.side-open{overflow-y:hidden;}

.side-open .overlay {
	transform: translate3d(-60%, 0, 0);
}

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

.side-menu{
	position: fixed;
	top: 0;
	right: -60%;
	width: 60%;
	height: 100%;
	padding-top: 5%;
	text-align: left;
	background: #55c4f8;
	z-index: 1;
	transition: all .5s ease;
}
.side-open .side-menu{
	right: 0;
	transition: all .5s ease;
}

.side-menu-ul{
	width: 100%;
	height: 90%;
	display: block;
	overflow-x: hidden;
	overflow-y: scroll;
	list-style-type: none;
}
.side-menu-ul li{
	padding: calc(var(--font-base) * 2) calc(var(--font-base) * 1);
}

.side-menu-btn {
	position: fixed;
	top: calc(var(--font-base) * 1);
	right: calc(var(--font-base) * 1);
	width: calc(var(--font-base) * 6);
	height: calc(var(--font-base) * 6);
	padding: 0;
	cursor: pointer;
	z-index: 4;
	background: rgba(255, 255, 255, 0.9);
}
.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: #333;
	transition: all .3s;
}

.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: 1px;
	background: #fff;
	transform-origin: left top;
	transform: rotate(45deg);
}

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

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left bottom;
	transform: rotate(-45deg);
	}

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