@charset "UTF-8";
/*-----------------------------------------------------------
===  [ 長谷川あかりさんLP recipe.html ]  ====================
  既存サイトのルールに合わせる
  ・文字サイズは rem（common.css で html{font-size:10px}＝1rem=10px）
  ・ブレイクポイントは PC min-width:1200px ／ SP max-width:1199.98px の2段
  ・letter-spacing は em（Figmaの px ÷ 文字サイズ）
  ・セレクタは body#recipe で囲う。共通CSS（common.css）は触らない
------------------------------------------------------------*/

/* 両方共通
----------------------------------------------------*/
#recipe .rcp-page {
  position: relative;
  overflow: hidden;
  color: #302d2d;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}
/* 紙テクスチャの背景はスクロールに追従させない（Figma「PC_bg追従」1440×1000）。
   iOS Safari は background-attachment:fixed が効かないので position:fixed の疑似要素で敷く。
   幅は最大1440pxで中央（それより広い画面の左右は白のまま＝他ページと同じ） */
#recipe .rcp-page::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 1440px;
  transform: translateX(-50%);
  background: url(../images/recipe/bg_fixed.webp) center top / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}
/* 既存の basic.css は content-box のまま。LPの部品だけ border-box にする */
#recipe .rcp-main *,
#recipe .rcp-main *::before,
#recipe .rcp-main *::after,
#recipe .rcp-modal * {
  box-sizing: border-box;
}
#recipe .rcp-main img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
/* リセットは :where() で詳細度を #recipe だけ（1,0,0）に下げ、下の部品の指定（1,1,0）が必ず勝つようにする */
#recipe :where(.rcp-main, .rcp-modal) :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
#recipe :where(.rcp-main) :where(h1, h2, h3, h4, h5, p, dl, dd, figure) {
  margin: 0;
  padding: 0;
}
/* basic.css のリセットが span・li・dt・dd・small・p などに font-weight:normal を直接付けるので、
   .rcp-page の 500（Figma: Zen Kaku Gothic New Medium）が子に継承されない。
   LP内だけ継承に戻す（詳細度 1,0,0 なので明朝の 700 指定などが必ず勝つ） */
#recipe :where(.rcp-main, .rcp-main *, .rcp-modal *) {
  font-weight: inherit; /* main 自体も basic.css で normal にされるので含める */
}
/* 長音・小書き仮名を行頭に置かない（「ペ/ースト」「ヨ/ーグルト」のような折り返しを避ける） */
#recipe .rcp-main {
  line-break: strict;
}
/* PCだけ／SPだけの改行（改行位置がPCとSPで違う所）。
   common.css の .cmn-sp は SP で display:block!important になるので <br> には使わない。
   SPでの出し分けは「02. SP layout」ブロックにある */
#recipe .rcp-br-sp {
  display: none;
}
/* 単語の途中で折り返さない（Figmaは「ニュージーランド」を分けずに次の行へ送っている） */
#recipe .rcp-nowrap {
  white-space: nowrap;
}
/* 明朝（Zen Old Mincho Bold）を使う所 */
#recipe .rcp-ttl,
#recipe .rcp-statement__quotes,
#recipe .rcp-statement__name,
#recipe .rcp-movie__name,
#recipe .recipe-card__ttl,
#recipe .recipe-card__sub,
#recipe .recipe-card__tag,
#recipe .rcp-point__ttl {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
}

/* セクション見出し（動画・レシピ・ポイント共通） */
#recipe .rcp-ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
/* 字間は文字サイズを持つ子に付ける（h2自体は10pxのままなので、h2に0.04emを付けると0.4pxで固定されてしまう） */
#recipe .rcp-ttl__lead {
  color: #6d442e;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .rcp-ttl__main {
  color: #009256;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
/* 英字（Recipe／Point）の箱の高さはFigmaの値に固定し、画像ははみ出して見せる */
#recipe .rcp-ttl__en {
  display: block;
}
#recipe .rcp-ttl--white .rcp-ttl__main {
  color: #fff;
}
#recipe .rcp-ttl__main em {
  font-style: normal;
  color: #fff36b;
}

