@charset "UTF-8";
/*!
* [Kuraray]
* Copyright 2025 [Kuraray].
* All rights reserved.
* Developed by Nanoconnect, Inc.
*/
:root {
  --rationaltext-book: "RationalTextBook";
  --rationaltext-book-italic: "RationalText-BookItalic";
  --rationaltext-medium: "RationalText-Medium";
  --rationaltext-medium-italic: "RationalText-MediumItalic";
  --rationaltext-semibold: "RationalText-SemiBold";
  --bgColor: #fff;
  --brandColor: hsl(195, 100%, 46%);
  --txtColor: hsl(225, 100%, 12%);
  --linkColor: hsl(225, 100%, 12%);
  --borderColor: hsl(225, 100%, 12%);
  --font-xxs: 10px;
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-xxl: 1.5rem;
  --font-xxxl: 1.625rem;
  --bgAlpha: 1;
  --txtAlpha: 1;
}

@font-face {
  font-family: "RationalTextBook";
  src: url("../assets/fonts/RationalText-Book.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
  font-size: 108%;
  font-feature-settings: "lnum";
}
@font-face {
  font-family: "RationalText-BookItalic";
  src: url("../assets/fonts/RationalText-BookItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
  font-size: 108%;
  font-feature-settings: "lnum";
}
@font-face {
  font-family: "RationalText-Medium";
  src: url("../assets/fonts/RationalText-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
  font-size: 108%;
  font-feature-settings: "lnum";
}
@font-face {
  font-family: "RationalText-MediumItalic";
  src: url("../assets/fonts/RationalText-MediumItalic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
  font-size: 108%;
  font-feature-settings: "lnum";
}
@font-face {
  font-family: "RationalText-SemiBold";
  src: url("../assets/fonts/RationalText-SemiBold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
  font-size: 108%;
  font-feature-settings: "lnum";
}
.DefaultPage {
  font-size: var(--font-sm);
  color: var(--txtColor);
  overflow-x: hidden;
}

.DefaultPage__main {
  padding: 1.5rem;
  padding-bottom: 6.3125rem;
}

.DefaultPage__background {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.DefaultPage__background_img {
  position: absolute;
  z-index: -1;
}
.DefaultPage__background_img._groupchallenge {
  top: 1%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 92%;
  max-width: 400px;
}
.DefaultPage__background_img._someonechallenge {
  top: 1%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
  max-width: 455px;
  max-height: 660px;
  -o-object-fit: cover;
  object-fit: cover;
}

.DefaultPage__heading {
  font-size: var(--font-sm);
  text-align: center;
  margin-bottom: 1.5rem;
}

@media (max-width: 375.2px) {
  .DefaultPage__main {
    padding: 1rem 1rem 5.8125rem 1rem;
  }
  .DefaultPage__heading {
    margin-bottom: 0.5rem;
  }
}
.NoFooterPage {
  font-size: var(--font-sm);
  color: var(--txtColor);
  overflow-x: hidden;
}

.NoFooterPage__background {
  position: fixed;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.NoFooterPage__background_img._login {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 0% 0%;
  object-position: 0% 0%;
}

.NoFooterPage__main {
  padding: 1.5rem;
}

.NoFooterPage__heading {
  font-size: var(--font-sm);
  text-align: center;
  margin-bottom: 1.25rem;
}
.NoFooterPage__heading._larger {
  font-size: var(--font-xxxl);
  text-align: center;
  margin-bottom: 1rem;
}
.NoFooterPage__heading._login {
  font-size: var(--font-xxxl);
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 375.2px) {
  .NoFooterPage__main {
    padding: 1rem 1rem 1rem;
  }
  .NoFooterPage__heading._larger {
    font-size: var(--font-xxxl);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .NoFooterPage__heading._login {
    font-size: var(--font-xxxl);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0.625rem;
  }
}
.TutorialPage {
  font-size: var(--font-sm);
  color: var(--txtColor);
  overflow-x: hidden;
}

.TutorialPage__background {
  position: fixed;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.TutorialPage__main {
  padding: 3.5rem 1.5rem;
}

.TutorialPage__heading {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: var(--font-xxl);
  font-weight: bold;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  width: 25%;
}

.TutorialPage__container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: auto;
}
.TutorialPage__container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 167px;
  height: 162px;
  background-image: url(../images/tutorial_top_image.png);
  background-size: 167px auto;
  background-repeat: no-repeat;
  z-index: -1;
}
.TutorialPage__container::after {
  content: "";
  position: fixed;
  bottom: 0;
  right: 0;
  width: 145px;
  height: 141px;
  background-image: url(../images/tutorial_bottom_image.png);
  background-size: 145px auto;
  background-repeat: no-repeat;
  z-index: -1;
}

.TutorialPage__slider_wrapper {
  display: flex;
  transition: transform 0.4s ease;
  width: 400%;
}

.TutorialPage__slider {
  flex: 0 0 100%;
  width: 100%;
}

.TutorialPage__img_container {
  width: 25%;
  height: 262px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.TutorialPage__img {
  width: 86%;
  max-height: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.TutorialPage__img._logo {
  width: 70%;
}

.TutorialPage__txt_container {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-md);
  padding: 0 0.75rem;
}

.TutorialPage__paginations {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 5rem;
}

.TutorialPage__pagination {
  width: 14px;
  height: 14px;
  background: hsl(225, 13%, 82%);
  border-radius: 50%;
  margin: 0 0.625rem;
}

.TutorialPage__pagination._active {
  background: hsl(225, 100%, 12%);
}

.TutorialPage__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-md);
  margin-bottom: 2.5rem;
}
.TutorialPage__btn._start {
  justify-content: center;
}

.TutorialPage__btn_skip {
  color: hsl(226, 13%, 56%);
}

@media (max-width: 375.2px) {
  .TutorialPage__main {
    padding: 2.5rem 1rem 1rem;
  }
  .TutorialPage__heading {
    margin-bottom: 0.75rem;
  }
  .TutorialPage__img_container {
    width: 25%;
    height: 220px;
    margin-bottom: 1rem;
  }
  .TutorialPage__txt_container {
    font-size: var(--font-sm);
    margin-bottom: 1rem;
  }
  .TutorialPage__paginations {
    margin: 1rem 0 1rem;
  }
  .TutorialPage__btn {
    margin-bottom: 0;
  }
}
.ChallengePage {
  color: var(--txtColor);
  font-size: var(--font-md);
  overflow-x: hidden;
}

.ChallengePage__main {
  padding: 1.5rem;
  padding-bottom: 6.3125rem;
}

.ChallengePage__heading {
  font-size: var(--font-sm);
  text-align: center;
  margin-bottom: 1rem;
}

.ChallengePage__background {
  position: fixed;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.ChallengePage__background_top {
  position: fixed;
  top: 24px;
  left: 0;
  width: 167px;
  height: 203px;
}

.ChallengePage__background_bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 212px;
  height: 280px;
}

.ChallengePage__category {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  font-size: var(--font-xs);
}

.ChallengePage__question_container {
  background: #fff;
  border-radius: 0.3125rem;
  position: relative;
  left: -20px;
  width: calc(100% + 40px);
  opacity: 0.8;
  padding: 1.25rem;
  margin-bottom: 2.5rem;
}

.ChallengePage__question {
  font-weight: 500;
}

.ChallengePage__success {
  position: absolute;
  top: 12px;
  right: 24px;
  width: 21px;
}

.ChallengePage__retry {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 52px;
}

.ChallengePage__accuracy {
  margin: 0 0 0.25rem;
  color: hsl(350, 66%, 56%);
  font-size: var(--font-xs);
  text-align: right;
}

.ChallengePage__accuracy_number {
  font-size: var(--font-md);
  font-weight: bold;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
}

.ChallengePage__challenge_title {
  color: hsl(195, 100%, 46%);
  margin-bottom: 0.75rem;
  font-size: var(--font-xl);
  font-weight: bold;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
}

.ChallengePage__images {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 20px;
  column-gap: 20px;
  row-gap: 8px;
  width: 87%;
  margin: 0 auto 1.5rem;
}
.ChallengePage__images._success::after {
  content: "";
  background-image: url(../images/〇.png);
  width: 116px;
  height: 116px;
  background-size: 116px auto;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: calc(50% - 61px);
  left: calc(50% - 58px);
  z-index: 11;
}
.ChallengePage__images._failure::after {
  content: "";
  background-image: url(../images/✕.png);
  width: 133px;
  height: 133px;
  background-size: 133px auto;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: calc(50% - 69.5px);
  left: calc(50% - 66.5px);
  z-index: 11;
}

.ChallengePage__images_wrapper {
  position: relative;
  width: calc(50% - 10px);
  margin-right: auto;
}
.ChallengePage__images_wrapper._select::after {
  content: "A";
  position: absolute;
  top: 0;
  left: 0;
  width: 37px;
  height: 40px;
  background-color: hsl(225, 100%, 12%);
  color: #fff;
  font-size: var(--font-lg);
  border-radius: 20px 0 80px 0;
  padding: 0.125rem 0px 0px 0.5rem;
}
.ChallengePage__images_wrapper._select:nth-child(1) {
  margin: 0 auto;
}
.ChallengePage__images_wrapper._select:nth-child(1)::after {
  content: "A";
}
.ChallengePage__images_wrapper._select:nth-child(2)::after {
  content: "B";
}
.ChallengePage__images_wrapper._select:nth-child(3)::after {
  content: "C";
}
.ChallengePage__images_wrapper._select:nth-child(4)::after {
  content: "D";
}
.ChallengePage__images_wrapper._select._active::after {
  background-color: hsl(195, 100%, 46%);
}
.ChallengePage__images_wrapper._select._failure::after {
  background-color: hsl(359, 78%, 66%);
}
.ChallengePage__images_wrapper._select._disabled::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% - 6px);
  background-color: hsl(225, 100%, 12%);
  opacity: 0.4;
  z-index: 10;
  border-radius: 0.3125rem;
}

.ChallengePage__image {
  width: 100%;
  position: relative;
}
.ChallengePage__image._choice {
  border-radius: 0.3125rem;
  border: 3px solid hsl(225, 100%, 12%);
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
  cursor: pointer;
}
.ChallengePage__image._active {
  border: 3px solid hsl(195, 100%, 46%);
}
.ChallengePage__image._failure {
  border: 3px solid hsl(359, 78%, 66%);
}

.ChallengePage__image_wrapper {
  position: relative;
}
.ChallengePage__image_wrapper._failure::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 4px);
  position: absolute;
  top: 0;
  left: 0;
  background-color: hsl(225, 100%, 12%);
  border-radius: 0.3125rem;
  opacity: 0.4;
}

.ChallengePage__caution {
  color: hsl(350, 66%, 56%);
  margin-bottom: 1rem;
  font-size: var(--font-sm);
}

.ChallengePage__answer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ChallengePage__checkbox {
  margin-top: 1rem;
}

.ChallengePage__choice {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Challenge__caution {
  color: hsl(350, 66%, 56%);
  margin: 1.5rem 0;
}

.ChallengePage__btn {
  margin-top: 1rem;
}

.ChallengePage__btn_back {
  flex: 0 1 calc((100% - 40px) * 0.23);
}

.ChallengePage__btn_proceed {
  flex: 0 1 calc((100% - 40px) * 0.77);
}

.ChallengePage__feed {
  margin-top: 3.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  font-weight: bold;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
}

.ChallengePage__feed__icon {
  width: 14px;
}

@media (max-width: 375.2px) {
  .ChallengePage__main {
    padding: 1rem 1rem 5.8125rem 1rem;
  }
  .ChallengePage__heading {
    margin-bottom: 0.5rem;
  }
  .ChallengePage__feed {
    margin-top: 3rem;
  }
  .ChallengePage__images {
    margin: 0 auto 1rem;
  }
}
.NoPaddingPage {
  font-size: var(--font-sm);
  color: var(--txtColor);
  overflow-x: hidden;
}

.NoPaddingPage__main {
  padding: 0;
  padding-bottom: 6.3125rem;
}

.NoPaddingPage__background {
  position: fixed;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.NoPaddingPage__background_img._rankinglist {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 0% 0%;
  object-position: 0% 0%;
}

.NoPaddingPage__heading {
  font-size: var(--font-sm);
  text-align: center;
  margin: 0;
}

@media (max-width: 375.2px) {
  .NoPaddingPage__main {
    padding: 0 0 5.4375rem;
  }
}
.Header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  width: 100%;
  height: 3.125rem;
  background-color: #fff;
}

.Header__group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.Header__group._center {
  position: absolute;
  left: calc(50% - 12px);
}

.Header__icon {
  display: flex;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--txtColor);
  cursor: pointer;
}

.Header__switch_icon._active {
  fill: var(--primary);
}

.Header__notice {
  position: relative;
}
.Header__notice::after {
  content: "99";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 90px;
  font-size: var(--font-xxs);
  color: var(--txtColor);
  background-color: hsl(9, 100%, 72%);
}

.Footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 0 0.625rem;
  width: 100%;
  height: 3.625rem;
  background-color: #fff;
  -webkit-filter: drop-shadow(0px 5px 25px rgba(0, 15, 60, 0.12));
  filter: drop-shadow(0px 5px 25px rgba(0, 15, 60, 0.12));
  font-size: var(--font-xxs);
  border-radius: 0.3125rem 0.3125rem 0 0;
}

.Footer__group {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 2.5rem;
  width: calc((100% - 73px - 5rem) / 2);
}
.Footer__group._center {
  position: absolute;
  top: -20px;
  left: calc(50% - 36.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 73px;
  border-radius: 50%;
  background: var(--brandColor);
}

.Footer__icon_background {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--brandColor);
}

.Footer__icon {
  display: flex;
  align-items: center;
  fill: hsl(225, 13%, 65%);
  cursor: pointer;
}
.Footer__icon._center {
  width: 2rem;
  height: 2rem;
  fill: #fff;
  position: relative;
  top: 2px;
  right: -2px;
}
.Footer__icon._center._active {
  fill: #fff;
}
.Footer__icon._active {
  fill: hsl(195, 100%, 46%);
}

.Footer__item {
  position: relative;
  top: -5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  color: hsl(225, 13%, 65%);
}
.Footer__item._notice::after {
  content: "99";
  position: absolute;
  top: -8px;
  right: -6px;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 90px;
  font-size: var(--font-xxs);
  color: #fff;
  background-color: hsl(9, 100%, 72%);
}
.Footer__item._center {
  position: relative;
  top: -19px;
  gap: 0;
}
.Footer__item._active {
  color: hsl(195, 100%, 46%);
}

/* メニューのベーススタイル */
.SideMenu {
  position: fixed;
  top: 3.125rem;
  right: -100%;
  width: 100%;
  height: calc(100% - 3.125rem);
  background-color: #000f3c;
  transition: right 0.5s ease;
  z-index: 1030;
  padding-top: 30px;
  color: white;
}

.SideMenu._active {
  right: 0%;
}

.SideMenu__link {
  padding: 1rem 1.5rem;
  margin-bottom: 0.625rem;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 20px;
}

.SideMenu__icon {
  fill: #fff;
  width: 1.25rem;
}

.Form__main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.Form__operation {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 3.5rem;
}
.Form__operation._choice {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

.Form__required {
  color: hsl(9, 100%, 72%);
}

.Form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.Form__attention {
  color: hsl(350, 66%, 56%);
}

.Form__operation_back {
  flex: 0 1 calc((100% - 24px) * 0.35);
}

.Form__operation_next {
  flex: 0 1 calc((100% - 24px) * 0.65);
}

@media (max-width: 375.2px) {
  .Form__main {
    gap: 1rem;
  }
  .Form__operation {
    margin-top: 1.5rem;
    margin-bottom: 0;
  }
}
.Modal {
  display: none;
  opacity: 0;
  position: fixed;
  z-index: 1200;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  transition: opacity 0.3s ease;
  width: 90%;
  border-radius: 0.3125rem;
  padding: 1.5rem;
}
.Modal._img {
  background-color: transparent;
  width: 100%;
  padding: 0;
}

.Modal._active {
  opacity: 1;
  display: block;
  transition: opacity 0.3s;
  -webkit-animation: appear 0.5s ease;
  animation: appear 0.5s ease;
}

.Modal._badge::after {
  content: "";
  display: block;
  width: 136px;
  height: 136px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../images/badgelist_image.png);
  background-size: 136px auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  z-index: -1;
}
.Modal._badge._not_achieved::after {
  content: "";
  display: block;
  width: 136px;
  height: 136px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../images/badgelist_image_not_achieved.png);
  background-size: 136px auto;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.Modal__header {
  color: var(--brandColor);
  font-size: var(--font-md);
  font-weight: bold;
  margin-bottom: 2.5rem;
  position: relative;
}

.Modal__close {
  text-align: right;
}

.Modal__close_btn {
  display: inline-block;
  background: url(../../../images/svg/icon_close_darkblue.svg);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.Modal__close_btn._img {
  background: url(../../../images/svg/icon_cross_white.svg);
}

.Modal__img {
  max-height: 90vh;
}

.Modal__contents {
  display: flex;
  flex-direction: column;
  min-height: 204px;
  font-size: var(--font-xs);
}
.Modal__contents._top_and_bottom_center {
  justify-content: center;
}
.Modal__contents._min_height_auto {
  min-height: auto;
}

.Modal__button {
  margin-top: auto;
}
.Modal__button._choice {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.Modal__scroll {
  max-height: 50vh;
  overflow: auto;
}

.Modal__badge {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
}

.Modal__badge_img {
  width: 146px;
}

.Modal__background {
  display: none;
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 15, 60, 0.4);
  transition: opacity 0.3s ease; /* 追加:アニメーションの設定 */
}
.Modal__background._white {
  background: #fff;
  z-index: 9999;
}
.Modal__background._img {
  background: hsl(225, 100%, 12%);
}
.Modal__background._active {
  opacity: 1;
  display: block;
  transition: opacity 0.3s; /* アニメーションの設定 */
  -webkit-animation: appear 0.5s ease;
  animation: appear 0.5s ease;
  pointer-events: auto;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 375.2px) {
  .Modal {
    padding: 0.75rem;
  }
  .Modal__header {
    font-size: var(--font-md);
    margin-bottom: 0.5rem;
  }
  .Modal._badge::after {
    width: 104px;
    height: 104px;
    background-size: 104px auto;
  }
  .Modal._badge._not_achieved::after {
    width: 104px;
    height: 104px;
    background-size: 104px auto;
  }
  .Modal__badge {
    margin-bottom: 1rem;
  }
}
.HalfModal {
  opacity: 1;
  position: fixed;
  z-index: 1200;
  left: 0;
  bottom: 0%;
  transform: translate(0%, 100%);
  background-color: #fff;
  width: 100%;
  border-radius: 0.3125rem;
  padding: 1.5rem;
  transition: 1s all;
}

.HalfModal._active {
  bottom: 0%;
  transform: translate(0%, 0%);
  transition: 1s all;
}

.HalfModal__control {
  padding: 0 0 2rem;
  cursor: pointer;
}

.HalfModal__control_btn {
  margin: 0 auto;
  width: 58px;
  height: 5px;
  border-radius: 90px;
  background-color: #000;
}

.HalfModal__contents {
  display: flex;
  flex-direction: column;
  min-height: 204px;
  font-size: var(--font-xs);
}

@-webkit-keyframes appear {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0%;
  }
}
@keyframes appear {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0%;
  }
}
@media (max-width: 375.2px) {
  .HalfModal {
    padding: 0.75rem;
  }
}
.ImgModal {
  display: none;
  opacity: 0;
  position: fixed;
  z-index: 1200;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  transition: opacity 0.3s ease;
  width: 100%;
  border-radius: 0.3125rem;
  padding: 0;
}

