@charset "UTF-8";
/* --------------------------------------------------------------------------
CHOLESTEROL
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .mc-link-card__inner {
        padding-left: calc(16 / var(--font) * 1rem);
        padding-right: calc(48 / var(--font) * 1rem);
    }
    .mc-link-card__inner::before {
        margin-right: calc(16 / var(--font) * 1rem);
    }
    .mc-link-list-item {
        width: calc(100% / 4);
    }
}
@media all and (max-width: 767px) {
}

/* --------------------------------------------------------------------------
CHOLESTEROL-01
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .cholesterol-01-01-img {
        max-width: calc(200 / var(--font) * 1rem);
        margin: calc(32 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-01-04-img {
        max-width: calc(720 / var(--font) * 1rem);
        margin: calc(32 / var(--font) * 1rem) auto 0;
    }
}
@media all and (max-width: 767px) {
    .cholesterol-01-01-img {
        max-width: calc(226 / var(--font) * 1rem);
        margin: calc(32 / var(--font) * 1rem) auto 0;
    }
    .mc-column-list-item .mc-column-list {
        display: flex;
        gap: calc(20 / var(--font) * 1rem);
        margin-top: calc(30 / var(--font) * 1rem);
    }
    .mc-column-list-item .mc-column-list-item + .mc-column-list-item {
        margin-top: 0;
    }
    .cholesterol-01-04-img {
        margin: calc(32 / var(--font) * 1rem) auto 0;
    }
}

/* --------------------------------------------------------------------------
CHOLESTEROL-02
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .cholesterol-02-01-img {
        width: 100%;
        max-width: calc(860 / var(--font) * 1rem);
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-02-movie {
        width: 100%;
        max-width: calc(720 / var(--font) * 1rem);
        aspect-ratio: 1920 / 1080;
        margin: calc(64 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-02-movie iframe {
        width: 100%;
        height: 100%;
    }
}
@media all and (max-width: 767px) {
    .cholesterol-02-01-img {
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-02-movie {
        width: 100%;
        max-width: calc(345 / var(--font) * 1rem);
        aspect-ratio: 1920 / 1080;
        margin: calc(64 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-02-movie iframe {
        width: 100%;
        height: 100%;
    }
}

/* --------------------------------------------------------------------------
CHOLESTEROL-03
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .cholesterol-03-01-img {
        width: 100%;
        max-width: calc(828 / var(--font) * 1rem);
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-03-02-img {
        width: 100%;
        max-width: calc(645 / var(--font) * 1rem);
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-03-02-btn {
        width: 100%;
        max-width: calc(700 / var(--font) * 1rem);
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-products-list {
        display: flex;
        align-items: start;
        gap: calc(40 / var(--font) * 1rem);
    }
    .cholesterol-products-read {
        width: 100%;
        max-width: calc(540 / var(--font) * 1rem);
    }
    .cholesterol-products-img {
        width: 100%;
        max-width: calc(540 / var(--font) * 1rem);
    }
    .cholesterol-products-img .lineup-list {
        flex-wrap: nowrap;
    }
    .cholesterol-products-img .lineup-list-item {
        width: 100%;
        max-width: calc(254 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .cholesterol-03-01-img {
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-03-02-img {
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-03-02-btn {
        margin: calc(36 / var(--font) * 1rem) auto 0;
    }
    .cholesterol-products-list {
    }
    .cholesterol-products-read {
    }
    .cholesterol-products-img {
        margin-top: calc(36 / var(--font) * 1rem);
    }
}