.morphing-heading {
	position: relative;
	z-index: 0
}

.morphing-heading__effect {
	width: 21.25vw;
	max-width: 306px;
	z-index: -1
}

.morphing-heading__effect svg {
	display: nonoe !important;
	opacity: 0;
}

.morphing-heading__heading > img {
	position: absolute;
	/*
	top: 50%;
	left: 29.3235294118%;
	transform: translateY(-50%);
	width: -moz-fit-content;
	width: fit-content;
	height: 52.359223301%;
	max-height: 107.86px;
	*/
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	width: -moz-fit-content;
	width: fit-content;
	height: auto;
	max-height: 206px;
	opacity: 0;
	transition: opacity var(--transition-time) var(--transition-easing);
	-o-object-fit: contain;
	object-fit: contain
}

[data-current-index="0"] .morphing-heading__heading > *:nth-child(1) { opacity: 1 }
[data-current-index="1"] .morphing-heading__heading > *:nth-child(2) { opacity: 1 }
[data-current-index="2"] .morphing-heading__heading > *:nth-child(3) { opacity: 1 }
[data-current-index="3"] .morphing-heading__heading > *:nth-child(4) { opacity: 1 }
[data-current-index="4"] .morphing-heading__heading > *:nth-child(5) { opacity: 1 }
[data-current-index="5"] .morphing-heading__heading > *:nth-child(6) { opacity: 1 }
[data-current-index="6"] .morphing-heading__heading > *:nth-child(7) { opacity: 1 }
[data-current-index="7"] .morphing-heading__heading > *:nth-child(8) { opacity: 1 }
[data-current-index="8"] .morphing-heading__heading > *:nth-child(9) { opacity: 1 }
[data-current-index="9"] .morphing-heading__heading > *:nth-child(10) { opacity: 1 }

.morphing-heading__arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	pointer-events: none;
	transform: translate3d(-50%, -50%, 0);
	margin-top: 4px
}

.morphing-heading__body > * {
	display: none
}

[data-current-index="0"] .morphing-heading__body > *:nth-child(1) { display: block }
[data-current-index="1"] .morphing-heading__body > *:nth-child(2) { display: block }
[data-current-index="2"] .morphing-heading__body > *:nth-child(3) { display: block }
[data-current-index="3"] .morphing-heading__body > *:nth-child(4) { display: block }
[data-current-index="4"] .morphing-heading__body > *:nth-child(5) { display: block }
[data-current-index="5"] .morphing-heading__body > *:nth-child(6) { display: block }
[data-current-index="6"] .morphing-heading__body > *:nth-child(7) { display: block }
[data-current-index="7"] .morphing-heading__body > *:nth-child(8) { display: block }
[data-current-index="8"] .morphing-heading__body > *:nth-child(9) { display: block }
[data-current-index="9"] .morphing-heading__body > *:nth-child(10) { display: block }

.morphing-heading__body .morphing-heading__category {
	position: absolute;
	font-family: Montserrat, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Meiryo, メイリオ, Osaka, MS PGothic, arial, helvetica, sans-serif, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--color_primary);
	font-size: 11px;
	font-size: min(100 / 1440 * 11 * 1vw, 11px);
	left: 0;
	top: 150px;
	transform: rotate(90deg)
}

.morphing-heading__body .morphing-heading__viewmore {
	position: absolute;
	right: 40px;
	bottom: 60px
}

@media screen and (min-width: 960px) {
	.slider-controller {
		display: flex;
		align-items: center;
		gap: 24px;
		position: absolute;
		right: 20px;
		bottom: 0;
		height: 42px
	}

	[swiper-type=top-articles] .slider-controller {
		bottom: 60px
	}
}

@media screen and (max-width: 959px) {
	.slider-controller {
		position: relative;
		width: 53.3333333333vw;
		max-width: 200px;
		margin: 36px auto 0
	}
}

.slider-controller__pagination {
	font-family: Montserrat, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Meiryo, メイリオ, Osaka, MS PGothic, arial, helvetica, sans-serif, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	font-size: min(100 / 1440 * 14 * 1vw, 14px);
	line-height: 16px;
	display: flex;
	gap: 30px
}

@media screen and (max-width: 959px) {
	.slider-controller__pagination {
		font-size: 14px;
		font-size: min(3.7333333333vw, 14px);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0)
	}
}

.slider-controller__current {
	position: relative
}

.slider-controller__current:after {
	content: "";
	position: absolute;
	top: 0;
	right: -15px;
	width: 1px;
	height: 100%;
	background: var(--color_black)
}

.slider-controller__button {
	display: flex
}

@media screen and (min-width: 960px) {
	.slider-controller__button {
		gap: 8px
	}
}

@media screen and (max-width: 959px) {
	.slider-controller__button {
		width: 53.3333333333vw;
		max-width: 200px;
		justify-content: space-between
	}
}

.slider-controller__prev, .slider-controller__next {
	width: 2.9166666667vw;
	max-width: 42px;
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border: 1px solid var(--color_secondary);
	cursor: pointer
}

@media screen and (max-width: 959px) {
	.slider-controller__prev, .slider-controller__next {
		width: 8.5333333333vw;
		max-width: 32px
	}
}

.slider-controller__prev:after, .slider-controller__next:after {
	content: "";
	display: block;
	width: 16px;
	width: 1.1111111111vw;
	max-width: 16px;
	aspect-ratio: 1/1;
	background-image: url(../img/common/icon-arrow_blue.svg);
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0)
}

@media screen and (max-width: 959px) {
	.slider-controller__prev:after, .slider-controller__next:after {
		width: 4.2666666667vw;
		max-width: 16px
	}
}

.slider-controller__prev:hover, .slider-controller__next:hover {
	border: 1px solid var(--color_primary)
}

.slider-controller__next:after {
	transform: translate3d(-50%, -50%, 0) rotate(-180deg)
}

.view-all-link {
	font-family: Montserrat, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Meiryo, メイリオ, Osaka, MS PGothic, arial, helvetica, sans-serif, sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	font-size: min(100 / 1440 * 14 * 1vw, 14px);
	line-height: 1;
	letter-spacing: .7px;
	display: flex;
	gap: 23px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--color_secondary)
}

.view-all-link:hover {
	border-bottom: 1px solid var(--color_primary)
}

@media screen and (max-width: 959px) {
	.view-all-link {
		font-size: 14px;
		font-size: min(3.7333333333vw, 14px)
	}
}

.view-all-link:after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(../img/common/icon-arrow_blue.svg);
	background-size: 100% auto;
	background-position: 0 0;
	background-repeat: no-repeat;
	transform: rotate(-180deg)
}