/* 恋愛・ツインレイページ専用スタイル */

/* ヒーローセクション */
.love-hero-section {
    position: relative;
    min-height: 50vh;
    background-image: url('../images/card-love.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 80px;
}

.love-hero-section .hero-overlay {
    background: var(--hero-overlay-love);
}

.hero-icon i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    animation: heartbeat 1.5s ease infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* イントロダクション */
.intro-section {
    background: linear-gradient(180deg, #faf8fb 0%, #ffffff 100%);
}

.intro-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(251, 194, 235, 0.2);
    margin-bottom: 4rem;
}

/* 人気の恋愛エンジェルナンバー */
.popular-love-numbers {
    background: #ffffff;
    padding: 5rem 0;
    overflow: visible;
}

.popular-love-numbers .container {
    padding-left: 2rem;
    padding-right: 2rem;
}

.popular-love-numbers .row {
    margin-left: -1rem;
    margin-right: -1rem;
}

.popular-love-numbers .row > [class*="col-"] {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 2rem;
}

.love-number-card {
    background: linear-gradient(145deg, #ffffff 0%, #fef5fb 100%);
    border-radius: 25px;
    padding: 2.5rem;
    height: 100%;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.love-number-card:hover {
    transform: translateY(-10px);
    border-color: rgba(251, 194, 235, 0.5);
    box-shadow: 0 15px 40px rgba(251, 194, 235, 0.3);
}

/* カード上方部分のリンク */
.number-badge-wrapper-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.number-badge-wrapper-link:hover {
    opacity: 0.9;
}

.number-badge-wrapper {
    margin: -2.5rem -2.5rem 1.5rem -2.5rem;
    padding: 2rem 2.5rem 2.5rem 2.5rem;
    background-size: cover;
    background-position: center;
    border-radius: 25px 25px 0 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.number-badge-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--theme-overlay-crush);
    z-index: 1;
}

/* angel-basic-meaning.htmlのカードは紫系のオーバーレイ（総合的なメッセージページの色） */
body:has(.angel-basic-meaning-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-overall);
}

/* car-plates.htmlのカードも紫系のオーバーレイ（総合的なメッセージページの色） */
body:has(.car-plates-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-overall);
}

/* birthday-numbers.htmlのカードは紫系のオーバーレイ（総合的なメッセージページの色） */
body:has(.birthday-numbers-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-overall);
}

/* zoro-meaning.htmlのカードは紫系のオーバーレイ（総合的なメッセージページの色） */
body:has(.zoro-meaning-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-overall);
}

/* mirror-numbers.htmlのカードは紫系のオーバーレイ（総合的なメッセージページの色） */
body:has(.mirror-numbers-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-overall);
}

/* master-numbers.htmlのカードは紫系のオーバーレイ（総合的なメッセージページの色） */
body:has(.master-numbers-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-overall);
}

/* often-seen-numbers.htmlのカードは紫系のオーバーレイ（総合的なメッセージページの色） */
body:has(.often-seen-numbers-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-overall);
}

/* receipt-numbers.htmlのカードは黄色系のオーバーレイ（金運ページの色） */
body:has(.receipt-numbers-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-money);
}

/* clock-signs.htmlのカードは紫系のオーバーレイ（スピリチュアルページの色） */
body:has(.clock-signs-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-spiritual);
}

.number-badge {
    display: block;
    font-family: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'Yu Mincho Medium', 'MS Mincho', 'MS PMincho', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
}

.number-badge-wrapper .card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff !important;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

/* 各カードの上方エリアに対応する背景画像 */
.card-1111 .number-badge-wrapper {
    background-image: url('../images/money-1111.jpg');
}

.card-2222 .number-badge-wrapper {
    background-image: url('../images/money-2222.jpg');
}

.card-333 .number-badge-wrapper {
    background-image: url('../images/money-333.jpg');
}

.card-444 .number-badge-wrapper {
    background-image: url('../images/money-444.jpg');
}

.card-555 .number-badge-wrapper {
    background-image: url('../images/money-555.jpg');
}

.card-22 .number-badge-wrapper {
    background-image: url('../images/hero-elegant-2.jpg');
}

.card-1234 .number-badge-wrapper {
    background-image: url('../images/hero-elegant.jpg');
}

.card-8888 .number-badge-wrapper {
    background-image: url('../images/money-8888.jpg');
}

