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

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

/* 新着記事一覧 カテゴリーラベルは必要な部分のみ表示 まず全て非表示にする*/
.new-entry-card.widget-entry-card .cat-label {
  display: none;
}

/* 新着記事一覧 カテゴリーラベルは必要な部分のみ表示 cstm-pat-2のクラス名がある場合は表示*/
.post-label .new-entry-card.widget-entry-card .cat-label {
  display: block;
}

/* 人気記事一覧 カテゴリーラベルは必要な部分のみ表示 まず全て非表示にする*/
.popular-entry-card.widget-entry-card .cat-label {
  display: none;
}

/* 人気記事一覧 カテゴリーラベルは必要な部分のみ表示 cstm-pat-5のクラス名がある場合は表示*/
.post-label2 .popular-entry-card.widget-entry-card .cat-label {
  display: block;
}


.blue-text {
  color: blue;
}

.white-text {
  color: white;
}



.center-block {
  margin: 0 auto;
  width: 80%; /* 必要に応じて調整 */
}

.yugothic {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
}

.Meiryo {
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	font-weight: 900;
}



/* More btn */
p.cstm-more-btn1 {
  display: flex;
  font-size: 30px;
  line-height: 1.2;
  width: 100%;
}

p.cstm-more-btn1 a {
  display: inline-block;
  width: fit-content;
  transition: color 0.3s ease-in-out;
  text-decoration: none;
  position: relative;
}

p.cstm-more-btn1 a::before {
  display: block;
  content: "";
  background-color: var(--white);
  width: 4em;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 120%;
  margin: auto;
  transition: transform 0.3s ease-in-out;
}

p.cstm-more-btn1 a:hover::before {
  transform: translate(1em);
}

p.cstm-more-btn1 {
  justify-content: center;
  padding-right: 0em;
}


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

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

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