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

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

/*リンクホバー時のテキストカラー*/
.entry-content a:hover { color: #eec97e; }
/*目次はリンクホバー時のテキストカラーを回避*/
.toc-content a:hover { color: #7f5539; }

/*SNSシェアボタンを表示させる*/
<div class="sns__container">
  <a class="sns__twitter" href="https://twitter.com/share?url=<?php echo get_the_permalink();?>&text=<?php echo get_the_title();?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-twitter-square"></i>
  </a>
  <a class="sns__facebook" href="http://www.facebook.com/share.php?u=<?php echo get_the_permalink(); ?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-facebook-square"></i>
  </a>
  <a class="sns__pocket" href="http://getpocket.com/edit?url=<?php echo get_the_permalink();?>&title=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-get-pocket"></i>
  </a>
  <a class="sns__line" href="https://social-plugins.line.me/lineit/share?url=<?php echo get_the_permalink(); ?>" target="_blank" rel="nofollow noopener">
    <i class="fab fa-line"></i>
  </a>
</div>


/*タグクラウドのカスタマイズ*/
.tagcloud a {
   background: none; /*背景を消す*/
   border: 1px solid #bcb2a4; /*実線の太さと色*/
   border-radius: 20px; /*角の丸み*/
   color: #40210f; /*文字色*/
   padding: 3px 10px; /*要素の内部余白*/
   text-decoration: none; /*文字の装飾なし*/
   font-size: 13px; /*文字サイズ*/
   margin: 2px; /*要素の外部余白*/
   display: flex; /*横並びにする*/
   flex: 1 1 auto; /*余白分の自動伸縮比率*/
   justify-content: space-between; /*左右幅いっぱいに均等に配置する*/
}
.tagcloud a:hover { 
   background: #40210f; /*カーソルを合わせた時の背景色*/
   border: 1px solid #40210f; /*カーソルを合わせた時の線色*/
   color: #fff; /*カーソルを合わせた時の文字色*/
   transition: 0.5s; /*アニメーションの時間*/
}
/*フッターへの反映*/
#footer .tagcloud a:hover { 
background: #40210f;
border: 1px solid #40210f;
color: #fff;
transition: .5s;
}

/*吹き出しのカラー設定*/
.sb-id-12 .speech-balloon {
  background-color: #F3EBE2; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #F3EBE2; /* 吹き出しメイン部分のボーダー */
  color: #555555; /* セリフの文字色 */
}
.sb-id-12 .speech-balloon::before {
  border-right: 12px solid #F3EBE2; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-12 .speech-balloon::after {
  border-right: 12px solid #F3EBE2; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-12 .speech-balloon::before { border-right: 7px solid #F3EBE2; /* スマホでの三角部分の外側 */
  }
  .sb-id-12 .speech-balloon::after { border-right: 7px solid #F3EBE2; /* スマホでの三角部分の内側 */
  }
}

.sb-id-13 .speech-balloon {
  background-color: #F3EBE2; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #F3EBE2; /* 吹き出しメイン部分のボーダー */
  color: #555555; /* セリフの文字色 */
}
.sb-id-13 .speech-balloon::before {
  border-right: 12px solid #F3EBE2; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-13 .speech-balloon::after {
  border-right: 12px solid #F3EBE2; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-13 .speech-balloon::before { border-right: 7px solid #F3EBE2; /* スマホでの三角部分の外側 */
  }

.sb-id-14 .speech-balloon {
  background-color: #F3EBE2; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #F3EBE2; /* 吹き出しメイン部分のボーダー */
  color: #555555; /* セリフの文字色 */
}
.sb-id-14 .speech-balloon::before {
  border-right: 12px solid #F3EBE2; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-14 .speech-balloon::after {
  border-right: 12px solid #F3EBE2; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-14 .speech-balloon::before { border-right: 7px solid #F3EBE2; /* スマホでの三角部分の外側 */
  }

	
	

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

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

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