@charset "UTF-8";

body,
html {
  text-align: left;
  text-decoration: none
}

body {
  -webkit-font-smoothing: antialiased
}

#wrapper,
#wrapper_i {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: hidden
}

#wrapper_i {
  margin-top: -4%;
  background-color: #000
}

@-ms-viewport {
  width: auto;
  initial-scale: 1
}

@viewport {
  width: device-width;
  initial-scale: 1
}

div,
h1,
h2,
h3,
h4,
p {
  font-family: Noto Sans Japanese, sans-serif
}

.textarea_ss {
  font-size: 8pt;
  max-height: 999999px
}

.textarea_s {
  font-size: 9pt;
  max-height: 999999px
}

.textarea_mmm {
  font-size: 11.5pt;
  max-height: 999999px
}
.textarea_mmmd {
  font-size: 10pt;
  max-height: 999999px
}

.textarea_sm {
  font-size: 10pt;
  max-height: 999999px
}

.textarea_m {
  font-size: 1.6rem;
  max-height: 999999px;
  line-height: 1.7em;
}

.textarea_l {
  font-size: 14pt;
  max-height: 999999px
}

.textarea_ll {
  font-size: 16pt;
  max-height: 999999px
}

.textarea_xl {
  font-size: 28pt;
  max-height: 999999px
}

.textarea_news_l {
  font-size: 16pt;
  max-height: 999999px
}

.textarea_news_ll {
  font-size: 32pt;
  max-height: 999999px
}

.textarea_news_date {
  font-size: 16pt;
  font-weight: 600;
  color: #fff;
  background-color: #000;
  padding: .5% 1%;
  text-align: center;
  width: 275px;
  margin: 4% auto
}

.contents_inner,
.contents_inner_pro {
  position: relative;
  margin-top: 0;
  width: 960px;

  height: auto;
  margin-left: auto;
  margin-right: auto
}
.contents_inner_o {
  position: relative;
  margin-top: 10%;
  width: 704px;
  min-width: 768px; 
  height: 640px; 
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50px;
  z-index: 100;
}

@media screen and (min-width:320px) and (max-width:768px) {
.textarea_mmm {
  font-size: 15pt !important;
  }
  .textarea_mmm {
  font-size: 14pt !important;
  }
  .contents_inner {
    padding: 0 8%
  }
.contents_inner_o {
  position: relative;
  margin-top: 0;
  width:100%;
   min-width:inherit;
}
  
  .contents_inner,
  .contents_inner_pro {
    position: relative;
    text-align: justify;
    width: 100%;
    min-width: 40pc;
    margin-left: auto;
    margin-right: auto
  }

  .contents_inner_pro {
    padding: 0 2%
  }

}




.alpha a:hover img {
  opacity: .9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)"
}

.pageTop {
  position: fixed;
  margin-bottom: 5px;
  right: 30px;
  z-index: 56;
  cursor: pointer
}

@media screen and (min-width:320px) and (max-width:768px) {
  .textarea_m {
  font-size: 2.2vw;
  max-height: 999999px;
  line-height: 1.7em;
}
  .pageTop {
    position: fixed;
    margin-bottom: 5px;
    right: 30px;
    z-index: 56;
    cursor: pointer
  }
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden
}

.clearfix {
  min-height: 1px
}

.wdt100 {
  width: 100%
}

@media screen and (min-width:320px) and (max-width:768px) {
  .rspsv {
    width: 100%
  }
}

.rightbox {
  float: right;
  height: auto
}

.leftbox {
  float: left;
  height: auto
}

@media screen and (min-width:320px) and (max-width:768px) {

  .leftbox,
  .rightbox {
    float: none;
    height: auto
  }
}

#trigger1,
#trigger2 {
  position: absolute;
  margin-top: 540px
}

#trigger3 {
  position: absolute;
  margin-top: 40pc
}

#trigger4 {
  position: absolute;
  margin-top: 500px
}

#trigger5 {
  position: absolute;
  margin-top: 75pt
}

#trigger6 {
  position: absolute;
  margin-top: 5in
}

#trigger7 {
  position: absolute;
  margin-top: -50px
}

#trigger8 {
  position: absolute;
  margin-top: 840px
}

#trigger9 {
  position: absolute;
  margin-top: 1700px
}

#trigger10 {
  position: absolute;
  margin-top: 5pc
}

#trigger11 {
  position: absolute;
  margin-top: 5in
}

#trigger11_5 {
  position: absolute;
  margin-top: 980px
}

#trigger12 {
  position: absolute;
  margin-top: 5pc
}

#trigger13 {
  position: absolute;
  margin-top: 1480px
}

#trigger14 {
  position: absolute;
  margin-top: -50px
}

#trigger15 {
  position: absolute;
  margin-top: 50pc
}

#trigger17 {
  position: absolute;
  margin-top: 0
}

#trigger20 {
  position: absolute;
  margin-top: -265px
}

#trigger21,
#trigger23 {
  position: absolute;
  margin-top: 0
}

@media screen and (min-width:320px) and (max-width:768px) {
  #trigger5 {
    position: absolute;
    margin-top: -150px
  }

  #trigger6 {
    position: absolute;
    margin-top: 680px
  }

  #trigger11 {
    position: absolute;
    margin-top: 990px
  }

  #trigger11_5 {
    position: absolute;
    margin-top: 1980px
  }

  #trigger13 {
    position: absolute;
    margin-top: 3400px
  }
}

.section_a {
  position: relative;
  width: 100%;
  min-width: 825pt;
  height: auto
}

#contwrp {
  z-index: 17
}

.haohmaru {
  margin-top: -10%;
  margin-left: 30vw;
  margin-right: 50vw
}

.backimg {
  margin-top: -1%;
  margin-left: -2%;
  width: 104vw;
  height: 104vh;
  background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/ss_img06.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center
}

.infobox {
  position: absolute;
  width: 100%;
  height: 100vh;
  min-height: 655px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 36
}

#js-btn-wrap {
  width: 25pc;
  margin: 0 auto;
  left: 0;
  right: 0
}

.button {
  width: 25pc
}

.button,
.button2 {
  position: relative;
  display: inline-block;
  padding: 1.2em 1em;
  background-color: #fff;
  border: 1px solid #fff;
  text-align: center;
  transition: .2s;
  z-index: 26;
  overflow: hidden
}

.button2 {
  width: 500px
}

.button2:hover,
.button:hover {
  background-color: #817b45;
  -webkit-transition: all .2s;
  transition: all .2s
}

.urelogo {
  position: absolute;
  margin-top: 20px;
  right: 20px;
  z-index: 17
}

.footer {
  position: relative;
  height: 36px;
  bottom: 0;
  z-index: 37;
  background-color: #000
}

.snklogo {
  left: 30px;
  bottom: 15px;
  z-index: 29
}

.credit,
.snklogo {
  position: absolute
}

.credit {
  left: 110px;
  bottom: 20px;
  font-size: 8pt;
  font-weight: 400;
  color: #fff;
  z-index: 17
}

.sns {
  position: relative;
  width: 110px;
  margin: 10% auto;
  z-index: 37
}

.sns li {
  float: left;
  margin-left: 15px
}

.comingsoon {
  position: absolute;
  bottom: 60px;
  width: 129px;
  margin: 0 auto;
  z-index: 39;
  left: 0;
  right: 0
}

.loading {
   margin-top:0;
  background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/common/loading.jpg);
  background-position: center top 50px;
  z-index: 1000;
}

.loading,
.loading_b {
  position: fixed;
  width: 100vw;
  height: 106vh;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center center
}

.loading_b {
  z-index: 46
}

@media screen and (min-width:320px) and (max-width:768px) {
  .loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-image: none;
    background-color: #000;
    z-index: 1000;
  }

  .section_a {
    position: relative;
    min-width: 40pc;
    min-height: auto;
    margin-bottom: 0
  }

  .backimg {
    margin-top: 0;
    margin-left: -2%;
    width: 104vw;
    height: 102vh;
    background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/ss_img06.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
  }

  .haohmaru {
    margin-top: -20%;
    margin-left: 10vw;
    margin-right: 0;
    width: 80%
  }

  .infobox {
    position: absolute;
    width: 100%;
    height: 100vh;
    min-width: 40pc;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 36
  }

  .comingsoon {
    position: absolute;
    bottom: 150px;
    width: 229px;
    z-index: 39
  }

  .comingsoon,
  .sns {
    margin: 0 auto;
    left: 0;
    right: 0
  }

  .sns {
    position: relative;
    width: 125px;
    bottom: 0;
    z-index: 37
  }

  .sns li {
    float: left;
    width: 40%;
    margin-left: 0;
    margin-right: 18px
  }

  .sns li:last-child {
    margin-right: -50px
  }

  .snklogo {
    bottom: 40px;
    z-index: 29
  }

  .credit,
  .snklogo {
    left: 0;
    right: 0;
    text-align: center
  }

  .credit {
    font-size: 8pt;
    font-weight: 400;
    color: #fff;
    z-index: 17
  }
}

.sec1_news {
  margin-bottom: 0;
  padding-bottom: 0
}

.and2,
.sec1_news {
  width: 100%;
  position: relative;
  height: auto;
  z-index: 38
}

.and2 {
  min-height: 500px;
  background-color: #000
}

@media screen and (min-height:220px) and (max-height:550px) {
  .infobox {
    position: absolute;
    margin-top: -3%;
    width: 100%;
    height: 100vh;
    min-width: 40pc;
    max-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 36
  }

  .urelogo {
    display: none
  }

  .haohmaru {
    margin-top: -18%;
    margin-left: 30vw;
    margin-right: 0;
    width: 50%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
  }
}

.backmovie {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
}

@media screen and (min-height:220px) and (max-height:800px) {
  .backmovie {
    position: relative;
    width: 103.5%;
    height: 100vh;
    margin-left: -1.2%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 37
  }
}

.video {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 41
}

.infobox_infowrp {
  position: absolute;
  margin-top: -3.5%;
  margin-left: -1%;
  width: 580px;
  height: 200px;
  z-index: 51
}

@media all and (-ms-high-contrast:none) {

  .backmovie,
  ::-ms-backdrop {
    position: relative;
    width: 100%;
    height: 100%
  }

  .infobox_infowrp {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    height: 200px;
    z-index: 38
  }
}

@media screen and (min-width:320px) and (max-width:768px) {
  .backmovie {
    height: 580px;
    margin-left: -1.2%;
    z-index: 37;
    display: inherit;
    align-items: baseline;
    justify-content: center
  }

  .backmovie,
  .sec1_news {
    position: relative;
    width: 100%
  }

  .sec1_news {
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 38
  }

  .infobox_infowrp {
    position: relative;
    top: 300px;
    width: 580px;
    margin: 0 auto;
    height: 20pc;
    z-index: 50
  }
}

#topvideo {
  position: fixed;
  background-position: center center;
  background-size: cover;
  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width: 100vw;
  left: 0;
  text-align: center;
  z-index: 2
}

#midvideo {
  position: relative;
  width: 407px;
  height: 229px;
  margin: 20px auto;
  border: 1px solid #fff
}

.js-load {
  display: none
}

.js-load.active {
  display: block
}

.newslists {
  position: relative;
  width: 100%;
  margin-top: 50px
}

