/*
この初期に用意されている CSS は削除して大丈夫です。
*/
.title {
  background-color: black;
  color: white;
  padding: 10px;
}

.js-photocollage {
  position: relative;
  width: 100%;
}

.js-photocollage::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.child-layout {
  width: 100%;
  position: absolute;
  top: 0;
  margin: 0 0 35px 0;
  list-style: none;
  padding: 0 10px 0 10px;
  gap: 4px;
  height: -webkit-fill-available;
}

.child-layout .list:nth-child(n + 6) {
  display: none;
}

.child-layout .list {
  position: relative;
}

.child-layout img {
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.js-photocollage .yoko2 {
  display: grid;
  grid-template:
    "itemA" 1fr
    "itemB" 1fr
    /1fr;
}

.js-photocollage .yoko2 .list:nth-of-type(1) {
  grid-area: itemA;
}

.js-photocollage .yoko2 .list:nth-of-type(2) {
  grid-area: itemB;
}

.js-photocollage .tate2 {
  display: grid;
  grid-template:
    "itemC itemD" 1fr
    / 1fr 1fr;
}

.js-photocollage .tate2 .list:nth-of-type(1) {
  grid-area: itemC;
}

.js-photocollage .tate2 .list:nth-of-type(2) {
  grid-area: itemD;
}

.js-photocollage .yoko3 {
  display: grid;
  grid-template:
    "itemE itemE" 2fr
    "itemF itemG" 1fr
    / 1fr 1fr;
}

.js-photocollage .yoko3 .list:nth-of-type(1) {
  grid-area: itemE;
}

.js-photocollage .yoko3 .list:nth-of-type(2) {
  grid-area: itemF;
}

.js-photocollage .yoko3 .list:nth-of-type(3) {
  grid-area: itemG;
}

.js-photocollage .tate3 {
  display: grid;
  grid-template:
    "itemH itemI" 1fr
    "itemH itemJ" 1fr
    / 2fr 1fr;
}

.js-photocollage .tate3 .list:nth-of-type(1) {
  grid-area: itemH;
}

.js-photocollage .tate3 .list:nth-of-type(2) {
  grid-area: itemI;
}

.js-photocollage .tate3 .list:nth-of-type(3) {
  grid-area: itemJ;
}

.js-photocollage .square3 {
  display: grid;
  grid-template:
    "itemK itemK" 1fr
    "itemL itemM" 1fr
    / 1fr 1fr;
}

.js-photocollage .square3 .list:nth-of-type(1) {
  grid-area: itemK;
}

.js-photocollage .square3 .list:nth-of-type(2) {
  grid-area: itemL;
}

.js-photocollage .square3 .list:nth-of-type(3) {
  grid-area: itemM;
}

.js-photocollage .yoko4 {
  display: grid;
  grid-template:
    "itemN itemN itemN" 2fr
    "itemO itemP itemQ" 1fr
    / 1fr 1fr 1fr;
}

.js-photocollage .yoko4 .list:nth-of-type(1) {
  grid-area: itemN;
}

.js-photocollage .yoko4 .list:nth-of-type(2) {
  grid-area: itemO;
}

.js-photocollage .yoko4 .list:nth-of-type(3) {
  grid-area: itemP;
}

.js-photocollage .yoko4 .list:nth-of-type(4) {
  grid-area: itemQ;
}

.js-photocollage .tate4 {
  display: grid;
  grid-template:
    "itemR itemS" 1fr
    "itemR itemT" 1fr
    "itemR itemU" 1fr
    / 2fr 1fr;
}

.js-photocollage .tate4 .list:nth-of-type(1) {
  grid-area: itemR;
}

.js-photocollage .tate4 .list:nth-of-type(2) {
  grid-area: itemS;
}

.js-photocollage .tate4 .list:nth-of-type(3) {
  grid-area: itemT;
}

.js-photocollage .tate4 .list:nth-of-type(4) {
  grid-area: itemU;
}

.js-photocollage .square4 {
  display: grid;
  grid-template:
    "itemV itemW" 1fr
    "itemX itemY" 1fr
    / 1fr 1fr;
}

.js-photocollage .square4 .list:nth-of-type(1) {
  grid-area: itemV;
}

.js-photocollage .square4 .list:nth-of-type(2) {
  grid-area: itemW;
}

.js-photocollage .square4 .list:nth-of-type(3) {
  grid-area: itemX;
}

.js-photocollage .square4 .list:nth-of-type(4) {
  grid-area: itemY;
}

.js-photocollage .number5 {
  display: grid;
  grid-template:
    "item1 item3" 2fr
    "item1 item4" 1fr
    "item2 item4" 1fr
    "item2 item5" 2fr
    / 1fr 1fr;
}

.js-photocollage .number5 .list:nth-of-type(1) {
  grid-area: item1;
}

.js-photocollage .number5 .list:nth-of-type(2) {
  grid-area: item2;
}

.js-photocollage .number5 .list:nth-of-type(3) {
  grid-area: item3;
}

.js-photocollage .number5 .list:nth-of-type(4) {
  grid-area: item4;
}

.js-photocollage .number5 .list:nth-of-type(5) {
  grid-area: item5;
}

.js-photocollage .more5 {
  display: grid;
  grid-template:
    "item1 item3" 2fr
    "item1 item4" 1fr
    "item2 item4" 1fr
    "item2 item5" 2fr
    / 1fr 1fr;
}

.js-photocollage .more5 .list:nth-of-type(1) {
  grid-area: item1;
}

.js-photocollage .more5 .list:nth-of-type(2) {
  grid-area: item2;
}

.js-photocollage .more5 .list:nth-of-type(3) {
  grid-area: item3;
}

.js-photocollage .more5 .list:nth-of-type(4) {
  grid-area: item4;
}

.js-photocollage .more5 .list:nth-of-type(5) {
  grid-area: item5;
  position: relative;
}

.js-photocollage .more5 .list:nth-of-type(5) img {
  filter: contrast(30%);
}

.js-photocollage .more5 .list:nth-of-type(5) p {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 250%;
  color: white;
  font-weight: bold;
  cursor: default;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .js-photocollage {
    width: 100%;
  }
}