@charset "UTF-8";
/* ========================================
ニュース、コンテンツ記事
======================================== */
.footer {
  margin-top: 12rem;
}

.contHeader {
  position: relative;
  display: flex;
  align-items: center;
}
.contHeader::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/cont/common/board_line.png);
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
}
.contHeader__logo {
  position: relative;
  z-index: 1;
  width: min(35%, 25.6rem);
  margin-left: clamp(2rem, 6vw, 7.7rem);
  padding: clamp(1rem, 3vw, 3.6rem) 0 clamp(2rem, 6vw, 8rem);
}
.contHeader__bg {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url(../img/cont/common/board_mask.png);
          mask-image: url(../img/cont/common/board_mask.png);
  -webkit-mask-position: bottom center;
          mask-position: bottom center;
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.contHeader__bg::before, .contHeader__bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
.contHeader__bg::before {
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}
.contHeader__bg::after {
  background-color: rgba(0, 187, 187, 0.4);
  mix-blend-mode: color;
}
.contHeader__bg img {
  position: fixed;
  inset: 0 0 auto;
  height: var(--section-bg-h, 100vh);
  height: var(--section-bg-h, 100dvh);
  min-width: 100%;
  transform: translateY(var(--section-bg-y, 0));
  will-change: transform;
  -o-object-fit: cover;
     object-fit: cover;
}

.contentWrap {
  width: 124rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}
.contentWrap__inner {
  width: 100rem;
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  .contentWrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.pager_list {
  color: #00bbbb;
}
.pager_list a {
  color: #ffffff;
  text-decoration: none;
}
.pager_list > ul {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}

.p-news__footer {
  text-align: center;
  margin-top: 4em;
}
.p-news_single__title .articleHead h2 {
  margin-top: 0.5em;
}

/*
   見出し
======================== */
.articleHead {
  line-height: 1.4;
  text-align: center;
}
.articleHead h2 {
  font-size: 3rem;
  line-height: 1.2;
  margin: 2em 0 1.4em;
}
.articleHead h2::after {
  content: "";
  display: block;
  width: 70%;
  margin: 0.5em auto 0;
  height: 0.1rem;
  background-image: linear-gradient(to left, rgba(84, 255, 255, 0), #54ffff, rgba(84, 255, 255, 0));
}
@media screen and (max-width: 960px) {
  .articleHead h2 {
    font-size: 2.4rem;
  }
}

/* ========================================
ON AIR
======================================== */
.onairCatch {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 5rem;
  filter: drop-shadow(0 0 1rem #00f4ff);
}
.onairCatch + .onairCatch::before {
  content: "";
  display: block;
  height: 1em;
  background-image: url(../img/cont/onair/dia.png);
  background-position: center center;
  background-size: 2rem;
  background-repeat: no-repeat;
  margin: 0.3em;
}
@media screen and (max-width: 600px) {
  .onairCatch {
    font-size: 2.4rem;
  }
}

.housouList {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 2rem;
  line-height: 1.5;
  margin-top: 2.25em;
}
.housouList em {
  color: #00f4ff;
  font-weight: inherit;
  font-style: inherit;
}
.housouList__li {
  display: flex;
  justify-content: center;
  padding: 1em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.housouList__li > span {
  width: 26rem;
}
.housouList__title {
  color: #00f4ff;
}

.onaircaut {
  text-align: center;
  margin-top: 4em;
}

/* ========================================
MOVIE
======================================== */
.movieList {
  max-width: 115.8rem;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5.8rem;
  line-height: 1.2;
}
.movieList a {
  color: inherit;
  text-decoration: inherit;
}
.movieList__thumb {
  display: block;
  border: 0.1rem solid #38d8d8;
  padding: 0.2rem;
}
.movieList__title {
  display: block;
  margin-top: 1.6em;
}
@media screen and (max-width: 960px) {
  .movieList {
    gap: 2em;
  }
  .movieList__title {
    display: block;
    margin-top: 1em;
  }
}
@media screen and (max-width: 600px) {
  .movieList {
    grid-template-columns: 100%;
    max-width: 45rem;
  }
}

/* ========================================
STAFF&CAST
======================================== */
.nameBlock + .nameBlock {
  margin-top: 10rem;
}

.names {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em 0;
  text-align: center;
  font-size: min(4vw, 2rem);
  font-weight: 500;
  line-height: 2.5em;
}
.names__item {
  min-width: min(100%, 12em);
}
.names__item.-wide {
  width: 100%;
}
.names__item > * {
  display: block;
  letter-spacing: 0.02em;
  padding-left: 0.02em;
}
.names__role {
  color: #00bbbb;
}
.names__name {
  font-size: min(5vw, 1.5em);
}
.names__add {
  font-size: 0.7em;
}
.names__comment {
  margin-top: 0.5em;
}

/* ========================================
MUSIC
======================================== */
.musicNavi {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.musicNavi > * {
  width: 19rem;
}

.musicTitle {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2rem;
  margin-top: 4em;
}
.musicTitle > * {
  letter-spacing: 0.02em;
  padding-left: 0.02em;
}
.musicTitle__title {
  font-size: 2.5em;
  font-weight: 700;
}
.musicTitle__works {
  font-size: 0.9em;
  margin: 1em 0;
}
.musicTitle__artist {
  font-size: 1.5em;
}

.musicPhoto {
  text-align: center;
  max-width: 100rem;
  margin: 6rem auto 0;
}

.musicInfo > dl {
  display: grid;
  grid-template-columns: 14rem 1fr;
  margin-top: 8rem;
  line-height: 4rem;
}
.musicInfo > dl > dt {
  color: #38d8d8;
}
.musicInfo > dl > dd {
  margin: 0;
}
.musicInfo > dl > dd em {
  display: block;
  font-size: 2rem;
  font-style: inherit;
  font-weight: inherit;
}
@media screen and (max-width: 600px) {
  .musicInfo > dl {
    grid-template-columns: 100%;
    margin-top: 4rem;
    line-height: 3rem;
    gap: 1rem;
  }
}

/* ========================================
CHARACTER
======================================== */
.charaWrap {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 140rem;
  max-width: 100%;
  margin: auto;
}
.charaWrap .swiper-button-disabled {
  opacity: 0.15;
}
.charaWrap__prev, .charaWrap__next {
  position: relative;
  z-index: 2;
  width: 2.4rem;
  height: 4rem;
}
.charaWrap__body {
  position: relative;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 961px) {
  .charaWrap__prev, .charaWrap__next {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2.4rem;
    height: 4rem;
  }
  .charaWrap__prev {
    left: 1.5rem;
  }
  .charaWrap__next {
    right: 1.5rem;
  }
}
@media screen and (max-width: 960px) {
  .charaWrap {
    gap: 2em 6em;
  }
}

.charaNavi::before, .charaNavi::after {
  content: "";
  display: block;
  width: 70%;
  margin: auto;
  height: 0.1rem;
  background-image: linear-gradient(to left, rgba(84, 255, 255, 0), #54ffff, rgba(84, 255, 255, 0));
}
.charaNavi .swiper-wrapper {
  justify-content: center;
  gap: 1.3rem;
  margin: 1em 0;
}
.charaNavi .swiper-slide {
  --charaNavi-line-color: #7e7e7e;
  width: 7.4rem !important;
  border-radius: 50%;
  border: 0.1rem solid var(--charaNavi-line-color);
  padding: 0.2rem;
}
.charaNavi .swiper-slide.swiper-slide-thumb-active {
  --charaNavi-line-color: #00aeb0;
}
.charaNavi__icon {
  border-radius: 50%;
  border: 0.1rem solid var(--charaNavi-line-color);
  overflow: hidden;
  background: #000000;
}
.swiper-slide:not(.swiper-slide-thumb-active) .charaNavi__icon img {
  opacity: 0.6;
  filter: grayscale(1);
}

.charaList {
  overflow: hidden;
}
.chara {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.chara__stand {
  width: 41rem;
  max-width: 70%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: 0.5s linear;
}
.swiper-slide:not(.swiper-slide-active) .chara__stand {
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.chara__prof {
  width: 64.8rem;
  max-width: 100%;
  padding-top: 5rem;
}
@media screen and (max-width: 960px) {
  .chara {
    width: 100%;
    max-width: 60rem;
    margin: auto;
    flex-direction: column;
    align-items: center;
  }
}

.charaname {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  transition: 0.4s ease;
}
.swiper-slide:not(.swiper-slide-active) .charaname {
  opacity: 0;
  filter: blur(2rem);
}
.charaname__ja {
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.charaname__en {
  letter-spacing: 0.13em;
  color: #b5b5b5;
  margin-top: 1.2em;
}
.charaname__cv {
  margin-top: 1.8em;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3.8rem;
  background-image: url(../img/cont/chara/cv_icon.png);
  background-position: left center;
  background-size: 5rem;
  background-repeat: no-repeat;
  padding-left: 6rem;
}

.charainfo {
  line-height: 4rem;
  margin-top: 4rem;
  transition: 0.4s ease;
  transition-delay: 0.2s;
}
.swiper-slide:not(.swiper-slide-active) .charainfo {
  opacity: 0;
  transform: translateX(2rem);
  transition-delay: 0s;
}

.charascene {
  margin-top: 7rem;
  display: flex;
  gap: 1.4rem;
}
.charascene > span {
  border: 0.1rem solid #00bbbb;
  padding: 0.2rem;
  transition: 0.4s ease;
}
.swiper-slide:not(.swiper-slide-active) .charascene > span {
  opacity: 0;
  transform: translateY(-1rem);
}
.swiper-slide-active .charascene > span:nth-child(1) {
  transition-delay: 0.2s;
}
.swiper-slide-active .charascene > span:nth-child(2) {
  transition-delay: 0.3s;
}
.swiper-slide-active .charascene > span:nth-child(3) {
  transition-delay: 0.4s;
}
/*# sourceMappingURL=content.css.map */