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

/************************************
** 子テーマ用のスタイルを書く

/* 見出しカスタマイズ */

/* H2 */

.article h2{

border-top:none;

border-bottom:none;

border-left:none;

border-right:none;

padding: 0;

}

/* H3 */

.article h3{

border-top:none;

border-bottom:none;

border-left:none;

border-right:none;

padding: 0;

}

/* H4 */

.article h4{

border-top:none;

border-bottom:none;

padding: 0;

}

/* H5 */

.article h5{

border-bottom:none;

padding: 0;

}

/* H6 */

.article h6{

border-bottom:none;

padding: 0;

}

/*H2見出し*/
main h2.wp-block-heading {
    color: #FFF;/*文字色（黒）*/
    font-size: 20px;/*文字サイズ*/
    padding: 20px 30px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
}
main h2.wp-block-heading:before,
main h2.wp-block-heading:after {
    content:'';
    width: 10px;/*左右枠の幅*/
    height: calc(100% - 6px);
    position: absolute;
    top: 0;
}

/*H3見出し*/
main h3.wp-block-heading {
    color: #000;/*文字色（黒）*/
    font-size: 18px;/*文字サイズ*/
    padding: 10px 20px 10px 30px;/*文字回りの余白（上 右 下 左）*/
    display: block;
    position: relative;
}
main h3.wp-block-heading:before,
main h3.wp-block-heading:after {
    content: "";
    display: block;
    position: absolute;
}
main h3.wp-block-heading:before {
    bottom: -5px;
    left: 1px;
    width: 5px;/*左下線の間の幅*/
    height: 20px;/*左下線の高さ*/
    border-left: 2px solid #000;/*左下左線（太さ 実線 色）*/
    border-right: 2px solid #000;/*左下右線（太さ 実線 色）*/
    transform: skewX(-15deg);/*左下線の傾き*/
}
main h3.wp-block-heading:after {
    left: 15px;
    bottom: 0;
    width: calc(100% - 8px);
    height: 2px;/*下線の太さ（高さ）*/
    background: #000;/*背景色（黒）*/
}
/*H4見出し*/
main h4.wp-block-heading {
    color: #000;/*文字色（黒）*/
    font-size: 16px;/*文字サイズ*/
    display: block;
    position: relative;
    padding: 6px 30px;/*文字回りの余白（上下 左右）*/
}
main h4.wp-block-heading:before {
    font-family: FontAwesome;
    font-weight: 900;/*矢印の太さ*/
    font-size: 25px;/*矢印のサイズ*/
    color: #000;/*矢印の色（黒）*/
    left: 0;
    top: 0;
    content:"\f054";
    position: absolute;
}


************************************/
/*必要ならばここにコードを書く*/

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

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

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