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


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

/* 見出しh4の変更 */
.article h4 {
border: none;
position: relative;
color: #000;/*文字色*/
margin: 0 0 1.5em;
padding: 0.5em;
border-bottom: 2px solid ;/*下線*/
background:  #fff;/*背景色*/
font-size:20px;
}




/* 見出しh3の変更 */
.article h3 {
border: none;
color: #000;
padding: 0.5em;/*文字周りの余白*/
background: #fff;/*背景色*/
border-left: solid 6px #18b2f9;/*左線（実線 太さ 色）*/
font-size:20px;
}

/* 見出しh2の変更 */
.article h2{
border: none;
position: relative;
color: #000;/*文字色*/
margin: 0 0 1.5em;
padding: 0.5em;
border-bottom: 3px solid #18b2f9;/*下線*/
background: #fff;
font-size:24px;
}


/* 見出しh2の変更 */
.article h2{
border: none;
position: relative;
color: #000;/*文字色*/
margin: 0 0 1.5em;
padding: 0.5em;
border-bottom: 3px solid #18b2f9;/*下線*/
background: #fff;
font-size:24px;
}





/* メニューバー背景の高さ */
.navi-in>ul li {
height: 40px;
line-height: 40px;
}


/* 目次 */
/* h2見出しの前 */
.toc-list>li>a::before {
font-family: "Font Awesome 5 Free";
content: "\f105";/* Font Awesomeで変更可能 */
font-weight: 900;
padding-right: 5px;
color: #000000;/* アイコンの色 */
}


/* h2のみ太文字に */
#main .entry-content .toc .toc-content .toc-list li {
font-weight: 700;
font-size:16px;
}

/* h3以降の文字サイズを普通に */
#main .entry-content .toc .toc-content .toc-list li li {
font-weight: normal;
font-size:14px;
}


/* コンテンツ下部幅*/
.content-top, .content-bottom {
margin: 1em 1em;
}


/* サイドメニュー枠*/
.widget_nav_menu ul li a{
background: #18b2f9;
color: #fff;
border-color: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}


/* サイドメニュー*/
.widget_nav_menu ul li ul{
padding-left: 0;
}


/* サイドサブメニュー*/
.widget_nav_menu li li a{
background: #fff;
color: #000;
}

/* サイドメニューアイコン*/
.widget_nav_menu ul li a:before{
color: #fff;
font-family: "Font Awesome 5 Free";
content: "\f138";/* Font Awesomeで変更可能 */
font-weight: 900;
font-size: 13px;
padding-right:10px;
padding-left:10px;
}

/* サイドサブメニューアイコン*/
.widget_nav_menu li li a:before{
color: #000000;
font-family: "Font Awesome 5 Free";
content: "\f054";/* Font Awesomeで変更可能 */
font-weight: 900;
font-size: 10px;
padding-right:10px;
padding-left:10px;
}

/* メニューバーフォント*/
.menu-drawer li a{
border-bottom: 1px solid #ccc;
padding: 12px 15px;
}


/* メニューバーフォント*/
.menu-drawer li a:after {
color: #000000;
font-family: "Font Awesome 5 Free";
content: "\f054";/* Font Awesomeで変更可能 */
right: 0;
font-weight: 900;
margin-right: 30px;
margin-top: 3px;
font-size: 10px;
position: absolute;
}


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

/*834px以下*/
@media screen and (max-width: 834px){
/* 見出しh3の変更 */
.article h3{
font-size:17px;
}

/* 見出しh2の変更 */
.article h2{
	font-size:20px;
}
	
/*目次スマホ用*/
.toc {
  margin: 10px 5px;
}
.toc-list > li a {
  font-size:15px;
}
.toc-list > li li a {
  margin-left: -3px;
 font-size:13px;
}
.toc-list > li li ::before {
  margin-left:-5px;
}
}

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


/*モバイルヘッダー色*/
.mobile-header-menu-buttons.mobile-menu-buttons .menu-button {
  color: #18b2f9;
  background-color: #fff;
}