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

.photocollage {
  position: relative;
  width: 100%;
  height:100%;
}

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

.photo-layout {
  width: 100%;
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

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

.photo-layout .photo {
  position: relative;
}

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

.photo-layout.photocollageTate1 img,
.photo-layout.photocollageYoko1 img {
  object-fit: contain;
}

.photocollage .photocollageYoko1 {
  display: grid;
  grid-template:
    "itemA" 1fr
    /1fr;
}

.photocollage .photocollageYoko1 .photo {
  grid-area: itemA;
}

.photocollage .photocollageTate1 {
  display: grid;
  grid-template:
    "itemB" 1fr
    /1fr;
}

.photocollage .photocollageTate1 .photo {
  grid-area: itemB;
}

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

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

.photocollage .photocollageYoko2 .photo:nth-child(1) {
  grid-area: itemC;
}

.photocollage .photocollageYoko2 .photo:nth-of-type(2) {
  grid-area: itemD;
}

.photocollage .photocollageTate2 {
  display: grid;
  grid-template:
    "itemE itemF" 1fr
    / 1fr 1fr;
}

.wt .photocollage .photocollageTate2 {
  display: grid;
  grid-template:
    "itemE" 1fr
	"itemF" 1fr
    / 1fr;
}

.photocollage .photocollageTate2 .photo:nth-of-type(1) {
  grid-area: itemE;
}

.photocollage .photocollageTate2 .photo:nth-of-type(2) {
  grid-area: itemF;
}

.photocollage .photocollageYoko3 {
  display: grid;
  grid-template:
    "itemG itemH itemI" 1fr
    / 1fr 1fr 1fr;
}

.wt .photocollage .photocollageYoko3 {
  display: grid;
  grid-template:
    "itemG itemH" 1fr
    "itemG itemH" 1fr
    "itemI itemI" 1fr
    /3fr 3fr;
}

.photocollage .photocollageYoko3 .photo:nth-of-type(1) {
  grid-area: itemG;
}

.photocollage .photocollageYoko3 .photo:nth-of-type(2) {
  grid-area: itemH;
}

.photocollage .photocollageYoko3 .photo:nth-of-type(3) {
  grid-area: itemI;
}

.photocollage .photocollageTate3 {
  display: grid;
  grid-template:
    "itemJ itemK" 1fr
    "itemJ itemL" 1fr
    / 2fr 1fr;
}

.wt .photocollage .photocollageTate3 {
  display: grid;
  grid-template:
    "itemJ" 1fr
    "itemK" 1fr
    "itemL" 1fr
    / 1fr;
}

.photocollage .photocollageTate3 .photo:nth-of-type(1) {
  grid-area: itemJ;
}

.photocollage .photocollageTate3 .photo:nth-of-type(2) {
  grid-area: itemK;
}

.photocollage .photocollageTate3 .photo:nth-of-type(3) {
  grid-area: itemL;
}

.photocollage .photocollageSquare3 {
  display: grid;
  grid-template:
    "itemM itemM" 1fr
    "itemN itemO" 1fr
    / 1fr 1fr;
}

.photocollage .photocollageSquare3 .photo:nth-of-type(1) {
  grid-area: itemM;
}

.photocollage .photocollageSquare3 .photo:nth-of-type(2) {
  grid-area: itemN;
}

.photocollage .photocollageSquare3 .photo:nth-of-type(3) {
  grid-area: itemO;
}

.photocollage .photocollageYoko4 {
  display: grid;
  grid-template:
    "itemP itemQ itemR itemS" 1fr
    / 1fr 1fr 1fr 1fr;
}

.wt .photocollage .photocollageYoko4 {
  display: grid;
  grid-template:
    "itemP itemQ " 1fr
    "itemR itemS" 1fr
    / 1fr 1fr;
}

.photocollage .photocollageYoko4 .photo:nth-of-type(1) {
  grid-area: itemP;
}

.photocollage .photocollageYoko4 .photo:nth-of-type(2) {
  grid-area: itemQ;
}

.photocollage .photocollageYoko4 .photo:nth-of-type(3) {
  grid-area: itemR;
}

.photocollage .photocollageYoko4 .photo:nth-of-type(4) {
  grid-area: itemS;
}

.photocollage .photocollageTate4 {
  display: grid;
  grid-template:
    "itemT itemU" 1fr
    "itemV itemW" 1fr
    / 1fr 1fr;
}

.wt .photocollage .photocollageTate4 {
  display: grid;
  grid-template:
    "itemT" 1fr
    "itemU" 1fr
    "itemV" 1fr
    "itemW" 1fr
    / 1fr;
}

.photocollage .photocollageTate4 .photo:nth-of-type(1) {
  grid-area: itemT;
}

.photocollage .photocollageTate4 .photo:nth-of-type(2) {
  grid-area: itemU;
}

.photocollage .photocollageTate4 .photo:nth-of-type(3) {
  grid-area: itemV;
}

.photocollage .photocollageTate4 .photo:nth-of-type(4) {
  grid-area: itemW;
}

.photocollage .photocollageSquare4 {
  display: grid;
  grid-template:
    "itemX itemY" 1fr
    "itemZ itemZZ" 1fr
    / 1fr 1fr;
}

.photocollage .photocollageSquare4 .photo:nth-of-type(1) {
  grid-area: itemX;
}

.photocollage .photocollageSquare4 .photo:nth-of-type(2) {
  grid-area: itemY;
}

.photocollage .photocollageSquare4 .photo:nth-of-type(3) {
  grid-area: itemZ;
}

.photocollage .photocollageSquare4 .photo:nth-of-type(4) {
  grid-area: itemZZ;
}

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

.wt .photocollage .photocollageNumber5 {
  display: grid;
  grid-template:
    "item1 item2" 1fr
    "item3 item4" 1fr
    "item5 item5" 1fr
    / 3fr 3fr;
}

.photocollage .photocollageNumber5 .photo:nth-of-type(1) {
  grid-area: item1;
}

.photocollage .photocollageNumber5 .photo:nth-of-type(2) {
  grid-area: item2;
}

.photocollage .photocollageNumber5 .photo:nth-of-type(3) {
  grid-area: item3;
}

.photocollage .photocollageNumber5 .photo:nth-of-type(4) {
  grid-area: item4;
}

.photocollage .photocollageNumber5 .photo:nth-of-type(5) {
  grid-area: item5;
}

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

.wt .photocollage .photocollageMore5 {
  display: grid;
  grid-template:
    "item1 item2" 1fr
    "item2 item3" 1fr
    "item4 item5" 1fr
    / 3fr 3fr;
}

.photocollage .photocollageMore5 .photo:nth-of-type(1) {
  grid-area: item1;
}

.photocollage .photocollageMore5 .photo:nth-of-type(2) {
  grid-area: item2;
}

.photocollage .photocollageMore5 .photo:nth-of-type(3) {
  grid-area: item3;
}

.photocollage .photocollageMore5 .photo:nth-of-type(4) {
  grid-area: item4;
}

.photocollage .photocollageMore5 .photo:nth-of-type(5) {
  grid-area: item5;
  position: relative;
}

.photocollage .photocollageMore5 .photo:nth-of-type(5) img {
  /* filter: contrast(30%); */
}

.photocollage .photocollageMore5 .photo: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;
  display: none;
}

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