@charset "UTF-8";

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

.page_title_design{
background-image: url(../images/design_bg01.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

.design_box{
width: 100%;
}


.design_title{
width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0 0 80px 0;
overflow: hidden;
}

.design_inner{
width: 100%;
max-width: 1024px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.design_title_inner{
width: 100%;
max-width: 1024px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.design_max_w{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
max-width: 500px;
width: 100%;
}

.design_max_left{
flex: 1;
margin-left: calc(50% - 50vw);
}

.design_max_right{
flex: 1;
margin-right: calc(50% - 50vw);
}

.landplan{
width: 48%;
display: flex;
margin: 0 0 10px 0;
background: linear-gradient(120deg,rgba(77, 77, 77, 1) 0%, rgba(153, 153, 153, 1) 100%);
color: #fff;
line-height: 1;
}

.landplan p{
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}


.landplan span{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
font-size: 2rem;
background-color: #4d4d4d;
border-right: 5px solid #fff;
}


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

.design_title div.PR_50,
.design_title div.PL_50{
padding: 0 !important;
margin: 20px 0 0;
width: 100% !important;
}

.designe_inner{
width: 100%;
max-width: 100%;
margin: 0;
}

.designe_inner.FW_wr_sp{
flex-wrap:  wrap-reverse !important;
}

.design_max_right,
.design_max_left{
flex: 0;
margin: 0;
width: 100%;
display: contents;
}

.design_max_w{
max-width: 90%;
margin: 0 auto;
}

}


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


.design_title{
margin: 0 0 20px;
}

.design_title_inner{
width: 94%;
max-width: 94%;
margin: 0 3% 20px 3%;
}

.design_max_w{
max-width: 100%;
margin: 0;
}


.landplan{
width: 100%;
}


.landplan span{
width: 30px;
height: 30px;
font-size: 1.5rem;
}

.design_box{
width: 94%;
margin: 0 3% 0 3%;
}

}