* :where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert
}

*,
* ::before,
* ::after {
    box-sizing: border-box
}

a,
button {
    cursor: revert
}

ol,
ul,
menu {
    list-style: none
}

img {
    max-inline-size: 100%;
    max-block-size: 100%
}

table {
    border-collapse: collapse
}

input,
textarea {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto
}

textarea {
    white-space: revert
}

meter {
    -webkit-appearance: revert;
    -moz-appearance: revert;
    appearance: revert
}

pre {
    all: revert
}

::-moz-placeholder {
    color: unset
}

::placeholder {
    color: unset
}

::marker {
    content: ""
}

:where([hidden]) {
    display: none
}

:where([contenteditable]:not([contenteditable=false])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    line-break: after-white-space;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto
}

:where([draggable=true]) {
    -webkit-user-drag: element
}

:where(dialog:modal) {
    all: revert
}

:root {
    --en-font: "Josefin Sans", sans-serif;
    --green: #2e9648;
    --light-green: #c4e597;
    --deep-green: #26863e;
    --dark-green: #007560;
    --white: #fff;
    --yellow: #fff6b4;
    --light-yellow: #fff7ea;
    --hover-light-green: #d5efb3;
    --hover-green: #45bc63;
    --pink: #ef8989;
    --light-pink: #ffbdb4;
    --z-base: 0;
    --z-fixed-btn: 100;
    --z-nav: 101;
    --z-nav-btn: 102;
    --z-modal: 103
}

body {
    font-family: "Noto Sans JP", Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    
    /* textColor */
    color: #39B1BB
}

a {
    cursor: pointer;
    /* display: block; */
    color: currentColor
}

button {
    cursor: pointer;
    color: currentColor
}

details {
    cursor: pointer
}

