/* ギャラリー全体の並び */
body { 
    touch-action: manipulation; 
    background-position: top left;
    font-family: "nos", "MS PGothic", sans-serif; 
    font-size: 18px; 
    padding: 0; 
    overflow-x: hidden; 
  background-image: url("img/stripe3.png");
  background-repeat: repeat;     /* ← タイル状に並べる */
  background-position: top left; /* ← 左上から開始 */
    /* background-size: 20px 20px; ← これを削除またはコメントアウト */
    margin: 0px;
}
@font-face {
  font-family: "nos";
  src: url("font/Saitamaar.ttf") format("truetype");
}
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 画像同士の隙間 */
    margin-bottom: 30px;
}

/* サムネイルを正方形にする設定 */
.thumb {
    width: 150px;  /* 好きなサイズに調整してください */
    height: 150px;
    object-fit: cover; /* 正方形に切り抜き */
    border: 1px solid #ccc;
    cursor: pointer;
    transition: opacity 0.2s;
}

.thumb:hover {
    opacity: 0.8;
}

/* 拡大画面（モーダル）の隠し設定 */
.modal-check {
    display: none; /* チェックボックスは見せない */
}

.modal-view {
    display: none; /* 通常時は非表示 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 背景を暗く */
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* チェックが入ったら表示 */
.modal-check:checked + .modal-view {
    display: flex;
}

/* 拡大画像自体のサイズ */
.modal-view img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid #fff;
    background: #fff;
}

/* 閉じるボタン（×） */
.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    font-family: sans-serif;
}
/* カテゴリナビを横に並べる */
.category-nav {
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
}

.category-nav ul {
    list-style: none;
    display: flex;
    justify-content: center; /* 中央寄せ（左寄せなら flex-start） */
    gap: 30px; /* 項目間の幅 */
    padding: 0;
}

.category-nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 5px 10px;
    transition: color 0.3s, border-bottom 0.3s;
}

.category-nav a:hover {
    color: #007bff; /* ホバー時の色 */
    border-bottom: 2px solid #007bff;
}

/* スムーズスクロール（リンクをクリックしたときゆっくり動く） */
html {
    scroll-behavior: smooth;
}

/* ページ内リンクで飛んだ際、見出しが隠れないように調整 */
section {
    scroll-margin-top: 20px;
}
/* ラジオボタン本体は隠す */
input[name="tab-item"] {
    display: none;
}

/* カテゴリナビの装飾 */
.category-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 3px double #000000;
}

.tab-label {
    padding: 10px 20px;
    cursor: pointer;
    background: #f0f0f0;
    border-radius: 5px 5px 0 0;
}

/* 選択されているタブの見た目を変える */
#tab-top:checked ~ .category-nav label[for="tab-top"],
#tab-clap:checked ~ .category-nav label[for="tab-clap"] {
    background: #08abf6;
    color: #373434;
    font-weight: bold;
}

/* コンテンツの表示・非表示切り替え */
.tab-content {
    display: none; /* 基本は全部隠す */
}

#tab-top:checked ~ #content-top,
#tab-clap:checked ~ #content-clap {
    display: block; /* 選択されたものだけ表示 */
}

/* --- 以下、前回のギャラリー＆拡大用CSSをそのまま使用 --- */
.gallery-container { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb { width: 150px; height: 150px; object-fit: cover; cursor: pointer; border: 3px #000000 double; }
.modal-check { display: none; }
.modal-view { 
    display: none; position: fixed; top: 0; left: 0; 
    width: 100%; height: 100%; background: rgba(0,0,0,0.8); 
    z-index: 9999; justify-content: center; align-items: center; 
}
.modal-check:checked + .modal-view { display: flex; }
.modal-view img { max-width: 90%; max-height: 90%; border: 3px solid #fff; }
.modal-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; }
img {
  image-rendering: pixelated;
  max-width: 100%;
}
.content { 
    gap: 10px; 
    padding: 15px; 
    padding-bottom: 30px; 
    min-height: 100vh; 
    display: flex;           /* GridからFlexに変更して高さの自動調整を防ぐ */
    flex-direction: column;  /* 縦に並べる */
    box-sizing: border-box; 
    max-width: 1200px; 
    margin: 0 auto; 
}
/* 検索ボックスのスタイル */
.search-container {
    text-align: center;
    margin-bottom: 20px;
}

#gallery-search {
    padding: 8px 15px;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
}

/* 名前を表示する設定 */
.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px; /* サムネイルと同じ幅 */

}

.img-name {


    display: block;

    padding-top: 3px;
    font-size: 16px;
    color: #000000;
    text-align: center;
    word-break: break-all; /* 長い名前の改行用 */
}

/* 検索でヒットしなかったものを隠す用 */
.gallery-item.is-hidden {
    display: none;
}
@media screen and (max-width: 600px) {
    .gallery-container {
        justify-content: center; /* 中央寄せに切り替え[cite: 5] */
        gap: 20px; /* スマホでは隙間を少し詰める */
    }

    .gallery-item {
        /* 2列にするための計算（(100% - 隙間) / 2） */
        width: calc((100% - 10px) / 2); 
        max-width: 150px; /* 大きくなりすぎないよう制限 */
    }

    .thumb {
        height: auto;   /* 高さは自動 */
        aspect-ratio: 1 / 1; /* 正方形を維持 */
    }
}