@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-title {
    font-weight: bold;
	color: #0693cd;
}

/*目次の背景色と枠線を変更*/
.toc {
	background: #f2f7ff;
	border: 5px solid #000000;
}

/* 目次の背景色を変更する */
.toc-title{
  background-color: #8195a2;  /* 背景色を変更する */
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #ffffff;  /* 文字の色を変える */
}

/* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
  font-family: 'Font Awesome 5 Free';  /* Font Awesome 5を使用するために指定 */
  content : "\f03a";  /* Font Awesome 5のアイコン番号 */
  font-size:20px;  /* アイコンの大きさ */
  margin-right:10px;  /* アイコン右の余白 */
  color:#a8bcc8;  /* アイコンの色 */
  background-color:#ffffff;  /* アイコンの背景の色 */
  border-radius: 50%;  /* アイコンの背景を丸くする */
  padding:8px;  /* アイコン背景の余白 */
}

/* 目次のH2見出しのみ太字にする */
.toc-content ol li{
  color: #8195a2;  /* 文字の色 */
  margin:0.5em;  /* 文字の余白 */
}
.toc-list > li{
  font-weight: bold;  /* h2のみ太字にする */
}
.toc-list > li li{
  font-weight: normal;  /* h2以外を標準の太さにする */
}

/* デフォルト目次ナンバーを非表示 */
.article .toc-list > li li {
  list-style: none;
}

/* H3以下の先頭に「・」を表示 */
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #0693cd;
  position: relative;
  margin-bottom: 2px;
 }




/*グローバルメニューの高さを変更*/
#navi .navi-in > ul li{
	height: 80px;
	line-height: 80px;
}

/* 見出し3をカスタマイズ */
.article h3{
  position: relative;
  padding: 0.3em 0.5em;
  background: -webkit-linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  background: linear-gradient(to top, rgb(137, 184, 255), #c5ceff);
  color: #495193;
}

/************************************
** 固定ページのタイトルを中央寄せ
************************************/
.entry-title {
text-align: center;
}




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

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

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