@charset "utf-8";

/* mainimage */
#mainvisual{position: relative;overflow: hidden;width: 100%;}
#mainvisual h2{position: absolute;z-index: 2;display: flex;width: 44.115%;bottom: -10px;left: 5%;}
.mainimage{width: 100%;}
/* 共通 */
.contents_imgbg{background: url("../../common/img/layer_bk.webp") center 20%/100%;}
.inner{max-width: 1000px;margin: 0 auto;width: 90%;}
.contents_item{margin-top: 100px;}
.contents_tit{text-align: center;font-size: 32px;color: #5c6e72;letter-spacing: 0.1em;font-weight: 500;}
.contents_tit + p{text-align: center;letter-spacing: 0.05em;line-height: 1.8;font-size: 18px;margin-top: 2em;}
.item{margin-top: 80px;}
.item_tit{font-size: 32px;color: #fff;letter-spacing: 0.1em;font-weight: 500;padding: 0.1em 0.5em;background: linear-gradient(to right,#5e6d57,transparent);}
.item_tit small{font-size: 0.6em;margin-left: 1em;}
.element_tit{font-size: 24px;color: #5e6d57;margin-top: 0.8em;}
.element_tit + p{font-size: 16px;margin-top: 0.7em;line-height: 1.6;text-align: justify;}
.note{font-size: 10px;margin-top: 1.5em;}
.cap{font-size: 12px;margin-top: 0.5em;}
.cap_b{text-shadow: 0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff,0 0 0.1em #fff;}

@media screen and (max-width: 767px){
/* mainimage */
.mainvisual h2{width: 65.10416666666667%;position: absolute;bottom: 0px;left: -10px;}
.mainimage{width: 100%;}
/* 共通 */
.contents_item{margin-top: 60px;}
.contents_tit{font-size: 1.3em;}
.contents_tit + p{font-size: 15px;margin-top: 1.5em;}
.item{margin-top: 30px;}
.item_tit{font-size: 22px;}
.element_tit{font-size: 17px;}
.element_tit + p{font-size: 14px;line-height: 1.6;}
.note{font-size: 9px;}
.simplebar-track.simplebar-horizontal{height: 8px!important;background: #B5B5B5;border-radius: 5px;max-width: 700px;margin: 0 auto;}
.simplebar-scrollbar{height: 8px;background: #41485B;border-radius: 5px;top: 0;}
}

#contents{padding: 100px 0;}
.appearance_img{max-width: 1000px;margin-inline: auto;margin-bottom: 40px;}
.architect{padding: 30px;margin-top: 50px;background: #fff;border: 2px solid #5e6d57;display: flex;justify-content: space-between;align-items: center;}
.architect > dt{width: 28%;}
.architect > dt .architect_tit{font-size: 32px;color: #5e6d57;letter-spacing: 0.15em;text-align: center;}
.architect > dd{width: 70%;}
.architect > dd .architect_tit{font-size: 20px;color: #5e6d57;letter-spacing: 0.15em;}
.architect > dd .architect_tit + p{font-size: 16px;margin-top: 0.7em;line-height: 1.6;}
.architect > dd .architect_tit + p big{font-size: 1em;line-height: 1.3;}
.balcony_img{margin-top: 100px;}
.balcony_img img{width: 100%;}
.landplan_map{max-width: 800px;margin: 30px auto 0;}
.landplan_map figcaption{margin-top: 0.3em;}
.landplan_list{display: flex;flex-wrap: wrap;gap: 0 1.25%;}
.landplan_list > li{width: 19%;margin-top: 30px;}
.landplan_list > li h6{font-size: 1em;padding-left: 1.6em;position: relative;}
.landplan_list > li h6 span{display: inline-flex;justify-content: center;align-items: center;width: 1.3em;height: 1.3em;color: #fff;background: #5e6d57;line-height: 1;position: absolute;left: 0;top: 0.1em;}
.landplan_list > li h6 + p{font-size: 13px;margin-top: 0.7em;line-height: 1.6;letter-spacing: 0.13em;}
.planting_list{display: flex;flex-wrap: wrap;gap: 20px 2%;margin-top: 30px;}
.planting_list > *{width: 32%;}


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

@media screen and (max-width: 767px){
#mainvisual h2{width: 49.68%;bottom: 0;}
#contents{padding: 50px 0;}
.appearance_img{margin-bottom: 20px;}
.architect{padding: 15px;margin-top: 30px;border: 2px solid #5e6d57;position: relative;flex-direction: column;}
.architect > dl{width: 100%;display: unset;justify-content: space-between;flex-wrap: wrap;}
.architect > dt{width: 100%;}
.architect > dd{width: 100%;margin-top:20px;}
.architect > dt > div{width: 100%;}
.architect > dt .architect_tit{font-size: 22px;}
.architect > dd .architect_tit{font-size: 15px;}
.architect > dd .architect_tit + p{font-size: 14px;}
.architect > dd .architect_tit + p big{font-size: 1.5em;line-height: 1.3;}
.architect > dd .element_tit{width: 100%;}
.balcony_img{margin-top: 50px;}
.landplan_map{margin: 20px auto 0;padding-bottom: 10px;}
.landplan_map img{/* width: 600px;max-width: none; */}
.landplan_map figcaption{text-align: left!important;}
.landplan_list{gap: 0 2%;justify-content: space-between;}
.landplan_list > li{width: 48%;margin-top: 20px;}
.landplan_list > li h6{font-size: 0.9em;}
.landplan_list > li h6 + p{font-size: 0.8em;letter-spacing: 0.08em;}
.planting_list{gap: 15px 2%;margin-top: 0.7em;}
.planting_list > *{width: 49%;}
}