:root {
	--content-width: 60vw;
	--margin-base: calc(var(--content-width) * 0.06);
}

html{scrollbar-width: none;}
body{
	background: linear-gradient(0deg, rgb(255, 248, 254), rgb(230, 199, 255));
	background-attachment: fixed;
}
body::-webkit-scrollbar{display: none;}

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

.decorated-link{color: rgb(194, 132, 211); cursor: pointer;}
th.decorated-link{color: rgb(241, 181, 255);}

table{
	position: relative; table-layout: fixed;
	border-collapse: separate; border-spacing:  calc(var(--font-base) * 0.3);
	font-size: calc(var(--font-base) * 0.8);
}
table th{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(57, 130, 175); color: white;
}
table td{
	padding: calc(var(--font-base) * 0.8);
	background-color: white;
}
table tr:nth-child(2n) th {
	background-color: rgb(65, 167, 174);
}
table tr:nth-child(2n+1) td {
	background-color: rgb(222, 241, 255);
}

form table{width: 88%; left: 6%;}
form table tr{width: 100%;}
form table th{width: 30%;}
form table th.required:after{content: " ※";}
form table td{background-color: khaki;}
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: "Noto Serif JP", serif;
	font-weight: 700;
	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: "Noto Serif JP", serif;
	font-weight: 700;
	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: "Noto Serif JP", serif;
	font-weight: 700;
	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: "Noto Serif JP", serif;
	font-weight: 700;
	font-style: normal;
	margin-right: calc(var(--font-base) * 0.5);
}
form .uploader{
	padding: 0 calc(var(--font-base) * 1);
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	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: white;
	border: solid 1px rgb(65, 46, 13);
	transition: background-color 0.4s, color 0.4s;
	margin-top: calc(var(--content-width) * 0.04);
	margin-bottom: calc(var(--content-width) * 0.04);
}
form button:hover{
	border: none;
	background-color: forestgreen;
	color: white;
}

.whiteblock{background-color: rgb(255, 238, 216);}

.link-button{
	background-color: rgb(171, 154, 204); color: rgb(65, 46, 13);
	border-radius: calc(var(--offset-base) * 2);
	font-size: calc(var(--font-base) * 0.9);
	transition: 0.4s;
}
.link-button-cover{background-color: white; border-radius: calc(var(--offset-base) * 2);}
.link-button:hover{background-color: mediumpurple;}
.link-button:hover p{color: white;}

#header-area{height: calc(var(--content-width) * 0.30); overflow: visible;}
#header-area .header-logo{
	width: calc(var(--content-width) * 0.33); left: 22%; top: calc(var(--content-width) * 0.02); cursor: pointer; z-index: 1;
	transform-origin: center; transform: rotate(-15deg);
	filter: drop-shadow(calc(var(--content-width) * 0.01) calc(var(--content-width) * 0.01) 3px rgba(46, 46, 46, 0.6));
}
#header-area p.title{left: calc(var(--content-left) + var(--content-width) * 0.40); top: 50%; transform: translate(0,-50%);}
.header-line{height: calc(var(--content-width) * 0.05); top: calc(var(--content-width) * 0.20);}
.header-button-block{width: calc(var(--content-width) * 0.60); left: calc(var(--content-left) + var(--content-width) * 0.40);}
.header-button-base{
	background-color: rgb(171, 154, 204); color: rgb(65, 46, 13);
	border-radius: calc(var(--offset-base) * 2);
	font-size: calc(var(--font-base) * 0.9);
}
.header-button-cover{background-color: white; border-radius: calc(var(--offset-base) * 2);}
.header-button:hover .header-button-base{background-color: mediumpurple;}
.header-button:hover p{color: white;}

#rollback-area{height: calc(var(--content-width) * 0.08);}
#rollback-area .link-button{width: 16%; left: 42%; top: 25%; height: 50%;}

