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

/* ================================================
   ROASTER JPN — Premium Design System
   Philosophy: Dark Espresso × Warm Amber
================================================ */

:root {
  --espresso:   #1a1009;
  --dark-brown: #2d2014;
  --amber:      #c8860a;
  --amber-lt:   #f0b429;
  --cta:        #e8500a;
  --cta-hover:  #bf3a00;
  --cream:      #faf7f2;
  --white:      #ffffff;
  --card-bg:    #ffffff;
  --border:     #e8ddd0;
  --text:       #2d2014;
  --text-lt:    #6b5240;
  --radius:     10px;
  --shadow:     0 4px 20px rgba(26,16,9,.10);
  --shadow-lg:  0 8px 32px rgba(26,16,9,.16);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--cream) !important;
  color: var(--text) !important;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif !important;
  line-height: 1.85 !important;
  -webkit-font-smoothing: antialiased;
}

/* ===== HEADER（白基調が正式・2026-08-15確定） =====
   旧espressoダークヘッダー指定はmu-plugin site-style-fixes.php（wp_head優先度
   99999で最後に出力）の白強制に常に負けており死にコードだった。
   実測でも白ヘッダーの方が同系統サイト（マイベスト等）に揃い可読なので
   白を正式採用し、子テーマ側も白で宣言する（mu-pluginと二重だが正はこちら）。 */
#header,
.header-container,
.site-header,
.header-in {
  background: #ffffff !important;
  box-shadow: none !important;
}
.header-container { border-bottom: 1px solid var(--border) !important; }
.site-name-text,
#site-name a,
.header-logo-text a,
.site-name a {
  color: var(--dark-brown) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  font-size: 1.3rem !important;
}
.site-description-text,
.site-description {
  color: var(--text-lt) !important;
  font-size: .8rem !important;
  letter-spacing: .06em !important;
}

/* ===== GLOBAL NAV（白基調・緑はCTAアクセント色） ===== */
#navi,
.navi,
.global-nav,
#navi .navi-in,
#navi ul,
.navi-in {
  background: #ffffff !important;
}
#navi .navi-in > ul > li > a,
.global-nav > ul > li > a,
#navi a {
  color: var(--dark-brown) !important;
  font-weight: 600 !important;
  font-size: .92rem !important;
  letter-spacing: .05em !important;
  padding: 14px 18px !important;
  transition: color .2s, background .2s !important;
}
#navi .navi-in > ul > li > a:hover,
#navi a:hover {
  color: #006556 !important;
  background: rgba(0,101,86,.06) !important;
}
#navi .navi-in > ul > li.current-menu-item > a {
  color: var(--amber) !important;
  border-bottom: 2px solid var(--amber);
}

/* ===== MOBILE HEADER（白背景なのでアイコンは濃色） ===== */
#sp-menu-open,
.sp-menu-open,
#sp-menu-close,
.sp-menu-close {
  color: var(--dark-brown) !important;
}

/* ===== POST CARDS (一覧) ===== */
.card-wrap,
.entry-card,
.popular-article-card,
.a-wrap {
  background: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s !important;
  overflow: hidden !important;
}
.card-wrap:hover,
.entry-card:hover,
.popular-article-card:hover,
.a-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  text-decoration: none !important;
}
.card-wrap .card-thumb img,
.entry-card .entry-card-thumb img,
.a-wrap .a-thumb img {
  transition: transform .35s !important;
}
.card-wrap:hover .card-thumb img,
.entry-card:hover .entry-card-thumb img,
.a-wrap:hover .a-thumb img {
  transform: scale(1.05) !important;
}
.a-title,
.card-title,
.entry-card-title {
  color: var(--dark-brown) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}
.a-wrap:hover .a-title,
.card-wrap:hover .card-title {
  color: var(--amber) !important;
}

/* ===== CATEGORY LABEL ===== */
.cat-label,
.entry-category,
.label-cat {
  background: var(--amber) !important;
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  letter-spacing: .05em !important;
}

/* ===== ARTICLE PAGE ===== */
.entry-content,
.article-body,
.the-content {
  background: var(--white) !important;
  border-radius: var(--radius) !important;
  padding: 36px 40px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
  line-height: 1.9 !important;
}
@media (max-width: 834px) {
  .entry-content,
  .article-body { padding: 20px 18px !important; }
}

/* ===== POST TITLE ===== */
.entry-title,
.post-title {
  color: var(--espresso) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: .02em !important;
  font-size: 1.7rem !important;
}
@media (max-width: 834px) {
  .entry-title, .post-title { font-size: 1.35rem !important; }
}

