@charset "UTF-8";

.design-page {
	color: #fff;
	font-family: 'EB Garamond', 'Shippori Mincho', serif;
	font-feature-settings: 'palt';
	background: #000 !important;
	cursor: default;
}

.design-page *::selection {
	color: #000;
	background-color: rgba(255,255,255,.5);
}

.design-page img {
	width: 100%;
}

.u-section {
	position: relative;
}

.u-title-hi {
	line-height: 1;
}

.u-title-hi__en {
	color: rgba(42,133,173,.6);
	font-size: 5vw;
	display: block;
	opacity: 0;
	transform: translate(-30px,0);
	transition: 1s cubic-bezier(.8,0,.4,1);
}

.stateScroll .u-title-hi__en {
	opacity: 1;
	transform: translate(0,0);
}

.u-title-hi__jp {
	font-size: 1.65vw;
	font-weight: 400;
	letter-spacing: .05em;
	margin: .5em 0 0;
	display: block;
	opacity: 0;
	transform: translate(-30px,0);
	transition: .75s .55s cubic-bezier(.8,0,.4,1);
}

.stateScroll .u-title-hi__jp {
	opacity: 1;
	transform: translate(0,0);
}

.u-text {
	color: #d4d4d4;
	font-size: 1vw; 
	font-weight: 400;
	line-height: 4.25;
	letter-spacing: 0;
}

/*mv*/
.l-mv-title {
/*
	width: 80%;
	margin: 0 0 13%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	overflow: hidden;
	transition: 3s cubic-bezier(.8,0,.4,1);
	opacity: 0;
*/
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;
	transition: 3s cubic-bezier(.8,0,.4,1);
	opacity: 0;
}

.stateScroll .l-mv-title {
	opacity: 1;
}

.l-mv-title:after {
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0,101%);
	transition: .5s .75s cubic-bezier(.8,0,.4,1);
	display: none;
}

.stateScroll .l-mv-title:after {
	transform: translate(0,0);
}

.l-mv-title__text {
/*
	color: #fff;
	font-size: 2.25vw;
	font-weight: 400;
	letter-spacing: .6em;
	white-space: nowrap;
	padding: .15em 1.2em .25em 1.7em;
	display: block;
	position: relative;
	z-index: 10;
	opacity: 0;
	transition: 1s 1.25s cubic-bezier(.8,0,.4,1);
*/
	width: 90%;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	opacity: 0;
	transform: translate(-50%,0);
	transition: 1s 1.25s cubic-bezier(.8,0,.4,1);
}

.l-mv-title__text:nth-child(2) {
	top: auto;
	bottom: 0;
}

.stateScroll .l-mv-title__text {
	opacity: 1
}

.l-mv-image {
	opacity: 0;
	filter: brightness(400%);
	transition: 3s cubic-bezier(.8,0,.4,1);
}

.stateScroll .l-mv-image {
	opacity: 1;
	filter: brightness(100%);
}

/*outset*/
.l-outset-read {
	text-align: center;
	width: 100%;
	margin: 1em 0 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	opacity: 0;
	transition: .75s 1s cubic-bezier(.8,0,.4,1);
}

.stateScroll .l-outset-read {
	margin: 0;
	opacity: 1;
}

.l-outset-image {
	overflow: hidden;
}

.l-outset-image img {
	opacity: 0;
	transform: translate(0,20px);
	filter: brightness(300%);
	transition: 1s cubic-bezier(.8,0,.4,1);
}

.stateScroll .l-outset-image img {
	opacity: 1;
	transform: translate(0,0);
	filter: brightness(100%);
}

/*architect*/
.l-architect-title {
	margin: 35% 0 0 5.5%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transform: translate(-.5em,0);
}

.stateScroll .l-architect-title {
	opacity: 1;
	transform: translate(0,0);
}

.l-architect-pc-read {
	margin: 1em 0 0 60%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
	z-index: 10;
	opacity: 0;
	transition: .75s 1s cubic-bezier(.8,0,.4,1);
}

.stateScroll .l-architect-pc-read {
	margin: 0 0 0 60%;
	opacity: 1;
}

.l-architect-pc-read + figure {
	opacity: 0;
	transition: 3s;
}

.l-architect-pc-read + figure.stateScroll {
	opacity: 1;
}

.l-architect-pc-items {
	display: flex;
}

.l-architect-pc-item {
	opacity: 0;
	filter: brightness(300%);
	transition: .6s cubic-bezier(.8,0,.4,1);
}

