.fire {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 6rem 0 6rem;
  background: black;
  margin: 0rem 0 3rem;
}

.fire::before {
  position: absolute;
  content: "2022.12.09　EXECUTIVE FIGHT-BUSHIDO- 皇";
  transform: translateX(100%);
  animation: marquee 55s linear infinite alternate;
  width: 190vw;
  color: rgb(255 255 255);
  font-size: 6vw;
  top: -1.1rem;
  letter-spacing: 3px;
  z-index: 10;
  font-weight: bold;
  font-family: 'Font Awesome 5 Free';
}

.fire::after {
  position: absolute;
  content: "EXECUTIVE FIGHT-BUSHIDO- 皇 2022.12.09";
  transform: translateX(-100%);
  animation: marquee-r 55s linear infinite alternate;
  width: 190vw;
  color: rgb(255 255 255);
  font-size: 6vw;
  bottom: -1.1rem;
  letter-spacing: 3px;
  z-index: 10;
  font-weight: bold;
  font-family: 'Font Awesome 5 Free';
}

@keyframes marquee {
  0% {
    -moz-transform: translateX(30%);
    -webkit-transform: translateX(30%);
    transform: translateX(30%);
    opacity: 0;
  }

  2%,
  4%,
  6%,
  8%,
  10%,
  12%,
  14%,
  16%,
  18%,
  20%,
  22%,
  24%,
  26%,
  28%,
  30%,
  32%,
  34%,
  36%,
  38%,
  40%,
  42%,
  44%,
  46%,
  48%,
  50%,
  52%,
  54%,
  56%,
  58%,
  60%,
  62%,
  64%,
  66%,
  68%,
  70%,
  72%,
  74%,
  76%,
  78%,
  80%,
  82%,
  84%,
  86%,
  88%,
  90%,
  92%,
  94%,
  96%,
  98% {
    opacity: .4;
  }

  1%,
  3%,
  5%,
  7%,
  9%,
  11%,
  13%,
  15%,
  17%,
  19%,
  21%,
  23%,
  25%,
  27%,
  29%,
  31%,
  33%,
  35%,
  37%,
  39%,
  41%,
  43%,
  45%,
  47%,
  49%,
  51%,
  53%,
  55%,
  57%,
  59%,
  61%,
  63%,
  65%,
  67%,
  69%,
  71%,
  73%,
  75%,
  77%,
  79%,
  81%,
  83%,
  85%,
  87%,
  89%,
  91%,
  93%,
  95%,
  97%,
  99% {
    opacity: .7;
  }

  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
  }
}

@keyframes marquee-r {
  0% {
    -moz-transform: translateX(-80%) rotateZ(180deg);
    -webkit-transform: translateX(-80%) rotateZ(180deg);
    transform: translateX(-80%) rotateZ(180deg);
  }

  2%,
  4%,
  6%,
  8%,
  10%,
  12%,
  14%,
  16%,
  18%,
  20%,
  22%,
  24%,
  26%,
  28%,
  30%,
  32%,
  34%,
  36%,
  38%,
  40%,
  42%,
  44%,
  46%,
  48%,
  50%,
  52%,
  54%,
  56%,
  58%,
  60%,
  62%,
  64%,
  66%,
  68%,
  70%,
  72%,
  74%,
  76%,
  78%,
  80%,
  82%,
  84%,
  86%,
  88%,
  90%,
  92%,
  94%,
  96%,
  98% {
    opacity: .7;
  }

  1%,
  3%,
  5%,
  7%,
  9%,
  11%,
  13%,
  15%,
  17%,
  19%,
  21%,
  23%,
  25%,
  27%,
  29%,
  31%,
  33%,
  35%,
  37%,
  39%,
  41%,
  43%,
  45%,
  47%,
  49%,
  51%,
  53%,
  55%,
  57%,
  59%,
  61%,
  63%,
  65%,
  67%,
  69%,
  71%,
  73%,
  75%,
  77%,
  79%,
  81%,
  83%,
  85%,
  87%,
  89%,
  91%,
  93%,
  95%,
  97%,
  99% {
    opacity: .4;
  }

  100% {
    -moz-transform: translateX(100%) rotateZ(180deg);
    -webkit-transform: translateX(100%) rotateZ(180deg);
    transform: translateX(100%) rotateZ(180deg);
  }
}

.fire-flex {
  display: flex;
}

.fire-flex-left {
  width: 50%;
  margin-left: 0;
  align-self: center;
}

.fire-flex-left img {
  width: 100%;
}

.fire-flex-right {
  width: 49.5%;
  align-self: center;
  height: 100%;
  position: relative;
}

.fire-flex-right img {
  width: 100%;
}

