/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 21 2026 | 14:20:16 */
/* ここ/* --- 3列表示専用：カード表示型ブロック (ban-card-3col) --- */

/* 1. リスト全体のグリッド設定 */
.card-block.ban-card-3col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
	align-items: start !important;
    gap: 30px 20px !important; /* カード間の隙間 */
    list-style: none !important;
	list-style-type: none !important;
    padding: 20px 0 !important;
    margin: 40px auto !important;
    width: 100% !important;
    max-width: 1200px !important; /* サイトのメインコンテンツ幅 */
}

/* 2. カード本体：浮遊感の演出 */
.ban-card-3col li {
    padding: 0 !important; 
    margin: 0 !important;
	margin-top: 0 !important;
	top: 0 !important;
	list-style-type: none !important;
    position: relative !important; /* 全体リンクの基準 */
    display: flex !important;
    flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    /* 浮いているように見せる影の設定 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid rgba(0,0,0,0.05) !important; /* 非常に薄い枠線で輪郭を強調 */
}
.ban-card-3col li::before {
    content: none !important;
    display: none !important;
}

/* ホバー時にさらに浮き上がる */
.ban-card-3col li:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
}

/* カード全体をリンク化 */
.ban-card-3col li a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
}

/* 3. 画像エリア */
.ban-card-3col .card-block__featured-image {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;	
	aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.ban-card-3col .card-block__featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 4. タイトル：カードの真ん中に表示 */
.ban-card-3col .card-block__post-title {
    width: 100% !important;
	box-sizing: border-box !important;
	display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-grow: 1 !important; /* 下部の余白をすべてタイトルの領域にする */
    padding: 20px 15px !important;
    min-height: 80px !important; /* 高さを揃えて中央寄せを安定させる */
    margin: 0 !important;
    color: #333 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    text-decoration: none !important;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 1024px) {
    .card-block.ban-card-3col {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 20px !important;
    }
}

@media (max-width: 600px) {
    .card-block.ban-card-3col {
        grid-template-columns: 1fr !important;
    }
}