@charset "UTF-8";
img {
  max-width: 100%;
  height: auto;
}

* {
  font-family: Noto Sans JP;
}

li {
  list-style-type: none;
}

.main-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
}

.content-wrapper {
  width: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
  flex-direction: column;
}

/* SP HEADER */
.sp-header__nav {
  transition: 0.6s;
  width: 100%;
  height: 100vh;
  padding: 3.8647342995vw;
  padding-top: 3.3333333333vw;
}
.sp-header__nav > nav .header-info {
  height: 11.5942028986vw;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8.2125603865vw;
}
.sp-header__nav > nav .header-info > .application-logo {
  width: auto;
  height: 100%;
}
.sp-header__nav > nav > ul > li {
  list-style-type: none;
  color: var(--BG_BK, #141414);
  font-size: 4.1062801932vw;
  font-style: normal;
  font-weight: 400;
  line-height: 4.1062801932vw;
  padding-top: 4.5893719807vw;
  padding-bottom: 5.0724637681vw;
  padding-left: 7.9710144928vw;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 2px solid #dadada;
}
.sp-header__nav > nav > ul > li:first-child {
  border-top: 2px solid #dadada;
}
.sp-header__nav > nav > ul > li::before {
  content: "";
  background-image: url(../images/nav_list.svg);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 2.6570048309vw;
  height: 2.6570048309vw;
  margin-right: 1.9323671498vw;
}
.sp-header__nav > nav > ul > li .sub {
  color: var(--BG_BK, #141414);
  font-size: 3.1400966184vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: absolute;
  left: 31.4009661836vw;
}
.sp-header__nav > nav > ul > li > a {
  width: 100%;
}
.sp-header__nav .button-wrapper {
  display: grid;
  grid-template-columns: min-content min-content;
  margin-left: 3.3816425121vw;
  -moz-column-gap: 1.690821256vw;
  column-gap: 1.690821256vw;
  margin-top: 7.9710144928vw;
}
.sp-header__nav .button-wrapper > a > button {
  padding-left: 5.3140096618vw;
  padding-right: 5.3140096618vw;
  padding-top: 2.1739130435vw;
  padding-bottom: 2.1739130435vw;
  border-radius: 4.8309178744vw;
  background: #c5cacd;
  display: flex;
  align-items: center;
  color: #fff;
  text-align: center;
  font-size: 3.6231884058vw;
  line-height: 3.6231884058vw;
  font-style: normal;
  font-weight: 400;
}
.sp-header__nav .download-section {
  margin-top: 28.2608695652vw;
  width: 80%;
  display: flex;
  justify-content: space-around;
  height: 10.4545454545vw;
  margin-left: auto;
  margin-right: auto;
}
.sp-header__nav .download-section > a {
  height: 100%;
}
.sp-header__nav .download-section > a > img {
  height: 100%;
  width: auto;
}

/* MV */
.main-container .content-wrapper .main-header {
  position: absolute;
  top: 20px;
  right: 40px;
}
@media (max-width: 700px) {
  .main-container .content-wrapper .main-header {
    display: none;
  }
}
.main-container .content-wrapper .main-header > nav > ul {
  display: flex;
  -moz-column-gap: 6px;
  column-gap: 6px;
}
.main-container .content-wrapper .main-header > nav > ul > li {
  padding-left: 8px;
  padding-right: 8px;
  list-style-type: none;
  color: var(--BG_BK, #141414);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  border-radius: 20px;
  opacity: 0.8;
  background: #fff;
}
.main-container .content-wrapper .main-header > nav > ul > li > a {
  display: flex;
  -moz-column-gap: 4px;
  column-gap: 4px;
  align-items: center;
}
.main-container .content-wrapper .main-header > nav > ul > li > a > img {
  width: 6px;
}
.main-container .content-wrapper .main-header > nav > ul > li:last-child {
  color: #aaa;
}
.main-container .content-wrapper .main-header > nav > ul > li:last-child > a {
  display: inline-block;
}
.main-container .content-wrapper .sub-header {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: white;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 34px;
  padding-right: 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 700px) {
  .main-container .content-wrapper .sub-header {
    display: none;
  }
}
.main-container .content-wrapper .sub-header .application-logo {
  width: 115px;
}
.main-container .content-wrapper .sub-header > nav > ul {
  display: flex;
  -moz-column-gap: 6px;
  column-gap: 6px;
}
.main-container .content-wrapper .sub-header > nav > ul > li {
  padding-left: 8px;
  padding-right: 8px;
  list-style-type: none;
  color: var(--BG_BK, #141414);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}
.main-container .content-wrapper .sub-header > nav > ul > li > a {
  display: flex;
  -moz-column-gap: 4px;
  column-gap: 4px;
  align-items: center;
}
.main-container .content-wrapper .sub-header > nav > ul > li > a > img {
  width: 6px;
}
.main-container .content-wrapper .sub-header > nav > ul > li:last-child {
  color: #aaa;
}
.main-container .content-wrapper .sub-header > nav > ul > li:last-child > a {
  display: inline-block;
}
.main-container .content-wrapper .top-bar {
  top: 3.3333333333vw;
  right: 3.8647342995vw;
  width: 11.5942028986vw;
  height: 11.5942028986vw;
  display: flex;
  position: fixed;
  z-index: 3;
  align-items: flex-start;
  flex-shrink: 1;
}
@media (min-width: 700px) {
  .main-container .content-wrapper .top-bar {
    display: none;
  }
}
.main-container .content-wrapper .top-bar .menu-icon {
  width: 11.5942028986vw;
  height: 11.5942028986vw;
}
.main-container .content-wrapper .hero-section {
  width: 100%;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  .main-container .content-wrapper .hero-section {
    background-position-y: -52px;
    background-image: url("../images/sp_heroarea.png");
    background-size: 100% 100%;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper .hero-section {
    background-size: 100% 100%;
    background-image: url("../images/heroarea.png");
  }
}
.main-container .content-wrapper .hero-section .hero-content {
  display: grid;
  width: 100%;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .main-container .content-wrapper .hero-section .hero-content {
    grid-template-rows: auto auto auto auto auto;
    row-gap: 9;
    max-width: 300px;
    padding-top: 84px;
  }
}
@media (min-width: 700px) and (max-width: 1200px) {
  .main-container .content-wrapper .hero-section .hero-content {
    grid-template-columns: auto 200px 235px;
    grid-template-rows: 30px 30px 80px 35px auto 62px auto auto;
    max-height: 777px;
    padding-top: 84px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}
@media (min-width: 1200px) {
  .main-container .content-wrapper .hero-section .hero-content {
    grid-template-columns: auto 266px auto;
    grid-template-rows: 97.78px 51.13px 95px 35px auto 62px auto auto;
    -moz-column-gap: 90px;
    column-gap: 90px;
    max-height: 777px;
    padding-top: 93px;
  }
}
.main-container .content-wrapper .hero-section .hero-content .download-section {
  display: flex;
  flex-shrink: 1;
  justify-content: space-between;
  width: 100%;
  height: 46px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .download-section {
    margin-top: 11.3381642512vw;
  }
}
@media (min-width: 700px) and (max-width: 1200px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .download-section {
    grid-column: 1;
    grid-row-start: 7;
    flex-direction: column;
    row-gap: 10px;
    height: auto;
    width: 110px;
  }
}
@media (min-width: 1200px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .download-section {
    grid-column: 1;
    grid-row-start: 8;
    height: 35px;
    -moz-column-gap: 15.37px;
    column-gap: 15.37px;
  }
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .download-section
  .app-store-icon {
  height: 100%;
  width: auto;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .download-section
  .app-store-icon
  > a {
  width: auto;
  height: 100%;
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .download-section
  .app-store-icon
  > img {
  height: 100%;
  width: auto;
}
@media (min-width: 700px) and (max-width: 1200px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .download-section
    .app-store-icon {
    width: 100%;
    height: auto;
  }
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .download-section
  a {
  height: 100%;
  width: auto;
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .download-section
  .google-play-icon {
  height: 100%;
  width: auto;
  margin-right: auto;
}
@media (min-width: 700px) and (max-width: 1200px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .download-section
    .google-play-icon {
    width: 100%;
    height: auto;
  }
}
.main-container .content-wrapper .hero-section .hero-content .phone-display {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  padding-bottom: 15%;
}
@media (max-width: 700px) {
  .main-container .content-wrapper .hero-section .hero-content .phone-display {
    margin-top: 6.847826087vw;
    padding-bottom: 6.038647343vw;
    margin-bottom: 4.8309178744vw;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper .hero-section .hero-content .phone-display {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 9;
    display: flex;
    align-items: center;
  }
}

.phone-display {
  min-width: 0;
  width: 100%;
}

.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .phone-display
  img {
  width: 100%;
}
.main-container .content-wrapper .hero-section .hero-content .movie-icon {
  cursor: pointer;
}
@media (max-width: 700px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .movie-icon
    > img {
    width: 100%;
  }
}
@media (min-width: 700px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .movie-icon
    > img {
    width: 100%;
    height: auto;
  }
}
@media (min-width: 1200px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .movie-icon
    > img {
    width: auto;
    height: 164px;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper .hero-section .hero-content .movie-icon {
    grid-column: 3;
    grid-row-start: 4;
    grid-row-end: 6;
  }
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .expo-logo-container {
  width: 131.5676879883px;
  height: 47.647895813px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .expo-logo-container {
    margin-top: 5.0724637681vw;
  }
}
@media (min-width: 700px) {
  .main-container
    .content-wrapper
    .hero-section
    .hero-content
    .expo-logo-container {
    grid-column: 1;
    grid-row-start: 6;
  }
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .expo-logo-container
  img {
  width: 100%;
}
.main-container .content-wrapper .hero-section .hero-content .hero-text {
  color: var(--dl-color-default-bgbk);
  height: auto;
  font-size: 17px;
  font-style: Medium;
  text-align: left;
  font-weight: 400;
  line-height: 31px;
  font-stretch: normal;
  text-decoration: none;
}
@media (max-width: 700px) {
  .main-container .content-wrapper .hero-section .hero-content .hero-text {
    width: auto;
    white-space: wrap;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6.038647343vw;
  }
}
@media (min-width: 700px) and (max-width: 1200px) {
  .main-container .content-wrapper .hero-section .hero-content .hero-text {
    grid-column: 3;
    grid-row-start: 2;
    font-size: 14px;
    line-height: 28px;
    margin-top: -20px;
  }
}
@media (min-width: 1200px) {
  .main-container .content-wrapper .hero-section .hero-content .hero-text {
    grid-column: 3;
    grid-row-start: 2;
    font-size: 19px;
    line-height: 37px;
    width: 350px;
    margin-top: -30px;
  }
}
.main-container .content-wrapper .hero-section .hero-content .logo-container {
  width: 149px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 700px) {
  .main-container .content-wrapper .hero-section .hero-content .logo-container {
    grid-column: 1;
    grid-row-start: 3;
    grid-row-end: 5;
    width: 189px;
    height: auto;
  }
}
.main-container
  .content-wrapper
  .hero-section
  .hero-content
  .logo-container
  > img {
  width: 100%;
}
.main-container .content-wrapper #exclusive-gift {
  scroll-margin-top: 89px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift {
    justify-content: center;
    background-image: url(../images/application_mark.png);
    background-repeat: no-repeat;
    background-position-y: 54px;
    background-size: 88%;
    background-position-x: center;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift {
    margin-top: 43px;
    background-image: url(../images/application_mark.png);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position-y: 54px;
    background-position-x: center;
    height: 596px;
  }
}
@media (min-width: 1200px) {
  .main-container .content-wrapper #exclusive-gift {
    background-size: 785px;
    height: 601px;
  }
}
.main-container .content-wrapper #exclusive-gift .gift-icons {
  display: grid;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  row-gap: 37px;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-icons {
    margin-top: 10.8695652174vw;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-icons {
    flex-direction: row;
    -moz-column-gap: 20px;
    column-gap: 20px;
    margin-top: 45px;
    grid-template-columns: auto auto;
  }
}
@media (min-width: 1200px) {
  .main-container .content-wrapper #exclusive-gift .gift-icons {
    -moz-column-gap: 141px;
    column-gap: 141px;
  }
}
.main-container .content-wrapper #exclusive-gift .nft-image {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .nft-image {
    width: 294px;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .nft-image {
    width: 227px;
    margin-top: 13px;
  }
}
.main-container .content-wrapper #exclusive-gift .nft {
  display: grid;
  flex-direction: column;
  row-gap: 8px;
  margin-left: auto;
  margin-right: auto;
}
.main-container .content-wrapper #exclusive-gift .nft .ribbon-text {
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px; /* 125% */
  height: 36px;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .nft .ribbon-text {
    font-size: 3.6231884058vw;
    line-height: 4.5893719807vw;
    height: 11.8357487923vw;
    position: absolute;
    top: 1.2077294686vw;
  }
}
.main-container .content-wrapper #exclusive-gift .date-text {
  color: var(--dl-color-default-bgbk);
  width: 100%;
  height: auto;
  font-size: 12px;
  font-style: Regular;
  text-align: center;
  font-weight: 400;
  line-height: 31px;
  font-stretch: normal;
  text-decoration: none;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .date-text {
    margin-top: -8px;
  }
}
.main-container .content-wrapper #exclusive-gift .ribbon-container {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .ribbon-container {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
.main-container .content-wrapper #exclusive-gift .ribbon-container > img {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .ribbon-container > img {
    width: 264px;
    height: 48px;
    flex-shrink: 0;
  }
}
.main-container .content-wrapper #exclusive-gift .ribbon-text {
  color: rgb(255, 255, 255);
  width: 264px;
  height: auto;
  font-size: 15px;
  font-style: Bold;
  text-align: center;
  font-weight: 700;
  line-height: 31px;
  font-stretch: normal;
  text-decoration: none;
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translate(-50%);
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .ribbon-text {
    top: 2px;
  }
}
.main-container .content-wrapper #exclusive-gift .sbt-icon {
  width: 342.150177002px;
  display: grid;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  row-gap: 8px;
  margin-left: auto;
  margin-right: auto;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .sbt-icon {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .sbt-icon > img {
    width: 80%;
  }
}
.main-container .content-wrapper #exclusive-gift .sbt-image {
  width: 268px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .sbt-image {
    width: auto;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .sbt-image {
    width: 207px;
  }
}
.main-container .content-wrapper #exclusive-gift .gift-description > p > sup {
  vertical-align: top;
  position: relative;
  color: var(--BG_BK, #141414);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  top: -5px;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-description {
    color: var(--dl-color-default-bgbk);
    width: 100%;
    height: auto;
    font-size: 4.347826087vw;
    font-style: Regular;
    text-align: center;
    font-weight: 400;
    line-height: 8.2125603865vw;
    font-stretch: normal;
    text-decoration: none;
    margin-bottom: 10.38647343vw;
    padding-left: 1em;
    padding-right: 1em;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-description {
    align-self: center;
    margin-bottom: 45px;
    color: var(--BG_BK, #141414);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 31px; /* 172.222% */
  }
}
.main-container .content-wrapper #exclusive-gift .gift-description > ul {
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-description > ul {
    color: var(--BG_BK, #141414);
    font-size: 2.8985507246vw;
    font-style: normal;
    font-weight: 400;
    line-height: 4.1062801932vw;
    text-align: left;
    margin-top: 11.1111111111vw;
    text-indent: -2.5em;
    padding-left: 2.5em;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-description > ul {
    color: var(--BG_BK, #141414);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px; /* 150% */
    text-align: left;
    width: 487px;
    margin-left: auto;
    margin-right: auto;
    text-indent: -2.5em;
    padding-left: 2.5em;
    margin-top: 28.91px;
  }
}
.main-container .content-wrapper #exclusive-gift .gift-title {
  color: var(--dl-color-default-bgbk);
  width: 100%;
  height: auto;
  font-size: 23px;
  font-style: Bold;
  text-align: center;
  font-weight: 700;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: none;
}
@media (max-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-title {
    margin-bottom: 16.6666666667vw;
  }
}
@media (min-width: 700px) {
  .main-container .content-wrapper #exclusive-gift .gift-title {
    margin-bottom: 52px;
    color: var(--BG_BK, #141414);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 86.667% */
  }
}

#guide-section {
  width: 100%;
  padding-top: 2px;
  padding-left: 20%;
  padding-right: 20%;
  padding-bottom: 40px;
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  #guide-section {
    width: 100%;
    margin-top: 40px;
    padding-left: 12%;
    padding-right: 12%;
    padding-bottom: 40px;
  }
}
@media (min-width: 700px) {
  #guide-section {
    width: 100%;
    margin-top: 60px;
    padding-top: 0;
    padding-left: 20%;
    padding-right: 20%;
    padding-bottom: 60px;
  }
}

/* MV */
/* TOPICS */
#topics-section {
  scroll-margin-top: 69px;
  width: 100%;
  display: grid;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  position: relative;
}
@media (max-width: 700px) {
  #topics-section {
    row-gap: 22px;
    padding-top: 61px;
    padding-left: 3%;
    padding-right: 3%;
  }
}
@media (min-width: 700px) {
  #topics-section {
    row-gap: 22px;
    padding-top: 44px;
  }
}
@media (min-width: 700px) and (max-width: 1200px) {
  #topics-section {
    padding-left: 2%;
    padding-right: 2%;
  }
}

.topics-header {
  width: 347px;
  height: 294px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}
@media (max-width: 700px) {
  .topics-header {
    position: absolute;
    top: 12.077294686vw;
    left: 9.6618357488vw;
    width: 15.2173913043vw;
  }
}
@media (min-width: 700px) {
  .topics-header {
    position: absolute;
    top: 174px;
    left: 130px;
    width: 97px;
  }
}
.topics-header .myakumyaku-02 {
  width: 100%;
}

.topics-title {
  gap: 10px;
  display: grid;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  width: 100%;
  color: var(--dl-color-default-bgbk);
  height: auto;
}
.topics-title .english-topics-title {
  color: var(--dl-color-default-bgbk);
  width: 100%;
  height: auto;
  font-size: 38px;
  font-style: Regular;
  text-align: center;
  font-weight: 400;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: none;
}
@media (min-width: 700px) {
  .topics-title .english-topics-title {
    font-size: 30px;
  }
}
.topics-title .japanese-topics-title {
  color: var(--dl-color-default-bgbk);
  width: 100%;
  height: auto;
  font-size: 17px;
  font-style: Regular;
  text-align: center;
  font-weight: 400;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: none;
}
@media (min-width: 700px) {
  .topics-title .japanese-topics-title {
    font-size: 14px;
  }
}

.news-section {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .news-section {
    width: 100%;
  }
}
@media (min-width: 700px) {
  .news-section {
    -moz-column-gap: 32px;
    column-gap: 32px;
  }
}
.news-section > .myakumyaku-02 {
  display: inline-block;
  margin-top: 20px;
}

.news-frame {
  gap: 12px;
  display: grid;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  position: relative;
}
@media (max-width: 700px) {
  .news-frame {
    padding-top: 24px;
    padding-left: 35px;
    padding-right: 32px;
    padding-bottom: 31px;
  }
}
@media (min-width: 700px) {
  .news-frame {
    padding-top: 26px;
    padding-left: 40px;
    padding-right: 33px;
    padding-bottom: 31px;
    width: 650px;
  }
  .news-frame::before {
    content: url(../images/polygon.svg);
    position: absolute;
    top: 45px;
    left: -24px;
  }
}
.news-frame .date {
  color: rgb(90, 90, 90);
  height: auto;
  font-size: 15px;
  font-style: Light;
  text-align: left;
  font-weight: 300;
  line-height: 32px;
  font-stretch: normal;
  text-decoration: none;
}
@media (min-width: 700px) {
  .news-frame .date {
    color: #5a5a5a;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px; /* 266.667% */
    > span {
      vertical-align: top;
      line-height: 2;
    }
  }
}
.news-frame .news-item > a {
  text-decoration: underline;
}
.news-frame .text {
  color: var(--dl-color-default-bgbk);
  height: auto;
  font-size: 16px;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 30px;
  font-stretch: normal;
  display: flex;
}
@media (min-width: 700px) {
  .news-frame .text {
    color: var(--BG_BK, #141414);
    font-size: 12px;
    line-height: 32px;
    font-style: normal;
    font-weight: 400;
    > span {
      line-height: 2;
    }
  }
}
.news-frame .external_link {
  margin-left: 10px;
}
@media (min-width: 700px) {
  .news-frame .external_link {
    width: 13px;
  }
}

.news-group {
  width: 100%;
  display: grid;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
}
@media (max-width: 700px) {
  .news-group {
    row-gap: 12px;
  }
}

.news-item {
  display: grid;
  align-items: flex-start;
  flex-direction: column;
}
@media (min-width: 700px) {
  .news-item {
    grid-template-columns: auto 1fr;
    flex-direction: row;
    -moz-column-gap: 22px;
    column-gap: 22px;
  }
}

/* TOPICS */
/* INTERVIEW */
.interview-section {
  width: 100%;
  display: grid;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  padding-top: 55px;
  row-gap: 19px;
  padding-bottom: 83px;
}
@media (max-width: 700px) {
  .interview-section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 12.077294686vw;
  }
}
@media (min-width: 700px) {
  .interview-section {
    width: 100%;
    max-width: 803px;
    padding-top: 80px;
    padding-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2%;
    padding-right: 2%;
    row-gap: 36px;
  }
}
@media (min-width: 1200px) {
  .interview-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.interview-section .interview-image-container {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  cursor: pointer;
}
.interview-section .interview-image-container > img {
  border-radius: 20px;
}
@media (min-width: 700px) {
  .interview-section .interview-image-container {
    width: 452px;
    margin-left: 11em;
  }
}
.interview-section .interview-image-container .interview-secondary-image {
  width: 100%;
}
.interview-section .interview-content {
  width: 100%;
  display: grid;
}
@media (max-width: 700px) {
  .interview-section .interview-content {
    grid-template-columns: 40.5797101449vw 1fr;
    grid-template-rows: auto auto;
    row-gap: 5.5555555556vw;
    -moz-column-gap: 4.8309178744vw;
    column-gap: 4.8309178744vw;
  }
}
@media (min-width: 700px) {
  .interview-section .interview-content {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    row-gap: 9px;
    -moz-column-gap: 45px;
    column-gap: 45px;
  }
}
@media (max-width: 700px) {
  .interview-section .interview-content .interview-image {
    width: 40.5797101449vw;
    height: 40.5797101449vw;
  }
}
.interview-section .interview-content .word {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 700px) {
  .interview-section .interview-content .word {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
@media (min-width: 700px) {
  .interview-section .interview-content .word {
    grid-row-start: 2;
    grid-column-start: 2;
  }
}
.interview-section .interview-content .word .quote-text .text {
  display: block;
  color: var(--BG_BK, #141414);
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.69px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .interview-section .interview-content .word .quote-text .text {
    font-size: 5.5555555556vw;
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}
@media (min-width: 1200px) {
  .interview-section .interview-content .word .quote-text .text {
    color: var(--BG_BK, #141414);
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: 51px;
  }
}
.interview-section .interview-content .word .quote-text::before,
.interview-section .interview-content .word .quote-text::after {
  position: absolute;
  color: var(--dl-color-default-bgbk);
  width: 35px;
  height: auto;
  font-size: 54px;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 39px;
  font-stretch: normal;
  text-decoration: none;
}
.interview-section .interview-content .word .quote-text::before {
  content: "“";
}
@media (min-width: 700px) {
  .interview-section .interview-content .word .quote-text::before {
    top: 5px;
    left: -30px;
  }
}
.interview-section .interview-content .word .quote-text::after {
  content: "”";
}
@media (max-width: 700px) {
  .interview-section .interview-content .word .quote-text::after {
    right: 0;
    bottom: -4.8309178744vw;
  }
}
@media (min-width: 700px) {
  .interview-section .interview-content .word .quote-text::after {
    bottom: -20px;
    right: -20px;
  }
}
.interview-section .interview-content .interview-image {
  border-radius: 50%;
}
@media (max-width: 700px) {
  .interview-section .interview-content .interview-image {
    grid-row-start: 1;
    grid-column-start: 1;
  }
}
@media (min-width: 700px) {
  .interview-section .interview-content .interview-image {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
  }
}
@media (min-width: 700px) {
  .interview-section .interview-content .interview-image {
    width: 129px;
  }
}
.interview-section .interview-content .member-name {
  grid-row-start: 1;
  grid-column-start: 2;
  color: var(--dl-color-default-bgbk);
  width: 191px;
  height: auto;
  font-size: 17px;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 23px;
  font-stretch: normal;
  text-decoration: none;
  display: grid;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 700px) {
  .interview-section .interview-content .member-name {
    width: 100%;
    font-size: calc(29 / 414 * 100vw);
    line-height: calc(34 / 414 * 100vw);
    justify-content: left;
  }
}
@media (min-width: 700px) {
  .interview-section .interview-content .member-name {
    width: 100%;
    row-gap: 8px;
  }
}
.interview-section .interview-content .member-name .artist-name {
  color: var(--dl-color-default-bgbk);
  width: 191px;
  height: auto;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 31px;
  font-stretch: normal;
  text-decoration: none;
}
@media (max-width: 700px) {
  .interview-section .interview-content .member-name .artist-name {
    width: 100%;
    font-size: 7.0048309179vw;
  }
}

/* INTERVIEW */
/* ABOUT */
#about-section {
  width: 100%;
  background-position: top;
  background-repeat: no-repeat;
  margin-bottom: -1px;
}
@media (max-width: 700px) {
  #about-section {
    padding-left: 6.038647343vw;
    padding-right: 6.038647343vw;
    background-image: url(../images/sp_white_wave.svg);
    padding-bottom: 24.6376811594vw;
    background-size: cover;
  }
}
@media (min-width: 700px) {
  #about-section {
    background-image: url(../images/pc_white_wave.svg);
    padding-bottom: 134px;
    background-size: cover;
  }
}
#about-section .inner {
  display: grid;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  row-gap: 40px;
}
@media (min-width: 700px) {
  #about-section .inner {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    row-gap: 38px;
    flex-direction: column;
  }
}
#about-section .inner .about-content {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  width: 100%;
}
#about-section .inner .about-content .about-group {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
}
@media (max-width: 700px) {
  #about-section .inner .about-content .about-group {
    color: var(--dl-color-default-bgbk);
    font-size: 4.1062801932vw;
    font-style: Regular;
    text-align: left;
    font-weight: 400;
    line-height: 7.2463768116vw;
    font-stretch: normal;
    text-decoration: none;
  }
}
@media (min-width: 700px) {
  #about-section .inner .about-content .about-group {
    color: var(--BG_BK, #141414);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
  }
}
#about-section .inner .about-content .about-group .about-frame {
  gap: 35px;
  display: grid;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}
