/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 01 2026 | 12:30:39 */
:root {
--color-primary: #2563EB;
--color-primary-dark: #1D4ED8;
--color-primary-light: #DBEAFE;
--color-navy: #1E3A5F;
--color-accent: #F97316;
--color-bg: #F8F7F4;
--color-surface: #FFFFFF;
--color-surface-alt: #F1F5F9;
--color-border: #E2E8F0;
--color-text: #1E293B;
--color-text-secondary: #64748B;
--color-text-tertiary: #6B7B8D;
--color-success: #16A34A;
--color-warning: #F59E0B;
--color-danger: #DC2626;
--font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', sans-serif;
--font-en: 'Inter', 'Helvetica Neue', sans-serif;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}
body { background: var(--color-bg) !important; font-family: var(--font-jp) !important; color: var(--color-text) !important; -webkit-font-smoothing: antialiased; }

/* ============================================================
   THEME COLOR NORMALIZATION
   Override ALL #000000 / #191919 / #3f3f3f from THE THOR inline CSS
   ============================================================ */

/* --- Content area: text, links, hover --- */
.content, .content p, .content li, .content span, .content div { color: var(--color-text) !important; }
.content a { color: var(--color-primary) !important; }
.content a:hover { color: var(--color-primary-dark) !important; }
.phrase a { color: var(--color-primary) !important; }
.phrase a:hover { color: var(--color-primary-dark) !important; }
.content h2 a:hover, .content h3 a:hover, .content h4 a:hover, .content h5 a:hover { color: var(--color-primary-dark) !important; }
.content ul.menu li a:hover { color: var(--color-primary) !important; }
.content .sitemap li a:hover { color: var(--color-primary) !important; }

/* --- Content headings --- */
.content h2, .content h3, .content h4, .content h5 { color: var(--color-text) !important; }
.partsH2-1 h2 { color: var(--color-text) !important; border-color: var(--color-primary) !important; }
.partsH3-13 h3 { color: var(--color-text) !important; border-left-color: var(--color-text-secondary) !important; border-bottom-color: var(--color-border) !important; }
.categoryBox__title { color: var(--color-text) !important; }

