:root {
	--content-width: 60vw;
	--font-base: calc(var(--content-width) * 0.02);
	--margin-base: calc(var(--content-width) * 0.08);
	--offset-base: calc(var(--font-base) * 0.3);
}

body{
	background-image: url(img/background.png);
	background-repeat: repeat;
	background-size: 9%;
}

.sans{
	font-size: var(--font-base);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.sans-bold{
	font-size: var(--font-base);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	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: "Kiwi Maru", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.kaisei{
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
}
.cardo{
	font-family: "Cardo", serif;
	font-weight: 600;
	font-style: normal;
}
.title{font-size: calc(var(--font-base) * 2.0);}
.subtitle{font-size: calc(var(--font-base) * 1.4);}
.paragraph{font-size: calc(var(--font-base) * 1.0);}

.decorated-link{color: rgb(189, 15, 15); cursor: pointer;}
th.decorated-link{color: gold;}

table{
	position: relative; table-layout: fixed;
	border-collapse: separate; border-spacing:  calc(var(--font-base) * 0.4);
	font-size: calc(var(--font-base) * 0.9);
}
table th{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(133, 13, 13); color: white;
}
table td{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(238, 235, 206);
}
table tr:nth-child(2n) th {
	background-color: rgb(133, 13, 13);
}
table tr:nth-child(2n+1) td {
	background-color: rgb(238, 235, 206);
}

form table{width: 88%; left: 6%;}
form table tr{width: 100%;}
form table th{width: 30%;}
form table th.required:after{content: " ※";}
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: "Cardo", serif;
	font-weight: 600;
	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: "Cardo", serif;
	font-weight: 600;
	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: "Cardo", serif;
	font-weight: 600;
	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: "Cardo", serif;
	font-weight: 600;
	font-style: normal;
	margin-right: calc(var(--font-base) * 0.5);
}
form .uploader{
	padding: 0 calc(var(--font-base) * 1);
	font-family: "Cardo", serif;
	font-weight: 600;
	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: linear-gradient(135deg, rgb(170, 18, 18), rgb(133, 13, 13));
	margin-top: calc(var(--content-width) * 0.04);
	margin-bottom: calc(var(--content-width) * 0.04);
}
.contact-button-cover{
	width: calc(100% - var(--offset-base) * 4); height: calc(100% - var(--offset-base) * 4);
	left: calc(var(--offset-base) * 2); top: calc(var(--offset-base) * 2);
	background-color: rgb(255,232,194);
	border-radius: calc(var(--font-base) * 0.4);
	transition: 0.4s;
}
form button:hover .contact-button-cover{opacity: 0;}
form button p{
	display: block; position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	color: white;
}
form button:hover p{color: white;}

.whiteblock{background-color: rgba(255, 254, 247, 0.8);}

.link-button{background: linear-gradient(135deg, rgb(170, 18, 18), rgb(133, 13, 13));}
.link-button-cover{background: linear-gradient(135deg, rgb(48, 48, 48), rgb(0, 0, 0));}
.link-button p{transition: 0.4s; color: white; left: 50%;}
.link-button:hover p{color: white;}

#header-area{z-index: 1; overflow: visible;}
.header-visual{width: 100%; height: calc(var(--content-width) * 0.80); background-color: white; overflow: hidden;}
.header-visual.disabled{display: none;}
#header-visual1{transform-origin: center; animation: main-visual1 linear 24s infinite;}
#header-visual2{opacity: 0; transform-origin: center; animation: main-visual2 linear 24s infinite;}
#header-visual3{opacity: 0; transform-origin: center; animation: main-visual3 linear 24s infinite;}
#header-visual4{opacity: 0; transform-origin: center; animation: main-visual4 linear 24s infinite;}
#header-area .logo{width: 24%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.7;}
#header-area .copy{writing-mode: vertical-rl; text-orientation: upright; top: 12%; right: 14%; line-height: 2; letter-spacing: calc(var(--font-base) * 0.2); filter: drop-shadow(calc(var(--font-base) * 0.1) calc(var(--font-base) * 0.1) 0 black);}

.header-logo{width: 100%; height: calc(var(--content-width) * 0.16);}
.header-logo .image{height: 100%; left: 50%; transform: translate(-50%, 0);}
.header-logo.disabled{display: none;}

.header-line{height: calc(var(--content-width) * 0.06); position: relative;}
.header-button-belt-left,.header-button-belt-right{background-color:rgb(32, 32, 32); width: calc(var(--content-left) - var(--offset-base));}
.header-button-belt-left{right: calc(100% - var(--content-left) + var(--offset-base));}
.header-button-belt-right{left: calc(100% - var(--content-left) + var(--offset-base));}
.header-button-base{background: linear-gradient(135deg, rgb(32, 32, 32), rgb(32, 32, 32)); color: white;}
.header-button-cover{background: linear-gradient(135deg, rgb(170, 18, 18), rgb(133, 13, 13)); opacity: 0; width: 100%; height: 100%; left: 0; top: 0;}
.header-button:hover .header-button-cover{opacity: 1; }
.header-button:hover .header-button-base p{color: white;}
.header-button-extend-list{background-color: rgba(133, 13, 13, 0.7); color: white;}
.header-button-extend-list:hover{background-color: rgba(133, 13, 13, 0.8); color: gold;}
.header-button p{font-size: calc(var(--font-base) * 1.1);}
.header-line.moveup{margin-top: calc(var(--content-width) * -0.07); margin-bottom: 0;}

#rollback-area{height: calc(var(--content-width) * 0.12);}
#rollback-area .link-button{width: 24%; left: 50%; height: 50%; top: 50%; transform: translate(-50%,-50%);}

#footer-area{height: calc(var(--content-width) * 0.36); background: linear-gradient(135deg, rgb(170, 18, 18), rgb(133, 13, 13));}
#footer-area .logo{width: calc(var(--content-width) * 0.17); height: calc(var(--content-width) * 0.17); left: 14%; top: 40%; transform: translate(0,-50%);}
#footer-area .line{width: calc(var(--content-width) * 0.196); height: calc(var(--content-width) * 0.06); right: 20%; top: calc(var(--content-width) * 0.18);}
#footer-area .profile{right: 14%; top: 40%; transform: translate(0,-50%); text-align: right; z-index: 1;}
#footer-area a{transition: 0.4s;}
#footer-area a:hover{color: rgb(235, 128, 10);}

#news-area{height: calc(var(--content-width) * 0.18); background-color: rgb(238, 235, 206);}
#news-area p.subtitle{left: 2%; letter-spacing: calc(var(--font-base) * 0.2); top: calc(var(--content-width) * 0.04);}
#news-area table{
	position: relative;
	width: 80%; left: 18%; top: calc(var(--content-width) * 0.04);
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing:  calc(var(--font-base) * 0.3);
	font-size: calc(var(--font-base) * 0.9);
}
#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.08);
	padding-left: calc(var(--content-width) * 0.02);
	padding-right: calc(var(--content-width) * 0.08);
}
#news-area .link-button{width: 30%; left: 70%; height: calc(var(--content-width) * 0.05); top: calc(var(--content-width) * 0.10);}
#news-area .link-button p{font-size: calc(var(--font-base) * 0.8);}

