@charset "UTF-8";

/* 💡 ここにフォントを呼び出す魔法を追加するよ！ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=IM+Fell+English+SC&family=Noto+Sans+JP:wght@400;500;700&family=Poppins:wght@200;400;700&family=Shippori+Mincho+B1:wght@400;700&display=swap');

/*
Theme Name:cranach (LP Custom Multi-Palette Bubble-Edition)

/*
Theme Name:cranach (LP Custom Multi-Palette Bubble-Edition)
Description: 麻里菜の占星術LP用に最適化した軽量版CSS（全カード・ラグジュアリー夜空統一版・フッター完全改修版）
Version:7.0
*/

/* ==================================================================================
   【基本設定・リセット】表示崩れを防ぐための土台
===================================================================================== */
*, ::after, ::before { box-sizing: border-box; }
blockquote, body, dd, dl, figcaption, figure, h1, h2, h3, h4, li, p { margin: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { -webkit-overflow-scrolling: touch; text-rendering: optimizeSpeed; line-height: 1.6; font-size: 1rem; font-family: 'Noto Sans JP', sans-serif; color: #333; padding: 0; position: relative; word-break: break-all; overflow-x: hidden; background-color: #1a0f29 !important; background-image: none !important; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

/* ==================================================================================
   【リンク・タイポグラフィ】
===================================================================================== */
a:link, a:visited { color: #c7ad61; text-decoration: none; transition: 0.5s ease-in-out; }
a:active, a:hover { color: #3D474C; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0.8rem 0; letter-spacing: 0.25rem; line-height: 1.5rem; font-weight: 400; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3, h4, h5, h6 { font-size: 1.1rem; }

.gold-text {
    background: linear-gradient(45deg, #b39d56 0%, #edd693 50%, #b39d56 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(237, 214, 147, 0.2);
    font-weight: 700;
}

/* ==================================================================================
   【全体レイアウト＆星空透過】
===================================================================================== */
#starfield-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1 !important; pointer-events: none !important; }
#container { width: 80%; margin: 0 auto; padding: 0; position: relative; z-index: 1; }
#main-container, #footer-container, #maincontents, .astrology-section, #vision, #planets, #about, #houses-salon, #zodiac-salon, #planets-salon { background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; }
#maincontents { width: 100%; padding: 0 0 5%; position: relative; }
#maincontents, #maincontents p, #maincontents span { color: #ffffff !important; }

/* ==================================================================================
   【ヘッダー＆メニュー】
===================================================================================== */
#header-container { width: 100%; height: auto; margin: 0; padding: 0; position: relative; z-index: 99; }
.titleplate { width: 30%; margin: 0 auto !important; padding: 9% 0; background: url(images/titleplate.webp) no-repeat center center/100% auto; text-align: center; position: relative; z-index: 2; }
.logo { font-family: 'IM Fell English SC', serif; font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.2rem; text-indent: 0.2rem; line-height: 1.2em; margin: 0 0 1%; text-shadow: 1px 1px 1px #333; }
.logo a { color: #8d7a4d; }
.intro { font-size: 0.8rem; font-family: 'Poppins', sans-serif; font-weight: 200; }
#check { position: absolute; visibility: hidden; }
.button, .button span { display: none; transition: 1s; cursor: pointer; }
.menu-main-left-container { width: 35%; height: 45%; order: 1; position: absolute; left: 0; bottom: 0; }
.menu-main-right-container { width: 35%; height: 45%; order: 3; position: absolute; right: 0; bottom: 0; }
#menu-main-left, #menu-main-right { height: 100%; margin: 0; padding: 0; list-style-type: none; }
#menu-main-left li, #menu-main-right li { margin: 0; padding: 0; width: 50%; height: 100%; text-indent: -9999px; float: left; }
#menu-main-left li:hover, #menu-main-right li:hover { transform: rotateZ(5deg); }
#menu-main-left li:nth-child(1) { margin: 25% 0 0; background: url(images/handnav.webp) no-repeat center bottom/50% auto; }
#menu-main-left li:nth-child(2) { float: right; background: url(images/angelnav.webp) no-repeat center bottom/40% auto; }
#menu-main-right li:nth-child(1) { background: url(images/clock.webp) no-repeat center bottom/45% auto; }
#menu-main-right li:nth-child(2) { float: right; margin: 18% 0 0; background: url(images/owlnav.webp) no-repeat center bottom/50% auto; }
#menu-main-left li a, #menu-main-right li a { display: block; width: 100%; height: 100%; }

/* ==================================================================================
   【演出グラフィック＆セクションヘッダー】
===================================================================================== */
.cranach { 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
    margin: -6% 0 0; 
}
.cranach:before { content: ""; padding-top: 63%; display: block; }
.womanl { width: 15%; height: auto; position: absolute; top: 35%; left: -15%; }
.womanlfront, .womanlback, .womanrfront, .womanrback { position: absolute; top: 0; }
.womanr { width: 15%; height: auto; position: absolute; top: 38%; right: -15%; }
.curtain { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; }

.astrology-section .section-label font, .astrology-section .section-label { color: #e8ddea !important; font-weight: bold; }
.astrology-section .section-title { text-align: center; font-size: 1.6rem; margin-bottom: 2.5rem; position: relative; letter-spacing: 0.2rem; color: #caa5cb !important; }
.astrology-section .section-title::after { content: "✦"; display: block; font-size: 1.4rem !important; margin-top: 2.2rem !important; margin-bottom: 2.2rem !important; color: #c7ad61; }

/* 空間＆フォント調整 */
.section-label {
    margin-top: 0px !important; 
    margin-bottom: 10px !important; 
    font-family: 'IM Fell English SC', 'Cinzel', serif !important;
    letter-spacing: 0.15em !important; 
}
.section-title {
    margin-top: 0px !important; 
    margin-bottom: 60px !important; 
}
.entry-title.gold-text, h2.entry-title.gold-text { 
    color: #ffffff !important; 
    -webkit-text-fill-color: #ffffff !important; 
    font-size: 22px !important; 
    font-weight: bold !important; 
    text-shadow: none !important; /* 💡 ここを none に変えるだけで、光の影がすっきりと消えるさ */
}

/* ==================================================================================
   🔮 全カード共通：共通の美レイアウト
===================================================================================== */
.salon-flex-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 30px !important; 
    max-width: 900px !important; 
    margin: 0 auto 3rem auto !important;
    padding: 0 20px !important; 
    box-sizing: border-box !important;
}

.salon-flex-container .about-image,
.concept-single-card,
.menu-card {
    background: rgba(26, 15, 41, 0.75) !important; 
    border: 1px solid rgba(202, 165, 203, 0.3) !important; 
    border-radius: 20px !important; 
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 0 25px rgba(202, 165, 203, 0.2) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    text-align: center !important;
    color: #ffffff !important;
}
.concept-single-card {
    padding: 30px !important; 
}

/* ----------------------------------------------------
   ★ 上のパレットカード（星座・惑星）の専用デザイン
---------------------------------------------------- */
.salon-flex-container .about-image img { 
    width: 100% !important; 
    height: auto !important; 
    display: block !important; 
    border-radius: 0 !important; 
    border-bottom: 1px solid rgba(237, 214, 147, 0.2) !important; 
}
.astrology-section .about-image .palette-main-title,
body .palette-main-title { 
    color: #caa5cb !important; 
    -webkit-text-fill-color: #caa5cb !important; 
    font-size: 1.2rem !important; 
    font-weight: bold !important; 
    margin-top: 20px !important; 
    margin-bottom: 5px !important; 
    display: block !important; 
}
.astrology-section .about-image .palette-sub-title,
body .palette-sub-title { 
    color: #ffffff !important; 
    -webkit-text-fill-color: #ffffff !important; 
    font-size: 2.05rem !important; 
    font-family: 'IM Fell English SC', 'Cinzel', serif !important;
    letter-spacing: 0.1rem !important; 
    margin-bottom: 25px !important; 
    display: block !important; 
}

/* 魂に刻まれた星（1枚カード）のデザイン */
html body #concept-astrology .concept-single-card {
    background: rgba(31, 18, 48, 0.45) !important; 
    border: none !important;                   
    box-shadow: 0 0 20px rgba(202, 165, 203, 0.3) !important; 
    margin: 40px auto !important;   
    text-align: center !important;
    border-radius: 20px !important; 
    display: block !important;      
    overflow: hidden !important;    
    padding: 0 0 40px 0 !important; 
}

#concept-astrology .concept-single-card .card-image-part img {
    width: 100% !important;        
    height: auto !important;
    margin: 0 0 35px 0 !important; 
    border-radius: 0 !important;   
    display: block !important;
}

html body #concept-astrology .poem-title { 
    color: #caa5cb !important; 
    -webkit-text-fill-color: #caa5cb !important; 
    font-size: 2.2rem !important;
}

html body #concept-astrology .poem-subtitle { 
    color: #ffffff !important; 
    -webkit-text-fill-color: #ffffff !important; 
    font-family: 'IM Fell English SC', serif !important; 
    letter-spacing: 0.15em !important; 
    font-size: 1.4rem !important; 
    margin-bottom: 20px !important;
}

html body #concept-astrology .poem-body { 
    color: #ffffff !important; 
    -webkit-text-fill-color: #ffffff !important; 
    font-weight: 500 !important; 
    font-size: 1.6rem !important; 
    line-height: 2.2 !important; 
    padding: 0 20px !important;  
}

/* ----------------------------------------------------
   ★ SPECIAL MENUカードの専用デザイン
---------------------------------------------------- */
.menu-card .card-image-box {
    width: 100% !important;
    height: 240px !important; 
    background-size: cover !important;
    background-position: center !important;
    border-bottom: 1px solid rgba(237, 214, 147, 0.2) !important;
}
.menu-card .card-content {
    padding: 30px 24px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    align-items: center !important;
}
.special-menu-container .menu-card .label-small {
    font-size: 1.5rem !important;  
    color: #caa5cb !important;      
    margin-bottom: 8px !important;
    font-weight: bold !important;
}
.special-menu-container .menu-card .card-h3 {
    font-size: 2.2rem !important;   
    color: #e8ddea !important;      
    margin: 0 0 20px 0 !important;
    font-family: 'IM Fell English SC', serif !important;
}
.menu-card p.card-p { 
    font-size: 1.2rem !important; 
    color: #e0e0e0 !important; 
    line-height: 1.8 !important; 
    margin: 0 0 30px 0 !important; 
    text-align: center !important; 
}
.menu-detail-btn {
    display: block !important;
    width: 160px !important; 
    margin: auto auto 0 auto !important; 
    padding: 11px 0 !important;
    background: #edd693 !important; 
    color: #392554 !important; 
    border-radius: 30px !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    letter-spacing: 0.15em !important;
    transition: all 0.3s ease !important;
}

/* ==================================================================================
   【演出グラフィック魔法・動画とレイヤー】
===================================================================================== */
.cranach-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.womanl, .womanr, .curtain { z-index: 1; }
.angel { position: absolute; right: 13%; bottom: 23%; width: 12%; height: auto; z-index: 0.5; }
.womanl, .womanr { top: auto !important; bottom: 6% !important; }
.womanlfront, .womanlback, .womanrfront, .womanrback { top: auto !important; bottom: 0 !important; width: 100% !important; }
.header { background-color: transparent !important; background-image: none !important; }

/* ==================================================================================
   ✨【新・超ラグジュアリーフッター機能】プロ仕様2カラム・レスポンシブ
===================================================================================== */
#footer-container {
    width: 100% !important;
    border-top: 1px solid rgba(202, 165, 203, 0.4) !important;
    padding: 40px 0 !important;
    margin-top: 5% !important;
}

.custom-footer-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    max-width: 900px !important; /* カード全体の幅と完璧にシンクロ */
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
}

/* フッター左側：ブランドロゴ ＆ 横並びメニュー */
.footer-left {
    width: 60% !important;
    text-align: left !important;
}

.footer-brand-title {
    font-size: 2.2rem !important; 
    font-weight: bold !important;
    margin-bottom: 5px !important; /* 💡 20pxから「5px」に変更して、下の隙間を詰めるぜ！ */
    font-family: 'Shippori Mincho B1', 'IM Fell English SC', serif !important;
    letter-spacing: 0.1em !important;
}

/* 💡 文字にリンクを貼った時も、あの美しいグラデーション色を100%キープするお守りさ */
.footer-brand-title a {
    background: none !important; 
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.footer-menu {
    display: flex !important;
    gap: 25px !important;
    flex-wrap: wrap !important;
    margin-top: 5px !important; /* 💡 15pxから「5px」に変更して、メニューを上に引き上げるよ！ */
}

.footer-menu a {
    color: #ffffff !important; /* 純白に強制指定 */
    font-size: 12px !important; /* 小さく上品に */
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
    letter-spacing: 0.1em !important;
}

.footer-menu a:hover {
    opacity: 0.7 !important;
    color: #ffffff !important;
}

.footer-right {
    width: 38% !important;
    padding-left: 30px !important;
    border-left: 1px solid rgba(202, 165, 203, 0.3) !important; 
    font-size: 1.1rem !important; 
    line-height: 1.8 !important;
    text-align: left !important;
    color: #ffffff !important; /* 💡 #e0e0e0 から純白に変更 */
    font-family: 'Noto Sans JP', sans-serif !important;
}

.copyright-text {
    margin-bottom: 14px !important;
    color: #ffffff !important; /* 💡 ゴールドから白に変更 */
}

.footer-address {
    border-top: none !important; 
    padding: 0 !important;
    text-align: left !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.1em !important;
    color: #ffffff !important; /* 💡 ゴールドから白に変更 */
}

/* フッター右側：注意書き ＆ コピーライト */
.footer-right {
    width: 38% !important;
    padding-left: 30px !important;
    border-left: 1px solid rgba(202, 165, 203, 0.3) !important; 
    font-size: 1.1rem !important; /* 💡 0.75remから「0.9rem」に大きくしたぜ！ */
    line-height: 1.8 !important;
    text-align: left !important;
    color: #ffffff !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.copyright-text {
    margin-bottom: 12px !important;
    color: #ffffff !important; /* 💡 #968880 から他の文字と同じ #e0e0e0 に変更して統一したぜ！ */
}

.footer-address {
    border-top: none !important; /* 古いリセットの干渉を打ち消すぜ */
    padding: 0 !important;
    text-align: left !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.1em !important;
    color: #ffffff !important; /* コピーライトは高貴なゴールド */
}

/* 📱 スマホ・タブレット（1024px以下）の時のレスポンシブ魔法 */
@media screen and (max-width: 1024px) {
    .custom-footer-content {
        flex-direction: column !important;
        gap: 35px !important;
    }
    
    .footer-left, .footer-right {
        width: 100% !important;
        border-left: none !important; /* 縦線を綺麗に消すさ */
        padding-left: 0 !important;
    }

    .footer-menu {
        justify-content: flex-start !important; /* 💡 Cの文字のラインに揃えて完璧な左寄せ！ */
        gap: 20px !important;
    }

    .footer-menu a {
        font-size: 2vw !important; /* 💡 画面サイズに合わせて1行に美しく収まるvw魔法！ */
        white-space: nowrap !important; /* 絶対に変な改行をさせない強い意志 */
    }
}

/* ==================================================================================
   【その他パーツ・装飾】
===================================================================================== */
.contact-button { display: inline-block; padding: 1.2rem 3rem; background: linear-gradient(45deg, #8d7a4d 0%, #edd693 50%, #8d7a4d 100%); color: #1a0f29 !important; font-weight: bold; font-size: 1.1rem; border-radius: 50px; letter-spacing: 0.2rem; box-shadow: 0 4px 15px rgba(141, 141, 77, 0.3); transition: all 0.3s ease; }
.blogpost p { padding: 1rem 0; }
#page-top img { width: 60px; position: fixed; bottom: 20px; right: 20px; z-index: 999999; animation: top 2s linear infinite; }
@keyframes top { 0%, 100% { margin: 0; } 50% { margin: -10px 0; } }
blockquote { background-color: rgba(255, 255, 255, .8); margin: 1rem 0; padding: 2rem 1.2em; position: relative; color: #1a0f29 !important; }

/* ==================================================================================
   📱 【レスポンシブ：スマホ・iPad・タブレット表示（既存）】
===================================================================================== */
@media screen and (max-width: 1024px) {
    /* ローディング中は背景色（深い紫）だけにして、ランプは出さない */
    body { background-color: #1a0f29 !important; background-image: none !important; }
    
    /* loaded クラスがついたら初めてランプを灯す */
    body.loaded { background: url(astrology-assets/images/lamp.webp) no-repeat 20% 0px / 12% auto, url(astrology-assets/images/lamp.webp) no-repeat 80% 0px / 12% auto !important; }
    #container { width: 100%; }
    #header-container { width: 100%; display: block; }
    .titleplate { width: 100% !important; padding: 65px 0 45px 0 !important; background: url(images/titleplate.webp) no-repeat center center / contain !important; position: relative; z-index: 9999 !important; }
    .logo a, .logo a span { font-size: 1.5rem !important; letter-spacing: 0.1rem; }
    .cranach { margin: 0px 0 0 0 !important; position: relative; z-index: 1; }
    #main-container { display: block; padding: 0 !important; } 
    #maincontents { width: 100%; padding: 0 0 3rem; }
    #vision, #planets, #about, .astrology-section { padding: 2rem 0 !important; }

    .salon-flex-container {
        gap: 15px !important; 
        padding: 0 10px !important; 
    }
    
    .menu-card .card-image-box { height: 140px !important; }
    .menu-card .card-content { padding: 15px 10px !important; }
    
    .astrology-section .about-image .palette-main-title { font-size: 0.9rem !important; margin-top: 10px !important; }
    .astrology-section .about-image .palette-sub-title { font-size: 0.75rem !important; margin-bottom: 15px !important; }

    .desktop-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(26, 15, 41, 0.95); z-index: 99998; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: 0.4s ease-in-out; }
    #check:checked ~ .desktop-menu { opacity: 1; pointer-events: auto; }
    .menu-main-left-container, .menu-main-right-container { position: static !important; width: 100% !important; height: auto !important; }
    #menu-main-left, #menu-main-right { display: flex; flex-direction: column; align-items: center; }
    #menu-main-left li, #menu-main-right li { width: 100% !important; margin: 15px 0 !important; background: none !important; text-indent: 0 !important; text-align: center; }
    #menu-main-left li a, #menu-main-right li a { color: #ffffff !important; font-size: 1.6rem; letter-spacing: 0.3rem; font-family: 'IM Fell English SC', serif !important; }

    html body .special-menu-container,
    body .special-menu-container {
        display: flex !important;
        flex-direction: column !important;     
        align-items: center !important;        
        gap: 25px !important;                  
        padding: 0 14px !important; 
    }

    .special-menu-container .menu-card {
        width: 100% !important;
        max-width: 440px !important;           
    }

    html body .special-menu-container .menu-card .label-small {
        font-size: 1.4rem !important;  
        color: #caa5cb !important; 
        margin-bottom: 11px !important;
        font-weight: bold !important;
    }

    html body .special-menu-container .menu-card .card-h3 {
        font-size: 2.2rem !important;   
        color: #e8ddea !important; 
        margin: 0 0 25px 0 !important;
        font-family: 'IM Fell English SC', serif !important;
    }

    .special-menu-container .menu-card .card-image-box { width: 100% !important; height: 200px !important; }
    .special-menu-container .menu-card .card-content { padding: 25px 20px !important; align-items: center !important; }
    
    .special-menu-container .menu-card p.card-p {
        font-size: 1.4rem !important;   
        color: #e0e0e0 !important;       
        line-height: 1.7 !important;
        margin: 0 0 30px 0 !important;
    }
    
    .special-menu-container .menu-detail-btn {
        width: 140px !important;               
        padding: 10px 0 !important;
        font-size: 1.1rem !important;
        background: transparent !important; 
        color: #ffffff !important;          
        border: 1px solid rgba(202, 165, 203, 0.6) !important; 
        border-radius: 30px !important;
        font-weight: bold !important;
        letter-spacing: 0.15em !important;
    }
}

@media screen and (max-width: 768px) {
    .concept-single-card { padding: 12px 12px 35px 12px !important; max-width: 86% !important; }
}

@media screen and (max-width:660px) {
    .titleplate { padding: 60px 0 40px 0 !important; }
}

@media screen and (max-width:440px) {
    .titleplate { padding: 55px 0 35px 0 !important; }
    .logo a, .logo a span { font-size: 1.3rem !important; }
}

/* ==================================================================================
   【共通一元化ルール・調整パーツ】
===================================================================================== */
.astrology-section .about-image, .astrology-section .menu-card, .salon-flex-container .about-image, .menu-card, .about-image { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.kuze-fade-up { opacity: 0; transform: translateY(60px); transition: opacity 1.5s ease-out, transform 1.5s ease-out !important; }
.kuze-fade-up.is-visible { opacity: 1 !important; transform: translateY(0) !important; }
html body .special-menu-container .menu-card:hover, body .special-menu-container .menu-card:hover, .special-menu-container .menu-card:hover, html body #contact .menu-detail-btn:hover { transform: none !important; transform: translateY(0) !important; box-shadow: 0 0 35px rgba(202, 165, 203, 0.4) !important; }
html body .astrology-section .about-image .palette-main-title, body .palette-main-title { font-size: 1.5rem !important; margin-top: 15px !important; }
html body .astrology-section .about-image .palette-sub-title, body .palette-sub-title { font-size: 2.5rem !important; margin-bottom: 25px !important; }
html body .special-menu-container .menu-card, body .special-menu-container .menu-card { width: 100% !important; max-width: 100% !important; }

@media screen and (max-width: 1024px) {
    html body .astrology-section .about-image .palette-main-title { font-size: 1.5rem !important; }
    html body .astrology-section .about-image .palette-sub-title { font-size: 2.5rem !important; }
    html body .special-menu-container .menu-card, body .special-menu-container .menu-card { max-width: 94% !important; margin: 0 auto !important; }
}

@media screen and (min-width: 1025px) {
    html body .astrology-section, body .astrology-section { padding-top: 2rem !important; padding-bottom: 6rem !important; }
}

@media screen and (max-width: 768px) {
    html body #concept-astrology .concept-single-card, body #concept-astrology .concept-single-card, #concept-astrology .concept-single-card { max-width: calc(100% - 20px) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding: 25px 15px 40px 15px !important; }
    html body .special-menu-container, body .special-menu-container { padding: 0 10px !important; }
    html body .special-menu-container .menu-card, body .special-menu-container .menu-card { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }
}

@media screen and (max-width: 1024px) {
    .button { display: block !important; position: fixed; top: 15px; right: 15px; width: 46px; height: 46px; z-index: 99999; background: transparent !important; border: none !important; box-shadow: none !important; }
    .button span { display: block !important; position: absolute; width: 24px; height: 2px; background: #ffffff !important; left: 11px; transition: 0.3s ease-in-out; }
    .button span:nth-child(1) { top: 15px; }
    .button span:nth-child(2) { top: 22px; }
    .button span:nth-child(3) { top: 29px; }
    #check:checked ~ .button span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #check:checked ~ .button span:nth-child(2) { opacity: 0; }
    #check:checked ~ .button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .desktop-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(26, 15, 41, 0.95); z-index: 99998; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: 0.4s ease-in-out; }
    #check:checked ~ .desktop-menu { opacity: 1; pointer-events: auto; }
    .menu-main-left-container, .menu-main-right-container { position: static !important; width: 100% !important; height: auto !important; }
    #menu-main-left, #menu-main-right { display: flex; flex-direction: column; align-items: center; }
    #menu-main-left li, #menu-main-right li { width: 100% !important; margin: 15px 0 !important; background: none !important; text-indent: 0 !important; text-align: center; }
    #menu-main-left li a, #menu-main-right li a { color: #ffffff !important; font-size: 1.6rem; letter-spacing: 0.3rem; font-family: 'IM Fell English SC', serif !important; }
}

html body #concept-astrology .concept-single-card .card-image-part img, body #concept-astrology .concept-single-card .card-image-part img, #concept-astrology .concept-single-card .card-image-part img { border-radius: 10px !important; }
html body .astrology-section .menu-detail-btn, body .astrology-section .menu-detail-btn, .astrology-section .menu-detail-btn { background: transparent !important; color: #ffffff !important; border: 1px solid rgba(202, 165, 203, 0.6) !important; transition: all 0.3s ease !important; }
html body .astrology-section .menu-detail-btn:hover, body .astrology-section .menu-detail-btn:hover, .astrology-section .menu-detail-btn:hover { background: rgba(202, 165, 203, 0.1) !important; color: #caa5cb !important; border-color: #caa5cb !important; }

@media screen and (min-width: 1025px) {
    html body .special-menu-container .menu-card p.card-p, body .special-menu-container .menu-card p.card-p { font-size: 1.3rem !important; line-height: 1.9 !important; }
}

/* 💡 Cocoon設定でヘッダー色が変わるのを防ぐ、強制透明化の魔法 */
#header-container,
.header,
header {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* ==================================================================================
   🔮 炙り出し文字（スマホ完全対応版魔法）
===================================================================================== */
#reveal-poem .char {
    display: inline-block;
    opacity: 0 !important; /* スマホの初期表示を確実に透明化 */
    filter: blur(8px) !important; 
    transition: opacity 3s ease, filter 3s ease !important; /* ゆっくり3秒 */
    will-change: opacity, filter; /* スマホの滑らかな描画を助けるお守り */
}

/* 魔法が発動したとき */
#reveal-poem .char.appear {
    opacity: 1 !important;
    filter: blur(0) !important;
}

/* ==================================================================================
   🔮 PC用：ローディング完了後に背景画像を解放する魔法（完全制御版）
===================================================================================== */
@media screen and (min-width: 1025px) {
    /* WPの設定に頼らず、ローディング完了と同時にCSSから直接ランプを灯す */
    body.loaded {
        background: url(astrology-assets/images/lamp.webp) no-repeat 10% 0px / 10% auto, 
                    url(astrology-assets/images/lamp.webp) no-repeat 90% 0px / 10% auto !important;
        background-color: #1a0f29 !important; 
    }
}