@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 ===== */
#header,
.header-container,
.site-header,
.header-in {
  background: var(--espresso) !important;
  border-bottom: 3px solid var(--amber) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
.site-name-text,
#site-name a,
.header-logo-text a,
.site-name a {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  font-size: 1.3rem !important;
}
.site-description-text,
.site-description {
  color: var(--amber-lt) !important;
  font-size: .8rem !important;
  letter-spacing: .06em !important;
}

/* ===== GLOBAL NAV ===== */
#navi,
.navi,
.global-nav {
  background: var(--espresso) !important;
  border-bottom: 1px solid rgba(200,134,10,.3) !important;
}
#navi .navi-in,
#navi ul,
.navi-in {
  background: var(--espresso) !important;
}
#navi .navi-in > ul > li > a,
.global-nav > ul > li > a,
#navi a {
  color: #e0d0b8 !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: var(--amber-lt) !important;
  background: rgba(240,180,41,.08) !important;
}
#navi .navi-in > ul > li.current-menu-item > a {
  color: var(--amber-lt) !important;
  border-bottom: 2px solid var(--amber-lt);
}

/* ===== MOBILE HEADER ===== */
#sp-menu-open,
.sp-menu-open {
  color: #ffffff !important;
}
#sp-menu-close,
.sp-menu-close {
  color: #ffffff !important;
}

/* ===== HERO / TOP AREA ===== */
.home-top-area,
.top-pickup-box {
  background: var(--espresso) !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: linear-gradient(135deg, #FF9900 0%, #e67e00 100%) !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 3px 14px rgba(255,153,0,.42) !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 7px 22px rgba(255,153,0,.58) !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: linear-gradient(135deg, #bf0000 0%, #8b0000 100%) !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 3px 14px rgba(191,0,0,.38) !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 7px 22px rgba(191,0,0,.52) !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: linear-gradient(135deg, #FF0033 0%, #cc0029 100%) !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 3px 14px rgba(255,0,51,.36) !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 7px 22px rgba(255,0,51,.5) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
a[href*="shopping.yahoo"]::before { content: '🔖'; font-size: 1rem; }

/* ===== 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位を金色で強調 */
.entry-content table tr:first-child td {
  font-weight: 700 !important;
}

/* ===== 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: linear-gradient(90deg, #e8500a 0%, #c8860a 100%);
  color: #ffffff;
  text-align: center;
  padding: 10px 16px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  position: relative;
  z-index: 9999;
}
.rb-notice-bar a {
  color: #fff !important;
  text-decoration: underline !important;
  font-weight: 800 !important;
  transition: opacity .15s !important;
}
.rb-notice-bar a:hover { opacity: .85 !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 PRICE BADGE ===== */
.entry-content a[href*="amazon"]:first-of-type::after {
  content: ' ✓ 最安値確認';
  font-size: .78rem;
  opacity: .85;
}

/* ===== 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; }
.entry-content table tr:first-child {
  outline: 2px solid #FFD700 !important;
  outline-offset: -1px;
}
.entry-content table tr:first-child td:first-child::before {
  content: '🥇 ';
}

/* ===== 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; }
}