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


/* ===== ミセルラボ インスタカラーカスタム ===== */
:root {
  --insta-pink: #E1306C;
  --insta-purple: #833AB4;
  --insta-orange: #F77737;
  --insta-yellow: #FCAF45;
  --insta-grad: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --insta-grad-btn: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%);
  --insta-light: #FFF0F5;
}

/* ヘッダー */
#header, .site-header, .header-container, .header-container-in {
  background: var(--insta-grad-btn) !important;
}
.site-name a, .site-name, #site-title a, #site-title,
.site-description, #site-description, .header-logo-link {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* グローバルナビ */
#navi .navi-in > ul > li > a,
.navi a, .global-navi a {
  color: #fff !important;
}
#navi .navi-in > ul > li > a:hover, .navi a:hover {
  color: #FCAF45 !important;
  background: rgba(255,255,255,0.15) !important;
}

/* 見出しh2 */
.article h2, .entry-content h2, .page-content h2 {
  border-left: 4px solid var(--insta-pink);
  background: linear-gradient(90deg, #FFF0F5 0%, #ffffff 100%);
  color: #222;
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
}

/* 見出しh3 */
.article h3, .entry-content h3, .page-content h3 {
  border-bottom: 2px solid var(--insta-orange);
  color: #E1306C;
  padding-bottom: 4px;
}

/* リンク色 */
.article a, .entry-content a, .page-content a {
  color: var(--insta-purple);
}
.article a:hover, .entry-content a:hover, .page-content a:hover {
  color: var(--insta-pink);
}

/* ボタン */
.wp-block-button__link, .btn, .button, .cocoon-block-button__link {
  background: var(--insta-grad-btn) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 30px !important;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(225,48,108,0.3) !important;
  transition: opacity 0.3s, transform 0.2s;
}
.wp-block-button__link:hover, .btn:hover, .button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* フッター */
#footer, .footer {
  background: linear-gradient(135deg, #2d1b3d 0%, #1a0a24 100%) !important;
  color: #fff;
}
#footer a, .footer a { color: #FCAF45 !important; }

/* 目次 */
.toc-title { background: var(--insta-grad-btn) !important; color: #fff !important; }
.toc-list a { color: var(--insta-purple) !important; }
.toc-list a:hover { color: var(--insta-pink) !important; }

/* テーブル */
.wp-block-table thead th { background: var(--insta-grad-btn); color: #fff; }

/* タグ・カテゴリ */
.cat-label, .entry-category a, .post-category a {
  background: var(--insta-grad-btn) !important;
  color: #fff !important;
  border-radius: 4px;
  padding: 2px 8px;
}

/* カード */
.card-wrap, .a-wrap { border-radius: 12px; overflow: hidden; transition: box-shadow 0.3s; }
.card-wrap:hover, .a-wrap:hover { box-shadow: 0 4px 20px rgba(225,48,108,0.2); }

/* ページネーション */
.page-numbers.current {
  background: var(--insta-grad-btn);
  color: #fff !important;
  border-radius: 50%;
}


/* ===== シェアボタン・フォローボタンの文字色を白に固定 ===== */
/* ナビリンクのCSS影響をシェアボタンから除外 */
.share-button a,
.share-button a:link,
.share-button a:visited,
.share-button a:hover,
.share-buttons a,
.btn-wrap a,
.snsshare a,
.sns-share a,
.share .twitter-button a,
.share .facebook-button a,
.share .line-button a,
[class*="share-button"] a,
[class*="btn-sns"] a {
  color: #fff !important;
}

/* Cocoonのシェアボタン本体のアイコン・テキストを白に */
.share .share-button .share-button-icon,
.share .share-button .share-button-name,
.share .snsbutton,
.snsbuttons .snsbutton a,
.share-twitter a,
.share-facebook a,
.share-line a,
.share-twitter .share-button-name,
.share-facebook .share-button-name,
.share-line .share-button-name,
.twitter-button a,
.facebook-button a,
.line-button a {
  color: #fff !important;
}

/* Cocoonシェアボタンの全リンクを確実に白に */
.share a, .share a *, .share-top a, .share-top a *,
.share-bottom a, .share-bottom a * {
  color: #fff !important;
}


/* カテゴリリンク（記事フッター）をインスタグラデーションに */
.cat-link,
.entry-categories .cat-link,
.entry-categories-tags .cat-link {
  background: linear-gradient(135deg, #833ab4 0%, #e1306c 50%, #f77737 100%) !important;
  background-image: linear-gradient(135deg, #833ab4 0%, #e1306c 50%, #f77737 100%) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
}
.cat-link .fa,
.cat-link .cat-icon,
.entry-categories .cat-link .fa,
.entry-categories .cat-link .cat-icon {
  color: #fff !important;
}


/* Instagramシェアボタン */
.instagram-share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #833ab4 0%, #e1306c 50%, #f77737 100%) !important;
  color: #fff !important;
  padding: 10px 16px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: bold !important;
  min-width: 100px !important;
  flex: 1 !important;
}
.instagram-share-btn .fa {
  color: #fff !important;
  font-size: 1.2em !important;
}
.instagram-share-btn:hover {
  opacity: 0.85 !important;
  color: #fff !important;
}