@charset "UTF-8";
/*
--------------------------------------------------
  variable
--------------------------------------------------
*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
/* line 9, ../sass/foundation/_reset.scss */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* line 30, ../sass/foundation/_reset.scss */
body {
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* line 36, ../sass/foundation/_reset.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
/* line 41, ../sass/foundation/_reset.scss */
li {
  list-style: none;
}
/* line 45, ../sass/foundation/_reset.scss */
blockquote, q {
  quotes: none;
}
/* line 49, ../sass/foundation/_reset.scss */
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
/* line 55, ../sass/foundation/_reset.scss */
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* change colours to suit your needs */
/* line 64, ../sass/foundation/_reset.scss */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
/* line 71, ../sass/foundation/_reset.scss */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
/* line 78, ../sass/foundation/_reset.scss */
del {
  text-decoration: line-through;
}
/* line 82, ../sass/foundation/_reset.scss */
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
/* line 87, ../sass/foundation/_reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border colour to suit your needs */
/* line 93, ../sass/foundation/_reset.scss */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
/* line 102, ../sass/foundation/_reset.scss */
input, select {
  vertical-align: middle;
}
/* line 106, ../sass/foundation/_reset.scss */
*, *::before, *::after {
  box-sizing: border-box;
}
/*
--------------------------------------------------
	base
--------------------------------------------------
*/
/*google font*/
@font-face {
  font-display: swap;
  font-family: Noto Sans JP;
  font-weight: 400;
  src: url(https://www.capcom-games.com/common/font/NotoSansJP-Regular.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Noto Sans JP;
  font-weight: 700;
  src: url(https://www.capcom-games.com/common/font/NotoSansJP-Bold.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Noto Sans JP;
  font-weight: 900;
  src: url(https://www.capcom-games.com/common/font/NotoSansJP-Black.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-weight: 400;
  src: url(https://www.capcom-games.com/common/font/Roboto-Regular.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-weight: 700;
  src: url(https://www.capcom-games.com/common/font/Roboto-Bold.woff2) format("woff2");
}
@font-face {
  font-display: swap;
  font-family: Roboto;
  font-weight: 900;
  src: url(https://www.capcom-games.com/common/font/Roboto-Black.woff2) format("woff2");
}
/*base style*/
/* line 51, ../sass/foundation/_base.scss */
html, body {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}
/* line 57, ../sass/foundation/_base.scss */
body {
  position: relative;
  font-family: "Noto Sans JP", "Avenir", "Helvetica Neue", "Helvetica", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.1458333333vw;
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #ddd;
  background: #000;
  animation: bggradient 20s ease infinite;
}
@media screen and (max-width: 768px) {
  /* line 57, ../sass/foundation/_base.scss */
  body {
    font-size: 2.34375vw;
  }
  /* line 83, ../sass/foundation/_base.scss */
  body:before {
    background: url(../img/bg_main_sp.png) no-repeat center;
    background-size: 100%;
  }
}
@media screen and (max-width: 480px) {
  /* line 57, ../sass/foundation/_base.scss */
  body {
    font-size: 1.4rem;
  }
  /* line 90, ../sass/foundation/_base.scss */
  body:before {
    background-position: center top;
    background-size: cover;
  }

	
	.gallery-thumbs{ display: none; }
	
	main .hero-left button{
		margin: 0 !important;
		font-size: .8rem;
	}
}
@keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* for Firefox */
/* line 120, ../sass/foundation/_base.scss */
a {
  transition: .3s all;
  color: #fff;
  text-decoration: none;
}
/* line 124, ../sass/foundation/_base.scss */
a:hover {
  color: #9864e8;
}
/* line 129, ../sass/foundation/_base.scss */
img {
  display: block;
  vertical-align: bottom;
}
@media screen and (max-width: 768px) {
  /* line 129, ../sass/foundation/_base.scss */
  img {
    width: 100%;
  }
	
	.gallery-thumbs{ display: none;}
	
	.hero_ttl{
		left: 9vw !important;
	}
}
/* line 137, ../sass/foundation/_base.scss */
h2 {
  font-size: 10rem;
  line-height: 1.8;
  font-weight: 400;
}
@media screen and (max-width: 1400px) {
  /* line 137, ../sass/foundation/_base.scss */
  h2 {
    font-size: 3.75vw;
  }
}
@media screen and (max-width: 768px) {
  /* line 137, ../sass/foundation/_base.scss */
  h2 {
    font-size: 7.8125vw;
  }
	
	body{
		overflow-x: hidden !important;
	}
}
@media screen and (max-width: 480px) {
  /* line 137, ../sass/foundation/_base.scss */
  h2 {
    font-size: 4rem;
  }
}
/* line 152, ../sass/foundation/_base.scss */
h3 {
  font-size: 2.4rem;
  line-height: 1.8;
}
@media screen and (max-width: 1400px) {
  /* line 152, ../sass/foundation/_base.scss */
  h3 {
    font-size: 1.0416666667vw;
  }
}
@media screen and (max-width: 768px) {
  /* line 152, ../sass/foundation/_base.scss */
  h3 {
    font-size: 3.125vw;
  }
}
@media screen and (max-width: 480px) {
  /* line 152, ../sass/foundation/_base.scss */
  h3 {
    font-size: 1.6rem;
  }
}
/* line 166, ../sass/foundation/_base.scss */
h4 {
  font-size: 1.8rem;
}
@media screen and (max-width: 1400px) {
  /* line 166, ../sass/foundation/_base.scss */
  h4 {
    font-size: 0.8333333333vw;
  }
}
@media screen and (max-width: 768px) {
  /* line 166, ../sass/foundation/_base.scss */
  h4 {
    font-size: 2.6041666667vw;
  }
}
@media screen and (max-width: 480px) {
  /* line 166, ../sass/foundation/_base.scss */
  h4 {
    font-size: 1.4rem;
  }
}
/* line 178, ../sass/foundation/_base.scss */
.sup {
  vertical-align: super;
  font-size: 70%;
}
/* line 182, ../sass/foundation/_base.scss */
.sub {
  vertical-align: sub;
  font-size: 70%;
}
/* line 187, ../sass/foundation/_base.scss */
.SP {
  display: none;
}
@media screen and (max-width: 768px) {
  /* line 187, ../sass/foundation/_base.scss */
  .SP {
    display: block !important;
  }
}
/* line 194, ../sass/foundation/_base.scss */
.PC {
  display: block;
}
@media screen and (max-width: 768px) {
  /* line 194, ../sass/foundation/_base.scss */
  .PC {
    display: none !important;
  }
	
	.hero_ttl{
		bottom: -47vw;
	}
	
}
/* line 201, ../sass/foundation/_base.scss */
.text-right {
  text-align: right;
}
/* line 205, ../sass/foundation/_base.scss */
.text-center {
  text-align: center;
}
/* line 209, ../sass/foundation/_base.scss */
.text-bold {
  font-weight: 600;
}
/* line 213, ../sass/foundation/_base.scss */
.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s;
}
/*
--------------------------------------------------
  header
--------------------------------------------------
*/
/* line 8, ../sass/layout/_header.scss */
.header {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 999;
  width: 100%;
  background: linear-gradient(0deg, rgba(61, 61, 61, 0) 0%, rgba(10, 10, 10, 0.5) 100%);
}
/* line 15, ../sass/layout/_header.scss */
.header_inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
}
@media screen and (max-width: 1024px) {
  /* line 15, ../sass/layout/_header.scss */
  .header_inner {
    height: 60px;
  }
}
/* line 26, ../sass/layout/_header.scss */
.header_logo {
  width: 186px;
  margin: 0 24px;
}
@media screen and (max-width: 1400px) {
  /* line 26, ../sass/layout/_header.scss */
  .header_logo {
    width: 9.6875vw;
  }
  /* line 31, ../sass/layout/_header.scss */
  .header_logo img {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  /* line 26, ../sass/layout/_header.scss */
  .header_logo {
    width: 28.6458333333vw;
  }
}
/* line 39, ../sass/layout/_header.scss */
.header_lang {
  display: flex;
}
/* line 41, ../sass/layout/_header.scss */
.header_lang a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.2083333333vw;
  height: 80px;
  background: #666;
  color: #000;
}
/* line 49, ../sass/layout/_header.scss */
.header_lang a:hover {
  background: #000;
  color: #9864e8;
}
/* line 54, ../sass/layout/_header.scss */
.header_lang a.active {
  background: #000;
  color: #9864e8;
  pointer-events: none;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  /* line 39, ../sass/layout/_header.scss */
  .header_lang {
    width: 31.25vw;
  }
  /* line 63, ../sass/layout/_header.scss */
  .header_lang a {
    width: 39.0625vw;
    height: 16.9270833333vw;
  }
}
/*
--------------------------------------------------
  main
--------------------------------------------------
*/
/* line 9, ../sass/layout/_main.scss */
.main {
  position: relative;
}
/*
--------------------------------------------------
  footer
--------------------------------------------------
*/
/* line 9, ../sass/layout/_footer.scss */
.footer {
  background: #373737;
  padding: 1.0416666667vw 2.0833333333vw;
  text-align: center;
  font-size: 0.7291666667vw;
}
/* line 14, ../sass/layout/_footer.scss */
.footer_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* line 19, ../sass/layout/_footer.scss */
.footer .cookiePolicy {
  position: relative;
  padding: 0 1.0416666667vw;
}
/* line 22, ../sass/layout/_footer.scss */
.footer .cookiePolicy:after {
  content: '';
  display: inline-block;
  width: 0.0520833333vw;
  height: 1.0416666667vw;
  background: #fff;
  vertical-align: middle;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -0.5208333333vw;
}
/* line 35, ../sass/layout/_footer.scss */
.footer .copyright {
  padding: 0 1.0416666667vw;
}
@media screen and (max-width: 768px) {
  /* line 9, ../sass/layout/_footer.scss */
  .footer {
    padding: 2.6041666667vw 5.2083333333vw;
  }
  /* line 40, ../sass/layout/_footer.scss */
  .footer .cookiePolicy, .footer .copyright {
    font-size: 2.6041666667vw;
    padding: 0 2.6041666667vw;
  }
  /* line 45, ../sass/layout/_footer.scss */
  .footer .cookiePolicy:after {
    height: 2.6041666667vw;
    margin-top: -1.0416666667vw;
  }
}
/*
--------------------------------------------------
  sontainer
--------------------------------------------------
*/
/* line 9, ../sass/component/_container.scss */
.container {
  padding: 6.25vw 0;
}
/* line 11, ../sass/component/_container.scss */
.container_inner {
  padding: 0 5.2083333333vw;
}
/*
--------------------------------------------------
  hero
--------------------------------------------------
*/
/* line 9, ../sass/component/_hero.scss */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}
/* line 13, ../sass/component/_hero.scss */
.hero:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 14.5833333333vw;
	z-index: -2;
  background: linear-gradient(0deg, black 40%, rgba(0, 0, 0, 0) 100%);
}
@media screen and (max-width: 768px) {
  /* line 9, ../sass/component/_hero.scss */
  .hero {
    height: 135.3125vw;
  }
  /* line 24, ../sass/component/_hero.scss */
  .hero:before {
    height: 52.2916666667vw;
    background: linear-gradient(0deg, black 50%, rgba(0, 0, 0, 0) 100%);
  }
}
/* line 29, ../sass/component/_hero.scss */
.hero_wrap {
  position: relative;
	height: 50vw;
  /* padding: 0 3.125vw; */
}
@media screen and (max-width: 768px) {
  /* line 29, ../sass/component/_hero.scss */
  .hero_wrap {
    padding: 13.0208333333vw 5.2083333333vw 0;
  }
}
/* line 36, ../sass/component/_hero.scss */
.hero_bg {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
	height: 50vw;
  z-index: 99;
	background-image:
	
}
/* line 44, ../sass/component/_hero.scss */
.hero_item {
  position: relative;
  overflow: hidden;
  width: 100%;
	transition: all .1s ease-out;
	animation: bg_roop 10s linear infinite;
	animation-delay: 4s;

}
/* line 48, ../sass/component/_hero.scss */
.hero_item img {
  display: block;
  width: 100%;
	
	
}
/* line 52, ../sass/component/_hero.scss */
.hero_item:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  animation: heroanime 1s ease forwards;
}
/* line 61, ../sass/component/_hero.scss */
.hero_contents {
  padding-top: 8.3333333333vw;
  animation: herotextanime 1.5s forwards;
  animation-delay: 2.8s;
  opacity: 0;
	position: relative;
	z-index: 99;
	top: -80vw;
}
@media screen and (max-width: 768px) {
  /* line 61, ../sass/component/_hero.scss */
  .hero_contents {
    padding-top: 20.8333333333vw;
  }
}
/* line 70, ../sass/component/_hero.scss */
.hero_ttl {
  font-size: 1.5625vw;
  text-align: center;
  position: relative;
  top: -5vw;
	left: 39vw;
}
@media screen and (max-width: 768px) {
  /* line 70, ../sass/component/_hero.scss */
  .hero_ttl {
    font-size: 5.2083333333vw;
  }
}
/* line 77, ../sass/component/_hero.scss */
.hero_ttl_small {
  margin: 0 0 1.0416666667vw;
  overflow: hidden;
}
/* line 81, ../sass/component/_hero.scss */
.hero_ttl_logo {
  font-size: 0;
  overflow: hidden;
}
/* line 84, ../sass/component/_hero.scss */
.hero_ttl_logo:before {
  content: '';
  display: block;
  width: 20.2083333333vw;
  height: 3.6875vw;
  background: url(../img/sf_logo.png) no-repeat;
  background-size: 100%;
  margin: 0 auto 1.5625vw 8vw;
}
@media screen and (max-width: 768px) {
  /* line 94, ../sass/component/_hero.scss */
  .hero_ttl_logo:before {
    width: 58.59375vw;
    height: 10.4166666667vw;
  }
}
/* line 100, ../sass/component/_hero.scss */
.hero_ttl_main {
  font-size: 0;
  overflow: hidden;
}
/* line 103, ../sass/component/_hero.scss */
.hero_ttl_main:before {
  content: '';
  display: block;
  width: 28.0833333333vw;
  height: 13.0208333333vw;
  background: url(../img/mainttl.png) no-repeat;
  background-size: contain;
  margin: 0 auto 1.5625vw 5vw;
}
@media screen and (max-width: 768px) {
  /* line 113, ../sass/component/_hero.scss */
  .hero_ttl_main:before {
    width: 100%;
    height: 22.7864583333vw;
    margin: 0 auto 10.4166666667vw;
  }
}



.hero_ttl02 {
  font-size: 1.5625vw;
  text-align: center;
  position: absolute;
  top: 13vw;
	left: 24vw;
	z-index: 2;
}

.hero_ttl02 .hero_side{
	position: absolute;
	bottom: -3vw;
	left: 20%;
	z-index: 3;
}
@media screen and (max-width: 768px) {
  /* line 70, ../sass/component/_hero.scss */
  .hero_ttl02 {
    font-size: 5.2083333333vw;
  }
}
/* line 77, ../sass/component/_hero.scss */
.hero_ttl02 .hero_ttl_small {
  margin: 0 0 1.0416666667vw;
  overflow: hidden;
}
/* line 81, ../sass/component/_hero.scss */
.hero_ttl02 .hero_ttl_logo {
  font-size: 0;
  overflow: hidden;
}
/* line 84, ../sass/component/_hero.scss */
.hero_ttl02 .hero_ttl_logo:before {
  content: '';
  display: block;
  width: 28.2083333333vw;
  height: 4.6875vw;
  background: url(../img/sf_logo.png) no-repeat;
  background-size: 100%;
  margin: 0 auto 1.5625vw 8vw;
}
@media screen and (max-width: 768px) {
  /* line 94, ../sass/component/_hero.scss */
  .hero_ttl02 .hero_ttl_logo:before {
    width: 58.59375vw;
    height: 10.4166666667vw;
  }
}
/* line 100, ../sass/component/_hero.scss */
.hero_ttl02 .hero_ttl_main {
  font-size: 0;
  overflow: hidden;
}
/* line 103, ../sass/component/_hero.scss */
.hero_ttl02 .hero_ttl_main:before {
  content: '';
  display: block;
  width: 35.0833333333vw;
  height: 13.0208333333vw;
  background: url(../img/mainttl.png) no-repeat;
  background-size: contain;
  margin: 0 auto 1.5625vw 5vw;
}
@media screen and (max-width: 768px) {
  /* line 113, ../sass/component/_hero.scss */
  .hero_ttl02 .hero_ttl_main:before {
    width: 100%;
    height: 22.7864583333vw;
    margin: 0 auto 10.4166666667vw;
  }
}
/* line 120, ../sass/component/_hero.scss */
.hero_img {
  display: flex;
  justify-content: center;
  column-gap: 2.0833333333vw;
  animation: herotextanime 1s forwards;
  animation-delay: 3.4s;
  opacity: 0;
  position: absolute;
 
	left: 19vw;
	z-index: 9872835;
}
.position_01 {}
.position_02 {
  position: relative;
  top: 4vw;
}
.position_03 {}
.position_04 {
  position: relative;
  top: 4vw;
}
.position_05 {}
/* line 127, ../sass/component/_hero.scss */
.hero_img img {
  width: 10.25vw;
}
@media screen and (max-width: 768px) {
  .hero_img {
    top: -4vw;
  }
  /* line 131, ../sass/component/_hero.scss */
  .hero_img img {
    width: 15.625vw;
  }
  .light {
    bottom: 48vw !important;
    width: 150vw !important;
    height: 70vw !important;
  }
  .paintbg {
    height: 200vw;
    bottom: 90vw !important;
    left: -40vw;
  }
}
.paintbg {
  background: url("../img/paintbg.png") no-repeat;
  background-size: contain;
  width: 90vw;	
  height: 60vw;
  position: absolute;
  z-index: -2;
  bottom: -2vw;
	left: -18vw;
  opacity: 0;
  animation: herotextanime 1.5s forwards;
  animation-delay: 2.4s;
}
.light {
  background: url("../img/lightbg.png") no-repeat;
  background-size: contain;
  width: 90vw;
  height: 50vw;
  position: absolute;
  z-index: -1;
  bottom: 0vw;
  opacity: 0;
  animation: herotextanime 1.5s forwards;
  animation-delay: 2.4s;
	display: none;
}
/* line 136, ../sass/component/_hero.scss */
.hero_side {
  position: absolute;
  bottom: 14vw;
  left: 12%;
}
@media screen and (max-width: 768px) {
  /* line 136, ../sass/component/_hero.scss */
  .hero_side {
    display: block;
    position: relative;
    width: 90%;
    margin: 0 auto;
    right: 0;
	  left: 0;
    bottom: 39vw;
  }
	
	.paintbg{
		bottom: 62vw !important;
		left: -17vw !important;
		width: 130vw !important;
		height: 70vw !important;
		background-size: cover;
	}
}
/* line 145, ../sass/component/_hero.scss */
.hero_date {
  background: #109dbe;
  padding: 3.0416666667vw 1.5625vw;
  text-align: center;
  line-height: 1.8;
  animation: herotextanime 1.5s forwards;
  animation-delay: 4.2s;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  /* line 145, ../sass/component/_hero.scss */
  .hero_date {
    position: static;
    width: 100%;
    padding: 2.6041666667vw 3.90625vw;
    text-align: center;
  }
}
/* line 165, ../sass/component/_hero.scss */
.hero_date_release span {
  font-size: 180%;
}
/* line 169, ../sass/component/_hero.scss */
.hero_date_order {
  font-size: 175%;
}
/* line 172, ../sass/component/_hero.scss */
.hero_btn {
  opacity: 0;
  animation: herotextanime 1s forwards;
  animation-delay: 4s;
}
/* line 181, ../sass/component/_hero.scss */
.hero_chunli:before {
  animation-delay: .1s;
}
/* line 186, ../sass/component/_hero.scss */
.hero_dhalsim:before {
  animation-delay: .3s;
}
/* line 191, ../sass/component/_hero.scss */
.hero_honda:before {
  animation-delay: .6s;
}
/* line 196, ../sass/component/_hero.scss */
.hero_lily:before {
  animation-delay: .9s;
}
/* line 201, ../sass/component/_hero.scss */
.hero_ryu:before {
  animation-delay: 1.2s;
}
@keyframes herotextanime {
  from {
    opacity: 0;
    transform: translateY(4.1666666667vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroanime {
  from {
	  
    left: 0;
  }
  to {
    left: 100%;
  }
}
/*
--------------------------------------------------
  btn
--------------------------------------------------
*/
/* line 8, ../sass/component/_btn.scss */
.btn {
  position: relative !important;
  display: block !important;
  /* background: #109dbe; */
  border: #fff solid 4px;
  border-radius: 100px;
  text-align: center;
  padding: 0.78125vw 10.0416666667vw;
  margin-top: 2.0833333333vw;
  margin-bottom: 1.5625vw;
  font-size: 1.3541666667vw;
  font-weight: 700;
}
/* line 21, ../sass/component/_btn.scss 
.btn:before {
  content: 'CHECK!';
  position: absolute;
  display: flex;
  justify-content: center;
  color: #9864e8;
  align-items: center;
  font-size: 0.7291666667vw;
  width: 4.1666666667vw;
  height: 4.1666666667vw;
  background: url(../img/label_yellow.png) no-repeat;
  background-size: cover;
  top: 50%;
  left: -1.0416666667vw;
  margin-top: -3.125vw;
  transition: .3s background;
}*/
/* line 38, ../sass/component/_btn.scss */
.btn:after {
  content: '';
  position: absolute;
  right: 1.0416666667vw;
  top: 50%;
  width: 0.5208333333vw;
  height: 0.5208333333vw;
  border-top: 0.15625vw solid #fff;
  border-right: 0.15625vw solid #fff;
  transform: translate(0, -50%) rotate(45deg);
  transition: .3s background;
}
/* line 50, ../sass/component/_btn.scss */
.btn:hover {
  transform: translateY(0.5208333333vw);
  color: #fff;
  background: transparent;
  box-shadow: 0 0.3125vw #332e00;
  border: 4px solid #109dbe;
}
/* line 56, ../sass/component/_btn.scss */
.btn:hover:before {
  background: url(../img/label.png) no-repeat;
  background-size: cover;
}
/* line 60, ../sass/component/_btn.scss */
.btn:hover:after {
  border-top: 0.15625vw solid #fff;
  border-right: 0.15625vw solid #fff;
}
@media screen and (max-width: 768px) {
  /* line 8, ../sass/component/_btn.scss */
  .btn {
    font-size: 4.1666666667vw;
    padding: 5.2083333333vw 2.6041666667vw;
    margin-top: 2.6041666667vw;
    margin-bottom: 5.2083333333vw;
  }
  /* line 70, ../sass/component/_btn.scss */
  .btn:before {
    font-size: 1.8229166667vw;
    width: 13.0208333333vw;
    height: 13.0208333333vw;
    margin-top: -11.71875vw;
  }
  /* line 76, ../sass/component/_btn.scss */
  .btn:after {
    content: '';
    position: absolute;
    right: 5.2083333333vw;
    top: 50%;
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    border-top: 0.78125vw solid #fff;
    border-right: 0.78125vw solid #fff;
  }
}
/*
--------------------------------------------------
  scroll anime
--------------------------------------------------
*/
/* line 8, ../sass/component/_scrollAnime.scss */
.fade-in {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
}
/* line 14, ../sass/component/_scrollAnime.scss */
.fade-in-up {
  transform: translate(0, 50px);
}
/* line 18, ../sass/component/_scrollAnime.scss */
.fade-in-down {
  transform: translate(0, -50px);
}
/* line 22, ../sass/component/_scrollAnime.scss */
.fade-in-left {
  transform: translate(-50px, 0);
}
/* line 26, ../sass/component/_scrollAnime.scss */
.fade-in-right {
  transform: translate(50px, 0);
}
/* line 30, ../sass/component/_scrollAnime.scss */
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
/*
--------------------------------------------------
  tab
--------------------------------------------------
*/
/* line 10, ../sass/component/_tab.scss */
.c-tab_btn {
  cursor: pointer;
  transition: .3s all;
}
/* line 13, ../sass/component/_tab.scss */
.c-tab_btn:hover {
  background: #333;
}
/* line 16, ../sass/component/_tab.scss */
.c-tab_btn.active {
  background: #333;
  color: #ffbf12;
}
/* line 21, ../sass/component/_tab.scss */
.c-tab_contents {
  display: none;
}
/* line 23, ../sass/component/_tab.scss */
.c-tab_contents.active {
  display: block;
  animation: tab_fadein .5s ease-out forwards;
}
/*
--------------------------------------------------
  hero
--------------------------------------------------
*/
/* line 9, ../sass/component/_heading.scss */
.c-heading {
  display: block;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 60px;
}
/* line 15, ../sass/component/_heading.scss */
.c-heading img {
  display: inline-block;
}
/* line 18, ../sass/component/_heading.scss */
.c-heading-center {
  text-align: center;
}
/* line 21, ../sass/component/_heading.scss */
.c-heading_en {
  margin-bottom: 24px;
}
/* line 24, ../sass/component/_heading.scss */
.c-heading_ja {
  font-size: 2rem;
  font-weight: 600;
}
@media screen and (max-width: 1400px) {
  /* line 24, ../sass/component/_heading.scss */
  .c-heading_ja {
    font-size: 1.0416666667vw;
  }
}
@media screen and (max-width: 1400px) {
  /* line 24, ../sass/component/_heading.scss */
  .c-heading_ja {
    font-size: 2.6041666667vw;
  }
}
@media screen and (max-width: 480px) {
  /* line 24, ../sass/component/_heading.scss */
  .c-heading_ja {
    font-size: 1.6rem;
  }
}
/*
--------------------------------------------------
  pageTop
--------------------------------------------------
*/
/* line 8, ../sass/component/_pageTop.scss */
.c-pageTop {
  position: fixed;
  width: 64px;
  height: 64px;
  bottom: 8px;
  right: 8px;
  cursor: pointer;
  z-index: 990;
}
@media screen and (max-width: 480px) {
  /* line 8, ../sass/component/_pageTop.scss */
  .c-pageTop {
    width: 48px;
    height: 48px;
  }
  /* line 20, ../sass/component/_pageTop.scss */
  .c-pageTop:before, .c-pageTop:after {
    width: 20px;
  }
}
/* line 24, ../sass/component/_pageTop.scss */
.c-pageTop_btn {
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  background: #000;
}
/* line 30, ../sass/component/_pageTop.scss */
.c-pageTop_btn:before, .c-pageTop_btn:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  background: #fff;
  width: 30px;
  height: 2px;
  transition: .4s all;
}
/* line 40, ../sass/component/_pageTop.scss */
.c-pageTop_btn:before {
  transform: rotate(45deg);
  right: 7px;
}
/* line 44, ../sass/component/_pageTop.scss */
.c-pageTop_btn:after {
  transform: rotate(-45deg);
  left: 7px;
}
/* line 49, ../sass/component/_pageTop.scss */
.c-pageTop_btn:hover:before, .c-pageTop_btn:hover:after {
  top: 45%;
}
@media screen and (max-width: 480px) {
  /* line 24, ../sass/component/_pageTop.scss */
  .c-pageTop_btn {
    width: 48px;
    height: 48px;
  }
  /* line 56, ../sass/component/_pageTop.scss */
  .c-pageTop_btn:before, .c-pageTop_btn:after {
    width: 20px;
  }
}
/* line 61, ../sass/component/_pageTop.scss */
.c-pageTop-twitter {
  display: block;
  margin: 0 auto 24px;
  position: relative;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 100px;
}
/* line 69, ../sass/component/_pageTop.scss */
.c-pageTop-twitter:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/tw_icon.png) no-repeat center;
  width: 45px;
  height: 48px;
}
/* line 79, ../sass/component/_pageTop.scss */
.c-pageTop-twitter:after {
  content: 'SHARE';
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  transition: .3s all;
}
/* line 89, ../sass/component/_pageTop.scss */
.c-pageTop-twitter:hover {
  background: #9864e8;
}
/* line 91, ../sass/component/_pageTop.scss */
.c-pageTop-twitter:hover:after {
  color: #9864e8;
}
@media screen and (max-width: 480px) {
  /* line 61, ../sass/component/_pageTop.scss */
  .c-pageTop-twitter {
    width: 50px;
    height: 50px;
  }
  /* line 98, ../sass/component/_pageTop.scss */
  .c-pageTop-twitter:after {
    font-size: 1.2rem;
    top: 50px;
  }
}
/*
--------------------------------------------------
  notice
--------------------------------------------------
*/
/* line 9, ../sass/component/_notice.scss */
.notice {
  font-size: 0.7291666667vw;
  color: #a9a9a9;
  margin-bottom: 2.0833333333vw;
}
/* line 13, ../sass/component/_notice.scss */
.notice li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.2083333333vw;
}
/* line 17, ../sass/component/_notice.scss */
.notice li:before {
  position: absolute;
  top: 0;
  left: 0;
}
/* line 24, ../sass/component/_notice.scss */
.notice .reference:before {
  content: '※';
}
/* line 29, ../sass/component/_notice.scss */
.notice .reference.en:before {
  content: '*';
}
/* line 34, ../sass/component/_notice.scss */
.notice .bullet:before {
  content: '・';
}
@media screen and (max-width: 768px) {
  /* line 9, ../sass/component/_notice.scss */
  .notice {
    font-size: 1rem;
    margin-bottom: 2.6041666667vw;
  }
}
/*
--------------------------------------------------
  project
--------------------------------------------------
*/
/* line 9, ../sass/project/_project.scss */
#intro {
  position: relative;
  background: url(../img/ink_01.png) no-repeat right -3.125vw;
}
@media screen and (max-width: 768px) {
  /* line 9, ../sass/project/_project.scss */
  #intro {
    background-position: top -156.25vw center;
  }
  /* line 14, ../sass/project/_project.scss */
  #intro .container_inner {
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
  }
}
/* line 21, ../sass/project/_project.scss */
.intro {
  width: 38.0208333333vw;
}
@media screen and (max-width: 768px) {
  /* line 21, ../sass/project/_project.scss */
  .intro {
    width: 100%;
    padding: 5.2083333333vw;
  }
}
/* line 27, ../sass/project/_project.scss */
.intro_ttl {
  position: relative;
  font-size: 2.1875vw;
  font-weight: 700;
  color: #109dbe;
  margin-bottom: 1.0416666667vw;
}
/* line 33, ../sass/project/_project.scss */
.intro_ttl:after {
  content: '+ + + +';
  display: block;
  margin-bottom: 1.0416666667vw;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  /* line 27, ../sass/project/_project.scss */
  .intro_ttl {
    font-size: 5.25vw;
    text-align: center;
    line-height: 1.6;
  }
}
/* line 45, ../sass/project/_project.scss */
.intro_img {
  width: 51.0416666667vw;
  height: 46.875vw;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
}
/* line 52, ../sass/project/_project.scss */
.intro_img img {
  position: absolute;
}
/* line 55, ../sass/project/_project.scss */
.intro_img .img_board {
  z-index: 3;
  left: 8vw;
  bottom: 1.1666666667vw;
  width: 16.75vw;
}
/* line 61, ../sass/project/_project.scss */
.intro_img .illust_vega {
  width: 28.708333vw;
  bottom: -44px;
  right: 0;
  z-index: 2;
}
/* line 67, ../sass/project/_project.scss */
.intro_img .illust_chunli {
  width: 29.875vw;
  top: -1vw;
  right: 9vw;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  /* line 45, ../sass/project/_project.scss */
  .intro_img {
    width: 100%;
    height: 104.1666666667vw;
    position: relative;
    right: 0;
  }
  /* line 78, ../sass/project/_project.scss */
  .intro_img img {
    position: absolute;
  }
  /* line 81, ../sass/project/_project.scss */
  .intro_img .img_board {
    z-index: 3;
    left: 5.2083333333vw;
    bottom: 10.4166666667vw;
    width: 39.0625vw;
  }
	
	.intro_img .illust_chunli {
  width: 50.875vw;
  top: -1vw;
  right: 9vw;
  z-index: 1;
}
  /* line 87, ../sass/project/_project.scss */
  .intro_img .illust_vega {
    width: 53.3333333333vw;
    bottom: 0vw;
    right: 4.625vw;
    z-index: 2;
  }
  /* line 93, ../sass/project/_project.scss */
  .intro_img .illust_guile {
    width: 81.1458333333vw;
    top: 0;
    right: -7.4583333333vw;
    z-index: 1;
  }
}
/* line 101, ../sass/project/_project.scss */
.intro_txt {
  margin-bottom: 2.0833333333vw;
}
/* line 106, ../sass/project/_project.scss */
#lineup {
  padding-bottom: 0;
}
/* line 110, ../sass/project/_project.scss */
.bg_roop {
  position: relative;
  width: 100%;
  height: 5.0833333333vw;
  background: url(../img/bg_roop.png) repeat-x center;
	
  background-size: 50.4375vw 5.0833333333vw;
  animation: bg_roop 40s linear infinite;
}

