/* r3: バーガーを主役に、切り口・葉・輪郭の異なる食材を大小に配置する。 */
.hero-product { left: 35%; bottom: 16.5%; width: 52%; }
.hero-product img { filter: drop-shadow(8px 22px 12px #48271922); }
.hero-copy { top: 40%; width: 28%; }
.hero-copy h2 { max-width: 370px; }
.hero-copy .intro { max-width: 340px; }
.ghost { height: 19%; width: 19%; opacity: .36; filter: blur(5px); }
.ghost img { width: 100%; left: 0; bottom: 0; }
.ghost-left { left: -3%; bottom: 18%; }
.ghost-right { right: -3%; bottom: 46%; }
.ingredient { animation: none; width: min(19vw,300px); height: auto; aspect-ratio: 1; background-repeat: no-repeat; filter: drop-shadow(4px 9px 5px #42311018); }
.scroll-driven .ingredient { z-index: 2; }
.ingredient-a { left: 38%; top: 22%; width: min(22vw,340px); }
.ingredient-b { left: 73%; top: 15%; width: min(27vw,410px); }
.ingredient-c { left: 28%; top: 58%; width: min(17vw,260px); }
.ingredient-d { left: 81%; top: 60%; width: min(19vw,280px); }
.ingredient-e { left: 47%; top: 65%; width: min(15vw,230px); }
.ingredient-f { left: 84%; top: 29%; width: min(25vw,390px); }
.ingredient-g { left: 29%; top: 15%; width: min(16vw,240px); }
.ingredient-h { left: 69%; top: 73%; width: min(12vw,180px); }
.ingredient-i { left: 62%; top: 29%; width: min(18vw,280px); }
.ingredient-j { left: 11%; top: 66%; width: min(19vw,280px); }
.scroll-driven .ingredient-c,.scroll-driven .ingredient-d { z-index: 6; }
.ingredient-f { filter: blur(1px) drop-shadow(8px 14px 10px #482c1520); }
.hero-material-note { position: absolute; right: 5%; top: 35%; z-index: 7; font: italic clamp(23px,2.2vw,38px)/.95 Georgia,serif; letter-spacing: -.06em; transform: rotate(8deg); pointer-events: none; }
.hero-material-note::after { content: '↙'; display: block; font-size: 42px; padding: 7px 20px; }
.scroll-foreground { width: clamp(460px,85vw,1240px); }
@media (min-width:1700px) { .hero-product { width: min(53vw,115svh); left: 35%; } }
@media (max-height:740px) and (min-width:761px) {
  .hero-product { width: min(49vw,98svh); left: 37%; bottom: 14%; }
  .hero-copy { top: 40%; }
  .ingredient-a { top: 20%; width: 19vw; }
  .ingredient-b { top: 15%; width: 24vw; }
  .ingredient-j { top: 65%; width: 17vw; }
}
@media (max-width:1100px) and (min-width:761px) {
  .hero-product { left: 33%; width: 62%; bottom: 19%; }
  .hero-copy { width: 32%; }
  .hero-material-note { right: 4%; top: 31%; }
}
@media (max-width:760px) {
  .hero { min-height: 780px; }
  .hero-title { top: 13%; }
  .hero-copy { top: 25%; left: 6%; width: 88%; }
  .hero-copy h2 { font-size: 20px; }
  .hero-copy .intro { font-size: 16px; }
  .flavor-copy { margin-top: 15px; max-width: 66%; }
  .flavor-copy>p:last-child { max-width: 225px; line-height: 1.5; }
  .flavor-copy .eyebrow { max-width: 235px; }
  .hero-product { left: 3%; width: 96%; bottom: 20%; }
  .hero-bottom { bottom: 4%; }
  .ghost { width: 35%; height: 14%; opacity: .28; }
  .ghost-left { left: -18%; bottom: 38%; }
  .ghost-right { right: -18%; bottom: 49%; }
  .ingredient-a { left: -23%; top: 45%; width: 62vw; }
  .ingredient-b { left: 63%; top: 28%; width: 54vw; }
  .ingredient-c { left: -12%; top: 65%; width: 43vw; }
  .ingredient-d { left: 73%; top: 66%; width: 40vw; }
  .ingredient-e { left: 48%; top: 67%; width: 36vw; }
  .ingredient-f { left: 76%; top: 43%; width: 53vw; }
  .ingredient-g { left: -9%; top: 11%; width: 35vw; }
  .ingredient-h { left: 44%; top: 77%; width: 24vw; }
  .ingredient-i { left: 34%; top: 40%; width: 38vw; }
  .ingredient-j { left: 58%; top: 16%; width: 36vw; }
  .hero-material-note { right: 5%; top: 42%; font-size: 22px; }
  .hero-material-note::after { font-size: 28px; padding: 1px 14px; }
}
@media(max-width:360px) {
  .hero { min-height: 750px; }
  .hero-copy { top: 24%; }
  .hero-copy h2 { font-size: 18px; }
  .flavor-copy { max-width: 69%; margin-top: 12px; }
  .flavor-copy h3 { font-size: 27px; }
  .hero-product { bottom: 22%; }
  .hero-material-note { top: 44%; }
}

/* 文字・切替・CTAの周囲には余白を残す。 */
.ghost{display:none}
@media(min-width:761px){.ingredient-d{top:52%;width:min(16vw,250px)}.ingredient-h{top:64%;width:min(10vw,160px)}.ingredient-e{top:57%}}
@media(max-width:760px){
 .flavor-copy{max-width:100%;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
 .flavor-copy .eyebrow{grid-column:1 / -1;max-width:none}
 .flavor-copy h3{margin:4px 0;font-size:30px}
 .flavor-jp{margin:0;white-space:nowrap}
 .flavor-copy>p:last-child{grid-column:1 / -1;max-width:100%;margin-top:3px}
 .ingredient-a{left:-27%;top:46%;width:58vw}
 .ingredient-b{left:71%;top:45%;width:45vw}
 .ingredient-c{left:-18%;top:61%;width:38vw}
 .ingredient-d{left:79%;top:58%;width:33vw}
 .ingredient-e{left:52%;top:62%;width:28vw}
 .ingredient-f{left:87%;top:45%;width:45vw}
 .ingredient-g,.ingredient-j{display:none}
 .ingredient-h{left:54%;top:66%;width:20vw}
 .ingredient-i{left:45%;top:46%;width:32vw}
}
@media(max-width:360px){.flavor-copy h3{font-size:26px}.flavor-copy{column-gap:8px}.flavor-jp{white-space:normal}}

@media(max-width:760px){.ingredient-i{top:49%}}
@media(min-width:761px){.ingredient-j{left:18%;top:73%;width:min(12vw,190px)}}