@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){
  /*必要ならばここにコードを書く*/
}



/***********************************
ここから以下は自分で設定したもの
************************************/


/*画像のキャプションを中央寄せ
----------------------------------------------------*/
.wp-block-image figcaption,
.blocks-gallery-caption  {
  color: #555d66;
  /*text-align: center;*/
  font-size: 13px;
}




/***********************************
見出し
************************************/

/*記事タイトル
----------------------------------------------------*/
/*反映されない場合はカスタマイズ→各テキストとhタグ→記事タイトル→ボーダー色をクリアに変更する*/
.entry-title{
    border-bottom: 2px dotted #CBDA10;
}




/*記事内の見出し
----------------------------------------------------*/
.entry-content h2{
    border-color: #CBDA10;
    border-width: 1px 0 2px 0;
    border-style: solid;
    background: #e5ec87;
}



.entry-content h3{
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #eee;
  border-left-color: #e5ec87;
}

.entry-content h3::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #CBDA10;
}



.entry-content h4{
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #eee;
}

.entry-content h4::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #CBDA10;
  border-radius: 4px;
}



/*前回の記事
----------------------------------------------------*/

.prev{
 border:solid 3px #CBDA10;
 padding: 0 5%;
 position: relative;

}


.prev p:first-child{
  /*margin-top: -5%; これは残す*/
  /* margin-left: -0.3%; これは残す*/
  position: absolute;
  top: 6%;
  right: 0;
  left: -0.3%;

}

.prev p:nth-child(2){
 margin-top:10%;

}

.card_p{
 background: #CBDA10;
 padding: 1.5% 2%;

}



/*参考
----------------------------------------------------*/

.reference{
 border: solid 3px #CBDA10;
 padding: 0 3%;
 border-radius: 20px;

}


.reference p{
 margin-top: -5%;

}


.reference i{
 border: solid 3px #CBDA10;
 background: #CBDA10;
 padding: 3%;
 border-radius: 20px;
 letter-spacing: 0.1em;

}


.reference a{
 display:block;
 margin:3% 0 0 3%; 

}



/*あわせて読みたい
----------------------------------------------------*/

.prev{
 border:solid 3px #CBDA10;
 padding: 0 5%;
 position: relative;

}


.prev p:first-child{
  /*margin-top: -5%; これは残す*/
  /*margin-left: -0.3%; これは残す*/
  position: absolute;
  /*top: 5%;*/
  right: 0;
  left: -0.3%;

}

.prev p:nth-child(2){
 margin-top:10%;

}


.read-tog{
 border:solid 3px #CBDA10;
 padding: 5%;
 position: relative;

}

.read-tog p:first-child{
  /*margin-top: -5%; これは残す*/
  /* margin-left: -0.3%; これは残す*/
 position: absolute;
 top: -35px;
 right: 0;
 left: -0.4%;

}

.read-tog_p{
 background: 3px #CBDA10;
 padding: 1.5% 2%;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;

}

.read-tog p:last-child{
 margin-bottom:0;

}



/*記事内の枠
----------------------------------------------------*/

.s_box{
 border:dotted 3px #CBDA10;
 padding: 3%;
 border-radius: 20px;

}