@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* ホームページの要素非表示 */
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info {
  display: none;
}

/* SNSボタン枠組み */
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
  justify-content: center;
  flex-wrap: wrap;
}

/* SNSボタンリンク */
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
  width: 40px;
  height: 40px;
  margin-right: 4px;
  margin-left: 4px;
  border: none;
}

.sns-follow.sf-profile .sns-buttons a {
  border: none;
}

/* SNSアイコンサイズ */
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
  font-size: 20px;
}

.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
  font-size: 25px;
}

/* シェアボタンキャプション非表示 */
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
  display: none;
}

/* シェア数 */
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
  right: 0;
  bottom: -10px;
  left: 0;
  font-size: 10px;
  color: #333;
}

[class*="sns-share"][class*="ss-"] [class*="-button"],
[class*="sns-follow"][class*="sf-"] [class*="-button"] {
  background-color: inherit;
}

[class*="sns-"][class*="bc-monochrome"] [class*="icon-"]:before {
  color: #333;
}

/* シェアボタンアイコン色 */
.icon-twitter:before { color: #1da1f2; }
.icon-facebook:before { color: #3b5998; }
.icon-hatena:before { color: #2c6ebd; }
.icon-pocket:before { color: #ef4056; }
.icon-line:before { color: #00c300; }
.icon-pinterest:before { color: #bd081c; }
.icon-linkedin:before { color: #0077b5; }
.icon-copy:before { color: #333; }
.icon-comment:before { color: #333; }

/* フォローボタンアイコン色 */
.sns-follow.sf-bottom .icon-home-logo:before,
.sns-follow.sf-widget .icon-home-logo:before { color: #002561; }

.sns-follow.sf-bottom .icon-twitter-logo:before,
.sns-follow.sf-widget .icon-twitter-logo:before { color: #1da1f2; }

.sns-follow.sf-bottom .icon-facebook-logo:before,
.sns-follow.sf-widget .icon-facebook-logo:before { color: #3b5998; }

.sns-follow.sf-bottom .icon-hatebu-logo:before,
.sns-follow.sf-widget .icon-hatebu-logo:before { color: #2c6ebd; }

.sns-follow.sf-bottom .icon-instagram-logo:before,
.sns-follow.sf-widget .icon-instagram-logo:before { color: #405de6; }

.sns-follow.sf-bottom .icon-youtube-logo:before,
.sns-follow.sf-widget .icon-youtube-logo:before { color: #cd201f; }

.sns-follow.sf-bottom .icon-linkedin-logo:before,
.sns-follow.sf-widget .icon-linkedin-logo:before { color: #0077b5; }

.sns-follow.sf-bottom .icon-note-logo:before,
.sns-follow.sf-widget .icon-note-logo:before { color: #41c9b4; }

.sns-follow.sf-bottom .icon-soundcloud-logo:before,
.sns-follow.sf-widget .icon-soundcloud-logo:before { color: #ff8800; }

.sns-follow.sf-bottom .icon-flickr-logo:before,
.sns-follow.sf-widget .icon-flickr-logo:before { color: #111; }

.sns-follow.sf-bottom .icon-pinterest-logo:before,
.sns-follow.sf-widget .icon-pinterest-logo:before { color: #bd081c; }

.sns-follow.sf-bottom .icon-line-logo:before,
.sns-follow.sf-widget .icon-line-logo:before { color: #00c300; }

.sns-follow.sf-bottom .icon-amazon-logo:before,
.sns-follow.sf-widget .icon-amazon-logo:before { color: #ff9900; }

.sns-follow.sf-bottom .icon-rakuten-room-logo:before,
.sns-follow.sf-widget .icon-rakuten-room-logo:before { color: #c61e79; }

.sns-follow.sf-bottom .icon-slack-logo:before,
.sns-follow.sf-widget .icon-slack-logo:before { color: #e01563; }

.sns-follow.sf-bottom .icon-github-logo:before,
.sns-follow.sf-widget .icon-github-logo:before { color: #4078c0; }

.sns-follow.sf-bottom .icon-codepen-logo:before,
.sns-follow.sf-widget .icon-codepen-logo:before { color: #333; }

.sns-follow.sf-bottom .icon-feedly-logo:before,
.sns-follow.sf-widget .icon-feedly-logo:before { color: #2bb24c; }

.sns-follow.sf-bottom .icon-rss-logo:before,
.sns-follow.sf-widget .icon-rss-logo:before { color: #f26522; }

/* アピールエリア高さ（スマホ） */
@media (max-width: 767px) {
  #appeal {
    height: 120vw;
  }
}

/* トップバナー */
.top-banner {
  display: flex;
  flex-wrap: wrap;
}
.top-banner li {
  width: calc(100% / 2);
  padding: 0 5px;
  box-sizing: border-box;
}
.top-banner li img {
  max-width: 100%;
  height: auto;
  border: solid 1px #ccc;
}