@charset "UTF-8";

/* --------------------------------------------------------------------------
  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: 1226px;
    margin: 0 auto;
    padding: 0 calc(20 / 16 * 1rem);
  }
  .l-page-sec__body {
    padding: min(100px, calc(100 / 1366 * 100vw)) 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) {
}

/* block */

@media all and (min-width: 768px), print {
  .l-page-block {
  }
  .l-page-block + .l-page-block {
    margin-top: min(64px, calc(64 / 1366 * 100vw));
  }
  .l-page-block__in {
  }
  .l-page-block__content {
  }
}

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

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

@media all and (min-width: 768px), print {
  .page-hero {
  }
  .page-hero__in {
  }
  .page-hero__header {
  }
  .page-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: min(80px, calc(80 / 1366 * 100vw));
    margin-bottom: min(56px, calc(56 / 1366 * 100vw));
  }
  .page-hero-title__label::before {
    content: "";
    display: block;
    width: min(35px, calc(35 / 1366 * 100vw));
    height: min(35px, calc(35 / 1366 * 100vw));
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .page-hero-title__label {
    position: relative;
    font-size: clamp(30px, 0.047rem + 1.72vw, 36px);
    font-family: var(--font-family-quicksand) ;
    padding-top: min(40px, calc(40 / 1366 * 100vw));
  }
  .cat-beauty .page-hero-title__label,
    .cat-labo .page-hero-title__label,
    .cat-lifestyle .page-hero-title__label,
    .cat-recipe .page-hero-title__label {
      letter-spacing: calc(100 / 1000 * 1em);
    }
  .tag-lifestyle .page-hero-title__label,
  .tag-labo .page-hero-title__label,
  .tag-recipe .page-hero-title__label,
  .tag-beauty .page-hero-title__label {
    font-family: var(--font-family-zenmaru);
  }
  .page-hero-title__label--sub {
    font-size: clamp(12px, 0.047rem + 1.72vw, 16px);
    font-family: var(--font-family-zenmaru);
    margin-top: min(12px, calc(12 / 1366 * 100vw));
  }
  .cat-lifestyle .page-hero-title__label::before,
  .tag-lifestyle .page-hero-title__label::before {
    background: url("../img/common/icon/ico_life.svg") no-repeat center / min(35px, calc(35 / 1366 * 100vw));
  }
  .cat-recipe .page-hero-title__label::before,
  .tag-recipe .page-hero-title__label::before {
    background: url("../img/common/icon/ico_recipe.svg") no-repeat center / min(29px, calc(29 / 1366 * 100vw));
  }
  .cat-labo .page-hero-title__label::before,
  .tag-labo .page-hero-title__label::before {
    background: url("../img/common/icon/ico_labo.svg") no-repeat center / min(26px, calc(26 / 1366 * 100vw));
  }
  .cat-beauty .page-hero-title__label::before,
  .tag-beauty .page-hero-title__label::before {
    background: url("../img/common/icon/ico_health.svg") no-repeat center / min(30px, calc(30 / 1366 * 100vw));
  }
  .page-hero-title__label--sub::before {
    content: "記事一覧";
  }
}
@media all and (max-width: 767px) {
  .l-main-container {
  }
    .page-hero {
    }
    .page-hero__in {
    }
    .page-hero__header {
    }
    .page-hero-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: calc(64 / 2 * 1px);
      margin-bottom: calc(56 / 2 * 1px);
    }
    .page-hero-title__label::before {
      content: "";
      display: block;
      width: calc(46 / 2 * 1px);
      height: calc(46 / 2 * 1px);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .page-hero-title__label {
      position: relative;
      font-size: calc(46 / 2 * 1px);
      font-family: var(--font-family-quicksand) ;
      padding-top: calc(60 / 2 * 1px);
    }
    .cat-beauty .page-hero-title__label,
    .cat-labo .page-hero-title__label,
    .cat-lifestyle .page-hero-title__label,
    .cat-recipe .page-hero-title__label {
      letter-spacing: calc(100 / 1000 * 1em);
    }
    .tag-lifestyle .page-hero-title__label,
    .tag-labo .page-hero-title__label,
    .tag-recipe .page-hero-title__label,
    .tag-beauty .page-hero-title__label {
      font-family: var(--font-family-zenmaru);
    }
    .page-hero-title__label--sub {
        font-size: calc(24 / 2 * 1px);
        font-family: var(--font-family-zenmaru);
      margin-top: calc(16 / 2 * 1px);
    }
    .cat-lifestyle .page-hero-title__label::before,
    .tag-lifestyle .page-hero-title__label::before {
      background: url("../img/common/icon/ico_life.svg") no-repeat center / calc(46 / 2 * 1px);
    }
    .cat-recipe .page-hero-title__label::before,
    .tag-recipe .page-hero-title__label::before {
      background: url("../img/common/icon/ico_recipe.svg") no-repeat center / calc(36 / 2 * 1px);
    }
    .cat-labo .page-hero-title__label::before,
    .tag-labo .page-hero-title__label::before {
      background: url("../img/common/icon/ico_labo.svg") no-repeat center / calc(36 / 2 * 1px);
    }
    .cat-beauty .page-hero-title__label::before,
    .tag-beauty .page-hero-title__label::before {
      background: url("../img/common/icon/ico_health.svg") no-repeat center / calc(36 / 2 * 1px);
    }
    .page-hero-title__label--sub::before {
      content: "記事一覧";
    }
  }

/* --------------------------------------------------------------------------
  RECIPE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .recipe-sec {
    }
    .recipe-block__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));
    }
    .recipe-block__in::before,
    .recipe-block__in::after {
        position: absolute;
        content: "";
        width: min(1px, calc((1 / 1366) * 100vw));
        height: 100%;
        background-color: black;
        top: 0;
    }
    .recipe-block__in::before {
        margin-left: min(2px, calc((2 / 1366) * 100vw));
        left: 0;
    }
    .recipe-block__in::after {
        margin-right: min(2px, calc((2 / 1366) * 100vw));
        right: 0;
    }
    .recipe-sec__body {
    }
    .recipe-content-list {
        gap: calc((40 / 16 * 1rem));
        flex-wrap: wrap;
    }
    .recipe-content-list-item {
        width: calc((100% - (80 / 16 * 1rem)) / 3);
    }
    .back-btn {
        width: min(320px, calc((320 / 1366) * 100vw));
        margin: min(56px, calc((56 / 1366) * 100vw)) auto 0;
    }
}
@media all and (max-width: 767px) {
    .recipe-sec {
      margin-bottom: calc(64 / 2 * 1px);
    }
    .recipe-block__in {
        padding: 0 min(92px, calc(92 / 1366 * 100vw));
    }
    .recipe-sec__body {
    }
    .recipe-content-list {
        column-gap: calc(21 / 2 * 1px);
        row-gap: calc(56 / 2 * 1px);
        flex-wrap: wrap;
    }
    .recipe-content-list-item {
        width: calc((100% - (20 / 16 * 1rem)) / 2);
    }
    .back-btn {
        width: calc(450 / 2 * 1px);
        margin: calc(48 / 2 * 1px) auto 0;
    }
}