html,
body,
.mqlp-makeup-simulator-box {
    height    : 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    margin    : 0;
}

@media(orientation: landscape) {

    html,
    body,
    .mqlp-makeup-simulator-box {
        min-height: 0
    }
}

img[src^="https://d2ytkilxgnmqyx.cloudfront.net"] {
    position: absolute;
    bottom  : 0
}

.mq-simulator-shape-bar {
    position: absolute;
    right   : 0;
    z-index : 1;
    height  : 0;
}

.mq-shape-text {
    position   : absolute;
    left       : 50vw;
    font-size  : 26px;
    color      : white;
    margin-left: -20px;
    margin-top : -7px;
    text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 2px;
    z-index    : 1;
    font-family: roboto, sans-serif, avenir, arial, sans-serif !important;
}

.mq-simulator-shape-bar #shape-bar {
    display: none;
}

.mq-simulator-shape-bar .is-active {
    display: block !important;
}

.mq-simulator-shape-bar input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance   : none;
    width             : 585px;
    height            : 5px;
    border-radius     : 2px;
    outline           : none;
    position          : relative;
    top               : -52px;
    left              : 0;
    transform         : rotate(-90deg);
    -moz-transform    : rotate(-90deg);
}

/* WebKit向けのつまみ */
.mq-simulator-shape-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance   : none;
    -moz-appearance      : none;
    -webkit-border-radius: 50%;
    height               : 14px;
    width                : 14px;
    border-radius        : 50%;
    background           : #ffffff;
    border               : solid 2px #96dbfa;
}

/* Moz向けのつまみ */
.mq-simulator-shape-bar input[type="range"]::-moz-range-thumb {
    -webkit-appearance   : none;
    -moz-appearance      : none;
    -webkit-border-radius: 50%;
    height               : 14px;
    width                : 14px;
    border-radius        : 50%;
    background           : #ffffff;
    border               : solid 2px #96dbfa;
}

