@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 3.73vw;
  font-family: Zen Old Mincho, serif;
  scroll-behavior: auto;
}

@media (min-width: 769px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  margin: 0;
  color: #231815;
}

@media (min-width: 769px) {
  body {
    min-width: 1280px;
  }
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  height: auto;
  display: block;
}

.u-pc {
  display: none;
}

@media (min-width: 769px) {
  .u-pc {
    display: block;
  }
}

.u-sp {
  display: block;
}

@media (min-width: 769px) {
  .u-sp {
    display: none;
  }
}

.header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}

@media (min-width: 769px) {
  .header {
    width: 100%;
  }
}

.header__wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 16vw;
  height: 16vw;
  background-color: #000;
  z-index: 999;
  cursor: pointer;
}

@media (min-width: 769px) {
  .header__wrap {
    width: 120px;
    height: 120px;
  }
}

.header__hamburger {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 8vw;
  height: 6.6666666667vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

@media (min-width: 769px) {
  .header__hamburger {
    width: 61px;
    height: 44px;
  }
}

.header__hamburger_line {
  height: .8vw;
  background: #d3434d;
  transition: all .3s ease;
}

@media (min-width: 769px) {
  .header__hamburger_line {
    height: 3px;
  }
}

.header__menu {
  display: none;
  flex-direction: column;
  gap: 10.6666666667vw;
  width: 100%;
  background-color: #7f0000;
  padding-block: 20vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  overflow-y: auto;
  height: 100dvh;
}

@media (min-width: 769px) {
  .header__menu {
    width: 1920px;
    left: 50%;
    translate: -50% 0;
    gap: 40px;
    padding-block: 100px 100px;
  }
}

.header__menu.active {
  display: flex;
}

.header__logo {
  width: 76.8vw;
  height: 17.0666666667vw;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .header__logo {
    width: 400px;
    height: 88px;
  }
}

.header__logo>img {
  width: 100%;
}

.header__navlist {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10.6666666667vw;
  text-align: center;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  font-size: 2.1428571429rem;
  color: #fff;
}

@media (min-width: 769px) {
  .header__navlist {
    gap: 15px;
    font-size: 30px;
  }
}

.header__social {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  gap: 5.3333333333vw;
}

@media (min-width: 769px) {
  .header__social {
    gap: 16.5px;
  }
}

.header__socialImg {
  width: 11.44vw;
  height: 11.68vw;
}

@media (min-width: 769px) {
  .header__socialImg {
    width: 32.5px;
    height: 33.5px;
  }
}

.header__socialImg>img {
  width: 100%;
}

.header__site-logo {
  position: fixed;
  top: 2.6666666667vw;
  left: 1.3333333333vw;
  width: 26.6666666667vw;
  height: 8vw;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s ease, visibility .3s ease;
}

@media (min-width: 769px) {
  .header__site-logo {
    top: 30px;
    left: 30px;
    width: 200px;
    height: 44px;
  }
}

.header__site-logo>a {
  display: block;
}

.header__site-logo>a>img {
  width: 100%;
  display: block;
}

.header__site-logo.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.header__hamburger.active .header__hamburger_line:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 50%;
  translate: 0% -25%;
  background-color: #7f0000;
}

.header__hamburger.active .header__hamburger_line:nth-child(2) {
  opacity: 0;
}

.header__hamburger.active .header__hamburger_line:nth-child(3) {
  transform: rotate(-45deg);
  position: relative;
  bottom: 50%;
  translate: 0% -25%;
  background-color: #7f0000;
}

.toTop {
  position: fixed;
  bottom: 2.6666666667vw;
  right: 2.6666666667vw;
  width: 12.6133333333vw;
  height: 12.6133333333vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 997;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5.3333333333vw);
  transition: opacity .4s ease, transform .4s ease;
}

@media (min-width: 769px) {
  .toTop {
    bottom: 120px;
    right: 240px;
    width: 98px;
    height: 98px;
    transform: translateY(20px);
  }
}

.toTop>img {
  position: absolute;
  width: 100%;
  animation: rotateLoop 5s linear infinite;
}

@keyframes rotateLoop {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.toTop__arrow {
  width: 3.9253333333vw;
  height: 2.9333333333vw;
}

@media (min-width: 769px) {
  .toTop__arrow {
    width: 29.4px;
    height: 22px;
  }
}

.toTop__arrow>img {
  width: 100%;
}

.toTop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.footer {
  background-color: #000;
  color: #fff;
  padding-block: 4vw 5.0666666667vw;
}

@media (min-width: 769px) {
  .footer {
    padding-block: 38px 55.5px;
  }
}

.footer__container {
  width: 64vw;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .footer__container {
    width: 478px;
  }
}

.footer__containerTop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4.0533333333vw;
}

@media (min-width: 769px) {
  .footer__containerTop {
    margin-bottom: 50px;
  }
}

.footer__contact {
  width: 33.7866666667vw;
  height: 11.4666666667vw;
  border: .2666666667vw solid #fff;
}

@media (min-width: 769px) {
  .footer__contact {
    border: 1px solid #fff;
    width: 253.5px;
    height: 84.6px;
  }
}

.footer__contact>img {
  width: 100%;
  max-width: unset;
}

.footer__snsArea {
  width: 23.5786666667vw;
  display: flex;
  justify-content: space-between;
}

@media (min-width: 769px) {
  .footer__snsArea {
    width: 182px;
  }
}

.footer__sns {
  width: 5.8133333333vw;
  height: 5.9466666667vw;
}

@media (min-width: 769px) {
  .footer__sns {
    width: 43.7px;
    height: 44.7px;
  }
}

.footer__sns>img {
  width: 100%;
  max-width: unset;
}

.footer__copylight {
  text-align: center;
  font-weight: 400;
  font-size: 2.1333333333vw;
}

@media (min-width: 769px) {
  .footer__copylight {
    font-size: 14px;
  }
}

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(circle at 10% 95%, #ef4c4d 0%, transparent 60%), #d12d40;
  transition: background-color .7s cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) {
  .hero {
    height: 1272px;
  }
}

.hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@media (min-width: 768px) {
  .hero__inner {
    width: 1000px;
    margin: 0 auto;
  }
}

.hero__inner:before,
.hero__inner:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}

.hero__inner:before {
  background-image: var(--kv1-bg-sp);
  opacity: 1;
}

@media (min-width: 769px) {
  .hero__inner:before {
    background-image: var(--kv1-bg-pc);
    top: 30px;
  }
}

.hero__inner:after {
  background-image: var(--kv2-bg-sp);
  opacity: 0;
}

