@charset "UTF-8";

/* ==========================================================================
   1. ページ全体のレイアウト（1カラム・縦一列構成）
   ========================================================================== */

/* 処理・目的: 既存のリンク集などの白枠デザイン（.link-full-wrapper）をベースに全体の幅を定義します */
.gallery-full-wrapper {
  max-width: 900px;
  width: 100%;
  margin: 20px auto;
  background-color: #ffffff;
  border: 1px solid #999999;
  box-sizing: border-box;
}

/* --- 上部：ABOUTセクション --- */
.gallery-about-section {
  padding: 25px 30px 10px 30px;
}

.gallery-about-section h2 {
  font-size: 14px;
  background-color: #555555; /* 注意書きを引き締めるダークグレー */
  color: #ffffff;
  padding: 3px 8px;
  margin: 0 0 10px 0;
}

.about-box {
  font-size: 13px;
  line-height: 1.7;
  color: #444444;
  padding: 15px;
  border: 1px dotted #ccc;
  background-color: #f9f9f9;
}

/* 警告文の赤色強調 */
.warning-text {
  color: #cc0000;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
}

/* --- 下部：メインエリア --- */
.gallery-main-area {
  padding: 10px 30px 30px 30px;
}

/* ==========================================================================
   2. カテゴリ切り替えタブと作品一覧（トリミング仕様）
   ========================================================================== */

.gallery-trigger { display: none; }

.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0 25px 0;
}

.gallery-tabs label {
  background-color: #f0f0f0;
  color: #006669;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}

#cat-all:checked ~ .gallery-tabs label[for="cat-all"],
#cat-illust:checked ~ .gallery-tabs label[for="cat-illust"],
#cat-gif:checked ~ .gallery-tabs label[for="cat-gif"],
#cat-primary:checked ~ .gallery-tabs label[for="cat-primary"],
#cat-derivative:checked ~ .gallery-tabs label[for="cat-derivative"] {
  background-color: #009999;
  color: #ffffff;
  border-color: #808080 #ffffff #ffffff #808080;
}

/* 作品リスト */
.gallery-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.gallery-item {
  width: 200px; /* ボックス幅を200pxに統一 */
  border: 1px solid #999999;
  background-color: #fafafa;
  padding: 10px;
  box-sizing: border-box;
}

.item-inner { text-align: center; }

/* 処理・目的: 前回の指示通り、画像の表示枠を完全に固定して、大きい画像を切り取ります */
.item-inner a {
  display: block;
  width: 100%;
  height: 180px; /* 高さ180pxで固定 */
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #ccc;
  padding: 2px;
  box-sizing: border-box;
}

.item-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率を維持して中央でトリミング */
  object-position: center;
}

.item-inner p {
  font-size: 12px;
  margin: 8px 0 0 0;
  color: #333;
  font-weight: bold;
}

/* カテゴリ切り替え用の非表示命令 */
#cat-illust:checked ~ .gallery-list .gallery-item:not(.item-illust) { display: none; }
#cat-gif:checked ~ .gallery-list .gallery-item:not(.item-gif) { display: none; }
#cat-primary:checked ~ .gallery-list .gallery-item:not(.item-primary) { display: none; }
#cat-derivative:checked ~ .gallery-list .gallery-item:not(.item-derivative) { display: none; }


/* ==========================================================================
   3. 拡大表示（モーダル）と説明文（.modal-caption）の装飾
   ========================================================================== */

/* 全体を覆う暗い背景幕 */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-overlay:target { display: flex; }

.modal-close-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 中央の白い展示ボックス */
.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  padding: 25px;
  max-width: 500px; /* 横幅を読みやすい500pxに制限 */
  width: 90%;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.5);
  box-sizing: border-box;
}

/* 拡大画像エリア */
.modal-img-space {
  text-align: center;
  margin-bottom: 15px;
}

.modal-img-space img {
  max-width: 100%;
  max-height: 45vh; /* 縦幅を抑えて下の説明文のスペースを確保します */
  height: auto;
  border: 1px solid #ccc;
  padding: 2px;
  background: #fff;
}

/* --------------------------------------------------------------------------
   ★拡大画面内の説明文（解説エリア）の装飾★
   処理・目的: 構造を明確にし、文字色、フォントサイズ、余白、境界線を細かく定義します。
   どうなるか: 画像の下に、サイト全体の雰囲気にマッチした綺麗な解説枠が表示されます。
   -------------------------------------------------------------------------- */
.modal-caption {
  text-align: left;            /* 文章は左寄せで読みやすく */
  background-color: #fafafa;   /* 薄いグレーの背景を敷いて枠内を区別 */
  border: 1px dotted #999999;  /* レトロなドット線で囲む */
  padding: 12px;
  margin-top: 10px;
}

/* 解説ボックス内の小見出し（作品解説など） */
.modal-caption h3 {
  font-size: 13px;
  color: #009999;              /* サイトのテーマカラー（水色） */
  margin: 0 0 6px 0;
  padding-bottom: 3px;
  border-bottom: 2px solid #bbf1ef; /* 水色の下線 */
}

/* 解説ボックス内の本文 */
.modal-caption p {
  font-size: 12px;
  line-height: 1.6;
  color: #333333;              /* しっかり読める濃いグレー */
  margin: 0;
}

/* 「閉じる」ボタン */
.modal-close-button {
  position: absolute;
  top: -25px;
  right: 0;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
}

.modal-close-button:hover {
  text-decoration: underline;
  color: #bbf1ef;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .gallery-main-area, .gallery-about-section {
    padding: 15px;
  }
  .gallery-list {
    justify-content: center; /* スマホでは要素を中央寄せにする */
  }
}