/* =====================================
   共通ヘッダー用 CSS
   ===================================== */

.common-header{
    border-top: 2px solid #E0481D;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}
.common-header__logo{
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
}

@media screen and (min-width: 768px) {
    .common-header{
        height: 50px;
    }
    .common-header__logo{
        margin-right: 14px;
        height: 100%;
        align-items: center;
    }
    .common-header__logo img{
        width: 60px;
        height: auto;
    }
    .common-header__logo a{
        padding: 5px;
        position: relative;
    }
    .common-header__logo a::after{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border: 2px solid transparent;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        transition-duration: 300ms;
    }
    .common-header__logo a:hover,
    .common-header__logo a:focus-visible{
        outline: none;
    }
    .common-header__logo a:hover::after,
    .common-header__logo a:focus-visible::after{
        border-color: #757575;
    }
    .common-header__logo span{
        display: none;
    }
    .common-header__logo a{
        color: #000;
    }
}

@media screen and (max-width: 767px) {
    .common-header{
        border-top: 4px solid #E0481D;
        height: 41px;
    }
    .common-header__logo{
        height: 100%;
        align-items: center;
    }
    .common-header__logo img{
        display: none;
    }
    .common-header__logo span{
        font-family: 'Yu Gothic Medium', 'YuGothic', 'Yu Gothic', sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #000;
    }
    .common-header__logo a{
        color: #000;
    }
}