@charset "utf-8";


.close-icon[data-v-2f34acb8] {
  position: absolute;
  right: 16px;
  cursor: pointer
}
.close-icon:before {
  content: '\e14c';
}
.modal-content {
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 3 ;
    border-bottom-left-radius: 2px ;
    border-bottom-right-radius: 2px ;
    border-top-left-radius: 2px ;
    border-top-right-radius: 2px ;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px ;
    box-sizing: border-box ;
    line-height: 21px ;
    max-height: 90% ;
    max-width: 290px ;
    overflow-y: auto ;
    pointer-events: auto ;
    transition-delay: 0s ;
    transition-duration: 0.3s ;
    transition-property: all ;
    transition-timing-function: ease-in-out ;
    width: 290px ;
}
.modal-content-graduate {
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 3 ;
    border-bottom-left-radius: 2px ;
    border-bottom-right-radius: 2px ;
    border-top-left-radius: 2px ;
    border-top-right-radius: 2px ;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px ;
    box-sizing: border-box ;
    line-height: 21px ;
    max-height: 90% ;
    overflow-y: auto ;
    pointer-events: auto ;
    transition-delay: 0s ;
    transition-duration: 0.3s ;
    transition-property: all ;
    transition-timing-function: ease-in-out ;
    width: 90% ;
}
.overlay {
    z-index: 3 ;
    display: none ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
    background-color: rgba( 0,0,0, 0.3 ) ;
}
.modal-header {
    align-items: center ;
    background-attachment: scroll ;
    background-clip: border-box ;
    background-color: rgb(228, 228, 228) ;
    background-image: none ;
    background-origin: padding-box ;
    background-position-x: 0% ;
    background-position-y: 0% ;
    border-top-left-radius: 2px ;
    border-top-right-radius: 2px ;
    box-sizing: border-box ;
    display: flex ;
    flex-wrap: wrap ;
    height: 42px;
    line-height: 32px ;
    padding-left: 20px;
    padding-right: 16px ;
    padding-top: 8px ;
}
.modal-header-2line {
    align-items: center ;
    background-attachment: scroll ;
    background-clip: border-box ;
    background-color: rgb(228, 228, 228) ;
    background-image: none ;
    background-origin: padding-box ;
    background-position-x: 0% ;
    background-position-y: 0% ;
    border-top-left-radius: 2px ;
    border-top-right-radius: 2px ;
    box-sizing: border-box ;
    display: flex ;
    flex-wrap: wrap ;
    height: 75px;
    line-height: 21px ;
    padding-left: 20px;
    padding-right: 16px ;
    padding-top: 8px ;
}
.modal-body {
    border-bottom-left-radius:2px ;
    border-bottom-right-radius:2px ;
    box-sizing:border-box ;
    display:block ;
    font-size:14px ;
    line-height:21px ;
    padding-bottom:16px ;
    padding-left:16px ;
    padding-right:16px ;
    padding-top:16px ;
    text-align:left ;
    width:290px ;
}
.modal-title {
    display: block ;
    font-size: 13px ;
    font-weight: 700 ;
    height: 32px ;
    padding-bottom: 0px ;
    padding-left: 0px ;
    padding-right: 0px ;
    padding-top: 0px ;
    text-align: left ;
}

.modal-title-2line {
    display: block ;
    font-size: 13px ;
    font-weight: 700 ;
    height: 32px ;
    padding-bottom: 0px ;
    padding-left: 0px ;
    padding-right: 0px ;
    padding-top: 0px ;
    text-align: left ;
    width: 330px;
}

@media screen and (min-width:1000px) {

  .close-icon[data-v-2f34acb8] {
    color: #757575;
  }
  .modal-content {
    max-width: 392px;
    width: 392px;
    border-radius: 12px;
  }
  .overlay {
    background-color: rgba( 0,0,0, 0.7 );
  }
  .modal-header {
    border-bottom: 1px solid #d1d1d1;
  }
  .modal-body {
    font-size: 12px;
    padding-bottom: 20px;
    width: 392px;
  }
  .modal-title {
    font-size: 16px;
}

@media screen and (min-width: 0px) and (max-device-width: 999px) {
  .layout{
    margin-bottom: 20px;
  }

  .modal-header {
    height: 56px ;
    padding-bottom: 8px;
    padding-left: 16px ;
  }

  .modal-title-2line {
    display: block ;
    font-size: 13px ;
    font-weight: 700 ;
    height: 32px ;
    padding-bottom: 0px ;
    padding-left: 0px ;
    padding-right: 25px ;
    padding-top: 0px ;
    text-align: left ;

  }

}

.modal-contract{
    width:632px;
    max-width:9999px;
    padding:65px 30px 50px;
    border-radius:6px;
}
.modal-contract .modal-title{
    height:auto;
    margin-bottom:28px;
    font-size:18px;
    line-height:36px;
    text-align:center;
}
.modal-contract iframe{
    width:100%;
    height:252px;
    padding:5px;
    border:1px solid #d9d9d9;
    border-radius:6px;
}
.modal-contract .modal-contract-close{
    width:270px;
    margin:20px auto 0;
    font-size:16px;
    font-weight:bold;
    line-height:44px;
    text-align:center;
    color:#333;
    background-color: #ebebeb;
    border-radius:8px;
    cursor:pointer;
}
.modal-contract .pc-none{
    display:none;
}
@media screen and (max-width:999px){
    .modal-contract{
        width:calc(100% - 32px);
        max-width:868px;
        margin:auto;
        padding:36px 15px;
    }
    .modal-contract .modal-title{
        margin-bottom:22px;
        line-height:28px;
    }
    .modal-contract iframe{
        height:220px;
    }
    .modal-contract .modal-contract-close{
        width:100%;
        margin-top:15px;
        font-size:14px;
        line-height:36px;
    }
    .modal-contract .pc-none{
        display:block;
    }
}