/* ===================================================
   1. 通常の投稿ページやサイト全体のベース（黒背景）
=================================================== */
body,
.wp-site-blocks {
    background-color: #121417 !important;
}

.has-tertiary-background-color,
div[class*="has-tertiary-background-color"],
.has-background {
    background-color: #121417 !important;
}

header.wp-block-template-part,
.wp-site-blocks > header {
    background-color: #121417 !important;
}

header.wp-block-template-part a,
header.wp-block-template-part p,
header.wp-block-template-part span {
    color: #f0f2f5 !important;
}

.wp-block-post-title,
h1.wp-block-post-title,
h2.wp-block-post-title,
.has-foreground-color {
    color: #ffffff !important;
}


/* ===================================================
   2. 【全固定ページ共通】タイトル・コンテンツの中央寄せ
=================================================== */
.page .wp-block-group:has(.wp-block-post-title),
.wp-block-group:has(.wp-block-post-title),
.entry-header {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.page .wp-block-post-title,
.page h1.wp-block-post-title,
.page h2.wp-block-post-title,
.wp-block-post-title,
h1.wp-block-post-title,
h2.wp-block-post-title,
.entry-title {
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

.page .wp-block-post-content,
.page .entry-content,
.page .wp-block-columns,
.wp-block-post-content,
.entry-content,
.wp-block-columns {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

.page .wp-block-column,
.wp-block-column {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ===================================================
   3. Google Fonts
=================================================== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700&display=swap');


/* ===================================================
   4. タロット占い専用レイアウト（背景・フォント）
=================================================== */
body.page-id-829,
body:has(.is-tarot-layout),
body:has(.is-tarot-layout) .wp-site-blocks,
body:has(.is-tarot-layout) main {
    background: radial-gradient(circle at 50% 20%, #fff0f9 0%, #f3e5fc 50%, #e2d1fc 100%) !important;
    color: #4a3b5c !important;
    font-family: 'M PLUS Rounded 1c', sans-serif !important;
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

/* 3D Perspective container */
.perspective-1000 {
    perspective: 1200px;
}

/* Card Geometry */
body:has(.is-tarot-layout) .card-base {
    width: 160px;
    height: 250px;
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

@media (min-width: 640px) {
    body:has(.is-tarot-layout) .card-base {
        width: 180px;
        height: 280px;
    }
}

/* カード裏面（星空デザイン） */
body:has(.is-tarot-layout) .card-back {
    background: linear-gradient(135deg, #b19ffb 0%, #e8a2df 50%, #fbd5b5 100%) !important;
    border: 4px solid #fce38a;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.7), 0 10px 25px rgba(150, 100, 200, 0.3);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* カード表面 */
body:has(.is-tarot-layout) .card-front {
    background: linear-gradient(180deg, #fffbf5 0%, #fcecf5 100%) !important;
    border: 4px solid #f6d271;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 10px 30px rgba(246, 210, 113, 0.3), 0 0 20px rgba(255, 182, 193, 0.2);
}

/* カード反転アニメーション */
body:has(.is-tarot-layout) .card-base.flipped {
    transform: rotateY(180deg) scale(1.08) !important;
    z-index: 50 !important;
}


/* ===================================================
   5. ヘッダー・メニューバー（タロット専用・黒背景の完全無効化）
=================================================== */
body:has(.is-tarot-layout) header,
body:has(.is-tarot-layout) header.wp-block-template-part,
body:has(.is-tarot-layout) .wp-site-blocks > header,
body:has(.is-tarot-layout) .wp-block-group {
    background: rgba(255, 245, 253, 0.9) !important;
    background-color: rgba(255, 245, 253, 0.9) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 2px solid rgba(246, 210, 113, 0.7) !important;
    box-shadow: 0 4px 15px rgba(177, 159, 251, 0.15) !important;
}

/* タロットページのヘッダー内リンク文字 */
body:has(.is-tarot-layout) header :is(.wp-block-site-title a, a.wp-block-site-title__link, .wp-block-site-title) {
    color: #7c3aed !important;
    font-weight: 800 !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    text-shadow: 0 2px 8px rgba(124, 58, 237, 0.2) !important;
    background: transparent !important;
}

body:has(.is-tarot-layout) header .wp-block-navigation :is(a, .wp-block-navigation-item__content) {
    color: #6d4c87 !important;
    font-weight: 700 !important;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif !important;
    font-size: 0.95rem !important;
    transition: all 0.25s ease !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: transparent !important;
}

body:has(.is-tarot-layout) header .wp-block-navigation :is(a, .wp-block-navigation-item__content):hover {
    color: #db2777 !important;
    background: rgba(255, 182, 193, 0.3) !important;
}


/* ===================================================
   6. タロットページのタイトル・カテゴリー・中央寄せ調整
=================================================== */
body:has(.is-tarot-layout) .wp-block-group:has(.wp-block-post-title) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

body:has(.is-tarot-layout) .entry-header {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* 日付やカテゴリーを包んでいる親グループの背景を完全に透明にする */
body:has(.is-tarot-layout) .wp-block-group:has(.wp-block-post-terms),
body:has(.is-tarot-layout) .wp-block-group:has(.wp-block-post-date) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 日付やカテゴリーテキスト自体の調整 */
body:has(.is-tarot-layout) :is(.wp-block-post-date, .wp-block-post-terms) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #a894b8 !important;
    text-align: center !important;
}

body:has(.is-tarot-layout) .wp-block-post-terms a {
    color: #a894b8 !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* タロットページのタイトル本体 */
body:has(.is-tarot-layout) :is(h1.wp-block-post-title, h2.wp-block-post-title, .wp-block-post-title, h1, h2, .entry-title) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-text-fill-color: initial !important;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif !important;
    font-size: clamp(1.8rem, 3.8vw, 2.6rem) !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #db2777 !important;
    text-shadow: 0 3px 10px rgba(219, 39, 119, 0.2) !important;
    margin: 30px auto 15px auto !important;
    padding: 0 !important;
    width: 100% !important;
}

/* タイトル下のハートアクセントライン */
body:has(.is-tarot-layout) :is(h1.wp-block-post-title, h2.wp-block-post-title, .wp-block-post-title, h1, h2)::after {
    content: "✧ 💖 ✧" !important;
    display: block !important;
    font-size: 15px !important;
    letter-spacing: 10px !important;
    color: #f472b6 !important;
    -webkit-text-fill-color: #f472b6 !important;
    margin: 12px auto 0 auto !important;
    text-align: center !important;
    width: 100% !important;
}





/* ===================================================
   タロットページのフッター調整（内部の線も非表示にする）
=================================================== */
body:has(.is-tarot-layout) footer,
body:has(.is-tarot-layout) footer.wp-block-template-part,
body:has(.is-tarot-layout) .wp-site-blocks > footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
}

/* フッター内部のグループ等にある境界線をすべて消す */
body:has(.is-tarot-layout) footer * {
    border-top: none !important;
    border-bottom: none !important;
}

body:has(.is-tarot-layout) footer :is(p, span, a, div, .wp-block-navigation-item__content) {
    color: #8b739f !important;
}

body:has(.is-tarot-layout) footer a:hover {
    color: #db2777 !important;
}





/* ===================================================
   タロット仕事運・詳細ページ専用スタイル（安全版）
=================================================== */

/* 1. ページ全体のベース背景とフォント */
body:has(.is-tarot-work-layout),
body:has(.is-tarot-work-layout) .wp-site-blocks,
body:has(.is-tarot-work-layout) main {
    background: radial-gradient(circle at 50% 20%, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%) !important;
    color: #1e293b !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
}

/* 2. ヘッダーを透明化＆仕事運カラー */
body:has(.is-tarot-work-layout) header,
body:has(.is-tarot-work-layout) header.wp-block-template-part,
body:has(.is-tarot-work-layout) .wp-site-blocks > header {
    background: rgba(240, 249, 255, 0.92) !important;
    background-color: rgba(240, 249, 255, 0.92) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.08) !important;
}

body:has(.is-tarot-work-layout) header :is(.wp-block-site-title a, a.wp-block-site-title__link, .wp-block-site-title) {
    color: #0284c7 !important;
    font-weight: 800 !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    background: transparent !important;
}

body:has(.is-tarot-work-layout) header .wp-block-navigation :is(a, .wp-block-navigation-item__content) {
    color: #0369a1 !important;
    font-weight: 700 !important;
    background: transparent !important;
}
/* ===================================================
   タロット仕事運：ヘッダー完全調整（黒背景の解除）
=================================================== */

/* ヘッダー全体および内側のブロックの黒背景を完全に解除して透明感のある白にする */
body:has(.is-tarot-work-layout) header,
body:has(.is-tarot-work-layout) header.wp-block-template-part,
body:has(.is-tarot-work-layout) .wp-site-blocks > header,
body:has(.is-tarot-work-layout) header .wp-block-group,
body:has(.is-tarot-work-layout) header.has-background,
body:has(.is-tarot-work-layout) header.has-tertiary-background-color {
    background: rgba(240, 249, 255, 0.92) !important;
    background-color: rgba(240, 249, 255, 0.92) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 2px solid rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.1) !important;
}

/* サイトタイトル（Quest Palette） */
body:has(.is-tarot-work-layout) header :is(.wp-block-site-title a, a.wp-block-site-title__link, .wp-block-site-title) {
    color: #0284c7 !important;
    font-weight: 800 !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    text-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
    background: transparent !important;
}

/* メニューのリンク文字 */
body:has(.is-tarot-work-layout) header .wp-block-navigation :is(a, .wp-block-navigation-item__content) {
    color: #0369a1 !important;
    font-weight: 700 !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-size: 0.95rem !important;
    transition: all 0.25s ease !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: transparent !important;
}

/* ホバー時の効果 */
body:has(.is-tarot-work-layout) header .wp-block-navigation :is(a, .wp-block-navigation-item__content):hover {
    color: #0284c7 !important;
    background: rgba(186, 230, 253, 0.5) !important;
}
/* 3. タイトル・メタ情報エリアの調整（白い四角を解除） */
body:has(.is-tarot-work-layout) .entry-header,
body:has(.is-tarot-work-layout) .wp-block-group:has(.wp-block-post-title) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    margin: 0 auto !important;
}

body:has(.is-tarot-work-layout) .wp-block-group:has(.wp-block-post-terms),
body:has(.is-tarot-work-layout) .wp-block-group:has(.wp-block-post-date) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body:has(.is-tarot-work-layout) :is(.wp-block-post-date, .wp-block-post-terms),
body:has(.is-tarot-work-layout) .wp-block-post-terms a {
    color: #64748b !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* タイトル本体 */
body:has(.is-tarot-work-layout) :is(h1.wp-block-post-title, h2.wp-block-post-title, .wp-block-post-title, h1, .entry-title) {
    display: block !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-size: clamp(1.8rem, 3.8vw, 2.5rem) !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #0284c7 !important;
    text-shadow: 0 3px 10px rgba(2, 132, 199, 0.15) !important;
    margin: 25px auto 10px auto !important;
}

/* タイトル下の鞄マーク */
body:has(.is-tarot-work-layout) :is(h1.wp-block-post-title, h2.wp-block-post-title, .wp-block-post-title, h1, .entry-title)::after {
    content: "✧ 💼 ✧" !important;
    display: block !important;
    font-size: 15px !important;
    letter-spacing: 8px !important;
    color: #38bdf8 !important;
    margin: 10px auto 12px auto !important;
}

/* 4. 本文エリア（確実に表示させる設定） */
body:has(.is-tarot-work-layout) .entry-content,
body:has(.is-tarot-work-layout) .wp-block-post-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* 5. 恋愛運と同じ手法によるフッター調整 */
body:has(.is-tarot-work-layout) footer,
body:has(.is-tarot-work-layout) footer.wp-block-template-part,
body:has(.is-tarot-work-layout) .wp-site-blocks > footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
    margin-top: 40px !important;
}

body:has(.is-tarot-work-layout) footer * {
    border-top: none !important;
    border-bottom: none !important;
}

body:has(.is-tarot-work-layout) footer .wp-block-group {
    background: transparent !important;
    background-color: transparent !important;
}

body:has(.is-tarot-work-layout) footer :is(p, span, a, div, .wp-block-navigation-item__content) {
    color: #64748b !important;
}

body:has(.is-tarot-work-layout) footer a:hover {
    color: #0284c7 !important;
}




/* ===================================================
   page_id=1383（占いポータル一覧）くっきり可愛いメリハリStyle
=================================================== */

/* 1. 全体背景：色合いを深く・鮮やかにして白いカードとのコントラストを大幅UP */
body.page-id-1383 {
    background: radial-gradient(circle at 50% 15%, #ffe4f2 0%, #ebd5ff 50%, #d8befc 100%) !important;
    background-attachment: fixed !important;
    color: #372a45 !important;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif !important;
}

/* 2. 不要な内部背景の透明化 */
body.page-id-1383 .wp-site-blocks,
body.page-id-1383 main,
body.page-id-1383 .wp-block-group,
body.page-id-1383 .entry-content,
body.page-id-1383 div[class*="has-tertiary-background-color"],
body.page-id-1383 .has-background {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. 固定ページのタイトル（「テスト」や「占い一覧」など）を表示 */
body.page-id-1383 .entry-header,
body.page-id-1383 .wp-block-group:has(.wp-block-post-title) {
    display: block !important;
    background: transparent !important;
    text-align: center !important;
    margin: 20px auto 10px auto !important;
    padding: 0 !important;
    width: 100% !important;
}

body.page-id-1383 :is(h1.wp-block-post-title, h2.wp-block-post-title, .wp-block-post-title, .entry-title) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #be185d !important; /* 濃いローズピンク */
    -webkit-text-fill-color: #be185d !important;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif !important;
    font-size: clamp(1.8rem, 3.8vw, 2.5rem) !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-shadow: 0 3px 12px rgba(190, 24, 93, 0.25) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* タイトル下の水晶マーク */
body.page-id-1383 :is(h1.wp-block-post-title, h2.wp-block-post-title, .wp-block-post-title, .entry-title)::after {
    content: "✧ 🔮 ✧" !important;
    display: block !important;
    font-size: 16px !important;
    letter-spacing: 8px !important;
    color: #a855f7 !important;
    -webkit-text-fill-color: #a855f7 !important;
    margin: 8px auto 0 auto !important;
    text-align: center !important;
}

/* 4. ヘッダーをくっきり表示 */
body.page-id-1383 header,
body.page-id-1383 header.wp-block-template-part,
body.page-id-1383 .wp-site-blocks > header,
body.page-id-1383 header .wp-block-group {
    background: rgba(255, 248, 253, 0.92) !important;
    background-color: rgba(255, 248, 253, 0.92) !important;
    background-image: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 2px solid #f472b6 !important;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.15) !important;
}

body.page-id-1383 header :is(.wp-block-site-title a, a.wp-block-site-title__link, .wp-block-site-title) {
    color: #6d28d9 !important;
    font-weight: 800 !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    text-shadow: 0 2px 8px rgba(109, 40, 217, 0.2) !important;
    background: transparent !important;
}

body.page-id-1383 header .wp-block-navigation :is(a, .wp-block-navigation-item__content) {
    color: #581c87 !important;
    font-weight: 700 !important;
    font-family: 'Zen Maru Gothic', sans-serif !important;
    font-size: 0.95rem !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: transparent !important;
}

body.page-id-1383 header .wp-block-navigation :is(a, .wp-block-navigation-item__content):hover {
    color: #be185d !important;
    background: rgba(244, 114, 182, 0.25) !important;
}

/* 5. フッター調整 */
body.page-id-1383 footer,
body.page-id-1383 footer.wp-block-template-part,
body.page-id-1383 .wp-site-blocks > footer,
body.page-id-1383 footer .wp-block-group {
    background: transparent !important;
    background-color: transparent !important;
    border-top: none !important;
}

body.page-id-1383 footer :is(p, span, a, div, .wp-block-navigation-item__content) {
    color: #6b21a8 !important;
}


/* ===================================================
   パーツ・カード部分（くっきり立体感のあるカード枠）
=================================================== */
body.page-id-1383 .tarot-hub-container {
    max-width: 1040px;
    margin: 20px auto 60px auto;
    padding: 0 16px;
    color: #372a45;
}

/* ヘッダーカード */
body.page-id-1383 .tarot-hub-header {
    text-align: center;
    padding: 44px 20px 32px;
    margin-bottom: 28px;
    background: #ffffff !important;
    border: 2px solid #f472b6 !important; /* くっきりピンク枠 */
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(168, 85, 247, 0.18) !important; /* 影を強化 */
}

body.page-id-1383 .tarot-sub-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    color: #8b5cf6;
    background: #f3e8ff;
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid #c084fc;
    margin-bottom: 14px;
    letter-spacing: 0.12em;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}

body.page-id-1383 .tarot-hub-title {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, #be185d, #7e22ce);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-id-1383 .tarot-hub-lead {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.8;
    margin: 0;
    font-weight: 600;
}

/* 検索・フィルターエリア */
body.page-id-1383 .tarot-filter-wrapper {
    background: #ffffff !important;
    border: 2px solid #c084fc !important; /* くっきりパープル枠 */
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15) !important;
}

body.page-id-1383 .filter-top-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

body.page-id-1383 .search-box {
    position: relative;
    flex: 1;
    min-width: 240px;
}

body.page-id-1383 .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
}

body.page-id-1383 .search-box input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: #fcf5ff !important;
    border: 1px solid #c084fc !important;
    border-radius: 25px;
    color: #1f2937 !important;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
}

body.page-id-1383 .search-box input:focus {
    border-color: #a855f7 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

body.page-id-1383 .sort-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #4c1d95;
    font-weight: 700;
}

body.page-id-1383 .sort-box select {
    background: #fcf5ff !important;
    color: #3b0764 !important;
    border: 1px solid #c084fc !important;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}

body.page-id-1383 .filter-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 2px dashed #f0abfc; /* ダッシュ線を濃く */
    padding-top: 18px;
}

body.page-id-1383 .cat-tab {
    background: #fcf5ff !important;
    color: #6d28d9 !important;
    border: 1px solid #c084fc !important;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

body.page-id-1383 .cat-tab:hover {
    background: #f3e8ff !important;
    border-color: #a855f7 !important;
    transform: translateY(-2px);
}

body.page-id-1383 .cat-tab.active {
    background: linear-gradient(135deg, #d946ef, #9333ea) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.4);
}

/* 占い個別カード */
body.page-id-1383 .tarot-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

body.page-id-1383 .tarot-item-card {
    background: #ffffff !important;
    border: 2px solid #f472b6 !important; /* カード枠をピンクでくっきり */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15) !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.page-id-1383 .tarot-item-card:hover {
    transform: translateY(-6px);
    border-color: #db2777 !important;
    box-shadow: 0 14px 32px rgba(219, 39, 119, 0.28) !important;
}

body.page-id-1383 .item-card-inner {
    display: block;
    padding: 22px;
    text-decoration: none;
    color: inherit;
}

body.page-id-1383 .item-badge-wrap {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

body.page-id-1383 .item-cat-badge {
    font-size: 0.74rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
}

body.page-id-1383 .love-badge { background: #ffe4e6; color: #be185d; border: 1px solid #fecdd3; }
body.page-id-1383 .work-badge { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
body.page-id-1383 .money-badge { background: #fef9c3; color: #a16207; border: 1px solid #fef08a; }
body.page-id-1383 .tarot-badge { background: #f3e8ff; color: #7e22ce; border: 1px solid #e9d5ff; }

body.page-id-1383 .item-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #1f2937 !important;
    line-height: 1.4;
}

body.page-id-1383 .tarot-item-card:hover .item-title {
    color: #be185d !important;
}

body.page-id-1383 .item-desc {
    font-size: 0.88rem;
    color: #4b5563 !important;
    line-height: 1.6;
    margin: 0 0 18px 0;
}

body.page-id-1383 .item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280 !important;
    border-top: 1px solid #fbcfe8 !important;
    padding-top: 12px;
}

body.page-id-1383 .no-results {
    text-align: center;
    padding: 40px;
    color: #6b7280 !important;
    background: #ffffff !important;
    border: 2px dashed #f472b6 !important;
    border-radius: 20px;
    font-weight: 700;
}