/* 診断結果ページ専用スタイル */

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

.result-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.70) 0%, rgba(255, 192, 203, 0.72) 25%, rgba(255, 218, 185, 0.74) 50%, rgba(255, 223, 186, 0.76) 75%, rgba(255, 215, 0, 0.68) 100%);
    z-index: 1;
}

.result-hero .hero-content {
    position: relative;
    z-index: 2;
}

/* カテゴリ別のヒーローオーバーレイ - index.htmlと同じ明るい色調 */
section.result-hero[data-category="love"] .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.70) 0%, rgba(255, 192, 203, 0.72) 25%, rgba(255, 218, 185, 0.74) 50%, rgba(255, 223, 186, 0.76) 75%, rgba(255, 215, 0, 0.68) 100%);
}

section.result-hero[data-category="money"] .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 216, 155, 0.75) 0%, rgba(255, 200, 170, 0.77) 25%, rgba(255, 223, 186, 0.79) 50%, rgba(255, 215, 0, 0.75) 75%, rgba(255, 200, 140, 0.73) 100%);
}

section.result-hero[data-category="spiritual"] .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.70) 0%, rgba(255, 192, 203, 0.72) 25%, rgba(255, 218, 185, 0.74) 50%, rgba(255, 223, 186, 0.76) 75%, rgba(255, 215, 0, 0.68) 100%);
}

section.result-hero[data-category="life"] .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.70) 0%, rgba(255, 192, 203, 0.72) 25%, rgba(200, 220, 255, 0.74) 50%, rgba(255, 223, 186, 0.76) 75%, rgba(255, 215, 0, 0.68) 100%);
}

section.result-hero[data-category="overall"] .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.70) 0%, rgba(255, 192, 203, 0.72) 25%, rgba(255, 218, 185, 0.74) 50%, rgba(255, 223, 186, 0.76) 75%, rgba(255, 215, 0, 0.68) 100%);
}

/* 診断結果バッジ */
.result-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    backdrop-filter: blur(10px);
}

.result-badge img {
    filter: brightness(0) invert(1);
}

/* 数字表示（大） */
.number-display-result {
    font-size: 6rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3em;
    font-family: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'Yu Mincho Medium', 'MS Mincho', 'MS PMincho', serif;
    animation: numberGlow 2s ease-in-out infinite;
}

@keyframes numberGlow {
    0%, 100% {
        text-shadow: 0 5px 30px rgba(255, 255, 255, 0.3),
                     0 0 50px rgba(255, 182, 193, 0.5);
    }
    50% {
        text-shadow: 0 5px 40px rgba(255, 255, 255, 0.5),
                     0 0 80px rgba(255, 182, 193, 0.8);
    }
}

/* 診断結果カード */
.result-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

/* 結果カード内のセクションタイトル */
.result-card .section-title,
.theme-card .section-title {
    background: var(--gradient-primary);
    color: #ffffff;
    padding: 1.5rem 2rem;
    border-radius: 30px 30px 0 0;
    margin: -3rem -3rem 2rem -3rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 意味ポイントカード */
.meaning-point {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(145deg, #ffffff 0%, #fef5fb 100%);
    border-radius: 20px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.meaning-point:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(176, 142, 173, 0.2);
}

/* アイコン（大） */
.icon-large {
    font-size: 6rem;
    margin-bottom: 0;
    display: block;
    width: 100%;
}

/* 基本的な意味セクションのアイコン - 紫系 */
.meaning-point .icon-large,
.result-detail-section .icon-large,
.result-card .icon-large {
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
}

/* アイコンカラー */
.icon-calm-blue {
    color: #A3CAD9;
}

.icon-calm-amber {
    color: #E6C9A3;
}

.icon-calm-rose {
    color: #E8B9C0;
}

.point-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-purple);
    margin-bottom: 1rem;
}

.point-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
}

.lead-text {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-dark);
    text-align: center;
}

/* テーマ別メッセージセクション */
.theme-message-section {
    background: linear-gradient(180deg, #faf8fb 0%, #ffffff 100%);
}

.theme-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 4rem;
}

.theme-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-purple);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.theme-subtitle i {
    font-size: 2rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 0.75rem;
}

.theme-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

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

