/* TriClip page extras */


.mt0{ margin-top:0 !important; }
.mt05{ margin-top:5px !important; }
.mt10{ margin-top:10px !important; }
.mt15{ margin-top:15px !important; }
.mt20{ margin-top:20px !important; }
.mt25{ margin-top:25px !important; }
.mt30{ margin-top:30px !important; }
.mt35{ margin-top:35px !important; }
.mt40{ margin-top:40px !important; }
.mt45{ margin-top:45px !important; }
.mt50{ margin-top:50px !important; }
.mt55{ margin-top:55px !important; }
.mt60{ margin-top:60px !important; }
.mt70{ margin-top:70px !important; }
.mt80{ margin-top:80px !important; }
.mt90{ margin-top:90px !important; }
.mt100{ margin-top:100px !important; }
.mt120{ margin-top:120px !important; }
.mt150{ margin-top:150px !important; }

.mb0{ margin-bottom:0 !important; }
.mb05{ margin-bottom:5px !important; }
.mb10{ margin-bottom:10px !important; }
.mb15{ margin-bottom:15px !important; }
.mb20{ margin-bottom:20px !important; }
.mb25{ margin-bottom:25px !important; }
.mb30{ margin-bottom:30px !important; }
.mb35{ margin-bottom:35px !important; }
.mb40{ margin-bottom:40px !important; }
.mb45{ margin-bottom:45px !important; }
.mb50{ margin-bottom:50px !important; }
.mb60{ margin-bottom:60px !important; }
.mb70{ margin-bottom:70px !important; }
.mb80{ margin-bottom:80px !important; }
.mb90{ margin-bottom:90px !important; }
.mb100{ margin-bottom:100px !important; }

.ml0{ margin-left:0 !important; }
.ml05{ margin-left:5px !important; }
.ml10{ margin-left:10px !important; }
.ml15{ margin-left:15px !important; }
.ml20{ margin-left:20px !important; }
.ml25{ margin-left:25px !important; }
.ml30{ margin-left:30px !important; }
.ml35{ margin-left:35px !important; }
.ml40{ margin-left:40px !important; }
.ml45{ margin-left:45px !important; }
.ml50{ margin-left:50px !important; }
.ml60{ margin-left:60px !important; }
.ml70{ margin-left:70px !important; }
.ml80{ margin-left:80px !important; }
.ml90{ margin-left:90px !important; }
.ml100{ margin-left:100px !important; }
.ml1em{margin-left: 1em!important;}

.mr05{ margin-right:5px !important; }
.mr10{ margin-right:10px !important; }
.mr15{ margin-right:15px !important; }
.mr20{ margin-right:20px !important; }
.mr25{ margin-right:25px !important; }
.mr30{ margin-right:30px !important; }
.mr35{ margin-right:35px !important; }
.mr40{ margin-right:40px !important; }
.mr45{ margin-right:45px !important; }
.mr50{ margin-right:50px !important; }
.mr60{ margin-right:60px !important; }
.mr70{ margin-right:70px !important; }
.mr80{ margin-right:80px !important; }
.mr90{ margin-right:90px !important; }
.mr100{ margin-right:100px !important; }


.pt0{ padding-top:0 !important; }
.pt05{ padding-top:5px !important; }
.pt10{ padding-top:10px !important; }
.pt15{ padding-top:15px !important; }
.pt20{ padding-top:20px !important; }
.pt25{ padding-top:25px !important; }
.pt30{ padding-top:30px !important; }
.pt35{ padding-top:35px !important; }
.pt40{ padding-top:40px !important; }
.pt45{ padding-top:45px !important; }
.pt50{ padding-top:50px !important; }
.pt60{ padding-top:60px !important; }
.pt70{ padding-top:70px !important; }
.pt80{ padding-top:80px !important; }
.pt90{ padding-top:90px !important; }
.pt100{ padding-top:100px !important; }

.pb05{ padding-bottom:5px !important; }
.pb10{ padding-bottom:10px !important; }
.pb15{ padding-bottom:15px !important; }
.pb20{ padding-bottom:20px !important; }
.pb25{ padding-bottom:25px !important; }
.pb30{ padding-bottom:30px !important; }
.pb35{ padding-bottom:35px !important; }
.pb40{ padding-bottom:40px !important; }
.pb45{ padding-bottom:45px !important; }
.pb50{ padding-bottom:50px !important; }
.pb60{ padding-bottom:60px !important; }
.pb70{ padding-bottom:70px !important; }
.pb80{ padding-bottom:80px !important; }
.pb90{ padding-bottom:90px !important; }
.pb100{ padding-bottom:100px !important; }