/* --- Content lists --- */
.content ul, .content ol { color: var(--color-text) !important; }
.content ul > li::before { color: var(--color-primary) !important; }
.content ol > li::before { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.content ol > li > ol > li::before { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.content ol > li > ol > li > ol > li::before { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }

/* --- Content: tables, blockquotes, balloons --- */
.content table { color: var(--color-text) !important; border-top-color: var(--color-border) !important; border-left-color: var(--color-border) !important; }
.content table th { background: var(--color-navy) !important; color: #fff !important; border-color: var(--color-border) !important; }
.content table td { background: var(--color-surface) !important; border-color: var(--color-border) !important; }
.content table tr:nth-child(odd) td { background-color: var(--color-surface-alt) !important; }
.content blockquote { color: var(--color-text) !important; background-color: var(--color-surface-alt) !important; }
.content blockquote::before { color: var(--color-border) !important; }
.content .balloon .balloon__text { color: var(--color-text) !important; background-color: var(--color-surface-alt) !important; }
.content .balloon .balloon__text-left:before { border-left-color: var(--color-surface-alt) !important; }
.content .balloon .balloon__text-right:before { border-right-color: var(--color-surface-alt) !important; }
.content .balloon-boder .balloon__text { color: var(--color-text) !important; background-color: var(--color-surface) !important; border-color: var(--color-border) !important; }
.content .balloon-boder .balloon__text-left:before { border-left-color: var(--color-border) !important; }
.content .balloon-boder .balloon__text-left:after { border-left-color: var(--color-surface) !important; }
.content .balloon-boder .balloon__text-right:before { border-right-color: var(--color-border) !important; }
.content .balloon-boder .balloon__text-right:after { border-right-color: var(--color-surface) !important; }

/* --- Affiliate Tag Boxes (afTagBox) --- */
.content .afTagBox__btnDetail, .content .afTagBox__btnAf { background-color: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-full) !important; }
.widget .widgetAfTag__btnDetail, .widget .widgetAfTag__btnAf { background-color: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-full) !important; }

/* --- Sitecard (internal link cards) --- */
.sitecard { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; overflow: hidden !important; transition: box-shadow 0.3s ease !important; }
.sitecard:hover { box-shadow: var(--shadow-md) !important; }
.sitecard a { color: var(--color-text) !important; text-decoration: none !important; }
.sitecard a:hover { color: var(--color-primary) !important; }
.sitecard__subtitle { color: var(--color-text-secondary) !important; font-size: 13px !important; }
.sitecard__contents { color: var(--color-text) !important; }

/* --- Date list --- */
.dateList__item a { color: var(--color-text-secondary) !important; }
.dateList__item a:hover { color: var(--color-primary) !important; }

/* --- Buttons (theme) --- */
.btn__link-primary, .content .btn__link-primary, .btn__link-secondary, .content .btn__link-secondary, .btn__link-search, .searchBtn__contentInner .btn__link-search { background-color: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-full) !important; }
.btn__link-primary:hover, .content .btn__link-primary:hover, .btn__link-secondary:hover, .content .btn__link-secondary:hover { background-color: var(--color-primary-dark) !important; }
.btn__link-normal, .content .btn__link-normal { color: var(--color-primary) !important; }
.btn__link-normal:hover, .content .btn__link-normal:hover { background-color: var(--color-primary) !important; color: #fff !important; }

/* --- Comments --- */
.comments__list .comment-meta { background-color: var(--color-navy) !important; color: #fff !important; }
.comments__list .comment-reply-link { color: var(--color-primary) !important; }
.comments__list .comment-reply-link:hover { background-color: var(--color-primary) !important; color: #fff !important; }
.comment-respond .submit { background-color: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-full) !important; }

/* --- Pagination --- */
.pager__item, .page-numbers, .pagePager__item { color: var(--color-text) !important; }
.pager__item:hover, .pager__item-current, .page-numbers:hover, .page-numbers.current, .pagePager__item:hover, .pagePager__item-current { background-color: var(--color-primary) !important; color: #fff !important; }

/* --- Navigation & Menu buttons (dark bg context) --- */
.menuBtn__close:hover, .menuBtn__link:hover, .searchBtn__close:hover, .searchBtn__link:hover { color: var(--color-primary) !important; }
@media only screen and (min-width: 992px) { .menuBtn__link { background-color: var(--color-navy) !important; } }
.subNavi__link-pickup { color: var(--color-text) !important; }
@media only screen and (min-width: 992px) { .subNavi__link-pickup:hover { background-color: var(--color-primary) !important; color: #fff !important; } }

/* --- Category badges / labels --- */
.eyecatch__cat, .the__category { background-color: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-full) !important; }

/* --- Prev/Next post navigation --- */
.prevNext__pop { background-color: var(--color-navy) !important; color: #fff !important; }

/* --- Pickup / Ranking --- */
.pickupHead { background-color: var(--color-primary) !important; color: #fff !important; }
.pickup3__item { background-color: var(--color-navy) !important; }
.rankingBox__bg { background-color: var(--color-navy) !important; }

/* --- Widget heading backgrounds --- */
.heading, [class*="heading-widget"], [class*="heading-widgetsimple"], [class*="heading-widgetwide"], [class*="heading-widgetbottom"], [class*="heading-widgetborder"] { background-color: transparent !important; color: var(--color-text) !important; }
.heading::before, .heading::after, [class*="heading-widgetborder"]::before, [class*="heading-widgetborder"]::after { background-color: var(--color-primary) !important; }
[class*="heading-widgetbottom"]::before { border-color: var(--color-primary) !important; }
[class*="heading-widgetborder"] { border-color: var(--color-primary) !important; }
.heading a { color: var(--color-text) !important; }
.heading a:hover { color: var(--color-primary) !important; }

/* --- Widget nav / categories --- */
.widget.widget_nav_menu ul.menu li a, .widget.widget_categories ul li a { background-color: transparent !important; color: var(--color-text) !important; }
.widget.widget_nav_menu ul.menu li a:hover, .widget.widget_categories ul li a:hover { background-color: var(--color-surface-alt) !important; color: var(--color-primary) !important; }
.widget.widget_nav_menu ul.menu .current-menu-item > a, .widget.widget_categories ul .current-menu-item > a { background-color: var(--color-surface-alt) !important; color: var(--color-primary) !important; }
.widget.widget_nav_menu ul.menu .sub-menu a:hover, .widget.widget_nav_menu ul.menu .sub-menu .current-menu-item a { color: var(--color-primary) !important; }
.widget.widget_categories ul .children a:hover, .widget.widget_categories ul .children .current-menu-item a { color: var(--color-primary) !important; }
.widget.widget_nav_menu ul.menu, .widget.widget_nav_menu ul.menu li, .widget.widget_nav_menu ul.menu .sub-menu li, .widget.widget_categories ul, .widget.widget_categories ul li, .widget.widget_categories ul .children li { border-color: var(--color-border) !important; }
.widget.widget_nav_menu ul.menu li .sub-menu li a:before, .widget.widget_categories ul li .children li a:before { color: var(--color-text-secondary) !important; }
.widgetCatTitle, .widgetCatTitle__inner { background-color: var(--color-primary) !important; color: #fff !important; }

/* --- Widget misc --- */
.widget ul li a { color: var(--color-text) !important; }
.widget ul li a:hover { color: var(--color-primary) !important; }
.widget.widget_tag_cloud a:hover { background-color: var(--color-primary) !important; color: #fff !important; }
.widget.widget_rss .rsswidget:hover { color: var(--color-primary) !important; }
.widget.widget_calendar .calendar_wrap tbody a:hover { background-color: var(--color-primary) !important; color: #fff !important; }
.widget select:hover { border-color: var(--color-primary) !important; }
.widgetSearch__input:hover { border-color: var(--color-primary) !important; }
.widgetSearch__submit:hover { background-color: var(--color-primary) !important; }
.widgetSearch__checkLabel:hover:after, .widgetSearch__check:checked .widgetSearch__checkLabel:before, .widgetSearch__check:checked + .widgetSearch__checkLabel:before { border-color: var(--color-primary) !important; }
.widgetTab__item.current, .widgetTab__item:hover { border-top-color: var(--color-primary) !important; }
.widgetProfile__sns { background-color: var(--color-primary) !important; }

/* --- Breadcrumbs (theme) --- */
.breadcrumb__item a:hover { color: var(--color-primary) !important; }

/* --- Scroll to top --- */
.topScrollBtn, #scroll-to-top, .bottomFooter__topBtn { background: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-sm) !important; }

/* --- Swiper / Carousel nav --- */
.swiper-pagination-bullet-active { background-color: var(--color-primary) !important; }
.swiper-slider .swiper-button-next, .swiper-slider .swiper-button-prev { background-color: var(--color-primary) !important; }

/* --- SNS / Footer / Mobile controller --- */
.snsFooter { background-color: var(--color-navy) !important; }
.controllerFooter__item:last-child, .controllerFooter__close { background-color: var(--color-navy) !important; }
@media only screen and (min-width: 992px) { .menuBtn__link { background-color: var(--color-navy) !important; } }

/* --- Mask overlays (keep dark, these are image overlays) --- */
.mask-color, .mask-colorgray { background-color: rgba(30,58,95,0.6) !important; }
.pickup3__bg.mask.mask-color { background-color: rgba(30,58,95,0.6) !important; }

/* --- Archive / Category / Tag / Search pages (NO .content wrapper) --- */
/* These pages have dark text rgba(0,0,0,.5~.75) from style.min.css with NO .content override */
.phrase-secondary, .phrase-tertiary { color: var(--color-text-secondary) !important; }
.dateList__item { color: var(--color-text-secondary) !important; }
.archive__item { color: var(--color-text) !important; }
.archive__contents { color: var(--color-text) !important; }
.archive__contents a { color: var(--color-text) !important; }
.archive__contents a:hover { color: var(--color-primary) !important; }
.searchHead__submit:hover { color: var(--color-primary) !important; }
.t-headerCenter .menuBtn__link:hover { color: #fff !important; }
/* Category/tag archive headings */
.heading.heading-primary { color: var(--color-text) !important; }
/* Archive post titles */
.archive .heading.heading-secondary a { color: var(--color-text) !important; }
.archive .heading.heading-secondary a:hover { color: var(--color-primary) !important; }
/* Search results page */
.searchPost__contents { color: var(--color-text) !important; }
.searchPost__contents a { color: var(--color-text) !important; }
.searchPost__contents a:hover { color: var(--color-primary) !important; }
/* Global: ensure all dateList items (not just links) are readable */
.dateList__item, .dateList__item span { color: var(--color-text-secondary) !important; }
/* Sidebar heading text on all pages */
.heading a { color: var(--color-text) !important; }
.heading a:hover { color: var(--color-primary) !important; }
/* Main area general text (fallback for non-.content pages) */
.l-main { color: var(--color-text) !important; }
.l-main a { color: var(--color-primary) !important; }
.l-main .heading a { color: var(--color-text) !important; }
.l-main .heading a:hover { color: var(--color-primary) !important; }
/* Footer text */
.bottomFooter { color: rgba(255,255,255,0.7) !important; }
.bottomFooter a { color: rgba(255,255,255,0.7) !important; }
.bottomFooter a:hover { color: #fff !important; }

/* --- EP-BOX (THE THOR colored boxes: merit/demerit/icon/mark/brackets/subtitle) --- */
/* Override ALL ftc-* fluorescent accent colors → solid readable dark text */
.content .ep-box[class*="ftc-"] { color: #1E293B !important; }
.content .ep-box[class*="ftc-"] li,
.content .ep-box[class*="ftc-"] p,
.content .ep-box[class*="ftc-"] span,
.content .ep-box[class*="ftc-"] div:not(.ep-inbox),
.content .ep-box[class*="ftc-"] b,
.content .ep-box[class*="ftc-"] strong { color: #1E293B !important; }
/* ep-inbox headers (colored labels like メリット/デメリット) - keep white text on colored bg */
.content .ep-inbox[class*="ftc-white"] { color: #fff !important; }
/* Ensure ALL ep-box text is readable regardless of background */
.content .ep-box[class*="bgc-VP"],
.content .ep-box[class*="bgc-white"],
.content .ep-box[class*="bgc-VL"],
.content .ep-box[class*="bgc-L"]:not([class*="bgc-VL"]) { color: #1E293B !important; }
.content .ep-box[class*="bgc-VP"] li,
.content .ep-box[class*="bgc-VP"] b,
.content .ep-box[class*="bgc-VP"] strong,
.content .ep-box[class*="bgc-white"] li,
.content .ep-box[class*="bgc-white"] b,
.content .ep-box[class*="bgc-white"] strong,
.content .ep-box[class*="bgc-VL"] li,
.content .ep-box[class*="bgc-VL"] b,
.content .ep-box[class*="bgc-VL"] strong { color: #1E293B !important; }
/* ep-box list bullets */
.content .ep-box ul > li::before { color: #1E3A5F !important; }
.content .ep-box ol > li::before { color: #1E3A5F !important; border-color: #1E3A5F !important; }
/* Mark boxes (Q&A, !, ?) */
.content .es-BmarkQ, .content .es-BmarkA { color: var(--color-text) !important; }
/* Brackets box */
.content .es-Bbrackets { color: var(--color-text) !important; }
.content .es-Bbrackets::before, .content .es-Bbrackets::after { border-color: var(--color-text-secondary) !important; }
/* SubTitle Traditional box */
.content .es-BsubTradi::before { background: var(--color-primary) !important; }
/* Icon list badges */
.content .es-LiconBox::before, .content .es-LiconCircle::before,
.content .es-BTiconBox::before, .content .es-BTiconCircle::before { background: var(--color-primary) !important; }
/* Timeline */
.timeline-title { background: var(--color-primary) !important; color: #fff !important; }
.timeline-box { border-color: var(--color-primary) !important; }
.content .timeline-item::before { border-color: var(--color-primary) !important; }
.content .timeline-item:first-of-type::before, .content .timeline-item:last-of-type::before { background: var(--color-primary) !important; }

/* --- THE THOR text markers (蛍光マーカー) --- */
/* Light mode: softer, warmer highlight tones + guaranteed dark text */
[class*="marker-thick"], [class*="marker-half"], [class*="marker-thin"] { color: #1E293B !important; }
.content a [class*="marker-"], .content a[class*="marker-"] { color: #1E293B !important; text-decoration: underline !important; }
.marker-thickYellow, .marker-halfYellow, .marker-thinYellow { background: linear-gradient(transparent 60%, #FBBF24 60%) !important; }
.marker-thickRed, .marker-halfRed, .marker-thinRed { background: linear-gradient(transparent 60%, #FCA5A5 60%) !important; }
.marker-thickBlue, .marker-halfBlue, .marker-thinBlue { background: linear-gradient(transparent 60%, #93C5FD 60%) !important; }
.marker-thickPink, .marker-halfPink, .marker-thinPink { background: linear-gradient(transparent 60%, #F9A8D4 60%) !important; }
.marker-thickGreen, .marker-halfGreen, .marker-thinGreen { background: linear-gradient(transparent 60%, #86EFAC 60%) !important; }
.marker-thickGray, .marker-halfGray, .marker-thinGray { background: linear-gradient(transparent 60%, #CBD5E1 60%) !important; }

/* --- Inline style overrides (WordPress editor embeds style="color:#000000") --- */
.content span[style*="color"], .content p[style*="color"], .content strong[style*="color"] { color: var(--color-text) !important; }
.content a[style*="color"], .content a span[style*="color"] { color: var(--color-primary) !important; }
.content [style*="background-color"] { background-color: transparent !important; }

/* --- Comment form & search widget (light bg in dark context) --- */
.comment-respond textarea, .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"] { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
.widgetSearch__input { background: var(--color-surface) !important; color: var(--color-text) !important; }

/* ============================================================
   END THEME COLOR NORMALIZATION
   ============================================================ */

/* === HEADER === */
header.l-header, .l-header { background: var(--color-navy) !important; position: sticky !important; top: 0 !important; z-index: 100 !important; height: auto !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; }
.l-header a, .l-header .main-title a { color: #FFFFFF !important; text-decoration: none !important; }
.l-header .globalNavi, .globalNavi { background: transparent !important; }
.globalNavi::before { display: none !important; }
.globalNavi a { color: rgba(255,255,255,0.85) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.03em !important; transition: color 0.2s !important; }
.globalNavi a:hover { color: #FFFFFF !important; }
.main-title, .main-title a { font-family: var(--font-en) !important; font-weight: 700 !important; font-size: 20px !important; letter-spacing: 0.05em !important; }
.bhf-hidden { display: none !important; }

/* === HERO / HEADER SLIDESHOW === */
.headerSlide { margin-top: 0 !important; }
.elementor-element-c8593b6 { background: linear-gradient(135deg, #1E3A5F 0%, #2563EB 100%) !important; }
.elementor-element-485bede .elementor-heading-title { font-family: var(--font-en) !important; font-weight: 700 !important; color: #FFFFFF !important; text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4) !important; }
.elementor-element-03e4acf .elementor-heading-title,
.elementor-element-03e4acf .elementor-heading-title a { color: #FFFFFF !important; font-family: var(--font-en) !important; font-weight: 700 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4) !important; }
.elementor-element-4b09a03 { background: var(--color-navy) !important; }
.elementor-social-icon { background: rgba(255,255,255,0.15) !important; border-radius: 50% !important; transition: all 0.2s ease !important; }
.elementor-social-icon:hover { background: rgba(255,255,255,0.3) !important; transform: scale(1.1) !important; }

/* === STICKY HEADER BAR === */
.pSticky { background: var(--color-navy) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.pSticky .elementor-heading-title a { color: #FFFFFF !important; font-family: var(--font-en) !important; font-weight: 700 !important; }

/* === CONTENT AREA === */
.content { background: transparent !important; color: var(--color-text) !important; }
.l-wrapper { max-width: 1200px !important; margin: 0 auto !important; }

/* === CAROUSEL === */
#pcp_wrapper-2794, .pcp-carousel-wrapper { background: var(--color-surface) !important; border-radius: var(--radius-lg) !important; padding: 24px !important; margin-bottom: 32px !important; box-shadow: var(--shadow-sm) !important; }
.sp-pcp-post { border-radius: var(--radius-md) !important; overflow: hidden !important; }
.sp-pcp-title a { color: var(--color-text) !important; font-weight: 600 !important; font-size: 15px !important; line-height: 1.5 !important; }
.sp-pcp-title a:hover { color: var(--color-primary) !important; }
.sp-pcp-post-meta, .sp-pcp-post-meta li, .sp-pcp-post-meta ul, .sp-pcp-post-meta li a, .sp-pcp-post-meta span { color: var(--color-text-secondary) !important; font-size: 12px !important; }

/* === TAB SYSTEM === */
.jeg-elementor-kit.jkit-tabs { background: var(--color-surface) !important; border-radius: var(--radius-lg) !important; padding: 0 !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; margin-bottom: 32px !important; }
.tab-nav-list { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; padding: 0 16px !important; }
.tab-nav { padding: 16px 20px !important; border-bottom: 3px solid transparent !important; transition: all 0.2s !important; cursor: pointer !important; }
.tab-nav.active { border-bottom-color: var(--color-primary) !important; }
.tab-nav .tab-title { font-size: 0 !important; letter-spacing: -9999px !important; position: relative !important; display: inline-block !important; }
[data-tab="tab-fde908a"] .tab-title::after { content: "\30B5\30A6\30CA\306E\5165\308A\65B9"; font-size: 15px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; letter-spacing: normal !important; white-space: nowrap !important; }
[data-tab="tab-5319539"] .tab-title::after { content: "\500B\5BA4\30B5\30A6\30CA"; font-size: 15px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; letter-spacing: normal !important; white-space: nowrap !important; }
[data-tab="tab-6119488"] .tab-title::after { content: "\52B9\679C\30FB\5065\5EB7"; font-size: 15px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; letter-spacing: normal !important; white-space: nowrap !important; }
[data-tab="tab-30a1a15"] .tab-title::after { content: "\6C34\98A8\5442"; font-size: 15px !important; font-weight: 500 !important; color: var(--color-text-secondary) !important; letter-spacing: normal !important; white-space: nowrap !important; }
.tab-nav.active .tab-title::after { color: var(--color-primary) !important; font-weight: 600 !important; }
.tab-content { padding: 0 !important; }
.tab-content-list .tab-content.tab-5319539, .tab-content-list .tab-content.tab-6119488, .tab-content-list .tab-content.tab-30a1a15, .tab-content-list .tab-content.tab-9fa10a5, .tab-content-list .tab-content.tab-38aa43d { font-size: 0 !important; color: transparent !important; }
.tab-content-list .tab-content.tab-5319539.active, .tab-content-list .tab-content.tab-6119488.active, .tab-content-list .tab-content.tab-30a1a15.active, .tab-content-list .tab-content.tab-9fa10a5.active, .tab-content-list .tab-content.tab-38aa43d.active { display: flex !important; min-height: 60px !important; align-items: center !important; justify-content: center !important; padding: 24px !important; }
.tab-content.tab-5319539::after, .tab-content.tab-6119488::after, .tab-content.tab-30a1a15::after, .tab-content.tab-9fa10a5::after, .tab-content.tab-38aa43d::after { font-size: 15px !important; color: var(--color-primary) !important; font-weight: 600 !important; }
.tab-content.tab-5319539::after { content: "\2192  \500B\5BA4\30B5\30A6\30CA\306E\8A18\4E8B\4E00\89A7\3092\898B\308B"; }
.tab-content.tab-6119488::after { content: "\2192  \52B9\679C\30FB\5065\5EB7\306E\8A18\4E8B\4E00\89A7\3092\898B\308B"; }
.tab-content.tab-30a1a15::after { content: "\2192  \6C34\98A8\5442\306E\8A18\4E8B\4E00\89A7\3092\898B\308B"; }
.tab-content.tab-9fa10a5::after { content: "\2192  \6700\65B0\8A18\4E8B\3092\898B\308B"; }
.tab-content.tab-38aa43d::after { content: "\2192  \5168\8A18\4E8B\4E00\89A7\3092\898B\308B"; }
.tab-nav { flex: initial !important; white-space: nowrap !important; }

/* === ARTICLE GRID (JKit PostBlock) === */
.jkit-postblock { background: transparent !important; }
.jkit-posts { gap: 24px !important; }
.jkit-post { background: var(--color-surface) !important; border-radius: var(--radius-md) !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; border: 1px solid var(--color-border) !important; }
.jkit-post:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
.jkit-thumb .thumbnail-container { border-radius: 0 !important; overflow: hidden !important; }
.jkit-thumb .thumbnail-container img { transition: transform 0.4s ease !important; }
.jkit-post:hover .jkit-thumb .thumbnail-container img { transform: scale(1.05) !important; }
.jkit-postblock-content { padding: 16px 20px 20px !important; }
.jkit-post-category { background: var(--color-primary) !important; color: #FFFFFF !important; font-size: 11px !important; font-weight: 600 !important; padding: 4px 12px !important; border-radius: var(--radius-full) !important; display: inline-block !important; margin-bottom: 8px !important; letter-spacing: 0.05em !important; }
.jkit-post-title a { color: var(--color-text) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; text-decoration: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.jkit-post-title a:hover { color: var(--color-primary) !important; }
.jkit-post-meta-bottom { color: var(--color-text-tertiary) !important; font-size: 12px !important; margin-top: 12px !important; }
.jkit-block-pagination { margin-top: 24px !important; }
.jkit-block-pagination a, .jkit-pagination-button { background: var(--color-primary) !important; color: #FFFFFF !important; border: none !important; border-radius: var(--radius-full) !important; padding: 12px 32px !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s !important; }
.jkit-block-pagination a:hover, .jkit-pagination-button:hover { background: var(--color-primary-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(37,99,235,0.3) !important; }

/* === SIDEBAR === */
.widget-side .widget, .sidebar .widget { background: var(--color-surface) !important; border-radius: var(--radius-md) !important; padding: 20px !important; margin-bottom: 24px !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--color-border) !important; }
.widget-side .widget-title, .sidebar .widget-title, .sidebar .wp-block-heading { font-family: var(--font-jp) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--color-text) !important; padding-bottom: 12px !important; margin-bottom: 16px !important; border-bottom: 2px solid var(--color-primary) !important; }
.wpp-list li { padding: 12px 0 !important; border-bottom: 1px solid var(--color-border) !important; }
.wpp-list li:last-child { border-bottom: none !important; }
.wpp-list li a { color: var(--color-text) !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.2s !important; }
.wpp-list li a:hover { color: var(--color-primary) !important; }

/* === ARTICLE CONTENT === */
.entry-content, .elementor-widget-theme-post-content { font-family: var(--font-jp) !important; font-size: 16px !important; line-height: 1.8 !important; color: var(--color-text) !important; letter-spacing: 0.02em !important; }
.entry-content a, .elementor-widget-theme-post-content a { color: var(--color-primary) !important; text-decoration: underline !important; text-decoration-color: rgba(37,99,235,0.3) !important; text-underline-offset: 3px !important; transition: all 0.2s ease !important; }
.entry-content a:hover { color: var(--color-primary-dark) !important; text-decoration-color: var(--color-primary-dark) !important; }
.entry-content h2, .elementor-widget-theme-post-content h2 { font-family: var(--font-jp) !important; font-size: 28px !important; font-weight: 700 !important; color: var(--color-text) !important; padding: 16px 20px !important; margin: 48px 0 24px !important; border-left: 4px solid var(--color-primary) !important; border-bottom: none !important; background: linear-gradient(90deg, rgba(37,99,235,0.06) 0%, transparent 100%) !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.entry-content h3, .elementor-widget-theme-post-content h3 { font-family: var(--font-jp) !important; font-size: 22px !important; font-weight: 600 !important; color: var(--color-text) !important; padding: 10px 16px !important; margin: 36px 0 16px !important; border-left: 3px solid var(--color-text-secondary) !important; background-color: rgba(100,116,139,0.04) !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.entry-content h4, .elementor-widget-theme-post-content h4 { font-size: 18px !important; font-weight: 600 !important; color: var(--color-text) !important; padding-bottom: 8px !important; margin: 28px 0 12px !important; border-bottom: 2px dotted var(--color-border) !important; }
/* === COMPONENT BOXES === */
.sauna-cta-box { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; border-radius: var(--radius-md) !important; padding: 28px 24px !important; color: #fff !important; text-align: center !important; margin: 40px 0 !important; box-shadow: 0 4px 20px rgba(37,99,235,0.25) !important; }
.sauna-cta-box h3 { color: #fff !important; font-size: 22px !important; margin: 0 0 12px !important; padding: 0 !important; border: none !important; background: none !important; }
.sauna-cta-box .cta-button { display: inline-block !important; background: #fff !important; color: var(--color-primary) !important; font-weight: 700 !important; font-size: 16px !important; padding: 14px 36px !important; border-radius: var(--radius-full) !important; text-decoration: none !important; transition: all 0.3s ease !important; box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important; }
.sauna-cta-box .cta-button:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important; }
.sauna-point-box { background: #EFF6FF !important; border: 2px solid var(--color-primary) !important; border-radius: var(--radius-md) !important; padding: 24px !important; margin: 32px 0 !important; position: relative !important; }
.sauna-point-box::before { content: 'POINT' !important; position: absolute !important; top: -12px !important; left: 20px !important; background: var(--color-primary) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 4px 16px !important; border-radius: var(--radius-full) !important; }
.sauna-warning-box { background: #FEF2F2 !important; border: 2px solid var(--color-danger) !important; border-radius: var(--radius-md) !important; padding: 24px !important; margin: 32px 0 !important; position: relative !important; }
.sauna-warning-box::before { content: 'CAUTION' !important; position: absolute !important; top: -12px !important; left: 20px !important; background: var(--color-danger) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 4px 16px !important; border-radius: var(--radius-full) !important; }
.sauna-evidence-box { background: #F0FDF4 !important; border: 2px solid var(--color-success) !important; border-radius: var(--radius-md) !important; padding: 24px !important; margin: 32px 0 !important; position: relative !important; }
.sauna-evidence-box::before { content: 'EVIDENCE' !important; position: absolute !important; top: -12px !important; left: 20px !important; background: var(--color-success) !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; padding: 4px 16px !important; border-radius: var(--radius-full) !important; }

/* === TABLE OF CONTENTS (EZ-TOC) === */
#ez-toc-container { background: var(--color-surface) !important; border: none !important; border-left: 4px solid var(--color-primary) !important; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; padding: 24px 28px !important; margin: 32px 0 !important; box-shadow: var(--shadow-sm) !important; }
#ez-toc-container .ez-toc-title { font-family: var(--font-jp) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--color-primary) !important; }
#ez-toc-container ul li a { color: var(--color-text-secondary) !important; font-size: 14px !important; line-height: 1.8 !important; text-decoration: none !important; }
#ez-toc-container ul li a:hover { color: var(--color-primary) !important; }

/* === TABLE OF CONTENTS (Auto-generated .st-toc) === */
.st-toc { background: var(--color-surface) !important; border: none !important; border-left: 4px solid var(--color-primary) !important; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; padding: 20px 24px !important; margin: 24px 0 32px !important; box-shadow: var(--shadow-sm) !important; }
.st-toc-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; }
.st-toc-title { font-family: var(--font-jp) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--color-primary) !important; }
.st-toc-toggle { background: none !important; border: none !important; color: var(--color-text-secondary) !important; font-size: 14px !important; cursor: pointer !important; padding: 4px 8px !important; border-radius: var(--radius-sm) !important; transition: background 0.2s !important; }
.st-toc-toggle:hover { background: var(--color-surface-alt) !important; }
.st-toc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.st-toc-list li { margin: 0 !important; padding: 0 !important; }
.st-toc-list li a { display: block !important; padding: 6px 0 !important; color: var(--color-text-secondary) !important; font-size: 14px !important; line-height: 1.6 !important; text-decoration: none !important; transition: color 0.2s !important; border-bottom: 1px solid transparent !important; }
.st-toc-list li a:hover { color: var(--color-primary) !important; }
.st-toc-list li.st-toc-h3 a { padding-left: 20px !important; font-size: 13px !important; color: var(--color-text-tertiary) !important; }
.st-toc-list li.st-toc-h3 a:hover { color: var(--color-primary) !important; }

/* === AUTHOR PROFILE BOX (E-E-A-T) === */
.st-author-box { background: var(--color-surface) !important; border-radius: var(--radius-md) !important; padding: 24px !important; margin: 48px 0 32px !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-sm) !important; }
.st-author-label { font-size: 12px !important; font-weight: 700 !important; color: var(--color-primary) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 16px !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--color-primary) !important; }
.st-author-content { display: flex !important; gap: 20px !important; align-items: flex-start !important; }
.st-author-avatar { width: 80px !important; height: 80px !important; border-radius: 50% !important; object-fit: cover !important; flex-shrink: 0 !important; border: 3px solid var(--color-primary-light) !important; }
.st-author-info { flex: 1 !important; }
.st-author-name { font-size: 18px !important; font-weight: 700 !important; color: var(--color-text) !important; margin-bottom: 2px !important; }
.st-author-title { font-size: 13px !important; color: var(--color-text-secondary) !important; margin-bottom: 8px !important; }
.st-author-credentials { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 10px !important; }
.st-author-badge { display: inline-block !important; background: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: var(--radius-full) !important; }
.st-author-bio { font-size: 14px !important; line-height: 1.7 !important; color: var(--color-text-secondary) !important; margin: 0 !important; }

/* === SUPERVISOR BOX (監修者) === */
.st-supervisor-box { border-left: 4px solid #059669 !important; background: linear-gradient(135deg, var(--color-surface) 0%, rgba(5,150,105,0.04) 100%) !important; }
.st-supervisor-label { color: #059669 !important; }
.st-supervisor-box .st-author-badge { background: rgba(5,150,105,0.12) !important; color: #047857 !important; }
body.st-dark .st-supervisor-box { border-left-color: #34D399 !important; background: linear-gradient(135deg, var(--color-surface) 0%, rgba(52,211,153,0.06) 100%) !important; }
body.st-dark .st-supervisor-label { color: #34D399 !important; }
body.st-dark .st-supervisor-box .st-author-badge { background: rgba(52,211,153,0.15) !important; color: #6EE7B7 !important; }

/* === INTERNAL LINKS (Related Articles) === */
.st-internal-links { background: var(--color-surface-alt) !important; border-radius: var(--radius-md) !important; padding: 24px !important; margin: 32px 0 !important; border-left: 4px solid var(--color-accent) !important; }
.st-internal-links-title { font-size: 16px !important; font-weight: 700 !important; color: var(--color-text) !important; margin: 0 0 16px !important; padding: 0 !important; border: none !important; background: none !important; border-left: none !important; }
.st-internal-links-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.st-internal-links-list li { padding: 8px 0 !important; border-bottom: 1px solid var(--color-border) !important; }
.st-internal-links-list li:last-child { border-bottom: none !important; }
.st-internal-links-list li a { color: var(--color-primary) !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.2s !important; display: block !important; padding: 4px 0 4px 20px !important; position: relative !important; }
.st-internal-links-list li a::before { content: "\2192" !important; position: absolute !important; left: 0 !important; color: var(--color-accent) !important; font-weight: 700 !important; }
.st-internal-links-list li a:hover { color: var(--color-primary-dark) !important; }

/* === TABLE === */
.tablepress { border-collapse: collapse !important; width: 100% !important; margin: 24px 0 !important; font-size: 14px !important; border-radius: var(--radius-md) !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; }
.tablepress thead th { background: var(--color-navy) !important; color: #fff !important; font-weight: 700 !important; padding: 12px 16px !important; }
.tablepress tbody td { padding: 12px 16px !important; border-bottom: 1px solid var(--color-border) !important; }
.tablepress tbody tr:nth-child(even) { background: var(--color-surface-alt) !important; }
.tablepress tbody tr:hover { background: var(--color-primary-light) !important; }

/* === BREADCRUMBS === */
.aioseo-breadcrumbs { font-size: 13px !important; color: var(--color-text-secondary) !important; padding: 16px 0 !important; margin-bottom: 16px !important; }
.aioseo-breadcrumbs a { color: var(--color-primary) !important; text-decoration: none !important; }
.aioseo-breadcrumbs a:hover { text-decoration: underline !important; }
.aioseo-breadcrumbs span { color: var(--color-text-tertiary) !important; }

/* === AUTHOR BOX (theme default) === */
.author-box { display: flex !important; gap: 20px !important; background: var(--color-surface) !important; border-radius: var(--radius-md) !important; padding: 24px !important; margin: 48px 0 32px !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-sm) !important; }
.author-box .author-avatar img { width: 72px !important; height: 72px !important; border-radius: 50% !important; object-fit: cover !important; }
.author-box .author-name { font-size: 16px !important; font-weight: 700 !important; color: var(--color-text) !important; }
.author-box .author-description { font-size: 14px !important; line-height: 1.7 !important; color: var(--color-text-secondary) !important; }

/* === FOOTER === */
footer.site-footer, .elementor-location-footer { background: #1E293B !important; color: var(--color-text-tertiary) !important; padding: 48px 0 24px !important; }
.elementor-location-footer .elementor-widget-wrap { max-width: 1200px !important; margin: 0 auto !important; }
.footer-widget-area { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 32px !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; }
.footer-widget h4 { color: #CBD5E1 !important; font-size: 15px !important; font-weight: 600 !important; margin-bottom: 16px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.footer-widget ul li a { color: var(--color-text-tertiary) !important; font-size: 14px !important; text-decoration: none !important; transition: color 0.2s !important; }
.footer-widget ul li a:hover { color: #FFFFFF !important; }
.footer-copyright { text-align: center !important; padding-top: 24px !important; margin-top: 32px !important; border-top: 1px solid rgba(255,255,255,0.08) !important; font-size: 13px !important; color: var(--color-text-tertiary) !important; }

/* === HIDE PLACEHOLDERS === */
img[src*="placehold.jp"] { display: none !important; }
.elementor-widget-container img[src*="placehold.jp"] { display: none !important; }
a[href*="placehold.jp"], .elementor-widget-container a:has(img[src*="placehold.jp"]) { display: none !important; }
.widget_custom_html:has(img[src*="placehold.jp"]) { display: none !important; }

/* === SCROLL TO TOP (theme) === */
/* === ELEMENTOR OVERRIDE === */
.elementor-element { padding: 0 !important; }
.t-noto { font-family: var(--font-jp) !important; }

/* === FIX: Bottom section PICKUP tab article grid width === */
.elementor-element-97f8b73 .jeg-elementor-kit.jkit-tabs { width: 100% !important; display: flex !important; flex-direction: column !important; }
.elementor-element-97f8b73 .tab-content-list { width: 100% !important; }
.elementor-element-97f8b73 .tab-content { width: 100% !important; box-sizing: border-box !important; }
.elementor-element-97f8b73 .tab-content > .elementor { width: 100% !important; }
.elementor-3195 .elementor-element-6b9fa09d { width: 100% !important; }
.elementor-3195 .elementor-element-6b9fa09d > .e-con-inner { max-width: 100% !important; width: 100% !important; }
.elementor-3195 .elementor-element-69bb9bfa { width: 100% !important; }
.elementor-3195 .jkit-postblock .jkit-posts { width: 100% !important; }
.elementor-3195 .jkit-postblock .jkit-posts { grid-template-columns: repeat(2, 1fr) !important; grid-column-gap: 24px !important; }

/* === SMOOTH SCROLL === */
html { scroll-behavior: smooth !important; }

/* === SCROLL REVEAL ANIMATION === */
.st-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.st-reveal.st-visible { opacity: 1; transform: translateY(0); }

/* === FOCUS-VISIBLE ACCESSIBILITY === */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 2px !important; border-radius: 4px !important; }

/* === ENHANCED HOVER EFFECTS === */
.jkit-post .jkit-thumb .thumbnail-container img { transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94) !important; }
.jkit-post:hover .jkit-thumb .thumbnail-container img { transform: scale(1.08) !important; }
.jkit-post-title a { transition: color 0.25s ease !important; }
.sp-pcp-post { transition: transform 0.3s ease, box-shadow 0.3s ease !important; }
.sp-pcp-post:hover { transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; }

/* === READING TIME BADGE === */
.st-reading-time { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 13px !important; color: var(--color-text-secondary) !important; margin-bottom: 16px !important; padding: 4px 12px !important; background: var(--color-surface-alt) !important; border-radius: var(--radius-full) !important; }

/* === IMAGE BORDER RADIUS === */
.entry-content img, .elementor-widget-theme-post-content img { border-radius: var(--radius-sm) !important; }

/* === SELECTION COLOR === */
::selection { background: var(--color-primary-light) !important; color: var(--color-text) !important; }

/* === PRODUCT BOX (Affiliate) === */
.st-product-box { display: grid !important; grid-template-columns: 120px 1fr !important; gap: 16px !important; background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; padding: 20px !important; margin: 24px 0 !important; transition: box-shadow 0.3s ease !important; }
.st-product-box:hover { box-shadow: var(--shadow-md) !important; }
.st-product-box img { border-radius: var(--radius-sm) !important; width: 120px !important; height: 120px !important; object-fit: cover !important; }
.st-product-box .st-product-info { display: flex !important; flex-direction: column !important; justify-content: center !important; }
.st-product-box .st-product-title { font-weight: 600 !important; font-size: 16px !important; color: var(--color-text) !important; margin-bottom: 4px !important; line-height: 1.4 !important; }
.st-product-box .st-product-price { color: var(--color-danger) !important; font-weight: 700 !important; font-size: 18px !important; margin-bottom: 8px !important; }
.st-product-box .st-product-desc { font-size: 13px !important; color: var(--color-text-secondary) !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
.st-product-box .st-product-btns { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.st-product-box .st-btn-amazon { display: inline-block !important; background: #FF9900 !important; color: #fff !important; padding: 8px 20px !important; border-radius: var(--radius-full) !important; font-weight: 600 !important; font-size: 13px !important; text-decoration: none !important; transition: all 0.2s !important; }
.st-product-box .st-btn-amazon:hover { background: #E8890A !important; transform: translateY(-1px) !important; }
.st-product-box .st-btn-rakuten { display: inline-block !important; background: #BF0000 !important; color: #fff !important; padding: 8px 20px !important; border-radius: var(--radius-full) !important; font-weight: 600 !important; font-size: 13px !important; text-decoration: none !important; transition: all 0.2s !important; }
.st-product-box .st-btn-rakuten:hover { background: #A30000 !important; transform: translateY(-1px) !important; }
.st-product-box .st-btn-yahoo { display: inline-block !important; background: linear-gradient(135deg, #FF0033 0%, #CC0029 100%) !important; color: #fff !important; padding: 8px 20px !important; border-radius: var(--radius-full) !important; font-weight: 600 !important; font-size: 13px !important; text-decoration: none !important; transition: all 0.2s !important; }
.st-product-box .st-btn-yahoo:hover { background: linear-gradient(135deg, #CC0029 0%, #990020 100%) !important; transform: translateY(-1px) !important; }

/* === RELATED PRODUCTS SECTION === */
.st-related-products { margin: 40px 0 !important; padding: 28px !important; background: var(--color-surface) !important; border-radius: var(--radius-lg) !important; border: 1px solid var(--color-border) !important; }
.st-related-products h3 { font-size: 18px !important; font-weight: 700 !important; color: var(--color-text) !important; margin: 0 0 20px !important; padding: 0 0 12px !important; border-bottom: 2px solid var(--color-primary) !important; border-left: none !important; background: none !important; }
.st-related-products .st-products-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.st-related-products .st-product-card { background: var(--color-surface-alt) !important; border-radius: var(--radius-md) !important; padding: 16px !important; text-align: center !important; transition: transform 0.2s ease !important; }
.st-related-products .st-product-card:hover { transform: translateY(-3px) !important; }
.st-related-products .st-product-card img { width: 100% !important; height: 140px !important; object-fit: contain !important; border-radius: var(--radius-sm) !important; margin-bottom: 12px !important; }
.st-related-products .st-product-card .st-card-title { font-size: 14px !important; font-weight: 600 !important; color: var(--color-text) !important; margin-bottom: 4px !important; }
.st-related-products .st-product-card .st-card-price { font-size: 16px !important; font-weight: 700 !important; color: var(--color-danger) !important; }

/* === NEWSLETTER CTA === */
.st-newsletter-cta { background: linear-gradient(135deg, var(--color-navy) 0%, #2563EB 100%) !important; border-radius: var(--radius-lg) !important; padding: 32px 28px !important; text-align: center !important; margin: 40px 0 !important; color: #fff !important; }
.st-newsletter-cta h3 { color: #fff !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 0 8px !important; padding: 0 !important; border: none !important; background: none !important; }
.st-newsletter-cta p { color: rgba(255,255,255,0.85) !important; font-size: 14px !important; margin: 0 0 20px !important; line-height: 1.6 !important; }
.st-newsletter-cta .st-newsletter-form { display: flex !important; gap: 8px !important; max-width: 420px !important; margin: 0 auto !important; }
.st-newsletter-cta .st-newsletter-input { flex: 1 !important; padding: 12px 16px !important; border: none !important; border-radius: var(--radius-full) !important; font-size: 14px !important; outline: none !important; }
.st-newsletter-cta .st-newsletter-btn { background: var(--color-accent) !important; color: #fff !important; border: none !important; padding: 12px 24px !important; border-radius: var(--radius-full) !important; font-weight: 700 !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s !important; white-space: nowrap !important; }
.st-newsletter-cta .st-newsletter-btn:hover { background: #E8690A !important; transform: translateY(-1px) !important; }
.st-newsletter-cta .st-newsletter-note { font-size: 11px !important; color: rgba(255,255,255,0.6) !important; margin-top: 12px !important; }

/* === SIDEBAR RANKING WIDGET === */
.st-ranking-widget { background: var(--color-surface) !important; border-radius: var(--radius-md) !important; padding: 20px !important; border: 1px solid var(--color-border) !important; }
.st-ranking-widget h4 { font-size: 16px !important; font-weight: 700 !important; color: var(--color-text) !important; margin: 0 0 16px !important; padding-bottom: 12px !important; border-bottom: 2px solid var(--color-primary) !important; }
.st-ranking-widget .st-rank-item { display: flex !important; gap: 12px !important; padding: 12px 0 !important; border-bottom: 1px solid var(--color-border) !important; align-items: center !important; }
.st-ranking-widget .st-rank-item:last-child { border-bottom: none !important; }
.st-ranking-widget .st-rank-num { width: 28px !important; height: 28px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 13px !important; flex-shrink: 0 !important; }
.st-ranking-widget .st-rank-1 { background: #FFD700 !important; color: #1a1a1a !important; }
.st-ranking-widget .st-rank-2 { background: #C0C0C0 !important; color: #1a1a1a !important; }
.st-ranking-widget .st-rank-3 { background: #CD7F32 !important; color: #fff !important; }
.st-ranking-widget .st-rank-4, .st-ranking-widget .st-rank-5 { background: var(--color-surface-alt) !important; color: var(--color-text-secondary) !important; }
.st-ranking-widget .st-rank-img { width: 56px !important; height: 56px !important; border-radius: var(--radius-sm) !important; object-fit: cover !important; flex-shrink: 0 !important; }
.st-ranking-widget .st-rank-info { flex: 1 !important; }
.st-ranking-widget .st-rank-title { font-size: 13px !important; font-weight: 600 !important; color: var(--color-text) !important; line-height: 1.4 !important; }
.st-ranking-widget .st-rank-title a { color: var(--color-text) !important; text-decoration: none !important; }
.st-ranking-widget .st-rank-title a:hover { color: var(--color-primary) !important; }
.st-ranking-widget .st-rank-price { font-size: 14px !important; font-weight: 700 !important; color: var(--color-danger) !important; }

/* ============================================================
   NEW: Fix 20-28 Component Styles
   ============================================================ */

/* === Fix 20: SOCIAL SHARE BUTTONS === */
.st-share { position: fixed; left: 16px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.st-share-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; transition: all 0.2s ease; text-decoration: none !important; box-shadow: var(--shadow-md); }
.st-share-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-lg); }
.st-share-line { background: #06C755; color: #fff; }
.st-share-x { background: #000000; color: #fff; }
.st-share-fb { background: #1877F2; color: #fff; }
.st-share-hatena { background: #00A4DE; color: #fff; }
.st-share-copy { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.st-share-copy:hover { background: var(--color-surface-alt); color: var(--color-text); }

/* Toast notification */
.st-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--color-text); color: #fff; padding: 12px 24px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; opacity: 0; transition: all 0.3s ease; z-index: 10000; white-space: nowrap; }
.st-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* === Fix 21: READING PROGRESS BAR === */
.st-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); z-index: 9999; transition: width 0.1s linear; }

/* === Fix 22: BACK TO TOP BUTTON === */
.st-back-to-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 90; }
.st-back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.st-btt-visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }

/* === Fix 23: BOOKMARK SYSTEM === */
.st-bm-header { position: absolute; right: 80px; top: 50%; transform: translateY(-50%); }
.st-bm-trigger { background: none; border: none; color: #fff; cursor: pointer; position: relative; padding: 8px; display: flex; align-items: center; }
.st-bm-trigger:hover { opacity: 0.8; }
.st-bm-badge { position: absolute; top: 2px; right: 2px; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.st-bm-panel { position: fixed; top: 0; right: -360px; width: 340px; height: 100vh; background: var(--color-surface); box-shadow: -4px 0 20px rgba(0,0,0,0.15); z-index: 1000; transition: right 0.3s ease; overflow-y: auto; }
.st-bm-panel-open { right: 0; }
.st-bm-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--color-border); }
.st-bm-panel-header h3 { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0; }
.st-bm-close { background: none; border: none; font-size: 24px; color: var(--color-text-secondary); cursor: pointer; padding: 4px 8px; }
.st-bm-panel-list { padding: 12px 20px; }
.st-bm-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.st-bm-item a { color: var(--color-text) !important; font-size: 14px; font-weight: 500; text-decoration: none !important; flex: 1; line-height: 1.5; }
.st-bm-item a:hover { color: var(--color-primary) !important; }
.st-bm-remove { background: none; border: none; color: var(--color-text-tertiary); font-size: 18px; cursor: pointer; padding: 4px 8px; flex-shrink: 0; }
.st-bm-remove:hover { color: var(--color-danger); }
.st-bm-empty { color: var(--color-text-tertiary); font-size: 14px; text-align: center; padding: 40px 0; }
.st-bm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.st-bm-overlay-show { opacity: 1; visibility: visible; }

/* Article bookmark button */
.st-bm-article-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--color-border); color: var(--color-text-secondary); padding: 6px 14px; border-radius: var(--radius-full); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s ease; margin-bottom: 16px; margin-left: 8px; }
.st-bm-article-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }
.st-bm-active { border-color: var(--color-danger) !important; color: var(--color-danger) !important; background: #FEF2F2 !important; }
.st-bm-label { font-family: var(--font-jp); }

/* === Fix 24: DARK MODE === */
.st-dark-toggle { background: none; border: none; cursor: pointer; font-size: 20px; padding: 6px 10px; border-radius: var(--radius-sm); transition: background 0.2s; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.st-dark-toggle:hover { background: rgba(255,255,255,0.1); }

body.st-dark {
  --color-bg: #0F172A;
  --color-surface: #1E293B;
  --color-surface-alt: #334155;
  --color-border: #475569;
  --color-text: #E2E8F0;
  --color-text-secondary: #94A3B8;
  --color-text-tertiary: #7E8DA0;
  --color-primary-light: #1E3A5F;
}
/* Dark mode: layout */
body.st-dark header.l-header, body.st-dark .l-header { background: #0F172A !important; }
body.st-dark .pSticky { background: #0F172A !important; }
body.st-dark footer.site-footer, body.st-dark .elementor-location-footer { background: #020617 !important; }

/* Dark mode: content area - override ALL theme hardcoded colors */
body.st-dark .content, body.st-dark .content p, body.st-dark .content ul, body.st-dark .content ol { color: #E2E8F0 !important; }
body.st-dark .content h2, body.st-dark .content h3, body.st-dark .content h4, body.st-dark .content h5 { color: #E2E8F0 !important; }
body.st-dark .content a { color: #60A5FA !important; }
body.st-dark .content a:hover { color: #93C5FD !important; }
body.st-dark .content h2 a:hover, body.st-dark .content h3 a:hover, body.st-dark .content h4 a:hover { color: #93C5FD !important; }
body.st-dark .entry-content a, body.st-dark .elementor-widget-theme-post-content a { color: #60A5FA !important; }
body.st-dark .entry-content a:hover, body.st-dark .elementor-widget-theme-post-content a:hover { color: #93C5FD !important; }
/* Dark mode: inline style overrides (WordPress editor style="color:#000000") */
body.st-dark .content span[style*="color"], body.st-dark .content p[style*="color"], body.st-dark .content strong[style*="color"] { color: #E2E8F0 !important; }
body.st-dark .content a[style*="color"], body.st-dark .content a span[style*="color"] { color: #60A5FA !important; }
body.st-dark .content [style*="background-color"] { background-color: transparent !important; }
body.st-dark .content table tr[style*="background"] { background-color: transparent !important; }
body.st-dark .content table tr[style*="background"] td { background-color: #1E293B !important; }
body.st-dark .content blockquote { color: #E2E8F0 !important; background-color: #334155 !important; }
body.st-dark .content blockquote::before { color: #475569 !important; }
body.st-dark .content table { color: #E2E8F0 !important; border-top-color: #475569 !important; border-left-color: #475569 !important; }
body.st-dark .content table th { background: #1E3A5F !important; color: #fff !important; border-color: #475569 !important; }
body.st-dark .content table td { background: #1E293B !important; border-color: #475569 !important; }
body.st-dark .content table tr:nth-child(odd) td { background-color: #334155 !important; }
body.st-dark .content .balloon .balloon__text { color: #E2E8F0 !important; background-color: #334155 !important; }
body.st-dark .content .balloon-boder .balloon__text { color: #E2E8F0 !important; background-color: #1E293B !important; border-color: #475569 !important; }
body.st-dark .content .balloon .balloon__text-left:before { border-left-color: #334155 !important; }
body.st-dark .content .balloon .balloon__text-right:before { border-right-color: #334155 !important; }

/* Dark mode: headings (theme classes) */
body.st-dark .partsH2-1 h2 { color: #E2E8F0 !important; border-color: #2563EB !important; }
body.st-dark .partsH3-13 h3 { color: #E2E8F0 !important; border-left-color: #94A3B8 !important; border-bottom-color: #475569 !important; }
body.st-dark .entry-content h2, body.st-dark .elementor-widget-theme-post-content h2 { background: linear-gradient(90deg, rgba(37,99,235,0.15) 0%, transparent 100%) !important; }
body.st-dark .entry-content h3, body.st-dark .elementor-widget-theme-post-content h3 { background-color: rgba(100,116,139,0.15) !important; }

/* Dark mode: component boxes */
body.st-dark .sauna-point-box { background: rgba(37,99,235,0.1) !important; color: #E2E8F0 !important; }
body.st-dark .sauna-warning-box { background: rgba(220,38,38,0.1) !important; color: #E2E8F0 !important; }
body.st-dark .sauna-evidence-box { background: rgba(22,163,74,0.1) !important; color: #E2E8F0 !important; }

/* Dark mode: widgets & theme UI */
body.st-dark .heading { background-color: transparent !important; color: #E2E8F0 !important; border-color: #60A5FA !important; }
body.st-dark .heading::before, body.st-dark .heading::after { background-color: #60A5FA !important; }
body.st-dark .heading a { color: #E2E8F0 !important; }
body.st-dark .heading a:hover { color: #60A5FA !important; }
body.st-dark .widget ul li a { color: #94A3B8 !important; }
body.st-dark .widget ul li a:hover { color: #60A5FA !important; }
body.st-dark .widget.widget_nav_menu ul.menu li a, body.st-dark .widget.widget_categories ul li a { background-color: transparent !important; color: #94A3B8 !important; }
body.st-dark .widget.widget_nav_menu ul.menu li a:hover, body.st-dark .widget.widget_categories ul li a:hover { background-color: #334155 !important; color: #60A5FA !important; }
body.st-dark .widget.widget_nav_menu ul.menu, body.st-dark .widget.widget_nav_menu ul.menu li, body.st-dark .widget.widget_categories ul, body.st-dark .widget.widget_categories ul li { border-color: #475569 !important; }
body.st-dark .widgetCatTitle, body.st-dark .widgetCatTitle__inner { background-color: #1E3A5F !important; color: #E2E8F0 !important; }
body.st-dark .widgetProfile__sns { background-color: #1E3A5F !important; }
body.st-dark .widgetTab__item.current, body.st-dark .widgetTab__item:hover { border-top-color: #60A5FA !important; }
body.st-dark .eyecatch__cat, body.st-dark .the__category { background-color: #2563EB !important; }
body.st-dark .pager__item, body.st-dark .page-numbers, body.st-dark .pagePager__item { color: #E2E8F0 !important; }
body.st-dark .pager__item:hover, body.st-dark .pager__item-current, body.st-dark .page-numbers:hover, body.st-dark .page-numbers.current, body.st-dark .pagePager__item:hover, body.st-dark .pagePager__item-current { background-color: #2563EB !important; color: #fff !important; }
body.st-dark .breadcrumb__item a { color: #60A5FA !important; }
body.st-dark .bottomFooter__topBtn { background-color: #2563EB !important; }
body.st-dark .btn__link-primary, body.st-dark .content .btn__link-primary, body.st-dark .btn__link-secondary, body.st-dark .content .btn__link-secondary { background-color: #2563EB !important; }
body.st-dark .btn__link-normal, body.st-dark .content .btn__link-normal { color: #60A5FA !important; border-color: #60A5FA !important; }
body.st-dark .btn__link-normal:hover, body.st-dark .content .btn__link-normal:hover { background-color: #2563EB !important; color: #fff !important; border-color: #2563EB !important; }
body.st-dark .comments__list .comment-meta { background-color: #1E3A5F !important; }
body.st-dark .comments__list .comment-reply-link:hover { background-color: #2563EB !important; color: #fff !important; }
body.st-dark .comment-respond .submit { background-color: #2563EB !important; }
body.st-dark .comment-respond textarea, body.st-dark .comment-respond input[type="text"], body.st-dark .comment-respond input[type="email"], body.st-dark .comment-respond input[type="url"] { background: #1E293B !important; color: #E2E8F0 !important; border-color: #475569 !important; }
body.st-dark .widgetSearch__input { background: #1E293B !important; color: #E2E8F0 !important; border-color: #475569 !important; }
body.st-dark .searchHead__submit:hover { color: #60A5FA !important; }
body.st-dark .prevNext__pop { background-color: #1E293B !important; }
body.st-dark .pickupHead { background-color: #1E3A5F !important; }
body.st-dark .rankingBox__bg { background-color: #0F172A !important; }
body.st-dark .searchHead__title { background-color: #1E3A5F !important; }
body.st-dark .snsFooter { background-color: #0F172A !important; }
body.st-dark .controllerFooter__item:last-child, body.st-dark .controllerFooter__close { background-color: #0F172A !important; }

/* Dark mode: archive / category / tag / search pages (NO .content wrapper) */
body.st-dark .l-main { color: #E2E8F0 !important; }
body.st-dark .l-main a { color: #60A5FA !important; }
body.st-dark .archive__item { color: #E2E8F0 !important; background-color: #1E293B !important; border-radius: 8px !important; margin-bottom: 16px !important; }
body.st-dark .archive__contents { color: #E2E8F0 !important; }
body.st-dark .archive__contents a { color: #E2E8F0 !important; }
body.st-dark .archive__contents a:hover { color: #60A5FA !important; }
body.st-dark .archive .heading.heading-secondary a { color: #E2E8F0 !important; }
body.st-dark .archive .heading.heading-secondary a:hover { color: #60A5FA !important; }
body.st-dark .phrase-secondary, body.st-dark .phrase-tertiary { color: #94A3B8 !important; }
body.st-dark .dateList__item, body.st-dark .dateList__item span { color: #94A3B8 !important; }
body.st-dark .heading.heading-primary { color: #E2E8F0 !important; }
body.st-dark .searchPost__contents { color: #E2E8F0 !important; }
body.st-dark .searchPost__contents a { color: #E2E8F0 !important; }
body.st-dark .searchPost__contents a:hover { color: #60A5FA !important; }
body.st-dark .dividerBottom { border-color: #475569 !important; }
body.st-dark .bottomFooter { background-color: #020617 !important; color: rgba(255,255,255,0.6) !important; }
body.st-dark .bottomFooter a { color: rgba(255,255,255,0.6) !important; }
body.st-dark .pickup3__bg.mask.mask-color { background-color: rgba(15,23,42,0.7) !important; }

/* Dark mode: hover states (global) */
body.st-dark .l-main a:hover { color: #93C5FD !important; }
body.st-dark .content ul.menu li a:hover, body.st-dark .content .sitemap li a:hover { color: #60A5FA !important; }
body.st-dark .globalNavi a:hover { color: #fff !important; }
body.st-dark .sp-pcp-title a:hover { color: #60A5FA !important; }
body.st-dark .jkit-post-title a:hover { color: #60A5FA !important; }
body.st-dark .jkit-post:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }
body.st-dark .wpp-list li a:hover { color: #60A5FA !important; }
body.st-dark .footer-widget ul li a:hover { color: #60A5FA !important; }
body.st-dark .bottomFooter a:hover { color: #fff !important; }
body.st-dark .tablepress tbody tr:hover td { background-color: #334155 !important; }

/* Dark mode: carousel & post cards */
body.st-dark .sp-pcp-post-meta, body.st-dark .sp-pcp-post-meta li, body.st-dark .sp-pcp-post-meta span { color: #94A3B8 !important; }

/* Dark mode: product boxes & misc */
body.st-dark .st-share-copy { background: #1E293B; border-color: #475569; color: #94A3B8; }
body.st-dark .st-product-box .st-btn-amazon { background: #CC7A00 !important; }
body.st-dark .st-product-box .st-btn-rakuten { background: #990000 !important; }
body.st-dark .st-product-box .st-btn-yahoo { background: linear-gradient(135deg, #CC0029 0%, #990020 100%) !important; }
body.st-dark .st-sauna-calc { background: linear-gradient(135deg, rgba(30,58,95,0.5) 0%, rgba(22,101,52,0.2) 100%) !important; border-color: #475569 !important; }
body.st-dark .st-calc-opt { background: #1E293B !important; border-color: #475569 !important; color: #E2E8F0 !important; }
body.st-dark .st-calc-opt:hover { border-color: #60A5FA !important; color: #60A5FA !important; }
body.st-dark .st-bm-active { background: rgba(220,38,38,0.15) !important; }

/* Dark mode: markers → remove fluorescent gradient, use colored underlines */
body.st-dark [class*="marker-thick"], body.st-dark [class*="marker-half"], body.st-dark [class*="marker-thin"] { background: none !important; color: #E2E8F0 !important; border-bottom: 2px solid currentColor !important; padding-bottom: 1px !important; }
body.st-dark .content a [class*="marker-"], body.st-dark .content a[class*="marker-"] { color: #60A5FA !important; }
body.st-dark [class*="marker-"][class*="Yellow"] { border-bottom-color: #EAB308 !important; }
body.st-dark [class*="marker-"][class*="Red"] { border-bottom-color: #EF4444 !important; }
body.st-dark [class*="marker-"][class*="Blue"] { border-bottom-color: #60A5FA !important; }
body.st-dark [class*="marker-"][class*="Pink"] { border-bottom-color: #EC4899 !important; }
body.st-dark [class*="marker-"][class*="Green"] { border-bottom-color: #22C55E !important; }
body.st-dark [class*="marker-"][class*="Gray"] { border-bottom-color: #94A3B8 !important; }

/* Dark mode: afTagBox, sitecard, phrase, dateList, mask */
body.st-dark .content .afTagBox__btnDetail, body.st-dark .content .afTagBox__btnAf { background-color: #2563EB !important; }
body.st-dark .widget .widgetAfTag__btnDetail, body.st-dark .widget .widgetAfTag__btnAf { background-color: #2563EB !important; }
body.st-dark .sitecard { background: #1E293B !important; border-color: #475569 !important; }
body.st-dark .sitecard a { color: #E2E8F0 !important; }
body.st-dark .sitecard a:hover { color: #60A5FA !important; }
body.st-dark .sitecard__subtitle { color: #94A3B8 !important; }
body.st-dark .phrase a { color: #60A5FA !important; }
body.st-dark .dateList__item a { color: #94A3B8 !important; }
body.st-dark .dateList__item a:hover { color: #60A5FA !important; }
body.st-dark .categoryBox__title { color: #E2E8F0 !important; }
body.st-dark .mask-color, body.st-dark .mask-colorgray { background-color: rgba(15,23,42,0.7) !important; }
body.st-dark .menuBtn__link { background-color: #0F172A !important; }
body.st-dark .widget.widget_tag_cloud a:hover { background-color: #2563EB !important; }

/* Dark mode: EP-BOX (THE THOR colored boxes) */
/* All Very Pale backgrounds → dark surface */
body.st-dark .content .ep-box[class*="bgc-VP"] { background-color: #1E293B !important; color: #E2E8F0 !important; }
body.st-dark .content .ep-box[class*="bgc-VP"] li,
body.st-dark .content .ep-box[class*="bgc-VP"] p,
body.st-dark .content .ep-box[class*="bgc-VP"] b,
body.st-dark .content .ep-box[class*="bgc-VP"] strong,
body.st-dark .content .ep-box[class*="bgc-VP"] span,
body.st-dark .content .ep-box[class*="bgc-VP"] div:not(.ep-inbox) { color: #E2E8F0 !important; }
/* White/Light gray backgrounds → dark surface */
body.st-dark .content .ep-box[class*="bgc-white"],
body.st-dark .content .ep-box[class*="bgc-VL"],
body.st-dark .content .ep-box[class*="bgc-Lgray"] { background-color: #1E293B !important; color: #E2E8F0 !important; }
body.st-dark .content .ep-box[class*="bgc-white"] li,
body.st-dark .content .ep-box[class*="bgc-white"] p,
body.st-dark .content .ep-box[class*="bgc-white"] b,
body.st-dark .content .ep-box[class*="bgc-white"] strong,
body.st-dark .content .ep-box[class*="bgc-white"] span,
body.st-dark .content .ep-box[class*="bgc-white"] div:not(.ep-inbox),
body.st-dark .content .ep-box[class*="bgc-VL"] li,
body.st-dark .content .ep-box[class*="bgc-VL"] p,
body.st-dark .content .ep-box[class*="bgc-VL"] b,
body.st-dark .content .ep-box[class*="bgc-VL"] strong { color: #E2E8F0 !important; }
/* Light color backgrounds (bgc-L*) → slightly lighter dark surface */
body.st-dark .content .ep-box[class*="bgc-L"]:not([class*="bgc-VL"]):not([class*="bgc-Lgray"]) { background-color: #334155 !important; color: #E2E8F0 !important; }
/* ep-inbox headers (merit/demerit labels) - keep colored but muted */
body.st-dark .content .ep-inbox[class*="bgc-Lsky"] { background-color: #1D6A9B !important; }
body.st-dark .content .ep-inbox[class*="bgc-Bmagenta"] { background-color: #B33D52 !important; }
body.st-dark .content .ep-inbox[class*="bgc-"] { color: #fff !important; }
/* ftc-* text colors → solid readable white in dark mode (no fluorescent) */
body.st-dark .content .ep-box[class*="ftc-"] { color: #E2E8F0 !important; }
body.st-dark .content .ep-box[class*="ftc-"] li,
body.st-dark .content .ep-box[class*="ftc-"] b,
body.st-dark .content .ep-box[class*="ftc-"] strong,
body.st-dark .content .ep-box[class*="ftc-"] p,
body.st-dark .content .ep-box[class*="ftc-"] span,
body.st-dark .content .ep-box[class*="ftc-"] div:not(.ep-inbox) { color: #E2E8F0 !important; }
/* ep-box list bullets in dark mode */
body.st-dark .content .ep-box ul > li::before { color: #94A3B8 !important; }
body.st-dark .content .ep-box ol > li::before { color: #94A3B8 !important; border-color: #94A3B8 !important; }
/* Borders in dark mode */
body.st-dark .content .ep-box[class*="es-borderSolid"] { border-color: #475569 !important; }
body.st-dark .content .ep-box[class*="brc-DPred"] { border-color: #DC2626 !important; }
body.st-dark .content .es-BsubTradi::before { background: #2563EB !important; }
/* Brackets dark mode */
body.st-dark .content .es-Bbrackets::before, body.st-dark .content .es-Bbrackets::after { border-color: #475569 !important; }
/* Mark badges dark mode */
body.st-dark .content .es-BmarkQ, body.st-dark .content .es-BmarkA { color: #E2E8F0 !important; background-color: #1E293B !important; }
body.st-dark .content .es-BmarkExcl { color: #E2E8F0 !important; background-color: #1E293B !important; }
/* Icon badges dark mode */
body.st-dark .content .es-LiconBox::before, body.st-dark .content .es-LiconCircle::before,
body.st-dark .content .es-BTiconBox::before, body.st-dark .content .es-BTiconCircle::before { background: #2563EB !important; }
body.st-dark .content .es-BiconBg::before { color: rgba(255,255,255,0.08) !important; }
/* ep-btn (colored buttons in content) */
body.st-dark .content .ep-btn[class*="bgc-VP"] { background-color: #334155 !important; }
body.st-dark .content .ep-btn[class*="bgc-VP"]:hover { background-color: #475569 !important; }
/* Timeline dark mode */
body.st-dark .timeline-box { border-color: #475569 !important; background-color: #1E293B !important; }
body.st-dark .timeline-title { background: #1E3A5F !important; }
body.st-dark .timeline-item-title { color: #E2E8F0 !important; }
body.st-dark .timeline-item-snippet { color: #94A3B8 !important; }
body.st-dark .timeline-item-label { color: #94A3B8 !important; }
body.st-dark .content .timeline-item::before { border-color: #2563EB !important; background-color: #1E293B !important; }
body.st-dark .content .timeline-item:first-of-type::before,
body.st-dark .content .timeline-item:last-of-type::before { background: #2563EB !important; }

body.st-dark img { opacity: 0.9; }
body.st-dark ::selection { background: #1E3A5F !important; }

/* === Fix 25: ARTICLE SEARCH === */
.st-search-trigger { background: none; border: none; color: #fff; cursor: pointer; padding: 8px; display: flex; align-items: center; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); }
.st-search-trigger:hover { opacity: 0.8; }
.st-search-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1001; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; opacity: 0; visibility: hidden; transition: all 0.2s ease; }
.st-search-open { opacity: 1; visibility: visible; }
.st-search-inner { background: var(--color-surface); border-radius: var(--radius-lg); width: 90%; max-width: 560px; max-height: 70vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.st-search-header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--color-border); gap: 12px; }
.st-search-input { flex: 1; border: none; outline: none; font-size: 16px; font-family: var(--font-jp); color: var(--color-text); background: transparent; padding: 4px 0; }
.st-search-input::placeholder { color: var(--color-text-tertiary); }
.st-search-close { background: none; border: none; font-size: 24px; color: var(--color-text-secondary); cursor: pointer; padding: 4px 8px; }
.st-search-results { overflow-y: auto; flex: 1; padding: 8px 0; }
.st-search-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; text-decoration: none !important; color: var(--color-text) !important; transition: background 0.15s; cursor: pointer; }
.st-search-item:hover, .st-search-selected { background: var(--color-surface-alt); }
.st-search-cat { display: inline-block; background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; }
.st-search-title { font-size: 14px; font-weight: 500; line-height: 1.4; }
.st-search-empty { padding: 40px 20px; text-align: center; color: var(--color-text-tertiary); font-size: 14px; }
.st-search-hint { padding: 8px 20px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-tertiary); text-align: center; }

/* === Fix 26: IMAGE LIGHTBOX === */
.st-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.st-lb-open { opacity: 1; visibility: visible; }
.st-lb-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); }
.st-lb-content { position: relative; z-index: 1; max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.st-lb-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-sm); }
.st-lb-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; z-index: 2; opacity: 0.8; transition: opacity 0.2s; }
.st-lb-close:hover { opacity: 1; }
.st-lb-prev, .st-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 36px; cursor: pointer; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: all 0.2s; }
.st-lb-prev:hover, .st-lb-next:hover { opacity: 1; background: rgba(255,255,255,0.25); }
.st-lb-prev { left: 16px; }
.st-lb-next { right: 16px; }
.st-lb-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 14px; z-index: 2; }

/* === Fix 27: SAUNA SESSION CALCULATOR === */
.st-sauna-calc { background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%); border: 2px solid var(--color-primary); border-radius: var(--radius-lg); padding: 28px; margin: 40px 0; }
.st-calc-title { font-size: 20px !important; font-weight: 700 !important; color: var(--color-primary) !important; margin: 0 0 20px !important; padding: 0 !important; border: none !important; background: none !important; border-left: none !important; text-align: center; }
.st-calc-step { margin-bottom: 16px; }
.st-calc-q { font-size: 15px; font-weight: 600; color: var(--color-text); margin: 0 0 12px; }
.st-calc-options { display: flex; flex-wrap: wrap; gap: 8px; }
.st-calc-opt { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-full); padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--color-text); cursor: pointer; transition: all 0.2s ease; font-family: var(--font-jp); }
.st-calc-opt:hover { border-color: var(--color-primary); color: var(--color-primary); }
.st-calc-selected { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }
.st-calc-result { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--color-border); }
.st-calc-result h4 { font-size: 17px !important; font-weight: 700 !important; color: var(--color-primary) !important; margin: 0 0 16px !important; padding: 0 !important; border: none !important; text-align: center; }
.st-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.st-calc-card { background: var(--color-surface); border-radius: var(--radius-md); padding: 14px; text-align: center; box-shadow: var(--shadow-sm); }
.st-calc-label { display: block; font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.st-calc-value { display: block; font-size: 18px; font-weight: 700; color: var(--color-primary); }
.st-calc-advice { font-size: 14px; line-height: 1.7; color: var(--color-text-secondary); background: var(--color-surface); padding: 14px 16px; border-radius: var(--radius-md); border-left: 3px solid var(--color-success); margin-bottom: 16px; }
.st-calc-share { display: block; width: 100%; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; font-family: var(--font-jp); }
.st-calc-share:hover { background: var(--color-primary-dark); transform: translateY(-1px); }

/* === RESPONSIVE (v8 + new components) === */
@media (max-width: 768px) {
.entry-content h2 { font-size: 22px !important; padding: 12px 16px !important; margin: 36px 0 20px !important; }
.entry-content h3 { font-size: 18px !important; padding: 8px 12px !important; }
.sauna-cta-box { padding: 20px 16px !important; }
.sauna-cta-box h3 { font-size: 18px !important; }
.sauna-cta-box .cta-button { padding: 12px 28px !important; font-size: 15px !important; min-height: 48px !important; }
.author-box { flex-direction: column !important; align-items: center !important; text-align: center !important; }
.footer-widget-area { grid-template-columns: 1fr !important; }
.tab-nav { padding: 12px 14px !important; }
[data-tab] .tab-title::after { font-size: 13px !important; }
.st-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.st-product-box { grid-template-columns: 1fr !important; text-align: center !important; }
.st-product-box img { margin: 0 auto !important; }
.st-product-box .st-product-btns { justify-content: center !important; }
.st-related-products .st-products-grid { grid-template-columns: 1fr !important; }
.st-newsletter-cta .st-newsletter-form { flex-direction: column !important; }
.st-toc { padding: 16px 20px !important; }
.st-toc-list li.st-toc-h3 a { padding-left: 16px !important; }
.st-author-content { flex-direction: column !important; align-items: center !important; text-align: center !important; }
.st-author-credentials { justify-content: center !important; }
.st-internal-links { padding: 20px !important; }

/* Fix 20: Mobile share bar (bottom fixed) */
.st-share { position: fixed !important; left: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important; flex-direction: row !important; width: 100% !important; background: var(--color-surface) !important; border-top: 1px solid var(--color-border) !important; padding: 8px 0 !important; justify-content: center !important; gap: 4px !important; box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important; }
.st-share .st-share-btn { width: 40px; height: 40px; box-shadow: none; }

/* Fix 22: Back to top - above share bar on mobile */
.st-back-to-top { bottom: 70px; right: 16px; }

/* Fix 23: Bookmark panel full width on mobile */
.st-bm-panel { width: 100%; right: -100%; }

/* Fix 25: Search full screen on mobile */
.st-search-inner { width: 100%; max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
.st-search-modal { padding-top: 0; }

/* Fix 26: Lightbox mobile nav */
.st-lb-prev, .st-lb-next { width: 40px; height: 40px; font-size: 28px; }

/* Fix 27: Calculator cards */
.st-calc-grid { grid-template-columns: repeat(2, 1fr); }
.st-calc-options { flex-direction: column; }
.st-sauna-calc { padding: 20px; }

/* Fix 30: Floating CTA mobile */
.st-floating-cta { bottom: 60px !important; left: 8px !important; right: 8px !important; }
.st-fcta-img { width: 48px !important; height: 48px !important; }
.st-fcta-name { font-size: 13px !important; }
.st-fcta-price { font-size: 12px !important; }
.st-fcta-label { display: none !important; }

/* Fix 32: Compare table mobile scroll */
.st-ct-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-ct-scroll table { min-width: 600px; }

/* Fix 33: PR label mobile */
.st-pr-label { font-size: 10px !important; padding: 6px 12px !important; }
}

/* ============================================================
   NEW: Fix 29-33 Component Styles (Revenue Optimization)
   ============================================================ */

/* === Fix 29: Product Box Enhancement === */
.st-product-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.st-product-badge { display: inline-block; background: linear-gradient(135deg, #FF6B35, #FF9900); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-full); letter-spacing: 0.03em; }
.st-product-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #F59E0B; font-weight: 600; }
.st-product-shipping { display: inline-block; font-size: 11px; color: var(--color-success); font-weight: 600; margin-left: 8px; }
.st-product-social { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 8px; padding: 4px 0; }
.st-product-social::before { content: "\1F525 "; }

/* === Fix 30: Floating CTA === */
.st-floating-cta { position: fixed; bottom: 24px; left: 16px; right: 16px; max-width: 480px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.15); z-index: 95; padding: 16px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.st-fcta-visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.st-fcta-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 20px; color: var(--color-text-tertiary); cursor: pointer; padding: 4px; z-index: 1; }
.st-fcta-close:hover { color: var(--color-text); }
.st-fcta-inner { display: flex; align-items: center; gap: 12px; }
.st-fcta-img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.st-fcta-info { flex: 1; min-width: 0; }
.st-fcta-label { font-size: 11px; color: var(--color-text-secondary); font-weight: 500; margin-bottom: 2px; }
.st-fcta-name { font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-fcta-price { font-size: 13px; font-weight: 700; color: var(--color-danger); }
.st-fcta-btn { display: inline-block; background: #FF9900; color: #fff !important; padding: 8px 16px; border-radius: var(--radius-full); font-weight: 600; font-size: 13px; text-decoration: none !important; white-space: nowrap; transition: all 0.2s; flex-shrink: 0; }
.st-fcta-btn:hover { background: #E8890A; transform: translateY(-1px); }

/* === Fix 31: Exit-intent Popup === */
.st-exit-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.st-exit-open { opacity: 1; visibility: visible; }
.st-exit-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.st-exit-modal { position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: 40px 32px; max-width: 420px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); z-index: 1; animation: st-exit-bounce 0.4s ease; }
@keyframes st-exit-bounce { 0% { transform: scale(0.9) translateY(-20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.st-exit-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 24px; color: var(--color-text-secondary); cursor: pointer; }
.st-exit-close:hover { color: var(--color-text); }
.st-exit-icon { font-size: 48px; margin-bottom: 12px; }
.st-exit-title { font-size: 22px !important; font-weight: 700 !important; color: var(--color-text) !important; margin: 0 0 8px !important; padding: 0 !important; border: none !important; background: none !important; border-left: none !important; }
.st-exit-text { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 24px; line-height: 1.6; }
.st-exit-btn { display: block; width: 100%; padding: 14px; border-radius: var(--radius-full); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none !important; font-family: var(--font-jp); margin-bottom: 10px; border: none; }
.st-exit-btn-primary { background: var(--color-primary); color: #fff !important; }
.st-exit-btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.st-exit-btn-secondary { background: transparent; color: var(--color-text-secondary) !important; border: 1px solid var(--color-border) !important; }
.st-exit-btn-secondary:hover { background: var(--color-surface-alt); }
/* Exit popup product display */
.st-exit-product { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--color-surface-alt, #F8FAFC); border-radius: var(--radius-md, 12px); margin: 16px 0 20px; text-align: left; }
.st-exit-prod-img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; flex-shrink: 0; }
.st-exit-prod-name { font-size: 14px; font-weight: 600; color: var(--color-text, #1E293B); line-height: 1.4; margin-bottom: 4px; }
.st-exit-prod-price { font-size: 15px; font-weight: 700; color: var(--color-danger, #DC2626); }

/* === Fix 32: Comparison Table === */
.st-compare-table { margin: 32px 0; background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-sm); }
.st-ct-title { font-size: 17px !important; font-weight: 700 !important; color: var(--color-text) !important; padding: 16px 20px !important; margin: 0 !important; border-bottom: 2px solid var(--color-primary) !important; background: none !important; border-left: none !important; }
.st-ct-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-compare-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-compare-table thead th { background: var(--color-navy); color: #fff; font-weight: 600; padding: 10px 14px; text-align: left; white-space: nowrap; font-size: 13px; }
.st-compare-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.st-compare-table tbody tr:nth-child(odd) td { background: var(--color-surface-alt); }
.st-compare-table tbody tr:hover td { background: var(--color-primary-light); }
.st-ct-name { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.st-ct-price { font-weight: 700; color: var(--color-danger); white-space: nowrap; }
.st-ct-rating { color: #F59E0B; font-weight: 600; white-space: nowrap; }
.st-ct-features { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.st-ct-links { white-space: nowrap; }
.st-ct-amazon { display: inline-block; background: #FF9900; color: #fff !important; padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; text-decoration: none !important; margin-right: 4px; transition: all 0.2s; }
.st-ct-amazon:hover { background: #E8890A; }
.st-ct-rakuten { display: inline-block; background: #BF0000; color: #fff !important; padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; text-decoration: none !important; transition: all 0.2s; }
.st-ct-rakuten:hover { background: #A30000; }

/* === Fix 33: PR Disclosure Label === */
.st-pr-label { font-size: 11px; color: var(--color-text-tertiary); background: var(--color-surface-alt); padding: 8px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; line-height: 1.5; border-left: 3px solid var(--color-border); }

/* ============================================================
   Dark Mode: Fix 29-33 Components
   ============================================================ */
body.st-dark .st-product-badge { background: linear-gradient(135deg, #CC5500, #CC7A00); }
body.st-dark .st-product-shipping { color: #22C55E; }
body.st-dark .st-floating-cta { background: #1E293B; border-color: #475569; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
body.st-dark .st-fcta-btn { background: #CC7A00; }
body.st-dark .st-exit-modal { background: #1E293B; }
body.st-dark .st-exit-title { color: #E2E8F0 !important; }
body.st-dark .st-exit-text { color: #94A3B8; }
body.st-dark .st-exit-btn-secondary { border-color: #475569 !important; color: #94A3B8 !important; }
body.st-dark .st-exit-btn-secondary:hover { background: #334155; }
body.st-dark .st-exit-product { background: #0F172A; }
body.st-dark .st-exit-prod-name { color: #E2E8F0; }
body.st-dark .st-compare-table { background: #1E293B; border-color: #475569; }
body.st-dark .st-ct-title { color: #E2E8F0 !important; }
body.st-dark .st-compare-table thead th { background: #0F172A; }
body.st-dark .st-compare-table tbody td { border-color: #475569; }
body.st-dark .st-compare-table tbody tr:nth-child(odd) td { background: #334155; }
body.st-dark .st-compare-table tbody tr:hover td { background: #1E3A5F; }
body.st-dark .st-ct-name { color: #E2E8F0; }
body.st-dark .st-ct-features { color: #94A3B8; }
body.st-dark .st-ct-amazon { background: #CC7A00; }
body.st-dark .st-ct-rakuten { background: #990000; }
body.st-dark .st-pr-label { background: #334155; color: #94A3B8; border-left-color: #475569; }

/* ============================================================
   Fix 35: Homepage Revenue Components
   ============================================================ */

/* === Homepage Product Recommendations === */
.st-home-products { max-width: 1200px; margin: 32px auto; padding: 28px 24px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.st-home-products-title { font-size: 20px !important; font-weight: 700 !important; color: var(--color-text) !important; margin: 0 0 20px !important; padding: 0 0 12px !important; border-bottom: 2px solid var(--color-primary) !important; border-left: none !important; background: none !important; text-align: center !important; }
.st-home-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.st-home-product-card { background: var(--color-surface-alt); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; }
.st-home-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.st-home-product-link { display: block; padding: 16px; text-decoration: none !important; text-align: center; }
.st-home-product-card .st-product-badge { position: absolute; top: 8px; left: 8px; z-index: 1; }
.st-home-product-img { width: 100%; height: 140px; object-fit: contain; border-radius: var(--radius-sm); margin-bottom: 10px; }
.st-home-product-name { font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-home-product-price { font-size: 16px; font-weight: 700; color: var(--color-danger); }

/* === Homepage Category Navigation === */
.st-home-categories { max-width: 1200px; margin: 24px auto 32px; padding: 28px 24px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.st-home-cat-title { font-size: 20px !important; font-weight: 700 !important; color: var(--color-text) !important; margin: 0 0 20px !important; padding: 0 0 12px !important; border-bottom: 2px solid var(--color-primary) !important; border-left: none !important; background: none !important; text-align: center !important; }
.st-home-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-home-cat-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; background: var(--color-surface-alt); border-radius: var(--radius-md); text-decoration: none !important; transition: all 0.2s ease; border: 1px solid transparent; }
.st-home-cat-card:hover { border-color: var(--color-primary); background: var(--color-primary-light); transform: translateY(-2px); }
.st-home-cat-icon { font-size: 24px; }
.st-home-cat-name { font-size: 13px; font-weight: 600; color: var(--color-text) !important; text-align: center; line-height: 1.3; }

/* === Homepage Responsive === */
@media (max-width: 768px) {
.st-home-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.st-home-product-img { height: 110px; }
.st-home-cat-grid { grid-template-columns: repeat(2, 1fr); }
.st-home-products, .st-home-categories { margin: 16px 12px; padding: 20px 16px; }
}

/* === v12: Product Features in Product Box === */
.st-product-features { font-size: 12px; color: #64748B; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed #E2E8F0; line-height: 1.5; }

/* === v12: Floating CTA dual buttons === */
.st-fcta-btns { display: flex; gap: 6px; flex-shrink: 0; }
.st-fcta-btn { padding: 8px 14px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap; text-align: center; }
.st-fcta-btn-amazon { background: #FF9900 !important; color: #fff !important; }
.st-fcta-btn-amazon:hover { background: #E8890A !important; }
.st-fcta-btn-rakuten { background: #BF0000 !important; color: #fff !important; }
.st-fcta-btn-rakuten:hover { background: #A00000 !important; }
.st-fcta-btn-yahoo { background: linear-gradient(135deg, #FF0033 0%, #CC0029 100%) !important; color: #fff !important; }
.st-fcta-btn-yahoo:hover { background: linear-gradient(135deg, #CC0029 0%, #990020 100%) !important; }

/* === v12: Homepage product card with dual buttons === */
.st-home-product-top { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px; }
.st-home-product-btns { display: flex; gap: 4px; width: 100%; padding: 0 8px 8px; }
.st-home-btn-amazon, .st-home-btn-rakuten, .st-home-btn-yahoo { flex: 1; text-align: center; padding: 6px 4px; border-radius: 4px; font-size: 11px; font-weight: 600; text-decoration: none !important; color: #fff !important; }
.st-home-btn-amazon { background: #FF9900; }
.st-home-btn-amazon:hover { background: #E8890A; }
.st-home-btn-rakuten { background: #BF0000; }
.st-home-btn-rakuten:hover { background: #A00000; }
.st-home-btn-yahoo { background: linear-gradient(135deg, #FF0033 0%, #CC0029 100%); }
.st-home-btn-yahoo:hover { background: linear-gradient(135deg, #CC0029 0%, #990020 100%); }
.st-home-product-rating { display: inline; font-size: 12px; color: #F59E0B; margin-left: 6px; }
.st-home-product-card { display: flex; flex-direction: column; }

/* === Homepage Dark Mode === */
body.st-dark .st-home-products { background: #1E293B; border-color: #475569; }
body.st-dark .st-home-product-card { background: #334155; }
body.st-dark .st-home-product-name { color: #E2E8F0; }
body.st-dark .st-home-categories { background: #1E293B; border-color: #475569; }
body.st-dark .st-home-cat-card { background: #334155; }
body.st-dark .st-home-cat-card:hover { border-color: #60A5FA; background: #1E3A5F; }
body.st-dark .st-home-cat-name { color: #E2E8F0 !important; }

/* === v12: Dark mode for new components === */
body.st-dark .st-product-features { color: #94A3B8; border-top-color: #475569; }
body.st-dark .st-home-product-rating { color: #FBBF24; }

/* === v13: Sale Event Banner === */
.st-sale-banner { position: relative; border-radius: 8px; margin-bottom: 20px; overflow: hidden; animation: st-sale-pulse 2s ease-in-out infinite; }
.st-sale-banner .st-sale-link { display: flex; align-items: center; gap: 10px; padding: 12px 40px 12px 16px; text-decoration: none !important; color: #fff !important; font-weight: 600; font-size: 14px; }
.st-sale-banner .st-sale-icon { font-size: 20px; flex-shrink: 0; }
.st-sale-banner .st-sale-text { flex: 1; }
.st-sale-banner .st-sale-cta { flex-shrink: 0; background: rgba(255,255,255,0.25); padding: 4px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.st-sale-banner .st-sale-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.st-sale-banner .st-sale-close:hover { color: #fff; }
.st-sale-rakuten { background: linear-gradient(135deg, #BF0000, #E60012); }
.st-sale-amazon { background: linear-gradient(135deg, #FF9900, #FF6600); }
@keyframes st-sale-pulse { 0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15); } 50% { box-shadow: 0 4px 16px rgba(0,0,0,0.25); } }
@media (max-width: 767px) {
  .st-sale-banner .st-sale-link { flex-wrap: wrap; padding: 10px 36px 10px 12px; gap: 6px; font-size: 13px; }
  .st-sale-banner .st-sale-cta { width: 100%; text-align: center; margin-top: 4px; }
}

/* === v13: Inline Affiliate Links === */
a.st-inline-aff { color: var(--color-primary, #2563EB) !important; text-decoration: underline !important; text-decoration-style: dotted !important; text-underline-offset: 3px !important; font-weight: 500; }
a.st-inline-aff:hover { text-decoration-style: solid !important; color: #1D4ED8 !important; }
a.st-inline-aff::after { content: " \1F6D2"; font-size: 0.8em; }

/* === v13: Dark mode for new components === */
body.st-dark .st-sale-banner { box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
body.st-dark a.st-inline-aff { color: #60A5FA !important; }
body.st-dark a.st-inline-aff:hover { color: #93C5FD !important; }

/* ============================================================
   v14: UX Engagement Components (Fix 46-50)
   ============================================================ */

/* === Fix 46: Read Next CTA === */
.st-read-next { margin: 40px 0 24px; border: 2px solid var(--color-primary, #2563EB); border-radius: 12px; overflow: hidden; transition: box-shadow 0.3s; }
.st-read-next:hover { box-shadow: 0 4px 16px rgba(37,99,235,0.15); }
.st-read-next-link { display: block; padding: 20px 24px; text-decoration: none !important; color: var(--color-text, #1E293B) !important; }
.st-read-next-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary, #2563EB); margin-bottom: 8px; }
.st-read-next-title { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.st-read-next-cat { font-size: 13px; color: var(--color-primary, #2563EB); font-weight: 600; }
@media (max-width: 767px) {
  .st-read-next-link { padding: 16px; }
  .st-read-next-title { font-size: 16px; }
}

/* === Fix 47: Recently Viewed === */
.st-recently-viewed { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.st-rv-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--color-text, #1E293B); }
.st-rv-grid { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; }
.st-rv-card { flex: 0 0 200px; padding: 14px 16px; background: var(--color-bg-card, #fff); border: 1px solid var(--color-border, #E2E8F0); border-radius: 10px; text-decoration: none !important; color: var(--color-text, #1E293B) !important; transition: border-color 0.2s, box-shadow 0.2s; }
.st-rv-card:hover { border-color: var(--color-primary, #2563EB); box-shadow: 0 2px 8px rgba(37,99,235,0.1); }
.st-rv-card-title { font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-rv-card-cat { font-size: 11px; color: var(--color-muted, #94A3B8); }

/* === Fix 48: Mobile Bottom Navigation === */
.st-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--color-bg, #fff); border-top: 1px solid var(--color-border, #E2E8F0); display: flex; justify-content: space-around; align-items: center; z-index: 9998; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 8px rgba(0,0,0,0.06); }
.st-bnav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; color: var(--color-muted, #94A3B8); font-size: 10px; font-weight: 500; cursor: pointer; padding: 4px 8px; text-decoration: none !important; -webkit-tap-highlight-color: transparent; min-width: 48px; min-height: 48px; justify-content: center; }
.st-bnav-item svg { color: inherit; }
.st-bnav-item:hover, .st-bnav-item:active, .st-bnav-active { color: var(--color-primary, #2563EB) !important; }
@media (min-width: 769px) {
  .st-bottom-nav { display: none !important; }
}

/* === Fix 49: Series Navigation === */
.st-series-nav { background: var(--color-bg-card, #F8FAFC); border: 1px solid var(--color-border, #E2E8F0); border-radius: 10px; padding: 16px 20px; margin: 16px 0 24px; }
.st-series-name { font-size: 13px; font-weight: 700; color: var(--color-primary, #2563EB); margin-bottom: 10px; text-align: center; }
.st-series-links { display: flex; justify-content: space-between; gap: 12px; }
.st-series-prev, .st-series-next { font-size: 13px; color: var(--color-text, #1E293B) !important; text-decoration: none !important; font-weight: 500; flex: 1; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-series-prev:hover, .st-series-next:hover { color: var(--color-primary, #2563EB) !important; }
.st-series-next { text-align: right; }
@media (max-width: 767px) {
  .st-series-links { flex-direction: column; gap: 8px; }
  .st-series-prev, .st-series-next { text-align: left; }
}

/* === Fix 50: NEW Badge === */
.st-new-badge { display: inline-block; background: #EF4444; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.05em; animation: st-new-pulse 2s ease-in-out infinite; }
@keyframes st-new-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ============================================================
   v14: Dark Mode for new UX components
   ============================================================ */
body.st-dark .st-read-next { border-color: #3B82F6; }
body.st-dark .st-read-next:hover { box-shadow: 0 4px 16px rgba(59,130,246,0.2); }
body.st-dark .st-read-next-link { color: #E2E8F0 !important; }
body.st-dark .st-rv-title { color: #E2E8F0; }
body.st-dark .st-rv-card { background: #1E293B; border-color: #334155; color: #E2E8F0 !important; }
body.st-dark .st-rv-card:hover { border-color: #3B82F6; }
body.st-dark .st-bottom-nav { background: #0F172A; border-top-color: #334155; box-shadow: 0 -2px 8px rgba(0,0,0,0.3); }
body.st-dark .st-bnav-item { color: #64748B; }
body.st-dark .st-bnav-item:hover, body.st-dark .st-bnav-active { color: #60A5FA !important; }
body.st-dark .st-series-nav { background: #1E293B; border-color: #334155; }
body.st-dark .st-series-prev, body.st-dark .st-series-next { color: #E2E8F0 !important; }
body.st-dark .st-series-prev:hover, body.st-dark .st-series-next:hover { color: #60A5FA !important; }

/* === Fix 52: A8.net Booking CTA === */
.st-booking-cta { margin: 32px 0; padding: 24px; background: linear-gradient(135deg, #FFF7ED, #FEF3C7); border: 2px solid #F59E0B; border-radius: 12px; text-align: center; }
.st-booking-cta h3 { margin: 0 0 16px; font-size: 18px; color: #92400E; }
.st-booking-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.st-booking-btn { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 15px; color: #fff !important; text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s; }
.st-booking-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.st-booking-jalan { background: linear-gradient(135deg, #E85D04, #DC2626); }
.st-booking-rakutenTravel { background: linear-gradient(135deg, #BF0000, #9A0000); }
body.st-dark .st-booking-cta { background: linear-gradient(135deg, #1E293B, #292524); border-color: #B45309; }
body.st-dark .st-booking-cta h3 { color: #FCD34D; }

/* ============================================================
   v15: Reaction Buttons (Fix 57) + Minor polish
   ============================================================ */

/* === Fix 57: Reaction Buttons === */
.st-reaction { margin: 40px 0 24px; padding: 24px; background: var(--color-surface-alt, #F8FAFC); border: 1px solid var(--color-border, #E2E8F0); border-radius: var(--radius-md, 12px); text-align: center; }
.st-reaction-label { font-size: 15px; font-weight: 600; color: var(--color-text, #1E293B); margin-bottom: 16px; }
.st-reaction-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.st-reaction-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--color-surface, #fff); border: 2px solid var(--color-border, #E2E8F0); border-radius: var(--radius-full, 9999px); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--color-text, #1E293B); transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; }
.st-reaction-btn:hover { border-color: var(--color-primary, #2563EB); background: var(--color-primary-light, #DBEAFE); }
.st-reaction-btn.st-reaction-active { border-color: var(--color-primary, #2563EB); background: var(--color-primary, #2563EB); color: #fff; }
.st-reaction-btn.st-reaction-active:hover { background: var(--color-primary-dark, #1D4ED8); }
.st-reaction-icon { font-size: 18px; line-height: 1; }
.st-reaction-text { font-size: 13px; }
.st-reaction-count { font-size: 13px; opacity: 0.7; margin-left: 2px; }
.st-reaction-btn.st-reaction-active .st-reaction-count { opacity: 1; }
@media (max-width: 767px) {
  .st-reaction { padding: 16px; margin: 32px 0 16px; }
  .st-reaction-btn { padding: 10px 16px; gap: 6px; font-size: 13px; }
  .st-reaction-icon { font-size: 16px; }
  .st-reaction-text { font-size: 12px; }
}

/* === Dark mode: Reaction Buttons === */
body.st-dark .st-reaction { background: #1E293B; border-color: #334155; }
body.st-dark .st-reaction-label { color: #E2E8F0; }
body.st-dark .st-reaction-btn { background: #0F172A; border-color: #334155; color: #E2E8F0; }
body.st-dark .st-reaction-btn:hover { border-color: #3B82F6; background: #1E3A5F; }
body.st-dark .st-reaction-btn.st-reaction-active { background: #2563EB; border-color: #3B82F6; color: #fff; }
body.st-dark .st-reaction-btn.st-reaction-active:hover { background: #1D4ED8; }