.theme-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-dark);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.theme-list li::before {
    content: '✨';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
}

/* 詳細リンクセクション */
.detail-link-section {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.1) 0%, rgba(255, 192, 203, 0.1) 100%);
}

.detail-link-card {
    background: #ffffff;
    border-radius: 25px;
    padding: 3rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.detail-link-icon {
    font-size: 3rem;
    color: var(--primary-purple);
    margin-bottom: 1.5rem;
}

.detail-link-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.detail-link-text {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.8;
}

/* 他のエンジェルナンバーカード */
.other-number-card {
    display: block;
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.other-number-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.other-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
    font-family: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'Yu Mincho Medium', 'MS Mincho', 'MS PMincho', serif;
}

.other-meaning {
    font-size: 0.95rem;
    color: var(--text-medium);
    margin: 0;
}

/* 他のテーマへのリンクカード */
.other-themes-section {
    background: #f8f9fa;
}

.other-themes-section .row {
    margin-bottom: 2rem;
}

.theme-link-card {
    display: block;
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
}

.theme-link-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 182, 193, 0.8);
}

.theme-link-card i {
    font-size: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    display: block;
}

.theme-link-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 140, 150, 1);
    margin: 0;
}

/* エレガントなアラート */
.alert-elegant {
    background: linear-gradient(145deg, #fef5fb 0%, #fdf0f7 100%);
    border: 2px solid #f8d7e8;
    border-radius: 20px;
    padding: 1.5rem;
    color: #8b5a78;
    font-size: 1.05rem;
    line-height: 1.8;
    box-shadow: 0 5px 20px rgba(251, 194, 235, 0.15);
}

.alert-elegant i {
    color: #8b5a78;
    font-size: 1.2rem;
    vertical-align: middle;
}

/* 行動指針カード */
.action-card {
    background: linear-gradient(145deg, #ffffff 0%, #faf8fb 100%);
    border-radius: 20px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.action-card:hover {
    transform: translateY(-5px);
    border-color: rgba(176, 142, 173, 0.3);
    box-shadow: 0 10px 30px rgba(176, 142, 173, 0.2);
}

.action-card-highlight {
    background: linear-gradient(145deg, #fef5fb 0%, #f8f3fc 100%);
    border-color: rgba(176, 142, 173, 0.3);
}

.action-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 15px;
    color: #ffffff;
    font-size: 1.8rem;
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-purple);
    margin-bottom: 0.5rem;
}

.action-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
}

/* SNSボタンセクション - PCサイズ用 */
.sns-share-section {
    overflow: visible !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.result-page .sns-share-section {
    overflow: visible !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.result-page .sns-share-section .container {
    overflow: visible !important;
}

.result-page .sns-share-section .row {
    overflow: visible !important;
}

.result-page .sns-share-section .col-auto {
    overflow: visible !important;
}

.result-page .sns-share-buttons {
    overflow: visible !important;
}

.result-page .sns-btn {
    position: relative;
    z-index: 1;
}

.result-page .sns-btn:hover {
    z-index: 10;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .number-display-result {
        font-size: 6rem;
        letter-spacing: 0.2em;
    }
    
    .result-card,
    .theme-card,
    .detail-link-card {
        padding: 2rem 1.5rem;
    }
    
    .result-card .section-title,
    .theme-card .section-title {
        margin: -2rem -1.5rem 1.5rem -1.5rem;
        padding: 1.2rem 1.5rem;
        font-size: 1.8rem;
    }
    
    .icon-large {
        font-size: 4.5rem;
    }
    
    .theme-subtitle {
        font-size: 1.3rem;
    }
    
    .theme-subtitle i {
        font-size: 1.6rem;
    }
    
    .detail-link-title {
        font-size: 1.5rem;
    }
    
    .action-card {
        padding: 1.25rem;
        gap: 0.75rem;
    }
    
    .action-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .action-title {
        font-size: 1rem;
    }
    
    .action-text {
        font-size: 0.9rem;
    }
    
    /* SNSボタン周りの間隔を調整 */
    .sns-share-section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        overflow: visible !important;
    }
    
    .result-detail-section {
        padding-top: 1.5rem !important;
    }
    
    /* 基本的な意味のカードをコンパクトに */
    .meaning-point {
        padding: 1.25rem;
        gap: 0.75rem;
    }
    
    .meaning-point .icon-large {
        font-size: 3.5rem;
        margin-bottom: 0;
    }
    
    .meaning-point .point-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    .meaning-point .point-text {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    /* 他のテーマを見るセクションを2カラム表示に */
    .other-themes-section .row {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
    
    .other-themes-section .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-right: calc(var(--bs-gutter-x) * 0.5);
    }
    
    .theme-link-card {
        padding: 1.5rem 1rem;
    }
    
    .theme-link-card i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .theme-link-card h3 {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .number-display-result {
        font-size: 4.5rem;
        letter-spacing: 0.15em;
    }
    
    .result-badge {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
    
    .result-card .section-title,
    .theme-card .section-title {
        margin: -2rem -1.5rem 1.5rem -1.5rem;
        padding: 1rem 1rem;
        font-size: 1.5rem;
    }
    
    .icon-large {
        font-size: 4rem;
    }
    
    .other-number {
        font-size: 2rem;
    }
    
    .action-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 1rem;
    }
    
    .action-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
    
    .action-title {
        font-size: 0.95rem;
    }
    
    .action-text {
        font-size: 0.85rem;
    }
    
    /* SNSボタン周りの間隔を調整 */
    .sns-share-section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        overflow: visible !important;
    }
    
    .result-detail-section {
        padding-top: 1rem !important;
    }
    
    /* 基本的な意味のカードをコンパクトに */
    .meaning-point {
        padding: 1rem;
        gap: 0.5rem;
    }
    
    .meaning-point .icon-large {
        font-size: 4.5rem;
        margin-bottom: 0;
    }
    
    .meaning-point .point-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.4rem;
    }
    
    .meaning-point .point-text {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    /* 他のテーマを見るセクションを2カラム表示に */
    .other-themes-section .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    .other-themes-section .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-right: calc(var(--bs-gutter-x) * 0.5);
    }
    
    .theme-link-card {
        padding: 1.25rem 0.75rem;
    }
    
    .theme-link-card i {
        font-size: 1.75rem;
        margin-bottom: 0.4rem;
    }
    
    .theme-link-card h3 {
        font-size: 0.85rem;
    }
    
    /* 全ての数字を見るボタンのスタイル調整 */
    .other-numbers-section .text-center {
        padding: 0 0.5rem;
    }
    
    /* 他のエンジェルナンバーを探すセクションのカード内フォントサイズ統一 */
    .other-numbers-section .number-label {
        font-size: 0.7rem !important;
    }
    
    /* 他のエンジェルナンバーを探すセクション内の数字バッジのフォントサイズを1.3remに統一 */
    .other-numbers-section .number-badge,
    .other-numbers-section .number-badge.special,
    .other-numbers-section .number-badge.triple,
    .other-numbers-section .number-badge.single,
    .other-numbers-section .number-badge.double {
        font-size: 1.3rem !important;
    }
    
    .other-numbers-section .btn-lg {
        font-size: 0.8rem;
        padding: 0.5rem 0.8rem;
        white-space: normal;
        word-wrap: break-word;
        max-width: calc(100% - 1rem);
        width: auto;
        display: inline-block;
        line-height: 1.4;
    }
    
    .other-numbers-section .btn-lg i {
        font-size: 0.85rem;
        margin-right: 0.3rem;
    }
    
    /* もう一度診断するボタンのスタイル調整 */
    .other-numbers-section .btn-outline-primary {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        white-space: normal;
        max-width: calc(100% - 1rem);
    }
    
    .other-numbers-section .btn-outline-primary i {
        font-size: 0.85rem;
        margin-right: 0.3rem;
    }
    
    /* 診断結果ページ共通: スマホでもSNSボタンのテキストとアイコンを表示 */
    .result-page .sns-btn span {
        display: inline !important;
        font-size: 0.55rem;
        white-space: nowrap;
    }
    
    .result-page .sns-btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.55rem;
        gap: 0.25rem;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
    }
    
    .result-page .sns-btn i {
        font-size: 0.75rem;
    }
    
    .result-page .sns-share-buttons {
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        overflow: visible;
    }
    
    .result-page .sns-share-section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        overflow: visible !important;
    }
    
    .result-page .sns-btn {
        position: relative;
        z-index: 1;
    }
    
    .result-page .sns-btn:hover {
        z-index: 10;
    }
}


