/* ==========================================================================
   Social
   ========================================================================== */
/* social title
   ========================================================================== */
.title-facebook {
  background: url(/social/img/social_bg_facebook.svg) no-repeat 0 0;
}
.title-twitter {
  background: url(/social/img/social_bg_twitter.svg) no-repeat 0 0;
}
.title-youtube {
  background: url(/social/img/social_bg_youtube.svg) no-repeat 0 0;
}
.title-instagram {
  background: url(/social/img/social_bg_instagram.svg) no-repeat 0 0;
}
.title-line {
  background: url(/social/img/social_bg_line.svg) no-repeat 0 0;
}
.title-spotify {
  background: url(/social/img/social_bg_spotify.svg) no-repeat 0 0;
}
.title-apple {
  background: url(/social/img/social_bg_apple.svg) no-repeat 0 0;
}

.title-facebook,
.title-twitter,
.title-youtube,
.title-instagram,
.title-line,
.title-spotify,
.title-apple {
  padding-left: 54px;
  background-size: 34px 34px;
}
@media (max-width: 768px) {
  .title-facebook,
  .title-twitter,
  .title-youtube,
  .title-instagram,
  .title-line,
  .title-spotify,
  .title-apple {
    padding-left: 38px;
    background-size: 25px 25px;
  }
}
/* social link
   ========================================================================== */
.social-link {
  margin: 40px -15px -30px -15px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .social-link {
    margin: 20px 0 0;
  }
}
.social-link > li {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (min-width: 769px) {
  .social-link > li {
    width: 33.3%;
    padding: 0 15px 30px 15px;
  }
}
@media (max-width: 768px) {
  .social-link > li {
    width: 100%;
    margin-top: 15px;
  }
}
.social-link > li > a {
  display: table;
  width: 100%;
  padding: 30px;
  border: 1px solid #dcdce2;
  color: #333;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.social-link > li > a:hover {
  text-decoration: none;
}
.social-link > li > a:after {
  content: none;
}
.social-link > li > a .social-link_title:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 1px;
  background: #222;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
  content: "";
}
@media (min-width: 769px) {
  .social-link > li > a {
    min-height: 220px;
  }
  .social-link > li > a:hover .social-link_title:before {
    opacity: 1;
    width: 80px;
  }
}
.social-link:first-child {
  margin-top: 0;
}
.social-link_img {
  display: table-cell;
  width: 60px;
  padding-right: 30px;
}
@media (max-width: 768px) {
  .social-link_img {
    padding-right: 20px;
  }
}
.social-link_body {
  display: table-cell;
  line-height: 1.6;
}
.social-link_title {
  position: relative;
  padding-bottom: 10px;
  color: #222;
  font-weight: bold;
}
.social-link_title ~ p {
  margin-top: 20px;
  color: #333;
  font-size: 1.4rem;
}
.social-link_title ~ p:first-child {
  margin-top: 0;
}
@media (max-width: 768px) {
  .social-link_title ~ p {
    margin-top: 10px;
  }
}
/* social media
   ========================================================================== */
.social-media {
  overflow: hidden;
}
.social-media_img {
  float: left;
  margin-right: 30px;
}
@media (max-width: 768px) {
  .social-media_img {
    display: table;
    float: none;
    margin: 0 auto;
  }
}
.social-media_body {
  overflow: hidden;
}
@media (max-width: 768px) {
  .social-media_body {
    margin-top: 25px;
  }
}