/* =========================================================
   アニレーダー Prime Video アフィリエイトパーツ
   ========================================================= */

.aniradar-affiliate-cta,
.aniradar-affiliate-cta *,
.aniradar-affiliate-cta *::before,
.aniradar-affiliate-cta *::after,
.aniradar-affiliate-inline,
.aniradar-affiliate-inline *,
.aniradar-affiliate-inline *::before,
.aniradar-affiliate-inline *::after {
	box-sizing: border-box;
}

/* =========================================================
   汎用CTA
   ========================================================= */

.aniradar-affiliate-cta {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	width: min(100%, 720px);
	margin: 28px auto;
	padding: 18px;
	background: #ffffff;
	border: 1px solid #cfe4f6;
	border-radius: 16px;
	box-shadow:
		0 8px 24px rgba(11, 46, 85, 0.07),
		0 2px 6px rgba(11, 46, 85, 0.04);
	color: #17263a;
	font-family: inherit;
}

/* バナー広告部分 */
.aniradar-affiliate-cta__banner {
	width: 100%;
	max-width: 300px;
	min-width: 0;
	margin: 0 auto;
	line-height: 0;
	text-align: center;
}

.aniradar-affiliate-cta__banner a {
	display: inline-block;
	max-width: 100%;
}

.aniradar-affiliate-cta__banner img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 200px;
	margin: 0 auto;
	border: 0;
	object-fit: contain;
}

/* バナーリンクのキーボード操作 */
.aniradar-affiliate-cta__banner a:focus-visible {
	outline: 3px solid rgba(35, 104, 154, 0.32);
	outline-offset: 4px;
	border-radius: 6px;
}

/* CTA右側 */
.aniradar-affiliate-cta__content {
	min-width: 0;
}

.aniradar-affiliate-cta__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 8px;
	padding: 4px 10px;
	background: #eef7ff;
	border: 1px solid #cfe4f6;
	border-radius: 999px;
	color: #23689a;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.03em;
}

.aniradar-affiliate-cta__title {
	display: block;
	margin: 0;
	color: #0b2e55;
	font-size: clamp(1.14rem, 2.3vw, 1.35rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.aniradar-affiliate-cta__description {
	margin: 8px 0 14px;
	color: #17263a;
	font-size: 0.94rem;
	line-height: 1.75;
}

.aniradar-affiliate-cta__note {
	margin: 13px 0 0;
	color: #5f6f82;
	font-size: 0.72rem;
	line-height: 1.65;
}

/* =========================================================
   通常ボタンリンク
   ========================================================= */

.aniradar-affiliate-inline {
	width: min(100%, 560px);
	margin: 24px auto;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid #cfe4f6;
	border-radius: 13px;
	box-shadow: 0 5px 16px rgba(11, 46, 85, 0.055);
	color: #17263a;
	font-family: inherit;
	text-align: center;
}

.aniradar-affiliate-inline__text {
	margin: 0 0 12px;
	color: #5f6f82;
	font-size: 0.88rem;
	line-height: 1.7;
}

/* =========================================================
   共通ボタン
   ========================================================= */

.aniradar-affiliate-button {
	width: 100%;
	margin: 0;
}

.aniradar-affiliate-button > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-width: 100%;
	padding: 11px 44px 11px 47px;
	overflow-wrap: anywhere;
	background: #23689a;
	border: 1px solid #1c5781;
	border-radius: 10px;
	box-shadow:
		0 4px 0 #0b2e55,
		0 8px 16px rgba(11, 46, 85, 0.14);
	color: #ffffff !important;
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none !important;
	transition:
		transform 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

/* CTA内のボタン */
.aniradar-affiliate-button--cta > a {
	width: 100%;
	max-width: 320px;
}

/* 単独配置ボタン */
.aniradar-affiliate-button--standalone > a {
	width: min(100%, 320px);
}

/*
 * 左側のレーダーモチーフ
 * 画像・SVG・アイコンフォントは不使用
 */
.aniradar-affiliate-button > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(255, 255, 255, 0.88);
	border-radius: 50%;
	background:
		radial-gradient(
			circle at center,
			#ffffff 0,
			#ffffff 2px,
			transparent 2.5px,
			transparent 5px,
			rgba(255, 255, 255, 0.78) 5.5px,
			rgba(255, 255, 255, 0.78) 6.5px,
			transparent 7px
		),
		conic-gradient(
			from 215deg,
			transparent 0deg,
			transparent 274deg,
			rgba(255, 255, 255, 0.92) 275deg,
			rgba(255, 255, 255, 0.92) 289deg,
			transparent 290deg,
			transparent 360deg
		);
	transform: translateY(-50%);
	pointer-events: none;
}

/* 右側の矢印 */
.aniradar-affiliate-button > a::after {
	content: "›";
	position: absolute;
	top: 50%;
	right: 16px;
	color: #ffffff;
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-54%);
	pointer-events: none;
}

