@charset "UTF-8";


.gallery-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 13px; /* グリッドアイテム間の余白 */
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden; /* コンテナの高さを超える部分を隠す */
}
.gallery-container:not(:last-child) {
  margin-bottom: 13px; /* コンテナ間の余白 */
}


.photo {
  width: 100%;
  display: block; /* 画像が行の高さに合わせて表示されるように */
  object-fit: cover; /* 画像のアスペクト比を保ちつつコンテナに収める */
  height: 100%!important;
  margin-top: 0!important;
  margin-bottom: 0!important;
}

.photo.large {
  grid-column: span 12;
  grid-row: span 2;
}

.photo.medium {
  grid-column: span 8;
  grid-row: span 2;
}

.photo.small {
  grid-column: span 4;
  grid-row: span 1;
}

.photo.vertical {
  grid-column: span 4;
  grid-row: span 2;
}

/* Layout #1 */
.layout1 .medium {
  grid-column: 1 / 9;
}

.layout1 .small {
  grid-column: 9 / 13;
  grid-row: span 1;
}

/* Layout #2 */
.layout2 .small:first-child {
  grid-column: span 4;
  grid-row: 1;
}

.layout2 .small:nth-child(2) {
  grid-column: span 4;
  grid-row: 2;
}

.layout2 .medium {
  grid-column: 5 / 13;
  grid-row: 1 / 3;
}

/* Layout #3 */
.layout3 .vertical {
  grid-column: span 4;
  grid-row: 1 / 3;
}

.layout3 .small {
  grid-column: span 4;
  grid-row: span 1;
}

/* レイアウト #4 */
.layout4 .vertical {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
}
.layout4 .medium {
  grid-column: 5 / 13;
  grid-row: 1 / 3;
}

/* レイアウト #5 */
.layout5 .large {
  grid-column: 1 / 13;
  grid-row: 1 / 3;
}

/* レイアウト #6 */
.layout6 .vertical:first-child {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
}
.layout6 .vertical:last-child {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}
.layout6 .small {
  grid-column: 5 / 9;
  grid-row: span 1;
}

/* レイアウト #7 */
.layout7 .small:nth-of-type(1) {
  grid-column: 1 / 5;
  grid-row: 1;
}
.layout7 .small:nth-of-type(2) {
  grid-column: 1 / 5;
  grid-row: 2;
}
.layout7 .vertical:nth-of-type(1) {
  grid-column: 5 / 9;
  grid-row: 1 / 3;
}
.layout7 .vertical:nth-of-type(2) {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

/* レイアウト #8 */
.layout8 .medium {
  grid-column: 1 / 9;
  grid-row: 1 / 3;
}
.layout8 .vertical {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

/* レイアウト #9 */
.layout9 .small {
  grid-column: span 4;
}
.layout9 .vertical {
  grid-column: 5 / 9;
  grid-row: 1 / 3;
}

/* レイアウト #10 */
.layout10 .vertical:first-child,
.layout10 .vertical:nth-child(2) {
  grid-column: span 4;
  grid-row: span 2;
}
.layout10 .small {
  grid-column: 9 / 13;
  grid-row: span 1;
}