@charset "UTF-8";

/* -----------------------------------------------------------
	基本設定、リンクカラーなど
----------------------------------------------------------- */
:root {
  --layout-width-min: 375px; /* SPのデザインカンプの横幅 */
  --layout-width-max: 1280px; /* PCのデザインカンプの横幅 */
  --layout-container-width: calc(100% - 160px);

  --base-font-size: 16;
  --rem: calc(1rem / var(--base-font-size));

  --color-base:#504742;
  --color-title: #75645A;
  --color-title-rgb: 117, 100, 90;
  --color-border: rgba(var(--color-title-rgb), 0.2);
  --color-red: #B8615E;
  --color-pink: #E4A491;
  --color-txt-red: #C0716A;

  --font-base: "Zen Kaku Gothic New", sans-serif;
  --font-mincho: "Zen Old Mincho", serif;
  --font-sans: "Aboreto", system-ui;
}
/* 中型デスクトップ（1439px以下） */
@media (max-width: 1439px) {
    :root {
        --layout-container-width: 96%;
    }
}
/* タブレット（1024px以下） */
@media (max-width: 1024px) {
    :root {
        --layout-container-width: 92%;
    }
}
/* スマホ（768px以下） */
@media (max-width: 768px) {
    :root {
        --layout-container-width: 89.6%;
    }
}

@keyframes sakurano-megumi-backgournd{0%{--c-0:hsla(21,53%,93%,1); --s-start-0:19%; --s-end-0:54%; --x-0:14%; --y-0:8%; --x-1:38%; --y-1:34%; --c-1:hsla(18,53%,74%,1); --s-start-1:6%; --s-end-1:81%; --x-2:52%; --y-2:0%; --c-2:hsla(12,65%,63%,1); --s-start-2:18%; --s-end-2:66%; --x-3:38%; --y-3:3%; --c-3:hsla(1,38%,54%,1); --s-start-3:8%; --s-end-3:80%;}100%{--c-0:hsla(18,53%,74%,1); --s-start-0:12%; --s-end-0:67%; --x-0:94%; --y-0:53%; --x-1:45%; --y-1:7%; --c-1:hsla(20,60%,93%,1); --s-start-1:12%; --s-end-1:88%; --x-2:4%; --y-2:95%; --c-2:hsla(18,53%,74%,1); --s-start-2:6%; --s-end-2:88%; --x-3:86%; --y-3:44%; --c-3:hsla(12,65%,63%,1); --s-start-3:6%; --s-end-3:69%;}}@property --c-0{syntax:'<color>';inherits:false;initial-value:hsla(21,53%,93%,1)}@property --s-start-0{syntax:'<percentage>';inherits:false;initial-value:19%}@property --s-end-0{syntax:'<percentage>';inherits:false;initial-value:54%}@property --x-0{syntax:'<percentage>';inherits:false;initial-value:14%}@property --y-0{syntax:'<percentage>';inherits:false;initial-value:8%}@property --x-1{syntax:'<percentage>';inherits:false;initial-value:38%}@property --y-1{syntax:'<percentage>';inherits:false;initial-value:34%}@property --c-1{syntax:'<color>';inherits:false;initial-value:hsla(18,53%,74%,1)}@property --s-start-1{syntax:'<percentage>';inherits:false;initial-value:6%}@property --s-end-1{syntax:'<percentage>';inherits:false;initial-value:81%}@property --x-2{syntax:'<percentage>';inherits:false;initial-value:52%}@property --y-2{syntax:'<percentage>';inherits:false;initial-value:0%}@property --c-2{syntax:'<color>';inherits:false;initial-value:hsla(12,65%,63%,1)}@property --s-start-2{syntax:'<percentage>';inherits:false;initial-value:18%}@property --s-end-2{syntax:'<percentage>';inherits:false;initial-value:66%}@property --x-3{syntax:'<percentage>';inherits:false;initial-value:38%}@property --y-3{syntax:'<percentage>';inherits:false;initial-value:3%}@property --c-3{syntax:'<color>';inherits:false;initial-value:hsla(1,38%,54%,1)}@property --s-start-3{syntax:'<percentage>';inherits:false;initial-value:8%}@property --s-end-3{syntax:'<percentage>';inherits:false;initial-value:80%}

