@charset "UTF-8";

.intro { text-align: center;}

.case .social-items {margin: 0 auto 8vw;}
.case .social-items li{position: relative;transition : .5s;width: 100%;margin: 0 auto 4vw;font-size: 4.2vw;text-align: center;font-family:"Cormorant Infant";font-feature-settings: "palt";letter-spacing: .04em;font-weight: bold;border-radius: 60px;}
.case .social-items li:after {content: "\f105";font-family: icon;font-size: 88%;display: inline-block;position: absolute;top: 50%;right: 16px;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}

.case .social-items li.insta{border:1px solid #a89cbf; }
.case .social-items li.insta a,.case .social-items li.insta:after {color: #a89cbf;}
.case .social-items i { margin-right: 5px;}
.case .social-items li a {display: block;padding: 3.8vw 0;}
.case .social-items li a:hover {color:#fff;}
.case .social-items li:hover { transition : .5s;}
.case .social-items li.insta:hover{background: #a89cbf; color: #fff;}
.case .social-items li:hover:after { opacity: 0.8; color:#fff;}

.gallery ul{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;align-items:flex-start;-webkit-justify-content: space-between;justify-content: flex-start;}
.gallery li {width: 48%;margin: 0 3vw 3vw 0;position: relative;}
.gallery li:nth-child(2n){ margin-right: 0;}
.gallery li a:after { content: ''; display: inline-block; width: 24px; height: 24px; background-image: url(../images/zoom.jpg); background-size: contain; vertical-align: middle; position: absolute; right:0; bottom:0;}
.gallery li img{width:100%;}


/* ========================================
 pc
==========================================*/
@media screen and (min-width: 736px) { 

.case .social-items {margin: 0 auto 60px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;align-items:center;justify-content:center;}
.case .social-items li{width: 23%;font-size: 18px;margin: 0 10px;}
.case .social-items li a{padding: 20px;}
.case .social-items i { margin-right: 5px;}

.gallery li{width: 23%;margin: 0 32px 32px 0;}
.gallery li:nth-child(2n){margin: 0 32px 32px 0;}
.gallery li:nth-child(4n){width: 23%;margin: 0 0 24px 0;}

 }