@charset "UTF-8";

.LinkBase {
  position: relative;
  width: 115px;
  height: 48px;
  text-align: center;
  overflow: hidden;
  text-decoration: none;
  border-radius: 6px;
}

.LinkBase span {
  position: relative;
  line-height: 48px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.LinkBase:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  content: "";
  transform: translateY(50%) rotate(-16deg);
}

.LinkBase.blue {
  background: #4ca1af;
}

.LinkBase.blue:before {
  background: #1f879a;
}

.LinkBase.purple {
  background: #9966cc;
}

.LinkBase.purple:before {
  background: #9933cc;
}

.Header {
  position: fixed;
  width: 100%;
  height: 80px;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999999;
}

@media screen and (max-width: 480px) {
  .Header {
    height: 60px;
    background: rgb(0, 0, 0);
  }
}

.Header-wrapper {
  display: flex;
  width: 1024px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

@media screen and (max-width: 480px) {
  .Header-wrapper {
    width: 375px;
  }
}

.Header-logo {
  margin-right: auto;
}

.Header-logoImg {
  width: 144px;
  height: 56px;
}

@media screen and (max-width: 480px) {
  .Header-logoImg {
    width: 90px;
    height: 35px;
  }
}

.Header-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .Header-menu {
    position: absolute;
    flex-direction: column;
    width: 100%;
    top: 60px;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    z-index: 10;
  }
}

.Header-links a {
  padding: 8px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

@media screen and (max-width: 480px) {
  .Header-links a {
    display: block;
  }
}

.Header-links > * + * {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .Header-links > * + * {
    margin-left: 0;
    margin-top: 8px;
  }
}

.Header-accounts {
  display: flex;
  align-items: center;
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .Header-accounts {
    flex-direction: column;
    margin-left: 0;
    padding: 16px 0;
  }
}

.Header-accounts > * + * {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .Header-accounts > * + * {
    margin-left: 0;
    margin-top: 16px;
  }
}

.Header-label {
  display: none;
  justify-content: space-between;
  align-items: center;
  color: #33cccc;
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
}

.Header-label:after {
  content: "";
  width: 51px;
  height: 22px;
  text-align: center;
  line-height: 1;
  font-size: 32px;
  background-image: url("/images/upload/Header_openIcon.svg");
}

@media screen and (max-width: 480px) {
  .Header-label {
    display: flex;
  }
}

.Header input[type=checkbox] {
  display: none;
}

@media screen and (max-width: 480px) {
  .Header input[type=checkbox] + label + .Header-menu {
    display: none;
  }
}

.Header input[type=checkbox]:checked + label + .Header-menu {
  display: flex;
}

.Header input[type=checkbox]:checked + label:after {
  content: "";
  width: 38px;
  height: 38px;
  background-image: url("/images/upload/Header_closeIcon.svg");
}

.Footer {
  width: 100%;
  height: 476px;
  position: absolute;
  bottom: 0;
  background: #000;
}

.Footer * {
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

@media screen and (max-width: 480px) {
  .Footer {
    height: 652px;
  }
}

.Footer-wrapper {
  position: relative;
  display: flex;
  width: 1024px;
  margin: 0 auto;
  padding: 100px 40px;
}

@media screen and (max-width: 480px) {
  .Footer-wrapper {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px 0;
  }
}

.Footer-block {
  color: #fff;
  line-height: 1.4;
}

.Footer-block + .Footer-block {
  margin-left: 48px;
}

@media screen and (max-width: 480px) {
  .Footer-block + .Footer-block {
    margin-top: 48px;
    margin-left: 0;
  }
}

.Footer-block h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
}

.Footer-block nav {
  display: flex;
  flex-direction: column;
}

.Footer-block nav a {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
}

.Footer-block article p {
  line-height: 1.8;
  font-size: 14px;
  color: #fff;
}

.Footer-block article p br {
  display: none;
}

@media screen and (max-width: 480px) {
  .Footer-block article p br {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .Footer-block {
    text-align: center;
  }
}

.Footer-recruit {
  display: flex;
  margin-left: auto;
  align-items: center;
}

@media screen and (max-width: 480px) {
  .Footer-recruit {
    margin-top: 48px;
    margin-left: 0;
  }
}

.Footer-recruit a {
  text-align: center;
  background: linear-gradient(to right, #33cccc, #04889e);
  padding: 0 10px;
}

.Footer-recruit a > * {
  padding: 0 56px;
  line-height: 50px;
}

.Footer-recruit a h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #fff;
  border-bottom: 1px solid #fff;
}

.Footer-recruit a p {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.Footer-join {
  position: absolute;
  top: 0;
  right: 40px;
  transform: translateY(-50%);
}

.Footer-rights {
  display: flex;
  width: 100%;
  height: 68px;
  align-items: center;
  justify-content: center;
  background: #011a20;
}

.Footer-rights small {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.AccessPage-container {
  padding-bottom: 80px;
}

.AccessPage-block {
  display: flex;
  flex-direction: row;
}

.AccessPage-block > * + * {
  margin-top: 0;
  margin-left: 40px;
}

@media screen and (max-width: 480px) {
  .AccessPage-block {
    flex-direction: column;
  }

  .AccessPage-block > * + * {
    margin-top: 40px;
    margin-left: 0;
  }
}

.AccessPage-block iframe {
  width: 640px;
  height: 480px;
  border: 0;
}

@media screen and (max-width: 480px) {
  .AccessPage-block iframe {
    width: 100%;
    height: 240px;
  }
}

.AccessPage-block-area > * + * {
  margin-top: 40px;
}

.AccessPage-block-area address {
  font-style: normal;
}

.AccessPage-block-area .Heading {
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.AccessPage-block-area .Heading:before {
  display: inline-block;
  content: "";
  margin-right: 8px;
  width: 5px;
  height: 16px;
  background: linear-gradient(to top, #33cccc, #04889e);
}

.AccessPage-block-area .AnchorLink {
  display: block;
}

nav.BreadcrumbList {
  margin-top: 16px;
  margin-bottom: 16px;
}

nav.BreadcrumbList a {
  text-decoration: underline;
  font-size: 12px;
}

nav.BreadcrumbList span {
  color: #fff;
  font-size: 12px;
}

nav.BreadcrumbList span + span:before {
  content: ">";
  margin-right: 8px;
  color: #fff;
  font-size: 12px;
}

nav.BreadcrumbList span + span {
  margin-left: 8px;
}

.BasePage {
  padding-top: 80px;
}

@media screen and (max-width: 480px) {
  .BasePage {
    padding-top: 60px;
  }
}

.BasePage-container > * {
  width: 944px;
  margin: 0 auto;
}

@media screen and (max-width: 480px) {
  .BasePage-container > * {
    width: 335px;
  }
}

.BasePage.is-wide .BasePage-container > * {
  width: 100%;
}

.BasePage.is-wide .BasePage-container > * > * {
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media screen and (max-width: 480px) {
  .BasePage.is-wide .BasePage-container > * > * {
    width: 375px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.StoryList-box {
  position: relative;
  padding-bottom: 16px;
}

.StoryList-box h2 {
  font-size: 16px;
  font-weight: 600;
}

.StoryList-box h2 a {
  color: #fff;
}

.StoryList-box h4 {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.StoryList-box > * {
  margin-bottom: 16px;
}

.StoryList-box:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 16px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.Character {
  position: relative;
  border-left: 4px solid #33cccc;
  border-right: 4px solid #04889e;
  padding: 12px 8px;
  width: 284px;
  height: 104px;
  background: #fff;
}

.Character:before,
.Character:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.Character:before {
  top: 0;
}

.Character:after {
  bottom: 0;
}

@media screen and (max-width: 480px) {
  .Character {
    width: 335px;
  }
}

.Character-box {
  display: flex;
}

.Character-box-img {
  width: 80px;
  height: 80px;
  border: 1px solid #33cccc;
}

.Character-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-evenly;
  margin-left: 8px;
}

.Character-profile:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(to right, #33cccc, #04889e);
}

.CharacterList-groups {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 40px 0;
}

.CharacterList-groups > * + * {
  margin-top: 0;
  margin-left: 46px;
}

@media screen and (max-width: 480px) {
  .CharacterList-groups {
    flex-direction: column;
  }

  .CharacterList-groups > * + * {
    margin-top: 40px;
    margin-left: 0;
  }
}

.CharacterList-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.CharacterList-group > * + * {
  margin-top: 20px;
}

.CharacterList-about-group {
  display: flex;
  flex-direction: row;
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.CharacterList-about-group > * + * {
  margin-top: 0;
  margin-left: 32px;
}

@media screen and (max-width: 480px) {
  .CharacterList-about-group {
    flex-direction: column;
  }

  .CharacterList-about-group > * + * {
    margin-top: 32px;
    margin-left: 0;
  }
}

.CharacterList-about-text-indent {
  padding-left: 1em;
  text-indent: -1em;
}

.DotMark {
  position: absolute;
  background-image: radial-gradient(#33cccc 1%, transparent 6%);
  background-size: 28px 28px;
}

@media screen and (max-width: 480px) {
  .DotMark {
    display: none;
  }
}

.CharacterPage-container {
  padding-bottom: 80px;
}

.CharacterPage-container h1 {
  line-height: 1.25;
}

.CharacterPage-container .IntroductionPanel {
  position: relative;
}

.CharacterPage-container .Paragraph {
  margin-top: 40px;
  padding-right: 12px;
}

.CharacterPage-container-image {
  position: relative;
  z-index: 1;
}

.CharacterPage-container-image.pc {
  display: block;
}

@media screen and (max-width: 480px) {
  .CharacterPage-container-image.pc {
    display: none;
  }
}

.CharacterPage-container-image.sp {
  display: none;
}

@media screen and (max-width: 480px) {
  .CharacterPage-container-image.sp {
    display: block;
  }
}

.CharacterPage-container-position {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  background: #33cccc;
  margin-top: 8px;
}

.CharacterPage-container-mark1 {
  width: 260px;
  height: 220px;
  top: 240px;
  left: 600px;
}

.CharacterPage-container-mark2 {
  width: 260px;
  height: 220px;
  top: 480px;
  left: 16px;
}

.CharacterPage-container-mark3 {
  width: 140px;
  height: 140px;
  top: 396px;
  left: 184px;
}

@media screen and (max-width: 480px) {
  .CharacterPage-container h2 {
    font-size: 16px;
  }

  .CharacterPage-container .Paragraph {
    padding-right: 0;
  }
}

.CharacterPage-characters {
  background: radial-gradient(#999 1%, transparent 6%), linear-gradient(to bottom, #4ca1af, #2c3e50);
  background-size: 32px 32px, 100%;
  padding-bottom: 40px;
}

.Star {
  position: relative;
  display: inline-flex;
  line-height: 1.8;
  letter-spacing: 2px;
}

.Star > span {
  left: 0;
  top: 0;
}

.Star-base {
  position: relative;
  width: 100%;
  color: #999;
}

.Star-content {
  position: absolute;
  width: 100%;
  color: #ffcc00;
  overflow: hidden;
}

.EventLabel {
  background: #33cccc;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  border-radius: 8px;
  padding: 4px 8px;
}

.EventPoster {
  position: relative;
  display: flex;
}

.EventPoster-image {
  border: 1px solid #33cccc;
}

.EventPoster-labels {
  position: absolute;
  top: 16px;
  left: 12px;
  pointer-events: none;
}

.EventPoster-labels > * + * {
  margin-left: 8px;
}

.Star {
  position: relative;
  display: inline-flex;
  line-height: 1.8;
  letter-spacing: 2px;
}

.Star > span {
  left: 0;
  top: 0;
}

.Star-base {
  position: relative;
  width: 100%;
  color: #999;
}

.Star-content {
  position: absolute;
  width: 100%;
  color: #ffcc00;
  overflow: hidden;
}

.EventLabel {
  background: #33cccc;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  border-radius: 8px;
  padding: 4px 8px;
}

.EventPoster {
  position: relative;
  display: flex;
}

.EventPoster-image {
  border: 1px solid #33cccc;
}

.EventPoster-labels {
  position: absolute;
  top: 16px;
  left: 12px;
  pointer-events: none;
}

.EventPoster-labels > * + * {
  margin-left: 8px;
}

.EventListPagePcTile {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-bottom: 32px;
}

.EventListPagePcTile:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.EventListPagePcTile + .EventListPagePcTile {
  padding-top: 32px;
}

.EventListPagePcTile .EventListPagePcTile-poster {
  flex-basis: 212px;
}

.EventListPagePcTile .EventListPagePcTile-menu {
  flex-basis: 700px;
}

.EventListPagePcTile .EventListPagePcTile-menu > * + * {
  margin-top: 16px;
}

.EventListPagePcTile .EventListPagePcTile-menu-row {
  display: flex;
}

.EventListPagePcTile .EventListPagePcTile-menu-row-inner {
  display: flex;
  min-width: 300px;
}

.EventListPagePcTile .EventListPagePcTile-menu-row-inner-title {
  font-size: 16px;
  font-weight: bold;
}

.EventListPagePcTile .EventListPagePcTile-menu-row-inner-body {
  font-size: 16px;
}

.EventListPagePcTile .EventListPagePcTile-menu-row > * + * {
  margin-left: 16px;
}

.EventListPagePcTile .EventListPagePcTile-menu-detail {
  margin-top: 32px;
}

.EventListPagePcTile .EventListPagePcTile-buttonContainer {
  display: flex;
  justify-content: flex-end;
}

.EventListPagePcTile .EventListPagePcTile-button {
  padding: 8px 16px;
}

.Star {
  position: relative;
  display: inline-flex;
  line-height: 1.8;
  letter-spacing: 2px;
}

.Star > span {
  left: 0;
  top: 0;
}

.Star-base {
  position: relative;
  width: 100%;
  color: #999;
}

.Star-content {
  position: absolute;
  width: 100%;
  color: #ffcc00;
  overflow: hidden;
}

.EventLabel {
  background: #33cccc;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  border-radius: 8px;
  padding: 4px 8px;
}

.EventPoster {
  position: relative;
  display: flex;
}

.EventPoster-image {
  border: 1px solid #33cccc;
}

.EventPoster-labels {
  position: absolute;
  top: 16px;
  left: 12px;
  pointer-events: none;
}

.EventPoster-labels > * + * {
  margin-left: 8px;
}

.EventListPageSpTile {
  position: relative;
  padding-bottom: 32px;
}

.EventListPageSpTile:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.EventListPageSpTile + .EventListPageSpTile {
  padding-top: 32px;
}

.EventListPageSpTile-top {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.EventListPageSpTile-poster {
  flex-basis: 156px;
}

.EventListPageSpTile-description {
  flex-basis: 156px;
}

.EventListPageSpTile-description-labels {
  margin-bottom: 12px;
}

.EventListPageSpTile-description-labels > * + * {
  margin-left: 8px;
}

.EventListPageSpTile .EventListPageSpTile-menu {
  margin-top: 16px;
}

.EventListPageSpTile .EventListPageSpTile-menu > * + * {
  margin-top: 16px;
}

.EventListPageSpTile .EventListPageSpTile-menu-row {
  display: flex;
  align-items: center;
}

.EventListPageSpTile .EventListPageSpTile-menu-row-title {
  font-size: 16px;
  font-weight: bold;
}

.EventListPageSpTile .EventListPageSpTile-menu-row-body {
  font-size: 16px;
}

.EventListPageSpTile .EventListPageSpTile-buttonContainer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.EventListPage-container {
  margin-bottom: 80px;
}

.EventListPage-container-block.pc {
  display: block;
}

@media screen and (max-width: 480px) {
  .EventListPage-container-block.pc {
    display: none;
  }
}

.EventListPage-container-block.sp {
  display: none;
}

@media screen and (max-width: 480px) {
  .EventListPage-container-block.sp {
    display: block;
  }
}

.EventImageSlider {
  width: 100%;
  position: relative;
  margin-top: 30px;
}

@media screen and (max-width: 480px) {
  .EventImageSlider {
    margin-top: 16px;
  }
}

.EventImageSlider-body {
  height: 445px;
}

@media screen and (max-width: 480px) {
  .EventImageSlider-body {
    height: 268px;
  }
}

.EventImageSlider-block {
  position: relative;
  width: 660px;
  height: 382px;
}

.EventImageSlider-block img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
}

@media screen and (max-width: 480px) {
  .EventImageSlider-block img {
    width: 300px;
  }
}

@media screen and (max-width: 480px) {
  .EventImageSlider-block {
    width: 360px;
    height: 240px;
  }
}

.EventImageSlider .slick-dots {
  bottom: 24px;
}

.EventImageSlider .slick-dots li {
  margin: 0;
}

.EventImageSlider .slick-dots li button {
  position: relative;
}

.EventImageSlider .slick-dots li button:before {
  content: "\25CF";
  font-size: 8px;
  color: #999;
  text-indent: 0;
  opacity: 1;
}

.EventImageSlider .slick-dots li.slick-active button:before {
  content: "\25CF";
  color: #33cccc;
}

.EventImageSlider-prevButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: -30px 0 0 -329px;
  z-index: 1;
}

.EventImageSlider-prevButton button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 480px) {
  .EventImageSlider-prevButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -16px 0 0 -156px;
  }
}

.EventImageSlider-nextButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: -30px 0 0 329px;
  z-index: 1;
}

.EventImageSlider-nextButton button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 480px) {
  .EventImageSlider-nextButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -16px 0 0 153px;
  }
}

#EventImageSlider > svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 217px;
  pointer-events: none;
}

#EventImageSlider > svg:nth-child(2) {
  bottom: 68px;
  margin: 0 0 -32px -230px;
}

@media screen and (max-width: 480px) {
  #EventImageSlider > svg:nth-child(2) {
    transform: scale(0.5);
    bottom: 30px;
    margin: 0 0 -19px -220px;
  }
}

#EventImageSlider > svg:nth-child(3) {
  top: 0;
  margin: -28px 0 0 233px;
}

@media screen and (max-width: 480px) {
  #EventImageSlider > svg:nth-child(3) {
    transform: scale(0.5);
    margin: -15px 0 0 5px;
  }
}

#EventImageSlider > * {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.EventPage-container {
  margin-bottom: 80px;
}

