.main {
    background-image: url("../mania-list/bg.png");
	background-repeat: no-repeat;
	background-position: top center;
	background-size:cover;
	background-color: #E4F2FE;
}

/* タイトル */
.title_img {
	max-width: 893px;
	padding: 116px 32px;
	margin: 0 auto;
}
.title_img img {
	width: 100%;
}

/* 記事一覧 */
.card_wrapper {
	max-width: 900px;
	margin: 80px auto 30px;
	padding: 32px;
	display: grid;
	gap: 40px;
}
.card {
	display: grid;
	grid-template-columns: auto auto;
	gap: 40px;
	align-items: center;
	justify-content: flex-start;
}
.card:hover {
	opacity: .7;
}
.card_img {
	width: 240px;
	height: 240px;
}
.card_title {
	color: #2648A4;
	margin: 0 0 16px;
	font-size: 28px;
}
.card_sub_title {
	margin: 16px 0 8px;
	font-weight: 700;
}
.card_text {
	margin: 8px 0;
}
.card_date {
	margin-top: 16px;
}

.pankuzu_block {
    display: block;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
}
.pankuzu {
    display: block;
    max-width: 930px;
    margin: 0 auto;
    font-size: 13px;
}
.pankuzu a {
    text-decoration: none;
    position: relative;
    display: inline-block;
    margin-right: 30px;
    color: #333;
}
.pankuzu a::before {
    content: ">";
    position: absolute;
    right: -20px;
    top: 0;
}
.pankuzu a:last-child {
    margin-right: 0;
}
.pankuzu a:last-child::before {
    content: "";
}

@media screen and (max-width: 960px) {
	.main {
		background-image: url("../mania-list/bg_sp.png");
		background-repeat: no-repeat;
		background-position: top center;
		background-size:cover;
		background-color: #E4F2FE;
	}

	.title_img {
		padding: 27px 32px;
	}

	.card_wrapper {
		margin: 30px auto;
	}
	.card {
	  grid-template-columns: auto;
	}
	.card_img {
	  width: 180px;
	  height: 180px;
	  margin: auto;
	}
	.card_sub_title {
	  color: #3897F8;
	}

	.pankuzu_block {
        padding-top: 5px;
    }
    .pankuzu {
        font-size: 12px;
        margin: 0 10px;
    }
    .pankuzu a {
        margin-right: 20px;
    }
	.pankuzu a::before {
        right: -18px;
    }
}