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

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

/*固定ページの日付非表示*/
.post-314 .date-tags,
.post-193 .date-tags,
.post-75 .date-tags,
.post-13 .date-tags,
.post-91 .date-tags,
.post-2 .date-tags {
display: none;
}

/* 見出しのデザインリセット */
/*スタイルリセット用*/
main h2.wp-block-heading,
main h3.wp-block-heading,
main h4.wp-block-heading {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    font-weight: bold;
}
main h2.wp-block-heading:before,
main h3.wp-block-heading:before,
main h4.wp-block-heading:before,
main h2.wp-block-heading:after,
main h3.wp-block-heading:after,
main h4.wp-block-heading:after {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    margin: initial;
    content: initial;
    position: initial;
}

/*H2見出し*/
main h2.wp-block-heading {
    color: #6f4e4e;/*文字色*/
    font-size: 20px;/*文字サイズ*/
    padding: 10px;
    display: block;
    outline: 2px solid #ff9999;/*囲み線（太さ 実線 色）*/
    outline-offset: 0.5em;
    position: relative;
}
main h2.wp-block-heading::after {
    content: '';
    position: absolute;
    right: calc(-.5em - 4.5px);
    top: calc(-.5em - 4.5px);
    border-width: 0 20px 20px 0;/*右上折れ曲がり部のサイズ*/
    border-style: solid;
    border-color: #ff9999 #fff #ff9999;/*右上折れ曲がり部の色*/
}
/*H3見出し*/
main h3.wp-block-heading {
    color: #6f4e4e;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 15px 10px;/*文字回りの余白（上下 左右）*/
    display: block;
    font-weight: bold;
    border-bottom: 6px solid #e3e3e3;/*下線右側（太さ 実線 色）*/
    position: relative;
}
main h3.wp-block-heading:before {
    content: '';
    background-color: #ff9999;/*下線左側の色*/
    width: 40px;/*下線左側の幅*/
    height: 6px;/*下線左側の太さ（高さ）*/
    position: absolute;
    bottom: -6px;
    left: 0;
}
/* H4見出し（矢印アイコン付き） */
main h4.wp-block-heading{
  color:#ff9999;
  font-size:16px;
  display:block;
  position:relative;
  padding:10px 35px;
}

main h4.wp-block-heading::before{
  content:"\f061";             /* →（arrow-right）。円付きにしたいなら \f0a9 */
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-style:normal;
  display:inline-block;
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  line-height:1;
  font-size:20px;
  color:#ff9999; 
}


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

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

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