@charset "UTF-8";
body#menu .c-relatedpages {
	.item-menu {
		display: none;
	}
}
/* -----------------------------------------------------------
	.p-oriental_medicine
----------------------------------------------------------- */
.p-oriental_medicine {
	position: relative;
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	&::before {
		content: '';
		width: 100%;
		height: 240px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 100%);
		position: absolute;
		bottom: 0;
		left: 0;
	}
	&::after {
		content: '';
		background: url(../images/common/sakura-hana.avif) right 0 no-repeat;
		background-size: 100% auto;
		width: 11.1vw;
		max-width: 160px;
		aspect-ratio: 1/1.884;
		position: absolute;
		bottom: 180px;
		left: 0;
		mix-blend-mode: multiply;
	}
	@media (max-width: 767px) {
		&::after {
			width: 25vw;
			bottom: 64px;
		}
	}
	.l-wrap-oriental_medicine {
		position: relative;
		z-index: 1;
		@media (min-width: 1025px) {
			margin-top: 40px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.p-oriental_medicine-text {
			@media (min-width: 768px) {
				width: 45%;
				padding-left: 11.1vw;
				oder:1;
				margin: 0 auto;
			}
			@media (min-width: 1025px) and (max-width: 1280px) {
				padding-left: 40px;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				width: 80%;
				padding-left: 0;
				margin-top: 64px;
			}
			@media (max-width: 767px) {
				width: 89.6%;
				margin: 40px auto 0;
			}
			h2 {
				font-family: var(--font-mincho);
				font-weight: 600;
				font-size: calc(32 * var(--rem));
				letter-spacing: 0.16em;
				margin-bottom: 40px;
				@media (min-width: 768px) and (max-width: 1024px) {
					font-size: calc(24 * var(--rem));
					text-align: center;
				}
				@media (max-width: 767px) {
					font-size: calc(22 * var(--rem));
					margin-bottom: 24px;
					text-align: center;
				}
			}
			.p-oriental_medicine-text-inner {
				display: flex;
				flex-direction: column;
				gap: 1em;
				@media (min-width: 1025px) {
					max-width: 480px;
				}
				.text {
					letter-spacing: 0.08em;
				}
			}
		}
		.p-oriental_medicine-imgs {
			text-align: center;
			@media (min-width: 1025px) {
				width: 55%;
				order:2;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				width: 100%;
				margin: 0 auto;
			}
			@media (max-width: 767px) {
				width: 100%;
				margin: 0 auto;
				overflow: hidden;
				img {
					max-width: none;
					width: 105%;
					margin-left: -5%;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.c-pagelink
----------------------------------------------------------- */
.c-pagelink {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 80px;
	.list-pagelink {
		display: grid;
		/* grid-template-columns: repeat(4, 1fr); */
		grid-template-columns: repeat(auto-fit, 314px);
		gap:8px;
		justify-content: center;
		@media (max-width: 767px) {
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto;
			gap:8px;
		}
		.item-pagelink {
			a {
				border-radius: 8px;
				background: rgba(255, 255, 255, 0.50);
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				gap:8px;
				padding: 40px 32px;
				height: 100%;
				@media (hover: hover) {
					transition: 0.3s;
					&:hover {
						opacity: 0.6;
					}
				}
				@media (max-width: 1024px) {
					gap:13px;
					padding: 24px;
				}
				@media (max-width: 767px) {
					padding: 24px;
				}
				.inner-relatedpages {
					display: flex;
					flex-direction: column;
					height: 100%;
					@media (min-width: 1025px) and (max-width: 1280px) {
						padding-left: 0;
					}
					@media (max-width: 1024px) {
						padding-left: 0;
					}
					@media (max-width: 767px) {
						width: 100%;
					}
					.title {
						font-family: var(--font-mincho);
						color: var(--color-title);
						font-size: calc(24 * var(--rem));
						line-height: 1.5;
						letter-spacing: 0.08em;
						margin-bottom: 8px;
						@media (max-width: 767px) {
							font-size: calc(20 * var(--rem));
						}
					}
					.text-lead {
						font-size: calc(15 * var(--rem));
						line-height: 1.5;
						margin-bottom: 24px;
						@media (max-width: 1024px) {
							font-size: calc(14 * var(--rem));
						}
						@media (max-width: 767px) {
							margin-bottom: 0;
						}
					}
					.line-arrow {
						margin-top: auto;
						width: 20px;
						height: 28px;
						background: #B8615E url(../images/common/icon-arrow-white-down.svg) center center no-repeat;
						background-size: 10px auto;
						border-radius: 9999px;
						display: flex;
						align-items: center;
						justify-content: center;
						@media (max-width: 767px) {
							margin-left: auto;
						}
					}
				}
				.img {
					border-radius: 9999px;
					width: 100px;
					@media (max-width: 1024px) {
						width: 80px;
					}
					@media (max-width: 767px) {
						display: none;
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-menu
----------------------------------------------------------- */
.p-menu {
	background: rgba(255, 255, 255, 0.60);
	.item-menu {
		padding-bottom: 240px;
		@media (max-width: 767px) {
			padding-bottom: 120px;
		}
		.img-main {
			text-align: center;
			margin-bottom: 120px;
			@media (max-width: 767px) {
				margin-bottom: 80px;
			}
		}
		.inner-menu {
			@media (min-width: 768px) {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				gap:80px;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				gap:80px 40px;
			}
			.box-outline {
				width: 50%;
				@media (max-width: 767px) {
					width: 100%;
				}
				.box-title {
					margin-bottom: 64px;
					@media (max-width: 767px) {
						margin-bottom: 40px;
					}
					.en {
						font-family: var(--font-sans);
						color: var(--color-pink);
						font-size: calc(56 * var(--rem));
						font-weight: 400;
						line-height: 1;
						margin-bottom: 16px;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: calc(48 * var(--rem));
						}
						@media (max-width: 767px) {
							font-size: calc(36 * var(--rem));
						}
					}
					h2 {
						font-family: var(--font-mincho);
						color: var(--color-title);
						font-size: calc(24 * var(--rem));
						font-weight: 600;
						line-height: 1;
						letter-spacing: 0.08em;
						@media (max-width: 767px) {
							font-size: calc(20 * var(--rem));
						}
					}
				}
				h3 {
					font-family: var(--font-mincho);
					color: var(--color-title);
					font-size: calc(24 * var(--rem));
					letter-spacing: 0.08em;
					margin-bottom: 24px;
					@media (max-width: 767px) {
						font-size: calc(18 * var(--rem));
					}
				}
				.text-lead {
					letter-spacing: 0.08em;
				}
			}
			.img-menu-slider {
				position: relative;
				width: calc(50% - 80px);
				aspect-ratio: 4/3;
				margin: 0 auto;
				border-radius: 9999px;
				overflow: hidden;
				@media (min-width: 768px) and (max-width: 1024px) {
					width: calc(50% - 40px);
				}
				@media (max-width: 767px) {
					width: 90%;
					margin: 40px auto 0;
				}
				.slide {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					opacity: 0;
					animation: fade 9s infinite;/* 12秒 = 3秒 × 3枚 */
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					&:nth-child(1) {
						animation-delay: 0s;
					}
					&:nth-child(2) {
						animation-delay: 3s;
					}
					&:nth-child(3) {
						animation-delay: 6s;
					}
				}
			}
			.box-recomend {
				border: 1px solid var(--color-border);
				width: 100%;
				padding: 48px;
				@media (min-width: 768px) and (max-width: 1024px) {
					padding: 40px;
				}
				@media (max-width: 767px) {
					margin-top: 64px;
					padding: 32px 24px;
				}
				h4 {
					font-family: var(--font-mincho);
					font-size: calc(24 * var(--rem));
					font-weight: 400;
					line-height: 1;
					letter-spacing: 0.08em;
					margin-bottom: 24px;
					@media (max-width: 767px) {
						font-size: calc(20 * var(--rem));
						margin-bottom: 16px;
					}
				}
				.c-list-basic {
					display: grid;
					gap:16px;
					@media (min-width: 1025px) {
						grid-template-columns: repeat(3, 1fr);
					}
					@media (min-width: 768px) and (max-width: 1024px) {
						grid-template-columns: repeat(2, 1fr);
					}
					@media (max-width: 767px) {
						grid-template-columns: repeat(1, 1fr);
						gap:8px;
					}
				}
			}
			.list-menu-effect {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(2, auto);
				gap:8px;
				@media (max-width: 767px) {
					margin-top: 64px;
					grid-template-columns: repeat(2, 1fr);
				}
				.item-menu-effect {
					border-radius: 8px;
					background: rgba(255, 255, 255, 0.50);
					padding: 32px;
					@media (min-width: 768px) and (max-width: 1024px) {
						padding: 32px 24px;
					}
					@media (max-width: 767px) {
						padding: 24px 16px;
					}
					.deco-number {
						text-align: center;
						color: var(--color-pink);
						position: relative;
						padding-bottom: 16px;
						margin-bottom: 16px;
						&::after {
							content: "";
							width: 34px;
							height: 1px;
							background-color: var(--color-border);
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							margin: 0 auto;
						}
						@media (max-width: 767px) {
							padding-bottom: 8px;
							&::after {
								width: 16px;
							}
						}
						span {
							display: block;
							font-family: var(--font-mincho);
							line-height: 1.5;
							font-weight: 600;
						}
						em {
							font-family: var(--font-sans);
							font-size: calc(32 * var(--rem));
							line-height: 1;
							font-weight: 400;
							letter-spacing: 0.04em;
							@media (max-width: 767px) {
								font-size: calc(24 * var(--rem));
							}
						}
					}
					h4 {
						text-align: center;
						font-family: var(--font-mincho);
						font-size: calc(22 * var(--rem));
						font-weight: 600;
						line-height: 1.5;
						margin-bottom: 32px;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: calc(20 * var(--rem));
						}
						@media (max-width: 767px) {
							font-size: calc(16 * var(--rem));
							margin-bottom: 16px;
						}
					}
				}
			}
			.box-flow {
				width: 100%;
				padding-top: 24px;
				@media (max-width: 767px) {
					padding-top: 64px;
				}
				.list-flow {
					position: relative;
					margin-top: 64px;
					&:before {
						content: "";
						background-color: var(--color-border);
						width: 1px;
						height: calc(100% - 40px - 2em);
						position: absolute;
						top: 0;
						left: 6px;
					}
					@media (min-width: 768px) and (max-width: 1024px) {
						&::before {
							height: calc(100% - 40px - 4em);
						}
					}
					@media (max-width: 767px) {
						margin-top: 24px;
						&::before {
							height: calc(100% - 24px);
							left: 4px;
						}
					}
					.item-flow {
						display: flex;
						align-items: center;
						position: relative;
						padding: 40px;
						padding-right: 0;
						&::before {
							content: "";
							background-color: var(--color-pink);
							border-radius: 50%;
							width: 13px;
							height: 13px;
							position: absolute;
							top: calc(50% - 6px);
							left: 0;
						}
						&:after {
							content: "";
							border-bottom: 1px dashed var(--color-border);
							width: calc(100% - 40px);
							height: 1px;
							position: absolute;
							bottom: 0;
							right: 0;
						}
						@media (max-width: 767px) {
							flex-wrap: wrap;
							align-items: flex-end;
							padding: 24px 0 24px 24px;
							&::before {
								width: 9px;
								height: 9px;
								top: 27px;
							}
							&:after {
								width: calc(100% - 24px);
							}
						}					
						.number {
							font-family: var(--font-sans);
							line-height: 1;
							letter-spacing: 0.16em;
							font-size: calc(15 * var(--rem));
							width: 10%;
							@media (min-width: 768px) and (max-width: 1024px) {
								width: 15%;
							}
							@media (max-width: 767px) {
								width: 90%;
							}
						}
						.box-detail {
							@media (min-width: 1025px) {
								display: contents;
							}
							@media (min-width: 768px) and (max-width: 1024px) {
								width: 85%;
								padding-left: 64px;
							}
							@media (max-width: 767px) {
								margin-top: 24px;
							}
							h5 {
								font-family: var(--font-mincho);
								color: var(--color-title);
								font-weight: 600;
								line-height: 1.2;
								font-size: calc(22 * var(--rem));
								@media (min-width: 1025px) {
									width: 25%;
									padding-left: 24px;
								}
								@media (min-width: 768px) and (max-width: 1024px) {
									margin-bottom: 8px;
								}
								@media (max-width: 767px) {
									font-size: calc(18 * var(--rem));
									margin-bottom: 8px;
								}
							}
							.txt {
								@media (min-width: 1025px) {
									width: 65%;
									padding-left: 64px;
								}
								.caution {
									font-size: 81%;
								}
							}
						}
					}
				}
			}
			.box-other {
				.c-title-middle {
					margin-top: 80px;
					margin-bottom: 24px;
				}
				dl {
					margin-bottom: 32px;
					dt {
						font-weight: 500;
						line-height: 1.2;
						margin-bottom: 8px;
					}
				}
				.list-caution {
					li {
						display: flex;
						align-items: flex-start;
						font-size: 87.5%;
						&::before {
							content: '・';
						}
					}
				}
			}
			.c-button-cta {
				width: 100%;
				@media (max-width: 767px) {
					margin-top: 40px;
				}
			}
		}
	}
}
/* フェードアニメーション */
@keyframes fade {
	 0% {
		opacity: 0;
		z-index: 1;
	}
	11.11% { /* 1秒 / 9秒 = 11.11% */
		opacity: 1;
		z-index: 2;
	}
	33.33% { /* 3秒 / 9秒 = 33.33% */
		opacity: 1;
		z-index: 2;
	}
	44.44% { /* 4秒 / 9秒 = 44.44% */
		opacity: 0;
		z-index: 1;
	}
	100% {
		opacity: 0;
		z-index: 1;
	}
}

/* -----------------------------------------------------------
	.p-fukucha
----------------------------------------------------------- */
.p-fukucha {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 120px;
	}
	.wrap-fukusha {
		max-width: 960px;
		border: 1px solid var(--color-border);
		@media (min-width: 768px) {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: 1fr repeat(2, auto);
			align-items: center;
			padding: 64px 104px;
		}
		@media (max-width: 767px) {
			padding: 40px;
		}
		.box-title {
			@media (min-width: 768px) {
				grid-area: 1 / 1 / 2 / 2;
			}
			@media (max-width: 767px) {
				text-align: center;
				margin-bottom: 24px;
			}
			.title-sub {
				font-family: var(--font-mincho);
				color: var(--color-title);
				font-size: calc(18 * var(--rem));
				font-weight: 600;
				line-height: 1.5;
				letter-spacing: 0.08em;
				margin-bottom: 15px;
				@media (max-width: 767px) {
					font-size: calc(15 * var(--rem));
				}
			}
			h3 {
				display: flex;
				align-items: center;
				gap:32px;
				@media (max-width: 767px) {
					flex-direction: column;
					gap:16px;
				}
				span {
					display: block;
					letter-spacing: 0.16em;
					line-height: 1;
					&.jp {
						font-family: var(--font-mincho);
						color: var(--color-title);
						font-size: calc(36 * var(--rem));
						font-weight: 500;
					}
					&.en {
						font-family: var(--font-sans);
						color: var(--color-red);
						font-weight: 400;
						font-size: 87.5%;
					}
				}
			}
		}
		figure {
			@media (min-width: 768px) {
				grid-area: 1 / 2 / 2 / 3;
			}
			@media (max-width: 767px) {
				width: 100%;
				text-align: center;
			}
			img {
				border-radius: 9999px;
			}
		}
		.text {
			letter-spacing: 0.08em;
			padding-top: 40px;
			@media (min-width: 768px) {
				grid-area: 2 / 1 / 3 / 3;
			}
			@media (max-width: 767px) {
				padding-top: 32px;
			}
		}
		.text-caution {
			font-size: 87.5%;
			padding-top: 16px;
			@media (min-width: 768px) {
				grid-area: 3 / 1 / 4 / 3;
				text-align: right;
			}
		}
	}
}