@charset "UTF-8";

/*----------------------------------------
design
----------------------------------------*/

.design_bg{
background-image: url(../images/design_bg.jpg);
background-size: cover;
background-position: center center;
}

.design_title{
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}


.design_title_text{
position: relative;
left: -60px;
display: none;
}

.design_title_text h2{
font-size: clamp(20px, -2.500px + 2.93vw, 35px);
font-weight: 600;
font-style: normal;
text-align: left;
letter-spacing: 3px !important;
writing-mode: vertical-rl;
padding: 40px 30px;
}

.design_title_img{
width: 95%;
}

.designer_box{
width: 85%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
padding: 20px;
background-color: rgba(116, 116, 116, 0.1);
border: 1px solid #ccc;
}

.designer_img{
width: 15%;
}

.designer_text{
width: 82%;
}


.designer_text h3{
font-size: 2.5rem;
font-family: "greycliff-cf", sans-serif !important;
font-weight: 600 !important;
font-style: normal !important;
letter-spacing: 0;
}

.parking_box{
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
background-image: url(../images/design_bg2.png);
background-size: 70%;
background-position: left top;
background-repeat: no-repeat;
}

.parking_img{
width: 55%;
}

.parking_text{
width: 30%;
margin-right: 5%;
padding: 40px 0;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
.parking_text{
width: 90%;
margin: 0 5% 40px 5%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.parking_text p{
width: 65% !important;
}

.parking_img{
width: 94%;
}

}

.parking_text h2{
font-size: 30px;
font-weight: 600;
font-style: normal;
text-align: left !important;
width: 100%;
letter-spacing: 3px !important;
}


.peaceful_box{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
background-image: url(../images/design_bg3.png);
background-size: 70%;
background-position: left top;
background-repeat: no-repeat;
}

.peaceful_img{
width: 55%;
}

.peaceful_text{
width: 30%;
margin-left: 5%;
}

.peaceful_text h2{
font-size: 30px;
font-weight: 600;
font-style: normal;
text-align: left !important;
width: 100%;
letter-spacing: 3px !important;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {

.peaceful_box{
flex-wrap: wrap-reverse;
}

.peaceful_text{
width: 90%;
margin: 40px 5% 40px 5%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.peaceful_text p{
width: 65% !important;
}

.peaceful_img{
width: 94%;
}

}

.detals_box{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: linear-gradient(90deg,rgba(227, 171, 178, 0.2) 0%, rgba(221, 204, 178, 0.2) 30%, rgba(205, 220, 155, 0.2) 60%, rgba(160, 213, 210, 0.2) 100%);
padding: 80px 0;
}

.detals_title{
width: 100%;
font-family: "greycliff-cf", sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
font-size: 4rem !important;
line-height: 1 !important;
letter-spacing: 2px !important;
margin: 0 0 40px 0;
text-align: center;
}

.detals_title2{
width: 100%;
font-weight: 600 !important;
font-style: normal !important;
font-size: 3rem !important;
line-height: 1 !important;
letter-spacing: 2px !important;
margin: 0 0 40px 0;
text-align: center;
}

.illust_01,
.illust_02{
width: 100%;
display: flex;
justify-content: flex-end;
}


.illust_01 div,
.illust_02 div{
width: 50%;
margin-top: 20px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
.illust_01,
.illust_02{
width: 30%;
}

.illust_02{
margin-top: 20px;
}

.illust_01 div,
.illust_02 div{
width: 100%;
}
}

/*-- sp--*/

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

.design_title{
justify-content: center;
flex-wrap: wrap;
}

.design_title_text{
position: static;
left: 0;
display: block;
}

.design_title_text h2{
font-size: 20px;
font-style: normal;
letter-spacing: 0px !important;
writing-mode: horizontal-tb;
padding: 30px 0 0 0;
text-align: center;
}

.design_title_img{
width: 100%;
}


.designer_box{
width: 100%;
padding: 20px 10px;
}

.designer_img{
width: 20%;
}

.designer_text{
width: 75%;
}

.parking_box{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap-reverse;
background-size: 100%;
}

.parking_img{
width: 100%;
}

.parking_text{
width: 90%;
margin: 30px 5%;
padding: 0;
}

.parking_text h2{
text-align: center !important;
}

.peaceful_box{
justify-content: center;
background-size: 100%;
}

.peaceful_img{
width: 100%;
}

.peaceful_text{
width: 90%;
margin: 30px 5%;
}

.peaceful_text h2{
text-align: center !important;
}

.parking_text h2,
.peaceful_text h2{
font-size: 20px;
}

.detals_box{
width: 100%;
padding: 40px 0;
}

.detals_title{
font-size: 3rem !important;
}

.detals_title2{
font-size: 2.5rem !important;
}


.illust_01 div,
.illust_02 div{
width: 70%;
margin-top: 20px;
}


}