/* listing デザインの共通部品のうち、Laravel側の共通CSSに未反映の定義。 */
.c-checkbox {
    column-gap: var(--checkbox-column-gap, 10px);
    align-items: var(--checkbox-align-items, center);
    width: var(--checkbox-width, auto);
    aspect-ratio: var(--checkbox-aspect-ratio, auto);
    font-size: var(--checkbox-font-size, 14px);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    line-height: 1;
    display: flex;
}

.c-checkbox input[type="checkbox"] {
    width: var(--checkbox-size, 30px);
    aspect-ratio: 1;
    cursor: inherit;
    align-items: center;
    display: grid;
}

.c-checkbox input[type="checkbox"]::before,
.c-checkbox input[type="checkbox"]::after {
    content: "";
    grid-area: 1 / 1;
}

.c-checkbox input[type="checkbox"]::before {
    width: var(--checkbox-size, 30px);
    aspect-ratio: 1;
    background-color: var(--radio-color, #fff);
    border: 2px solid #b6b6b6;
    border-radius: var(--rounded-xs);
}

.c-checkbox input[type="checkbox"]::after {
    width: var(--input-checkbox-size, 20px);
    aspect-ratio: var(--input-checkbox-aspect-ratio, 1.42869);
    background-color: var(--input-checkbox-color, #ff7d64);
    -webkit-mask-image: url('/assets/images/icon/check.svg');
    mask-image: url('/assets/images/icon/check.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    transition: opacity var(--duration) var(--easing-primary);
    margin: auto;
}

.c-checkbox input[type="checkbox"]:not(:checked)::after {
    opacity: 0;
}

.c-bottom-link {
    width: fit-content;
    font-weight: var(--font-weight-medium);
    color: #ff6414;
    margin-inline: auto;
    text-decoration: underline;
    display: block;
}

.p-listing-plan__text {
    font-weight: var(--font-weight-medium);
}

.p-listing-plan__campaign {
    position: relative;
}

.p-listing-plan__campaign::before {
    content: "キャンペーン中につき無料！";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    height: 42px;
    margin: auto;
    border-radius: var(--rounded-md);
    background-color: #ff5acb;
    color: #fff;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
}