.drama_slider {
  margin: var(--space-ll) 0 var(--space-m);
  overflow: visible !important;
  .universal-slider__button--prev {
    left: -13px;
  }
  .universal-slider__button--next {
    right: -13px;
  }
  .universal-slider__button {
    width: 26px;
    height: 26px;
    padding: 0;
  }
  a.nolink {
    cursor: default;
    &:hover {
      opacity: 1;
    }
  }
}

.bg_color_green {
  background-color: #e2ece5;
}

.drama_platform {
  padding-bottom: var(--space-ll);
  display: flex;
  width: 100%;
  gap: 32px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  img {
    width: 100%;
    max-width: 560px;
    margin: auto;
  }
}
.fukidasi {
  max-width: 430px;
}
.drama_title {
  text-align: center;
  color: var(--color-white);
  padding-top: var(--space-l);
  img {
    max-width: 560px;
    margin: auto;
  }
}

.drama_cast_wrap {
  display: grid;
  padding: var(--space-l) 0;
  --grid-gap: 32px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  .drama_cast_grid_01 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 3;
  }
  .drama_cast_grid_02 {
    grid-column: 4 / span 3;
    grid-row: 1 / span 3;
  }
  .drama_cast_grid_03 {
    grid-column: 7 / span 2;
    grid-row: 2 / span 2;
  }
  .drama_cast_grid_04 {
    grid-column: 9 / span 2;
    grid-row: 2 / span 2;
  }
  .drama_cast_grid_05 {
    grid-column: 11 / span 2;
    grid-row: 2 / span 2;
  }
  .drama_cast_grid_06 {
    grid-column: 1 / span 2;
    grid-row: 4 / span 2;
  }
  .drama_cast_grid_07 {
    grid-column: 3 / span 2;
    grid-row: 4 / span 2;
  }
  .drama_cast_grid_08 {
    grid-column: 5 / span 2;
    grid-row: 4 / span 2;
  }
  .drama_cast_grid_09 {
    grid-column: 7 / span 2;
    grid-row: 4 / span 2;
  }
}

.drama_special_thanks {
  margin: var(--space-l) 0;
}
.drama_cast_profile {
  border-top: 2px solid #008669;
  border-bottom: 2px solid #008669;
  padding: var(--space-m) 0;
}
.drama_cast_profile_line {
  border-top: 2px solid #008669;
  width: 100%;
  height: 1px;
  display: inline-block;
}
.drama_cast_link {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--space-m);
  a {
    display: inline-flex;
    width: calc(100% / 4);
    background-color: #444444;
    color: var(--color-white);
    justify-content: center;
    text-decoration: none;
    border-right: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-white);
  }
}
.drama_cast_link_wrap {
  margin-top: var(--space-m);
  .drama_cast_link {
    margin-top: 0;
    margin-bottom: var(--space-s);
    p {
      padding: var(--space-s) 0;
    }
  }
}

/*Castモーダル*/
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: 24px;
}
.modal-overlay.is-open {
  display: flex;
}
.modal-trigger img {
  cursor: pointer;
}
.modal {
  img {
    width: 50%;
    max-width: 404px;
    margin: 0 auto var(--space-m) auto;
  }
}
button.modal__close {
  border: none;
  background-color: #008669;
}

#modal_01,
#modal_02,
#modal_03,
#modal_04,
#modal_05,
#modal_06,
#modal_07,
#modal_08,
#modal_09,
#modal_10,
#modal_11 {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
}
#modal_01.is-closing,
#modal_02.is-closing,
#modal_03.is-closing,
#modal_04.is-closing,
#modal_05.is-closing,
#modal_06.is-closing,
#modal_07.is-closing,
#modal_08.is-closing,
#modal_09.is-closing,
#modal_10.is-closing,
#modal_11.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal_01 .modal,
#modal_02 .modal,
#modal_03 .modal,
#modal_04 .modal,
#modal_05 .modal,
#modal_06 .modal,
#modal_07 .modal,
#modal_08 .modal,
#modal_09 .modal,
#modal_10 .modal,
#modal_11 .modal {
  width: min(520px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
}
#modal_01.is-closing .modal,
#modal_02.is-closing .modal,
#modal_03.is-closing .modal,
#modal_04.is-closing .modal,
#modal_05.is-closing .modal,
#modal_06.is-closing .modal,
#modal_07.is-closing .modal,
#modal_08.is-closing .modal,
#modal_09.is-closing .modal,
#modal_10.is-closing .modal,
#modal_11.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}

.drama_text {
  padding: var(--space-m) 0 var(--space-l);
}
.drama_bg_green {
  background-color: #008669;
}

@keyframes overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zoom {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .drama_platform {
    padding-bottom: var(--space-l);
    flex-direction: column;
    gap: 20px;
  }
  .drama_title {
    text-align: center;
    color: var(--color-white);
    padding-top: var(--space-l);
    img {
      max-width: 480px;
      margin: auto;
    }
  }
  .fukidasi {
    max-width: 100%;
    margin: auto;
  }
  .drama_cast_wrap {
    padding: var(--space-m) 0;
    --grid-gap: 20px;
    gap: var(--grid-gap);
    .drama_cast_grid_01 {
      grid-column: 1 / span 6;
      grid-row: 1 / span 6;
    }
    .drama_cast_grid_02 {
      grid-column: 7 / span 6;
      grid-row: 1 / span 6;
    }
    .drama_cast_grid_03 {
      grid-column: 1 / span 4;
      grid-row: 7 / span 4;
    }
    .drama_cast_grid_04 {
      grid-column: 5 / span 4;
      grid-row: 7 / span 4;
    }
    .drama_cast_grid_05 {
      grid-column: 9 / span 4;
      grid-row: 7 / span 4;
    }
    .drama_cast_grid_06 {
      grid-column: 1 / span 4;
      grid-row: 11 / span 4;
    }
    .drama_cast_grid_07 {
      grid-column: 5 / span 4;
      grid-row: 11 / span 4;
    }
    .drama_cast_grid_08 {
      grid-column: 9 / span 4;
      grid-row: 11 / span 4;
    }
    .drama_cast_grid_09 {
      grid-column: 1 / span 4;
      grid-row: 15 / span 4;
    }
  }
}

@media screen and (max-width: 480px) {
  .drama_platform {
    flex-direction: column;
    gap: 10px;
  }
  .drama_title {
    img {
      max-width: 100%;
    }
  }
  .drama_cast_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    .drama_cast_grid_01,
    .drama_cast_grid_02,
    .drama_cast_grid_03,
    .drama_cast_grid_04,
    .drama_cast_grid_05,
    .drama_cast_grid_06,
    .drama_cast_grid_07,
    .drama_cast_grid_08,
    .drama_cast_grid_09 {
      width: calc((100% - 15px) / 2);
    }
  }

  .drama_cast_link {
    a {
      width: calc(100% / 2);
    }
  }
  .modal {
    img {
      width: 75%;
      max-width: 100%;
    }
  }
  #modal_01 .modal,
  #modal_02 .modal,
  #modal_03 .modal,
  #modal_04 .modal,
  #modal_05 .modal,
  #modal_06 .modal,
  #modal_07 .modal,
  #modal_08 .modal,
  #modal_09 .modal,
  #modal_10 .modal,
  #modal_11 .modal {
    padding: 24px;
  }
}