@charset "utf-8";
/* 研究コラム（column/ の一覧と記事）
   Codex のデザイン画 column-pc.png（幅724）を 1024 に換算した数値で書く。スマホは column-sp.png */

/* ページタイトルの帯（左寄せ。英字は金色で線なし） */

/* カテゴリーの札（PC はどちらもピンク） */
.cl-tag { display: inline-flex; align-items: center; height: calc(20 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: #F9DCE5; color: #A9455F; font-size: max(10px, calc(11.5 * var(--u))); font-weight: 500; letter-spacing: .04em; white-space: nowrap; }

/* ========== 一覧 ========== */
.cl-list { width: calc(1024 * var(--u)); margin: 0 auto; padding: calc(22 * var(--u)) 0 calc(34 * var(--u)); }
.cl-lead { font-family: var(--serif); font-weight: 700; font-size: calc(21 * var(--u)); line-height: 1.5; letter-spacing: .06em; color: var(--navy); text-align: center; font-feature-settings: "palt"; }
.cl-tabs { display: flex; justify-content: center; gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u)); }
.cl-tab { width: calc(190 * var(--u)); height: calc(41 * var(--u)); border: 1px solid #AFC0D6; border-radius: calc(7 * var(--u)); background: #fff; font-family: var(--serif); font-weight: 600; font-size: calc(15 * var(--u)); letter-spacing: .06em; color: var(--navy); cursor: pointer; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(30,53,96,.06); }
.cl-tab:first-child { width: calc(176 * var(--u)); }
.cl-tab:nth-child(2) { width: calc(205 * var(--u)); }
.cl-tab.is-on { border-color: var(--navy); background: linear-gradient(180deg, #2C4A7E, var(--navy)); color: #fff; }
.cl-tab:not(.is-on):hover { background: #F2F6FB; }

.cl-grid { display: grid; grid-template-columns: repeat(2, calc(421 * var(--u))); gap: calc(16 * var(--u)) calc(18 * var(--u)); justify-content: center; margin-top: calc(28 * var(--u)); }
.cl-card[hidden] { display: none; }
.cl-card a { position: relative; display: block; height: 100%; padding: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff; box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) rgba(30,53,96,.10); transition: box-shadow .2s; }
.cl-card a:hover { box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(30,53,96,.18); }
.cl-thumb { display: block; overflow: hidden; height: calc(208 * var(--u)); border-radius: calc(4 * var(--u)); background: #F4F6F9; }
.cl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-thumb img[src*="collagen1"] { object-position: center 30%; }
.cl-thumb img[src*="pancreas"] { object-fit: contain; background: #fff; }
.cl-thumb.is-text { display: flex; align-items: center; justify-content: center; padding: 0 calc(20 * var(--u)); background: linear-gradient(180deg, #DCEBFA, #CFE2F6); }
.cl-thumb.is-text b { max-width: calc(270 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(31 * var(--u)); line-height: 1.45; letter-spacing: .06em; color: var(--navy); text-align: center; font-feature-settings: "palt"; }
.cl-card-body { position: relative; display: block; padding: calc(14 * var(--u)) calc(56 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)); }
.cl-meta { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(13.5 * var(--u)); letter-spacing: .04em; color: #3E4A5E; font-weight: 500; }
.cl-card-title { display: block; margin-top: calc(8 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(20 * var(--u)); line-height: 1.5; letter-spacing: .04em; color: var(--navy); font-feature-settings: "palt"; }
/* 右下の金の矢印 */
.cl-arrow { position: absolute; right: calc(12 * var(--u)); bottom: calc(24 * var(--u)); width: calc(26 * var(--u)); height: 1px; background: var(--gold-2); }
.cl-arrow::after { content: ""; position: absolute; right: 0; top: calc(-4 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-top: 1px solid var(--gold-2); border-right: 1px solid var(--gold-2); transform: rotate(45deg); transform-origin: 100% 0; }

/* 著者の帯 */
.cl-author { display: flex; align-items: center; width: calc(860 * var(--u)); height: calc(120 * var(--u)); margin: calc(34 * var(--u)) auto 0; padding-left: calc(84 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(90deg, #F1F5FA, #F7F9FC 60%, #F1F5FA); box-shadow: 0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(30,53,96,.06); }
.cl-author-photo { width: calc(102 * var(--u)); height: calc(102 * var(--u)); border-radius: 50%; object-fit: cover; box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(30,53,96,.15); }
.cl-author-name { margin-left: calc(28 * var(--u)); padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(28 * var(--u)); border-left: 1px solid var(--gold-1); }
.cl-author-label { font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: .1em; color: var(--gold-2); }
.cl-author-nm { margin-top: calc(4 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.3; letter-spacing: .14em; color: var(--navy); }
.cl-author-title { margin-top: calc(4 * var(--u)); font-size: calc(14.5 * var(--u)); letter-spacing: .08em; color: #3E4A5E; font-weight: 500; }
.cl-author-link { position: relative; margin-left: calc(62 * var(--u)); padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)) calc(44 * var(--u)); border-left: 1px solid var(--gold-1); font-size: calc(15.5 * var(--u)); letter-spacing: .06em; color: var(--blue-2); font-weight: 500; }
.cl-author-link::after { content: ""; display: inline-block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(10 * var(--u)); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg) translateY(-15%); }
.cl-author-link:hover { text-decoration: underline; }

/* ========== 記事 ========== */
.cl-article { width: calc(1024 * var(--u)); margin: 0 auto; padding: calc(28 * var(--u)) 0 calc(30 * var(--u)); }
.cl-head { text-align: center; }
.cl-title { display: flex; align-items: center; justify-content: center; gap: calc(30 * var(--u)); padding: 0 calc(70 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(40 * var(--u)); line-height: 1.4; letter-spacing: .06em; color: var(--navy); font-feature-settings: "palt"; }
.cl-title::before, .cl-title::after { content: ""; flex: 1 0 calc(40 * var(--u)); max-width: calc(153 * var(--u)); height: 1px; background: var(--gold-1); }
.cl-head-meta { display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: .04em; color: #273246; font-weight: 500; }
.cl-head-meta time { display: flex; align-items: center; gap: calc(22 * var(--u)); }
.cl-head-meta time::after { content: ""; width: 1px; height: calc(18 * var(--u)); background: #5B6678; }
.cl-byline { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: .06em; color: #273246; font-weight: 500; }
.cl-byline svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: var(--gold-2); stroke-width: 2; }
.cl-eyecatch { margin-top: calc(16 * var(--u)); text-align: center; }
.cl-eyecatch img { display: inline-block; width: auto; max-width: calc(460 * var(--u)); max-height: calc(270 * var(--u)); }

/* 本文 */
.cl-body { width: calc(686 * var(--u)); margin: calc(20 * var(--u)) auto 0; font-size: calc(17 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: .05em; color: #273246; font-weight: 500; }
.cl-body p + p { margin-top: calc(16 * var(--u)); }
.cl-body h2 { display: flex; align-items: center; gap: calc(18 * var(--u)); margin: calc(34 * var(--u)) 0 calc(12 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.45; letter-spacing: .04em; color: var(--navy); font-feature-settings: "palt"; }
.cl-body h2::after { content: ""; flex: 1 0 calc(60 * var(--u)); height: 1px; background: var(--gold-1); }
.cl-body h3 { margin: calc(30 * var(--u)) 0 calc(10 * var(--u)); padding-left: calc(18 * var(--u)); border-left: calc(5 * var(--u)) solid #9DBDE0; font-family: var(--serif); font-weight: 700; font-size: calc(22 * var(--u)); line-height: 1.5; letter-spacing: .04em; color: var(--navy); font-feature-settings: "palt"; }
.cl-body > :first-child { margin-top: 0; }
/* 元の記事で整形済みテキストだった段落（等幅にせず、改行だけ元のまま） */
.cl-body .cl-pre { font-family: inherit; }
/* 題名は語の途中で折り返さない（折り返す位置は includes/column.php の wrap） */
.cl-thumb.is-text b, .cl-card-title, .cl-title, .cl-related-title { word-break: keep-all; overflow-wrap: anywhere; }

/* この記事を書いた人 */
.cl-writer { display: flex; align-items: center; width: calc(686 * var(--u)); height: calc(100 * var(--u)); margin: calc(40 * var(--u)) auto 0; padding-left: calc(127 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(90deg, #EEF3F9, #F6F8FB 60%, #EEF3F9); box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(30,53,96,.06); }
.cl-writer-photo { width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; object-fit: cover; box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(30,53,96,.15); }
.cl-writer-name { margin-left: calc(36 * var(--u)); padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(34 * var(--u)); border-left: 1px solid var(--gold-1); }
.cl-writer-label { font-size: calc(14 * var(--u)); font-weight: 700; letter-spacing: .08em; color: var(--gold-2); }
.cl-writer-label .is-sp { display: none; }
.cl-writer-nm { margin-top: calc(2 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(23 * var(--u)); line-height: 1.35; letter-spacing: .14em; color: var(--navy); }
.cl-writer-title { margin-top: calc(2 * var(--u)); font-size: calc(13.5 * var(--u)); letter-spacing: .06em; color: #3E4A5E; font-weight: 500; }

/* 前後の記事と一覧へ戻る */
.cl-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: calc(764 * var(--u)); margin: calc(24 * var(--u)) auto 0; }
.cl-pager-prev, .cl-pager-next { position: relative; display: block; font-family: var(--serif); font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.45; letter-spacing: .04em; color: var(--navy); }
.cl-pager small { display: block; font-size: inherit; }
.cl-pager-prev { padding-left: calc(32 * var(--u)); }
.cl-pager-next { padding-right: calc(32 * var(--u)); text-align: right; }
.cl-pager-prev::before, .cl-pager-next::after { content: ""; position: absolute; top: 50%; width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(-6 * var(--u)); border-top: 1.5px solid var(--navy); }
.cl-pager-prev::before { left: calc(4 * var(--u)); border-left: 1.5px solid var(--navy); transform: rotate(-45deg); }
.cl-pager-next::after { right: calc(4 * var(--u)); border-right: 1.5px solid var(--navy); transform: rotate(45deg); }
.cl-pager-prev:hover, .cl-pager-next:hover { color: var(--blue-2); }
.cl-back { display: inline-flex; align-items: center; justify-content: center; width: calc(238 * var(--u)); height: calc(42 * var(--u)); border: 1.5px solid #4D6A95; border-radius: calc(5 * var(--u)); background: #fff; font-family: var(--serif); font-weight: 700; font-size: calc(15 * var(--u)); letter-spacing: .06em; color: var(--navy); box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(30,53,96,.08); }
.cl-back:hover { background: #F2F6FB; }

/* 関連記事（スマホだけ） */
.cl-related { display: none; }

/* ========== スマホ ========== */
@media (max-width: 1023px) {

	.cl-tag { height: 20px; padding: 0 12px; font-size: 11px; }
	.cl-tag.is-collagen { background: #DCEAF8; color: #2F578C; }

	/* 一覧 */
	.cl-list { width: auto; max-width: 560px; padding: 18px 16px 30px; }
	.cl-lead { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 17px; letter-spacing: .04em; }
	.cl-lead::before, .cl-lead::after { content: ""; flex: 1 1 40px; max-width: 60px; height: 1px; background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
	.cl-lead::after { transform: scaleX(-1); }
	.cl-tabs { gap: 8px; margin-top: 16px; }
	.cl-tab, .cl-tab:first-child, .cl-tab:nth-child(2) { width: auto; height: 34px; padding: 0 6px; border-radius: 999px; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; box-shadow: none; }
	.cl-tab:first-child { flex: 0 0 26%; }
	.cl-tab:nth-child(2) { flex: 1 1 auto; }
	.cl-tab:nth-child(3) { flex: 0 0 31%; }
	.cl-tab.is-on { border-color: var(--rose); background: linear-gradient(180deg, #D17C95, var(--rose)); }
	.cl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
	.cl-card a { display: flex; align-items: center; gap: 14px; padding: 7px; border-radius: 8px; box-shadow: 0 2px 10px rgba(30,53,96,.10); }
	.cl-thumb { flex: 0 0 47%; height: 98px; border-radius: 4px; }
	.cl-thumb.is-text { padding: 0 10px; }
	.cl-thumb.is-text b { max-width: none; font-size: 15px; line-height: 1.45; letter-spacing: .04em; }
	.cl-card-body { flex: 1; min-width: 0; padding: 4px 4px 4px 0; }
	.cl-meta { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 12.5px; }
	.cl-card-title { margin-top: 6px; font-size: 16px; line-height: 1.45; }
	.cl-arrow { display: none; }
	.cl-author { display: none; }

	/* 記事 */
	.cl-article { width: auto; max-width: 560px; padding: 16px 16px 28px; }
	.cl-head { display: grid; grid-template-columns: 1fr auto; text-align: left; }
	.cl-head-meta { display: contents; }
	.cl-head-meta time { grid-row: 1; grid-column: 2; font-size: 13px; color: #3E4A5E; }
	.cl-head-meta time::after { display: none; }
	.cl-head-meta .cl-tag { grid-row: 1; grid-column: 1; justify-self: start; }
	.cl-title { grid-column: 1 / -1; display: block; margin-top: 8px; padding: 0; font-size: 25px; line-height: 1.45; letter-spacing: .04em; }
	.cl-title::before, .cl-title::after { display: none; }
	.cl-byline { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; font-size: 13px; }
	.cl-byline svg { display: none; }
	.cl-eyecatch { margin-top: 10px; }
	.cl-eyecatch img { max-width: 92%; max-height: 300px; }
	.cl-body { width: auto; margin-top: 16px; padding: 0 4px; font-size: 15.5px; line-height: 1.9; letter-spacing: .04em; }
	.cl-body p + p { margin-top: 14px; }
	.cl-body h2 { justify-content: center; gap: 14px; margin: 26px -4px 10px; font-size: 20px; text-align: center; }
	.cl-body h2::before { content: ""; flex: 1 0 24px; height: 1px; background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
	.cl-body h2::after { flex: 1 0 24px; background: linear-gradient(90deg, var(--gold-1), rgba(207,175,114,0)); }
	.cl-body h3 { margin: 24px 0 8px; padding-left: 12px; border-left-width: 4px; font-size: 18px; }

	.cl-writer { width: auto; height: auto; margin-top: 26px; padding: 14px 16px 14px 18%; border-radius: 10px; background: linear-gradient(90deg, #E1ECF8, #EDF3FA 60%, #E1ECF8); }
	.cl-writer-photo { width: 72px; height: 72px; }
	.cl-writer-name { margin-left: 24px; padding-left: 20px; }
	.cl-writer-label { font-size: 12px; color: var(--navy); }
	.cl-writer-label .is-pc { display: none; }
	.cl-writer-label .is-sp { display: inline; }
	.cl-writer-nm { font-size: 19px; }
	.cl-writer-title { font-size: 12.5px; }

	.cl-pager { display: flex; justify-content: center; width: auto; margin-top: 20px; }
	.cl-pager > :not(.cl-back) { display: none; }
	.cl-back { position: relative; width: min(290px, 80vw); height: 46px; border: 1.5px solid #E2A2B5; border-radius: 999px; background: #fff; font-size: 14.5px; color: var(--rose-d); box-shadow: none; }
	.cl-back::before { content: ""; width: 9px; height: 9px; margin-right: 14px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }

	.cl-related { display: block; margin-top: 24px; }
	.cl-related-h { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .06em; color: var(--navy); }
	.cl-related-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-1), rgba(207,175,114,.15)); }
	.cl-related ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
	.cl-related a { display: flex; align-items: center; gap: 16px; padding: 6px; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(30,53,96,.10); }
	.cl-related .cl-thumb { flex: 0 0 34%; height: 64px; }
	.cl-related .cl-thumb.is-text b { font-size: 12px; }
	.cl-related-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: #3E4A5E; }
	.cl-related-title { font-family: var(--serif); font-weight: 700; font-size: 15.5px; line-height: 1.45; letter-spacing: .04em; color: var(--navy); }
}