@charset "utf-8";

.wrap {
  width: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  background-color: #fdd000;
}

.header {
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%201460%201256.4%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fccf00%3B%20%7D%20.st1%20%7B%20fill%3A%20%23fff%3B%20%7D%20.st2%20%7B%20fill%3A%20%23c20813%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%221460%201256.4%201460%20792.7%201124%201256.4%201460%201256.4%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%221460%200%200%200%200%20412.6%201460%20498.8%201460%200%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%221460%20550.8%200%20827.8%200%201156.1%201460%20590.9%201460%20550.8%22%2F%3E%20%3Cpolygon%20class%3D%22st2%22%20points%3D%221460%20525%200%20616.6%200%20827.8%201460%20550.8%201460%20525%22%2F%3E%20%3Cpolygon%20class%3D%22st1%22%20points%3D%221460%20498.8%200%20412.6%200%20616.6%201460%20525%201460%20498.8%22%2F%3E%20%3Cpolygon%20points%3D%22767.1%201256.4%201124%201256.4%201460%20792.7%201460%20681%20767.1%201256.4%22%2F%3E%20%3Cpolygon%20class%3D%22st2%22%20points%3D%221460%20590.9%200%201156.1%200%201256.4%20767.1%201256.4%201460%20681%201460%20590.9%22%2F%3E%3C%2Fsvg%3E');
}

.header_inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 190px 0 0;
  overflow-x: hidden;
}

.header_logo {
  position: absolute;
  width: 100%;
  top: .5%;
  left: 0;
  z-index: 1;
}

