@charset "UTF-8";
.main-container {
    --lp-c-main: var(--lp-c-accent);
    --lp-c-main-sub: var(--lp-c-accent-sub);
}
/* --------------------------------------------------------------------------
SECTION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .c-hero-img {
        background-image: url("../img/miso-soup/hero_img.png");
    }
    .l-section__inner {
        max-width: calc(1096 / var(--lp-font) * 1em);
        padding: 0 calc(36 / var(--lp-font) * 1em);
    }
    .c-hero {
        margin-bottom: calc(24 / var(--lp-font) * 1em);
    }
}
@media all and (max-width: 767px) {
    .c-hero-img {
        background-image: url("../img/miso-soup/hero_img_sp.png");
    }
    .l-section__inner {
        max-width: calc(1096 / 750 * 100vw);
        padding: 0 calc(36 / 750 * 100vw);
    }
    .c-hero {
        margin-bottom: calc(40 / 750 * 100vw);
    }
}

/* --------------------------------------------------------------------------
SEASON
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .season-section {
        position: relative;
    }
    .season-section__inner {
        max-width: 100%;
    }
    .season-section__body {
    }
    .season-list {
        margin-bottom: calc(104 / var(--lp-font) * 1em);
    }
    .season-list-item {
    }
    .season-list-item--spring {
    }
    .season-list-item--summer {
    }
    .season-list-item--autumn {
    }
    .season-list-item--winter {
    }
    .season-card {
        display: block;
        max-width: calc(1178 / var(--lp-font) * 1em);
        width: 100%;
        margin: auto;
    }
    .season-card__inner {
        position: relative;
    }
    .season-card__body {
        padding: calc(96 / var(--lp-font) * 1em) min(77px, calc(77 / 1366 * 100vw));
        position: relative;
        z-index: 1;
    }
    .season-card-link {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: calc(20 / var(--lp-font) * 1em);
    }
    .season-card-img {
        position: relative;
        z-index: 0;
    }
    .season-card-img::before {
        content: "";
        display: block;
        width: calc(108 / var(--lp-font) * 1em);
        padding-top: calc(108 / var(--lp-font) * 1em);
        aspect-ratio: 1 / 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        margin-top: calc(-32 / var(--lp-font) * 1em);
        margin-left: calc(-32 / var(--lp-font) * 1em);
    }
    .season-list-item--spring .season-card-img::before {
        background-image: url("../img/miso-soup/ico_spring.png");
    }
    .season-list-item--summer .season-card-img::before {
        background-image: url("../img/miso-soup/ico_summer.png");
    }
    .season-list-item--autumn .season-card-img::before {
        background-image: url("../img/miso-soup/ico_autumn.png");
    }
    .season-list-item--winter .season-card-img::before {
        background-image: url("../img/miso-soup/ico_winter.png");
    }
    .season-card-img__inner {
        width: 100%;
        max-width: calc(560 / var(--lp-font) * 1em);
        overflow: hidden;
    }
    .season-card-read {
        width: 100%;
        max-width: calc(411 / var(--lp-font) * 1em);
        margin-top: calc(64 / var(--lp-font) * 1em);
    }
    .season-card-read-heading {
        margin-bottom: calc(36 / var(--lp-font) * 1em);
    }
    .season-card-read-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(28 / var(--lp-font) * 1em);
        font-weight: bold;
        line-height: 1.4;
    }
    .season-card-read-text {
    }
    .season-card-read-text .c-txt {
        line-height: 2;
        font-feature-settings: "palt";
    }
    .season-card-read-btn {
        width: calc(267 / var(--lp-font) * 1em);
        margin-top: calc(24 / var(--lp-font) * 1em);
    }
    /* 偶数のコンテンツ */
    .season-list-item:nth-child(2n) .season-card__inner {
        margin-left: -50vw;
        padding-left: 50vw;
    }
    .season-list-item:nth-child(4n) .season-card__inner {
        margin-left: 0;
        padding-left: 0;
        margin-right: -50vw;
        padding-right: 50vw;
    }
    .season-list-item:nth-child(even) .season-card-bg {
        display: block;
        width: 100%;
        height: 100%;
        background: var(--lp-sec-bg);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        mix-blend-mode: multiply;
    }
    .season-list-item:nth-child(even) .season-card-link {
        flex-direction: row-reverse;
    }
    .season-list-item:nth-child(even) .season-card-img::before {
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: calc(-32 / var(--lp-font) * 1em);
    }
    /* hover時 */
    .season-card-link:hover {
    }
    .season-card-img img {
        transition: var(--lp-transition);
    }
    .season-card-link:hover .season-card-img img {
        transform: var(--hover-animation-A);
    }
    .season-card-link:hover .c-btn {
        --btn-bg: var(--lp-c-white);
        --btn-color: var(--lp-c-black);
    }
}
@media all and (max-width: 767px) {
    .season-section {
        position: relative;
    }
    .season-section__inner {
        max-width: 100%;
    }
    .season-section__body {
    }
    .season-list {
        margin-bottom: calc(80 / 750 * 100vw);
    }
    .season-list-item {
    }
    .season-list-item--spring {
    }
    .season-list-item--summer {
    }
    .season-list-item--autumn {
    }
    .season-list-item--winter {
    }
    .season-card {
        display: block;
        margin: auto;
    }
    .season-card__inner {
        position: relative;
    }
    .season-card__body {
        padding: calc(120 / 750 * 100vw) 0;
        position: relative;
        z-index: 1;
    }
    .season-card-link {
    }
    .season-card-img {
        position: relative;
        z-index: 0;
    }
    .season-card-img::before {
        content: "";
        display: block;
        width: calc(150 / 750 * 100vw);
        padding-top: calc(150 / 750 * 100vw);
        aspect-ratio: 1 / 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        margin-top: calc(-44 / 750 * 100vw);
        margin-left: calc(-23 / 750 * 100vw);
    }
    .season-list-item--spring .season-card-img::before {
        background-image: url("../img/miso-soup/ico_spring.png");
    }
    .season-list-item--summer .season-card-img::before {
        background-image: url("../img/miso-soup/ico_summer.png");
    }
    .season-list-item--autumn .season-card-img::before {
        background-image: url("../img/miso-soup/ico_autumn.png");
    }
    .season-list-item--winter .season-card-img::before {
        background-image: url("../img/miso-soup/ico_winter.png");
    }
    .season-card-img__inner {
        width: 100%;
        overflow: hidden;
    }
    .season-card-read {
        margin-top: calc(46 / 750 * 100vw);
    }
    .season-card-read-heading {
        margin-bottom: calc(32 / 750 * 100vw);
    }
    .season-card-read-heading__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(44 / 750 * 100vw);
        font-weight: bold;
        line-height: 1.4;
    }
    .season-card-read-text {
    }
    .season-card-read-text .c-txt {
        line-height: 2;
        font-feature-settings: normal;
    }
    .season-card-read-btn {
        margin-top: calc(56 / 750 * 100vw);
    }
    /* 偶数のコンテンツ */
    .season-list-item:nth-child(2n) .season-card__inner {
    }
    .season-list-item:nth-child(4n) .season-card__inner {
    }
    .season-list-item:nth-child(even) .season-card-bg {
        display: block;
        width: 100vw;
        height: 100%;
        background: var(--lp-sec-bg);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        mix-blend-mode: multiply;
    }
    .season-list-item:nth-child(even) .season-card-link {
        flex-direction: row-reverse;
    }
    .season-list-item:nth-child(even) .season-card-img::before {
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: calc(-23 / 750 * 100vw);
    }
}

