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

body{background-color: rgb(255, 243, 203);}

.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: 500;
	font-style: normal;
}
.title{font-size: calc(var(--font-base) * 1.8);}
.subtitle{font-size: calc(var(--font-base) * 1.2);}
.paragraph{font-size: calc(var(--font-base) * 0.9);}

.decorated-link{color: rgb(160, 112, 8); 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: forestgreen; color: white;
	border-radius: calc(var(--font-base) * 0.2);
}
table td{
	padding: calc(var(--font-base) * 0.8);
	background-color: rgb(230, 223, 133);
	border-radius: calc(var(--font-base) * 0.2);
}
table tr:nth-child(2n) th {
	background-color: limegreen;
}
table tr:nth-child(2n+1) td {
	background-color: rgb(255, 248, 182);
}

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: "Kaisei Opti", serif;
	font-weight: 500;
	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: "Kaisei Opti", serif;
	font-weight: 500;
	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: "Kaisei Opti", serif;
	font-weight: 500;
	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: "Kaisei Opti", serif;
	font-weight: 500;
	font-style: normal;
	margin-right: calc(var(--font-base) * 0.5);
}
form .uploader{
	padding: 0 calc(var(--font-base) * 1);
	font-family: "Kaisei Opti", serif;
	font-weight: 500;
	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: rgb(168, 122, 90);
	border-radius: calc(var(--font-base) * 0.2);
	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: khaki;
	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%);
}
form button:hover p{color: white;}

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

.link-button{background: linear-gradient(135deg, rgb(168, 122, 90), rgb(168, 122, 90));}
.link-button-cover{background-color: rgb(255, 243, 203);}
.link-button p{transition: 0.4s;}
.link-button:hover p{color: rgb(255, 243, 203);}

.twoblock-visual .image{border-radius: calc(var(--font-base) * 0.3);}

#header-area{overflow: visible;}
.header-back{width: 100%; pointer-events: none; z-index: 3;}
.header-back.late{opacity: 0;}
.loaded .header-back.late{animation: fade-in ease-in forwards 1.2s; animation-delay: 5.0s;}
.header-logo{
	width: calc(var(--content-width) * 0.70); left: 50%;
	height: calc(var(--content-width) * 0.30);
	transform: translate(-50%,0);
	z-index: 4;
}
.header-logo .image{
	width: 22%; left: 6%; top: 74%; transform: translate(0,-50%); cursor: pointer;
}
.header-logo p.paragraph{
	left: 30%; top: 64%; transform: translate(0,-50%);
	font-size: calc(var(--font-base) * 1.2); letter-spacing: calc(var(--font-base) * 0.1);
}
.header-logo p.title{
	left: 30%; top: 80%; transform: translate(0,-50%);
	font-size: calc(var(--font-base) * 2.4); letter-spacing: calc(var(--font-base) * 0.1);
}
.header-drawing{width: 100%; height: calc(var(--content-width) * 1.10); margin-bottom: calc(var(--content-width) * 0.06); overflow: hidden;}
.header-drawing.disabled{display: none;}
.header-drawing .forest{
	width: 24%; left: 20%; top: calc(var(--content-width) * 0.20); transform: translate(0,-50%); opacity: 0;
}
.loaded .header-drawing .forest{animation: fade-in ease-in forwards 1.2s; animation-delay: 4.5s;}
.header-drawing .copy{
	left: 42%; top: calc(var(--content-width) * 0.20); transform: translate(0,-50%);
	letter-spacing: calc(var(--font-base) * 0.2); line-height: 1.5; opacity: 0;
}
.loaded .header-drawing .copy{animation: fade-in-copy ease-in forwards 1.2s; animation-delay: 4.5s;}
.header-drawing .drawing{width: 60%; left: 20%; top: calc(var(--content-width) * 0.24); opacity: 0;}
.loaded #main-visual-drawing1{animation: fade-in ease-in forwards 0.8s, drawing-child ease-in-out forwards 3.2s; animation-delay: 0.6s;}
.loaded #main-visual-drawing2{animation: fade-in ease-in forwards 1.2s; animation-delay: 4.0s;}
.loaded #main-visual-drawing3{transform-origin: 10% 50%; animation: fade-in ease-in forwards 0.8s, drawing-trail ease-in-out forwards 3.2s; animation-delay: 0.65s;}
#header-area .leaf-l{width: 28%;  z-index: 1; opacity: 0;}
.loaded #main-visual-leaf01{left: 12%; top: calc(var(--content-width) * 0.64); animation: fade-in ease-in forwards 1.2s; animation-delay: 4.8s;}
.loaded #main-visual-leaf02{left: 38%; top: calc(var(--content-width) * 0.52); animation: fade-in ease-in forwards 1.2s; animation-delay: 4.9s;}
.loaded #main-visual-leaf03{left: 58%; top: calc(var(--content-width) * 0.66); animation: fade-in ease-in forwards 1.2s; animation-delay: 4.7s;}
.loaded #main-visual-leaf04{left: -4%; top: calc(var(--content-width) * 0.34); animation: fade-in ease-in forwards 1.2s; animation-delay: 4.5s;}
.loaded #main-visual-leaf05{left: 74%; top: calc(var(--content-width) * 0.22); animation: fade-in ease-in forwards 1.2s; animation-delay: 4.6s;}
#header-area .leaf-s{width: 8%;  z-index: 1; opacity: 0;}
.loaded #main-visual-leaf06{left: 8%; top: 80%; animation: fade-in ease-in forwards 1.2s; animation-delay: 4.55s;}
.loaded #main-visual-leaf07{left: 86%; top: 74%; animation: fade-in ease-in forwards 1.2s; animation-delay: 4.65s;}
.loaded #main-visual-leaf08{left: 40%; top: 90%; animation: fade-in ease-in forwards 1.2s; animation-delay: 4.75s;}
.loaded #main-visual-leaf09{display: none;}
.loaded #main-visual-leaf10{display: none;}
.header-line{width: 100%; height: calc(var(--content-width) * 0.20); position: relative; z-index: 10;}
.header-line.wait{opacity: 0;}
.loaded .header-line.wait{animation: fade-in ease-in forwards 1.2s; animation-delay: 5.0s;}
.header-button-block{top: calc(var(--content-width) * 0.0); height: calc(var(--content-width) * 0.05);}
.header-symbol{
	top:0; width: calc(var(--content-width) * 0.14); left: calc(50% - var(--content-width) * 0.07);
	transform-origin: center; animation: tremble 2s ease-in-out infinite;}
