.opning {
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%
}

.opning::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #98A6B5;
    mix-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0
}

.arrBox {
    position: absolute;
    margin: auto;
    width: 1125px;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width: 1280px) {
    .arrBox {
        width: 87%
    }
}

@media only screen and (max-width: 767px) {
    .arrBox {
        width: 86%
    }
}

.arrCol {
    margin: auto;
    position: absolute;
    top: 32%;
    left: 5%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (max-width: 1280px) {
    .arrCol {
        top: 28.5%;
        left: 5%;
        width: 21.09375vw
    }
}

@media screen and (max-width: 1000px) {
    .arrCol {
        top: 25%
    }
}

@media screen and (max-width: 1415px) {
    .arrCol {
        left: 6%
    }
}

@media screen and (max-width: 830px) {
    .arrCol {
        top: 23%
    }
}

@media only screen and (max-width: 767px) {
    .arrCol {
        width: 100%;
        top: 45%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

.arrImg {
    margin: auto;
    width: 63px;
    animation: animation-y 0.5s ease-out infinite alternate-reverse
}

@media only screen and (max-width: 1280px) {
    .arrImg {
        width: 4.92188vw
    }
}

@media only screen and (max-width: 767px) {
    .arrImg {
        width: 16.55802vw
    }
}

.arrTxt {
    padding-top: 20px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    font-weight: 400
}

@media only screen and (max-width: 1280px) {
    .arrTxt {
        font-size: 1.40625vw
    }
}

@media only screen and (max-width: 767px) {
    .arrTxt {
        font-size: 5.21512vw
    }
}

.js-blend::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #98A6B5;
    mix-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0
}

.js-none {
    display: none
}

.js-bgnone {
    background: #FFF !important
}

.js-gray {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.ico_new {
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 2px;
    width: 70px
}

@media only screen and (max-width: 1280px) {
    .ico_new {
        top: .15625vw;
        left: .15625vw;
        width: 5.46875vw
    }
}

@media only screen and (max-width: 767px) {
    .ico_new {
        top: .26076vw;
        left: .26076vw;
        width: 9.12647vw
    }
}

.lineupMain {
    position: relative;
    z-index: 1;
    width: 100%
}

.lineupMain img {
    width: 100%;
    height: auto;
    vertical-align: bottom
}

@media only screen and (max-width: 767px) {
    .lineupTit {
        padding-top: 3.12907vw;
        margin: auto;
        width: 24.77184vw
    }
}

.lineupNav {
    padding: 45px 0 35px 0;
    background: url("../images/lineup/lineupnav_bg.png") no-repeat center center;
    background-size: 100%
}

@media only screen and (max-width: 767px) {
    .lineupNav {
        padding: 2.60756vw 0 2.60756vw 0;
        background: none
    }
}

.lineupNavListbox {
    margin: auto;
    position: relative;
    z-index: 3;
    margin: auto;
    width: 1130px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

@media only screen and (max-width: 1280px) {
    .lineupNavListbox {
        width: 85.9375vw
    }
}

@media only screen and (max-width: 767px) {
    .lineupNavListbox {
        width: 86%;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media only screen and (max-width: 767px) {
    .lineupNavListbox::before {
        content: "";
        display: block;
        width: 23%;
        -webkit-order: 1;
        order: 1
    }
}

@media only screen and (max-width: 767px) {
    .lineupNavListbox::after {
        content: "";
        display: block;
        width: 23%
    }
}

.lineupNavList {
    position: relative;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 114px;
    height: 114px;
    font-size: 0
}

@media only screen and (max-width: 1280px) {
    .lineupNavList {
        width: 8.90625vw;
        height: 8.90625vw
    }
}

@media only screen and (max-width: 767px) {
    .lineupNavList {
        width: 19.55671vw;
        height: 19.55671vw;
        margin-bottom: 2.60756vw
    }
}

.list1 {
    background-image: url(../images/lineup/bt_character_off.png)
}

.list2 {
    background-image: url(../images/lineup/bt_face_off.png)
}

.list3 {
    background-image: url(../images/lineup/bt_hair_off.png)
}

.list4 {
    background-image: url(../images/lineup/bt_body_off.png)
}

.list5 {
    background-image: url(../images/lineup/bt_option_off.png)
}

.list6 {
    background-image: url(../images/lineup/bt_decal_off.png)
}

.list7 {
    background-image: url(../images/lineup/bt_special_off.png)
}

.list8 {
    background-image: url(../images/lineup/bt_zone_off.png)
}

.js-active.list1 {
    background-image: url(../images/lineup/bt_character_over.png)
}

.js-active.list2 {
    background-image: url(../images/lineup/bt_face_over.png)
}

.js-active.list3 {
    background-image: url(../images/lineup/bt_hair_over.png)
}

.js-active.list4 {
    background-image: url(../images/lineup/bt_body_over.png)
}

.js-active.list5 {
    background-image: url(../images/lineup/bt_option_over.png)
}

.js-active.list6 {
    background-image: url(../images/lineup/bt_decal_over.png)
}

.js-active.list7 {
    background-image: url(../images/lineup/bt_special_over.png)
}

.js-active.list8 {
    background-image: url(../images/lineup/bt_zone_over.png)
}

.lineupWrap {
    background: url(../images/lineup/30ms_logo.png),#fff;
    background-repeat: no-repeat,no-repeat;
    background-position: center center, center top;
    background-size: 249px, cover;
    box-shadow: 0px -5px 8px 0px rgba(152,166,181,0.08);
    padding: 15px 0 55px 0
}

@media only screen and (max-width: 767px) {
    .lineupWrap {
        padding: 3.91134vw px 0 10.43025vw 0;
        background-size: 137px, cover
    }
}

.js-padding {
    padding: 330px 0 310px
}

@media only screen and (max-width: 767px) {
    .js-padding {
        padding: 104.30248vw 0 15.625vw 0
    }
}

.lineupCol {
    display: none
}

.lineupCol.js-active {
    display: block
}

.lineupItembox {
    margin: auto;
    width: 1143px
}

@media only screen and (max-width: 1280px) {
    .lineupItembox {
        width: 89.29688vw
    }
}

@media only screen and (max-width: 767px) {
    .lineupItembox {
        padding: 0;
        width: 100%
    }
}

.lineupItem {
    margin: 20px 8px 9px 8px;
    width: 269px !important;
    height: 309px;
    position: relative
}

@media only screen and (max-width: 1280px) {
    .lineupItem {
        margin: 1.5625vw 1.5% .70313vw 1.5%;
        width: 19.53125vw !important;
        height: 22.34375vw
    }
}

@media only screen and (max-width: 767px) {
    .lineupItem {
        margin: 2.60756vw 1% 1.1734vw 1%;
        width: 41.0691vw !important;
        height: 47.06649vw
    }
}

@media screen and (max-width: 375px) {
    .lineupItem {
        margin: 1.04302vw 1% .65189vw 1%;
        width: 42.50326vw !important;
        height: 48.76141vw
    }
}

.itemTxt {
    position: absolute;
    top: 79%;
    -webkit-transform: translateY(-21%);
    transform: translateY(-21%);
    left: 0.5vw;
    z-index: 2;
    color: #fff;
    font-weight: 700
}

@media only screen and (max-width: 767px) {
    .itemTxt {
        left: 1vw
    }
}

.spec {
    font-size: 15px;
    text-shadow: 0px 0px 5px #000;
    line-height: 1.2
}

@media only screen and (max-width: 1280px) {
    .spec {
        font-size: 1.17188vw
    }
}

@media only screen and (max-width: 767px) {
    .spec {
        font-size: 1.95567vw
    }
}

.name {
    font-size: 20px;
    text-shadow: 0 0 10px #000;
    line-height: 1.1;
    padding-top: 5px
}

@media only screen and (max-width: 1280px) {
    .name {
        font-size: 1.40625vw;
        padding-top: .39063vw
    }
}

@media only screen and (max-width: 767px) {
    .name {
        font-size: 2.60756vw;
        padding-top: .65189vw
    }
}

.itemImg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.pt0 {
    padding-top: 0
}

.font-ss {
    font-size: 12px !important
}

@media only screen and (max-width: 1280px) {
    .font-ss {
        font-size: .9375vw !important
    }
}

@media only screen and (max-width: 767px) {
    .font-ss {
        font-size: 1.56454vw !important
    }
}

.font-s {
    font-size: 13px !important
}

@media only screen and (max-width: 1280px) {
    .font-s {
        font-size: .9375vw !important
    }
}

@media only screen and (max-width: 767px) {
    .font-s {
        font-size: 1.69492vw !important
    }
}

.font-sm {
    font-size: 15px !important
}

@media only screen and (max-width: 1280px) {
    .font-sm {
        font-size: 1.17188vw !important
    }
}

@media only screen and (max-width: 767px) {
    .font-sm {
        font-size: 1.95567vw !important
    }
}

.font-smm {
    font-size: 16px !important
}

@media only screen and (max-width: 1280px) {
    .font-smm {
        font-size: 1.25vw !important
    }
}

@media only screen and (max-width: 767px) {
    .font-smm {
        font-size: 2.08605vw !important
    }
}

.font-m {
    font-size: 17px !important
}

@media only screen and (max-width: 1280px) {
    .font-m {
        font-size: 1.32813vw !important
    }
}

@media only screen and (max-width: 767px) {
    .font-m {
        font-size: 2.21643vw !important
    }
}

.font-mm {
    font-size: 18px !important
}

@media only screen and (max-width: 1280px) {
    .font-mm {
        font-size: 1.40625vw !important
    }
}

@media only screen and (max-width: 767px) {
    .font-mm {
        font-size: 2.34681vw !important
    }
}

.slick-disabled {
    opacity: 0
}

.slick-prev,.slick-next {
    width: 36px !important;
    height: 62px !important;
    z-index: 10
}

@media only screen and (max-width: 1280px) {
    .slick-prev,.slick-next {
        width: 2.8125vw !important;
        height: 4.84375vw !important
    }
}

@media only screen and (max-width: 767px) {
    .slick-prev,.slick-next {
        width: 5.99739vw !important;
        height: 8.08344vw !important
    }
}

.slick-prev:before,.slick-next:before {
    font-size: 0
}

.slick-next {
    right: -55px
}

@media only screen and (max-width: 1280px) {
    .slick-next {
        right: -2.34375vw
    }
}

@media only screen and (max-width: 767px) {
    .slick-next {
        right: 1.30378vw
    }
}

.slick-prev {
    left: -55px
}

@media only screen and (max-width: 1280px) {
    .slick-prev {
        left: -2.34375vw
    }
}

@media only screen and (max-width: 767px) {
    .slick-prev {
        left: 1.30378vw
    }
}

@-webkit-keyframes animation-y {
    0% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%)
    }

    100% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }
}

@keyframes animation-y {
    0% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%)
    }

    100% {
        -webkit-transform: translateY(10%);
        transform: translateY(10%)
    }
}

/*# sourceMappingURL=maps/lineup.css.map */