﻿.swiper.swiper-visual {
	width: 100%;
	position: relative;
	.swiper-slide {
		display: flex;
		align-items: center;

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

			@media (width < 768px) {
				height: 400px;
				object-position: left;
			}
		}
	}

	.swiper-text {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: 1;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin-block-end: var(--wp--preset--spacing--60);
		font-family: var(--wp--preset--font-family--serif);
		text-align: center;

		.box-01 {
			text-shadow: 1px 1px 4px var(--wp--preset--color--white);

			h1 {
				margin-block-start: 0;
				font-weight: 600;
				font-size: var(--wp--preset--font-size--larger);
				line-height: 1.3;
				font-family: var(--wp--preset--font-family--serif);
				+ p {
					margin-block-start: var(--wp--preset--spacing--20);
				}

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

			p {
				margin-block-start: var(--wp--preset--spacing--50);

				@media (width < 768px) {
					font-size: var(--wp--preset--font-size--normal);
				}
			}

			@media (width < 768px) {
				max-width: calc(100vw - var(--wp--preset--spacing--40));
			}
		}
	}
}

.frontpage-menu-01 {
	padding-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--60);
	padding-inline-start: 0;
	padding-inline-end: 0;
	background-color: var(--wp--preset--color--alto-05);

	.content {
		max-width: 1000px;
		margin-inline-start: auto;
		margin-inline-end: auto;

		@media (width < 768px) {
			width: calc(100% - var(--wp--preset--spacing--40));
		}
	}

	.list-menu {
		display: grid;
		grid-gap: 10px;
		grid-template-columns: repeat(3, 1fr);
		margin-block-end: 0;
		list-style: none;

		li {
			flex-basis: calc((100% / 3) - var(--wp--preset--spacing--20));

			a {
				display: block;
				height: 100%;
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: var(--wp--preset--spacing--20);
				padding-inline-end: var(--wp--preset--spacing--20);
				text-align: center;
				text-decoration: none;
				background-color: var(--wp--preset--color--white);
				box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.12);
				transition: 0.3s;

				&:hover {
					opacity: 0.5;
				}
			}

			h3 {
				margin-block-start: 0;
				color: var(--wp--preset--color--dark-01);
				font-size: var(--wp--preset--font-size--large);
				font-family: var(--wp--preset--font-family--sanserif);

				@media (width < 768px) {
					font-size: var(--wp--preset--font-size--normal);
				}

				@media (width >= 768px) {
					br {
						display: none;
					}
				}
			}

			@media (width < 768px) {
				flex-basis: calc((100% / 3) - var(--wp--preset--spacing--20));
			}
		}
	}
}

.container-fluid {
	width: 100%;
	max-width: 100%;
}

