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

div{margin: 0;}
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;
	overflow: hidden;
	width: var(--content-width);
	left: var(--content-left);
	margin-top: calc(var(--content-width) * 0.00);
	margin-bottom: calc(var(--content-width) * 0.20);
}
.area-front{
	display: block;
	position: relative;
	overflow: hidden;
	width: var(--content-width);
	left: var(--content-left);
	margin-top: calc(var(--content-width) * 0.06);
	margin-bottom: calc(var(--content-width) * 0.30);
}
.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: "Zen Maru Gothic", 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;
}

html{scrollbar-width: none;}
body{
	background: radial-gradient(ellipse farthest-corner at top center,lightskyblue, mintcream);
	background-size: cover;
	background-attachment: fixed;
	background-clip: content-box;
	background-position: center;
	margin: 0;
}
body::-webkit-scrollbar{display: none;}

.title{font-size: calc(var(--font-base) * 3.4);}
.subtitle{font-size: calc(var(--font-base) * 2.4);}
.paragraph{font-size: calc(var(--font-base) * 1.7);}
.black{color: black;}
.white{color: white;}
.skyblue{color: steelblue;}
.gray{color: dimgray;}
.pink{color: rgb(197, 105, 139);}

#background1{width: 25%; top: 0; left: 100%; translate: -100% 0;}
#background2{width: 25%; top: 100%; left: 0; translate: 0 -100%;}
#particle1{width: 20%; top: 30%; left: 20%; translate: -50% -50%; opacity: 0.6;}
#particle2{width: 20%; top: 50%; left: 75%; translate: -50% -50%; opacity: 0.6;}
#leaf1{width: 15%; top: 55%; left: 45%; translate: -50% -50%; opacity: 0.6;}
#leaf2{width: 15%; top: 80%; left: 90%; translate: -50% -50%; opacity: 0.6;}

.header{
	position: fixed;
	display: block;
	width: var(--content-width);
	height: calc(var(--content-width) * 0.16);
	top:0;
	left: var(--content-left);
	text-align: center;
	pointer-events: none;
	z-index: 15;
}
.header p{display: block; position: absolute; margin: 0; pointer-events: auto;}
#header-title1{
	width: 50%;
	top: calc(var(--font-base) * 1.0); left: 50%; transform: translate(-50%,0);
	font-size: calc(var(--font-base) * 2);
}
#header-title2{
	width: 50%;
	top: calc(var(--font-base) * 3.0); left: 50%; transform: translate(-50%,0);
	font-size: calc(var(--font-base) * 4);
	letter-spacing: calc(var(--font-base) * 0.6);
}
.header-link{
	display: none;
	font-size: calc(var(--font-base) * 0.7);
	top: calc(var(--font-base) * 2); left: 30%;
}
#header-link1{display: none; width: calc(var(--font-base) * (0.7 * 6 + 2)); margin: 0 calc(var(--font-base) * (0.7 * 4 + 2));}
#header-link2{display: none; width: calc(var(--font-base) * (0.7 * 4 + 2)); margin: 0 calc(var(--font-base) * (0.7 * 6 + 2));}
#header-link3{display: none; width: calc(var(--font-base) * (0.7 * 4 + 2)); margin: 0 calc(var(--font-base) * (0.7 * 10 + 4));}
#header-link4{display: none; width: calc(var(--font-base) * (0.7 * 5 + 2)); margin: 0 calc(var(--font-base) * (0.7 * 14 + 6));}
#header-link5{display: none; width: calc(var(--font-base) * (0.7 * 4 + 2)); margin: 0 calc(var(--font-base) * (0.7 * 19 + 8));}
#header-link6{display: none; width: calc(var(--font-base) * (0.7 * 6 + 2)); margin: 0 calc(var(--font-base) * (0.7 * 23 + 10));}

