@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
:root {
	--bk:#000000;
	--wh:#ffffff;
	--or:#EB8C23;
	--dg:#575757;
	--rd:#D1370F;
	
	--bl:#464099;
	--gr:#949494;
	
	--br:#6F6254;
	--bg:#F3EADF;
	
	--ws:25ms;
	--bs:300ms;
}
*{ padding:0; margin:0; box-sizing:border-box; }

html{ font-family:"Noto Sans JP", serif; color:var(--bk); margin-top:0 !important; }
body{ font-size:16rem; font-weight:500; overflow-x:hidden; width:100%; background:url("img/bg.webp") fixed no-repeat center top/cover; }
a{ color:inherit; }
img{ width:100%; height:auto; vertical-align:bottom; }
a img{ transition: all 300ms 0s ease; }
a:hover img{ opacity:0.6; }
.note p{ padding-left:1em; text-indent:-1em; }
.note p>*{ text-indent:0; }

main{ background:var(--wh); }
footer{ background:#E6A500; color:var(--wh); padding:30rem 16rem 10rem; }
footer .logo{ width:231rem; margin:0 auto 35rem; }
footer .copy{ font-size:16rem; line-height:24rem; text-align:center; }

/* PC */
@media screen and (min-width:1020px) {
	html{ font-size:calc(645px / 430); }
	.sp{ display:none; }
	body{ display:flex; justify-content:center; }
	body::before,
	body::after{ display:block; content:""; }
	body::before{ width:calc((100vw - 645px) / (1920 - 645) * 900); }
	body::after{ width:calc((100vw - 645px) / (1920 - 645) * 375); }
	main{ width:645px; }
	footer{ padding:16rem 0; }
	:root {
		--bw1:(100vw - 645px) / (1920 - 645);
		--bw1_in:(100vw - 645px) / (1920 - 645);
		--bw2:(100vw - 645px) / (1920 - 645);
	}
}
@media screen and (max-width:1920px) and (min-width:1020px) {
	:root {
		--bw1:(100vw - 645px - 375px) / (1920 - 645 - 375);
		--bw1_in:1px;
		--bw2:1px;
	}
	body::before{ width:calc((100vw - 645px - 375px) / (1920 - 645 - 375) * 900); }
	body::after{ width:375px; }
}


/* SP */
@media screen and (max-width:1019px) {
	html{ font-size:calc(100vw / 430); }
	.pc{ display:none; }
	footer{ padding:16rem 0; }
	.nav_open{ overflow-y:hidden; }
}

.float{ position:fixed; left:0; bottom:0; z-index:100; width:100%; padding:0; text-align:center; transition: all 300ms 0s ease; }
.float img{ width:100%; }
.float.hide{ opacity:0; transform:translateY(100%); }

.header_menu .logo{ padding-bottom:90rem; }
.header_menu .menu nav>a{
	display:block; color:var(--dg); font-weight:700; text-decoration:none; position:relative; z-index:1;
	transition:all 300ms 0s ease;
	border-bottom:1px dashed var(--dg);
}
.header_menu .menu nav>a:hover,
.header_menu .menu nav>a.active{ opacity:0.6; }

/* PC */
@media screen and (min-width:1020px) {
	.header_menu{
		position:fixed; top:50%; right:0; max-height:100%; width:calc(var(--bw2) * 375);
		overflow-y:auto;  transform:translateY(-50%);
		padding:10rem 0;
	}
	.header_menu .logo{ padding-bottom:calc(var(--bw2) * 90); }
	.header_menu .logo img{ display:block; width:calc(var(--bw2) * 294); margin:0 auto; }
	.header_menu .menu nav{ width:calc(var(--bw2) * 272); margin:0 auto; }
	.header_menu .menu nav>a{
		font-size:calc(var(--bw2) * 16); line-height:calc(var(--bw2) * 24);
		padding:calc(var(--bw2) * 10) 0;
		
	}
	
	.header_logo{
		position:fixed; left:0; top:0; bottom:0; width:calc(var(--bw1) * 900);
		padding:10rem; overflow-y:auto;
		display:flex; flex-flow:column; justify-content:center; align-items:center;
		img{ width:calc(var(--bw1_in) * 461); }
	}
}
@media screen and (max-width:1400px) and (min-width:1020px) {
	.header_menu .logo{ padding-bottom:calc(var(--bw2) * 50); }
	.header_logo{ display:none; }
}

/* SP */
@media screen and (max-width:1019px) {
	header{ display:none; }
}

#head{
	background:linear-gradient(to bottom,#29325E 0%,#080A13 100%);
	font-size:16rem; line-height:32rem; color:var(--wh); text-align:center; font-weight:900; letter-spacing:0.05em;
	padding:4rem;
}
#map{ margin-top:-14rem; }

#top{}

.ttl{
	margin-bottom:30rem;
	.en{ font-size:37rem; line-height:32rem; text-align:center; font-weight:700; font-style:italic; }
	.jp{ font-size:34rem; line-height:49rem; text-align:center; font-weight:700; }
}

#qa{
	padding:86rem 10rem 80rem;
	background:#F5F5F5;
	.ttl{ padding-bottom:6rem; }
	.item{
		&:not(:last-child){ padding-bottom:8rem; }
		.q{
			font-size:14rem; line-height:24rem; color:var(--bk); font-weight:700;
			background:var(--wh); padding:5rem 20rem 5rem 45rem; margin:8rem 0; position:relative;

			i{
				font-size:0; line-height:0;
				background:url("./img/q.webp") no-repeat center/cover; width:21rem; height:22.5rem;
				position:absolute; left:8rem; top:calc((100% - 22.5rem) / 2);
			}
			&::before,
			&::after {
				display:block; content:""; width:14rem; height:2rem; background:var(--or);
				position:absolute; right:5rem; top:calc((100% - 2rem) / 2);
				transform-origin:center;
				transition:all 300ms 0s ease;
			}
		}
		.a{
			font-size:14rem; line-height:24rem; font-weight:400;
			padding:0 3rem; max-height:0; overflow:hidden; transition:all 300ms 0s ease;
		}
		&.active{
			.q::after{ transform:rotate(90deg); }
			.a{ max-height:100vh; }
		}
	}
}

