@charset "UTF-8";

  *:hover{transition: all 0.5s;}


/* hd block */

.hd_top           { position: relative;  width: 100%; height: 80vw; }

.hd_top .ab_item          { position: absolute;  z-index: 5; }
.ab_item img              { max-width: auto; }

.hd_top .top_vis      { top:3.0rem; right: 0; width: 60%; }
.hd_top .top_catch      { top:calc(3.0rem + 9%); left: 4%; width: 35%;}
.hd_top .top_logo      { top:calc(6.8rem + 6%); left: 3%; width: 38%; }
.hd_top .top_date      { top:calc(3.0rem + 34%); left: 7.3%; width: 29%; }
.hd_top .top_ord      { top:calc(3.0rem + 44%); left: 7.8%; width: 28%;display: block;}
.hd_top .top_ord img      {display: block;}
.hd_top .top_town      {top:calc(3.0rem + 33%); left: 0; width: 100%; z-index: 3;}
.hd_top .top_mov      { top:calc(3.0rem + 55%); left: 3%; width: 38%; }

.hd_top a img:hover       { filter: brightness(1.3); }


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

  .hd_top           { height: 260vw; }

  .hd_top .ab_item       {   }

  .hd_top .top_vis       { position:relative; top:0; right: 0; width: 100%;  }
  .hd_top .top_catch      { position: absolute; top:46%; left: 4%; width: 90%;}
  .hd_top .top_logo      { top:50%; left: 3%; width: 94%; }
  .hd_top .top_date      { top:68%; left: 20%; width: 60%; }
  .hd_top .top_town      { top:auto;bottom: 8%; left: 0; width: 100%; z-index: 3;}
  .hd_top .top_mov      { top:77%; left: 3%; width: 94%; }


  .hd_top .top_ord      { position: fixed; top: auto; bottom: 0; left: 0; width: 100%; z-index: 10; }

  /* commonFooter float fixed */

  #commonFooter         { padding-bottom: 10vw; }

}


/* TOPICS */

.sec_topics               { overflow: hidden;  } /* margin-top: -2rem; */

