@charset "utf-8";
/* ==========================================================================
   ザクっと大葉ふりかけ / ユワキヤ醤油
   --------------------------------------------------------------------------
   Rebuilt from a clean base (Sept 15). Earlier stylesheets had five rounds of
   overrides layered on top of each other, which is why sections kept reading
   as if they came from different sites.

   The grounds follow the story. Leaf photography appears only where the
   page is talking about the leaves themselves; everything else is cream
   paper, and each section hands over to the next with a scalloped or waved
   edge in its own colour, as the previous release did.
     leaf photo — 大葉の味力 + 特徴, もったいない, closing CTA
     paper      — dishes (waves), 商品 + 14枚 + 素材, アレンジ, 購入, ほかの商品
                  (the leaf line-work, grain and soft leaf silhouettes)
   ========================================================================== */

/* ---- 1. tokens ---------------------------------------------------------- */
:root{
  --forest-950:#0B1C11;
  --forest-900:#10261A;
  --forest-800:#15321F;
  --forest-700:#1D4029;
  --forest-600:#2A5638;

  --leaf:      #8CC63F;
  --lime:      #B6EC3F;   /* the bright accent: rail line, highlights on dark */
  --lime-soft: #D8F59A;

  --washi:     #F4ECD8;   /* the paper — warm, never white */
  --washi-2:   #EADFC3;
  --kinari:    #FAF5E8;

  --beni:      #D93B22;   /* fills: strip, buttons, 旨さ */
  --beni-t:    #B22A12;   /* the same red for small type on paper */
  --beni-lt:   #FF7A5C;   /* the same red for small type on green */
  --tamago:    #F4C73A;

  --sumi:      #1E251C;
  --sumi-2:    #4A5345;
  --sumi-3:    #5C6457;   /* 5.2:1 on washi, the darkest paper */
  --midori:    #2F6B3C;   /* green type on paper */
  --line:      rgba(30,37,28,.14);
  --line-d:    rgba(255,255,255,.16);
  --on-dark:   rgba(255,255,255,.9);
  --on-dark-2: rgba(255,255,255,.74);

  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --latin:  "Jost", var(--gothic);

  --pad:  clamp(18px, 5vw, 48px);
  --sec:  clamp(84px, 11vw, 168px);
  --rail: 0px;
  --r:    clamp(18px, 2.2vw, 30px);
  --ease: cubic-bezier(.22,.7,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --hd-h: 64px;
}
@media (min-width:900px){ :root{ --hd-h:76px; } }
@media (min-width:1180px){ :root{ --rail:64px; } }

/* ---- 2. reset ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hd-h) + 8px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--forest-800); color:var(--sumi);
  font-family:var(--gothic); font-weight:500; font-size:16px;
  line-height:1.9; letter-spacing:.04em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
h1,h2,h3,h4,p,dl,dd,figure,ul,blockquote{ margin:0; padding:0; }
ul{ list-style:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; border-radius:6px; }

/* ---- 3. helpers --------------------------------------------------------- */
.wrap{ width:min(1160px, 100% - var(--pad)*2); margin-inline:auto; }
.sec{ position:relative; padding-block:var(--sec); margin-right:var(--rail); }
.pc{ display:none; }
@media (min-width:768px){ .pc{ display:inline; } }
.nw{ white-space:nowrap; }

.eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  font-size:.92rem; font-weight:700; letter-spacing:.22em; color:var(--sumi-3);
}
.eyebrow::before{
  content:attr(data-n); flex:none; display:grid; place-items:center;
  width:2.1em; height:2.1em; border-radius:50%;
  font-family:var(--mincho); font-size:1.12rem; letter-spacing:0; font-weight:700;
  color:var(--midori); border:1.5px solid currentColor;
}
.eyebrow--center{ justify-content:center; }
.leafy .eyebrow{ color:var(--on-dark-2); }
.leafy .eyebrow::before{ color:var(--lime); }

.h-sec{ font-weight:900; line-height:1.34; letter-spacing:.02em;
  font-size:clamp(1.8rem, 4.6vw, 3.1rem); }
.h-sec em{ font-style:normal; color:var(--midori); }
.leafy .h-sec em{ color:var(--lime); }

.lead{ font-family:var(--mincho); font-weight:700; line-height:2.1; letter-spacing:.05em;
  font-size:clamp(1.06rem, 1.8vw, 1.3rem); color:var(--sumi-2); }
.leafy .lead{ color:var(--on-dark); }
.lead + .lead{ margin-top:1.2em; }

/* ---- 4. buttons --------------------------------------------------------- */
.btn{
  --bg:var(--beni); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.75em;
  min-height:54px; padding:.85em 2em; border-radius:999px; overflow:hidden; isolation:isolate;
  background:var(--bg); color:var(--fg);
  font-weight:800; font-size:.98rem; letter-spacing:.1em; text-align:center; white-space:nowrap;
  box-shadow:0 10px 24px -8px rgba(217,59,34,.55), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s;
}
/* a sheen passes across on hover */
.btn::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  translate:-120% 0; transition:translate .7s var(--ease-out); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(217,59,34,.6), inset 0 1px 0 rgba(255,255,255,.22); }
.btn:hover::before{ translate:120% 0; }
.btn svg{ width:1.05em; height:1.05em; flex:none; transition:translate .35s var(--ease-out); }
.btn:hover svg{ translate:3px 0; }
.btn--sm{ min-height:44px; padding:.55em 1.35em; font-size:.84rem; }
.btn--lg{ min-height:64px; padding:1em 2.5em; font-size:1.06rem; }
.btn--forest{ --bg:var(--forest-700); box-shadow:0 10px 22px -10px rgba(16,38,26,.6); }
.btn--lime{ --bg:var(--lime); --fg:var(--forest-900); box-shadow:0 12px 28px -10px rgba(182,236,63,.55); }

/* ---- 5. header ---------------------------------------------------------- */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--hd-h);
  display:flex; align-items:center; gap:24px;
  padding:0 var(--pad); padding-right:calc(var(--pad) + var(--rail));
  color:#fff;
  background:linear-gradient(180deg, rgba(8,22,13,.55), rgba(8,22,13,0));
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.hd.is-stuck{
  background:rgba(13,32,20,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 -1px 0 rgba(182,236,63,.22);
}
.hd__logo{ flex:none; display:flex; align-items:center; min-height:44px; }
.hd__logo img{ width:clamp(42px,5.5vw,52px); border-radius:6px; }
.hd__nav{ display:none; margin-left:auto; gap:clamp(16px,1.9vw,30px); }
.hd__nav a{ position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-size:.86rem; font-weight:700; letter-spacing:.08em; color:var(--on-dark); transition:color .3s; }
.hd__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:2px;
  background:var(--lime); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out); }
.hd__nav a:hover{ color:#fff; }
.hd__nav a:hover::after, .hd__nav a.is-on::after{ transform:scaleX(1); transform-origin:left; }
.hd__cta{ margin-left:auto; }
@media (min-width:1040px){ .hd__nav{ display:flex; } .hd__cta{ margin-left:8px; } }

/* ---- 6. the 縦書き rail -------------------------------------------------- */
.rail{
  display:none; position:fixed; z-index:55; top:0; right:0; bottom:0; width:var(--rail);
  align-items:center; justify-content:center; background:var(--forest-950);
}
@media (min-width:1180px){ .rail{ display:flex; } }
.rail__track{ position:absolute; left:0; top:0; bottom:0; width:3px; background:rgba(255,255,255,.06); }
.rail__bar{ position:absolute; left:0; top:0; width:3px; height:var(--p,0%);
  background:var(--lime);
  box-shadow:0 0 10px rgba(182,236,63,.85), 0 0 22px rgba(182,236,63,.45); }
.rail__list{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.rail__list a{
  position:relative; display:block; writing-mode:vertical-rl; text-orientation:upright;
  min-block-size:44px; padding:8px 6px;
  font-size:.76rem; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.5);
  transition:color .35s var(--ease);
}
.rail__list a::before{ content:""; position:absolute; left:-9px; top:50%; translate:0 -50%;
  width:5px; height:5px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 8px var(--lime); opacity:0; transition:opacity .35s; }
.rail__list a:hover{ color:#fff; }
.rail__list a.is-on{ color:var(--lime); }
.rail__list a.is-on::before{ opacity:1; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{ position:relative; z-index:0; background:var(--forest-900); color:#fff;
  margin-right:var(--rail); }
.hero__media{ overflow:hidden; }
.hero__video{ display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.1) contrast(1.04); }
.hero__shade{ position:absolute; inset:0; pointer-events:none; }
.hero__copy{ position:relative; z-index:2; }
.hero__title{ margin-bottom:clamp(12px,1.6vw,20px); }
.hero__title img{ width:min(100%, clamp(270px,36vw,520px));
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.35)); }
.hero__lead{ max-width:32em; font-weight:700; line-height:2;
  font-size:clamp(.92rem,1.35vw,1.12rem); letter-spacing:.05em; color:var(--on-dark);
  margin-bottom:clamp(18px,2.2vw,28px); }
