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

html{ font-family:"Noto Serif JP", serif; color:var(--bk); margin-top:0 !important; }
body{ font-size:16rem; font-weight:500; overflow-x:hidden; width:100%; background:#E6A500; }
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:url("./img/main_bg.webp") repeat top/100% auto;
}
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:98; 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 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{ opacity:0.6; }

.btn_set{
	padding:30rem 16rem;
	.t1{ font-size:14rem; line-height:24rem; text-align:center; font-weight:700; }
	.t2{
		text-align:center;
		.t2_1{ font-size:14rem; line-height:24rem; font-weight:700; }
		.t2_2{ font-size:20rem; line-height:24rem; font-weight:700; }
		.t2_3{ font-size:12rem; line-height:24rem; font-weight:700; }
	}
	.mail{
		display:block; width:100%; height:106rem; border-radius:10rem; position:relative;
		margin:5rem 0; transition:all 300ms 0s ease;
		background:linear-gradient(to bottom, #716ACF 0%, #060047 100%);
		color:var(--wh);
		&::before,
		&::after{ display:block; content:""; position:absolute; top:50%; transform:translateY(-50%); }
		&::before{ background:url("./img/btn_mail_l.webp") no-repeat center/cover; width:40rem; height:40rem; left:22rem; }
		&::after{ background:url("./img/btn_mail_r.webp") no-repeat center/cover; width:12rem; height:13rem; right:23rem; }
		.m1{
			font-size:14rem; line-height:24rem; text-align:center; position:absolute; left:0; top:9rem; right:0;
			&::before,
			&::after{ display:inline-block; content:"/"; margin:0 0.5em; }
			&::before{ transform:scaleX(-1); }
		}
		.m2{
			font-size:16rem; line-height:24rem; position:absolute; left:84rem; top:50%; transform:translateY(-50%);
			strong{ font-size:20rem; color:#F5FC92; }
		}
		.m3{ font-size:12rem; line-height:24rem; position:absolute; left:84rem; bottom:9rem; }
		&:hover{ 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) * 100); }
	.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{
		background:url("./img/nav_icon.webp") no-repeat left center/calc(var(--bw2) * 24) auto;
		font-size:calc(var(--bw2) * 16); line-height:calc(var(--bw2) * 24); color:var(--wh);
		padding:calc(var(--bw2) * 10) 0 calc(var(--bw2) * 10) calc(var(--bw2) * 44);
		border-bottom:1px dashed var(--wh);
	}
	
	.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); }
		.btn_set{
			width:calc(var(--bw1_in) * 398); max-width:100%; margin:0 auto;
			padding:calc(var(--bw1_in) * 30) 0 0;
			.t1{ font-size:calc(var(--bw1_in) * 14); line-height:calc(var(--bw1_in) * 24); }
			.t2{
				text-align:center;
				.t2_1{ font-size:calc(var(--bw1_in) * 14); line-height:calc(var(--bw1_in) * 24); }
				.t2_2{ font-size:calc(var(--bw1_in) * 20); line-height:calc(var(--bw1_in) * 24); }
				.t2_3{ font-size:calc(var(--bw1_in) * 12); line-height:calc(var(--bw1_in) * 24); }
			}
			.mail{
				height:calc(var(--bw1_in) * 106); border-radius:calc(var(--bw1_in) * 10);
				margin:calc(var(--bw1_in) * 5) 0;
				&::before{ width:calc(var(--bw1_in) * 40); height:calc(var(--bw1_in) * 40); left:calc(var(--bw1_in) * 22); }
				&::after{ width:calc(var(--bw1_in) * 12); height:calc(var(--bw1_in) * 13); right:calc(var(--bw1_in) * 23); }
				.m1{ font-size:calc(var(--bw1_in) * 14); line-height:calc(var(--bw1_in) * 24); top:calc(var(--bw1_in) * 9); }
				.m2{
					font-size:calc(var(--bw1_in) * 16); line-height:calc(var(--bw1_in) * 24); left:calc(var(--bw1_in) * 84);
					strong{ font-size:calc(var(--bw1_in) * 20); }
				}
				.m3{ font-size:calc(var(--bw1_in) * 12); line-height:calc(var(--bw1_in) * 24); left:calc(var(--bw1_in) * 84); bottom:calc(var(--bw1_in) * 9); }
			}
		}
	}
}
@media screen and (max-width:1400px) and (min-width:1020px) {
	.header_menu .logo{ padding-bottom:calc(var(--bw2) * 50); }
	.header_logo{ display:none; }
	/*
	header .menu{ padding-bottom:calc(var(--bw2) * 50); }
	.header_logo{
		position:static; left:auto; top:auto; bottom:auto; width:calc(var(--bw1_in) * 355); margin:0 auto; overflow-y:visible;
		img{ width:calc(var(--bw1_in) * 355); }
		.btn_set{
			width:calc(var(--bw1_in) * 355);
		}
	}
	*/
}

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

#top{}

.ttl{
	margin-bottom:30rem;
	.en{ font-size:14rem; line-height:31rem; text-align:center; font-weight:700; }
	.jp{ font-size:34rem; line-height:49rem; text-align:center; font-weight:700; }
	.sub{ font-size:18rem; line-height:30rem; text-align:center; font-weight:700; color:var(--wh); background:var(--bl); padding:5rem; border-radius:30rem; margin-top:12rem; }
}

#details{ margin:-74rem 16rem 0; }

#qa{
	padding:0 10rem 80rem;
	.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-family:"Noto Sans JP", sans-serif; 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; }
		}
	}
}

#contact{
	padding:0 16rem 56rem;
	.ttl{ color:var(--bl); }
	.read{ font-size:14rem; line-height:24rem; text-align:center; margin-bottom:13rem; }
	.req,
	.fre{
		display:inline-flex; justify-content:center; align-items:center; vertical-align:middle; width:72rem; height:23rem;
		font-family:"Noto Sans JP", sans-serif; 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(--bl); padding:30rem 15rem;
		dt{
			font-size:16rem; line-height:24rem; color:var(--bl); font-weight:700;
			padding-left:8rem; border-left:4rem solid var(--bl); margin-bottom:12rem;
		}
		dd{
			font-family:"Noto Sans JP", sans-serif; 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:#716ACF; margin-right:0.5em; }
		label{ display:block; padding-left:13rem; }
		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;
			max-width:334rem; 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:60rem;
				background:linear-gradient(to bottom, #716ACF 0%, #060047 100%); border-radius:10rem;
				&::after{
					display:block; content:"▼"; transform:rotate(-90deg);
					position:absolute; right:27rem; top:calc((100% - 1em) / 2);
				}
			}
			&.back{
				width:140rem; font-size:12rem; height:40rem; color:var(--bl); font-weight:700;
				background:var(--wh); border:1px solid var(--bl); border-radius:10rem;
				&::after{
					display:block; content:"▼"; transform:rotate(90deg);
					position:absolute; left:8rem; top:calc((100% - 1em) / 2);
				}
			}
			&.return{
				width:100%; font-size:16rem; line-height:1.0; color:var(--wh); font-weight:700; height:60rem;
				background:linear-gradient(to bottom, #716ACF 0%, #060047 100%); border-radius:10rem; padding-left:20rem;
				&::after{
					display:block; content:"▼"; transform:rotate(90deg);
					position:absolute; left:8rem; top:calc((100% - 1em) / 2);
				}
			}
			&:hover{ opacity:0.6; }
		}
		.note{ font-size:14rem; line-height:20rem; color:#949494; letter-spacing:  }
	}
}

/* end */