/*
Theme Name: SWELL Child
Theme URI: https://otona-hokenshitsu.jp
Description: オトナのお悩み保健室 SWELL子テーマ
Author: Otona Hokenshitsu
Template: swell
Version: 1.0.0
Text Domain: swell-child
*/

/* ══════════════════════════════════════════════
   Google Fonts
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=Noto+Serif+JP:wght@400;600;700;900&display=swap');

/* ══════════════════════════════════════════════
   CSS変数
══════════════════════════════════════════════ */
:root {
  --g-logo:   linear-gradient(135deg, #86AEEA 0%, #B088D8 50%, #F79797 100%);
  --g-logo-r: linear-gradient(135deg, #F79797 0%, #B088D8 50%, #86AEEA 100%);
  --g-hero:   linear-gradient(140deg, #EEF4FF 0%, #F4EEFF 45%, #FFF0F8 100%);
  --g-warm:   linear-gradient(135deg, #FFF0F8 0%, #F8EEFF 50%, #EEF4FF 100%);
  --g-sect:   linear-gradient(150deg, #F8F0FF 0%, #EEF5FF 50%, #FFF5F8 100%);
  --g-cool:   linear-gradient(135deg, #EEF4FF 0%, #F0EEFF 60%, #FFF0F8 100%);
  --badge-h:  linear-gradient(135deg, #F79797, #E088C8);
  --badge-i:  linear-gradient(135deg, #B088D8, #8899E8);
  --badge-c:  linear-gradient(135deg, #86AEEA, #88C8D8);
  --badge-s:  linear-gradient(135deg, #88C8B0, #86AEEA);
  --blue:  #86AEEA;
  --mid:   #B088D8;
  --pink:  #F79797;
  --ink:   #2e2e2e;
  --ink-md:#4a4a4a;
  --ink-lt:#777;
  --bg:    #FDFAF8;
  --white: #fff;
  --border:#EDE8E3;
  --sh:    0 2px 16px rgba(140,120,180,.10);
  --sh-md: 0 6px 32px rgba(140,120,180,.18);
  --r:     14px;
  --r-lg:  24px;
  --font:  'Zen Kaku Gothic New','ヒラギノ角ゴ ProN',sans-serif;
  --serif: 'Noto Serif JP','游明朝',serif;
}

/* ══════════════════════════════════════════════
   ベース
══════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════
   SWELL ヘッダー上書き（全ページ共通）
══════════════════════════════════════════════ */
/* WordPress管理バーによる空白を除去 */
html { margin-top: 0 !important; }
#wpadminbar { position: fixed !important; top: 0 !important; }
body.admin-bar #header,
body.admin-bar .l-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar #header,
  body.admin-bar .l-header { top: 46px !important; }
}

#header,
#header.l-header,
.l-header,
.l-header--sticky,
.l-header.is-fixed,
.l-header.is-sticky,
body #header,
body .l-header,
.single #header,
.single .l-header,
.page #header,
.page .l-header,
.archive #header,
.archive .l-header,
[id="header"],
header.l-header {
  background: linear-gradient(135deg,#86AEEA 0%,#B088D8 50%,#F79797 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 20px rgba(134,174,234,.3) !important;
}

/* ヘッダー内のinner要素も透明に */
#header .l-header__inner,
.l-header .l-header__inner,
#header .header__inner,
.l-header .header__inner {
  background: transparent !important;
}

/* ══ ロゴ：白抜き版を使用 ══ */
.header__logo img,
.l-header__logo img,
.c-headLogo img,
.site-logo img {
  height: 40px !important;
  width: auto !important;
  /* logo-white.pngに差し替え */
  content: url(logo-white.png) !important;
  filter: none !important;
}

/* サイトタイトル（テキストの場合） */
.header__logo .site-name,
.header__logo a,
.l-header__logo a,
.c-headLogo a {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ══ グローバルナビ：トップページと統一 ══ */
.g-nav__item > a,
.globalNav__item > a,
#g-nav a,
.c-gnav__link,
.p-header__nav a {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.95) !important;
  text-shadow: none !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  transition: background .18s !important;
  text-decoration: none !important;
}
.g-nav__item > a:hover,
.globalNav__item > a:hover,
#g-nav a:hover,
.c-gnav__link:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* ハンバーガーアイコン（スマホ）を白に */
.c-headMenu__btn span,
.c-headMenu__btn::before,
.c-headMenu__btn::after,
.nav-toggle span {
  background: #fff !important;
}

/* ══════════════════════════════════════════════
   パンくずリスト
══════════════════════════════════════════════ */
.p-breadcrumb,
#breadcrumb,
.breadcrumb {
  background: transparent !important;
  padding: 12px 0 !important;
  font-size: 11px !important;
  color: var(--ink-lt) !important;
}

.p-breadcrumb a,
#breadcrumb a {
  color: var(--ink-lt) !important;
  text-decoration: none !important;
}

.p-breadcrumb a:hover,
#breadcrumb a:hover {
  color: var(--mid) !important;
}

.p-breadcrumb .current,
#breadcrumb .current {
  background: var(--g-logo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════
   サイト背景・本文エリア
══════════════════════════════════════════════ */
.l-main,
#main,
.l-container,
.p-postLayout {
  background: var(--bg) !important;
}

/* ══════════════════════════════════════════════
   記事ページ：タイトル
══════════════════════════════════════════════ */
.p-entryTitle,
.article__title,
.entry-title,
h1.article-title {
  font-family: var(--serif) !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  letter-spacing: -.01em !important;
}

/* ══════════════════════════════════════════════
   記事ページ：アイキャッチ
══════════════════════════════════════════════ */
.p-entryThumbnail img,
.article__thumbnail img,
.eye-catch img {
  border-radius: var(--r) !important;
  box-shadow: var(--sh) !important;
}

/* ══════════════════════════════════════════════
   記事本文
══════════════════════════════════════════════ */
.p-entry__content,
.article__body,
.entry-content {
  font-size: 15px !important;
  line-height: 1.95 !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
}

/* ══════════════════════════════════════════════
   H2 完全上書き v28b
   ─ ::before を廃止し ::after でグラデーションライン
   ─ SWELLの::beforeとの競合を回避
══════════════════════════════════════════════ */

h2,
.p-entry__content h2,
.article__body h2,
.entry-content h2,
.wp-block-heading,
.wp-block-heading h2,
.wp-block-swell-blocks-heading,
.wp-block-swell-blocks-heading h2,
.swell-block-heading,
h2.swell-block-heading,
.p-entry__content .wp-block-heading,
.entry-content .wp-block-heading,
body .p-entry__content h2,
body .entry-content h2,
body .wp-block-heading,
body .swell-block-heading {
  font-family: var(--sans) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #2e2e2e !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 14px 0 !important;
  margin: 48px 0 20px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  position: relative !important;
  display: block !important;
}

/* ::before は完全に消す（SWELLの装飾との競合防止） */
h2::before,
.p-entry__content h2::before,
.article__body h2::before,
.entry-content h2::before,
.wp-block-heading::before,
.swell-block-heading::before,
.wp-block-swell-blocks-heading::before,
body h2::before,
body .wp-block-heading::before,
body .swell-block-heading::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: none !important;
  position: static !important;
}

/* グラデーションアンダーラインを ::after で実装 */
h2::after,
.p-entry__content h2::after,
.article__body h2::after,
.entry-content h2::after,
.wp-block-heading::after,
.swell-block-heading::after,
.wp-block-swell-blocks-heading::after,
body h2::after,
body .wp-block-heading::after,
body .swell-block-heading::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: rgba(237,232,227,1) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* グラデーション部分（左64px）を重ねる */
h2 .hk-h2-line,
.p-entry__content h2::after,
.article__body h2::after,
.entry-content h2::after,
.wp-block-heading::after,
.swell-block-heading::after,
body h2::after,
body .wp-block-heading::after {
  background: linear-gradient(
    to right,
    #86AEEA 0px,
    #B088D8 32px,
    #F79797 64px,
    rgba(237,232,227,1) 64px,
    rgba(237,232,227,1) 100%
  ) !important;
}

/* SWELLブロックの外側ラッパーもリセット */
.wp-block-swell-blocks-heading,
[class*="swell-block"] h2 {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* h3 */
.p-entry__content h3,
.article__body h3,
.entry-content h3 {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  padding-bottom: 8px !important;
  margin: 32px 0 14px !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--g-logo) 1 !important;
  background: none !important;
}

/* h4 */
.p-entry__content h4,
.article__body h4,
.entry-content h4 {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 24px 0 10px !important;
}

/* リンク */
.p-entry__content a,
.article__body a,
.entry-content a {
  color: var(--mid) !important;
  text-underline-offset: 3px !important;
}

/* 強調 */
.p-entry__content strong,
.article__body strong,
.entry-content strong {
  font-weight: 700 !important;
  background: linear-gradient(transparent 58%, rgba(176,136,216,.2) 58%) !important;
}

/* 引用 */
.p-entry__content blockquote,
.article__body blockquote,
.entry-content blockquote {
  background: var(--g-sect) !important;
  border-radius: var(--r) !important;
  border-left: 4px solid !important;
  border-image: var(--g-logo) 1 !important;
  padding: 18px 22px !important;
  margin: 24px 0 !important;
  font-style: normal !important;
  color: var(--ink-md) !important;
}

/* テーブル */
.p-entry__content table,
.article__body table,
.entry-content table {
  border-radius: var(--r) !important;
  overflow: hidden !important;
  font-size: 13px !important;
}

.p-entry__content th,
.article__body th,
.entry-content th {
  background: var(--g-sect) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  padding: 10px 14px !important;
}

.p-entry__content td,
.article__body td,
.entry-content td {
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 14px !important;
}

/* ══════════════════════════════════════════════
   SWELLのボックス装飾を上書き
══════════════════════════════════════════════ */
/* ポイントボックス */
.wp-block-swell-blocks-box,
.swell-block-box,
.p-entry__content .is-style-box-border {
  border-radius: var(--r) !important;
  border-color: rgba(176,136,216,.3) !important;
}

/* チェックリスト */
.wp-block-swell-blocks-check-list li::before,
.swell-block-check-list li::before {
  color: var(--mid) !important;
}

/* ボタン */
.wp-block-buttons .wp-block-button__link,
.swell-block-button a,
.p-entry__content .wp-block-button__link {
  background: var(--g-logo) !important;
  border-radius: 32px !important;
  border: none !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  box-shadow: 0 3px 16px rgba(140,120,180,.2) !important;
  transition: transform .2s, box-shadow .2s !important;
}

.wp-block-buttons .wp-block-button__link:hover,
.p-entry__content .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(140,120,180,.3) !important;
  opacity: .95 !important;
}

/* ══════════════════════════════════════════════
   目次（SWELL標準TOC）
══════════════════════════════════════════════ */
.p-toc,
#toc,
.toc {
  background: var(--g-sect) !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 22px 26px !important;
}

.p-toc__title,
#toc .toc__title {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.p-toc__list a,
#toc a {
  color: var(--ink-md) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all .2s !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.p-toc__list a:hover,
#toc a:hover {
  opacity: .7 !important;
}

/* ══════════════════════════════════════════════
   サイドバー
══════════════════════════════════════════════ */
.l-sidebar,
#sidebar {
  background: transparent !important;
}

.widget {
  background: var(--white) !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.widget-title,
.widgettitle,
.widget__title {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--ink) !important;
  background: var(--g-sect) !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: none !important;
}

.widget ul li {
  border-bottom: 1px solid var(--border) !important;
  padding: 9px 0 !important;
  font-size: 13px !important;
}

.widget ul li:last-child { border-bottom: none !important; }

.widget ul li a {
  color: var(--ink-md) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}

.widget ul li a:hover { color: var(--mid) !important; }

/* タグクラウド・記事内タグ ── SWELL全クラス網羅 */
.tagcloud a,
.widget .tag-cloud-link,
.p-postData__item a[rel="tag"],
.p-postData__tag a,
.p-postData__tag,
.p-entryData__tag a,
.p-entryData__tag,
.entry-tags a,
a[rel="tag"],
.post-tags a,
.swell-block-tag a,
.p-postData a[href*="/tag/"],
.p-postData a[href*="archives/tag"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink-md) !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--g-logo) border-box !important;
  transition: all .18s !important;
  text-decoration: none !important;
  margin: 3px !important;
  letter-spacing: .02em !important;
}

/* # プレフィックス */
.tagcloud a::before,
.widget .tag-cloud-link::before,
a[rel="tag"]::before,
.p-postData a[href*="/tag/"]::before,
.p-postData a[href*="archives/tag"]::before {
  content: "#" !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ホバー */
.tagcloud a:hover,
.widget .tag-cloud-link:hover,
a[rel="tag"]:hover,
.p-postData a[href*="/tag/"]:hover,
.p-postData a[href*="archives/tag"]:hover {
  background:
    var(--g-logo) padding-box,
    var(--g-logo) border-box !important;
  color: #fff !important;
}
.tagcloud a:hover::before,
.widget .tag-cloud-link:hover::before,
a[rel="tag"]:hover::before {
  background: #fff !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* タグエリア全体のレイアウト */
.p-postData__item:has(a[rel="tag"]),
.p-postData__tag {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
}

/* ══════════════════════════════════════════════
   記事カード（アーカイブ・関連記事）
══════════════════════════════════════════════ */
.p-postList__item,
.p-cardList__item,
.c-postCard,
.card-item {
  border-radius: var(--r) !important;
  overflow: hidden !important;
  box-shadow: var(--sh) !important;
  border: 1px solid rgba(237,232,227,.5) !important;
  background: var(--white) !important;
  transition: transform .22s, box-shadow .22s !important;
}

.p-postList__item:hover,
.p-cardList__item:hover,
.c-postCard:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sh-md) !important;
}

/* カードタイトル */
.p-postList__title,
.c-postCard__title,
.card-title {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.6 !important;
}

/* カテゴリバッジ - モダンなグラデーションデザイン */
.c-cat-label,
.p-postList__cat,
.cat-label,
.p-postData__cat a,
.p-postData__item .c-cat-label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  color: #fff !important;
  background: var(--g-logo) !important;
  border: none !important;
  letter-spacing: .04em !important;
  box-shadow: 0 2px 8px rgba(176,136,216,.3) !important;
  text-decoration: none !important;
}
/* カテゴリ別カラー */
.c-cat-label[href*="items"],
.cat-label[href*="items"]   { background: var(--badge-i) !important; }
.c-cat-label[href*="colum"],
.cat-label[href*="colum"]   { background: var(--badge-c) !important; }
.c-cat-label[href*="soudan"],
.cat-label[href*="soudan"]  { background: var(--badge-s) !important; }
.c-cat-label[href*="hotness"],
.cat-label[href*="hotness"] { background: var(--badge-h) !important; }

/* 記事メタ（日付・著者アイコン）の文字色 */
.p-postData__item,
.p-postData__date,
.p-postData__author {
  font-size: 12px !important;
  color: var(--ink-lt) !important;
}
/* アイコン（📌マーク）を非表示にしてスッキリ */
.p-postData__item .icon-tag::before,
.p-postData__item svg {
  display: none !important;
}

/* ══════════════════════════════════════════════
   アーカイブページヘッダー
══════════════════════════════════════════════ */
.p-archiveHeader,
.archive-header,
.p-catHeader {
  background: var(--g-hero) !important;
  border-radius: var(--r) !important;
  padding: 36px 32px !important;
  margin-bottom: 32px !important;
  text-align: center !important;
  border: none !important;
}

.p-archiveHeader__title,
.archive-title,
.p-catHeader__title {
  font-family: var(--serif) !important;
  font-size: clamp(20px, 4vw, 26px) !important;
  font-weight: 700 !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.p-archiveHeader__desc,
.archive-desc {
  font-size: 13px !important;
  color: var(--ink-lt) !important;
  margin-top: 8px !important;
}

/* ══════════════════════════════════════════════
   ページネーション
══════════════════════════════════════════════ */
.wp-pagenavi a,
.wp-pagenavi span,
.pagination a,
.pagination span,
.page-numbers {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-md) !important;
  background: var(--white) !important;
  transition: all .2s !important;
  margin: 2px !important;
  text-decoration: none !important;
}

.wp-pagenavi a:hover,
.page-numbers:hover,
.page-numbers.current {
  background: var(--g-logo) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ══════════════════════════════════════════════
   著者情報ボックス
══════════════════════════════════════════════ */
.p-authorBox,
.author-box,
.author-profile {
  background: var(--g-sect) !important;
  border-radius: var(--r) !important;
  padding: 24px !important;
  border: none !important;
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

.p-authorBox__img img,
.author-box img,
.author-avatar img {
  border-radius: 50% !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
}

.p-authorBox__name,
.author-name {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.p-authorBox__role,
.author-role {
  font-size: 11px !important;
  color: var(--mid) !important;
  margin-bottom: 8px !important;
}

.p-authorBox__desc,
.author-description {
  font-size: 13px !important;
  color: var(--ink-md) !important;
  line-height: 1.85 !important;
}

/* ══════════════════════════════════════════════
   関連記事
══════════════════════════════════════════════ */
.p-relatedPosts,
.related-posts {
  margin-top: 40px !important;
}

.p-relatedPosts__title,
.related-posts__title {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 16px !important;
  border: none !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════
   フッター
══════════════════════════════════════════════ */
#footer,
.l-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 64px !important;
}

.footer__logo img,
.l-footer__logo img {
  height: 28px !important;
  width: auto !important;
}

.footer__copy,
.l-footer__copyright,
#copyright {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  font-weight: 400 !important;
}

.l-footer a,
#footer a {
  color: var(--ink-md) !important;
  transition: color .15s !important;
}

.l-footer a:hover,
#footer a:hover {
  color: var(--mid) !important;
}

/* フッターナビ */
.footer-nav a,
.footerNav a,
.l-footer__nav a {
  font-size: 13px !important;
  color: var(--ink-md) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════
   スクロールトップボタン
══════════════════════════════════════════════ */
#page-top,
.go-to-top,
#scrollUp {
  background: var(--g-logo) !important;
  border-radius: 50% !important;
  box-shadow: var(--sh-md) !important;
  border: none !important;
  width: 44px !important;
  height: 44px !important;
}

/* ══════════════════════════════════════════════
   レスポンシブ
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .p-archiveHeader,
  .archive-header,
  .p-catHeader {
    padding: 28px 20px !important;
  }

  .p-authorBox,
  .author-box {
    flex-direction: column !important;
  }
}

/* ══════════════════════════════════════════════
   Q&A記事・商品レビュー専用スタイル
   （記事本文内のカスタムクラスをトンマナ統一）
══════════════════════════════════════════════ */

/* ── Q&Aカード ── */
.qa-card {
  background: linear-gradient(150deg,#F8F0FF 0%,#EEF4FF 50%,#FFF5F8 100%) !important;
  padding: 28px 32px !important;
  border-radius: var(--r) !important;
  margin-bottom: 32px !important;
  border: none !important;
  border-left: 4px solid transparent !important;
  border-image: var(--g-logo) 1 !important;
  box-shadow: var(--sh) !important;
  transition: transform .22s, box-shadow .22s !important;
  position: relative !important;
}

.qa-card:hover {
  box-shadow: var(--sh-md) !important;
  transform: translateY(-3px) !important;
}

/* Q番号バッジ */
.qa-number {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  box-shadow: 0 2px 10px rgba(176,136,216,.3) !important;
}

/* Q見出し */
.qa-question {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(176,136,216,.2) !important;
}

/* A本文 */
.qa-answer {
  font-size: 15px !important;
  line-height: 2.0 !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
}

.qa-answer p { margin-bottom: 14px !important; }

.qa-answer ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.qa-answer ul li {
  padding-left: 20px !important;
  position: relative !important;
  line-height: 1.85 !important;
}

.qa-answer ul li::before {
  content: '▸' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--mid) !important;
  font-size: 12px !important;
  top: 5px !important;
}

/* ワンポイントTIP */
.qa-tip {
  background: rgba(255,255,255,.75) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-top: 18px !important;
  border: 1px solid rgba(176,136,216,.2) !important;
  border-left: 3px solid !important;
  border-image: none !important;
  border-left-color: var(--mid) !important;
}

.qa-tip-title {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--mid) !important;
  margin-bottom: 7px !important;
  letter-spacing: .04em !important;
}

.qa-tip-content {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--ink-md) !important;
}

