@charset "UTF-8";
/* mhrecipe v1 2026-11-05 レシピのフリーページ（おいしいレシピ集 17313 の 14 ページ）を Sapphire Grove にそろえる
   置き場所：/docs/resource/css/mhrecipe.css（読み込みは各ページの head タグの extra に link。build.py の SG_RECIPES）
   範囲：本文の <div class="mhg mhrc"> だけ。古いページ用の head の style（角丸・青・赤）はこのページには入れない。
   Shun さん 11-04「ステップバイステップの作り方も含めてページ全体を新しいテーマでデザインを統一」。
   色・書体は mhrsp.css の変数（--mh-navy など）。mhrsp.css が無い画面でも読めるよう、変数には既定値を書く。
   スマホを先に書き、769px 以上で PC に広げる。本文 16px 以上。角丸 0・影なし。 */

html body .mhg.mhrc {
  --n: var(--mh-navy, #022068); --g: var(--mh-gold, #c2a849); --c: var(--mh-cream, #faf7f1);
  --t: var(--mh-text, #1d2433); --l: var(--mh-line, #e3e0d8); --s: var(--mh-sub, #6b7280);
  --serif: var(--mh-serif, "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif);
  --en: var(--mh-en, "Cinzel", "Cormorant Garamond", "Times New Roman", serif);
  max-width: 760px; margin: 0 auto; color: var(--t); font-family: var(--serif);
  font-size: 16px; line-height: 1.85; letter-spacing: .03em; text-align: left;
  counter-reset: mhrc-r;
}
html body .mhg.mhrc * { border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box; }
html body .mhg.mhrc :is(p, li, dd, dt, td, th) { font-size: 16px; line-height: 1.85; }
html body .mhg.mhrc p { margin: 0 0 1em; }
html body .mhg.mhrc img { display: block; max-width: 100%; height: auto; }
html body .mhg.mhrc a { color: var(--n); text-decoration: underline; text-decoration-color: var(--g); text-underline-offset: 4px; transition: opacity .3s; }
html body .mhg.mhrc a:hover { opacity: .5; }
html body .mhg.mhrc b { font-weight: 800; }

/* ページの題（記事の題）の上に英字ラベル */
html body #main-column #Journal:has(.mhg.mhrc) > article > h2 { text-align: center; font-size: 17px; letter-spacing: .08em; line-height: 1.7; color: var(--mh-text, #1d2433); margin: 8px 0 32px; }
html body #main-column #Journal:has(.mhg.mhrc) > article > h2::before { content: "RECIPE"; display: block; margin: 0 0 6px; font-family: var(--mh-en, "Cinzel", serif); font-size: 25px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; color: var(--mh-navy, #022068); }
html body #main-column #Journal:has(.mhg.mhrc) > article > h2::after { content: ""; display: block; width: 40px; height: 1px; margin: 16px auto 0; background: var(--mh-gold, #c2a849); }

/* リード・目次 */
html body .mhg.mhrc .lead { background: var(--c); border: 0; border-top: 1px solid var(--g); border-bottom: 1px solid var(--g); padding: 24px 20px; margin: 0 0 32px; }
html body .mhg.mhrc .lead p:last-child { margin: 0; }
html body .mhg.mhrc .lead b { display: block; margin: 0 0 6px; color: var(--n); font-size: 17px; line-height: 1.8; }
html body .mhg.mhrc .toc { border: 1px solid var(--l); background: #fff; padding: 20px 22px; margin: 0 0 40px; }
html body .mhg.mhrc .toc > b { display: block; font-weight: 800; letter-spacing: .08em; }
html body .mhg.mhrc .toc > b::before { content: "CONTENTS"; display: block; margin: 0 0 2px; font-family: var(--en); font-size: 14px; letter-spacing: .15em; color: var(--g); }
html body .mhg.mhrc .toc ol { counter-reset: mhrc-toc; list-style: none !important; margin: 10px 0 0 !important; padding: 0 !important; }
html body .mhg.mhrc .toc li { counter-increment: mhrc-toc; list-style: none !important; position: relative; padding: 9px 0 9px 38px; border-top: 1px solid var(--l); font-size: 15px; }
html body .mhg.mhrc .toc li::before { content: counter(mhrc-toc, decimal-leading-zero); position: absolute; left: 0; top: 9px; font-family: var(--en); font-size: 14px; letter-spacing: .05em; color: var(--g); }
html body .mhg.mhrc .toc li::marker { content: none; }
html body .mhg.mhrc .toc a { text-decoration: none; }

/* 見出し：h2 は英字＋和文の 2 段で中央。レシピは RECIPE 01・02…、コツ・質問・商品は固定の英字 */
html body .mhg.mhrc h2 {
  text-align: center !important; font-family: var(--serif); font-size: 19px !important; font-weight: 800 !important; letter-spacing: .08em; line-height: 1.6 !important;
  color: var(--t) !important; background: none !important; border: 0 !important; padding: 0 !important; margin: 80px 0 28px !important; height: auto !important; text-indent: 0 !important;
  scroll-margin-top: calc(var(--mh-hd, 60px) + 20px);
}
html body .mhg.mhrc h2::before { content: "NOTE"; display: block; margin: 0 0 4px; font-family: var(--en); font-size: 15px; font-weight: 700; letter-spacing: .2em; line-height: 1.3; color: var(--g); }
html body .mhg.mhrc h2::after { content: ""; display: block; width: 40px; height: 1px; margin: 16px auto 0; background: var(--g); }
html body .mhg.mhrc h2[id^="mh-r"] { counter-increment: mhrc-r; }
html body .mhg.mhrc h2[id^="mh-r"]::before { content: "RECIPE " counter(mhrc-r, decimal-leading-zero); }
html body .mhg.mhrc h2#mh-tip::before { content: "TIPS"; }
html body .mhg.mhrc h2#mh-faq::before { content: "FAQ"; }
html body .mhg.mhrc h2#mh-shop::before { content: "FROM OUR FARM"; }
html body .mhg.mhrc h2#mh-cmp::before { content: "COMPARE"; }
html body .mhg.mhrc h2#mh-save::before { content: "KEEP"; }
html body .mhg.mhrc > h2:first-of-type { margin-top: 48px !important; }

/* h3：材料・作り方は英字の小さなラベル付き、それ以外は紺の細線 */
html body .mhg.mhrc h3 {
  font-family: var(--serif); font-size: 18px !important; font-weight: 800 !important; letter-spacing: .06em; line-height: 1.6 !important; color: var(--n) !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--g) !important; padding: 0 0 10px !important; margin: 40px 0 18px !important;
}
html body .mhg.mhrc h3:is(:has(+ table.ing), :has(+ img + table.ing))::before { content: "INGREDIENTS"; }
html body .mhg.mhrc h3:is(:has(+ ol.steps), :has(+ .tip + ol.steps))::before { content: "HOW TO MAKE"; }
html body .mhg.mhrc h3::before { display: block; margin: 0 0 2px; font-family: var(--en); font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--g); }

/* 写真：完成写真は幅いっぱい、下に小さく「写真はイメージです。」 */
html body .mhg.mhrc > img { width: 100%; margin: 0 0 8px; }
html body .mhg.mhrc > img + p.note { margin: 0 0 24px; text-align: right; }
html body .mhg.mhrc > h2 + p { margin-bottom: 24px; }
html body .mhg.mhrc .note { font-size: 14px !important; line-height: 1.8 !important; color: var(--s); }

/* 分量・時間・道具：細線で区切った帯 */
html body .mhg.mhrc ul.rmeta { display: flex; flex-wrap: wrap; gap: 0; list-style: none !important; margin: 16px 0 32px !important; padding: 0 !important; border-top: 1px solid var(--l); border-bottom: 1px solid var(--l); }
html body .mhg.mhrc ul.rmeta li { list-style: none !important; flex: 1 1 100%; display: flex; gap: 14px; align-items: baseline; background: none; padding: 12px 4px; margin: 0; font-size: 15px; color: var(--t); border-bottom: 1px solid var(--l); }
html body .mhg.mhrc ul.rmeta li:last-child { border-bottom: 0; }
html body .mhg.mhrc ul.rmeta li::before, html body .mhg.mhrc ul.rmeta li::marker { content: none !important; }
html body .mhg.mhrc ul.rmeta b { flex: none; min-width: 5.5em; margin: 0; font-size: 14px; letter-spacing: .1em; color: var(--n); }

/* 材料：点線でつないだ一覧、グループ名は生成りの帯 */
html body .mhg.mhrc table.ing { width: 100%; border-collapse: collapse; margin: 0 0 24px; border: 0; border-top: 1px solid var(--g); }
html body .mhg.mhrc table.ing td { border: 0; border-bottom: 1px dotted #cfcabd; padding: 12px 6px; vertical-align: baseline; background: none; width: auto; }
html body .mhg.mhrc table.ing td:last-child { white-space: nowrap; text-align: right; color: var(--n); font-weight: 800; }
html body .mhg.mhrc table.ing tr.g td { background: var(--c); color: var(--n); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-align: left; border-bottom: 0; padding: 8px 10px; }
html body .mhg.mhrc table.ing + img, html body .mhg.mhrc h3 + img { width: 100%; margin: 0 0 16px; }

/* ほかの表（比べ方・保存の目安など） */
html body .mhg.mhrc table:not(.ing) { width: 100%; border-collapse: collapse; margin: 0 0 24px; border-top: 1px solid var(--g); }
html body .mhg.mhrc table:not(.ing) :is(th, td) { border: 0; border-bottom: 1px solid var(--l); padding: 12px 10px; vertical-align: top; background: none; font-size: 15px; }
html body .mhg.mhrc table:not(.ing) th { color: var(--n); font-weight: 800; letter-spacing: .06em; text-align: left; }
html body .mhg.mhrc table:not(.ing) td.k { background: var(--c); font-weight: 800; color: var(--n); }

/* 作り方：STEP 01 の英字番号、写真は文の下に幅いっぱい（PC は文と写真を横に並べる） */
html body .mhg.mhrc ol.steps { counter-reset: mhrc-s; list-style: none !important; margin: 0 0 24px !important; padding: 0 !important; }
html body .mhg.mhrc ol.steps > li { counter-increment: mhrc-s; list-style: none !important; position: relative; margin: 0; padding: 40px 0 24px; border: 0; border-bottom: 1px solid var(--l); font-size: 16px; }
html body .mhg.mhrc ol.steps > li:first-child { border-top: 1px solid var(--g); }
html body .mhg.mhrc ol.steps > li::marker { content: none; }
html body .mhg.mhrc ol.steps > li::before {
  content: "STEP " counter(mhrc-s, decimal-leading-zero); position: absolute; left: 0; top: 14px; width: auto; height: auto; line-height: 1.3;
  background: none; color: var(--g); font-family: var(--en); font-size: 14px; font-weight: 700; letter-spacing: .16em; text-align: left;
}
html body .mhg.mhrc ol.steps > li img { width: 100%; max-width: 100%; margin: 16px 0 0; }
@media (min-width: 769px) {
  html body .mhg.mhrc ol.steps > li:has(img) { display: grid; grid-template-columns: 1fr 48%; gap: 28px; align-items: start; }
  html body .mhg.mhrc ol.steps > li:has(img) img { margin: 0; grid-column: 2; grid-row: 1; }
}

/* コツ・下ごしらえ：白地に金の細枠 */
html body .mhg.mhrc .tip { background: #fff; border: 1px solid var(--g); padding: 20px 22px; margin: 16px 0 28px; }
html body .mhg.mhrc .tip b { color: var(--n); }
html body .mhg.mhrc .box { background: var(--c); border: 0; padding: 20px 22px; margin: 16px 0 28px; }

/* 箇条書き：金の小さな四角 */
html body .mhg.mhrc ul.dots { list-style: none !important; margin: 0 0 24px !important; padding: 0 !important; border-top: 1px solid var(--l); }
html body .mhg.mhrc ul.dots > li { list-style: none !important; position: relative; padding: 14px 4px 14px 24px; margin: 0; border-bottom: 1px solid var(--l); }
html body .mhg.mhrc ul.dots > li::before { content: ""; position: absolute; left: 4px; top: 1.45em; width: 6px; height: 6px; background: var(--g); }
html body .mhg.mhrc ul.dots > li::marker { content: none; }
html body .mhg.mhrc ul.dots b { color: var(--n); }

/* よくある質問：Q と A を英字で */
html body .mhg.mhrc dl.faq { margin: 0 0 24px; border-top: 1px solid var(--g); }
html body .mhg.mhrc dl.faq dt { position: relative; margin: 0; padding: 18px 4px 6px 36px; color: var(--n); font-weight: 800; }
html body .mhg.mhrc dl.faq dt::before { content: "Q"; position: absolute; left: 4px; top: 16px; font-family: var(--en); font-size: 19px; font-weight: 700; color: var(--g); }
html body .mhg.mhrc dl.faq dd { position: relative; margin: 0; padding: 0 4px 18px 36px; border-bottom: 1px solid var(--l); }
html body .mhg.mhrc dl.faq dd::before { content: "A"; position: absolute; left: 4px; top: -2px; font-family: var(--en); font-size: 19px; font-weight: 700; color: var(--n); }

/* 商品カード：細線の枠、紺の四角いボタン */
html body .mhg.mhrc a.prod { display: flex; gap: 18px; align-items: center; border: 1px solid var(--l); background: #fff; padding: 16px; margin: 0 0 16px; color: var(--t); text-decoration: none; }
html body .mhg.mhrc a.prod img { width: 96px; height: 96px; object-fit: cover; flex: none; }
html body .mhg.mhrc a.prod span { display: block; font-size: 15px; line-height: 1.7; }
html body .mhg.mhrc a.prod b { display: block; margin: 0 0 4px; color: var(--n); font-size: 16px; }
html body .mhg.mhrc a.prod em { display: inline-block; margin: 10px 0 0; padding: 7px 20px; background: var(--n); color: #fff; font-style: normal; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
@media (min-width: 769px) { html body .mhg.mhrc a.prod img { width: 120px; height: 120px; } }

/* ほかのレシピ：金の矢印つきの細い一覧 */
html body .mhg.mhrc .rel { border: 0; border-top: 1px solid var(--g); margin: 64px 0 0; padding: 24px 0 0; }
html body .mhg.mhrc .rel > b { display: block; text-align: center; font-weight: 800; letter-spacing: .1em; color: var(--t); }
html body .mhg.mhrc .rel > b::before { content: "MORE RECIPES"; display: block; margin: 0 0 4px; font-family: var(--en); font-size: 15px; letter-spacing: .2em; color: var(--g); }
html body .mhg.mhrc .rel ul { list-style: none !important; margin: 16px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr; gap: 0; }
html body .mhg.mhrc .rel li { list-style: none !important; margin: 0; border-bottom: 1px solid var(--l); }
html body .mhg.mhrc .rel li::marker, html body .mhg.mhrc .rel li::before { content: none !important; }
html body .mhg.mhrc .rel a { display: block; position: relative; padding: 16px 28px 16px 4px; color: var(--n); text-decoration: none; background: none; border: 0; }
html body .mhg.mhrc .rel a::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; border-top: 1px solid var(--g); border-right: 1px solid var(--g); transform: translateY(-50%) rotate(45deg); }
@media (min-width: 769px) {
  html body .mhg.mhrc .rel ul { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  html body .mhg.mhrc ul.rmeta li { flex: 1 1 0; display: block; text-align: center; border-bottom: 0; border-right: 1px solid var(--l); padding: 14px 8px; }
  html body .mhg.mhrc ul.rmeta li:last-child { border-right: 0; }
  html body .mhg.mhrc ul.rmeta b { display: block; min-width: 0; margin: 0 0 4px; }
}

/* 写真の並び（.gal）・チェック（.checks） */
html body .mhg.mhrc .gal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 24px; }
html body .mhg.mhrc .gal img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
html body .mhg.mhrc ol.checks { counter-reset: mhrc-c; list-style: none !important; margin: 0 0 24px !important; padding: 0 !important; }
html body .mhg.mhrc ol.checks > li { counter-increment: mhrc-c; list-style: none !important; position: relative; background: var(--c); border: 0; padding: 16px 16px 16px 56px; margin: 0 0 8px; }
html body .mhg.mhrc ol.checks > li::before { content: counter(mhrc-c, decimal-leading-zero); position: absolute; left: 16px; top: 16px; width: auto; height: auto; background: none; color: var(--g); font-family: var(--en); font-size: 17px; font-weight: 700; line-height: 1.6; }
html body .mhg.mhrc h2#mh-ing::before { content: "INGREDIENTS"; }
html body .mhg.mhrc h2#mh-how::before { content: "HOW TO MAKE"; }
html body .mhg.mhrc h2#mh-arr::before { content: "ARRANGE"; }
html body .mhg.mhrc h2#mh-more::before { content: "MORE IDEAS"; }
html body .mhg.mhrc h2#mh-easy::before { content: "NO TIME?"; }
html body .mhg.mhrc h2:is(#mh-about, #mh-about2)::before { content: "ABOUT"; }
html body .mhg.mhrc h2#mh-taste::before { content: "TASTE"; }
html body .mhg.mhrc h2#mh-use::before { content: "HOW TO USE"; }