/* https://digipress.digi-state.com/tech/simple-modal-window/ */
/* ****************
 * Open modal button (trigger)
 * *************** */
.md-btn-area {
    margin-bottom:50px;
}
.md-btn {
    border: 1px solid #7a7a7a;
    padding: 10px;
    margin: 5px;
    border-radius: 3px;
    cursor: pointer;
    background-color: #666;
    text-shadow: 0 -1px 0 #000;
    -webkit-box-shadow: 0 0 0 1px #222;
    box-shadow: 0 0 0 1px #222;
}
.md-btn:hover {
    background-color: #6e6e6e; 
}

/* ****************
 * Modal window
 * *************** */
/* sp */
@media screen and (max-device-width: 700px) {
    .modal {
        top: 5% !important;
        left: 5% !important;
        width: 90% !important;
        height: 90% !important;
    }
}
/* pc */
@media screen and (min-device-width: 699px) {
}

.modal {
    display: none;
    position: fixed;
    top: 10%;
    left: 30%;
    width: 40%;
    height: 80%;
    /*overflow-y: auto;*/
    padding: 60px 0% 0%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 30px;
    /*background-color: rgba(255,255,255,.08);*/
    background-color: #FFFFFF;
    /*text-shadow:0 1px 0 #333;*/
    color: #000;
    text-align: left;
    font-size: 14px;
    z-index: 9999;
}
.modal-sub {
	display: block;
    height: 92%;
    overflow-y: auto;
    padding: 0 10%;
}
.modal h2 {
    border-bottom:1px solid;
    padding-bottom:20px;
}

/* Second modal window */
.modal.two {
    color:lightblue;
}

/* Close button */
.modal .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,.2);
    cursor:pointer;
}
.modal .close:before,
.modal .close:after{
    position:absolute;
    top:4px;
    border:1px solid #484848;
    height:30px;
    content:"";
}
.modal .close:before {
    left:19px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.modal .close:after {
    right:19px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.modal .close span {
    display:none;
}

/* ****************
 * Background filter (blur)
 * *************** */
.bg-blur {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: url(#blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}