@charset "UTF-8";
* img {
  width: 100%;
  display: block; }

*:hover {
  transition: all  0.3s ease; }

* {
  line-height: 1.5; }

#wp {
  overflow: hidden; }

@media (max-width: 700px) {
  #contents {
    position: relative; } }

/*         BUTTON         */
.top__button {
  text-align: center; }

.top__button-btn {
  font-size: 3vw;
  color: #fff;
  text-align: center;
  padding: 20px 90px;
  text-decoration: none;
  border: 2px solid #99782d;
  margin: 0 auto 0;
  display: inline-block;
  font-size: 24px;
  background-color: #99782d;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s; }
  .top__button-btn:hover {
    background-color: #dfb148;
    border: #dfb148 solid 2px; }

/*         BUTTON         */
/*         VIDEO-BG         */
.bg__video-area {
  z-index: -1;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden; }

.bg__video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh;
  /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw;
  /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  position: fixed; }

/*         VIDEO-BG         */
.border00 {
  border: #cfcbe0 2px solid;
  border-image: linear-gradient(to bottom, #99782d 0%, #c1932b 50%, #dfb148 100%);
  border-image-slice: 1;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.5); }

/*=======================================================================

                                HEADER 

 =======================================================================*/
header {
  background: #000; }

.header__contents {
  width: 100vw;
  height: calc(100vw*0.65);
  background-color: #000;
  background-image: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/kvbg02.jpg);
  animation: fadein 2s ease-out forwards;
  background-position: right 0 top 20%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative; }
  @media (max-width: 700px) {
    .header__contents {
      height: calc(100vw*1.9);
      background-image: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/kvbg-sp02.jpg);
      background-size: 100% auto;
      background-position: right 0 top 0%;
      position: relative; } }

.header__leftbox {
  position: absolute;
  left: 1%;
  top: 26%;
  width: 40%;
  text-align: center;
  visibility: hidden; }
  @media (max-width: 700px) {
    .header__leftbox {
      position: initial;
      width: 100%;
      top: auto;
      left: auto; } }

.header-catch, .catchred {
  font-size: 3vw;
  font-family: itc-benguiat-condensed, sans-serif;
  font-weight: 700; }
  @media (max-width: 700px) {
    .header-catch, .catchred {
      font-size: 5vw;
      text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; } }

.header-catch {
  visibility: hidden;
  text-align: center; }

