/*
Theme Name: Cocoon Child
Description: Cocoon用の子テーマです。IVE「Either Way」風のふわふわくすみカラー＆Y2K世界観。
Template: cocoon-master
Version: 1.2.0
/* ========================================
   ✨ 1. 全体のベースデザイン (Either Way World)
   ======================================== */
.eitherway-world {
    background: linear-gradient(145deg, #fff7fb 0%, #fefaf6 50%, #f4f8ff 100%);
    backdrop-filter: blur(6px);
    color: #6b5b5b;
    font-family: "Quicksand", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Meiryo", sans-serif;
    padding: 35px 22px;
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.25);
    line-height: 1.8;
    position: relative;
    overflow: hidden;
}

/* ほんのりキラ粒の装飾 */
.eitherway-world::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

.eitherway-world p {
    margin-bottom: 20px;
    font-size: 15px;
    letter-spacing: 0.05em;
}

/* ========================================
   🎀 2. ヘッダー・タイトル
   ======================================== */
.eitherway-header {
    text-align: center;
    margin-bottom: 30px;
}

.eitherway-level, .mia-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffb6c1, #ffd6e8);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.4);
    animation: fuwafuwa 3s ease-in-out infinite;
}

.eitherway-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(90deg, #ffb6c1, #ffc0cb, #f8b6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

/* ========================================
   🔮 3. ガラスカード・特殊ボックス
   ======================================== */

/* Y2K × オーロラガラスカード */
.mia-glass-card {
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 12px 40px rgba(255, 182, 193, 0.25);
    overflow: hidden;
}

.mia-glass-card::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 182, 255, 0.25), transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(173, 216, 255, 0.25), transparent 60%);
    animation: auroraMove 12s linear infinite;
    z-index: 0;
}

.mia-glass-card > * {
    position: relative;
    z-index: 1;
}

/* 音楽ボックス */
.eitherway-music-box, .mia-music-box {
    background: rgba(255, 255, 255, 0.8);
    border: 2px dashed #e8d3d8;
    padding: 25px;
    border-radius: 18px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 6px 18px rgba(255, 182, 193, 0.25);
}

/* ========================================
   🎨 4. コンポーネント（見出し・パレット・リスト）
   ======================================== */

/* 見出し */
.eitherway-world h3 {
    font-size: 19px;
    color: #8b6b74;
    margin: 40px 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.eitherway-world h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ffb6c1, #ffd6e8);
    border-radius: 10px;
}

/* カラーパレット */
.eitherway-palette {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}

.eitherway-color {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    border: 4px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 20px rgba(255, 182, 193, 0.25);
    transition: 0.3s ease;
}

