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

/*============================
#instagramArea
============================*/
#instagramArea {}
#instagramArea .instagramMain { width: 1000px; margin: 0 auto; }
#instagramArea .instaTitle { position: relative; padding-top: 90px; }
#instagramArea .title { position: absolute; bottom: 10px; left: 0; font-size: 1.75em; font-weight: bold; }
#instagramArea .subTitle { position: absolute; bottom: 8px; left: 220px; }
#instagramArea .button { position: absolute; bottom: 12px; right: 0; }
#instagramArea .button a { display: block; position: relative; width: 185px; background-color: #000; text-align: center; padding: 14px 0 13px; color: #fff; font-size: 0.75em; }
#instagramArea .button a span { position: absolute; right: 20px; top: 13px; }
#instagramArea .instaImage ul { display: flex; flex-wrap: wrap; padding: 20px 0 0px; }
#instagramArea .instaImage ul li { position: relative; float: left; width: 227px; margin-top: 30px; margin-left: 30px; }
#instagramArea .instaImage ul li:before{ content: ""; display: block; padding-top: 100%; }
#instagramArea .instaImage ul li img { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0;  margin: auto; object-fit: cover; }
#instagramArea .instaImage ul li:first-child { margin-left: 0; }
#instagramArea .instaImage ul li:nth-child(5) { margin-left: 0; }

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

#instagramArea {}
#instagramArea .instagramMain { width: inherit; }
#instagramArea .instaTitle {}
#instagramArea .title {}
#instagramArea .subTitle {}
#instagramArea .button {}
#instagramArea .button a {}
#instagramArea .button a span {}
#instagramArea .instaImage ul { padding: 20px 0; }
#instagramArea .instaImage ul li { width: 49%; margin-top: 2%; margin-left: 2%;  }
#instagramArea .instaImage ul li img { width: 100%; }
#instagramArea .instaImage ul li:first-child {}
#instagramArea .instaImage ul li:nth-child(5) {}
#instagramArea .instaImage ul li:nth-child(odd)  { margin-left: 0; }


}