@charset "utf-8";

.l-main {
    padding-bottom: 0;
}

/*-------------------------------------------------------------------------
UI
-------------------------------------------------------------------------*/

/* LAYOUT
--------------------------- */
.ui-top-section {
    padding: 48px 20px
}
.ui-top-section[aria-hidden=true]{
    display: none
}
.ui-top-section:nth-child(odd){
    background-color: var(--main-heighlight-color)
}
.ui-top-section:has(.search-tag){
    padding-bottom: 0;
}

/* 見出し
--------------------------- */
.ui-hgroup {
    margin: 0 0 13px;
}
.ui-sub-title {
    color: var(--main-color);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3px;
    text-align: center;
}
.ui-type-title {
    display        : flex;
    gap            : 4px;
    align-items    : center;
    justify-content: center;
    margin-bottom: 18px;
    font-size  : 24px;
    font-weight: 700;
}
.ui-hgroup .ui-type-title {
    margin: 0;
}
.ui-type-mark {
    font-size: 14px;
    color: var(--light-text-color);
    border: 1px solid var(--light-text-color);
    border-radius: 50px;
    margin: -3px 0 0;
    padding: 1px 10px 0
}

/* #
--------------------------- */
.ui-section-btn {
    width: 65%;
    padding: 20px 16px;
    color: var(--sub-font-color);
    background-color: var(--sub-color);
}
a.ui-section-btn.bkn__more-link {
    text-align: center;
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

[data-tab-contents][aria-hidden="true"] {
    display: none
}
.top-search {
    margin: 0 0 15px
}
.search-nav {
    display: flex;
    gap: 8px 0;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}
.search-nav.is-thrid {
    gap: 12px 0
}
    .search-nav__items {
        width: calc((100% - 8px) / 2);
        height: 68px;
        transition: .3s ease;
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        position: relative
    }
    .search-nav__items.is-active {
        width: 100%;
        border: 1px solid var(--border-color);
        border-radius: 6px
    }
    .search-nav__items.is-wide {
        width: 100%
    }
    .search-nav.is-thrid .search-nav__items {
        width: calc((100% - 16px) / 3)
    }
    [class*="search-nav__btn--"] {
        width: 100%;
        height: inherit;
        display: flex;
        gap: 5px;
        flex: 1;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        padding: 7px 0 5px;
        font-weight: 400;
        cursor: pointer
    }
    .search-nav.is-thrid [class*="search-nav__btn--"] {
        font-size: 12px
    }
    .search-nav__btn--rent {
        background-color: var(--sub-color);
        color: var(--sub-font-color);
    }
    .search-nav__btn--buy  {
        background-color: var(--main-color);
        color: var(--main-font-color);
    }
        [class*="search-nav__btn--"] svg {
            width: 30px;
            height: 30px;
        }
        .search-nav__btn--rent svg{
            fill   : var(--sub-font-color);
        }
        .search-nav__btn--buy svg{
            fill   : var(--main-font-color);
        }
    .search-nav__text {
        display    : flex;
        gap        : 5px;
        align-items: center;
        color: inherit
    }
        .search-nav__text span {
            border: 1px solid #fff;
            border-radius: 50px;
            padding: 2px 5px;
            font-size: 11px;
            color    : inherit
            line-height: 1;
        }

/* #
--------------------------- */
.search-tag {
    width: calc(100% + 40px);
    background-color: var(--main-light-color);
    margin: 0 0 0 -20px;
    padding: 15px 20px;
}
.search-tag + .search-tag {
    border-top: solid 2px var(--main-heighlight-color)
}
.search-tag__list.ui-scroll {
    gap: 6px
}
    .search-tag__ttl {
        margin: 0 0 8px;
        font-weight: 700;
        text-align: center
    }

/* #
--------------------------- */
.inner-nav {
    width: 0;
    opacity: 0;
    visibility: hidden;
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    white-space: nowrap
}

.inner-nav[aria-hidden="false"] {
    opacity: 1;
    visibility: visible
}

.inner-nav[data-search] {
    z-index: 1
}

.inner-nav.is-flow {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: .5s ease
}

.inner-nav.is-flow.is-show {
    transform: translate(0)
}

.inner-nav__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 10px
}

