/* ======================= tokens ======================= */
:root{
  --y:#D5A153;          /* 採用色：キャラメル */
  --y-d:#C58C40;
  --br:#512B18;         /* 文字・線の茶 */
  --br2:#63341A;
  --cream:#F1DFC1;      /* 生成り */
  --white:#FFF8EA;
  --band:34px;          /* 左右装飾帯の幅 */
  --maxw:1180px;
  --serif:"Playfair Display",serif;
  --kaku:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --sans:"Noto Sans JP",sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:92px}
body{
  margin:0;background:var(--y);color:var(--br);
  font-family:var(--sans);font-size:15px;font-weight:400;
  line-height:2;letter-spacing:.03em;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body:not(.nodemo){padding-bottom:38px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
.nw{white-space:nowrap;display:inline-block}
h1,h2,h3,h4{margin:0;font-weight:400}

/* ざらつき */
.grain{position:fixed;inset:0;background-image:var(--noise);pointer-events:none;z-index:9998;mix-blend-mode:multiply}

/* ======================= 左右の装飾帯 ======================= */
.band{position:fixed;top:0;bottom:0;width:var(--band);z-index:90;pointer-events:none;
  background:url("../images/band.svg") repeat-y center top / var(--band) auto}
.band--l{left:0}
.band--r{right:0;transform:scaleX(-1)}

/* ======================= 固定UI ======================= */
.fixnav{position:fixed;top:26px;right:calc(var(--band) + 22px);z-index:110;display:flex;align-items:center;gap:14px}
.buy{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--br);border-radius:999px;
  background:var(--y);padding:9px 20px;font-family:var(--kaku);font-size:12px;letter-spacing:.12em;
  transition:background .3s,color .3s}
.buy::before,.buy::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--br)}
.buy:hover{background:var(--br);color:var(--y)}
.buy:hover::before,.buy:hover::after{background:var(--y)}
/* ログインは購入ボタンより一段控えめに */
.buy--login{background:none}
@media (max-width:640px){.buy--login{display:none}}
.burger{width:38px;height:38px;border-radius:50%;background:var(--br);position:relative;flex:none}
.burger i{position:absolute;left:11px;width:16px;height:1.4px;background:var(--y);transition:transform .35s,opacity .35s}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:21px}
.burger.on i:nth-child(1){transform:translateY(2.5px) rotate(20deg)}
.burger.on i:nth-child(2){transform:translateY(-2.5px) rotate(-20deg)}
.cartn{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:999px;background:var(--white);
  color:var(--br);font-size:10px;line-height:17px;text-align:center;font-family:var(--sans);font-weight:700;
  transform:scale(0);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.cartn.on{transform:scale(1)}

/* NEWS バー（右下固定） */
.newsbar{position:fixed;right:var(--band);bottom:48px;z-index:100;background:var(--br2);color:var(--cream);
  display:flex;align-items:stretch;max-width:min(310px,54vw);
  transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.newsbar.on{transform:none}
.newsbar__l{writing-mode:vertical-rl;font-family:var(--serif);font-size:9.5px;letter-spacing:.2em;
  padding:9px 5px;background:rgba(0,0,0,.14);display:grid;place-items:center}
.newsbar__f{width:46px;flex:none;overflow:hidden}
.newsbar__f img{width:100%;height:100%;object-fit:cover}
.newsbar__b{padding:8px 12px;font-size:10.5px;line-height:1.65}
.newsbar__b time{display:block;margin-top:3px;font-family:var(--serif);font-size:9.5px;opacity:.72}

/* ======================= 共通 ======================= */
.wrap{width:min(100% - (var(--band) + 30px) * 2, var(--maxw));margin-inline:auto}
.sec{position:relative;padding:clamp(80px,10vw,140px) 0}

/* セクション境界のジグザグ帯 */
.zig{height:34px;background:url("../images/band-h.svg") repeat-x left center / auto 100%}

/* ======================= ヒーロー ======================= */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.hero__in{position:relative;width:min(760px,86vw);text-align:center;padding:70px 0 40px}
.arc{width:100%;display:block;overflow:visible}
.arc text{font-family:var(--serif);font-size:44px;letter-spacing:.06em;fill:var(--br);font-weight:600}
.hero__oval{position:relative;width:min(84%,540px);aspect-ratio:1/.84;margin:-2% auto 1%;
  border:2px solid var(--br);border-radius:50%;padding:9px;
  animation:pop 1.5s cubic-bezier(.2,.8,.2,1) both}
.hero__oval::after{content:"";position:absolute;inset:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(105,49,17,.35)}
.hero__ph{position:absolute;inset:9px;border-radius:50%;overflow:hidden}
.hero__ph{display:grid;place-items:end center;padding:0 6% 0}
.hero__ph img{width:100%;height:104%;object-fit:contain;object-position:50% 100%;
  transform:translateX(5%);filter:drop-shadow(0 12px 18px rgba(105,49,17,.18))}
.hero__oval::before{content:"";position:absolute;inset:9px;border-radius:50%;background:color-mix(in srgb,var(--white) 42%,transparent);z-index:0}
.hero__oval .hero__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40%;height:auto;z-index:2;
  filter:drop-shadow(0 1px 7px rgba(255,250,235,.75));
  animation:pop 1.5s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1}}
