.p-sakudo-selector {
    margin-inline: auto;
    max-inline-size: fit-content;
    display: block;
}

.p-sakudo-status__list {

}

.p-sakudo-status__row {
    padding-block: 2lh;
    display: grid;
    row-gap: 1.25lh;
}

.p-sakudo-status-header {
    display: grid;
    @media screen and ( min-width: 768px ) {
        align-items: center;
        grid-template-columns: min(32vw, 320px) 1fr;
        column-gap: min(2.4vw, 24px);
    }

    .p-sakudo-status-header__image {
        border-radius: 8px;
        overflow: hidden;
        @media screen and ( max-width: 768px ) {
            margin-block-end: .5lh;
        }
    }

    .p-sakudo-status-header__data {
        display: grid;
        row-gap: .5lh;
    }

    .p-sakudo-status-resort__name {
        font-size: min(calc( .266666vw * 20), 2em);
        font-weight: bold;
    }

    .p-sakudo-status-condition {
        display: grid;
        grid-auto-flow: column;
        column-gap: min(1.6vw, 16px);
        justify-content: flex-start;

        dl {
            display: grid;
            grid-auto-flow: column;
            column-gap: min(1.6vw, 16px);
            align-items: center;
            justify-content: flex-start;

            dt {
                background: #2C4197;
                padding: .25lh .5em;
                border-radius: .5lh;
                line-height: 1;
                color: #fff;
                font-weight: normal;
            }

            dd {
                font-size: 1.32em;
                font-weight: bold;
            }
        }
    }
}

.p-sakudo-link__list {
    display: flex;
    flex-wrap: wrap;
    gap: min(2.4vw, 16px);


    .p-sakudo-link {
        border: 1px solid currentColor;
        color: #404040;
        line-height: 1.32;
        border-radius: 4px;
        padding: .16lh 1em;
        
        &:is(a) {
            text-decoration: none;
        }

        &.--blank {
            display: grid;
            grid-template-columns: 1fr min(4.8vw, 20px);
            column-gap: .32em;
            &::after {
                content: '';
                aspect-ratio: 1;
                background: url(../img/ic_blank.svg) no-repeat center center / contain;
            }
        }

        &.--navigator {
            display: grid;
            grid-template-columns: 1fr min(4.8vw, 20px);
            column-gap: .32em;
            &::after {
                content: '';
                aspect-ratio: 1;
                background: url(../img/spot-navigator.svg) no-repeat center center / contain;
            }
        }
    }
}
.p-sakudo-status-heading {
    font-size: 1.5em;
    font-weight: bold;
    display: grid;
    grid-template-columns: min(5.6vw, 16px) 1fr;
    column-gap: .32em;
    align-items: center;
    margin-block-end: .32lh;

    &::before {
        content: '';
        aspect-ratio: 1;
        background: #2C4197;
        border-radius: 50%;
    }
}

.p-sakudo-status-table {
    inline-size: 100%;
    border-block-start: 1px solid #aaa;
    border-collapse: collapse;
    min-inline-size: 1024px;

    thead {
        tr {
            th {
                border-block-start: 2px solid currentColor;
                border-block-end: 1px solid #aaa;
                line-height: 1.32;
                padding: .32lh 1em;
                color: #2C4197;
                white-space: nowrap;


                &:last-child {
                    inline-size: 8em;
                }
            }
        }
    }

    tbody {
        :is(th, td) {
            padding: .72lh 1em;
            line-height: 1.32;
            border-block-end: 1px solid #aaa;

            strong {
                font-size: 1.16em;
                font-weight: bold;
                display: block;
                margin-block-end: .48lh;
            }
        }
    }

    .course-memo {
        display: grid;
        grid-template-columns: min(4.8vw, 20px) 1fr;
        column-gap: min(2.4vw, 8px);
        color: #666;
        font-size: .9em;

        &::before {
            content: '';
            display: block;
            aspect-ratio: 1;
            background: url(../img/ic_fukidashi.svg) no-repeat center center / contain;
        }
    }

    .courseId {
        font-size: .8em;
        font-weight: bold;
        display: grid inline;
        color: #808080;
        border: 1px solid currentColor;
        border-radius: 4px;
        /* background: #ddd; */
        padding: .08lh 1em;
        line-height: 1;
        margin-block-end: .56lh;
    }

    .level {
        white-space: nowrap;
        background: #009245;
        color: #fff;
        border-radius: 4px;
        padding: .24lh .5em;
        font-size: .8em;
        font-weight: bold;

        &.lv-2 {
            background: #c1272d;
        }
        &.lv-3 {
            background: #000;
        }

    }

    .status {
        border: 1px solid currentColor;
        color: #808080;
        font-size: .8em;
        font-weight: bold;
        padding: .24lh .5em;
        border-radius: 4px;
        background: #fafafa;
        white-space: nowrap;

        &.--status-1 {
            color: #fff;
            background: #4cb1b4;
            border: 0;
        }

        &.--status-2 {
            color: #fff;
            background: orange;
            border: 0;

        }
    }

    .name-link {
        display: grid;
        grid-template-columns: auto min(4.8vw, 24px);
        justify-content: flex-start;
        column-gap: .5em;
        &::after {
            content: '';
            display: block;
            aspect-ratio: 1;
            background: url(../img/spot-navigator.svg) no-repeat center center / contain;
        }

    }
}