@charset "utf-8";
/* ===================================================================
CSS information

 file name  :style.css
 style info :
=================================================================== */
/* =================================
   @BASE
================================= */
body {
  margin: 0;
}
img {
  vertical-align: middle;
}
#wrap {
  width: 100%;
  overflow: hidden;
  min-width: 1000px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  color: #ccc;
}
/* =================================
   @TOP CONTENTS
================================= */
#bgndVideo {
  width: 100%;
  height: 100%;
}
#video-block {
  position: absolute;
  overflow: hidden;
  width: 100%;
}
#overlay {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-overlay.png) repeat;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 500;
}
.hideSP {
  display: block;
}
.hidePC {
  display: none;
}
#top-contents {
  overflow: hidden;
  background-color: #000;
}
#top-contents .inner {
  position: relative;
  top: 50px;
  min-height: 590px;
  height: 100%;
}
h1 {
  position: absolute;
  left: 50px;
}
#logo-area {
  position: absolute;
  right: 50px;
}
#logo-area ul li {
  float: left;
  margin-left: 21px;
  height: 23px;
  line-height: 23px;
}
#top-footer-area {
  position: relative;
}
#purchase-area, #control-area, #adjustment-area {
  position: absolute;
  bottom: 180px;
}
#purchase-area {
  left: 50px;
}
#purchase-area ul li {
  float: left;
  margin-right: 10px;
  height: 54px;
}

/*shopボタン*/
.bg-cart a {
  display: inline-block;
  width: 54px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 52px;
  outline: none;
}
.bg-cart a::before, .bg-cart a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.bg-cart a, .bg-cart a::before, .bg-cart a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}
.bg-cart a {
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  background-color: rgba(210,0,27,0.7);
  line-height: 50px;
}
.bg-cart a:hover {
  border: 1px solid #b30c22;
  background-color: rgba(210,0,27,0.3);
}
.bg-cart a::before, .bg-cart a::after {
  height: 100%;
  top: 0;
  width: 50%;
  background-color: transparent;
}
.bg-cart a::before {
  right: 0;
}
.bg-cart a::after {
  left: 0;
}
.bg-cart a:hover::before, .bg-cart a:hover::after {
  width: 0;
  background-color: #b30c22;
}

/*初回購入特典ボタン*/
.bg-revolutionary a {
  display: inline-block;
  width: 192px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.bg-revolutionary a::before, .bg-revolutionary a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.bg-revolutionary a, .bg-revolutionary a::before, .bg-revolutionary a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}
.bg-revolutionary a {
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  background-color: rgba(0,0,0,0.7);
  line-height: 50px;
}
.bg-revolutionary a:hover {
  border: 1px solid #444444;
  background-color: rgba(0,0,0,0.3);
}
.bg-revolutionary a::before, .bg-revolutionary a::after {
  height: 100%;
  top: 0;
  width: 50%;
  background-color: transparent;
}
.bg-revolutionary a::before {
  right: 0;
}
.bg-revolutionary a::after {
  left: 0;
}
.bg-revolutionary a:hover::before, .bg-revolutionary a:hover::after {
  width: 0;
  background-color: rgba(0,0,0,0.7);
}

/*DLCボタン*/
.bg-dlc a {
  display: inline-block;
  width: 192px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.bg-dlc a::before, .bg-dlc a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.bg-dlc a, .bg-dlc a::before, .bg-dlc a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}
.bg-dlc a {
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  background-color: rgba(0,0,0,0.7);
  line-height: 50px;
}
.bg-dlc a:hover {
  border: 1px solid #444444;
  background-color: rgba(0,0,0,0.3);
}
.bg-dlc a::before, .bg-revolutionary a::after {
  height: 100%;
  top: 0;
  width: 50%;
  background-color: transparent;
}
.bg-dlc a::before {
  right: 0;
}
.bg-dlc a::after {
  left: 0;
}
.bg-dlc a:hover::before, .bg-revolutionary a:hover::after {
  width: 0;
  background-color: rgba(0,0,0,0.7);
}

