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


/************************************
カスタマイズ
************************************/

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　本文
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　ヘッダー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　フッター
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　ヴィジェット
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　モバイル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*───────────────────────────────────────
───────────────────────────────────────*/
/*======================================
======================================*/
/*--------------------------------------
--------------------------------------*/


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 全体
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*-------------------------------------
カラム内の背景色
-------------------------------------*/
.header-container, .main, .sidebar, .footer {
	background-color: #edf1f2;
}
/*-------------------------------------
コンテンツ上の余白を消す
-------------------------------------*/
.content { 
	margin-top: 0px; 
}
.sidebar { 
	margin-top: 10px; 
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　本文
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

/*-------------------------------------
パンくずリストの色
-------------------------------------*/
.breadcrumb-home {
	color: #a0a0a0;
}
.breadcrumb-item {
	color: #a0a0a0;
}
.breadcrumb-caption {
	color: #1c2838;
}
/*-------------------------------------
アイキャッチ画像を記事タイトルの上に
-------------------------------------*/
/* 記事ヘッダーの枠組み */
.article-header {
	display: flex;			/*フレックスボックスレイアウト*/
	flex-direction: column;		/*ブロック要素を縦に並べる*/
}
/* アイキャッチの枠組み */
.eye-catch-wrap {
	order: -1;			/*順番*/
	overflow: hidden;		/*はみ出した部分を非表示 ※IE対策*/
}
/* アイキャッチ */
.eye-catch {
	margin-bottom: 0;		/*下の余白*/
}
/*-------------------------------------
トップSNSシェアボタンのみを小さく
-------------------------------------*/
/* 枠組み右に寄せる */
.sns-share.ss-top .sns-share-buttons {
	justify-content: flex-end;	/*右に寄せる*/
}
/*トップシェアボタンのリンク*/
.sns-share.ss-top .sns-buttons a {
	width: 34px;
	height: 34px;
	margin-right: 4px;
	margin-left: 4px;
	border-radius: 50px;
}
/* トップシェアボタンのアイコン */
.sns-share.ss-top .sns-buttons a .social-icon {
	font-size: 16px;
}
/* キャプション非表示 */
.sns-share.ss-top .sns-buttons a .button-caption {
	display: none;
}
/* シェア数 */
.sns-share.ss-top .sns-buttons a .share-count {
	right: 1px;
	bottom: 0;
	font-size: 10px;
}
/*-------------------------------------
フォローボタン（記事下）のみ小さく
-------------------------------------*/
/*フォローボタン（記事下）の枠組み*/
.sns-follow.sf-bottom .sns-follow-buttons {
	justify-content: flex-end;
	flex-wrap: wrap;
}
/*フォローボタン（記事下）のリンク*/
.sns-follow.sf-bottom .sns-buttons a {
	width: 68px;
	height: 34px;
	margin-right: 4px;
	margin-left: 4px;
	border-radius: 50px;
}
/* アイコン */
.sns-follow.sf-bottom .sns-follow-buttons .follow-button {
	font-size: 24px;
}
/* シェア数 */
.sns-follow.sf-bottom .sns-buttons a .follow-count {
	right: 1px;
	bottom: 0;
	font-size: 10px;
}
/*-------------------------------------
目次
-------------------------------------*/
/* 全体 */
.toc {
	display: block;
	padding: 40px 20px;
	max-width: 680px;
	border: 1.0px #edf1f2 solid !important;
}
/* タイトル */
.toc-title {
	position: relative;
	padding: 3px 0;
	border-radius: 50px;
	background: #abc9e3;
	color: #FFFFFF;
	font-weight: bold;
}
/* 本体 */
.toc .toc-content {
	padding: 0px 10px;
}
/* サイドバー */
.sidebar .widget_toc {
	font-size: 16px;
	line-height: 1.5;
}
/* H2見出しの色とH3以降の番号を消す */
.toc ol.toc-list > li {
	color: #abc9e3;
	/* 
	list-style: none;
	color: #abc9e3;
	*/
}
.toc ol.toc-list > li li{
	list-style: none;
}
/*-------------------------------------
    検索ボックス（一体型・丸縁）
-------------------------------------*/
/*入力欄*/
.search-box .search-edit {
	padding: 6px 18px;
	padding-right: 68px;
	border-color: #abc9e3;
	border-radius: 20px;
}
/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: white;
	background-color: #abc9e3;
	border-radius: 0 20px 20px 0;
}
.search-box .fa-search {
	display: block;
	margin-top: 3px;
	margin-right: 3px;
}
/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}
/*-------------------------------------
見出しH2～H6 abc9e3 91b3c9
-------------------------------------*/
.entry-content h2{
	color: black;
	background: #e0eaf3;
	border-left: solid 20px #abc9e3;
	border-radius: 5px;
	padding: 0.7em;
	font-size: 1.6em;
}
.entry-content h3{
	color: black;
	background: #e1e5e6;
	border:none;
	border-radius: 3px;
	padding-top: 12px;
	padding-left: 20px;
	padding-bottom : 8px;
	font-size: 1.4em;
}
.entry-content h4{
	color: black;
	background: #edf1f2;
	border:none;
	border-bottom: solid 2px #d0d0d0;
	/*
	border-bottom: solid 3px #e1e5e6;
	border-bottom: solid 2px #404040;
	*/
	padding-left: 20px;
	padding-bottom : 0px;
	font-size: 1.3em;
}
.entry-content h5{
	color: black;
	background: #edf1f2;
	border:none;
	padding-left: 20px;
	font-size: 1.2em;
}
.entry-content h6{
	color: black;
	background: #edf1f2;
	border:none;
	padding-left: 20px;
	font-size: 1.0em;
}
/*
	/* 枠 */
	color: black;
	background: #edf1f2;
	border: solid 4px #a1d4b2;
	padding: 1em;
	border-radius: 2px;
	/* 反転 */
	color: white;
	background: #a1d4b2;
	padding: 1em;
	border-radius: 2px;
	/* 左縦帯 */
	color: black;
	background: #a1d4b2;
	border-left: solid 12px gray;
