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

.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;
  }
}

.c-breadcrumb {
  font-weight: normal;
}

figure {
  margin: 0;
}

/* =================================================
*    ボタン(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 {
  width: 2rem;
  margin-left: 1.5rem;
}
.f-btn-wrap .f-btn.back .f-btn-icon {
  margin-right: 1.5rem;
  margin-left: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* =================================================
*    タイトル(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;
}

/* =================================================
*    レシピリスト、材料リスト(common)
* =============================================== */
.f-recipe-info-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 0.1rem dashed #bbbbbb;
}
.f-recipe-info-list .f-recipe-info-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.f-recipe-info-list .f-recipe-info-value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.f-recipe-info-list.no-bb {
  border-bottom: none;
}

/* =================================================
*    レシピメイン情報(common)
* =============================================== */
.f-recipe-main-area {
  background-color: #fff;
}
.f-recipe-main-area .f-recipe-main-img img {
  width: 100%;
}
.f-recipe-main-area .f-recipe-main-info-area .f-recipe-main-title {
  line-height: 1.4;
}
.f-recipe-main-area .f-recipe-main-info {
  border: 0.1rem solid #afa8a1;
  border-radius: 1.5rem;
  overflow: hidden;
}
.f-recipe-main-area .f-recipe-main-info__upper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: var(--color-project-bg-beige-default);
}
.f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
}
.f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box + .f-recipe-upper-box {
  border-left: 0.1rem dashed #bbbbbb;
}
.f-recipe-main-area .f-recipe-main-info .f-recipe-info-text__data {
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
}
.f-recipe-main-area .f-nutrition-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner .f-recipe-info-list {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner .f-recipe-info-value {
  width: 6rem;
}

/* =================================================
*    レシピ詳細情報(common)
* =============================================== */
.f-recipe-detail-area .f-contents-area {
  background-color: #fff;
}
.f-recipe-detail-area .f-recipe-detail-summary {
  font-weight: normal;
  line-height: 1.7;
}
.f-recipe-detail-area .f-recipe-detail-box.f-movie {
  width: 100%;
}
.f-recipe-detail-area .f-recipe-detail-title {
  padding-bottom: 1rem;
  border-bottom: 0.3rem solid var(--color-project-primary);
}
.f-recipe-detail-area .f-recipe-sauce-box {
  background-color: var(--color-project-bg-beige-default);
  border-radius: 1rem;
}
.f-recipe-detail-area .f-recipe-detail-movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-top: 1.5rem;
}
.f-recipe-detail-area .f-recipe-detail-movie iframe,
.f-recipe-detail-area .f-recipe-detail-movie video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.f-cook-step-wrap .f-cook-step {
  position: relative;
  font-weight: normal;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-all;
}
.f-cook-step-wrap .f-cook-step .f-cook-step-inner {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 0.1rem dashed #bbbbbb;
}
.f-cook-step-wrap .f-cook-step .c-orange {
  color: var(--color-project-primary);
}
.f-cook-step-wrap .f-cook-step .f-cook-step-img img {
  width: 100%;
}
.f-cook-step-wrap .f-cook-step .f-cook-step-img,
.f-cook-step-wrap .f-cook-step .f-annotation-box {
  margin-top: 1.5rem;
}
.f-cook-step-wrap .f-cook-step .f-annotation-box {
  padding: 1rem;
  border: 0.1rem solid #afa8a1;
  border-radius: 0.4rem;
}
.f-cook-step-wrap .f-cook-step .f-annotation-text {
  display: block;
}
.f-cook-step-wrap .f-cook-step .f-annotation-text + .f-annotation-text {
  margin-top: 0.4rem;
}
.f-cook-step-wrap .f-cook-step:before {
  position: absolute;
  top: 0;
  left: 0;
  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: #fff;
  font-weight: bold;
  background-color: var(--color-project-primary);
  border-radius: 50%;
}
.f-cook-step-wrap .f-cook-step:nth-child(0):before {
  content: "0";
}
.f-cook-step-wrap .f-cook-step:nth-child(1):before {
  content: "1";
}
.f-cook-step-wrap .f-cook-step:nth-child(2):before {
  content: "2";
}
.f-cook-step-wrap .f-cook-step:nth-child(3):before {
  content: "3";
}
.f-cook-step-wrap .f-cook-step:nth-child(4):before {
  content: "4";
}
.f-cook-step-wrap .f-cook-step:nth-child(5):before {
  content: "5";
}
.f-cook-step-wrap .f-cook-step:nth-child(6):before {
  content: "6";
}
.f-cook-step-wrap .f-cook-step:nth-child(7):before {
  content: "7";
}
.f-cook-step-wrap .f-cook-step:nth-child(8):before {
  content: "8";
}
.f-cook-step-wrap .f-cook-step:nth-child(9):before {
  content: "9";
}
.f-cook-step-wrap .f-cook-step:nth-child(10):before {
  content: "10";
}
.f-cook-step-wrap .f-cook-step:nth-child(11):before {
  content: "11";
}
.f-cook-step-wrap .f-cook-step:nth-child(12):before {
  content: "12";
}
.f-cook-step-wrap .f-cook-step:nth-child(13):before {
  content: "13";
}
.f-cook-step-wrap .f-cook-step:nth-child(14):before {
  content: "14";
}
.f-cook-step-wrap .f-cook-step:nth-child(15):before {
  content: "15";
}
.f-cook-step-wrap .f-cook-step:nth-child(16):before {
  content: "16";
}
.f-cook-step-wrap .f-cook-step:nth-child(17):before {
  content: "17";
}
.f-cook-step-wrap .f-cook-step:nth-child(18):before {
  content: "18";
}
.f-cook-step-wrap .f-cook-step:nth-child(19):before {
  content: "19";
}
.f-cook-step-wrap .f-cook-step:nth-child(20):before {
  content: "20";
}
.f-cook-step-wrap .f-cook-step:nth-child(21):before {
  content: "21";
}
.f-cook-step-wrap .f-cook-step:nth-child(22):before {
  content: "22";
}
.f-cook-step-wrap .f-cook-step:nth-child(23):before {
  content: "23";
}
.f-cook-step-wrap .f-cook-step:nth-child(24):before {
  content: "24";
}
.f-cook-step-wrap .f-cook-step:nth-child(25):before {
  content: "25";
}
.f-cook-step-wrap .f-cook-step:nth-child(26):before {
  content: "26";
}
.f-cook-step-wrap .f-cook-step:nth-child(27):before {
  content: "27";
}
.f-cook-step-wrap .f-cook-step:nth-child(28):before {
  content: "28";
}
.f-cook-step-wrap .f-cook-step:nth-child(29):before {
  content: "29";
}
.f-cook-step-wrap .f-cook-step:nth-child(30):before {
  content: "30";
}
.f-cook-step-wrap .f-cook-step:nth-child(31):before {
  content: "31";
}
.f-cook-step-wrap .f-cook-step:nth-child(32):before {
  content: "32";
}
.f-cook-step-wrap .f-cook-step:nth-child(33):before {
  content: "33";
}
.f-cook-step-wrap .f-cook-step:nth-child(34):before {
  content: "34";
}
.f-cook-step-wrap .f-cook-step:nth-child(35):before {
  content: "35";
}
.f-cook-step-wrap .f-cook-step:nth-child(36):before {
  content: "36";
}
.f-cook-step-wrap .f-cook-step:nth-child(37):before {
  content: "37";
}
.f-cook-step-wrap .f-cook-step:nth-child(38):before {
  content: "38";
}
.f-cook-step-wrap .f-cook-step:nth-child(39):before {
  content: "39";
}
.f-cook-step-wrap .f-cook-step:nth-child(40):before {
  content: "40";
}
.f-cook-step-wrap .f-cook-step:nth-child(41):before {
  content: "41";
}
.f-cook-step-wrap .f-cook-step:nth-child(42):before {
  content: "42";
}
.f-cook-step-wrap .f-cook-step:nth-child(43):before {
  content: "43";
}
.f-cook-step-wrap .f-cook-step:nth-child(44):before {
  content: "44";
}
.f-cook-step-wrap .f-cook-step:nth-child(45):before {
  content: "45";
}
.f-cook-step-wrap .f-cook-step:nth-child(46):before {
  content: "46";
}
.f-cook-step-wrap .f-cook-step:nth-child(47):before {
  content: "47";
}
.f-cook-step-wrap .f-cook-step:nth-child(48):before {
  content: "48";
}
.f-cook-step-wrap .f-cook-step:nth-child(49):before {
  content: "49";
}
.f-cook-step-wrap .f-cook-step:nth-child(50):before {
  content: "50";
}
.f-cook-step-wrap .f-cook-step:nth-child(51):before {
  content: "51";
}
.f-cook-step-wrap .f-cook-step:nth-child(52):before {
  content: "52";
}
.f-cook-step-wrap .f-cook-step:nth-child(53):before {
  content: "53";
}
.f-cook-step-wrap .f-cook-step:nth-child(54):before {
  content: "54";
}
.f-cook-step-wrap .f-cook-step:nth-child(55):before {
  content: "55";
}
.f-cook-step-wrap .f-cook-step:nth-child(56):before {
  content: "56";
}
.f-cook-step-wrap .f-cook-step:nth-child(57):before {
  content: "57";
}
.f-cook-step-wrap .f-cook-step:nth-child(58):before {
  content: "58";
}
.f-cook-step-wrap .f-cook-step:nth-child(59):before {
  content: "59";
}
.f-cook-step-wrap .f-cook-step:nth-child(60):before {
  content: "60";
}
.f-cook-step-wrap .f-cook-step:nth-child(61):before {
  content: "61";
}
.f-cook-step-wrap .f-cook-step:nth-child(62):before {
  content: "62";
}
.f-cook-step-wrap .f-cook-step:nth-child(63):before {
  content: "63";
}
.f-cook-step-wrap .f-cook-step:nth-child(64):before {
  content: "64";
}
.f-cook-step-wrap .f-cook-step:nth-child(65):before {
  content: "65";
}
.f-cook-step-wrap .f-cook-step:nth-child(66):before {
  content: "66";
}
.f-cook-step-wrap .f-cook-step:nth-child(67):before {
  content: "67";
}
.f-cook-step-wrap .f-cook-step:nth-child(68):before {
  content: "68";
}
.f-cook-step-wrap .f-cook-step:nth-child(69):before {
  content: "69";
}
.f-cook-step-wrap .f-cook-step:nth-child(70):before {
  content: "70";
}
.f-cook-step-wrap .f-cook-step:nth-child(71):before {
  content: "71";
}
.f-cook-step-wrap .f-cook-step:nth-child(72):before {
  content: "72";
}
.f-cook-step-wrap .f-cook-step:nth-child(73):before {
  content: "73";
}
.f-cook-step-wrap .f-cook-step:nth-child(74):before {
  content: "74";
}
.f-cook-step-wrap .f-cook-step:nth-child(75):before {
  content: "75";
}
.f-cook-step-wrap .f-cook-step:nth-child(76):before {
  content: "76";
}
.f-cook-step-wrap .f-cook-step:nth-child(77):before {
  content: "77";
}
.f-cook-step-wrap .f-cook-step:nth-child(78):before {
  content: "78";
}
.f-cook-step-wrap .f-cook-step:nth-child(79):before {
  content: "79";
}
.f-cook-step-wrap .f-cook-step:nth-child(80):before {
  content: "80";
}
.f-cook-step-wrap .f-cook-step:nth-child(81):before {
  content: "81";
}
.f-cook-step-wrap .f-cook-step:nth-child(82):before {
  content: "82";
}
.f-cook-step-wrap .f-cook-step:nth-child(83):before {
  content: "83";
}
.f-cook-step-wrap .f-cook-step:nth-child(84):before {
  content: "84";
}
.f-cook-step-wrap .f-cook-step:nth-child(85):before {
  content: "85";
}
.f-cook-step-wrap .f-cook-step:nth-child(86):before {
  content: "86";
}
.f-cook-step-wrap .f-cook-step:nth-child(87):before {
  content: "87";
}
.f-cook-step-wrap .f-cook-step:nth-child(88):before {
  content: "88";
}
.f-cook-step-wrap .f-cook-step:nth-child(89):before {
  content: "89";
}
.f-cook-step-wrap .f-cook-step:nth-child(90):before {
  content: "90";
}
.f-cook-step-wrap .f-cook-step:nth-child(91):before {
  content: "91";
}
.f-cook-step-wrap .f-cook-step:nth-child(92):before {
  content: "92";
}
.f-cook-step-wrap .f-cook-step:nth-child(93):before {
  content: "93";
}
.f-cook-step-wrap .f-cook-step:nth-child(94):before {
  content: "94";
}
.f-cook-step-wrap .f-cook-step:nth-child(95):before {
  content: "95";
}
.f-cook-step-wrap .f-cook-step:nth-child(96):before {
  content: "96";
}
.f-cook-step-wrap .f-cook-step:nth-child(97):before {
  content: "97";
}
.f-cook-step-wrap .f-cook-step:nth-child(98):before {
  content: "98";
}
.f-cook-step-wrap .f-cook-step:nth-child(99):before {
  content: "99";
}
.f-cook-step-wrap .f-cook-step:nth-child(100):before {
  content: "100";
}

