@charset "utf-8";
/* CSS Document */

/*sm*/
#design_sm h3{
margin-bottom: 5px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
}

#design_sm li{
margin-bottom: 30px;
}

#design_sm li:last-child{
margin-bottom: 50px;
}

#design_sm .environment_frame{
position: relative;
border: solid rgba(255,155,0,1.0);
border-width: 2px 0px 0px 2px;
border-radius: 20px 0 0 0;
}

#design_sm .environment_frame{
padding: 20px 15px;
}

#design_sm p{
padding-bottom: 10px;
}

#design_sm .environment_photo{
position: relative;
display: block;
width: 90%;
}

#design_sm .environment_image-left .environment_photo{
margin: 30px auto 0;
}

#design_sm .environment_image-right .environment_photo{
margin: 0 auto;
}

#design_sm .environment_image-right .environment_photo:after,
#design_sm .environment_image-left .environment_photo:before{
content: "";
display: inline-block;
position: absolute;
z-index: -1;
}

#design_sm .environment_image-left .environment_photo:before{
top: -25px;
left: -15px;
width: 80px;
height: 40px;
background: url(../images/pic_mark02.svg)top left/cover no-repeat;
}

#design_sm .environment_image-right .environment_photo:after{
bottom: -20px;
right: -25px;
width: 80px;
height: 40px;
background: url(../images/pic_mark03.svg)top left/cover no-repeat;
}

#design_md-lg{
display: none;
}


/*md*/
@media screen and (min-width: 768px) {
#design_sm{
display: none;
}

#design_md-lg{
display: block;
}

#design_md-lg li{
margin-bottom: 80px;
}

#design_md-lg li:last-child{
margin-bottom: 100px;
}

#design_md-lg .environment_image-right,
#design_md-lg .environment_image-left{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}

#design_md-lg .environment_image-right .environment_title_text,
#design_md-lg .environment_image-left .environment_title_text{
width: 55%;
}

#design_md-lg .environment_noimage .environment_title_text{
width: 100%;
}

#design_md-lg h3{
margin-bottom: 5px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
}

#design_md-lg .environment_frame{
position: relative;
padding: 20px 15px;
border: solid rgba(255,155,0,1.0);
border-width: 2px 0px 0px 2px;
border-radius: 20px 0 0 0;
}

#design_md-lg .environment_photo{
position: relative;
display: block;
width: 36%;
margin: 0 auto;
}

#design_md-lg .environment_image-right .environment_photo:after,
#design_md-lg .environment_image-left .environment_photo:before{
content: "";
display: inline-block;
position: absolute;
z-index: -1;
}

#design_md-lg .environment_image-right .environment_photo:after{
bottom: -30px;
right: -35px;
width: 120px;
height: 60px;
background: url(../images/pic_mark03.svg)top left/cover no-repeat;
}

#design_md-lg .environment_image-left .environment_photo:before{
top: -35px;
left: -30px;
width: 120px;
height: 60px;
background: url(../images/pic_mark02.svg)top left/cover no-repeat;
}
}