@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

.entry-card-thumb {
	width: 150px;
}
.entry-card-content {
	margin-left: 110px;
}

/* header文字サイズ変更 */
/* スマホ・タブレットビュー */
#header .site-name-text {
	font-size: 18px;
}
.tagline {
	font-size: 16px;
    font-weight: bold;
}

/* タブレットより大きいサイズの指定 */
@media screen and (min-width: 769px) {
	#header .site-name-text {
		font-size: 30px;
	}
	.tagline {
		font-size: 18px;
        font-weight: bold;
	}

}





/* 本文中の書名部分 */
.body_title {
	font-weight: bold;
	color: #660000;
}


/*見出し初期化*/
.article h2,.article h3,.article h4, .article h5, .article h6 {
	padding: 0; margin: 0; background:none; border-collapse: separate;border-spacing: 0;
	border-top: none; border-right: none; border-bottom: none; border-left: none;border-color:none;
	line-height: normal;	position:relative;
}


.article h3 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

.article h4 {
	padding: 0.5em;/*文字周りの余白*/
	font-weight:bold;
	color: #600000;/*文字色*/
}

/*  以下　https://web-ashibi.net/archives/1911 　を参考に */
.post-title {    /* タイトルのカスタマイズ　*/
	font-size: 26px; 
	margin: 16px 0; 
	line-height: 1.3; 
	padding: 0 0 10px 0; 
	position: relative; 
} 
.post-title::after {    /* グラーデーションラインをひく擬似要素 */ 
	content:""; 
	display: block; 
	position: absolute; 
	bottom: -10px; 
	height: 4px; 
	width: 100%; 
	background: -webkit-linear-gradient(left, #72c7e6 0%,#8ae2d7 100%); 
	background: linear-gradient(to right, #72c7e6 0%,#8ae2d7 100%); 
} 
.cat-link {   /* 記事のカテゴリーのカスタマイズ */ 
	color: #fff; 
	text-decoration: none; 
	display: inline-block; 
	margin-right: 5px; 
	padding: 2px 8px; 
	font-size: 12px; 
	background-color: #72c7e6; 
	border-top-right-radius: 10px; /* 右上の角だけ丸く */ 
	border-bottom-left-radius: 10px; /* 左下の角だけ丸く */ 
	word-break: break-all; 
	} 
.cat-link:hover {　　 /* 記事のカテゴリー　マウスホバー時 */ 
	opacity: 1; 
	background: #49add1; 
	transition: all .5s ease; /* ふわっと変化するアニメーション */ 
	color: #fff; 
} 
.tag-link { 　　　　/* 記事のタグ */ 
	color: #fff; 
	text-decoration: none; 
	display: inline-block; 
	margin-right: 5px; 
	padding: 2px 8px; 
	font-size: 12px; 
	background-color: #72c7e6; 
	border: none; 
	border-top-right-radius: 10px; 
	border-bottom-left-radius: 10px; 
	word-break: break-all; 
} 
.tag-link:hover { 
	background: #49add1; 
	transition: all .5s ease; 
	color: #fff; 
} 


/*以下　https://web-ashibi.net/archives/2083　参考  */
.cat-label {    /*　記事一覧のカテゴリー表示を丸く */
	top: 0.5em; /*上からの距離*/ 
	left: 0.5em; /*左からの距離*/ 
	border: none; /*ボーダーを消す*/ 
	font-size: 12px; /*文字サイズ*/ 
	color: #fff; /*文字色*/ 
	background-color: #49add1; /*背景色*/ 
	padding: 1px 10px; /*余白*/ 
	border-radius: 14px; /*角を丸く*/ 
} 
.entry-card-thumb { 　/*  画像にマウスを置いたときに浮く感じ */
	transition-duration: 0.3s; /*アニメーションの時間*/ 
	box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75); /*通常時の画像の影*/ 
} 
.entry-card-thumb:hover { 
	transform: translateY(-6px); /*マウスホバーで上に移動*/ 
	box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); /*マウスホバー時の画像の影*/ 
} 
.entry-card-thumb img { /*画像下の隙間を消す*/ 
	vertical-align: bottom; 
} 
.a-wrap:hover { /*マウスホバー時の全体の背景色を消す*/ 
	background: none; 
}
.entry-card-title { 
	margin-top: 10px; /*上に余白を付ける*/ 
	line-height: 1.5; /*行間を広く*/ 
} 
.entry-card-title:hover { 
	color: #49add1; /*マウスホバー時の色*/ 
} 
@media screen and (max-width: 768px){ 
	.entry-card-title { 
		font-size: 14px; /*スマホでの文字の大きさ*/ 
		line-height: 1.4; /*スマホでの行間*/ 
	} 
} 










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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	img.alignright {
		padding: 0 0 10px 0;
		margin: 0 auto;
		display: block;
	}
	
	img.alignleft {
		padding: 0 0 10px 0;
		margin: 0 auto;
		display: block;
	}
	
	.alignright {
		float: none;
	}
	
	.alignleft {
		float: none;
	}
}