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

/************************************
** 1. サイト全体のモダン化
************************************/
/* Google Fontsの読み込み（見やすく美しいフォント: Noto Sans JP） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
body {
  font-family: 'Noto Sans JP', sans-serif !important;
  color: #333; /* 文字色を少し柔らかい黒に */
  background-color: #f7f9fb; /* 背景を完全な白ではなく、薄いブルーグレーにして高級感を出す */
}
/* コンテンツエリア全体に緩やかな影をつけて浮き上がらせる */
.main, .sidebar {
  background-color: #fff;
  border-radius: 12px; /* 角を少し丸く */
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05); /* 上品な影 */
  padding: 20px; /* 余白を確保の調整 */
  margin-top: 20px;
}
/* サイドバーの各ウィジェットのデザイン */
.widget {
  border: none !important; /* デフォルトの枠線を消す */
  margin-bottom: 24px;
}
.widget-title {
  background: transparent !important; /* 背景色を透明に */
  border-bottom: 2px solid #333; /* 下線のみのシンプルデザインに */
  padding: 10px 0;
  font-weight: 700;
  color: #222;
}
/************************************
** 2. 記事カードのリッチ化（浮き上がり・ズーム）
************************************/
/* カード全体のスタイル */
.entry-card-wrap {
  border: none !important; /* 既存の枠線を消す */
  border-radius: 12px; /* カードの角丸 */
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 通常時の薄い影 */
  transition: all 0.3s ease; /* アニメーションの速度 */
  overflow: hidden; /* 画像拡大時のはみ出し防止 */
  margin-bottom: 20px;
}
/* カーソルを乗せたとき（ホバー時）の動き */
.entry-card-wrap:hover {
  transform: translateY(-5px); /* 少し上に浮き上がる */
  box-shadow: 0 12px 24px rgba(0,0,0,0.12); /* 影を濃くして立体感を強調 */
}
/* サムネイル画像の設定 */
.entry-card-thumb {
  overflow: hidden;
}
.entry-card-thumb img {
  transition: transform 0.5s ease; /* 画像拡大の速度 */
}
/* ホバー時に画像を拡大 */
.entry-card-wrap:hover .entry-card-thumb img {
  transform: scale(1.08); /* 1.08倍に拡大 */
}
/* 記事タイトルのデザイン */
.entry-card-title {
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 8px;
}

/************************************
** 4. スマホ2列時のタイトル調整
************************************/
@media screen and (max-width: 480px){
  /* カードタイトルの文字サイズを調整して読みやすく */
  .entry-card-title {
    font-size: 13px !important; /* 少し小さくして改行を減らす */
    line-height: 1.4; /* 行間を少し詰める */
    max-height: none !important; /* 高さ制限をなくす */
    -webkit-line-clamp: unset !important; /* 行数制限をなくす */
    overflow: visible !important;
  }
  
  /* カード自体の高さ制限もなくす */
  .entry-card-wrap {
    height: auto !important;
  }
}

/************************************
** 5. フローティングCTAボタン（画面下固定）
************************************/
#floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9); /* 背景を少し透けさせて圧迫感を減らす */
  padding: 10px 15px 15px; /* 下側の余白を少し多めに（iPhoneのバー対策） */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  text-align: center;
  /* 最初は隠してアニメーションで出すことも可能ですが、今回はシンプルに表示 */
}
#floating-cta a {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(135deg, #e74c3c, #c0392b); /* 濃い赤グラデーション */
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  padding: 12px 0;
  border-radius: 50px; /* 丸いボタン */
  box-shadow: 0 4px 6px rgba(192, 57, 43, 0.4);
  animation: pulse 2s infinite; /* ドクンドクンと動くアニメーション */
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); } /* 少し大きくなる */
  100% { transform: scale(1); }
}
/* フッターメニューと被らないように調整（Cocoon設定でフッターメニューを使っている場合） */
.mobile-footer-menu-buttons {
  margin-bottom: 70px; /* 必要に応じて調整 */
}