#concept-area{height: calc(var(--content-width) * 0.64);}
#concept-area .concept-image1{width: 40%; left: -5%; height: calc(var(--content-width) * 0.30); top: 0;}
#concept-area .concept-image2{width: 40%; left: -5%; height: calc(var(--content-width) * 0.30); top: calc(var(--content-width) * 0.34);}
#concept-area p{width: 55%; left: 50%;}

#link-area{height: calc(var(--content-width) * 0.48); background: linear-gradient(135deg, rgb(48, 48, 48), rgb(0, 0, 0));}
#link-area .link-image1{width: 24%; left: 22%; height: calc(var(--content-width) * 0.30); top: calc(var(--content-width) * 0.06); transform: translate(-50%, 0);}
#link-area .link-image2{width: 24%; left: 50%; height: calc(var(--content-width) * 0.30); top: calc(var(--content-width) * 0.06); transform: translate(-50%, 0);}
#link-area .link-image3{width: 24%; left: 78%; height: calc(var(--content-width) * 0.30); top: calc(var(--content-width) * 0.06); transform: translate(-50%, 0);}
#link-area .link-title1{width: 24%; left: 22%; top: calc(var(--content-width) * 0.38); transform: translate(-50%, 0);}
#link-area .link-title2{width: 24%; left: 50%; top: calc(var(--content-width) * 0.38); transform: translate(-50%, 0);}
#link-area .link-title3{width: 24%; left: 78%; top: calc(var(--content-width) * 0.38); transform: translate(-50%, 0);}

