@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho&display=swap');

.lexend{ font-family:"Lexend", sans-serif; }

:root{
	interpolate-size: allow-keywords;
	--rd:#b11215;
	--wh:#ffffff;
	--bk:#000000;
	--br:#927a65;
	--dt:300ms;
}

*{ padding:0; margin:0; box-sizing:border-box; }
html{ font-family:"Shippori Mincho", "Noto Serif JP", serif; color:var(--bk); }
body{ overflow-x:hidden; width:100%; background: #666; position:relative; }

a{ color:inherit; }
img{ max-width:100%; height:auto; vertical-align:bottom; }
#main{ overflow:hidden; }
/* PC */
@media screen and (min-width:768px) {
	html{ font-size:calc(100vw / 1140); }
	body{ font-size:16rem; line-height:1.6; }
	.inner{ max-width:1100rem; margin:0 auto; }
	.sp{ display:none !important; }
	.bg{ background:url("img/bg.jpg") fixed repeat center top/1918rem auto; }
	.bg3{ background:url("img/bg3.jpg") fixed repeat center top/1918rem auto; }
}
@media screen and (min-width:1140px) {
	html{ font-size:1px; }
}
/* SP */
@media screen and (max-width:767px) {
	html{ font-size:calc(100vw / 750); }
	body{ font-size:26rem; line-height:1.4; padding-top:72rem; }
	.pc{ display:none !important; }
	.bg{ background:url("img/bg.jpg") fixed repeat center top/959rem auto; }
	.bg3{ background:url("img/bg3.jpg") fixed repeat center top/959rem auto; }
	body.nav_open{ overflow:hidden; }
}

.set{
	&:not(.smoke){
		opacity:0;
		transition-property:transform,opacity;
		transition-duration:calc(var(--dt) * 2);
		transition-delay:calc(var(--dt) * 0);
		transition-timing-function:ease;
		.setc{
			opacity:0;
			transition-property:transform,opacity;
			transition-duration:calc(var(--dt) * 2);
			transition-delay:calc(var(--dt) * 0);
			transition-timing-function:ease;
		}
		
		&.l, .l{ transform:translateX(-100rem); }
		&.r, .r{ transform:translateX(100rem); }
		&.t, .t{ transform:translateY(-100rem); }
		&.b, .b{ transform:translateY(100rem); }
		
		&._01, .setc._01{ transition-delay:calc(var(--dt) * 1); }
		&._02, .setc._02{ transition-delay:calc(var(--dt) * 2); }
		&._03, .setc._03{ transition-delay:calc(var(--dt) * 3); }
		&._04, .setc._04{ transition-delay:calc(var(--dt) * 4); }
		&._05, .setc._05{ transition-delay:calc(var(--dt) * 5); }
		&._06, .setc._06{ transition-delay:calc(var(--dt) * 6); }
		&._07, .setc._07{ transition-delay:calc(var(--dt) * 7); }
		&._08, .setc._08{ transition-delay:calc(var(--dt) * 8); }
		&._09, .setc._09{ transition-delay:calc(var(--dt) * 9); }
		&._10, .setc._10{ transition-delay:calc(var(--dt) * 10); }
		&._10, .setc._11{ transition-delay:calc(var(--dt) * 11); }
		&._10, .setc._12{ transition-delay:calc(var(--dt) * 12); }
		&._10, .setc._13{ transition-delay:calc(var(--dt) * 13); }
		&._10, .setc._14{ transition-delay:calc(var(--dt) * 14); }
		&._10, .setc._15{ transition-delay:calc(var(--dt) * 15); }
		
		&.on, &.on .setc{
			opacity:1;
			transform:translate(0);
		}
	}
	&.smoke, .smoke {
		mask-image:url("img/smoke.svg");
		mask-size:100% calc(4800% * 2);
		mask-position:0 0;
		mask-repeat:no-repeat;
		width:fit-content;
		opacity:0;
	}
	&.on{
		&.smoke, .smoke {
			animation-name:mask;
			animation-duration:calc(var(--dt) * 9);
			animation-timing-function:steps(35);
			animation-delay:calc(var(--dt) * 0);
			animation-iteration-count:1;
			animation-direction:normal;
			animation-fill-mode:forwards;
			&._01{ animation-delay:calc(var(--dt) * 1); }
			&._02{ animation-delay:calc(var(--dt) * 2); }
			&._03{ animation-delay:calc(var(--dt) * 3); }
			&._04{ animation-delay:calc(var(--dt) * 4); }
			&._05{ animation-delay:calc(var(--dt) * 5); }
			&._06{ animation-delay:calc(var(--dt) * 6); }
			&._07{ animation-delay:calc(var(--dt) * 7); }
			&._08{ animation-delay:calc(var(--dt) * 8); }
			&._09{ animation-delay:calc(var(--dt) * 9); }
			&._10{ animation-delay:calc(var(--dt) * 10); }
			&._11{ animation-delay:calc(var(--dt) * 11); }
			&._12{ animation-delay:calc(var(--dt) * 12); }
			&._13{ animation-delay:calc(var(--dt) * 13); }
			&._14{ animation-delay:calc(var(--dt) * 14); }
			&._15{ animation-delay:calc(var(--dt) * 15); }
		}
	}
}

@keyframes mask{
	0%{ opacity:0; mask-position:0 0; }
	50%{ opacity:1; }
	100%{ opacity:1; mask-position:0 100%; }
}

.sq{
	clip-path:polygon(50% 0, 50% 0, 100% 50%, 100% 50%, 50% 100%, 50% 100%, 0 50%, 0 50%);
	aspect-ratio:1 / 1;
	object-fit:cover;
}

/* .bt{ */
.bt{
	display:inline-block;
	background:var(--wh);
	line-height:1.2; text-decoration:none;
	transition:all var(--dt) 0s ease;
	span{
		display:flex; justify-content:center; align-items:center; width:100%; height:100%;
		background:var(--rd); color:var(--wh);
		position:relative;
		transition:all var(--dt) 0s ease;
		&.arr::after{ content:"▶"; position:absolute; top:calc((100% - 1em) / 2); }
	}
	&:hover{
		background:var(--rd);
		span{
			background:var(--wh); color:var(--rd);
		}
	}
}
.bt2{
	display:inline-block;
	background:var(--rd);
	line-height:1.2; text-decoration:none;
	transition:all var(--dt) 0s ease;
	span{
		display:flex; justify-content:center; align-items:center; width:100%; height:100%;
		background:var(--rd); color:var(--wh);
		position:relative;
		transition:all var(--dt) 0s ease;
		&.arr::after{ content:"▶"; position:absolute; top:calc((100% - 1em) / 2); }
	}
	&.active,
	&:hover{
		span{
			background:var(--wh); color:var(--rd);
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	.bt{
		padding:5rem;
		font-size:26rem;
		clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
		span{
			clip-path:polygon(20rem 0, calc(100% - 20rem) 0, 100% 20rem, 100% calc(100% - 20rem), calc(100% - 20rem) 100%, 20rem 100%, 0 calc(100% - 20rem), 0 20rem);
			&.arr::after{ font-size:10rem; right:40rem; }
		}
	}
	.bt2{
		padding:3rem;
		font-size:20rem;
		clip-path:polygon(12rem 0, calc(100% - 12rem) 0, 100% 12rem, 100% calc(100% - 12rem), calc(100% - 12rem) 100%, 12rem 100%, 0 calc(100% - 12rem), 0 12rem);
		span{
			clip-path:polygon(9rem 0, calc(100% - 9rem) 0, 100% 9rem, 100% calc(100% - 9rem), calc(100% - 9rem) 100%, 9rem 100%, 0 calc(100% - 9rem), 0 9rem);
			&.arr::after{ font-size:10rem; right:40rem; }
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	.bt{
		padding:5rem;
		font-size:34rem;
		clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
		span{
			clip-path:polygon(20rem 0, calc(100% - 20rem) 0, 100% 20rem, 100% calc(100% - 20rem), calc(100% - 20rem) 100%, 20rem 100%, 0 calc(100% - 20rem), 0 20rem);
			&.arr::after{ font-size:20rem; right:30rem; }
		}
	}
	.bt2{
		padding:4rem;
		font-size:26rem;
		clip-path:polygon(13rem 0, calc(100% - 13rem) 0, 100% 13rem, 100% calc(100% - 13rem), calc(100% - 13rem) 100%, 13rem 100%, 0 calc(100% - 13rem), 0 13rem);
		span{
			clip-path:polygon(10rem 0, calc(100% - 10rem) 0, 100% 10rem, 100% calc(100% - 10rem), calc(100% - 8rem) 100%, 10rem 100%, 0 calc(100% - 10rem), 0 10rem);
			&.arr::after{ font-size:20rem; right:30rem; }
		}
	}
}
/* } */

/* #header{ */
#header{
	position:fixed; left:0; top:0; z-index:100; width:100vw; background:var(--bk); color:var(--wh);
	nav{
		a{
			text-decoration:none;
			transition:all var(--dt) 0s ease;
			&:hover{
				color:var(--rd);
			}
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#header{
		height:80rem;
		nav{
			max-width:1300rem;
			padding:0 10rem;
			display:flex; gap:36rem; font-size:22rem; line-height:80rem;
			a{
				&::before{ content:"━ "; }
			}
		}
		transform:translateY(-100%);
		transition:all var(--dt) 0s ease;
		&.pc_show{ transform:translateY(0%); }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#header{
		display:flex; align-items:center;
		height:72rem; padding-left:24rem;
		h1{
			font-size:26rem; line-height:1.0; font-weight:700;
			span{ color:var(--rd); }
		}
		
		nav{
			display:flex; justify-content:center; align-items:center; flex-flow:column; gap:60rem;
			position:fixed; top:72rem; left:0; width:100vw; height:0; overflow:hidden;
			background:rgba(0,0,0,0.8); padding:0 24rem;
			transition:all var(--dt) 0s ease;
			a{
				display:block; width:100%; padding:16rem 0;
				font-size:80rem; line-height:90rem; text-align:center;
			}
		}
		.open{
			position:fixed; right:0; top:0; z-index:101;
			width:122rem; height:72rem;
			i{
				position:absolute; left:23rem; width:calc(100% - 23rem * 2); height:2rem; background:var(--wh);
				transition:all var(--dt) 0s ease;
				&:nth-child(1){ top:22rem; }
				&:nth-child(2){ top:48rem; }
			}
			&:hover{
				i{ background:var(--rd); }
			}
		}
	}
	.nav_open{
		#header{
			nav{
				height:calc(100vh - 72rem);
			}
			.open{
				i{
					top:34rem;
					&:nth-child(1){ transform:rotate(30deg); }
					&:nth-child(2){ transform:rotate(-30deg); }
				}
			}
		}
	}
}
/* } */

/* #footer{ */
#footer{
	background:#2c2c2c;
	color:var(--wh);
	overflow:hidden;
	.read{
		font-weight:600; text-align:center;
		span{ color:#a8961a; }
	}
	.copy{ background:var(--rd); text-align:center; }
}
/* PC */
@media screen and (min-width:768px) {
	#footer{
		.inner{ padding:60rem 0 40rem; }
		.read{ font-size:50rem; line-height:72rem; margin:0 auto 60rem; }
		.logo{ width:361rem; margin:0 auto 50rem; }
		.link{
			margin:0 auto;
			display:flex; justify-content:center; gap:1em;
		}
		.copy{ font-size:14rem; line-height:1.0; padding:15rem; }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#footer{
		.inner{ padding:90rem 0 40rem; }
		.read{ font-size:46rem; line-height:80rem; margin:0 auto 50rem; }
		.logo{ width:456rem; margin:0 auto 100rem; }
		.link{
			font-size:26rem; line-height:50rem;
			margin:0 auto;
			a{ display:block; text-align:center; }
		}
		.copy{ font-size:22rem; line-height:1.0; padding:20rem; }
	}
}
/* } */

/* .title{ */
.title{
	.sub{ font-family:"Lexend", sans-serif; color:var(--br); line-height:1.0; font-weight:500; }
	.main{
		line-height:1.0; font-weight:600;
		sub{ vertical-align:baseline; }
	}
}
/* PC */
@media screen and (min-width:768px) {
	.title{
		margin-bottom:50rem;
		.sub{ font-size:26rem; margin-bottom:20rem; }
		.main{
			font-size:60rem; line-height:80rem;
			sub{ font-size:40rem; }
		}
		.t1{ font-size:18rem; line-height:36rem; }
	}
}

/* SP */
@media screen and (max-width:767px) {
	.title{
		margin-bottom:40rem;
		.sub{ font-size:24rem; margin-bottom:20rem; }
		.main{
			font-size:46rem; line-height:76rem; letter-spacing:-0.02em; margin-right:-14rem;
			sub{ font-size:34rem; }
		}
		.t1{ font-size:24rem; line-height:36rem; }
	}
}
/* } */

/* #kv{ */
/* PC */
@media screen and (min-width:768px) {
	#kv{
		position:relative;
		&::before,
		&::after{
			display:block; content:"";
			position:absolute; top:0; z-index:0; width:calc((100vw - 410rem) / 2); height:100%;
			mask-image:linear-gradient(to top, transparent 0, black 300rem, black 100%);
		}
		
		&::before{ background:url("img/kv/pc1.webp") no-repeat right top/cover; left:0; }
		&::after{ background:url("img/kv/pc2.webp") no-repeat left top/cover; right:0; }
		.text{
			width:410rem; min-height:1005rem; height:100vh;
			margin:auto;
			position:relative; z-index:1;
			.logo{ width:258rem; position:absolute; top:14rem; left:76rem; }
			.text1{ height:457rem; top:244rem; left:212rem; }
			.text2{ height:382rem; top:345rem; left:152rem; }
			.text3{ height:65rem; bottom:144rem; left:174rem; }
			.text1, .text2, .text3{
				max-width:none; position:absolute;
				img{ max-width:none; width:auto; height:100%; }
			}
			.btns{
				position:absolute; left:62rem; bottom:20rem;
				.bt{ width:280rem; height:90rem; }
			}
			
		}
		
		nav{
			position:absolute; z-index:2;
			top:36rem; left:0; width:calc((100% - 410rem) / 2);
			display:flex; flex-flow:row-reverse; justify-content:center; color:#FFFFFF;
			a{
				font-size:24rem; line-height:72rem; text-decoration:none;
				writing-mode:vertical-rl; text-orientation:upright;
				transition:all var(--dt) 0s ease;
				&::before{ content:"┃ "; }
				&:hover{
					color:var(--rd);
				}
			}
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#kv{
		position:relative;
		height:calc(100vh - 72rem);
		&::before,
		&::after{
			position:relative; z-index:0;
			display:block; content:""; width:100%;
		}
		&::before{
			height:calc((100vh - 72rem - 454rem) * 355 / (355 + 618));
			background:url("img/kv/sp1.webp") no-repeat center/cover;
			aspect-ratio:1500 / 856;
		}
		&::after{
			height:calc((100vh - 72rem - 454rem) * 618 / (355 + 618));
			background:url("img/kv/sp2.webp") no-repeat center/cover;
			aspect-ratio:1500 / 1236;
			mask-image:linear-gradient(to top, transparent 0, black 300rem, black 100%);
		}
		.text{
			display:flex; flex-flow:column; justify-content:center;
			height:454rem;
			padding:0 0 29rem;
			.logo{ width:309rem; margin:0 auto 25rem; }
			.text1{ width:502rem; margin:0 auto 31rem; }
			.text2{ width:460rem; margin:0 auto; }
			.text1, .text2{
				display:block;
			}
			
		}
		.btns{
			position:absolute; left:50%; bottom:40rem; z-index:2;
			.bt{ transform:translateX(-50%);
				width:380rem; height:120rem;
			}
		}
	}
}

/* } */

/* #concept{ */
.t2{ color:#78573a; }
/* PC */
@media screen and (min-width:768px) {
	#concept{
		padding:120rem 0 105rem;
		position:relative;
		.title{ margin-bottom:90rem; }
		.t1{ font-size:24rem; line-height:36rem; margin-bottom:35rem; }
		.t2{
			width:fit-content;
			font-size:30rem; line-height:1.0; background:var(--wh);
			box-shadow:3rem 3rem 18rem rgba(0,0,0,0.11);
			padding:30rem; margin-bottom:19rem;
			+.t2{ margin-bottom:35rem; }
		}
		.img{
			position:absolute; width:607rem;
			&.img_01{ left:790rem; top:120rem; }
			&.img_02{ left:1053rem; top:500rem; }
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#concept{
		padding:140rem 24rem 70rem;
		position:relative;
		.t1{ font-size:26rem; line-height:36rem; margin-bottom:40rem; }
		.t2{
			span{
				display:block; width:fit-content;
				font-size:32rem; line-height:1.0; background:var(--wh);
				box-shadow:3rem 3rem 18rem rgba(0,0,0,0.11);
				padding:20rem 26rem; margin-bottom:13rem;
			}
			+.t2{ padding-bottom:27rem; }
		}
		.img{
			position:absolute; width:338rem;
			&.img_01{ left:478rem; top:420rem; }
			&.img_02{ left:545rem; top:706rem; }
		}
	}
}
/* } */

/* #movie{ */
#movie{
	iframe{ display:block; width:100%; aspect-ratio:560 / 315; }
}
/* PC */
@media screen and (min-width:768px) {
	#movie{
		padding:120rem 0 140rem;
		.title{ margin-bottom:70rem; }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#movie{
		padding:100rem 24rem 130rem;
		.title{ margin-bottom:50rem; }
	}
}
/* } */

/* #commitment{ */
#commitment{
	background:#fbfbfb url("img/bg2.webp") center top;
	.list{
		.item{
			background:rgba(255,255,255,0.7);
			.num{ color:var(--rd); }
			.img{ opacity:0.6; }
			.sub{ font-weight:600; }
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#commitment{
		padding:120rem 0 140rem;
		background-repeat:no-repeat;
		background-size:3777rem auto;
		.read{ font-size:24rem; line-height:36rem; margin-bottom:90rem; }
		.list{
			display:flex; gap:20rem; flex-wrap:wrap;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				display:flex; flex-flow:column; justify-content:space-between;
				width:calc((100% - 20rem) / 2);
				clip-path:polygon(25rem 0, calc(100% - 25rem) 0, 100% 25rem, 100% calc(100% - 25rem), calc(100% - 25rem) 100%, 25rem 100%, 0 calc(100% - 25rem), 0 25rem);
				.wrap{ padding:30rem; }
				.num{ font-size:38rem; line-height:1.0; margin-bottom:10rem; }
				.sub{ font-size:24rem; line-height:38rem; margin-bottom:20rem; }
			}
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#commitment{
		padding:110rem 24rem 180rem;
		background-size:calc(2703px) auto;
		background-position:left -154vw top;
		.read{ font-size:26rem; line-height:36rem; margin-bottom:70rem; }
		.list{
			display:flex; gap:50rem; flex-flow:column;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				display:flex; flex-flow:column; justify-content:space-between;
				clip-path:polygon(25rem 0, calc(100% - 25rem) 0, 100% 25rem, 100% calc(100% - 25rem), calc(100% - 25rem) 100%, 25rem 100%, 0 calc(100% - 25rem), 0 25rem);
				.wrap{ padding:50rem; }
				.num{ font-size:50rem; line-height:1.0; margin-bottom:20rem; }
				.sub{ font-size:40rem; line-height:50rem; margin-bottom:30rem; }
			}
		}
	}
}
/* } */

/* #craftsman{ */
#craftsman{
	.prof{
		.item{
			overflow-y:hidden; position:relative;
			transition:all calc(var(--dt) * 3) calc(var(--dt) * 0) ease;
			&.active{ overflow-y:visible; }
			.read{
				h4{ font-weight:700; }
			}
		}
	}
	.dot{
		.item{
			opacity:0.56;
			cursor:pointer;
			position:relative; z-index:1;
			transition:all var(--dt) 0s ease;
			&.active{ opacity:1; }
			&:hover{ opacity:1; z-index:2; }
			.name{ text-align:center; font-weight:700; }
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#craftsman{
		padding-bottom:140rem;
		.prof{
			margin-right:calc(-1 * (100vw - 1100rem) / 2);
			.item{
				.wrap{ padding:140rem 0 100rem; }
				.title{ margin-bottom:70rem; }
				.read{
					width:600rem;
					font-size:20rem; line-height:36rem; padding-bottom:40rem; border-bottom:1px solid var(--rd); margin-bottom:40rem;
					h3{ font-size:30rem; line-height:50rem; margin-bottom:20rem; }
					p{ min-height:calc(36rem * 2); }
				}
				.text{
					font-size:20rem; line-height:36rem; min-height:calc(36rem * 3);
				}
				.img{
					position:absolute;
					&.img_01{ width:774rem; left:590rem; top:40rem; }
					&.img_02{ width:617rem; left:950rem; top:575rem; }
				}
			}
		}
		.dot{
			width:1100rem;
			display:flex; flex-wrap:wrap;
			.item{
				width:240rem;
				margin-right:-57rem; padding-top:50rem;
				&:nth-child(2n+1){ margin-top:-75rem; }
				&:nth-child(2),
				&:nth-child(4){ margin-top:-75rem; }
				&:nth-child(1),
				&:nth-child(3),
				&:nth-child(5){ margin-top:0; }
				&:nth-child(5){ margin-right:128rem; }
				.img{ margin-bottom:25rem; }
				.name{ font-size:22rem; line-height:1.0; }
			}
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#craftsman{
		.prof{
			margin-bottom:30rem;
			.item{
				.wrap{ padding:140rem 24rem 30rem; }
				.title{ margin-bottom:50rem; }
				.read{
					width:597rem;
					padding-bottom:40rem; border-bottom:1px solid var(--rd); margin-bottom:40rem;
					h3{ font-size:40rem; line-height:50rem; margin-bottom:40rem; }
				}
				.img{
					position:absolute;
					&.img_01{ width:544rem; left:314rem; top:-100rem; }
					&.img_02{ width:413rem; left:546rem; top:305rem; }
				}
			}
		}
		.dot{
			padding:0 24rem 180rem;
			display:flex; flex-wrap:wrap; gap:25rem;
			.item{
				width:154rem;
				&:nth-child(7n+1){ margin-left:calc((154rem + 25rem) / 2); }
				.img{ margin-bottom:15rem; }
			}
		}
	}
}
/* } */

/* #movie{ */
#story{
	.read{
		background:#fffcf9;
		.wrap{
			position:relative;
		}
		.t1{ color:var(--br); }
	}
	.img{ position:absolute;}
}
/* PC */
@media screen and (min-width:768px) {
	#story{
		padding:120rem 0 155rem;
		.read{
			.wrap{
				display:flex; justify-content:center; flex-flow:row-reverse;
			}
			box-shadow:3rem 3rem 18rem rgba(0,0,0,0.11);
			padding:50rem 0;
			p{
				font-size:22rem; line-height:51rem;
				writing-mode:vertical-rl; text-orientation:upright;
				&.t1{ font-size:26rem; }
			}
		}
		.img{ width:662rem; left:-545rem; bottom:-217rem }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#story{
		padding:110rem 24rem 125rem;
		position:relative;
		.read{
			box-shadow:3rem 3rem 18rem rgba(0,0,0,0.11);
			.wrap{
				display:flex; justify-content:center; flex-flow:row-reverse;
				padding:45rem 0;
			}
			p{
				font-size:19rem; line-height:34rem;
				writing-mode:vertical-rl; text-orientation:upright;
				&.t1{ font-size:22rem; }
			}
		}
		.img{ width:460rem; left:-132rem; bottom:-242rem }
	}
}
/* } */

