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


/************************************
****　ここから下自分で追加
************************************/


/************************************
****　見出し
************************************/

/*見出し2*/
.article h2 {
  border:none;
	font-size:20px;
   --stripe-color: #E8E9F7; /*ストライプの色 */
   color: #444; /* 文字色 */
   background: linear-gradient(135deg, transparent 25%, var(--stripe-color) 26%, var(--stripe-color) 50%, transparent 51%, transparent 75%, var(--stripe-color) 76%, var(--stripe-color));
   background-size: 4px 4px;
   padding:0.7em 1em; /* 内側余白調整 */ 
}

/*見出し3　関連記事・コメント・記事タイトル*/
.article h3 {
  border:none;
  background:none;
  position: relative;
  font-size:20px;
}
.article h3:after {
  content: "";
  position: absolute;
  left:0;
  bottom:0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #8AD6D5, #8AD6D5 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #8AD6D5, #8AD6D5 2px, #fff 2px, #fff 4px);
}


/*見出し4*/
.article h4 {
	border:none;
  color: #6594e0;/*文字色*/
  /*線の種類（点線）2px 線色*/
  border-bottom: dotted 4px #C3EAD6;
   padding:0.3em 1em; /* 内側余白調整 */ 
}

/*見出し5*/
.article h5 {
	border:none;
  position: relative;
  padding: 0.5em 0.8em;/*上下 左右の余白*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #ffd900;/*左線*/
}


/*見出し6*/



/*吹き出しアイコンの枠線*/

.speech-icon img,
.speech-icon amp-img {
  border: 2px solid #E8E9F7;
  box-shadow: 0 0 0px #E8E9F7;
}


div.speech-balloon {
  border: 2px solid #E8E9F7; // 任意の色
}

div.speech-balloon::before {
  border-right: 12px solid #E8E9F7; // 任意の色
}
.sbp-r .speech-balloon::before {
  border-left: 12px solid #E8E9F7; // 任意の色
}

/************************************
** 引用
************************************/
blockquote{
  background: #fff;/*背景色を少し濃いめの灰色に*/
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f9fcff calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f9fcff calc(100% - 1px));
  background-size: 8px 8px;
  background-repeat: repeat;
  background-position: center center;
  border-radius: 5px; /*角を丸める*/

}
blockquote:before{ /*上の引用アイコン*/
  position: absolute;
  font-family: FontAwesome;
  content: '\f10d';
  top: 10px;/*上からの距離*/
  left: 10px;/*左からの距離*/
  color: silver;
  font-size: 1em;
}
blockquote:after{ /*下の引用アイコン*/
  position: absolute;
  font-family: FontAwesome;
  content: '\f10e';
  bottom: 20px;/*下からの距離*/
  right: 10px;/*右からの距離*/
  color: silver;
  font-size: 1em;
}

/************************************
** ヘッダー
************************************/
#header {
	border-bottom:none;
    height:100%;/*画像の高さ*/
	width:70%;
	background-color:#fff;
	padding:50px 0 0 0;
}
/*サイト名を消す*/
.site-name-text {
display: none;
}
/*フッター背景画像*/
#footer {
	background-image: url(  );
	background-size: cover;
    height:50px;/*画像の高さ*/
	padding:0 0 0 0;
}
/************************************
****　エントリーカード
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{
padding:0 0 0.7em 0;
border-radius:5px;
border-color:#d6dce6;

}
a.entry-card-wrap.a-wrap{
transition: all .3s;
}
a.entry-card-wrap.a-wrap:hover {
transform: translateY(-3px);
transition: all .3s;
background-color: #fff;
box-shadow: 0 10px 15px 0px rgb(188 143 143 / 10%), 0 0 0px rgb(188 143 143 / 10%);/*ホバー時影の色*/
}
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:140px;
border-radius:5px 5px 0 0/ 5px 5px 0 0; /*角丸*/
padding:-0.4em 0 0 0;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
margin:0;
}
.e-card-thumb .cat-label{
margin-left:.2em;/*カテゴリーの左隙間*/
}
@media screen and (max-width: 1100px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:120px;
}}
@media screen and (max-width: 1023px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}
a.entry-card-wrap.a-wrap:hover {
transform: none;
background-color: #f7f7f7;
}}
@media screen and (max-width: 900px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}
@media screen and (max-width: 750px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}
@media screen and (max-width: 600px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}
a.entry-card-wrap.a-wrap.border-element.cf{
margin:0em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width:95%!important;
}
}
@media screen and (max-width: 480px){
.e-card-thumb .cat-label{
margin-left:1em;
}}
@media screen and (max-width: 1023px){
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media screen and (min-width: 601px) and (max-width: 834px){
div#content.content.cf{
margin:1em;
}}
h2.entry-card-title.card-title.e-card-title{
font-size:16px;
color:#444; /*記事タイトル色*/
font-weight:;
line-height:1.8em;
margin-top:0.5em;
margin-bottom:1em;
padding: 0 0.5em 0;
}
.entry-card-snippet{
-webkit-line-clamp: unset;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:14px;
color:#444;
text-align:center;
border-top:3px dotted #444;/*点線の色変更はこちら*/
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:5em;
margin-bottom:4em;
max-height:20em;
}
@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{
font-size: 1.15em;
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:13px;
text-align:center;
border-top:3px dotted #79c06e;/*点線の色変更はこちら*/
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
main.main, div.sidebar {
padding:0;
}
}
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{
margin-right:0.5em!important;
margin-bottom:-0.6em!important;
color:#7b7b7b;
font-size:.70em;/*投稿日のサイズ*/
}
.eye-catch .cat-label, .cat-label{/*カテゴリ非表示*/
display:none;
}
div.admin-pv{/*閲覧数を非表示*/
display:none;
}




