@charset "utf-8";

#about .modal-wrapper {
}
.modal-trigger_btn {
}
.modal-trigger_btn a {
}

.modal-wrap {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s linear, visibility 0.3s linear;
/*z-index: -1;*/
z-index: 9994;
}
.modal-wrap .overlay {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
cursor: pointer;
}
.modal-wrap .modal-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
padding: 1em;
/*background-color: #FFF;*/
overflow-y: scroll;
width: 80%;
height: 70vh;
}
@media print, screen and (max-width: 767px)	{
.modal-wrap .modal-inner {width: 90%;top: 45%;height: 70vh;}}
@media print, screen and (max-width: 360px)	{
.modal-wrap .modal-inner {width: 90%;top:45%;height: 80vh;}}

@media screen and (min-width:768px) and ( max-width:1299px) {
.modal-wrap .modal-inner {width: 70%;top: 45%;}}
@media print, screen and (min-width: 1300px) {
.modal-wrap .modal-inner {width: 900px;}}


.modal-wrap .modal-close {
  position: fixed;
  top: 0px;
  right: 2.3%;
  height: 60px;
  width: 60px;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  z-index: 9995;
  background-color: #8b0a00;
  /*▼画像端配置ver
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-image: url("../img/popup_close.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 48px 48px;
  */
}
.dli-close {
  display: inline-block;
  vertical-align: middle;
  color: #A27F35;
  line-height: 1;
  width: 35px;
  margin: 0 auto 0 auto;
  height: 0.18em;
  background: currentColor;
  border-radius: 0em;
  position: relative;
  transform: rotate(45deg);
}
.dli-close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
/* CSSハック　Safari */
_::-webkit-full-page-media, _:future, :root .modal-wrap .modal-close {
  position: fixed;
  top: 0px;
  right: 2.7%;
  height: 59px;
  width: 60px;
}
_::-webkit-full-page-media, _:future, :root .modal-wrap .dli-close {
  width: 34px;
  margin: 0 auto 0 auto;
  height: 0.18em; 
}

@media (min-width: 769px) {
        .modal-wrap .modal-close {
        top: 0px;
        right: 4.55%;
        height: 60px;
        width: 60px;

        }
        .dli-close {
          width: 50px;
          margin: 0 auto 0 auto;
          height: 0.18em;
        }
        /* CSSハック　Safari */
        _::-webkit-full-page-media, _:future, :root .modal-wrap .modal-close {
          position: fixed;
          top: 0px;
          right: 4.6%;
          height: 59px;
          width: 60px;
        }
        _::-webkit-full-page-media, _:future, :root .modal-wrap .dli-close {
          width: 50px;
          margin: 0 auto 0 auto;
          height: 0.18em;
        }
}

.modal-wrap.show {
opacity: 1;
visibility: visible;
/*z-index: 10000;*/
z-index: 9995;
}