@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

<style>
/* カード型のグリッドレイアウト */
.my-custom-posts-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.my-custom-posts-grid .my-custom-post-item {
    box-sizing: border-box;
    padding: 10px;
    flex: 0 0 50%;
    max-width: 50%;
    width: auto; /* 追加 */
    min-width: 0; /* 追加 */
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.post-title {
    font-size: 1.2em;
    margin: 10px 0;
}

.post-content {
    text-align: center;
}

/* 画面幅が768px以上の場合（PC） */
@media screen and (min-width: 768px) {
    .my-custom-posts-grid .my-custom-post-item {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* カード全体をリンクとして扱う */
.my-custom-post-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.my-custom-post-item a:hover {
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.post-thumbnail {
    overflow: hidden;
}

.post-thumbnail img {
    transition: transform 0.3s;
}

.my-custom-post-item a:hover .post-thumbnail img {
    transform: scale(1.05);
}
</style>