@charset "UTF-8";

/*
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; }
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: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.3) !important; 
}

/* ==================================================================================
   🔮 全カード共通：共通の美レイアウト
===================================================================================== */
.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.3rem !important;  
    color: #caa5cb !important;      
    margin-bottom: 8px !important;
    font-weight: bold !important;
}
.special-menu-container .menu-card .card-h3 {
    font-size: 1.7rem !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: 0.95rem !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: 0.85rem !important;
    font-weight: bold !important;
    letter-spacing: 0.15em !important;
    transition: all 0.3s ease !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; }
.footer-address { width: 100%; padding: 20px 0; font-size: 0.7rem; text-align: center; font-family: 'IM Fell English SC', serif; text-transform: uppercase; line-height: 1.2rem; border-top: 1px #c7ad61 solid; color: #ffffff !important; }
#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: 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; background-color: #1a0f29 !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; }

    /* ★下の4つのメニューカードを完璧に縦一列に表示 */
    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; }
}

/* ==================================================================================
   ✨ 共通一元化ルール：すべてのセクションを100%確実にふんわりさせる魔法
===================================================================================== */

/* 1. 古いロックの完全解除：中身の画像やカードが透明になるバグを消し去り、確実に表示させるさ！ */
.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;
}

/* 2. 新しいふんわり魔法の準備：セクション全体を最初は透明にして、下に隠しておくさ */
.kuze-fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out !important;
}

/* 3. スクロールして画面に入った瞬間、元の美しい位置にフワッと戻すさ！ */
.kuze-fade-up.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 4. 【ホバー静止】カードやボタンにカーソルをのせた時の跳ね上がりだけを綺麗に消すよ */
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; /* ふんわり光るオーラは残すさ */
}

/* ==================================================================================
   ✨ 最終微調整：12星座たちの文字サイズ ＆ 4つの鍵カードの幅を完璧に大復活！
===================================================================================== */

/* 1. 【PC表示】12星座・10天体・12ハウスの文字サイズを美しく大きな状態に戻すさ！ */
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;
}

/* 2. 【PC表示】未来を拓く4つの鍵のカード幅を、縮まずに枠いっぱいまで広げる魔法！ */
html body .special-menu-container .menu-card,
body .special-menu-container .menu-card {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==================================================================================
   📱 タブレット・スマホ（1024px以下）でも小さく/狭くなりすぎないようにするお守り
===================================================================================== */
@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; 
    }
    
    /* 4つの鍵のカードにかかっていた「440px」の制限を外して、画面幅いっぱいに美しく広げるさ！ */
    html body .special-menu-container .menu-card,
    body .special-menu-container .menu-card {
        max-width: 94% !important; 
        margin: 0 auto !important;
    }
}

/* ==================================================================================
   ✨ PC表示時のセクション上下の余白（空間）を均等に美しく整える魔法
===================================================================================== */

@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 {
        /* 👇 86%の制限を解除し、下のカードの両端の隙間（10px×2）と全く同じ幅にピタッと合わせるさ！ */
        max-width: calc(100% - 20px) !important; 
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* 👇 幅が広がった分、中の文字が端っこに寄りすぎないように内側の余白も少しだけ美しく整えておくね */
        padding: 25px 15px 40px 15px !important; 
    }
}

/* ==================================================================================
   ✨ スマホ表示：「未来を拓く4つの鍵」カードの幅を他のカードと完全に揃える魔法
===================================================================================== */

@media screen and (max-width: 768px) {
    /* 1. 外側の箱の左右の余白を、上のカードたちと全く同じ「10px」にピタッと合わせるさ */
    html body .special-menu-container,
    body .special-menu-container {
        padding: 0 10px !important; 
    }
    
    /* 2. カード本体の幅の制限（94%など）を完全に解除して、揃えた余白の限界まで美しく広げる魔法！ */
    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) {
    /* 1. 三本線のボタン本体を右上に固定表示 */
    .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; }
    
    /* 2. タップした時に「×」印に優雅に切り替わるアニメーション */
    #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); }

    /* 3. 背景の深紫の全画面メニュー */
    .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; }
    
    /* 4. メニューの中の文字の配置と美しいフォント設定 */
    .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; }
}

/* ==================================================================================
   ✨ 「FIND YOUR OWN LIGHT」の上の画像をふんわり角丸にする魔法
===================================================================================== */
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 {
    /* 👇 ここで角の丸みを作っているさ！他のカードと同じ20pxにしてあるよ */
    border-radius: 10px !important; 
}

/* ==================================================================================
   ✨ PC版のボタンも、スマホと同じラベンダー枠の透明デザインに完全統一！
===================================================================================== */

/* 1. ボタンの基本デザインを透明＆ラベンダー枠に上書きするさ */
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;
}

/* 2. カーソルを乗せた時（ホバー時）の光り方も、スマホと同じ優雅な設定に揃えるよ */
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;                /* 枠線も少し濃く発色させるよ */
}

/* ==================================================================================
   ✨ PC表示：「未来を拓く4つの鍵」カード内の説明文を美しく見やすいサイズに変更
===================================================================================== */

@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 {
        /* 👇 ここが文字の大きささ！「1.2rem」や「1.3rem」など好きな数字に変えてみてね */
        font-size: 1.3rem !important; 
        
        /* 👇 文字と文字の間の隙間（行間）も、読みやすいように少しゆったりさせるよ */
        line-height: 1.9 !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を起点にする */
    right: 13%;  /* 右端からの距離だぜ。ベッドの真上に合わせるんだ */
    bottom: 23%; /* 下端からの距離だぜ。ベッドの上に重ねるんだ */
    
    /* サイズの調整だぜ。元の背景設定を参考に、少し大きめにしてみたぜ */
    width: 12%; 
    height: auto;
    
    /* ✨ 重なり順だぜ。ここが肝心！ */
    /* 動画（z-index: 0）の前、動く人物（z-index: 1）の後ろに配置するぜ */
    /* z-indexは小数点も使えるから、0.5にしておくのがスマートだな */
    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;  /* 綺麗なサイズをキープする */
}