/* ----------画面全体の設定----------- */
body,
html {
  height: 100%;
  margin: 0 auto;
  color: #fff;
  font-family: "Neue Haas Grotesk Display Pro""Montserrat";
}



/* ----------//画面全体の設定----------- */








/* ----------Loading----------- */

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #030210;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  align-items: center;
  display: flex;
}

.spinner {
  width: 50px;
  height: 50px;
  margin: 200px auto;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}



.loaded {
  opacity: 0;
  visibility: hidden;
}



/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}


/* ----------Header----------- */



video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  animation: load 1.5s 0.8s ease-out forwards;
  position: fixed;
  background: url('./img/bg.png') no-repeat;
}



.full {
  height: 100vh;
  position: relative;
}

h1{
margin: 0;
align-items: center;
display: flex;
}

.header-logo img {
  margin: 15px 15px;
  width: 280px;
}

/* ----------グロナビ----------- */

div.headernavi{
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    right: 0;
    position:fixed;
    z-index: 1000;
}


ul.globalnavi  a{
    color: #fff;
    text-decoration: none;
    }
    
ul.globalnavi{
overflow:hidden;
list-style:none;
z-index: 20;
display: flex;
margin-right: 40px;
opacity: 0.8;
font-size: 15px;
align-items: center;
}

ul.globalnavi li{
 padding: 0 16px 0 16px;

}

.nav-item {
  padding: 0 16px 0 16px;
}

.is-animation {
  height: 60px;
  background-color: rgba(3,2,16,0.7);
}


.is-animation .header-logo img {
  margin: 15px 15px;
  width: 200px;
  align-items: center;
  display: flex;
}


button.btn.js-btn{
display: none;
}



li.sp-menuicon11{
  display: none;
}

li.sp-menuicon22{
  display: none;
}


/* Dropdown menu two-line styles */
.submenu {
  display: none;
  position: absolute;
  background-color: rgba(3, 2, 16, 1);
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 60px; 
  
}

.submenu a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  white-space: nowrap;
}



.dropdown-trigger {
  cursor: pointer;
}

  .small-text {
    font-size: 12px; 
    opacity: 0.8;
}


.submenu a:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* 境界線の色と太さを調整 */
}


.sp-menuicon1,
.sp-menuicon2 {
  width: 24px;
  height: 24px;
  padding-left: 0px;
  align-items: center;
  display: flex;
  padding: 0px 8px 0px 8px ；
}



.sns-icons {
  display: flex;
  gap: 16px;
}

.sns-icon {
  display: inline-block;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fade-in-down {
  animation: fadeInDown 0.3s ease-in-out forwards;
}

.fade-out-up {
  animation: fadeOutUp 0.3s ease-in-out forwards;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ----------グロナビ----------- */

.header-container {
  position: absolute;
  top: 0%;
  bottom: -30%;
  width: 100%;
  overflow: hidden;
  z-index: 10;
}

.header-claim-container {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 50%;
  height: 550px;
  background: rgba(0,0,0,0.5);
  border: 0;
  border-radius: 100px;
  overflow: hidden;
  color: white;
  padding: 20px 70px;
}

.header-claim-container > #claim-title > h2 {
  font: normal normal 350 70px/61px Neue Haas Grotesk Display Pro;
}
.header-claim-container > #claim-content {
  font-size: 18px;
}
.header-claim-container > #claim-button-container {
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.header-claim-container > #claim-button-container > #claim{
  width: 90%;
  appearance: none;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, #BD00FF 0%, #5200FF 100%);
  color: #fff;
  padding: 20px 20px;
  font-size: 20px;
  cursor: pointer;
}

.header-claim-container > #claim-button-container > #claim:hover{
  color: #fff;
  background: linear-gradient(90deg, rgba(82, 0, 255, 0.8) 0%, rgba(189, 0, 255, 0.8) 100%);
}



.header-coin {
  object-fit: cover;
  position: absolute;
  top: 14%;
  left: 46%;
  transform: translate(-40%, -50%);
  width: 100%;
  max-width: 400px;
  animation-name:fadeUpAnime;
  animation-duration:2.5s;
  animation-fill-mode:forwards;
  animation-delay: 1s;
  opacity: 0;
}

.header-title {
  position: absolute;
  bottom: 25%;
  margin-left: 5%;
  /*
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
  */
}

.header-title.active  {
	opacity: 1;
	transform: translateY(0px);
}

.header-title > h2 {
  font: normal normal 400 120px/110px Neue Haas Grotesk Display Pro;
  margin: 20px 0;
  position: relative;

}

