@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/************************************
** 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-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-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 30px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.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; /*アイコンの色*/
}


/* シェアボタンの各アイコン
-----------------------------------*/

/*Twitterアイコン*/
.icon-twitter:before {
	color: #1da1f2; /*アイコンの色*/
}

/*Facebookアイコン*/
.icon-facebook:before {
	color: #3b5998; /*アイコンの色*/
}

/*はてブアイコン*/
.icon-hatena:before {
	color: #2c6ebd; /*アイコンの色*/
}

/*Pocketアイコン*/
.icon-pocket:before {
	color: #ef4056; /*アイコンの色*/
}

/*LINEアイコン*/
.icon-line:before {
	color: #00c300; /*アイコンの色*/
}

/*Pinterestアイコン*/
.icon-pinterest:before {
	color: #bd081c; /*アイコンの色*/
}

/*LinkedInアイコン*/
.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;/*アイコンの色*/
}

/*Twitterアイコン*/
.sns-follow.sf-bottom .icon-twitter-logo:before,
.sns-follow.sf-widget .icon-twitter-logo:before {
	color: #1da1f2; /*アイコンの色*/
}

/*Facebookアイコン*/
.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; /*アイコンの色*/
}

/*Instagramアイコン*/
.sns-follow.sf-bottom .icon-instagram-logo:before,
.sns-follow.sf-widget .icon-instagram-logo:before {
	color: #405de6; /*アイコンの色*/
}

/*YouTubeアイコン*/
.sns-follow.sf-bottom .icon-youtube-logo:before,
.sns-follow.sf-widget .icon-youtube-logo:before {
	color: #cd201f; /*アイコンの色*/
}

/*LinkedInアイコン*/
.sns-follow.sf-bottom .icon-linkedin-logo:before,
.sns-follow.sf-widget .icon-linkedin-logo:before {
	color: #0077b5; /*アイコンの色*/
}

/*noteアイコン*/
.sns-follow.sf-bottom .icon-note-logo:before,
.sns-follow.sf-widget .icon-note-logo:before {
	color: #41c9b4; /*アイコンの色*/
}

/*SoundCloudアイコン*/
.sns-follow.sf-bottom .icon-soundcloud-logo:before,
.sns-follow.sf-widget .icon-soundcloud-logo:before {
	color: #ff8800; /*アイコンの色*/
}

/*Flickrアイコン*/
.sns-follow.sf-bottom .icon-flickr-logo:before,
.sns-follow.sf-widget .icon-flickr-logo:before {
	color: #111; /*アイコンの色*/
}

/*Pinterestアイコン*/
.sns-follow.sf-bottom .icon-pinterest-logo:before,
.sns-follow.sf-widget .icon-pinterest-logo:before {
	color: #bd081c; /*アイコンの色*/
}

/*LINEアイコン*/
.sns-follow.sf-bottom .icon-line-logo:before,
.sns-follow.sf-widget .icon-line-logo:before {
	color: #00c300; /*アイコンの色*/
}

/*Amazonアイコン*/
.sns-follow.sf-bottom .icon-amazon-logo:before,
.sns-follow.sf-widget .icon-amazon-logo:before {
	color: #ff9900; /*アイコンの色*/
}

/*ROOMアイコン*/
.sns-follow.sf-bottom .icon-rakuten-room-logo:before,
.sns-follow.sf-widget .icon-rakuten-room-logo:before {
	color: #c61e79; /*アイコンの色*/
}

/*Slackアイコン*/
.sns-follow.sf-bottom .icon-slack-logo:before,
.sns-follow.sf-widget .icon-slack-logo:before {
	color: #e01563; /*アイコンの色*/
}

/*GitHubアイコン*/
.sns-follow.sf-bottom .icon-github-logo:before,
.sns-follow.sf-widget .icon-github-logo:before {
	color: #4078c0; /*アイコンの色*/
}

/*CodePenアイコン*/
.sns-follow.sf-bottom .icon-codepen-logo:before,
.sns-follow.sf-widget .icon-codepen-logo:before {
	color: #333; /*アイコンの色*/
}