/* #reviews{ */
#reviews{
	.list{
		.item{
			position:relative;
			.wrap{
				display:flex; flex-flow:column; justify-content:space-between; height:100%;
				position:relative; z-index:0;
				background:#958374; color:var(--wh);
				.name{ text-align:right; }
			}
			.img{
				position:absolute; z-index:1;
				.star{
					display:flex; justify-content:center;
					i{
						display:block; aspect-ratio:15 / 14;
						background:url("img/reviews/star.svg");
						font-size:0; line-height:0;
					}
				}
			}
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#reviews{
		padding:120rem 0 140rem;
		.title{ margin-bottom:110rem; }
		.list{
			display:flex; gap:90rem 30rem; flex-wrap:wrap;
			.item{
				width:calc((100% - 30rem * 2) / 3);
				.wrap{
					clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
					padding:110rem 25rem 25rem;
					font-size:20rem; line-height:30rem;
					.name{ margin-top:10rem; }
				}
				.img{
					left:50%; top:-62rem; transform:translateX(-50%);
					img{ width:128rem; margin-bottom:15rem; }
					.star{
						gap:8rem;
						i{ width:15rem; }
					}
				}
			}
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#reviews{
		padding:170rem 24rem 190rem;
		.title{ margin-bottom:110rem; }
		.list{
			display:flex; gap:70rem; flex-flow:column;
			.item{
				.wrap{
					clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
					padding:120rem 50rem 25rem;
					font-size:28rem; line-height:38rem;;
					.name{ margin-top:10rem; }
				}
				.img{
					left:50%; top:-62rem; transform:translateX(-50%);
					img{ width:128rem; margin-bottom:15rem; }
					.star{
						gap:8rem;
						i{ width:15rem; }
					}
				}
			}
		}
	}
}
/* } */

/* #craft{ */
#craft{
	background:#fbfbfb url("img/bg2.webp") center top;
	.inner{
		.img{ position:absolute; }
	}
}
/* PC */
@media screen and (min-width:768px) {
	#craft{
		background-repeat:no-repeat;
		background-size:3777rem auto;
		.inner{
			padding:120rem 0 100rem;
			position:relative;
		}
		.read{ font-size:24rem; line-height:36rem; }
		.img{
			&.img_01{ width:758rem; top:-80rem; left:950rem; }
			&.img_02{ width:621rem; top:382rem; left:690rem; }
			&.img_03{ width:621rem; top:655rem; left:1070rem; }
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#craft{
		background-size:calc(2703px) auto;
		padding:120rem 24rem 100rem;
		position:relative;
		.read{ font-size:24rem; line-height:36rem; }
		.img{
			&.img_01{ width:542rem; top:-186rem; left:446rem; }
			&.img_02{ width:621rem; top:382rem; left:690rem; }
			&.img_03{ width:621rem; top:655rem; left:1070rem; }
		}
	}
}
/* } */