/* ── テキスト強調クラス ── */
.highlight-text {
  background: linear-gradient(transparent 55%, rgba(176,136,216,.22) 55%) !important;
  font-weight: 700 !important;
}

.emphasis-coral { color: #D96080 !important; font-weight: 700 !important; }
.emphasis-blue  { color: #5580C8 !important; font-weight: 700 !important; }

/* ── カテゴリタグ ── */
.category-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}

.category-tag {
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  color: #fff !important;
  background: var(--badge-c) !important;
}

.category-tag.hotness     { background: var(--badge-h) !important; }
.category-tag.consultation{ background: var(--badge-s) !important; color: #fff !important; }
.category-tag.items       { background: var(--badge-i) !important; }

/* ── まとめボックス ── */
.summary {
  background: var(--g-warm) !important;
  border-radius: var(--r) !important;
  padding: 32px 36px !important;
  margin: 40px 0 !important;
  border: none !important;
  box-shadow: var(--sh) !important;
}

.summary h2 {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 0 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(176,136,216,.2) !important;
}

/* ── インフォボックス（CTA） ── */
.info-box {
  background: var(--g-logo) !important;
  border-radius: var(--r) !important;
  padding: 28px 32px !important;
  margin: 32px 0 !important;
  color: #fff !important;
}

.info-box-title {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 12px !important;
}

.info-box-content {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,.92) !important;
}

/* ── 商品レビュー専用（今後の拡張用） ── */
.review-card {
  background: var(--white) !important;
  border-radius: var(--r) !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--sh) !important;
  border: 1px solid var(--border) !important;
  transition: transform .22s, box-shadow .22s !important;
}

