/* =========================================
   基本設定
========================================= */
body {
  margin: 1px;
  padding-top: 80px;  /* 固定ヘッダーの高さ分 */
  background: #fff;
  font-family: "univers-next-pro", sans-serif;
  /* =========================================
   全ページ共通・ページ最下部余白
========================================= */
  padding-bottom: 50px; /* 余白は自由に調整可能 */

}

/* 共通リンクスタイル（ヘッダー用） */
a {
  text-decoration: none;
  color: #000;
}

a:visited {
  color: #000;
}

/* =========================================
   固定ヘッダー
========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  padding: 0px;
}

/* ヘッダー内レイアウト（幅はギャラリーと共通） */
.site-header .inner {
  max-width: 1035px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 0;
}

/* 左上ブランド */
.brand {
  font-size: 17px;
  font-weight: 500;
  font-style: normal;
}

/* 右上ナビ */
.header-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #000;
  font-size: 15px;
  font-weight: 300;
}

.header-nav a:hover {
  color: #888f;
}

/* =========================================
   ヘッダー色変化
========================================= */
.site-header {
  mix-blend-mode: difference;
}

.site-header a,
.site-header .brand {
  color: #fff;   /* difference で白を基準に反転させる */
}


/* =========================================
   ギャラリー（3列、中央揃え）
========================================= */
.page-container {
  max-width: 1035px;
  margin: 0 auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 345px);
  gap: 1px;
  justify-content: center;
  padding: 5px;
}

.gallery img {
  width: 345px;
  height: 475px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: filter 0.3s;
}


.gallery .item {
  position: relative;
  width: 345px;
  height: 475px;
  overflow: hidden;
}

.gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s;
}

.gallery .item:hover img {
  filter: brightness(50%);
}





/* =========================================
   ホバーで表示
========================================= */
.gallery .item:hover .caption {
  opacity: 1;
}

.gallery img:hover {
  filter: brightness(60%);
}

.gallery .caption {
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* ここで完全中央寄せ */
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  text-align: center;
  white-space: normal;
  max-width: 100%;   /* ← 幅は広いまま、画像に合う */
  line-height: 1.4; 
}

.gallery .item:hover .caption {
  opacity: 1;
}

/* === スマホでタップした時の hover 再現 === */
.gallery .item:active img {
  filter: brightness(50%);
}

.gallery .item:active .caption {
  opacity: 1;
}



/* =========================================
   スマホ対応
========================================= */
@media screen and (max-width: 600px) {

  /* ヘッダー内の幅 */
  .site-header .inner {
    max-width: 100%;
  }

  /* ギャラリー（1列 + 左右余白10px） */
  .gallery {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 0 10px;
    margin: 0 !important;
    box-sizing: border-box;
    padding-top: 5px;
  }

  .gallery .item,
  .gallery .item img {
    width: 100% !important;
    height: auto !important;
  }

  /* brand（左揃え + 左余白10px） */
  .brand {
    align-self: flex-start;
    font-size: 15px;
    padding-left: 10px;   /* ← ここに変更 */
  }

  /* nav（右揃えのまま + 右余白10px） */
  .header-nav {
    align-self: flex-end;
    padding-right: 10px;
    text-align: left;
  }



}