@charset "utf-8";
/* =========================================================
   産業医紹介サービス比較 LP固有スタイル (sangyoui.css)
========================================================= */

:root {
	--sy-emerald: #0abab5;
	--sy-dark: #056663;
	--sy-light: #e0fffd;
}

/* --- メインコンテナ --- */
.sangyouiWrap {
	margin: 0 auto;
	padding: 0 0 80px;
	width: 90%;
	max-width: 1200px;
}

.contentsWrap{
	margin: auto;
	width: 100%;
}
/* --- ヘッダー・リード --- */
.upperArea {
	padding: 8px;
}
.headerH1 {
	color: var(--sy-emerald);
	font-size: var(--fs-c-14-20);
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 8px;
}
.headerH1::before {
	content: "PR";
	padding: 2px 8px;
	background-color: var(--sy-emerald);
	color: var(--c-white);
	font-size: var(--fs-11);
	border-radius: 2px;
}

.headerImageArea {
	text-align: center;
	position: relative;
}
.headerImageArea img {
	width: 100%;
	height: auto;
	display: block;
}
.topBtnBox {
	margin: 24px auto;
	text-align: center;
	position:static;
	width: 100%;
}
.topBtnBox a {
	display: inline-block;
	padding: 16px 32px;
	background: linear-gradient(0deg, #5c0000, var(--c-dull-red));
	color: var(--c-white);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	text-decoration: none;
	font-size: var(--fs-c-14-18);
	font-weight: 900;
	line-height: 1.4;
	transition: opacity 0.3s;
	width: 100%;
}
.topBtnBox a:hover { opacity: 0.8; }
.topBtnBox a span { font-size: 1.4em; }

.headerRead {
	background-color: var(--sy-light);
	padding: 32px;
	border-radius: 8px;
	margin-bottom: 48px;
}
.headerRead p {
	margin-bottom: 1.5em;
	line-height: 1.8;
}
.headerRead p:last-child { margin-bottom: 0; }

/* --- 目次 --- */
.indexArea {
	border: 4px solid var(--sy-dark);
	padding: 24px;
	margin-bottom: 64px;
	background-color: var(--c-white);
}
.indexWrap {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.indexWrap hr {
	flex: 1;
	border: none;
	border-top: 1px solid var(--sy-dark);
	border-bottom: 4px solid var(--sy-dark);
	height: 0;
}
.indexWrap h2 {
	font-size: var(--fs-c-20-28);
	color: var(--sy-dark);
	font-weight: 900;
}
.indexList { margin: 0 16px; list-style: none; padding: 0; }
.indexList > li {
	margin-bottom: 24px;
	padding-left: 20px;
	position: relative;
	font-size: var(--fs-c-14-18);
}
.indexList > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 12px;
	height: 12px;
	background-color: var(--sy-emerald);
	border-radius: 50%;
}
.indexList > li ul li{
	font-size: var(--fs-c-14-18);
	font-weight: normal;
}
.indexList ul { margin-top: 8px; padding-left: 16px; }
.indexList a { color: var(--sy-dark); text-decoration: none;}
.indexList a:hover { color: var(--c-red); text-decoration: underline; }

/* --- 見出し・テキスト --- */
.roundH2 {
	background-color: var(--sy-dark);
	color: var(--c-white);
	text-align: center;
	padding: 16px;
	border-radius: 100px;
	font-size: var(--fs-c-24-32);
	font-weight: 900;
	margin: 64px 0 32px;
}
.bH3 {
	border: 2px solid var(--sy-dark);
	color: var(--sy-dark);
	text-align: center;
	padding: 16px;
	font-size: var(--fs-c-18-24);
	font-weight: 900;
	margin-bottom: 32px;
}
.sangyouiTxt, .matomeTxt {
	line-height: 1.8;
	margin-bottom: 24px;
}
.fb { font-weight: 900; }

.spBox {
	background-color: var(--sy-light);
	padding: 24px;
	margin-bottom: 40px;
	border-radius: 8px;
	font-weight: bold;
}

/* --- リスト・ポイント --- */
.sangyouiPoint {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-border);
	margin-bottom: 40px;
}
.sangyouiPoint dt {
	background-color: var(--sy-emerald);
	color: var(--c-white);
	padding: 12px 16px;
	font-weight: bold;
	border-bottom: 1px solid var(--c-white);
}
.sangyouiPoint dd {
	padding: 16px;
	background-color: var(--c-white);
	border-bottom: 1px solid var(--c-border);
	line-height: 1.6;
}
.sangyouiPoint dt:last-of-type, .sangyouiPoint dd:last-of-type { border-bottom: none; }

.rtrLi {
	list-style: none;
	padding: 0;
	margin: 0 auto 32px;
	background-color: var(--c-k-gray-10);
	padding: 24px;
	border-radius: 8px;
}
.rtrLi li {
	padding-left: 24px;
	position: relative;
	margin-bottom: 12px;
	line-height: 1.6;
}
.rtrLi li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--c-red);
	font-weight: bold;
}

/* --- テーブル --- */
.sangyouiTable {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 48px;
	border: 1px solid var(--c-border);
}
.sangyouiTable th, .sangyouiTable td {
	border: 1px solid var(--c-border);
	padding: 16px;
	text-align: left;
}
.tableHeader01 {
	background-color: var(--sy-dark);
	color: var(--c-white);
	text-align: center !important;
}
.sangyouiTable th[scope="row"] { background-color: var(--c-k-gray-10); text-align: center; }

