@charset "UTF-8";

/* ＝＝＝＝ Main Visual ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.mv__archives {
  width: 100%;
  height: 100dvh;
  position: relative;
  background-size: cover;
  background-image: url(../img/subpage/schedule@1x.jpg);
  background-image: image-set(
    url(../img/subpage/schedule@1x.avif) 1x type("image/avif"),
    url(../img/subpage/schedule@2x.avif) 2x type("image/avif"),
    url(../img/subpage/schedule@3x.avif) 3x type("image/avif"),
    url(../img/subpage/schedule@1x.webp) 1x type("image/webp"),
    url(../img/subpage/schedule@2x.webp) 2x type("image/webp"),
    url(../img/subpage/schedule@3x.webp) 3x type("image/webp"),
    url(../img/subpage/schedule@1x.jpg) 1x type("image/jpeg"),
    url(../img/subpage/schedule@2x.jpg) 2x type("image/jpeg"),
    url(../img/subpage/schedule@3x.jpg) 3x type("image/jpeg")
  );
  background-position: right;
  background-repeat: no-repeat;
  filter: brightness(.65) sepia(100%) contrast(2.5);
  animation-name: mvArchives;
  animation-duration: 20s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform-origin: center;
}
@keyframes mvArchives {
  0% {background-position: right;}
  100% {background-position: 80%;}
}

.archives__list {
  display: block grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-block-start: 1rem;
}

.archives__list li {
  border-radius: .5rem;
  position: relative;
  background-color: var(--clr_text-main);
  background: linear-gradient(to bottom, var(--clr_text-dark2), var(--clr_text-pale), var(--clr_text-dark2));
  cursor: pointer;
  transition: background-color .3s ease-in-out;
}

.archives__list li:hover,
.archives__list li:focus-visible {
  background-color: var(--clr_yellow-accent3);
}

.archives__list li.inactive {
  background: var(--clr_text-dark2);
  opacity: .5;
  cursor: auto;
}

.archives__list li::after {
  content: "";
  width: var(--vvS_16-20);
  height: var(--vvS_16-20);
  position: absolute;
  top: 50%;
  right: .5rem;
  translate: 0 -50%;
  background-image: url(../img/common/btn-arrow-green.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.archives__list li button {
  width: 100%;
  height: 100%;
  padding: 1.5rem 0;
  display: block flow;
  color: var(--clr_green-main);
  font-family: inherit;
  font-size: var(--vvS_20-24);
  font-weight: 700;
  cursor: pointer;
}

.archives__list li.inactive button {
  cursor: auto;
}

.archives__item[open] {
  width: 95vw;
  height: fit-content;
  max-width: 36rem;
  max-height: 95dvh;
  padding: 2rem 1rem 3rem;
  border: .0626rem solid var(--clr_text-main);
  border-radius: .5rem;
  z-index:100;
  overflow-y: auto;
  margin: auto;
  background-color: var(--clr_green-main);
  color: var(--clr_text-main);
}

.archives__item::backdrop {
  background-color: var(--clr_black-trans);
}

.archives__closeBtn--top {
  position: sticky;
  top: 0;
  float: right;
}

dialog.archives__item.js-dialogOpen {
  animation: dialogFadeIn .3s ease;
}

dialog.archives__item.js-dialogClose {
  animation: dialogFadeOut .3s ease;
}

dialog.archives__item.js-dialogOpen::backdrop {
  animation: dialogFadeIn .3s ease;
}

dialog.archives__item.js-dialogClose::backdrop {
  animation: dialogFadeOut .3s ease;
}

@keyframes dialogFadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes dialogFadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.archives__titleContainer {
  display: block flex;
  flex-direction: column-reverse;
}

.archives__article:first-of-type {
  margin-block-start: 1rem;
}

.archives__article:not(:first-of-type) {
  margin-block-start: 6rem;
}

.archives__title {
  border-block-end: .0625rem solid var(--clr_text-main);
  margin-block-end: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.archives__description + .archives__performers {
  margin-block-start: 3rem;
}

.archives__appearance {
  font-weight: 700;
}

.archives__artistList {
  margin-block-start: 1rem;
}

.archives__artistName {
  padding-inline-start: .5rem;
  border-inline-start: .25rem solid var(--clr_yellow-accent3);
  margin-block-end: .5rem;
  font-weight: 700;
}

.archives__artistName:not(:first-of-type) {
  margin-block-start: 3rem;
}

.archives__closeBtn--bottom {
  display: block flow;
  max-width: 32rem;
  margin: 6rem auto 0;
}

@media screen and (min-width: 60rem) {
.archives.c-section {
  padding: 3rem 2rem;
}

.archives .c-inner {
  max-width: 43rem;
}

.archives__list {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
}

.archives__item[open] {
  width: 95vw;
  height: fit-content;
  max-width: 60rem;
  max-height: 95dvh;
  padding: 2rem;
  border: .0626rem solid var(--clr_text-main);
  border-radius: .5rem;
  margin: auto;
  background-color: var(--clr_green-main);
  color: var(--clr_text-main);
  z-index:100;
}
}