@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
fonts
================================================================================
*/
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* 
================================================================================
class
================================================================================
*/
.null {
  height: 0px;
  margin: 0;
  padding: 0;
}

.tCenter {
  text-align: center;
}

.full-w {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translate(-50vw, 0);
}

.inView {
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
}
.inView.is--stby {
  opacity: 0;
  transform: translate(0, 5em);
}

@media screen and (max-width: 900px) {
  .only-pc {
    display: none;
  }
}
.only-sp {
  display: none;
}
@media screen and (max-width: 900px) {
  .only-sp {
    display: block;
  }
  .only-sp.flex {
    display: flex;
  }
}

.titleDeco {
  position: relative;
}
.titleDeco::before {
  content: "";
  display: block;
  width: 13.75rem;
  height: 13.75rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/common/title_deco.png) center center/contain no-repeat;
  z-index: -1;
  transition: all 500ms ease-in-out 100ms;
}
.titleDeco img {
  transition: opacity 500ms cubic-bezier(0.69, 0.59, 0, 1.01) 200ms, transform 500ms cubic-bezier(0.67, 1.9, 0.52, 1) 200ms;
  transition-delay: 700ms;
}
.titleDeco.is--stby::before {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-360deg) scale(0);
}
.titleDeco.is--stby img {
  opacity: 0;
  transform: translate(0, 1em);
}

.bgWrap {
  overflow: hidden;
}
.bgWrap-1st::before {
  content: "";
  display: block;
  width: 100%;
  height: 250rem;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/common/bg_base_1.png) top center/100% auto repeat-y;
  z-index: -1;
}
.bgWrap::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/contents/partner/bg.png) center top;
  background-size: 100% auto;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 96%, transparent);
  mask-mode: match-source;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  z-index: -1;
}

.anchor-link {
  cursor: pointer;
}

.btn-shape {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: fit-content;
  margin: auto;
  min-width: 26.75rem;
  min-height: 6.75rem;
  font-size: 2.25rem;
  font-weight: 800;
  text-shadow: 0.1em 0.1em 0px rgba(92, 92, 92, 0.4);
  line-height: 1;
}
.btn-shape a {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-right: 0.4375rem;
  padding-bottom: 0.4375rem;
  text-decoration: none;
  color: #fff !important;
}
.btn-shape a:hover .obj::after {
  opacity: 0.3;
}
.btn-shape a::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0%;
  background-color: #2c81a8;
  opacity: 0.7;
  width: calc(100% - 0.4375rem);
  height: 6.25rem;
  z-index: 1;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.btn-shape a .obj {
  background-color: #b3dff4;
  width: 26.25rem;
  height: 6.25rem;
  transform: translate(0rem, 0rem);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.btn-shape a .obj::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: url(../img/contents/onlineshop/bg_box_1.png) center top/100% auto repeat-y;
  clip-path: inherit;
  z-index: 0;
}
.btn-shape a .obj::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0%;
  background-color: #fff;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: all 300ms ease;
}
.btn-shape a .obj span {
  position: relative;
  display: inline-flex;
  z-index: 3;
  padding-right: 3.75rem;
  transform: translate(0, -0.1em);
}
.btn-shape a .obj span::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -40%);
  background: url(../img/common/btn_icon_arrow.png) center top/100% auto no-repeat;
  width: 2.3125rem;
  height: 1.75rem;
}
.btn-shape a .obj-left {
  justify-content: flex-start;
  padding-left: 1.875rem;
}
.btn-shape a .obj-left span {
  padding-left: 1.875rem;
  position: relative;
}
.btn-shape a .obj-left span::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -40%);
  background: url(../img/common/icon_ball.png) center center/100% auto no-repeat;
  width: 1.25rem;
  height: 1.25rem;
}
.btn-shape-mini {
  min-width: fit-content;
  min-height: auto;
  font-size: 0.9375rem;
}
.btn-shape-mini a::before {
  height: 2.8125rem;
}
.btn-shape-mini a .obj {
  width: 16.4375rem;
  height: 2.8125rem;
}

