/* ============================================================================================
	FEATURED FRONT SECTION 2 / PATTERN
============================================================================================ */
.resola-front-section-2 {
	position: relative;
	z-index: 1
}
.resola-front-section-image-2 {
	position: relative;
	z-index: 1;
	width: 80%
}
.resola-front-section-sentence-title-2,
.resola-front-section-sentence-desc-2 {
	max-width: 700px
}
.resola-front-section-image-2:first-of-type {
	margin: -5em 0 0
}
.resola-front-section-image-2:nth-of-type(2) {
	margin: -2em 0 0 auto
}
.resola-front-section-sentence-2 {
	position: relative
}
@keyframes circleTurn2{from{opacity:.1;transform:rotate(90deg)}to{opacity:.6;transform:rotate(0deg)}}
.resola-link-spa {
	opacity: .6;
	position: absolute;
	z-index: 3;
	top: calc(100% - 9em);
	right: 2%;
	width: 40vw;
	max-width: 180px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: rgba(255,255,255,.6);
	transform-origin: center;
	animation: circleTurn2 linear both;
	animation-timeline: view();
	animation-range: entry 0% cover 60%;
}
@media screen and (min-width: 768px) {
	.resola-front-section-2 {
		display: flex;
		align-items: flex-start
	}
	.resola-front-section-image-main {
		width: 50%
	}
	.resola-front-section-image-main img {
		width: 100% !important;
	}
	.resola-front-section-2-content {
		position: relative;
		z-index: 1;
		width: 60%;
		margin: 5% 0 0 -10% !important
	}
	.resola-front-section-image-container-2 {
		display: flex;
		gap: 0 4%;
		position: relative;
		z-index: 1;
		width: 80%;
		margin: 0 auto !important
	}
	.resola-front-section-image-2 {
		opacity: 0;
		flex: 1;
		min-width: 0;
		transform: translateY(50%);
		transition: 1.2s
	}
	.resola-front-section-image-2:first-of-type {
		margin: -4em 0 0 !important;
		transition-delay: .3s
	}
	.resola-front-section-image-2:nth-of-type(2) {
		margin: -8em 0 0;
		transition-delay: .6s
	}
	.observe_is_active .resola-front-section-image-2 {
		opacity: 1;
		transform: translateY(0)
	}
	.resola-link-spa {
		top: -6em;
		right: 14vw
	}
}

.resola-front-section-2 {
    position: relative
}
.resola-front-section-2::before {
    content: "Re'sola Mihama";
    display: block;
    position: absolute;
    top: -15%;
    left: 0;
	z-index: -1;
	width: 100%;
    color: rgb(240,240,240);
    font: clamp(78px, 23vw, 180px)/1 var(--wp--preset--font-family--mincho);
	text-align: right
}