/* --------------------------------------------------------------------------
  COMMON
-------------------------------------------------------------------------- */
section {
    opacity: 0;
    transition: all .6s ease;
}
section.visible-section {
    opacity: 1;
}

@media all and (max-width: 767px) {
    .c-header {
        background-color: unset;
        margin-bottom: -65px;
    }
    .c-header.invisible-bg {
        margin-bottom: 0;
    }
    .c-header__body__in.page-header {
        background-color: unset;
        transition: background-color .6s ease;
    }
    .c-header.invisible-bg .c-header__body__in.page-header {
        background-color: var(--white-color);
    }
    .c-header__title {
        position: relative;
        opacity: 0;
        transition: opacity .6s ease;
        visibility: hidden;
        pointer-events: none;
    }
    .c-header.invisible-bg .c-header__title {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* --------------------------------------------------------------------------
  MV
-------------------------------------------------------------------------- */
@keyframes mv_animation {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
@media all and (min-width: 768px), print {
    .mv-section {
        --mv-special-bg: #fff7e0;
        --mv-special-detail: #584c3d;
    }
    .mv-section__in {
        padding: 0;
        max-width: 100%;
    }
    .mv-section__body {
        padding: 0;
    }
    .mv-section-container {
        height: calc(630 / 1366 * 100vw);
    }
    .mv-section-container__in {
        height: 100%;
    }
    .mv-section-container__body {
        display: flex;
        height: 100%;
    }
    .mv-special-read {
        width: calc(553 / 1366 * 100vw);
        background: var(--mv-special-bg);
    }
    .mv-special-read__in {
        margin: 0 auto;
        width: calc(409 / 1366 * 100vw);
        height: 100%;
        padding: calc(70 / 1366 * 100vw) calc(20 / 1366 * 100vw) calc(73 / 1366 * 100vw);
    }
    .mv-special-read__body {
        height: 100%;
    }
    .mv-special-read-ttl {
    }
    .mv-special-read-ttl__label--sub {
        text-align: center;
        font-size: calc(18 / 1366 * 100vw);
        font-family: var(--font-family-zenmaru);
        font-feature-settings: "palt";
        letter-spacing: 0;
        line-height: 1.4;
        font-weight: bold;
    }
    .mv-special-read-ttl__label {
        margin: calc(18 / 1366 * 100vw) auto 0;
        width: calc(354 / 1366 * 100vw);
    }
    .special-feature {
        border-top: min(2px, calc((2 / 1366) * 100vw)) solid var(--black-color);
        border-bottom: min(2px, calc((2 / 1366) * 100vw)) solid var(--black-color);
        position: relative;
        margin-top: calc(34 / 1366 * 100vw);
    }
    .special-feature::before,
    .special-feature::after {
        position: absolute;
        content: "";
        width: 100%;
        height: min(1px, calc((1 / 1366) * 100vw));
        background-color: black;
        left: 0;
    }
    .special-feature::before {
        margin-top: min(2px, calc((2 / 1366) * 100vw));
        top: 0;
    }
    .special-feature::after {
        margin-bottom: min(2px, calc((2 / 1366) * 100vw));
        bottom: 0;
    }
    .special-feature__in {
        text-align: center;
        padding: calc(16 / 1366 * 100vw) 0;
    }
    .special-feature__label {
        font-size: calc(24 / 1366 * 100vw);
        letter-spacing: calc(100 / 1000 * 1em);
        line-height: 1.5;
    }
    .special-pickup {
        position: relative;
        padding-top: calc(30 / 1366 * 100vw);
        margin-top: calc(40 / 1366 * 100vw);
    }
    .special-pickup::before {
        content: "";
        display: block;
        width: calc(60 / 1366 * 100vw);
        height: calc(14 / 1366 * 100vw);
        background: url("../img/top/mv-special-pickup.svg") no-repeat center / contain;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .special-pickup__in {
        display: flex;
        position: relative;
    }
    .special-pickup__in::before {
        content: "";
        display: block;
        width: calc(130 / 1366 * 100vw);
        height: calc(130 / 1366 * 100vw);
        flex-shrink: 0;
    }
    .special-pickup__in .special-pickup-img .c-img {
        transition: all .3s ease;
    }
    .special-pickup__in:hover .special-pickup-img .c-img {
        transition: all .3s ease;
        transform: scale(1.1);
    }
    .special-pickup__contents {
    }
    .special-pickup__body {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    .special-pickup-img {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        border-radius: calc(20 / 1366 * 100vw);
        width: calc(130 / 1366 * 100vw);
    }
    .special-pickup-read {
        margin-left: calc(25 / 1366 * 100vw);
    }
    .special-pickup-read__container {
    }
    .special-pickup-read-txt {
    }
    .special-pickup-read-txt__label {
        font-size: calc(18 / 1366 * 100vw);
        line-height: 1.65;
        font-family: var(--font-family-zenmaru);
    }
    .special-pickup-read-date {
    }
    .special-pickup-read-date__label {
        font-size: calc(12 / 1366 * 100vw);
        font-family: var(--font-family-quicksand);
        margin-top: calc(15 / 1366 * 100vw);
    }
    .special-pickup-read-tags {
        margin-top: calc(15 / 1366 * 100vw);
        margin-left: calc(25 / 1366 * 100vw);
    }
    .special-pickup-read-tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(4 / 1366 * 100vw);
    }
    .special-pickup-read-tags-list-item {
        transition: all .3s ease;
    }
    .special-pickup-read-tags-list-item:hover {
        opacity: 0.7;
        transition: all .3s ease;
    }
    .special-pickup-read-tag {
    }
    .special-pickup-read-tag__in {
        background: var(--white-color);
        border: var(--black-color) solid 1px;
        padding: calc(7 / 1366 * 100vw) calc(16 / 1366 * 100vw);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .special-pickup-read-tag__label {
        font-size: calc(12 / 1366 * 100vw);
        font-family: var(--font-family-zenkaku);
        line-height: 1;
        display: flex;
    }
    .special-pickup-read-tag__label::before {
        content: "#";
    }
    .mv-special-img {
        width: calc(812 / 1366 * 100vw);
        padding: calc(24 / 1366 * 100vw) calc(20 / 1366 * 100vw);
        background: url("../img/top/mv-special.png") no-repeat center / contain;
    }
    .mv-special-img__in {
        height: 100%;
        position: relative;
    }
    .mv-special-detail {
        width: calc(160 / 1366 * 100vw);
        height: calc(160 / 1366 * 100vw);
        position: absolute;
        right: 0;
        bottom: calc(40 / 1366 * 100vw);
        --special-btn-color:var(--white-color);
    }
    .mv-special-detail__in {
        background: var(--mv-special-detail);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 50%;
        transition: all .3s ease;
    }
    .mv-special-detail__in:hover {
        transform: scale(1.1);
        transition: all .3s ease;
    }
    .mv-special-detail__in::before,
    .mv-special-detail__in::after {
        content: "";
        display: block;
        width: calc(148 / 1366 * 100vw);
        height: calc(148 / 1366 * 100vw);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: calc(111 / 1366 * 100vw);
        mask-size: calc(111 / 1366 * 100vw);
        background: var(--special-btn-color);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        animation: mv_animation 13s linear infinite;
    }
    .mv-special-detail__in::before {
        -webkit-mask-image: url("../img/top/mv-special-deco-top.svg");
        mask-image: url("../img/top/mv-special-deco-top.svg");
        -webkit-mask-position: top;
        mask-position: top;
        left: calc(3 / 1366 * 100vw);
    }
    .mv-special-detail__in::after {
        -webkit-mask-image: url("../img/top/mv-special-deco-bottom.svg");
        mask-image: url("../img/top/mv-special-deco-bottom.svg");
        -webkit-mask-position: bottom;
        mask-position: bottom;
        right: calc(3 / 1366 * 100vw);
    }
    .mv-special-detail-txt {
        color: var(--special-btn-color);
        text-align: center;
    }
    .mv-special-detail-txt__label {
        font-size: calc(21 / 1366 * 100vw);
        font-family: var(--font-family-zenmaru);
        font-weight: bold;
        line-height: 1.5;
    }
    .mv-special-detail-txt__label--strong {
        font-size: calc(24 / 1366 * 100vw);
    }
    .mv-special-detail-txt__label--small {
        font-size: calc(20 / 1366 * 100vw);
        font-family: var(--font-family-quicksand);
        font-weight: 600;
        letter-spacing: calc(100 / 1000 * 1em);
        position: relative;
        padding-right: calc(18 / 1366 * 100vw);
        display: inline-block;
    }
    .mv-special-detail-txt__label--small::after {
        content: "";
        display: block;
        width: calc(13 / 1366 * 100vw);
        height: calc(13 / 1366 * 100vw);
        background: url("../img/top/mv-special-arrow.svg") no-repeat center / contain;
        position: absolute;
        right: 0;
        top: 0;
        margin-top: calc(9 / 1366 * 100vw);
    }
}
@media all and (max-width: 767px) {
    .mv-section {
        --mv-special-bg: #fff7e0;
        --mv-special-detail: #584c3d;
    }
    .mv-section__in {
        padding: 0;
        max-width: 100%;
    }
    .mv-section__body {
        padding: 0;
    }
    .mv-section-container {
    }
    .mv-section-container__in {
        height: 100%;
    }
    .mv-section-container__body {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .mv-special-read {
        background: var(--mv-special-bg);
    }
    .mv-special-read__in {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        padding: calc(60 / 2 * 1px) calc(40 / 2 * 1px) calc(46 / 2 * 1px);
    }
    .mv-special-read__body {
        height: 100%;
    }
    .mv-special-read-ttl {
    }
    .mv-special-read-ttl__label--sub {
        text-align: center;
        font-size: calc(24 / 2 * 1px);
        font-family: var(--font-family-zenmaru);
        font-weight: bold;
        font-feature-settings: "palt";
        letter-spacing: 0;
        line-height: 1.4;
    }
    .mv-special-read-ttl__label {
        margin: calc(20 / 2 * 1px) auto 0;
        width: calc(461 / 2 * 1px);
    }
    .special-feature {
        display: none;
    }
    .special-feature::before,
    .special-feature::after {
        position: absolute;
        content: "";
        width: 100%;
        height: min(1px, calc((1 / 1366) * 100vw));
        background-color: black;
        left: 0;
    }
    .special-feature::before {
        margin-top: min(2px, calc((2 / 1366) * 100vw));
        top: 0;
    }
    .special-feature::after {
        margin-bottom: min(2px, calc((2 / 1366) * 100vw));
        bottom: 0;
    }
    .special-feature__in {
        text-align: center;
        padding: calc(16 / 1366 * 100vw) 0;
    }
    .special-feature__label {
        font-size: calc(24 / 1366 * 100vw);
        letter-spacing: calc(100 / 1000 * 1em);
        line-height: 1.5;
    }
    .special-pickup {
        display: none;
    }
    .special-pickup::before {
        content: "";
        display: block;
        width: calc(60 / 1366 * 100vw);
        height: calc(14 / 1366 * 100vw);
        background: url("../img/top/mv-special-pickup.svg") no-repeat center / contain;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .special-pickup__in {
    }
    .special-pickup__in .special-pickup-img .c-img {
        transition: all .3s ease;
    }
    .special-pickup__in:hover .special-pickup-img .c-img {
        transition: all .3s ease;
        transform: scale(1.1);
    }
    .special-pickup__body {
        display: flex;
    }
    .special-pickup-img {
        overflow: hidden;
        border-radius: calc(20 / 1366 * 100vw);
        width: calc(130 / 1366 * 100vw);
        flex-shrink: 0;
    }
    .special-pickup-read {
    }
    .special-pickup-read__container {
        padding-left: calc(25 / 1366 * 100vw);
    }
    .special-pickup-read-txt {
    }
    .special-pickup-read-txt__label {
        font-size: calc(18 / 1366 * 100vw);
        line-height: 1.65;
        font-family: var(--font-family-zenmaru);
    }
    .special-pickup-read-date {
    }
    .special-pickup-read-date__label {
        font-size: calc(12 / 1366 * 100vw);
        font-family: var(--font-family-quicksand);
        margin-top: calc(15 / 1366 * 100vw);
    }
    .special-pickup-read-tags {
        margin-top: calc(15 / 1366 * 100vw);
    }
    .special-pickup-read-tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(4 / 1366 * 100vw);
    }
    .special-pickup-read-tags-list-item {
        transition: all .3s ease;
    }
    .special-pickup-read-tags-list-item:hover {
        opacity: 0.7;
        transition: all .3s ease;
    }
    .special-pickup-read-tag {
    }
    .special-pickup-read-tag__in {
        background: var(--white-color);
        border: var(--black-color) solid 1px;
        padding: calc(7 / 1366 * 100vw) calc(16 / 1366 * 100vw);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .special-pickup-read-tag__label {
        font-size: calc(12 / 1366 * 100vw);
        font-family: var(--font-family-quicksand);
        line-height: 1;
        display: flex;
    }
    .special-pickup-read-tag__label::before {
        content: "#";
    }
    .mv-special-img__in {
        height: 100%;
        position: relative;
    }
    .mv-special-img {
        width: 100%;
        height: calc(445 / 375 * 100vw);
        padding: calc(24 / 1366 * 100vw) calc(20 / 1366 * 100vw);
        background: url("../img/top/mv-special_sp.png") no-repeat center / cover;
        position: relative;
    }
    .mv-special-img__in {
    }
    .mv-special-detail {
        width: calc(80 / 16 * 1rem);
        height: calc(80 / 16 * 1rem);
        position: absolute;
        right: calc(3 / 375 * 100vw);
        top: calc(6 / 375 * 100vw);
        --special-btn-color:var(--white-color);
    }
    .mv-special-detail__in {
        background: var(--mv-special-detail);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 50%;
    }
    .mv-special-detail__in::before,
    .mv-special-detail__in::after {
        content: "";
        display: block;
        width: calc(73 / 16 * 1rem);
        height: calc(73 / 16 * 1rem);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: calc(54 / 16 * 1rem);
        mask-size: calc(54 / 16 * 1rem);
        background: var(--special-btn-color);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        animation: mv_animation 15s linear infinite;
    }
    .mv-special-detail__in::before {
        content: "";
        display: block;
        -webkit-mask-image: url("../img/top/mv-special-deco-top_sp.svg");
        mask-image: url("../img/top/mv-special-deco-top_sp.svg");
        -webkit-mask-position: top;
        mask-position: top;
    }
    .mv-special-detail__in::after {
        content: "";
        display: block;
        -webkit-mask-image: url("../img/top/mv-special-deco-bottom_sp.svg");
        mask-image: url("../img/top/mv-special-deco-bottom_sp.svg");
        -webkit-mask-position: bottom;
        mask-position: bottom;
    }
    .mv-special-detail-txt {
        color: var(--special-btn-color);
        text-align: center;
        line-height: 0.8;
    }
    .mv-special-detail-txt__label {
        font-size: calc(22 / 2 * 1px);
        font-family: var(--font-family-zenmaru);
        font-weight: bold;
        line-height: 1;
    }
    .mv-special-detail-txt__label--strong {
        font-size: calc(24 / 2 * 1px);
    }
    .mv-special-detail-txt__label--small {
        font-size: calc(20 / 2 * 1px);
        font-family: var(--font-family-quicksand);
        font-weight: 600;
        letter-spacing: 1px;
        position: relative;
        padding-right: calc(8 / 16 * 1rem);
        display: inline-block;
    }
    .mv-special-detail-txt__label--small::after {
        content: "";
        display: block;
        width: calc(6 / 16 * 1rem);
        height: calc(6 / 16 * 1rem);
        background: url("../img/top/mv-special-arrow.svg") no-repeat center / contain;
        position: absolute;
        right: 0;
        top: 0;
        margin-top: calc(2 / 16 * 1rem);
    }
}

/* --------------------------------------------------------------------------
  ARTICLE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .article-section {
    }
    .article-section__in {
    }
    .article-section__body {
    }
    .article-sec__header {
        margin-bottom: min(52px, calc(52 / 1366 * 100vw));
    }
    .article-sec__header .c-header-title {
        position: relative;
    }
    .article-sec__header .c-header-title::before {
        content: "";
        display: block;
        background: url("../img/top/sec-article-ttl_deco.svg") no-repeat center / contain;
        width: min(92px, calc(92 / 1366 * 100vw));
        height: min(63px, calc(63 / 1366 * 100vw));
        position: absolute;
        top: min(3px, calc(3 / 1366 * 100vw));
        left: min(-109px, calc(-109 / 1366 * 100vw));
    }
    .article-sec__header .c-header-title__txt::before {
        background: url("../img/top/sec-article-ttl.svg") no-repeat center / contain;
    }
    .article-section-container {
    }
    .article-section-container__in {
        border-left: min(2px, calc((2 / 1366) * 100vw)) solid var(--black-color);
        border-right: min(2px, calc((2 / 1366) * 100vw)) solid var(--black-color);
        position: relative;
        padding: 0 min(92px, calc(92 / 1366 * 100vw));
    }
    .article-section-container__in::before,
    .article-section-container__in::after {
        position: absolute;
        content: "";
        width: min(1px, calc((1 / 1366) * 100vw));
        height: 100%;
        background-color: black;
        top: 0;
    }
    .article-section-container__in::before {
        margin-left: min(2px, calc((2 / 1366) * 100vw));
        left: 0;
    }

    .article-section-container__in::after {
        margin-right: min(2px, calc((2 / 1366) * 100vw));
        right: 0;
    }
    .article-section-container__body {
    }
    .article-section .recipe-content-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(40 / 16 * 1rem);
    }
    .new-ico-active .recipe-card-img {
        position: relative;
    }
    .new-ico-active .recipe-card-img::before,
    .new-ico-active .recipe-card-img::after {
        display: block;
        position: absolute;
        z-index: 1;
    }
    .new-ico-active .recipe-card-img::before {
        content: "";
        background: var(--pink-color-500);
        width: min(120px, calc(120 / 1366 * 100vw));
        height: min(120px, calc(120 / 1366 * 100vw));
        border-radius: 50%;
        top: 0;
        left: 0;
        transform: translate(-40% , -40%);
    }
    .new-ico-active .recipe-card-img::after {
        content: "NEW";
        color: var(--white-color);
        font-family: var(--font-family-quicksand);
        font-size: min(18px, calc(18 / 1366 * 100vw));
        font-weight: 600;
        letter-spacing: calc(100 / 1000 * 1em);
        top: min(24px, calc(24 / 1366 * 100vw));
        left: min(10px, calc(10 / 1366 * 100vw));
    }
    #moreBtn {
        width: min(260px, calc(260 / 1366 * 100vw));
        margin: min(86px, calc(86 / 1366 * 100vw)) auto 0;
    }
    .article-section .recipe-content-list-item:nth-child(1),
    .article-section .recipe-content-list-item:nth-child(2) {
        width: calc((100% - (40 / 16 * 1rem)) / 2);
    }
    .article-section .recipe-content-list-item:nth-child(1) {
        padding-left: min(77px, calc(77 / 1366 * 100vw));
    }
    .article-section .recipe-content-list-item:nth-child(2) {
        padding-right: min(77px, calc(77 / 1366 * 100vw));
    }
    .article-section .recipe-content-list-item {
        width: calc((100% - (80 / 16 * 1rem)) / 3);
        opacity: 1;
        transition: all .6s ease;
    }
    .article-section .recipe-content-list-item.hidden-item {
        opacity: 0;
    }
}
@media all and (max-width: 767px) {
    .article-section {
    }
    .article-section__in {
    }
    .article-section__body {
    }
    .article-sec__header {
        margin-bottom: calc(28 / 16 * 1rem);
    }
    .article-sec__header .c-header-title {
        position: relative;
    }
    .article-sec__header .c-header-title::before {
        content: "";
        display: block;
        background: url("../img/top/sec-article-ttl_deco_sp.svg") no-repeat center / contain;
        width: calc(88.5 / 16 * 1rem);
        height: calc(42.5 / 16 * 1rem);
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-80px, -10px);
    }
    .article-sec__header .c-header-title__txt {
        padding-top: calc(34.5 / 16 * 1rem);
    }
    .article-sec__header .c-header-title__txt::before {
        background: url("../img/top/sec-article-ttl.svg") no-repeat center / contain;
        width: calc(88.5 / 16 * 1rem);
        height: calc(14.5 / 16 * 1rem);
        transform: translate(-50%, 0);
    }
    .new-ico-active .recipe-card-img::before,
    .new-ico-active .recipe-card-img::after {
        display: block;
        position: absolute;
        z-index: 1;
    }
    .new-ico-active .recipe-card-img::before {
        content: "";
        background: var(--pink-color-500);
        width: calc(60 / 16 * 1rem);
        height: calc(60 / 16 * 1rem);
        border-radius: 50%;
        top: calc(-25 / 16 * 1rem);
        left: calc(-20 / 16 * 1rem);
    }
    .new-ico-active .recipe-card-img::after {
        content: "NEW";
        color: var(--white-color);
        font-family: var(--font-family-quicksand);
        font-size: calc(9 / 16 * 1rem);
        font-weight: 600;
        letter-spacing: calc(100 / 1000 * 1em);
        top: calc(11 / 16 * 1rem);
        left: calc(6 / 16 * 1rem);
    }
    .article-section-container {
    }
    .article-section-container__in {
    }
    .article-section-container__body {
    }
    .article-section .recipe-content-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(24 / 16 * 1rem) calc(10 / 16 * 1rem);
    }
    .article-section .recipe-content-list-item:nth-child(1) {
        width: calc(672 / 16 * 1rem);
        margin-bottom: calc(4 / 16 * 1rem);
    }
    .article-section .recipe-content-list-item {
        width: calc((100% - (10 / 16 * 1rem)) / 2);
        opacity: 1;
        transition: all .6s ease;
    }
    .article-section .recipe-content-list-item.hidden-item {
        opacity: 0;
    }
    .article-section .recipe-card-read-txt__label {
        font-weight: bold;
    }
    #moreBtn {
        width: calc(160 / 16 * 1rem);
        margin: calc(24 / 16 * 1rem) auto 0;
    }
}

/* --------------------------------------------------------------------------
  LABO
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .labo-section {
        background: var(--green-color-200);
    }
    .labo-section__in {
    }
    .labo-section__body {
    }
    .labo-section-container {
    }
    .labo-section-container__in {
    }
    .labo-section-container__body {
        display: flex;
    }
    .labo-read {
        width: min(338px, calc(338 / 1366 * 100vw));
        flex-shrink: 0;
        margin-right: min(28px, calc(28 / 1366 * 100vw));
    }
    .labo-read__in {
    }
    .labo-read__body {
    }
    .labo-sec__header {
        margin-bottom: min(24px, calc(24 / 1366 * 100vw));
    }
    .labo-sec__header .c-header-title {
        position: relative;
        display: block;
        margin-top: min(38px, calc(38 / 1366 * 100vw));
    }
    .labo-sec__header .c-header-title::before {
        content: "";
        display: block;
        background: url("../img/top/sec-labo-ttl_deco.svg") no-repeat center / contain;
        width: min(142px, calc(142 / 1366 * 100vw));
        height: min(70px, calc(70 / 1366 * 100vw));
        position: absolute;
        top: min(-70px, calc(-70 / 1366 * 100vw));
        right: 0;
    }
    .labo-sec__header .c-header-title__txt::before {
        background: url("../img/top/sec-labo-ttl.svg") no-repeat center / contain;
    }
    .labo-read-txt {
        text-align: center;
    }
    .labo-read-txt__label {
        font-size: clamp(12px, -0.078rem + 1.72vw, 16px);
        line-height: 1.4;
    }
    .labo-read-btn {
        display: block;
        width: min(88px, calc(88 / 1366 * 100vw));
        height: min(88px, calc(88 / 1366 * 100vw));
        margin: min(40px, calc(40 / 1366 * 100vw)) auto 0;        
        --btn-bg-color: var(--pink-color-500);
        --btn-border-color: var(--pink-color-500);
        --btn-txt-color: var(--white-color);
    }
    .labo-read-btn:hover {
        --btn-bg-color: var(--white-color);
        --btn-txt-color: var(--btn-border-color);
        --btn-arrow-color: var(--btn-border-color);
    }
    .labo-read-btn__in {
        width: 100%;
        height: 100%;
        background: var(--btn-bg-color);
        border: min(1px, calc(1 / 1366 * 100vw)) solid var(--btn-border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: relative;
        transition: all 0.3s;
    }
    .labo-read-btn__in::before {
        content: "";
        display: block;
        width: calc(30 / 1366 * 100vw);
        height: calc(10 / 1366 * 100vw);
        background: url("../img/common/icon/arrow-sp.svg") no-repeat center / contain;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(70% , -50%);
        transition: all 0.3s;
    }
    .labo-read-btn:hover .labo-read-btn__in::before {
        right: calc(-6 / 1366 * 100vw);
    }
    .labo-read-btn__label {
        color: var(--btn-txt-color);
        font-size: min(18px, calc(18 / 1366 * 100vw));
        font-family: var(--font-family-quicksand);
        line-height: 1;
        transition: all 0.3s;
    }
}
@media all and (max-width: 767px) {
    .labo-section {
        background: var(--green-color-200);
    }
    .labo-section__in {
        padding: calc(88 / 2 * 1px) 0 calc(40 / 2 * 1px);
    }
    .labo-section__body {
    }
    .labo-section-container {
    }
    .labo-section-container__in {
    }
    .labo-section-container__body {
    }
    .labo-read {
        width: 100%;
    }
    .labo-read__in {
    }
    .labo-read__body {
    }
    .labo-sec__header {
        margin-bottom: calc(28 / 16 * 1rem);
    }
    .labo-sec__header .c-header-title {
        position: relative;
    }
    .labo-sec__header .c-header-title::before {
        content: "";
        display: block;
        background: url("../img/top/sec-labo-ttl_deco_sp.svg") no-repeat center / contain;
        width: calc(87.5 / 16 * 1rem);
        height: calc(43 / 16 * 1rem);
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-90px, 0);
    }
    .labo-sec__header .c-header-title__txt {
        padding-top: calc(34 / 16 * 1rem);
    }
    .labo-sec__header .c-header-title__txt::before {
        background: url("../img/top/sec-labo-ttl.svg") no-repeat center / contain;
        width: calc(61.5 / 16 * 1rem);
        height: calc(14 / 16 * 1rem);
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .labo-read-txt {
        text-align: center;
        margin-top: calc(22 / 16 * 1rem);
        margin-bottom: calc(20 / 16 * 1rem);
    }
    .labo-read-txt__label {
        font-size: calc(24 / 2 * 1px);
        line-height: calc(33 / 24);
    }
    .labo-read-btn {
        display: block;
        width: calc(50 / 16 * 1rem);
        height: calc(50 / 16 * 1rem);
        margin-right: calc(11 / 16 * 1rem);
        margin-left: auto;
        margin-top: calc(20 / 16 * 1rem);
    }
    .labo-read-btn__in {
        width: 100%;
        height: 100%;
        background: var(--pink-color-500);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: relative;
    }
    .labo-read-btn__in::before {
        content: "";
        display: block;
        width: calc(34 / 2 * 1px);
        height: calc(34 / 2 * 1px);
        background: url("../img/common/icon/arrow-sp.svg") no-repeat center / contain;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(50% , -50%);
    }
    .labo-read-btn__label {
        color: var(--white-color);
        font-size: calc(20 / 2 * 1px);
        font-family: var(--font-family-quicksand);
        line-height: 1;
    }
    .labo-section-container__body .recipe-content-list {
        flex-direction: column;
    }
    .labo-section-container__body .recipe-card__body {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    .labo-section-container__body  .c-img__label{

    }
    .labo-section-container__body .recipe-card-read {
        margin-left: calc(32 / 2 * 1px);
    }
    .labo-section-container__body .recipe-card-read-tags {
        margin-left: calc(30 / 2 * 1px);
    }
    .labo-section-container__body .recipe-content-list-item:not(:last-child) {
        border-bottom: calc(2 / 2 * 1px) solid var(--black-color);
        padding-bottom: calc(40 / 2 * 1px);
    }
    .recipe-card-contents {
        display: block;
        width: 100%;
    }
    .labo-section .recipe-card__in {
        display: flex;
        position: relative;
    }
    .labo-section .recipe-card__in::before {
        content: "";
        display: block;
        width: calc(280 / 2 * 1px);
        height: calc(280 / 2 * 1px);
        flex-shrink: 0;
    }
    .labo-section .recipe-card-img {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(240 / 2 * 1px);
        height: calc(240 / 2 * 1px);
    }
    .labo-section .recipe-card-read-txt {
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
  RANKING
-------------------------------------------------------------------------- */
@keyframes ranking_animation {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
@media all and (min-width: 768px), print {
    .ranking-section {
        background: var(--blue-color-100);
        padding: min(38px, calc(38 / 1366 * 100vw)) min(40px, calc(40 / 1366 * 100vw));
    }
    .ranking-section__in {
        background: var(--white-color);
        max-width: 1288px;
        padding: 0 min(52px, calc(52 / 1366 * 100vw));
    }
    .ranking-section__body {
    }
    .ranking-sec__header {
        margin-bottom: min(54px, calc(54 / 1366 * 100vw));
    }
    .ranking-sec__header .c-header-title {
        position: relative;
    }
    .ranking-sec__header .c-header-title::before {
        content: "";
        display: block;
        width: min(98px, calc(98 / 1366 * 100vw));
        height: min(67px, calc(67 / 1366 * 100vw));
        background: url("../img/top/sec-ranking-ttl_deco.svg") no-repeat center / contain;
        position: absolute;
        top: 0;
        left: min(-97px, calc(-97 / 1366 * 100vw));
    }
    .ranking-sec__header .c-header-title__txt {
        padding-top: min(54px, calc(54 / 1366 * 100vw));
    }
    .ranking-sec__header .c-header-title__txt::before {
        background: url("../img/top/sec-ranking-ttl.svg") no-repeat center / contain;
        width: min(66px, calc(66 / 1366 * 100vw));
        height: min(16px, calc(16 / 1366 * 100vw));
    }
    .ranking-section-container {
    }
    .ranking-section-container__in {
    }
    .ranking-section-container__body {
    }
    .ranking-section .recipe-content-list {
        gap: calc(39 / 16 * 1rem);
    }
    .ranking-section .recipe-card__body {
        position: relative;
    }
    .ranking-section .recipe-card__body::before {
        content: "";
        display: block;
        background: url("../img/page/common/rank_circle.svg") no-repeat center / contain;
        width: min(56px, calc(56 / 1366 * 100vw));
        height: min(56px, calc(56 / 1366 * 100vw));
        position: absolute;
        top: min(-19px, calc(-19 / 1366 * 100vw));
        left: min(-19px, calc(-19 / 1366 * 100vw));
        transform-origin: center;
        z-index: 1;
        animation: ranking_animation 13s linear infinite;
    }
    .ranking-section .recipe-card__body::after {
        font-size: min(27px, calc(27 / 1366 * 100vw));;
        font-family: var(--font-family-quicksand);
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(56px, calc(56 / 1366 * 100vw));
        height: min(56px, calc(56 / 1366 * 100vw));
        position: absolute;
        top: min(-19px, calc(-19 / 1366 * 100vw));
        left: min(-19px, calc(-19 / 1366 * 100vw));
        z-index: 1;
    }
    .ranking-section .recipe-content-list-item:nth-child(1) .recipe-card__body::after {
        content: "1";
    }
    .ranking-section .recipe-content-list-item:nth-child(2) .recipe-card__body::after {
        content: "2";
    }
    .ranking-section .recipe-content-list-item:nth-child(3) .recipe-card__body::after {
        content: "3";
    }
}
@media all and (max-width: 767px) {
    .ranking-section {
        background: var(--blue-color-100);
        padding: calc(20 / 16 * 1rem);
    }
    .ranking-section__in {
        background: var(--white-color);
    }
    .ranking-section__body {
        padding: 0;
    }
    .ranking-sec__header {
        margin-bottom: calc(26 / 2 * 1px);
    }
    .ranking-sec__header .c-header-title {
        position: relative;
    }
    .ranking-sec__header .c-header-title::before {
        content: "";
        display: block;
        width: calc(124 / 2 * 1px);
        height: calc(85 / 2 * 1px);
        background: url("../img/top/sec-ranking-ttl_deco_sp.svg") no-repeat center / contain;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-60px, -5px);
    }
    .ranking-sec__header .c-header-title__txt {
        padding-top: calc(52 / 2 * 1px);
    }
    .ranking-sec__header .c-header-title__txt::before {
        background: url("../img/top/sec-ranking-ttl.svg") no-repeat center / contain;
        width: calc(40 / 16 * 1rem);
        height: calc(10 / 16 * 1rem);
        transform: translate(-50%, 0);
    }
    .ranking-section-container {

    }
    .ranking-section-container__in {

    }
    .ranking-section-container__body {

    }
    .ranking-section .recipe-content-list {

    }
    .ranking-section .recipe-card__body {
        padding-top: calc(9 / 375 * 100vw);
        position: relative;
    }
    .ranking-section .recipe-card__body::before {
        content: "";
        display: block;
        background: url("../img/page/common/rank_circle.svg") no-repeat center / contain;
        width: calc(36 / 375 * 100vw);
        height: calc(36 / 375 * 100vw);
        position: absolute;
        top: 0;
        left: calc(-9 / 375 * 100vw);
        transform-origin: center;
        z-index: 1;
        animation: ranking_animation 13s linear infinite;
    }
    .ranking-section .recipe-card__body::after {
        font-size: calc(17 / 375 * 100vw);
        font-family: var(--font-family-quicksand);
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(36 / 375 * 100vw);
        height: calc(36 / 375 * 100vw);
        position: absolute;
        top: 0;
        left: calc(-9 / 375 * 100vw);
        z-index: 1;
    }
    .ranking-section .swiper {
        /* padding-left: calc(38 / 375 * 100vw); */
        padding-left: 0;
    }
    .ranking-section .recipe-content-list {
        /* gap: calc(20 / 375 * 100vw); */
        gap: 0;
    }
    .ranking-section .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: start;
    }
    .ranking-section .recipe-card {
        width: calc(260 / 375 * 100vw);
    }
    .ranking-section .swiper-button-wrapper {
        margin-right: auto;
        margin-left: auto;
    }
    .ranking-section .recipe-content-list-item:nth-child(1) .recipe-card__body::after {
        content: "1";
    }
    .ranking-section .recipe-content-list-item:nth-child(2) .recipe-card__body::after {
        content: "2";
    }
    .ranking-section .recipe-content-list-item:nth-child(3) .recipe-card__body::after {
        content: "3";
    }
}

/* --------------------------------------------------------------------------
  TAGS
-------------------------------------------------------------------------- */

main {
}

.section.tags {
    background-color: var(--pink-color-200);
    padding: min(70px, calc((70 / 1366) * 100vw)) 0;
}

.tags-content {
    border-left: min(2px, calc((2 / 1366) * 100vw)) solid var(--black-color);
    border-right: min(2px, calc((2 / 1366) * 100vw)) solid var(--black-color);
    margin: 0 min(90px, calc((90 / 1366) * 100vw));
    position: relative;
}

.tags-content::before {
    position: absolute;
    content: "";
    width: min(1px, calc((1 / 1366) * 100vw));
    height: 100%;
    background-color: black;
    margin-left: min(2px, calc((2 / 1366) * 100vw));
    top: 0;
    left: 0;
}

.tags-content::after {
    position: absolute;
    content: "";
    width: min(1px, calc((1 / 1366) * 100vw));
    height: 100%;
    background-color: black;
    margin-right: min(2px, calc((2 / 1366) * 100vw));
    top: 0;
    right: 0;
}

.tags-content__in {
    padding: min(30px, calc((30 / 1366) * 100vw)) 0;
    position: relative;
}

.tags-content__in::before {
    content: "";
    position: absolute;
    background-image: url("../img/top/tags_featured.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: min(100px, calc((100 / 1366) * 100vw));
    height: min(40px, calc((40 / 1366) * 100vw));
    left: 50%;
    transform: translateX(-50%);
}

.tags-header {
    position: relative;
    text-align: center;
}

.tags-header__title::before {
    content: "";
    position: absolute;
    background-image: url("../img/top/tags_check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: min(140px, calc((140 / 1366) * 100vw));
    height: min(60px, calc((60 / 1366) * 100vw));
    left: 0;
    top: 0;
    transform: translate(min(330px, calc((330 / 1366) * 100vw)), min(-54px, calc((-54 / 1366) * 100vw)));
}

.tags-header__title {
    position: relative;
    font-family: var(--font-family-zenmaru);
    font-size: clamp(1.75rem, 1.589rem + 0.33vw, 1.875rem);
    font-weight: var(--txt-bold);
    margin-top: min(60px, calc((60 / 1366) * 100vw));
}

.tags-body {
    margin-top: min(56px, calc((56 / 1366) * 100vw));
    padding: 0 min(8px, calc((8 / 1366) * 100vw));
}

.tags-list {
    display: flex;
    justify-content: center;
    gap: min(12px, calc((12 / 1366) * 100vw)) min(6px, calc((6 / 1366) * 100vw));
    max-width: min(753px, calc((720 / 1366) * 100vw));
    margin: 0 auto;
    flex-wrap: wrap;
}

.tags__item {
    border: 1px solid var(--black-color);
    background-color: var(--white-color);
    border-radius: 9999px;
    padding: min(8px, calc((8 / 1366) * 100vw)) min(14px, calc((14 / 1366) * 100vw));
    transition: all .3s ease;
}
.tags__item:hover {
    opacity: 0.7;
    transition: all .3s ease;
}

.tags__item__txt {
    font-size: clamp(1rem, 0.839rem + 0.33vw, 1.125rem);
    font-family: var(--font-family-zenkaku);
    display: flex;
    align-items: center;
}

@media all and (max-width: 767px), print {
    main {
        padding-top: 0;
    }

    .section.tags {
        padding: 0;
    }

    .tags-content {
        border: none;
        margin: 0;
    }

    .tags-content::before {
        display: none;
    }

    .tags-content::after {
        display: none;
    }

    .tags-content__in {
        padding: calc(88 / 2 * 1px) 0;
    }

    .tags-content__in::before {
        background-image: url("../img/top/tags_featured_sp.svg");
        width: calc(102 / 2 * 1px);
        height: calc(25 / 2 * 1px);
    }

    .tags-header__title {
        display: inline-block;
        font-family: var(--font-family-zenmaru);
        font-size: calc(36 / 2 * 1px);
        font-weight: var(--txt-bold);
        padding-top: calc(40 / 2 * 1px);
    }

    .tags-header__title::before {
        background-image: url("../img/top/tags_check_sp.svg");
        width: calc(164 / 2 * 1px);
        height: calc(68 / 2 * 1px);
        top: 0;
        left: 0;
        transform: translate(-75px, -20px);
    }

    .tags-body {
        margin-top: calc(56 / 2 * 1px);
        padding: 0 calc(40 / 2 * 1px);
    }

    .tags-list {
        gap: calc(12 / 2 * 1px) calc(6 / 2 * 1px);
        max-width: 100%;
    }

    .tags__item {
        padding: calc(15 / 2 * 1px) calc(25 / 2 * 1px);
    }

    .tags__item__txt {
        font-size: calc(26 / 2 * 1px);
        line-height: calc(21 / 26);
        font-family: var(--font-family-zenkaku);
    }
}