/**
 * FXスワップ比較サイト 表示スタイル
 *
 * デザイン方針：
 *  - 「個人が毎日手を動かして更新している」空気を出す（羊飼いのFXブログのような密度と親しみ）
 *  - 配色はかつをくんのブランド色（ネイビー／オレンジ／クリーム）に揃える
 *  - 見出しは色帯、表はヘッダに色、強調はオレンジ。無機質な白×グレーにしない
 *  - ただし数値の可読性は最優先（等幅・右揃え）
 *  - 「拡大」「縮小」は色だけで区別せず、記号と文字を併用する（実装仕様書11章）
 *  - モバイルは横スクロールではなくカード形式に切り替える
 */

.fx-block {
	--fx-navy:      #2b3358;
	--fx-navy-deep: #1f2547;
	--fx-orange:    #f08a1e;
	--fx-orange-dp: #d9700c;
	--fx-cream:     #fdf7ea;
	--fx-cream-dp:  #f7ecd6;
	--fx-line:      #e2d9c6;
	--fx-line-soft: #efe7d6;
	--fx-text:      #2a2620;
	--fx-muted:     #7b7264;
	--fx-up:        #1a7a45;
	--fx-up-bg:     #e6f4ec;
	--fx-down:      #c0392b;
	--fx-down-bg:   #fceceb;
	--fx-warn-bg:   #fff4e0;
	--fx-paper:     #ffffff;

	--fx-round: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Meiryo", sans-serif;

	font-size: 16.5px;
	line-height: 1.85;
	color: var(--fx-text);
}

.fx-block a { color: #17608f; }
.fx-block a:hover { color: var(--fx-orange-dp); }

/* 見出し（色帯タイプ）は chrome.css に移した。
 * このファイルはショートコードを出したページでしか読み込まれないため、
 * ここに見出しを置くと記事や /guide/ だけSWELL既定の見出しになり、
 * 同じサイトの中で見出しが2種類に割れてしまう。 */

/* ============================================================
 *  更新日・注記
 * ============================================================ */

.fx-notice {
	margin: 0 0 1.1em;
	padding: .65em 1em;
	background: var(--fx-cream);
	border: 1px solid var(--fx-line);
	border-left: 5px solid var(--fx-orange);
	border-radius: 5px;
	font-size: .93em;
	line-height: 1.7;
}

.fx-notice time {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fx-navy-deep);
}

.fx-notice.is-warn {
	background: var(--fx-warn-bg);
	border-left-color: var(--fx-down);
}

.fx-notice.is-mock {
	background: #eef3fb;
	border-color: #cfdcee;
	border-left-color: #4a7fc1;
}

.fx-pr {
	margin: 0 0 1em;
	font-size: .82em;
	color: var(--fx-muted);
}

.fx-disclaimer,
.fx-note-legal,
.fx-legend-note,
.fx-selftest-note {
	margin: 1.3em 0 0;
	font-size: .84em;
	line-height: 1.8;
	color: var(--fx-muted);
}

.fx-risk {
	margin: 1.4em 0 0;
	padding: .85em 1.1em;
	background: var(--fx-cream-dp);
	border-radius: 6px;
	font-size: .88em;
	line-height: 1.8;
}

.fx-legend {
	margin: 1em 0 0;
	padding: .8em 1em .8em 2.2em;
	background: var(--fx-cream);
	border-radius: 6px;
	font-size: .85em;
	line-height: 1.75;
	color: var(--fx-muted);
}

.fx-legend li { margin: .25em 0; }

.fx-admin-warn {
	margin: 0 0 1em;
	padding: .8em 1em;
	background: var(--fx-down-bg);
	border: 2px solid var(--fx-down);
	border-radius: 6px;
}

/* ============================================================
 *  かつをのひとこと（親しみの核）
 * ============================================================ */

.fx-katsuo {
	display: flex;
	align-items: flex-start;
	gap: .8em;
	margin: 1.5em 0;
}

.fx-katsuo-icon {
	flex: 0 0 58px;
	width: 58px; height: 58px;
	border-radius: 50%;
	border: 2px solid var(--fx-line);
	background: var(--fx-cream) center/cover no-repeat;
	overflow: hidden;
}