.hero__acts{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }
.hero__spec{ font-size:.94rem; font-weight:700; letter-spacing:.05em; color:var(--on-dark); }
.hero__spec b{ font-size:1.25rem; font-weight:900; color:var(--lime); letter-spacing:.02em; }
.hero__cue{ display:none; }

/* full-bleed and pinned on every screen — the page slides up over it */
.hero{ position:sticky; top:0; height:100vh; height:100svh; min-height:560px; overflow:hidden; }
.hero__media{ position:absolute; inset:0;
  transform:scale(calc(1.02 + var(--hp,0) * .14)); transform-origin:50% 60%; will-change:transform; }
.hero__media::after{ content:""; position:absolute; inset:0; background:var(--forest-950);
  opacity:calc(var(--hp,0) * .7); pointer-events:none; }
.hero__copy{
  position:absolute; left:calc(var(--pad) + 1vw); bottom:clamp(64px,12vh,130px);
  width:min(46%, 640px);
  transform:translateY(calc(var(--hp,0) * -90px));
  opacity:calc(1 - var(--hp,0) * 1.6);
}
@media (min-width:900px){
  .hero{ min-height:620px; }
  .hero__shade{
    background:
      linear-gradient(90deg, rgba(9,24,14,.8) 0%, rgba(9,24,14,.5) 30%, rgba(9,24,14,.12) 56%, rgba(9,24,14,0) 72%),
      linear-gradient(0deg, rgba(9,24,14,.62) 0%, rgba(9,24,14,0) 42%);
  }
  .hero__cue{
    position:absolute; z-index:3; left:50%; translate:-50% 0; bottom:22px;
    display:grid; justify-items:center; gap:8px; opacity:calc(1 - var(--hp,0) * 4);
    font-family:var(--latin); font-size:.64rem; letter-spacing:.36em; text-transform:uppercase;
    color:var(--on-dark-2);
  }
  .hero__cue i{ position:relative; width:1px; height:40px; background:rgba(255,255,255,.25); overflow:hidden; }
  .hero__cue i::after{ content:""; position:absolute; inset:0; background:var(--lime);
    animation:cue 2.2s var(--ease) infinite; }
}
/* phone: the film fills the screen like the laptop; the copy sits across the
   bottom of it with the same kind of fade the laptop uses, not a panel */
@media (max-width:899px){
  .hero__video{ object-position:50% 50%; }
  .hero__shade{ background:
      linear-gradient(0deg, rgba(9,24,14,.86) 0%, rgba(9,24,14,.62) 34%, rgba(9,24,14,.18) 58%, rgba(9,24,14,0) 70%),
      linear-gradient(180deg, rgba(9,24,14,.45) 0%, rgba(9,24,14,0) 18%); }
  .hero__copy{ left:var(--pad); right:var(--pad); width:auto;
    bottom:calc(clamp(26px,6vh,48px) + env(safe-area-inset-bottom)); }
  .hero__title img{ width:min(100%,330px); }
  .hero__lead{ font-size:.92rem; line-height:1.85; margin-bottom:16px; }
  .hero__acts{ gap:12px 18px; }
}
@media (max-width:899px) and (max-height:700px){
  .hero__title img{ width:min(100%,270px); }
  .hero__lead{ font-size:.84rem; margin-bottom:12px; }
  .hero__lead br:not(.pc){ display:none; }
}
@keyframes cue{ 0%{ translate:0 -100%; } 60%,100%{ translate:0 100%; } }

/* everything after the hero slides over it */
.page{ position:relative; z-index:2; background:var(--forest-800); }

/* ---- 8. the vermilion strip -------------------------------------------- */
.mq{ position:relative; overflow:hidden; background:var(--beni); color:#fff;
  padding-block:clamp(12px,1.5vw,17px); margin-right:var(--rail); }
.mq__track{ display:flex; width:max-content; animation:mq 36s linear infinite; }
.mq--rev .mq__track{ animation-direction:reverse; }
.mq__track span{ display:flex; align-items:center; gap:2em; padding-right:2em;
  font-weight:900; font-size:clamp(.84rem,1.6vw,1rem); letter-spacing:.24em; white-space:nowrap; }
.mq__track span i{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--lime); }
@keyframes mq{ to{ translate:-50% 0; } }

/* ---- 8b. paper grounds ---------------------------------------------------
   Two paper treatments, no more:
     .paper--waves  the wave-line tile, only directly under the hero
     .paper--leaf   the grain + shiso line-work + soft leaf silhouettes from the
                    previous release's purchase section, for the rest
   .paper--deep is the same paper a shade deeper, so two paper sections that
   sit next to each other still read as two. */
.paper{ position:relative; isolation:isolate; overflow:hidden; color:var(--sumi); }
.paper::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
.paper > .wrap{ position:relative; z-index:1; }

.paper--waves{ background-color:var(--washi); }
.paper--waves::before{ background:url(../images/oba-furikake/pat-waves.webp?v=1789920000) 0 0/640px auto repeat; }
.paper--waves::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.75;
  background:radial-gradient(62% 54% at 50% 46%, rgba(244,236,216,.85) 0%, rgba(244,236,216,0) 100%); }

