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

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

/*グローバルメニューのフォントサイズ等変更*/
.navi-in .menu-header .item-label{
font-size: 20px;
font-weight: bold;
}

/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background: #F6C6C7;
	color: #000000;
	height: 60px;
}

.logo-menu-button.menu-button{
	background: #F6C6C7;
	height: 60px;
}

.mobile-menu-buttons{
	background: #F6C6C7;
}

/*ヘッダーの文字色と背景色を変える追加CSS*/
.menu-button-in{
	color: #000000!important;
	background-color: #F6C6C7!important;
}

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ================================
   エントリーカードに READ MORE ボタンを表示
   ================================ */
/* 首页卡片：预留按钮空间 */
.entry-card-wrap {
  position: relative;
  padding-bottom: 60px;
  margin-bottom: 30px;
}

/* 首页 READ MORE 按钮 */
.entry-card-wrap::after {
  content: "READ MORE";
  display: inline-block;
  padding: 8px 22px;
  background-color: #F4D0DC;  /* ← 新粉色 */
  color: #000000;             /* 白色字体 */
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}

/* hover */
.entry-card-wrap:hover::after {
  background-color: #edc5c5;
}


/* ======================================
   Query Loop / 分类页按钮（白字版）
   ====================================== */
/* travel-coupons 等菜单页用的按钮样式 */
.wp-block-post-excerpt__more-link,
.wp-block-latest-posts__read-more {
  display: block;             /* 独占一行，自动换行 */
  width: fit-content;         /* 按钮宽度随文字 */
  padding: 8px 22px;
  margin: 16px 0 18px;        /* 按钮上下的空白 */
  background-color: #F4D0DC;  /* 你指定的粉色 */
  color: #000000;             /* 白字 */
  border-radius: 4px;
  font-size: 15px;            /* 字大一点 */
  font-weight: 600;           /* 微微加粗 */
  text-decoration: none;
}

/* hover 效果 */
.wp-block-post-excerpt__more-link:hover,
.wp-block-latest-posts__read-more:hover {
  background-color: #e8b8c6;
  text-decoration: none;
}
/* ======================================
   Menu / Query Loop 的 READ MORE 按钮专用样式
   ====================================== */

.wp-block-post-excerpt__more-link,
.wp-block-latest-posts__read-more {
  display: block;             /* 独占一行 */
  width: fit-content;         /* 宽度跟文字走 */
  margin: 20px auto 70px auto; /* 上 20px，下 70px（下面比较多）居中 */
  padding: 10px 26px;         /* 按钮更美观一些 */
  background-color: #F4D0DC;  /* 你的粉色 */
  color: #000000;             /* ★ 字体：黑色 */
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* hover */
.wp-block-post-excerpt__more-link:hover,
.wp-block-latest-posts__read-more:hover {
  background-color: #e8b8c6;
  text-decoration: none;
}