#footer-area{height: calc(var(--content-width) * 0.36); background-color: rgb(171, 154, 204);}
#footer-area .access-map{display: block; position: absolute; width: 36%; height: 70%; left: 0%; top: 15%;}
#footer-area .image{height: 100%; left: 70%; opacity: 0.6; user-select: none;}
#footer-area p{left: 40%; top: 15%;}
#footer-area p.paragraph{font-size: calc(var(--font-base) * 0.8);}

#back-area{height: calc(var(--content-width) * 0.20); background-color: rgb(171, 154, 204);}
#back-area .image{width: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#back-area p{top: 50%; transform: translate(-50%, -50%);}

#main-visual-area{height: calc(var(--content-width) * 0.90); overflow: visible;}
#main-visual-area .background{width: 100%; height: 100%; overflow: hidden;}
#main-visual-area .logo{width: 40%; left: 51%; top: 50%; transform: translate(-50%,-50%);}
#main-visual-area .copy{
	right: 28%; top: 27%; font-size: calc(var(--font-base) * 1.5); padding-right: 2%;
	letter-spacing: calc(var(--font-base) * 0.2); line-height: 1.5;
	opacity: 0; animation: fade-in ease-in forwards 1.2s; animation-delay: 0.5s;
}
#main-visual-area .rectangle-text{
	right: 38%; height: 50%; top: 27%; font-size: calc(var(--font-base) * 1.2); padding-right: 2%;
	line-height: 1.5;
	opacity: 0; animation: fade-in ease-in forwards 1.2s; animation-delay: 1.0s;
}
#main-visual1{transform-origin: center; animation: main-visual1 linear 32s infinite;}
#main-visual2{transform-origin: center; animation: main-visual2 linear 32s infinite;}
#main-visual3{transform-origin: center; animation: main-visual3 linear 32s infinite;}
#main-visual4{transform-origin: center; animation: main-visual4 linear 32s infinite;}

#instagram-area .image-relative{width: 6%; left: 84%; cursor: pointer;}
.embedsocial-hashtag{width: 80%; left: 10%;}

#concept-area .special{
	width: 100%;
	background-color: rgba(255, 210, 131);
	border-radius: calc(var(--font-base) * 0.4);
	padding: calc(var(--content-width) * 0.06) 0 calc(var(--content-width) * 0.06) 0;
}
.concept-container{width: 90%; left: 5%; height: calc(var(--content-width) * 0.50); margin-top: calc(var(--content-width) * 0.04); display: flex; flex-wrap:wrap;}
.concept-block{width: 50%; height: 50%;}
.concept-block-frame{width: 96%; left: 2%; height: 90%; background-color: rgba(255, 255, 255, 0.7); border-radius: calc(var(--font-base) * 0.4);}
.concept-number{width: 20%; left: 5%; top: 10%;}
.concept-symbol{width: 40%; left: 8%; top: 45%;}
.concept-label{
	width: 40%; height: 40%; left: 55%; top: 30%;
	background-color: rgb(255, 176, 190); color: white; filter: drop-shadow(calc(var(--content-width) * 0.005) calc(var(--content-width) * 0.005) 0 rgba(226, 226, 226, 0.6))
}
.concept-label p{width: 100%; top: 50%; transform: translate(-50%,-50%);}
.concept-block .caption{width: 40%; left: 75%; top: 75%; font-size: calc(var(--font-base) * 0.8); line-height: 1.1;}

