body {
  font-family: "WDXL Lubrifont SC", sans-serif;
  font-weight: 400;
  font-style: normal;

      margin: 0;
      padding: 1rem;
      background: url('sozai/back2.png') no-repeat center center fixed;
      overflow-x: hidden;
    }
    .gallery {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      max-width: 600px;
      margin: 1px;
    }
    .gallery img {
      width: 100%;
      cursor: pointer;
      border-radius: 8px;
    }

.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

.modal.show {
  display: flex;
}

.modal img {
  max-width: 300vw;
  max-height: 300vh;
  z-index: 10000;
}

.variant-thumbnails {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 15px;
  z-index: 10000;

}

.variant-thumbnails img {
  width: 80px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
}

.variant-thumbnails img:hover {
  border-color: white;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  z-index: 10000;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;

    }
    .prev-btn {
      left: 0;
    }
    .next-btn {
      right: 0;
    }
        .gallery {
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* 横に6個 */
      gap: 10px; /* 画像同士の間隔 */
      max-width: 1200px;
      margin: auto;
    }

    .gallery img {
      width: 100%;
    }
.gallery-title {
  font-family: "WDXL Lubrifont SC", sans-serif;
  font-size: 1.5rem;
  color: white;
  position: relative;
  z-index: 1;

 
  /* 白縁取り：文字にドロップシャドウを重ねる */
  filter: drop-shadow(0 0 0 black)
          drop-shadow(2px 0 0 black)
          drop-shadow(-2px 0 0 black)
          drop-shadow(0 2px 0 black)
          drop-shadow(0 -2px 0 black);

  /* 配置と余白 */
  text-align: center;
  margin: 40px auto;
  padding: 2px;




}
/* 画面中央に置かれる四角い枠 */
.page-container {
  max-width: 1700px;
  margin: 1px auto;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 1px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;       /* 横スクロール禁止 */
  box-sizing: border-box;   /* padding込みで1700pxに収まる */
  text-align: center;
}

.variant-container {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.variant-container img.variant-thumb {
  width: 100px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s;
}

.variant-container img.variant-thumb:hover {
  transform: scale(1.1);
}

.home{

text-align: center;

margin:1px;
  filter: drop-shadow(0 0 0 white)
          drop-shadow(2px 0 0 white)
          drop-shadow(-2px 0 0 white)
          drop-shadow(0 2px 0 white)
          drop-shadow(0 -2px 0 white);

}