.bg_roop:before{
	background-image: linear-gradient(-45deg, #be185d, #ec4899, #d946ef, #0ea5e9);
	content: '';
	background-size: contain;
	position: absolute;
	z-index: -1;
	width: 100vw;
	height: 5vw;
}

.bg_roop2 {
  position: relative;
  width: 100%;
  height: 5.0833333333vw;
  background: url(../img/bg_roop02.png) repeat-x center;
	
  background-size: 50.4375vw 5.0833333333vw;
  animation: bg_roop 40s linear infinite;
}

.bg_roop2:before{
	background-image: linear-gradient(-45deg, #be185d, #ec4899, #d946ef, #0ea5e9);
	content: '';
	background-size: contain;
	position: absolute;
	z-index: -1;
	width: 100vw;
	height: 5vw;
}
@media screen and (max-width: 768px) {
  /* line 110, ../sass/project/_project.scss */
  .bg_roop {
    height: 5.2083333333vw;
    background-size: 58.59375vw 5.2083333333vw;
  }
}
@keyframes bg_roop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -100vw 0;
  }
}
/* line 133, ../sass/project/_project.scss */
.lineup_ttl {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 0 2.0833333333vw 0;
}
@media screen and (max-width: 768px) {
  /* line 133, ../sass/project/_project.scss */
  .lineup_ttl {
    flex-direction: column;
  }
}
/* line 142, ../sass/project/_project.scss */
.lineup_ttl_small {
  width: 50%;
  position: relative;
  font-size: 0;
  padding: 2.0833333333vw;
}
/* line 147, ../sass/project/_project.scss */
.lineup_ttl_small:before, .lineup_ttl_small:after {
  content: '';
  position: absolute;
  width: 13.0208333333vw;
  height: 7.2916666667vw;
  background: url(../img/parenthesis.png) no-repeat;
  background-size: cover;
}
/* line 155, ../sass/project/_project.scss */
.lineup_ttl_small:before {
  left: 0;
  top: 0;
}
/* line 159, ../sass/project/_project.scss */
.lineup_ttl_small:after {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
/* line 165, ../sass/project/_project.scss */
.lineup_ttl_small p:nth-child(1):before {
  content: '';
  display: block;
  width: 18.75vw;
  height: 2.8125vw;
  background: url(../img/sf_logo.png) no-repeat;
  background-size: cover;
  margin-bottom: 1.0416666667vw;
}
/* line 176, ../sass/project/_project.scss */
.lineup_ttl_small p:nth-child(2):before {
  content: '';
  display: block;
  width: 38.5416666667vw;
  height: 2.5vw;
  background: url(../img/mainttl_horizonal.png) no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  /* line 142, ../sass/project/_project.scss */
  .lineup_ttl_small {
    width: 100%;
    padding: 5.2083333333vw;
    margin-bottom: 5.2083333333vw;
  }
  /* line 189, ../sass/project/_project.scss */
  .lineup_ttl_small:before, .lineup_ttl_small:after {
    width: 32.5520833333vw;
    height: 18.2291666667vw;
  }
  /* line 194, ../sass/project/_project.scss */
  .lineup_ttl_small p:nth-child(1):before {
    content: '';
    display: block;
    width: 46.875vw;
    height: 7.03125vw;
    background: url(../img/sf_logo.png) no-repeat;
    background-size: cover;
    margin: 0 auto 2.6041666667vw;
  }
  /* line 205, ../sass/project/_project.scss */
  .lineup_ttl_small p:nth-child(2):before {
    content: '';
    display: block;
    width: 100%;
    height: 5.2083333333vw;
    background: url(../img/mainttl_horizonal.png) no-repeat;
    background-size: cover;
  }
}
/* line 216, ../sass/project/_project.scss */
.lineup_ttl_large {
  position: relative;
  width: 50%;
  height: 8.5416666667vw;
  font-size: 0;
  margin: 0 0 0 2.0833333333vw;
}
/* line 222, ../sass/project/_project.scss */
.lineup_ttl_large:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 39.5833333333vw;
  height: 8.5416666667vw;
  background: url(../img/ttl_lineup.png) no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  /* line 216, ../sass/project/_project.scss */
  .lineup_ttl_large {
    width: 100%;
    height: 21.3541666667vw;
    margin: 0 0 5.2083333333vw 0;
  }
  /* line 236, ../sass/project/_project.scss */
  .lineup_ttl_large:before {
    width: 100%;
    height: 19.2708333333vw;
  }
}
/* line 242, ../sass/project/_project.scss */
.lineup_list {
  display: flex;
  flex-wrap: wrap;
}
/* line 246, ../sass/project/_project.scss */
.lineup_item {
  position: relative;
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
}
/* line 252, ../sass/project/_project.scss */
.lineup_item a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/* line 262, ../sass/project/_project.scss */
.lineup_item:hover .lineup_chara:before {
  transform: scale(1.1);
}
/* line 267, ../sass/project/_project.scss */
.lineup_item:hover .lineup_details:before {
  background: url(../img/label_hover.png) no-repeat;
  background-size: cover;
  animation: 5s linear infinite rotation;
}
@media screen and (max-width: 768px) {
  /* line 246, ../sass/project/_project.scss */
  .lineup_item {
    width: 100%;
  }
}
/* line 278, ../sass/project/_project.scss */
.lineup_item.reverse {
  flex-direction: row-reverse;
}
/* line 281, ../sass/project/_project.scss */
.lineup_chara, .lineup_board {
  width: 50%;
  height: 43.0625vw;
}
@media screen and (max-width: 768px) {
  /* line 281, ../sass/project/_project.scss */
  .lineup_chara, .lineup_board {
    height: 72.9166666667vw;
  }
}
/* line 288, ../sass/project/_project.scss */
.lineup_chara {
  position: relative;
  overflow: hidden;
}
/* line 291, ../sass/project/_project.scss */
.lineup_chara:before {
  content: '';
  display: block;
  transition: .3s transform, .3s background;
  height: 43.0625vw;
}
@media screen and (max-width: 768px) {
  /* line 298, ../sass/project/_project.scss */
  .lineup_chara:before {
    height: 72.9166666667vw;
  }
}
/* line 303, ../sass/project/_project.scss */
.lineup_charaname {
  position: absolute;
  right: 1.0416666667vw;
  bottom: 1.0416666667vw;
}
@media screen and (max-width: 768px) {
  /* line 303, ../sass/project/_project.scss */
  .lineup_charaname {
    right: 2.6041666667vw;
    bottom: 2.6041666667vw;
  }
}
/* line 313, ../sass/project/_project.scss */
.lineup_board {
  position: relative;
}
/* line 316, ../sass/project/_project.scss */
.lineup_details {
  position: absolute;
  bottom: 1.0416666667vw;
  right: 1.0416666667vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* line 323, ../sass/project/_project.scss */
.lineup_details span {
  display: block;
  position: absolute;
  font-size: 0.625vw;
  font-weight: 700;
  line-height: 1;
}
/* line 330, ../sass/project/_project.scss */
.lineup_details:before {
  content: '';
  display: block;
  width: 5.2083333333vw;
  height: 5.2083333333vw;
  background: url(../img/label.png) no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  /* line 316, ../sass/project/_project.scss */
  .lineup_details {
    bottom: 1.3020833333vw;
    right: 1.3020833333vw;
  }
  /* line 341, ../sass/project/_project.scss */
  .lineup_details span {
    font-size: 2.0833333333vw;
  }
  /* line 344, ../sass/project/_project.scss */
  .lineup_details:before {
    width: 15.625vw;
    height: 15.625vw;
  }
}
/* line 350, ../sass/project/_project.scss */
.lineup_notice {
  padding: 1.0416666667vw 4.1666666667vw;
}
/* line 352, ../sass/project/_project.scss */
.lineup_notice h3 {
  margin: 0 0 0.5208333333vw;
}
/* line 355, ../sass/project/_project.scss */
.lineup_notice ul {
  margin: 0 0 1.0416666667vw;
}
@media screen and (max-width: 768px) {
  /* line 350, ../sass/project/_project.scss */
  .lineup_notice {
    padding: 10.4166666667vw 5.2083333333vw;
  }
  /* line 360, ../sass/project/_project.scss */
  .lineup_notice ul {
    margin: 0 0 7.8125vw;
  }
}


/* vol 5 */
#zangief.lineup_item:hover .lineup_chara {
  background: red;
}
/* line 372, ../sass/project/_project.scss */
#zangief.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_zangief_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#zangief .lineup_chara {
  background: red;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#zangief .lineup_chara:before {
  background: url(../img/lineup_zangief.png) no-repeat center;
  background-size: cover;
  width: 100%;
}

