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

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


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

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

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

/*見出し*/
.article h2 {
  font-size: 20px !important;/*文字のサイズ*/
  border-left: 3px solid #7B86C6;/*左線*/
  padding: .5em .7em;/*余白*/
  background: rgba(123,134,198,.07);/*背景色*/
  color: #323232;
  margin-bottom: 15px;
  border-top: none;
	/*必要ならばここにコードを書く*/
}
/*記事タイトル*/
h1.entry-title {
  color: #444;/*文字色*/
  font-size: 2.8rem;
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 8px #61045F; /*上線*/
  border-bottom: solid 8px #61045F;/*下線*/
}
/* 見出し */
.article h1 {
	background-color: transparent;
	padding: 0;
	font-size: 2.6rem;
	text-indent: .5em;
}
.single .entry-title {
text-align: center;
}

/***マウスオーバー時　下線が引かれる（アニメーション）****/
/*メインメニュー*/
.menu-header .menu-item{
  text-decoration: none;
  color: #5bc8ac;
}
.item-label{
  position: relative;
  z-index: 1;
}
.item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0%;/*初期状態・下線非表示*/
  height: 2px;/*下線の高さ*/
  background: #808080;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.menu-header .menu-item:hover .item-label:after{
 width: 100%;/*hover時に表示*/
}

/*サブメニュー*/
.sub-menu .item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0% !important;/*初期状態・下線非表示*/
  height: 2px;/*下線の太さ*/
  background: #808080;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.sub-menu .menu-item:hover .item-label:after{
  width:80% !important;/*hover時に表示*/
  margin-left:-10px
}
/*マウスオーバー時 背景色が変わる*/
#navi .navi-in a:hover{
	background: #f5f5f5;
	transition: 0.8s ;
}

/*目次CSS*/
/*サイドバー文字変更*/
#ez-toc-widget-container .ez-toc-list a{
   color: #000000;

/* 目次枠線の太さ・角度・上下余白を調整 */
#ez-toc-container{
  border-width: 2px;
  border-radius:0; 	
  margin:30px 0;
}

/* 目次タイトルの背景色と余白調整 */	
#ez-toc-container .ez-toc-title-container, #ez-toc-container{
  background: #3d3d3d;
  margin:0;
  padding: 0;
}
/* 目次タイトルの余白とカラー */	
div#ez-toc-container .ez-toc-title {
  display:block;
  line-height:3;
  padding-left:3em;
  color:#fff!important;
}

/* 目次内の上下余白調整 */	
#ez-toc-container .ez-toc-list{
  margin:10px 0;
}

/* 見出しの下線 */	
#ez-toc-container .ez-toc-list li{
  display: block;	
  border-bottom:1px dashed #3d3d3d;				
}
#ez-toc-container .ez-toc-list li:last-child {
  border:0;
}

/* 目次開閉ボタン位置調整 */
.ez-toc-title-toggle{
  position:absolute;
  top:0;	
  left:-2%;	
}

/* 目次開閉ボタンデザイン */
#ez-toc-container .ez-toc-js-icon-con {
  border:none;
  background:#fff;
  border-radius:0;
  width:33px;
}

/* 目次開閉ボタン下にテキスト挿入 */
#ez-toc-container .ez-toc-title-toggle:after{
  position:absolute;
  content:"閉じる";
  top:2.5em;
  left:2em;	
  font-size:12px;	
  color:#fff;
  white-space: nowrap;
}

/* スマホ向けのサイズと位置調整 */
@media(max-width:500px) {
/* 目次タイトル */
div#ez-toc-container .ez-toc-title {
  font-size:15px;		 
  text-align:center;
  padding-left:initial;
  padding:5px 0;
}
/* 開閉ボタンの位置 */
#ez-toc-container .ez-toc-title-toggle{
  left:-7%;	
}}