@media only screen and (min-width:768px) {
    body.black{ background-color:black;color:white;}
    main.main{margin-top:150px;margin-bottom:200px;background:#000;}
    .font_Midashi{ font-weight:bold; font-size:max(20px, 2.125vw); }
    .font_nimbus{ margin-top:30px; display:block; font-weight:lighter; font-size:18px;}
}

.link_border { display: flex; justify-content: space-between; align-items: center; width:-moz-fit-content; width: fit-content; border-radius: 1.2rem; border:2px solid #c0c4c7; line-height:2; padding:.5rem 2rem!important;}
.link_border .text{ position: relative; font-feature-settings:"palt"; display: block; white-space: nowrap; line-height: 1.3;}
.link_border .text:after{ content:""; display: block; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: currentColor; transform-origin: left center; transform:scaleX(0);}

@media (hover:hover) and (pointer:fine) {
.link_border { transition:border-color .2s ease-out;}
.link_border .text:after{ transition: transform .2s ease-out; color:#fff;}
.link_border:hover{ border-color:#e8eaed;}
.link_border:hover .text:after {transform: scaleX(1);}
}

@media only screen and (min-width: 768px) {
.link_border--m{ font-size: max(10px,.875vw); color:#fff;}
.link_border--m:hover{ color:#fff;}
.arrow_bg--m{position:relative;width:3rem;height:3rem;display:flex;align-items:center;justify-content:end;border-radius: 1rem;}
.arrow_bg--m .bg{border-radius:1rem;}
}

@media only screen and (hover:hover) and (pointer:fine) and (min-width:768px) {
.link_border .arrow_bg .bg{ transition:opacity .2s ease-out,transform .3s ease-out;}
.link_border .arrow_bg .arrow{
    position:relative;
    display:block;
    top:auto;
    bottom:auto;
    transition:background .2s ease-out;
    margin:0;
    left:auto;
    right:0;
    width:.64em;
    height:.64em;
    -webkit-mask: url(../../images/arrow_normal_s_bf98141f.svg) center/contain no-repeat;
    mask: url(../../images/arrow_normal_s_bf98141f.svg) center/contain no-repeat
}
.link_border:hover .arrow_bg .arrow { background:#fff; animation:arrow_run .3s 1 forwards linear;}
}

@keyframes arrow_run {
    0% {
        transform: translate(0)
    }
    45% {
        opacity: 1;
        transform: translate(150%)
    }
    46% {
        opacity: 0;
        transform: translate(150%)
    }
    47% {
        opacity: 0;
        transform: translate(-150%)
    }
    48% {
        opacity: 1
    }
    100% {
        transform: translate(-150%)
    }
    to {
        transform: translate(0)
    }
}