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

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


/*--------------------
 * ボックスメニュー
 * --------------------*/

.content-top{
	margin-top: 0px;
}

.box-menu{
	box-shadow: none;
}

.box-menu-label{
	font-size: 11px;
	font-weight: 400;
	color: rgb(0,100,200);
}

.box-menu-description{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #2d2d2d;
	opacity: 1;
}

.box-menu:hover{
	/*border-radius: 5px;*/
	box-shadow: none;
	background-color: #e9e9e9;
}

.box-menu:hover img{
	animation:anime3 500ms ease both;
}

/*ボックスメニューの画像アニメーション*/
@keyframes anime3{
	100%{transform:scale(1.2,1.2);}
}


/*フッター*/

.navi-footer-in > .menu-footer li{
	border-color:rgb(90,90,90);
	border-width:2px;
}

.navi-footer-in > .menu-footer li:last-child{
	border-color:rgb(90,90,90);
	border-width:2px;
}

.footer-bottom-logo img:hover{
	animation:anime3 500ms ease both;
}


/*サムネイルの角丸*/

.card-thumb img{
	border-radius: 2.8125%/5%;
}


/*エントリーカード（メイン）*/

.entry-card-wrap.a-wrap.border-element.cf{
	/*border-radius:5px;*/
}

.entry-card-wrap.a-wrap.border-element.cf:hover{
	animation:anime2 4s ease-in-out infinite;
}

.entry-card-wrap.a-wrap.border-element.cf:hover img{
	animation:enlarge-img 200ms ease-in-out both;
}

.entry-card-snippet{
	color:#999;
}

