@charset "utf-8";

body {}
.md_panelArea {}
.md_simplePanelArea {}

/*============================
#renovationArea
============================*/
#renovationArea { margin-top: 60px; }
#renovationArea .bg_bottom { background: url(../../imageFile/diy/bg_bottom.png) no-repeat center bottom; padding-bottom: 25px; background-size: 1100px auto; }
#renovationArea .bg_bottom .bg_top { background: url(../../imageFile/diy/bg_top.png) no-repeat center top; padding-top: 25px; background-size: 1100px auto; }
#renovationArea .bg_bottom .bg_top .bg_middle { background: url(../../imageFile/diy/bg.png) repeat-y center top; padding: 60px 0; background-size: 1100px auto;  }
#renovationArea .content { width: 900px; margin: 0 auto; }
#renovationArea .content .title { text-align: center; }
#renovationArea .content .title img {}
#renovationArea .content .mainPanel { margin-top: 50px; }
#renovationArea .content .mainPanel img {}
#renovationArea .content .mainCopy { font-size: 1em; margin-top: 40px; padding-bottom: 60px; background: url(../../imageFile/diy/line.png) no-repeat center bottom; line-height: 1.75; }
#renovationArea .content .mainCopy h1 { line-height: 1.75; font-weight: bold; color: #5b4a3d; }
#renovationArea .content .about {}
#renovationArea .content .about .line {}
#renovationArea .content .about .line .md_subTitle { line-height: 1.5; font-weight: bold; color: #5b4a3d; font-size: 1.75em; }
#renovationArea .content .about .line .aboutCopy { font-size: 1em; margin-top: 40px; padding-bottom: 60px; background: url(../../imageFile/diy/line.png) no-repeat center bottom; line-height: 1.75; font-weight: bold; color: #5b4a3d; }
#renovationArea .content .md_subTitle { line-height: 1.5; font-weight: bold; color: #5b4a3d; font-size: 1.75em; }
#renovationArea .content .reason { margin-top: 40px; }
#renovationArea .content .reason .line {}
#renovationArea .content .reason .line .text { float: left; width: 420px; }
#renovationArea .content .reason .line .text .icon { text-align: center; margin-top: 40px; }
#renovationArea .content .reason .line .text .icon img {}
#renovationArea .content .reason .line .text .reasonCopy { font-weight: bold; margin-top: 20px; text-align: center; line-height: 1.5;  font-size: 1.25em; color: #5b4a3d;}
#renovationArea .content .reason .line .text .reasonInfo { line-height: 1.75; margin-top: 20px; font-weight: bold; padding-bottom: 20px; padding-top: 20px; border-top: solid 2px #5b4a3d; border-bottom: solid 2px #5b4a3d; color: #5b4a3d; font-size: 0.875em; }
#renovationArea .content .reason .line .image { float: right; width: 420px; }
#renovationArea .content .reason .line .image img {}
#renovationArea .content .reason.bottom {}
#renovationArea .content .reason.bottom .line .text { float: right; }
#renovationArea .content .reason.bottom .line .image { float: left; }

/*============================
#recommendArea
============================*/
#recommendArea {}
#recommendArea .md_container {}
#recommendArea .md_container .join { background: #fff; padding: 30px; display: flex; align-items: center; justify-content: space-between; }
#recommendArea .md_container .join .data { background: #fff; width: 260px; position: relative; }
#recommendArea .md_container .join .data .subTitle { font-size: 3em; color: #3d2e27; }
#recommendArea .md_container .join .data .text { line-height: 1.5; margin-top: 10px; font-weight: bold; }
#recommendArea .md_container .join .data::after { content: ""; display: block; background: url("../../imageFile/global/icon_arrow2.svg") no-repeat center;  width: 30px; height: 30px; background-size: 30px auto; position: absolute; right: -60px; top: 50%; margin-top: -15px; }
#recommendArea .md_container .join .image { width: 700px; height: 160px; }
#recommendArea .md_container .join .image a:hover img { transform: scale(1); }