/* ステートメント */
#recipe .rcp-statement {
  position: relative;
}
#recipe .rcp-statement__deco img {
  position: absolute;
  max-width: none;
}
#recipe .rcp-statement__quotes {
  color: #302d2d;
  line-height: 3.4;
  letter-spacing: 0.05em;
  text-align: center;
}
#recipe .rcp-statement__quotes li {
  border-bottom: 1px solid #d6d0cb;
  margin-bottom: -1px; /* Figmaの線は高さ0。線の1pxを行の高さに足さない */
}
#recipe .rcp-statement__note {
  margin-top: 16px;
  color: #6d442e;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
#recipe .rcp-statement__profile {
  background: #eff7cb;
}
#recipe .rcp-statement__name {
  color: #6d442e;
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}
#recipe .rcp-statement__text {
  margin-top: 16px;
  font-size: 1.3rem;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: left;
}

/* 動画 */
#recipe .rcp-movie__btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
}
#recipe .rcp-movie__thumb {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #cecece;
}
#recipe .rcp-movie__thumb img {
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}
#recipe .rcp-movie__btn:hover .rcp-movie__thumb img,
#recipe .rcp-movie__btn:focus-visible .rcp-movie__thumb img {
  transform: scale(1.04);
}
#recipe .rcp-movie__name {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #009256;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* レシピ */
#recipe .rcp-recipe {
  position: relative;
}
#recipe .rcp-recipe__product {
  position: absolute;
  top: 0;
  z-index: 2;
}
#recipe .rcp-recipe__bg {
  /* ループ素材を縦に繰り返す。読み込み前の下地に緑 */
  background: #009256 url(../images/recipe/bg_green_loop_pc.webp) repeat-y center top / 1440px auto;
}
#recipe .rcp-ttl__en img {
  display: block;
}
#recipe .recipe-cat__label {
  text-align: center;
}
#recipe .recipe-cat__list {
  display: flex;
  flex-wrap: wrap;
}
#recipe .recipe-card {
  background: #fff;
  border-radius: 8px;
  filter: drop-shadow(16px 16px 24px rgba(122, 109, 79, 0.16));
  text-align: left;
}
#recipe .recipe-card__img {
  overflow: hidden;
  border-radius: 8px;
  background: #e0e0e0;
}
#recipe .recipe-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#recipe .recipe-card__ttl {
  color: #009256;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .recipe-card__sub {
  margin-top: 8px;
  color: #009256;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .recipe-card__tag {
  flex: 0 0 auto;
  padding: 3px 20px;
  border-radius: 24px;
  background: #e2f0a0;
  color: #009256;
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .recipe-card__cols {
  margin-top: 24px;
}
#recipe .recipe-card__block + .recipe-card__block {
  margin-top: 16px;
}
#recipe .recipe-card__subttl {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.04em;
}
#recipe .recipe-card__subttl::before,
#recipe .recipe-card__subttl::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: #b0a9a4;
}
#recipe .recipe-card__ing {
  margin-top: 8px;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .recipe-card__ing > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
/* 行間: Figmaは 行→4px→線（高さ0）→4px。線の1pxを足さないよう下側は3px */
#recipe .recipe-card__ing > div + div {
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid rgba(176, 169, 164, 0.3);
}
#recipe .recipe-card__ing dt {
  min-width: 0;
}
#recipe .recipe-card__ing dd {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
}
/* 分量の（…）。基本13px、違う所は s-pc12 / s-sp12 / s-sp15 を付ける（PC/SPブロックで指定） */
#recipe .recipe-card__ing small {
  font-size: 1.3rem;
}
/* 分量の2行目が（…）だけの行は、Figmaでは13pxの行（行の高さ20.8px）。親の15pxの行の高さにしない */
#recipe .recipe-card__ing dd br + small {
  display: block;
  line-height: 1.6;
}
#recipe .recipe-card__ing-head {
  margin-top: 24px; /* Figma 95:2206 ほか: 上24・下16 */
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .recipe-card__ing-head + .recipe-card__ing {
  margin-top: 16px;
}
#recipe .recipe-card__steps {
  margin-top: 8px;
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .recipe-card__steps li {
  display: flex;
  gap: 8px;
  /* Figmaは行末の字間（0.04em）を行幅に数えない。ブラウザは数えるので、1文字早く折り返す。
     その分だけ右にはみ出してよいことにして、Figmaと同じ位置で折り返させる */
  margin-right: -0.04em;
}
#recipe .recipe-card__steps li + li {
  margin-top: 8px;
}
#recipe .recipe-card__num {
  flex: 0 0 20px;
  text-align: center;
}

