@charset "UTF-8";
@media all and (min-width: 768px), print {
    .page-hero__header-title {
        padding-top: calc(60 / var(--txt-w) * 100%);
    }
    .page-hero__header-title__label::before {
        width: calc(32 / 266 * 100%);
        padding-top: calc(55 / 266 * 100%);
    }
    .l-page-sec__in {
        max-width: calc(1320 / var(--font-size) * 1em);
        --sec-width: 1280;
        --sec-outer-w: 1320;
    }
    .link-btn-link {
        max-width: calc(1064 / var(--font-size) * 1em);
        margin: 0 auto;
        padding: 0 calc(20 / var(--font-size) * 1em);
    }
}
@media all and (max-width: 767px) {
    .link-block .l-page-block__in {
        padding: 0 calc(25 / 750 * 100vw);
    }
    .page-hero__header-title__label::before {
        width: calc(43 / 750 * 100vw);
        padding-top: calc(76 / 750 * 100vw);
    }
}


@media all and (min-width: 768px), print {
    .intro-sec {
        overflow: hidden;
    }
    .intro-sec__in {
        max-width: calc(928 / var(--font-size) * 1em);
        --btn-list-w: 888;
    }
    .intro-sec__body {
        padding-bottom: calc(31 / 1024 * 100%);
    }
    .intro-content {
    }
    .intro-content-read__container {
        text-align: center;
    }
    .intro-content-read {
        position: relative;
        display: inline-block;
        --read-w: 540;
    }
    .intro-content-read::before,
    .intro-content-read::after {
        content: "";
        display: block;
        position: absolute;
    }
    .intro-content-read::before {
        background: url("../img/page/intro-sec-deco-01.png") no-repeat center / contain;
        width: calc(76 / var(--read-w) * 100%);
        padding-top: calc(100 / var(--read-w) * 100%);
        top: 0;
        left: 0;
        margin-left: calc(-121 / var(--read-w) * 100%);
    }
    .intro-content-read::after {
        background: url("../img/page/intro-sec-deco-02.png") no-repeat center / contain;
        width: calc(54 / var(--read-w) * 100%);
        padding-top: calc(72 / var(--read-w) * 100%);
        top: 0;
        left: 0;
        margin-top: calc(50 / var(--read-w) * 100%);
        margin-left: calc(625 / var(--read-w) * 100%);
    }
    .intro-txt {
    }
    .intro-note {
        margin-top: calc(18 / var(--font-size) * 1em);
    }
    .anchor-btn-list__container {
        margin: calc(74 / var(--btn-list-w) * 100%) auto 0;
    }
    .anchor-btn-list {
        display: flex;
        justify-content: center;
        gap: calc(24 / var(--btn-list-w) * 100%);
    }
    .anchor-btn-list-item {
        width: calc((100% - (48 / var(--btn-list-w) * 1rem)) / 3);
    }
    .anchor-btn-list-item--middle {
        --btn-color: var(--green-color-500);
    }
    .anchor-btn-list-item--late {
        --btn-color: var(--purple-color-500);
    }
    .anchor-btn-list-item--completion {
        --btn-color: var(--pink-color-500);
    }
    .anchor-btn {
        --btn-size: 280;
        display: block;
        position: relative;
        padding-bottom: calc(13 / var(--btn-size) * 100%);
        z-index: 1;
        transition: all 0.3s;
    }
    .anchor-btn:hover {
        transform: scale(0.9);
    }
    .anchor-btn__in {
        background: var(--btn-color);
        border-radius: calc(16 / var(--font-size) * 1em);
        position: relative;
    }
    .anchor-btn__in::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(104 / var(--btn-size) * 100%);
        background: url("../img/recipe/anchor-btn-deco.png") no-repeat center / contain;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .anchor-btn::before {
        content: "";
        display: block;
        width: calc(70 / var(--font-size) * 1em);
        padding-top: calc(70 / var(--font-size) * 1em);
        aspect-ratio: 1 / 1;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        border-radius: 50%;
        background: var(--btn-color);
        z-index: -1;
    }
    .anchor-btn__body {
        display: flex;
        justify-content: center;
        align-items: center;
        --btn-size-body: 260;
    }
    .anchor-btn-list-item--middle .anchor-btn__body {
        padding: calc(19.8 / var(--btn-size-body) * 100%) calc(10 / var(--btn-size-body) * 100%);
    }
    .anchor-btn-list-item--late .anchor-btn__body {
        padding: calc(18.3 / var(--btn-size-body) * 100%) calc(10 / var(--btn-size-body) * 100%);
    }
    .anchor-btn-list-item--completion .anchor-btn__body {
        padding: calc(16.7 / var(--btn-size-body) * 100%) calc(10 / var(--btn-size-body) * 100%);
    }
    .anchor-btn-ico {
        margin-right: calc(12 / var(--btn-size-body) * 100%);
    }
    .anchor-btn-list-item--middle .anchor-btn-ico {
        width: calc(61 / var(--btn-size-body) * 100%);
    }
    .anchor-btn-list-item--late .anchor-btn-ico {
        width: calc(39 / var(--btn-size-body) * 100%);
    }
    .anchor-btn-list-item--completion .anchor-btn-ico {
        width: calc(34 / var(--btn-size-body) * 100%);
    }
    .anchor-btn-read {
        
    }
    .anchor-btn-txt {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--white-color);
        font-size: calc(24 / var(--font-size) * 1em);
        font-weight: bold;
        letter-spacing: calc(80 / 1000 * 1em);
    }
    .anchor-btn-txt__label {
        line-height: 1;
    }
    .anchor-btn-txt__label--sub {
        margin-top: calc(6 / var(--font-size) * 1em);
        font-size: calc(14 / 24 * 1em);
        line-height: 1;
    }
}
@media all and (min-width: 768px) and (max-width: 928px) {
    .anchor-btn-txt {
        font-size: calc(24 / 928 * 100vw);
    }
}
@media all and (max-width: 767px) {
    .intro-sec {
        overflow: hidden;
    }
    .intro-sec__in {
        max-width: calc(928 / 750 * 100vw);
        --btn-list-w: 888;
    }
    .intro-sec__body {
        padding-bottom: calc(31 / 1024 * 100%);
    }
    .intro-content {
    }
    .intro-content-read__container {
        text-align: center;
    }
    .intro-content-read {
        position: relative;
        display: inline-block;
        --read-w: 540;
    }
    .intro-content-read .c-txt {
        letter-spacing: calc(80 / 1000 * 1em);
    }
    .intro-content-read::before,
    .intro-content-read::after {
        content: "";
        display: block;
        position: absolute;
    }
    .intro-content-read::before {
        background: url("../img/page/intro-sec-deco-01.png") no-repeat center / contain;
        width: calc(76 / 750 * 100vw);
        padding-top: calc(100 / 750 * 100vw);
        top: 0;
        left: 0;
        margin-left: calc(-52 / 750 * 100vw);
    }
    .intro-content-read::after {
        background: url("../img/page/intro-sec-deco-02.png") no-repeat center / contain;
        width: calc(74 / 750 * 100vw);
        padding-top: calc(97 / 750 * 100vw);
        top: 0;
        right: 0;
        margin-top: calc(111 / 750 * 100vw);
        margin-right: calc(-48 / 750 * 100vw);
    }
    .intro-txt {
    }
    .intro-note {
        margin-top: calc(18 / 750 * 100vw);
    }
    .intro-note .c-txt {
        letter-spacing: 0;
    }
    .anchor-btn-list__container {
        margin: calc(74 / 750 * 100vw) auto 0;
    }
    .anchor-btn-list {
        display: flex;
        justify-content: center;
        gap: calc(16 / 750 * 100vw);
    }
    .anchor-btn-list-item {
        width: calc((100% - (32 / 750 * 100vw)) / 3);
    }
    .anchor-btn-list-item--middle {
        --btn-color: var(--green-color-500);
    }
    .anchor-btn-list-item--late {
        --btn-color: var(--purple-color-500);
    }
    .anchor-btn-list-item--completion {
        --btn-color: var(--pink-color-500);
    }
    .anchor-btn {
        --btn-size: 280;
        display: block;
        position: relative;
        padding-bottom: calc(23 / 750 * 100vw);
        z-index: 1;
        transition: all 0.3s;
    }
    .anchor-btn:hover {
        transform: scale(0.9);
    }
    .anchor-btn__in {
        background: var(--btn-color);
        border-radius: calc(16 / 750 * 100vw);
        position: relative;
    }
    .anchor-btn__in::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(185 / 750 * 100vw);
        background: url("../img/recipe/anchor-btn-deco_sp.png") no-repeat center / contain;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .anchor-btn::before {
        content: "";
        display: block;
        width: calc(70 / 750 * 100vw);
        padding-top: calc(70 / 750 * 100vw);
        aspect-ratio: 1 / 1;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        border-radius: 50%;
        background: var(--btn-color);
        z-index: -1;
    }
    .anchor-btn__body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        --btn-size-body: 260;
        padding: calc(26.7 / 750 * 100vw) calc(10 / 750 * 100vw);
    }
    .anchor-btn-list-item--middle .anchor-btn__body {
        padding: calc(30.8 / 750 * 100vw) calc(10 / 750 * 100vw);
    }
    .anchor-btn-list-item--late .anchor-btn__body {
        padding: calc(29.3 / 750 * 100vw) calc(10 / 750 * 100vw);
    }
    .anchor-btn-list-item--completion .anchor-btn__body {
        padding: calc(26.7 / 750 * 100vw) calc(10 / 750 * 100vw);
    }
    .anchor-btn-ico {
    }
    .anchor-btn-list-item--middle .anchor-btn-ico {
        width: calc(61 / 750 * 100vw);
    }
    .anchor-btn-list-item--late .anchor-btn-ico {
        width: calc(39 / 750 * 100vw);
    }
    .anchor-btn-list-item--completion .anchor-btn-ico {
        width: calc(34 / 750 * 100vw);
    }
    .anchor-btn-read {
        
    }
    .anchor-btn-txt {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--white-color);
        font-size: calc(28 / 750 * 100vw);
        font-weight: bold;
        font-feature-settings: "palt";
        letter-spacing: calc(40 / 1000 * 1em);
        text-align: center;
    }
    .anchor-btn-txt__label {
        line-height: 1;
    }
    .anchor-btn-txt__label--sub {
        font-size: calc(20 / 28 * 1em);
        line-height: calc(24 / 20);
    }
}