/* ===== HEADINGS IN CONTENT ===== */
.entry-content h2 {
  background: linear-gradient(135deg, var(--espresso) 0%, #3d2a14 100%) !important;
  color: #ffffff !important;
  padding: 14px 20px 14px 54px !important;
  border-radius: var(--radius) !important;
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  position: relative !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(26,16,9,.18) !important;
  margin: 2.4em 0 1.2em !important;
}
.entry-content h2::before {
  content: '☕';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
}
.entry-content h3 {
  border-left: 5px solid var(--amber) !important;
  padding-left: 14px !important;
  color: var(--espresso) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  background: none !important;
  border-bottom: none !important;
  margin: 2em 0 .8em !important;
}
.entry-content h4 {
  color: var(--dark-brown) !important;
  font-weight: 700 !important;
  border-bottom: 1px dashed var(--border) !important;
  padding-bottom: 6px !important;
}

/* ===== AFFILIATE BUTTONS ===== */
/* Amazon */
a[href*="amazon.co.jp"],
a[href*="amzn.to"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #e88b00 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: .93rem !important;
  padding: 11px 22px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  transition: transform .15s, box-shadow .15s !important;
  letter-spacing: .03em !important;
  margin: 3px !important;
  border: none !important;
}
a[href*="amazon.co.jp"]:hover,
a[href*="amzn.to"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.24) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
a[href*="amazon.co.jp"]::before,
a[href*="amzn.to"]::before {
  content: '🛒';
  font-size: 1rem;
}

/* 楽天 */
a[href*="rakuten.co.jp"],
a[href*="hb.afl.rakuten"],
a[href*="item.rakuten"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #bf0000 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: .93rem !important;
  padding: 11px 22px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  transition: transform .15s, box-shadow .15s !important;
  margin: 3px !important;
  border: none !important;
}
a[href*="rakuten.co.jp"]:hover,
a[href*="hb.afl.rakuten"]:hover,
a[href*="item.rakuten"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.24) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
a[href*="rakuten.co.jp"]::before,
a[href*="hb.afl.rakuten"]::before,
a[href*="item.rakuten"]::before { content: '🏪'; font-size: 1rem; }

/* Yahoo! */
a[href*="shopping.yahoo"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #e60033 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: .93rem !important;
  padding: 11px 22px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  transition: transform .15s, box-shadow .15s !important;
  margin: 3px !important;
  border: none !important;
}
a[href*="shopping.yahoo"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.24) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
a[href*="shopping.yahoo"]::before { content: '🔖'; font-size: 1rem; }

/* ===== msmaflink（Moshimoカード型リンク）の商品名は例外にする =====
   商品名リンクの飛び先もAmazon等なので上のボタン装飾が当たってしまい、
   商品名まるごとが巨大なオレンジのボタンに化けていた。カードを使う27記事すべてで
   起きていたので商品名は通常のテキストリンクに戻す（2026-07-29）。
   カード内のショップボタン(.easyLink-info-btn)は装飾を当てたままでよい。 */
.easyLink-info-name a,
.easyLink-info-name a[href*="amazon.co.jp"],
.easyLink-info-name a[href*="amzn.to"],
.easyLink-info-name a[href*="rakuten.co.jp"],
.easyLink-info-name a[href*="item.rakuten"],
.easyLink-info-name a[href*="shopping.yahoo"] {
  display: inline !important;
  background: none !important;
  color: #373A36 !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  line-height: 1.65 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.easyLink-info-name a::before { content: none !important; }
.easyLink-info-btn a { justify-content: center !important; }

/* ===== FONT UNIFY (2026-08-15) =====
   カスタマイザー追加CSS(wp-custom-css)に旧デザインの明朝指定
   (body/.entry-content=Noto Serif JP・.entry-title=Cormorant Garamond)が残っており、
   本文だけ明朝・見出しはゴシックの混在になっていた。
   比較・ランキング系サイトの標準（マイベスト等はゴシック統一）に合わせ、
   子テーマのサンセリフに全面統一する。 */
.entry-content,
.entry-content p,
.entry-content li,
.entry-title,
.article-title,
.card-title,
.a-title,
.entry-card-title {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif !important;
}

/* ===== TABLES ===== */
.entry-content table {
  border-collapse: collapse !important;
  width: 100% !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow) !important;
  margin: 1.8em 0 !important;
  font-size: .92rem !important;
}
.entry-content table th {
  background: var(--espresso) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 13px 16px !important;
  text-align: center !important;
}
.entry-content table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle !important;
}
.entry-content table tr:nth-child(even) td {
  background: #fdf8f3 !important;
}
.entry-content table tr:hover td {
  background: #fef3e2 !important;
  transition: background .15s !important;
}
/* 「ランキング1位を金色で強調」のtr:first-child自動装飾は削除（2026-08-15）。
   ランキングでないスペック表・選び方表の先頭行にも🥇が付き、
   根拠のないNo.1表示＝景表法上のリスクになるため。
   本物のランキング1位は h3#ranking-top のバッジで表現する。 */

