@charset "UTF-8";
  body.lower {
    background: url(_img/bg.jpg) center top no-repeat #1f4b85;
  }
#birthday{width:660px;margin:100px auto; text-align:center; position:relative; }
.sceneWrap{
    position: relative;
    width: 100%; height:575px;
    /* 高さは背景画像に合わせる */
}
.scene{width:100%; height:auto; margin:0 auto; display:block; position: absolute; z-index:1;  inset: 0; opacity: 0; pointer-events: none;}
.scene.active {
  opacity: 1;
  pointer-events: auto;
}
.changeBtn {
  cursor: pointer;
}
.hukidasi{position:absolute; background:#FFF; border:2px solid #000; text-align:left; z-index:2; border-radius:20px; padding:30px 30px 60px ; top:360px;height:220px; left:5%; width:90%; box-shadow: 5px 5px 0 #000; font-size:32px;}
.changeBtn{position:absolute; bottom:-40px; right:0; left:0; margin:0 auto; width:30%; z-index:3; cursor:pointer;}
.endcopy{position:absolute; width:90%; top:330px; right:0; left:0; margin:0 auto; z-index:3;}

@media screen and (max-width: 767px) {
  body.lower {
    background: url(_img/bg.jpg) center top no-repeat #1f4b85;background-size: 250% auto;;
  }
#birthday{width:96%;height: 130vw;margin:10vw auto 0;}
.sceneWrap{
    position: relative;
    width: 100%; height:90vw;
    /* 高さは背景画像に合わせる */
}
.hukidasi{position:absolute; background:#FFF; border:2px solid #000; text-align:left; z-index:2; border-radius:20px; padding:10px 15px 30px ; top:55vw;height:37vw; left:5%;
   width:90%; box-shadow: 5px 5px 0 #000; font-size:5.5vw;}
.changeBtn{position:absolute; bottom:-40px; right:0; left:0; margin:0 auto; width:50%; z-index:3; cursor:pointer;}
.endcopy{position:absolute; width:90%; top:50vw; right:0; left:0; margin:0 auto; z-index:3;}
}