/*背景のデザイン*/
.modal-overlay {
    position          : absolute ;
    z-index           : +10 ;
    display           : flex ;
    justify-content   : center ;
    top               : 0 ;
    right             : 0 ;
    pointer-events    : auto ;
    align-items       : center ;
    background-color  : rgba(0, 0, 0, 0) ;
    transition        : opacity 1000ms linear ;
}

.modal.is-open .modal-overlay { opacity : 1 ; pointer-events : auto ; }

/*ウィンドウのデザイン*/
.modal-container {
    position            : fixed ;
    z-index             : +10 ;
    top                 : 7% ;
    right               : 1% ;
    display             : flex ;
    flex-flow           : column ;
    border              : 3px solid rgba(0, 40, 70, 0.75) ;
    transform           : translateX(200%) ;
    transition          : transform 1000ms ease-in-out ;
    filter              : drop-shadow(1px 1px 5px rgba(0,0,0,0.2)) ;
}

.modal.is-open .modal-container { transform: translateX(0) ; }

/*開くボタンのデザイン*/
.put-open {
    position            : fixed ;
    z-index             : +10 ;
    top                 : 0 ;
    right               : 1.5% ;
    height              : 3vmin ;
    margin              : 1vmin 0 1vmin 0;
    background-color    : rgba(15, 50, 70, 0) ;
    border              : 1px solid rgba(255,255,255,0.6) ;
    border-radius       : 0.25vw ;
    cursor              : pointer ;
    font-size           : 1.5vmin ;
    color               : #fff ;
    line-height         : normal ;
    font-weight         : 500 ;
    letter-spacing      : 0.1vmin ;
    text-decoration     : none ;
}
.put-open:hover { background-color: rgba(230, 250, 255 ,0.5) ; }

/*閉じるボタンのデザイン*/
.close {
    position            : fixed ;
    right               : 0 ;
    display             : flex ;
    justify-content     : center ;
    align-items         : center ;
    background-color    : rgba(0, 102, 153, 0) ;
    color               : #ffffff ;
    font-size           : 1.4vw ;
    line-height         : normal ;
    cursor              : pointer ;
    height              : 5% ;
    border              : none ;

}
.close:hover { color : #9cf ; }

.modal-tai {
    display             : flex ;
    justify-content     : start ;
    align-items         : center ;
    width               : auto ;
    height              : 4% ;
    background-color    : rgba(0, 40, 70, 0.75) ;
    border-left         : #fff 1px ;
    padding             : 1% 0.75vmin 1% 0.75vmin ;
    font-size           : 0.7vw ;
    line-height         : normal ;
    color               : #fff ;
    font-weight         : bold ;
}

a.class-box:link {
    padding             : 1.5vmin 1.5vmin 1.5vmin 0.4vmin ;
    background-color    : rgba(255, 255, 255 , 0.85) ;
    font-size           : 0.9vw ;
    color               : rgb(0, 0, 0) ;
    font-weight         : 500 ;
    line-height         : normal ;
    text-decoration     : none ;
    letter-spacing      : 0.1vw ;
    text-align          : left ;}
a.class-box:visited  {color: rgb(0, 0, 0) ; background-color: rgba(255, 255, 255 , 0.85) ;}
a.class-box:hover    {color: rgb(20, 60, 90) ; background-color: rgba(200, 240, 250, 0.85) ;}

.point-box {
    padding             : 4% 1.5vw 4% 0.4vw ;
    background-color    : rgba(131, 174, 189, 0.85) ;
    font-size           : 0.9vw ;
    color               : rgb(255,255,255) ;
    font-weight         : 600 ;
    line-height         : normal ;
    text-decoration     : none ;
    letter-spacing      : 0.1vw ;
    text-align          : left ;
}

.box-line{border-bottom: 1px solid rgba(160,160,160, 0.9) ; }