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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/* 目次カスタマイズ */
.toc {
  display: block !important;
  width: 95%;
  padding: 20px 32px 7px !important;
  margin-bottom: 5% !important;
  background: #f9f9f9 !important;
  border: 0 !important;
  border-top: 5px solid !important;
  border-top-color: #f8c678 !important; /* 任意の色に */
  border-radius: 10px;
  box-shadow: 0 2px 2px rgb(0 0 0 / 20%) !important;
}
@media screen and (min-width: 600px) {
  .toc {
    width: 70%;
    padding: 20px 35px 15px !important;
  }
}

.toc-title {
  margin: 0 20px 20px -10px !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  color: #f8c678 !important; /* 任意の色に */
  background-color: initial;
}

.toc-title::before {
  padding: 14px;
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
  font-weight: 900 !important;
  color: #fff;
  content: "\f03a";
  background-color: #f8c678; /* 任意の色に */
  border-radius: 50%;
}

.toc a {
  display: block;
  padding-top: 0 !important; /* 下の点線との間 */
  padding-bottom: 0.5em; /* 下の点線との間 */
  color: #333;
  border-bottom: dashed 1px silver;
}

.toc ul li {
  position: relative;
  padding: 0 0 0.4em 1.4em;
  font-weight: 700;
  line-height: 1.5;
}

.toc ul li::before {
  position: absolute !important;
  left: -0.3em !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  color: #f8c678; /* 任意の色に */
  content: "\f138";
}

.toc li li {
  padding-top: 0.5em;
  margin-top: 0 !important;
  font-weight: 400;
}

.toc_list li {
  margin-top: -5% !important;
}
@media screen and (min-width: 834px) {
  .toc_list li {
    /* PCでは目次のh2同士の間隔は抑えめに */
    margin-top: -1.8% !important;
  }
}

.sidebar .toc {
  width: initial !important;
  padding-top: initial !important;
  margin-bottom: initial !important;
  background: transparent !important;
  border: initial !important;
  border-radius: initial !important;
  box-shadow: initial !important;
}

.sidebar .toc li li::before {
  color: #fad9a7; /* 任意の色に */
}

/* 引用をスッキリ */
blockquote{
    position:relative;
    border-top:1px solid #7A87B0;
    border-bottom:1px solid #7A87B0;
    padding:10px;
}
blockquote:before{
    position:absolute;
    background-color:#FFFFFF;
    color:#7A87B0;
    font-family:'Font Awesome 5 Free';
    content:'\f10d';
    line-height:1;
    text-align:center;
    top:-20px;
    left:-10px;
    padding:10px;
    font-size:20px;
}
blockquote:after{
    position:absolute;
    right:-10px;
    bottom:-20px;
    background-color:#FFFFFF;
    padding:10px;
    color:#7A87B0;
    font-family:'Font Awesome 5 Free';
    content:'\f10e';
    line-height:1;
    text-align:center;
    font-size:20px;
}
blockquote cite {
    display: block;
    padding-right:30px;
    font-size: 0.8rem;
    text-align: right;
    color: #808080;
}