/*
 * バリューコマースの1×1px計測画像
 * 削除・非表示にせず、1×1pxのまま維持
 */
.aniradar-affiliate-button > a > img[width="1"][height="1"] {
	display: inline-block;
	flex: 0 0 1px;
	width: 1px !important;
	min-width: 1px;
	max-width: 1px;
	height: 1px !important;
	min-height: 1px;
	max-height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: middle;
}

/* 訪問済みリンクも白文字を維持 */
.aniradar-affiliate-button > a:visited {
	color: #ffffff !important;
}

/* キーボード操作 */
.aniradar-affiliate-button > a:focus-visible {
	outline: 3px solid rgba(35, 104, 154, 0.32);
	outline-offset: 4px;
}

/* マウス操作時のみホバーを適用 */
@media (hover: hover) and (pointer: fine) {
	.aniradar-affiliate-button > a:hover {
		background: #1b5c8d;
		box-shadow:
			0 6px 0 #0b2e55,
			0 11px 20px rgba(11, 46, 85, 0.18);
		color: #ffffff !important;
		transform: translateY(-2px);
	}

	.aniradar-affiliate-button > a:hover::after {
		transform: translate(2px, -54%);
	}
}

.aniradar-affiliate-button > a:active {
	box-shadow:
		0 2px 0 #0b2e55,
		0 5px 10px rgba(11, 46, 85, 0.12);
	transform: translateY(2px);
}

/* =========================================================
   タブレット・スマートフォン
   ========================================================= */

@media screen and (max-width: 700px) {
	.aniradar-affiliate-cta {
		grid-template-columns: minmax(0, 1fr);
		gap: 17px;
		width: min(100%, 520px);
		padding: 17px;
	}

	.aniradar-affiliate-cta__banner {
		width: min(100%, 300px);
	}

	.aniradar-affiliate-cta__content {
		width: 100%;
	}

	.aniradar-affiliate-button--cta > a {
		width: 100%;
		max-width: none;
	}
}

@media screen and (max-width: 480px) {
	.aniradar-affiliate-cta {
		margin: 22px auto;
		padding: 14px;
		border-radius: 14px;
	}

	.aniradar-affiliate-cta__title {
		font-size: 1.12rem;
	}

	.aniradar-affiliate-cta__description {
		margin-top: 7px;
		margin-bottom: 13px;
		font-size: 0.9rem;
	}

	.aniradar-affiliate-cta__note {
		font-size: 0.69rem;
	}

	.aniradar-affiliate-inline {
		margin: 21px auto;
		padding: 15px 14px;
	}

	.aniradar-affiliate-button > a,
	.aniradar-affiliate-button--standalone > a {
		width: 100%;
		max-width: none;
		min-height: 50px;
		padding-right: 40px;
		padding-left: 44px;
		font-size: 0.92rem;
	}

	.aniradar-affiliate-button > a::before {
		left: 14px;
		width: 19px;
		height: 19px;
	}

	.aniradar-affiliate-button > a::after {
		right: 14px;
	}
}

/* =========================================================
   動きを減らす設定
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.aniradar-affiliate-button > a {
		transition: none;
	}

	.aniradar-affiliate-button > a:hover,
	.aniradar-affiliate-button > a:active {
		transform: none;
	}

	.aniradar-affiliate-button > a:hover::after {
		transform: translateY(-54%);
	}
}