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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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;
}


/* ===== スマホ・タブレットでサイドバーを非表示 ===== */
@media screen and (max-width: 834px) {
  #sidebar,
  .sidebar,
  .sidebar-menu-content,
  aside.sidebar {
    display: none !important;
  }
  #main,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
}


/* ===== フッター：レイアウト修正（看板左・リンク右・コピーライト右） ===== */

/* footer-bottom：看板（左）＋メニュー・コピーライト（右）横並び */
div.footer-bottom,
div.footer-bottom.fdt-logo {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  float: none !important;
  padding: 20px 24px 16px !important;
  gap: 20px !important;
}

/* 看板：左寄せ */
div.footer-bottom .footer-bottom-logo,
div.footer-bottom.fdt-logo .footer-bottom-logo {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  width: auto !important;
  text-align: left !important;
  order: 1 !important;
}

div.footer-bottom .footer-bottom-logo img,
.footer-bottom-logo img.footer-site-logo-image {
  max-width: 220px !important;
  width: 200px !important;
  height: auto !important;
  display: block !important;
}

/* メニュー＋コピーライト：右寄せ */
div.footer-bottom .footer-bottom-content,
div.footer-bottom.fdt-logo .footer-bottom-content {
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
  flex: 1 !important;
  order: 2 !important;
  overflow: visible !important;
}

/* フッターナビ：右寄せ・折り返し有効 */
div.footer-bottom .footer-bottom-content .navi-footer,
div.footer-bottom .footer-bottom-content #navi-footer {
  text-align: right !important;
  width: 100% !important;
}

div.footer-bottom .footer-bottom-content .menu-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  gap: 0 !important;
}

div.footer-bottom .footer-bottom-content .menu-footer li {
  display: inline !important;
  white-space: nowrap !important;
}

/* 「業種別サポート一覧」の前で改行 */
div.footer-bottom .footer-bottom-content li#menu-item-229 {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
}

/* コピーライト：右寄せ・3行目 */
div.footer-bottom .footer-bottom-content .copyright,
div.footer-bottom .footer-bottom-content .site-info,
.footer-bottom .footer-bottom-content p,
#footer .copyright {
  text-align: right !important;
  display: block !important;
  width: 100% !important;
  margin-top: 4px !important;
  font-size: 0.85em !important;
}


/* ===== スマホ・タブレット：コンテンツエリアを縦並びレイアウトに修正 ===== */
@media screen and (max-width: 1023px) {
  #content-in,
  .content-in {
    flex-direction: column !important;
  }
  #main,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  #sidebar,
  .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
}

/* 834px以下はサイドバー完全非表示・本文全幅（強化版） */
@media screen and (max-width: 834px) {
  #content-in,
  .content-in {
    display: block !important;
    flex-direction: column !important;
  }
  #sidebar,
  .sidebar,
  .sidebar-menu-content,
  aside.sidebar {
    display: none !important;
    width: 0 !important;
  }
  #main,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
  }
}


/* ===== ヘッダーナビゲーション折り返し修正 ===== */
/* カスタマイザーのCSSで399px固定されているナビ幅を解除 */
.header-container-in.hlt-center-logo #navi-in > .menu-pc {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

/* ===== H1タグ重複対策: フロントページの自動生成entry-titleを非表示 ===== */
.home .entry-title {
  display: none;
}


/* ===== SNS  ===== */
html body .instagram-follow-button-sq,
html body a.instagram-follow-button-sq,
html body .sns-follow-buttons .instagram-follow-button-sq {
	  background: #333333 !important;
	  background-color: #333333 !important;
	  background-image: none !important;
}
html body .x-corp-follow-button-sq,
html body a.x-corp-follow-button-sq {
	  background: #333333 !important;
	  background-color: #333333 !important;
}
html body .facebook-follow-button-sq,
html body a.facebook-follow-button-sq {
	  background: #333333 !important;
	  background-color: #333333 !important;
}
html body .threads-follow-button-sq,
html body a.threads-follow-button-sq {
	  background: #333333 !important;
	  background-color: #333333 !important;
}
}
}
}
}