#blanka.lineup_item:hover .lineup_chara {
  background: green;
}
/* line 372, ../sass/project/_project.scss */
#blanka.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_blanka_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#blanka .lineup_chara {
  background: green;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#blanka .lineup_chara:before {
  background: url(../img/lineup_blanka.png) no-repeat center;
  background-size: cover;
  width: 100%;
}


#manon.lineup_item:hover .lineup_chara {
  background: black;
}
/* line 372, ../sass/project/_project.scss */
#manon.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_manon_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#manon .lineup_chara {
  background: black;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#manon .lineup_chara:before {
  background: url(../img/lineup_manon.png) no-repeat center;
  background-size: cover;
  width: 100%;
}

#elena.lineup_item:hover .lineup_chara {
  background: black;
}
/* line 372, ../sass/project/_project.scss */
#elena.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_elena_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#elena .lineup_chara {
  background: black;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#elena .lineup_chara:before {
  background: url(../img/lineup_elena.png) no-repeat center;
  background-size: cover;
  width: 100%;
}

#sagat.lineup_item:hover .lineup_chara {
  background: black;
}
/* line 372, ../sass/project/_project.scss */
#sagat.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_sagat_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#sagat .lineup_chara {
  background: black;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#sagat .lineup_chara:before {
  background: url(../img/lineup_sagat.png) no-repeat center;
  background-size: cover;
  width: 100%;
}