.l-architect-pc-item:nth-child(1) { transition-delay: 0s; }
.l-architect-pc-item:nth-child(2) { transition-delay: .1s; }
.l-architect-pc-item:nth-child(3) { transition-delay: .2s; }
.l-architect-pc-item:nth-child(4) { transition-delay: .3s; }
.l-architect-pc-item:nth-child(5) { transition-delay: .4s; }

.stateScroll .l-architect-pc-item {
	opacity: 1;
	filter: brightness(100%);
	width: 25%;
}

/*interior*/
.l-interior {
	margin: 140px 0 0;
}

.l-interior-title {
	text-align: right;
	margin: 8.25% 5.5% 0 0;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}

.l-interior .u-title-hi__en {
	transform: translate(5%,0);
}

.l-interior .stateScroll .u-title-hi__en {
	transform: translate(0,0);
}

.l-interior .u-title-hi__jp {
	transform: translate(5%,0);
}

.l-interior .stateScroll .u-title-hi__jp {
	transform: translate(0,0);
}

.l-interior-pc-read {
	margin: 34% 0 0 5.5%;
	margin-top: calc(34% + 1em);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
	transition: .6s 1.4s cubic-bezier(.8,0,.4,1);
}

.stateScroll.l-interior-pc-read {
	opacity: 1;
	margin-top: calc(34%);
}

.l-interior-pc-items {
	display: flex;
	flex-wrap: wrap;
}

.l-interior-pc-item {
	width: calc(100% / 4);
	opacity: 0;
	filter: brightness(300%);
	transition: .6s cubic-bezier(.8,0,.4,1);
}

.l-interior-pc-item:nth-child(1) { transition-delay: 0s; }
.l-interior-pc-item:nth-child(2) { transition-delay: .1s; }
.l-interior-pc-item:nth-child(3) { transition-delay: 1.2s; }
.l-interior-pc-item:nth-child(4) { transition-delay: 1.2s; }
.l-interior-pc-item:nth-child(5) { transition-delay: .7s; }
.l-interior-pc-item:nth-child(6) { transition-delay: .6s; }

.stateScroll .l-interior-pc-item {
	opacity: 1;
	filter: brightness(100%);
}

.l-interior-pc-item--photo {
	width: calc(100% / 2);
}

/*achievement*/
.l-achievement {
	margin: 120px 0 10px;
	padding: 0 0 80px;
}

.l-achievement-title {
	margin: 0 0 2% 5.5%;
}

.l-achievement-pc-items {
	display: flex;
	flex-wrap: wrap;
}

.l-achievement-pc-item {
	width: calc(100% / 3);
	padding: 22.25% 0 0;
	position: relative;
	overflow: hidden;
	opacity: 0;
	filter: brightness(300%);
	transition: .6s cubic-bezier(.8,0,.4,1);
}

.l-achievement-pc-item:nth-child(1) { transition-delay: 0s; }
.l-achievement-pc-item:nth-child(2) { transition-delay: .1s; }
.l-achievement-pc-item:nth-child(3) { transition-delay: .2s; }
.l-achievement-pc-item:nth-child(4) { transition-delay: .3s; }
.l-achievement-pc-item:nth-child(5) { transition-delay: .4s; }
.l-achievement-pc-item:nth-child(6) { transition-delay: .4s; }
.l-achievement-pc-item:nth-child(7) { transition-delay: .4s; }
.l-achievement-pc-item:nth-child(8) { transition-delay: .4s; }
.l-achievement-pc-item:nth-child(9) { transition-delay: .4s; }

.stateScroll .l-achievement-pc-item {
	opacity: 1;
	filter: brightness(100%);
}

.l-achievement-pc-item img {
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .4s;
	transform: translate(-50%,-50%) scale(1);
}

.l-achievement-pc-item:hover img {
	transition: .8s;
	transform: translate(-50%,-50%) scale(1.2);
}


@media screen and (max-width: 890px) {
	.l-architect-pc-read {
		margin-left: 55%;
	}
}