.header-button{
	background-color: transparent;
	font-size: calc(var(--font-base) * 0.8);
	letter-spacing: calc(var(--font-base) * 0.1);
	margin: 0;
	transition: 0.4s;
}
.header-button .noselect{top: calc(var(--content-width) * 0.14); width: 90%; left: 5%; transition: 0.4s; opacity: 1;}
.header-button .selected{top: calc(var(--content-width) * 0.14); width: 90%; left: 5%; transition: 0.4s; opacity: 0;}
.header-button.current .selected{opacity: 1;}
.header-button:hover .selected{opacity: 1;}
.header-button-base{top: calc(var(--content-width) * 0.14);}
.header-button-base p{transition: 0; color: rgb(65, 46, 13);}
.header-button.current .header-button-base p{color: white;}
.header-button:hover .header-button-base p{color: white;}
.header-button-extend-list{top: calc(var(--content-width) * 0.14); background-color: rgba(255, 255, 255, 0.9);}
.header-button-extend-list p{color: rgb(65, 46, 13);}
.header-button-extend-list:hover{background-color: rgba(255, 230, 150, 0.9);}

#rollback-area{height: calc(var(--content-width) * 0.08); background-color: rgb(255, 222, 161); overflow: visible; margin-top: calc(var(--content-width) * 0.24);}
#rollback-area .link-button{width: 16%; left: 42%; top: 25%; height: 50%;}
#rollback-area .wave{width: 100%; bottom: 99%;}

#footer-area{height: calc(var(--content-width) * 0.16); background-color: rgb(255, 222, 161);}
#footer-area .footer-logo{width: 10%; left: 24%; top: 50%; transform: translate(0,-50%);}
#footer-area p{left: 35%; top: 50%; transform: translate(0,-50%);}

#main-visual-bird01{width: 9%; z-index: 2; opacity: 0;}
.loaded #main-visual-bird01{
	left: 66%; top: 8%; animation: fade-in ease-in forwards 1.2s, bird1-v 2.5s ease-in-out infinite alternate,
	bird1-h 11s ease-in-out infinite alternate, bird1-turn 22s linear infinite;
	animation-delay: 8s;
}
#main-visual-bird02{width: 6%; z-index: 2; opacity: 0;}
.loaded #main-visual-bird02{
	left: 66%; top: 8%; animation: fade-in ease-in forwards 1.2s, bird2-v 2.5s ease-in-out infinite alternate,
	bird2-h 9s ease-in-out infinite alternate, bird2-turn 18s linear infinite;
	animation-delay: 8s;
}

#main-visual-area{height: calc(var(--content-width) * 0.90); overflow: visible;}
#main-visual-area .background{width: 100%; height: 100%; overflow: hidden;}
#main-visual1{transform-origin: center; animation: main-visual1 linear 24s infinite;}
#main-visual2{transform-origin: center; animation: main-visual2 linear 24s infinite;}
#main-visual3{transform-origin: center; animation: main-visual3 linear 24s infinite;}
#main-visual4{transform-origin: center; animation: main-visual4 linear 24s infinite;}
#main-visual-area .wave{width: 100%; bottom: -1%;}
#main-visual-area .wave-reverse{width: 100%; top: -1%;}