/* line 370, ../sass/project/_project.scss */
#chunli.lineup_item:hover .lineup_chara {
  background: #ffba00;
}
/* line 372, ../sass/project/_project.scss */
#chunli.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_chunli_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#chunli .lineup_chara {
  background: #27489c;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#chunli .lineup_chara:before {
  background: url(../img/lineup_chunli.png) no-repeat center;
  background-size: cover;
  width: 100%;
}

#deejay.lineup_item:hover .lineup_chara {
  background: #ffba00;
}
/* line 372, ../sass/project/_project.scss */
#deejay.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_deejay_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#deejay .lineup_chara {
  background: #27489c;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#deejay .lineup_chara:before {
  background: url(../img/lineup_deejay.png) no-repeat center;
  background-size: cover;
  width: 100%;
}


/* line 372, ../sass/project/_project.scss */
#deejay.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_deejay_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#deejay .lineup_chara {
  background: #27489c;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#deejay .lineup_chara:before {
  background: url(../img/lineup_deejay.png) no-repeat center;
  background-size: cover;
  width: 100%;
}

@media screen and (max-width: 768px) {
  /* line 389, ../sass/project/_project.scss */
  #deejay .lineup_charaname {
    width: 33.34375vw;
  }
	#chunli .lineup_charaname {
    width: 33.34375vw;
  }
	
	#zangief .lineup_charaname {
    width: 33.34375vw;
  }
	
	#blanka .lineup_charaname {
    width: 33.34375vw;
  }
	
	#manon .lineup_charaname {
    width: 33.34375vw;
  }
	
	#elena .lineup_charaname {
    width: 33.34375vw;
  }
	
	#aki .lineup_charaname{
		width: 27vw;
	}
}
/* line 394, ../sass/project/_project.scss */
#chunli .lineup_board {
  background: url("../img/wall_chunli.jpg") no-repeat center;
  background-size: 100%;
}

