@charset "UTF-8";
  /* レイアウト用の基本スタイル（サイトの雰囲気を再現） */
        body {
            background-color: #f4f4f4;
            margin: 0;
            padding: 50px;
            font-family: sans-serif;
        }

        .works_list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 【重要】アニメーションの初期状態 
        */
        .works_item {
            background: #fff;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            
            /* 初期状態：透明で下に沈ませる */
            opacity: 0;
            transform: translateY(40px) scale(0.95);
            /* 動きの質感：cubic-bezierで高級感を出す */
            transition: 
                opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), 
                transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
            
            will-change: opacity, transform;
        }

        .works_item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .works_item .text {
            padding: 15px;
            font-size: 14px;
            color: #333;
            text-align: center;
        }

        /* 【重要】表示された時の状態 
        */
        .works_item.is-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }


/*追加*/
/* 1. 初期状態：レイアウトは維持しつつ、透明にして下にずらす */
.works_item {
    opacity: 0 !important;
    transform: translateY(50px) scale(0.9) !important;
    /* 動きの滑らかさ設定 */
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform;
}

/* 2. 出現状態：このクラスがつくと表示される */
.works_item.is-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}