.ImgModal._active {
  opacity: 1;
  display: block;
  transition: opacity 0.3s;
  -webkit-animation: appear 0.5s ease;
  animation: appear 0.5s ease;
}

.ImgModal__close {
  text-align: right;
}

.ImgModal__contents {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ImgModal__close_btn {
  display: inline-block;
  background: url(../../../images/svg/icon_cross_white.svg);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.ImgModal__img {
  max-height: 90vh;
  max-width: 100%;
}

.ImgModal__background {
  display: none;
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: hsl(225, 100%, 12%);
  transition: opacity 0.3s ease; /* 追加:アニメーションの設定 */
}
.ImgModal__background._active {
  opacity: 1;
  display: block;
  transition: opacity 0.3s; /* アニメーションの設定 */
  -webkit-animation: appear 0.5s ease;
  animation: appear 0.5s ease;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ChallengeList__link {
  display: block;
  border-radius: 0.3125rem;
  box-shadow: 0px 2px 5px rgba(0, 15, 60, 0.15);
  position: relative;
  padding: 1rem 56px;
  margin-bottom: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
}
.ChallengeList__link::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 58px;
  top: 15px;
  left: 0;
  background-image: url(../images/svg/icon_ChallengeList.svg);
  background-size: 48px 58px;
  background-repeat: no-repeat;
  z-index: -1;
}
.ChallengeList__link::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 87px;
  top: 25px;
  right: 30px;
  background-image: url(../images/ChallengeList_image.png);
  background-size: 90px auto;
  z-index: -1;
}

.ChallengeList__title {
  font-size: var(--font-md);
  margin-bottom: 0.75rem;
}
.ChallengeList__title._attached {
  min-height: calc(23.2px + 0.75rem + 20.8px);
}

.ChallengeList__status {
  fill: var(--txtColor);
  display: flex;
  margin-top: 0.25rem;
  gap: 0.625rem;
}

.ChallengeList__result {
  position: absolute;
  top: calc(50% - 30px);
  right: 0;
  height: 60px;
}

.ChallengeList__attached {
  width: calc(100% + 56px + 56px - 32px);
  position: relative;
  left: -41px;
}

.ChallengeList__attached_img {
  width: 100%;
}

.News__tag {
  display: inline;
  color: #fff;
  font-size: var(--font-xs);
  height: 26px;
  min-width: 95px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0.625rem;
  border-radius: 0.3125rem;
  line-height: 26px;
  text-align: center;
}
.News__tag._bg_cyan {
  background-color: hsl(195, 100%, 46%);
}
.News__tag._bg_darkblue {
  background-color: hsl(225, 100%, 12%);
}
.News__tag._bg_sunrisebeige {
  background-color: hsl(47, 18%, 80%);
}
.News__tag._bg_sunriseyellow {
  background-color: hsl(42, 100%, 64%);
}
.News__tag._bg_sunriseorange {
  background-color: hsl(9, 100%, 72%);
}
.News__tag._bg_sunrisepurple {
  background-color: hsl(268, 17%, 64%);
}
.News__tag._bg_plum {
  background-color: hsl(339, 38%, 58%);
}
.News__tag._bg_success {
  background-color: hsl(113, 35%, 57%);
}

.News__status {
  display: flex;
  gap: 0.625rem;
  font-size: var(--font-xs);
  margin-bottom: 0.25rem;
}

.News__date {
  margin-right: 0.25rem;
}

.News__wrapper {
  display: flex;
  flex-direction: column;
}

.News__title {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.News__feed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.News__stamp_wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.News__stamp {
  width: 16px;
}

.News__link_btn {
  margin-top: 2rem;
}

.NewsList__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: 1px solid hsl(225, 100%, 12%);
  padding: 1.25rem 1.25rem 1.25rem 0;
}
.NewsList__item::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  right: 0;
  width: 7px;
  height: 14px;
  background-image: url(../images/svg/icon_arrow_right_darkblue.svg);
  background-size: 7px 14px;
  background-repeat: no-repeat;
}
.NewsList__item._latest {
  padding-top: 1rem;
}

