/* ============================================================================================
	FEATURED ONE STOP / PATTERN
============================================================================================ */
.matsunaga-one-stop-inner {
	flex-flow: column;
	gap: 100px 6% !important
}
.matsunaga-one-stop-heading {
	font-size: clamp(20px, 4vw, 32px)
}
.matsunaga-one-stop-content {
	width: 100%;
	gap: 1em
}
.matsunaga-circle-and-catch {
	flex-flow: column;
	gap: 3em 8%
}

/* one stop */
.matsunaga-one-stop-circle {
	position: relative;
	z-index: 1;
	gap: .5em;
	aspect-ratio: 1;
	padding: .5em 2em;
	border-radius: 50%
}
.matsunaga-one-stop-circle::before {
	content: "";
	position: absolute;
	top: -15px;
	left: -15px;
	z-index: -1;
	display: block;
	width: calc(100% + 30px);
	height: calc(100% + 30px);
	border-radius: 50%;
	background: rgba(255,255,255,.6)
}
.matsunaga-one-stop-circle::after {
	content: "";
	display: block;
	position: absolute;
	top: -45px;
	left: 50%;
	z-index: 1;
	width: calc(calc(100% + 30px + 60px) / 2);
	height: calc(100% + 30px + 60px);
	border-radius: 0 100% 100% 0% / 50%;
	border: 4px solid white;
	border-left: 0
}
.matsunaga-one-stop-content-item-icon {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: linear-gradient(0deg, #c7d0db, white);
	color: var(--wp--preset--color--base)
}
.matsunaga-one-stop-content-item-icon-image {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center
}

.matsunaga-one-stop-content-item-inner {
	padding: 6px 3em 6px 6px;
	border-radius: 999px;
	background: rgba(0,0,0,.4)
}

@media screen and (min-width: 640px) {
	.matsunaga-one-stop-inner {
		gap: 30px 6% !important
	}
	.matsunaga-circle-and-catch {
		flex-flow: row nowrap;
		gap: 0 !important;
		margin: 0 auto !important
	}
	.matsunaga-one-stop {
		flex-flow: row nowrap;
		gap: 0;
		width: initial
	}
}
@media screen and (min-width: 960px) {
	.matsunaga-one-stop-inner {
		flex-flow: row nowrap
	}
	.matsunaga-circle-and-catch {
		flex-shrink: 0
	}
}

/* point and line */
.matsunaga-one-stop-content-item {
	position: relative;
	width: 100%;
	font-size: 16px
}
@media screen and (min-width: 640px) {
	.matsunaga-one-stop-content,
	.matsunaga-one-stop-content-item {
		width: initial
	}
	.matsunaga-one-stop-content-item:first-of-type::before {
		content: "";
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100px;
		height: 2px;
		background: white;
		transform: rotate(-58deg) translate(0, -4em);
		transform-origin: right top;
	}
	.matsunaga-one-stop-content-item:nth-of-type(2) {
		margin-left: 6em !important
	}
	.matsunaga-one-stop-content-item:nth-of-type(2)::before {
		content: "";
		display: block;
		position: absolute;
		top: 132%;
		left: -6em;
		width: 120px;
		height: 2px;
		background: white;
		transform: rotate(-27deg) translate(3.2em, -4em);
		transform-origin: right top;
	}
	.matsunaga-one-stop-content-item:nth-of-type(3) {
		margin-left: 8em !important
	}
	.matsunaga-one-stop-content-item:nth-of-type(3)::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: calc(100% - 10px);
		width: 6em;
		height: 2px;
		background: white;
	}
	.matsunaga-one-stop-content-item:nth-of-type(4) {
		margin-left: 6em !important
	}
	.matsunaga-one-stop-content-item:nth-of-type(4)::before {
		content: "";
		display: block;
		position: absolute;
		top: 132%;
		left: -6.5em;
		width: 120px;
		height: 2px;
		background: white;
		transform: rotate(27deg) translate(0, -4em);
		transform-origin: right top;
	}
	.matsunaga-one-stop-content-item:nth-of-type(5)::before {
		content: "";
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100px;
		height: 2px;
		background: white;
		transform: rotate(58deg) translate(-4em, 2em);
		transform-origin: right top;
	}
}

/* catch list */
.matsunaga-one-stop-catch-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 0
}
.matsunaga-one-stop-catch-list li {
	padding: .5em 2em;
	border-radius: 999px;
	background: white;
	color: var(--wp--preset--color--contrast);
	text-align: center
}

/* animation */
.matsunaga-one-stop-catch-list.observe li {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity .8s, transform .6s ease-out;
}
.matsunaga-one-stop-catch-list li:nth-of-type(2) {
	transition-delay: .2s
}
.matsunaga-one-stop-catch-list li:nth-of-type(3) {
	transition-delay: .4s
}
.matsunaga-one-stop-catch-list li:nth-of-type(4) {
	transition-delay: .6s
}
.matsunaga-one-stop-catch-list li:nth-of-type(5) {
	transition-delay: .8s
}
.matsunaga-one-stop-catch-list li:nth-of-type(6) {
	transition-delay: 1s
}
.matsunaga-one-stop-catch-list.observe_is_active li {
	opacity: 1;
	transform: translateX(0)
}