* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}


/* ギャラリー */
.gallery {
  width: calc(100% - 80px);
  margin: 120px auto 60px;

  column-count: 3;
  column-gap: 18px;
}

/* 写真 */
.photo {
  margin: 0 0 18px;
  padding: 0;

  break-inside: avoid;
  -webkit-column-break-inside: avoid;

  cursor: pointer;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  object-fit: contain;
}

/* 拡大表示 */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.97);
}

.viewer.open {
  display: flex;
}

#viewer-img {
 max-width: 90vw;
 max-height: 90vh;
 width: auto;
 height: auto;
 object-fit: contain; 
}

.viewer button {
  position: absolute;
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: 32px;
}

.viewer-close {
  top: 24px;
  right: 28px;
}

.viewer-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.viewer-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

/* スマホ */
@media (max-width: 700px) {

  .gallery {
    width: calc(100% - 28px);
    margin: 78px auto 30px;

    column-count: 2;
    column-gap: 10px;
  }

  .photo {
    margin-bottom: 10px;
  }

  .photo img {
    width: 100%;
    height: auto;
  }

  #viewer-img {
    max-width: 90vw;
    max-height: 90vh;
  }

  .viewer-close {
    top: 16px;
    right: 18px;
  }

  .viewer-prev {
    left: 10px;
  }

  .viewer-next {
    right: 10px;
  }
}
.viewer-close,
.viewer-prev,
.viewer-next {
  display: none !important;
}
header {
  position: relative;
  width: calc(100% - 80px);
  margin: 40px auto 0;
}

header h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -3px;
}

.home-link {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);

  color: #111;
  text-decoration: none;

  font-size: 14px;
  letter-spacing: 1px;
}

.home-link:hover {
  opacity: 0.5;
}

@media (max-width: 700px) {
  header {
    width: calc(100% - 28px);
    margin-top: 24px;
  }

  header h1 {
    font-size: 38px;
    letter-spacing: -2px;
  }

  .home-link {
    font-size: 12px;
  }
}