/*サバゲーボタン*/
.bg-sg a {
  display: inline-block;
  width: 216px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  color:#c8f89a;
}
.bg-sg a::before, .bg-sg a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.bg-sg a, .bg-sg a::before, .bg-sg a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}
.bg-sg a {
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  background-color: rgba(0,54,8,0.7);
  line-height: 50px;
}
.bg-sg a:hover {
  border: 1px solid #3f6e4a;
  background-color: rgba(0,54,8,0.3);
}
.bg-sg a::before, .bg-revolutionary a::after {
  height: 100%;
  top: 0;
  width: 50%;
  background-color: transparent;
}
.bg-sg a::before {
  right: 0;
}
.bg-sg a::after {
  left: 0;
}
.bg-sg a:hover::before, .bg-sg a:hover::after {
  width: 0;
  background-color: rgba(0,54,8,0.7);
}

/*発売記念ボタン*/
.bg-gift a {
  display: inline-block;
  width: 482px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  color:#c8f89a;
}
.bg-gift a::before, .bg-gift a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.bg-gift a, .bg-gift a::before, .bg-gift a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}
.bg-gift a {
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  background-color: rgba(60,37,0,0.7);
  line-height: 50px;
}
.bg-gift a:hover {
  border: 1px solid #7e792a;
  background-color: rgba(60,37,0,0.3);
}
.bg-gift a::before, .bg-revolutionary a::after {
  height: 100%;
  top: 0;
  width: 50%;
  background-color: transparent;
}
.bg-gift a::before {
  right: 0;
}
.bg-gift a::after {
  left: 0;
}
.bg-gift a:hover::before, .bg-sg a:hover::after {
  width: 0;
  background-color: rgba(60,37,0,0.7);
}


/*パッチ配信ボタン*/
.bg-patch a {
  display: inline-block;
  width: 482px;
  height: 32px;
  text-align: center;
  text-decoration: none;
  line-height: 32px;
  outline: none;
  color:#c8f89a;
}
.bg-patch a::before, .bg-patch a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.bg-patch a, .bg-patch a::before, .bg-patch a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}
.bg-patch a {
  position: relative;
  z-index: 2;
  border: 1px solid transparent;
  background-color: rgba(60,37,0,0.7);
  line-height: 28px;
}
.bg-patch a:hover {
  border: 1px solid #7e792a;
  background-color: rgba(60,37,0,0.3);
}
.bg-patch a::before, .bg-revolutionary a::after {
  height: 100%;
  top: 0;
  width: 50%;
  background-color: transparent;
}
.bg-patch a::before {
  right: 0;
}
.bg-patch a::after {
  left: 0;
}
.bg-patch a:hover::before, .bg-sg a:hover::after {
  width: 0;
  background-color: rgba(60,37,0,0.7);
}
#purchase-area ul li.bg-patch {
	height:32px;
}




#control-area {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media screen and (max-width:1199px) {
#control-area {
  left: 68%;
  -webkit-transform: translate(-68%, -68%);
  -ms-transform: translate(-68%, -68%);
  transform: translate(-68%, -68%);
}
}
#control-area a:hover {
  opacity: 0.8;
}
.control-arrow {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/btn-control-arrow.png) no-repeat top center;
  width: 115px;
  height: 19px;
  background-position: 0px -553px;
  position: absolute;
  top: -38px;
  left: -58px;
}
.control-main {
  position: absolute;
  right: 0px;
  left: -16px;
  bottom: 0px;
}
.control-scroll {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/btn-control-scroll.png) no-repeat;
  height: 14px;
  width: 4px;
  position: absolute;
  top: 8px;
  left: 14px;
  background-position: 0 4px;
}
#adjustment-area {
  right: 50px;
}
#adjustment-area ul li {
  float: left;
  margin-left: 25px;
  height: 25px;
  line-height: 25px;
}
#adjustment-area ul li a:hover {
  opacity: 0.8;
}
/* =================================
   @BOTTOM CONTENTS
================================= */

