/* =========================================================================
   recipe_2026.css  —  2026 リニューアル レシピ詳細用（#705）
   -------------------------------------------------------------------------
   目的: cooking_method の DB 生HTMLが旧クラスのまま残る quarantine レシピ
   （replaceCookingMethodText で新 ffa- 手順へ変換できない約26-31%）を、
   HTML 据え置きのまま CSS のみで mock(B03-02-01) の手順デザインへ寄せる。

   方針: 旧 recipe.css の全コピーは使わず、レシピ詳細で実際に描画される
   ajirei-* クラスのみを対象に最小構成で記述する（未使用ルールは読み込まない）。
   対象クラス（detail.phtml が描画する cooking_method 生HTML 由来）:
     ajirei-recipe-detail__sub-title / ajirei-recipe-howto(_inner/__left/__right/__illust)
     ajirei-list-cook(__item/__label) / ajirei-label
   ※ ajirei-recipe-howto-foot 系は use_tool カラム由来で detail では未描画のため対象外。
   スコープを .ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure に限定し、
   新レシピ詳細ページの作り方内のみ適用（ffa- 変換済みクリーンレシピには非該当）。
   ========================================================================= */

/* --- サブ見出し（下準備 / 調理 等。旧 ::before の左赤バーは除去し節見出しに） --- */
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-detail__sub-title {
  margin: 24px 0 12px; padding: 0; border: 0; color: #333;
  font-size: 18px; font-weight: 700; line-height: 1.4;
}
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-detail__sub-title::before {
  content: none; display: none;
}
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-detail__sub-title span {
  margin-right: 10px; color: #d6000f;
}

/* --- 手順ブロック（旧 float レイアウトを解除し flex 行へ） --- */
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-howto { margin: 0; padding: 0; }
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-howto_inner { margin: 0; padding: 0; background: none; }

/* 1手順 = ol.ajirei-list-cook を flex 行に（番号＋テキスト / 画像は下段） */
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-list-cook {
  list-style: none; margin: 0; padding: 0 0 30px;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 10px;
}
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-howto__left {
  flex: 1 1 100%; float: none; width: auto;
}
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-list-cook__item {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px; line-height: 1.7;
}
/* 番号バッジ（旧 <i>1</i> を mock の赤丸へ） */
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-list-cook__label {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 40px;
  display: inline-flex; justify-content: center; align-items: center;
  margin: 0; color: #fff; background-color: #d6000f;
  font-size: 18px; font-weight: 700; font-style: normal; line-height: 1;
}
/* 手順画像（テキスト下に回り込み・中央寄せ。旧 float:right / width:350px を解除） */
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-howto__right {
  flex: 0 0 100%; float: none; width: 100%; max-width: 100%;
  margin: 0; padding: 8px 0 0; text-align: center;
}
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-howto__illust { margin: 0; text-align: center; }
.ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-howto__illust img {
  border-radius: 5px; max-width: 360px; height: auto; margin: 0 auto; display: block;
}

/* --- SP --- */
@media screen and (max-width: 767px) {
  .ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-list-cook__label {
    flex: 0 0 30px; width: 30px; height: 30px; font-size: 16px;
  }
  .ffa-recipe-detail .ffa-recipe-detail-ingradients__procedure .ajirei-recipe-howto__right {
    padding-left: 0;
  }
}