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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 見出しカスタマイズ (リセット用コード)*/
/* H2 */
.article h2{
background:none;
padding: 0;
}
 
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
background:none;
padding: 0;
}
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
background:none;
padding: 0;
}

.article h2 {
  background-color: #bf2f2f; /* 背景色 */
  padding: .7em 1em; /* 余白 */
  color: #fff; /* 文字色 */
  box-shadow: 5px 5px 5px #ddd; /* 影 */
}
.article h3 {
  position: relative;
  padding: .7em 1em; /* 余白 */
  text-align: center;
  color: #333; /* 文字色 */
}

.article h3 ::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px; /* 線の幅 */
  background: #bf2f2f; /* 線の色 */
}
article. h4 {
  position: relative;
  text-align: center;
  color: #333; /* 文字色 */
  padding: 1em 0; /* 余白 */
}

article. h4::before {
  content: "";
  position: absolute;
  border-bottom: 10px dotted #bf2f2f; /* 点の高さ・種類・色 */
  width: 50px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* 目次の背景色を変更する */
.toc-title{
  background-color: #bf2f2f;  /* 背景色を変更する */
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #ffffff;  /* 文字の色を変える */
}
/* 目次の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以外を標準の太さにする */
}

/* H2見出しの疑似要素をリセット*/
entry-content h2 > span::before {
    content: none !important;
    counter-increment: none;
}

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

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

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