.hero__oval .hero__logo{animation-name:popc}
@keyframes popc{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* ラスクの輪郭。外枠と写真のマスクは同じSVGパスで揃える。 */
.hero__oval--rusk{border:0;border-radius:0;padding:0}
.hero__oval--rusk::before,.hero__oval--rusk .hero__ph{
  inset:12px;border-radius:0;
  -webkit-mask:url("../images/hero-rusk-mask.svg") center/100% 100% no-repeat;
  mask:url("../images/hero-rusk-mask.svg") center/100% 100% no-repeat;
}
.hero__oval--rusk::after{inset:0;border-radius:0;box-shadow:none;
  background:url("../images/hero-rusk-frame.svg") center/100% 100% no-repeat;
  pointer-events:none;z-index:3}
.scroll{position:absolute;left:calc(var(--band) + 26px);bottom:52px;z-index:5;
  font-family:var(--serif);font-size:12px;letter-spacing:.16em}
.scroll span{display:inline-block;animation:sc 2s ease-in-out infinite}
@keyframes sc{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ======================= ドロップ演出 ======================= */
.drop{position:relative;height:340vh}
.drop__stick{position:sticky;top:0;height:100svh;display:grid;place-items:center}
.frame{position:relative;width:min(100% - (var(--band) + 34px) * 2,1220px);height:min(78svh,700px);
  border:1.6px solid var(--br);border-radius:2px}
.frame__c{position:absolute;width:64px;height:64px;border:0}
.frame__c svg{width:100%;height:100%;fill:none;stroke:var(--br);stroke-width:1.5}
.frame__c--tl{left:-13px;top:-13px}
.frame__c--tr{right:-13px;top:-13px;transform:scaleX(-1)}
.frame__c--bl{left:-13px;bottom:-13px;transform:scaleY(-1)}
.frame__c--br{right:-13px;bottom:-13px;transform:scale(-1)}
.dots{position:absolute;left:26px;top:50%;transform:translateY(-50%);display:grid;gap:7px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--br);opacity:.3;transition:opacity .4s}
.dots i.on{opacity:1}
.drop__txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(90%,640px);
  text-align:center;font-family:var(--kaku);font-size:clamp(17px,2.2vw,23px);line-height:2.1;letter-spacing:.08em;
  opacity:0;transition:opacity .7s}
.drop__txt.on{opacity:1}
/* 切り抜き画像をそのまま浮かせる（丸マスクはしない） */
.drop__cake{position:absolute;width:min(18%,165px);
  opacity:0;transition:opacity .6s,transform 1.1s cubic-bezier(.2,.8,.2,1);
  filter:drop-shadow(0 16px 22px rgba(105,49,17,.26))}
.drop__cake img{width:100%;height:auto;display:block}
.drop__cake.on{opacity:1}

/* ======================= 素材（ABOUT） ======================= */
.about__head{text-align:center;margin-bottom:clamp(24px,3.4vw,50px)}
.about__head img{width:clamp(60px,7vw,96px);height:auto;margin:0 auto 18px;opacity:.92}
.about__head p{font-family:var(--kaku,inherit);font-size:clamp(17px,2.3vw,24px);font-weight:500;
  letter-spacing:.1em;line-height:1.8;margin:0}
.about{position:relative;padding-bottom:clamp(60px,8vw,110px)}
.mat{position:relative;padding:clamp(44px,5.6vw,84px) 0}
.mat__head{display:flex;align-items:flex-end;gap:22px;margin-bottom:clamp(28px,4vw,54px)}
.mat__ill{width:clamp(64px,7.5vw,96px);height:auto;margin:0 0 16px;opacity:.9}
.mat__ills{display:flex;align-items:flex-end;gap:14px;margin:0 0 16px}
.mat__ills img{width:clamp(52px,6vw,78px);height:auto;opacity:.9}
.mat__en{font-family:var(--serif);font-size:clamp(44px,7.4vw,96px);line-height:.98;letter-spacing:.01em;font-weight:500}
.mat__en em{font-style:normal;display:inline-block;background:var(--white);color:var(--br);
  font-size:.36em;padding:.1em .5em;border-radius:2px;vertical-align:.5em;margin-right:.18em;font-family:var(--serif)}
.mat__ja{display:flex;gap:10px;padding-bottom:12px}
.mat__ja span{writing-mode:vertical-rl;font-family:var(--kaku);font-size:14px;letter-spacing:.22em;
  border-left:1px solid rgba(105,49,17,.4);padding-left:9px}
.mat__body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,62px);align-items:center}
.mat__fig{position:relative;overflow:hidden;aspect-ratio:4/3}
.mat__fig img{width:100%;height:100%;object-fit:cover}
.mat__t{font-family:var(--kaku);font-size:clamp(17px,2.1vw,23px);font-weight:500;line-height:1.85;
  letter-spacing:.06em;margin:0 0 16px;position:relative;padding-left:60px}
.mat__t::before{content:"";position:absolute;left:0;top:.85em;width:46px;height:1px;
  background:repeating-linear-gradient(90deg,var(--br) 0 3px,transparent 3px 7px)}
.mat__d{font-size:13.5px;line-height:2.2;margin:0;max-width:28em}
.mat__cut{position:absolute;width:clamp(90px,11vw,150px);pointer-events:none;
  border-radius:50%;overflow:hidden;opacity:.96;box-shadow:0 10px 24px rgba(105,49,17,.13)}
.mat__cut img{aspect-ratio:1;object-fit:cover}

/* ======================= 食べ方 ======================= */
.how{background:var(--cream);position:relative}
.ribbon{width:fit-content;margin:0 auto clamp(38px,5vw,62px);position:relative;
  border:1.4px solid var(--br);border-radius:999px;padding:13px 54px;
  font-family:var(--kaku);font-size:clamp(15px,1.9vw,19px);letter-spacing:.1em}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:50%;width:11px;height:11px;
  border:1.4px solid var(--br);background:var(--cream);transform:translateY(-50%) rotate(45deg)}
.ribbon::before{left:-6px}
.ribbon::after{right:-6px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,42px)}
.step{text-align:center}
.step__i{width:100%;max-width:132px;aspect-ratio:1;margin:0 auto 14px;display:grid;place-items:center}
.step__i svg{width:100%;height:100%;fill:none;stroke:var(--br);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step__i img{width:100%;height:100%;object-fit:contain}
.step__n{font-family:var(--serif);font-size:15px;letter-spacing:.05em}
.step__n b{font-family:var(--kaku);font-size:15px;font-weight:500;margin-left:4px;letter-spacing:.06em}
.step__d{font-size:12.5px;line-height:1.95;margin:9px 0 0}
.tag{display:inline-flex;align-items:center;gap:8px;margin-top:7px;font-size:11.5px}
.tag b{background:var(--br);color:var(--cream);font-weight:400;padding:2.5px 9px;font-size:11px;letter-spacing:.06em}

/* ======================= LINEUP ======================= */
.lineup__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(30px,4vw,52px);flex-wrap:wrap}
.bighead{display:flex;align-items:flex-end;gap:18px}
.bighead h2{font-family:var(--serif);font-size:clamp(40px,6vw,74px);line-height:.9;font-weight:500;letter-spacing:.01em}
.bighead p{font-family:var(--kaku);font-size:clamp(14px,1.7vw,19px);margin:0 0 6px;padding-bottom:5px;
  border-bottom:1px solid var(--br);letter-spacing:.1em}