.store-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2.5rem;
  padding: 0;
  margin: 0;
}
.store-list li {
  background-color: #fff;
  border-radius: 0.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 7.5rem;
  position: relative;
  cursor: pointer;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms, box-shadow 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
  box-shadow: 0px 0px 10px 5px rgba(44, 129, 168, 0.7);
}
.store-list li:hover {
  box-shadow: 0px 0px 10px 6px rgb(44, 129, 168);
}
.store-list li:hover::after {
  filter: brightness(120%);
}
.store-list li.type_blank::after {
  content: "";
  display: block;
  width: 3.875rem;
  height: 3.875rem;
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translate(0%, -50%) scale(0.9);
  pointer-events: none;
  background: url(../img/contents/onlineshop/icon_link.png) center center/contain no-repeat;
  transition: filter 300ms ease;
}
.store-list li a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0;
}
.store-list li span {
  visibility: hidden;
}
.store-list li img {
  width: 3.75rem;
}
.store-list li::after {
  content: "";
  display: block;
  width: 3.875rem;
  height: 3.875rem;
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translate(0%, -50%);
  background: url(../img/contents/onlineshop/icon_arrow.png) center center/contain no-repeat;
}

.deco-line {
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: space-between;
}
.deco-line::before {
  content: "";
  display: block;
  width: 5rem;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/common/deco_line/arrow.png) center center/contain no-repeat;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
}
.deco-line span {
  display: block;
  width: 20.625rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.deco-line span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(0%, -40%);
  background: url(../img/common/deco_line/left.png) center center/contain no-repeat;
  transition: all 300ms ease-in-out;
  transition-delay: 600ms;
}
.deco-line span:nth-of-type(1) {
  margin-left: 1.875rem;
}
.deco-line span:nth-of-type(2) {
  margin-right: 1.875rem;
  right: auto;
  left: 0;
}
.deco-line span:nth-of-type(2)::before {
  background: url(../img/common/deco_line/right.png) center center/contain no-repeat;
}
.deco-line.is--stby::before {
  opacity: 0;
  transform: translate(-50%, 50%);
}
.deco-line.is--stby span:nth-of-type(1)::before {
  transform: translate(100%, -40%);
}
.deco-line.is--stby span:nth-of-type(2)::before {
  transform: translate(-100%, -40%);
}

.color-white {
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.9375rem;
}
.swiperUnit .swiperWrap .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: center;
}
.swiperUnit .swiperWrap .swiper-wrapper .swiper-slide-contents {
  width: 40.625rem;
  border-radius: 1.25rem;
  color: #fff;
  padding: 3.75rem 2.5rem 7.5rem;
  box-sizing: border-box;
  display: grid;
  grid-gap: 1.875rem;
}
.swiperUnit .swiperWrap .swiper-wrapper .swiper-slide-contents-item:nth-of-type(1) {
  font-size: 1.875rem;
  text-align: left;
}
.swiperUnit .swiperWrap .swiper-pagination {
  position: absolute !important;
  bottom: 1.875rem;
}
.swiperUnit .swiperWrap .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  margin: 0 0.9375rem;
  background-color: #fff;
  opacity: 1;
  position: relative;
  transition: all 300ms ease;
}
.swiperUnit .swiperWrap .swiper-pagination-bullet:hover {
  background-color: #64c4ee;
}
.swiperUnit .swiperWrap .swiper-pagination-bullet::after {
  content: "";
  display: none;
  width: 4.375rem;
  height: 4.375rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/contents/slide/nav_dot.png) center center/100% 100% no-repeat;
}
.swiperUnit .swiperWrap .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: transparent;
  pointer-events: none;
}
.swiperUnit .swiperWrap .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  display: block;
}
.swiperUnit .swiperWrap .swiper-button-prev, .swiperUnit .swiperWrap .swiper-button-next {
  position: absolute !important;
  width: 6.25rem;
  height: 6.25rem;
  transition: all 300ms ease;
  background: url(../img/contents/slide/btn_nav.png) center center/100% 100% no-repeat;
}
.swiperUnit .swiperWrap .swiper-button-prev.type_2, .swiperUnit .swiperWrap .swiper-button-next.type_2 {
  background: url(../img/contents/slide/btn_nav_2.png) center center/100% 100% no-repeat;
}
.swiperUnit .swiperWrap .swiper-button-prev::after, .swiperUnit .swiperWrap .swiper-button-next::after {
  display: none;
}
.swiperUnit .swiperWrap .swiper-button-prev:hover, .swiperUnit .swiperWrap .swiper-button-next:hover {
  filter: brightness(1.5);
}
.swiperUnit .swiperWrap .swiper-button-prev {
  transform: rotate(180deg);
}
.window-full {
  width: 46.875rem;
  left: 50%;
  transform: translate(-23.4375rem, 0);
  overflow: hidden;
}

