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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ——————————————————————
   見出しのデフォルト装飾をリセット
   —————————————————————— */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.article h1 {
   position: relative;
    padding: .3em 0 .2em 1em;
    border-bottom: 3px solid #ff6a00;
    color: #333333;
}

.article h1::before {
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #ff6a00;
    content: '';
}

.article h1::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    background: #ff6a00;
    content: '';
}

.entry-content h2{
  position: relative;
  padding: .6em .7em .6em;  /* ← 下に余白 */
  border-bottom: 3px solid #fdc700 !important;
  color: #5c5c5c;
  background: none !important;
}

.entry-content h2::before,
.entry-content h2::after {
  position: absolute;
  left: 30px;
  bottom: -15px;
  width: 30px;
  height: 15px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.entry-content h2::before {
  background-color: #fdc700;
}

.entry-content h2::after {
  bottom: -11px;
  background-color: #fff;
}

.entry-content h3{
	display: inline-block;
    position: relative;
    margin: calc(3.5em / 2) 0 calc(3.5em / 4) calc(3.5em / 2);
    color: #333333;
    line-height: 1;
}

.entry-content h3::before {
    position: absolute;
    bottom: calc(-3.5em / 4);
    left: calc(-3.5em / 2);
    z-index: -1;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    background: #fdc700;
    content: '';
}

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

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

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

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