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

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

/* 見出し2をカスタマイズ */
h2 {
  padding: 0.4em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #f3ebdc !important;/*背景色*/
  border-bottom: solid 3px #361510;/*下線*/
}

/* 見出し2をカスタマイズold
h2 {
  font-size: 24px !important;
  position: relative;
  color: #FFF;
  padding: .8em;
  background: linear-gradient(rgba(89,54,33,.9) 0%, rgba(89,54,33,.85)  50%, rgba(89,54,33,1)  50%) ;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}
*/

/* 見出し5をカスタマイズ */
h5 {
  border-left: 3px solid #361510;/*左線*/
  padding: .3em .4em !important;/*余白*/
  background: rgba(50,50,50,.07);/*背景色*/
  color: #323232;
}

/* サイドバー見出し変更 */
.sidebar h3 {
  background: none !important;/*背景色*/
  position: relative;
  display: inline-block;
  padding: .3em 1em;
  border-top: solid 1px #323232;
  border-bottom: solid 1px #323232;
  color: #323232;
  margin-bottom: 15px;
}
.sidebar h3:before,
.sidebar h3:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 1px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #323232;
}
.sidebar h3:before {
  left: 7px;/*左線*/
}
.sidebar h3:after {
  right: 7px;/*右線*/
}

/* サイドバー固定ページ */
.widget_pages ul li a{
background-color:#f7f7f7;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}

/*×アイコンを移動*/
.menu-close-button {
 padding-top: 15px;
 padding-left: 25px;
 padding-bottom: 30px;
text-align: left;
font-size: 1.3em;
}

.menu-drawer a {
font-size: 0.9em;
line-height: 1.6em;
border-bottom: solid 1px #f3ebdc;
}
.menu-drawer a:hover {
background-color:#ffc0cb;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #f3ebdc;
}

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

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

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