@charset "utf-8";

body {}
.md_panelArea {}
.md_simplePanelArea {}

/*============================
#diyArea
============================*/
#diyArea { margin-top: 60px; }
#diyArea .bg_bottom { background: url(../../imageFile/diy/bg_bottom.png) no-repeat center bottom; padding-bottom: 25px; background-size: 1100px auto; }
#diyArea .bg_bottom .bg_top { background: url(../../imageFile/diy/bg_top.png) no-repeat center top; padding-top: 25px; background-size: 1100px auto; }
#diyArea .bg_bottom .bg_top .bg_middle { background: url(../../imageFile/diy/bg.png) repeat-y center top; padding: 60px 0; background-size: 1100px auto;  }
#diyArea .content { width: 900px; margin: 0 auto; }
#diyArea .content .title { text-align: center; }
#diyArea .content .mainPanel { margin-top: 50px; }
#diyArea .content .mainCopy { font-size: 1.125em; margin-top: 40px; padding-bottom: 60px; background: url(../../imageFile/diy/line.png) no-repeat center bottom; }
#diyArea .content .mainCopy h1 { line-height: 1.75; font-weight: bold; color: #5b4a3d; }
#diyArea .content .point { margin-top: 60px; }
#diyArea .content .point .point01 {}
#diyArea .content .point .point01 .pointTitle { background: url(../../imageFile/diy/icon.png) no-repeat left top; font-size: 1.5em; font-weight: bold; color: #5b4a3d; padding: 2px 0 2px 40px; }
#diyArea .content .point .point01 .copy { margin-top: 10px; line-height: 1.75; font-weight: bold; color: #5b4a3d; }
#diyArea .content .point .point02 {}
#diyArea .content .point .point02 .pointTitle { background: url(../../imageFile/diy/icon.png) no-repeat left top; font-size: 1.5em; font-weight: bold; color: #5b4a3d; padding: 2px 0 2px 40px; margin-top: 40px; }
#diyArea .content .point .point02 .copy { margin-top: 10px; line-height: 1.75; font-weight: bold; color: #5b4a3d; }
#diyArea .content .point .point03 {}
#diyArea .content .point .point03 .pointTitle { background: url(../../imageFile/diy/icon.png) no-repeat left top; font-size: 1.5em; font-weight: bold; color: #5b4a3d; padding: 2px 0 2px 40px; margin-top: 40px; }
#diyArea .content .point .point03 .copy { margin-top: 10px; line-height: 1.75; font-weight: bold; color: #5b4a3d; }
#diyArea .content .gallery { margin-top: 50px; }
#diyArea .content .gallery ul {}
#diyArea .content .gallery ul li { float: left; width: 210px; margin-top: 20px; margin-right: 20px; overflow: hidden; }
#diyArea .content .gallery ul li:nth-child(4n) { margin-right: 0; }
#diyArea .content .gallery ul li a { display: block; }
#diyArea .content .gallery ul li a img { width: 210px; height: 210px; }
#diyArea .content .workshop { margin-top: 80px; padding-top: 80px; border-top: solid 1px #5b4a3d; }
#diyArea .content .workshop .workTitle { text-align: center; }
#diyArea .content .workshop .minicopy { margin-top: 20px; font-weight: bold; color: #5b4a3d; text-align: center; line-height: 1.5; font-size: 1em; }
#diyArea .content .workshop .diySpace { margin-top: 30px; text-align: center; }
#diyArea .content .workshop .diySpace img { width: 80%; height: auto; }
#diyArea .content .workshop .diySpace a:hover img { transform: scale(1); }
#diyArea .content .parts { margin-top: 80px; padding-top: 80px; border-top: solid 1px #5b4a3d; }
#diyArea .content .parts .title { text-align: center; }
#diyArea .content .parts .title img { width: 400px; height: auto; }
#diyArea .content .parts .text { margin-top: 30px; line-height: 1.5; }
#diyArea .content .parts .button { margin-top: 30px; text-align: center; }

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