/* ===================================================
   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. 全体背景：シックなダークネイビーベース */
body.page-id-1383 {
    background: radial-gradient(circle at 50% 15%, #1a102f 0%, #161b22 50%, #0d1117 100%) !important;
    background-attachment: fixed !important;
    color: #e2e8f0 !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: #ffffff !important;
    -webkit-text-fill-color: #ffffff !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(212, 175, 55, 0.3) !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: #d4af37 !important;
    -webkit-text-fill-color: #d4af37 !important;
    margin: 8px auto 0 auto !important;
    text-align: center !important;
}

/* 4. ヘッダー */
/* 4. ヘッダー（2重線を解消し1本線に統一） */
body.page-id-1383 header,
body.page-id-1383 header.wp-block-template-part,
body.page-id-1383 .wp-site-blocks > header {
    background: rgba(13, 17, 23, 0.92) !important;
    background-color: rgba(13, 17, 23, 0.92) !important;
    background-image: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 2px solid #d4af37 !important; /* 外枠の1本線のみ残す */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ヘッダー内部の全ブロック・グループの余計な下線・枠線を消去 */
body.page-id-1383 header * {
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

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

/* サイトタイトル（Quest Palette）の下線を消す */
body.page-id-1383 header :is(.wp-block-site-title a, a.wp-block-site-title__link) {
    text-decoration: none !important;
    border-bottom: none !important;
}

body.page-id-1383 header .wp-block-navigation :is(a, .wp-block-navigation-item__content) {
    color: #e2e8f0 !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;
    text-decoration: none !important;
}

body.page-id-1383 header .wp-block-navigation :is(a, .wp-block-navigation-item__content):hover {
    color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.15) !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: #94a3b8 !important;
}

/* ===================================================
   パーツ・カード部分（ダーク＆ゴールド）
=================================================== */
body.page-id-1383 .tarot-hub-container {
    max-width: 1040px;
    margin: 20px auto 60px auto;
    padding: 0 16px;
    color: #e2e8f0;
}

/* ヘッダーカード */
body.page-id-1383 .tarot-hub-header {
    text-align: center;
    padding: 44px 20px 32px;
    margin-bottom: 28px;
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}

body.page-id-1383 .tarot-sub-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    color: #d4af37;
    background: #0d1117;
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid #d4af37;
    margin-bottom: 14px;
    letter-spacing: 0.12em;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 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, #ffffff, #f3e8ff, #d4af37);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* 検索・フィルターエリア */
body.page-id-1383 .tarot-filter-wrapper {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !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;
    color: #94a3b8;
}

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

body.page-id-1383 .search-box input::placeholder {
    color: #64748b !important;
}

body.page-id-1383 .search-box input:focus {
    border-color: #d4af37 !important;
    background: #161b22 !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

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

body.page-id-1383 .sort-box select {
    background: #0d1117 !important;
    color: #f1f5f9 !important;
    border: 1px solid #30363d !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: 1px dashed #30363d;
    padding-top: 18px;
}

body.page-id-1383 .cat-tab {
    background: #0d1117 !important;
    color: #cbd5e1 !important;
    border: 1px solid #30363d !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: #1f2937 !important;
    border-color: #d4af37 !important;
    color: #ffffff !important;
}

body.page-id-1383 .cat-tab.active {
    background: linear-gradient(135deg, #d4af37, #aa7c11) !important;
    color: #0d1117 !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}

/* 占い個別カード */
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: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !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: #d4af37 !important;
    box-shadow: 0 14px 32px rgba(212, 175, 55, 0.2) !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: #4c1d95; color: #f472b6; border: 1px solid #7c3aed; }
body.page-id-1383 .work-badge { background: #1e3a8a; color: #38bdf8; border: 1px solid #2563eb; }
body.page-id-1383 .money-badge { background: #451a03; color: #facc15; border: 1px solid #b45309; }
body.page-id-1383 .tarot-badge { background: #2e1065; color: #e9d5ff; border: 1px solid #6b21a8; }

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

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

body.page-id-1383 .item-desc {
    font-size: 0.88rem;
    color: #94a3b8 !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: #64748b !important;
    border-top: none !important;
    padding-top: 0 !important;
}

body.page-id-1383 .no-results {
    text-align: center;
    padding: 40px;
    color: #64748b !important;
    background: #161b22 !important;
    border: 1px dashed #30363d !important;
    border-radius: 20px;
    font-weight: 700;
}







/* WordPressパスワード保護フォームの文字色とデザイン補正 */
.post-password-form,
form.post-password-form {
  background: #0d1322 !important;
  border: 1px solid #c5a059 !important;
  border-radius: 12px !important;
  padding: 35px 20px !important;
  max-width: 600px !important;
  margin: 50px auto !important;
  text-align: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* 案内文章の白色・黄金色化 */
.post-password-form p,
form.post-password-form p {
  color: #f3e5ab !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}

/* 「パスワード：」のラベル文字 */
.post-password-form label,
form.post-password-form label {
  color: #e0d5c1 !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

/* パスワード入力枠 */
.post-password-form input[type="password"],
form.post-password-form input[type="password"] {
  background: #050811 !important;
  color: #ffd700 !important;
  border: 1px solid #c5a059 !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  font-size: 16px !important;
  margin: 0 8px !important;
}

/* 「確定」ボタン */
.post-password-form input[type="submit"],
form.post-password-form input[type="submit"] {
  background: linear-gradient(135deg, #c5a059 0%, #8a6d3b 100%) !important;
  color: #0d1322 !important;
  font-weight: bold !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
}






/* ===================================================
   お申し込みページ（hexagram-career-order）専用・白背景化
=================================================== */

/* 1. 全体背景およびWordPressブロック要素の黒背景を上書きして白にする */
body.page-slug-hexagram-career-order,
body:has(.wpcf7),
body.page-slug-hexagram-career-order .wp-site-blocks,
body.page-slug-hexagram-career-order main,
body.page-slug-hexagram-career-order #page,
body.page-slug-hexagram-career-order #content,
body.page-slug-hexagram-career-order .site-content,
body.page-slug-hexagram-career-order .entry-content,
body.page-slug-hexagram-career-order .wp-block-group,
body.page-slug-hexagram-career-order div[class*="has-tertiary-background-color"],
body.page-slug-hexagram-career-order .has-background {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;
}

/* 2. ヘッダー・フッターの文字色・背景調整（白背景用） */
body.page-slug-hexagram-career-order header,
body.page-slug-hexagram-career-order footer {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.page-slug-hexagram-career-order header :is(.wp-block-site-title a, a.wp-block-site-title__link, .wp-block-navigation-item__content) {
    color: #1e293b !important;
}

/* 3. ページタイトルおよび本文の見出し文字を黒～ダークネイビーに */
body.page-slug-hexagram-career-order :is(h1, h2, h3, .wp-block-post-title, .entry-title) {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    text-shadow: none !important;
}

/* 4. Contact Form 7 フォーム全体の白背景用視認性調整 */
body.page-slug-hexagram-career-order .wpcf7 label {
    color: #1e293b !important;
    font-weight: bold !important;
}

body.page-slug-hexagram-career-order .wpcf7 input[type="text"],
body.page-slug-hexagram-career-order .wpcf7 input[type="email"] {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

body.page-slug-hexagram-career-order .wpcf7 input[type="text"]:focus,
body.page-slug-hexagram-career-order .wpcf7 input[type="email"]:focus {
    border-color: #0284c7 !important;
    background-color: #ffffff !important;
}

/* 5. 注意書きテキスト（明るい背景用） */
body.page-slug-hexagram-career-order .wpcf7 p {
    color: #0284c7 !important;
}




/* ===================================================
   PayPalお申し込みページ タイトル・ヘッダー上書きデザイン
=================================================== */

/* 1. ページ全体・ヘッダー・タイトル周辺の黒背景を完全に解除し、エレガントな明グラデーションにする */
body:has(.paypal-order-page),
body:has(iframe[name*="paypal"]),
.page-id-1583,
.page-id-1583 .wp-site-blocks,
.page-id-1583 main,
.page-id-1583 header,
.page-id-1583 header.wp-block-template-part,
.page-id-1583 .wp-block-group,
.page-id-1583 div[class*="has-tertiary-background-color"],
.page-id-1583 .has-background {
    background: linear-gradient(180deg, #f0f4f9 0%, #ffffff 100%) !important;
    background-color: #f0f4f9 !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. タイトル文字（「特別詳細レポート お申し込み...」）のフォントと色を洗練 */
.page-id-1583 :is(h1, h2, h3, .wp-block-post-title, .entry-title) {
    color: #1b2a4a !important; /* 深みのあるロイヤルネイビー */
    -webkit-text-fill-color: #1b2a4a !important;
    font-family: 'Shippori Mincho', 'Yu Mincho', 'Georgia', serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
    line-height: 1.5 !important;
    text-shadow: none !important;
    text-align: center !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
}

/* タイトル下のさりげない装飾ライン */
.page-id-1583 :is(h1, h2, h3, .wp-block-post-title, .entry-title)::after {
    content: "✧ PayPal Direct Payment ✧" !important;
    display: block !important;
    font-size: 12px !important;
    letter-spacing: 4px !important;
    color: #c5a059 !important;
    -webkit-text-fill-color: #c5a059 !important;
    margin: 10px auto 0 auto !important;
    font-family: sans-serif !important;
    font-weight: 600 !important;
}

/* 3. ヘッダーナビゲーション文字色の変更 */
.page-id-1583 header :is(.wp-block-site-title a, a.wp-block-site-title__link, .wp-block-site-title) {
    color: #1b2a4a !important;
    font-weight: bold !important;
}

.page-id-1583 header .wp-block-navigation :is(a, .wp-block-navigation-item__content) {
    color: #4a5568 !important;
    font-weight: 600 !important;
}

.page-id-1583 header .wp-block-navigation :is(a, .wp-block-navigation-item__content):hover {
    color: #c5a059 !important;
}

/* 4. 未分類などのカテゴリータグ非表示または薄色化 */
.page-id-1583 .wp-block-post-terms,
.page-id-1583 .wp-block-post-terms a {
    color: #a0aec0 !important;
    background: transparent !important;
}