/* =================================================
*    おすすめのレッスン(common)
* =============================================== */
.f-recommend-area {
  background-color: #fff;
}
.f-recommend-area .f-recommend-area-title {
  font-weight: bold;
}

.f-recommend-list-wrap {
  display: grid;
  width: 100%;
}
.f-recommend-list-wrap .f-recommend-list-title {
  margin-top: 1rem;
}
.f-recommend-list-wrap .f-recommend-list__link {
  display: block;
}
.f-recommend-list-wrap .f-recommend-list .f-recommend-list-img {
  aspect-ratio: 1/1;
  border-radius: 1rem;
  overflow: hidden;
}
.f-recommend-list-wrap .f-recommend-list .f-recommend-list-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* =================================================
*    ページネーション(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: 4rem;
  padding-bottom: 4rem;
  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;
}

/* =================================================
*    レシピをシェア(common)
* =============================================== */
.f-sns-area {
  background-color: #fff;
  margin-top: 1rem;
}
.f-sns-area .f-sns-area-title {
  text-align: center;
  font-weight: bold;
}
.f-sns-area .f-sns-list-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;
  margin-top: 3rem;
}
.f-sns-area .f-sns-list-wrap .f-sns-list {
  width: 4rem;
}
.f-sns-area .f-sns-list-wrap .f-sns-list + .f-sns-list {
  margin-left: 2.5rem;
}

