/*
 * 色の値を直接書かない。出どころは spec/design-system.yaml だけにする。
 * 以前はここに #0d5568 などを書いていたため、主色を変えたときに
 * この広告の部品だけが古い色で取り残される状態になっていた。
 *
 * トークンが読めない場合に備えて var() の第 2 引数に控えを置く。
 */

/*
 * 広告素材の見た目。
 *
 * テーマの色設定を打ち消さない。ボタンは比較サイト側の主色に合わせ、
 * それ以外はテーマに任せる。
 *
 * PR の表示は小さく置く。広告であることが判別できればよく、
 * 大きく主張する要素ではない。
 */

.traf {
	position: relative;
	margin: 20px 0;
}

.traf__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 20px;
	background: var(--c-primary, #10529e);
	color: #fff;
	border-radius: 4px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.traf__btn:hover,
.traf__btn:focus {
	background: var(--c-primary-hover, #1a68c4);
	color: #fff;
}

.traf__btn:focus-visible {
	outline: 2px solid var(--c-primary-hover, #1a68c4);
	outline-offset: 2px;
}

.traf--banner a {
	display: inline-block;
	max-width: 100%;
}

.traf--banner img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* キャンペーンの文言。ボタンの上に置く。 */
.traf-campaign {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-accent, #c2410c);
}

.traf__label {
	display: inline-block;
	margin-top: 4px;
	padding: 0 5px;
	border: 1px solid #d3dadf;
	border-radius: 2px;
	font-size: 11px;
	line-height: 1.6;
	color: #767e86;
	letter-spacing: .06em;
}

/* 一覧の行と比較表のセルでは、余白を詰める。 */
.traf--list_row,
.traf--compare_cell {
	margin: 0;
}

.traf--list_row .traf__btn,
.traf--compare_cell .traf__btn {
	min-height: 38px;
	padding: 8px 12px;
	font-size: 14px;
}

/* スマホの追尾ボタン。 */
.traf--detail_sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	margin: 0;
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .96);
	border-top: 1px solid #d3dadf;
}

.traf--detail_sticky .traf__label {
	position: absolute;
	top: -9px;
	right: 10px;
	margin: 0;
	background: #fff;
}

@media (min-width: 768px) {
	/* 画面が広いときは追尾しない。本文の脇に置き場がある。 */
	.traf--detail_sticky {
		display: none;
	}
}