/* --------------------------------------------------------------------------
RECIPE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .recipe-section {
        position: relative;
    }
    .recipe-section-bg {
        display: block;
        background: rgba(205, 157, 74, 0.8);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        mix-blend-mode: multiply;
    }
    .recipe-section__inner {
        max-width: calc(1144 / var(--lp-font) * 1em);
        padding: 0 calc(20 / var(--lp-font) * 1em);
    }
    .recipe-section__body {
        padding-top: calc(72 / var(--lp-font) * 1em);
        padding-bottom: calc(48 / var(--lp-font) * 1em);
    }
    .recipe-heading {
        margin-bottom: calc(36 / var(--lp-font) * 1em);
    }
    .recipe-heading__inner {
        text-align: center;
        position: relative;
        padding-bottom: calc(12 / var(--lp-font) * 1em);
    }
    .recipe-heading__inner::before {
        content: "";
        display: block;
        mask: url("../img/common/ico_deco.svg") no-repeat center / contain;
        -webkit-mask: url("../img/common/ico_deco.svg") no-repeat center / contain;
        background: var(--lp-c-white);
        width: calc(37 / var(--lp-font) * 1em);
        padding-top: calc(6 / var(--lp-font) * 1em);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .recipe-heading__label {
        color: var(--lp-c-white);
        font-family: var(--lp-f-mincho);
        font-size: calc(32 / var(--lp-font) * 1em);
        font-weight: 600;
        font-feature-settings: "palt";
        line-height: 1.5;
    }
    .recipe-list__outer {
        position: relative;
    }
    .recipe-list__container {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw + (110 / 1440 * 100vw));
        margin-left: calc(-55 / 1440 * 100vw);
    }
    .recipe-list-item {
        transition: var(--lp-transition);
    }
    .recipe-list-item.swiper-slide-active.swiper-slide {
        width: calc(450 / 1440 * 100vw) !important;
    }
    .recipe-list-item::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(70 / 1440 * 100vw);
        transition: var(--lp-transition);
    }
    .recipe-list-item.swiper-slide-active.swiper-slide::before {
        padding-top: 0;
    }
    .recipe-card {
    }
    .recipe-card__in {
    }
    .recipe-card__body {
    }
    .recipe-card-img__container {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .recipe-card-img {
        overflow: hidden;
        position: relative;
    }
    .recipe-card-img img {
        transition: var(--lp-transition);
    }
    .recipe-card__in:hover .recipe-card-img img {
        transform: scale(1.1);
    }
    .recipe-card-img-ico {
    }
    .recipe-card-read {
    }
    .recipe-card-read-txt {
        margin-top: calc(17 / var(--lp-font) * 1em);
    }
    .recipe-card-read-txt__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(18 / var(--lp-font) * 1em);
        font-weight: 500;
    }
    .recipe-swiper-btn__container {
        display: flex;
        gap: calc(12 / 1366 * 100vw);
        position: absolute;
        right: 0;
        top: 0;
        height: calc(50 / 1366 * 100vw);
    }
    .recipe-swiper-btn-prev {
    }
    .recipe-swiper-btn-next {
    }
    .recipe-swiper-btn-prev,
    .recipe-swiper-btn-next {
        width: calc(50 / 1366 * 100vw);
        height: 100%;
        aspect-ratio: 1 / 1;
        background: var(--lp-c-black);
        border: solid 1px var(--lp-c-black);
        border-radius: 50%;
        position: static;
        margin: 0;
        transition: var(--lp-transition);
    }
    .recipe-swiper-btn-prev::after,
    .recipe-swiper-btn-next::after {
        content: "";
        display: block;
        -webkit-mask: url("../img/miso-soup/slider_ico_arrow.svg") no-repeat center / contain;
        mask: url("../img/miso-soup/slider_ico_arrow.svg") no-repeat center / contain;
        background: var(--lp-c-white);
        width: calc(13 / 1366 * 100vw);
        height: calc(13 / 1366 * 100vw);
        transition: var(--lp-transition);
    }
    .recipe-swiper-btn-prev::after {
        transform: rotate(180deg);
    }
    .recipe-swiper-btn-prev:hover,
    .recipe-swiper-btn-next:hover {
        background: var(--lp-c-white);
    }
    .recipe-swiper-btn-prev:hover::after,
    .recipe-swiper-btn-next:hover::after {
        background: var(--lp-c-black);
    }
    a.recipe-card__in img {
        transition: var(--lp-transition);
    }
    /* お気に入り */
    .recipe-card .recipe-card-img-ico {
        background: var(--lp-c-white);
        width: calc(37 / 1366 * 100vw);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: calc(10 / 1366 * 100vw);
        margin-right: calc(8 / 1366 * 100vw);
        transition: all .3s ease;
    }
    .recipe-card .recipe-card-img-ico:hover {
        opacity: 0.7;
    }
    .recipe-card-img-ico::before {
        content: "";
        display: block;
        width: calc(19 / 1366 * 100vw);
        padding-top: calc(18 / 1366 * 100vw);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: calc(2 / 1366 * 100vw);
        margin-left: calc(0.5 / 1366 * 100vw);
        transform: translate(-50% , -50%);
    }
    .i-fav[data-fav="off"].recipe-card-img-ico::before {
        background: url("../img/miso-soup/heart-line.svg") no-repeat center / contain;
    }
    .i-fav[data-fav="on"].recipe-card-img-ico::before {
        background: url("../img/miso-soup/heart.svg") no-repeat center / contain;
    }
    /* newアイコン */
    .recipe-list-item--new .recipe-card-img::before {
        content: "";
        position: absolute;
        width: calc(76 / 1366 * 100vw);
        height: calc(38 / 1366 * 100vw);
        top: 0;
        left: 0;
        background: url("../img/miso-soup/new.svg") no-repeat top left / contain;
        z-index: 1;
    }
}
@media all and (max-width: 767px) {
    .recipe-section {
        position: relative;
    }
    .recipe-section-bg {
        display: block;
        background: rgba(205, 157, 74, 0.8);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        mix-blend-mode: multiply;
    }
    .recipe-section__inner {
        max-width: calc(1144 / 750 * 100vw);
        padding: 0 calc(20 / 750 * 100vw);
    }
    .recipe-section__body {
        padding-top: calc(72 / 750 * 100vw);
        padding-bottom: calc(64 / 750 * 100vw);
    }
    .recipe-heading {
        margin-bottom: calc(33 / 750 * 100vw);
    }
    .recipe-heading__inner {
        text-align: center;
        position: relative;
        padding-bottom: calc(24 / 750 * 100vw);
    }
    .recipe-heading__inner::before {
        content: "";
        display: block;
        mask: url("../img/common/ico_deco.svg") no-repeat center / contain;
        -webkit-mask: url("../img/common/ico_deco.svg") no-repeat center / contain;
        background: var(--lp-c-white);
        width: calc(40 / 750 * 100vw);
        padding-top: calc(8 / 750 * 100vw);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .recipe-heading__label {
        color: var(--lp-c-white);
        font-family: var(--lp-f-mincho);
        font-size: calc(40 / 750 * 100vw);
        font-weight: 600;
        font-feature-settings: "palt";
        line-height: 1.5;
    }
    .recipe-list__outer {
        position: relative;
    }
    .recipe-list__container {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw + (60 / 750 * 100vw));
        margin-left: calc(-30 / 750 * 100vw);
    }
    .recipe-list-item {
        transition: var(--lp-transition);
    }
    .recipe-list-item.swiper-slide-active.swiper-slide {
        width: calc(400 / 750 * 100vw) !important;
    }
    .recipe-list-item::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(53 / 750 * 100vw);
        transition: var(--lp-transition);
    }
    .recipe-list-item.swiper-slide-active.swiper-slide::before {
        padding-top: 0;
    }
    .recipe-card {
    }
    .recipe-card__in {
    }
    .recipe-card__body {
    }
    .recipe-card-img__container {
        position: relative;
    }
    .recipe-card-img-ico {
    }
    .recipe-card-read {
    }
    .recipe-card-read-txt {
        margin-top: calc(12 / 750 * 100vw);
    }
    .recipe-card-read-txt__label {
        font-family: var(--lp-f-mincho);
        font-size: calc(28 / 750 * 100vw);
        font-weight: 500;
        line-height: 1.4;
    }
    .recipe-swiper-btn__container {
        display: none;
    }
    a.recipe-card__in img {
        transition: var(--lp-transition);
    }
    /* お気に入り */
    .recipe-card .recipe-card-img-ico {
        background: var(--lp-c-white);
        width: calc(42 / 750 * 100vw);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: calc(8 / 750 * 100vw);
        margin-right: calc(8 / 750 * 100vw);
        transition: all .3s ease;
        z-index: 1;
    }
    .recipe-card-img-ico::before {
        content: "";
        display: block;
        width: calc(20 / 750 * 100vw);
        padding-top: calc(18 / 750 * 100vw);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: calc(2 / 750 * 100vw);
        margin-left: calc(0.5 / 750 * 100vw);
        transform: translate(-50% , -50%);
    }
    .i-fav[data-fav="off"].recipe-card-img-ico::before {
        background: url("../img/miso-soup/heart-line.svg") no-repeat center / contain;
    }
    .i-fav[data-fav="on"].recipe-card-img-ico::before {
        background: url("../img/miso-soup/heart.svg") no-repeat center / contain;
    }
    /* newアイコン */
    .recipe-list-item--new .recipe-card-img::before {
        content: "";
        position: absolute;
        width: calc(84 / 750 * 100vw);
        height: calc(42 / 750 * 100vw);
        top: 0;
        left: 0;
        background: url("../img/miso-soup/new.svg") no-repeat top left / contain;
        z-index: 1;
    }
}