@charset "UTF-8";

/*=========================================================
  layout
=========================================================*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
}

.mr15 {
    margin-right: 15px;
}


/*=========================================================
  HeaderBanner
=========================================================*/
.HeaderBanner {
    position: relative;
    padding: 14px 0;
    text-align: center;
    font-size: 0;
    line-height: 0;
    display: none;
}

.is-HeadBannerView .HeaderBanner {
    display: block;
}

.HeaderBannerText {
    display: inline-block;
    max-width: 60%;
    position: relative;
    padding-left: 55px;
    padding-right: 55px;
    color: #191819;
    font-size: 15px;
    line-height: 1.4em;
}

.HeaderBannerText:before {
    content: '';
    display: block;
    width: 38px;
    height: 24px;
    background-image: url('../image/icon/ico-eyes.svg');
    background-size: 37px 23px;
    position: absolute;
    top: -1px;
    left: 0;
}

.HeaderBannerText-inner {
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}


.HeaderBannerText-text {
    display: flex;
    flex-shrink: 0;
    padding-right: 20px;
    animation: RollingText 40s linear infinite;
}

@keyframes RollingText {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}


.HeaderBannerText-text strong {
    font-weight: 500;
}

.HeaderBannerBtn {
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 10;
    background-image: url('../image/icon/ico-closed.png');
    background-size: 14px 14px;
    transform: translateY(-50%);
}


@media screen and (max-width: 1920px) and (min-width: 1025px) {

    .HeaderBanner {
        padding: 0.729166vw 0;
    }

    .HeaderBannerText {
        padding-left: 2.86458vw;
        font-size: 0.78125vw;
    }

    .HeaderBannerText:before {
        width: 1.97916vw;
        height: 1.25vw;
        background-size: 1.97916vw 1.25vw;
    }

    .HeaderBannerBtn {
        width: 0.72916vw;
        height: 0.72916vw;
        right: 1.04166vw;
        background-size: 0.72916vw 0.72916vw;
    }
}

@media screen and (max-width: 1200px) and (min-width: 1025px) {
    .HeaderBannerText {
        font-size: 10px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {

    .HeaderBanner {
        padding: 1.36718vw 0;
    }

    .HeaderBannerText {
        max-width: 100%;
        padding-left: 5.37109vw;
        padding-right: 3.37109vw;
        font-size: 1.56484vw;
    }

    .HeaderBannerText:before {
        width: 3.7109375vw;
        height: 2.34375vw;
        background-size: 3.7109375vw 2.34375vw;
    }

    .HeaderBannerBtn {
        width: 1.36718vw;
        height: 1.36718vw;
        right: 1.9531vw;
        background-size: 1.36718vw 1.36718vw;
    }
}

@media screen and (max-width: 767px) and (min-width: 1px) {

    .HeaderBanner {
        padding: 3.33333vw 0;
    }

    .HeaderBannerText {
        max-width: 100%;
        padding-right: 5vw;
        padding-left: 11.095238vw;
        padding-right: 6.095238vw;
        font-size: 3.71428vw;
        text-align: left;
    }

    .HeaderBannerText:before {
        width: 8.0476vw;
        height: 4.7142vw;
        background-size: 8.0476vw 4.7142vw;
        top: 2px;
    }

    .HeaderBannerBtn {
        width: 3.3333vw;
        height: 3.3333vw;
        right: 4.7619vw;
        background-size: 3.3333vw 3.3333vw;
    }
}


/*=========================================================
  HeaderMenu
=========================================================*/

.HeaderMenu-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 177px 0 30px;
    transition-property: padding;
    transition-duration: 0.2s;
}

.HeaderMenu-inner:after {
    content: '';
    display: block;
    clear: both;
}

.is-Scroll .HeaderMenu {
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.025);
}

.is-Scroll .HeaderMenu-inner {
    padding: 15px 0;
}

