@charset "utf-8";
/* ---------------------------------------------------------------------------------------------

　   COMMON

--------------------------------------------------------------------------------------------- */
#gallery img {
  opacity: 0;
}

/* lazyloadedになったらfadeアニメーションを実行 */
#gallery img.lazyloaded {
  animation: fade 1s forwards; 
}

/* fadeアニメーション */
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#gallery_title {
  position: relative;
}
#gallery_title img {
  width: 100%;
}
#gallery_title_inner {
  background: #231815;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#gallery_title_inner img {
  opacity: 1;
  display: block;
}
#gallery_content img {
  width: 100%;
}

@media only screen and ( max-width : 767px ) {
   #gallery_title_inner {
    padding: 6vw 10vw;
    width: 80%;
  }
  #gallery_title {
    margin-bottom: 20px;
  }
  .gallery_title_t {
    width: 80%;
  }
  #gallery_content div {
    margin-bottom: 20px;
  }
  #gallery_content div picture {
    margin-bottom: 20px;
  }
  #gallery_content div picture:last-child {
    margin-bottom: 0;
  }
}

@media only screen and ( max-width : 320px ) {
}

@media print, screen and ( min-width : 768px ) {
   #gallery_title_inner {
    padding: 4vw 8vw;
    width: 70%;
  }
  .gallery_title_t {
    width: 46%;
  }
  .gallery_ph01 {
    width: 70%;
  }
  .gallery_ph02 {
    width: 90%;
  } 
  .gallery_ph02 picture:nth-child(1) {
    width: 58%;
  }
  .gallery_ph02 picture:nth-child(2) {
    width: 40%;
  }
  .gallery_ph03 {
    width: 70%;
  }
  .gallery_ph04 picture:nth-child(1) {
    width: 28%;
  }
  .gallery_ph04 picture:nth-child(2) {
    width: 28%;
  }
  .gallery_ph04 picture:nth-child(3) {
    width: 44%;
  }
  .gallery_ph05 {
    width: 100%;
  }
  .gallery_ph06 {
    width: 70%;
  }
  .gallery_ph07 {
    padding-left: 7%;
  }
  .gallery_ph07 picture {
    flex: 1;
  }
  .gallery_ph08 {
    width: 70%;
  }
  .gallery_ph09 {
    width: 46%;
  }
  .gallery_ph10 {
    width: 70%;
  }
  .gallery_ph11 {
    width: 100%;
  }
  .gallery_ph12 {
    width: 70%;
  }
  .gallery_ph13 {
    width: 80%;
    margin-bottom: 10px;
  }
  .gallery_ph13 picture {
    flex: 1;
  }
  .gallery_ph14 picture {
    flex: 1;
  }
  .gallery_ph15 picture {
    width: 42%;
  }
  .gallery_ph16 {
    padding-left: 7%;
  }
  .gallery_ph16 picture {
    flex: 1;
  }
  .gallery_ph17 {
    width: 70%;
  }
  .gallery_ph18 {
    width: 70%;
  }
  .gallery_ph19 picture {
    width: 80%;
  }
  .gallery_ph20 picture:nth-child(1) {
    width: 54%;
  }
  .gallery_ph20 picture:nth-child(2) {
    width: 44%;
  }
  .gallery_ph21 picture {
    flex: 1;
  }
  .gallery_ph22 {
    width: 70%;
  }
  .gallery_ph23 {
    width: 70%;
  }
  .gallery_ph24 {
    width: 42%;
  }
  .gallery_ph25 {
    width: 100%;
  }
  .gallery_ph26 {
    width: 70%;
  }
  .gallery_ph27 picture:nth-child(1) {
    width: 34%;
  }
  .gallery_ph27 picture:nth-child(2) {
    width: 63%;
  }
  .gallery_ph28 {
    width: 100%;
  }
  .gallery_ph29 {
    padding-left: 6%;
    padding-right: 3%;
  }
  .gallery_ph29 picture {
    width: 48%;
  }
  .gallery_ph30 {
    width: 70%;
  }
  .gallery_ph31 {
    width: 100%;
  }
  .gallery_ph32 {
    padding-left: 28%;
  }
  .gallery_ph33 {
    margin-bottom: 10px;
    padding-left: 4%;
  }
  .gallery_ph33 picture:nth-child(1) {
    width: 42.5%;
  }
  .gallery_ph33 picture:nth-child(2) {
    width: 28%;
    margin-right: 1.5%;
  }
  .gallery_ph33 picture:nth-child(3) {
    width: 28%;
  }
  .gallery_ph34 {
    width: 70%;
  }
  .gallery_ph35 {
    width: 70%;
  }
  .gallery_ph36 picture {
    width: 80%;
  }
  .gallery_ph37 {
    width: 70%;
  }
  .gallery_ph38 {
    width: 100%;
    margin-bottom: 20px;
  }
  .gallery_ph38 picture:nth-child(1) {
    width: 56%;
  }
  .gallery_ph38 picture:nth-child(2) {
    width: 40%;
  }
  .gallery_ph39 {
    width: 96%;
  }
  .gallery_ph40 {
    padding-left: 8%;
    width: 48%;
    margin-bottom: 10px;
  }
  .gallery_ph41 {
    padding-left: 30%;
    width: 100%;
    margin-bottom: 20px;
  }
  .gallery_ph42 {
    width: 70%;
  }
  .gallery_ph43 {
    width: 70%;
  }
  .gallery_ph44 {
    padding-right: 3%;
  }
  .gallery_ph44 picture:nth-child(1) {
    width: 50%;
  }
  .gallery_ph44 picture:nth-child(2) {
    width: 48%;
  }
  .gallery_ph45 picture {
    width: 80%;
  }
}

@media print, screen and ( min-width : 1200px ) {

}