/* #craft{ */
#reasons{
	position:relative;
	.img{ position:absolute;}
	.list{
		.item{
			display:flex; flex-flow:column; justify-content:center; align-items:center;
			position:relative;
			background:var(--wh);
			text-align:center;
			.icon{
				img{ max-width:none; width:auto; height:100%; }
			}
			.name{ color:var(--br); }
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#reasons{
		padding:120rem 0 110rem;
		>*:not(:first-of-type){ margin-top:100rem; }
		.read{ font-size:24rem; line-height:36rem; }
		.list{
			display:flex; gap:30rem; flex-wrap:wrap;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				width:calc((100% - 30rem * 2) / 3); height:300rem;
				padding:25rem;
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
				.icon{ height:42rem; margin-bottom:20rem; }
				.name{ font-size:26rem; line-height:30rem; margin-bottom:30rem; }
				.text{ font-size:20rem; line-height:30rem; }
			}
		}
		.img{ width:621rem; bottom:-350rem; left:-593rem; }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#reasons{
		padding:100rem 24rem 210rem;
		>*:not(:first-of-type){ margin-top:100rem; position:relative; }
		.list{
			display:flex; gap:35rem 40rem; flex-wrap:wrap; justify-content:center;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				width:calc((100% - 40rem) / 2); height:350rem;
				padding:35rem;
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
				.icon{ height:72rem; margin-bottom:20rem; }
				.name{ font-size:34rem; line-height:38rem; margin-bottom:20rem; }
				.text{ font-size:28rem; line-height:38rem; }
			}
		}
		.img{ width:442rem; top:calc(120rem - 100rem); left:calc(415rem - 24rem); }
	}
}
/* } */