img {
    display: block;
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

br.md {
    display: none
}

br.lg {
    display: none
}

br.xl {
    display: none
}

@media screen and (min-width: 768px) {
    br.sp {
        display: none
    }

    br.md {
        display: block
    }
}

@media screen and (min-width: 1024px) {
    br.lg {
        display: block
    }
}

@media screen and (min-width: 1366px) {
    br.xl {
        display: block
    }
}

.pcOnly {
    display: none
}

@media screen and (min-width: 768px) {
    .pcOnly {
        display: block
    }
}

@media screen and (min-width: 768px) {
    .spOnly {
        display: none
    }
}

.visuallyHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.cContainer {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

.cContainer.is-open {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.cMain {
    flex: 1;
    overflow: hidden
}

.preload * {
    transition: none !important
}

@keyframes jumpNegi {
    0% {
        transform: rotate(-73deg) translateX(0)
    }

    25% {
        transform: rotate(-73deg) translateX(10%)
    }

    50% {
        transform: rotate(-73deg) translateX(0)
    }

    75% {
        transform: rotate(-73deg) translateX(10%)
    }

    100% {
        transform: rotate(-73deg) translateX(0)
    }
}

.cFooter {
    overflow: hidden;
    position: relative;
    background-color: var(--white);
    border-radius: 8vw 8vw 0 0;
    padding: calc(40rem / 16) 10.67vw calc(70rem / 16)
}

.cFooter__search {
    --icon-color: var(--green);
    padding-bottom: 30px;
    margin-bottom: calc(29rem / 16);
    border-bottom: 3px dotted var(--green)
}

.cFooter__search_title {
    justify-content: center;
    height: -moz-fit-content;
    height: fit-content;
    font-size: calc(16rem / 16);
    font-weight: 700;
    margin-bottom: 30px
}

.cFooter__search_title--icon {
    margin-right: 8px
}

.cFooter__search_category--item {
    font-size: calc(13rem / 16);
    font-weight: 500
}

.cFooter__nav {
    margin-bottom: 30px
}

.cFooter__nav_item {
    width: -moz-fit-content;
    width: fit-content;
    font-size: calc(14rem / 16);
    font-weight: 500;
    margin-bottom: 20px
}

.cFooter__nav_item.external a {
    display: inline-block;
    position: relative;
    padding-right: 18px
}

.cFooter__nav_item.external a::after {
    position: absolute;
    top: 28%;
    right: 0;
    content: "";
    width: 13px;
    height: 13px;
    background-image: url(../images/common/icon_external-link.svg);
    background-size: contain;
    background-repeat: no-repeat
}

.cFooter small {
    font-family: var(--en-font);
    font-size: calc(12rem / 16);
    font-weight: 600
}

.cFooter__pageTop {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(191px, 26.13vw);
    height: min(196px, 26.93vw)
}

.cFooter__pageTop_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: min(292px, 40vw);
    height: min(292px, 40vw);
    background-color: var(--light-yellow);
    border-radius: 50%
}

.cFooter__pageTop_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.cFooter__pageTop_icon {
    width: 12.8vw;
    transform: rotate(-73deg);
    margin: 11.2vw 4.8vw 0 auto
}

@media screen and (min-width: 768px) {
    .cFooter {
        height: 30.89vw;
        padding: 7.32vw 0 6.59vw;
        border-radius: 7.32vw 7.32vw 0 0
    }

    .cFooter__inner {
        width: 76.13vw;
        margin: 0 auto;
        text-align: center;
        pointer-events: cursor
    }

    .cFooter__search {
        display: flex;
        border-bottom: dotted max(3px, .22vw) var(--green);
        padding-bottom: 1.32vw;
        margin-bottom: 1.68vw
    }

    .cFooter__search_title {
        font-size: max(16rem / 16, 1.17vw);
        margin-top: .22vw;
        margin-right: 1.61vw;
        margin-left: -0.44vw
    }

    .cFooter__search_title--icon {
        margin-right: .59vw
    }

    .cFooter__search_category--item {
        font-size: max(13rem / 16, .95vw)
    }

    .cFooter__search_category--item .cCategoryList__item_link::before {
        background-color: var(--hover-green)
    }

    .cFooter__nav {
        display: flex;
        margin: 0 -1.1vw 5.27vw -1.54vw
    }

    .cFooter__nav_item {
        font-size: max(14rem / 16, 1.02vw);
        margin-bottom: 0
    }

    .cFooter__nav_item.external a {
        padding-right: 1.32vw
    }

    .cFooter__nav_item.external a::after {
        top: 28%;
        width: .95vw;
        height: .95vw
    }

    .cFooter__nav_item a {
        padding: 0 15px;
        transition: color .4s
    }

    .cFooter__nav_item a:hover {
        color: var(--hover-green)
    }

    .cFooter small {
        font-size: max(14rem / 16, 1.02vw);
        font-weight: 400;
        letter-spacing: .08em
    }

    .cFooter__pageTop {
        width: 13.98vw;
        height: 14.35vw
    }

    .cFooter__pageTop_inner {
        width: 100%;
        height: 100%
    }

    .cFooter__pageTop_inner:hover .cFooter__pageTop_icon {
        animation: jumpNegi .6s forwards
    }

    .cFooter__pageTop_inner:hover .cFooter__pageTop_bg {
        transform: scale(1.1)
    }

    .cFooter__pageTop_bg {
        width: 21.38vw;
        height: 21.38vw;
        transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .cFooter__pageTop_text {
        position: relative;
        font-family: var(--en-font);
        font-size: max(14rem / 16, 1.02vw);
        font-weight: 400;
        letter-spacing: .08em;
        text-align: center;
        padding-top: 5.12vw;
        margin: 0 -1.98vw 2.2vw auto
    }

    .cFooter__pageTop_icon {
        width: 5.2vw;
        margin: 0 3.44vw 0 auto
    }
}

.cNav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-nav);
    width: 100%;
    background-color: var(--green);
    color: var(--white);
    padding: 40px 0;
    overflow: auto
}

.cNav__inner {
    width: 78.67vw;
    margin: 0 auto
}

.cNav__title {
    font-size: calc(20rem / 16);
    font-weight: 700;
    margin-bottom: 20px
}

.cNav__title_icon {
    --icon-color: var(--white);
    margin-right: 7px
}

.cNav__title_icon .cSearch__icon_circle {
    width: 16px;
    height: 16px;
    border: 3px solid var(--icon-color);
    margin-left: 1px
}

.cNav__title_icon .cSearch__icon_line {
    width: 3px;
    height: 7px
}

.cNav__search {
    margin-bottom: 41px
}

.cNav__search_category--item {
    font-size: calc(13rem / 16);
    font-weight: 500;
    letter-spacing: .05em
}

.cNav__search_category .cCategoryList__item_link {
    color: var(--green);
    background-color: var(--white)
}

.cNav__recommend {
    margin-bottom: 56px
}

.cNav__recommend_content {
    display: flex
}

.cNav__recommend_image {
    width: min(150px, 30.93vw);
    height: min(150px, 30.93vw);
    border-radius: 30px;
    border: 7px solid var(--white);
    overflow: hidden;
    margin-right: 15px
}

.cNav__recommend_image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.cNav__recommend_recipe {
    width: 43.73vw
}

.cNav__recommend_recipe_title {
    font-weight: 700;
    padding-bottom: max(9rem / 16, 2.4vw);
    margin-bottom: max(11rem / 16, 2.93vw);
    border-bottom: dotted 3px var(--white)
}

.cNav__recommend_recipe_title--sub {
    font-size: calc(12rem / 16);
    letter-spacing: .08em;
    line-height: calc(16rem / 16);
    margin-bottom: max(4rem / 16, 1.07vw)
}

.cNav__recommend_recipe_title--main {
    font-size: calc(15rem / 16);
    letter-spacing: .05em;
    line-height: calc(22rem / 16)
}

.cNav__recommend_recipe .cCookingTime {
    gap: 0
}

.cNav__bottomBtn_link {
    text-align: center;
    font-size: calc(16rem / 16);
    letter-spacing: .05em;
    margin-bottom: 27px
}

.cNav__bottomBtn_link a {
    display: inline-block
}

.cNav__bottomBtn_close {
    display: flex;
    align-items: center;
    background-color: var(--white);
    border-radius: 30px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .16);
    color: var(--green);
    font-size: calc(17rem / 16);
    font-weight: 700;
    letter-spacing: .03em;
    padding: calc(12rem / 16) 48px calc(13rem / 16);
    margin: 0 auto
}