.lineup__note{display:flex;align-items:center;gap:14px}
.lineup__note span{font-family:var(--kaku);font-size:13.5px;line-height:1.75;letter-spacing:.06em}
.crown{display:flex;gap:6px}
.crown i{width:36px;height:36px;border-radius:50%;border:1px solid var(--br);display:grid;place-items:center;
  font-family:var(--serif);font-size:9px;font-style:normal;line-height:1.15;text-align:center;letter-spacing:.02em}
.goods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px) clamp(16px,2.2vw,30px)}
.g{display:flex;flex-direction:column}
.g__f{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--y-d);cursor:pointer}
.g__f img{width:100%;height:100%;object-fit:contain;padding:7%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.g:hover .g__f img{transform:scale(1.05)}
.g__ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--y-d)}
.g__ph::before{content:"";position:absolute;inset:12px;border:1px solid rgba(105,49,17,.4)}
.g__ph b{position:relative;font-family:var(--kaku);font-size:15px;font-weight:500;letter-spacing:.08em;text-align:center;padding:0 14px}
.g__soon{position:absolute;top:10px;left:10px;z-index:2;background:var(--br);color:var(--y);
  font-size:10.5px;letter-spacing:.1em;padding:4px 10px;font-family:var(--kaku)}
.g__n{font-family:var(--kaku);font-size:14px;line-height:1.7;margin:13px 0 3px;letter-spacing:.04em;cursor:pointer}
.g__s{font-size:11.5px;line-height:1.7;margin:0 0 8px;opacity:.75}
.g__b{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.g__p{font-size:14px;letter-spacing:.02em}
.g__p b{font-family:var(--serif);font-size:19px;font-weight:500;margin:0 2px}
.g__a{border:1px solid var(--br);border-radius:999px;padding:7px 15px;font-family:var(--kaku);font-size:11px;
  letter-spacing:.08em;white-space:nowrap;transition:background .3s,color .3s}
.g__a:hover{background:var(--br);color:var(--y)}
.g__a[disabled]{opacity:.35;cursor:not-allowed}
.g__a[disabled]:hover{background:none;color:inherit}

/* ======================= ご検討中 ======================= */
.consider{position:relative;border:1.4px solid var(--br);padding:clamp(30px,4.4vw,56px);
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(22px,3.4vw,50px);margin-top:clamp(50px,7vw,96px)}

.consider__ill{width:clamp(58px,6.5vw,84px);height:auto;margin-bottom:14px;opacity:.9}
.consider h4{font-family:var(--kaku);font-size:clamp(18px,2.3vw,25px);letter-spacing:.08em;line-height:1.8}
.consider p{font-size:13.5px;line-height:2.15;margin:0 0 18px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.tags span{background:var(--br);color:var(--y);font-size:11.5px;padding:4px 12px;letter-spacing:.06em;font-family:var(--kaku)}
.pill{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;width:min(100%,380px);
  border:1px solid var(--br);border-radius:999px;padding:13px 24px;font-family:var(--kaku);font-size:13px;
  letter-spacing:.08em;transition:background .3s,color .3s}
.pill:hover{background:var(--br);color:var(--y)}

/* ======================= 情報（SHOP / GUIDE） ======================= */
.guide{background:var(--cream)}
.gcols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)}
.gcol h5{font-family:var(--serif);font-size:13px;letter-spacing:.2em;margin:0 0 14px;padding-bottom:11px;
  border-bottom:1px solid rgba(105,49,17,.3);font-weight:500}
.gcol dl{margin:0;font-size:13px;line-height:2}
.gcol dt{font-size:11.5px;letter-spacing:.08em;opacity:.72;margin-top:13px}
.gcol dt:first-child{margin-top:0}
.gcol dd{margin:1px 0 0}
.pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pay span{border:1px solid rgba(105,49,17,.4);padding:3px 9px;font-size:10.5px;font-family:var(--serif);letter-spacing:.06em}

/* ======================= 詩 ======================= */
.poem{background:var(--white);position:relative;overflow:hidden}
.poem__arc{height:clamp(70px,9vw,130px);background:var(--y);
  border-bottom-left-radius:50% 100%;border-bottom-right-radius:50% 100%}
.poem__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,50px);align-items:center;
  padding:clamp(40px,6vw,90px) 0 clamp(60px,8vw,110px)}
.poem p{font-family:var(--kaku);font-size:clamp(13.5px,1.6vw,16px);line-height:2.6;letter-spacing:.08em;margin:0}
.poem .last{margin-top:1.6em;font-size:clamp(17px,2.3vw,24px);letter-spacing:.14em}
.poem__f{overflow:hidden;aspect-ratio:3/4}
.poem__f img{width:100%;height:100%;object-fit:cover}

/* ======================= footer ======================= */
.ft{position:relative;background:var(--y);padding-bottom:26px}
.ft__arc{height:clamp(56px,7vw,104px);background:var(--white);
  border-bottom-left-radius:50% 100%;border-bottom-right-radius:50% 100%}
.ft__mid{position:relative;text-align:center;padding:clamp(26px,4vw,50px) 0 clamp(20px,3vw,34px)}
.ft__arcTxt{width:min(560px,80%);margin:0 auto -2%}
.ft__logo{width:min(320px,52%);margin:0 auto}
.ft__cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:clamp(16px,2.4vw,30px)}
.ft__cols ul{list-style:none;margin:0;padding:0;font-family:var(--kaku);font-size:12.5px;line-height:2.3}
.ft__co{font-size:11.5px;line-height:1.95;opacity:.8;text-align:right}
.ft__btm{margin-top:26px;text-align:center;font-family:var(--serif);font-size:10.5px;letter-spacing:.1em;opacity:.75}

