body img { display:block; max-width:100%; }


#logo { display:block; position:absolute; top:70px; left:50%; transform:translateX(-50%); width:160px; z-index:10; }





#mainvisual { position:relative; width:100%; height:100vh; background:#000000; overflow:hidden; }
#mainvisual .bg { 
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120%; height:120%; 
	background:url(/images/main/visual.jpg)no-repeat 50% 50%; background-size:cover; opacity:0%; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}
#mainvisual.active .bg { width:100%; height:100%; opacity:100%; transition:all 5s cubic-bezier(0.25, 1, 0.5, 1) 0s; }
#mainvisual .maintxt { position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); text-align:center; width:90%; height:384px; }
#mainvisual .maintxt li.t1 { width:34px; margin:0 auto; font-family: 'MaruBuriSemiBold'; font-size:29px; color:#dddddd; letter-spacing:5px; writing-mode: vertical-lr; }
#mainvisual .maintxt li.t2 { width:1px; height:60px; margin:0 auto; margin-top:26px; background:#ffffff; }
#mainvisual .maintxt li.t3 { width:34px; margin:0 auto; margin-top:26px; font-family: 'MaruBuriSemiBold'; font-size:29px; color:#dddddd; letter-spacing:5px; writing-mode: vertical-lr; }
#mainvisual .maintxt li.t4 { width:209px; margin:0 auto; margin-top:62px; }
#mainvisual .maintxt li.t5 { width:211px; height:47px; border:1px solid rgba(255,255,255,20%); box-sizing:border-box; line-height:45px; margin:0 auto; border-radius:50px; margin-top:26px; font-family: 'MaruBuriSemiBold'; font-size:22px; color:#8e8e8e; }

#mainvisual .maintxt2 { position:absolute; top:80%; left:50%; transform:translate(-50%,-50%); width:142px; }

#mainvisual.active .maintxt li.t1 { animation: text-focus-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0.3s; }
#mainvisual.active .maintxt li.t2 { animation: txt2 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.3s; }
#mainvisual.active .maintxt li.t3 { animation: focus-in-expand 0.9s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.8s; }
#mainvisual.active .maintxt li.t4 { animation: focus-in-expand 0.9s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1.8s; }
#mainvisual.active .maintxt li.t5 { animation: text-focus-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 2.2s; }
#mainvisual.active .maintxt2 { animation: focus-in-expand 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.4s; }

@keyframes txt2 {
	0% { height:0px; }
	100% { height:60px; }
}
@keyframes text-focus-in {
	0% { filter: blur(12px); opacity: 0; }
	100% { filter: blur(0px); opacity: 1; }
}
@keyframes focus-in-expand {
	0% {
		top:90%;
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		top:80%;
		filter: blur(0px);
		opacity: 1;
	}
}

#intro01 { position:relative; width:100%; height:1080px; background:#b1a296; overflow:hidden; }
#intro01 .bg1 { position:absolute; top:0px; left:6%; width:1px; height:0%; background:#3d3833; }
#intro01 .bg2 { position:absolute; bottom:0px; right:6%; width:1px; height:0%; background:#3d3833; }
#intro01 ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:382px; margin:0 auto; text-align:center; }
#intro01 ul li.t1 { position:relative; width:382px; height:570px; margin:0 auto; overflow:hidden; }
#intro01 ul li.t1 span { display:block; position:absolute; top:0px; left:-383px; width:382px; height:570px; }
#intro01 ul li.t1 img { width:100%; }
#intro01 ul li.t2 { width:100%; margin-top:40px; font-family: 'MaruBuriSemiBold'; font-size:30px; color:#382115; letter-spacing:1px; transform:translateY(90px); opacity:0; filter: blur(4px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s;  }
#intro01 ul li.t3 { width:100%; margin-top:30px; font-size:18px; color:#433e3a; font-weight:500; line-height:160%; transform:translateY(90px); opacity:0; filter: blur(4px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s; }

#intro01.active .bg1 { height:100%; transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; }
#intro01.active .bg2 { height:100%; transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; }
#intro01.active ul li.t1 span { left:0px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; }
#intro01.active ul li.t2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; }
#intro01.active ul li.t3 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1.4s; }