.cNav__bottomBtn_close--icon {
    position: relative;
    width: 15px;
    height: 15px;
    margin-right: 13px
}

.cNav__bottomBtn_close--icon span {
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-block;
    width: 15px;
    height: 2px;
    background-color: var(--green)
}

.cNav__bottomBtn_close--icon span:first-of-type {
    transform: rotate(45deg)
}

.cNav__bottomBtn_close--icon span:last-of-type {
    transform: rotate(-45deg)
}

@media screen and (min-width: 768px) {
    .cNav {
        top: 2.2vw;
        right: 2.2vw;
        bottom: auto;
        left: auto;
        width: auto;
        min-width: 47.8vw;
        height: min(100vh - 4.39vw, 51.83vw);
        border-radius: 1.39vw;
        padding: min(10.16vh, 5.71vw) 4.39vw min(10.03vh, 5.64vw);
        overflow-y: auto
    }

    .cNav__inner {
        width: min(600px, 38.95vw);
        width: 38.95vw
    }

    .cNav__title {
        font-size: max(20rem / 16, 1.46vw);
        margin-bottom: min(3.91vh, 2.2vw)
    }

    .cNav__title_icon {
        margin-right: .51vw
    }

    .cNav__title_icon .cSearch__icon_circle {
        width: 1.17vw;
        height: 1.17vw;
        margin-left: .07vw
    }

    .cNav__title_icon .cSearch__icon_line {
        height: .51vw
    }

    .cNav__search {
        margin-bottom: min(7.81vh, 4.39vw)
    }

    .cNav__search_category--item {
        font-size: max(13rem / 16, .95vw)
    }

    .cNav__recommend {
        margin-bottom: 0
    }

    .cNav__recommend_content {
        align-items: center
    }

    .cNav__recommend_image {
        width: min(27.99vh, 15.74vw);
        height: min(27.99vh, 15.74vw);
        border-radius: 50px;
        margin-right: 1.46vw
    }

    .cNav__recommend_recipe {
        width: 21.6vw
    }

    .cNav__recommend_recipe_title {
        padding-bottom: max(10rem / 16, .73vw);
        margin-bottom: max(11rem / 16, .81vw)
    }

    .cNav__recommend_recipe_title--sub {
        font-size: max(14rem / 16, 1.02vw);
        line-height: max(22rem / 16, 1.61vw);
        margin-bottom: max(14rem / 16, 1.02vw)
    }

    .cNav__recommend_recipe_title--main {
        font-size: max(18rem / 16, 1.32vw);
        line-height: max(32rem / 16, 2.34vw)
    }

    .cNav__recommend_recipe_title .cCookingTime .cook {
        padding-right: .22vw
    }

    .cNav__bottomBtn_close {
        position: fixed;
        top: 3.66vw;
        right: 3.66vw;
        z-index: var(--z-nav-btn);
        justify-content: center;
        width: 3.66vw;
        height: 3.66vw;
        border-radius: 50%;
        background-color: var(--deep-green);
        padding: 0
    }

    .cNav__bottomBtn_close--icon {
        width: 1.32vw;
        height: 1.32vw;
        margin: 0
    }

    .cNav__bottomBtn_close--icon span {
        top: 45%;
        width: 1.32vw;
        height: 3px;
        background-color: var(--white)
    }

    .cNav__bottomBtn_close--text {
        display: none
    }
}

.cNav {
    visibility: hidden;
    opacity: 0;
    transition: .4s all cubic-bezier(0.39, 0.575, 0.565, 1) .2s
}

.cNav__title,
.cNav__search_category,
.cNav__recommend_content {
    transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1), opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.cNav__title {
    opacity: 0;
    transform: translateY(50%)
}

.cNav__search_category {
    opacity: 0;
    transform: translateY(6%)
}

.cNav__recommend_content {
    opacity: 0;
    transform: translateY(10%)
}

.cNav__bottomBtn_close {
    transform: scale(0);
    transition: .4s all cubic-bezier(0.28, -0.37, 0.15, 1.4)
}