/* ======================= デモ帯 ======================= */
.demo{position:fixed;left:0;right:0;bottom:0;z-index:130;background:var(--br);color:var(--y);
  font-family:var(--kaku);font-size:11.5px;letter-spacing:.04em;text-align:center;padding:7px 40px 7px 16px;line-height:1.7}
.demo button{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:16px;line-height:1;padding:5px}
body.nodemo .demo{display:none}
.demo-pc{display:inline}


/* ======================= カート ======================= */
.ov{position:fixed;inset:0;background:rgba(40,18,6,.52);z-index:200;opacity:0;pointer-events:none;transition:opacity .45s}
.ov.on{opacity:1;pointer-events:auto}
.dw{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--cream);z-index:201;
  transform:translateX(102%);transition:transform .5s cubic-bezier(.3,.9,.25,1);display:flex;flex-direction:column}
.dw.on{transform:none}
.dw__h{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid rgba(105,49,17,.25)}
.dw__h b{font-family:var(--serif);font-size:15px;letter-spacing:.2em;font-weight:500}
.dw__x{font-size:22px;line-height:1;padding:4px 6px}
.dw__b{flex:1;overflow-y:auto;padding:8px 22px}
.dw__e{text-align:center;padding:64px 8px;font-size:13px;line-height:2.1;opacity:.75}
.li{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid rgba(105,49,17,.18)}
.li__f{aspect-ratio:1;overflow:hidden;background:var(--y-d);position:relative}
.li__f img{width:100%;height:100%;object-fit:contain;padding:5%}
.li__f .g__ph b{font-size:9.5px;padding:0 5px;line-height:1.4}
.li__f .g__ph::before{inset:5px}
.li__n{font-family:var(--kaku);font-size:13px;line-height:1.65;margin:0}
.li__p{font-size:12px;margin:4px 0 0;opacity:.8}
.li__r{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.qty{display:flex;align-items:center;border:1px solid rgba(105,49,17,.4);border-radius:999px}
.qty button{width:27px;height:25px;font-size:14px;line-height:1}
.qty span{min-width:24px;text-align:center;font-size:12.5px}
.li__x{font-size:11px;text-decoration:underline;text-underline-offset:3px;opacity:.75}
.dw__f{border-top:1px solid rgba(105,49,17,.25);padding:18px 22px calc(18px + env(safe-area-inset-bottom))}
.ship{background:rgba(213,161,83,.42);padding:10px 13px;font-size:12px;line-height:1.85;margin-bottom:14px}
.ship b{font-weight:700}
.bar{display:block;height:3px;background:rgba(105,49,17,.16);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--br);width:0;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.sum{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;opacity:.85}
.sum--t{font-size:15px;opacity:1;padding-top:10px;border-top:1px solid rgba(105,49,17,.25);margin-bottom:16px}
.sum--t b{font-family:var(--serif);font-size:21px;font-weight:500}
.go{display:block;width:100%;text-align:center;background:var(--br);color:var(--y);padding:15px;border-radius:999px;
  font-family:var(--kaku);font-size:13px;letter-spacing:.14em}
.dw__note{margin:11px 0 0;font-size:11px;text-align:center;opacity:.7}

/* ======================= 商品モーダル ======================= */
.md{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .4s}
.md.on{opacity:1;pointer-events:auto}
.md__in{background:var(--cream);width:min(900px,100%);max-height:88svh;overflow-y:auto;position:relative;
  display:grid;grid-template-columns:1fr 1fr;transform:translateY(14px);transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.md.on .md__in{transform:none}
.md__x{position:absolute;top:10px;right:12px;z-index:3;font-size:23px;line-height:1;padding:5px 8px;
  background:rgba(241,223,193,.94);border-radius:999px}
.md__f{aspect-ratio:1;overflow:hidden;background:var(--y-d);position:relative}
.md__f img{width:100%;height:100%;object-fit:contain;padding:7%}
.md__b{padding:clamp(24px,3.4vw,42px)}
.md__c{font-family:var(--serif);font-size:11px;letter-spacing:.2em}
.md__n{font-family:var(--kaku);font-size:clamp(19px,2.4vw,25px);line-height:1.6;margin:10px 0 0;letter-spacing:.06em}
.md__p{margin:14px 0 0;font-size:14px}
.md__p b{font-family:var(--serif);font-size:26px;font-weight:500;margin:0 3px}
.md__d{font-size:13px;line-height:2.15;margin:18px 0 20px}
.md__v{background:rgba(213,161,83,.4);padding:16px 17px;margin-bottom:20px}
.md__v b{display:block;font-family:var(--kaku);font-size:12px;margin-bottom:7px;letter-spacing:.1em}
.md__v p{margin:0;font-size:12.5px;line-height:1.95}
.md__s{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:22px}
.md__s th,.md__s td{text-align:left;padding:9px 0;border-bottom:1px solid rgba(105,49,17,.2);vertical-align:top}
.md__s th{width:6.4em;font-weight:400;opacity:.72;font-size:11.5px}
.md__act{display:flex;gap:11px;align-items:center}
.md__act .pill{flex:1;width:auto;justify-content:center;gap:0}

/* ======================= reveal / toast ======================= */
.js .rev{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none;transition:none}}
.toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,12px);z-index:140;background:var(--br);color:var(--y);
  padding:12px 22px;border-radius:999px;font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
  max-width:86vw;text-align:center;font-family:var(--kaku)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ======================= responsive ======================= */
