/**
 * project-gallery.css
 * プロジェクト詳細ページ用：画面幅いっぱい・余白なし・整形モザイク・完全レスポンシブ
 * 使い方: <main class="project-gallery"><header class="gallery-head">...</header><div class="gallery-grid">に
 *        <figure class="gallery-cell pos-1">〜<figure class="gallery-cell pos-16">で画像を配置（16枚想定）
 *        .project-bono は .project-gallery のエイリアス（bono ページ互換）
 */

/* コンテナ：画面幅max・余白なし */
.project-gallery,
.project-bono {
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}
.project-gallery article,
.project-bono article {
  margin: 0;
  padding: 0;
}

/* ヘッダー */
.project-gallery .gallery-head,
.project-gallery .bono-head,
.project-bono .gallery-head,
.project-bono .bono-head {
  padding: clamp(24px, 5vw, 56px) clamp(16px, 5vw, 48px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--black);
  color: var(--white);
}
.project-gallery .gallery-head h1,
.project-gallery .bono-head h1,
.project-bono .gallery-head h1,
.project-bono .bono-head h1 {
  font-size: clamp(20px, 3.2vw, 28px) !important;
  font-weight: 400;
  letter-spacing: 0.16em;
  margin: 0 0 10px;
  color: var(--white) !important;
  line-height: 1.2;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.project-gallery .gallery-head p,
.project-gallery .bono-head p,
.project-bono .gallery-head p,
.project-bono .bono-head p {
  font-size: clamp(9px, 1.15vw, 11px);
  letter-spacing: 0.24em;
  opacity: 0.88;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.5;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* ヘッダー：黒でないパターン背景（オプション） */
.project-gallery .gallery-head--pattern,
.project-gallery .bono-head--pattern,
.project-bono .gallery-head--pattern,
.project-bono .bono-head--pattern {
  background-color: #2a2826;
  background-image:
    repeating-linear-gradient(
      105deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px
    );
  color: var(--white);
}

/* グリッド（16枚レイアウト） */
.project-gallery .gallery-grid,
.project-gallery .bono-grid,
.project-bono .gallery-grid,
.project-bono .bono-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:
    minmax(50vh, 560px)
    minmax(46vh, 520px)
    minmax(32vh, 380px)
    minmax(22vh, 280px)
    minmax(32vh, 380px)
    minmax(32vh, 380px);
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* 最後のセル・グリッド直下の余白をなくす */
.project-gallery .gallery-grid:last-child,
.project-bono .gallery-grid:last-child { margin-bottom: 0; }
.project-gallery .gallery-cell:last-child,
.project-bono .gallery-cell:last-child { margin-bottom: 0; }

.project-gallery .gallery-cell,
.project-gallery .bono-cell,
.project-bono .gallery-cell,
.project-bono .bono-cell {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 0; /* grid セルが Safari/iOS で高さを持つように */
}

.project-gallery .gallery-cell img,
.project-gallery .bono-cell img,
.project-bono .gallery-cell img,
.project-bono .bono-cell img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* iOS Safari で描画されない問題を避ける */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.project-gallery .gallery-cell .cell-caption,
.project-gallery .bono-cell .cell-caption,
.project-bono .gallery-cell .cell-caption,
.project-bono .bono-cell .cell-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(10px, 1.8vw, 16px) clamp(12px, 2vw, 20px);
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  color: var(--white);
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.22em;
  opacity: 0;
  transition: opacity 0.22s ease;
  text-transform: uppercase;
  min-height: 2.5em;
  line-height: 1.4;
}
.project-gallery .gallery-cell:hover .cell-caption,
.project-gallery .bono-cell:hover .cell-caption,
.project-bono .gallery-cell:hover .cell-caption,
.project-bono .bono-cell:hover .cell-caption { opacity: 1; }

/* 配置 pos-1〜pos-16 */
.project-gallery .pos-1,
.project-bono .pos-1 { grid-column: 1 / -1; grid-row: 1; }
.project-gallery .pos-2,
.project-bono .pos-2 { grid-column: 1 / -1; grid-row: 2; }
.project-gallery .pos-3,
.project-bono .pos-3 { grid-column: 1 / 6;   grid-row: 3; }
.project-gallery .pos-4,
.project-bono .pos-4 { grid-column: 6 / 10; grid-row: 3 / 5; }
.project-gallery .pos-5,
.project-bono .pos-5 { grid-column: 10 / -1; grid-row: 3; }
.project-gallery .pos-6,
.project-bono .pos-6 { grid-column: 1 / 3;  grid-row: 4; }
.project-gallery .pos-7,
.project-bono .pos-7 { grid-column: 3 / 5;  grid-row: 4; }
.project-gallery .pos-8,
.project-bono .pos-8 { grid-column: 5 / 7;  grid-row: 4; }
.project-gallery .pos-9,
.project-bono .pos-9 { grid-column: 7 / 9;  grid-row: 4; }
.project-gallery .pos-10,
.project-bono .pos-10 { grid-column: 9 / 11; grid-row: 4; }
.project-gallery .pos-11,
.project-bono .pos-11 { grid-column: 11 / -1; grid-row: 4; }
.project-gallery .pos-12,
.project-bono .pos-12 { grid-column: 1 / 7;  grid-row: 5; }
.project-gallery .pos-13,
.project-bono .pos-13 { grid-column: 7 / -1; grid-row: 5; }
.project-gallery .pos-14,
.project-bono .pos-14 { grid-column: 1 / 5;  grid-row: 6; }
.project-gallery .pos-15,
.project-bono .pos-15 { grid-column: 5 / 9;  grid-row: 6; }
.project-gallery .pos-16,
.project-bono .pos-16 { grid-column: 9 / -1; grid-row: 6; }

/* 11枚用：下段をバラす（3枚×2段） */
.project-gallery.gallery-11 .gallery-grid,
.project-bono.gallery-11 .bono-grid {
  grid-template-rows:
    minmax(50vh, 560px)
    minmax(46vh, 520px)
    minmax(32vh, 380px)
    minmax(22vh, 280px)
    minmax(28vh, 340px);
}
.project-gallery.gallery-11 .pos-3,
.project-bono.gallery-11 .pos-3 { grid-column: 1 / 5;  grid-row: 3; }
.project-gallery.gallery-11 .pos-4,
.project-bono.gallery-11 .pos-4 { grid-column: 5 / 9;  grid-row: 3; }
.project-gallery.gallery-11 .pos-5,
.project-bono.gallery-11 .pos-5 { grid-column: 9 / -1; grid-row: 3; }
.project-gallery.gallery-11 .pos-6,
.project-bono.gallery-11 .pos-6 { grid-column: 1 / 4;  grid-row: 4; }
.project-gallery.gallery-11 .pos-7,
.project-bono.gallery-11 .pos-7 { grid-column: 4 / 8;  grid-row: 4; }
.project-gallery.gallery-11 .pos-8,
.project-bono.gallery-11 .pos-8 { grid-column: 8 / -1; grid-row: 4; }
.project-gallery.gallery-11 .pos-9,
.project-bono.gallery-11 .pos-9 { grid-column: 1 / 6;  grid-row: 5; }
.project-gallery.gallery-11 .pos-10,
.project-bono.gallery-11 .pos-10 { grid-column: 6 / 10; grid-row: 5; }
.project-gallery.gallery-11 .pos-11,
.project-bono.gallery-11 .pos-11 { grid-column: 10 / -1; grid-row: 5; }

@media (min-width: 1600px) {
  .project-gallery .gallery-grid,
  .project-gallery .bono-grid,
  .project-bono .gallery-grid,
  .project-bono .bono-grid {
    grid-template-rows:
      minmax(48vh, 620px)
      minmax(44vh, 580px)
      minmax(30vh, 420px)
      minmax(20vh, 300px)
      minmax(30vh, 420px)
      minmax(30vh, 420px);
  }
  .project-gallery.gallery-11 .gallery-grid,
  .project-bono.gallery-11 .bono-grid {
    grid-template-rows:
      minmax(48vh, 620px)
      minmax(44vh, 580px)
      minmax(30vh, 420px)
      minmax(20vh, 300px)
      minmax(26vh, 380px);
  }
}

@media (max-width: 1024px) {
  .project-gallery .gallery-head,
  .project-gallery .bono-head,
  .project-bono .gallery-head,
  .project-bono .bono-head { padding: clamp(28px, 6vw, 44px) clamp(16px, 5vw, 40px); }
  .project-gallery .gallery-head h1,
  .project-gallery .bono-head h1,
  .project-bono .gallery-head h1,
  .project-bono .bono-head h1 { letter-spacing: 0.14em; }
  .project-gallery .gallery-grid,
  .project-gallery .bono-grid,
  .project-bono .gallery-grid,
  .project-bono .bono-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows:
      minmax(52vh, 440px)
      minmax(44vh, 380px)
      minmax(36vh, 320px)
      minmax(30vh, 280px)
      minmax(28vh, 260px)
      minmax(28vh, 260px)
      minmax(40vh, 360px)
      minmax(32vh, 300px)
      minmax(32vh, 300px);
  }
  .project-gallery.gallery-11 .gallery-grid,
  .project-bono.gallery-11 .bono-grid {
    grid-template-rows:
      minmax(52vh, 440px)
      minmax(44vh, 380px)
      minmax(36vh, 320px)
      minmax(30vh, 280px)
      minmax(28vh, 260px)
      minmax(28vh, 260px);
  }
  .project-gallery .pos-1,
  .project-bono .pos-1 { grid-column: 1 / -1; grid-row: 1; }
  .project-gallery .pos-2,
  .project-bono .pos-2 { grid-column: 1 / -1; grid-row: 2; }
  .project-gallery .pos-3,
  .project-bono .pos-3 { grid-column: 1 / -1; grid-row: 3; }
  .project-gallery .pos-4,
  .project-bono .pos-4 { grid-column: 1 / 4; grid-row: 4; }
  .project-gallery .pos-5,
  .project-bono .pos-5 { grid-column: 4 / -1; grid-row: 4; }
  .project-gallery .pos-6,
  .project-bono .pos-6 { grid-column: 1 / 3; grid-row: 5; }
  .project-gallery .pos-7,
  .project-bono .pos-7 { grid-column: 3 / 5; grid-row: 5; }
  .project-gallery .pos-8,
  .project-bono .pos-8 { grid-column: 5 / -1; grid-row: 5; }
  .project-gallery .pos-9,
  .project-bono .pos-9 { grid-column: 1 / 3; grid-row: 6; }
  .project-gallery .pos-10,
  .project-bono .pos-10 { grid-column: 3 / 5; grid-row: 6; }
  .project-gallery .pos-11,
  .project-bono .pos-11 { grid-column: 5 / -1; grid-row: 6; }
  .project-gallery .pos-12,
  .project-bono .pos-12 { grid-column: 1 / -1; grid-row: 7; }
  .project-gallery .pos-13,
  .project-bono .pos-13 { grid-column: 1 / 4; grid-row: 8; }
  .project-gallery .pos-14,
  .project-bono .pos-14 { grid-column: 4 / -1; grid-row: 8; }
  .project-gallery .pos-15,
  .project-bono .pos-15 { grid-column: 1 / 3; grid-row: 9; }
  .project-gallery .pos-16,
  .project-bono .pos-16 { grid-column: 3 / -1; grid-row: 9; }
  .project-gallery .gallery-cell .cell-caption,
  .project-gallery .bono-cell .cell-caption,
  .project-bono .gallery-cell .cell-caption,
  .project-bono .bono-cell .cell-caption { opacity: 0.85; }
}

