@charset "utf-8";
/* デコルテコラーゲン臨床研究（research-decollete.html）
   Codex のデザイン画 sub-research-decollete.png（幅750）を 1024 に換算した数値で書く */

/* ページタイトルの帯（このページのデザイン画どおり：帯を高くし、和文と英字の間に金の短い線） */

.dc-in { width: calc(1024 * var(--u)); margin: 0 auto; padding: 0 calc(57 * var(--u)); }

/* 導入 */
.dc-intro { padding: calc(48 * var(--u)) 0 0; }
.dc-lead { padding: calc(32 * var(--u)) calc(57 * var(--u)) calc(36 * var(--u)); border: 1px solid #D6E3F1; border-radius: calc(11 * var(--u)); background: linear-gradient(180deg, #fff 0%, #F5F9FD 100%); box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(62,101,154,.08); }
.dc-lead p { font-size: calc(18.5 * var(--u)); line-height: calc(39 * var(--u)); letter-spacing: .06em; color: #1F2A3D; font-weight: 500; }
.dc-lead p + p { margin-top: calc(20 * var(--u)); }

/* 注記（ピンクの枠） */
.dc-note { display: flex; align-items: center; justify-content: center; width: calc(691 * var(--u)); min-height: calc(46 * var(--u)); margin: calc(36 * var(--u)) auto 0; padding: calc(6 * var(--u)) calc(20 * var(--u)); border: calc(1.5 * var(--u)) solid #E8AFC0; border-radius: 999px; background: linear-gradient(180deg, #FFF6F9, #FDEEF3); font-size: calc(18.5 * var(--u)); letter-spacing: .06em; color: #B8325A; font-weight: 500; text-align: center; }

/* 見出し（番号＋右に金の線） */
.dc-sec { padding-top: calc(88 * var(--u)); }
.dc-h2 { display: flex; align-items: center; font-family: var(--serif); font-weight: 700; font-size: calc(41.5 * var(--u)); line-height: calc(56 * var(--u)); letter-spacing: .04em; color: var(--navy); font-feature-settings: "palt"; }
.dc-h2::after { content: ""; flex: 1; height: calc(1.5 * var(--u)); margin-left: calc(26 * var(--u)); background: linear-gradient(90deg, var(--gold-1), #D9BE86 60%, rgba(207,175,114,.6)); }
.dc-num { margin-right: calc(20 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(42 * var(--u)); letter-spacing: 0; font-variant-numeric: lining-nums; }

/* 01 研究の背景 */
.dc-bg-body { display: flex; align-items: center; gap: calc(28 * var(--u)); margin-top: calc(28 * var(--u)); }
.dc-bg-text { flex: 1; padding-left: calc(8 * var(--u)); }
.dc-bg-text p, .dc-src-text p { font-size: calc(18.5 * var(--u)); line-height: calc(38 * var(--u)); letter-spacing: .05em; color: #1F2A3D; font-weight: 500; }
.dc-bg-text p + p, .dc-src-text p + p { margin-top: calc(16 * var(--u)); }
.dc-bg-fig { position: relative; flex: none; width: calc(430 * var(--u)); height: calc(250 * var(--u)); margin: 0; }
.dc-bg-fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(2.2) contrast(1.08); mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(75% 80% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(75% 80% at 50% 50%, #000 55%, transparent 100%); }
.dc-bg-fig figcaption { position: absolute; right: calc(16 * var(--u)); bottom: calc(6 * var(--u)); padding: 0 0 calc(4 * var(--u)) calc(26 * var(--u)); border-bottom: 1px solid var(--gold-1); font-size: calc(16 * var(--u)); letter-spacing: .04em; color: #1F2A3D; font-weight: 500; }
/* 引き出し線（斜めの部分） */
.dc-bg-fig figcaption::before { content: ""; position: absolute; left: calc(-26 * var(--u)); bottom: -1px; width: calc(90 * var(--u)); height: 1px; background: var(--gold-1); transform: rotate(45deg); transform-origin: right bottom; }

/* 02 現在の研究状況 */
.dc-status { padding-top: calc(88 * var(--u)); }
.dc-table { margin: calc(28 * var(--u)) calc(4 * var(--u)) 0; border: calc(1.5 * var(--u)) solid #BFD3EA; border-radius: calc(9 * var(--u)); overflow: hidden; background: #fff; box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(62,101,154,.06); }
.dc-table > div { display: flex; min-height: calc(64 * var(--u)); }
.dc-table > div + div { border-top: 1px solid #C9D9EC; }
.dc-table dt { flex: none; display: flex; align-items: center; justify-content: center; width: calc(265 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); background: linear-gradient(90deg, #DCEAF8, #E9F2FB); font-size: calc(20.5 * var(--u)); letter-spacing: .18em; color: var(--navy); font-weight: 700; text-align: center; }
.dc-table dd { flex: 1; display: flex; align-items: center; margin: 0; padding: calc(10 * var(--u)) calc(39 * var(--u)); font-size: calc(20 * var(--u)); letter-spacing: .1em; color: #1F2A3D; font-weight: 500; }
.dc-status-note { margin-top: calc(28 * var(--u)); font-size: calc(19.5 * var(--u)); letter-spacing: .1em; color: #1F2A3D; font-weight: 500; text-align: center; }

/* 03 コラーゲン原料について */
.dc-src { padding-top: calc(96 * var(--u)); padding-bottom: calc(56 * var(--u)); }
.dc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(42 * var(--u)); margin-top: calc(28 * var(--u)); }
.dc-card { position: relative; min-height: calc(387 * var(--u)); padding: calc(10 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)); border: 1px solid #D3E1F0; border-radius: calc(11 * var(--u)); background: radial-gradient(70% 55% at 50% 22%, #fff 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #F3F8FD 0%, #EAF2FB 100%); box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(62,101,154,.08); }
.dc-card-img { display: flex; align-items: center; justify-content: center; height: calc(176 * var(--u)); }
.dc-card-img img { width: calc(200 * var(--u)); height: auto; margin: calc(-12 * var(--u)) 0; }
.dc-card-img.is-elastin img { width: calc(300 * var(--u)); margin: 0; mix-blend-mode: multiply; transform: rotate(-12deg) scaleY(1.25); }
.dc-card-title { margin-top: calc(10 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); letter-spacing: .06em; color: var(--navy); text-align: center; font-feature-settings: "palt"; }
.dc-card-title::after { content: ""; display: block; width: calc(92 * var(--u)); height: calc(2 * var(--u)); margin: calc(16 * var(--u)) auto 0; background: linear-gradient(90deg, rgba(207,175,114,.4), var(--gold-1), rgba(207,175,114,.4)); }
.dc-card-body p { margin-top: calc(20 * var(--u)); padding-left: calc(39 * var(--u)); font-size: calc(20.5 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: .06em; color: #1F2A3D; font-weight: 500; }
.dc-src-text { margin-top: calc(32 * var(--u)); padding: 0 calc(8 * var(--u)); }
.dc-src .dc-note { margin-top: calc(40 * var(--u)); }

/* 英語 */
.dc.is-en .dc-lead p, .dc.is-en .dc-table dd, .dc.is-en .dc-card-body p { letter-spacing: .01em; }
.dc.is-en .dc-bg-text p, .dc.is-en .dc-src-text p { letter-spacing: .01em; }
.dc.is-en .dc-table dt { letter-spacing: .02em; }
.dc.is-en .dc-card-body p { padding: 0 calc(20 * var(--u)); }
.dc.is-en .dc-note { letter-spacing: .02em; }

/* ========== スマホ ========== */
@media (max-width: 1023px) {
	.dc-in { width: auto; max-width: 560px; padding: 0 18px; }
	.dc-intro { padding-top: 18px; }
	.dc-lead { padding: 16px 18px 18px; border-radius: 10px; box-shadow: 0 4px 14px rgba(62,101,154,.08); }
	.dc-lead p { font-size: 14.5px; line-height: 1.85; letter-spacing: .04em; }
	.dc-lead p + p { margin-top: 8px; }
	.dc-note { width: 100%; min-height: 34px; margin-top: 16px; padding: 5px 8px; border-width: 1px; font-size: 12px; letter-spacing: 0; }
	.dc-sec { padding-top: 34px; }
	.dc-h2 { font-size: 22px; line-height: 1.4; }
	.dc-h2::after { margin-left: 12px; height: 1px; }
	.dc-num { margin-right: 10px; font-size: 26px; }
	.dc-bg-body { flex-direction: column; gap: 4px; margin-top: 12px; }
	.dc-bg-text br, .dc-card-body br { display: none; }
	.dc-bg-text { padding-left: 0; }
	.dc-bg-text p, .dc-src-text p { font-size: 14.5px; line-height: 1.85; letter-spacing: .03em; }
	.dc-bg-text p + p, .dc-src-text p + p { margin-top: 8px; }
	.dc-src-text { margin-top: 14px; padding: 0; }
	.dc-bg-fig { width: 100%; height: auto; aspect-ratio: 2.4; }
	.dc-bg-fig figcaption { right: 0; bottom: 0; padding: 0 0 3px 14px; font-size: 10.5px; letter-spacing: 0; white-space: nowrap; }
	.dc-bg-fig figcaption::before { left: -14px; width: 40px; }
	.dc-status { padding-top: 34px; }
	.dc-table { margin: 14px 0 0; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; display: grid; gap: 8px; }
	.dc-table > div { display: block; min-height: 0; border: 1px solid #BFD3EA; border-radius: 6px; overflow: hidden; background: #fff; }
	.dc-table > div + div { border-top: 1px solid #BFD3EA; }
	.dc-table dt { display: block; width: auto; padding: 5px 16px; text-align: left; font-size: 14px; letter-spacing: .08em; }
	.dc-table dd { display: block; padding: 7px 16px; font-size: 14px; letter-spacing: .03em; }
	.dc-status-note { margin-top: 12px; font-size: 13px; letter-spacing: .02em; }
	.dc-src { padding-top: 34px; padding-bottom: 34px; }
	.dc-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
	.dc-card { display: flex; align-items: center; min-height: 0; padding: 14px 14px 16px 6px; border-radius: 8px; box-shadow: 0 3px 12px rgba(62,101,154,.08); }
	.dc-card-img { flex: 0 0 38%; height: 130px; border-right: 1px solid #C9D6E6; margin-right: 18px; }
	.dc-card-img img { width: 120px; margin: 0; }
	.dc-card-img.is-elastin img { width: 150px; }
	.dc-card-body { flex: 1; min-width: 0; }
	.dc-card-title { margin-top: 0; font-size: 19px; line-height: 1.4; text-align: left; }
	.dc-card-title::after { width: 64px; height: 1.5px; margin: 6px 0 0; }
	.dc-card-body p { margin-top: 8px; padding-left: 0; font-size: 14px; line-height: 1.7; letter-spacing: 0; }
	.dc-src .dc-note { margin-top: 16px; }
	.dc.is-en .dc-card-body p { padding: 0; }
}

/* ========== 英語表示（?lang=en）だけの調整。日本語表示には効かない ========== */
@media (min-width: 1024px) {
	/* 「研究内容は…」の注意書き：英文でも1行に収める */
	html[lang="en"] .dc-note { width: fit-content; max-width: 100%; padding-inline: calc(28 * var(--u)); font-size: calc(17 * var(--u)); letter-spacing: 0; white-space: nowrap; }
}

/* 成分解説へのリンク */
.dc-src-text a { color: var(--blue-2); border-bottom: 1px solid #A9C4E2; }
.dc-src-text a:hover { border-bottom-color: currentColor; }