@media (max-width:900px){
  :root{--band:26px}
  .mat__body,.consider,.poem__in{grid-template-columns:1fr}
  .goods,.gcols{grid-template-columns:repeat(2,1fr)}
  .md__in{grid-template-columns:1fr}
  .newsbar{max-width:min(300px,66vw)}
  .arc text{font-size:42px}
}
@media (min-width:641px) and (max-height:820px){
  .hero__in{width:min(620px,78vw);padding:88px 0 20px;transform:translateY(42px)}
  .hero__oval{width:min(76%,430px)}
  .arc text{font-size:38px}
}
@media (max-width:640px){
  :root{--band:8px}
  body{font-size:14px}
  body:not(.nodemo){padding-bottom:54px}
  /* 参考サイト同様、スマホでは左右の飾り帯を出さない */
  .band{display:none}
  .fixnav{top:14px;right:12px;gap:9px}
  /* 購入ボタンは右下に独立させる */
  .demo-pc{display:none}
  .dots{left:10px}
  .demo{font-size:10.5px;padding:8px 36px 8px 12px;line-height:1.6}
  .fixnav .buy{position:fixed;right:12px;bottom:calc(56px + env(safe-area-inset-bottom));padding:10px 18px;font-size:11.5px;
    box-shadow:0 4px 14px rgba(105,49,17,.2)}
  .buy{padding:7px 13px;font-size:11px}
  .burger{width:34px;height:34px}
  .burger i{left:9px;width:15px}
  .drop{height:300vh}
  .frame{height:min(74svh,560px)}
  .steps{grid-template-columns:1fr;gap:34px}
  .goods{grid-template-columns:repeat(2,1fr);gap:24px 12px}
  .g__f{aspect-ratio:1}
  .g__f img{padding:8%}
  .g__n{font-size:13px;line-height:1.55;margin-top:10px;min-height:3.1em}
  .g__s{font-size:11px;line-height:1.55;min-height:3.1em;margin-bottom:7px}
  .g__p{font-size:12.5px}
  .g__p b{font-size:17px}
  .g__a{min-height:36px;padding:8px 8px;font-size:10.5px;letter-spacing:.04em}
  .gcols{grid-template-columns:1fr}
  .mat__head{flex-direction:column;align-items:flex-start;gap:10px}
  .mat__ja{padding-bottom:0}
  .newsbar,.newsbar.on{display:none!important}
  body.inShop .fixnav .buy{display:none}
  .scroll{left:calc(var(--band) + 12px);bottom:30px;font-size:11px}
  .g__b{flex-direction:column;align-items:flex-start;gap:9px}
  .g__a{width:100%;text-align:center}
  .arc text{font-size:58px}
  .hero__in{width:100%;padding:56px 0 30px}
  .hero__oval{width:min(96%,430px)}
  .ft__cols{flex-direction:column}
  .ft__co{text-align:left}
  .md{padding:12px}
  .md__in{max-height:calc(100svh - 24px)}
  .md__act{position:sticky;bottom:0;background:var(--cream);padding-top:12px;align-items:stretch}
  .md__act .qty{flex:none}
  .md__act .pill{min-height:44px}
  .dw{width:100vw}
  .dw__b{padding:6px 16px}
  .dw__f{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
}
@media (max-width:374px){
  .wrap{width:min(100% - 28px, var(--maxw))}
  .goods{grid-template-columns:1fr;gap:28px}
  .g__n,.g__s{min-height:0}
  .fixnav .buy{padding-inline:14px}
}

/* 食べる楽しみを添える小さなイラスト */
.story-ill{display:block;height:auto;object-fit:contain;pointer-events:none;user-select:none}
.about__head .story-ill--ingredients{width:clamp(174px,20vw,236px);margin:clamp(26px,4vw,52px) auto 10px;opacity:1}
.story-ill--bakery{width:clamp(156px,17vw,210px);margin:18px 0 0 auto}
.story-ill--teatime{width:clamp(190px,22vw,270px);margin:26px auto 0 0}
@media(max-width:900px){
  .story-ill--bakery{margin-right:8%;width:180px}
  .story-ill--teatime{margin-inline:auto}
}
@media(max-width:640px){
  .about__head .story-ill--ingredients{width:190px;margin-top:24px}
  .story-ill--bakery{width:156px;margin-top:8px;margin-right:0}
  .story-ill--teatime{width:210px;margin-top:20px}
}

/* ページのあちこちに、同じタッチのおいしいモチーフ */
.hero__doodles{position:absolute;left:50%;top:52%;transform:translateX(-50%);width:min(1140px,calc(100% - 150px));display:flex;justify-content:space-between;pointer-events:none}
.hero__doodles img{width:clamp(92px,11vw,148px);height:auto;object-fit:contain}
.hero__doodles img:first-child{transform:rotate(-8deg)}
.hero__doodles img:last-child{transform:rotate(8deg)}
.mat__ill{width:clamp(84px,9vw,116px);margin-bottom:6px;opacity:1}
.mat__ills{gap:10px;margin-bottom:6px}
.mat__ills img{width:clamp(66px,7vw,94px);opacity:1}
.step__i{max-width:168px;margin-bottom:16px}
.consider__ill{width:clamp(112px,12vw,154px);margin-bottom:18px;opacity:1}
.lineup__title{display:flex;align-items:center;gap:18px;min-width:0}
.lineup__ill{width:90px;height:auto;flex:none}
@media(max-width:900px){
  .hero__doodles{position:static;transform:none;width:72%;margin:-4px auto 54px;align-self:start}
  .hero__doodles img{width:94px}
  .hero__in{padding-bottom:6px;transform:none}
  .hero .scroll{bottom:18px}
  .consider__intro{display:flex;align-items:center;gap:24px}
  .consider__ill{margin:0;width:120px;flex:none}
}
@media(max-width:640px){
  .hero__doodles{position:static;transform:none;width:72%;margin:-4px auto 54px;align-self:start}
  .hero__doodles img{width:86px}
  .hero__in{padding-bottom:6px;transform:none}
  .hero .scroll{bottom:18px}
  .mat__ill{width:96px;margin-bottom:0}
  .mat__ills img{width:78px}
  .step__i{max-width:158px}
  .lineup__title{display:block}
  .lineup__ill{width:94px;margin:0 0 18px}
  .consider__intro{display:block}
  .consider__ill{width:130px;margin:0 0 18px}
}

/* 商品ラベルから転記した食品表示 */
.frame__c g{fill:var(--br)}
.food{margin:20px 0;font-size:12.5px;line-height:1.9}
.food summary{cursor:pointer;font-weight:700;padding:12px 0;border-top:1px solid currentColor}
.food .md__s{margin:8px 0 12px;table-layout:fixed}
.food td{overflow-wrap:anywhere}
.food__note{font-size:11.5px;margin:10px 0}
.food__warning{border:1px solid currentColor;padding:10px 12px;font-weight:700;font-size:12px;line-height:1.8}
.food__nutrients{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin:10px 0}
.food__nutrients dd{margin:0;text-align:right}
.md__b{min-width:0}

.md__toolbar{grid-column:1 / -1;position:sticky;top:0;height:0;z-index:4}
@media(min-width:901px){.md__f{position:sticky;top:0;align-self:start}}

/* 採用ラベル A：縦帯。りんご商品にのみ原稿を使用する。 */
:root{--label-red:#A52431;--label-gold:#BA8546}
.apple-visual{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(18px,2.2vw,34px);align-items:center;min-width:0}
.apple-visual__photo{border:1px solid var(--label-gold);padding:8px;background:var(--cream)}
.apple-visual__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.apple-visual__label{margin:0;min-width:0;text-align:center}
.label-preview{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.label-preview img{width:100%;height:auto;display:block;box-shadow:0 9px 18px rgba(81,43,24,.16);transition:transform .3s}
.label-preview:hover img{transform:translateY(-4px)}
.apple-visual figcaption{font-size:10.5px;line-height:1.8;letter-spacing:.02em;margin-top:13px}
.apple-visual figcaption button{display:block;margin:5px auto 0;padding:3px 0;border-bottom:1px solid currentColor;font-size:11px}
.label-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:8%;align-items:center;height:100%;padding:7%;background:var(--cream)}
.label-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--label-red);border-right:3px double var(--label-gold)}
.g__f .label-card .label-card__photo{width:100%;height:100%;padding:0;object-fit:contain}
.g__f .label-card .label-card__label{width:100%;height:auto;max-height:100%;padding:0;object-fit:contain;box-shadow:0 5px 9px rgba(81,43,24,.18)}
.md__f--gallery{aspect-ratio:auto;background:var(--cream);padding:20px;min-width:0}
.label-tabs{display:flex;justify-content:center;gap:6px;margin:0 0 16px}
.label-tabs button{font-family:var(--kaku);font-size:12px;padding:7px 16px;border:1px solid var(--br);border-radius:999px}
.label-tabs button[aria-pressed="true"]{background:var(--br);color:var(--white)}
.label-panel{display:grid;place-items:center;min-width:0;min-height:340px}
.label-panel[hidden]{display:none}
.md__f .label-panel img{height:auto;max-height:66svh;width:100%;object-fit:contain;padding:0}
.md__f .label-panel--label img{width:auto;max-width:100%;max-height:66svh;border:1px solid var(--label-gold)}
@media(max-width:900px){
 .apple-visual{max-width:580px;width:100%;margin:0 auto;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(16px,4vw,30px)}
 .apple-visual__label{max-width:190px;justify-self:center}
 .md__f--gallery{padding:48px 22px 22px}
 .label-panel{min-height:260px}
 .md__f .label-panel--label img{max-height:60svh}
}
@media(prefers-reduced-motion:reduce){.label-preview img{transition:none}}