.inner-nav__ttl {
    margin: 3px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--sub-color)
}

.inner-nav__cross {
    padding: 12px
}

.inner-nav__cross svg {
    width: 7px;
    height: 7px;
    fill: var(--gray-text)
}

.inner-list__link {
    border-top: 1px solid #ECEFF1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 13px
}

.inner-list__link>svg {
    width: 7px;
    height: 10px;
    fill: var(--main-color)
}

.inner-nav__left {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: inherit
}

.inner-nav__left svg {
    width: 15px;
    height: 15px;
    fill: var(--dark-color)
}

.inner-type {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fit,minmax(131px,1fr));
    padding: 0 10px 10px
}

.inner-type__link {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    gap: 5px;
    align-items: center;
    flex-direction: column;
    justify-content: center
}

.inner-type__link svg {
    width: 24px;
    height: 24px
}

/*-------------------------------------------------------------------------
NEWS
-------------------------------------------------------------------------*/

.news[aria-hidden="true"]{
    display: none;
}
.news__ttl {
    margin: 0 0 8px;
    font-weight: 700;
    text-align: center
}
.news__list {
    max-height: 400px;
    overflow: hidden scroll;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 20px;
    &:not(:last-child) {
        border-bottom: 1px solid var(--border-color)
    }
}
.news__link {
    display: flex;
    align-items: center;
    padding: 10px
}
.news__img {
    min-width: 80px;
    height: 60px
}
.news__body {
    width: 100%;
    padding: 0 20px 0 6px;
    flex: 1
}
.news__link:not(:has(.news__img)) .news__body {
    padding: 0 6px
}
.news__date time {
    font-size: 12px;
    color: var(--gray-text)
}
.news__date .news__category {
    padding: 2px 4px 2px 4px;
    min-width: 113px;
    height: 30px;
    border: 1px solid var(--main-color);
    align-items: center;
    justify-content: center;
    margin: 2px 10px 10px 2px;
    font-size: 13px;
    color: var(--main-color);
    line-height: 1;
}
.news__sub-ttl {
    font-size: 15px;
    font-weight: 700
}
.news__title {
    font-size: 16px;
    font-weight: 700;
    margin: 5px 0 5px;
}
.news__text {
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--light-text-color)
}
.news__arw {
    width: 10px;
    height: 10px
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.topic__inner {
    padding: 20px 20px 48px
}
.ui-bkn-scroll {
    margin-bottom: 20px;
    gap: 30px
}

.ui-bkn-scroll:last-child {
    margin-bottom: 0
}

.md-bkn-card {
    height: 100%;
    width: 260px;
    display: block;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden
}

.md-bkn-card__head {
    display: grid
}

.md-bkn-card__img,.md-bkn-card__over {
    grid-area: 1 / -1
}

.md-bkn-card__img {
    height: 160px;
    position: relative
}
.md-bkn-card__img.grid {
    height: 123px;
}

.md-bkn-card__img:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(38 50 56 / 6%);
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply
}

.md-bkn-card__over {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10
}

.md-bkn-card__label,.md-bkn-card__price {
    align-self: flex-start
}

.md-bkn-card__label {
    background-color: rgba(255,255,255,.8);
    border: 1px solid #78909C;
    border-radius: 50px;
    margin: 8px 0 0 5px;
    padding: 2px 8px;
    font-size: 10px
}

.md-bkn-card__price {
    background-color: var(--bg-dark-transparent);
    display: flex;
    align-items: baseline;
    padding: 3px 8px 0 9px;
    font-size: 15px;
    color: #fff;
    height: 30px
}

.md-bkn-card__info {
    padding: 5px 10px 12px
}

.md-bkn-card__between {
    display: flex;
    justify-content: space-between;
    margin: 0 0 2px
}
.md-bkn-card__price-down {
    display: flex;
    gap: 10px;
}
    .price-down {
        height: 21px;
        padding: 1px 6px 0;
        border: 1px solid var(--strong-color);
        font-size: 12px;
        color: var(--strong-color);
    }

