@charset "utf-8";

/* ギフトカートイン */
/* 共通 */
.popup_OK_message{
    text-align: center;
}
.cartpop_txt{
    text-align: left;
}
.cartpop_NG_block .btn img, .cartpop_OK_block .btn img {
    width: 100%;
}
.popup_close_btn::before{
    content: " ";
    position: absolute;
    background-image: url(../images/popup/icon_closebtn.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 14px;
    background-size: 90%;
    left: 14%;
    top: 27%;
}
/* PC */
@media screen and (min-width: 751px) {
    .spOnly {
        display: none;
    }
    .popup_OK_message,.cartpop_txt{
        font-size: 1rem;
    }
    .popup_message {
        color: #CC0000;
        font-weight: bold;
        font-size: 28px;
        margin-bottom: 20px;
        text-align: left;
    }
    .cartpop_NG_block, .cartpop_OK_block, .cartpop_ERR_block {
        position: relative;
        display: inline-block;
        background: #FFFFFF;
        padding: 20px;
        margin: 65px 0 0;
        border: solid 3px #555;
        box-sizing: border-box;
        width: 400px;
    }
    .cartpop_NG_block::before, .cartpop_OK_block::before, .cartpop_ERR_block::before {
        content: "";
        position: absolute;
        top: -23px;
        left: 80%;
        margin-left: -15px;
        border: 12px solid transparent;
        border-bottom: 12px solid #FFF;
        z-index: 2;
    }
    .cartpop_NG_block::after, .cartpop_OK_block::after, .cartpop_ERR_block::after {
        content: "";
        position: absolute;
        top: -29px;
        left: 80%;
        margin-left: -17px;
        border: 14px solid transparent;
        border-bottom: 14px solid #555;
        z-index: 1;
    }
    .cartpop_NG_block .btn, .cartpop_OK_block .btn {
        width: 60%;
        margin: 2% auto;
    }
    .cartpop_NG_block .infoarea {
        /* display: flex;
        flex-wrap: wrap; */
        margin: 20px auto;
        width: 272px;
    }
    .cartpop_NG_block .infoarea img{
        width: 100%;
    }
/*
    .lineup-img, .lineup-img img {
        position: static;
    }
*/

    .lineup-btnCart .cartin_btn {
        border: 0px;
        background-image: url(../images/lineup_btn_cart_off.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: contain;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .lineup-btnCart .cartin_btn:hover {
        background-image: url(../images/lineup_btn_cart_on.jpg);
    }

    .reservation-btnCart .cartin_btn {
        border: 0px;
        background-image: url(../images/reservation_btn_cart_off.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: contain;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .reservation-btnCart .cartin_btn:hover {
        background-image: url(../images/reservation_btn_cart_on.jpg);
    }
    .telarea{
        margin-bottom: 14px;
    }
    .closeArea{
        margin: 4% 0 6%;
    }
    .popup_close_btn{
        position: relative;
        background: #F5F4F4;
        border: 1px solid #DDDDDD;
        padding: 1% 9% 1% 12%;
        box-shadow: 1px 1px 2px #ccc;
        display: inline-block;
        border-radius: 4%;
        cursor: pointer;
    }
    .cartpop_OK_block .closeArea,.cartpop_ERR_block .closeArea{
        margin-bottom: 0;
    }
}

/* SP */
@media screen and (max-width: 750px) {
    .pcOnly {
        display: none;
    }
    
    .yui3-overlay {
        left: 0;  /* SP用ポップアップ表示位置（水平方法）を0に固定する */
    }

    .popup_message {
        color: #CC0000;
        font-weight: bold;
        font-size: 5vw;
        margin-bottom: 2%;
        text-align: left;
    }

    .cartpop_NG_block, .cartpop_OK_block, .cartpop_ERR_block {
        position: relative;
        display: inline-block;
        background: #FFFFFF;
        font-size: 3.5vw;
        padding: 4%;
        margin: 55px 2% 0;
        border: solid 2px #555;
        box-sizing: border-box;
    }

    .cartpop_NG_block::before, .cartpop_OK_block::before, .cartpop_ERR_block::before {
        content: "";
        position: absolute;
        top: -23px;
        left: 67%;
        margin-left: -15px;
        border: 12px solid transparent;
        border-bottom: 12px solid #FFF;
        z-index: 2;
    }
    .cartpop_NG_block::after, .cartpop_OK_block::after, .cartpop_ERR_block::after {
        content: "";
        position: absolute;
        top: -28px;
        left: 67%;
        margin-left: -17px;
        border: 14px solid transparent;
        border-bottom: 14px solid #555;
        z-index: 1;
    }
    .cartpop_NG_block .btn, .cartpop_OK_block .btn {
        width: 90%;
        margin: 4% auto;
    }
    .cartpop_NG_block .infoarea {
        margin: 4% 0;
    }
    .cartpop_NG_block .infoarea p:first-child {
        width: 80%;
        margin: 0 auto 4%;
    }
    .cartpop_NG_block .infoarea img {
        width: 100%;
    }

    .lineup-btnCart .cartin_btn {
        border: 0px;
        background-image:url(../images/lineup_btn_cart_sp.jpg);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: contain;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
    }

    .reservation-btnCart .cartin_btn {
        border: 0px;
        background-image:url(../images/reservation_btn_cart_sp.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: contain;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
    }
    .closeArea{
        margin: 2% 0 6%;
    }
    .cartpop_OK_block .closeArea,.cartpop_ERR_block .closeArea{
        margin-bottom: 0;
    }
    .telarea{
        margin-bottom: 2%;
    }
    .popup_close_btn{
        position: relative;
        background: #F5F4F4;
        border: 1px solid #DDDDDD;
        padding: 1% 16% 1% 20%;
        box-shadow: 1px 1px 2px #ccc;
        display: inline-block;
        width: fit-content;
        border-radius: 4%;
    }
}