@charset "UTF-8";

.bottomCaption{color: #333}

/* Design*/
.boxFlex {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

.boxPicture {
	max-width: 1258px;
    margin: 0 auto;
    width: calc(100% - 40px);
	position: relative;
}

.boxPicture .txt {
	color: #a98d6a;
	background: rgba(255, 255, 255, .2);
	padding: 20px;
	border: 1px solid #a98d6a;
	display: inline-block;
}

.boxPicture .txt h4 {
	font-size: min(1.5vw, 20px);
	line-height: 1.7;
	border-bottom: 1px solid #a98d6a;
	padding-bottom: 6px;
	margin-bottom: 10px;
}

.boxPicture .txt p {
	font-size: min(1vw, 14px);
	line-height: 1.8;
}

.boxContent {
	padding: 30px 50px;
	margin-bottom: 60px;
}

.boxContent .caption {
	font-size: 12px;
	line-height: 1.5;
	margin-top: 5px;
	color: #000000;
}

.boxContent .heading .txt {
	flex: 1;
	padding-right: 30px;
	padding-top: 20px;
}

.boxContent .heading .txt p {
	line-height: 1.7;
	margin-top: 16px;
}

.boxContent .list02 figure {
	width: 18.73%;
}

.boxInfo {
	background: #cec4b7;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.boxInfo .mTitle-en {
	color: #333333;
}

.boxInfo .txt {
	flex: 1;
	padding: 0 45px;
}

.boxInfo .txt .mDesc {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;	
	margin-top: 10px;
	margin-bottom: 10px;
}
.boxInfo .txt .mDesc p:not(:last-of-type){
	margin-right: 20px;
}
.fs-26 {
	font-size: 26px;
	line-height: 1.4;
}

.boxInfo .txt > p {
	font-size: 14px;
	line-height: 1.9;
}

@media screen and (min-width: 768px) {
	.boxPicture .txt {
		position: absolute;
	}

	.boxContent .heading {
		margin-bottom: 20px;
	}

	.boxInfo figure {
		width: 20.7%;
	}

	.boxInfo .txt > p {
		font-size: min(1vw, 14px);
		line-height: 1.9;
	}
	
	.boxPicture .caption{
		position: absolute;
		right: 0;
		color: #333333;
	}
}

@media screen and (max-width: 768px) {
	.boxPicture {
		margin-bottom: 30px;
	}

	.boxPicture .photo {
		margin: 20px 0 0 0;
	}
	.boxPicture .caption{
		text-align: right;
		padding-top: 5px;
	}
	
	.boxPicture .txt {
		padding: 15px 20px 20px;
		margin-top: 20px;
	}

	.boxPicture .txt h4 {
		font-size: 16px;
	}

	.boxPicture .txt p {
		font-size: 12px;
	}

	.boxContent .heading .txt {
		flex: auto;
		padding: 0;
		margin-bottom: 20px;
	}
	.boxContent .heading .txt p{
		margin-top: 10px;
	}
	.boxContent {
		padding: 20px;
		margin-bottom: 30px;
	}

	.boxContent .caption {
		font-size: 10px;
	}

	.boxContent .list02 figure {
		width: 48.7%;
		margin-bottom: 10px;
	}

	.boxInfo figure {
		width: 100%;
	}
	
	.boxInfo .txt {
		flex: auto;
		padding: 20px;
	}

	.boxInfo .txt .mDesc p:not(:last-of-type){
		margin-right: 14px;
	}

	.fs-26 {
		font-size: 20px;
	}
}

/* Facade */
.facade{padding: 120px 0 130px; background: #f1f1f1;}

.facade .boxContent {
	background: #ffffff;
}

.facade .boxContent .list01 {
	width: 56%;
}

.facade  .boxContent .list01 figure {
	width: 48.6%;
}

@media screen and (min-width: 768px) {
	.facade .boxPicture {
		margin-top: 170px;
		margin-bottom: 230px;
	}
	
	.facade .boxPicture .caption {		
		bottom: 6.33%;		
	}

	.facade .boxPicture .txt01 {
		left: -7.45%;
		bottom: 81%;
	}

	.facade .boxPicture .txt02 {
		right: 38%;
		top: 100%;
	}

	.facade .boxPicture .txt03 {
		right: -3.98%;
		top: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
	.facade .boxPicture .txt01 {
		left: 0;
	}

	.facade .boxPicture .txt03 {
		right: 0;
	}
}

@media screen and (max-width: 768px) {
	.facade{padding: 60px 0 70px;}

	.facade .boxContent .list01 {
		width: 100%;
	}

	.facade .boxContent .list01 figure {
		width: 48.7%;
		margin-bottom: 10px;
	}

	.facade img {
		width: 100%;
	}
	
}

/* Landscape */
.landscape {
	padding: 120px 0 130px;
}

.landscape .boxContent {
	background: #f1f1f1;
}

.landscape .boxContent .list01 {
	width: 59.5%;
}

.landscape .boxContent .list01 figure {
	width: 31.5%;
}

@media screen and (min-width: 768px) {

	.landscape .boxPicture {
		margin-top: 140px;
		margin-bottom: 260px;
	}

	.landscape .boxPicture .caption {
		right: 11%;
		bottom: 0;
	}

	.landscape .boxPicture .txt01 {
		right: 65%;
		bottom: 81.3%;
	}

	.landscape .boxPicture .txt02 {
		right: 37%;
        top: 93%;
	}

	.landscape .boxPicture .txt03 {
		right: -4%;
		bottom: 75%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1366px) {
	.landscape .boxPicture .txt03 {
		right: 0;
	}
}

@media screen and (max-width: 768px) {
	.landscape {
		padding: 60px 0 70px;
	}

	.landscape .boxContent .list01 {
		width: 100%;
	}

	.landscape .boxContent .list01 figure {
		width: 48.7%;
		margin-bottom: 10px;
	}

	.landscape img {
		width: 100%;
	}
	.landscape .boxPicture figure{
		margin: 0 -20px;
	}
	.landscape .boxPicture .caption{
		padding: 0 20px 0 0;
	}
}