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

/* ============================================
   はるかブログ カスタムデザイン
   - ターゲット: 27歳女性、美容・スキンケアブログ
   - テイスト: 清潔感・ナチュラル・ほんのりピンク
   ============================================ */

/* ---- カラー変数 ---- */
:root {
  --haruka-pink:       #e8859f;
  --haruka-pink-light: #fdf0f3;
  --haruka-pink-mid:   #f5dde3;
  --haruka-text:       #4a4040;
  --haruka-text-light: #8a7070;
  --haruka-border:     #f0dde2;
  --haruka-white:      #ffffff;
}

/* ---- ベース ---- */
body:not(.wp-admin) {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  color: var(--haruka-text);
  background-color: #fdf8f9;
  letter-spacing: 0.04em;
}

a {
  color: var(--haruka-pink);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
}
a:hover {
  color: #c9607a;
  opacity: 0.85;
}

/* ---- ヘッダー ---- */
#header {
  background: linear-gradient(135deg, #fce8ed 0%, #f8dde5 50%, #fce8ed 100%);
  border-bottom: 2px solid var(--haruka-pink-mid);
}

.site-name-text {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8b5e6b !important;
}

.site-description {
  color: #b08090 !important;
  font-size: 0.82em;
  letter-spacing: 0.08em;
}

/* ---- ナビゲーション ---- */
#navi .navi-in > ul > li > a {
  color: #8b5e6b;
  font-weight: 600;
  font-size: 0.88em;
  letter-spacing: 0.05em;
}
#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a {
  color: var(--haruka-pink);
  border-bottom: 2px solid var(--haruka-pink);
}

/* ---- 記事カード（トップページ一覧） ---- */
.entry-card-wrap {
  border: 1px solid var(--haruka-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
  background: var(--haruka-white);
}
.entry-card-wrap:hover {
  box-shadow: 0 6px 20px rgba(232, 133, 159, 0.18);
  transform: translateY(-3px);
}

.entry-card-title {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--haruka-text);
  line-height: 1.5;
}

/* カテゴリラベル */
.cat-label {
  background: var(--haruka-pink) !important;
  border-radius: 20px !important;
  font-size: 0.72em !important;
  padding: 2px 10px !important;
}

/* ---- 記事ページ ---- */
.article {
  background: var(--haruka-white);
  border-radius: 12px;
  padding: 2em 2.5em;
  box-shadow: 0 2px 12px rgba(232, 133, 159, 0.08);
}

/* 記事タイトル */
.entry-title {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.55;
  color: var(--haruka-text);
  border-left: 4px solid var(--haruka-pink);
  padding-left: 0.6em;
}

/* h2 見出し */
.article h2 {
  font-size: 1.15em;
  font-weight: 700;
  color: #7a4a5a;
  background: linear-gradient(to right, #fce8ed, #fdf0f3);
  border-left: 4px solid var(--haruka-pink);
  padding: 0.55em 0.9em;
  border-radius: 0 8px 8px 0;
  margin: 2em 0 1em;
}

/* h3 見出し */
.article h3 {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--haruka-text);
  border-bottom: 2px solid var(--haruka-pink-mid);
  padding-bottom: 0.3em;
  margin: 1.5em 0 0.8em;
}

/* 本文 */
.entry-content p {
  line-height: 1.9;
  margin-bottom: 1.1em;
  color: var(--haruka-text);
}

/* 強調 */
.entry-content strong,
.entry-content b {
  color: #c9607a;
  font-weight: 700;
}

/* ---- 目次 ---- */
.toc {
  background: var(--haruka-pink-light) !important;
  border: 1px solid var(--haruka-border) !important;
  border-radius: 10px !important;
  padding: 1.2em 1.5em !important;
}
.toc-title {
  color: #8b5e6b !important;
  font-weight: 700 !important;
  font-size: 0.92em !important;
}
.toc-list a {
  color: #9a6070 !important;
}
.toc-list a:hover {
  color: var(--haruka-pink) !important;
}

/* ---- サイドバー ---- */
.sidebar .widget-title {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--haruka-white);
  background: linear-gradient(90deg, var(--haruka-pink), #f4a0b8);
  padding: 0.5em 1em;
  border-radius: 6px;
  margin-bottom: 0.8em;
  letter-spacing: 0.06em;
}

/* ---- ボタン・リンク ---- */
.btn-wrap a,
.btn {
  background: var(--haruka-pink) !important;
  color: var(--haruka-white) !important;
  border-radius: 25px !important;
  border: none !important;
  padding: 0.6em 1.8em !important;
  font-weight: 700 !important;
  font-size: 0.9em !important;
  letter-spacing: 0.05em;
  transition: background 0.2s, transform 0.2s;
}
.btn-wrap a:hover,
.btn:hover {
  background: #c9607a !important;
  transform: translateY(-1px);
}

/* ---- アフィリエイトリンク ---- */
.entry-content a[href*="a8.net"],
.entry-content a[rel*="nofollow"] {
  display: inline-block;
  background: linear-gradient(90deg, #f9e0e6, #fce8ed);
  color: #c9607a;
  border: 1px solid var(--haruka-border);
  border-radius: 20px;
  padding: 0.15em 0.8em;
  font-size: 0.92em;
  font-weight: 600;
  transition: background 0.2s;
}
.entry-content a[href*="a8.net"]:hover,
.entry-content a[rel*="nofollow"]:hover {
  background: linear-gradient(90deg, #f5d0d8, #fad8e0);
}

/* ---- 著者ボックス ---- */
.author-box {
  background: var(--haruka-pink-light) !important;
  border: 1px solid var(--haruka-border) !important;
  border-radius: 12px !important;
}
.author-widget-name {
  color: #8b5e6b !important;
  font-weight: 700 !important;
}

/* ---- パンくずリスト ---- */
.breadcrumb {
  font-size: 0.78em;
  color: var(--haruka-text-light);
}
.breadcrumb a {
  color: var(--haruka-pink);
}

/* ---- フッター ---- */
#footer {
  background: #f0d8de;
  color: #8b5e6b;
  font-size: 0.82em;
}
#footer a {
  color: #c9607a;
}

/* ---- SNSシェアボタン ---- */
.sns-share .sns-button {
  border-radius: 8px !important;
}

/* ---- ページネーション ---- */
.page-numbers.current,
.pagination .current {
  background: var(--haruka-pink) !important;
  color: var(--haruka-white) !important;
  border-radius: 6px;
}
.page-numbers:not(.current):hover {
  background: var(--haruka-pink-light) !important;
  color: var(--haruka-pink) !important;
}

/* ---- レスポンシブ ---- */
@media screen and (max-width: 1023px) {
  .article {
    padding: 1.5em 1.5em;
  }
}

@media screen and (max-width: 834px) {
  .site-name-text {
    font-size: 1.25em;
  }
  .entry-title {
    font-size: 1.25em;
  }
  .article h2 {
    font-size: 1.05em;
  }
}

@media screen and (max-width: 480px) {
  .article {
    padding: 1.2em 1em;
    border-radius: 8px;
  }
  .entry-title {
    font-size: 1.1em;
  }
}