.symbol{
	width: calc(var(--content-width) * 0.16);
	left: calc(var(--content-width) * 0.08);
	animation: tremble 2s ease-in-out infinite;
	transform-origin: 50% 50%;
}

#dragonfly{
	position: fixed;
	width: calc(var(--content-width) * 0.20);
	z-index: 14;
	top: 76%; left: 6%;
	animation: turn 8s ease-in-out infinite, rush 8s ease-in-out infinite;
	transform-origin: 50% 50%;
}

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

@keyframes turn {
	0% {scale: 1 1;}
	6% {scale: -1 1;}
	12% {scale: 1 1;}
	18% {scale: -1 1;}
	50% {scale: -1 1;}
	51% {scale: 1 1;}
	100% {scale: 1 1;}
}

@keyframes rush {
	0% {margin: 0 0;}
	30% {margin: 0 0;}
	40% {margin: 0 100vw;}
	60% {margin: 0 100vw;}
	70% {margin: 0 0;}
	100% {margin: 0 0;}
}

#top{height: calc(var(--content-width) * 0.16);}
#title-area{display: none;}
#title-area-sp{height: calc(var(--content-width) * 1.2);}
#title-bg1{z-index: 1;}
#title-bg2{
	z-index: 2;
	opacity: 0;
	animation:
	switch linear 16s infinite;
}

@keyframes switch{
	0% {opacity: 0;}
	35% {opacity: 0;}
	40% {opacity: 1;}
	85% {opacity: 1;}
	90% {opacity: 0;}
}
@keyframes crossfade3{
	0% {opacity: 0;}
	25% {opacity: 0;}
	33% {opacity: 1;}
	55% {opacity: 1;}
	58% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes fade_in_out{
	0% {opacity: 0;}
	8.5% {opacity: 0;}
	12.5% {opacity: 1;}
	21% {opacity: 1;}
	25% {opacity: 0;}
	100% {opacity: 0;}
}
.cube{
	width: calc(var(--content-width) * 0.5 + 1px);
	height: calc(var(--content-width) * 0.4 + 1px);
	z-index: 5;
	opacity: 0;
	animation:
	fade_in_out linear 32s infinite;
}

.orange{background-color: sandybrown;}
.blue{background-color: skyblue;}
.yellow{background-color: lemonchiffon;}
.green{background-color:palegreen;}
.red{background-color: lightcoral;}
.cyan{background-color: lightcyan;}

#cube1-1a{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.0); animation-delay: 0.4s;}
#cube1-2a{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.5); animation-delay: 0.2s;}
#cube2-1a{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.0); animation-delay: 0.5s;}
#cube2-2a{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.5); animation-delay: 0s;}
#cube3-1a{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.0); animation-delay: 0.6s;}
#cube3-2a{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.5); animation-delay: 0.3s;}
#cube1-1b{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.0); animation-delay: 8.6s;}
#cube1-2b{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.5); animation-delay: 8.1s;}
#cube2-1b{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.0); animation-delay: 8.8s;}
#cube2-2b{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.5); animation-delay: 8.2s;}
#cube3-1b{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.0); animation-delay: 8s;}
#cube3-2b{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.5); animation-delay: 8.4s;}
#cube1-1c{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.0); animation-delay: 16.9s;}
#cube1-2c{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.5); animation-delay: 16.1s;}
#cube2-1c{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.0); animation-delay: 16.5s;}
#cube2-2c{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.5); animation-delay: 16s;}
#cube3-1c{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.0); animation-delay: 16.2s;}
#cube3-2c{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.5); animation-delay: 16.5s;}
#cube1-1d{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.0); animation-delay: 24.8s;}
#cube1-2d{top: calc(var(--content-width) * 0.0); left: calc(var(--content-width) * 0.5); animation-delay: 24s;}
#cube2-1d{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.0); animation-delay: 24.4s;}
#cube2-2d{top: calc(var(--content-width) * 0.4); left: calc(var(--content-width) * 0.5); animation-delay: 24.2s;}
#cube3-1d{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.0); animation-delay: 24.5s;}
#cube3-2d{top: calc(var(--content-width) * 0.8); left: calc(var(--content-width) * 0.5); animation-delay: 24s;}

#concept-area{height: calc(var(--content-width) * 2.8);}
#concept-image{width: 100%; height: 30%; top: 70%; left: 0%; }
#concept-image1{opacity: 1; z-index: 1;}
#concept-image2{
	opacity: 0;
	z-index: 2;
	animation:
	crossfade3 linear 24s infinite;
	animation-delay: 0s;
}
#concept-image3{
	opacity: 0;
	z-index: 3;
	animation:
	crossfade3 linear 24s infinite;
	animation-delay: 6s;
}
#concept-image4{
	opacity: 0;
	z-index: 4;
	animation:
	crossfade3 linear 24s infinite;
	animation-delay: 12s;
}
#concept-area p{display: block; position: absolute; margin: 0;}
p#concept-title1{display: none;}
#concept-title1-sp{top: 0%; left: 6%;}
p#concept-title2{display: none;}
#concept-title2-sp{top: 8%; left: 38%;}
#concept-subtitle1{top: 20%; left: 2%;}
#concept-paragraph1{top: 24%; left: 4%;}
#concept-subtitle2{top: 36%; left: 2%;}
#concept-paragraph2{top: 40%; left: 4%;}
#concept-subtitle3{top: 52%; left: 2%;}
#concept-paragraph3{top: 56%; left: 4%;}