.catchred {
  color: #d40000; }

.header-logo {
  width: 100%;
  visibility: hidden; }

.header-date, .header-order {
  width: 80%;
  margin: 0vw auto 2vw;
  font-size: 3.6vw;
  font-family: itc-benguiat-condensed, sans-serif; }
  @media (max-width: 700px) {
    .header-date, .header-order {
      width: 80%;
      margin: 0 auto;
      font-size: 8vw;
      text-align: center;
      padding: 2vw 0; } }

@media (max-width: 700px) {
  .header-date {
    margin-top: -2vw; } }

.header-order-box {
  position: relative;
  font-family: itc-benguiat-condensed, sans-serif;
  font-size: 3vw;
  letter-spacing: 0.05em; }

.header-order-box a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  color: #fff; }

.header-order {
  margin: 6% auto 0;
  background: #99782d;
  padding: 4% 2%;
  text-decoration: none;
  color: #fff; }

.header-order:hover {
  background: #dfb148;
  transition: all  0.3s ease; }

.header-order a {
  display: block; }

.header-trailer {
  position: absolute;
  right: 2vw;
  bottom: 4vw;
  width: 30%;
  visibility: hidden; }
  @media (max-width: 700px) {
    .header-trailer {
      position: absolute;
      width: 90%;
      margin: 0 5%;
      right: auto;
      bottom: 4vw; } }

.header-order-box2 {
  position: fixed;
  bottom: 0;
  z-index: 999;
  left: 0;
  right: 0; }
  .header-order-box2 .header-order {
    width: 60%;
    margin: 0;
    padding: 4% 20%;
    background: #99782d; }
    .header-order-box2 .header-order:hover {
      background: #dfb148; }

@media (max-width: 700px) {
  .header-main-sp {
    width: 90%;
    padding: 0 5%;
    position: absolute;
    top: 60vw; } }

/*=======================================================================

                                TITLE

 =======================================================================*/
.story__title, .sys__title {
  transform: rotate(90deg); }

.chara__title, .tra__title {
  transform: rotate(-270deg); }

.title-main {
  font-family: itc-benguiat-condensed, sans-serif;
  font-weight: 500;
  font-size: 9vw; }
  @media (min-width: 701px) and (max-width: 940px) {
    .title-main {
      text-align: center; } }
  @media (max-width: 700px) {
    .title-main {
      text-align: center;
      font-size: 15vw; } }

.title-ruby {
  font-family: itc-benguiat-condensed, sans-serif;
  color: #99782d;
  font-size: 2vw;
  margin-top: -2vw; }
  @media (min-width: 701px) and (max-width: 940px) {
    .title-ruby {
      text-align: center; } }
  @media (max-width: 700px) {
    .title-ruby {
      text-align: center;
      font-size: 3vw; } }

.story__title, .sys__title {
  position: absolute;
  right: -10vw; }

.chara__title {
  position: absolute;
  left: -40vw;
  top: 20vw;
  z-index: 5; }

.sys__title {
  top: 17vw; }

.tra__title {
  position: absolute;
  left: -12vw;
  top: 10vw;
  font-size: 90%; }

.pd__title {
  width: 50%;
  margin: 4vw auto;
  text-align: center; }

@media (min-width: 701px) and (max-width: 940px) {
  .story__title, .sys__title, .chara__title, .tra__title, .pd__title {
    transform: rotate(0);
    position: initial;
    right: auto;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    margin: 0 auto 6vw;
    font-size: 100%; } }
@media (max-width: 700px) {
  .story__title, .sys__title, .chara__title, .tra__title, .pd__title {
    transform: rotate(0);
    position: initial;
    right: auto;
    top: auto;
    left: auto;
    bottom: auto;
    width: 90%;
    margin: 0 auto 6vw;
    font-size: 100%; } }

/*=======================================================================

                                NEWS

 =======================================================================*/
.news__contents {
  background: #000;
  padding: 20px 0 0;
  width: 100%; }
  @media (min-width: 701px) and (max-width: 940px) {
    .news__contents {
      padding: 2vw 0 0; } }
  @media (max-width: 700px) {
    .news__contents {
      padding: 2vw 0 0; } }

.news-slider {
  visibility: hidden; }

/*=======================================================================

                                STORY 

 =======================================================================*/
.story__contents {
  width: 100%;
  padding: 100px 0;
  position: relative; }
  @media (min-width: 701px) and (max-width: 940px) {
    .story__contents {
      padding: 10vw 0; } }
  @media (max-width: 700px) {
    .story__contents {
      padding: 10vw 0; } }
  .story__contents .story__ol {
    width: 80%;
    margin: 0 auto 3em;
    position: relative;
    padding-top: 100px; }
    @media (min-width: 701px) and (max-width: 940px) {
      .story__contents .story__ol {
        width: 80%;
        flex-direction: column;
        padding-top: 0;
        margin: 0 auto; } }
    @media (max-width: 700px) {
      .story__contents .story__ol {
        width: 94%;
        flex-direction: column;
        padding-top: 0;
        margin: 0 auto; } }
    .story__contents .story__ol .story__txt {
      width: 77%;
      margin: 0.7em 0;
      line-height: 1.5;
      font-size: 2.2vw;
      text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; }
      @media (min-width: 701px) and (max-width: 940px) {
        .story__contents .story__ol .story__txt {
          width: 100%;
          margin: 0.7em auto;
          font-size: 3vw; } }
      @media (max-width: 700px) {
        .story__contents .story__ol .story__txt {
          width: 100%;
          margin: 0.7em auto;
          font-size: 4.6vw;
          text-align: center; } }

.story__main {
  margin-bottom: 6vw; }

 /*=======================================================================

                                CHARACTERS 

 =======================================================================*/
.chara__contents {
  width: 100%;
  padding: 50px 0;
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/tz/bg.jpg) no-repeat center top 30%;
  background-size: cover; }
  @media (min-width: 701px) and (max-width: 940px) {
    .chara__contents {
      padding: 10vw 0; } }
  @media (max-width: 700px) {
    .chara__contents {
      padding: 10vw 0;
      height: 224vw; } }
  .chara__contents .chara__flex {
    width: 100%;
    padding-top: 50px;
    display: flex; }
    @media (min-width: 701px) and (max-width: 940px) {
      .chara__contents .chara__flex {
        width: 90%;
        flex-direction: column;
        padding-top: 0;
        margin: 0 auto; } }
    @media (max-width: 700px) {
      .chara__contents .chara__flex {
        width: 100%;
        flex-direction: column;
        padding-top: 0;
        margin: 0 auto; } }
    .chara__contents .chara__flex .chara__title-box {
      width: 12%; }
    .chara__contents .chara__flex .chara__main {
      width: 72%;
      position: relative; }
      @media (min-width: 701px) and (max-width: 940px) {
        .chara__contents .chara__flex .chara__main {
          width: 100%; } }
      @media (max-width: 700px) {
        .chara__contents .chara__flex .chara__main {
          width: 100%;
          padding-bottom: 20vw; } }

.null01 {
  flex-basis: 10%; }
  @media (min-width: 701px) and (max-width: 940px) {
    .null01 {
      display: none; } }
  @media (max-width: 700px) {
    .null01 {
      display: none; } }

.null02 {
  flex-basis: 6%; }
  @media (min-width: 701px) and (max-width: 940px) {
    .null02 {
      display: none; } }
  @media (max-width: 700px) {
    .null02 {
      display: none; } }

.chara__nav {
  max-width: 74%;
  margin-bottom: -95px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  position: relative;
  z-index: 10; }
  @media (min-width: 701px) and (max-width: 940px) {
    .chara__nav {
      margin-top: 4vw;
      margin-bottom: 13vw;
      max-width: calc(99%); } }
  @media (max-width: 700px) {
    .chara__nav {
      max-width: 90%;
      position: absolute;
      top: 160vw;
      left: 0;
      right: 0;
      margin-bottom: 0vw;
      padding: 0 5vw;
      justify-content: center; } }

.chara-thm {
  width: 18%;
  margin: 0 0.5% 0.55% 0;
  background: #000;
  display: block;
  border: solid #333 2px; }
  @media (min-width: 701px) and (max-width: 940px) {
    .chara-thm {
      width: 18.2%;
      margin: 0 0.5% 0.55% 0.5%; } }
  @media (max-width: 700px) {
    .chara-thm {
      width: 21%;
      margin: 0 2% 2% 0; } }

.chara-thm img {
  filter: grayscale(100%);
  opacity: 0.5;
  width: 100%; }

.chara-thm.active img {
  opacity: 1;
  filter: grayscale(0%); }

.chara-thm.active {
  border: solid #99782d 2px; }

.chara__main .chara__slide-list {
  display: none; }

.chara__main .chara__slide-list.active {
  display: block; }

.chara__slide-list {
  position: relative; }
  @media (min-width: 701px) and (max-width: 940px) {
    .chara__slide-list {
      margin-top: -9vw; } }
  @media (max-width: 700px) {
    .chara__slide-list {
      padding-top: 10vw; } }

.chara_con {
  padding: 1.5vw 2.6vw 2vw;
  margin: 100px 0 0;
  border: solid #99782d;
  border-width: 2px 0 2px 2px;
  height: 34vw;
  background: #000;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.5); }
  @media (min-width: 701px) and (max-width: 940px) {
    .chara_con {
      border-width: 2px;
      margin: 0;
      height: 45vw; } }
  @media (max-width: 700px) {
    .chara_con {
      border-width: 2px;
      margin: 6vw 0 0;
      height: auto;
      z-index: 9;
      position: relative;
      background: rgba(0, 0, 0, 0.6);
      border-width: 0; } }

@media (max-width: 700px) {
  .chara_con_sp {
    border: solid #99782d;
    border-width: 2px 0 2px 0;
    height: 50vw;
    background: #000; } }

.chara01 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-01-bg.jpg) no-repeat center #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara01 {
      background: rgba(0, 0, 0, 0.5); } }

.chara02 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-02-bg.jpg) no-repeat center #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara02 {
      background: rgba(0, 0, 0, 0.5); } }

.chara03 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-03-bg.jpg) no-repeat center #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara03 {
      background: rgba(0, 0, 0, 0.5); } }