@media (max-width: 768px) {
  .project-gallery .gallery-head,
  .project-gallery .bono-head,
  .project-bono .gallery-head,
  .project-bono .bono-head { padding: 28px clamp(16px, 5vw, 32px); }
  .project-gallery .gallery-head h1,
  .project-gallery .bono-head h1,
  .project-bono .gallery-head h1,
  .project-bono .bono-head h1 { font-size: clamp(18px, 5vw, 22px) !important; letter-spacing: 0.12em; }
  .project-gallery .gallery-head p,
  .project-gallery .bono-head p,
  .project-bono .gallery-head p,
  .project-bono .bono-head p { font-size: 9px; letter-spacing: 0.2em; }
}

@media (max-width: 640px) {
  .project-gallery .gallery-head,
  .project-gallery .bono-head,
  .project-bono .gallery-head,
  .project-bono .bono-head { padding: 24px clamp(14px, 5vw, 28px); }
  /* iPhone：ブロック縦積みで重なりを完全に防止（ページ別 grid 指定も上書き） */
  .project-gallery .gallery-grid,
  .project-gallery .bono-grid,
  .project-gallery .gallery-grid--2col,
  .project-bono .gallery-grid,
  .project-bono .bono-grid {
    display: block !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-auto-rows: unset !important;
  }
  .project-gallery .gallery-cell,
  .project-gallery .bono-cell,
  .project-bono .gallery-cell,
  .project-bono .bono-cell {
    display: block !important;
    position: relative;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  /* 画像用スロット：iPhone は 1:1 でトリミング（伸縮せず cover のみ） */
  .project-gallery .gallery-cell::before,
  .project-gallery .bono-cell::before,
  .project-bono .gallery-cell::before,
  .project-bono .bono-cell::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  .project-gallery .gallery-cell:last-child,
  .project-gallery .bono-cell:last-child,
  .project-bono .gallery-cell:last-child,
  .project-bono .bono-cell:last-child { margin-bottom: 0 !important; }
  /* 画像：1:1 スロットに cover でトリミングのみ */
  .project-gallery .gallery-cell img,
  .project-gallery .bono-cell img,
  .project-bono .gallery-cell img,
  .project-bono .bono-cell img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  /* キャプション：画像の下端に重ねてグラデ（初期・デスクトップと同じ） */
  .project-gallery .gallery-cell .cell-caption,
  .project-gallery .bono-cell .cell-caption,
  .project-bono .gallery-cell .cell-caption,
  .project-bono .bono-cell .cell-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 12px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.78));
    color: #f7f5f2;
    opacity: 1;
    font-size: 10px;
    line-height: 1.4;
    min-height: 2.8em;
    box-sizing: border-box;
    text-transform: uppercase;
    letter-spacing: 0.2em;
  }
  .project-gallery .pos-1,
  .project-bono .pos-1 { grid-column: 1; grid-row: 1; }
  .project-gallery .pos-2,
  .project-bono .pos-2 { grid-column: 1; grid-row: 2; }
  .project-gallery .pos-3,
  .project-bono .pos-3 { grid-column: 1; grid-row: 3; }
  .project-gallery .pos-4,
  .project-bono .pos-4 { grid-column: 1; grid-row: 4; }
  .project-gallery .pos-5,
  .project-bono .pos-5 { grid-column: 1; grid-row: 5; }
  .project-gallery .pos-6,
  .project-bono .pos-6 { grid-column: 1; grid-row: 6; }
  .project-gallery .pos-7,
  .project-bono .pos-7 { grid-column: 1; grid-row: 7; }
  .project-gallery .pos-8,
  .project-bono .pos-8 { grid-column: 1; grid-row: 8; }
  .project-gallery .pos-9,
  .project-bono .pos-9 { grid-column: 1; grid-row: 9; }
  .project-gallery .pos-10,
  .project-bono .pos-10 { grid-column: 1; grid-row: 10; }
  .project-gallery .pos-11,
  .project-bono .pos-11 { grid-column: 1; grid-row: 11; }
  .project-gallery .pos-12,
  .project-bono .pos-12 { grid-column: 1; grid-row: 12; }
  .project-gallery .pos-13,
  .project-bono .pos-13 { grid-column: 1; grid-row: 13; }
  .project-gallery .pos-14,
  .project-bono .pos-14 { grid-column: 1; grid-row: 14; }
  .project-gallery .pos-15,
  .project-bono .pos-15 { grid-column: 1; grid-row: 15; }
  .project-gallery .pos-16,
  .project-bono .pos-16 { grid-column: 1; grid-row: 16; }
}