.eitherway-color:hover { transform: scale(1.12) rotate(3deg); }
.eitherway-pink { background-color: #d9b8c4; }
.eitherway-beige { background-color: #eaddd3; color: #8b6b74; }

/* リスト・ボックス */
.eitherway-rules li, .mia-list li {
    background-color: #fff;
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(217, 184, 196, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

.eitherway-carrot-box {
    background-color: #fff;
    border: 2px solid #faeef0;
    padding: 25px;
    border-radius: 15px;
    margin-top: 20px;
    box-shadow: 0 8px 20px rgba(217, 184, 196, 0.15);
}

/* ========================================
   🛒 5. ショップボタン・アクションボタン
   ======================================== */
.eitherway-shop-buttons, .mia-shop-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.eitherway-shop-btn, .mia-shop-btn {
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
    color: #fff !important;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.eitherway-shop-btn:hover, .mia-shop-btn:hover { transform: translateY(-4px); }

.eitherway-btn-amazon, .mia-btn-amazon { background: linear-gradient(135deg, #f3a183, #f3c19d); }
.eitherway-btn-rakuten, .mia-btn-rakuten { background: linear-gradient(135deg, #e8a5b1, #f3c8d1); }
.eitherway-btn-qoo10, .mia-btn-qoo10 { background: linear-gradient(135deg, #a5c8e8, #c8e0f3); color: #6b5b5b !important; }

/* 次のレベルへボタン */
.eitherway-next-btn, .mia-levelup-btn {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #ffb6c1, #ffc0cb, #f8b6ff);
    color: #fff !important;
    padding: 18px 30px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none !important;
    margin-top: 30px;
    box-shadow: 0 8px 25px rgba(255, 182, 193, 0.5);
    animation: pulse 2s infinite;
}

/* ========================================
   🎬 6. アニメーション定義
   ======================================== */
@keyframes fuwafuwa {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes auroraMove {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-5%, 5%) rotate(2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* ========================================
   🌈 毎日開きたくなる！魔法のY2Kデザイン
   ======================================== */

/* --- 1. 全体のキャンバス（Either Wayの霧と魔法の粉） --- */
.eitherway-world, .mia-style-wrapper {
    background: linear-gradient(135deg, #fffafa 0%, #fdf2f8 30%, #f0f8ff 70%, #fff9f0 100%) !important;
    background-size: 400% 400%;
    animation: auroraBG 15s ease infinite; /* ゆっくり背景が動く魔法 */
    padding: 40px 24px;
    border-radius: 30px;
    box-shadow: 0 15px 45px rgba(255, 182, 193, 0.25);
    position: relative;
    overflow: hidden;
}

/* --- 2. 浮遊するガラスカード（透明感と魔法） --- */
.mia-glass-card, .eitherway-music-box {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px); /* すりガラス効果 */
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 12px 30px rgba(255, 182, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mia-glass-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(255, 182, 255, 0.3);
    background: rgba(255, 255, 255, 0.85) !important;
}

/* --- 3. Y2Kネオンタイポグラフィ --- */
.eitherway-title, .mia-card-title {
    font-size: 1.5rem !important;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(90deg, #ff85a2, #ffb6ff, #77ccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(255, 133, 162, 0.2));
    letter-spacing: 0.05em;
    margin-bottom: 25px;
}

/* --- 4. ぷっくりシールボタン（ボンボンキャンディ） --- */
.mia-sticker-btn, .mia-shop-btn, .mia-levelup-btn, .mia-choice-btn {
    position: relative;
    border-radius: 999px !important;
    padding: 16px 32px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s cubic-bezier(0.2, 0, 0.2, 1) !important;
    
    /* Y2Kらしい厚みと光沢 */
    box-shadow: 
        0 8px 0 rgba(0, 0, 0, 0.1), /* 台紙の影 */
        inset 0 -6px 8px rgba(0, 0, 0, 0.1), /* 内側のぷっくり感 */
        0 15px 25px rgba(255, 182, 193, 0.4) !important;
    border: 3px solid #fff !important;
}

/* ショップごとのキャンディカラー */
.mia-btn-amazon { background: linear-gradient(135deg, #ffb347, #ff9900) !important; }
.mia-btn-rakuten { background: linear-gradient(135deg, #ff9fb7, #ff6f9e) !important; }
.mia-btn-qoo10  { background: linear-gradient(135deg, #a5c8e8, #c8e0f3) !important; color: #6b5b5b !important; }

/* 押したときの「むにゅっ」とした反応 */
.mia-sticker-btn:active, .mia-shop-btn:active {
    transform: translateY(6px) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ボタンの上の「ツヤ」 */
.mia-sticker-btn::after, .mia-shop-btn::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 15%;
    width: 70%;
    height: 35%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
    border-radius: 999px;
    pointer-events: none;
}

/* --- 5. キラキラ魔法のアニメーション --- */
@keyframes auroraBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* マウスが重なると星が出る演出（CSSのみ） */
.mia-glass-card::after {
    content: "✨";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 24px;
    opacity: 0;
    transition: 0.3s;
}

.mia-glass-card:hover::after {
    opacity: 1;
    transform: rotate(20deg) scale(1.5);
}

/* --- 6. スクロールもなめらかに --- */
html {
    scroll-behavior: smooth;
}

/* スマホでの表示をより可愛く */
@media (max-width: 768px) {
    .eitherway-world { padding: 30px 15px; }
    .mia-shop-btn { width: 100%; max-width: none; font-size: 16px; }
}
/* ========================================
   🌆 Either Way × Magic Evening World
   ディズニー帰りの夕方みたいな世界
   ======================================== */

/* 空気感のグラデーション */
body {
    background: linear-gradient(
        180deg,
        #fff6fb 0%,
        #fdeef4 25%,
        #f7e8ff 50%,
        #e8f2ff 75%,
        #fff6e8 100%
    );
}

/* ========================================
   ☁ 魔法の粒（テーマパークの空気）
   ======================================== */

body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 2px, transparent 3px),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,0.7) 2px, transparent 3px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.6) 2px, transparent 3px);
    animation: magicDust 20s linear infinite;
    opacity:.6;
}

@keyframes magicDust{
    from{ transform:translateY(0px);}
    to{ transform:translateY(-120px);}
}


/* ========================================
   🌸 EitherWay世界カード
   ======================================== */

.mia-glass-card{
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.85),
        rgba(255,240,245,0.85),
        rgba(240,248,255,0.85)
    ) !important;

    backdrop-filter: blur(16px);

    border:1px solid rgba(255,255,255,0.8);

    box-shadow:
        0 20px 60px rgba(255,182,193,.25),
        0 10px 25px rgba(180,200,255,.15);

    transition: all .5s ease;
}

/* カード浮遊 */
.mia-glass-card:hover{

    transform:translateY(-10px) scale(1.02);

    box-shadow:
        0 35px 80px rgba(255,182,193,.35),
        0 15px 35px rgba(180,200,255,.25);

}

/* ========================================
   🌈 Either Wayタイトル
   ======================================== */

.mia-card-title{

    font-size:1.6rem;

    background: linear-gradient(
        90deg,
        #ff9bbd,
        #ffc6e7,
        #a7d3ff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    letter-spacing:.05em;

}

/* ========================================
   💌 メッセージ（静かな優しさ）
   ======================================== */

.mia-main-message{

    font-size:18px;

    color:#7b6a74;

    font-weight:600;

    text-align:center;

    margin:25px 0;

}

/* ========================================
   🌠 ボタンを夢のチケットっぽく
   ======================================== */

.mia-sticker-btn{

    background: linear-gradient(
        135deg,
        #ffb7d6,
        #ffd6f0,
        #bfe3ff
    ) !important;

    color:#fff;

    border-radius:999px;

    box-shadow:
        0 10px 0 rgba(255,170,200,.35),
        0 20px 30px rgba(255,170,200,.35);

}

/* 押したとき */
.mia-sticker-btn:active{

    transform:translateY(6px);

    box-shadow:0 3px 0 rgba(255,170,200,.35);

}

/* ========================================
   ✨ 星のきらめき
   ======================================== */

.mia-style-wrapper::after{

    content:"✨";

    position:absolute;

    right:10px;

    top:10px;

    font-size:24px;

    opacity:.6;

    animation: starTwinkle 3s infinite;

}

@keyframes starTwinkle{

    0%{transform:scale(1); opacity:.4;}
    50%{transform:scale(1.4); opacity:1;}
    100%{transform:scale(1); opacity:.4;}

}


/* ========================================
   🌆 夕方の余韻（Either Wayの感情）
   ======================================== */

.mia-style-wrapper{

    position:relative;

}

.mia-style-wrapper::before{

content:"";

position:absolute;

bottom:-60px;
left:-60px;

width:200px;
height:200px;

background:radial-gradient(
circle,
rgba(255,190,210,.35),
transparent 70%
);

filter:blur(40px);

}


/* ========================================
   📱 スマホ
   ======================================== */

@media (max-width:768px){

.mia-card-title{
font-size:1.4rem;
}

.mia-main-message{
font-size:17px;
}

}
/* ========================================
   🔮 ガラスカード（重なり修正版）
   ======================================== */

.mia-glass-card {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 22px;
    padding: 28px;
    margin: 28px 0;
    box-shadow:
        0 15px 40px rgba(255,182,193,.18),
        0 6px 20px rgba(180,200,255,.12);
    overflow: hidden;
}

/* オーロラ背景（サイズ縮小で重なり防止） */

.mia-glass-card::before {
    content:"";
    position:absolute;
    inset:-20%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,200,230,.18), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(200,220,255,.18), transparent 60%);
    animation: auroraMove 18s linear infinite;
    z-index:-1;
}

/* hoverも控えめに */

.mia-glass-card:hover{
    transform:translateY(-6px) scale(1.015);
    box-shadow:
        0 25px 60px rgba(255,182,193,.25),
        0 10px 30px rgba(180,200,255,.18);
}


/* ========================================
   🌸 Either Wayタイトル（静かな夕方）
   ======================================== */

.mia-card-title{
    font-size:1.55rem;
    font-weight:700;

    background: linear-gradient(
        90deg,
        #ff9fb9,
        #ffc8e6,
        #a8d6ff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    letter-spacing:.05em;

    margin-bottom:18px;
}


/* ========================================
   💌 メッセージ（優しいトーン）
   ======================================== */

.mia-main-message{
    font-size:18px;
    color:#7a6a73;
    text-align:center;
    line-height:1.9;
    margin:26px 0;
}


/* ========================================
   🌠 wrapperの重なり修正
   ======================================== */

.mia-style-wrapper{
    position:relative;
    z-index:0;
}

/* 夕方の光 */

.mia-style-wrapper::before{

    content:"";

    position:absolute;

    bottom:-40px;
    left:-40px;

    width:160px;
    height:160px;

    background:radial-gradient(
        circle,
        rgba(255,190,210,.28),
        transparent 70%
    );

    filter:blur(45px);

    z-index:-1;

}


/* 星 */

.mia-style-wrapper::after{

    content:"✨";

    position:absolute;

    right:12px;
    top:12px;

    font-size:22px;

    opacity:.6;

    animation: starTwinkle 4s infinite;

    pointer-events:none;

}


/* ========================================
   🌠 星のアニメ
   ======================================== */

@keyframes starTwinkle{

0%{
transform:scale(1);
opacity:.4;
}

50%{
transform:scale(1.35);
opacity:1;
}

100%{
transform:scale(1);
opacity:.4;
}

}


/* ========================================
   🌆 背景（ディズニー夕方）
   ======================================== */

body{

background:linear-gradient(
180deg,
#fff7fb 0%,
#fdeef4 30%,
#f5ecff 60%,
#e8f3ff 85%,
#fff6e8 100%
);

}


/* ========================================
   📱 モバイル
   ======================================== */

@media (max-width:768px){

.mia-glass-card{
padding:24px;
margin:22px 0;
}

.mia-card-title{
font-size:1.4rem;
}

.mia-main-message{
font-size:17px;
}

}/* ========================================
   🌆 Evening Fix
   カード重なり修正 + EitherWay夕方世界
   ======================================== */

/* -----------------------
   ガラスカード
----------------------- */

.mia-glass-card{

position:relative;
z-index:1;

background:linear-gradient(
145deg,
rgba(255,255,255,.88),
rgba(255,245,250,.85),
rgba(240,248,255,.85)
);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.7);

border-radius:22px;

padding:28px;

margin:34px 0;

box-shadow:
0 12px 30px rgba(255,182,193,.15),
0 6px 18px rgba(180,200,255,.12);

overflow:hidden;

transition:.4s ease;

}


/* オーロラ背景（縮小して干渉防止） */

.mia-glass-card::before{

content:"";

position:absolute;

top:-15%;
left:-15%;

width:130%;
height:130%;

background:
radial-gradient(circle at 30% 30%, rgba(255,200,230,.15), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(200,220,255,.15), transparent 60%);

animation:auroraMove 18s linear infinite;

z-index:-1;

}


/* hoverは静かに */

.mia-glass-card:hover{

transform:translateY(-6px);

box-shadow:
0 18px 40px rgba(255,182,193,.18),
0 10px 24px rgba(180,200,255,.15);

}


/* -----------------------
   wrapperの干渉修正
----------------------- */

.mia-style-wrapper{

position:relative;
z-index:0;

}


/* 夕方の光 */

.mia-style-wrapper::before{

content:"";

position:absolute;

bottom:-20px;
left:-20px;

width:140px;
height:140px;

background:radial-gradient(
circle,
rgba(255,190,210,.25),
transparent 70%
);

filter:blur(40px);

z-index:-1;

pointer-events:none;

}


/* 星 */

.mia-style-wrapper::after{

content:"✨";

position:absolute;

top:10px;
right:10px;

font-size:20px;

opacity:.6;

animation:starTwinkle 4s infinite;

pointer-events:none;

}


/* -----------------------
   EitherWayタイトル
----------------------- */

.mia-card-title{

font-size:1.55rem;

font-weight:700;

background:linear-gradient(
90deg,
#ff9fb9,
#ffc8e6,
#a8d6ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

letter-spacing:.04em;

margin-bottom:18px;

}


/* -----------------------
   メッセージ
----------------------- */

.mia-main-message{

font-size:18px;

color:#7a6a73;

text-align:center;

line-height:1.9;

margin:28px 0;

}


/* -----------------------
   背景
   ディズニー帰りの夕方
----------------------- */

body{

background:linear-gradient(
180deg,
#fff7fb 0%,
#fdeef4 30%,
#f5ecff 60%,
#e8f3ff 80%,
#fff6e8 100%
);

}


/* -----------------------
   星アニメ
----------------------- */

@keyframes starTwinkle{

0%{
transform:scale(1);
opacity:.4;
}

50%{
transform:scale(1.3);
opacity:1;
}

100%{
transform:scale(1);
opacity:.4;
}

}


/* -----------------------
   モバイル
----------------------- */

@media (max-width:768px){

.mia-glass-card{

padding:24px;
margin:26px 0;

}

.mia-card-title{
font-size:1.4rem;
}

.mia-main-message{
font-size:17px;
}

}/* =================================
   FINAL DESIGN FIX
   ================================= */

body{
background:linear-gradient(
180deg,
#fff7fb 0%,
#fdeef4 30%,
#f5ecff 60%,
#e8f3ff 80%,
#fff6e8 100%
) !important;
}


/* ガラスカード */

.mia-glass-card{

background:linear-gradient(
145deg,
rgba(255,255,255,.9),
rgba(255,240,248,.9),
rgba(240,248,255,.9)
) !important;

border-radius:22px !important;

backdrop-filter:blur(14px);

box-shadow:
0 15px 40px rgba(255,182,193,.18),
0 6px 20px rgba(180,200,255,.12) !important;

padding:28px !important;

margin:30px 0 !important;

position:relative;

overflow:hidden;

}


/* オーロラ */

.mia-glass-card::before{

content:"";

position:absolute;

top:-20%;
left:-20%;

width:140%;
height:140%;

background:
radial-gradient(circle at 30% 30%, rgba(255,200,230,.15), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(200,220,255,.15), transparent 60%);

animation:auroraMove 18s linear infinite;

z-index:0;

}


/* タイトル */

.mia-card-title{

font-size:1.55rem !important;

background:linear-gradient(
90deg,
#ff9fb9,
#ffc8e6,
#a8d6ff
) !important;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}


/* メッセージ */

.mia-main-message{

font-size:18px !important;

color:#7a6a73 !important;

text-align:center;

line-height:1.9;

}/* =================================
   CARD OVERLAP FIX
   ================================= */

.mia-glass-card{
position:relative;
z-index:2;
overflow:hidden;
}

/* オーロラ範囲を縮小 */

.mia-glass-card::before{

inset:-10% !important;

width:auto !important;
height:auto !important;

z-index:-1 !important;

pointer-events:none;

}/* =================================
   WRAPPER FIX
   ================================= */

.mia-style-wrapper{

position:relative;
z-index:0;

}

.mia-style-wrapper::before,
.mia-style-wrapper::after{

z-index:-1 !important;

}/* =================================
   GLASS TRANSPARENCY TUNE
   ================================= */

.mia-glass-card{

background:linear-gradient(
145deg,
rgba(255,255,255,.75),
rgba(255,245,250,.72),
rgba(240,248,255,.72)
) !important;

backdrop-filter:blur(12px);

}/* ========================================
   ✨ タイトルの虹色（🌈）をクッキリさせる魔法
   ======================================== */

.mia-card-title, .eitherway-title {
    /* 1. 虹色の色味を少しだけ濃くして、背景に負けないようにしたよ♡ */
    background: linear-gradient(90deg, #ff6b8b 0%, #a855f7 50%, #3b82f6 100%) !important;
    
    /* 2. 文字だけに色をのせる魔法（ここがズレると文字が見えなくなっちゃうの） */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* 3. 【重要！】文字の後ろに白い「光のフチ」をつけて、文字を浮き立たせたよ♡ */
    /* これで虹色でも文字がハッキリ読めるようになるんじゃないかな？ */
    filter: drop-shadow(0px 2px 3px rgba(255, 255, 255, 0.9)) !important;

    /* 4. もし虹色が効かないブラウザがあったときのために、予備の色も決めておくね */
    color: #ff85a2; 

    /* 5. 文字が詰まって見えないように、少しだけ横幅に余裕を持たせたよ */
    letter-spacing: 0.08em !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    padding: 5px 0 !important;
}

/* 📱 スマホで見るときは、さらにもう少し文字を太くして読みやすくするね */
@media (max-width: 768px) {
    .mia-card-title, .eitherway-title {
        font-size: 1.35rem !important;
        font-weight: 900 !important; /* 文字を一番太くして、虹色に負けない存在感にっ！ */
    }
}/* =========================
   🎮 Switch風ピコボタン
   ========================= */

.ds-pico-button{

display:inline-flex;
align-items:center;
justify-content:center;

background:linear-gradient(
145deg,
#ffb6c1,
#ff9bb0
);

color:white;

font-weight:700;

padding:8px 18px;

border-radius:999px;

cursor:pointer;

border:3px solid white;

box-shadow:
0 6px 0 #e48aa0,
0 12px 20px rgba(255,160,190,.4);

transition:all .15s ease;

font-size:14px;

}

/* ホバー */

.ds-pico-button:hover{

transform:translateY(-2px) scale(1.05);

box-shadow:
0 8px 0 #e48aa0,
0 15px 25px rgba(255,160,190,.5);

}

/* 押した時 */

.ds-pico-button:active{

transform:translateY(4px);

box-shadow:
0 2px 0 #e48aa0;

}.mia-forest-title{
color:#ffb6c1;
font-size:1.5em;
margin:0;
text-shadow:2px 2px 0 #fff;
}

.mia-divider{
margin:30px 0;
opacity:.2;
}

.mia-magic-title{
color:#ff9bb0;
font-size:1.2em;
}

.mia-magic-text{
font-size:1.05em;
font-weight:600;
color:#7a6a73;
}