.NewsList__tag {
  display: inline;
  color: #fff;
  font-size: var(--font-xs);
  height: 26px;
  min-width: 95px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0.625rem;
  border-radius: 0.3125rem;
  line-height: 26px;
  text-align: center;
}
.NewsList__tag._bg_cyan {
  background-color: hsl(195, 100%, 46%);
}
.NewsList__tag._bg_darkblue {
  background-color: hsl(225, 100%, 12%);
}
.NewsList__tag._bg_sunrisebeige {
  background-color: hsl(47, 18%, 80%);
}
.NewsList__tag._bg_sunriseyellow {
  background-color: hsl(42, 100%, 64%);
}
.NewsList__tag._bg_sunriseorange {
  background-color: hsl(9, 100%, 72%);
}
.NewsList__tag._bg_sunrisepurple {
  background-color: hsl(268, 17%, 64%);
}
.NewsList__tag._bg_plum {
  background-color: hsl(339, 38%, 58%);
}
.NewsList__tag._bg_success {
  background-color: hsl(113, 35%, 57%);
}

.NewsList__status {
  display: flex;
  gap: 0.625rem;
  font-size: var(--font-xs);
  margin-bottom: 0.25rem;
}

.NewsList__date {
  margin-right: 0.25rem;
}

.NewsList__feed {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.NewsList__stamp_wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.NewsList__stamp {
  width: 16px;
}

.NewsList__link_btn {
  margin-top: 2rem;
}

@media (max-width: 375.2px) {
  .NewsList__item {
    padding: 1rem 1rem 1rem 0;
  }
}
/* メニューのベーススタイル */
.Menu__list {
  margin-bottom: 1rem;
}
.Menu__list:last-child {
  margin-bottom: 0;
}

.Menu._active {
  right: 0%;
}

.Menu__list_heading {
  background-color: hsl(225, 100%, 12%);
  color: #fff;
  border-radius: 0.3125rem;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

.Menu__link {
  padding: 0.75rem 1rem 1rem;
  fill: var(--txtColor);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 50px;
  gap: 1.25rem;
  border-bottom: 1px solid hsl(225, 100%, 12%);
  background-image: url(../images/svg/icon_arrow_right_darkblue.svg);
  background-size: 7px auto;
  background-position: right 12px center;
  background-repeat: no-repeat;
  width: 100%;
  color: var(--txtColor);
  font-size: var(--font-sm);
}

.Menu__icon {
  fill: var(--txtColor);
  width: 1.25rem;
}

.Feed {
  position: relative;
  // left: -24px;
  // width: calc(100% + 48px);
}

.Feed__item {
  border-radius: 0.3125rem;
  box-shadow: 0px 2px 5px rgba(0, 15, 60, 0.15);
  position: relative;
  padding: 0.75rem 1rem 1rem;
  margin-bottom: 1rem;
}
.Feed__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 79px;
  height: 79px;
  background-image: url(../images/feed_top_image.svg);
  background-size: 79px auto;
  z-index: -1;
  border-radius: 0.3125rem 0 0 0;
}
.Feed__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 87px;
  height: 58px;
  background-image: url(../images/feed_bottom_image.svg);
  background-size: 87px 58px;
  z-index: -1;
  border-radius: 0 0 0.3125rem 0;
}
.Feed__item:last-child {
  margin-bottom: 0;
}