/* ポイント */
#recipe .rcp-point__item {
  text-align: center;
}
#recipe .rcp-point__icon img {
  display: block;
  margin: 0 auto;
}
#recipe .rcp-point__ttl {
  color: #6d442e;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
#recipe .rcp-point__text {
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: left;
}
#recipe .rcp-point__img img {
  display: block;
  margin: 0 auto;
}

/* 動画モーダル */
#recipe .rcp-modal[hidden] {
  display: none;
}
#recipe .rcp-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
#recipe .rcp-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
#recipe .rcp-modal__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#recipe .rcp-modal__close {
  position: absolute;
  right: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
#recipe .rcp-modal__close img {
  width: 100%;
  height: 100%;
}
#recipe .rcp-modal__player {
  aspect-ratio: 16 / 9;
  background: #000;
}
#recipe .rcp-modal__player iframe,
#recipe .rcp-modal__player video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* アニメーション（フェード系・要素系）
   既存サイトの仕組みを使う: 画面に入った .scrollAction に .active を付ける（js/script.js の scrollAction()）。
   LPでは js/recipe.js が DOMContentLoaded でも呼ぶ（script.js は load まで待つので、遅い回線で出てこない）。
   隠すのは <html class="rcp-js">（head のインラインJSが付ける）のときだけ＝JS無効・読み込み失敗でも本文は出る
----------------------------------------------------*/
/* MV: ふわっと */
.rcp-js #recipe .rcp-mv.scrollActionMv {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.rcp-js #recipe .rcp-mv.scrollActionMv.active {
  opacity: 1;
}
/* 見出し・文章・カード: 下からふわっと */
.rcp-js #recipe .rcp-fade.scrollAction {
  opacity: 0;
  translate: 0 30px;
  transition: opacity 0.9s ease, translate 0.9s ease;
}
.rcp-js #recipe .rcp-fade.scrollAction.active {
  opacity: 1;
  translate: 0 0;
}
.rcp-js #recipe .rcp-movie__list li + li .rcp-fade,
.rcp-js #recipe .recipe-cat__list > .recipe-card:nth-child(2),
.rcp-js #recipe .rcp-point__item:nth-child(2) {
  transition-delay: 0.15s;
}
.rcp-js #recipe .rcp-point__item:nth-child(3) {
  transition-delay: 0.3s;
}
/* 写真・イラスト・商品（要素系）: 少し小さい所からふわっと出て、そのあとゆっくり浮遊 */
.rcp-js #recipe .rcp-float.scrollAction {
  opacity: 0;
  scale: 0.92;
  transition: opacity 1s ease, scale 1s ease;
}
.rcp-js #recipe .rcp-float.scrollAction.active {
  opacity: 1;
  scale: 1;
  animation: rcp-float 6s ease-in-out 1s infinite;
}
.rcp-js #recipe .rcp-float--sway.scrollAction.active {
  animation-name: rcp-sway;
  animation-duration: 5s;
}
/* 揺れのずらし（上と同じ詳細度で後ろに書く。詳細度が低いと全部1sになる） */
.rcp-js #recipe .rcp-statement__photo02.scrollAction.active { animation-delay: 1.6s; }
.rcp-js #recipe .rcp-statement__blob.scrollAction.active { animation-delay: 2.2s; }
.rcp-js #recipe .rcp-statement__illust02.scrollAction.active { animation-delay: 1.8s; }
@keyframes rcp-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes rcp-sway {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 0 -8px; rotate: 3deg; }
}
/* 動きを減らす設定の端末・印刷では最初から表示して動かさない */
@media (prefers-reduced-motion: reduce) {
  .rcp-js #recipe .rcp-mv.scrollActionMv,
  .rcp-js #recipe .rcp-fade.scrollAction,
  .rcp-js #recipe .rcp-float.scrollAction {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
    animation: none !important;
  }
  #recipe .rcp-movie__thumb img {
    transition: none;
  }
  #recipe .rcp-movie__btn:hover .rcp-movie__thumb img,
  #recipe .rcp-movie__btn:focus-visible .rcp-movie__thumb img {
    transform: none;
  }
}
/* 印刷: PCレイアウト（1440幅）のままだと用紙からはみ出して右の列が切れるので縮小する。
   緑の上の白い見出しが消えないよう、背景色も印刷する */
