/**
 * feminineSoft.css — テーマD「フェミニン・ソフト」
 * 探偵・電話占い・子供の習い事系
 * ピンクベージュ系 × 丸み強め × 王道キラキラ × M PLUS Rounded 1c
 *
 * 構成:
 *   1. 既存トークン（--c-*, --radius-*, --font-* など、article-body.css/blocks.css 参照用）
 *   2. cms-design D-feminineSoft 由来トークン（_layout/_top/_category/_lower/_404.css 用）
 *   3. テーマD固有の末尾上書き
 */

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Quicksand:wght@500;600;700&display=swap');

:root {
  /* ============================================================
     1. 既存トークン（article-body.css / blocks.css 用）
     ============================================================ */

  /* 形状（強い丸み） */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  /* 書体（D「フェミニン」: 丸ゴシックでやや大きめ・字間広め — 既定値）
     管理画面の「タイポグラフィ」設定（colors.css）が値を持てばそちらが優先される */
  --font-heading: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-size-base: var(--c-font-size-base, 17.5px);
  --line-height: var(--c-line-height, 2);
  --letter-spacing: var(--c-letter-spacing, 0.04em);

  /* レイアウト */
  --content-max: 720px;
  --site-max: 1100px;
  --spacing-section: 64px;

  /* トランジション */
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ステップブロック */
  --step-num-bg: var(--c-accent);
  --step-num-color: #fff;
  --step-num-radius: 50%;
  --step-line-color: var(--c-accent-pale);
  --step-border: none;

  /* FAQブロック（D は丸ピル） */
  --faq-q-badge-bg: var(--c-accent);
  --faq-q-badge-color: #fff;
  --faq-q-badge-radius: 999px;
  --faq-a-badge-bg: var(--c-accent-faint);
  --faq-a-badge-color: var(--c-accent);
  --faq-item-bg: var(--c-surface);
  --faq-item-border: 1px solid var(--c-border);

  /* ============================================================
     2. cms-design D-feminineSoft 由来トークン
     ============================================================ */
  --bg:           var(--c-bg, #FFFDFB);     /* 紙のような温かい白 */
  --surface:      var(--c-surface, #FFFFFF);
  --ink:          var(--c-text, #4A3A4D);   /* やわらかい墨色 */
  --ink-2:        #5E4E63;
  --muted:        var(--c-muted, #9787A0);
  --muted-2:      #C9BFCE;
  --line:         var(--c-border, #F2E6EC);
  --soft:         var(--c-highlight, #FCF4F7);
  --accent:       var(--c-accent, #F58CA8); /* コーラルピンク */
  --accent-rgb:   var(--c-accent-rgb, 245, 140, 168);
  --accent-2:     var(--c-accent-2, #B388D8);                   /* ラベンダー */
  --cta:          var(--c-cta, #34BFD5);     /* CTA はターコイズで目立たせる（D 唯一の特徴） */
  --cta-ink:      #FFFFFF;
  --rank-1:       var(--c-rank-1, #F58CA8);
  --rank-2:       var(--c-rank-2, #B388D8);
  --rank-3:       var(--c-rank-3, #FFD86F);
  --star-1:       #FFB347;
  --star-2:       #FFD86F;

  --font-sans:    "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "M PLUS Rounded 1c", "Quicksand", "Hiragino Maru Gothic ProN", sans-serif;

  --max:          720px;

  --placeholder-1: #FCE4EC;
  --placeholder-2: #F8D5E1;

  --avatar-1:      #FCE4EC;
  --avatar-2:      #F8C8DA;
  --avatar-ink:    #8A5A6E;

  --lp-header-bg:  #FCF4F7;

  --hero-accent:        #FCE4EC;
  --hero-accent-rgb:    252, 228, 236;
  --hero-bg-fallback:   #3D2E42;
  --hero-image:         none;
  --hero-overlay:       rgba(61, 46, 66, 0.45);
  --news-btn-hover:     #E2698A;
}

/* ============================================================
   3. テーマD固有の末尾上書き
   ============================================================ */

/* ---- 微かなキラキラ感のドット背景（ピンク + ラベンダー） ----
   注: 管理画面（body.admin-app）には適用しない */
body:not(.admin-app) {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(245, 140, 168, 0.06) 0, transparent 22%),
    radial-gradient(circle at 88% 72%, rgba(179, 136, 216, 0.05) 0, transparent 26%);
  background-attachment: fixed;
}

/* ---- topbar: やわらかいピンクボーダー + ピンク影 ---- */
.topbar{
  background: rgba(255,253,251,0.92) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 2px 12px -8px rgba(245,140,168,0.25);
}
.brand-text{
  font-family: var(--font-display) !important;
  letter-spacing: 0.08em !important;
}
.brand-mark{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
}
.topbar nav.cats a:hover{
  border-bottom-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ---- progress bar: ピンク→ラベンダー ---- */
.progress > i{
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
}

/* ---- footer: ダークプラム ----
   --c-footer-bg が管理画面で設定されていればそれを優先、空ならグラデ既定 */
footer.site{
  background: var(--c-footer-bg, linear-gradient(180deg, #3D2E42 0%, #2E1F33 100%)) !important;
}

/* ---- 記事見出し: h2 上罫線をピンク、h3 縦バーをグラデ ---- */
article h2,
.article-body h2{
  border-top: 2px solid var(--accent) !important;
}
article h3::before,
.article-body h3::before{
  background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important;
}

/* ---- CTA: ターコイズグラデ（D は accent ではなく cta=#34BFD5 で目立たせる） ---- */
.rank-row .go,
.pservice .ctas .primary,
.float-cta .btn-cta,
.bottom-cta .cta-btn,
.form-actions .submit,
.side-cta .side-btn{
  background: linear-gradient(180deg, #4FD0E5 0%, var(--cta) 100%) !important;
  color: var(--cta-ink) !important;
  border-radius: var(--radius-md) !important;
  box-shadow:
    0 6px 18px -8px rgba(52, 191, 213, 0.40),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08) !important;
}
.rank-row .go:hover,
.pservice .ctas .primary:hover,
.bottom-cta .cta-btn:hover,
.form-actions .submit:hover,
.side-cta .side-btn:hover{
  background: linear-gradient(180deg, #34BFD5 0%, #1AA3B8 100%) !important;
  color: var(--cta-ink) !important;
}

/* ---- リンク・選択 ---- */
a{ color: var(--accent); }
::selection{ background: var(--accent); color: #fff; }

/* ============================================================
   CMS の .block-ranking-* / .block-product-svc-rank / .side-list 上書き
   blocks.css / _layout.css に A の暖色金属系がハードコードされているため、
   各テーマで明示的に上書き必須
   ============================================================ */

/* ---- 比較表 1位行: 薄ピンク背景 ---- */
.block-ranking-item[data-rank="1"]{
  background: linear-gradient(180deg, #FFF0F5 0%, #FFFFFF 70%) !important;
}

/* ---- 比較表 1位「イチ推し」リボン → 「イチ推し♡」ピンクラベンダーグラデ ---- */
.block-ranking-item[data-rank="1"]::before{
  content: "イチ推し♡" !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
}

/* ---- 比較表 ランキングバッジ: 1位ピンクグラデ / 2位ラベンダーグラデ / 3位ゴールドグラデ ---- */
.block-ranking-item[data-rank="1"] .block-ranking-num{
  background: linear-gradient(135deg, #FFB6CD, var(--rank-1)) !important;
  color: #fff !important;
  box-shadow:
    0 4px 12px -4px rgba(245, 140, 168, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}
.block-ranking-item[data-rank="2"] .block-ranking-num{
  background: linear-gradient(135deg, #D7B7EE, var(--rank-2)) !important;
  color: #fff !important;
  box-shadow:
    0 4px 12px -4px rgba(179, 136, 216, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}
.block-ranking-item[data-rank="3"] .block-ranking-num{
  background: linear-gradient(135deg, #FFE8A0, var(--rank-3)) !important;
  color: #8A6818 !important;
  box-shadow:
    0 4px 12px -4px rgba(255, 216, 111, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

/* ---- 比較表 アクティブタブ ---- */
.block-ranking-tab.is-active{
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ---- 星: A のオレンジグラデ → D の暖オレンジ（star-1） ---- */
.block-ranking-star{
  background: linear-gradient(180deg, var(--star-2) 0%, var(--star-1) 100%) !important;
}
.block-ranking-star.is-empty{ background: #F0E5E9 !important; }
.block-ranking-star.is-half{
  background: linear-gradient(90deg, var(--star-1) 50%, #F0E5E9 50%) !important;
}

/* ---- 比較表のCTAボタン（.block-ranking-cta） ---- */
a.block-ranking-cta,
.block-ranking-cta{
  background: linear-gradient(180deg, #4FD0E5 0%, var(--cta) 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow:
    0 6px 18px -8px rgba(52, 191, 213, 0.40),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08) !important;
}
a.block-ranking-cta:hover,
.block-ranking-cta:hover{
  background: linear-gradient(180deg, #34BFD5 0%, #1AA3B8 100%) !important;
  box-shadow:
    0 8px 22px -8px rgba(52, 191, 213, 0.50),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08) !important;
}

/* ---- 商品紹介ブロック: A の濃影 → D 用ピンク薄影 ---- */
.block-product-service{
  box-shadow: 0 1px 0 var(--soft), 0 8px 24px -16px rgba(245, 140, 168, 0.18) !important;
}
.block-product-svc-btn--official{
  background: linear-gradient(180deg, #4FD0E5 0%, var(--cta) 100%) !important;
  color: var(--cta-ink) !important;
  border-radius: var(--radius-md) !important;
  box-shadow:
    0 6px 18px -8px rgba(52, 191, 213, 0.40),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08) !important;
  font-family: var(--font-display) !important;
}
.block-product-svc-btn--official:hover{
  background: linear-gradient(180deg, #34BFD5 0%, #1AA3B8 100%) !important;
}

/* ---- 商品紹介ブロックの「おすすめNo1」リボン ---- */
.block-product-svc-rank[data-rank="1"]{
  background: linear-gradient(135deg, #FFB6CD, var(--rank-1)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(245, 140, 168, 0.55) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.block-product-svc-rank[data-rank="2"]{
  background: linear-gradient(135deg, #D7B7EE, var(--rank-2)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(179, 136, 216, 0.5) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.block-product-svc-rank[data-rank="3"]{
  background: linear-gradient(135deg, #FFE8A0, var(--rank-3)) !important;
  color: #8A6818 !important;
  box-shadow: 0 4px 12px -4px rgba(255, 216, 111, 0.5) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ---- サイドバー人気記事ランキング: D 4色 ---- */
.side-list li:nth-child(1) .rank-num{
  background: var(--rank-1) !important;
  color: #fff !important;
}
.side-list li:nth-child(2) .rank-num{
  background: var(--rank-2) !important;
  color: #fff !important;
}
.side-list li:nth-child(3) .rank-num{
  background: var(--rank-3) !important;
  color: #8A6818 !important;
}
.side-list li:nth-child(1) .rank{ color: var(--rank-1) !important; }
.side-list li:nth-child(2) .rank{ color: var(--rank-2) !important; }
.side-list li:nth-child(3) .rank{ color: var(--rank-3) !important; }