/* ===== BLOCKQUOTE ===== */
.entry-content blockquote {
  border-left: 5px solid var(--amber) !important;
  background: #fdf8f0 !important;
  padding: 16px 20px !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  color: var(--dark-brown) !important;
  font-style: normal !important;
}

/* ===== LISTS ===== */
.entry-content ul li::marker {
  color: var(--amber) !important;
}
.entry-content ol li::marker {
  color: var(--espresso) !important;
  font-weight: 700 !important;
}

/* ===== COCOON NOTICE/BOX ===== */
.info-box,
.success-box,
.alert-box,
.memo-box {
  border-radius: var(--radius) !important;
  border-width: 2px !important;
}

/* ===== RELATED POSTS SECTION ===== */
.entry-content hr.wp-block-separator {
  border: none !important;
  border-top: 2px solid var(--amber) !important;
  opacity: .35 !important;
  margin: 2.5em 0 1.5em !important;
}
.entry-content h3:last-of-type {
  color: var(--espresso) !important;
}
.entry-content ul:last-child li a {
  color: var(--amber) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.entry-content ul:last-child li a:hover {
  color: var(--cta) !important;
  text-decoration: underline !important;
}

/* ===== AUTHOR BOX ===== */
.author-box,
.writer-box {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 20px !important;
}
.author-name,
.writer-name {
  color: var(--espresso) !important;
  font-weight: 700 !important;
}

/* ===== SIDEBAR ===== */
#sidebar .widget,
.sidebar .widget {
  background: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--border) !important;
}
#sidebar .widget-title,
#sidebar .widgettitle,
.sidebar .widgettitle {
  color: var(--espresso) !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  border-bottom: 3px solid var(--amber) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  letter-spacing: .04em !important;
}
/* 人気記事ウィジェット */
#sidebar .popular-articles a,
.popular-articles a {
  color: var(--dark-brown) !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  line-height: 1.5 !important;
  transition: color .15s !important;
}
#sidebar .popular-articles a:hover {
  color: var(--amber) !important;
  text-decoration: none !important;
}

/* ===== BREADCRUMB ===== */
#breadcrumb,
.breadcrumb {
  background: transparent !important;
  font-size: .82rem !important;
  color: var(--text-lt) !important;
  padding: 8px 0 !important;
}
#breadcrumb a,
.breadcrumb a {
  color: var(--amber) !important;
}

/* ===== PAGINATION ===== */
.pagination a,
.page-numbers a {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--dark-brown) !important;
  border-radius: 6px !important;
  transition: all .15s !important;
  font-weight: 600 !important;
}
.pagination a:hover,
.page-numbers a:hover {
  background: var(--espresso) !important;
  border-color: var(--espresso) !important;
  color: #fff !important;
}
.pagination .current,
.page-numbers .current {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ===== FOOTER ===== */
#footer,
.footer-container,
.site-footer,
.footer-inner {
  background: var(--espresso) !important;
  color: #bba990 !important;
  border-top: 3px solid var(--amber) !important;
}
#footer a,
.site-footer a {
  color: var(--amber-lt) !important;
  transition: color .15s !important;
}
#footer a:hover,
.site-footer a:hover {
  color: #ffffff !important;
}
.copyright,
.footer-copyright {
  color: #7a6050 !important;
  font-size: .82rem !important;
}

/* ===== SEARCH BOX ===== */
.search-form input[type="search"] {
  border: 2px solid var(--border) !important;
  border-radius: 50px 0 0 50px !important;
  padding: 10px 16px !important;
  background: #fff !important;
  color: var(--text) !important;
}
.search-form button,
.search-submit {
  background: var(--amber) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.search-form button:hover,
.search-submit:hover {
  background: var(--cta) !important;
}

/* ===== TAG CLOUD ===== */
.tagcloud a {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-lt) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: .82rem !important;
  transition: all .15s !important;
  text-decoration: none !important;
}
.tagcloud a:hover {
  background: var(--espresso) !important;
  border-color: var(--espresso) !important;
  color: #fff !important;
}

/* ===== TOC (目次) ===== */
.toc-title,
.ez-toc-title {
  background: var(--espresso) !important;
  color: #ffffff !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
}
.toc,
#ez-toc-container {
  background: #fdf8f3 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  margin: 1.5em 0 !important;
}
.toc a,
#ez-toc-container a {
  color: var(--amber) !important;
}
.toc a:hover,
#ez-toc-container a:hover {
  color: var(--cta) !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media screen and (max-width: 834px) {
  .entry-content h2 {
    font-size: 1.05rem !important;
    padding: 12px 14px 12px 44px !important;
  }
  .entry-content h3 {
    font-size: 1rem !important;
  }
  a[href*="amazon.co.jp"],
  a[href*="amzn.to"],
  a[href*="rakuten.co.jp"],
  a[href*="hb.afl.rakuten"],
  a[href*="item.rakuten"],
  a[href*="shopping.yahoo"] {
    font-size: .86rem !important;
    padding: 9px 16px !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 4px 0 !important;
  }
}