@page {
  size: A4;
  margin: 10mm;
}
@media print {
  #recipe .rcp-page {
    zoom: 0.5;
  }
  #recipe .rcp-recipe__bg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rcp-js #recipe .rcp-mv.scrollActionMv,
  .rcp-js #recipe .rcp-fade.scrollAction,
  .rcp-js #recipe .rcp-float.scrollAction {
    opacity: 1;
    translate: none;
    scale: none;
    transition: none;
    animation: none !important;
  }
}

/* ***************************************************************************** */
/** -------------------------------------------------------
 ** 01. PC layout
 ** ------------------------------------------------------- */
@media print, screen and (min-width: 1200px) {
  /* 既存ヘッダー（PCは通常配置・height 88px＋padding-top 24px＝112px）の下にMVを潜り込ませる */
  #recipe .rcp-mv {
    margin-top: -112px;
  }
  #recipe .rcp-mv__img img {
    display: block;
    width: 100%;
  }

  #recipe .rcp-ttl__lead {
    font-size: 2.2rem;
  }
  #recipe .rcp-ttl__main {
    font-size: 4rem;
  }

  /* ステートメント（Figma sec_statement 1441×540。MVに20px重なる） */
  #recipe .rcp-statement {
    height: 540px;
    margin-top: -20px;
  }
  #recipe .rcp-statement__photo01 { left: calc(50% - 868px); top: -60px; width: 574px; z-index: 1; }
  #recipe .rcp-statement__photo02 { left: calc(50% + 371px); top: 144px; width: 431px; z-index: 1; }
  #recipe .rcp-statement__illust01 { left: calc(50% + 358px); top: 55px; width: 160px; z-index: 2; }
  #recipe .rcp-statement__illust02 { left: calc(50% - 481px); top: 394px; width: 147px; z-index: 2; }
  #recipe .rcp-statement__blob { left: calc(50% - 818px); top: 247px; width: 303px; z-index: 2; }
  #recipe .rcp-statement__inner {
    position: relative;
    z-index: 3;
    width: 600px;
    margin: 0 auto;
    padding-top: 70px;
  }
  #recipe .rcp-statement__quotes {
    font-size: 2.4rem;
  }
  #recipe .rcp-statement__quotes li span + span {
    margin-left: 0.33em; /* Figmaは半角スペース1つ（文字の間24px）。全角「！」の余白と合わせて一致 */
  }
  #recipe .rcp-statement__profile {
    margin-top: 40px;
    padding: 32px 48px;
  }

  /* 動画 */
  #recipe .rcp-movie {
    width: 1120px;
    margin: 80px auto 0;
  }
  #recipe .rcp-movie__list {
    display: flex;
    justify-content: space-between;
    margin-top: 64px;
  }
  #recipe .rcp-movie__list li {
    width: 536px;
  }
  #recipe .rcp-movie__name {
    gap: 16px;
    margin-top: 23px;
    font-size: 2.2rem;
  }
  #recipe .rcp-movie__name img {
    width: 40px;
  }

  /* レシピ */
  #recipe .rcp-recipe {
    margin-top: 80px;
  }
  #recipe .rcp-recipe__product {
    left: min(calc(50% + 308px), calc(100% - 312px)); /* 1200〜1300px幅で右端が切れないように */
    width: 312px;
  }
  #recipe .rcp-recipe {
    padding-top: 83px; /* 商品画像が緑の上端に83pxかかる。marginだと相殺されるのでpadding */
  }
  #recipe .rcp-recipe__bg {
    padding: 120px 0 160px;
  }
  #recipe .rcp-recipe__inner {
    width: 1120px;
    margin: 0 auto;
  }
  #recipe .rcp-recipe .rcp-ttl {
    margin-bottom: 72px;
  }
  #recipe .rcp-recipe .rcp-ttl__en {
    height: 32px; /* Figma 95:2109 */
  }
  #recipe .rcp-recipe .rcp-ttl__en img {
    width: 63px;
  }
  #recipe .recipe-cat + .recipe-cat {
    margin-top: 88px;
  }
  #recipe .recipe-cat__label img {
    width: 400px;
  }
  #recipe .recipe-cat__list {
    gap: 32px;
    margin-top: 40px;
  }
  #recipe .recipe-card {
    width: 544px;
    padding: 24px;
  }
  #recipe .recipe-card__img {
    height: 280px;
  }
  #recipe .recipe-card__body {
    margin-top: 32px;
    padding: 0 24px 24px;
  }
  #recipe .recipe-card__ttl {
    font-size: 2.4rem;
  }
  #recipe .recipe-card__sub {
    font-size: 1.8rem;
  }
  #recipe .recipe-card__ttl small {
    font-size: 1.8rem; /* （カルドソ）Figma PC 18px */
  }
  /* 材料名の列: Figmaは基本326px、分量が長い行だけ216px（is-narrow） */
  #recipe .recipe-card__ing dt {
    flex: 0 0 326px;
  }
  #recipe .recipe-card__ing dt.is-narrow {
    flex-basis: 216px;
  }
  #recipe .recipe-card__ing small.s-pc12 {
    font-size: 1.2rem;
  }
  /* 家族ごはんのサンド2枚だけ「材料」と「作り方」の間が24px（Figma 95:2430・95:2474） */
  #recipe .recipe-cat:nth-of-type(3) .recipe-card:not(.recipe-card--wide) .recipe-card__block + .recipe-card__block {
    margin-top: 24px;
  }
  /* 横長カード（副菜） */
  #recipe .recipe-card--wide {
    display: flex;
    gap: 32px;
    width: 100%;
  }
  #recipe .recipe-card--wide .recipe-card__img {
    flex: 0 0 400px;
    height: auto;
  }
  #recipe .recipe-card--wide .recipe-card__body {
    flex: 1 1 auto;
    margin-top: 0;
    padding: 24px;
  }
  #recipe .recipe-card--wide .recipe-card__head {
    display: flex;
    align-items: stretch; /* Figma: 「副菜」ラベルはタイトルの高さいっぱい */
    gap: 8px;
  }
  #recipe .recipe-card--wide .recipe-card__tag {
    display: flex;
    align-items: center;
  }
  #recipe .recipe-card--wide .recipe-card__ing dt,
  #recipe .recipe-card--wide .recipe-card__ing dd {
    flex: 1 1 0; /* 2列の中は材料名・分量が半々（Figma 95:2532 ほか 136/136） */
  }
  /* 長い材料名（ピュアナチュールオーガニックヨーグルトのホエイ）は分量を詰めて2行に */
  #recipe .recipe-card--wide .recipe-card__ing > div.is-long dd {
    flex: 0 0 auto;
  }
  #recipe .recipe-card--wide .recipe-card__cols {
    margin-top: 24px;
  }
  #recipe .recipe-card--wide .recipe-card__block + .recipe-card__block {
    margin-top: 24px;
  }
  #recipe .recipe-card--wide .recipe-card__ing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 32px;
  }
  #recipe .recipe-card--wide .recipe-card__ing > div + div {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  #recipe .recipe-card--wide .recipe-card__ing > div:nth-child(2n) {
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px solid rgba(176, 169, 164, 0.3);
  }

  /* ポイント（上の余白はFigmaの見た目に合わせる） */
  #recipe .rcp-point {
    width: 1120px;
    margin: 118px auto 160px; /* 緑背景の下端→ポイント見出し 118px */
  }
  #recipe .rcp-point .rcp-ttl__en {
    height: 32px; /* Figma 95:2746 */
  }
  #recipe .rcp-point .rcp-ttl__en img {
    width: 53px;
  }
  #recipe .rcp-point__list {
    display: flex;
    gap: 24px;
    margin-top: 64px;
  }
  #recipe .rcp-point__item {
    width: 357px;
  }
  #recipe .rcp-point__item:nth-child(2) {
    padding-top: 64px;
  }
  #recipe .rcp-point__icon img {
    width: 123px;
  }
  #recipe .rcp-point__ttl {
    margin-top: 8px;
    font-size: 2.4rem;
  }
  #recipe .rcp-point__text {
    width: 325px;
    margin: 16px auto 0;
  }
  #recipe .rcp-point__img {
    margin-top: 16px;
  }
  #recipe .rcp-point__img img {
    width: 357px;
  }

  /* 動画モーダル（Figma 136:10401: 動画800×450 y=195／閉じる40px y=147＝ボタン下端と動画上端の間は8px・右端揃え）
     高さの低い画面では×ボタンが画面外に出ないよう、画面の高さからも幅を決める（×の分 上に48px＋余白） */
  #recipe .rcp-modal__box {
    width: min(800px, 90vw, calc((100vh - 136px) * 16 / 9));
    width: min(800px, 90vw, calc((100dvh - 136px) * 16 / 9));
  }
  #recipe .rcp-modal__close {
    top: -48px;
    width: 40px;
    height: 40px;
  }
}

