@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap');
:root {
	--bk:#000000;
	--wh:#ffffff;
	--br:#6F6254;
	--bg:#F3EADF;
	--rd:#D2183E;
	
	--bw:(100vw - 780rem) / (1920 - 780);
	--ws:25ms;
	--bs:300ms;
}
*{ padding:0; margin:0; box-sizing:border-box; }

html{ font-family:"Noto Sans JP", sans-serif; color:var(--bk); margin-top:0 !important; }
body{ font-size:16rem; font-weight:500; overflow-x:hidden; width:100%; background:url("./img/bg.jpg") fixed no-repeat center top/cover; }
a{ color:inherit; }
img{ max-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(--bg); }
footer .copy{ font-size:14rem; line-height:1; text-align:center; color:var(--br); }

/* PC */
@media screen and (min-width:1145px) {
	html{ font-size:2px; }
	.sp{ display:none; }
	body{ display:flex; justify-content:center; }
	body::before,
	body::after{ display:block; content:""; }
	body::before{ width:calc(100vw - 390rem - (365rem / 2)) }
	body::after{ width:calc(365rem / 2); }
	main{ width:390rem; }
	footer{ padding:16rem 0; }
}

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

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


header .menu .ttl{ text-align:center; position:relative; z-index:0; }
header .menu .ttl img{ display:block; }
header .menu nav>a{ display:block; background:var(--wh); color:var(--br); font-weight:700; text-decoration:none; position:relative; z-index:1; transition:all 300ms 0s ease; }
header .menu nav>a:hover,
header .menu nav>a.active{ background:var(--rd); color:var(--wh); }

/* PC */
@media screen and (min-width:1145px) {
	header{
		position:fixed; top:calc(10rem / 2); right:0; bottom:0; width:calc(365rem / 2); padding:0 calc(50rem / 2);
		display:flex; flex-flow:column; justify-content:center;
	}
	header .logo{ max-width:calc(233rem / 2); padding-bottom:calc(24rem / 2); }
	header .logo img{ display:block; }
	header .logo img:nth-child(2){ width:calc(160rem / 2); margin:calc(10rem / 2) auto 0; }
	header .menu .ttl{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:calc(14rem / 2); }
	header .menu .ttl img:nth-child(1){ width:calc(150rem / 2); margin:calc(-33rem / 2); }
	header .menu .ttl img:nth-child(2){ width:calc(140rem / 2); margin:calc(-15rem / 2) 0 calc(-10rem / 2); }
	header .menu nav{ max-height:calc(100vh - ((10rem + 120rem + 44rem) / 2)); overflow-y:auto; }
	header .menu nav>a{
		font-size:calc(18rem / 2); line-height:calc(22rem / 2);
		padding:calc(8rem / 2) calc(19rem / 2); margin-bottom:calc(8rem / 2); border-radius:calc(19rem / 2);
		box-shadow:0 calc(3rem / 2) calc(6rem / 2) rgba(0,0,0,0.16);
	}
}

