/* クーポンは、果実がのぞく持ち帰り用のチケット。 */
.button.coupon-ticket{
  --ticket-stub:48px;--ticket-notch:6px;--ticket-paper:#173f2c;--ticket-pop:-14px;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:flex-start;
  min-height:52px;gap:0;padding:0 calc(var(--ticket-stub) + 20px) 0 24px;
  border:0;border-radius:10px;background:transparent;color:#fff8e9;overflow:visible;
  font-weight:800;line-height:1.4;white-space:nowrap;letter-spacing:.02em;
  transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.ticket-paper{
  position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:10px;
  background:radial-gradient(circle at 0 50%,transparent var(--ticket-notch),var(--ticket-paper) calc(var(--ticket-notch) + .75px)) left/51% 100% no-repeat,
    radial-gradient(circle at 100% 50%,transparent var(--ticket-notch),var(--ticket-paper) calc(var(--ticket-notch) + .75px)) right/51% 100% no-repeat;
  filter:drop-shadow(0 4px 0 #0c2a1b);transition:filter .24s;
}
.ticket-label{position:relative;display:block;z-index:1;text-align:left}
.ticket-label>small{display:block;font:700 8px/1.4 var(--english-font);letter-spacing:.16em;margin-bottom:7px;color:#f3df74}
.ticket-stub{
  position:absolute;right:0;top:0;bottom:0;width:var(--ticket-stub);display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#173f2c;border-left:1px dashed #173f2c66;border-radius:0 10px 10px 0;
  background:radial-gradient(circle at 100% 50%,transparent var(--ticket-notch),#f3df74 calc(var(--ticket-notch) + .75px));
  transform-origin:left center;transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.ticket-arrow{display:block;width:26px;height:26px;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.ticket-stub>small{font:800 17px/.8 var(--english-font);letter-spacing:-.08em;margin-top:7px}
.ticket-fruits{position:absolute;z-index:-2;left:22px;top:-9px;height:35px;width:calc(100% - var(--ticket-stub) - 44px);pointer-events:none}
.ticket-fruit{position:absolute;width:31px;height:35px;overflow:visible;transform:translateY(3px) rotate(var(--fruit-lean,0deg));transition:transform .38s cubic-bezier(.2,.8,.22,1.25)}
.ticket-berry{left:0;--fruit-lean:-17deg}.ticket-kiwi{left:30px;--fruit-lean:15deg;transition-delay:35ms}
.button.coupon-ticket:hover{background:transparent;color:#fff8e9}
.button.coupon-ticket:focus-visible{outline:3px solid #c65a67;outline-offset:8px}
.coupon-ticket:is(:hover,:focus-visible) .ticket-fruit{transform:translateY(var(--ticket-pop)) rotate(calc(var(--fruit-lean) - 8deg))}
.coupon-ticket:is(:hover,:focus-visible) .ticket-arrow{transform:translate(2px,-2px) rotate(8deg)}
.coupon-ticket:is(:hover,:focus-visible) .ticket-stub{transform:rotate(3deg)}
.button.coupon-ticket:active{transform:translateY(3px)}
.coupon-ticket:active .ticket-paper{filter:drop-shadow(0 1px 0 #0c2a1b)}

.button.header-coupon.coupon-ticket{--ticket-stub:39px;min-height:43px;padding:0 54px 0 21px;font-size:11px;flex-shrink:0}
.header-coupon .ticket-fruits{top:-7px;left:21px;height:27px}
.header-coupon .ticket-fruit{width:25px;height:28px}.header-coupon .ticket-kiwi{left:25px}
.header-coupon .ticket-arrow{width:23px;height:23px}
.mobile-menu .menu-coupon{margin-top:34px;justify-content:flex-start;min-height:58px;font-size:14px;--ticket-stub:58px}

.button.finale-coupon.coupon-ticket{
  --ticket-stub:68px;--ticket-notch:9px;--ticket-pop:-20px;
  min-width:332px;min-height:88px;padding:16px 94px 16px 30px;font-size:17px;
  transform:rotate(-2deg);margin-top:12px;
}
.finale-coupon .ticket-paper{filter:drop-shadow(0 6px 0 #0c2a1b)}
.finale-coupon .ticket-fruits{left:28px;top:-18px;width:210px;height:48px}
.finale-coupon .ticket-fruit{width:44px;height:48px}
.finale-coupon .ticket-mango{left:47px;--fruit-lean:10deg;transition-delay:30ms}
.finale-coupon .ticket-kiwi{left:89px;--fruit-lean:-8deg;transition-delay:60ms}
.finale-coupon .ticket-banana{left:132px;--fruit-lean:12deg;transition-delay:90ms;width:51px}
.finale-coupon .ticket-arrow{width:32px;height:32px}
.button.finale-coupon.coupon-ticket:is(:hover,:focus-visible){transform:translateY(-4px) rotate(0deg)}
.button.finale-coupon.coupon-ticket:active{transform:translateY(3px) rotate(0deg)}

@media(max-width:760px){
  .button.header-coupon.coupon-ticket{--ticket-stub:29px;--ticket-notch:4px;min-height:40px;padding:0 38px 0 12px;font-size:9px;letter-spacing:0}
  .header-coupon .ticket-fruits{top:-5px;left:13px}.header-coupon .ticket-fruit{width:20px;height:23px}.header-coupon .ticket-kiwi{left:20px}
  .header-coupon .ticket-arrow{width:20px;height:20px}
  .button.finale-coupon.coupon-ticket{width:min(100%,330px);min-width:0;min-height:82px;--ticket-stub:61px;padding:15px 81px 15px 25px;font-size:16px;margin-top:17px}
  .finale-coupon .ticket-label>small{font-size:7px;letter-spacing:.13em}
  .finale-coupon .ticket-fruits{left:24px}
}
@media(hover:none){
  .coupon-ticket .ticket-fruit{transform:translateY(-3px) rotate(var(--fruit-lean,0deg))}
}
@media(prefers-reduced-motion:reduce){
  .button.coupon-ticket,.ticket-paper,.ticket-stub,.ticket-arrow,.ticket-fruit{transition:none}
  .coupon-ticket:is(:hover,:focus-visible) .ticket-fruit{transform:rotate(var(--fruit-lean,0deg))}
  .coupon-ticket:is(:hover,:focus-visible) .ticket-arrow,.coupon-ticket:is(:hover,:focus-visible) .ticket-stub{transform:none}
}