#about-section .inner .about-content .about-group .about-frame > div {
  gap: 8px;
  display: grid;
  align-items: center;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}
#about-section .inner .about-content .about-group .about-frame > div > img {
  margin-left: auto;
  margin-right: auto;
}
#about-section .inner .about-content .about-group .about-frame > div > span {
  width: 100%;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .wallet-frame
  .wallet-icon {
  width: 60px;
  height: 60px;
}
#about-section .inner .about-content .about-group .about-frame .service-frame {
  gap: 8px;
  display: grid;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .service-frame
  .service-icon-group {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
  -moz-column-gap: 30px;
  column-gap: 30px;
  align-items: center;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .service-frame
  .service-icon-group
  .pay-icon {
  top: 0px;
  left: 0px;
  width: 60px;
  height: 60px;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .service-frame
  .service-icon-group
  .point-icon {
  top: 2px;
  left: 90px;
  width: 56px;
  height: 56px;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .service-frame
  .service-icon-group
  .status-icon {
  top: 4px;
  left: 179px;
  width: 53px;
  height: 53px;
}
#about-section .inner .about-content .about-group .about-frame .about-frame1 {
  gap: 8px;
  display: grid;
  align-items: center;
  flex-direction: column;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .about-frame1
  .service-icon-group1 {
  width: 56px;
  height: 56px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .about-frame1
  .service-icon-group1
  .nft-icon {
  top: 0px;
  left: 0px;
  width: 56px;
  height: 56px;
}
#about-section .inner .about-content .about-group .about-frame .connect-frame {
  gap: 8px;
  display: grid;
  align-items: center;
  flex-direction: column;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .connect-frame
  .status-icon1 {
  width: 56px;
  height: 56px;
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .enjoy-expo-group {
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
}
@media (max-width: 700px) {
  #about-section
    .inner
    .about-content
    .about-group
    .about-frame
    .enjoy-expo-group {
    margin-top: 62px;
  }
}
@media (min-width: 700px) {
  #about-section
    .inner
    .about-content
    .about-group
    .about-frame
    .enjoy-expo-group {
    margin-top: 75px;
  }
}
#about-section
  .inner
  .about-content
  .about-group
  .about-frame
  .enjoy-expo-group
  .myakumyaku-06 {
  position: absolute;
}
@media (max-width: 700px) {
  #about-section
    .inner
    .about-content
    .about-group
    .about-frame
    .enjoy-expo-group
    .myakumyaku-06 {
    top: -6.5217391304vw;
    right: 7.3188405797vw;
  }
}
@media (min-width: 700px) {
  #about-section
    .inner
    .about-content
    .about-group
    .about-frame
    .enjoy-expo-group
    .myakumyaku-06 {
    right: 145px;
    bottom: -70px;
  }
}
#about-section .inner .about-title-container {
  gap: 10px;
  display: grid;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}
#about-section .inner .about-title-container .title-text {
  color: var(--dl-color-default-bgbk);
  font-size: 38px;
  font-style: Regular;
  text-align: center;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
  width: 100%;
}
@media (max-width: 700px) {
  #about-section .inner .about-title-container .title-text {
    font-size: 9.1787439614vw;
    line-height: 6.2801932367vw;
  }
}
#about-section .inner .about-title-container .about-description {
  width: 100%;
}
#about-section .inner .about-title-container .about-description > span {
  width: 100%;
}
@media (max-width: 700px) {
  #about-section .inner .about-title-container .about-description {
    color: var(--dl-color-default-bgbk);
    font-size: 17px;
    font-style: Regular;
    text-align: center;
    font-weight: 400;
    line-height: 26px;
    font-stretch: normal;
    text-decoration: none;
  }
}
@media (min-width: 700px) {
  #about-section .inner .about-title-container .about-description {
    color: var(--dl-color-default-bgbk);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
  }
}