@media all and (min-width: 768px), print {
    .recipe-sec {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    .recipe-sec::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url("../img/common/bg-deco.png") repeat-y top / calc(2560 / var(--font-size) * 1em);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    .recipe-sec__in {
    }
    .recipe-sec__body {
    }
    .recipe-sec__in {
    }
    .recipe-sec__body {
        padding-top: calc(31 / 1024 * 100%);
        padding-bottom: calc(160 / 1024 * 100%);
    }
    .recipe-box-read {
    }
    .recipe-box-read .c-txt {
        font-family: var(--font-zen-kaku);
    }
    .recipe-box-list__container {
        margin-top: calc(40 / var(--box-w) * 100%);
    }
    .recipe-box-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(40 / var(--font-size) * 1em) calc(16 / var(--box-w) * 100%);
    }
    .recipe-box-list-item {
        width: calc((100% - (32 / var(--box-w) * 100%)) / 3);
    }
    .season-content-heading__in {
        background: var(--content-color-500);
        border-radius: calc(40 / var(--font-size) * 1em) calc(40 / var(--font-size) * 1em) 0 0;
      }
    .season-box__in {
        border-radius: 0 0 calc(40 / var(--font-size) * 1em) calc(40 / var(--font-size) * 1em);
    }
}
@media all and (min-width: 768px) and (max-width: 1320px) {
    .season-content-heading__in {
        border-radius: calc(40 / var(--sec-outer-w) * 100vw) calc(40 / var(--sec-outer-w) * 100vw) 0 0;
    }
    .season-box__in {
        border-radius: 0 0 calc(40 / var(--sec-outer-w) * 100vw) calc(40 / var(--sec-outer-w) * 100vw);
    }
    .season-content-heading-txt {
        font-size: calc(36 / var(--sec-outer-w) * 100vw);
    }
    .recipe-card-read-name__label {
        font-size: calc(18 / var(--sec-outer-w) * 100vw);
    }
    .recipe-detail-txt__label {
        font-size: calc(14 / var(--sec-outer-w) * 100vw);
    }
    .recipe-card-read-version-list-item--time .recipe-detail-txt::before {
        width: calc(20 / var(--sec-outer-w) * 100vw);
        padding-top: calc(20 / var(--sec-outer-w) * 100vw);
    }
    .recipe-card-read-version-list-item--kcal .recipe-detail-txt::before {
        width: calc(16 / var(--sec-outer-w) * 100vw);
        padding-top: calc(20 / var(--sec-outer-w) * 100vw);
    }
    .recipe-card-read-version-list-item--salt .recipe-detail-txt::before {
        width: calc(12 / var(--sec-outer-w) * 100vw);
        padding-top: calc(20 / var(--sec-outer-w) * 100vw);
    }
    .recipe-detail-txt {
        padding-left: calc(var(--ico-w) / var(--sec-outer-w) * 100vw);
    }
}
@media all and (max-width: 767px) {
    .recipe-sec {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    .recipe-sec::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url("../img/common/bg-deco.png") repeat-y top / calc(2560 / 750 * 100vw);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    .recipe-sec__in {
        padding: 0 calc(15 / 750 * 100vw);
    }
    .recipe-sec__body {
        padding-top: calc(31 / 750 * 100vw);
    }
    .recipe-box-read {
        padding: 0 calc(13 / 750 * 100vw);
    }
    .recipe-box-read .c-txt {
        font-family: var(--font-zen-kaku);
    }
    .recipe-box-list__container {
        margin-top: calc(52 / 750 * 100vw);
    }
    .season-box__body {
        padding-top: calc(52 / 750 * 100vw);
    }
    .recipe-box-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(50 / 750 * 100vw) calc(15 / 750 * 100vw);
    }
    .recipe-box-list-item {
        width: calc((100% - (16 / 750 * 100vw)) / 2);
    }
    .season-content-heading__in {
        background: var(--content-color-500);
        border-radius: calc(40 / 750 * 100vw) calc(40 / 750 * 100vw) 0 0;
      }
    .season-box__in {
        border-radius: 0 0 calc(40 / 750 * 100vw) calc(40 / 750 * 100vw);
        padding: 0 calc(12 / 750 * 100vw);
    }
    .recipe-card {
        height: 100%;
    }
    .recipe-card__in {
        height: 100%;
    }
    .recipe-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .recipe-card-img-ico {
        --ico-w: 42;
    }
}