#intro02 { position:relative; width:100%; height:972px; background:url(/images/main/main09.jpg)no-repeat 50% 50%; background-size:cover; overflow:hidden; }
#intro02 ul.intro02ul { position:relative; width:90%; max-width:600px; margin:0 auto; text-align:center; padding-top:220px; }
#intro02 ul li.t1 { width:157px; margin:0 auto; }
#intro02 ul li.t2 { margin-top:22px; font-family: 'MaruBuriSemiBold'; font-size:23px; color:#b1a296; }
#intro02 ul li.t2 br { display:none; }
#intro02 ul li.t3 { display:flex; justify-content: space-between; width:100%; max-width:460px; margin:0 auto; margin-top:80px; }
#intro02 ul li.t4 { display:flex; justify-content: space-between; width:100%; max-width:534px; margin:0 auto; margin-top:20px; }
/* #intro02 ul li.t4 div:nth-child(1) { width:180px; height:39px; line-height:42px; font-size:23px; font-family: 'Montserrat'; font-weight:700; color:#b1a296; letter-spacing:1px; padding-left:45px; box-sizing:border-box; background:url(/images/intro/intro02img3_1.png)no-repeat 0 0; }
#intro02 ul li.t4 div:nth-child(1) a { color:#b1a296; } */
#intro02 ul li.t4 div:nth-child(1) { width:318px; height:39px; line-height:42px; font-size:19px; font-weight:700; color:#b1a296; letter-spacing:1px; padding-left:38px; box-sizing:border-box; background:url(/images/intro/intro02img3_2.png)no-repeat 0 0; }
#intro02 ul li.t4 div:nth-child(1) a { color:#b1a296; }

#intro02 ul li.t5 { display:flex; justify-content: space-between; width:100%; max-width:595px; margin:0 auto; margin-top:44px; }
#intro02 ul li.t5 div { width:32%; height:44px; line-height:44px; font-size:14px; font-weight:700; border-radius:8px; overflow:hidden; color:#2d2b2b; background:#b1a296; box-sizing:border-box;  }
#intro02 ul li.t5 div img { display:inline-block; vertical-align:middle; padding-right:10px; }
#intro02 ul li.t5 div a { display:block; width:100%; height:100%; color:#2d2b2b; }


#intro02 .foottxt { position:relative; width:100%; padding:26px 0px 20px 0px; box-sizing:border-box; }

