@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){
  /*必要ならばここにコードを書く*/
}


/* ============================================
   Cocoon 9:16 サムネイルを上部に寄せる（A4縦画像用）
============================================ */

/* 通常のカード（記事一覧） */
.entry-card-thumb {
    background-position: top center !important; /* 上に寄せる */
    background-size: cover !important;         /* 全体を埋める */
}

/* サムネイル画像が img タグの場合も保険で適用 */
.entry-card-thumb img {
    object-position: top center !important;    /* 上側を優先表示 */
    object-fit: cover !important;              /* 切り抜くけど上基準 */
}


.main-catch strong {
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
               "ヒラギノ丸ゴ ProN", "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ヒーローをはみ出させない */
.full-width-hero {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ページ上の余白を消す */
.wp-site-blocks {
  padding-top: 0;
}

/* NEWバッジ（サムネ用） */
.new-thumb-wrap{
  position: relative;
  display: inline-block;
}

.new-thumb-badge{
  position: absolute;
  top: 0px;
  right: 2px;
  background: #ff3b30;
  color: #fff;
  font-size: 5px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 6px;
  z-index: 10;
  letter-spacing: 1px;
  animation: newFlash 1.2s infinite;
}

@keyframes newFlash{
  0%{opacity:1;}
  50%{opacity:.4;}
  100%{opacity:1;}
}


/* カテゴリーラベルを中央下へ */
.entry-card-thumb .cat-label {
    position: absolute;
    top: auto;
    bottom: 10px;          /* 下からの距離 */
    left: 50%;
    transform: translateX(-50%);

    background: rgba(255, 179, 0, 0.95); /* 色は好みで */
    color: #fff;
    padding: 3px 8px;
    font-size: 5px;

    z-index: 15;
}

/* ボタンホバー */
.btn,
.wp-block-button a,
a.wp-block-button {
  box-shadow: 0 6px 0 rgba(0,0,0,0.25);
  transition: all .15s ease;
}

.btn:hover,
.wp-block-button a:hover,
a.wp-block-button:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
}

.btn:active,
.wp-block-button a:active,
a.wp-block-button:active {
  transform: translateY(6px);
  box-shadow: none;
}