.Feed__menu {
  fill: var(--txtColor);
  text-align: right;
  width: 18px;
  height: 18px;
  margin-left: auto;
  cursor: pointer;
  position: relative;
  padding-right: 0.75rem;
}

.Feed__person {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.Feed__person_group {
  font-size: var(--font-sm);
}

.Feed__person_img_container {
  height: 34px;
  width: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.Feed__person_img {
  max-height: 100%;
}

.Feed__person_name {
  display: inline;
  font-size: var(--font-xl);
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  border-bottom: 1px solid hsl(225, 100%, 12%);
  cursor: pointer;
  font-weight: bold;
}

.Feed__person_date {
  font-size: var(--font-xxs);
  color: hsl(225, 32%, 29%);
  margin-top: 0.25rem;
}

.Feed__challenge {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: var(--font-sm);
}

.Feed__challenge_title {
  display: inline;
  border-bottom: 1px solid hsl(225, 100%, 12%);
  cursor: pointer;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.Feed__challenge_category_container {
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.Feed__challenge_detail_container {
  width: 100%;
}

.Feed__challenge_status {
  fill: var(--txtColor);
  display: flex;
  gap: 0.625rem;
  font-size: var(--font-xs);
}

.Feed__challenge_status_clear {
  display: flex;
  gap: 0.5rem;
}

.Feed__response {
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.Feed__response_add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  background-color: hsl(220, 13%, 95%);
  border-radius: 90px;
  flex-shrink: 0;
  fill: var(--txtColor);
  cursor: pointer;
}

.Feed__response_icons {
  height: 28px;
  width: 100%;
  border-radius: 17px;
  display: flex;
  align-items: center;
  padding: 0;
  gap: 0.5rem;
}

.Feed__challenge_icon {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background-color: hsl(220, 13%, 95%);
  padding: 0.125rem 0.5rem;
  border-radius: 90px;
  cursor: pointer;
  font-size: var(--font-xs);
  color: var(--txtColor);
  border: 1px solid transparent;
}
.Feed__challenge_icon._me {
  color: hsl(195, 100%, 46%);
}
.Feed__challenge_icon._active, .Feed__challenge_icon:active {
  border: 1px solid hsl(195, 100%, 46%);
  color: hsl(195, 100%, 46%);
}

.Feed__challenge_icon_img {
  width: 14px;
}

.Feed__attached_img_container {
  height: 198px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.Feed__attached_img {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0.3125rem;
}

.Feed__attached_txt {
  position: relative;
  width: 100%;
  margin: 0 auto 0.75rem;
  background-color: hsl(220, 13%, 95%);
  border-radius: 0.3125rem;
  padding: 0.25rem 0.625rem;
  min-height: 68px;
}

.Feed__attached_txt_original {
  color: hsl(226, 21%, 38%);
}

.Feed__attached_toggle {
  position: absolute;
  bottom: 6px;
  right: 12px;
  color: hsl(195, 100%, 46%);
  border-bottom: 1px solid hsl(195, 100%, 46%);
  cursor: pointer;
}

.Feed__meta_action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 375.2px) {
  .Feed__challenge {
    margin-bottom: 1.5rem;
  }
}
.SubWindow {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: 100%;
  z-index: 1001;
  background-color: #fff;
  padding: 0.625rem 0.75rem;
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
  border-radius: 0.3125rem;
  min-height: 44px;
  min-width: 108px;
}

.SubWindow._position_right {
  right: 0;
}

.SubWindow._active {
  opacity: 1;
  display: block;
  transition: opacity 0.3s;
  -webkit-animation: appear 0.5s ease;
  animation: appear 0.5s ease;
}

.SubWindow__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  max-height: 188px;
  overflow-y: auto;
}

.SubWindow__icons_img {
  width: 30px;
  -o-object-fit: contain;
  object-fit: contain;
  cursor: pointer;
  padding: 0.125rem;
}
.SubWindow__icons_img._active, .SubWindow__icons_img:active {
  background: hsl(194, 83%, 93%);
  border-radius: 0.3125rem;
}

.SubWindow__txt {
  text-align: center;
  cursor: pointer;
}

.Rankinglist__list {
  overflow-y: scroll;
  height: calc(100dvh - 371px);
}
.Rankinglist__list._by_rank {
  height: calc(100dvh - 241px);
  padding-top: 0.25rem;
}
.Rankinglist__list._no_scroll {
  overflow: visible;
  height: auto;
}

.Rankinglist__mydata {
  display: flex;
  align-items: start;
  margin-bottom: 0.5rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.Rankinglist__mydata_img {
  margin-right: 0.5rem;
}

.Rankinglist__mydata_info {
  display: flex;
  flex-direction: column;
}

.Rankinglist__mydata_user {
  font-size: var(--font-xl);
}

.Rankinglist__mydata_user_name {
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
}

.Rankinglist__mydata_rank {
  font-size: var(--font-lg);
}

.Rankinglist__mydata_rank_number {
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  color: hsl(195, 100%, 46%);
}

.Rankinglist__link, .Rankinglist__tab {
  display: block;
  border-radius: 90px;
  box-shadow: 0px 2px 5px rgba(0, 15, 60, 0.15);
  position: relative;
  padding: 0.25rem 3rem 0.25rem 3.5rem;
  margin-bottom: 0.5rem;
  height: 54px;
  cursor: pointer;
  overflow: hidden;
  background-color: #fff;
}
.Rankinglist__link::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 12px;
  top: calc(50% - 6px);
  right: 24px;
  background-image: url(../images/svg/icon_arrow_right_darkblue.svg);
  background-size: 7px auto;
  background-repeat: no-repeat;
}
.Rankinglist__link._me, .Rankinglist__tab._me {
  background-color: hsl(42, 100%, 93%);
}

.Rankinglist__container {
  display: block;
  border-radius: 90px;
  box-shadow: 0px 2px 5px rgba(0, 15, 60, 0.15);
  position: relative;
  padding: 0.25rem 1rem 0.25rem 3.5rem;
  margin-bottom: 0.5rem;
  height: 54px;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
}
.Rankinglist__container._me {
  background-color: hsl(42, 100%, 93%);
}

.Rankinglist__ranking {
  font-size: var(--font-xxl);
  border: 3px solid hsl(225, 100%, 12%);
  color: var(--txtColor);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 44px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  background-color: #fff;
}
.Rankinglist__ranking._top {
  border: 3px solid hsl(195, 100%, 46%);
  color: hsl(195, 100%, 46%);
}
.Rankinglist__ranking._user {
  border: 3px solid transparent;
}

.Rankinglist__th {
  font-size: var(--font-xs);
  display: flex;
  gap: 0.25rem;
  justify-content: end;
  margin-bottom: 0.5rem;
}

.Rankinglist__th_people {
  width: 54px;
  margin-right: 1.25rem;
  text-align: center;
}

.Rankinglist__th_point {
  width: calc(24px + 3rem + 30px + var(--scrollbar-width));
}

.Rankinglist__th_clear {
  width: 68px;
}

.Rankinglist__th_contribute {
  width: 94px;
  padding-left: 18px;
}

.Rankinglist__info {
  display: flex;
  gap: 1.25rem;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-md);
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
}

.Rankinglist__user {
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
  overflow-wrap: break-word;
}

.Rankinglist__people {
  width: 58px;
  text-align: center;
  flex-shrink: 0;
}

.Rankinglist__country {
  width: 100px;
  text-align: left;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Rankinglist__point {
  color: hsl(195, 100%, 46%);
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.Rankinglist__nationalFlag {
  height: 50px;
}

.Rankinglist__otherFlag {
  width: 50px;
}

.Rankinglist__post_order {
  width: 48px;
  text-align: center;
  flex-shrink: 0;
}

.Rankinglist__post_date {
  width: 110px;
  font-size: var(--font-xs);
  text-align: left;
  flex-shrink: 0;
}

@media (max-width: 375.2px) {
  .Rankinglist__list {
    height: calc(100dvh - 340px);
  }
  .Rankinglist__list._by_rank {
    height: calc(100dvh - 223px);
  }
  .Rankinglist__list._no_scroll {
    overflow: visible;
    height: auto;
  }
  .Rankinglist__ranking {
    font-size: var(--font-xl);
    width: 38px;
    height: 38px;
    line-height: 38px;
    top: 5px;
  }
  .Rankinglist__link, .Rankinglist__tab {
    padding: 0.25rem 3rem 0.25rem 3.5rem;
    height: 48px;
  }
  .Rankinglist__container {
    padding: 0.25rem 1rem 0.25rem 3.5rem;
    height: 48px;
  }
  .Rankinglist__mydata {
    margin-bottom: 0.25rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .Rankinglist__mydata_img {
    width: 36px;
    height: 36px;
  }
  .Rankinglist__mydata_user {
    font-size: var(--font-md);
  }
  .Rankinglist__mydata_rank {
    font-size: var(--font-md);
  }
  .Rankinglist__th_point {
    width: calc(16px + 3rem + 30px + var(--scrollbar-width));
  }
}
.Slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: auto;
}

.Slider__btn {
  position: absolute;
  top: 73px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  fill: var(--txtColor);
}
.Slider__btn._right {
  right: 24px;
}
.Slider__btn._left {
  left: 24px;
  rotate: 180deg;
}
.Slider__btn._disabled {
  box-shadow: none;
  background-color: hsl(223, 13%, 73%);
  fill: #fff;
}

.Slider__wrapper {
  display: flex;
  transition: transform 0.4s ease;
  width: 200%;
}

.Slider__contents {
  flex: 0 0 100%;
  width: 100%;
}

.Slider__item {
  width: 50%;
}

.btn {
  position: relative;
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.625rem;
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 0.3125rem;
  background-image: none;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--font-md);
  margin-bottom: 0.125rem;
  width: 80%;
}

.btn._primary {
  background-color: hsl(225, 100%, 12%);
  color: #fff;
  border: 2px solid transparent;
}
.btn._primary:disabled, .btn._primary._disabled {
  background-color: hsl(223, 13%, 73%);
  color: #fff;
}

.btn._secondary {
  background-color: #fff;
  color: hsl(225, 100%, 12%);
  fill: hsl(225, 100%, 12%);
  border: 2px solid hsl(225, 100%, 12%);
}
.btn._secondary:active, .btn._secondary._active {
  background-color: hsl(225, 13%, 82%);
}
.btn._secondary:disabled, .btn._secondary._disabled {
  background-color: #fff;
  color: hsl(223, 13%, 73%);
  border: 2px solid hsl(223, 13%, 73%);
}

.btn._sunrise_yellow {
  background-color: hsl(42, 100%, 64%);
  color: hsl(225, 100%, 12%);
  border: 2px solid transparent;
}
.btn._sunrise_yellow:disabled, .btn._sunrise_yellow._disabled {
  background-color: hsl(42, 100%, 85%);
  color: hsl(223, 13%, 73%);
}

.btn._tangerine {
  background-color: hsl(28, 100%, 68%);
  color: #fff;
  border: 2px solid transparent;
}
.btn._tangerine:active, .btn._tangerine._active {
  border: 2px solid hsl(225, 100%, 12%);
}
.btn._tangerine:disabled, .btn._tangerine._disabled {
  background-color: hsl(223, 13%, 73%);
  border: 2px solid transparent;
}

.btn._coral {
  background-color: hsl(359, 78%, 66%);
  color: #fff;
  border: 2px solid transparent;
}
.btn._coral:active, .btn._coral._active {
  border: 2px solid hsl(225, 100%, 12%);
}

.btn._plum {
  background-color: hsl(339, 38%, 58%);
  color: #fff;
  border: 2px solid transparent;
}
.btn._plum:active, .btn._plum._active {
  border: 2px solid hsl(225, 100%, 12%);
}
.btn._plum:disabled, .btn._plum._disabled {
  background-color: hsl(223, 13%, 73%);
  border: 2px solid transparent;
}

.btn._lavender {
  background-color: hsl(242, 20%, 39%);
  color: #fff;
  border: 2px solid transparent;
}
.btn._lavender:active, .btn._lavender._active {
  border: 2px solid hsl(225, 100%, 12%);
}
.btn._lavender:disabled, .btn._lavender._disabled {
  background-color: hsl(223, 13%, 73%);
  border: 2px solid transparent;
}

.btn._cyan {
  background-color: hsl(195, 100%, 46%);
  color: #fff;
  border: 2px solid transparent;
}
.btn._cyan:active, .btn._cyan._active {
  border: 2px solid hsl(225, 100%, 12%);
}

.btn._circle {
  background: var(--brandColor);
  border-radius: 45%;
  fill: var(--txtColor);
  color: var(--bgColor);
  font-size: 12px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
}

.btn:active, .btn._active {
  top: 2px;
}

.btn:disabled, .btn._disabled {
  pointer-events: none;
}

.btn._check:active, .btn._check._active {
  background-color: hsl(195, 100%, 46%);
  color: #fff;
  border: 2px solid transparent;
}

.btn._check:active::before, .btn._check._active::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 20px;
  width: 16px;
  height: 12px;
  background-image: url(../images/svg/icon_check_white.svg);
  background-size: 16px 12px;
  background-repeat: no-repeat;
}

.btn._check:disabled::before, .btn._check._disabled::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 20px;
  width: 16px;
  height: 12px;
  background-image: url(../images/svg/icon_check_white.svg);
  background-size: 16px 12px;
  background-repeat: no-repeat;
}

.btn._cross:disabled::before, .btn._cross._disabled::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: 20px;
  width: 16px;
  height: 16px;
  background-image: url(../images/svg/icon_cross_white.svg);
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

.btn.btn__only_icon {
  margin: 0 auto;
}

._position_center {
  margin: 0 auto 2px;
}

.btn._height_sm {
  padding: 0;
  min-height: 30px;
  z-index: 1;
}
.btn._height_sm::before {
  content: "";
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: auto;
}

.btn._xs {
  min-height: 28px;
  height: 28px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-width: 102px;
  z-index: 1;
  font-weight: bold;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
}
.btn._xs::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: auto;
}

