/*自作ポップアップウィンドウ*/
.popup_wrap {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  display: none;
}

.popup_wrap #popup_black{
  position: absolute;
  top: 0;
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 901;
  opacity: 0.5;
}

.popup_main{
  position: absolute;
  width:400px;
  height:200px;
  top:calc( 50% - 101px );
  left:calc( 50% - 201px );
  z-index: 910;
  background: #fff;
  border-radius: 10px;
  border:0;
  box-shadow: 0 0 30px #999;
}
.popup_main > h4{
  background: #ccc;
  padding:5px 5px 5px 20px;
  border-radius: 5px 5px 0 0;
  height: 24px;
}

.popup_main > div#popup_main_content > p.message{
  margin-bottom: 36px;
}

.popup_main > h4 > button.popup_del,
.popup_main > div#popup_main_content > button.popup_enter{
  float: right;
  padding: 0;
  margin: 0;
  height: 24px;
  width: 28px;
  border-radius: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.popup_main > div#popup_main_content > button.popup_enter{
  height: 26px;
  bottom: 20px;
  float: none;
  left: calc(50% - 15%);
  position: absolute;
  width: 30%;
}

.popup_main > h4 > button.popup_del:hover,
.popup_main > div#popup_main_content > button.popup_enter:hover{
  border: 1px solid #999;
}

.popup_main > h4 > button.popup_del:active,
.popup_main > div#popup_main_content > button.popup_enter:active{
    box-shadow:inset 0px 0px 2px #81BEF7;
}

.popup_main > #popup_main_content{
  display: block;
  padding: 20px;
  position: relative;
}


@media screen and (max-width: 640px) {
  .popup_main{
    width:320px;
    height:240px;
    top:calc( 50% - 121px );
    left:calc( 50% - 161px );
  }
}

@media screen and (max-width: 480px) {
  .popup_main{
    width:240px;
    height:160px;
    top:calc( 50% - 81px );
    left:calc( 50% - 121px );
  }
}