@charset "utf-8";

#lp_wrapper button{
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    appearance: none;
}

/* animation
--------------------------------------------------*/
@keyframes neonBlink {
    70% {
        opacity: 1;
    }
    72% {
        opacity: 0;
    }
    84% {
        opacity: 1;
    }
    85% {
        opacity: 0;
    }
    86% {
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
    95.5% {
        opacity: 1;
    }
}
.neonBlink{
    animation: neonBlink linear infinite 4s;
}
#lp_wrapper .swing.display_switch,
#lp_wrapper .tada.display_switch{
    opacity: 1;
}

/* grayout
--------------------------------------------------*/
.grayout p:not([class*="popup_link"]) {
    top: 38%;
    left: 1.5%;
    transform: rotateZ(5deg);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 2.2rem;
    line-height: 1.5;
}
.grayout.__header {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    background: rgb(0 0 0 / 75%);
}

/* countdown timer
--------------------------------------------------*/
#lp_wrapper .js-countdown{
    font-size: 2.8rem;
    color: #fa2828;
    font-family: "Noto Sans JP", serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    position: absolute;
    bottom: 8%;
    right: 8%;
    font-feature-settings: "palt";
}
#lp_wrapper .js-countdown.--last {
    right: 6%;
    letter-spacing: 0.05em;
}

/* header
--------------------------------------------------*/
#lp_wrapper .content_BF_header-frame_effect{
    width: 100%;
    top: 0.2%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_header-frame{
    width: 100%;
    top: 0%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_header-limited333 {
    width: 58.2%;
    top: 1%;
    left: 0.6%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_header-lead{
    width: 55.86%;
    top: 18.1%;
    left: 0;
    right: 0.5%;
    margin: 0 auto;
}
#lp_wrapper .content_BF_header-text_blackFriday_effect{
    width: 100%;
    top: 15%;
    left: 0%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_header-text_blackFriday{
    width: 68.8%;
    top: 31.2%;
    left: 1.1%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_header-star_blue{
    width: 6.4%;
    top: 16.8%;
    left: 7.8%;
}
#lp_wrapper .content_BF_header-star_pink{
    width: 6.66%;
    top: 16.8%;
    right: 7.8%;
}
#lp_wrapper .content_BF_header-fukidashi {
    width: 16%;
    bottom: 29%;
    left: 5.2%;
}
#lp_wrapper .content_BF_header-kassa {
    width: 16.3%;
    bottom: 23%;
    right: 2.5%;
}
#lp_wrapper .content_BF_header-fukidashi__last {
    width: 17.6%;
    top: 2.3%;
    left: 23.9%;
    animation-duration: 1.2s;
}

#lp_wrapper .content_BF_header-limited333__last {
    width: 33.9%;
    top: 1%;
    right: 23.8%;
    margin: 0 auto;
}