/* #enjoy{ */
#enjoy{
	background:rgba(255,252,249,0.9);
	.list{
		.item{
			display:flex; flex-flow:column; justify-content:space-between;
			background:var(--wh);
			.name{ color:var(--rd); }
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#enjoy{
		padding:110rem 0;
		.list{
			display:flex; gap:28rem; flex-wrap:wrap;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				width:calc((100% - 28rem * 2) / 3);
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
				.wrap{ padding:30rem; }
				.name{ font-size:30rem; line-height:1.0; margin-bottom:20rem; }
				.text{ font-size:20rem; line-height:30rem; }
			}
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#enjoy{
		padding:100rem 24rem 110rem;
		.list{
			display:flex; gap:25rem 40rem; flex-wrap:wrap;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				width:calc((100% - 28rem * 2) / 2);
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
				.wrap{ padding:25rem 10rem 25rem 25rem; }
				.name{ font-size:34rem; line-height:1.0; margin-bottom:20rem; }
				.text{ font-size:28rem; line-height:38rem; }
			}
		}
	}
}
/* } */

/* #promise{ */
#promise{
	position:relative;
	.img{ position:absolute;}
	.list{
		.item{
			display:flex; flex-flow:column; justify-content:center; align-items:center;
			position:relative;
			background:var(--wh);
			text-align:center;
			.icon{
				img{ max-width:none; width:auto; height:100%; }
			}
			.name{ color:var(--br); }
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#promise{
		padding:120rem 0 110rem;
		.read{ font-size:24rem; line-height:36rem; margin-bottom:50rem; }
		.list{
			display:flex; gap:30rem; flex-wrap:wrap;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				width:calc((100% - 30rem * 2) / 3); height:300rem;
				padding:25rem;
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
				.icon{ height:42rem; margin-bottom:20rem; }
				.name{ font-size:26rem; line-height:30rem; margin-bottom:30rem; }
				.text{ font-size:20rem; line-height:30rem; }
			}
		}
		.img{
			&.img_01{ width:774rem; top:-59rem; left:913rem; }
			&.img_02{ width:586rem; bottom:-116rem; left:-543rem; }
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#promise{
		padding:100rem 24rem;
		.read{ margin-bottom:80rem; }
		.list{
			display:flex; gap:27rem; flex-wrap:wrap; justify-content:center;
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.item{
				width:100%;
				padding:45rem 15rem;
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
				.icon{ height:72rem; margin-bottom:20rem; }
				.name{ font-size:34rem; line-height:38rem; margin-bottom:20rem; }
				.text{ font-size:28rem; line-height:38rem; }
			}
		}
		.img{
			&.img_01{ width:774rem; top:-59rem; left:913rem; }
			&.img_02{ width:586rem; top:623rem; left:-543rem; }
		}
	}
}
/* } */

