@charset "utf-8";
/*.design-bg{ width: 1280px; height: 4851px; background: url('../design_img/top.jpg') 0 0 no-repeat; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: -1; opacity: .5; background-size: 1280px; }*/


@-webkit-keyframes scroll {
	0% {
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	50% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	51% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	100% {
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
}


@keyframes scroll {
	0% {
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	50% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}
	51% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
	100% {
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
}


@media print, screen and (min-width: 751px) {
body 					{ padding-top: 0!important; }

#header{ background-color: transparent; -webkit-transition: .3s; transition: .3s; }
#header .logoC{ display: none; }
#header .logoW{ display: block; }
#header #nav ul li a{ color: #fff; }
#header #nav ul li.contact a{ background-color: transparent; border: 1px solid #fff; }

.is-fixed #header{ background-color: #fff; }
.is-fixed #header .logoW{ display: none; }
.is-fixed #header .logoC{ display: block; }
.is-fixed #header #nav ul li a{ color: #514e4d; }
.is-fixed #header #nav ul li.contact a{ background-color: #947473; border: 1px solid #947473; color: #fff; }

#mv{ height: 720px; position: relative; background: url('../img/top/mv.jpg') 50% 50% no-repeat; background-size: cover; }
#mv h2{ width: 100%; text-align: center; font-size: 60px; position: absolute; top: 51.5%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); letter-spacing: .05em; color: #fff; }
#mv h2 span{ margin-top: 13px; display: block; font-size: 30px; letter-spacing: .15em; }
#mv .scroll{ position: absolute; left: 50%; bottom: 70px; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); font-size: 13px; color: #fff; }
#mv .scroll:before{ -webkit-animation: scroll 2s infinite; animation: scroll 2s infinite; background-color: #fff; bottom: -51px; content: ''; height: 40px; left: 0; margin: auto; position: absolute; right: 0; width: 1px; }

#main .fbox{ margin-top: 43px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#main .fbox>h3{ width: 400px; font-size: 22px; line-height: 2.1; }
#main .fbox>div{ width: calc(100% - 475px); margin-left: auto; }
#main .fbox>div h3{ margin-bottom: 14px; font-size: 22px; line-height: 1.5; }
#main .fbox>div h3:nth-of-type(n+2){ margin-top: 50px; }
#main .fbox>div p{ line-height: 3.1; }

#renovation{ margin-top: 100px; }
#renovation h2{ font-size: 60px; letter-spacing: -.01em; color: #947473; }
#renovation ul{ margin-top: 113px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#renovation ul li{ width: 48.65%; }
#renovation ul li:nth-of-type(2n){ margin-left: auto; }
#renovation ul li a{ position: relative; display: block; }
#renovation ul li a:hover{ opacity: 1; }
#renovation ul li a figure{ overflow: hidden; border-radius: 30px; }
#renovation ul li a figure img{ -webkit-transition: .3s all; transition: .3s all; }
#renovation ul li a:hover figure img{ -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
#renovation ul li a h4{ position: absolute; top: 32px; left: 44px; font-size: 15px; color: #fff; text-shadow: 5px 5px 5px rgba(0,0,0,.5); }
#renovation ul li a h4 span{ margin-bottom: 10px; display: block; font-size: 42px; letter-spacing: -.01em; text-shadow: 0 0 5px rgba(0,0,0,.4); }

#apartment{ margin-top: 80px; padding: 40px 0; border-top: 1px solid #c8b6b3; }

#work{ margin-top: 95px; padding: 65px 0 0; border-top: 1px solid #c8b6b3; }
#work .master{ overflow: hidden; }
#work .worksSlider{ margin-top: 42px; padding-bottom: 32px; position: relative; cursor: pointer; }
#work .swiper-scrollbar{ width: 420px; height: 2px!important; background: #c8b6b3; left: 28.5%; bottom: 0; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#work .swiper-scrollbar-drag{ background: #947473; }
#work .swiper-slide{ display: -webkit-box; display: -ms-flexbox; display: flex; }
#work .swiper-slide>img{ width: 57.208%; border-radius: 30px; -ms-flex-item-align: start; align-self: flex-start }
#work .swiper-slide>div{ width: 37.2%; margin-left: auto; padding-top: 20px; }
#work .swiper-slide>div h3{ font-size: 15px; line-height: 1.5; }
#work .swiper-slide>div h3:before{ content: 'CASE　|　'; }
#work .swiper-slide>div ul{ min-height: 92px; margin-top: 12px; }
#work .swiper-slide>div ul li{ margin: 7px 7px 0 0; padding: 6px 15px; font-size: 10px; border: 1px solid #947473; border-radius: calc(infinity * 1px); display: inline-block; }
#work .swiper-slide>div h4{ margin-bottom: 15px; font-size: 18px; line-height: 1.5; }
#work .swiper-slide>div p{ min-height: 150px; line-height: 1.8; }
#work .swiper-slide>div a{ width: 200px; padding: 11.5px 0; display: block; font-size: 13px; background: #02003c url('../img/common/arrow-w.svg') 91% 50% no-repeat; color: #fff; text-align: center; border-radius: calc(infinity * 1px); }

#consept{ margin-top: 100px; padding: 30px 0; border-top: 1px solid #c8b6b3; }

#price{ margin-top: 94px; padding: 40px 0; border-top: 1px solid #c8b6b3; }
#price .title{ margin-top: 16px; }
#price .fbox{  }
#price .fbox>h2{ width: 220px; }
#price .fbox>div{ width: calc(100% - 280px); }
#price .fbox .box{ max-width: 860px; margin-top: 45px; padding: 30px; text-align: center; background-color: #e1e1d5; }
#price .fbox .box h3{ margin-bottom: 7px; font-size: 16px; }
#price .fbox .box h3:nth-of-type(n+2){ margin-top: 25px; }

#company{ margin-top: 62px; padding: 89px 50px 89px; text-align: center; color: #fff; background: url('../img/top/company-bg.jpg') 50% 50% no-repeat; background-size: cover }
#company .title{ color: #fff; }
#company .title span{ margin-bottom: 9px; color: #fff; }
#company p{ margin-top: 20px; text-align: center; font-size: 18px; }
#company a{ width: 200px; margin: 30px auto 0; padding: 11.5px 0; background: #fff url('../img/common/arrow-b.svg') 92% 50% no-repeat; display: block; color: #947473; font-size: 13px; border-radius: calc(infinity * 1px); }

#contact{ margin-top: 100px; }
#contact .title{ text-align: center; }
#contact ul{ margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#contact ul li{ width: 31.532%; margin-right: 2.702%; padding: 52px 10px 48px; text-align: center; background-color: #f5f5f1; }
#contact ul li:nth-of-type(3n){ margin-right: 0; }
#contact ul li h3{ margin-bottom: 23px; font-size: 15px; }
#contact ul li p{ margin-top: 12px; text-align: center; }
#contact ul li:nth-of-type(1) a{ pointer-events: none; font-size: 36px; color: #c8161d; }
#contact ul li:nth-of-type(2) a{ width: 100%; max-width: 260px; margin: 23px auto 0; padding: 17.5px 0; font-size: 13px; display: block; border-radius: calc(infinity * 1px); background: #030336 url('../img/common/arrow-w.svg') 90% 50% no-repeat; color: #fff; }
#contact ul li:nth-of-type(3) a{ width: 100%; max-width: 260px; margin: 23px auto 0; padding: 17.5px 0; font-size: 13px; display: block; border-radius: calc(infinity * 1px); background: #06c755 url('../img/common/arrow-w.svg') 90% 50% no-repeat; color: #fff; }
}


@media screen and (max-width: 900px) and (min-width: 415px) {

}


@media screen and (max-width: 750px) {
body 					{ padding-top: 0!important; }

#header{ background-color: transparent; -webkit-transition: .3s; transition: .3s; }
#header .logoC{ display: none; }
#header .logoW{ display: block; }

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{ background: #fff; }

.drawer-open #header .logoC{ display: block; }
.drawer-open #header .logoW{ display: none; }
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before{ background: #000; }

.is-fixed #header{ background-color: #fff; }
.is-fixed #header .logoW{ display: none; }
.is-fixed #header .logoC{ display: block; }
.is-fixed #header #nav ul li a{ color: #514e4d; }
.is-fixed .drawer-hamburger-icon:after, .is-fixed .drawer-hamburger-icon:before{ background: #000; }
.is-fixed .drawer-hamburger-icon{ background: #000; }
.drawer-open .is-fixed .drawer-hamburger-icon{ background: transparent; }

#mv{ height: calc(100vh - 75px); position: relative; background: url('../img/top/mv.jpg') 50% 50% no-repeat; background-size: cover; }
#mv h2{ width: 100%; text-align: center; font-size: 40px; position: absolute; top: 51.5%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: #fff; }
#mv h2 span{ margin-top: 13px; display: block; font-size: 22px; letter-spacing: .1em; }
#mv .scroll{ position: absolute; left: 50%; bottom: 70px; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); font-size: 13px; color: #fff; }
#mv .scroll:before{ -webkit-animation: scroll 2s infinite; animation: scroll 2s infinite; background-color: #fff; bottom: -51px; content: ''; height: 40px; left: 0; margin: auto; position: absolute; right: 0; width: 1px; }

#main .fbox{ margin-top: 30px; }
#main .fbox>h3{ margin-bottom: 20px; font-size: 18px; line-height: 1.8; }
#main .fbox>div{  }
#main .fbox>div h3{ margin: 20px 0; font-size: 18px; line-height: 1.8; }
#main .fbox>div h3:nth-of-type(n+2){ margin-top: 50px; }
#main .fbox>div p{ line-height: 2; }

#renovation{ margin-top: 60px; }
#renovation h2{ font-size: 40px; letter-spacing: -.01em; color: #947473; line-height: 1.3 }
#renovation ul{ margin-top: 50px; }
#renovation ul li{  }
#renovation ul li:nth-of-type(n+2){ margin-top: 20px; }
#renovation ul li a{ position: relative; display: block; }
#renovation ul li a:hover{ opacity: 1; }
#renovation ul li a figure{ overflow: hidden; border-radius: 20px; }
#renovation ul li a figure img{ -webkit-transition: .3s all; transition: .3s all; }
#renovation ul li a:hover figure img{ -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
#renovation ul li a h4{ position: absolute; top: 20px; left: 20px; font-size: 13px; color: #fff; z-index: 2; text-shadow: 5px 5px 5px rgba(0,0,0,.5); }
#renovation ul li a h4 span{ margin-bottom: 8px; display: block; font-size: 30px; letter-spacing: -.01em; text-shadow: 0 0 5px rgba(0,0,0,.4); }

#apartment{ margin-top: 60px; padding: 30px 0; border-top: 1px solid #c8b6b3; }

#work{ margin-top: 30px; padding: 60px 0 0; border-top: 1px solid #c8b6b3; }
#work .master{ overflow: hidden; }
#work .worksSlider{ margin-top: 42px; padding-bottom: 32px; position: relative; cursor: pointer; }
#work .swiper-scrollbar{ width: 100%; height: 2px!important; background: #c8b6b3; left: 50%; bottom: 0; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }
#work .swiper-scrollbar-drag{ background: #947473; }
#work .swiper-slide{  }
#work .swiper-slide>img{ border-radius: 15px; -ms-flex-item-align: start; align-self: flex-start }
#work .swiper-slide>div{ padding-top: 20px; }
#work .swiper-slide>div h3{ font-size: 15px; line-height: 1.5; }
#work .swiper-slide>div h3:before{ content: 'CASE　|　'; }
#work .swiper-slide>div ul{ margin: 12px 0 20px; }
#work .swiper-slide>div ul li{ margin: 7px 7px 0 0; padding: 6px 15px; font-size: 10px; border: 1px solid #947473; border-radius: calc(infinity * 1px); display: inline-block; }
#work .swiper-slide>div h4{ margin-bottom: 15px; font-size: 16px; line-height: 1.5; }
#work .swiper-slide>div p{ line-height: 1.8; }
#work .swiper-slide>div a{ width: 200px; margin: 30px auto 0; padding: 11.5px 0; display: block; font-size: 13px; background: #02003c url('../img/common/arrow-w.svg') 91% 50% no-repeat; color: #fff; text-align: center; border-radius: calc(infinity * 1px); }

#consept{ margin-top: 60px; padding: 30px 0; border-top: 1px solid #c8b6b3; }

#price{ margin-top: 30px; padding: 40px 0; border-top: 1px solid #c8b6b3; }
#price .title{ margin-top: 16px; }
#price .fbox{  }
#price .fbox>h2{  }
#price .fbox>div{ margin-top: 30px; }
#price .fbox .box{ margin-top: 30px; padding: 15px 10px; text-align: center; background-color: #e1e1d5; }
#price .fbox .box h3{ margin: 0 0 7px; font-size: 15px; }
#price .fbox .box h3:nth-of-type(n+2){ margin-top: 25px; }

#company{ margin-top: 30px; padding: 80px 5%; text-align: center; color: #fff; background: url('../img/top/company-bg.jpg') 50% 50% no-repeat; background-size: cover }
#company .title{ color: #fff; }
#company .title span{ margin-bottom: 9px; color: #fff; }
#company p{ margin-top: 20px; text-align: center; font-size: 15px; }
#company a{ width: 200px; margin: 30px auto 0; padding: 11.5px 0; background: #fff url('../img/common/arrow-b.svg') 92% 50% no-repeat; display: block; color: #947473; font-size: 13px; border-radius: calc(infinity * 1px); }

#contact{ margin-top: 60px; }
#contact .title{ text-align: center; }
#contact ul{ margin-top: 30px; }
#contact ul li{ padding: 35px 10px 35px; text-align: center; background-color: #f5f5f1; }
#contact ul li:nth-of-type(n+2){ margin-top: 15px; }
#contact ul li h3{ margin-bottom: 15px; font-size: 15px; }
#contact ul li p{ margin-top: 12px; text-align: center; }
#contact ul li:nth-of-type(1) a{ font-size: 36px; color: #c8161d; }
#contact ul li:nth-of-type(2) a{ width: 100%; max-width: 260px; margin: 23px auto 0; padding: 17.5px 0; font-size: 13px; display: block; border-radius: calc(infinity * 1px); background: #030336 url('../img/common/arrow-w.svg') 90% 50% no-repeat; color: #fff; }
#contact ul li:nth-of-type(3) a{ width: 100%; max-width: 260px; margin: 23px auto 0; padding: 17.5px 0; font-size: 13px; display: block; border-radius: calc(infinity * 1px); background: #06c755 url('../img/common/arrow-w.svg') 90% 50% no-repeat; color: #fff; }
}