/* SP */
@media screen and (max-width:1144px) {
	header{ position:fixed; left:0; top:0; z-index:999; height:65rem; width:100%; background:rgba(243,234,223,0.8); }
	header .logo{ position:absolute; left:10rem; bottom:14rem; width:170rem; }
	header .open{ position:fixed; right:10rem; top:15rem; height:33rem; width:33rem; cursor:pointer; }
	header .open i{ position:absolute; left:0; background:var(--bk); height:2rem; width:100%; transition:transform var(--bs) 0s ease, left 300ms 0s ease, width 300ms 0s ease, top 300ms 300ms ease; }
	header .open i:nth-child(1){ top:8rem; }
	header .open i:nth-child(2){ top:16rem; }
	header .open i:nth-child(3){ top:24rem; }
	.nav_open header .open i{ transition:top var(--bs) 0s ease, left var(--bs) 0s ease, width var(--bs) 0s ease, transform var(--bs) 300ms ease; }
	.nav_open header .open i:nth-child(1){ top:16rem; transform:rotate(45deg); }
	.nav_open header .open i:nth-child(2){ top:16rem; left:50%; width:0; }
	.nav_open header .open i:nth-child(3){ top:16rem; transform:rotate(-45deg); }
	
	header .menu{
		position:fixed; left:-100vw; opacity:0; top:65rem; z-index:999;
		width:100vw; height:calc(100vh - 65rem); background:rgba(243,234,223,0.8); padding:10rem 0 10rem 10rem; overflow-y:auto; overflow-x:hidden;
		transition:left 0s var(--bs) ease, opacity var(--bs) 0s ease;
	}
	header .menu .ttl{ padding-bottom:14rem; }
	header .menu .ttl img{ width:150rem; margin:-33rem; }
	header .menu .back{ position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; }
	header .menu nav{ }
	header .menu nav>a{
		font-size:18rem; line-height:22rem;
		padding:8rem 19rem; margin-bottom:8rem; border-radius:19rem 0 0 19rem;
		box-shadow:0 3rem 6rem rgba(0,0,0,0.16); transform:translateX(100%);
	}
	
	header .menu nav>a{ transition:transform var(--bs) 0s ease; }
	
	.nav_open header .menu nav>a:nth-child(1){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 1) ease; }
	.nav_open header .menu nav>a:nth-child(2){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 2) ease; }
	.nav_open header .menu nav>a:nth-child(3){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 3) ease; }
	.nav_open header .menu nav>a:nth-child(4){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 4) ease; }
	.nav_open header .menu nav>a:nth-child(5){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 5) ease; }
	.nav_open header .menu nav>a:nth-child(6){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 6) ease; }
	.nav_open header .menu nav>a:nth-child(7){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 7) ease; }
	.nav_open header .menu nav>a:nth-child(8){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 8) ease; }
	.nav_open header .menu nav>a:nth-child(9){ transition:transform var(--bs) calc(var(--bs) + var(--ws) * 9) ease; }
	
	.nav_open header .menu{ left:0; opacity:1; transition:left 0s 0s ease, opacity 300ms 0s ease; }
	.nav_open header .menu nav>a{ transform:translateX(0); }
}


#top{ position:relative; padding-bottom:50rem; }
#top .wrap{
	background: linear-gradient(to bottom, #E889A4 0%, #D97A95 100%);
	padding:0 10rem; margin-bottom:12.5rem; position:relative;
}
#top .wrap::before{
	display:block; content:""; width:390rem; height:12.5rem;
	background:url("./img/top_btm.png") no-repeat center/cover;
	position:absolute; left:0; bottom:-12.5rem;
}
#top .price{ color:var(--rd); text-align:center; margin-top:5rem; }
#top .price strong{ font-family:"Barlow Condensed", sans-serif; font-size:48rem; line-height:1.0; color:var(--rd); font-weight:700; }

#top .list{
	display:grid; grid-template-columns:1fr 1fr; gap:10rem; background:var(--wh);
	padding:18rem 12rem; margin-bottom:25rem;
}
#top .list figure{ overflow:hidden; border-radius:5rem; box-shadow:0 3rem 6rem rgba(0,0,0,0.16); }
#top .list .name{ font-size:14rem; line-height:17rem; color:#3A1E00; text-align:center; font-weight:700; margin-top:8rem;  }
#top .list .price>span{ font-size:20rem; line-height:1.0; }
#top .list .price{ font-size:13rem; }
#top .list .price strong{ font-size:28rem; }
#top .list .note{
	grid-column:1 / span 2;
	font-size:13rem; line-height:20rem; text-align:center; font-weight:700;
}
#top .t1{ font-size:13rem; line-height:20rem; text-align:center; color:var(--wh); }
#top .bt{ display:block; width:330rem; margin:0 auto; }

#scene{ padding:30rem 10rem 0; color:#6F6254; }
#scene .ttl{ margin-bottom:27rem; }
#scene .sub{ display:flex; flex-wrap:wrap; align-items:center; }
#scene .sub i{
	order:1;
	display:flex; justify-content:center; align-items:center; vertical-align:middle;
	width:50rem; height:49rem;
	background:url("./img/scene_sub.svg") no-repeat center/ cover; color:var(--wh);
	font-family:"Barlow Condensed", sans-serif; font-size:36rem; line-height:1.0; font-weight:600; font-style:normal;
}
#scene .sub:nth-of-type(2n) i{ order:2; }
#scene .sub h3{
	order:2;
	width:calc(100% - 50rem - 20rem); border-top:1px solid var(--br); border-bottom:1px solid var(--br);
	font-size:20rem; line-height:25rem; color:var(--br); font-weight:700;
	padding:7rem 10rem 11rem;
}
#scene .sub:nth-of-type(2n) h3{ order:1; text-align:right; margin-left:20rem; }
#scene .sub:nth-of-type(2n+1) h3{ margin-right:20rem; }
#scene .sub p{ order:3; width:calc(100% - 50rem); font-size:14rem; line-height:25rem; font-weight:700; margin:13rem 0 11rem; }
#scene .sub:nth-of-type(2n) p{ margin-right:50rem; text-align:right; }
#scene .sub:nth-of-type(2n+1) p{ margin-left:50rem; }
#scene .list .item{ padding:3rem 5rem 18rem; }
#scene .list .item a{
	display:flex; justify-content:center; align-items:center;
	width:120rem; aspect-ratio:1; background:#FFFFFF;
	border-radius:5rem; border:1rem solid var(--bg); box-shadow:0 3rem 6rem rgba(0,0,0,0.16);
	overflow:hidden;
	display:block; width:100%; height:100%;
}
#scene .list .item img{ width:100%; height:100%; object-fit:cover; }