#zangief .lineup_board {
  background: url(../img/wall01.jpg) no-repeat center;
  background-size: cover;
}

#blanka .lineup_board {
  background: url(../img/wall02.jpg) no-repeat center;
  background-size: cover;
}

#manon .lineup_board {
  background: url(../img/wall03.jpg) no-repeat center;
  background-size: cover;
}

#elena .lineup_board {
  background: url(../img/wall04.jpg) no-repeat center;
  background-size: cover;
}

#sagat .lineup_board {
  background: url(../img/wall05.jpg) no-repeat center;
  background-size: cover;
}


/* line 402, ../sass/project/_project.scss */
#dhalsim.lineup_item:hover .lineup_chara {
  background: #54b7d3;
}
/* line 404, ../sass/project/_project.scss */
#dhalsim.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_dhalsim_hover.png) no-repeat center;
  background-size: cover;
}
/* line 411, ../sass/project/_project.scss */
#dhalsim .lineup_chara {
  background: #e7c928;
  transition: .3s background;
}
/* line 414, ../sass/project/_project.scss */
#dhalsim .lineup_chara:before {
  background: url(../img/lineup_dhalsim.png) no-repeat center;
  background-size: cover;
  width: 100%;
}


#deejay .lineup_board {
  background: url(../img/wall_deejay.jpg) no-repeat center;
  background-size: 160%;
}
/* line 402, ../sass/project/_project.scss */
#guile.lineup_item:hover .lineup_chara {
  background: #54b7d3;
}
/* line 404, ../sass/project/_project.scss */
#guile.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_guile_hover.png) no-repeat center;
  background-size: cover;
}
/* line 411, ../sass/project/_project.scss */
#guile .lineup_chara {
  background: #e7c928;
  transition: .3s background;
}
/* line 414, ../sass/project/_project.scss */
#guile .lineup_chara:before {
  background: url(../img/lineup_guile.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 420, ../sass/project/_project.scss */
  #guile .lineup_charaname {
    width: 33.8541666667vw;
  }
	#dhalsim .lineup_charaname {
    width: 33.8541666667vw;
  }
	
}
/* line 425, ../sass/project/_project.scss */
#dhalsim .lineup_board {
  background: url(../img/wall02.jpg) no-repeat center;
  background-size: 100%;
}
/* line 434, ../sass/project/_project.scss */
#honda .lineup_board {
  background: url(../img/wall03.jpg) no-repeat center;
  background-size: 100%;
}

#honda.lineup_item:hover .lineup_chara {
  background: #8bc7ae;
}
/* line 436, ../sass/project/_project.scss */
#honda.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_honda_hover.png) no-repeat center;
  background-size: cover;
}
/* line 443, ../sass/project/_project.scss */
#honda .lineup_chara {
  background: #d0125a;
  transition: .3s background;
}
/* line 446, ../sass/project/_project.scss */
#honda .lineup_chara:before {
  background: url(../img/lineup_honda.png) no-repeat center;
  background-size: cover;
  width: 100%;
}


#guile .lineup_board {
  background: url(../img/wall04.jpg) no-repeat center;
  background-size: 100%;
}
/* line 434, ../sass/project/_project.scss */
#jp.lineup_item:hover .lineup_chara {
  background: #8bc7ae;
}
/* line 436, ../sass/project/_project.scss */
#jp.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_jp_hover.png) no-repeat center;
  background-size: cover;
}
/* line 443, ../sass/project/_project.scss */
#jp .lineup_chara {
  background: #d0125a;
  transition: .3s background;
}
/* line 446, ../sass/project/_project.scss */
#jp .lineup_chara:before {
  background: url(../img/lineup_jp.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 452, ../sass/project/_project.scss */
  #kimberley .lineup_charaname {
    width: 44.2708333333vw;
  }
	#honda .lineup_charaname {
    width: 44.2708333333vw;
  }
}
/* line 457, ../sass/project/_project.scss */
#jp .lineup_board {
  background: url(../img/wall_jp.jpg) no-repeat center;
  background-size: 160%;
}
/* line 466, ../sass/project/_project.scss */
#marisa.lineup_item:hover .lineup_chara {
  background: #d52c80;
}
/* line 468, ../sass/project/_project.scss */
#marisa.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_marisa_hover.png) no-repeat center;
  background-size: cover;
}
/* line 475, ../sass/project/_project.scss */
#marisa .lineup_chara {
  background: #721683;
  transition: .3s background;
}
/* line 478, ../sass/project/_project.scss */
#marisa .lineup_chara:before {
  background: url(../img/lineup_marisa.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 484, ../sass/project/_project.scss */
  #marisa .lineup_charaname {
    width: 13.34375vw;
  }
}
/* line 489, ../sass/project/_project.scss */
#marisa .lineup_board {
  background: url(../img/wall_marisa.jpg) no-repeat center;
  background-size: 160%;
}
#lily .lineup_board {
  background: url(../img/wall_lily.jpg) no-repeat center;
  background-size: 160%;
}
/* line 498, ../sass/project/_project.scss */
#ryu.lineup_item:hover .lineup_chara {
  background: #2f928d;
}
/* line 500, ../sass/project/_project.scss */
#ryu.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_ryu_hover.png) no-repeat center;
  background-size: cover;
}
/* line 507, ../sass/project/_project.scss */
#ryu .lineup_chara {
  background: #841b1f;
  transition: .3s background;
}
/* line 510, ../sass/project/_project.scss */
#ryu .lineup_chara:before {
  background: url(../img/lineup_ryu.png) no-repeat center;
  background-size: cover;
  width: 100%;
}