.pl05{ padding-left:5px !important; }
.pl10{ padding-left:10px !important; }
.pl15{ padding-left:15px !important; }
.pl20{ padding-left:20px !important; }
.pl25{ padding-left:25px !important; }
.pl30{ padding-left:30px !important; }
.pl35{ padding-left:35px !important; }
.pl40{ padding-left:40px !important; }
.pl45{ padding-left:45px !important; }
.pl50{ padding-left:50px !important; }
.pl60{ padding-left:60px !important; }
.pl70{ padding-left:70px !important; }
.pl80{ padding-left:80px !important; }
.pl90{ padding-left:90px !important; }
.pl100{ padding-left:100px !important; }

.pr05{ padding-right:5px !important; }
.pr10{ padding-right:10px !important; }
.pr15{ padding-right:15px !important; }
.pr20{ padding-right:20px !important; }
.pr25{ padding-right:25px !important; }
.pr30{ padding-right:30px !important; }
.pr35{ padding-right:35px !important; }
.pr40{ padding-right:40px !important; }
.pr45{ padding-right:45px !important; }
.pr50{ padding-right:50px !important; }
.pr60{ padding-right:60px !important; }
.pr70{ padding-right:70px !important; }
.pr80{ padding-right:80px !important; }
.pr90{ padding-right:90px !important; }
.pr100{ padding-right:100px !important; }


html, body {
	font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.masthead h1 img.hero-logo {
	width: 502px;
	max-width: 72%;
	height: auto;
}

.masthead-tb-sp h1 img.hero-logo {
	width: 70%;
	max-width: 502px;
	height: auto;
}

nav#gnav > ul > li > a {
	font-size: 0.92em;
	padding: 5px 0.6em;
}

.news-wrapper {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 86.5%;
	max-width: 1000px;
	margin: 90px auto 50px;
}

.news-wrapper .pic,
.news-wrapper .txt {
	flex-basis: auto;
	width: 100%;
}

.news-wrapper .pic.pic-pair {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.news-wrapper .pic.pic-pair img {
	flex: 1;
	width: calc(50% - 8px);
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.news-wrapper .txt {
	margin-top: 22px;
}

.news-wrapper .txt .txt-120p {
	font-size: 1.25em;
	line-height: 1.6;
	margin-bottom: 14px !important;
}

.news-wrapper .txt p {
	line-height: 1.8;
}

@media (max-width: 959px) {
	.news-wrapper {
		padding: 0;
	}
	.news-wrapper .pic,
	.news-wrapper .txt {
		flex-basis: 100%;
	}
}

@media (max-width: 599px) {
	.news-wrapper {
		width: 86.5%;
	}
	.news-wrapper .pic.pic-pair {
		flex-direction: column;
	}
	.news-wrapper .pic.pic-pair img {
		width: 100%;
	}
}

.figure-caption {
	text-align: center;
	font-size: 0.9em;
	margin: 8px 0 28px;
}

.figure-subtitle {
	text-align: center;
    font-size: 1.12em;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: #222;
    margin: 0 0 16px;
}

.figure-wide {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 10px auto 0;
}

.figure-panel {
	background: #fff;
	padding: 20px;
	margin: 24px auto 0;
	max-width: 1136px;
}

.figure-panel .figure-wide {
	margin-top: 0;
}

.figure-panel.is-dark {
	background: #f7f4f8;
}
.figure-panel.is-dark .figure-caption {
	color: #333;
	margin-bottom: 0;
	padding-bottom: 8px;
}

/* 図2：TRの病態 */
.tr-pathology,
.tr-progress {
	margin: 36px 0 8px;
}

.tr-cards {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 16px;
}

.tr-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #eee8ef;
	border-radius: 8px;
	padding: 22px 24px 20px;
	box-shadow: 0 8px 24px rgba(80, 40, 90, 0.06);
	border-top: 3px solid #a443ad;
}

.tr-card-main {
	border-top-color: #6b7fd7;
}

.tr-card-full {
	grid-column: 1 / -1;
	border-top-color: #7a6b8a;
}

.tr-card-ratio {
	margin: 0 0 8px !important;
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #a443ad;
	line-height: 1.2;
}

.tr-card-main .tr-card-ratio {
	color: #4f63c7;
}

.tr-card-full .tr-card-ratio {
	color: #5c5168;
}

.tr-card h3 {
	font-size: 1.15em !important;
	margin: 0 0 10px !important;
	color: #222 !important;
	letter-spacing: 0.04em;
	line-height: 1.45;
}

.tr-card h3 span {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.78em;
	font-weight: 500;
	color: #888;
	letter-spacing: 0.02em;
}

.tr-card p {
	margin: 0 !important;
	font-size: 0.95em;
	line-height: 1.8;
	color: #444;
}

.tr-card-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
	margin-top: 12px;
	flex: 1;
}

.tr-card-split section {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-left: 16px;
	border-left: 1px dashed #d7dbea;
}

