@charset "UTF-8";
.project {
  position: relative;
  background: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/bg.jpg") repeat-y center;
  background-size: 100% auto;
}
@supports (background-image: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/bg.webp")) {
  .project {
    background-image: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/bg.webp");
  }
}
.project {
  font-family: var(--MSIBodyFont);
  color: #fff;
  font-size: 16px;
  padding-bottom: 120px;
  overflow: hidden;
}
.project::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/bg-star.png") no-repeat fixed center center;
  background-size: 100% auto;
  pointer-events: none;
  -webkit-animation: star-twinkle 1.2s steps(2) infinite alternate;
          animation: star-twinkle 1.2s steps(2) infinite alternate;
}
@supports (background-image: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/bg-star.webp")) {
  .project::before {
    background-image: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/bg-star.webp");
  }
}
.project img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.project .msi__container {
  padding: 0;
}
@media (min-width: 768px) {
  .project .msi__container {
    max-width: 1100px;
    padding: 0 25px;
  }
}
@media (min-width: 1930px) {
  .project .msi__container {
    max-width: 1280px;
  }
}
.project .common-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  margin: 6% auto 4%;
  max-width: 1120px;
  text-align: center;
}
@media (min-width: 768px) {
  .project .common-title {
    gap: 20px;
  }
}
.project .common-title__img {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
.project .common-title__img img {
  width: 100%;
  display: block;
  max-height: 3em;
}
@media (min-width: 768px) {
  .project .common-title__img img {
    max-height: 4em;
  }
}
.project .common-title__deco {
  --p: 3px;
  position: relative;
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(var(--p) * 5);
  height: calc(var(--p) * 5);
  margin-top: 0.35em;
  overflow: hidden;
}
@media (min-width: 768px) {
  .project .common-title__deco {
    --p: 4.5px;
    margin-top: 0.45em;
  }
}
.project .common-title__deco:last-child .common-title__deco-bar {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
.project .common-title__deco--cyan, .project .common-title__deco--white, .project .common-title__deco--pink {
  margin-top: 0;
}
.project .common-title__deco--cyan .common-title__deco-bar, .project .common-title__deco--white .common-title__deco-bar, .project .common-title__deco--pink .common-title__deco-bar {
  -webkit-animation: none;
          animation: none;
  -webkit-transform: none;
          transform: none;
}
.project .common-title__deco--cyan .common-title__deco-bar {
  background: #00e8ff;
}
.project .common-title__deco--white .common-title__deco-bar {
  background: #fff;
}
.project .common-title__deco--pink .common-title__deco-bar {
  background: #ff06f0;
}
.project .common-title__deco-arm {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--p);
  height: calc(var(--p) * 2);
  margin-left: calc(var(--p) / -2);
  overflow: hidden;
  -webkit-transform-origin: 50% calc(var(--p) * 2.5);
          transform-origin: 50% calc(var(--p) * 2.5);
}
.project .common-title__deco-arm:nth-child(2) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.project .common-title__deco-arm:nth-child(3) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.project .common-title__deco-arm:nth-child(4) {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.project .common-title__deco-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--p) * 3);
  background: #fff;
  -webkit-animation: deco-bar 1.25s steps(1, end) infinite;
          animation: deco-bar 1.25s steps(1, end) infinite;
}
.project .kv {
  background: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/kv-bg.jpg") no-repeat center center;
  background-size: cover;
}
@supports (background-image: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/kv-bg.webp")) {
  .project .kv {
    background-image: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/kv-bg.webp");
  }
}
.project .kv {
  padding: 3% 0;
  position: relative;
  z-index: 2;
}
.project .kv__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (min-width: 768px) {
  .project .kv__flex {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}
.project .kv__pd {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin: 0 -15%;
}
@media (min-width: 768px) {
  .project .kv__pd {
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
    margin: 0;
  }
}
.project .kv__title {
  position: relative;
  margin: 0 -8%;
}
@media (min-width: 768px) {
  .project .kv__title {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
  }
}
.project .kv__title picture {
  display: block;
  width: 100%;
}
.project .kv__title img {
  display: block;
  width: 100%;
}
.project .kv__title picture:first-of-type img {
  -webkit-filter: url(#kv-pixel-glitch);
          filter: url(#kv-pixel-glitch);
  will-change: filter;
}
.project .kv__title picture:last-of-type {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.project .kv__title picture:last-of-type img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .project .kv__title picture:first-of-type img {
    -webkit-filter: none;
            filter: none;
    will-change: auto;
  }
}
.project .about {
  padding: 0% 0 6%;
  color: #fff;
}
.project .about__wrap {
  background: #2b195a;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .project .about__wrap {
    width: 90%;
  }
}
@media (min-width: 1600px) {
  .project .about__wrap {
    width: 100%;
  }
}
.project .about__wrap {
  padding: 6%;
}
.project .about__panel {
  position: relative;
  margin: 0 auto 4%;
  padding: 28px 10px 32px;
}
@media (min-width: 768px) {
  .project .about__panel {
    padding: 28px 36px 32px;
  }
}
.project .about__life {
  max-width: 760px;
  margin: 0 auto 4%;
  width: 60%;
}
.project .about__life img {
  width: 100%;
  display: block;
}
.project .about__intro {
  margin: 0 auto;
  text-align: center;
  line-height: 2.4;
  font-weight: bold;
  font-size: clamp(14px, 1.7vw, 20px);
}
.project .about__intro p {
  margin: 0;
}
.project .about__intro p + p {
  margin-top: 1.2em;
}
.project .about__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.project .about__btn img {
  display: block;
  height: auto;
}
.project .about__btn > picture:nth-child(n+2) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 30px;
}
.project .about__btn > picture:nth-child(n+2) img {
  width: 100%;
  -webkit-animation: about-go-arrow 1.05s steps(1, end) infinite;
          animation: about-go-arrow 1.05s steps(1, end) infinite;
}
.project .about__btn > picture:nth-child(3) img {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}
.project .about__btn > picture:nth-child(4) img {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.project .about__cast {
  position: relative;
  max-width: 900px;
  margin: 0 auto 5%;
}
.project .about__people {
  position: relative;
  z-index: 2;
  width: 94%;
  margin: 0 auto;
}
.project .about__match {
  position: relative;
  z-index: 2;
  max-width: none;
  padding: 28px 24px 32px;
  text-align: center;
  font-size: clamp(16px, 2vw, 28px);
}
.project .about__match p {
  margin: 12px 0;
  font-weight: 700;
}
.project .about__match p:first-child {
  color: #2f6bff;
}
.project .about__match p:last-child {
  margin-bottom: 0;
  color: #ff4fa3;
}
.project .about__spec {
  max-width: 960px;
  margin: 0 auto;
}
.project .about__spec > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px 20px;
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  .project .about__spec > div {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 24px;
  }
}
.project .about__spec dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-width: 7em;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 14px;
}
@media (min-width: 768px) {
  .project .about__spec dt {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 7.5em;
            flex: 0 0 7.5em;
    font-size: 16px;
  }
}
.project .about__spec dd {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 200px;
          flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .project .about__spec dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 6px 12px;
  }
}
.project .about__spec dd p {
  margin: 0;
  color: #fff;
  font-size: clamp(14px, 1.7vw, 20px);
}
.project .about__spec dd p + p {
  margin-top: 6px;
  color: #b8aec8;
  font-size: 12px;
}
@media (min-width: 768px) {
  .project .about__spec dd p + p {
    margin-top: 0;
    font-size: 13px;
  }
}
.project .about__spec dd ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #b8aec8;
  font-size: 12px;
}
@media (min-width: 768px) {
  .project .about__spec dd ul {
    font-size: 13px;
  }
}
.project .about__spec dd ul li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 4px;
}
.project .about__spec dd ul li::before {
  content: "※";
  position: absolute;
  left: 0;
}
.project .join {
  padding: 0 0 2%;
  font-size: 14px;
}
.project .join__wrap {
  background: #2b195a;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .project .join__wrap {
    width: 90%;
  }
}
@media (min-width: 1600px) {
  .project .join__wrap {
    width: 100%;
  }
}
.project .join__wrap {
  padding: 6% 5% 8%;
}
.project .join__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 28px;
  margin-bottom: 8%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.project .join__step-block {
  width: 100%;
}
.project .join__step {
  position: relative;
  max-width: none;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 28px 24px 24px;
}
.project .join__step-body {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px 24px;
}
.project .join__step-body > div {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 220px;
          flex: 1 1 220px;
  min-width: 0;
}
.project .join__step-body figure {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  max-width: 120px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .project .join__step-body figure {
    max-width: 180px;
    margin: 0;
  }
}
.project .join__step-body figure img {
  width: 100%;
  display: block;
}
.project .join__step-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px 14px;
  margin: 0 0 10px;
  color: #fff;
  font-weight: 700;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .project .join__step-head {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.project .join__step-head span:not(.join__step-badge),
.project .join__step-head time {
  font-size: clamp(16px, 2.2vw, 26px);
}
.project .join__step-head time {
  font-weight: 400;
}
.project .join__step-badge {
  display: inline-block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 8px 28px;
  background: #4783ea;
  color: #fff;
  font-size: clamp(14px, 1.7vw, 20px);
  text-shadow: 2px 2px 0 #87a9f0;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, calc(100% - 9px) 3px, calc(100% - 6px) 3px, calc(100% - 6px) 6px, calc(100% - 3px) 6px, calc(100% - 3px) 9px, 100% 9px, 100% calc(100% - 9px), calc(100% - 3px) calc(100% - 9px), calc(100% - 3px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 3px), calc(100% - 9px) calc(100% - 3px), calc(100% - 9px) 100%, 9px 100%, 9px calc(100% - 3px), 6px calc(100% - 3px), 6px calc(100% - 6px), 3px calc(100% - 6px), 3px calc(100% - 9px), 0 calc(100% - 9px), 0 9px, 3px 9px, 3px 6px, 6px 6px, 6px 3px, 9px 3px);
}
.project .join__step-desc {
  margin: 20px 0 0 5px;
  color: #6eb6ff;
  font-weight: bold;
}
@media (min-width: 996px) {
  .project .join__step-desc {
    font-size: 16px;
  }
}
.project .join__step-desc em {
  font-style: normal;
  color: #e8a04a;
}
.project .join__step-notes {
  margin: 12px 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #9a8fb0;
}
.project .join__step-notes li {
  margin: 0 0 10px;
}
.project .join__step-notes li:last-child {
  margin-bottom: 0;
}
.project .join__result {
  text-align: center;
}
.project .join__result-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}
.project .join__result-date {
  margin: 10px 0 20px;
  color: #fff;
  font-weight: normal;
  font-size: clamp(24px, 2.8vw, 42px);
}
.project .join__result-notes {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 640px;
  text-align: center;
  font-size: 12px;
  color: #9a8fb0;
}
.project .join__result-notes li {
  margin: 0 0 4px;
}
.project .join__result-notes li:last-child {
  margin-bottom: 0;
}
.project .join__winners {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px 40px;
}
.project .join__winners::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px solid #67569c;
  pointer-events: none;
  background: #160a37;
  z-index: 0;
}
@media (min-width: 768px) {
  .project .join__winners {
    padding: 48px 40px 56px;
  }
}
.project .join__winners-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .project .join__winners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }
}
.project .join__winners-grid li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.project .join__winners-grid p {
  max-width: none;
  margin: 0;
  padding: 6px 30px;
  color: #1a0a40;
  font-weight: 700;
  text-align: center;
  font-size: 1.2em;
}
.project .join__winners-grid figure {
  margin: 0;
}
.project .join__winners-grid img {
  width: auto;
  max-height: 180px;
  display: block;
  margin: 0 auto;
}
.project .apply {
  font-size: 1.5em;
  text-align: center;
  margin: 0 auto 6%;
}
.project .apply a {
  display: inline-block;
  max-width: none;
  margin: 0;
  padding: 0.4em 2.4em;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.project .apply a:hover {
  -webkit-filter: brightness(1.08);
          filter: brightness(1.08);
}
.project .prize {
  font-size: 14px;
}
.project .prize__wrap {
  background: #2b195a;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .project .prize__wrap {
    width: 90%;
  }
}
@media (min-width: 1600px) {
  .project .prize__wrap {
    width: 100%;
  }
}
.project .prize__wrap {
  padding: 28px 16px 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media (min-width: 768px) {
  .project .prize__wrap {
    padding: 40px 32px 48px;
    gap: 48px;
  }
}
.project .prize__item {
  position: relative;
  width: 100%;
  max-width: 920px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.project .prize__item--grand {
  max-width: 1000px;
}
.project .prize__open {
  position: absolute;
  top: -26px;
  right: -26px;
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  background: #ff4db8;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
@media (min-width: 768px) {
  .project .prize__open {
    font-size: 18px;
    top: 0;
    right: 0;
  }
}
.project .prize__trophy {
  position: relative;
  width: 100px;
  margin: 0 auto -20px;
}
@media (min-width: 768px) {
  .project .prize__trophy {
    width: 200px;
  }
}
.project .prize__trophy-light {
  position: absolute;
  top: -26px;
  right: -26px;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: plus-lighter;
  -webkit-mask: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/trophy.png") center no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/trophy.png") center no-repeat;
          mask: url("https://storage-asset.msi.com/event/2026/jp/custom-pc-champion/images/trophy.png") center no-repeat;
  mask-size: contain;
}
@media (min-width: 768px) {
  .project .prize__trophy-light {
    top: 0;
    right: 0;
  }
}
.project .prize__trophy-light::after {
  content: "";
  position: absolute;
  width: 300%;
  height: 200%;
  background: linear-gradient(45deg, transparent 50%, #fff 60%, transparent 70%);
  -webkit-animation: prize-trophy-lightAni 3s infinite ease-in-out;
          animation: prize-trophy-lightAni 3s infinite ease-in-out;
}
.project .prize__trophy picture {
  display: block;
  width: 100%;
}
.project .prize__trophy img {
  width: 100%;
  display: block;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
}
.project .prize__trophy > picture:nth-of-type(1) {
  position: relative;
  z-index: 1;
}
.project .prize__trophy > picture:nth-of-type(1) img {
  -webkit-animation: prize-trophy-swap 1s steps(1, end) infinite;
          animation: prize-trophy-swap 1s steps(1, end) infinite;
}
.project .prize__trophy > picture:nth-of-type(2) {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .project .prize__trophy > picture:nth-of-type(1) img {
    -webkit-animation: none;
            animation: none;
  }
  .project .prize__trophy .prize__trophy-light::after {
    -webkit-animation: none;
            animation: none;
    opacity: 0;
  }
}
.project .prize__name {
  margin: 0 auto -20px;
  text-align: center;
}
.project .prize__name img {
  display: block;
  width: 90%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  -webkit-animation: prize-name-glow 1.6s steps(2, end) infinite;
          animation: prize-name-glow 1.6s steps(2, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .project .prize__name img {
    -webkit-animation: none;
            animation: none;
  }
}
.project .prize__visual {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 22px;
  padding: 44px 24px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 768px) {
  .project .prize__visual {
    padding: 10px 24px 0px;
  }
}
.project .prize__gift {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
}
.project .prize__gift > img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.project .prize__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
}
.project .prize__lock {
  width: 16px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.project .prize__tag {
  margin: 0;
  padding: 4px 12px;
  background: #6b36e4;
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  border-radius: 5px;
}
.project .prize__specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  max-width: 720px;
}
@media (min-width: 768px) {
  .project .prize__specs {
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
  }
}
.project .prize__spec-col {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.project .prize__spec-col li {
  --f: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  margin: 0;
  color: #1a0a40;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-origin: border-box;
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ccc)) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
  background: linear-gradient(#000, #000) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#000, #000) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#ccc, #ccc) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
  clip-path: polygon(calc(var(--f) * 2) 0, calc(100% - var(--f) * 2) 0, calc(100% - var(--f) * 2) var(--f), calc(100% - var(--f)) var(--f), calc(100% - var(--f)) calc(var(--f) * 2), 100% calc(var(--f) * 2), 100% calc(100% - var(--f) * 2), calc(100% - var(--f)) calc(100% - var(--f) * 2), calc(100% - var(--f)) calc(100% - var(--f)), calc(100% - var(--f) * 2) calc(100% - var(--f)), calc(100% - var(--f) * 2) 100%, calc(var(--f) * 2) 100%, calc(var(--f) * 2) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), var(--f) calc(100% - var(--f) * 2), 0 calc(100% - var(--f) * 2), 0 calc(var(--f) * 2), var(--f) calc(var(--f) * 2), var(--f) var(--f), calc(var(--f) * 2) var(--f));
}
.project .prize__spec-col p {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px 10px;
  min-width: 0;
  word-break: break-word;
}
.project .prize__spec-col p:first-child:not(:only-child) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  border-right: 2px solid #000;
  font-weight: 700;
  white-space: nowrap;
}
.project .prize__spec-col p:last-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.project .prize__spec-col p:only-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  min-height: 20px;
}
.project .prize__spec-col--solo {
  width: 100%;
}
.project .prize__list {
  --prize-gap: 50px;
  --prize-card-w: 100%;
  width: 100%;
  max-width: 860px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 50px;
}
@media (min-width: 768px) {
  .project .prize__list {
    --prize-card-w: calc((100% - var(--prize-gap)) / 2);
  }
}
.project .prize__item--card {
  width: var(--prize-card-w);
  max-width: var(--prize-card-w);
  text-align: center;
}
.project .prize__item--card .prize__visual {
  max-width: 100%;
}
@media (min-width: 768px) {
  .project .prize__item--card .prize__visual {
    min-height: 250px;
  }
}
.project .prize__item--card .prize__gift {
  max-width: 220px;
  min-height: 120px;
}
.project .prize__item--card .prize__gift > img {
  width: auto;
  max-width: 100%;
  max-height: 140px;
  height: auto;
  margin: 0 auto;
}
.project .prize__item--card .prize__name img {
  max-width: 200px;
}
.project .prize__item--card .prize__spec-col--solo {
  width: 100%;
}
.project .prize__item--card.prize__item--ask .prize__gift {
  max-width: 280px;
  min-height: 140px;
}
.project .prize__item--card.prize__item--ask .prize__gift > img {
  max-height: 180px;
}
.project .prize__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--prize-gap);
  width: 100%;
}
@media (min-width: 768px) {
  .project .prize__pair {
    grid-template-columns: 1fr 1fr;
    width: 90%;
  }
}
.project .prize__pair .prize__item--card {
  width: 100%;
  max-width: none;
}
.project .event {
  font-size: 14px;
}
.project .event__wrap {
  background: #2b195a;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .project .event__wrap {
    width: 90%;
  }
}
@media (min-width: 1600px) {
  .project .event__wrap {
    width: 100%;
  }
}
.project .event__wrap {
  padding: 24px 16px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 22px;
}
@media (min-width: 768px) {
  .project .event__wrap {
    padding: 36px 20px 44px;
    gap: 28px;
  }
}
.project .event__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
}
@media (min-width: 768px) {
  .project .event__head {
    gap: 16px;
  }
}
.project .event__list {
  --f: 3px;
  --line: #4783ea;
  margin: 0 auto 40px;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .project .event__list {
    gap: 15px;
  }
}
.project .event__list > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px 14px;
  padding: 10px 35px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-origin: border-box;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--line)), to(var(--line))) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat;
  background: linear-gradient(var(--line), var(--line)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(var(--line), var(--line)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(var(--line), var(--line)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(var(--line), var(--line)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(var(--line), var(--line)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(var(--line), var(--line)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(var(--line), var(--line)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(var(--line), var(--line)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat;
  clip-path: polygon(calc(var(--f) * 2) 0, calc(100% - var(--f) * 2) 0, calc(100% - var(--f) * 2) var(--f), calc(100% - var(--f)) var(--f), calc(100% - var(--f)) calc(var(--f) * 2), 100% calc(var(--f) * 2), 100% calc(100% - var(--f) * 2), calc(100% - var(--f)) calc(100% - var(--f) * 2), calc(100% - var(--f)) calc(100% - var(--f)), calc(100% - var(--f) * 2) calc(100% - var(--f)), calc(100% - var(--f) * 2) 100%, calc(var(--f) * 2) 100%, calc(var(--f) * 2) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), var(--f) calc(100% - var(--f) * 2), 0 calc(100% - var(--f) * 2), 0 calc(var(--f) * 2), var(--f) calc(var(--f) * 2), var(--f) var(--f), calc(var(--f) * 2) var(--f));
}
@media (min-width: 768px) {
  .project .event__list > li {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 8px 18px;
  }
}
.project .event__list > li > p {
  margin: 0;
}
.project .event__list > li > p:first-child {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 4.2em;
          flex: 0 0 4.2em;
  white-space: nowrap;
  font-size: clamp(14px, 1.7vw, 20px);
  font-weight: bold;
}
.project .event__list > li > p:nth-child(2) {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  font-size: clamp(14px, 1.7vw, 20px);
  font-weight: bold;
}
.project .event__note {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  color: #c4b8d6;
  font-size: 12px;
}
@media (min-width: 768px) {
  .project .event__note {
    font-size: 13px;
  }
}
.project .event__accent {
  color: #00e8ff;
  font-weight: 700;
}
.project .event__accent img {
  width: auto;
  height: 1.8em;
  vertical-align: text-top;
  margin-top: -5px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
  -webkit-animation: trophy-icon 1.2s steps(2, end) infinite;
          animation: trophy-icon 1.2s steps(2, end) infinite;
}
.project .event__panel {
  position: relative;
  width: 100%;
  padding: 28px 16px 28px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 28px;
}
@media (min-width: 768px) {
  .project .event__panel {
    padding: 36px 28px 40px;
    gap: 36px;
  }
}
.project .event__panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  background: #1c0a4a;
  z-index: 0;
}
.project .event__criteria-cols {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: 28px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .project .event__criteria-cols {
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }
}
.project .event__criteria-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 28px;
}
@media (min-width: 768px) {
  .project .event__criteria-col:last-child {
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.85);
  }
}
.project .event__criteria-note {
  margin: auto 0 0;
  text-align: right;
  color: #c4b8d6;
  font-size: 12px;
}
.project .event__item {
  margin: 0;
}
.project .event__item-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px 8px;
  margin: 0 0 12px;
  color: #ff2ecf;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 700;
}
.project .event__item-num {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.project .event__item-icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.project .event__item-icon img {
  width: auto;
  height: 0.8em;
  display: block;
}
.project .event__points {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.project .event__points > li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 1.1em;
}
.project .event__points > li:last-child {
  margin-bottom: 0;
}
.project .event__points > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.55em;
  border-color: transparent transparent transparent #fff;
}
.project .event__score {
  width: 100%;
  max-width: 320px;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.28);
  font-size: 1.2em;
  margin: 0 auto;
}
.project .event__score th,
.project .event__score td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  text-align: center;
}
.project .event__score th {
  font-weight: 700;
}
.project .event__score tr:last-child td {
  border-bottom: 0;
}
.project .event__deduct {
  padding: 12px 14px;
  background: #160a37;
}
.project .event__deduct-title {
  margin: 0 0 10px;
  color: #00e8ff;
  font-weight: 700;
}
.project .event__deduct-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px 16px;
  font-size: 12px;
  color: #9a8fb0;
}
@media (min-width: 768px) {
  .project .event__deduct-list {
    grid-template-columns: 1fr 1fr;
  }
}
.project .event__deduct-list > li {
  position: relative;
  padding-left: 1em;
}
.project .event__deduct-list > li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.project .event__rules-label {
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 8px 28px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
@media (min-width: 768px) {
  .project .event__rules-label {
    padding: 10px 40px;
    font-size: 22px;
  }
}
.project .event__rules {
  --step-clip: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 8px 8px);
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 6px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #090317;
  clip-path: var(--step-clip);
  color: #bfbfbf;
}
.project .event__rules-frame {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 24px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  clip-path: var(--step-clip);
}
@media (min-width: 768px) {
  .project .event__rules-frame {
    padding: 36px 40px 40px;
  }
}
.project .event__rules-frame > p {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
}
.project .event__rules-frame > h3 {
  position: relative;
  z-index: 1;
  margin: 18px 0 8px;
  font-size: 1em;
  font-weight: 700;
}
.project .event__rules-frame > h3:first-of-type {
  margin-top: 0;
}
.project .event__rules-frame > ul {
  position: relative;
  z-index: 1;
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}
.project .event__rules-frame > ul > li {
  position: relative;
  margin: 0 0 4px;
  padding-left: 1em;
}
.project .event__rules-frame > ul > li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.project .schedule__wrap {
  background: #2b195a;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .project .schedule__wrap {
    width: 90%;
  }
}
@media (min-width: 1600px) {
  .project .schedule__wrap {
    width: 100%;
  }
}
.project .schedule__wrap {
  padding: 24px 16px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 28px;
}
@media (min-width: 768px) {
  .project .schedule__wrap {
    padding: 36px 40px 44px;
    gap: 36px;
  }
}
.project .schedule__intro {
  margin: 0 auto;
  text-align: center;
  line-height: 2.4;
  font-weight: bold;
  font-size: clamp(14px, 1.7vw, 20px);
}
.project .schedule__intro p {
  margin: 0;
}
.project .schedule__box {
  --step-clip: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 8px 8px);
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 6px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #090317;
  clip-path: var(--step-clip);
}
.project .schedule__frame {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 16px 28px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  clip-path: var(--step-clip);
}
@media (min-width: 768px) {
  .project .schedule__frame {
    padding: 32px 28px 36px;
  }
}
.project .schedule__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  width: 100%;
}
.project .schedule__head .common-badge {
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
  font-size: 16px;
}
@media (min-width: 768px) {
  .project .schedule__head .common-badge {
    padding-left: 60px;
    padding-right: 60px;
    font-size: 1.3em;
  }
}
.project .schedule__fight {
  position: relative;
  z-index: 1;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 16px;
}
@media (min-width: 768px) {
  .project .schedule__fight {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 12px;
  }
}
.project .schedule__side {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 20px 12px 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
@media (min-width: 768px) {
  .project .schedule__side {
    padding: 24px 16px 14px;
  }
}
.project .schedule__names {
  position: absolute;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 20px;
}
.project .schedule__names li {
  padding: 2px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  color: #fff;
  border: 1px solid #666;
  border-radius: 4px;
  background: transparent;
  white-space: nowrap;
  font-size: 0.9em;
}
.project .schedule__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.project .schedule__photo img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.project .schedule__photo > .schedule__tag {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 2;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 5px 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  font-weight: 700;
  font-size: 22px;
  color: #1a0a40;
  white-space: nowrap;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 4px top 4px/4px 4px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right 4px top 4px/4px 4px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 4px bottom 4px/4px 4px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right 4px bottom 4px/4px 4px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 8px top 0/calc(100% - 16px) 4px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 8px bottom 0/calc(100% - 16px) 4px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 0 top 8px/4px calc(100% - 16px) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right 0 top 8px/4px calc(100% - 16px) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left 4px top 4px/calc(100% - 8px) calc(100% - 8px) no-repeat;
  background: linear-gradient(#000, #000) left 4px top 4px/4px 4px no-repeat, linear-gradient(#000, #000) right 4px top 4px/4px 4px no-repeat, linear-gradient(#000, #000) left 4px bottom 4px/4px 4px no-repeat, linear-gradient(#000, #000) right 4px bottom 4px/4px 4px no-repeat, linear-gradient(#000, #000) left 8px top 0/calc(100% - 16px) 4px no-repeat, linear-gradient(#000, #000) left 8px bottom 0/calc(100% - 16px) 4px no-repeat, linear-gradient(#000, #000) left 0 top 8px/4px calc(100% - 16px) no-repeat, linear-gradient(#000, #000) right 0 top 8px/4px calc(100% - 16px) no-repeat, linear-gradient(#fff, #fff) left 4px top 4px/calc(100% - 8px) calc(100% - 8px) no-repeat;
  width: 80%;
}
@media (min-width: 768px) {
  .project .schedule__photo > .schedule__tag {
    font-size: 1.2em;
  }
}
.project .schedule__vs {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 8px 0;
  -ms-flex-item-align: center;
      align-self: center;
  max-width: 85px;
}
@media (min-width: 768px) {
  .project .schedule__vs {
    padding: 0 4px;
  }
}
.project .schedule__vs img {
  width: 100px;
  max-width: 100%;
  display: block;
}
@media (min-width: 768px) {
  .project .schedule__vs img {
    width: 130px;
  }
}
.project .schedule__list {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto 6% 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
.project .schedule__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: none;
  margin: 0;
  padding: 10px 35px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  gap: 10px 14px;
  color: #fff;
  font-size: clamp(14px, 1.7vw, 20px);
  font-weight: bold;
  width: 100%;
}
@media (min-width: 768px) {
  .project .schedule__item {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    width: 86%;
  }
}
.project .schedule__item.common-frame {
  --f: 2px;
}
.project .schedule__item > span:first-child {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  white-space: nowrap;
}
.project .schedule__item > span:first-child svg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: block;
}
.project .schedule__item > span:nth-child(2) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: #fff;
  opacity: 0.85;
}
@media (min-width: 768px) {
  .project .schedule__item > span:nth-child(2) {
    margin: 0 4px;
  }
}
.project .schedule__item > span:last-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}
.project .schedule__mc {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 0 0 20px 0;
}
@media (min-width: 768px) {
  .project .schedule__mc {
    max-width: 350px;
  }
}
.project .schedule__stream {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
@media (min-width: 768px) {
  .project .schedule__stream {
    gap: 24px;
  }
}
.project .schedule__stream-screen {
  width: 100%;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #160a37;
  border: 2px solid #2a1a55;
}
@media (min-width: 768px) {
  .project .schedule__stream-screen {
    padding: 14px;
  }
}
.project .schedule__stream-preview {
  width: 100%;
  background: #000;
}
.project .schedule__stream-preview img {
  width: 100%;
  height: auto;
  display: block;
}
.project .schedule__stream-btn {
  display: block;
  width: 100%;
  max-width: 420px;
}
.project .schedule__stream-btn img {
  width: 100%;
  height: auto;
  display: block;
}
.project .schedule__stream-note {
  margin: 0;
  color: #c4161c;
  font-weight: 700;
  text-align: center;
}
.project .campaign {
  font-size: 14px;
}
.project .campaign__wrap {
  background: #2b195a;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .project .campaign__wrap {
    width: 90%;
  }
}
@media (min-width: 1600px) {
  .project .campaign__wrap {
    width: 100%;
  }
}
.project .campaign__wrap {
  padding: 24px 16px 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
@media (min-width: 768px) {
  .project .campaign__wrap {
    padding: 36px 40px 48px;
    gap: 56px;
  }
}
.project .campaign__block {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 35px;
}
.project .campaign__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  max-width: 100%;
  gap: 0;
}
.project .campaign__head-line {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 40px;
  height: 1px;
  background: #fff;
}
@media (min-width: 768px) {
  .project .campaign__head-line {
    width: 72px;
  }
}
.project .campaign__head-line:first-child {
  margin-right: -3px;
}
.project .campaign__head-line:last-child {
  margin-left: -3px;
}
.project .campaign__head-dot {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.project .campaign__head-text {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  margin: 0 10px;
  padding: 0;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 16px;
}
@media (min-width: 768px) {
  .project .campaign__head-text {
    margin: 0 14px;
    font-size: 2.2em;
    white-space: nowrap;
  }
}
.project .campaign__period {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 8px 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  gap: 10px 14px;
  font-weight: 700;
  font-size: 18px;
}
@media (min-width: 768px) {
  .project .campaign__period {
    gap: 12px 18px;
    font-size: 20px;
  }
}
.project .campaign__period {
  color: #00e8ff;
}
.project .campaign__period span {
  font-weight: 400;
}
.project .campaign__panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  padding: 28px 16px 32px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #160a37;
}
@media (min-width: 768px) {
  .project .campaign__panel {
    gap: 32px;
    padding: 36px 40px 40px;
  }
}
.project .campaign__intro {
  position: relative;
  margin: 0;
  padding: 15px 70px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  color: #fff;
  font-size: clamp(14px, 1.7vw, 20px);
  line-height: 1.8;
  font-weight: bold;
}
.project .campaign__intro p {
  position: relative;
  z-index: 1;
  margin: 0;
}
.project .campaign__intro em {
  font-style: normal;
  color: #00e8ff;
  font-weight: 700;
}
.project .campaign__poster {
  width: 100%;
  max-width: 640px;
  margin: 0;
}
.project .campaign__poster img {
  width: 100%;
  height: auto;
  display: block;
}
.project .campaign__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 16px;
}
@media (min-width: 768px) {
  .project .campaign__steps {
    gap: 20px;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}
.project .campaign__step {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 140px;
          flex: 1 1 140px;
  max-width: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.project .campaign__step-badge {
  display: inline-block;
  padding: 4px 18px;
  background: #00e8ff;
  color: #1a0a40;
  font-weight: 700;
  border-radius: 4px;
}
.project .campaign__step > div {
  width: 100%;
  padding: 18px 12px 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 2px solid #00e8ff;
  background: #0a0518;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  text-align: center;
}
.project .campaign__step figure {
  width: 72px;
  margin: 0;
}
.project .campaign__step figure img {
  width: 100%;
  height: auto;
  display: block;
}
.project .campaign__step p {
  margin: 0;
  color: #fff;
  font-weight: 700;
}
.project .campaign__soon {
  width: 100%;
  max-width: 720px;
  min-height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #1a0f33;
  border: 1px solid #3a2a5a;
}
@media (min-width: 768px) {
  .project .campaign__soon {
    min-height: 240px;
  }
}
.project .campaign__soon p {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
}
@media (min-width: 768px) {
  .project .campaign__soon p {
    font-size: 28px;
  }
}
.project .sponsor {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  overflow: hidden;
  -webkit-box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.5);
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  pointer-events: none;
}
.project .sponsor.is-show {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  pointer-events: auto;
}
.project .sponsor.is-pinned {
  position: absolute;
}
.project .sponsor img {
  -o-object-fit: contain;
     object-fit: contain;
}
.project .sponsor__msilogo {
  width: 50%;
}
.project .sponsor__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px 30px;
  max-width: 660px;
  margin: 0 auto;
  width: 70%;
}
@media (min-width: 768px) {
  .project .sponsor__inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.project .sponsor__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
@media (min-width: 768px) {
  .project .sponsor__group {
    gap: 40px;
  }
}
.project .sponsor__divider {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  height: 1px;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  background: #c8c8c8;
}
@media (min-width: 768px) {
  .project .sponsor__divider {
    display: block;
    width: 1px;
    height: auto;
    min-height: 28px;
  }
}
.project .common-badge {
  --s: 3px;
  display: inline-block;
  margin: 0;
  padding: 8px 36px;
  background: #00e8ff;
  color: #1a0a40;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  clip-path: polygon(var(--s) 0, calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s), 100% calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) 100%, var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s)), 0 var(--s), var(--s) var(--s));
  -webkit-filter: drop-shadow(0 3px 0 #1a8f8c);
          filter: drop-shadow(0 3px 0 #1a8f8c);
}
@media (min-width: 768px) {
  .project .common-badge {
    --s: 4px;
    padding: 5px 65px;
    font-size: 26px;
  }
}
.project .common-badge--pink {
  background: #ff06f0;
  color: #fff;
  -webkit-filter: drop-shadow(0 3px 0 #a82868);
          filter: drop-shadow(0 3px 0 #a82868);
}
.project .common-bracket {
  --c: #00e8ff;
  --s: 6px;
  --arm: 30px;
  position: absolute;
  width: calc(var(--arm) + var(--s) * 2);
  height: calc(var(--arm) + var(--s) * 2);
  pointer-events: none;
}
.project .common-bracket--white {
  --c: #fff;
}
.project .common-bracket::before {
  content: "";
  position: absolute;
  width: var(--s);
  height: var(--s);
  background: var(--c);
  -webkit-animation: bracket-dot 1.2s steps(2, end) infinite;
          animation: bracket-dot 1.2s steps(2, end) infinite;
}
.project .common-bracket--tl {
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) left calc(var(--s) * 2) top 0/var(--arm) var(--s) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) left 0 top calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
  background: linear-gradient(var(--c), var(--c)) left calc(var(--s) * 2) top 0/var(--arm) var(--s) no-repeat, linear-gradient(var(--c), var(--c)) left 0 top calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
}
.project .common-bracket--tl::before {
  left: var(--s);
  top: var(--s);
}
.project .common-bracket--tr {
  top: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) right calc(var(--s) * 2) top 0/var(--arm) var(--s) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) right 0 top calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
  background: linear-gradient(var(--c), var(--c)) right calc(var(--s) * 2) top 0/var(--arm) var(--s) no-repeat, linear-gradient(var(--c), var(--c)) right 0 top calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
}
.project .common-bracket--tr::before {
  right: var(--s);
  top: var(--s);
}
.project .common-bracket--bl {
  bottom: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) left calc(var(--s) * 2) bottom 0/var(--arm) var(--s) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) left 0 bottom calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
  background: linear-gradient(var(--c), var(--c)) left calc(var(--s) * 2) bottom 0/var(--arm) var(--s) no-repeat, linear-gradient(var(--c), var(--c)) left 0 bottom calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
}
.project .common-bracket--bl::before {
  left: var(--s);
  bottom: var(--s);
}
.project .common-bracket--br {
  right: 0;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) right calc(var(--s) * 2) bottom 0/var(--arm) var(--s) no-repeat, -webkit-gradient(linear, left top, left bottom, from(var(--c)), to(var(--c))) right 0 bottom calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
  background: linear-gradient(var(--c), var(--c)) right calc(var(--s) * 2) bottom 0/var(--arm) var(--s) no-repeat, linear-gradient(var(--c), var(--c)) right 0 bottom calc(var(--s) * 2)/var(--s) var(--arm) no-repeat;
}
.project .common-bracket--br::before {
  right: var(--s);
  bottom: var(--s);
}
@media (prefers-reduced-motion: reduce) {
  .project .common-bracket::before {
    -webkit-animation: none;
            animation: none;
    opacity: 1;
  }
}
.project .common-frame {
  --f: 3px;
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat;
  background: linear-gradient(#fff, #fff) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#fff, #fff) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#fff, #fff) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#fff, #fff) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat;
}
.project .common-frame--stroke-cyan {
  background: -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat;
  background: linear-gradient(#00e8ff, #00e8ff) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#00e8ff, #00e8ff) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#00e8ff, #00e8ff) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#00e8ff, #00e8ff) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#00e8ff, #00e8ff) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#00e8ff, #00e8ff) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#00e8ff, #00e8ff) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#00e8ff, #00e8ff) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat;
}
.project .common-frame--black {
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
  background: linear-gradient(#000, #000) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#000, #000) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#fff, #fff) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
}
.project .common-frame--cyan {
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#00e8ff), to(#00e8ff)) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
  background: linear-gradient(#000, #000) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#000, #000) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#00e8ff, #00e8ff) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
}
.project .common-frame--red {
  background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#e20808), to(#e20808)) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
  background: linear-gradient(#000, #000) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#000, #000) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#000, #000) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#e20808, #e20808) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
}
.project .common-frame--step {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left 36px top 0/calc(100% - 72px) 2px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left 36px bottom 0/calc(100% - 72px) 2px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left 0 top 36px/2px calc(100% - 72px) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) right 0 top 36px/2px calc(100% - 72px) no-repeat;
  background: linear-gradient(#fff, #fff) left 36px top 0/calc(100% - 72px) 2px no-repeat, linear-gradient(#fff, #fff) left 36px bottom 0/calc(100% - 72px) 2px no-repeat, linear-gradient(#fff, #fff) left 0 top 36px/2px calc(100% - 72px) no-repeat, linear-gradient(#fff, #fff) right 0 top 36px/2px calc(100% - 72px) no-repeat;
}
.project .common-frame--step-purple {
  background: -webkit-gradient(linear, left top, left bottom, from(#9673f1), to(#9673f1)) left 36px top 0/calc(100% - 72px) 2px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#9673f1), to(#9673f1)) left 36px bottom 0/calc(100% - 72px) 2px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#9673f1), to(#9673f1)) left 0 top 36px/2px calc(100% - 72px) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#9673f1), to(#9673f1)) right 0 top 36px/2px calc(100% - 72px) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#160a37), to(#160a37)) center/100% 100% no-repeat;
  background: linear-gradient(#9673f1, #9673f1) left 36px top 0/calc(100% - 72px) 2px no-repeat, linear-gradient(#9673f1, #9673f1) left 36px bottom 0/calc(100% - 72px) 2px no-repeat, linear-gradient(#9673f1, #9673f1) left 0 top 36px/2px calc(100% - 72px) no-repeat, linear-gradient(#9673f1, #9673f1) right 0 top 36px/2px calc(100% - 72px) no-repeat, linear-gradient(#160a37, #160a37) center/100% 100% no-repeat;
}
.project .common-frame__corner {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.project .common-frame__corner--tl {
  top: 0;
  left: 0;
}
.project .common-frame__corner--tr {
  top: 0;
  right: 0;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.project .common-frame__corner--bl {
  bottom: 0;
  left: 0;
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}
.project .common-frame__corner--br {
  right: 0;
  bottom: 0;
  -webkit-transform: scale(-1);
          transform: scale(-1);
}
.project .nav {
  padding: 2% 1% 4%;
}
@media (min-width: 768px) {
  .project .nav {
    padding: 2% 4% 4%;
  }
}
.project .nav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.project .nav__list > li {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
}
@media (min-width: 576px) {
  .project .nav__list > li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
  }
}
.project .nav__list > li::before {
  content: none;
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 46%;
  background: #2f7bff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.project .nav__list > li:nth-child(2)::before, .project .nav__list > li:nth-child(4)::before {
  content: "";
}
@media (min-width: 996px) {
  .project .nav__list > li:nth-child(3)::before {
    content: "";
  }
}
.project .nav__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2px;
  padding: 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}
.project .nav__link span {
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.project .nav__link span:first-child {
  color: #2c86e5;
  font-size: 0.8em;
}
.project .nav__link span:last-child {
  font-size: clamp(16px, 1.6vw, 18px);
}
.project .nav__link:hover, .project .nav__link:focus-visible {
  background: rgba(44, 134, 229, 0.18);
}
.project .nav__link:hover span:first-child, .project .nav__link:focus-visible span:first-child {
  color: #00e8ff;
}
.project .nav__link:hover span:last-child, .project .nav__link:focus-visible span:last-child {
  color: #00e8ff;
}
.project .nav-float {
  --tab-w: 40px;
  --panel-w: min(12em, 46vw);
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 40;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translate(100%, -50%);
          transform: translate(100%, -50%);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.28s ease, -webkit-transform 0.28s ease;
  transition: opacity 0.28s ease, -webkit-transform 0.28s ease;
  transition: transform 0.28s ease, opacity 0.28s ease;
  transition: transform 0.28s ease, opacity 0.28s ease, -webkit-transform 0.28s ease;
}
@media (min-width: 768px) {
  .project .nav-float {
    --panel-w: 12.5em;
  }
}
.project .nav-float.is-show {
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}
.project .nav-float.is-open .nav-float__panel {
  width: var(--panel-w);
  opacity: 1;
  pointer-events: auto;
}
.project .nav-float.is-open .nav-float__toggle img {
  -webkit-animation: none;
          animation: none;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.project .nav-float__toggle {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 var(--tab-w);
          flex: 0 0 var(--tab-w);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--tab-w);
  padding: 20px 0px;
  border: 0;
  background: rgba(44, 134, 229, 0.5);
  cursor: pointer;
  border-radius: 10px 0 0 10px;
}
@media (min-width: 768px) {
  .project .nav-float__toggle {
    padding: 30px 6px;
  }
}
.project .nav-float__toggle img {
  display: block;
  width: 20px;
  height: auto;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-animation: nav-float-nudge 1s steps(2) infinite;
          animation: nav-float-nudge 1s steps(2) infinite;
}
@media (min-width: 768px) {
  .project .nav-float__toggle img {
    width: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project .nav-float__toggle img {
    -webkit-animation: none;
            animation: none;
  }
}
.project .nav-float__panel {
  width: 0;
  max-width: none;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: width 0.28s ease, opacity 0.2s ease;
  transition: width 0.28s ease, opacity 0.2s ease;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(8, 8, 32, 0.96)), to(rgba(8, 8, 32, 0.96))) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
  background: linear-gradient(#fff, #fff) left var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) right var(--f) top var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) left var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) right var(--f) bottom var(--f)/var(--f) var(--f) no-repeat, linear-gradient(#fff, #fff) left calc(var(--f) * 2) top 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#fff, #fff) left calc(var(--f) * 2) bottom 0/calc(100% - var(--f) * 4) var(--f) no-repeat, linear-gradient(#fff, #fff) left 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(#fff, #fff) right 0 top calc(var(--f) * 2)/var(--f) calc(100% - var(--f) * 4) no-repeat, linear-gradient(rgba(8, 8, 32, 0.96), rgba(8, 8, 32, 0.96)) left var(--f) top var(--f)/calc(100% - var(--f) * 2) calc(100% - var(--f) * 2) no-repeat;
}
.project .nav-float__list {
  margin: 0;
  padding: 6px 0;
  list-style: none;
  width: var(--panel-w);
}
.project .nav-float__list > li {
  position: relative;
}
.project .nav-float__list > li + li::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: #2f7bff;
}
.project .nav-float__list .nav__link {
  padding: 10px 8px;
}
.project .nav-float__list .nav__link span:first-child {
  font-size: 0.65em;
}
.project .nav-float__list .nav__link span:last-child {
  font-size: 0.9em;
}

@-webkit-keyframes nav-float-nudge {
  0%, 100% {
    -webkit-transform: rotate(180deg) translateX(0);
            transform: rotate(180deg) translateX(0);
  }
  50% {
    -webkit-transform: rotate(180deg) translateX(4px);
            transform: rotate(180deg) translateX(4px);
  }
}

@keyframes nav-float-nudge {
  0%, 100% {
    -webkit-transform: rotate(180deg) translateX(0);
            transform: rotate(180deg) translateX(0);
  }
  50% {
    -webkit-transform: rotate(180deg) translateX(4px);
            transform: rotate(180deg) translateX(4px);
  }
}
@-webkit-keyframes star-twinkle {
  0%, 30% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}
@keyframes star-twinkle {
  0%, 30% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes bracket-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@keyframes bracket-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
@-webkit-keyframes prize-name-glow {
  0%, 100% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  50% {
    -webkit-filter: brightness(1.28);
            filter: brightness(1.28);
  }
}
@keyframes prize-name-glow {
  0%, 100% {
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  50% {
    -webkit-filter: brightness(1.28);
            filter: brightness(1.28);
  }
}
@-webkit-keyframes prize-trophy-swap {
  0%, 45% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes prize-trophy-swap {
  0%, 45% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes prize-trophy-lightAni {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes prize-trophy-lightAni {
  0% {
    -webkit-transform: translateX(-110%);
            transform: translateX(-110%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@-webkit-keyframes about-go-arrow {
  0%, 20% {
    opacity: 1;
  }
  25%, 100% {
    opacity: 0.22;
  }
}
@keyframes about-go-arrow {
  0%, 20% {
    opacity: 1;
  }
  25%, 100% {
    opacity: 0.22;
  }
}
@-webkit-keyframes trophy-icon {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  50% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-filter: brightness(1.28);
            filter: brightness(1.28);
  }
}
@keyframes trophy-icon {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-filter: brightness(1);
            filter: brightness(1);
  }
  50% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-filter: brightness(1.28);
            filter: brightness(1.28);
  }
}
@-webkit-keyframes deco-bar {
  0% {
    -webkit-transform: translateY(90%);
            transform: translateY(90%);
  }
  18% {
    -webkit-transform: translateY(45%);
            transform: translateY(45%);
  }
  36% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  54% {
    -webkit-transform: translateY(-45%);
            transform: translateY(-45%);
  }
  72% {
    -webkit-transform: translateY(-90%);
            transform: translateY(-90%);
  }
  90%, 100% {
    -webkit-transform: translateY(-140%);
            transform: translateY(-140%);
  }
}
@keyframes deco-bar {
  0% {
    -webkit-transform: translateY(90%);
            transform: translateY(90%);
  }
  18% {
    -webkit-transform: translateY(45%);
            transform: translateY(45%);
  }
  36% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  54% {
    -webkit-transform: translateY(-45%);
            transform: translateY(-45%);
  }
  72% {
    -webkit-transform: translateY(-90%);
            transform: translateY(-90%);
  }
  90%, 100% {
    -webkit-transform: translateY(-140%);
            transform: translateY(-140%);
  }
}/*# sourceMappingURL=main.css.map */