@charset "utf-8";

.wrap {min-height: 100%; position: relative; padding-bottom: 60px;}
.wrap>img {max-width: 1080px; width: 100%; display: block; margin: 0 auto;}

footer#register {max-width: 1080px; width: 100%; background-color: #1e1e1e; color: #fff; text-align: left; border: none;
                  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 99;}
footer fieldset { border: none; padding: 30px 100px; display: flex; align-items: center;}

footer .regi {width: 100%;}
footer .regi input{border: none;}

footer .regi legend {font-size: 24px; font-weight: 400;}

footer .regi ul{margin: 20px 0 15px 0;}
footer .regi li input {height: 50px; width: 500px; font-size: 20px; padding-left: 10px; border-radius: 10px;}
footer .regi li:nth-of-type(1) {margin-bottom: 15px;}

footer .regi>div:nth-of-type(1) {font-size: 18px; font-weight: 300; display: inline;}

footer .regi .open {cursor: pointer; font-size: 18px; font-weight: 700;}

footer div.pc {padding: 0 0 14px 30px;}
footer div.pc button {border: none; width: 300px; height: 160px; background-color: #a20d0d; border-radius: 6px;
color: #fff; font-size: 36px; font-weight: 700; cursor: pointer; display: inline-block;}


    
.modal {display: none; position: fixed; top: 30%; left: 50%; transform:translate(-50%, -30%); width: 500px; height: 400px; background-color: #fff;
   border-radius: 15px; box-shadow: 0 5px 5px 0 rgba(0,0,0,0.2); padding: 20px;
    color: #232121; font-weight: 300; font-size: 16px; z-index: 9999;}
.modal p {width: 100%; height: 340px; overflow-y: scroll;}
.modal .close {position: absolute; top: 20px; right: 30px; float: right; cursor: pointer;}
.modal span{font-size: 32px; font-weight: 700; padding-left: 10px;}


    .bold {font-weight: 700;}




/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1000px){   
    
    .mobile{ display: none !important;}

    footer .regi li input {width: 100%;}

    .footer-link a {width: 100%; display: block; background-color: #a20d0d; height: 120px; text-align: center; line-height: 120px; font-size: 24px;
        font-weight: 400;}

}

@media screen and (max-width: 1000px){   
    .pc{ display: none !important;}
    
    .wrap {padding-bottom: 0px;}

    footer fieldset {padding: 15px 20px;}

    footer .regi legend {font-size: 20px; font-weight: 700;}

    footer .regi ul{margin: 10px 0; display: flex; height: 45px;}
    footer .regi ul li{width: 100%;}
    footer .regi li input {height: 45px; width: 100%; font-size: 14px; padding-left: 10px; border-radius: 6px; box-sizing: border-box;}
    footer .regi li:nth-of-type(1) {width: 90%;}
    footer .regi li:nth-of-type(2) {margin: 0 10px;}
    
    footer .regi>div:nth-of-type(1) {font-size: 14px; font-weight: 300;}
    
    footer .regi span.show {cursor: pointer; font-size: 12px; font-weight: 700;}
    footer .regi .open {font-size: 14px; font-weight: 700;}


    footer .regi li.mobile button {border: none; height: 45px; width: 100%; background-color: #a20d0d; border-radius: 6px;
        color: #fff; font-size: 16px; font-weight: 700;}

         
        .modal {width: 90%; height: 300px; background-color: #fff; font-size: 12px;}
        .modal p {width: 100%; height: 250px; overflow-y: scroll;}

        .modal span{font-size: 18px; font-weight: 700; padding-left: 10px;}

        .footer-link a {width: 100%; display: block; background-color: #a20d0d; height: 60px; text-align: center; line-height: 60px; font-size: 16px;
            font-weight: 700;}

}

@media screen and (max-width: 430px){
}
