/* 共有 */

.p-gameFlow, .p-direction, .p-spec {

  padding-top: 6.94vw;

}



/* キービジュアル */

.main-bg-kv-title {

  width: 52.01vw;

  left: 2%;

  top: 50%;

  transform: translateY(-50%);

}



/* ポイント */

.p-point--img01 {

  background: url(../img/bg_point01.png) no-repeat center center  / cover;

}

.p-point--content .p-inner {

  max-width: 1040px;

  display: flex;

  flex-direction: column;

  margin: 0 auto;

}

.p-point--img01 .p-inner {

  padding: 6.94vw 0 14.31vw 0;

}

.p-point01--ttl {

  max-width: 49.38vw;

  margin-bottom: 2.08vw;

}

.p-point01--txt {

  max-width: 38.68vw;

}



/* ハードウェア */

.p-hardware--content {

  background-color: #000000;

}

.p-hardware .c-h2__title {

  margin-bottom: 5.97vw;

}

.p-hardware .c-line {

  margin: 0 0;

  height: 6px;

  border: none;

  opacity: 0;

}

.p-hardware .c-line.c-line--right {

  background: linear-gradient(-90deg, rgba(219,0,27,1) 25%, rgba(17,0,2,1) 100%);

}

.p-hardware .c-line--right.js-target.is-active {

  animation: fade-right 0.5s ease-out forwards;

}

@keyframes fade-right {

  0% {

    transform: translate(100%, 0);

    opacity: 0;

  }

  100% {

    transform: translate(0, 0);

    opacity: 1;

  }

}

.p-hardware .c-line.c-line--left {

  background: linear-gradient(90deg, rgba(219,0,27,1) 25%, rgba(17,0,2,1) 100%);

}

.p-hardware .c-line--left.js-target.is-active {

  animation: fade-left 0.5s ease-out forwards;

}

@keyframes fade-left {

  0% {

    transform: translate(0%, 0);

    opacity: 0;

  }

  100% {

    transform: translate(0, 0);

    opacity: 1;

  }

}

.p-hardware--content .p-inner {

  max-width: 1040px;

  display: flex;

  flex-direction: column;

  margin: 0 auto;

}

.p-hardware--content .p-inner.flex-end {

  align-items: flex-end;

}

.p-hardware--img01 {

  background: url(../img/bg_hardware01.png) no-repeat center right  / contain;

  margin-top: 2.08vw;

}

.p-hardware--img01 .p-inner {

  padding: 2.99vw 0 3.47vw 0;

}

.p-hardware01--ttl {

  max-width: 50.56vw;

  margin-bottom: 3.96vw;

}

.p-hardware01--txt {

  max-width: 38.82vw;

  margin-left: 2%;

}

.p-hardware--img02 {

  background: url(../img/bg_hardware02.png) no-repeat center center  / cover;

}

.p-hardware--img02 .p-inner {

  padding: 6.94vw 0 9.44vw 0;

}

.p-hardware02--ttl {

  max-width: 43.06vw;

  margin-bottom: 3.33vw;

}

.p-hardware02--txt {

  max-width: 39.86vw;

}

.p-hardware--img03 {

  background: url(../img/bg_hardware03.png) no-repeat bottom center  / cover;

}

.p-hardware--img03 .p-inner {

  padding: 3.13vw 0 4.58vw 0;;

}

.p-hardware03--ttl {

  max-width: 46.74vw;

  margin-bottom: 3.06vw;

}

.p-hardware03--txt {

  max-width: 47.15vw;

  margin-bottom: 4.24vw;

}

.p-hardware03--img {

  max-width: 48.06vw;

}



/* ゲームフロー */

.p-gameFlow {

  background: url(../img/bg_gameFlow.png) no-repeat center center  / cover;

  box-shadow: 0 -10px 13px -3px #000000 inset;

}

.p-gameFlow .c-h2__title {

  margin-bottom: 6.18vw;

}

.p-gameFlow--content {

  max-width: 1440px;

  margin: 0 auto;

}

.p-gameFlow--img {

  position: relative;

  padding: 0 2vw 8.5vw;

}

.p-gameFlow--img img {

  width: 100%;

}

.p-gameFlow--img::before {

  content: '';

  width: 47.22vw;

  max-width: 680px;

  height: 28.54vw;

  max-height: 411px;

  background: url(../img/img_gameFlow_chara.png) no-repeat center center  / contain;

  position: absolute;

  bottom: -0.69vw;

  right: -3.47vw;

  z-index: 1;

}



/* p-演出 */

.p-direction .c-h2__title {

  margin-bottom: 3.26vw;

}

.p-direction--content {

  max-width: 1440px;

  margin: 0 auto;

}

.p-direction .c-h3__title {

  max-width: 1276px;

  margin-bottom: 3.4vw;

}

.p-direction--img {

  padding-bottom: 7.5vw;

}

.p-direction--img01, .p-direction--img02, .p-direction--img03, .p-direction--img04 {

  padding: 0 2vw;

}

.p-direction--img img {

  width: 100%;

}

.p-direction--img02, .p-direction--img03, .p-direction--img04  {

  position: relative;

}

.p-direction--img02::before {

  content: '';

  width: 70.56vw;

  height: 73.54vw;

  position: absolute;

  right: 0;

  background: url(../img/bg_direction02.png) no-repeat center right  / contain;

}

.p-direction--img03::before {

  content: '';

  width: 46.88vw;

  height: 58.26vw;

  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  background: url(../img/bg_direction03.png) no-repeat center center  / contain;

}

.p-direction--img04::before {

  content: '';

  width: 84.86vw;

  height: 71.11vw;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50% , -50%);

  background: url(../img/bg_direction04.png) no-repeat center right  / contain;

}



/* スペック */

.p-spec {

  background: url(../img/bg_spec.png) no-repeat center center  / cover;

  padding-bottom: 5.83vw;

}

.p-spec .c-h2__title {

  margin-bottom: 3.47vw;

}

.p-spec--img {

  max-width: 1069px;

  margin: 0 auto;

}



@media screen and (max-width: 1040px){

  /* ポイント */

  .p-point--content .p-inner {

    padding-right: 10vw;

    padding-left: 10vw;

  }



  /* ハードウェア */

  .p-hardware--content .p-inner {

    padding-right: 10vw;

    padding-left: 10vw;

  }

}



@media screen and (max-width: 900px){

  /* キービジュアル */

  .main-banner {

    width: 20%;

    max-width: 251px;

    display: flex;

  }



    /* ポイント */

    .p-point--content .p-inner {

      padding-right: 6.67vw;

      padding-left: 6.67vw;

    }



  /* ハードウェア */

  .p-hardware--content .p-inner {

    padding-right: 6.67vw;

    padding-left: 6.67vw;

  }

  .p-hardware .c-line {

    height: 2px;

  }



  /* スペック */

  .p-spec--img {

    padding: 0 2vw;

  }

}