#collection{
	.collection_top{
		background:#D6EDFF url("img/collection_top_bg.webp") no-repeat center/100% auto;
		padding-bottom:23rem; margin-bottom:30px;
		.collectionTopSlider{
			.item{ padding:0 3rem; }
		}
	}
	.collection {
		display: flex;
		margin-bottom: 30px;
		&.is-reverse{ flex-direction:row-reverse; }
		.collection-visual{ width:52%; }
		.collection-inner{ width:48%; position:relative; }
		.collectionSlider{
			.collectionSlider-img{ padding:0 10%; }
			.collectionSlider-box{
				padding-top:15px;
				font-feature-settings:"palt";
			}
			.collectionSlider-price {
				font-size:13rem;
				line-height:1.3;
				text-align:center;
				color:#666;
			}
			.slick-arrow{
				display: block;
				position: absolute;
				top: 40%;
				z-index: 99;
				&::before{ display:none; }
				span{
					display: inline-block;
					width: 40px;
					height: 60px;
					margin-top: -50px;
					position: relative;
					cursor: pointer;
					&::before {
						content: "";
						display: block;
						width: 20px;
						height: 20px;
						border-top: 2px solid #666;
						border-right: 2px solid #666;
						position: absolute;
						left: 50%;
						top: 50%;
						margin-top: -5px;
					}
				}
				&.slick-prev {
					left: 0;
					span::before {
						transform: rotate(-135deg);
						margin-left: -8px;
					}
				}
				&.slick-next{
					right: 0;
					span::before {
						transform: rotate(45deg);
						margin-left: -12px;
					}
				}
			}
		}
	}
	.collection.is-color01 {
		border-bottom: 5px solid #93b8c4;
	}
}

