@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){
  /*必要ならばここにコードを書く*/
}

/*****************************
** ■フロント固定ページのタイトルを非表示
*****************************/
.home.page .entry-title{
  display: none;
}

/*****************************
** ■目次カスタマイズ
*****************************/
.toc {
  border: 2px solid #5b8fbf; /*全体の枠線の色*/
  font-size: 15px; /*フォントサイズ*/
  line-height: 1.5; /*行の高さ指定*/
  padding: 0;
  margin-top: 3em; /*目次上の空間*/
  margin-bottom: 1em; /*目次下の空間*/
  min-width:65%; /*目次横幅*/
  border-radius: 6px;/*角丸コーナー*/
  background: #f4f4f4; /*背景カラー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
@media screen and (max-width: 1030px){
  .toc {
    min-width:100%; /*モバイル時の目次横幅*/
  }
}
.toc-title {
  background: #5b8fbf; /*目次タイトル背景カラー*/
  color: #fff; /*目次タイトルフォントカラー*/
  font-size: 14px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
  padding: 6px 16px;
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
}
.toc-title::before {
  font-family: FontAwesome;
  content: '\f0f6'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-weight: 500; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}
.toc-content {
  padding: 6px;
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  background: #f4f4f4; /*選択時の背景カラー*/
  transition: all 0.8s ease; /*ふわっと変化するアニメーション*/
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
  margin-top: 0.4em; /*h2の上側の空間*/
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  border-bottom: 1px solid #5b8fbf; /*h2のアンダーラインの太さとカラー*/
  font-weight: bold;
}
.toc ul li a, .toc ol li a {
  display: block;
  border-bottom: 1px dotted #5b8fbf; /*h3～h6のアンダーラインの太さとカラー*/
  margin-left: 0px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
}


/*****************************
** ■見出しのデザインリセット 
*****************************/
/*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;
}


/*****************************
** ■見出しのデザイン設定 
*****************************/
/* H2 */
.entry-content h2{
color: #1C1C1C; /*文字色*/
font-size: 2.0em; /*文字サイズ*/
background-color: #A9D0F5; /*背景色*/
padding-top:20px; /*文字と上部の間隔*/
padding-left:10px;/*文字と左線の間隔*/
padding-bottom:20px;/*文字と下部の間隔*/
border-left: solid 10px #5b8fbf ; /*左側に実線・色*/
}

/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 1.5em; /* 文字サイズ */
background-color: #A9D0F5;/* 背景色 */
padding: 10px;
border-left: solid 10px #5b8fbf ; /* 左側に実線・色*/
}

/* H4 */
.entry-content h4{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
padding: 10px;
border-top: solid 3px #5b8fbf ;/* 上側に実線・色 */
border-bottom: solid 3px #5b8fbf ;/* 下側に実線・色*/
}

/* H5 */
.entry-content h5{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 10px;	
border-bottom: solid 2px #5b8fbf ;/* 下側に実線・色*/
border-left: solid 7px #5b8fbf ; /* 左側に実線・色*/
}

/* H6 */
.entry-content h6{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 5px;
border-bottom: dotted 3px #5b8fbf ;/* 下側に点線・色*/
border-left: solid 7px #5b8fbf ; /* 左側に実線・色*/
}

/*****************************
** ■グローバルナビメニュー マウスオーバーで左からアンダーライン
*****************************/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #CDDC9E;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
transform-origin: left;/*線を左側から出す*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

 /******************************
 ** ■上部にボーダー追加
 ******************************/
.footer {
  border-top: 1px solid #000;
}

 /******************************
  ** ■フッター内上部の余白を詰める
 ******************************/
.footer-bottom {
  margin-top: 0px; 
}	

/******************************
** ■スマホ表示だとアピールエリアの画像が切れる
******************************/
.widget.widget-content-top.widget_media_image img {
    display: block;
    width: 100%;
}