@media (min-width: 769px) {
  .hero__inner:after {
    background-image: var(--kv2-bg-pc);
  }
}

.hero.hero--kv2 {
  background-color: #4b0c04;
}

.hero.hero--kv2 .hero__inner:before {
  opacity: 0;
}

.hero.hero--kv2 .hero__inner:after {
  opacity: 1;
}

.hero__btnWrap {
  width: 12vw;
  display: flex;
  flex-direction: column;
  gap: 1.968vw;
  padding-top: 20.3333333333vw;
  margin-left: auto;
  margin-right: 3.8986666667vw;
}

@media (min-width: 768px) {
  .hero__btnWrap {
    width: 171px;
    height: 201px;
    flex-direction: row;
    gap: 13.18px;
    padding-top: 24.32px;
    margin-right: 103px;
  }
}

.hero__btn {
  display: block;
  width: 100%;
  cursor: pointer;
}

.hero__btn>img {
  width: 100%;
  display: block;
}

.movie {
  width: 100%;
}

.movie__youtubeWrap {
  width: 100%;
  height: 53.3333333333vw;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

@media (min-width: 769px) {
  .movie__youtubeWrap {
    height: 841px;
  }
}

.movie__youtubeWrap:after {
  content: "";
  display: block;
  position: absolute;
  width: 16.0746666667vw;
  height: 16.0746666667vw;
  background-image: var(--movie-arrow);
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
}

@media (min-width: 769px) {
  .movie__youtubeWrap:after {
    width: 110px;
    height: 110px;
  }
}

.movie__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.movie__popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  background-color: #d3434d;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.movie__popup.is-open {
  opacity: 1;
  pointer-events: auto;
}

.movie__popupInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 89.8666666667vw;
}

@media (min-width: 769px) {
  .movie__popupInner {
    width: 1000px;
    flex-direction: column;
    position: relative;
  }
}

.movie__popupVideoWrap {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  background-color: #000;
}

.movie__popupIframe {
  width: 100%;
  height: 100%;
  display: block;
}

.movie__popupClose {
  width: 16vw;
  height: 16vw;
  margin-top: 16vw;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}

@media (min-width: 769px) {
  .movie__popupClose {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 120px;
    height: 120px;
    margin-top: 0;
  }
}

.movie__popupClose>span {
  display: block;
  width: 100%;
  height: .8vw;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 0;
}

@media (min-width: 769px) {
  .movie__popupClose>span {
    height: 3px;
  }
}

.movie__popupClose>span:first-child {
  rotate: 45deg;
}

.movie__popupClose>span:last-child {
  rotate: -45deg;
}

.news {
  width: 100%;
  background: linear-gradient(to right, #620f13, #a12800 36%, #ff8f00);
}

.news__inner {
  width: 100%;
  margin: 0 auto;
  padding-block: 11.0933333333vw 9.0666666667vw;
}

@media (min-width: 769px) {
  .news__inner {
    width: 1000px;
    padding-block: 80px;
  }
}

.news__title {
  display: block;
  width: 42.008vw;
  height: 14.12vw;
  margin: 0 auto;
  margin-bottom: 4.4666666667vw;
}

@media (min-width: 769px) {
  .news__title {
    width: 333px;
    height: 112px;
    margin-bottom: 52px;
  }
}

.news__title>img {
  width: 100%;
}

.news__itemWrap {
  width: 78.7306666667vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6.0266666667vw;
  margin-bottom: 5.6vw;
}

@media (min-width: 769px) {
  .news__itemWrap {
    width: 890px;
    gap: 40px;
    margin-bottom: 62px;
  }
}

.news__item {
  width: 100%;
  font-weight: 900;
  font-size: .8571428571rem;
  color: #fff;
  font-family: Zen Old Mincho, serif;
  position: relative;
}

@media (min-width: 769px) {
  .news__item {
    font-size: 18px;
    display: flex;
    align-items: center;
  }
}

.news__item:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #fff;
  transition: width .4s ease;
}

.news__item:hover:after {
  width: 100%;
}

@media (min-width: 769px) {
  .news__timeWrap {
    width: fit-content;
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .news__timeWrap:after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    background-color: #fff;
    margin-right: 5px;
  }
}

.news__text {
  width: 100%;
  height: 13.3333333333vw;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  word-break: break-all;
  line-height: 1.8571428571rem;
  display: inline;
}

@media (min-width: 769px) {
  .news__text {
    height: auto;
    line-height: auto;
  }
}

.news__moreWrap {
  width: 53.3333333333vw;
  height: 12vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 769px) {
  .news__moreWrap {
    width: 200px;
    height: 45px;
  }
}

.news__moreWrap:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #830001;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 1;
}

.news__moreWrap:hover:before {
  transform: scaleX(1);
}

.news__moreWrap:after {
  content: "";
  display: block;
  width: 4vw;
  height: 5.3333333333vw;
  background-image: var(--more-arrow);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: auto;
  right: 4.2666666667vw;
  z-index: 2;
  filter: brightness(0);
  transition: filter .35s ease;
}

@media (min-width: 769px) {
  .news__moreWrap:after {
    width: 15px;
    height: 15px;
    right: 16px;
  }
}

.news__moreWrap:hover:after {
  filter: brightness(0) invert(1);
}

.news__more {
  font-family: Zen Old Mincho, serif;
  font-size: 4vw;
  font-weight: 900;
  color: #000;
  position: relative;
  z-index: 2;
  transition: color .35s ease;
}

@media (min-width: 769px) {
  .news__more {
    font-size: 15px;
  }
}

.news__moreWrap:hover .news__more {
  color: #fff;
}

.story {
  width: 100%;
  height: 183.8026666667vw;
  background-image: var(--story-bg-sp);
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 16.2666666667vw;
}