.tokuten-box-item::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 100%;
  height: 100%;
  background: #2c81a8;
  opacity: 0.7;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  z-index: 1;
}
.tokuten-box-item-frame {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 0.9375rem 2.5rem;
  margin-bottom: 2.5rem;
  text-align: left;
  background-color: #b3dff4;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.tokuten-box-item-frame::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: url(../img/contents/onlineshop/bg_box_1_large.png) center top/100% auto repeat-y;
  clip-path: inherit;
  z-index: 0;
}
.tokuten-box-item.type_2:before {
  background: #72b88e;
}
.tokuten-box-item.type_2 .tokuten-box-item-frame {
  background-color: #e2f7ec;
}
.tokuten-box-item.type_2 .tokuten-box-item-frame::before {
  background: url(../img/contents/onlineshop/bg_box_2_large.png) center top/100% auto repeat-y;
}
.tokuten-box-item-contents {
  display: grid;
  grid-template-rows: repeat(3, auto);
}
.tokuten-box-item-contents h3 {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding: 0.2em 0rem 1.25rem 6.25rem;
  min-height: 5.625rem;
  margin-bottom: 0.625rem;
  font-size: 1.875rem;
  line-height: 1.4;
  text-align: left;
  justify-content: flex-start;
  text-shadow: 0.12em 0.12em 0px rgba(92, 92, 92, 0.4);
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
  transition-delay: 300ms;
}
.tokuten-box-item-contents h3 span {
  transform: translateY(0.1em);
}
.tokuten-box-item-contents h3 .icon {
  position: absolute;
  top: 0.3125rem;
  left: 0rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
}
.tokuten-box-item-contents-image {
  width: 100%;
  aspect-ratio: 570/340;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
  transition-delay: 400ms;
}
.tokuten-box-item-contents-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: cover;
  z-index: 1;
}
.tokuten-box-item-contents-image::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
}
.tokuten-box-item-contents-text {
  padding-top: 0.625rem;
  font-size: 1.625rem;
  color: #303030;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
  transition-delay: 500ms;
}
.tokuten-box-item-contents-text::after {
  content: "";
  display: block;
  position: absolute;
  width: 20rem;
  height: 3.6875rem;
  left: -2.75rem;
  top: -1.875rem;
  background: url(../img/contents/onlineshop/pop.png) left center/auto 100% no-repeat;
  z-index: 2;
}
.tokuten-box-item-contents-text ul li {
  line-height: 1.3;
  margin-bottom: 0.5em;
}
.tokuten-box-item-contents-link {
  width: 100% !important;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
  transition-delay: 600ms;
}
.tokuten-box-item-contents-link a {
  width: 100%;
  height: 4rem;
  border-radius: 2rem !important;
  background-color: #101940;
  background-image: linear-gradient(0deg, #283053 50%, transparent 50%);
  background-size: 2px 2px;
  border: solid 3px #80f1f6 !important;
}
.tokuten-box-item-contents-link a span {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 1.625rem;
  line-height: 1;
  padding: 0 !important;
}
.tokuten-box-item-contents-link a span img {
  width: 15.625rem;
}
.tokuten-box-item-contents-link a span::after {
  right: 0rem !important;
  background: url(../img/contents/onlineshop/icon_blank.png) center center/cover no-repeat;
  background-color: transparent !important;
  width: 4.5rem !important;
  height: 4.5rem !important;
  pointer-events: none;
}
.tokuten-box-item.is--stby .tokuten-box-item-contents h3 {
  transform: translate(3.125rem, 0);
  opacity: 0;
}
.tokuten-box-item.is--stby .tokuten-box-item-contents-image {
  transform: translate(3.125rem, 0);
  opacity: 0;
}
.tokuten-box-item.is--stby .tokuten-box-item-contents-text {
  transform: translate(3.125rem, 0);
  opacity: 0;
}
.tokuten-box-item.is--stby .tokuten-box-item-contents-link {
  transform: translate(3.125rem, 0);
  opacity: 0;
}
.section-inframe {
  width: 40.625rem;
  margin: auto;
}
dl.data {
  text-align: left;
  display: grid;
  grid-template-columns: 6em 1fr;
  grid-gap: 1em 1em;
}
.btn {
  width: fit-content;
  margin: 0 auto 1.25rem;
}
.btn a {
  display: flex;
  min-height: 3.125rem;
  border-radius: 1.5625rem;
  justify-content: center;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: all 300ms ease;
  overflow: hidden;
  position: relative;
}
.btn a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0%;
  background-color: #fff;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: all 300ms ease;
}
.btn a span {
  position: relative;
  display: inline-flex;
  z-index: 3;
}
.btn a[target=_blank] span {
  padding-right: 2em;
}
.btn a[target=_blank] span::after {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #f2f2f2;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.btn a:hover::after {
  opacity: 0.3;
}
.btn-line {
  min-width: 22.5rem;
}
.btn-line a {
  border: solid 2px #fff;
}
.icon-star {
  display: inline-block;
  font-size: 1.1em;
}
.icon-star:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  transform: translateY(0.1em);
  background: url(../img/common/icon_star.png) center center/auto 100% no-repeat;
}

