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

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

/*ブログカードのスニペット非表示*/
.blogcard-snippet{
	display: none;
}

/*サイドバーのカテゴリーデザイン*/
.widget_categories ul li{
	padding-left:10px;
	border-bottom:1px dotted #767376;
}

.widget_categories ul li a,{
	font-size: 0.95rem; 
}

.widget_categories ul li a:before{
	font-family: "Font Awesome 5 Free";
	content:"\f35a";
	color:#767376;
	font-weight: 800;
	margin-right:6px;
}

.widget_categories ul .children li a:before{
	font-family: "Font Awesome 5 Free";
	content:"\f192";
	color:#767376;
	font-weight: 800;
	margin-right: 6px;
}

.widget_categories ul .children li{
	border-bottom:none;
}

.widget_categories ul .children li a{
	padding: 3px 10px;
	font-size: 0.92rem;
}

.widget_categories ul li a:hover{
	background:transparent;
	color:#A1A7A8;
	margin-left:5px;
}

.widget_categories ul li a .post-count{
	border:1px solid rgba(221, 221, 221, 0.867);
	border-radius:5px;
	font-size:0.9rem;
	padding:1px 10px;
}

.widget_categories ul li a:hover .post-count{
	border-color:#767376;
	background:#767376;
	color:#DFE1E7;
	transition:.4s;
}
/********************/

/*サイドバーと投稿本文下のSNSデザイン*/

.btn-social-long-insta {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 100%;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 18px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.btn-social-long-insta:before {
  /*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-social-long-insta .fa-instagram {
  /*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 6px;
  left: -15px;/*アイコン位置の微調整*/
}

.btn-social-long-insta span {
  /*テキスト*/
  display:inline-block;
  position: relative;
	left: 1px;
}

/*  */
.btn-social-long-insta-sub {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 100%;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 18px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.btn-social-long-insta-sub:before {
  /*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-social-long-insta-sub .fa-instagram {
  /*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: -43px; /*アイコン位置の微調整*/
}

.btn-social-long-insta-sub span {
  /*テキスト*/
  display:inline-block;
    position: relative;
    top: -48px;
    left: 1px;
}

/*  */
.btn-social-long-insta-manga {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 100%;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 16px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.btn-social-long-insta-manga:before {
  /*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-social-long-insta-manga .fa-instagram {
  /*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
    top: -43px;
    left: -4px;/*アイコン位置の微調整*/
}

.btn-social-long-insta-manga span {
  /*テキスト*/
  display:inline-block;
  position: relative;
    top: -48px;
    left: 0px;
}

/**********/

/*プロフィールの名前の色変更*/
.author-box .author-name a {
  color: #ff99b4;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}
/**********/
/************************************
**　　　　アピールエリア
************************************/
.appeal{
padding:0 0 .1em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
.appeal-content{
background-color:#5ab5bd; /*背景色をこちらで変更します*/
margin:auto;
padding:0;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
.appeal{
padding:.4em 0 .25em;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}
/************/

/*コメント欄*/
.comment-form-email, .comment-form-url, #email-notes{
	display: none;
}
.comment-reply-link{
	color: white;
}
.comment-form-cookies-consent{
font-size:0;
}
.comment-form-cookies-consent:after {
font-size:18px;
content:'次回のコメントで使用するためブラウザーに自分の名前を保存する。';
}
#submit.submit{
	color: white;
	background-color: #ff99b4;
}

/*コメントの返信ボタン文字色*/
.comment-reply-link{
	color: #333333; !important
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.sidebar-menu-button.menu-button{
	background-color: #ff99b4;
	color: #FFFFFF;
}
	/*ロゴタイトル文字色*/
	.mobile-menu-buttons .menu-button > a{
		color: white;
	}
.logo-menu-button.menu-button{
	background-color: #ff99b4;
}
	
	/*プロフィールの説明文の文字色*/
	.author-description{
		color: #333333;
	}

}

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