/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:10:23 */
/* ============================================================
   香LIG SANGO/WordPress コントラスト修正パッチ v2（最終版）
   ファイル名: kaori-a11y-sango.css
   ============================================================

   ■ WPCodeへの追加方法
   WPCode > 新規スニペット追加 > CSS スニペット
   タイトル：「香LIG コントラスト修正（SANGO・WP固有）」

   ■ 修正一覧
   [1] ピンク背景見出し
   [2] 画像キャプション
   [3] SANGOブルー
   [4] 透明背景ボタン
   [5] SHAREラベル
   [6] 著者ボックステキスト
   [7] 著者SNSリンク（Instagram/Website）
   [8] 前の記事・次の記事ラベル ← 強化版（全SANGOパターン網羅）
   [9] フッター固定ボトムナビ
   [10] 目次ラベル
   [11] 記事本文リンク

   ============================================================ */


/* ============================================================
   [1] SANGOカスタム見出し（ピンク系背景）
   ============================================================ */

.sgb-heading--type2 .sgb-heading__inner,
.sgb-heading__inner.sgb-heading--type2 {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}
[style*="background-color:#f9a8a8"] .sgb-heading__inner,
[style*="background-color:#ffa8"] .sgb-heading__inner {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}


/* ============================================================
   [1b] SANGOカスタム見出し type4（白テキスト on ラベンダー#c9cbe7）
   
   ★ 新規追加（Lighthouseレポート Doc8 より）
   
   HTML確認済み：
   <span class="sgb-heading__inner sgb-heading--type4"
         style="background-color:#c9cbe7;border-color:#c9cbe7;font-size:1.2em">
     <span class="sgb-heading__text" style="color:#ffffff">タイトル</span>
   </span>
   
   背景 #c9cbe7（薄ラベンダー）に白テキスト → 1.59:1（完全失敗）
   → #3a3038（ほぼ黒）に変更 → 7.94:1 ✓
   
   inline style の color:#ffffff を !important で上書きします。
   ============================================================ */

/* type4 見出しの背景色が #c9cbe7（ラベンダー）の場合 */
.sgb-heading--type4 .sgb-heading__text,
.sgb-heading--type4 > .sgb-heading__text,
.sgb-heading__inner.sgb-heading--type4 .sgb-heading__text {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}

/* type4 内の strong タグも同様に修正 */
.sgb-heading--type4 strong,
.sgb-heading__inner.sgb-heading--type4 strong {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}

/* inline style="color:#ffffff" の上書き（属性セレクタ） */
.sgb-heading--type4 [style*="color:#ffffff"],
.sgb-heading--type4 [style*="color: #ffffff"],
.sgb-heading--type4 [style*="color:white"],
.sgb-heading__inner[style*="background-color:#c9cbe7"] .sgb-heading__text,
[style*="background-color:#c9cbe7"] .sgb-heading__text,
[style*="background-color:#c9cbe7"] strong {
    color: #3a3038 !important;
    -webkit-text-fill-color: #3a3038 !important;
}


/* ============================================================
   [1c] SANGOカスタム見出し（style="color:gray" の上書き）
   
   ★ 新規追加（Lighthouseレポート Doc8 より）
   
   HTML確認済み：
   <span class="sgb-heading__text" style="color:gray">
     香水買う前に香りを試してみたい
   </span>
   
   gray = #808080 → 白背景で 3.95:1（WCAG AA 未達）
   → #5c5260（7.42:1）に変更
   
   inline style を !important で上書きします。
   ============================================================ */

.sgb-heading__text[style*="color:gray"],
.sgb-heading__text[style*="color: gray"],
.sgb-heading__text[style*="color:grey"],
.sgb-heading__text[style*="color: grey"] {
    color: #5c5260 !important;
    -webkit-text-fill-color: #5c5260 !important;
}


/* ============================================================
   [2] WordPressブロック 画像キャプション
   ============================================================ */