@media screen and (max-width: 480px) {
  .entry-title, .post-title { font-size: 1.2rem !important; }
  .entry-content, .article-body { padding: 16px 14px !important; }
}


/* ===== NOTICE BAR (高単価記事への誘導バー) ===== */
.rb-notice-bar {
  background: #006556;
  color: #faf8f5;
  text-align: center;
  padding: 9px 16px;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.6;
  position: relative;
  z-index: 9999;
}
.rb-notice-bar strong { font-weight: 700; }
.rb-notice-bar a {
  color: #ffd98a !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255, 217, 138, .5);
  margin-left: .4em;
  transition: opacity .15s !important;
}
.rb-notice-bar a:hover { opacity: .8 !important; }

/* ===== RANKING BADGE (No.1 / No.2 / No.3) ===== */
h3[id="ranking-top"] { position: relative; }
h3[id="ranking-top"]::before {
  content: '🥇 No.1';
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a1009;
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  margin-right: 8px;
  letter-spacing: .05em;
  vertical-align: middle;
  display: inline-block;
}

/* Amazonリンクに「最安値確認」を付す装飾は、価格を検証せず最安と断定することになり
   景品表示法上の有利誤認にあたりうるため削除した（2026-07-29）。 */

/* ===== STICKY CTA (モバイル用フローティングボタン) ===== */
.rb-sticky-cta {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  background: linear-gradient(135deg, #e8500a, #bf3a00);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  padding: 14px 20px;
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(232,80,10,.55);
  text-decoration: none;
  letter-spacing: .04em;
  transition: transform .15s;
  white-space: nowrap;
}
.rb-sticky-cta:hover {
  transform: scale(1.04);
  color: #fff;
  text-decoration: none;
}
.single .rb-sticky-cta { display: flex; align-items: center; gap: 6px; }
@media (min-width: 1024px) {
  .rb-sticky-cta { display: none !important; }
}

/* ===== COMPARISON TABLE HIGHLIGHT ===== */
.entry-content table tr td:first-child { font-weight: 700; }
/* tr:first-childへの金枠・🥇自動付与は削除（2026-08-15・上のTABLESセクション参照） */

/* ===== URGENCY TEXT ===== */
.rb-urgency {
  display: inline-block;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: .85rem;
  color: #856404;
  font-weight: 600;
  margin: 8px 0;
}

/* ===== IMPROVED RELATED POSTS ===== */
.entry-content ul:last-child {
  background: #fdf8f3;
  border: 1px solid #e8ddd0;
  border-radius: 10px;
  padding: 16px 20px;
}
.entry-content ul:last-child li {
  border-bottom: 1px dashed #e8ddd0;
  padding: 8px 0;
  list-style: none;
}
.entry-content ul:last-child li:last-child { border-bottom: none; padding-bottom: 0; }
.entry-content ul:last-child li::before {
  content: '→';
  color: #c8860a;
  font-weight: 700;
  margin-right: 8px;
}

/* ===== PRINT ===== */
@media print {
  .rb-notice-bar, .rb-sticky-cta { display: none !important; }
}

/* ================================================================
   SILK スキン キーカラー掃討（2026-08-15）
   Cocoonのキーカラー #e57373（サーモンピンク）が動的インラインCSS
   (#cocoon-skin-style-inline-css) 経由でタグライン・h2下線・サイドバー
   見出し・著者ボックス・トップへ戻るボタン・モバイルフッター等に出て、
   子テーマのespresso/amberパレットと衝突していた。
   wp-admin設定でなくCSSで上書きするのはgit管理で可逆にするため。
   セレクタは実ページのインラインCSSから抽出した実物。
================================================================ */

/* タグライン帯（通知バー直下のピンク帯）。サイト説明文はヘッダー・
   meta descriptionに既出で、バーが2段重なるだけなので非表示にする */
.tagline { display: none !important; }

/* h2は子テーマでデザイン済み。silkが付けるピンクの下線バーを消す */
.article h2 span::after { display: none !important; }

/* 背景がピンクになる小物 → amber */
blockquote p:first-of-type::before,
.blogcard-label,
.timeline-item::before,
ol.toc-list > li::before,
.sns-share-message,
.wp-calendar-table [id$="today"],
.is-style-color-head th {
  background: var(--amber) !important;
}

/* 背景がピンクになる大きめ要素 → espresso */
.author-widget-name,
.go-to-top-button,
.go-to-top-button:hover,
.mobile-footer-menu-buttons {
  background: var(--espresso) !important;
}

/* 文字色がピンクになる要素 → espresso/amber */
.archive-title span,
.article h4 > span::before,
.article h5,
ul.toc-list > li::before,
.search-form div.sbtn::after,
.pager-post-navi a .iconfont,
.pager-post-navi a.prev-next-home,
.menu-drawer > li > a::before,
.slick-dots li button:before,
.slick-dots li.slick-active button:before {
  color: var(--amber) !important;
}
.sidebar h2,
.sidebar h3 {
  color: var(--espresso) !important;
  border-color: var(--amber) !important;
}

/* ボーダーがピンクになる要素 → amber */
.article h3,
.toc,
.author-widget-name:after {
  border-color: var(--amber) !important;
}

/* トップページの新着/人気タブ（選択中タブがピンクになる） */
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"],
#index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"],
#index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"],
#index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
  background: var(--espresso) !important;
  border-color: var(--espresso) !important;
  color: #fff !important;
}