@media (max-width: 480px) {
  .project-gallery .gallery-head,
  .project-gallery .bono-head,
  .project-bono .gallery-head,
  .project-bono .bono-head { padding: 20px clamp(12px, 5vw, 24px); }
  .project-gallery .gallery-head h1,
  .project-gallery .bono-head h1,
  .project-bono .gallery-head h1,
  .project-bono .bono-head h1 { font-size: 17px !important; letter-spacing: 0.1em; }
  .project-gallery .gallery-head p,
  .project-gallery .bono-head p,
  .project-bono .gallery-head p,
  .project-bono .bono-head p { font-size: 9px; }
  .project-gallery .gallery-grid,
  .project-gallery .bono-grid,
  .project-bono .gallery-grid,
  .project-bono .bono-grid { grid-auto-rows: minmax(80vw, 420px); }
  .project-gallery.gallery-11 .gallery-grid,
  .project-bono.gallery-11 .bono-grid { grid-template-rows: repeat(11, minmax(80vw, 420px)); grid-auto-rows: unset; }
  .project-gallery .gallery-cell .cell-caption,
  .project-gallery .bono-cell .cell-caption,
  .project-bono .gallery-cell .cell-caption,
  .project-bono .bono-cell .cell-caption { padding: 12px 14px; font-size: 9px; letter-spacing: 0.18em; min-height: 2.6em; }
}

@media (max-width: 360px) {
  .project-gallery .gallery-head h1,
  .project-gallery .bono-head h1,
  .project-bono .gallery-head h1,
  .project-bono .bono-head h1 { font-size: 16px !important; }
  .project-gallery .gallery-head p,
  .project-gallery .bono-head p,
  .project-bono .gallery-head p,
  .project-bono .bono-head p { font-size: 8px; }
  .project-gallery .gallery-grid,
  .project-gallery .bono-grid,
  .project-bono .gallery-grid,
  .project-bono .bono-grid { grid-auto-rows: minmax(78vw, 380px); }
  .project-gallery.gallery-11 .gallery-grid,
  .project-bono.gallery-11 .bono-grid { grid-template-rows: repeat(11, minmax(78vw, 380px)); grid-auto-rows: unset; }
  .project-gallery .gallery-cell .cell-caption,
  .project-gallery .bono-cell .cell-caption,
  .project-bono .gallery-cell .cell-caption,
  .project-bono .bono-cell .cell-caption { font-size: 8px; padding: 10px 12px; }
}