@charset "utf-8";
/* 健康寿命とは（longevity）：Codex のデザイン画（幅733→1024換算）に合わせる */

.lg-pc { display: inline; }

/* ページタイトルの帯：このページは左寄せ（タイトルの下に金の線、その下に英字） */

/* セクション共通 */
.lg .lg-sec { padding: 0 0 calc(56 * var(--u)); }
.lg .lg-about { padding-top: calc(48 * var(--u)); padding-bottom: calc(64 * var(--u)); }
.lg .lg-elastin { padding-bottom: calc(52 * var(--u)); }
.lg-h2 { display: flex; align-items: center; justify-content: center; gap: calc(20 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: calc(37 * var(--u)); line-height: calc(52 * var(--u)); letter-spacing: .05em; color: var(--navy); font-feature-settings: "palt"; text-align: center; }
.lg-h2::before, .lg-h2::after { content: ""; flex: 1 1 0; max-width: calc(155 * var(--u)); min-width: calc(30 * var(--u)); height: calc(1.5 * var(--u)); background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
.lg-h2::before { margin-right: calc(4 * var(--u)); }
.lg-h2::after { margin-left: calc(4 * var(--u)); transform: scaleX(-1); }
.lg-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin-right: calc(-2 * var(--u)); border-radius: 50%; border: 1px solid #E8BFCD; background: radial-gradient(circle at 40% 35%, #fff, #FBE8EF); font-family: var(--serif); font-weight: 600; font-size: calc(24 * var(--u)); letter-spacing: 0; color: var(--navy); }
.lg-text { font-size: calc(20.5 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: .06em; color: #18233A; font-weight: 500; }
.lg-text p + p { margin-top: calc(14 * var(--u)); }
.lg-note { margin: calc(36 * var(--u)) calc(28 * var(--u)) 0; padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(90deg, #E5EEF8, #EDF3FA); text-align: center; font-size: calc(15 * var(--u)); line-height: calc(25 * var(--u)); letter-spacing: .04em; color: #2B3B55; }

/* 01 健康寿命とは */
.lg-catch { margin-top: calc(24 * var(--u)); text-align: center; font-family: var(--serif); font-weight: 700; font-size: calc(47 * var(--u)); line-height: calc(64 * var(--u)); letter-spacing: .08em; color: var(--navy); font-feature-settings: "palt"; }
.lg-catch::after { content: ""; display: block; width: calc(105 * var(--u)); height: calc(2 * var(--u)); margin: calc(22 * var(--u)) auto 0; background: linear-gradient(90deg, rgba(207,175,114,.4), var(--gold-1), rgba(207,175,114,.4)); }
.lg-about .lg-text { margin: calc(28 * var(--u)) 0 0 calc(54 * var(--u)); }
.lg-chart { position: relative; margin: calc(40 * var(--u)) calc(58 * var(--u)) 0 calc(55 * var(--u)); }
.lg-chart-row { position: relative; display: flex; align-items: center; height: calc(40 * var(--u)); }
.lg-chart-row + .lg-chart-row { margin-top: calc(50 * var(--u)); }
.lg-chart-label { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: center; width: calc(140 * var(--u)); height: calc(40 * var(--u)); border-radius: 999px; background: linear-gradient(180deg, #EAF2FB, #DDE9F6); font-family: var(--serif); font-weight: 700; font-size: calc(18.5 * var(--u)); letter-spacing: .08em; color: var(--navy); }
.lg-chart-bar { position: relative; height: calc(16 * var(--u)); margin-left: calc(-4 * var(--u)); background: linear-gradient(90deg, #D3E5F7, #7DAADC 50%, #3474BE); }
.lg-chart-bar::after { content: ""; position: absolute; right: calc(-11 * var(--u)); top: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(-11 * var(--u)); border-radius: 50%; border: calc(2.5 * var(--u)) solid #3F7EC4; background: #fff; box-sizing: border-box; }
.is-life .lg-chart-bar { flex: 1; }
.is-healthy .lg-chart-bar { width: calc(329 * var(--u)); background: linear-gradient(90deg, #D9E9F8, #6FA2D8 70%, #3F7EC4); }
/* 平均寿命と健康寿命の差（点線の縦線とピンクの帯） */
.lg-chart-gap { position: absolute; left: calc(465 * var(--u)); right: 0; top: 50%; display: flex; align-items: center; justify-content: center; height: calc(70 * var(--u)); margin-top: calc(-30 * var(--u)); padding: 0 calc(46 * var(--u)); background: linear-gradient(90deg, rgba(248,214,226,.35), rgba(248,214,226,.8) 50%, rgba(248,214,226,.35)); text-align: center; font-size: calc(15.5 * var(--u)); line-height: calc(26 * var(--u)); letter-spacing: .05em; color: #2B3B55; font-weight: 500; }
.lg-chart-gap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: calc(-90 * var(--u)); border-left: 1.5px dashed #A6B4CC; border-right: 1.5px dashed #A6B4CC; pointer-events: none; }
.lg-chart-gap i { position: relative; flex: 1; height: 1.5px; background: linear-gradient(to right, #C46A84 55%, transparent 0) left center / calc(6 * var(--u)) 1.5px repeat-x; }
.lg-chart-gap i::before { content: ""; position: absolute; top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-top: calc(-3.5 * var(--u)); border-top: 1.5px solid #C46A84; border-left: 1.5px solid #C46A84; }
.lg-chart-gap i.is-l { margin: 0 calc(10 * var(--u)) 0 calc(-36 * var(--u)); }
.lg-chart-gap i.is-l::before { left: 0; transform: rotate(-45deg); }
.lg-chart-gap i.is-r { margin: 0 calc(-36 * var(--u)) 0 calc(10 * var(--u)); }
.lg-chart-gap i.is-r::before { right: 0; transform: rotate(135deg); }
.lg-chart + .lg-text { margin-top: calc(36 * var(--u)) !important; }

.lg-text strong { font-weight: 700; color: var(--navy); }
/* 参考資料（著書） */
.lg-ref { margin: calc(40 * var(--u)) 0 0 calc(54 * var(--u)); padding: calc(20 * var(--u)) calc(28 * var(--u)); border-left: calc(3 * var(--u)) solid var(--gold-1); background: linear-gradient(90deg, #F5F8FC, rgba(245,248,252,0)); }
.lg-ref-title { font-family: var(--serif); font-weight: 700; font-size: calc(21 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: .08em; color: var(--navy); }
.lg-ref p { margin-top: calc(8 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: .05em; color: #18233A; font-weight: 500; }
.lg-ref strong { font-weight: 700; color: var(--navy); }

/* 02 ECM（細胞外マトリクス）とは */
.lg-ecm-body { display: flex; align-items: stretch; margin-top: calc(28 * var(--u)); }
.lg-ecm-fig { position: relative; flex: none; width: calc(500 * var(--u)); height: calc(387 * var(--u)); margin: 0 0 0 calc(-14 * var(--u)); }
.lg-ecm-fig img { position: absolute; inset: 0 calc(10 * var(--u)) 0 calc(-20 * var(--u)); width: calc(100% + 10 * var(--u)); height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent); mask-image: radial-gradient(closest-side, #000 80%, transparent); }
.lg-ecm-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-ecm-lines path { fill: none; stroke: #2B3B55; stroke-width: .8; }
.lg-ecm-dots circle { fill: #2B3B55; }
.lg-ecm-labels text { font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; fill: #1F2A3D; }
.lg-ecm-side { flex: 1; margin-left: calc(30 * var(--u)); padding-left: calc(30 * var(--u)); border-left: 1px solid #B7C6DA; }
.lg-ecm-side .lg-text { font-size: calc(19 * var(--u)); line-height: calc(34 * var(--u)); }
.lg-icons { display: flex; gap: calc(14 * var(--u)); margin-top: calc(26 * var(--u)); }
.lg-icons li { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); width: calc(80 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: .06em; color: var(--navy); white-space: nowrap; }
.lg-icons span { display: flex; align-items: center; justify-content: center; width: calc(78 * var(--u)); height: calc(78 * var(--u)); border-radius: 50%; border: 1px solid #B9CDE6; background: radial-gradient(circle at 40% 35%, #fff, #E6EFF9); }
.lg-icons svg { width: 74%; height: 74%; fill: none; stroke: #3E659A; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-icons svg .dot circle { fill: #3E659A; stroke: none; }
.lg-ecm-more { margin-top: calc(36 * var(--u)); padding: calc(26 * var(--u)) calc(32 * var(--u)); border: 1px solid #D3DFEC; border-radius: calc(12 * var(--u)); background: #fff; }
.lg-ecm-more-lead { font-size: calc(18 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: .05em; font-weight: 700; color: var(--navy); }
.lg-ecm-list { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
.lg-ecm-list li { padding: calc(6 * var(--u)) calc(18 * var(--u)); border-radius: 999px; background: linear-gradient(180deg, #EEF4FB, #E3EDF8); font-size: calc(16.5 * var(--u)); letter-spacing: .04em; font-weight: 500; color: #1F2A3D; }
.lg-ecm-more .lg-text { margin-top: calc(18 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(34 * var(--u)); }
.lg-ecm .lg-note { margin-top: calc(32 * var(--u)); }

/* 03 魚皮コラーゲンとウロココラーゲンの違い */
.lg-fish-body { display: flex; align-items: center; margin-top: calc(28 * var(--u)); }
.lg-fish-img { flex: none; width: calc(290 * var(--u)); height: calc(193 * var(--u)); margin: calc(30 * var(--u)) calc(4 * var(--u)) 0 calc(-14 * var(--u)); object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent); mask-image: radial-gradient(closest-side, #000 75%, transparent); }
.lg-table { flex: 1; border-collapse: collapse; text-align: center; font-size: calc(17.5 * var(--u)); letter-spacing: .04em; color: #1F2A3D; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(62,101,154,.08); }
.lg-table th, .lg-table td { height: calc(43 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border: 1px solid #D3DFEC; font-weight: 500; }
.lg-table thead td { border: 0; border-bottom: 1px solid #D3DFEC; background: transparent; }
.lg-table thead th { height: calc(57 * var(--u)); font-weight: 700; line-height: 1.3; color: var(--navy); }
.lg-table thead th small { display: block; font-size: .85em; font-weight: 500; }
.lg-table thead .is-skin { width: 37%; background: linear-gradient(180deg, #DCEBF9, #CFE3F6); }
.lg-table thead .is-scale { width: 37%; background: linear-gradient(180deg, #FBE6EE, #F6D9E4); }
.lg-table tbody th { background: #EEF3F9; font-weight: 700; color: var(--navy); }
.lg-table tbody td { background: #fff; }
.lg-table tbody td.is-scale { background: #FDF3F6; }
.lg-check { display: block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin: 0 auto; fill: none; stroke: #3E659A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.lg-fish-text { margin: calc(28 * var(--u)) calc(28 * var(--u)) 0; font-size: calc(18.5 * var(--u)); line-height: calc(36 * var(--u)); }
.lg-table td small, .lg-table thead th small { display: block; font-size: .82em; font-weight: 500; line-height: 1.4; color: #4A5568; }
.lg-table tbody td { line-height: 1.4; }

/* 04 エラスチンの役割 */
.lg-elastin-box { position: relative; margin: calc(28 * var(--u)) calc(-14 * var(--u)) 0; padding: calc(40 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u)); border-radius: calc(14 * var(--u)); background: linear-gradient(180deg, #EEF4FB, #E8F0F9); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(62,101,154,.08); overflow: hidden; }
.lg-elastin-text { position: relative; z-index: 1; max-width: calc(580 * var(--u)); padding-left: calc(28 * var(--u)); border-left: calc(2.5 * var(--u)) solid var(--gold-1); font-size: calc(20 * var(--u)); line-height: calc(34 * var(--u)); }
.lg-elastin-img { position: absolute; right: calc(-20 * var(--u)); top: calc(10 * var(--u)); width: calc(440 * var(--u)); height: calc(220 * var(--u)); object-fit: cover; mix-blend-mode: multiply; }
.lg-elastin .lg-note { position: relative; z-index: 1; margin-top: calc(30 * var(--u)); background: linear-gradient(90deg, rgba(220,232,245,.95), rgba(228,237,247,.95)); }

/* ========== スマホ ========== */
@media (max-width: 1023px) {
	.lg-pc { display: none; }

	.lg .lg-sec { padding: 0 0 44px; }
	.lg .lg-about { padding-top: 28px; padding-bottom: 44px; }
	.lg .lg-elastin { padding-bottom: 36px; }
	.lg-h2 { gap: 8px; font-size: 17.5px; line-height: 1.45; letter-spacing: .04em; white-space: normal; }
	.lg-h2::before, .lg-h2::after { flex: 1 1 20px; min-width: 10px; height: 1px; margin: 0; }
	.lg-num { width: 32px; height: 32px; margin-right: 0; font-size: 14px; }
	.lg-text, .lg-ecm-side .lg-text, .lg-elastin-text { font-size: 15px; line-height: 1.85; letter-spacing: .04em; }
	.lg-text p + p { margin-top: 10px; }
	.lg-note { margin: 20px 0 0; padding: 8px 8px; border-radius: 6px; font-size: 11.5px; line-height: 1.6; letter-spacing: 0; }

	.lg-catch { margin-top: 14px; font-size: 22px; line-height: 1.5; letter-spacing: .04em; }
	.lg-catch::after { width: 64px; height: 1.5px; margin-top: 10px; }
	.lg-about .lg-text { margin: 18px 0 0; }
	.lg-chart { margin: 26px 0 0; }
	.lg-chart-row { height: 30px; }
	.lg-chart-row + .lg-chart-row { margin-top: 34px; }
	.lg-chart-label { width: 92px; height: 28px; font-size: 13.5px; letter-spacing: .04em; }
	.lg-chart-bar { height: 10px; margin-left: -2px; }
	.lg-chart-bar::after { right: -8px; width: 16px; height: 16px; margin-top: -8px; border-width: 2px; }
	.is-healthy .lg-chart-bar { width: 36%; }
	.lg-chart-gap { left: calc(90px + 36%); height: 50px; margin-top: -22px; padding: 0 4px; font-size: 11px; line-height: 1.5; letter-spacing: .02em; }
	.lg-chart-gap::before { top: -62px; }
	.lg-chart-gap i { display: none; }
	.lg-chart + .lg-text { margin-top: 26px !important; }

	.lg-ecm-body { display: block; margin-top: 18px; }
	.lg-ecm-fig { width: auto; height: auto; aspect-ratio: 355 / 275; margin: 0; }
	.lg-ecm-fig img { inset: 4% 4% 4% 4%; width: 92%; height: 92%; }
	.lg-ecm-labels text { font-size: 13px; }
	.lg-ecm-side { margin: 16px 0 0; padding: 0; border: 0; }
	.lg-icons { justify-content: space-between; gap: 0; margin-top: 18px; padding: 0 6px; }
	.lg-icons li { width: 64px; gap: 6px; font-size: 13px; }
	.lg-icons span { width: 58px; height: 58px; }
	.lg-ecm .lg-note { margin-top: 20px; }
	.lg-ref { margin: 26px 0 0; padding: 14px 16px; border-left-width: 2px; }
	.lg-ref-title { font-size: 16px; line-height: 1.5; }
	.lg-ref p { margin-top: 4px; font-size: 14.5px; line-height: 1.8; }
	.lg-ecm-more { margin-top: 22px; padding: 16px 14px; border-radius: 10px; }
	.lg-ecm-more-lead { font-size: 14.5px; line-height: 1.7; }
	.lg-ecm-list { gap: 6px; margin-top: 10px; }
	.lg-ecm-list li { padding: 4px 12px; font-size: 13px; }
	.lg-ecm-more .lg-text { margin-top: 12px; font-size: 15px; line-height: 1.85; }
	.lg-fish-text { margin: 16px 0 0; font-size: 15px; line-height: 1.85; }
	.lg-elastin-text { max-width: none; }

	.lg-fish-body { display: block; margin-top: 16px; }
	.lg-fish-img { width: 72%; height: auto; aspect-ratio: 2 / 1; margin: 0 auto 8px; }
	.lg-table { width: 100%; font-size: 13px; letter-spacing: 0; }
	.lg-table thead th { font-size: 12px; }
	.lg-table th, .lg-table td { height: 34px; padding: 4px 6px; }
	.lg-table thead th { height: 46px; }
	.lg-table tbody th { width: 30%; }
	.lg-check { width: 18px; height: 18px; }

	.lg-elastin-box { margin: 18px 0 0; padding: 22px 16px 16px; border-radius: 10px; }
	.lg-elastin-text { padding-left: 14px; border-left-width: 2px; }
	.lg-elastin-img { right: -40px; top: 10px; width: 260px; height: 130px; opacity: .8; }
	.lg-elastin .lg-note { margin-top: 18px; }
}

/* ========== 英語表示（?lang=en）だけの調整。日本語表示には効かない ========== */
/* グラフの「Average lifespan」などの札を1行に、体の部位（Blood vessels）を枠内に収める */
@media (min-width: 1024px) {
	html[lang="en"] .lg-chart-label { width: calc(170 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: .02em; white-space: nowrap; }
	/* 札が 30 広がった分、健康寿命のバーを縮めて点線の位置にそろえる */
	html[lang="en"] .is-healthy .lg-chart-bar { width: calc(299 * var(--u)); }
	html[lang="en"] .lg-icons li { font-size: calc(14 * var(--u)); letter-spacing: .01em; line-height: 1.25; white-space: normal; text-align: center; }
}
@media (max-width: 1023px) {
	html[lang="en"] .lg-chart-label { width: 116px; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
	html[lang="en"] .lg-chart-gap { left: calc(114px + 36%); }
	html[lang="en"] .lg-icons li { font-size: 12px; letter-spacing: 0; line-height: 1.25; white-space: normal; text-align: center; }
}

/* 02 健康寿命とECM：詳しい説明は成分解説（/ingredients/）へ移したので、リンクを並べる */
.lg-next .lg-text { margin-top: calc(20 * var(--u)); }
.lg-next-links { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(14 * var(--u)); margin-top: calc(18 * var(--u)); }
.lg-next-links a { display: inline-flex; align-items: center; min-height: calc(46 * var(--u)); padding: 0 calc(22 * 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)); }
.lg-next-links a:hover { background: #EEF4FB; }
.lg-next .lg-note { margin-top: calc(18 * var(--u)); }
@media (max-width: 1023px) {
	.lg-next .lg-text { margin-top: 12px; }
	.lg-next-links { gap: 8px; margin-top: 12px; }
	.lg-next-links a { min-height: 40px; padding: 0 16px; font-size: 14px; }
}