/* 軽い紙のチケット。初回案内はスマホでは下から現れる。 */
html.coupon-modal-open{overflow:hidden;overscroll-behavior:none}
#coupon-dialog{
  width:min(460px,calc(100% - 32px));max-height:calc(100svh - 32px);
  margin:auto;padding:0 24px 20px;border:1px solid #173f2c;border-radius:26px;
  background:#f8f3e7;color:#173f2c;text-align:center;overflow:auto;
  overscroll-behavior:contain;box-shadow:0 16px 0 -10px #173f2c,0 24px 70px #09261940;
}
#coupon-dialog::backdrop{background:#09261970;backdrop-filter:none}
#coupon-dialog[open]{animation:coupon-sheet-arrive .32s cubic-bezier(.2,.8,.2,1) both}
.coupon-sheet-top{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:14px;background:#f8f3e7;padding:15px 0 9px;
}
#coupon-dialog .dialog-brand-logo{width:156px;max-width:60%;height:auto;margin:0;filter:none}
#coupon-dialog .coupon-sheet-close{
  display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:10px;
  border:1.5px solid #173f2c;border-radius:50%;background:#f3e580;box-shadow:2px 2px 0 #173f2c;
  transition:transform .18s;
}
.coupon-sheet-close svg{width:20px;height:20px}
.coupon-sheet-close:hover{transform:rotate(8deg)}
.coupon-sheet-close:active{transform:translateY(2px)}
#coupon-dialog h2{margin:4px 0 18px;font:800 20px/1.5 var(--body-font);letter-spacing:.01em}
.coupon-offer{
  position:relative;isolation:isolate;padding:18px 16px 10px;overflow:hidden;
  border-radius:14px;background:#f4bac5;
  background:radial-gradient(circle at 0 75%,#f8f3e7 9px,transparent 9.5px),radial-gradient(circle at 100% 75%,#f8f3e7 9px,transparent 9.5px),linear-gradient(#f4bac5 75%,#f3e580 75%);
}
.coupon-offer-kicker{font:800 10px/1.3 var(--english-font);letter-spacing:.16em}
.coupon-offer-title{display:block;margin:6px 0 0;font-size:15px;font-weight:800;letter-spacing:.04em}
.coupon-offer-amount{display:flex;align-items:center;justify-content:center;gap:7px;height:103px;margin:-5px 0 5px}
.coupon-offer-amount strong{font:800 110px/1 var(--english-font);letter-spacing:-.05em;text-shadow:2px 3px 0 #fff8e9}
.coupon-offer-amount span{display:flex;flex-direction:column;text-align:left;font:800 38px/.86 var(--english-font);letter-spacing:-.04em}
.coupon-offer-amount span small{font:800 22px/1.3 var(--english-font);letter-spacing:.03em;margin-top:4px}
.coupon-fruit-line{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-top:1px dashed #173f2c80;padding-top:7px}
.coupon-fruit-line svg{width:31px;height:33px;flex:none;transform:rotate(-9deg)}
.coupon-fruit-line svg:nth-child(even){transform:rotate(8deg)}
.coupon-fruit-line span{font:800 9px/1.2 var(--english-font);letter-spacing:.06em;margin-left:2px;text-align:left}
#coupon-dialog .coupon-demo-note{font-size:12px;line-height:1.75;margin:13px 0 15px;text-align:center}
.coupon-keep{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;
  padding:12px 15px;background:#173f2c;color:#fff8e9;border-radius:13px;
  font-size:15px;font-weight:800;box-shadow:0 4px 0 #aacb70;transition:transform .18s;
}
.coupon-keep svg{width:22px;height:22px;flex:none}
.coupon-keep:not(:disabled):hover{transform:translateY(-2px)}
.coupon-keep:not(:disabled):active{transform:translateY(2px)}
.coupon-keep:disabled{background:#dfe9cf;color:#173f2c;box-shadow:none}
.coupon-keep .coupon-kept-mark{display:none}
#coupon-dialog[data-kept="true"] .coupon-keep .coupon-keep-mark{display:none}
#coupon-dialog[data-kept="true"] .coupon-keep .coupon-kept-mark{display:block}
#coupon-dialog .coupon-status{font-size:11px;line-height:1.6;min-height:18px;margin:11px 0 0}
#coupon-dialog .coupon-browse{
  min-height:44px;padding:10px 18px;margin:0;background:transparent;font-size:13px;
  font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
#coupon-dialog button:focus-visible{outline:3px solid #bf593a;outline-offset:4px}
@keyframes coupon-sheet-arrive{from{opacity:0;transform:translateY(22px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(max-width:600px){
  #coupon-dialog{
    inset:auto 0 0;width:100%;max-width:480px;max-height:calc(100svh - 32px);
    margin:0 auto;padding:0 22px calc(8px + env(safe-area-inset-bottom));
    border-bottom:0;border-radius:25px 25px 0 0;box-shadow:0 -12px 40px #09261926;
  }
  #coupon-dialog[open]{animation-name:coupon-sheet-rise}
  .coupon-sheet-top{padding-top:11px;padding-bottom:7px}
  #coupon-dialog h2{font-size:18px;margin-top:3px;margin-bottom:13px}
  .coupon-offer{padding-top:14px}
  .coupon-offer-amount{height:92px;margin-top:-3px}
  .coupon-offer-amount strong{font-size:99px}
  #coupon-dialog .coupon-demo-note{font-size:11px;margin:11px 0 12px}
  .coupon-fruit-line{height:42px}
  .coupon-fruit-line svg{width:29px;height:30px}
  .coupon-keep{min-height:48px;font-size:14px}
  #coupon-dialog .coupon-status{margin-top:8px;font-size:10px}
}
@keyframes coupon-sheet-rise{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:590px){
  #coupon-dialog{max-height:calc(100svh - 16px)}
  #coupon-dialog h2{margin-bottom:8px}
  .coupon-offer{padding-top:10px}
  .coupon-offer-amount{height:75px}
  .coupon-offer-amount strong{font-size:85px}
}
@media(prefers-reduced-motion:reduce){
  #coupon-dialog[open]{animation:none}
  #coupon-dialog button{transition:none}
  #coupon-dialog button:hover,#coupon-dialog button:active{transform:none}
}