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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none; /* 背景色を削除 */
  border: none;     /* 枠線を削除 */
  border-radius: 0; /* 角丸を削除 */
}

.article h1{
    color: #6d5353;/*文字色*/
    font-size: 20px;/*文字サイズ*/
    padding: 20px;/*文字回りの余白（上下左右）*/
    display: block;
    position: relative;
}
.article h1:before,
.article h1:after {
    content: "";
    display: block;
    position: absolute;
}
.article h1:before {
    bottom: -10px;
    right: 10%;
    width: 5px;/*斜線部の間の幅*/
    height: 50px;/*斜線部の高さ*/
    border-left: 3px solid #6d5353;/*斜線左線（太さ 実線 色）*/
    border-right: 3px solid #6d5353;/*斜線右線（太さ 実線 色）*/
    transform: skewX(-15deg);/*斜線部の傾き*/
}
.article h1:after {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;/*下線の太さ（高さ）*/
    background: #6d5353;/*下線の色*/
}

.article h2 {
    color: #6d5353;/*文字色*/
    font-size: 20px;
    padding: 30px 20px 15px;/*文字回りの余白（上 左右 下）*/
    display: block;
    position: relative;
}
.article h2:before {
    content: '';
    background: #efece0;/*背景色*/
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    position: absolute;
    top: 0px;
    left: 6px;
    z-index: -1;
    transform: rotate(1.5deg);/*背景影部の回転*/
}
.article h2:after {
    content: '';
    background: #fff;/*背景色（白）*/
    border: 3px solid #816930;/*背景白部の囲み線（太さ 実線 色*/
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -5px;
    z-index: -1;
    transform: rotate(-.5deg);/*背景白部の回転*/
}


.article h3 {
    color: #6d5353;/*文字色*/
    font-size: 16px;/*文字サイズ*/
    display: block;
    position: relative;
    padding: 6px 35px;/*文字回りの余白（上下 左右）*/
}
.article h3:before {
    font-family: FontAwesome;
    font-weight: 900;/*星マークの太さ*/
    font-size: 25px;/*星マークのサイズ*/
    color: #cbb276;/*星マークの色*/
    left: 0;
    top: 0;
    content:"\f005";
    position: absolute;
}

/* サイドバー見出し */
.sidebar h2 {
  background: transparent;  /* 背景を透明にする */
}

.sidebar h2 {
    color: #816930;/*文字色*/
    font-size: 20px;/*文字サイズ*/
    padding: 10px;
    display: block;
    outline: 2px solid #816930;/*囲み線（太さ 実線 色）*/
    outline-offset: 0.5em;
    position: relative;
}
.sidebar h2: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: #ff8d00 #fff #816930;/*右上折れ曲がり部の色*/
}


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

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

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