/* 「原料の性質を比べました」（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: #D9789B; --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-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-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-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; }
	/* スマホも PC と同じ表（左に項目、Dr.JAPAN の列に枠とラベル）。文字を小さくして画面幅に収める */
	.fc-table-wrap { margin-top: 22px; padding: 22px 6px 8px; border-radius: 12px; box-shadow: 0 6px 18px rgba(30,53,96,.07); }
	.fc-table thead td { width: 23%; }
	.fc-table th, .fc-table td { padding: 9px 3px; font-size: 12.5px; line-height: 1.45; }
	.fc-table thead th { padding-inline: 1px; font-size: 12.5px; line-height: 1.35; letter-spacing: 0; }
	.fc-table thead th.is-ours { padding-top: 16px; }
	.fc-table tbody th { padding-left: 6px; font-size: 11.5px; line-height: 1.45; }
	.fc-table thead .fc-label { translate: -50% -65%; padding: 2px 7px; font-size: 10px; border-radius: 4px; }
	.fc-note { text-align: left; font-size: 11.5px; }
}

/* なぜカツオの動脈球か（理由3つのカード） */
.fc-reasons { list-style: none; margin: calc(26 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); }
.fc-reasons li { position: relative; padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255,255,255,.94); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(30,53,96,.07); border-top: 3px solid var(--fc-accent); }
.fc-reason-no { display: block; font-family: var(--serif); font-weight: 700; font-size: calc(22 * var(--u)); color: var(--fc-accent-d); letter-spacing: .06em; }
.fc-reasons h3 { margin-top: calc(6 * var(--u)); font-family: var(--serif); font-size: calc(19 * var(--u)); color: var(--navy); }
.fc-reasons p { margin-top: calc(8 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.85; color: #2F3446; }
.fc-table td small { display: block; margin-top: 4px; font-family: var(--sans, inherit); font-weight: 400; font-size: .72em; line-height: 1.5; color: #5E6577; }
@media (max-width: 1023px) {
	.fc-reasons { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
	.fc-reasons li { padding: 16px 16px 14px; border-radius: 12px; }
	.fc-reason-no { font-size: 17px; }
	.fc-reasons h3 { margin-top: 2px; font-size: 16.5px; }
	.fc-reasons p { margin-top: 6px; font-size: 13.5px; line-height: 1.8; }
}

/* ウロコの「脱灰」の流れ（includes/fish-compare.php の decal） */
.fc-flow { display: grid; gap: calc(14 * var(--u)); margin-top: calc(26 * var(--u)); }
.fc-flow-row { display: grid; grid-template-columns: calc(170 * var(--u)) 1fr; align-items: center; gap: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255,255,255,.94); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(30,53,96,.07); }
.fc-flow-row.is-ours { border: 2px solid var(--fc-accent); }
.fc-flow-name { position: relative; font-family: var(--serif); font-weight: 700; font-size: calc(18 * var(--u)); color: var(--navy); }
.fc-flow-name .fc-label { display: table; margin-bottom: 6px; }
.fc-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--u)); }
.fc-flow-steps li { position: relative; padding: calc(12 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #F4F7FB; text-align: center; font-family: var(--serif); font-weight: 700; font-size: calc(15.5 * var(--u)); line-height: 1.45; color: var(--navy); }
.fc-flow-steps li + li::before { content: "›"; position: absolute; left: calc(-19 * var(--u)); top: 50%; translate: 0 -50%; font-size: calc(22 * var(--u)); color: var(--fc-accent-d); font-weight: 400; }
.fc-flow-steps li small { display: block; margin-top: 3px; font-family: var(--sans, inherit); font-weight: 400; font-size: .78em; color: #5E6577; }
.fc-flow-row:not(.is-ours) .fc-flow-steps li.is-key { background: #FCEFEA; color: #A3412A; }
.fc-flow-row.is-ours .fc-flow-steps li.is-key { background: var(--fc-tint); color: var(--fc-ours-text); }
.fc-points { margin: calc(20 * var(--u)) 0 0; padding-left: 1.2em; display: grid; gap: calc(6 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.85; color: #2F3446; }
@media (max-width: 1023px) {
	.fc-flow { gap: 10px; margin-top: 16px; }
	.fc-flow-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 12px; border-radius: 12px; }
	.fc-flow-name { font-size: 15.5px; }
	.fc-flow-steps { gap: 16px; }
	.fc-flow-steps li { padding: 8px 4px; font-size: 12.5px; border-radius: 8px; }
	.fc-flow-steps li + li::before { left: -12px; font-size: 16px; }
	.fc-points { margin-top: 14px; gap: 4px; font-size: 13.5px; line-height: 1.8; }
}
.fc-conclusion { margin-top: calc(20 * var(--u)); padding: calc(16 * var(--u)) calc(22 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--fc-tint); border-left: 4px solid var(--fc-accent); font-family: var(--serif); font-weight: 700; font-size: calc(17 * var(--u)); line-height: 1.8; color: var(--fc-ours-text); }
.fc-conclusion + .fc-points { font-size: calc(13.5 * var(--u)); color: #5E6577; }
@media (max-width: 1023px) {
	.fc-conclusion { margin-top: 14px; padding: 12px 14px; font-size: 14.5px; border-radius: 10px; }
	.fc-conclusion + .fc-points { font-size: 12.5px; }
}

/* 見出しの枠：表の線（border-collapse）では角丸にならないので、枠は ::after で角丸に描く */
.fc-table thead th.is-ours { border-top: 0; border-left-color: transparent; border-right-color: transparent; }
.fc-table thead th.is-ours::after { content: ""; position: absolute; inset: -2px -2px -1px -2px; border: 2px solid var(--fc-ours-border); border-bottom: 0; border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0; pointer-events: none; }
.fc-table thead .fc-label { z-index: 1; }
@media (max-width: 1023px) { .fc-table thead th.is-ours::after { border-radius: 8px 8px 0 0; } .fc-table thead th.is-ours { border-radius: 8px 8px 0 0; } }