/* ============================================
   エンジェルナンバー個別背景スタイル
   各数字に完全にユニークなSVG背景画像を設定
   
   すべての数字が異なる画像ファイルを使用
   ============================================ */

/* 000の専用スタイル - 無限・宇宙 */
.result-hero[data-number="000"] {
    background-image: url('../images/hero-000-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="000"] .hero-overlay {
    background: none;
}

/* 1111の専用スタイル - 星空・新しい始まり */
.result-hero[data-number="1111"] {
    background-image: url('../images/hero-1111-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="1111"] .hero-overlay {
    background: none;
}

/* 1212の専用スタイル - 成長・波 */
.result-hero[data-number="1212"] {
    background-image: url('../images/hero-1212-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="1212"] .hero-overlay {
    background: none;
}

/* 1234の専用スタイル - ステップアップ */
.result-hero[data-number="1234"] {
    background-image: url('../images/hero-1234-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="1234"] .hero-overlay {
    background: none;
}

/* 2727の専用スタイル - スピリチュアルと調和の強化 */
.result-hero[data-number="2727"] {
    background-image: url('../images/hero-2727-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="2727"] .hero-overlay {
    background: none;
}

/* 2222の専用スタイル - 信頼・月夜 */
.result-hero[data-number="2222"] {
    background-image: url('../images/hero-2222-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="2222"] .hero-overlay {
    background: none;
}

/* 8888の専用スタイル - 豊かさ・ゴールデン */
.result-hero[data-number="8888"] {
    background-image: url('../images/hero-8888-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="8888"] .hero-overlay {
    background: none;
}

/* 333の専用スタイル - 成長・花 */
.result-hero[data-number="333"] {
    background-image: url('../images/hero-333-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="333"] .hero-overlay {
    background: none;
}

/* 444の専用スタイル - 安定・保護 */
.result-hero[data-number="444"] {
    background-image: url('../images/hero-444-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="444"] .hero-overlay {
    background: none;
}

/* 111の専用スタイル - 新しい始まり・思考の現実化 */
.result-hero[data-number="111"] {
    background-image: url('../images/hero-111-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="111"] .hero-overlay {
    background: none;
}

/* 222の専用スタイル - バランスと調和・信頼の時 */
.result-hero[data-number="222"] {
    background-image: url('../images/hero-222-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="222"] .hero-overlay {
    background: none;
}

/* 888の専用スタイル - 豊かさと繁栄の到来 */
.result-hero[data-number="888"] {
    background-image: url('../images/hero-888-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="888"] .hero-overlay {
    background: none;
}

/* 555の専用スタイル - 変化・ダイナミックな空 */
.result-hero[data-number="555"] {
    background-image: url('../images/hero-555-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="555"] .hero-overlay {
    background: none;
}

/* 666の専用スタイル - 調和・バランス */
.result-hero[data-number="666"] {
    background-image: url('../images/hero-666-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="666"] .hero-overlay {
    background: none;
}

/* 777の専用スタイル - 幸運・神秘的な紫の空 */
.result-hero[data-number="777"] {
    background-image: url('../images/hero-777-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="777"] .hero-overlay {
    background: none;
}

/* 777の金運ページ専用スタイル - 金の延べ棒 */
.result-hero[data-number="777"][data-category="money"] {
    background-image: url('../images/hero-777-money.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="777"][data-category="money"] .hero-overlay {
    background: linear-gradient(135deg, rgba(255, 216, 155, 0.92) 0%, rgba(214, 162, 93, 0.92) 100%);
}

/* 999の専用スタイル - 完了・夕暮れ */
.result-hero[data-number="999"] {
    background-image: url('../images/hero-999-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="999"] .hero-overlay {
    background: none;
}

/* 1の専用スタイル - リーダーシップ・新しい始まり */
.result-hero[data-number="1"] {
    background-image: url('../images/hero-1.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="1"] .hero-overlay {
    background: none;
}

/* 2の専用スタイル - 調和・デュアル */
.result-hero[data-number="2"] {
    background-image: url('../images/hero-2.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="2"] .hero-overlay {
    background: none;
}

/* 3の専用スタイル - 創造性・トライアングル */
.result-hero[data-number="3"] {
    background-image: url('../images/hero-3.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="3"] .hero-overlay {
    background: none;
}

/* 4の専用スタイル - 安定・基盤 */
.result-hero[data-number="4"] {
    background-image: url('../images/hero-4.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="4"] .hero-overlay {
    background: none;
}

/* 5の専用スタイル - 変化・自由 */
.result-hero[data-number="5"] {
    background-image: url('../images/hero-5.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="5"] .hero-overlay {
    background: none;
}

/* 6の専用スタイル - 愛・花 */
.result-hero[data-number="6"] {
    background-image: url('../images/hero-6.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="6"] .hero-overlay {
    background: none;
}

/* 7の専用スタイル - スピリチュアル・虹 */
.result-hero[data-number="7"] {
    background-image: url('../images/hero-7.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="7"] .hero-overlay {
    background: none;
}

/* 8の専用スタイル - 豊かさ・繁栄 */
.result-hero[data-number="8"] {
    background-image: url('../images/hero-8.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="8"] .hero-overlay {
    background: none;
}

/* 9の専用スタイル - 完了・宇宙的 */
.result-hero[data-number="9"] {
    background-image: url('../images/hero-9.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="9"] .hero-overlay {
    background: none;
}

/* 11の専用スタイル - 直感・マスターナンバー */
.result-hero[data-number="11"] {
    background-image: url('../images/hero-11.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="11"] .hero-overlay {
    background: none;
}

.result-hero[data-number="12"] {
    background-image: url('../images/hero-12-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="13"] {
    background-image: url('../images/hero-13-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="21"] {
    background-image: url('../images/hero-21-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="22"] {
    background-image: url('../images/hero-22.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="22"] .hero-overlay {
    background: none;
}

.result-hero[data-number="23"] {
    background-image: url('../images/hero-23-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="24"] {
    background-image: url('../images/hero-24-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="33"] {
    background-image: url('../images/hero-33.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="33"] .hero-overlay {
    background: none;
}

.result-hero[data-number="34"] {
    background-image: url('../images/hero-34-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="44"] {
    background-image: url('../images/hero-44-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="45"] {
    background-image: url('../images/hero-45-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="56"] {
    background-image: url('../images/hero-56-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="10"] {
    background-image: url('../images/hero-10-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="14"] {
    background-image: url('../images/hero-14-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="15"] {
    background-image: url('../images/hero-15-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="16"] {
    background-image: url('../images/hero-16-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="17"] {
    background-image: url('../images/hero-17-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="18"] {
    background-image: url('../images/hero-18-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="19"] {
    background-image: url('../images/hero-19-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="20"] {
    background-image: url('../images/hero-20-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="25"] {
    background-image: url('../images/hero-25-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="26"] {
    background-image: url('../images/hero-26-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="27"] {
    background-image: url('../images/hero-27-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="28"] {
    background-image: url('../images/hero-28-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="29"] {
    background-image: url('../images/hero-29-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="30"] {
    background-image: url('../images/hero-30-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="31"] {
    background-image: url('../images/hero-31-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="32"] {
    background-image: url('../images/hero-32-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="35"] {
    background-image: url('../images/hero-35-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="36"] {
    background-image: url('../images/hero-36-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="37"] {
    background-image: url('../images/hero-37-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="38"] {
    background-image: url('../images/hero-38-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="39"] {
    background-image: url('../images/hero-39-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="40"] {
    background-image: url('../images/hero-40-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="41"] {
    background-image: url('../images/hero-41-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="42"] {
    background-image: url('../images/hero-42-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="43"] {
    background-image: url('../images/hero-43-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="46"] {
    background-image: url('../images/hero-46-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="47"] {
    background-image: url('../images/hero-47-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="48"] {
    background-image: url('../images/hero-48-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="49"] {
    background-image: url('../images/hero-49-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="50"] {
    background-image: url('../images/hero-50-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="51"] {
    background-image: url('../images/hero-51-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="52"] {
    background-image: url('../images/hero-52-overall.jpg');
    background-size: cover;
    background-position: center;
}

/* 5252の専用スタイル - 変化と調和の強化 */
.result-hero[data-number="5252"] {
    background-image: url('../images/hero-5252-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="5252"] .hero-overlay {
    background: none;
}

.result-hero[data-number="53"] {
    background-image: url('../images/hero-53-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="54"] {
    background-image: url('../images/hero-54-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="55"] {
    background-image: url('../images/hero-55-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="57"] {
    background-image: url('../images/hero-57-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="58"] {
    background-image: url('../images/hero-58-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="59"] {
    background-image: url('../images/hero-59-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="60"] {
    background-image: url('../images/hero-60-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="61"] {
    background-image: url('../images/hero-61-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="62"] {
    background-image: url('../images/hero-62-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="63"] {
    background-image: url('../images/hero-63-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="64"] {
    background-image: url('../images/hero-64-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="65"] {
    background-image: url('../images/hero-65-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="66"] {
    background-image: url('../images/hero-66-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="67"] {
    background-image: url('../images/hero-67-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="68"] {
    background-image: url('../images/hero-68-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="69"] {
    background-image: url('../images/hero-69-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="70"] {
    background-image: url('../images/hero-70-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="71"] {
    background-image: url('../images/hero-71-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="72"] {
    background-image: url('../images/hero-72-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="73"] {
    background-image: url('../images/hero-73-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="74"] {
    background-image: url('../images/hero-74-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="75"] {
    background-image: url('../images/hero-75-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="76"] {
    background-image: url('../images/hero-76-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="77"] {
    background-image: url('../images/hero-77-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="78"] {
    background-image: url('../images/hero-78-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="79"] {
    background-image: url('../images/hero-79-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="80"] {
    background-image: url('../images/hero-80-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="81"] {
    background-image: url('../images/hero-81-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="82"] {
    background-image: url('../images/hero-82-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="83"] {
    background-image: url('../images/hero-83-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="84"] {
    background-image: url('../images/hero-84-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="85"] {
    background-image: url('../images/hero-85-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="86"] {
    background-image: url('../images/hero-86-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="87"] {
    background-image: url('../images/hero-87-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="88"] {
    background-image: url('../images/hero-88-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="89"] {
    background-image: url('../images/hero-89-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="90"] {
    background-image: url('../images/hero-90-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="91"] {
    background-image: url('../images/hero-91-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="99"] {
    background-image: url('../images/hero-99-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="98"] {
    background-image: url('../images/hero-98-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="97"] {
    background-image: url('../images/hero-97-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="96"] {
    background-image: url('../images/hero-96-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="95"] {
    background-image: url('../images/hero-95-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="94"] {
    background-image: url('../images/hero-94-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="93"] {
    background-image: url('../images/hero-93-overall.jpg');
    background-size: cover;
    background-position: center;
}

.result-hero[data-number="92"] {
    background-image: url('../images/hero-92-overall.jpg');
    background-size: cover;
    background-position: center;
}

/* ============================================
   他のエンジェルナンバーを探すセクション
   ============================================ */

.other-numbers-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

/* 他のエンジェルナンバーを探すセクション内のnumbers-gridに下マージンを追加 */
.other-numbers-section .numbers-grid {
    margin-bottom: 3rem;
}

/* クイックアクセスボタン（カード表示） */
.quick-number-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'Yu Mincho Medium', 'MS Mincho', 'MS PMincho', serif;
    color: rgba(255, 140, 150, 1);
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(255, 182, 193, 0.8);
    min-height: 80px;
}

.quick-number-btn:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 182, 193, 0.25), 0 0 0 3px rgba(255, 182, 193, 0.3);
    border-color: rgba(255, 182, 193, 0.8);
    background: #ffffff;
    color: rgba(255, 140, 150, 1);
    text-decoration: none;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .quick-number-btn {
        font-size: 1.3rem;
        padding: 1.25rem 0.75rem;
        min-height: 70px;
    }
}

@media (max-width: 576px) {
    .quick-number-btn {
        font-size: 1.1rem;
        padding: 1rem 0.5rem;
        min-height: 60px;
    }
}