.modal {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 9999;
  display: none;
  pointer-events: none;
}
.modal .window {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: fit-content;
  block-size: fit-content;
}
.modal .window .view {
  display: grid;
  place-items: center;
  inline-size: fit-content;
  block-size: fit-content;
}
.modal .window .view > * {
  animation: modalContentFadeIn 0.4s ease-out both;
  will-change: opacity, scale;
}
@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    scale: 0.95;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.modal .window .view .disp .media .image,
.modal .window .view .disp .media .video {
  display: inline-block;
  object-fit: contain;
  inline-size: fit-content;
}
@media screen and (min-width: 769px) {
  .modal .window .view .disp .media .image,
  .modal .window .view .disp .media .video {
    max-inline-size: calc(100dvw - 3.75vw);
    block-size: calc(100dvh - 3.75vw);
  }
}
@media screen and (max-width: 768px) {
  .modal .window .view .disp .media .image,
  .modal .window .view .disp .media .video {
    max-inline-size: 100dvw;
    block-size: auto;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .view .disp .media .image,
  .modal .window .view .disp .media .video {
    max-block-size: calc(100dvh - 9vw);
  }
}
.modal .window .control {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.modal .window .control .btn-modal-close {
  line-height: 1;
  appearance: none;
  cursor: pointer;
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  border-block-width: 0;
  border-inline-width: 0;
  background-color: transparent;
  pointer-events: auto;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-close {
    inset-inline-end: -4vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-close {
    inset-inline-end: 4vw;
  }
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-close {
    max-inline-size: 3.75vw;
    block-size: 3.75vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-close {
    max-inline-size: 12vw;
    block-size: 12vw;
  }
}
.modal .window .control .btn-modal-close > .mark {
  position: absolute;
  inset-block-start: calc(50% - 0.052085vw);
  inset-inline-start: calc(50% - 16.8px);
  display: inline-block;
  inline-size: 100%;
  background-color: white;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-close > .mark {
    max-inline-size: 1.75vw;
    block-size: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-close > .mark {
    max-inline-size: 8.4vw;
    block-size: 0.5vw;
  }
}
.modal .window .control .btn-modal-close > .mark:nth-of-type(1) {
  rotate: 45deg;
}
.modal .window .control .btn-modal-close > .mark:nth-of-type(2) {
  rotate: -45deg;
}
.modal .window .control .btn-modal-prev,
.modal .window .control .btn-modal-next,
.modal .window .control .btn-modal-prev-group,
.modal .window .control .btn-modal-next-group {
  line-height: 1;
  appearance: none;
  cursor: pointer;
  position: absolute;
  inline-size: 100%;
  background-color: transparent;
  border-block-width: 0;
  border-inline-width: 0;
  pointer-events: auto;
}
.modal .window .control .btn-modal-prev > .mark,
.modal .window .control .btn-modal-next > .mark,
.modal .window .control .btn-modal-prev-group > .mark,
.modal .window .control .btn-modal-next-group > .mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-block;
  inline-size: 100%;
  block-size: 100%;
  background-color: transparent;
  border-block-start-color: #fff;
  border-block-start-style: solid;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev > .mark,
  .modal .window .control .btn-modal-next > .mark,
  .modal .window .control .btn-modal-prev-group > .mark,
  .modal .window .control .btn-modal-next-group > .mark {
    border-block-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev > .mark,
  .modal .window .control .btn-modal-next > .mark,
  .modal .window .control .btn-modal-prev-group > .mark,
  .modal .window .control .btn-modal-next-group > .mark {
    border-block-start-width: 0.5vw;
  }
}
.modal .window .control .btn-modal-prev > .mark,
.modal .window .control .btn-modal-next > .mark,
.modal .window .control .btn-modal-prev-group > .mark,
.modal .window .control .btn-modal-next-group > .mark {
  border-inline-start-color: #fff;
  border-inline-start-style: solid;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev > .mark,
  .modal .window .control .btn-modal-next > .mark,
  .modal .window .control .btn-modal-prev-group > .mark,
  .modal .window .control .btn-modal-next-group > .mark {
    border-inline-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev > .mark,
  .modal .window .control .btn-modal-next > .mark,
  .modal .window .control .btn-modal-prev-group > .mark,
  .modal .window .control .btn-modal-next-group > .mark {
    border-inline-start-width: 0.5vw;
  }
}
.modal .window .control .btn-modal-prev > .mark:nth-of-type(1)::before,
.modal .window .control .btn-modal-next > .mark:nth-of-type(1)::before,
.modal .window .control .btn-modal-prev-group > .mark:nth-of-type(1)::before,
.modal .window .control .btn-modal-next-group > .mark:nth-of-type(1)::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  filter: opacity(0.5) blur(2px);
  border-block-start-color: rgba(0, 0, 0, 0.5);
  border-block-start-style: solid;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(1)::before {
    border-block-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(1)::before {
    border-block-start-width: 0.5vw;
  }
}
.modal .window .control .btn-modal-prev > .mark:nth-of-type(1)::before,
.modal .window .control .btn-modal-next > .mark:nth-of-type(1)::before,
.modal .window .control .btn-modal-prev-group > .mark:nth-of-type(1)::before,
.modal .window .control .btn-modal-next-group > .mark:nth-of-type(1)::before {
  border-inline-start-color: rgba(0, 0, 0, 0.5);
  border-inline-start-style: solid;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(1)::before {
    border-inline-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(1)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(1)::before {
    border-inline-start-width: 0.5vw;
  }
}
.modal .window .control .btn-modal-prev > .mark:nth-of-type(2)::before,
.modal .window .control .btn-modal-next > .mark:nth-of-type(2)::before,
.modal .window .control .btn-modal-prev-group > .mark:nth-of-type(2)::before,
.modal .window .control .btn-modal-next-group > .mark:nth-of-type(2)::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  filter: opacity(0.5) blur(2px);
  border-block-start-color: rgba(0, 0, 0, 0.5);
  border-block-start-style: solid;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(2)::before {
    border-block-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(2)::before {
    border-block-start-width: 0.5vw;
  }
}
.modal .window .control .btn-modal-prev > .mark:nth-of-type(2)::before,
.modal .window .control .btn-modal-next > .mark:nth-of-type(2)::before,
.modal .window .control .btn-modal-prev-group > .mark:nth-of-type(2)::before,
.modal .window .control .btn-modal-next-group > .mark:nth-of-type(2)::before {
  border-inline-start-color: rgba(0, 0, 0, 0.5);
  border-inline-start-style: solid;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(2)::before {
    border-inline-start-width: 0.10417vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-prev-group > .mark:nth-of-type(2)::before,
  .modal .window .control .btn-modal-next-group > .mark:nth-of-type(2)::before {
    border-inline-start-width: 0.5vw;
  }
}
.modal .window .control .btn-modal-prev,
.modal .window .control .btn-modal-next {
  inset-block-start: 50%;
  translate: 0 -50%;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev,
  .modal .window .control .btn-modal-next {
    max-inline-size: 2.5vw;
    block-size: 2.5vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev,
  .modal .window .control .btn-modal-next {
    max-inline-size: 6vw;
    block-size: 6vw;
  }
}
.modal .window .control .btn-modal-prev {
  rotate: -45deg;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev {
    inset-inline-start: -4vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev {
    inset-inline-start: 4vw;
  }
}
.modal .window .control .btn-modal-prev .mark:nth-of-type(1)::before {
  inset-inline-start: 2px;
}
.modal .window .control .btn-modal-next {
  rotate: 135deg;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-next {
    inset-inline-end: -4vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-next {
    inset-inline-end: 4vw;
  }
}
.modal .window .control .btn-modal-next .mark::before {
  inset-inline-end: -2px;
}
.modal .window .control .btn-modal-prev-group,
.modal .window .control .btn-modal-next-group {
  inset-inline-start: 50%;
  translate: -50% -50%;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev-group,
  .modal .window .control .btn-modal-next-group {
    max-inline-size: 3.75vw;
    block-size: 3.75vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev-group,
  .modal .window .control .btn-modal-next-group {
    max-inline-size: 12vw;
    block-size: 12vw;
  }
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev-group .mark:nth-of-type(2),
  .modal .window .control .btn-modal-next-group .mark:nth-of-type(2) {
    inset-block-start: 0.625vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev-group .mark:nth-of-type(2),
  .modal .window .control .btn-modal-next-group .mark:nth-of-type(2) {
    inset-block-start: 2vw;
  }
}
.modal .window .control .btn-modal-prev-group .string,
.modal .window .control .btn-modal-next-group .string {
  display: inline-block;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev-group .string,
  .modal .window .control .btn-modal-next-group .string {
    font-size: 0.625vw;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev-group .string,
  .modal .window .control .btn-modal-next-group .string {
    font-size: 2vw;
  }
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-prev-group {
    inset-block-start: 2dvh;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-prev-group {
    inset-block-start: 2dvh;
  }
}
.modal .window .control .btn-modal-prev-group .mark {
  rotate: 45deg;
  transform: skew(-10deg, -10deg);
}
.modal .window .control .btn-modal-prev-group .mark::before {
  inset-inline-end: -2px;
}
@media screen and (min-width: 769px) {
  .modal .window .control .btn-modal-next-group {
    inset-block-end: -6dvh;
  }
}
@media screen and (max-width: 768px) {
  .modal .window .control .btn-modal-next-group {
    inset-block-end: -3dvh;
  }
}
.modal .window .control .btn-modal-next-group .mark {
  rotate: -135deg;
  transform: skew(-10deg, -10deg);
}
.modal .window .control .btn-modal-next-group .mark::before {
  inset-inline-end: -2px;
}
.modal.is_active {
  display: block;
  pointer-events: auto;
}

@media screen and (max-width: 768px) {
  .modal .window .control [data-modal-content-navi] {
    filter: opacity(0);
    visibility: hidden;
    pointer-events: auto;
    transition-property: filter, visibility;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
  }
  .modal.is_content_navi_visible .window .control [data-modal-content-navi] {
    filter: opacity(1);
    visibility: visible;
    pointer-events: auto;
    transition-property: filter, visibility;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
  }
}

#modalOverlay {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: none;
  z-index: 100;
  inline-size: 100%;
  block-size: 100vh;
  background-color: rgba(0, 0, 0, 0.72);
}

.no_scroll {
  overflow: hidden;
}

@scope (.area-prmy-media-gallery) to (.area-scdy-media-gallery) {
  :scope .head .overview .title .g-heading-page-primary {
    text-align: right;
  }
  :scope .head .overview .title .g-heading-page-primary .string.main {
    text-transform: uppercase;
  }
  :scope .body .list-gallery .list-thumb {
    display: flex;
    flex-wrap: wrap;
  }
  :scope .body .list-gallery .list-thumb > .item {
    position: relative;
    inline-size: 100%;
  }
  @media screen and (min-width: 769px) {
    :scope .body .list-gallery .list-thumb > .item {
      max-inline-size: 20%;
    }
  }
  @media screen and (max-width: 768px) {
    :scope .body .list-gallery .list-thumb > .item {
      max-inline-size: 25%;
    }
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media .image {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
  }
  :scope .body .list-gallery .list-thumb > .item > .disp .media .video {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  :scope .body .list-gallery .list-thumb > .item .btn-modal-open {
    line-height: 1;
    appearance: none;
    cursor: pointer;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2;
    inline-size: 100%;
    block-size: 100%;
    border-block-width: 0;
    border-inline-width: 0;
    background-color: transparent;
  }
  :scope .body .list-gallery .list-thumb > .item .list-media {
    display: none;
  }
  :scope .body .list-gallery .list-thumb .btn-modal-open {
    line-height: 1;
    appearance: none;
    cursor: pointer;
    inline-size: 100px;
    block-size: 100px;
  }
  @media screen and (max-width: 768px) {
    :scope .inner-media-gallery {
      padding-inline-start: 9vw;
      padding-inline-end: 9vw;
    }
  }
}
/*# sourceMappingURL=media-gallery.css.map */