@charset "UTF-8";

#mainVis {
	.splide__slide img {
		width: 100%;
		object-fit: cover;
	}
	@media screen and (min-width:1145px), print{
		.splide__slide img {
			max-height: 700px;
		}
		.splide__pagination {
			padding-inline: 40px;
			justify-content: flex-end;
		}
		.splide__pagination__page {
			opacity: 1;
			width: 5px;
			height: 5px;
			margin: 7.5px;
			cursor: pointer;
			background-color: #fff;
			&.is-active {
				transform: scale(1.2);
				background-color: var(--color-green);
			}
		}
	}
	@media screen and (max-width:1144px){
		.splide__slide img {
			aspect-ratio: 1 / 1;
		}
	}
}

#introduction {
	background-color: var(--bg-gray);
	.inner {
	}
	#about {
		.title {
			color: #505050;
			font-weight: 500;
		}
		.text {
			p + p { margin-top: 2em; }
		}
	}
	.data {
		font-weight: 500;
		dl:not(.wide) {
			display: flex;
			flex-wrap: wrap;
		}
	}
	@media screen and (min-width:1145px), print{
		.inner {
			display: flex;
			padding-block: 65px 75px;
			#about {
				flex-shrink: 1;
				.title {
					font-size: 30px;
				}
				.text {
					margin-top: 25px;
				}
			}
			.data {
				flex-shrink: 0;
				margin-left: 80px;
				&:is(.lang-en .data) { max-width: calc(50% - 140px); }
				small { font-size: 12px; }
			}
		}
	}
	@media screen and (max-width:1144px){
		padding-block: 35px 41px;
		#about {
			.title { font-size: 26px; }
			.text { margin-top: 30px; }
		}
		.data {
			small { font-size: 10.5px; }
		}
	}
}

.column2 {
	hgroup {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #000;
		font-weight: 500;
	}
	@media screen and (min-width:1145px), print{
		padding-block: 80px 160px;
		hgroup {
			padding-block: 10px;
			.title { font-size: 20px; }
		}
	}
	@media screen and (max-width:1144px){
		hgroup {
			padding-block: 11px;
			.title { font-size: 17.5px; }
		}
	}
}

#news {
	a { display: block; }
	.date { color: var(--color-green); }
	@media screen and (min-width:1145px), print{
		.posts {
			margin-top: 35px;
			line-height: 24px;
			& > li + li { margin-top: 20px; }
			a:hover > * { text-decoration: underline; }
			.title { font-size: 14px; }
		}
	}
	@media screen and (max-width:1144px){
		margin-top: 80px;
		.posts {
			margin-top: 30px;
			line-height: 24.5px;
			& > li + li { margin-top: 12px; }
		}
	}
}

#calendar {
	.splide__arrow {
		top: 0;
		bottom: 0;
		margin-block: auto;
		opacity: 1;
		aspect-ratio: 1 / 1;
		background: url(../images/icon_arrow_b.svg) no-repeat center center;
		background-size: 100%;
		&:disabled { opacity: 0; }
		&.splide__arrow--prev {
			left: 0;
			transform: rotate(-90deg);
		}
		&.splide__arrow--next {
			right: 0;
			transform: rotate(90deg);
		}
		svg { display: none; }
	}
	.titleList { text-align: center; }
	.cList {
		table {
			width: 100%;
			table-layout: fixed;
			border-bottom: 1px solid #000;
			thead tr > * {
				border-bottom: 1px solid #000;
				&:first-child { color: #e3007f; }
				&:last-child { color: #008cc2; }
			}
			tr > * {
				text-align: center;
				span {
					display: flex;
					align-items: center;
					aspect-ratio: 1 / 1;
					justify-content: center;
					box-sizing: border-box;
					border-radius: 50%;
					margin-inline: auto;
				}
				.noday { color: #d2d2d2; }
				.closed {
					color: #fff;
					background-color: var(--color-green);
				}
			}
		}
	}
	@media screen and (min-width:1145px), print{
		.splide__arrow { width: 1.2em; }
		.titleList { width: 164px; }
		.cList {
			font-size: 14px;
			table {
				tr > * {
					span { width: 30px; }
				}
				th { padding-block: 3px 4px; }
				td { padding-block: 8px; }
				tbody > tr {
					&:first-child > * { padding-top: 16px; }
					&:last-child > * { padding-bottom: 16px; }
				}
			}
		}
		.legend {
			font-size: 14px;
			margin-top: 12px;
		}
	}
	@media screen and (max-width:1144px){
		margin-top: 78px;
		.splide__arrow { width: 1em; }
		.titleList { width: 145px; }
		.cList {
			font-size: 12.25px;
			table {
				tr > * {
					span { width: 26px; }
				}
				th { padding-block: 2px 3px; }
				td { padding-block: 6.5px; }
				tbody > tr {
					&:first-child > * { padding-top: 13px; }
					&:last-child > * { padding-bottom: 13px; }
				}
			}
		}
		.legend {
			font-size: 12px;
			margin-top: 12px;
		}
	}
}

#events {
	hgroup {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 500;
	}
	.posts {
		padding-top: 1px;
		background-color: var(--bg-gray);
		a {
			display: block;
			position: relative;
			.thumbnail img {
				object-fit: cover;
				object-position: center top;
			}
			.eventType { color: var(--color-green); }
			.eventDate {
				display: flex;
				align-items: center;
				dt {
					color: #fff;
					line-height: 1;
					text-align: center;
					background-color: #000;
				}
			}
		}
		.new > a::before {
			content: "";
			display: block;
			border-radius: 50%;
			aspect-ratio: 1 / 1;
			background: url(../images/icon_new.svg) no-repeat center center var(--color-yellow);
			background-size: 100%;
			position: absolute;
		}
	}
	@media screen and (min-width:1145px), print{
		hgroup {
			.title { font-size: 20px; }
		}
		.posts {
			margin-top: 160px;
			.inner {
				display: flex;
				flex-wrap: wrap;
				gap: 65px;
				margin-top: -100px;
				padding-bottom: 75px;
				& > li {
					width: calc((100% - 130px) / 3);
					figure {
						background-color: var(--color-green);
					}
					.thumbnail img {
						width: 290px;
						height: 200px;
					}
					.eventType {
						font-size: 14px;
						margin-top: 22px;
					}
					.eventTitle {
						height: 56px;
						margin-top: 2px;
						line-height: 28px;
					}
					.thumbnail + .eventTitle { margin-top: 52px; }
					.eventDate {
						margin-top: 22px;
						dt {
							width: 70px;
							font-size: 14px;
							margin-right: 10px;
							padding-block: 4px 6px;
						}
					}
					a:hover > * {
						text-decoration: underline;
						img { opacity: 0.6; }
					}
					&.new > a::before {
						width: 70px;
						top: -44px;
						right: -10px;
						z-index: 1;
					}
				}
			}
		}
	}
	@media screen and (max-width:1144px){
		margin-top: 83px;
		hgroup {
			.title { font-size: 17.5px; }
		}
		.posts {
			margin-top: 130px;
			padding-bottom: 50px;
			.inner { margin-top: -88px; }
			li + li { margin-top: 50px; }
			li {
				max-width: 254px;
				margin-inline: auto;
				.thumbnail {
					img { aspect-ratio: 507 / 350; }
				}
				.thumbnail + * {
					font-size: 12px;
					margin-top: 18px;
				}
				.eventType + .eventTitle { margin-top: 2px; }
				.eventDate {
					margin-top: 17px;
					dt {
						width: 61px;
						font-size: 12.25px;
						padding-block: 4px 5px;
						margin-right: 8px;
					}
				}
			}
		}
	}
}

@media screen and (min-width:1145px), print {
	#map {
		margin-top: 200px;
		iframe { height: 550px; }
	}
}
@media screen and (max-width:1144px) {
	#map {
		margin-top: 100px;
		padding-inline: 0;
		iframe { aspect-ratio: 1 / 1; }
	}
}

