.search-container {
            text-align: center;
            margin-bottom: 15px;
            padding: 25px;
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }

        .search-container input, .search-container button {
            font-size: 17px;
            padding: 12px 20px;
            border-radius: 4px;
        }

        .search-container input {
            width: 100%;
            border: 1px solid #cce0ff;
            margin-right: 15px;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
        }

        .search-container button {
            background-color: #d4d4d4;
            color: rgb(45, 45, 45);
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .search-container button:hover {
            background-color: #d3e8ff;
            transform: translateY(-2px);
        }

        .hanafuda-gallery-container {
            max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
    overflow-x: hidden; /* 横スクロールを防ぐ */
}

        .hanafuda-gallery-grid {
            display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    /* 右端に余白が生じないよう調整 */
    margin-right: -15px; /* gap分を相殺 */
}

        .hanafuda-gallery-item {
             flex: 0 0 calc(16.4% - 12px);
    position: relative;
    opacity: 0;
    /* 初期位置を右端に設定（山札の位置） */
    transform: translateX(100vw) translateY(-20px) rotate(5deg) scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
    margin-bottom: 80px;
}

        .hanafuda-gallery-item.animate-in {
            opacity: 1;
    /* 最終位置（通常の位置） */
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
}

        .hanafuda-gallery-item.hidden {
            display: none;
        }

        .hanafuda-card-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 7/12; /* 花札の縦横比 */
            perspective: 1000px;
            cursor: pointer;
        }

        .hanafuda-card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.8s ease-in-out;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .hanafuda-card.flipped {
            transform: rotateY(180deg);
        }

        .hanafuda-card-front,
        .hanafuda-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 8px;
            border: 7px solid #8B4513;
            background: linear-gradient(135deg, #F5DEB3, #DEB887);
            overflow: hidden;
        }

        .hanafuda-card-front {
            transform: rotateY(180deg);
        }

        .hanafuda-card-back {
            background: linear-gradient(135deg, #8B0000, #A52A2A);
            display: flex;
            align-items: center;
            justify-content: center;
        }

       .hanafuda-card-back {
    background-image: url('hanafudaback.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #8B4513;
    overflow: hidden;
}

.hanafuda-card-back::before {
    display: none;  /* 「花」の文字を非表示 */
}

        .hanafuda-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
            transform: scale(1.9);
        }

        .hanafuda-card-wrapper:hover .hanafuda-image {
            transform: scale(1.5);
        }

        .hanafuda-card-wrapper:hover .hanafuda-card {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .hanafuda-item-info {
            position: absolute;
            bottom: -90px;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            padding: 5px;
            border-radius: 0 0 8px 8px;
            font-size: 0.9em;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .hanafuda-item-info p {
            margin: 2px 0;
            line-height: 1.2;
        }

        .hanafuda-item-info p:first-child {
            
            color: #424242;
            font-size: 0.9em;
        }

        .hanafuda-item-info p:nth-child(2) {
            
            color: #333;
        }

        .hanafuda-item-info p:last-child {
            color: #343434;
            
        }

        /* Lightbox スタイル */
        .hanafuda-lightbox-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            cursor: pointer;
        }

        .hanafuda-lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            cursor: default;
        }

        .hanafuda-lightbox-image {
            width: 100%;
            height: auto;
            display: block;
            max-height: 70vh;
        }

        .hanafuda-lightbox-info {
            padding: 20px;
            background: white;
        }

        .hanafuda-lightbox-title {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .hanafuda-lightbox-description {
            color: #3a3a3a;
            line-height: 1.6;
        }

        .hanafuda-lightbox-close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 30px;
            color: white;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.5);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;
        }

        .hanafuda-lightbox-close:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        /* スマートフォン対応 */
        @media (max-width: 768px) {
            .hanafuda-gallery-item {
                flex: 0 0 calc(33.3% - 7.5px); /* 2列表示用 */
            }
            
            .hanafuda-gallery-grid {
                gap: 5px;
            }
            
            .hanafuda-card-back::before {
                font-size: 1.5em;
            }

            .hanafuda-item-info {
        bottom: -70px;
        font-size: 0.8em; /* さらに小さく */
        padding: 3px; /* パディングも調整 */
    }
    
    /* カード情報のフォントサイズをより細かく調整 */
    .hanafuda-item-info p:first-child {
        font-size: 0.8em; /* 最初の行（月名など）*/
    }
    
    .hanafuda-item-info p:nth-child(2) {
        font-size: 0.9em; /* 2番目の行（カード名）*/
    }
    
    .hanafuda-item-info p:last-child {
        font-size: 0.7em; /* 最後の行（説明文）*/
    }
        }

        /* 検索結果なしのメッセージ */
        .no-results {
            text-align: center;
            padding: 40px;
            color: #333333;
            font-size: 1.2em;
            display: none;
        }

        /* カードが重なって見えるような初期効果 */
.hanafuda-gallery-item {
    /* 上記に加えて */
    z-index: 1;
}

.hanafuda-gallery-item.animate-in {
    /* アニメーション中のz-indexを調整 */
    z-index: calc(100 - var(--index));
}