/* HOWTO*/
#howto-section {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  background-color: white;
  background-size: auto;
  margin-bottom: -1px;
}
@media (max-width: 700px) {
  #howto-section {
    padding-top: 94px;
    padding-bottom: 86px;
    background-image: url("../images/sp_blue_wave.svg");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
@media (min-width: 700px) {
  #howto-section {
    padding-top: 169px;
    background-image: url("../images/pc_blue_wave.svg");
    padding-bottom: 76px;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media (min-width: 1200px) {
  #howto-section {
    background-size: cover;
  }
}
#howto-section .howto-title-container {
  gap: 10px;
  display: grid;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
  margin-bottom: 32px;
}
#howto-section .howto-title-container span {
  width: 100%;
}
@media (max-width: 700px) {
  #howto-section .howto-title-container .title-text {
    color: white;
    font-size: 9.1787439614vw;
    font-style: Regular;
    text-align: center;
    font-weight: 400;
    font-stretch: normal;
    text-decoration: none;
    width: 100%;
  }
}
@media (min-width: 700px) {
  #howto-section .howto-title-container .title-text {
    color: #fff;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px; /* 86.667% */
    text-transform: uppercase;
  }
}
#howto-section .howto-title-container .howto-description > span {
  width: 100%;
}
@media (max-width: 700px) {
  #howto-section .howto-title-container .howto-description {
    color: white;
    font-size: 4.1062801932vw;
    font-style: Regular;
    text-align: center;
    font-weight: 400;
    font-height: 6.2801932367vw;
    font-stretch: normal;
    text-decoration: none;
  }
}
@media (min-width: 700px) {
  #howto-section .howto-title-container .howto-description {
    color: white;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
  }
}
#howto-section .usage-guide-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  width: 80%;
  row-gap: 30px;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container {
    row-gap: 40px;
    width: 98%;
  }
}
#howto-section .usage-guide-container .usage-guide {
  gap: 10px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