.review-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sh-md) !important;
}

.review-score {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--g-sect) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mid) !important;
  margin-bottom: 12px !important;
}

.review-pros-cons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-top: 16px !important;
}

.review-pros,
.review-cons {
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
}

.review-pros {
  background: linear-gradient(135deg,#EEF4FF,#F4EEFF) !important;
  border-left: 3px solid var(--blue) !important;
}

.review-cons {
  background: linear-gradient(135deg,#FFF0F8,#FFF5F0) !important;
  border-left: 3px solid var(--pink) !important;
}

.review-pros-title,
.review-cons-title {
  font-weight: 700 !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
  letter-spacing: .04em !important;
}

.review-pros-title { color: var(--blue) !important; }
.review-cons-title { color: #D06070 !important; }

/* ── 購入ボタン（アフィリエイト） ── */
.buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: 32px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(176,136,216,.3) !important;
  transition: transform .2s, box-shadow .2s !important;
  margin-top: 16px !important;
}

.buy-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 28px rgba(176,136,216,.4) !important;
  color: #fff !important;
}

@media (max-width: 680px) {
  .qa-card { padding: 20px 18px !important; }
  .qa-question { font-size: 16px !important; }
  .review-pros-cons { grid-template-columns: 1fr !important; }
  .summary { padding: 24px 20px !important; }
  .info-box { padding: 22px 20px !important; }
}


/* ══════════════════════════════════════════════
   記事カスタムUIパーツ（Q&A・商品レビュー共通）
   使い方: ブロックエディタの「高度な設定 > 追加CSSクラス」に
   クラス名を入れるだけで適用されます
══════════════════════════════════════════════ */

/* ── テキスト装飾 ─────────────────────── */
.highlight-text {
  background: linear-gradient(transparent 55%, rgba(134,174,234,.28) 55%);
  font-weight: 700;
}
.emphasis-coral {
  color: #E07080;
  font-weight: 700;
}
.emphasis-blue {
  color: #5A8ED4;
  font-weight: 700;
}

/* ── Q&Aカード ────────────────────────── */
.qa-card {
  background: #FAF8F5 !important;
  padding: 28px 30px !important;
  border-radius: 14px !important;
  margin-bottom: 32px !important;
  border-left: 5px solid #86AEEA !important;
  box-shadow: 0 2px 14px rgba(134,174,234,.12) !important;
  transition: transform .22s, box-shadow .22s !important;
}
.qa-card:hover {
  box-shadow: 0 6px 28px rgba(134,174,234,.2) !important;
  transform: translateY(-2px) !important;
}
.qa-number {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #86AEEA, #F79797) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-bottom: 14px !important;
  box-shadow: 0 2px 8px rgba(134,174,234,.35) !important;
  font-family: var(--serif) !important;
}
.qa-question {
  font-family: var(--serif) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
}
.qa-answer {
  font-size: 15px !important;
  line-height: 1.95 !important;
  color: var(--ink-md) !important;
}
.qa-answer p { margin-bottom: 14px !important; }
.qa-answer ul { margin-left: 22px !important; margin-bottom: 14px !important; }
.qa-answer li { margin-bottom: 9px !important; line-height: 1.85 !important; }

/* ── TIPボックス ──────────────────────── */
.qa-tip {
  background: linear-gradient(135deg, #FFF0F8 0%, #EEF4FF 100%) !important;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  margin-top: 18px !important;
  border-left: 4px solid #B088D8 !important;
}
.qa-tip-title {
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 7px !important;
  font-size: 14px !important;
  font-family: var(--serif) !important;
}
.qa-tip-content {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--ink-md) !important;
}

/* ── カテゴリタグ群 ───────────────────── */
.category-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}
.category-tag {
  display: inline-block !important;
  background: var(--badge-c) !important;
  color: #fff !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.category-tag.hotness  { background: var(--badge-h) !important; }
.category-tag.items    { background: var(--badge-i) !important; }
.category-tag.soudan   { background: var(--badge-s) !important; }
.category-tag.consultation {
  background: #FFF0F8 !important;
  color: #C06080 !important;
  border: 1px solid rgba(247,151,151,.4) !important;
}

/* ── まとめボックス ───────────────────── */
.summary {
  background: linear-gradient(135deg, #EEF4FF 0%, #F4EEFF 50%, #FFF0F8 100%) !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  margin: 40px 0 !important;
  border: none !important;
}
.summary h2 {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
  border: none !important;
  background: none !important;
}
.summary h2::before { display: none !important; }
.summary p {
  font-size: 15px !important;
  line-height: 1.95 !important;
  color: var(--ink-md) !important;
  margin-bottom: 12px !important;
}

/* ── インフォボックス ─────────────────── */
.info-box {
  background: var(--white) !important;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  margin: 32px 0 !important;
  border: 1.5px solid rgba(176,136,216,.25) !important;
  box-shadow: var(--sh) !important;
}
.info-box-title {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.info-box-title::before {
  content: '💡' !important;
}
.info-box-content {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--ink-md) !important;
}

/* ── 商品レビューカード ───────────────── */
.review-card {
  background: var(--white) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin: 28px 0 !important;
  box-shadow: var(--sh-md) !important;
  border: 1px solid rgba(237,232,227,.6) !important;
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}
.review-card-img {
  width: 180px !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}
.review-card-img-fb {
  width: 180px !important;
  aspect-ratio: 1 !important;
  background: var(--g-sect) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
}
.review-card-name {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}
.review-card-brand {
  font-size: 12px !important;
  color: var(--ink-lt) !important;
  margin-bottom: 12px !important;
}
/* 星評価 */
.review-stars {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}
.review-stars .star {
  color: #F7B731 !important;
  font-size: 18px !important;
}
.review-stars .score {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-left: 4px !important;
}
/* 評価バー */
.review-bars {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.review-bar-row {
  display: grid !important;
  grid-template-columns: 80px 1fr 36px !important;
  gap: 8px !important;
  align-items: center !important;
}
.review-bar-label {
  font-size: 12px !important;
  color: var(--ink-lt) !important;
}
.review-bar-track {
  height: 7px !important;
  background: var(--border) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.review-bar-fill {
  height: 100% !important;
  background: var(--g-logo) !important;
  border-radius: 4px !important;
  transition: width .6s ease !important;
}
.review-bar-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink-md) !important;
  text-align: right !important;
}
.review-card-desc {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: var(--ink-md) !important;
  margin-bottom: 14px !important;
}
/* 購入ボタン */
.review-buy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 11px 24px !important;
  border-radius: 32px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 16px rgba(140,120,180,.2) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.review-buy-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(140,120,180,.3) !important;
  color: #fff !important;
}

/* ── 総合評価バッジ ───────────────────── */
.review-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 10px !important;
}