.paper--leaf{ background-color:#F7F0DA; }
.paper--leaf::before{
  background-image:url(../images/oba-furikake/paper-grain.png?v=1789920000), url(../images/oba-furikake/leaf-pattern-ink.svg?v=1789920000);
  background-size:160px 160px, 300px 300px; }
.paper--deep{ background-color:#EDE1BE; }
@media (max-width:699px){
  .paper--waves::before{ background-size:440px auto; }
  .paper--leaf::before{ background-size:130px 130px, 200px 200px; }
}

/* the soft leaf silhouettes — same shape as the pattern tile, tinted */
.sprigs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sprig{ position:absolute; display:block; background-color:rgba(42,99,48,.16);
  -webkit-mask:url(../images/oba-furikake/leaf-solid.svg?v=1789920000) center/contain no-repeat;
          mask:url(../images/oba-furikake/leaf-solid.svg?v=1789920000) center/contain no-repeat; }
.sprig--a{ width:clamp(58px,7vw,104px); aspect-ratio:64/96; left:-14px; top:clamp(56px,9vw,120px); rotate:-24deg; }
.sprig--b{ width:clamp(40px,5vw,74px); aspect-ratio:64/96; right:clamp(8px,4vw,66px); top:clamp(28px,4vw,64px); rotate:31deg; }
.sprig--c{ width:clamp(46px,6vw,86px); aspect-ratio:64/96; right:-18px; bottom:clamp(40px,7vw,110px); rotate:14deg; }
@media (max-width:700px){ .sprig--b{ display:none; } }

/* small grey type on patterned paper steps up a shade so it holds AA even
   where it crosses a pattern line */
.paper .eyebrow, .paper .ing__hint, .paper .eat__note{ color:var(--sumi-2); }
/* the big vermilion accents sit on the deeper paper here; a touch deeper red
   keeps them above 3:1 even where they cross a leaf silhouette */
.prod .prod__h span, .prod .ing__h b{ color:#C8341C; }


/* ---- 8c. section edges ---------------------------------------------------
   As in the previous release: the shape is cut out of the bottom of each
   section, and the next section is pulled up underneath to show through, so
   the edge is always exactly the section's own colour and texture. */
[data-cut]{
  margin-bottom:calc(var(--edge-h) * -1);
  -webkit-mask-image:linear-gradient(#000,#000), var(--cut-img);
          mask-image:linear-gradient(#000,#000), var(--cut-img);
  -webkit-mask-size:100% calc(100% - var(--edge-h) + 1px), var(--cut-size);
          mask-size:100% calc(100% - var(--edge-h) + 1px), var(--cut-size);
  -webkit-mask-position:left top, left bottom;
          mask-position:left top, left bottom;
  -webkit-mask-repeat:no-repeat, var(--cut-repeat);
          mask-repeat:no-repeat, var(--cut-repeat);
}
[data-cut="scallop"]{ --cut-img:url(../images/oba-furikake/edge-scallop.svg?v=1789920000); --cut-size:auto var(--edge-h); --cut-repeat:repeat-x; }
[data-cut="wave"]{ --cut-img:url(../images/oba-furikake/edge-wave.svg?v=1789920000); --cut-size:100% var(--edge-h); --cut-repeat:no-repeat; }
/* whole pixels only, or the repeated scallop lands on half pixels */
:root{ --edge-h:26px; }
@media (min-width:700px){ :root{ --edge-h:34px; } }
@media (min-width:1200px){ :root{ --edge-h:46px; } }
/* whatever follows a cut starts that much higher, so it gets the room back */
[data-cut] + .sec{ padding-top:calc(var(--sec) + var(--edge-h)); }
[data-cut] + .mq{ padding-top:calc(clamp(12px,1.5vw,17px) + var(--edge-h)); }
[data-cut] + .ft{ padding-top:calc(clamp(48px,6vw,76px) + var(--edge-h)); }
/* each block paints above the one after it */
.page > *{ position:relative; }
.dishes{ z-index:10; } #oba{ z-index:9; } #product{ z-index:8; } #eat{ z-index:7; }
#mottainai{ z-index:6; } .mq--rev{ z-index:5; } #buy{ z-index:4; } #other{ z-index:3; }
.more{ z-index:2; } .ft{ z-index:1; }

/* ==========================================================================
   9. the dish carousel — a slow belt, each plate breathing on its own
   ========================================================================== */
.dishes{ position:relative; overflow:hidden; margin-right:var(--rail);
  padding:clamp(70px,9vw,120px) 0 calc(clamp(78px,10vw,130px) + var(--edge-h)); }
.dishes__head{ text-align:center; margin-bottom:clamp(30px,4.5vw,56px); }
.dishes__kick{ font-size:.96rem; font-weight:800; letter-spacing:.2em; color:#9E240F; margin-bottom:10px; }
.dishes__h{ font-family:var(--mincho); font-weight:700; letter-spacing:.06em; line-height:1.5;
  font-size:clamp(1.55rem,3.8vw,2.6rem); color:var(--forest-800); }
.dishes__belt{ position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.dishes__track{ display:flex; width:max-content; animation:belt 46s linear infinite; }
.dishes__belt:hover .dishes__track{ animation-play-state:paused; }
.dishes__item{ flex:none; width:clamp(168px,24vw,340px); margin-right:clamp(22px,4.4vw,70px);
  display:grid; justify-items:center; gap:14px; }
.dishes__item img{ width:100%; aspect-ratio:760/640; object-fit:contain;
  filter:drop-shadow(0 26px 26px rgba(74,52,24,.2));
  animation:float 6s ease-in-out infinite; animation-delay:calc(var(--i) * -1.5s); }
.dishes__item span{ padding:.4em 1.2em; border-radius:999px; background:var(--forest-800);
  color:#fff; font-size:.92rem; font-weight:800; letter-spacing:.1em; }
@keyframes belt{ to{ translate:-50% 0; } }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-12px) rotate(1.5deg); } }

/* ==========================================================================
   10. leaf grounds — one treatment for every dark section
   The photograph sits still behind the section — it used to drift on scroll,
   which read as the page sliding about under the text. Motion is kept for the
   pictures, not the grounds. The wash is tuned so white type stays above
   7:1 at the photograph's brightest point; the light comes back as a soft
   lime glow rather than by lightening the leaves.
   ========================================================================== */
.leafy{ position:relative; isolation:isolate; overflow:hidden; color:#fff; background:var(--forest-800); }
.leafy__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 46% at 78% 12%, rgba(182,236,63,.14), rgba(182,236,63,0) 70%),
    radial-gradient(52% 40% at 12% 88%, rgba(140,198,63,.1), rgba(140,198,63,0) 70%),
    linear-gradient(180deg, rgba(12,30,18,.86) 0%, rgba(16,40,24,.76) 45%, rgba(12,30,18,.88) 100%),
    url(../images/oba-furikake/leaf-wall.webp?v=1789920000) center/cover no-repeat; }
.leafy--fine .leafy__bg{
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(182,236,63,.16), rgba(182,236,63,0) 70%),
    linear-gradient(180deg, rgba(12,30,18,.8) 0%, rgba(16,40,24,.7) 48%, rgba(12,30,18,.86) 100%),
    url(../images/oba-furikake/leaf-fine.webp?v=1789920000) center/cover no-repeat; }

/* ==========================================================================
   11. 大葉の味力 + 大葉の特徴
   ========================================================================== */
.oba__grid{ display:grid; gap:clamp(28px,5vw,64px); align-items:center; }
@media (min-width:900px){ .oba__grid{ grid-template-columns:.9fr 1.1fr; } }
.oba .eyebrow{ font-size:.92rem; }
.oba .eyebrow::before{ font-size:1.12rem; }
.oba__intro .lead{ font-size:clamp(1.08rem,1.9vw,1.36rem); line-height:2.05; word-break:keep-all; overflow-wrap:anywhere; }
.oba__h img{ width:min(100%,400px); margin-bottom:26px;
  filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.35)); }
.oba__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.oba__tags li{ padding:.5em 1.3em; border-radius:999px; font-size:clamp(.9rem,1.3vw,1rem); font-weight:700; letter-spacing:.1em;
  color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(182,236,63,.45); }
.oba__basket img{ width:100%; filter:drop-shadow(0 34px 44px rgba(0,0,0,.45)); }

/* ---- the note: one sheet of washi, the leaf in the middle, three points
   pointing at it, おおばさん signing it. On a phone it is composed to sit
   inside a single screen, in the at-a-glance layout the client asked for. */
.nt{
  position:relative; margin-top:clamp(48px,7vw,96px);
  display:grid; color:var(--sumi);
  background:
    radial-gradient(38% 46% at 50% 56%, rgba(140,198,63,.2), rgba(140,198,63,0) 70%),
    var(--washi);
  border-radius:var(--r);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.5);
}
.nt__head{ grid-area:head; }
.nt__kick{ display:inline-flex; align-items:center; gap:.6em; font-weight:800; letter-spacing:.12em;
  color:var(--beni-t); }
.nt__kick::before,.nt__kick::after{ content:""; width:18px; height:2px; background:currentColor; transform:skewX(-24deg); }
.nt__h{ font-weight:900; letter-spacing:.04em; line-height:1.3; color:var(--forest-800); }
.nt__h em{ font-style:normal; color:var(--midori); }

.nt__leaf{ grid-area:leaf; position:relative; display:grid; place-items:center; }
.nt__leaf img{ width:auto; filter:drop-shadow(0 24px 30px rgba(30,60,20,.3)); transform-origin:50% 90%; }