#lily .lineup_chara {
  background: #841b1f;
  transition: .3s background;
}
/* line 510, ../sass/project/_project.scss */
#lily .lineup_chara:before {
  background: url(../img/lineup_lily.png) no-repeat center;
  background-size: cover;
  width: 100%;
}


#vega.lineup_item:hover .lineup_chara {
  background: #2f928d;
}
/* line 500, ../sass/project/_project.scss */
#vega.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_vega_hover.png) no-repeat center;
  background-size: cover;
}
/* line 507, ../sass/project/_project.scss */
#vega .lineup_chara {
  background: #841b1f;
  transition: .3s background;
}
/* line 510, ../sass/project/_project.scss */
#vega .lineup_chara:before {
  background: url(../img/lineup_vega.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 516, ../sass/project/_project.scss */
	#ryu .lineup_charaname {
    width: 28.4375vw;
  }
	
  #vega .lineup_charaname {
    width: 28.4375vw;
  }
}
/* line 521, ../sass/project/_project.scss */
#ryu .lineup_board {
  background: url(../img/wall_ryu.jpg) no-repeat center;
  background-size: 160%;
}

#vega .lineup_board {
  background: url(../img/wall_vega.jpg) no-repeat center;
  background-size: 160%;
}

#cammy.lineup_item:hover .lineup_chara {
  background: #ffba00;
}
/* line 372, ../sass/project/_project.scss */
#cammy.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_cammy_hover.png) no-repeat center;
  background-size: cover;
}
/* line 379, ../sass/project/_project.scss */
#cammy .lineup_chara {
  background: #27489c;
  transition: .3s background;
}
/* line 382, ../sass/project/_project.scss */
#cammy .lineup_chara:before {
  background: url(../img/lineup_cammy.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 389, ../sass/project/_project.scss */
  #cammy .lineup_charaname {
    width: 33.34375vw;
  }
	
	#aki .lineup_charaname{
		width: 27vw;
	}
}
/* line 394, ../sass/project/_project.scss */
#cammy .lineup_board {
  background: url(../img/wall_cammy.jpg) no-repeat center;
  background-size: 160%;
}
/* line 402, ../sass/project/_project.scss */
#rashid.lineup_item:hover .lineup_chara {
  background: #54b7d3;
}
/* line 404, ../sass/project/_project.scss */
#rashid.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_rashid_hover.png) no-repeat center;
  background-size: cover;
}
/* line 411, ../sass/project/_project.scss */
#rashid .lineup_chara {
  background: #e7c928;
  transition: .3s background;
}
/* line 414, ../sass/project/_project.scss */
#rashid .lineup_chara:before {
  background: url(../img/lineup_rashid.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 420, ../sass/project/_project.scss */
  #rashid .lineup_charaname {
    width: 33.8541666667vw;
  }
}
/* line 425, ../sass/project/_project.scss */
#rashid .lineup_board {
  background: url(../img/wall_rashid.jpg) no-repeat center;
  background-size: 160%;
}
/* line 434, ../sass/project/_project.scss */
#aki.lineup_item:hover .lineup_chara {
  background: #8bc7ae;
}
/* line 436, ../sass/project/_project.scss */
#aki.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_aki_hover.png) no-repeat center;
  background-size: cover;
}
/* line 443, ../sass/project/_project.scss */
#aki .lineup_chara {
  background: #d0125a;
  transition: .3s background;
}
/* line 446, ../sass/project/_project.scss */
#aki .lineup_chara:before {
  background: url(../img/lineup_aki.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 452, ../sass/project/_project.scss */
  #kimberley .lineup_charaname {
    width: 44.2708333333vw;
  }
}
/* line 457, ../sass/project/_project.scss */
#aki .lineup_board {
  background: url(../img/wall_aki.jpg) no-repeat center;
  background-size: 160%;
}
/* line 466, ../sass/project/_project.scss */
#ed.lineup_item:hover .lineup_chara {
  background: #d52c80;
}
/* line 468, ../sass/project/_project.scss */
#ed.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_ed_hover.png) no-repeat center;
  background-size: cover;
}
/* line 475, ../sass/project/_project.scss */
#ed .lineup_chara {
  background: #721683;
  transition: .3s background;
}
/* line 478, ../sass/project/_project.scss */
#ed .lineup_chara:before {
  background: url(../img/lineup_ed.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 484, ../sass/project/_project.scss */
  #ed .lineup_charaname {
    width: 13.34375vw;
  }
}
/* line 489, ../sass/project/_project.scss */
#ed .lineup_board {
  background: url(../img/wall_ed.jpg) no-repeat center;
  background-size: 160%;
}
/* line 498, ../sass/project/_project.scss */
#gouki.lineup_item:hover .lineup_chara {
  background: #2f928d;
}
/* line 500, ../sass/project/_project.scss */
#gouki.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_gouki_hover.png) no-repeat center;
  background-size: cover;
}
/* line 507, ../sass/project/_project.scss */
#gouki .lineup_chara {
  background: #841b1f;
  transition: .3s background;
}
/* line 510, ../sass/project/_project.scss */
#gouki .lineup_chara:before {
  background: url(../img/lineup_gouki.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 516, ../sass/project/_project.scss */
  #gouki .lineup_charaname {
    width: 28.4375vw;
  }
}
/* line 521, ../sass/project/_project.scss */
#gouki .lineup_board {
  background: url(../img/wall_gouki.jpg) no-repeat center;
  background-size: 160%;
}

#luke.lineup_item:hover .lineup_chara {
  background: #ffba00;
}
/* line 369, ../sass/project/_project.scss */
#luke.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_luke_hover.png) no-repeat center;
  background-size: cover;
}
/* line 376, ../sass/project/_project.scss */
#luke .lineup_chara {
  background: #27489c;
  transition: .3s background;
}
/* line 379, ../sass/project/_project.scss */
#luke .lineup_chara:before {
  background: url(../img/lineup_luke.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 386, ../sass/project/_project.scss */
  #luke .lineup_charaname {
    width: 27.34375vw;
  }
}
/* line 391, ../sass/project/_project.scss */
#luke .lineup_board {
  background: url(../img/wall_luke.jpg) no-repeat center;
  background-size: 100%;
}

/* line 399, ../sass/project/_project.scss */
#jamie.lineup_item:hover .lineup_chara {
  background: #54b7d3;
}
/* line 401, ../sass/project/_project.scss */
#jamie.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_jamie_hover.png) no-repeat center;
  background-size: cover;
}
/* line 408, ../sass/project/_project.scss */
#jamie .lineup_chara {
  background: #e7c928;
  transition: .3s background;
}
/* line 411, ../sass/project/_project.scss */
#jamie .lineup_chara:before {
  background: url(../img/lineup_jamie.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 417, ../sass/project/_project.scss */
  #jamie .lineup_charaname {
    width: 33.8541666667vw;
  }
}
/* line 422, ../sass/project/_project.scss */
#jamie .lineup_board {
  background: url(../img/wall_jamie.jpg) no-repeat center;
  background-size: 100%;
}

/* line 431, ../sass/project/_project.scss */
#kimberley.lineup_item:hover .lineup_chara {
  background: #8bc7ae;
}
/* line 433, ../sass/project/_project.scss */
#kimberley.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_kimberley_hover.png) no-repeat center;
  background-size: cover;
}
/* line 440, ../sass/project/_project.scss */
#kimberley .lineup_chara {
  background: #d0125a;
  transition: .3s background;
}
/* line 443, ../sass/project/_project.scss */
#kimberley .lineup_chara:before {
  background: url(../img/lineup_kimberley.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 449, ../sass/project/_project.scss */
  #kimberley .lineup_charaname {
    width: 44.2708333333vw;
  }
}
/* line 454, ../sass/project/_project.scss */
#kimberley .lineup_board {
  background: url(../img/wall_kimberley.jpg) no-repeat center;
  background-size: 100%;
}

/* line 463, ../sass/project/_project.scss */
#juri.lineup_item:hover .lineup_chara {
  background: #d52c80;
}
/* line 465, ../sass/project/_project.scss */
#juri.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_juri_hover.png) no-repeat center;
  background-size: cover;
}
/* line 472, ../sass/project/_project.scss */
#juri .lineup_chara {
  background: #721683;
  transition: .3s background;
}
/* line 475, ../sass/project/_project.scss */
#juri .lineup_chara:before {
  background: url(../img/lineup_juri.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 481, ../sass/project/_project.scss */
  #juri .lineup_charaname {
    width: 27.34375vw;
  }
}
/* line 486, ../sass/project/_project.scss */
#juri .lineup_board {
  background: url(../img/wall_juri.jpg) no-repeat center;
  background-size: 100%;
}

