@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; }

/* 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; }
}

.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{ text-align:center; padding-bottom:calc(67rem / 2); }
	header .logo img{ display:block; max-width:calc(278rem / 2); margin:calc(-15rem / 2); }
	header .menu .ttl{ padding-bottom:calc(14rem / 2); }
	header .menu .ttl img{ width:calc(150rem / 2); margin:calc(-33rem / 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);
	}
	.header_logo{
		position:fixed; left:calc(10rem / 2); top:calc(10rem / 2); right:calc(390rem + (365rem / 2) + (10rem / 2)); bottom:calc(10rem / 2);
		display:flex; justify-content:center; align-items:center;
	}
	.header_logo img{ width:calc(387rem / 2); }
}
@media screen and (max-width:1400px) and (min-width:1145px) {
	header{ padding-top:calc(155rem / 2); }
	header .menu nav{ max-height:calc(100vh - ((155rem + 10rem + 120rem + 44rem) / 2)); }
	.header_logo{
		left:auto; bottom:auto; top:calc(20rem / 2); right:calc(80rem / 2);
		width:calc((365rem - 80rem * 2) / 2);
		display:flex; justify-content:center; align-items:center;
	}
}

/* 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; }
#top .bt{ position:absolute; bottom:11rem; left:calc(50% - 305rem / 2); width:305rem; }

#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{ margin:0 -7rem 29rem; }
#scene .list .item{ padding:18rem 4rem; margin-top:-5rem; }
#scene .list .item img{ border-radius:5rem; border:1rem solid var(--bg); box-shadow:0 3rem 6rem rgba(0,0,0,0.16); }

.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;
}

#campaign{
	background-repeat:no-repeat;
	background-image:url("./img/campaign_bg.png"), url("./img/campaign_bg.png"), url("./img/campaign_bg.png"),linear-gradient(to bottom, #F3EADF 10%, #D98200 10%, #D98200 50%, #F29C1C 50%,#F29C1C 90%, #F3EADF 90%);
	background-position:left top, center center, right bottom, center;
	background-size:auto 255rem,auto 255rem,auto 255rem,100% 100%;
	padding:40rem 10rem 44rem; margin-bottom:26rem;
}
#campaign .ttl{ margin-bottom:14rem; }
#campaign .item{
	display:flex; flex-wrap:wrap; align-items:flex-start;
	background:#FFFFFF; padding:0 8rem 20rem; margin-bottom:16rem; box-shadow:0 3rem 6rem rgba(0,0,0,0.16);
}
#campaign .sub,
#campaign .sub2{
	display:flex; align-items:center; width:calc(100% + 8rem * 2);
	min-height:50rem; margin:0 -8rem 14rem;
	font-size:26rem; line-height:40rem; color:#FFFFFF; font-weight:500;
}
#campaign .sub{
	background:#6F6254 url("./img/campaign_sub.png") no-repeat top center/100% auto;
	padding:5rem 0 5rem 35rem;
}
#campaign .sub strong{
	margin-right:15rem;
	font-family:"Barlow Condensed", sans-serif; font-size:40rem; line-height:1.0; font-weight:600; color:#F2E9DE;
}
#campaign .sub span{ font-size:20rem; }
#campaign .sub2{
	background:#6F6254 url("./img/campaign_sub2.png") no-repeat top center/100% auto;
	justify-content:center; padding:5rem 0;
}

#campaign .img{ overflow:hidden; width:161rem; border-radius:5rem; margin-right:16rem; box-shadow:0 3rem 6rem rgba(0,0,0,0.16); }
#campaign .meta{ width:calc(100% - 161rem - 16rem); padding-top:8rem; }
#campaign .tokubetu{
	font-size:16rem; line-height:22rem; color:var(--br); text-align:center;
	border-top:1rem solid var(--br); border-bottom:1rem solid var(--br); 
}
#campaign .price{ color:var(--rd); text-align:center; margin-top:5rem; }
#campaign .price strong{ font-family:"Barlow Condensed", sans-serif; font-size:48rem; line-height:1.0; color:var(--rd); font-weight:700; }
#campaign .price ruby{ color:var(--rd); font-weight:600; margin-left:0.25em; }
#campaign .price ruby span{ font-size:20rem; line-height:1.0; }
#campaign .price ruby rt{ font-size:8rem; line-height:1.0; }
#campaign .price_normal{ font-size:14rem; line-height:17rem; color:var(--br); text-align:center; margin-top:8rem; }
#campaign .cat{ display:flex; flex-wrap:wrap; gap:4rem 8rem; margin-top:25rem; }
#campaign .cat span{ display:block; font-size:14rem; line-height:1.0; color:#3A1E00; background:#F0F0A3; padding:6rem 14rem; border-radius:3rem; }
#campaign .cat span sub{ vertical-align:baseline; font-size:9rem; }
#campaign .txt{
	width:100%; background:#F5F5F5; padding:10rem; margin-top:13rem; border-radius:5rem;
	font-size:14rem; line-height:21rem;
}
#campaign .txt strong{ color:#D98200; font-weight:inherit; }
#campaign .note{ font-size:12rem; line-height:18rem; margin-top:10rem; font-weight:400; }
#campaign .txt2{ width:100%; font-size:14rem; line-height:21rem; padding-bottom:40rem; }
#campaign .txt2 strong{ color:#D98200; font-weight:inherit; }

#campaign .list{ display:grid; grid-template-columns:1fr 1fr; gap:18rem; }
#campaign .list figure{ overflow:hidden; border-radius:5rem; box-shadow:0 3rem 6rem rgba(0,0,0,0.16); }
#campaign .list .name{ font-size:14rem; line-height:17rem; color:#3A1E00; text-align:center; font-weight:700; margin-top:8rem;  }
#campaign .list .price>span{ font-size:20rem; line-height:1.0; }
#campaign .list .price{ font-size:13rem; }
#campaign .list .price strong{ font-size:28rem; }
#campaign .list .price ruby{ font-size:10rem; line-height:1.0; }
#campaign .list .price ruby span{ font-size:12rem; }
#campaign .list .price ruby rt{ font-size:5rem; }
#campaign .list dl{ display:flex; justify-content:space-between; align-items:center; }
#campaign .list dt{ font-size:13rem; line-height:17rem; }
#campaign .list dd.price strong{ font-size:23rem; }
#campaign .list .note{ font-size:12rem; line-height:18rem; text-align:center; font-weight:400; }

#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-family:"Oswald", sans-serif; font-size:48rem; line-height:1.0; color:var(--bg); font-weight:700; margin-bottom:10rem; }
#collection .wrap{ overflow-x:auto; padding:3rem 10rem 18rem; margin:0 -10rem 18rem; }
#collection .list{ display:flex; gap:8rem; }
#collection .list>*{ width:200rem; 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 6rem; }
#hair .read{ font-size:14rem; line-height:21rem; color:var(--wh); padding:10rem 17rem; margin:0 10rem; background:#DEB235; border:4rem solid var(--wh); border-radius:8rem; }
#hair .read strong{ color:var(--rd); font-weight:500; border-bottom:1rem dashed var(--rd); }
#hair .wrap{ overflow-x:auto; padding:3rem 10rem 18rem; margin:0 -10rem 18rem; }
#hair .list{ display:flex; gap:8rem; }
#hair .list>*{ width:200rem; 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 #DEB235;
	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; }

#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; }

#studio{ padding:0 10rem 70rem; }
#studio .ttl{ padding-bottom:14rem; }
#studio .item{ background:#FFFFFF; padding:1rem; }
#studio .item:not(:last-child){ margin-bottom:8rem; }
#studio .q{ display:flex; justify-content:space-between;  font-size:14rem; line-height:20rem; color:var(--wh); font-weight:500; background:var(--br); padding:10rem 22rem 10rem 44rem; position:relative; }
#studio .q i{
	display:block; width:27rem; height:27rem;
	position:absolute; left:6rem; top:calc(50% - 27rem / 2);
	background:url("./img/studio_sub.png") no-repeat center/cover;
}
#studio .q span{
	display:flex; justify-content:center; align-items:center; width:90rem; line-height:20rem;
	background:var(--bk); font-size:10rem; line-height:1.0; color:var(--wh); border-radius:10rem;
}
#studio .q::before,
#studio .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;
}
#studio .active .q::after{ transform:rotate(90deg); }

#studio .a{ display:flex; flex-flow:row-reverse; justify-content:space-between; font-size:12rem; line-height:18rem; max-height:0; padding:0 8rem 0 12rem; overflow:hidden; transition:all 300ms 0s ease; }
#studio .active .a{ max-height:100vh; padding:5rem 8rem 5rem 12rem; }

#studio figure{ width:96rem; }
#studio .wrap{ width:calc(100% - 96rem); }
#studio .zip{ font-size:12rem; line-height:18rem; padding-top:7rem; margin-bottom:6rem; }
#studio .tel{ font-family:"Barlow Condensed", sans-serif; font-size:18rem; line-height:1.0; color:var(--rd); font-weight:700; text-decoration:none; margin-bottom:6rem; }

#studio .zip,
#studio .tel{ display:flex; align-items:center; position:relative; padding-left:32rem; }
#studio .zip::before,
#studio .tel::before{ display:block; content:""; width:22rem; height:20rem; position:absolute; left:0; }
#studio .zip::before{ background:url("./img/studio_zip.png") no-repeat center/contain; top:2rem; }
#studio .tel::before{ background:url("./img/studio_tel.png") no-repeat center/contain; top:-1rem; }
#studio .bt{ display:block; width:248rem; margin:0 -9rem; }

#contact .ttl{ color:var(--br); text-align:center; margin-bottom:17rem; }
#contact .ttl h2{ font-family:"Oswald", sans-serif; font-size:48rem; line-height:1.0; font-weight:700; margin-bottom:16rem; }
#contact .ttl p{ font-size:16rem; line-height:1.0; font-weight:700; }
#contact .read{ font-size:16rem; line-height:24rem; text-align:center; color:var(--br); 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 */