@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : top.css
Description : トップページ
===================================================================== */
/* ========================================================
    mv
======================================================== */
.mv {
  position: relative;
  width: 100%;
  padding: 0;
}
.mv::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/common/common_bg01.png);
  background-repeat: repeat;
  background-position: center center;
  background-size: auto auto;
  z-index: -3;
}
.mv .inner {
  max-width: 1600px;
  padding: 0;
}
.mv_column {
  position: relative;
  width: 100%;
}
.mv_wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}
.mv_img {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .mv_img {
    width: 50%;
  }
}
.mv_text {
  position: absolute;
  left: 0;
  bottom: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .mv_text {
    position: relative;
    left: inherit;
    bottom: inherit;
    width: 50%;
  }
}
.mv_text::before {
  content: none;
}
@media screen and (min-width: 768px) {
  .mv_text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/top/mv_bg01_pc.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    z-index: -3;
  }
}
.mv_ttl {
  position: relative;
  width: 84.6666666667%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .mv_ttl {
    width: 79.375%;
  }
}
.mv_onair {
  position: relative;
  width: 78.9333333333%;
  margin-top: 2%;
  padding: 0.2em 3.3333333333% 0.4em 3.3333333333%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .mv_onair {
    width: 74%;
    margin-top: 1.875%;
    padding: 0.2em 3.125% 0.4em 3.125%;
  }
}
.mv_onair::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000000;
  -webkit-clip-path: polygon(0% 50%, 4.222972973% 0%, 95.777027027% 0%, 100% 50%, 95.777027027% 100%, 4.222972973% 100%);
          clip-path: polygon(0% 50%, 4.222972973% 0%, 95.777027027% 0%, 100% 50%, 95.777027027% 100%, 4.222972973% 100%);
  z-index: -3;
}
.mv_onair_text01 {
  color: #ffffff;
  font-size: 4.6rem;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .mv_onair_text01 {
    font-size: 2.875vw;
  }
}
@media screen and (min-width: 1600px) {
  .mv_onair_text01 {
    font-size: 4.6rem;
  }
}

.subpage_en .mv_onair_text01 {
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  .subpage_en .mv_onair_text01 {
    font-size: 1.875vw;
  }
}
@media screen and (min-width: 1600px) {
  .subpage_en .mv_onair_text01 {
    font-size: 3rem;
  }
}