/* line 495, ../sass/project/_project.scss */
#ken.lineup_item:hover .lineup_chara {
  background: #2f928d;
}
/* line 497, ../sass/project/_project.scss */
#ken.lineup_item:hover .lineup_chara:before {
  background: url(../img/lineup_ken_hover.png) no-repeat center;
  background-size: cover;
}
/* line 504, ../sass/project/_project.scss */
#ken .lineup_chara {
  background: #841b1f;
  transition: .3s background;
}
/* line 507, ../sass/project/_project.scss */
#ken .lineup_chara:before {
  background: url(../img/lineup_ken.png) no-repeat center;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  /* line 513, ../sass/project/_project.scss */
  #ken .lineup_charaname {
    width: 23.4375vw;
  }
}
/* line 518, ../sass/project/_project.scss */
#ken .lineup_board {
  background: url(../img/wall_ken.jpg) no-repeat center;
  background-size: 100%;
}

@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* line 532, ../sass/project/_project.scss */
#official {
  background: url(../img/bg_footer.jpg) no-repeat;
  background-size: cover;
}
/* line 536, ../sass/project/_project.scss */
.official_logo {
  display: block;
  width: 31.25vw;
  margin: auto;
}
/* line 540, ../sass/project/_project.scss */
.official_logo img {
  width: 100%;
}
/* line 543, ../sass/project/_project.scss */
.official_logo:hover {
  opacity: .8;
}
@media screen and (max-width: 768px) {
  /* line 536, ../sass/project/_project.scss */
  .official_logo {
    width: 78.125vw;
  }
}
/* line 550, ../sass/project/_project.scss */
.share {
  display: block;
  width: 3.90625vw;
  margin: 4.1666666667vw auto;
  text-align: center;
}
/* line 555, ../sass/project/_project.scss */
.share img {
  width: 100%;
}
/* line 558, ../sass/project/_project.scss */
.share span {
  display: block;
  text-align: center;
}
@media screen and (max-width: 768px) {
  /* line 550, ../sass/project/_project.scss */
  .share {
    width: 13.0208333333vw;
    margin: 7.8125vw auto 10.4166666667vw;
  }
}
/* line 568, ../sass/project/_project.scss */
.capcomLogo img {
  margin: auto;
}
@media screen and (max-width: 768px) {
  /* line 572, ../sass/project/_project.scss */
  .capcomLogo img {
    width: 36.4583333333vw;
    margin-bottom: 5.2083333333vw;
  }
}

.lineup_juri a, 
.lineup_jamie a,
.lineup_luke a,
.lineup_kimberly a,
.lineup_ken a,
.lineup_cammy a,
.lineup_rashid a,
.lineup_aki a,
.lineup_ed a,
.lineup_gouki a,
.lineup_deejay a,
.lineup_guile a,
.lineup_jp a,
.lineup_marisa a,
.lineup_vega a{
	width: 19.45vw;
  height: 19.45vw;
} 