/*Feedlyアイコン*/
.sns-follow.sf-bottom .icon-feedly-logo:before,
.sns-follow.sf-widget .icon-feedly-logo:before {
	color: #2bb24c; /*アイコンの色*/
}

/*RSSアイコン*/
.sns-follow.sf-bottom .icon-rss-logo:before,
.sns-follow.sf-widget .icon-rss-logo:before {
	color: #f26522; /*アイコンの色*/
}
/************************************
** SNS ボタンをまとめてシンプルにする（ここまで）
************************************/




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** 固定ページの投稿日、更新日を非表示にする
************************************/
/*固定ページの日付非表示*/
.page .date-tags,
.page .author-info {
display: none;
}


/************************************
** ページネーションの表示カスタマイズ。
************************************/
.pagination-next-link {
  background-color: #49add1;
  color: #fff;
  border: none;
  border-radius: 30px;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2); /*「次のページ」部分の影*/
}
.pagination-next-link:hover {
  background-color: #68caee;
  transition: all 0.5s ease;
  color: #fff;
}
.page-numbers {
  color: #49add1;
  border: 1px solid #49add1;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /*数字部分の影*/
}
.pagination .current {
  background-color: #49add1;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: #49add1;
  color: #fff;
}
a.prev, a.next {
  display: none;
}
@media screen and (max-width: 480px) {
.page-numbers {
  width: 48px;
  height: 48px;
  line-height: 48px;
}
}


/************************************
** 固定ページ上にページタイトルを非表示にする。
mitemita.com/article-title-hide/
************************************/
.page 
.entry-title {
  display: none;
}



/************************************
** 人気記事ランキング表示のカスタマイズ
ulovenglish.com/rank-customize/
************************************/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{ /*順位数表示のカスタマイズ*/
border-radius: 50%; /*丸にする*/
top: -4px; /*丸の位置上に*/
left: -4px; /*丸の位置左に*/
width: 14px; /*丸のサイズを小さく*/
height: 14px; /*丸のサイズを小さく*/
font-family: ‘Lato’, sans-serif; /*数字をグーグルフォントに変更*/
font-size: 12px; /*数字のフォントサイズを小さく*/
}
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {/*1位の数字を上に*/
line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {/*2位の数字を上に*/
line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {/*3位の数字を上に*/
line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-4 .card-thumb::before {/*4位の数字を上にし背景色変更*/
background: #d0d0d1;
line-height: 14px;
}
.widget-entry-cards.ranking-visible .no-5 .card-thumb::before {/*5位の数字を上にし背景色変更*/
　　　　 background: #d0d0d1;
line-height: 14px;
}
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{/*タイトル*/
padding: 0.2em 0 0 0.8em !important; /*タイトル周りの余白を調整*/
letter-spacing: 0.8px; /*字間を広げる*/
}
.sidebar a.popular-entry-card-link.a-wrap{/*miniブログカード*/
margin-bottom: 8px; /*カード間の余白を広げる*/
}



/************************************
** タイムラインカスタマイズ
pote-chil.com/cocoon_timeline/
************************************/
.timeline-item:before {
  background-color: rgba(255,255,255,.7);
  top: 22px;
  width: 15px;
  height: 15px;
  left: 112px;
}
.timeline-item-content {
  border-left: 20px #f8c678 solid;/*好きな色に*/
}
@media screen and (max-width: 480px){
.timeline>li.timeline-item {
  border-left: 20px #f8c678 solid;/*好きな色に*/
}
.timeline-item-content {
  border-left:initial;
}
.timeline-item:before {
  left: -17.5px;
  top: 57px;
}
}


/************************************
/*スマホのサイドバーメニューを左から右に表示
 * kenjineer0224.com/cocoon-smartphone-header-customization/
************************************/
.sidebar-menu-content {
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  right: auto;
  left: 0;
} 

/************************************
/*スマホ閲覧の時のみサイドバー内容をページから非表示にする
 * sattoga.com/archives/8192/
************************************/
/*480px以下*/
@media screen and (max-width: 480px){
  #sidebar{
    display: none;
  }
}

/************************************
/*グローバルメニューのフォントサイズを変更する
 * ikuzoblog.com/cocoon-globalnavigation
************************************/
#navi .navi-in > .menu-header .item-label{
	font-size: 18px;
}