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

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

/*******************
 * SNSボタン用
********************/

.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
  padding: 0;
}
.follow-me li {
  float: left;
  margin: 0 8px 8px 0;
  padding: 0;
}
.follow-me li a::before {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 44px; /* Button height */
  line-height: 44px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 44px; /* Button width */
}
.follow-me li a:hover::before {
  opacity: 0.7;
}
.follow-me li a[href*="://"]::before       			{ background-color: #EF810F; content: "\f015"; }
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before         { background-color: #ff9900; content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { background-color: #000000; content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { background-color: #3399ff; content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { background-color: #05cc47; content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { background-color: #000000; content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { background-color: #ea4c89; content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { background-color: #007ee5; content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before       { background-color: #3b5998; content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { background-color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { background-color: #0063dc; content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { background-color: #f94877; content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { background-color: #181717; content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { background-color: #dc4e41; content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { background-color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { background-color: #125688; content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { background-color: #d51007; content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { background-color: #0077b5; content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { background-color: #eaeaea; content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { background-color: #bd081c; content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { background-color: #ef3f56; content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { background-color: #ff4500; content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { background-color: #00aff0; content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { background-color: #2d2d2d; content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { background-color: #84bd00; content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { background-color: #171a21; content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { background-color: #eb4929; content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { background-color: #36465d; content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { background-color: #6441a5; content: "\f1e8"; }
.follow-me li a[href*="twitter.com"]::before        { background-color: #55acee; content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { background-color: #1ab7ea; content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { background-color: #11b58a; content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { background-color: #e6162d; content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { background-color: #64d548; content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { background-color: #21759b; content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { background-color: #cd201f; content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { background-color: #ffa500; content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { background-color: #363636; content: "\f000";  font-family: blogicon; }

/*******************
 * プロフィール　ウィジェット　画像非表示
********************/
.author-box .author-thumb {
  display: none;
}
.author-box .author-content{
  margin: 0 ;
}

/*******************
 * リンクデザイン全般
********************/
a{
	color: #190d99;
	transition: .4s;
	text-decoration: none;
}
a:hover{
	color: #190d99;
	text-decoration: underline;
}

/*******************
 * a-wrap 全般
********************/

.a-wrap{
  border-radius: 4px
}
.a-wrap:hover{
	box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
	background-color: white; 
	transform: translateY(-2px);
	transition: all .3s ease;
	text-decoration: none;
}

/*******************
 * ブログカード　デザイン調整
*******************/
.blogcard {
	padding: 1rem;
	color: #666;
}

article .blogcard-wrap,article .blogcard-wrap:first-of-type{
	margin:0;
	border:none;
	padding:0;
}
.blogcard-thumbnail{
	margin-right: 3.5%;
}
.blogcard-thumbnail img{
	border:4px solid #eee;
	box-shadow:.5px .5px 4px rgba(0,0,0,.3);
	border-radius:3px;
}
.blogcard-footer{
	padding:10px 0 0;
}

.a-wrap .blogcard{
	border:3px solid #eee;
}

.blogcard-snippet{
	line-height:1.5em;
	margin:10px 0 0;
	height: 4.3em;
}
.blogcard-site{
	float:right;
	justify-content: flex-end;
}
.blogcard-date{
	font-weight: bold;
	color: #999;
	float:left;
}

.blogcard-type .blogcard-label{
	background-color:
	#c6efff;
	color: #333;
}

@media screen and (max-width: 480px){
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snippet{
		display: none;
	}
	.blogcard-title{
		font-size: 1.05em;
		line-height: 1.5;
	}
}

/*******************
 * 写真キャプション　バックグラウンドカラー
********************/
.wp-caption{
  background-color: #ffffff;
}

.wp-caption-text  {
	margin: 0;
	font-size: 0.7em;
	text-align: center;
}

.wp-caption-text  a:link, .wp-caption-text  a:visited {
	color: #000000;
}



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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	/*ヘッダータイトル幅調整*/
	#header .site-name-text{
		font-size: 5vw; 
	}
	
}