@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.8
*/

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

/* style.css または 追加CSS の先頭の方に */

/* 既存の .blogcard スタイルが不要な場合はコメントアウト推奨 */
/*
.blogcard-title {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
... (以下、.blogcard関連のスタイルをすべてコメントアウト) ...
.blogcard-snippet {
  display: none;
}
*/

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

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

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

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

/* タイトルを初期状態では非表示にする */
.blogcard-title {
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* フェードイン効果 */
}

/* マウスオーバー時に表示する */
.blogcard:hover .blogcard-title {
  opacity: 1;
}

.blogcard img {
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* イージング関数を使用 */
}

/* ブログカード全体のスタイル */
.blogcard {
  position: relative; /* 子要素を相対配置にする */
  overflow: hidden; /* 子要素がはみ出ないようにする */
}

/* 画像 */
.blogcard-thumbnail {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: auto; /* 高さは自動調整 */
  object-fit: contain /* 画像フィット */
}

/* タイトル */
.blogcard-title {
  position: absolute; /* 絶対配置にする */
  bottom: 10px; /* 下から10px */
  left: 10px; /* 左から10px */
  background-color: rgba(0, 0, 0, 0.7); /* 黒色の半透明な背景 */
  color: #fff; /* 文字色を白 */
  padding: 4px; /* 余白 */
  font-size: 10px; /* 10pxに変更（調整してください） */
}

/* ホバー */
.blogcard {
  overflow: visible;
}

.blogcard img {
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* 0.2秒後にアニメーション開始 */
  transform-origin: center center; /* 変換の中心を中央に設定 */
}

.blogcard:hover img {
  transform: scale(1.2) translateY(-10px);
  z-index: 1; /* 他の要素よりも手前に表示 */
}

/* アイコンを非表示にする */
.blogcard-footer {
  display: none;
}

/* スニペットを非表示にする */
.blogcard-snippet {
  display: none;
}

/* 画像・サムネイルの初期非表示 ─ チラ見え防止用 */
.sbi_item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 「もっと見る」ボタンの初期非表示 */
.sbi_load_btn {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* まだ data-animated 属性が付いていないアイテム＝未初期化アイテム */
.sbi_item:not([data-animated="true"]) {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}