h2.label-base {
  height: 12.75rem;
  overflow: hidden;
  position: relative;
}
h2.label-base::before {
  content: "";
  display: inline-block;
  width: 100vw;
  height: 100%;
  background: url(../img/common/bg_label.png) center center/auto 100% no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50vw, -50%);
  pointer-events: none;
  z-index: 1;
}
h2.label-base img {
  position: relative;
  max-height: 100%;
  z-index: 2;
}
h2.label-base-small {
  width: 46.875rem;
  height: 6.875rem;
  left: 50%;
  transform: translate(-23.4375rem, 0);
}
h2.label-base-small.is--stby {
  transform: translate(-23.4375rem, 5em);
}
h2.label-base-small:before {
  background: url(../img/common/bg_label_small.png) center center/auto 100% no-repeat;
}

h3.label-base {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  position: relative;
}
h3.label-base::after {
  content: "";
  display: inline-block;
  width: 100vw;
  height: 100%;
  background: url(../img/common/bg_label_s.png) center center/auto 100% no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50vw, -50%);
  pointer-events: none;
  z-index: -1;
}
.chara-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
}
.chara-list-item {
  margin-bottom: 1.25rem;
}
.chara-list-item-image {
  width: 34.375rem;
  height: 32.9125rem;
  margin: auto;
}
.chara-list-item-image::after {
  content: "";
  display: block;
  width: 34.375rem;
  height: 32.9125rem;
  margin: auto;
  background: url(../img/contents/partner/chara_bg.png) center center/contain no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 500ms cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms, transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
  transition-delay: 500ms;
}
.chara-list-item-image img {
  position: absolute;
  width: 18.75rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 800ms cubic-bezier(0.12, 1.4, 0.19, 1.03);
  transform-origin: bottom center;
  transition-delay: 900ms;
}
.chara-list-item.is--stby .chara-list-item-image::after {
  transform: translate(-50%, -30%) scale(0) rotate(-360deg);
  opacity: 0;
}
.chara-list-item.is--stby .chara-list-item-image img {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* 
================================================================================
サイズ
================================================================================
*/
/* 
================================================================================
色
================================================================================
*/
/* 
================================================================================
書体
================================================================================
*/
/* 
================================================================================
設定
================================================================================
*/
/* 
================================================================================
追加オプション
================================================================================
*/
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* 
================================================================================
body
================================================================================
*/
/* 
================================================================================
body
================================================================================
*/
html {
  background-color: #0b133a;
  font-size: 12.8px;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 2.1333333333vw;
  }
}
html.scrollMode_onepage {
  overflow: hidden;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: left;
  overflow-y: scroll;
  font-feature-settings: "palt";
  color: #303030;
  padding: 0;
  margin: 0;
  text-align: center;
}
body .site-frame-header, body .site-frame-footer, body .site-frame-main {
  z-index: 2;
}
body .site-frame-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
body .site-frame-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body .site-frame-header-inner .switch {
  width: 12.5rem;
}
body .site-frame-header-inner .official {
  width: 18.75rem;
  margin-right: 1.875rem;
}
body .site-frame-footer {
  color: #fff;
  font-size: 0.75rem;
  padding-top: 5rem;
  padding-bottom: 6.25rem;
}
body .site-frame-footer .btn-line a {
  font-size: 0.9375rem;
}
body .site-frame-footer .btn-line a span {
  position: static;
}
body .site-frame-footer .btn-line a span::after {
  right: 1.25rem;
  background: url(../img/common/icon_blank.png) center center/contain no-repeat;
  background-color: transparent !important;
  width: 1.3125rem !important;
  height: 0.9375rem !important;
  pointer-events: none;
}
body .site-frame-footer p {
  padding-top: 0.625rem;
  text-align: left;
  font-size: 0.9375rem;
}
body .modalWindow {
  display: none;
}

