/* ===== 全体 ===== */
body{
    margin:0;
    font-family:"Zen Maru Gothic",sans-serif;
    background:linear-gradient(180deg,#fffdef,#ffe19c);
    color:#444;
    height:100vh;
    overflow:hidden;
    position:relative;
}

/* ===== 中央コンテンツ ===== */
.container{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    position:relative;
    z-index:2;
}

/* ===== タイトル ===== */
.title{
    font-size:56px;
    font-weight:700;
    letter-spacing:2px;

    background:linear-gradient(90deg,#ecc762,#c0a082);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 4px 10px rgba(232,106,166,.15);

    animation:float 3s ease-in-out infinite;
}

/* ===== 花ライン ===== */
.flower-line{
    margin:12px 0;
    font-size:24px;
    color:#e8a56a;
}

/* ===== サブタイトル ===== */
.subtitle{
    margin-top:12px;
    font-size:16px;
    color:#777;
    line-height:1.8;
    animation:fadeIn 2s ease-in-out;
}

/* ===== はじめるボタン ===== */
.start-btn{
    margin-top:30px;
    padding:14px 34px;

    background:#e86aa6;
    color:white;

    border-radius:999px;
    text-decoration:none;
    font-size:15px;
    font-weight:600;

    box-shadow:0 6px 15px rgba(232,106,166,.25);

    transition:.3s;
}

.start-btn:hover{
    background:#ff85b8;
    transform:scale(1.05);
}

/* =========================
   花イラスト
========================= */

.flowers{
    position:fixed;
    top:50%;
    transform:translateY(-50%);

    height:78vh;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    z-index:1;
    pointer-events:none;
}

.left{
    left:5%;
}

.right{
    right:5%;
}

.flower{
    width:280px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.08));
    animation:sway 5s ease-in-out infinite;
}

.flower1{ animation-delay:0s; }
.flower2{ animation-delay:1s; }
.flower3{ animation-delay:2s; }

.flower4{ animation-delay:.5s; }
.flower5{ animation-delay:1.5s; }
.flower6{ animation-delay:2.5s; }

/* ===== メニューボタン ===== */
#menuBtn{
    position:fixed;
    top:25px;
    left:50%;
    transform:translateX(-50%);

    width:55px;
    height:55px;

    border-radius:50%;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(10px);

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

    font-size:28px;
    color:#e8a56a;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    cursor:pointer;
    z-index:10;

    transition:.3s;
}

#menuBtn:hover{
    transform:translateX(-50%) scale(1.1);
}

/* ===== メニュー ===== */
.menu{
    display:none;

    position:fixed;
    top:95px;
    left:50%;
    transform:translateX(-50%);

    background:rgba(255,255,255,.95);

    border-radius:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);

    padding:12px;

    backdrop-filter:blur(8px);

    z-index:10;
}

.menu.show{
    display:block;
}

.menu a{
    display:block;
    padding:10px 16px;

    text-decoration:none;
    color:#e8a56a;
    font-weight:bold;

    border-radius:10px;

    transition:.2s;
}

.menu a:hover{
    background:#fff0f6;
}

/* ===== アニメーション ===== */

@keyframes sway{
    0%{
        transform:rotate(-4deg) translateY(0);
    }

    50%{
        transform:rotate(4deg) translateY(-10px);
    }

    100%{
        transform:rotate(-4deg) translateY(0);
    }
}

@keyframes float{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   タブレット
========================= */
@media(max-width:1024px){

    .flower{
        width:150px;
    }

    .left{
        left:2%;
    }

    .right{
        right:2%;
    }
}

/* =========================
   スマホ
========================= */
@media(max-width:768px){

    .flower{
        width:95px;
    }

    .flowers{
        height:72vh;
    }

    .title{
        font-size:38px;
    }

    .subtitle{
        font-size:14px;
    }

    .start-btn{
        padding:12px 28px;
    }

    .left{
        left:0;
    }

    .right{
        right:0;
    }
}