@media screen and (max-width: 1920px) and (min-width: 1025px) {
    .HeaderMenu-inner {
        padding: 9.325vw 0 1.5625vw;
    }


    .is-Scroll .HeaderMenu-inner {
        padding: 0.78125vw 0;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .HeaderMenu-inner {
        padding: 3vw 0 3vw;
    }


    .is-Scroll .HeaderMenu-inner {
        padding: 1.46484375vw 0;
    }
}

@media screen and (max-width: 767px) and (min-width: 1px) {
    .HeaderMenu-inner {
        padding: 4.619vw 0 4.619vw;
        align-items: flex-start;
    }


    .is-Scroll .HeaderMenu-inner {
        padding: 4.619vw 0;
    }
}


/* Logo
=========================================================*/
.Logo {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    transition-property: transform, visibility, opacity;
    transition-duration: 0.2s;
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.Logo-link {
    display: block;
    width: 154px;
    height: 165px;
    background-image: url('/wp-content/uploads/2022/04/img-logo01.png');
    background-size: 154px 165px;
}

.is-Scroll .Logo {
    opacity: 0;
    transform: translateX(-50%) translateY(-27%) scale(0.8);
    visibility: hidden;
}

.MobileLogo{
    display: none;
    position: absolute;
    top: 50%;
    left: 40px;
    margin-top: -21px;
}

.MobileLogo .Logo-link{
    width: 42px;
    height: 41px;
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1920px) and (min-width: 1025px) {
    .Logo {
        top: 1.25vw;
    }

    .Logo-link {
        width: 8.02083vw;
        height: 8.59375vw;
        background-size: 8.02083vw 8.59375vw;
    }

}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .Logo {
        top: 1.34375vw;
        transition-property: top;
        transition-duration: 0.2s;
    }

    .Logo-link {
        width: 11.03906vw;
        height: 12.11328vw;
        background-size: 11.03906vw 12.11328vw;
    }

    .is-SearchOn.Logo {
        top: -1.65625vw;
    }
}

@media screen and (max-width: 767px) and (min-width: 1px) {
    .MobileLogo{
        display: block;
    }


    .Logo {
        display: none;
        top: 2.12907vw;
        transition-property: top;
        transition-duration: 0.2s;
    }

    .Logo-link {
        width: 19.0782vw;
        height: 20.51238vw;
        background-size: 19.0782vw 20.51238vw;
    }

    .is-SearchOn.Logo {
        top: -1.87093vw;
    }
}


/* HeaderMenuList
=========================================================*/
/* .HeaderMenuList .menu-item.current-menu-item a{ */
/* color:#33FFCC; */
/* } */

@media screen and (min-width: 768px) {
    .HeaderMenuList {
        flex: 1;
    }

    .HeaderMenuList .main-menu:after {
        content: '';
        display: block;
        clear: both;
    }

    .HeaderMenuList .menu-item {
        float: left;
        padding-right: 30px;
    }

    .HeaderMenuList .menu-item:last-child {
        padding-right: 0;
    }

    .HeaderMenuList .menu-item a {
        display: block;
        color: #191819;
        font-size: 18px;
        font-weight: 600;
        font-family: 'Mbc';
        line-height: 1.4em;
    }
}

@media screen and (min-width: 1025px) {
    .HeaderMenuList .menu-item a:hover {
        color: #33FFCC;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1025px) {
    .HeaderMenuList .menu-item {
        padding-right: 1.5625vw;
    }

    .HeaderMenuList .menu-item a {
        font-size: 0.9375vw;
    }
}

@media screen and (max-width: 1066px) and (min-width: 1025px) {
    .HeaderMenuList .menu-item a {
        font-size: 10px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .HeaderMenuList .menu-item {
        padding-right: 1.92968vw;
    }

    .HeaderMenuList .menu-item a {
        font-size: 1.7578125vw;
    }
}

@media screen and (max-width: 767px) and (min-width: 1px) {
    .HeaderMenuList {
        flex: 1;
    }
}


/* HeaderMenuListNav
=========================================================*/

@media screen and (max-width: 1024px) and (min-width: 1px) {
    .HeaderMenuListNav {
        display: none;
    }

    .HeaderMenuListNav.is-View {
        display: block;
        position: fixed;
        top: 16.45625vw;
        left: 0;
        right: 30.765625vw;
        bottom: 0;
        z-index: 5;
        background-color: #fff;
    }

    .HeaderMenuDim {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
    }


    .site .HeaderMenuListNav.is-View {
        top: 8.366vw;
    }

    .site .is-Scroll .HeaderMenuListNav.is-View {
        top: 5.366vw;
    }

    .site.is-HeadBannerView .is-Scroll .HeaderMenuListNav.is-View {
        top: 10.166vw;
    }

    .is-Scroll .HeaderMenuListNav.is-View {
        top: 10.366vw;
    }

    .admin-bar .site .HeaderMenuListNav.is-View {
        top: calc(8.366vw + 46px)
    }

    .admin-bar .site .is-Scroll .HeaderMenuListNav.is-View {
        top: calc(5.366vw + 46px);
    }


    .HeaderMenuList .main-navigation {
        position: absolute;
        top: 50%;
        left: 6.25vw;
        right: 6.25vw;
        transform: translateY(-50%);
    }

    .HeaderMenuList .menu-item {
        padding-bottom: 3vh;
        display: block;
        float: none;
        padding-right: 0;
    }

    .HeaderMenuList .menu-item:last-child {
        padding-bottom: 0;
    }

    .HeaderMenuList .menu-item a {
        display: inline-block;
        position: relative;
        font-size: 4vh;
        color: #000;
        font-weight: bold;
        font-family: 'Mbc';
        line-height: 1.4em;
        text-align: left;
    }

    .HeaderMenuList .menu-item.current-menu-item a:before {
        content: '';
        display: block;
        width: 100%;
        height: 30%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        background-color: #33FFCC;
    }
}


@media screen and (max-width: 767px) and (min-width: 1px) {
    .HeaderMenuList .menu-item {
        padding-bottom: 3.5vh;
    }

    .HeaderMenuList .menu-item a {
        font-size: 6.5vw;
        white-space: nowrap;
    }

    .HeaderMenuList .menu-item a:after {
        font-size: 6vw;
    }


    .site .HeaderMenuListNav.is-View {
        top: 15vw;
    }

    .site.is-HeadBannerView .HeaderMenuListNav.is-View {
        top: 26.8666vw;
        right: 30.809523vw;
    }

    .site.is-HeadBannerView .is-Scroll .HeaderMenuListNav.is-View {
        top: 26.8666vw;
    }

    .site .is-Scroll .HeaderMenuListNav.is-View {
        top: 15vw;
    }

    .admin-bar .site .HeaderMenuListNav.is-View {
        top: calc(15vw + 46px);
    }


    .is-Scroll .HeaderMenuListNav.is-View {
        top: 26.8666vw;
    }

    .admin-bar .site.is-HeadBannerView .HeaderMenuListNav.is-View {
        top: calc(26.8666vw + 46px);
    }
}


/* =========================================================
	HeaderMenuUtil
=========================================================*/

.HeaderMenuUtil-list {
    font-size: 0;
    line-height: 0;
}

.HeaderMenuUtil-list:after {
    content: '';
    display: block;
    clear: both;
}

.HeaderMenuUtil-item {
    display: inline-block;
    vertical-align: middle;
    padding-right: 25px;
}

.HeaderMenuUtil-item:last-child {
    padding-right: 0;
}


@media screen and (max-width: 1920px) and (min-width: 1025px) {
    .HeaderMenuUtil-item {
        padding-right: 1.30208vw;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .HeaderMenuUtil-item {
        padding-right: 2.4414vw;
    }
}


@media screen and (max-width: 767px) and (min-width: 1px) {

    .HeaderMenuUtil-item, .HeaderMenuUtil-item:last-child {
        padding-right: 4.95238vw;
    }

    .HeaderMenuApp{
        padding-right: 0;
        order: 1;
    }



    .HeaderMenuUtil-list{
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
    }

    /*.HeaderMenuUtil-list .HeaderMenuApp {*/
    /*    flex: 0 0 100%;*/
    /*    order: 1;*/
    /*    padding-right: 0;*/
    /*    margin-top: 1rem;*/
    /*}*/

    .HeaderMenuUtil-list .HeaderMenuApp .DownApp-ref{
        background-color: #FFF;
        padding: 0;
    }

    .HeaderMenuUtil-list .HeaderMenuApp .HeaderDownApp-btn .down-txt {
        display: none;
    }

    .HeaderMenuUtil-list .HeaderMenuApp .HeaderDownApp-btn {

    }

    .HeaderDownAppBox{
        width: 120px;
        z-index: 99;
    }

}


/* HeaderSearch
=========================================================*/

.HeaderSearch {
    position: relative;
}

.HeaderSearchOpen {
    display: block;
    width: 23px;
    height: 22px;
    background-image: url('../image/icon/ico-search.png');
    background-size: 23px 22px;
}

.HeaderSearchClosed {
    display: block;
    float: right;
    position: relative;
    width: 50px;
    height: 50px;
}

.HeaderSearchClosed:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #0C0B25;
}

.HeaderSearchClosed:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
    background-image: url('../image/icon/ico-closed-w.png');
    background-size: 20px 20px;
}


/* HeaderSearchBox
=========================================================*/
.HeaderSearchBox {
    display: none;
    width: 420px;
    position: absolute;
    top: -12px;
    right: -12px;
    background-color: #fff;
}

.HeaderSearch.is-View .HeaderSearchBox {
    display: block;
}

.HeaderSearchBoxTitle {
    display: block;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Mbc';
    line-height: 1.2em;
}

.HeaderSearchBox-cont {
    overflow: hidden;
    /* height:362px; */
    padding: 40px 40px 35px;
    background-color: #fff;
    box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.1);
    clear: both;
}

.HeaderSearchBox-searches {
    overflow: hidden;
    overflow-y: auto;
    height: 262px;
    margin-top: 25px;
}

.HeaderSearchInput {
    position: relative;
    padding-right: 66px;
    border: 6px solid #0D0C26;
}

body .HeaderSearchInput-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 14px 20px;
    color: #191819;
    font-size: 14px;
    line-height: normal;
    box-sizing: border-box;
}