.tr-card-split section:first-child {
	padding-left: 0;
	border-left: none;
	padding-right: 16px;
}

.tr-card-visual {
	display: block;
	width: 100%;
	height: auto;
	margin-top: auto;
	padding-top: 16px;
}

.tr-card h4 {
	margin: 0 0 6px;
	font-size: 0.98em;
	font-weight: 700;
	color: #4f63c7;
	letter-spacing: 0.04em;
	line-height: 1.45;
}

.tr-card h4 span {
	margin-left: 4px;
	font-size: 0.82em;
	font-weight: 500;
	color: #888;
}

.tr-card-notes {
	margin: 8px 0 0;
}

.tr-card-notes li {
	margin: 0 0 8px;
	font-size: 0.95em;
	line-height: 1.8;
	color: #444;
}

.tr-card-notes li:last-child {
	margin-bottom: 0;
}

/* 図3：進行 */
.tr-progress-list {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.tr-progress-list li {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid #eee8ef;
	border-radius: 8px;
	padding: 16px 14px 12px;
	box-shadow: 0 8px 24px rgba(80, 40, 90, 0.06);
	text-align: center;
}

.tr-progress-phase {
	display: inline-block;
	margin: 0 0 12px !important;
	padding: 2px 14px;
	border-radius: 999px;
	background: #f3eaf5;
	color: #a443ad;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.tr-progress-list img {
	display: block;
	margin: 0 auto;
	height: auto;
	background: #fafafa;
	border-radius: 4px;
	width: 250px;
}

.tr-progress-caption {
	margin: 12px 0 0 !important;
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.6;
	color: #333;
}

.tr-progress-note {
	margin: 10px 0 0 !important;
	text-align: right;
	font-size: 0.82em;
	line-height: 1.7;
	color: #555;
}

.fig04-box {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 20px;
	align-items: flex-start;
}

.tr-symptom {
	margin: 36px 0 8px;
}

.tr-symptom-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 16px;
	align-items: stretch;
}

.tr-symptom-card {
	background: #fff;
	border: 1px solid #eee8ef;
	border-radius: 8px;
	padding: 24px 26px 22px;
	box-shadow: 0 8px 24px rgba(80, 40, 90, 0.06);
}

.tr-symptom-card h3 {
	font-size: 1.05em !important;
	margin: 0 0 5px !important;
	padding-bottom: 8px;
	color: #222 !important;
	letter-spacing: 0.08em;
	border-bottom: 2px solid #f0e6f3;
}

.tr-symptom-list + h3 {
	margin-top: 28px !important;
}

.tr-symptom-list,
.tr-organ-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-symptom-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 20px;
	margin-bottom: 25px;
}

.tr-symptom-list li {
	position: relative;
	margin: 0;
	padding: 4px 0 4px 18px;
	line-height: 1.5;
	color: #444;
}

.tr-symptom-list li:nth-last-child(-n+2) {
	border-bottom: none;
}

.tr-symptom-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #a443ad;
}

.tr-organ-block {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
}

.tr-organ-visual {
	flex: 0 0 auto;
	width: 62%;
	max-width: 145px;
	height: auto;
}

.tr-organ-list {
	flex: 1;
	min-width: 0;
}

.tr-organ-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 24px;
	line-height: 1.6;
	color: #444;
}
.tr-organ-list li:last-child {
	margin-bottom: 0;
}

.tr-organ-list li span {
	flex: 0 0 3.2em;
	display: inline-block;
	padding: 2px 0;
	color: #a443ad;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.tr-symptom-patient {
	display: flex;
	align-items: center;
	text-align: center;
}

.tr-symptom-patient img {
	display: block;
	width: 170px;
	max-width: 100%;
	height: auto;
	background: #fff;
}

.tr-symptom-note {
	margin: 14px 0 4px !important;
	font-size: 0.88em;
	color: #333;
}

.tr-symptom-cite {
	margin: 0 !important;
	font-size: 0.75em;
	line-height: 1.6;
	color: #888;
}

.tr-symptom-lead {
	margin: 20px 0 0 !important;
	padding: 16px 18px;
	background: #f8f4f9;
	border-radius: 8px;
	line-height: 1.8;
	color: #444;
}

.bg-info-wrapper {
	background: #e4effa;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.12) inset;
}

.target-lead {
	font-size: 1.05em;
	margin-bottom: 1.2em;
}

.funnel-figure {
	display: block;
	max-width: 720px;
	width: 100%;
	height: auto;
	margin: 10px auto 36px;
}