/* @MOVIE LIST
================================= */
#movie-list {
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
}
#movie-list li {
  float: left;
  width: 25%;
  position: relative;
  height: 160px;
}
#movie-list .bg-anime {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-movie-title.png) no-repeat top center;
  background-position: 0 0px;
  height: 39px;
  width: 220px;
  margin: 0 auto;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
}
#movie-list li img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#movie-list li.bg-philadelphiaTrailer {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-philadelphiaTrailer.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-thankyouTrailer {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-thankyouTrailer.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-freedomFighters {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-freedomFighters.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-guerrillaTactics101 {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-guerrillaTactics101.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-apexTrailer {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-apexTrailer.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-apexTrailer {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-apexTrailer.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-americaKnees {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-americaKnees.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-ignitionTrailer {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-ignitionTrailer.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li.bg-comingSoon {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/top/bg-comingSoon.jpg) no-repeat top center;
  background-size: cover;
}
#movie-list li a {
  display: block;
  width: auto;
  height: 160px;
  background-color: rgba(0,0,0,0.7);
}
/* @HEADER
================================= */
header {
  background-color: #000;
  margin-top: -76px;
  width: 100%;
  position: relative;
  top: 76px;
  z-index: 9999;
  height: 76px;
}
h2 {
  float: left;
  margin: 22px 26px 0;
  width: 114px;
}
nav {
  float: left;
  margin-top: 10px;
}
nav li {
  display: inline-block;
  width: auto;
  text-align: center;
  margin: 0 15px;
}
nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 15px 0;
}
nav a:hover {
  color: #d2001b;
}
nav a:after {
  display: block;
  content: "";
  width: 0;
  height: 1px;
  background-color: #d2001b;
  margin: -3px auto 0;
  -webkit-transition: .25s ease-out;
  -moz-transition: .25s ease-out;
  -ms-transition: .25s ease-out;
  transition: .25s ease-out;
}
nav a:hover:after {
  width: 100%;
}
nav a.current {
  color: #d2001b;
}
nav a.current:after {
  display: block;
  content: "";
  width: 0;
  height: 1px;
  background-color: #d2001b;
  margin: -3px auto 0;
  -webkit-transition: .25s ease-out;
  -moz-transition: .25s ease-out;
  -ms-transition: .25s ease-out;
  transition: .25s ease-out;
  width: 100%;
}
ul#sns {
  float: right;
  margin: 30px 20px 0 0;
}
ul#sns li {
  float: left;
  margin-left: 20px;
  width: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