.fx-katsuo-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fx-katsuo-body {
	position: relative;
	flex: 1 1 auto;
	padding: .8em 1.1em;
	background: var(--fx-cream);
	border: 1px solid var(--fx-line);
	border-radius: 10px;
	font-size: .93em;
	line-height: 1.8;
}

.fx-katsuo-body::before {
	content: "";
	position: absolute;
	left: -9px; top: 18px;
	width: 0; height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 9px solid var(--fx-line);
}

.fx-katsuo-body::after {
	content: "";
	position: absolute;
	left: -7px; top: 18px;
	width: 0; height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 9px solid var(--fx-cream);
}

.fx-katsuo-name {
	display: block;
	margin: 0 0 .15em;
	font-family: var(--fx-round);
	font-size: .82em;
	font-weight: 700;
	color: var(--fx-orange-dp);
}

.fx-katsuo p { margin: 0; }

/* ============================================================
 *  期間タブ
 * ============================================================ */

.fx-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
	margin: 0 0 .9em;
	padding: .5em .6em;
	background: var(--fx-cream);
	border-radius: 8px;
}

.fx-tab {
	appearance: none;
	padding: .42em .95em;
	border: 1px solid var(--fx-line);
	border-radius: 999px;
	background: var(--fx-paper);
	color: var(--fx-navy-deep);
	font-family: var(--fx-round);
	font-size: .9em;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background .12s, color .12s;
}

.fx-tab:hover { background: var(--fx-cream-dp); }

.fx-tab.is-active {
	background: var(--fx-orange);
	border-color: var(--fx-orange-dp);
	color: #fff;
	box-shadow: 0 1px 0 var(--fx-orange-dp);
}

.fx-tab:focus-visible { outline: 3px solid #9ec4e8; outline-offset: 2px; }

/* ============================================================
 *  テーブル
 * ============================================================ */

.fx-table-wrap {
	margin: 0;
	border: 1px solid var(--fx-line);
	border-radius: 8px;
	overflow: hidden;
}

.fx-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fx-paper);
	font-size: .95em;
}