.card-777 .number-badge-wrapper {
    background-image: url('../images/hero-777-overall.jpg');
}

.card-888 .number-badge-wrapper {
    background-image: url('../images/money-8888.jpg');
}

.card-999 .number-badge-wrapper {
    background-image: url('../images/card-spirit.jpg');
}

.card-666 .number-badge-wrapper {
    background-image: url('../images/card-spiritual.jpg');
}

.card-000 .number-badge-wrapper {
    background-image: url('../images/hero-bg.jpg');
}

/* 一桁の数字 1-9 の背景画像 */
.card-1 .number-badge-wrapper {
    background-image: url('../images/hero-1.jpg');
}

.card-2 .number-badge-wrapper {
    background-image: url('../images/hero-2.jpg');
}

.card-3 .number-badge-wrapper {
    background-image: url('../images/hero-3.jpg');
}

.card-4 .number-badge-wrapper {
    background-image: url('../images/hero-4.jpg');
}

.card-5 .number-badge-wrapper {
    background-image: url('../images/hero-5.jpg');
}

.card-6 .number-badge-wrapper {
    background-image: url('../images/hero-6.jpg');
}

.card-7 .number-badge-wrapper {
    background-image: url('../images/hero-7.jpg');
}

.card-8 .number-badge-wrapper {
    background-image: url('../images/hero-8.jpg');
}

.card-9 .number-badge-wrapper {
    background-image: url('../images/hero-9.jpg');
}

.card-1212 .number-badge-wrapper {
    background-image: url('../images/hero-elegant-2.jpg');
}

.card-2121 .number-badge-wrapper {
    background-image: url('../images/hero-elegant.jpg');
}

.card-1221 .number-badge-wrapper {
    background-image: url('../images/hero-elegant-2.jpg');
}

.card-2112 .number-badge-wrapper {
    background-image: url('../images/hero-elegant.jpg');
}

.love-number-card-content .card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #d4478c;
    margin-bottom: 1rem;
}

