@charset "utf-8";
html {
	line-height: 1;
	scroll-behavior: smooth;
}
body {
	font-size: 16px;
	font-weight: 400;
	line-height: 180%;
	letter-spacing: 3%;
	font-family: "Zen Maru Gothic", sans-serif;
	color: #636058;
	background-color:#FFFBF3;
}
img {
	width:100%;
}
a:hover {
	opacity: 0.8;
	transition: 0.3s;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.v-rl {
	writing-mode: vertical-rl;
}
.absolute {
	position: absolute;
}
.relative {
	position: relative;
}
.bg-white {
	background-color:#fff;
}
.bg-cream {
	background-color:#FFF7E8;
}
.text-white {
	color:#fff!important;
}
.pt-0 {
	padding-top: 0px!important;
}
.pt-10 {
	padding-top: 10px!important;
}
.pt-20 {
	padding-top: 20px!important;
}
.pt-30 {
	padding-top: 30px!important;
}
.pt-40 {
	padding-top: 40px!important;
}
.pt-50 {
	padding-top: 50px!important;
}
.pt-60 {
	padding-top: 60px!important;
}
.pt-70 {
	padding-top: 70px!important;
}
.pt-80 {
	padding-top: 80px!important;
}
.pt-90 {
	padding-top: 90px!important;
}
.pt-100 {
	padding-top: 100px!important;
}
.pt-120 {
	padding-top: 120px!important;
}
.pt-140 {
	padding-top: 140px!important;
}
.pt-160 {
	padding-top: 160px!important;
}
.pb-0 {
	padding-bottom: 0!important;
}
.pb-10 {
	padding-bottom: 10px!important;
}
.pb-20 {
	padding-bottom: 20px!important;
}
.pb-30 {
	padding-bottom: 30px!important;
}
.pb-40 {
	padding-bottom: 40px!important;
}
.pb-50 {
	padding-bottom: 50px!important;
}
.pb-60 {
	padding-bottom: 60px!important;
}
.pb-70 {
	padding-bottom: 70px!important;
}
.pb-80 {
	padding-bottom: 80px!important;
}
.pb-90 {
	padding-bottom: 90px!important;
}
.pb-100 {
	padding-bottom: 100px!important;
}
.pb-120 {
	padding-bottom: 120px!important;
}
.pb-140 {
	padding-bottom: 140px!important;
}
.pb-160 {
	padding-bottom: 160px!important;
}
.mt-0 {
	margin-top: 0!important;
}
.mt-10 {
	margin-top: 10px!important;
}
.mt-20 {
	margin-top: 20px!important;
}
.mt-30 {
	margin-top: 30px!important;
}
.mt-40 {
	margin-top: 40px!important;
}
.mt-50 {
	margin-top: 50px!important;
}
.mt-60 {
	margin-top: 60px!important;
}
.mt-70 {
	margin-top: 70px!important;
}
.mt-80 {
	margin-top: 80px!important;
}
.mt-100 {
	margin-top: 100px!important;
}
.mt-120 {
	margin-top: 120px!important;
}
.mt-140 {
	margin-top: 140px!important;
}
.mt-160 {
	margin-top: 160px!important;
}
.mb-0 {
	margin-bottom: 0!important;
}
.mb-10 {
	margin-bottom: 10px!important;
}
.mb-20 {
	margin-bottom: 20px!important;
}
.mb-30 {
	margin-bottom: 30px!important;
}
.mb-40 {
	margin-bottom: 40px!important;
}
.mb-60 {
	margin-bottom: 60px!important;
}
.mb-80 {
	margin-bottom: 80px!important;
}
.mb-100 {
	margin-bottom: 100px!important;
}
.mb-120 {
	margin-bottom: 120px!important;
}
.mb-140 {
	margin-bottom: 140px!important;
}
.mb-160 {
	margin-bottom: 160px!important;
}
.ml-0 {
	margin-left: 0px!important;
}
.ml-20 {
	margin-left: 20px!important;
}
.ml-30 {
	margin-left: 30px!important;
}
.ml-40 {
	margin-left: 40px!important;
}

.mr-0 {
	margin-right: 0px!important;
}
.mr-20 {
	margin-right: 20px!important;
}
.mr-30 {
	margin-right: 30px!important;
}
.mr-40 {
	margin-right: 40px!important;
}
.mr-50 {
	margin-right: 50px!important;
}
.mr-60 {
	margin-right: 60px!important;
}

.br-08 {
	border-radius: 8px;
}
.br-10 {
	border-radius: 10px;
}
.br-20 {
	border-radius: 20px;
}

.flex {
	display: flex;
}
.grid {
	display: grid;
}
.grid-1-1fr {
	grid-template-columns: repeat(1,1fr);
}
.grid-2-1fr {
	grid-template-columns: repeat(2,1fr);
}
.grid-3-1fr {
	grid-template-columns: repeat(3,1fr);
}
.grid-2-2fr {
	grid-template-columns: repeat(2,2fr);
}
.grid-3-2fr {
	grid-template-columns: repeat(3,2fr);
}
.grid-2-3fr {
	grid-template-columns: repeat(2,3fr);
}
.grid-3-3fr {
	grid-template-columns: repeat(3,3fr);
}
.grid-4-2fr {
	grid-template-columns: repeat(4,2fr);
}
.grid-4-3fr {
	grid-template-columns: repeat(4,3fr);
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}
.justify-end {
	justify-content: end;
}
.flex-wrap {
	flex-wrap: wrap;
}
.align-center {
	align-items: center;
}
.align-flex-start {
	align-items: flex-start;
}
.content-center {
	align-content: center;
}
.align-baseline {
	align-items: baseline;
}
.align-end {
	align-items: flex-end;
}
.gap-64 {
	gap:64px;
}
.col-1-2 {
	width:48%;
	margin:0 auto;
}
.col-1-3 {
	width:32%;
	margin:0 auto;
}
.col-2-3 {
	width:64%;
	margin:0 auto;
}
.col-1-4 {
	width:23%;
	margin:0 auto;
}
.col-3-4 {
	width:69%;
	margin:0 auto;
}
.col-1-5 {
	width:18%;
	margin:0 auto;
}
.col-4-5 {
	width:72%;
	margin:0 auto;
}
.col-1-6 {
	width:15%;
	margin:0 auto;
}

.about-box {
	position: absolute;
	top:18%;
	left: 0;
	right:0;
	margin:0 auto;
	background-color:#fff;
	border-radius: 0 0 20px 20px;
	border-top:2px solid #C8A87A;
	padding: 40px;
	width:80%;
}
.about-box .grid {
	gap:40px;
}
.gmap {
	width:100%;
	aspect-ratio:3 / 3.5;
}

@media screen and (max-width: 768px) {
	body {
		font-size: 15px;
	}
	.pc {
		display: none!important;
	}
	.sp {
		display: block!important;
	}
	.pt-0-sp {
		padding-top: 0px!important;
	}
	.pt-10-sp {
		padding-top: 10px!important;
	}
	.pt-20-sp {
		padding-top: 20px!important;
	}
	.pt-30-sp {
		padding-top: 30px!important;
	}
	.pt-40-sp {
		padding-top: 40px!important;
	}
	.pt-60-sp {
		padding-top: 60px!important;
	}
	.pt-80-sp {
		padding-top: 80px!important;
	}
	.pb-0-sp {
		padding-bottom: 0px!important;
	}
	.pb-10-sp {
		padding-bottom: 10px!important;
	}
	.pb-20-sp {
		padding-bottom: 20px!important;
	}
	.pb-30-sp {
		padding-bottom: 30px!important;
	}
	.pb-40-sp {
		padding-bottom: 40px!important;
	}
	.pb-60-sp {
		padding-bottom: 60px!important;
	}
	.pb-80-sp {
		padding-bottom: 80px!important;
	}
	.pb-100-sp {
		padding-bottom: 100px!important;
	}
	.m-0-sp {
		margin: 0!important;
	}
	.mt-10-sp {
		margin-top:10px!important;
	}
	.mt-20-sp {
		margin-top:20px!important;
	}
	.mt-30-sp {
		margin-top:30px!important;
	}
	.mt-40-sp {
		margin-top:40px!important;
	}
	.mt-60-sp {
		margin-top:60px!important;
	}
	.mb-10-sp {
		margin-bottom:10px!important;
	}
	.mb-20-sp {
		margin-bottom:20px!important;
	}
	.mb-30-sp {
		margin-bottom:30px!important;
	}
	.mb-40-sp {
		margin-bottom:40px!important;
	}
	.mb-60-sp {
		margin-bottom:60px!important;
	}
	.flex-wrap-sp {
		flex-wrap: wrap;
	}
	.flex-reverse-sp {
		flex-direction: column-reverse;
	}
	.col-1-2 ,.col-1-3 ,.col-2-3 ,.col-1-4 ,.col-3-4 ,.col-1-5 ,.col-4-5 {
		width:100%;
		margin:0;
	}

	.about-box {
		padding: 16px;
		top:16%;
	}
	.about-box .grid {
		gap:10px;
	}
	.gmap {
		width:100%;
		aspect-ratio:3 / 3.5;
	}
}