#howto-section .usage-guide-container .usage-guide > a {
  width: 100%;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide {
    width: 100%;
  }
}
@media (min-width: 700px) {
  #howto-section .usage-guide-container .usage-guide {
    width: 230px;
    margin-right: 20px;
  }
}
#howto-section .usage-guide-container .usage-guide .dl-links {
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 12px;
  row-gap: 10px;
}
#howto-section .usage-guide-container .usage-guide .dl-links > .inner {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 35px;
  justify-content: center;
  font-size: 10px;
  column-gap: 10px;
}
#howto-section .usage-guide-container .usage-guide .dl-links > .inner img {
  height: 35px;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .dl-links {
    font-size: 14px;
    padding: 20px;
    align-self: center;
  }
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .dl-links > .inner {
    height: 50px;
    justify-content: center;
  }
  #howto-section .usage-guide-container .usage-guide .dl-links > .inner img {
    height: 50px;
  }
}
#howto-section .usage-guide-container .usage-guide .dl-links img {
  width: auto;
  height: 100%;
}
#howto-section .usage-guide-container .usage-guide .usage-content {
  width: 100%;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    padding-left: 6.2801932367vw;
    padding-right: 6.2801932367vw;
    -moz-column-gap: 3.3816425121vw;
    column-gap: 3.3816425121vw;
    row-gap: 1.4492753623vw;
  }
}
@media (min-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-content {
    display: grid;
    grid-template-rows: auto auto auto auto;
  }
}
#howto-section .usage-guide-container .usage-guide .usage-action {
  left: 9px;
  color: rgb(255, 255, 255);
  font-size: 19px;
  font-style: Bold;
  text-align: center;
  font-weight: 700;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: none;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  display: flex;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-action {
    height: 54px;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
@media (min-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-action {
    height: 54px;
    margin-bottom: 10px;
  }
}
#howto-section .usage-guide-container .usage-guide .usage-icon {
  width: 170px;
  height: 170px;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-icon {
    width: 100%;
    height: auto;
    grid-row-start: 2;
    grid-column-start: 1;
  }
}
@media (min-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 33px;
  }
}
#howto-section .usage-guide-container .usage-guide .usage-description {
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 27px;
  font-stretch: normal;
  text-decoration: none;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-description {
    grid-row-start: 2;
    grid-column-start: 2;
    font-size: 3.3816425121vw;
    line-height: 5.7971014493vw;
  }
}
@media (min-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-description {
    grid-row-start: 4;
    font-size: 11px;
    line-height: 22px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }
}
#howto-section .usage-guide-container .usage-guide .usage-title {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  background-color: rgb(255, 255, 255);
  border-radius: 35px;
  position: relative;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-title {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    width: 93%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.347826087vw;
  }
}
@media (min-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-title {
    margin-bottom: 18px;
  }
}
#howto-section .usage-guide-container .usage-guide .usage-title .usage-name {
  color: var(--dl-color-default-bgbk);
  height: auto;
  font-size: 19px;
  font-style: Medium;
  text-align: center;
  font-weight: 500;
  line-height: 1;
  font-stretch: normal;
  text-decoration: none;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: 20px;
  position: relative;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .usage-title .usage-name {
    height: 13.0434782609vw;
  }
}
#howto-section
  .usage-guide-container
  .usage-guide
  .usage-title
  .usage-name
  > span {
  line-height: 0;
}
@media (max-width: 700px) {
  #howto-section
    .usage-guide-container
    .usage-guide
    .usage-title
    .usage-name::before {
    content: url(../images/polygon_03.svg);
    position: absolute;
    left: 5.5555555556vw;
    top: 50%;
    bottom: 50%;
    width: 21px;
    height: 21px;
    transform: translateY(-50%);
    display: flex;
    align-items: flex-end;
  }
}
@media (min-width: 700px) {
  #howto-section
    .usage-guide-container
    .usage-guide
    .usage-title
    .usage-name::before {
    content: url(../images/pc_polygon_03.svg);
    position: absolute;
    left: 0px;
    top: 50%;
    bottom: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    display: flex;
    align-items: flex-end;
  }
}
#howto-section .usage-guide-container .usage-guide .connect .usage-name span {
  color: var(--BG_BK, #141414);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media (max-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .connect .usage-name span {
    font-size: 3.8647342995vw;
  }
}
@media (min-width: 700px) {
  #howto-section .usage-guide-container .usage-guide .connect .usage-name span {
    font-size: 12px;
  }
}

