/* トップの「なぜ、コラーゲンなのか。」（includes/top-why.php）。白地のカードに金の差し色 */
.wy-why { background: #F7F8F9; padding-block: calc(70 * var(--u)) calc(60 * var(--u)); }
.wy-in { width: calc(940 * var(--u)); margin: 0 auto; }
.wy-head { text-align: center; margin-bottom: calc(40 * var(--u)); }
.wy-eyebrow { margin: 0; font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 600; font-size: calc(15 * var(--u)); letter-spacing: .3em; text-transform: uppercase; color: #B38C4A; }
.wy-title { margin: calc(10 * var(--u)) 0 0; font-family: var(--serif); font-weight: 600; font-size: calc(32 * var(--u)); line-height: 1.5; letter-spacing: .08em; color: var(--navy); text-wrap: balance; }
.wy-title em { font-style: normal; font-family: var(--latin), serif; font-size: 1.5em; line-height: 1; color: #B38C4A; margin: 0 .04em; font-variant-numeric: lining-nums; }
.wy-lead { margin: calc(14 * var(--u)) 0 0; font-size: calc(15.5 * var(--u)); line-height: 1.9; letter-spacing: .05em; color: #4A5468; }
.wy-lead sup, .wy-fig-title sup { font-size: .65em; color: #B38C4A; margin-left: .15em; }

.wy-cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)); }
.wy-card { display: flex; flex-direction: column; padding: calc(36 * var(--u)) calc(34 * var(--u)) calc(32 * var(--u)); background: #fff; border: 1px solid #E8EAEE; box-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(30,43,69,.05); }
.wy-no { margin: 0; font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 600; font-size: calc(18 * var(--u)); letter-spacing: .12em; color: #B38C4A; }
.wy-card h3 { margin: calc(8 * var(--u)) 0 0; font-family: var(--serif); font-weight: 600; font-size: calc(21 * var(--u)); line-height: 1.5; letter-spacing: .06em; color: var(--navy); }
.wy-text { margin: calc(14 * var(--u)) 0 0; padding-bottom: calc(22 * var(--u)); border-bottom: 1px solid #ECEEF1; font-size: calc(14.5 * var(--u)); line-height: 1.95; color: #4A5468; }
.wy-fig-title { margin: calc(22 * var(--u)) 0 calc(16 * var(--u)); text-align: center; font-family: var(--serif); font-weight: 600; font-size: calc(15 * var(--u)); letter-spacing: .06em; color: var(--navy); }


.wy-body { display: block; width: 100%; max-width: calc(460 * var(--u)); height: auto; margin: auto auto 0; overflow: visible; }
.wy-fig-img { mix-blend-mode: multiply; filter: brightness(1.05) contrast(1.08); }
.wy-lead-line { stroke: #8A97AB; stroke-width: 1.2; }
.wy-dot { fill: #1E2B45; stroke: #fff; stroke-width: 2; }
.wy-ring { fill: #fff; stroke: #D6BC85; stroke-width: 1.4; }
.wy-disc { fill: #1E2B45; }
.wy-body text { text-anchor: middle; fill: #fff; }
.wy-t-name { font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: .08em; }
.wy-t-num { font-family: var(--latin); font-size: 36px; font-variant-numeric: lining-nums; }
.wy-t-pre { font-size: 16px; }
.wy-body .wy-t-basis { font-size: 11px; fill: rgba(255,255,255,.8); letter-spacing: .02em; }
.wy-body .wy-t-sup { font-size: 8px; fill: #E3C887; }


.wy-bars { display: flex; justify-content: center; align-items: flex-end; gap: calc(56 * var(--u)); --plot: calc(240 * var(--u)); height: calc(300 * var(--u)); margin: auto 0 0; padding-bottom: calc(8 * var(--u)); border-bottom: 1px solid #D9DDE4; }
.wy-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: calc(96 * var(--u)); position: relative; }
.wy-bar-col { display: block; width: 100%; height: calc(var(--plot) * var(--h)); border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0; background: linear-gradient(180deg, #E3C887, #B38C4A); }
.wy-bar + .wy-bar .wy-bar-col { background: linear-gradient(180deg, #D9DEE6, #AEB7C5); }
.wy-bar-val { margin-bottom: calc(8 * var(--u)); font-family: var(--latin); font-variant-numeric: lining-nums; font-size: calc(34 * var(--u)); line-height: 1; color: var(--navy); white-space: nowrap; }
.wy-bar-val small { margin-left: .2em; font-size: .42em; color: #6B7488; }
.wy-bar-label { position: absolute; top: calc(100% + 14 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: calc(14 * var(--u)); color: var(--navy); white-space: nowrap; }
.wy-card:last-child .wy-fig-title { margin-bottom: calc(10 * var(--u)); }
.wy-card:last-child { padding-bottom: calc(60 * var(--u)); }

/* 年代ごとの傾向（数値は出さない。40代をすぎると少なくなる、だけを示す） */
.wy-decades { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(6 * var(--u)); margin-top: auto; padding-top: calc(30 * var(--u)); }
.wy-decade { position: relative; display: flex; align-items: flex-end; justify-content: center; height: calc(150 * var(--u)); padding-bottom: calc(10 * var(--u)); border-radius: calc(8 * var(--u)); }
.wy-decade.is-keep { background: linear-gradient(180deg, #E3C887, #B38C4A); }
.wy-decade.is-turn { background: linear-gradient(180deg, #E3C887 0%, #C8A766 45%, #D6DCE5 100%); }
.wy-decade.is-down { background: linear-gradient(180deg, #DDE2EA, #B9C2CF); }
.wy-decade-age { font-family: var(--latin); font-variant-numeric: lining-nums; font-size: calc(30 * var(--u)); line-height: 1; color: #fff; }
.wy-decade-age small { font-family: var(--serif); font-size: .45em; margin-left: .1em; }
.wy-decade.is-down .wy-decade-age { color: var(--navy); }
.wy-decade.is-turn::after { content: "▼"; position: absolute; right: calc(-11 * var(--u)); top: calc(-24 * var(--u)); font-size: calc(16 * var(--u)); color: #B38C4A; }
.wy-decade-key { display: flex; justify-content: center; margin-top: calc(18 * var(--u)); }
.wy-decade-key p { margin: 0; padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: 999px; background: #F4F1EA; font-size: calc(14 * var(--u)); color: #4A5468; }
.wy-decade-key b { margin-left: .4em; font-family: var(--serif); font-size: 1.15em; color: var(--navy); }
.wy-decade-note { margin: calc(12 * var(--u)) 0 0; font-size: calc(11.5 * var(--u)); line-height: 1.7; color: #6B7488; }

/* 年代ごとの肌のコラーゲン（折れ線） */
.wy-age { position: relative; margin-top: auto; }
.wy-age-chart { display: block; width: 100%; height: auto; }
.wy-age-line { fill: none; stroke: #B38C4A; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wy-age-pt { fill: #fff; stroke: #B38C4A; stroke-width: 2.5; }
.wy-age-pt.is-exact { fill: #B38C4A; stroke: #fff; }
.wy-age-v { font-family: var(--latin); font-variant-numeric: lining-nums; font-size: 15px; fill: #6B7488; text-anchor: middle; }
.wy-age-v.is-exact { font-size: 20px; fill: #1E2B45; }
.wy-age-badge { position: absolute; right: 0; top: calc(4 * var(--u)); display: flex; align-items: baseline; gap: .3em; margin: 0; padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u)); background: #1E2B45; color: #fff; font-family: var(--serif); font-size: calc(14 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(30,43,69,.2); }
.wy-age-badge b { font-weight: 600; color: #E3C887; }
.wy-age-badge em { font-style: normal; font-family: var(--latin); font-variant-numeric: lining-nums; font-size: calc(34 * var(--u)); line-height: 1; margin: 0 .05em; }

/* 年代ごとの血清亜鉛の区分（積み上げ横棒） */
.zn-blood { display: flex; flex-direction: column; gap: calc(9 * var(--u)); margin-top: auto; }
.zn-b-row { display: grid; grid-template-columns: calc(70 * var(--u)) 1fr; align-items: center; gap: calc(10 * var(--u)); }
.zn-b-age { font-family: var(--serif); font-weight: 600; font-size: calc(14 * var(--u)); color: var(--navy); white-space: nowrap; }
.zn-b-bar { display: flex; height: calc(28 * var(--u)); border-radius: calc(4 * var(--u)); overflow: hidden; }
.zn-b-bar > span { display: flex; align-items: center; justify-content: center; font-family: var(--latin); font-variant-numeric: lining-nums; font-size: calc(15 * var(--u)); color: #fff; }
.zn-b-def { background: #1E2B45; }
.zn-b-mar { background: #8E9BB0; }
.zn-b-nor { background: linear-gradient(90deg, #E3C887, #C29A55); }
.zn-b-key { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--u)) calc(16 * var(--u)); margin: calc(14 * var(--u)) 0 0; padding: 0; list-style: none; font-size: calc(12.5 * var(--u)); color: #4A5468; }
.zn-b-key li::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.15em; border-radius: 2px; }
.zn-b-key .is-def::before { background: #1E2B45; }
.zn-b-key .is-mar::before { background: #8E9BB0; }
.zn-b-key .is-nor::before { background: #C29A55; }

.wy-src { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u)) calc(18 * var(--u)); margin: calc(26 * var(--u)) 0 0; padding: 0; list-style: none; counter-reset: wysrc; font-size: calc(12 * var(--u)); color: #6B7488; }
.wy-src li { counter-increment: wysrc; }
.wy-src li::before { content: counter(wysrc) ". "; color: #B38C4A; }
.wy-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wy-note { margin: calc(8 * var(--u)) 0 0; text-align: center; font-size: calc(12 * var(--u)); color: #6B7488; }
.wy-more { margin: calc(24 * var(--u)) 0 0; text-align: center; }
.wy-more a { display: inline-flex; align-items: center; gap: .6em; padding: .7em 2em; border: 1px solid #C29A55; border-radius: 999px; font-family: var(--serif); font-weight: 600; font-size: calc(15 * var(--u)); letter-spacing: .08em; color: #8F6C30; background: #fff; transition: background .2s, color .2s; }
.wy-more a::after { content: "→"; }
.wy-more a:hover { background: #C29A55; color: #fff; }


/* 亜鉛のこと（includes/zinc-why.php） */
.wy-zinc { background: #FAF8F3; }
.zn-pairs { display: flex; flex-direction: column; gap: calc(18 * var(--u)); margin: auto 0; }
.zn-sex { margin: 0 0 calc(6 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: calc(15 * var(--u)); color: var(--navy); }
.zn-row { display: grid; grid-template-columns: calc(96 * var(--u)) 1fr calc(70 * var(--u)); align-items: center; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }
.zn-row-label { font-size: calc(13 * var(--u)); color: #4A5468; }
.zn-track { height: calc(18 * var(--u)); border-radius: 999px; background: #F1EDE4; overflow: hidden; }
.zn-fill { display: block; width: var(--w); height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E3C887, #B38C4A); }
.zn-row.is-rda .zn-fill { background: linear-gradient(90deg, #C6CEDA, #8E9BB0); }
.zn-val { font-family: var(--latin); font-variant-numeric: lining-nums; font-size: calc(24 * var(--u)); line-height: 1; color: var(--navy); white-space: nowrap; }
.zn-val small { margin-left: .15em; font-size: .5em; color: #6B7488; }
.zn-cap { margin: 0; font-size: calc(12 * var(--u)); color: #6B7488; }
.zn-chart { display: block; width: 100%; height: auto; margin: auto 0; }
.zn-grid { stroke: #E6E8EC; stroke-width: 1; }
.zn-axis { font-size: 12px; fill: #8A93A4; text-anchor: end; }
.zn-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zn-line.zn-men { stroke: #1E2B45; }
.zn-line.zn-women { stroke: #C29A55; }
.zn-pt.zn-men { fill: #1E2B45; stroke: #fff; stroke-width: 2; }
.zn-pt.zn-women { fill: #C29A55; stroke: #fff; stroke-width: 2; }
.zn-v { font-family: var(--latin); font-variant-numeric: lining-nums; font-size: 17px; text-anchor: middle; }
.zn-v-men { fill: #1E2B45; }
.zn-v-women { fill: #9C7638; }
.zn-x { font-family: var(--serif); font-weight: 600; font-size: 14px; fill: #1E2B45; text-anchor: middle; }
.zn-panel { font-family: var(--serif); font-weight: 600; font-size: 13px; fill: #1E2B45; }
.zn-panel-src { font-size: 9px; fill: #B38C4A; }
.zn-base { stroke: #B9C2CF; stroke-width: 1; }
.zn-bar { fill: #8E9BB0; }
.zn-bar.is-max { fill: #1E2B45; }
.zn-bar-v { font-family: var(--latin); font-variant-numeric: lining-nums; font-size: 18px; fill: #4A5468; text-anchor: middle; }
.zn-bar-v.is-max { font-size: 24px; fill: #1E2B45; }
.zn-bar-pct { font-size: .6em; }
.zn-legend .is-bar::before { height: .9em; width: .9em; vertical-align: -.1em; background: #8E9BB0; }
.zn-legend { display: flex; justify-content: center; gap: calc(22 * var(--u)); margin: calc(8 * var(--u)) 0 0; font-size: calc(13 * var(--u)); color: #4A5468; }
.zn-legend { flex-wrap: wrap; row-gap: 4px; }
.zn-legend span { white-space: nowrap; }
.zn-legend span::before { content: ""; display: inline-block; width: 1.6em; height: 3px; margin-right: .5em; vertical-align: middle; border-radius: 2px; }
.zn-legend .is-men::before { background: #1E2B45; }
.zn-legend .is-women::before { background: #C29A55; }

@media (max-width: 1023px) {
	.wy-why { padding-block: 44px 40px; }
	.wy-in { width: auto; padding-inline: 16px; }
	.wy-head { margin-bottom: 24px; }
	.wy-eyebrow { font-size: 12px; letter-spacing: .24em; }
	.wy-title { font-size: 23px; letter-spacing: .05em; }
	.wy-lead { font-size: 14px; text-align: left; }
	.wy-cards { grid-template-columns: 1fr; gap: 16px; }
	.wy-card { padding: 24px 18px 22px; }
	.wy-no { font-size: 15px; }
	.wy-card h3 { font-size: 18px; }
	.wy-text { font-size: 14px; padding-bottom: 16px; }
	.wy-fig-title { font-size: 14px; margin: 16px 0 12px; }
	.wy-body { max-width: none; }
	.zn-b-row { grid-template-columns: 58px 1fr; gap: 8px; }
	.zn-b-age { font-size: 12px; }
	.zn-b-bar { height: 24px; }
	.zn-b-bar > span { font-size: 12px; }
	.zn-b-key { font-size: 11.5px; justify-content: flex-start; }
	.wy-age-badge { position: static; display: inline-flex; margin-bottom: 8px; font-size: 13px; padding: 6px 12px; }
	.wy-age-badge em { font-size: 26px; }
	.wy-decade { height: 110px; padding-bottom: 8px; }
	.wy-decade-age { font-size: 22px; }
	.wy-decade.is-turn::after { right: -9px; top: -20px; font-size: 13px; }
	.wy-decade-key p { font-size: 13px; padding: 8px 14px; }
	.wy-decade-note { font-size: 11px; }
	.zn-sex { font-size: 14px; }
	.zn-row { grid-template-columns: 84px 1fr 60px; gap: 8px; }
	.zn-row-label { font-size: 12px; }
	.zn-track { height: 14px; }
	.zn-val { font-size: 20px; }
	.zn-cap, .zn-legend { font-size: 12px; }
	.wy-bars { --plot: 160px; height: 220px; gap: 40px; }
	.wy-bar { width: 72px; }
	.wy-bar-val { font-size: 26px; }
	.wy-bar-label { font-size: 12.5px; top: calc(100% + 10px); }
	.wy-card:last-child { padding-bottom: 44px; }
	.wy-src { justify-content: flex-start; font-size: 11px; gap: 2px 12px; margin-top: 18px; }
	.wy-note { text-align: left; font-size: 11px; }
	.wy-more a { font-size: 14px; }
}