.HeaderSearchInput-input::-webkit-input-placeholder {
    color: #888;
}

.HeaderSearchInput-input::-ms-input-placeholder {
    color: #888;
}

.HeaderSearchInputBtn {
    display: block;
    position: absolute;
    width: 66px;
    height: 100%;
    top: 0;
    right: 0;
    background-image: url('../image/icon/ico-search-b.png');
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}


/* responsive */
@media screen and (max-width: 1920px) and (min-width: 1025px) {
    .HeaderSearchOpen {
        width: 1.197916vw;
        height: 1.145833vw;
        background-size: 1.197916vw 1.145833vw;
    }

    .HeaderSearchBox {
        width: 21.875vw;
        top: -0.625vw;
        right: -0.625vw;
    }


    .HeaderSearchClosed {
        width: 2.60416vw;
        height: 2.60416vw;
    }

    .HeaderSearchClosed:before {
        width: 1.04166vw;
        height: 1.04166vw;
        background-size: 1.04166vw 1.04166vw;
    }

    .HeaderSearchBoxTitle {
        font-size: 0.8333vw;
    }

    .HeaderSearchBox-cont {
        /* height:18.85416608vw; */
        padding: 2.08333vw 2.08333vw 1.82291667vw;
    }

    .HeaderSearchBox-searches {
        height: 13.64583vw;
        margin-top: 1.302083vw;
    }

    .HeaderSearchInput {
        padding-right: 3.4375vw;
    }

    body .HeaderSearchInput-input {
        height: 2.5vw;
        padding: 0.729166vw 1.04166vw;
        font-size: 0.729166vw;
    }

    .HeaderSearchInputBtn {
        width: 3.4375vw;
        background-size: 0.8333vw 0.8333vw;
    }
}


