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

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

/* 2022.6.3 タイトルとアイキャッチ画像が重なっていたので分離 ↓↓↓ */
.site-name-text{
font-size: 38px;
}
/*フィルターの解除*/
.eye-catch img {
filter: none;
-o-filter: none;
-ms-filter: none;
-moz-filter: none;
-webkit-filter: none;
height: auto !important;
opacity: 1;
}

/*タイトルとタグを絶対位置から相対位置にして多少の余白を設ける*/
h1.entry-title,
.date-tags {
  position: relative;
  top: 0;
  left: 0;
  padding: 0.5em;
  margin-right: 0;
}

/*親要素の高さ指定を解除*/
header.article-header.entry-header {
  height: auto;
}

/*デバイス幅834px以下でも同様にする*/
@media (max-width: 834px) {
  header.article-header.entry-header {
    height: auto;
  }
}
/* 2022.6.3 タイトルとアイキャッチ画像が重なっていたので分離 ↑↑↑ */

/* 2022.6.17 固定ページの日付を非表示 */
.post-313 .date-tags {	/* 問い合わせページ */
display: none;
}

/* 2022.9.19 ウィジェット（右側、人気記事・最新記事）のフォントサイズ変更 */
.widget-entry-card-content{
font-size: 13px;
}

/* 2023.01.26 ウィジェット（目次）のフォントサイズ変更 */
/* Sidebar Inline TOC */
#sidebar .toc {
 font-size: 13px;
}

/* 2023.05.03 ウィジェット（目次）にスクロールバーをつける */
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 390px; /* 目次の高さ上限 */
}
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px; /* スクロールバーの横幅 */
}

/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
}

/* 2023.03.16 見出しデザインのカスタマイズ */
/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

/* h2 --------------------- */
.article h2 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.5em 1.0em;
  color: #454545;
}

.article h2:before {
  content: none;
}

.article h2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

/* h3 --------------------- */
.article h3 {
  content: " ";
  padding: 0.5em 1.0em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  font-size: 20px;/*文字の大きさ*/
}

/* 2022.10.21 見出しデザインのカスタマイズ */
.article h4 {
  padding: 0.5em  1.0em;/*文字周りの余白*/
  border-bottom: solid 3px #cce4ff;
  position: relative;
  font-size: 18px;/*文字の大きさ*/
}

.article h4:after {
  position: absolute;
  content: "  ";
  display: block;
  border-bottom: solid 3px #5472cd;
  bottom: -3px;
  width: 20%;
}

/* 2022.11.03 ブログカードのラベルを表示する ↓↓↓　*/
/************************************
****　記事本文　ブログカード　ラベル
************************************/
.bct-related .blogcard-label,/*関連記事*/
.bct-reference .blogcard-label,/*参考記事*/
.bct-reference-link .blogcard-label,/*参考リンク*/
.bct-popular .blogcard-label,/*人気記事*/
.bct-together .blogcard-label,/*あわせて読みたい*/
.bct-detail .blogcard-label,/*詳細はこちら*/
.bct-check .blogcard-label,/*チェック*/
.bct-pickup .blogcard-label,/*ピックアップ*/
.bct-official .blogcard-label,/*公式サイト*/
.bct-dl .blogcard-label{/*ダウンロード*/
display: inline !important;
background-color: #90C31F;
margin-left:1.5em;
}
@media screen and (max-width: 600px){
.blogcard-label{
margin-left:-0.3em!important;
}
}
/* 2022.11.03 ブログカードのラベルを表示する ここまで↑↑↑　*/

/* 2022.12.03 画像の枠線表示クラス */
.wakusen {border: solid 1px #c3c3c3;}

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

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

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

/* 目次 */
/* h2見出しの前 */
.toc-list>li>a::before {
font-family: "Font Awesome 5 Free";
content: "\f058";/* Font Awesomeで変更可能 */
font-weight: 900;
padding-right: 5px;
color: #20B2AA;/* アイコンの色 */
}
/* h3見出しの前 */
.toc-list>li li a::before {
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
padding-right: 5px;
}
.toc-list li a {
font-size: 1.1em;
font-weight: 600;
}
.toc-list>li li a {
font-size: 1em;
font-weight: 500;
}
.toc a:hover {
color: #333;
text-decoration: underline;
}