#nationwide {
	.title {
		line-height: 1;
		font-weight: 600;
		text-align: center;
		span {
			display: inline-block;
		}
	}
	.list {
		display: flex;
		justify-content: space-between;
	}
	@media screen and (min-width:1145px), print {
		margin-top: 190px;
		.title {
			.ja { font-size: 27px; }
			.en { margin-top: 10px; }
		}
		.list {
			gap: 38px;
			margin-top: 50px;
			a:hover { opacity: 0.6; }
		}
	}
	@media screen and (max-width:1144px) {
		margin-top: 100px;
		.title {
			.ja { font-size: 21px; }
			.en { margin-top: 9px; }
		}
		.list {
			gap: 25px 5px;
			flex-wrap: wrap;
			margin-top: 50px;
			li { width: calc((100% - 10px) / 3); }
		}
	}
}

#description {
	.list {
		a {
			display: block;
			&:empty { display: none; }
			dl::before {
				content: "";
				display: block;
				margin-inline: auto;
				aspect-ratio: 1 / 1;
				background: no-repeat center center;
				background-size: 100%;
			}
			dt {
				line-height: 1;
				text-align: center;
				span { display: inline-block; }
				.ja { font-weight: 600; }
			}
		}
		.donation a dl::before { background-image: url(../images/page_icon_donation.svg); }
		.contact a dl::before { background-image: url(../images/page_icon_contact.svg); }
	}
	@media screen and (min-width:1145px), print {
		margin-top: 200px;
		.list {
			display: flex;
			justify-content: space-between;
			& > li {
				display: flex;
				width: calc(50% - 50px);
				a {
					padding: 50px 30px 42px;
					border-block: 1px solid #000;
					&:hover > * {
						text-decoration: underline;
						dt { color: var(--color-green); }
					}
					dl::before {
						width: 60px;
						margin-bottom: 15px;
					}
					dt .ja {
						font-size: 27px;
						margin-bottom: 10px;
					}
					dd { margin-top: 30px; }
				}
			}
		}
	}
	@media screen and (max-width:1144px) {
		margin-top: 100px;
		.list {
			border-top: 1px solid #000;
			& > li {
				border-bottom: 1px solid #000;
				a {
					padding-block: 50px 37.5px;
					dl {
						&::before {
							width: 52px;
							margin-bottom: 16px;
						}
						dt {
							.ja {
								font-size: 21px;
								margin-bottom: 8px;
							}
						}
						dd { margin-top: 25px; }
					}
				}
			}
		}
	}
}

@keyframes loading {
	0% {
		opacity: 0;
		transform: translateY(10%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
#loading {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	transition-duration: .3s;
	&::before {
		content: "";
		opacity: 0;
		display: block;
		aspect-ratio: 194 / 240;
		transform: translateY(10%);
		animation: 2s ease-out 1s forwards 1 loading;
		background: url(../images/logo_color.svg) no-repeat center center;
		background-size: 100%;
	}
	@media screen and (min-width:1145px), print {
		&::before { width: 200px; }
	}
	@media screen and (max-width:1144px) {
		&::before { width: 160px; }
	}
}