.newslists li {
  float: left;
  width: 230px;
  height: auto;
  min-height: 205px;
  margin-right: 13px;
  margin-bottom: 4%
}

.newslists li:nth-child(4n) {
  margin-right: -50px
}

.newslists li img {
  border: 1px solid #fff
}

.newslists li img,
.newslists li img:hover {
  -webkit-transition: all .2s;
  transition: all .2s
}

.newslists li img:hover {
  border: 1px solid #807b45
}

.newsdate {
  margin-top: 5px;
  margin-bottom: 0
}

.newscap,
.newsdate {
  font-weight: 600;
  padding-left: 5px;
  padding-right: 5px;
  color: #000
}

.newscap {
  margin-top: 2px;
  text-align: justify;
  word-break: break-all
}

.newtag {
  position: absolute;
  margin-top: -25px;
  background-color: red;
  padding: 1px 15px 2px;
  border: 1px solid hsla(0, 0%, 100%, .5)
}

.newstagtext {
  margin-bottom: 0;
  color: #fff;
  font-weight: 800
}

@media screen and (min-width:320px) and (max-width:768px) {
  .newscap {
    margin-top: 2px;
    font-weight: 600;
    font-size: 13pt;
    text-align: justify;
    word-break: break-all;
    padding-left: 5px;
    padding-right: 5px;
    color: #000
  }

  .newslists {
    position: relative
  }

  .newslists li {
    float: left;
    width: 48.3%;
    height: 150px;
    background-color: none;
    margin-right: 10px;
    margin-bottom: 10%
  }

  .newslists li:nth-child(2n) {
    margin-right: -50px
  }
}

.sectit {
  margin-top: 5pc;
  text-align: center
}

.sec_corner_left {
  top: 0;
  left: -2%
}

.sec_corner_left_b {
  position: fixed;
  top: 0;
  left: -2%;
  opacity: .2;
  z-index: 29
}

.sec_corner_left,
.sec_corner_right {
  position: fixed;
  opacity: .3;
  z-index: 2
}

.sec_corner_right,
.sec_corner_right_b {
  bottom: 50px;
  right: -2%
}

.sec_corner_right_b {
  position: fixed;
  opacity: .2;
  z-index: 29
}

.morebtn {
  margin-top: -4px
}

.overlay_a {
  z-index: 12
}

.overlay_a,
.overlayb {
  position: fixed;
  background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/common/overlay_peace.png);
  background-repeat: repeat;
  opacity: .07;
  width: 100vw;
  height: 100vh
}

.overlayb {
  z-index: 36
}

.overlay2 {
  position: absolute;
  height: 1050px;
  z-index: 35
}

.overlay2,
.overlay3 {
  background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/common/06.png);
  background-repeat: repeat;
  opacity: 1;
  width: 100vw
}

.overlay3 {
  position: fixed;
  height: 100vh;
  z-index: 2
}

.toplogo {
  position: relative;
  margin-top: -6%;
  left: 0;
  z-index: 51;
  text-align: center
}

@media screen and (min-width:320px) and (max-width:768px) {
  .sec_corner_left {
    top: 0;
    left: -2%
  }

  .sec_corner_left_b {
    position: fixed;
    top: 0;
    left: -2%;
    opacity: .2;
    z-index: 29
  }

  .sec_corner_left,
  .sec_corner_right {
    position: fixed;
    opacity: .3;
    z-index: 3
  }

  .sec_corner_right {
    bottom: 50px;
    right: -2%
  }

  .sec_corner_right_b {
    position: fixed;
    bottom: 0;
    right: -2%;
    opacity: .2;
    z-index: 29
  }
}

.card {
  background: #fff;
  display: inline-block;
  height: 60px;
  margin: 1rem;
  position: absolute;
  width: 200px;
  z-index: 55
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
}

.topfooter {
  padding-top: 1%;
  background-color: #000;
  z-index: 40;
  text-align: center
}

.glnvwrp,
.topfooter {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 70px
}

.glnvwrp {
  background-color: #fff;
  padding-top: 1pc;
  z-index: 39
}

.portalbnr {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 39
}

.logo1,
.logo2 {
  margin-bottom: 0
}

.logo2,
.logo3 {
  margin-top: -3%
}

.reservebnrwrp {
  margin-top: -1.3%;
  float: left;
  background-color: #fff;
  padding: 1% 2%
}

.reservebnrwrp,
.reservebnrwrp:hover {
  -webkit-transition: all .2s;
  transition: all .2s
}

.reservebnrwrp:hover {
  background-color: #817b45
}

.topftrrelease {
  float: left;
  margin-top: -1.6%;
  margin-right: 20px
}

.reservbnr {
  margin-bottom: 0
}

.glnv,
.glnv li {
  position: relative
}

.glnv li {
  float: left;
  margin-right: 2.9%
}

.glnv li:last-child {
  margin-top: -3px;
  margin-left: 22px
}

.sslogomovewrp {
  position: relative;
  width: 281px;
  height: 87px;
  margin-top: -35px;
  float: left;
  margin-left: -20px;
  margin-right: 30px
}

.glnv li:nth-child(5) {
  margin-right: -30%
}

@media screen and (min-width:320px) and (max-width:768px) {
  .glnv li:nth-child(5) {
    margin-right: inherit
  }

  .glnv li:last-child {
    margin-top: 0;
    margin-left: 1%
  }

  .topftrrelease {
    float: none;
    width: 100%;
    margin-top: 1.7%
  }
}

.sslogomove1,
.sslogomove2,
.sslogomove3 {
  position: absolute
}

.mov1,
.mov2,
.mov3 {
  margin-top: -10px;
  position: relative
}

.mov1 {
  z-index: 17;
    width: 281px;
}

@supports(-ms-ime-align:auto) {
  .mov1 {
    margin-top: 0
  }
}

.mov2 {
  z-index: 17
}

.mov2,
.mov3 {
  margin-top: -10px;
  width: 281px;
}

.movlogo {
  position: absolute;
  margin-top: -35px;
  margin-left: -20px;
  margin-right: 20px;
}

#trigger1_3 {
  margin-top: 50px
}

.youtubebnr {
  position: fixed;
  right: 0;
  margin-top: 20%;
  z-index: 39
}

@media screen and (min-height:320px) and (max-height:680px) {
  .youtubebnr {
    display: none
  }
}

.snslist {
  margin-bottom: 0
}

.snslist li {
  float: right;
  margin-left: 10px
}

.snslist li:last-child {
  margin-left: -20%
}

.btn {
  border-radius: 0 !important;
  border: 0
}

.pagetopact {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 45
}

.backgradient {
  width: 100%;
  height: 50px;
  position: relative;
  bottom: 1pc;
  z-index: 28;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, .6) 0, rgba(153, 146, 98, 0) 46%);
  background: linear-gradient(to bottom, #000 0, rgba(153, 146, 98, 0) 46%)
}

@media screen and (min-width:320px) and (max-height:660px) {
  .backgradient {
    top: -6.5%
  }
}

.bnrlist {
  position: relative;
  text-align: center
}

.bnrlist li {
  position: relative;
  float: left;
  width: 24%;
  margin-right: 1.4%
}

.bnrlist li:last-child {
  margin-right: -50px
}

.bnrlistbnr {
  background-color: #fff;
  padding: 2% 1%
}

@media screen and (min-width:320px) and (max-width:768px) {
  .bnrlist {
    position: relative;
    text-align: center
  }

  .bnrlist li {
    position: relative;
    float: left;
    width: 48%;
    margin-right: 1.4%;
    margin-bottom: 1.4%
  }

  .bnrlist li:last-child {
    margin-right: -10%
  }
}

.sec2_about {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 950px;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 5pc;
  padding-bottom: 75pt;
  z-index: 38;
  overflow: hidden
}

.sec2_about_introback {
  position: relative;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .7);
  width: 306px;
  height: auto;
  padding-bottom: 30px;
  z-index: 27
}

.sec2_about_introinner {
  width: 100%;
  height: auto;
  padding-left: 30px;
  padding-right: 30px
}

.sec2_about_tit {
  position: relative;
  padding-top: 50px
}

.sec2_about_subtit {
  position: relative;
  margin-bottom: 20px
}

.sec2_about_lead {
  position: relative;
  color: #fff;
  font-weight: 500;
  line-height: 1.7em;
  width: 85%;
  margin: 0 auto;
  text-align: justify
}

.sec2_about_haohmaru {
  position: absolute;
  top: -75pt;
  left: 10pc;
  text-align: center;
  margin: 0 auto;
  z-index: 25
}

.sec2_about_copy {
  position: absolute;
  margin-top: 50px;
  right: 0;
  z-index: 20
}

.sec2bc {
  position: absolute;
  margin-top: 470px;
  z-index: 24
}

.sec2_about_bigcopy2 {
  margin-left: 75pt
}

.sec2_about_bigcopy3 {
  margin-left: 635px
}

.sec2_about_bigcopy4 {
  margin-left: 845px
}

.sec2_about_bigcopy1 {
  margin-left: -115px
}

.sec2sbc {
  position: absolute;
  margin-top: 700px
}

.sec2_about_subcopy1 {
  margin-left: -11%
}

.sec2_about_subcopy2 {
  margin-left: 760px
}

@media screen and (min-width:320px) and (max-width:768px) {
  .sec2_about_subtit {
    position: relative;
    margin-top: 10%;
    text-align: center;
    margin-bottom: 0
  }

  .sec2_about_introback {
    top: 0;
    left: 0;
    background-color: transparent;
    padding-bottom: 20px;
    z-index: 27
  }

  .sec2_about_introinner {
    width: 100%;
    height: auto;
    padding-left: 30px;
    padding-right: 30px
  }

  .sec2_about_lead {
    position: relative;
    color: #000;
    font-weight: 500;
    width: 100%;
    font-size: 14pt;
    line-height: 1.7em;
    margin-bottom: 50px;
    text-align: justify
  }

  .sec2_about,
  .sec2_about_introback {
    position: relative;
    width: 100%;
    height: auto
  }

  .sec2_about {
    min-height: inherit;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 50px;
    z-index: 38;
    overflow: inherit
  }

  .aboutwrp {
    position: relative;
    height: 760px
  }

  .sec2_about_haohmaru {
    position: absolute;
    top: 0;
    left: 10%;
    text-align: center;
    margin: 0 auto;
    z-index: 25
  }
}

.bkobi {
  margin-top: 75pt;
  position: relative;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 22px;
  background-color: #000;
  height: auto;
  z-index: 30
}

.bkobi2,
.bkobi3 {
  bottom: 0;
  position: absolute;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #000;
  height: auto;
  z-index: 30
}

.sec2_about_hanko {
  position: absolute;
  right: 75pt;
  margin-top: 350px;
  z-index: 31
}

.sec2_backslide {
  position: absolute;
  width: 100%;
  margin-top: 10%;
  z-index: 17;
  opacity: .6
}

.sec3_characters {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 750px;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 230px;
  z-index: 38;
  overflow: hidden
}

.sec3_tit {
  margin-bottom: 30px
}

.sec3_tit,
.sec4_tit {
  position: relative;
  text-align: center
}

.sec4_tit {
  margin-top: 70px;
  margin-left: -20px;
  margin-bottom: 20px;
  z-index: 39
}

