@charset "UTF-8";

/*
  イラストギャラリー専用のモーダル上書き。
  キャラ紹介用モーダルから流用している余白をなくし、
  サムネイルを正方形にそろえる。
*/
.illustration-gallery .modal-item {
  padding: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
}

.illustration-gallery .modal-grid button {
  width: 100%;
  height: 100%;
  display: block;
  background: #f8f8f8;
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.illustration-gallery .modal-grid button::before {
  content: "";
  position: absolute;
  inset: -8px;
  background-image: var(--thumb-bg);
  background-size: cover;
  background-position: center;
  filter: blur(12px);
  transform: scale(1.08);
  opacity: 0.55;
}

.illustration-gallery .modal-grid button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
}

.illustration-gallery .modal-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  image-rendering: auto;
  position: relative;
  z-index: 1;
}

/* モーダル内の複数画像サムネイルも正方形に統一して切り抜く */
.illustration-gallery .modal-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* イラストモーダルではタイトル要素のみ非表示にする */
.illustration-gallery .modal-content .modal-title {
  display: none;
}

/* 説明テキストは表示する */
.illustration-gallery .modal-content p {
  display: block;
  margin: 1em 0 0;
}

/* 年区切りで追加した次セクションは余白を保ちつつ上部ラインだけ消す */
.illustration-gallery + .illustration-gallery::before {
  display: none;
}

/* スマホではタイトルを1行維持しつつ幅に応じて縮小 */
@media screen and (max-width: 520px) {
  .illustration-gallery .box__title {
    font-size: clamp(2rem, 8.4vw, 3rem);
    letter-spacing: clamp(0.06em, 0.6vw, 0.16em);
    white-space: nowrap;
    word-break: keep-all;
  }
}