@charset "UTF-8";

.photo-list {
  width: 100%;
  padding: var(--sp-spacing-16) 0 var(--sp-spacing-40);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

@media (min-width: 961px) {
  .photo-list {
    padding: var(--sp-spacing-24) 0 var(--sp-spacing-64)
  }
}

.photo-list__head {
  width: 100%;
  padding-bottom: var(--sp-spacing-40);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.photo-list__id {
  font-size: 32px;
  line-height: 125%;
  font-weight: 600
}

@media (min-width: 961px) {
  .photo-list__id {
    font-size: 40px;
    line-height: 100%;
    font-weight: 600
  }
}

.photo-list__copy-link {
  width: 32px;
  aspect-ratio: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative
}

@media (min-width: 961px) {
  .photo-list__copy-link:hover {
    opacity: .7
  }
}

.photo-list__copy-link:before {
  content: "";
  width: 100%;
  aspect-ratio: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  background: var(--clr-text-sub);
  -webkit-mask: url(/html/template/default/assets/img/icon_link.svg) no-repeat center/contain;
  mask: url(/html/template/default/assets/img/icon_link.svg) no-repeat center/contain
}

.photo-list__copy-link:after {
  content: "";
  width: 100%;
  aspect-ratio: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  background: var(--clr-prime);
  -webkit-mask: url(/html/template/default/assets/img/icon_check-bold.svg) no-repeat center/contain;
  mask: url(/html/template/default/assets/img/icon_check-bold.svg) no-repeat center/contain;
  opacity: 0
}

.photo-list__copy-link.-is-copied {
  pointer-events: none
}

.photo-list__copy-link.-is-copied:before {
  opacity: 0
}

.photo-list__copy-link.-is-copied:after {
  opacity: 1
}

.photo-list__inner {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--sp-spacing-32)
}

.photo-list__wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.photo-list__label {
  padding-bottom: var(--sp-spacing-16);
  font-size: 24px;
  line-height: 150%;
  font-weight: 400;
  font-weight: 600
}

@media (min-width: 961px) {
  .photo-list__label {
    font-size: 32px;
    line-height: 125%;
    font-weight: 600
  }
}

.photo-list__list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--sp-spacing-16)
}

@media (min-width: 961px) {
  .photo-list__list {
    grid-template-columns: repeat(2, 1fr)
  }
}

.photo-list__item {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer
}

@media (min-width: 961px) {
  .photo-list__item:hover .photo-list__image {
    opacity: .7
  }
}

.photo-list__image {
  width: 100%;
  aspect-ratio: 4/3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: var(--rd-radius-Lv1);
  overflow: hidden
}

.photo-list__image:is([data-iframe-id]):before {
  content: "";
  width: 72px;
  aspect-ratio: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  background: url(/html/template/default/assets/img/icon_button-play.svg) no-repeat center/contain;
  z-index: 1
}

.photo-list__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.photo-list__image iframe {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -o-object-fit: contain;
  object-fit: contain
}

.photo-list__action {
  width: 100%;
  padding-top: var(--sp-spacing-24);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

@media (min-width: 961px) {
  .photo-list__action {
    padding-top: var(--sp-spacing-32)
  }
}

.photo-list__action .button {
  max-width: 320px
}