.nt__pt{ position:relative; }
.nt__pt--1{ grid-area:p1; } .nt__pt--2{ grid-area:p2; } .nt__pt--3{ grid-area:p3; }
.nt__n{ font-family:var(--latin); font-weight:600; letter-spacing:.24em; color:var(--beni-t); line-height:1.4; }
.nt__t{ font-weight:900; line-height:1.62; letter-spacing:.01em; color:var(--sumi); }
.nt__t rt{ font-size:.5em; font-weight:500; color:var(--sumi-3); }
.nt__t mark{ color:inherit; padding:0 .05em;
  background:linear-gradient(transparent 62%, rgba(244,199,58,.85) 62%); }
.nt__d{ color:var(--sumi-2); letter-spacing:.02em; }

.nt__arrow{ position:absolute; overflow:visible; fill:none; stroke:var(--beni); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.nt__stroke{ stroke-dasharray:1; stroke-dashoffset:0; }
.nt__kun{ grid-area:kun; }

/* laptop: leaf centre stage, notes either side */
@media (min-width:900px){
  .nt{ grid-template-columns:1fr minmax(220px,.78fr) 1fr;
    grid-template-areas:"head head head" "p1 leaf p3" "p2 leaf kun";
    gap:clamp(22px,2.6vw,40px) clamp(40px,5vw,84px);
    padding:clamp(44px,5vw,72px) clamp(36px,4.6vw,72px); }
  .nt__head{ text-align:center; margin-bottom:6px; }
  .nt__kick{ font-size:.92rem; margin-bottom:6px; }
  .nt__h{ font-size:clamp(2rem,3.6vw,2.9rem); }
  .nt__leaf img{ width:min(100%,340px); height:auto; }
  .nt__pt{ align-self:center; }
  .nt__n{ font-size:.88rem; margin-bottom:.35em; }
  .nt__t{ font-size:clamp(1.05rem,1.5vw,1.28rem); margin-bottom:.5em; }
  .nt__d{ font-size:1.02rem; line-height:1.95; }
  .nt__arrow{ width:clamp(64px,6vw,96px); height:auto; top:34%; }
  .nt__pt--1 .nt__arrow{ right:calc(clamp(64px,6vw,96px) * -1 - 8px); transform:rotate(12deg); }
  .nt__pt--2 .nt__arrow{ right:calc(clamp(64px,6vw,96px) * -1 - 8px); transform:scaleY(-1) rotate(12deg); }
  .nt__pt--3 .nt__arrow{ left:calc(clamp(64px,6vw,96px) * -1 - 8px); transform:scaleX(-1) rotate(12deg); }
  .nt__kun{ align-self:end; justify-self:center; text-align:center; }
  .nt__kun .mascot__img{ width:clamp(108px,10vw,150px); }
}

/* phone: everything in one screen
     head  head      (おおばさん peeks over the top edge — no extra height)
     p1    p3
     p2    leaf                                                         */
@media (max-width:899px){
  .nt{ grid-template-columns:1fr 1fr;
    grid-template-areas:"head head" "p1 p3" "p2 leaf";
    column-gap:clamp(14px,4vw,24px); row-gap:clamp(10px,2.6vw,18px);
    margin-top:clamp(64px,16vw,90px);
    padding:clamp(18px,4.6vw,30px) clamp(16px,4.2vw,28px) clamp(18px,4.6vw,28px); }
  /* おおばさん peeks over the top-right corner with his credit directly under
     him; the heading keeps clear of that lane, and the row is tall enough that
     the points start below the credit */
  .nt{ --kw:clamp(60px,17vw,78px); --kt:clamp(-50px,-11vw,-40px); --pt:clamp(18px,4.6vw,30px); }
  .nt__head{ padding-right:106px;
    min-height:calc(var(--kt) + var(--kw) * 1.671 + 3 * .75rem * 1.4 + 6px - var(--pt)); }
  .nt__kick{ font-size:clamp(.62rem,2.7vw,.74rem); letter-spacing:.04em; white-space:nowrap; }
  .nt__kick::before,.nt__kick::after{ display:none; }
  .nt__h{ font-size:clamp(1.5rem,6.8vw,1.95rem); margin-top:2px; }
  .nt__n{ font-size:.6rem; letter-spacing:.18em; margin-bottom:.2em; }
  .nt__t{ font-size:clamp(.8rem,3.5vw,.92rem); line-height:1.55; margin-bottom:.35em; }
  .nt__d{ font-size:clamp(.75rem,3.2vw,.84rem); line-height:1.7; }
  .nt__pt--1, .nt__pt--3{ padding-bottom:26px; }
  .nt__leaf{ align-self:center; }
  .nt__leaf img{ height:auto; width:min(100%, clamp(150px,42vw,200px)); }
  .nt__arrow{ width:44px; height:auto; }
  .nt__pt--1 .nt__arrow{ right:-12px; bottom:-10px; transform:rotate(40deg); }
  .nt__pt--3 .nt__arrow{ left:30%; bottom:-12px; transform:rotate(82deg); }
  /* beside the title, clear of the paragraph, aimed down at the leaf */
  .nt__pt--2 .nt__arrow{ width:34px; right:-44px; top:1.2em; transform:rotate(24deg); }

  .nt__kun{ position:absolute; z-index:3; top:var(--kt); right:clamp(8px,2.6vw,16px);
    display:flex; flex-direction:column; align-items:center; }
  .nt__kun .mascot__img{ width:var(--kw); }
  .nt__kun .mascot__say{ position:absolute; right:calc(100% + 6px); top:4px; margin:0;
    font-size:clamp(.66rem,2.9vw,.78rem); }
  .nt__kun .mascot__cred{ display:block; width:7.4em; margin-top:2px; text-align:center;
    font-size:.75rem; line-height:1.4; letter-spacing:.02em; color:var(--sumi-2); word-break:keep-all; }
}
/* short phones (iPhone SE, compact Androids): trim the leaf and the sheet's
   padding so the whole scene, peeking head included, still fits one screen */
@media (max-width:899px) and (max-height:700px){
  .nt{ row-gap:8px; padding-top:14px; padding-bottom:14px; }
  .nt__leaf img{ width:min(100%,140px); }
  .nt__pt--1, .nt__pt--3{ padding-bottom:22px; }
  .nt{ --kw:52px; --kt:-32px; --pt:14px; }
  .nt__pt--1, .nt__pt--3{ padding-bottom:20px; }
}

/* ---- おおばさん ---------------------------------------------------------- */
.mascot__say{ position:relative; display:inline-block; margin-bottom:14px;
  padding:.62em 1.25em .66em; border-radius:14px; background:#fff; color:var(--sumi);
  font-family:var(--mincho); font-weight:700; letter-spacing:.08em; line-height:1.5;
  font-size:clamp(.78rem,1.4vw,1.12rem);
  box-shadow:0 0 0 2px var(--forest-700), 0 10px 20px rgba(30,40,20,.12); }
.mascot__say::after{ content:""; position:absolute; left:50%; bottom:-7px; margin-left:-6px;
  width:12px; height:12px; background:#fff; rotate:45deg; box-shadow:2px 2px 0 0 var(--forest-700); }
@media (max-width:899px){
  .mascot__say{ padding:.4em .7em .45em; border-radius:10px; letter-spacing:.02em; white-space:nowrap; }
  .mascot__say::after{ left:auto; right:-7px; bottom:10px; margin:0; width:10px; height:10px;
    box-shadow:2px -2px 0 0 var(--forest-700); rotate:45deg; }
}
.mascot__say.is-pop{ animation:pop .42s var(--ease-out) 1; }
@keyframes pop{ 0%{ scale:.86; } 55%{ scale:1.05; } 100%{ scale:1; } }
.mascot__img{ height:auto; margin-inline:auto; cursor:pointer; transform-origin:50% 96%; rotate:-5deg;
  filter:drop-shadow(0 12px 18px rgba(30,40,20,.22)); }
.mascot.is-in .mascot__img{ animation:sway 4.4s ease-in-out .6s infinite; }
.mascot.is-poked .mascot__img{ animation:startle .6s var(--ease) 1; }
@keyframes sway{ 0%,100%{ rotate:-6deg; } 50%{ rotate:0deg; } }
@keyframes startle{ 0%{ rotate:-6deg; translate:0 0; } 20%{ rotate:-16deg; translate:0 -8px; }
  45%{ rotate:3deg; translate:0 0; } 70%{ rotate:-10deg; translate:0 -3px; } 100%{ rotate:-6deg; translate:0 0; } }
.mascot__cred{ margin-top:10px; font-size:.7rem; letter-spacing:.1em; line-height:1.6; color:var(--sumi-3); }

/* ==========================================================================
   12. 商品について — on paper
   ========================================================================== */

.prod__grid{ display:grid; gap:clamp(40px,5vw,70px); align-items:center; }
@media (min-width:900px){ .prod__grid{ grid-template-columns:.92fr 1.08fr; } }
.prod__media{ position:relative; display:grid; place-items:center; padding-bottom:6%; perspective:1400px; }
.prod__pack{ width:min(74%,340px); border-radius:8px;
  transform:rotateY(calc(var(--tilt,0) * 14deg)) rotate(-3deg);
  box-shadow:0 44px 60px -24px rgba(40,30,10,.45); transition:transform .1s linear; }
.prod__bowl{ position:absolute; right:2%; bottom:0; width:min(44%,210px);
  filter:drop-shadow(0 22px 26px rgba(40,30,10,.3)); }
.prod__badge{ display:inline-block; margin-bottom:16px; padding:.45em 1.2em; border-radius:999px;
  background:var(--forest-800); color:#fff; font-weight:800; font-size:.9rem; letter-spacing:.1em; }
.prod__h{ font-weight:900; line-height:1.1; letter-spacing:.01em; margin-bottom:.5em; color:var(--forest-800);
  font-size:clamp(2.3rem,6.6vw,4rem); }
.prod__h span{ display:block; color:var(--beni); }
.pspec{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:2em; }
.pspec div{ padding:1em 1.25em; border-radius:16px; background:var(--forest-800); color:#fff; }
.pspec dt{ font-size:.88rem; font-weight:700; letter-spacing:.16em; color:var(--lime-soft); margin-bottom:.2em; }
.pspec dd{ font-weight:900; line-height:1.6; font-size:1.1rem; }
.prod__mott{ margin-top:1.6em; padding:1.3em 1.5em; border-radius:18px;
  background:rgba(255,255,255,.55); border:1px solid rgba(47,107,60,.25); }
.prod__mott h3{ font-family:var(--mincho); font-weight:700; letter-spacing:.08em; color:var(--midori);
  font-size:clamp(1.05rem,2.4vw,1.3rem); margin-bottom:.4em; }
.prod__mott p{ font-size:1.04rem; line-height:1.95; color:var(--sumi-2); }

/* ---- 1袋 = 大葉14枚分 ----------------------------------------------------- */
.p14{ position:relative; margin-top:clamp(56px,7vw,96px);
  display:grid; gap:clamp(24px,3.6vw,50px); align-items:stretch;
  padding:clamp(28px,4.2vw,58px) clamp(22px,4vw,56px);
  border-radius:var(--r); color:var(--sumi); background:var(--kinari);
  box-shadow:0 30px 60px -30px rgba(40,30,10,.35), inset 0 0 0 1px rgba(47,107,60,.14); }
@media (min-width:820px){ .p14{ grid-template-columns:.92fr 1.08fr; } }
.p14__copy{ display:flex; flex-direction:column; }
.p14__kick{ display:inline-flex; align-items:center; gap:.6em; margin-bottom:12px;
  font-weight:900; font-size:clamp(.8rem,1.9vw,.95rem); letter-spacing:.14em; color:var(--midori); }
.p14__kick::before,.p14__kick::after{ content:""; width:20px; height:2px; background:currentColor; transform:skewX(-24deg); }
.p14__h{ font-weight:900; letter-spacing:.02em; line-height:1.42; font-size:clamp(1.45rem,4.4vw,2.4rem); }
.p14__h small{ font-size:.54em; font-weight:700; color:var(--sumi-2); }
.p14__h b{ font-family:var(--latin); font-weight:500; font-size:1.9em; line-height:.75; letter-spacing:-.02em;
  color:var(--beni); margin:0 .04em 0 .08em; vertical-align:-.055em; font-variant-numeric:tabular-nums; }
.p14__sub{ margin-top:.85em; font-family:var(--mincho); font-weight:700; letter-spacing:.08em; line-height:1.8;
  font-size:clamp(1.05rem,2.2vw,1.3rem); color:var(--forest-700); }
.p14__note{ margin-top:1em; font-size:1rem; line-height:2; color:var(--sumi-2); max-width:26em; }
.p14__facts{ margin-top:auto; padding-top:clamp(18px,2.4vw,26px);
  display:flex; flex-wrap:wrap; gap:clamp(16px,2.6vw,34px); border-top:1px solid var(--line); }
.p14__facts li{ display:flex; align-items:baseline; gap:.18em; flex-wrap:wrap; }
.p14__facts b{ font-family:var(--latin); font-weight:500; line-height:1; font-size:clamp(1.55rem,3.4vw,2.1rem); color:var(--forest-800); }
.p14__facts span{ font-weight:900; font-size:.8rem; color:var(--forest-800); }
.p14__facts em{ display:block; width:100%; margin-top:.4em; font-style:normal; font-size:.84rem; letter-spacing:.08em; color:var(--sumi-3); }
.p14__viz{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.4vw,20px); }
.p14__tower{ display:flex; align-items:stretch; gap:clamp(10px,1.6vw,22px); }
.p14__stack{ --lw:clamp(70px,9.6vw,116px); --step:calc(var(--lw) * .215);
  position:relative; flex:none; width:var(--lw); height:calc(var(--step) * 13 + var(--lw) * 1.289); }
.p14__stack i{ position:absolute; left:0; width:var(--lw); aspect-ratio:388/500;
  bottom:calc(var(--k) * var(--step)); z-index:calc(20 - var(--k));
  background:url(../images/oba-furikake/leaf-photo.webp?v=1789920000) center/contain no-repeat;
  filter:drop-shadow(0 -3px 5px rgba(42,36,24,.3)); }
.p14__stack i:nth-child(4n+1){ rotate:-3deg; left:-3%; }
.p14__stack i:nth-child(4n+2){ rotate:2.5deg; left:4%; }
.p14__stack i:nth-child(4n+3){ rotate:-1deg; left:1%; }
.p14__stack i:nth-child(4n){ rotate:4deg; left:-2%; }
.p14.is-armed .p14__stack i{ opacity:0; translate:0 18px; }
.p14.is-armed.is-built .p14__stack i{ opacity:1; translate:0 0;
  transition:opacity .4s var(--ease), translate .5s var(--ease-out); transition-delay:calc(var(--k) * .04s); }
.p14__gauge{ position:relative; flex:none; display:grid; place-items:center; padding-inline:clamp(6px,1.2vw,14px); }
.p14__gauge::before{ content:""; position:absolute; top:5%; bottom:5%; left:50%; border-left:2px dashed rgba(47,107,60,.35); }
.p14__badge{ position:relative; padding:.7em .95em; border-radius:14px; background:var(--forest-800); color:#fff;
  text-align:center; font-weight:900; font-size:clamp(.72rem,1.6vw,.88rem); letter-spacing:.06em; line-height:1.35; }
.p14__badge b{ display:block; font-family:var(--latin); font-weight:500; font-size:2em; line-height:1; color:var(--lime); }
.p14__to{ flex:none; color:var(--beni); }
.p14__to svg{ width:clamp(22px,2.6vw,32px); }
.p14__inside{ text-align:center; }
.p14__inside img{ width:clamp(96px,14vw,190px); margin-inline:auto; filter:drop-shadow(0 18px 20px rgba(40,30,10,.25)); }
.p14__inside figcaption{ margin-top:.7em; font-size:.9rem; font-weight:700; line-height:1.7; color:var(--sumi-2); }
/* On a phone the packet drops below the leaf tower, so the arrow turns to
   point down at it instead of off to the right. */
@media (max-width:599px){
  .p14__viz{ flex-direction:column; gap:clamp(10px,3vw,16px); }
  .p14__to{ rotate:90deg; }
}

/* ==========================================================================
   13. 素材 — inside the product section, on the same patterned paper.
   Tap an ingredient and it opens large on a dark overlay, where the photo
   has the contrast to actually pop; the bar underneath keeps the short line.
   ========================================================================== */
.ing{ margin-top:clamp(64px,8vw,110px); }
.ing__head{ text-align:center; margin-bottom:clamp(28px,4.2vw,50px); }
.ing__h{ font-weight:900; line-height:1.55; letter-spacing:.02em; color:var(--forest-800);
  font-size:clamp(1.3rem,3.2vw,2.1rem); }
.ing__h b{ font-family:var(--latin); font-weight:500; font-size:1.55em; line-height:0; color:var(--beni);
  vertical-align:-.06em; margin-right:.05em; }
.ing__tabs{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,1.6vw,22px);
  width:min(1000px,100%); margin-inline:auto; }
.ing__cell{ position:relative; container-type:inline-size; }
.ing__cell > .ing__item{ width:100%; }
/* sits on the disc's lower-right edge; the disc is min(156px, cell - 12px) */
.ing__zoom{ --d:min(156px, calc(100cqw - 12px));
  position:absolute; z-index:3; top:calc(clamp(12px,1.6vw,20px) + var(--d) * .68);
  left:calc(50% + var(--d) * .5 - 36px);
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--forest-800); color:var(--lime);
  box-shadow:0 6px 16px rgba(20,40,20,.35), 0 0 0 3px #EDE1BE;
  transition:transform .35s var(--ease-out), background .3s, color .3s; }
.ing__zoom svg{ width:20px; height:20px; }
/* the visible badge is small on a phone; the tap target is not */
.ing__zoom::before{ content:""; position:absolute; inset:-6px; border-radius:50%; }
.ing__zoom:hover{ transform:scale(1.12); background:var(--beni); color:#fff; }
.ing__zoom:focus-visible{ outline:3px solid var(--beni); outline-offset:3px; }
.ing__item{ position:relative; text-align:center; padding:clamp(12px,1.6vw,20px) 6px clamp(14px,1.8vw,22px);
  border-radius:24px; transition:background .4s var(--ease), box-shadow .4s var(--ease); }
.ing__item:hover{ background:rgba(255,255,255,.45); }
.ing__item[aria-selected="true"]{ background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1.5px rgba(47,107,60,.35); }
.ing__disc{ position:relative; display:grid; place-items:center; width:100%; max-width:156px; aspect-ratio:1;
  margin:0 auto 12px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #FFFDF6 0%, #E9DCBC 100%);
  box-shadow:0 18px 30px -14px rgba(60,40,10,.45);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.ing__disc::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--beni); opacity:0; transform:scale(.92);
  transition:opacity .45s var(--ease), transform .6s var(--ease-out); }
.ing__disc img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.ing__item:hover .ing__disc{ transform:translateY(-6px) scale(1.06); box-shadow:0 26px 36px -14px rgba(60,40,10,.5); }
.ing__item[aria-selected="true"] .ing__disc::after{ opacity:1; transform:scale(1); }
.ing__name{ display:block; font-weight:800; font-size:clamp(.86rem,1.35vw,1.04rem); letter-spacing:.03em;
  color:var(--forest-800); line-height:1.5; }
.ing__item[aria-selected="true"] .ing__name{ color:var(--beni-t); }

.ing__bar{ display:grid; width:min(860px,100%); margin:clamp(22px,3vw,34px) auto 0;
  padding:clamp(18px,2.4vw,24px) clamp(22px,3.4vw,40px); border-radius:999px;
  background:var(--forest-800); color:#fff; box-shadow:0 26px 50px -26px rgba(20,40,20,.6); }
.ing__panel{ grid-area:1/1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.3em 1.1em;
  text-align:center; font-size:clamp(1rem,1.6vw,1.16rem); line-height:1.8; }
.ing__panel.is-on{ animation:panelIn .55s var(--ease-out); }
.ing__panel b{ flex:none; padding:.2em 1em; border-radius:999px; background:var(--lime); color:var(--forest-900);
  font-size:.86em; font-weight:900; letter-spacing:.08em; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px); filter:blur(3px); } }