.love-number-card .card-text {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.meaning-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.meaning-list li {
    padding: 0.5rem 0;
    color: #555;
    font-size: 0.95rem;
    position: relative;
    padding-left: 1.5rem;
}

.meaning-list li::before {
    content: '♡';
    position: absolute;
    left: 0;
    color: #fbc2eb;
    font-size: 1.1rem;
}

/* テーマ別セクション */
.themes-section {
    background: linear-gradient(180deg, #ffffff 0%, #faf8fb 100%);
    padding: 5rem 0;
}

.theme-card {
    position: relative;
    min-height: 450px;
    height: auto;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.theme-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.theme-card:hover::before {
    transform: scale(1.05);
}

.card-twinflame::before {
    background-image: url('../images/card-spiritual.jpg');
}

.card-crush::before {
    background-image: url('../images/card-love.jpg');
}

.card-reunion::before {
    background-image: url('../images/hero-elegant-pink.jpg');
}

.card-fulfillment::before {
    background-image: url('../images/hero-stars.jpg');
}

.card-soulmate::before {
    background-image: url('../images/hero-elegant.jpg');
}

.card-silent::before {
    background-image: url('../images/hero-elegant-2.jpg');
}

/* 恋愛ページのテーマ別ガイドのカード背景画像
   簡素化: より具体的なセレクタを使用し、複雑なネガティブセレクタを削除 */
body:has(.love-hero-section:not(.money-hero-section):not(.spiritual-hero-section):not(.numbers-hero-section):not(.daily-hero-section):not(.about-hero-section)) .card-twinflame::before {
    background-image: url('../images/love-twinflame.jpg');
}

body:has(.love-hero-section:not(.money-hero-section):not(.spiritual-hero-section):not(.numbers-hero-section):not(.daily-hero-section):not(.about-hero-section)) .card-crush::before {
    background-image: url('../images/love-crush.jpg');
}

body:has(.love-hero-section:not(.money-hero-section):not(.spiritual-hero-section):not(.numbers-hero-section):not(.daily-hero-section):not(.about-hero-section)) .card-reunion::before {
    background-image: url('../images/love-reunion.jpg');
}

body:has(.love-hero-section:not(.money-hero-section):not(.spiritual-hero-section):not(.numbers-hero-section):not(.daily-hero-section):not(.about-hero-section)) .card-fulfillment::before {
    background-image: url('../images/love-fulfillment.jpg');
}

body:has(.love-hero-section:not(.money-hero-section):not(.spiritual-hero-section):not(.numbers-hero-section):not(.daily-hero-section):not(.about-hero-section)) .card-soulmate::before {
    background-image: url('../images/love-soulmate.jpg');
}

body:has(.love-hero-section:not(.money-hero-section):not(.spiritual-hero-section):not(.numbers-hero-section):not(.daily-hero-section):not(.about-hero-section)) .card-silent::before {
    background-image: url('../images/love-silent.jpg');
}

/* 日常のサインページ「エンジェルナンバーが現れる場所」用カード背景画像を文言に合わせて上書き */
/* 車のナンバープレート：道・移動を連想させる落ち着いた背景 */
body:has(.daily-hero-section) .card-twinflame::before {
    background-image: url('../images/daily-car-plate.jpg');
}

/* レシートの数字：お金・数字の動きをイメージしたグラフ系背景 */
body:has(.daily-hero-section) .card-crush::before {
    background-image: url('../images/daily-receipt.jpg');
}

/* 時計の時間：時間の流れ・転機をイメージした柔らかいグラデーション背景 */
body:has(.daily-hero-section) .card-reunion::before {
    background-image: url('../images/daily-clock.jpg');
}

/* よく見る数字：星空のように散りばめられた光で、頻出するサインを表現 */
body:has(.daily-hero-section) .card-fulfillment::before {
    background-image: url('../images/daily-often-seen.jpg');
}

/* 頻繁に現れる数字：連続した光のラインで、繰り返し現れるテーマを表現 */
body:has(.daily-hero-section) .card-soulmate::before {
    background-image: url('../images/daily-frequently.jpg');
}

/* シンクロニシティ：宇宙・高次とのつながりをイメージしたスピリチュアルな背景 */
body:has(.daily-hero-section) .card-silent::before {
    background-image: url('../images/daily-synchronicity.jpg');
}

/* シンクロニシティページ「シンクロニシティの例とエンジェルナンバー」用カード背景画像 */
/* 数字の一致：数字が揃う様子を表現した背景 */
body:has(.synchronicity-hero-section) .card-twinflame::before {
    background-image: url('../images/daily-receipt.jpg');
}

/* 人との再会：人との繋がりを表現した背景 */
body:has(.synchronicity-hero-section) .card-crush::before {
    background-image: url('../images/daily-frequently.jpg');
}

/* タイミングの一致：時間の流れとタイミングを表現した背景 */
body:has(.synchronicity-hero-section) .card-reunion::before {
    background-image: url('../images/daily-clock.jpg');
}

/* よく見る数字ページ「よく見る数字のパターンと意味」用カード背景画像 */
/* 同じ数字：繰り返しを表現した背景 */
body:has(.often-seen-numbers-hero-section) .card-twinflame::before {
    background-image: url('../images/daily-often-seen.jpg');
}

/* 複数の数字：組み合わせを表現した背景 */
body:has(.often-seen-numbers-hero-section) .card-crush::before {
    background-image: url('../images/daily-frequently.jpg');
}

/* 突然現れる数字：転機を表現した背景 */
body:has(.often-seen-numbers-hero-section) .card-reunion::before {
    background-image: url('../images/daily-synchronicity.jpg');
}

/* 意識して見る数字：選択を表現した背景 */
body:has(.often-seen-numbers-hero-section) .card-fulfillment::before {
    background-image: url('../images/daily-clock.jpg');
}

/* 頻繁に現れる数字ページ「頻繁に現れる数字のパターン」用カード背景画像 */
/* 短期間に集中：集中した変化を表現した背景 */
body:has(.frequently-appearing-numbers-hero-section) .card-twinflame::before {
    background-image: url('../images/daily-synchronicity.jpg');
}

/* 長期間続く：長期的なテーマを表現した背景 */
body:has(.frequently-appearing-numbers-hero-section) .card-crush::before {
    background-image: url('../images/daily-often-seen.jpg');
}

/* 特定の場面で：シチュエーションを表現した背景 */
body:has(.frequently-appearing-numbers-hero-section) .card-reunion::before {
    background-image: url('../images/daily-frequently.jpg');
}

.theme-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* テーマカードオーバーレイ - CSS変数を使用 */
.card-twinflame .theme-overlay {
    background: var(--theme-overlay-twinflame);
}

.card-crush .theme-overlay {
    background: var(--theme-overlay-crush);
}

.card-reunion .theme-overlay {
    background: var(--theme-overlay-reunion);
}

.card-fulfillment .theme-overlay {
    background: var(--theme-overlay-fulfillment);
}

.card-soulmate .theme-overlay {
    background: var(--theme-overlay-soulmate);
}

.card-silent .theme-overlay {
    background: var(--theme-overlay-silent);
}

/* 金運ページのテーマ別ガイドのカード背景画像 */
body:has(.money-hero-section) .card-twinflame::before {
    background-image: url('../images/money-lottery.jpg');
}

body:has(.money-hero-section) .card-crush::before {
    background-image: url('../images/money-gold.jpg');
}

body:has(.money-hero-section) .card-reunion::before {
    background-image: url('../images/money-business.jpg');
}

body:has(.money-hero-section) .card-fulfillment::before {
    background-image: url('../images/money-career.jpg');
}

body:has(.money-hero-section) .card-soulmate::before {
    background-image: url('../images/money-graph.jpg');
}

body:has(.money-hero-section) .card-silent::before {
    background-image: url('../images/money-success.jpg');
}

/* 金運ページのテーマ別ガイドのカードオーバーレイ - 全て黄色系（CSS変数を使用） */
/* 金運ページのテーマ別ガイドのカードオーバーレイ - love.htmlやspiritual.htmlと同様にバリエーションを持たせる */
body:has(.money-hero-section) .card-twinflame .theme-overlay {
    background: var(--theme-overlay-twinflame);
}

body:has(.money-hero-section) .card-crush .theme-overlay {
    background: var(--theme-overlay-crush);
}

body:has(.money-hero-section) .card-reunion .theme-overlay {
    background: var(--theme-overlay-reunion);
}

body:has(.money-hero-section) .card-fulfillment .theme-overlay {
    background: var(--theme-overlay-fulfillment);
}

body:has(.money-hero-section) .card-soulmate .theme-overlay {
    background: var(--theme-overlay-soulmate);
}

body:has(.money-hero-section) .card-silent .theme-overlay {
    background: var(--theme-overlay-silent);
}

.theme-content {
    position: relative;
    z-index: 2;
    min-height: 100%;
    padding: 2.5rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.theme-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.95;
}

.theme-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #ffffff;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
}

.theme-description {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    line-height: 1.7;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.theme-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.theme-list li {
    padding: 0.6rem 0;
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.95;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.theme-list li::before {
    content: '✦ ';
    margin-right: 0.5rem;
    opacity: 0.8;
    position: relative;
    z-index: 1;
}

.theme-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(251, 194, 235, 0.3);
}

/* FAQ セクション */
.faq-section {
    background: #ffffff;
    padding: 5rem 0;
}

.accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.accordion-button {
    background: linear-gradient(145deg, #ffffff 0%, #fef5fb 100%);
    color: #d4478c;
    font-weight: 600;
    font-size: 1.05rem;
    padding: 1.5rem;
    border: none;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    color: #ffffff;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-button::after {
    filter: brightness(0) saturate(100%) invert(48%) sepia(93%) saturate(1000%) hue-rotate(295deg);
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(100%);
}

.accordion-body {
    padding: 1.5rem;
    background: #ffffff;
    color: #555;
    line-height: 1.8;
}

/* CTA セクション */
.cta-section {
    background: var(--gradient-love);
    color: #ffffff;
    padding: 5rem 0;
}

.cta-section .section-title {
    color: #ffffff;
}

.cta-section .lead {
    color: rgba(255, 255, 255, 0.95);
}

.cta-section .btn-primary {
    background: #ffffff;
    color: #c4a5c1;
    border: none;
    font-weight: 600;
}

.cta-section .btn-primary i {
    color: #c4a5c1;
}

.cta-section .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #c4a5c1;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cta-section .btn-primary:hover i {
    color: #c4a5c1;
}

/* 金運ページのCTAセクション - 黄色系 */
body:has(.money-hero-section) .cta-section {
    background: var(--hero-overlay-money);
}

body:has(.money-hero-section) .cta-section .btn-primary {
    background: #ffffff;
    color: #d6a25d;
    border: none;
    font-weight: 600;
}

body:has(.money-hero-section) .cta-section .btn-primary i {
    color: #d6a25d;
}

body:has(.money-hero-section) .cta-section .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(214, 162, 93, 0.3);
}

body:has(.money-hero-section) .cta-section .btn-primary:hover i {
    color: #d6a25d;
}

/* スピリチュアルページのCTAセクション - 紫系 */
body:has(.spiritual-hero-section) .cta-section {
    background: var(--gradient-spiritual);
}

body:has(.spiritual-hero-section) .cta-section .btn-primary {
    background: #ffffff;
    color: #764ba2;
    border: none;
    font-weight: 600;
}

body:has(.spiritual-hero-section) .cta-section .btn-primary i {
    color: #764ba2;
}

body:has(.spiritual-hero-section) .cta-section .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #764ba2;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(118, 75, 162, 0.3);
}

body:has(.spiritual-hero-section) .cta-section .btn-primary:hover i {
    color: #764ba2;
}

/* レスポンシブ */
@media (max-width: 992px) {
    .love-hero-section {
        min-height: 45vh;
    }
    
    .theme-card {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .love-hero-section {
        min-height: 40vh;
        padding-top: 80px;
        padding-bottom: 60px;
    }
    
    .hero-icon i {
        font-size: 3rem;
    }
    
    .intro-card {
        padding: 2rem;
    }
    
    .popular-love-numbers .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .popular-love-numbers .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .popular-love-numbers .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .love-number-card {
        padding: 2rem;
    }
    
    .number-badge-wrapper {
        margin: -2rem -2rem 1.2rem -2rem;
        padding: 2.5rem 2rem;
    }
    
    .number-badge {
        font-size: 2rem;
    }
    
    .theme-card {
        min-height: 380px;
    }
    
    .theme-content {
        padding: 2rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .theme-title {
        font-size: 1.6rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
    }
    
    .theme-list {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .theme-list li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 576px) {
    .popular-love-numbers .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .popular-love-numbers .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .popular-love-numbers .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .number-badge-wrapper {
        margin: -2rem -2rem 1rem -2rem;
        padding: 2rem 1.5rem;
    }

    .number-badge {
        font-size: 1.8rem;
    }
    
    .theme-card {
        min-height: 350px;
    }
    
    .theme-title {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
    }
    
    .theme-icon {
        font-size: 2.5rem;
    }
    
    .theme-list {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .theme-list li {
        font-size: 0.9rem;
        padding: 0.4rem 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .accordion-button {
        font-size: 0.95rem;
        padding: 1.2rem;
    }
}

/* 金運ページ専用スタイル */
/* 金運ページ専用スタイル - !importantを削除 */
.love-hero-section.money-hero-section {
    background-image: url('../images/card-wealth.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.money-hero-section .hero-overlay {
    background: var(--hero-overlay-money);
}

/* 金運ページのカードヘッダーを黄色系に */
body:has(.money-hero-section) .number-badge-wrapper::before {
    background: linear-gradient(135deg, rgba(255, 216, 155, 0.7) 0%, rgba(214, 162, 93, 0.7) 100%);
}

/* 金運ページのカード数字を確実に白に */
body:has(.money-hero-section) .number-badge-wrapper .number-badge {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

body:has(.money-hero-section) .number-badge-wrapper .card-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}


/* 数字の意味ページ専用スタイル */
/* 数字の意味ページ専用スタイル */
.love-hero-section.numbers-hero-section {
    background-image: url('../images/card-numbers.jpg');
}

.love-hero-section.numbers-hero-section .hero-overlay {
    background: var(--hero-overlay-numbers);
}

/* 数字の意味ページ「数字の種類と意味」カード背景画像 */
body:has(.numbers-hero-section) .card-twinflame::before {
    background-image: url('../images/numbers-repeating.jpg');
}

body:has(.numbers-hero-section) .card-crush::before {
    background-image: url('../images/numbers-mirror.jpg');
}

body:has(.numbers-hero-section) .card-reunion::before {
    background-image: url('../images/numbers-calculator.jpg');
}

body:has(.numbers-hero-section) .card-fulfillment::before {
    background-image: url('../images/numbers-birthday.jpg');
}

body:has(.numbers-hero-section) .card-soulmate::before {
    background-image: url('../images/numbers-clock.jpg');
}

body:has(.numbers-hero-section) .card-silent::before {
    background-image: url('../images/numbers-master.jpg');
}

/* 日常のサインページ専用スタイル */
/* 日常のサインページ専用スタイル */
.love-hero-section.daily-hero-section {
    background-image: url('../images/card-daily.jpg');
}

.love-hero-section.daily-hero-section .hero-overlay {
    background: var(--hero-overlay-daily);
}

/* 車のナンバープレートページ専用スタイル */
.love-hero-section.car-plates-hero-section {
    background-image: url('../images/daily-car-plate.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.car-plates-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.92) 0%, rgba(118, 75, 162, 0.92) 100%);
}

/* レシートの数字ページ専用スタイル */
.love-hero-section.receipt-numbers-hero-section {
    background-image: url('../images/daily-receipt.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.receipt-numbers-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(251, 194, 235, 0.92) 0%, rgba(246, 133, 186, 0.92) 100%);
}

/* 時計の時間ページ専用スタイル */
.love-hero-section.clock-signs-hero-section {
    background-image: url('../images/daily-clock.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.clock-signs-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 158, 128, 0.92) 0%, rgba(255, 99, 132, 0.92) 100%);
}

/* よく見る数字ページ専用スタイル */
.love-hero-section.often-seen-numbers-hero-section {
    background-image: url('../images/daily-often-seen.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.often-seen-numbers-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.92) 0%, rgba(144, 113, 208, 0.92) 100%);
}

/* 頻繁に現れる数字ページ専用スタイル */
.love-hero-section.frequently-appearing-numbers-hero-section {
    background-image: url('../images/daily-frequently.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.frequently-appearing-numbers-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.92) 0%, rgba(255, 105, 180, 0.92) 100%);
}

/* シンクロニシティページ専用スタイル */
.love-hero-section.synchronicity-hero-section {
    background-image: url('../images/daily-synchronicity.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.synchronicity-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.92) 0%, rgba(100, 120, 200, 0.92) 100%);
}

/* ゾロ目の意味ページ専用スタイル */
.love-hero-section.numbers-hero-section.zoro-meaning-hero-section {
    background-image: url('../images/numbers-repeating.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.numbers-hero-section.zoro-meaning-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.92) 0%, rgba(118, 75, 162, 0.92) 100%);
}

/* ミラーナンバーページ専用スタイル */
.love-hero-section.numbers-hero-section.mirror-numbers-hero-section {
    background-image: url('../images/numbers-mirror.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.numbers-hero-section.mirror-numbers-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(251, 194, 235, 0.92) 0%, rgba(246, 133, 186, 0.92) 100%);
}

/* 計算方法ページ専用スタイル */
.love-hero-section.numbers-hero-section.calculation-method-hero-section {
    background-image: url('../images/numbers-calculator.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.numbers-hero-section.calculation-method-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 158, 128, 0.92) 0%, rgba(255, 99, 132, 0.92) 100%);
}

/* 誕生日の数字ページ専用スタイル */
.love-hero-section.numbers-hero-section.birthday-numbers-hero-section {
    background-image: url('../images/numbers-birthday.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.numbers-hero-section.birthday-numbers-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.92) 0%, rgba(144, 113, 208, 0.92) 100%);
}

/* 時計の数字ページ専用スタイル */
.love-hero-section.numbers-hero-section.clock-numbers-hero-section {
    background-image: url('../images/numbers-clock.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.numbers-hero-section.clock-numbers-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.92) 0%, rgba(255, 105, 180, 0.92) 100%);
}

/* マスターナンバーページ専用スタイル */
.love-hero-section.numbers-hero-section.master-numbers-hero-section {
    background-image: url('../images/numbers-master.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.numbers-hero-section.master-numbers-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.92) 0%, rgba(100, 120, 200, 0.92) 100%);
}

/* 基本的な意味ページ専用スタイル */
.love-hero-section.about-hero-section.angel-basic-meaning-hero-section {
    background-image: url('../images/about-basic-meaning.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.about-hero-section.angel-basic-meaning-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.92) 0%, rgba(118, 75, 162, 0.92) 100%);
}

/* 歴史と由来ページ専用スタイル */
.love-hero-section.about-hero-section.angel-history-hero-section {
    background-image: url('../images/about-history.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.about-hero-section.angel-history-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(251, 194, 235, 0.92) 0%, rgba(246, 133, 186, 0.92) 100%);
}

/* 天使からのメッセージページ専用スタイル */
.love-hero-section.about-hero-section.angel-messages-hero-section {
    background-image: url('../images/about-messages.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.about-hero-section.angel-messages-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 158, 128, 0.92) 0%, rgba(255, 99, 132, 0.92) 100%);
}

/* 数字の解釈方法ページ専用スタイル */
.love-hero-section.about-hero-section.angel-interpretation-hero-section {
    background-image: url('../images/about-interpretation.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.about-hero-section.angel-interpretation-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.92) 0%, rgba(144, 113, 208, 0.92) 100%);
}

/* 効果と体験談ページ専用スタイル */
.love-hero-section.about-hero-section.angel-experiences-hero-section {
    background-image: url('../images/about-experiences.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.about-hero-section.angel-experiences-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.92) 0%, rgba(255, 105, 180, 0.92) 100%);
}

/* 信憑性についてページ専用スタイル */
.love-hero-section.about-hero-section.angel-credibility-hero-section {
    background-image: url('../images/about-credibility.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.about-hero-section.angel-credibility-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.92) 0%, rgba(100, 120, 200, 0.92) 100%);
}

/* エンジェルナンバーとはページ専用スタイル */
.love-hero-section.about-hero-section:not(.angel-basic-meaning-hero-section):not(.angel-history-hero-section):not(.angel-messages-hero-section):not(.angel-interpretation-hero-section):not(.angel-experiences-hero-section):not(.angel-credibility-hero-section) {
    background-image: url('../images/card-spiritual.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.about-hero-section:not(.angel-basic-meaning-hero-section):not(.angel-history-hero-section):not(.angel-messages-hero-section):not(.angel-interpretation-hero-section):not(.angel-experiences-hero-section):not(.angel-credibility-hero-section) .hero-overlay {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.92) 0%, rgba(144, 113, 208, 0.92) 100%);
}

/* エンジェルナンバーとはページ「エンジェルナンバーの基礎知識」カード背景画像 */
body:has(.about-hero-section) .card-twinflame::before {
    background-image: url('../images/about-basic-meaning.jpg');
}

body:has(.about-hero-section) .card-crush::before {
    background-image: url('../images/about-history.jpg');
}

body:has(.about-hero-section) .card-reunion::before {
    background-image: url('../images/about-messages.jpg');
}

body:has(.about-hero-section) .card-fulfillment::before {
    background-image: url('../images/about-interpretation.jpg');
}

body:has(.about-hero-section) .card-soulmate::before {
    background-image: url('../images/about-experiences.jpg');
}

body:has(.about-hero-section) .card-silent::before {
    background-image: url('../images/about-credibility.jpg');
}

/* スピリチュアルページ専用スタイル */
/* スピリチュアルページ専用スタイル */
.love-hero-section.spiritual-hero-section {
    background-image: url('../images/card-spiritual.jpg');
}

.love-hero-section.spiritual-hero-section .hero-overlay {
    background: var(--hero-overlay-spiritual);
}

/* スピリチュアルページのカードヘッダーをパープル系に */
body:has(.spiritual-hero-section) .number-badge-wrapper::before {
    background: var(--theme-overlay-spiritual);
}

/* スピリチュアルページ「スピリチュアルテーマ別ガイド」カード背景画像 */
body:has(.spiritual-hero-section) .card-twinflame::before {
    background-image: url('../images/spiritual-awakening.jpg');
}

body:has(.spiritual-hero-section) .card-crush::before {
    background-image: url('../images/spiritual-lightworker.jpg');
}

body:has(.spiritual-hero-section) .card-reunion::before {
    background-image: url('../images/spiritual-dimension.jpg');
}

body:has(.spiritual-hero-section) .card-fulfillment::before {
    background-image: url('../images/spiritual-gifts.jpg');
}

body:has(.spiritual-hero-section) .card-soulmate::before {
    background-image: url('../images/spiritual-transformation.jpg');
}

body:has(.spiritual-hero-section) .card-silent::before {
    background-image: url('../images/spiritual-karma.jpg');
}

/* ツインレイページ専用スタイル */
.love-hero-section.twinflame-hero-section {
    background-image: url('../images/love-twinflame.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.twinflame-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.92) 0%, rgba(118, 75, 162, 0.92) 100%);
}

/* 片思いページ専用スタイル */
.love-hero-section.crush-hero-section {
    background-image: url('../images/love-crush.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.crush-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(251, 194, 235, 0.92) 0%, rgba(246, 133, 186, 0.92) 100%);
}

/* 復縁ページ専用スタイル */
.love-hero-section.reunion-hero-section {
    background-image: url('../images/love-reunion.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.reunion-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 158, 128, 0.92) 0%, rgba(255, 99, 132, 0.92) 100%);
}

/* 恋愛成就ページ専用スタイル */
.love-hero-section.fulfillment-hero-section {
    background-image: url('../images/love-fulfillment.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.fulfillment-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.92) 0%, rgba(144, 113, 208, 0.92) 100%);
}

/* 運命の人ページ専用スタイル */
.love-hero-section.soulmate-hero-section {
    background-image: url('../images/love-soulmate.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.soulmate-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.92) 0%, rgba(255, 105, 180, 0.92) 100%);
}

/* サイレント期間ページ専用スタイル */
.love-hero-section.silent-hero-section {
    background-image: url('../images/love-silent.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.silent-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.92) 0%, rgba(100, 120, 200, 0.92) 100%);
}

/* スピリチュアルテーマページ専用スタイル */
/* 覚醒・アセンションページ */
.love-hero-section.spiritual-hero-section.awakening-hero-section {
    background-image: url('../images/spiritual-awakening.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.spiritual-hero-section.awakening-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.92) 0%, rgba(118, 75, 162, 0.92) 100%);
}

/* ライトワーページ */
.love-hero-section.spiritual-hero-section.lightworker-hero-section {
    background-image: url('../images/spiritual-lightworker.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.spiritual-hero-section.lightworker-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(251, 194, 235, 0.92) 0%, rgba(246, 133, 186, 0.92) 100%);
}

/* 高次元との繋がりページ */
.love-hero-section.spiritual-hero-section.dimension-hero-section {
    background-image: url('../images/spiritual-dimension.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.spiritual-hero-section.dimension-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 158, 128, 0.92) 0%, rgba(255, 99, 132, 0.92) 100%);
}

/* スピリチュアルギフトページ */
.love-hero-section.spiritual-hero-section.gifts-hero-section {
    background-image: url('../images/spiritual-gifts.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.spiritual-hero-section.gifts-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.92) 0%, rgba(144, 113, 208, 0.92) 100%);
}

/* 変容と成長ページ */
.love-hero-section.spiritual-hero-section.transformation-hero-section {
    background-image: url('../images/spiritual-transformation.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.spiritual-hero-section.transformation-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.92) 0%, rgba(255, 105, 180, 0.92) 100%);
}

/* カルマと輪廻ページ */
.love-hero-section.spiritual-hero-section.karma-hero-section {
    background-image: url('../images/spiritual-karma.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.spiritual-hero-section.karma-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.92) 0%, rgba(100, 120, 200, 0.92) 100%);
}

/* 金運テーマページ専用スタイル */
/* 宝くじ・当選ページ */
.love-hero-section.money-hero-section.lottery-hero-section {
    background-image: url('../images/money-lottery.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.money-hero-section.lottery-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.92) 0%, rgba(118, 75, 162, 0.92) 100%);
}

/* 仕事・キャリアページ */
.love-hero-section.money-hero-section.career-hero-section {
    background-image: url('../images/money-gold.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.money-hero-section.career-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(251, 194, 235, 0.92) 0%, rgba(246, 133, 186, 0.92) 100%);
}

/* 転職・昇進ページ */
.love-hero-section.money-hero-section.job-change-hero-section {
    background-image: url('../images/money-business.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.money-hero-section.job-change-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 158, 128, 0.92) 0%, rgba(255, 99, 132, 0.92) 100%);
}

/* ビジネス・起業ページ */
.love-hero-section.money-hero-section.business-hero-section {
    background-image: url('../images/money-career.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.money-hero-section.business-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.92) 0%, rgba(144, 113, 208, 0.92) 100%);
}

/* 投資・資産運用ページ */
.love-hero-section.money-hero-section.investment-hero-section {
    background-image: url('../images/money-graph.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.money-hero-section.investment-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 183, 197, 0.92) 0%, rgba(255, 105, 180, 0.92) 100%);
}

/* 副業・サイドビジネスページ */
.love-hero-section.money-hero-section.side-business-hero-section {
    background-image: url('../images/money-success.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.love-hero-section.money-hero-section.side-business-hero-section .hero-overlay {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.92) 0%, rgba(100, 120, 200, 0.92) 100%);
}