figcaption.wp-element-caption,
.wp-element-caption,
.wp-block-image figcaption,
figure figcaption {
    color: #5c5260 !important;
}


/* ============================================================
   [3] SANGOブルーカラー
   ============================================================ */

.has-sango-blue-color,
.has-inline-color.has-sango-blue-color {
    color: #0055aa !important;
}
mark.has-sango-blue-color {
    background-color: transparent !important;
    color: #0055aa !important;
}


/* ============================================================
   [4] SANGOノーマルボタン（transparent背景）
   ============================================================ */

.btn.normal,
a.btn.normal {
    color: #3a3038 !important;
    border-color: rgba(58, 48, 56, 0.4) !important;
}
@media (hover: hover) and (pointer: fine) {
    .btn.normal:hover,
    a.btn.normal:hover {
        color: #5c5260 !important;
        background-color: #f5f5f7 !important;
    }
}


/* ============================================================
   [5] SANGOシェアボタン タイトル
   ============================================================ */

.sns-btn__title,
.sns-btn__title.dfont {
    color: #5c5260 !important;
}


/* ============================================================
   [6] SANGO著者ボックス内テキスト
   ============================================================ */

.author-info .tb span:not([class]),
.author-info__inner .tb > span,
.author-info .tb p,
.tb .author-profile-text {
    color: #3a3038 !important;
}


/* ============================================================
   [7] 著者ボックス SNSリンク（Instagram / Website）
   ============================================================ */

.tb a.Instagram,
.author-info .tb a.Instagram {
    color: #8a3060 !important; /* 7.9:1 ✓ */
}
.tb a.Website,
.author-info .tb a.Website {
    color: #0055aa !important; /* 5.7:1 ✓ */
}
.tb a.Twitter, .tb a.X,
.author-info .tb a.Twitter {
    color: #005599 !important;
}
.tb a[class]:not(.Instagram):not(.Website):not(.Twitter):not(.X),
.author-info .tb a {
    color: #0055aa !important;
}


/* ============================================================
   [8] 前の記事・次の記事 ラベル
   
   ★ 強化版：SANGOの全バージョンで使われる可能性のある
     クラスパターンを完全網羅しています。
     CSSのセレクタが多い理由は「どのクラスが使われているか
     HTML を直接確認できないため」です。
   ============================================================ */

/*
 * ─────────────────────────────────────────────
 * グループA：SANGO固有クラス
 * ─────────────────────────────────────────────
 */
/* SANGO v1系 */
.prev-next > * > p,
.prev-next > p,
.prev-next p {
    color: #5c5260 !important;
}

/* SANGO v2系（最も多い） */
.prev-link > p,
.next-link > p,
.prev-link p,
.next-link p {
    color: #5c5260 !important;
}

/* SANGO pager（ページャー）系 */
.pager p,
.clearfix.pager p,
.entry-pager p,
#prev-next p {
    color: #5c5260 !important;
}

/* SANGO v3・カスタム系 */
.sng-prev > p, .sng-next > p,
.sng-prev p,  .sng-next p,
.sng-prev-next p,
.prev-next-link p,
.prev-next-post p {
    color: #5c5260 !important;
}

/* その他のナビ系 */
.post-navi p,
.post-nav-links p,
.post-nav p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループB：WordPress標準ナビゲーション
 * ─────────────────────────────────────────────
 */
.nav-previous p,
.nav-next p,
.post-navigation p,
.post-navigation .nav-label,
.navigation.post-navigation p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループC：属性部分一致（汎用・最終手段）
 *
 * "prev" や "next" を含むクラス名を持つ要素の
 * 直下の <p> を全てターゲットにします。
 * ─────────────────────────────────────────────
 */
