@charset "UTF-8";
/* service cam_newmember CSS */
.sec-cam_newmember {
    container-type: inline-size;
    container-name: cam_newmember;
}

.member-merit{
    background-color: #fffaeb;
    border: 2px solid var(--color-sub2);
    border-radius: 5px;
}
.merit-ttl{
    display: flex;
    justify-content: center;
    padding: 5px 10px;
    background-color: var(--color-sub2);
}

.merit-itemlist{
    padding: 20px 30px;
}
.merit-item{
    gap: 20px;
    align-items: center;
}
.merit-item:not(:last-of-type){
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 15px;
}
.merit-img{
    width: 70px;
    height: 70px;
}
.merit-txt{
    flex: 1;
}

.btn-area{
    gap: 15px;
    justify-content: center;
}
.btn{
    padding: 15px 20px;
    background-color: var(--color-sub);
    border-radius: 5px;
}

.area-ttl{
    background-color: var(--color-sub2);
    padding: 6px 10px;
}

.detail-campaign{
    display: grid;
    grid-template-columns: 1fr 3fr;
    row-gap: 3px;
}
.detail-campaign>dt{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffee93;
    padding: 10px;
}
.detail-campaign>dd{
    display: flex;
    align-items: center;
    background-color: var(--bg-page);
    padding: 10px;

}

.usage-coupon{
    gap: 20px;
}
.usage-img{
    width: 40%;
    max-width: 380px;
    min-width: 250px;
    height: fit-content;
    border: 1px solid var(--color-border);
}
.usage-txt{
    flex: 1;
}

@media (min-width:768px) {
    .btn{
        transition: all 0.3s ease;
    }
    .btn:hover{
        opacity: 0.7;
    }
}

@container cam_newmember (max-width:650px){
    .merit-itemlist {
        padding: 15px 20px;
    }

    .detail-campaign {
        grid-template-columns: 1fr;
        row-gap: 0;
    }
    .detail-campaign>dt {
        padding: 5px;
    }
    .detail-campaign>dd{
        margin-bottom: 5px;
    }

    .usage-coupon{
        justify-content: center;
    }
    
    .usage-img {
        width: 100%;
        max-width: 380px;
        min-width: none;
    }
    .usage-txt{
        flex: auto;
    }
}

@container cam_newmember (max-width:400px){
    .merit-ttl{
        font-size: 90%;
    }
    .merit-item {
        gap: 15px;
    }
    .merit-img {
        width: 55px;
        height: 55px;
    }

    .btn-area {
        gap: 10px;
    }
    .btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}