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

/*プラグインのfollowup-linkerの続報あり表記を整えるCSS*/
.followup-section {
  background: #f9f9f9;
  border-left: 4px solid #0073aa;
  padding: 1em;
  margin-top: 2em;
}
.followup-section h3 {
  margin-top: 0;
}

/* エントリーカードの抜粋文を非表示にする */
.entry-card-snippet {
  display: none;
}

/* 先頭固定記事（sticky）を強調 */
article.sticky {
    background: #f0f7ff;
    border-left: 4px solid #0077cc;
    padding: 16px;
    margin-bottom: 20px;
}

article.sticky .entry-card-title {
    font-weight: bold;
    font-size: 1.2em;
}

/* Sticky（先頭固定）記事にバッジを付ける */
article.sticky {
    position: relative;
    overflow: visible;
}

/* バッジ本体 */
article.sticky::before {
    content: "注目";
    position: absolute;
    top: -8px;
    left: -8px;
    background: #ff4d4d;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Sticky（先頭固定）記事：濃いブルー→白の強グラデーション */
article.sticky {
    background: linear-gradient(
        135deg,
        rgba(0, 90, 200, 0.45) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    border-left: 4px solid #005fcc;
    padding: 20px;
    margin-bottom: 24px;
    border-radius: 8px;
}
/* 通常カードの淡いブルーグラデーション */
article.entry-card {
    background: linear-gradient(
        135deg,
        rgba(0, 120, 255, 0.15) 0%,
        rgba(0, 120, 255, 0.05) 35%,
        rgba(255, 255, 255, 0.0) 70%,
        rgba(255, 255, 255, 1) 100%
    );
    border-radius: 8px;
    padding: 16px;
    transition: background 0.4s ease, transform 0.3s ease;
}
/* クリック時にブワッと広がるアニメーション */
article.entry-card:active {
    transform: scale(0.96);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* カード全体にアニメーションを適用 */
.entry-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ホバー時の軽い拡大と影 */
.entry-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
/*カードの影設定*/
.entry-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* sticky 記事に左下バッジを追加 */
article.sticky {
    position: relative;
}

article.sticky::after {
    content: "📌 固定表示中";
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #e3f2fd;
    color: #0d47a1;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
}

/* ページ読み込み時に上から下へフェード＋スライド表示 */
.fade-down {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeDown 0.7s ease-out forwards;
}

/* アニメーション定義 */
@keyframes fadeDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 記事本文 */
.entry-content,
.single .entry-title,
.single .date-tags,
.single .author-info,

/* ニュース一覧カード */
.entry-card,
.entry-card .entry-title,
.entry-card .entry-content,

/* カテゴリページのリスト */
.archive .entry-card,

/* トップページのカード */
.home .entry-card {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeDown 0.7s ease-out forwards;
}
/* 本文の段落を一行ずつパラパラ表示 */
.entry-content p {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeLine 0.4s ease-out forwards;
}

/* 各段落にディレイを自動付与（nth-child） */
.entry-content p:nth-child(1) { animation-delay: 0.05s; }
.entry-content p:nth-child(2) { animation-delay: 0.10s; }
.entry-content p:nth-child(3) { animation-delay: 0.15s; }
.entry-content p:nth-child(4) { animation-delay: 0.20s; }
.entry-content p:nth-child(5) { animation-delay: 0.25s; }
.entry-content p:nth-child(6) { animation-delay: 0.30s; }
.entry-content p:nth-child(7) { animation-delay: 0.35s; }
.entry-content p:nth-child(8) { animation-delay: 0.40s; }

/* 必要なら増やせる */

@keyframes fadeLine {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 記事タイトル・メタ情報などを一気にフェードダウン */
.entry-title,
.single .date-tags,
.single .author-info {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeDown 0.7s ease-out forwards;
}

@keyframes fadeDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 本文の段落を一行ずつパラパラ表示 */
.entry-content p {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeLine 0.4s ease-out forwards;
}

/* 自動ディレイ（必要なら増やせる） */
.entry-content p:nth-child(1)  { animation-delay: 0.05s; }
.entry-content p:nth-child(2)  { animation-delay: 0.10s; }
.entry-content p:nth-child(3)  { animation-delay: 0.15s; }
.entry-content p:nth-child(4)  { animation-delay: 0.20s; }
.entry-content p:nth-child(5)  { animation-delay: 0.25s; }
.entry-content p:nth-child(6)  { animation-delay: 0.30s; }
.entry-content p:nth-child(7)  { animation-delay: 0.35s; }
.entry-content p:nth-child(8)  { animation-delay: 0.40s; }
.entry-content p:nth-child(9)  { animation-delay: 0.45s; }
.entry-content p:nth-child(10) { animation-delay: 0.50s; }

@keyframes fadeLine {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* カードの初期状態 */
.entry-card {
    opacity: 0;
    transform: translateY(-15px);
    animation: fadeCard 0.45s ease-out forwards;
}

/* 親要素に対して nth-child を適用 */
.entry-card-wrap:nth-child(1)  .entry-card { animation-delay: 0.05s; }
.entry-card-wrap:nth-child(2)  .entry-card { animation-delay: 0.10s; }
.entry-card-wrap:nth-child(3)  .entry-card { animation-delay: 0.15s; }
.entry-card-wrap:nth-child(4)  .entry-card { animation-delay: 0.20s; }
.entry-card-wrap:nth-child(5)  .entry-card { animation-delay: 0.25s; }
.entry-card-wrap:nth-child(6)  .entry-card { animation-delay: 0.30s; }
.entry-card-wrap:nth-child(7)  .entry-card { animation-delay: 0.35s; }
.entry-card-wrap:nth-child(8)  .entry-card { animation-delay: 0.40s; }
.entry-card-wrap:nth-child(9)  .entry-card { animation-delay: 0.45s; }
.entry-card-wrap:nth-child(10) .entry-card { animation-delay: 0.50s; }
.entry-card-wrap:nth-child(11) .entry-card { animation-delay: 0.55s; }
.entry-card-wrap:nth-child(12) .entry-card { animation-delay: 0.60s; }
.entry-card-wrap:nth-child(13) .entry-card { animation-delay: 0.65s; }
.entry-card-wrap:nth-child(14) .entry-card { animation-delay: 0.70s; }
.entry-card-wrap:nth-child(15) .entry-card { animation-delay: 0.75s; }
.entry-card-wrap:nth-child(16) .entry-card { animation-delay: 0.80s; }
.entry-card-wrap:nth-child(17) .entry-card { animation-delay: 0.85s; }
.entry-card-wrap:nth-child(18) .entry-card { animation-delay: 0.90s; }
.entry-card-wrap:nth-child(19) .entry-card { animation-delay: 0.95s; }
.entry-card-wrap:nth-child(20) .entry-card { animation-delay: 1.00s; }

@keyframes fadeCard {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}