.ing__hint{ margin-top:16px; text-align:center; font-size:.9rem; letter-spacing:.12em; color:var(--sumi-3); }

@media (max-width:699px){
  .ing__tabs{ grid-template-columns:repeat(6,1fr); row-gap:6px; column-gap:6px; }
  .ing__cell{ grid-column:span 2; }
  .ing__cell:nth-child(4){ grid-column:2 / span 2; }
  .ing__item{ border-radius:18px; }
  .ing__disc{ max-width:96px; margin-bottom:8px; }
  .ing__zoom{ --d:min(96px, calc(100cqw - 4px)); top:calc(10px + var(--d) * .64); left:calc(50% + min(var(--d) * .5, 50% - 2px) - 34px);
    width:34px; height:34px; }
  .ing__zoom svg{ width:17px; height:17px; }
  .ing__item{ padding:10px 2px 12px; }
  .ing__bar{ border-radius:20px; }
  .ing__panel{ flex-direction:column; gap:.4em; }
}

/* ---- the ingredient overlay ---------------------------------------------- */
.ingx{ width:min(92vw,880px); max-width:none; max-height:92vh; margin:auto; padding:0; border:0; overflow:visible;
  background:transparent; color:#fff; }
.ingx::backdrop{ background:rgba(6,16,10,.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.ingx__panel{ position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(20px,4vw,56px);
  padding:clamp(26px,4vw,52px); border-radius:calc(var(--r) + 6px);
  background:
    radial-gradient(60% 70% at 30% 50%, rgba(182,236,63,.2), rgba(182,236,63,0) 70%),
    linear-gradient(160deg, var(--forest-700), var(--forest-950));
  box-shadow:0 50px 100px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(182,236,63,.22); }
.ingx__fig{ position:relative; display:grid; place-items:center; aspect-ratio:1; }
.ingx__fig::before{ content:""; position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.1), rgba(255,255,255,0) 70%); }
.ingx__fig img{ position:relative; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 40px 40px rgba(0,0,0,.55)); }
.ingx__fig.is-leaf img{ width:70%; }
.ingx__n{ font-family:var(--latin); font-size:.8rem; font-weight:600; letter-spacing:.3em; color:var(--lime); margin-bottom:.4em; }
.ingx__name{ font-weight:900; line-height:1.3; letter-spacing:.02em; font-size:clamp(1.6rem,3.6vw,2.4rem); margin-bottom:.45em; white-space:nowrap; }
.ingx__role{ font-family:var(--mincho); font-weight:700; line-height:2; letter-spacing:.05em;
  font-size:clamp(.98rem,1.8vw,1.15rem); color:var(--on-dark); }