/* =====================================================================
*
*    pcレイアウト
*
* =================================================================== */
@media screen and (min-width: 1024px) {
  /* =================================================
  *    共通(pc)
  * =============================================== */
  .f-contents-area {
    max-width: 106rem;
    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;
  }
  /* =================================================
  *    レシピリスト、材料リスト(pc)
  * =============================================== */
  .f-recipe-info-list-wrap .f-recipe-info-list {
    line-height: 1.40625;
  }
  .f-recipe-info-list-wrap .f-recipe-info-name {
    font-size: 1.6rem;
  }
  .f-recipe-info-list-wrap .f-recipe-info-value {
    font-size: 1.6rem;
  }
  /* =================================================
  *    レシピメイン情報(pc)
  * =============================================== */
  .f-recipe-main-area {
    padding-top: 4rem;
    padding-bottom: 4.3rem;
  }
  .f-recipe-main-area .f-contents-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .f-recipe-main-area .f-recipe-main-img {
    width: 60.5rem;
    border-radius: 1.5rem;
    overflow: hidden;
  }
  .f-recipe-main-area .f-recipe-main-info-area {
    width: 38rem;
    margin-left: 5.5rem;
  }
  .f-recipe-main-area .f-recipe-main-title {
    font-size: 2.4rem;
  }
  .f-recipe-main-area .f-recipe-main-info {
    margin-top: 3rem;
  }
  .f-recipe-main-area .f-recipe-main-info__upper {
    padding: 1.5rem 1.75rem 2.1rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box {
    padding-top: 0.4rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box .f-recipe-info-text__title {
    font-size: 1.4rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box .f-recipe-info-text__data {
    font-size: 1.7rem;
    margin-top: 0.4rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box__icon {
    margin-right: 0.5rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box .f-recipe-upper-box__icon {
    width: 4rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box.time {
    width: 46.5%;
    padding-right: 2rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box.time .f-recipe-upper-box__icon {
    margin-right: 1rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box.calorie {
    width: 53.5%;
    padding-left: 2rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box.calorie .recipe-upper-box__icon {
    margin-right: 0.5rem;
  }
  .f-recipe-main-area .f-recipe-main-info__lower {
    padding: 2.4rem 2rem 0.8rem;
  }
  .f-recipe-main-area .f-nutrition-title {
    font-size: 1.6rem;
  }
  .f-recipe-main-area .f-recipe-info-list-wrap {
    margin-top: 0.9rem;
  }
  .f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner .f-recipe-info-list {
    width: calc(50% - 0.7rem);
    line-height: 1.40625;
  }
  .f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner .f-recipe-info-name {
    width: 9rem;
    font-size: 1.5rem;
  }
  .f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner .f-recipe-info-value {
    font-size: 1.5rem;
  }
  .f-recipe-main-area #js-accordion-trigger {
    pointer-events: none;
  }
  .f-recipe-main-area #js-accordion-trigger .js-accordion-icon {
    display: none;
  }
  .f-recipe-main-area #js-accordion-content {
    display: block !important;
  }
  /* =================================================
  *    レシピ詳細情報(pc)
  * =============================================== */
  .f-recipe-detail-area {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }
  .f-recipe-detail-area .f-contents-area {
    max-width: 104rem;
    padding: 5rem 7rem 5.2rem;
    border-radius: 2rem;
  }
  .f-recipe-detail-area .f-recipe-detail-summary {
    font-size: 1.7rem;
    line-height: 1.7;
  }
  .f-recipe-detail-area .f-recipe-detail-info-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 5rem;
  }
  .f-recipe-detail-area .f-recipe-detail-box.ingredients {
    width: 31rem;
  }
  .f-recipe-detail-area .f-recipe-detail-box.ingredients + .cook {
    margin-left: 6.4rem;
  }
  .f-recipe-detail-area .f-recipe-detail-box.cook {
    width: 52.6rem;
  }
  .f-recipe-detail-area .f-recipe-detail-box.cook + .ingredients {
    margin-left: 6.4rem;
  }
  .f-recipe-detail-area .f-recipe-detail-box.movie {
    width: 100%;
    margin-top: 5rem;
  }
  .f-recipe-detail-area .f-recipe-detail-title {
    font-size: 2.2rem;
    padding-bottom: 1.7rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap {
    margin-top: 0.5rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap .f-recipe-info-list {
    padding-top: 1.55rem;
    padding-bottom: 1.55rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap + .f-recipe-sauce-box {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap .f-recipe-info-name {
    width: 21rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap .f-recipe-info-value {
    width: 9rem;
  }
  .f-recipe-detail-area .f-recipe-sauce-box {
    padding: 2.5rem;
  }
  .f-recipe-detail-area .f-recipe-sauce-box .f-recipe-sauce-box-title {
    font-size: 1.8rem;
  }
  .f-recipe-detail-area .f-recipe-sauce-box .f-recipe-info-name {
    width: 16rem;
  }
  .f-recipe-detail-area .f-movie-title {
    font-size: 1.8rem;
    margin-top: 2.6rem;
  }
  .f-cook-step-wrap {
    margin-top: 0.7rem;
  }
  .f-cook-step-wrap .f-cook-step {
    font-size: 1.6rem;
    line-height: 1.52;
    padding-left: 4rem;
  }
  .f-cook-step-wrap .f-cook-step:before {
    font-size: 1.5rem;
    width: 2.7rem;
    height: 2.7rem;
    top: 1.5rem;
  }
  .f-cook-step-wrap .f-cook-step .f-cook-step-img {
    width: 24.5rem;
  }
  .f-cook-step-wrap .f-cook-step .f-cook-step-img.size-m {
    width: max(300px, 75%);
  }
  .f-cook-step-wrap .f-cook-step .f-cook-step-img.size-l {
    width: 100%;
  }
  .f-cook-step-wrap .f-cook-step .f-annotation-box {
    line-height: 1.4;
  }
  .f-cook-step-wrap .f-cook-step .f-annotation-text {
    font-size: 1.4rem;
    margin-top: 1rem;
  }
  /* =================================================
  *    おすすめのレッスン(pc)
  * =============================================== */
  .f-recommend-area {
    padding-top: 6.5rem;
    padding-bottom: 6rem;
  }
  .f-recommend-area .f-recommend-area-title {
    font-size: 2.4rem;
  }
  .f-recommend-area .f-recommend-area-title + .f-recommend-list-wrap {
    margin-top: 2.5rem;
  }
  .f-recommend-list-wrap {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
  }
  .f-recommend-list-wrap .f-recommend-list-title {
    font-size: 1.4rem;
    line-height: 1.60714286;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  /* =================================================
  *    レシピをシェア(pc)
  * =============================================== */
  .f-sns-area {
    padding-top: 5rem;
    padding-bottom: 6rem;
  }
  .f-sns-area .f-sns-area-title {
    font-size: 1.8rem;
  }
  .f-sns-area .f-btn-wrap {
    margin-top: 4rem;
  }
}
/* =====================================================================
*
*    spレイアウト
*
* =================================================================== */
@media screen and (max-width: 1023.9px) {
  /* =================================================
  *    共通(sp)
  * =============================================== */
  .f-contents-area {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  /* =================================================
  *    ボタン(sp)
  * =============================================== */
  .f-btn-wrap .f-btn {
    padding: 1.75rem;
    font-size: 1.4rem;
  }
  /* =================================================
  *    ぱんくず(sp)
  * =============================================== */
  .c-breadcrumb {
    width: 100%;
    overflow-x: auto;
  }
  .c-breadcrumb ol {
    white-space: nowrap;
  }
  /* =================================================
  *    レシピリスト、材料リスト(sp)
  * =============================================== */
  .f-recipe-info-list-wrap .f-recipe-info-list {
    line-height: 1.60714286;
  }
  .f-recipe-info-list-wrap .f-recipe-info-name {
    font-size: 1.4rem;
  }
  .f-recipe-info-list-wrap .f-recipe-info-value {
    font-size: 1.4rem;
  }
  /* =================================================
  *    レシピメイン情報(sp)
  * =============================================== */
  .f-recipe-main-area {
    padding-bottom: 2.9rem;
  }
  .f-recipe-main-area .f-contents-area {
    padding-right: 0;
    padding-left: 0;
  }
  .f-recipe-main-area .f-recipe-main-img {
    width: 100%;
  }
  .f-recipe-main-area .f-recipe-main-info-area {
    width: 100%;
    padding-right: 1.5em;
    padding: 0.1em 1em;
    margin-top: 2.5rem;
  }
  .f-recipe-main-area .f-recipe-main-title {
    font-size: 2rem;
  }
  .f-recipe-main-area .f-recipe-main-info {
    margin-top: 2.5rem;
  }
  .f-recipe-main-area .f-recipe-main-info__upper {
    padding: 1.1rem 1rem 1.7rem 1.2rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box .f-recipe-info-text__title {
    font-size: 1.3rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box .f-recipe-info-text__data {
    font-size: 1.6rem;
    margin-top: 0.5rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box .f-recipe-upper-box__icon {
    width: 3.5rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-right: 1rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box.time {
    padding-right: 1.05rem;
  }
  .f-recipe-main-area .f-recipe-main-info .f-recipe-upper-box.calorie {
    padding-left: 1.25rem;
  }
  .f-recipe-main-area .f-recipe-main-info__lower {
    padding: 1.4rem 2rem 1.5rem;
  }
  .f-recipe-main-area .f-nutrition-title {
    font-size: 1.4rem;
  }
  .f-recipe-main-area .f-recipe-info-list-wrap {
    margin-top: 1.3rem;
  }
  .f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner .f-recipe-info-list {
    width: calc(50% - 0.75rem);
  }
  .f-recipe-main-area .f-recipe-info-list-wrap .f-recipe-info-list-inner .f-recipe-info-name {
    width: 8.5rem;
  }
  .f-recipe-main-area #js-accordion-trigger .js-accordion-icon {
    position: relative;
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-project-primary);
    margin-left: 1.1rem;
  }
  .f-recipe-main-area #js-accordion-trigger .js-accordion-icon:before, .f-recipe-main-area #js-accordion-trigger .js-accordion-icon:after {
    content: "";
    position: absolute;
    display: block;
    background-color: #fff;
    width: 0.8rem;
    height: 0.1rem;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 0.5em;
  }
  .f-recipe-main-area #js-accordion-trigger .js-accordion-icon:before {
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg);
  }
  .f-recipe-main-area #js-accordion-trigger.active .js-accordion-icon:before {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  .f-recipe-main-area #js-accordion-content {
    display: none;
  }
  /* =================================================
  *    レシピ詳細情報(sp)
  * =============================================== */
  .f-recipe-detail-area {
    margin-top: 2.5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .f-recipe-detail-area .f-contents-area {
    padding: 3.5rem 2rem;
    border-radius: 1.5rem;
  }
  .f-recipe-detail-area .f-recipe-detail-summary {
    font-size: 1.5rem;
    line-height: 1.65;
  }
  .f-recipe-detail-area .f-recipe-detail-info-area {
    margin-top: 4.2rem;
  }
  .f-recipe-detail-area .f-recipe-detail-box {
    width: 100%;
  }
  .f-recipe-detail-area .f-recipe-detail-box + .f-recipe-detail-box {
    margin-top: 4.2rem;
  }
  .f-recipe-detail-area .f-recipe-detail-title {
    font-size: 1.8rem;
    padding-bottom: 1.4rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap {
    margin-top: 0.3rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap .f-recipe-info-list {
    padding-top: 1.03rem;
    padding-bottom: 1.04rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap + .f-recipe-sauce-box {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap .f-recipe-info-name {
    width: 62.295082%;
    padding-left: 1rem;
  }
  .f-recipe-detail-area .f-recipe-info-list-wrap .f-recipe-info-value {
    width: 29.508197%;
    padding-right: 1.5rem;
  }
  .f-recipe-detail-area .f-recipe-sauce-box {
    padding: 2rem;
  }
  .f-recipe-detail-area .f-recipe-sauce-box .f-recipe-sauce-box-title {
    font-size: 1.6rem;
  }
  .f-recipe-detail-area .f-recipe-sauce-box .f-recipe-sauce-box-title + .f-recipe-info-list-wrap {
    margin-top: 1rem;
  }
  .f-recipe-detail-area .f-recipe-sauce-box .f-recipe-info-list-wrap .f-recipe-info-name {
    padding-left: 0;
  }
  .f-recipe-detail-area .f-recipe-sauce-box .f-recipe-info-list-wrap .f-recipe-info-value {
    padding-right: 0;
  }
  .f-recipe-detail-area .f-movie-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 2rem;
  }
  .f-cook-step-wrap {
    margin-top: 1rem;
  }
  .f-cook-step-wrap .f-cook-step {
    font-size: 1.5rem;
    padding-left: 4.2rem;
  }
  .f-cook-step-wrap .f-cook-step + .f-cook-step {
    margin-top: 0.4rem;
  }
  .f-cook-step-wrap .f-cook-step:before {
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    top: 1.2rem;
  }
  .f-cook-step-wrap .f-cook-step .f-cook-step-inner {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
  .f-cook-step-wrap .f-cook-step .f-cook-step-img {
    width: 100%;
  }
  .f-cook-step-wrap .f-cook-step .f-cook-step-img img {
    width: 100%;
  }
  .f-cook-step-wrap .f-cook-step .f-annotation-box {
    font-size: 1.4rem;
    line-height: 1.3;
  }
  .f-cook-step-wrap .f-cook-step .f-annotation-text {
    font-size: 1.2rem;
    margin-top: 1.5rem;
  }
  /* =================================================
  *    おすすめのレッスン(sp)
  * =============================================== */
  .f-recommend-area {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-top: 5.5rem;
  }
  .f-recommend-area .f-recommend-area-title {
    font-size: 1.8rem;
    line-height: 1.5;
  }
  .f-recommend-area .f-recommend-area-title + .f-recommend-list-wrap {
    margin-top: 2rem;
  }
  .f-recommend-list-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
  .f-recommend-list-wrap .f-recommend-list-title {
    font-size: 1.3rem;
    line-height: 1.3;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-top: 1.2rem;
  }
  /* =================================================
  *    ページネーション(sp)
  * =============================================== */
  .pagination-area {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    font-size: 1.5rem;
  }
  /* =================================================
  *    レシピをシェア(sp)
  * =============================================== */
  .f-sns-area {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .f-sns-area .f-sns-area-title {
    font-size: 1.5rem;
  }
  .f-sns-area .f-btn-wrap {
    margin-top: 3rem;
  }
}
/* =====================================================================
*
*    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;
  }
}