.sec3_subtit {
  text-align: center;
  margin-bottom: 20px
}

.sec3_charawrp {
  position: relative;
  height: 700px
}

.sec3_charawrp2 {
  position: relative;
  margin-top: 40px;
  height: 650px
}

.sec3_charas {
  position: absolute
}

.serieslist {
  position: relative;
  margin-bottom: 0
}

.serieslist li {
  position: relative;
  float: left;
  margin-right: 0
}

.serieslist li:first-child {
  margin-top: 10px;
  margin-right: 20px
}

.serieslist li:last-child {
  margin-right: -225px
}

.serieslist li a,
.serieslist li a:hover {
  -webkit-transition: all .2s;
  transition: all .2s
}

.serieslist li a:hover {
  opacity: .8
}

@media screen and (min-width:320px) and (max-width:768px) {
.bkobi3 {
  margin-top: 15%;
  bottom: 0;
  position: relative;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #000;
  height: auto;
  z-index: 30
}
  
  .sec3_characters,
  .sec3_charawrp {
    position: relative;
    height: auto;
    width: 100%
  }

  .sec3_characters {
    height: auto;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    min-height:auto;
    z-index: 38;
    overflow:inherit;
  }

  .bkobi2 {
    bottom: inherit;
    position: relative;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #000;
    height: auto;
    z-index: 30
  }

  .serieslist {
    position: relative;
    margin-bottom: 0
  }

  .serieslist li {
    position: relative;
    float: left;
    width: 16.5%;
    text-align: center;
    margin-right: 3px
  }

  .serieslist li:first-child {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    margin-right: 25px
  }

  .serieslist li:nth-child(7),
  .serieslist li:nth-child(12) {
    width: 12%
  }
}

.chara_ear {
  margin-left: 280px;
  z-index: 4
}

.chara_kiba {
  margin-top: 35px;
  margin-left: 650px;
  z-index: 6
}

.chara_yoshitora {
  margin-top: 51px;
  margin-left: 99pt;
  z-index: 8
}

.chara_cha {
  margin-top: 75px;
  margin-left: 810px;
  z-index: 5
}

.chara_kyo {
  margin-top: 135px;
  margin-left: 725px;
  z-index: 6
}

.chara_shiki {
  margin-top: 155px;
  margin-left: 655px;
  z-index: 8
}

.chara_yagyu {
  margin-top: 99pt;
  margin-left: 526px;
  z-index: 8
}

.chara_haoh {
  margin-top: 90pt;
  margin-left: 295px;
  z-index: 11
}

.chara_nako {
  margin-top: -15px;
  margin-left: 94px;
  z-index: 10
}

.chara_gal {
  margin-top: 239px;
  margin-left: 17px;
  z-index: 9
}

.chara_ukyo {
  margin-left: 20px
}

.chara_tam {
  margin-top: 0;
  margin-left: -45px;
  z-index: 5
}

.chara_hanzo,
.chara_ukyo {
  margin-top: 135px;
  z-index: 5
}

.chara_hanzo {
  margin-left: -7pc
}

.sec3_charashadow {
  position: absolute;
  margin-top: 225px;
  margin-left: -195px;
  opacity: .7
}

.sec3_charashadow_new {
  position: absolute;
  margin-top: 492px;
  margin-left: -212px;
  opacity: .8
}

.aboutbnr {
  position: absolute;
  left: 15px;
  bottom: 110px;
  z-index: 38
}

.moviebtnback {
  position: relative;
  background-color: rgba(25, 45, 55, .7)
}

.moviepromo {
  bottom: 182px
}

.moviepromo,
.newsbnr,.newsbnr2,.dlcbnr,.newsbnr3 {
  position: absolute;
  left: 15px;
  z-index: 38
}

.newsbnr {
  bottom: 193px
}
.newsbnr2 {
  bottom: 287px
}
.newsbnr3 {
  bottom: 380px
}
.dlcbnr {
  bottom: 185px
}

.bnrcls {
  opacity: .5
}

.movielistbnr {
  text-align: center;
  margin-bottom: 0
}

.charaname {
  position: absolute;
  display: inline-block;
  z-index: 34
}

.charaname_ear {
  left: 660px
}

.charaname_cha,
.charaname_ear {
  display: inline-block;
  z-index: 32
}

.charaname_cha {
  margin-top: 60px;
  right: 10px
}

.charaname_kibagami {
  right: 130px
}

.charaname_kyo {
  display: inline-block;
  margin-top: 250px;
  right: 20px;
  z-index: 32
}

.charaname_shiki {
  display: inline-block;
  margin-top: 280px;
  right: 90pt;
  z-index: 32
}

.charaname_kibagami,
.charaname_yoshitora {
  display: inline-block;
  margin-top: 30px;
  z-index: 32
}

.charaname_yoshitora {
  left: 250px
}

.charaname_gal {
  margin-top: 280px;
  left: 90pt
}

.charaname_gal,
.charaname_ukyo {
  display: inline-block;
  z-index: 32
}

.charaname_ukyo {
  margin-top: 15pc;
  left: 20px
}

.charaname_hanzo {
  display: inline-block;
  margin-top: 75pt;
  left: -40px;
  z-index: 32
}

.charaname_tam {
  display: inline-block;
  margin-top: -30px;
  left: 60px;
  z-index: 32
}

.charaname_nako {
  display: inline-block;
  margin-top: 20pc;
  left: 15pc;
  z-index: 32
}

.charaname_haoh {
  display: inline-block;
  margin-top: 380px;
  left: 580px;
  z-index: 32
}
.charaname_rim {
  display: inline-block;
  margin-top: 380px;
  left: 50px;
  z-index: 32
}

.charaname_yagyu {
  display: inline-block;
  margin-top: 200px;
  right: 15pc;
  z-index: 32
}

.sec3_charanamewrp {
  position: relative;
  margin-top: -700px;
  margin-bottom: 30px;
  height: 680px;
  z-index: 42;
}

.sec3_charanamewrp,
.sec3_charanamewrp a {
  -webkit-transition: all .2s;
  transition: all .2s
}

.sec3_charanamewrp a:hover {
  opacity: .8;
  -webkit-transition: all .2s;
  transition: all .2s
}

.sec3_characopy {
  position: relative;
  text-align: center;
  margin-bottom: 30px
}

.chara_kurama {
  margin-top: 0;
  margin-left: 5pc;
  z-index: 7
}

.chara_da {
  margin-top: -3pc;
  margin-left: -30px;
  z-index: 6
}

.chara_kou {
  margin-top: 6px;
  margin-left: 610px;
  z-index: 6
}

.sec3_charanamewrp_new {
  position: relative;
  margin-top: -700px;
  height: 680px;
  z-index: 42
}

.sec3_charanamewrp_new,
.sec3_charanamewrp_newp a {
  -webkit-transition: all .2s;
  transition: all .2s
}

.sec3_charanamewrp_new a:hover {
  opacity: .8;
  -webkit-transition: all .2s;
  transition: all .2s
}

.charaname_kurama {
  margin-top: 70px;
  left: 580px
}

.charaname_da {
  margin-top: 270px;
  left: 5pc
}

.charaname_kou {
  margin-top: 360px;
  right: 50px
}

.btnbtn {
  position: absolute;
  margin: 260px auto;
  left: 200px;
  width: 25pc;
  height: 50px;
  background-color: #fff;
  z-index: 17
}

.backwrp {
  position: relative;
  display: flex;
  width: 100%;
  height: auto
}

.sec0_movie {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden
}

.newcharatit {
  margin-top: 75pt
}

.sec4_gamesystem {
  position: relative;
  width: 100%;
  height: 1050px;
  min-height: 950px;
  margin-top: -1px;
  padding-top: 0;
  padding-bottom: 50px;
  z-index: 38
}

.sec4_textarea {
  position: relative;
  margin-top: 3%;
  margin-bottom: 50px;
  color: #fff;
  font-weight: 500;
  line-height: 1.7em;
  text-align: justify
}

.sec4_leftinfo {
  width: 42%
}

.sec4_rightinfo {
  width: 43%
}

.sec4boxwrp {
  position: relative;
  margin-top: 0;
  margin-bottom: 50px;
  z-index: 38
}

.sec4_leftinfocopy {
  text-align: center;
  margin-top: 200px;
  margin-left: 75pt
}

.stagelist {
  position: relative;
  margin-bottom: 0
}

.stagelist li {
  position: relative;
  float: left;
  margin-right: 7.4px
}

.stagelist li:first-child {
  margin-top: 8px;
  margin-right: 44px
}

.stagelist li:last-child {
  margin-right: -225px
}

.stagelist li a,
.stagelist li a:hover {
  -webkit-transition: all .2s;
  transition: all .2s
}

.stagelist li a:hover {
  opacity: .8
}

.sec4_info {
  margin-left: 10px;
  margin-bottom: 20px
}

.footerwrp {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  height: auto;
  padding-top: 10%;
  padding-bottom: 5%;
  background-color: #fff;
  z-index: 38
}

.bottomslider {
  position: absolute !important;
  top: 0;
  width: 100vw;
  height: 1050px;
  opacity: 1;
  z-index: 1
}

.bottomslider2 {
  position: fixed !important;
  background-attachment: fixed;
  top: 0;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background-position: center center;
  background-size: contain;
  z-index: 1
}

.sec5_systemdetail {
  min-height: 100vh;
  background-color: rgba(0, 0, 0, .6);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  margin-top: 0;
  padding-top: 75pt;
  margin-bottom: 0;
  padding-bottom: 75pt;
  z-index: 38;
  overflow: hidden
}

.sec5_systemdetail,
.sec6_charadetail {
  position: relative;
  width: 100%;
  height: auto
}

.sec6_charadetail {
  margin-bottom: 75pt;
  z-index: 36
}

.opset {
  opacity: .4
}

.sec5_tit,
.sec7_tit {
  position: relative;
  text-align: center;
  margin-bottom: 4%
}

#system {
  position: relative
}

.alcent {
  text-align: center
}

.sec5_menulist {
  position: relative;
  margin-top: 5%;
  margin-bottom: 5%
}

.sec5_menulist li {
  float: left;
  width: 24%;
  background-color: #fff;
  margin-bottom: 0;
  padding: 1% 1% 1.2%;
  text-align: center;
  margin-right: 1.4%
}

.sec5_menulist li:last-child {
  margin-right: -75pt
}

.sec5_menulist li a,
.sec5_menulist li a:hover {
  -webkit-transition: all .2s;
  transition: all .2s
}

.sec5_menulist li a:hover {
  opacity: .5
}

.sec5_introleft {
  width: 45%
}

.sec5_introright {
  width: 50.2%
}

.sec5_textarea {
  position: relative;
  width: 100%;
  margin-top: 6%;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 500;
  line-height: 1.7em;
  text-align: justify
}

.sec5_hatashiaiwrp {
  position: relative;
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
  height: auto;
  padding: 3%;
  border: 3px solid red;
  background-color: rgba(0, 0, 0, .5)
}

.sec5_textarea_hatashiai {
  color: red;
  font-weight: 500;
  line-height: 2em
}

.sec5_hatashiaiimg {
  float: right;
  margin-top: -9.2%;
  margin-left: 4%
}

.sec5_gamesystemright {
  width: 53%;
  margin-top: 1%
}

