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

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

/* ✨ あんじゅ専用 完璧なCocoon CSS ✨ */
/* Cocoonの実際のクラス名に基づいた超可愛いスタイル */

/* 🌈 全体のベーススタイル */
body {
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', sans-serif !important;
  background: #fefefe !important;
  line-height: 1.7 !important;
  color: #2c3e50 !important;
}

/* 🌟 ヘッダーエリア */
.header-container {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
  padding: 20px 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* サイトタイトル */
.logo.logo-header.logo-text {
  color: white !important;
  font-size: 2.2em !important;
  font-weight: 700 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.3s ease !important;
}

.logo.logo-header.logo-text:hover {
  transform: scale(1.05) !important;
}

/* キャッチフレーズ */
.tagline {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  margin-top: 5px !important;
}

/* ナビゲーションメニュー */
.navi {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 50px !important;
  margin-top: 15px !important;
}

.navi .navi-in a {
  color: #2c3e50 !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
}

.navi .navi-in a:hover {
  background: #ff6b9d !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* 📝 エントリーカード（記事一覧） */
.a-wrap {
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin-bottom: 30px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.a-wrap:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-5px) !important;
}

/* エントリーカードの画像 */
.a-wrap .card-thumb img {
  transition: transform 0.5s ease !important;
  border-radius: 20px 20px 0 0 !important;
}

.a-wrap .card-thumb:hover img {
  transform: scale(1.05) !important;
}

/* エントリーカードのコンテンツ */
.a-wrap .card-content {
  padding: 25px !important;
}

/* エントリーカードのタイトル */
.a-wrap .card-title {
  font-size: 1.4em !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  margin-bottom: 15px !important;
}

.a-wrap .card-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.a-wrap .card-title a:hover {
  color: #ff6b9d !important;
}

/* カテゴリーラベル */
.cat-label {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  color: white !important;
  padding: 5px 12px !important;
  border-radius: 15px !important;
  font-size: 0.8em !important;
  font-weight: 600 !important;
  transition: transform 0.3s ease !important;
}

.cat-label:hover {
  transform: translateY(-2px) !important;
}

/* 記事の日付・投稿者情報 */
.date-tags,
.post-date {
  color: #7f8c8d !important;
  font-size: 0.9em !important;
}

.post-date::before {
  content: "📅 " !important;
}

/* 🎨 記事内の見出し */
.article h2 {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  color: white !important;
  padding: 15px 25px !important;
  border-radius: 25px !important;
  font-size: 1.5em !important;
  font-weight: 700 !important;
  margin: 40px 0 20px 0 !important;
  box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3) !important;
}

.article h3 {
  color: #ff6b9d !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  padding: 12px 0 12px 20px !important;
  border-left: 5px solid #ff6b9d !important;
  background: rgba(255, 107, 157, 0.1) !important;
  border-radius: 0 10px 10px 0 !important;
  margin: 30px 0 15px 0 !important;
}

.article h4 {
  color: #2c3e50 !important;
  font-size: 1.2em !important;
  font-weight: 600 !important;
  padding: 8px 0 8px 15px !important;
  border-left: 3px solid #a8e6cf !important;
  margin: 25px 0 15px 0 !important;
}

/* 📖 目次 */
.article .toc {
  background: #ffffff !important;
  border: 2px solid #ff6b9d !important;
  border-radius: 20px !important;
  padding: 20px !important;
  margin: 30px 0 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

.toc-title {
  background: #ff6b9d !important;
  color: white !important;
  font-size: 1.2em !important;
  font-weight: 700 !important;
  padding: 10px 15px !important;
  border-radius: 15px !important;
  margin: 0 0 15px 0 !important;
}

.toc-title::before {
  content: "📋 " !important;
}

.toc-content ol li,
.toc-content ul li {
  color: #2c3e50 !important;
  padding: 5px 0 !important;
  transition: color 0.3s ease !important;
}

.toc-content ol li:hover,
.toc-content ul li:hover {
  color: #ff6b9d !important;
}

/* 🛍️ ブログカード */
.a-wrap .blogcard {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.a-wrap .blogcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
}

/* ブログカードのラベル */
.blogcard-type .blogcard-label {
  background: #ff6b9d !important;
  color: white !important;
  font-weight: 600 !important;
}

/* 🎁 タブ見出しボックス */
.tab-caption-box {
  border-radius: 15px !important;
  overflow: hidden !important;
  margin: 25px 0 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

.tab-caption-box-label {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
}

.tab-caption-box-content {
  background: #ffffff !important;
  padding: 20px !important;
}

/* 🔘 ボタンスタイル */
.btn,
.more-link,
.wp-block-button__link {
  background: #ff6b9d !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  display: inline-block !important;
}

.btn:hover,
.more-link:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3) !important;
  color: white !important;
}

/* 📱 サイドバー */
.sidebar .widget {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 25px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s ease !important;
}

.sidebar .widget:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
}

.sidebar .widget-title {
  color: #ff6b9d !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  position: relative !important;
}

.sidebar .widget-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 0 !important;
  width: 50px !important;
  height: 3px !important;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  border-radius: 2px !important;
}

/* 💬 SNSシェアボタン・フォローボタン */
.sns-share,
.sns-follow {
  text-align: center !important;
  margin: 30px 0 !important;
}

.sns-share .sns-share-buttons a,
.sns-follow .sns-follow-buttons a {
  border-radius: 15px !important;
  transition: transform 0.3s ease !important;
  margin: 5px !important;
}

.sns-share .sns-share-buttons a:hover,
.sns-follow .sns-follow-buttons a:hover {
  transform: translateY(-3px) !important;
}

/* 🌈 特別なエフェクト */
::selection {
  background: rgba(255, 107, 157, 0.3) !important;
}

/* スクロールバー */
::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: #fefefe !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff6b9d !important;
}

/* ✨ アニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInUp 0.8s ease !important;
}

/* 🌟 特別なテキストスタイル */
.special-text {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
}

/* 📱 レスポンシブ対応 */
@media (max-width: 768px) {
  .logo.logo-header.logo-text {
    font-size: 1.8em !important;
  }
  
  .a-wrap .card-content {
    padding: 20px !important;
  }
  
  .article h2 {
    padding: 12px 20px !important;
    font-size: 1.3em !important;
  }
  
  .article h3 {
    font-size: 1.2em !important;
  }
}

@media (max-width: 480px) {
  .logo.logo-header.logo-text {
    font-size: 1.5em !important;
  }
  
  .a-wrap .card-content {
    padding: 15px !important;
  }
  
  .article h2 {
    padding: 10px 15px !important;
    font-size: 1.2em !important;
  }
  
  .sidebar .widget {
    padding: 20px !important;
  }
}