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

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


/*サイドバー文字サイズ*/
.sidebar .widget-entry-card-title{
  font-size: 90%; /* 通常の90％のサイズとします */
}

/*サイドバー記事表示*/
.sidebar .navi-entry-card-title{
display:none;
}
.sidebar .navi-entry-card-thumb{
   width: 100%;
   height: 100%;

}
.sidebar .navi-entry-card-thumb img{
 border-radius:10px; /*角丸め*/
border: 2px solid #828282;
}

.sidebar .navi-entry-card-link{
   width: 80%;
   height: auto;
  margin:  auto;
}



/* 内部ブログカードのアイコンとURLを非表示 */
.internal-blogcard-footer{
	display: none; 
}
/* 内部ブログカードのアイコンとURLを非表示 */
.eye-catch-image.wp-tag-image{
	display: none; 
}

/*オンマウス*/
#recommended .navi-entry-card-thumb {
	border-radius: 50%;
	transition: all 0.6s ease 0s;

}
#recommended .navi-entry-card-thumb:hover {
	cursor: pointer;
	transform: scale(1.1, 1.1);

}


/* ヘッダーメニューカスタマイズ */
#navi .navi-in > .menu-header .item-label{
	font-size: 15px;
   font-weight: bold;
}
#navi .navi-in > ul li{
	height: 50px;
	line-height: 50px;
}

.caption-wrap:hover {
    font-weight: bold;
    color: #fff;
   border-bottom: 3px solid #fff;
}

/* ヘッダーロゴカスタマイズ */
.tagline{
	font-weight: bold;
}

/************************************
** ■ホバー時の背景色設定
************************************/
.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,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover
{
  background-color: #dcdcdc; /*背景色*/
  transition: all 0.8s ease; /*アニメーション*/
  color: #333; /*フォントカラー*/
}

/************************************
**WPボタン表示
************************************/
.wp-block-button  a:hover { /*マウスホバー時*/
	  background-color: #267ca7; /*背景色*/
  color: #fff; /*フォントカラー*/
    transition: 0.5s; /*アニメーションの時間*/
}

.wp-block-button ::before{
 display:none;
}

/*カテゴリーやタグページの見出し*/
.archive-title {
  color: #5f5f5f;
  text-align: center;
  font-family: 'Baloo Thambi 2', noto sans jp;
  font-size: 25px !important;
  margin-left: -10px;
}
.archive-title :before {
  display: none;
}

/************************************
**　　　　アピールエリア
************************************/
.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:50px;
}
.appeal-content{
background-color:#828282; /*背景色をこちらで変更します*/
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:.1em 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;
}

/************************************
** 目次
************************************/
/* 目次全体デザイン */
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border-top:5px solid;
    border-top-color:#FFC679;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 25px;
}

.toc-title{
font-weight:bold;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f138";
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #ff8e3c;/*ピンクの色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}

/************************************
**ブログ記事紹介文
************************************/
.internal-blogcard-snippet{
    display: none;
}




/* 「送信する」ボタン */
input.wpcf7-submit {
    display: block;
    padding: 10px;
    width: 400px;
    background: #267ca7;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 2px;
    margin: 15px auto 0
}
@media screen and (max-width:768px){
input.wpcf7-submit {
width: 250px;
}
}

input.wpcf7-submit:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
	opacity:0.7;
}



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

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

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