/* お問い合わせ*/
#contact {
  width: 100%;
}
@media (max-width: 700px) {
  #contact {
    background: #0068b7;
    background-image: url(../images/sp_red_wave.svg);
    padding-top: 100px;
    padding-left: 36px;
    padding-right: 36px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 12.8019323671vw;
  }
}
@media (min-width: 700px) {
  #contact {
    background: #0068b7;
    background-image: url(../images/pc_red_wave.svg);
    background-size: cover;
    padding-top: 159px;
    display: grid;
    row-gap: 47px;
    padding-bottom: 118px;
  }
}
#contact .contact-title {
  top: 100px;
  left: 53.5673828125px;
  color: rgb(255, 255, 255);
  height: auto;
  font-style: Regular;
  text-align: center;
  font-weight: 400;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: none;
}
@media (max-width: 700px) {
  #contact .contact-title {
    font-size: 21px;
    margin-bottom: 33px;
  }
}
@media (min-width: 700px) {
  #contact .contact-title {
    font-size: 17px;
  }
}
#contact .contact-content {
  display: grid;
  gap: 24px;
  align-items: flex-start;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}
#contact .contact-content .contact-item {
  max-width: 265px;
  height: 70px;
  cursor: pointer;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  padding-right: 1em;
}
@media (min-width: 700px) {
  #contact .contact-content .contact-item {
    height: 54px;
  }
}

