@charset "UTF-8";
img {
  width: 100%;
}

/*--------------------------------------------------
**************************************************
モーダル表示
**************************************************
--------------------------------------------------*/
.modal_scenery {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  transition: 1s;
}
.modal_scenery.modal-open {
  pointer-events: auto;
  opacity: 1;
}
.modal_scenery .close{
  position: absolute;
  width: 50px;
  height: 50px;
  top: -15px;
  right: -10px;
  cursor: pointer;
  z-index: 10000;
}
.modal_scenery .close::before{
  position: absolute;
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  transform: rotate(45deg);
  z-index: 25;
}
.modal_scenery .close::after{
  position: absolute;
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 25;
}

.modal {
  position: relative;
  width: calc(100% - 20px);
  height: calc(100vh - 20px);
  margin: 10px auto 0px auto;
  background: url(../imgs/top/modal.jpg) center center / contain no-repeat;
  z-index: 50;
}