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

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

/*サイトタイトル*/
.site-name-text {
   font-size: 50px;
}

/*記事ホバー時の背景色設定*/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
  background-color: #CCFFCC; /*背景色*/
  transition: all 0.8s ease; /*アニメーション*/
  color: #333; /*フォントカラー*/
}
/*見出しリセット*/
/* H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

/*見出し1*/
.article h1 {
  position: relative;
  padding: 25px 0.75em 0px;
  border-bottom: solid 3px black;
}
/*見出し2*/
main h2.wp-block-heading {
    color: #000;/*文字色（黒）*/
    background-color: #fff;/*背景色（白）*/
    font-size: 20px;/*文字サイズ*/
    padding: 20px 30px;/*文字回りの余白（上下 左右）*/
    display: block;
    border: 1px solid #000;/*囲み線（太さ 実線 色）*/
    position: relative;
}
main h2.wp-block-heading:before,
main h2.wp-block-heading:after {
    content: "";
    display: block;
    position: absolute;
    width: 20px;/*左右四角の幅*/
    height: 20px;/*左右四角の高さ*/
    border: 1px solid #000;/*囲み線（太さ 実線 色）*/
}
main h2.wp-block-heading:before {
    left: -10px;
    top: -10px;
}
main h2.wp-block-heading:after {
    right: -10px;
    bottom: -10px;
}

/*見出し3*/
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;/*背景色（黒）*/
}


/*見出し4*/
main h4.wp-block-heading {
    color: #000;
    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;
}

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

.side-widget, .widget-title {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
  text-align: center;
}
.side-widget:before,.widget-title:before, .side-widget:after, .widget-title:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
.side-widget:before, .widget-title:before {
  left: 7px;
}
.side-widget:after, .widget-title:after {
  right: 7px;
}





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

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

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