.modal_iframe {
 width: 100%;
 height: 100%;
}

.modal-open {
 display: inline-block;
 margin: 10px;
 background-color: #666666;
 color: #ffffff;
}

.modal-open a {
 display: inline-block;
 color: #ffffff;
 text-decoration: none;
}
.modal {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 2;
 width: 100%;
 height: 100%;
}
.modal:not(:target) {
 visibility: hidden;
 opacity: 0;
 transition: opacity .5s, visibility .5s;
}
.modal:target {
 visibility: visible;
 opacity: 1;
 transition: opacity .5s, visibility .5s;
}
.modal .overlay {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000000;
 opacity: .7;
}
.modal-wrapper {
 position: absolute;
 top: 50%;
 left: 50%;
 max-width: 80vw;
 height: 80vh;
 aspect-ratio: 1.6/2;
 background-color: #ffffff;
 transform: translate(-50%, -50%);
}
.modal-contents {
 box-sizing: border-box;
 width: 100%;
 height: 100%;
}
.modal-content {
 overflow-y: auto;
 padding: 2vmin;
 height: calc(100% - 4vmin);
}
.modal-close {
 position: absolute;
 top: 5px;
 right: 10px;
 text-decoration: none;
}

/* ///////////////////////////// */
@media screen and (max-width:1000px) {
 .modal-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  aspect-ratio: auto;

/* max-width: 900px; */
  /* height: 80vh; */
  background-color: #ffffff;
  transform: translate(-50%, -50%);
 }
 .modal_iframe {
  width: 100%;
  height: 100%;
 }
}