@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes fadeInAndTop {
  to {
    opacity: 1;
    top: 0;
  }
}
@keyframes swap {
  0%,
  49.99% {
    visibility: visible;
  }
  50%,
  100% {
    visibility: hidden;
  }
}
html,
body,
h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
}
a {
  color: inherit;
}
img {
  border: 0;
  vertical-align: top;
  max-width: 100%;
  height: auto;
}
svg {
  vertical-align: top;
}
ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
* {
  box-sizing: border-box;
}
button {
  padding: 0;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  cursor: pointer;
  color: inherit;
}
label {
  cursor: pointer;
}
html {
  overscroll-behavior: none;
}
body {
  color: #000;
  font-family: 'M PLUS 1p', sans-serif;
  font-size: 16px;
  line-height: 1;
  display: flex;
  flex-flow: column;
  min-height: 100dvh;
  min-width: 375px;
  background: #d4d4d4;
  overscroll-behavior: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar {
  display: none;
}
body.hidden {
  overflow: hidden;
}
.main {
  height: 100dvh;
  overflow: auto;
  overscroll-behavior: none;
  background: #eee;
}
.main[data-path='/training'] {
  overflow: hidden;
}
.main[data-path='/training'].open {
  overflow: auto;
}
.main::-webkit-scrollbar {
  display: none;
}
.mainInner {
  position: relative;
  max-width: 430px;
  margin: auto;
}
.modalLoading {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: #00000080;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  top: 0;
  left: 0;
}
.pageLoading {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: #e7f5f3ed;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  top: 0;
  left: 0;
}
.pageLoading.show,
._loading .modalLoading {
  display: flex;
}
.pageLoading.show img,
._loading .modalLoading img,
._record_loading .recordLoading img,
.enterCodeQr img.loadingGif {
  animation: rotating 1s linear infinite;
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* parts */
.button {
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, #f0ad00 0%, #fedc01 100%);
  border: 3px solid #846319;
  box-shadow: 0px 4px 0px 0px #967533cc;
  font-size: 24px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  border-radius: 12px;
  height: 60px;
  cursor: pointer;
  text-decoration: none;
  text-shadow:
    -1px -1px 2px #846319,
    1px 1px 2px #846319,
    1px 1px 2px #846319,
    -1px -1px 2px #846319;
}
.buttonWrap {
  width: 100%;
  display: block;
}
.button:disabled {
  opacity: 0.5;
  cursor: default;
}
.bottom {
  display: flex;
  justify-content: center;
  margin: auto 0 0 0;
}
.bottomButtons {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 8px;
}
.bottomButton {
  width: 200px;
}
.bottomLink {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #846319;
  text-decoration: none;
  margin: 16px 0 12px 0;
}
.formCheckbox input[type='checkbox'] {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}
.formCheckbox label {
  display: flex;
  padding: 0 0 0 25px;
  width: 100%;
  min-height: 20px;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}
.formCheckbox label:after {
  content: '';
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227.5%22%20viewBox%3D%220%200%2010%207.5%22%3E%20%3Cpath%20id%3D%22check_2_%22%20data-name%3D%22check%20(2)%22%20d%3D%22M12.526%2C6.254a.709.709%2C0%2C0%2C0-.083-.869.652.652%2C0%2C0%2C0-.944%2C0L6.022%2C11.016%2C3.775%2C8.7a.652.652%2C0%2C0%2C0-.944%2C0%2C.7.7%2C0%2C0%2C0-.194.47q0%2C.018%2C0%2C.036a.7.7%2C0%2C0%2C0%2C.2.471l2.718%2C2.8a.652.652%2C0%2C0%2C0%2C.941%2C0L12.44%2C6.362A.691.691%2C0%2C0%2C0%2C12.526%2C6.254Z%22%20transform%3D%22translate(-2.637%20-5.181)%22%20fill%3D%22%23dbdada%22%2F%3E%3C%2Fsvg%3E')
    no-repeat;
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 5px;
  width: 12px;
  height: 10px;
  margin: auto;
}
.formCheckbox label:before {
  content: '';
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: block;
  border: 1px solid #000;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.formCheckbox input:checked + label:before {
  background: #bba15c;
}
.formCheckbox input:checked + label:after {
  content: '';
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%227.5%22%20viewBox%3D%220%200%2010%207.5%22%3E%20%3Cpath%20id%3D%22check_2_%22%20data-name%3D%22check%20(2)%22%20d%3D%22M12.526%2C6.254a.709.709%2C0%2C0%2C0-.083-.869.652.652%2C0%2C0%2C0-.944%2C0L6.022%2C11.016%2C3.775%2C8.7a.652.652%2C0%2C0%2C0-.944%2C0%2C.7.7%2C0%2C0%2C0-.194.47q0%2C.018%2C0%2C.036a.7.7%2C0%2C0%2C0%2C.2.471l2.718%2C2.8a.652.652%2C0%2C0%2C0%2C.941%2C0L12.44%2C6.362A.691.691%2C0%2C0%2C0%2C12.526%2C6.254Z%22%20transform%3D%22translate(-2.637%20-5.181)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E')
    no-repeat;
  position: absolute;
  top: 3px;
  bottom: 0;
  left: 5px;
  width: 12px;
  height: 10px;
  margin: auto;
}
.label {
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  margin: 0 0 8px 0;
  display: flex;
  align-items: flex-end;
}
.input {
  text-indent: 10px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.2;
  border: 1px solid #000;
  height: 44px;
  width: 100%;
  background: #fff;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}
.inputMessage {
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0 0;
  display: flex;
}
.inputMessages {
  margin: 8px 0 0 0;
}
.inputMessages .inputMessage {
  margin: 0;
}
.inputErrorMessage {
  font-size: 12px;
  line-height: 1.4;
  color: #eb4667;
  margin: 8px 0 0 0;
  white-space: break-spaces;
}
.inputPasswordBlock {
  position: relative;
}
.inputPasswordShow {
  position: absolute;
  right: 10px;
  top: 11px;
  border: none;
  width: 22px;
  height: 22px;
  background: url(../img/password-off-icon.svg) no-repeat center center;
}
.inputPasswordShow.on {
  background: url(../img/password-on-icon.svg) no-repeat center center;
}
.guideLayer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  z-index: 10000;
}
.guideLayer.show {
  display: block;
}
.guideFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 103.05%
  );
  z-index: 1;
}
.guideFooter.hide {
  display: none;
}
.guideFooterInner {
  max-width: 430px;
  height: 80px;
  margin: auto;
  position: relative;
}
.guideFooterCharacter {
  position: absolute;
  left: 4px;
  bottom: 16px;
  overflow: hidden;
  height: 90px;
  transition: all 0.5s;
}
.guideFooterCharacter.up {
  height: 122px;
}
.exitButton {
  width: 240px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 48px;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  margin: 16px 16px 16px auto;
  color: #fff;
  background: linear-gradient(318deg, #f0ad00 16%, #fedc01 88%);
  box-shadow:
    0px 0px 3px 0px #5a5a5ab2,
    -1.5px -1.5px 3px 0px #ffffff80 inset;
  text-shadow:
    -1px -1px 2px #846319,
    1px 1px 2px #846319,
    1px 1px 2px #846319,
    -1px -1px 2px #846319;
}
.exitButton img {
  position: relative;
  top: -2px;
  width: 24px;
}
.exitConfirmModal {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
  top: 0;
  left: 0;
}
.exitConfirmModal.show {
  display: flex;
}
.exitConfirmModalContent {
  padding: 36px 12px 24px 12px;
  border-radius: 20px;
  background: #fff;
}
.exitConfirmModalContent p {
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
}
.exitConfirmModalButtons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 0 0;
}
.exitConfirmContinue {
  width: 160px;
  height: 54px;
  border-radius: 12px;
  border: 1px solid #000;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 0 4px 0 0;
}
.exitConfirmEnd {
  width: 160px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 4px;
  background: #fcdd3c;
  font-size: 20px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: 0.05em;
}
.footerMenu {
  width: 100%;
  height: 58px;
  position: fixed;
  bottom: 0;
  left: 0;
  filter: drop-shadow(0px -4px 4px #0000001a);
  background: #fff;
  z-index: 100;
}
.footerMenuList {
  max-width: 430px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.footerMenuList::before {
  content: '';
  width: 84px;
  height: 42px;
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 84px;
  background: #fff;
  border-radius: 50% / 42px 42px 0 0;
}
.footerMenuList li a {
  display: block;
  cursor: pointer;
  position: relative;
}
.footerMenuList li.current path[stroke='#747474'] {
  stroke: #c7985a;
}
.footerMenuList li.current path[fill='#747474'] {
  fill: #c7985a;
}
.suggest {
  border-radius: 20px 20px 0 0;
  background: #fff;
  padding: 24px 0 0 0;
  box-shadow: 0px -4px 4px 0px #00000033;
  position: relative;
  height: calc(100dvh - 210px - 64px);
}
@media screen and (max-height: 600px) {
  .suggest {
    height: calc(100dvh - 185px - 64px);
  }
}
.suggestTitle {
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
}
.suggestImg {
  display: block;
  width: 214px;
  margin: 0 auto 6px auto;
}
.suggestButton {
  width: 264px;
  margin: 0 auto;
}
.challengeHeader {
  background: #e7f5f3;
  padding: 0 0 2px 0;
  position: sticky;
  top: 0;
}
.challengeHead {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  line-height: 31px;
  letter-spacing: 0.08em;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0 #84631940;
  position: relative;
  background: url(../img/challenge-header.png) no-repeat;
  background-size: 100%;
  margin: 0 0 -10px 0;
}
.challengeContents {
  border-radius: 20px 20px 0 0;
  padding: 12px 16px 80px 16px;
  background: #fed401;
  box-shadow: 0px -4px 10px 0px #00000033;
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - 92px);
}
.challengeTab {
  background: #0000004d;
  padding: 4px;
  border-radius: 46px;
  width: 100%;
  height: 46px;
  display: flex;
  margin: 0 0 12px 0;
}
.challengeTab button {
  width: 100%;
  height: 38px;
  border-radius: 38px;
  font-size: 12px;
  font-weight: 800;
  line-height: 17px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.challengeTab button.active {
  background: #000;
}
.challengeContent {
  display: none;
  background: #fff;
  border-radius: 10px;
  padding: 24px 16px;
}
.challengeContent.collection {
  background: #394a4a;
  padding: 8px 8px 9px 8px;
}
.challengeContent.active {
  display: block;
}
.challengeContentHead {
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  display: flex;
  align-items: center;
  margin: 0 0 8px 0;
}
.challengeContentHead img {
  margin: 0 4px 0 0;
}
.challengeList {
  display: flex;
  margin: 0 -16px 24px -16px;
  padding: 0 0 0 16px;
  overflow: auto;
}
.challengeList.complete {
  flex-wrap: wrap;
  padding: 0 16px;
}
.challengeList.complete li {
  width: calc(100% / 3);
  margin: 0 0 16px 0;
}
.challengeList.complete li:last-child {
  margin: 0 0 16px 0;
}
.challengeList:last-child {
  margin: 0 -16px;
}
.challengeList::-webkit-scrollbar {
  display: none;
}
.challengeList li {
  width: 100px;
  min-width: 100px;
  margin: 0 6px 0 0;
}
.challengeList li.nextAcquired,
.challengeList li.notAcquired {
  display: none;
}
.challengeList li:last-child {
  margin: 0;
}
.challengeList li img {
  width: 100px;
  min-height: 100px;
  display: block;
  margin: 0 auto 4px auto;
}
.challengeText1 {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin: 0 -10px;
  white-space: nowrap;
}
.challengeText2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  margin: 0 -10px;
  white-space: nowrap;
}
.challengeContentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 4px 0;
}
.challengeContentHead2 {
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  color: #fff;
  display: flex;
  align-items: center;
}
.challengeContentHead2 img {
  margin: 0 4px 0 0;
}
.challengeContentNumber {
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
}
.challengeContentNumber .num1 {
  font-family: 'Rammetto One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: #fff;
  margin: 0 4px 0 0;
}
.challengeContentNumber .num2 {
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  color: #fff;
  margin: 0 4px 0 0;
}
.challengeContentNumber .num3 {
  color: #888;
}
.challengeContentText1 {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  margin: 0 0 8px 20px;
  color: #ccc;
}
.challengeNote {
  margin: 12px 0 0 0;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}
