.nav-item  a{
    color: white!important;
}
.nav-item  a:hover{
    color: #4EFFDC!important;
    text-decoration: underline;
}
.nav-item .active{
    color: #7a7a7a !important;
}
.nav-item .btn:hover{
    background-color: #4c2ac1 !important;
    text-decoration: none !important;
    color: #fff !important;
}

/*販売中*/
.onsale-bg{
//background:linear-gradient(50deg, #8b0074, #2b0780, #4c28c8);/*グラデーションを定義*/
    background:linear-gradient(50deg, #8b0074, #4c28c8);/*グラデーションを定義*/
    background-size: 200% 200%;/*サイズを大きくひきのばす*/
    animation: bggradient 5s ease infinite;
}
.onsale-border{
    border: 4px solid #c21500;
    border-image: linear-gradient(50deg, #8b0074, #2b0780, #4c28c8);
    border-image-slice: 1;
}
@keyframes bggradient{
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.wave{
    position: relative;
}

.wave canvas{
    position: absolute;
    bottom: -50px;
    left:0;
    width: 100%;
}
/***
テキスト色
*****************/
.txt-kd-dark-gray{
    color: #ababab;
}
.txt-kd-light-gray{
    color: #bfbfbf;
}

.h1-product_name{
    font-size: 1.2rem;
}
.h1-base{
    font-size: 1.4rem;
    line-height: 4rem;
}
.h2-base{
    font-size: 1.4rem;
    line-height: 4rem;
}
.ellipsis-1line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.ellipsis-2line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ellipsis-3line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/***
リンク系
*****************/
.txt-link-green-under{
    color: #4EFFDC;
    text-decoration: underline;
}
.txt-link-green{
    color: #4EFFDC;
}
.txt-link-active{
    border-bottom: solid 1px #4EFFDC;
    color:#4EFFDC;
}
.invalid-feedback {
    color:white;
}
/***
card
*****************/
.card-store{
    background-color: #393939;
    border: initial;
    border-radius: 0rem;
}
.card-store-header{
    border: initial;
    background-color: initial;
}
.card-store-body{
    border: initial;
    background-color: initial;
    padding: 10px;
}
.card-store-footer{
    padding: 7px;
}
.card-store-h3{
    font-size: 1.2rem;
}
.card-store-product_name{
    font-size: 1.2rem;
}
.card-store-price{
    font-size: 1.3rem;
}
.card-store-name{
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-store-icon img{
    width:30px;
    height:30px;
}

.card-card{
    border: initial;
    //border-radius: 0.5rem;
    background-color: transparent;
    //border-radius: 1rem 1rem 0 0;
}
.card-card-body a{
    color: inherit !important;
}
.card-card-header{
    //border: initial;
    border-bottom: initial;
    //background-color: initial;
    padding: 5px;
    font-size: 0.8rem;
    border-radius: 1rem 1rem 0 0 !important;
    min-height: 50px;
}
.card-card-body{
    padding: 5px;
    border: initial;
    background-color: initial;
    font-size: 0.8rem;
}
.card-card-footer{
    padding: 3px;
    border: initial;
    background-color: initial;
    border-radius: 0 0 1rem 1rem !important;
}
.card-card-user-name{
    font-size: 0.8rem;
}
.card-card-user-icon{
    width:30px;
    height:30px;
}
.card-card-store-product_name{
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-credit{
    border: initial;
    border: solid 1px #700B5F;
    border-radius: 0.5rem;
}
.card-credit-header{
    border: initial;
    border-bottom: initial;
    background-color: #700B5F;
    padding: 10px;
}
.card-credit-body{
    padding: 10px;
    border: initial;
    background-color: initial;
}

.card-burn{
    border: initial;
    border: solid 1px #000;
    border-radius: 0.5rem;
}

.card-burn-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(112, 11, 95, 1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.4rem 0.4rem 0 0;
}

.progress-drop{
    background-color: #505050;
}
.progress-bar-drop{
    background: rgb(36,149,128);
    background: linear-gradient(0deg, rgba(36,149,128,1) 0%, rgba(70,235,202,1) 100%);
}

/***
ボタン関連
 *****************/
.btn-kd {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #4c2ac1;
    border: 1px solid #4c2ac1;
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.40rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /*display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    //border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/

}

.btn-kd-outline{
    color: #fff;
    background-color: black;
    border-color: #4c2ac1;

}

.btn-kd02-outline{
    color: #4EFFDC!important;
    border-color: #4EFFDC;
}

.btn-kd02{
    color: rgb(36,149,128)!important;
    background-color: #4EFFDC;
}

.btn-kd-w-100{
    width: 100%;
}
.btn-kd-w-50{
    width: 50%;
}

.btn-kd-pager{
    width: 40px;
    height: 40px;
}

.btn-like{
    font-size: 1.1rem;
    filter: brightness(1) invert(0);
}
.after-nft-logo::after{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 20px;/*画像の幅*/
    height: 20px;/*画像の高さ*/
    background-image: url(/vendor/images/top/nft-ogp.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.btn-like::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 20px;/*画像の幅*/
    height: 20px;/*画像の高さ*/
    background-image: url(/vendor/images/common/heart.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.btn-like-one{
    font-size: 1.1rem;
    filter: brightness(1) invert(0);
}
.btn-like-one::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 20px;/*画像の幅*/
    height: 20px;/*画像の高さ*/
    background-image: url(/vendor/images/common/heart.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.btn-like-list::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 20px;/*画像の幅*/
    height: 20px;/*画像の高さ*/
    background-image: url(/vendor/images/common/heart.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}

.twitter::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 30px;/*画像の幅*/
    height: 30px;/*画像の高さ*/
    background-image: url(/vendor/images/common/icon_twitter.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
.facebook::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    width: 30px;/*画像の幅*/
    height: 30px;/*画像の高さ*/
    background-image: url(/vendor/images/common/icon_facebook.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
}
/***
contentsタイトル
*****************/
.h1-base{

}
.content-h-height{
    height: 96px;
}
.content-h-bg{
    //background:url(/vendor/images/common/title_bg.svg); background-size:cover;
    background:url(/vendor/images/common/title_bg.svg); background-size:100% 100%;
}

.top-header{
    z-index: 1;
    width: 100%;
    height: 376px;
    background: url(/vendor/images/top/aurora-731456_1920.png) center center/cover no-repeat;
}

.top-header2{
    z-index: 1;
    //width: 100%;
    //height: 376px;
    background: url(/vendor/images/top/aurora-731456_1920.png);background-size:100% 100%;
}

.top-gallery-bg{
    background:url(/vendor/images/top/top_gallery_pc.png); background-size:cover;
}



/****/
.video-header{
position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
height: 100vh;/*高さを全画面にあわせる*/
}

#video-area{
    position: absolute;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}
.video-fritter {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-image: url(/vendor/images/top/movie_fritter.png);
}
.video-fritter-propro {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-image: url(/vendor/images/top/movie_fritter_propro.png);

}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

/****/


.swiper-slide{
    border: #4EFFDC solid 2px;

}
    .swiper-slide .card-header{
        overflow: hidden;
}
.swiper-slide .card-header img{
    display: block;
    transition: 0.5s;
}
.swiper-slide .card-header img:hover{
    transform: scale(1.3, 1.3);
}

.contents{
    max-width: 800px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.trim-image-to-circle {
    width:  30px;       /* ※縦横を同値に */
    height: 30px;       /* ※縦横を同値に */
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    background-position: center center;  /* 中央 */
    background-size:cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    top:-10px;
}
.trim-image-to-circle-mypage {
    width:  100px;       /* ※縦横を同値に */
    height: 100px;       /* ※縦横を同値に */
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    background-position: center center;  /* 中央 */
    background-size:cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    top:-10px;
    left:30%;
}

.trim-image-to-circle-new-mypage {
    width:  100px;       /* ※縦横を同値に */
    height: 100px;       /* ※縦横を同値に */
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    background-position: center center;  /* 中央 */
    background-size:cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.absolute-center-middle{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}



.card-under-box{
    background-color: #252525;
    border-radius: 6px;
    width: 100%;
    //margin: 0 1rem;
    padding: 0.5rem;
}
/**************
* PC SP表示非表示
*****************************/
.pc-none640{
    display: block;
}
.sp-none640{
    display: none;
}
@media (min-width: 640px) {
    .pc-none640{
        display: none;
    }
    .sp-none640{
        display: block;
    }

}
/*コモン*/
.muvluv-card-bg-1{
    background-color: #515151;
}
/*アンコモン*/
.muvluv-card-bg-2{
    background-color: #0B4470;
}
/*レア*/
.muvluv-card-bg-3{
    background: linear-gradient(135deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
    color: black;
}
/*エピック*/
.muvluv-card-bg-4{
    background: linear-gradient(135deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    color: black;

}
/*レジェンダリ*/
.muvluv-card-bg-5{
    background: linear-gradient(135deg,rgb(255, 0, 0),rgb(255, 20, 172),rgb(90, 40, 255),
    rgb(60, 120, 255),rgb(80, 255, 237),rgb(100, 255, 169),
    rgb(170, 255, 120),rgb(221, 255, 140),rgb(255, 236, 160),
    rgb(255, 208, 180),rgb(255, 208, 200),#ff0000);
    color: black !important;

}
.muvluv-rarity-border-1, .muvluv-rarity-border-2{
    border: solid 1px #fff;padding: 2px;width: 95%;white-space: nowrap;
}

.muvluv-rarity-border-5, .muvluv-rarity-border-4, .muvluv-rarity-border-3{
    border: solid 1px #000;padding: 2px;width: 95%;white-space: nowrap;
}

/**購入方法**/
.method-border{
    border: solid 3px #fff
}
.method-img-border{
    border: solid 1px #fff;
    padding: 2px;
}
.method-step-bg{
    background-color: white;
    border-radius: 0.5rem;
    color: black;
    font-weight: bold;
    line-height: 3.5rem;
    text-align: center;
}
.method-h2{
    font-size: 1.5rem;
}

.lang-box-left {
    border: solid 1px #fff;
    /* 左上 | 右上 | 右下 | 左下 */
    border-radius: 0.2rem 0 0 0.2rem;
    padding: 0 1rem;
    border-right: inherit;
}
.lang-box-right {
    border: solid 1px #fff;
    /* 左上 | 右上 | 右下 | 左下 */
    border-radius: 0 0.2rem 0.2rem 0;
    padding: 0 1.4rem;
}

select.classic {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
            linear-gradient(45deg, transparent 50%, #ffffff 50%),
            linear-gradient(135deg, #ffffff 50%, transparent 50%),
            linear-gradient(to right, #700B5F, #700B5F);
    background-position:
            calc(100% - 20px) calc(1em + 2px),
            calc(100% - 15px) calc(1em + 2px),
            100% 0;
    background-size:
            5px 5px,
            5px 5px,
            2.5em 2.5em;
    background-repeat: no-repeat;
}

select.classic:focus {
    background-image:
            linear-gradient(45deg, white 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, white 50%),
            linear-gradient(to right, #700B5F, #700B5F);
    background-position:
            calc(100% - 15px) 1em,
            calc(100% - 20px) 1em,
            100% 0;
    background-size:
            5px 5px,
            5px 5px,
            2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: grey;
    outline: 0;
}

select.classic-black {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
            linear-gradient(45deg, transparent 50%, #ffffff 50%),
            linear-gradient(135deg, #ffffff 50%, transparent 50%),
            linear-gradient(to right, #000, #000);
    background-position:
            calc(100% - 20px) calc(1em + 2px),
            calc(100% - 15px) calc(1em + 2px),
            100% 0;
    background-size:
            5px 5px,
            5px 5px,
            2.5em 2.5em;
    background-repeat: no-repeat;
}

select.classic-black:focus {
    background-image:
            linear-gradient(45deg, white 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, white 50%),
            linear-gradient(to right, #000, #000);
    background-position:
            calc(100% - 15px) 1em,
            calc(100% - 20px) 1em,
            100% 0;
    background-size:
            5px 5px,
            5px 5px,
            2.5em 2.5em;
    background-repeat: no-repeat;
    border-color: grey;
    outline: 0;
}
/***
swiper関連
 */
.swiper-pagination-bullet {
    background: transparent;
}
.swiper-pagination-bullet:hover {
    opacity: .7;
}

.swiper-pagination-bullet:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #fff;
}

.swiper-pagination-bullet-active:before {
    background: #4effdc;
}
.swiper-pagination {position:relative; padding-top:1.5em;}
/***
指摘事項追加
 */
span.drop-category-label {
    border: #666 1px solid;
    line-height: 1;
    display: inline-block;
    padding: .25em;
    color: #ccc;
    font-size: 90%;
}

.common-tab-menu {
    line-height: 1.2;
    border-bottom: solid 1px grey;
}
.common-tab-menu div.text-center {
    margin-bottom: -1px;
    padding: 0;
}
.common-tab-menu a {
    display: block;
    padding: 0.5rem;
}

.card-pager {
    font-family: 'Noto Sans JP', sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #252525;
    border-radius: 6px;
    padding: 0 10px;
    margin-top: 32px; }

.card-pager a {
    font-size: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    border-bottom: transparent 2px solid;
    -webkit-transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    padding: 20px;
    line-height: 1.25; }

.card-pager a.active {
    border-color: #66fec8; }

.navbar-nav .lang {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #252525;
    width: 144px;
    margin: 16px auto 0;
    border-radius: 6px;
}

.navbar-nav .lang a {
    font-size: 12px;
    background-color: #252525;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 28px;
    border-bottom: transparent 2px solid;
}

.navbar-nav .lang a.active {
    border-color: #66fec8;
}
.nav-btn-width{
    width: 100%;
}
@media (min-width: 992px) {
    .navbar-nav .lang {
        margin: 0 -1rem 0 16px;
        flex-direction: column;
        background-color: transparent;
        width: auto;
    }

    .navbar-nav .lang > * + * {
        margin-top: 8px;
    }

    .nav-btn-width{
        width: initial;
    }
}

.top-video {
    position: relative;
    left: 0;
    width: 100%;
    max-height: 300px;
}
@media (min-width:820px){
    .top-video {
        width: auto;
    }
}