.sec5_gamesystemleft {
  position: relative;
  width: 30%;
  margin-top: 0;
  z-index: 17
}

.sec5_gamesystem1 {
  position: relative;
  margin-bottom: 5%
}

.sec5_textarea_gamsys {
  color: #fff;
  font-weight: 500;
  line-height: 1.6em
}

.sec5_textarea_gamsys3 {
  padding-right: 2%
}

.sec5_textarea_gamsys3,
.sec5_textarea_ikari {
  position: relative;
  color: #fff;
  font-weight: 500;
  line-height: 1.6em;
  text-align: justify;
  padding-left: 2%
}

.gamsys1tit {
  margin-top: 4%;
  margin-bottom: 4%
}

.sec5_gamesystem2 {
  position: relative;
  margin-top: 3%;
  margin-bottom: 8%
}

.sec5_gamesystem3 {
  padding-bottom: 4%
}

.sec5_gamesystem3,
.sec5_gamesystem4 {
  padding-top: 8%;
  border-top: 1px dotted #fff;
  position: relative;
  margin-top: 3%
}

.sec5_gamesystem5 {
  margin-top: 6%
}

.sec5_gamesystem3list {
  position: relative;
  margin-top: 2%
}

.sec5_gamesystem3list li {
  position: relative;
  float: left;
  margin-right: 2.2%;
  width: 32%
}

.sec5_gamesystem3list li:last-child {
  margin-right: -12%
}

.sec5_gamesystem3list li .imgborder {
  border: 1px solid #fff;
  margin-bottom: 5%
}

.sec5_gamesystem4list {
  position: relative;
  margin-top: 2%
}

.sec5_gamesystem4list li {
  position: relative;
  float: left;
  margin-right: 1.8%;
  width: 23.7%
}

.sec5_gamesystem4list li:last-child {
  margin-right: -12%
}

.sec5_gamesystem4list li .imgborder {
  border: 1px solid #fff;
  margin-bottom: 5%
}

.sec5_gamesystem4_subtit {
  margin-bottom: 5%
}

.sec5_onlinetextarea {
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin-bottom: 2%
}

.sec5_ikaritextarea {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0
}

.sec5_gamesystem5left {
  position: relative;
  margin-top: 5%;
  width: 65%
}

.sec5_gamesystem5right {
  position: relative;
  width: 35%
}

.sec5_gmsys5_leftback {
  position: absolute;
  margin-top: -50px;
  margin-left: -123px;
  z-index: 1
}

.sec5_gmsys5_leftwhiteborder {
  position: absolute;
  margin-top: -6px;
  margin-left: -5px;
  z-index: 19
}

.sec5_gmsys5_leftscan {
  position: absolute;
  margin-top: -5px;
  margin-left: -5px;
  opacity: 1;
  z-index: 16
}

.sec5_gmsys5_leftscan2 {
  position: absolute;
  margin-top: -5px;
  margin-left: 245px;
  opacity: 1;
  z-index: 18
}

.sec5_gmsys5_dataavater {
  position: absolute;
  margin-top: 60px;
  right: 150px;
  z-index: 21
}

.sec5_gmsys5_ownavater {
  position: absolute;
  margin-top: 190px;
  left: 40px;
  z-index: 21
}

.sec5_gamesystem5_ghostwrp {
  position: relative;
  margin-bottom: 5%
}

.sec5_introcopy {
  position: relative
}

.sec5_introcopy li {
  position: relative;
  margin-bottom: 2.3%
}

.sec5_gmsys5_noticetextarea {
  color: #fff;
  font-size: 7.5pt;
  font-weight: 500
}

.sec5_gmsys5_worldavater {
  position: absolute;
  margin-top: -20px;
  left: 110px;
  z-index: 22
}

.sec6_charawrp {
  position: relative;
  width: 100%;
  margin-top: 8%;
  margin-bottom: 20px;
  height: auto;
  min-height: 950px;
  z-index: 38
}

.sec6_chara_street {
  position: absolute;
  right: 0
}

.sec6_chara_name {
  position: absolute;
  margin-top: 50px
}

.charawrp_left {
  position: relative;
  height: auto;
  width: 60%
}

.charawrp_right {
  position: relative;
  width: 36%;
  height: auto;
  z-index: 23
}

.sec6_chara_backimg {
  position: absolute;
  right: 5pc
}

.charaname_haoh,
.charaname_kura {
  right: 60px
}
.charaname_basara {
  right: 60px;
    top:0;
}

.charawrap_right_up {
  position: relative;
  width: 35%;
  margin-bottom: 20px;
  left: 62%;
  z-index: 36
}

.charawrap_right_bottom {
  position: relative;
  margin-top: 20px;
  width: 35%;
  left: 65%;
  z-index: 36
}

.charawrap_right_bottom_bikn {
  position: relative;
  margin-top: -100px;
  width: 35%;
  left: 65%;
  z-index: 36
}

.sec5_textarea_charaprof {
  margin-top: 4%;
  font-weight: 500;
  color: #000;
  padding-left: 4%;
  padding-right: 4%;
  line-height: 1.6em;
  text-align: justify
}

.sec6_charaimg {
  position: absolute;
  z-index: 17
}
.sec6_charaimgmina {
  position: absolute;
  z-index: 17
}

@media screen and (min-width:320px) and (max-width:768px) {

  
  .sec5_textarea_ikari {
    color: #fff;
    line-height: 1.6em;
    padding-left: 2%
  }

  .sec5_gamesystem3 {
    padding-top: 12%;
    padding-bottom: 4%;
    border-top: 1px dotted #fff;
    position: relative;
    margin-top: 3%
  }

  .sec5_gamesystem1 {
    position: relative;
    margin-bottom: 5%
  }

  .sec4_textarea,
  .sec5_textarea_ikari {
    position: relative;
    font-weight: 500;
    font-size: 14pt;
    text-align: justify
  }

  .sec4_textarea {
    color: #000;
    width: 100%;
    line-height: 1.7em;
    margin-bottom: 50px
  }

  .sec4_leftinfo {
    width: 100%
  }

  .sec4_rightinfo {
    width: 100%
  }

  .sec4_leftinfocopy {
    position: absolute;
    text-align: center;
    margin-top: 90px;
    margin-left: 10px;
    width: 22%;
    z-index: 38
  }

  .sec4_gamesystem {
    position: relative;
    width: 100%;
    height: auto;
    min-height: inherit;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 50px;
    z-index: 38
  }

  .stagelist {
    position: relative;
    margin-bottom: 0;
    margin-left: 0%
  }

  .stagelist li {
    position: relative;
    float: left;
    width: 17%;
    margin-right: 0
  }

  .stagelist li:first-child {
    margin-top: 8px;
    width: 100%;
    text-align: center;
    margin-right: 56px
  }

   .stagelist li:nth-child(7) {
    margin-right: -225px
  }
  .stagelist li:last-child {
    margin-right: -225px
  }

  .movielistbnr {
    text-align: center;
    margin-bottom: 50px
  }

  .sec0_movie {
    width: 100vw;
    height: auto;
    position: relative;
    overflow: inherit;
    z-index: 13
  }

  .sec5_gmsys5_noticetextarea {
    font-size: 9px
  }

  .sec5_gmsys5_dataavater {
    position: absolute;
    margin-top: 60px;
    left: 60%;
    z-index: 21
  }

  .sec5_gamesystem5left {
    height: 25pc
  }

  .sec5_gamesystem5left,
  .sec5_gamesystem5right {
    position: relative;
    width: 100%
  }

  .sec5_onlinetextarea {
    font-size: 18pt
  }

  .sec5_gamesystem4list {
    position: relative;
    margin-top: 2%
  }

  .sec5_gamesystem4list li {
    position: relative;
    float: left;
    margin-right: 3%;
    margin-bottom: 5%;
    width: 49%
  }

  .sec5_gamesystem4list li:nth-child(2n) {
    margin-right: -12%
  }

  .sec5_textarea_gamsys3 {
    font-size: 14pt;
    line-height: 1.6em;
    text-align: justify;
    padding-left: 2%;
    padding-right: 2%
  }

  .sec5_gamesystem3list {
    position: relative;
    margin-top: 2%
  }

  .sec5_gamesystem3list li {
    position: relative;
    float: none;
    margin-right: 0;
    margin-bottom: 10%;
    width: 100%
  }

  .sec5_gamesystem3list li:last-child {
    margin-right: -12%
  }

  .sec5_gamesystem2 {
    padding-top: 0;
    position: relative;
    margin-top: 0;
    margin-bottom: 8%
  }

  .sec5_textarea_gamsys {
    font-size: 14pt;
    line-height: 1.6em
  }

  .sec5_gamesystemright {
    width: 100%;
    margin-top: 5%
  }

  .sec5_gamesystemleft {
    margin-top: 15%;
    width: 100%
  }

  .sec5_textarea_hatashiai {
    line-height: 1.6em;
    font-size: 14pt
  }

  .sec5_hatashiaiimg {
    position: relative;
    float: none;
    margin-top: 4%;
    margin-left: 0
  }

  .sec5_textarea {
    font-size: 16pt;
    font-weight: 500;
    line-height: 1.7em
  }

  .sec5_introleft {
    width: 100%
  }

  .sec5_introright {
    margin-top: 6%;
    width: 100%
  }

  .sec5_introcopy {
    position: relative;
    margin-top: 5%
  }

  .sec5_introcopy li {
    position: relative;
    margin-bottom: 2.3%;
    text-align: center
  }

  .sec5_menulist {
    position: relative;
    width: 100%;
    margin: 5% auto
  }

  .sec5_menulist li {
    float: left;
    width: 48.5%;
    background-color: #fff;
    margin-bottom: 0;
    padding: 2% 2% 2.2%;
    text-align: center;
    margin-right: 3%;
    margin-bottom: 3%
  }

  .sec5_menulist li:nth-child(2n) {
    margin-right: -10%
  }

  .sec5_systemdetail {
    min-height: none;
    background-color: rgba(0, 0, 0, .9);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    margin-top: 0;
    padding-top: 60px;
    margin-bottom: 0;
    padding-bottom: 75pt;
    z-index: 38;
    overflow: hidden
  }

  .charawrp_left,
  .sec5_systemdetail {
    position: relative;
    width: 100%;
    height: auto
  }

  .sec6_charaimg {
    position: relative;
    display: block;
    width: 80%;
    z-index: 17
  }
    .sec6_charaimgmina {
    position: relative;
    display: block;
    width: 100%;
    z-index: 17
  }

  .sec6_chara_name {
    width: 60%;
    margin-top: 60px
  }

  .sec6_chara_backimg {
    position: absolute;
    right: 50px
  }

  .charawrp_right {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 23
  }

  .charawrap_right_up {
    position: absolute;
    width: 50%;
    margin-top: 0;
    min-height: auto;
    left: inherit;
    right: 0;
    z-index: 36
  }

  .charawrap_right_bottom {
    position: relative;
    width: 90%;
    margin: 0 auto;
    right: 0;
    left: inherit
  }
   .charawrap_right_bottom_bikn {
    position: relative;
    width: 90%;
    margin: 0 auto;
    right: 0;
    left: inherit
  }

  .sec5_textarea_charaprof {
    margin-top: 4%;
    font-weight: 500;
    font-size: 14pt;
    color: #000;
    padding-left: 0;
    padding-right: 0;
    line-height: 1.6em;
    text-align: justify
  }

  .sec6_chara_street {
    position: absolute;
    width: 15%;
    margin-top: 50px;
    right: 0
  }
}

