.comics__inner {
  position: relative;
}

.comics__cont {
  border-bottom: 1px solid #858585;
  position: relative;
}
[data-time=light] .comics__cont {
  border-color: #0c0d0d;
}
.comics__cont::before {
  position: absolute;
  top: 0;
  left: 0;
  background: #858585;
  content: "";
}
[data-time=light] .comics__cont::before {
  background: #0c0d0d;
}

.comics__top {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.comics__ph {
  overflow: hidden;
}
.comics__ph img {
  opacity: 0;
}
.-reveal .comics__ph img {
  -webkit-animation: ImgGrayIn 0.8s 0.2s forwards;
          animation: ImgGrayIn 0.8s 0.2s forwards;
}

.comics__catch {
  transform: scaleX(0.9);
  transform-origin: left;
  line-height: 1;
}
[data-time=dark] .comics__catch::after {
  background: #fff;
}

.comics__txt {
  overflow: hidden;
  transform: scaleX(0.9);
  transform-origin: left;
}
.comics__txt .txt-in {
  display: inline-block;
  opacity: 0;
}
.-reveal .comics__txt .txt-in {
  -webkit-animation: comicsTxtIn 0.4s 0.2s forwards cubic-bezier(0.55, 0.085, 0.68, 0.53);
          animation: comicsTxtIn 0.4s 0.2s forwards cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

@-webkit-keyframes comicsTxtIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes comicsTxtIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.comics__txt__link {
  align-items: center;
  color: #ec1014;
  display: flex;
}
.comics__txt__link .ico {
  background: #ec1014;
  display: inline-block;
  -webkit-mask: url(/assets/img/common/ico/ico_x.svg) no-repeat top/contain;
          mask: url(/assets/img/common/ico/ico_x.svg) no-repeat top/contain;
}

.comment__inner {
  position: relative;
  z-index: 1;
}

.comment__cont {
  position: relative;
}
[data-time=light] .comment__cont {
  background: #ec1014;
}
[data-time=dark] .comment__cont {
  background: #e6e4e3;
  color: #000;
}
.comment__cont .line {
  display: block;
  background: #ec1014;
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  width: 100%;
}
[data-time=dark] .comment__cont .line {
  background: #e6e4e3;
}
.comment__cont.-reveal .comment__list {
  -webkit-animation: tapeInTop 0.7s 0s forwards;
          animation: tapeInTop 0.7s 0s forwards;
}
.comment__cont.-reveal .comment__list.-bottom {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.comment__list {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  position: relative;
}
.comment__list__item {
  align-items: center;
  border-left: 1px solid #000;
  box-sizing: border-box;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: relative;
}
.comment__list__item:nth-of-type(1) {
  border-right: 1px solid #000;
}
.comment__list__item span {
  white-space: nowrap;
}
.comment__list__item .-txt-y {
  text-combine-upright: all;
  font-style: normal;
}

.comment__cont__name {
  position: absolute;
  left: 0;
  bottom: 0;
}

.comment__btn {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
}
[data-time=light] .comment__btn {
  color: #000;
}
[data-time=dark] .comment__btn {
  color: #ec1014;
}
.comment__btn .ico {
  display: inline-block;
  position: relative;
}
[data-time=light] .comment__btn .ico {
  border-color: #000;
}
[data-time=dark] .comment__btn .ico {
  border-color: #ec1014;
}
[data-time=light] .comment__btn .ico::after {
  background: #000;
}
[data-time=dark] .comment__btn .ico::after {
  background: #ec1014;
}
.comment__btn .thumb {
  display: inline-block;
  position: relative;
}
[data-time=light] .comment__btn .thumb {
  background: #e6e4e3;
}
[data-time=dark] .comment__btn .thumb {
  background: #000;
}
.comment__btn .thumb::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
}
[data-time=light] .comment__btn .thumb::after {
  background: url(/assets/img/top/comment/btn_l.png) no-repeat 0 0/contain;
}
[data-time=dark] .comment__btn .thumb::after {
  background: url(/assets/img/top/comment/btn_d.png) no-repeat 0 0/contain;
}

.intro {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #000;
  -webkit-mask-position: 50% 100%;
          mask-position: 50% 100%;
  -webkit-mask-size: cover;
          mask-size: cover;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
.-intro-in .intro {
  -webkit-animation: displayMaskAnime 1.2s 1s steps(14) forwards;
          animation: displayMaskAnime 1.2s 1s steps(14) forwards;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.-skipIntro .intro {
  display: none;
}

@-webkit-keyframes displayMaskAnime {
  0% {
    -webkit-mask-position: 50% 100%;
            mask-position: 50% 100%;
  }
  99% {
    -webkit-mask-position: 50% 0;
            mask-position: 50% 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes displayMaskAnime {
  0% {
    -webkit-mask-position: 50% 100%;
            mask-position: 50% 100%;
  }
  99% {
    -webkit-mask-position: 50% 0;
            mask-position: 50% 0;
  }
  100% {
    opacity: 0;
  }
}
.introduction {
  position: relative;
}

.introduction__inner {
  position: relative;
}

.introduction__subtxt {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.introduction__subtxt .introduction__subtxt__item {
  background: #ec1014;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  display: inline-block;
  text-align: left;
  position: relative;
}
.-reveal .introduction__subtxt .introduction__subtxt__item {
  -webkit-animation: tapeInLeft 0.5s 0.5s forwards;
          animation: tapeInLeft 0.5s 0.5s forwards;
}
.introduction__subtxt .introduction__subtxt__item img {
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: auto;
}
.introduction__subtxt .introduction__subtxt__item::after {
  position: absolute;
  top: 0;
  left: 0;
  background: #ec1014;
  content: "";
  height: 100%;
  transform-origin: right;
  width: 100%;
}
.-reveal .introduction__subtxt .introduction__subtxt__item::after {
  -webkit-animation: itemOutScaleX 0.5s 0.7s forwards;
          animation: itemOutScaleX 0.5s 0.7s forwards;
}
.introduction__subtxt .introduction__subtxt__item:nth-of-type(2) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.introduction__subtxt .introduction__subtxt__item:nth-of-type(2)::after {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}

.introduction__main {
  opacity: 0;
}
.-reveal .introduction__main {
  -webkit-animation: ItemFadeIn 0.4s 1s forwards;
          animation: ItemFadeIn 0.4s 1s forwards;
}
[data-time=dark] .introduction__main {
  filter: brightness(0) invert(1);
}

.introduction__txt {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
[data-time=light] .introduction__txt.c-visible_light {
  display: flex;
}
[data-time=dark] .introduction__txt.c-visible_light {
  display: none;
}
[data-time=light] .introduction__txt.c-visible_dark {
  display: none;
}
[data-time=dark] .introduction__txt.c-visible_dark {
  display: flex;
}
.introduction__txt .-notxt {
  background: none;
}
.introduction__txt .-notxt::after {
  background: none;
}
.introduction__txt li {
  background: #000;
  color: #fff;
}
[data-time=dark] .introduction__txt li {
  background: none;
}

.m-comment {
  background: #e6e4e3;
}

.m-comment__txt {
  color: #000;
  text-align: left;
}

.mainvisual {
  width: 100%;
}

.mainvisual__inner {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.mainvisual__img {
  height: 100%;
  position: relative;
  width: 100%;
}
.-topin .mainvisual__img {
  -webkit-animation: mvImgUp 0.8s 0s ease forwards;
          animation: mvImgUp 0.8s 0s ease forwards;
}
.-topout .mainvisual__img {
  -webkit-animation: mvImgOut 0.8s 0s ease forwards;
          animation: mvImgOut 0.8s 0s ease forwards;
}

@-webkit-keyframes mvImgUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes mvImgUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@-webkit-keyframes mvImgOut {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes mvImgOut {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.mainvisual__img__item {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: block;
  opacity: 0;
  transform: scale(1.05);
  width: 100%;
}
.-intro-in .mainvisual__img__item, .-load .mainvisual__img__item {
  -webkit-animation: mvImgIn 3s 0.5s forwards ease;
          animation: mvImgIn 3s 0.5s forwards ease;
}

@-webkit-keyframes mvImgIn {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  10% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mvImgIn {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  10% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.mainvisual__title {
  position: relative;
}

.mainvisual__title__sub {
  width: 100%;
}
.mainvisual__title__sub img {
  width: 100%;
}

.mainvisual__title__logo {
  opacity: 0;
}

.mainvisual__info__anime.-before .logo {
  opacity: 0;
}
.-intro-in .mainvisual__info__anime.-before .logo, .-load .mainvisual__info__anime.-before .logo {
  -webkit-animation: ItemFadeIn 2s 1.5s forwards;
          animation: ItemFadeIn 2s 1.5s forwards;
}
.mainvisual__info__anime.-before .txt-tvanime {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.-intro-in .mainvisual__info__anime.-before .txt-tvanime, .-load .mainvisual__info__anime.-before .txt-tvanime {
  -webkit-animation: tapeInLeft 1s 2.4s forwards;
          animation: tapeInLeft 1s 2.4s forwards;
}
.mainvisual__info__anime.-before .txt,
.mainvisual__info__anime.-before .sns {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.-intro-in .mainvisual__info__anime.-before .txt, .-load .mainvisual__info__anime.-before .txt,
.-intro-in .mainvisual__info__anime.-before .sns,
.-load .mainvisual__info__anime.-before .sns {
  -webkit-animation: tapeInLeft 2.2s 2.6s forwards;
          animation: tapeInLeft 2.2s 2.6s forwards;
}

.mainvisual__info__anime {
  transition: all 0.4s 0s;
  text-align: center;
}
.mainvisual__info__anime.-before {
  position: fixed;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.-topin .mainvisual__info__anime.-before {
  filter: blur(10px);
  opacity: 0;
}
.mainvisual__info__anime .logo {
  filter: drop-shadow(0 0 30px #000);
  width: 660px;
}
.mainvisual__info__anime .txt-tvanime {
  margin: -20px auto 0;
  position: relative;
  width: 450px;
  z-index: 1;
}
.mainvisual__info__anime .txt {
  font-size: 1.0625rem;
  color: #fff;
  line-height: 1.4705882353;
  margin-top: -5px;
}
.mainvisual__info__anime .txt .txt-bones {
  font-size: 1.3125rem;
  display: inline-block;
  transform: translateY(-3px);
}
.mainvisual__info__anime .logo-s {
  filter: drop-shadow(0 0 30px #000);
}
.mainvisual__info__anime .sub-side {
  color: #fff;
  font-size: 0.6vw;
  line-height: 1.4615384615;
  margin: 0.1vw auto 0;
  position: relative;
  white-space: nowrap;
  width: 170px;
}
.mainvisual__info__anime .sub-side .txt-bones {
  font-size: 0.8vw;
  display: inline-block;
  transform: translateY(-0.1vw);
}
.mainvisual__info__anime.-after {
  opacity: 0;
}
.-mv-info-in .mainvisual__info__anime.-after {
  opacity: 1;
}
.mainvisual__info__anime.-after.-center {
  position: fixed;
  top: 50%;
  left: calc(50% - 290px);
  transform: translate(-50%, -50%);
  width: min(26.4vw, 354px);
}
.mainvisual__info__anime.-after.-left {
  position: fixed;
  left: 0;
  bottom: 0;
  width: min(10vw, 134px);
}
.mainvisual__info__anime.-after.-right {
  position: fixed;
  bottom: 0;
  right: 580px;
}
.mainvisual__info__anime.-after.-right img {
  height: 100vh;
}

.mainvisual__catch {
  filter: drop-shadow(0 0 7px black);
}
.mainvisual__catch img {
  width: 100%;
}
.mainvisual__catch path {
  opacity: 0;
}
.-intro-in .mainvisual__catch path, .-load .mainvisual__catch path {
  -webkit-animation: mvCatchIn 1.5s 2s forwards;
          animation: mvCatchIn 1.5s 2s forwards;
}
.mainvisual__catch path:nth-of-type(1) {
  -webkit-animation-delay: 3.05s;
          animation-delay: 3.05s;
}
.mainvisual__catch path:nth-of-type(2) {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}
.mainvisual__catch path:nth-of-type(3) {
  -webkit-animation-delay: 3.15s;
          animation-delay: 3.15s;
}
.mainvisual__catch path:nth-of-type(4) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
.mainvisual__catch path:nth-of-type(5) {
  -webkit-animation-delay: 3.25s;
          animation-delay: 3.25s;
}
.mainvisual__catch path:nth-of-type(6) {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}
.mainvisual__catch path:nth-of-type(7) {
  -webkit-animation-delay: 3.35s;
          animation-delay: 3.35s;
}
.mainvisual__catch path:nth-of-type(8) {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}
.mainvisual__catch path:nth-of-type(9) {
  -webkit-animation-delay: 3.45s;
          animation-delay: 3.45s;
}
.mainvisual__catch path:nth-of-type(10) {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

@-webkit-keyframes mvCatchIn {
  0% {
    filter: blur(5px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes mvCatchIn {
  0% {
    filter: blur(5px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
.mainvisual__scroll {
  opacity: 0;
}
.-intro-in .mainvisual__scroll, .-load .mainvisual__scroll {
  -webkit-animation: ItemFadeIn 2s 5s forwards, scrollIcoAnimeOut 2s 2s infinite ease-out;
          animation: ItemFadeIn 2s 5s forwards, scrollIcoAnimeOut 2s 2s infinite ease-out;
}
.mainvisual__scroll .line {
  background: #fff;
}

@-webkit-keyframes scrollIcoAnimeIn {
  0% {
    transform: scaleY(0);
  }
  40% {
    transform: scaleY(1);
  }
}

@keyframes scrollIcoAnimeIn {
  0% {
    transform: scaleY(0);
  }
  40% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes scrollIcoAnimeOut {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1);
  }
  80% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes scrollIcoAnimeOut {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1);
  }
  80% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
.nav {
  height: 100%;
}

.nav__list {
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
}

.nav__list__item {
  color: #fff;
  display: flex;
  line-height: 1;
  position: relative;
}

.nav__item {
  display: inline-block;
  line-height: 1;
  position: relative;
}
.nav__item a {
  display: block;
  height: 100%;
}
.nav__item::after {
  position: absolute;
  bottom: -3px;
  right: 0;
  background: #fff;
  content: "";
  transform-origin: left;
  width: 100%;
}
.nav__item .txt {
  line-height: 1;
}
.nav__item .ico-slash {
  display: inline-block;
  margin: 0 8px;
  width: 17px;
}
.nav__item:hover {
  color: #ec1014;
}
.nav__item:hover::after {
  -webkit-animation: itemInScaleX 0.2s 0s;
          animation: itemInScaleX 0.2s 0s;
  background: #ec1014;
}

[data-time=light] .news__list {
  border-top: 1px solid #000;
}
[data-time=dark] .news__list {
  border-top: 1px solid #858585;
}

.news__list__item {
  position: relative;
}
[data-time=light] .news__list__item {
  border-bottom: 1px solid #000;
}
[data-time=dark] .news__list__item {
  border-bottom: 1px solid #858585;
}
.news__list__item a {
  display: block;
}
.news__list__item .date {
  color: #858585;
  font-weight: 400;
  line-height: 1;
}
.news__list__item .ttl {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-weight: 500;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
[data-time=light] .news__list__item .ttl {
  color: #000;
}
[data-time=dark] .news__list__item .ttl {
  color: #fff;
}
.news__list__item .ico-arw {
  content: "";
}
.news__list__item::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  height: 100%;
  transition: transform 0.3s 0s;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  width: 100%;
}
[data-time=light] .news__list__item::before {
  background: rgba(0, 0, 0, 0.1);
}
[data-time=dark] .news__list__item::before {
  background: rgba(255, 255, 255, 0.2);
}
.news__list__item:hover::before {
  transform: scaleX(1);
}
.news__list__item:hover .ico-arw {
  transform: translateX(5px);
}

.news__more {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  position: relative;
}

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

.pv_ph {
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.pv_ph:hover::before {
  opacity: 0.5;
}
.pv_ph:hover::after {
  transform: translate(-50%, -50%) scale(0.95);
}
.pv_ph::before {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  content: "";
  height: 100%;
  transition: opacity 0.2s 0s;
  width: 100%;
  z-index: 1;
}
.pv_ph::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.2s 0s;
  z-index: 1;
}

.pv__ttl {
  margin-right: 0;
  position: relative;
  pointer-events: none;
  z-index: 1;
}

.pv__txt {
  color: #fff;
  line-height: 1.2;
  text-align: right;
}
[data-time=light] .pv__txt {
  color: #c9c9c9;
}

.pv__deco__path {
  position: relative;
  pointer-events: none;
}
.pv__deco__path.-nrw.c-visible_light {
  position: absolute;
  left: 0;
  bottom: -41.7vw;
}
.pv__deco__path.-nrw.c-visible_dark {
  position: absolute;
  left: 0;
  bottom: -23.1vw;
}

.sns {
  filter: brightness(0.9);
  pointer-events: none;
  z-index: 1000;
}

.sns__list {
  align-items: center;
  display: flex;
  height: 100%;
  width: 100%;
}
.mainvisual__info__anime .sns__list {
  justify-content: center;
}

.sns__item {
  pointer-events: all;
}
.sns__item:hover {
  filter: brightness(3);
}

@-webkit-keyframes iconMove {
  0% {
    transform: translate(0, 0) scale(1) skew(0);
  }
  30% {
    transform: translate(2px, 1px) scale(1.02) skew(10deg);
  }
  70% {
    transform: translate(1px, -1px) scale(0.99) skew(-5deg);
  }
  100% {
    transform: translate(0, 0) scale(1) skew(0);
  }
}

@keyframes iconMove {
  0% {
    transform: translate(0, 0) scale(1) skew(0);
  }
  30% {
    transform: translate(2px, 1px) scale(1.02) skew(10deg);
  }
  70% {
    transform: translate(1px, -1px) scale(0.99) skew(-5deg);
  }
  100% {
    transform: translate(0, 0) scale(1) skew(0);
  }
}
.staff {
  position: relative;
}

[data-time=light] .staff__inner {
  background: rgba(182, 182, 182, 0.8);
}
@-webkit-keyframes staffItemIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes staffItemIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.staff__item {
  display: flex;
  justify-content: space-between;
  transform-origin: top;
  opacity: 0;
  position: relative;
}
.-reveal .staff__item {
  -webkit-animation: staffItemIn 0.5s 0.2s forwards ease;
          animation: staffItemIn 0.5s 0.2s forwards ease;
}
.staff__item:nth-of-type(1) {
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
}
.staff__item:nth-of-type(2) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.staff__item:nth-of-type(3) {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.staff__item:nth-of-type(4) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
.staff__item:nth-of-type(5) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.staff__item:nth-of-type(6) {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.staff__item:nth-of-type(7) {
  -webkit-animation-delay: 0.85s;
          animation-delay: 0.85s;
}
.staff__item:nth-of-type(8) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.staff__item:nth-of-type(9) {
  -webkit-animation-delay: 0.95s;
          animation-delay: 0.95s;
}
.staff__item:nth-of-type(10) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.staff__item:nth-of-type(11) {
  -webkit-animation-delay: 1.05s;
          animation-delay: 1.05s;
}
.staff__item:nth-of-type(12) {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.staff__item:nth-of-type(13) {
  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
}
.staff__item:nth-of-type(14) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.staff__item:nth-of-type(15) {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.staff__item:nth-of-type(16) {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.staff__item:nth-of-type(17) {
  -webkit-animation-delay: 1.35s;
          animation-delay: 1.35s;
}
.staff__item:nth-of-type(18) {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.staff__item:nth-of-type(19) {
  -webkit-animation-delay: 1.45s;
          animation-delay: 1.45s;
}
.staff__item:nth-of-type(20) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
[data-time=light] .staff__item {
  color: #000;
}
.staff__item .txt-90 {
  display: inline-block;
  transform: scaleX(0.9);
  transform-origin: left;
}
.staff__item .txt-80 {
  display: inline-block;
  transform: scaleX(0.8);
  transform-origin: left;
}
.staff__item .-width77 span {
  transform: scaleX(0.77);
  width: 140%;
}
.staff__item .role,
.staff__item .name {
  border-top: 1px solid #858585;
  padding: 23px 0 45px;
}
[data-time=light] .staff__item .role,
[data-time=light] .staff__item .name {
  border-top: 1px solid #0c0d0d;
}
.staff__item:nth-last-of-type(1) .role,
.staff__item:nth-last-of-type(1) .name {
  border-bottom: 1px solid #858585;
}
[data-time=light] .staff__item:nth-last-of-type(1) .role,
[data-time=light] .staff__item:nth-last-of-type(1) .name {
  border-bottom: 1px solid #0c0d0d;
}
.staff__item .role {
  width: 29%;
}
.staff__item .name {
  line-height: 1;
  width: 67.9%;
}
.staff__item .name .en {
  color: #858585;
  line-height: 1;
}
[data-time=light] .staff__item .name .en {
  color: #000;
}
.staff__item .other {
  white-space: nowrap;
}
.staff__item .-spacing {
  letter-spacing: -0.17em;
}

.staff__comment__link {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
}

.staff__comment__txt {
  color: #fff;
  line-height: 1;
}
[data-time=light] .staff__comment__txt {
  color: #000;
}

.staff__comment__ico {
  align-items: center;
  justify-content: center;
  display: flex;
  background: #fff;
  content: "";
}
[data-time=light] .staff__comment__ico {
  background: #000;
}
[data-time=dark] .staff__comment__ico {
  background: #fff;
}
.staff__comment__ico .arw {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
}
[data-time=light] .staff__comment__ico .arw {
  border-color: #fff;
}
[data-time=dark] .staff__comment__ico .arw {
  border-color: #000;
}
[data-time=light] .staff__comment__ico .arw::after {
  background: #fff;
}
[data-time=dark] .staff__comment__ico .arw::after {
  background: #000;
}
@media (max-width: 999px) {
  .comics {
    margin-top: min(45.5vw, 355px);
  }
  .comics__inner {
    padding: 0 0 0 min(5.1vw, 40px);
  }
  .comics__cont {
    margin-top: calc(min(16vw, 125px) * -1);
    padding: min(5.1vw, 40px) 0;
  }
  .comics__cont::before {
    height: 1px;
    width: 69.7vw;
  }
  [data-time=light] .comics__cont::before {
    width: 66vw;
  }
  .comics__top {
    padding-right: min(5.3vw, 42px);
  }
  .comics__ph {
    width: min(45.1vw, 352px);
  }
  .comics__catch {
    font-size: min(7.6vw, 60px);
    margin-top: min(7.4vw, 58px);
  }
  .comics__txt {
    font-size: min(3.5vw, 28px);
    line-height: 1.7142857143;
    margin-top: min(5.7vw, 45px);
  }
  .comics__txt__link {
    font-size: min(4.1vw, 32px);
    margin-top: min(4.1vw, 32px);
  }
  .comics__txt__link .ico {
    height: min(5.1vw, 40px);
    margin-left: min(1.2vw, 10px);
    width: min(5.1vw, 40px);
  }
  .comment {
    margin-top: min(73vw, 570px);
  }
  .comment__inner {
    margin-top: calc(min(12.8vw, 100px) * -1);
  }
  .comment__cont .line {
    height: min(1.1vw, 9px);
  }
  .comment__list__item {
    font-size: min(4.3vw, 34px);
    line-height: min(9.7vw, 76px);
    padding: min(4.2vw, 33px) 0;
    width: min(9.7vw, 76px);
  }
  .comment__cont__name {
    width: min(10.5vw, 82px);
  }
  .comment__btn {
    position: absolute;
    bottom: calc(min(12.8vw, 100px) * -1);
    right: 0;
    gap: 0 min(2.8vw, 22px);
  }
  .comment__btn .txt {
    font-size: min(3.5vw, 28px);
  }
  .comment__btn .ico {
    height: min(3.5vw, 28px);
    transform: translateY(-0.7vw);
    width: min(3.5vw, 28px);
  }
  .comment__btn .thumb {
    height: min(23vw, 180px);
    width: min(28.2vw, 220px);
  }
  .comment__btn .thumb::after {
    height: min(20.5vw, 160px);
    width: min(25.6vw, 200px);
  }
  .intro {
    /* mask-image: url(/assets/img/top/intro/bg_mask_nrw.png);
    width: max(100vw, calc(100vh * 3 / 5));
    height: max(100vh, calc(100vw * 5 / 3)); */
    -webkit-mask-image: url(/assets/img/top/intro/bg_mask_wide.png);
            mask-image: url(/assets/img/top/intro/bg_mask_wide.png);
    -webkit-mask-size: cover;
            mask-size: cover;
    width: max(100vw, 160vh);
    height: max(100vh, 62.5vw);
  }
  .introduction {
    margin-top: min(95.3vw, 744px);
  }
  .introduction__inner {
    margin-top: calc(min(8.4vw, 66px) * -1);
  }
  .introduction__subtxt {
    gap: min(1.2vw, 10px) 0;
  }
  .introduction__subtxt .introduction__subtxt__item {
    height: min(6.6vw, 52px);
  }
  .introduction__main {
    font-size: min(6.6vw, 52px);
    line-height: 1.3269230769;
    margin-top: min(8.2vw, 64px);
    padding-left: min(5.1vw, 40px);
    width: min(82.6vw, 645px);
  }
  .introduction__txt {
    font-size: min(4.6vw, 36px);
    gap: min(0.5vw, 4px) 0;
    margin-top: min(7.6vw, 60px);
  }
  .introduction__txt .-notxt {
    height: min(6.9vw, 54px);
  }
  .m-comment__inner {
    padding: min(20.5vw, 160px) min(11.2vw, 88px);
  }
  .m-comment__txt {
    font-size: min(3.8vw, 30px);
    line-height: 1.7333333333;
    margin-top: min(4.2vw, 33px);
  }
  .m-comment__side {
    text-align: right;
  }
  .m-comment__sign {
    display: inline-block;
    margin-top: calc(min(3.8vw, 30px) * -1);
    width: min(63.5vw, 496px);
  }
  .mainvisual {
    position: relative;
    z-index: 1;
  }
  .mainvisual__img {
    height: 167.9vw;
  }
  .mainvisual__img__item {
    background: url(/assets/img/top/mainvisual/ph_mv_nrw.webp) no-repeat top/100% auto;
    transition: none;
  }
  .mainvisual__img__item::after {
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.86) 20%, rgba(0, 0, 0, 0) 100%);
    content: "";
    display: none;
    height: 20.5vw;
    width: 100%;
  }
  [data-time=dark] .mainvisual__img__item::after {
    display: block;
  }
  [data-time=light] .mainvisual__img__item {
    height: 143.3vw;
  }
  [data-time=dark] .mainvisual__img__item {
    height: 150.3vw;
  }
  .mainvisual__title {
    margin-top: -26.1vw;
  }
  .mainvisual__title__sub {
    height: 120.1vw;
    width: 99.9vw;
  }
  .mainvisual__title__logo {
    margin: 0 auto;
    width: 94.8vw;
  }
  .-intro-in .mainvisual__title__logo, .-load .mainvisual__title__logo {
    -webkit-animation: ItemFadeIn 2s 2s forwards;
            animation: ItemFadeIn 2s 2s forwards;
  }
  .mainvisual__catch {
    position: absolute;
    top: 129.4vw;
    left: 50%;
    transform: translateX(-50%);
    width: 59.9vw;
  }
  .mainvisual__scroll {
    display: none;
  }
  .nav__list {
    align-items: flex-start;
    gap: 8px 0;
  }
  .nav__list__item {
    font-size: 1.125rem;
    padding: 1px 0 0 3px;
  }
  [data-time=light] .nav__list__item {
    background: #000;
    color: #fff;
  }
  [data-time=dark] .nav__list__item {
    background: #fff;
    color: #000;
  }
  .nav__item.c-visible_wide {
    display: none;
  }
  .news {
    padding: min(18.4vw, 144px) 0 0 min(5.1vw, 40px);
  }
  .news__list__item a {
    padding: 5.6vw 15.3vw 5.6vw 3.8vw;
  }
  .news__list__item .date {
    font-size: 0.875rem;
  }
  .news__list__item .ttl {
    font-size: 1rem;
    line-height: 1.28125;
    margin-top: 6px;
  }
  .news__list__item .ico-arw {
    position: absolute;
    bottom: 4.1vw;
    right: 5.1vw;
    height: 3.8vw;
    width: 3.8vw;
  }
  .news__more {
    margin-top: 6.1vw;
    padding-right: 5.1vw;
  }
  .pv {
    margin-top: min(15.3vw, 120px);
    padding-top: min(12.8vw, 100px);
  }
  .pv_ph::after {
    background: url(/assets/img/common/ico/ico_play.svg) no-repeat top/contain;
    height: 31vw;
    width: 31vw;
  }
  .pv__ttl {
    position: absolute;
    top: 0;
    right: 0;
    width: min(34.8vw, 272px);
  }
  .pv__txt {
    position: absolute;
    top: -0.6vw;
    right: -0.3vw;
    font-size: 4.8vw;
    z-index: 1;
  }
  .pv__deco__path.-wide {
    display: none !important;
  }
  .sns {
    position: fixed;
    left: 10px;
    bottom: 10px;
    opacity: 0;
    width: calc(100% - 20px);
    z-index: 4;
  }
  .-load .sns {
    -webkit-animation: ItemFadeIn 0.4s 4s forwards;
            animation: ItemFadeIn 0.4s 4s forwards;
  }
  .sns__list {
    justify-content: space-between;
  }
  .sns__item {
    display: inline-block;
    transition: transform 0.4s 0s;
    transform-origin: bottom;
    width: min(10.5vw, 82px);
  }
  .-is-scrolling .sns__item {
    transform: scaleY(1.15);
  }
  .staff {
    margin-top: min(53.8vw, 420px);
  }
  .staff__inner {
    margin-top: calc(min(19.2vw, 150px) * -1);
    padding: min(17.9vw, 140px) min(5.1vw, 40px) min(17.1vw, 134px) 0;
  }
  [data-time=dark] .staff__list {
    padding-top: 0;
  }
  .staff__item:nth-of-type(1) .name {
    padding-bottom: min(16.6vw, 130px);
  }
  .staff__item .role,
.staff__item .name {
    padding: min(4.1vw, 32px) 0 min(11.2vw, 88px);
  }
  .staff__item .role {
    font-size: min(4.6vw, 36px);
    line-height: 1.25;
    padding-left: min(4.4vw, 35px);
  }
  .staff__item .name .ja {
    font-size: min(7.6vw, 60px);
  }
  .staff__item .name .en {
    font-size: min(2vw, 16px);
    margin-top: min(2vw, 16px);
  }
  .staff__item .other {
    font-size: min(2.9vw, 23px);
    margin-top: min(2vw, 16px);
  }
  .staff__comment {
    position: absolute;
    bottom: min(3vw, 24px);
    right: 0;
  }
  .staff__comment__txt {
    font-size: min(3vw, 24px);
    margin-right: min(1.9vw, 15px);
  }
  .staff__comment__ico {
    height: min(9.2vw, 72px);
    width: min(9.2vw, 72px);
  }
  .staff__comment__ico .arw {
    height: min(5.1vw, 40px);
    width: min(5.1vw, 40px);
  }
}
@media (min-width: 1000px) {
  .comics {
    margin-top: 130px;
  }
  .comics__inner {
    padding: 0 0 0 56px;
  }
  .comics__cont {
    margin-top: -75px;
    padding: 32px 0;
  }
  .comics__cont::before {
    height: 1px;
    width: 407px;
  }
  [data-time=light] .comics__cont::before {
    width: 393px;
  }
  .comics__top {
    padding-right: 25px;
  }
  .comics__ph {
    width: 240px;
  }
  .comics__catch {
    font-size: 2.5rem;
    margin-top: 32px;
  }
  .comics__txt {
    font-size: 1rem;
    margin-top: 30px;
  }
  .comics__txt__link {
    font-size: 1.25rem;
    margin-top: 18px;
  }
  .comics__txt__link .ico {
    height: 26px;
    margin-left: 8px;
    width: 26px;
  }
  .comment {
    margin-top: 318px;
  }
  .comment__inner {
    margin-top: -40px;
    padding-right: 104px;
  }
  .comment__cont .line {
    height: 6px;
  }
  .comment__list__item {
    font-size: 1.125rem;
    line-height: 46px;
    padding: 20px 0;
    width: 46px;
  }
  .comment__cont__name {
    width: 49px;
  }
  .comment__btn {
    position: absolute;
    bottom: -68px;
    right: -86px;
    gap: 0 9px;
  }
  .comment__btn:hover .ico {
    transform: translateY(-2px) translateX(3px);
  }
  .comment__btn:hover .thumb {
    filter: brightness(0.7);
  }
  .comment__btn .txt {
    font-size: 1rem;
  }
  .comment__btn .ico {
    height: 28px;
    transform: translateY(-2px);
    transition: transform 0.2s 0s;
    width: 28px;
  }
  .comment__btn .thumb {
    height: 108px;
    transition: filter 0.2s 0s;
    width: 132px;
  }
  .comment__btn .thumb::after {
    height: 96px;
    width: 120px;
  }
  .intro {
    -webkit-mask-image: url(/assets/img/top/intro/bg_mask_wide.png);
            mask-image: url(/assets/img/top/intro/bg_mask_wide.png);
    width: max(100vw, 160vh);
    height: max(100vh, 62.5vw);
  }
  .introduction {
    margin-top: 393px;
  }
  .introduction__inner {
    margin-top: -54px;
  }
  .introduction__subtxt {
    gap: 5px 0;
  }
  .introduction__subtxt .introduction__subtxt__item {
    height: 30px;
  }
  .introduction__main {
    font-size: 1.9375rem;
    line-height: 1.28125;
    margin-top: 34px;
    padding-left: 43px;
    width: 443px;
  }
  .introduction__txt {
    font-size: 1.25rem;
    gap: 3px;
    margin-top: 32px;
  }
  .m-comment__inner {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    gap: 0 32px;
    padding: 74px;
  }
  .m-comment__ph {
    height: 100%;
    min-height: 800px;
    width: 326px;
  }
  .m-comment__txt {
    font-size: 0.9375rem;
    line-height: 1.9333333333;
    margin-top: 20px;
    max-width: 326px;
    /* width: getVW(326, 1920); */
  }
  .m-comment__sign {
    transform: translateX(-16px);
    width: 270px;
  }
  .mainvisual {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
  }
  .mainvisual__img__item {
    background: url(/assets/img/top/mainvisual/ph_mv_wide.webp) no-repeat center/cover;
    height: 100%;
  }
  .mainvisual__title {
    width: calc(100% - 580px);
  }
  .mainvisual__title__logo {
    position: fixed;
    top: 30px;
    left: 26px;
    width: min(23.8vw, 320px);
  }
  .-load.-mv-info-in .mainvisual__title__logo {
    -webkit-animation: ItemFadeIn 0.4s 0s forwards;
            animation: ItemFadeIn 0.4s 0s forwards;
  }
  .mainvisual__catch {
    position: fixed;
    bottom: 30px;
    right: 18px;
    transition: all 0.4s 0s;
    opacity: 1;
    width: 334px;
  }
  .-topin .mainvisual__catch {
    filter: blur(10px);
    opacity: 0;
  }
  .mainvisual__scroll .line {
    position: fixed;
    bottom: 0;
    right: 174px;
    -webkit-animation: scrollIcoAnimeIn 2s 0s infinite ease-in;
            animation: scrollIcoAnimeIn 2s 0s infinite ease-in;
    height: 140px;
    transform-origin: top;
    width: 0.5px;
  }
  .nav__list {
    justify-content: center;
    gap: 12px 0;
    height: 100%;
  }
  .nav__list__item {
    font-size: 1rem;
  }
  .nav__list__item.c-visible_nrw {
    display: none;
  }
  .nav__item {
    margin-right: 10px;
  }
  .nav__item::after {
    height: 1px;
  }
  .nav__item .ico-slash.c-visible_nrw {
    display: none;
  }
  .news {
    margin-top: -3px;
    padding: 0 0 0 56px;
  }
  .news__list__item a {
    padding: 32px 70px 34px 18px;
  }
  .news__list__item .date {
    font-size: 1rem;
  }
  .news__list__item .ttl {
    font-size: 1rem;
    line-height: 1.625;
    margin-top: 2px;
  }
  .news__list__item .ico-arw {
    position: absolute;
    bottom: 20px;
    right: 24px;
    height: 24px;
    transition: transform 0.3s 0s;
    width: 24px;
  }
  .news__more {
    margin-top: 25px;
    padding-right: 24px;
  }
  .pv {
    margin-top: 100px;
  }
  .pv_ph {
    overflow: hidden;
    height: 260px;
  }
  .pv_ph::after {
    background: url(/assets/img/common/ico/ico_play_s.svg) no-repeat top/contain;
    height: 80px;
    width: 80px;
  }
  .pv_ph img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .pv__ttl {
    position: absolute;
    top: 214px;
    right: 0;
    width: 151px;
    z-index: 2;
  }
  .pv__txt {
    position: absolute;
    top: 35px;
    right: 0;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .pv__deco__path.-nrw {
    display: none !important;
  }
  .sns {
    margin-top: 3px;
  }
  .l-header .sns {
    height: 80px;
  }
  .sns__item {
    transition: filter 0.3s 0s;
    width: 36px;
  }
  .mainvisual__info__anime .sns__item {
    width: 25px;
  }
  .sns__item + .sns__item {
    margin-left: 10px;
  }
  .staff {
    margin-top: 250px;
  }
  .staff__inner {
    margin-top: -64px;
    padding: 52px 56px 98px 0;
  }
  .staff__item:nth-of-type(1) .name {
    padding-bottom: 50px;
  }
  .staff__item .role {
    font-size: 1rem;
    line-height: 1.375;
    padding-left: 40px;
  }
  .staff__item .name .ja {
    font-size: 2.25rem;
  }
  .staff__item .name .en {
    font-size: 0.6875rem;
    margin-top: 8px;
  }
  .staff__item .other {
    font-size: 0.875rem;
    margin-top: 8px;
  }
  .staff__comment {
    position: absolute;
    bottom: 16px;
    right: 0;
  }
  .staff__comment__link:hover .staff__comment__ico {
    transform: translateX(5px);
  }
  .staff__comment__txt {
    font-size: 0.75rem;
    margin-right: 8px;
  }
  .staff__comment__ico {
    height: 26px;
    transition: transform 0.3s 0s;
    width: 26px;
  }
  .staff__comment__ico .arw {
    height: 14px;
    width: 14px;
  }
}
@media (min-width: 1400px) {
  .m-comment__inner {
    justify-content: flex-start;
  }
  .m-comment__ph {
    margin-left: calc(50% - 163px);
  }
}