@charset "UTF-8";

.main-container {
    --thema-color: #98a86d;
    overflow: hidden;
}
/* --------------------------------------------------------------------------
HERO
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .mc-co-hero {
        background-image: url("/en/assets_v2/img/recipes/top/bg_hero.png");
    }
}
@media all and (max-width: 767px) {
    .mc-co-hero {
        background-image: url("/en/assets_v2/img/recipes/top/bg_hero_sp.png");
    }
}

/* --------------------------------------------------------------------------
RECIPES-TOP
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .recipes-top-section {
    }
    .recipes-top-section__inner {
    }
    .recipes-top-section__body {
    }
    .recipes-list__container {
        margin-top: calc(36 / var(--font) * 1rem);
        position: relative;
    }
    .recipes-list-deco::before {
        content: "";
        display: block;
        position: absolute;
    }
    .recipes-list-deco:nth-child(1)::before {
        background: url("/en/assets_v2/img/recipes/common/deco_01.png") no-repeat center / contain;
        width: calc(204.5 / var(--font) * 1rem);
        padding-top: calc(265 / var(--font) * 1rem);
        top: 0;
        left: 0;
        margin-top: calc(-196 / var(--font) * 1rem);
        margin-left: calc(1120 / var(--font) * 1rem);
    }
    .recipes-list-deco:nth-child(2)::before {
        background: url("/en/assets_v2/img/recipes/common/deco_02.png") no-repeat center / contain;
        width: calc(201 / var(--font) * 1rem);
        padding-top: calc(255 / var(--font) * 1rem);
        top: 0;
        right: 0;
        margin-top: calc(339 / var(--font) * 1rem);
        margin-right: calc(1138 / var(--font) * 1rem);
    }
    .recipes-list-deco:nth-child(3)::before {
        background: url("/en/assets_v2/img/recipes/common/deco_03.png") no-repeat center / contain;
        width: calc(205.5 / var(--font) * 1rem);
        padding-top: calc(274 / var(--font) * 1rem);
        bottom: 0;
        left: 0;
        margin-bottom: calc(-203 / var(--font) * 1rem);
        margin-left: calc(1100 / var(--font) * 1rem);
    }
    .recipes-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(106 / var(--font) * 1rem) calc(30 / var(--font) * 1rem);
    }
    .recipes-list-item {
        width: calc((100% - (30 / var(--font) * 1rem) * 3) / 4);
    }
    .recipes-card {
    }
    .recipes-card__inner {
    }
    .recipes-card-img {
        border-radius: calc(20 / var(--font) * 1rem);
        overflow: hidden;
    }
    .recipes-card-img img {
        transition: var(--transition-all);
    }
    .recipes-card:hover .recipes-card-img img {
        transform: scale(1.1);
    }
    .recipes-card-read {
    }
    .recipes-card-read__inner {
    }
    .recipes-card-read-heading {
        margin-top: calc(8 / var(--font) * 1rem);
    }
    .recipes-card-read-heading__inner {
        display: flex;
        align-items: start;
    }
    .recipes-card-read-heading__label {
        font-family: var(--f-zen-kaku);
        font-size: calc(22 / var(--font) * 1rem);
        font-weight: bold;
        line-height: calc(35.2 / 22);
    }
    .recipes-card-read-heading__ico {
        display: block;
        width: calc(24 / var(--font) * 1rem);
        aspect-ratio: 1 / 1;
        background: var(--thema-color);
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: calc(6 / var(--font) * 1rem);
        margin-left: calc(12 / var(--font) * 1rem);
        position: relative;
    }
    .recipes-card-read-heading__ico::before {
        content: "";
        display: block;
        -webkit-mask: url("/assets_v2/img/common/btn_ico_arrow.svg") no-repeat center / contain;
        mask: url("/assets_v2/img/common/btn_ico_arrow.svg") no-repeat center / contain;
        background: var(--c-white);
        width: calc(9 / var(--font) * 1rem);
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
    }
    .recipes-card-read-rext {
        margin-top: calc(6 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .recipes-top-section {
    }
    .recipes-top-section__inner {
    }
    .recipes-top-section__body {
        position: relative;
    }
    .recipes-top-section__body::before {
        content: "";
        display: block;
        background: url("/en/assets_v2/img/recipes/common/deco_02.png") no-repeat center / contain;
        width: calc(92.5 / var(--font) * 1rem);
        padding-top: calc(106.5 / var(--font) * 1rem);
        position: absolute;
        top: 0;
        left: 0;
        margin-top: calc(-30 / var(--font) * 1rem);
        margin-left: calc(306.5 / var(--font) * 1rem);
    }
    .recipes-top-section__body::after {
        content: "";
        display: block;
        background: url("/en/assets_v2/img/recipes/common/deco_03.png") no-repeat center / contain;
        width: calc(103 / var(--font) * 1rem);
        padding-top: calc(137 / var(--font) * 1rem);
        position: absolute;
        bottom: 0;
        left: 0;
        margin-bottom: calc(-6 / var(--font) * 1rem);
        margin-left: calc(273 / var(--font) * 1rem);
    }
    .recipes-list__container {
        margin-top: calc(24 / var(--font) * 1rem);
        position: relative;
    }
    .recipes-list-deco::before {
        content: "";
        display: block;
        position: absolute;
    }
    .recipes-list-deco:nth-child(1)::before {
    }
    .recipes-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(32 / var(--font) * 1rem) calc(15 / var(--font) * 1rem);
    }
    .recipes-list-item {
        width: calc((100% - (15 / var(--font) * 1rem)) / 2);
    }
    .recipes-card {
    }
    .recipes-card__inner {
    }
    .recipes-card-img {
        border-radius: calc(10 / var(--font) * 1rem);
        overflow: hidden;
    }
    .recipes-card-read {
    }
    .recipes-card-read__inner {
    }
    .recipes-card-read-heading {
        margin-top: calc(4 / var(--font) * 1rem);
    }
    .recipes-card-read-heading__inner {
        display: flex;
        align-items: start;
    }
    .recipes-card-read-heading__label {
        font-family: var(--f-zen-kaku);
        font-size: calc(18 / var(--font) * 1rem);
        font-weight: bold;
        line-height: calc(35.2 / 22);
    }
    .recipes-card-read-heading__ico {
        display: block;
        width: calc(20 / var(--font) * 1rem);
        aspect-ratio: 1 / 1;
        background: var(--thema-color);
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: calc(6 / var(--font) * 1rem);
        margin-left: calc(6 / var(--font) * 1rem);
        position: relative;
    }
    .recipes-card-read-heading__ico::before {
        content: "";
        display: block;
        -webkit-mask: url("/assets_v2/img/common/btn_ico_arrow.svg") no-repeat center / contain;
        mask: url("/assets_v2/img/common/btn_ico_arrow.svg") no-repeat center / contain;
        background: var(--c-white);
        width: calc(8 / var(--font) * 1rem);
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
    }
    .recipes-card-read-rext {
        margin-top: calc(6 / var(--font) * 1rem);
    }
}