@charset "UTF-8";

.cat-recipe {
    --thema-color:var(--pink-color-500);
    --hero-ico: url("../img/common/ico-recipe.png");
}
.cat-about {
    --thema-color:var(--blue-color-500);
    --hero-ico: url("../img/common/ico-about.png");
}
.cat-recommend {
    --thema-color:var(--green-color-500);
    --hero-ico: url("../img/common/ico-reason.png");
}
@media all and (min-width: 768px), print {
    .main-container {
        background: #fffdf8;
    }
}
@media all and (max-width: 767px) {
  .main-container {
    background: #fffdf8;
}
}

/* --------------------------------------------------------------------------
  PAGE
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .l-page-container {
  }
  .l-page-container__in {
  }
}

@media all and (max-width: 767px) {
}

/* sec */

@media all and (min-width: 768px), print {
  .l-page-sec {
  }
  .l-page-sec + .l-page-sec {
  }
  .l-page-sec__in {
    max-width: calc(1064 / var(--font-size) * 1em);
    margin: auto;
    padding: 0 calc(20 / var(--font-size) * 1em);
    --sec-width: 1024;
    --sec-outer-w: 1064;
  }
  .l-page-sec__body {
    padding: calc(96 / 1280 * 100%) 0;
  }
  .l-page-sec:first-child .l-page-sec__body {
    padding-top: 0;
  }
  .l-page-sec__header {
  }
  .l-page-sec__content {
  }
}
@media all and (max-width: 767px) {
  .l-page-sec {
    --sec-width: 750;
  }
  .l-page-sec + .l-page-sec {
  }
  .l-page-sec__in {
    margin: auto;
    padding: 0 calc(40 / 750 * 100vw);
  }
  .l-page-sec__body {
    padding: calc(120 / 750 * 100vw) 0;
  }
  .l-page-sec:first-child .l-page-sec__body {
    padding-top: 0;
  }
  .l-page-sec__header {
  }
  .l-page-sec__content {
  }
}



/* block */

@media all and (min-width: 768px), print {
  .l-page-block {
  }
  .l-page-block + .l-page-block {
    margin-top: calc(82 / 1024 * 100%);
  }
  .l-page-block__in {
  }
  .l-page-block__header {
  }
  .l-page-block__content {
  }
}
@media all and (max-width: 767px), print {
  .l-page-block {
  }
  .l-page-block + .l-page-block {
    margin-top: calc(88 / 750 * 100vw);
  }
  .l-page-block__in {
  }
  .l-page-block__header {
  }
  .l-page-block__content {
  }
}

