/* 「原料の性質を比べました」（includes/fish-compare.php）。Dr.DECOLLA（fc--dc、ピンク）と Dr.Energy（fc--en、紺×金）の LP で使う。Codex のデザイン画 tbl-*.png */
.fc { position: relative; padding-block: calc(30 * var(--u)) calc(34 * var(--u)); }
.fc + .fc { padding-top: calc(10 * var(--u)); }
.fc--dc { --fc-accent: #C43E6E; --fc-accent-d: #A92D5B; --fc-tint: rgba(247,217,227,.55); --fc-line: #EBCFDA; --fc-head: #C43E6E; --fc-head-text: #fff; --fc-ours-text: #A92D5B; --fc-ours-border: transparent; --fc-rowh: var(--fc-tint); --fc-rowh-text: var(--fc-ours-text); }
.fc--en { --fc-accent: #CFAF72; --fc-accent-d: #A5844C; --fc-tint: rgba(222,236,250,.7); --fc-line: #D6E0EC; --fc-head: var(--navy); --fc-head-text: #fff; --fc-ours-text: var(--navy); --fc-ours-border: #CFAF72; --fc-rowh: var(--fc-tint); --fc-rowh-text: var(--fc-ours-text); }
.fc-in { position: relative; width: calc(1024 * var(--u)); margin: 0 auto; padding: 0 calc(40 * var(--u)); }
.fc-lead { text-align: center; font-size: calc(16 * var(--u)); line-height: 1.9; color: #2F3446; letter-spacing: .03em; }
.fc-table-wrap { margin-top: calc(30 * var(--u)); padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(255,255,255,.92); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(30,53,96,.08); }
.fc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--serif); color: var(--navy); }
.fc-table thead td { width: 24%; }
.fc-table th, .fc-table td { padding: calc(14 * var(--u)) calc(10 * var(--u)); border: 1px solid var(--fc-line); text-align: center; vertical-align: middle; font-size: calc(17 * var(--u)); line-height: 1.5; font-weight: 600; }
.fc-table thead td { border: 0; }
.fc-table thead th { font-size: calc(21 * var(--u)); font-weight: 700; border-top: 0; }
.fc-table tbody th { text-align: left; font-size: calc(15.5 * var(--u)); padding-left: calc(18 * var(--u)); }
.fc-table .is-ours { position: relative; background: var(--fc-tint); color: var(--fc-ours-text); font-weight: 700; border-left: 2px solid var(--fc-ours-border); border-right: 2px solid var(--fc-ours-border); }
.fc-table thead th.is-ours { padding-top: calc(18 * var(--u)); }
.fc--en .fc-table thead th.is-ours { background: var(--fc-head); color: var(--fc-head-text); border-top: 2px solid var(--fc-ours-border); border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0; }
.fc--en .fc-table tbody tr:last-child td.is-ours { border-bottom: 2px solid var(--fc-ours-border); }
.fc-table thead .fc-label { position: absolute; left: 50%; top: 0; translate: -50% -70%; white-space: nowrap; }
.fc-label { display: inline-block; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--fc-head); color: #fff; font-family: var(--serif); font-weight: 700; font-size: calc(13 * var(--u)); letter-spacing: .04em; line-height: 1.4; }
.fc--en .fc-label { background: linear-gradient(180deg, #F1DFB1, #D9BC7E); color: var(--navy); }
.fc-mtable { display: none; }
.fc-link { color: var(--fc-accent-d); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.fc--en .fc-link { color: var(--navy); }
.fc-link:hover { text-decoration: none; }
.fc-note { margin-top: calc(18 * var(--u)); text-align: center; font-size: max(11px, calc(12 * var(--u))); color: #6F6670; line-height: 1.7; }

@media (max-width: 1023px) {
	.fc { padding-block: 22px 26px; }
	.fc-in { width: auto; padding: 0 16px; }
	.fc-lead { text-align: left; font-size: 14.5px; line-height: 1.85; }
	.fc-table-wrap { display: none; }
	.fc-mtable { display: table; width: 100%; margin-top: 16px; border-collapse: collapse; table-layout: fixed; background: rgba(255,255,255,.95); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(30,53,96,.07); font-family: var(--serif); color: var(--navy); }
	.fc-mtable th, .fc-mtable td { border: 1px solid var(--fc-line); text-align: center; vertical-align: middle; }
	.fc-mtable thead th { padding: 8px 3px; font-size: 13px; line-height: 1.35; font-weight: 700; background: #F6F8FB; }
	.fc-mtable thead th.is-ours { background: var(--fc-tint); color: var(--fc-ours-text); }
	.fc--en .fc-mtable thead th.is-ours { background: var(--fc-head); color: #fff; }
	.fc-mtable thead .fc-label { display: block; width: fit-content; margin: 0 auto 4px; padding: 2px 6px; font-size: 9.5px; border-radius: 4px; }
	.fc-mrow-h th { padding: 6px 10px; text-align: center; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; background: var(--fc-rowh); color: var(--fc-rowh-text); }
	.fc-mtable tbody td { padding: 8px 3px 10px; font-family: var(--sans, inherit); font-size: 12.5px; line-height: 1.45; color: #2F3446; border-top: 0; }
	.fc-mtable tbody td.is-ours { background: var(--fc-tint); color: var(--fc-ours-text); font-weight: 700; }
	.fc-note { text-align: left; font-size: 11.5px; }
}