/* FV
--------------------------------------------------*/
#lp_wrapper .content_BF_intro_rib {
    width: 92.4%;
    top: 2.8%;
    left: 0.5%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_intro_text01 {
    width: 15.3%;
    top: 13.5%;
    left: 16.9%;
    animation-duration: 0.5s;
}#lp_wrapper .content_BF_intro_text02{
    width: 15.3%;
    top: 13.1%;
    left: 30.2%;
    animation-duration: 0.5s;
}
#lp_wrapper .content_BF_intro_text03{
    width: 15.3%;
    top: 12.6%;
    left: 44.2%;
    animation-duration: 0.5s;
}
#lp_wrapper .content_BF_intro_text04{
    width: 15.3%;
    top: 12.1%;
    left: 58%;
    animation-duration: 0.5s;
}
#lp_wrapper .content_BF_intro_price{
    width: 92%;
    top: 18.1%;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-duration: 0.7s;
}
#lp_wrapper .content_BF_intro_limited333 {
    width: 51.2%;
    top: 30.8%;
    right: 9.3%;
}
#lp_wrapper .content_BF_intro_cp01{
    width: 24.9%;
    top: 31.2%;
    left: 12.2%;
    animation-duration: 0.7s;
}
#lp_wrapper .content_BF_intro_cp02{
    width: 47%;
    top: 35.2%;
    right: 11.1%;
    animation-duration: 0.6s;
}
#lp_wrapper .content_BF_intro_cp03{
    width: 79.6%;
    top: 41.2%;
    left: 2.6%;
    right: 0;
    margin: 0 auto;
    animation-duration: 0.7s;
}
#lp_wrapper .content_BF_intro_star01{
    width: 11%;
    bottom: 48.7%;
    right: 22%;
    animation-duration: 1.7s;
}
#lp_wrapper .content_BF_intro_star02{
    width: 8%;
    bottom: 46%;
    right: 10%;
    animation-duration: 1.5s;
}
#lp_wrapper .content_BF_intro_off{
    width: 92.1%;
    bottom: 21.8%;
    left: 4.4%;
    right: 0;
    margin: 0 auto;
    animation-duration: 0.6s;
}
#lp_wrapper .content_BF_intro_fukidashi{
    width: 77.1%;
    bottom: 21.5%;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-duration: 0.7s;
}
#lp_wrapper .content_BF_intro_333 {
    width: 58.1%;
    bottom: 10%;
    left: 4.5%;
    animation-duration: 0.4s;
}
#lp_wrapper .content_BF_intro_present{
    width: 56.5%;
    bottom: 6.1%;
    left: 4.8%;
}
#lp_wrapper .content_BF_intro_kassa {
    width: 41.2%;
    bottom: 3.9%;
    right: 0;
    animation-duration: 0.7s;
}

/* fastOffer
--------------------------------------------------*/
#lp_wrapper .content_BF_fastOffer-frame_effect{
    width: 100%;
    bottom: 0.9%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_fastOffer-frame{
    width: 92.8%;
    bottom: 6%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_fastOffer-text_blackFriday_effect{
    width: 74.53%;
    top: 2.3%;
    left: 6%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_fastOffer-text_blackFriday{
    width: 59.86%;
    top: 16.4%;
    left: 0.6%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_fastOffer-text_maxOff{
    width: 78.53%;
    top: 32.4%;
    left: 0.8%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_fastOffer-balloon_effect{
    width: 30.13%;
    top: 27.5%;
    right: 7.2%;
    animation-duration: 3s;
}
#lp_wrapper .content_BF_fastOffer-balloon{
    width: 26.4%;
    top: 31%;
    right: 9.2%;
}
#lp_wrapper .content_BF_fastOffer_btn{
    width: 80.53%;
    bottom: 11.2%;
    left: 0.5%;
    right: 0;
    margin: 0 auto;
}

/* offer01
--------------------------------------------------*/
#lp_wrapper .content_BF_offer01-cart_effect{
    width: 13.2%;
    top: 4.7%;
    left: 2.4%;
}
#lp_wrapper .content_BF_offer01-cart{
    width: 9.46%;
    top: 7.9%;
    left: 4.3%;
}
#lp_wrapper .content_BF_offer01-star_effect{
    width: 11.06%;
    top: 38.7%;
    right: 4.3%;
}
#lp_wrapper .content_BF_offer01-star{
    width: 5.6%;
    top: 42.7%;
    right: 6.9%;
}
#lp_wrapper .content_BF_offer01-text_shippingFree_effect{
    width: 47.06%;
    top: 41.7%;
    left: 20%;
    animation-duration: 3s;
}
#lp_wrapper .content_BF_offer01-text_shippingFree{
    width: 42.26%;
    top: 45.4%;
    left: 22.4%;
}
#lp_wrapper *[class^="content_offer_popup_link"]{
    border-bottom: 1px solid #50464b;
    color: #50464b;
    font-size: 16px;
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    line-height: 1;
    letter-spacing: 0.2em;
    left: 10%;
}
#lp_wrapper *[class^="content_offer_popup_link"]:hover{
    opacity: 0.7;
}
#lp_wrapper .content_offer_popup_link01{
    top: 29.33%;
}
#lp_wrapper .content_offer_popup_link02{
    top: 60.1%;
}
#lp_wrapper .content_offer_popup_link03{
    top: 86.95%;
}