.collectionBoard {
  border-top: 22px solid #7b9091;
  border-left: 22px solid #526667;
  border-right: 22px solid #526667;
  border-bottom: 56px solid #7b9091;
  margin: 0 0 8px 0;
}
.collectionBoard:last-child {
  margin: 0;
}
.collectionBoardInner {
  margin: 0 -22px -56px -22px;
}
[data-badge] {
  cursor: pointer;
}
.collectionBoardList {
  display: flex;
  padding: 0 0 8px 0;
  margin: 0 auto;
  width: 300px;
}
.collectionBoardList li {
  position: relative;
  width: 88px;
  margin: 0 6px;
}
.collectionBoardList li::before {
  content: '';
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  margin: auto;
  width: 80px;
  height: 12px;
  background: url(../img/collection/shadow.svg) no-repeat;
}
.collectionBoardList li img {
  position: relative;
  left: -3px;
  width: 88px;
  min-height: 132px;
}
.collectionBoardList li:has(img[data-gym-status='rgg_COMING_SOON'])::after {
  content: 'COMING SOON';
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  position: absolute;
  inset: -30px 0 0 0;
  margin: auto;
  height: 20px;
  width: 50px;
  text-align: center;
  opacity: 0.3;
  pointer-events: none;
}
.collectionText1 {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
  width: 88px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 4px;
  margin: 8px 0 0 0;
}
.challengeBadgeModal {
  background: #434343;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1000;
  display: none;
}
.challengeBadgeModal.show {
  display: block;
}
.challengeBadgeModalInner {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
  max-width: 430px;
  position: relative;
  margin: auto;
}
.challengeBadgeContent {
  max-width: 430px;
  padding: 76px 0 20px 0;
  margin: 0 auto;
  background: url(/img/modal-bg2.svg) no-repeat center top;
}
.challengeBadgeContentInner {
  opacity: 0;
  animation: fadeIn 0.1s forwards 0.5s;
  text-align: center;
  position: relative;
  z-index: 10;
}
.challengeBadgeContentBadge {
  margin: 0 auto;
  background: url(/img/modal-badge-bg2.png) no-repeat center center;
  background-size: 253px 253px;
  width: 270px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.challengeBadgeContentBadge img {
  width: 244px;
  height: 245px;
  object-fit: contain;
}
.challengeBadgeDate {
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: #fed401;
  background: #000;
  display: inline-flex;
  padding: 0 8px;
  height: 22px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  margin: 46px auto 10px auto;
}
.challengeBadgeText1 {
  font-size: 24px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fed401;
}
.challengeBadgeText2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: #fff;
  margin: 16px 0 0 0;
}
.buttonClose {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
  z-index: 100;
}
.challengeBadgeCount {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 0 0;
}
.challengeBadgeCount.hide {
  display: none;
}
.challengeBadgeCount li {
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  color: #000;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  background: #dadada;
  cursor: pointer;
}
.challengeBadgeCount li.acquisition {
  background: #fed401;
}
.challengeBadgeCount li.active {
  box-shadow: 0 0 0 4px #000;
}
.result {
  background: #e7f5f3;
  flex-flow: column;
  display: flex;
  min-height: 100vh;
}
.resultHeader {
  background: url(../img/result-header-bg.png) no-repeat;
  background-size: cover;
  height: 190px;
  display: flex;
  align-items: flex-start;
  margin: 0 0 -82px 0;
  position: sticky;
  top: 0;
}
.resultHeader img {
  margin: 0 6px 0 auto;
}
.resultContainer {
  background: #e7f5f3;
  position: relative;
}
.resultHeaderText {
  font-size: 28px;
  font-weight: 900;
  line-height: 28px;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  position: absolute;
  top: 20px;
  left: 20px;
  text-shadow: 1px 1px 0px #84631940;
}
.resultHeaderText span {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.08em;
  margin: 0 0 4px 0;
  display: inline-block;
  -webkit-text-stroke: 1px #846319;
}
.resultCard {
  position: relative;
  box-shadow: 0px -4px 4px 0px #00000033;
  border-radius: 20px;
  flex: 1;
}
.resultCard.type1 {
  background: linear-gradient(180deg, #f55b5b 0%, #cc1c1c 36.92%);
}
.resultCard.type2 {
  background: linear-gradient(180deg, #5aceff 0%, #1c94e2 36.92%);
}
.resultCard.type3 {
  background: linear-gradient(180deg, #ffc52f 0%, #dc8308 36.92%);
}
.resultCardHeader {
  padding: 24px 10px 24px 28px;
}
.type1 .resultCardHeader {
  background: url(../img/card-category-header-1.svg) no-repeat right top;
}
.type2 .resultCardHeader {
  background: url(../img/card-category-header-2.svg) no-repeat right top;
}
.type3 .resultCardHeader {
  background: url(../img/card-category-header-3.svg) no-repeat right top;
}
.resultCardType {
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  color: #fff;
  margin: 0 4px 0 0;
  display: flex;
  align-items: center;
}
.resultCardType span {
  display: inline-flex;
  align-items: center;
  height: 16px;
  border-radius: 16px;
  padding: 0 8px;
  font-family: 'Rammetto One', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0 0 0 8px;
}
.type1 .resultCardType span {
  background: #e33939;
}
.type2 .resultCardType span {
  background: #1c94e2;
}
.type3 .resultCardType span {
  background: #f39c24;
}
.resultCardTitle {
  font-size: 24px;
  font-weight: 800;
  line-height: 31px;
  color: #fff;
  margin: 0 0 8px 0;
}
.resultCardOverview {
  display: none;
  align-items: center;
}
.resultCardOverview.active {
  display: flex;
}
.resultCardOverview li {
  margin: 0 10px 0 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #fff;
}
.resultCardOverview li img {
  margin: 0 4px 0 0;
}
.resultCardBody {
  padding: 0 8px 8px 8px;
}
.resultCardInner {
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 32px 16px;
}
.tabs {
  display: flex;
  padding: 0 0 10px 0;
  margin: 0 0 4px 0;
  border-bottom: 1px solid #000;
}
.tabs[data-length='1'] {
  display: none;
}
.tabs button {
  height: 29px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px 0 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  border-radius: 4px;
  border: none;
}
.tabs button.active {
  background: #000;
  color: #fff;
}
.resultCardMenu {
  margin: 0 0 24px 0;
}
.resultCardMenu li {
  padding: 8px 4px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dedede;
}
.resultCardMenu li img {
  width: 48px;
  min-width: 48px;
  height: 48px;
  object-fit: cover;
  margin: 0 8px 0 0;
  border-radius: 8px;
  overflow: hidden;
}
.resultCardMenu li > span {
  width: 48px;
  min-width: 48px;
  height: 48px;
  margin: 0 8px 0 0;
  border-radius: 8px;
  background: #ccc;
}
.resultCardMenuTitle {
  font-size: 16px;
  font-weight: 800;
  line-height: 23px;
}
.resultCardMenuOverview {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: #888;
}
.resultCardComment {
  font-family: 'Mouse Memoirs', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
  overflow: hidden;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 50%,
      #fff 0%,
      #fff 100%
    ),
    linear-gradient(180deg, #fff 0%, #fff 97%, #c3c3c3 97%, #c3c3c3 100%);
  background-size:
    6px 100%,
    100% 32px;
}
.resultCardExplanation {
  margin: 24px 0 0;
}
.resultCardExplanationHead {
  font-size: 16px;
  font-weight: 800;
  line-height: 19px;
  margin: 0 0 8px 0;
}
.resultCardExplanationText {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin: 0 0 12px 0;
}
.resultCardExplanationMovie {
  width: 100%;
  position: relative;
}
.resultCardExplanationMovie img {
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #000;
}
.resultCardExplanationMovie::after {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  inset: 0;
  margin: auto;
  cursor: pointer;
  background: url(../img/icon-movie.svg) no-repeat;
}
.share {
  padding: 24px 0;
}
.shareHead {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 16px 0;
}
.shareLinks {
  display: flex;
  justify-content: center;
}
.shareLinks a {
  margin: 0 8px;
}
.resultStartButton {
  width: 335px;
  margin: 0 auto 32px auto;
}
.againLink {
  display: flex;
  justify-content: center;
}
.againLink a {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #846319;
  text-decoration: none;
}
.againLink img {
  margin: 0 4px 0 0;
}
.trainer {
  margin: 40px 0 0 0;
  padding: 24px 24px 42px 24px;
  background: #777;
}
.trainerHead {
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  color: #fff;
  margin: 0 0 24px 0;
}
.trainerProfile {
  display: flex;
  align-items: flex-start;
}
.trainerProfile img {
  width: 120px;
  margin: 0 20px 0 0;
}
.trainerProfileText1 {
  font-size: 14px;
  font-weight: 800;
  line-height: 16px;
  color: #fff;
  margin: 0 0 8px 0;
}
.trainerProfileText2 {
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  color: #fff;
}
.trainerProfileText3 {
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  color: #fff;
  margin: 0 0 16px 0;
}
.trainerProfileText4 {
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  color: #fff;
  padding: 0 0 0 10px;
  border-left: 2px solid #fff;
}
.trainerOverview {
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  color: #fff;
  margin: 20px 0 0 0;
}
.diagnosis {
  background: #e7f5f3;
  flex-flow: column;
  display: flex;
  height: 100dvh;
  position: relative;
}
.diagnosis.hide {
  display: none;
}
.menuCreate {
  background: #e7f5f3;
  display: none;
  min-height: 100dvh;
  position: relative;
}
.menuCreate.show {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.menuCreateHeader {
  display: flex;
  align-items: center;
  padding: 16px;
}
.menuCreateHeader a,
.menuCreateHeader button {
  margin: 0 16px 0 0;
}
.meter {
  border-radius: 20px;
  width: 100%;
  height: 16px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.meter span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #fed401;
  width: 0;
  transition: width 0.5s;
}
.step {
  font-family: 'Rammetto One', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
  margin: 0 0 0 8px;
  white-space: nowrap;
}
[data-step] > h3 {
  font-family: 'Rammetto One', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0.08em;
  text-align: center;
  color: #846319;
  margin: 0 0 8px 0;
}
[data-step] > p {
  font-size: 24px;
  font-weight: 900;
  line-height: 33px;
  letter-spacing: 0.08em;
  text-align: center;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  margin: 0 0 16px 0;
  text-shadow: 1px 1px 0px #84631940;
}
[data-step] {
  display: none;
}
[data-current-step='1'] [data-step='1'] {
  display: block;
}
[data-current-step='2'] [data-step='2'] {
  display: block;
}
[data-current-step='3'] [data-step='3'] {
  display: block;
}
[data-current-step='4'] [data-step='4'] {
  display: block;
}
[data-step] ul {
  margin: 0 20px;
}
[data-step] ul li {
  margin: 0 0 12px 0;
}
[data-step-1-a] {
  display: none;
}
[data-step-1-a].active {
  display: block;
}
[data-step-2-a] {
  display: none;
}
[data-step-2-a].active {
  display: block;
}
.bodyHeightWeight div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 12px 0;
}
.bodyHeightWeight div input {
  font-family: inherit;
  width: 180px;
  height: 80px;
  border: 2px solid #b6b6b6;
  border-radius: 8px;
  font-size: 28px;
  font-weight: 800;
  line-height: 22px;
  text-align: right;
  padding: 0 20px;
  margin: 0 12px 0 20px;
  outline: none;
}
.bodyHeightWeight div span {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  width: 36px;
}
.steps input[type='radio'] {
  position: absolute;
  opacity: 0;
}
.steps label {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  width: 100%;
  height: 80px;
  background: #fff;
  border: 2px solid #b6b6b6;
  border-radius: 8px;
  cursor: pointer;
}
.steps label i {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #666;
  display: block;
}
.steps label:before {
  content: '';
  width: 28px;
  height: 28px;
  display: block;
  border: 2px solid #b6b6b6;
  background: #fff;
  border-radius: 28px;
  margin: 0 10px 0 12px;
  box-sizing: border-box;
}
.steps input[type='radio']:checked + label {
  border: 2px solid #846319;
  color: #846319;
}
.steps input[type='radio']:checked + label i {
  color: #666;
}
.steps input[type='radio']:checked + label:before {
  border: 2px solid #846319;
}
.steps input[type='radio']:checked + label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  bottom: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background: #846319;
}
.diagnosisPrevButton {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  outline: none;
  display: none;
}
.diagnosisPrevButton.show {
  display: block;
}
.diagnosisBackButton.hide {
  display: none;
}
.stepNumber::before {
  content: attr(data-step-number);
}
.menuCreateBlock {
  margin: 0 0 140px 0;
}
.menuCreateBlock p {
  font-size: 28px;
  font-weight: 800;
  line-height: 39px;
  letter-spacing: 0.1em;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  margin: 0 0 32px 0;
  text-align: center;
  text-shadow: 1px 1px 0px #84631940;
}
.menuCreateProgress {
  width: 303px;
  height: 16px;
  border-radius: 16px;
  background: #fff;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.menuCreateProgress span {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fed401;
  transition: width 0.1s;
}
.menuCreateAnimation {
  width: 176px;
  height: 208px;
  margin: auto;
  position: absolute;
  bottom: 43px;
  left: 0;
  right: 0;
  margin: auto;
}
.menuCreateAnimation img {
  position: absolute;
  inset: 0;
  margin: auto;
}
.menuCreateAnimation img:nth-child(1),
.menuCreateAnimation img:nth-child(2) {
  animation: swap 1s infinite;
}
.menuCreateAnimation img:nth-child(2) {
  visibility: hidden;
  animation-delay: 0.5s;
}
.menuCreateAnimation img:nth-child(3) {
  display: none;
}
.menuCreateAnimation.complete img {
  display: none;
}
.menuCreateAnimation.complete img:nth-child(3) {
  display: block;
}
.diagnosisBottom {
  width: 100%;
}
.enter {
  padding: 20px 0 88px 0;
  height: 100dvh;
  background: #e7f5f3;
}
.enterForm {
  background: #e7f5f3;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 430px;
  height: 100%;
  padding: 16px 16px 82px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.enterForm.hide {
  display: none;
}
.enterFormInner {
  border-radius: 20px;
  background: #fff;
  max-width: 343px;
  max-height: 100%;
  overflow: auto;
  margin: 0 auto;
  padding: 32px 20px 56px 20px;
}
.enterFormHead {
  font-size: 24px;
  font-weight: 800;
  line-height: 33px;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 16px 0;
}
.enterFormText {
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  margin: 0 0 24px 0;
}
.qrFormHead {
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  margin: 0 0 8px 0;
}
.qrFormInput {
  margin: 0 0 18px 0;
}
.qrFormCheckbox {
  margin: 0 0 22px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
}
.qrErrorMessage:empty {
  margin: 0;
}
.qrErrorMessage {
  font-size: 12px;
  line-height: 1.4;
  color: #eb4667;
  margin: -16px 0 8px 0;
  white-space: break-spaces;
}
.enterButton {
  max-width: 303px;
  width: 100%;
}
.forgotLink {
  margin: 24px 0 0 0;
  text-align: center;
}
.forgotLink a {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: #846319;
}
.enterCodeArea {
  width: 311px;
  height: 311px;
  border-radius: 20px;
  background: #fff;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}
.enterCodeTitle {
  font-size: 24px;
  font-weight: 800;
  line-height: 33px;
  letter-spacing: 0.08em;
  margin: 0 0 18px 0;
}
.enterCodeQr {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.enterCodeQr img.loadingGif {
  width: 32px;
  height: 32px;
}
.enterCodeQr img {
  width: 100%;
  height: 100%;
}
.enterCodeQrDate {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  height: 18px;
  text-align: center;
  margin: 25px 0 0 0;
}
.enterCodeText {
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  margin: 0 0 8px 0;
}
.enterCodeText span {
  font-size: 10px;
  opacity: 0.6;
}
.enterCodeImg {
  margin: 18px auto 0 auto;
  width: 110px;
  display: block;
}
.index {
  position: relative;
  overflow: hidden;
  background: #fff;
  min-height: 100dvh;
}
.index::before {
  content: '';
  width: 700px;
  height: 700px;
  top: 370px;
  left: -30px;
  position: absolute;
  transform: rotate(-15deg);
  background: #ffe45d;
  box-shadow: 0px -4px 8px 0px #0000001a;
  z-index: 1;
}
.inner {
  position: relative;
  z-index: 1;
  padding: 0 0 8px 0;
}
.top {
  height: 290px;
  background: url(../img/top-bg.png) no-repeat center bottom #d3f4ff80;
  background-size: cover;
  padding: 12px 0 0 0;
}
.logo {
  width: 343px;
  display: block;
  margin: 0 auto;
}
.character {
  width: 310px;
  margin: 0 auto;
  position: relative;
}
.characterText1 {
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  filter: drop-shadow(2px 2px 4px #00000033);
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  position: absolute;
  top: 36px;
  left: 0;
}
.characterText1::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 16px solid #fff;
  border-right: 16px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.characterText2 {
  position: absolute;
  top: 112px;
  left: 50px;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.characterText3 {
  position: absolute;
  top: 132px;
  left: 114px;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
}
.characterImg {
  width: 135px;
  display: block;
  margin: -22px -20px 0 auto;
}
.text {
  font-size: 24px;
  font-weight: 800;
  line-height: 31px;
  text-align: center;
  color: #846319;
  margin: 12px 0 16px 0;
}
.indexButton {
  width: 295px;
  margin: 0 auto;
}
.bottomText {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin: 18px 0 0 0;
  height: 36px;
  overflow: hidden;
}
.modalLayer {
  position: fixed;
  top: 0;
  left: 0;
  background: #00000080;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none;
}
.modalLayer.show {
  display: block;
}
.loginModal {
  max-width: 430px;
  width: 100%;
  height: 520px;
  max-height: 100vh;
  margin: 0 auto;
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  z-index: 10;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  transition: bottom 0.5s;
}
.loginModal.show {
  bottom: 0;
}
.loginModalIframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.profileHeader {
  background: #444;
  padding: 24px 24px 44px 24px;
  margin: 0 0 -20px 0;
  position: sticky;
  top: 0;
}
.profileHeaderText1 {
  font-size: 24px;
  font-weight: 800;
  line-height: 33px;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 4px 0;
}
.profileHeaderText2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
  margin: 0 0 20px 0;
}
.profileHeaderText3 {
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: #bba05b;
}
.profileHeaderText3 a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.profileHeaderText3 a img {
  margin: 0 0 0 6px;
}
.profileHeaderLogout {
  position: absolute;
  bottom: 48px;
  right: 24px;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  display: flex;
  align-items: center;
  color: #cccccc;
  text-decoration: none;
}
.profileHeaderLogout img {
  margin: 0 4px 0 0;
}
.profileHeaderImg {
  position: absolute;
  top: 14px;
  right: 10px;
}
.profileBody {
  border-radius: 20px 20px 0 0;
  background: #fff;
  position: relative;
  min-height: calc(100dvh - 205px);
  padding: 24px 20px 84px 20px;
  overflow: auto;
}
.profileBodyText1 {
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  margin: 0 0 12px 0;
}
.profileBodyData {
  display: flex;
  align-items: flex-start;
  margin: 0 -8px 24px -8px;
  position: relative;
}
.profileBody.show .profileBodyData {
  height: 188px;
}
.profileHeight::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% - 76px);
  width: 68px;
  height: 69px;
  background: url(/img/profile-icon-1.svg) no-repeat left top;
}
.profileWeight::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 8px;
  width: 48px;
  height: 69px;
  background: url(/img/profile-icon-2.svg) no-repeat left top;
}
.profileBodyCard {
  width: calc(50% - 8px);
  height: 85px;
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  margin: 0 8px;
}
.profileBodyCard.show {
  height: 100px;
}
.profileHeightEdit,
.profileWeightEdit {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  width: calc(100% - 16px);
}
.profileHeightEdit::before {
  content: '';
  position: absolute;
  width: calc(50% - 8px);
  height: 18px;
  background: #fff;
  left: 0;
  top: -10px;
}
.profileWeightEdit::before {
  content: '';
  position: absolute;
  width: calc(50% - 8px);
  height: 18px;
  background: #fff;
  right: 0;
  top: -10px;
}
.profileHeightEdit::after {
  content: '';
  position: absolute;
  top: -85px;
  left: calc(50% - 76px);
  width: 68px;
  height: 88px;
  background: url(/img/profile-icon-1.svg) no-repeat left top;
}
.profileWeightEdit::after {
  content: '';
  position: absolute;
  top: -85px;
  right: 0;
  width: 48px;
  height: 79px;
  background: url(/img/profile-icon-2.svg) no-repeat left top;
}
.profileHeight.show .profileHeightEdit,
.profileWeight.show .profileWeightEdit {
  display: flex;
}
.profileHeight.show .profileBodyEditButton,
.profileWeight.show .profileBodyEditButton {
  display: none;
}
.profileBodyDataNum {
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  margin: 0 0 4px 0;
  display: flex;
}
.profileBodyDataNum i {
  font-style: normal;
}
.profileBodyDataNum span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  margin: 10px 0 0 4px;
}
.profileBodyEditButton {
  width: 60px;
  height: 25px;
  border-radius: 25px;
  background: #fed401;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profileBodyDataForm {
  display: flex;
  width: 290px;
  padding: 16px 0;
  margin: 0 auto;
}
.profileBodyDataFormInput {
  display: flex;
  align-items: flex-end;
}
.profileBodyDataFormInput input {
  font-family: inherit;
  background: #efefed;
  border: 2px solid #000;
  border-radius: 4px;
  width: 156px;
  height: 55px;
  text-align: center;
  font-size: 24px;
  line-height: 26px;
  font-weight: 800;
  outline: none;
}
.profileBodyDataUnit {
  font-size: 14px;
  font-weight: 800;
  line-height: 16px;
  margin: 0 0 15px 4px;
}
.profileBodyDataFormButtons {
  margin: 0 0 0 24px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.profileBodyDataFormChange {
  width: 88px;
  height: 25px;
  background: #fed401;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  margin: 0 0 8px 0;
}
.profileBodyDataFormChange:disabled {
  opacity: 0.5;
}
.profileBodyDataFormCancel {
  background: none;
  border: none;
  outline: none;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}
.recommendedItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  margin: 0 0 8px 0;
  min-height: 62px;
  position: relative;
  padding: 12px 16px 12px 16px;
  box-shadow: 0px 0px 10px 0px #00000033;
}
.recommendedItem::before {
  content: '';
  width: 4px;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: 0;
}
.recommendedItem[data-item='筋力アップ']::before {
  background: #e45555;
}
.recommendedItem[data-item='ダイエット']::before {
  background: #5aceff;
}
.recommendedItem[data-item='健康維持']::before {
  background: #ffc52f;
}
.recommendedItem[data-item='スペシャルメニュー']::before {
  background: #cd5bf5;
}
.recommendedItemLink {
  width: 60px;
  height: 25px;
  background: #fed401;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  margin: 0 0 0 auto;
  text-decoration: none;
}
.recommendedItemContent {
  flex: 1;
  padding: 0 20px 0 0;
}
.recommendedItemText1 {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
}
.recommendedItemText1 span {
  font-family: 'Rammetto One', 'M PLUS 1p', sans-serif;
  background: #000;
  color: #fff;
  font-size: 10px;
  padding: 0 8px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin: 0 0 0 8px;
}
.recommendedItem[data-item='筋力アップ'] .recommendedItemText1 span {
  background: #cc1c1c;
}
.recommendedItem[data-item='ダイエット'] .recommendedItemText1 span {
  background: #1c94e2;
}
.recommendedItem[data-item='健康維持'] .recommendedItemText1 span {
  background: #dc8308;
}

.recommendedItemText2 {
  font-size: 16px;
  font-weight: 800;
  line-height: 19px;
}
.menuReProposal {
  margin: 16px 0 0 0;
  padding: 20px 16px;
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px #00000033;
}
.menuReProposalContent {
  margin: 0 12px 0 0;
}
.menuReProposalImg {
  width: 84px;
  margin: -3px 0 0 auto;
}
.menuReProposalText1 {
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  margin: 0 0 8px 0;
}
.menuReProposalText2 {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #888;
  margin: 0 0 12px 0;
}
.menuReProposalAgainLink {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  color: #846319;
  text-decoration: none;
}
.menuReProposalAgainLink img {
  width: 26px;
  margin: 0 4px 0 0;
}
.record {
  background: #f6f6f6;
}
.recordContainer {
  position: sticky;
  top: 0;
}
.recordHeader {
  background: url(/img/record-header-bg.svg) no-repeat center top #e7f5f3;
  padding: 22px 0 8px 16px;
  position: relative;
}
.recordDate {
  display: flex;
  align-items: center;
}
.recordDate button:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
.recordDateValue {
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  margin: 0 6px;
}
.recordHeaderImg {
  position: absolute;
  right: 42px;
  top: 12px;
}
.recordSummary {
  display: flex;
  padding: 8px 12px;
  background: #f6f6f6;
}
.recordSummaryItem {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0px 2px 0px #00000033;
  margin: 0 4px;
  padding: 8px;
  flex: 1;
}
.recordSummaryText1 {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin: 0 0 4px 0;
}
.recordSummaryCount {
  display: flex;
  align-items: center;
  height: 21px;
}
.recordSummaryCount img {
  margin: 0 4px 0 0;
  height: 20px;
}
.recordSummaryText2 {
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
}
.recordSummaryText3 {
  font-family: 'Rammetto One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 4px 0 0;
  position: relative;
  top: 2px;
  min-width: 19px;
  display: inline-block;
}
.recordCalendar {
  position: relative;
}
.recordCalendar table {
  width: 100%;
  height: 250px;
  border-collapse: collapse;
  background: #f6f6f6;
  table-layout: fixed;
}
.recordCalendar table th {
  font-size: 12px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  height: 24px;
}
.recordCalendar table td {
  height: 46px;
  border: 1px solid #0000000d;
  cursor: pointer;
}
.dayItem {
  margin: 2px;
  padding: 2px;
  border-radius: 8px;
  height: calc(100% - 4px);
}
.recordCalendar {
  min-height: 254px;
}
.recordCalendar table td.active .dayItem {
  background: #fcdd3c;
}
.dayNumber {
  font-family: 'Rammetto One', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.recordCalendar table td.current .dayNumber {
  color: #e35d5d;
}
.recordCalendar table td.off {
  cursor: default;
}
.recordCalendar table td.off .dayNumber {
  color: #a9a9a9;
}
.dayHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dayEntry {
  width: 30px;
  height: 18px;
  margin: 0 auto;
  background: url(../img/icon-entry.png) no-repeat center center;
  background-size: auto 18px;
}
.dayBadge {
  height: 14px;
  display: flex;
  flex-direction: row-reverse;
  padding: 0 11px 0 0;
}
.dayBadge i {
  width: 14px;
  height: 14px;
  background: url(../img/icon-badge.png) no-repeat center center;
  background-size: 14px 14px;
  margin: 0 -11px 0 0;
  position: relative;
}
.dayBadge i.event {
  background: url(../img/icon-event-badge.png) no-repeat center center;
  background-size: 14px 14px;
}
.recordDetail {
  padding: 16px 16px 76px 16px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px -2px 10px 0px #00000033;
  min-height: calc(100dvh - 380px);
  display: flex;
  flex-flow: column;
  position: relative;
}
.recordDetail.row7 {
  min-height: calc(100dvh - 426px);
}
.recordDetailDate {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin: 0 0 8px 8px;
  display: flex;
  justify-content: space-between;
}
.recordDetailItems {
  position: relative;
  overflow: hidden;
}
.recordDetailItems::-webkit-scrollbar {
  display: none;
}
.recordDetail.open .recordDetailItems,
.recordDetail.open2 .recordDetailItems {
  overflow: auto;
}
.recordDetailItems.empty {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
.recordDetailItems.empty::before {
  content: '';
  margin: 20px auto 10px auto;
  display: block;
  width: 90px;
  height: 53px;
  background: url(/img/calendar-bg-1.svg) no-repeat center center;
  background-size: 100%;
}
.recordDetailItems.empty::after {
  content: '記録はありません';
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  color: #d0cccc;
  display: block;
}
.recordDetailItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #d4d4d4;
  margin: 0 0 8px 0;
  min-height: 62px;
  position: relative;
  border-radius: 8px;
  padding: 16px;
}
.recordDetailItem:not([data-item='info']) {
  padding: 12px 16px 12px 16px;
  border-radius: 0 8px 8px 0;
  border-left: none;
}
.recordDetailItem[data-item='info'] img {
  opacity: 0.5;
}
.recordDetailItem::before {
  content: '';
  width: 4px;
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: 0;
}
.recordDetailItem[data-item='メダル獲得']::before {
  background: #ffe45d;
}
.recordDetailItem[data-item='筋力アップ']::before {
  background: #e45555;
}
.recordDetailItem[data-item='筋力アップ'] svg {
  fill: #e45555;
}
.recordDetailItem[data-item='ダイエット']::before {
  background: #5aceff;
}
.recordDetailItem[data-item='ダイエット'] svg {
  fill: #5aceff;
}
.recordDetailItem[data-item='健康維持']::before {
  background: #ffc52f;
}
.recordDetailItem[data-item='健康維持'] svg {
  fill: #ffc52f;
}
.recordDetailItem[data-item='スペシャルメニュー']::before {
  background: #cd5bf5;
}
.recordDetailItem[data-item='スペシャルメニュー'] svg {
  fill: #cd5bf5;
}
.recordDetailItemContent {
  flex: 1;
  padding: 0 10px 0 0;
}
.recordDetailItemText1 {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
}
.recordDetailItemText1 span {
  font-family: 'Rammetto One', 'M PLUS 1p', sans-serif;
  background: #000;
  color: #fff;
  font-size: 10px;
  padding: 0 8px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin: 0 0 0 8px;
}
.recordDetailItem[data-item='筋力アップ'] .recordDetailItemText1 span {
  background: #cc1c1c;
}
.recordDetailItem[data-item='ダイエット'] .recordDetailItemText1 span {
  background: #1c94e2;
}
.recordDetailItem[data-item='健康維持'] .recordDetailItemText1 span {
  background: #dc8308;
}
.recordDetailItem[data-item='スペシャルメニュー'] .recordDetailItemText1 span {
  background: #631d7c;
}
.recordDetailItemText2 {
  font-size: 16px;
  font-weight: 800;
  line-height: 19px;
}
.recordDetailItemText3 {
  font-size: 16px;
  font-weight: 800;
  line-height: 19px;
  margin: 0 0 4px 0;
}
.recordDetailItemText4 {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.recordDetailItemImg {
  min-width: 44px;
  width: 44px;
  height: 44px;
}
.recordDetailItemButton {
  width: 24px;
  height: 24px;
}
.recordDetailItemToggle {
  width: 100%;
  padding: 12px 0 0 0;
  display: none;
}
.recordDetailItem.show .recordDetailItemButton {
  transform: rotate(180deg);
}
.recordDetailItem.show .recordDetailItemToggle {
  display: block;
}
.recordDetailItemToggle ul li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 4px 0;
  margin: 0 0 4px 0;
  border-bottom: 1px solid #dedede;
}
.recordDetailItemToggle ul li:last-child {
  margin: 0;
}
.recordCardMenuTitle {
  font-size: 12px;
  font-weight: 800;
  line-height: 17px;
  padding: 0 10px 0 0;
}
.recordCardMenuOverview {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: #888;
  white-space: nowrap;
}
.recordDetail.open
  .recordDetailItem:not([data-item='メダル獲得']):not([data-item='info']),
.recordDetail.open2
  .recordDetailItem:not([data-item='メダル獲得']):not([data-item='info']) {
  cursor: pointer;
}
.recordDetailClose {
  display: none;
}
.recordDetailClose.show {
  display: block;
}
.guide.type1 {
  background: linear-gradient(180deg, #f55b5b 0%, #cc1c1c 36.92%);
}
.guide.type2 {
  background: linear-gradient(180deg, #5aceff 0%, #1c94e2 36.92%);
}
.guide.type3 {
  background: linear-gradient(180deg, #ffc52f 0%, #dc8308 36.92%);
}
.guide.type4 {
  position: relative;
  background: linear-gradient(180deg, #cd5bf5 0%, #621d7b 12%);
}
.guide.type4::before {
  content: '';
  width: 165px;
  height: 239px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(/img/card-category-header-4.png) no-repeat right top;
  background-size: 165px;
}
.guideHeader {
  position: sticky;
  top: 0;
  transform: translateZ(1px);
  min-height: 167px;
  padding: 54px 24px 0 24px;
}
.guide {
  display: none;
}
.guide.show {
  display: block;
}
.guide.type1 .guideHeader {
  background: url(../img/card-category-header-1.svg) no-repeat right top;
  background-size: 156px;
}
.guide.type2 .guideHeader {
  background: url(../img/card-category-header-2.svg) no-repeat right top;
  background-size: 156px;
}
.guide.type3 .guideHeader {
  background: url(../img/card-category-header-3.svg) no-repeat right top;
  background-size: 156px;
}
.guide.type4 .guideHeader {
  background: none;
}
.guide.type1 .guideIndicatorFixed {
  background: #f55b5b;
}
.guide.type2 .guideIndicatorFixed {
  background: #5aceff;
}
.guide.type3 .guideIndicatorFixed {
  background: #ffc52f;
}
.guide.type4 .guideIndicatorFixed {
  background: #cd5bf5;
}
.guideText1 {
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  color: #fff;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
}
.type1 span.level {
  background: #cc1c1c;
}
.type2 span.level {
  background: #1c94e2;
}
.type3 span.level {
  background: #dc8308;
}
.type4 span.level {
  background: #631d7c;
}
.guideText1 span.level {
  display: inline-flex;
  align-items: center;
  height: 16px;
  border-radius: 16px;
  padding: 0 8px;
  font-family: 'Rammetto One', 'M PLUS 1p', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0 0 0 8px;
}
.guideText2 {
  font-size: 24px;
  font-weight: 800;
  line-height: 31px;
  color: #fff;
  margin: 0 0 4px 0;
}
.guideOverviewList {
  display: flex;
  align-items: center;
}
.guideOverviewList li {
  margin: 0 8px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #fff;
  display: flex;
  align-items: center;
}
.guideOverviewList li img {
  width: 14px;
}
.guideIndicatorFixed {
  position: fixed;
  width: 100%;
  max-width: 430px;
  top: -60px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  z-index: 200;
  transition: top 0.5s;
}
.guideIndicatorFixed.show {
  top: 0;
}
.guideIndicator {
  padding: 18px 0 12px 0;
  display: flex;
  align-items: center;
}
.guideIndicatorBar {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.guideIndicatorMove {
  width: 0;
  height: 8px;
  background: #32d18e;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.5s;
}
.guideIndicatorText {
  min-width: 36px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  color: #fff;
  margin: 0 0 0 8px;
}
.guideBody {
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 80px 16px;
  min-height: calc(100dvh - 167px);
  position: relative;
  transform: translateZ(1px);
}
.hidden .guideBody {
  transform: none;
}
.hidden .guideFooter {
  display: none;
}
.hidden .guideIndicatorFixed.show {
  display: none;
}
.guideMenuHeader {
  display: flex;
  align-items: flex-start;
  margin: 0 0 22px 0;
}
.trainingMovieThumbnail,
.trainingMovieThumbnailNoMovie {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  border: 2px solid #000;
  overflow: hidden;
}
.trainingMovieThumbnail::after {
  content: '';
  width: 32px;
  height: 32px;
  background: url(../img/icon-15.svg) no-repeat;
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}
.trainingMovieThumbnail > img {
  width: 80px;
  height: 80px;
}
.guideMenuHeaderContent {
  flex: 1;
  margin: 0 0 0 8px;
}
.guideMenuExplanationHeader {
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guideMenuHeaderText1 {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}
.guideMenuHeaderText2 {
  font-size: 20px;
  font-weight: 800;
  line-height: 22px;
  margin: 0 0 4px 0;
}
.guideMenuHeaderText3 {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: #898989;
}
.explanationButton {
  display: none;
  /* display: flex; */
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  padding: 0 13px 0 0;
}
.explanationButton > img {
  width: 24px;
  margin: 0 4px 0 0;
}
.guideMenu > li {
  padding: 0 0 16px 0;
  margin: 0 0 16px 0;
  border-bottom: 1px solid #d1d1d1;
}
.guideMenu > li:last-child {
  margin: 0;
  border-bottom: none;
}
input[name='training'] {
  display: none;
}
input[name='training']:disabled + label {
  cursor: default;
}
.guideMenuList {
  margin: 0 0 0 44px;
}
.guideMenuList > li {
  border-left: 1px solid #aaa;
  padding: 0 0 12px 48px;
  position: relative;
  min-height: 54px;
}
.guideMenuList > li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #aaa;
  position: absolute;
  top: -4px;
  left: -4.5px;
}
.guideMenuList.only > li::before {
  display: none;
}
.guideMenuList > li.done::before {
  background: #32d18e;
}
.guideMenuList > li.done {
  border-left: 1px solid #32d18e;
}
.guideMenuList > li:last-child {
  padding: 0 0 0 48px;
  border-left: 1px solid transparent;
  min-height: auto;
}
.guideMenuText {
  position: relative;
  top: -12px;
}
.guideMenuText1 {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.guideMenuText2 {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: #888;
}
.guideItem {
  position: relative;
  top: -12px;
}
.guideItemHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guideItemText1 {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.guideItemText2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #aaa;
  margin: 8px 0 0 0;
}
.guideItemCheckbox {
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  color: #aaa;
}
.guideItemCheckbox label {
  display: flex;
  padding: 0 0 0 28px;
  width: 100%;
  min-height: 24px;
  align-items: center;
  position: relative;
}
.guideItemCheckbox label::before {
  content: '';
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: block;
  border: 2px solid #aaa;
  background: #fff;
  border-radius: 24px;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.guideItemCheckbox input:disabled + label {
  opacity: 0.3;
}
.guideItemCheckbox input:checked + label {
  color: #32d18e;
}
.guideItemCheckbox input:checked + label::before {
  border: 2px solid #2ac181;
  background: url('data:image/svg+xml,<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.7397 0.26035C12.0868 0.607482 12.0868 1.1703 11.7397 1.51743L4.85076 8.40632C4.50363 8.75345 3.94082 8.75345 3.59368 8.40632L0.26035 5.07298C-0.0867832 4.72585 -0.0867832 4.16304 0.26035 3.81591C0.607482 3.46877 1.1703 3.46877 1.51743 3.81591L4.22222 6.5207L10.4826 0.26035C10.8297 -0.0867832 11.3925 -0.0867832 11.7397 0.26035Z" fill="white"/></svg>')
    no-repeat center center #32d18e;
}
.trainingMovieModal {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: #434343;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  top: 0;
  left: 0;
}
.trainingMovieModal.show {
  display: flex;
}
.trainingMovieModalContentClose {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
}
.trainingMovieModalContent {
  max-width: 430px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  aspect-ratio: 560 / 312;
}
.trainingMovieModalContent iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.guideMenuExplanationModal {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: #e7f5f3;
  display: none;
  z-index: 1000;
  top: 0;
  left: 0;
  overflow: auto;
}
.guideMenuExplanationModal.show {
  display: block;
}
.guideMenuExplanationModalContentClose {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
}
.guideMenuExplanationModalContent {
  max-width: 430px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  background: #fff;
}
.gExplanationMain {
  background: #ffe45d;
  padding: 24px;
  margin: 0 0 24px 0;
}
.gExplanationText1 {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  color: #846319;
  margin: 0 0 4px 0;
}
.gExplanationText2 {
  font-size: 24px;
  font-weight: 900;
  line-height: 36px;
  margin: 0 0 4px 0;
  color: #846319;
}
.gExplanationText3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.guideMenuExplanationModalAnchor {
  display: flex;
  align-items: center;
  margin: 0 0 24px 0;
}
.guideMenuExplanationModalAnchor > li {
  width: 100%;
}
.guideMenuExplanationModalAnchor > li a {
  width: 100%;
  height: 57px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: #846319;
  text-decoration: none;
  border-left: 1px solid #ddd;
}
.guideMenuExplanationModalAnchor > li img {
  margin: 8px 0 0 0;
}
.guideMenuExplanationModalAnchor > li:first-child a {
  border-left: none;
}
.gExplanationContents {
  padding: 0 20px 40px 20px;
}
.gExplanationContentHead {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 40px 0;
  background: #efefed;
  border-radius: 4px;
}
.gExplanationContentItems li {
  margin: 0 0 40px 0;
}
.gExplanationContentItems li img {
  border-radius: 20px;
  overflow: hidden;
}
.gExplanationContentText1 {
  display: flex;
  align-items: flex-start;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  margin: 0 0 8px 0;
}
.gExplanationContentText1 .number {
  font-family: 'Rammetto One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 2px solid #000;
  border-radius: 32px;
  margin: 0 4px 0 0;
}
.gExplanationContentText2 {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin: 8px 0 0 0;
}
.trainingCompleteModal {
  background: #434343;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 10000;
  display: none;
}
.trainingCompleteModal.show {
  display: block;
}
.trainingCompleteContent {
  max-width: 430px;
  padding: 24px 0 0 0;
  margin: 0 auto;
  background: url(/img/modal-bg.svg) no-repeat center top -38px;
  background-size: 440px 440px;
}
.trainingCompleteContentInner {
  opacity: 0;
  animation: fadeIn 3s forwards;
}
.trainingCompleteContentBadge {
  margin: 0 auto;
  background: url(/img/modal-badge-bg.svg) no-repeat center center;
  width: 281px;
  height: 281px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trainingCompleteContentBadge img {
  width: 200px;
  height: 200px;
}
.trainingCompleteDate {
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
}
.trainingCompleteText1 {
  font-family: 'Rammetto One', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fed401;
}
.trainingCompleteText2 {
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fed401;
}
.trainingCompleteButton {
  max-width: 295px;
  width: 100%;
  margin: 0 auto;
}
.trainingCompleteCharacter {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 270px;
  margin: 22px auto 15px auto;
}
.trainingCompleteCharacterText {
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  position: relative;
  text-align: left;
  margin: 2px 0 0 18px;
  filter: drop-shadow(2px 2px 4px #00000033);
}
.trainingCompleteCharacterText::after {
  content: '';
  width: 0;
  height: 0;
  border-right: 16px solid #fff;
  border-left: 16px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: -26px;
  top: 8px;
  margin: auto;
}
.tMenus {
  width: 100%;
  transition: margin 0.5s;
  margin: -34px 0 0 0;
  padding: 34px 0 0 0;
  display: flex;
  transform: translateZ(0);
}
.tMenusInner {
  position: relative;
  flex: 1;
}
.tMenus.open {
  height: auto;
  overscroll-behavior: none;
  margin: -210px 0 0 0;
  padding: 34px 0 0 0;
}
.tMenus.open div.tMenu {
  display: none;
}
.tMenus.open .tMenu.open {
  position: relative;
  top: 0;
  height: auto;
  display: block;
}
.prevButton {
  position: absolute;
  top: 16px;
  left: 24px;
}
.closeButton {
  position: absolute;
  top: 16px;
  right: 16px;
  display: none;
}
.tMenu * {
  pointer-events: none;
}
.tMenu.open * {
  pointer-events: initial;
}
.tMenu.open .closeButton {
  display: block;
}
.tMenu.open .tMenuBodyOpen {
  display: none;
}
.tMenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px -4px 4px 0px #00000033;
  transition: top 0.5s;
  padding: 0 0 1px 0;
}
.tMenu.type1 {
  background: linear-gradient(180deg, #f55b5b 0%, #cc1c1c 36.92%);
  z-index: 1;
}
.tMenu.type2 {
  background: linear-gradient(180deg, #5aceff 0%, #1c94e2 36.92%);
  z-index: 2;
}
.tMenu.type3 {
  background: linear-gradient(180deg, #ffc52f 0%, #dc8308 36.92%);
  z-index: 3;
}
.tMenu.type4 {
  background: linear-gradient(180deg, #cd5bf5 0%, #621d7b 12%);
  z-index: 4;
}
.tMenu.type4::before {
  content: '';
  width: 165px;
  height: 239px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(/img/card-category-header-4.png) no-repeat right top;
  background-size: 165px;
}
.tMenu.type1 .tMenuHeader {
  background: url(/img/card-category-header-1.svg) no-repeat right top;
}
.tMenu.type2 .tMenuHeader {
  background: url(/img/card-category-header-2.svg) no-repeat right top;
}
.tMenu.type3 .tMenuHeader {
  background: url(/img/card-category-header-3.svg) no-repeat right top;
}
.tMenu.type4 .tMenuHeader {
  position: relative;
  background: none;
}
.tMenu.type1 .tMenuOverviewRankIcon {
  background: #cc1c1c;
}
.tMenu.type2 .tMenuOverviewRankIcon {
  background: #1c94e2;
}
.tMenu.type3 .tMenuOverviewRankIcon {
  background: #dc8308;
}
.tMenu.type4 .tMenuOverviewRankIcon {
  background: #631d7c;
}
.tMenu.open {
  z-index: 100;
}
.tMenuHeader {
  padding: 24px 10px 24px 28px;
}
.tMenuText1 {
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  color: #fff;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
}
.tMenuText2 {
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  color: #fff;
  margin: 0 0 8px 0;
}
.tMenuContent {
  display: flex;
  align-items: center;
}
.tMenuIndicator {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 8px 0 0;
}
.tMenuIndicatorDonuts {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  mask-image: radial-gradient(transparent 18px, #fff 19px);
  background: conic-gradient(#32d18e 0% 0%, #ffffffb2 0% 100%);
}
.tMenuIndicatorText {
  font-size: 12px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tMenuOverviewList {
  display: none;
  align-items: center;
}
.tMenuOverviewList.active {
  display: flex;
}
.tMenuOverviewList li {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #fff;
}
.tMenuOverviewList li img {
  margin: 0 2px 0 0;
}
.tMenuOverviewRank {
  display: flex;
  align-items: center;
  margin: 8px 0 0 0;
}
.tMenuOverviewRankIcon {
  display: inline-flex;
  align-items: center;
  height: 16px;
  border-radius: 16px;
  padding: 0 8px;
  font-family: 'Rammetto One', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0 0 0 8px;
}
.tMenuOverviewRankStatus {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: #fff;
}
.tMenuOverviewRankStatus img {
  margin: 0 2px 0 0;
}
.tMenuBody {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px;
  margin: 0 8px 8px 8px;
}
.tMenuBodyOpen {
  width: 70px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 7.2px;
  letter-spacing: 0.08em;
  border-radius: 32px;
  position: absolute;
  top: -16px;
  right: 14px;
  color: #000;
}
.tMenuBodyOpen img {
  margin: 0 0 0 4px;
}
.cardMenu {
  margin: 0 0 24px 0;
}
.cardMenu li {
  padding: 4px;
  margin: 0 0 4px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #dedede;
}
.cardMenuTitle {
  font-size: 12px;
  font-weight: 800;
  line-height: 17px;
  padding: 0 10px 0 0;
}
.cardMenuOverview {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: #888;
  white-space: nowrap;
}
.cardExplanation {
  margin: 24px 0 0;
}
.cardExplanationHead {
  font-size: 16px;
  font-weight: 800;
  line-height: 19px;
  margin: 0 0 8px 0;
}
.cardExplanationText {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin: 0 0 12px 0;
}
.cardExplanationMovie {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #000;
}
.cardExplanationMovie img {
  cursor: pointer;
}
.cardExplanationMovie::after {
  content: '';
  width: 40px;
  height: 40px;
  position: absolute;
  inset: 0;
  margin: auto;
  cursor: pointer;
  background: url(../img/icon-movie.svg) no-repeat;
}
.tMenu.open .menuShadow {
  pointer-events: none;
}
.menuShadow {
  position: absolute;
  width: 100%;
  max-width: 430px;
  height: calc(100% - 270px);
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  margin: 270px 0 0 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 30%,
    #ffffff 100%
  );
  opacity: 1;
  transition: opacity 1s;
  pointer-events: none;
}
.tMenus.open .menuShadow {
  opacity: 0;
}
[data-menu-count='2'] .tMenu:nth-child(2) {
  top: 310px;
}
[data-menu-active='2'] .tMenu:nth-child(2) {
  top: 80px;
}
.cardMenuStart {
  max-width: 327px;
  width: 100%;
  font-size: 20px;
  margin: 0 auto;
}
.training {
  background: linear-gradient(180deg, #d0e5e2 30%, #e7f5f3 100%);
}
.trainingHeader {
  position: sticky;
  top: 0;
  height: 210px;
  background: url(../img/training-header-bg.svg) no-repeat center top 12px
    #e7f5f3;
  background-size: cover;
  text-align: center;
  padding: 22px 0 0 0;
}
.trainingCharacter {
  margin: 0 0 0 190px;
  position: relative;
  touch-action: manipulation;
  top: 0;
  transition: top 0.3s;
}
.trainingCharacter.jump {
  top: -10px;
}
.trainingHeaderComment {
  width: 327px;
  position: absolute;
  top: 118px;
  left: 0;
  right: 0;
  margin: auto;
}
.trainingHeaderComment._2 {
  top: 105px;
}
.trainingHeaderComment._2 .trainingHeaderCommentText {
  width: 156px;
  opacity: 1;
}
.trainingHeaderCommentText {
  filter: drop-shadow(2px 2px 4px #00000033);
  transform: translateZ(0);
  will-change: filter;
  padding: 5px 10px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  width: 180px;
  position: relative;
  text-align: left;
  word-break: auto-phrase;
  opacity: 0;
}
.trainingHeaderCommentText.fadeIn {
  opacity: 1;
  transition: opacity 0.5s;
}
.trainingHeaderCommentText::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #fff;
  transform: rotate(90deg);
  position: absolute;
  right: -12px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.trainingHeaderText {
  position: absolute;
  width: 327px;
  top: 22px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 24px;
  font-weight: 900;
  line-height: 28px;
  letter-spacing: 0.08em;
  text-align: left;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0px #84631940;
}
.trainingHeaderText._2 {
  top: 31px;
}
.trainingBody {
  height: 100%;
  margin: 0 0 58px 0;
}
:root {
  --swiper-pagination-color: #fed401;
  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-height: 12px;
  --swiper-pagination-bullet-inactive-color: #dbdada;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 8px;
  --swiper-pagination-bottom: -2px;
}
.tutorial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  padding: 16px;
}
.tutorial.hide {
  display: none;
}
.tutorial.show + .avatarInfo {
  display: none;
}
.tutorialInner {
  padding: 24px;
  margin: 16px;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  max-width: 343px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
}
.tutorialText1 {
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  margin: 0 0 8px 0;
  color: #846319;
}
.tutorialText2 {
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0.08em;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0 #84631940;
}
.tutorialImg {
  width: 295px;
}
@media screen and (max-height: 600px) {
  .tutorialImg {
    width: 250px;
  }
}
.swiper {
  width: 100%;
  height: 100%;
  padding: 0 0 16px 0;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.slideBottom {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 16px 0 0 0;
  height: 103px;
}
.nextButton,
.startButton {
  max-width: 295px;
  width: 100%;
}
.button.nextButton:disabled {
  opacity: 1;
}
.skip {
  margin: 16px 0 0 0;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: 0.04em;
  color: #846319;
}
.slideBottomNext,
.slideBottomLast {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.slideBottomNext.hide {
  display: none;
}
.slideBottomLast {
  display: none;
}
.slideBottomLast.show {
  display: flex;
}
.welcome {
  flex-flow: column;
  display: flex;
  justify-content: flex-start;
  padding: 148px 0 0 0;
  min-height: 100dvh;
  background: url(../img/welcome-img-1.svg) no-repeat top center #e7f5f3;
  background-size: 430px;
}
@media screen and (max-height: 600px) {
  .welcome {
    padding: 20px 0 0 0;
  }
}
.img-1 {
  margin: 0 0 30px 0;
}
.img-2 {
  max-width: 320px;
  display: block;
  margin: 0 auto 80px auto;
  display: block;
}
.text-1 {
  font-size: 28px;
  font-weight: 900;
  line-height: 42px;
  text-align: center;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  margin: 0 0 8px 0;
  text-shadow: 1px 1px 0px #84631940;
}
.text-2 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  margin: 0 0 20px 0;
}
.welcomeBottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
/**
 * Swiper 11.1.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 30, 2024
 */

@font-face {
  font-family: swiper-icons;
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size: 44px;
}
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}
.swiper-button-next svg,
.swiper-button-prev svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 8px)
  );
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 8px)
  );
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet,
.swiper-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  display: inline-block;
  transition:
    0.2s transform,
    0.2s top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition:
    0.2s transform,
    0.2s left;
}
.swiper-horizontal.swiper-rtl
  > .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition:
    0.2s transform,
    0.2s right;
}
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
  background: var(
    --swiper-pagination-progressbar-bg-color,
    rgba(0, 0, 0, 0.25)
  );
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-horizontal
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.errorPage {
  padding: 42px;
}
.errorTitle {
  font-size: 24px;
  font-weight: 900;
  line-height: 33px;
  letter-spacing: 0.08em;
  text-align: center;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  margin: 0 0 16px 0;
  text-shadow: 1px 1px 0px #84631940;
}
.errorText {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.errorLink {
  margin: 32px 0 0 0;
  text-decoration: none;
}
.tabContent {
  display: none;
}
.tabContent.show {
  display: block;
}
.modalShareButton {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  color: #fff;
  width: 110px;
  display: flex;
  align-items: center;
  margin: 0 auto 20px auto;
}
.modalShareButton.hide {
  display: none;
}
.modalShareButton img {
  margin: 0 11px 0 0;
}
.modalShareContentLayer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
}
.modalShareContentLayer.show {
  display: block;
}
.modalShareContent {
  position: fixed;
  left: 0;
  bottom: -210px;
  width: 100%;
  height: 210px;
  border-radius: 20px 20px 0 0;
  background: #434343;
  box-shadow: 0px -4px 10px 0px #00000033;
  transition: bottom 0.3s;
}
.modalShareContent.show {
  bottom: 0;
}
.modalShareContentHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 1px solid #ffffff4d;
  position: relative;
  color: #fff;
}
.shareButtonClose {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  bottom: 0;
  right: 24px;
  margin: auto;
}
.modalShareLinks {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0;
}
.modalShareLinks a {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 0 24px;
  text-decoration: none;
}
.modalShareLinks img {
  width: 56px;
  height: 56px;
}
.modalShareLinks span {
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.05em;
  margin: 16px 0 0 0;
  color: #fff;
}
.badgeModal {
  background: #434343;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1200;
  display: none;
}
.badgeModal.show {
  display: block;
}
.badgeModalInner {
  opacity: 1;
  animation: fadeIn 0.5s forwards;
}
.badgeContent {
  max-width: 430px;
  padding: 76px 0 0 0;
  margin: 0 auto;
  background: url(/img/modal-bg2.svg) no-repeat center top;
}
.badgeContentInner {
  opacity: 0;
  animation: fadeIn 0.1s forwards 0.5s;
  text-align: center;
}
.badgeContentBadge {
  margin: 0 auto;
  background: url(/img/modal-badge-bg2.png) no-repeat center center;
  background-size: 253px 253px;
  width: 270px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badgeContentBadge img {
  width: 244px;
  height: 245px;
  object-fit: contain;
}
.badgeDate {
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.04em;
  color: #fed401;
  background: #000;
  display: inline-flex;
  padding: 0 8px;
  height: 22px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  margin: 46px auto 10px auto;
}
.badgeText1 {
  font-size: 24px;
  font-weight: 800;
  line-height: 22px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fed401;
}
.badgeText2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: #fff;
  margin: 16px 0 0 0;
}
.badgeCount {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 0 0;
}
.badgeCount.hide {
  display: none;
}
.badgeCount li {
  width: 36px;
  height: 36px;
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  color: #000;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
}
.badgeCount li:nth-child(1) {
  background: #fed401;
  opacity: 0.3;
}
.badgeCount li.active {
  width: 64px;
  height: 64px;
  border: 4px solid #000;
}
.badgeCount li:nth-child(1).active {
  margin: 0 0 0 104px;
  opacity: 1;
}
.badgeCount li:nth-child(2) {
  background: #fed401;
  opacity: 0.3;
}
.badgeCount li:nth-child(2).active {
  opacity: 1;
}
.badgeCount li:nth-child(3) {
  background: #dadada;
  opacity: 0.3;
}
.badgeCount li:nth-child(3).active {
  margin: 0 104px 0 0;
  opacity: 1;
}
.badgeCloseButton {
  width: 295px;
  margin: 24px auto 0 auto;
}
.badgeButtonClose {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
}
.badgeModalShareButton {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #fff;
  width: 110px;
  display: flex;
  align-items: center;
  margin: 20px auto;
}
.badgeModalShareButton.hide {
  display: none;
}
.badgeModalShareButton img {
  margin: 0 11px 0 0;
}
.badgeModalShareContentLayer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
}
.badgeModalShareContentLayer.show {
  display: block;
}
.badgeModalShareContent {
  position: fixed;
  left: 0;
  bottom: -210px;
  width: 100%;
  height: 210px;
  border-radius: 20px 20px 0 0;
  background: #434343;
  box-shadow: 0px -4px 10px 0px #00000033;
  transition: bottom 0.3s;
}
.badgeModalShareContent.show {
  bottom: 0;
}
.badgeModalShareContentHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-align: center;
  border-bottom: 1px solid #ffffff4d;
  position: relative;
  color: #fff;
}
.badgeShareButtonClose {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  bottom: 0;
  right: 24px;
  margin: auto;
}
.badgeModalShareLinks {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0;
}
.badgeModalShareLinks a {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 0 24px;
  text-decoration: none;
}
.badgeModalShareLinks img {
  width: 56px;
  height: 56px;
}
.badgeModalShareLinks span {
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.05em;
  margin: 16px 0 0 0;
  color: #fff;
}
.completeModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background: #e7f5f3;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.completeModal.show {
  opacity: 1;
  pointer-events: default;
}
.completeModalText {
  font-size: 28px;
  font-weight: 900;
  line-height: 36.4px;
  letter-spacing: 0.08em;
  text-align: center;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0 #84631940;
  margin: 0 0 32px 0;
}
.recordLoading {
  display: none;
  text-align: center;
}
.recordLoadingLayer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  z-index: 10000;
}
._record_loading .recordLoading {
  display: block;
}
._record_loading .recordLoadingLayer {
  display: block;
}
._record_loading .recordDetailItems.empty {
  display: none;
}
.menuReProposalModal {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  top: 0;
  left: 0;
}
.menuReProposalModal.show {
  display: flex;
}
.menuReProposalModalContent {
  padding: 36px 12px 24px 12px;
  border-radius: 20px;
  background: #fff;
}
.menuReProposalModalText {
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
  text-align: center;
  color: #e45555;
}
.menuReProposalModalButtons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 0 0;
}
.menuReProposalModalCancel {
  width: 160px;
  height: 54px;
  border-radius: 12px;
  border: 1px solid #000;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin: 0 4px 0 0;
}
.menuReProposalModalGo {
  width: 160px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 4px;
  background: #fcdd3c;
  font-size: 20px;
  font-weight: 800;
  line-height: 30px;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.menuDisabled {
  opacity: 0.5;
  pointer-events: none;
}
.avatarModal {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.avatarModal.show {
  display: flex;
}
.avatarModalInner {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  max-width: 343px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: relative;
  animation: fadeInAndTop 0.5s forwards;
  transition: top 0.3s;
  top: -50px;
}
.avatarModalClose {
  position: absolute;
  top: 18px;
  right: 12px;
}
.avatarFormText {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  margin: 0 0 4px 0;
}
.avatarEditBack {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: 0.04em;
  text-align: center;
  display: block;
  margin: 12px auto 0 auto;
  color: #846319;
}
.avatarEditShowShopHead {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 21px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  margin: 18px 0 0 0;
}
.avatarEditShowShopText {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.04em;
  margin: 2px 0 0 0;
}
.avatarEditShowShopCheckbox {
  display: none;
}
.avatarEditShowShopCheckboxLabel {
  position: relative;
  display: block;
  width: 56px;
  height: 30px;
  border-radius: 30px;
  background: #888;
  margin: 0 0 0 auto;
}
.avatarEditShowShopCheckboxLabel::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 22px;
  background: #fff;
  transform: translateX(0);
  transition: transform 0.2s;
}
.avatarEditShowShopCheckbox:checked + .avatarEditShowShopCheckboxLabel {
  background: #3dcc55;
}
.avatarEditShowShopCheckbox:checked + .avatarEditShowShopCheckboxLabel::before {
  transform: translateX(26px);
}
.avatarFormInput {
  width: 270px;
  margin: 0 auto 12px auto;
}
.avatarFormInput input {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
}
.avatarErrorMessage:empty {
  margin: 0;
}
.avatarErrorMessage {
  font-size: 12px;
  line-height: 1.4;
  color: #eb4667;
  margin: 0 0 12px 0;
  text-align: center;
}
.avatarEnterButton {
  width: 295px;
  font-size: 20px;
}
.home {
  position: relative;
}
.enterLink {
  position: absolute;
  top: 12px;
  left: 0;
  width: 58px;
  height: 48px;
  border-radius: 0 48px 48px 0;
  background: #fff;
  box-shadow: 0px 0px 10px 0px #00000033;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.enterLink a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0 0 14px;
}
.avatarInfo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 16px;
}
.avatarInfoInner {
  padding: 24px;
  margin: 16px;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  max-width: 343px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
}
.avatarInfoText1 {
  font-size: 16px;
  font-weight: 800;
  line-height: 22px;
  margin: 0 0 8px 0;
  color: #846319;
  text-align: center;
}
.avatarInfoText2 {
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0.08em;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0 #84631940;
  text-align: center;
}
.avatarInfoImg {
  width: 295px;
  margin: 12px auto;
}
@media screen and (max-height: 600px) {
  .avatarInfoImg {
    width: 250px;
  }
}
.backLink {
  position: absolute;
  top: 20px;
  left: 18px;
  width: 24px;
  height: 24px;
}
.decision {
  position: absolute;
  top: 12px;
  right: 12px;
}
.decision.button {
  font-size: 16px;
  line-height: 24px;
  width: 82px;
  height: 40px;
  border: 2px solid #846319;
}
.avatar {
  display: flex;
  flex-flow: column;
  height: 100dvh;
}
.avatarTabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: auto;
  padding: 2px;
  position: relative;
  min-height: 36px;
}
.avatarTabs::-webkit-scrollbar {
  display: none;
}
.avatarTabsWrap {
  position: relative;
}
.avatarTabsWrap::after {
  content: '';
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
}
.avatarTabs li {
  margin: 0 4px;
  position: relative;
  cursor: pointer;
}
.avatarTabs li span {
  width: 60px;
  min-width: 60px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  color: #fff;
  background: #000;
  border-radius: 8px 8px 0 0;
  position: relative;
}
.avatarTabs li::before {
  content: '';
  width: 64px;
  height: 34px;
  border-radius: 10px 10px 0 0;
  background: #000;
  position: absolute;
  top: -2px;
  left: -2px;
}
.avatarMenus {
  flex: 1;
  background: #fff;
  overflow: auto;
}
.avatarMenu {
  padding: 24px;
  display: none;
}
.avatarMenuText {
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  margin: -8px 0 8px 0;
}
.avatarMenuText._2 {
  margin: 14px 0 -10px 0;
}
.avatarCanvas {
  margin: 0 0 -36px 0;
  aspect-ratio: 375 / 300;
}
.avatarBase svg,
.avatarBase img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.avatarPartsList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.avatarPartsList.skin {
  gap: 12px;
}
.avatarPartsList.parts {
  gap: 13px;
}
.avatarPartsList.scroll {
  flex-wrap: nowrap;
  overflow: auto;
  padding: 6px 26px;
  margin: 0 -24px;
}
.avatarPartsList.scroll::-webkit-scrollbar {
  display: none;
}
.avatarPartsList li {
  position: relative;
  border-radius: 9999px;
  box-shadow: 0px 0px 8px 0px #00000026;
  cursor: pointer;
}
.avatarPartsList.parts li {
  width: 100px;
  height: 100%;
  border-radius: 8px;
}
.avatarPartsTypeList {
  margin: 20px 0 0 0;
  display: none;
}
.avatarPartsTypeList._wallpaper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.avatarPartsTypeList li {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 0px 8px 0px #00000026;
  cursor: pointer;
}
.colorSkin {
  width: 72px;
  height: 72px;
  border: 4px solid #fff;
}
.colorSkin._1 {
  background: #ffdbbf;
}
.colorSkin._2 {
  width: 72px;
  height: 72px;
  border: 4px solid #fff;
  background: #ffc699;
}
.colorSkin._3 {
  width: 72px;
  height: 72px;
  border: 4px solid #fff;
  background: #ffc0b8;
}
.colorSkin._4 {
  width: 72px;
  height: 72px;
  border: 4px solid #fff;
  background: #bf936d;
}
.color {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border: 3px solid #fff;
}
.color._1 {
  background: #cba557;
}
.color._2 {
  background: #ff0014;
}
.color._3 {
  background: #fff600;
}
.color._4 {
  background: #9bf218;
}
.color._5 {
  background: #73eaff;
}
.color._6 {
  background: #6a7ee5;
}
.color._7 {
  background: #cf9eff;
}
.color._8 {
  background: #ffa1e0;
}
.color._9 {
  background: #ffffff;
}
.color._10 {
  background: #bfc0c0;
}
.color._11 {
  background: #4c4c4c;
}
[data-body-value] img {
  width: 100%;
  height: 100%;
}
[data-bg='1'] {
  background: #cba557;
}
[data-bg='2'] {
  background: #ff0014;
}
[data-bg='3'] {
  background: #fff600;
}
[data-bg='4'] {
  background: #9bf218;
}
[data-bg='5'] {
  background: #73eaff;
}
[data-bg='6'] {
  background: #6a7ee5;
}
[data-bg='7'] {
  background: #cf9eff;
}
[data-bg='8'] {
  background: #ffa1e0;
}
[data-bg='9'] {
  background: #ffffff;
}
[data-bg='10'] {
  background: #bfc0c0;
}
[data-bg='11'] {
  background: url(../img/avatar/wallpaper-1.png) no-repeat center top;
  background-size: 100%;
}
[data-bg='12'] {
  background: url(../img/avatar/wallpaper-2.png) no-repeat center top;
  background-size: 100%;
}
[data-bg='13'] {
  background: url(../img/avatar/wallpaper-3.png) no-repeat center top;
  background-size: 100%;
}
[data-bg='14'] {
  background: url(../img/avatar/wallpaper-4.png) no-repeat center top;
  background-size: 100%;
}
[data-bg='15'] {
  background: url(../img/avatar/wallpaper-5.png) no-repeat center top;
  background-size: 100%;
}
[data-bg='16'] {
  background: url(../img/avatar/wallpaper-6.png) no-repeat center top;
  background-size: 100%;
}
[data-bg='17'] {
  background: url(../img/avatar/wallpaper-7.png) no-repeat center top;
  background-size: 100%;
}
[data-bg='18'] {
  background: url(../img/avatar/wallpaper-8.png) no-repeat center top;
  background-size: 100%;
}
.homeAvatar {
  text-align: center;
  position: relative;
}
.homeAvatarInner {
  overflow: hidden;
  position: sticky;
  top: 0;
  margin: -25px 0;
  aspect-ratio: 430 / 344;
}
.avatarImg {
  width: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  top: -12px;
}
.avatarEditLink {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  z-index: 10;
}
.homeDetail {
  padding: 16px 0 76px 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0px -2px 10px 0px #00000033;
  min-height: calc(100dvh - 225px);
  display: flex;
  flex-flow: column;
  position: relative;
}
.homeNameCard {
  display: flex;
  align-items: flex-start;
  margin: 0 0 12px 24px;
  cursor: pointer;
  position: relative;
}
.homeDetail .homeNameCard {
  margin: 0 12px 12px 24px;
}
.homeNameCardArrow {
  width: 6px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.homeNameCardIcon {
  width: 64px;
  min-width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 64px;
  position: relative;
}
.homeNameCardIcon:empty {
  background: #ddd;
}
.homeNameCardIcon img {
  min-width: 230px;
  margin: -16px 0 0 calc(-115px + 32px);
}
.homeNameCardItem {
  padding: 0 0 0 12px;
  text-align: left;
}
.homeNameCardLevel {
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 10px;
  border-radius: 16px;
  margin: 0 0 4px 0;
  box-shadow: 0px 1px 1px 0px #00000033;
}
.homeNameCardLevel img {
  margin: 2px 4px 0 0;
}
.homeNameCardLevel[data-level='0'] {
  background: #67d132;
}
.homeNameCardLevel[data-level='0']::after {
  content: 'NORMAL';
}
.homeNameCardLevel[data-level='1'] {
  background: linear-gradient(
    135deg,
    #863505 21.22%,
    #a14f16 36.28%,
    #b46529 47.84%,
    #a6541c 63.37%,
    #8d3304 78.52%
  );
}
.homeNameCardLevel[data-level='1']::after {
  content: 'BRONZE';
}
.homeNameCardLevel[data-level='2'] {
  background: linear-gradient(
    131.63deg,
    #858585 24.91%,
    #b0b0b0 43.54%,
    #bebebe 52.93%,
    #b7b7b7 60.53%,
    #888 77.96%
  );
}
.homeNameCardLevel[data-level='2']::after {
  content: 'SILVER';
}
.homeNameCardLevel[data-level='3'] {
  background: linear-gradient(
    138.01deg,
    #d99901 12.28%,
    #fbcf0e 42.83%,
    #fbd511 49.35%,
    #f8bf0b 65.02%,
    #d59501 91.67%
  );
}
.homeNameCardLevel[data-level='3']::after {
  content: 'GOLD';
}
.homeNameCardLevel[data-level='4'] {
  background: linear-gradient(
    138.01deg,
    #003e8d 12.28%,
    #2676dc 51.97%,
    #003e8d 91.67%
  );
}
.homeNameCardLevel[data-level='4']::after {
  content: 'PLATINA';
}
.homeNameCardNickName {
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  word-break: break-all;
}
.homeNameCardShop {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  padding: 2px 0;
  margin: 4px 0 0 0;
}
.homeNameCardShop span {
  color: #888;
}
.homeNameCardShop img {
  width: 16px;
  margin: 0 2px 0 4px;
}
.homeLevelCardWrap {
  margin: 0 24px 20px 24px;
}
.homeLevelCard {
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0px 0px 2px 0px #00000033;
}
.homeLevelCardTop {
  display: flex;
  align-items: center;
}
.homeLevelCardExePoint {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.homeLevelCardExePoint img {
  width: 19px;
}
.homeLevelCardExePointText {
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  margin: 0 6px;
}
.homeLevelCardExePointValue {
  font-size: 16px;
  font-weight: 800;
  line-height: 12.8px;
  letter-spacing: 0.04em;
  margin: 0 4px 0 0;
}
.homeLevelCardExePointValue span {
  font-family: 'Rammetto One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 4px 0 0;
}
.homeLevelCardItemButton {
  margin: 0 0 0 auto;
  height: 32px;
  background: #fed401;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  text-decoration: none;
  border-radius: 32px;
  padding: 0 6px;
}
.homeLevelCardItemButton img {
  width: 16px;
  margin: 0 4px 0 0;
}
.homeLevelCardItemButton span {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10px;
  line-height: 11px;
  color: #fff;
  margin: 0 0 0 4px;
  background: #ff2276;
}
.homeLevelCardItemButton span::before {
  content: attr(data-available-receive-count);
}
.homeLevelMeter {
  margin: 8px 0;
  position: relative;
  background: #e2e2e2;
  width: 100%;
  height: 20px;
  border-radius: 20px;
  overflow: hidden;
}
.homeLevelMeter span {
  width: var(--width);
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  background: #32d18e;
}
.homeLevelCardBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.homeLevelCardBottomText {
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}
.homeLevelCardLevelAbout {
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  text-decoration: underline;
  color: #846319;
}
.homeAttention {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 12px;
  color: #888;
}
.homeAttention img {
  margin: 0 4px 0 0;
}
.rankingTabsWrap {
  position: relative;
}
.rankingTabsWrap::after {
  content: '';
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: 1px;
  left: 0;
}
.rankingTabs {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 2px;
  position: relative;
  min-height: 38px;
  gap: 8px;
}
.rankingTabs li {
  position: relative;
  cursor: pointer;
}
.rankingTabs li span {
  width: 176px;
  min-width: 60px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  color: #fff;
  background: #000;
  border-radius: 8px 8px 0 0;
  position: relative;
}
.rankingTabs li::before {
  content: '';
  width: 180px;
  height: 36px;
  border-radius: 10px 10px 0 0;
  background: #000;
  position: absolute;
  top: -2px;
  left: -2px;
}
[data-ranking='month'] [data-ranking-tab-value='month'] span,
[data-ranking='year'] [data-ranking-tab-value='year'] span {
  color: #000;
  background: #fff;
}
[data-ranking='month'] [data-ranking-tab-value='month']::after,
[data-ranking='year'] [data-ranking-tab-value='year']::after {
  content: '';
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: -2px;
  left: 0;
  background: #fff;
  z-index: 1;
}
[data-ranking-content] {
  display: none;
}
[data-ranking='month'] [data-ranking-content='month'],
[data-ranking='year'] [data-ranking-content='year'] {
  display: block;
}
.rankingContainer {
  padding: 0 0 70px 0;
}
.rankingCards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 8px 0;
}
.rankingCard {
  width: 160px;
  height: 46px;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0px 0px 2px 0px #00000033;
}
.rankingCardText {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin: 0 0 4px 0;
  text-align: left;
}
.rankingCardValue {
  display: flex;
  align-items: center;
}
.rankingCardValue img {
  width: 16px;
  margin: 0 4px 0 0;
}
[data-ranking-value]::before {
  content: attr(data-ranking-value);
  font-family: 'Rammetto One', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}
[data-ranking-unit]::before {
  content: attr(data-ranking-unit);
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  margin: 0 4px;
}
.rankingUserCard {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.rankingUserCard._me {
  background: #32d18e1a;
}
.rankingUserCardMoreUser {
  background: #f8f8f8;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
}
[data-user-rank]::before {
  content: attr(data-user-rank);
  width: 30px;
  min-width: 30px;
  height: 20px;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.04em;
  margin: 0 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rankingUserCardIcon {
  width: 48px;
  min-width: 48px;
  height: 48px;
  position: relative;
}
.rankingUserCardIconInner {
  height: 48px;
  border-radius: 48px;
  overflow: hidden;
}
.rankingUserCardIconInner:empty {
  background: #ddd;
}
.rankingUserCardIcon img {
  min-width: 180px;
  margin: -12px 0 0 calc(-90px + 24px);
}
[data-card-user-level] .homeNameCardIcon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  border-radius: 64px;
  mask-image: radial-gradient(transparent 29px, #fff 30px);
}
[data-user-level] .rankingUserCardIconInner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 48px;
  mask-image: radial-gradient(transparent 21.5px, #fff 22px);
}
[data-card-user-level='1'] .homeNameCardIcon::before,
[data-user-level='1'] .rankingUserCardIconInner::before {
  background: linear-gradient(
    135deg,
    #863505 21.22%,
    #a14f16 36.28%,
    #b46529 47.84%,
    #a6541c 63.37%,
    #8d3304 78.52%
  );
}
[data-card-user-level='2'] .homeNameCardIcon::before,
[data-user-level='2'] .rankingUserCardIconInner::before {
  background: linear-gradient(
    131.63deg,
    #858585 24.91%,
    #b0b0b0 43.54%,
    #bebebe 52.93%,
    #b7b7b7 60.53%,
    #888 77.96%
  );
}
[data-card-user-level='3'] .homeNameCardIcon::before,
[data-user-level='3'] .rankingUserCardIconInner::before {
  background: linear-gradient(
    138.01deg,
    #d99901 12.28%,
    #fbcf0e 42.83%,
    #fbd511 49.35%,
    #f8bf0b 65.02%,
    #d59501 91.67%
  );
}
[data-card-user-level='4'] .homeNameCardIcon::before,
[data-user-level='4'] .rankingUserCardIconInner::before {
  background: linear-gradient(
    138.01deg,
    #003e8d 12.28%,
    #2676dc 51.97%,
    #003e8d 91.67%
  );
}
[data-user-level]::before,
[data-user-level]::after {
  content: '';
  z-index: 10;
}
[data-user-level='1']::before,
[data-user-level='2']::before,
[data-user-level='3']::before,
[data-user-level='4']::before {
  position: absolute;
  right: -6px;
  bottom: -2px;
  box-shadow: 0px 0px 2px 0px #00000066;
  width: 20px;
  height: 20px;
  border-radius: 20px;
}
[data-user-level='1']::after,
[data-user-level='2']::after,
[data-user-level='3']::after,
[data-user-level='4']::after {
  position: absolute;
  right: -6px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  background: url(../img/icon-level.svg) no-repeat center center;
}
[data-user-level='1']::before {
  background: linear-gradient(
    135deg,
    #863505 21.22%,
    #a14f16 36.28%,
    #b46529 47.84%,
    #a6541c 63.37%,
    #8d3304 78.52%
  );
}
[data-user-level='2']::before {
  background: linear-gradient(
    131.63deg,
    #858585 24.91%,
    #b0b0b0 43.54%,
    #bebebe 52.93%,
    #b7b7b7 60.53%,
    #888 77.96%
  );
}
[data-user-level='3']::before {
  background: linear-gradient(
    138.01deg,
    #d99901 12.28%,
    #fbcf0e 42.83%,
    #fbd511 49.35%,
    #f8bf0b 65.02%,
    #d59501 91.67%
  );
}
[data-user-level='4']::before {
  background: linear-gradient(
    138.01deg,
    #003e8d 12.28%,
    #2676dc 51.97%,
    #003e8d 91.67%
  );
}
.rankingUserCardItem {
  margin: 0 2px 0 12px;
  text-align: left;
}
[data-user-ranking-name]::before {
  content: attr(data-user-ranking-name);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}
[data-user-ranking-shop] {
  margin: 2px 0 0 0;
  display: flex;
  align-items: center;
}
[data-user-ranking-shop]::before {
  content: '';
  background: url(../img/icon-shop.jpg) no-repeat center center;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  display: block;
  margin: 0 2px 0 4px;
}
[data-user-ranking-shop]::after {
  content: attr(data-user-ranking-shop);
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
}
[data-user-ranking-shop='非公開']::after {
  color: #888;
}
[data-user-ranking-xp] {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
}
[data-user-ranking-xp]::before {
  content: attr(data-user-ranking-xp);
  font-family: 'Rammetto One';
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.04em;
}
[data-user-ranking-xp]::after {
  content: 'XP';
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.04em;
  margin: 0 0 0 4px;
}
.userModal {
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1000;
  display: none;
}
.userModal.show {
  display: block;
}
.userModalInner {
  max-width: 430px;
  height: 100%;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.userModalClose {
  position: absolute;
  top: 18px;
  right: 12px;
}
.userModalContent {
  margin: auto;
}
.userModalContentInner {
  padding: 50px 0;
  position: relative;
  animation: fadeInAndTop 0.5s forwards;
  transition: top 0.3s;
  top: -50px;
}
.userModalContentBody {
  padding: 16px 0 40px 0;
  border-radius: 8px;
  background: #fff;
  width: 303px;
}
.userModalContentBody .homeNameCard {
  cursor: default;
}
.userModalContentImage {
  width: 271px;
  aspect-ratio: 375 / 300;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto 24px auto;
}
.userModalContentImage:empty {
  background: #ddd;
}
.userModalContentImage img {
  display: block;
}
[data-modal-level]::after {
  content: attr(data-modal-level);
}
[data-modal-user-name]::after {
  content: attr(data-modal-user-name);
}
[data-modal-shop]::after {
  content: attr(data-modal-shop);
}
[data-modal-shop='非公開']::after {
  color: #888;
}
.userModalRankingCards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 0 0;
}
.userModalRankingCards .rankingCard {
  width: 124px;
}
.itemModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #eee;
  z-index: 10;
  display: none;
}
.itemModal.show {
  display: block;
}
.itemModalInner {
  max-width: 430px;
  margin: auto;
  background: #e7f5f3;
  position: relative;
}
.itemHeader {
  background: #e7f5f3;
  position: sticky;
  top: 0;
}
.itemHead {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  line-height: 31px;
  letter-spacing: 0.08em;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0 #84631940;
  position: relative;
  background: url(../img/item-header-bg.svg) no-repeat;
  background-size: 100%;
  padding: 10px 0 0 0;
}
.itemModalClose {
  position: absolute;
  top: 18px;
  right: 12px;
  z-index: 10;
}
.itemModalContent {
  border-radius: 24px 24px 0 0;
  background: #fff;
  padding: 16px 24px 76px 24px;
  min-height: calc(100dvh - 80px);
  position: relative;
}
.itemModalContentPoint {
  display: flex;
  justify-content: center;
}
.itemExchangeCard {
  margin: 20px auto 0 auto;
  max-width: 327px;
}
.itemExchangeCard[data-item-status='未獲得'] .itemExchangeCardContentText {
  opacity: 0.7;
}
.itemExchangeCardHead {
  display: flex;
  align-items: center;
  color: #846319;
  font-size: 12px;
  font-weight: 800;
  line-height: 12px;
  margin: 0 0 4px 0;
}
.itemExchangeCardHead span {
  font-size: 14px;
  font-weight: 800;
  line-height: 14px;
}
.itemExchangeCardInner {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 80px;
  border-radius: 8px;
}
.itemExchangeCardIcon {
  width: 80px;
  min-width: 80px;
  position: relative;
}
.itemExchangeCardIcon::before {
  content: '';
  border: 2px solid #846319;
  border-right: 2px solid transparent;
  position: absolute;
  width: calc(100% + 4px);
  height: 100%;
  border-radius: 8px 0 0 8px;
  box-sizing: border-box;
}
.itemExchangeCardContent {
  border: 2px solid #846319;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  padding: 0 12px;
  height: 80px;
  display: flex;
  align-items: center;
  flex: 1;
}
[data-item-status='未獲得'] .itemExchangeCardIcon::before,
[data-item-status='未獲得'] .itemExchangeCardContent {
  border: 2px solid #888;
}
[data-item-status='未獲得'] .itemExchangeCardIcon::before {
  border-right: 2px solid transparent;
}
[data-item-status='未獲得'] .itemExchangeCardContent {
  border-left: 2px solid transparent;
}
.itemExchangeCardContentText {
  padding: 0 6px 0 0;
}
.itemExchangeCardContentText1 {
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
}
.itemExchangeCardContentText2 {
  font-size: 14px;
  font-weight: 800;
  line-height: 19px;
  word-break: auto-phrase;
}
.itemExchangeCardButton {
  width: 84px;
  min-width: 84px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 14px;
  margin: 0 0 0 auto;
}
.itemModalMessage {
  position: fixed;
  width: calc(100% - 32px);
  top: 0;
  left: 0;
  z-index: 100;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #fff;
  background: #32d18ee5;
  padding: 10px 16px;
  margin: 16px;
  border-radius: 8px;
}
.itemModalMessage:empty {
  display: none;
}
[data-item-status='受け取る'] .itemExchangeCardButton {
  color: #000;
  background: #fed401;
}
[data-item-status='受け取る'] .itemExchangeCardButton::before {
  content: '受け取る';
}
[data-item-status='受け取り済'] .itemExchangeCardButton {
  color: #aaaaaa;
  background: #d4d4d4;
  pointer-events: none;
}
[data-item-status='受け取り済'] .itemExchangeCardButton::before {
  content: '受け取り済';
}
[data-item-status='未獲得'] .itemExchangeCardButton {
  color: #aaaaaa;
  background: #fff;
  border: 1px solid #aaaaaa;
  pointer-events: none;
}
[data-item-status='未獲得'] .itemExchangeCardButton::before {
  content: '未獲得';
}
.zoomModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #00000080;
  z-index: 1000;
  display: none;
}
.zoomModal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoomModalContent {
  max-width: 430px;
  margin: auto;
  position: relative;
}
.zoomModalContentImg {
  text-align: center;
  max-width: 327px;
  min-height: 160px;
  margin: 0 auto 18px auto;
}
.zoomModalCloseButton {
  width: 280px;
  margin: auto;
}
.reportModal {
  background: #434343;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 600;
  display: none;
}
.reportModal.show {
  display: block;
}
.reportModal .challengeBadgeContent {
  background: none;
}
.reportModal .challengeBadgeContent::after {
  content: '';
  width: 560px;
  height: 560px;
  position: fixed;
  top: -30px;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/modal-levelup-bg.svg) no-repeat;
}
.reportModal .challengeBadgeContent:before {
  content: '';
  width: 348px;
  height: 145px;
  background: url(../img/report-modal-bg-1.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  margin: auto;
}
.reportHead {
  font-family: 'Rammetto One', sans-serif;
  letter-spacing: 0.05em;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0px #84631940;
  text-align: center;
}
.reportText {
  font-size: 16px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  margin: 16px 0 23px 0;
}
.reportCloseButton {
  width: 262px;
  font-size: 20px;
  margin: 20px auto 0 auto;
}
.reportContent {
  width: 295px;
  height: 348px;
  margin: auto;
  padding: 60px 0 0 0;
  position: relative;
  background: url(../img/report-bg.svg) no-repeat center top;
}
.reportContentXp {
  display: flex;
  align-items: center;
  justify-content: center;
}
.reportContentXp span:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}
.reportContentXp span:nth-child(2) {
  font-family: 'Rammetto One', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  margin: 0 4px 0 8px;
}
.reportContentXp span:nth-child(3) {
  font-family: 'Rammetto One', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
}
.reportContentInner {
  width: 210px;
  height: 220px;
  overflow: auto;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: auto;
}
.reportContentInner::-webkit-scrollbar {
  display: none;
}
.reportContentAttention {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  font-weight: 400;
  font-size: 11px;
  line-height: 14.3px;
  color: #fff;
  text-align: left;
  background: #32d18e;
  border-radius: 8px;
}
.reportContentList {
  padding: 8px 0 0 0;
}
.reportContentList li {
  padding: 0 8px 6px 8px;
  margin: 0 0 8px 0;
  border-bottom: 1px solid #c3c3c3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reportContentList li:last-child {
  margin: 0;
}
.reportContentList li p:nth-child(1) {
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  margin: 0 6px 0 0;
}
.reportContentList li p:nth-child(2) {
  display: flex;
  align-items: center;
  font-family: 'Rammetto One', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  margin: 0 6px 0 0;
}
.reportContentList li p:nth-child(2) img {
  width: 14px;
  margin: 0 3px 0 0;
}
.reportContentList li p:nth-child(2) span {
  font-size: 12px;
  font-weight: 400;
  line-height: 19px;
}
.reportContentList li p:nth-child(3) {
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}
.levelUpModal {
  background: #434343;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 500;
  display: none;
}
.levelUpModal.show {
  display: block;
}
.levelUpModal .challengeBadgeContent:before {
  content: '';
  width: 348px;
  height: 145px;
  background: url(../img/levelup-modal-bg-1.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
}
.levelUpHead {
  font-family: 'Rammetto One', sans-serif;
  letter-spacing: 0.05em;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
  color: #fed401;
  -webkit-text-stroke: 1.5px #846319;
  text-shadow: 1px 1px 0px #84631940;
  text-align: center;
}
.levelUpText {
  font-size: 16px;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 1px #000;
  margin: 16px 0 60px 0;
}
.levelUpModal .challengeBadgeContent {
  padding: 63px 0;
  background: none;
}
.levelUpModal .challengeBadgeContent::after {
  content: '';
  width: 560px;
  height: 560px;
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  margin: auto;
  background: url(../img/modal-levelup-bg.svg) no-repeat;
}
.revelUpContent {
  width: 355px;
  margin: 0 auto;
}
.levelUpButton {
  width: 262px;
  font-size: 20px;
  margin: 70px auto 0 auto;
}
.levelUpSkip {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 16px 0 0 0;
  color: #fed401;
}
.levelAboutModal {
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1000;
  display: none;
}
.levelAboutModal.show {
  display: block;
}
.levelAboutModalInner {
  max-width: 430px;
  height: 100%;
  position: relative;
  margin: auto;
  display: flex;
}
.levelAboutModalContent {
  max-width: 335px;
  margin: auto;
}
.levelAboutModalContentInner {
  position: relative;
  padding: 50px 0;
  animation: fadeInAndTop 0.5s forwards;
  transition: top 0.3s;
  top: -50px;
}
.levelAboutModalClose {
  position: absolute;
  top: 18px;
  right: 12px;
}
.levelAboutTable {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
.levelAboutTableHeader {
  display: flex;
  align-items: center;
  background: #000;
}
.levelAboutTableHeader p {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  position: relative;
}
.levelAboutTableHeader p:nth-child(1) {
  width: 94px;
}
.levelAboutTableHeader p:nth-child(1)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: #fff;
}
.levelAboutTableHeader p:nth-child(2) {
  width: 151px;
}
.levelAboutTableHeader p:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: #fff;
}
.levelAboutTableHeader p:nth-child(3) {
  width: 90px;
}
.levelAboutTableBody .levelAboutTableRow:nth-child(1) {
  background: #67d1321a;
}
.levelAboutTableBody .levelAboutTableRow:nth-child(2) {
  background: #b465291a;
}
.levelAboutTableBody .levelAboutTableRow:nth-child(3) {
  background: #bcbcbc1a;
}
.levelAboutTableBody .levelAboutTableRow:nth-child(4) {
  background: #fcd2101a;
}
.levelAboutTableBody .levelAboutTableRow:nth-child(5) {
  background: #2676db1a;
}
.levelAboutTableRow {
  display: flex;
  align-items: center;
  border-top: 2px solid #fff;
}
.levelAboutTableRow > div {
  display: flex;
  flex-flow: column;
  align-items: center;
  height: 100px;
  position: relative;
}
.levelAboutTableRow > div:nth-child(1) {
  width: 94px;
  justify-content: center;
}
.levelAboutTableRow > div:nth-child(1)::after {
  content: '';
  width: 2px;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
}
.levelAboutTableRow > div:nth-child(2)::after {
  content: '';
  width: 2px;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
}
.levelAboutTableRow > div:nth-child(2) {
  width: 151px;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 0 0;
}
.levelAboutTableRow > div:nth-child(3) {
  width: 90px;
}
.levelAboutLabel {
  font-size: 14px;
  font-weight: 800;
  line-height: 14px;
  margin: 0 0 4px 0;
}
.levelAboutLabel._1 {
  color: #429f13;
}
.levelAboutLabel._2 {
  color: #934e1a;
}
.levelAboutLabel._3 {
  color: #787878;
}
.levelAboutLabel._4 {
  color: #c89709;
}
.levelAboutLabel._5 {
  color: #094490;
}
.levelAboutText0 {
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}
.levelAboutText0 span {
  font-size: 14px;
  line-height: 14px;
}
.levelAboutText1 {
  font-family: 'Rammetto One', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  margin: 4px 0;
}
.levelAboutText1 span {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 4px 0 0;
}
.levelAboutText2 {
  font-size: 10px;
  font-weight: 500;
  line-height: 10px;
  color: #888;
}
.experienceHistoryModal {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: #00000080;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  top: 0;
  left: 0;
}
.experienceHistoryModal.show {
  display: flex;
}
.experienceHistoryModalInner {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  max-width: 343px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: relative;
  position: relative;
  animation: fadeInAndTop 0.5s forwards;
  transition: top 0.3s;
  top: -50px;
}
.experienceHistoryContent {
  overflow: auto;
  max-height: 380px;
}
.experienceHistoryContent::-webkit-scrollbar {
  display: none;
}
.experienceHistoryText {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 12px 0;
}
.experienceHistoryText img {
  width: 20px;
  margin: 0 4px 0 0;
}
.experienceHistoryModalClose {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
}
.history {
  width: 295px;
}
.historyYear {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 8px 0;
  margin: 0 0 12px 0;
  border-bottom: 1px solid #ddd;
}
.historyYear p:nth-child(1) {
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
}
.historyYear p:nth-child(2) {
  font-family: 'Rammetto One', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}
.historyYear p:nth-child(2) span {
  font-weight: 800;
  font-size: 12px;
  line-height: 9.6px;
  margin: 0 0 0 4px;
}
.historyMonths {
  margin: 0 0 20px 0;
}
.historyMonths div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 4px 0;
}
.historyMonths div p:nth-child(1) {
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
}
.historyMonths div p:nth-child(2) {
  font-family: 'Rammetto One', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}
.historyMonths div p:nth-child(2) span {
  font-weight: 800;
  font-size: 12px;
  line-height: 9.6px;
  margin: 0 0 0 4px;
}
.historyEmpty {
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  width: 295px;
  margin: 10px 0 0 0;
}
.vsTeamModal {
  background: #00000080;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 1000;
  display: none;
}
.vsTeamModal.show {
  display: block;
}
.vsTeamModalInner {
  max-width: 430px;
  height: 100%;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeInAndTop 0.5s forwards;
  transition: top 0.3s;
  top: -50px;
}
.vsTeamModalContent {
  border-radius: 20px;
  overflow: auto;
  max-height: max-content;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
.vsTeamModalContent::-webkit-scrollbar {
  display: none;
}
.vsTeamModalContentInner {
  background: #fff;
  padding: 35px 16px 16px 16px;
  margin: 124px 16px 16px 16px;
  border-radius: 20px;
  position: relative;
}
._status .vsTeamModalContentInner {
  margin: 124px 16px 50px 16px;
}
.vsTeamModalContentInner._form.hide {
  display: none;
}
.vsTeamModalContentInner._send {
  display: none;
}
.vsTeamModalContentInner._send.show {
  display: block;
}
.vsTeamModalContentImg {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  margin: auto;
}
.vsTeamModalQuestion {
  box-shadow: 0px 0px 2px 0px #00000033;
  padding: 16px 8px;
  border-radius: 8px;
}
.vsTeamModalQuestionHead {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 12px 0;
}
.vsTeamModalQuestionWitch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px 0;
}
.vsTeamModalQuestionWitch label {
  width: 114px;
  height: 114px;
  border-radius: 114px;
  border: 2px solid #d2d2d2;
  box-shadow: 0px 1px 4px 0px #00000040;
  padding: 5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vsTeamModalQuestionWitch input {
  display: none;
}
.vsTeamModalQuestionWitch input:checked + label {
  border: 4px solid #fed401;
}
.vsTeamModalQuestionWitch label p {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 120%;
  text-align: center;
  color: #fff;
  position: relative;
}
.vsTeamModalQuestionWitch label img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}
.vsTeamModalQuestionWitchOr {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 120%;
  color: #888888;
}
.vsTeamModalButton {
  width: 100%;
  font-size: 20px;
  margin: 0 0 12px 0;
}
.vsTeamModalText1 {
  font-family: 'Rammetto One', sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 16px 0;
  color: #fed401;
  -webkit-text-stroke: 1px #846319;
}
.vsTeamModalText1.lose {
  color: #ccc;
  -webkit-text-stroke: 1px #5d5d5d;
}
.vsTeamModalText2 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  word-break: auto-phrase;
}
.vsTeamModalText3 {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 23px 0;
}
._send.show .vsTeamModalText3 {
  margin: 0;
}
.vsTeamModalText4 {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.vsTeamUserModalButton {
  padding: 23px 8px 16px 8px;
}
.vsTeamModalClose {
  position: absolute;
  top: 18px;
  right: 12px;
}
.vsTeamModalQuestionInner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}
.vsTeamModalQuestionIcon {
  width: 40px;
  height: 40px;
}
.vsTeamModalQuestionStatus {
  flex: 1;
}
.vsTeamModalQuestionStatusValues {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
}
.vsTeamModalQuestionStatusValue {
  font-family: 'Rammetto One', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: flex-end;
}
.vsTeamModalQuestionStatusValue.winning {
  font-size: 24px;
}
.vsTeamModalQuestionStatusValue::after {
  content: '%';
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.vsTeamModalQuestionStatusVs {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #888;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  pointer-events: none;
}
.vsTeamModalQuestionStatusMater {
  border-radius: 20px;
  height: 20px;
  width: 100%;
  overflow: hidden;
  display: flex;
  margin: 2px 0 10px 0;
}
.vsTeamModalQuestionStatusMater span {
  height: 20px;
}
.vsTeamModalQuestionFooter {
  margin: 5px 0 0 0;
  display: flex;
  justify-content: space-between;
}
.vsTeamModalQuestionFooter p {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}
.vsTeamModalQuestionFooter p::after {
  content: 'XP';
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  margin: 0 0 0 2px;
}
.vsTeamStatus {
  position: fixed;
  max-width: 430px;
  height: 58px;
  right: 0;
  left: 0;
  bottom: 78px;
  margin: auto;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.vsTeamStatus .vsTeamModalQuestion {
  padding: 8px;
  width: 172px;
  background: #fff;
  margin: 0 16px 0 auto;
  box-shadow: 0px 0px 6px 0px #00000033;
  cursor: pointer;
  pointer-events: all;
}
.vsTeamStatus .vsTeamModalQuestionInner {
  gap: 4px;
}
.vsTeamStatus .vsTeamModalQuestionIcon {
  width: 24px;
  height: 24px;
}
.vsTeamStatus .vsTeamModalQuestionStatusValue {
  font-size: 12px;
}
.vsTeamStatus .vsTeamModalQuestionStatusValue.winning {
  font-size: 14px;
}
.vsTeamStatus .vsTeamModalQuestionStatusVs {
  font-size: 10px;
  bottom: 2px;
}
.vsTeamStatus .vsTeamModalQuestionStatusValue::after {
  font-size: 10px;
}
.vsTeamStatus .vsTeamModalQuestionStatusMater {
  height: 12px;
  border-radius: 12px;
  margin: 2px 0 0 0;
}
.vsTeamStatus .vsTeamModalQuestionStatusMater span {
  height: 12px;
}
.vsTeamStatus .vsTeamModalQuestionFooter {
  margin: 2px 0 0 0;
}
.vsTeamStatus .vsTeamModalQuestionFooter p {
  font-size: 12px;
}
.vsTeamStatus .vsTeamModalQuestionFooter p::after {
  font-size: 10px;
}
.vsTeamModal._result .vsTeamUserModalButton {
  padding: 18px 8px 0 8px;
}
.vsTeamUserSkip {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 27px;
  letter-spacing: 0.04em;
  color: #846319;
  margin: 0 auto;
  display: block;
}
.vsTeamModalContentInner._send .vsTeamUserModalButton {
  padding: 18px 8px 0 8px;
}
.accessDeniedModal {
  position: fixed;
  width: 100%;
  height: 100dvh;
  background: #00000080;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  top: 0;
  left: 0;
}
.accessDeniedModal.show {
  display: flex;
}
.accessDeniedModalInner {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  max-width: 343px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: relative;
  position: relative;
  animation: fadeInAndTop 0.5s forwards;
  transition: top 0.3s;
  top: -50px;
}
.accessDeniedContent {
  overflow: auto;
  max-height: 380px;
}
.accessDeniedContent::-webkit-scrollbar {
  display: none;
}
.accessDeniedHead {
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 14px 0;
  text-align: center;
}
.accessDeniedText {
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
.accessDeniedText a {
  color: #c7985a;
  text-decoration: underline;
}
.accessDeniedModalClose {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 16px;
  height: 16px;
}