@charset "UTF-8";

.price_container{
    font-size: 1.0em;
    padding: 2em 0.5em 2.5em;
}

.price_contents_container{
    background-color: white;
    border-radius: 0.2em;
    margin: auto;
    color: var(--font--base-color);
    padding: 0 1em 1em;
    box-shadow: 0 10px 10px 0.5px #00000017
}

.price_cancel_msg_box{
    margin: auto;
    padding: 1em 1em 0;
    border: solid 0.5px gray;
    border-radius: 0.5em;
    position: relative;
}.price_cancel_msg_box::before{
    content: "キャンセルについて";
    position: absolute;
    background-color: white;
    padding: 0 0.5em;
    transform: translate(0%, -50%);
    top: -0.5%;
    font-size: 1em;
    font-weight: 700;
}

.price_cancel_msg_box > table{
    font-size: 0.9em;
    width: 100%;
}.price_cancel_msg_box > table tr{
    display: flex;
    padding: 0 0 1em;
}.price_cancel_msg_box > table td:nth-child(1){
    font-size: 0.9em;
    width: 30%;
    white-space: nowrap;
    padding: 0 1em 0 0;    
}.price_cancel_msg_box > table td:nth-child(2){
    font-size: 0.9em;
    flex: 1;
    height: fit-content;
}

.price_title{
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    margin: 0.5em auto;
}

.price_contents_title{
    font-size: 1.0em;
    text-align: center;
    font-weight: 700;
    margin: 0.5em auto;
}

.price_list_group{
    padding: 0 0 1em 0;
    font-size: 1.2em;
}.price_list_group:last-child{
    padding: 0!important;
}


.price_list_caption{
    padding: 0.2em 0;
    background-color: var(--bg--base-color);
    text-indent: 0.5em;
}

.price_item_title, .price_item_price{
    text-align: left;
    border-bottom: 1px solid #cfcfcf60;
}.price_item_title{
    text-indent: 1.5em;
}.price_item_price{
    text-align: center;
}

.price_image{
    background-image: url(../image/material/d_1.png);
    width: 90%;
    margin: auto;
}

.price_msg_box{
    padding: 1em;
    width: fit-content;
    margin: auto;
}

/* PC */
@media screen and (min-width: 769px) {
    .price_cancel_msg_box{
        width: 85%;
        font-size: 1.0em;
    }

    .price_container{
        height: 45em;
    }

    .price_contents_container{
        width: 45%;
        height: 100%;
    }

    .price_image{
        flex: 1;
    }
}

/* SP */
@media screen and (max-width: 768px) {
    .price_cancel_msg_box{
        width: 100%;
        font-size: 1.2em;
    }

    .price_contents_container{
        width: 100%;
    }

    .price_image{
        height: 20em;
    }
}