#intro02 .footercs { position:relative; width:100%; box-sizing:border-box; }
.footercs ul { position:relative; width:90%; max-width:320px; margin:0 auto; margin-top:20px; }
.footercs ul li.name { width:100%; height:46px; overflow:hidden; }
.footercs ul li.phone { width:100%; height:46px; overflow:hidden; margin-top:6px; }
.footercs ul li.contentinput { width:100%; height:46px; overflow:hidden; margin-top:6px; }
.footercs ul li.submitbt { width:100%; height:46px; margin-top:6px; }
.footercs ul li.name label,.footercs ul li.phone label,.footercs ul li.subject1 label,.footercs ul li.contentinput label { display:none; font-size:0px; }
.footercs ul li input.required { display:block; width:100%; height:46px; background:#ffffff; border:0px; border-radius:8px; font-size:15px; font-weight:400; text-indent:10px; }
.footercs ul li input.required::placeholder { color:#443737; }
.footercs ul li.submitbt input { display:block; width:100%; height:47px; font-size:18px; font-weight:600; border-radius:8px;  letter-spacing:-1px; color:#ffffff; background:#b1a296; border:0px; cursor:pointer; }



@media all and (max-width:800px){


#logo { display:block; position:absolute; top:3%; left:50%; transform:translateX(-50%); width:120px; z-index:10; }





#mainvisual { position:relative; width:100%; height:100vh; background:#000000; overflow:hidden; }
#mainvisual .bg { 
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120%; height:120%; 
	background:url(/images/main/visual2.jpg)no-repeat 50% 50%; background-size:cover; opacity:0%; transition:all 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}
#mainvisual.active .bg { width:100%; height:100%; opacity:100%; transition:all 5s cubic-bezier(0.25, 1, 0.5, 1) 0s; }
#mainvisual .maintxt { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); text-align:center; width:90%; height:384px; }
#mainvisual .maintxt li.t1 { width:22px; margin:0 auto; font-family: 'MaruBuriSemiBold'; font-size:20px; color:#dddddd; letter-spacing:5px; writing-mode: vertical-lr; }
#mainvisual .maintxt li.t2 { width:1px; height:40px; margin:0 auto; margin-top:16px; background:#ffffff; }
#mainvisual .maintxt li.t3 { width:22px; margin:0 auto; margin-top:16px; font-family: 'MaruBuriSemiBold'; font-size:20px; color:#dddddd; letter-spacing:5px; writing-mode: vertical-lr; }
#mainvisual .maintxt li.t4 { width:149px; margin:0 auto; margin-top:42px; }
#mainvisual .maintxt li.t5 { width:150px; height:35px; border:1px solid rgba(255,255,255,30%); box-sizing:border-box; line-height:33px; margin:0 auto; border-radius:50px; margin-top:26px; font-family: 'MaruBuriSemiBold'; font-size:16px; color:#8e8e8e; }

@keyframes txt2 {
	0% { height:0px; }
	100% { height:40px; }
}
@keyframes text-focus-in {
	0% { filter: blur(12px); opacity: 0; }
	100% { filter: blur(0px); opacity: 1; }
}
@keyframes focus-in-expand {
	0% {
		top:90%;
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		top:80%;
		filter: blur(0px);
		opacity: 1;
	}
}

#intro01 { position:relative; width:100%; height:auto; padding:20% 0; background:#b1a296; overflow:hidden; }
#intro01 .bg1 { position:absolute; top:0px; left:6%; width:1px; height:0%; background:#3d3833; }
#intro01 .bg2 { position:absolute; bottom:0px; right:6%; width:1px; height:0%; background:#3d3833; }
#intro01 ul { position:relative; top:0; left:0; transform:translate(0%,0%); width:90%; max-width:382px; margin:0 auto; text-align:center; }
#intro01 ul li.t1 { position:relative; width:80%; height:auto; margin:0 auto; overflow:hidden; }
#intro01 ul li.t1 span { display:block; position:relative; top:0px; left:0px; width:100%; height:auto; }
#intro01 ul li.t1 img { width:100%; }
#intro01 ul li.t2 { width:100%; margin-top:20px; font-family: 'MaruBuriSemiBold'; font-size:20px; color:#382115; letter-spacing:1px; transform:translateY(90px); opacity:0; filter: blur(4px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s;  }
#intro01 ul li.t3 { width:100%; margin-top:14px; font-size:14px; color:#433e3a; font-weight:500; line-height:160%; transform:translateY(90px); opacity:0; filter: blur(4px); transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s; }

#intro01.active .bg1 { height:100%; transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; }
#intro01.active .bg2 { height:100%; transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; }
#intro01.active ul li.t1 span { left:0px; transition:all 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; }
#intro01.active ul li.t2 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; }
#intro01.active ul li.t3 { transform:translateY(0px); opacity:1; filter: blur(0px); transition:all 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1.4s; }


#intro02 { position:relative; width:100%; height:auto; padding:20% 0; background:url(/images/main/main09.jpg)no-repeat 50% 50%; background-size:cover; overflow:hidden; }
#intro02 ul.intro02ul { position:relative; width:90%; max-width:600px; margin:0 auto; text-align:center; padding-top:0px; }
#intro02 ul li.t1 { width:157px; margin:0 auto; }
#intro02 ul li.t2 { margin-top:22px; font-family: 'MaruBuriSemiBold'; font-size:16px; color:#b1a296; line-height:140%; }
#intro02 ul li.t2 br { display:block; }
#intro02 ul li.t3 { display:flex; justify-content: space-between; width:100%; max-width:460px; margin:0 auto; margin-top:20px; }
#intro02 ul li.t3 div { width:28%; }
#intro02 ul li.t4 { display:block; justify-content: space-between; width:100%; max-width:294px; margin:0 auto; margin-top:30px; text-align:left; }
/* #intro02 ul li.t4 div:nth-child(1) { width:100%; height:39px; line-height:42px; font-size:18px; font-family: 'Montserrat'; font-weight:700; color:#b1a296; letter-spacing:1px; padding-left:45px; box-sizing:border-box; background:url(/images/intro/intro02img3_1.png)no-repeat 0 0; }
#intro02 ul li.t4 div:nth-child(1) a { color:#b1a296; } */
#intro02 ul li.t4 div:nth-child(1) { width:100%; height:39px; margin-top:10px; line-height:42px; font-size:16px; font-weight:700; color:#b1a296; letter-spacing:1px; padding-left:38px; box-sizing:border-box; background:url(/images/intro/intro02img3_2.png)no-repeat 0 0; }
#intro02 ul li.t4 div:nth-child(1) a { color:#b1a296; }

#intro02 ul li.t5 { display:flex; justify-content: space-between; width:100%; max-width:595px; margin:0 auto; margin-top:44px; }
#intro02 ul li.t5 div { width:32%; height:44px; line-height:44px; font-size:12px; font-weight:700; border-radius:8px; overflow:hidden; color:#2d2b2b; background:#b1a296; box-sizing:border-box;  }
#intro02 ul li.t5 div img { display:inline-block; vertical-align:middle; padding-right:6px; }
#intro02 ul li.t5 div a { display:block; width:100%; height:100%; color:#2d2b2b; }


}