/* present
--------------------------------------------------*/
#lp_wrapper .content_BF_present_present {
    width: 60%;
    top: 24.7%;
    left: 4.6%;
}
#lp_wrapper .content_BF_present_color {
    width: 20.8%;
    top: 24.2%;
    right: 3.8%;
    animation-duration: 0.7s;
}
#lp_wrapper .content_BF_present_lead01 {
    width: 88.6%;
    top: 39.8%;
    left: 0;
    animation-duration: 0.8s;
}
#lp_wrapper .content_BF_present_lead02 {
    width: 98.3%;
    top: 65.5%;
    animation-duration: 0.8s;
}

/* offer02
--------------------------------------------------*/
#lp_wrapper *[class^="content_BF_offer02-balloon_setNum0"]{
    left: 0;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .content_BF_offer02-balloon_setNum01{
    width: 39.46%;
    top: 1.29%;
}
#lp_wrapper .content_BF_offer02-balloon_setNum02{
    width: 33.73%;
    top: 32.1%;
}
#lp_wrapper .content_BF_offer02-balloon_setNum03{
    width: 39.46%;
    top: 63.2%;
}
#lp_wrapper .content_BF_offer02-present_guasha{
    width: 86.66%;
    left: 9.9%;
}
#lp_wrapper .content_BF_offer02-present_guasha.--setNum01{
    top: 20.93%;
}
#lp_wrapper .content_BF_offer02-present_guasha.--setNum02{
    top: 51.73%;
}
#lp_wrapper .offer_BF_btn01,
#lp_wrapper .offer_BF_btn02,
#lp_wrapper .offer_BF_btn03{
    width: 84.53%;
    left: 0.8%;
    right: 0;
    margin: 0 auto;
}
#lp_wrapper .offer_BF_btn01{
    top: 25.25%;
}
#lp_wrapper .offer_BF_btn02{
    top: 56.05%;
}
#lp_wrapper .offer_BF_btn03{
    top: 82.9%;
}
#lp_wrapper .offer_BF_btn04{
    width: 20.53%;
    bottom: 3.3%;
    right: 7%;
}