*/
/*-------------------------------------
関連記事見出しのカスタマイズ
-------------------------------------*/
h2.related-entry-heading span:before {
	color:#404040;
}
h2.related-entry-heading span{
	font-size: 32px;
	color:#abc9e3;
}
/*-------------------------------------
コメント
-------------------------------------*/
h2.comment-title:before {
	color:#404040;
}
h2.comment-title{
	font-size: 32px;
	color:#abc9e3;
}
/*-------------------------------------
戻るボタン
-------------------------------------*/
.go-to-top {
	right: 30px;	/*右から30px*/
	bottom: 30px;	/*下から30px*/
}
.go-to-top-button {
	border-radius: 25%;	/* 25-50*/
	width: 60px;		/*横幅*/
	height: 60px;		/*高さ*/
	font-size: 40px;	/*フォント*/
	opacity:0.9;		/*透明度*/
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}
/*
.go-to-top-button {
	font-size: 48px;	/*フォント*/
	width: 80px;		/*横幅*/
	height: 80px;		/*高さ*/
	opacity:0.7;		/*透明度*/
}
*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　ヘッダー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*-------------------------------------
ヘッダーの高さを小さく
-------------------------------------*/
.logo.logo-header.logo-text {
	padding: 0px;
}
/*-------------------------------------
サイトロゴのフォント変更
-------------------------------------*/
.logo-header a span{
	font-weight: bold;
	font-size:32px;
	text-shadow: 1px 2px 3px #91b3c9;
}
/*-------------------------------------
グローバルメニュー
-------------------------------------*/
.navi-in .menu-header .item-label {
	font-weight: bold;
	text-shadow: 1px 2px 3px #91b3c9;
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　フッター
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*-------------------------------------
フッター上部の余白を小さくする
-------------------------------------*/
.footer {
	margin-top: 0;
	padding-top: 0;
}
#custom_html-8,
.footer-bottom {
	margin-top: 0;
	padding-top:0;
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　ヴィジェット
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*-------------------------------------
サイドバーの行間と文字サイズと色
-------------------------------------*/
.sidebar {
	line-height: 1.2;
	font-size: 12px;
	padding: 0px;
	color:#404040!important;
}
/*-------------------------------------
サイドバーの見出しの背景色と文字色
-------------------------------------*/
.sidebar h3 {
	padding: 0px;
	background: #edf1f2;
	color: #99c4e0;
	font-size: 28px;
	/*
	border-bottom: 1px solid #99c4e0;
	*/
}
/*
	/* 文字:黒 背景:薄水色 */
	border-radius: 5px;
	padding: 8px;
	font-size: 16px;
	background: #e0eaf3;
	color: #404040;

	/* 文字:青 背景:グレー */
	padding: 0px;
	background: #edf1f2;
	color: #abc9e3;
	font-size: 28px;

	/* 文字:濃い青 背景:グレー */
	padding: 0px;
	background: #edf1f2;
	color: #99c4e0;
	font-size: 28px;
*/
/*-------------------------------------
プロフィール欄の文字サイズと色
-------------------------------------*/
.author-name a{
	text-decoration:none;
	font-size: 18px;
}
.author-description {
	font-size: 14px;
	color:#404040;
}
/* 枠線を消す */
.author-box {
	border: none;
}
/* SNSボタン全体とサイトリンクボタン */
.author-box .sns-follow-buttons a.follow-button {
	font-size: 20px;
	padding-top: 3px;
	width: 30px;
	height: 30px;
	color: #ffffff;
	border:none;
	background-color: #839b5c;
	border-radius: 6px;
	border-radius: 50%;
}
.author-box .sns-follow-buttons a.follow-button:hover {
	border: 1px solid #839b5c;
	background-color: #fff;
	color: #839b5c;
}
/* Twitter */
.author-box .sns-follow-buttons a.twitter-button{
	background-color:#1da1f2;
}
.author-box .sns-follow-buttons a.twitter-button:hover {
	border: 1px solid #1da1f2;
	background-color: #fff;
	color: #1da1f2;
}
/* Facebook */
.author-box .sns-follow-buttons a.facebook-button{
	background-color:#3b5998;
}
.author-box .sns-follow-buttons a.facebook-button:hover {
	border: 1px solid #3b5998;
	background-color: #fff;
	color: #3b5998;
}
/* はてブ */
.author-box .sns-follow-buttons a.hatebu-button{
	background-color:#2c6ebd;
}
.author-box .sns-follow-buttons a.hatebu-button:hover {
	border: 1px solid #2c6ebd;
	background-color: #fff;
	color: #2c6ebd;
}
/* Instagram */
.author-box .sns-follow-buttons a.instagram-button{
	background-color:#405de6;
}
.author-box .sns-follow-buttons a.instagram-button:hover {
	border: 1px solid #405de6;
	background-color: #fff;
	color: #405de6;
}
/* Pinterest */
.author-box .sns-follow-buttons a.pinterest-button{
	background-color:#bd081c;
}
.author-box .sns-follow-buttons a.pinterest-button:hover {
	border: 1px solid #bd081c;
	background-color: #fff;
	color: #bd081c;
}
/* YouTube */
.author-box .sns-follow-buttons a.youtube-button{
	background-color:#cd201f;
}
.author-box .sns-follow-buttons a.youtube-button:hover {
	border: 1px solid #cd201f;
	background-color: #fff;
	color: #cd201f;
}
/* Linkedin */
.author-box .sns-follow-buttons a.linkedin-button{
	background-color:#0077b5;
}
.author-box .sns-follow-buttons a.linkedin-button:hover {
	border: 1px solid #0077b5;
	background-color: #fff;
	color: #0077b5;
}
/* note */
.author-box .sns-follow-buttons a.note-button{
	background-color:#41c9b4;
}
.author-box .sns-follow-buttons a.note-button:hover {
	border: 1px solid #41c9b4;
	background-color: #fff;
	color: #41c9b4;
}
/* SoundCloud */
.author-box .sns-follow-buttons a.soundcloud-button{
	background-color:#ff8800;
}
.author-box .sns-follow-buttons a.soundcloud-button:hover {
	border: 1px solid #ff8800;
	background-color: #fff;
	color: #ff8800;
}
/* Flickr */
.author-box .sns-follow-buttons a.flickr-button{
	background-color:#111;
}
.author-box .sns-follow-buttons a.flickr-button:hover {
	border: 1px solid #111;
	background-color: #fff;
	color: #111;
}
/* LINE */
.author-box .sns-follow-buttons a.line-button{
	background-color:#00c300;
}
.author-box .sns-follow-buttons a.line-button:hover {
	border: 1px solid #00c300;
	background-color: #fff;
	color: #00c300;
}
/* Amazon */
.author-box .sns-follow-buttons a.amazon-button{
	background-color:#ff9900;
}
.author-box .sns-follow-buttons a.amazon-button:hover {
	border: 1px solid #ff9900;
	background-color: #fff;
	color: #ff9900;
}
/* 楽天Room */
.author-box .sns-follow-buttons a.rakuten-room-button{
	background-color:#c61e79;
}
.author-box .sns-follow-buttons a.rakuten-room-button:hover {
	border: 1px solid #c61e79;
	background-color: #fff;
	color: #c61e79;
}
/* Slack */
.author-box .sns-follow-buttons a.slack-button{
	background-color:#e01563;
}
.author-box .sns-follow-buttons a.slack-button:hover {
	border: 1px solid #e01563;
	background-color: #fff;
	color: #e01563;
}
/* GitHub */
.author-box .sns-follow-buttons a.github-button{
	background-color:#4078c0;
}
.author-box .sns-follow-buttons a.github-button:hover {
	border: 1px solid #4078c0;
	background-color: #fff;
	color: #4078c0;
}
/* Codepen */
.author-box .sns-follow-buttons a.codepen-button{
	background-color:#333;
}
.author-box .sns-follow-buttons a.codepen-button:hover {
	border: 1px solid #333;
	background-color: #fff;
	color: #333;
}
/* Feedly */
.author-box .sns-follow-buttons a.feedly-button{
	background-color:#2bb24c;
}
.author-box .sns-follow-buttons a.feedly-button:hover {
	border: 1px solid #2bb24c;
	background-color: #fff;
	color: #2bb24c;
}
/* RSS */
.author-box .sns-follow-buttons a.rss-button{
	background-color:#f26522;
}
.author-box .sns-follow-buttons a.rss-button:hover {
	border: 1px solid #f26522;
	background-color: #fff;
	color: #f26522;
}

/*-------------------------------------
フォローボタン（ウィジェット）のみ小さく
-------------------------------------*/
/*フォローボタンの枠組み*/
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: left;
	flex-wrap: wrap;
}
/*フォローボタンのリンク*/
.sns-follow.sf-widget .sns-buttons a {
	width: 50px;
	height: 30px;
	margin-right: 3px;
	margin-left: 3px;
	border-radius: 50px;
}
/*フォローボタン（ウィジェット）のアイコン*/
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 20px;
}
/*フォローボタン（ウィジェット）のシェア数*/
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 1px;
	bottom: 0;
	font-size: 10px;
}
/*-------------------------------------
ヴィジェットのカテゴリ
-------------------------------------*/
/* 親カテゴリのカスタマイズ */
.widget_categories ul li a{
	line-height: 1.0;
	font-size: 16px;
	padding: 4px;
}
.widget_categories ul li a::before{
	  font-family: FontAwesome;
	content: "\f07b";	/* FontAwesomeのユニコード */
  color: #abc9e3;			/* アイコンの色 */
  padding-right: 6px;
}
.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}
/* 子カテゴリのカスタマイズ */
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f114";		/* FontAwesomeのユニコード */
  color: #abc9e3;			/* アイコンの色 */
  padding-right: 6px;
}
/* 投稿数 */
/*
#sidebar aside li.cat-item span {
	font-weight: bold;
	color: #abc9e3;
}
*/
/*-------------------------------------
本文のカテゴリー
-------------------------------------*/
.cat-link {
	margin-top: 5px;
	margin-bottom: 0px;
	border-radius: 5px;	/* 角の丸み */
	padding: 3px 10px;
	font-size: 12px;
}
.fa-folder-open:before {
	color: #abc9e3;			/* アイコンの色 */
}
/*-------------------------------------
ヴィジェットのタグ
-------------------------------------*/
.tagcloud a {
	background: none;		/* 背景を消す */
	border: 1px solid #abc9e3; 
	border-radius: 20px;	/* 角の丸み */
	color: #404040;			/* 文字色 */
	display: inline-block;
	padding: 4px 10px;
	text-decoration: none;
	font-size: 14px;
	margin: 2px;
	flex: 0 1 auto;
	display: flex;
	justify-content: space-between;
}
/* アイコンを消す */
.tag-caption .fa-tag {
	display: none;
}
/*-------------------------------------
本文のタグ
-------------------------------------*/
.tag-link {
	margin-top: 8px;
	margin-bottom: 0px;
	background: none;		/* 背景を消す */
	border: 1px solid #abc9e3; 
	/* border: none; */
	color: #404040;			/* 文字色 */
	font-size: 12px;
	padding: 2px 10px;
	border-radius: 20px;
}
.fa-tags:before {
	color: #abc9e3;			/* アイコンの色 */
}
/*-------------------------------------
最近の投稿
-------------------------------------*/
.widget_recent_entries ul li a{
	font-size: 12px;		/*文字の大きさ*/
	color: #404040;			/*文字の色*/
	line-height: 1.0;		/*行の高さ*/
	padding: 4px;
}
/*-------------------------------------
アーカイブ
-------------------------------------*/
.widget_archive ul li a{
	font-size: 16px;		/*文字の大きさ*/
	color: #404040;			/*文字の色*/
	line-height: 1.0;		/*行の高さ*/
	padding: 4px;
}
/* 投稿数 */
.widget_archive ul li a .post-count{
	color: #404040;
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
　モバイル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*-------------------------------------
モバイルヘッダーの色
-------------------------------------*/
/* 背景とアイコン色 */
.mobile-menu-buttons {
	background: #abc9e3;
	color: white;
}
/* タイトル文字色 */
.mobile-menu-buttons .menu-button > a {
	color: white;
	/*
	text-shadow: 1px 2px 3px #808080;
	*/
}
/*-------------------------------------
モバイルメニューの色
-------------------------------------*/
.navi-menu-content{
	background-color: #edf1f2;
}
.menu-drawer a{
	font-size: 1.2em;/*文字の大きさ*/
	color: #404040;
}
/*-------------------------------------
モバイルサイドバーの色
-------------------------------------*/
.sidebar {
	background-color: #edf1f2;
}
.sidebar-menu-content {
	background-color: #edf1f2;
}
/*-------------------------------------
モバイルメニュー・サイドバー
-------------------------------------*/
/* 左右反対に */
/*
.sidebar-menu-content {
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  right: auto;
  left: 0;
} 
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
*/
/* ×を消す */
/*
.menu-close-button .fa-close::before {
	content: none;
}
*/
/* ×の後ろに文字を追加 */
.menu-close-button::after {
	content: " close";
}
/*-------------------------------------
モバイルメニュー・サイドバー
CLOSEボタンのカスタマイズ
-------------------------------------*/
.menu-close-button {
	overflow: visible!important;
	position: sticky!important;
	z-index: 99999!important;
	top: 5px;
	background: rgba(171,201,227,1);
	border: solid 2px #edf1f2;
	border-radius: 50px;
	width: 99%; /* 横幅 */
}
/* 上マージン調整 */
.menu-content .menu-drawer {
	padding:30px 1em 20px;
}
/* 左側間隔調整 */
.menu-content .fas .fa-times { 
	padding-left: 30px; 
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/