.chara_infohaoh {
  left: -200px
}

.chara_kura {
  left: -10px
}

.sec6_charaimg_shadow {
  position: absolute;
  margin-top: 55pc;
  z-index: 15
}

.chara_shadow_kurama {
  left: -290px
}

.sec6_charaindexbar_all {
  margin-top: 17%
}

.sec6_charaindexbar,
.sec6_charaindexbar_all {
  position: fixed;
  left: 0;
  z-index: 44;
  -webkit-transition: all .2s;
  transition: all .2s
}

.sec6_charaindexbar,
.sec6_charaindexbar_r {
  margin-top: 15%;
  display: none
}

.sec6_charaindexbar_r {
  position: fixed;
  right: 0;
  z-index: 44
}

@media screen and (min-height:320px) and (max-height:880px) {

  .sec6_charaindexbar,
  .sec6_charaindexbar_r {
    display: block
  }

  .sec6_charaindexbar_all {
    display: none
  }
}

@media screen and (min-width:650px) and (max-width:960px) {

  .portalbnr,
  .sec6_charaindexbar,
  .sec6_charaindexbar_all,
  .sec6_charaindexbar_r {
    display: none
  }
}

@media screen and (min-width:320px) and (max-width:768px) {

  .sec6_charaindexbar,
  .sec6_charaindexbar_all,
  .sec6_charaindexbar_r {
    display: none
  }
}

.sec6_charaindexbarlist {
  position: relative
}

.sec6_charaindexbarlist li {
  margin-bottom: 2%
}

.sec6_chara_copy {
  position: absolute;
  z-index: 23
}

.chara_copy_kura {
  left: 90px
}

.chara_copy_haoh {
  margin-top: 20px;
  left: 70px
}
.chara_copy_iroha {
  margin-top: 0px;
  left: 390px
}
.chara_copy_warden {
  margin-top: 0px;
  left: 5%;
}
.chara_copy_go {
  margin-top: 0px;
  left: 0%;
}
.chara_copy_bikn {
  margin-top: 0px;
  left: 1%;
}

.chara_copy_ukyo {
  margin-top: 20px;
  left: 75pt
}

.chara_copy_tam {
  margin-top: 20px;
  left: 50px
}

.sec6_bnrlist {
  position: relative;
  width: 60pc;
  margin: 50px auto;
  z-index: 43
}

.sec6_bnrlist li {
  float: left;
  width: 32%;
  margin-right: 1.8%
}

.sec6_bnrlist li:last-child {
  float: left;
  margin-right: -12%
}

.sec6_bnrlist li a,
.sec6_bnrlist li a:hover {
  -webkit-transition: all .2s;
  transition: all .2s
}

.sec6_bnrlist li a:hover {
  opacity: .8
}

.sec6_bnrlist_2 {
  position: relative;
  width: 610px;
  margin: 50px auto;
  z-index: 43
}

.sec6_bnrlist_2 li {
  float: left;
  width: 49%;
  margin-right: 1.8%
}

.sec6_bnrlist_2 li:last-child {
  float: left;
  margin-right: -32%
}

.sec6_bnrlist_2 li a:hover {
  opacity: .8;
  -webkit-transition: all .2s;
  transition: all .2s
}

@media screen and (min-width:320px) and (max-width:768px) {
  .chara_kura {
    left: -90pt
  }

  .sec6_bnrlist {
    position: relative;
    width: 90%;
    margin: 50px auto;
    z-index: 43
  }

  .sec6_bnrlist li {
    float: left;
    width: 49%;
    margin-right: 2%
  }

  .sec6_bnrlist li:last-child {
    float: left;
    margin-right: -12%
  }

  .sec6_bnrlist li:first-child {
    width: 100%;
    margin-bottom: 2%
  }

  .sec6_bnrlist li a,
  .sec6_bnrlist li a:hover {
    -webkit-transition: none;
    transition: none
  }

  .sec6_bnrlist li a:hover {
    opacity: 1
  }

  .sec6_bnrlist_2 {
    position: relative;
    width: 90%;
    margin: 50px auto;
    z-index: 43
  }

  .sec6_bnrlist_2 li {
    float: left;
    width: 49%;
    margin-bottom: 2%
  }

  .sec6_bnrlist_2 li:last-child {
    float: left;
    margin-right: -12%
  }
}

.chara_newtag {
  position: absolute;
  right: 38%;
  z-index: 23
}

.chara_newtag_d {
  position: absolute;
  right: 36%;
  z-index: 23
}

.sec6_bttbtn {
  margin: 0 auto;
  width: 42.2%
}

.artwrp {
  height: 500px;
  margin-bottom: 30px
}

.lineupbnr {
  position: absolute;
  right: 20px;
  bottom: 110px;
  z-index: 38
}

.sec7_characterindex {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: -4%;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 150px;
  z-index: 38;
  overflow: hidden
}

.characterselectlist {
  position: relative
}

.characterselectlist li {
  position: relative;
  float: left;
  width: 11.4%;
  min-height: 340px;
  margin-right: 1.3%;
  margin-bottom: 4.1%
}

.characterselectlist li:nth-child(8n) {
  margin-right: -12%
}

@media screen and (min-width:320px) and (max-width:768px) {
  .sec7_characterindex {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 50px;
    z-index: 38;
    overflow: hidden
  }

  .characterselectlist {
    position: relative;
    width: 90%;
    margin: 0 auto
  }

  .characterselectlist li {
    position: relative;
    float: left;
    width: 26%;
    min-height: 340px;
    margin-right: 1%;
    margin-bottom: 4.1%
  }

  .characterselectlist li:nth-child(4n) {
    margin-right: -12%
  }
}

.sec7_caraslct_name {
  margin-top: 4%
}

.sec7_caraslct_num {
  text-align: center;
  z-index: 7
}

.charaimg {
  margin-top: -13%
}

.sec7_caraslct_newtag {
  position: absolute;
  margin-top: 175px;
  right: 8px
}

.sec8_othepage {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 50px
}

.otherpagetit {
  position: relative;
  background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/common/b_pagehead.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  padding-top: 50px;
  height: 221px
}

.otherpagetit_ot,
.otherpagetit_patch {
  margin-top: 1%;
  text-align: center
}

.sec8_subtit {
  font-weight: 600;
  font-size: 14pt;
}

.sec8_subtit,
.sec8_tit {
  text-align: center;
  color: #000
}

.sec8_tit,
.sec8_tit_news {
  font-weight: 800
}

.sec8_tit_news {
  text-align: center;
  color: #000;
  margin-bottom: 0.5em
}

.sec8_tit br {
  display: none
}

.newswrp {
  position: relative;
  height: auto;
  width: 70%;
  margin: 8% auto
}

.sec8_lead {
  font-weight: 600;
  text-align: center;
  color: #000;
  word-break: break-all
}
.sec8_lead_s {
  font-weight: 500;
  text-align: justify;
  color: #000;
  word-break: break-all;
  line-height: 1.7em;
}

.newsbtn {
  margin-top: 7%;
  width: 100%;
  padding: 2%;
  border-radius: 15px;
  border: 5px solid #000
}

.sec8_btnarea {
  font-weight: 600;
  text-align: center;
  margin-bottom: .8%
}

.newssnslist {
  position: relative;
  width: 150px;
  margin: 8% auto
}

.newssnslist li {
  float: left;
  margin-right: 20px
}

.newssnslist li:nth-child(2) {
  margin-right: -50px
}

.sec7_story {
  position: relative;
  background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/characters/story_back2.png);
  background-repeat: no-repeat;
  background-position: calc(50% - -50px)top;
  background-size: auto;
  width: 100%;
  height: 1214px;
  margin-top: 0;
  padding-top: 5pc;
  margin-bottom: 0;
  padding-bottom: 150px;
  z-index: 38;
  overflow: hidden
}

.storytit {
  position: relative;
  padding-top: 10.5%
}

.storylead,
.storyleadeng {
  position: relative;
  margin-top: 3%
}

.sec8_commandlist {
  margin-top: 7%
}

.sec8_commandlist li {
  float: left;
  margin-right: 5.4%;
  margin-bottom: 2%
}

.sec8_commandlist li:nth-child(6n) {
  margin-right: -50px
}

.sec8_comlistcap {
  margin-top: 2%;
  text-align: center;
  font-weight: 600
}

.sec8_comlistcap,
.sec8_commandlist li a {
  -webkit-transition: all .2s;
  transition: all .2s
}

.sec8_commandlist li a:hover {
  opacity: .8;
  -webkit-transition: all .2s;
  transition: all .2s
}

@media screen and (min-width:320px) and (max-width:768px) {
  .sec7_story {
    background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/characters/story_back2.png);
    background-repeat: no-repeat;
    background-position: calc(30% - -5pc)calc(30% - 280px);
    background-size: auto;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 50px;
    padding-bottom: 5pc;
    z-index: 38;
    overflow: inherit
  }

  .newswrp,
  .sec7_story {
    position: relative;
    height: auto
  }

  .newswrp {
    width: 90%;
    margin: 8% auto
  }

  .sec8_tit {
    font-size: 33pt;
    line-height: 1.3em
  }

  .sec8_tit br {
    display: block
  }

  .otherpagetit_patch {
    margin-top: -1.5%;
    text-align: center
  }

  .otherpagetit_news {
    margin-top: 1.5%;
    text-align: center
  }

  .otherpagetit_ot {
    margin-top: 1%;
    text-align: center
  }

  .sec8_commandlist {
    position: relative;
    width: 100%;
    margin: 7% auto
  }

  .sec8_commandlist li {
    float: left;
    width: 23%;
    margin-right: 2.4%;
    margin-bottom: 2%
  }

  .sec8_commandlist li:nth-child(6n) {
    margin-right: 2.4%
  }

  .sec8_commandlist li:nth-child(4n) {
    margin-right: -50px
  }

  .chara_newtag {
    position: absolute;
    left: 20px;
    width: 8%;
    z-index: 23
  }
}

.sec8_specialleft {
  width: 50%
}

.sec8_specialright {
  width: 44%
}

.sec8_specialrightwp {
  position: relative;
  padding-top: 8%
}

.sec8_specialrightwp li {
  float: left;
  width: 47.5%;
  margin-bottom: 7%;
  margin-right: 5%
}

.sec8_specialrightwp li:nth-child(2n) {
  margin-right: -50px
}

.sec8_spwrp {
  margin-top: 5%
}

.sec8_twbnr {
  margin-top: 13%
}

.sec8_fbbnr {
  margin-top: 8.5%
}

.sec8_twicon {
  position: relative;
  margin-top: 0
}

.sec8_twicon li {
  float: left;
  margin-right: 2.2%;
  width: 8%;
  margin-bottom: 2.5%
}

.sec8_twicon li:nth-child(10n) {
  margin-right: -200px
}

.sec8_twicontit {
  margin-top: 7%
}

.sec8_productswrp {
  position: relative;
  width: 100%;
  margin: 5% auto;
  height: auto
}

.sec8_products_pkg {
  position: relative;
  right: 0;
  text-align: center;
  margin-bottom: 50px
}