.typeTable {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 48px;
}
.typeTable td {
	border: 1px solid var(--c-border);
	padding: 0;
	vertical-align: top;
}
.typeTable h3 {
	background-color: var(--sy-light);
	padding: 16px;
	text-align: center;
	font-size: var(--fs-16);
	border-bottom: 1px solid var(--c-border);
}
.typeTable p { padding: 16px; line-height: 1.6; }

/* --- DL Box (比較項目) --- */
.dlBox {
	border: 2px solid var(--sy-dark);
	padding: 32px 24px 0;
	margin-bottom: 64px;
}
.dlH3 {
	background-color: var(--sy-dark);
	color: var(--c-white);
	text-align: center;
	padding: 12px;
	font-size: var(--fs-20);
	margin: -32px -24px 32px;
}

/* --- サービス紹介 --- */
.h3Wrap {
	display: flex;
	align-items: center;
	border: 2px solid var(--c-text);
	margin: 64px 0 32px;
}
.h3Wrap div {
	background-color: var(--c-text);
	color: var(--c-white);
	padding: 12px 24px;
	font-size: var(--fs-24);
	font-weight: bold;
}
.h3Wrap h3 {
	padding: 12px 24px;
	font-size: var(--fs-c-20-24);
	font-weight: 900;
}
.serviceTit {
	background-color: var(--sy-emerald);
	color: var(--c-white);
	padding: 12px 16px;
	font-size: var(--fs-18);
	font-weight: bold;
	margin-bottom: 16px;
}
.serviceTable {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
	border: 1px solid var(--c-border);
}
.serviceTable th, .serviceTable td {
	border: 1px solid var(--c-border);
	padding: 12px;
}
.serviceTable th {
	background-color: var(--c-k-gray-10);
	width: 30%;
}
.serviceTxt { margin-bottom: 48px; line-height: 1.8; }
.serviceTxt a { color: var(--c-primary); font-weight: bold; }

/* --- ボタン --- */
.ctaBtn02, .ctaBtn {
	text-align: center;
	margin: 40px 0 64px;
}
.ctaBtn02 a, .ctaBtn a {
	display: inline-block;
	padding: 20px 40px;
	background: linear-gradient(0deg, var(--c-dull-red), var(--c-red));
	color: var(--c-white);
	border-radius: 8px;
	font-size: var(--fs-c-16-24);
	font-weight: 900;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	transition: opacity 0.3s;
	line-height: 1.5;
}
.ctaBtn02 a:hover, .ctaBtn a:hover { opacity: 0.8; }

/* --- 参考文献・プロフィール --- */
.sankou {
	background-color: var(--c-pale-orange);
	padding: 32px;
	margin-bottom: 64px;
	border-radius: 8px;
}
.sankou h3 {
	color: var(--c-dark-orange);
	font-size: var(--fs-20);
	margin-bottom: 16px;
	border-bottom: 2px solid var(--c-dark-orange);
	padding-bottom: 8px;
}
.sankou ul { padding-left: 20px; list-style: disc; margin-bottom: 16px; }
.sankou li { margin-bottom: 8px; }

.authorProfile { margin-bottom: 64px; }
.authorProfile h2 {
	background-color: var(--c-dark-orange);
	color: var(--c-white);
	text-align: center;
	padding: 12px;
	font-size: var(--fs-20);
	margin-bottom: 24px;
}
.profileCard {
	padding: 24px;
	border: 1px solid var(--c-border);
	margin-bottom: 24px;
	background-color: var(--c-k-gray-10);
}
.profileName {
	color: var(--c-dark-orange);
	font-size: var(--fs-18);
	font-weight: bold;
	border-bottom: 1px solid var(--c-dark-orange);
	padding-bottom: 8px;
	margin-bottom: 16px;
}

.scsList li{
	padding: 1rem 0;
	text-align: center;
	border-bottom: dotted 1px #666;
	font-size: var(--fs-c-14-18);
}

/* =========================================================
   メディアクエリ: 768px以上
========================================================= */
@media (min-width: 768px) {
	
	.headerRead { padding: 48px; }
	.indexArea { padding: 40px; }
	
	.indexArea,
	.sangyouiTxt,
	.sangyouiTable,
	.bH3,
	.sangyouiPoint,
	.spBox,
	.typeTable,
	.dlBox,
	.h3Wrap,
	.serviceTxt{
		margin: auto auto 48px;
		max-width: 1120px;
	}
	
	.topBtnBox {
	margin: 24px auto 0;
	text-align: center;
	position: absolute;
	right: 5%;
	bottom: 5%;
	width: 50%;
}

	/* Point テーブル化 */
	.sangyouiPoint {
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 1px solid var(--c-border);
		border-right: 1px solid var(--c-border);
	}
	.sangyouiPoint dt, .sangyouiPoint dd {
		border-bottom: none;
		border-top: 1px solid var(--c-border);
		border-left: 1px solid var(--c-border);
		padding: 16px;
	}
	.sangyouiPoint dt { width: 30%; display: flex; align-items: center; }
	.sangyouiPoint dd { width: 70%; }
	
	/* 2カラムレイアウト */
	.typeTable td { width: 50%; }
	
	.dlBox { padding: 48px 40px 0; }
	.dlH3 { margin: -48px -40px 40px; }
}