.chara04 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-04-bg.jpg) no-repeat center #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara04 {
      background: rgba(0, 0, 0, 0.5); } }

.chara05 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-05-bg.jpg) no-repeat right #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara05 {
      background: rgba(0, 0, 0, 0.5); } }

.chara06 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-06-bg.jpg) no-repeat right #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara06 {
      background: rgba(0, 0, 0, 0.5); } }

.chara07 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-07-bg.jpg) no-repeat right #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara07 {
      background: rgba(0, 0, 0, 0.5); } }

.chara08 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-08-bg.jpg) no-repeat right #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara08 {
      background: rgba(0, 0, 0, 0.5); } }

.chara09 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-09-bg.jpg) no-repeat right #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara09 {
      background: rgba(0, 0, 0, 0.5); } }

.chara10 {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-10-bg.jpg) no-repeat right #000;
  background-size: contain; }
  @media (max-width: 700px) {
    .chara10 {
      background: rgba(0, 0, 0, 0.5); } }

@media (max-width: 700px) {
  .chara01-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-01-bg.jpg) no-repeat #000;
    background-size: cover;
    background-position: left -30vw top 0; } }

@media (max-width: 700px) {
  .chara02-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-02-bg.jpg) no-repeat #000;
    background-size: cover;
    background-position: left -30vw top 0; } }