/* 2026-09-25: coherent editorial rusk imagery. */
.hero__oval--rusk .hero__ph{padding:0;display:block}
.hero__oval--rusk .hero__ph img{width:100%;height:100%;object-fit:cover;object-position:center bottom;transform:none;filter:none}
.hero__oval--rusk .hero__logo{top:29%;width:29%;filter:none}
.drop__cake:nth-of-type(2) img{transform:rotate(18deg)}
#dc3 img{transform:rotate(-20deg)}
#dc4 img{transform:rotate(12deg)}
.g__f>img{padding:0;object-fit:cover}
.mat__fig{aspect-ratio:1/1;border-radius:3px}
.apple-visual__photo img{aspect-ratio:1/1;object-fit:contain}
.image-note{font-size:11px;line-height:1.9;letter-spacing:.02em;margin:0 0 26px;color:var(--br)}
.product-media{min-width:0;background:var(--cream)}
.product-media>.md__f{height:auto;aspect-ratio:1/1}
.product-media>.md__f--gallery{aspect-ratio:auto}
.product-media>.md__f>img{padding:0;object-fit:contain}
.image-note--detail{margin:0;padding:12px 22px 20px}
@media(max-width:900px){
 .product-media>.md__f{max-height:none;aspect-ratio:1/1}
 .product-media>.md__f--gallery{aspect-ratio:auto}
}

/* 2026-09-30 蜂蜜バター・牛乳ラスクのラベル追加（原稿の帯色） */
:root{--label-honey:#F7AF00;--label-milk:#5F9FD6}
.label-card--honey::before{background:var(--label-honey)}
.label-card--milk::before{background:var(--label-milk)}
.apple-visual--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.duo-labels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);min-width:0}
@media(max-width:900px){
 .apple-visual--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .apple-visual--duo .apple-visual__label{max-width:150px}
}
@media(max-width:480px){
 .apple-visual--duo{grid-template-columns:1fr}
 .apple-visual--duo .duo-labels{max-width:300px;width:100%;margin:0 auto}
}

/* TOMATO：佐藤農園（2026-10-05）— トップは切り抜き＋吹き出し、動画は商品ポップアップ */
.sato-voice{position:relative;margin:0;justify-self:center;width:min(100%,380px);padding-top:84px}
.sato-voice img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 18px rgba(81,43,24,.18))}
.sato-voice__bubble{position:absolute;top:0;left:-4%;z-index:2;margin:0;max-width:72%;
  background:var(--white);border:1.5px solid var(--br);border-radius:26px;padding:14px 22px;
  font-family:var(--kaku);font-weight:700;font-size:clamp(16px,1.7vw,19px);line-height:1.55;letter-spacing:.06em;color:var(--br);
  box-shadow:0 6px 0 rgba(81,43,24,.12)}
.sato-voice__bubble p{margin:0}
.sato-voice__bubble::after{content:"";position:absolute;right:22%;bottom:-11px;width:18px;height:18px;background:var(--white);
  border-right:1.5px solid var(--br);border-bottom:1.5px solid var(--br);transform:rotate(35deg) skewX(-8deg)}
