/* フルーツクラブのステッカーシート。ロゴと四つの味に、別々の居場所をつくる。 */
.fruit-club-footer {
  position: relative;
  isolation: isolate;
  padding: 38px var(--space) 28px;
  background: #173f2c;
  color: #f8f3e7;
  overflow: clip;
}
.fruit-club-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: linear-gradient(90deg, #ef89a1 25%, #f7b247 25% 50%, #79c67f 50% 75%, #f6df73 75%);
}
.footer-club-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-club-topline > span:first-child { font: 700 11px/1.4 var(--english-font); letter-spacing: .1em; }
.footer-club-topline p { font-size: 13px; letter-spacing: .05em; }
.footer-color-dots { display: flex; gap: 6px; }
.footer-color-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ef89a1; }
.footer-color-dots i:nth-child(2) { background: #f7b247; }
.footer-color-dots i:nth-child(3) { background: #79c67f; }
.footer-color-dots i:nth-child(4) { background: #f6df73; }
.footer-sticker-sheet { position: relative; height: clamp(500px, 43vw, 650px); margin: 32px auto 26px; max-width: 1580px; }
.footer-brand-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 24px 3.5% 22px;
  background: #f8f3e7;
  color: #173f2c;
  border-radius: 2px;
  box-shadow: 0 9px 0 #ed87a0, 0 18px 0 #0d2d20;
  transform: translateY(-50%) rotate(-3deg);
}
.footer-brand-label::before, .footer-brand-label::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  background: radial-gradient(circle at center, #173f2c 0 4px, transparent 4.5px) center 4px / 10px 18px repeat-y;
}
.footer-brand-label::before { left: -4.5px; }
.footer-brand-label::after { right: -4.5px; }
.footer-label-caption { display: block; text-align: center; font: 700 10px/1.3 var(--english-font); letter-spacing: .16em; }
.fruit-club-footer .footer-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .14em;
  padding: 5px 0 13px;
  font: 800 clamp(76px, 11.35vw, 184px)/1.08 var(--english-font);
  font-variation-settings: 'wdth' 95, 'opsz' 96;
  letter-spacing: -.025em;
  white-space: nowrap;
  transition: transform .3s ease;
}
.fruit-club-footer .footer-wordmark > span { display: block; margin: 0; font: inherit; }
.footer-label-rule { display: flex; height: 5px; margin: 0 5%; }
.footer-label-rule i { flex: 1; background: #ef89a1; }
.footer-label-rule i:nth-child(2) { background: #f7b247; }
.footer-label-rule i:nth-child(3) { background: #79c67f; }
.footer-label-rule i:nth-child(4) { background: #f6df73; }
.footer-fruit-sticker {
  --sticker-turn: -12deg;
  --sticker-color: #ef89a1;
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  color: #173f2c;
  background: var(--sticker-color);
  border: 7px solid #f8f3e7;
  box-shadow: 1px 6px 0 #0d2d20, 0 10px 18px #072d2430;
  padding: 12px 24px 16px;
  transform: rotate(var(--sticker-turn));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  font: 800 20px/1.1 var(--english-font);
}
.footer-fruit-sticker img { width: 105px; height: 105px; object-fit: contain; filter: url(#studio-cutout); pointer-events: none; }
.footer-fruit-sticker > span:not(.footer-sticker-serial):not(.footer-sticker-go) { position: relative; margin-top: 2px; letter-spacing: -.025em; }
.footer-fruit-sticker .footer-sticker-serial { position: absolute; top: 21px; left: 21px; font-size: 10px; font-weight: 700; }
.footer-fruit-sticker .footer-sticker-go { position: absolute; right: 18px; top: 18px; font: 18px/1 Arial, sans-serif; }
.footer-sticker-berry { top: 0; left: 5%; width: 190px; height: 190px; border-radius: 50%; }
.footer-sticker-mango { --sticker-turn: 9deg; --sticker-color: #f7b247; top: 1%; right: 11%; width: 205px; height: 172px; border-radius: 7px 7px 36px 7px; }
.footer-sticker-mango img { width: 99px; height: 99px; transform: rotate(-8deg); }
.footer-sticker-kiwi { --sticker-turn: -7deg; --sticker-color: #79c67f; bottom: 0; left: 18%; width: 205px; height: 160px; border-radius: 48%; }
.footer-sticker-kiwi img { width: 92px; height: 92px; }
.footer-sticker-banana { --sticker-turn: 10deg; --sticker-color: #f6df73; bottom: 4%; right: 3%; width: 244px; height: 148px; border-radius: 80px; }
.footer-sticker-banana img { width: 120px; height: 88px; filter: none; transform: rotate(-17deg); }
.footer-sticker-banana .footer-sticker-serial { top: 29px; left: 26px; }
.footer-sticker-banana .footer-sticker-go { top: 27px; right: 27px; }
.footer-sticker-note { position: absolute; left: 49%; bottom: 9%; font-size: 11px; letter-spacing: .03em; transform: rotate(-5deg); }
.footer-sticker-note span { display: inline-block; font: 25px/1 var(--accent-font); margin-left: 6px; transform: rotate(-10deg); }
.fruit-club-footer .footer-bottom { border-top: 1px solid #fff8e936; padding-top: 24px; margin-top: 0; gap: 24px; }
.fruit-club-footer .footer-bottom > span { font: 800 16px/1.4 var(--english-font); letter-spacing: -.025em; }
.fruit-club-footer .footer-bottom small { font-size: 10px; line-height: 1.8; }
.fruit-club-footer .footer-bottom a { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font: 700 11px/1.5 var(--body-font); letter-spacing: .025em; }
.fruit-club-footer .footer-bottom a span { display: grid; place-items: center; width: 37px; height: 37px; margin: 0; border: 1px solid #fff8e960; border-radius: 50%; font: 22px/1 var(--english-font); transition: transform .25s ease; }
.fruit-club-footer a:focus-visible, .footer-fruit-sticker:focus-visible { outline: 3px solid #f6df73; outline-offset: 7px; }
.fruit-club-footer .footer-wordmark:focus-visible { outline-color: #173f2c; }
@media (hover: hover) {
  .footer-fruit-sticker:hover { transform: translateY(-10px) rotate(calc(var(--sticker-turn) - 5deg)); box-shadow: 3px 13px 0 #0d2d20, 0 18px 25px #072d2430; }
  .fruit-club-footer .footer-wordmark:hover { transform: translateY(-3px); }
  .fruit-club-footer .footer-bottom a:hover span { transform: translateY(-4px); }
}
.footer-fruit-sticker:active { transform: translateY(2px) rotate(var(--sticker-turn)); box-shadow: 0 2px 0 #0d2d20; }
@media (min-width: 761px) and (max-width: 1100px) {
  .footer-sticker-sheet { height: 520px; }
  .footer-sticker-berry { width: 160px; height: 160px; left: 3%; }
  .footer-sticker-berry img { width: 86px; height: 86px; }
  .footer-sticker-mango { width: 180px; height: 153px; right: 6%; }
  .footer-sticker-mango img { width: 90px; height: 90px; }
  .footer-sticker-kiwi { left: 9%; width: 180px; height: 145px; }
  .footer-sticker-banana { width: 210px; height: 137px; right: 1%; }
  .footer-sticker-note { left: 43%; font-size: 10px; }
}
@media (max-width: 760px) {
  .fruit-club-footer { padding: 30px 22px 23px; }
  .footer-club-topline { gap: 15px; align-items: flex-start; }
  .footer-club-topline > span:first-child { max-width: 112px; font-size: 9px; line-height: 1.5; letter-spacing: .07em; }
  .footer-club-topline p { font-size: 11px; }
  .footer-color-dots { display: none; }
  .footer-sticker-sheet { height: 535px; margin-top: 24px; margin-bottom: 22px; }
  .footer-brand-label { left: -1%; width: 102%; padding: 18px 18px 19px; top: 49%; }
  .footer-label-caption { font-size: 7px; letter-spacing: .12em; }
  .fruit-club-footer .footer-wordmark { flex-direction: column; align-items: center; gap: 0; padding: 5px 0 16px; font-size: clamp(38px, 11.6vw, 75px); line-height: 1.05; letter-spacing: -.025em; }
  .fruit-club-footer .footer-wordmark .footer-brand-do { font-size: clamp(96px, 28vw, 170px); line-height: .98; letter-spacing: -.025em; }
  .footer-label-rule { height: 4px; margin: 0 4%; }
  .footer-fruit-sticker { border-width: 5px; font-size: 14px; padding: 8px 15px 11px; }
  .footer-fruit-sticker .footer-sticker-serial { font-size: 8px; top: 16px; left: 14px; }
  .footer-fruit-sticker .footer-sticker-go { font-size: 13px; top: 14px; right: 13px; }
  .footer-sticker-berry { left: 1%; top: 2px; width: 125px; height: 125px; }
  .footer-sticker-berry img { width: 72px; height: 72px; }
  .footer-sticker-mango { right: 0; top: 11px; width: 134px; height: 115px; border-radius: 5px 5px 25px 5px; }
  .footer-sticker-mango img { width: 68px; height: 68px; }
  .footer-sticker-kiwi { left: 0; bottom: 33px; width: 130px; height: 113px; }
  .footer-sticker-kiwi img { width: 62px; height: 62px; }
  .footer-sticker-banana { right: -2%; bottom: 27px; width: 153px; height: 103px; }
  .footer-sticker-banana img { width: 75px; height: 53px; }
  .footer-sticker-banana .footer-sticker-serial { top: 20px; left: 16px; }
  .footer-sticker-banana .footer-sticker-go { top: 20px; right: 16px; }
  .footer-sticker-note { left: 50%; bottom: -5px; transform: translateX(-50%); width: max-content; font-size: 10px; }
  .footer-sticker-note span { font-size: 20px; }
  .fruit-club-footer .footer-bottom { flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 17px; }
  .fruit-club-footer .footer-bottom > span { font-size: 15px; }
  .fruit-club-footer .footer-bottom a { font-size: 10px; gap: 11px; }
  .fruit-club-footer .footer-bottom small { order: 3; width: 100%; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-fruit-sticker, .fruit-club-footer .footer-wordmark, .fruit-club-footer .footer-bottom a span { transition: none; }
  .footer-fruit-sticker:hover, .footer-fruit-sticker:active { transform: rotate(var(--sticker-turn)); }
  .fruit-club-footer .footer-wordmark:hover, .fruit-club-footer .footer-bottom a:hover span { transform: none; }
}