#contact .contact-content .contact-item .contact-description {
  color: var(--dl-color-default-bgbk);
  height: 100%;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  font-stretch: normal;
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
}
@media (max-width: 700px) {
  #contact .contact-content .contact-item .contact-description {
    margin-left: 18.115942029vw;
    font-size: 4.1062801932vw;
    line-height: 6.2801932367vw;
  }
  #contact .contact-content .contact-item .contact-description::before {
    content: url(../images/sp_polygon_03.svg);
    position: absolute;
    top: 50%;
    bottom: 50%;
    width: 5.1787439614vw;
    height: 5.1787439614vw;
    transform: translateY(-50%);
    left: -9.6666666667vw;
  }
}
@media (min-width: 700px) {
  #contact .contact-content .contact-item .contact-description {
    margin-left: 30px;
    font-size: 13px;
    padding: 5px;
    line-height: 23px;
  }
  #contact .contact-content .contact-item .contact-description::before {
    content: url(../images/polygon_03_1.svg);
    position: absolute;
    top: 50%;
    bottom: 50%;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    left: -12px;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 1200px) {
  #contact .contact-content .contact-item .contact-description {
    margin-left: 48.51px;
    font-size: 14px;
  }
  #contact .contact-content .contact-item .contact-description::before {
    content: url(../images/polygon_03_1.svg);
    position: absolute;
    top: 50%;
    bottom: 50%;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    left: -12px;
    display: flex;
    align-items: center;
  }
}
#contact .contact-content .disabled {
  display: none;
}
@media (max-width: 700px) {
  #contact .contact-content .expo2025-digital {
    height: 100px;
  }
}
@media (min-width: 700px) {
  #contact .contact-content .expo2025-digital {
    height: 100%;
    padding: 5px;
  }
}
@media (min-width: 1200px) {
  #contact .contact-content .expo2025-digital {
    padding: 0;
  }
  #contact .contact-content .expo2025-digital .contact-description {
    margin-left: 46.5px;
  }
}