.schedule-line{height: calc(var(--content-width) * 0.5);}
.schedule-block{width: 50%; height: 100%;}
.schedule-block p{line-height: 1.5;}
.schedule-block .title{margin-top: calc(var(--font-base) * 1.7);}
.schedule-block.procedure{top: 0%; left: 0%;}
.schedule-block .image{width: 100%; user-select: none;}
.schedule-block.procedure .subtitle{left: 20%;}
.schedule-block.procedure .subtitle.margin-top{margin-top: calc(var(--margin-base) * 0.5);}
.schedule-block.procedure .paragraph{left: 26%;}
.schedule-block.day{top: 0%; left: 50%;}
.schedule-block.day .subtitle{font-size: calc(var(--font-base) * 1.2);}
.schedule-block.day .paragraph{left: 30%; font-size: calc(var(--font-base) * 0.8);}
.schedule-block.day .time1{top: 30%; left: 14%; transform: translate(0,-50%);}
.schedule-block.day .time2{top: 45%; left: 14%; transform: translate(0,-50%);}
.schedule-block.day .event1{top: 30%; left: 32%; transform: translate(0,-50%);}
.schedule-block.day .event2{top: 45%; left: 32%; transform: translate(0,-50%);}
table.daily-schedule{
	position: absolute; table-layout: fixed;
	border-collapse: collapse; border-spacing: calc(var(--font-base) * 0.3);
	font-size: calc(var(--font-base) * 0.8);
	width: 76%; left: 12%; top: 23%;
}
table.daily-schedule tr{width: 100%; border-top: 2px solid dimgray;}
table.daily-schedule tr.tabletop{width: 100%; border-top: none;}
table.daily-schedule td, table.daily-schedule tr:nth-child(2n+1) td{background-color: transparent; padding: calc(var(--font-base) * 0.4);}
table.daily-schedule td.time{width: 20%; text-align: right; border-right: 2px solid dimgray;}
table.daily-schedule .small{font-size: calc(var(--font-base) * 0.6);}

#fee-area .subtitle{left: 0%;}
#fee-area .area-content div{width: 60%; left: 0%;}
#fee-area table{width: 100%; font-size: calc(var(--font-base) * 0.9);}
#fee-area table tr{width: 100%;}
#fee-area table th.long{width: 70%;}
#fee-area table th.short{width: 30%;}
#fee-area table .right{text-align: right;}
#fee-area .exterior{width: 38%; left: 62%; bottom: 0%;}

#news-area{display: none; margin-bottom: calc(var(--content-width) * 0.06); margin-top: calc(var(--content-width) * 0.20);}
#news-area p.title{margin-bottom: calc(var(--content-width) * 0.06);}
#news-area p.paragraph{right: 0; top: calc(var(--content-width) * 0.06); white-space: nowrap;}
#news-area table{
	position: relative;
	width: 90%; left: 5%;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing:  calc(var(--font-base) * 0.3);
	font-size: calc(var(--font-base) * 0.8);
}
#news-area table tr{
	border-top: 1px solid dimgray;
	border-bottom: 1px solid dimgray;
}
#news-area table td{
	background-color: transparent;
	padding: calc(var(--font-base) * 0.5);
}
#news-area table td.news-date{
	width: calc(var(--content-width) * 0.12);
	padding-left: calc(var(--content-width) * 0.02);
	padding-right: calc(var(--content-width) * 0.08);
}

.block-news-list{
	width: 100%; height: calc(var(--content-width) * 0.20);
	border-bottom: 1px solid dimgray;
}
.border-top{border-top: 1px solid dimgray;}
.block-news-list .image,.block-news-list .image-full{width: 25%; height: 90%; left: 25%; top: 5%;}
.news-list-date{left: 12.5%; top: 50%; transform: translate(-50%,-50%);}
.news-list-title{width: 44%; left: 75%; top: 50%; transform: translate(-50%,-50%); text-align: center;}
#news-list-area table{
	position: relative;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing:  calc(var(--font-base) * 0.3);
	font-size: calc(var(--font-base) * 0.8);
}
#news-list-area table tr{
	border-top: 1px solid dimgray;
	border-bottom: 1px solid dimgray;
}
#news-list-area table td{
	background-color: transparent;
	padding: calc(var(--font-base) * 0.5);
}
#news-list-area table td.news-date{
	width: calc(var(--content-width) * 0.12);
	padding-left: calc(var(--content-width) * 0.02);
	padding-right: calc(var(--content-width) * 0.08);
}
#year-switch{right: 0%; top: calc(var(--content-width) * 0.04);}
#news-2025.disabled{display: none;}
#news-2024.disabled{display: none;}
#news-2023.disabled{display: none;}
#news-2022.disabled{display: none;}

