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

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


/* 指定投稿記事 */
.su-posts-content, 
.su-posts-title {
	width: 320px;
	font-size: 15px;
}

/* カテゴリーウィジェット */
.widget_categories ul li {
	margin: 5px 0;
	padding: 0 5px;
}
.widget_categories > ul > li:nth-child(odd) {
	
	background-color: #f6f6f6;
}
.widget_categories > ul > li:nth-child(even) {
	background-color: #e5e2e5;
}
.widget_categories > ul > li > ul >li:nth-child(odd) {
	background-color: #f6f6f6;
}
.widget_categories > ul > li > ul > li:nth-child(even) {
	background-color: #ebebeb;
}
/* 人気記事ウィジェット */
.popular-entry-card-title {
	font-size: 13px;	
}
/* 最近の投稿ウィジェット */
.widget_recent_entries li {
	margin-bottom: 10px;
	padding: 5px;
	border: solid 5px #f6f6f6;
}
.widget_recent_entries a {
	background-color: #f6f6f6;
}
/* pvの余白下部の縮小 */
.entry-card .admin-pv {
	margin: 0.4em 0 2em; /* margin: 0.4em 0 1.4em; */
	font-size: 0.8em;
	text-align: right;
}
/* トップページのエントリーカードに読了時間追加 */
.read-time-entry-card {
	font-size: 13px;
	padding: 12px 6px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
/*トップページのエントリーカードの日時等の余白の横幅拡張 */
.entry-card-info > * {
	padding: 2px 6px; /* padding: 2px; */
}
/* フッターのロゴを非表示 */
.logo-footer {
	display: none;
}

/* コメントの「メールアドレスが公開されることはありません。」を非表示 */
.comment-note { display: none; }

/* コメントのデザインのカスタマイズ */
.comment-btn {
	background-color: #72c7e6;
	color: #fff;
	border: none;
	font-size: 20px;
	transition: 0.5s;
}
.comment-btn:hover {
	background-color: #49add1;
	color: #fff;
	transition: 0.5s;
}
.comment-respond { /*入力欄全体の枠*/
	border: 2px solid #ccc;
	margin-top: -2px;
}
.comment-respond p {
	margin: 1em 0;
}
.comment-reply-title {
	display: none;
}
#commentform { /*フォーム部分の枠*/
	padding: 20px;
}
p.comment-notes { /*注意書きの文字サイズ*/
	font-size: 14px;
}
p.form-submit {
	margin: 2em 0 1em 0;
}
#commentform input[type="text"], #commentform textarea { /*入力スペースの装飾*/
	padding: 11px;
	border: none;
	border-radius: 4px;
	font-size: 18px;
	width: 100%;
	background: #fcfcfc; /*入力スペースの背景色*/
	box-shadow: 0px 0px 4px #999 inset;
}
#commentform input[type="submit"] { /*送信ボタンの装飾*/
	-webkit-appearance: none;
	padding: 11px;
	width: 100%;
	margin: 0;
	cursor: pointer;
	background: #BBD2C5 10%;
	color: #666;
	border: none;
	font-size: 16px;
	font-weight: bold;
	transition: 0.5s;
}
#commentform input[type="submit"]:hover { /*送信ボタンのマウスホバー時*/
	background: #536976 100%;
	color: #ccc;
	transition: 0.5s;
}

/* コメントリストのデザインのカスタマイズ */
.under-entry-content h2 {
	border-radius: 8px 8px 0 0;
}
.comment-list { /*全体の枠*/
	border: 2px solid #ccc;
	padding: 0;
	border-radius: 10px 10px 0 0;
}
.comment-title { /*タイトルの装飾*/
	margin: 0;
	font-size: 24px;
	background: #72c7e6;
	color: #fff;
	padding-left: 20px;
	font-weight: normal;
}
.comment-title:before { /*タイトルにアイコンを付ける*/
	font-family: FontAwesome;
	content: '\f27b';
	color: #fff;
	margin-right: 4px;
}
.commets-list {
	padding: 20px 20px 0 20px;
}
.commets-list > li {
	border-top: 2px dashed #72c7e6; /*スレッドを区切る点線*/
	margin: 30px 0;
	padding-top: 20px;
}
.commets-list > li:first-child {
	border: none;
	margin-top: 0;
	padding-top: 0;
}
.commets-list .children {
	border-left: 2px solid #ccc; /*返信コメントの左側のボーダー*/
	margin: 0;
}
.commets-list .avatar { /*アバターの位置調整*/
	float: left;
	border-radius: 50%;
	margin-right: 10px;
}
.comment-content { /*コメントの吹き出し*/
	background: #e2e2e2;
	padding: 2px 10px;
	margin: 10px 0 6px 0;
	border-radius: 10px;
	position: relative;
}
.comment-content::before { /*吹き出しの三角部分*/
	content: "";
	position: absolute;
	top: -14px;
	left: 50px;
	border-style: solid;
	border-color: transparent transparent #e2e2e2 transparent;
	border-width: 0 20px 20px 0;
}
.comment-content p { /*吹き出し内の文字を調整*/
	font-size: 14px;
	margin: 1em 0;
	line-height: 1.5em;
}
.comment-reply-link { /*返信ボタンの装飾*/
	color: #666;
	border: none;
	border-radius: 10px;
	background: #BBD2C5 10%;
	padding: 1px 12px;
	transition: 0.5s;
}
.comment-reply-link:hover { /*返信ボタンのマウスホバー時*/
	color: #ccc;
	background: #536976 100%;
	transition: 0.5s;
}
.commets-list .comment-meta {
	background-color: #fff;
}
.commets-list .comment-body {
	margin-bottom: 0;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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