@media (max-width: 700px) {
  .chara03-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-03-bg.jpg) no-repeat #000;
    background-size: cover;
    background-position: left -20vw top -5vw; } }

@media (max-width: 700px) {
  .chara04-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-04-bg.jpg) no-repeat #000;
    background-size: cover;
    background-position: left -30vw top 0; } }

@media (max-width: 700px) {
  .chara05-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-05-bg-sp.jpg) no-repeat #000;
    background-size: cover; } }

@media (max-width: 700px) {
  .chara06-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-06-bg-sp.jpg) no-repeat #000;
    background-size: cover; } }

@media (max-width: 700px) {
  .chara07-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-07-bg-sp.jpg) no-repeat #000;
    background-size: cover; } }

@media (max-width: 700px) {
  .chara08-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-08-bg-sp.jpg) no-repeat #000;
    background-size: cover; } }

@media (max-width: 700px) {
  .chara09-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-09-bg-sp.jpg) no-repeat #000;
    background-size: cover; } }

@media (max-width: 700px) {
  .chara10-sp {
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/chara-10-bg-sp.jpg) no-repeat #000;
    background-size: cover; } }

.chara_box {
  width: 31.5vw; }
  @media (min-width: 701px) and (max-width: 940px) {
    .chara_box {
      width: 48vw; } }
  @media (max-width: 700px) {
    .chara_box {
      width: 100%; } }

.charaname {
  font-size: 4.64vw;
  color: #99782d;
  font-family: itc-benguiat-condensed, sans-serif;
  font-weight: 500;
  white-space: nowrap; }
  @media (min-width: 701px) and (max-width: 940px) {
    .charaname {
      font-size: 6vw; } }
  @media (max-width: 700px) {
    .charaname {
      font-size: 8.6vw;
      margin-bottom: 0.5em; } }

.charadata {
  font-size: 1.65vw; }
  .charadata p {
    margin-bottom: 0.5em; }
    @media (min-width: 701px) and (max-width: 940px) {
      .charadata p {
        font-size: 2.4vw; } }
    @media (max-width: 700px) {
      .charadata p {
        font-size: 3.8vw; } }

.chara_img {
  position: absolute;
  right: 0;
  top: -10vw;
  width: 25vw; }
  @media (min-width: 701px) and (max-width: 940px) {
    .chara_img {
      width: 35vw;
      top: -5vw; } }
  @media (max-width: 700px) {
    .chara_img {
      width: 70vw;
      height: auto;
      right: -10vw;
      top: 0; } }

 /*=======================================================================

                                SYSTEM 

 =======================================================================*/
.system__contents {
  width: 100%;
  padding: 50px 0;
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/bg001.jpg) #000 no-repeat;
  background-size: cover; }
  @media (min-width: 701px) and (max-width: 940px) {
    .system__contents {
      padding: 10vw 0; } }
  @media (max-width: 700px) {
    .system__contents {
      padding: 10vw 0; } }