.sato-voice figcaption{margin-top:10px;font-size:12px;letter-spacing:.08em;text-align:center}
.tomato-play{margin-top:22px;cursor:pointer;font-family:var(--kaku)}
.movie-card{position:relative;width:100%;height:100%;overflow:hidden}
.movie-card img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.movie-card__play{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;
  background:var(--br);color:var(--white);font-size:11px;letter-spacing:.08em;padding:5px 12px;border-radius:999px}
.product-media>.md__f--video,.md__f--video{aspect-ratio:auto;display:flex;justify-content:center;align-items:center;padding:20px;background:var(--cream);overflow:visible}
.md__f--video video{display:block;height:min(72svh,640px);width:auto;max-width:100%;aspect-ratio:9/16;background:var(--br);border-radius:10px}
@media(max-width:900px){.md__f--video{padding:44px 16px 8px}.md__f--video video{height:min(62svh,560px)}}
.price-tbd{font-size:12px;letter-spacing:.06em}

/* 商品ラベル（シール）を商品画像として出す（2026-10-07 五平餅・焼肉・ミルク） */
.g__f>img.is-lbl{object-fit:contain;padding:5% 0;filter:drop-shadow(0 5px 8px rgba(81,43,24,.2))}
.g__f>img.is-lbl--r{padding:6%}
.md__f img.is-lbl{object-fit:contain;padding:5%;filter:drop-shadow(0 6px 10px rgba(81,43,24,.18))}
.li__f img.is-lbl{object-fit:contain;padding:4%}
.g__soon+img.is-lbl{object-position:70% 50%}

/* 生産者インタビュー（りんご・はちみつ・牛乳 2026-10-09）／もったいないラスク横長ラベル */
.label-card{position:relative}
.iv-badge{position:absolute;left:10px;bottom:10px;white-space:nowrap;z-index:2;cursor:pointer;
  background:var(--br);color:var(--white);font-family:var(--kaku);font-size:11px;letter-spacing:.08em;padding:5px 12px;border-radius:999px;border:0}
.md__f .label-panel--movie video{display:block;height:min(66svh,620px);width:auto;max-width:100%;aspect-ratio:9/16;background:var(--br);border-radius:10px}
@media(max-width:900px){.md__f .label-panel--movie video{height:min(60svh,540px)}}
.g__f>img.is-lbl--h{padding:8% 4%}
@media(max-width:600px){.iv-badge{left:6px;bottom:6px;font-size:10px;padding:4px 9px;letter-spacing:.04em}.iv-badge__pre{display:none}}

/* ===== 商品写真：背景はそのまま、商品（袋とラスク）だけがゆっくり浮く（2026-10-16） ===== */
@keyframes rt-float{0%{translate:0 0}100%{translate:0 -3.2%}}
@keyframes rt-sheen{0%,70%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
.rt-float{position:relative;display:block;width:100%;height:100%}
.rt-float>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.label-card__photo.rt-float>img{padding:0}
.g__f>.rt-float>img,.md__f>.rt-float>img{padding:0;object-fit:cover}
.rt-float>.rt-fg{animation:rt-float 6s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:translate}
.li__f .rt-float>.rt-fg{animation:none}
#goods .g:nth-child(3n+2) .rt-fg{animation-delay:-2s}
#goods .g:nth-child(3n+3) .rt-fg{animation-delay:-4s}
#goods .g__f::after{content:"";position:absolute;inset:-10% auto -10% 0;width:38%;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(255,248,230,0) 0%,rgba(255,248,230,.4) 50%,rgba(255,248,230,0) 100%);
  mix-blend-mode:soft-light;transform:translateX(-140%) skewX(-18deg);animation:rt-sheen 12s cubic-bezier(.45,.05,.25,1) infinite}