@media screen and (max-width: 1371px) and (min-width: 1025px) {
    .HeaderSearchInput-input {
        font-size: 10px;
    }

}

@media screen and (max-width: 1024px) and (min-width: 768px) {


    .HeaderSearchOpen {
        width: 2.24609vw;
        height: 2.1484375vw;
        background-size: 2.24609vw 2.1484375vw;
    }

    .HeaderSearchBox {
        width: 41.0156vw;
        top: -1.171875vw;
        right: -1.171875vw;
    }

    /* HeaderSearchClosed */
    .HeaderSearchClosed {
        width: 4.8828vw;
        height: 4.8828vw;
    }

    .HeaderSearchClosed:before {
        width: 1.953125vw;
        height: 1.953125vw;
        background-size: 1.953125vw 1.953125vw;
    }


    .HeaderSearchBoxTitle {
        font-size: 1.5625vw;
    }

    .HeaderSearchBox-cont {
        /* height:35.35156vw; */
        padding: 3.90625vw 3.90625vw 3.417968vw;
    }

    .HeaderSearchBox-searches {
        height: 25.666vw;
        margin-top: 2.4414vw;
    }

    .HeaderSearchInput {
        padding-right: 6.4453vw;
    }

    body .HeaderSearchInput-input {
        height: 4.6875vw;
        padding: 1.36718vw 1.953125vw;
        font-size: 1.36718vw;
    }

    .HeaderSearchInputBtn {
        width: 6.4453vw;
        background-size: 1.5625vw 1.5625vw;
    }

}

