@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
*/

/* リスト本体：スマホ1列、PC3列 */
.p-postList.-type-card,
.custom-post-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 0;
	margin: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.p-postList.-type-card,
	.custom-post-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 各投稿アイテム */
.p-postList__item,
.custom-post-item {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

/* リンク全体とホバーの白み演出 */
.p-postList__link,
.custom-post-link {
	position: relative;
	z-index: 0;
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease;
}

/* ホバー白みオーバーレイ */
.p-postList__link::after,
.custom-post-link::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0);
	transition: background-color 0.3s ease;
	border-radius: 8px;
	z-index: 2;
	pointer-events: none;
	box-sizing: border-box;
}

.p-postList__link:hover::after,
.custom-post-link:hover::after {
	background-color: rgba(255, 255, 255, 0.2); /* 控えめな白み */
}

/* サムネイル共通 */
.p-postList__thumb,
.custom-post-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1;
}

/* サムネイル画像 */
.p-postList__thumb img,
.custom-post-thumb img,
.c-postThumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	display: block;
}

/* ズームアニメーション */
.p-postList__link:hover .p-postList__thumb img,
.custom-post-link:hover .custom-post-thumb img {
	transform: scale(1.05);
}

/* タイトル共通 */
.p-postList__title,
.custom-post-title {
	padding: 12px;
	text-align: left;
	font-size: 1rem;
	position: relative;
	background-color: #fff;
	border-radius: 0 0 8px 8px;
	z-index: 1;
}

.custom-post-item.is-current .custom-post-title h2 {
	color: crimson;
}