#news-area{height: calc(var(--content-width) * 2.4);}
#news-area p{display: block; position: absolute; margin: 0;}
#news-title{top: calc(var(--content-width) * 0.03); left: 25%;}
#news-link{top: 6%; left: 96%; transform: translate(-100%,0); white-space: nowrap;}
#news-front{top: 10%; width: 100%; height: 90%; background-color: rgba(215, 246, 255, 0.7);}

#annual-area{height: calc(var(--content-width) * 8);}
#annual-area p{display: block; position: absolute; margin: 0;}
#annual-title{top: calc(var(--content-width) * 0.03); left: 25%;}
.annual-block{width: 80%; height: 8%; display: block; position: absolute;}
.annual-block p{display: block; position: absolute;}
.frame1{width: 100%; height: 100%;}
.frame2{width: 100%; height: 100%; margin: -5% 5%;}
.number{top: 38%; left: 35%; font-size: calc(var(--font-base) * 4); color: forestgreen; transform: translate(-100%,-100%);}
.month{top: 37%; left: 39%; font-size: calc(var(--font-base) * 2.4); color: forestgreen;transform: translate(0,-100%);}
.event{top: 40%; left: 28%; font-size: calc(var(--font-base) * 1.6); color: forestgreen;}
#annual-paragraph1{top: 2%; left: 10%;}
#annual-paragraph2{top: 10%; left: 10%;}
#annual-paragraph3{top: 18%; left: 10%;}
#annual-paragraph4{top: 26%; left: 10%;}
#annual-paragraph5{top: 34%; left: 10%;}
#annual-paragraph6{top: 42%; left: 10%;}
#annual-paragraph7{top: 50%; left: 10%;}
#annual-paragraph8{top: 58%; left: 10%;}
#annual-paragraph9{top: 66%; left: 10%;}
#annual-paragraph10{top: 74%; left: 10%;}
#annual-paragraph11{top: 82%; left: 10%;}
#annual-paragraph12{top: 90%; left: 10%;}