@media screen and (max-width: 767px) and (min-width: 1px) {


    html.is-SearchHidden {
        overflow: hidden;
    }

    .admin-bar .HeaderSearchBox {
        top: 46px;
    }

    .HeaderSearchOpen {
        width: 5.47619vw;
        height: 5.238095vw;
        background-size: 5.47619vw 5.238095vw;
    }

    .HeaderSearchBox {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }

    /* HeaderSearchClosed */
    .HeaderSearchClosed {
        width: 11.90476vw;
        height: 11.90476vw;
    }

    .HeaderSearchClosed:before {
        width: 4.7619vw;
        height: 4.7619vw;
        background-size: 4.7619vw 4.7619vw;
    }

    .HeaderSearchBoxTitle {
        font-size: 3.80952vw;
    }

    .HeaderSearchBox-cont {
        height: calc(100vh - 30vw);
        padding: 8vw 6.25vw;
        box-shadow: none;
    }

    .HeaderSearchBox-searches {
        height: calc(100vh - 71.42857vw);
        margin-top: 5.95238vw;
    }

    .HeaderSearchInput {
        padding-right: 15.71428vw;
    }

    body .HeaderSearchInput-input {
        height: 11.42857vw;
        padding: 3.3333vw 4.7619vw;
        font-size: 3.3333vw;
    }

    .HeaderSearchInputBtn {
        width: 15.71428vw;
        background-size: 3.80952vw 3.80952vw;
    }


}


/* =========================================================
	RecentSearch
=========================================================*/

.RecentSearch {
    /* margin-top:25px; */
    padding-bottom: 25px;
    border-bottom: 1px dotted #eee;
}

.RecentSearchCont {
    margin-top: 15px;
}

.RecentSearchCont-list {
    margin: -4px -10px;
    font-size: 0;
    line-height: 0;
}

.RecentSearchCont-item {
    display: inline-block;
    padding: 4px 10px;
}

@media screen and (max-width: 1920px) and (min-width: 1025px) {
    .RecentSearch {
        /* margin-top:1.30208vw; */
        padding-bottom: 1.30208vw;
    }

    .RecentSearchCont {
        margin-top: 0.78125vw;
    }

    .RecentSearchCont-list {
        margin: -0.2083vw -0.52083vw;
    }

    .RecentSearchCont-item {
        padding: 0.2083vw 0.52083vw;
    }

}

@media screen and (max-width: 1371px) and (min-width: 1025px) {
    .RecentSearchCont-text {
        font-size: 10px;
    }

}


@media screen and (max-width: 1024px) and (min-width: 768px) {

    .RecentSearch {
        /* margin-top:2.4414vw; */
        padding-bottom: 2.4414vw;
    }

    .RecentSearchCont {
        margin-top: 1.46484vw;
    }

    .RecentSearchCont-item {
        padding: 0.390625vw 0.97656vw;
    }

    .RecentSearchCont-item {
        padding: 0.390625vw 0.97656vw;
    }
}

@media screen and (max-width: 767px) and (min-width: 1px) {


    /* RecentSearchCont */
    .RecentSearchCont {
        margin-top: 3.57142vw;
    }

    .RecentSearchCont-list {
        margin: -0.95238vw -2.3809vw;
    }

    .RecentSearchCont-item {
        padding: 0.95238vw 2.3809vw;
    }

}


/* RecentSearchItem
=========================================================*/

.RecentSearchItem {
    display: block;
    position: relative;
    padding-right: 24px;
}

.RecentSearchItem-text {
    display: block;
    color: #000;
    font-size: 14px;
    line-height: 1.2em;
    font-family: 'Mbc';
}

.RecentSearchItem-delete {
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background-color: #EEEEEE;
    background-image: url('../image/icon/ico-delete.png');
    background-size: 5px 5px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100%;

}

@media screen and (max-width: 1920px) and (min-width: 1025px) {

    .RecentSearchItem {
        padding-right: 1.25vw;
    }

    .RecentSearchItem-text {
        font-size: 0.72916vw;
    }

    .RecentSearchItem-delete {
        width: 0.78125vw;
        height: 0.78125vw;
        background-size: 5px 5px;
    }

}

@media screen and (max-width: 1024px) and (min-width: 768px) {

    .RecentSearchItem {
        padding-right: 2.3437vw;
    }

    .RecentSearchItem-delete {
        width: 1.46484vw;
        height: 1.46484vw;
        background-size: 0.48828vw 0.48828vw;
    }

    .RecentSearchItem-text {
        font-size: 1.36718vw;
    }

}