.fx-table thead th {
	padding: .6em .7em;
	background: var(--fx-navy);
	border-right: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	font-family: var(--fx-round);
	font-size: .85em;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

.fx-table thead th:last-child { border-right: 0; }

.fx-table td {
	padding: .62em .7em;
	border-bottom: 1px solid var(--fx-line-soft);
	text-align: left;
	vertical-align: middle;
}

.fx-table tbody tr:nth-child(even) { background: #fcfaf5; }
.fx-table tbody tr:hover { background: var(--fx-cream); }
.fx-table tbody tr:last-child td { border-bottom: 0; }

/* 数値は等幅・右揃え */
.fx-table .c-value,
.fx-table .c-mom,
.fx-table td[data-label$="平均"],
.fx-table td[data-label="1日"] {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.fx-v {
	font-size: 1.12em;
	font-weight: 700;
	color: var(--fx-navy-deep);
}

.fx-v.is-none { font-size: 1em; font-weight: 400; color: var(--fx-muted); }

.fx-accum {
	display: block;
	font-size: .7em;
	line-height: 1.4;
	color: var(--fx-muted);
	white-space: nowrap;
}

/* 順位バッジ（羊飼い風に番号を大きく） */
.c-rank { width: 3.6em; text-align: center; }

.fx-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em; height: 1.9em;
	border-radius: 50%;
	background: var(--fx-cream-dp);
	color: var(--fx-navy-deep);
	font-family: var(--fx-round);
	font-size: 1.02em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

tr:nth-child(1) .fx-rank { background: #f6c445; color: #4a3607; }
tr:nth-child(2) .fx-rank { background: #d8dde3; color: #38404a; }
tr:nth-child(3) .fx-rank { background: #e2b183; color: #4d3115; }

.fx-rank.is-none { background: transparent; color: var(--fx-muted); font-weight: 400; }

/* 判定：色だけに頼らず記号と文字を併用 */
.c-judge { white-space: nowrap; font-weight: 700; }

.c-judge.is-up   { color: var(--fx-up);   background: var(--fx-up-bg); }
.c-judge.is-down { color: var(--fx-down); background: var(--fx-down-bg); }
.c-judge.is-flat { color: var(--fx-muted); }
.c-judge.is-none { color: var(--fx-muted); font-weight: 400; }

.fx-mark { margin-right: .2em; }

.is-up   { color: var(--fx-up); }
.is-down { color: var(--fx-down); }
.is-flat { color: var(--fx-muted); }

.fx-broker-link { white-space: nowrap; font-weight: 700; text-decoration: underline; }
.fx-ext { margin-left: .12em; font-size: .82em; }

/* ============================================================
 *  ベンチマーク別枠
 * ============================================================ */

.fx-bench {
	margin: 1.6em 0 0;
	padding: 1em 1.1em;
	background: var(--fx-cream);
	border: 1px dashed var(--fx-line);
	border-radius: 8px;
}

.fx-bench h3 { margin-top: 0; }

.fx-bench-note { margin: 0 0 .8em; font-size: .85em; line-height: 1.75; color: var(--fx-muted); }

/* ============================================================
 *  カード
 * ============================================================ */

.fx-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: .75em;
	margin: 0 0 1.6em;
}

.fx-card {
	padding: .85em 1em;
	background: var(--fx-paper);
	border: 1px solid var(--fx-line);
	border-top: 4px solid var(--fx-navy);
	border-radius: 8px;
}

.fx-card.fx-tier2 { border-top-color: var(--fx-orange); background: var(--fx-cream); }

.fx-card h3 {
	margin: 0 0 .15em;
	padding: 0;
	border: 0;
	font-size: 1.03em;
	line-height: 1.45;
}

.fx-card-code { margin: 0; font-size: .78em; color: var(--fx-muted); font-variant-numeric: tabular-nums; }
.fx-card-count { margin: .45em 0 0; font-size: .86em; font-weight: 700; color: var(--fx-navy-deep); }
.fx-card-risk { margin: .5em 0 0; font-size: .82em; line-height: 1.7; color: var(--fx-muted); }

.fx-badge {
	display: inline-block;
	margin: 0 0 .3em;
	padding: .12em .6em;
	border-radius: 999px;
	background: var(--fx-navy);
	color: #fff;
	font-size: .72em;
	font-weight: 700;
}

/* ============================================================
 *  金利差カード・基本情報
 * ============================================================ */

.fx-rate-card {
	margin: 1.8em 0 0;
	padding: 1em 1.1em 1.1em;
	background: var(--fx-paper);
	border: 1px solid var(--fx-line);
	border-radius: 8px;
}

.fx-rate-card h3 { margin-top: 0; }

.fx-rate-card dl,
.fx-spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
	gap: .5em;
	margin: 0;
}

.fx-rate-card dl > div,
.fx-spec > div {
	padding: .5em .8em;
	background: var(--fx-cream);
	border-radius: 6px;
}

.fx-rate-card dt,
.fx-spec dt { margin: 0; font-size: .77em; color: var(--fx-muted); }

.fx-rate-card dd,
.fx-spec dd {
	margin: .1em 0 0;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--fx-navy-deep);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 *  サマリ・アラート
 * ============================================================ */

.fx-summary {
	padding: 1em 1.1em .8em;
	background: var(--fx-cream);
	border: 2px solid var(--fx-line);
	border-radius: 8px;
	margin: 0 0 1.6em;
}

.fx-summary .fx-notice { margin-bottom: .5em; background: var(--fx-paper); }

.fx-summary-counts {
	margin: 0;
	font-family: var(--fx-round);
	font-size: 1.02em;
	font-weight: 700;
}

.fx-summary-counts .is-up,
.fx-summary-counts .is-down {
	display: inline-block;
	padding: .05em .55em;
	border-radius: 4px;
}

.fx-summary-counts .is-up   { background: var(--fx-up-bg); }
.fx-summary-counts .is-down { background: var(--fx-down-bg); }

.fx-alert-list { margin: 0 0 1em; padding: 0; list-style: none; }

.fx-alert-list li {
	display: flex;
	flex-wrap: wrap;
	gap: .25em .8em;
	align-items: baseline;
	padding: .6em .8em;
	border-bottom: 1px solid var(--fx-line-soft);
	font-size: .92em;
}

.fx-alert-list li:nth-child(odd) { background: #fcfaf5; }

.fx-alert-list time { color: var(--fx-muted); font-variant-numeric: tabular-nums; font-size: .9em; }

.fx-alert-dir {
	padding: .05em .5em;
	border-radius: 4px;
	font-weight: 700;
	font-size: .88em;
}

.fx-alert-dir.is-up   { background: var(--fx-up-bg); }
.fx-alert-dir.is-down { background: var(--fx-down-bg); }

.fx-alert-target { font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-alert-detail { color: var(--fx-muted); }

/* ============================================================
 *  CTA（誤タップを誘わない控えめな作り）
 * ============================================================ */

.fx-cta {
	margin: 1.8em 0 0;
	padding: 1em 1.1em 1.1em;
	background: var(--fx-cream);
	border: 2px solid var(--fx-line);
	border-radius: 8px;
}

.fx-cta h2 { margin-top: 0; }
.fx-cta-cond { margin: 0 0 .8em; font-size: .9em; }
.fx-cta-plain { margin: 1.4em 0 0; padding: .7em 1em; background: var(--fx-cream); border-radius: 6px; font-size: .92em; }

/* ============================================================
 *  パンくず・フッター
 * ============================================================ */

.fx-crumbs { margin: 0 0 1em; font-size: .8em; color: var(--fx-muted); }
.fx-crumbs ol { display: flex; flex-wrap: wrap; gap: .3em; margin: 0; padding: 0; list-style: none; }
.fx-crumbs li + li::before { content: "›"; margin-right: .3em; color: var(--fx-line); }

.fx-footer-legal {
	padding: 1.3em 1em;
	background: var(--fx-navy-deep, #1f2547);
	color: #c8cddd;
	font-size: .79em;
	line-height: 1.85;
}

.fx-footer-legal p { max-width: 1000px; margin: 0 auto .5em; }
.fx-footer-legal p:last-child { margin-bottom: 0; }
.fx-footer-legal a { color: #ffc98a; }

/* ============================================================
 *  セルフテスト
 * ============================================================ */

.fx-selftest { font-size: .92em; }

.fx-selftest-head {
	padding: .6em 1em;
	border-radius: 6px;
	font-family: var(--fx-round);
	font-weight: 700;
}

.fx-selftest-head.is-pass { background: #e6f4ec; color: #1a7a45; }
.fx-selftest-head.is-fail { background: #fceceb; color: #c0392b; }
.fx-selftest tr.is-pass td:first-child { color: #1a7a45; font-weight: 700; }
.fx-selftest tr.is-fail td:first-child { color: #c0392b; font-weight: 700; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ============================================================
 *  モバイル：表を横スクロールさせずカード形式へ
 * ============================================================ */

@media (max-width: 640px) {

	.fx-block { font-size: 16px; }

	.fx-table-wrap { border: 0; border-radius: 0; overflow: visible; }

	.fx-table thead {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	.fx-table,
	.fx-table tbody,
	.fx-table tr,
	.fx-table td { display: block; width: 100%; }

	.fx-table tr,
	.fx-table tbody tr:nth-child(even) {
		margin: 0 0 .7em;
		padding: .6em .9em;
		background: var(--fx-paper);
		border: 1px solid var(--fx-line);
		border-left: 5px solid var(--fx-navy);
		border-radius: 8px;
	}

	.fx-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1em;
		padding: .38em 0;
		border-bottom: 1px dotted var(--fx-line);
		text-align: right;
	}

	.fx-table td:last-child { border-bottom: 0; }

	.fx-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: .8em;
		font-weight: 400;
		color: var(--fx-muted);
		text-align: left;
	}

	.fx-table td.c-rank {
		justify-content: flex-start;
		width: 100%;
		padding-bottom: .2em;
		border-bottom: 0;
	}

	.fx-table td.c-rank::before { content: "順位"; margin-right: .5em; }

	.fx-table .c-broker { font-size: 1.05em; font-weight: 700; }

	.fx-accum { display: inline; margin-left: .4em; }

	.fx-cards { grid-template-columns: 1fr; }

	.fx-katsuo-icon { flex-basis: 48px; width: 48px; height: 48px; }
}