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

/************************************
** BHCL ミルキーピンク配色＋丸み（ステップ2 / 2026-06-26）
** 子テーマのみで上書き。テーマ本体・スキンは変更しない。
** 記事内CTA(.bhcl-cta)・比較表(.bhcl-cmp-table)・guardフッターはinline style優先のため不可侵。
************************************/
:root{
  --bhcl-bg:#fff9fb;     /* 背景ベース   */
  --bhcl-card:#ffeef3;   /* カード淡ピンク */
  --bhcl-accent:#ff9bb3; /* メインアクセント */
  --bhcl-cta:#f4789c;    /* 濃いめCTA・強調 */
  --bhcl-link:#e06a8a;   /* アイコン・リンク */
  --bhcl-head:#a64a64;   /* 見出し文字   */
}

/* ===== サイト背景 ===== */
body,
.wrap,
#main,
#content{ background-color:var(--bhcl-bg); }

/* ===== リンク色（青#1e92bf上書き） ===== */
a{ color:var(--bhcl-link); }
a:hover{ color:var(--bhcl-cta); }
.entry-content a{ color:var(--bhcl-link); }
.breadcrumb,
.breadcrumb a{ color:var(--bhcl-link); }

/* ===== グローバルナビ ===== */
#navi{ background-color:var(--bhcl-card); }
#navi .navi-in > ul > li > a{ color:var(--bhcl-head); }
#navi a:hover{ background-color:var(--bhcl-accent); color:#fff; }
#navi .sub-menu{ background-color:#fff; }
#navi .sub-menu li a{ color:var(--bhcl-head); }
#navi .sub-menu li a:hover{ background-color:var(--bhcl-accent); color:#fff; }

/* ===== ヘッダー帯の下線アクセント ===== */
.header-container{ border-bottom:3px solid var(--bhcl-accent); }

/* ===== 見出し H2（単辺ボーダーのため角丸なし・色のみ） ===== */
.entry-content h2{
  background:var(--bhcl-card);
  border-left-color:var(--bhcl-accent);
  border-bottom-color:var(--bhcl-accent);
  color:var(--bhcl-head);
}
/* ===== 見出し H3（元々border-radius有・:before丸アイコンをピンク化） ===== */
.entry-content h3{
  background:var(--bhcl-card);
  color:var(--bhcl-head);
}
.entry-content h3:before{ background:var(--bhcl-accent); color:#fff; }

/* ===== ボタン類（グレー#777→ピンク・ピル） ===== */
.list-more-button,
.more-button,
.btn,
button.wp-block-button__link,
.wp-block-button__link,
.go-to-top-button{
  background-color:var(--bhcl-cta);
  border-radius:999px;
}
.list-more-button:hover,
.more-button:hover,
.btn:hover{ background-color:var(--bhcl-accent); }

/* ===== カテゴリ/タグリンク ===== */
.cat-link,
.entry-category .cat-link{
  background-color:var(--bhcl-accent);
  border-radius:6px;
}
.tagcloud a:hover{ background-color:var(--bhcl-accent); }

/* ===== ページャ ===== */
.pagination .page-numbers{ border-radius:999px; }
.pagination .current,
.pagination span.current{
  background-color:var(--bhcl-cta);
  border-color:var(--bhcl-cta);
}
.pagination a.page-numbers{ color:var(--bhcl-link); }

/* ===== サイドバー見出し（#777帯→ピンク帯） ===== */
.sidebar h2,
.sidebar h3{
  background-color:var(--bhcl-cta);
  border-radius:8px;
}
.widget-sidebar{ border-radius:14px; }

/* ===== フッター上部アクセント ===== */
.footer{ border-top:3px solid var(--bhcl-accent); }

/* ===== 丸み: カード・画像・入力欄 ===== */
.entry-card,
.related-entry-card,
.information-box,
.widget-sidebar{ border-radius:16px; }
.card-thumb img,
.entry-card-thumb img,
.eye-catch img,
.post-thumbnail img,
.wp-block-image img,
.related-entry-card-thumb img{ border-radius:12px; }
input[type="text"],
input[type="search"],
input[type="email"],
textarea,
.wp-block-search__input{ border-radius:14px; }
.wp-block-search__button{ border-radius:999px; background-color:var(--bhcl-cta); }

/************************************
** BHCL ホーム ファーストビュー丸ボタン導線（ステップ3 / 2026-06-26）
************************************/
.bhcl-home-hero,.bhcl-featured{ margin:26px 0 34px; }
.bhcl-home-title{
  font-size:18px; color:var(--bhcl-head); text-align:center;
  margin:0 0 20px; font-weight:bold; letter-spacing:.04em;
  background:none; padding:0; border:none;
}
.bhcl-home-title:before{
  content:""; display:block; width:46px; height:3px; margin:0 auto 10px;
  background:var(--bhcl-accent); border-radius:999px;
}
/* お悩みカテゴリ 丸ボタングリッド（スマホ崩れ対策: auto-fit） */
.bhcl-cat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:14px 10px; max-width:760px; margin:0 auto;
}
.bhcl-cat-btn{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:var(--bhcl-head);
}
.bhcl-cat-ico{
  width:64px; height:64px; border-radius:50%;
  background:var(--bhcl-card); display:flex; align-items:center; justify-content:center;
  font-size:25px; color:var(--bhcl-link);
  box-shadow:0 2px 7px rgba(244,120,156,.20); transition:.2s ease;
}
.bhcl-cat-btn:hover .bhcl-cat-ico{
  background:var(--bhcl-accent); color:#fff; transform:translateY(-3px);
  box-shadow:0 5px 12px rgba(244,120,156,.34);
}
.bhcl-cat-label{ font-size:12px; margin-top:8px; text-align:center; line-height:1.3; }
/* 注目の比較記事 カード */
.bhcl-card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px; max-width:760px; margin:0 auto;
}
.bhcl-fcard{
  display:block; text-decoration:none; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 2px 8px rgba(244,120,156,.16); transition:.2s ease;
}
.bhcl-fcard:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(244,120,156,.28); }
.bhcl-fcard-thumb{ display:block; height:112px; background-size:cover; background-position:center; }
.bhcl-fcard-ttl{
  display:block; padding:10px 12px; font-size:13px; font-weight:bold;
  color:var(--bhcl-head); line-height:1.45;
}