.lineup_deejay {
  background: url("../img/lineup_deejay.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_deejay:hover {
  background: url("../img/wall_deejay.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}
.lineup_guile {
  background: url("../img/lineup_guile.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_guile:hover {
  background: url("../img/wall_guile.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}
.lineup_jp {
  background: url("../img/lineup_jp.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_jp:hover {
  background: url("../img/wall_jp.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}
.lineup_marisa {
  background: url("../img/lineup_marisa.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_marisa:hover {
  background: url("../img/wall_marisa.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}
.lineup_vega {
  background: url("../img/lineup_vega.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_vega:hover {
  background: url("../img/wall_vega.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}

.lineup_juri {
  background: url("../img/lineup_juri.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_juri:hover {
  background: url("../img/wall_juri.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}
.lineup_jamie {
  background: url("../img/lineup_jamie.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_jamie:hover {
  background: url("../img/wall_jamie.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}
.lineup_kimberly {
  background: url("../img/lineup_kimberly.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_kimberly:hover {
  background: url("../img/wall_kimberly.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}
.lineup_luke {
  background: url("../img/lineup_luke.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_luke:hover {
  background: url("../img/wall_luke.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}

.lineup_ken {
  background: url("../img/lineup_ken.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
  justify-content: flex-end;
	cursor: pointer;
}

.lineup_cammy {
  background: url("../img/lineup_cammy.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_cammy:hover {
  background: url("../img/wall_cammy.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}

.lineup_rashid {
  background: url("../img/lineup_rashid.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_rashid:hover {
  background: url("../img/wall_rashid.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}

.lineup_aki {
  background: url("../img/lineup_aki.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_aki:hover {
  background: url("../img/wall_aki.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}

.lineup_ed {
  background: url("../img/lineup_ed.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_ed:hover {
  background: url("../img/wall_ed.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}

.lineup_gouki {
  background: url("../img/lineup_gouki.png") no-repeat;
  background-size: contain;
  width: 19.45vw;
  height: 19.45vw;
  display: inline-flex;
	cursor: pointer;
}
.lineup_gouki:hover {
  background: url("../img/wall_gouki.jpg") no-repeat;
  background-size: contain;
	transition: 0.3s;
}

.old_lineup_list {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .lineup_juri, .lineup_jamie, .lineup_kimberly, .lineup_luke, .lineup_ken {
    width: 19vw;
    height: 19vw;
  }
}
@media screen and (max-width: 820px) {
  .lineup_juri, .lineup_jamie, .lineup_kimberly, .lineup_luke, .lineup_ken {
    width: 19.45vw;
    height: 19.45vw;
  }
}
.lineup_ken:hover {
  background: url("../img/wall_ken.jpg") no-repeat;
  background-size: contain;
}
h3.vol1 {
  background: url("../img/subttl.png") no-repeat top center;
  background-size: contain;
  text-indent: -9999px;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  margin: 2.0833vw 0;
}

h3.vol1_en {
  background: url("../img/subttl_en.png") no-repeat top center;
  background-size: contain;
  text-indent: -9999px;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  margin: 2.0833vw 0;
}

h3.vol2 {
  background: url("../img/subttl02.png") no-repeat top center;
  background-size: contain;
  text-indent: -9999px;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  margin: 2.0833vw 0;
}

h3.vol2_en {
  background: url("../img/subttl02_en.png") no-repeat top center;
  background-size: contain;
  text-indent: -9999px;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  margin: 2.0833vw 0;
}

h3.vol3 {
  background: url("../img/subttl03.png") no-repeat top center;
  background-size: contain;
  text-indent: -9999px;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  margin: 2.0833vw 0;
}

h3.vol3_en {
  background: url("../img/subttl03_en.png") no-repeat top center;
  background-size: contain;
  text-indent: -9999px;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-content: flex-end;
  margin: 2.0833vw 0;
}

.warn {
	font-size: .8vw;
	vertical-align: top;
}



@keyframes marqueeLeft{
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}




.swiper-wrapper {
  transition-timing-function: linear !important;
}

.mySwiper{
	background: transparent;
}


.skate01:hover~.mySwiper{
	background: url("../img/bg_chunli.jpg") no-repeat;
	background-size: contain;
	width: 100vw;
}

.skate01{
	position: relative;
	z-index: 54;
	
}

main {
  display: grid;
  
	height: 40vw;
}
main .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
main .hero-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main .hero-left h1 {
  text-align: center;
}
main .hero-left button {
  position: absolute;
  padding: 10px 15px;
  margin: 10px;
  border: none;
  background-color: black;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 2;
}
main .hero-left button:last-of-type {
  right: 0;
}
main .hero-left button:active {
  transform: scale(0.9);
}
main .hero-left .layers {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
main .hero-left .layers .layer {
  display: grid;
  
  /* background-color: transparent; */
	background: url("../img/lineupbg.jpg") no-repeat;
	background-size: cover;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.5s;
  transform: translateX(100%);
  opacity: 0;
	padding-top: 1.5vw;
}
main .hero-left .layers .layer-displayed {
  transform: translateX(0);
  opacity: 1;
  z-index: 1;
}
main .hero-left .layers .layer-displayed-exit {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}
main .hero-left .layers .layer > span {
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
	display: none;
}
main .hero-left .layers .layer-image {
	height: 38vw;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

main .hero-left .layers .layer:nth-child(1) > span {
  color: var(--color1);
}
main .hero-left .layers .layer:nth-child(2) > span {
  color: var(--color2);
}
main .hero-left .layers .layer:nth-child(3) > span {
  color: var(--color3);
}
main .hero-right {
  grid-column: 2;
  position: relative;
  overflow: hidden;
}
main .hero-right > .layer {
  background-color: #E41936;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.5s;
}
main .hero-right > .layer-displayed {
  transform: translateX(0);
  z-index: 2;
}
main .hero-right > .layer-displayed-exit {
  transition-delay: 1s;
  transition-duration: 0;
  z-index: 1;
}
main .hero-right > .layer:nth-child(1) {
  background-color: var(--color1);
}
main .hero-right > .layer:nth-child(2) {
  background-color: var(--color2);
}
main .hero-right > .layer:nth-child(3) {
  background-color: var(--color3);
}
main .hero-right .photo-name {
  position: absolute;
  top: 33%;
  left: 50%;
  width: 20%;
  font-size: 1.5rem;
  z-index: 2;
}
main .hero-right .photo-name span {
  display: block;
}
main .hero-right .photo-name__wrapper {
  position: relative;
}
main .hero-right .photo-name__title {
  font-weight: bold;
}
main .hero-right .photo-name .layer {
  padding: 10px;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
main .hero-right .photo-name .layer-displayed {
  transform: translateX(0);
  transition-delay: 0.5s;
}
main .hero-right .photo-frame {
  position: absolute;
  overflow: hidden;
  animation-play-state: paused;
}
main .hero-right .photo-frame:nth-child(4) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
main .hero-right .photo-frame:nth-child(4) .cover {
  background-color: black;
}
main .hero-right .photo-frame:last-child {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
main .hero-right .photo-frame .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;

  transition: width 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
main .hero-right .photo-frame .layer {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition-delay: 0.5s;
}
main .hero-right .photo-frame .layer-displayed {
  opacity: 1;
}

@keyframes cover {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  95% {
    width: 0;
  }
  100% {
    width: 0;
  }
}

.skate01:hover~.hero_bg {
	background-image: url("../img/bg_chunli.jpg") no-repeat;
}

.skate02:hover~.hero_bg {
	background-image: url("../img/bg_chunli.jpg") no-repeat;

}

.skate03:hover~.hero_bg {
	background: url("../img/bg_chunli.jpg") no-repeat;
	background-size: cover;
}

.skate04:hover~.hero_bg {
	background: url("../img/bg_chunli.jpg") no-repeat;
	background-size: cover;
}

.skate05:hover~.hero_bg {
	background: url("../img/bg_chunli.jpg") no-repeat;
	background-size: cover;
}

main .hero-left .layers .layer a{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

main .hero-left .layers .layer-displayed .lineup_details:before {
  background: url(../img/label_hover.png) no-repeat;
  background-size: cover;
  animation: 5s linear infinite rotation;
}



.gallery {
  width: 100%;
  position: relative;
  min-height: 31.25rem;
  height: 100vh;
}
.gallery .content {
  position: absolute;
  z-index: 50;
  left: 4rem;
  top: 50%;
  transform: translatey(-50%);
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.175rem;
}
.gallery .content span {
  font-size: clamp(1.85rem, 1.7053rem + 0.5447vw, 2.25rem);
  font-weight: 300;
  display: block;
  margin-bottom: -0.625rem;
}
@media screen and (min-width: 42.5rem) {
  .gallery .content span {
    margin-bottom: -1.875rem;
  }
}
.gallery .content h1 {
  font-size: clamp(3.5rem, 1.8723rem + 6.1277vw, 8rem);
  font-weight: 400;
  margin-inline: -0.313rem;
}
.gallery .content p {
  font-size: clamp(1.2rem, 1.0191rem + 0.6809vw, 1.7rem);
  margin-top: -0.313rem;
}
@media screen and (min-width: 42.5rem) {
  .gallery .content p {
    margin-top: -1.563rem;
  }
}


.gallery-slider {
  width: 100%;
  height: 100%;
	display: block;
	transition: all .2s ease-out;
}
.gallery-slider .swiper-slide {
  width: auto;
  height: 100%;
}
.gallery-slider .swiper-slide::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, #0000001c 100%);
}

.gallery-slider .swiper-slide::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  animation: heroanime 1s ease forwards;
}

.gallery-slider .swiper-slide img {
 
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gallery .swiper-pagination {
  position: relative;
  bottom: -0.313rem;
  text-align: left;
}
.gallery .swiper-pagination-bullet {
  border-radius: 0;
  width: 1.125rem;
  height: 0.25rem;
  background: #fff;
}
.gallery .swiper-pagination-bullet-active {
  background: #fff;
}

.gallery .more:hover {
  opacity: 1;
}
.gallery-thumbs {
  width: 3.375rem;
  padding: 0;
  overflow: hidden;
  position: absolute;
  bottom: 8rem;
  right: 0;
}
@media screen and (min-width: 37.5rem) {
  .gallery-thumbs {
    width: 80rem;
	  position: relative;
	  top: -30vw;
	  left: 17vw;
	  z-index: 4;
  }
}
.gallery-thumbs .swiper-slide {
  width: 13.25rem;
  text-align: center;
  overflow: hidden;
  opacity: 0.5;
	filter: grayscale(100%);
	top: 0;
}
.gallery-thumbs .swiper-slide-active{
	filter: none;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
.gallery-thumbs .swiper-slide img {
  width: 7vw;
	margin-right:0;
	object-fit: contain;
}

@media screen and (max-width: 62.188rem) and (max-height: 43.75rem) {
  .content {
    top: 30% !important;
    transform: translatey(-30%);
  }
}

/* ============ Full Page Slider ================= */
.slider-box {
    padding: 0;
    position: relative;
	height: 45vw;
}
.slider-item {
    position: relative;
    overflow: hidden;
    height: 100ch;
	right: -8vw;
	top: -4.8vw;
}
.photography-slider--layer {
    position: absolute;
    top: 0px;
    z-index: 1;
    left: auto;
    right: 45%;
}
.photography-slider--layer img{
    width: 100%;
}
.slider-content {
    position: relative;
    height: 100%;
    margin-top: 90px;
}
.slider-content .slider-image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
    position: relative;
    max-width: 80vw;
    margin-left: auto;
    opacity: 1;
}
.slider-content .slider-image img{
    width: 100%;
   
}
.slider-inner {
    position: absolute;
    left: -19.5vw;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    z-index: 2;
}
.slider-inner .photography-heading {
    margin-bottom: 0px;
    position: relative;
}
.slider-inner .photography-heading .item-title{
    font-size: 3.296vh;
    line-height: 14.296vh;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px;
    letter-spacing: 0px;
    opacity: 1;
    transform: translateX(0px);
    -webkit-transition: all 2.5s ease;
    -moz-transition: all 2.5s ease;
    transition: all 2.5s ease;
    transform-origin: top;
    z-index: 1;
    position: relative;
    opacity: 0;
    transform-origin: top;
    transform: translateX(200px);
    -webkit-transition: all 2.5s ease;
    -moz-transition: all 2.5s ease;
    transition: all 2.5s ease;
	top: 1vw;
	left: -15vw;
}
.slider-inner .photography-heading .item-title-outline{
    font-size: 12.111vh;
    line-height: normal;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #333;
    z-index: 0;
    position: absolute;
	left: -10vw;
    bottom: -5.083vw;
    opacity: 1;
    transform: translateX(0px);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0px;
    letter-spacing: 0px;
    transform-origin: top;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-text-stroke-width: 1px;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform-origin: top;
    transform: translateX(200px);
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;
}
.swiper-slide-active .photography-heading .item-title {
    opacity: 1;
    transform: translateX(0px);
}
.swiper-slide-active .photography-heading .item-title-outline {
    opacity: 1;
    transform: translateX(0px);
}
.creative-swiper--dots .swiper-pagination{
    counter-reset: numbers;
    display: flex;
    flex-direction: column;
    gap: 12px;
    bottom: 30vw;
    margin-top: 0px;
    left: 25px;
    width: 100%;
}
.creative-swiper--dots .swiper-pagination span{
    position: static;
    background: #fff;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 14px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    font-size: 14px;
    font-weight: 600;
}
.creative-swiper--dots .swiper-pagination span.swiper-pagination-bullet-active{
   background-color: #b90808; 
}
.creative-swiper--dots .swiper-pagination .swiper-pagination-bullet::after {
    content: '';
    font-size: 24px;
    font-weight: 600;
    counter-increment: numbers;
    content: "0" counter(numbers);
    color: #b90808;
    position: absolute;
    bottom: calc(100% + 20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}
.creative-swiper--dots .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    opacity: 1;
    visibility: visible;
}


@media screen and (max-width: 1366px) {
    .slider-inner .photography-heading .item-title-outline {
        font-size: 15.67vh;
        line-height: 15.65vh;
        bottom: -3.083vw;
    }
    .slider-inner .photography-heading .item-title span{
        font-size: 9.444vh;
        font-family: inherit;
        font-style: inherit;
        font-weight: inherit;
        background-color: #0f0f0f;
        display: inline-block;
    }
}

@media screen and (max-width: 991px) {
    .slider-content .slider-image {
        max-width: 100vw;
    }
    .slider-inner{
        left: 30px;
        top: 60%;
        transform: translateY(-50%) rotate(0deg);
    }
    .slider-inner .photography-heading .item-title span{
        background-color: transparent;
    }
    .slider-content{
        margin-top: 0px;
    }
    .slider-box .creative-swiper--dots .swiper-pagination{
        bottom: 60%;
        left: 10px;
    }
}

@media screen and (max-width: 480px) {
	.hero_ttl02{
		top: 35vw;
		left: 14vw;
	}
	
    .slider-box{
		width: 100%;
        padding: 0px;
		height: 100%;
    }
    .slider-box .slider-inner{
        top: 50%;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        left: 0px;
    }
    .slider-inner .photography-heading .item-title{
        font-size: 1.896vh;
        line-height: 8.296vh;
		 left: 1vw;
    }
    .slider-inner .photography-heading .item-title span{
       font-size: 8.296vh; 
   }
   .slider-inner .photography-heading .item-title-outline {
    font-size: 8.296vh;
    line-height: 8.296vh;
    bottom: -11.083vw;
	   left: 1vw;
}
	
	.hero_ttl{
		top: 80vw;
	}
	
	.swiper-wrapper {
		box-sizing: border-box !important;
	}
	
.slider-box .creative-photography--sidebar{
    top: 35px;
    justify-content: start;
}
.slider-box .creative-swiper--dots .swiper-pagination{
    bottom: 90px;
    left: 0;
    flex-direction: row;
    justify-content: center;
}
.slider-box .creative-swiper--dots .swiper-pagination span{
    margin: 0 5px;
}
	.slider-content .slider-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
	
	.PC{
		display: none !important;
	}
	
	.SP{
		display: block !important;
	}
	
	
	
	.hero_ttl{
		left: 7vw;
	}
	
	.slider-item{
		height: 100%;
		right:0 !important;
			top:0 !important;
	}
	
	.hero_ttl02 .hero_side{
		left: 0;
		display: none;
	}
	
	.thumbs{
		display: none;
	}
	
	.slider-inner, .hero_ttl02{
		display: none;
	}
}

.PC {
	display: block;
}

.SP {
	display: none;
}

.thumbs{
	width: 50vw;
	position: relative;
	top: -60vw;
	left: -6vw;
	z-index: -1;
}

.thumbs .swiper-slide {
		width: 50%;
		opacity: 0.4;
}

.thumbs .swiper-slide img{
	object-fit: fill;
	width: 8vw;
}
.thumbs .swiper-slide-active {
		opacity: 1;
}