@charset "UTF-8";
/*--------------------------------------------
フォント
---------------------------------------------*/
/*--------------------------------------------
カラー
---------------------------------------------*/
/*--------------------------------------------
サイト幅・ブレイクポイント
---------------------------------------------*/
/*--------------------------------------------
イージング
---------------------------------------------*/
/*--------------------------------------------
使い方
---------------------------------------------*/
/*--------------------------------------------
フォントサイズ・余白などのレスポンシブ対応
---------------------------------------------*/
/*--------------------------------------------
メディアクエリ
---------------------------------------------*/
/*--------------------------------------------
ホバー
---------------------------------------------*/
/*--------------------------------------------
上下左右中央配置（センター配置）
---------------------------------------------*/
/*--------------------------------------------
line-clamp
---------------------------------------------*/
/* =================================================
*    共通(common)
* =============================================== */
.f-wrapper {
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.06em;
  color: #382d29;
  border-collapse: collapse;
}

.f-contents {
  margin-inline: auto;
}

.f-contents-area {
  margin-inline: auto;
}

a {
  color: #382d29;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (hover: none) {
  a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  a:active {
    opacity: 0.6;
  }
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
  a:hover {
    opacity: 0.6;
  }
}

/* =================================================
*    ボタン(common)
* =============================================== */
.f-btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.f-btn-wrap .f-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 24.5rem;
  background-color: #fff;
  border-radius: 3.3rem;
  border: 0.1rem solid #eeeeee;
}
.f-btn-wrap .f-btn .f-btn-icon {
  margin-left: 1.5rem;
}

/* =================================================
*    ぱんくず(common)
* =============================================== */
.c-breadcrumb {
  background-color: #fff;
}
.c-breadcrumb .c-breadcrumb__text {
  font-weight: normal;
  font-size: 1.3rem;
}

/* =================================================
*    タイトル(common)
* =============================================== */
.f-area-title {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.f-area-title .f-title-icon {
  margin-right: 0.5rem;
}

.f-page-title-area {
  background-color: #fff;
}

.f-page-title {
  text-align: center;
  letter-spacing: 0.06em;
}
.f-page-title .f-page-title-en {
  display: block;
  color: #afa8a1;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.feature-page-view-no-item {
  padding: 5rem 0;
  font-size: 120%;
  line-height: 1.5;
}
.feature-page-view-no-item.no-padding {
  padding: 0;
}

/* =================================================
*    カテゴリで探す(common)
* =============================================== */
.f-category-list-area {
  width: 100%;
  background-color: #faf7f0;
}
.f-category-list-area .f-category-list {
  display: grid;
}
.f-category-list-area .f-category-list-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  border: 0.1rem solid var(--color-project-ui-border-primary);
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #fff;
}
.f-category-list-area .f-category-list-img {
  height: 100%;
  overflow: hidden;
}
.f-category-list-area .f-category-list-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* =================================================
*    レシピ一覧(common)
* =============================================== */
.f-recipe-list-area {
  background-color: #fff;
}
.f-recipe-list-area .f-recipe-list__list {
  border: 0.1rem solid #dcdcdc;
  border-radius: 1.5rem;
  overflow: hidden;
}
.f-recipe-list-area .f-recipe-list-img {
  aspect-ratio: 325/244;
  overflow: hidden;
}
.f-recipe-list-area .f-recipe-list-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.f-recipe-list-area .f-recipe-list-title {
  font-size: 1.6rem;
  line-height: 1.5;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: break-word;
  word-break: break-all;
}

/* =================================================
*    ページネーション(common)
* =============================================== */
.pagination-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding-top: 6rem;
  padding-bottom: 6rem;
  font-size: 1.5rem;
  background-color: #fff;
}
.pagination-area .pagination-link--arrow {
  content: "";
  display: block;
  height: 3rem;
  width: 3rem;
  margin: 0 0.25rem;
}
.pagination-area .pagination-prev,
.pagination-area .pagination-next {
  position: relative;
  top: 0.1rem;
}
.pagination-area .pagination-prev .pagination-link--arrow {
  background: url(/Contents/ThemeImage/featurePage/pager_arrow_prev.svg) no-repeat center/cover;
}
.pagination-area .pagination-next .pagination-link--arrow {
  background: url(/Contents/ThemeImage/featurePage/pager_arrow_next.svg) no-repeat center/cover;
}
.pagination-area .pagination-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pagination-area .pagination-list .pagination-list__list {
  border-radius: 0.4rem;
  margin: 0 0.25rem;
}
.pagination-area .pagination-list .pagination-list__list.active {
  background-color: #f4efe4;
  pointer-events: none;
  cursor: default;
}
.pagination-area .pagination-list .pagination-list__list.omission {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #cccccc;
}
.pagination-area .pagination-list .pagination-list-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 3rem;
  height: 3rem;
}