#goods .g:nth-child(3n+2) .g__f::after{animation-delay:-4s}
#goods .g:nth-child(3n+3) .g__f::after{animation-delay:-8s}
@media (prefers-reduced-motion:reduce){.rt-float>.rt-fg,#goods .g__f::after{animation:none}}

/* 五平餅・飯田焼肉・もったいないにもラベルを横に並べる（2026-10-16） */
.label-card--gohei::before{background:#3f7a4c}
.label-card--yakiniku::before{background:#2a2420}
.label-card--outlet::before{background:#4e9a3e}
.label-card--outlet{display:block;padding:0}
.label-card--outlet .label-card__photo.rt-float{position:absolute;inset:0}
.label-card--outlet .label-card__photo.rt-float>img{object-fit:cover}
.g__f .label-card--outlet .label-card__label{position:absolute;left:7%;top:9%;width:34%;height:auto;rotate:-4deg;z-index:2;
  box-shadow:0 6px 14px rgba(81,43,24,.25);border-radius:3px}

/* スマホ（2列）：ラベル横並びだと写真が小さすぎるので、写真をカードいっぱいに出してラベルは左上の札にする（2026-10-16） */
@media(max-width:640px){
  .g__f .label-card{display:block;padding:0}
  .g__f .label-card .label-card__photo{position:absolute;inset:0;width:100%;height:100%}
  .g__f .label-card .label-card__photo.rt-float>img,.g__f .label-card img.label-card__photo{object-fit:cover}
  .g__f .label-card .label-card__label{position:absolute;left:5%;top:4%;width:15.5%;height:auto;max-height:none;rotate:-3deg;z-index:2;box-shadow:0 4px 10px rgba(81,43,24,.28);border-radius:2px}
  .g__f .label-card--outlet .label-card__label{width:36%;left:5%;top:5%}
  /* ラスク（写真の下半分）にラベルを重ねない：札は上半分、準備中は右上へ */
  .g__f .g__soon{z-index:3}
  .g__f:has(.label-card) .g__soon{left:auto;right:8px;top:8px}
}

/* ===== カスタマージャーニー検証の修正（2026-10-16） ===== */
/* スマホ：文字とボタンを読みやすく・押しやすく */
@media(max-width:640px){
  .g__a{font-size:12px;min-height:42px}
  .demo{font-size:11.5px}
  .demo button{min-width:40px;min-height:40px;right:2px}
  .iv-badge{font-size:11.5px;padding:6px 11px;min-height:32px}
  /* ラスク（左下）を隠さないよう、インタビューのボタンは右下へ */
  .g__f .iv-badge{left:auto;right:6px;bottom:6px;font-size:0;padding:0;width:38px;height:38px;min-height:38px;border-radius:50%;display:grid;place-items:center;letter-spacing:0}
  .g__f .iv-badge::before{content:"\25B6";font-size:13px;margin-left:2px}
  .dw__x,#mdX{min-width:44px;min-height:44px}
}
/* ヒーロー：最初の画面で何の店か日本語で伝える */
.hero__ja{margin:10px auto 0;font-family:var(--kaku);font-size:clamp(14px,1.6vw,17px);letter-spacing:.14em;color:var(--br)}
/* カートに入れた通知（スマホ） */
.add-note{position:fixed;left:50%;bottom:calc(58px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);transform:translate(-50%,20px);z-index:140;opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;background:var(--br);color:var(--white);border-radius:999px;padding:8px 8px 8px 18px;font-family:var(--kaku);font-size:13px;
  box-shadow:0 8px 24px rgba(40,20,8,.3);transition:opacity .25s,transform .25s;white-space:nowrap}
.add-note span{overflow:hidden;text-overflow:ellipsis}
body.nodemo .add-note{bottom:calc(18px + env(safe-area-inset-bottom))}
.add-note.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.add-note button{background:var(--y);color:var(--br);border-radius:999px;padding:9px 14px;font-size:12.5px;min-height:38px}
/* 商品詳細：写真（正方形）を切らずに全部見せる（2026-10-16） */
.md__f .rt-float{width:min(100%,66svh);height:auto;aspect-ratio:1;margin:0 auto}
.md__f .label-panel .rt-float>img,.md__f .rt-float>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:0;object-fit:contain}

/* 生産者の切り抜き 2026-10-16 */
.growers{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,28px);align-items:flex-end;margin-top:26px}
.grower{margin:0;flex:0 0 auto;text-align:center}
.grower img{display:block;height:clamp(170px,19vw,230px);width:auto;margin:0 auto;
  -webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent);
  filter:drop-shadow(0 10px 14px rgba(81,43,24,.16))}
.grower figcaption{margin-top:8px;padding-top:7px;border-top:1px solid var(--label-gold);font-size:11px;letter-spacing:.06em;line-height:1.6}
.grower figcaption b{display:block;font-size:13px;font-weight:600;letter-spacing:.08em}
@media (max-width:760px){.growers{justify-content:center}}

/* 全体バランス調整 2026-10-16 */
.sato-voice{width:min(100%,330px);padding-top:92px}
.sato-voice img{-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent);filter:drop-shadow(0 10px 14px rgba(81,43,24,.16))}
.sato-voice figcaption{margin-top:8px;padding-top:7px;border-top:1px solid var(--label-gold);font-size:11px;letter-spacing:.06em;line-height:1.6}
.sato-voice figcaption b{display:block;font-size:13px;font-weight:600;letter-spacing:.08em}
.g__f:has(>img.is-lbl){background:var(--cream)}
@media (max-width:760px){
  .sato-voice{width:min(78%,280px)}
  .pill{letter-spacing:.08em;white-space:nowrap}
}

/* ブラッシュアップ 2026-10-16：生産者はアーチ窓・商品名を少し立てる */
.grower img,.sato-voice img{
  -webkit-mask-image:none;mask-image:none;filter:none;
  width:auto;height:clamp(200px,21vw,250px);aspect-ratio:.78;object-fit:cover;object-position:50% 0;
  background:var(--cream);border:1px solid var(--label-gold);border-radius:999px 999px 10px 10px;
  box-shadow:0 10px 18px rgba(81,43,24,.14)}
.sato-voice img{width:100%;height:auto;aspect-ratio:.72;object-position:50% 8%}
.grower figcaption,.sato-voice figcaption{border-top:0;padding-top:0;margin-top:10px}
.g__n{font-size:15px;font-weight:500}
@media (max-width:760px){
  .grower img{height:clamp(180px,46vw,200px)}
  .g__n{font-size:13.5px}
}

/* Final usability polish — 2026-10-22 */
.skip-link{position:fixed;top:8px;left:50%;transform:translate(-50%,-160%);z-index:10000;background:var(--cream);border:2px solid var(--br);border-radius:999px;padding:10px 20px;font-size:14px}
.skip-link:focus{transform:translate(-50%,0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--br);outline-offset:4px}
body.dialog-open{overflow:hidden}
.dw:not(.on),.md:not(.on){visibility:hidden}
.dw__b,.md__in{overscroll-behavior:contain}
.dw__x,.md__x{min-width:44px;min-height:44px}
.qty button{width:44px;height:44px;flex:none}
.qty span{min-width:28px}
.li__x{min-height:44px;padding:8px 0 8px 12px;font-size:12px}
.g__detail{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-height:44px;padding:5px 0;text-align:left;font:inherit;line-height:1.65;letter-spacing:inherit}
.g__detail-icon{font-size:16px;opacity:.7;flex:none}
.g__detail:hover{text-decoration:underline;text-underline-offset:4px}
.g__amount{font-size:12px;margin:5px 0 0;line-height:1.8;letter-spacing:.05em}
.g__f{cursor:pointer}
.g__a,.add-note button{min-height:44px}
.add-note{white-space:normal;width:max-content;gap:8px}
.add-note span{min-width:0;line-height:1.5}
.add-note button{flex:none}
.md__toolbar{position:sticky;top:0;z-index:5;height:0;grid-column:1/-1}
.md__act{flex-wrap:wrap}
.md__act .pill{min-width:150px;min-height:44px}
@media(max-width:640px){
 .g__f .iv-badge{width:44px;height:44px;min-height:44px}
 .demo button{min-width:44px;min-height:44px}
 .g__n{margin-top:10px}
 .g__detail{align-items:flex-start}
 .g__detail-icon{padding-top:2px}
 .add-note{font-size:12px;padding-left:14px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero__oval,.js .rev{opacity:1;transform:none}
}

.add-note:not(.on){visibility:hidden}

.g__detail{display:block}