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

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

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

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

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

/************************************
****　全体のバランス
************************************/
.entry-content {/*本文下の空白を削除*/
padding-bottom: 0;
margin-bottom: 0;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {/*本文左右の空白*/
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
.body .article {/*本文SNSフォロー下の空白*/
margin-bottom: 0;
}

/************************************
****　サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.widget_search{
padding:0;
}
span.fas.fa-search::before{
color:#ddc895;/*検索マーク色変更はこちら*/
}
.sidebar h3{
background: none!important;/*背景を消す*/
color: #333333;/*文字色*/
font-size: 20px;/*文字の大きさ*/
border-bottom: solid 2px peru;/*右側の線の種類・太さ・色*/
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
background-color:#f7f7f7;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{
background-color:#ddc895;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
}
.tagcloud a{
background-color:#f7f7f7;
}
.tagcloud a:hover{
background-color:#ddc895;/*マウスオーバー時の背景色変更はこちら*/
color:#fff!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {
margin: 0 0 1em;
width: 90%;
}
.widget-entry-cards .widget-entry-card-content{
color: #565656;
}

.border-partition a:first-of-type{
border-top: none;
}
.widget-entry-cards .a-wrap{
margin: 0.5em 0;
background-color: #ffffff;
border-radius: 10px;/*外枠を丸くする*/
}
.card-thumb img{
border-radius: 10px;/*画像を丸くする*/
}

/************************************
****　サイドバーブログカード
************************************/
.sidebar a.popular-entry-card-link.a-wrap{
margin:0;
padding:0;
}
.sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb{
margin:.5em .0 .5em .2em;
}
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{
padding:.5em .5em .5em .8em;
text-align: justify;
line-height:1.3;
}
.sidebar .popular-entry-cards.widget-entry-cards.no-icon.cf {
margin-bottom: 0;
}

/******************************************************
**** モバイル表示　ヘッダーメニュー・検索アイコン
*******************************************************/
.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
color:#ddc895;/*検索マーク色変更はこちら*/
margin-left:1em;
}
span.fas.fa-bars::before{
color:#ddc895;/*ハンバーガーメニュー色変更はこちら*/
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#ffffff;/*矢印色変更はこちら*/
}
.navi-menu-content {
	background: #ddc895;
}
ul.menu-drawer:after {
background-color: #ddc895;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.2em;
background-color:#ddc895;
color:#ffffff;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#fff8dc;
border-radius: 7px;/*外枠を丸くする*/
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#ffffff;
margin:0 .5em 0 1em;
}

/************************************
**** 次ページカスタマイズ
************************************/
.pagination-next-link {
  display: none;
}
.pagination-next-link {
	border-radius: 15px;
	border: solid 2px #ddc895;
	background-color: #ddc895;
	color: white;
}
.page-numbers {
	border-radius: 50px;
	background-color: #ddc895;
	color: white;
}
.pagination .current {
        background-color: #dd9830;
}

/************************************
**** コメントのカスタマイズ
************************************/
.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}
.comment-btn {
font-size:18px; /*文字の大きさ*/
font-weight:500; /*文字の太さ*/
padding:10px; /*文字周り余白*/
border-radius:30px; /*ボタン角の丸み*/
color:#fff; /*文字色 */
background:#ddc895; /*ボタンの背景色 */
border:2px solid #ddc895; /* ボタン枠線の太さと色 */
transition:all 0.3s; /*色が変わる時間（秒）*/
}
.comment-btn:hover {
color:#ddc895; /* マウスオーバー時の文字色 */
background:#fff; /* マウスオーバー時のボタンの背景色 */
border:2px solid #ddc895; /* マウスオーバー時のボタン枠線の太さと色 */
}
.comment-form .form-submit input {
background-color: #ddc895;
border-color: #72c7e6;
border: 2px solid #ddc895;
color: #333;
border-radius:30px; /*ボタン角の丸み*/	
}

/************************************
****　サイトロゴのフォント変更
************************************/
.logo-header a span{
font-family: 'Avenir','Helvetica Neue';
font-size:46px;
font-weight: 700;
font-family: 'Avenir','Helvetica Neue';
font-weight: bold;
font-size:36px;
text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 1px 0 0 #FFF;	
}

/************************************
****　フッターメニューを一列に
************************************/
@media screen and (max-width: 834px){
	.navi-footer-in>.menu-footer {
flex-wrap: nowrap;
	}
	
	.navi-footer-in a{
		font-size: 70%;/*フッターメニューの文字の大きさを変更*/
	}
}

.widget-entry-cards .a-wrap {
	margin: 12.25px 0;
	padding: 9.8px;
}