.mqlp-makeup-simulator-box {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    position             : relative;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator {
    -webkit-box-flex : 1;
    -ms-flex         : 1;
    flex             : 1;
    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;
    position         : relative;
    z-index          : 1;
    top              : 0;
    min-height       : 58.5vh;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator .mq-simulator-box-inner>div {
    margin: 0 auto
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-header {
    margin             : 1.5em 1.5em 1em;
    background-color   : #fff;
    position           : relative;
    z-index            : 1;
    -webkit-box-flex   : 0;
    -ms-flex           : 0;
    flex               : 0;
    display            : flex;
    /* border-bottom   : 3px solid rgb(214, 0, 28); */
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-header .header-button {
    margin-left: auto;
    z-index    : -1;
    display    : flex;
    opacity    : 1;

    -webkit-transition: opacity 1s;
    transition        : opacity 1s
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control {
    margin-top      : auto;
    min-height      : 224px;
    background-color: #fff;
    position        : relative;
    z-index         : 50;
    padding         : 0 2.6em;
    -webkit-box-flex: 1;
    -ms-flex        : 1;
    flex            : 1;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-simulator-howto {
    position: absolute;
    top     : -72px;
    right   : 10px;
    width   : 60px
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-simulator-howto img {
    display: block
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types {
    position: relative;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types ul {
    list-style     : none;
    display        : flex;
    padding        : 0.5em 4.5em 0.25em;
    justify-content: center;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li {
    -webkit-box-sizing : border-box;
    box-sizing         : border-box;
    margin             : 0 8px;
    background-color   : #fff;
    width              : 9vw;
    height             : 5vh;
    position           : relative;
    z-index            : 1;
    white-space        : nowrap;
    border-radius      : 8px 8px 4px 4px;
    background-repeat  : no-repeat;
    background-position: right 50% bottom 45%;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li::before {
    content : "";
    position: absolute;
    bottom  : -15px;
    left    : 0px;
    right   : 0px;
    height  : 1em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li::after {
    content : "";
    position: absolute;
    right   : 0;
    bottom  : -27px;
    left    : 0px;
    right   : 0px;
    height  : 2.3em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li.is-active {
    border-color : #eee;
    border-bottom: 0;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li.is-active::before {
    box-shadow: rgb(0 0 0 / 20%) 0 0 10px;
    z-index   : -1;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li.is-active::after {
    background-color  : #fff;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

.mqlp-makeup-simulator-box .mqlp-makeup-type-tabs .mqlp-makeup-type-tab {
    display: none
}

.mqlp-makeup-simulator-box .mqlp-makeup-type-tabs .mqlp-makeup-type-tab.is-active {
    display: block
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .choose-product {
    margin            : 0 10px;
    padding           : 15px 0 0;
    border-radius     : 6px;
    height            : 11.25vh;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px;
    -moz-box-shadow   : rgba(0, 0, 0, 0.2) 0 4px 10px;
    box-shadow        : rgba(0, 0, 0, 0.2) 0 4px 10px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .choose-product[disabled=disabled] div {
    opacity       : 0.7;
    pointer-events: none;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .choose-product~[disabled=disabled] div {
    opacity       : 1;
    pointer-events: auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .product-detail {
    display       : -ms-grid;
    display       : flex;
    flex-direction: column;
    width         : -webkit-fill-available;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .product-look-detail {
    display       : -ms-grid;
    display       : flex;
    flex-direction: column;
    width         : -webkit-fill-available;
    margin        : auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .product-image {
    display       : -ms-grid;
    display       : flex;
    flex-direction: column;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .product-detail .product-detail-B {
    display       : -ms-grid;
    display       : flex;
    flex-direction: column;
    width         : -webkit-fill-available;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .product-button {
    margin: auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .looks-button {
    margin: auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .product-button div {
    border          : 1px solid rgb(214, 0, 28);
    color           : #fff;
    background-color: rgb(214, 0, 28);
    margin          : 0 20px 15px 0;
    text-align      : center;
    z-index         : 3;
    font-size       : 1em;
    min-width       : 140px;
    line-height     : 60px;
    border-radius   : 6px;
    padding         : 0 10px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product .looks-button .looks-detail {
    border          : 1px solid rgb(214, 0, 28);
    color           : #fff;
    background-color: rgb(214, 0, 28);
    margin          : 0 20px;
    text-align      : center;
    z-index         : 3;
    font-size       : 1em;
    min-width       : 140px;
    line-height     : 60px;
    border-radius   : 6px;
    margin-top      : auto;
    padding         : 0 10px;
    white-space     : nowrap;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .product img {
    width   : auto;
    height  : 11vw;
    position: relative;
    z-index : 2;
    padding : 10px 20px;
    margin  : auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .outer {
    display            : flex;
    /* overflow-x      : hidden;
    overflow-y         : hidden; */
    display            : none;
    list-style         : none;
    position           : absolute;
    bottom             : 0;
    left               : 0;
    z-index            : 5;
    background-color   : rgb(255, 255, 255, 0.6);
    width              : 100%;
    height             : 100vh;
    text-align         : center;
    backdrop-filter    : blur(4px);
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .outer .inner {
    background-color  : #fff;
    width             : 90%;
    text-align        : center;
    margin            : 15vw 5vw;
    position          : absolute;
    bottom            : 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0 10px;
    -moz-box-shadow   : rgba(0, 0, 0, 0.3) 0 0 10px;
    box-shadow        : rgba(0, 0, 0, 0.3) 0 0 10px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items ul {
    overflow-x: hidden;
    overflow-y: hidden;
    padding   : 0;
    margin    : 11vh 0;
    height    : 754px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li {
    -ms-flex-negative: 0;
    flex-shrink      : 0;
    position         : relative;
    z-index          : 1;
    display          : flex;
    background-color : #fff;
    border-bottom    : 1px solid #D0D0D0;
    height           : 250px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li:first-child {
    border-top: 1px solid #D0D0D0;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li .icon {
    position: absolute;
    z-index : 3;
    top     : 9px;
    left    : 5px;
    width   : 33px
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li .icon img {
    margin   : auto 0;
    max-width: 100%;
    height   : auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li .image {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : inline-block;
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
    position        : relative;
    padding         : 0 5vw;
    margin          : auto 0px;
    padding-left    : 8em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li .looks_image img {
    height          : 14vh;
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : inline-block;
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
    position        : relative;
    margin          : auto 0px;
    padding         : 0 2em 0 4em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li .image::before {
    content           : "";
    position          : absolute;
    top               : 4px;
    right             : 0;
    bottom            : -4px;
    left              : 0;
    z-index           : 1;
    border-radius     : 4px;
    background-color  : transparent;
    -webkit-transition: background-color 250ms;
    transition        : background-color 250ms
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li .name {
    position   : relative;
    z-index    : 2;
    margin     : auto 0px;
    padding    : 0 0 0 5px;
    text-align : left;
    font-size  : 1.6em;
    line-height: 1.2em;
    display    : grid;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li.is-active::after {
    content    : "";
    position   : absolute;
    bottom     : -16px;
    left       : 50%;
    margin-left: -10px;
    width      : 20px;
    height     : 10px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items li.is-active .image::before {
    background-color: #f0ebe7
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs {
    padding: 0;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs button {
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    margin            : 0;
    padding           : 0;
    border            : 0;
    color             : inherit;
    background-color  : transparent;
    outline           : 0;
    font-size         : 1.5em;
    z-index           : 20;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .mqlp-makeup-item-tab {
    display: none;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .mqlp-makeup-item-tab.is-active {
    display: flex;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs ul {
    display                   : -webkit-box;
    display                   : -ms-flexbox;
    display                   : flex;
    min-height                : 38px;
    width                     : 70vw;
    list-style                : none;
    transition                : transform .4s ease-in;
    padding                   : 0;
    margin                    : 13px 0 0 0;
    -webkit-overflow-scrolling: touch;
    overflow-x                : hidden;
    overflow-y                : hidden;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li {
    -ms-flex-negative: 0;
    flex-shrink      : 0;
    padding-right    : 0px;
    width            : 11.65vw;
    text-align       : center;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .item {
    padding           : 5px 10px;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    background-color  : transparent;
    -webkit-transition: background-color 250ms;
    transition        : background-color 250ms;
    position          : relative;
    z-index           : 1;
    width             : 100%;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li button.js-mq-item-anchor.is-active .image {
    background-image : url("/assets/img/Materail/circle_with_check.png");
    background-size  : 7vw;
    background-repeat: no-repeat;
    z-index          : 10;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li button.js-looks-anchor.is-active .image {
    background-image : url("/assets/img/Materail/circle.png");
    background-size  : 7vw;
    background-repeat: no-repeat;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .item.is-balloon .balloon {
    display: block
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .image {
    height         : 7vw;
    width          : 7vw;
    border         : 1px solid #ddd;
    border-radius  : 50%;
    margin         : auto;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .image img {
    display      : block;
    max-width    : 7vw;
    max-height   : 7vw;
    border-radius: 50%;
    z-index      : -1;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .name {
    font-weight: 600;
    font-size  : 0.61em;
    color      : #000;
    margin-top : 5px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .detail {
    display: inline-block;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .detail div.rank {
    font-size       : 0.55em;
    color           : #fff;
    background-color: #000;
    padding         : 3px 5px;
    margin          : auto;
    width           : fit-content;
    white-space     : nowrap;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .detail div.no-rank {
    font-size: 0.6em;
    padding  : 3px;
    margin   : auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .detail div.tray {
    font-size: 0.6em;
    margin   : auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .balloon {
    position         : absolute;
    bottom           : 100%;
    left             : 50%;
    z-index          : 1;
    margin-bottom    : 8px;
    -webkit-transform: translateX(-50%);
    transform        : translateX(-50%);
    white-space      : nowrap;
    display          : none
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .balloon .balloon-inner {
    border-radius   : 4em;
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    color           : #fff;
    background-color: #999;
    font-size       : 1.5em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .balloon .balloon-inner::before {
    content          : "";
    position         : absolute;
    top              : 100%;
    left             : 50%;
    width            : 15px;
    height           : 8px;
    background-image : url("/assets/img/icon-balloon-arrow.png");
    background-size  : 15px auto;
    background-repeat: no-repeat;
    -webkit-transform: translateX(-50%);
    transform        : translateX(-50%)
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .balloon ul {
    margin    : 5px 0;
    padding   : 0 5px;
    min-height: 0;
    position  : relative;
    z-index   : 1
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .balloon ul::before {
    content         : "";
    position        : absolute;
    top             : 0;
    bottom          : 0;
    left            : 50%;
    width           : 1px;
    background-color: #fff
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .balloon li {
    padding: 0 12px
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .balloon li.is-active {
    color: rgb(214, 0, 28);
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .mqlp-makeup-item-tab .slide-button {
    margin: 8px 0 0 0;
    flex  : 1;
}

.prev,
.next {
    margin           : 6px 0;
    display          : block;
    width            : 10vw;
    height           : 9vw;
    background-size  : 7vw auto;
    background-repeat: no-repeat;
}

.prev {
    background-position: left 0 bottom 80%;
    margin-left: 1vw;
}

.next {
    background-position: right 0 bottom 80%;
    margin-left        : auto;
    margin-right: 1vw;
}

.prev {
    left            : 0;
    background-image: url("/assets/img/Materail/btn_left_active.png");
    filter          : drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.prev:active {
    background-image: url("/assets/img/Materail/btn_left_disable.png");
    filter          : none;
}

.prev.isDisabled {
    background-image: url("/assets/img/Materail/btn_left_disable.png");
    pointer-events  : none;
    filter          : none;
}

.next {
    right           : 0;
    background-image: url("/assets/img/Materail/btn_right_active.png");
    filter          : drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2));
}

.next:active {
    background-image: url("/assets/img/Materail/btn_right_disable.png");
    filter          : none;
}

.next.isDisabled {
    background-image: url("/assets/img/Materail/btn_right_disable.png");
    pointer-events  : none;
    filter          : none;
}

.above,
.below {
    left         : 0;
    position     : absolute;
    border-radius: 0 3px 3px 0;
    user-select  : none;
    z-index      : 10;
    width        : 100%;
    height       : 10vw;
}

.above {
    top                : 0;
    background-image   : url("/assets/img/Materail/up_active.png");
    background-size    : 6vw auto;
    background-repeat  : no-repeat;
    background-position: right 50% bottom 50%;
}

.above:active {
    background-image: url("/assets/img/Materail/up_disable.png");
}

.above.isDisabled {
    background-image: url("/assets/img/Materail/up_disable.png");
    pointer-events  : none;
}

.below {
    bottom             : 0;
    background-image   : url("/assets/img/Materail/down_active.png");
    background-size    : 6vw auto;
    background-repeat  : no-repeat;
    background-position: right 50% top 50%;
}

.below:active {
    background-image: url("/assets/img/Materail/down_disable.png");
}

.below.isDisabled {
    background-image: url("/assets/img/Materail/down_disable.png");
    pointer-events  : none;
}

.close {
    position           : absolute;
    border-radius      : 0 3px 3px 0;
    user-select        : none;
    z-index            : 20;
    width              : 6vw;
    height             : 6vw;
    top                : 1em;
    right              : 1em;
    background-image   : url(/assets/img/Materail/close_active.png);
    background-size    : 6vw auto;
    background-repeat  : no-repeat;
    background-position: right 50% top 50%;
}

.close:active {
    background-image: url("/assets/img/Materail/close_disable.png");
}

.tab10 {
    background-size : 45%;
    background-image: url("/assets/img/Materail/Blush.default.png");
    border          : 1px solid #000;
}

.tab10.clicked {
    background-size : 45%;
    background-image: url("/assets/img/Materail/Blush.active.png");
    border          : 1px solid rgb(214, 0, 28);
}

.tab49 {
    background-size : 60%;
    background-image: url("/assets/img/Materail/Lips.default.png");
    border          : 1px solid #000;
}

.tab49.clicked {
    background-size : 60%;
    background-image: url("/assets/img/Materail/Lips.active.png");
    border          : 1px solid rgb(214, 0, 28);
}

.tab38 {
    background-size : 60%;
    background-image: url("/assets/img/Materail/EyeShadow.default.png");
    border          : 1px solid #000;
}

.tab38.clicked {
    background-size : 60%;
    background-image: url("/assets/img/Materail/EyeShadow.active.png");
    border          : 1px solid rgb(214, 0, 28);
}

.tab39 {
    background-size : 47%;
    background-image: url("/assets/img/Materail/foundation.default.png");
    border          : 1px solid #000;
}

.tab39.clicked {
    background-size : 47%;
    background-image: url("/assets/img/Materail/foundation.active.png");
    border          : 1px solid rgb(214, 0, 28);
}

.tab40 {
    background-size : 60%;
    background-image: url("/assets/img/Materail/Mascara.default.png");
    border          : 1px solid #000;
}

.tab40.clicked {
    background-size : 60%;
    background-image: url("/assets/img/Materail/Mascara.active.png");
    border          : 1px solid rgb(214, 0, 28);
}

.tab3 {
    background-size : 60%;
    background-image: url("/assets/img/Materail/Eyebrow.default.png");
    border          : 1px solid #000;
}

.tab3.clicked {
    background-size : 60%;
    background-image: url("/assets/img/Materail/Eyebrow.active.png");
    border          : 1px solid rgb(214, 0, 28);
}

.tab5 {
    background-size : 60%;
    background-image: url("/assets/img/Materail/EyeLiner.default.png");
    border          : 1px solid #000;
}

.tab5.clicked {
    background-size : 60%;
    background-image: url("/assets/img/Materail/EyeLiner.active.png");
    border          : 1px solid rgb(214, 0, 28);
}

li.tab--1 {
    text-align : center;
    font-weight: bold;
    border     : 1px solid #000;
    color      : #000;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li.tab--1 div {
    line-height    : 1.5em;
    display        : flex;
    justify-content: center;
    align-items    : center;
    height         : 100%;
}

li.tab--1.clicked {
    color : rgb(214, 0, 28);
    border: 1px solid rgb(214, 0, 28);
}

.tab10.is-active,
.tab38.is-active,
.tab39.is-active,
.tab49.is-active,
.tab40.is-active,
.tab3.is-active,
.tab5.is-active,
.tab--1.is-active {
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0 10px;
    -moz-box-shadow   : rgba(0, 0, 0, 0.2) 0 0 10px;
    box-shadow        : rgba(0, 0, 0, 0.2) 0 0 10px;
}

.js-mq-color-line,
.js-mq-color-detail,
.js-mq-product-line,
.js-mq-product-detail {
    color: rgba(0, 0, 0, 0.6);
}

.js-mq-product-detail {

    font-size: 1.2em;
}

.outer .js-mq-item-list .js-mq-product-detail {

    font-size: 0.8em;
}

.js-mq-color-product,
.js-mq-color-name,
.js-mq-color-category,
.js-mq-color-looks {
    font-size  : 1.4em;
    line-height: 1.3em;
    font-weight: bold;
}

.js-mq-product-descript,
.js-looks-product-descript {
    font-size: 1em;
}

.js-mq-product-name,
.js-looks-product-name {
    font-weight: bold;
    font-size  : 1em;
}

.js-mq-color-detail{
    font-weight: bold;
}

.js-mq-product-detail {
    font-weight: bold;
}

.looks-product-items .outer {
    display         : flex;
    display         : none;
    list-style      : none;
    position        : absolute;
    bottom          : 0;
    z-index         : 5;
    background-color: rgb(255, 255, 255, 0.6);
    width           : 100%;
    height          : 100vh;
    text-align      : center;
    backdrop-filter : blur(4px);
    display         : block;
    left            : 0;
}

.looks-product-items .outer .inner {
    background-color  : #fff;
    width             : 90%;
    text-align        : center;
    margin            : 15vw 5vw;
    position          : absolute;
    bottom            : 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0 10px;
    -moz-box-shadow   : rgba(0, 0, 0, 0.3) 0 0 10px;
    box-shadow        : rgba(0, 0, 0, 0.3) 0 0 10px;
}

.inner .image {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : inline-block;
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
    position        : relative;
    padding         : 0 5vw;
}

.inner li .image::before {
    content           : "";
    position          : absolute;
    top               : 4px;
    right             : 0;
    bottom            : -4px;
    left              : 0;
    z-index           : 1;
    background-color  : transparent;
    -webkit-transition: background-color 250ms;
    transition        : background-color 250ms
}

.inner .image img {
    width: 10em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-items .inner li .name {
    line-height: 1.5em;
}

.js-mq-looks-image {
    border-radius: 50%;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list {
    display   : block;
    overflow-x: hidden;
    overflow-y: hidden;
    padding   : 0;
    margin    : 11vh 0;
    height    : 754px;
    width     : 100%;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li {
    -ms-flex-negative: 0;
    flex-shrink      : 0;
    position         : relative;
    z-index          : 1;
    display          : flex;
    background-color : #fff;
    border-bottom    : 1px solid #D0D0D0;
    height           : 250px;
    width            : 100%;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li:first-child {
    border-top: 1px solid #D0D0D0;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li .looks_image {
    /* height       : 13em; */
    border-radius: 0;
    border       : 0;
    margin       : auto;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li .looks_name {
    position   : relative;
    z-index    : 2;
    margin     : auto 0px;
    padding    : 0 0 0 5px;
    text-align : left;
    font-size  : 1.5em;
    line-height: 1.5em;
    display    : grid;
    width      : -webkit-fill-available;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li .looks_name .js-mq-product-line {
    font-size: 0.8em;
}

#change-model {
    font-size                  : 0.9em;
    -webkit-tap-highlight-color: transparent;
    background-color           : #fff;
    text-align                 : center;
    min-width                  : 8em;
    height                     : 100%;
    cursor                     : pointer;
    border                     : 1px solid rgba(0, 0, 0, 0.4);
    border-radius              : 3px;
    margin-right               : 10px;
    line-height                : 1.4em;
    color                      : #000;
}

#change-model.isOpenCamera {
    background-color: #000;
    color           : #fff;
}

.hide {
    display: none;
}

.hidden {
    visibility: hidden;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li .looks_button {
    position: relative;
    margin  : auto 0px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs li .look-product-list li .looks_button div {
    border         : 1px solid #000;
    color          : #000;
    text-align     : center;
    font-size      : 1.1em;
    margin-left    : auto;
    margin-right   : 4em;
    border-radius  : 6px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    min-width      : 8em;
    height         : 3em;
    white-space    : nowrap;
}

.mqlp-makeup-simulator-box .mqlp-makeup-simulator-control .mqlp-makeup-types li.tab--1 {
    width: 17vw;
}

.overlay {
    position  : absolute;
    z-index   : 1000;
    top       : 0;
    width     : 100%;
    height    : 100%;
    text-align: center;
}

.overlay .loading {
    font-weight: bold;
    text-align : center;
    font-size  : 2em;
    display    : inline-grid;
    position   : fixed;
    top        : 50%;
    left       : 50%;
    width      : 100%;
    transform  : translate(-50%, -50%);
}

.overlay .loading .loading-img {
    margin-left : auto;
    margin-right: auto;
    animation   : spin 1.5s linear infinite;
}

.overlay .loading .loading-text {
    z-index: 3;
    padding: 20px;
}


.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper {
    display   : flex;
    list-style: none;
    position  : absolute;
    bottom    : 0;
    left      : 0;
    z-index   : -1;
    height    : 100vh;
    text-align: center;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper .finish-pattern {
    position  : relative;
    top       : 7.3em;
    left      : 24px;
    padding   : 1em 0 0;
    text-align: center;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper .finish-pattern[disabled=disabled] {
    opacity       : 0.7;
    pointer-events: none;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper .finish-pattern .pattern-text {
    font-weight: bold;
    font-size  : 1em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper .finish-pattern .finish-pattern-item {
    margin-top: 0.6em;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper .finish-pattern .finish-pattern-item .pattern-image {
    cursor          : pointer;
    filter          : drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
    margin          : 0 auto 1em;
    background-color: white;
    border-radius   : 6px;
    border          : 3px solid #fff;
    box-sizing      : border-box;
    width           : 120px;
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper .finish-pattern .finish-pattern-item .pattern-image.is-active {
    border: 2px solid rgb(214, 0, 28);
}

.mqlp-makeup-simulator-box .mqlp-makeup-item-tabs .pattern-wraper .finish-pattern .finish-pattern-item .pattern-image img {
    display      : block;
    width        : 100%;
    height       : auto;
    border-radius: 6px;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#label-color {
    position   : absolute;
    top        : 31px;
    left       : 769px;
    z-index    : 1;
    font-size  : 0.9em;
    font-weight: bold;
}

#label-color span {
    display: none;
}

#label-color span.is-active {
    display: block !important;
}

#label-shape {
    position   : absolute;
    top        : 31px;
    left       : 707px;
    z-index    : 1;
    font-size  : 0.9em;
    font-weight: bold;
}

#label-shape span {
    display: none;
}

#label-shape span.is-active {
    display: block !important;
}