:root {
    --wr-c-white: #ffffff;
    --wr-c-brown: #67473d;
    --wr-c-border: #f8f6ea;
    --wr-c-bg: #fffef6;
    --wr-c-bg-gray: #f8f6ea;
    --wr-c-asia: #ea5b52;
    --wr-c-europe: #09896b;
    --wr-c-america: #03669e;
    --wr-c-africa: #eb7500;
    --wr-f-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

/***********************************
ADD
***********************************/
@media all and (min-width: 1025px), print {
    .ut-hide-large-pc {
        display: none;
    }
}

/***********************************
UPDATE
***********************************/

body {
    background: var(--wr-c-bg-gray);
}
.wr {
    background-color: var(--wr-c-bg);
}
.wr .c-main {
    font-family: var(--wr-f-family);
}

@media all and (min-width: 768px), print {
    .wr {
        border-top: calc(5 / var(--font) * 1rem) solid var(--wr-c-border);
    }
    .wr .c-wrapper {
        margin-top: calc(52 / var(--font) * 1rem);
        margin-bottom: calc(178 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .wr .c-wrapper {
        margin-top: calc(40 / var(--font) * 1rem);
        margin-bottom: calc(56 / var(--font) * 1rem);
    }
}

/***********************************
LAYOUT
***********************************/

@media all and (min-width: 768px), print {
    .wr-ly-sec {
    
    }
    .wr-ly-sec__inner {
        box-sizing: content-box;
        max-width: calc(1190 / var(--font) * 1rem);
        margin-inline: auto;
        padding-inline: calc(48 / var(--font) * 1rem);
    }
    .wr-ly-sec__body {
    
    }
}

@media all and (max-width: 767px) {
    .wr-ly-sec {
    
    }
    .wr-ly-sec__inner {
        padding-inline: calc(15 / var(--font) * 1rem);
    }
    .wr-ly-sec__body {
    
    }
}


/***********************************
COMPONENT
***********************************/
/* title */
@media all and (min-width: 768px), print {
    .wr-c-title {
        font-size: calc(24 / var(--font) * 1rem);
        line-height: calc(30 / 24);
        letter-spacing: calc(-20 / 1000 * 1em);
        font-weight: bold;
        text-align: center;
        color: var(--wr-c-brown);
        position: relative;
        display: flex;
        gap: 0 calc(28 / var(--font) * 1rem);
        justify-content: center;
    }
    .wr-c-title::before,
    .wr-c-title::after {
        content: "";
        width: calc(4 / var(--font) * 1rem);
        margin-top: calc(-4 / var(--font) * 1rem);
        flex-shrink: 0;
        background-image: radial-gradient(circle, var(--wr-c-brown) calc(2 / var(--font) * 1rem), transparent calc(2 / var(--font) * 1rem));
        background-position: left top;
        background-repeat: repeat-y;
        background-size: calc(4 / var(--font) * 1rem) calc(9 / var(--font) * 1rem);
    }
    .wr-c-title::before {
        transform: rotate(-45deg);
    }
    .wr-c-title::after {
        transform: rotate(45deg);
    }
}
@media all and (max-width: 767px) {
    .wr-c-title {
        font-size: calc(17 / var(--font) * 1rem);
        line-height: calc(36 / 34);
        letter-spacing: calc(-20 / 1000 * 1em);
        font-weight: bold;
        text-align: center;
        color: var(--wr-c-brown);
        position: relative;
        display: flex;
        gap: 0 calc(14 / var(--font) * 1rem);
        justify-content: center;
    }
    .wr-c-title::before,
    .wr-c-title::after {
        content: "";
        width: calc(3 / var(--font) * 1rem);
        margin-top: calc(-4 / var(--font) * 1rem);
        flex-shrink: 0;
        background-image: radial-gradient(circle, var(--wr-c-brown) calc(1.5 / var(--font) * 1rem), transparent calc(1.5 / var(--font) * 1rem));
        background-position: left top;
        background-repeat: repeat-y;
        background-size: calc(3 / var(--font) * 1rem) calc(8 / var(--font) * 1rem);
    }
    .wr-c-title::before {
        transform: rotate(-45deg);
    }
    .wr-c-title::after {
        transform: rotate(45deg);
    }
}

/* bnr */
.wr-c-bnr {
    max-width: calc(704 / var(--font) * 1rem);
    margin-inline: auto;
    display: block;
    transition: all 0.3s ease-in-out;
}
@media all and (hover: hover) {
    .wr-c-bnr:hover {
        filter: brightness(1.1);
    }
}


/***********************************
MV
***********************************/
@media all and (min-width: 768px), print {
    .wr-mv {
        position: relative;
    }
    .wr-mv__inner {
    }
    .wr-mv-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(149 / 1366 * 100%);
        margin-top: calc(76 / 1366 * 100%);
        margin-left: calc(80 / 1366 * 100%);
    }

    .wr-mv-title {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(269 / 1366 * 100%);
        margin-right: calc(16 / 1366 * 100%);
        margin-bottom: calc(-48 / 1366 * 100%);
    }

    .wr-mv__bg {
        width: 100vw;
        padding-top: calc(721 / 1366 * 100%);
        background: url("/recipe/tonyu/worldrecipe/assets/img/mv.jpg") center center no-repeat;
        background-size: cover;
    }
}
@media all and (max-width: 767px) {
    .wr-mv {
        position: relative;
        overflow: hidden;
    }
    .wr-mv__inner {
    }
    .wr-mv-logo {
        position: absolute;
        top: 0;
        left: 50%;
        width: calc(162 / 750 * 100%);
        margin-top: calc(65 / 750 * 100%);
        transform: translateX(-50%);
    }

    .wr-mv-title {
        position: absolute;
        top: 0;
        left:50%;
        width: calc(763 / 750 * 100%);
        margin-top: calc(162 / 750 * 100%);
        transform: translateX(-50%);
    }

    .wr-mv__bg {
        width: 100vw;
        padding-top: calc(1150 / 750 * 100%);
        background: url("/recipe/tonyu/worldrecipe/assets/img/mv_sp.jpg") center center no-repeat;
        background-size: contain;
    }
}

/***********************************
CP01
***********************************/
@media all and (min-width: 768px), print {
    .wr-cp01 {
        margin-bottom: calc(60 / var(--font) * 1rem);
    }
    
    .wr-cp01-title {
        margin-bottom: calc(14 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .wr-cp01 {
        margin-bottom: calc(40 / var(--font) * 1rem);
    }
    .wr-cp01-title {
        margin-bottom: calc(14 / var(--font) * 1rem);
    }
}

/***********************************
RECIPE
***********************************/
@media all and (min-width: 768px), print {
    .wr-recipe {
    }

    .wr-recipe-lead {
        text-align: center;
        font-size: calc(20 / var(--font) * 1rem);
        line-height: calc(40 / 20);
        font-weight: bold;
        color: var(--wr-c-brown);
        margin-bottom: calc(110 / var(--font) * 1rem);
    }

    .wr-recipe__main {
        display: flex;
        gap: 0 calc(68 / var(--font) * 1rem);
    }
}
@media all and (max-width: 1024px) {
    .wr-recipe__main {
        display: block;
    }
    .wr-recipe-nav__illust {
        display: none;
    }
}
@media all and (max-width: 767px) {
    .wr-recipe {
    }
    
    .wr-recipe-lead {
        text-align: center;
        font-size: calc(16 / var(--font) * 1rem);
        line-height: calc(57.6 / 32);
        font-weight: bold;
        color: var(--wr-c-brown);
        margin-bottom: calc(80 / var(--font) * 1rem);
    }
    
    .wr-recipe__main {
    }
}
/* nav */
@media all and (min-width: 1025px), print {
    .wr-recipe__nav {
        flex-shrink: 0;
    }
    .wr-recipe-nav {
        position: sticky;
        top: calc(110 / var(--font) * 1rem);
        background-color: var(--wr-c-border);
    }
    .wr-recipe-nav__inner {
        position: relative;
        padding-block: calc(46 / var(--font) * 1rem) calc(49 / var(--font) * 1rem);
        padding-inline: calc(48 / var(--font) * 1rem) calc(78 / var(--font) * 1rem);
    }
    .wr-recipe-nav__inner::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        opacity: 0;
        transition: all .3s cubic-bezier(.4,.4,0,1);
    }
    .wr-recipe-nav__illust {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(96 / var(--font) * 1rem);
        height: calc(137 / var(--font) * 1rem);
        margin-bottom: calc(-81 / var(--font) * 1rem);
        margin-right: calc(3 / var(--font) * 1rem);
    }
    .wr-recipe-nav__illust-img {
        opacity: 0;
        transition: all 1s cubic-bezier(.4,.4,0,1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% + 10px));
    }
    .wr-recipe-nav__illust-img--asia {
        display: block;
        width: calc(96 / var(--font) * 1rem);
        height: calc(137 / var(--font) * 1rem);
        background: url("/recipe/tonyu/worldrecipe/assets/img/asia_illust.png") center center no-repeat;
        background-size: contain;

    }
    .wr-recipe-nav__illust-img--europe {
        display: block;
        width: calc(72 / var(--font) * 1rem);
        height: calc(120 / var(--font) * 1rem);
        background: url("/recipe/tonyu/worldrecipe/assets/img/europe_illust.png") center center no-repeat;
        background-size: contain;
    }
    .wr-recipe-nav__illust-img--america {
        display: block;
        width: calc(72 / var(--font) * 1rem);
        height: calc(116 / var(--font) * 1rem);
        background: url("/recipe/tonyu/worldrecipe/assets/img/america_illust.png") center center no-repeat;
        background-size: contain;
    }
    .wr-recipe-nav__illust-img--africa {
        display: block;
        width: calc(72 / var(--font) * 1rem);
        height: calc(116 / var(--font) * 1rem);
        background: url("/recipe/tonyu/worldrecipe/assets/img/africa_illust.png") center center no-repeat;
        background-size: contain;
    }
    .wr-recipe-nav:has(.wr-recipe-nav-item--active[data-area="asia"]) .wr-recipe-nav__illust-img--asia,
    .wr-recipe-nav:has(.wr-recipe-nav-item--active[data-area="europe"]) .wr-recipe-nav__illust-img--europe,
    .wr-recipe-nav:has(.wr-recipe-nav-item--active[data-area="america"]) .wr-recipe-nav__illust-img--america,
    .wr-recipe-nav:has(.wr-recipe-nav-item--active[data-area="africa"]) .wr-recipe-nav__illust-img--africa {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    .wr-recipe-nav-list {
    }
    .wr-recipe-nav-item {
        --item-f-size: 16;
        --item-deco-size: 11;
        --item-deco-color: var(--wr-c-asia);
        --item-deco-view: 0;
        --item-f-color: var(--wr-c-brown);
        position: relative;
        font-size: calc(var(--item-f-size) / var(--font) * 1rem);
        font-weight: bold;
        letter-spacing: calc(60 / 1000 * 1em);
        line-height: 1;
        color: var(--item-f-color);
        transition: all 0.3s ease-in-out;
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--asia {
        --item-deco-color: var(--wr-c-asia);
        --item-f-color: var(--wr-c-asia);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--europe {
        --item-deco-color: var(--wr-c-europe);
        --item-f-color: var(--wr-c-europe);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--america {
        --item-deco-color: var(--wr-c-america);
        --item-f-color: var(--wr-c-america);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--africa {
        --item-deco-color: var(--wr-c-africa);
        --item-f-color: var(--wr-c-africa);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--active {
        --item-deco-view: 1;
    }
    .wr-recipe-nav-item:not(.wr-recipe-nav-item--active) {
        --item-f-color: var(--wr-c-brown);
    }
    .wr-recipe-nav-item + .wr-recipe-nav-item {
        margin-top: calc(24 / var(--font) * 1rem);
    }
    .wr-recipe-nav-item__inner {
        padding-left: calc(21 / var(--font) * 1rem);
    }
    .wr-recipe-nav-item::before {
        content: "";
        width: calc(var(--item-deco-size) / var(--font) * 1rem);
        height: calc(var(--item-deco-size) / var(--font) * 1rem);
        position: absolute;
        top: calc((var(--item-f-size) - var(--item-deco-size) ) / 2 / var(--font) * 1rem - 1px );
        left: 0;
        border-radius: 50%;
        background-color: var(--item-deco-color);
        opacity: var(--item-deco-view);
        transition: all 0.3s ease-in-out;
    }
}
@media all and (hover: hover) {
    .wr-recipe-nav-item.wr-recipe-nav-item--asia:hover {
        --item-deco-color: var(--wr-c-asia);
        --item-f-color: var(--wr-c-asia);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--europe:hover {
        --item-deco-color: var(--wr-c-europe);
        --item-f-color: var(--wr-c-europe);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--america:hover {
        --item-deco-color: var(--wr-c-america);
        --item-f-color: var(--wr-c-america);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--africa:hover {
        --item-deco-color: var(--wr-c-africa);
        --item-f-color: var(--wr-c-africa);
    }
}
@media all and (max-width: 1024px) {
    .wr-recipe__nav {
        margin-inline: calc(-60 / var(--font) * 1rem);
        margin-bottom: calc(60 / var(--font) * 1rem);
    }
    .wr-recipe-nav {
    }
    .wr-recipe-nav__inner {
    }
    .wr-recipe-nav-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 calc(2 / var(--font) * 1rem);
    }
    .wr-recipe-nav-item {
        --item-main-color: var(--wr-c-asia);
        --item-illust-width: 48;
        --item-illust-height: 69;
        --item-illust-mt: -33.5;
        --item-illust-url: url("/recipe/tonyu/worldrecipe/assets/img/asia_illust.png");
        background-color: var(--wr-c-border);
        color: var(--item-main-color);
        font-size: calc(14 / var(--font) * 1rem);
        font-weight: bold;
        letter-spacing: calc(60 / 1000 * 1em);
        text-align: center;
        line-height: calc(28 / 24);
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--asia {
        --item-main-color: var(--wr-c-asia);
        --item-illust-width: 48;
        --item-illust-height: 69;
        --item-illust-mt: -33.5;
        --item-illust-url: url("/recipe/tonyu/worldrecipe/assets/img/asia_illust.png")
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--europe {
        --item-main-color: var(--wr-c-europe);
        --item-illust-width: 37.5;
        --item-illust-height: 60;
        --item-illust-mt: -27.5;
        --item-illust-url: url("/recipe/tonyu/worldrecipe/assets/img/europe_illust.png")
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--america {
        --item-main-color: var(--wr-c-america);
        --item-illust-width: 48;
        --item-illust-height: 69;
        --item-illust-mt: -25;
        --item-illust-url: url("/recipe/tonyu/worldrecipe/assets/img/america_illust.png")
    }
    .wr-recipe-nav-item.wr-recipe-nav-item--africa {
        --item-main-color: var(--wr-c-africa);
        --item-illust-width: 37.5;
        --item-illust-height: 60;
        --item-illust-mt: -24.5;
        --item-illust-url: url("/recipe/tonyu/worldrecipe/assets/img/africa_illust.png")
    }
    .wr-recipe-nav-item__inner {
        display: block;
        position: relative;
        padding-top: calc(50 / var(--font) * 1rem);
        padding-bottom: calc(35 / var(--font) * 1rem);
    }
    .wr-recipe-nav-item__inner::before {
        content: "";
        display: block;
        width: calc(var(--item-illust-width) / var(--font) * 1rem);
        height: calc(var(--item-illust-height) / var(--font) * 1rem);
        background: var(--item-illust-url) center center no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-top: calc(var(--item-illust-mt) / var(--font) * 1rem);
    }
    .wr-recipe-nav-item__inner::after {
        content: "";
        display: block;
        width: calc(8 / var(--font) * 1rem);
        height: calc(10 / var(--font) * 1rem);
        mask: url("/recipe/tonyu/worldrecipe/assets/img/icon_arrow_b.svg");
        mask-repeat: no-repeat;
        mask-size: contain;
        background-color: var(--item-main-color);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: calc(17 / var(--font) * 1rem);
    }
    .wr-recipe-nav-item__label {
        min-height: 2lh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
@media all and (max-width: 767px) {
    .wr-recipe__nav {
        margin-inline: calc(-15 / var(--font) * 1rem);
    }
    .wr-recipe-nav-item {
        font-size: calc(12 / var(--font) * 1rem);
    }
    .wr-recipe-nav-item::after {
        width: calc(6 / var(--font) * 1rem);
        height: calc(8 / var(--font) * 1rem);
        margin-bottom: calc(17 / var(--font) * 1rem);
    }
}

/* content */
@media all and (min-width: 768px), print {
    .wr-recipe__content {
    
    }
    .wr-recipe-box {
        --box-main-color: var(--wr-c-asia);
        --box-heading-width: 532;
    }
    .wr-recipe-box.wr-recipe-box--asia {
        --box-main-color: var(--wr-c-asia);
        --box-heading-width: 532;
    }
    .wr-recipe-box.wr-recipe-box--europe {
        --box-main-color: var(--wr-c-europe);
        --box-heading-width: 206;
    }
    .wr-recipe-box.wr-recipe-box--america {
        --box-main-color: var(--wr-c-america);
        --box-heading-width: 777;
    }
    .wr-recipe-box.wr-recipe-box--africa {
        --box-main-color: var(--wr-c-africa);
        --box-heading-width: 197;
    }
    .wr-recipe-box + .wr-recipe-box {
        margin-top: calc(80 / var(--font) * 1rem);
    }
    .wr-recipe-box__inner {
    }
    .wr-recipe-box-heading {
        margin-bottom: calc(34 / var(--font) * 1rem);
        padding-top: calc(39 / var(--font) * 1rem);
        position: relative;
    }
    .wr-recipe-box-heading::before {
        content: "";
        width: calc(50vw + 50%);
        height: calc(1 / var(--font) * 1rem);
        background-color: var(--box-main-color);
        position: absolute;
        top: 0;
        left: 0;
    }
    .wr-recipe-box-heading__sub {
        font-size: calc(16 / var(--font) * 1rem);
        line-height: 1;
        letter-spacing: calc(60 / 1000 * 1em);
        font-weight: bold;
        margin-bottom: calc(18 / var(--font) * 1rem);
        color: var(--box-main-color);
        margin-left: calc(8 / var(--font) * 1rem);
    }
    .wr-recipe-box-heading__main {
        max-width: calc(var(--box-heading-width) / var(--font) * 1rem);
    }
    .wr-recipe-text {
        font-size: calc(16 / var(--font) * 1rem);
        line-height: calc(30 / 16);
        letter-spacing: calc(20 / 1000 * 1em);
        color: var(--wr-c-brown);
        margin-bottom: calc(41 / var(--font) * 1rem);
    }
    .wr-recipe-cards {
        --cards-gap: 20;
        --cards-color: var(--wr-c-asia);
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--cards-gap) / var(--font) * 1rem);
    }
    .wr-recipe-card {
        --delay: 0;
        transition: opacity 0.3s ease-in-out;
        transition-delay: calc(var(--delay) * 0.05s);
        opacity: 1;
    }
    .wr-recipe-card.wr-recipe-card--hidden {
        display: none;
    }
    [data-open] .wr-recipe-card.wr-recipe-card--hidden {
        display: block;
    }
    .wr-recipe-card:nth-of-type(1),
    .wr-recipe-card:nth-of-type(2) {
        width: calc((100% - var(--cards-gap) / var(--font) * 1rem) / 2);
    }
    .wr-recipe-card:nth-of-type(n+3) {
        width: calc((100% - var(--cards-gap) / var(--font) * 1rem * 2) / 3);
    }
    .wr-recipe-card__inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .wr-recipe-card__img {
        transition: all 0.3s ease-in-out;
    }
    .wr-recipe-card__footer {
        position: relative;
        height: 100%;
        margin-top: calc(11 / var(--font) * 1rem);
    }
    .wr-recipe-card__title {
        color: var(--box-main-color);
        font-size: calc(16 / var(--font) * 1rem);
        line-height: calc(30 / 16);
        letter-spacing: calc(20 / 1000 * 1em);
        padding-right: calc(46 / var(--font) * 1rem);
    }
    .wr-recipe-card__arrow {
        background-color: var(--box-main-color);
        width: calc(40 / var(--font) * 1rem);
        height: calc(16 / var(--font) * 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-bottom: calc(8 / var(--font) * 1rem);
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .wr-recipe-card__arrow::before {
        content: "";
        display: block;
        width: calc(12 / var(--font) * 1rem);
        height: calc(9 / var(--font) * 1rem);
        background: url("/recipe/tonyu/worldrecipe/assets/img/icon_arrow.svg") center center no-repeat;
        background-size: contain;
    }
    .wr-recipe-btn {
        position: relative;
        display: block;
        margin-inline: auto;
        max-width: calc(320 / var(--font) * 1rem);
        border: calc(1 / var(--font) * 1rem) solid var(--box-main-color);
        font-size: calc(16 / var(--font) * 1rem);
        line-height: calc(30 / 16);
        letter-spacing: calc(20 / 1000 * 1em);
        color: var(--box-main-color);
        text-align: center;
        padding-block: calc(14 / var(--font) * 1rem);
        margin-top: calc(40 / var(--font) * 1rem);
        transition: all 0.3s ease-in-out;
    }

    .wr-recipe-btn__label {
    }
    .wr-recipe-btn__label--open {
        display: block;
    }
    .wr-recipe-btn__label--close {
        display: none;
    }
    [data-open] .wr-recipe-btn__label--open {
        display: none;
    }
    [data-open] .wr-recipe-btn__label--close {
        display: block;
    }
    .wr-recipe-btn__icon {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin-right: calc(60 / var(--font) * 1rem);
        width: calc(13 / var(--font) * 1rem);
        height: calc(13 / var(--font) * 1rem);
    }
    .wr-recipe-btn__icon::before,
    .wr-recipe-btn__icon::after {
        content: "";
        display: block;
        width: 100%;
        height: calc(1 / var(--font) * 1rem);
        background: var(--box-main-color);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease-in-out;
    }
    .wr-recipe-btn__icon::after {
        height: 100%;
        width: calc(1 / var(--font) * 1rem);
    }
    [data-open] .wr-recipe-btn__icon::after {
        display: none;
    }
}
@media all and (hover: hover) {
    .wr-recipe-card a:hover .wr-recipe-card__img {
        filter: brightness(1.1);
    }
    .wr-recipe-btn:hover {
        color: var(--wr-c-white);
        background-color: var(--box-main-color);
    }
    .wr-recipe-btn:hover .wr-recipe-btn__icon::before,
    .wr-recipe-btn:hover .wr-recipe-btn__icon::after {
        background: var(--wr-c-white);
    }
}
@media all and (max-width: 1024px) {
    .wr-recipe-box-heading::before {
        width: 100%;
    }
}
@media all and (max-width: 767px) {
    .wr-recipe__content {
    
    }
    .wr-recipe-box {
        --box-main-color: var(--wr-c-asia);
        --box-heading-width: 532;
    }
    .wr-recipe-box.wr-recipe-box--asia {
        --box-main-color: var(--wr-c-asia);
        --box-heading-width: 339;
    }
    .wr-recipe-box.wr-recipe-box--europe {
        --box-main-color: var(--wr-c-europe);
        --box-heading-width: 131.5;
    }
    .wr-recipe-box.wr-recipe-box--america {
        --box-main-color: var(--wr-c-america);
        --box-heading-width: 286.5;
    }
    .wr-recipe-box.wr-recipe-box--africa {
        --box-main-color: var(--wr-c-africa);
        --box-heading-width: 126;
    }
    .wr-recipe-box + .wr-recipe-box {
        margin-top: calc(60 / var(--font) * 1rem);
    }
    .wr-recipe-box__inner {
    }
    .wr-recipe-box-heading {
        margin-bottom: calc(27 / var(--font) * 1rem);
        padding-top: calc(34 / var(--font) * 1rem);
        position: relative;
    }
    .wr-recipe-box-heading::before {
        content: "";
        width: 100%;
        height: calc(1 / var(--font) * 1rem);
        background-color: var(--box-main-color);
        position: absolute;
        top: 0;
        left: 0;
    }
    .wr-recipe-box-heading__sub {
        font-size: calc(15 / var(--font) * 1rem);
        line-height: 1;
        letter-spacing: calc(60 / 1000 * 1em);
        font-weight: bold;
        margin-bottom: calc(16 / var(--font) * 1rem);
        color: var(--box-main-color);
        margin-left: calc(2 / var(--font) * 1rem);
    }
    .wr-recipe-box-heading__main {
        width: calc(var(--box-heading-width) / var(--font) * 1rem);
    }
    .wr-recipe-text {
        font-size: calc(14 / var(--font) * 1rem);
        line-height: calc(48/ 28);
        letter-spacing: calc(20 / 1000 * 1em);
        color: var(--wr-c-brown);
        margin-bottom: calc(38 / var(--font) * 1rem);
    }
    .wr-recipe-cards {
        --cards-gap: 8;
        --cards-color: var(--wr-c-asia);
        display: flex;
        flex-wrap: wrap;
        gap: calc(24 / var(--font) * 1rem) calc(var(--cards-gap) / var(--font) * 1rem);
    }
    .wr-recipe-card {
        --delay: 0;
        transition: opacity 0.3s ease-in-out;
        transition-delay: calc(var(--delay) * 0.05s);
        opacity: 1;
    }
    .wr-recipe-card.wr-recipe-card--hidden {
        display: none;
    }
    [data-open] .wr-recipe-card.wr-recipe-card--hidden {
        display: block;
    }
    .wr-recipe-card:nth-of-type(1) {
        width: 100%;
    }
    .wr-recipe-card:nth-of-type(n+2) {
        width: calc((100% - var(--cards-gap) / var(--font) * 1rem * 1) / 2);
    }
    .wr-recipe-card__inner {
    }
    .wr-recipe-card__img {
        transition: all 0.3s ease-in-out;
    }
    .wr-recipe-card__footer {
        margin-top: calc(8 / var(--font) * 1rem);
    }
    .wr-recipe-card__title {
        color: var(--box-main-color);
        font-size: calc(13 / var(--font) * 1rem);
        line-height: calc(39 / 26);
        letter-spacing: calc(-20 / 1000 * 1em);
        width: 100%;
    }
    .wr-recipe-card__arrow {
        display: none;
    }
    .wr-recipe-btn {
        position: relative;
        display: block;
        margin-inline: auto;
        max-width: calc(256 / var(--font) * 1rem);
        border: calc(1 / var(--font) * 1rem) solid var(--box-main-color);
        font-size: calc(14 / var(--font) * 1rem);
        line-height: calc(48 / 28);
        letter-spacing: calc(20 / 1000 * 1em);
        color: var(--box-main-color);
        text-align: center;
        padding-block: calc(16 / var(--font) * 1rem);
        margin-top: calc(40 / var(--font) * 1rem);
        transition: all 0.3s ease-in-out;
    }

    .wr-recipe-btn__label {
    }
    .wr-recipe-btn__label--open {
        display: block;
    }
    .wr-recipe-btn__label--close {
        display: none;
    }
    [data-open] .wr-recipe-btn__label--open {
        display: none;
    }
    [data-open] .wr-recipe-btn__label--close {
        display: block;
    }
    .wr-recipe-btn__icon {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin-right: calc(48 / var(--font) * 1rem);
        width: calc(10 / var(--font) * 1rem);
        height: calc(10 / var(--font) * 1rem);

    }
    .wr-recipe-btn__icon::before,
    .wr-recipe-btn__icon::after {
        content: "";
        display: block;
        width: 100%;
        height: calc(1 / var(--font) * 1rem);
        background: var(--box-main-color);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease-in-out;
    }
    .wr-recipe-btn__icon::after {
        height: 100%;
        width: calc(1 / var(--font) * 1rem);
    }
    [data-open] .wr-recipe-btn__icon::after {
        display: none;
    }
}

/***********************************
CP02
***********************************/
@media all and (min-width: 768px), print {
    .wr-cp02 {
        background-color: var(--wr-c-bg-gray);
        padding-bottom: calc(36 / var(--font) * 1rem);
        padding-top: calc(80 / var(--font) * 1rem);
    }
    
    .wr-cp02-title {
        margin-bottom: calc(14 / var(--font) * 1rem);
    }
    
    .wr-cp02__note {
        font-size: calc(12 / var(--font) * 1rem);
        color: var(--wr-c-brown);
        line-height: calc(18 / 12);
        letter-spacing: calc(-20 / 1000 * 1em);
        max-width: calc(1094 / var(--font) * 1rem);
        margin-inline: auto;
        margin-top: calc(60 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .wr-cp02 {
        background-color: var(--wr-c-bg-gray);
        padding-bottom: calc(40 / var(--font) * 1rem);
        padding-top: calc(42 / var(--font) * 1rem);
        padding-inline: calc(10 / var(--font) * 1rem);
    }
    
    .wr-cp02-title {
        margin-bottom: calc(14 / var(--font) * 1rem);
    }
    
    .wr-cp02__note {
        font-size: calc(12 / var(--font) * 1rem);
        color: var(--wr-c-brown);
        line-height: calc(33.6 / 24);
        letter-spacing: calc(-20 / 1000 * 1em);
        margin-top: calc(28 / var(--font) * 1rem);
    }
}