/* css for imageplay 2026.03.31 */
h1 #span_yellow {  
   color: yellow;
   text-shadow: 2px 2px 0px green;
}
h1 .span_sakura {  
   color: #fef4f4;
   text-shadow: 2px 2px 0px green;
}
h1 #span_green {  
   color: green;
   text-shadow: 2px 2px 0px white;
}
/* 1. ダイアログ自体の余白と枠線を消す */
#photo-modal {
  padding: 0;          /* 内側の余白をゼロにする */
  border: none;       /* 標準の黒い枠線を消す */
  background: transparent; /* 背景を透明にして画像だけを浮き立たせる */
  
  /* 画面からはみ出さないための設定 */
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;    /* はみ出しをカット */
}

/* 2. 画像の下にできる数ピクセルの隙間を消す */
#photo-modal img {
  display: block;      /* inline要素からblock要素に変える（重要！） */
  width: 100%;
  height: auto;
  max-height: 95vh;    /* 画面の高さに合わせる */
  object-fit: contain; /* 比率を維持 */
}

/* 3. （お好みで）角を少し丸くしたり、影をつけたい場合 */
#photo-modal img {
  border-radius: 8px;  /* 角を丸くする */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 影をつけて立体感を出す */
}
/*
#photo-modal .close-btn {
  color:white;
  background-color: rgba(100, 100, 100, 0.8);
 }
*/
#modal-img {
  cursor: zoom-out; /* 「縮小」を意味する虫眼鏡アイコンになります */
}
/* ギャラリー全体のスタイル */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.gallery p {
  color:white;
  font-size:12px;
}
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9; /* 統一感のある比率 */
  object-fit: cover;
  cursor: pointer;
}

/* 拡大された画像の transition 名を固定（JSで動的に割り当てるため、CSSでは1つ用意） */
.expanded-image {
  view-transition-name: active-image;
}

/* モーダルの背景を暗く */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.9);
}

dialog {
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}
/* 拡大された画像（dialog内のimg）に transition 名を固定で付ける */
#photo-modal img.expanded-image {
  view-transition-name: active-image;
}

/* モーダルの背景（backdrop）をゆっくりフェードインさせるアニメーション */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#photo-modal::backdrop {
  background-color: rgba(100, 100, 100, 0.8);
  animation: fadeIn 1.5s ease-out; /* 背景のフェードイン */
}