.nft-icon1 {
  width: 342px;
  height: 70px;
  display: flex;
  position: relative;
  align-items: flex-start;
  flex-shrink: 1;
  background-color: rgb(255, 255, 255);
}

footer {
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
}
@media (max-width: 700px) {
  footer {
    background-image: url(../images/sp_footer_bg.svg);
    padding-top: 25vw;
    background-size: 100%;
    background-position-y: -0.26087vw;
    background-repeat: no-repeat;
  }
}

@media (max-width: 450px) {
  footer {
    background-image: url(../images/sp_footer_bg.svg);
    padding-top: 10vw;
    background-size: 100%;
    background-position-y: 21.7391304348vw;
    background-repeat: no-repeat;
  }
}

/* フッター前半 */
.footer-top {
  background-size: cover;
  background-repeat: no-repeat;
  display: grid;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  margin-bottom: -1px;
  position: relative;
}
@media (min-width: 700px) {
  .footer-top {
    padding-top: 80px;
    background-image: url(../images/pc_white_wave2.svg);
    background-color: #ffffff;
    background-size: cover;
  }
}
@media (max-width: 700px) {
  .footer-top {
    row-gap: 13.0434782609vw;
    background-color: #ffffff;
  }
}
@media (min-width: 700px) {
  .footer-top {
    row-gap: 58px;
  }
}
.footer-top .expo_logo {
  margin-left: auto;
  margin-right: auto;
  width: 196px;
}
.footer-top .expo_logo > img {
  width: 100%;
}
.footer-top .footer-logo-container {
  width: 199px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
}
.footer-top .footer-logo-container > img {
  width: 100%;
}

.footer-logo {
  position: absolute;
  width: 196.0480499268px;
  height: 71px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
}
@media (max-width: 700px) {
  .footer-logo {
    top: 19.0821256039vw;
    left: 5vw;
  }
}
@media (min-width: 700px) {
  .footer-logo {
    position: absolute;
    top: 362px;
    left: 50%;
    transform: translateX(-50%) translateX(-200px);
  }
}

.footer-top1 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 1;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2px;
}
.footer-top1 > a {
  height: 100%;
}
.footer-top1 > a > img {
  width: auto;
  height: 100%;
}
@media (max-width: 700px) {
  .footer-top1 {
    height: 50px;
  }
}
@media (min-width: 700px) {
  .footer-top1 {
    -moz-column-gap: 23px;
    column-gap: 23px;
    height: 57px;
    margin-top: 10px;
  }
}
.footer-top1 .app-store-icon-footer {
  height: 100%;
}
@media (max-width: 700px) {
  .footer-top1 .app-store-icon-footer {
    margin-right: 20px;
  }
}
.footer-top1 .app-store-icon-footer > a {
  height: 100%;
}
.footer-top1 .app-store-icon-footer > a > img {
  width: auto;
  height: 100%;
}
.footer-top1 .google-play-icon-footer {
  width: auto;
  height: 100%;
}
.footer-top .trade-mark {
  font-size: 10px;
  display: flex;
  flex-direction: column;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -45px;
  margin-bottom: -40px;
  max-width: 360px;
  row-gap: 5px;
  text-indent: -1.3em; /* 1行目を元の位置に */
  padding-left: 1.3em; /* 2行目以降のインデントを設定 */
}
.footer-top .trade-mark span::before {
  content: "※ ";
}
@media (max-width: 700px) {
  .footer-top .trade-mark {
    max-width: 85%;
    margin-top: calc(-40 / 414 * 100vw);
    margin-bottom: calc(-40 / 414 * 100vw);
    max-width: 324px;
  }
}

.status-icon-path {
  top: 6.5658893585px;
  left: 0.0000638962px;
  width: 22px;
  height: 21px;
}

.status-icon-path1 {
  top: 0.0000324249px;
  left: 10.9282665253px;
  width: 5px;
  height: 6px;
}

.google-play-icon-footer {
  top: 0px;
  left: 155px;
  width: 169px;
  height: 50px;
}