/* tokuten
--------------------------------------------------*/
#lp_wrapper .content_BF_tokuten-star_effect{
    width: 10%;
    top: 9.4%;
    left: 9.8%;
}
#lp_wrapper .content_BF_tokuten-star{
    width: 7.73%;
    top: 9.9%;
    left: 10.9%;
}
#lp_wrapper .content_BF_tokuten-cart_effect{
    width: 17.6%;
    top: 7%;
    right: 4.7%;
}
#lp_wrapper .content_BF_tokuten-cart{
    width: 12.93%;
    top: 8%;
    right: 6.9%;
}
#lp_wrapper *[class^="content_BF_tokuten-list0"]{
    left: 8.9%;
}
#lp_wrapper .content_BF_tokuten-list01{
    width: 72%;
    top: 17.5%;
}
#lp_wrapper .content_BF_tokuten-list02{
    width: 61.33%;
    top: 26.6%;
}
#lp_wrapper .content_BF_tokuten-list03{
    width: 59.73%;
    top: 35.7%;
}
#lp_wrapper .content_BF_tokuten-list04{
    width: 59.86%;
    top: 44.7%;
}
#lp_wrapper .content_BF_tokuten-list05{
    width: 60%;
    top: 53.8%;
}
#lp_wrapper .content_BF_tokuten-list06{
    width: 68.4%;
    top: 62.85%;
}
#lp_wrapper .content_BF_tokuten-list07{
    width: 72.26%;
    top: 71.9%;
}
#lp_wrapper .content_BF_tokuten-balloon_2free{
    width: 18.13%;
    bottom: 48.4%;
    right: 8.9%;
}
#lp_wrapper .content_BF_tokuten-balloon_4free{
    width: 18.13%;
    bottom: 39.4%;
    right: 8.9%;
}
#lp_wrapper .content_BF_tokuten-guasha{
    width: 16.4%;
    bottom: 30.8%;
    right: 4.7%;
}
#lp_wrapper .BF_tokuten_btn{
    width: 84.53%;
    bottom: 3.6%;
    left: 0.7%;
    right: 0;
    margin: 0 auto;
}
/* modal
--------------------------------------------------*/
#lp_wrapper .modalBox {
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: auto;
    z-index: 1000;
}
#lp_wrapper .modal__overlay {
    width: 100%;
    height: 100%;
    background: rgba(120, 123, 131, 0.8);
    position: absolute;
    cursor: pointer;
}
#lp_wrapper .modal__content {
    width: 100%;
    max-width: 300px;
    padding: 25px 25px 10px;
    border: 1px solid #50464b;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#lp_wrapper .modal__content.--for_exchange {
    width: 100%;
    max-width: 750px;
    padding: 30px 45px;
    box-sizing: border-box;
}
#lp_wrapper .modal__content.--for_exchange dl{
    width: 100%;
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    line-height: 1.8;
}
#lp_wrapper .modal__content.--for_exchange dl dt{
    margin-bottom: 20px;
    padding-bottom: 3px;
    border-bottom: 1px solid #50464b;
    font-size: 18px;
    text-align: center;
}
#lp_wrapper .modal__content.--for_exchange dl dd{
    margin-bottom: 10px;
    padding-left: 15px;
    font-size: 12px;
    line-height: 1.7em;
    position: relative;
}
#lp_wrapper .modal__content.--for_exchange dl dd:last-child{
    margin-bottom: 0;
}
#lp_wrapper .modal__content.--for_exchange dl dd::before{
    content: '';
    width: 6px;
    height: 6px;
    background: #50464b;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 0;
}
#lp_wrapper .modal__content.--for_exchange dl dd table{
    width: 100%;
}
#lp_wrapper .modal__content.--for_exchange dl dd table th{
    font-weight: 500;
}
#lp_wrapper .modal__content.--for_exchange dl dd span{
    color: #ee0404;
    font-weight: 600;
}
#lp_wrapper .modal__close-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #50464b;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
    z-index: 10;
}
#lp_wrapper .modal__close-btn span{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
#lp_wrapper .modal__close-btn span::before,
#lp_wrapper .modal__close-btn span::after {
    content: "";
    width: 1px;
    height: 10px;
    background: #50464b;
    position: absolute;
    top: 50%;
    left: 50%;
}
#lp_wrapper .modal__close-btn span::before {
    transform: translate(-50%,-50%) rotate(45deg);
}
#lp_wrapper .modal__close-btn span::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}

@media screen and (max-width: 749px) {
    /* grayout
    --------------------------------------------------*/
    .grayout p:not([class*="popup_link"]) {
        font-size: 1.2rem;
    }
    .grayout.__header {
        height: 40vw;
    }
    /* countdown timer
    --------------------------------------------------*/
    #lp_wrapper .js-countdown{
        font-size: 5.9vw;
        letter-spacing: 0.06em;
    }

    /* offer01
    --------------------------------------------------*/
    #lp_wrapper *[class^="content_offer_popup_link"]{
        font-size: 2.2vw;
    }

    /* modal
    --------------------------------------------------*/
    #lp_wrapper .modal__content {
        width: 75%;
        padding: 15px;
        top: 45%;
    }
    #lp_wrapper .modal__close-btn {
        width: 35px;
        height: 35px;
    }
    #lp_wrapper .modal__content.--for_exchange {
        width: 90%;
        height: 500px;
        padding: 0;
    }
    #lp_wrapper .modal__content.--for_exchange dl{
        height: 100%;
        padding: 30px;
        overflow-y: scroll;
        box-sizing: border-box;
    }
    #lp_wrapper .modal__content.--for_exchange dl dd table th,
    #lp_wrapper .modal__content.--for_exchange dl dd table td{
        display: block;
        width: 100%;
    }
    #lp_wrapper .modal__content.--for_exchange dl dd table td{
        padding-left: 15px;
        box-sizing: border-box;
    }
}