#daily-area{height: calc(var(--content-width) * 3.2);}
#daily-area p{display: block; position: absolute; margin: 0;}
#daily-title{top: calc(var(--content-width) * 0.03); left: 25%;}
#daily-junior-title{top: 5%; left: 50%; transform: translate(-50%,0);}
#daily-senior-title{top: 55%; left: 50%; transform: translate(-50%,0);}
.junior-block{display: block; position: absolute; width: 80%; height: 4.5%; left:10%;}
.junior-block p{display: block; position: absolute; margin: 0;}
.senior-block{display: block; position: absolute; width: 80%; height: 4.5%; left:10%;}
.senior-block p{display: block; position: absolute; margin: 0;}
.time{left: 10%; font-size: calc(var(--font-base) * 2.4); color: steelblue; transform: translate(0,-50%);}
.schedule{left: 30%; font-size: calc(var(--font-base) * 1.8); color: dimgray; transform: translate(0,-50%);}
#daily-junior-paragraph1{top: 10%;}
#daily-junior-paragraph2{top: 14.5%;}
#daily-junior-paragraph3{top: 19%;}
#daily-junior-paragraph4{top: 23.5%;}
#daily-junior-paragraph5{top: 28%;}
#daily-junior-paragraph6{top: 32.5%;}
#daily-junior-paragraph7{top: 37%;}
#daily-junior-paragraph8{top: 41.5%;}
#daily-junior-paragraph9{top: 46%;}
#daily-junior-paragraph10{top: 50.5%;}
#daily-senior-paragraph1{top: 60%;}
#daily-senior-paragraph2{top: 64.5%;}
#daily-senior-paragraph3{top: 69%;}
#daily-senior-paragraph4{top: 73.5%;}
#daily-senior-paragraph5{top: 78%;}
#daily-senior-paragraph6{top: 82.5%;}
#daily-senior-paragraph7{top: 87%;}
#daily-senior-paragraph8{top: 91.5%;}
#daily-senior-paragraph9{top: 96%;}


#access-area{height: calc(var(--content-width) * 0.8);}
#access-area p{display: block; position: absolute; margin: 0;}
#access-title{top: calc(var(--content-width) * 0.03); left: 25%;}
#access-map{
	position: absolute;
	width: 80%;
	height: 76%;
	top: 24%;
	left: 10%;
}

#footer-area{margin-bottom: calc(var(--content-width) * 0.12); overflow: hidden;}
#footer-area p{
	display: block; position: relative;
	text-align: center;
	margin: 0;
	width: 65%;
	left: 50%; transform: translate(-50%,0);
}
#footer-area p.title{letter-spacing: calc(var(--font-base) * 0.4); margin-bottom: calc(var(--content-width) * 0.1);}

#recruit-overview-area{height: calc(var(--content-width) * 2.2);}
#recruit-overview-area p{line-height: 1.8;}
#recruit-overview-area .title{width: 80%; top: 0;}
#recruit-overview-area .image{width: 100%; top: 13%; height: 40%;}
#recruit-work-subtitle{width: 80%; top: 55%;}
#recruit-work-paragraph{width: 80%; top: 61%;}
#recruit-person-subtitle{width: 80%; top: 70%;}
#recruit-person-paragraph{width: 80%; top: 76%;}
#link-button-message{
	width: 60%; height: 8%; left: 20%; top: 86%;
}
#link-button-message .image{
	width: 100%; height: 100%; top: 0;
}
#link-button-message p{
	width: 100%; top: 50%; margin: 0; padding: 0; transform: translate(-50%, -50%); line-height: normal;
}

#detail-area{height: calc(var(--content-width) * 1.3);}
.recruit-detail{
	width: 96%; height: 100%; left: 2%; top: 0;
	background-color: rgb(211, 244, 255);
	border-radius: calc(var(--font-base) * 1);
}
.recruit-detail p{
	margin-top: calc(var(--font-base) * 1.6);
	text-align: center;
}
.recruit-detail table{
	border-collapse: collapse;
	display: block;
	position: absolute;
	margin: auto;
	width: calc(var(--content-width) * 0.8);
	left: calc(var(--content-width) * 0.08);
	top: calc(var(--font-base) * 5);
}
.recruit-detail th{
	border: calc(var(--font-base) * 0.6) solid dimgray;
	min-width: calc(var(--content-width) * 0.2);
	font-size: calc(var(--font-base) * 1.5);
	padding: calc(var(--font-base) * 0.2) calc(var(--font-base) * 0.6);
	color: steelblue;
}
.recruit-detail td{
	border: calc(var(--font-base) * 0.6) solid dimgray;
	min-width: calc(var(--content-width) * 0.5);
	font-size: calc(var(--font-base) * 1.5);
	padding: calc(var(--font-base) * 0.2) calc(var(--font-base) * 0.6);
	color: black;
}