/*エントリーカード類のアニメーション（点滅）*/
@keyframes anime2{
	0%{background-color:#e9e9e9;}
	20%{background-color:#e9e9e9}
	46%{background-color:#c9c9c9;}
	72%{background-color:rgb(196,219,255);}
	100%{background-color:#e9e9e9;}
}

/*エントリーカード類のアニメーション（画像拡大）*/
@keyframes enlarge-img{
	100%{transform:scale(1.05,1.05);}
}


/*エントリーカードのタイトル*/
.entry-card-title.card-title.e-card-title{
	font-weight:500;
	letter-spacing:0.1em;
	font-family:'Montserrat','M PLUS 1p',sans-serif;
}

/*.entry-card-title.card-title.e-card-title:first-letter{
	font-size:23px;
	font-weight:400;
}*/


/*ページ送り機能*/
.pagination-next-link.key-btn{
	border:none;
	background-color:#2d2d2d;
	color:#fff;
	border-radius:4px;
}

.pagination-next-link.key-btn:hover{
	background-color:#4d4d4d;
}

.page-numbers{
	border:none;
	background-color:#2d2d2d;
	color:#fff;
	transition: all 100ms ease;
}

.page-numbers.current{
		background-color:rgb(77,147,255);
	}


/*ホームページのデザイン*/

.list-more-button{
	border: solid 3px rgba(0,0,0,0.2);
	border-radius: 7px;
	background: none;
	transition: none;
}

h1.list-title{
	border-bottom: solid 3px rgb(77,147,255);
	padding-top:5px
}

.list-title-in:before{
	visibility:hidden;
}

.list-title-in:after{
	visibility:hidden;
}


/*--------------------
 * サイドバー（ウィジェット）
 * --------------------*/

/*サイドバーの見出し*/

.sidebar h3{
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
	text-align:center;
	border-left:solid 5px rgb(77,147,255);
	/*border-radius:3px;*/
	border-radius:0px;
}

.sidebar h3:hover{
	animation:anime4 2s 3s ease-in-out alternate infinite;
}

@keyframes anime4{
	100%{color:rgb(77,147,255);}
}


/*タグクラウド*/

.tagcloud a{
	border:none;
	border-radius:3px;
	background-color:rgba(160,200,255,0.7);
}

.tagcloud a:hover{
	background-color:rgb(100,150,255);
}

.tagcloud a .tag-caption{
	color:rgb(0,0,0);
}


/*人気記事*/

.popular-entry-card.widget-entry-card.e-card.cf{
	display:flex;
	align-items:center;
}

.popular-entry-card.widget-entry-card.e-card.cf:hover img{
	animation:enlarge-img 200ms ease-in-out both;
}

.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb
{
	flex-shrink:0;
}

.popular-entry-card-content.widget-entry-card-content.card-content{
	margin-left:5px;
}

.popular-entry-card-link.a-wrap:hover{
	animation:anime2 4s ease-in-out  infinite;
}


/*新着記事*/

.new-entry-card.widget-entry-card.e-card.cf{
	display:flex;
	align-items:center;
}

.new-entry-card.widget-entry-card.e-card.cf:hover img{
	animation:enlarge-img 200ms ease-in-out both;
}

.new-entry-card-thumb.widget-entry-card-thumb.card-thumb
{
	flex-shrink:0;
}

.new-entry-card-content.widget-entry-card-content.card-content{
	margin-left:5px;
}

.new-entry-card-link.widget-entry-card-link.a-wrap:hover{
	animation:anime2 4s ease-in-out  infinite;
}


/*ピックアップ記事（ナビメニュー）*/

.navi-entry-card.widget-entry-card.e-card.cf{
	display:flex;
	align-items:center;
}

.navi-entry-card.widget-entry-card.e-card.cf:hover img{
	animation:enlarge-img 200ms ease-in-out both;
}

.navi-entry-card-content.widget-entry-card-content.card-content{
	margin-left:5px;
}

.navi-entry-card-thumb{
	flex-shrink:0;
	margin-right:1.6%;
}

.navi-entry-card-link.a-wrap:hover{
	animation:anime2 4s ease-in-out  infinite;
}


/*人気・新着記事のボーダー*/

.border-partition a:first-of-type{
	border-top:none;
}

.border-partition a:last-of-type{
	border-bottom:none;
}

.border-partition a{
	border-bottom:solid 1px #ddd;
}


/*プロフィールの枠線*/
.author-box.border-element.no-icon.cf{
	border:none;
}

/*ここまでサイドバー*/


/*--------------------
 * 記事内
 * --------------------*/

/*記事内タグ表示*/

.tag-link{
	color:rgb(0,0,0);
	border:none;
	border-radius:4px;
	background-color:rgba(160,200,255,1);
}

.tag-link:hover{
	background-color:rgb(100,150,255);
}


/*記事内カテゴリー表示*/

.cat-label{
	border-radius:4px;
	border:none;
	background-color:rgba(77,147,255,1);
}

.cat-link{
	border:none;
	border-radius:4px;
	background-color:rgba(0,100,255,0.7);
	transition: all 300ms 0ms ease;
}


/*アイキャッチ上カテゴリー表示*/

.eye-catch .cat-label{
	border:none;
}


/*記事内の見出し*/

.article h1{
	font-family: 'Montserrat','M PLUS 1p', sans-serif;
	font-weight:400;
	letter-spacing:0.1em;
}

.article h2{
	border-left:solid 5px rgb(77,147,255);
	font-weight:300;
	font-family: 'Montserrat','M PLUS 1p', sans-serif;
	letter-spacing:0.1em;
	border-radius:0px;
	padding-top:20px;
	padding-bottom:20px;
}

.article h2:first-letter{
	font-size:30px;
}

.article h3{
	border-top:none;
	border-right:none;
	border-left-color:rgb(77,147,255);
	border-bottom:none;
	box-shadow: 0px 1px 0px rgb(45,45,45);
	font-family: 'Montserrat','M PLUS 1p', sans-serif;
	font-weight:500;
}

.article h4{
	border-top:none;
	border-bottom:solid 1px #000;
	font-family: 'Montserrat','M PLUS 1p', sans-serif;
	font-weight:500;
	
}

.article h5{
	border-bottom:none;
	border-left:solid 6px #2d2d2d;
	padding-left:13px;
	font-family: 'Montserrat','M PLUS 1p', sans-serif;
	font-weight:500;
}


/*目次*/

.toc{
	background-color:#fff;
	border-radius:5px;
	border-left:solid 5px;
}

.toc li::marker{
	color:rgb(77,147,255);
}

.toc-title{
	font-weight:600!important;
	color:#444;
}

.toc-list>li{
	font-weight:600;
}

.toc-list>li li{
	font-weight:400;
}


/*関連項目の見出し*/

.related-entry-heading{
	background-color:#2d2d2d;
	padding:12px;
	padding-left:20px;
	/*border-radius:5px;*/
	border-radius:none;
	border-left:solid 5px rgb(77,147,255);
}

.related-entry-main-heading.main-caption{
	font-family: 'Montserrat', sans-serif;
	color:#fff;
	font-weight:400;
}

.related-entry-sub-heading.sub-caption{
	color:#fff;
	position:relative;
	left:1em;
	vertical-align:middle;
	opacity:1;
}


/*関連項目カード*/

.related-entry-card-title.card-title.e-card-title{
	font-weight:400;
}


/*コメント欄*/

.comment-title{
	background-color:#2d2d2d;
	padding:12px;
	padding-left:20px;
	/*border-radius:5px;*/
	border-radius:none;
	border-left:solid 5px rgb(77,147,255);
	font-family: 'Montserrat', sans-serif;
	color:#fff;
	font-weight:400;
}

.comment-sub-heading.sub-caption{
	color:#fff;
	position:relative;
	left:1em;
	vertical-align:middle;
	opacity:1;
}

.comment-btn{
	font-size:18px;
	color:#333;
	background:none;
	border:solid 2px #2d2d2d;
	border-radius:5px
}

.comment-btn:hover{
	color:#fff;
	background:#2d2d2d;
}

input.submit{
	border:none;
	border-radius:3px;
	border-bottom:solid 5px rgb(77,147,255); 
	color:#fff;
	font-size:16px;
	background-color:#2d2d2d;
	transition: all 300ms 0ms ease;
}

input.submit:hover{
	background-color:#444;
}


/*ブログカード*/

.blogcard{
	border-left-width:5px;
}

.blogcard img{
	border-radius:2.8125%/5%;
}


/*内部ブログカード*/

.blogcard-wrap.internal-blogcard-wrap{
	transition-duration:100ms;
}

.blogcard-wrap.internal-blogcard-wrap:hover{
	background-color:#e9e9e9;
}

.blogcard-wrap.internal-blogcard-wrap:hover .blogcard-thumbnail img{
	animation:enlarge-img 200ms ease-in-out both;
}


/*外部ブログカード*/

.blogcard-wrap.external-blogcard-wrap{
	transition-duration:100ms;
}

.blogcard-wrap.external-blogcard-wrap:hover{
	background-color:#e9e9e9;
}

.blogcard-wrap.external-blogcard-wrap:hover .blogcard-thumbnail img{
	animation:enlarge-img 200ms ease-in-out both;
}


/*前の記事*/

.prev-post.a-wrap.border-element.cf{
	border-radius:5px;
}

.fa.fa-chevron-left.iconfont{
	color:#888;
}

.prev-post.a-wrap.border-element.cf:hover{
	animation:anime2 4s ease-in-out infinite;
}

.prev-post.a-wrap.border-element.cf:hover img{
	animation:enlarge-img 200ms ease-in-out both;
}


/*次の記事*/

.next-post.a-wrap.cf{
	border-radius:5px;
}

.fa.fa-chevron-right.iconfont{
	color:#888;
}

.next-post.a-wrap.cf:hover{
	animation:anime2 4s ease-in-out infinite;
}

.next-post.a-wrap.cf:hover img{
	animation:enlarge-img 200ms ease-in-out both;
}


/*関連項目（カード）*/

.related-entry-card-wrap.a-wrap.border-element.cf{
	border-radius:5px;
}

.related-entry-card-wrap.a-wrap.border-element.cf:hover{
	animation:anime2 4s ease-in-out infinite;
}

.related-entry-card-wrap.a-wrap.border-element.cf:hover img{
	animation:enlarge-img 200ms ease-in-out both;
}

.related-entry-card.e-card.cf{
	display:flex;
	align-items:center;
}

.related-entry-card.e-card.cf img{
	flex-shrink:0;
}

.related-entry-card-content.card-content.e-card-content{
	margin-left:0px;
	padding-bottom:0;
}

.related-entry-card-thumb.card-thumb.e-card-thumb{
	flex-shrink:0;
}

/*ここまで記事内*/


/*先頭に戻るボタン*/

.go-to-top-button{
	color:#fff;
	border-radius:50%;
	border:solid 2px #fff;
	background-color:#2d2d2d;
	transition:all 100ms ease;
}

.go-to-top-button:hover{
	animation:anime1 1s ease-in-out alternate infinite;
}

@keyframes anime1{
	0%{color:#fff;}
	100%{color:rgb(77,147,255);}
}





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

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

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