@media (min-width: 769px) {
  .story {
    height: 794px;
    background-image: unset;
    padding-block: 78px 125px;
    position: relative;
  }
  .story:before {
    content: "";
    display: block;
    width: 670px;
    height: 790px;
    background-image: url(../assets/bg_story01.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    opacity: .5;
  }
  .story:after {
    content: "";
    display: block;
    width: 670px;
    height: 790px;
    background-image: url(../assets/bg_story02.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    opacity: .5;
  }
}

.story__inner {
  width: 100%;
}

.story__title {
  width: 86.5333333333vw;
  margin: 0 auto;
  margin-bottom: 10.7626666667vw;
  height: 14.7466666667vw;
  display: block;
}

@media (min-width: 769px) {
  .story__title {
    width: 661.7px;
    height: 138.5px;
    margin-bottom: 50px;
  }
}

.story__title>img {
  width: 100%;
}

.story__subtitle {
  width: 58.56vw;
  margin: 0 auto;
  margin-bottom: 5.6933333333vw;
  height: 6.0266666667vw;
  display: block;
}

@media (min-width: 769px) {
  .story__subtitle {
    width: 633px;
    height: 85.3px;
    margin-bottom: 0;
  }
}

.story__subtitle>img {
  width: 100%;
}

@media (min-width: 769px) {
  .story__subtitle>img {
    width: 60%;
    margin: 0 auto;
  }
}

.story__textWrap {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.3rem;
  text-align: center;
}

@media (min-width: 769px) {
  .story__textWrap {
    gap: 20px;
  }
}

.story__text {
  font-family: Zen Old Mincho, serif;
  font-size: 1rem;
  line-height: 8.2666666667vw;
}

@media (min-width: 769px) {
  .story__text {
    font-size: 18px;
    line-height: 36px;
  }
}

.story__text--orange {
  color: #ff8f00;
}

.character {
  width: 100%;
  background-color: #fff2f2;
  padding-block: 8.3333333333vw 6.6666666667vw;
}

@media (min-width: 769px) {
  .character {
    padding-block: 80px 23px;
  }
}

.character__inner {
  width: 100%;
}

@media (min-width: 769px) {
  .character__inner {
    width: 1160px;
    margin: 0 auto;
    position: relative;
  }
  .character__inner:before {
    content: "";
    display: block;
    width: 17px;
    height: 197px;
    background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAGNCAYAAACbuMhzAAAD/UlEQVR4nO3dzXGbQBjG8ScfDZBjjmrBLdBCUoJSglKCU4JTglyCXIJdgnzNTb7m5hzgHfG17MLuAsr8fzMaTxQJHiFAw6tXuxKQxknSe+bbqbvSj44wRZrXNKq3js+eJ3zJFOQydKcvzFuGIE6ut2kVri3zJOk143ofMy8fAAAAAFL5EPn8sr7dSdrVN0l6UXVd9KIFrpH2ks4Krzgc68Cj5myZo6RvnfvsCtSuzW0rdQN8V7WlkmjWbc6qttBY+aSQdFBVdbDn7VMEOTQW+DDxuYXaL8T7lvkWZq/uGLGc53oZzzFh9vVCLoqrau00snVC6zNl/fdRcQWkV1134O5BEBzGXsVTRBBjy5i93yTZ8Roh7GhsWbOMtuveERpmkZLX1DC9VzND8/NrVhh7Yqp9RhrY2qFh7AgoRx8VxpYRdWSmCGJSbGEAAAAAwC2YUvMNvfXqM6F14Pf5r2NUa/2+BjDzK/Bxh/rvJtqYosptm+pGI4wLYVwI47KpMKFn4PuJyz0o7Az8s/mPTX02rfndweqfXQAAAACACJ8CH3eS9FXSX0l/8sUJ0ywmP6u6sF+tVelB7Z7eZpX7fo1gharm0LFgD0rbKBasrFc+9L3AZa1gtvKDrs3HqwWzlZpCVTPz0DgBF10b4rP8dL8bpsn2s6P6XxMN/rQ+Z5husEMn1KJh7jS+L2UPU6o69wx9e7fIPmNHzND5J/vRNHbEbCLAYmfgsQCLfzZt6lP7tHYAAAAAAADi5Wjb7rXbhXajpfjReFfvuj1l27a1bPsea3WerKOmTql6DnbXrxHG+dhNNZqmCtPcwX37gv3/7AEHfJpjyvTGCOmwAmTy3s5C1695rAZ81vjWsWr51LbewZWXqg7jbgV03wh2Vr8KXqpdtp997vIVoO0cUyjsbD11ZJ+WoQBWAe2+JYWq7wdcwZ1vT2in9EXVEB5P9a03DsiAnaq3xt4OGwgnejTmHJ9NAAAAAHAL6AeORT/wFPQDh4RpllHpBw4J0w1GPzD9wPQD0w/sQj8wAAAAAGwAM+i5MINeiiDMoDeEGfRcmEFvScyg18UMei7MoAcAAAAAN+ZOG7l2spJIr7fvv/wlexKEcdlUmFApxxJplu5bNjXNVuopIEPs5B+uYTGc9CYjjEvo0ZTSm6oid/T4EAAAAACAG5BjFNxea9xNVq6Mr+vZRqn8Lfe1dHTlKrSD0R431oxK5WoywrgQxiV1Te+HqsM6pF43u613r+ERbwEAAAAAGMc0Wy5Ms7VEGOdjN1UsYpotV5hYTLPFNFsuTLMFAAAAABt2r7iBH32OmnDhbxfouQyOULmpypWv2rloJ5EvTJaZhFxcb9MSP7jkR53B/gEl56i5WfjJdAAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
  }
  .character__inner:after {
    content: "";
    display: block;
    width: .5px;
    height: calc(100% - 217px);
    background-color: #000;
    position: absolute;
    top: 217px;
    left: 8px;
  }
}

.character__title {
  width: 84.1066666667vw;
  margin: 0 auto;
  margin-bottom: .4986666667vw;
  height: 17.3333333333vw;
  display: block;
}

@media (min-width: 769px) {
  .character__title {
    width: 666px;
    height: 138.4px;
    margin-bottom: 40px;
  }
}

.character__title>img {
  width: 100%;
}

.character__area {
  width: fit-content;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .character__area {
    width: 100%;
  }
}

.character__tab-group {
  width: fit-content;
  display: grid;
  gap: 2.816vw;
  margin: 0 auto;
  margin-bottom: 4vw;
  grid-template-columns: repeat(6, 1fr);
}

.character__tab-group>.character__tab:nth-child(-n+3) {
  grid-column: span 2;
}

@media (min-width: 769px) {
  .character__tab-group>.character__tab:nth-child(-n+3) {
    grid-column: auto;
  }
}

.character__tab-group>.character__tab:nth-child(4) {
  grid-column: 2/span 2;
}

@media (min-width: 769px) {
  .character__tab-group>.character__tab:nth-child(4) {
    grid-column: auto;
  }
}

.character__tab-group>.character__tab:nth-child(5) {
  grid-column: 4/span 2;
}

@media (min-width: 769px) {
  .character__tab-group>.character__tab:nth-child(5) {
    grid-column: auto;
  }
}

@media (min-width: 769px) {
  .character__tab-group {
    gap: 21px;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 45px;
  }
}

.character__tab {
  width: 19.4053333333vw;
  height: 19.4053333333vw;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

@media (min-width: 769px) {
  .character__tab {
    width: 125px;
    height: 125px;
    transition: all .3s ease;
  }
  .character__tab:hover {
    opacity: .6;
  }
}

.character__tab-A {
  background-image: url(../assets/icon_yoshioka_01.jpg);
}

.character__tab-A.is-active {
  background-image: url(../assets/icon_yoshioka_02.jpg);
}

.character__tab-B {
  background-image: url(../assets/icon_takeru01.jpg);
}

.character__tab-B.is-active {
  background-image: url(../assets/icon_takeru02.jpg);
}

.character__tab-C {
  background-image: url(../assets/icon_kaoru01.jpg);
}

.character__tab-C.is-active {
  background-image: url(../assets/icon_kaoru02.jpg);
}

.character__tab-D {
  background-image: url(../assets/icon_kaorimama_01.jpg);
}

.character__tab-D.is-active {
  background-image: url(../assets/icon_kaorimama_02.jpg);
}

.character__tab-E {
  background-image: url(../assets/icon_miyuki_01.jpg);
}

.character__tab-E.is-active {
  background-image: url(../assets/icon_miyuki_02.jpg);
}

.character .panel {
  display: none;
}

.character .panel.is-show {
  display: block;
  animation: fadeIn .4s ease forwards;
}

.character .panel.is-hiding {
  display: block;
  animation: fadeOut .4s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.character .panel:nth-child(4) .character__nameArea:after,
.character .panel:nth-child(5) .character__nameArea:after {
  display: none;
}

@media (min-width: 769px) {
  .character__panelInner {
    display: flex;
    width: fit-content;
    gap: 35px;
    margin-left: auto;
    margin-right: 135px;
  }
}

@media (min-width: 769px) {
  .character__contentsInner {
    display: flex;
    flex-direction: column-reverse;
    width: fit-content;
    margin: 0 auto;
    gap: 40px;
  }
}

.character__nameArea {
  width: 79.56vw;
  margin: 0 auto;
  margin-bottom: 5.76vw;
}

@media (min-width: 769px) {
  .character__nameArea {
    width: 510px;
    margin-bottom: 30px;
    margin-top: 33px;
  }
}

.character__name {
  width: fit-content;
  margin: 0 auto;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  color: #231815;
  display: flex;
  gap: 6.6666666667vw;
  align-items: center;
  margin-bottom: -1.3333333333vw;
}

@media (min-width: 769px) {
  .character__name {
    gap: 11px;
    margin-bottom: -5px;
    margin-left: 0;
  }
}

.character__nameKanji {
  font-size: 1.4285714286rem;
}

@media (min-width: 769px) {
  .character__nameKanji {
    font-size: 54px;
  }
}

.character__nameAlphabet {
  font-size: .8571428571rem;
}

@media (min-width: 769px) {
  .character__nameAlphabet {
    font-size: 14px;
  }
}

.character__nameCv {
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  text-align: center;
  font-size: .8571428571rem;
  margin-bottom: 1vw;
}

@media (min-width: 769px) {
  .character__nameCv {
    font-size: 20px;
    margin-bottom: 20px;
    text-align: left;
  }
}

.character__imgAll {
  width: 50.4vw;
  height: 112vw;
  margin: 0 auto;
  margin-bottom: 2.1333333333vw;
}

@media (min-width: 769px) {
  .character__imgAll {
    width: 292px;
    height: 673px;
    margin-bottom: 0;
  }
}

.character__imgAll>img {
  width: 100%;
}

.character__imgAll--A>img {
  width: 106%;
  translate: 1.6vw -5.0666666667vw;
}

@media (min-width: 769px) {
  .character__imgAll--A>img {
    width: 106%;
    translate: unset;
  }
}

.character__imgFaceArea {
  width: fit-content;
  display: flex;
  gap: 2.9333333333vw;
  margin: 0 auto;
  margin-bottom: 4.9333333333vw;
}

@media (min-width: 769px) {
  .character__imgFaceArea {
    gap: 24.67px;
    margin-bottom: 0;
  }
}

.character__imgFace {
  width: 30.0666666667vw;
  height: 30.0666666667vw;
}

@media (min-width: 769px) {
  .character__imgFace {
    width: 247.4px;
    height: 247.4px;
  }
}

.character__imgFace>img {
  width: 100%;
}

.character__introduceArea {
  width: 78.6666666667vw;
  display: flex;
  flex-direction: column;
  gap: 7.6vw;
}

@media (min-width: 769px) {
  .character__introduceArea {
    width: 519.4px;
    gap: 28px;
  }
}

.character__introduce {
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  font-size: .8571428571rem;
  color: #231815;
  text-align: center;
}

@media (min-width: 769px) {
  .character__introduce {
    font-size: 14px;
    text-align: start;
  }
}

.onair {
  width: 100%;
  padding-block: 10vw;
  background-image: url(../assets/img_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

@media (min-width: 769px) {
  .onair {
    padding-block: 86px 100px;
  }
}

.onair__inner {
  width: 100%;
}

@media (min-width: 769px) {
  .onair__inner {
    width: 1160px;
    margin: 0 auto;
    position: relative;
  }
  .onair__inner:before {
    content: "";
    display: block;
    width: 17px;
    height: 116px;
    background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAADrCAYAAADjYi+AAAADgUlEQVR4nO2dzZWbMBSFb34aIMssSQlugZQwU4JTAi04JbgFuwS7hHEJ9jY7zza7yUK8+BkhhIQkPMn9zmEzB6QL+jOXpzcAIWk4AHjLfBz6lX50iKnS3NMoVh2fPRd8ySTkOvRHn5jXDEKcuJppEVxP5gjgkrHefebyCSGEEEIIISQVH2Ze3wB4AlCrAwBOMG+jx+44zaxnlBbmfXmq43DuRI8S+mRqADsAq97fjzBP4qLOqwfO2wN4DqxzkArmDuVuX2Dudsw+qbpztN9j+TIx7FSB64jr1+r6zRwhK1WQt+1HaFQ5tedcJ5uugN0MIYI84Ta2gJeugCaBGHk6kz29PtJJU3gqesRFiSnCVDHOu4lAyrD8wqliZDqPGdJ9pIzoJaJG+qE9azBskW7Smz0LV7gN8dDlQF93dl0TulBWMJNW/xGfYDq57uiV47xnJLZd17hfNH3HFRNm3BQ/rhqYtUv/uLqoYw/zE4MQQgghhBBCCFmYkPfqEAv/jqnv2m/x9zHKXf2+OD3h+4wKxbuTLzDyPWERM6DB/beDK9J4g0HIFxjdT7YoEzf6lwo3e19bbinc9SCecD/yJjlWqalhxxAfkMbEDqKFPX8Ub5IG9mQ466NWDEOjZLEm0V9tFxklDYbd8aTErE3y8Vw3izjiIVwAfJsrJiVRC+UPpJ/GiwbLE0IIIYQQQsi/wKeJ5x0AfAXwG8CvfHKm0ffnWtgh2cXYYjiA/QxjEBUXJgGAY8K2WMCvQVepDrHsx+UtIkxbrNpQWkSYVCpUMHb8UDqHK4wf6IsJTSZGI/1sB9sZHcyAkFNMX1jbE1VUzArjfSm7mAZm7hn6elekz8iIGZp/so+msRHzEAKKzcBjAoqvTQ+1ah+WFkAIIYQQQgghhMyHYdsufmYQQgghhBBCCCGE/M/kcCGsPZdT0x7m2CNpRQ+kdCFkw6/vXIk2ybpVOiT2atAsWkKM89x3mUTUh+7gvr7gTNWaSoxOIODbkythUMn/F0+FW7CpRKI5U2F2SMze7L3dkv6yhR2HtVbCJKG1FtXf2Rw9d/nC4GSO6eeddh3bWCFwCJA4rH6TSKJRl3Bn80w1pa8w2UhDkpzXME2jc3nukWA3cvH9+4QQQgghhBBis0Gaf3XjYoeAd215J86FbE2646HMIp/BWDRfok9Mlr2OLlzNVCJVGNORvU/+ABJfvgLEBgs1AAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
  }
  .onair__inner:after {
    content: "";
    display: block;
    width: .5px;
    height: calc(100% - 217px);
    background-color: #000;
    position: absolute;
    top: 136px;
    left: 8px;
  }
}

.onair__title {
  display: block;
  width: 43.3866666667vw;
  height: 14.6666666667vw;
  margin: 0 auto;
  margin-bottom: 10.4266666667vw;
}

@media (min-width: 769px) {
  .onair__title {
    width: 348px;
    height: 138px;
    margin-bottom: 24px;
  }
}

.onair__title>img {
  width: 100%;
}

.onair__onair {
  width: fit-content;
  margin: 0 auto;
  padding-bottom: 8vw;
}

@media (min-width: 769px) {
  .onair__onair {
    padding-bottom: 16.4px;
  }
}

.onair__onair--bar:after {
  content: "";
  display: block;
  width: 93.3333333333vw;
  height: .1333333333vw;
  margin: 0 auto;
  background-color: #231815;
  margin-top: 6.6666666667vw;
}

@media (min-width: 769px) {
  .onair__onair--bar:after {
    width: 800px;
    height: .5px;
    margin-top: 45px;
  }
}

.onair__itemTitleArea {
  width: 27.7333333333vw;
  height: 7.4666666667vw;
  background-color: #231815;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 4.8vw;
}

@media (min-width: 769px) {
  .onair__itemTitleArea {
    width: 140px;
    height: 35px;
    margin-bottom: 12px;
  }
}

.onair__itemTitle {
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  color: #fff;
  font-size: 1.0285714286rem;
}

@media (min-width: 769px) {
  .onair__itemTitle {
    font-size: 17px;
  }
}

.onair__onairTime {
  display: flex;
  flex-direction: column;
  gap: 2.8133333333vw;
  width: fit-content;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .onair__onairTime {
    gap: 16px;
  }
}

.onair__onairAX {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.onair__onairTimeBox {
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  font-size: 1.2857142857rem;
  color: #231815;
  line-height: 6.9333333333vw;
  text-align: center;
}

@media (min-width: 769px) {
  .onair__onairTimeBox {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    font-size: 22px;
    line-height: 29px;
  }
}

.onair__onairTimeText--red {
  color: #d3434d;
}

.onair__onairTimeCaution {
  font-family: Zen Old Mincho, serif;
  font-size: .9285714286rem;
}

@media (min-width: 769px) {
  .onair__onairTimeCaution {
    font-size: 15px;
  }
}

.onair__versionArea {
  display: flex;
  flex-direction: column;
  gap: 10.9333333333vw;
  margin-bottom: 8vw;
}

@media (min-width: 769px) {
  .onair__versionArea {
    gap: 50px;
    margin-bottom: unset;
  }
}

.onair__version {
  width: fit-content;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .onair__version {
    width: 100%;
  }
}

.onair__versionTitleArea {
  width: 42.6666666667vw;
  height: 7.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .2133333333vw solid #231815;
  margin: 0 auto;
  margin-bottom: 3.4666666667vw;
}

@media (min-width: 769px) {
  .onair__versionTitleArea {
    width: 200px;
    height: 35px;
    border: 1px solid #231815;
    margin-bottom: 13.5px;
  }
}

.onair__versionTitle {
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  font-size: 1.0285714286rem;
  color: #231815;
}

@media (min-width: 769px) {
  .onair__versionTitle {
    font-size: 18px;
  }
}

.onair__versionBox {
  width: 80vw;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .onair__versionBox {
    width: 900px;
  }
}

.onair__versionBox--upcoming {
  margin-top: 7.4666666667vw;
}

@media (min-width: 769px) {
  .onair__versionBox--upcoming {
    margin-top: 21.6px;
  }
}

.onair__versionTime {
  text-align: center;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  font-size: 1.1428571429rem;
  color: #231815;
  margin-bottom: 3.4666666667vw;
}

@media (min-width: 769px) {
  .onair__versionTime {
    font-size: 22px;
    margin-bottom: 14px;
  }
}

.onair__linkWrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: .9714285714rem;
}

@media (min-width: 769px) {
  .onair__linkWrap {
    gap: 20px;
  }
}

.onair__linkWrap>a {
  width: calc(50% - .9714285714rem / 2);
}

@media (min-width: 769px) {
  .onair__linkWrap>a {
    width: calc(25% - 15px);
  }
}

.onair__linkWrap>a[href=""] {
  opacity: .5;
  pointer-events: none;
}

.onair__link {
  width: 38.08vw;
  height: 9.0666666667vw;
  background-color: #830001;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@media (min-width: 769px) {
  .onair__link {
    width: 210px;
    height: 50px;
  }
}

.onair__link:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ff8f00;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 1;
}

.onair__link:hover:before {
  transform: scaleX(1);
}

.onair__link:after {
  content: "";
  display: block;
  width: 1.6693333333vw;
  height: 2.24vw;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='_レイヤー_2'%20data-name='レイヤー%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206.26%208.39'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23fff;%20}%20%3c/style%3e%3c/defs%3e%3cg%20id='contents'%3e%3cpolygon%20class='cls-1'%20points='3.13%202.1%200%200%200%201.25%201.27%202.1%204.4%204.2%201.27%206.3%200%207.15%200%208.39%203.13%206.3%206.26%204.2%203.13%202.1'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: auto;
  right: 2.8vw;
  translate: 0 -50%;
  z-index: 2;
}

@media (min-width: 769px) {
  .onair__link:after {
    width: 9.2px;
    height: 12.3px;
    right: 16px;
  }
}

.onair__linkText {
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  font-size: .68rem;
  line-height: 2.9013333333vw;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 2;
}

@media (min-width: 769px) {
  .onair__linkText {
    font-size: 14px;
    line-height: 18px;
  }
}

.onair__cautionArea {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  color: #231815;
  display: flex;
  flex-direction: column;
  gap: 1.3333333333vw;
  font-size: .7142857143rem;
}

@media (min-width: 769px) {
  .onair__cautionArea {
    font-size: 10px;
    gap: 12px;
    margin-top: 53px;
  }
}

.staff {
  width: 100%;
  padding-block: 12.6666666667vw;
  background-color: #fff2f2;
}

@media (min-width: 769px) {
  .staff {
    padding-block: 90px 110px;
  }
}

.staff__inner {
  width: 100%;
}

@media (min-width: 769px) {
  .staff__inner {
    width: 1160px;
    margin: 0 auto;
    position: relative;
  }
  .staff__inner:before {
    content: "";
    display: block;
    width: 17px;
    height: 213.2px;
    background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAGrCAYAAABKTS5YAAAFb0lEQVR4nO2dvXXrOBCF7/40oA03VAtqQRu+0Bu+UC24BW8JakEuQS7BLkFON5PTzbwBNEcQBJBDAqRkn+87h4lIUZcgAB5eDWYk+MLsJX1OvO3TH/21IGbR5po6ufqN33u+8MdEQo65D/vEfEwgpEjpNt2EUsu8SHqf8HefJz4/AAAAAADAt+S3Ace+SlorvHz96/zOStJPST8kLU/f/W+IwBxrBRvjKJ9DsVDeVjlKeqwVsz2dbOsU8poREm9PNWLs5A+OY024ibeWXCT7VmPFeE+wSoTk2PfsbybGrryrb1n/ex0rxm7TuuOYxUnEp7o7adx6o7Ar3nUcs5NvxFWLsab9lLTJ7H+K9vcN3QdV3ibpfOV2ou1pOySf91HdgaXyRBYL8UyIW4VbOXpox2xOoo6nba/8rQMAAAAAAIBvwkqN3ihrKboQdxU/g5gSiKkldqdqt6MKo+kXp5jRZmAPF7/fF6dn/NNQwFI+p30WmPQGg5gS3tHUkg9Jb5o5ohYAAAAA4B7xxuntJf2pEGPnjdGbjDQ05VE3NAgt5iW1Nw4KUUWzC1souAddwrbqDhKbjLUugwBTQ+gmwuKYzVwY5azCUq9loXMoVE7YTuF2T7KktivmzvrZTte+YHbJ65RiUmGPiahZxazU3ZcmF7NWmHtydu0sfcZGTG7+mXw0dY2YuxAw2wzcJWD2Z9NdPbX3txYAAAAAAAAAUE/LOL3YNLjg28bpmX/Td/wscXoL+VxM4vQGg5gSiCnRMoLxQ9JfA44nOyUAAAAAAADMDAZjCQzGm4KYEogpcVdiMBgBAAAAAAC+EF7nKmWtYPpI4WXspY2c4SJy/t5BM6el22REpFt1nR0Py+gHrVqRYauNbanrJvncSlgcFNbdVq84tFIlXUU5VjrXzdgovw7XtqqaGp6KM1JoidwK1AddJysYvSzWs756rcvWKJVFsoIxVyWtvdgIKhF3bju2q4jLQRmH3IstBF5m9sWlb/a6LAZT6hvWoUdhfSEdunFJnLgllrqsWLSIPt9ljh+ElUOyCkRpKa1cC8TFhHKLy3Ot7MZa51XnfnFU96jIzdiHnu+4iVvjIP8EtjoJaLbEOp1Djgqdt6q5x5BWOEuX2b/qPLlNLi73IFwrn3xi9JD1Ys+bHJYVwx6IVeWzPAzp/ZNkwgAAAAAAAIDxDrmx1tldWOr8nv2m4Jy/SXrWxCFNGw2LhHX5v2NaxhI6xrwoXL3VvbBWSgX8rdBSTYitkINCC3W9W6fuebUhbcRm0VBzMC2HXeVgxfXWu0qh92F+TpVtYqZzX731PuI/RK5axxtOaf7Ms+qKs7zr3IGv/p/yirGraPGPm51jdL9p0vEiEVnv75ZRr1euqFfMLBGqQ8W08Hjj59coMfbFVn1GyrS2V4yNgBZ/QNg5qkZmy1S75IwFAAAAAICvAjW/aqHm1xCo+eURE8cKU/PLIyYVRs0van5R84uaXyWo+QUAAAAAAAB3jNeul87JKd7lt+xXkn5K+qEQhfauYPlXYUvkvYGmacht7NtUp/gw89kTB5yu/89tpZwRLuzknkwq6UJza8lFsm/yQNM492+pFfc9+5uJsSvv6lvW/0ZHS3sSm8Sh3V2dtJg52YtdcVf8uGXC6Btx1WLi7Be5UP04n0jf0H1Qg6D2OG/Iq0JrbXXphHt+oLoDS+WJLBbimRDNSW9iVpoxbYlO9mq0ygIAAAAAAADuk5XuJPyFYlKDQUyJuxLjpWUFvTjk8oJvW0HPyywV9Lww6Q0GMSVa1onz8qGQZ6ImWwsAAAAAAMCteVJdfs4+dhoQOGjRZ1ORDYn6Uq+3sxZs6RMzyQLvEqXbNMdLOS/+bv4HEDcS61VNbYMAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
  }
  .staff__inner:after {
    content: "";
    display: block;
    width: .5px;
    height: calc(100% - 233.2px);
    background-color: #000;
    position: absolute;
    top: 233px;
    left: 8px;
  }
}

.staff__title {
  display: block;
  width: 80.8vw;
  height: 14.1333333333vw;
  margin: 0 auto;
  margin-bottom: 5.3333333333vw;
}

@media (min-width: 769px) {
  .staff__title {
    width: 674px;
    height: 138px;
    margin-bottom: 30px;
  }
}

.staff__title>img {
  width: 100%;
}

.staff__area {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8vw;
}

@media (min-width: 769px) {
  .staff__area {
    gap: 49.5px;
  }
}

.staff__nameTitleWrap {
  width: 24.0533333333vw;
  height: 5.52vw;
  margin: 0 auto;
  background-color: #231815;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  font-size: .7428571429rem;
  margin-bottom: 3.5733333333vw;
}

@media (min-width: 769px) {
  .staff__nameTitleWrap {
    width: 112.7px;
    height: 26px;
    font-size: 18px;
    margin-bottom: 11.25px;
  }
}

.staff__nameTop {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  color: #231815;
  text-align: center;
  line-height: 100%;
  margin-bottom: 3.2vw;
}

@media (min-width: 769px) {
  .staff__nameTop {
    gap: 3px;
    margin-bottom: 40px;
  }
}

.staff__nameTopText {
  font-size: .7142857143rem;
}

@media (min-width: 769px) {
  .staff__nameTopText {
    font-size: 14px;
  }
}

.staff__nameText {
  font-size: .8571428571rem;
}

@media (min-width: 769px) {
  .staff__nameText {
    font-size: 18px;
  }
}

.staff__nameWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3333333333vw;
  cursor: pointer;
}

.staff__nameWrap.no-popup {
  cursor: default;
}

.staff__nameWrap.no-popup:after {
  display: none;
}

@media (min-width: 769px) {
  .staff__nameWrap {
    gap: 3px;
  }
}

.staff__nameWrap:after {
  content: "";
  display: block;
  width: 3.4666666667vw;
  height: 3.4666666667vw;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMyI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzIzMTgxNTsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIGZvbnQtZmFtaWx5OiBSb3VuZGVkTXBsdXMxYy1FeHRyYUJvbGQsICdSb3VuZGVkIE1wbHVzIDFjJzsKICAgICAgICBmb250LXNpemU6IDZweDsKICAgICAgICBmb250LXdlaWdodDogNzAwOwogICAgICB9CgogICAgICAuY2xzLTMgewogICAgICAgIGxldHRlci1zcGFjaW5nOiAtLjMzZW07CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgbGV0dGVyLXNwYWNpbmc6IC0uNThlbTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9ImNvbnRlbnRzIj4KICAgIDxnPgogICAgICA8Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjYuNSIgY3k9IjYuNSIgcj0iNi41Ii8+CiAgICAgIDx0ZXh0IGNsYXNzPSJjbHMtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjk4IDguNjYpIj48dHNwYW4gY2xhc3M9ImNscy00IiB4PSIwIiB5PSIwIj7jg7vjg7s8L3RzcGFuPjx0c3BhbiBjbGFzcz0iY2xzLTMiIHg9IjUuMDQiIHk9IjAiPuODuzwvdHNwYW4+PC90ZXh0PgogICAgPC9nPgogIDwvZz4KPC9zdmc+);
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 769px) {
  .staff__nameWrap:after {
    width: 18px;
    height: 18px;
  }
}

.staff__itemWrap {
  width: fit-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.3333333333vw 2.6666666667vw;
  justify-items: center;
}

@media (min-width: 769px) {
  .staff__itemWrap {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 65px;
  }
}

.staff__item {
  width: 24.4vw;
  display: flex;
  gap: 1.3333333333vw;
  align-items: flex-end;
  cursor: pointer;
  line-height: 90%;
}

.staff__item.no-popup {
  cursor: default;
}

.staff__item.no-popup:after {
  display: none;
}

@media (min-width: 769px) {
  .staff__item {
    width: fit-content;
    gap: 4.38px;
  }
}

.staff__item:after {
  content: "";
  display: block;
  width: 3.4666666667vw;
  height: 3.4666666667vw;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMyI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzIzMTgxNTsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIGZvbnQtZmFtaWx5OiBSb3VuZGVkTXBsdXMxYy1FeHRyYUJvbGQsICdSb3VuZGVkIE1wbHVzIDFjJzsKICAgICAgICBmb250LXNpemU6IDZweDsKICAgICAgICBmb250LXdlaWdodDogNzAwOwogICAgICB9CgogICAgICAuY2xzLTMgewogICAgICAgIGxldHRlci1zcGFjaW5nOiAtLjMzZW07CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgbGV0dGVyLXNwYWNpbmc6IC0uNThlbTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9ImNvbnRlbnRzIj4KICAgIDxnPgogICAgICA8Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjYuNSIgY3k9IjYuNSIgcj0iNi41Ii8+CiAgICAgIDx0ZXh0IGNsYXNzPSJjbHMtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjk4IDguNjYpIj48dHNwYW4gY2xhc3M9ImNscy00IiB4PSIwIiB5PSIwIj7jg7vjg7s8L3RzcGFuPjx0c3BhbiBjbGFzcz0iY2xzLTMiIHg9IjUuMDQiIHk9IjAiPuODuzwvdHNwYW4+PC90ZXh0PgogICAgPC9nPgogIDwvZz4KPC9zdmc+);
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 769px) {
  .staff__item:after {
    width: 18px;
    height: 18px;
    translate: 0 3px;
  }
}

.staff__person {
  width: 20.0533333333vw;
  display: flex;
  flex-direction: column;
  gap: 1.3333333333vw;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  color: #231815;
  text-align: center;
}

@media (min-width: 769px) {
  .staff__person {
    width: fit-content;
    gap: 4.9px;
  }
}

.staff__role {
  font-size: .5714285714rem;
}

@media (min-width: 769px) {
  .staff__role {
    font-size: 14px;
  }
}

.staff__personName {
  font-size: .8571428571rem;
}

@media (min-width: 769px) {
  .staff__personName {
    font-size: 18px;
  }
}

.staff__popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3e3a39e6;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.staff__popupContent {
  width: 100%;
  position: relative;
  background-color: #d3434d;
  padding-block: 5.3333333333vw 12vw;
}

@media (min-width: 769px) {
  .staff__popupContent {
    width: 1100px;
    padding-block: 80px 60px;
  }
}

.staff__popupClose {
  position: absolute;
  width: 16vw;
  height: 16vw;
  top: 0;
  right: 0;
}

@media (min-width: 769px) {
  .staff__popupClose {
    width: 120px;
    height: 120px;
  }
}

.staff__popupClose>img {
  width: 100%;
}

.staff__popupinner {
  width: 80vw;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .staff__popupinner {
    width: 800px;
  }
}

.staff__popupNameArea {
  width: 100%;
  margin-bottom: 8vw;
}

@media (min-width: 769px) {
  .staff__popupNameArea {
    margin-bottom: 60px;
  }
}

.staff__popupNameArea:after {
  content: "";
  display: block;
  width: 100%;
  height: .2vw;
  background-color: #fff;
}

@media (min-width: 769px) {
  .staff__popupNameArea:after {
    height: .75px;
  }
}

.staff__popupNameInner {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  gap: 2.6666666667vw;
  align-items: center;
  justify-content: center;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6.6666666667vw;
}

@media (min-width: 769px) {
  .staff__popupNameInner {
    gap: 17px;
    margin-bottom: 38px;
  }
}

.staff__popupRoll {
  font-size: .8571428571rem;
}

@media (min-width: 769px) {
  .staff__popupRoll {
    font-size: 30px;
  }
}

.staff__popupName {
  font-size: 1.1428571429rem;
}

@media (min-width: 769px) {
  .staff__popupName {
    font-size: 40px;
  }
}

.staff__popupImg {
  width: 57.0666666667vw;
  margin: 0 auto;
  height: auto;
  margin-bottom: 8vw;
}

@media (min-width: 769px) {
  .staff__popupImg {
    width: 370px;
    margin-bottom: 56.7px;
  }
}

.staff__popupImg>img {
  width: 100%;
}

.staff__popupDetail {
  width: 78.6666666667vw;
  margin: 0 auto;
  font-family: Zen Old Mincho, serif;
  font-weight: 900;
  color: #fff;
}

@media (min-width: 769px) {
  .staff__popupDetail {
    width: 800px;
    font-size: 14px;
  }
}

.comic {
  width: 100%;
  padding-block: 7.3866666667vw 16vw;
}

@media (min-width: 769px) {
  .comic {
    padding-block: 84px 107px;
  }
}

.comic__inner {
  width: 100%;
}

@media (min-width: 769px) {
  .comic__inner {
    width: 1160px;
    margin: 0 auto;
    position: relative;
  }
  .comic__inner:before {
    content: "";
    display: block;
    width: 17px;
    height: 119px;
    background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAADvCAYAAAB4822WAAADcElEQVR4nO2dMZKbMBiF3yZpUpIyJVdIm9JtSu8RfAVfwTnC5gj4CPYRvEcwbTq23c4pxD8WsoQk9IO9mffNaDxmkXgICawn8S9APjAHAJeZ08E96KeAmErnnEa5OcaXSIZvMwnpfBtjYt5mEBIkdJnuQqhmjgDaGY+7n7l8QgghhBBCCPkveSrMv+rTDwB1nwDgFWaQ9ooFBmwbAGek2x9NL3iUKTXTAFg722Q4LEaB1JIr4BmmplSwTaQzTA2NeTkVgC2MBSL5NhpCtlaBL5l5KwxPJHrJYoXJ2TUF5Zz6Mk4lYjZ9IR3KLLYaI7WTahat+s89ytysFtcG7HaCZDFyFscCIYKUMbndqDQ8S4T0xgH39PRqd0OqmEX8t1wxN2czAfv5NUmMZNRqM4CntlPFSA9Yje6VhpRR1DM1hAgaNUwIIYQQQgghS6Bhva5xNRTtoesbzEDtCM9QVhPXNIylMzzmkEtuzdTwe7pHmJqwDQKf9bqHsV+LqTA0ok8wZxuzXtcYOp036/Om0KDMyxWT8gJgVyJErK8LEq79CCurnMlezw7lHrAgNbydWoCYyVr+TNbaThdppBreXtCSe6gVjPc0GG+c9lyDUWN6RsqY/IiwJyC0unZRZ3iB3k2v+C5c4drFcx8Hdr5zKE/ug7KCuWm5VSyztXZDrwL7PUPZ/s+dve2QcMeda167tdIeOvNUhBBCCCGEEEIeidQR5RnG3PEl4LoW2Pc3dTGX3IItXKGttf3PFDEbXMfRlSfV/YFyV8Q+Bb8oIGJq5zswNAnmOv4oKxjHy7VPOuSvts5GnKoG/imgA+JuV7GADcIREw6IL3ynABVs29VuhM1SAmxs67SDmfJRF/A5cb8WwFcA33sRP2Hcy1/993cAf7XFxRhrN6deoMZkh7qwxduSUMPUit22Fu9lOcKk92muuFYTdjOdrPnUrKzPytkGJDy1YyFfBDkL9zcNoLg4PVXM5DloC5kGbJ3PbDH2+25uYe7PSXe/RQPqEEIIIYQQQgghH4ScpZM5b2kMWGK+aYxJ/szvGYQQQgghhBBCCCFKMCRvCIbk1RDCkLw+GJI3BEPyLglD8rowJG8IhuQlhBBCCCGEEGV20AkYGqJBRohVsbvmwmulPVTcztgCsEVfxIyJ8f5X+bkIXaYlXqrji3vJ/AN7NpbOaVVEJQAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
  }
  .comic__inner:after {
    content: "";
    display: block;
    width: .5px;
    height: calc(100% - 139px);
    background-color: #000;
    position: absolute;
    top: 139px;
    left: 8px;
  }
}

.comic__title {
  display: block;
  width: 49.8666666667vw;
  height: 16.8533333333vw;
  margin: 0 auto;
  margin-bottom: 9.3333333333vw;
}

@media (min-width: 769px) {
  .comic__title {
    width: 354px;
    height: 138px;
    margin-bottom: 32px;
  }
}

.comic__title>img {
  width: 100%;
}

.comic__area {
  width: 79.4133333333vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.7333333333vw;
  margin-bottom: 11.04vw;
}

@media (min-width: 769px) {
  .comic__area {
    width: 595.6px;
    gap: 28.4px;
    margin-bottom: 63.24px;
  }
}

.comic__item {
  width: 23.9466666667vw;
  height: 34.4vw;
}

@media (min-width: 769px) {
  .comic__item {
    width: 179.6px;
    height: 258px;
  }
}

.comic__item>img {
  width: 100%;
}

.comic__bannerWrap {
  width: 53.3333333333vw;
  height: 17.5466666667vw;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .comic__bannerWrap {
    width: 364.5px;
    height: 120px;
  }
}

.comic__banner {
  width: 100%;
  height: auto;
}