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

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

.pagination-next{
    display: none;
}


/************************************
** 記事内目次
************************************/
.toc {
  display: block !important;
  width: 95%;
  padding: 20px 32px 7px !important;
  margin-bottom: 5% !important;
  background: #fdfdfd !important;
  border: 0 !important;
  border-top: 3px solid !important;
  border-top-color: #f5d76e !important; /* 任意の色に */
  border-radius: 10px;
  box-shadow: 0 2px 2px rgb(0 0 0 / 20%) !important;
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media screen and (min-width: 600px) {
  .toc {
    width: 70%;
    padding: 20px 35px 15px !important;
  }
}

.toc-title {
  margin: 0 20px 20px -10px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #747474 !important; /* 任意の色に */
  background-color: initial;
}



.toc a {
  display: block;
  padding-top: 0 !important; /* 下の点線との間 */
  padding-bottom: 0.5em; /* 下の点線との間 */
  color: #747474;
  border-bottom: dashed 1px silver;
}

.toc ul li {
  position: relative;
  padding: 0 0 0.4em 1.4em;
  font-weight: 700;
  line-height: 1.5;
}

.toc ul li::before {
  position: absolute !important;
  left: -0.3em !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  color: #a0d3e8; /* 任意の色に */
  content: "\f138";
}

.toc li li {
  padding-top: 0.5em;
  margin-top: 0 !important;
  font-weight: 400;
}

.toc_list li {
  margin-top: -5% !important;
}
@media screen and (min-width: 834px) {
  .toc_list li {
    /* PCでは目次のh2同士の間隔は抑えめに */
    margin-top: -1.8% !important;
  }
}

/************************************
** サイドバー目次
************************************/
.sidebar .toc {
  width: initial !important;
  padding-top: initial !important;
  margin-bottom: initial !important;
  background: transparent !important;
  border: initial !important;
  border-radius: initial !important;
  box-shadow: initial !important;
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
	box-shadow: 0 2px 2px rgb(0 0 0 / 20%) !important;
}

.sidebar .toc li li::before {
  color: #a0d3e8; /* 任意の色に */
}

.toc li .current {/*現在位置*/
/*color: #333;文字色*/
padding: 6px 10px 6px 6px;
color: #f6a623;/*背景色*/
}
	


/************************************
** ●見出しカスタマイズ(h1-6)
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
  padding: 0;
  margin: 0;
  font-size: medium;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position:relative;
	background:transparent;
	color: #424153;
}
/*H1見出し*/
.article h1{ /*見出し１（タイトル）カスタマイズ*/
  position: relative;
  word-break: break-all; /*表示範囲に合わせて改行*/
 font-size: 28px;/*文字サイズ*/
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    padding: 20px 0px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
}	
	
	
	
/*H2見出し*/
	main h2.wp-block-heading {  
		border-top:transparent;
	border-bottom:transparent;
	font-size: 25px;/*文字サイズ*/
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    padding: 20px 5px 5px 30px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
		margin-bottom: 30px;
}

main h2.wp-block-heading:before,
main h2.wp-block-heading:after {
    content: "";
    display: block;
    position: absolute;
}
main h2.wp-block-heading:before {
    bottom: -5px;
    left: 1px;
    width: 5px;/*左下線の間の幅*/
    height: 50px;/*左下線の高さ*/
    border-left: 2px solid #f5d76e;/*左下左線（太さ 実線 色）*/
    border-right: 2px solid #f5d76e;/*左下右線（太さ 実線 色）*/
    transform: skewX(-15deg);/*左下線の傾き*/
}
main h2.wp-block-heading:after {
    left: 15px;
    bottom: 0;
    width: calc(100% - 8px);
    height: 2px;/*下線の太さ（高さ）*/
    background: #a0d3e8;/*背景色*/
}

/*H3見出し*/
main h3.wp-block-heading {
	border-top:transparent;
	border-bottom:transparent;
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    font-size: 18px;/*文字サイズ*/
    padding: 10px 20px 10px 30px;/*文字回りの余白（上 右 下 左）*/
    display: block;
    position: relative;
			margin-bottom: 15px;
}

main h3.wp-block-heading:after {
    content: '';
    width: 20px;/*左右の枠線の幅*/
    height: 25px;/*左右の枠線の高さ*/
    position: absolute;

}
main h3.wp-block-heading:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;/*チェックマークの太さ*/
    font-size: 22px;/*チェックマークのサイズ*/
    color: #a0d3e8;/*チェックマークの色*/
    left: 0;
    top: 5;
    content:"\f7e4";
    position: absolute;
}
main h3.wp-block-heading:after {
    border-right: 2px solid #f5d76e;/*右枠右線（太さ 実線 色）*/
    border-bottom: 2px solid #f5d76e;/*右枠下線（太さ 実線 色）*/
    bottom: 0;
    right: 0;
}

