@charset "UTF-8";

:root {
    --white-color: #fff;
    --black-color: #000;
    --blue-color-100: #daf7fb;
    --blue-color-300: #69dbf0;
    --pink-color-100: #fde9e5;
    --pink-color-200: #fff1ee;
    --pink-color-300: #ffefe3;
    --pink-color-400: #ff7070;
    --pink-color-500: #ff7454;
    --green-color-500: #82d1b1;
    --green-color-200: #dbfaee;
    --green-color-100: #e9f9ea;
    --orange-color-100: #fae2d0;
    --orange-color-200: #ff775c;
    --orange-color-500: #dd561b;

    --font-family-quicksand: 'Quicksand', sans-serif;
    --font-family-zenmaru: 'Zen Maru Gothic', sans-serif;
    --font-family-zenkaku: 'Zen Kaku Gothic New', sans-serif;

    --txt-bold: 700;

    --lp-content-size: 1366px;
}
body {
    font-family: Zen Kaku Gothic New;
    font-weight: 500;
    overflow-x: hidden;
  }

.section__in {
    max-width: var(--lp-content-size);
    margin: 0 auto;
}
/* --------------------------------------------------------------------------
  img
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .c-img {
    }
    .c-img__label {
      width: 100%;
    }
  }
  @media all and (max-width: 767px) {
    .c-img {
    }
    .c-img__label {
      width: 100%;
    }
  }

  /* --------------------------------------------------------------------------
  svg
-------------------------------------------------------------------------- */
.c-svg {
    position: relative;
    display: block;
    width: 100%;
  }
  .c-svg::before {
    display: block;
    padding-top: 100%;
    content: '';
  }
  .c-svg > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* --------------------------------------------------------------------------
  btn
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .c-btn {
      --btn-bg-color: var(--pink-color-500);
      --btn-border-color: var(--pink-color-500);
      --btn-txt-color: var(--white-color);
      --btn-txt-font-size: 16;
      --btn-radius: 9999;
      --btn-px: 56;
      display: block;
    }
    .c-btn--green.c-btn {
        --btn-bg-color: var(--green-color-500);
        --btn-border-color: var(--green-color-500);
    }
    a.c-btn:hover {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    .c-btn__in {
      background: var(--btn-bg-color);
      border-radius: calc(var(--btn-radius) / 1366 * 100vw);
      border: min(1px, calc(1 / 1366 * 100vw)) solid var(--btn-border-color);
      height: 100%;
      transition: all 0.3s;
    }
    .c-btn__body {
      position: relative;
      min-height: min(64px, calc(64 / 1366 * 100vw));
      display: flex;
      justify-content: center;
      align-items: center;
      padding: calc(8 / 1366 * 100vw) calc(var(--btn-px) / 1366 * 100vw);
    }
    .c-btn-txt {
      color: var(--btn-txt-color);
      text-align: center;
      width: 100%;
      transition: all 0.3s;
    }
    .c-btn-txt__label {
      font-size: clamp(12px, 0.047rem + 1.72vw, 16px);
      font-weight: bold;
      line-height: 1.5;
      font-family: var(--font-family-quicksand);
    }
    .c-btn-arrow {
      position: absolute;
      top: 50%;
      right: calc(-20 / 1366 * 100vw);
      transform: translateY(-50%);
      width: calc(34 / 1366 * 100vw);
      height: calc(64 / 1366 * 100vw);
      transition: all .3s ease;
    }
    .c-btn .c-btn-arrow:hover {
        right: calc(-28 / 1366 * 100vw);
        transition: all .3s ease;
    }
    .c-btn-arrow--back .c-btn-arrow {
        right: auto;
        left: calc(-20 / 1366 * 100vw);
    }
    .c-btn-arrow--back:hover .c-btn-arrow {
        left: calc(-28 / 1366 * 100vw);
    }
    .c-btn-arrow__label {
      display: flex;
      align-items: center;
      height: 100%;
    }

    /* square */
    .c-btn--square {
      --btn-radius: 8;
    }

    /* fontsize */
    .c-btn--xl {
      --btn-txt-font-size: 20;
    }
    .c-btn--l {
      --btn-txt-font-size: 18;
    }
    .c-btn--m {
      --btn-txt-font-size: 16;
    }
    .c-btn--s {
      --btn-txt-font-size: 13;
    }
    .c-btn--xs {
      --btn-txt-font-size: 12;
    }

    /* color */
    .c-btn--stroke {
      --btn-bg-color: var(--white-color);
      --btn-txt-color: var(--btn-border-color);
      --btn-arrow-color: var(--btn-border-color);
    }
    a.c-btn--stroke:hover {
      --btn-bg-color: var(--btn-border-color);
      --btn-txt-color: var(--white-color);
      --btn-arrow-color: var(--white-color);
    }
    .c-btn-arrow__label {
        transition: all 0.3s;
      }
      .c-btn-arrow__label::before {
        content: "";
        display: block;
        width: min(34px, calc((34 / 1366) * 100vw));
        height: min(10px, calc((10 / 1366) * 100vw));
        background: url("../img/common/icon/arrow.svg") no-repeat center / contain;
      }
      /* back */
      .c-btn-arrow--back .c-btn-arrow__label {
        transform: scale(-1, 1);
      }
  }

  @media all and (max-width: 767px) {
    .c-btn {
        --btn-bg-color: var(--pink-color-500);
        --btn-border-color: var(--pink-color-500);
        --btn-txt-color: var(--white-color);
        --btn-radius: 9999;
        --btn-px: 36;
        display: block;
      }
      .c-btn--green.c-btn {
        --btn-bg-color: var(--green-color-500);
        --btn-border-color: var(--green-color-500);
    }
      .c-btn__in {
        background: var(--btn-bg-color);
        border-radius: calc(var(--btn-radius) / 16 * 1rem);
        border: calc(1 / 16 * 1rem) solid var(--btn-border-color);
        height: 100%;
        transition: all 0.3s;
      }
      .c-btn__body {
        position: relative;
        min-height: calc(80 / 2 * 1px);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: calc(20 / 2 * 1px) calc(var(--btn-px) / 2 * 1px);
      }
      .c-btn-txt {
        color: var(--btn-txt-color);
        text-align: center;
        width: 100%;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .c-btn-txt__label {
        font-size: calc(24 / 2 * 1px);
        font-family: var(--font-family-quicksand);
      }
      .c-btn-arrow {
        position: absolute;
        top: 50%;
        right: calc(20 / 2 * 1px);
        transform: translateY(-50%);
        width: calc(34 / 2 * 1px);
        height: calc(80 / 2 * 1px);
      }
      .c-btn-arrow--back .c-btn-arrow {
        right: auto;
        left: calc(-20 / 2 * 1px);
    }
    /* fontsize */
    .c-btn--xl {
        --btn-txt-font-size: 40;
      }
      .c-btn--l {
        --btn-txt-font-size: 36;
      }
      .c-btn--m {
        --btn-txt-font-size: 32;
      }
      .c-btn--s {
        --btn-txt-font-size: 26;
      }
      .c-btn--xs {
        --btn-txt-font-size: 24;
      }
      .c-btn-arrow__label {
        display: flex;
      align-items: center;
      height: 100%;
      }
      .c-btn-arrow__label::before {
        content: "";
        display: block;
        width: calc(34 / 2 * 1px);
        height: calc(12 / 2 * 1px);
        background: url("../img/common/icon/arrow-sp.svg") no-repeat center / contain;
      }
      /* back */
      .c-btn-arrow--back .c-btn-arrow__label {
        transform: scale(-1, 1);
      }
}

/* --------------------------------------------------------------------------
  SECTION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .l-section {
    }
    .l-section__in {
        max-width: 1226px;
        margin: 0 auto;
        padding: 0 calc(20 / 16 * 1rem);
    }
    .l-section__body {
        padding: min(100px, calc(100 / 1366 * 100vw)) 0;
    }
    .l-section-container {
    }
    .l-section-container__in {
    }
    .l-section-container__body {
    }
    .l-sec__header {
        text-align: center;
    }
    .c-header-title {
        text-align: center;
        display: inline-block;
    }
    .c-header-title__in {
    }
    .c-header-title__txt {
        font-size: clamp(2.25rem, 2.089rem + 0.33vw, 2.375rem);
        font-family: var(--font-family-zenmaru);
        font-weight: bold;
        position: relative;
        padding-top: min(58px, calc(58 / 1366 * 100vw));
        display: block;
    }
    .c-header-title__txt::before {
        content: "";
        display: block;
        position: absolute;
        background: #000;
        width: min(100px, calc(100 / 1366 * 100vw));
        height: min(23px, calc(23 / 1366 * 100vw));
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media all and (max-width: 767px) {
    .l-section {
    }
    .l-section__in {
        max-width: 1226px;
        margin: 0 auto;
        padding: calc(44 / 16 * 1rem) 0 calc(44 / 16 * 1rem);
    }
    .l-section__body {
        padding: 0 calc(20 / 16 * 1rem);
    }
    .l-section-container {
    }
    .l-section-container__in {
    }
    .l-section-container__body {
    }
    .l-sec__header {
        text-align: center;
    }
    .c-header-title {
        text-align: center;
        display: inline-block;
    }
    .c-header-title__in {
    }
    .c-header-title__txt {
        font-size: calc(48 / 2 * 1px);
        font-family: var(--font-family-zenmaru);
        font-weight: bold;
        position: relative;
        padding-top: calc(20 / 16 * 1rem);
        display: block;
    }
    .c-header-title__txt::before {
        content: "";
        display: block;
        position: absolute;
        background: #000;
        width: min(100px, calc(100 / 1366 * 100vw));
        height: min(23px, calc(23 / 1366 * 100vw));
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --------------------------------------------------------------------------
  RECIPE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .recipe-content {
    }
    .recipe-content-list {
        display: flex;
        gap: calc(20 / 16 * 1rem);
    }
    .recipe-content-list-item {
        width: calc((100% - (20 / 16 * 1rem)) / 3);
    }
    .recipe-card {
    }
    .recipe-card__in {
    }
    .recipe-card__body {
    }
    .recipe-card-img {
        position: relative;
        overflow: hidden;
        border-radius: calc(24 / 16 * 1rem);
    }
    .recipe-card .recipe-card-img {
    }
    .recipe-card-contents .recipe-card-img .c-img {
        transition: all .3s ease;
    }
    .recipe-card-contents:hover .recipe-card-img .c-img {
        transform: scale(1.1);
        transition: all .3s ease;
    }
    .recipe-card-category {
        display: inline-block;
        position: absolute;
        bottom: calc(16 / 16 * 1rem);
        left: calc(16 / 16 * 1rem);
    }
    .recipe-card-category__in {
        background: var(--white-color);
        padding: calc(6 / 16 * 1rem) calc(16 / 16 * 1rem);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding-left: calc(35 / 16 * 1rem);
    }
    .recipe-card-category__in::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        z-index: 1;
        width: calc(32 / 16 * 1rem);
        height: calc(32 / 16 * 1rem);
        left: calc(-2 / 16 * 1rem);
    }
    .recipe-card-category__in::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        background: var(--white-color);
        width: calc(32 / 16 * 1rem);
        height: calc(32 / 16 * 1rem);
        border-radius: 50%;
        left: calc(-2 / 16 * 1rem);
    }
    .recipe-card-category--labo .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_labo.svg") no-repeat center / calc(16 / 16 * 1rem);
    }
    .recipe-card-category--recipe .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_recipe.svg") no-repeat center / calc(18 / 16 * 1rem);
    }
    .recipe-card-category--beauty .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_health.svg") no-repeat center / calc(15 / 16 * 1rem);
    }
    .recipe-card-category--lifestyle .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_life.svg") no-repeat center / calc(18 / 16 * 1rem);
    }
    .recipe-card-category__label {
        font-size: calc(12 / 16 * 1rem);
        line-height: calc(14 / 12);
        margin-bottom: calc(-1 / 16 * 1rem);
        font-family: var(--font-family-quicksand);
    }
    .recipe-card-category--labo .recipe-card-category__label::before {
        content: "LABO";
    }
    .recipe-card-category--recipe .recipe-card-category__label::before {
        content: "RECIPE";
    }
    .recipe-card-category--beauty .recipe-card-category__label::before {
        content: "HEALTH&BEAUTY";
    }
    .recipe-card-category--lifestyle .recipe-card-category__label::before {
        content: "LIFESTYLE";
    }
    .recipe-card-read {
    }
    .recipe-card-read-txt {
        margin-top: calc(20 / 16 * 1rem);
    }
    .recipe-card-read-txt__label {
        font-size: calc(22 / 16 * 1rem);
        font-family: var(--font-family-zenmaru);
        line-height: calc(35 / 22);
        font-weight: bold;
    }
    .recipe-card-read-date {
        margin-top: calc(6 / 16 * 1rem);
    }
    .recipe-card-read-date_label {
        font-size: calc(14 / 16 * 1rem);
        font-family: var(--font-family-quicksand);
        line-height: 1;
    }
    .recipe-card-read-tags {
        margin-top: calc(16 / 16 * 1rem);
    }
    .recipe-card-read-tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(4 / 16 * 1rem);
    }
    .recipe-card-read-tags-list-item {
    }
    .recipe-card-read-tag {
        display: inline-block;
        transition: all .3s ease;
    }
    .recipe-card-read-tag:hover {
        opacity: 0.7;
        transition: all .3s ease;
    }
    .recipe-card-read-tag__in {
        background: var(--white-color);
        border: var(--black-color) solid 1px;
        padding: calc(7 / 16 * 1rem) calc(15 / 16 * 1rem);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .recipe-card-read-tag__label {
        font-size: calc(14 / 16 * 1rem);
        line-height: 1;
        display: flex;
    }
    .recipe-card-read-tag__label::before {
        content: "#";
    }
}
@media all and (max-width: 767px) {
    .recipe-content {
    }
    .recipe-content-list {
        display: flex;
        gap: calc(20 / 16 * 1rem);
    }
    .recipe-content-list-item {
        width: 100%;
    }
    .recipe-card {
    }
    .recipe-card__in {
    }
    .recipe-card__body {
    }
    .recipe-card-img {
        position: relative;
        overflow: hidden;
        border-radius: calc(12 / 16 * 1rem);
    }
    .recipe-card .recipe-card-img {
    }
    .recipe-card-category {
        display: inline-block;
        position: absolute;
        bottom: calc(16 / 2 * 1px);
        left: calc(16 / 2 * 1px);
    }
    .recipe-card-category__in {
        background: var(--white-color);
        padding: calc(12 / 2 * 1px) calc(16 / 2 * 1px) calc(12 / 2 * 1px) calc(45.79 / 2 * 1px);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .recipe-card-category__in::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        z-index: 1;
        width: calc(60 / 2 * 1px);
        height: calc(60 / 2 * 1px);
        left: calc(-12 / 2 * 1px);
        top: calc(-16 / 2 * 1px);
    }
    .recipe-card-category__in::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        background: var(--white-color);
        width: calc(45.79 / 2 * 1px);
        height: calc(45.79 / 2 * 1px);
        border-radius: 50%;
        left: calc(-4 / 2 * 1px);
    }
    .recipe-card-category--labo .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_labo.svg") no-repeat center / calc(24 / 2 * 1px);
    }
    .recipe-card-category--recipe .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_recipe.svg") no-repeat center / calc(24 / 2 * 1px);
    }
    .recipe-card-category--beauty .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_health.svg") no-repeat center / calc(24 / 2 * 1px);
    }
    .recipe-card-category--lifestyle .recipe-card-category__in::before {
        background: url("../img/common/icon/ico_life.svg") no-repeat center / calc(23 / 2 * 1px);
    }
    .recipe-card-category__label {
        font-size: calc(16 / 2 * 1px);
        line-height: calc(14 / 16);
        margin-bottom: -1px;
        font-family: var(--font-family-quicksand);
    }
    .recipe-card-category--labo .recipe-card-category__label::before {
        content: "LABO";
    }
    .recipe-card-category--recipe .recipe-card-category__label::before {
        content: "RECIPE";
    }
    .recipe-card-category--beauty .recipe-card-category__label::before {
        content: "HEALTH&BEAUTY";
    }
    .recipe-card-category--lifestyle .recipe-card-category__label::before {
        content: "LIFESTYLE";
    }
    .recipe-card-read {
        margin-top: calc(26 / 2 * 1px);
    }
    .recipe-card-read-txt {
    }
    .recipe-card-read-txt__label {
        font-size: calc(32 / 2 * 1px);
        font-family: var(--font-family-zenmaru);
        line-height: calc(51 / 32);
        font-weight: bold;
    }
    .recipe-card-read-date {
        margin-top: calc(4 / 2 * 1px);
    }
    .recipe-card-read-date_label {
        font-size: calc(20 / 2 * 1px);
        line-height: calc(14 / 21);
        font-family: var(--font-family-quicksand);
    }
    .recipe-card-read-tags {
        margin-top: calc(18 / 2 * 1px);
    }
    .recipe-card-read-tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: calc(6 / 2 * 1px);
    }
    .recipe-card-read-tags-list-item {
    }
    .recipe-card-read-tag {
        display: inline-block;
    }
    .recipe-card-read-tag__in {
        background: var(--white-color);
        border: var(--black-color) solid 1px;
        padding: calc(12 / 2 * 1px) calc(17 / 2 * 1px);
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .recipe-card-read-tag__label {
        font-size: calc(20 / 2 * 1px);
        line-height: calc(14 / 20);
        display: flex;
    }
    .recipe-card-read-tag__label::before {
        content: "#";
    }
}

/* --------------------------------------------------------------------------
  HEADER
-------------------------------------------------------------------------- */
.c-header {
    width: 100%;
    background-color: var(--white-color);
    position: sticky;
    top: 0;
    z-index: 10;
}
.c-header__body__in {
    width: 100%;
    margin: 0 auto;
    max-width: var(--lp-content-size);
    height: min(80px, calc((80 / 1366) * 100vw));
    display: flex;
    align-items: center;
}
.c-header-logo {
    width: min(118px, calc((118 / 1366) * 100vw));
    margin-left: min(24px, calc((24 / 1366) * 100vw));
}
.c-header-logo img{
    width: 100%;
    object-fit: contain;
}
.c-header__menu {
    width: 100%;
}
.c-header__menu__in {
    display: flex;
    justify-content: end;
}
.c-header__nav {
    margin-left: auto;
    padding: 0 min(24px, calc((24 / 1366) * 100vw));
    min-width: min(680px, calc((680 / 1366) * 100vw));
}
.c-header__nav__body {
    display: flex;
    justify-content: space-between;
}
.c-header-nav__item {
    margin-top: min(5px, calc((5 / 1366) * 100vw));
    padding-right: min(8px, calc((8 / 1366) * 100vw));
    --header-item-hover: var(--green-color-500);
}
.c-header-nav__item:hover .c-header-nav__btn__box .c-header-nav-btn__txt{
    transition: all .3s ease;
    color: var(--header-item-hover);
}
.c-header-nav__item .c-header-nav__btn__box .c-header-nav-btn__txt{
    transition: all .3s ease;
}
.c-header-nav__item:hover .c-header-nav__btn__box .c-header-nav-btn__ico{
    transition: all .3s ease;
    filter: invert(76%) sepia(16%) saturate(715%) hue-rotate(104deg) brightness(97%) contrast(91%);
}
.c-header-nav__item .c-header-nav__btn__box .c-header-nav-btn__ico{
    transition: all .3s ease;
}
.c-header-nav__item--recipe {
}
.c-header-nav__item--labo {
}
.c-header-nav__item--lifestyle {
}
.c-header-nav__item--health {
}
.c-header-nav__item--recipe .c-header-nav__btn__box .c-header-nav-btn__ico {
    width: min(26px, calc((20 / 1366) * 100vw));
    height: min(25px, calc((20 / 1366) * 100vw));
}
.c-header-nav__item--labo .c-header-nav__btn__box .c-header-nav-btn__ico{
    width: min(20px, calc((20 / 1366) * 100vw));
    height: min(19px, calc((20 / 1366) * 100vw));
}
.c-header-nav__item--lifestyle .c-header-nav__btn__box .c-header-nav-btn__ico {
    width: min(22px, calc((20 / 1366) * 100vw));
    height: min(18px, calc((20 / 1366) * 100vw));
}
.c-header-nav__item--health .c-header-nav__btn__box .c-header-nav-btn__ico {
    width: min(18px, calc((20 / 1366) * 100vw));
    height: min(16px, calc((20 / 1366) * 100vw));
}
.c-header-nav__btn__box {
    display: flex;
    align-items: center;
}
.c-header-nav__btn__box .c-header-nav-btn__ico {
    width: min(20px, calc((20 / 1366) * 100vw));
    height: min(20px, calc((20 / 1366) * 100vw));
    margin-right: min(10px, calc((10 / 1366) * 100vw));
}
.c-header-nav__btn__box .c-header-nav-btn__txt {
    font-family: var(--font-family-quicksand);
    font-size: clamp(12px, 0.653rem + 0.46vw, 16px);
}
.c-header__sns {
    padding: 0 min(24px, calc((24 / 1366) * 100vw));
}
.c-header__sns__body {
    display: flex;
    align-items: center;
    gap: min(16px, calc((16 / 1366) * 100vw));
}
.c-header-sns__item {
    transition: all 0.3s ease;
}
.c-header-sns__item:hover {
    opacity: 0.7;
    transition: all 0.3s ease;
}
.c-header-sns__item--x .c-header-sns__btn__box .c-header-sns-btn__ico {
    width: min(18px, calc((18 / 1366) * 100vw));
    height: min(19px, calc((19 / 1366) * 100vw));
}
.c-header-sns__btn__box .c-header-sns-btn__ico {
    width: min(24px, calc((24 / 1366) * 100vw));
    height: min(24px, calc((24 / 1366) * 100vw));
}
@media all and (max-width: 767px), print {
    .c-header__body__in {
        width: 100%;
        height: 100%;
        padding: 20px 10px;
        background-color: var(--blue-color-100);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
    .c-header__title {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        grid-column: 2 / 3;
    }
    .c-header-sub {
        text-align: center;
        font-family: var(--font-family-zenmaru);
        font-size: 12px;
        font-weight: var(--txt-bold);
        line-height: 1.6;
    }
    .c-header-logo {
        margin: 14.5px auto auto;
        width: 230px;
    }
    .c-header-logo img{
        width: 100%;
        object-fit: contain;
    }
    .c-hamb-btn {
        grid-column: 3 / 4;
        background-image: url("../img/common/icon/hamburger-menu.svg");
        background-size: contain;
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
        align-self: flex-start;
        justify-self: end;
        position: relative;
    }
    .c-hamb-btn_threeline {
      width: 14px;
      height: 12px;
      position: absolute;
      top: 16px;
      left: 16px;
    }
}
@media all and (max-width: 767px), print {
    /* SPヘッダー */
    .c-header__body__in.page-header {
        width: 100%;
        height: 100%;
        min-height: 65px;
        background-color: var(--white-color);
        display: flex;
        justify-content: space-between;
        padding: 0;
    }

    .c-header__body__in.page-header .c-header__title {
        display: block;
    }

    .c-header__body__in.page-header .c-header-sub {
        display: none;
    }

    .c-header__body__in.page-header .c-header-logo {
        margin: 0 0 0 18px;
        width: 100px;
    }

    .c-header__body__in.page-header .c-header-logo img{
        width: 100%;
        object-fit: contain;
    }

    .c-header__body__in.page-header .c-hamb-btn {
        background-image: url("../img/common/icon/hamburger-menu.svg");
        background-size: contain;
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
        margin: 12px 10px 0 0;
    }
  }

/* --------------------------------------------------------------------------
  FOOTER
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
    .c-footer {
        width: 100%;
    }
    .c-footer__top {
        width: 100%;
        min-height: min(255px, calc((255 / 1366) * 100vw));
        background-color: var(--white-color);
    }
    .c-footer__top__in {
        width: 100%;
        max-width: var(--lp-content-size);
        margin: 0 auto;
    }
    .c-footer__top__body {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: calc(var(--lp-content-size) - 460px);
        margin: 0 auto;
        padding: min(56px, calc((56 / 1366) * 100vw)) 0;
    }
    .c-footer__logo-area {
        padding: 0 min(20px, calc((20 / 1366) * 100vw));
    }
    .c-footer__sub {
        text-align: center;
        font-family: var(--font-family-zenmaru);
        font-size: clamp(16px, 0.047rem + 1.72vw, 18px);
        font-weight: var(--txt-bold);
        line-height: 1.6;
        margin-bottom: min(14px, calc((14 / 1366) * 100vw));
    }
    .c-footer__logo {
        width: min(240px, calc((240 / 1366) * 100vw));
        margin: 0 auto;
    }
    .c-footer__logo > img {
        width: 100%;
        object-fit: contain;
    }
    .c-footer__map-area {
        margin-top: min(44px, calc((44 / 1366) * 100vw));
    }
    .c-footer-map {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .c-footer-map__btn__box span {
        position: relative;
        font-size: clamp(14px, -0.078rem + 1.72vw, 16px);
        font-family: var(--font-family-quicksand);
        padding: 0 min(16px, calc((16 / 1366) * 100vw));
        --footer-item-hover: var(--green-color-500);
        transition: all .3s ease;
    }
    .c-footer-map__btn__box span:hover {
        transition: all .3s ease;
        color: var(--footer-item-hover);    
    }
    .c-footer-map__item:not(:last-child) .c-footer-map__btn__box span::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 14px;
        top: 50%;
        transform: translateY(-50%);
        border-right: 1px solid var(--black-color);
        right: 0;
    }
    .c-footer-sns {
        display: flex;
        gap: min(26px, calc((26 / 1366) * 100vw));
        justify-content: center;
        align-items: center;
        margin-top: min(36px, calc((36 / 1366) * 100vw));
    }
    .c-footer-sns__item {
        transition: all 0.3s ease;
    }
    .c-footer-sns__item:hover {
        opacity: 0.7;
        transition: all 0.3s ease;
    }
    .c-footer-sns__btn__box .c-footer-sns__icon {
        width: min(40px, calc((40 / 1366) * 100vw));
        height: min(40px, calc((40 / 1366) * 100vw));
    }
    .c-footer-sns__btn__box.sns__icon--x .c-footer-sns__icon {
        width: min(32px, calc((32 / 1366) * 100vw));
        height: min(32px, calc((32 / 1366) * 100vw));
    }
    .c-footer__bottom {
        width: 100%;
        height: min(60px, calc((60 / 1366) * 100vw));
        background-color: var(--pink-color-500);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .c-footer__bottom__in {
        max-width: var(--lp-content-size);
        margin: 0 auto;
    }
    .c-presented {
        padding: min(18px, calc((18 / 1366) * 100vw)) min(20px, calc((20 / 1366) * 100vw));
    }
    .c-presented__text {
        color: var(--white-color);
        font-size: 12px;
        font-family: var(--font-family-quicksand);
    }
}

@media all and (max-width: 767px), print {
    .c-footer {
        width: 100%;
    }
    .c-footer__top {
        width: 100%;
        background-color: var(--white-color);
        padding: calc(88 / 2 * 1px) 0 calc(64 / 2 * 1px);
    }
    .c-footer__top__in {
        width: 100%;
        margin: 0 auto;
    }
    .c-footer__top__body {
        width: 100%;
        margin: 0 auto;
        padding: 0 calc(40 / 2 * 1px);
    }
    .c-footer__logo-area {
    }
    .c-footer__sub {
        text-align: center;
        font-family: var(--font-family-zenmaru);
        font-size: calc(24 / 2 * 1px);
        font-weight: var(--txt-bold);
        line-height: calc(33.6 / 24);
        margin-bottom: calc(30 / 2 * 1px);
    }
    .c-footer__logo {
        width: calc(312 / 2 * 1px);
        margin: 0 auto;
    }
    .c-footer__logo > img {
        width: 100%;
        object-fit: contain;
    }
    .c-footer__map-area {
        margin-top: calc(56 / 2 * 1px);
    }
    .c-footer-map {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .c-footer-map__btn__box span {
        position: relative;
        font-size: calc(24 / 2 * 1px);
        line-height: calc(14 / 24);
        font-family: var(--font-family-quicksand);
        padding: 0 calc(26 / 2 * 1px);
    }
    .c-footer-map__item:not(:last-child) .c-footer-map__btn__box span::after {
        content: "";
        position: absolute;
        width: 1px;
        height: calc(20 / 2 * 1px);
        top: 50%;
        transform: translateY(-50%);
        border-right: 1px solid var(--black-color);
        right: 0;
    }
    .c-footer-sns {
        display: flex;
        gap: calc(32 / 2 * 1px);
        justify-content: center;
        align-items: center;
        margin-top: calc(56 / 2 * 1px);
    }
    .c-footer-sns__btn__box {
        width: calc(48 / 2 * 1px);
        height: calc(48 / 2 * 1px);
    }
    .c-footer-sns__btn__box.sns__icon--x{
        width: calc(38 / 2 * 1px);
        height: calc(38 / 2 * 1px);
    }
    .c-footer-sns__btn__box.sns__icon--fb{
        width: calc(48 / 2 * 1px);
        height: calc(48 / 2 * 1px);
    }
    .c-footer-sns__btn__box.sns__icon--ins{
        width: calc(48 / 2 * 1px);
        height: calc(48 / 2 * 1px);
    }
    .c-footer-sns__btn__box.sns__icon--line{
        width: calc(48 / 2 * 1px);
        height: calc(48 / 2 * 1px);
    }
    .c-footer-sns__btn__box .c-footer-sns__icon{
        width: 100%;
        height: 100%;
    }
    .c-footer__bottom {
        width: 100%;
        background-color: var(--pink-color-500);
    }
    .c-footer__bottom__in {
    }
    .c-presented {
        text-align: center;
        padding: calc(40 / 2 * 1px);
    }
    .c-presented__text {
        line-height: calc(14 / 20);
        color: var(--white-color);
        font-size: calc(20 / 2 * 1px);
        font-family: var(--font-family-zenkaku);
    }
}

/* タグ */
.c-tag__wrapper {
  display: flex;
  flex-wrap: wrap;
}
.c-tag {
  border:1px solid #000;
  border-radius: 999px;
  background-color: #fff;
  line-height: 1;
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .c-tag__wrapper {
    margin-top: min(16px, calc((16 / 1366) * 100vw));
    column-gap: min(4px, calc((4 / 1366) * 100vw));
    row-gap: min(4px, calc((4 / 1366) * 100vw));
  }
  .c-tag {
    font-size: min(14px, calc((14 / 1366) * 100vw));
    padding: min(8px, calc((8 / 1366) * 100vw)) min(14px, calc((14 / 1366) * 100vw));
    transition: all .3s ease;
  }
  .c-tag:hover{
    opacity: 0.7;
    transition: all .3s ease;
  }
}
@media screen and (max-width: 767px) {
  .c-tag__wrapper {
    margin-top: min(13px, calc((13 / 375) * 100vw));
    column-gap: min(4px, calc((4 / 375) * 100vw));
    row-gap: min(4px, calc((4 / 375) * 100vw));
  }
  .c-tag {
    font-size: calc((10 / 375) * 100vw);
    padding: calc(12 / 2 * 1px) calc(17 / 2 * 1px);
  }
}

/* パンクズリスト */
.c-breadcrumb {
  background-color: #fffaf3;
}
.c-breadcrumb_list {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}
.c-breadcrumb_list_item {
  position: relative;
  display: flex;
}
.c-breadcrumb_list_item+.c-breadcrumb_list_item:before {
  content: "";
  display: block;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  position: relative;
}
.c-breadcrumb_list_item__link {
    transition: all .3s ease;
}
.c-breadcrumb_list_item__link:hover {
    opacity: 0.7;
    transition: all .3s ease;
}
@media screen and (min-width: 768px) {
  .c-breadcrumb {
    margin-top: min(80px, calc((80 / 1366) * 100vw));
    padding: min(24px, calc((24 / 1366) * 100vw));
  }
  .c-breadcrumb_list {
    font-size: 12px;
  }
  .c-breadcrumb_list_item {
    align-items: center;
  }
  .c-breadcrumb_list_item+.c-breadcrumb_list_item:before {
    width: 5px;
    height: 5px;
    margin: 0 min(16px, calc((16 / 1366) * 100vw));
  }
}
@media screen and (max-width: 767px) {
  .c-breadcrumb {
    padding: calc((16 / 375) * 100vw) calc((20 / 375) * 100vw);
  }
  .c-breadcrumb_list {
    font-size: 10px;
    line-height: 1.4;
    flex-shrink: 0;
    flex-wrap: wrap;
    row-gap: 5px;
  }
  .c-breadcrumb_list_item {
    align-items: baseline;
  }
  .c-breadcrumb_list_item+.c-breadcrumb_list_item:before {
    width: 4px;
    height: 4px;
    margin: 0 calc((6 / 375) * 100vw);
  }
}

/* --------------------------------------------------------------------------
  MODAL-SP
-------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.c-modal{
		display: none;
	}
}
@media screen and (max-width: 767px) {
	body.no-scroll {
    overflow: hidden;
    width: 100%;
	}
    body.no-scroll .overlay {
		background-color: rgba(0, 0, 0, 0.6);
        width: 100vw;
        height: 100vh;
    }
	.c-modal{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
        z-index: 1000;
		overflow: hidden;
	}
    .c-modal[aria-hidden="true"] {
        visibility: hidden;
    }
    .c-modal[aria-hidden="false"] {
        visibility: visible
    }
    .c-modal-content {
		background-color: #fff;
		width: 90vw;
		max-width: 670px;
		position: absolute;
		top: 0;
        right: -100%;
	}
    .c-modal[aria-hidden="true"] .c-modal-content {
        right: -100%;
        transition: all .3s ease;
    }
    .c-modal[aria-hidden="false"] .c-modal-content {
        right: 0;
        transition: all .3s ease;
    }
	.c-modal-close {
		width: calc(66 / 2 * 1px);
		height: calc(66 / 2 * 1px);
		background-color: #82d1b1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: calc(40 / 2 * 1px);
		right: calc(40 / 2 * 1px);
		cursor: pointer;
	}
	.c-modal-close::before,
	.c-modal-close::after {
			content: '';
			position: absolute;
			width: calc(22 / 2 * 1px);
			height: calc(4 / 2 * 1px);
			background-color: #fff;
			top: calc(30 / 2 * 1px);
			left: calc(22 / 2 * 1px);
            border-radius: 9999px;
	}
	.c-modal-close::before {
			transform: rotate(45deg);
	}
	.c-modal-close::after {
			transform: rotate(-45deg);
	}
    .c-modal .logo {
        text-align: center;
        padding: calc(56 / 2 * 1px) calc(60 / 2 * 1px);
        background-color: var(--pink-color-200);
    }
    .c-modal-logo-top {
        text-align: center;
        font-size: calc(19 / 2 * 1px);
        margin-bottom: calc(28 / 2 * 1px);
        font-family: var(--font-family-zenmaru);
        line-height: calc(27 / 19);
    }
    .c-modal-logo-bottom {
        max-width: calc(367 / 2 * 1px);
        margin: 0 auto;
    }
    .c-modal-logo-bottom .modal-logo__img{
        width: 100%;
    }
    .c-modal-nav {
        padding: calc(80 / 2 * 1px) calc(60 / 2 * 1px);
    }
    .c-modal-nav-list::before {
        position: absolute;
        content: "";
        height: calc(2 / 2 * 1px);
        width: 100%;
        bottom: 0;
        bottom: 0;
        left: 0;
        transform: translateY(40px);
        background-color: var(--black-color);
    }
    .c-modal-nav-list {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: calc(80 / 2 * 1px);
    }
    .c-modal-nav-list .c-modal-nav-item {
        font-size: calc(36 / 2 * 1px);
        word-break: break-all;
        position: relative;
    }
    .c-modal-nav-content {
    }
    .c-modal-nav-content::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: calc(35 / 2 * 1px);
        height: calc(35 / 2 * 1px);
    }
    .c-modal-nav-content.c-modal-nav-content--recipe::before {
        background: url("../img/common/icon/ico_recipe.svg") no-repeat center;
        width: calc(35 / 2 * 1px);
    }
    .c-modal-nav-content.c-modal-nav-content--labo::before {
        background: url("../img/common/icon/ico_labo.svg") no-repeat;
        width: calc(30 / 2 * 1px);
        top: calc(4 / 2 * 1px);
    }
    .c-modal-nav-content.c-modal-nav-content--lifestyle::before {
        background: url("../img/common/icon/ico_life.svg") no-repeat;
        width: calc(37 / 2 * 1px);
        top: calc(4 / 2 * 1px);
    }
    .c-modal-nav-content.c-modal-nav-content--beauty::before {
        background: url("../img/common/icon/ico_health.svg") no-repeat center;
        width: calc(30 / 2 * 1px);
    }
    .c-modal-nav-content .c-modal-nav-content__txt {
        font-family: var(--font-family-quicksand);
        font-size: calc(34 / 2 * 1px);
        margin-left: calc(60 / 2 * 1px);
    }
    .c-modal-sns {
        padding: 0 calc(60 / 2 * 1px);
        margin-top: calc(48 / 2 * 1px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: calc(34 / 2 * 1px);
    }
    .c-modal-sns__item {
        width: calc(48 / 2 * 1px);
        height: calc(48 / 2 * 1px);
    }
    .c-modal-sns__item.sns__icon--x {
        width: calc(38 / 2 * 1px);
        height: calc(38 / 2 * 1px);
    }
    .c-modal-sns__item.sns__icon--ins {
        width: calc(48 / 2 * 1px);
        height: calc(48 / 2 * 1px);
    }
    .c-modal-sns__item.sns__icon--line {
        width: calc(48 / 2 * 1px);
        height: calc(48 / 2 * 1px);
    }
    .c-modal-sns__img {
        width: 100%;
        height: 100%;
    }
    .c-modal-presented {
        margin: calc(80 / 2 * 1px) 0 calc(40 / 2 * 1px);
    }
    .c-modal-presented__text {
        text-align: center;
        line-height: calc(14 / 20);
        font-family: var(--font-family-zenkaku);
        font-size: calc(20 / 2 * 1px);
    }
}