.header-h2.sentence {
  animation-name:fadeUpAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
animation-delay: 0.5s;
opacity: 0;

}

.tcgv-text{
  animation-name:fadeUpAnime;
  animation-duration:2.5s;
  animation-fill-mode:forwards;
  animation-delay: 0s;
  opacity: 0;
}



@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



.header-title > p {
  font: normal normal 350 32px/40px Neue Haas Grotesk Display Pro;
  letter-spacing: 0px;
  margin: 20px 0;
  opacity: 0.8 !important;
}



#top_circle{
right: -20%;
    position: absolute;
    z-index: -1;
    top: 5%;
}



#scroll{
opacity: 0.8;
width: 22px;
position: absolute;
right: 0;
bottom: 2%;
position: fixed;
margin-right: 20px ;


}
.scrollarea {
  transition: 1s;
  top: 0;
}
.scrollarea.hide {
  transform:translateY(-100px);
}




#orbit{
position: absolute;
    top: -30%;
    left: -25%;
    z-index: -1;
    width: 80%;
    opacity: 0.8;
  }

  #star{
    position: absolute;
    top: -20%;
    left: 35%;
        z-index: -1;
        width: 70%;
      }


  #circle_3d{
    position: absolute;
        top: -30%;
        left: -25%;
        z-index: -1;
        width: 80%;
        opacity: 0.6;
      }


/* ----------//Header----------- */

/* ----------背景固定----------- */

.container {
  padding: 2rem 0;
  width: 1040px;
  z-index: 1;
}

.container-form {
  padding: 4rem 0;
  width: 1040px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.2); 
  text-align: center;
  border-radius: 32px; 
  margin-left: auto;  
  margin-right: auto; 
}

/*固定する背景*/