@media screen and (max-width: 767px) and (min-width: 1px) {
    .RecentSearchItem {
        padding-right: 5.714285vw;
    }

    .RecentSearchItem-delete {
        width: 3.57142vw;
        height: 3.57142vw;
        background-size: 1.90476vw 1.90476vw;
    }

    .RecentSearchItem-text {
        font-size: 3.3333vw;
    }

}


/* =========================================================
	PopularSearch
=========================================================*/
.PopularSearch {
    padding-top: 25px;
    display: none;
}

.PopularSearchCont {
    margin-top: 15px;
}

.PopularSearchCont-list {
    margin: -4px -2px;
    font-size: 0;
    line-height: 0;
}

.PopularSearchCont-item {
    display: inline-block;
    padding: 4px 2px;
}

.PopularSearchCont-link {
    display: block;
    padding: 6px 14px;
    text-align: center;
    border-radius: 30px;
    background-color: #F4F4F4;
}

.PopularSearchCont-text {
    display: block;
    color: #000;
    font-size: 14px;
    line-height: 1.2em;
    font-family: 'Mbc';
    text-align: left;
}


/* responsive */
@media screen and (max-width: 1920px) and (min-width: 1025px) {

    /* .PopularSearch */
    .PopularSearch {
        padding-top: 1.30208vw;
        display: none;
    }

    .PopularSearchCont {
        margin-top: 0.78125vw;
    }

    .PopularSearchCont-list {
        margin: -0.20833vw -0.104166vw;
    }

    .PopularSearchCont-item {
        padding: 0.20833vw 0.104166vw;
    }

    .PopularSearchCont-link {
        padding: 0.3125vw 0.72916vw;
        border-radius: 1.5625vw;
    }

    .PopularSearchCont-text {
        font-size: 0.72916vw;
    }
}

@media screen and (max-width: 1371px) and (min-width: 1025px) {
    .PopularSearchCont-text {
        font-size: 10px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {

    .PopularSearch {
        padding-top: 2.4414vw;
        display: none;
    }

    .PopularSearchCont {
        margin-top: 1.46484vw;
    }

    .PopularSearchCont-list {
        margin: -0.390625vw -0.1953vw;
    }

    .PopularSearchCont-item {
        padding: 0.390625vw 0.1953vw;
    }

    .PopularSearchCont-link {
        padding: 0.5859375vw 1.36718vw;
        border-radius: 2.92968vw;
    }

    .PopularSearchCont-text {
        font-size: 1.36718vw;
    }
}

@media screen and (max-width: 767px) and (min-width: 1px) {
    .PopularSearch {
        padding-top: 5.95238vw;
        display: none;
    }

    .PopularSearchCont {
        margin-top: 3.57142vw;
    }

    .PopularSearchCont-list {
        margin: -0.95238vw -0.47619vw;
    }

    .PopularSearchCont-item {
        padding: 0.95238vw 0.47619vw;
    }

    .PopularSearchCont-link {
        padding: 1.42857vw 3.3333vw;
        border-radius: 7.142857vw;
    }

    .PopularSearchCont-text {
        font-size: 3.3333vw;
    }

}


/* =========================================================
	MobileMenuBtn
=========================================================*/
.MobileMenuBtn {
    width: 20px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -8px;
    z-index: 200;
    display: none;
}

.MobileMenuBtn-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #111111;
    position: absolute;
    left: 0;
    transition-property: transform;
    transition-duration: 0.2s;
}

.MobileMenuBtn-line:first-child {
    top: 0;
}

.MobileMenuBtn-line:nth-child(2) {
    width: 90%;
    top: 50%;
    margin-top: -1px;
}

.MobileMenuBtn-line:nth-child(3) {
    width: 90%;
    top: 50%;
    margin-top: -1px;
}

.MobileMenuBtn-line:nth-child(4) {
    bottom: 0;
}

/*조건값*/
.is-View .MobileMenuBtn-line {
    background-color: #000;
}

.is-View .MobileMenuBtn-line:nth-child(1) {
    display: none;
}

.is-View .MobileMenuBtn-line:nth-child(2) {
    transform: rotate(45deg);
    width: 120%;
    left: 50%;
    margin-left: -60%;
}

.is-View .MobileMenuBtn-line:nth-child(3) {
    transform: rotate(-45deg);
    width: 120%;
    left: 50%;
    margin-left: -60%;
}

.is-View .MobileMenuBtn-line:nth-child(4) {
    display: none;
}


@media screen and (max-width: 1024px) and (min-width: 1px) {
    .MobileMenuBtn {
        display: block;
    }
}


/* =========================================================
	HeaderLogin
=========================================================*/
.HeaderLogin {
    position: relative;
}

.HeaderLoginLink {
    display: block;
}

.HeaderLoginLink-icon {
    width: 22px;
    height: 25px;
    background-image: url('../image/icon/ico-login.png');
    background-size: 22px 25px;
}

.HeaderLoginBox {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
}


@media screen and (max-width: 1920px) and (min-width: 1025px) {
    .HeaderLoginBox {
        top: calc(100% + 0.41666vw);
    }

    .HeaderLoginLink-icon {
        width: 1.14583vw;
        height: 1.302083vw;
        background-size: 1.14583vw 1.302083vw;
    }


}


@media screen and (max-width: 1024px) and (min-width: 768px) {

    HeaderLoginBox {
        top: calc(100% + 0.78125vw);

    }

    .HeaderLoginLink-icon {
        width: 2.14843vw;
        height: 2.4414vw;
        background-size: 2.14843vw 2.4414vw;
    }


}

@media screen and (max-width: 767px) and (min-width: 1px) {

    .HeaderLoginBox {
        top: calc(100% + 1.90476vw);
    }

    .HeaderLoginLink-icon {
        width: 5.23vw;
        height: 5.85vw;
        background-size: 5.23vw 5.85vw;
    }

}


/* Nonmember
=========================================================*/

.Nonmember {
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.1);

}