/* #stores{ */
#stores{
	background:rgba(255,252,249,0.9);
	.box{
		.wrap{
			display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
			background:var(--wh);
		}
	}
	.read{
		h3{ color:var(--rd); font-weight:600; }
	}
}
/* PC */
@media screen and (min-width:768px) {
	#stores{
		padding:130rem 0 120rem;
		.box{
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			margin:0 -50rem;
			.wrap{
				gap:28rem;
				padding:30rem 50rem;
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
			}
		}
		.read{
			font-size:24rem; line-height:36rem; margin-bottom:50rem;
			h3{ font-size:30rem; line-height:36rem; margin-bottom:20rem; }
		}
	}
}
/* SP */
@media screen and (max-width:767px) {
	#stores{
		padding:80rem 24rem 100rem;
		.box{
			filter:drop-shadow(4rem 4rem 18rem rgba(120,120,120,0.43));
			.wrap{
				gap:28rem;
				padding:20rem;
				clip-path:polygon(23rem 0, calc(100% - 23rem) 0, 100% 23rem, 100% calc(100% - 23rem), calc(100% - 23rem) 100%, 23rem 100%, 0 calc(100% - 23rem), 0 23rem);
			}
		}
		.read{
			margin-bottom:50rem;
			h3{ font-size:30rem; line-height:36rem; margin-bottom:20rem; }
		}
	}
}

