

.containar-4 {
    background-image: url('/contents/arabesque@4x.png'); /* タイルとして使いたい画像 */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto; /* 横幅いっぱいに表示 */


}


.gallery-warpper2 {
    max-width: 1100px;
    margin: 0 auto;
   
}


.gallery-select-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
    gap: 10px; /* 画像の間隔 */
    text-align: center; /* テキストを中央寄せ */
    max-width: 800px;
    margin: auto;
    padding-top: 80px;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* 画像とテキストの間隔を狭める */
}

.gallery-item p {
    margin-top: -15px; /* 画像との余白をさらに縮める */
    margin-bottom: 30px;
    padding: 3px 8px; /* 余白を微調整 */
    font-size: 1em;
    color: #ddc79b; 
    text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
    transform: scaleX(0.8);
}





.gallery-item img {
    width: 100%;
    max-width: 300px;
    transition: transform 0.1s ease-in-out;
    filter: drop-shadow(25px 25px 3px rgba(0, 0, 0, 0.5)); /* PNGの形に影をつける */
    

}

/* ホバー時のブルブル振動エフェクト */
.gallery-item img:hover {
    animation: shake-rotate 2s infinite alternate;
}

@keyframes shake-rotate {
    0% { transform: translateX(-3px) rotate(-3deg); }
    10% { transform: translateX(3px) rotate(3deg); }
    20% { transform: translateX(-2px) rotate(-2deg); }
    30% { transform: translateX(2px) rotate(2deg); }
    40% { transform: none; } /* 一瞬止まる */
    50% { transform: none; } /* 長めに停止 */
    60% { transform: translateX(-3px) rotate(-3deg); } /* ここからまた震える */
    70% { transform: translateX(3px) rotate(3deg); }
    80% { transform: translateX(-2px) rotate(-2deg); }
    90% { transform: translateX(2px) rotate(2deg); }
    100% { transform: none; } /* また止まる */
}






.boundary img {
    width: 100%;
    margin-bottom: 50px;
    margin-top: 50px;
}



.text-gallery {
    color: #ddc79b; 
    width: 80%;
    margin: 0 auto;
    padding: 30px 50px;
    background-color: rgba(13, 15, 18, 0.5);
    position: relative; /* 擬似要素のために必要 */
}

.space{
    height: 100px;
}



