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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
    /************************************
    ** グローバルメニュー PC
    ************************************/
     /* ロゴの大きさ・幅に関するもの */
    .header-container-in.hlt-top-menu .logo-header img {
      max-height: 100%;
      height: auto;
      max-width: 180px;
      vertical-align: middle;
      margin: 10px 0;
    }

    #header-container {
      box-shadow: 0 0 10px rgba(30, 30, 30, .1);
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      z-index: 10;
    }
    .site-name-text-link {
      color: #fff;
    }
    .navi {
      background: none;
    }
    .navi-in > ul .sub-menu {
      background: #fff;
      box-shadow: 0 0 10px rgba(30, 30, 30, .1);
    }
    .navi-in > ul li {
      width: auto;
    }
    .navi-in a {
      font-size: 14px; /* ナビ文字大きさ */
      top:8px;
		bottom:0;
      position: relative;
      color: #fff;/* ナビ文字色 */
      padding: 0 20px;
      display: block;
      text-decoration: none;
    }
#navi .navi-in a:hover {
   background:none;
	color:#1C2F38;

}
    .navi-in a:before {
      position: absolute;
      left: 0;
		bottom:10px;
      content: "";
      display: block;
      width: 100%;
      height: 3px;
      background: #95BED2; /* マウスON時の下線色 */
      transform: scale(0, 1);
      transition: 0.4s;
    }
    .navi-in a:hover:before {
      transform: scale(1);
    }
    .navi-in > ul .sub-menu a {
      color: #666; /* サブメニュー文字色 */
      font-size: 12px; /* サブメニュー文字の大きさ */
    }
    .navi-in > ul .sub-menu a:before {
      background: #42d5e7; /* サブメニューマウスON時の下線色 */
    }
    .header-container-in.hlt-top-menu .logo-header {
      max-height: 100%;
    }
    .header-small {
      opacity: 0.9;
    }
    .header-small .header-container-in.hlt-top-menu .logo-header img {
      max-width: 130px;
      margin: 10px 0;
    }
    #container {
      padding-top: 90px;
    }
    [id^="toc"]:target {
      padding-top: 85px;
      margin-top: -85px;
    }

/*検索窓*/
.header-search {
	width: 200px !important;
}
.header-search .search-box {
margin:10px 0 0 auto;
width: 95%;
	}
.header-search input[type="text"] {
  padding: 8px 14px;
  font-size: 14px;
border: 0;
 border-radius:50px;
	outline: none;
}
.header-search .search-submit {
  color: #96B5C5;
}



/*トップ新着・人気・関連記事ウィジェット 投稿日・更新日表示*/
.widget-entry-card-date {
	display: block;
	position: absolute;
    bottom: 0;right: 0;/*右寄せ*/
}

/*固定ページで投稿日・更新日を非表示*/
.page .date-tags {
 display: none;
}

/*目次*/
/* サイドバーの目次のみデザインを変更する */
#sidebar .toc-title {
margin-top: 60px;
}
.toc {
	font-size: 15px;
}
 .toc a {
	font-size: 15px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f4d8";
	color: #96B5C5;
	font-weight: 900;
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 1em;
	color: #708090;
}
.toc-list > li li a::before {
content: "";
width: 5px;
height: 5px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #96B5C5;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}

/* 背景の色を統一 */
.header-container,
.main,
.sidebar,
.footer {
background-color: #f2f7f9;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
/*ヘッダーモバイルロゴ小さく*/

@media screen and (max-width: 1023px){
.logo-menu-button img {
	width: 170px;
    　　max-height: none;
	margin: 2px auto 0;
}
	#container {
	padding-top: 10px;
}
}



/*834px以下*/
@media screen and (max-width: 834px){
	/* 元のロゴ画像を非表示 */

}


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