@charset "UTF-8";
/*
- 共通
- 事前登録ボタン
- 事前登録詳細(必読)ボタン
- デバイスアイコン
- メインコンテンツ
*/

#ttgx {
  font-family: "M PLUS 2", メイリオ, sans-serif;
  font-size: 14px;
  font-optical-sizing: auto;
  font-style: normal;
  color: #000;
  box-sizing: border-box;
}

/*==================================================
　共通
==================================================*/
#lp_header_area,
#lp_footer_area {
  position: relative;
  z-index: 5;
}

#container {
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
}

.reserved {
  pointer-events: none;
}

@media screen and (min-width: 769px) {
  #doemusu-sm .sp {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  #doemusu-sm .pc {
    display: none;
  }
}

/*==========================================================
　事前登録ボタン
===========================================================*/

#ttgx .btn.pc-circle a {
  position: absolute;
  top: 125vw;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: 71%;
  aspect-ratio: 510 / 132;
  font-size: 0;
  background-size: 100% 100%;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_fv_01.png);
}

.webp #ttgx .btn.pc-circle a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_fv_01.webp);
}

#ttgx .btn.pc-circle a:hover {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_fv_01a.png);
}

.webp #ttgx .btn.pc-circle a:hover {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_fv_01a.webp);
}

#ttgx .btn.pc-circle a.reserved {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_fv_01off.png);
}

.webp #ttgx .btn.pc-circle a.reserved {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_fv_01off.webp);
}


/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .btn.pc-circle a {
    top: 35vw;
    width: 26.56%;
  }
}


/*==========================================================
　事前登録詳細(必読)ボタン
===========================================================*/
/* 事前登録詳細(必読) */
#ttgx .detail {
  text-align: center;
}

#ttgx .detail a {
  position: absolute;
  top: 109vw;
  left: 52%;
  width: 23%;
  aspect-ratio: 182 / 104;
  font-size: 0;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_detail_01.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.webp #ttgx .detail a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_detail_01.webp);
}

#ttgx .detail a:hover {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_detail_01a.png);
}

.webp #ttgx .detail a:hover {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/btn_detail_01a.webp);
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .detail a {
    top: 35.6vw;
    left: 64%;
    width: 9.5%;
  }
}

/*==========================================================
　デバイスアイコン
===========================================================*/
#ttgx .detail .device{
  position: absolute;
  top: 106vw;
  left: 77%;
  width: 17%;
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .detail .device{
    top: 35.5vw;
    left: 30.5%;
    width: 5.3%;
  }
}

/*=================================
　fv
=================================*/

#ttgx .fv {
  position: relative;
  margin-top: -45px;
  width: 100%;
  aspect-ratio: 768 / 1325;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_fv_sp_01.png) no-repeat center center / 100% 100%;
  z-index: 2;
}

.webp #ttgx .fv {
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_fv_sp_01.webp) no-repeat center center / 100% 100%;
}

#ttgx .fv_logo {
  position: absolute;
  top: 13vw;
  left: 63%;
  width: 34%;
}

#ttgx .fv_catch .catch01 {
  position: absolute;
  top: 36vw;
  left: 77%;
  width: 22.5%;
}

#ttgx .fv_catch .catch02 {
  position: absolute;
  top: 82vw;
  left: 19%;
  width: 29%;
}


/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .fv {
    margin-top: -60px;
    aspect-ratio: 1903 / 1208;
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_fv_01.png) no-repeat center center / 100% 100%;
  }

  .webp #ttgx .fv {
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_fv_01.webp) no-repeat center center / 100% 100%;
  }

  #ttgx .fv_logo {
    top: 15vw;
    left: 50%;
    transform: translate3d(-50%,0,0);
    width: 30%;
  }

  #ttgx .fv_catch .catch01 {
    top: 6vw;
    left: 86%;
    width: 8.5%;
  }

  #ttgx .fv_catch .catch02 {
    top: 4vw;
    left: 54%;
    width: 10.9%;
  }
}

/* 1921px以上の表示 */
@media screen and (min-width: 1921px) {

}

/*=================================
　reward
=================================*/
#ttgx .rewards {
  position: relative;
  padding-top: 24vw;
  margin-top: -22vw;
  width: 100%;
  aspect-ratio: 768 / 1213;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_rewards_sp_01.jpg) no-repeat center center / 100% 100%;
  z-index: 1;
  box-sizing: border-box;
}

.webp #ttgx .rewards {
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_rewards_sp_01.webp) no-repeat center center / 100% 100%;
}