[class*="prev"] > p,
[class*="next"] > p,
[class*="pager"] > p,
[class*="pager"] p,
[id*="prev-next"] p,
[id*="pager"] p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループD：記事エリア外の単独<p>ナビラベル
 *
 * Lighthouseが "body.wp-singular" 内の <p> として
 * 報告している。記事コンテンツ（#entry）の外側に
 * ある<p>で「前の記事」「次の記事」と書かれている。
 * ─────────────────────────────────────────────
 */
body.single-post article ~ * p,
body.single-post .entry-content ~ * p,
body.wp-singular article ~ * p,
body.wp-singular #entry ~ * p,
body.single-post #entry + * p,
body.wp-singular #entry + * p {
    color: #5c5260 !important;
}

/*
 * ─────────────────────────────────────────────
 * グループE：【核オプション】
 *
 * 上記全てが当たらない場合の最終手段。
 * single記事ページで、記事本文(.entry-content)外の
 * 単独<p>要素を全て対象にします。
 *
 * ※ 他の要素に影響が出る可能性がありますが、
 *   #5c5260は本文と同程度の読みやすい色なので
 *   視覚的な副作用は最小限です。
 * ─────────────────────────────────────────────
 */
body.single-post p:not(.entry-content p):not([class*="has-"]):not(.wp-block-paragraph),
body.wp-singular p:not(.entry-content p):not([class*="has-"]):not(.wp-block-paragraph) {
    color: #5c5260 !important;
}


/* ============================================================
   [9] フッター固定ボトムナビゲーション
       メニュー名：フッター固定メニュー（モバイル）
   
   URLエンコード: 「固定」= %e5%9b%ba%e5%ae%9a を利用した
   ピンポイントセレクタ ＋ SANGOクラス名の複数指定
   ============================================================ */

/* URLエンコードによるピンポイント指定 */
ul[id*="%e5%9b%ba%e5%ae%9a"] a,
ul[id*="%e5%9b%ba%e5%ae%9a"] > li > a {
    color: #3a3038 !important;
    font-weight: 600 !important;
}

/* SANGOのフッター固定ナビ（バージョン別） */
#sng-fixed-footer-nav a, #sng-sp-footer-nav a,
#footer-fixed-nav a,     .footer-fixed-nav a,
.sng-fixed-nav a,        .sp-footer-nav a,
.fixed-footer-menu a,    .fixed-sp-nav a,
.bottom-nav a,           .mobile-bottom-nav a,
#sng-bottom-nav a,       .sng-bottom-nav a {
    color: #3a3038 !important;
    font-weight: 600 !important;
}

/* footerタグ内のメニューリンク（汎用） */
footer .menu a,
footer .menu > li > a,
[class*="footer"][class*="nav"] .menu a,
[id*="footer"][id*="nav"] .menu a {
    color: #3a3038 !important;
}

@media (hover: hover) and (pointer: fine) {
    ul[id*="%e5%9b%ba%e5%ae%9a"] a:hover,
    .footer-fixed-nav a:hover { color: #5c5260 !important; }
}


/* ============================================================
   [10] 目次ラベル（label[for="drawer__input"]）
   ============================================================ */

label[for="drawer__input"] {
    color: #3a3038 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
label[for="drawer__input"] i,
label[for="drawer__input"] span {
    color: inherit !important;
}
.drawer-menu a, .drawer-nav a, .sng-drawer a {
    color: #3a3038 !important;
}
@media (hover: hover) and (pointer: fine) {
    label[for="drawer__input"]:hover { color: #5c5260 !important; }
}


/* ============================================================
   [11] 記事本文内リンク
   ============================================================ */

.entry-content a:not([class]),
.entry-content a.inner-link,
.entry-content p a {
    color: #0055aa !important;
}
@media (hover: hover) and (pointer: fine) {
    .entry-content a:not([class]):hover,
    .entry-content a.inner-link:hover {
        color: #003d88 !important;
        text-decoration: underline !important;
    }
}


/* ============================================================
   共通：prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .tb a, .btn.normal, .entry-content a { transition: none !important; }
}