.slick-arrow{ z-index:1; width:19rem; height:17rem; }
.slick-arrow::before{
	display:block; content:""; width:19rem; height:17rem;
	background:url("./img/scene_arr.svg") no-repeat center/cover;
}
.slick-prev{ left:-3rem; }
.slick-next{ right:-3rem; transform:translate(0, -50%) scaleX(-1);}

.bnr_01{ display:block; position:relative; margin-bottom:32rem; }
.bnr_01 .bt{
	display:block; width:calc(724rem / 2);
	position:absolute; left:calc(50% - 724rem / 4); bottom:-29rem;
}
.bnr_02{ margin:0 10rem 8rem; }
.bnr_03{ margin:0 10rem 24rem; }
.bnr_04{ display:block; position:relative; margin:0 10rem 80rem; }
.bnr_04 .bt{
	display:block; width:calc(610rem / 2);
	position:absolute; left:calc(50% - 610rem / 4); bottom:-41rem;
}

#collection{ margin-top:80rem; }
#collection .box{ background:#DEB235; padding:0 10rem 50rem; }
#collection .read{ font-size:12rem; line-height:17rem; margin:-5rem 0 40rem; }
#collection .read strong{ display:inline-block; font-size:16rem; line-height:24rem; color:var(--wh); font-weight:500; margin-bottom:5rem; }
#collection .sub{ font-size:41rem; line-height:1.0; color:var(--bg); font-weight:700; margin-bottom:10rem; }
#collection .sub strong{ font-size:60rem; line-height:1.0 }
#collection .wrap{ overflow-x:auto; padding:3rem 10rem 18rem; margin:0 -10rem 18rem; }
#collection .list{ display:flex; gap:10rem; }
#collection .list>*{ width:190rem; box-shadow:0 3rem 6rem rgba(0,0,0,0.16); }

#hair{ margin-top:-1px; }
#hair .ttl{ margin-bottom:21rem; }
#hair .box{ padding:0 10rem; }
#hair .read{ font-size:14rem; line-height:21rem; color:var(--wh); padding:10rem 17rem; margin:0 10rem; background:#D97A95; border:4rem solid var(--wh); border-radius:8rem; }
#hair .read strong{ color:#FFEBC8; font-weight:500; border-bottom:1rem dashed #FFEBC8; }
#hair .wrap{ overflow-x:auto; padding:3rem 10rem 18rem; margin:0 -10rem 18rem; }
#hair .list{ display:flex; gap:5rem; }
#hair .list>*{ width:203rem; box-shadow:0 3rem 6rem rgba(0,0,0,0.16); }

#voice{ padding:0 10rem; }
#voice .ttl{ margin-bottom:24rem; }
#voice .wrap{ overflow-x:auto; padding:3rem 10rem 18rem; margin:0 -10rem 18rem; }
#voice .list{ display:flex; gap:8rem; }
#voice .list>*{
	width:224rem; background:var(--wh); padding:7rem; border:1rem solid #C06C84;
	border-radius:5rem; box-shadow:0 3rem 6rem rgba(0,0,0,0.16);
	font-size:12rem; line-height:18rem;
}
#voice .list figure{ margin-bottom:7rem; }
#voice .list h3{ font-size:12rem; line-height:18rem; text-align:center; font-weight:500; margin-bottom:7rem; }

#qa{ padding:0 10rem 80rem; }
#qa .ttl{ padding-bottom:6rem; }
#qa .item:not(:last-child){ padding-bottom:8rem; }
#qa .q{ font-size:14rem; line-height:20rem; color:var(--wh); font-weight:500; background:var(--br); padding:10rem 20rem 10rem 38rem; margin:8rem 0; position:relative; }
#qa .q i{  font-family:"Oswald", sans-serif; font-size:20rem; line-height:1.0; font-style:normal; position:absolute; left:9rem; top:8rem; }
#qa .q::before,
#qa .q::after {
	display:block; content:""; width:7rem; height:1rem; background:var(--wh);
	position:absolute; right:8rem; top:20rem;
	transform-origin:center;
	transition:all 300ms 0s ease;
}
#qa .active .q::after{ transform:rotate(90deg); }
#qa .a{ font-size:12rem; line-height:18rem; max-height:0; overflow:hidden; transition:all 300ms 0s ease; }
#qa .active .a{ max-height:100vh; }

