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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.body{ background-image : none;}

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

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

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

.site-name-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.2em;
  letter-spacing: 0.05em;
}

/*サムネイル左上のラベルを表示*/
.entry-card-wrap .cat-label {
  display: block;
}

.cat-label {
	display: block;
}

.cat-label-7 {
  background-color: #3B4C36;
	color: #ffffff;
}

.cat-label-8 {
  background-color: #264653;
	color: #ffffff;
}

/*目次の色変更*/
.entry-content .toc-title::before {
  background-color: #6f4e37;
}

.entry-content .toc-list > li::before {
  color: #6f4e37;
}

.index-tab-button {
  background: #6f4e37;
  border: 1px solid #6f4e37;
  letter-spacing: 0.03em;
}

/*トップページカテゴリーの色変更*/
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"] {
  background: #6B9AC4;
  border: 1px solid #6B9AC4;
}

#index-tab-1 ~ .index-tab-buttons .index-tab-button[for="index-tab-1"] {
  font-weight: 700;
  border-radius: 4px; 
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#index-tab-1 ~ .index-tab-buttons .index-tab-button[for="index-tab-1"]:hover {
  border-color: #6B9AC4;
}

#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"] {
  background: #3B4C36;
  border: 1px solid #3B4C36;
}

#index-tab-2 ~ .index-tab-buttons .index-tab-button[for="index-tab-2"] {
  font-weight: 700;
  border-radius: 4px; 
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#index-tab-2 ~ .index-tab-buttons .index-tab-button[for="index-tab-2"]:hover {
  border-color: #3B4C36;
}

#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"] {
  background: #264653;
  border: 1px solid #264653;
}

#index-tab-3 ~ .index-tab-buttons .index-tab-button[for="index-tab-3"] {
  font-weight: 700;
  border-radius: 4px; 
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#index-tab-3 ~ .index-tab-buttons .index-tab-button[for="index-tab-3"]:hover {
  border-color: #264653;
}

#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  background: #6f4e37;
  border: 1px solid #6f4e37;
}

#index-tab-4 ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  font-weight: 700;
  border-radius: 4px; 
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#index-tab-4 ~ .index-tab-buttons .index-tab-button[for="index-tab-4"]:hover {
  border-color: #6f4e37;
}

/*カテゴリーのアイコン設定、色変更*/
.widget_categories ul li.cat-item-7 a::before {
  font-family: FontAwesome;
  content: "\f015";
  color: #6b8e23;
  padding-right: 7px;
}

.widget_categories ul li.cat-item-8 a::before {
  font-family: FontAwesome;
  content: "\f0f4";
  color: #6f4e37;
  padding-right: 7px;
}

.widget_categories ul li.cat-item-18 a::before {
  font-family: FontAwesome;
  content: "\f06d";
  color: #d94f26;
  padding-right: 7px;
}

.widget_categories ul li.cat-item-10 a::before {
  font-family: FontAwesome;
  content: "\f201";
  color: #4a6fa5;
  padding-right: 7px;
}

.widget_categories ul li.cat-item-6 a::before {
  font-family: FontAwesome;
  content: "\f02d";
  color: #4a6fa5;
  padding-right: 7px;
}

/*プロフィールのSNSアイコンの色変更*/
.author-box .sns-follow-buttons a.facebook-button {
  background-color: var(--cocoon-facebook-color);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 34px;
  border: none;
}

.author-box .sns-follow-buttons a.instagram-button {
  background-color: var(--cocoon-instagram-color);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 34px;
  border: none;
}

.author-box .sns-follow-buttons a.feedly-button {
  background-color: var(--cocoon-feedly-color);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 34px;
  border: none;
}


.author-box .sns-follow-buttons a.rss-button {
  background-color: var(--cocoon-rss-color);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 34px;
  border: none;
}

/*ページネーション次へボタン色変更*/
.key-btn {
  background-color: #6f4e37;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.key-btn:hover {
  background-color: #6f4e37;
  color: #fff;
  opacity: 0.8;
}

/*もっと見るボタンの色変更*/
.list-more-button {
  background-color: #6f4e37;
}

.list-more-button:hover {
  background-color: #6f4e37;
}

/* 関連記事のサムネイル丸める */
.related-entry-card-thumb img {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

/* 関連記事　区切り線 */
.rect-mini-card .related-entry-card-wrap {
  border-bottom: 1px dashed #ccc; 
}

/* 関連記事アイコンの設定 */
.related-entry-heading::before, .comment-title::before {
  background-color: #f8c678;
  color: #fff;
}

/* h4の色変更 */
.entry-content h3::before {
  background: #333333;
}

/* h3の見出しの色変更 */
.entry-content h4::before {
  border-left: solid 15px transparent;
  border-bottom: solid 15px #333333;
}

.entry-content h4::after {
  border-bottom: solid 3px #333333;
}

/* カルーセル関連　タイトル消す */
/* #carousel .carousel-entry-card-title {
  display: none;
} */

#carousel .carousel-in {
  background-color: transparent;
}

/* ドットを消す */
#carousel .slick-dots {
  display: none !important;
}

/* サムネイルの上を丸める */
.slick-slide img {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

/* サムネイルのサイズ調整 */
/* .carousel-entry-card-thumb {
  width: 95%;
} */

/* カテゴリーを消す */
.carousel .cat-label {
  display: none;
}

/* グローバルナビのデザイン調整 */
#navi .caption-wrap .item-label {
  position: relative;
　font-size: clamp(13px, 2vw, 15px);
  color: #333333;
  text-decoration: none;
	font-weight: 700;
}

#navi .caption-wrap .item-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #6f4e37;
  transition: width 0.3s ease-in-out;
}

#navi .caption-wrap .item-label:hover {
  color: #6f4e37;
}

#navi .caption-wrap .item-label:hover::after {
  width: 100%;
}