.article-card * {
	transition: all var(--transition-time) var(--transition-easing)
}

[data-type=horizontal] .article-card__card, [data-type=horizontal_pickup] .article-card__card {
	display: none
}

@media screen and (max-width: 959px) {
	[data-type=horizontal_pickup] .article-card__card {
		display: block
	}
}

@media screen and (min-width: 960px) {
	[data-type=sp_horizontal] .article-card__card {
		display: block
	}
}

@media screen and (max-width: 959px) {
	[data-type=sp_horizontal] .article-card__card {
		display: none
	}
}

[data-type=card] .article-card__horizontal {
	display: none
}

@media screen and (max-width: 959px) {
	[data-type=horizontal_pickup] .article-card__horizontal {
		display: none
	}
}

@media screen and (min-width: 960px) {
	[data-type=sp_horizontal] .article-card__horizontal {
		display: none
	}
}

@media screen and (max-width: 959px) {
	[data-type=sp_horizontal] .article-card__horizontal {
		display: block
	}
}

.article-card {
	width: 100%;
	display: block;
	position: relative
}

.article-card a {
	display: block
}

.article-card a.article-card__comingsoon {
	pointer-events: none
}

.article-card .article-card__horizontal-inner {
	display: flex;
	gap: 28px
}

@media screen and (max-width: 959px) {
	.article-card .article-card__horizontal-inner {
		gap: 16px
	}
}

.article-card[data-type=horizontal_pickup] .article-card__horizontal-inner {
	align-items: center
}

.article-card__card .article-card__image {
	width: 100%;
	margin: 0 0 20px
}

@media screen and (max-width: 959px) {
	.article-card__card .article-card__image {
		margin: 0 0 16px
	}
}

.article-card__card .article-card__image img {
	width: 100%
}

.article-card__horizontal .article-card__image {
	width: 16.6666666667vw;
	max-width: 240px
}

@media screen and (max-width: 959px) {
	.article-card__horizontal .article-card__image {
		width: 28.8vw;
		max-width: 108px
	}
}

.article-card__horizontal .article-card__image img {
	width: 100%
}

[data-type=horizontal_pickup] .article-card__horizontal .article-card__image {
	width: 33.3333333333vw;
	max-width: 480px
}

@media screen and (max-width: 959px) {
	[data-type=horizontal_pickup] .article-card__horizontal .article-card__image {
		width: 28.8vw;
		max-width: 108px
	}
}

[data-type=horizontal_pickup] .article-card__horizontal .article-card__image img {
	width: 100%
}

.article-card__balloon span, .article-card__balloon-sp span {
	font-size: 16px;
	font-size: min(100 / 1440 * 16 * 1vw, 16px);
	font-family: Noto Sans JP, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Meiryo, メイリオ, Osaka, MS PGothic, arial, helvetica, sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	position: relative;
	letter-spacing: .8px;
	padding: 6px 20px 7px;
	color: var(--color_white);
	background: var(--color_primary);
	border-radius: 100vmax;
	margin: 0 0 13px;
	display: inline-block
}

@media screen and (max-width: 959px) {
	.article-card__balloon span, .article-card__balloon-sp span {
		padding: 3px 12px 5px;
		font-size: 14px;
		font-size: min(3.7333333333vw, 14px)
	}
}

.article-card__balloon span:after, .article-card__balloon-sp span:after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 40px;
	width: 25px;
	height: 5px;
	background-image: url(../img/common/balloon.svg);
	background-size: 100% auto;
	background-position: 0 0;
	background-repeat: no-repeat
}

@media screen and (max-width: 959px) {
	.article-card__balloon span:after, .article-card__balloon-sp span:after {
		left: 31px
	}
}

@media screen and (max-width: 959px) {
	.article-card__card .article-card__balloon span, .article-card__card .article-card__balloon-sp span {
		font-size: 14px;
		font-size: min(3.7333333333vw, 14px)
	}
}

@media screen and (max-width: 959px) {
	.article-card__horizontal .article-card__balloon span, .article-card__horizontal .article-card__balloon-sp span {
		font-size: 11px;
		font-size: min(2.9333333333vw, 11px);
		margin: 0 0 9px
	}
}

@media screen and (max-width: 959px) {
	.article-card__horizontal .article-card__balloon span:after, .article-card__horizontal .article-card__balloon-sp span:after {
		left: 20px
	}
}

@media screen and (max-width: 959px) {
	[data-type=horizontal_pickup] .article-card__balloon, [data-type=horizontal_pickup] .article-card__balloon-sp {
		display: none
	}
}

.article-card__balloon-sp {
	display: none
}

@media screen and (max-width: 959px) {
	[data-type=horizontal_pickup] .article-card__balloon-sp {
		display: block
	}
}

.article-card__title {
	font-size: 16px;
	font-size: min(100 / 1440 * 16 * 1vw, 16px);
	font-family: Noto Sans JP, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Meiryo, メイリオ, Osaka, MS PGothic, arial, helvetica, sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: .8px;
	min-height: 48px;
	margin: 0 0 16px
}

@media screen and (max-width: 959px) {
	.article-card__title {
		margin-bottom: 26px
	}
}

[is-hover=true] .article-card__title {
	color: var(--color_primary)
}

@media screen and (max-width: 959px) {
	.article-card__card .article-card__title {
		font-size: 16px;
		font-size: min(4.2666666667vw, 16px)
	}
}

@media screen and (max-width: 959px) {
	.article-card__horizontal .article-card__title {
		font-size: 14px;
		font-size: min(3.7333333333vw, 14px);
		height: 42px
	}
}

[data-type=horizontal_pickup] .article-card__horizontal .article-card__title {
	font-size: 28px;
	font-size: min(100 / 1440 * 28 * 1vw, 28px)
}

@media screen and (max-width: 959px) {
	[data-type=horizontal_pickup] .article-card__horizontal .article-card__title {
		font-size: 14px;
		font-size: min(3.7333333333vw, 14px);
		height: 42px
	}
}

.article-card__tags {
	font-size: 11px;
	font-size: min(100 / 1440 * 11 * 1vw, 11px);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	letter-spacing: .55px;
	position: relative;
	z-index: 2
}

@media screen and (max-width: 959px) {
	.article-card__tags {
		font-size: 10px;
		font-size: min(2.6666666667vw, 10px)
	}
}

.article-card__tags li a {
	display: block;
	color: var(--color_primary);
	line-height: 1;
	padding: 6px 8px;
	border: 1px solid var(--color_secondary);
	border-radius: 12px;
	background: var(--color_white)
}

.article-card__tags li a:before {
	content: "#"
}

.article-card__tags li a:hover {
	border-color: var(--color_primary)
}

.article-card__horizontal .article-card__body {
	flex: 1
}

.article-card__pc {
	display: block
}

@media screen and (max-width: 959px) {
	.article-card__pc {
		display: none !important
	}
}

.article-card__sp {
	display: none
}

@media screen and (max-width: 959px) {
	.article-card__sp {
		display: block
	}
}