@media screen and (max-width: 480px) {
  .EventPage-container {
    width: 372px;
  }
}

.EventPage-container-area {
  padding: 40px;
  background: #fff;
}

.EventPage-container-area-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.EventPage-container-area-title-label {
  margin-right: 8px;
}

.EventPage-container-area-title .Heading {
  color: #333;
}

.EventPage-container-area-title > * + * {
  margin-left: 24px;
}

@media screen and (max-width: 480px) {
  .EventPage-container-area {
    padding: 16px 16px;
  }
}

.EventPage-image.pc {
  display: block;
}

@media screen and (max-width: 480px) {
  .EventPage-image.pc {
    display: none;
  }
}

.EventPage-image.sp {
  display: none;
}

@media screen and (max-width: 480px) {
  .EventPage-image.sp {
    display: block;
  }
}

.EventPage-block {
  padding: 16px 0;
}

.EventPage-block + .EventPage-block {
  border-top: 1px solid #999;
}

.EventPage-table th {
  width: 144px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.EventPage-table td {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 300;
}

.EventPage-table td > * {
  display: flex;
  align-items: center;
}

.EventPage-table th,
.EventPage-table td {
  padding: 8px 0;
}

@media screen and (max-width: 480px) {
  .EventPage-table th,
  .EventPage-table td {
    display: block;
  }
}

.EventPage-table span {
  letter-spacing: 0.5px;
  font-size: 18px;
  font-weight: 600;
}

.EventPage-table aside {
  margin: 8px 0;
  line-height: 1.5;
  color: #ff6666;
}

.EventPage-table small {
  color: #999;
}

.EventPage-table small a {
  color: #999;
  text-decoration: underline;
}

.EventPage .EventPage-star {
  display: inline-flex;
  margin-left: 0;
}

.EventPage-story h3 {
  padding: 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.EventPage-story .Paragraph {
  color: #333;
}

.EventPage-story p {
  line-height: 1.8;
  font-size: 14px;
}

.EventPage-spoiler {
  margin: 32px 0;
  padding: 32px;
  background: #ccffff;
}

.EventPage-spoiler > * + * {
  margin-top: 32px;
}

.EventPage-sns {
  justify-content: flex-end;
  margin-top: 16px;
}

.EventPage-button {
  margin: 24px 0 24px 0;
}

.EventPage-button > * + * {
  margin-top: 12px;
}

.EventPage-button small {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.8;
  font-size: 14px;
}

.EventPage-button small > * {
  color: #999;
  font-size: 14px;
}

.EventPage-button small a {
  color: #999;
  font-size: 14px;
  text-decoration: underline;
}

.FAQPage-container {
  margin-bottom: 80px;
}

.FAQPage-area {
  position: relative;
  border-left: 4px solid #33cccc;
  border-right: 4px solid #04889e;
}

.FAQPage-area:before,
.FAQPage-area:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.FAQPage-area:before {
  top: 0;
}

.FAQPage-area:after {
  bottom: 0;
}

.FAQPage-area + .FAQPage-area {
  margin-top: 40px;
}

.FAQPage-selectors {
  padding: 8px 32px;
  background: linear-gradient(to right, rgba(51, 204, 204, 0.2), rgba(4, 136, 158, 0.2));
}

.FAQPage-selectors a {
  color: #33cccc;
  text-decoration: underline;
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
}

.FAQPage-selectors > * {
  padding: 12px 0;
}

.FAQPage-selectors > * + * {
  border-top: 1px dotted #33cccc;
}

.FAQPage-block label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  color: #33cccc;
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.FAQPage-block label:after {
  content: "+";
  width: 32px;
  text-align: center;
  line-height: 1;
  font-size: 32px;
}

.FAQPage-block input[type=checkbox] {
  display: none;
}

.FAQPage-block input[type=checkbox] + label + dl {
  display: none;
  transition: all 0.8s ease 0s;
}

.FAQPage-block input[type=checkbox]:checked + label + dl {
  display: block;
  transition: all 0.8s ease 0s;
}

.FAQPage-block input[type=checkbox]:checked + label:after {
  content: "-";
}

.FAQPage-faq {
  padding: 0 20px 20px;
}

.FAQPage-faq > * + * {
  margin-top: 32px;
}

.FAQPage-faq dt {
  margin-bottom: 16px;
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.FAQPage-faq dt:before {
  display: inline-block;
  content: "";
  margin-right: 8px;
  width: 5px;
  height: 16px;
  background: linear-gradient(to top, #33cccc, #04889e);
}

.FAQPage-faq dd {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
}

.FAQPage-faq dd a {
  color: #33cccc;
  text-decoration: underline;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.LicensePage-license {
  padding-bottom: 80px;
}

.LicensePage-license-description {
  text-align: center;
}

.LicensePage-license-description > * + * {
  margin-top: 16px;
}

.LicensePage-about {
  background: radial-gradient(#999 1%, transparent 6%), linear-gradient(to bottom, #4ca1af, #2c3e50);
  background-size: 32px 32px, 100%;
  padding: 80px 0;
}

.LicensePage-about .LicensePage-about-title {
  line-height: 1;
  margin-bottom: 24px;
  font-size: 40px;
}

@media screen and (max-width: 480px) {
  .LicensePage-about .LicensePage-about-title {
    text-align: center;
  }
}

.LicensePage-about-image {
  position: relative;
  border-left: 10px solid #33cccc;
  border-right: 10px solid #04889e;
}

.LicensePage-about-image:before,
.LicensePage-about-image:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.LicensePage-about-image:before {
  top: 0;
}

.LicensePage-about-image:after {
  bottom: 0;
}

.LicensePage-about-text-indent {
  padding-left: 1em;
  text-indent: -1em;
}

.LicensePage-about-text-explanation {
  margin-bottom: 16px;
}

.LicensePage-about-group {
  display: flex;
  flex-direction: row;
}

.LicensePage-about-group > * + * {
  margin-top: 0;
  margin-left: 32px;
}

@media screen and (max-width: 480px) {
  .LicensePage-about-group {
    flex-direction: column;
  }

  .LicensePage-about-group > * + * {
    margin-top: 32px;
    margin-left: 0;
  }
}

.LicensePage-about > * + * {
  margin-top: 64px;
}

.LicensePage-auth {
  padding: 80px 0;
}

.LicensePage-auth > * + * {
  margin-top: 64px;
}

.LicensePage-auth-block {
  text-align: center;
}

@media screen and (max-width: 480px) {
  .LicensePage-auth-block .Paragraph {
    text-align: left;
  }
}

.LicensePage-auth-block > * + * {
  margin-top: 32px;
}

.LicensePage-auth-block > *:last-child {
  margin-top: 16px;
}

.LicensePage-auth-text-indent {
  margin-top: 0;
  padding-left: 1em;
  text-indent: -1em;
}

.LicensePage-card-stop {
  color: #ff6666;
}

.LicensePage-comment {
  color: white;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.FormLabel {
  display: flex;
  align-items: center;
  margin-left: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 480px) {
  .FormLabel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.FormLabel label {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.FormLabel label.is-must:after {
  display: inline-block;
  content: "\5FC5\9808";
  margin-left: 16px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  background: #ff9900;
  border-radius: 8px;
}

.FormLabel .Paragraph {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .FormLabel .Paragraph {
    margin-left: 0;
  }
}

.FormInput {
  width: 100%;
}

.FormInput-text {
  width: auto;
}

.FormTextArea {
  width: 100%;
}

.FormTextArea-textarea {
  height: 100px;
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormRadio-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormRadio-input {
  margin: 0 8px 0 0;
}

.FormRadio-children {
  color: #fff;
}

.FormCheckBox-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormCheckBox-input {
  margin: 0 8px 0 0;
}

.FormCheckBox-children {
  color: #fff;
}

.FormDate {
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormBase-buttons {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
  align-items: center;
  justify-content: center;
}

.FormBase-buttons > * + * {
  margin-top: 0;
  margin-left: 40px;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons {
    flex-direction: column;
  }

  .FormBase-buttons > * + * {
    margin-top: 40px;
    margin-left: 0;
  }
}

.FormBase-buttons button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.FormBase-buttons button:hover {
  transform: scale(1.2);
}

.FormBase-buttons button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons button {
    padding: 12px 60px;
  }
}

.FormBase-error {
  margin-bottom: 16px;
  color: #ff6666;
}

.LicenseIssuePage-license {
  padding-bottom: 80px;
}

.LicenseIssuePage-license-description {
  text-align: center;
  padding-bottom: 80px;
}

.LicenseIssuePage-license-description > * + * {
  margin-top: 16px;
}

.LicenseIssuePage-container {
  padding-bottom: 80px;
}

.LicenseIssuePage-container-block {
  padding-bottom: 24px;
}

.LicenseIssuePage-container-block-row {
  display: flex;
  align-items: center;
}

.LicenseIssuePage-container-block-row > * + * {
  margin-left: 16px;
}

.LicenseIssuePage-container-block.is-check {
  position: relative;
}

.LicenseIssuePage-container-block.is-check:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.LicenseIssuePage-container-block-center {
  display: flex;
  justify-content: center;
}

.LicenseIssuePage-container-block-centerBox {
  display: inline-block;
}

.LicenseIssuePage-container-block + .LicenseIssuePage-container-block {
  padding-top: 24px;
}

.LicenseIssuePage-container-separator {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.LicenseIssuePage-container form > * + * {
  margin-top: 24px;
}

.LicenseIssuePage .LicenseIssuePage-postalBefore {
  width: auto;
}

@media screen and (max-width: 480px) {
  .LicenseIssuePage .LicenseIssuePage-postalBefore {
    width: 72px;
  }
}

.LicenseIssuePage .LicenseIssuePage-postalAfter {
  width: auto;
}

@media screen and (max-width: 480px) {
  .LicenseIssuePage .LicenseIssuePage-postalAfter {
    width: 88px;
  }
}

.LicenseIssuePage .LicenseIssuePage-postalSep {
  color: #fff;
}

.LicenseIssuePage .LicenseIssuePage-postalButton {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
  padding: 4px 24px;
  border: none;
  border-radius: 4px;
  background: #33cccc;
  transition: none;
  color: #fff;
}

.LicenseIssuePage .LicenseIssuePage-postalButton:hover {
  transform: scale(1.2);
}

.LicenseIssuePage .LicenseIssuePage-postalButton:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .LicenseIssuePage .LicenseIssuePage-postalButton {
    padding: 12px 60px;
  }
}

.LicenseIssuePage .LicenseIssuePage-postalButton:hover {
  transform: none;
  background: #1f879a;
}

.LicenseIssuePage .LicenseIssuePage-postalButton:disabled {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .LicenseIssuePage .LicenseIssuePage-postalButton {
    padding: 6px 24px;
  }
}

.LicenseIssuePage .LicenseIssuePage-term {
  justify-content: center;
}

.LicenseIssuePage .LicenseIssuePage-term > .Paragraph {
  font-size: 18px;
}

.LicenseIssuePage .LicenseIssuePage-link {
  text-decoration: underline;
  color: #33cccc;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.LicenseIssueLockPage-license {
  padding-bottom: 80px;
}

.LicenseIssueLockPage-license-description {
  text-align: center;
  padding-bottom: 80px;
}

.LicenseIssueLockPage-license-description > * + * {
  margin-top: 16px;
}

.LicenseIssueLockPage-buttons > * + * {
  margin-top: 16px;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.LicenseDonePage-license {
  padding-bottom: 80px;
}

.LicenseDonePage-license-description {
  text-align: center;
}

.LicenseDonePage-license-description > .LicenseDonePage-license-description-cautions {
  padding: 1em;
  background: #ccffff;
  text-align: left;
  list-style: none;
}

.LicenseDonePage-license-description > .LicenseDonePage-license-description-cautions .Paragraph {
  color: #333;
  padding-left: 1em;
  text-indent: -1em;
}

.LicenseDonePage-license-description > * + * {
  margin-top: 40px;
}

.FormLabel {
  display: flex;
  align-items: center;
  margin-left: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 480px) {
  .FormLabel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.FormLabel label {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.FormLabel label.is-must:after {
  display: inline-block;
  content: "\5FC5\9808";
  margin-left: 16px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  background: #ff9900;
  border-radius: 8px;
}

.FormLabel .Paragraph {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .FormLabel .Paragraph {
    margin-left: 0;
  }
}

.FormInput {
  width: 100%;
}

.FormInput-text {
  width: auto;
}

.FormTextArea {
  width: 100%;
}

.FormTextArea-textarea {
  height: 100px;
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormRadio-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormRadio-input {
  margin: 0 8px 0 0;
}

.FormRadio-children {
  color: #fff;
}

.FormCheckBox-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormCheckBox-input {
  margin: 0 8px 0 0;
}

.FormCheckBox-children {
  color: #fff;
}

.FormDate {
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.SingleFormBase-button {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

.SingleFormBase-button button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.SingleFormBase-button button:hover {
  transform: scale(1.2);
}

.SingleFormBase-button button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .SingleFormBase-button button {
    padding: 12px 60px;
  }
}

.SingleFormBase-error {
  margin-bottom: 16px;
  color: #ff6666;
}

.LicenseAuthenticationPage-container {
  padding-bottom: 80px;
}

.LicenseAuthenticationPage-container-description {
  text-align: center;
}

.LicenseAuthenticationPage-container-form-block .InputText {
  width: 100%;
}

.LicenseAuthenticationPage-container-form-block + .LicenseAuthenticationPage-container-form-block {
  padding-top: 24px;
}

.LicenseAuthenticationPage-container-form-buttonBlock {
  padding-top: 40px;
  text-align: center;
}

.LicenseAuthenticationPage-container-form-buttonBlock button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.LicenseAuthenticationPage-container-form-buttonBlock button:hover {
  transform: scale(1.2);
}

.LicenseAuthenticationPage-container-form-buttonBlock button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .LicenseAuthenticationPage-container-form-buttonBlock button {
    padding: 12px 60px;
  }
}

.LicenseAuthenticationPage-container-form-buttonBlock > * + * {
  margin-top: 16px;
}

.LicenseAuthenticationPage-container > * + * {
  margin-top: 40px;
}

.LicenseAuthenticationPage-caution {
  margin-top: 16px;
}

.LoginPage-container {
  padding-bottom: 80px;
}

.LoginPage-container-description {
  text-align: center;
}

.LoginPage-container-part .Heading {
  text-align: center;
  margin-bottom: 16px;
}

.LoginPage-container-part .LoginPage-container-part-twitter {
  text-align: center;
}

.LoginPage-container-part .LoginPage-container-part-twitter > .AnchorLink {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  background-color: black;
  border-radius: 8px;
  text-decoration: none;
  padding: 8px;
  padding-left: 10px;
  border: white solid 2px;
}

.LoginPage-container-part .LoginPage-container-part-twitter > .AnchorLink:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  background: url("/images/upload/LoginPage-XIcon.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.LoginPage-container-form-block .InputText {
  width: 100%;
}

.LoginPage-container-form-block + .LoginPage-container-form-block {
  padding-top: 24px;
}

.LoginPage-container-form-buttonBlock {
  padding-top: 40px;
  text-align: center;
}

.LoginPage-container-form-buttonBlock button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.LoginPage-container-form-buttonBlock button:hover {
  transform: scale(1.2);
}

.LoginPage-container-form-buttonBlock button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .LoginPage-container-form-buttonBlock button {
    padding: 12px 60px;
  }
}

.LoginPage-container-form-buttonBlock > * + * {
  margin-top: 16px;
}

.LoginPage-container > * + * {
  margin-top: 40px;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.AnchorLinkButton2 {
  text-align: center;
}

.AnchorLinkButton2-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  background: #33cccc;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.AnchorLinkButton2.is-disabled .AnchorLinkButton2-link {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.AnchorLinkButton2 {
  text-align: center;
}

.AnchorLinkButton2-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  background: #33cccc;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.AnchorLinkButton2.is-disabled .AnchorLinkButton2-link {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.AnchorLinkButton2 {
  text-align: center;
}

.AnchorLinkButton2-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  background: #33cccc;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.AnchorLinkButton2.is-disabled .AnchorLinkButton2-link {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.MyPageSkillListPanel {
  position: relative;
  border-left: 4px solid #33cccc;
  border-right: 4px solid #04889e;
  background: linear-gradient(to right, rgba(51, 204, 204, 0.2), rgba(4, 136, 158, 0.2));
  padding: 16px;
}

.MyPageSkillListPanel:before,
.MyPageSkillListPanel:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.MyPageSkillListPanel:before {
  top: 0;
}

.MyPageSkillListPanel:after {
  bottom: 0;
}

.MyPageSkillListPanel-caption {
  text-align: center;
}

.MyPageSkillListPanel-list-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
}

.MyPageSkillListPanel-list-data-row p {
  line-height: 1.25;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.MyPageSkillListPanel-list-data-bar {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.MyPageScorePanel-grade {
  padding-bottom: 80px;
}

.MyPageScorePanel-grade-agent .Paragraph {
  margin-top: 8px;
}

.MyPageScorePanel-grade-agent-bar {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
  margin-top: 24px;
  margin-bottom: 24px;
}

.MyPageScorePanel-grade-area {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-grade-area {
    flex-direction: column;
  }
}

.MyPageScorePanel-grade-area-block {
  width: 100%;
}

.MyPageScorePanel-grade-area-block-title {
  margin-bottom: 16px;
  padding: 8px 0;
  text-align: center;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.MyPageScorePanel-grade-area-block-title .Paragraph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
}

.MyPageScorePanel-grade-area-block-title .Paragraph > span {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.MyPageScorePanel-grade-area-block-title .Paragraph > span.large {
  margin: 0 4px;
  font-size: 24px;
}

.MyPageScorePanel-grade-area-block-chart {
  width: 100%;
  height: 320px;
  margin: 64px auto 0;
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-grade-area-block-chart {
    height: 152px;
    margin: 0 auto;
  }
}

.MyPageScorePanel-grade-area-block-getRankButton {
  position: relative;
  width: 115px;
  height: 48px;
  text-align: center;
  overflow: hidden;
  text-decoration: none;
  border-radius: 6px;
  background: #9933cc;
  cursor: pointer;
  border: none;
}

.MyPageScorePanel-grade-area-block-getRankButton span {
  position: relative;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.MyPageScorePanel-grade-area > * + * {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-grade-area > * + * {
    margin-left: 0;
    margin-top: 16px;
  }
}

.MyPageScorePanel-points,
.MyPageScorePanel-quiz {
  padding: 80px 0;
}

.MyPageScorePanel-points-row,
.MyPageScorePanel-quiz-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px dashed #fff;
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-points-row,
  .MyPageScorePanel-quiz-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.MyPageScorePanel-points-row > span,
.MyPageScorePanel-quiz-row > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: 16px;
       column-gap: 16px;
}

.MyPageScorePanel-points-row > span > .Paragraph,
.MyPageScorePanel-quiz-row > span > .Paragraph {
  font-weight: 600;
}

.MyPageScorePanel-points-row-title-caption,
.MyPageScorePanel-quiz-row-title-caption {
  flex-grow: 1;
  flex-basis: 0;
}

.MyPageScorePanel-points-row-title-label,
.MyPageScorePanel-quiz-row-title-label {
  background: #33cccc;
  padding: 2px 8px;
  border-radius: 4px;
  box-sizing: border-box;
}

.MyPageScorePanel-points-row-title-label.is-notYet,
.MyPageScorePanel-quiz-row-title-label.is-notYet {
  background: #999;
}

.MyPageScorePanel-points-row-title-label.is-playing,
.MyPageScorePanel-quiz-row-title-label.is-playing {
  background: #ffcc00;
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-points-row-title-label,
  .MyPageScorePanel-quiz-row-title-label {
    flex-basis: 64px;
    text-align: center;
  }
}

.MyPageScorePanel-points-row-title-url,
.MyPageScorePanel-quiz-row-title-url {
  text-decoration: underline;
  font-size: 14px;
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-points-row-title,
  .MyPageScorePanel-quiz-row-title {
    width: 100%;
  }
}

.MyPageScorePanel-points-row .AnchorLinkButton-link,
.MyPageScorePanel-quiz-row .AnchorLinkButton-link {
  padding: 6px 10px;
  border-radius: 4px;
  color: #fff;
  border-color: #fff;
  box-sizing: border-box;
  width: unset;
  height: unset;
  font-size: 13px;
  border-radius: 1000px;
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-points-row .AnchorLinkButton-link,
  .MyPageScorePanel-quiz-row .AnchorLinkButton-link {
    width: 100%;
    margin: 5px 0;
  }
}

@media screen and (max-width: 480px) {
  .MyPageScorePanel-points-row > .MyPageScorePanel-points-row-meta,
  .MyPageScorePanel-points-row > .MyPageScorePanel-quiz-row-meta,
  .MyPageScorePanel-quiz-row > .MyPageScorePanel-points-row-meta,
  .MyPageScorePanel-quiz-row > .MyPageScorePanel-quiz-row-meta {
    display: block;
    width: 100%;
  }

  .MyPageScorePanel-points-row > .MyPageScorePanel-points-row-meta .AnchorLinkButton2,
  .MyPageScorePanel-points-row > .MyPageScorePanel-quiz-row-meta .AnchorLinkButton2,
  .MyPageScorePanel-quiz-row > .MyPageScorePanel-points-row-meta .AnchorLinkButton2,
  .MyPageScorePanel-quiz-row > .MyPageScorePanel-quiz-row-meta .AnchorLinkButton2 {
    text-align: center;
  }

  .MyPageScorePanel-points-row > .MyPageScorePanel-points-row-meta > * + *,
  .MyPageScorePanel-points-row > .MyPageScorePanel-quiz-row-meta > * + *,
  .MyPageScorePanel-quiz-row > .MyPageScorePanel-points-row-meta > * + *,
  .MyPageScorePanel-quiz-row > .MyPageScorePanel-quiz-row-meta > * + * {
    margin-left: 0;
  }
}

.MyPageScorePanel-points .Heading,
.MyPageScorePanel-quiz .Heading {
  text-align: center;
}

.MyPageScorePanel-points .AnchorLinkButton,
.MyPageScorePanel-quiz .AnchorLinkButton {
  margin-top: 32px;
}

.MyPageScorePanel-points {
  background: radial-gradient(#999 1%, transparent 6%), linear-gradient(to bottom, #4ca1af, #2c3e50);
  background-size: 32px 32px, 100%;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.FormLabel {
  display: flex;
  align-items: center;
  margin-left: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 480px) {
  .FormLabel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.FormLabel label {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.FormLabel label.is-must:after {
  display: inline-block;
  content: "\5FC5\9808";
  margin-left: 16px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  background: #ff9900;
  border-radius: 8px;
}

.FormLabel .Paragraph {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .FormLabel .Paragraph {
    margin-left: 0;
  }
}

.FormInput {
  width: 100%;
}

.FormInput-text {
  width: auto;
}

.FormTextArea {
  width: 100%;
}

.FormTextArea-textarea {
  height: 100px;
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormRadio-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormRadio-input {
  margin: 0 8px 0 0;
}

.FormRadio-children {
  color: #fff;
}

.FormCheckBox-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormCheckBox-input {
  margin: 0 8px 0 0;
}

.FormCheckBox-children {
  color: #fff;
}

.FormDate {
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormBase-buttons {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
  align-items: center;
  justify-content: center;
}

.FormBase-buttons > * + * {
  margin-top: 0;
  margin-left: 40px;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons {
    flex-direction: column;
  }

  .FormBase-buttons > * + * {
    margin-top: 40px;
    margin-left: 0;
  }
}

.FormBase-buttons button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.FormBase-buttons button:hover {
  transform: scale(1.2);
}

.FormBase-buttons button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons button {
    padding: 12px 60px;
  }
}

.FormBase-error {
  margin-bottom: 16px;
  color: #ff6666;
}

.MypageProfileForm {
  padding-bottom: 80px;
}

.MypageProfileForm-block {
  padding-bottom: 24px;
}

.MypageProfileForm-block-row {
  display: flex;
  align-items: center;
}

.MypageProfileForm-block-row > * + * {
  margin-left: 16px;
}

.MypageProfileForm-block.is-check {
  position: relative;
}

.MypageProfileForm-block.is-check:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.MypageProfileForm-block + .MypageProfileForm-block {
  padding-top: 24px;
}

.MypageProfileForm .MypageProfileForm-postalBefore {
  width: auto;
}

@media screen and (max-width: 480px) {
  .MypageProfileForm .MypageProfileForm-postalBefore {
    width: 72px;
  }
}

.MypageProfileForm .MypageProfileForm-postalAfter {
  width: auto;
}

@media screen and (max-width: 480px) {
  .MypageProfileForm .MypageProfileForm-postalAfter {
    width: 88px;
  }
}

.MypageProfileForm .MypageProfileForm-postalButton {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
  padding: 4px 24px;
  border: none;
  border-radius: 4px;
  background: #33cccc;
  transition: none;
  color: #fff;
}

.MypageProfileForm .MypageProfileForm-postalButton:hover {
  transform: scale(1.2);
}

.MypageProfileForm .MypageProfileForm-postalButton:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .MypageProfileForm .MypageProfileForm-postalButton {
    padding: 12px 60px;
  }
}

.MypageProfileForm .MypageProfileForm-postalButton:hover {
  transform: none;
  background: #1f879a;
}

.MypageProfileForm .MypageProfileForm-postalButton:disabled {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .MypageProfileForm .MypageProfileForm-postalButton {
    padding: 6px 24px;
  }
}

.MyPage-selector {
  padding-bottom: 16px;
}

.MyPage-selector-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.MyPage-selector-toggle button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-block;
  width: 300px;
  padding: 8px 0;
  color: #fff;
  line-height: 1.8;
  font-size: 18px;
  font-weight: 600;
  background: #99cccc;
  pointer-events: auto;
}

.MyPage-selector-toggle button:disabled {
  background: #33cccc;
  pointer-events: none;
}

.MyPage-selector-toggle button:disabled:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  border-top: 16px solid #33cccc;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid transparent;
}

.MyPage-selector-toggle > button + button {
  margin-left: 32px;
}

@media screen and (max-width: 480px) {
  .MyPage-selector-toggle > button + button {
    margin-left: 0;
  }
}

.MyPage-selector-description {
  text-align: right;
}

.MyPage-selector-description .Paragraph {
  text-align: center;
}

.MyPage-selector-description .AnchorLinkButton2 {
  text-align: right;
}

@media screen and (max-width: 480px) {
  .MyPage-selector-description .AnchorLinkButton2 {
    margin-top: 16px;
    text-align: center;
  }
}

.MyPage-selector-description button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  padding: 8px 16px;
  text-align: center;
  border-radius: 4px;
  background: #33cccc;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .MyPage-selector-description button {
    margin-top: 16px;
  }
}

@media screen and (max-width: 480px) {
  .MyPage-selector-description {
    text-align: center;
  }
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.AnchorLinkButton {
  text-align: center;
}

.AnchorLinkButton-link {
  display: inline-block;
  padding: 16px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
}

@media screen and (max-width: 480px) {
  .AnchorLinkButton-link {
    padding: 16px 60px;
  }
}

.AnchorLinkButton-link:hover {
  transform: scale(1.2);
}

.AnchorLinkButton.is-disabled .AnchorLinkButton-link {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

.InputText {
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.InputText:disabled::-moz-placeholder {
  color: #fff;
}

.InputText:disabled::placeholder {
  color: #fff;
}

.MyScorePage {
  padding-bottom: 80px;
}

.MyScorePage-container {
  text-align: center;
}

.MyScorePage-container-block {
  position: relative;
  padding-bottom: 40px;
}

.MyScorePage-container-block:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.MyScorePage-container-block-image {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 480px) {
  .MyScorePage-container-block-image {
    width: 100%;
  }
}

.MyScorePage-container-block-area > * + * {
  margin-top: 16px;
}

.MyScorePage-container-block-link {
  text-decoration: underline;
}

.MyScorePage-container-block .MyScorePage-container-block-input {
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 480px) {
  .MyScorePage-container-block .MyScorePage-container-block-input {
    width: 100%;
  }
}

.MyScorePage-container-block + .MyScorePage-container-block {
  padding-top: 40px;
}

.MyScorePage-container-block > * + * {
  margin-top: 32px;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.NewsList-box {
  position: relative;
  padding-bottom: 16px;
}

.NewsList-box .Paragraph {
  font-size: 12px;
}

.NewsList-box > * {
  margin-bottom: 8px;
}

.NewsList-box:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 16px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.NewsListPage-container {
  margin-bottom: 80px;
}

.SNSButtons {
  display: flex;
}

.SNSButtons > * + * {
  margin-left: 20px;
}

.SNSButtons button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.SNSButtons img {
  width: 36px;
  height: 36px;
}

.NewsPage-container {
  margin-bottom: 80px;
}

.NewsPage-container-area {
  padding: 40px;
  background: #fff;
}

.NewsPage-container-area .Heading,
.NewsPage-container-area .Paragraph {
  color: #333;
}

.NewsPage-container-area > * + * {
  margin-top: 20px;
}

.NewsPage-link {
  display: flex;
  height: 90px;
  padding: 0 32px;
  align-items: center;
  background: linear-gradient(to right, #33cccc, #04889e);
}

@media screen and (max-width: 480px) {
  .NewsPage-link {
    padding: 0 16px;
  }
}

.NewsPage-link > * + * {
  margin-left: 32px;
}

@media screen and (max-width: 480px) {
  .NewsPage-link > * + * {
    margin-left: 16px;
  }
}

.NewsPage-link .Paragraph {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.NewsPage-sns {
  justify-content: flex-end;
}

.RecruitPage-container {
  margin-bottom: 80px;
}

.RecruitPage-container-area {
  padding: 24px 40px;
  background: #fff;
}

.RecruitPage-block {
  padding: 16px 0;
}

.RecruitPage-block-table th {
  width: 144px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.RecruitPage-block-table td {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 300;
}

.RecruitPage-block-table td .Paragraph {
  color: #333;
}

.RecruitPage-block-table td > * {
  display: flex;
  align-items: center;
}

.RecruitPage-block-table th,
.RecruitPage-block-table td {
  padding: 8px 0;
}

@media screen and (max-width: 480px) {
  .RecruitPage-block-table th,
  .RecruitPage-block-table td {
    display: block;
  }
}

.RecruitPage-block-button {
  margin-top: 24px;
}

.RecruitPage-block + .RecruitPage-block {
  border-top: 1px solid #999;
}

.SignupPage-container {
  padding-bottom: 80px;
}

.SignupPage-container-description {
  text-align: center;
}

.SignupPage-container-description-link {
  text-decoration: underline;
  color: #33cccc;
}

.SignupPage-container-part .Heading {
  text-align: center;
  margin-bottom: 16px;
}

.SignupPage-container-part .SignupPage-container-part-twitter {
  text-align: center;
}

.SignupPage-container-part .SignupPage-container-part-twitter > .AnchorLink {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  background-color: #1da1f2;
  border-radius: 4px;
  text-decoration: none;
  padding-right: 8px;
}

.SignupPage-container-part .SignupPage-container-part-twitter > .AnchorLink:before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url("/images/upload/LoginPage-twitterIcon.png");
  background-size: contain;
}

.SignupPage-container-form-block .FormInput {
  width: 100%;
}

.SignupPage-container-form-block + .SignupPage-container-form-block {
  padding-top: 24px;
}

.SignupPage-container-form-buttonBlock {
  padding-top: 40px;
  text-align: center;
}

.SignupPage-container-form-buttonBlock button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.SignupPage-container-form-buttonBlock button:hover {
  transform: scale(1.2);
}

.SignupPage-container-form-buttonBlock button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .SignupPage-container-form-buttonBlock button {
    padding: 12px 60px;
  }
}

.SignupPage-container-form-buttonBlock > * + * {
  margin-top: 16px;
}

.SignupPage-container > * + * {
  margin-top: 40px;
}

.SignupPage-caution {
  margin-top: 16px;
  text-align: center;
}

.SignupMailPage-container {
  padding-bottom: 80px;
}

.SignupMailPage-container-description {
  text-align: center;
}

.SignupMailPage-container-caution {
  margin-top: 40px;
  list-style: none;
}

.SignupMailPage-container-caution li {
  text-indent: -0.42em;
  padding-left: 0.42em;
}

.SignupMailPage-container-caution li .Paragraph:before {
  content: "\30FB";
  display: inline-block;
}

.FormLabel {
  display: flex;
  align-items: center;
  margin-left: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 480px) {
  .FormLabel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.FormLabel label {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.FormLabel label.is-must:after {
  display: inline-block;
  content: "\5FC5\9808";
  margin-left: 16px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  background: #ff9900;
  border-radius: 8px;
}

.FormLabel .Paragraph {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .FormLabel .Paragraph {
    margin-left: 0;
  }
}

.FormInput {
  width: 100%;
}

.FormInput-text {
  width: auto;
}

.FormLabel {
  display: flex;
  align-items: center;
  margin-left: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 480px) {
  .FormLabel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.FormLabel label {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.FormLabel label.is-must:after {
  display: inline-block;
  content: "\5FC5\9808";
  margin-left: 16px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  background: #ff9900;
  border-radius: 8px;
}

.FormLabel .Paragraph {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .FormLabel .Paragraph {
    margin-left: 0;
  }
}

.FormInput {
  width: 100%;
}

.FormInput-text {
  width: auto;
}

.FormTextArea {
  width: 100%;
}

.FormTextArea-textarea {
  height: 100px;
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormRadio-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormRadio-input {
  margin: 0 8px 0 0;
}

.FormRadio-children {
  color: #fff;
}

.FormCheckBox-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormCheckBox-input {
  margin: 0 8px 0 0;
}

.FormCheckBox-children {
  color: #fff;
}

.FormDate {
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormBase-buttons {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
  align-items: center;
  justify-content: center;
}

.FormBase-buttons > * + * {
  margin-top: 0;
  margin-left: 40px;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons {
    flex-direction: column;
  }

  .FormBase-buttons > * + * {
    margin-top: 40px;
    margin-left: 0;
  }
}

.FormBase-buttons button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.FormBase-buttons button:hover {
  transform: scale(1.2);
}

.FormBase-buttons button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons button {
    padding: 12px 60px;
  }
}

.FormBase-error {
  margin-bottom: 16px;
  color: #ff6666;
}

.SignupProfilePage-container {
  padding-bottom: 80px;
}

.SignupProfilePage-container-description {
  text-align: center;
}

.SignupProfilePage-container-block {
  padding-bottom: 24px;
}

.SignupProfilePage-container-block-row {
  display: flex;
  align-items: center;
}

.SignupProfilePage-container-block-row > * + * {
  margin-left: 16px;
}

.SignupProfilePage-container-block.is-check {
  position: relative;
}

.SignupProfilePage-container-block.is-check:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.SignupProfilePage-container-block-center {
  display: flex;
  justify-content: center;
}

.SignupProfilePage-container-block-centerBox {
  display: inline-block;
}

.SignupProfilePage-container-block + .SignupProfilePage-container-block {
  padding-top: 24px;
}

.SignupProfilePage-container > * + * {
  margin-top: 40px;
}

.SignupProfilePage .SignupProfilePage-postalBefore {
  width: auto;
}

@media screen and (max-width: 480px) {
  .SignupProfilePage .SignupProfilePage-postalBefore {
    width: 72px;
  }
}

.SignupProfilePage .SignupProfilePage-postalAfter {
  width: auto;
}

@media screen and (max-width: 480px) {
  .SignupProfilePage .SignupProfilePage-postalAfter {
    width: 88px;
  }
}

.SignupProfilePage .SignupProfilePage-postalButton {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
  padding: 4px 24px;
  border: none;
  border-radius: 4px;
  background: #33cccc;
  transition: none;
  color: #fff;
}

.SignupProfilePage .SignupProfilePage-postalButton:hover {
  transform: scale(1.2);
}

.SignupProfilePage .SignupProfilePage-postalButton:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .SignupProfilePage .SignupProfilePage-postalButton {
    padding: 12px 60px;
  }
}

.SignupProfilePage .SignupProfilePage-postalButton:hover {
  transform: none;
  background: #1f879a;
}

.SignupProfilePage .SignupProfilePage-postalButton:disabled {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .SignupProfilePage .SignupProfilePage-postalButton {
    padding: 6px 24px;
  }
}

.SignupProfilePage .SignupProfilePage-term {
  justify-content: center;
}

.SignupProfilePage .SignupProfilePage-term > .Paragraph {
  font-size: 18px;
}

.SignupProfilePage .SignupProfilePage-link {
  font-size: 18px;
}

.StoryList-box {
  position: relative;
  padding-bottom: 16px;
}

.StoryList-box h2 {
  font-size: 16px;
  font-weight: 600;
}

.StoryList-box h2 a {
  color: #fff;
}

.StoryList-box h4 {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.StoryList-box > * {
  margin-bottom: 16px;
}

.StoryList-box:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 16px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.Character {
  position: relative;
  border-left: 4px solid #33cccc;
  border-right: 4px solid #04889e;
  padding: 12px 8px;
  width: 284px;
  height: 104px;
  background: #fff;
}

.Character:before,
.Character:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.Character:before {
  top: 0;
}

.Character:after {
  bottom: 0;
}

@media screen and (max-width: 480px) {
  .Character {
    width: 335px;
  }
}

.Character-box {
  display: flex;
}

.Character-box-img {
  width: 80px;
  height: 80px;
  border: 1px solid #33cccc;
}

.Character-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-evenly;
  margin-left: 8px;
}

.Character-profile:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(to right, #33cccc, #04889e);
}

.CharacterList-groups {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 40px 0;
}

.CharacterList-groups > * + * {
  margin-top: 0;
  margin-left: 46px;
}

@media screen and (max-width: 480px) {
  .CharacterList-groups {
    flex-direction: column;
  }

  .CharacterList-groups > * + * {
    margin-top: 40px;
    margin-left: 0;
  }
}

.CharacterList-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.CharacterList-group > * + * {
  margin-top: 20px;
}

.CharacterList-about-group {
  display: flex;
  flex-direction: row;
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

.CharacterList-about-group > * + * {
  margin-top: 0;
  margin-left: 32px;
}

@media screen and (max-width: 480px) {
  .CharacterList-about-group {
    flex-direction: column;
  }

  .CharacterList-about-group > * + * {
    margin-top: 32px;
    margin-left: 0;
  }
}

.CharacterList-about-text-indent {
  padding-left: 1em;
  text-indent: -1em;
}

.StoryPage-container {
  padding-bottom: 40px;
}

.StoryPage-appear {
  text-align: center;
}

.StoryPage-appear .Paragraph:not(:first-child) {
  margin-top: 1.5em;
}

@media screen and (max-width: 480px) {
  .StoryPage-appear .Paragraph {
    text-align: left;
  }

  .StoryPage-appear .Paragraph br {
    display: none;
  }

  .StoryPage-appear .Paragraph br.sp {
    display: block;
  }
}

.StoryPage-appear-image {
  width: 585px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 480px) {
  .StoryPage-appear-image {
    max-width: 100%;
  }
}

.StoryPage-appear > * + * {
  margin-top: 20px;
}

.StoryPage-storyList {
  margin-top: 80px;
}

.StoryPage-characters {
  background: radial-gradient(#999 1%, transparent 6%), linear-gradient(to bottom, #4ca1af, #2c3e50);
  background-size: 32px 32px, 100%;
  padding-bottom: 40px;
}

.StoryPagerRow {
  display: flex;
  justify-content: space-between;
}

.StoryPagerRow-before,
.StoryPagerRow-after {
  display: flex;
  align-items: center;
  color: #a4a4a4;
}

.StoryPagerRow-before:before,
.StoryPagerRow-after:after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 40px;
  margin-right: 16px;
}

.StoryPagerRow-before:before {
  background: url("/images/upload/StoryNovelPage-arrowLeft.png");
}

.StoryPagerRow-after:after {
  background: url("/images/upload/StoryNovelPage-arrowRight.png");
}

.StoryNovelPage-container {
  position: relative;
  background-color: #fff;
  padding-top: 40px;
  padding-bottom: 80px;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container {
    padding-bottom: 40px;
  }
}

.StoryNovelPage-container-title {
  position: relative;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-selector {
  position: absolute;
  top: 0;
  right: 40px;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-selector input[type=checkbox] {
  display: none;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-selector label {
  padding: 8px;
  border-radius: 4px;
  background: #33cccc;
  cursor: pointer;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-selector label span {
  color: #fff;
  font-weight: 600;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-selector label span:nth-child(1) {
  font-size: 16px;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-selector label span:nth-child(2) {
  font-size: 12px;
}

.StoryNovelPage-container-title .Heading {
  color: #333;
}

.StoryNovelPage-container-title .Paragraph {
  margin-top: 8px;
  color: #666;
}

.StoryNovelPage-container-title .Paragraph.is-dark {
  color: #fff;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-top {
  line-height: 1.25;
  color: #666;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-top.is-dark {
  color: #fff;
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-bannerContainer {
  margin-top: 8px;
  background: #ccffff;
  text-align: center;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container-title .StoryNovelPage-container-title-bannerContainer {
    padding: 10px;
  }
}

.StoryNovelPage-container-title .StoryNovelPage-container-title-banner {
  font-size: 30px;
  line-height: 2.5;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container-title .StoryNovelPage-container-title-banner {
    font-size: 120%;
    line-height: 1.2;
  }
}

.StoryNovelPage-container-pager {
  padding-top: 36px;
  padding-bottom: 36px;
}

.StoryNovelPage-container-body .Heading,
.StoryNovelPage-container-body .Paragraph {
  color: #333;
}

.StoryNovelPage-container-body .StoryNovelPage-container-body-titleContainer {
  padding: 8px 16px;
  background: #f7f9f9;
}

.StoryNovelPage-container-body .StoryNovelPage-container-body-title:before {
  content: "\25B6";
}

.StoryNovelPage-container-body .StoryNovelPage-container-body-sns {
  position: relative;
  justify-content: flex-end;
  padding-bottom: 16px;
}

.StoryNovelPage-container-body .StoryNovelPage-container-body-sns:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: #333;
}

.StoryNovelPage-container-body .StoryNovelPage-container-body-accounts {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 32px;
}

.StoryNovelPage-container-body .StoryNovelPage-container-body-accounts > * + * {
  margin-top: 0;
  margin-left: 60px;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container-body .StoryNovelPage-container-body-accounts {
    flex-direction: column;
  }

  .StoryNovelPage-container-body .StoryNovelPage-container-body-accounts > * + * {
    margin-top: 16px;
    margin-left: 0;
  }
}

.StoryNovelPage-container-body .Paragraph {
  margin-top: 32px;
  margin-bottom: 32px;
}

.StoryNovelPage-container-body .Paragraph.is-mincho {
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
}

.StoryNovelPage-container-body .Paragraph.is-dark {
  color: #fff;
}

.StoryNovelPage-container-comment {
  margin-bottom: 32px;
}

.StoryNovelPage-container-comment > * {
  margin-top: 28px;
}

.StoryNovelPage-container-comment-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px;
  background: #ccffff;
}

.StoryNovelPage-container-comment-input > * + * {
  margin-top: 0;
  margin-left: 24px;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container-comment-input {
    flex-direction: column;
  }

  .StoryNovelPage-container-comment-input > * + * {
    margin-top: 24px;
    margin-left: 0;
  }
}

.StoryNovelPage-container-comment-input > .InputText {
  flex-grow: 1;
  border: none;
  border-radius: 0;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container-comment-input > .InputText {
    width: 100%;
  }
}

.StoryNovelPage-container-comment-input > .InputText:focus {
  outline: none;
}

.StoryNovelPage-container-comment-input > button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
  padding: 4px 24px;
  border: none;
  border-radius: 4px;
  background: #33cccc;
  transition: none;
  color: #fff;
}

.StoryNovelPage-container-comment-input > button:hover {
  transform: scale(1.2);
}

.StoryNovelPage-container-comment-input > button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container-comment-input > button {
    padding: 12px 60px;
  }
}

.StoryNovelPage-container-comment-input > button:hover {
  transform: none;
  background: #1f879a;
}

.StoryNovelPage-container-comment-input > button:disabled {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-container-comment-input > button {
    padding: 6px 24px;
  }
}

.StoryNovelPage-container-comment-display {
  max-height: 180px;
  padding: 4px 16px;
  background: #ccffff;
  overflow-y: scroll;
}

.StoryNovelPage-container-comment-display .Paragraph {
  color: #999;
}

.StoryNovelPage-container-comment-display > * {
  padding: 12px 0;
}

.StoryNovelPage-container-comment-display > * + * {
  border-top: 1px dotted #999;
}

.StoryNovelPage .StoryNovelPage-container > .StoryNovelPage-palette {
  width: 100%;
}

.StoryNovelPage-palette {
  position: absolute;
  top: 0;
  background-color: #ccffff;
  padding-top: 40px;
  padding-bottom: 40px;
  box-shadow: 0 4px 12px #333;
}

.StoryNovelPage-palette-base {
  position: relative;
}

.StoryNovelPage-palette-base-close {
  position: absolute;
  top: -16px;
  right: 40px;
}

.StoryNovelPage-palette-base-close button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 38px;
  height: 38px;
  background-image: url("/images/upload/Header_closeIcon.svg");
  background-size: contain;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-palette-base-close {
    right: 8px;
  }
}

.StoryNovelPage-palette-base-editor {
  width: 320px;
  margin: 0 auto;
}

.StoryNovelPage-palette-base-editor .Heading {
  margin-bottom: 16px;
  color: #333;
}

.StoryNovelPage-palette-base-editor-block-row {
  display: flex;
  justify-content: space-between;
}

.StoryNovelPage-palette-base-editor-block-row button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
  padding: 4px 24px;
  border: none;
  border-radius: 4px;
  background: #33cccc;
  transition: none;
  color: #fff;
  min-width: 132px;
}

.StoryNovelPage-palette-base-editor-block-row button:hover {
  transform: scale(1.2);
}

.StoryNovelPage-palette-base-editor-block-row button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-palette-base-editor-block-row button {
    padding: 12px 60px;
  }
}

.StoryNovelPage-palette-base-editor-block-row button:hover {
  transform: none;
  background: #1f879a;
}

.StoryNovelPage-palette-base-editor-block-row button:disabled {
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-palette-base-editor-block-row button {
    padding: 6px 24px;
  }
}

.StoryNovelPage-palette-base-editor-block-row button svg {
  margin: 0 4px;
  vertical-align: text-top;
}

.StoryNovelPage-palette-base-editor-block-row button span {
  color: #fff;
  letter-spacing: -1px;
}

@media screen and (max-width: 480px) {
  .StoryNovelPage-palette-base-editor-block-row button {
    min-width: 124px;
  }
}

.StoryNovelPage-palette-base-editor-block-row button:disabled span {
  color: #999;
}

.StoryNovelPage-palette-base-editor-block-row-config {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.StoryNovelPage-palette-base-editor-block-row-config > .Paragraph:first-child {
  line-height: 1.5;
  color: #333;
  font-size: 12px;
}

.StoryNovelPage-palette-base-editor-block-row-config > .Paragraph:last-child {
  line-height: 1.5;
  color: #333;
  font-size: 16px;
}

.StoryNovelPage-palette-base-editor-block-row + .StoryNovelPage-palette-base-editor-block-row {
  margin-top: 32px;
}

.StoryNovelPage-palette-base-editor-block-colorGroup {
  display: flex;
}

.StoryNovelPage-palette-base-editor-block-colorGroup-color label {
  display: inline-block;
  width: 56px;
  height: 56px;
  cursor: pointer;
}

.StoryNovelPage-palette-base-editor-block-colorGroup-color input[type=radio] {
  display: none;
}

.StoryNovelPage-palette-base-editor-block-colorGroup-color input[type=radio]:checked + label {
  position: relative;
  border-left: 4px solid #33cccc;
  border-right: 4px solid #04889e;
}

.StoryNovelPage-palette-base-editor-block-colorGroup-color input[type=radio]:checked + label:before,
.StoryNovelPage-palette-base-editor-block-colorGroup-color input[type=radio]:checked + label:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.StoryNovelPage-palette-base-editor-block-colorGroup-color input[type=radio]:checked + label:before {
  top: 0;
}

.StoryNovelPage-palette-base-editor-block-colorGroup-color input[type=radio]:checked + label:after {
  bottom: 0;
}

.StoryNovelPage-palette-base-editor-block-colorGroup-color + .StoryNovelPage-palette-base-editor-block-colorGroup-color {
  margin-left: 32px;
}

.StoryNovelPage-palette-base-editor-block-fontGroup {
  display: flex;
}

.StoryNovelPage-palette-base-editor-block-fontGroup-font {
  display: flex;
  align-items: center;
}

.StoryNovelPage-palette-base-editor-block-fontGroup-font + .StoryNovelPage-palette-base-editor-block-fontGroup-font {
  margin-left: 32px;
}

.StoryNovelPage-palette-base-editor-block + .StoryNovelPage-palette-base-editor-block {
  margin-top: 32px;
}

.FormLabel {
  display: flex;
  align-items: center;
  margin-left: 2px;
  margin-bottom: 8px;
}

@media screen and (max-width: 480px) {
  .FormLabel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.FormLabel label {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.FormLabel label.is-must:after {
  display: inline-block;
  content: "\5FC5\9808";
  margin-left: 16px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  background: #ff9900;
  border-radius: 8px;
}

.FormLabel .Paragraph {
  margin-left: 16px;
}

@media screen and (max-width: 480px) {
  .FormLabel .Paragraph {
    margin-left: 0;
  }
}

.FormInput {
  width: 100%;
}

.FormInput-text {
  width: auto;
}

.FormTextArea {
  width: 100%;
}

.FormTextArea-textarea {
  height: 100px;
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormRadio-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormRadio-input {
  margin: 0 8px 0 0;
}

.FormRadio-children {
  color: #fff;
}

.FormCheckBox-label {
  display: flex;
  align-items: center;
  color: #fff;
}

.FormCheckBox-input {
  margin: 0 8px 0 0;
}

.FormCheckBox-children {
  color: #fff;
}

.FormDate {
  padding: 8px;
  color: #333;
  font-size: 14px;
  border: 2px solid #33cccc;
  border-radius: 4px;
}

.FormBase-buttons {
  display: flex;
  flex-direction: row;
  padding-top: 40px;
  align-items: center;
  justify-content: center;
}

.FormBase-buttons > * + * {
  margin-top: 0;
  margin-left: 40px;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons {
    flex-direction: column;
  }

  .FormBase-buttons > * + * {
    margin-top: 40px;
    margin-left: 0;
  }
}

.FormBase-buttons button {
  display: inline-block;
  padding: 12px 100px;
  border: 2px solid #33cccc;
  border-radius: 2em;
  background: transparent;
  transition: 0.2s all ease-in-out;
  font-size: 16px;
  font-weight: 600;
  color: #33cccc;
  cursor: pointer;
}

.FormBase-buttons button:hover {
  transform: scale(1.2);
}

.FormBase-buttons button:disabled {
  border: 2px solid #999;
  background: #c2c2c2;
  color: #999;
  pointer-events: none;
  transition: none;
}

@media screen and (max-width: 480px) {
  .FormBase-buttons button {
    padding: 12px 60px;
  }
}

.FormBase-error {
  margin-bottom: 16px;
  color: #ff6666;
}

.SupportPage-container {
  padding-bottom: 80px;
}

.SupportPage-container-description {
  text-align: center;
}

.SupportPage-container-block {
  padding-bottom: 24px;
}

.SupportPage-container-block.is-check {
  position: relative;
}

.SupportPage-container-block.is-check:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.SupportPage-container-block + .SupportPage-container-block {
  padding-top: 24px;
}

.SupportPage-container-caution {
  padding-top: 24px;
  text-align: left;
}

.SupportPage-container > * + * {
  margin-top: 40px;
}

.SupportDonePage-container {
  padding-bottom: 80px;
}

.SupportDonePage-container-description {
  text-align: center;
}

.SupportDonePage-container-description .Heading {
  margin-bottom: 32px;
}

.SupportDonePage-container-description .Paragraph {
  text-align: center;
}

.CarouselSlider {
  width: 100%;
  position: relative;
  margin-top: 80px;
}

@media screen and (max-width: 480px) {
  .CarouselSlider {
    margin-top: 60px;
  }
}

.CarouselSlider-body {
  height: 600px;
}

@media screen and (max-width: 480px) {
  .CarouselSlider-body {
    height: 268px;
  }
}

.CarouselSlider-block {
  position: relative;
  width: 920px;
  height: 532px;
}

.CarouselSlider-block img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 860px;
}

@media screen and (max-width: 480px) {
  .CarouselSlider-block img {
    width: 340px;
  }
}

@media screen and (max-width: 480px) {
  .CarouselSlider-block {
    width: 360px;
    height: 240px;
  }
}

.CarouselSlider .slick-dots {
  bottom: 24px;
}

.CarouselSlider .slick-dots li {
  margin: 0;
}

.CarouselSlider .slick-dots li button {
  position: relative;
}

.CarouselSlider .slick-dots li button:before {
  content: "\25CF";
  font-size: 8px;
  color: #fff;
  text-indent: 0;
  opacity: 1;
}

.CarouselSlider .slick-dots li.slick-active button:before {
  content: "\25CF";
  color: #33cccc;
}

.CarouselSlider-prevButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: -48px 0 0 -460px;
  z-index: 1;
}

.CarouselSlider-prevButton button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 480px) {
  .CarouselSlider-prevButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -16px 0 0 -164px;
  }
}

.CarouselSlider-nextButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: -48px 0 0 460px;
  z-index: 1;
}

.CarouselSlider-nextButton button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 480px) {
  .CarouselSlider-nextButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -16px 0 0 160px;
  }
}

#CarouselSlider > svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 217px;
  pointer-events: none;
}

#CarouselSlider > svg:nth-child(2) {
  bottom: 68px;
  margin: 0 0 -32px -360px;
}

@media screen and (max-width: 480px) {
  #CarouselSlider > svg:nth-child(2) {
    transform: scale(0.5);
    bottom: 30px;
    margin: 0 0 -28px -239px;
  }
}

#CarouselSlider > svg:nth-child(3) {
  top: 0;
  margin: -24px 0 0 360px;
}

@media screen and (max-width: 480px) {
  #CarouselSlider > svg:nth-child(3) {
    transform: scale(0.5);
    margin: -28px 0 0 24px;
  }
}

#CarouselSlider > * {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.HeadLine {
  text-align: center;
}

.HeadLine-container {
  display: inline-block;
  margin-top: 80px;
  margin-bottom: 80px;
  text-align: center;
}

.HeadLine h1 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .HeadLine h1 {
    font-size: 30px;
  }
}

.HeadLine h2 {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.HeadLine-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.NewsList-box {
  position: relative;
  padding-bottom: 16px;
}

.NewsList-box .Paragraph {
  font-size: 12px;
}

.NewsList-box > * {
  margin-bottom: 8px;
}

.NewsList-box:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 16px;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.News {
  padding-bottom: 20px;
}

.NewsLink-box {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
}

.NewsLink a {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.NewsLink a img {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}

@media screen and (max-width: 480px) {
  .NewsLink a {
    font-size: 18px;
  }

  .NewsLink a img {
    width: 18px;
    height: 18px;
  }
}

.About {
  position: relative;
  padding-bottom: 80px;
}

.About-block {
  text-align: center;
}

.About-block .Heading {
  font-size: 18px;
  letter-spacing: 7px;
}

@media screen and (max-width: 480px) {
  .About-block .Heading {
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 480px) {
  .About-block .Paragraph {
    text-align: left;
  }

  .About-block .Paragraph br {
    display: none;
  }
}

.About-block-spImage {
  display: none;
  width: 200px;
  margin: 0 auto 24px;
}

@media screen and (max-width: 480px) {
  .About-block-spImage {
    display: block;
  }
}

.About-block-spButton {
  display: none;
  margin-top: 24px;
}

@media screen and (max-width: 480px) {
  .About-block-spButton {
    display: block;
  }
}

.About-block + .About-block {
  margin-top: 32px;
}

.About-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.About-icons > * {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.About-icons > *:nth-child(1) {
  top: 4%;
  margin: 0 0 0 256px;
}

.About-icons > *:nth-child(2) {
  top: 34%;
  margin: 0 0 0 -380px;
}

.About-icons > *:nth-child(3) {
  top: 60%;
  margin: 0 0 0 380px;
}

@media screen and (max-width: 480px) {
  .About-icons {
    display: none;
  }
}

.About-container {
  position: relative;
}

.Story {
  position: relative;
  padding-bottom: 80px;
  overflow-y: hidden;
}

.Story-block {
  text-align: center;
}

.Story-block .Paragraph:not(:first-child) {
  margin-top: 1.5em;
}

@media screen and (max-width: 480px) {
  .Story-block .Paragraph {
    text-align: left;
  }

  .Story-block .Paragraph br {
    display: none;
  }

  .Story-block .Paragraph br.sp {
    display: block;
  }
}

.Story-block + .Story-block {
  margin-top: 32px;
}

.Story-design {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.Story-design > * {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.Story-design > *:nth-child(1) {
  top: 0;
  margin: 0 0 0 -420px;
}

@media screen and (max-width: 480px) {
  .Story-design > *:nth-child(1) {
    margin: 700px 0 0 -124px;
  }
}

.Story-design > *:nth-child(2) {
  top: 10%;
  margin: 0 0 0 320px;
}

@media screen and (max-width: 480px) {
  .Story-design > *:nth-child(2) {
    margin: 68px 0 0 32px;
  }
}

.Story-design > .Story-mark:nth-child(3) {
  top: 4%;
  margin: 0 0 0 -276px;
}

@media screen and (max-width: 480px) {
  .Story-design > .Story-mark:nth-child(3) {
    margin: 0 0 0 -100px;
  }
}

.Story-design > .Story-mark:nth-child(4) {
  top: 56%;
  margin: 0 0 0 320px;
}

@media screen and (max-width: 480px) {
  .Story-design > .Story-mark:nth-child(4) {
    margin: 60px 0 0 100px;
  }
}

.Story-mark {
  width: 240px;
  height: 200px;
  background-image: radial-gradient(#33cccc 1%, transparent 6%);
  background-size: 32px 32px;
}

@media screen and (max-width: 480px) {
  .Story-mark {
    width: 160px;
    height: 120px;
  }
}

.Channel {
  padding-bottom: 80px;
}

.Channel-block {
  display: flex;
  justify-content: space-around;
}

.Channel-block iframe {
  width: 292px;
  height: 184px;
}

.Channel-block + .Channel-block {
  margin-top: 32px;
}

@media screen and (max-width: 480px) {
  .Channel-block {
    flex-direction: column;
    align-items: center;
  }

  .Channel-block > * + * {
    margin-top: 40px;
  }
}

.WeeklyChallengeLink-box {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
}

.WeeklyChallengeLink a {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.WeeklyChallengeLink a img {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeLink a {
    font-size: 18px;
  }

  .WeeklyChallengeLink a img {
    width: 18px;
    height: 18px;
  }
}

.SNS-caption {
  text-align: center;
  margin-bottom: 60px;
}

.SNS-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.SNS-block > * + * {
  margin-top: 0;
  margin-left: 0;
}

@media screen and (max-width: 480px) {
  .SNS-block {
    flex-direction: column;
  }

  .SNS-block > * + * {
    margin-top: 80px;
    margin-left: 0;
  }
}

.SNS-block > * {
  width: 292px;
}

.SNS-part {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.SNS-part-XLogo {
  width: 128px;
  margin-bottom: 20px;
}

.SNS-part-caption {
  position: relative;
}

.SNS-part-caption:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.SNS-line {
  width: 128px;
  margin-bottom: 20px;
}

.SNS-lineLogo {
  color: #1dcd00;
}

.SNS-qr {
  width: 144px;
  margin: 20px 0;
}

.SNS-link {
  text-decoration: none;
  border-bottom: 1px dotted #fff;
  line-height: 2;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.SNS-friendLink.pc {
  display: block;
}

@media screen and (max-width: 480px) {
  .SNS-friendLink.pc {
    display: none;
  }
}

.SNS-friendLink.sp {
  display: none;
}

@media screen and (max-width: 480px) {
  .SNS-friendLink.sp {
    display: block;
  }
}

.SNS-friend {
  width: 100px;
}

.TopPage {
  padding-bottom: 80px;
}

.TopPage-container {
  width: 100%;
}

.TopPage-container-wide {
  background: radial-gradient(#999 1%, transparent 6%), linear-gradient(to bottom, #4ca1af, #2c3e50);
  background-size: 32px 32px, 100%;
}

.TopPage-container-wideDeco {
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0.07) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.07) 75%, transparent 75%, transparent) 0 0/8px 8px, linear-gradient(to right, #2c3e50, #67d7ea);
}

.TopPage-container-spacer {
  padding-bottom: 40px;
}

.TopPage-container > * {
  width: 944px;
  margin: 0 auto;
}

@media screen and (max-width: 480px) {
  .TopPage-container > * {
    width: 335px;
  }
}

.TopPage-container > * + * {
  margin-top: 40px;
}

.TermPage-container {
  margin-bottom: 80px;
}

.TermPage-container-area {
  padding: 24px 40px;
  background: #fff;
}

.TermPage-block {
  padding: 16px 0;
}

.TermPage-block .Paragraph {
  color: #333;
}

.TermPage-block .Paragraph div {
  padding-left: 1em;
}

.TermPage-block .Paragraph a {
  text-decoration: underline;
  color: #33cccc;
}

.PrivacyPage-container {
  margin-bottom: 80px;
}

.PrivacyPage-container-area {
  padding: 24px 40px;
  background: #fff;
}

.PrivacyPage-block {
  padding: 16px 0;
}

.PrivacyPage-block .Paragraph {
  color: #333;
}

.PrivacyPage-block .Paragraph div {
  padding-left: 1em;
}

.LegalPage-container {
  margin-bottom: 80px;
}

.LegalPage-container-area {
  padding: 24px 40px;
  background: #fff;
}

.LegalPage-block {
  padding: 16px 0;
}

.LegalPage-block-table th {
  width: 144px;
  line-height: 1.8;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.LegalPage-block-table td {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 300;
}

.LegalPage-block-table td .Paragraph {
  color: #333;
}

.LegalPage-block-table td > * {
  display: flex;
  align-items: center;
}

.LegalPage-block-table th,
.LegalPage-block-table td {
  padding: 8px 16px 8px 0;
}

@media screen and (max-width: 480px) {
  .LegalPage-block-table th,
  .LegalPage-block-table td {
    display: block;
  }
}

.LegalPage-block + .LegalPage-block {
  border-top: 1px solid #999;
}

.WeeklyChallengeCard {
  display: block;
  width: 224px;
  text-align: left;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard {
    width: 100%;
  }
}

.WeeklyChallengeCard > .Paragraph {
  margin-bottom: 0.5em;
}

.WeeklyChallengeCard-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area {
    flex-direction: row;
  }
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-img {
    flex: 1;
  }
}

.WeeklyChallengeCard-area-meta {
  width: 100%;
  margin: 8px 0 0 0;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta {
    width: 148px;
    margin: 0 0 0 16px;
  }
}

.WeeklyChallengeCard-area-meta-row {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta-row {
    justify-content: space-between;
  }
}

.WeeklyChallengeCard-area-meta-row > .Paragraph {
  font-size: 14px;
  line-height: 31px;
  margin-right: 8px;
}

.WeeklyChallengeBoard-appear {
  text-align: center;
}

.WeeklyChallengeBoard-appear-image {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeBoard-appear-image {
    max-width: 100%;
  }
}

.WeeklyChallengeBoard-appear .Heading {
  margin-bottom: 1em;
}

.WeeklyChallengeBoard-appear > * + * {
  margin-top: 20px;
}

.WeeklyChallengeBoard-quizArea {
  padding: 16px 0;
}

.WeeklyChallengeBoard-quizArea > .Paragraph {
  margin-bottom: 1em;
}

.WeeklyChallengeBoard-quizArea-quiz {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeBoard-quizArea-quiz {
    flex-direction: column;
  }
}

.WeeklyChallengeBoard-quizArea-quiz-img {
  flex: 1;
}

.WeeklyChallengeBoard-quizArea-quiz-images {
  flex: 1;
}

.WeeklyChallengeBoard-quizArea-quiz-meta {
  position: relative;
  border-left: 4px solid #33cccc;
  border-right: 4px solid #04889e;
  width: 300px;
  margin: 0 0 0 24px;
  padding: 8px 32px;
  background: linear-gradient(to right, rgba(51, 204, 204, 0.2), rgba(4, 136, 158, 0.2));
}

.WeeklyChallengeBoard-quizArea-quiz-meta:before,
.WeeklyChallengeBoard-quizArea-quiz-meta:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.WeeklyChallengeBoard-quizArea-quiz-meta:before {
  top: 0;
}

.WeeklyChallengeBoard-quizArea-quiz-meta:after {
  bottom: 0;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeBoard-quizArea-quiz-meta {
    width: 100%;
    margin: 24px 0 0 0;
  }
}

.WeeklyChallengeBoard-quizArea-quiz-meta-row {
  position: relative;
  display: flex;
  padding: 1em 0;
  justify-content: space-around;
}

.WeeklyChallengeBoard-quizArea-quiz-meta-row > .Paragraph {
  font-size: 16px;
}

.WeeklyChallengeBoard-quizArea-quiz-meta-row:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.WeeklyChallengeBoard-quizArea-quiz-meta-sub {
  position: relative;
  padding: 1em 0;
  text-align: right;
}

.WeeklyChallengeBoard-quizArea-quiz-meta-sub > .Paragraph {
  color: #99cccc;
  font-size: 14px;
}

.WeeklyChallengeCard {
  display: block;
  width: 224px;
  text-align: left;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard {
    width: 100%;
  }
}

.WeeklyChallengeCard > .Paragraph {
  margin-bottom: 0.5em;
}

.WeeklyChallengeCard-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area {
    flex-direction: row;
  }
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-img {
    flex: 1;
  }
}

.WeeklyChallengeCard-area-meta {
  width: 100%;
  margin: 8px 0 0 0;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta {
    width: 148px;
    margin: 0 0 0 16px;
  }
}

.WeeklyChallengeCard-area-meta-row {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta-row {
    justify-content: space-between;
  }
}

.WeeklyChallengeCard-area-meta-row > .Paragraph {
  font-size: 14px;
  line-height: 31px;
  margin-right: 8px;
}

.WeeklyChallengePastQuizzes-questions {
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0.07) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.07) 75%, transparent 75%, transparent) 0 0/8px 8px, linear-gradient(to right, #005a6b, #005a6b);
  padding: 40px 0;
}

.WeeklyChallengePastQuizzes-questions-title {
  text-align: center;
  margin-bottom: 24px;
}

.WeeklyChallengePastQuizzes-questions-select {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.WeeklyChallengePastQuizzes-questions-select p {
  color: #ccffff;
  font-weight: 600;
  margin-right: 10px;
  line-height: 20px;
}

.WeeklyChallengePastQuizzes-questions-select label {
  color: #fff;
  margin-right: 8px;
  font-size: 14px;
}

.WeeklyChallengePastQuizzes-questions-select select {
  border: 2px solid #33cccc;
  border-radius: 4px;
  padding: 2px;
  width: 120px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select select {
    width: auto;
  }
}

.WeeklyChallengePastQuizzes-questions-select-filter {
  display: flex;
}

.WeeklyChallengePastQuizzes-questions-select-filter-clear-flag {
  margin-right: 10px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select-filter-clear-flag {
    margin-bottom: 10px;
  }
}

.WeeklyChallengePastQuizzes-questions-select-sort {
  display: flex;
}

.WeeklyChallengePastQuizzes-questions-select-sort-title {
  margin-left: 30px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select-sort-title {
    margin-left: 0;
  }
}

.WeeklyChallengePastQuizzes-questions-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-body > *:not(:last-child) {
    position: relative;
  }

  .WeeklyChallengePastQuizzes-questions-body > *:not(:last-child):after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    background: linear-gradient(to right, #2c3e50, #67d7ea);
  }
}

.WeeklyChallengePage-container {
  padding: 40px 0;
}

.WeeklyChallengeCard {
  display: block;
  width: 224px;
  text-align: left;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard {
    width: 100%;
  }
}

.WeeklyChallengeCard > .Paragraph {
  margin-bottom: 0.5em;
}

.WeeklyChallengeCard-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area {
    flex-direction: row;
  }
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-img {
    flex: 1;
  }
}

.WeeklyChallengeCard-area-meta {
  width: 100%;
  margin: 8px 0 0 0;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta {
    width: 148px;
    margin: 0 0 0 16px;
  }
}

.WeeklyChallengeCard-area-meta-row {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta-row {
    justify-content: space-between;
  }
}

.WeeklyChallengeCard-area-meta-row > .Paragraph {
  font-size: 14px;
  line-height: 31px;
  margin-right: 8px;
}

.WeeklyChallengeBoard-appear {
  text-align: center;
}

.WeeklyChallengeBoard-appear-image {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeBoard-appear-image {
    max-width: 100%;
  }
}

.WeeklyChallengeBoard-appear .Heading {
  margin-bottom: 1em;
}

.WeeklyChallengeBoard-appear > * + * {
  margin-top: 20px;
}

.WeeklyChallengeBoard-quizArea {
  padding: 16px 0;
}

.WeeklyChallengeBoard-quizArea > .Paragraph {
  margin-bottom: 1em;
}

.WeeklyChallengeBoard-quizArea-quiz {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeBoard-quizArea-quiz {
    flex-direction: column;
  }
}

.WeeklyChallengeBoard-quizArea-quiz-img {
  flex: 1;
}

.WeeklyChallengeBoard-quizArea-quiz-images {
  flex: 1;
}

.WeeklyChallengeBoard-quizArea-quiz-meta {
  position: relative;
  border-left: 4px solid #33cccc;
  border-right: 4px solid #04889e;
  width: 300px;
  margin: 0 0 0 24px;
  padding: 8px 32px;
  background: linear-gradient(to right, rgba(51, 204, 204, 0.2), rgba(4, 136, 158, 0.2));
}

.WeeklyChallengeBoard-quizArea-quiz-meta:before,
.WeeklyChallengeBoard-quizArea-quiz-meta:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #33cccc, #04889e);
}

.WeeklyChallengeBoard-quizArea-quiz-meta:before {
  top: 0;
}

.WeeklyChallengeBoard-quizArea-quiz-meta:after {
  bottom: 0;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeBoard-quizArea-quiz-meta {
    width: 100%;
    margin: 24px 0 0 0;
  }
}

.WeeklyChallengeBoard-quizArea-quiz-meta-row {
  position: relative;
  display: flex;
  padding: 1em 0;
  justify-content: space-around;
}

.WeeklyChallengeBoard-quizArea-quiz-meta-row > .Paragraph {
  font-size: 16px;
}

.WeeklyChallengeBoard-quizArea-quiz-meta-row:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  background: linear-gradient(to right, #2c3e50, #67d7ea);
}

.WeeklyChallengeBoard-quizArea-quiz-meta-sub {
  position: relative;
  padding: 1em 0;
  text-align: right;
}

.WeeklyChallengeBoard-quizArea-quiz-meta-sub > .Paragraph {
  color: #99cccc;
  font-size: 14px;
}

.WeeklyChallengeCard {
  display: block;
  width: 224px;
  text-align: left;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard {
    width: 100%;
  }
}

.WeeklyChallengeCard > .Paragraph {
  margin-bottom: 0.5em;
}

.WeeklyChallengeCard-area {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area {
    flex-direction: row;
  }
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-img {
    flex: 1;
  }
}

.WeeklyChallengeCard-area-meta {
  width: 100%;
  margin: 8px 0 0 0;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta {
    width: 148px;
    margin: 0 0 0 16px;
  }
}

.WeeklyChallengeCard-area-meta-row {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengeCard-area-meta-row {
    justify-content: space-between;
  }
}

.WeeklyChallengeCard-area-meta-row > .Paragraph {
  font-size: 14px;
  line-height: 31px;
  margin-right: 8px;
}

.WeeklyChallengePastQuizzes-questions {
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0.07) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.07) 75%, transparent 75%, transparent) 0 0/8px 8px, linear-gradient(to right, #005a6b, #005a6b);
  padding: 40px 0;
}

.WeeklyChallengePastQuizzes-questions-title {
  text-align: center;
  margin-bottom: 24px;
}

.WeeklyChallengePastQuizzes-questions-select {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.WeeklyChallengePastQuizzes-questions-select p {
  color: #ccffff;
  font-weight: 600;
  margin-right: 10px;
  line-height: 20px;
}

.WeeklyChallengePastQuizzes-questions-select label {
  color: #fff;
  margin-right: 8px;
  font-size: 14px;
}

.WeeklyChallengePastQuizzes-questions-select select {
  border: 2px solid #33cccc;
  border-radius: 4px;
  padding: 2px;
  width: 120px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select select {
    width: auto;
  }
}

.WeeklyChallengePastQuizzes-questions-select-filter {
  display: flex;
}

.WeeklyChallengePastQuizzes-questions-select-filter-clear-flag {
  margin-right: 10px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select-filter-clear-flag {
    margin-bottom: 10px;
  }
}

.WeeklyChallengePastQuizzes-questions-select-sort {
  display: flex;
}

.WeeklyChallengePastQuizzes-questions-select-sort-title {
  margin-left: 30px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-select-sort-title {
    margin-left: 0;
  }
}

.WeeklyChallengePastQuizzes-questions-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}

@media screen and (max-width: 480px) {
  .WeeklyChallengePastQuizzes-questions-body > *:not(:last-child) {
    position: relative;
  }

  .WeeklyChallengePastQuizzes-questions-body > *:not(:last-child):after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: 0;
    background: linear-gradient(to right, #2c3e50, #67d7ea);
  }
}

.WeeklyChallengeQuizPage-container {
  padding: 40px 0;
}

.MainContainer {
  min-width: 1024px;
  min-height: 100vh;
  position: relative;
  padding-bottom: 476px;
  box-sizing: border-box;
}

@media screen and (max-width: 480px) {
  .MainContainer {
    min-width: 375px;
    padding-bottom: 652px;
  }
}

.MainContainer-wrapper {
  width: 100%;
  height: 100%;
}

.Paragraph {
  line-height: 1.8;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
}

.Paragraph.is-caution {
  color: #999;
}

.Heading {
  line-height: 1.8;
  color: #fff;
  font-weight: 600;
}

h1.Heading {
  font-size: 48px;
}

@media screen and (max-width: 480px) {
  h1.Heading {
    font-size: 30px;
  }
}

h2.Heading {
  font-size: 18px;
}

h3.Heading {
  font-size: 16px;
}

.AnchorLink {
  line-height: 1.8;
  font-size: 14px;
  font-weight: 300;
  color: #33cccc;
  text-decoration: underline;
}

.Image {
  display: block;
  width: 100%;
  height: 100%;
}

.IntroductionPanel {
  width: 100%;
  height: 100%;
  -moz-column-count: 2;
       column-count: 2;
}

.IntroductionPanel > * {
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

@media screen and (max-width: 480px) {
  .IntroductionPanel {
    -moz-column-count: 1;
         column-count: 1;
    display: flex;
    flex-direction: column;
  }

  .IntroductionPanel > *:nth-child(1) {
    order: 1;
  }

  .IntroductionPanel > *:nth-child(2) {
    order: 3;
    margin-top: 40px;
  }

  .IntroductionPanel > *:nth-child(3) {
    order: 2;
    margin-top: 16px;
  }
}

p,
h1,
h2,
h3,
h4,
h5,
span,
th,
td,
a {
  font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
  color: #333;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #fff;
}

button {
  outline: 0;
}

html {
  background: #011a20;
}