#container {
  background-color: #c6e7f7;
  display: grid;
  grid-template-columns: 1fr 600px 1fr;
}
@media screen and (max-width: 1200px) {
  #container {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
}
#container img,
#container svg {
  max-width: 100%;
}
#container::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url(../img/common/bg_pc.png) top center/cover no-repeat;
  z-index: 1;
}
#container::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: linear-gradient(0deg, #fff 50%, transparent 50%);
  background-size: 4px 4px;
  opacity: 0.14;
  z-index: 1;
}
#container div {
  position: relative;
}
#container .pc-area-left,
#container .pc-area-right {
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  #container .pc-area-left,
  #container .pc-area-right {
    display: none !important;
  }
}
#container .pc-area-left-contents,
#container .pc-area-right-contents {
  position: sticky;
  top: 0;
}
#container .pc-area-left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-right: solid 4px #fff;
  position: relative;
}
#container .pc-area-left::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(100, 181, 195, 0) 0%, rgba(100, 181, 195, 0) 97%, rgb(100, 181, 195) 100%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
#container .pc-area-left-contents {
  width: auto;
  max-width: 43.75rem;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 1600px) {
  #container .pc-area-left-contents {
    width: 100%;
  }
}
#container .pc-area-left-contents-wrap {
  margin: 0 3.125rem;
  padding-top: 2.1875rem;
}
#container .pc-area-left-contents-wrap .logo-switch {
  width: 25%;
  position: absolute;
  top: 0;
  left: 0;
}
#container .pc-area-left-contents-wrap .products-contents {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#container .pc-area-left-contents-wrap .products-contents .logo {
  margin-bottom: 0.625rem;
}
#container .pc-area-left-contents-wrap .products-contents .day {
  margin-bottom: 1.875rem;
}
#container .pc-area-left-contents-wrap .products-contents .grid {
  max-width: 34.375rem;
  width: 100%;
}
#container .pc-area-right {
  order: 3;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-left: solid 4px #fff;
  padding: 0 0rem;
  position: relative;
}
#container .pc-area-right::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(100, 181, 195, 0) 0%, rgba(100, 181, 195, 0) 97%, rgb(100, 181, 195) 100%);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}
#container .pc-area-right-contents {
  width: 100%;
  max-width: 43.75rem;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  padding-top: 5%;
}
@media screen and (max-width: 1600px) {
  #container .pc-area-right-contents {
    width: 100%;
  }
}
#container .pc-area-right-contents-menu {
  width: 100%;
  aspect-ratio: 802/752;
  background: url(../img/common/bg_menu.png) center center/contain no-repeat;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#container .pc-area-right-contents-menu .chara-list-item {
  position: absolute;
}
#container .pc-area-right-contents-menu .chara-list-item:nth-of-type(1) {
  top: 0;
  left: 0;
  width: 35%;
  max-width: 200px;
  transform: translate(30%, -65%);
}
#container .pc-area-right-contents-menu .chara-list-item:nth-of-type(1) img {
  transition-delay: 100ms;
}
#container .pc-area-right-contents-menu .chara-list-item:nth-of-type(2) {
  top: 0;
  right: 0;
  width: 28%;
  max-width: 160px;
  transform: translate(-15%, -30%);
}
#container .pc-area-right-contents-menu .chara-list-item:nth-of-type(2) img {
  transition-delay: 200ms;
}
#container .pc-area-right-contents-menu .chara-list-item:nth-of-type(3) {
  bottom: 0;
  right: 0;
  width: 24%;
  max-width: 120px;
  transform: translate(-65%, 30%);
}
#container .pc-area-right-contents-menu .chara-list-item:nth-of-type(3) img {
  transition-delay: 300ms;
}
#container .pc-area-right-contents-menu .chara-list-item img {
  transition: opacity 500ms cubic-bezier(0.69, 0.59, 0, 1.01) 200ms, transform 500ms cubic-bezier(0.67, 1.9, 0.52, 1) 200ms;
  opacity: 0;
  transform: translate(0, 50%) scale(0.5);
}
body.partnerActive #container .pc-area-right-contents-menu .chara-list-item img {
  opacity: 1;
  transform: translate(0, 0%) scale(1);
}
#container .pc-area-right-contents-menu ul {
  width: auto;
  list-style: none;
  padding: 0rem 0 0 1em;
  color: #fff;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
  font-size: clamp(22px, 1.2vw, 24px);
}
@media screen and (max-width: 1600px) {
  #container .pc-area-right-contents-menu ul {
    font-size: clamp(12.5px, 1vw, 24px);
  }
}
#container .pc-area-right-contents-menu ul li {
  position: relative;
  line-height: 1.4;
  filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
}
#container .pc-area-right-contents-menu ul li:not(:last-child) {
  margin-bottom: 0.5em;
}
@media screen and (max-width: 1600px) {
  #container .pc-area-right-contents-menu ul li:not(:last-child) {
    margin-bottom: 1em;
  }
}
#container .pc-area-right-contents-menu ul li::before {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  position: absolute;
  top: -0.3em;
  left: 1em;
  transform: translate(-150%, 0);
  background: url(../img/common/icon_ball_menu.png) center center/contain;
}
#container .pc-area-right-contents-menu ul li a {
  transition: all 300ms ease;
}
#container .pc-area-right-contents-menu ul li a:hover {
  filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.8));
}
#container .pc-area-right-contents-menu ul li a br {
  display: none;
}
#container .pc-area-right-contents-menu ul li span {
  padding-right: 0;
  padding-top: 0.2em;
}
@media screen and (max-width: 1600px) {
  #container .pc-area-right-contents .item {
    width: 18.6666666667vw;
  }
}
#container main {
  background: url(../img/common/bg_base_2.png) top center/100% auto repeat-y;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 900px) {
  #container main {
    overflow: hidden;
  }
}
#container main::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
/* 
================================================================================
contents
================================================================================
*/
section h2,
section h3,
section h4,
section h5 {
  margin: 0 auto;
}
section p.read {
  margin-top: 0;
  font-size: 1.75rem;
  line-height: 2.3;
}
section#kv {
  position: relative;
  padding-top: 7.5rem;
  min-height: 85rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
}
section#kv .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}
section#kv .bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 111.9375rem;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/contents/kv/bg.png) center top/100% auto no-repeat;
  transform-origin: bottom center;
  transition: all 800ms ease-in-out;
  mask-image: linear-gradient(to bottom, transparent, black 0%, black 96%, transparent);
  mask-mode: match-source;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