#entry-link-area{
	height: calc(var(--content-width) * 0.176);
	margin-top: calc(var(--content-width) * 0);
	margin-bottom: calc(var(--content-width) * 0.16);
}
#link-button-entry{
	width: 60%; height: 100%; left: 20%; top: 0%;
}
#link-button-entry .image{
	width: 100%; height: 100%;
}
#link-button-entry p{
	width: 100%; top: 50%; margin: 0; padding: 0; transform: translate(-50%, -50%); line-height: normal;
}

#recruit-area{height: calc(var(--content-width) * 0.24); margin-bottom: calc(var(--content-width) * 0.12);}
#recruit-area p{display: block; position: absolute; margin: 0;}
#recruit-paragraph{top: 0; left: 5%;}

#message-area{height: calc(var(--content-width) * 2);}
#message-area p{line-height: 1.8;}
#message-area .title{top: 0;}
#message-paragraph{left: 4%; top: 12%; font-size: calc(var(--font-base) * 2);}
#message-area .image{width: 96%; height: 40%; border-radius: calc(var(--font-base) * 0.4);}
#message-image{left: 2%; top: 60%;}

#back-link-area{
	height: calc(var(--content-width) * 0.176);
	margin-top: calc(var(--content-width) * 0);
	margin-bottom: calc(var(--content-width) * 0.16);
}
#link-button-back{
	width: 60%; height: 100%; left: 20%; top: 0%;
}
#link-button-back .image{
	width: 100%; height: 100%;
}
#link-button-back p{
	width: 100%; top: 50%; margin: 0; padding: 0; transform: translate(-50%, -50%); line-height: normal;
}

#entry-form-area p{
	display: block;
	position: relative;
}
#entry-form-area .title{width: 100%;}
#entry-form-area .paragraph{width: 100%;}
#entry-form-area table{
	display: block;
	position: relative;
	width: 90%; left: 5%; top: 14%;
	background-color:rgb(255, 231, 251);
	border-radius: calc(var(--font-base) * 0.4);
	border-collapse: collapse;
	padding: calc(var(--font-base) * 2) calc(var(--font-base) * 1);
}
#entry-form-area tr{
	border-top: calc(var(--font-base) * 0.5) solid white;
	border-bottom: calc(var(--font-base) * 0.5) solid white;
}
#entry-form-area th{
	width: calc(var(--font-base) * 16);
	font-size: calc(var(--font-base) * 1.6);
	color: rgb(197, 105, 139);
}
#entry-form-area td{
	width: calc(var(--font-base) * 32);
	font-size: calc(var(--font-base) * 1.6);
	padding: calc(var(--font-base) * 1) calc(var(--font-base) * 0.4);
}
#entry-form-area .half-input{
	width: calc(var(--font-base) * 10);
	height: calc(var(--font-base) * 2.4);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	margin-right: calc(var(--font-base) * 1);
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.5);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#entry-form-area .full-input{
	width: calc(var(--font-base) * 23.2);
	height: calc(var(--font-base) * 2.4);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.5);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#entry-form-area .radio-button{
	margin-left: calc(var(--font-base) * 1);
	margin-right: calc(var(--font-base) * 1.4);
}
#entry-form-area input[type=radio]{
	width: calc(var(--font-base) * 1);
	height: calc(var(--font-base) * 1);
}
#entry-form-area select{
	width: calc(var(--font-base) * 25.2);
	height: calc(var(--font-base) * 2);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.5);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	background-color: white;
}
#entry-form-area textarea{
	width: calc(var(--font-base) * 23.2);
	height: calc(var(--font-base) * 7);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	padding: calc(var(--font-base) * 0.5) calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.5);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	background-color: white;
}
#entry-form-area .submit-button{
	margin-top: calc(var(--content-width) * 0.1);
	display: block;
	position: relative;
	width: calc(var(--content-width) * 0.70); height: calc(var(--content-width) * 0.22); left: calc(var(--content-width) * 0.15);
	color: white;
	border-radius: calc(var(--font-base) * 0.4);
	border: 0;
	font-size: calc(var(--font-base) * 1.5);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#entry-form-area .submit-button input{
	display: block;
	position: absolute;
	width:100%;
}
#submit-pink{
	opacity: 0;
	transition: opacity 0.4s;
}
.submit-button:hover #submit-pink{opacity: 1;}
#entry-form-area .submit-button p{
	display: block;
	position: absolute;
	width: 100%; text-align: center;
	top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0; line-height: normal;
	pointer-events: none;
}

