@charset "utf-8";

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

/*============================
#diyArea
============================*/
#diyArea { margin-top: 0; }
#diyArea .bg_bottom { background: url(../../imageFile/diy/bg_bottom.png) no-repeat center bottom; padding-bottom: 3%; background-size: 100% auto; }
#diyArea .bg_bottom .bg_top { background: url(../../imageFile/diy/bg_top.png) no-repeat center top; padding-top: 3%; background-size: 100% auto; }
#diyArea .bg_bottom .bg_top .bg_middle { background: url(../../imageFile/diy/bg.png) repeat-y center top; padding: 20px 0; background-size: 100% auto;  }
#diyArea .content { width: inherit; }
#diyArea .content .title {}
#diyArea .content .title img { height: 120px; width: auto; }
#diyArea .content .mainPanel { margin-top: 30px; margin-left: -20px; margin-right: -20px; }
#diyArea .content .mainPanel img { width: 100%; height: auto; }
#diyArea .content .mainCopy { font-size: 1em; margin-top: 30px; padding-bottom: 30px; }
#diyArea .content .point { margin-top: 30px; }
#diyArea .content .point .point01 {}
#diyArea .content .point .point01 .pointTitle { background: url(../../imageFile/diy/icon.png) no-repeat left top; font-size: 1.25em; background-size: 20px auto; margin-top: 30px; padding-left: 30px; }
#diyArea .content .point .point01 .copy { font-size: 0.875em; }
#diyArea .content .point .point02 {}
#diyArea .content .point .point02 .pointTitle { background: url(../../imageFile/diy/icon.png) no-repeat left top; font-size: 1.25em; background-size: 20px auto; margin-top: 30px; padding-left: 30px; }
#diyArea .content .point .point02 .copy { font-size: 0.875em; }
#diyArea .content .point .point03 {}
#diyArea .content .point .point03 .pointTitle { background: url(../../imageFile/diy/icon.png) no-repeat left top; font-size: 1.25em; background-size: 20px auto; margin-top: 30px; padding-left: 30px; }
#diyArea .content .point .point03 .copy { font-size: 0.875em; }
#diyArea .content .gallery { margin-top: 30px; }
#diyArea .content .gallery ul {}
#diyArea .content .gallery ul li { width: 32%; height: inherit; margin-right: 2%; margin-top: 2%; }
#diyArea .content .gallery ul li:nth-child(4n) { margin-right: 2%; }
#diyArea .content .gallery ul li:nth-child(3n) { margin-right: 0; }	
#diyArea .content .gallery ul li a {}
#diyArea .content .gallery ul li a img { width: 100%; height: auto; }
#diyArea .content .workshop { margin-top: 30px; padding-top: 30px; }
#diyArea .content .workshop .workTitle { padding-left: 0; }
#diyArea .content .workshop .workTitle img { height: 50px; width: auto; }
#diyArea .content .workshop .minicopy { text-align: left; }
#diyArea .content .workshop .minicopy br { display: none; }
#diyArea .content .workshop .diySpace { margin-top: 20px; }
#diyArea .content .workshop .diySpace img { width: 100%; height: auto; }
#diyArea .content .workshop .diySpace a:hover img { transform: scale(1); }
#diyArea .content .parts { margin-top: 30px; padding-top: 30px; }
#diyArea .content .parts .title {}
#diyArea .content .parts .title img { width: 280px; height: auto; }
#diyArea .content .parts .text { margin-top: 20px; }
#diyArea .content .parts .button { margin-top: 20px; }

/*============================
#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 {}

}