/* ── 関連記事グリッド ─────────────────── */
.related-articles { margin: 40px 0 !important; }
.related-articles-title {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 16px !important;
}
.related-articles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
.related-article-card {
  background: var(--white) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  box-shadow: var(--sh) !important;
  border: 1px solid rgba(237,232,227,.5) !important;
  transition: transform .22s, box-shadow .22s !important;
}
.related-article-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sh-md) !important;
}
.related-article-image {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  display: block !important;
}
.related-article-content { padding: 12px 14px 16px !important; }
.related-article-title {
  font-family: var(--serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.6 !important;
  margin-bottom: 7px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.related-article-excerpt {
  font-size: 12px !important;
  color: var(--ink-lt) !important;
  line-height: 1.75 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── レスポンシブ ─────────────────────── */
@media (max-width: 680px) {
  .review-card {
    grid-template-columns: 1fr !important;
  }
  .review-card-img,
  .review-card-img-fb {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
  }
  .related-articles-grid {
    grid-template-columns: 1fr !important;
  }
  .summary { padding: 24px 20px !important; }
  .info-box { padding: 22px 20px !important; }
  .qa-card { padding: 20px !important; }
}


/* ══════════════════════════════════════════════
   商品レビュー・比較記事 完全UIセット
   v18追加分 - 全クラス対応
══════════════════════════════════════════════ */

/* ── リード文 ─────────────────────────── */
.lead {
  font-size: 15px !important;
  line-height: 2 !important;
  color: var(--ink-md) !important;
  margin-bottom: 32px !important;
}
.lead p { margin-bottom: 14px !important; }
.lead ul { margin-left: 22px !important; margin-bottom: 14px !important; }

/* ── テキスト装飾 ─────────────────────── */
.inline-highlight {
  background: linear-gradient(transparent 55%, rgba(134,174,234,.22) 55%) !important;
  font-weight: 700 !important;
  padding: 0 2px !important;
}
.highlight {
  background: linear-gradient(transparent 55%, rgba(247,151,151,.25) 55%) !important;
  font-weight: 700 !important;
  padding: 0 2px !important;
}
.highlight-box {
  background: #FFF0F0 !important;
  border-left: 3px solid #F79797 !important;
  padding: 10px 16px !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 13px !important;
  margin: 12px 0 !important;
}

/* ── 目次 ─────────────────────────────── */
.toc {
  background: linear-gradient(135deg,rgba(134,174,234,.06) 0%,rgba(176,136,216,.06) 50%,rgba(247,151,151,.06) 100%) !important;
  border-radius: var(--r) !important;
  padding: 22px 26px !important;
  margin: 28px 0 !important;
  border: 1px solid rgba(176,136,216,.15) !important;
}
.toc h3 {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
  border: none !important;
  background: none !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(176,136,216,.2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.toc h3::before {
  content: "≡" !important;
  display: inline !important;
  font-size: 16px !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.toc ul { margin-left: 0 !important; list-style: none !important; padding: 0 !important; }
.toc ul li {
  margin-bottom: 6px !important;
  padding-left: 0 !important;
  counter-increment: toc-counter !important;
}
.toc ul { counter-reset: toc-counter !important; }
.toc ul li a {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  transition: opacity .15s !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.toc ul li a::before {
  content: counter(toc-counter, decimal-leading-zero) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}
.toc ul li a:hover { opacity: .65 !important; }
/* ネスト（h3対応）*/
.toc ul ul {
  margin-left: 20px !important;
  margin-top: 4px !important;
  counter-reset: toc-sub-counter !important;
}
.toc ul ul li { counter-increment: toc-sub-counter !important; }
.toc ul ul li a {
  font-size: 12px !important;
  font-weight: 500 !important;
  opacity: .8 !important;
}
.toc ul ul li a::before {
  content: "─" !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

/* ── 監修者セクション ─────────────────── */
.supervisor-section {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  background: var(--g-sect) !important;
  border-radius: var(--r) !important;
  padding: 22px 24px !important;
  margin: 28px 0 !important;
}
.supervisor-image-container {
  position: relative !important;
  flex-shrink: 0 !important;
}
.supervisor-image {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid rgba(176,136,216,.2) !important;
}
.supervisor-badge {
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}
.supervisor-info { flex: 1 !important; }
.supervisor-title {
  font-size: 11px !important;
  color: var(--mid) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  margin-bottom: 3px !important;
}
.supervisor-name {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}
.supervisor-name a {
  color: var(--ink) !important;
  text-decoration: none !important;
}
.supervisor-description {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--ink-md) !important;
}
.supervisor-credentials {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
}

/* ── 比較軸 ───────────────────────────── */
.comparison-axis {
  background: var(--white) !important;
  border-radius: var(--r) !important;
  padding: 18px 22px !important;
  margin-bottom: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh) !important;
}
.comparison-axis h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  color: var(--ink) !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}
.comparison-axis h3::before { display: none !important; }

/* ── スコアリング ─────────────────────── */
.scoring-method-section {
  background: var(--g-sect) !important;
  border-radius: var(--r) !important;
  padding: 24px 26px !important;
  margin: 28px 0 !important;
}
.scoring-method-title {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 12px !important;
}
.scoring-points {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}
.scoring-point-item {
  background: var(--white) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  box-shadow: var(--sh) !important;
}
.scoring-point-item h4 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
}
.scoring-image {
  width: 100% !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  aspect-ratio: 3/2 !important;
  object-fit: cover !important;
}

/* ── ランキング ───────────────────────── */
.ranking-section { margin: 36px 0 !important; }
.ranking-title {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  margin-bottom: 18px !important;
}
.ranking-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.ranking-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: var(--white) !important;
  border-radius: var(--r) !important;
  padding: 14px 20px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.ranking-item:hover {
  transform: translateX(4px) !important;
  box-shadow: var(--sh-md) !important;
}
.ranking-number {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--g-sect) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  flex-shrink: 0 !important;
}
.ranking-item:first-child .ranking-number {
  background: var(--g-logo) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(134,174,234,.3) !important;
}
.ranking-item:nth-child(2) .ranking-number {
  background: linear-gradient(135deg, #C8C8D8, #A8A8B8) !important;
  color: #fff !important;
}
.ranking-item:nth-child(3) .ranking-number {
  background: linear-gradient(135deg, #D4A874, #C09050) !important;
  color: #fff !important;
}
.ranking-item-content { flex: 1 !important; }
.ranking-item-name {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 3px !important;
}
.ranking-item-brand {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
}

/* ── 商品セクション ───────────────────── */
.product-section {
  margin: 40px 0 !important;
}
.product-section > h3 {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: var(--g-sect) !important;
  padding: 12px 18px 12px 22px !important;
  border-radius: var(--r) !important;
  margin-bottom: 20px !important;
  position: relative !important;
  border: none !important;
}
.product-section > h3::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 60% !important;
  background: var(--g-logo) !important;
  border-radius: 0 3px 3px 0 !important;
}

/* ── 商品カード ───────────────────────── */
.product-item {
  background: var(--white) !important;
  border-radius: var(--r) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  border: 1px solid rgba(237,232,227,.7) !important;
  box-shadow: var(--sh) !important;
}
.product-item > h4 {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
}
.product-header {
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  margin-bottom: 18px !important;
}
.product-image-container {
  position: relative !important;
  flex-shrink: 0 !important;
}
.product-image {
  width: 160px !important;
  height: 160px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  border: 1px solid var(--border) !important;
}
.product-image-placeholder {
  width: 160px !important;
  height: 160px !important;
  background: var(--g-sect) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  text-align: center !important;
  line-height: 1.6 !important;
}
.product-rank {
  display: inline-block !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
}
.product-info > h4 {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
}
.product-description {
  font-size: 13px !important;
  line-height: 1.9 !important;
  color: var(--ink-md) !important;
  margin-bottom: 14px !important;
}
.product-info-grid {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}

/* スコア表示 */
.product-score { flex: 1 !important; }
.product-score-main {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.product-score-main .star { color: #F7B731 !important; font-size: 18px !important; }
.product-score-main span:last-child {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
}
.product-score-sub {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.product-score-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: var(--ink-lt) !important;
}

/* 価格 */
.product-price-section {
  text-align: right !important;
  flex-shrink: 0 !important;
}
.product-price {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
}
.product-price-unit {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  margin-top: 2px !important;
}

/* 購入ボタン */
.product-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.product-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 20px !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform .18s, box-shadow .18s, opacity .18s !important;
  position: relative !important;
}
.product-button:hover {
  transform: translateY(-1px) !important;
  opacity: .92 !important;
}
.product-button.amazon {
  background: #FF9900 !important;
  color: #fff !important;
}
.product-button.rakuten {
  background: #BF0000 !important;
  color: #fff !important;
}
.product-button.yahoo {
  background: #FF0033 !important;
  color: #fff !important;
}
.product-button-sale {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255,255,255,.25) !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
}

/* スペック */
.product-specs {
  background: var(--bg) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-top: 12px !important;
}
.product-specs-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--ink-lt) !important;
  margin-bottom: 10px !important;
}
.product-specs-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.product-spec-item {
  font-size: 12px !important;
  color: var(--ink-md) !important;
  background: var(--white) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ── 成分バッジ ───────────────────────── */
.component-badge {
  display: inline-block !important;
  background: var(--badge-c) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
}
.component-badge.oil { background: var(--badge-h) !important; }
.component-badge.silicone { background: var(--badge-i) !important; }

/* ── 評価テーブル ─────────────────────── */
.rating {
  background: var(--bg) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  margin: 16px 0 !important;
}
.rating-title {
  font-family: var(--serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--ink-lt) !important;
  margin-bottom: 10px !important;
}
.rating-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
}
.rating-item:last-child { border-bottom: none !important; }
.rating-label {
  width: 110px !important;
  flex-shrink: 0 !important;
  color: var(--ink-lt) !important;
  font-size: 12px !important;
}
.stars { color: #F7B731 !important; letter-spacing: 1px !important; }
.star  { color: #F7B731 !important; }

/* チェック・クロス */
.check {
  color: #4CAF82 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.cross {
  color: #E07070 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* ── ギャラリー ───────────────────────── */
.image-gallery-section { margin: 36px 0 !important; }
.image-gallery-title {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 14px !important;
}
.image-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.gallery-image {
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}

/* ── 商品画像サムネイル ───────────────── */
.product-image-gallery {
  display: flex !important;
  gap: 6px !important;
  margin: 10px 0 !important;
}
.product-image-thumbnail {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
  opacity: .8 !important;
  transition: opacity .15s !important;
}
.product-image-thumbnail:hover { opacity: 1 !important; }

/* ── レスポンシブ補足 ─────────────────── */
@media (max-width: 680px) {
  .supervisor-section {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .scoring-points {
    grid-template-columns: 1fr !important;
  }
  .product-header {
    grid-template-columns: 1fr !important;
  }
  .product-image,
  .product-image-placeholder {
    width: 100% !important;
    height: 200px !important;
  }
  .product-info-grid {
    flex-direction: column !important;
  }
  .product-price-section { text-align: left !important; }
  .image-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rating-label { width: 90px !important; }
}


/* ══════════════════════════════════════════════
   mybest風 記事UIシステム（保健室カラー版）
   v19追加分
══════════════════════════════════════════════ */

/* ─ CSS変数補足 ─────────────────────── */
:root {
  --mb-orange: #F79797;   /* mybest orange → 保健室コーラル */
  --mb-orange-lt: #FFF0F0;
  --mb-green:  #4CAF82;   /* スコア高評価 */
  --mb-border: rgba(237,232,227,.9);
  --mb-bg:     #FAFAF8;
  --mb-radius: 12px;
  --mb-shadow: 0 2px 16px rgba(0,0,0,.07);
  --mb-shadow-hover: 0 8px 32px rgba(0,0,0,.12);
}

/* ══ 1. スティッキータブナビ ═══════════ */
.mb-tab-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--white) !important;
  border-bottom: 2px solid var(--mb-border) !important;
  display: flex !important;
  margin: 0 -20px 32px !important;
  padding: 0 20px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}
.mb-tab-nav a {
  flex: 1 !important;
  text-align: center !important;
  padding: 14px 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-lt) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -2px !important;
  transition: color .15s, border-color .15s !important;
  white-space: nowrap !important;
}
.mb-tab-nav a:hover,
.mb-tab-nav a.active {
  color: var(--mb-orange) !important;
  border-bottom-color: var(--mb-orange) !important;
}

/* ══ 2. アフィリエイト開示バナー ═══════ */
.mb-disclosure {
  background: #FFF8F0 !important;
  border: 1px solid rgba(247,151,151,.3) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  color: var(--ink-lt) !important;
  line-height: 1.7 !important;
  margin-bottom: 28px !important;
}
.mb-disclosure strong { color: var(--ink-md) !important; }
.mb-disclosure a { color: var(--mb-orange) !important; }

/* ══ 3. 監修者カード（インライン） ═════ */
.mb-expert {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  background: var(--mb-bg) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius) !important;
  padding: 18px 20px !important;
  margin: 24px 0 !important;
}
.mb-expert-img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  /* グラデーションボーダー */
  border: 2.5px solid transparent !important;
  background: linear-gradient(#fff,#fff) padding-box, var(--g-logo) border-box !important;
  box-shadow: 0 3px 12px rgba(176,136,216,.2) !important;
  /* プレースホルダー画像の場合のフォールバック */
  background-color: #f3eff8 !important;
}
.mb-expert-role {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--mb-orange) !important;
  background: var(--mb-orange-lt) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  margin-bottom: 4px !important;
}
.mb-expert-name {
  font-family: var(--serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}
.mb-expert-name span {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  font-weight: 400 !important;
  margin-left: 6px !important;
}
.mb-expert-body {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--ink-md) !important;
}
/* 吹き出しコメント */
.mb-expert-quote {
  background: var(--mb-bg) !important;
  border-left: 4px solid var(--g-logo-r) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--ink-md) !important;
  position: relative !important;
}
.mb-expert-quote::before {
  content: '' !important;
  position: absolute !important;
  left: -4px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: var(--g-logo) !important;
  border-radius: 4px !important;
}

