@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');
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap');
:root {
	--bk:#000000;
	--wh:#ffffff;
	--or:#F2A41C;
	--br:#8C7F5E;
	--db:#3B2205;
	--dg:#434444;
	--bg1:#F2E9DC;
	--bg2:#FAF3EA;
	--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(--br); }
footer { background:var(--bg2); color:#6F6254; }
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; }
	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:linear-gradient(to bottom, #F2A41C 0%, #D99F00 100%); 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(86rem / 2); }
	header .logo img{ display:block; max-width:calc(255rem / 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);
	}
}

/* SP */
@media screen and (max-width:1144px) {
	header{ position:fixed; left:0; top:0; z-index:999; height:65rem; width:100%; background:rgba(239,235,218,0.8); }
	header .logo{ position:absolute; left:112rem; bottom:5rem; width:166rem; }
	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 .kv{ margin-bottom:10rem }
#top .ticket{ width:335rem; margin:0 auto 30rem; }
#top .bt{ width:362rem; }

#how{ padding-bottom:32rem; }
#how .ttl{ width:370rem; margin:0 auto -10rem; }
#how .read{ font-size:14rem; line-height:25rem; text-align:center; color:var(--wh); margin-bottom:20rem; }
#how .read1 strong{ position:relative; }
#how .read1 strong span{ position:relative; z-index:1; }
#how .read1 strong::before{
	display:block; content:"";
	position:absolute; left:0; bottom:0; right:0; z-index:0;
	background:var(--db); height:7rem; border-radius:3.5rem;
}
#how .box{
	width:359rem; padding:54rem 22rem; margin:0 auto 13rem;
	background-image:url("img/how_box.png"),url("img/how_box.png"),url("img/how_box.png");
	background-position:top left, center top 28rem, right bottom;
	background-repeat:no-repeat;
	background-size:1077rem auto, 1077rem calc(100% - 56rem), 1077rem auto;
}
#how .box h3{ font-size:16rem; line-height:1.0; margin-bottom:4rem; color:var(--db); position:relative; text-align:center; }
#how .box h3::before{ display:block; content:""; background:var(--db); height:1rem; position:absolute; left:0; top:50%; right:0; z-index:0; }
#how .box h3 span{ position:relative; z-index:1; background:#F2E9DC; padding:0 1em; }
#how .box p{ font-size:12rem; line-height:20rem; color:var(--dg); text-align:center; }
#how .box .item:not(:last-of-type){ margin-bottom:30rem; }
#how .note{ width:359rem; font-size:12rem; line-height:20rem; color:var(--wh); margin:0 auto 44rem; }
#how .btn{ width:362rem; margin:0 auto; }

#detail{ padding:50rem 10rem 55rem; }
#detail .ttl{ width:370rem; margin:0 auto -10rem; }
#detail .read{ font-size:14rem; line-height:25rem; text-align:center; color:var(--wh); }
#detail .item{
	display:flex; flex-wrap:wrap; background:var(--bg1);
	padding:9rem 6rem 12rem; margin-top:19rem;
	box-shadow:0 3rem 6rem rgba(0,0,0,0.48); position:relative;
}
#detail .item .num{
	display:flex; justify-content:center; align-items:center; width:44rem; height:46rem;
	position:absolute; left:2rem; top:-4rem;
	font-family:"Oswald", sans-serif; font-size:28rem; line-height:1.0; color:var(--wh);
	background:url("img/detail_num.svg") no-repeat center / cover; padding:0 4rem 8rem 0;
}
#detail .item figure{ order:1; width:213rem; border:3rem solid var(--wh); }
#detail .item hgroup{ order:2; width:calc(100% - 213rem + 6rem); margin-right:-6rem; }
#detail .item hgroup::before{
	display:block; content:"Present";
	font-family:"Tangerine", cursive; font-size:30rem; line-height:1.0; color:var(--db); font-weight:700;
	transform:rotate(-15deg); transform-origin:center;
	margin:0 0 10rem -11rem;
}
#detail .item hgroup .sub{ font-size:18rem; line-height:25rem; color:var(--db); font-weight:700; text-align:center; }
#detail .item hgroup .tag{
	display:flex; justify-content:center; align-items:center; width:110rem; height:20rem; border-radius:10rem;
	font-size:14rem; line-height:1.0;
	background:var(--br); color:var(--wh); margin:11rem auto 0;
}
#detail .item .txt{ order:3; font-size:14rem; line-height:20rem; padding-top:13rem; }
#detail .btn{ width:362rem; margin:35rem auto 0; }