/* ========================================================
    news
======================================================== */
.news {
  position: relative;
  width: 100%;
  padding: 8rem 0;
}
@media screen and (min-width: 768px) {
  .news {
    padding: 6rem 0;
  }
}
.news::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/top/news_bg01_sp.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .news::before {
    background-image: url(../images/top/news_bg01_pc.jpg);
  }
}
.news .inner {
  max-width: 1560px;
}
.news_column {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 8rem 0 8rem 4rem;
  background-color: rgba(0, 0, 0, 0.65);
}
@media screen and (min-width: 768px) {
  .news_column {
    padding: 6rem 0 6rem 6.7567567568%;
  }
}
.news_column::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 0.6rem;
  background-image: url(../images/top/news_bg02.png);
  background-repeat: repeat-y;
  background-position: center center;
  background-size: auto 100%;
}
.news_column::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 0.6rem;
  background-image: url(../images/top/news_bg02.png);
  background-repeat: repeat-y;
  background-position: center center;
  background-size: auto 100%;
}
.news_ttl {
  position: relative;
  width: 100%;
  margin: -0.3em 0;
  text-align: left;
}
@media screen and (min-width: 1080px) {
  .news_ttl {
    width: 240px;
  }
}
.news_ttl > span {
  display: block;
  color: transparent;
  font-family: "New Rocker", system-ui;
  font-size: 8rem;
  line-height: 1;
  background: linear-gradient(0deg, #690005 0%, #e60012 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.news_wrap {
  position: relative;
  width: 100%;
  margin-top: 6rem;
}
@media screen and (min-width: 768px) {
  .news_wrap {
    margin-top: 4.5rem;
  }
}
@media screen and (min-width: 1080px) {
  .news_wrap {
    width: calc(100% - 280px);
    max-width: 1000px;
    margin-top: 0;
  }
}
.news_list {
  position: relative;
  width: 100%;
}
.news_list > li {
  width: 100%;
  margin-top: 2rem;
  transform: translate3d(100%, 0, 0);
  transition: 0.8s ease-in-out;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .news_list > li {
    margin-top: 1.5rem;
  }
}
.news_list > li:first-child {
  margin-top: 0;
}
.news_list > li.is-appear {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.news_list > li > a {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .news_list > li > a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .news_list > li > a:hover .news_item > dt {
    background-color: #7e0200;
  }
}
@media screen and (min-width: 768px) {
  .news_list > li > a:hover .news_item > dd {
    background-color: rgba(91, 1, 0, 0.9);
  }
}
.news_item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
}
@media screen and (min-width: 1080px) {
  .news_item {
    align-items: stretch;
    flex-direction: row;
  }
}
.news_item > dt {
  display: inline-block;
  width: auto;
  padding: 0 1.2em;
  background-color: #5b0100;
  transform: skewX(25deg);
  transform-origin: top left;
  z-index: 1;
}
@media screen and (min-width: 1080px) {
  .news_item > dt {
    padding: 0.8em 1.2em;
  }
}
.news_item > dt > span {
  position: relative;
  display: block;
  padding-left: 1.2em;
  font-family: "New Rocker", system-ui;
  color: #e50012;
  transform: skewX(-25deg) translateY(0.08em);
  white-space: nowrap;
}
.news_item > dt > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 47%;
  display: block;
  width: 0.8em;
  height: 0.5em;
  background-color: #e50012;
  transform: translateY(-50%);
  -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
.news_item > dd {
  display: block;
  width: 100%;
  margin: -2rem 0 0 0;
  padding: 0.8em 1.8em 0.8em 1.6em;
  background-color: rgba(0, 0, 0, 0.9);
  transform: skewX(25deg);
  transform-origin: top left;
}
@media screen and (min-width: 768px) {
  .news_item > dd {
    margin: -1.5rem 0 0 0;
  }
}
@media screen and (min-width: 1080px) {
  .news_item > dd {
    margin: 0 0 0 0.4rem;
  }
}
.news_item > dd > span {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  transform: skewX(-25deg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
@media screen and (min-width: 1080px) {
  .news_item > dd > span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
}
.news_btn {
  position: relative;
  width: 100%;
  margin-top: 6rem;
  padding-right: 4rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .news_btn {
    margin-top: 4.5rem;
    padding-right: 7.2463768116%;
  }
}
.news_btn > a {
  position: relative;
  display: inline-block;
  width: auto;
}
@media screen and (min-width: 768px) {
  .news_btn > a:hover {
    opacity: 1;
  }
}
@media screen and (min-width: 768px) {
  .news_btn > a:hover::before {
    filter: drop-shadow(0 0 0.5rem #e50012);
  }
}
@media screen and (min-width: 768px) {
  .news_btn > a:hover::after {
    filter: drop-shadow(0 0 0.5rem #e50012);
  }
}
@media screen and (min-width: 768px) {
  .news_btn > a:hover > span {
    filter: drop-shadow(0 0 0.5rem #e50012);
  }
}
.news_btn > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 3rem;
  aspect-ratio: 30/52;
  background-image: url(../images/top/news_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%) scale(1, 1);
}
.news_btn > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 3rem;
  aspect-ratio: 30/52;
  background-image: url(../images/top/news_bg03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%) scale(-1, 1);
}
.news_btn > a > span {
  display: block;
  padding: 0 8rem;
  color: #ffffff;
  font-family: "Road Rage", sans-serif;
  font-size: 6.2rem;
  line-height: 1;
}

/* ========================================================
    movie
======================================================== */
.movie {
  position: relative;
  width: 100%;
  padding: 16rem 0;
}
@media screen and (min-width: 768px) {
  .movie {
    padding: 12rem 0;
  }
}
.movie::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  z-index: -3;
}
.movie_column {
  position: relative;
  width: 100%;
}
.movie_ttl {
  position: relative;
  width: 100%;
  margin: -0.3em 0;
  text-align: center;
}
.movie_ttl > span {
  display: block;
  color: transparent;
  font-family: "New Rocker", system-ui;
  font-size: 8rem;
  line-height: 1;
  background: linear-gradient(0deg, #690005 0%, #e60012 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.movie_wrap {
  position: relative;
  width: 95.5223880597%;
  margin: 0 auto;
  padding-top: 8rem;
}
@media screen and (min-width: 768px) {
  .movie_wrap {
    width: 96%;
    padding-top: 6rem;
  }
}
.movie_embed {
  position: relative;
  width: 100%;
  margin: 2.8125% 0;
  padding-top: 56.25%;
}
@media screen and (min-width: 768px) {
  .movie_embed {
    margin: 1.875% 0;
  }
}
.movie_embed::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 105.625%;
  aspect-ratio: 676/396;
  background-image: url(../images/top/movie_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .movie_embed::before {
    width: 103.75%;
    aspect-ratio: 996/576;
    background-image: url(../images/top/movie_bg01_pc.png);
  }
}
.movie_embed::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  top: 50%;
  display: block;
  width: 100vw;
  height: 4px;
  border-top: 1px solid #e50012;
  border-bottom: 1px solid #e50012;
  transform: translateY(-50%);
  z-index: -1;
}
.movie_embed * {
  line-height: inherit;
}
.movie_embed iframe {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ========================================================
    intro
======================================================== */
.intro {
  position: relative;
  width: 100%;
  padding: 18rem 0 16rem 0;
}
@media screen and (min-width: 768px) {
  .intro {
    padding: 13.5rem 0 12rem 0;
  }
}
.intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: calc(100% + 16rem);
  background-image: url(../images/common/common_bg01.png);
  background-repeat: repeat;
  background-position: center center;
  background-size: auto auto;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .intro::before {
    height: calc(100% + 12rem);
  }
}
.intro::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 116.6rem;
  background-image: url(../images/top/intro_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .intro::after {
    height: 113.9rem;
    background-image: url(../images/top/intro_bg01_pc.png);
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1600px) {
  .intro::after {
    background-size: 100% 100%;
  }
}
.intro_bg02 {
  position: absolute;
  right: -12rem;
  bottom: -7rem;
  display: block;
  width: 68.2rem;
  aspect-ratio: 784/1127;
  background-image: url(../images/top/intro_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 1600px) {
  .intro_bg02 {
    right: calc(50% - 920px);
  }
}
.intro_column {
  position: relative;
  width: 100%;
}
.intro_ttl {
  position: relative;
  width: 100%;
  margin: -0.3em 0;
  text-align: center;
}
.intro_ttl > span {
  display: block;
  color: transparent;
  font-family: "New Rocker", system-ui;
  font-size: 8rem;
  line-height: 1;
  background: linear-gradient(0deg, #060000 0%, #ac1914 57%, #e60012 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.intro_ttl::before {
  content: "INTRODUCTION";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  color: transparent;
  font-family: "New Rocker", system-ui;
  font-size: 19rem;
  line-height: 1;
  background: linear-gradient(0deg, #b0c3c7 0%, #d0c6ce 100%);
  background-clip: text;
  -webkit-background-clip: text;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.intro_wrap {
  position: relative;
  width: 111.9402985075%;
  margin: 12rem -5.9701492537% 0 -5.9701492537%;
}
@media screen and (min-width: 768px) {
  .intro_wrap {
    width: 100%;
    margin: 9rem auto 0 auto;
  }
}
.intro_sp {
  display: block;
}
@media screen and (min-width: 768px) {
  .intro_sp {
    display: none;
  }
}
.intro_pc {
  display: none;
}
@media screen and (min-width: 768px) {
  .intro_pc {
    display: block;
  }
}
.intro_subttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.intro_subttl > span {
  display: inline-block;
  transform: translate3d(-100%, 0, 0);
  transition: 0.8s ease-in-out;
  opacity: 0;
}
.intro_subttl > span.is-appear {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.intro_subttl > span > span {
  color: #ffffff;
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 2.2;
  letter-spacing: 0.04em;
  background-color: #000000;
}
.intro_text {
  position: relative;
  width: 100%;
  margin-top: 6rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .intro_text {
    margin-top: 4.5rem;
  }
}
.intro_text:first-child {
  margin-top: 0;
}
.intro_text > p {
  margin-top: 6rem;
}
@media screen and (min-width: 768px) {
  .intro_text > p {
    margin-top: 4.5rem;
  }
}
.intro_text > p:first-child {
  margin-top: 0;
}
.intro_text > p > span {
  display: inline-block;
  transform: translate3d(-100%, 0, 0);
  transition: 0.8s ease-in-out;
  opacity: 0;
}
.intro_text > p > span.is-appear {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.intro_text > p > span > span {
  color: #000000;
  font-size: 3rem;
  font-weight: 900;
  line-height: 2.8;
  letter-spacing: 0.04em;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .intro_text > p > span > span {
    font-size: 2.6rem;
  }
}
.intro_text > p > span > span.bg01 {
  color: #ff2c3d;
  background-color: #000000;
}
.intro_text > p > span > span.bg02 {
  color: #000000;
  font-size: 3.6rem;
  background-color: #ff2c3d;
}
.intro_text > p > span > span.text01 {
  color: #ff2c3d;
  font-style: italic;
}

.subpage_en .intro_subttl > span > span {
  font-size: 3rem;
  letter-spacing: 0;
}
.subpage_en .intro_text > p > span > span {
  font-size: 2.4rem;
  line-height: 2.4;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .subpage_en .intro_text > p > span > span {
    font-size: 1.8rem;
  }
}
.subpage_en .intro_text > p > span > span.bg02 {
  font-size: 3rem;
}

/* ========================================================
    comics
======================================================== */
.comics {
  position: relative;
  width: 100%;
  padding: 16rem 0;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .comics {
    padding: 12rem 0;
  }
}
.comics::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transform: translateY(-50%);
  -webkit-clip-path: polygon(0% 16rem, 16rem 0%, calc(100% - 16rem) 0%, 100% 16rem, 100% calc(100% - 16rem), calc(100% - 16rem) 100%, 16rem 100%, 0% calc(100% - 16rem));
          clip-path: polygon(0% 16rem, 16rem 0%, calc(100% - 16rem) 0%, 100% 16rem, 100% calc(100% - 16rem), calc(100% - 16rem) 100%, 16rem 100%, 0% calc(100% - 16rem));
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .comics::before {
    -webkit-clip-path: polygon(0% 12rem, 12rem 0%, calc(100% - 12rem) 0%, 100% 12rem, 100% calc(100% - 12rem), calc(100% - 12rem) 100%, 12rem 100%, 0% calc(100% - 12rem));
            clip-path: polygon(0% 12rem, 12rem 0%, calc(100% - 12rem) 0%, 100% 12rem, 100% calc(100% - 12rem), calc(100% - 12rem) 100%, 12rem 100%, 0% calc(100% - 12rem));
  }
}
.comics_column {
  position: relative;
  width: 100%;
}
.comics_ttl {
  position: relative;
  width: 100%;
  margin: -0.3em 0;
  text-align: center;
}
.comics_ttl > span {
  display: block;
  color: transparent;
  font-family: "New Rocker", system-ui;
  font-size: 8rem;
  line-height: 1;
  background: linear-gradient(0deg, #060000 0%, #ac1914 57%, #e60012 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.comics_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .comics_wrap {
    margin-top: 6rem;
  }
}
.comics_subttl {
  position: relative;
  width: 100%;
  text-align: center;
}
.comics_subttl > span {
  display: block;
  color: #e50012;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .comics_subttl > span {
    font-size: 3.6rem;
  }
}
.comics_text {
  position: relative;
  width: 100%;
  margin-top: 2rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .comics_text {
    margin-top: 1.5rem;
  }
}
.comics_text > span {
  display: block;
  font-size: 3rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .comics_text > span {
    font-size: 2.6rem;
  }
}
.comics_text > small {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .comics_text > small {
    font-size: 1.8rem;
  }
}
.comics_list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  .comics_list {
    margin-top: 3rem;
  }
}
.comics_list::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  top: calc(50% + 2rem);
  display: block;
  width: 100vw;
  height: 61.4rem;
  background-image: url(../images/top/comics_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .comics_list::before {
    top: calc(50% + 1.5rem);
    height: 33.4rem;
    background-image: url(../images/top/comics_bg01_pc.png);
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1600px) {
  .comics_list::before {
    background-size: 100% 100%;
  }
}
.comics_list > li {
  width: 28.6567164179%;
  margin: 4rem 0 0 1.4925373134%;
}
@media screen and (min-width: 768px) {
  .comics_list > li {
    width: 19.2%;
    margin: 3rem 0 0 1% !important;
  }
}
.comics_list > li:nth-child(3n+1) {
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .comics_list > li:nth-child(5n+1) {
    margin-left: 0 !important;
  }
}
.comics_credit {
  position: relative;
  width: 100%;
  margin-top: 2rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .comics_credit {
    margin-top: 1.5rem;
  }
}
.comics_credit > span {
  font-size: 70%;
}

/* ========================================================
    caststaff
======================================================== */
.caststaff {
  position: relative;
  width: 100%;
  padding: 16rem 0;
}
@media screen and (min-width: 768px) {
  .caststaff {
    padding: 12rem 0;
  }
}
.caststaff::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: calc(100% + 16rem);
  background-color: #1f1f1f;
  z-index: -3;
}
@media screen and (min-width: 768px) {
  .caststaff::before {
    height: calc(100% + 12rem);
  }
}
.caststaff_logobg {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: 124.8rem;
  aspect-ratio: 1248/513;
  background-image: url(../images/common/common_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateX(-50%);
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .caststaff_logobg {
    left: calc(50% + 220px);
  }
}
.caststaff_column {
  position: relative;
  width: 100%;
}
.caststaff_ttl {
  position: relative;
  width: 100%;
  margin: -0.3em 0;
  text-align: center;
}
.caststaff_ttl > span {
  display: block;
  color: transparent;
  font-family: "New Rocker", system-ui;
  font-size: 8rem;
  line-height: 1;
  background: linear-gradient(0deg, #690005 0%, #e60012 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.caststaff_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .caststaff_wrap {
    margin-top: 6rem;
  }
}
.caststaff_subttl {
  position: relative;
  width: 100%;
  margin-top: 8rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .caststaff_subttl {
    margin-top: 6rem;
  }
}
.caststaff_subttl:first-child {
  margin-top: 0;
}
.caststaff_subttl::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #515151;
  z-index: -1;
}
.caststaff_subttl > span {
  display: inline-block;
  padding: 0 1.2rem;
  color: #ffffff;
  font-family: "Road Rage", sans-serif;
  font-size: 4rem;
  line-height: 1;
  border-right: 0.4rem solid #1f1f1f;
  background-color: #515151;
}
.caststaff_list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .caststaff_list {
    margin-top: 2rem;
  }
}
.caststaff_list > li {
  width: 100%;
  margin: 1rem 0 0 0;
}
@media screen and (min-width: 768px) {
  .caststaff_list > li {
    width: 49%;
    margin: 1rem 0 0 2% !important;
  }
}
@media screen and (min-width: 768px) {
  .caststaff_list > li:nth-child(2n+1) {
    margin-left: 0 !important;
  }
}
.caststaff_list > li.original {
  width: 100%;
}
.caststaff_list > li.original .caststaff_item > dt > span {
  font-size: 120%;
}
.caststaff_list > li.original .caststaff_item > dd > span {
  font-size: 120%;
}
.caststaff_item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}
.caststaff_item > dt {
  width: auto;
  margin-right: 1.2em;
  white-space: nowrap;
}
.caststaff_item > dt > span {
  display: inline-block;
  color: #e50012;
  font-size: 3rem;
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  .caststaff_item > dt > span {
    font-size: 2.2rem;
  }
}
.caststaff_item > dd {
  width: auto;
}
.caststaff_item > dd > span {
  position: relative;
  display: inline-block;
  padding-right: 8rem;
  color: #ffffff;
  font-size: 3rem;
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  .caststaff_item > dd > span {
    padding-right: 6rem;
    font-size: 2.2rem;
  }
}
.caststaff_item > dd > span > a {
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 6rem;
  aspect-ratio: 60/50;
  font-size: 0;
  background-image: url(../images/common/btn_comment.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-40%);
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .caststaff_item > dd > span > a {
    width: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .caststaff_item > dd > span > a:hover {
    top: calc(50% - 0.8rem);
    opacity: 1;
  }
}
.caststaff_comment {
  position: relative;
  width: 100%;
  padding: 10rem 4rem;
  background-color: #271c1c;
}
@media screen and (min-width: 768px) {
  .caststaff_comment {
    padding: 7.5rem 10rem;
  }
}
.caststaff_comment::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  aspect-ratio: 670/76;
  background-image: url(../images/top/caststaff_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  transform: scale(1, 1);
}
@media screen and (min-width: 768px) {
  .caststaff_comment::before {
    aspect-ratio: 1000/76;
    background-image: url(../images/top/caststaff_bg01_pc.png);
  }
}
.caststaff_comment::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  aspect-ratio: 670/76;
  background-image: url(../images/top/caststaff_bg01_sp.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  transform: scale(1, -1);
}
@media screen and (min-width: 768px) {
  .caststaff_comment::after {
    aspect-ratio: 1000/76;
    background-image: url(../images/top/caststaff_bg01_pc.png);
  }
}
.caststaff_comment_img {
  position: relative;
  width: 61.0169491525%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_img {
    width: 45%;
  }
}
.caststaff_comment_name {
  position: relative;
  width: 100%;
  padding: 4rem 0;
  text-align: center;
  border-bottom: 1px solid #8a0000;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_name {
    padding: 3rem 0;
  }
}
.caststaff_comment_name:first-child {
  padding-top: 0;
}
.caststaff_comment_name > dt {
  width: 100%;
}
.caststaff_comment_name > dt > span {
  display: block;
  color: #e50012;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_name > dt > span {
    font-size: 1.8rem;
  }
}
.caststaff_comment_name > dd {
  width: 100%;
}
.caststaff_comment_name > dd > span {
  display: block;
  color: #ffffff;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_name > dd > span {
    font-size: 3rem;
  }
}
.caststaff_comment_text {
  position: relative;
  width: 100%;
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  .caststaff_comment_text {
    margin-top: 3rem;
  }
}
.caststaff_comment_text > p {
  margin-top: 1.4em;
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
}
.caststaff_comment_text > p:first-child {
  margin-top: 0;
}

.subpage_en .caststaff_item > dt > span {
  font-size: 2.4rem;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .subpage_en .caststaff_item > dt > span {
    font-size: 1.8rem;
  }
}
.subpage_en .caststaff_item > dd > span {
  padding-right: 6.4rem;
  font-size: 2.8rem;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .subpage_en .caststaff_item > dd > span {
    padding-right: 4.8rem;
    font-size: 2rem;
  }
}
.subpage_en .caststaff_item > dd > span > a {
  width: 4.8rem;
}
@media screen and (min-width: 768px) {
  .subpage_en .caststaff_item > dd > span > a {
    width: 3.2rem;
  }
}/*# sourceMappingURL=top.css.map */