/* --------------------------------------------------------------------------
  タイトル
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .page-hero {
    --hero-w: 1440;
    max-width: calc(1440 / var(--font-size) * 1em);
    margin: 0 auto;
  }
  .page-hero__in {
    padding: calc(40 / var(--hero-w) * 100%) calc(43 / var(--hero-w) * 100%) 0;
    margin-bottom: calc(72 / var(--hero-w) * 100%);
  }
  .page-hero__body {
    --page-hero-w: 1280;
    max-width: calc(1280 / var(--font-size) * 1em);
    background: #fff3e6;
    height: 100%;
    margin: 0 auto;
    padding: calc(47 / var(--page-hero-w) * 100%) calc(20 / var(--font-size) * 1em) calc(48 / var(--page-hero-w) * 100%);
    border-radius: calc(40 / var(--font-size) * 1em);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .page-hero__body::before,
  .page-hero__body::after {
    content: "";
    display: block;
    position: absolute;
  }
  .page-hero__body::before {
    width: calc(381 / var(--page-hero-w) * 100%);
    padding-top: calc(297 / var(--page-hero-w) * 100%);
    background: url("../img/page/page-hero-deco-01.png") no-repeat center / contain;
    top: 0;
    left: 0;
    margin-top: calc(48 / 1280 * 100%);
    margin-left: calc(-125 / 1280 * 100%);
  }
  .page-hero__body::after {
    width: calc(335 / var(--page-hero-w) * 100%);
    padding-top: calc(265 / var(--page-hero-w) * 100%);
    background: url("../img/page/page-hero-deco-02.png") no-repeat center / contain;
    top: 0;
    right: 0;
    margin-top: calc(-106 / var(--page-hero-w) * 100%);
    margin-right: calc(-97 / var(--page-hero-w) * 100%);
  }
  .page-hero__header {
    text-align: center;
    --txt-w: 266;
  }
  .page-hero__header-title {
    position: relative;
    padding-top: calc(64 / var(--txt-w) * 100%);
    display: block;
  }
  .page-hero__header-title__label::before {
    content: "";
    display: block;
    -webkit-mask-image: var(--hero-ico);
    mask-image: var(--hero-ico);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--thema-color);
    width: calc(31 / var(--txt-w) * 100%);
    padding-top: calc(54 / var(--txt-w) * 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .page-hero__header-title__label {
    color: var(--thema-color);
    font-family: var(--font-zen-maru);
    font-size: calc(32 / var(--font-size) * 1em);
  }
}
@media all and (max-width: 767px) {
  .page-hero {
  }
  .page-hero__in {
    margin: 0 auto;
    padding: calc(40 / 750 * 100vw) calc(40 / 750 * 100vw) 0;
    margin-bottom: calc(90 / 750 * 100vw);
  }
  .page-hero__body {
    --page-hero-w: 750;
    max-width: calc(750 / 750 * 100vw);
    background: #fff3e6;
    height: calc(287 / 750 * 100vw);
    margin: 0 auto;
    padding: calc(35 / var(--page-hero-w) * 100%) calc(20 / var(--page-hero-w) * 100%);
    border-radius: calc(40 / 750 * 100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .page-hero__body::before,
  .page-hero__body::after {
    content: "";
    display: block;
    position: absolute;
  }
  .page-hero__body::before {
    width: calc(363 / 750 * 100vw);
    padding-top: calc(320 / 750 * 100vw);
    background: url("../img/page/page-hero-deco-01_sp.png") no-repeat center / contain;
    top: 0;
    left: 0;
    margin-top: calc(145 / 750 * 100vw);
    margin-left: calc(-158 / 750 * 100vw);
  }
  .page-hero__body::after {
    width: calc(335 / 750 * 100vw);
    padding-top: calc(265 / 750 * 100vw);
    background: url("../img/page/page-hero-deco-02_sp.png") no-repeat center / contain;
    top: 0;
    right: 0;
    margin-top: calc(-137 / 750 * 100vw);
    margin-right: calc(-78 / 750 * 100vw);
  }
  .page-hero__header {
    text-align: center;
    --txt-w: 266;
  }
  .page-hero__header-title {
    position: relative;
    padding-top: calc(95 / 750 * 100vw);
    display: block;
  }
  .page-hero__header-title__label::before {
    content: "";
    display: block;
    -webkit-mask-image: var(--hero-ico);
    mask-image: var(--hero-ico);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--thema-color);
    width: calc(86 / 750 * 100vw);
    padding-top: calc(76 / 750 * 100vw);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .page-hero__header-title__label {
    color: var(--thema-color);
    font-family: var(--font-zen-maru);
    font-size: calc(46 / 750 * 100vw);
    letter-spacing: calc(160 / 1000 * 1em);
    line-height: calc(62 / 46);
  }
}
@media all and (min-width: 768px) and (max-width: 1362px) {
    .page-hero__body {
        border-radius: calc(40 / 1362 * 100vw);
    }
    .page-hero__header-title__label {
        font-size: calc(32 / 1362 * 100vw);
        letter-spacing: calc(160 / 1000 * 1em);
    }
}

/* --------------------------------------------------------------------------
  PAGE-HEADING
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .page-heading {
    margin-bottom: calc(49 / var(--sec-width) * 100%);
}
.page-heading__in {
    text-align: center;
    position: relative;
    padding-top: calc(20 / var(--sec-width) * 100%);
    z-index: 1;
}
.page-heading__label--sub {
    color: var(--white-color);
    font-family: var(--font-josefin);
    font-size: calc(48 / var(--font-size) * 1em);
    font-weight: bold;
    letter-spacing: calc(240 / 1000 * 1em);
    line-height: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.page-heading__label {
    color: var(--lightbrown-color);
    font-family: var(--font-zen-maru);
    font-size: calc(32 / var(--font-size) * 1em);
    font-weight: bold;
    letter-spacing: calc(160 / 1000 * 1em);
    line-height: 1;
}
}
@media all and (min-width: 768px) and (max-width: 1064px) {
  .page-heading__label {
    font-size: calc(32 / 1064 * 100vw);
  }
  .page-heading__label--sub {
    font-size: calc(48 / 1064 * 100vw);
  }
}

@media all and (max-width: 767px), print {
  .page-heading {
    margin-bottom: calc(70 / 750 * 100vw);
  }
  .page-heading__in {
    text-align: center;
    position: relative;
    padding-top: calc(32 / 750 * 100vw);
    z-index: 1;
  }
  .page-heading__label--sub {
    color: var(--white-color);
    font-family: var(--font-josefin);
    font-size: calc(56 / 750 * 100vw);;
    font-weight: bold;
    letter-spacing: calc(240 / 1000 * 1em);
    line-height: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  .page-heading__label {
    color: var(--lightbrown-color);
    font-family: var(--font-zen-maru);
    font-size: calc(48 / 750 * 100vw);
    font-weight: bold;
    letter-spacing: calc(160 / 1000 * 1em);
    line-height: 1;
  }
}