#flow{ padding:0 20rem 60rem; }
#flow .ttl{ width:221rem; margin:0 auto 18rem; }
#flow .item{ margin-top:20rem; }
#flow .item hgroup{ display:flex; gap:12rem; margin-bottom:10rem; }
#flow .item .step{
	display:flex; justify-content:center; align-items:center; width:53rem; height:23rem; background:var(--bg1);
	font-family:"Tangerine", cursive; font-size:20rem; line-height:1.0; font-weight:500; color:var(--db);
	border-radius:11.5rem;
}
#flow .item .sub{ font-size:18rem; line-height:23rem; color:var(--wh); }
#flow .item .txt{
	font-size:14rem; line-height:20rem; color:var(--dg);
	background:var(--bg1); padding:8rem 20rem; border-radius:3rem;
}

#scene{ background:url("./img/scene_bg.jpg") fixed repeat left top/100% auto; padding-bottom:50rem; }
#scene .half{ margin:0 0 17rem; }
#scene .ttl{ padding:0 10rem 27rem; }
#scene figure{ width:388rem; margin:0 auto; }

#voice{ padding:0 10rem 70rem; background:var(--bg2); }
#voice .ttl{ margin-bottom:24rem; }
#voice .wrap{ overflow-x:auto; }
#voice .list{ display:flex; flex-flow:column; gap:5rem; }
#voice .list>*{
	display:flex;
	background:var(--wh); padding:10rem 14rem 10rem 12rem; 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{ width:75rem; margin-right:14rem; }
#voice .list p{ width:calc(100% - 75rem - 14rem); font-size:12rem; line-height:18rem; letter-spacing:0.05em; }
#voice .list p strong{ color:#DEB235; font-weight:500; }

#qa{ padding:0 10rem 80rem; background:var(--bg2); }
#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:#6F6254; 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; background:var(--bg2); }
#studio .ttl{ padding-bottom:14rem; }
#studio .logo{ display:block; width:268rem; margin:0 auto 24rem; }
#studio .photo{ margin:0 auto 8rem; }
#studio .item{ background:var(--wh); padding:10rem 17rem; margin-bottom:8rem; }
#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:16rem; }
#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 auto; }
#studio iframe{ display:block; width:100%; aspect-ratio:370 / 244; border:0; }

#contact{ background:var(--bg2); }
#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 45rem; 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 input[type="checkbox"]{
	-webkit-appearance:none; appearance:none;
	width:1em; height:1em; border:1rem solid #6F6254;
	padding:0; vertical-align:middle;
}
#contact form input[type="checkbox"]:checked{ background:#6F6254 url("./img/checkbox_arr.svg") no-repeat center / cover; }
#contact form label{ display:block; color:#6F6254; }
#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;
	cursor:pointer; transition: all 300ms 0s ease;
}
#contact form .bt:hover{
	opacity:0.6;
}
#contact form .bt.submit{ width:100%; font-size:17rem; height:60rem; color:var(--wh); background:var(--or); border:1rem solid var(--or); 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(--bg1); 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);
}

#contact .privacy{
	width:100%; height:176rem; padding:15rem 30rem; margin-bottom:40rem;
	border:1rem solid #707070; color:#434444; overflow:scroll;
}
#contact .privacy h3{ font-size:16rem; line-height:20rem; font-weight:700; letter-spacing:0.1em; margin-bottom:16rem; text-align:center; color:#6F6254; }
#contact .privacy h4{ font-size:16rem; line-height:20rem; font-weight:500; letter-spacing:0.05em; }
#contact .privacy p{ font-size:12rem; line-height:20rem; }
#contact .privacy>*:not(:last-child){ margin-bottom:20rem; }

/* end */