@media (max-width: 375.2px) {
  .btn {
    width: 100%;
  }
}
.input {
  position: relative;
}

.input__text {
  max-height: 40px;
}

.input__password {
  padding-right: 2.625em;
}

.input__file {
  position: relative;
  padding-right: 2rem;
}
.input__file::file-selector-button {
  width: calc(100% + 2rem);
}
.input__file::after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: 12px;
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/icon_clip_darkblue.svg);
  background-size: auto 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.input__file_wrapper {
  cursor: pointer;
}

.input__file_label {
  content: "";
  position: absolute;
  top: calc(50% - 10.4px);
  left: 12px;
  color: hsl(225, 13%, 82%);
}

.input__password_icon {
  position: absolute;
  top: calc(50% - 12px);
  right: 1rem;
  fill: var(--txtColor);
}

.profile__container {
  width: 62px;
  height: 62px;
  border: 2px solid transparent;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.profile__container._active {
  outline: 2px solid hsl(225, 100%, 12%);
}
.profile__container._active::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: hsl(225, 100%, 12%);
  position: absolute;
  top: -4px;
  right: -2px;
  border-radius: 50%;
}

.profile__alignment {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 1.25rem;
  justify-items: start;
}

.profile__img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 50%;
}

.profile__edit {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: -2px;
  right: -2px;
  background: #d9d9d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: var(--txtColor);
}