.criteria-grid {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.criteria-col {
	background: #fff;
	border: 5px solid #38ACA8;
	border-radius: 14px;
	padding: 22px 28px 20px;
}

.criteria-col-purpose {
	border-color: #009CDE;
}

.criteria-col h3 {
	display: inline-block !important;
	font-size: 1.05em !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	line-height: 1.4 !important;
	color: #fff !important;
	background: #38ACA8;
	margin: 0 0 18px !important;
	padding: 8px 18px;
	border-radius: 7px;
}

.criteria-col-purpose h3 {
	background: #009CDE;
}


.criteria-col p {
	margin: 0 0 14px !important;
	line-height: 1.8;
}

.criteria-col ul {
	margin: 0;
	padding-left: 1.3em;
}

.criteria-col li {
	margin-bottom: 0.85em;
	line-height: 1.8;
}

.criteria-col li:last-child {
	margin-bottom: 0;
}

.doctor-card {
	display: flex;
	align-items: flex-start;
	gap: 36px;
	margin: 0 0 16px;
	padding: 40px 0 36px;
	border-bottom: 1px solid #eee8ef;
}

.doctor-card:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.doctor-card-photo {
	flex: 0 0 220px;
	width: 220px;
}

.doctor-card-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 220px;
}

.doctor-card-body {
	flex: 1;
	min-width: 0;
}

.doctor-card-role {
	margin: 0 0 4px !important;
	font-size: 0.95em;
	font-weight: 700;
	color: #a443ad;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.doctor-card-name {
	font-size: 1.55em !important;
	margin: 0 0 16px !important;
	color: #222 !important;
	letter-spacing: 0.08em;
	line-height: 1.4 !important;
}

.doctor-card-bio {
	margin: 0 0 18px;
	line-height: 1.9;
	color: #444;
}

.doctor-card-certs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    margin: 0;
    padding: 10px 20px;
    list-style: none;
    background: #fff;
    border: 1px solid #c589cb;
    border-radius: 5px;
}

.doctor-card-certs li {
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid #f3eef5;
	font-size: 0.92em;
	line-height: 1.6;
	color: #444;
}

.doctor-card-certs li:nth-last-child(-n+2) {
	border-bottom: none;
}

.doctor-card-certs li:nth-last-child(2):nth-child(even) {
	border-bottom: 1px solid #f3eef5;
}

.pic-layout-box {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 40px;
}

.pic-layout-box div {
	background: none;
	padding: 0;
	flex: 0 1 auto;
	flex-basis: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.pic-layout-box div img {
	height: 280px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0 0 10px;
}

.pic-layout-box div span {
	color: #333;
}

ul.strongth-list li .caption {
	font-weight: 700;
	overflow-wrap: anywhere;
	line-height: 1.45;
}

.features-box {
	justify-content: center;
}

.features-box .figure {
	flex-basis: auto;
	width: 100%;
	max-width: 710px;
	margin: 0 auto;
}

ul.strongth-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-content: center;
	gap: 16px;
}

ul.strongth-list li {
	min-width: 0;
	width: auto;
	flex-basis: auto;
}

@media (max-width: 959px) {
	.tr-cards {
		grid-template-columns: 1fr;
	}
	.tr-card-split {
		grid-template-columns: 1fr;
	}
	.tr-card-split section,
	.tr-card-split section:first-child {
		padding: 0;
		border-left: none;
		border-top: 1px dashed #d7dbea;
		padding-top: 16px;
	}
	.tr-card-split section:first-child {
		border-top: none;
		padding-top: 0;
	}
	.tr-progress-list {
		flex-direction: column;
	}
	.tr-symptom-grid {
		grid-template-columns: 1fr;
	}
	.doctor-card {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding-top: 28px;
	}
	.doctor-card-photo,
	.doctor-card-photo img {
		max-width: 200px;
		width: 200px;
	}
	.doctor-card-body {
		width: 100%;
	}
	.doctor-card-certs {
		grid-template-columns: 1fr;
	}
	.doctor-card-certs li:nth-last-child(-n+2) {
		border-bottom: 1px solid #f3eef5;
	}
	.doctor-card-certs li:last-child {
		border-bottom: none;
	}
	ul.strongth-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.masthead-tb-sp h1 img.hero-logo {
		width: 82%;
	}
	.tr-symptom-list {
		grid-template-columns: 1fr;
	}
	.tr-symptom-list li:last-child {
		border-bottom: none;
	}
	.tr-symptom-list li:before {
		top: 11px;
	}
	.pic-layout-box {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}
	.pic-layout-box div img {
		height: 220px;
	}
	ul.strongth-list {
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	ul.strongth-list li {
		padding: 10px 6px;
		margin-bottom: 0;
	}
	ul.strongth-list li img {
		width: 72px;
		height: auto;
	}
	ul.strongth-list li .caption {
		font-size: 0.78em;
	}
	.tr-organ-visual {
		width: 72px;
		max-width: 72px;
	}

	.tr-organ-list li {
		gap: 1px;
		margin: 0 0 5px;
	}

	.tr-symptom-patient img {
		width: 110px;
	}
}
