@charset "UTF-8";

.page_content .main .visual {position: relative;}
.page_content .main .visual .inner {position: relative;}
.page_content .main .visual .inner h1 {margin: 0;width: 15.8%;opacity: 0;transition: 2s ease all 1s;transform: scale(1.1);position: absolute;top: 33.8%;left: 50%;transform: translate(-50%, -50%) scale(1.1);}
.page_content .main .visual.active .inner h1 {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.page_content .main .intro {position: relative;z-index: 100;padding-bottom: 38px;position: absolute;bottom: 0;left: 0;width: 100%;}
.page_content .main .intro .inner {width: 1160px;margin:  0 auto;}
.page_content .main .intro .inner .lead {color: #fff;font-size: 16px;line-height: 2em;letter-spacing: 0.1em;text-shadow: 0 0 5px #000, 0 0 7px #000, 0 0 10px #000, 0 0 5px #000, 0 0 20px #000, 0 0 10px;, 0 0 20px #000, 0 0 10px;}
.page_content .main .intro .inner .btbox {display: flex;flex-direction: column;margin-top: 40px;align-items: start;gap: 8px;}
.page_content .main .intro .inner .btbox a {color: #ACA26F;font-size: 17px;padding: 10px 15px 10px 0;letter-spacing: 0.1em;position: relative;font-weight: bold;}
.page_content .main .intro .inner .btbox a:hover {
	color: #fff;
}
.page_content .main .intro .inner .btbox a:hover .icon_arrow {
	background-image: url(../images_new/icon_arrow_w.png);
}

/*============================
#residence
============================*/
.page_content .main .sec {
	background: linear-gradient(to bottom, #202020 0%, #101010 100%);
	position: relative;
	z-index: 100;
	padding-bottom: 136px;
}
.page_content .main .sec .inner {max-width: 1160px;position: relative;margin: 0 auto;height: 715px;}
.page_content .main .sec .inner .img.big {position: absolute;left: calc(50% - 70px);width: calc(50vw + 70px);height: 528px;max-width: 760px;}
.page_content .main .sec .inner .img.big img {max-width: none;height: 100%;width: 100%;object-fit: cover;}
.page_content .main .sec .inner .imgbox {display: flex;flex-direction: column;gap: 20px;position: absolute;left: 0;bottom: -20px;width: 310px;}
.page_content .main .sec .inner .imgbox.active {
	top: auto;
	bottom: 0;
}
.page_content .main .sec .inner .imgbox .img {}
.page_content .main .sec .inner .imgbox .img img {
}
.page_content .main .sec .inner .hbox {position: absolute;color: #fff;left: calc(50% - 210px);top: 275px;display: block;transition: all ease 0.3s;}
.page_content .main .sec .inner .hbox .label {font-size: 35px;letter-spacing: 0.15em;line-height: 1.45em;}
.page_content .main .sec .inner .hbox h2 {font-size: 17px;letter-spacing: 0.1em;margin-top: 22px;}
.page_content .main .sec .inner .hbox .more {background: #505050;width: 90px;height: 36px;display: flex;justify-content: center;align-items: center;position: relative;border-radius: 30px;margin-top: 34px;!i;!;font-size: 12px;transition: all ease 0.3s;}
.page_content .main .sec .inner .hbox .more .icon_arrow {position: relative;top: auto;right: auto;transform: none;margin-left: 5px;}
.page_content .main .sec .inner .text {position: absolute;right: 0;bottom: 0;color: #C0C0C0;font-size: 15px;width: 270px;line-height: 1.7em;}
.page_content .main .sec.designer {
	background: linear-gradient(to bottom, #202020 0%, #101010 100%);
}
.page_content .main .sec.designer .inner .text {width: 380px;}
.page_content .main .sec .inner .hbox:hover {
	opacity: 1;
	color: #ACA26F;
}
.page_content .main .sec .inner .hbox:hover .more {
	background: #ACA26F;
	color: #000;
}
.page_content .main .sec.reverse .inner .img.big {left: auto;right: calc(50% - 70px);}
.page_content .main .sec.reverse .inner .hbox {left: calc(50% - 90px);}
.page_content .main .sec.reverse .inner .text {left: 0;right: auto;}
.page_content .main .sec.reverse .inner .imgbox {left: auto;right: 0;}

/*============================
#showroom
============================*/
.page_content .main .hlabel {font-size: 17px;letter-spacing: 0.1em;width: 936px;margin: 0 auto 30px auto;}
.page_content .main .showroom {padding: 75px 0 90px 0;background: linear-gradient(to bottom, #F0F0F0 0%, #F8F8F8 100%);}
.page_content .main .showroom .inner {width: 936px;height: 600px;}
.page_content .main .showroom .inner .img.big {width: 605px;height: 437px;left: 0;top: 0;}
.page_content .main .showroom .inner .img.big img {
}
.page_content .main .showroom .inner .imgbox {right: 0;left: auto;width: 280px;}
.page_content .main .showroom .inner .imgbox .img {
}
.page_content .main .showroom .inner .imgbox .img img {
}
.page_content .main .showroom .inner .hbox {right: 0;left: auto;top: -10px;color: #000;width: 280px;}
.page_content .main .showroom .inner .hbox .label {
}
.page_content .main .showroom .inner .hbox h2 {
}
.page_content .main .showroom .inner .hbox .more {color: #fff;}
.page_content .main .showroom .inner .hbox .more .icon_arrow.b {
}
.page_content .main .showroom .inner .text {right: auto;left: 0;color: #707070;width: 330px;bottom: -25px;}
.page_content .main .sec_wrap {
  padding: 75px 0 75px 0;
  background: linear-gradient(to bottom, #F0F0F0 0%, #F8F8F8 100%);
  position: relative;
}
.page_content .main .sec_wrap > .inner {width: 936px;margin: 0 auto;display: flex;justify-content: space-between;}
.page_content .main .sec_wrap .sec {background: no-repeat;width: calc(100% / 2 - 22px);padding-bottom: 0;}
.page_content .main .sec_wrap .sec .inner {height: auto;}
.page_content .main .sec_wrap .sec .inner .img.big {position: relative;width: 100%;left: auto;top: auto;height: auto;}
.page_content .main .sec_wrap .sec .inner .img.big img {
}
.page_content .main .sec_wrap .sec .inner .hbox {position: relative;top: auto;left: auto;color: #202020;!i;!;margin-top: 30px;}
.page_content .main .sec_wrap .sec .inner .hbox .label {font-size: 28px;}
.page_content .main .sec_wrap .sec .inner .hbox h2 {font-size: 16px;margin-top: 18px;}
.page_content .main .sec_wrap .sec .inner .hbox .more {color: #fff;}
.page_content .main .sec_wrap .sec .inner .hbox:hover {
	color: #ACA26F;
}
.page_content .main .sec_wrap .sec .inner .hbox:hover .more {color: #282828;}
.page_content .main .sec_wrap .sec .inner .hbox .more .icon_arrow.b {
}
.page_content .main .sec_wrap .sec .inner .text {position: relative;width: 100%;color: #707070;margin-top: 34px;right: auto;bottom: auto;}





/**************************************************************/
/**************************************************************/
/** SP ********************************************************/
/**************************************************************/
/**************************************************************/

@media screen and (max-width: 767px) {

	.page_content .main .bg_video {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		width: 100dvw;
		height: 100vh;
		height: 100dvh;
		background: #000;
	}
	.page_content .main .bg_video video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.page_content .main .bg_visual {
	height: 100%;
	}
	.page_content .main .bg_visual img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: 89% 100%;
	}

	.page_content .main .visual {position: relative;height: calc(100dvh - 66px + 340px);}
	.page_content .main .visual .inner {
  height: 100%;
}
	.page_content .main .visual .inner h1 {margin: 0;width: 194px;opacity: 0;transition: 2s ease all 1s;transform: translate(-50%, -50%) scale(1.1);margin-top: -135px;top: 50%;}
	.page_content .main .visual.active .inner h1 {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	.page_content .main .intro {position: absolute;z-index: 100;padding-bottom: 30px;}
	.page_content .main .intro .inner {width: 94%;margin:  0 auto;}
	.page_content .main .intro .inner .lead {color: #fff;font-size: 16px;line-height: 2em;letter-spacing: 0.1em;text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 10px #000, 0 0 6px #000, 0 0 6px #000, 0 0 10px #000;}
	.page_content .main .intro .inner .btbox {display: flex;flex-direction: column;margin-top: 30px;align-items: start;gap: 7px;}
	.page_content .main .intro .inner .btbox a {color: #ACA26F;font-size: 17px;padding: 10px 15px 10px 0;letter-spacing: 0.1em;position: relative;}
	.page_content .main .intro .inner .btbox a:hover {
		color: #fff;
	}
	.page_content .main .intro .inner .btbox a:hover .icon_arrow {
		background-image: url(../images_new/icon_arrow_w.png);
	}

	/*============================
	#residence
	============================*/
	.page_content .main .sec {
		background: linear-gradient(to bottom, #202020 0%, #101010 100%);
		position: relative;
		z-index: 100;
		padding-bottom: 46px;
	}
	.page_content .main .sec .inner {max-width: 1160px;position: relative;margin: 0 auto;height: auto;}
	.page_content .main .sec .inner .img.big {position: relative;left: auto;width: auto;height: auto;}
	.page_content .main .sec .inner .img.big img {max-width: none;height: 100%;width: 100%;object-fit: cover;}
	.page_content .main .sec .inner .imgbox {display: flex;flex-direction: column;gap: 20px;position: absolute;left: 0;bottom: -20px;width: 310px;}
	.page_content .main .sec .inner .imgbox.active {
		top: 0;
		bottom: auto;
	}
	.page_content .main .sec .inner .imgbox .img {}
	.page_content .main .sec .inner .imgbox .img img {
	}
	.page_content .main .sec .inner .hbox {position: relative;color: #fff;left: auto;top: auto;display: block;transition: all ease 0.3s;margin: 50px 3% 0 3%;}
	.page_content .main .sec .inner .hbox::after {
		content: "";
		display: block;
		width: 46px;
		height: 46px;
		border-top: 2px solid #505050;
		border-right: 2px solid #505050;
		transform: scale(0.9, 1) rotate(45deg);
		top: 22px;
		position: absolute;
		right: 29px;
	}
	.page_content .main .sec .inner .hbox::after {
		border-color: #D0D0D0
	}
	.page_content .main .sec .inner .hbox .label {font-size: 30px;letter-spacing: 0.15em;line-height: 1.45em;}
	.page_content .main .sec .inner .hbox h2 {font-size: 17px;letter-spacing: 0.1em;margin-top: 22px;}
	.page_content .main .sec .inner .hbox .more {background: #505050;width: 90px;height: 36px;display: flex;justify-content: center;align-items: center;position: relative;border-radius: 30px;margin-top: 34px;!i;!;font-size: 12px;transition: all ease 0.3s;display: none;}
	.page_content .main .sec .inner .hbox .more .icon_arrow {position: relative;top: auto;right: auto;transform: none;margin-left: 5px;}
	.page_content .main .sec .inner .text {position: relative;right: auto;bottom: auto;color: #C0C0C0;font-size: 15px;width: auto;line-height: 1.7em;margin: 30px 3% 0 3%;}
	.page_content .main .sec.designer {
		/* background: linear-gradient(to bottom, #202020 0%, #101010 100%); */
	}
	.page_content .main .sec.designer .inner .text {width: auto;}
	.page_content .main .sec .inner .hbox:hover {
		opacity: 1;
		color: #ACA26F;
	}
	.page_content .main .sec .inner .hbox:hover .more {
		background: #ACA26F;
		color: #000;
	}
	.page_content .main .sec.reverse .inner .img.big {left: auto;right: auto;}
	.page_content .main .sec.reverse .inner .hbox {left: auto;}
	.page_content .main .sec.reverse .inner .text {left: 0;right: auto;}
	.page_content .main .sec.reverse .inner .imgbox {left: auto;right: 0;}

	/*============================
	#showroom
	============================*/
	.page_content .main .hlabel {font-size: 17px;letter-spacing: 0.1em;width: 94%;margin: 0 auto 30px auto;}
	.page_content .main .showroom {padding: 35px 0 55px 0;background: linear-gradient(to bottom, #F0F0F0 0%, #F8F8F8 100%);}
	.page_content .main .showroom .inner {width: 94%;height: auto;}
	.page_content .main .showroom .inner .img.big {width: auto;height: auto;left: 0;top: 0;}
	.page_content .main .showroom .inner .img.big img {
	}
	.page_content .main .showroom .inner .imgbox {width: 280px;top: auto;bottom: auto;position: relative;width: 100%;flex-direction: row;margin-top: 16px;gap: 0;justify-content: space-between;}
	.page_content .main .showroom .inner .imgbox .img {
	width: 48%;
	}
	.page_content .main .showroom .inner .imgbox .img img {
	height: 30vw;
	object-fit: cover;
	}
	.page_content .main .showroom .inner .hbox {right: auto;left: auto;top: auto;color: #000;width: auto;margin: 40px 0 0 0;}
	.page_content .main .showroom .inner .hbox .label {
	}
	.page_content .main .showroom .inner .hbox h2 {
	}
	.page_content .main .showroom .inner .hbox .more {color: #fff;}
	.page_content .main .showroom .inner .hbox .more .icon_arrow.b {
	}
	.page_content .main .showroom .inner .text {right: auto;left: auto;color: #707070;width: auto;bottom: auto;margin: 30px 0 0 0;}
	.page_content .main .sec_wrap {
	  padding: 35px 0 55px 0;
	  background: linear-gradient(to bottom, #F0F0F0 0%, #F8F8F8 100%);
	  position: relative;
	}
	.page_content .main .sec_wrap > .inner {width: 94%;margin: 0 auto;display: block;justify-content: space-between;}
	.page_content .main .sec_wrap .sec {background: no-repeat;width: auto;padding-bottom: 0;}
	.page_content .main .sec_wrap .sec + .sec {
	margin-top: 50px;
	}
	.page_content .main .sec_wrap .sec .inner {height: auto;}
	.page_content .main .sec_wrap .sec .inner .img.big {position: relative;width: 100%;left: auto;top: auto;height: auto;}
	.page_content .main .sec_wrap .sec .inner .img.big img {
	}
	.page_content .main .sec_wrap .sec .inner .hbox {position: relative;top: auto;left: auto;color: #202020;!i;!;margin: 40px 0 0 0;}
	.page_content .main .sec_wrap .sec .inner .hbox .label {font-size: 28px;}
	.page_content .main .sec_wrap .sec .inner .hbox h2 {font-size: 16px;margin-top: 18px;}
	.page_content .main .sec_wrap .sec .inner .hbox .more {color: #fff;}
	.page_content .main .sec_wrap .sec .inner .hbox:hover {
		color: #ACA26F;
	}
	.page_content .main .sec_wrap .sec .inner .hbox:hover .more {color: #282828;}
	.page_content .main .sec_wrap .sec .inner .hbox .more .icon_arrow.b {
	}
	.page_content .main .sec_wrap .sec .inner .text {position: relative;width: 100%;color: #707070;margin-top: 34px;right: auto;margin: 30px 0 0 0;bottom: auto;}




}