@media (max-width: 375.2px) {
  .profile__container {
    width: 62px;
    height: 62px;
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
  }
  .profile__container._sm_sm {
    width: 48px;
    height: 48px;
  }
  .profile__alignment {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 1rem;
    justify-items: start;
  }
}
.link {
  color: hsl(195, 100%, 46%);
  font-size: var(--font-md);
  font-weight: 500;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.link__txt {
  display: inline-block;
}
.link__txt::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: hsl(195, 100%, 46%);
  bottom: 1px;
  left: 0;
}

.badge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  justify-items: start;
  width: 100%;
  gap: 1.5rem;
}

.badge__wrapper {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.badge__img_container {
  width: 71px;
  height: 71px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge__img {
  width: 93%;
}

.badge__name {
  font-size: var(--font-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  width: 100%;
  text-align: center;
}
.badge__name._not_acquired {
  color: hsl(225, 13%, 65%);
}

.badge__status {
  font-size: var(--font-xs);
  flex-direction: row;
  text-align: center;
}

.badge__status_number {
  font-size: var(--font-xs);
  color: hsl(195, 100%, 46%);
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
}

@media (max-width: 375.2px) {
  .badge {
    gap: 1rem;
  }
  .badge__wrapper {
    gap: 0.25rem;
  }
}
.textarea__count {
  text-align: right;
  font-size: var(--font-xs);
}

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}
.switch:disabled, .switch._disabled {
  opacity: 0.5;
  pointer-events: none;
}

.switch__input {
  display: none;
}

.switch__label {
  display: block;
  width: 100%;
  height: 100%;
  background-color: hsl(220, 13%, 95%);
  border: 1px solid hsl(225, 100%, 12%);
  border-radius: 34px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 丸いトグル部分 */
.switch__label::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: -1px;
  top: -0.75px;
  background-color: #fff;
  border: 1px solid hsl(225, 100%, 12%);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* チェックが入ったときの背景色と位置 */
.switch__input:checked + .switch__label {
  background-color: hsl(42, 100%, 64%);
}

.switch__input:checked + .switch__label::before {
  transform: translateX(25px);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox__item {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.checkbox__label {
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 1.75rem;
  position: relative;
}
.checkbox__label._md {
  font-size: var(--font-md);
  line-height: 24px;
}

/* チェックボックス */
.checkbox__label::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  border: 2px solid hsl(225, 100%, 12%);
  border-radius: 0.3125rem;
}

.checkbox__label::after {
  content: "";
  display: block;
  width: 12px;
  height: 10px;
  position: absolute;
  top: calc(50% - 5px);
  left: 3.5px;
  opacity: 0;
  background-image: url(../images/svg/icon_check_darkblue.svg);
  background-size: 12px auto;
  background-repeat: no-repeat;
  background-position: center center;
}

.statusbar {
  position: relative;
}

.statusbar._time {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.statusbar__progress {
  text-align: right;
}
.statusbar__progress._challenge {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 16px;
  transform: translate(0, -50%);
  color: #fff;
  font-size: var(--font-sm);
}
.statusbar__progress._inbar {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 16px;
  transform: translate(0, -50%);
  color: #fff;
  font-size: var(--font-sm);
}
.statusbar__progress._center {
  text-align: center;
  margin-bottom: 0.5rem;
}

.statusbar__progress_number {
  font-size: var(--font-xl);
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
}

.statusbar__wrapper {
  position: relative;
  width: 100%;
}

.statusbar__background {
  height: 10px;
  width: 100%;
  background-color: hsl(225, 100%, 12%);
  border-radius: 100px;
}
.statusbar__background._thick {
  height: 30px;
  background-color: hsl(225, 13%, 82%);
}
.statusbar__background._gray {
  background-color: hsl(225, 13%, 82%);
}

.statusbar__seconds {
  min-width: 16px;
  height: 24px;
  vertical-align: middle;
  line-height: 24px;
}

.statusbar__time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  fill: var(--txtColor);
  vertical-align: middle;
}

.statusbar__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 0%;
  background-color: hsl(195, 100%, 46%);
  border-radius: 100px;
  transition: width 0.5s linear;
}
.statusbar__bar._thick {
  height: 30px;
}
.statusbar__bar._end {
  width: 100%;
  background-color: hsl(113, 35%, 57%);
}

.tab {
  display: flex;
  cursor: pointer;
}

.tabs {
  display: flex;
  border-bottom: 2px solid #ccc;
  cursor: pointer;
}

.tab__item {
  position: relative;
  width: 33.3%;
  height: 40px;
  background-color: hsl(220, 13%, 95%);
  line-height: 40px;
  text-align: center;
}
.tab__item::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0px;
  height: 16px;
  width: 1px;
  background-color: hsl(225, 100%, 12%);
}
.tab__item:first-child {
  border-radius: 0.3125rem 0 0 0.3125rem;
}
.tab__item:last-child {
  border-radius: 0 0.3125rem 0.3125rem 0;
}
.tab__item:last-child::after {
  content: none;
}
.tab__item._left_no_line::after {
  content: none;
}
.tab__item._right_no_line::after {
  content: none;
}

.tab__item._active {
  background-color: hsl(225, 100%, 12%);
  font-weight: bold;
  color: #fff;
}
.tab__item._active::after {
  content: none;
}

.tab__content {
  display: none;
  margin: 0.5rem 0;
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
  height: calc(100dvh - 15.125rem);
  overflow-y: scroll;
}
.tab__content._no_scroll {
  height: auto;
  overflow: visible;
}
.tab__content._answerlist {
  margin: 0.5rem 0;
  height: calc(100dvh - 190px);
  overflow-y: scroll;
}
.tab__content._Rankinglist {
  margin: 0.5rem 0;
  height: calc(100dvh - 273px);
  overflow-y: scroll;
}
.tab__content._en {
  height: calc(100dvh - 219px);
}

.tab__content._active {
  display: block;
}

@media (max-width: 375.2px) {
  .tab__content {
    height: calc(100dvh - 11rem);
  }
  .tab__content._answerlist {
    height: calc(100dvh - 175px);
  }
  .tab__content._Rankinglist {
    margin: 0.5rem 0;
    height: calc(100dvh - 255px);
    overflow-y: scroll;
  }
  .tab__content._en {
    height: calc(100dvh - 205px);
  }
  .tab__content._no_scroll {
    height: auto;
    overflow: visible;
  }
}
.challengelist__link {
  display: block;
  border-radius: 0.3125rem;
  box-shadow: 0px 2px 5px rgba(0, 15, 60, 0.15);
  position: relative;
  padding: 0.75rem 3.5rem 1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  min-height: 100px;
  border: 2px solid hsl(195, 100%, 46%);
}
.challengelist__link::before {
  content: "";
  position: absolute;
  width: 48px;
  height: 58px;
  top: 9px;
  left: 0;
  background-size: 48px 58px;
  background-repeat: no-repeat;
  z-index: -1;
}
.challengelist__link._quiz::before {
  background-image: url(../images/svg/icon_challengelist_quiz.svg);
}
.challengelist__link._questionnaire::before {
  background-image: url(../images/svg/icon_challengelist_questionnaire.svg);
}
.challengelist__link._photo::before {
  background-image: url(../images/svg/icon_challengelist_photo.svg);
}
.challengelist__link._tutorial::before {
  background-image: url(../images/svg/icon_challengelist_tutorial.svg);
}
.challengelist__link::after {
  content: "";
  position: absolute;
  width: 114px;
  height: 100px;
  top: 0px;
  right: 0px;
  background-image: url(../images/challengelist_image.png);
  background-size: 114px auto;
  z-index: -1;
  background-repeat: no-repeat;
}
.challengelist__link._retry::before {
  background-image: url(../images/svg/icon_challengelist_quiz_retry.svg);
}
.challengelist__link._retry::after {
  background-image: url(../images/challengelist_image_retry.png);
}
.challengelist__link._success {
  border: 2px solid hsl(113, 35%, 57%);
}
.challengelist__link._success._quiz::before {
  background-image: url(../images/svg/icon_challengelist_quiz_success.svg);
}
.challengelist__link._success._questionnaire::before {
  background-image: url(../images/svg/icon_challengelist_questionnaire_success.svg);
}
.challengelist__link._success._photo::before {
  background-image: url(../images/svg/icon_challengelist_photo_success.svg);
}
.challengelist__link._success._tutorial::before {
  background-image: url(../images/svg/icon_challengelist_tutorial_success.svg);
}

.challengelist__someonechallenge {
  display: block;
  border-radius: 0.3125rem;
  box-shadow: 0px 2px 5px rgba(0, 15, 60, 0.15);
  position: relative;
  padding: 0.625rem 0.5rem 0.125rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid hsl(195, 100%, 46%);
}

.challengelist__title {
  font-size: var(--font-md);
  max-width: calc(100% - 12px);
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  margin-bottom: 0.125rem;
}
.challengelist__title._attached {
  min-height: calc(23.2px + 0.75rem + 20.8px);
}

.challengelist__status {
  fill: var(--txtColor);
  display: flex;
  margin-top: 0.25rem;
  gap: 0.75rem;
}

.challengelist__status_clear {
  display: flex;
  align-items: center;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
}

.challengelist__status_feed {
  display: flex;
  align-items: center;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
}

.challengelist__result {
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
}

.challengelist__attached {
  width: calc(100% + 56px + 56px - 32px);
  position: relative;
  left: -41px;
}

.challengelist__attached_img {
  margin-top: 1rem;
  width: 100%;
  border-radius: 0.3125rem;
}

.challengelist__feed {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.challengelist__stamp_wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  font-size: var(--font-xs);
}

.challengelist__stamp {
  width: 16px;
}

.challengelist__answer {
  font-weight: bold;
  color: hsl(195, 100%, 46%);
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
}

.challengelist__try {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: hsl(225, 100%, 12%);
  color: #fff;
  padding: 0.25rem 0.625rem 0.25rem 1.5rem;
  border-radius: 0.3125rem 0 0 0;
  font-size: var(--font-xxs);
  fill: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 28px;
  font-weight: bold;
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
}

.challengelist__stamp_img {
  width: 0.875rem;
}

.banner {
  background-color: hsl(196, 88%, 97%);
  padding: calc(env(safe-area-inset-left) + 1.5rem) 0.75rem 0.75rem;
  font-weight: bold;
  font-size: var(--font-xs);
  color: var(--txtColor);
}

.banner__container {
  display: block;
  border: 2px solid hsl(195, 100%, 46%);
  border-radius: 0.3125rem;
  background-color: #fff;
  padding: 0.5rem 0.625rem 0.25rem;
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
  cursor: pointer;
}

.banner__main {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  position: relative;
  padding: 4px 0;
}
.banner__main::before {
  position: absolute;
  top: 0px;
  left: -10px;
  content: "";
  width: calc(100% + 20px);
  height: calc(100% + 4px);
  background-image: url(../images/background_character_home_image.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom right;
}
.banner__main::after {
  position: absolute;
  top: calc(50% - 26px);
  right: 6%;
  content: "";
  width: 42px;
  height: 58px;
  background-image: url(../images/character/character_home_image_1.png);
  background-repeat: no-repeat;
  background-size: 42px auto;
}
.banner__main._level_two::after {
  background-image: url(../images/character/character_home_image_2.png);
}

.banner__heading {
  margin-bottom: 0.25rem;
}

.banner__detail {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.3125rem;
  min-height: 62px;
  z-index: 1;
  width: 70%;
  padding: 0.5rem 0.625rem;
}

.banner__detail_heading {
  color: hsl(195, 100%, 46%);
}

.banner__progress {
  text-align: right;
  margin-top: auto;
}

.banner__progress_number {
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
}

.banner__progress_now {
  font-size: var(--font-sm);
}

.banner__img_container {
  text-align: center;
  height: 67px;
}

.banner__img {
  height: 100%;
}

@media (max-width: 375.2px) {
  .banner {
    padding: 1rem 0 0.75rem;
  }
  .banner__img_container {
    height: 61px;
  }
}
.character {
  position: relative;
}
.character._bg::before {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(51% + 24px);
  width: 148px;
  height: 148px;
  background-image: url(../images/GroupChallenge_character_top_image.png);
  background-size: 148px auto;
  background-repeat: no-repeat;
  z-index: -1;
}
.character._bg::after {
  content: "";
  position: absolute;
  bottom: -80%;
  right: 50%;
  transform: translate(30px, 0);
  width: 307px;
  height: 307px;
  background-image: url(../images/GroupChallenge_character_bottom_image.png);
  background-size: 307px auto;
  background-repeat: no-repeat;
  z-index: -1;
}

.character__container {
  position: relative;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.character__container._lg {
  width: 242px;
  height: 242px;
}
.character__container._xxl {
  width: 252px;
  height: 252px;
}
.character__container._border {
  border: 6px solid hsl(195, 100%, 46%);
}

.character__img {
  width: 157px;
}
.character__img._lg {
  width: 213px;
}
.character__img._xxl {
  width: 225px;
}

.character__phase {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.character__btn {
  position: absolute;
  bottom: -9px;
}
.character__btn:active, .character__btn._active {
  top: auto;
  bottom: -11px;
}

@media (max-width: 375.2px) {
  .character__container._sp_sm {
    width: 165px;
    height: 165px;
  }
  .character__img._sp_sm {
    width: 146px;
  }
}
.phase__container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.phase__txt {
  position: absolute;
  top: -19px;
  left: 24.5%;
  font-size: var(--font-xxs);
  color: hsl(195, 100%, 46%);
  font-weight: bold;
}
.phase__txt._one {
  left: 17px;
}
.phase__txt._two {
  left: 24.5%;
}

.phase__bar {
  background-color: hsl(223, 13%, 73%);
  width: 50px;
  height: 10px;
  border-radius: 90px;
  font-size: var(--font-sm);
}
.phase__bar._active {
  background-color: hsl(195, 100%, 46%);
  width: 60px;
  height: 60px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.phase__bar._old {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background-color: #fff;
  border: 2px solid hsl(195, 100%, 46%);
  cursor: pointer;
  box-shadow: 0px 5px 25px rgba(0, 15, 60, 0.12);
}

.phase__number {
  font-size: var(--font-xxl);
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  position: absolute;
  top: 50%;
  transform: translate(0, -55%);
}

.phase__character {
  width: 23px;
}

.user {
  -webkit-filter: drop-shadow(0px 5px 25px rgba(0, 15, 60, 0.12));
  filter: drop-shadow(0px 5px 25px rgba(0, 15, 60, 0.12));
  position: relative;
  margin-left: 60px;
  border-radius: 0.3125rem;
  background-color: #fff;
  padding: 0.5rem 1rem 0.625rem 1.5rem;
  min-height: 69px;
  cursor: pointer;
  z-index: 0;
}
.user::before {
  content: "";
  display: block;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: calc(50% - 42.5px);
  left: -60px;
  background-image: url(../images/user_icon/user_icon_17.png);
  background-size: 66px auto;
  background-repeat: no-repeat;
  background-position: center;
}
.user::after {
  content: "";
  display: block;
  width: 60px;
  height: 55px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../images/user_image.png);
  background-size: 60px auto;
  background-repeat: no-repeat;
  background-position: right bottom;
  z-index: -1;
}

.user__wrapper {
  display: flex;
  flex-direction: column;
  font-size: var(--font-xs);
  padding-left: 0.625rem;
}
.user__wrapper._multiple_lines {
  gap: 0.5rem;
}

.user__heading {
  font-weight: 500;
  font-size: var(--font-sm);
  min-height: 24px;
}

.user__name {
  font-size: var(--font-lg);
  min-height: 24px;
  font-weight: bold;
}

.user__number {
  color: hsl(195, 100%, 46%);
  font-weight: bold;
  font-size: var(--font-lg);
  padding-left: 0.25rem;
}

.user__status {
  color: var(--txtColor);
}

@media (max-width: 375.2px) {
  .user {
    margin-left: 55px;
    background-color: #fff;
    padding: 0.25rem 0.5rem 0 0.625rem;
    min-height: 51px;
  }
  .user::before {
    width: 70px;
    height: 70px;
    top: calc(50% - 35px);
    left: -45px;
    background-size: 54px auto;
  }
  .user::after {
    width: 50px;
    height: 46px;
    background-size: 50px auto;
  }
  .user__status {
    position: relative;
    top: -3px;
  }
  .user__wrapper {
    padding-left: 1rem;
  }
}
.stamp {
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.stamp__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid hsl(225, 100%, 12%);
  border-radius: 50%;
  flex-shrink: 0;
  fill: var(--txtColor);
  cursor: pointer;
}

.stamp__icons {
  height: 28px;
  width: 100%;
  border-radius: 17px;
  display: flex;
  align-items: center;
  padding: 0;
  gap: 0.5rem;
}

.stamp__icon {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background-color: hsl(220, 13%, 95%);
  padding: 0.125rem 0.5rem;
  border-radius: 90px;
  cursor: pointer;
  font-size: var(--font-xs);
  color: var(--txtColor);
  border: 1px solid transparent;
}
.stamp__icon._me {
  color: hsl(195, 100%, 46%);
}
.stamp__icon._active, .stamp__icon:active {
  border: 1px solid hsl(195, 100%, 46%);
  color: hsl(195, 100%, 46%);
}

.stamp__icon_img {
  width: 14px;
}

.tabbtn {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.5rem;
  max-width: 100%;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tabbtn::-webkit-scrollbar {
  display: none;
}

.tabbtn__btn {
  background-color: hsl(220, 13%, 95%);
  color: hsl(225, 100%, 12%);
  border-radius: 0.3125rem;
  height: 57px;
  font-size: var(--font-sm);
  width: calc(25% - 3px);
  min-width: 115px;
  cursor: pointer;
}
.tabbtn__btn._active, .tabbtn__btn:active {
  background-color: hsl(225, 100%, 12%);
  color: #fff;
}
.tabbtn__btn._two {
  width: calc(50% - 3px);
}

@media (max-width: 375.2px) {
  .tabbtn {
    padding: 0 1rem;
  }
  .banner__img_container {
    height: 40px;
  }
}
.rank__result {
  display: flex;
  align-items: normal;
  justify-content: center;
  gap: 0.5rem;
}

.rank__rank {
  font-family: var(--rationaltext-semibold), "Noto Sans CJK JP", sans-serif;
  font-weight: bold;
  font-size: var(--font-xxl);
  display: flex;
  align-items: center;
  justify-content: start;
  padding-top: 0.5rem;
}

.rank__number {
  display: block;
  color: #fff;
  font-size: var(--font-xxl);
  border-radius: 0.3125rem;
  padding: 0 1rem;
  height: 29px;
  line-height: 29px;
  margin-left: 0.25rem;
}
.rank__number._gold {
  background-color: hsl(42, 100%, 64%);
}
.rank__number._silver {
  background-color: hsl(268, 17%, 64%);
}

.rank__info {
  text-align: center;
  font-size: var(--font-md);
}

.tag {
  display: inline-block;
  text-align: center;
  padding: 0.25rem;
  min-width: 127px;
  border-radius: 0.3125rem;
}
.tag._cyan {
  color:  hsl(195, 100%, 46%);;
}
.tag._tangerine {
  color: hsl(28, 100%, 68%);
}
.tag._coral {
  color: hsl(359, 78%, 66%);
}
.tag._plum {
  color: hsl(339, 38%, 58%);
}
.tag._lavender {
  color: hsl(242, 20%, 39%);
  
}


.someonechallenge_post_btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: var(--brandColor);
  color: #fff;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*# sourceMappingURL=main.css.map */