#contact .ttl{ color:var(--br); text-align:center; margin-bottom:5rem; }
#contact .ttl h2{
	display:flex; justify-content:center; align-items:center;
	font-family:"Oswald", sans-serif; font-size:48rem; line-height:1.0; font-weight:700; color:var(--wh);
	background:#D97A95; height:90rem; margin:0 0 39rem;
}
#contact .ttl p{ font-size:16rem; line-height:1.0; font-weight:700; }
#contact .ttl .logo{ width:286rem; margin:0 auto 17rem; }
#contact .ttl .t1{ font-size:42rem; line-height:1.0; }
#contact .ttl .t2{ font-size:16rem; line-height:35rem; margin-bottom:5rem; }
#contact .ttl .t3{ font-size:36rem; line-height:1.0; margin-bottom:17rem; }
#contact .ttl .t4{ font-size:16rem; line-height:30rem; text-align:left; width:fit-content; margin:0 auto 38rem; }
#contact .ttl .t5{ font-size:16rem; line-height:24rem; }
#contact .read{ font-size:16rem; line-height:24rem; color:var(--br); text-align:center; margin-bottom:26rem; }
#contact .req,
#contact .fre{
	display:inline-flex; justify-content:center; align-items:center; vertical-align:middle; width:52rem; height:30rem;
	font-size:14rem; line-height:1.0;  border-radius:5rem;
}
#contact .req{ color:var(--wh); background:var(--rd); }
#contact .fre{ color:var(--wh); background:var(--br); }
#contact form{ background:var(--wh); color:var(--br); border-radius:5rem; padding:20rem 15rem; margin:0 10rem; }
#contact form dt{ font-size:16rem; line-height:24rem; padding-left:8rem; border-left:4rem solid var(--br); margin-bottom:12rem; }
#contact form dd{ color:var(--bk); margin-bottom:30rem; }
#contact form dd>*:not(:last-child):not(.formError){ margin-bottom:8rem; }
#contact form dd .txt{ color:var(--br); }
#contact form input,
#contact form textarea,
#contact form select{
	max-width:100%; padding:12rem 10rem; border:1rem solid var(--br);
	font-family:inherit; font-size:16rem; line-height:24rem; color:var(--br);
}
#contact form .required::placeholder{ color:var(--br); opacity:0.4; }
#contact form :not(.required)::placeholder{ color:var(--bk); opacity:0.4; }
#contact form select,
#contact form input[type="text"]{ width:100%; }
#contact form select{ -webkit-appearance:none; appearance:none; background-image:url("./img/select_arr.svg"); background-repeat:no-repeat; background-position:right 14rem center; background-size:23rem 15rem; }
#contact form select::-ms-expand{ display:none; }
#contact form textarea{ height:114rem; }
#contact form .required{ border:1rem solid var(--rd); background-color:#FBF2F4; }
#contact form .btns{ display:flex; justify-content:center; align-items:center; gap:10rem; }
#contact form .bt{
	display:inline-flex; justify-content:center; align-items:center; position:relative;
	max-width:334rem; text-decoration:none; font-family:inherit; font-weight:500;
}
#contact form .bt.submit{ width:100%; font-size:17rem; height:60rem; color:var(--wh); background:var(--rd); border:1rem solid var(--rd); border-radius:25rem; }
#contact form .bt.submit::after{
	display:block; content:""; width:24rem; height:24rem;
	border:2rem solid var(--wh); border-bottom-color:transparent; border-left-color:transparent; transform:rotate(45deg);
	position:absolute; right:21rem; top:calc(50% - 12rem);
}
#contact form .bt.back{ width:140rem; font-size:12rem; height:40rem; color:var(--br); background:var(--bg); border:1rem solid var(--br); border-radius:15rem; }
#contact form .bt.back::after{
	display:block; content:""; width:8rem; height:8rem;
	border:2rem solid var(--br); border-top-color:transparent; border-right-color:transparent; transform:rotate(45deg);
	position:absolute; left:8rem; top:calc(50% - 4rem);
}

/* end */