#furisode{
	padding:0 8rem 30rem;
	.tab{ display:flex; gap:9rem; }
	.plan{ margin-top:35rem;  }
}

#shop{
	padding:0 8rem 100rem;
	background:#C9CBBA;
	.item:not(:last-child){ margin-bottom:24rem; }
}

#contact{
	padding:100rem 16rem 56rem;
	.ttl{
		.en{ color:var(--dg); }
		.jp{ color:#632A1C; }
	}
	.read{ font-size:14rem; line-height:24rem; text-align:center; color:var(--dg); margin-bottom:50rem; }
	.req,
	.fre{
		display:inline-flex; justify-content:center; align-items:center; vertical-align:middle; width:72rem; height:23rem;
		font-size:14rem; line-height:1; font-weight:400; border-radius:30rem;
	}
	.req{ color:var(--wh); background:var(--rd); }
	.fre{ color:var(--wh); background:var(--br); }
	form{
		background:var(--wh); border:2rem solid var(--or); padding:30rem 15rem;
		dt{
			font-size:16rem; line-height:24rem; color:var(--dg); font-weight:700;
			padding-left:8rem; border-left:4rem solid var(--or); margin-bottom:12rem;
		}
		dd{
			color:var(--bk); font-weight:400; margin-bottom:30rem;
			&>*:not(:last-child):not(.formError){ margin-bottom:8rem; }
			.txt{ color:var(--br); }
		}
		input,
		textarea,
		select{
			max-width:100%; padding:12rem 10rem; border:1rem solid #BFBFBF;
			font-family:inherit; font-size:16rem; line-height:24rem; color:var(--bk);
			background-color:#F5F5F5;
		}
		select,
		input[type="text"],
		input[type="date"]{ width:100%; }
		select{
			-webkit-appearance:none; appearance:none; background-image:url("./img/select_arr.svg"); background-repeat:no-repeat; background-position:right 12rem center; background-size:18rem 15rem;
			&::-ms-expand{ display:none; }
		}
		input[type="radio"],
		input[type="checkbox"]{ vertical-align:middle; width:1em; height:1em; accent-color:var(--dg); margin-right:0.5em; }
		textarea{ height:114rem; width:100%; }
		.btns{ display:flex; justify-content:center; align-items:center; gap:10rem; }
		.bt{
			display:inline-flex; justify-content:center; align-items:center; position:relative; border:4rem solid var(--wh);
			max-width:346rem; text-decoration:none; font-family:inherit; font-weight:500; border:none; transition:all 300ms 0s ease;
			&.submit{
				width:100%; font-size:20rem; line-height:1.0; color:var(--wh); font-weight:700; height:56rem;
				background:url("img/btn_bg.webp") no-repeat center/cover; border-radius:28rem;
				&::after{
					display:block; content:""; width:30rem; height:12rem;
					position:absolute; right:15rem; top:calc((100% - 12rem) / 2);
					background:url("img/btn_arr.svg") no-repeat center/cover;
				}
			}
			&.back{
				width:140rem; font-size:12rem; height:40rem; color:var(--wh); font-weight:700;
				background:var(--dg); border-radius:20rem;
				&::after{
					display:block; content:""; width:20rem; height:8rem;
					position:absolute; left:10rem; top:calc((100% - 8rem) / 2);
					background:url("img/btn_arr.svg") no-repeat center/cover;
					transform:scaleX(-1);
				}
			}
			&.return{
				width:100%; font-size:16rem; line-height:1.0; color:var(--wh); font-weight:700; height:56rem;
				background:url("img/btn_bg.webp") no-repeat center/cover; border-radius:28rem;
				&::after{
					display:block; content:""; width:30rem; height:12rem;
					position:absolute; right:15rem; top:calc((100% - 12rem) / 2);
					background:url("img/btn_arr.svg") no-repeat center/cover;
				}
			}
			&:hover{ opacity:0.6; }
		}
		.note{ font-size:14rem; line-height:20rem; color:#949494; letter-spacing:  }
	}
}

/* end */