:root {
	--theme-ornament-rainbow: url(../../images/ornament_rainbow.svg);
}

.home {
	.visual {
		position: relative;
		width: 100%;
		height: 400px;
		background-image: url(../../images/visual_01.jpg);
		background-position: center;
		background-size: cover;
		user-select: none;
		pointer-events: none;

		.text {
			position: absolute;
			top: 50%;
			right: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			font-family: var(--wp--preset--font-family--sanserif);
			transform: translateY(-50%);

			.catch {
				margin: 0;
				color: var(--wp--preset--color--dark-01);
				font-size: var(--wp--preset--font-size--large);
				text-shadow:
					0 0 5px var(--wp--preset--color--light-01),
					0 0 5px var(--wp--preset--color--light-01),
					0 0 5px var(--wp--preset--color--light-01),
					0 0 5px var(--wp--preset--color--light-01);
				opacity: 0;

				.color {
					display: inline-block;
					color: var(--wp--preset--color--secondary);
					font-size: var(--wp--preset--font-size--gigantic);

					@media (width <= 767px) {
						font-size: var(--wp--preset--font-size--large);
					}
				}

				.indent {
					display: inline-block;
					text-indent: 5rem;

					@media (width <= 767px) {
						font-size: var(--wp--preset--font-size--large);
						text-indent: 0;
					}
				}

				&.fade {
					animation: 2s ease-out 1s slidein;
					animation-fill-mode: forwards;
				}

				@media (width <= 767px) {
					font-size: var(--wp--preset--font-size--large);
				}
			}

			.everyday {
				width: fit-content;
				margin-top: 2rem;
				margin-bottom: 0;
				color: #fff;
				font-size: var(--wp--preset--font-size--large);
				line-height: 1;
				background-color: #ff4040;
				padding-block: 1rem;
				padding-inline: 2rem;
			}

			@media (width <= 767px) {
				max-width: calc(100vw - 2rem);
			}
		}

		@media (width <= 767px) {
			height: 300px;
			max-height: initial;
		}
	}

	.frontpage-feature {
		width: 100%;

		.content {
			ul {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				list-style: none;

				li {
					position: relative;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: flex-end;
					height: 300px;
					padding: 0.5rem;
					overflow: hidden;

					&::before {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-repeat: no-repeat;
						background-position: center;
						background-size: cover;
						transition: transform 0.5s ease;
						content: "";
					}

					a {
						z-index: 2;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 5rem;
						padding: 0.5rem;
						color: var(--wp--preset--color--light-01);
						font-size: var(--wp--preset--font-size--medium);
						text-align: center;
						text-decoration: none;
						background-color: var(--wp--preset--color--primary);

						&::before {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							content: "";

							@media (width <= 767px) {
								display: none;
							}
						}

						@media (width <= 767px) {
							height: 3rem;
							margin-top: 5rem;
							font-size: var(--wp--preset--font-size--xx-small);
						}
					}

					&:hover {
						&::before {
							transform: scale(1.1, 1.1);
						}
					}

					&:nth-of-type(1) {
						&::before {
							background-image: url(../../images/frontpage_feature_01.jpg);
						}

						a {
							background-color: var(--wp--preset--color--blue);
						}
					}

					&:nth-of-type(2) {
						&::before {
							background-image: url(../../images/frontpage_feature_02.jpg);
						}

						a {
							background-color: var(--wp--preset--color--pink);
						}
					}

					&:nth-of-type(3) {
						&::before {
							background-image: url(../../images/frontpage_feature_03.jpg);
						}

						a {
							background-color: var(--wp--preset--color--orange);
						}
					}

					&:nth-of-type(4) {
						&::before {
							background-image: url(../../images/frontpage_feature_04.jpg);
						}

						a {
							background-color: var(--wp--preset--color--green);
						}
					}

					@media (width <= 767px) {
						flex-basis: 50%;
						height: auto;
					}
				}
			}

			@media (width <= 767px) {
				grid-template-columns: 1fr;
				margin: 0 auto;
			}
		}
	}

	.frontpage-card {
		width: 100%;
		padding: 4rem 0;
		background-color: var(--wp--preset--color--white);

		.content {
			max-width: 650px;
			margin: 0 auto;

			p {
				margin: 0;
				text-align: center;

				&.card-text {
					font-size: var(--wp--preset--font-size--large);
					font-family: var(--wp--preset--font-family--sanserif);

					+ .card {
						margin-top: 1rem;
					}
				}

				a {
					position: relative;
					display: inline-block;
					align-items: center;
					justify-content: center;
					padding: 0.5rem 2rem;
					color: var(--wp--preset--color--light-01);
					font-size: var(--wp--preset--font-size--large);
					text-decoration: none;
					background-color: var(--wp--preset--color--primary);
					border: 1px solid var(--wp--preset--color--primary);
					transition: all 0.5s ease;

					&:hover {
						color: var(--wp--preset--color--primary);
						background-color: var(--wp--preset--color--light-01);
					}

					&::after {
						display: inline-block;
						margin-left: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}

				+ figure {
					margin-top: 0.5rem;
				}
			}

			.card {
				display: flex;
				align-items: center;

				img {
					display: block;
					width: 100%;
					height: auto;
				}

				+ p {
					margin-top: 2rem;
				}
			}

			@media (width <= 767px) {
				grid-template-columns: 1fr;
				max-width: calc(100vw - 2rem);
			}
		}

		@media (width <= 767px) {
			padding: 2rem 0;
		}
	}

	.grid {
		display: grid;
		grid-template-columns: 1fr 0.4fr;
		gap: 0 1rem;
		max-width: 1200px;
		margin: 0 auto;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}

	.front-sidebar {
		grid-row: 1 / span 3;
		grid-column: 2;
		padding-top: 4rem;

		.widget {
			+ .widget {
				margin-top: 2rem;
			}

			&.time {
				h2 {
					&::before {
						margin-right: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}
			}

			&.access {
				h2 {
					&::before {
						margin-right: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}

				iframe {
					width: 100%;
				}
			}

			&.download {
				h2 {
					&::before {
						margin-right: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}
			}

			&.link {
				h2 {
					&::before {
						margin-right: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}
			}

			&.information {
				h3 {
					margin-block-start: 2rem;
					margin-block-end: 1rem;
				}
			}

			ul {
				font-size: var(--wp--preset--font-size--x-small);

				li {
					+ li {
						margin-block-start: 0.5rem;
					}
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			h2 {
				z-index: 1;
				margin: 0;
				color: var(--wp--preset--color--secondary);
				font-weight: 500;
				font-size: var(--wp--preset--font-size--large);
				font-family: var(--wp--preset--font-family--sanserif);
				line-height: 1;
				text-align: left;

				&::before {
					margin-right: 0.5rem;
					font-family: var(--wp--preset--font-family--ionicons);
				}
			}

			.button-area {
				a {
					display: block;
					color: var(--wp--preset--color--primary);
					font-size: var(--wp--preset--font-size--xx-small);
					text-decoration: none;
					transition: 0.3s;

					&:hover {
						opacity: 0.7;
					}

					&::after {
						margin-left: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}
			}

			+ table {
				margin-top: 1rem;
			}

			+ p {
				margin-top: 1rem;
			}

			+ ul {
				margin-top: 1rem;
			}
		}

		.schedule {
			margin-bottom: 0;
			/* padding: 1rem; */
			list-style: none;

			li {
				a {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0.5rem 2rem;
					color: var(--wp--preset--color--primary);
					text-decoration: none;
					background-color: var(--wp--preset--color--light-01);
					border: 1px solid var(--wp--preset--color--border);
					transition: all 0.5s ease;

					&:hover {
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--primary);
					}

					&::after {
						display: block;
						margin-left: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}

				+ li {
					margin-top: 1rem;
				}
			}
		}

		.download {
			margin-bottom: 0;
			/* padding: 1rem; */
			list-style: none;

			li {
				a {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0.5rem 2rem;
					color: var(--wp--preset--color--primary);
					text-decoration: none;
					background-color: var(--wp--preset--color--light-01);
					border: 1px solid var(--wp--preset--color--border);
					transition: all 0.5s ease;

					&:hover {
						color: var(--wp--preset--color--light-01);
						background-color: var(--wp--preset--color--primary);
					}

					&::after {
						display: block;
						margin-left: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}

				+ li {
					margin-top: 0.5rem;
				}
			}
		}

		.link {
			margin-bottom: 0;
			/* padding: 1rem; */
			list-style: none;

			li {
				a {
					display: block;
					padding: 0.5rem;
					background-color: var(--wp--preset--color--light-01);
					border: 1px solid var(--wp--preset--color--border);
					transition: 0.3s;

					&:hover {
						opacity: 0.7;
					}
				}

				+ li {
					margin-top: 1rem;
				}
			}
		}

		table {
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--small);
			background-color: var(--wp--preset--color--light-01);

			th,
			td {
				padding: 0.3rem;
				text-align: center;
				border: 1px solid var(--wp--preset--color--primary);
			}

			th {
				font-weight: 500;
			}

			thead {
				color: var(--wp--preset--color--light-01);
				background-color: var(--wp--preset--color--primary);
			}

			tbody {
				tr {
					th {
						background-color: var(--wp--preset--color--alto-05);

						span {
							display: block;
							font-size: var(--wp--preset--font-size--x-small);
						}
					}
				}
			}

			caption {
				padding-bottom: 0;
				font-size: var(--wp--preset--font-size--x-small);
				text-align: left;

				span {
					color: var(--wp--preset--color--red);
				}
			}
			width: 100%;
			margin: 0 auto;
			font-size: var(--wp--preset--font-size--small);

			+ ul {
				margin-top: 1rem;
			}
		}

		iframe {
			height: 300px;
			border: 0;
		}

		p {
			margin-bottom: 0;

			+ iframe {
				margin-top: 1rem;
			}
		}

		@media (width <= 767px) {
			grid-row: auto;
			grid-column: auto;
			order: 4;
			max-width: calc(100vw - 2rem);
			margin: 0 auto;
			padding-top: 0;
			padding-bottom: 2rem;
		}
	}

	.frontpage-information {
		width: 100%;
		padding: 4rem 0;

		.content {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;

			h2 {
				position: relative;
				z-index: 1;
				width: 100%;
				margin: 0 auto;
				color: var(--wp--preset--color--secondary);
				font-weight: 500;
				font-size: var(--wp--preset--font-size--x-large);
				font-family: var(--wp--preset--font-family--sanserif);
				line-height: 1;
				text-align: center;

				&::before,
				&::after {
					position: absolute;
					top: 50%;
					display: block;
					width: 150px;
					height: 50px;
					line-height: 1;
					background-image: var(--theme-ornament-rainbow);
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					transform: translateY(-50%);
					content: "";

					@media (width <= 767px) {
						width: 100px;
					}
				}

				&::before {
					left: 0;
				}

				&::after {
					right: 0;
				}

				@media (width <= 767px) {
					font-size: var(--wp--preset--font-size--x-large);
				}

				+ ul {
					margin-top: 4rem;

					@media (width <= 767px) {
						margin-top: 2rem;
					}
				}
			}

			ul.list {
				display: grid;
				grid-template-columns: 1fr;
				margin-right: auto;
				margin-bottom: 0;
				margin-left: auto;
				padding: 1rem;
				/* max-height: 300px; */
				overflow: scroll;
				font-weight: 400;
				list-style: none;
				background-color: var(--wp--preset--color--light-01);
				border: 1px solid var(--wp--preset--color--border);

				> li {
					a {
						display: grid;
						grid-template-columns: auto auto 1fr;
						gap: 0 1rem;
						padding: 1rem 1rem;
						font-weight: 400;
						text-decoration: none;
						transition: 0.5s;

						> .label {
							.label {
								display: inline-flex;
								padding: 0.2rem 0.5rem;
								font-size: var(--wp--preset--font-size--xx-small);

								&.new {
									color: var(--wp--preset--color--light-01);
									background-color: var(
										--wp--preset--color--primary
									);
								}

								&.notification {
									color: var(--wp--preset--color--light-01);
									background-color: var(
										--wp--preset--color--red
									);
								}
							}

							@media (width <= 767px) {
								margin-left: 1rem;
							}
						}

						.title {
							@media (width <= 767px) {
								width: 100%;
								margin-top: 0.5rem;
							}
						}

						&:hover {
							background-color: var(--wp--preset--color--alto-05);
						}

						@media (width <= 767px) {
							display: flex;
							flex-wrap: wrap;
						}
					}

					+ li {
						border-top: 1px solid var(--wp--preset--color--border);
					}
				}

				+ .button-area {
					margin-top: 2rem;
				}
			}

			.button-area {
				text-align: center;

				a {
					position: relative;
					display: inline-block;
					align-items: center;
					justify-content: center;
					padding: 0.5rem 2rem;
					color: var(--wp--preset--color--light-01);
					text-decoration: none;
					background-color: var(--wp--preset--color--primary);
					border: 1px solid var(--wp--preset--color--primary);
					transition: all 0.5s ease;

					&:hover {
						color: var(--wp--preset--color--primary);
						background-color: var(--wp--preset--color--light-01);
					}

					&::after {
						display: none;
						margin-left: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}
			}

			@media (width <= 767px) {
				max-width: calc(100vw - 2rem);
			}
		}

		@media (width <= 767px) {
			padding: 2rem 0;
		}
	}

	.frontpage-greeing {
		width: 100%;
		padding: 4rem 0;

		.content {
			width: 100%;
			max-width: 1000px;
			margin: 0 auto;

			> div {
				margin-top: 4rem;
				padding: 2rem 2rem 10rem 2rem;
				overflow: auto;
				background-color: var(--wp--preset--color--yellow-40);
				background-image: url(../../images/ornament_home.png);
				background-repeat: no-repeat;
				background-position: center calc(100% - 20px);
				background-size: 300px auto;

				@media (width <= 767px) {
					margin-top: 2rem;
				}
			}

			h2 {
				position: relative;
				z-index: 1;
				width: 100%;
				margin: 0 auto;
				color: var(--wp--preset--color--secondary);
				font-weight: 500;
				font-size: var(--wp--preset--font-size--large);
				font-family: var(--wp--preset--font-family--sanserif);
				line-height: 1;
				text-align: center;

				&::before,
				&::after {
					position: absolute;
					top: 50%;
					display: block;
					width: 200px;
					height: 62px;
					line-height: 1;
					background-image: var(--theme-ornament-rainbow);
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100% 100%;
					transform: translateY(-50%);
					content: "";

					@media (width <= 767px) {
						width: 100px;
					}
				}

				&::before {
					left: 0;
				}

				&::after {
					right: 0;
				}

				@media (width <= 767px) {
					font-size: var(--wp--preset--font-size--x-large);
				}

				+ p {
					margin-top: 4rem;
				}
			}

			p {
				margin-bottom: 0;

				+ .button-area {
					margin-top: 2rem;
				}
			}

			figure {
				float: right;
				max-width: 30%;
				margin-bottom: 1rem;
				margin-left: 1rem;
				padding: 0.5rem;
				background-color: #fff;

				@media (width <= 767px) {
					max-width: 100%;
					margin-left: 0;
				}
			}

			.button-area {
				text-align: center;

				a {
					position: relative;
					display: inline-block;
					align-items: center;
					justify-content: center;
					padding: 0.5rem 2rem;
					color: var(--wp--preset--color--light-01);
					text-decoration: none;
					background-color: var(--wp--preset--color--primary);
					border: 1px solid var(--wp--preset--color--primary);
					transition: all 0.5s ease;

					&:hover {
						color: var(--wp--preset--color--primary);
						background-color: var(--wp--preset--color--light-01);
					}

					&::after {
						display: none;
						margin-left: 0.5rem;
						font-family: var(--wp--preset--font-family--ionicons);
						content: "";
					}
				}
			}

			@media (width <= 767px) {
				max-width: calc(100vw - 2rem);
			}
		}

		@media (width <= 767px) {
			padding: 2rem 0;
		}
	}

	.frontpage-treatment {
		width: 100%;
		padding: 4rem 0;

		.content {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;

			h2 {
				position: relative;
				z-index: 1;
				width: 100%;
				margin: 0 auto;
				color: var(--wp--preset--color--secondary);
				font-weight: 500;
				font-size: var(--wp--preset--font-size--large);
				font-family: var(--wp--preset--font-family--sanserif);
				line-height: 1;
				text-align: center;

				&::before,
				&::after {
					position: absolute;
					top: 50%;
					display: block;
					width: 200px;
					height: 62px;
					line-height: 1;
					background-image: var(--theme-ornament-rainbow);
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100% 100%;
					transform: translateY(-50%);
					content: "";

					@media (width <= 767px) {
						width: 100px;
					}
				}

				&::before {
					left: 0;
				}

				&::after {
					right: 0;
				}

				@media (width <= 767px) {
					font-size: var(--wp--preset--font-size--x-large);
				}

				+ ul {
					margin-top: 4rem;
				}
			}

			ul {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
				margin: 0;
				list-style: none;

				li {
					height: 200px;
					background-color: var(--wp--preset--color--secondary);
					background-position: center;
					background-size: 100%;
					border: 1px solid var(--wp--preset--color--light-01);
					transition: 0.5s;

					h3 {
						position: relative;
						display: flex;
						align-items: flex-end;
						width: 100%;
						height: 100%;
						margin: 0;

						a {
							display: flex;
							align-items: flex-end;
							justify-content: flex-end;
							width: 100%;
							padding: 0.5rem 1rem;
							color: var(--wp--preset--color--light-01);
							font-weight: 300;
							text-decoration: none;
							background-color: color-mix(
								in srgb,
								var(--wp--preset--color--primary) 70%,
								transparent
							);

							&::before {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								content: "";
							}

							@media (width <= 767px) {
								font-size: var(--wp--preset--font-size--xx-small);
							}
						}
					}

					&:hover {
						background-size: 110%;

						@media (width <= 767px) {
							background-size: auto 100%;
						}
					}

					&:nth-of-type(1) {
						background-image: url(../../images/frontpage_treatment_01.jpg);
					}

					&:nth-of-type(2) {
						background-image: url(../../images/frontpage_treatment_02.jpg);
					}

					&:nth-of-type(3) {
						background-image: url(../../images/frontpage_treatment_03.jpg);
					}

					&:nth-of-type(4) {
						background-image: url(../../images/frontpage_treatment_04.jpg);
					}

					@media (width <= 767px) {
						background-size: auto 100%;
					}
				}

				@media (width <= 767px) {
					grid-column: 1 / span 3;
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media (width <= 767px) {
				max-width: calc(100vw - 2rem);
			}
		}

		@media (width <= 767px) {
			padding: 2rem 0;
		}
	}
}

@keyframes slidein {
	from {
		transform: translateY(20%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}