@charset "utf-8";

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

/*============================
#diyArea
============================*/
#renovationArea { margin-top: 0; }
#renovationArea .bg_bottom { background: url(../../imageFile/diy/bg_bottom.png) no-repeat center bottom; padding-bottom: 3%; background-size: 100% auto; }
#renovationArea .bg_bottom .bg_top { background: url(../../imageFile/diy/bg_top.png) no-repeat center top; padding-top: 3%; background-size: 100% auto; }
#renovationArea .bg_bottom .bg_top .bg_middle { background: url(../../imageFile/diy/bg.png) repeat-y center top; padding: 20px 0; background-size: 100% auto;  }
#renovationArea .content { width: inherit; }
#renovationArea .content .title {}
#renovationArea .content .title img { height: 90px; width: auto; }
#renovationArea .content .mainPanel { margin-top: 30px; margin-left: -20px; margin-right: -20px; }
#renovationArea .content .mainPanel img { width: 100%; height: auto; }
#renovationArea .content .mainCopy { font-size: 1em; margin-top: 30px; padding-bottom: 30px; }
#renovationArea .content .mainCopy h1 {}
#renovationArea .content .about {}
#renovationArea .content .about .line {}
#renovationArea .content .about .line .md_subTitle { font-size: 1.25em; }
#renovationArea .content .about .line .aboutCopy { font-size: 0.875em; margin-top: 20px; padding-bottom: 40px; }
#renovationArea .content .md_subTitle { font-size: 1.25em; }
#renovationArea .content .reason { margin-top: 20px; }
#renovationArea .content .reason .line {}
#renovationArea .content .reason .line .text { float: inherit; width: inherit; }
#renovationArea .content .reason .line .text .icon { text-align: center; margin-top: 20px; }
#renovationArea .content .reason .line .text .icon img { width: 50px; height: auto; }
#renovationArea .content .reason .line .text .reasonCopy { margin-top: 10px; }
#renovationArea .content .reason .line .text .reasonInfo { padding-top: 15px; padding-bottom: 15px; margin-top: 15px; }
#renovationArea .content .reason .line .image { float: inherit; width: inherit; margin-top: 20px; }
#renovationArea .content .reason .line .image img { width: 100%; height: auto; }
#renovationArea .content .reason.bottom {}
#renovationArea .content .reason.bottom .line .text { float: inherit; }
#renovationArea .content .reason.bottom .line .image { float: inherit; }

/*============================
#recommendArea
============================*/
#recommendArea {}
#recommendArea .md_container {}
#recommendArea .md_container .join { margin-top: 0; padding: 20px; display: block; align-items: inherit; justify-content: inherit; margin-left: -20px; margin-right: -20px; }
#recommendArea .md_container .join .data { width: inherit; }
#recommendArea .md_container .join .data::after { display: none; }
#recommendArea .md_container .join .data .subTitle { font-size: 2em; text-align: center; }
#recommendArea .md_container .join .data .text { line-height: 1.5; margin-top: 10px; font-weight: bold; }
#recommendArea .md_container .join .image { width: inherit; height: inherit; margin-top: 20px; }
#recommendArea .md_container .join .image img { width: 100%; height: auto; }
#recommendArea .md_container .join .image a:hover img {}

}