@charset "utf-8";

.navbar { margin: auto -10px;}
.navbar__logo { width: 8.4rem; height: 1.87rem; padding-top: .1rem; padding-bottom: .1rem;}
.navbar__logo-goo img { display: inline-block; height: 1.87rem; width: auto; margin-right: .1rem; vertical-align: bottom; }
.navbar__logo-sv span { margin-right: .1rem; line-height: 1.87rem; letter-spacing: .05em; font-size: 26px; font-weight: 700; }
.navbar__bottom_hr { height: 10px; background: #f0f2f4; margin: 0 -10px 20px; box-shadow: 0 0.1rem 0.3rem 0 hsla(0,0%,76%,.5) inset;}
.navbar__inner { display: flex; justify-content: start; align-content: center; padding: .2rem 0 1.2rem; margin: auto; width: 1000px; flex-wrap: wrap; }
.navbar__inner a { text-decoration: none; cursor: pointer; color: #212121; font-weight: 700; }
.navbar__menu { margin-left: 1.9rem; display: flex; align-items: center; }
.navbar__menu ul { display: flex; }
.navbar__inner ol, ul { list-style: none; }
.navbar__menu ul li { margin: 0 .75rem; }
.navbar__menu ul li a { letter-spacing: 1.4px; color: #2c2c2c; font-size: .75rem;}
.navbar__inner>div { display: flex; align-items: center; margin-left: auto;}
.navbar__button-login { margin: 0 0 0 auto; }
.navbar__button-login .icon, .navbar__button-logout .icon, .navbar__button-register .icon { width: 1.5rem; height: 1.5rem; margin: 7px 10px 7px 9px; display: block; }
.navbar__button-login span, .navbar__button-logout span, .navbar__button-register span { display: block; letter-spacing: 1.4px; line-height: 1.2rem; color: #f66200; }
.navbar__button-login, .navbar__button-logout, .navbar__button-register { transition: opacity .3s; display: flex; align-items: center; }
.navbar__link--right { display: flex; align-items: center; }
.navbar__tools .navbar__link--username a { text-decoration: underline; font-size: .8rem; text-align: right; color: #607d8b; font-weight: 550;}
.icon--lock { background: url(/gb25/img/common/icons/icon-lock_accent.svg) 50%/cover no-repeat; }
.icon--free { background: url(/gb25/img/common/icons/icon-free_accent.svg) 50%/cover no-repeat; }
.icon--lock_out { background: url(/gb25/img/common/icons/icon_lockOut_accent.svg) 50%/cover no-repeat; }

/**ジャンルのタブで使用**/
.tabs--inline {
    display: flex;
    overflow-x: auto;
    position: relative;
    margin-bottom: 13px;
}

.tabs--inline:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #d8dfe3;
    z-index: 1
}

.tab-inline {
    z-index: 2
}

.tab-inline a {
    transition: opacity .3s;
    padding: .7rem 2.4rem;
    font-size: 14px;
    letter-spacing: .13rem;
    text-align: center;
    color: #607d8b;
    display: block;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
}

.tab-inline a:hover {
    opacity: .7
}

.tab-inline a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #d8dfe3;
    z-index: 2
}

.tab-inline.tab-inline--two {
    justify-content: space-between;
    width: 50%
}

.tab-inline.tab-inline--three {
    justify-content: space-between;
    width: 33.33333%
}

.tab-inline.tab-inline--two-third {
    width: 66.66667%;
    max-width: 30rem
}

.tab-inline--active a {
    transition: opacity .3s;
    color: #f66200
}

.tab-inline--active a:hover {
    opacity: .7
}

.tab-inline--active a:after {
    background-image: linear-gradient(91deg,#ef3000,#ffa000)
}

/** ここまで ジャンルのタブで使用**/