.sec8_products_logo,
.sec8_products_prof {
  position: relative;
  margin-bottom: 0
}

.sec8_products_prof {
  margin-top: 0
}

.sec8_products_pforsub,
.sec8_products_prof {
  font-weight: 600;
  color: #000;
  text-align: center
}

.sec8_products_pforsub {
  position: relative;
  margin-top: -1%;
  line-height: 1.6em
}

.sec8_prowrpleft {
  position: relative;
  width: 55%
}

.sec8_prowrpright {
  position: relative;
  width: 30%
}

.mb {
  margin-bottom: 2%
}

#feat1,
#feat2 {
  position: relative;
  margin-top: 3%
}

.footerleft {
  position: relative;
  width: 55%
}

.footerright {
  position: relative;
  padding-top: 3%;
  width: 30%;
  text-align: center
}

.flogotextarea {
  font-weight: 500;
  line-height: 1.7em
}

.fsnklogo {
  margin-top: 8%
}

.finfotextarea {
  font-weight: 500;
  color: #999;
  text-align: justify
}

.cerologo {
  position: absolute;
  margin-top: -5pc;
  right: 0
}

.footerrightbnr {
  text-align: center;
  line-height: 1.6em;
  font-weight: 500
}

.lineupwrp {
  position: relative;
  height: auto;
  margin-bottom: 5pc
}

.finfowrp,
.footerrightbnr {
  position: relative
}

.lineuplist {
  position: relative;
  margin-bottom: 50px
}

.lineuplist li {
  float: left;
  margin-right: 3.4%
}

.lineuplist li:last-child {
  margin-right: -10%
}

.lineuplist li a,
.lineuplist li a:hover {
  -webkit-transition: all .35s ease;
  transition: all .35s ease
}

.lineuplist li a:hover {
  opacity: .8
}

.snkobnr a,
.snkobnr a:hover {
  -webkit-transition: all .35s ease;
  transition: all .35s ease
}

.snkobnr a:hover {
  opacity: .8
}

@media screen and (min-width:320px) and (max-width:768px) {
  .lineuplist {
    position: relative;
    margin-bottom: 10px
  }

  .lineuplist li {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 4%
  }

  .lineuplist li:last-child {
    margin-right: 0
  }

  .sec8_spwrp {
    margin-top: 8%
  }

  .sec8_specialleft,
  .sec8_specialright {
    width: 100%;
    margin: 0 auto
  }

  .sec8_specialrightwp {
    position: relative;
    padding-top: 8%
  }

  .sec8_specialrightwp li {
    float: left;
    margin-bottom: 7%;
    margin-right: 5%
  }

  .sec8_specialrightwp li:nth-child(2n) {
    margin-right: -50px
  }

  .sec8_twicon {
    position: relative;
    width: 100%;
    margin: 0 auto
  }

  .sec8_twicon li {
    float: left;
    margin-right: 2.2%;
    width: 18.2%;
    margin-bottom: 2.5%
  }

  .sec8_twicon li:nth-child(5n) {
    margin-right: -200px
  }

  .sec8_twicontit {
    margin-top: 7%;
    margin-left: 0
  }

  .footerwrp {
    margin-top: 0;
    height: auto;
    padding-top: 10%;
    padding-bottom: 5%;
    background-color: #fff;
    z-index: 38
  }

  .footerleft,
  .footerwrp {
    position: relative;
    width: 100%
  }

  .footerright {
    position: relative;
    padding-top: 3%;
    width: 100%
  }

  .flogo,
  .footerright {
    text-align: center
  }

  .flogotextarea {
    line-height: 1.7em;
    font-size: 14pt
  }

  .cerologo {
    position: relative;
    margin-top: 5%;
    text-align: center
  }

  .visitportal {
    margin-top: 3%;
    text-align: center
  }

  .flogotextarea,
  .footerrightbnr {
    font-weight: 500;
    text-align: center
  }

  .footerrightbnr {
    position: relative;
    font-size: 9px;
    line-height: 1.6em
  }

  .fsnklogo {
    width: 30%;
    margin: 8% auto;
    text-align: center
  }

  .finfotextarea {
    font-size: 11pt;
    width: 90%;
    margin: 5% auto;
    font-weight: 500;
    color: #999
  }
}

.moviewrp {
  position: relative;
  margin-top: 7%;
  min-height: 500px;
  height: auto
}

.movielist {
  margin-bottom: 5%
}

.movielist li {
  position: relative;
  float: left;
  min-height: 215px;
  margin-right: 2.2%;
  margin-bottom: 2.2%
}

.movielist li:nth-child(3n) {
  margin-right: -10%
}

.movielist li a:hover,
.movielist li a:link {
  -webkit-transition: all .2s;
  transition: all .2s
}

.movielist li a:hover {
  opacity: .8
}

.movietextarea {
  margin-top: 2%;
  font-weight: 600;
  text-align: center
}

.movienewtag {
  position: absolute;
  margin-top: -63%;
  right: 2%
}

.charainfo_haoh {
  left: 90px
}

.charainfo_nako {
  left: 170px
}

.charainfo_hanzo {
  left: 140px
}

.charainfo_kura {
  left: 1%
}

.charainfo_rim {
  top:0;
  left: 6%
}
.charainfo_basara {
  top:6%;
  left: 6%
}
.charainfo_mina {
  top:0%;
  left: 6%
}
.charainfo_mina {
  top:0%;
  left: 6%
}
.charainfo_kaz {
  top:4%;
  left: 7%
}
.charainfo_wan {
  top:4%;
  left: 5%
}

.charainfo_earth {
  margin-top: -3%;
  left: 2%
}

.charainfo_kyoshiro {
  margin-top: -8%;
  left: 7%
}

.charainfo_jubei,
.charainfo_ukyo {
  margin-top: 3%;
  left: 15%
}

.charainfo_tam {
  margin-top: -4%;
  left: 12%
}

.charainfo_charl {
  margin-top: 0;
  left: 22%
}

.charainfo_kibagami {
  margin-top: 0;
  left: 12%
}

.charainfo_shiki {
  left: 8%
}

.charainfo_yoshitora {
  margin-top: 4%;
  left: 3%
}

.charainfo_darli {
  margin-top: 7%;
  left: 21%
}

.charainfo_wu {
  margin-top: 7%;
  left: 18%
}

.characterinfowrp {
  position: absolute;
  display: inline-block;
  height: auto;
  right: 0
}

.characterswrp_infoa {
  position: relative;
  right: 0;
  width: 35%
}

.story_kurama {
  position: absolute;
  right: -15%
}

.story_kuramaprf {
  position: absolute;
  width: 7%;
  right: 36%;
  background-color: rgba(0, 0, 0, .7);
  padding: 2% 1%;
  z-index: 7
}

	.charainfo_sogetsu {
  top:6%;
  left: -6%
}
.charainfo_iroha {
  top:0%;
  left: -13%
}
.charainfo_warden {
  top:0%;
  left: -8%
}
.charainfo_hibiki {
  top:0%;
  left:5%
}
.charainfo_amakusa {
  top:-5%;
  left:-7%
}

@media screen and (min-width:320px) and (max-width:768px) {
  .story_kuramaprf {
    position: absolute;
    right: inherit;
    width: 15%;
    left: 5%;
    background-color: rgba(0, 0, 0, .7);
    padding: 2% 1%;
    z-index: 7
  }

  .storykuramawrp {
    position: relative;
    height: 600px
  }

  .story_kurama {
    position: relative;
    right: -15%
  }

  .moviewrp,
  .storywrp {
    position: relative;
    height: auto
  }

  .moviewrp {
    margin-top: 10%;
    min-height: none
  }

  .movietextarea {
    margin-top: 2%;
    font-size: 18pt;
    font-weight: 600;
    text-align: center
  }

  .movienewtag {
    position: absolute;
    margin-top: -54%;
    width: 12%;
    right: 2%
  }

  .movielist {
    position: relative;
    margin-bottom: 10%;
    width: 100%
  }

  .movielist li {
    float: none;
    width: 100%;
    margin-bottom: 5%;
    margin-right: 2.2%
  }

  .charainfo_haoh {
    width: 80%;
    left: -20px
  }

  .charainfo_nako {
    width: 67%;
    left: 0
  }

  .charainfo_wan {
    width: 120%;
  top:4%;
  left: -15%
}
  .charainfo_hibiki {
  top:0%;
  left:-5%
}
  .charainfo_hanzo {
    width: 50%;
    left: 0
  }

  .charainfo_kura {
    width: 100%;
    left: -15%
  }
    .charainfo_rim {
    width: 100%;
    left: -15%
  }
    .charainfo_basara {
    width: 100%;
    top:4%;
    left: -19%
  }
.charainfo_mina {
  top:6%;
  left: -5%
}
	.charainfo_sogetsu {
  top:6%;
  left: -10%
}
		.charainfo_iroha {
  top:6%;
  left: -14%
}
  		.charainfo_warden {
  top:6%;
  left: -14%
}
  .charainfo_earth {
    width: 120%;
    left: -15%
  }

  .charainfo_gal {
    width: 95%;
    left: -12%
  }

  .charainfo_ukyo {
    width: 60%;
    left: 0
  }
.charainfo_kaz {
  top:2%;
  left: 0%
}
  .charainfo_kaz {
  top:2%;
  left: 0%
}
  .charainfo_jubei {
    width: 80%;
    left: -5%
  }

  .charainfo_tam {
    width: 80%;
    left: 0
  }

  .charainfo_charl {
    width: 65%;
    left: 0
  }

  .charainfo_kibagami {
    width: 85%;
    left: 0
  }

  .charainfo_shiki {
    width: 72%;
    left: -16%
  }

  .charainfo_yoshitora {
    width: 95%;
    left: -20%
  }

  .charainfo_kyoshiro {
    width: 100%;
    left: -10%;
    margin-top: 0
  }

  .charainfo_darli {
    width: 58%;
    left: 0
  }

  .charainfo_wu {
    width: 76%;
    left: 0
  }

  .characterinfowrp {
    position: relative;
    display: inline-block;
    height: auto;
    right: 0
  }

  .characterswrp_infoa {
    position: relative;
    right: 0;
    width: 100%
  }
  .charainfo_amakusa {
  top:-5%;
  left:-10%
}
}

.charawrap_right_up_haoh {
  height: 450px
}

.charawrap_right_up_earth {
  height: 575px
}

.charawrap_right_up_ukyo {
  height: 5in
}

.charawrap_right_up_kyoshiro {
  height: 510px
}

.charawrap_right_up_jubei {
  height: 35pc
}

.charawrap_right_up_kibagami {
  height: 520px
}

.charawrap_right_up_shiki {
  height: 430px
}

.charawrap_right_up_yoshitora {
  height: 550px
}

.charawrap_right_up_wu {
  height: 5in
}

.charawrap_right_up_nako {
  height: 460px
}

.charawrap_right_up_darli {
  height: 35pc
}

.charawrap_right_up_hanzo {
  height: 520px
}

.spbackimg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 7
}

.snswrp {
  right: 0
}

.snswrp,
.sqc {
  position: absolute
}

.sqc {
  top: -3px;
  display: inline-block;
  padding: .6em .6em .6em 2.2em;
  z-index: 39
}