.fire-ttl {
  position: relative;
  z-index: 2;
  line-height: 1.4;
  font-size: 3.6vw;
  color: white;
  padding-left: 1rem;
}
.fire-subttl {
  position: relative;
  z-index: 2;
  line-height: 1.4;
  font-size: 1.6vw;
  color: white;
  padding-left: 1rem;
}

/*.fire-ttl {
    position: absolute;
    z-index: 2;
    width: 80%;
}*/
.fire-ttl-red {
  position: absolute;
  z-index: 3;
  width: 56%;
  right: 1rem;
  top: 35%;
}

.fire-cap {
  width: 90%;
  margin: 0 auto;
  position: relative;
  padding: 1rem;
}

/*.fire-cap {
  width: 90%;
  margin: -5rem auto 0;
  position: relative;
  padding: 4rem 1rem 1rem 1rem;
  background: rgba(0, 0, 0, 0.6);
}*/
.fire-cap-img {
  text-align: center;
}

.fire-cap p.fire-card {
  width: 60%;
  position: absolute;
  top: 0rem;
  right: 0;
  left: 0;
  margin: auto;
}

.fire-cap-img img {
  width: 100%;
}

.fire-cap p {
  color: white;
  font-size: 130%;
  line-height: 1.6;
  margin: 2rem;
}

.fire-cb {
  width: 100%;
  text-align: center;
}

.fire-cb .btn {
  border: 2px solid white;
  color: white;
  font-size: 130%;
}

.fire-cb .btn:hover {
  border: 2px solid white;
  color: black;
  background: white;
}

/*インスタ風レイアウト*/
.photogallery {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  position: relative;
}

.photo {
  position: relative;
  width: 31%;
  height: auto;
  margin: 1%;
  overflow: hidden;
}

.photo:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
}

.firefly {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: .5vw;
  height: .3vw;
  margin: -0.2vw 0 0 1.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}

.firefly::before,
.firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly::before {
  background: red;
  opacity: 1;
  animation: drift ease alternate infinite;
}

.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw red;
  animation: drift ease alternate infinite, flash ease infinite;
}

.firefly:nth-child(1) {
  animation-name: move1;
}

.firefly:nth-child(1)::before {
  animation-duration: 14s;
}

.firefly:nth-child(1)::after {
  animation-duration: 14s, 5064ms;
  animation-delay: 0ms, 6149ms;
}
.youtube {
  position: relative;
  box-sizing: border-box;
  max-width: 60%;
  margin: 30px auto;
  padding: 20px 25px;
  aspect-ratio: 16/9;
  background: #dfdfdf;
  border-radius: 10px;
}
.youtube--col2 {display: flex;}
.youtube--col2 .youtube{   
   width: 46%;
  }
  .youtube--col2 .youtube a img{   
    width: 100%;
   }
.youtube::before {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%, 0) rotate(
-135deg
);
  border-top: solid 5px #dfdfdf;
  border-left: solid 5px #dfdfdf;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

@keyframes drift {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes flash {

  0%,
  30%,
  100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw red;
  }

  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw red;
  }
}
.youtube-cap {
  position: absolute;
    color: white;
    bottom: -2rem;
    right: 0;
    left: 0;
    text-align: center;
}

.battle-card {
  text-align: center;
}

.battle-card img {
  max-width: 700px;
}

@media screen and (max-width: 768px) {
  .fire::before {
    width: 300vw;
    top: -.3rem;
    font-size: 9vw;
  }

  .fire::after {
    width: 300vw;
    bottom: -.3rem;
    font-size: 9VW;
  }

  .fire-flex {
    flex-direction: column;
  }

  .fire-flex.no-wrap {
    flex-direction: row;
    margin-top: 1rem;
  }

  .fire-flex-left {
    width: 100%;
  }

  .fire-flex-left.no-wrap {
    width: 48%;
  }

  .fire-flex-right {
    width: 80%;
    margin-top: -5rem;
  }

  .fire-flex-right.no-wrap {
    width: 48%;
    margin-top: 0;
    margin-right: 0;
  }

  .fire-cap {
    width: 100%;
    padding: 1.5rem 1rem 1rem 1rem;
  }

  .fire-cap p {
    font-size: 100%;
  }

  .fire-cap p {
    margin: 0;
  }

  .firefly {
    width: 1.5vw;
    height: 1vw;
  }
  .fire {
    padding: 4rem 0 3rem;
  }
  .fire-ttl {
    font-size: 140%;
  }
  .fire-subttl {
    font-size: 120%;
    padding-bottom: 2rem;
  }
  .youtube {
    max-width: 90%;
    height: 54vw;
    padding: 10px;
    margin-bottom: 4rem;
  }
  .youtube--col2 {
    flex-direction: column;
}
.youtube--col2 .youtube {
  width: 100%;
}
.youtube-cap {
  bottom: -3rem;
  right: 0;
  left: 0;
  text-align: center;
}
}