@charset "utf-8";


/*
------------------------
Squareカード
------------------------
*/

#square-area {
    display: flex;
    gap: 12px;
}

#square-area #js-square-card-container {
    flex-grow: 1;
}

#square-area .button {
    width: 70px;
}

#square-area .button button {
    margin: 0 auto 8px;
}

#square-card-area .card-detail {
    display: flex;
    align-items: center;
}

#square-card-area .card-detail img,
#square-card-area .card-detail .last-4 {
    margin-right: 12px;
}

#square-card-area #js-square-card-list-area .label-radio {
    display: flex;
    color: var(--parts-font-color);
    background-color: var(--parts-background-color);
    border: solid 1px var(--border-color);
    line-height: 48px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 4px;
}

#square-card-area #js-square-card-list-area .label-radio:first-of-type {
    margin-top: 0;
}

#square-card-area #js-square-card-list-area .label-radio ul {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    width: calc(100% - 48px);
    gap: 8px;
}

#square-card-area #js-square-card-list-area .label-radio ul li:first-of-type {
    flex-grow: 1;
}

#square-card-area #js-square-card-list-area .label-radio ul li.use {
    width: 96px;
}

#square-card-area #js-square-card-list-area .label-radio ul li.delete {
    width: 72px;
}

#square-card-area .message-textarea,
#square-card-area .error-textarea {
    display: none;
    margin: 8px 0 0;
}


/* tab */

@media only screen and (min-width: 641px) and (max-width: 1100px) {
    #square-card-area #js-square-card-list-area .label-radio {
        line-height: 53px;
    }
    #square-card-area #js-square-card-list-area .label-radio ul {
        width: calc(100% - 53px);
    }
}


/* sp */

@media only screen and (max-width: 640px) {
    #square-card-area #js-square-card-list-area .label-radio {
        line-height: 60px;
    }
    #square-card-area #js-square-card-list-area .label-radio ul {
        width: 100%;
    }
}