@charset "UTF-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+
+
+　SNS一覧専用要素
+
+
+
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* --------------------------------------------------------------------------------------
 トップページ
--------------------------------------------------------------------------------------- */
/*facebook*/
.snsBox {
  margin-bottom: 2em;
}
.snsBox .sns_left {
  width: 100%;
  margin-bottom: 20px;
}
.snsBox .sns_right {
}

@media print, screen and (min-width: 768px) {
  .snsBox .sns_left {
    width: 50%;
    float: left;
    margin-right: 8%;
    margin-bottom: 0;
  }
  .snsBox .sns_right {
    width: 42%;
    float: left;
  }
}


/*instagram*/
.instaBox {
  margin-bottom: 2em;
}
.instaBox .insta_left {
  width: 100%;
  margin-bottom: 20px;
}
.instaBox .insta_right img {
  width: 100%;
  max-width: 352px;
}

@media print, screen and (min-width: 768px) {
  .instaBox .insta_left {
    width: 50%;
    float: left;
    margin-right: 8%;
    margin-bottom: 0;
  }
  .instaBox .insta_right {
    width: 42%;
    float: left;
  }
}


/*YouTube*/
.youtubeBox {
  margin-bottom: 2em;
}
.youtubeBox .youtube_left {
  width: 100%;
  margin-bottom: 20px;
}
.youtubeBox .youtube_right {
  width: 100%;
  max-width: 352px;
}

.youtubeBox .youtube_right .youtubeWrap {
  width: 100%;
  max-width: 460px;
  margin: 0 auto 30px auto;
}

.youtubeBox .youtube_right .youtubeWrap .youtubeArea {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 15px;
}
.youtubeBox .youtube_right .youtubeWrap .youtubeArea iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

@media print, screen and (min-width: 768px) {
  .youtubeBox .youtube_left {
    width: 50%;
    float: left;
    margin-right: 8%;
    margin-bottom: 0;
  }
  .youtubeBox .youtube_right {
    width: 42%;
    float: left;
  }
}


/*twitter*/
.twitterBox {
  margin-bottom: 2em;
}
.twitterBox .twitter_left {
  width: 100%;
  margin-bottom: 20px;
}
.twitterBox .twitter_right {
}

@media print, screen and (min-width: 768px) {
  .twitterBox .twitter_left {
    width: 50%;
    float: left;
    margin-right: 8%;
    margin-bottom: 0;
  }
  .twitterBox .twitter_right {
    width: 42%;
    float: left;
  }
}