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

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

/*---------------------------------
 　目次
---------------------------------*/
.toc {
	border: 2px solid #f2bf49!important;/*外枠*/
	border-radius: 10px;/*角丸*/
}
/* 数字 */
.toc li{
  	color:#7a9900; /* 数字カラー */
}
/* 目次タイトル */
.toc-title {
	text-align: center; /*目次タイトル中央寄せ*/
	border-radius: 10px;/*角丸*/
	border: 2px solid #f9d957; /*外枠*/
}
/* 文字タイトルホバー時 */
.toc-title:hover {
  	background: #FAEEBE; /*目次タイトル背景カラー*/
}
/*目次タイトルアイコン設定*/
.toc-title::before {
	position: relative;
	margin-right:8px;
}

/* H2 */
.toc ul.toc-list>li>a,
.toc ol.toc-list>li>a {
	font-size: 110%;
	padding: 0px 6px;
	border-bottom: 3px solid #FFC778; /*h2のアンダーラインの太さとカラー*/
}

/* H3～H6 */
.toc ul li a,
.toc ol li a {
     border-bottom: 1px dashed #666; /*h3以下のアンダーラインの太さとカラー*/
}

/*---------------------------------
 　サイドバー追尾目次
---------------------------------*/
.sidebar-scroll{
  top:150px !important;/* 下にさげる */
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);/* 全体影 */
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
/* 数字 */
.sidebar .toc li{
  	color:#7a9900; /* 数字カラー */
}
/* サイドバー追尾目次 */
.sidebar .toc{
	padding: 0px 0px 0px 0px; /* 指定しないと左右に無駄なスペースができる */
	width:100%;
	border-radius: 5px;
}
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	padding: 0px 0px 0px 0.5em; /* 指定しないと左側が詰まって見づらいため少しスペースを */
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 60vh; /* 目次の高さ上限 ウィンドウの縦幅60%*/
	background: #fff;
}
/* 現在位置 */
#toc-2 li.current {
	padding: 6px 6px 6px;
	background-color: #ffdd99; /* ハイライト色 */
	border: 2px solid #f9d957; /*外枠*/
	border-radius: 5px;/*角丸*/
}
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px;/* スクロールできるツマミ部分 */
}
/* スクロールバー */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
	border-radius: 5px;
}

/*---------------------------------
 　見出し
---------------------------------*/
/* H3 */
.article h3{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
  	color: #494949;/*文字色*/
  	background: transparent;/*背景透明に*/
  	border-left: solid 10px #FFC778;/*左線*/	
	border-bottom: solid 3px #FFC778;/*下線*/
}

/* H4 */
.article h4{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
  	color: #494949;/*文字色*/
  	background: transparent;/*背景透明に*/
	border-bottom: solid 3px #ffe666;/*下線*/
}

/* H5 */
.article h5{
	padding: 0.25em 0.5em;/*上下 左右の余白*/
  	color: #494949;/*文字色*/
  	background: transparent;/*背景透明に*/
	border-bottom: dashed 2px #ffe666;/*下線*/
}

/*---------------------------------
 　コメント
---------------------------------*/
/*コメントの注釈を非表示に（「メールアドレスが公開されることはありません。」）*/
.comment-form-email,
.comment-form-url,
.comment-notes{
	display:none; 
}

/*コメント送信ボタン*/
.comment-respond #submit {
  display: inline-block;
  background-color: #008000;
  color: #FFFFFF;
  padding: 5px 5px;
  border-radius: 5px;
  font-size: 1.2em;
}

/*コメントの内容の余分なスペースをなくす*/
.comment-content p{
	margin: unset;
}

/*---------------------------------
 　トップ　キャッチフレーズ
---------------------------------*/
.tagline{
	margin-bottom: -15px;
	font-size: 150%;
	font-weight: bold; 
    text-shadow: 2px 2px #fff, 5px 5px rgba(0, 0, 0, 0.4);
}

/*---------------------------------
　固定ページの日付を非表示にする
--------------------------------*/
.post-61 .date-tags,
.post-1978 .date-tags,
.post-414 .date-tags {
  display: none;
}

/*---------------------------------
　トップへ戻るボタン
---------------------------------*/
/*位置*/
.go-to-top {
  right: 10px; /*右から*/
  bottom: 140px; /*下から*/
}

/*ボタン*/
.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 55px;
  height: 55px;
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #333; /*アイコンフォントの色*/
  background-color: #f9d957; /*背景色*/
}

/*---------------------------------
　アドセンスラベルの文字のカスタマイズ（スポンサーリンク）
---------------------------------*/
.ad-area .ad-label {
  font-size: 80% !important;
}

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

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

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