/* モバイルファースト設計 */

/* スマートフォン向け (デフォルト: 600px未満) */
@media screen and (max-width: 599px) {
  header { padding: 0 10px; }

  .logo h1 { font-size: 20px; }

  .contact-link { font-size: 14px; }

  #side-menu {
    width: 100%;
    right: -100%;
  }

  .grid-view .gallery-item {
    flex-basis: calc(50% - 0px);
    padding-bottom: calc(50% - 0px);
  }

  #detail-overlay .detail-container {
    padding-bottom: 10px;
  }

  /* list-view (was duplicated in another 599px block) */
  .list-view .gallery-item { height: 80px; }

  .list-view .gallery-item img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }

  .item-info h3 { font-size: 14px; }

  .item-info p { font-size: 12px; }
}

/* タブレット向け (600px以上) */
@media screen and (min-width: 600px) and (max-width: 899px) {
    .grid-view .gallery-item {
        flex-basis: calc(33.333% - 0px);
        padding-bottom: calc(33.333% - 0px);
    }
}

/* 小さいデスクトップ向け (900px以上) */
@media screen and (min-width: 900px) and (max-width: 1199px) {
    .grid-view .gallery-item {
        flex-basis: calc(25% - 0px);
        padding-bottom: calc(25% - 0px);
    }
}

/* デスクトップ向け (1200px以上) */
@media screen and (min-width: 1200px) {
    .grid-view .gallery-item {
        flex-basis: calc(20% - 0px);
        padding-bottom: calc(20% - 0px);
    }
}

/* ヘッダーとメニューのレスポンシブ調整 */
@media screen and (max-width: 767px) {
  .view-button {
    padding: 5px;
    margin-right: 5px;
    font-size: 12px;
  }

  .menu-section ul li { margin-bottom: 6px; }

  .sort-options ul { flex-direction: column; }

  .sort-options ul li { margin-bottom: 8px; }

  /* detail overlay (was duplicated in another 767px block) */
  #detail-overlay { padding: 64px 0 32px; }

  #detail-overlay .detail-container {
    width: calc(100% - 16px); /* 左右8px */
    padding-left: 0;
    padding-right: 0;
  }

  #detail-content {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 12px;
  }

  #detail-overlay .detail-info {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    height: auto;
  }

  #detail-overlay .related-works { margin-top: 20px; }

  #detail-overlay .related-grid { justify-content: center; }

  #detail-overlay .detail-info h2 { font-size: 20px; }

  #detail-overlay .detail-info p { font-size: 14px; }

  #detail-overlay .nav-button {
    width: 112px;
    height: 112px;
    font-size: 20px;
    overflow: visible;
  }

  #detail-overlay #close-detail {
    left: 0;
    width: 76px;
    height: 76px;
  }

  #detail-overlay #prev-work,
  #detail-overlay #next-work {
    width: 112px;
    height: 112px;
    overflow: visible;
  }

  #detail-overlay #close-detail,
  #detail-overlay #prev-work,
  #detail-overlay #next-work {
    color: #fff;
    mix-blend-mode: normal;
  }

  #detail-overlay #close-detail svg,
  #detail-overlay #prev-work svg,
  #detail-overlay #next-work svg {
    width: 64px;
    height: 64px;
    overflow: visible;
    mix-blend-mode: normal;
    filter:
      drop-shadow(0 0 0.35px rgba(0, 0, 0, 0.95))
      drop-shadow(0 0 0.35px rgba(0, 0, 0, 0.75));
  }

  #detail-overlay #close-detail svg {
    transform: translate(-2px, -8px);
  }

  #detail-overlay #close-detail svg path,
  #detail-overlay #prev-work svg path,
  #detail-overlay #next-work svg path {
    stroke: #fff;
    stroke-width: 0.10;
  }

  #detail-overlay #prev-work {
    left: 0;
    justify-content: flex-start;
    padding-left: 0;
  }

  #detail-overlay #prev-work svg {
    transform: translateX(4px);
  }

  #detail-overlay #next-work {
    right: 0;
    justify-content: flex-end;
    padding-right: 0;
  }

  #detail-overlay #next-work svg {
    transform: translateX(-4px);
  }
}