/* ══ 4. 検証ポイントセクション ═════════ */
.mb-verification {
  background: var(--g-sect) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin: 32px 0 !important;
}
.mb-verification-header {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}
.mb-verification-header em {
  font-style: normal !important;
  background: var(--g-logo) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.mb-point-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.mb-point-card {
  background: var(--white) !important;
  border-radius: var(--mb-radius) !important;
  padding: 18px 14px !important;
  text-align: center !important;
  box-shadow: var(--mb-shadow) !important;
}
.mb-point-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--serif) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}
.mb-point-icon {
  font-size: 28px !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.mb-point-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}
.mb-point-desc {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  line-height: 1.7 !important;
}
.mb-verification-note {
  background: var(--white) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  line-height: 1.7 !important;
  text-align: center !important;
  margin-top: 8px !important;
}

/* ══ 5. 選び方 番号付きセクション ══════ */
.mb-choice-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}
.mb-choice-heading {
  display: flex !important;
  align-items: center !important;
  margin: 40px 0 16px !important;
}
.mb-choice-heading h3 {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}
.mb-choice-heading h3::before { display: none !important; }
.mb-subheading {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  padding: 10px 16px !important;
  border-left: 4px solid transparent !important;
  border-image: var(--g-logo) 1 !important;
  background: var(--g-sect) !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 20px 0 12px !important;
}

