@charset "utf-8";
/**
/* 追加CSS（既存の style.css / design.css には手を加えず、
/* index_test_20260709.html のみが読み込む新規ファイルとして管理）
----------------------------------------------- */

/*　　50万円以下の審査通過率99.8% バッジ（PC：FV右側）　　*/
.fv-badge{
	display: none;
}
.fv-lead-coin{
	display: none;
}
@media only screen and (min-width: 768px){
	.fv-badge{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 8rem;
		right: -1rem;
		width: 11rem;
		height: 11rem;
		background: #F2FC00;
		clip-path: polygon(50.00% 0.00%, 58.58% 6.85%, 69.13% 3.81%, 74.45% 13.42%, 85.36% 14.64%, 86.58% 25.55%, 96.19% 30.87%, 93.15% 41.42%, 100.00% 50.00%, 93.15% 58.58%, 96.19% 69.13%, 86.58% 74.45%, 85.36% 85.36%, 74.45% 86.58%, 69.13% 96.19%, 58.58% 93.15%, 50.00% 100.00%, 41.42% 93.15%, 30.87% 96.19%, 25.55% 86.58%, 14.64% 85.36%, 13.42% 74.45%, 3.81% 69.13%, 6.85% 58.58%, 0.00% 50.00%, 6.85% 41.42%, 3.81% 30.87%, 13.42% 25.55%, 14.64% 14.64%, 25.55% 13.42%, 30.87% 3.81%, 41.42% 6.85%);
		box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
		text-align: center;
		line-height: 1.25;
		z-index: 2;
		transform: rotate(3deg);
	}
	.fv-badge p{
		position: relative;
		color: #1A1A1A;
	}
	.fv-lead-coin{
		display: block;
		position: absolute;
		top: 4.5rem;
		right: 0.5rem;
		width: 3.25rem;
		height: 3.25rem;
		z-index: 1;
		transform: rotate(3deg);
	}
	.fv-badge .small{
		font-size: 0.8125rem;
		font-weight: 700;
	}
	.fv-badge .main{
		font-size: 0.9375rem;
		font-weight: 700;
	}
	.fv-badge .rate{
		font-family: "Poppins", sans-serif;
		font-size: 3rem;
		font-weight: 700;
		line-height: 1.2;
	}
	.fv-badge .rate span{
		font-size: 1.5rem;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.fv-badge{
		width: 9.5rem;
		height: 9.5rem;
		top: 6rem;
		right: -0.5rem;
	}
	.fv-badge .rate{
		font-size: 2.25rem;
	}
	.fv-badge .rate span{
		font-size: 1.125rem;
	}
	.fv-lead-coin{
		top: 3.25rem;
		right: 0.25rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}

/*　　既存マスコット（icon1.png）に元々コインが描かれているため、
/*　　左移動後に重複して見える単独コイン装飾（bg-text::before）はPCで非表示　　*/
@media only screen and (min-width: 768px){
	.fv-view .bg-text::before{
		content: none;
	}
}

/*　　既存の人形イラストをFV右→左へ移動（PCのみ）　　*/
/*　　背景の斜め模様とコインアイコンの色が重なって見づらいため、白いドロップシャドウで浮き上がらせる　　*/
@media only screen and (min-width: 768px){
	.fv-view .bg-text::after{
		right: auto;
		left: -1.5rem;
		filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
	}
}
@media only screen and (min-width: 768px) and (max-width: 1200px){
	.fv-view .bg-text::after{
		left: -5.5rem;
	}
}

/*　　50万円以下の審査通過率99.8% リボン（SP：固定フッター上部）　　*/
.sp-fixed-badge-wrap{
	display: none;
}
@media only screen and (max-width: 767px){
	.sp-fixed-badge-wrap{
		display: block;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 9998;
	}
	.sp-fixed-badge-wrap .footer-bar{
		position: static;
	}
	.sp-fixed-badge-wrap .ribbon-text{
		position: relative;
		background: #F2FC00;
		color: #1A1A1A;
		font-size: 0.875rem;
		font-weight: 700;
		text-align: center;
		padding: 0.375rem 0.5rem;
	}
	.sp-fixed-badge-wrap .ribbon-text .rate{
		font-family: "Poppins", sans-serif;
		font-size: 1.375rem;
		margin-left: 0.25rem;
	}
	/* 下の問い合わせボタンへの視線誘導マーカー */
	.ribbon-arrow{
		position: absolute;
		top: 50%;
		width: 0.5rem;
		height: 0.5rem;
		margin-top: -0.5rem;
		border-right: 2px solid #1A1A1A;
		border-bottom: 2px solid #1A1A1A;
		transform: translateY(0) rotate(45deg);
		animation: ribbonArrowBounce 1.8s ease-in-out infinite;
		will-change: transform;
	}
	.ribbon-arrow.left{
		left: 1rem;
	}
	.ribbon-arrow.right{
		right: 1rem;
	}
	@keyframes ribbonArrowBounce{
		0%, 100%{
			transform: translateY(0) rotate(45deg);
			opacity: 0.75;
		}
		50%{
			transform: translateY(3px) rotate(45deg);
			opacity: 1;
		}
	}
	/* リボン分、固定フッターが高くなった分だけ本文下部の余白を追加してコピーライトが隠れないようにする */
	.footer{
		padding-bottom: 8.5rem;
	}
}