.sys__flex {
  width: 80%;
  position: relative;
  margin: 0 auto;
  padding-top: 50px; }
  @media (min-width: 701px) and (max-width: 940px) {
    .sys__flex {
      width: 90%;
      padding-top: 0; } }
  @media (max-width: 700px) {
    .sys__flex {
      width: 100%;
      padding-top: 0; } }
  .sys__flex .sys__base {
    width: calc(90%);
    background: #000;
    margin: 40px 0 40px -10vw;
    border: #cfcbe0 2px solid;
    border-image: linear-gradient(to bottom, #99782d 0%, #c1932b 50%, #dfb148 100%);
    border-image-slice: 1;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.5);
    background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/sysbg01.jpg) #000 no-repeat;
    background-size: auto 100%;
    background-position: center; }
    @media (min-width: 701px) and (max-width: 940px) {
      .sys__flex .sys__base {
        width: 100%;
        margin: 6vw 0 2vw; } }
    @media (max-width: 700px) {
      .sys__flex .sys__base {
        width: 100%;
        margin: 6vw 0 4vw;
        background: none;
        border-width: 0; } }
  @media (max-width: 700px) {
    .sys__flex .sys__base-sp {
      border: solid #99782d;
      border-width: 2px 0 2px 0; } }
  .sys__flex .sys__base-text {
    width: 50%;
    min-width: 400px;
    padding: 3vw 1.5vw; }
    @media (max-width: 700px) {
      .sys__flex .sys__base-text {
        width: 100%;
        min-width: auto; } }
  .sys__flex .sys__base-hl {
    font-size: 4.2vw;
    color: #99782d;
    font-family: itc-benguiat-condensed, sans-serif;
    font-weight: 500;
    white-space: nowrap;
    margin-bottom: 14px;
    text-align: center; }
    @media (min-width: 701px) and (max-width: 940px) {
      .sys__flex .sys__base-hl {
        font-size: 5.5vw; } }
    @media (max-width: 700px) {
      .sys__flex .sys__base-hl {
        font-size: 10vw; } }
  .sys__flex .sys__base-txt {
    font-size: 1.65vw;
    margin: 0.5em 0 0;
    line-height: 1.5; }
    @media (min-width: 701px) and (max-width: 940px) {
      .sys__flex .sys__base-txt {
        font-size: 2.4vw; } }
    @media (max-width: 700px) {
      .sys__flex .sys__base-txt {
        font-size: 3.8vw; } }
  .sys__flex .sys__base-bk {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    margin-bottom: 20px; }
    @media (max-width: 700px) {
      .sys__flex .sys__base-bk {
        background: none; } }

.sys__flex02 {
  width: 80%;
  margin: 0 auto 50px;
  display: flex;
  justify-content: space-between; }
  @media (min-width: 701px) and (max-width: 940px) {
    .sys__flex02 {
      width: 90%; } }
  @media (max-width: 700px) {
    .sys__flex02 {
      width: 94%;
      flex-direction: column; } }
  .sys__flex02 .sys__add01, .sys__flex02 .sys__add02 {
    width: 48%; }
    @media (max-width: 700px) {
      .sys__flex02 .sys__add01, .sys__flex02 .sys__add02 {
        width: 100%; } }
  @media (max-width: 700px) {
    .sys__flex02 .sys__add01 {
      margin-bottom: 4vw; } }

.sys__add-t {
  background: #000;
  color: #fff;
  font-size: 28pt;
  text-align: right;
  padding: 2px 60px 2px 0;
  position: relative; }
  .sys__add-t:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 26px;
    height: 26px;
    background-image: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/arrow.svg);
    background-size: contain;
    right: 16px;
    top: 16px; }
  @media (min-width: 701px) and (max-width: 940px) {
    .sys__add-t {
      font-size: 3.5vw; } }

 /*=======================================================================

                                TRAILERS

 =======================================================================*/
.trailer__contents {
  width: 100%;
  padding: 50px 0 150px;
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/bg002.jpg) #000 no-repeat center fixed;
  background-size: cover; }
  @media (min-width: 701px) and (max-width: 940px) {
    .trailer__contents {
      padding: 10vw 0; } }
  @media (max-width: 700px) {
    .trailer__contents {
      padding: 10vw 0; } }

.tra__title-box {
  width: 15%;
  max-width: 180px; }

.tra__flex {
  width: 80%;
  margin: 0 auto;
  padding-top: 100px;
  display: flex;
  justify-content: space-between;
  position: relative; }
  @media (min-width: 701px) and (max-width: 940px) {
    .tra__flex {
      width: 90%;
      flex-direction: column;
      padding-top: 0; } }
  @media (max-width: 700px) {
    .tra__flex {
      width: 94%;
      flex-direction: column;
      padding-top: 0; } }
  .tra__flex .tra__main {
    width: 80%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    @media (min-width: 701px) and (max-width: 940px) {
      .tra__flex .tra__main {
        width: 100%; } }
    @media (max-width: 700px) {
      .tra__flex .tra__main {
        width: 100%; } }
    .tra__flex .tra__main .tra__main-list {
      width: 48%;
      position: relative;
      margin-bottom: 5%; }

 /*=======================================================================

                                PRODUCTS

 =======================================================================*/
.product__contents {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/bg001.jpg) #000 no-repeat;
  background-size: cover;
  width: 100%;
  padding: 50px 0 100px; }
  @media (min-width: 701px) and (max-width: 940px) {
    .product__contents {
      padding: 10vw 0; } }
  @media (max-width: 700px) {
    .product__contents {
      padding: 10vw 0; } }

