@charset "utf-8";
/* 成分解説（/ingredients/）。下層ページ共通の rn-sec・rn-h2・rn-text を使い、足りない部分だけここで決める */
.ig .rn-sec.ig-sec { padding-block: calc(48 * var(--u)) calc(56 * var(--u)); }
.ig .ig-sec.is-foot { padding-top: calc(24 * var(--u)); }
.ig-lead { font-family: var(--serif); font-weight: 600; font-size: calc(21 * var(--u)); line-height: 1.8; color: var(--navy); letter-spacing: .04em; font-feature-settings: "palt"; }
.ig-block { margin-top: calc(44 * var(--u)); }
.ig-block .rn-h2 { font-size: calc(28 * var(--u)); line-height: 1.5; }
.ig-text { margin-top: calc(16 * var(--u)); }
.ig-cite { margin-top: calc(8 * var(--u)); font-size: max(11px, calc(12 * var(--u))); color: #6B7686; }
.ig-cite a { color: var(--blue-2); }
.ig-small { margin-top: calc(8 * var(--u)) !important; font-size: max(11px, calc(12.5 * var(--u))); color: #5B6678; }
.ig-table { width: 100%; max-width: calc(640 * var(--u)); border-collapse: collapse; font-size: calc(15 * var(--u)); line-height: 1.7; }
.ig-table th, .ig-table td { padding: calc(10 * var(--u)) calc(16 * var(--u)); border: 1px solid #C9D6E6; text-align: left; }
.ig-table thead th { background: #EEF4FB; color: var(--navy); font-family: var(--serif); }
.ig-table tbody th { background: #F7FAFD; color: var(--navy); font-weight: 600; white-space: nowrap; }
.ig-table td { background: #fff; }
.ig-related { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(14 * var(--u)); margin-top: calc(18 * var(--u)); }
.ig-related a { display: inline-flex; align-items: center; min-height: calc(44 * var(--u)); padding: 0 calc(20 * var(--u)); border: 1px solid #A9C4E2; border-radius: 999px; background: #fff; color: var(--navy); font-family: var(--serif); font-weight: 600; font-size: calc(15 * var(--u)); }
.ig-related a:hover { background: #EEF4FB; }
.ig-sources { margin-top: calc(16 * var(--u)); display: grid; gap: calc(12 * var(--u)); font-size: max(11.5px, calc(13 * var(--u))); line-height: 1.7; color: #3A4558; }
.ig-sources li { display: flex; gap: calc(10 * var(--u)); scroll-margin-top: 90px; }
.ig-src-no { flex: none; color: var(--navy); font-weight: 600; }
.ig-sources a { color: var(--blue-2); word-break: break-all; }
.ig-note { margin-top: calc(28 * var(--u)); font-size: max(11px, calc(12 * var(--u))); color: #6B7686; }
.ig-moved-lead { width: calc(1024 * var(--u)); margin: calc(8 * var(--u)) auto 0; padding: 0 calc(48 * var(--u)); }
.ig-moved-lead span { display: inline-block; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: #EEF4FB; color: var(--navy); font-family: var(--serif); font-weight: 600; font-size: calc(14 * var(--u)); letter-spacing: .06em; }
/* 一覧 */
.ig-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(18 * var(--u)); margin-top: calc(32 * var(--u)); }
.ig-card { display: flex; flex-direction: column; gap: calc(10 * var(--u)); height: 100%; padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); border: 1px solid #D6E2F0; border-radius: calc(12 * var(--u)); background: linear-gradient(180deg, #fff, #F5F9FD); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(30,53,96,.07); transition: transform .2s; }
.ig-card:hover { transform: translateY(-2px); }
.ig-card-name { font-family: var(--serif); font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.5; color: var(--navy); }
.ig-card-desc { font-size: calc(14 * var(--u)); line-height: 1.8; color: #3A4558; }

@media (max-width: 1023px) {
	.ig .rn-sec.ig-sec { padding-block: 32px 40px; }
	.ig-lead { font-size: 17px; }
	.ig-block { margin-top: 32px; }
	.ig-block .rn-h2 { font-size: 20px; }
	.ig-text { margin-top: 10px; }
	.ig-cite, .ig-note { font-size: 11px; }
	.ig-table { font-size: 13.5px; }
	.ig-table th, .ig-table td { padding: 8px 10px; }
	.ig-related { gap: 8px; margin-top: 12px; }
	.ig-related a { min-height: 40px; padding: 0 16px; font-size: 14px; }
	.ig-sources { font-size: 12px; }
	.ig-moved-lead { width: auto; max-width: 560px; padding: 0 18px; }
	.ig-moved-lead span { font-size: 13px; padding: 3px 12px; }
	.ig-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
	.ig-card { padding: 16px 18px; border-radius: 10px; }
	.ig-card-name { font-size: 18px; }
	.ig-card-desc { font-size: 13.5px; }
}
/* 「健康寿命とは」から移した段：見出しはほかの段と同じ左寄せに */
.ig .lg-sec { padding-block: calc(24 * var(--u)) calc(40 * var(--u)); }
.ig .lg-sec .rn-h2 { font-size: calc(28 * var(--u)); line-height: 1.5; margin-bottom: calc(20 * var(--u)); }
@media (max-width: 1023px) {
	.ig .lg-sec { padding-block: 16px 28px; }
	.ig .lg-sec .rn-h2 { font-size: 20px; margin-bottom: 12px; }
}

/* 次に読んでほしいページへのカード */
.ig-next { position: relative; display: flex; flex-direction: column; gap: calc(6 * var(--u)); max-width: calc(640 * var(--u)); margin-top: calc(18 * var(--u)); padding: calc(20 * var(--u)) calc(64 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u)); border: 1.5px solid #8FB2DA; border-radius: calc(14 * var(--u)); background: linear-gradient(135deg, #F2F8FE, #E3EEFA); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(30,53,96,.12); transition: transform .2s; }
.ig-next:hover { transform: translateY(-2px); }
.ig-next::after { content: ""; position: absolute; right: calc(28 * var(--u)); top: 50%; width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(-6 * var(--u)); border-top: 2px solid var(--navy); border-right: 2px solid var(--navy); transform: rotate(45deg); }
.ig-next-label { align-self: flex-start; padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--navy); color: #fff; font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: .08em; }
.ig-next-title { font-family: var(--serif); font-weight: 700; font-size: calc(22 * var(--u)); line-height: 1.5; color: var(--navy); }
.ig-next-sub { font-size: calc(14 * var(--u)); line-height: 1.8; color: #3A4558; }
@media (max-width: 1023px) {
	.ig-next { margin-top: 14px; padding: 16px 48px 18px 18px; border-radius: 12px; }
	.ig-next::after { right: 20px; width: 10px; height: 10px; margin-top: -5px; }
	.ig-next-label { font-size: 11.5px; padding: 2px 10px; }
	.ig-next-title { font-size: 18px; }
	.ig-next-sub { font-size: 13px; }
}
.ig-block[id] { scroll-margin-top: 90px; }
/* 段の中の小見出し・グラフ（コラーゲンの「とる動物による違い」など） */
.ig-text .ig-h3 { margin-top: calc(28 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(19 * var(--u)); line-height: 1.6; color: var(--navy); padding-left: calc(12 * var(--u)); border-left: 3px solid var(--gold-1); }
.ig-text .ig-h3 + p { margin-top: calc(8 * var(--u)); }
.ig-text .ig-table { margin-top: calc(14 * var(--u)); }
.ig-chart { max-width: calc(680 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border: 1px solid #D6E2F0; border-radius: calc(10 * var(--u)); background: #fff; }
.ig-chart-title { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: calc(16 * var(--u)); }
.ig-chart-unit { margin-top: 0 !important; font-size: max(11px, calc(12 * var(--u))); color: #6B7686; }
.ig-bars { display: grid; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.ig-bars li { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr calc(44 * var(--u)); align-items: center; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.4; }
.ig-bar-name { color: #273246; }
.ig-bars li.is-cold .ig-bar-name::after { content: "冷水魚"; margin-left: 6px; font-size: .8em; color: #3B7BC0; }
.ig-bars li.is-warm .ig-bar-name::after { content: "温水魚"; margin-left: 6px; font-size: .8em; color: #C07A3B; }
.ig.is-en .ig-bars li.is-cold .ig-bar-name::after { content: "cold"; }
.ig.is-en .ig-bars li.is-warm .ig-bar-name::after { content: "warm"; }
.ig-bar-track { display: flex; height: calc(16 * var(--u)); border-radius: 3px; background: #F2F5F9; overflow: hidden; }
.ig-bar.is-pro { background: #7FA9D8; }
.ig-bar.is-hyp { background: #2F5A98; }
.ig-bars li.is-mammal .ig-bar.is-pro { background: #D9A9B8; }
.ig-bars li.is-mammal .ig-bar.is-hyp { background: #A85A76; }
.ig-bar-val { font-weight: 600; color: var(--navy); text-align: right; }
.ig-legend { display: flex; gap: calc(16 * var(--u)); margin-top: calc(10 * var(--u)) !important; font-size: max(11px, calc(12 * var(--u))); color: #5B6678; }
.ig-legend span::before { content: ""; display: inline-block; width: 12px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.ig-legend .is-pro::before { background: #7FA9D8; }
.ig-legend .is-hyp::before { background: #2F5A98; }
@media (max-width: 1023px) {
	.ig-text .ig-h3 { margin-top: 20px; font-size: 16px; }
	.ig-chart { padding: 14px 12px; }
	.ig-chart-title { font-size: 14.5px; }
	.ig-bars li { grid-template-columns: 112px 1fr 34px; gap: 6px; font-size: 12px; }
	.ig-bar-track { height: 13px; }
	.ig-text .ig-table { display: block; overflow-x: auto; }
}
@media (max-width: 1023px) {
	/* 表：スマホでも横に切れないよう、文字を少し小さくし、数字の列は折り返さない */
	.ig-text .ig-table { display: table; overflow: visible; width: 100%; font-size: 12.5px; line-height: 1.5; }
	.ig-text .ig-table th, .ig-text .ig-table td { padding: 7px 8px; }
	.ig-text .ig-table thead th { white-space: nowrap; font-size: 11.5px; }
	.ig-text .ig-table thead th:first-child { white-space: normal; }
	.ig-text .ig-table td { white-space: nowrap; }
	.ig-text .ig-table tbody th { white-space: normal; }
	/* グラフ：魚の種類の印は名前の下に */
	.ig-bars li { grid-template-columns: 96px 1fr 30px; }
	.ig-bars li.is-cold .ig-bar-name::after, .ig-bars li.is-warm .ig-bar-name::after { display: block; margin-left: 0; }
}
/* 1本の棒グラフ（エラスチンの割合・亜鉛の量など） */
.ig-bars.is-one li { grid-template-columns: calc(230 * var(--u)) 1fr calc(56 * var(--u)); }
.ig-bar.is-one { background: linear-gradient(90deg, #7FA9D8, #2F5A98); }
.ig-text .ig-table td.is-wrap { white-space: normal; }
@media (max-width: 1023px) {
	.ig-bars.is-one li { grid-template-columns: 118px 1fr 40px; }
}
@media (max-width: 1023px) {
	.ig-text .ig-table tbody th { white-space: nowrap; }
	.ig-text .ig-table td.is-wrap { white-space: normal; }
}
.ig-text .ig-list { margin-top: 8px; padding-left: 1.4em; list-style: disc; }
.ig-text .ig-list li + li { margin-top: 4px; }
@media (max-width: 1023px) {
	.ig-text .ig-table tbody th { white-space: normal; min-width: 6.5em; }
	.ig-text .ig-table thead th { white-space: normal; }
}
@media (min-width: 1024px) { .ig-text .ig-table td.is-wrap { min-width: 20em; } }
@media (max-width: 1023px) {
	/* 縦に積む表：見出しを上、内容を下に */
	.ig-text .ig-table.is-stack thead { display: none; }
	.ig-text .ig-table.is-stack, .ig-text .ig-table.is-stack tbody, .ig-text .ig-table.is-stack tr, .ig-text .ig-table.is-stack th, .ig-text .ig-table.is-stack td { display: block; width: 100%; }
	.ig-text .ig-table.is-stack tr { border: 1px solid #C9D6E6; margin-top: 8px; }
	.ig-text .ig-table.is-stack th, .ig-text .ig-table.is-stack td { border: 0; }
	.ig-text .ig-table.is-stack th { background: #EEF4FB; font-size: 13.5px; }
	.ig-text .ig-table.is-stack td { font-size: 13.5px; line-height: 1.7; }
}
@media (max-width: 1023px) {
	/* スマホ：表・グラフ・案内カードは横幅いっぱい */
	.ig-text .ig-table, .ig-text .ig-table.is-stack, .ig-chart, .ig-next { width: 100%; max-width: none; }
	.ig-text .ig-table.is-stack tr { width: 100%; }
}