.Nonmember-link {
    display: block;
    width: 100%;
    padding: 19px 10px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4em;
    background-color: #fff;
    text-align: center;
}

.HeaderLogin.is-View .HeaderLoginBox {
    display: block;
}


/* responsive */
@media screen and (min-width: 1025px) {
    .Nonmember-link:hover {
        background-color: #32FFCC;
    }
}


@media screen and (max-width: 1920px) and (min-width: 1025px) {

    /* Nonmember */
    .Nonmember {
        width: 9.375vw;

    }

    .Nonmember-link {
        padding: 0.989583vw 0.52083vw;
        font-size: 0.83333vw;
    }

}


@media screen and (max-width: 1024px) and (min-width: 768px) {


    /* Nonmember */
    .Nonmember {
        width: 17.578125vw;
    }

    .Nonmember-link {
        padding: 1.855468vw 0.97656vw;
        font-size: 1.5625vw;
    }


}

@media screen and (max-width: 767px) and (min-width: 1px) {


    /* Nonmember */
    .Nonmember {
        width: auto;
    }

    .Nonmember-link {
        padding: 3.5238vw 8.3809vw;
        font-size: 3.80952vw;
    }


}


/* Member
=========================================================*/
.MemberProfileThumb {
    overflow: hidden;
    position: relative;
    width: 76px;
    margin: 0 auto;
    border-radius: 100%;
}

.MemberProfileThumb:before {
    content: '';
    display: block;
    padding-top: 100%;
}