#map{
	.tab{ display:flex; flex-wrap:wrap; }
	.wrap{ background:var(--wh); }
	.map{
		iframe{ width:100% !important; height:100%; }
	}
	.list{
		overflow-y:auto;
		.item{
			display:flex; flex-wrap:wrap; align-items:center;
			text-decoration:none;
			transition:all var(--dt) 0s ease;
			&:hover,
			&.active{
				background:rgba(149,131,116,0.1);
			}
			.name{ font-weight:700; }
			.tag{
				display:flex;
				span{ display:block; background:var(--wh); border:1px solid var(--br); color:var(--br); }
			}
			dl{
				display:flex; align-items:flex-start;
				dt{ display:flex; justify-content:center; align-items:center; background:var(--br); color:var(--wh); }
			}
		}
	}
}
/* PC */
@media screen and (min-width:768px) {
	#map{
		padding-top:120rem;
		.tab{
			gap:10rem; margin-bottom:45rem;
			.bt2{
				width:calc((100% - 10rem * 3) / 4);
				span{ padding:20rem; }
			}
		}
		.wrap{
			display:flex; height:614rem; margin-bottom:55rem;
			.map{ width:542rem; height:100%; }
			.list{
				width:calc(100% - 542rem);
				height:100%;
				padding:15rem 37rem 15rem 15rem;
				.item{
					gap:10rem 20rem;
					padding:15rem 15rem 15rem 45rem;
					+.item{ margin-top:24rem; }
					.name{ font-size:26rem; line-height:30rem; }
					.tag{
						gap:8rem;
						span{ font-size:16rem; line-height:20rem; padding:0 0.5em 1rem; border-radius:3rem; }
					}
					.zip{ font-size:18rem; line-height:20rem; }
					dl{
						width:100%; gap:12rem;
						dt{ width:100rem; font-size:16rem; line-height:30rem; border-radius:15rem; }
						dd{ width:calc(100% - 100rem - 12rem); font-size:18rem; line-height:30rem; }
					}
				}
			}
		}
	}
	.btns{
		text-align:center;
		.bt{ width:280rem; height:90rem; }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#map{
		padding-top:80rem;
		.tab{
			gap:25rem 20rem; margin-bottom:55rem;
			.bt2{
				width:calc((100% - 20rem) / 2);
				span{ padding:20rem; }
			}
		}
		.wrap{
			margin-bottom:100rem;
			.map{ width:100%; height:320rem; }
			.list{
				width:100%; max-height:940rem;
				padding:30rem 50rem 30rem 25rem;
				.item{
					gap:10rem 20rem;
					padding:30rem 30rem 30rem 35rem;
					+.item{ margin-top:18rem; }
					.name{ font-size:40rem; line-height:30rem; }
					.tag{
						gap:12rem;
						span{ font-size:24rem; line-height:36rem; padding:0 0.5em 1rem; border-radius:3rem; }
					}
					dl{
						gap:20rem;
						dt{ width:154rem; font-size:24rem; line-height:45rem; border-radius:20rem; }
						dd{ width:calc(100% - 154rem - 20rem); font-size:26rem; line-height:45rem; }
					}
				}
			}
		}
	}
	.btns{
		text-align:center;
		.bt{ width:380rem; height:120rem; }
	}
}
	
/* } */