html {
	scroll-behavior: smooth;
	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

body {
	position: relative;
	min-height: 100%;
	color: var(--color-base);
	line-height: 1.75;
	font-size: 1rem;
	@media (max-width: 767px) {
		font-size: 0.875rem;
	}
	&::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -2;
		animation: sakurano-megumi-backgournd 10s linear infinite alternate;
		--c-0:hsla(12,62%,56%,0.35);
		--c-0: hsla(21,53%,93%,1);
		--x-0: 14%;
		--y-0: 8%;
		--x-1: 38%;
		--y-1: 34%;
		--c-1: hsla(18,53%,74%,1);
		--x-2: 52%;
		--y-2: 0%;
		--c-2: hsla(12,65%,63%,1);
		--x-3: 38%;
		--y-3: 3%;
		--c-3: hsla(1,38%,54%,1);
		background-color:hsla(20,52%,89%,1);
		background-image:radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0),transparent var(--s-end-0)),radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1),transparent var(--s-end-1)),radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2),transparent var(--s-end-2)),radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3),transparent var(--s-end-3));
		background-blend-mode:normal,normal,normal,normal;
	}
	&::after {
		content: "";
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 10rem;
		background: linear-gradient(180deg, #FFF 0%, rgb(255 255 255 / 0) 100%);
		z-index: -1;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
}

body, pre, input, textarea, select { 
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal; 
}

input, select, textarea { font-size: inherit; }

*, *::before, *::after {
  box-sizing: border-box;
}
@media (min-width: 1025px) { .view_tab-sp, body .view_tab { display: none !important; } }
@media (min-width: 768px) { .view_sp { display: none !important; } }
@media (max-width: 1024px) { .view_pc { display: none !important; } }
@media (max-width: 767px) { .view_pc-tab, body .view_tab { display: none !important; } }

.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

.u-container {
	max-width: var(--layout-width-max);
    margin-inline: auto;
    width: var(--layout-container-width);
}
/* -----------------------------------------------------------
	#page
----------------------------------------------------------- */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 998;
	&.active {
		opacity: 1;
		visibility: visible;
	}
}