#ttgx .rewards .main_pic {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

#ttgx .rewards .section_title {
  margin: 0 auto;
  width: 79%;
}

#ttgx .rewards .rewards_txt {
  margin: 3vw auto 0;
  width: 77%;
}

#ttgx .rewards .rewards_item {
  position: relative;
  margin: 0 auto;
  width: 90%;
}

#ttgx .rewards .rewards_item .icon_complete {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 14.3%;
}

#ttgx .rewards .rewards_item.complete .icon_complete {
  display: block;
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .rewards {
    padding-top: 14vw;
    margin-top: -19vw;
    aspect-ratio: 1903 / 1573;
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_rewards_01.jpg) no-repeat center center / 100% 100%;
  }

  .webp #ttgx .rewards {
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_rewards_01.webp) no-repeat center center / 100% 100%;
  }

  #ttgx .rewards .section_title {
    width: 33.6%;
  }

  #ttgx .rewards .rewards_txt {
    margin: 1vw auto 0;
    width: 31.45%;
  }

  #ttgx .rewards .rewards_item {
    width: 49.3%;
  }

  #ttgx .rewards .main_pic {
    display: block;
  }
}

/*=================================
　character
=================================*/

#ttgx .chara {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 980;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_chara_01.png) repeat center center;
  box-sizing: border-box;
}

.webp #ttgx .chara {
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_chara_01.webp) repeat center center;
}

#ttgx .chara .section_title {
  position: absolute;
  top: 5vw;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: 81%;
  z-index: 10;
}

#ttgx .chara .chara_icon_container {
  position: absolute;
  bottom: 5vw;
  left: 50%;
  transform: translate3d(-50%,0,0);
  width: 80%;
  z-index: 10;
}

#ttgx .chara .chara_icon_container .swiper-wrapper {
  column-gap: 2.3%;
}

#ttgx .chara .chara_icon {
  position: relative;
  width: 18.14%;
  filter: grayscale(1);
  cursor: pointer;
}

#ttgx .chara .chara_icon::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

#ttgx .chara .chara_icon.swiper-slide-thumb-active{
  filter: grayscale(0);
}

#ttgx .chara .chara_icon.swiper-slide-thumb-active::before{
  border: solid 3px #b84af9;
}

#ttgx .chara .chara_icon:hover{
  filter: grayscale(0);
}

#ttgx .chara .chara_container {
  position: relative;
  width: 100%;
  z-index: 1;
}

#ttgx .chara .chara_container .swiper-wrapper {
  height: auto !important;
}

#ttgx .chara .chara_container .chara_box{
  position: relative;
  width: 100%;
  aspect-ratio: 768 / 1000;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_01.png);
}

.webp #ttgx .chara .chara_container .chara_box{
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_01.webp);
}

#ttgx .chara .chara_container .chara_box:nth-of-type(2){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_02.png);
}

.webp #ttgx .chara .chara_container .chara_box:nth-of-type(2){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_02.webp);
}

#ttgx .chara .chara_container .chara_box:nth-of-type(3){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_03.png);
}

.webp #ttgx .chara .chara_container .chara_box:nth-of-type(3){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_03.webp);
}

#ttgx .chara .chara_container .chara_box:nth-of-type(4){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_04.png);
}

.webp #ttgx .chara .chara_container .chara_box:nth-of-type(4){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_04.webp);
}

#ttgx .chara .chara_container .chara_box:nth-of-type(5){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_05.png);
}

.webp #ttgx .chara .chara_container .chara_box:nth-of-type(5){
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_sp_05.webp);
}

