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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.article h2 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

.article h2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.article h3 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
}


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

.article h5 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px black;
}

/* 目次 */
.toc {
 background: #fff; /* 背景色 */
 border: 2px solid #8491c3; /* 枠線 */
 border-radius: 3px;
}
.toc-title {
 background-color: #8491c3; 
  padding: 3px;
	font-size: 1.2rem;
 color: #fff; /* 文字色 */
 font-family: WebLTGothicFont; /* フォント */
 border-radius: 3px;
}
.toc-title:before{ /* タイトル前のアイコン */
 font-family: "Font Awesome 5 Free";
 content: "\f15b";
 margin-right: 5px;
 margin-left: 5px;
}
.toc a{
	color: #6a859c;
}
.toc li {
padding: 3px;
list-style: none;
position: relative;
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px #57697f; /* 点線 */
list-style-type: none important;
}
.toc li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054"; /* 矢印アイコン */
position: absolute;
left : 0em;
color: #8491c3;
}







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

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

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