@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-card-title {
font-size: 14px;
color:#564640;/*タイトルの色*/
}

.entry-card-wrap{
	font-family:Noto Sans JP;
}

/************************************
** SNS ボタンの色をまとめて変更する
************************************/
/*ボタンカラーが「モノクロ」の場合*/
.bc-monochrome[class*="sns-"] a[class*="-button"] {
	background-color: #564640; /*背景の色*/
	color: #fff; /*アイコン・キャプション等の色 ※「#fff」は「#ffffff」の省略形*/
}

/************************************
** SNSシェアボタン&フォローボタン変更
************************************/
/*SNSボタンをアイコンのみへ変更*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*ボタンを一列へ変更*/
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}

/*ボタンを丸く変更*/
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 8px; /*ボタン同士の間隔*/
}

/*丸型ボタン横幅&高さ変更*/
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*丸型ボタン影つき変更*/
.sns-share-buttons a {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
	}

/*ボタンを一列へ変更*/
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}

/*ボタンを丸く変更*/
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}

/*丸型ボタン横幅&高さ変更*/
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*丸型ボタン影つき変更*/
.sns-follow-buttons a {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 10); /*影*/
	}

/************************************
** 目次変更
************************************/
.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #ccb1b7 solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #fff;
  color: #564640;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #fff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #564640;
  margin-left: -10px;
}
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #ccb1b7;
  position: relative;
  margin-bottom: 2px;
}
.article .toc-list > li li {
  list-style: none;
}

/************************************
** サイドバーアイコン追加
************************************/
#sidebar ul li a:before{
font-family: "Font Awesome 5 Free";
content: "◌"; /*アイコンフォント*/
font-weight: 900;
color:#564640; /*アイコンフォントの色*/
padding-right:5px;
font-size:18px;
list-style:none;
}

/************************************
** サイドバーボーダー追加
************************************/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

/************************************
 * カレントメニュー*
************************************/
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
border-bottom: 3px solid #ccb1b7; /*下線色*/
background: #fff; /*背景色*/
}
.menu-header .current-menu-item .item-label,
.menu-header .current-post-item .item-label,
.menu-header .current-menu-ancestor .item-label,
.menu-header .current-post-ancestor .item-label,
.menu-header .menu-item .item-label:hover {
color:#ccb1b7; /*文字色*/
}

/************************************
** グローバルメニュー枠
************************************/
#navi .navi-in > ul > li{
  border-left: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #eee;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
} 

.item-label{
	border-bottom:solid 2px #fafafb;}

/************************************
** マーカーの色
************************************/
.marker-under { /*黄色アンダーラインマーカー*/
 background: linear-gradient(transparent 70%, #DAD0C2 70%);
}
.marker-under-blue { /*青色アンダーラインマーカー*/
 background: linear-gradient(transparent 80%, #cfe6d7 80%);
}



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

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

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