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

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

/*Hタグ（見出し）の設定　ここから*/

/*カスタマイズH2*/

.article h2 {
  position: relative;
  color: white;
  background: #81d0cb;
  border: none;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

.article h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f24d";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

/*カスタマイズH3*/

.article h3 {
  position: relative;
  padding-left: 25px;
  border: none;
}

.article h3: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 h3:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

/*カスタマイズH4*/

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

/*カスタマイズH5*/

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

/*Hタグ（見出し）の設定　ここまで*/

/*目次の設定　ここから*/

/* 目次h2見出しの前 */
.toc-list>li>a::before {
font-family: "Font Awesome 5 Free";
content: "\f058";/* Font Awesomeで変更可能 */
font-weight: 900;
padding-right: 5px;
color: #77c3df;/* アイコンの色 */
}

/* 目次h3見出しの前 */
.toc-list>li li a::before {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
padding-right: 5px;
}

.toc-list li a {
font-size: 1.1em;
font-weight: 500;
}
.toc-list>li li a {
font-size: 1em;
font-weight: 500;
}
.toc a:hover {
color: #333;
text-decoration: underline;
}

/*目次の設定　ここまで*/

/*Cocoon商品リンク：枠線を細く Amazonここから*/

.amazon-item-box{
margin: 0;
padding: 22px 25px; /*余白調整*/
border: solid 1px #ccc; /*線の太さ*/
}
/*Cocoon商品リンク：枠線を細く Amazonここまで*/

/*Cocoon商品リンク：枠線を細く 楽天ここから*/

.rakuten-item-box{
margin: 0;
padding: 22px 25px; /*余白調整*/
border: solid 1px #ccc; /*線の太さ*/
}

/*Cocoon商品リンク：枠線を細く 楽天ここまで*/

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

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

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