/* ============================================================
   トップ景観 賑やか強化 v1（CSS/SVG・¥0・中立装飾のみ＝薬機法セーフ）
   追記 2026-06-27 / 既存 .bhcl-cta / .bhcl-cmp-table / guardフッターは不可侵
   ※ラスタ画像不使用。レイアウト(グリッド)は変更せず色・装飾のみ＝スマホ崩れなし
   ============================================================ */

/* hero/featured: 淡いグラデ＋やわらかドット背景＋角丸＋ふんわり影 */
.bhcl-home-hero,.bhcl-featured{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,155,179,.09) 1.5px, transparent 0) 0 0/20px 20px,
    linear-gradient(180deg,#fff7fb,#ffffff 88%);
  border-radius:20px; padding:24px 16px 20px;
  box-shadow:0 4px 18px rgba(244,120,156,.08);
  position:relative;
}
/* セクション右上に淡いキラめき（中立SVG） */
.bhcl-home-hero:before,.bhcl-featured:before{
  content:""; position:absolute; top:12px; right:14px; width:24px; height:24px; opacity:.45; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 9.4L24 12l-9.4 2.6L12 24l-2.6-9.4L0 12l9.4-2.6z' fill='%23ffc2d2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* セクション見出し: 文字の右に小さなキラめき */
.bhcl-home-title:after{
  content:""; display:inline-block; width:15px; height:15px; margin-left:7px; vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.4 8.6L23 12l-8.6 2.4L12 23l-2.4-8.6L1 12l8.6-2.4z' fill='%23ff9bb3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* お悩み丸アイコン: カテゴリ別パステル（ミルキーピンク基調維持・識別性UP） */
.bhcl-cat-btn:nth-child(1)  .bhcl-cat-ico{ background:#ffe0ec; color:#e0608a; } /* うねり・癖毛 */
.bhcl-cat-btn:nth-child(2)  .bhcl-cat-ico{ background:#e3f1ff; color:#5a9bd0; } /* パサつき・乾燥 */
.bhcl-cat-btn:nth-child(3)  .bhcl-cat-ico{ background:#efe7ff; color:#8a6fc4; } /* 広がり */
.bhcl-cat-btn:nth-child(4)  .bhcl-cat-ico{ background:#f6e4fb; color:#b06fc0; } /* 白髪・カラー */
.bhcl-cat-btn:nth-child(5)  .bhcl-cat-ico{ background:#e3f7ea; color:#5aab7d; } /* 抜け毛・薄毛 */
.bhcl-cat-btn:nth-child(6)  .bhcl-cat-ico{ background:#ffe7df; color:#e07a5a; } /* 枝毛・ダメージ */
.bhcl-cat-btn:nth-child(7)  .bhcl-cat-ico{ background:#ffe0ee; color:#d86a9a; } /* カラー後ケア */
.bhcl-cat-btn:nth-child(8)  .bhcl-cat-ico{ background:#e0f5f2; color:#4aa39a; } /* 頭皮ケア */
.bhcl-cat-btn:nth-child(9)  .bhcl-cat-ico{ background:#fff0db; color:#d99a55; } /* 年齢変化 */
.bhcl-cat-btn:nth-child(10) .bhcl-cat-ico{ background:#ffe9f0; color:#e06a8a; } /* ホームケア */
.bhcl-cat-btn:nth-child(11) .bhcl-cat-ico{ background:#fff6d6; color:#bfa14a; } /* おすすめ商品 */
/* hover時は全アイコンをアクセントピンクに統一（nth-childより後に再宣言して優先）*/
.bhcl-cat-btn:hover .bhcl-cat-ico{ background:var(--bhcl-accent); color:#fff; }

/* 比較カード: やさしい枠線＋しずくSVGコーナー（中立装飾） */
.bhcl-fcard{ position:relative; border:1px solid #ffe0ea; }
.bhcl-fcard:after{
  content:""; position:absolute; top:8px; right:8px; width:17px; height:17px; opacity:.55; pointer-events:none; z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2S5 10 5 15a7 7 0 0 0 14 0c0-5-7-13-7-13z' fill='%23bfe0ff'/%3E%3C/svg%3E") center/contain no-repeat;
}