@charset "UTF-8";
@import url(/css/root.css);
/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  #container #contents .photo_gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    grid-gap: var(--s16_32);
    margin-bottom: var(--s16_32);
  }
  #container #contents .photo_gallery figure {
    width: calc(calc(100% / 3) - calc(calc(var(--s16_32) * 2) / 3));
    border: 1px solid #ccc;
    background-color: #F2F2F2;
    position: relative;
    z-index: 1;
    aspect-ratio: 1/1;
  }
  #container #contents .photo_gallery figure img {
    object-fit: contain;
    height: 100%;
  }
  #container #contents .photo_gallery figure figcaption {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: var(--s14_16);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(51, 51, 51, .7);
    opacity: 0;
    transition: opacity .5s;
    color: #fff;
    font-weight: bold;
  }
  #container #contents .photo_gallery figure a:hover img {
    opacity: 1;
  }
  #container #contents .photo_gallery figure a:hover figcaption {
    opacity: 1;
  }
}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  #container #contents .photo_gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    grid-gap: var(--s16_32);
    margin-bottom: var(--s16_32);
  }
  #container #contents .photo_gallery figure {
    width: calc(50% - calc(var(--s16_32) / 2));
    border: 1px solid #ccc;
    background-color: #F2F2F2;
    position: relative;
    z-index: 1;
    aspect-ratio: 1/1;
  }
  #container #contents .photo_gallery figure img {
    object-fit: contain;
    height: 100%;
  }
  #container #contents .photo_gallery figure figcaption {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: var(--s14_16);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(51, 51, 51, .7);
    opacity: 0;
    transition: opacity .5s;
    color: #fff;
    font-weight: bold;
  }
  #container #contents .photo_gallery figure a:hover img {
    opacity: 1;
  }
  #container #contents .photo_gallery figure a:hover figcaption {
    opacity: 1;
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 520px) {
  #container #contents .photo_gallery figure {
    width: 100%;
  }
}