@charset "UTF-8";

/* ===============================================
# Top
=============================================== */
.p-top-mv__inner {
  display: grid;
  grid-template-columns: max(440px, calc(440 / 1440 * 100%)) 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

@media (max-width: 768px) {
  .p-top-mv__inner {
    grid-template-columns: revert;
    grid-template-areas:
    "kv"
    "info";
    -webkit-box-align: revert;
        -ms-flex-align: revert;
            align-items: revert;
  }
}

.p-top-mv__info {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 100px 45px;
}

@media (max-width: 768px) {
  .p-top-mv__info {
    position: revert;
    padding: 30px 20px;
    grid-area: info;
  }
}

.p-top-mv__logo {
  width: 160px;
  margin-inline: auto;
}

.p-top-mv__onair {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .p-top-mv__onair {
    margin-top: revert;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .p-top-mv__kv {
    grid-area: kv;
  }
}

.p-top-movie__button {
  width: 100%;
  aspect-ratio: 1440 / 500;
  overflow: hidden;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(from var(--color-black) r g b / .5);
    -webkit-transition: background-color var(--duration) var(--easing);
    transition: background-color var(--duration) var(--easing);
  }
}

@media (any-hover: hover) {
  .p-top-movie__button:hover::after {
    background-color: transparent;
  }

  .p-top-movie__button:hover .p-top-movie__play {
    scale: .9;
  }
}

@media (max-width: 768px) {
  .p-top-movie__button {
    aspect-ratio: 375 / 200;
  }
}

.p-top-movie iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: auto;
  position: absolute;
  inset: 0;
}

.p-top-movie__play {
  width: 142px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  translate: -50% -50%;
  -webkit-transition: scale var(--duration) var(--easing);
  transition: scale var(--duration) var(--easing);
}

@media (max-width: 768px) {
  .p-top-movie__play {
    width: 85px;
  }
}

.p-top-staff {
  padding-top: 120px;
}

@media (max-width: 768px) {
  .p-top-staff {
    padding-top: 40px;
  }
}

.p-top-staff__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 40px 32px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;

  & + .p-top-staff__list {
    margin-top: 40px;
  }

  &:last-child .p-top-staff__item {
    width: calc(214 / 1200 * 100%);
  }
}

@media (max-width: 768px) {
  .p-top-staff__list {
    gap: 24px 15px;
    -webkit-box-pack: revert;
        -ms-flex-pack: revert;
            justify-content: revert;

    & + .p-top-staff__list {
      margin-top: 24px;
    }

    &:last-child .p-top-staff__item {
      width: calc(160 / 335 * 100%);
    }
  }
}

.p-top-staff__item {
  width: calc(276 / 1200 * 100%);
  text-align: center;
}

@media (max-width: 768px) {
  .p-top-staff__item {
    width: calc(160 / 335 * 100%);
  }
}

.p-top-staff__item-full {
  width: 100%;
}

.p-top-staff__role {
  font-weight: var(--font-weight-xl);
}

@media (max-width: 768px) {
  .p-top-staff__role {
    font-size: var(--font-size-2xs);
  }
}

.p-top-staff__role span {
  display: block;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-xl);
  line-height: var(--line-height-none);
}

.p-top-staff__name {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-xl);
  margin-top: 10px;

  &:has(.p-top-staff__button) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
  }
}

@media (max-width: 768px) {
  .p-top-staff__name {
    font-size: var(--font-size-md);
    margin-top: 5px;

    &:has(.p-top-staff__button) {
      -webkit-column-gap: 5px;
         -moz-column-gap: 5px;
              column-gap: 5px;
    }
  }
}

.p-top-staff__name--kana {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-xl);
}

@media (max-width: 768px) {
  .p-top-staff__name--kana {
    font-size: var(--font-size-xs);
  }
}

.p-top-staff__button {
  -webkit-transition: opacity var(--duration) var(--easing);
  transition: opacity var(--duration) var(--easing);
}

@media (any-hover: hover) {
  .p-top-staff__button:hover {
    opacity: .7;
  }
}

@media (max-width: 768px) {
  .p-top-staff__button {
    width: 16px;
  }
}