.MemberProfileThumb img {
    display: block;
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.MemberProfileTitle {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.MemberProfileLink-list {
    text-align: center;
    font-size: 0;
    line-height: 0;
}

.MemberProfileTitle-id {
    overflow: hidden;
    display: inline-block;
    max-width: 60%;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Mbc';
    line-height: 1.2em;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.MemberProfileTitle-link {
    display: inline-block;
    margin-left: 8px;
    color: #888;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Mbc';
    line-height: 1.2em;
    text-decoration: underline;
    vertical-align: middle;
}

.MemberProfileLink {
    margin-top: 25px;
}

.MemberProfileLink-list {
    margin: 0 -5px;
}

.MemberProfileLink-list:after {
    content: '';
    display: block;
    clear: both;
}

.MemberProfileLink-item {
    float: left;
    width: 50%;
    padding: 0 5px;
}

.MemberProfileLink-link {
    display: block;
    padding: 14px 10px;
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 500;
}

.MemberProfileLink-link.mypage {
    color: #fff;
    background-color: #0D0C26;
    padding: 14px 10px;
    font-size: 16px;
    line-height: 1.2em;
}

.MemberProfileLink-link.logout {
    color: #000;
    background-color: #32FFCC;
}


.HeaderDownApp{
    position: relative;
}

.HeaderDownApp .HeaderDownAppBox {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    border-bottom: 1px solid #000;
}

.HeaderDownAppBox .HeaderDownApp-btn {
    background-color: #FFF;
    border-radius: 0;
}

.HeaderDownApp.is-View .HeaderDownAppBox {
    display: flex;
}


.HeaderDownApp-btn {
    padding: 10px 17px;
    border-radius: 3px;
    background-color: #F4F4F4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.HeaderDownApp-btn:hover, .HeaderDownApp.is-View .DownApp-ref {
    background-color: #E6E6E6;
}

.HeaderDownApp-btn span {
    color: black;
    font-family: "Noto Sans";
    font-size: 15px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: -0.42px;
}

.HeaderDownApp-btn .pc-down-img {
    display: block;
}

.HeaderDownApp-btn .mobile-down-img {
    display: none;
    width: 5.23vw;
    height: 5.85vw;
}


/* responsive */
@media screen and (min-width: 1025px) {
    .MemberProfileTitle-link:hover {
        color: #32FFCC;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1025px) {

    .MemberProfileThumb {
        width: 3.9583vw;
    }

    .MemberProfileTitle {
        margin-top: 1.04166vw;
    }

    .MemberProfileTitle-id {
        font-size: 0.83333vw;
    }

    .MemberProfileTitle-link {
        margin-left: 8px;
        font-size: 0.83333vw;
    }

    .MemberProfileLink {
        margin-top: 1.302083vw;
    }

    .MemberProfileLink-list {
        margin: 0 -0.260416vw;
    }

    .MemberProfileLink-item {
        padding: 0 0.260416vw;
    }

    .MemberProfileLink-link {
        padding: 0.729166vw 0.52083vw;
        font-size: 0.83333vw;
    }

    .MemberProfileLink-link.mypage {
        padding: 0.729166vw 0.52083vw;
        font-size: 0.83333vw;
    }

}


@media screen and (max-width: 1200px) and (min-width: 1025px) {
    .MemberProfileTitle-id {
        font-size: 10px;
    }

    .MemberProfileTitle-link {
        font-size: 10px;
    }

    .MemberProfileLink-link {
        font-size: 10px;
    }

    .MemberProfileLink-link.mypage {
        font-size: 10px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {

    .MemberProfileThumb {
        width: 7.421875vw;
    }

    .MemberProfileTitle {
        margin-top: 1.953125vw;
    }

    .MemberProfileTitle-id {
        font-size: 1.5625vw;
    }

    .MemberProfileTitle-link {
        margin-left: 0.78125vw;
        font-size: 1.5625vw;
    }

    .MemberProfileLink {
        margin-top: 2.4414vw;
    }

    .MemberProfileLink-list {
        margin: 0 -0.48828vw;
    }

    .MemberProfileLink-item {
        padding: 0 0.48828vw;
    }

    .MemberProfileLink-link {
        padding: 1.3671875vw 0.97656vw;
        font-size: 1.5625vw;
    }

    .MemberProfileLink-link.mypage {
        padding: 1.3671875vw 0.97656vw;
        font-size: 1.5625vw;
    }

}

@media screen and (max-width: 767px) and (min-width: 1px) {

    .MemberProfileThumb {
        width: 18.095vw;
    }

    .MemberProfileTitle {
        margin-top: 4.7619vw;
    }

    .MemberProfileTitle-id {
        font-size: 3.8095vw;
    }

    .MemberProfileTitle-link {
        margin-left: 1.90476vw;
        font-size: 3.8095vw;
    }

    .MemberProfileLink {
        margin-top: 5.95238vw;
    }

    .MemberProfileLink-list {
        margin: 0 -1.19047vw;
    }

    .MemberProfileLink-item {
        padding: 0 1.19047vw;
    }

    .MemberProfileLink-link {
        padding: 3.3333vw 4.7619vw;
        font-size: 3.8095vw;
    }

    .MemberProfileLink-link.mypage {
        padding: 3.3333vw 4.7619vw;
        font-size: 3.8095vw;
    }

    .HeaderDownApp .HeaderDownAppBox {
        max-width: 121px;
        left: unset;
    }

    .HeaderDownApp-btn .pc-down-img {
        display: none;
    }

    .HeaderDownApp-btn .mobile-down-img {
        display: block;
    }
}