@charset "UTF-8";

.swiper.swiper-visual {
	position: relative;
	width: 100%;

	.swiper-slide {
		height: 600px;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		@media (width <= 767px) {
			height: auto;
			border-right: 5px solid var(--wp--preset--color--primary-dark);
			border-left: 5px solid var(--wp--preset--color--primary-dark);
		}
	}

	.swiper-text {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		max-width: 1040px;
		margin: 0 auto;
		font-size: 2rem;
		transform: translateY(-50%);

		@media (width <= 767px) {
			position: absolute;
			bottom: 10%;
			z-index: 1;
			margin-top: -4rem;
			font-size: 1.3rem;
			transform: initial;
		}

		.text {
			display: flex;
			flex-direction: column;
			align-content: flex-start;
			align-items: baseline;
			max-width: 1040px;

			@media (width <= 767px) {
				max-width: calc(100% - 2rem);
				margin-right: auto;
				margin-left: auto;
			}

			div {
				display: inline-block;
				padding: 1rem 1.5rem;
				font-family: var(--wp--preset--font-family--ryo-display);
				line-height: 1;
				letter-spacing: 0.5rem;
				background-color: var(--wp--preset--color--light-01);

				span {
					color: var(--wp--preset--color--tertiary);
				}

				& + div {
					margin-top: 1px;
				}
			}
		}
	}
}