.cNav__bottomBtn_link {
    opacity: 0;
    transition: opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.menu-open .cNav {
    visibility: visible;
    opacity: 1;
    transition: .3s all cubic-bezier(0.39, 0.575, 0.565, 1)
}

.menu-open .cNav__title {
    opacity: 1;
    transform: translateY(0);
    transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .3s, opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .3s
}

.menu-open .cNav__search_category {
    opacity: 1;
    transform: translateY(0);
    transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s, opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s
}

.menu-open .cNav__recommend_content {
    opacity: 1;
    transform: translateY(0);
    transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s, opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s
}

.menu-open .cNav__bottomBtn_close {
    transform: scale(1);
    transition: .4s all cubic-bezier(0.28, -0.37, 0.15, 1.4) .15s
}

.menu-open .cNav__bottomBtn_link {
    opacity: 1;
    transition: opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s
}

@media screen and (min-width: 768px) {
    .cNav {
        opacity: 1;
        transform-origin: top right;
        transform: scale(0);
        transition: .4s all cubic-bezier(0.28, -0.37, 0.15, 1.4) .1s
    }

    .cNav__title,
    .cNav__search_category,
    .cNav__recommend_content {
        transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1), opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1)
    }

    .menu-open .cNav {
        opacity: 1;
        transform: scale(1);
        transition: .4s all cubic-bezier(0.28, -0.37, 0.15, 1.4)
    }

    .menu-open .cNav__title {
        transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .3s, opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .3s
    }

    .menu-open .cNav__search_category {
        transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s, opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s
    }

    .menu-open .cNav__recommend_content {
        transition: transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s, opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .4s
    }

    .menu-open .cNav__bottomBtn_close {
        transition: .5s all cubic-bezier(0.28, -0.37, 0.15, 1.4) .2s
    }
}

.cSearch {
    display: flex;
    align-items: center
}

.cSearch__icon {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content
}

.cSearch__icon_circle {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: solid 2px var(--icon-color)
}

.cSearch__icon_line {
    width: 2px;
    height: 6px;
    background-color: var(--icon-color);
    margin: 2px auto 0
}

.cSearch__text {
    width: -moz-max-content;
    width: max-content
}

@media screen and (min-width: 768px) {
    .cSearch__icon_circle {
        width: max(13px, .95vw);
        height: max(13px, .95vw);
        border: solid max(2px, .15vw) var(--icon-color)
    }

    .cSearch__icon_line {
        width: max(2px, .15vw);
        height: max(6px, .44vw)
    }
}

.cCategoryList {
    display: flex;
    flex-wrap: wrap;
    height: -moz-fit-content;
    height: fit-content;
    margin: -6px -4px
}

.cCategoryList__item {
    color: var(--white)
}

.cCategoryList__item a {
    margin: 6px 4px
}

.cCategoryList__item_link {
    width: 100%;
    height: 100%;
    letter-spacing: .05em;
    background-color: var(--green);
    border-radius: 30px;
    padding: calc(5rem / 16) 14px calc(7rem / 16)
}

@media screen and (min-width: 768px) {
    .cCategoryList {
        margin: max(-6rem / 16, -0.44vw) -0.29vw
    }

    .cCategoryList__item a {
        padding: max(6rem / 16, .44vw) .29vw;
        margin: 0
    }

    .cCategoryList__item_link {
        position: relative;
        padding: max(5rem / 16, .37vw) 1.02vw max(7rem / 16, .51vw);
        overflow: hidden;
        isolation: isolate
    }

    .cCategoryList__item_link span {
        position: relative;
        z-index: 1
    }

    .cCategoryList__item_link::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background-color: var(--hover-light-green);
        transform: translateX(-100%);
        z-index: 0;
        transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }

    .cCategoryList__item_link:hover::before {
        transform: translateX(0)
    }
}

.cCookingTime {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: calc(12rem / 16);
    font-weight: 500;
    padding-left: 30px
}

.cCookingTime::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 22px;
    height: 26px;
    background-image: url(../images/common/icon_timer.svg);
    background-size: contain;
    background-repeat: no-repeat
}

.cCookingTime.green::before {
    background-image: url(../images/common/icon_timer_green.svg)
}

.cCookingTime .num {
    font-family: var(--en-font);
    font-size: calc(27rem / 16);
    font-weight: 600
}

.cCookingTime .cooking {
    display: inline-block;
    padding-right: 3px
}

@media screen and (min-width: 768px) {
    .cCookingTime {
        align-items: baseline;
        gap: .37vw;
        font-size: max(12rem / 16, .88vw);
        padding-left: 2.2vw
    }

    .cCookingTime::before {
        width: 1.61vw;
        height: 1.9vw
    }

    .cCookingTime .cooking {
        display: inline-block;
        padding-right: .22vw
    }

    .cCookingTime .num {
        font-size: max(27rem / 16, 1.98vw)
    }
}