@charset "UTF-8";

.page-title {
	background: url("../img/design/title.jpg") center no-repeat;
	background-size: cover;
	min-height: 300px;
	text-align: left;
	position: relative;
	margin-bottom: 0;
	margin-top: 105px;
}


@media only screen and (max-width: 768px) {
	.page-title {
		min-height: 200px;
		margin-top: 65px;
		margin-bottom: 0;
	}
}





/* facade
----------------------------------------*/
.facade {
	padding-top: 125px;
}
.facade::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 334px;
	background: #EBE8DD;
	bottom: 0;
	left: 0;
}

.facade .inner {
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
	align-items: flex-start;
}
.facade figure {
	z-index: 1;
}
.facade .txt {
	background: url("../img/design/bg-contents.jpg") no-repeat;
	background-size: cover;
	padding: 100px 110px 100px 127px;
	max-width: 610px;
	margin-left: -160px;
}
.facade .txt h3 {
	font-size: 2.6rem;
	margin-bottom: 30px;
	color: #fff;
	font-weight: normal;
	letter-spacing: 0.1em;
}
.facade .txt p {
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	line-height: 2;
	color: #fff;
}

@media only screen and (max-width: 768px) {
	.facade {
		padding: calc(40 / 375 * 100vw) 0;
	}
	.facade::before {
		height: 150px;
	}

	.facade .inner {
		display: block;
	}
	.facade figure {
		width: 70%;
		margin: 0 auto;
	}
	.facade .txt {
		padding: calc(30 / 375 * 100vw);
		max-width: 100%;
		margin: 0 calc(25 / 375 * 100vw);
	}
	.facade .txt h3 {
		font-size: calc(20 / 375 * 100vw);
		margin-bottom: calc(25 / 375 * 100vw);
	}
	.facade .txt p {
		font-size: calc(13 / 375 * 100vw);
		line-height: 1.8;
	}
	
}
@media only screen and (max-width: 481px) {
	
}


/* entrance
----------------------------------------*/
.entrance {
	background: #6B665C;
	padding: 80px 0 100px;
}
.entrance .inner {
	max-width: 1000px;
	margin: 0 auto;
}
.entrance h3 {
	text-align: center;
	font-size: 2.6rem;
	color: #fff;
	margin-bottom: 80px;
	letter-spacing: 0.1em;
	font-weight: normal;
}
.entrance .flex-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 80px;
}

.entrance .flex-box figure {
	max-width: 665px;
}
.entrance .flex-box .txt {
	width: 100%;
	max-width: 275px;
}

.entrance h4 {
	font-family: 'EB Garamond', serif;
	font-size: 4rem;
	color: #B8AE7F;
	margin-bottom: 60px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	font-weight: normal;
}
.entrance h4::before {
	content: "";
	position: absolute;
	background: #B8AE7F;
	width: 100%;
	height: 1px;
	bottom: -30px;
}
.entrance h4 + p {
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	line-height: 2;
	color: #fff;
}

.entrance .flex-box + figure {
	margin-bottom: 30px;
}

.entrance h4.ttl-h4 {
	margin-bottom: 10px;
}
.entrance h4.ttl-h4 span {
	padding-right: 20px;
	background: #6B665C;
}

.entrance h4.ttl-h4::before {
	content: "";
	position: absolute;
	background: #B8AE7F;
	width: 100%;
	height: 1px;
	bottom: inherit;
	top: 50%;
	transform: translateY(-50%);
}

@media only screen and (max-width: 768px) {
	.entrance {
		background: #6B665C;
		padding: calc(40 / 375 * 100vw) calc(25 / 375 * 100vw) calc(60 / 375 * 100vw);
	}
	.entrance h3 {
		font-size: calc(20 / 375 * 100vw);
		margin-bottom: calc(30 / 375 * 100vw);
	}
	.entrance .flex-box {
		display: block;
		margin-bottom: calc(30 / 375 * 100vw);
	}

	.entrance .flex-box figure {
		max-width: 100%;
	}
	.entrance .flex-box .txt {
		max-width: inherit;
	}

	.entrance h4 {
		font-size: calc(25 / 375 * 100vw);
		margin-bottom: calc(30 / 375 * 100vw);
	}
	.entrance h4::before {
		bottom: calc(-15 / 375 * 100vw);
	}
	.entrance h4 + p {
		font-size: calc(13 / 375 * 100vw);
		line-height: 1.8;
	}

	.entrance figure {
		margin-bottom: calc(20 / 375 * 100vw);
	}

	.entrance h4.ttl-h4 {
		margin-bottom: calc(10 / 375 * 100vw);
	}
	.entrance h4.ttl-h4 span {
		padding-right: calc(15 / 375 * 100vw);
	}

}
@media only screen and (max-width: 481px) {
	
}




.js-fadein {
	opacity: 0; 
	visibility: hidden;
	transform: translateY(40px);
	transition: all 1s;
}
.js-fadein.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}

.js-fadein.fadein-right {
	opacity: 0; 
	visibility: hidden;
	transform: translateX(40px);
	transition: all 1s;
}
.js-fadein.fadein-right.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateX(0px);
}

.js-fadein.fadein-left {
	opacity: 0; 
	visibility: hidden;
	transform: translateX(-40px);
	transition: all 1s;
}
.js-fadein.fadein-left.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateX(0px);
}