.header_front {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.header_title {
  position: absolute;
  width: 98%;
  bottom: 10px;
  left: 1%;
  z-index: 3;
}

.header_bakudan {
  position: absolute;
  width: 28%;
  bottom: 21%;
  left: 1%;
  transform: rotate(-10deg);
  z-index: 2;
}

.image_shadow {
  filter: drop-shadow(2px 2px 0 #000);
}

.image_white {
  filter: drop-shadow(2px 2px 0 #fff);
}

.top_btn {
  padding: 3rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_btn_item {
  width: 46%;
  margin: 0 2%;
}

.content {
  width: 100%;
}

.inner {
  position: relative;
  width: 600px;
  margin: 0 auto;
  padding: 0 0 200px;
}

.inner-2 {
  position: relative;
  width: 600px;
  margin: 0 auto;
  padding: 0 0 150px;
}

.bg_chara {
  width: 100%;
  background-image:
    url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203331.34%20238.5%22%3E%3Cpolygon%20points%3D%220%20238.5%203331.34%200%203331.34%20238.5%200%20238.5%22%2F%3E%3C%2Fsvg%3E'),
    url(../img/bg_01.jpg);
  background-position:
    bottom center,
    bottom center;
  background-size:
    120% auto,
    900px auto;
  background-repeat:
    no-repeat,
    no-repeat;
  background-color: #c20813;
}

.character_title {
  width: 80%;
  margin: 0 auto 20px;
}

.character_area {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.character_item {
  width: 30%;
  margin-bottom: 30px;
  text-align: center;
}

.character_item p {
  margin: 10px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.character_item p span {
  margin: 5px 0 0;
  display: block;
  text-align: left;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
}

.bg_black {
  width: 100%;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203331.34%20238.5%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c20713%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%220%20238.5%203331.34%200%203331.34%20238.5%200%20238.5%22%2F%3E%3C%2Fsvg%3E');
  background-position: bottom -3px center;
  background-size: 120% auto;
  background-repeat: no-repeat;
  background-color: #000;
}

.bg_red {
  width: 100%;
  background-image:
  url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203331.34%20238.5%22%3E%3Cpolygon%20points%3D%220%20238.5%203331.34%200%203331.34%20238.5%200%20238.5%22%2F%3E%3C%2Fsvg%3E');
  background-position: bottom -3px center;
  background-size: 120% auto;
  background-repeat: no-repeat;
  background-color: #c20813;
}

.bg_red_02 {
  width: 100%;
  background-position:
    bottom -3px center,
    bottom -160px center,
    top 0% center;
  background-size:
    120% auto,
    900px auto,
    300px auto;
  background-repeat:
    no-repeat,
    no-repeat;
  background-color: #c20813;
}

.webp .bg_red_02 {
  background-image:
  url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203331.34%20238.5%22%3E%3Cpolygon%20points%3D%220%20238.5%203331.34%200%203331.34%20238.5%200%20238.5%22%2F%3E%3C%2Fsvg%3E'),
  url(../img/bg02_01.webp),
  url(../img/bg02_02.png);
}

.no-webp .bg_red_02 {
  background-image:
  url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203331.34%20238.5%22%3E%3Cpolygon%20points%3D%220%20238.5%203331.34%200%203331.34%20238.5%200%20238.5%22%2F%3E%3C%2Fsvg%3E'),
  url(../img/bg02_01.png),
  url(../img/bg02_02.png);
}

.cut_outer {
  position: relative;
  margin: 20px 0 40px;
}

.cut_area {
  display: flex;
  justify-content: space-between;
}

.cut_item {
  width: 48%;
}

.vs_image {
  width: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.comics_area {
  width: 100%;
  position: relative;
}

.comics_cover {
  width: 45%;
}

.comics_text {
  position: absolute;
  width: 50%;
  height: auto;
  top: 0;
  right: 0;
}

.comics_text p {
  color: #fff;
  font-size: 18px;
}

.comics_text p span {
  display: block;
  margin-bottom: .6em;
  color: #fdd000;
  font-size: 26px;
  font-weight: 700;
}

.btn_comics {
  position: absolute;
  width: 50%;
  height: auto;
  bottom: 0;
  right: 0;
}

.btn_comics-2 {
  position: absolute;
  width: 50%;
  height: auto;
  bottom: 6rem;
  right: 0;
}

.btn_comics img,
.btn_comics-2 img {
  opacity: .5;
}

.btn_bg_1 {
  background-color: #c20813;
}

.btn_bg_2 {
  background-color: #000;
}

.btn_bg_3 {
  background-color: #fdd000;
}

.btn_bg_4 {
  background-color: #999999;
}

.battle {
  position: absolute;
  width: 60%;
  top: -12%;
  right: 0;
}

.comics06_area {
  position: relative;
  width: 100%;
}

.comics06_area::before {
  content: "";
  display: block;
  padding-top: 70%;
}

.comics06_content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.comics06_cover {
  position: absolute;
  width: 56%;
  bottom: 8%;
  left: 22%;
}

.comics06_cover img {
  border: #000 solid 2px;
}

.anime {
  width: 90%;
  margin: 0 auto 1rem;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.catch {
  width: 15%;
  text-align: center;
}

.catch img {
  width: 35%;
}

.kv {
  width: 70%;
}

.ani_text {
  margin: 0 0 .6rem ;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.8;
}

.ani_btn {
  width: 100%;
  margin: 2rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ani_btn_item {
  width: 40%;
  margin: 0 2%;
}

.social {
  width: 100%;
  padding-bottom: 40px;
  text-align: center;
}

.social li {
  display: inline-block;
  width: 50px;
  margin: 0 12px;
  vertical-align: middle;
}

.footer {
  width: 100%;
  padding: 0 0 2em;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background-color: #c20813;
}

.footer_inner {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

/*アニメ*/

@-webkit-keyframes fadeInLeftBig_02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
    animation-timing-function: ease-in;
  }

  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-out;
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
    animation-timing-function: ease-in;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig_02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
    animation-timing-function: ease-in;
  }

  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-out;
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
    animation-timing-function: ease-in;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate_fadeInLeftBig_02 {
  -webkit-animation-name: fadeInLeftBig_02;
  animation-name: fadeInLeftBig_02;
}

@-webkit-keyframes fadeInRightBig_02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
    animation-timing-function: ease-in;
  }

  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-out;
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
    animation-timing-function: ease-in;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig_02 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
    animation-timing-function: ease-in;
  }

  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-out;
  }

  90% {
    opacity: 1;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
    animation-timing-function: ease-in;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate_fadeInRightBig_02 {
  -webkit-animation-name: fadeInRightBig_02;
  animation-name: fadeInRightBig_02;
}

@-webkit-keyframes zoomOut_02 {
  from {
    opacity: 0;
    width: 200%;
    animation-timing-function: ease-in;
  }

  50% {
    opacity: 1;
    width: 40%;
    animation-timing-function: ease-out;
  }

  60% {
    opacity: 1;
    width: 50%;
    animation-timing-function: ease-in;
  }

  65% {
    opacity: 1;
    width: 40%;
  }

  to {
    opacity: 1;
    width: 100%;
  }
}
@keyframes zoomOut_02 {
  from {
    opacity: 0;
    width: 200%;
    animation-timing-function: ease-in;
  }

  50% {
    opacity: 1;
    width: 40%;
    animation-timing-function: ease-out;
  }

  60% {
    opacity: 1;
    width: 50%;
    animation-timing-function: ease-in;
  }

  65% {
    opacity: 1;
    width: 40%;
  }

  to {
    opacity: 1;
    width:40%;
  }
}
.animate_zoomOut_02 {
  -webkit-animation-name: zoomOut_02;
  animation-name: zoomOut_02;
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .pc_display {
    display: none;
  }

  .header {
    background-position: bottom center;
    background-size: 120% auto;
  }

  .header_inner {
    padding: 16% 0 0;
  }

  .header_logo {
    width: 98%;
    top: .5%;
    left: 1%;
  }
  
  .header_bakudan {
    width: 34%;
    bottom: 21%;
    left: -2%;
  }

  .top_btn {
    padding: 1rem 0 2rem;
  }
  
  .top_btn_item {
    width: 48%;
    margin: 0 4% 0 0;
  }

  .top_btn_item:nth-child(2n) {
    margin: 0;
  }

  .inner {
    width: 90%;
    padding: 0 0 100px;
  }

  .inner-2 {
    width: 90%;
    padding: 0 0 100px;
  }

  .bg_chara {
    background-size:
      auto 100px,
      140% auto;
  }

  .character_title {
    width: 100%;
  }

  .character_area {
    width: 100%;
  }

  .character_item {
    margin-bottom: 20px;
  }

  .character_item p {
    font-size: 14px;
  }

  .character_item p span {
    font-size: 12px;
  }

  .bg_black {
    background-size: auto 100px;
  }

  .bg_red {
    background-size: auto 100px;
  }

  .bg_red_02 {
    background-position:
      bottom -2px center,
      bottom -120px center,
      top 4% center;
    background-size:
      auto 100px,
      130% auto,
      60% auto;
  }

  .battle {
    width: 70%;
    top: -14%;
    right: -5%;
  }

  .cut_outer {
    margin: 10px 0 20px;
  }

  .comics_text p {
    font-size: 14px;
  }

  .comics_text p span {
    font-size: 16px;
  }

  .comics06_area::before {
    padding-top: 64%;
  }

  .comics06_cover {
    width: 50%;
    bottom: 8%;
    left: 25%;
  }
  
  .btn_comics-2 {
    bottom: 23%;
  }

  .anime {
    margin: 0 auto 1rem;
    padding-top: 1rem;
  }
  
  .catch img {
    width: 46%;
  }
  
  .kv {
    width: 70%;
  }
  
  .ani_text {
    margin: 0 0 .6rem ;
    font-size: 15px;
  }
  
  .ani_btn {
    margin: 2rem 0 0;
  }
  
  .ani_btn_item {
    width: 48%;
    margin: 0 4% 0 0;
  }

  .ani_btn_item:nth-child(2n) {
    margin:0;
  }

  .social {
    width: 100%;
    padding-bottom: 40px;
    text-align: center;
  }

  .social li {
    display: inline-block;
    width: 44px;
    margin: 0 8px;
    vertical-align: middle;
  }

  .footer_inner {
    width: 90%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sp_display {
    display: none;
  }

  .header {
    background-position: bottom center;
    background-size: 120% auto;
  }
  
  .header_inner {
    padding: 17% 0 0;
  }

  .header_logo {
    position: absolute;
    width: 98%;
    top: .5%;
    left: 1%;
    z-index: 1;
  }
  
  .inner {
    width: 70%;
    margin: 0 auto;
  }

  .inner-2 {
    width: 70%;
    margin: 0 auto;
    padding: 0 0 100px;
  }

  .bg_red_02 {
    background-position:
      bottom -2px center,
      bottom -150px center,
  }

  .footer_inner {
    width: 70%;
  }
}

@media screen and (min-width: 1025px) {
  .sp_display {
    display: none;
  }

  .alpha a {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }

  .alpha a:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
  }

  a.btn_over img {
    -webkit-transition: -weblit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -ms-transition: -ms-transform 0.3s;
    transition: transform 0.3s;
  }

  a.btn_over img:hover {
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }
}