/* ══ 6. 最近の更新バッジ ════════════════ */
.mb-update-log {
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius) !important;
  padding: 16px 20px !important;
  margin: 20px 0 !important;
}
.mb-update-log-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink-lt) !important;
  letter-spacing: .08em !important;
  margin-bottom: 10px !important;
}
.mb-update-item {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}
.mb-update-date {
  color: var(--ink-lt) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.mb-update-badge {
  background: var(--g-logo) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* ══ 7. ランキングカード（mybest風） ════ */
.mb-rank-card {
  background: var(--white) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: 16px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  box-shadow: var(--mb-shadow) !important;
  transition: box-shadow .22s !important;
}
.mb-rank-card:hover {
  box-shadow: var(--mb-shadow-hover) !important;
}
.mb-rank-header {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: var(--g-sect) !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--mb-border) !important;
}
/* 順位バッジ */
.mb-rank-badge {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: var(--ink-lt) !important;
  min-width: 50px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
}
.mb-rank-badge .rank-unit {
  font-size: 12px !important;
  font-weight: 400 !important;
}
.mb-rank-card:nth-child(1) .mb-rank-badge { color: #C8A84B !important; }
.mb-rank-card:nth-child(2) .mb-rank-badge { color: #909099 !important; }
.mb-rank-card:nth-child(3) .mb-rank-badge { color: #B07040 !important; }
.mb-rank-score-total {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.mb-rank-score-total .star { color: #F7B731 !important; font-size: 16px !important; }
.mb-rank-score-total .num {
  font-family: var(--serif) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
}
.mb-rank-score-total .denom {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
}
/* カード本体 */
.mb-rank-body {
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 0 !important;
}
.mb-rank-img-col {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  border-right: 1px solid var(--mb-border) !important;
}
.mb-rank-img {
  width: 140px !important;
  height: 140px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}
.mb-rank-img-fb {
  width: 140px !important;
  height: 140px !important;
  background: var(--g-sect) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: var(--ink-lt) !important;
  text-align: center !important;
}
/* 購入ボタン */
.mb-rank-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}
.mb-rank-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 10px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: opacity .15s, transform .15s !important;
}
.mb-rank-btn:hover { opacity: .88 !important; transform: translateY(-1px) !important; }
.mb-rank-btn.amazon  { background: #FF9900 !important; color: #fff !important; }
.mb-rank-btn.rakuten { background: #BF0000 !important; color: #fff !important; }
.mb-rank-btn.yahoo   { background: #FF0033 !important; color: #fff !important; }
.mb-rank-btn-sale {
  background: rgba(255,255,255,.25) !important;
  border-radius: 3px !important;
  font-size: 8px !important;
  padding: 1px 5px !important;
}
/* 詳細コンテンツ */
.mb-rank-info {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.mb-rank-tag {
  display: inline-block !important;
  background: var(--g-logo) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
}
.mb-rank-name {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.4 !important;
}
.mb-rank-brand {
  font-size: 12px !important;
  color: var(--ink-lt) !important;
  margin-top: -8px !important;
}
.mb-rank-price {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
}
.mb-rank-price span {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
}
/* スコアバー */
.mb-score-bars {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.mb-score-row {
  display: grid !important;
  grid-template-columns: 80px 1fr 56px !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 2px !important;
}
.mb-score-label {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  white-space: nowrap !important;
}
.mb-score-track {
  height: 6px !important;
  background: var(--mb-border) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.mb-score-fill {
  height: 100% !important;
  background: var(--g-logo) !important;
  border-radius: 4px !important;
}
.mb-score-val {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #F5A623 !important;
  text-align: right !important;
  white-space: nowrap !important;
  letter-spacing: -1px !important;
}
/* スペック chips */
.mb-rank-specs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.mb-spec-chip {
  font-size: 11px !important;
  color: var(--ink-md) !important;
  background: var(--mb-bg) !important;
  border: 1px solid var(--mb-border) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.mb-spec-chip.ok  { border-color: rgba(76,175,130,.4) !important; color: #2e7a55 !important; }
.mb-spec-chip.ng  { border-color: rgba(224,112,112,.4) !important; color: #c04040 !important; }
/* 一言ポイント */
.mb-rank-point {
  background: var(--mb-orange-lt) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: var(--ink-md) !important;
  border-left: 4px solid var(--mb-orange) !important;
}

/* ══ 8. ランキングリスト（TOPx概要） ════ */
.mb-rank-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius) !important;
  overflow: hidden !important;
  margin: 24px 0 !important;
}
.mb-rank-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--mb-border) !important;
  text-decoration: none !important;
  transition: background .15s !important;
}
.mb-rank-list-item:last-child { border-bottom: none !important; }
.mb-rank-list-item:hover { background: var(--mb-bg) !important; }
.mb-rank-list-num {
  font-family: var(--serif) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  min-width: 32px !important;
  text-align: center !important;
  color: var(--ink-lt) !important;
}
.mb-rank-list-item:nth-child(1) .mb-rank-list-num { color: #C8A84B !important; }
.mb-rank-list-item:nth-child(2) .mb-rank-list-num { color: #909099 !important; }
.mb-rank-list-item:nth-child(3) .mb-rank-list-num { color: #B07040 !important; }
.mb-rank-list-thumb {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  background: var(--g-sect) !important;
}
.mb-rank-list-text { flex: 1 !important; }
.mb-rank-list-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.4 !important;
}
.mb-rank-list-sub {
  font-size: 11px !important;
  color: var(--ink-lt) !important;
  margin-top: 2px !important;
}
.mb-rank-list-score {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.mb-rank-list-score .star { color: #F7B731 !important; font-size: 12px !important; }

/* ══ 9. 比較表（スペックテーブル） ══════ */
.mb-compare-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  margin: 20px 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(237,232,227,.9) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(134,174,234,.08) !important;
}
.mb-compare-table th {
  background: linear-gradient(135deg,rgba(134,174,234,.1) 0%,rgba(176,136,216,.1) 50%,rgba(247,151,151,.1) 100%) !important;
  padding: 12px 16px !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  border-right: 1px solid rgba(237,232,227,.7) !important;
  border-bottom: 2px solid rgba(237,232,227,.9) !important;
}
.mb-compare-table th:first-child { text-align: left !important; }
.mb-compare-table td {
  padding: 12px 16px !important;
  border-right: 1px solid rgba(237,232,227,.7) !important;
  border-bottom: 1px solid rgba(237,232,227,.7) !important;
  text-align: center !important;
  color: var(--ink-md) !important;
  background: #fff !important;
  vertical-align: middle !important;
}
.mb-compare-table td:first-child {
  text-align: left !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: rgba(249,247,245,.5) !important;
}
.mb-compare-table tr:last-child td { border-bottom: none !important; }
.mb-compare-table tr:hover td { background: rgba(134,174,234,.03) !important; }
.mb-compare-table tr:hover td:first-child { background: rgba(249,247,245,.7) !important; }
.mb-compare-table .check { color: #3DAA7A !important; font-weight: 800 !important; }
.mb-compare-table .cross { color: #E07070 !important; font-weight: 700 !important; }
.mb-compare-table .rank1 { background: rgba(200,168,75,.06) !important; }

/* ══ 10. 内部リンクカード ════════════════ */
.mb-link-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius) !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  text-decoration: none !important;
  transition: box-shadow .18s, transform .18s !important;
}
.mb-link-card:hover {
  box-shadow: var(--mb-shadow) !important;
  transform: translateY(-2px) !important;
}
.mb-link-card-img {
  width: 72px !important;
  height: 54px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  background: var(--g-sect) !important;
}
.mb-link-card-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.5 !important;
}
.mb-link-card-arrow {
  margin-left: auto !important;
  color: var(--ink-lt) !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

/* ══ 11. レスポンシブ ════════════════════ */
@media (max-width: 680px) {
  .mb-point-cards {
    grid-template-columns: 1fr !important;
  }
  .mb-rank-body {
    grid-template-columns: 1fr !important;
  }
  .mb-rank-img-col {
    border-right: none !important;
    border-bottom: 1px solid var(--mb-border) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .mb-rank-buttons {
    flex-direction: row !important;
  }
  .mb-rank-btn { flex: 1 !important; }
  .mb-compare-table { font-size: 10px !important; }
  .mb-compare-table th,
  .mb-compare-table td { padding: 8px 8px !important; }
  .mb-tab-nav a { font-size: 11px !important; padding: 12px 2px !important; }
}

/* ══ v19 ランキングカード視認性改善 ═══════════════ */
.mb-rank-name {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  line-height: 1.45 !important;
}
.mb-rank-brand {
  font-size: 12px !important;
  color: #888 !important;
  margin-top: -6px !important;
  margin-bottom: 4px !important;
}
.mb-rank-price {
  font-family: var(--sans) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
}
.mb-rank-price span {
  font-size: 11px !important;
  color: #999 !important;
  font-weight: 400 !important;
  margin-left: 4px !important;
}
.mb-score-label {
  font-size: 12px !important;
  color: #555 !important;
  font-weight: 600 !important;
}
.mb-score-val {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #333 !important;
}
.mb-rank-point {
  background: #FFF8F8 !important;
  border-left: 4px solid var(--mb-orange) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: #333 !important;
}
.mb-rank-point strong {
  display: block !important;
  font-size: 11px !important;
  color: var(--mb-orange) !important;
  letter-spacing: .04em !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}
.mb-rank-header {
  background: #FAFAF8 !important;
  border-bottom: 1px solid rgba(237,232,227,.9) !important;
  padding: 14px 20px !important;
}
.mb-rank-info {
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
/* Amazonのみボタン */
.mb-rank-btn.amazon {
  background: linear-gradient(135deg, #FF9900 0%, #FF7700 100%) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 11px 16px !important;
  border-radius: 8px !important;
  width: 100% !important;
  box-shadow: 0 2px 8px rgba(255,153,0,.3) !important;
  letter-spacing: .03em !important;
}
.mb-rank-btn.amazon:hover {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(255,153,0,.4) !important;
}

/* ══════════════════════════════════════════════
   ヘッダー追加強制上書き（記事ページ対策）v20
══════════════════════════════════════════════ */
/* スクロール固定・sticky時も同じグラデーション */
#header.is-fixed,
#header.is-sticky,
#header.is-scrolled,
.l-header.is-fixed,
.l-header.is-sticky,
.l-header.is-scrolled,
.l-header--fixed,
.l-headerTop,
.l-headerTop.is-fixed {
  background: linear-gradient(135deg,#86AEEA 0%,#B088D8 50%,#F79797 100%) !important;
}

/* SWELLのheaderBg要素（背景レイヤー）を透明に */
#header .c-headBg,
.l-header .c-headBg {
  background: transparent !important;
  opacity: 0 !important;
}

/* 念のため全クラス組み合わせを網羅 */
body.single #header,
body.single .l-header,
body.post-type-archive #header,
body.post-type-archive .l-header,
body.category #header,
body.category .l-header,
body.tag #header,
body.tag .l-header,
body.page #header,
body.page .l-header,
body.search #header,
body.search .l-header {
  background: linear-gradient(135deg,#86AEEA 0%,#B088D8 50%,#F79797 100%) !important;
}

/* ══════════════════════════════════════════════
   検索フォーム v22
══════════════════════════════════════════════ */
/* SWELL検索フォーム全体 */
.c-searchForm,
.p-header__search,
.widget_search form,
.search-form,
#searchform {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* 入力欄 */
.c-searchForm__input,
.search-form input[type="search"],
.widget_search input[type="search"],
#searchform input[type="search"],
#searchform input[type="text"],
input.search-field {
  width: 100% !important;
  padding: 11px 52px 11px 20px !important;
  border-radius: 32px !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--g-logo) border-box !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: 0 2px 12px rgba(134,174,234,.12) !important;
  transition: box-shadow .2s !important;
  font-family: var(--font) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.c-searchForm__input:focus,
.search-form input[type="search"]:focus,
.widget_search input[type="search"]:focus,
input.search-field:focus {
  box-shadow: 0 4px 20px rgba(134,174,234,.22) !important;
}

/* 送信ボタン（虫眼鏡） */
.c-searchForm__submit,
.search-form button[type="submit"],
.search-form input[type="submit"],
.widget_search input[type="submit"],
.widget_search button[type="submit"],
#searchform input[type="submit"],
#searchform button[type="submit"],
button.search-submit {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--g-logo) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transition: opacity .18s, transform .18s !important;
  color: #fff !important;
  font-size: 14px !important;
  box-shadow: 0 2px 8px rgba(134,174,234,.3) !important;
}
.c-searchForm__submit:hover,
.search-form button[type="submit"]:hover,
button.search-submit:hover {
  opacity: .85 !important;
  transform: translateY(-50%) scale(1.05) !important;
}

/* ══════════════════════════════════════════════
   タブナビ v22 - アクティブ状態を視覚的に明確化
══════════════════════════════════════════════ */
.mb-tab-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--white) !important;
  border: 1px solid rgba(237,232,227,.9) !important;
  border-radius: 12px !important;
  display: flex !important;
  margin: 0 0 32px !important;
  padding: 6px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  gap: 4px !important;
}
.mb-tab-nav a {
  flex: 1 !important;
  text-align: center !important;
  padding: 10px 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink-lt) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border: none !important;
  margin: 0 !important;
  transition: all .18s !important;
  white-space: nowrap !important;
  position: relative !important;
}
.mb-tab-nav a:hover {
  background: rgba(134,174,234,.08) !important;
  color: var(--ink-md) !important;
}
.mb-tab-nav a.active,
.mb-tab-nav a:first-child {
  background: var(--g-logo) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(134,174,234,.3) !important;
}

/* ══════════════════════════════════════════════
   モーション v27
   ゆっくり・やわらか（ブランドトーン統一）
══════════════════════════════════════════════ */

/* ── アクセシビリティ：動き軽減設定を優先 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. スクロールフェードイン（Intersection Observer用）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hk-fade,
.hk-fade-up,
.hk-fade-left,
.hk-fade-right {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-duration: 0.75s;
}
.hk-fade        { transform: none; }
.hk-fade-up     { transform: translateY(28px); }
.hk-fade-left   { transform: translateX(-24px); }
.hk-fade-right  { transform: translateX(24px); }

/* 遅延クラス */
.hk-delay-1 { transition-delay: 0.1s; }
.hk-delay-2 { transition-delay: 0.2s; }
.hk-delay-3 { transition-delay: 0.3s; }
.hk-delay-4 { transition-delay: 0.45s; }
.hk-delay-5 { transition-delay: 0.6s; }

/* JSでvisibleクラスが付いたら表示 */
.hk-fade.visible,
.hk-fade-up.visible,
.hk-fade-left.visible,
.hk-fade-right.visible {
  opacity: 1;
  transform: none;
}

/* SWELLの記事カード・投稿リストに自動適用 */
.p-postList__item,
.p-cardList__item,
.c-postCard,
.p-archiveList__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.65s cubic-bezier(0.22,0.61,0.36,1);
}
.p-postList__item.visible,
.p-cardList__item.visible,
.c-postCard.visible,
.p-archiveList__item.visible {
  opacity: 1;
  transform: none;
}
/* 連続カードの遅延（最大5枚） */
.p-postList__item:nth-child(1),.p-cardList__item:nth-child(1) { transition-delay:0s; }
.p-postList__item:nth-child(2),.p-cardList__item:nth-child(2) { transition-delay:.1s; }
.p-postList__item:nth-child(3),.p-cardList__item:nth-child(3) { transition-delay:.2s; }
.p-postList__item:nth-child(4),.p-cardList__item:nth-child(4) { transition-delay:.3s; }
.p-postList__item:nth-child(5),.p-cardList__item:nth-child(5) { transition-delay:.4s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. ページ読み込み時のヒーローアニメーション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ヘッダーロゴ */
.header__logo,
.l-header__logo,
.c-headLogo {
  animation: hk-slide-down 0.7s cubic-bezier(0.22,0.61,0.36,1) both;
}
/* ナビ */
.g-nav,
#g-nav,
.c-gnav {
  animation: hk-fade-in 0.8s 0.2s cubic-bezier(0.22,0.61,0.36,1) both;
}
/* トップページヒーロー（各要素を順番に） */
.hk-hero .hk-kicker   { animation: hk-slide-up 0.7s 0.1s cubic-bezier(0.22,0.61,0.36,1) both; }
.hk-hero h1           { animation: hk-slide-up 0.75s 0.2s cubic-bezier(0.22,0.61,0.36,1) both; }
.hk-hero .hk-hero-sub { animation: hk-slide-up 0.7s 0.35s cubic-bezier(0.22,0.61,0.36,1) both; }
.hk-hero .hk-hai      { animation: hk-slide-up 0.7s 0.5s cubic-bezier(0.22,0.61,0.36,1) both; }
.hk-hcard-a           { animation: hk-float-in 0.9s 0.4s cubic-bezier(0.22,0.61,0.36,1) both; }
.hk-hcard-b           { animation: hk-float-in 0.9s 0.55s cubic-bezier(0.22,0.61,0.36,1) both; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. ホバーアニメーション強化
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* カード全般：浮き上がり＋影 */
.hk-card,
.hk-hc,
.hk-sq,
.hk-yt-card,
.p-postList__item .p-postList__item-inner,
.p-cardList__item .c-postCard__inner,
.mb-rank-card,
.by-need-card {
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.35s cubic-bezier(0.22,0.61,0.36,1) !important;
}
.hk-card:hover,
.hk-hc:hover,
.hk-sq:hover,
.hk-yt-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(134,174,234,.22) !important;
}

/* ランキングカード */
.mb-rank-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(134,174,234,.18) !important;
}

/* 用途別カード */
.by-need-card {
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.3s cubic-bezier(0.22,0.61,0.36,1),
              border-color 0.3s !important;
}
.by-need-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(176,136,216,.15) !important;
  border-color: rgba(176,136,216,.3) !important;
}

/* ナビリンク */
.g-nav__item > a,
.globalNav__item > a,
#g-nav a {
  transition: background 0.25s, color 0.25s, transform 0.2s !important;
}
.g-nav__item > a:hover,
.globalNav__item > a:hover,
#g-nav a:hover {
  transform: translateY(-1px) !important;
}

/* タグバッジ */
a[rel="tag"],
.tagcloud a {
  transition: all 0.25s cubic-bezier(0.22,0.61,0.36,1) !important;
}
a[rel="tag"]:hover,
.tagcloud a:hover {
  transform: translateY(-2px) scale(1.04) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. ボタンのクリックエフェクト
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* グラデーションボタン全般 */
.hk-hai,
.hk-cta-btn,
.hk-more,
.mb-rank-btn,
.by-need-btn,
.wp-block-buttons .wp-block-button__link {
  transition: transform 0.2s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.2s cubic-bezier(0.22,0.61,0.36,1),
              opacity 0.2s !important;
  position: relative;
  overflow: hidden;
}
/* クリック時に沈み込む */
.hk-hai:active,
.hk-cta-btn:active,
.hk-more:active,
.mb-rank-btn:active,
.by-need-btn:active,
.wp-block-buttons .wp-block-button__link:active {
  transform: scale(0.96) translateY(1px) !important;
  box-shadow: none !important;
}
/* リップル波紋エフェクト */
.hk-hai::after,
.hk-cta-btn::after,
.mb-rank-btn.amazon::after,
.by-need-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0) !important;
  transition: background 0.4s !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
.hk-hai:active::after,
.hk-cta-btn:active::after,
.mb-rank-btn.amazon:active::after,
.by-need-btn:active::after {
  background: rgba(255,255,255,.18) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. セクション見出しのアンダーライン伸びるアニメ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hk-stitle.visible::after,
.p-entry__content h2.visible::before,
.entry-content h2.visible::before {
  animation: hk-line-grow 0.6s 0.3s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes hk-line-grow {
  from { width: 0; }
  to   { width: 64px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   キーフレーム定義
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes hk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hk-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hk-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hk-float-in {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════
   H2 インラインスタイル・is-style 完全上書き v28
   ─ background・color・border を全方向リセット
══════════════════════════════════════════════ */

/* style属性がついていても強制的に上書き */
h2[style],
.wp-block-heading[style],
.swell-block-heading[style],
.wp-block-swell-blocks-heading[style],
.p-entry__content h2[style],
.entry-content h2[style] {
  color: #2e2e2e !important;
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 2px solid rgba(237,232,227,1) !important;
}

/* SWELLのis-style-*バリアントを全リセット */
h2[class*="is-style-"],
.swell-block-heading[class*="is-style-"],
.wp-block-heading[class*="is-style-"],
h2.is-style-accent_left_border,
h2.is-style-accent_left_border_bold,
h2.is-style-bottom_border,
h2.is-style-inner_shadow,
h2.is-style-underline_grad,
h2.is-style-bg_accent,
h2.is-style-bg_main,
h2.is-style-none {
  color: #2e2e2e !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 2px solid rgba(237,232,227,1) !important;
  box-shadow: none !important;
  padding: 0 0 12px 0 !important;
}

/* SWELLがhas-*-background-colorクラスで背景色を付ける場合 */
h2[class*="has-"][class*="background"],
.wp-block-heading[class*="has-"][class*="background"],
.swell-block-heading[class*="has-"][class*="background"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* SWELLがhas-*-colorクラスで文字色を白にする場合 */
h2[class*="has-"][class*="-color"]:not([class*="background"]),
.wp-block-heading[class*="has-"][class*="-color"]:not([class*="background"]) {
  color: #2e2e2e !important;
}