.ingx__nav{ display:flex; align-items:center; gap:14px; margin-top:clamp(20px,3vw,34px); }
.ingx__step{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff;
  border:1.5px solid rgba(255,255,255,.35); transition:background .3s, border-color .3s, color .3s; }
.ingx__step svg{ width:20px; height:20px; }
.ingx__step:hover{ background:var(--lime); border-color:var(--lime); color:var(--forest-900); }
.ingx__count{ font-family:var(--latin); font-size:.9rem; letter-spacing:.2em; color:var(--on-dark-2); }
.ingx__close{ position:absolute; top:-16px; right:-16px; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:var(--beni); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.4); }
.ingx__close svg{ width:20px; height:20px; }
.ingx[open] .ingx__panel{ animation:ingxIn .55s var(--ease-out); }
.ingx[open]::backdrop{ animation:fadeIn .35s ease; }
.ingx__fig.is-swap img{ animation:ingxImg .6s var(--ease-out); }
@keyframes ingxIn{ from{ opacity:0; transform:translateY(24px) scale(.96); } }
@keyframes ingxImg{ from{ opacity:0; transform:scale(.82) rotate(-8deg); } }
@keyframes fadeIn{ from{ opacity:0; } }
@media (max-width:699px){
  .ingx__panel{ grid-template-columns:1fr; text-align:center; gap:10px; padding:26px 22px 28px; }
  .ingx__fig{ width:min(70vw,290px); margin-inline:auto; }
  .ingx__nav{ justify-content:center; }
  .ingx__close{ top:-14px; right:-8px; }
}

