:root {
	--content-width: var(--vw);
}

body{
	background: linear-gradient(0deg, rgb(255, 248, 254), rgb(230, 199, 255));
	background-attachment: fixed;
}

.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;
}
.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: 0; overflow: visible;}
#header-area .header-logo{
	width: calc(var(--content-width) * 0.50); left: 20%; top: 0; 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{display: none;}

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

#footer-area{height: calc(var(--content-width) * 1.20); background-color: rgb(171, 154, 204);}
#footer-area .access-map{display: block; position: absolute; width: 80%; height: 45%; left: 10%; top: 5%; z-index: 1;}
#footer-area .image{height: 45%; left: 40%; top: 52%; opacity: 0.6; user-select: none;}
#footer-area p{left: 10%; top: 55%;}
#footer-area p.paragraph{font-size: calc(var(--font-base) * 1.0);}

#back-area{height: calc(var(--content-width) * 0.30);}
#back-area .image{width: 80%; left: 50%; top: 50%; transform: translate(-50%, -50%);}

#main-visual-area{height: calc(var(--content-width) * 1.80); 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: 7%; top: 30%; height: 45%; font-size: calc(var(--font-base) * 1.5); padding-right: 2%;
	letter-spacing: calc(var(--font-base) * 0.2); line-height: 1.4;
	opacity: 0; animation: fade-in ease-in forwards 1.2s; animation-delay: 0.5s;
}
#main-visual-area .rectangle-text{
	right: 25%; top: 30%; height: 45%; font-size: calc(var(--font-base) * 1.1); 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 .cozy{
	width: 90%;
}
#concept-area .special{
	width: 90%;
	background-color: rgba(255, 210, 131);
	border-radius: calc(var(--font-base) * 0.4);
	padding: calc(var(--content-width) * 0.10) 0 calc(var(--content-width) * 0.10) 0;
}
.concept-container{width: 90%; left: 5%; height: calc(var(--content-width) * 2.00); margin-top: calc(var(--content-width) * 0.04); display: flex; flex-wrap:wrap;}
.concept-block{width: 100%; height: 25%;}

.schedule-line{height: calc(var(--content-width) * 2);}
.schedule-block{width: 100%; height: 50%;}
.schedule-block p{line-height: 1.5;}
.schedule-block .title{margin-top: calc(var(--font-base) * 3);}
.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: 50%; left: 0%;}
.schedule-block.day .subtitle{font-size: calc(var(--font-base) * 1.4);}
.schedule-block.day .paragraph{left: 30%; font-size: calc(var(--font-base) * 0.9);}
table.daily-schedule{font-size: calc(var(--font-base) * 1.0);}
table.daily-schedule .small{font-size: calc(var(--font-base) * 0.8);}

#fee-area .subtitle{left: 5%;}
#fee-area .area-content div{width: 90%; left: 5%;}
#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{position: relative; width: 80%; left: 10%; margin-top: calc(var(--margin-base) * 1);}

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

.side-menu{
	background: rgb(171, 154, 204);
}