/* =====================================================================
*
*    pcレイアウト
*
* =================================================================== */
@media screen and (min-width: 1024px) {
  /* =================================================
  *    共通(pc)
  * =============================================== */
  .f-contents-area {
    max-width: 122rem;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-inline: auto;
  }
  /* =================================================
  *    ボタン(pc)
  * =============================================== */
  .f-btn-wrap .f-btn {
    padding: 2rem;
    font-size: 1.6rem;
  }
  /* =================================================
  *    タイトル(pc)
  * =============================================== */
  .f-area-title {
    font-size: 2rem;
  }
  .f-area-title .f-title-icon {
    width: 2.9rem;
  }
  .f-page-title-area {
    padding-top: 2.7rem;
    padding-bottom: 4.3rem;
  }
  .f-page-title-area .f-page-title {
    font-size: 3.5rem;
    padding-top: 3.1rem;
    background: url(/Contents/ThemeImage/featurePage/title_square_pc.svg) no-repeat center top/4.8rem 0.8rem;
  }
  .f-page-title-area .f-page-title .f-page-title-en {
    font-size: 1.6rem;
    margin-top: 1.9rem;
  }
  /* =================================================
  *    カテゴリで探す(pc)
  * =============================================== */
  .f-category-list-area {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .f-category-list-area .f-category-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .f-category-list-area .f-category-list-img {
    width: 7rem;
    height: 6.8rem;
  }
  .f-category-list-area .f-category-list-text {
    width: calc(100% - 7rem);
    padding: 0.5rem 1.8rem;
  }
  /* =================================================
  *    レシピ一覧(pc)
  * =============================================== */
  .f-recipe-list-area {
    padding-top: 6rem;
  }
  .f-recipe-list-area .f-recipe-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 3.6rem;
    margin-top: 1.7rem;
  }
  .f-recipe-list-area .f-recipe-list-title-area {
    height: 9.1rem;
    padding: 1rem 1.5rem;
  }
  /* =================================================
  *    ページネーション(pc)
  * =============================================== */
  .pagination-area .pagination-link--arrow {
    height: 3rem;
    width: 3rem;
  }
  .pagination-area .pagination-prev .pagination-link--arrow {
    background: url(/Contents/ThemeImage/featurePage/pager_arrow_prev.svg) no-repeat center/cover;
  }
  .pagination-area .pagination-next .pagination-link--arrow {
    background: url(/Contents/ThemeImage/featurePage/pager_arrow_next.svg) no-repeat center/cover;
  }
  .pagination-area .pagination-list .pagination-list-link {
    min-width: 3rem;
    height: 3rem;
  }
}
/* =====================================================================
*
*    spレイアウト
*
* =================================================================== */
@media screen and (max-width: 1023.9px) {
  /* =================================================
  *    共通(sp)
  * =============================================== */
  .f-contents-area {
    width: 100%;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
  /* =================================================
  *    ボタン(sp)
  * =============================================== */
  .f-btn-wrap .f-btn {
    padding: 1.75rem;
    font-size: 1.4rem;
  }
  /* =================================================
  *    タイトル(sp)
  * =============================================== */
  .f-area-title {
    font-size: 1.8rem;
  }
  .f-area-title .f-title-icon {
    width: 2.6rem;
  }
  .f-page-title-area {
    padding-top: 2.5rem;
    padding-bottom: 3.2rem;
  }
  .f-page-title-area .f-page-title {
    font-size: 2.2rem;
    padding-top: 2.2rem;
    background: url(/Contents/ThemeImage/featurePage/title_square_sp.svg) no-repeat center top/3.7rem 0.7rem;
  }
  .f-page-title-area .f-page-title .f-page-title-en {
    font-size: 1.1rem;
    margin-top: 1.3rem;
  }
  /* =================================================
  *    カテゴリで探す(sp)
  * =============================================== */
  .f-category-list-area {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .f-category-list-area .f-category-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin-top: 1.4rem;
  }
  .f-category-list-area .f-category-list-img {
    width: 5.5rem;
    height: 5.3rem;
  }
  .f-category-list-area .f-category-list-text {
    width: calc(100% - 5.5rem);
    padding: 0.5rem 1.7rem;
  }
  /* =================================================
  *    レシピ一覧(sp)
  * =============================================== */
  .f-recipe-list-area {
    padding-top: 3rem;
  }
  .f-recipe-list-area .f-recipe-list {
    display: block;
    margin-top: 1.5rem;
  }
  .f-recipe-list-area .f-recipe-list__list + .f-recipe-list__list {
    margin-top: 3rem;
  }
  .f-recipe-list-area .f-recipe-list-title-area {
    padding: 1.5rem;
  }
  /* =================================================
  *    ページネーション(sp)
  * =============================================== */
  .pagination-area {
    width: 100%;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
    font-size: 1.5rem;
  }
}
/* =====================================================================
*
*    seレイアウト
*
* =================================================================== */
@media screen and (max-width: 320px) {
  /* =================================================
  *    ページネーション(se)
  * =============================================== */
  .pagination-area .pagination-link--arrow {
    margin: 0;
  }
  .pagination-area .pagination-list .pagination-list__list {
    margin: 0;
  }
}
/* =====================================================================
*
*    pcレイアウト（ミドル）
*
* =================================================================== */
@media screen and (min-width: 1024px) and (max-width: 1399.9px) {
  html {
    font-size: 0.7142857143vw;
  }
}