.sec_topics h4            { position: relative; width: 8em; margin: 0 auto -2px 0; padding: 0.2em 1.5em 0.2em 0.2em; text-align: left; font-size: 1.8rem; font-weight: bold; color: hsl(0, 0%, 100%); background-color: #a92b2b; }
.sec_topics h4::before            { height: 0.9em; width: 2em; margin-bottom: 0.2em; margin-left: 0.2em;
    display: inline-block; content: "";   background-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/common/eye_catch01.png"); background-size: contain;  vertical-align: middle;}

.sec_topics h4      { 
  -webkit-mask-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/common/tit_base_mask.png");
  mask-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/common/tit_base_mask.png");
  -webkit-mask-size: cover;
  mask-size:cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  }

.topics_wrap      { position: relative; border: 2px solid #a92b2b; background-color: #f1ebe8; padding: 1rem 1.5rem;  }



.topics_more--wrap      { position: absolute;  top: 0; right: 0;
  width: 8em; height: 100%; background-color: #a92b2b; color: white; text-align: center;  }
.topics_more--wrap a    { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 100%; height: 100%; color: white;  }

.topics_more--wrap b            { display: block; }
.topics_more--wrap b::after    { height: 2.0em; width: 1.6em; margin-bottom: 0.3em;
  display: inline-block; content: "";   background-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/common/arrow-w_r.png"); background-size: contain;  vertical-align: middle;}




.topics_list        {  display: flex; flex-wrap: wrap; margin-bottom: 1.2em; width: 88%; text-align: left; line-height: 1.2;  }

.topics_list:last-child       { margin-bottom: 0; }

.topics_list a       { color: #a92b2b;  }

.topics_list dt     { flex-basis: 7rem; color: #a92b2b; font-weight: bold; }
.topics_list dd     { flex-basis: 78%; flex-grow: 2;   color: #555;  }
.topics_list dd .update_patch     { position: relative; display: inline-block; margin-right: 0.5em; top: 0; left: 0; font-size: 0.8em; }

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

  .sec_topics           { margin-top: 0; }

  .topics_wrap          { padding-bottom: 3rem; }
  .topics_list          { width: 100%; }

  .topics_more--wrap    { top: auto;  bottom: 0; width: 7em; height: 2.5rem; }
  .topics_list dt       { margin-bottom: 0.5em; }
  .topics_list dd       { flex-basis: 65vw; }


}


.banner-section         { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.banner-section__inner  { width: 100%; max-width: 900px; margin: 0 0.5em; }

.banner-section__inner.single_blk:first-child    { margin: 0 auto; }

.banner-section__inner:first-child   { margin-left: 0; }
.banner-section__inner:last-child   { margin-right: 0; }





@media screen and (max-width: 767px) {
  .banner-section         { flex-direction: column; }
  .banner-section__inner  { width: 100%; }

  .banner-section__inner:first-child,
  .banner-section__inner:last-child   { margin: 0 auto 1.0em; }

}


/* player blk  */

.sec_player_blk           {  }

.player_blk--wrapper      { display: flex; justify-content: center; margin-bottom: 1em; }

.player_blk--elm          { width: 25%; margin: 0 1% 0; position: relative;  }

.player_blk--elm .update_patch      { left: 1%; font-size: 0.8em; }

.player_blk--elm a        { display: block; }

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

  .player_blk--wrapper      { flex-wrap: wrap; justify-content: space-around;  }

  .player_blk--elm          { width: 45%; margin: 0 0 1.0em; }
  .player_blk--elm .update_patch      { font-size: 1.0em; }
}



/* main */
main {
  width: 94%;
  max-width: 1600px;
  margin: 0 auto 4vw;
  text-align: center;

  font-feature-settings: "palt" 1;

position: relative;  z-index: 5;
  
  }

.intro_catch      { font-family: "fairplex-narrow", serif;
  font-size: 3rem; line-height: 1.2;
   background: linear-gradient(0deg, #bc0000, #620000 50%);
  -webkit-background-clip: text;
  color: transparent;  font-weight: bold; filter: drop-shadow(0 0 6px hsl(0, 0%, 100%)); }

  .intro_catch b.bl       { font-weight: bold; }


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

      .intro_catch        { font-size: 3.0rem; letter-spacing: -0.05em; }


  }


  hr.spc      { padding: 2rem 0; }

.txbox_lm           { letter-spacing: -0em; line-height: 1.2;}

.feature01          { width: 100%; position: relative; height: 24rem; }

.ft01_tbox          { width: 24rem; text-align: left;  }

.feature01 .ab_item { position: absolute; }

.ft01_tbox          { position: relative; z-index: 20; }

.sec1_1             { z-index: 10;top: -2.6rem; right: 0rem; width: 27rem; }
.sec1_2             { z-index: 5; top: 0rem; right: 14rem; width: 15rem; }
.sec1_3             { z-index: 6; top: 10rem; right: 17rem; width: 15rem;  }

.feature01 .txbox_ss           { width: 24.4rem; }

@media screen and (max-width: 767px) {
  .txbox_lm  {}
  .feature01          { height: 47rem; }
  .feature01 .btn-01  { margin-left: 0; font-size: 2em; }
  .ft01_tbox          { width: 26rem; }

  .sec1_1             { z-index: 5;top: 2.5rem; right:-9rem; width: 40rem; }
  .sec1_2             { z-index: 6; top: auto; bottom: 2rem; left: 0; width: 22rem; }
  .sec1_3             { z-index: 7; top: auto; bottom: 0; right: 0; width: 22rem;  }

  .feature01 .txbox_ss           { width: auto; }
}



.feature02          { width: 100%;  position: relative; height: 27rem; }

.ft02_tbox          { width: 35rem; text-align: left; margin: 0 0 0 auto;
position: relative; z-index: 5; }

.feature02 .txbox_lm            { width: 75%; margin: 0 0 0.5em auto;}
.feature02 .txbox_ss           { width: 75%; margin: 0 0 0 auto; }

.feature02 .btn-01  { }
.feature02 .btn-wrap { width:75%; margin: 1em 0 1em auto;}

.sec2_movwrap       { width: 70%; position: absolute;  top: 0; left: -16%; }

.mask_wrapper       {}
.mask_wrapper video      { width:100%; }

.mask_v1      { -webkit-mask-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/top_sec2_img1.png");
                mask-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/top_sec2_img1.png");
                -webkit-mask-size: cover;
                mask-size: cover;
                }

.mov_esrb_p_wrap         { position: relative; z-index: 2; bottom: 3rem; width: 10%; min-width: 160px;  }


@media screen and (max-width: 767px) {
  .feature02          { height: 50rem; margin-bottom: 2rem; }
  .ft02_tbox          { width: 99%; }
  .feature02 .btn-01  { font-size: 2em; }
  .feature02 .txbox_lm {font-size: 2.4rem; width: 100%;} 
  .feature02 .txbox_ss           { width: 100%; }

  .feature02 .btn-wrap           { margin-top: 16rem }

  .sec2_movwrap       { width: 110%;   top: 23rem; left: -18%; }

  .mov_esrb_p_wrap         { bottom: 0; }

}


.feature03          { width: 100%;  position: relative; height: 40rem; }

.ft03_tbox          { width: 34rem; text-align: left; 
  position: relative; z-index: 5; }

.feature03 .txbox_ss           { width: 75%; margin: 0 auto 0 0; }
.feature03 .btn-wrap           {  width: 24rem; margin-left: 0; }

.sec3_1             { position: absolute; right: -19rem; bottom: 10rem; }


.slider_wrapper     {     position: absolute;
  bottom: 6rem; width: 120%; margin-left: -10%;}

.slider_wrapper      { -webkit-mask-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/top_sec3_slmask.png");
  mask-image: url("https://www.koeitecmoamerica.com/rtk8-remake/img/top_sec3_slmask.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  }



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

    .feature03          { height: 100%; }
    .feature03 .btn-01  { font-size: 2em; }
    .feature03 .btn-wrap           { margin-left: auto; }
    .ft03_tbox          { width: 100%; text-align: center;
      position: relative; z-index: 5; margin-bottom: 2rem; }

      .feature03 .txbox_ss           { width: 100%; margin: 0 auto 0 ; }


      .sec3_1             { position: relative; right:auto; bottom: auto; width: 167%;     max-width: none; margin-left: -23%; }

      .slider_wrapper     { position: relative; bottom: 4rem; }




  }