/* ============================================================================================
	FEATURED STRENGTH / PATTERN
============================================================================================ */
.matsunaga-strength {
	position: relative
}
.matsunaga-strength-inner {
	flex-flow: column
}
.matsunaga-strength-left {
	width: 90%;
	padding: 0 6%
}
.matsunaga-strength-catch {
	font-size: clamp(22px, 4vw, 38px);
	animation-delay: .2s
}
.matsunaga-strength-desc {
	animation-delay: .4s
}
.matsunaga-strength-right {
	width: 100%;
	margin-top: 50px !important
}
.matsunaga-strength-right-top,
.matsunaga-strength-right-bottom {
	position: relative;
	flex-flow: column;
	gap: 30px 0 !important;
	max-width: 400px;
	margin: 0 auto
}
.matsunaga-strength-right-bottom .matsunaga-strength-right-item {
	flex-direction: row-reverse
}
.matsunaga-strength-right-item-image {
	width: 30%
}
.matsunaga-strength-right-item-content {
	flex: 1;
	min-width: 0
}

.matsunaga-strength-right-top::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 15%;
	z-index: -1;
	width: 1px;
	height: 100%;
	background: var(--wp--preset--color--accent)
}

.matsunaga-strength-right-bottom::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 15%;
	z-index: -1;
	width: 1px;
	height: 100%;
	background: var(--wp--preset--color--accent)
}

.matsunaga-strength-right-middle {
	position: relative;
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 60%;
	max-width: 240px;
	aspect-ratio: 1;
	margin: 0 auto;
	padding: 4%;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--accent);
	background: white
}
.matsunaga-strength-right-middle::before {
	content: "";
	display: block;
	position: absolute;
	top: -50%;
	z-index: -1;
	width: 1px;
	height: 200%;
	background: var(--wp--preset--color--accent);
	transform: rotate(-40deg);
}

.matsunaga-strength-text-image {
	width: 80%;
	max-width: 400px
}

.matsunaga-strength-buttons {
	margin-left: -4px !important
}

@media screen and (min-width: 821px) {
	.matsunaga-strength-right {
		margin-top: 80px !important
	}
	.matsunaga-strength-right-middle::before {
		top: -40%;
		background: rgb(6,102,199,.3);
		transform: rotate(-70deg)
	}
	.matsunaga-strength-right-middle::after {
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
		top: -41%;
		width: 1px;
		height: 200%;
		background: rgb(6,102,199,.3);
		transform: rotate(50deg);
	}
	.matsunaga-strength-right-top::before {
		top: 29%;
        left: 42%;
        width: 1px;
        height: 438%;
        background: rgb(6, 102, 199, .3);
        transform: rotate(-14deg);
	}
	.matsunaga-strength-right-bottom::before {
		content: none
	}
	.matsunaga-strength-right-top,
	.matsunaga-strength-right-bottom {
		position: relative;
		width: 50%;
		height: 100px;
		max-width: 240px;
		margin: 0 auto
	}
	.matsunaga-strength-right-item {
		position: absolute;
		z-index: 1;
		width: 100%;
	}
	.matsunaga-strength-right-top .matsunaga-strength-right-item:first-of-type {
		flex-direction: row-reverse;
		top: 125%;
        left: -111%;
		text-align: right
	}
	.matsunaga-strength-right-top .matsunaga-strength-right-item:nth-of-type(2) {
		top: -30%;
        left: 0%;
	}
	.matsunaga-strength-right-top .matsunaga-strength-right-item:nth-of-type(3) {
		top: 47%;
        left: 98%;
	}
	.matsunaga-strength-right-middle {
		outline: 1px solid rgb(6,102,199,.3);
		outline-offset: 80px
	}
	.matsunaga-strength-right-item-image {
		width: 44%
	}
	.matsunaga-strength-right-bottom .matsunaga-strength-right-item:first-of-type {
		top: -34%;
        left: -93%;
		text-align: right
	}
	.matsunaga-strength-right-bottom .matsunaga-strength-right-item:nth-of-type(2) {
		flex-direction: row;
		top: 21%;
        left: 35%;
	}
	.matsunaga-strength-right-bottom .matsunaga-strength-right-item:nth-of-type(3) {
		flex-direction: row;
		top: -102%;
        left: 105%;
	}
	.matsunaga-strength::after {
		content: "";
		display: block;
		width: 80%;
		max-width: 400px;
		aspect-ratio: 1774/887
	}
	.matsunaga-strength-text-image {
		position: absolute;
		bottom: var(--wp--preset--spacing--xx-large);
		right: 2%
	}
}

@media screen and (min-width: 1231px) {
	.matsunaga-strength-right {
		margin-top: 0 !important
	}
	.matsunaga-strength-inner,
	.matsunaga-strength-right-top,
	.matsunaga-strength-right-bottom {
		flex-flow: row nowrap
	}
	.matsunaga-strength-left {
		width: 35%;
		max-width: 370px;
		padding: 0
	}
	.matsunaga-strength-right {
		flex: 1;
		min-width: 0;
		padding-left: 10%
	}
}
@media screen and (min-width: 1320px) {
	.matsunaga-strength-right-top,
	.matsunaga-strength-right-middle,
	.matsunaga-strength-right-bottom {
		max-width: 280px
	}
}