@charset "UTF-8";
/* CSS Document */

#design {
	text-align: center;
}

#design dt {
	border-bottom: solid 1px #000;
}

#design .caution {
	text-align: left;
	line-height: 1.6;
}

#design .contentWrapperLife {
	margin: 8rem auto 0;
}

#design .designImgArea {
	margin: 8rem auto 0;
}

#design .facadeArea {
	padding: 6rem 0 0;
}

#design .facadeArea div.half:last-child {
	padding: 6rem;
	box-sizing: border-box;
}

#design .facadeArea div.half:last-child p img {
	margin: 2.1rem auto;
}

#design .facadeArea p.read02 {
	text-align: left;
}

#design p.designImg {
	width: 100%;
	max-width: 960px;
	margin: 3rem auto;
}

#design .lamdplanArea {
	text-align: left;
	line-height: 1.4;
}

#design span.number {
	color: #fff;
	background: #3F90B4;
	font-weight: bold;
	padding: 0.1rem 0.85rem;
	margin: 0 1.2rem 1.2rem 0;
}

#design span.br,
#design div.other dl dt span.br {
	display: block;
	margin-left: 3.6rem;
}

#design div.clavis {
	display: flex;
	display:-webkit-flex;
	display: -ms-flexbox;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}

#design div.clavis dl dt {
	position: relative;
}

#design div.clavis dl dt p.clavisLogo {
	position: absolute;
	top: 0;
	right: 0;
}

#design div.clavis dl dt p.clavisLogo img {
	max-width: 94px;
}

#design div.clavis dl dd {
	position: relative;
	margin-left: 11rem;
}

#design div.clavis dl dd p.key {
	position: absolute;
	left: -11rem;
}

#design div.clavis dl dd p.key img {
	max-width: 110px;
}

#design div.clavis dl dd span.bottom {
	display: block;
	font-size: 1.4rem;
	line-height: 1.8;
	margin: 1rem auto;
	border-bottom: solid 1px #000;
}

#design div.clavis p.clavisImg {
	width: 50%;
	padding: 2.1rem;
	box-sizing: border-box;
}

#design div.clavis p.clavisImg img {
	max-width: 914px;
	margin: 0 auto;
}

#design div.other {
	width: 100%;
	display: flex;
	display:-webkit-flex;
	display: -ms-flexbox;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}

#design div.other dl {
	margin-top: 2.1rem;
	padding: 0 1rem;
	box-sizing: border-box;
}

#design div.other dl dd{
	margin-top: 0.5rem;
}

#design div.other dl p {
	margin-top: 0.3rem;
}

#design .plantingArea {
	margin-top: 4.5rem;
	padding: 4.5rem 8rem;
	box-sizing: border-box;
}

#design .plantingArea h3 {
	line-height: 2;
	border-bottom: solid 1px #5DC2D0;
}

#design .plantingArea p {
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.6;
	padding: 1.5rem 3rem;
}

#design .plantingArea dl dt {
	border: none;
}

#design .plantingArea dl dd {
	text-align: right;
}

/* 竣工写真ギャラリー */
.galleryWrapper {
	margin: -10rem auto 10rem;
}

.galleryTitle {
	color: #133B3A;
	font-size: 2.4rem;
	line-height: 3;
	letter-spacing: 0.08em;
}

.galleryPhoto {
	display: flex;
}

.galleryPhoto div {
	display: flex;
	flex-direction: column;
}

.galleryPhoto div:nth-child(1) {
	width: 28.477306%;
}

.galleryPhoto div:nth-child(2) {
	width: 39.38506589%;
	margin: 0 1.9033675%;
}

.galleryPhoto div:nth-child(3) {
	width: 28.477306%;
}

.galleryPhoto div img:first-child {
	margin-bottom: 2.93453725%;
}

.galleryPhoto div img:nth-child(2) {
	margin-top: auto;
}




/* ipad */
@media all and (max-width: 768px) {	
#design .facadeArea div.half:first-child {
	order: 1;
}
#design .facadeArea div.half:last-child {
	order: 0;
}

#design .facadeArea div.half:last-child {
	padding: 0 2.1rem;
}

#design p.designImg {
	margin: 0 auto;
}

#design div.clavis p.clavisImg {
	width: 100%;
	padding: 2.1rem;
	margin: 3% auto;
}

#design div.other dl dt span.br {
	display: inline;
	margin-left: 0;
}

#design .plantingArea {
	padding: 4.5rem 3rem;
}

/* 竣工写真ギャラリー */
.galleryWrapper {
	margin: 0 auto 10rem;
}



}


/* sp */
@media all and (max-width: 414px) {
#underLayer .contentWrapper {
	margin: 6rem auto 0;
}

#design .facadeArea div.half:last-child {
	padding: 0 10px;
}

#design div.clavis p.clavisImg {
	margin: 0 auto;
}

#design div.clavis dl dt p.clavisLogo {
	display: none;
}

#design div.clavis dl dt p.clavisLogo img {
	display: none;
}


#design .plantingArea {
	padding: 3rem 1rem;
}

#design .plantingArea p {
	font-size: 1.3rem;
	line-height: 1.5;
	padding: 1.5rem;
}

#design .plantingArea .col3 {
	width: 50%;
	padding: 0.25rem;
}

/* 竣工写真ギャラリー */
.galleryPhoto {
	display: block;
}

.galleryPhoto div:nth-child(1) {
	width: 100%;
	margin: 0 auto;
}

.galleryPhoto div:nth-child(2) {
	width: 100%;
	margin: 0 auto;
}

.galleryPhoto div:nth-child(3) {
	width: 100%;
	margin: 0 auto;
}

.galleryPhoto div img:first-child {
	margin: 2% auto;
}

.galleryPhoto div img:nth-child(2) {
	margin: 2% auto;
}


}