.sqc:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transform: scaleY(3.3) perspective(.6em) rotateX(3deg);
  transform-origin: bottom right
}

.atari {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 14
}

.overlay {
  background: rgba(0, 0, 0, .9)
}

.overlay,
.overlay.close {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  z-index: 47
}

.overlay.close {
  background: #000;
  opacity: 0
}

.overlay.open {
  visibility: visible;
  height: 100%
}

.overlay.open li,
.overlay.spmenulogo {
  -webkit-animation: a .5s ease forwards;
  animation: a .5s ease forwards;
  -webkit-animation-delay: .35s;
  animation-delay: .35s
}

.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}

.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  animation-delay: .45s
}

.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}

.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
  animation-delay: .55s
}

.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}

.gnavilist {
  position: relative;
  height: auto;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: Noto Sans Japanese, sans-serif;
  font-weight: 600;
  font-size: 18pt;
  color: #fff;
  text-align: center;
  margin: 55% auto;
  list-style: none
}

.gnavilist li {
  min-height: 40px;
  margin-bottom: 5%;
  opacity: 0
}

.gnavilist li,
.gnavilist li a {
  display: block;
  position: relative
}

.gnavilist li a {
  color: #fff;
  text-decoration: none;
  overflow: hidden
}

.snslist_drw {
  position: relative;
  width: 80% !important;
  margin: 0 auto !important;
  color: #fff;
  font-size: 10pt !important;
  font-weight: 600;
  text-align: center
}

.snslist_drw li {
  position: relative;
  float: left;
  width: 8%;
  margin-left: 20px
}

.snslist_drw li:nth-child(6) {
  margin-right: -20%
}

@-webkit-keyframes a {
  0 {
    opacity: 0;
    left: 20%
  }

  to {
    opacity: 1;
    left: 0
  }
}

@keyframes a {
  0 {
    opacity: 0;
    left: 20%
  }

  to {
    opacity: 1;
    left: 0
  }
}

.button_containerwrp {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 65px;
  height: 47px;
  background-color: rgba(0, 0, 0, .5);
  z-index: 48
}

.button_container.close {
  position: fixed;
  top: 2%;
  right: 3%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 17
}

.button_container span {
  background: #fff;
  border: 0;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;
  z-index: 47
}

.button_container span:nth-of-type(2) {
  top: 11px
}

.button_container span:nth-of-type(3) {
  top: 22px
}

.productsitemwrp_pc {
  position: relative;
  height: auto;
  min-height: 377px;
  margin-bottom: 3%
}

.storebtn {
  position: absolute;
  margin-top: 95px;
  right: 50px
}

.storebtn li a:hover {
  opacity: .8;
  -webkit-transition: all .2s;
  transition: all .2s
}

.productsitemwrp_sp {
  position: relative;
  margin-bottom: 5%
}

.headlang {
  position: relative;
  width: 600px;
  margin: 0 auto;
  color: #fff;
  font-weight: 600;
  font-size: 15pt;
  z-index: 17
}

.headlang li {
  float: left;
  width: 14%;
  margin-right: 3%;
  padding-right: 3%;
  padding-left: 2%;
  border-right: 1px solid #fff
}

.headlang li:first-child {
  margin-top: 0;
  margin-right: 0
}

.headlang li:last-child {
  margin-right: -20%
}

.csslide {
  position: relative;
  margin-top: 5pc;
  width: 60pc;
  margin-left: 6px;
  z-index: 36
}

.csslide li img {
  border: 1px solid #fff
}

.shoplist li {
  float: left;
  margin-right: 2%
}

.shoplist li:last-child {
  margin-right: -5%
}

.fshoptextarea {
  font-weight: 600;
  text-align: center;
  margin-bottom: 1%
}

.fshoptextarea br {
  display: none
}

.movtit {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 3%
}

@media screen and (min-width:320px) and (max-width:768px) {
  .movtit {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 3%
  }

  .fshoptextarea {
    font-size: 16pt;
    font-weight: 600;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 3%
  }

  .fshoptextarea br {
    display: block
  }

  .shoplist li {
    float: left;
    margin-bottom: 4%
  }

  .shoplist li,
  .shoplist li:last-child {
    margin-right: 0
  }

  .csslide {
    position: relative;
    margin-top: 20px;
    width: 265%;
    margin-left: -27%;
    margin-bottom: 5%
  }

  .csslide li {
    width: 30%
  }

  .button_container {
    top: 20px;
    width: 45px;
    z-index: 48
  }

  .button_container,
  .button_container.close {
    position: fixed;
    right: 3%;
    height: 27px;
    cursor: pointer
  }

  .button_container.close {
    top: 2%;
    width: 35px;
    z-index: 17
  }

  .button_container span {
    background: #fff;
    border: 0;
    height: 3px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
    z-index: 47
  }

  .button_container span:nth-of-type(2) {
    top: 11px
  }

  .button_container span:nth-of-type(3) {
    top: 22px
  }

  .storebtn {
    position: absolute;
    margin-left: 4%;
    margin-top: 120%
  }

  .storebtn li {
    float: left;
    width: 105%;
    margin-bottom: 1%
  }
}

.spmenulogo {
  width: 80%;
  margin: 10% auto
}

.spmenu_subtext {
  color: #c5a700
}

.spreserve {
  margin-left: 3%;
  width: 111%
}

.charasp,
.charasp2 {
  position: relative;
  width: 143%;
  height: auto;
  margin-left: -20%
}

.charasp2 {
  position: relative;
  margin-top: -12%
}

.video1 {
  position: fixed;
  z-index: 1
}

.video2 {
  position: relative;
  top: 0;
  left: 0;
  width: 1848px;
  height: 65pc;
  background-size: contain;
  z-index: 57
}

@media screen and (min-width:650px) and (max-width:1100px) {

  .video1,
  .video2 {
    display: none
  }

  .topbackimg {
    position: absolute;
    background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/toppage/top_lgback.png);
    z-index: 7
  }

  .topbackimg,
  .topbackimg2 {
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center top
  }

  .topbackimg2 {
    position: fixed;
    background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/toppage/top_lgback2.png);
    background-attachment: fixed;
    z-index: 6
  }
}

.productsnotice {
  margin-top: 0;
  line-height: 1.6em;
  text-align: justify
}

@media screen and (min-width:320px) and (max-width:768px) {
  .topbackimg {
    display: none
  }

  .productsnotice {
    line-height: 1.6em;
    font-size: 11pt;
    padding-left: 3%;
    padding-right: 3%
  }
}

.fprotume {
  position: absolute;
  width: 100%;
  margin-top: -50px;
  text-align: center
}

.fprotume li {
  float: left;
  width: 31%;
  margin-right: 3%
}

.fprotume li:last-child {
  margin-left: 1%;
  margin-right: -20%
}

#unchor1 {
  position: relative;
  top: -60px
}

.glayout {
  opacity: .5
}

.spindex {
  position: relative;
  width: 90%;
  margin: 50px auto
}

.spindex li {
  float: left;
  width: 14%;
  margin-right: 3.1%;
  margin-bottom: 3.1%
}

.spindex li:nth-child(6n) {
  margin-right: -20%
}

.spback {
  position: fixed;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  background-image: url(https://www.snk-corp.co.jp/official/samuraispirits/img/toppage/spback.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover
}

.sptopback {
  position: absolute;
  top: 6%;
  width: 100vw;
  height: auto;
  z-index: 36
}

.spmovie {
  position: relative;
  width: 80%;
  margin: 0 auto;
  z-index: 49
}

.spmovie img {
  border: 2px solid #fff
}

.sprelease {
  position: relative;
  margin: 3% auto;
  width: 80%
}
.sprelease_trial {
  position: relative;
  margin: 3% auto;
  width: 86%;
}

.spproductsbtn {
  position: relative;
  text-align: center;
  margin: 5% auto;
  z-index: 53;
  width: 100%;
}

.spvariousbnr {
  position: relative;
  width: 100%;
  margin: 7% auto
}

.sec2_aboutsp_img {
  margin-top: 5%;
  margin-bottom: 30px;
  width: 134%;
  margin-left: -17%
}

.sec2_aboutsp_kurama {
  position: absolute;
  margin-top: -22%;
  right: -38%;
  z-index: 33
}

.sec2_spabout_head {
  margin-bottom: 30px
}

.csslidesp {
  position: relative;
  margin-bottom: 5%;
  z-index: 36
}

.shoptit {
  margin-top: 10%
}

.mbspace {
  margin-bottom: 30px
}

.mtspace {
  margin-top: 30px
}

.shopwrp a,
.shopwrp a:hover {
  -webkit-transition: all .2s;
  transition: all .2s
}

.shopwrp a:hover {
  opacity: .8
}

.gout {
  opacity: .5
}

.buttonclose {
  background-color: #fff;
  opacity: .6;
  width: 25pc;
  margin: 0 auto;
  text-align: center;
  padding: 1em
}

#munchor {
  position: relative;
  padding-bottom: 50px
}

.scrlbtn {
  font-weight: 600
}

.newsimg,
.sec5_gamesystem3_tit {
  margin-bottom: 5%
}

.storymode_pc {
  margin-top: 12%;
  margin-left: -2.5%
}

.storymode_sp {
  position: relative;
  margin-top: 8%;
  margin-left: -2.5%
}

#video-background {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 2;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 54;
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  width: 25pc;
  background: #fff;
  border: 1px solid #807b45;
  overflow: hidden
}

.pace,
.pace .pace-progress {
  top: 0;
  -webkit-transition: all .3s;
  transition: all .3s
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 25pc;
  position: fixed;
  z-index: 38;
  display: block;
  position: absolute;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #807b45
}

.pace.pace-inactive {
  display: none
}

#video-background2 {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto
}

#video-background3 {
  width: 405px;
  height: 230px;
  border: 1px solid #fff
}

.ytoverlay {
  position: absolute;
  width: 405px;
  height: 230px
}

#topvideo2 {
  position: absolute;
  background-position: center center;
  background-size: cover;
  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width: 100vw;
  left: 0;
  text-align: center;
  z-index: 2
}
.updatedicon {
  position: absolute;
  bottom: 135px;
  left:220px;
  z-index: 39;
}
			
			
			
/*TABLE*/

.row-head {
	border-collapse: collapse;
	vertical-align: middle;
	width: 100%;
}

.row-head th,
.row-head td {
	border: 1px solid #333;
	padding: 8px;
	font-weight: 500;
	font-size: 12pt;
}

.row-head th {
	background: #807B45;
	font-weight: 500;
	font-size: 12pt;
	color: #fff;
}

.row-head label {
	line-height: 34px;
	margin: 0;
}

.spread {
	margin-top: 30px;
	margin-bottom: 10px;
}

.spread {
	margin-top: 50px;
	margin-bottom: 10px;
}
.newsimg_a {
  position: relative;
  width: 640px;
  margin: 10% auto;
}

.shoplist2 {
  margin-top: 10%;
}
.shoplist2 li {
  float: left;
  border:1px solid #888;
  padding-bottom:3%;
  margin-right: 3.2%;
  margin-bottom: 4%;
}
.shoplist2 li:nth-child(3n) {
  margin-right: -50px;
}
.shopbtn {
  position: relative;
  width: 90%;
  margin: 5% auto;
  height: 60px;
  padding:2% 2%;
  background-color: #FF9400;
}