.frontpage-treatment {
	.content {
		max-width: var(--wp--custom--container--lv-1);
		margin-inline-start: auto;
		margin-inline-end: auto;
		padding-block-end: var(--wp--preset--spacing--40);

		@media (width < 768px) {
			width: calc(100% - var(--wp--preset--spacing--40));
		}
	}

	p {
		text-align: center;

		+ .box-content {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	.list-column {
		display: flex;
		justify-content: space-between;
		margin-block-end: 0;
		list-style: none;

		@media (width < 768px) {
			flex-flow: column;
		}
	}

	.list-column-item {
		display: flex;
		flex-basis: calc(100% / 4);
		flex-flow: column;

		+ .list-column-item {
			margin-inline-start: var(--wp--preset--spacing--20);

			@media (width < 768px) {
				margin-block-start: var(--wp--preset--spacing--20);
				margin-inline-start: 0;
			}
		}
	}

	.list-treatment {
		display: flex;
		flex-flow: column;
		list-style: none;
	}

	.list-treatment-item {
		& + & {
			margin-block-start: var(--wp--preset--spacing--20);
		}

		a {
			display: block;
			color: var(--wp--preset--color--dark-01);
			text-align: start;
			text-decoration: none;
			transition: 0.3s;

			&:hover {
				opacity: 0.7;
			}

			&::before {
				margin-inline-end: 0.5rem;
				color: var(--wp--preset--color--secondary);
				font-family: var(--wp--preset--font-family--ionicons);
				content: "";
			}
		}
	}

	h3 {
		margin-block-end: 0;
		text-align: start;
		border-block-end: 1px solid var(--wp--preset--color--border);

		span {
			margin-inline-start: var(--wp--preset--spacing--20);
			color: var(--wp--preset--color--dark-03);
			font-weight: 400;
			font-size: var(--wp--preset--font-size--small);
			text-transform: uppercase;
		}

		+ ul {
			margin-block-start: var(--wp--preset--spacing--20);
		}
	}
}

.frontpage-pickup-01 {
	padding-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--60);
	padding-inline-start: 0;
	padding-inline-end: 0;
	background-color: var(--wp--preset--color--alto-05);

	.content {
		max-width: var(--wp--custom--container--lv-2);
		margin-inline-start: auto;
		margin-inline-end: auto;

		@media (width < 768px) {
			max-width: calc(100% - var(--wp--preset--spacing--40));
		}
	}

	h2 {
		margin-block-end: 0;
		font-weight: 600;
		font-family: var(--wp--preset--font-family--sanserif);
		text-align: center;

		+ .list-menu {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	.list-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-block-end: 0;
		list-style: none;

		li {
			flex-basis: calc((100% / 4) - var(--wp--preset--spacing--20));
			margin-block-start: 0.5rem;
			margin-block-end: 0.5rem;
			margin-inline-start: 0.5rem;
			margin-inline-end: 0.5rem;

			a {
				display: block;
				height: 100%;
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: var(--wp--preset--spacing--20);
				padding-inline-end: var(--wp--preset--spacing--20);
				text-align: center;
				text-decoration: none;
				background-color: var(--wp--preset--color--white);
				box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.12);
				transition: 0.3s;

				&:hover {
					opacity: 0.5;
				}
			}

			figure {
				+ h3 {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

			h3 {
				margin-block-end: 0;
				color: var(--wp--preset--color--dark-01);
				font-size: var(--wp--preset--font-size--large);
				line-height: 1;

				+ p {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

			p {
				margin-block-end: 0;
				color: var(--wp--preset--color--dark-02);
			}

			@media (width < 768px) {
				flex-basis: calc((100% / 2) - var(--wp--preset--spacing--20));
			}
		}

		+ .box-button {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	.box-button {
		text-align: center;

		a {
			display: inline-flex;
			padding-block-start: var(--wp--preset--spacing--20);
			padding-block-end: var(--wp--preset--spacing--20);
			padding-inline-start: var(--wp--preset--spacing--50);
			padding-inline-end: var(--wp--preset--spacing--50);
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--medium);
			line-height: 1;
			text-decoration: none;
			border: 4px solid var(--wp--preset--color--dark-01);
			transition: 0.3s;

			.ion {
				margin-inline-start: var(--wp--preset--spacing--20);
				transition: inherit;
			}

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

				.ion {
					color: var(--wp--preset--color--light-01);
					transform: translateX(5px);
				}
			}
		}
	}

	@media (width < 768px) {
		padding-block-start: var(--wp--preset--spacing--40);
		padding-block-end: var(--wp--preset--spacing--40);
		padding-inline-start: 0;
		padding-inline-end: 0;
	}
}

.frontpage-pickup-02 {
	.content {
		max-width: var(--wp--custom--container--lv-2);
		margin-inline-start: auto;
		margin-inline-end: auto;

		@media (width < 768px) {
			width: calc(100% - var(--wp--preset--spacing--40));
		}
	}

	h2 {
		margin-block-end: 0;
		text-align: center;
	}

	.box-content {
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		overflow: hidden;

		.swiper {
			padding-block-start: var(--wp--preset--spacing--60);
			padding-block-end: var(--wp--preset--spacing--60);
			padding-inline-start: 0;
			padding-inline-end: 0;
		}

		.swiper-slide {
			text-align: center;

			a {
				color: var(--wp--preset--color--dark-01);
				text-decoration: none;
			}

			figure {
				+ h3 {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

			h3 {
				font-weight: 500;
				font-size: var(--wp--preset--font-size--large);
				line-height: 1;

				+ p {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

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

		.swiper-pagination {
			position: absolute;
			inset-block-start: 0;
			inset-inline-end: 0;
			inset-inline-start: initial;
			width: auto;
		}

		.swiper-label {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			color: var(--wp--preset--color--dark-03);
			text-transform: uppercase;
		}
	}

	.box-button {
		text-align: center;

		a {
			display: inline-flex;
			padding-block-start: var(--wp--preset--spacing--20);
			padding-block-end: var(--wp--preset--spacing--20);
			padding-inline-start: var(--wp--preset--spacing--50);
			padding-inline-end: var(--wp--preset--spacing--50);
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--medium);
			line-height: 1;
			text-decoration: none;
			border: 4px solid var(--wp--preset--color--dark-01);
			transition: 0.3s;

			.ion {
				margin-inline-start: var(--wp--preset--spacing--20);
				font-size: calc(1em * 1.2);
				transition: inherit;
			}

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

				.ion {
					color: var(--wp--preset--color--light-01);
					transform: translateX(5px);
				}
			}
		}
	}
}

.frontpage-about {
	background-image: url(../../images/frontpage_background_flower.jpg);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;

	.content {
		max-width: var(--wp--custom--container--lv-2);
		margin-inline-start: auto;
		margin-inline-end: auto;
		padding-block-end: var(--wp--preset--spacing--60);

		@media (width < 768px) {
			width: calc(100% - var(--wp--preset--spacing--40));
		}
	}

	h2 {
		text-align: center;
	}

	.box-content {
		margin-block-start: 0;
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;

		figure {
			text-align: center;

			+ p {
				margin-block-start: var(--wp--preset--spacing--20);
			}
		}

		.logo {
			width: 200px;
		}

		.doctor-photo {
			img {
				@media (width < 768px) {
					width: 100%;
				}
			}
		}

		p {
			text-align: center;

			+ figure {
				margin-block-start: var(--wp--preset--spacing--40);
			}
		}

		+ .box-button {
			margin-block-start: var(--wp--preset--spacing--20);
		}
	}

	.box-button {
		ul {
			display: flex;
			justify-content: center;
			list-style: none;

			a {
				@media (width < 768px) {
					width: 100%;
				}
			}

			li {
				+ li {
					margin-inline-start: var(--wp--preset--spacing--20);

					@media (width < 768px) {
						margin-block-start: var(--wp--preset--spacing--20);
						margin-inline-start: 0;
					}
				}
			}

			@media (width < 768px) {
				flex-flow: column;
			}
		}
	}
}

.frontpage-quality {
	background-image: url(../../images/frontpage_background_quality.jpg);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;

	.content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: var(--wp--preset--spacing--60);
		padding-inline-start: 0;
		padding-inline-end: 0;

		h2 {
			font-size: var(--wp--preset--font-size--larger);
			line-height: 1;
			text-align: center;

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

			+ .box-content {
				margin-block-start: var(--wp--preset--spacing--40);
			}
		}

		.box-content {
			text-align: center;

			+ .box-button {
				margin-block-start: var(--wp--preset--spacing--40);
			}
		}

		.box-button {
			ul {
				display: flex;
				flex-flow: column;
				align-items: center;
				list-style: none;

				li {
					+ li {
						margin-block-start: var(--wp--preset--spacing--20);
					}
				}
			}
		}

		@media (width < 768px) {
			max-width: calc(100vw - var(--wp--preset--spacing--40));
			padding-block-start: var(--wp--preset--spacing--40);
			padding-block-end: var(--wp--preset--spacing--40);
			padding-inline-start: 0;
			padding-inline-end: 0;
		}
	}
}

.frontpage-other {
	.content {
		max-width: 1000px;
		margin-inline-start: auto;
		margin-inline-end: auto;
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: var(--wp--preset--spacing--60);
		padding-inline-start: 0;
		padding-inline-end: 0;

		@media (width < 768px) {
			width: calc(100% - var(--wp--preset--spacing--40));
		}
	}

	h1 {
		margin-block-start: 0;
		font-size: var(--wp--preset--font-size--larger);
		font-family: var(--wp--preset--font-family--serif);
		line-height: 1;
		text-align: center;

		+ .box-title-description {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	.box-title-description {
		text-align: center;

		+ .box-content {
			margin-block-start: var(--wp--preset--spacing--40);
		}
	}

	.box-content {
		text-align: center;

		.item {
			display: flex;
			flex-flow: column;
			align-items: center;
			height: 100%;
			padding-block-start: var(--wp--preset--spacing--40);
			padding-block-end: var(--wp--preset--spacing--40);
			padding-inline-start: var(--wp--preset--spacing--40);
			padding-inline-end: var(--wp--preset--spacing--40);
			text-decoration: none;

			figure {
				order: 1;
				margin-block-start: 0;

				img {
					width: 100%;
				}

				+ h2 {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

			h2 {
				order: 2;
				color: var(--wp--preset--color--dark-01);
				font-size: var(--wp--preset--font-size--huge);
				font-family: var(--wp--preset--font-family--serif);

				+ p {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

			p {
				flex: 1;
				order: 3;
				color: var(--wp--preset--color--dark-02);

				+ button {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

			button {
				order: 4;
			}

			@media (width < 768px) {
				padding-block-start: 0;
				padding-block-end: 0;
				padding-inline-start: 0;
				padding-inline-end: 0;
			}
		}

		ul {
			display: flex;
			list-style: none;

			li {
				flex: 1;

				+ li {
					@media (width < 768px) {
						margin-block-start: var(--wp--preset--spacing--20);
					}
				}
			}

			+ .frame {
				margin-block-start: var(--wp--preset--spacing--40);
			}

			@media (width < 768px) {
				flex-flow: column;
			}
		}
	}

	.frame {
		display: flex;
		flex-flow: column;
		align-items: center;
		height: 100%;
		padding-block-start: var(--wp--preset--spacing--40);
		padding-block-end: var(--wp--preset--spacing--40);
		padding-inline-start: var(--wp--preset--spacing--40);
		padding-inline-end: var(--wp--preset--spacing--40);
		text-decoration: none;
		border: 1px solid var(--wp--preset--color--secondary);

		h2 {
			color: var(--wp--preset--color--dark-01);
			font-size: var(--wp--preset--font-size--x-large);
			font-family: var(--wp--preset--font-family--serif);
			line-height: 1;

			+ p {
				margin-block-start: var(--wp--preset--spacing--20);
			}
		}

		p {
			color: var(--wp--preset--color--dark-02);

			+ a {
				margin-block-start: var(--wp--preset--spacing--20);
			}
		}
	}
}

.frontpage-logo {
	.content {
		max-width: var(--wp--custom--container--lv-2);
		margin-inline-start: auto;
		margin-inline-end: auto;
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: var(--wp--preset--spacing--60);
		padding-inline-start: 0;
		padding-inline-end: 0;

		@media (width < 768px) {
			width: calc(100% - var(--wp--preset--spacing--40));
			padding-block-start: 0;
			padding-block-end: 0;
			padding-inline-start: 0;
			padding-inline-end: 0;
		}
	}

	ul {
		display: flex;
		justify-content: center;
		list-style: none;

		li {
			+ li {
				@media (width < 768px) {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}
		}

		img {
			@media (width < 768px) {
				display: block;
				margin-inline-start: auto;
				margin-inline-end: auto;
			}
		}

		@media (width < 768px) {
			flex-flow: column;
		}
	}
}

.frontpage-warning-area {
	.content {
		max-width: 1000px;
		margin-inline-start: auto;
		margin-inline-end: auto;

		@media (width < 768px) {
			width: calc(100% - var(--wp--preset--spacing--40));
		}
	}

	ul {
		list-style: none;
	}

	.normal {
		display: block;
		margin-block-start: var(--wp--preset--spacing--20);
		padding-block-start: 0.5rem;
		padding-block-end: 0.5rem;
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
		color: var(--wp--preset--color--secondary);
		font-size: var(--wp--preset--font-size--medium-large);
		text-align: center;
		text-decoration: none;
		background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 10%, transparent);
		border: 2px solid var(--wp--preset--color--secondary);
		transition: 0.3s;

		&:hover {
			opacity: 0.5;
		}

		i {
			margin-inline-end: var(--wp--preset--spacing--20);

			@media (width < 768px) {
				position: absolute;
				inset-block-start: var(--wp--preset--spacing--20);
				inset-inline-start: var(--wp--preset--spacing--20);
			}
		}

		@media (width < 768px) {
			position: relative;
			padding-inline-start: var(--wp--preset--spacing--50);
			font-size: var(--wp--preset--font-size--normal);
			text-align: start;
		}
	}
}

.frontpage-information {
	padding-block-start: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--40);
	padding-inline-start: 0;
	padding-inline-end: 0;

	.content {
		display: grid;
		grid-gap: var(--wp--preset--spacing--40);
		grid-template-rows: 150px;
		grid-template-columns: 150px 1fr auto;
		align-items: flex-start;
		max-width: 1000px;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-inline-start: auto;
		margin-inline-end: auto;

		h2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			margin-block-start: 0;
			margin-block-end: 0;
			margin-inline-start: auto;
			margin-inline-end: auto;
			padding-block-start: var(--wp--preset--spacing--20);
			padding-block-end: var(--wp--preset--spacing--20);
			padding-inline-start: var(--wp--preset--spacing--20);
			padding-inline-end: var(--wp--preset--spacing--20);
			color: var(--wp--preset--color--dark-02);
			font-weight: 400;
			font-size: var(--wp--preset--font-size--medium-large);
			font-family: var(--wp--preset--font-family--sanserif);
			line-height: 1.7;
			text-align: center;

			&::after {
				display: block;
				color: var(--wp--preset--color--primary);
				font-size: var(--wp--preset--font-size--small);
				text-align: center;
				content: "- NEWS -";
			}

			@media (width < 768px) {
				padding-block-start: 0;
				padding-block-end: 0;
				padding-inline-start: 0;
				padding-inline-end: 0;
				border: 0;
			}
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			height: 100%;
			margin-block-start: 0;
			margin-block-end: 0;
			margin-inline-start: 0;
			margin-inline-end: 0;
			padding-block-start: 0;
			padding-block-end: 0;
			padding-inline-start: 0;
			padding-inline-end: 0;
			overflow: scroll;
			list-style: none;

			li {
				width: 100%;

				a {
					display: grid;
					grid-gap: var(--wp--preset--spacing--40);
					grid-template-columns: auto 1fr;
					padding-block-start: 0.5rem;
					padding-block-end: 0.5rem;
					padding-inline-start: var(--wp--preset--spacing--20);
					padding-inline-end: var(--wp--preset--spacing--20);
					color: var(--wp--preset--color--dark-02);
					text-decoration: none;
					transition: all 0.3s ease-out;

					time {
						color: var(--wp--preset--color--dark-03);
						transition: all 0.3s ease-out;
					}

					&:hover {
						color: var(--wp--preset--color--primary);

						time {
							color: var(--wp--preset--color--primary);
						}
					}

					@media (width < 768px) {
						grid-gap: var(--wp--preset--spacing--20);
					}
				}

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

			@media (width < 768px) {
				max-height: 200px;
			}
		}

		.button-area {
			display: flex;
			align-self: flex-end;

			a {
				padding-block-start: 0.5rem;
				padding-block-end: 0.5rem;
				padding-inline-start: var(--wp--preset--spacing--20);
				padding-inline-end: var(--wp--preset--spacing--50);

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

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

					&::after {
						transform: translateY(-50%) translateX(-2rem);
					}
				}

				&::after {
					position: absolute;
					inset-block-start: 50%;
					inset-inline-start: 100%;
					width: 1rem;
					height: 1rem;
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%2066.25%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3Anone%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A10px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpolyline%20class%3D%22a%22%20points%3D%2298.75%205%20155%2061.25%205%2061.25%22%2F%3E%3C%2Fsvg%3E");
					background-repeat: no-repeat;
					background-position: center;
					background-size: 15px;
					transform: translateY(-50%) translateX(-2.3rem);
					transition: all 0.3s ease;
					content: "";
				}
			}

			@media (width < 768px) {
				justify-content: center;
			}
		}

		@media (width < 768px) {
			grid-template-rows: auto auto auto;
			grid-template-columns: 1fr;
		}
	}

	@media (width < 768px) {
		max-width: 100%;
		padding-block-start: var(--wp--preset--spacing--20);
		padding-block-end: var(--wp--preset--spacing--20);
		padding-inline-start: var(--wp--preset--spacing--20);
		padding-inline-end: var(--wp--preset--spacing--20);
	}
}

.frontpage-banner {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 65%, white);

	.content {
		width: 100%;
		max-width: 100%;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-inline-start: auto;
		margin-inline-end: auto;
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: var(--wp--preset--spacing--60);
		padding-inline-start: 0;
		padding-inline-end: 0;
		text-align: center;

		a {
			display: inline-block;
			margin-block-start: 0;
			margin-block-end: 0;
			margin-inline-start: auto;
			margin-inline-end: auto;
			padding-block-start: var(--wp--preset--spacing--20);
			padding-block-end: var(--wp--preset--spacing--20);
			padding-inline-start: var(--wp--preset--spacing--30);
			padding-inline-end: var(--wp--preset--spacing--30);
			color: var(--wp--preset--color--primary);
			font-size: var(--wp--preset--font-size--large);
			text-align: center;
			text-decoration: none;
			background-color: var(--wp--preset--color--light-01);
			border: 2px solid var(--wp--preset--color--primary);
			transition: 0.5s;

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

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

		@media (width < 768px) {
			max-width: calc(100% - var(--wp--preset--spacing--40));
			padding-block-start: var(--wp--preset--spacing--40);
			padding-block-end: var(--wp--preset--spacing--40);
			padding-inline-start: 0;
			padding-inline-end: 0;
		}
	}
}

.frontpage-time {
	padding-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--60);
	padding-inline-start: 0;
	padding-inline-end: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 60%, white);

	.content {
		max-width: 900px;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-inline-start: auto;
		margin-inline-end: auto;

		.box-title {
			+ .time-area {
				margin-block-start: var(--wp--preset--spacing--60);
			}
		}

		.time-area {
			padding-block-start: var(--wp--preset--spacing--40);
			padding-block-end: var(--wp--preset--spacing--40);
			padding-inline-start: var(--wp--preset--spacing--40);
			padding-inline-end: var(--wp--preset--spacing--40);
			background-color: var(--wp--preset--color--light-01);

			table {
				width: 100%;
			}

			+ .box-calendar {
				margin-block-start: var(--wp--preset--spacing--40);
			}

			@media (width < 768px) {
				padding-block-start: 0;
				padding-block-end: 0;
				padding-inline-start: 0;
				padding-inline-end: 0;
			}
		}

		.box-calendar {
			ul {
				list-style: none;
			}

			li {
				text-align: center;
			}

			a {
				display: inline-block;
				margin-block-start: 0;
				margin-block-end: 0;
				margin-inline-start: auto;
				margin-inline-end: auto;
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: var(--wp--preset--spacing--40);
				padding-inline-end: var(--wp--preset--spacing--40);
				color: var(--wp--preset--color--primary);
				font-size: var(--wp--preset--font-size--large);
				text-align: center;
				text-decoration: none;
				background-color: var(--wp--preset--color--light-01);
				border: 2px solid var(--wp--preset--color--primary);
				transition: 0.5s;

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

		@media (width < 768px) {
			width: calc(100vw - var(--wp--preset--spacing--40));
		}
	}
}

.frontpage-feature {
	padding-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--60);
	padding-inline-start: 0;
	padding-inline-end: 0;

	.content {
		max-width: 900px;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-inline-start: auto;
		margin-inline-end: auto;

		.box-title {
			margin-block-end: var(--wp--preset--spacing--60);

			+ .box-content {
				margin-block-start: var(--wp--preset--spacing--60);
			}
		}

		.box-content {
			display: flex;
			flex-wrap: wrap;
			grid-template-rows: auto auto;
			margin-block-end: 0;
			list-style: none;

			li {
				display: flex;
				flex-basis: 50%;

				figure {
					align-self: flex-start;
					margin-inline-end: var(--wp--preset--spacing--20);
					margin-block-end: 0;
					padding-block-start: var(--wp--preset--spacing--20);
					padding-block-end: var(--wp--preset--spacing--20);
					padding-inline-start: var(--wp--preset--spacing--20);
					padding-inline-end: var(--wp--preset--spacing--20);
					background-color: color-mix(in srgb, var(--wp--preset--color--primary) 60%, white);

					svg {
						display: block;
						width: 80px;
						margin-block-start: 0;
						margin-block-end: 0;
						margin-inline-start: auto;
						margin-inline-end: auto;
						fill: var(--wp--preset--color--primary);
					}
				}

				h3 {
					width: 100%;
					margin-block-end: 0;
					color: var(--wp--preset--color--primary);
					font-weight: 500;
					font-size: var(--wp--preset--font-size--medium-large);
					line-height: 1;
				}

				p {
					margin-block-start: var(--wp--preset--spacing--20);
					margin-block-end: 0;
					color: var(--wp--preset--color--dark-02);
				}

				img {
					width: 100%;
				}

				&:nth-of-type(2) {
					@media (width < 768px) {
						margin-block-start: var(--wp--preset--spacing--20);
					}
				}

				&:nth-of-type(3) {
					margin-block-start: var(--wp--preset--spacing--20);
				}

				&:nth-of-type(4) {
					margin-block-start: var(--wp--preset--spacing--20);
				}
			}

			+ .box-banner {
				margin-block-start: var(--wp--preset--spacing--60);
			}

			@media (width < 768px) {
				flex-direction: column;
			}
		}

		.box-banner {
			text-align: center;

			img {
				width: 700px;
				max-width: 100%;
			}
		}

		@media (width < 768px) {
			width: calc(100vw - var(--wp--preset--spacing--40));
		}
	}
}

.frontpage-online {
	padding-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--60);
	padding-inline-start: 0;
	padding-inline-end: 0;
	background-color: var(--wp--preset--color--primary-l);

	.content {
		display: flex;
		width: 100%;
		max-width: 1100px;
		margin-inline-start: auto;
		margin-inline-end: auto;
		padding-block-start: var(--wp--preset--spacing--60);
		padding-block-end: var(--wp--preset--spacing--60);
		padding-inline-start: var(--wp--preset--spacing--60);
		padding-inline-end: var(--wp--preset--spacing--60);
		background-image: url(https://omorimachi.com/wp/wp-content/themes/pxlm-omorimachi/images/frontpage_online.jpg);
		background-repeat: no-repeat;
		background-size: cover;

		.first {
			flex-basis: 60%;
			margin-inline-end: var(--wp--preset--spacing--20);

			img {
				width: 100%;
			}

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

		.second {
			flex-basis: 40%;

			@media (width < 768px) {
				flex-basis: calc(100% - var(--wp--preset--spacing--40));
				margin-inline-start: auto;
				margin-inline-end: auto;
			}
		}

		.box-title {
			.ja,
			.en {
				text-align: end;
			}

			+ .sub {
				margin-block-start: var(--wp--preset--spacing--40);
			}
		}

		.sub {
			font-size: var(--wp--preset--font-size--large);
		}

		.normal {
			+ .box-button {
				margin-block-start: var(--wp--preset--spacing--40);
			}
		}

		.note {
			color: var(--wp--preset--color--dark-02);
			font-size: var(--wp--preset--font-size--small);
		}

		.box-button {
			text-align: end;

			a {
				display: block;
				margin-inline-start: auto;
				padding-block-start: var(--wp--preset--spacing--20);
				padding-block-end: var(--wp--preset--spacing--20);
				padding-inline-start: var(--wp--preset--spacing--20);
				padding-inline-end: var(--wp--preset--spacing--20);
				color: var(--wp--preset--color--light-01);
				text-align: center;
				text-decoration: none;
				background-color: var(--wp--preset--color--primary);
				border: 1px solid var(--wp--preset--color--primary);
				transition: 0.3s;

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

		@media (width < 768px) {
			padding-block-start: var(--wp--preset--spacing--60);
			padding-block-end: var(--wp--preset--spacing--60);
			padding-inline-start: 0;
			padding-inline-end: 0;
			background-position: bottom;
			background-size: contain;
		}
	}

	@media (width < 768px) {
		padding-block-start: 0;
		padding-block-end: 0;
		padding-inline-start: 0;
		padding-inline-end: 0;
		background-color: var(--wp--preset--color--light-01);
	}
}

.site-footer {
	margin-block-start: 0;
}

.box-title {
	text-align: center;

	.ja,
	.en {
		display: block;
	}

	.ja {
		color: var(--wp--preset--color--dark-02);
		font-weight: 400;
		font-size: var(--wp--preset--font-size--huge);
		font-family: var(--wp--preset--font-family--sanserif);
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}

	.en {
		color: var(--wp--preset--color--primary);
		font-weight: 500;
		font-size: var(--wp--preset--font-size--normal);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-indent: 0.1em;

		&::before,
		&::after {
			content: "-";
		}

		&::before {
			margin-block-start: var(--wp--preset--spacing--20);
		}

		&::after {
			margin-block-start: var(--wp--preset--spacing--20);
		}
	}
}

.belt-black {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-block-end: 0;
	margin-inline-start: calc(50% - 50vw);
	padding-block-start: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--30);
	padding-inline-start: 0;
	padding-inline-end: 0;
	color: var(--wp--preset--color--light-01);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
	text-align: center;
	background-color: var(--wp--preset--color--primary);

	&::after {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-end: 0;
		inset-inline-start: 0;
		width: 0;
		height: 0;
		margin-inline-start: auto;
		margin-inline-end: auto;
		border-color: var(--wp--preset--color--primary) transparent transparent transparent;
		border-style: solid;
		border-width: 12px 15px 0 15px;
		content: "";
	}

	+ p {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

.button-outline {
	position: relative;
	display: inline-flex;
	justify-content: center;
	padding-block-start: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--40);
	padding-inline-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--dark-01);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1;
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--dark-01);
	transition: 0.3s;

	.ion {
		margin-inline-start: var(--wp--preset--spacing--20);
		font-size: calc(1em * 1.2);
		transition: inherit;
	}

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

		.ion {
			color: var(--wp--preset--color--light-01);
			transform: translateX(5px);
		}

		&:after {
			border-block-start: 7px var(--wp--preset--color--light-01) solid;
		}
	}

	&::after {
		position: absolute;
		inset-inline-end: -4px;
		inset-block-end: -4px;
		z-index: 20;
		width: 0;
		height: 0;
		margin-inline-start: -25px;
		border: 7px solid transparent;
		border-block-start: 7px #333 solid;
		transform: rotate(-45deg);
		content: " ";
	}
}

.button-pink {
	position: relative;
	display: inline-flex;
	justify-content: center;
	padding-block-start: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--20);
	padding-inline-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--light-01);
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1;
	text-decoration: none;
	background-color: var(--wp--preset--color--secondary);
	border: 1px solid var(--wp--preset--color--secondary);
	transition: 0.3s;

	.ion {
		margin-inline-start: var(--wp--preset--spacing--20);
		font-size: calc(1em * 1.2);
		transition: inherit;
	}

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

		.ion {
			color: var(--wp--preset--color--light-01);
			transform: translateX(5px);
		}

		&:after {
			border-block-start: 7px var(--wp--preset--color--secondary) solid;
		}
	}

	&::after {
		position: absolute;
		inset-inline-end: -4px;
		inset-block-end: -4px;
		z-index: 20;
		width: 0;
		height: 0;
		margin-inline-start: -25px;
		border: 7px solid transparent;
		border-block-start: 7px var(--wp--preset--color--light-01) solid;
		transform: rotate(-45deg);
		content: " ";
	}
}

.none {
	opacity: 0.3;
	user-select: none;
	pointer-events: none;
}

.none2 {
	user-select: none;
	pointer-events: none;
}
