@charset "UTF-8";

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

.design_bg{
background-image: url(../../common/images/bg.jpg);
background-size: 100%;
background-position: bottom center;
background-repeat: repeat-y;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.design_title{
width: 100% !important;
background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(217,225,223,1) 100%);
padding: 60px 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 80px 0 20px;
overflow: hidden;
}

.design_title.bg_no{
background: none;
margin: 0;
}

.design_title.bg_top{
background: linear-gradient(0deg, rgba(255,255,255,0) 50%, rgba(217,225,223,1) 100%);
}

.designe_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;
color: #003629;
}

.design_title_inner p{
font-size: 2rem;
position: relative;
}

.design_title_inner.L_line p:before,
.design_title_inner p:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;/*線の上下位置*/
  display: inline-block;
  width: 100px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgb(0, 54, 41);
  border-radius: 1px;
}

.design_title_inner.L_line{
justify-content: flex-start;
}

.design_title_inner.L_line p{
position: relative;
text-align: left;
width: 100%;
}

.design_title_inner.L_line p:before{
left: 0;
-webkit-transform: none;
transform: none;
}

.design_list{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: #d9e1df;
padding: 40px;
margin: 80px 0;
width: 98%;
}

.design_list_left{
display: flex;
flex-wrap: wrap;
width: 30%;
}

.design_list_left h4{
line-height: 1.4;
color: #003629;
}

.design_list_left h5{
line-height: 1.7;
font-size: 1.3rem;
}

.design_list_right{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 2%;
width: 65%;
}

.design_list_right .row{
grid-row: span 2;
display: grid;
grid-template-rows: subgrid;
}

.design_list_right .row p{
font-size: 1.1rem;
text-align: center;
letter-spacing: 0;
}

.design_list2{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 2%;
margin: 80px 0 0;
width: 98%;
}

.design_list2 .row{
grid-row: span 5;
display: grid;
grid-template-rows: subgrid;
margin: 0 0 40px;
}

.design_list2 .row h4{
display: flex;
justify-content: flex-start;
align-items: flex-start;
font-size: 1.7rem;
line-height: 1.4;
letter-spacing: 0;
text-align: left;
}

.design_list2 .row h4 span{
display: flex;
align-items: center;
padding: 4px 8px;
margin: 0 5px 0 0;
color: #fff;
background: #8c7e61;
}

.design_list2 .row p{
line-height: 1.7;
font-size: 1.3rem !important;
margin: 10px 0 0;
}

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

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

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

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

.design_title p.design_text{
font-size: 1.3rem;
width: 100%;
}

}

@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{
padding: 30px 0;
margin: 40px 0 20px;
}

.design_title_inner{
width: 100%;
max-width: 100%;
}

.design_title_inner p{
font-size: 1.7rem;
line-height: 1.7;
text-align: center;
}

.design_title p.design_text{
padding: 0 20px;
}

.design_title_inner.L_line p:before,
.design_title_inner p:before{
width: 60px;
}

.design_title_inner.L_line p.design_pd_20:before{
left: 20px;
}

.design_list{
padding: 20px 20px 10px;
margin: 40px 0;
width: 98%;
}

.design_list h4{
font-size: 1.5rem;
}

.design_list_left{
margin: 0 0 20px;
width: 100%;
}

.design_list_right{
width: 100%;
}

.design_list_right .row{
margin: 0 0 10px;
}

.design_list_right .row p{
font-size: 1rem;
line-height: 1.3;
margin: 5px 0 0;
}

.design_list2{
grid-template-columns: 1fr;
padding: 0 20px;
margin: 40px 0 20px;
width: 100%;
}

.design_list2 .row{
margin: 0 0 20px;
}

.design_list2 .row h4{
font-size: 1.6rem;
}

.design_pd_20{
padding: 0 20px;
}

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

}