@charset 'utf-8';

.area_wrap {
    margin-top: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.area {
    display: grid;
    grid-template-columns: 7.4rem 1fr;
}

.area > dt,
.area > dd {
    padding: 1rem 0;
}

.area > dt {
    font-weight: bold;
}

.area + .area {
    border-top: 0.1rem dotted transparent;
    border-image: repeating-linear-gradient(
            to right,
            var(--color-border) 0,
            var(--color-border) 0.1rem,
            transparent 0.1rem,
            transparent 0.4rem
        )
        1;
}

.areaPrefList {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.areaPrefList > li a,
.areaPrefList > li a:not([href]):not([class]),
.areaPrefList > li a:not([href]):not([class]):hover {
    text-decoration: underline;
    color: var(--color-primary);
    cursor: pointer;
}

.lockerPrefList {
    margin-top: 4rem;
}

.lockerPrefList > li {
    border-radius: 0.6rem;
    background-color: var(--color-card-bg);
}

.lockerPrefList > li + li {
    margin-top: 1rem;
}

.lockerPrefName {
    display: grid;
    gap: 0 0.5rem;
    grid-template-columns: 1fr 2rem;
    padding: 1.5rem 2rem;
    font-weight: bold;
    cursor: pointer;
}

.lockerList {
    display: none;
    width: 31.5rem;
    margin: 0 auto;
    border-top: solid 1px var(--color-border);
}

.lockerList > li {
    width: 29.5rem;
    margin: 0 auto;
    padding: 1.5rem 0;
}

.lockerList > li + li {
    border-top: solid 1px var(--color-border);
}

/* PC */
@media only screen and (min-width: 751px) {
    .area_wrap {
        margin-top: 4rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.6rem;
    }

    .area {
        grid-template-columns: 24rem 1fr;
    }

    .lockerPrefList {
        margin-top: 8rem;
        font-size: 1.6rem;
    }

    .lockerPrefName {
        gap: 0 1rem;
        padding: 1.8rem 2rem;
    }

    .lockerList {
        width: 98rem;
    }

    .lockerList > li {
        width: 96rem;
    }

    .areaPrefList > li a:hover,
    .lockerPrefName:hover {
        opacity: 0.6;
    }
}