.md-bkn-card__point {
    margin: 0 0 5px;
    color: var(--gray-text);
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.md-bkn-card__point br {
    display: none
}

.md-bkn-card__name {
    margin: 0 0 5px;
    text-overflow: ellipsis;
    overflow     : hidden;
    white-space  : nowrap;
    font-weight: 700;
}

.md-bkn-card__text {
    font-size: 13px
}

.bkn__inner {
    background-color: #fff
}

/* MD BKN
--------------------------- */
.md-bkn__list {
    display              : grid;
    gap                  : 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 20px;
}
.md-bkn__link {
    display: block
}
.md-bkn__img {
    height: 120px;
    border-radius: 4px;
    margin: 0 0 4px;
    position: relative
}
.md-bkn__img img {
    position: relative;
    z-index: 0
}
.md-bkn__swtich {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 1
}

/*-------------------------------------------------------------------------
POPULAR
-------------------------------------------------------------------------*/

.popular__list {
    margin-top: -10px;
    padding-top: 10px
}
.popular__items {
    counter-increment: rank;
    &:before {
        content: counter(rank);
        width: 27px;
        height: 27px;
        border-radius: 50%;
        display    : grid;
        place-items: center;
        position: absolute;
        top     : -10px;
        left    : -10px;
        font-weight: 700;
        color: #fff
    }
    &:first-child:before  { background-color: var(--rank1);}
    &:nth-child(2):before { background-color: var(--rank2);}
    &:nth-child(3):before { background-color: var(--rank3);}
    &:not(:nth-child(-n + 3)):before { background-color: var(--rank-under);}
}

/*-------------------------------------------------------------------------
GUIDE
-------------------------------------------------------------------------*/

.guide__text {
    margin: 0 0 17px;
    font-size: 15px;
    text-align: center
}
.guide__counter {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 0 25px
}
.guide__list {
    display: flex;
    gap: 3px;
    align-items: center
}
.guide__ttl,.guide__num {
    font-size: 12px
}
.guide__num span {
    font-size: 18px;
    font-weight: 700
}
.guide__list:last-child .guide__num span {
    color: var(--strong-color)
}
.guide__arw {
    display: flex;
    gap: 5px
}
.guide__arw svg {
    width: 16px;
    height: 7px;
    fill: var(--main-color)
}
.guide__form>*+* {
    margin: 12px 0 0
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.feature {
    padding: 40px
}
.feature.is-bg-color {
    background: var(--main-light-color);
    position: relative
}
.feature__list {
    display: grid;
    gap: 30px
}
.feature__link {
    display: grid
}
.feature__img,.feature__contents {
    grid-area: 1 / -1
}
.feature__img {
    height: 45vw;
    margin: 0 40px 0 0
}
.feature__img img {
    width: 100%
}
.feature__contents {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 0 20px
}
.feature__heading {
    width: 80%;
    background-color: #fff;
    border-radius: 6px;
    padding: 9px 10px 7px 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between
}
.feature__card .feature__heading {
    width: 100%
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.figure__ttl {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.36;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}
.figure__more {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--sub-color)
}
.figure__more svg {
    width: 28px;
    height: 28px;
    fill: var(--sub-color)
}
.feature__card {
    display: block;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: var(--box-shadow);
    overflow: hidden
}
.figure__card-img {
    height: 45vw
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.overlap-card {
    display: grid
}
.overlap-card__img,
.overlap-card__contents {
    grid-area: 1 / -1
}
.overlap-card__img {
    height: 37vw
}
.overlap-card__contents {
    background-color: rgba(69,90,100,.5);
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 0 19px 0 30px
}
.overlap-card__ttl {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}
.overlap-card__arw svg {
    width: 31px;
    height: 31px;
    fill: #fff
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.banner-items {
    display: flex;
    justify-content: center;
}

.sns-list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center
}

.movie-item iframe {
    width: 100%
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.blog__list {
    display: grid;
    gap: 16px;
    margin: 0 0 20px
}
.blog__card {
    display: flex;
    align-items: center;
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border-radius: 8px;
    overflow: hidden
}
.blog__left {
    width: 120px;
    min-width: 120px;
    position: relative
}
.blog__card-img {
    width: 120px;
    height: 90px
}
.blog__tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: var(--bg-dark-transparent);
    padding: 3px;
    font-size: 12px;
    color: #fff;
    line-height: 1
}
.blog__text {
    padding: 10px;
    font-weight: 700;
    line-height: 1.1
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.md-bkn-popular__name {
    margin: 0 0 5px;
    font-weight: 700;
    width: 140px;
    white-space: normal
}

.md-bkn-recommend__label {
    background-color: rgba(255,255,255,.8);
    border: 1px solid #78909C;
    border-radius: 50px;
    top: 8px;
    left: 5px;
    padding: 2px 8px;
    font-size: 10px;
    position: absolute;
    z-index: 1
}

.md-bkn-popular__label {
    background-color: rgba(255,255,255,.8);
    border: 1px solid #78909C;
    border-radius: 50px;
    top: 91px;
    right: 5px;
    padding: 2px 8px;
    font-size: 10px;
    position: absolute;
    z-index: 1;
}

/* #
--------------------------- */
.newbknmovie__list {
    display              : grid;
    gap                  : 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
        .newbknmovie__movie {
            border-radius: 4px;
            margin: 0 0 4px;
        }
            .newbknmovie__movie iframe {
                width: 100%;
                height: 31.3vw;
            }
        .newbknmovie__link {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            text-align: center;
        }

/*-------------------------------------------------------------------------
バナー群
-------------------------------------------------------------------------*/
/* 1列表示の場合 */
.banner-group-wrap.columns1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.banner-group-wrap.columns1 .banner-group-list {
    width: 100%;
}

/* 2列表示の場合 */
.banner-group-wrap.columns2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 10px;
}
/* 奇数要素がある場合最後の要素を中央寄せ */
.banner-group-wrap.columns2:has(p:nth-child(odd):last-child) p:last-child {
    grid-column: span 2;
    justify-self: center;
    width: 48%;
}

.banner-group-list {
    margin: 0 0 5px 0;
}

.staff {
    .more_button {
        text-align: center;
        margin-top: 20px;
    }
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.md-tab.kodawaritab,
.md-tab.blogtab {
    justify-content: space-between;
    padding: 0 10px 0;
}
.md-tab__items.kodawaritab,
.md-tab__items.blogtab {
    width: 100%;
}
.blog-tab_blog-area {
    padding-top: 20px;
}
[data-kodawaritab-contents][aria-hidden="true"],
[data-blogtab-contents][aria-hidden="true"] {
    opacity: 0;
    display: none;
    height: 0;
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

/* 共通
--------------------------- */
.link-menu {
    display: grid;
    gap: 10px;
}
    .link-menu__btn {
        height: 64px;
        display        : flex;
        align-items    : center;
        justify-content: center;
        position: relative;
        font-size  : 16px;
        font-weight: bold;
        text-decoration: none;
    }
.link-menu.is-half-size {
    display: flex;
}
    .link-menu__btn.is-half-size {
        width: 50%;
    }


/* --------------------------- */
.link-menu01__btn {
    background-color: #F9FAFB;
    box-shadow: 0 3px 6px rgba(0, 40, 93, .12);
    border: 1px solid var(--main-color);
    border-radius: 8px;
    overflow: hidden;
    color: var(--common-dark-text);
}
.link-menu01__btn:after {
    content: "";
    width: 31px;
    height: 31px;
    background-color: var(--main-color);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    position: absolute;
    bottom  : -1px;
    right   : -1px;
}
    .link-menu01__arw {
        width: 5px;
        height: 5px;
        border-top  : 1px solid var(--main-font-color);
        border-right: 1px solid var(--main-font-color);
        position: absolute;
        bottom  : 7px;
        right   : 7px;
        z-index : 10;
        transform: rotate(45deg);
    }

/*-------------------------------------------------------------------------
緊急対応の為無理やりの処置になります。
後で消す前提です
-------------------------------------------------------------------------*/

.about .ui-title--center {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/*-------------------------------------------------------------------------
トップオリで使用していると思われるお客様の声用
-------------------------------------------------------------------------*/
.md-voice-card__over {
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    width: 225px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px
}
.md-voice-card__point br {
    display: none
}
.ui-voice-scroll {
    width: calc(100% + 40px);
    margin: 0 0 0 -20px;
    padding: 0 20px 7px;
    display: flex;
    gap: 12px;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 300px
}
.ui-voice-scroll::-webkit-scrollbar {
    display: none
}
.md-voice-card-text {
    height: 114px;
    width: 260px;
    display: block;
    background-color: var(--main-light-color);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    background-color: var(--main-light-color);
    position: relative
}
.md-voice-card__label {
    font-weight: 700;
    padding: 0px 5px 8px 10px;
    font-size: 16px;
    color: var(--light-text-color);
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis
}
.md-voice-card__img {
    height: 147px;
    position: relative;
    margin-bottom: 12px;
    border-radius: 8px
}
.md-voice-card__img:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(38 50 56 / 6%);
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply
}
.md-voice-card__head {
    display: grid;
    padding: 10px 5px 5px 5px
}
.md-voice__arw-mobile {
    min-width: 10px;
    width: 10px;
    height: 10px;
    fill: var(--main-color);
    margin-left: 240px;
    margin-top: 45px;
    position: absolute
}
.md-voice-card__under {
    height: 60px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    padding-left: 9px;
    width: 240px
}

/*-------------------------------------------------------------------------
更新情報
-------------------------------------------------------------------------*/

.news__list a {
    color: #07519A;
    text-decoration: underline;
}

/*-------------------------------------------------------------------------
会員登録バナー
-------------------------------------------------------------------------*/
.members-banner-article {
    padding: 50px 0;
    max-width: 1200px;
    margin: 0 auto;
}
.members-banner {
    max-width: 800px;
    margin: 0 20px;
    display: block;
}
.members-banner--mobile {
    display: flex;
    background: #fff;
    flex-direction: column;
    align-items: center;
    width: 100%;
    line-height: 1;
    border: 1px solid var(--main-color);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 800px;
}

.members-banner--mobile .members-banner__first-box {
    display: flex;
    align-items: center;
    justify-content: end;
    align-self: stretch;
    white-space: nowrap;
    background: url(/images/index/image_member-banner.png) no-repeat -22.4vw -11vw;
    background-size: 64%;
    background-color: var(--main-color);
    line-height: 1.1;
    padding: 3.8vw 5.4vw 4.8vw 0;
    color: #fff;
    font-size: 12vw;
    font-weight: bold;
    width: 100%;

}

.members-banner--mobile .members-banner__last-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 4vw;
}

.members-banner--mobile .members-banner__count-section {
    align-self: stretch;
}

.members-banner--mobile .members-banner__count-block {
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1;
    border-bottom: 1px solid var(--main-color);
    text-align: center;
    margin: 0;
}



.members-banner--mobile .members-banner__count-box {
    display: block;
    padding: 8px 0 16px 0;
    font-size: 32px;
}

.members-banner--mobile .members-banner__count-box .is-sm {
    font-size: 24px;
}

.members-banner--mobile .members-banner__count-box svg {
    width: 24px;
    height: 24px;
    fill: var(--main-color);
}

.members-banner--mobile .members-banner__count-box strong {
    color: var(--strong-color);
    font-size: 54px;
}

.members-banner--mobile .members-banner__count-box strong span {
    color: black;
    font-size: 32px;
}

.members-banner--mobile .members-banner__count-box svg {
    vertical-align: initial;
}

.members-banner--mobile .members-banner__addition {
    font-size: 18px;
    font-weight: bold;
    color: var(--main-color);
    text-align: center;
    line-height: 1;
    padding: 16px 0;
}

.members-banner--mobile .members-banner__login {
    display: flex;
    font-size: 15px;
    gap: 4px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--point-color);
    text-align: center;
    color: #fff;
    height: 18vw;
    max-height: 84px;
    width: 100%;
    border-radius: 6px;
}

.members-banner--mobile .members-banner__login strong {
    font-size: 24px;
    font-weight: bold;
    display: block;
    color: var(--sub-font-color);
}

.members-banner--mobile .members-banner__login .sub {
    font-size: 15px;
    display: inline-flex;
}

.members-banner--mobile .members-banner__login .sub strong {
    font-size: inherit;
}

.members-banner--mobile .members-banner__login .arrow {
    display: none;
}

@media (min-width: 801px) {
    .members-banner--mobile .members-banner__first-box {
        font-size: 100px;
        background: url(/images/index/image_member-banner.png) no-repeat -200px -60px var(--main-color);
        background-size: 64%;
    }
}