.footer-bottom {
  width: 100%;
  display: flex;
  flex-shrink: 1;
  flex-direction: column;
  align-items: center;
  position: relative;
}
@media (max-width: 700px) {
  .footer-bottom {
    padding-top: 35.7487922705vw;
    padding-bottom: 19.3236714976vw;
  }
  .footer-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 19.3236714976vw;
    background-color: black;
  }
}
@media (min-width: 700px) {
  .footer-bottom {
    padding-top: 185px;
    padding-bottom: 180px;
    background-color: white;
  }
  .footer-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background-color: black;
  }
}
.footer-bottom .pc-footer-bottom-bg {
  width: 100%;
  position: absolute;
}
@media (min-width: 700px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: 9.1787439614vw;
  }
}
@media (min-width: 1000px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: 3px;
  }
}
@media (min-width: 1200px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: -2vw;
  }
}
@media (min-width: 1400px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: -3vw;
  }
}
@media (min-width: 1600px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: -4vw;
  }
}
@media (min-width: 1800px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: -5vw;
  }
}
@media (min-width: 2000px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: -6vw;
  }
}
@media (min-width: 2280px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: -7vw;
  }
}
@media (min-width: 2600px) {
  .footer-bottom .pc-footer-bottom-bg {
    top: -8vw;
  }
}
.footer-bottom .footer-bottom-group {
  width: 100%;
  height: 53px;
  align-items: center;
  flex-shrink: 1;
  background-color: rgb(255, 255, 255);
  justify-content: center;
  z-index: 3;
}
@media (max-width: 700px) {
  .footer-bottom .footer-bottom-group {
    display: grid;
    flex-direction: column;
    justify-content: left;
    align-items: baseline;
    padding-top: 2.8985507246vw;
    padding-bottom: 5.3140096618vw;
    padding-left: 3.8647342995vw;
    padding-right: 3.8647342995vw;
    height: auto;
    row-gap: 1.690821256vw;
  }
}
@media (min-width: 700px) {
  .footer-bottom .footer-bottom-group {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .footer-bottom .footer-bottom-group .logo-wrapper {
    grid-column: 1/2;
    text-align: center;
  }
  .footer-bottom .footer-bottom-group .logo-wrapper .hashport {
    margin-left: auto;
    margin-right: auto;
  }
  .footer-bottom .footer-bottom-group .copyright-text {
    grid-column: 2/3;
    text-align: center;
  }
}
.footer-bottom .footer-top-group {
  display: grid;
  align-items: flex-start;
  flex-shrink: 1;
  flex-direction: column;
  row-gap: 36px;
  justify-content: center;
  padding-bottom: 100px;
  z-index: 3;
}
@media (max-width: 700px) {
  .footer-bottom .footer-top-group {
    width: 100%;
    padding-bottom: 17.8743961353vw;
  }
}
.footer-bottom .terms-group {
  display: grid;
  grid-template-columns: auto auto;
}
@media (max-width: 700px) {
  .footer-bottom .terms-group {
    -moz-column-gap: 5.5555555556vw;
    column-gap: 5.5555555556vw;
    row-gap: 5.5555555556vw;
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 700px) {
  .footer-bottom .terms-group {
    -moz-column-gap: 23px;
    column-gap: 23px;
    row-gap: 23px;
    justify-content: left;
  }
}
.footer-bottom .terms-group .expo-text {
  grid-column-start: 1;
  grid-column-end: 3;
}
.footer-bottom .terms-group .link-text {
  color: rgb(255, 255, 255);
  height: auto;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: underline;
}
.footer-bottom .terms-group .link-text::before {
  content: url(../images/sp_polygon_04_1.svg);
  margin-right: 5px;
}
@media (max-width: 700px) {
  .footer-bottom .terms-group .link-text {
    font-size: 3.3816425121vw;
    width: auto;
  }
}
.footer-bottom .terms-group .expo-text.link-text {
  display: flex;
  align-items: center;
}
.footer-bottom .terms-group .expo-text.link-text::before {
  content: url(../images/ellipse.svg) !important;
  margin-right: 6px !important;
}
.footer-bottom .social-icons {
  height: 27px;
  display: grid;
  grid-template-columns: auto auto auto;
  -moz-column-gap: 30px;
  column-gap: 30px;
  margin-left: auto;
  margin-right: auto;
}

.status-icon41 {
  top: 0px;
  left: 0px;
}
@media (max-width: 700px) {
  .status-icon41 {
    width: 27px;
    height: 27px;
  }
}

.facebook-icon {
  top: 1.236328125px;
  left: 58.15234375px;
}
@media (max-width: 700px) {
  .facebook-icon {
    width: 23px;
    height: 24px;
  }
}

.privacy-policy-text {
  color: rgb(255, 255, 255);
  height: auto;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: underline;
}
.privacy-policy-text::before {
  content: url(../images/sp_polygon_04_1.svg);
  margin-right: 5px;
}
@media (max-width: 700px) {
  .privacy-policy-text {
    width: auto;
  }
}

.terms-container {
  width: 80px;
  height: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  flex-shrink: 1;
}
@media (max-width: 700px) {
  .terms-container {
    width: auto;
  }
}

.terms-text {
  left: 20px;
  color: rgb(255, 255, 255);
  height: auto;
  font-size: 14px;
  font-style: Regular;
  text-align: left;
  font-weight: 400;
  line-height: 26px;
  font-stretch: normal;
  text-decoration: underline;
}
.terms-text::before {
  content: url(../images/sp_polygon_04_1.svg);
  margin-right: 5px;
}
@media (max-width: 700px) {
  .terms-text {
    width: auto;
  }
}

.copyright-text {
  top: 18px;
  left: 597.3486328125px;
  color: var(--dl-color-default-black30);
  height: auto;
  font-size: 10px;
  font-style: DemiLight;
  text-align: right;
  font-weight: 400;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .copyright-text {
    font-size: 2.4154589372vw;
    text-align: left;
  }
}

@media (min-width: 700px) {
  .sp {
    display: none !important;
  }
}

@media (min-width: 320px) {
  .small-sp {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .pc {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .big-pc {
    display: none !important;
  }
}

.external_link {
  display: inline-block;
}

.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.visible {
  opacity: 1;
  visibility: visible;
}

.modal-video {
  background: rgba(255, 255, 255, 0.9);
}

.modal-video-close-btn:before {
  background: #141414;
}
.modal-video-close-btn:after {
  background: #141414;
}
.modal-video-close-btn {
  cursor: pointer;
}
@media (max-width: 700px) {
  .modal-video-close-btn {
    position: absolute;
    top: -40px;
    right: -6px;
  }
}

.swiper-wrapper {
  height: auto;
}

.swiper-pagination {
  position: absolute;
  bottom: 0;
}

.guide-banner {
  width: 100%;
  height: auto;
}

.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (max-width: 700px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
}

/* Events Link Section */
#events-link-section {
  padding: 80px 0;
  background-color: transparent;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#events-link-section .inner {
  width: 100% !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 20px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

.events-link-container {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.events-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #0066cc;
  font-size: 20px;
  font-weight: 600;
  text-decoration: underline;
  transition: all 0.3s ease;
}

.events-link-button:hover {
  color: #0052a3;
}

@media (max-width: 700px) {
  #events-link-section {
    padding: 60px 0;
  }

  .events-link-button {
    font-size: 18px;
  }
}