#access-area{height: calc(var(--content-width) * 0.60);}
#access-area .access-map{width: 45%; height: calc(var(--content-width) * 0.36); top: calc(var(--content-width) * 0.20);}
#access-area .profile{width: 50%; left: 50%;}
#access-area .instagram{height: calc(var(--content-width) * 0.08); top: calc(var(--content-width) * 0.46); left: 50%;}
#access-area .line{height: calc(var(--content-width) * 0.08); top: calc(var(--content-width) * 0.46); left: 64%;}
#access-area .link-button{width: 30%; left: 55%; height: calc(var(--content-width) * 0.05); top: calc(var(--content-width) * 0.37);}
#access-area .link-button p{font-size: calc(var(--font-base) * 0.8);}

#menu-area .main-visual{width: 100%; height: calc(var(--content-width) * 0.70);}
#menu-area .main-visual .title{font-size: calc(var(--font-base) * 4.0); top: 50%; transform: translate(-50%, -50%);}
#menu-area .image-relative{width: 60%; left: 20%;}

#overview-area .main-visual{width: 100%; height: calc(var(--content-width) * 0.70);}
#overview-area .main-visual .title{font-size: calc(var(--font-base) * 4.0); top: 50%; transform: translate(-50%, -50%);}
#overview-area table{width: 88%; left: 6%;}
#overview-area tr{width: 100%;}
#overview-area th{width: 20%;}
#overview-area td{width: 80%;}
#overview-area .link-button{width: 30%; left: 35%; height: calc(var(--content-width) * 0.05);}
#overview-area .link-button p{font-size: calc(var(--font-base) * 0.8);}

#message-area .main-visual{width: 100%; height: calc(var(--content-width) * 0.70);}
#message-area .main-visual .title{font-size: calc(var(--font-base) * 4.0); top: 50%; transform: translate(-50%, -50%);}
#message-area .paragraph{width: 88%; left: 6%;}
#message-area .right{text-align: right;}

.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) * 1.0);
}
#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;}
#news-list-area .left{width: 10%; left: 24%; top: calc(var(--content-width) * 0.0);}
#news-list-area .right{width: 10%; left: 66%; top: calc(var(--content-width) * 0.0);}

.block-news-detail{width: 88%; left: 6%;}
.block-news-detail .image-full{width: 100%; height: calc(var(--content-width) * 0.40);}
.news-detail-date{right: 6%; 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: white;
	border: solid 1px rgb(65, 46, 13);
	transition: 0.4s;
}
#news-edit-list-area button:hover{
	border: none;
	background: linear-gradient(135deg, rgb(170, 18, 18), rgb(133, 13, 13));
}
#news-edit-list-area button p{color: black; width: 100%;}
#news-edit-list-area button:hover p{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: "Cardo", serif;
	font-weight: 600;
	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: "Cardo", serif;
	font-weight: 600;
	font-style: normal;
}
#news-edit-area .uploader{
	padding: 0 calc(var(--font-base) * 1);
	font-family: "Cardo", serif;
	font-weight: 600;
	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: "Cardo", serif;
	font-weight: 600;
	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;
}