li.btn-twitter {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/header/btn-twitter.png) no-repeat top center;
  background-position: 0 0;
  height: 20px;
}
li.btn-facebook {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/header/btn-facebook.png) no-repeat top center;
  background-position: 0 0;
  height: 20px;
}
li.btn-twitter a:hover {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/header/btn-twitter.png) no-repeat top center;
  background-position: 0 -20px;
  height: 20px;
}
li.btn-facebook a:hover {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/header/btn-facebook.png) no-repeat top center;
  background-position: 0 -20px;
  height: 20px;
}
/* @MAIN
================================= */
#bottom-contents {
  min-width: 940px;
  width: 100%;
}
#main {
  clear: both;
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/bg-main.gif) repeat top center;
  padding-top: 76px;
}
section {
  width: 100%;
}
.bg-animation {
  position: relative;
  width: 100%;
  height: auto;
  left: 50%;
  top: 27.5%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
}
/* @INTRODUCTION
================================= */
.introduction {
  height: 844px;
  background-color: #000;
}
.title-introduction {
  position: relative;
  top: 232px;
}
.title-introduction h3 img {
  padding: 0;
  position: absolute;
  top: -30px;
}
.bg-animation.introduction01 {
  height: 464px;
}
.bg-animation.introduction02 {
  height: 462px;
  top: 231px;
  z-index: 1;
}
.bg-animation.introduction03 {
  height: 380px;
  top: -272px;
}
.bg-introduction01 {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/introduction/bg-introduction01.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  height: 464px;
}
.bg-introduction02 {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/introduction/bg-introduction02.png) no-repeat top right;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  float: left;
  width: 40%;
  height: 462px;
}
.bg-introduction02_2 {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/introduction/bg-introduction02_2.png) no-repeat top right;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  width: 40%;
  height: 462px;
  position: relative;
}
.bg-introduction03 {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/introduction/bg-introduction03.jpg) no-repeat top left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  float: right;
  width: 65%;
  height: 380px;
}
p.text-introduction {
  position: relative;
}
p.text-introduction img {
  position: absolute;
  top: -760px;
  right: 5px;
}
/* @FEATURES
================================= */
#bottom-contents .features .inner {
  width: 1000px;
  margin: 0 auto;
}
.features, .storyMode {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/bg-section.jpg) no-repeat top center;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -ms-background-size: 100% auto;
  background-size: 100% auto;
  min-height: 1007px;
}
.features .bg-h3 {
  padding: 185px 0 85px;
}
.features h3, .storyMode h3 {
  width: 286px;
  height: 50px;
  margin: 0 auto;
  text-indent: 100%;
  white-space: nowrap;
}
.features h3 {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/features/h3.png) no-repeat top center;
  background-position: 0 -450px;
  padding: 0;
}
.features section {
  width: 100%;
  clear: both;
  overflow: hidden;
  margin-bottom: 40px;
  position: relative;
}
.features p.bg-image {
  width: 50%;
}
.features p.bg-image img {
  width: 100%;
  height: auto;
}
.features section dl {
  position: absolute;
  margin: auto;
  top: -100%;
  bottom: -100%;
  height: 285px;
}
.features section.tactics dl {
  height: 260px;
}
.features section.customize dl {
  height: 170px;
}
dl.float-R {
  left: 48%;
}
dl.float-L {
  right: 48%;
}
.features dt {
  margin-bottom: 20px;
}
.features dd {
  width: 475px;
  padding-left: 5px;
}
.features dd div {
  width: 475px;
  font-size: 14px;
  line-height: 1.8;
  text-shadow: 1px 0px 5px rgba(0, 0, 0, 0.6);
}
/* @STORY MODE
================================= */
.title-storyMode {
  position: relative;
}
.title-storyMode p img {
  position: absolute;
  top: -40px;
}
.storyMode {
  background-position-y: 542px;
  padding-top: 310px;
}
.bg-storyMode {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/storymode/bg-blocktitle.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  height: 464px;
}
.bg-storyMode p {
  text-align: left;
  padding: 185px 0;
}
.storyMode .bg-h3 {
  padding: 0 0 95px;
  margin-top: -112px;
}
.storyMode h3 {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/storymode/h3.png) no-repeat top center;
  background-position: 0 -450px;
  padding: 0;
}
#slide-storymode .inner, #slide-resistance .inner {
  width: 736px;
  margin: 0 auto;
}
li.gallery_list {
  float: left;
  width: 736px;
  height: 414px;
  -webkit-transform: scale(0.92);
  -ms-transform: scale(0.92);
  transform: scale(0.92);
}
li.active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
#slide-storymode h4 {
  margin: 75px auto 15px;
  text-align: center;
}
.zone-area {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/storymode/bg-zone.png) no-repeat top center;
  margin: 90px auto 80px;
  text-align: center;
}
.zone-area .inner {
  width: 1000px !important;
}
.zone-area dd {
  width: 480px;
  margin: 18px auto 0;
  text-align: left;
}
dl.redZone {
  float: left;
}
dl.yellowZone {
  float: right;
}
#slide-resistance h4 {
  text-align: center;
  margin-bottom: 34px;
}
p.text-storymode {
  width: 610px;
  margin: 0 auto;
  line-height: 1.8;
  text-shadow: 1px 0px 5px rgba(0, 0, 0, 0.6);
}
p.text-zone {
  margin-top: 15px;
  line-height: 1.8;
  text-shadow: 1px 0px 5px rgba(0, 0, 0, 0.6);
}
/* @SPEC
================================= */
.spec {
  background: url(https://media.spike-chunsoft.co.jp/pages/hfr/images/spec/bg.jpg) no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  margin-top: 125px;
  height: 157px;
}
.spec .inner {
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  padding: 22px 0;
}
/* ===================================
@ FOOTER
==================================== */
footer {
  background-color: #000;
  padding: 30px 0 50px;
  text-align: center;
}
footer ul {
  width: 1000px;
  overflow: hidden;
  margin: 0 auto 12px;
}
footer ul li {
  float: left;
  margin-right: 28px;
}
.copyright {
  clear: both;
}
/* ===================================
@  OTHER
==================================== */
.w1000 {
  width: 1000px;
  margin: 0 auto;
}
.float-L {
  float: left;
}
.float-R {
  float: right;
}
.pT30 {
  padding-top: 30px;
}
.mB10 {
  margin-bottom: 10px;
}