.block-news-detail{width: 60%; left: 20%;}
.block-news-detail .image-full{width: 100%; height: calc(var(--content-width) * 0.40);}
.news-detail-date{right: 0%; text-align: right;}

#login-area table{width: 88%; left: 6%;}
#login-area table tr{width: 100%;}
#login-area table th{width: 30%;}

#news-edit-list-area .block-news-list{
	width: 100%; height: calc(var(--content-width) * 0.16);
	border-bottom: 1px solid dimgray;
}
#news-edit-list-area .block-news-list .image{width: 20%; height: 90%; left: 20%; top: 5%;}
#news-edit-list-area .block-news-list .image-full{width: 20%; height: 90%; left: 20%; top: 5%;}
#news-edit-list-area .news-list-date{left: 10%; top: 50%; transform: translate(-50%,-50%);}
#news-edit-list-area .news-list-title{width: 40%; left: 60%; top: 50%; transform: translate(-50%,-50%); text-align: center;}
#news-edit-list-area button{
	width: 10%; left: 85%;
	height: calc(var(--content-width) * 0.05); top: 50%;
	transform: translate(0,-50%);
	background-color: white;
	border: solid 1px rgb(65, 46, 13);
	transition: background-color 0.4s, color 0.4s;
}
#news-edit-list-area button:hover{
	border: none;
	background-color: forestgreen;
	color: white;
}
#news-edit-list-area button.button-new-post{
	width: 15%; left: 50%; transform: translate(-50%,0);
}

#news-edit-area table{
	width: 100%;
}
#news-edit-area table tr{
	width: 100%;
}
#news-edit-area table th{
	width: 20%;
}
#news-edit-area table td{
	background-color: khaki;
}
#news-edit-area .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: "Noto Serif JP", serif;
	font-weight: 700;
	font-style: normal;
	margin-right: calc(var(--font-base) * 0.5);
}
#news-edit-area .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: "Noto Serif JP", serif;
	font-weight: 700;
	font-style: normal;
}
#news-edit-area .uploader{
	padding: 0 calc(var(--font-base) * 1);
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-style: normal;
}
#news-edit-area textarea{
	width: calc(var(--font-base) * 23.2);
	height: calc(var(--font-base) * 14);
	border: 0;
	padding: calc(var(--font-base) * 0.5) calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 0.9);
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-style: normal;
	background-color: white;
}
#news-edit-area button{
	width: 15%; left: 50%;
	height: calc(var(--content-width) * 0.05);
	transform: translate(-50%,0);
	background-color: white;
	border: solid 1px rgb(65, 46, 13);
	transition: background-color 0.4s, color 0.4s;
}
#news-edit-area button:hover{
	border: none;
	background-color: forestgreen;
	color: white;
}

#schedule-edit-area table{
	width: 80%; left: 10%;
}
#schedule-edit-area table tr{
	width: 100%;
}
#schedule-edit-area table th{
	width: 20%;
}

#news-complete-area button{
	width: 15%; left: 50%;
	height: calc(var(--content-width) * 0.05);
	transform: translate(-50%,0);
	background-color: white;
	border: solid 1px rgb(65, 46, 13);
	transition: background-color 0.4s, color 0.4s;
}
#news-complete-area button:hover{
	border: none;
	background-color: forestgreen;
	color: white;
}

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

.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: 30%; height: 100%; top: 0; right: -30%;
	text-align: left;
	background: rgb(171, 154, 204);
	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: 60%;
	top: 20%;
	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: 15%;
	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: white;}

.side-menu-btn {
	display: block; position: absolute;
	top: calc(var(--font-base) * 5);
	right: calc(var(--content-left) + var(--font-base) * 1);
	width: calc(var(--font-base) * 3);
	height: calc(var(--font-base) * 3);
	padding: 0;
	cursor: pointer;
	z-index: 24;
	background: rgba(255, 255, 255, 0.9);
}
.side-open .side-menu-btn{
	position: fixed;
	background: none;
	right: calc(var(--font-base) * 2);
}

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

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