@charset "UTF-8";


.sp{display:none;} 
ul{list-style: none;}
a{ text-decoration: none;}
*{outline:none;}


/*----------------base--------------*/
html{overflow-x: hidden!important;}
body{
	height:100%;
	font-size:14px;
	line-height:1.5;
	font-family: 'Noto Serif JP', serif;
margin: 0;
width: 100%;}

body section img{width: 100%;display: block;}

#wrapper{background:url("https://www.koeitecmoamerica.com/sw5/images/top/bg.jpg") repeat-y center top;overflow:hidden; background-size: contain;}

#content{
  width:100%;
  height:100%; position: relative;
  background-size:100%;}


/* btn */

section p.btn{ position: absolute; z-index: 10; border: 1px solid #000; font-size:calc(40/1920*100vw); font-family: 'Lora', serif;transition: background-color 0.5s;}
section p.btn a{ color: #000; padding:calc(25/1920*100vw) calc(30/1920*100vw) calc(25/1920*100vw)  calc(50/1920*100vw); display: block; text-align: center; letter-spacing: 0.1vw; position: relative;transition: color 0.5s;}
section p.btn a:before{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-black.png") no-repeat center top; position: absolute; top:50%; margin-top: calc(-13/1920*100vw); margin-left: calc(-30/1920*100vw); background-size:calc(17/1920*100vw) calc(27/1920*100vw); width:calc(17/1920*100vw); height:calc(27/1920*100vw);display:inline-block;}


section p.btn.red{background:#9a0508; border:none;}
section p.btn.red a{ color: #fff;}
section p.btn.red a:before{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-white.png") no-repeat center top; background-size:calc(17/1920*100vw) calc(27/1920*100vw);display:inline-block;}

section p.btn.white{border: 1px solid #fff;}
section p.btn.white a{ color: #fff;}
section p.btn.white a:before{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-white.png") no-repeat center top; background-size:calc(17/1920*100vw) calc(27/1920*100vw);display:inline-block;}


section p.btn.black{background:#000; border:none;}
section p.btn.black a{ color: #fff;}
section p.btn.black a:before{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-white.png") no-repeat center top; background-size:calc(17/1920*100vw) calc(27/1920*100vw);display:inline-block;}

section p.btn:hover{background-color:#000;}
section p.btn:hover a{color:#fff;}
section p.btn:hover a:before{background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-white.png") no-repeat center top; background-size:calc(17/1920*100vw) calc(27/1920*100vw);}

section p.btn.white:hover{background-color:#fff;}
section p.btn.white:hover a{color:#000;}
section p.btn.white:hover a:before{background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-black.png") no-repeat center top; background-size:calc(17/1920*100vw) calc(27/1920*100vw);opacity:0;}

section p.btn.red:hover{background-color:#fff;}
section p.btn.red:hover a{color:#000;}
section p.btn.red:hover a:before{background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-black.png") no-repeat center top; background-size:calc(17/1920*100vw) calc(27/1920*100vw); display:inline-block;}


section p.btn.black:hover{background-color:#fff;}
section p.btn.black:hover a{color:#000;}
section p.btn.black:hover a:before{background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-black.png") no-repeat center top; background-size:calc(17/1920*100vw) calc(27/1920*100vw);}

/*----------------ALL--------------*/

/* loading */

#loader-bg{
    background:#000;
    position:fixed;
    width:100%;
    height:100vh;
    z-index:101;
}

#loader,
#loader:before,
#loader:after {
  border-radius: 50%;
}
#loader {
  color: #ffffff;
  font-size: 8px;
  text-indent: -99999em;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-80%) ;
}
#loader:before,
#loader:after {
  position: absolute;
  content: '';
}
#loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #000;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  transform-origin: 5.1em 5.1em;
  animation: load2 2s infinite ease 1.5s;
}
#loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #000;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  transform-origin: 0.1em 5.1em;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* プルダウン */

.language{position: absolute; left: 0; top: 0; width: calc(180/1600*100vw); text-align: center; line-height:calc(54/1600*100vw); background: #000; align-items: center; font-family: 'Lora', serif; font-size: calc(20/1600*100vw); font-weight: 300; z-index: 100;}
.language img{width: calc(25/1600*100vw); margin-right: calc(15/1600*100vw);}
.language a{ display: flex; align-items: center; justify-content: center; text-align: center;  }
.language ul.menu_second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #484848;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
list-style: none;
padding: 0;}

.language:hover ul.menu_second-level {
    top: 40px;
    visibility: visible;
    opacity: 1;
font-size: calc(16/1600*100vw);}


.language a {
    color: #fff;
}

.language  li.none{
    color:#979797;
}

.language a:hover {
}

.language ul.menu_second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
	padding: 0;
	margin: 0;
}

.language:hover li:hover {
    background: #5b5b5b;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.language:hover  li.none:hover{
    background: #484848;
}

.language ul.menu_second-level li {
    border-top: 1px solid #636363;
	    font-size: 14px;
}

/* navigation */
.menu-button{position:fixed;top:0px;right:0px;z-index:90;width:8vw; max-width: 121px;}

#global-navigation{position:fixed;background-color:#000;top:0;right:-430px;height:100vh;z-index:100;width:430px;overflow:scroll;background:url('https://www.koeitecmoamerica.com/sw5/images/nav_bg.jpg');}

#global-navigation .nav-top{width:90%;display: block;margin:0 auto;}
#global-navigation .nav-top img{width:100%;display:block;}
#global-navigation .global-navigation__list li{margin-bottom:10px;padding:0 20px; position: relative;}
#global-navigation .global-navigation__list li a{color:#fff;font-family: 'Lora', serif;width:100%;font-size:28px;text-align: center;display:block;padding:10px 0;font-weight:400;transition:color 0.5s;}
#global-navigation .global-navigation__list li a:hover{color:#ff0000;}

#global-navigation .global-navigation__banner{margin-top:50px;}
#global-navigation .global-navigation__banner li{margin-bottom:10px;padding:0 40px;}
#global-navigation .global-navigation__banner li img{width:100%;transition:all 0.5s;display:block;}

#global-navigation .global-navigation__banner li img:hover{ filter: brightness(120%);transform:scale(1.04);}

#top .nav-top{pointer-events: none;}
#topic #global-navigation .nav-topic a{color:#ff0000;}
#about #global-navigation .nav-about a{color:#ff0000;}
#system #global-navigation .nav-system a{color:#ff0000;}
#character-top #global-navigation .nav-character a{color:#ff0000;}
#character-page #global-navigation .nav-character a{color:#ff0000;}
#products #global-navigation .nav-products a{color:#ff0000;}
#stage #global-navigation .nav-stage a{color:#ff0000;}
#update #global-navigation .nav-update a{color:#ff0000;}

#global-navigation .icon-new:before {
    content: '';
    display: block;
    position: absolute;
    top: 48px;
    left: 50%;
    z-index: 11;
	background:url("https://www.koeitecmoamerica.com/sw5/images/new.png") no-repeat center top; position: absolute; background-size:53px 14px; width:53px; height:14px;
	margin-left: -26px;
}

/* footer */
footer{background: #000; text-align: center; padding: 40px 0 80px; position: relative;}
footer p{font-size:11px; color: #fff; margin:30px auto; width: 90%; max-width: 1000px;}
footer p img{height: 10px;}


footer ul.sns{display: flex; align-items: center; justify-content: center; position: absolute; left: 6vw; bottom: 2vw; padding: 0;}
footer ul.sns li{margin: 0.5vw;}
footer ul.sns img{width: 3.5vw; transition: opacity 0.3s ease-out;}
footer ul.sns a:hover img{ opacity: 0.7;}


footer .twitter{background:url("https://www.koeitecmoamerica.com/sw5/images/bg.jpg") no-repeat center ; display: flex; padding: calc(50/1920*100vw) calc(100/1920*100vw); justify-content: center; align-items: center;}
footer #notice p.txt04{width: calc(633/1920*100vw); padding-right: 0;}
footer #notice p.btn03{width: calc(827/1920*100vw);}
footer #notice p.btn03 img{transition: opacity 0.3s ease-out;}


footer p.btn01{width: calc(384/1920*100vw);  position:absolute; top: calc(40/1920*100vw); right: calc(40/1920*100vw);}
footer p.btn01 img{width:100%;}
footer p.btn01 img{transition: opacity 0.3s ease-out;}

footer ul.platform {display: flex; text-align: center; align-items: center; justify-content: center; margin:0 auto; padding: 0 2vw;}
footer ul.platform li{margin:0 2vw;}
footer ul.platform li img{height: 3vw;}
footer ul.platform li:last-child img{height: 4.5vw;}
footer ul.platform .ESRB {width: calc(230/1920*100vw); height: calc(130/1920*100vw);min-width: 153px; min-height: 87px; image-rendering: -webkit-optimize-contrast;}

.buy{position:fixed;bottom:-5px;right:0;z-index:90;width:280px;}
.buy img{width:100%; }

/*----------------SP--------------*/

@media screen and (max-width:768px){
.sp{display:block;} 
.pc{display:none;} 

/* btn */

section p.btn{ position: absolute; z-index: 10; border: 1px solid #000; font-size:calc(40/768*100vw); font-family: 'Lora', serif;}
section p.btn a{ color: #000; padding:calc(30/1920*100vw) calc(30/1920*100vw) calc(30/1920*100vw)  calc(80/1920*100vw); display: block; text-align: center; letter-spacing: 0.1vw; position: relative;}
section p.btn a:before{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-black.png") no-repeat center top; position: absolute; top:50%; margin-top: calc(-13/768*100vw); margin-left: calc(-30/768*100vw); background-size:calc(17/768*100vw) calc(27/768*100vw); width:calc(17/768*100vw); height:calc(27/768*100vw);}

section p.btn.white{border: 1px solid #fff;}
section p.btn.white a{ color: #fff;}
section p.btn.white a:before{content: ""; background:url("https://www.koeitecmoamerica.com/sw5/images/top/arrow-white.png") no-repeat center top;  background-size:calc(17/768*100vw) calc(27/768*100vw); }


section p.btn.red a:before{background-size:calc(17/768*100vw) calc(27/768*100vw); }
	
.language{width: calc(200/768*100vw); line-height: calc(54/768*100vw); font-size: calc(24/768*100vw); left: 0; right: auto;}
.language img{width: calc(25/768*100vw); margin-right:calc(15/768*100vw);}
.language ul.menu_second-level {  top: calc(40/768*100vw);}
.language:hover ul.menu_second-level {
    top: calc(54/768*100vw);
font-size: calc(20/768*100vw);}
	.language ul.menu_second-level li{font-size: calc(20/768*100vw);}	

/* navigation */
.menu-button{width:15vw;z-index:101;}

#global-navigation{right:-100%;height:100vh;height: calc(var(--vh, 1vh) * 100);z-index:100;width:100%;}

#global-navigation .nav-top{width:60%;display: block;margin:10% auto 0;}
#global-navigation .nav-top img{width:100%;display:block;}
#global-navigation .global-navigation__list li{margin-bottom:5px;padding:0 20px;}
#global-navigation .global-navigation__list li a{font-size:20px;}
#global-navigation .global-navigation__list li a:hover{color:#fff;}

#global-navigation .global-navigation__banner{margin-top:30px;}
#global-navigation .global-navigation__banner li{margin-bottom:10px;padding:0 25%;}
#global-navigation .global-navigation__banner li img{width:100%;}

	#global-navigation .icon-new:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(80/768*100vw);
    left: 50%;
    z-index: 11;
	background:url("https://www.koeitecmoamerica.com/sw5/images/new.png") no-repeat center top; position: absolute; background-size:calc(70/768*100vw) calc(20/768*100vw); width:calc(70/768*100vw); height: calc(20/768*100vw);
	margin-left: calc(-35/768*100vw);
}
	
/* footer */
footer{padding:calc(40/768*100vw) 0 calc(240/768*100vw);margin-top: -1px;}
footer p{font-size:calc(18/768*100vw); color: #fff; margin-top: calc(30/768*100vw); padding:0  calc(30/768*100vw);}	
footer p img{height:calc(20/768*100vw); width: auto;}

footer p.btn01{width: calc(384/1920*100vw);  position:absolute; top: calc(40/1920*100vw); right: calc(40/1920*100vw);}
footer footerp.btn01 img{width:100%;}
footer p.btn01 img{transition: opacity 0.3s ease-out;}

footer ul.platform {display: flex; text-align: center; align-items: center; justify-content: center; margin:0 auto; padding: 0 2vw;
    flex-wrap: wrap;}
footer ul.platform li{margin:1vw 2vw;}
footer ul.platform li img{height: 6.3vw;}
footer ul.platform li:last-child img{height: 5.5vw;}
footer ul.platform .ESRB {width: calc(200/768*100vw)!important; height: calc(113/768*100vw)!important;margin: 0 30vw;}



footer ul.sns{display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; bottom: 20vw; padding: 0; right: 0;}
footer ul.sns li{margin: 1vw;}
footer ul.sns img{width: 10vw; transition: opacity 0.3s ease-out;}
footer ul.sns a:hover img{ opacity: 0.7;}	
	
	
.buy{position:fixed;bottom:calc(-10/768*100vw); left:calc(230/768*100vw); z-index:90; width:calc(300/768*100vw); min-width:inherit; max-width:inherit;}
	
	
}


@media screen and (min-width:1600px){


footer ul.sns{left:90px; bottom: 10px; padding: 0;}
footer ul.sns li{margin: 10px;}
footer ul.sns img{width: 56px; transition: opacity 0.3s ease-out;}


footer .twitter{background:url("https://www.koeitecmoamerica.com/sw5/images/bg.jpg") no-repeat center ; display: flex; padding: calc(50/1920*100vw) calc(100/1920*100vw); justify-content: center; align-items: center;}
footer #notice p.txt04{width: calc(633/1920*100vw); padding-right: 0;}
footer #notice p.btn03{width: calc(827/1920*100vw);}
footer #notice p.btn03 img{transition: opacity 0.3s ease-out;}


footer p.btn01{width: calc(384/1920*100vw);  position:absolute; top: calc(40/1920*100vw); right: calc(40/1920*100vw);}
footer p.btn01 img{width:100%;}
footer p.btn01 img{transition: opacity 0.3s ease-out;}

footer ul.platform { padding: 0 10px;}
footer ul.platform li{margin:0 20px;}
footer ul.platform li img{height: 53px;}
footer ul.platform li:last-child img{height: 72px;}
footer ul.platform .ESRB {width: 193px; height: 110px;}


	
	
}