.main-visual {
        position: relative;
        width: 100%;
        overflow: hidden; 
    }
    .mv-inner {
        position: relative;
    }
    .mv-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20; 
        object-fit: cover;
        --target-x: 0px;
        --target-y: 0px;
        animation: shrinkIntoButton 3s cubic-bezier(0.22, 1, 0.36, 1) 3s forwards;
        transform-origin: center center; 
        background: #fff;
    }

    @keyframes shrinkIntoButton {
        0% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
        }
        100% {
            transform: translate(var(--target-x), var(--target-y)) scale(0.1);
            opacity: 0;
            visibility: hidden; 
            z-index: -1; 
        }
    }

    .coupon_button {
        position: absolute !important;
        right: 20%;
        z-index: 15; 
		width: 15vw;
        height: 15vw;
        border-radius: 50%;
        display: block; 
		bottom: calc( 30% - 1.5vw);
		max-width: 350px;
		max-height: 350px;
    }
	.coupon_button_text{
		position: absolute;
		background: #fc7ba1;
		color: #fff;
		border: solid 2px #fff;
		top: -20px;
		left: calc(-75px + 5vw);
		width: clamp(200px, 25vw, 280px);
		border-radius: 30px;
		padding: 5px 10px;
		font-size: clamp(14px, 2vw, 20px);
		z-index: 10;
		font-weight: bold;
	}
	.coupon_button:hover .coupon_button_text{
		background: #ff4d6d;
	}
    .coupon_button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 10;
		background: rgb(70 233 71 / 40%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none; 
    }
    .coupon_button:hover::before {
        opacity: 1;
    }
	.coupon_button_text::after{
		display: block;
		content: "";
		position: absolute;
		background-image: url(../../images/btn_arrow.png);
		background-size: 26px auto;
		background-position: 0 0;
		background-repeat: no-repeat;
		width: 26px;
		height: 26px;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		top: 50%;
		right: 5px;
	}

    .coupon_button img {
        z-index: 5;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }
	.fc-hero-title_top{
	font-size: clamp(16px, 3vw, 40px);	
	}
	.fc-hero-title{
		font-size: clamp(14px, 3vw, 28px);
	}
	.fc-hero-title::before {
		height: clamp(14px, 4vw, 40px);
		width: clamp(14px, 4vw, 40px);
		left: -35px;
	}

    @media screen and (max-width: 767px) {
		.main-visual .mv-inner p:before{
		background-size: auto;
		left: 0 !important;
		width: 15%;
		}
		.only-pc { display: none; }
        .only-sp { display: block; }
		.coupon_button{
			bottom: 15%;
			width: 20vw;
        	height: 20vw;
		}
		.fc-hero-title_top{
			margin-top: 0;
			margin-bottom: 0;
		}

		.fc-hero-title::before {
			left: -4vw;
		}
    }
	@media screen and (max-width: 550px) {
		.coupon_button_text{
			font-size: 11px;
			width: 155px;
			left: -50px;
		}
	}
    .only-pc { display: block; }
    .only-sp { display: none; }
	.btn-cont{ margin-top: 35px; }

.lp-btn{
	animation: fadeIn 2.5s ease 3.5s forwards;
}
.main-visual .mv-inner p.active:before {
	animation: catchSlide_pc 2s ease 3.5s forwards;
}
.fc-hero-inner{
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
}
.fc-hero-main{
	/* width: 44vw; */
	width: 50vw;
    height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: center;
}
.img_container{
	width: 40vw;
}
.main-visual .mv-inner p:before {
        padding: 10px;
        font-size: 30px;
        left: -50%;
        width: 33%;
        height: 15%;
		background-size: cover;
		left: 16.1% ;
		width: 20%;
    }


@media screen and (min-width: 768px) and (max-width: 1060px) {
    .main-visual .mv-inner p.active:before {
        animation: catchSlide_sp 6s ease 3.3s forwards;
    }
	.main-visual .mv-inner p:before { left: 0% ; }
}

@media screen and (min-width: 400px) and (max-width: 1060px) {
    .main-visual .mv-inner p.active:before {
        width:42%;
		height: 10%;
    }
}
@media screen and (max-width: 767px) {
    .main-visual .mv-inner p:before {
        padding: 10px;
        font-size: 30px;
        left: -50%;
        width: 33%;
        height: 14%;		
    }
}

@media screen and (min-width: 450px) and (max-width: 1060px) {
    .main-visual .mv-inner p.active:before {
        width: clamp(35%, 24vw, 28%);
		height: 13%;
    }
}

@media screen and (min-width: 600px) and (max-width: 1060px) {
.main-visual .mv-inner {
    height: 310px;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;

}
    .main-visual .mv-inner img {
        max-width: 100%;
        height: 100%;
        width: auto;
        object-fit: cover;
    }
}