/* Maintained directly as CSS. Shared header/footer styles come from common.css. */
html { scroll-behavior: smooth; }
body { min-width: 0; }
.menu-trigger { border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid #ff9c00; outline-offset: 4px; }
main picture, main img { display: block; }
main img { width: 100%; height: auto; }
.hero img { width: 100%; }
.share { box-sizing: border-box; padding: 38px 0; background: #fff; text-align: center; }
.share h2 { width: 297px; margin: 0 auto; }
.share ul { display: flex; justify-content: center; gap: 30px; margin-top: 20px; }
.share li { width: 40px; }
.share a { display: block; }
.halloween-content { padding: 100px 0 85px; background: #0063ac url('../images/bg.png') center top / 100% auto repeat-y; }
.product { width: min(931px, 90.625%); margin: 0 auto 100px; }
.recipes { width: min(960px, 90.625%); margin: auto; display: grid; gap: 60px; }
.related { width: min(940px, 90.625%); margin: auto; padding-top: 70px; }
.related h2 { margin: 0 auto 60px; }
.related h2 img { width: auto; max-width: 100%; margin: auto; }
.related ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.related a { display: block; }
.related a:hover, .share a:hover { opacity: .8; }
.related img { height: auto; }
.pagetop img { width: 100%; }
@media (max-width: 768px) {
  .share { padding: 6.25vw 0; }
  .share h2 { width: 49.0625vw; }
  .share ul { margin-top: 4.6875vw; gap: 9.375vw; }
  .share li { width: 12.5vw; }
  .halloween-content { padding: 9.375vw 0 11.09375vw; background-image: url('../images/sp_bg.png'); }
  .product { width: 90.625%; margin-bottom: 9.375vw; }
  .recipes { width: 90.625%; gap: 7.8125vw; }
  .related { padding-top: 12.5vw; }
  .related h2 { margin-bottom: 6.25vw; }
  .related h2 img { width: 100%; }
  .related ul { grid-template-columns: 1fr; gap: 3.125vw; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Recipe artwork stays separate from the editable ingredients and instructions. */
.recipe-card { position: relative; isolation: isolate; color: #000; min-width: 0; }
.recipe-card::before { content: ''; position: absolute; z-index: -1; inset: 60px 0 0; border: 8px solid var(--recipe-color); border-radius: 50px; background: var(--recipe-background); }
.recipe-visual { position: relative; padding: 68px 8px 0; }
.recipe-title { position: absolute; z-index: 1; inset: 0 0 auto; width: var(--title-width); margin: 0 auto; }
.recipe-title img { width: 100%; }
.recipe-visual > picture img { border-radius: 42px 42px 0 0; }
.recipe-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; padding: 40px 50px; font-size: 16px; line-height: 1.75; }
.recipe-detail h3 { margin: 0 0 24px; }
.recipe-detail h3 img { width: 100%; }
.recipe-ingredients ul { list-style: disc; padding-left: 1em; }
.recipe-detail li { margin-bottom: 6px; }
.recipe-detail li:last-child { margin-bottom: 0; }
.recipe-ingredients .ingredient-group { list-style: none; margin: 24px 0 0 -1em; }
.recipe-method ol { padding-left: 1.5em; margin: 0; }
.recipe-method li { padding-left: .25em; margin-bottom: 12px; }
@media (max-width: 768px) {
  .recipe-card::before { top: 6.25vw; border-width: .625vw; border-radius: 5.625vw; }
  .recipe-visual { padding: 6.875vw .625vw 0; }
  .recipe-title { width: var(--sp-title-width); }
  .recipe-visual > picture img { border-radius: 5vw 5vw 0 0; }
  .recipe-detail { grid-template-columns: 1fr; gap: 5vw; padding: 7.8125vw 6.25vw; font-size: 3.75vw; line-height: 1.85; }
  .recipe-detail h3 { margin-bottom: 4.6875vw; }
  .recipe-detail li { margin-bottom: 1.5625vw; }
  .recipe-method li { margin-bottom: 3.125vw; }
}