/*!
 * Generated file. Do not edit directly.
 * Source: assets/css/shc-reward/shc-reward.source.css
 * Run: npm run build:css
 */
/* assets/css/common/pc-gutter.css */
.site-side-rail {
  display: none;
}

.site-pc-gutter {
  display: none;
}

.site-pc-gutter--left {
  display: none;
}

.site-pc-logo {
  display: none;
}

@media (max-width: 1023px) {
  .site-pc-gutter--right {
    display: block;
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  .site-pc-gutter {
    display: flex;
    position: absolute;
    top: 0;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }

  .site-pc-gutter--left {
    display: flex;
    left: max(0px, calc(var(--pc-canvas-half) - 50vw));
    z-index: 5;
    width: calc(50vw - var(--pc-canvas-half) + var(--pc-content-x));
  }

  .site-pc-gutter--right {
    display: flex;
    left: calc(var(--pc-content-x) + var(--content-max-width));
    z-index: 70;
    width: calc(50vw + var(--pc-canvas-half) - var(--pc-content-x) - var(--content-max-width));
    padding-bottom: 64px;
    /* Prefer bottom alignment; if the menu overflows the viewport height,
       fall back to top alignment so MOVIE / ABOUT stay visible. */
    align-items: safe flex-end;
    pointer-events: auto;
    border-left: 1px solid #000;
  }

  .site-side-rail {
    display: block;
    position: fixed;
    top: 0;
    left: max(0px, calc(50vw - var(--pc-canvas-half) + var(--pc-side-rail-x)));
    z-index: 5;
    width: 65px;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    --site-side-rail-item-height: 757px;
    --site-side-rail-item-gap: 40px;
    --site-side-rail-segment-size: calc(var(--site-side-rail-item-height) + var(--site-side-rail-item-gap));
    --site-side-rail-flow-duration: 40s;
  }

  .site-side-rail__track {
    display: flex;
    flex-direction: column;
    gap: var(--site-side-rail-item-gap);
    width: 65px;
    animation: site-side-rail-flow var(--site-side-rail-flow-duration) linear infinite;
    will-change: transform;
  }

  .site-side-rail__item {
    position: relative;
    flex-shrink: 0;
    width: 65px;
    height: var(--site-side-rail-item-height);
    overflow: hidden;
  }

  .site-side-rail__image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 757px;
    height: 65px;
    max-width: none;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  @keyframes site-side-rail-flow {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(calc(-1 * var(--site-side-rail-segment-size)));
    }
  }

  .site-pc-logo {
    display: grid;
    position: static;
    justify-items: center;
    --pc-logo-width: 178px;
    --pc-logo-scale: 0.7672413793; /* 178 / 232 */
    width: var(--pc-logo-width);
    pointer-events: none;
  }

  .site-pc-logo__main {
    position: relative;
    width: 100%;
    aspect-ratio: 232 / 207;
    overflow: hidden;
    --pc-logo-part-duration: 0.65s;
    --pc-logo-part-stagger: 0.18s;
    --pc-logo-part-ease: ease-out;
    --pc-logo-char-count: 12;
    --pc-logo-ring-delay: calc(var(--pc-logo-part-stagger) * var(--pc-logo-char-count) + var(--pc-logo-part-duration));
    --pc-logo-ring-done-delay: 3.46s;
    --pc-logo-char-outro-hold: 0.3s;
    --pc-logo-char-outro-duration: 0.35s;
    --pc-logo-char-outro-delay: calc(var(--pc-logo-ring-delay) + var(--pc-logo-char-outro-hold));
    --pc-logo-ring-offset-y: 0px;
    --pc-logo-ring-raster-offset-y: -0.5px;
  }

  .site-pc-logo__main-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 232px;
    height: 207px;
    transform: scale(var(--pc-logo-scale));
    transform-origin: top left;
    --pc-logo-u: 1px;
  }

  .site-pc-logo__main-part {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
  }

  .site-pc-logo__main-part--arc-text {
    top: 0;
    left: calc(2.871 * var(--pc-logo-u));
    width: calc(229 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-01-na {
    top: calc(36.159 * var(--pc-logo-u));
    left: calc(72.116 * var(--pc-logo-u));
    width: calc(51 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-02-no {
    top: calc(60 * var(--pc-logo-u));
    left: calc(126 * var(--pc-logo-u));
    width: calc(44 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-03-o {
    top: calc(112.513 * var(--pc-logo-u));
    left: 0;
    width: calc(45 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-04-te {
    top: calc(117.33 * var(--pc-logo-u));
    left: calc(49.088 * var(--pc-logo-u));
    width: calc(38 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-05-tsu {
    top: calc(121.874 * var(--pc-logo-u));
    left: calc(92.941 * var(--pc-logo-u));
    width: calc(41 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-06-da {
    top: calc(104.059 * var(--pc-logo-u));
    left: calc(139.439 * var(--pc-logo-u));
    width: calc(49 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-07-i {
    top: calc(121.914 * var(--pc-logo-u));
    left: calc(193.203 * var(--pc-logo-u));
    width: calc(39 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-08-chi {
    top: calc(164.199 * var(--pc-logo-u));
    left: calc(16.35 * var(--pc-logo-u));
    width: calc(38 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-09-ya {
    top: calc(172.715 * var(--pc-logo-u));
    left: calc(60.239 * var(--pc-logo-u));
    width: calc(33 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-10-re {
    top: calc(166.418 * var(--pc-logo-u));
    left: calc(100.229 * var(--pc-logo-u));
    width: calc(30 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-11-n {
    top: calc(170.79 * var(--pc-logo-u));
    left: calc(133.665 * var(--pc-logo-u));
    width: calc(36 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--char-12-ji {
    top: calc(162.641 * var(--pc-logo-u));
    left: calc(176.423 * var(--pc-logo-u));
    width: calc(40 * var(--pc-logo-u));
  }

  .site-pc-logo__main-part--ring-text {
    top: calc(36.159 * var(--pc-logo-u) + var(--pc-logo-ring-offset-y, 0px));
    left: 0;
    z-index: 2;
    width: calc(232 * var(--pc-logo-u));
    height: auto;
    object-fit: contain;
    object-position: top left;
  }

  html.is-safari .site-pc-logo__main-part--ring-text-raster {
    top: calc(36.159 * var(--pc-logo-u) + var(--pc-logo-ring-raster-offset-y, 0px));
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--arc-text {
    opacity: 0;
    animation: site-pc-logo-main-part-in var(--pc-logo-part-duration) var(--pc-logo-part-ease) 0s forwards;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--ring-text {
    visibility: hidden;
    opacity: 0;
    animation: site-pc-logo-main-ring-in var(--pc-logo-part-duration) var(--pc-logo-part-ease) var(--pc-logo-ring-delay) forwards;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part[class*="--char-"] {
    opacity: 0;
    animation:
      site-pc-logo-main-part-in var(--pc-logo-part-duration) var(--pc-logo-part-ease) var(--pc-logo-char-in-delay, 0s) forwards,
      site-pc-logo-main-char-outro var(--pc-logo-char-outro-duration) ease-out var(--pc-logo-char-outro-delay) forwards;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-01-na {
    --pc-logo-char-in-delay: 0.18s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-02-no {
    --pc-logo-char-in-delay: 0.36s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-03-o {
    --pc-logo-char-in-delay: 0.54s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-04-te {
    --pc-logo-char-in-delay: 0.72s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-05-tsu {
    --pc-logo-char-in-delay: 0.9s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-06-da {
    --pc-logo-char-in-delay: 1.08s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-07-i {
    --pc-logo-char-in-delay: 1.26s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-08-chi {
    --pc-logo-char-in-delay: 1.44s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-09-ya {
    --pc-logo-char-in-delay: 1.62s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-10-re {
    --pc-logo-char-in-delay: 1.8s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-11-n {
    --pc-logo-char-in-delay: 1.98s;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--char-12-ji {
    --pc-logo-char-in-delay: 2.16s;
  }

  @keyframes site-pc-logo-main-part-in {
    from {
      opacity: 0;
      transform: translateY(calc(4 * var(--pc-logo-u)));
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes site-pc-logo-main-char-outro {
    from {
      opacity: 1;
      visibility: visible;
    }

    to {
      opacity: 0;
      visibility: hidden;
    }
  }

  .site-pc-logo__main-stage.is-ring-done .site-pc-logo__main-part[class*="--char-"] {
    display: none;
  }

  @keyframes site-pc-logo-main-ring-in {
    from {
      opacity: 0;
      visibility: visible;
    }

    to {
      opacity: 1;
      visibility: visible;
    }
  }

  .site-pc-logo__products {
    position: relative;
    width: calc(152 * var(--pc-logo-width) / 232);
    height: calc(78 * var(--pc-logo-width) / 232);
    overflow: visible;
  }

  .site-pc-logo__product {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: contain;
  }

  .site-pc-logo__product--attack {
    top: calc(7 * var(--pc-logo-width) / 232);
    left: calc(-7 * var(--pc-logo-width) / 232);
    width: calc(80 * var(--pc-logo-width) / 232);
    height: calc(85 * var(--pc-logo-width) / 232);
  }

  .site-pc-logo__product--cucute {
    top: calc(9 * var(--pc-logo-width) / 232);
    left: calc(73 * var(--pc-logo-width) / 232);
    width: calc(85 * var(--pc-logo-width) / 232);
    height: calc(85 * var(--pc-logo-width) / 232);
  }
}

@media (min-width: 1920px) {
  .site-side-rail {
    position: absolute;
    left: var(--pc-side-rail-x);
    height: 100%;
    min-height: 100vh;
  }
}

@media (min-width: 1024px) {
  .site-side-rail--ar {
    left: 0;
  }

  .site-pc-gutter--ar {
    position: fixed;
  }

  .site-pc-gutter--ar.site-pc-gutter--left {
    left: 0;
    width: calc(50vw - var(--content-max-width) / 2);
    border-right: 1px solid #000;
  }

  .site-pc-gutter--ar.site-pc-gutter--right {
    left: calc(50vw + var(--content-max-width) / 2);
    right: 0;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--arc-text,
  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--ring-text,
  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part[class*="--char-"] {
    animation: none;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part--ring-text {
    visibility: visible;
  }

  .site-pc-logo__main-stage.is-animate .site-pc-logo__main-part[class*="--char-"] {
    display: none;
  }

  .site-side-rail__track {
    animation: none;
  }

  .site-side-rail__track > :not(:first-child) {
    display: none;
  }
}


/* assets/css/top/components/floating-menu.css */
.floating-menu {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 90;
  width: 100%;
  max-width: var(--content-max-width);
  transform: translateX(-50%);
}

.floating-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.floating-menu__item {
  margin: 0;
}

.floating-menu__item:not(:last-child) {
  display: none;
}

.floating-menu__item--banner {
  display: none;
}

.floating-menu__link {
  display: inline-block;
  color: inherit;
  font-family: var(--font-family-base);
  font-size: clamp(1.5625rem, calc(25 * var(--sp-u)), calc(65.577 * var(--sp-u)));
  font-weight: 800;
  line-height: 1.05;
  text-decoration: none;
}

.floating-menu__link-image {
  display: none;
}

.floating-menu__sub-list,
.floating-menu__sub-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.floating-menu__sub-list {
  display: none;
}

.floating-menu__sub-link {
  color: inherit;
  font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

body.is-menu-open .floating-menu {
  z-index: 220;
}

body.is-modal-open .floating-menu {
  display: none;
}

@media (min-width: 1024px) {
  .floating-menu {
    position: static;
    width: min(27.3vw, 457px);
    max-width: 100%;
    transform: none;
    color: var(--color-text-primary);
  }

  body.is-modal-open .floating-menu {
    display: block;
  }

  .floating-menu__list {
    display: grid;
    gap: min(2vw, 30px);
  }

  .floating-menu__item,
  .floating-menu__item:not(:last-child) {
    display: block;
  }

  .floating-menu__item--mission {
    margin-top: calc(2 * var(--sp-u));
  }

  .floating-menu__sub-list {
    display: grid;
    gap: calc(2 * var(--sp-u));
    margin-top: calc(4 * var(--sp-u));
    margin-left: calc(2 * var(--sp-u));
  }

  .floating-menu__link {
    display: block;
    font-size: 0;
    line-height: 0;
  }

  .floating-menu__link-text {
    display: none;
  }

  .floating-menu__link-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: calc(25 * var(--sp-u));
  }

  .floating-menu__item--mission .floating-menu__link-image {
    height: calc(24 * var(--sp-u));
  }

  .floating-menu__item--special .floating-menu__link-image {
    height: calc(29.5 * var(--sp-u));
  }

  .floating-menu__item--campaign .floating-menu__link-image {
    height: calc(28 * var(--sp-u));
  }

  .floating-menu__sub-link {
    font-size: clamp(1rem, calc(16 * var(--sp-u)), calc(41.969 * var(--sp-u)));
  }

  .floating-menu__item--banner {
    display: block;
    margin-top: 60px;
  }

  .floating-menu__item--banner + .floating-menu__item--banner {
    margin-top: calc(4 * var(--sp-u));
  }

  .floating-menu__banner-link {
    display: block;
    width: 100%;
    border: calc(3 * var(--sp-u)) solid #183e99;
  }

  .floating-menu__banner-link img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* Short PC viewports (Windows display scaling / browser chrome):
   compress vertical rhythm so the full floating menu fits. */
@media (min-width: 1024px) and (max-height: 800px) {
  .site-pc-gutter--right {
    padding-bottom: 32px;
  }

  .floating-menu__list {
    gap: min(1.2vw, 16px);
  }

  .floating-menu__item--mission {
    margin-top: 0;
  }

  .floating-menu__item--banner {
    margin-top: 24px;
  }
}

@media (min-width: 1024px) and (max-height: 680px) {
  .site-pc-gutter--right {
    padding-bottom: 16px;
  }

  .floating-menu__list {
    gap: min(1vw, 12px);
  }

  .floating-menu__item--banner {
    margin-top: 16px;
  }

  .floating-menu__banner-link {
    border-width: 2px;
  }
}


/* assets/css/shc-reward/shc-reward-page.css */
@font-face {
  font-family: "YasashisaGothicBoldV2";
  src: url("../../fonts/YasashisaGothicBold-V2.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sp-width: 390px;
  --content-max-width: 390px;
  --sp-design-width: 390;
  --sp-scale-max: 2.623076923;
  --sp-scale: 1;
  --sp-u: 1px;
  --bp-sp-max: 1023px;
  --bp-pc: 1024px;
  --color-text-primary: #212e79;
  --color-navy: var(--color-text-primary);
  --color-white: #fff;
  --color-bg-sky: #c9f3f4;
  --color-panel: #fff9de;
  --color-secondary-button: #fff;
  --paper-grid-base: #fff;
  --paper-grid-line-color: #edf8fb;
  --paper-grid-tile-size: 29px;
  --paper-grid-line-width: 3px;
  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-family-yasashisa: "YasashisaGothicBoldV2", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-size-base: 16px;
  --space-xs: 8px;
  --transition-base: 0.2s ease;
  --focus-outline: 3px solid #273db2;
  --capture-aspect-width: 390;
  --capture-aspect-height: 717;
  --viewport-stable-height: 100vh;
  --screen-top-space: calc(21 * var(--sp-u));
  --screen-heading-height: calc(24 * var(--sp-u));
  --screen-heading-margin: calc(14 * var(--sp-u));
  --actions-margin-top: calc(26 * var(--sp-u));
  --actions-height: calc(66 * var(--sp-u));
  --screen-bottom-space: max(calc(28 * var(--sp-u)), env(safe-area-inset-bottom, 0px));
  --capture-available-height: calc(
    var(--viewport-stable-height)
    - var(--screen-top-space)
    - var(--screen-heading-height)
    - var(--screen-heading-margin)
    - var(--actions-margin-top)
    - var(--actions-height)
    - var(--screen-bottom-space)
  );
  --capture-frame-width: min(
    calc(100vw - calc(20 * var(--sp-u))),
    calc(370 * var(--sp-u)),
    calc(var(--capture-available-height) * var(--capture-aspect-width) / var(--capture-aspect-height))
  );
  --shc-reward-pop-duration-decorations: 0.6s; /* あしらいパーツの出現アニメーション時間 */
  --shc-reward-pop-delay-decorations-warm: 0.1s; /* 暖色あしらいパーツの出現開始タイミング */
  --shc-reward-pop-delay-decorations-cool: 0.22s; /* 寒色あしらいパーツの出現開始タイミング */
  --shc-reward-float-duration-decorations-warm: 3.2s; /* 暖色あしらいパーツのふわふわ速度 */
  --shc-reward-float-duration-decorations-cool: 3.8s; /* 寒色あしらいパーツのふわふわ速度 */
  --shc-reward-float-delay-decorations-warm: 0.78s; /* 暖色あしらいパーツのふわふわ開始タイミング */
  --shc-reward-float-delay-decorations-cool: 0.96s; /* 寒色あしらいパーツのふわふわ開始タイミング */
  --shc-reward-pop-duration-stuffs: 0.6s; /* 食器・ハンガー系パーツの出現アニメーション時間 */
  --shc-reward-pop-delay-stuffs: 0.45s; /* 食器・ハンガー系パーツの出現開始タイミング */
  --shc-reward-pop-duration-trophy: 0.9s; /* トロフィーの出現アニメーション時間 */
  --shc-reward-pop-delay-trophy: 1.05s; /* トロフィーの出現開始タイミング */
  --shc-reward-rattle-duration-trophy: 3.6s; /* トロフィーのカタカタ速度 */
  --shc-reward-rattle-delay-trophy: 2.2s; /* トロフィーのカタカタ開始タイミング */
  --shc-reward-pop-duration-champion: 0.9s; /* お手伝いチャンピオンロゴの出現アニメーション時間 */
  --shc-reward-pop-delay-champion: 1.05s; /* お手伝いチャンピオンロゴの出現開始タイミング */
  --shc-reward-logo-rotate-duration: 10s; /* ロゴ背景の回転速度 */
  --shc-reward-logo-rotate-delay: 2.2s; /* ロゴ背景の回転開始タイミング */
  --shc-reward-float-distance: calc(-6 * var(--sp-u)); /* ふわふわ上下移動の派手さ */
  --shc-reward-float-distance-decorations-cool: calc(-7 * var(--sp-u)); /* 寒色あしらいパーツのふわふわ上下移動の派手さ */
  --shc-reward-rattle-rotate: 8deg; /* カタカタ回転の派手さ */
  --shc-reward-stuff-rattle-duration: 2.8s; /* 小物パーツの回転カタカタ速度 */
  --shc-reward-stuff-rattle-rotate: 12deg; /* 小物パーツの回転カタカタの派手さ */
  --shc-reward-stuff-rattle-delay-clothespin: 1.18s; /* 洗濯ばさみのカタカタ開始タイミング */
  --shc-reward-stuff-rattle-delay-dish: 1.3s; /* お皿のカタカタ開始タイミング */
  --shc-reward-stuff-rattle-delay-hanger: 1.42s; /* ハンガーのカタカタ開始タイミング */
  --shc-reward-stuff-rattle-delay-sponge: 1.54s; /* スポンジのカタカタ開始タイミング */
  --shc-reward-stuff-rattle-delay-chopsticks: 1.66s; /* お箸のカタカタ開始タイミング */
  --button-arrow-icon: url("../../img/top/common/icons/button_arrow.svg");
}

@supports (height: 100svh) {
  :root {
    --viewport-stable-height: 100svh;
  }
}

@media (max-width: 1023px) {
  :root {
    --sp-scale: min(calc(100vw / var(--sp-design-width)), var(--sp-scale-max));
    --sp-u: clamp(
      calc(100vw / var(--sp-design-width)),
      min(100vw, var(--bp-sp-max)) / var(--sp-design-width),
      calc(var(--sp-scale-max) * 1px)
    );
    --content-max-width: calc(390 * var(--sp-u));
    --space-xs: calc(8 * var(--sp-u));
  }
}

@media (min-width: 1024px) {
  :root {
    --sp-u: 1px;
    --content-max-width: 390px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background-color: var(--paper-grid-base);
  background-image:
    linear-gradient(var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width)),
    linear-gradient(90deg, var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width));
  background-position: 19% 19%;
  background-size: var(--paper-grid-tile-size) var(--paper-grid-tile-size);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
}

body {
  min-height: 100vh;
  min-height: 100svh;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
}

img,
video,
canvas {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none;
}

.shc-reward {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: 0;
  background: transparent;
}

.shc-reward__screen {
  position: relative;
  z-index: 2;
  display: none;
}

.shc-reward__screen--active {
  display: block;
}

.shc-reward__screen--camera,
.shc-reward__screen--confirm {
  padding: var(--screen-top-space) calc(10 * var(--sp-u)) var(--screen-bottom-space);
}

.shc-reward__screen--confirm.shc-reward__screen--active {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.shc-reward__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shc-reward__screen--camera.shc-reward__screen--active {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  --screen-top-space: calc(21 * var(--sp-u));
  --actions-margin-top: 0px;
  --actions-height: 0px;
}

[data-effect="active"] .shc-reward__screen--camera.shc-reward__screen--active,
[data-controls="visible"] .shc-reward__screen--camera.shc-reward__screen--active,
[data-tracking="searching"] .shc-reward__screen--camera.shc-reward__screen--active,
[data-tracking="lost"] .shc-reward__screen--camera.shc-reward__screen--active,
[data-tracking="tracking"] .shc-reward__screen--camera.shc-reward__screen--active {
  --screen-top-space: calc(21 * var(--sp-u));
  --screen-heading-height: calc(24 * var(--sp-u));
  --screen-heading-margin: calc(14 * var(--sp-u));
  --actions-margin-top: calc(26 * var(--sp-u));
  --actions-height: calc(66 * var(--sp-u));
}

.shc-reward__camera-heading {
  margin: 0 0 var(--screen-heading-margin);
  min-height: var(--screen-heading-height);
  color: var(--color-text-primary);
  font-size: clamp(1.25rem, calc(20 * var(--sp-u)), calc(52.462 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  visibility: hidden;
}

[data-effect="active"] .shc-reward__camera-heading,
[data-tracking="tracking"] .shc-reward__camera-heading {
  visibility: visible;
}

.shc-reward__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: visible;
  background: transparent;
}

.shc-reward__capture-frame,
.shc-reward__preview {
  position: relative;
  aspect-ratio: var(--capture-aspect-width) / var(--capture-aspect-height);
  overflow: hidden;
  border: calc(1 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: 0;
  background: var(--color-white);
}

.shc-reward__capture-frame {
  width: var(--capture-frame-width);
  height: calc(var(--capture-frame-width) * var(--capture-aspect-height) / var(--capture-aspect-width));
}

.shc-reward__preview {
  width: min(60%, calc(234 * var(--sp-u)));
  height: auto;
  margin-inline: auto;
}

.shc-reward__screen--confirm .shc-reward__preview {
  width: min(calc(306 * var(--sp-u)), 100%);
  height: auto;
}

.shc-reward__video,
.shc-reward__ar-canvas,
.shc-reward__capture-canvas,
.shc-reward__preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shc-reward__parts,
.shc-reward__anchor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shc-reward__video,
.shc-reward__preview-image {
  object-fit: cover;
  object-position: center;
}

.shc-reward__video {
  opacity: 0;
  transform: scaleX(-1);
  background: #111;
}

.shc-reward__ar-canvas,
.shc-reward__capture-canvas,
.shc-reward__parts,
.shc-reward__anchor {
  pointer-events: none;
}

.shc-reward__capture-canvas {
  display: none;
}

.shc-reward__ar-canvas {
  z-index: 2;
}

.shc-reward__parts {
  z-index: 3;
  opacity: 0;
}

.shc-reward__anchor {
  z-index: 4;
  opacity: 1;
  transition: opacity var(--transition-base);
}

[data-tracking="tracking"] .shc-reward__anchor {
  opacity: 0;
}

.shc-reward__anchor-face-wrap {
  position: absolute;
  top: calc(210 / 717 * 100%);
  left: 50%;
  width: calc(300 / 390 * 100%);
  height: auto;
  aspect-ratio: 334 / 508;
  display: block;
  transform: translateX(-50%);
}

.shc-reward__anchor-face {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.94;
}

.shc-reward__anchor-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.92;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 36%,
      rgba(255, 255, 255, 0.18) 43%,
      rgba(255, 255, 255, 0.98) 50%,
      rgba(255, 255, 255, 0.18) 57%,
      transparent 64%,
      transparent 100%
    );
  background-size: 230% 230%;
  background-position: 130% 50%;
  -webkit-mask: url("../../img/shc-reward/anchor/face.svg") center / contain no-repeat;
  mask: url("../../img/shc-reward/anchor/face.svg") center / contain no-repeat;
  mix-blend-mode: screen;
  animation: shc-reward-anchor-trace 2.2s ease-in-out infinite;
  filter:
    drop-shadow(0 0 calc(4 * var(--sp-u)) rgba(33, 46, 121, 0.78))
    drop-shadow(0 0 calc(8 * var(--sp-u)) rgba(255, 255, 255, 0.58));
}

.shc-reward__anchor-bubble {
  position: absolute;
  top: calc(59 / 717 * 100%);
  left: 50%;
  width: calc(312 / 390 * 100%);
  transform: translateX(-50%);
}

@keyframes shc-reward-anchor-trace {
  0% {
    background-position: 130% 50%;
    opacity: 0;
  }

  18% {
    opacity: 0.95;
  }

  82% {
    opacity: 0.95;
  }

  100% {
    background-position: -30% 50%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shc-reward__anchor-trace {
    animation: none;
    background-position: 50% 50%;
    opacity: 0.42;
  }
}

.shc-reward__status {
  display: none;
  position: absolute;
  left: calc(14 * var(--sp-u));
  right: calc(14 * var(--sp-u));
  bottom: calc(42 * var(--sp-u));
  z-index: 5;
  margin: 0;
  padding: calc(9 * var(--sp-u)) calc(12 * var(--sp-u));
  border: calc(2 * var(--sp-u)) solid var(--color-text-primary);
  border-radius: calc(999 * var(--sp-u));
  background: rgba(255, 255, 255, 0.86);
  color: var(--color-text-primary);
  font-size: clamp(0.8125rem, calc(13 * var(--sp-u)), calc(34.1 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

[data-tracking="loading"] .shc-reward__status,
[data-tracking="error"] .shc-reward__status {
  display: block;
}

.shc-reward__part,
.shc-reward__champion {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

.shc-reward__part {
  max-width: none;
}

[data-effect="active"] .shc-reward__parts {
  opacity: 1;
}

[data-effect="active"] .shc-reward__part--decorations {
  top: -5%;
  left: -12.5%;
  width: 117%;
  aspect-ratio: 917 / 1521;
  opacity: 1;
}

.shc-reward__deco-piece {
  position: absolute;
  max-width: none;
  height: auto;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

.shc-reward__deco-piece--warm {
  top: 0;
  left: 0;
  width: 100%;
}

[data-effect="active"] .shc-reward__deco-piece--warm {
  animation:
    shc-reward-pop var(--shc-reward-pop-duration-decorations) linear var(--shc-reward-pop-delay-decorations-warm) both,
    shc-reward-float var(--shc-reward-float-duration-decorations-warm) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--shc-reward-float-delay-decorations-warm) infinite;
}

.shc-reward__deco-piece--cool {
  top: calc(74 / 1521 * 100%);
  left: calc(104 / 917 * 100%);
  width: calc(803 / 917 * 100%);
}

[data-effect="active"] .shc-reward__deco-piece--cool {
  animation:
    shc-reward-pop var(--shc-reward-pop-duration-decorations) linear var(--shc-reward-pop-delay-decorations-cool) both,
    shc-reward-float-cool var(--shc-reward-float-duration-decorations-cool) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--shc-reward-float-delay-decorations-cool) infinite;
}

[data-effect="active"] .shc-reward__part--stuffs {
  top: -0.5%;
  left: -1%;
  width: 112%;
  aspect-ratio: 825 / 937;
  animation: shc-reward-pop var(--shc-reward-pop-duration-stuffs) linear var(--shc-reward-pop-delay-stuffs) both;
}

.shc-reward__stuff-piece {
  position: absolute;
  max-width: none;
  height: auto;
  animation-duration: var(--shc-reward-stuff-rattle-duration);
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

.shc-reward__stuff-piece--clothespin {
  top: 0;
  left: calc(1 / 825 * 100%);
  width: calc(121 / 825 * 100%);
  animation-delay: var(--shc-reward-stuff-rattle-delay-clothespin);
  animation-name: shc-reward-stuff-rattle-left;
}

.shc-reward__stuff-piece--dish {
  top: calc(80 / 937 * 100%);
  left: calc(516 / 825 * 100%);
  width: calc(187 / 825 * 100%);
  animation-delay: var(--shc-reward-stuff-rattle-delay-dish);
  animation-name: shc-reward-stuff-rattle-right;
}

.shc-reward__stuff-piece--hanger {
  top: calc(346 / 937 * 100%);
  left: calc(548 / 825 * 100%);
  width: calc(239 / 825 * 100%);
  animation-delay: var(--shc-reward-stuff-rattle-delay-hanger);
  animation-name: shc-reward-stuff-rattle-right;
}

.shc-reward__stuff-piece--sponge {
  top: calc(701 / 937 * 100%);
  left: calc(644 / 825 * 100%);
  width: calc(136 / 825 * 100%);
  animation-delay: var(--shc-reward-stuff-rattle-delay-sponge);
  animation-name: shc-reward-stuff-rattle-right;
}

.shc-reward__stuff-piece--chopsticks {
  top: calc(779 / 937 * 100%);
  left: 0;
  width: calc(141 / 825 * 100%);
  animation-delay: var(--shc-reward-stuff-rattle-delay-chopsticks);
  animation-name: shc-reward-stuff-rattle-left;
}

[data-effect="active"] .shc-reward__part--trophy {
  right: -10%;
  bottom: -6%;
  width: 59%;
  animation:
    shc-reward-pop var(--shc-reward-pop-duration-trophy) linear var(--shc-reward-pop-delay-trophy) both,
    shc-reward-rattle-right var(--shc-reward-rattle-duration-trophy) steps(2, end) var(--shc-reward-rattle-delay-trophy) infinite;
}

.shc-reward__champion {
  left: 2%;
  bottom: 1.5%;
  width: 43%;
  aspect-ratio: 1;
  transform: none;
}

[data-effect="active"] .shc-reward__champion {
  animation: shc-reward-pop var(--shc-reward-pop-duration-champion) linear var(--shc-reward-pop-delay-champion) both;
}

.shc-reward__champion-bg,
.shc-reward__champion-text {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  transform: translate(-50%, -50%);
}

[data-effect="active"] .shc-reward__champion-bg {
  width: 100%;
  animation: shc-reward-champion-rotate var(--shc-reward-logo-rotate-duration) steps(36, end) var(--shc-reward-logo-rotate-delay) infinite;
}

.shc-reward__champion-text {
  width: 74%;
}

.shc-reward__heading {
  margin: 0 0 var(--screen-heading-margin);
  color: var(--color-text-primary);
  font-size: clamp(1.25rem, calc(20 * var(--sp-u)), calc(52.462 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.shc-reward__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: calc(24 * var(--sp-u));
  width: min(calc(330 * var(--sp-u)), 100%);
  margin: var(--actions-margin-top) auto 0;
}

.shc-reward__screen--camera .shc-reward__actions {
  display: none;
}

[data-effect="active"] .shc-reward__screen--camera .shc-reward__actions,
[data-controls="visible"] .shc-reward__screen--camera .shc-reward__actions,
[data-tracking="searching"] .shc-reward__screen--camera .shc-reward__actions,
[data-tracking="lost"] .shc-reward__screen--camera .shc-reward__actions,
[data-tracking="tracking"] .shc-reward__screen--camera .shc-reward__actions,
[data-tracking="error"] .shc-reward__screen--camera .shc-reward__actions {
  display: grid;
}

.shc-reward__screen--camera .shc-reward__actions {
  grid-template-columns: calc(64 * var(--sp-u)) calc(170 * var(--sp-u)) calc(57 * var(--sp-u));
  justify-content: space-between;
  gap: 0;
}

.shc-reward__button {
  width: 100%;
}

.shc-reward__button.shc-reward__button--retry {
  display: none;
}

[data-tracking="error"] .shc-reward__button--capture {
  display: none;
}

[data-tracking="error"] .shc-reward__button.shc-reward__button--retry {
  display: inline-flex;
}

.shc-reward__camera-switch {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: calc(57 * var(--sp-u));
  height: calc(57 * var(--sp-u));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.shc-reward__screen--camera .shc-reward__button--secondary {
  min-height: calc(57 * var(--sp-u));
  padding: calc(16 * var(--sp-u)) calc(14 * var(--sp-u));
  font-size: clamp(0.875rem, calc(14 * var(--sp-u)), calc(36.723 * var(--sp-u)));
}

.shc-reward__screen--camera .shc-reward__button--primary {
  min-height: calc(63 * var(--sp-u));
}

[data-effect="active"] .shc-reward__screen--camera .shc-reward__camera-switch,
[data-controls="visible"] .shc-reward__screen--camera .shc-reward__camera-switch,
[data-tracking="searching"] .shc-reward__screen--camera .shc-reward__camera-switch,
[data-tracking="lost"] .shc-reward__screen--camera .shc-reward__camera-switch,
[data-tracking="tracking"] .shc-reward__screen--camera .shc-reward__camera-switch,
[data-tracking="error"] .shc-reward__screen--camera .shc-reward__camera-switch {
  display: inline-flex;
}

.shc-reward__camera-switch:focus-visible {
  outline: var(--focus-outline);
  outline-offset: calc(3 * var(--sp-u));
}

.shc-reward__camera-switch:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.shc-reward__camera-switch-image {
  width: 100%;
  height: auto;
}

.shc-reward__landscape {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: calc(24 * var(--sp-u));
  background: var(--color-bg-sky);
}

.shc-reward__landscape-text {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

@media (orientation: landscape) and (max-width: 1023px) {
  .shc-reward__landscape {
    display: grid;
  }
}

@media (min-width: 1024px) {
  html {
    height: 100%;
    overflow: hidden;
    overflow-x: clip;
  }

  body {
    height: 100%;
    overflow: hidden;
    overflow-x: clip;
    background-size: 42px 42px;
  }

  .shc-reward {
    width: var(--content-max-width);
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: auto;
    background-color: var(--paper-grid-base);
    background-image:
      linear-gradient(var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width)),
      linear-gradient(90deg, var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width));
    background-size: var(--paper-grid-tile-size) var(--paper-grid-tile-size);
  }

}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: calc(12 * var(--sp-u)) calc(24 * var(--sp-u));
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base);
}

.button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: calc(3 * var(--sp-u));
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.button--layered {
  position: relative;
  z-index: 0;
  isolation: isolate;
  color: var(--button-text-color, #fff);
  background: transparent;
  border: none;
  border-radius: var(--button-radius, calc(999 * var(--sp-u)));
}

.button--layered::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  border: var(--button-border-width, calc(2 * var(--sp-u))) solid var(--button-shadow-border, var(--button-face-border, var(--color-navy)));
  border-radius: inherit;
  background-color: var(--button-shadow-bg, var(--color-navy));
  transform: translate(var(--button-shadow-x, calc(4 * var(--sp-u))), var(--button-shadow-y, calc(5 * var(--sp-u))));
  transition: transform var(--transition-base);
}

.button--layered::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  box-sizing: border-box;
  border: var(--button-border-width, calc(2 * var(--sp-u))) solid var(--button-face-border, var(--color-navy));
  border-radius: var(--button-radius, calc(999 * var(--sp-u)));
  background-color: var(--button-face-bg);
  pointer-events: none;
}

.button--layered > * {
  position: relative;
  z-index: 1;
}

.button--layered:hover::after {
  background-color: var(--button-face-bg-hover, var(--button-face-bg));
}

.button--layered:active {
  transform: translate(var(--button-press-x, calc(1 * var(--sp-u))), var(--button-press-y, calc(1 * var(--sp-u))));
}

.button--layered:active::before {
  transform: translate(
    calc(var(--button-shadow-x, 3px) - var(--button-press-x, 1px)),
    calc(var(--button-shadow-y, 3px) - var(--button-press-y, 1px))
  );
}

.button--cta {
  width: min(calc(306 * var(--sp-u)), 100%);
  min-width: 0;
  min-height: calc(62 * var(--sp-u));
  padding: calc(21 * var(--sp-u)) calc(24 * var(--sp-u));
  font-size: clamp(1.0625rem, calc(17 * var(--sp-u)), calc(44.592 * var(--sp-u)));
  letter-spacing: 0;
  --button-border-width: calc(2 * var(--sp-u));
  --button-face-bg: #ff1023;
  --button-face-bg-hover: #e60012;
  --button-face-border: #212e79;
  --button-shadow-bg: #d30010;
  --button-shadow-border: #212e79;
  --button-shadow-x: calc(5 * var(--sp-u));
  --button-shadow-y: calc(5 * var(--sp-u));
  --button-press-x: calc(2 * var(--sp-u));
  --button-press-y: calc(2 * var(--sp-u));
}

.shc-reward__button--primary,
.shc-reward__button--teal {
  justify-content: space-between;
  gap: calc(8 * var(--sp-u));
  width: min(calc(306 * var(--sp-u)), 100%);
  min-width: 0;
  min-height: calc(63 * var(--sp-u));
  padding: calc(21 * var(--sp-u)) calc(18 * var(--sp-u));
  font-size: clamp(0.925rem, calc(14.8 * var(--sp-u)), calc(38.822 * var(--sp-u)));
  line-height: 1;
  letter-spacing: 0;
  --button-border-width: calc(2 * var(--sp-u));
  --button-face-border: #212e79;
  --button-shadow-border: #212e79;
  --button-shadow-x: calc(4 * var(--sp-u));
  --button-shadow-y: calc(5 * var(--sp-u));
  --button-press-x: calc(2 * var(--sp-u));
  --button-press-y: calc(2 * var(--sp-u));
  --button-arrow-size: calc(19 * var(--sp-u));
  --button-arrow-circle-border-width: calc(1 * var(--sp-u));
}

.shc-reward__button--primary {
  --button-text-color: #212e79;
  --button-face-bg: #ffb031;
  --button-face-bg-hover: #f0a020;
  --button-shadow-bg: #d78500;
  --button-arrow-circle-border: #ffb031;
  --button-arrow-color: #ffb031;
}

.shc-reward__button--teal {
  --button-face-bg: #00b4a9;
  --button-face-bg-hover: #009a90;
  --button-shadow-bg: #00958c;
  --button-arrow-circle-border: #00b4a9;
  --button-arrow-color: #00b4a9;
}

.button__label {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.button.shc-reward__button--secondary {
  --button-text-color: var(--color-text-primary);
  --button-face-bg: var(--color-secondary-button);
  --button-face-bg-hover: #fff;
  --button-shadow-bg: #fff;
  --button-arrow-color: var(--color-text-primary);
}

.shc-reward__campaign {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(330 * var(--sp-u)), 100%);
  margin: calc(28 * var(--sp-u)) auto 0;
  color: var(--color-text-primary);
  text-align: center;
}

.shc-reward__campaign-prize {
  margin: 0;
  font-family: var(--font-family-yasashisa);
  font-size: clamp(1.125rem, calc(18 * var(--sp-u)), calc(47.215 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.35;
}

.shc-reward__campaign-text {
  display: grid;
  gap: calc(2 * var(--sp-u));
  margin: calc(10 * var(--sp-u)) 0 0;
  font-size: clamp(1.125rem, calc(18 * var(--sp-u)), calc(47.215 * var(--sp-u)));
  font-weight: 700;
  line-height: 1.45;
}

.shc-reward__campaign-text span {
  display: block;
}

.shc-reward__campaign-button {
  width: 100%;
  margin-top: calc(24 * var(--sp-u));
}

.shc-reward__campaign .shc-reward__button--secondary {
  width: 100%;
  margin-top: calc(18 * var(--sp-u));
}

@keyframes shc-reward-pop {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }

  12% {
    opacity: 1;
  }

  43% {
    transform: scale3d(1.2, 1.2, 1);
  }

  58% {
    transform: scale3d(0.94, 0.94, 1);
  }

  72% {
    transform: scale3d(1.04, 1.04, 1);
  }

  86% {
    transform: scale3d(0.99, 0.99, 1);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes shc-reward-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--shc-reward-float-distance), 0);
  }
}

@keyframes shc-reward-float-cool {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, var(--shc-reward-float-distance-decorations-cool), 0);
  }
}

@keyframes shc-reward-rattle-right {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(var(--shc-reward-rattle-rotate));
  }

  50% {
    transform: rotate(calc(var(--shc-reward-rattle-rotate) * -1));
  }

  75% {
    transform: rotate(var(--shc-reward-rattle-rotate));
  }
}

@keyframes shc-reward-stuff-rattle-left {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(var(--shc-reward-stuff-rattle-rotate));
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(calc(var(--shc-reward-stuff-rattle-rotate) * -1));
  }
}

@keyframes shc-reward-stuff-rattle-right {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(calc(var(--shc-reward-stuff-rattle-rotate) * -1));
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(var(--shc-reward-stuff-rattle-rotate));
  }
}

@keyframes shc-reward-champion-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0.01ms;
  }

  [data-effect="active"] .shc-reward__part,
  [data-effect="active"] .shc-reward__stuff-piece,
  [data-effect="active"] .shc-reward__champion,
  [data-effect="active"] .shc-reward__champion-bg {
    opacity: 1;
    animation: none;
  }
}