/* ================================================================
   ヘッダー圧縮 & ナビ1行化（2026-08-15）
   ヘッダーが白い余白180pxで画面を占有し、ナビはsilkがliに固定幅176pxを
   与えるため9項目が不揃いな2行に折り返していた。
   参考にした同系統サイト（マイベスト・AFRO BLOG等）はいずれも
   コンパクトなヘッダー＋1行ナビ。
================================================================ */
/* wp-custom-cssの「.header .header-in{min-height:180px!important}」(2026-07-09の
   ヒーロー圧縮400px→180px)にID指定の詳細度で勝ち、さらにロゴの実高まで圧縮する */
#header .header-in,
.header .header-in { min-height: 0 !important; height: auto !important; }
#header .logo-header,
.logo-header {
  padding: 18px 0 !important;
  margin: 0 !important;
}
#navi .navi-in > ul > li {
  width: auto !important;
  flex: 0 1 auto !important;
}
#navi .navi-in > ul {
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* ================================================================
   トップページ「おすすめカード」の二重テキスト解消（2026-08-15）
   アイキャッチ画像自体にタイトル文字が焼き込まれているのに、
   Cocoonが白抜きタイトルを画像の上に重ねて表示し文字が二重に潰れていた
   （特にモバイルで判読不能）。オーバーレイ側を消し、画像の焼き込み
   タイトルに一本化する。リンクテキストはDOMに残るのでSEO影響なし。
================================================================ */
.recommended .navi-entry-card-title { display: none !important; }

/* ================================================================
   [offer] ASP案件CTAの強化（2026-08-15）
   ボタン装飾のベースはseo-schema.phpのインラインstyle。
   ここではインラインでは書けないhoverとモバイル全幅化だけを足す。
   緑#006556は「CTA・アクセント専用色」として正式採用
   （お知らせバー・navホバー・[aff]/[offer]ボタン・Editor's Pickで共通）。
================================================================ */
a.rb-offer-btn:hover {
  background: #00806c !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.3) !important;
  text-decoration: none !important;
}
a.rb-offer-btn { transition: transform .15s, box-shadow .15s, background .15s !important; }
@media screen and (max-width: 600px) {
  a.rb-offer-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}