#ttgx .chara .chara_container .chara_box .chara_txt{
  position: absolute;
  top: 66vw;
  left: 5%;
  width: 52%;
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .chara .section_title {
    top: 5vw;
    width: 34.5%;
  }

  #ttgx .chara .chara_icon_container {
    bottom: 5vw;
    left: 15%;
    transform: translate3d(0,0,0);
    width: 35.3%;
  }

  #ttgx .chara .chara_icon.swiper-slide-thumb-active::before{
    border: solid 5px #b84af9;
  }

  #ttgx .chara .chara_container .chara_box{
    aspect-ratio: 1920 / 980;
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_01.png);
  }

  .webp #ttgx .chara .chara_container .chara_box{
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_01.webp);
  }

  #ttgx .chara .chara_container .chara_box:nth-of-type(2){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_02.png);
  }

  .webp #ttgx .chara .chara_container .chara_box:nth-of-type(2){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_02.webp);
  }

  #ttgx .chara .chara_container .chara_box:nth-of-type(3){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_03.png);
  }

  .webp #ttgx .chara .chara_container .chara_box:nth-of-type(3){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_03.webp);
  }

  #ttgx .chara .chara_container .chara_box:nth-of-type(4){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_04.png);
  }

  .webp #ttgx .chara .chara_container .chara_box:nth-of-type(4){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_04.webp);
  }

  #ttgx .chara .chara_container .chara_box:nth-of-type(5){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_05.png);
  }

  .webp #ttgx .chara .chara_container .chara_box:nth-of-type(5){
    background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_chara_05.webp);
  }

  #ttgx .chara .chara_container .chara_box .chara_txt{
    top: 14vw;
    left: 16%;
    width: 30%;
  }
}

/*=================================
　world
=================================*/

#ttgx .world {
  position: relative;
  padding-top: 8vw;
  width: 100%;
  aspect-ratio: 768 / 952;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_world_sp_01.png) no-repeat center bottom / 100% auto,url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_world_sp_01.jpg) no-repeat center center / 100% auto;
  box-sizing: border-box;
}

.webp #ttgx .world {
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_world_sp_01.webp) no-repeat center bottom / 100% auto,url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_world_sp_01.webp) no-repeat center center / 100% auto;
}

#ttgx .world .section_title {
  margin: 0 auto;
  width: 58%;
}

#ttgx .world .world_txt {
  margin: 8vw auto 0;
  width: 95%;
}

#ttgx .world .world_txt .pc {
  display: none;
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .world {
    padding-top: 5vw;
    aspect-ratio: 1903 / 980;
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_world_01.png) no-repeat center bottom / 100% auto,url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_world_01.jpg) no-repeat center center / 100% auto;
  }

  .webp #ttgx .world {
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/pic_world_01.webp) no-repeat center bottom / 100% auto,url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_world_01.webp) no-repeat center center / 100% auto;
  }

  #ttgx .world .section_title {
    width: 25%;
  }

  #ttgx .world .world_txt {
    margin: 2vw auto 0;
    width: 54.6%;
  }

  #ttgx .world .world_txt .pc {
    display: block;
  }

  #ttgx .world .world_txt .sp {
    display: none;
  }
}

/*=================================
　spec
=================================*/

#ttgx .spec {
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_spec_01.jpg) repeat center center / cover;
}

.webp #ttgx .spec {
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/reserve/ttgx/bg_spec_01.webp) repeat center center / cover;
}

#ttgx .spec .inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
  margin: 0 auto;
  padding: 10vw 0;
  width: 95%;
}

#ttgx .spec .spec_icon{
  width: 31%;
}

#ttgx .spec .spec_list{
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

#ttgx .spec .spec_item{
  display: flex;
  gap: 5px;
}

#ttgx .spec .spec_item .item_name{
  padding: 5px;
  min-width: 22vw;
  font-size: 3.3vw;
  text-align: center;
  background: rgba(255,255,255,0.8);
}

#ttgx .spec .spec_item .item_txt{
  padding: 5px;
  font-size: 3.3vw;
  background: rgba(255,255,255,0.8);
}

#ttgx .spec .spec_item .item_txt .sub_txt{
  font-size: 10px;
}

#ttgx .spec .notes{
  padding: 3vw;
  margin: 0;
  font-size: 3.3vw;
  line-height: 1.5em;
  text-align: justify;
  background: rgba(255,255,255,0.8);
}

#ttgx .spec .notes_title{
  margin-bottom: 3vw;
  font-size: 5vw;
  text-align: center;
}

/* PC表示 */
@media screen and (min-width: 769px) {
  #ttgx .spec .inner{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 5vw 0 0;
    width: min(1018px,53vw);
  }

  #ttgx .spec .spec_icon{
    width: 20%;
  }

  #ttgx .spec .spec_list{
    padding-left: 10px;
    width: 80%;
  }

  #ttgx .spec .spec_item .item_name{
    min-width: 6vw;
    font-size: min(18px,9.375vw);
  }

  #ttgx .spec .spec_item .item_txt{
    font-size: min(18px,9.375vw);
  }

  #ttgx .spec .notes{
    padding: 1vw 2vw;
    margin: 2vw 0;
    font-size: min(18px,9.375vw);
  }

  #ttgx .spec .notes_title{
    font-size: 22px;
  }
}