/* =========================================
   Petal Note
   Stamp.css
========================================= */


/* ---------- リセット ---------- */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}




/* ---------- 全体 ---------- */


body{

    font-family:"Zen Maru Gothic",sans-serif;

    background:#f7f4ee;

    color:#444;

    overflow:hidden;

}




/* ---------- 背景 ---------- */


.background{

    position:fixed;

    inset:0;


    background-image:


    linear-gradient(

    rgba(255,250,245,.35),

    rgba(255,250,245,.35)

    ),


    url("images/background.jpg");



    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;


    z-index:-2;


    animation:bgZoom 25s ease-in-out infinite alternate;


}



.background::after{


    content:"";


    position:absolute;


    inset:0;


    backdrop-filter:blur(2px);


}







/* =========================================
   メインカード
========================================= */


.container{


    width:390px;


    height:760px;



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



    backdrop-filter:blur(18px);



    border-radius:38px;



    box-shadow:



    0 25px 60px rgba(0,0,0,.12),


    0 8px 20px rgba(0,0,0,.08);




    position:absolute;


    top:50%;


    left:50%;



    transform:translate(-50%,-50%);




    padding:45px 35px;



    text-align:center;



    overflow-y:auto;



}







/* =========================================
   タイトル
========================================= */


.title{


    font-family:"Cormorant Garamond",serif;



    font-size:50px;



    color:#7d6958;



    font-weight:600;



    letter-spacing:2px;



    margin-bottom:15px;



}




.sub{


    color:#777;



    font-size:15px;



    line-height:2;



    margin-bottom:30px;


}







/* =========================================
   スタンプ一覧
========================================= */


.stamp-grid{


    display:grid;



    grid-template-columns:repeat(2,1fr);



    gap:18px;


}






/* =========================================
   スタンプカード
========================================= */


.stamp{


    background:white;



    border-radius:25px;



    padding:18px;



    box-shadow:



    0 8px 20px rgba(0,0,0,.08);



    transition:.3s;



    animation:fadeUp .6s ease;



}



.stamp:hover{


    transform:translateY(-5px);


}






.stamp img{


    width:110px;


    height:110px;


    object-fit:contain;


}






.stamp h3{


    margin-top:12px;



    color:#af8c8e;



    font-size:18px;


}





.stamp p{


    margin-top:8px;



    color:#777;



    font-size:13px;


}








/* =========================================
   未取得
========================================= */


.locked{


    opacity:.45;


}



.question{


    width:110px;



    height:110px;



    border-radius:50%;



    background:#eee;



    display:flex;



    justify-content:center;



    align-items:center;



    margin:auto;



    font-size:60px;



    color:#999;


}







/* =========================================
   ハンバーガー
========================================= */


.menu-btn{


    position:fixed;



    top:35px;



    left:35px;



    background:none;



    border:none;



    font-size:30px;



    color:#6e5d4f;



    cursor:pointer;



    z-index:1000;


}







/* =========================================
   サイドメニュー
========================================= */


#sideMenu{


    position:fixed;



    left:-280px;



    top:0;



    width:260px;



    height:100vh;



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



    backdrop-filter:blur(18px);



    box-shadow:



    8px 0 35px rgba(0,0,0,.08);



    transition:.45s;



    z-index:999;



    padding-top:90px;


}




#sideMenu.open{


    left:0;


}





.menu-header{


    position:absolute;



    top:28px;



    left:28px;


}




.menu-header h2{


    font-family:"Cormorant Garamond",serif;



    font-size:30px;



    color:#7d6958;


}






#sideMenu a{


    display:block;



    padding:18px 35px;



    color:#666;



    text-decoration:none;



    transition:.3s;


}



#sideMenu a:hover{


    color:#af8c8e;



    background:#fff3eb;


}






/* =========================================
   オーバーレイ
========================================= */


#overlay{


    position:fixed;



    inset:0;



    background:rgba(0,0,0,.18);



    opacity:0;



    visibility:hidden;



    transition:.4s;



    z-index:998;


}




#overlay.show{


    opacity:1;



    visibility:visible;


}







/* =========================================
   CLOSE
========================================= */


.close-btn{


    position:absolute;



    bottom:40px;



    left:30px;



    width:190px;



    padding:12px;



    border:none;



    border-radius:30px;



    background:#af8c8e;



    color:white;



    cursor:pointer;


}








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


@keyframes fadeUp{


from{


    opacity:0;


    transform:translateY(20px);


}


to{


    opacity:1;


    transform:translateY(0);


}


}




@keyframes bgZoom{


from{


    transform:scale(1);


}


to{


    transform:scale(1.08);


}


}







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


@media(max-width:600px){



body{

    overflow:auto;

}



.container{


    width:100%;



    height:100vh;



    border-radius:0;



    box-shadow:none;



    padding:70px 25px;


}



.stamp-grid{


    grid-template-columns:1fr;


}



.menu-btn{


    top:20px;



    left:20px;



    font-size:24px;


}



.title{


    font-size:40px;


}


}