#greeting-area .text-block{
	width: 100%; height: calc(var(--content-width) * 0.70);
	border-radius: calc(var(--content-width) * 0.06) 0 calc(var(--content-width) * 0.06) 0;
	overflow: hidden;
}
.hope, .utopia{font-size: calc(var(--font-base) * 2.8);}
.hope{left: 46%; top: calc(var(--content-width) * 0.12); transform: translate(-100%, -50%);}
.and{left: 50%; top: calc(var(--content-width) * 0.12); transform: translate(-50%, -50%);}
.utopia{left: 54%; top: calc(var(--content-width) * 0.12); transform: translate(0%, -50%);}
.hope-sub{left: 43%; top: calc(var(--content-width) * 0.18); transform: translate(-100%, -50%);}
.utopia-sub{left: 57%; top: calc(var(--content-width) * 0.18); transform: translate(0%, -50%);}
.greeting{width: 76%; left: 12%; top: calc(var(--content-width) * 0.24);}

#life-area{overflow: visible;}
#life-area .whiteblock{background-color: rgba(247, 212, 223, 0.8); border-radius: calc(var(--content-width) * 0.06) 0 calc(var(--content-width) * 0.06) 0;}
#life-area .title{letter-spacing: calc(var(--font-base) * 0.2);}
#life-area .activity-block{width: 100%; height: calc(var(--content-width) * 0.35);}
#life-area .activity-block p.title{top: 10%; width: 60%;}
#life-area .activity-block p.paragraph{top: 20%; width: 50%;}
#life-title1{left: 30%;} #life-text1{left: 5%;}
#life-title2{left: 70%;} #life-text2{left: 45%;}
#life-title3{left: 30%;} #life-text3{left: 5%;}
#life-title4{left: 70%;} #life-text4{left: 45%;}
#life-title5{left: 30%;} #life-text5{left: 5%;}
#life-photoframe1{width: 40%; left: 60%; top: -30%; transform-origin: center; transform: rotate(10deg);}
#life-photoframe2{width: 40%; left: 0%; top: -20%; transform-origin: center; transform: rotate(-5deg);}
#life-photoframe3{width: 40%; left: 60%; top: -10%; transform-origin: center; transform: rotate(5deg);}
#life-photoframe4{width: 40%; left: 0%; top: -25%;  transform-origin: center; transform: rotate(5deg);}
#life-photoframe5{width: 40%; left: 60%; top: -10%; transform-origin: center; transform: rotate(-10deg);}
#life-area .blank-block{width: 100%; height: calc(var(--content-width) * 0.15);}

#schedule-area{overflow: visible;}
#schedule-area table{width: 80%; left: 10%;}
#schedule-area .whiteblock{background-color: rgba(211, 226, 201, 0.8); border-radius: calc(var(--content-width) * 0.06) 0 calc(var(--content-width) * 0.06) 0;}
#schedule-area table tr{width: 100%;}
#schedule-area th.short{width: 20%;}
#schedule-area th.long{width: 40%;}
#schedule-area th.lime{background-color: limegreen;}
#schedule-area th.april{background-color: lightcoral;}
#schedule-area th.may{background-color: dodgerblue;}
#schedule-area th.june{background-color: mediumpurple;}
#schedule-area th.july{background-color: limegreen;}
#schedule-area th.august{background-color: orangered;}
#schedule-area th.september{background-color: gold;}
#schedule-area th.october{background-color: chocolate;}
#schedule-area th.november{background-color: olive;}
#schedule-area th.december{background-color: slategray;}
#schedule-area th.january{background-color: orange;}
#schedule-area th.february{background-color: skyblue;}
#schedule-area th.march{background-color: palevioletred;}
#schedule-area td{background-color: lightyellow;}
#schedule-area .paragraph{width: 80%; left: 10%;}
#schedule-photoframe6{width: 40%; left: -20%; top: calc(var(--content-width) * -0.20); transform-origin: center; transform: rotate(10deg);}
#schedule-photoframe7{width: 40%; left: 80%; top: calc(var(--content-width) * 0.80); transform-origin: center; transform: rotate(-10deg);}
#schedule-photoframe8{width: 40%; left: 80%; top: calc(var(--content-width) * 2.60); transform-origin: center; transform: rotate(-5deg);}

#overview-area .activity-block{width: 100%; height: calc(var(--content-width) * 0.35);}
#overview-area .activity-block p.title{top: 10%; width: 60%;}
#overview-area .activity-block p.paragraph{top: 20%; width: 50%;}
#overview-area .whiteblock{background-color: rgba(255, 255, 255, 0.8); border-radius: calc(var(--content-width) * 0.04);}

#access-area .area-paragraph{left: 8%; width: 80%;}
#access-area .access{width: 90%; left: 5%; height: calc(var(--content-width) * 0.40);}
#access-area .access-map{width: 50%; height: 100%;}
#access-area .access .paragraph{left: 55%; top: 50%; transform: translate(0,-50%);}

#history-area table {width: 90%; left: 5%; }
#history-area table tr{width: 100%;}
#history-area table th{width: 30%;}

#news-area{margin-bottom: calc(var(--content-width) * 0.06);}
#news-area .area-content{border-radius: calc(var(--content-width) * 0.06) 0 calc(var(--content-width) * 0.06) 0;}
#news-area p.title{left: 2%; margin-bottom: calc(var(--content-width) * 0.06);}
#news-area p.paragraph{right: 2%; top: calc(var(--content-width) * 0.06); white-space: nowrap;}
#news-area table{
	position: relative;
	width: 84%; left: 8%;
	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;
}