.p-top-staff__note {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-xl);
  margin-top: 5px;
}

@media (max-width: 768px) {
  .p-top-staff__note {
    font-size: var(--font-size-3xs);
  }
}

.p-top-modal {
  overflow: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  opacity: 0;
  -webkit-transition-property: display, overlay, opacity;
  transition-property: display, overlay, opacity;
  -webkit-transition-duration: var(--duration);
          transition-duration: var(--duration);
  -webkit-transition-timing-function: var(--easing);
          transition-timing-function: var(--easing);
  transition-behavior: allow-discrete;

  &[open] {
    display: grid;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }
  }

  &::before {
    content: "";
    background: url(../../assets/images/bg_grad_pc.jpg) top center / cover no-repeat;
    position: fixed;
    inset: 0;
    z-index: -1;
  }

  &::-webkit-backdrop {
    background-color: transparent;
  }

  &::backdrop {
    background-color: transparent;
  }
}

@media (max-width: 768px) {
  .p-top-modal::before {
    content: "";
    background: url(../../assets/images/bg_grad_sp.jpg) top center / cover no-repeat;
  }
}

.p-top-modal__inner {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 120px 40px;
}

@media (max-width: 768px) {
  .p-top-modal__inner {
    padding: 100px 30px;
  }
}

.p-top-modal__content {
  width: min(800px, 100%);
  margin-inline: auto;
}

.p-top-staff-modal__content:has(.p-top-staff-modal__img) {
  display: grid;
  grid-template-columns: 1fr auto;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
}

@media (max-width: 768px) {
  .p-top-staff-modal__content:has(.p-top-staff-modal__img) {
    grid-template-columns: revert;
    row-gap: 30px;
  }
}

.p-top-movie-modal__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.p-top-staff-modal__head:has(.p-top-staff-modal__thumb) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
}

.p-top-staff-modal__role {
  font-weight: var(--font-weight-xl);
}

@media (max-width: 768px) {
  .p-top-staff-modal__role {
    font-size: var(--font-size-2xs);
  }
}

.p-top-staff-modal__role span {
  display: block;
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-xl);
  line-height: var(--line-height-none);
}

.p-top-staff-modal__name {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-xl);
  margin-top: 10px;
}

@media (max-width: 768px) {
  .p-top-staff-modal__name {
    font-size: var(--font-size-2xl);
    margin-top: 5px;
  }
}

.p-top-staff-modal__name--kana{
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-xl);
}

@media (max-width: 768px) {
  .p-top-staff-modal__name--kana{
    font-size: var(--font-size-xs);
  }
}

.p-top-staff-modal__note {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-xl);
  margin-top: 5px;
}

@media (max-width: 768px) {
  .p-top-staff-modal__note {
    font-size: var(--font-size-3xs);
  }
}

.p-top-staff-modal__thumb {
  width: 100px;
}

@media (max-width: 768px) {
  .p-top-staff-modal__thumb {
    width: 60px;
  }
}

.p-top-staff-modal__comment {
  line-height: var(--line-height-lg);
  margin-top: 40px;
}

@media (max-width: 768px) {
  .p-top-staff-modal__comment {
    font-size: var(--font-size-2xs);
    margin-top: 30px;
  }
}

.p-top-staff-modal__img {
  width: 280px;
}

@media (max-width: 768px) {
  .p-top-staff-modal__img {
    width: 200px;
    margin-inline: auto;
  }
}

.p-top-modal__close {
  width: 80px;
  aspect-ratio: 1;
  position: absolute;
  top: 20px;
  right: 30px;

  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-black);
    -webkit-transition: rotate var(--duration) var(--easing);
    transition: rotate var(--duration) var(--easing);
  }

  &::before {
    rotate: 30deg;
  }

  &::after {
    rotate: -30deg;
  }

  &:focus {
    outline: none;
  }
}

@media (any-hover: hover) {
  .p-top-modal__close:hover {
    &::before {
      rotate: 15deg;
    }

    &::after {
      rotate: -15deg;
    }
  }
}

@media (max-width: 768px) {
  .p-top-modal__close {
    width: 50px;
  }
}