/* v6 / 2026-09-30 Ohh!Berry 公式サイト
   文字の設計：工程の章＝明朝（Shippori Mincho B1）／本文＝ゴシック（Zen Kaku Gothic New）／
   英字の飾り＝Cormorant Garamond／「あまーい！」だけ丸文字（Zen Maru Gothic） */
:root{
  --ink:#1f2a1e; --ink-2:#5c6358; --cream:#f4f0e6; --paper:#fbf8f1; --line:#e7dfcf;
  --leaf:#3c5738; --berry:#c8174f; --sweet:#ee3a7a; --gold:#f3d9a6;
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
  --maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --shadow:0 24px 60px rgba(20,30,18,.14);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--gothic);color:var(--ink);background:#10170f;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid #efbb55;outline-offset:5px}
.skip-link{position:fixed;top:0;left:20px;transform:translateY(-150%);z-index:100;background:var(--paper);color:var(--ink);padding:12px 20px}
.skip-link:focus{transform:none}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:24px;min-height:82px;padding:16px clamp(16px,3.2vw,44px);color:#fff;background:linear-gradient(180deg,rgba(12,18,10,.58),rgba(12,18,10,0));transition:background .35s,color .35s,box-shadow .35s}
.hdr.solid{background:rgba(251,248,241,.94);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06);backdrop-filter:blur(10px)}
.logo{font:600 25px/1 var(--latin);letter-spacing:.01em;text-decoration:none;display:flex;flex-direction:column;gap:5px;white-space:nowrap}
.logo small{font:500 8.5px/1 var(--gothic);letter-spacing:.36em;text-transform:uppercase;opacity:.78;padding-left:2px}
.chapnav{margin-left:auto;display:flex;gap:2px}
.chapnav a{font:500 12.5px/1 var(--gothic);letter-spacing:.14em;text-decoration:none;padding:9px 11px;border-radius:999px;opacity:.72;transition:opacity .2s,background .2s}
.chapnav a:hover{opacity:1}
.chapnav a.on{opacity:1;background:rgba(255,255,255,.16)}
.hdr.solid .chapnav a.on{background:rgba(60,87,56,.1)}
.cta-top{font:700 12.5px/1 var(--gothic);letter-spacing:.16em;text-decoration:none;background:var(--berry);color:#fff;padding:13px 20px;border-radius:999px;box-shadow:0 8px 20px rgba(200,23,79,.32);white-space:nowrap}
.menu-toggle{display:none}

/* ---------- scrub film ---------- */
.scrub{position:relative;height:var(--len,500vh)}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.media{position:absolute;inset:0;background:#1a2418}
.media video,.media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .poster{opacity:0;transition:opacity .35s ease}
.media .poster.show{opacity:1}
.media .final-still{transform:scale(var(--kb,1));transform-origin:62% 64%;will-change:transform,opacity}
.media video{opacity:0;transition:opacity .4s ease}
.media video.ready{opacity:1}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,10,.55) 0%,rgba(12,18,10,.24) 42%,rgba(12,18,10,0) 68%),linear-gradient(0deg,rgba(12,18,10,.25),rgba(12,18,10,0) 30%)}
.taste .scrim{background:linear-gradient(90deg,rgba(12,18,10,.48) 0%,rgba(12,18,10,.14) 40%,rgba(12,18,10,0) 62%)}
.progress{position:absolute;left:clamp(16px,3.2vw,44px);right:360px;bottom:24px;height:1px;background:rgba(255,255,255,.26);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:#fff}
.scroll-cue{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font:italic 500 15px/1 var(--latin);letter-spacing:.14em;opacity:var(--cue,1);pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.scroll-cue i{display:block;width:1px;height:46px;background:linear-gradient(#fff,rgba(255,255,255,0));transform-origin:top;animation:cue 2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- ボタニカルの切り替え ---------- */
.botanic{position:absolute;inset:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:2}
.bt-curtain{position:absolute;left:0;top:0;will-change:transform}
.bt-panel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.bt-edge{position:absolute;top:0;bottom:0;width:0;filter:drop-shadow(0 10px 16px rgba(10,30,10,.28))}
.bt-edge.l{left:0}.bt-edge.r{right:0}
.bt-edge .bt-sp{position:absolute;left:0;top:calc(var(--y) * 100%);height:calc(var(--s) * var(--ch,900px));width:auto;max-width:none;transform:translate(calc(-50% + var(--dx) * 100%),-50%) rotate(var(--r))}
.bt-fly .bt-sp{position:absolute;left:0;top:0;width:auto;max-width:none;will-change:transform;filter:drop-shadow(0 8px 14px rgba(10,30,10,.22))}
html:not(.is-motion) .botanic{display:none}

/* ---------- chapter text ---------- */
.ch{position:absolute;left:clamp(22px,6.4vw,104px);top:50%;width:min(900px,86vw);color:#fff;opacity:0;transform:translateY(-46%);will-change:opacity,transform;pointer-events:none;line-break:strict}
.ch.on{pointer-events:auto}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px;font:500 11.5px/1 var(--gothic);letter-spacing:.26em}
.eyebrow .no{font:italic 500 24px/1 var(--latin);letter-spacing:.02em}
.eyebrow .rule{width:40px;height:1px;background:currentColor;opacity:.55}
.ch h1,.ch h2{font-family:var(--mincho);font-weight:600;font-feature-settings:"palt";word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 2px 24px rgba(0,0,0,.18)}
.ch h1{font-size:clamp(48px,6.3vw,100px);line-height:1.2;letter-spacing:.05em;margin:0 0 28px}
.ch h1 em{font-style:normal;color:var(--gold)}
.ch h2{font-size:clamp(32px,3.9vw,60px);line-height:1.34;letter-spacing:.06em;margin:0 0 24px}
.ln{display:block;overflow:hidden;padding:0 .1em .12em 0;margin-bottom:-.12em}
.ln>span{display:inline-block;transform:translateY(calc((1 - clamp(0, (var(--a,1) - var(--k,0) * .16) / .84, 1)) * 112%));will-change:transform}
.ch .num{font-weight:500;font-size:.7em;margin-right:.32em;vertical-align:.12em;opacity:.92}
.ch .lead{font:400 clamp(15px,1.12vw,17px)/2 var(--gothic);letter-spacing:.07em;margin:0 0 22px;max-width:36em;text-shadow:0 1px 14px rgba(0,0,0,.28)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0 0 20px}
.chips li{font:500 12px/1 var(--gothic);letter-spacing:.12em;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 14px;background:rgba(12,18,10,.14);backdrop-filter:blur(6px)}
.more{margin:0 0 18px;max-width:36em}
.more summary{list-style:none;cursor:pointer;font:500 13.5px/1 var(--gothic);letter-spacing:.1em;display:inline-flex;align-items:center;gap:10px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"＋";display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid rgba(255,255,255,.7);border-radius:50%;font-size:11px}
.more[open] summary::before{content:"−"}
.more p{font-size:13.5px;line-height:1.9;letter-spacing:.05em;margin:12px 0 0;background:rgba(12,18,10,.36);padding:13px 16px;border-radius:12px;backdrop-filter:blur(8px)}
.jump{display:inline-flex;gap:12px;align-items:center;font:700 13.5px/1 var(--gothic);letter-spacing:.14em;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:7px}
.jump span{transition:transform .2s}.jump:hover span{transform:translateX(4px)}
.ch .fine,.fine{font-size:11.5px;letter-spacing:.05em;opacity:.86;margin:6px 0 0}
.ch.dark{color:var(--ink)}
.ch.dark h2{text-shadow:none}
.ch.dark .chips li{border-color:rgba(31,42,30,.3);background:rgba(255,255,255,.55)}
.ch.dark .lead{text-shadow:none}

/* ---------- 「あま〜い！」：Dela Gothic One ＋ ぷっくりキャンディの質感 ---------- */
.ch.sweet{top:63%}
.ch.sweet .eyebrow .no{font:600 22px/1 var(--mincho);font-style:normal}
.ch.sweet h2.pop{font-family:"Dela Gothic One",var(--maru);font-weight:400;font-size:clamp(64px,9vw,146px);line-height:1.12;letter-spacing:.03em;white-space:nowrap;margin:0 0 30px;padding:.1em .16em .22em .12em;color:transparent;text-shadow:none}
.pop .c{position:relative;display:inline-block;opacity:0;transform:translateY(.5em) scale(.2) rotate(var(--r));transform-origin:50% 88%}
.pop .c b{position:absolute;left:0;top:0;font-weight:inherit;white-space:nowrap;pointer-events:none}
/* 白いフチは太く・丸く（線の太さ＋16方向の影×3段で、下の立体部分まで同じ太さで囲む） */
.pop .s{color:#fff;-webkit-text-stroke:.2em #fff;filter:drop-shadow(0 .1em .14em rgba(120,10,50,.36));text-shadow:0.070em 0.000em 0 #fff,0.065em 0.027em 0 #fff,0.049em 0.049em 0 #fff,0.027em 0.065em 0 #fff,0.000em 0.070em 0 #fff,-0.027em 0.065em 0 #fff,-0.049em 0.049em 0 #fff,-0.065em 0.027em 0 #fff,-0.070em 0.000em 0 #fff,-0.065em -0.027em 0 #fff,-0.049em -0.049em 0 #fff,-0.027em -0.065em 0 #fff,-0.000em -0.070em 0 #fff,0.027em -0.065em 0 #fff,0.049em -0.049em 0 #fff,0.065em -0.027em 0 #fff,0.070em 0.050em 0 #fff,0.065em 0.077em 0 #fff,0.049em 0.099em 0 #fff,0.027em 0.115em 0 #fff,0.000em 0.120em 0 #fff,-0.027em 0.115em 0 #fff,-0.049em 0.099em 0 #fff,-0.065em 0.077em 0 #fff,-0.070em 0.050em 0 #fff,-0.065em 0.023em 0 #fff,-0.049em 0.001em 0 #fff,-0.027em -0.015em 0 #fff,-0.000em -0.020em 0 #fff,0.027em -0.015em 0 #fff,0.049em 0.001em 0 #fff,0.065em 0.023em 0 #fff,0.070em 0.100em 0 #fff,0.065em 0.127em 0 #fff,0.049em 0.149em 0 #fff,0.027em 0.165em 0 #fff,0.000em 0.170em 0 #fff,-0.027em 0.165em 0 #fff,-0.049em 0.149em 0 #fff,-0.065em 0.127em 0 #fff,-0.070em 0.100em 0 #fff,-0.065em 0.073em 0 #fff,-0.049em 0.051em 0 #fff,-0.027em 0.035em 0 #fff,-0.000em 0.030em 0 #fff,0.027em 0.035em 0 #fff,0.049em 0.051em 0 #fff,0.065em 0.073em 0 #fff}
.pop .x{color:#a8104b;-webkit-text-stroke:.012em #a8104b;text-shadow:0 .02em 0 #b8124f,0 .04em 0 #a8104b,0 .06em 0 #980e45,0 .08em 0 #890c3e,0 .1em 0 #7b0a38}
.pop i{position:relative;font-style:normal;color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.2) 28%,rgba(255,255,255,0) 40%),linear-gradient(180deg,#ffabc9 0%,#ff5c93 46%,#e2266a 100%);
  -webkit-background-clip:text;background-clip:text}
.sweet.popped .pop .c{animation:jelly .95s cubic-bezier(.22,1.3,.36,1) both;animation-delay:calc(var(--i) * 85ms)}
@keyframes jelly{
  0%{opacity:0;transform:translateY(.55em) scale(.2) rotate(var(--r))}
  38%{opacity:1;transform:translateY(-.1em) scale(1.13,.88) rotate(calc(var(--r) * -.5))}
  58%{transform:translateY(0) scale(.93,1.09) rotate(calc(var(--r) * .3))}
  76%{transform:translateY(0) scale(1.04,.97) rotate(calc(var(--r) * .4))}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(calc(var(--r) * .35))}}
.pop .dash{width:calc(1.02em * var(--stretch,1))}
.pop .dash .w{position:relative;display:inline-block;transform-origin:6% 55%;transform:scaleX(var(--stretch,1))}
.pop .dash .wv{position:relative;display:inline-block}
.sweet.popped .pop .dash .wv{animation:wave 1.7s ease-in-out 1.1s infinite}
@keyframes wave{0%,100%{transform:translateY(0) skewX(0)}50%{transform:translateY(-.03em) skewX(-7deg)}}
.ch.sweet .lead{font:500 clamp(16px,1.3vw,20px)/1.9 var(--mincho);letter-spacing:.08em}

/* ---------- packaging ---------- */
.pack{position:relative;height:var(--len,300vh);background:var(--cream)}
.pack-bg{position:absolute;inset:0;background:url("img/pack_bg.jpg") center/cover no-repeat}
.pack-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,248,241,.92) 0%,rgba(251,248,241,.6) 38%,rgba(251,248,241,.05) 66%)}
.pack-halo{position:absolute;left:70%;top:50%;width:min(80vh,720px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,244,228,.95),rgba(255,236,214,.55) 46%,rgba(255,236,214,0));opacity:0;pointer-events:none;will-change:opacity,transform}
.pack-layer{position:absolute;left:70%;top:50%;opacity:0;will-change:transform,opacity}
.pack-layer img{height:min(62vh,560px);width:auto;max-width:none}
.pack-layer.pouch{z-index:2}
.pack-layer.pouch img{filter:drop-shadow(0 26px 30px rgba(40,25,15,.26))}
.pack-layer.box{z-index:3}
.box-3d{position:relative;transform:perspective(1500px) rotateY(var(--ry,0deg)) scale(var(--bs,1));transform-origin:50% 60%;filter:drop-shadow(0 30px 36px rgba(70,18,30,.26));will-change:transform}
.gloss{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("img/box.webp") center/100% 100% no-repeat;mask:url("img/box.webp") center/100% 100% no-repeat;
  background:linear-gradient(103deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 41%,rgba(255,255,255,.16) 45.5%,rgba(255,255,255,.76) 49.4%,rgba(255,255,255,.2) 53%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
  background-size:320% 100%;background-position:var(--gx,100%) 0;mix-blend-mode:screen;opacity:var(--go,0)}
.gloss.soft{background:linear-gradient(103deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 49%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 100%);background-size:320% 100%;mix-blend-mode:soft-light}

/* ---------- buy ---------- */
.buy{background:var(--paper);padding:140px clamp(20px,5vw,72px) 110px;position:relative;overflow:hidden}
.buy::before{content:"";position:absolute;inset:0;background:url("img/farm_soft.jpg") center/cover no-repeat;opacity:.14}
.buy-inner{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:center}
.buy-visual img{width:100%;max-width:600px;margin:auto;filter:drop-shadow(0 30px 40px rgba(40,30,15,.2))}
.buy-card{background:#fff;border-radius:26px;padding:clamp(28px,3.4vw,48px);box-shadow:var(--shadow);border:1px solid #efe8da}
.kicker{font:italic 500 19px/1 var(--latin);letter-spacing:.02em;color:var(--leaf);margin:0 0 16px}
.pname{font:600 clamp(23px,2.1vw,30px)/1.45 var(--mincho);letter-spacing:.02em;font-feature-settings:"palt";margin:0 0 10px;word-break:keep-all}
.pname .brand{display:block;font:600 clamp(32px,3vw,44px)/1.05 var(--latin);letter-spacing:.005em;color:var(--berry);margin-bottom:8px}
.pmeta{font:500 13px/1.6 var(--gothic);letter-spacing:.1em;color:var(--ink-2);margin:0 0 22px}
.appeal{font:500 16px/1.95 var(--mincho);letter-spacing:.08em;margin:0 0 24px;padding:16px 0;border-top:1px solid #eee6d6;border-bottom:1px solid #eee6d6}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px;font:600 62px/1 var(--latin);font-variant-numeric:lining-nums;letter-spacing:.005em;margin:0 0 24px;color:var(--ink)}
.price .yen{font-size:.52em;margin-right:4px}
.price small{font:500 13px/1 var(--gothic);letter-spacing:.08em;color:var(--ink-2);margin-left:8px}
.price .badge{margin-left:auto;align-self:center;font:700 12px/1 var(--gothic);letter-spacing:.14em;color:#fff;background:var(--leaf);border-radius:999px;padding:9px 14px}
.buy-btn{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:64px;border-radius:999px;background:var(--berry);color:#fff;font:700 16.5px/1 var(--gothic);letter-spacing:.24em;text-decoration:none;box-shadow:0 14px 30px rgba(200,23,79,.3);transition:transform .15s,box-shadow .15s,background .2s}
.buy-btn::after{content:"→";letter-spacing:0;transition:transform .2s}
.buy-btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(200,23,79,.36)}
.buy-btn:hover::after{transform:translateX(4px)}
.buy-btn.is-wait{background:#a3a996;box-shadow:none;cursor:default}
.buy-btn.is-wait::after{content:none}
.buy-sub{font-size:12px;line-height:1.85;letter-spacing:.04em;color:var(--ink-2);margin:12px 4px 0}
.terms{list-style:none;padding:0;margin:18px 0 0;font-size:13px;letter-spacing:.05em;color:var(--ink-2)}
.terms li{padding:3px 0}.terms li::before{content:"・"}
.enjoy{margin:22px 0 0;padding:16px 18px;background:#fbf3f6;border-radius:16px}
.enjoy p{font:600 13.5px/1 var(--mincho);letter-spacing:.12em;margin:0 0 12px;color:var(--berry)}
.enjoy ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.enjoy li{font:500 12px/1 var(--gothic);letter-spacing:.08em;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #f1d3dd}
.tv{display:flex;align-items:center;gap:8px;margin:18px 0 0;font:700 12px/1.4 var(--gothic);letter-spacing:.1em;color:var(--leaf)}
.tv svg{width:18px;height:18px;flex:none}

/* ---------- product facts / info ---------- */
.product-facts{padding:110px max(24px,6vw);background:var(--paper);display:grid;grid-template-columns:1fr 1.3fr;gap:60px;border-top:1px solid #ebe3d4}
.product-facts h2{font:600 clamp(26px,2.6vw,38px)/1.6 var(--mincho);letter-spacing:.07em;font-feature-settings:"palt";margin:0}
.product-facts dl{margin:0}
.product-facts dl>div{display:grid;grid-template-columns:110px 1fr;gap:20px;border-bottom:1px solid #e6dfd0;padding:15px 0;font-size:14px;letter-spacing:.05em}
.product-facts dt{color:var(--leaf);font-weight:500}.product-facts dd{margin:0}
.info{background:var(--cream);padding:100px clamp(20px,5vw,72px)}
.info-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)}
.info h3{font:600 23px/1.5 var(--mincho);letter-spacing:.07em;font-feature-settings:"palt";margin:0 0 20px}
.howto ol{padding-left:1.3em;margin:0;font-size:14px;letter-spacing:.04em}
.howto li{margin:0 0 14px}.howto b{display:block;font:600 15.5px/1.6 var(--mincho);letter-spacing:.08em}
.faq details{border-top:1px solid #ddd5c4;padding:13px 0}
.faq details:last-child{border-bottom:1px solid #ddd5c4}
.faq summary{cursor:pointer;font-weight:500;font-size:14.5px;letter-spacing:.04em}
.faq p{margin:8px 0 0;font-size:13.5px;line-height:1.9;color:#4b5249}
.caution ul{padding-left:1.1em;margin:0;font-size:13.5px;line-height:1.9;letter-spacing:.03em}.caution li{margin:0 0 8px}
#buy,#productInfo{scroll-margin-top:80px}

/* ---------- footer ---------- */
.ftr{background:#1d2a1c;color:#e9e5da;padding:60px clamp(20px,5vw,72px)}
.ftr-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:22px 40px;align-items:flex-start;justify-content:space-between}
.ftr .logo{color:#fff;margin:0}
.ftr nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;letter-spacing:.08em}
.ftr nav a{text-decoration:none;opacity:.86}.ftr nav a:hover{opacity:1}
.ftr .sns a{font:italic 500 15px/1 var(--latin);letter-spacing:.04em}
.ftr .fine{width:100%;opacity:.66;line-height:1.9}

/* ---------- story tools ---------- */
.story-tools{position:fixed;z-index:55;bottom:18px;right:28px;display:flex;align-items:center;gap:14px}
.story-tools button{font:500 12px var(--gothic);letter-spacing:.08em;padding:10px 16px;border-radius:30px;border:1px solid #ffffff75;background:#21311fde;color:#fff;backdrop-filter:blur(10px);cursor:pointer}
.story-tools span{font-size:10px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 5px #000;background:#162515a8;padding:4px 8px;border-radius:4px}
.story-tools button:disabled{cursor:default;opacity:.85}
.story-tools{transition:opacity .3s,transform .3s}
.story-tools.away{opacity:0;transform:translateY(12px);pointer-events:none}

/* ---------- document pages ---------- */
.docpage{background:var(--paper)}
.docpage .hdr{background:var(--paper);color:var(--ink)}
.doc{max-width:860px;margin:0 auto;padding:140px 24px 90px;min-height:75vh}
.doc h1{font:600 32px/1.5 var(--mincho);letter-spacing:.06em;font-feature-settings:"palt";margin:0 0 30px}
.doc h2{font:600 19px/1.6 var(--mincho);letter-spacing:.06em;margin:32px 0 8px}
.doc p,.doc li{font-size:14.5px;letter-spacing:.04em}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:15px 12px;border-bottom:1px solid #e3dccd;letter-spacing:.04em}
.doc th{width:30%;font-weight:500;color:var(--leaf)}
.doc td{overflow-wrap:anywhere}
.doc ol{padding-left:1.3em}.doc li{margin:0 0 10px}
.result-card{max-width:640px;border:1px solid #e7dfcf;background:#fff;border-radius:24px;padding:40px;margin:20px auto}
.result-card h1{font-size:27px}

/* ---------- 静止画で読む（JSなし・動きを減らす設定も同じ見え方） ---------- */
html:not(.is-motion) .scrub,html:not(.is-motion) .pack{height:auto}
html:not(.is-motion) .stage{height:auto;position:relative;overflow:visible;min-height:0}
html:not(.is-motion) .media,html:not(.is-motion) .progress,html:not(.is-motion) .scroll-cue,html:not(.is-motion) .pack-halo{display:none}
html:not(.is-motion) .ch{position:relative;inset:auto;opacity:1!important;transform:none!important;width:100%;padding:130px max(24px,6vw) 70px;min-height:82svh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,#0c120acd,#0c120a44),var(--still) center/cover;color:#fff;pointer-events:auto}
html:not(.is-motion) .ch h1,html:not(.is-motion) .ch h2{max-width:900px}
html:not(.is-motion) .ln>span{transform:none}
html:not(.is-motion) .pop .c{opacity:1;transform:none;animation:none}
html:not(.is-motion) .pop .dash .wv{animation:none}
html:not(.is-motion) .pack .stage{background:var(--cream);display:grid;grid-template-columns:repeat(2,1fr);padding:55px max(24px,6vw);gap:30px}
html:not(.is-motion) .pack-bg{display:none}
html:not(.is-motion) .pack .ch{grid-column:1/-1;grid-row:1;min-height:0;padding:45px 0 20px;background:none;color:var(--ink)}
html:not(.is-motion) .pack-layer{position:relative;inset:auto;opacity:1!important;transform:none!important;width:100%;max-width:100%;align-self:center}
html:not(.is-motion) .pack-layer img{height:auto;max-height:340px;margin:auto;width:auto;max-width:100%}
html:not(.is-motion) .box-3d{transform:none;display:flex;justify-content:center}
html:not(.is-motion) .gloss{display:none}
html:not(.is-motion) .hdr{background:var(--paper);color:var(--ink)}
html:not(.is-motion) .chapnav a.on{background:#3c57381a}
html:not(.has-js) .story-tools button,html:not(.has-js) .menu-toggle{display:none}

/* ---------- smartphone ---------- */
@media (max-width:820px){
  .hdr{min-height:72px;padding:14px 16px;gap:12px}
  .logo{font-size:21px}.logo small{font-size:7.5px;letter-spacing:.3em}
  .menu-toggle{display:flex;gap:8px;align-items:center;margin-left:auto;border:1px solid currentColor;border-radius:25px;background:transparent;color:inherit;font:500 12px var(--gothic);letter-spacing:.08em;padding:9px 12px;min-height:40px}
  .menu-toggle span{font-size:14px}
  .cta-top{margin-left:0;font-size:12px;padding:13px 14px;letter-spacing:.1em}
  .chapnav{display:none;position:absolute;top:70px;left:12px;right:12px;margin:0;background:#fbf8f1;color:var(--ink);box-shadow:0 16px 40px #0003;border-radius:18px;padding:14px;grid-template-columns:repeat(4,1fr);gap:5px}
  .chapnav.open{display:grid}
  .chapnav a{padding:15px 6px;text-align:center;font-size:13px;letter-spacing:.06em}
  .chapnav a.on{background:#3c57381a}
  .scrim{background:linear-gradient(0deg,rgba(12,18,10,.74) 0%,rgba(12,18,10,.36) 44%,rgba(12,18,10,0) 72%)}
  .taste .scrim{background:linear-gradient(0deg,rgba(12,18,10,.7) 0%,rgba(12,18,10,.22) 46%,rgba(12,18,10,0) 72%)}
  .ch{top:auto;bottom:86px;left:22px;width:calc(100vw - 44px);transform:translateY(0);max-height:calc(100svh - 190px);overflow:auto;scrollbar-width:none}
  .eyebrow{margin-bottom:16px;font-size:10.5px}.eyebrow .no{font-size:20px}.eyebrow .rule{width:28px}
  .ch h1{font-size:clamp(42px,11.6vw,62px);margin-bottom:18px}
  .ch h2{font-size:clamp(27px,7.4vw,38px);margin-bottom:16px}
  .ch .lead{font-size:13.5px;line-height:1.95;letter-spacing:.05em;margin-bottom:14px}
  .chips{margin-bottom:12px}.chips li{font-size:11px;padding:7px 11px}
  .more{margin-bottom:12px}.more p{font-size:12.5px}
  .ch.sweet{top:auto}
  .ch.sweet h2.pop{font-size:13.6vw;margin-bottom:18px}
  .progress{bottom:70px;left:22px;right:22px}
  .scroll-cue{display:none}
  .story-tools{bottom:max(14px,env(safe-area-inset-bottom));right:16px;left:16px;justify-content:space-between}
  .story-tools button{padding:9px 13px}.story-tools span{font-size:9px}
  .pack .ch{bottom:76px;max-height:44svh}
  .pack .ch h2{font-size:28px}.pack .ch .lead{font-size:13px}
  .pack-layer,.pack-halo{left:50%;top:32%}
  .pack-layer img{height:36svh}
  .pack-halo{width:74vw}
  .pack-bg::after{background:linear-gradient(0deg,rgba(251,248,241,.95) 0%,rgba(251,248,241,.66) 44%,rgba(251,248,241,0) 72%)}
  .buy{padding:80px 18px}.buy-inner{grid-template-columns:1fr;gap:10px}
  .buy-visual img{max-width:360px}
  .buy-card{padding:28px 22px}
  .price{font-size:52px}
  .product-facts{grid-template-columns:1fr;gap:20px;padding:64px 24px}
  .product-facts dl>div{grid-template-columns:86px 1fr;font-size:13px}
  .info{padding:64px 24px}.info-inner{grid-template-columns:1fr;gap:44px}
  .ftr{padding:48px 24px 96px}
  html:not(.is-motion) .ch{padding:120px 24px 90px;min-height:78svh;max-height:none}
  html:not(.is-motion) .pack .stage{gap:14px;padding:30px 22px 65px}
  html:not(.is-motion) .pack .ch{padding-top:40px;max-height:none}
  html:not(.is-motion) .pack-layer img{height:auto;max-height:190px;width:auto}
  .doc{padding:110px 20px 80px}.doc h1{font-size:25px}.doc table{font-size:13px}.doc th,.doc td{padding:13px 6px}
}
@media (max-width:360px){.hdr{gap:8px;padding:13px}.logo{font-size:19px}.menu-toggle{font-size:11px;padding:8px 10px}.cta-top{font-size:11px;padding:12px}.ch h1{font-size:39px}}
@media (max-height:680px) and (min-width:821px){.ch h1{font-size:56px}.ch h2{font-size:40px}.ch .lead{font-size:14px}.ch.sweet h2.pop{font-size:100px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.docpage .cta-top{margin-left:auto}
.docpage .ftr{margin-top:40px}
.back{margin-top:40px;font-size:14px}