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

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

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

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

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

/*-----グローバルメニュー----*/
/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #fff!important;
	background: #b4724c;
	transition: all 0.5s ease;
}
/*サブメニューの背景をグレーに*/
#navi .navi-in > .menu-header .sub-menu{
	background: #808080;
}


/*タグクラウドを丸く*/
.tagcloud a {
    background: #FDE0A5; /*背景を消す*/
    border: 1px solid #FDE0A5; 
    border-radius: 22px; /*角の丸み*/
    color: #424242; /*文字色*/
    display: inline-block;
    padding: 3px 15px;
    text-decoration: none;
    margin: 2px;
    flex: 0 1 auto;
    display: flex;
    justify-content: space-between;
	font-size: 14px; /* 文字の大きさを指定 */
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #b4724c;
    border: 1px solid #b4724c;
    color: #fff;
    transition: 0.5s; /*アニメーションの時間*/
}

/* PCサイズ（960px以上）のとき、メインエントリーカードを4列表示にする */
@media screen and (min-width: 960px) {
  .ect-3-columns {
    display: flex;
    flex-wrap: wrap;
    /* 4枚以下のときに左寄せにする */
    justify-content: flex-start;
    /* カードの間隔を調整 */
    gap: 15px; /* カード間のスペースを15pxに統一*/
  }

  .ect-3-columns .entry-card-wrap {
    /* 15pxの隙間を3つ分引いた幅を計算 */
    width: calc(25% - 11.25px); /* 15px × 3 ÷ 4 = 11.25px */
    margin-bottom: 10px; /* カード下の余白も変更 */
  }
}

/* タブレットサイズ（600px以上959px以下）のときの調整 */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .ect-3-columns {
    /* 2列表示で左寄せ */
    justify-content: flex-start;
    gap: 15px; /* カード間のスペースを15pxに統一*/
  }

  .ect-3-columns .entry-card-wrap {
    /* 15pxの隙間を1つ分引いた幅を計算 */
    width: calc(50% - 7.5px); /* 15px × 1 ÷ 2 = 7.5px */
    margin-bottom: 10px; /* カード下の余白も変更 */
  }
}

/* モバイルサイズ（599px以下）の調整 */
@media screen and (max-width: 599px) {
  .ect-vertical-card .entry-card-wrap,
  .ect-3-columns .entry-card-wrap {
    /* 1列表示で隙間なし */
    width: 100%;
    /* 15pxの間隔を適用 */
    margin-bottom: 10px;
  }
}

/* ブログカード 浮かせない背景色*/
.a-wrap:hover {
  background-color: #fffae8;
  transform: translateY(0px);
  box-shadow: 0 0 0px #ffffff;
}


/* カテゴリーラベル非表示 */
.entry-card .cat-label,
.related-entry-card .cat-label{
display: none;
}

/* サイドバー全体 */
div.sidebar {
	padding: 20px;
}

/* サイドバー新着イラスト部分 */
#sidebar .card-thumb img{
 width: 110px;
 height: 110px;
 object-fit: cover;
 margin-left: 5px;
}
#sidebar .widget-entry-cards figure {
 width: 110px;
}
#sidebar .widget-entry-card-content {
 margin-left: 130px;
	padding-top: 10px; /* 上に10pxの余白を追加 */
}


/* スクロールトップボタン */
.go-to-top {
  bottom: 35px;
}

.go-to-top-button {
  width: 45px;
  height: 45px;
  color: #fff;
  background-color: #70372c;
  border-radius: 50%;
  transition: all 0.3s;
}

.go-to-top-button:hover {
  color: #b4724c;
  background-color: #FDE0A5;
}

/*関連イラスト見出し*/
.related-entry-heading {
	border: 0;
	padding:  0px 20px;
	font-size: 20px;
	color: #70372c;
	background-color: #FDE0A5;
}
/*インデックスタイトル文字サイズと中央揃え*/
.entry-card-title {
	text-align: center;
	font-size: 15px;
}
/*投稿ページタイトル中央揃え*/
.single .entry-title {
	text-align: center;
}
/*投稿本文下中央揃え*/
.article-footer, .entry-footer {
		text-align: center;
}

/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
/*SNSシェアボタン設置場所の背景を白に*/
.article-footer, .entry-footer {
  background: none;
}
.pager-post-navi {
  background: none;
}