@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{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 23px;
    font-weight: 700;
    color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content : "\f03a"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.6;
    padding: 0.3em 0 0.1em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #FFC679; /* 色を変える場合はここを変更 */
    font-weight: bold;
}
ol.toc-list > li:before{
	background:none;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}
ol.toc-list > li:before{
	line-height:1.3em;
}

/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
border-left:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
	border-left:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
/* .article h5{
border-bottom:none;
padding: 0;
} */

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}
/* 見出しのカスタマイズ */
.article h2 {
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
  background: #e0f3ff;
  z-index: 1;
  border-radius: 0 10px 10px;
}

.article h2:before {
  content: "";
  position: absolute;
  background: #9de5ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.article h3 {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.6em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #ff6a6a;/*文字色*/
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
  background: #fffff4;
}

.article h3:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1.2em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.2em;/*アイコンの位置*/
  color: #FCCCEA; /*アイコン色*/
}

.article h4 {
  position: relative;
  padding-left: 25px;
}

.article h4:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}

.article h4:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

/*** 目次サイドバーのカスタマイズ ここから ***/

/* サイドバーの目次スクロール */
.toc-widget-box {
  max-height: 50vh; /* 目次の縦幅 ビューポートの高さ50％以内に表示 */
  overflow-y: auto; /* スクロールの方向 */
  margin-bottom: 2em; /* 要素の下外側の余白 */
}

/** AndroidとiPhone用のスクロールバー表示 **/
/* スクロールバー全体 */
.toc-widget-box::-webkit-scrollbar {
  width: 14px; /* スクロールバーの横幅 */
}

/* スクロールバーのハンドル */
.toc-widget-box::-webkit-scrollbar-thumb {
  background: #949495; /* ハンドルの背景色 */
  border-radius: 10px; /* ハンドル角の丸み */
}

/* スクロールバーの背景エリア */
.toc-widget-box::-webkit-scrollbar-track {
  background: #ccc; /* スクロールバーの背景色 */
}

/*** 目次サイドバーのカスタマイズ ここまで ***/

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

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

}

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