.white-bg {
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  background: linear-gradient(to bottom, #fff, #D0CCFF);
  min-height: 100vh;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.white-bg::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  /* 最背面へ */
  z-index: -1;
}

/*スクロールするコンテンツ*/

.scrollbox {
  background-color:  rgba(0, 0, 60, 0.4);
  background-blend-mode: overlay; /* 覆い焼き効果 */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.scrollbox-bright {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrollbox-last {
  min-height: 100vh;
  position: relative;
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

.body {
  margin: 0px;
  padding: 0px;
  color: #fff; /*全体の文字色*/
  font-size: 16px; /*文字サイズ*/
  line-height: 2; /*行間*/
  background: #222; /*背景色*/
  -webkit-text-size-adjust: none;
}

/* ----------//背景固定----------- */

/* ----------main----------- */

.flex {
  display: flex; 
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;

  grid-column-gap: 60px;

}

.flex-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 40px;
}

.flex-useapp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 40px;
  justify-content: center;
}

.flex-useapp-2 {
  display: flex;
  justify-content: center;
  align-items: start;
  margin-bottom: 40px;
  transition: 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.flex-useapp-2.on {
  transform: translateY(0);
  opacity: 1.0;
}


.flex-advantages {
  display: flex; 
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
grid-column-gap: 40px;
width: 100%;

}

.game-benefit-item {
  flex: 1; 
  display: flex; /* 子要素を中央揃えするために追加 */
  flex-direction: column !important;
  align-items: center; 
  justify-content: center; 
  background-color: rgba(255, 255, 255, 0.2);
  padding: 36px; 
  border-radius: 32px; 
  margin: 10px; 

}



.flex > p {
  width: 475px;
}

.flex-oasys{
  display: flex;
}

.row-reverse {
  display: flex;
  flex-direction: row-reverse;
  transition: 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.row-reverse.on {
  transform: translateY(0);
  opacity: 1.0;
}

.sub-title {
  font: normal normal 400 70px/61px Neue Haas Grotesk Display Pro;
  position: relative;
  text-align: left;
  margin-bottom: 100px;
  transition: 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
  margin-top: 10px;
}

.sub-title.on {
  transform: translateY(0);
  opacity: 1.0;
}

.sub-title-center {
  text-align: center;
  font: normal normal 400 70px/61px Neue Haas Grotesk Display Pro;
  position: relative;
  margin-bottom: 100px;
  transition: 0.9s ease-in-out;s
  transform: translateY(30px);
  opacity: 0;
  margin-top: 10px;
}

.sub-title-center::before {
  position: absolute;
  bottom: -20px;
  width: 250px;
  text-align: center;
  left: calc(50% - 125px);;
  content: "";
  background: linear-gradient(
    to right,
    #4990e3,
    #1DFFA8,
    #cece15,
    #fc0074,
    #d26fff
  );
  height: 2px;
  margin: 0 auto;
}

.sub-title-center.on {
  transform: translateY(0);
  opacity: 1.0;
}





.section-sub-title {

  font-weight: 350;
  font-size: 16px; /* 実際のデザインに合わせて調整してください */
  text-align: left; /* 小タイトルのテキストを中央揃えにする */
  margin-bottom: 10px; /* 小タイトルとメインタイトルの間のスペースを調整 */
  color: #fff; 
  opacity: 0.8;
  letter-spacing: 1rem;

  transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;

}

.section-sub-title.on {
  transform: translateY(0);
  opacity: 1;
}

.sub-title::before {
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  display: block;
  width: 250px;
  content: "";
  background: linear-gradient(
    to right,
    #4990e3,
    #1DFFA8,
    #cece15,
    #fc0074,
    #d26fff
  );
  height: 2px;
}



.sub-title-black {
  font: normal normal 400 70px/61px Neue Haas Grotesk Display Pro;
  position: relative;
  text-align: left;
  margin-bottom: 100px;
  color: #030210;
  transition: 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.sub-title-black.on {
  transform: translateY(0);
  opacity: 1.0;f

}


.sub-title-black::before {
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  display: block;
  width: 250px;
  content: "";
  background: linear-gradient(
    to right,
    #4990e3,
    #1DFFA8,
    #cece15,
    #fc0074,
    #d26fff
  );
  height: 2px;
}

.caption-title {
  font-size: 24px;
}

.game-title {
    font-size: 24px;
    color: #030210;
    font-weight: 500;
    margin: 0px;
    }

 .game-title-advantages{
      font-size: 24px;
      color: #fff;
      font-weight: 500;
      margin: 0px;
      }
   

.caption {
  margin-bottom: 32px;
  line-height: 170%;
  display: block;
  opacity: 0.7;
}

.game-caption {
font-size: 15px;
  display: block;
  color: #030210;
  font-weight: 400;
  margin-top: 8px;
  opacity: 0.7;
}

.sub-container {
  margin: 0  60px 0 0;
  transition: 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.sub-container.on {
  transform: translateY(0);
  opacity: 1.0;
}

.sub-container-tcgc {
  margin: 0;
  z-index: 1000;
}

.sub-container-game {
  width: 360px;
  margin: 0 20px;
}

.link-container {
  display: flex;
  flex-wrap: wrap;
}





/* ----------logo----------- */

.oasys-logo {
  width: 400px;
  transition: 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
  
}
.oasys-logo.on {
  transform: translateY(0);
  opacity: 1.0;
}

.user_app_logo {
  width: 120px;
  border-radius: 30px;
  margin-bottom: 16px;

}

.tcgc-logo {
  width: 382px;
}

.image-container {
  text-align: center; /
}

.vision-img {
  max-width: 80%;
  height: auto;
  display: inline-block;
}


/* ----------//logo----------- */

.link {
  display: inline-block;
  width: 235px;
  text-decoration: none;
  margin: 0 auto;
  color: #00ff45;
  border: solid 2px;
  
}

/* ----------Link----------- */
.sns-link {
  width: 26px;
  padding-right: 5px;
  padding-right: 8px;
  opacity: 0.7;
}

.link-btn {
  text-align: left;
  z-index: 1000;
}

.link-btn-center {
  text-align: center;
}

.btn-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

}



.material-symbols-outlined {
  margin-left: 5px;
}

.link-btn a {
  display: inline-block;
  text-decoration: none;
  margin: 7px;
  width: 240px;
 height: 60px;
 background-color: #fff; /* 背景色を白に設定 */
}

.link-btn-center a {
  display: inline-block;
  text-decoration: none;
  margin: 7px;
  width: 240px;
 height: 60px;
 background-color: #fff; /* 背景色を白に設定 */
}


.link-btn a:hover {
  color: black;
}

.white-button a {
  color: black;
  border-radius: 100px;
}

.white-button a :hover {
  background-color: #e0e0e0;
  border-radius: 100px; 
}

/* ----------//Link----------- */

/* ----------partnerlogo----------- */



.partner-bg-left {
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  transition: 0.9s ease-in-out;
  transform: translateX(-30px);
  opacity: 0;
}

.partner-bg-left.on {
  transform: translateY(0);
  opacity: 1.0;

}

.partner-bg-right {
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  transition: 0.9s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
}

.partner-bg-right.on {
  transform: translateY(0);
  opacity: 1.0;
}

.partnerlogo{
width: 80%;
margin: 0 auto;
display: block;
}

.flex-partners{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ;
  column-gap: 20px;
}


.flex-useapp{
  transition: 0.9s ease-in-out;
  transform: translateY(30px);
  opacity: 0;

}

.flex-useapp.on{

  transform: translateY(0);
  opacity: 1.0;
}

/* ----------//main----------- */

/* ----------footer----------- */

footer {
  position: absolute;
  padding: 0px 24px;
  margin-top: 0px;
  bottom: 0;
  left: 0;
}

footer > p {
  font-size: 14px;
  opacity: 0.8;
}



/* ----------//footer----------- */



/* Roadmap */

.roadmap-entry {
  display: flex;
  justify-content: flex-start; 
  align-items: flex-start; 
  gap: 8px;
  margin-bottom: 24px;
}

  .roadmap-date {
    font-family: Neue Haas Grotesk Display Pro;
    font-size:  20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 125% */
    color: #FFF;
    text-align: left;
  }


  .roadmap-description {
    color: #FFF; 
    font-family: Roboto, sans-serif; /
    font-size: 16px; 
    font-weight: 400; 
    line-height: 28px; 
    text-align: left;
    max-width: 800px; 
    opacity:  0.8;
    
  }





















/* PC用のCSSはメディアクエリの外に記述する */

@media screen and (max-width: 1040px) {

  .flex-useapp {
    display: block;
   }

   .container {
    width: 80%;
}
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */

  nav.gnav {
  }

  .header-logo {
    margin: 15px 15px;
    width: 200px;
  }

  .header-container {
    position: absolute;
    top: 10%;
    bottom: 0;
    width: 100%;
    overflow: hidden;
  }

  .header-coin {
    object-fit: cover;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 70%;
    left: 0;
    right: 0;
    margin: auto;
    top: 10%;
  }


  .header-title {
    position: absolute;
    bottom: 5%;
  }

 




  .third-sentence {
    padding-left: 0;
    padding-top: 10px;
  }

  .fourth-sentence {
    padding-left: 0px;
  }

  .parallax-bg {
    background-image: url(img/bg_sp.png);
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: relative;
    z-index: 0;
  }

  .flex {
    display: block;
    text-align: center;
  }


 .sub-container{
      margin: 0 auto;
      width: 100% ;
    }    




  .tcgc-logo {
    width: 50%;
  }

  .link-container{
    display: block;
  }

.container {
  padding: 2rem 0;
  width: 80%;
}


.caption{
text-align: left;
}

.sub-container-tcgc {
width: 100%;
}


.flex-partners {
  grid-template-columns: 1fr 1fr;
  }

.sub-container {
    width: 100%;
}


.btn {
  position: fixed;
  right: 16px;
  width: 40px;
  height: 40px;
  z-index: 1000;
  background: transparent;
  border: none;
  top: 16px;
  display: block !important;
}



/***** 真ん中のバーガー線 *****/
.btn-line {
	display: block;
	position: relative;  /* バーガー線の位置基準として設定 */
	width: 100%;  /* 線の長さと高さ */
	height: 1px;
	background-color: #fff;  /* バーガー線の色 */
	transition: .2s;
}

/****** 上下のバーガー線 *****/
.btn-line::before,
.btn-line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: .5s;
  right: 0;
  left: 0;
}
.btn-line::before {
  /* 上の線の位置 */
  transform: translateY(-10px);
}
.btn-line::after {
  /* 下の線の位置 */
  transform: translateY(10px);
}


ul.globalnavi{
  top: 0;
  padding: 50px 0px;
  margin: 0;
  position: fixed;
  right: -70%;
  width: 70%;
  height: 100vh;
  /* メニューを縦に */
  display: flex;
  flex-direction: column;
  color: #efefef;
  background-color:rgba(3,2,16,0.8);
  transition: .3s;
  align-items: flex-start;

}
ul.globalnavi li{
  padding: 24px 0px 24px 24px;
}

.globalnavi li{
  font-size: 14px;
  /* メニューテキスト位置をリスト内中心に */
  display: flex;
  justify-content: center;
  align-items: center;

}

.globalnavi.open {
  right: 0;
}


/***** メニューオープン時 *****/
.btn-line.open {
	background-color: transparent;  	/* 真ん中の線を透明に */
}
.btn-line.open::before ,
.btn-line.open::after {
	content: "";
	background-color: #fff;  /* 上下の線の色を変える */
	transition: .2s;
}
.btn-line.open::before {
	transform: rotate(45deg);  /* 上の線を傾ける */
}
.btn-line.open::after {
	transform: rotate(-45deg);  /* 下の線を傾ける */
}


.green a {
  width: 200px;
  height: 50px;
}

 .is-animation {
    height: 60px;
    background:linear-gradient(rgba(3,2,16,0.7),rgba(0, 0, 0, 0) )
  }

  .is-animation .header-logo img {
margin: 0;
  }


  .sp-menuicon2 .sp-menuicon1{
      position: absolute;
      transform: translate(-50%, -50%);
      width: 10%;
      left: 30%;
      right: 0;
      margin: 0 auto ;
      bottom: 18%;

  .sp-menuicon2{
     position: absolute;
      transform: translate(-50%, -50%);
      width: 10%;
      left: -10%;
      right: 0;
      margin: 0 auto;
      bottom: 18%;

  }
  .submenu {
    display: none;
    position: static;
    background-color: transparent;
    box-shadow: none;
    top: auto;
    width: auto;
  }
  
  .submenu a {
    color: #fff; /* テキストの色を変更 */
    padding: 8px 16px; /* パディングを調整 */
    width: 180px;
  }
  
.header-title > h2 {
  font: normal normal 350 80px/90px Neue Haas Grotesk Display Pro;
  margin: 20px 0;
  position: relative;
}
.header-title > p {
  font: normal normal 350 30px/40px Neue Haas Grotesk Display Pro;
  letter-spacing: 0px;
  margin: 0 0;
}
}
	



.roadmap-entry {
  display: block;}



@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */

  .sub-title {
    font: normal normal 350 40px/37px Neue Haas Grotesk Display Pro;
    text-align: center;
    margin-bottom: 50px;
  }

  .sub-title::before {
    bottom: -20px;
    display: block;
    width: 250px;
    content: "";
    background: linear-gradient( to right, #4990e3, #1DFFA8, #cece15, #fc0074, #d26fff );
    height: 2px;
    margin: 0 auto;
  }

  .sub-title-center {
    font: normal normal 350 40px/37px Neue Haas Grotesk Display Pro;
    text-align: center;
    margin-bottom: 50px;
  }

  .sub-title-center::before {

    bottom: -20px;
    display: block;
    width: 250px;
    content: "";
    background: linear-gradient( to right, #4990e3, #1DFFA8, #cece15, #fc0074, #d26fff );
    height: 2px;
    margin: 0 auto;
  }

 



  .section-sub-title{
    letter-spacing: 0;
    text-align: center;
  }


  .sub-title-black {
    font: normal normal 350 40px/37px Neue Haas Grotesk Display Pro;
    text-align: center;
    margin-bottom: 50px;
  }

 .container-form {
 width:80%;
}
 


  .sub-title-black::before {
    bottom: -20px;
    display: block;
    width: 250px;
    content: "";
    background: linear-gradient( to right, #4990e3, #1DFFA8, #cece15, #fc0074, #d26fff );
    height: 2px;
    margin: 0 auto;
  }




  .header-title {
    margin-left: 30px;
  }



  

  .flex-useapp-2 {
    margin-bottom: 40px;
    display: block;
    margin-right: 0;
  }

  .flex-advantages {
    display: block
  
  }

  .game-benefit-item {
    padding: 24px; 
    border-radius: 32px; 
    margin: 20px 0; 
  
  }


    
  .user_app_logo {
    width: 120px;
    border-radius: 30px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
}
.sub-container-game {
  width: 100%;
  margin: 0px;

}

.oasys-logo {
  width: 70%;
  
}

.second-sentence::before {
  width: 300px;
  right: 70px;
}

.first-sentence::before {
  width: 400px;
  right: 0;
}

.header-logo img {
  margin: 0;
  width: 200px;}


.caption-title {
    font-size: 24px;
    text-align: left;
    display: block;
    margin-bottom: -30px;
}

.tcgc-logo {
  width: 80%;
}

.link-btn {
  text-align: center;}


  .sub-container {
    order: 2;

}

.flex-oasys {
  display: flex;
  flex-flow: row wrap;
}

#scroll {
    width: 20px;
  }


#top_circle{
right: -50%;
position: absolute;
z-index:-1;
top: 10%;
overflow-x:visible;
width:200%;
}


#circle_3 {
  position: absolute;
  top: -10%;
  left: -25%;
  /* z-index: -1; */
  /* width: 150%; */
  opacity: 0.8;

}

#orbit{
  top:-20%;
  left:-40%;
  width:120%;
}

#circle_3d{
  top:-30%;
  left:-50%;
  width: 150%;
}


#star{
top:0%;
left: -10%;
width: 100%;
}

.header-title > h2 {
  font: normal normal 350 40px/50px Neue Haas Grotesk Display Pro;
  margin: 20px 0;
  position: relative;
}

.vision-img {
  max-width: 100%;


}