@media screen and (max-width: 768px) {
	.u-title-hi__en {
		color: #0e3042;
		font-size: 10.7vw;
	}
	
	.u-title-hi__jp {
		font-size: 3.4vw;
		margin-top: 1em;
	}
	
	.u-text {
		font-size: 3.2vw;
		line-height: 3.2;
		letter-spacing: -.025em;
	}
	
/*mv*/
	.l-mv-title {
/*
		width: 95%;
		margin-bottom: 20%;
		top: calc(50% + 2.3em);
*/
	}
	
	.l-mv-title__text {
/*
		font-size: 4.4vw;
		letter-spacing: .3em;
		padding-top: .4em;
		padding-bottom: .4em;
*/
		width: 100%;
	}
	
/*outset*/
	.l-outset-image {
		padding: 87.5% 0 0;
		overflow: hidden;
		position: relative;
	}
	
	.l-outset-image img {
		width: auto;
		height: 100%;
		margin-top: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.stateScroll .l-outset-image img {
		margin-top: 0;
		transform: translate(-50%,-50%);
	}
	
/*architect*/
	.l-architect-title {
		margin-top: 17%;
		margin-left: 5%;
		transform: none;
	}
	
	.l-architect-sp-read {
		margin-left: 3.85%;
		padding-top: 2em;
		padding-bottom: 2em;
		position: relative;
		top: auto;
		left: auto;
		opacity: 0;
		transition: .75s .25s cubic-bezier(.8,0,.4,1);
		transform: translate(0,10px);
	}
	
	.stateScroll.l-architect-sp-read {
		opacity: 1;
		transform: translate(0,0);
	}
	
	.l-architect .sp-view figure {
		position: relative;
	}
	
	.l-architect .sp-view figure:after {
		content: '';
		display: block;
		clear: both;
	}
	
	.l-architect .sp-view figure img {
		width: 50%;
		float: left;
		opacity: 0;
		filter: brightness(300%);
		transition: .6s cubic-bezier(.8,0,.4,1);
	}
	
	.l-architect .sp-view figure.stateScroll img {
		opacity: 1;
		filter: brightness(100%);
	}
	
	.l-architect .sp-view figure img:nth-of-type(1) { transition-delay: 0s; }
	.l-architect .sp-view figure img:nth-of-type(2) { transition-delay: .2s; }
	.l-architect .sp-view figure img:nth-of-type(3) { transition-delay: .4s; }
	.l-architect .sp-view figure img:nth-of-type(4) { transition-delay: .6s; }
	
	.l-architect .sp-view figure:nth-of-type(1) img:nth-of-type(1) {
		width: 100%;
	}
	
	.l-architect .sp-view figure:nth-of-type(2) img:nth-of-type(2) {
		float: right;
	}
	
	.l-architect .sp-view figure:nth-of-type(3) {
	}
	
/*interior*/
	.l-interior {
		margin-top: 15%;
	}
	
	.l-interior-title {
		margin-top: 12%;
	}
	
	.l-interior-title .u-title-hi__jp {
		margin-top: 3.8em;
	}
	
	.l-interior-sp-read {
		margin-top: 0;
		margin-left: 3.85%;
		padding: 8.5% 0 !important;
		position: relative;
		top: auto;
		left: auto;
		opacity: 0;
		transition: .75s .25s cubic-bezier(.8,0,.4,1);
		transform: translate(0,10px);
	}
	
	.stateScroll.l-interior-sp-read {
		opacity: 1;
		transform: translate(0,0);
	}
	
	.l-interior-sp-read:nth-of-type(2) {
		margin-bottom: 5.8%;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.stateScroll.l-interior-sp-read {
		opacity: 1;
	}
	
	.l-interior .sp-view figure:after {
		content: '';
		display: block;
		clear: both;
	}
	
	.l-interior .sp-view figure img {
		width: 50%;
		float: left;
		opacity: 0;
		filter: brightness(300%);
		transition: .6s cubic-bezier(.8,0,.4,1);
	}
	
	.l-interior .sp-view figure.stateScroll img {
		opacity: 1;
		filter: brightness(100%);
	}
	
	.l-interior .sp-view figure img:nth-of-type(1) { transition-delay: 0s; }
	.l-interior .sp-view figure img:nth-of-type(2) { transition-delay: .2s; }
	.l-interior .sp-view figure img:nth-of-type(3) { transition-delay: .4s; }
	
	.l-interior .sp-view figure:nth-of-type(1) img:nth-of-type(1) {
		width: 100%;
	}
	
	.l-interior .sp-view figure:nth-of-type(2) img:nth-of-type(3) {
		width: 100%;
	}
	
/*achievement*/
	.l-achievement {
		margin-top: 18.5%;
	}
	
	.l-achievement-title {
		margin-bottom: 5.5%;
	}
	
	.l-achievement-pc-item {
		width: calc(100% / 2);
		padding-top: 33%;
	}
	
	.l-achievement .u-title-hi__en {
		color: rgba(42,133,173,.6);
	}
	
}

.tempBanner2{
	margin-top: 8rem!important;
}