.frontpage-warning-area {
	.content {
		max-width: 1040px;
		margin-right: auto;
		margin-left: auto;

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

	ul {
		list-style: none;
		padding-inline-start: 0;
	}

	.normal {
		display: block;
		margin-top: 1rem;
		padding: 1rem;
		color: var(--wp--preset--color--light-01);
		font-size: 1.5rem;
		text-align: center;
		text-decoration: none;
		background-image: linear-gradient(155deg, #ff9eaa, #ffd39e);
		background-position: 0 0;
		background-size: 200% 100%;
		border-radius: 5px;
		transition: 0.3s;

		@media (width <= 1023px) {
			font-size: 1rem;
			border-radius: 10px;
		}

		&:hover {
			background-position: 100% 0;
		}

		i {
			margin-right: 1rem;
		}
	}
}

.frontpage-measures-area {
	margin-block-start: 0 !important;
	padding-block-start: 0;

	.content {
		max-width: 1040px;
		margin-inline: auto;
		padding-block: 2rem;

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

	ul {
		margin-block-start: 0;
		list-style: none;
	}

	.normal {
		display: block;
		padding: 1rem;
		color: var(--wp--preset--color--light-01);
		font-size: 1.5rem;
		text-align: center;
		text-decoration: none;
		background-image: linear-gradient(155deg, #ff9eaa, #ffd39e);
		background-position: 0 0;
		background-size: 200% 100%;
		border-radius: 5px;
		transition: 0.3s;

		@media (width <= 1023px) {
			font-size: 1rem;
			border-radius: 10px;
		}

		&:hover {
			background-position: 100% 0;
		}

		i {
			margin-right: 1rem;
		}
	}
}

.frontpage-reserve-area {
	.content {
		width: 100%;
		max-width: 1040px;
		margin: 0 auto;
		padding-block-start: 4rem;

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

	.wp-block-image {
		width: 100%;

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

		a {
			display: block;
		}

		&:has(a) {
			transition: 0.5s ease;

			&:hover {
				opacity: 0.5;
			}
		}
	}
}

.frontpage-information {
	margin-block-start: 0 !important;

	.content {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 2rem;
		width: 100%;
		max-width: 1040px;
		margin: 0 auto;
		padding-block: 0;

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

		h2 {
			margin-top: 0;
			margin-bottom: 0;
			color: var(--wp--preset--color--tertiary);
			font-weight: 500;
			font-size: 2.3rem;
			font-family: var(--wp--preset--font-family--ryo-display);
			line-height: 1;

			@media (width <= 767px) {
				margin-right: auto;
			}

			&::after {
				display: block;
				margin-top: 1rem;
				color: var(--wp--preset--color--dark-03);
				font-weight: 400;
				font-size: 0.8rem;
				line-height: 1;
				letter-spacing: 0.2rem;
				text-transform: uppercase;
				content: "Information";
			}
		}

		.list-box {
			border-top: 2px solid var(--wp--preset--color--alto-05);
			border-bottom: 2px solid var(--wp--preset--color--alto-05);
		}

		.list {
			display: grid;
			grid-template-columns: 1fr;
			margin-bottom: 0;
			font-weight: 400;
			list-style: none;
			padding-left: 0;

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

			li {
				a {
					display: flex;
					flex-wrap: wrap;
					padding: 1rem;
					font-weight: 400;
					text-decoration: none;
					transition: 0.3s;

					&:hover {
						color: var(--wp--preset--color--dark-02);
						opacity: 0.5;
					}

					.date {
						color: var(--wp--preset--color--dark-02);
					}

					.label-box {
						margin-left: 1rem;

						.label {
							display: block;
							width: 100px;
							padding: 0.2rem 0.5rem;
							color: var(--wp--preset--color--dark-01);
							font-size: 0.8rem;
							text-align: center;
							background-color: var(--wp--preset--color--alto-05);
						}
					}

					.title {
						margin-left: 1rem;

						@media (width <= 767px) {
							flex-basis: 100%;
							margin-top: 0.5rem;
							margin-left: 0;
						}
					}
				}

				&.important {
					background-color: #fbffb9;

					.date {
						color: var(--wp--preset--color--red);
					}

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

					.title {
						color: var(--wp--preset--color--red);
					}
				}

				& + li {
					border-top: 1px dashed var(--wp--preset--color--alto-05);
				}
			}
		}

		.title-box {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			@media (width <= 767px) {
				flex-direction: row;
				width: 100%;
			}

			a {
				display: inline-flex;
				align-items: center;
				margin-top: 2rem;
				padding: 0.7rem 1rem;
				color: var(--wp--preset--color--light-01);
				font-size: 1rem;
				font-family: var(--wp--preset--font-family--ryo-display);
				line-height: 1;
				text-decoration: none;
				background-image: linear-gradient(155deg, #82c3c2, #82b5c3);
				border-radius: 5px;
				transition: 0.3s;

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

				&::after {
					margin-left: 0.5rem;
					font-family: "ionicons";
					content: "";
				}

				&:hover {
					opacity: 0.7;
				}
			}

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

.frontpage-narabo {
	margin-block-start: 0 !important;

	.content {
		display: grid;
		grid-gap: 1rem;
		grid-template-areas: "title content";
		grid-template-columns: 1fr 2fr;
		width: 100%;
		max-width: 1040px;
		margin: 0 auto;
		padding: 4rem 0;

		@media (width <= 767px) {
			flex-wrap: wrap;
			grid-template-areas: "title" "content";
			grid-template-columns: 1fr;
			max-width: calc(100% - 2rem);
		}

		h2 {
			grid-area: title;
			margin-top: 0;
			margin-bottom: 0;
			color: var(--wp--preset--color--tertiary);
			font-weight: 500;
			font-size: 2.3rem;
			font-family: var(--wp--preset--font-family--ryo-display);
			line-height: 1;

			@media (width <= 767px) {
				margin-right: auto;
			}

			.en {
				display: block;
				margin-top: 1rem;
				color: var(--wp--preset--color--dark-03);
				font-weight: 400;
				font-size: 0.8rem;
				line-height: 1;
				letter-spacing: 0.2rem;
				text-transform: uppercase;
			}
		}

		.box-content {
			grid-area: content;
		}

		.title-box {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			@media (width <= 767px) {
				flex-direction: row;
				width: 100%;
			}

			& + .box-content {
				@media (width <= 767px) {
					margin-top: 2rem;
				}
			}
		}
	}
}

.frontpage-feature {
	padding: 7rem 0;
	background-image: url(../images/background_feature.jpg);
	background-position: center;
	background-size: cover;
	margin-block: 0 !important;

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

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

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

			.box-title {
				&::after {
					content: "Feature";
				}
			}

			& + .swiper-feature {
				margin-top: 4rem;
			}
		}

		.swiper-feature {
			width: 100%;
			padding: 0;

			.swiper-wrapper {
				padding: 0;
			}

			.swiper-pagination {
				position: initial;
				top: 0;
				bottom: initial;
				margin-bottom: 2rem;
			}

			.swiper-pagination-bullet {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 2rem;
				height: 2rem;
				color: var(--wp--preset--color--light-01);
				font-size: 12px;
				line-height: 20px;
				text-align: center;
				background-color: var(--wp--preset--color--tertiary);
				border: 1px solid var(--wp--preset--color--tertiary);
				opacity: 1;
				transition: 0.3s;

				&:hover {
					opacity: 0.8;
				}
			}

			.swiper-pagination-bullet-active {
				color: var(--wp--preset--color--tertiary);
				background-color: #fff;
				border: 1px solid var(--wp--preset--color--tertiary);
			}

			.swiper-slide {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				height: auto;
				margin-bottom: 1rem;
				padding: 2rem 1rem 1rem 1rem;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 3px 5px 1px rgba(130, 195, 194, 0.5);
				transition: 0.5s;

				&:hover {
					opacity: 0.8;
				}

				figure {
					position: relative;
					z-index: 2;
					width: 80%;
					margin: 0;

					&::before {
						position: absolute;
						top: -5px;
						left: -5px;
						z-index: -1;
						width: 100%;
						height: 100%;
						background-color: var(--wp--preset--color--primary);
						border-radius: 50%;
						content: "";
					}

					&::after {
						position: absolute;
						top: 5px;
						left: 5px;
						z-index: -1;
						width: 100%;
						height: 100%;
						background-color: var(--wp--preset--color--secondary);
						border-radius: 50%;
						content: "";
					}

					img {
						display: block;
						width: 100%;
						overflow: hidden;
						border-radius: 50%;
					}

					& + h3 {
						margin-top: 2rem;
					}
				}

				h3 {
					width: 100%;
					margin: 0;
					font-weight: 500;
					font-size: 1.1rem;
					font-family: var(--wp--preset--font-family--ryo-display);
					text-align: center;

					& + p {
						margin-top: 1rem;
					}
				}

				p {
					padding: 0;
					color: var(--wp--preset--color--dark-02);
					text-align: left;
				}
			}
		}
	}
}

.frontpage-message {
	padding: 7rem 0;

	.content {
		display: flex;
		width: 100%;
		max-width: 960px;
		margin: 0 auto;

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

		.box-left {
			flex-basis: 30%;
			margin-right: 4rem;

			@media (width <= 767px) {
				flex-basis: 100%;
				margin-right: 0;
			}

			img {
				display: block;
				width: 100%;
				border-radius: 50%;
			}

			figure {
				margin-right: auto;
				margin-left: auto;

				@media (width <= 767px) {
					max-width: 70%;
				}
			}

			figcaption {
				font-size: 1.7rem;
				font-family: var(--wp--preset--font-family--ryo-display);
				letter-spacing: 0.2rem;
				text-align: center;

				span {
					display: block;
					color: var(--wp--preset--color--dark-03);
					font-size: 0.8rem;
					letter-spacing: 0.1rem;
					text-align: center;
				}
			}
		}

		.box-right {
			flex-basis: 70%;

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

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

				.message-title {
					&::before {
						content: "Message";
					}
				}

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

			p {
				line-height: 1.9;
			}
		}
	}
}

.frontpage-treatment {
	padding: 0 0 7rem 0;

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

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

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

			.box-title {
				&::after {
					content: "Feature";
				}
			}

			& + .swiper-feature {
				margin-top: 8rem;
			}
		}

		.symptoms-box {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			padding: 1rem;
			background-color: var(--wp--preset--color--light-01);
			border: 4px solid var(--wp--preset--color--primary);

			&::before {
				position: absolute;
				right: 0;
				bottom: 100%;
				left: 0;
				width: 70px;
				height: 70px;
				margin-right: auto;
				margin-left: auto;
				padding: 0.5rem;
				font-size: 2rem;
				background-color: #fff;
				background-image: url(../images/ornament_sakura.svg);
				background-repeat: no-repeat;
				background-position: center;
				border-right: 8px solid #fff;
				border-left: 8px solid #fff;
				transform: translate(0, 50%);
				content: "";
			}

			h3 {
				width: 100%;
				margin-top: 3rem;
				color: var(--wp--preset--color--primary-dark);
				font-size: 2rem;
				font-family: var(--wp--preset--font-family--ryo-display);
				line-height: 1;
				text-align: center;

				& + .symptoms-list {
					margin-top: 8rem;
				}
			}

			.symptoms-list {
				display: flex;
				justify-content: space-between;
				width: 100%;
				list-style: none;
				padding-inline-start: 0;

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

			.symptoms-item {
				flex: 1;

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

				& + li {
					margin-left: 1rem;

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

				&:nth-of-type(1) a::before {
					background-image: url(../images/symptoms_nose.svg);
				}

				&:nth-of-type(2) a::before {
					background-image: url(../images/symptoms_ear.svg);
				}

				&:nth-of-type(3) a::before {
					background-image: url(../images/symptoms_throat.svg);
				}

				a {
					position: relative;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					padding: 1rem;
					text-decoration: none;
					background-color: var(--wp--preset--color--alto-05);
					transition: 0.3s;

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

					&::before {
						display: block;
						width: 100px;
						height: 100px;
						margin-top: -4rem;
						margin-right: auto;
						margin-left: auto;
						content: "";
					}

					&::after {
						position: absolute;
						right: 1px;
						bottom: 1px;
						z-index: 2;
						border-color: transparent transparent var(--wp--preset--color--primary) transparent;
						border-style: solid;
						border-width: 0 0 20px 20px;
						content: "";
					}
				}

				h4 {
					margin-top: 1rem;
					color: var(--wp--preset--color--primary-dark);
					font-size: 1.4rem;
					font-family: var(--wp--preset--font-family--ryo-display);
					text-align: center;
				}

				.symptoms-item-list {
					display: flex;
					flex-direction: column;
					padding: 1rem;
					color: var(--wp--preset--color--dark-01);
					list-style: none;
				}
			}
		}

		.box-treatment {
			margin-top: 3rem;

			ul {
				display: grid;
				grid-gap: 1rem;
				grid-template-columns: 1fr 1fr;
				list-style: none;
				padding-inline-start: 0;

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

				li {
					background-position: center;
					background-size: cover;

					a {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 200px;
						color: var(--wp--preset--color--light-01);
						font-size: 1.4rem;
						font-family: var(--wp--preset--font-family--ryo-display);
						letter-spacing: 0.2rem;
						text-align: center;
						text-decoration: none;
						background-color: rgba(130, 195, 194, 0.8);
						border: 2px solid var(--wp--preset--color--primary);
						transition: 0.3s;

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

						h3::after {
							display: block;
							font-size: 1rem;
							letter-spacing: 0.2rem;
							text-transform: capitalize;
							content: attr(data-title);
						}

						&:hover {
							background-color: rgba(255, 255, 255, 0.8);
							border: 2px solid var(--wp--preset--color--tertiary);

							h3 {
								color: var(--wp--preset--color--tertiary);

								&::after {
									color: var(--wp--preset--color--tertiary);
								}
							}

							&::before {
								border-color: transparent transparent var(--wp--preset--color--tertiary) transparent;
							}
						}

						&::before {
							position: absolute;
							right: 1px;
							bottom: 1px;
							z-index: 2;
							border-color: transparent transparent #fff transparent;
							border-style: solid;
							border-width: 0 0 20px 20px;
							content: "";
						}
					}
				}
			}

			.hayfever {
				background-image: url(../images/treatment_01.jpg);
			}

			.immunotherapy {
				background-image: url(../images/treatment_02.jpg);
			}

			.vaccination {
				background-image: url(../images/treatment_03.jpg);
			}

			.telephone {
				background-image: url(../images/treatment_04.jpg);
			}
		}
	}
}

.frontpage-contact {
	z-index: 1;
	display: flex;
	justify-content: center;
	background-image: url(../images/background_contact.jpg);
	background-size: cover;

	.content {
		position: relative;
		width: 100%;
		max-width: 960px;
		padding: 7rem 0 7rem 0;

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

		&::before {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			width: 0;
			height: 0;
			margin: 0 auto;
			border-color: #fff transparent transparent transparent;
			border-style: solid;
			border-width: 40px 80px 0 80px;
			content: "";
		}
	}

	.box-text {
		color: var(--wp--preset--color--dark-02);

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

	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		list-style: none;

		li {
			display: flex;
			flex: 1;

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

			& + li {
				margin-left: 1rem;

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

	a {
		display: block;
		flex: 1;
		padding: 1rem;
		color: var(--wp--preset--color--light-01);
		font-family: var(--wp--preset--font-family--ryo-display);
		text-align: center;
		text-decoration: none;
		background-color: var(--wp--preset--color--tertiary);
		background-image: linear-gradient(155deg, #ff9eaa, #ffaa9e);
		border-radius: 10px;
		transition: 0.3s;

		&:hover {
			opacity: 0.7;
		}

		span {
			display: block;
		}

		&.tel .main::before {
			content: "";
		}

		&.form {
			.main {
				font-size: 2rem;

				@media (width <= 767px) {
					font-size: 1.5rem;
				}

				&::before {
					content: "";
				}
			}
		}

		.sub {
			font-size: 1rem;
			line-height: 1;

			& + .main {
				margin-top: 1rem;
			}
		}

		.main {
			display: inline-flex;
			align-items: center;
			font-size: 2.5rem;
			line-height: 1;

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

			&::before {
				margin-right: 1rem;
				font-size: 2.5rem;
				font-family: "ionicons";
			}
		}
	}
}

.message-title {
	font-weight: 500;
	font-size: 2rem;
	font-family: var(--wp--preset--font-family--ryo-display);

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

	&::before {
		display: block;
		margin-bottom: 1rem;
		color: var(--wp--preset--color--dark-03);
		font-weight: 400;
		font-size: 1.1rem;
		line-height: 1;
		letter-spacing: 0.2rem;
		text-transform: uppercase;
		content: "TITLE";
	}

	span {
		color: var(--wp--preset--color--tertiary);
	}
}

.box-title {
	position: relative;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	color: var(--wp--preset--color--dark-01);
	font-weight: 500;
	font-size: 2.5rem;
	font-family: var(--wp--preset--font-family--ryo-display);
	line-height: 1;
	text-align: center;

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

	&::after {
		display: block;
		margin-top: 1.5rem;
		color: var(--wp--preset--color--dark-03);
		font-weight: 400;
		font-size: 1.1rem;
		letter-spacing: 0.2rem;
		text-transform: uppercase;
		content: "TITLE";
	}
}

.contact-title {
	font-size: 2.5rem;
	font-family: var(--wp--preset--font-family--ryo-display);
	line-height: 1;
	text-align: center;

	@media (width <= 767px) {
		font-size: 2rem;
		line-height: 1.6;
	}

	& + .box-text {
		margin-top: 2rem;
	}
}

.box-text {
	font-size: 1rem;
	text-align: center;
}