/************************************
****　サイドバー
************************************/
div.sidebar {
	background:transparent;/* Cocoon親テーマCSSリセットのため */
	padding: 20px ;
	font-size:14px;

}
 /*フォント*/
.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:#777;
}

/*見出し*/
.sidebar h3{
background-color:#fff;
color:#444;
border-radius: 0%;
border-bottom:4px dotted;
border-color:#ffec47;
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}

/*検索*/
.article .widget_search{
padding:0;
}
span.fas.fa-search::before{
color:#F7947F;/*検索マーク色変更はこちら*/
}

/*Popular posts　リンク装飾*/
.sidebar a.popular-entry-card-link.a-wrap:hover { /*マウスオン時*/}
.sidebar a.popular-entry-card-link.a-wrap{
transition: all .2s;
}
.sidebar a.popular-entry-card-link.a-wrap:hover {
transform: translateY(-3px);
transition: all .5s;
background-color: #fff;
box-shadow: 0 10px 15px 0px rgb(188 143 143 / 10%), 0 0 0px rgb(188 143 143 / 10%);/*ホバー時影の色*/
}
.sidebar a.popular-entry-card-link.a-wrap{
max-height:140px;
padding:-0.4em 0 0 0;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
margin:5;
}
.sidebar a.popular-entry-card-link.a-wrap{
margin-left:.0em;/*カテゴリーの左隙間*/
}

/************************************
****　サイドバーのプロフィール
************************************/

/* プロフィール全体 */
.nwa .author-box {
	border:none ;
	padding: 0 20px;
}
/* アイコン */
.nwa .author-box .author-thumb{
	width: 100px;
}
.nwa .author-box .author-thumb img{
	box-shadow: 0 1px 3px rgba(0,0,0,.18)
}

/* 下側 */
.nwa .author-box .author-content {
	padding: 1em 0;
}

/* 名前 */
.author-box .author-name {
	margin-bottom: 1em;
}
.author-box .author-content .author-name a{
	color: #777777; /*リンク色にしない */
	font-size: 1em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.2em; /* 字間を広く */
}

/* プロフィール文 */
.author-description{
	margin-bottom: 16px;
}
.author-description p{
	margin: 0 0 0.5em 0;
	text-align: left;
	line-height:1.8em;
}

/* SNSボタン */
.author-follows{
	padding: 14px 0;
	background-color:#A5DEE5; /* プロフィールSNS背景色 */
}
.author-follows::before{
	content: 'Follow Me';
	color: #fff;
	font-family: お好きなフォント(設定する場合);
	letter-spacing: 0.2em; /* 字間を広く */
}
.author-box .sns-follow-buttons a.follow-button{
	width: 40px;
	height: 40px;
	margin: 6px 10px 2px 2px;
	border-radius: 20px;
	color: #fff;
	border-color: #fff;
	font-size: 20px;
	line-height: 1.6;
}
.author-box a.follow-button span::before {
	font-size: 22px;
}



/* SNSボタン マウスオーバーしたとき */
.author-box .sns-follow-buttons a.follow-button:hover{
	background-color: transparent;
	opacity: 0.2; /* 薄く */
	transform: scale(1.1); /* 1.1倍の大きさに */
}





/************************************
****　SNSシェアボタン
************************************/

.bc-brand-color-white.sns-share a {
    background-color: var(--cocoon-white-color);
    border-color: var(--cocoon-sns-color)!important;
    color: var(--cocoon-sns-color);
}

.sns-share-buttons {
  justify-content: center;
}

.sns-share-buttons a {
  font-size: 18px;
}

.sns-share-buttons a .button-caption {
  display: none;
}

.sns-share-buttons a .share-count {
  right: 50%;
  bottom: -16px;
  transform: translateX(50%);
  color: #aaa;
}
.bc-brand-color-white.sns-share a {
  border: none;
  width: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.bc-brand-color-white.sns-share.ss-high-and-low-cl a .social-icon,
.bc-brand-color-white.sns-share.ss-high-and-low-lc a .social-icon {
  font-size: 20px;
}

.bc-brand-color-white .sns-share-buttons a {
  font-size: 20px;
}
.sns-share.ss-high-and-low-lc a .social-icon.button-caption,
.sns-share.ss-high-and-low-cl a .social-icon.button-caption,
.sns-share.ss-high-and-low-lc a .button-caption.button-caption,
.sns-share.ss-high-and-low-cl a .button-caption.button-caption {
  display: none;
}
@media screen and (max-width: 834px) {
  .bc-brand-color-white.sns-share a {
    width: 45px !important;
  }
}