@charset "UTF-8";

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

.design_bg{
background-image: url(../../design/images/design_bg02.jpg);
background-size: 100%;
background-position: bottom center;
background-repeat: repeat-y;
}

.page_title_design{
background-image: url(../../design/images/design_bg01.jpg);
background-size: 100%;
background-position: bottom center;
background-repeat: repeat-y;
}

.design_box{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin: 80px 0 0;
}

.design_box2{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 80px 0;
margin: 80px 0 0;
background: #fff;
width: 100%;
}

.design_box h4{
text-align: left;
font-size: 1.8rem;
color: #3f4c62;
margin: 0 0 20px;
}

.design_img{
width: 100%;
}

.design_box .top_concept{
width: 50%;
}

.design_box .top_concept p{
font-size: min(1.53846vw, 16px);
color: #3f4c62;
font-weight: 300;
}

.design_box .top_concept p span{
font-size: min(2.11538vw, 22px);
font-weight: 600;
margin: 0 0 30px;
}

.design_box2 .section_top_text{
margin: 0;
}

.design_box2 .section_top_text h3 span{
font-family: "Cinzel", serif;
font-size: 3.5rem;
line-height: 1;
letter-spacing: 0;
font-weight: 400;
text-align: center;
margin: 0 0 10px;
}

.design_list{
display: flex;
justify-content: center;
align-items: baseline;
flex-wrap: wrap;
width: 100%;
}

.design_list h5{
font-size: min(1.64705vw, 14px);
color: #3f4c62;
margin: 10px 1% 0;
width: auto;
}

.design_list2 h4{
font-size: min(1.27272vw, 14px);
text-align: center;
color: #333;
}

/*----------------------------------------
 sp
----------------------------------------*/

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

.design_box{
margin: 40px 0 0;
}

.design_box2{
padding: 40px 0;
margin: 40px 0 0;
}

.design_box2 .section_top_text h3 span{
font-size: 2.2rem;
}

.design_box .top_concept{
width: 100%;
}

.design_box .top_concept p{
font-size: 1.5rem;
margin: 20px 2% 0;
padding: 0 10px;
text-align: left;
}

.design_box .top_concept p span{
font-size: 1.8rem;
text-align: center;
}

.design_box .top_concept p.cap{
padding: 0 5px;
margin: 0;
}

.design_list h5{
font-size: 1.2rem;
}

.design_list2{
align-items: flex-start;
}

.design_list2 h4{
font-size: 1.3rem;
text-align: left;
line-height: 1.2;
}

}