#form-complete-area{height: calc(var(--content-width) * 0.6);}
#form-complete-area .title{top: 0%;}
#form-complete-area .paragraph{top: 70%;}

#management-area{height: calc(var(--content-width) * 4);}
#management-area p{display: block; position: absolute; margin: 0;}
#management-title{top: 3%; left: 4%;}
#management-subtitle1{top: 7%; left: 5%;}
#management-link1{top: 10%; left: 8%; width:84%;}
#management-link2{top: 11.5%; left: 8%; width:84%;}
#management-link3{top: 13%; left: 8%; width:84%;}
#management-paragraph1{top: 15.5%; left: 8%; width:84%;}
#management-subtitle2{top: 19%; left: 5%;}
#management-paragraph2{top: 22%; left: 8%; width:84%;}
#management-subtitle3{top: 31%; left: 5%;}
#management-paragraph3{top: 34%; left: 8%; width:84%;}
#management-subtitle4{top: 78%; left: 5%;}
#management-paragraph4{top: 81%; left: 8%; width:84%;}

#overview-area {overflow: hidden;}
#overview-area p{display: block; position: relative; margin: 0;}
#overview-area table{display: block; position: relative; margin: 0;}
p#overview-title{left: 10%; margin-bottom: calc(var(--content-width) * 0.06);}
#overview-table{left: 2%; border-collapse: collapse;}
#overview-table th{
	border: calc(var(--font-base) * 0.1) solid dimgray;
	width: calc(var(--content-width) * 0.24);
}
#overview-table td{
	border: calc(var(--font-base) * 0.1) solid dimgray;
	width: calc(var(--content-width) * 0.68);
	padding: calc(var(--font-base) * 0.2) calc(var(--font-base) * 0.4);
}

#news-list-area{height: calc(var(--content-width) * 7.2); margin-bottom: calc(var(--content-width) * 0.4); overflow: visible;}
#news-detail-area{margin-top: calc(var(--content-width) * 0.2);}


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: 23;
}
.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%;
	text-align: left;
	background: steelblue;
	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: 12%;
	padding: 0 calc(var(--font-base) * 2.4);
}
.side-menu-ul li p{display: block; position: absolute; top: 50%; transform: translate(0,-50%); padding: 0 calc(var(--font-base) * 2.4);}
.side-menu-ul li p.category{padding: 0 0;}
.side-menu-ul .decorated-link{color: gold;}

.side-menu-btn {
	position: fixed;
	top: calc(var(--font-base) * 1);
	right: calc(var(--font-base) * 1);
	width: calc(var(--font-base) * 5);
	height: calc(var(--font-base) * 5);
	padding: 0;
	cursor: pointer;
	z-index: 24;
	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;
}