/*H4見出し*/
main h4.wp-block-heading {
	border-top:transparent;
	border-bottom:transparent;
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    font-size: 16px;/*文字サイズ*/
    display: block;
    position: relative;
    padding: 6px 30px;/*文字回りの余白（上下 左右）*/
}
main h4.wp-block-heading:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;/*矢印の太さ*/
    font-size: 22px;/*矢印のサイズ*/
    color: #f18d9e;/*矢印の色*/
    left: 0;
    top: 5;
    content:"\f753";
    position: absolute;
}

/*ウィジェット部分見出し装飾とフォント字間*/
.widget h3,
.related-entry-heading,
.comment-title{

	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
	color: #424153;
	letter-spacing:0.2em;
}
div.sidebar {
	padding: 20px;
}

.sidebar h3 {
	background:transparent;
	 /*Cocoon親テーマCSSリセットのため */
	padding: 8px 0px;
	border-bottom: 2px #f1b341 dotted;  /*ドット下線追加 */
}
	
.sidebar h3:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100px;
  height: inherit;
  border-bottom: 3px solid #e1e6e9;
}

	


/************************************
** ウィジェット記事タイトル部分
************************************/
.widget-entry-card {
font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
font-size: 15px;
line-height: 1.5em;
font-weight: normal;
}

/*関連記事部分*/
/*メインタイトル*/
.related-entry-heading {
	background:transparent;
	border-bottom:2px dotted #a0d3e8;
  font-size: 15pt;
  text-align:center;
  font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
		letter-spacing: 0.2em;
	    display: block;
    position: relative;
}

/*記事タイトル*/
.related-entry-card-title {
  font-weight: normal;
  font-size: 15px !important;
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;

}

/*ページネーション*/
/*---------------------------------
「次のページ」のカスタマイズ 2
--------------------------------*/
.pagination-next-link {
  background-color: rgba( 160, 211, 232, 1.0 ); /* 背景色 */
  font-weight:bold;
  color: #ffffff; /* 文字の色 */
  border: 2px solid #a0d3e8; /* 枠線の太さ、色 */
  border-radius: 30px;
}

.pagination-next-link:hover {
  background-color: rgba( 160, 211, 232, 0.8 ); /* ホバー時の背景色 */
  color: #ffffff; /* ホバー時の文字の色 */
  border: 2px solid #a0d3e8; /* ホバー時の枠線の太さ、色 */
}


/*---------------------------------
数字の部分のカスタマイズ 2
--------------------------------*/
.page-numbers {
  color: #17ade8; /* 数字の色 */
  border: 1px solid #a0d3e8; /* 枠線の太さ、色 */
}

.pagination .current {
  background-color: #a0d3e8; /* 現在のページの背景色 */
  color: #ffffff; /* 現在のページの文字色 */
}

.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: rgba( 160, 211, 232, 0.5 ); /* ホバー時の背景色 */
  color: #465d66; /* ホバー時の文字の色 */
}


/* フッター見出しデザイン */
.footer h3 {
	font-family: "Muli", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
font-size:20px;
line-height: 1.5em;
font-weight: normal;
  text-align: center; /* テキストの位置を真ん中にする */
  margin: 0px 0px 10px 0px; /* 周囲の余白 */
  border-bottom: dashed 2px #f1b341; /* 下部に2pxの波線を表示する */

}

	/*ロゴ横の検索ボックス*/
.header-in {
	position: relative;
}

.header-in .search-box {
		width: 25%;
		margin-top: -2%;
		margin-left: auto;
		margin-right: auto;
}

.header-in input[type="text"]{
	padding: 8px 14px 8px 20px;
	font-size: 12px;
	border-radius: 16px 16px 16px 16px / 50% 50% 50% 50%;
}


.search-box .fa-search {
	display: block;
	margin-top: 16px;
}

/************************************
** 「次のページ」ページネーション
************************************/
.pagination-next-link {
	margin: 4em auto 0;
	padding: 8px 0;
	border: none;
	border-radius: 4px;
	background-color: #8b8aa3;
	color: #fff;
	font-size: 0.938em;
	transition: all 0.4s ease-out;
}

.pagination-next-link:hover {
	background-color: #777693;
	color: #fff;
}

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

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

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