@media screen and (max-width: 1200px) {
  section#kv .bg::before {
    background-size: 100% auto;
  }
}
section#kv .item {
  transition: opacity 500ms cubic-bezier(0.69, 0.59, 0, 1.01) 200ms, transform 500ms cubic-bezier(0.67, 1.9, 0.52, 1) 200ms;
  transform-origin: bottom center;
}
section#kv .item:nth-of-type(1) {
  width: 25rem;
  margin-bottom: -1.25rem;
  transition-delay: 800ms;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}
section#kv .item:nth-of-type(2) {
  width: 25rem;
  margin-bottom: 32.5rem;
  transition-delay: 850ms;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}
section#kv .item:nth-of-type(3) {
  width: 35rem;
  margin-bottom: 1.25rem;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.91, 1.21, 0.36, 1.11);
  transition-delay: 1500ms;
}
section#kv .item:nth-of-type(3) .logo {
  animation-play-state: running;
  animation-delay: 1500ms;
}
section#kv .item:nth-of-type(3) .flash {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: blur(5px);
  animation: logo-za-flash 1200ms ease-in-out forwards;
  animation-play-state: running;
  animation-delay: 1600ms;
}
section#kv .item:nth-of-type(4) {
  width: 35.625rem;
  margin-bottom: 2.5rem;
  transition-delay: 2200ms;
}
section#kv .item:nth-of-type(5) {
  transition-delay: 2300ms;
}
@media screen and (max-width: 1200px) {
  section#kv .item:nth-of-type(5) {
    left: 12.5rem;
  }
}
section#kv.onView.is--stby .bg::before {
  opacity: 0;
  transform: translate(0, 18.75rem) scale(1.2) rotate(0deg);
}
section#kv.onView.is--stby .item {
  opacity: 0;
}
section#kv.onView.is--stby .item:nth-of-type(1) {
  transform: translate(20%, 0rem) scale(0.9);
}
section#kv.onView.is--stby .item:nth-of-type(2) {
  transform: translate(-20%, 0rem) scale(0.9);
}
section#kv.onView.is--stby .item:nth-of-type(3) {
  transform: translate(0, 0rem) scale(1.4);
}
section#kv.onView.is--stby .item:nth-of-type(3) .logo {
  animation-play-state: paused;
}
section#kv.onView.is--stby .item:nth-of-type(3) .flash {
  opacity: 0;
  animation-play-state: paused;
}
section#kv.onView.is--stby .item:nth-of-type(4) {
  transform: translate(0, 3.75rem) scale(0.9);
}
section#kv.onView.is--stby .item:nth-of-type(5) {
  transform: translate(0, 3.75rem) scale(0.9);
}
section#kv.onView.is--stby .item.entry-action .btn-shape {
  opacity: 0;
}
section#storebox {
  padding-bottom: 0rem;
}
section#storebox h2 {
  margin-bottom: 3.75rem;
}
section#storebox h2 img {
  width: 38.75rem;
}
section#storebox .deco-line {
  margin-bottom: 3.125rem;
}
section#storebox p.color-white {
  margin-bottom: 2em;
}
section#city {
  position: relative;
  padding-top: 8.75rem;
  padding-bottom: 1.875rem;
  z-index: 3;
}
section#city::before {
  content: "";
  display: block;
  width: 100%;
  height: 111.9375rem;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/contents/city/bg.png) center top/600px auto;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  section#city::before {
    background-size: 100% auto;
  }
}
section#city h2 {
  position: relative;
  z-index: 5;
}
section#city h2 .title {
  width: 37.5rem;
  margin-bottom: -1.875rem;
}
section#city .read {
  position: relative;
  z-index: 5;
  padding-top: 1.25rem;
  margin-bottom: 5.625rem;
  line-height: 2.45;
}
section#city .section-inframe {
  position: relative;
  z-index: 5;
}
section#city .cycle-gallery {
  display: flex;
  width: fit-content;
  height: 25rem;
  animation: belt-scroll 40s linear infinite;
}
section#city .cycle-gallery-image {
  height: 25rem;
  aspect-ratio: 4272/400;
  background: url(../img/contents/city/cycle.png) 0 center/cover;
}
section#partner {
  z-index: 2;
  padding-top: 12.5rem;
  padding-bottom: 4.375rem;
  margin-bottom: 6.25rem;
}
section#partner h2.label-base {
  margin-bottom: -5rem;
}
section#partner .all {
  margin-bottom: 1.875rem;
}
section#partner .chara-list-item {
  margin-bottom: 5rem;
}
section#partner .chara-list-item h3.label-base {
  margin-bottom: 1.875rem;
}
section#partner .chara-list-item h3.label-base img {
  width: auto;
  max-width: none;
  max-height: none;
  height: 5rem;
}
section#partner .chara-list-item:nth-of-type(1) .chara-list-item-image img {
  width: 28.125rem;
  margin: -5rem 0rem 0rem 5rem;
}
section#partner .chara-list-item:nth-of-type(2) .chara-list-item-image img {
  width: 23.125rem;
  margin: -1.25rem 0rem 0rem 1.25rem;
}
section#partner .chara-list-item:nth-of-type(3) .chara-list-item-image img {
  width: 18.75rem;
  margin: -1.5625rem 0rem 0rem 0rem;
}
section#mega-shinka {
  position: relative;
}
section#mega-shinka::before {
  content: "";
  display: block;
  width: 100%;
  height: 99.4375rem;
  position: absolute;
  top: 8.125rem;
  left: 0;
  background: url(../img/contents/mega/bg.png) center top/100% auto no-repeat;
  z-index: -1;
}
section#mega-shinka h3 {
  margin-bottom: 0.625rem;
}
section#mega-shinka p {
  margin-top: 0;
  font-size: 1.875rem;
  margin-bottom: 4.375rem;
}
section#mega-shinka .section-slide.box-slide {
  padding: 2.8125rem 2.5rem 2.5rem;
  background: url(../img/contents/mega/bg_box.png) center center/auto 100% repeat-x;
  border-radius: 1.25rem 6.25rem 1.25rem 6.25rem;
  margin-bottom: 7.5rem;
}
section#mega-shinka .section-slide.box-slide::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: solid 2px rgba(255, 255, 255, 0.5);
  border-radius: 1.25rem 6.25rem 1.25rem 6.25rem;
  z-index: 1;
}
section#mega-shinka .section-slide.box-slide p {
  font-size: 2rem;
  text-align: left;
  margin-bottom: 1.875rem;
}
section#mega-shinka .section-slide.box-slide .swiperUnit .swiperWrap .swiper {
  width: 35.625rem;
}
section#mega-shinka .section-slide.box-slide .swiperUnit .swiperWrap .swiper-wrapper .swiper-slide-contents {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 2.5rem;
}
section#mega-shinka .section-slide.box-slide .swiperUnit .swiperWrap .swiper-pagination {
  bottom: 0.625rem;
}
section#mega-shinka .section-slide.box-slide .swiperUnit .swiperWrap .swiper-button-prev,
section#mega-shinka .section-slide.box-slide .swiperUnit .swiperWrap .swiper-rtl .swiper-button-next {
  left: -4.375rem;
  top: 7.5rem;
}
section#mega-shinka .section-slide.box-slide .swiperUnit .swiperWrap .swiper-button-next,
section#mega-shinka .section-slide.box-slide .swiperUnit .swiperWrap .swiper-rtl .swiper-button-prev {
  right: -4.375rem;
  top: 7.5rem;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap {
  overflow: hidden;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper {
  width: 42.75rem;
  overflow: visible;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-wrapper .swiper-slide-contents {
  background: none;
  width: 100%;
  height: 35.625rem;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-wrapper .swiper-slide-contents .swiper-slide-contents-label {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-wrapper .swiper-slide-contents .swiper-slide-contents-item {
  width: 100%;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-wrapper .swiper-slide-contents .swiper-slide-contents-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1368/864;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-button-next,
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-button-prev {
  top: 11.25rem;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-button-next {
  right: -0.625rem;
}
section#mega-shinka .section-slide.card-slide .swiperUnit .swiperWrap .swiper-button-prev {
  left: -0.625rem;
}
section#mega-shinka .section-inframe-unit:nth-of-type(1) .label-base {
  margin-bottom: 57.5rem;
}
section#mega-shinka .section-inframe-unit:nth-of-type(2) {
  color: #fff;
}
section#mega-shinka .section-inframe-unit:nth-of-type(2) .label-base {
  margin-bottom: 1.25rem;
}
section#mega-shinka .section-inframe-unit:nth-of-type(2) .card-slide {
  overflow: hidden;
  width: 46.875rem;
  left: 50%;
  transform: translate(-23.4375rem, 0);
}
section#mega-shinka .section-inframe-unit:nth-of-type(2) .card-slide .swiperWrap {
  overflow: visible;
}
section#products {
  padding-top: 8.125rem;
  margin-bottom: 12.5rem;
}
section#products .products-contents {
  padding: 3.75rem 2.5rem 3.75rem;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 1.25rem;
}
section#products .products-contents h2 {
  width: 25rem;
}
section#products .products-contents .grid {
  grid-gap: 3.75rem;
}
section#tokuten {
  padding-top: 1.25rem;
  padding-bottom: 9.375rem;
}
section#tokuten h2 {
  width: 37.5rem;
  margin-bottom: 4.375rem;
}
section#tokuten .deco-line {
  margin-bottom: 3.125rem;
}
section#tokuten p.color-white {
  margin-bottom: 2em;
}
section#spec {
  background-color: #fff;
  padding-top: 6.25rem;
  padding-bottom: 10rem;
}
section#spec h2 {
  width: 16.25rem;
  margin-bottom: 1.25rem;
}
section#spec dl {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-gap: 0rem;
}
section#spec dl dt,
section#spec dl dd {
  padding: 0.625rem 0;
  margin: 0;
}
section#spec dl dt {
  border-bottom: solid 4px #42afe3;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0;
}
@media screen and (max-width: 1200px) {
  section#spec dl dt {
    font-size: 3.2vw;
  }
}
section#spec dl dd {
  border-bottom: solid 4px #c6e7f7;
  padding-left: 1.25rem;
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
  line-height: 1.8;
  font-size: 1.125rem;
}
@media screen and (max-width: 1200px) {
  section#spec dl dd {
    font-size: 2.9333333333vw;
  }
}
section#spec dl dd small {
  line-height: 1.4;
  display: inline-block;
}

/* 
================================================================================
loader
================================================================================
*/
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #bcdef2;
  z-index: 50000;
  transition: all 1000ms ease;
}
body.loadingFinish #loader {
  opacity: 0;
  pointer-events: none;
}
#loader #loadingAnim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  transition: all 150ms ease;
}
body.loadingAnimFinish #loader #loadingAnim {
  opacity: 0;
}
#loader #loadingCircle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.25rem;
  height: auto;
  transition: all 800ms ease;
}
body.loaderOut #loader #loadingCircle {
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: blur(5px);
}
#loader #loadingCircle::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 227/164;
}

@keyframes loading_circle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes loading_popup {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.8rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes belt-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes logo-flash {
  0% {
    filter: brightness(1);
  }
  10% {
    filter: brightness(2);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes logo-za-flash {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}