@charset "UTF-8";
/* ==========================================================
   トップページ：ロボット手術の特集枠（common/top_feature_robot.php）
   他のトップページ用 CSS と干渉しないよう、.tfr / .tfr-bar 配下のみに適用する
   ========================================================== */

/* ----------------------------------------------------------
   特集枠（帯）
   ---------------------------------------------------------- */
.tfr {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 56px 20px;
	background: linear-gradient(118deg, #262a66 0%, #4f55a6 48%, #a83a86 100%);
	color: #fff;
	font-family: inherit;
}

.tfr::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background:
		radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 40%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 32px);
	pointer-events: none;
}

.tfr__mark {
	position: absolute;
	right: -10px;
	bottom: -28px;
	color: rgba(255, 255, 255, 0.08);
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 170px;
	font-style: italic;
	font-weight: 900;
	letter-spacing: -6px;
	line-height: 1;
	pointer-events: none;
}

.tfr__in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	max-width: 1160px;
	margin: 0 auto;
}

.tfr p,
.tfr ul,
.tfr li,
.tfr h2 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.tfr .tfr__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	letter-spacing: 0.14em;
	opacity: 0.95;
}

.tfr__badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: #fff;
	color: #353a7c;
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
}

.tfr h2.tfr__title {
	margin-bottom: 14px;
	color: #fff;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.tfr .tfr__lead {
	margin-bottom: 22px;
	font-size: 15px;
	line-height: 1.9;
	opacity: 0.95;
}

.tfr__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.tfr__btn,
.tfr__btn:link,
.tfr__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(20, 16, 60, 0.35);
	color: #353a7c;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tfr__btn::after {
	content: "\203A";
	font-size: 22px;
	line-height: 1;
}

.tfr__btn:hover,
.tfr__btn:focus-visible {
	box-shadow: 0 10px 24px rgba(20, 16, 60, 0.45);
	transform: translateY(-2px);
}

.tfr__sublink,
.tfr__sublink:link,
.tfr__sublink:visited {
	color: #fff;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 数字 */
.tfr .tfr__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}

.tfr .tfr__stats li {
	padding: 16px 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	text-align: center;
}

.tfr__num {
	font-size: 40px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.tfr__unit {
	margin-left: 2px;
	font-size: 15px;
	font-weight: 700;
}

.tfr__label {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	opacity: 0.9;
}

/* 診療科チップ */
.tfr .tfr__chips-label {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
}

.tfr .tfr__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tfr__chips a,
.tfr__chips a:link,
.tfr__chips a:visited {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tfr__chips a span {
	font-size: 11px;
	font-weight: 400;
	opacity: 0.9;
}

.tfr__chips a:hover,
.tfr__chips a:focus-visible {
	background: #fff;
	color: #353a7c;
}

.tfr a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ----------------------------------------------------------
   告知バー（1行）
   ---------------------------------------------------------- */
.tfr-bar {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 求人一覧など本文中に置く場合は、本文の幅に合わせる */
.tfr-bar--inline {
	max-width: none;
	margin: 0 0 16px;
	padding: 0;
}

.tfr-bar__link,
.tfr-bar__link:link,
.tfr-bar__link:visited {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	border: 1px solid #cfd2ec;
	border-left: 6px solid #4f55a6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(53, 58, 124, 0.12);
	color: #222;
	text-decoration: none;
	transition: box-shadow 0.15s ease;
}

.tfr-bar__link:hover,
.tfr-bar__link:focus-visible {
	box-shadow: 0 8px 20px rgba(53, 58, 124, 0.2);
}

.tfr-bar__badge {
	flex-shrink: 0;
	padding: 3px 12px;
	border-radius: 999px;
	background: linear-gradient(118deg, #353a7c 0%, #a83a86 100%);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.tfr-bar__text {
	flex-grow: 1;
	color: #353a7c;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.tfr-bar__nums {
	margin-left: 1em;
}

/* 数字のまとまり（「全国23病院」「・2025年度1,197件」）の途中では改行しない */
.tfr-bar__nums > span {
	display: inline-block;
	white-space: nowrap;
}

.tfr-bar__sub {
	margin-left: 12px;
	color: #5c6670;
	font-size: 13px;
	font-weight: 400;
}

.tfr-bar__more {
	flex-shrink: 0;
	color: #4f55a6;
	font-size: 24px;
	line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tfr__btn,
	.tfr__chips a,
	.tfr-bar__link {
		transition: none;
	}

	.tfr__btn:hover,
	.tfr__btn:focus-visible {
		transform: none;
	}
}

/* ----------------------------------------------------------
   スマートフォン
   ---------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.tfr {
		padding: 36px 16px 32px;
	}

	.tfr__mark {
		font-size: 96px;
		bottom: -14px;
	}

	.tfr__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.tfr h2.tfr__title {
		font-size: 24px;
	}

	.tfr .tfr__lead {
		margin-bottom: 18px;
		font-size: 14px;
	}

	.tfr__btn,
	.tfr__btn:link,
	.tfr__btn:visited {
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	}

	.tfr .tfr__stats {
		gap: 6px;
	}

	.tfr .tfr__stats li {
		padding: 12px 4px 10px;
	}

	.tfr__num {
		font-size: 24px;
		white-space: nowrap;
	}

	.tfr__unit {
		font-size: 12px;
	}

	.tfr__label {
		font-size: 10px;
		line-height: 1.4;
	}

	.tfr__chips a,
	.tfr__chips a:link,
	.tfr__chips a:visited {
		padding: 7px 12px;
		font-size: 13px;
	}

	.tfr-bar {
		padding: 0 16px;
	}

	.tfr-bar__link,
	.tfr-bar__link:link,
	.tfr-bar__link:visited {
		gap: 10px;
		padding: 12px 12px 12px 14px;
	}

	.tfr-bar__name,
	.tfr-bar__nums,
	.tfr-bar__sub {
		display: block;
		margin-left: 0;
	}

	.tfr-bar__nums {
		font-size: 13px;
	}

	/* 求人一覧に置く版はスマホでは「特集」を省き、文字の幅を確保する */
	.tfr-bar--inline .tfr-bar__badge {
		display: none;
	}

	.tfr-bar__sub {
		font-size: 12px;
	}
}