/** -------------------------------------------------------
 ** 02. SP layout
 ** ------------------------------------------------------- */
@media screen and (max-width: 1199.98px) { /* 1199px だと拡大率で幅が 1199.5px などの時にPC/SPどちらも当たらない。LPだけ 1199.98 */
  /* SPも本文は Zen Kaku Gothic New（Figma SP 18:5005）。common.css のSP既定は Noto Sans JP */
  /* PCだけ／SPだけの改行の出し分け */
  #recipe .rcp-br-sp {
    display: inline;
  }
  #recipe .rcp-br-pc {
    display: none;
  }
  #recipe .rcp-page::before {
    background-image: url(../images/recipe/bg_fixed_sp.webp); /* Figma「SP_bg追従」 */
  }
  /* ハンバーガーの下に敷く緑（Figma sp_header 18:5275 の Mask group・390幅で右上 97×130）。
     既存のハンバーガーは position:fixed・白線なので、緑も固定しないとスクロール後に線が見えなくなる。 */
  #recipe #header::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: 97px;
    height: 130px;
    background: url(../images/recipe/hd_blob_sp.webp) no-repeat right top / 100% 100%;
    z-index: 99; /* .nav-button（z-index:100）の下、メニュー背景（90）の上 */
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  /* メニューを開いている間は、メニュー背景の緑と二重にならないよう消す */
  #recipe #header:has(.nav-button.active)::before {
    opacity: 0;
  }
  #recipe .rcp-recipe__bg {
    background-image: url(../images/recipe/bg_green_loop_sp.webp);
    background-size: 100% auto;
  }
  /* MVはSP用1枚画像（実寸780px）。タブレット幅で引き伸ばさないよう、本文と同じ600pxを上限に中央 */
  #recipe .rcp-mv {
    max-width: 600px;
    margin: 0 auto;
  }
  #recipe .rcp-mv__img img {
    display: block;
    width: 100%;
  }

  #recipe .rcp-ttl__lead {
    font-size: 1.8rem; /* Figma SP 40:6815 */
  }
  #recipe .rcp-ttl__main {
    font-size: 2.8rem;
  }

  /* SPの中身の幅: 左右16px（Figma 390幅で358）。タブレット幅で広がりすぎないよう上限 */
  #recipe .rcp-statement__inner,
  #recipe .rcp-movie,
  #recipe .rcp-recipe__inner,
  #recipe .rcp-point {
    width: calc(100% - 32px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ステートメント（MV画像948pxのうち928pxの位置から始まる） */
  #recipe .rcp-statement {
    display: flex;
    flex-direction: column;
    margin-top: calc(min(100vw, 600px) * -0.051); /* MVの幅（上限600px）の5.1%だけ重ねる */
  }
  #recipe .rcp-statement__inner {
    order: 1;
    position: relative;
    z-index: 2;
  }
  #recipe .rcp-statement__quotes {
    font-size: min(1.8rem, calc((100vw - 32px) / 19.8)); /* 390幅で18px（Figma）。狭い画面では1行目の19文字が1行に収まる大きさまで縮める（320〜350px対策） */
    letter-spacing: 0.04em; /* Figma SP 0.72px÷18px。PCの0.05emだと1行目が折り返す */
  }
  #recipe .rcp-statement__quotes li,
  #recipe .rcp-statement__quotes li span {
    display: block;
  }
  #recipe .rcp-statement__quotes li {
    border-bottom: 0;
    margin-bottom: 0;
  }
  #recipe .rcp-statement__quotes li span {
    border-bottom: 1px solid #d6d0cb;
    margin-bottom: -1px;
  }
  #recipe .rcp-statement__profile {
    margin-top: 48px;
    padding: 32px 48px; /* Figma SP 64:2372（PCと同じ px-48 py-32） */
  }
  /* SPの写真まわり（Figma SP img 390×305 の配置を％に） */
  #recipe .rcp-statement__deco {
    order: 2;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 56px auto 0;
    aspect-ratio: 390 / 305;
    z-index: 3; /* 上にはみ出す写真が隠れないよう前面に。切り抜きもしない（横のはみ出しは .rcp-page の overflow で止まる） */
  }
  #recipe .rcp-statement__photo01 { left: -7.78%; top: -9.84%; width: 73.6%; z-index: 1; }
  #recipe .rcp-statement__photo02 { left: 53.85%; top: 41.64%; width: 49.5%; z-index: 2; }
  #recipe .rcp-statement__blob { left: -16.67%; top: 33.77%; width: 45.5%; z-index: 3; }
  #recipe .rcp-statement__illust02 { left: 61.92%; top: 4.92%; width: 23.2%; z-index: 4; }
  #recipe .rcp-statement__illust01 { left: 32.18%; top: 66.56%; width: 24.77%; z-index: 5; }

  /* 動画 */
  #recipe .rcp-movie {
    margin-top: 104px;
  }
  #recipe .rcp-movie__list {
    margin-top: 40px;
  }
  #recipe .rcp-movie__list li + li {
    margin-top: 48px;
  }
  #recipe .rcp-movie__name {
    gap: 8px; /* Figma SP 108:912 */
    margin-top: 16px;
    font-size: 1.6rem;
  }
  #recipe .rcp-movie__name img {
    width: 32px;
  }

  /* レシピ */
  #recipe .rcp-recipe {
    margin-top: 120px;
  }
  #recipe .rcp-recipe__product {
    left: 53%;
    width: 136px;
  }
  #recipe .rcp-recipe {
    padding-top: 56px;
  }
  #recipe .rcp-recipe__bg {
    padding: 104px 0;
  }
  #recipe .rcp-recipe .rcp-ttl {
    margin-bottom: 64px;
  }
  #recipe .rcp-recipe .rcp-ttl__en,
  #recipe .rcp-point .rcp-ttl__en {
    height: 20px; /* Figma SP 27:5793・27:5721 */
  }
  #recipe .rcp-recipe .rcp-ttl__en img {
    width: 48px;
  }
  #recipe .recipe-cat + .recipe-cat {
    margin-top: 72px;
  }
  /* SP用のカテゴリ見出し（358×64・Figma 35:6234 ほか。<picture> で切り替え） */
  #recipe .recipe-cat__label img {
    width: 100%;
    max-width: 358px;
  }
  #recipe .recipe-cat__list {
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
  }
  #recipe .recipe-card {
    padding: 16px;
  }
  #recipe .recipe-card__img {
    aspect-ratio: 326 / 184;
  }
  #recipe .recipe-card__body {
    margin-top: 24px;
    padding: 0 16px 24px;
  }
  #recipe .recipe-card__ttl {
    font-size: 2rem;
  }
  #recipe .recipe-card__sub {
    font-size: 1.5rem;
  }
  #recipe .recipe-card__ttl small {
    font-size: 1.5rem; /* （カルドソ）Figma SP 15px */
  }
  #recipe .recipe-card__ing small.s-sp12 {
    font-size: 1.2rem;
  }
  #recipe .recipe-card__ing small.s-sp15 {
    font-size: 1.5rem; /* Figma SP では（1合）（70g）を小さくしていない */
  }
  /* SPで（…）の途中で改行する分量は、2行目を（…）の文字サイズの行の高さにする（Figma: 100g…の行42・3g…の行45）。
     dd を小さい文字にして行の高さの基準を下げ、頭の数字（.rcp-amt）だけ15pxに戻す */
  #recipe .recipe-card__ing dd:has(small .rcp-br-sp) {
    font-size: 1.3rem;
  }
  #recipe .recipe-card__ing dd:has(small.s-sp12 .rcp-br-sp) {
    font-size: 1.2rem;
  }
  #recipe .recipe-card__ing .rcp-amt {
    font-size: 1.5rem;
  }
  /* 横長カード（副菜）もSPは縦積み。見出しは「副菜」ラベルとタイトルを横並び（Figma SP 95:4956: 上揃え・間16） */
  #recipe .recipe-card--wide .recipe-card__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  #recipe .recipe-card__tag {
    padding: 2px 16px; /* Figma SP 95:4957 */
    font-size: 1.5rem;
  }
  /* SPの材料は「材料名｜分量」を同じ幅の2列に（Figma SP 95:4463 等: 両方 flex-1）。
     これで Figma どおり長い材料名は折り返し、「ほんのすこし」などの分量は1行に収まる */
  #recipe .recipe-card__ing dt,
  #recipe .recipe-card__ing dd {
    flex: 1 1 0;
    min-width: 0;
  }
  #recipe .recipe-card__ing > div.is-long dd {
    flex: 0 0 auto; /* 長い材料名は分量を詰めて2行に */
  }

  /* ポイント */
  #recipe .rcp-point {
    margin-top: 120px;
    margin-bottom: 160px;
  }
  #recipe .rcp-point .rcp-ttl__en img {
    width: 40px;
  }
  #recipe .rcp-point__list {
    margin-top: 40px;
  }
  #recipe .rcp-point__item {
    padding: 0 16px; /* Figma SP 27:5656: 左右16 */
  }
  #recipe .rcp-point__item + .rcp-point__item {
    margin-top: 32px;
  }
  #recipe .rcp-point__icon img {
    width: 98px;
    height: 86px; /* Figma SP 27:5660（比率どおりだと86.8で、3項目で積み上がる） */
    object-fit: contain;
  }
  #recipe .rcp-point__ttl {
    margin-top: 16px; /* Figma SP: アイコン→見出し 16（PCは8） */
    font-size: 2rem;
  }
  #recipe .rcp-point__text {
    width: 327px; /* Figma SP 27:5724 の中の本文（幅327・中央） */
    max-width: 100%;
    margin: 16px auto 0;
  }
  #recipe .rcp-point__img {
    margin-top: 24px;
  }
  #recipe .rcp-point__img img {
    width: 294px;
    height: 230px; /* Figma SP 27:5736（比率どおりだと230.6） */
    object-fit: contain;
  }

  /* 動画モーダル（Figma 136:11358: 動画359幅・閉じる32pxは動画の右上16px上） */
  #recipe .rcp-modal__box {
    width: min(calc(100% - 32px), 800px, calc((100vh - 112px) * 16 / 9));
    width: min(calc(100% - 32px), 800px, calc((100dvh - 112px) * 16 / 9)); /* スマホ横向きでも×が画面内に */
  }
  #recipe .rcp-modal__close {
    top: -48px;
    width: 32px;
    height: 32px;
  }
}