/**
 * フロント用CSS(比較表があるページでだけ読み込まれる)
 *
 * - 下部リンク(ボタン) .jc-bottom-btn
 * - 横スクロールのヒント .jc-scroll-hint(表示判定は block/front.js)
 * - キャプション .jc-caption(table 内の caption タグ。表の下に表示)
 */

/* ---- 下部リンク(ボタン) ----
 * ラッパー .jc-bottom-btn の中のリンク要素に当てる。
 * テーマ側スクリプトが span.jump を <a> に置換した後も効くよう、.jump と a の両方を対象にする。
 * 色は設定画面「ボタンの色」から CSS 変数 --jc-btn-color で配信される。 */
.jc-bottom-btn .jump,
.jc-bottom-btn a {
	display: inline-block;
	padding: 6px 20px;
	color: #fff;
	background: var(--jc-btn-color, #2271b1);
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
}

/* ---- 横スクロールのヒント ----
 * サーバー出力時は hidden。実際にスクロールが発生しているときだけ front.js が表示する。
 * 色は固定せず inherit + opacity でテーマの文字色に馴染ませる。 */
.jc-scroll-hint {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1.4;
	color: inherit;
	opacity: 0.65;
	text-align: right;
}
/* テーマのリセットCSSが [hidden] を無効化していても確実に隠す */
.jc-scroll-hint[hidden] {
	display: none;
}

/* ---- キャプション(table 内の caption タグ) ----
 * HTML仕様上 caption は table の先頭に置かれるため、表示位置は caption-side で表の下にする。
 * テーマが caption に太字・中央揃え・caption-side:top を当てていても上書きできるよう明示する。 */
caption.jc-caption {
	caption-side: bottom;
	text-align: left;
	padding-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	font-weight: normal;
	color: inherit;
	opacity: 0.75;
}