.shoplist2 li a:hover {
  opacity: 0.5;
    text-decoration: none;
}
.shoplist2 li a:visited {
  opacity: 0.5;
    text-decoration: none;
}

.shopbuytextarea {
  font-size: 24pt;
  font-weight: 600;
  color:#fff;
  text-align: center;
}
.shopbuytextarea_s {
  margin-top: 3%;
  font-size: 16pt;
  font-weight: 600;
  color:#fff;
  text-align: center;
}


@media screen and (min-width:320px) and ( max-width:768px) {
  .shoplist2 {
  margin-top: 10%;
  width: 100%;
}
.shoplist2 li {
  float: left;
  width: 48%;
  border:1px solid #888;
  margin-right: 3.2%;
  margin-bottom: 4%;
}
  .shoplist2 li:nth-child(3) {
  margin-right:3.2%;
}
.shoplist2 li:nth-child(2n) {
  margin-right:-50px;
}

  
  .newsimg_a {
  position: relative;
  width: 100%;
  margin: 10% auto;
}
}
  
.count {
  position: absolute;
  right: 50px;
  top: 55px;
  z-index: 50;
   -webkit-transition: all .3s;
  transition: all .3s
}
@media screen and (min-width:320px) and ( max-width:768px) {
  .count {
  position: relative;
   right: inherit;
  top: 0;
    width: 85%;
    margin: 0 auto;
    margin-bottom: 30px;
  z-index: 50;
}
}

@media screen and (min-height:320px) and ( max-height:680px) {
.count {
  position: absolute;
  right: 30px;
  top: 55px;
  z-index: 50;
  width: 11%;
  -webkit-transition: all .3s;
  transition: all .3s
}
}


@media screen and (min-width:320px) and ( max-width:960px) {
	.row-head thead {
		display: none;
	}

	.row-head tr,
	.row-head td {
		display: block;
		width: auto;
		font-size: 13pt;
	}

	.row-head tr {
		border: 1px solid #333;
		border-radius: 0;
		margin-bottom: 20px;
		padding: 8px 8px 0;
	}

	.row-head td {
		border: none;
		border-bottom: 1px solid #333;
		display: flex;
		justify-content: space-between;
		text-align: left;
	}
	.row-head td:last-child {
		border-bottom: none;
	}
	.row-head td::before {
		content: attr(aria-label);
		display: inline-block;
		font-weight: bold;
		float: left;
		text-align: left;
		padding-right: 20px;
		white-space: nowrap;
	}

	.row-head td.bt-area::before {
		display: none;
	}
	.row-head td.bt-area a {
		background: #007aff;
		border-radius: 5px;
		color: #fff;
		display: inline-block;
		flex: 1;
		height: 40px;
		margin: 0 2px;
		overflow: hidden;
		width: auto;
	}
	.row-head td.bt-area a::before {
		align-items: center;
		content: attr(aria-label);
		display: flex;
		font-size: 14px;
		height: 100%;
		justify-content: center;
		line-height: 40px;
		width: 100%;
	}

	.row-head.header-check tr {
		padding-left: 40px;
		position: relative;
	}
	.row-head.header-check td:first-child {
		align-items: center;
		background: #fff;
		border-right: 1px solid #dbe1e8;
		border-bottom: none;
		bottom: 0;
		display: flex;
		justify-content: center;
		left: 0;
		padding: 0;
		position: absolute;
		text-align: center;
		top: 0;
		width: 40px;
	}
	.row-head.header-check td:first-child::before {
		display: none;
	}

}



  /*MORDAL*/
#c-modal_bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
}
#c-modal {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 9999;
 
}
#c-modal_close {
  position: absolute;
  top:2px;
  right:17px;
  cursor: pointer;
  z-index: 1000;
}



.closebtn {
  width: 40%;
}

.campleft {
  position: relative;
  padding-top:4%;
  padding-left:3%;
  width: 55%;
  z-index: 1200;
}

.campright {
  margin-top: 0%;
  width: 45%;
}

.camp01 {
  position: relative;
}

.camp02 {
  position: relative;
  margin-top: -10%;
  right:58px;
}

.camp03 {
  margin-top: 3%;
  font-weight: 500;
  text-align: justify;
  color:#000;
  line-height: 1.7em;
}

.camp04 {
  position: relative;
  margin-bottom: 15%;
  border:1px solid #000;
  width: 485px;
  margin: 10% auto;
  cursor: pointer;
}


.tb {
  font-weight: 600;
  font-size: 15pt;
}

.camp06 {
  position: relative;
  margin-top: 5%;
  left:6%;
}

.charainfo_shizu {
  margin-top: 5%;
  margin-left: 0%;
}
@media screen and (min-width:320px) and ( max-width:768px) {
    #c-modal {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 9999;
    width: 90%;
    height: auto;
    transform: translate(-50%, -50%);
}
  .charainfo_shizu {
  margin-left: -17%;
}
  .camp04 {
  position: relative;
  margin-top: 10%;
  margin-bottom: 15%;
  border:1px solid #000;
  width: 100%;
}
  .camp03 {
  margin-top: 3%;
  font-weight: 500;
  text-align: justify;
  color:#000;
    font-size: 12pt;
}
  #c-modal_close {
  position: absolute;
  top:2px;
  right: -88px;
  cursor: pointer;
  z-index: 1500;
}
  .campleft {
  padding-top:5%;
  padding-left:0%;
  width: 95%;
  margin: 0 auto;
}
  .campright {
  margin-top: 8%;
  width: 100%;
}
  .camp02 {
  position: relative;
  right:-0%;
  width: 100%;
}
  .camp06 {
  position: relative;
  margin-top: 0;
  left:-2%;
    padding:5%;
}
}
.scrl {
 text-align: center;
}




.textarea_news_m {
  font-size: 12pt;

}
  

.camppc1 {
  position: absolute;
  margin-top: -58px;
  right:10px;
}

.camppc2 {
  position: absolute;
   margin-top: -105px;
  right:10px;
}

.campwrppc {
  position: relative;
  width: 664px;
  height: 704px;
}

.campwrpsp {
  position: relative;
  width: 100%;
  height: 904px;
  z-index: 100;
}

.campsp1 {
   position: absolute;
  width: 32%;
   margin-top:-13%;
  right:3%;
  z-index: 100;
}

.campsp2 {
   position: absolute;
  width: 32%;
   margin-top: -24%;
  right:3%;
   z-index: 100;
}



.patchtextarea {
  font-size: 12pt;
  font-weight: 600;
  line-height: 1.6em
}

.mtsw {
  margin-top: 6%;
}

.season2wrp {
	margin-bottom: 7%;
}

.seasonbtn {
	position: absolute;
}

.ps4btn {
	right:40px;
	margin-top: 215px;
}

.xbxbtn {
	right:40px;
	margin-top: 285px;
}

.seasonbtnsp {
	position: absolute;
	width: 85%;
}

.season2spwrp {
	margin-bottom: 5%;
}
.textarea_charawrap {
  font-weight: 500;
  color:#000;
  width: 90%;
  margin: 0 auto;
}


@media screen and (min-width:320px) and ( max-width:768px) {
	.ps4btn {
	right:40px;
	margin-top: 120%;
}

.xbxbtn {
	right:40px;
	margin-top: 140%;
}
  .textarea_charawrap {
  font-weight: 500;
  color:#000;
  width: 100%;
  margin: 0 auto;
}
  .textarea_ss {
  font-size: 12pt;
  max-height: 999999px
}

}

.ls {
  letter-spacing: -0.08em;
}



.productlist {
	margin-top: 3%;

}

.productlist li {
	float: left;
	width: 31.5%;
	margin-right: 1.9%;
    margin-bottom: 2%;
}
.productlist li:nth-child(3n) {
	margin-right: -30%;
}


.productlist_season {
	margin-top: 10%;

}

.productlist_season li {
	float: left;
	width: 31.5%;
	margin-right: 1.9%;
    margin-bottom: 2%;
}
	.productlist_season li:nth-child(3){
		margin-right: -30%;
	}

.productolist_textarea {
  margin-top: 5%;
  font-weight: 500;
	padding-bottom: 2%;
	margin-bottom: 0%;
	color: #000;

}


.prmb {
	padding-bottom: 8%;
	margin-bottom: 8%;
	border-bottom: 1px dotted #fff;
}

.products_store_ps4 {
	margin-bottom: 7%;
}

.productstoretokuten_souki_textarea {
	line-height: 1.7em;
	font-size: 1.7vw;
	font-weight: 800;
	color:dodgerblue;
	margin-bottom: 0;
}

.productstoretokuten_syokai_textarea {
	line-height: 1.7em;
	font-size: 1.7vw;
	margin-bottom: 0;
	font-weight: 800;
	color: red;
}

.productlisttextarea {
	color: #fff;
}

.productlisttextarea a:link {
	color: #fff;
}

.productlisttextarea a:hover {}

.productlisttextarea a:visited {
	color: #fff;
}


@media screen and (min-width:320px) and (max-width:768px) {

.productlist {
		margin-top: 5%;

	}

	.productlist li {
		float: left;
		width: 49%;
		margin-right: 2.5%;
		margin-bottom: 2.5%;
	}
.productlist li:nth-child(3n) {
		margin-right: 2.5%;
	}
	.productlist li:nth-child(2) {
		margin-right: -40%;
	}
  .productlist li:nth-child(4) {
		margin-right: -40%;
	}

  



	.productstoretokuten_souki_textarea {
		line-height: 1.7em;
		font-size: 4vw;
		font-weight: 800;
		color: #0065AF;
		margin-bottom: 0;
	}

	.productstoretokuten_syokai_textarea {
		line-height: 1.7em;
		font-size: 4vw;
		margin-bottom: 0;
		font-weight: 800;
		color: red;
	}

	.productsleft {
		position: relative;
		width: 100%;
	}

	.productsright {
		width: 100%;
	}

	.productsleftimg {
		width: 90%;
		margin: 0% auto;
	}

	.productstittextarea {
		line-height: 1.7em;
		font-size: 4.1vw;
		font-weight: 800;
		text-align: center;
		color: #fff;
		margin-bottom: 0;
	}

	.productstitsubtextarea {
		line-height: 1.7em;
		font-size: 3.1vw;
		font-weight: 600;
		color: #fff;
		text-align: center;
	}


}

.productlistwrp {
  border:5px solid #999;
  padding:8% 8%;
}

.products_store_epicgames {
  margin-bottom: 7%;
}

.bdr {
  border:2px solid red;
}

.seasonpasslist {
	margin-top: 5%;
}
.seasonpasslist li {
	width: 100%;
	margin-bottom: 6%;
}


@media screen and (min-width:320px) and ( max-width:768px) {

	
	.productlist_season {
	margin-top: 10%;

}

.productlist_season li {
	float: left;
		width: 49%;
		margin-right: 2.5%;
		margin-bottom: 2.5%;
}
		.productlist_season li:nth-child(3){
		margin-right: 0;
	}

	.productlist_season li:nth-child(2n){
		margin-right: -30%;
	}
	
		.seasonpasslist {
	margin-top: 5%;
}
.seasonpasslist li {
	width: 100%;
	margin-bottom: 6%;
}

}
.blank {
  
}