.pd__detail {
  width: 80%;
  margin: 0 auto; }
  @media (min-width: 701px) and (max-width: 940px) {
    .pd__detail {
      width: 90%; } }
  @media (max-width: 700px) {
    .pd__detail {
      width: 94%; } }
  .pd__detail tr, .pd__detail th, .pd__detail td {
    font-weight: 300;
    padding: 0.6em 1em;
    text-align: left;
    line-height: 1.6; }
  .pd__detail th {
    width: 30%;
    font-size: 2.4vw;
    text-align: right; }
    @media (min-width: 701px) and (max-width: 940px) {
      .pd__detail th {
        font-size: 2.8vw; } }
    @media (max-width: 700px) {
      .pd__detail th {
        color: #c1932b;
        font-size: 4.5vw;
        text-align: center; } }
  .pd__detail td {
    width: 70%;
    font-size: 2.2vw;
    padding-left: 2vw; }
    @media (min-width: 701px) and (max-width: 940px) {
      .pd__detail td {
        font-size: 2.8vw; } }
    @media (max-width: 700px) {
      .pd__detail td {
        font-size: 4.5vw;
        text-align: center; } }
  @media (max-width: 700px) {
    .pd__detail tr, .pd__detail td, .pd__detail th {
      width: auto;
      display: block;
      padding: 0.2em; } }
  @media (max-width: 700px) {
    .pd__detail tr {
      margin-top: 3vw; } }

.pd__note {
  width: 80%;
  margin: 2em auto 0em;
  text-align: center;
  font-size: 1.2vw;
  line-height: 1.8; }
  @media (min-width: 701px) and (max-width: 940px) {
    .pd__note {
      font-size: 1.4vw; } }
  @media (max-width: 700px) {
    .pd__note {
      font-size: 2.4vw; } }

 /*=======================================================================

                        ========AFTER  RELEASE

 =======================================================================*/
.news__contents {
  background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/update-back.jpg) #000 no-repeat;
  background-position: bottom right;
  background-size: contain; }
  @media (max-width: 700px) {
    .news__contents {
      background: url(https://www.koeitecmoamerica.com/fatalframe/mask/img/top/update-back-sp.jpg) #000 no-repeat;
      background-position: bottom right;
      background-size: contain; } }

.banner {
  width: 100%;
  padding: 5% 0 5%; }
  @media (max-width: 700px) {
    .banner {
      padding: 10vw 0 10vw; } }

.update {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center; }
  @media (max-width: 700px) {
    .update {
      flex-direction: column; } }

.update__list {
  text-align: center;
  width: 35%;
  margin: 0 1%;
  font-size: 2.3vw;
  background-image: url("https://www.koeitecmoamerica.com/fatalframe/mask/img/top/btn-bg.jpg");
  background-size: cover;
  padding: 2%;
  text-shadow: 1px 1px 3px #1e0b00,1px 1px 3px #1e0b00,1px 3px 2px #1e0b00; }
  @media (min-width: 701px) and (max-width: 940px) {
    .update__list {
      width: 40%; } }
  @media (max-width: 700px) {
    .update__list {
      width: 100%;
      padding: 4% 0%;
      margin-bottom: 2vw;
      font-size: 20px;
      background: url("https://www.koeitecmoamerica.com/fatalframe/mask/img/top/btn-bg-sp.jpg");
      background-size: cover; } }

.update__list a {
  text-decoration: none;
  color: #fff;
  display: block;
  width: 100%;
  height: 100%; }

.update__list:hover {
  filter: brightness(130%); }

.banner-event {
  width: 80%;
  margin: 2% auto 0;
  display: flex;
  justify-content: center; }

.banner-event__list {
  width: 45%;
  margin: 1%;
  border: solid 1px #666; }
  @media (max-width: 700px) {
    .banner-event__list {
      width: 100%;
      margin: 1% 0; } }

.banner-event__list a:hover {
  filter: brightness(150%); }

 /*=======================================================================

                                AFTER  RELEASE=====

 =======================================================================*/

/*# sourceMappingURL=top.css.map */