/* ==========================================================================
   14. アレンジ方法 — on paper
   ========================================================================== */

.eat__head{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 26px; margin-bottom:clamp(30px,4vw,48px); }
.eat__note{ font-size:.9rem; color:var(--sumi-3); letter-spacing:.05em; margin-left:auto; }
.eat__track{ display:grid; gap:clamp(16px,2.4vw,30px);
  grid-auto-flow:column; grid-auto-columns:78%;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
  margin-inline:calc(var(--pad) * -1); padding:6px var(--pad) 18px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.eat__track::-webkit-scrollbar{ display:none; }
@media (min-width:700px){
  .eat__track{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto;
    overflow:visible; margin-inline:0; padding-inline:0; scroll-snap-type:none; }
  .eat__card:nth-child(2){ margin-top:clamp(20px,4vw,56px); }
}
.eat__card{ scroll-snap-align:start; }
.eat__fig{ position:relative; margin-bottom:18px; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4;
  background:var(--washi-2); box-shadow:0 30px 50px -28px rgba(40,30,10,.5); }
.eat__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.eat__card:hover .eat__fig img{ transform:scale(1.06); }
.eat__num{ position:absolute; left:14px; top:14px; z-index:2; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:var(--forest-800); color:var(--lime);
  font-family:var(--mincho); font-weight:700; }
.eat__t{ font-weight:900; font-size:clamp(1.08rem,2.6vw,1.36rem); letter-spacing:.02em; color:var(--forest-800); }
.eat__t::after{ content:""; display:block; width:28px; height:3px; border-radius:2px; background:var(--beni); margin:.5em 0 .55em; }
.eat__d{ font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.95; color:var(--sumi-2); }
.eat__dots{ display:flex; justify-content:center; margin-top:4px; }
@media (min-width:700px){ .eat__dots{ display:none; } }
.eat__dots button{ width:40px; height:44px; display:grid; place-items:center; }
.eat__dots button::before{ content:""; width:9px; height:9px; border-radius:5px; background:var(--sumi-3); opacity:.35;
  transition:width .3s var(--ease), opacity .3s, background .3s; }
.eat__dots button[aria-current="true"]::before{ width:26px; opacity:1; background:var(--forest-800); }

/* ==========================================================================
   15. もったいない — in the leaves
   ========================================================================== */
.mot__banner{ border-radius:var(--r); overflow:hidden; margin-bottom:clamp(40px,5vw,64px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.mot__banner img{ width:100%; }
.mot__grid{ display:grid; gap:clamp(34px,4.4vw,64px); align-items:start; }
@media (min-width:900px){ .mot__grid{ grid-template-columns:1.05fr .95fr; } }
.mot__body .h-sec{ margin-bottom:.9em; }
.mot__pull{ margin:1.8em 0; padding:1.1em 0 1.1em 24px; border-left:3px solid var(--lime);
  font-family:var(--mincho); font-weight:700; letter-spacing:.06em; line-height:2;
  font-size:clamp(1.02rem,2.2vw,1.3rem); color:var(--lime-soft); }
.mot__gal{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mot__gal figure{ border-radius:16px; overflow:hidden; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); }
.mot__gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.mot__gal figure:hover img{ transform:scale(1.05); }
.mot__gal .wide{ grid-column:1/-1; }
.mot__gal .wide img{ aspect-ratio:16/9; }
.mot__cap{ grid-column:1/-1; font-size:.94rem; line-height:1.8; text-align:center; color:var(--on-dark-2); }
.mot__cred{ margin-top:clamp(40px,4.4vw,60px); padding:clamp(22px,3vw,34px); border-radius:var(--r);
  background:rgba(8,22,13,.5); border:1px solid var(--line-d);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.mot__cred h3{ display:inline-flex; align-items:center; gap:.6em; margin-bottom:.9em;
  font-size:.96rem; font-weight:900; letter-spacing:.18em; color:var(--lime); }
.mot__cred h3::before{ content:""; width:22px; height:2px; background:currentColor; }
.mot__cred ul{ display:grid; gap:.55em 2em; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.mot__cred li{ position:relative; padding-left:1.1em; font-size:1.02rem; line-height:1.85; color:var(--on-dark); }
.mot__cred li::before{ content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--lime); }
.mot__cred b{ color:#fff; font-weight:900; }

/* ==========================================================================
   16. 購入 — the contrasting block: deep green, the packet under a light
   ========================================================================== */
.buy__grid{ display:grid; gap:clamp(40px,5vw,80px); align-items:center; }
@media (min-width:900px){ .buy__grid{ grid-template-columns:.9fr 1.1fr; } }
.buy__pack{ width:min(100%,400px); margin-inline:auto; perspective:1400px; }
.buy__pack img{ width:100%; border-radius:10px; box-shadow:0 44px 60px -28px rgba(40,30,10,.45);
  transform:rotateY(calc(var(--tilt,0) * -12deg)) rotate(2deg);
  }
.buy__name{ font-weight:900; line-height:1.2; letter-spacing:.02em; margin-bottom:.45em; color:var(--forest-800);
  font-size:clamp(2rem,5.2vw,3.1rem); }
.buy__table{ margin:1.7em 0; border-top:1px solid var(--line); }
.buy__row{ display:flex; gap:16px; align-items:baseline; padding:.95em 0; border-bottom:1px solid var(--line); }
.buy__row dt{ flex:none; width:8.4em; font-size:.92rem; font-weight:700; letter-spacing:.1em; color:var(--sumi-2); }
.buy__row dd{ font-weight:700; letter-spacing:.02em; font-size:1.08rem; }
.buy__price{ display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; }
.buy__price b{ font-family:var(--latin); font-weight:500; font-size:1.9rem; line-height:1.2; color:var(--beni); }
.buy__price small{ font-size:.79rem; font-weight:500; color:var(--sumi-2); }
.buy__btn{ width:100%; max-width:440px; }
.buy__shops{ margin-top:1.4em; font-size:.96rem; line-height:1.95; color:var(--sumi-2); }
.buy__shops b{ color:var(--sumi); }

/* ==========================================================================
   17. ほかの大葉商品 — on paper
   ========================================================================== */
.oth__head{ text-align:center; margin-bottom:clamp(34px,4.4vw,56px); }
.oth .h-sec{ color:var(--forest-800); }
.oth__list{ display:grid; gap:clamp(18px,3.4vw,34px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  width:min(860px,100%); margin-inline:auto; }
.oth__card{ display:flex; flex-direction:column; padding:clamp(22px,3vw,34px); border-radius:var(--r);
  background:var(--kinari); box-shadow:0 30px 50px -34px rgba(40,30,10,.45), inset 0 0 0 1px rgba(47,107,60,.12);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.oth__card:hover{ transform:translateY(-8px); box-shadow:0 40px 60px -30px rgba(40,30,10,.5), inset 0 0 0 1px rgba(47,107,60,.18); }
.oth__card figure{ position:relative; aspect-ratio:1; margin-bottom:18px; display:grid; place-items:center;
  border-radius:18px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #fff 0%, var(--washi-2) 100%); }
.oth__card figure img{ width:74%; height:74%; object-fit:contain; transition:transform .8s var(--ease-out);
  filter:drop-shadow(0 16px 20px rgba(40,30,10,.25)); }
.oth__card:hover figure img{ transform:translateY(-6px) scale(1.03); }
.oth__tag{ position:absolute; right:12px; top:12px; z-index:2; display:grid; place-content:center;
  width:48px; aspect-ratio:1; border-radius:50%; background:var(--forest-800); color:#fff;
  font-size:.74rem; font-weight:900; letter-spacing:.06em; rotate:-8deg; box-shadow:inset 0 0 0 2px var(--lime); }
.oth__kick{ font-size:.92rem; font-weight:900; letter-spacing:.14em; color:var(--beni-t); margin-bottom:.4em; }
.oth__card h3{ font-weight:900; font-size:1.5rem; letter-spacing:.02em; margin-bottom:.5em; color:var(--forest-800); }
.oth__card p{ font-size:1.02rem; line-height:1.95; color:var(--sumi-2); margin-bottom:1em; }
.oth__card .price{ font-weight:900; font-size:1.06rem; color:var(--sumi); margin-bottom:1.1em; }
.oth__card .btn{ margin-top:auto; }

/* ---- 18. closing ------------------------------------------------------- */
.more{ text-align:center; }
.more__inner{ position:relative; width:min(820px,100%); margin-inline:auto;
  padding:clamp(40px,6vw,80px) clamp(22px,4vw,60px); border-radius:calc(var(--r) + 6px);
  background:rgba(8,22,13,.55); border:1px solid rgba(182,236,63,.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.more h2{ font-weight:900; line-height:1.55; letter-spacing:.04em; margin-bottom:.6em; font-size:clamp(1.5rem,4vw,2.4rem); }
.more .lead{ max-width:36em; margin:0 auto 1.9em; }
/* the button text is long; on a phone it must wrap inside the panel */
.btn{ max-width:100%; }
@media (max-width:599px){
  .more .btn{ white-space:normal; width:100%; padding-inline:1.2em; font-size:.98rem; line-height:1.5; }
}

/* ---- 19. footer -------------------------------------------------------- */
.ft{ background:#2E5A3A; color:#fff; margin-right:var(--rail);
  padding:clamp(48px,6vw,76px) 0 calc(34px + env(safe-area-inset-bottom)); }
.ft__top{ display:flex; flex-wrap:wrap; gap:26px 44px; align-items:flex-start;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.22); }
.ft__logo img{ width:70px; border-radius:6px; margin-bottom:12px; }
.ft__logo span{ font-family:var(--latin); font-size:.76rem; letter-spacing:.28em; color:rgba(255,255,255,.82); }
.ft__addr{ font-size:.94rem; line-height:2; font-style:normal; }
.ft__nav{ display:flex; flex-wrap:wrap; gap:0 24px; margin-left:auto; }
.ft__nav a{ display:inline-flex; align-items:center; min-height:44px; font-size:.94rem; font-weight:700;
  letter-spacing:.06em; color:rgba(255,255,255,.86); transition:color .3s; }
.ft__nav a:hover{ color:var(--lime-soft); }
.ft__cp{ margin-top:24px; font-family:var(--latin); font-size:.74rem; letter-spacing:.16em; color:rgba(255,255,255,.78); }

/* ==========================================================================
   20. scroll choreography
   Only armed once JS has loaded (html.js), so with scripts off every element
   is simply visible.
   ========================================================================== */
.js .rv{ opacity:0; transform:translateY(36px); }
.js .rv.is-in{ opacity:1; transform:none;
  transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.js .rv-s > *{ opacity:0; transform:translateY(28px); }
.js .rv-s.is-in > *{ opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.js .rv-s.is-in > *:nth-child(2){ transition-delay:.08s; }
.js .rv-s.is-in > *:nth-child(3){ transition-delay:.16s; }
.js .rv-s.is-in > *:nth-child(4){ transition-delay:.24s; }
.js .rv-s.is-in > *:nth-child(5){ transition-delay:.32s; }
.js .rv-zoom{ opacity:0; transform:scale(.94); filter:blur(6px); }
.js .rv-zoom.is-in{ opacity:1; transform:none; filter:none;
  transition:opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out), filter 1s var(--ease-out); }
.js .rv-clip{ clip-path:inset(18% 0 0 0 round var(--r)); }
.js .rv-clip img{ transform:scale(1.18); }
.js .rv-clip.is-in{ clip-path:inset(0 0 0 0 round var(--r)); transition:clip-path 1.2s var(--ease-out); }
.js .rv-clip.is-in img{ transform:scale(1); transition:transform 1.6s var(--ease-out); }
.js .eat__card:hover .rv-clip.is-in img{ transform:scale(1.06); }

/* the note assembles: leaf grows in, then each point arrives and draws its arrow */
.js .nt__leaf img{ opacity:0; transform:scale(.7) rotate(-10deg); }
.js .nt__pt, .js .nt__kun, .js .nt__head{ opacity:0; transform:translateY(20px); }
.js .nt__stroke{ stroke-dashoffset:1; }
.js .js .nt__tip{ opacity:0; }
.js .nt.is-in .nt__head{ opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.js .nt.is-in .nt__leaf img{ opacity:1; transform:none;
  transition:opacity 1s var(--ease-out) .15s, transform 1.4s cubic-bezier(.2,1.35,.4,1) .15s; }
.js .nt.is-in .nt__pt{ opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.js .nt.is-in .nt__pt--1{ transition-delay:.45s; }
.js .nt.is-in .nt__pt--2{ transition-delay:.65s; }
.js .nt.is-in .nt__pt--3{ transition-delay:.85s; }
.js .nt.is-in .nt__kun{ opacity:1; transform:none; transition:opacity .8s var(--ease-out) 1.1s, transform .9s var(--ease-out) 1.1s; }
.js .nt.is-in .nt__stroke{ stroke-dashoffset:0; transition:stroke-dashoffset .7s var(--ease) 1s; }
.js .nt.is-in .nt__tip{ opacity:1; transition:opacity .3s 1.6s; }

/* ==========================================================================
   15b. 発売までのカウントダウン — above the purchase button
   Plain paper cells with the page's own numerals, so it reads as part of the
   product facts rather than a shop banner. The figures are tabular and the
   cells have a floor width, so nothing shifts as the numbers change.
   ========================================================================== */
.cd{ display:flex; flex-wrap:wrap; align-items:center; gap:10px clamp(14px,2.2vw,20px);
  margin:0 0 1.5em; padding:clamp(12px,1.7vw,16px) clamp(14px,2vw,20px);
  border:1px solid var(--line); border-radius:16px; background:rgba(255,253,246,.72); }
.cd[hidden]{ display:none; }
.cd__lb{ display:inline-flex; align-items:center; gap:.6em;
  font-size:.92rem; font-weight:800; letter-spacing:.14em; color:var(--midori); }
.cd__lb i{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--beni);
  animation:cdblip 2.6s ease-in-out infinite; }
.cd__cells{ display:flex; align-items:flex-end; gap:clamp(8px,1.3vw,13px); }
.cd__cells[hidden]{ display:none; }
.cd__c{ display:grid; justify-items:center; gap:3px; min-width:clamp(48px,7.2vw,60px);
  padding:.4em .45em .32em; border:1px solid var(--line); border-radius:11px;
  background:#fff; box-shadow:0 6px 14px -10px rgba(40,30,10,.5); }
.cd__c b{ font-family:var(--latin); font-weight:500; line-height:1;
  font-variant-numeric:tabular-nums; font-size:clamp(1.45rem,3.4vw,1.85rem);
  color:var(--forest-800); }
.cd__c em{ font-style:normal; font-size:.78rem; font-weight:800; letter-spacing:.06em;
  color:var(--sumi-3); }
@keyframes cdblip{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-s > *,.js .rv-zoom,.js .rv-clip,.js .rv-clip img,
  .js .nt__leaf img,.js .nt__pt,.js .nt__kun,.js .nt__head,.js .nt__tip{
    opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; transition:none !important; }
  .js .nt__stroke{ stroke-dashoffset:0 !important; }
  .p14.is-armed .p14__stack i{ opacity:1 !important; translate:none !important; }
  .hero__media, .hero__copy{ transform:none !important; opacity:1 !important; }
  .dishes__track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
  .dishes__item[aria-hidden="true"]{ display:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}