/* -----------------------------------------------------------
	#header
----------------------------------------------------------- */
header {
	.l-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		padding: 24px 32px 0 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap:48px;
		@media (min-width: 1025px) and (max-width: 1280px) {
			padding: 24px 8px 0;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			gap:24px;
			padding: 24px 8px 0;
		}
		@media (max-width: 767px) {
			width: 100%;
			gap:24px;
			padding: 12px 4px 0;
		}
		.logo-area {
			z-index: 10;
			width: 200px;
			@media (min-width: 768px) and (max-width: 1024px) {
				width: 160px;
			}
			@media (max-width: 767px) {
				width: 160px;
			}
		}
		nav {
			display: flex;
			gap: 32px;
			align-items: center;
			width: calc(100% - 576px);
			@media (min-width: 768px) and (max-width: 1024px) {
				gap: 16px;
				width: calc(100% - 430px);
			}
			@media (max-width: 767px) {
				display: none;
			}
			& > a,
			& > .nav-item {
				color: var(--color-75645A);
				font-size: calc(15 * var(--rem));
				font-weight: 500;
				transition: opacity 0.3s;
				position: relative;
			}
			& a:hover {
				opacity: 0.7;
			}
			.nav-item {
				position: relative;
				cursor: pointer;
				.nav-with-icon {
					display: block grid;
					grid-template: '. icon' / 1fr 10px;
					align-items: center;
					gap: 4px;
					&::before,
					&::after {
						content: "";
						grid-area: icon;
						border-block-end: 2px solid;
						color: var(--color-txt-red);
					}
					&::after {
						rotate: 90deg;
					}
				}
				.treatment-popup {
					position: absolute;
					top: calc(100% + 20px);
					left: 50%;
					transform: translateX(-50%);
					background: rgb(184 97 94 / 0.8);
					border-radius: 8px;
					padding: 4px;
					display: flex;
					flex-direction: column;
					gap:4px;
					min-width: 207px;
					opacity: 0;
					visibility: hidden;
					transition: all 0.3s ease;
					z-index: 100;
					&::before {
						content: '';
						position: absolute;
						top: -8px;
						left: 50%;
						transform: translateX(-50%);
						width: 0;
						height: 0;
						border-left: 8px solid transparent;
						border-right: 8px solid transparent;
						border-bottom: 8px solid rgb(184 97 94 / 0.8);
					}
					a {
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: #A3504E;
						padding: 14px 8px 14px 24px;
						border-radius: 8px;
						color: #fff;
						text-decoration: none;
						font-size: calc(15 * var(--rem));
						font-weight: 500;
						transition: 0.3s;
						position: relative;
						&:hover {
							background: #833E3C;
						}
						&::after {
							content: '';
							background-image: url(../images/common/icon-arrow-red.svg);
							background-position: center center;
							background-repeat: no-repeat;
							background-size: 10px auto;
							background-color: #fff;
							width: 28px;
							height: 20px;
							position: absolute;
							right: 8px;
							border-radius: 9999px;
						}
					}
				}
				@media (hover: hover) {
					&:hover .treatment-popup {
						opacity: 1;
						visibility: visible;
					}
				}
				&.active .treatment-popup {
					opacity: 1;
					visibility: visible;
				}
			}
		}
		.box-buttons {
			display: flex;
			justify-content: flex-end;
			gap:4px;
			.button-honin {
				width: 220px;
				height: 56px;
				background: rgb(255 255 255 / 0.5);
				backdrop-filter: blur(4px);
				cursor: pointer;
				transition: 0.3s;
				border: 1px solid rgba(255, 255, 255, 0.3);
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 170px;
				}
				@media (max-width: 767px) {
					width: 170px;
					height: 40px;
				}
				&:hover {
					background: rgb(255 255 255 / 0.8);
				}
				a {
					width: 100%;
					height: 100%;
					font-family: var(--font-mincho);
					line-height: 1;
					color: #405c4b;
					font-weight: 700;
					display: flex;
					align-items: center;
					justify-content: center;
					@media (min-width: 768px) and (max-width: 1024px) {
						flex-direction: column;
						gap:4px;
					}
					@media (max-width: 767px) {
						font-size: 13px;
						letter-spacing: -0.04em;
					}
					em {
						font-size: 87.5%;
						display: inline-block;
						margin-right: 7px;
						background-color: #405c4b;
						color: #fff;
						padding: 2px 8px;
						border-radius: 4px;
						@media (min-width: 768px) and (max-width: 1024px) {
							margin-right: 0;
						}
						@media (max-width: 767px) {
							padding: 2px 5px;
							margin-right: 2px;
						}
					}
				}
			}
			.button-instagram {
				width: 56px;
				height: 56px;
				background: rgb(255 255 255 / 0.5);
				backdrop-filter: blur(4px);
				border-radius: 4px;
				cursor: pointer;
				border: 1px solid rgba(255, 255, 255, 0.3);
				transition: 0.3s;
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 48px;
				}
				@media (max-width: 767px) {
					width: 40px;
					height: 40px;
				}
				&:hover {
					background: rgb(255 255 255 / 0.8);
				}
				a {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					img {
						width: 20px;
						@media (max-width: 767px) {
							width: 18px;
						}
					}
				}
			}
		}
	}
	.popup-menu {
		position: fixed;
		bottom: calc(24px + 56px + 8px); /* 下余白 + ナビ高さ + 8px */
		left: 50%;
		transform: translateX(-50%) translateY(20px);
		width: calc(100% - 40px);
		max-width: 560px;
		background: var(--color-red);
		border-radius: 40px;
		padding: 40px;
		opacity: 0;
		visibility: hidden;
		transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
		z-index: 999;
		@media (max-width: 767px) {
			width: calc(100% - 32px);
			border-radius: 24px;
			padding: 24px;
		}
		&.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
		.menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s;
			@media (max-width: 767px) {
				padding: 16px 0;
			}
			&:last-child {
				border-bottom: none;
			}
			&:hover {
				padding-left: 8px;
				.menu-item-arrow {
					transform: translateX(4px);
				}
			}
			.menu-item-left {
				display: flex;
				align-items: center;
				gap: 24px;
				border-bottom: rgb(255 255 255 / 0.2);
				@media (max-width: 767px) {
					gap:16px;
				}
			}
			.menu-item-title {
				color: #fff;
				font-size: calc(26 * var(--rem));
				font-family: var(--font-sans);
				line-height: 1;
				@media (max-width: 767px) {
					font-size: calc(18 * var(--rem));
				}
			}
			.menu-item-subtitle {
				color: #fff;
				font-size: calc(15 * var(--rem));
				font-weight: 500;
				letter-spacing: 0.08em;
				line-height: 1;
				@media (max-width: 767px) {
					font-size: calc(14 * var(--rem));
				}
			}
			.menu-item-arrow {
				width: 28px;
				height: 20px;
				background: #fff;
				border-radius: 9999px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: 0.3s;
				img {
					width: 10px;
				}
			}
        }
		.line-btn {
            margin-top: 16px;
			a {
				background: #833E3C;
				border-radius: 8px;
				padding: 24px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				transition: 0.3s;
				@media (max-width: 767px) {
					padding: 16px;
				}
				&:hover {
					opacity: 0.7;
				}
				.line-btn-left {
					display: flex;
					align-items: center;
					gap: 16px;
					@media (max-width: 767px) {
						gap:8px;
					}
				}
				.line-icon {
					width: 32px;
					height: 32px;
					border-radius: 50%;
					@media (max-width: 767px) {
						width: 26px;
						height: 26px;
					}
				}
				.line-text {
					color: #fff;
					letter-spacing: 0.04em;
				}
				.line-arrow {
					width: 48px;
					height: 24px;
					background: #B8615E url(../images/common/icon-arrow-white_blank.svg) center center no-repeat;
					background-size: 16px auto;
					border-radius: 9999px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 16px;
				}
			}
        }
		.inner-other {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16px;
		}
		.instagram-link {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            font-size: 15px;
            font-family: var(--font-sans);
            transition: 0.3s;
			&:hover {
				opacity: 0.8;
			}
			.instagram-icon {
				width: 15px;
				height: 15px;
			}
        }
		.link-shinkyu {
			a {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 2px;
				font-family: var(--font-mincho);
				color: #fff;
				font-size: 14px;
				&::after {
					content: "";
					width: 16px;
					height: 1em;
					background: #B8615E url(../images/common/icon-arrow-white_blank.svg) center center no-repeat;
					background-size: 16px auto;
					border-radius: 9999px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
				@media (hover: hover) {
					transition: 0.3s;
					&:hover {
						opacity: 0.6;
					}
				}
			}
		}
	}
	.l-global-nav {
		position: fixed;
		bottom: 24px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 40px);
		max-width: 560px;
		border-radius: 9999px;
		border: 1px solid rgb(184 97 94 / 0.3);
		background: rgb(184 97 94 / 0.8);
		backdrop-filter: blur(4px);
		padding: 4px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		gap:4px;
		place-items: center;
		z-index: 1000;
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 420px;
		}
		@media (max-width: 767px) {
			width: 62.1%;
			left: 2.1%;
			transform: translateX(0);
			padding: 2px;
		}
		.nav-item {
			width: 100%;
			height: 48px;
            letter-spacing: 0.04rem;
			border-radius: 9999px;
            transition: 0.3s;
			display: flex;
			justify-content: center;
			align-items: center;
			&:hover {
				background-color: #A3504E;
			}
			a {
				display: flex;
				align-items: center;
				gap: 8px;
				color: #fff;
				@media (max-width: 767px) {
					flex-direction: column;
					gap:0;
				}
				.nav-icon {
					width: 24px;
					height: 24px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				span {
					@media (max-width: 767px) {
						font-size: 11px;
					}
				}
			}
        }
		.menu-btn {
			width: 100%;
			border-radius: 9999px;
            display: flex;
			justify-content: center;
			align-items: center;
            gap: 8px;
            color: #fff;
            background-color: #A3504E;
            letter-spacing: 0.04rem;
            cursor: pointer;
            transition: 0.3s;
            border: none;
            padding: 0;
			height: 48px;
			font-family: var(--font-base);
			font-size: calc(16 * var(--rem));
			@media (max-width: 767px) {
				flex-direction: column;
				gap:0;
				letter-spacing: -0.04em;
			}
			.menu-icon {
				width: 24px;
				height: 24px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 4px;
				transition: 0.3s;
				span {
					width: 22px;
					height: 1px;
					background: #fff;
					transition: 0.3s;
					&:nth-child(2) {
						width: 18px;
					}
				}
			}
			#menuText {
				font-size: 12px;
			}
        }
		/* 閉じるアイコン */
		.menu-btn.active .menu-icon span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 3px);
        }
        .menu-btn.active .menu-icon span:nth-child(2) {
            opacity: 0;
        }
        .menu-btn.active .menu-icon span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -3px);
        }
	}
	.c-fix-button-line {
		position: fixed;
		right: 24px;
		bottom: 24px;
		width: 155px;
		height: 48px;
		z-index: 1000;
		@media (max-width: 1024px) {
			right: 0;
		}
		@media (max-width: 767px) {
			width: 31.8%;
		}
		a {
			border-radius: 9999px;
			border-top: 1px solid rgb(255 255 255 / 0.3);
			border-bottom: 1px solid rgb(255 255 255 / 0.3);
			background: rgb(255 255 255 / 0.7);
			backdrop-filter: blur(4px);
			padding: 8px 16px;
			display: flex;
			align-items: center;
			gap:8px;
			transition: 0.3s;
			@media (hover: hover) {
				&:hover {
					background: rgb(255 255 255 / 0.9);
					backdrop-filter: blur(10px);
				}
			}
			@media (max-width: 1024px) {
				border-radius: 9999px 0 0 9999px;
			}
			@media (max-width: 767px) {
				padding: 10px 4px 10px 12px;
				gap:6px;
			}
			.icon-line {
				width: 32px;
				@media (max-width: 767px) {
					width: 28px;
				}
			}
			.line-text {
				font-size: calc(15 * var(--rem));
				letter-spacing: 0.04em;
				font-weight: bold;
				@media (max-width: 767px) {
					font-size: calc(13 * var(--rem));
					letter-spacing: -0.04em;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	footer .p-footer
----------------------------------------------------------- */
.p-footer {
    background: rgba(255, 255, 255, 0.60);
	.p-footer__upper {
		margin-inline: auto;
		width: var(--layout-container-width);
	}
}
/* 店舗情報 カード */
.p-footer__info-card {
	@media (min-width: 768px) {
		display: grid;
		grid-template-columns: 31.5% 68.5%;
		grid-template-rows: 1fr;
	}
	.p-footer__image {
		border-radius: 16px 0 0 16px;
		overflow: hidden;
		position: relative;
		padding: 40px;
		display: flex;
		flex-direction: column;
		@media (min-width: 768px) and (max-width: 1024px) {
			padding: 40px 24px;
		}
		@media (max-width: 767px) {
			border-radius: 16px 16px 0 0;
			padding: 176px 32px 32px;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
		}
		.p-footer__shop-info {
			margin-top: auto;
			color:#fff;
			position: relative;
			z-index: 1;
			.p-footer__shop-name {
				font-size: calc(20 * var(--rem));
				line-height: 1;
				margin-bottom: 16px;
				@media (max-width: 767px) {
					font-size: calc(18 * var(--rem));
				}
			}
			.p-footer_address {
				margin-bottom: 40px;
				@media (max-width: 767px) {
					margin-bottom: 32px;
				}
			}
			.c-link-basic {
				a {
					.text {
						&::after {
							background-color: #fff;
						}
					}
					.line-arrow {
						background: #fff url(../images/common/icon-arrow-red-blank.svg) center center no-repeat;
						background-size: 16px auto;
					}
				}
			}
		}
	}
	.p-footer__details {
		background-color: var(--color-red);
		border-radius: 0 16px 16px 0;
		padding: 104px 80px;
		color: #fff;
		@media (min-width: 768px) and (max-width: 1024px) {
			padding: 56px 40px;
		}
		@media (max-width: 767px) {
			padding: 40px 24px;
			border-radius: 0 0 16px 16px;
			display: flex;
			flex-direction: column;
		}
		table {
			width: 100%;
			margin-bottom: 32px;
			@media (min-width: 1025px) and (max-width: 1280px) {
				margin-bottom: 16px;
			}
			@media (max-width: 767px) {
				order:2;
				margin-bottom: 16px;
			}
			tr {
				th {
					font-size: calc(18 * var(--rem));
					line-height: 1;
					border-bottom: 1px solid rgba(255, 255, 255,0.5);
					padding-bottom: 16px;
					@media (max-width: 767px) {
						font-size: calc(14 * var(--rem));
					}
					&.title {
						font-weight: 500;
						letter-spacing: 0.08em;
						@media (max-width: 767px) {
							letter-spacing: 0;
						}
					}
					&:not(:first-child) {
						width: 10%;
						text-align: center;
					}
					&:first-child {
						width: 25%;
					}
				}
				td {
					padding: 32px 0;
					border-bottom: 1px solid rgba(255, 255, 255,0.25);
					font-weight: 500;
					font-size: calc(18 * var(--rem));
					line-height: 1;
					@media (max-width: 767px) {
						font-size: calc(14 * var(--rem));
					}
					&.hour {
						font-weight: 700;
						letter-spacing: 0.08em;
					}
					&:not(:first-child) {
						width: 10%;
						text-align: center;
					}
					&:first-child {
						width: 25%;
					}
				}
			}
		}
		.wrap-footer__details {
			@media (min-width: 768px) {
				display: flex;
				justify-content: space-between;
			}
			@media (min-width: 768px) and (max-width: 1280px) {
				flex-direction: column;
			}
			@media (max-width: 767px) {
				display: contents;
			}
			.p-footer__tel_time {
				font-family: var(--font-sans);
				@media (min-width: 768px) and (max-width: 1280px) {
					text-align: center;
					order:2;
				}
				@media (max-width: 767px) {
					order:1;
					text-align: center;
					margin-bottom: 40px;
				}
				.p-footer__tel {
					font-weight: 400;
					line-height: 1;
					.p-footer__tel-label {
						font-size: calc(24 * var(--rem));
						display: inline-block;
						padding-right: 0.5em;
						@media (max-width: 767px) {
							font-size: calc(20 * var(--rem));
						}
					}
					.p-footer__tel-number {
						font-size: calc(40 * var(--rem));
						@media (max-width: 767px) {
							font-size: calc(36 * var(--rem));
						}
					}
				}
				.p-footer__reception-time {
					font-size: calc(14 * var(--rem));
					em {
						font-size: calc(16 * var(--rem));
					}
				}
			}
			.p-footer__notes {
				text-align: right;
				@media (min-width: 768px) and (max-width: 1280px) {
					text-align: center;
					order:1;
					margin-bottom: 40px;
				}
				@media (max-width: 767px) {
					order:3;
				}
				.p-footer__note {
					font-size: calc(14 * var(--rem));
					em {
						font-size: calc(16 * var(--rem));
						font-weight: 500;
					}
				}
				.p-footer__caution {
					font-size: calc(11 * var(--rem));
					margin-top: 4px;
				}
			}
		}
	}
}
/* フッターメインコンテンツ */
.p-footer__content {
	margin-top: 120px;
	@media (min-width: 1025px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
	}
	@media (min-width: 1025px) and (max-width: 1280px) {
		grid-template-columns: 25% 75%;
	}
	@media (min-width: 768px) and (max-width: 1024px) {
		position: relative;
	}
	@media (max-width: 767px) {
		margin-top: 64px;
	}
    .p-footer__logo {
		max-width: 320px;
		text-align: left;
		@media (min-width: 1025px) {
			grid-area: 1 / 1 / 2 / 2;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			margin-bottom: 40px;
		}
		@media (max-width: 767px) {
			width: 90%;
			margin: 0 auto 56px;
			text-align: center;
		}
		a {
			display: inline-block;
			@media (max-width: 767px) {
				max-width: 200px;
			}
		}
		.p-footer__affiliation {
			margin-bottom: 16px;
			font-family: var(--font-mincho);
			font-size: 15px;
			letter-spacing: 0.08em;
			display: flex;
			justify-content: flex-end;
			@media (max-width: 767px) {
				font-size: 14px;
				margin-bottom: 24px;
				display: inline-block;
				justify-content: initial;
			}
		}
	}
	.p-footer__columns {
		@media (min-width: 1025px) {
			grid-area: 1 / 2 / 3 / 3;
			display: flex;
			justify-content: flex-end;
			gap:104px;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			display: flex;
			justify-content: space-between;
		}
		/* ナビゲーション */
		.p-footer__nav {
			text-align: right;
			width: calc(100% - 408px);
			@media (min-width: 768px) and (max-width: 1024px) {
				text-align: left;
				padding-left: 24px;
			}
			@media (max-width: 767px) {
				text-align: left;
				width: 100%;
				margin-bottom: 64px;
			}
			.p-footer__nav-list {
				text-align: left;
				display: inline-flex;
				flex-direction: column;
				gap:20px;
				@media (max-width: 767px) {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(3, 1fr);
					gap:0;
				}
				>li {
					>a {
						display: inline-block;
						line-height: 1;
						position: relative;
						font-weight: 500;
						padding-left: 1em;
						@media (hover: hover) {
							transition: 0.3s;
							&:hover {
								opacity: 0.6;
							}
						}
						&::before {
							content: '・';
							position: absolute;
							top: 0;
							left: 0;
						}
					}
					.p-footer__nav-sub {
						display: flex;
						flex-direction: column;
						gap: 0.5em;
						padding-left: 2em;
						margin-top: 0.5em;
						li {
							a {
								font-size: 87.5%;
								display: inline-block;
								line-height: 1;
								font-weight: 400;
								@media (hover: hover) {
									transition: 0.3s;
									&:hover {
										opacity: 0.6;
									}
								}
							}
						}
					}
					&:nth-child(1) {
						@media (max-width: 767px) {
							grid-area: 1 / 1 / 2 / 2;
						}
					}
					&:nth-child(2) {
						@media (max-width: 767px) {
							grid-area: 1 / 2 / 2 / 3;
						}
					}
					&:nth-child(3) {
						@media (max-width: 767px) {
							grid-area: 2 / 1 / 4 / 2;
						}
					}
					&:nth-child(4) {
						@media (max-width: 767px) {
							grid-area: 2 / 2 / 3 / 3;
						}
					}
					&:nth-child(5) {
						@media (max-width: 767px) {
							grid-area: 3 / 2 / 4 / 3;
						}
					}
				}
			}
		}
		/* Instagram */
		.p-footer__instagram {
			max-width: 408px;
			.p-footer__instagram-header {
				margin-bottom: 16px;
				a {
					display: flex;
					align-items: center;
					gap:16px;
					@media (hover: hover) {
						transition: 0.3s;
						&:hover {
							opacity: 0.6;
						}
					}
					h3 {
						font-family: var(--font-sans);
						font-size: calc(24 * var(--rem));
						color: var(--color-title);
						font-weight: 400;
						line-height: 1;
					}
					.line-arrow {
						width: 48px;
						height: 24px;
						background: #B8615E url(../images/common/icon-arrow-white_blank.svg) center center no-repeat;
						background-size: 16px auto;
						border-radius: 9999px;
						display: flex;
						align-items: center;
						justify-content: center;
						color:#fff;
						font-size: 16px;
					}
				}
			}
			.c-instagram-slider {
				width: 100%;
				#sbi_images {
					display: flex !important;
					overflow-x: auto;
					gap: 8px;
					scroll-snap-type: x mandatory;
					-webkit-overflow-scrolling: touch;
					&::-webkit-scrollbar {
						height: 2px;
					}
					&::-webkit-scrollbar-track {
						background: rgba(117, 100, 90, 0.20);
						border-radius: 999px;
					}
					&::-webkit-scrollbar-thumb {
						background: #75645A;
						border-radius: 999px;
					}
					.sbi_item {
						flex: 0 0 calc((100% - 8px) / 2);
						scroll-snap-align: start;
					}
				}
			}
		}
	}
	/* さくら鍼灸整骨院 */
	.banner-sakura {
		@media (min-width: 1025px) {
			grid-area: 2 / 1 / 3 / 2;
			max-width: 320px;
			margin-top: auto;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			position: absolute;
			top: 0;
			right: 0;
			width: 40%;
			max-width: 280px;
		}
		@media (max-width: 767px) {
			width: 80%;
			margin: 40px auto 24px;
		}
		a {
			display: inline-block;
			@media (hover: hover) {
				transition: 0.3s;
				&:hover {
					opacity: 0.6;
				}
			}
			img {
				border-radius: 8px;
			}
		}
	}
}
/* 英語社名 */
.p-footer__lower {
    padding: 24px 0 40px;
    text-align: center;
	@media (max-width: 767px) {
		padding: 16px 0 72px;
	}
	.p-footer__copyright {
		font-family: var(--font-sans);
		font-weight: 400;
		letter-spacing: 0.08em;
		color: #fff;
		font-size: 8.5vw;
		line-height: 1;
	}
}
/* -----------------------------------------------------------
	Component
----------------------------------------------------------- */
.c-title-basic {
	color: var(--color-title);
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 16px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	@media (max-width: 1024px) {
		flex-direction: column;
		align-items: flex-start;
		border-bottom: none;
		padding-bottom: 0;
	}
	.en-title {
		font-family: var(--font-sans);
		text-transform: uppercase;
		font-size: calc(56 * var(--rem));
		font-weight: 400;
		line-height: 1;
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 100%;
			border-bottom: 1px solid var(--color-border);
			padding-bottom: 8px;
		}
		@media (max-width: 767px) {
			width: 100%;
			font-size: calc(40 * var(--rem));
			border-bottom: 1px solid var(--color-border);
			padding-bottom: 8px;
		}
	}
	h2 {
		font-family: var(--font-mincho);
		font-size: calc(20 * var(--rem));
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.16em;
		text-align: right;
		position: relative;
		@media (min-width: 768px) and (max-width: 1024px) {
			margin-left: auto;
			padding-top: 8px;
			&::after {
				bottom: auto;
				top: -1px;
			}
		}
		@media (max-width: 767px) {
			margin-left: auto;
			font-size: calc(15 * var(--rem));
			padding-top: 8px;
			&::after {
				bottom: auto;
				top: -1px;
			}
		}
		&::after {
			content: '';
			background-color: var(--color-title);
			width: 100%;
			height: 1px;
			position: absolute;
			right: 0;
			bottom: -17px;
		}
	}
}

.c-link-basic {
	a {
		display: flex;
		align-items: center;
		gap:16px;
		.text {
			position: relative;
			font-size: calc(18 * var(--rem));
			font-weight: 500;
			line-height: 1;
			padding-bottom: 8px;
			@media (max-width: 767px) {
				font-size: calc(16 * var(--rem));
			}
			&::after {
				content: '';
				background-color: var(--color-base);
				width: 100%;
				height: 1px;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
		.line-arrow {
			width: 48px;
			height: 24px;
			background: #B8615E url(../images/common/icon-arrow-white.svg) center center no-repeat;
			background-size: 16px auto;
			border-radius: 9999px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 16px;
		}
		@media (hover: hover) {
			transition: 0.3s;
			&:hover {
				opacity: 0.6;
			}
		}
	}
}

.c-title-middle {
	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;
	display: flex;
	align-items: center;
	gap:16px;
	&::before {
		content: "";
		background-color: var(--color-pink);
		border-radius: 50%;
		width: 16px;
		aspect-ratio: 1/1;
	}
	@media (max-width: 767px) {
		font-size: calc(20 * var(--rem));
		gap:8px;
		&::before {
			width: 10px;
		}
	}
}

.c-button-accent {
	a {
		padding: 16px 40px 16px 16px;
		border-radius: 9999px;
		background: #B8615E url(../images/common/icon-arrow-white.svg) 90% center no-repeat;
		background-position: right 16px center;
		background-size: 14px auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		color: #fff;
		line-height: 1;
		font-weight: 500;
		@media (hover: hover) {
			transition: 0.3s;
			&:hover {
				opacity: 0.6;
			}
		}
	}
	&.blank {
		a {
			background-image: url(../images/common/icon-arrow-white_blank.svg);
			background-size: 18px auto;
		}
	}
}

.c-button-cta {
	max-width: 480px;
	margin-inline: auto;
	a {
		padding: 20px 40px;
		background-color: var(--color-red);
		border-radius: 9999px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap:16px;
		font-size: calc(18 * var(--rem));
		color: #fff;
		line-height: 1;
		font-weight: 500;
		width: 100%;
		@media (max-width: 767px) {
			font-size: calc(15 * var(--rem));
			padding: 12px 24px;
		}
		.text {
			display: flex;
			align-items: center;
			gap:16px;
			@media (max-width: 767px) {
				gap:8px;
			}
			img {
				width: 40px;
				aspect-ratio: 1/1;
				@media (max-width: 767px) {
					width: 32px;
				}
			}
		}
		.arrow {
			width: 48px;
			height: 24px;
			background: #fff url(../images/common/icon-arrow-red.svg) center center no-repeat;
			background-size: 16px auto;
			border-radius: 9999px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 16px;
			@media (max-width: 767px) {
				width: 32px;
				height: 16px;
				background-size: 12px auto;
			}
		}
		@media (hover: hover) {
			transition: 0.3s;
			&:hover {
				opacity: 0.6;
			}
		}
	}
}

.c-pagetitle {
	position: relative;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background: url(../images/common/sakura-hana.avif) 0 bottom no-repeat;
		background-size: 100% auto;
		width: 11.8vw;
		max-width: 170px;
		aspect-ratio: 1/1.526;
		mix-blend-mode: multiply;
	}
	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		background: url(../images/common/sakura-eda-page_righttop.avif) 0 0 no-repeat;
		background-size: 100% auto;
		width: 34.2vw;
		max-width: 493px;
		aspect-ratio: 1/0.493;
		mix-blend-mode: multiply;
	}
	@media (min-width: 768px) and (max-width: 1024px) {
		&::before {
			top: 64px;
			aspect-ratio: 1/2.163;
		}
	}
	@media (max-width: 767px) {
		&::before {
			width: 30vw;
		}
		&::after {
			width: 70vw;
			filter: blur(2px);
		}
	}
	.wrap-pagetitle {
		position: relative;
		z-index: 1;
		padding-top: 204px;
		&:after {
			content: '';
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
			width: 100%;
			height: 160px;
			position: absolute;
			top: 0;
			left: 0;
		}
		@media (max-width: 767px) {
			padding-top: 160px;
			&::after {
				background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
				height: 104px;
			}
		}
		.item-pagetitle {
			color: #fff;
			.en {
				font-family: var(--font-sans);
				font-weight: 400;
				line-height: 1;
				font-size: calc(64 * var(--rem));
				letter-spacing: 0.04em;
				margin-bottom: 24px;
				display: block;
				@media (max-width: 767px) {
					font-size: calc(48 * var(--rem));
				}
			}
			h1 {
				font-family: var(--font-mincho);
				font-size: calc(24 * var(--rem));
				font-weight: 600;
				line-height: 1;
				letter-spacing: 0.16em;
				@media (max-width: 767px) {
					font-size: calc(22 * var(--rem));
				}
			}
		}
	}
}

.c-relatedpages {
	background: rgba(255, 255, 255, 0.60);
	padding-bottom: 240px;
	@media (max-width: 767px) {
		padding-bottom: 160px;
	}
	.list-relatedpages {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		gap:4px;
		@media (max-width: 767px) {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(2, 1fr);
			gap:8px;
		}
		.item-relatedpages {
			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;
				height: 100%;
				@media (hover: hover) {
					transition: 0.3s;
					&:hover {
						opacity: 0.6;
					}
				}
				@media (max-width: 1024px) {
					gap:13px;
					padding: 24px;
				}
				.inner-relatedpages {
					padding-left: 24px;
					display: flex;
					flex-direction: column;
					@media (min-width: 1025px) and (max-width: 1280px) {
						padding-left: 0;
					}
					@media (max-width: 1024px) {
						padding-left: 0;
						padding-top: 16px;
					}
					.en {
						font-family: var(--font-sans);
						color: var(--color-title);
						font-size: calc(32 * var(--rem));
						line-height: 1;
						margin-bottom: 40px;
					}
					.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: 4px;
						@media (max-width: 767px) {
							font-size: calc(22 * var(--rem));
						}
					}
					.text-lead {
						font-size: calc(15 * var(--rem));
						margin-bottom: 24px;
						@media (max-width: 1024px) {
							font-size: calc(14 * var(--rem));
						}
					}
					.line-arrow {
						margin-top: auto;
						width: 48px;
						height: 24px;
						background: #B8615E url(../images/common/icon-arrow-white.svg) center center no-repeat;
						background-size: 16px auto;
						border-radius: 9999px;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
					}
				}
				.img {
					border-radius: 9999px;
					width: 150px;
					@media (max-width: 1024px) {
						width: 104px;
					}
				}
			}
		}
	}
}
.c-list-basic {
	li {
		display: flex;
		gap:8px;
		letter-spacing: 0.08em;
		@media (max-width: 767px) {
			letter-spacing: 0;
		}
		&::before {
			content: "";
			background-color: var(--color-pink);
			border-radius: 50%;
			width: 6px;
			height: 6px;
			display: inline-block;
			margin-top: 0.75em;
		}
	}
}
.c-list-secondary {
	li {
		display: flex;
		@media (max-width: 767px) {
			letter-spacing: 0;
		}
		&::before {
			content: "・";
			display: inline-block;
		}
	}
}
.c-table-basic {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 24px;
	tr {
		th,td {
			border-top: 1px solid var(--color-border);
			padding: 24px 24px 0;
			@media (max-width: 767px) {
				display: block;
			}
		}
		th {
			border-left: 1px solid var(--color-border);
			line-height: 1.2;
			font-weight: 500;
			color: var(--color-title);
			letter-spacing: 0.08em;
			vertical-align: top;
			@media (max-width: 767px) {
				font-weight: bold;
				font-size: 110%;
			}
		}
		td {
			position: relative;
			&::before {
				content: "";
				border-left: 1px solid var(--color-border);
				width: 1px;
				height: calc(100% - 24px);
				position: absolute;
				bottom: 0;
				left: 0;
			}
			@media (max-width: 767px) {
				border-top: none;
				padding-top: 16px;
				&::before {
					height: 100%;
				}
			}
		}
	}
}
/* -----------------------------------------------------------
	IntersectionObserver
----------------------------------------------------------- */
.anime-fade-in {
	opacity: 0;
	mask-image: linear-gradient(to bottom, #fff, #fff 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-image: linear-gradient(to bottom, #fff, #fff 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
	mask-size: 100% 300%;
	-webkit-mask-size: 100% 300%;
	mask-position: 0 100%;
	-webkit-mask-position: 0 100%;
	transition: all 1.2s ease-out;
	will-change: opacity, transform, mask-position;
	&.is-active {
		opacity: 1;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
	}
}