/* =========================================================
   pages.css — ページ／セクション固有スタイル
   セクション装飾は各テンプレートのインラインを基本とし、
   ここには JS 連動・再利用の必要が出たものを順次切り出す。
   ========================================================= */

/* フロー横スクロール（受診の3ステップ） */
[data-flow-scroller]{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
[data-flow-scroller]::-webkit-scrollbar{display:none}
[data-flow-card]{flex:0 0 100%;scroll-snap-align:center}

/* ドット */
.cs-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.cs-dots button{width:7px;height:7px;border-radius:50%;border:none;background:var(--cs-line-3);padding:0;cursor:pointer}
.cs-dots button.is-active{background:var(--cs-primary);width:20px;border-radius:4px}

/* 記事本文（コラム）。目次ジャンプ時の上部オフセット（固定ヘッダーなし） */
[data-anchor]{scroll-margin-top:12px}
.cs-abody h2{scroll-margin-top:12px}

/* パンくず（各リスト1行・はみ出しは横スクロール・スクロールバー非表示） */
.cs-crumb{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;font-size:10.5px;color:#8ba09b;margin-bottom:4px}
.cs-crumb::-webkit-scrollbar{display:none}
.cs-crumb > *{flex:none}
.cs-crumb a{color:#8ba09b;text-decoration:none}
.cs-crumb [aria-current="page"]{color:#5a6e6a}

/* 可視パンくず（cs_breadcrumb() 出力：nav.cs-breadcrumb > ol > li）。各ページ上部に軽い padding。 */
.cs-breadcrumb{padding:12px 22px 0;background:#fff}
.cs-breadcrumb ol{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;margin:0;padding:0;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;font-size:10.5px;color:#8ba09b}
.cs-breadcrumb ol::-webkit-scrollbar{display:none}
.cs-breadcrumb li{flex:none;display:flex;align-items:center}
.cs-breadcrumb li+li::before{content:"›";margin:0 5px;color:#b7c6c1}
.cs-breadcrumb a{color:#8ba09b;text-decoration:none}
.cs-breadcrumb [aria-current="page"]{color:#5a6e6a}

/* アーカイブのページネーション */
.cs-pagination{margin-top:22px}
.cs-pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.cs-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:11px;background:#fff;border:1px solid var(--cs-line);color:var(--cs-ink);font-weight:800;font-size:13.5px;text-decoration:none}
.cs-pagination .page-numbers.current{background:var(--cs-primary);border-color:var(--cs-primary);color:#fff}
.cs-pagination a.page-numbers:hover{border-color:var(--cs-primary);color:var(--cs-primary-deep)}
.cs-pagination .page-numbers.dots{border:none;background:none}
.cs-abody p{margin:0 0 15px;font-size:13.5px;line-height:1.95;color:var(--cs-body)}
.cs-abody strong{color:var(--cs-ink);font-weight:700}

/* 記事本文（動的 the_content）の見出し・リスト */
.cs-abody h2{margin:30px 0 14px;font-size:19px;font-weight:900;color:var(--cs-ink);line-height:1.5;padding-left:12px;border-left:5px solid #2bb3a4}
.cs-abody h3{margin:22px 0 8px;font-size:15px;font-weight:800;color:var(--cs-primary)}
.cs-abody ul,.cs-abody ol{margin:0 0 16px;padding-left:1.25em}
.cs-abody li{font-size:13.5px;line-height:1.9;color:var(--cs-body);margin:5px 0}
.cs-abody a{color:var(--cs-primary-deep);font-weight:700;text-decoration:underline}
.cs-abody h2:first-child{margin-top:4px}

/* 記事本文の表（動的 the_content 内の素の <table>） */
.cs-abody table{
	width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 22px;
	font-size:13px;line-height:1.7;color:var(--cs-body);
	background:#fff;border:1px solid var(--cs-line);border-radius:14px;overflow:hidden;
	box-shadow:0 1px 0 var(--cs-line-2);
}
/* 横スクロール対応（狭幅で崩れないよう table をラップ相当の挙動に） */
.cs-abody table{display:table;table-layout:auto}
.cs-abody thead th{
	background:linear-gradient(180deg,#eef8f6,#e3f3f0);
	color:var(--cs-ink);font-weight:800;font-size:12.5px;
	text-align:left;padding:11px 14px;border-bottom:1px solid var(--cs-line-3);
	white-space:nowrap;
}
.cs-abody tbody th{
	background:#f6faf9;color:var(--cs-ink);font-weight:700;
	text-align:left;padding:11px 14px;border-bottom:1px solid var(--cs-line-2);
	vertical-align:top;white-space:nowrap;
}
.cs-abody td{
	padding:11px 14px;border-bottom:1px solid var(--cs-line-2);vertical-align:top;
}
.cs-abody tbody tr:last-child th,
.cs-abody tbody tr:last-child td{border-bottom:none}
.cs-abody tbody tr:nth-child(even) td,
.cs-abody tbody tr:nth-child(even) th{background:#fafcfb}
.cs-abody tbody tr:hover td{background:#f2faf8}
/* 空の左上角セル（比較表の見出し交点） */
.cs-abody thead th:empty{background:linear-gradient(180deg,#e8f4f1,#dcefec)}

/* スマホ：はみ出す表は横スクロール可能に（素の table をそのままスクロールコンテナ化） */
@media (max-width:520px){
	.cs-abody table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
	.cs-abody thead th{white-space:nowrap}
	.cs-abody tbody th,.cs-abody td{white-space:normal;min-width:9em}
}

/* =========================================================
   図解部品（本文 content_html 内で使う再利用コンポーネント）
   ・cs-flow      … 受診/様子見などの判断フローチャート
   ・cs-timeline  … 発症→回復の経過タイムライン
   画像ではなくHTML/CSSなのでクローラーが読める＝SEO/スニペット有利。
   ========================================================= */

/* --- 判断フロー cs-flow ------------------------------------ */
.cs-abody .cs-flow{margin:18px 0 24px;display:flex;flex-direction:column;gap:0}
.cs-abody .cs-flow__step{
	position:relative;background:#fff;border:1px solid var(--cs-line);
	border-radius:14px;padding:14px 16px;box-shadow:0 1px 0 var(--cs-line-2);
}
/* ステップ間の下向き矢印 */
.cs-abody .cs-flow__step + .cs-flow__step{margin-top:30px}
.cs-abody .cs-flow__step + .cs-flow__step::before{
	content:"";position:absolute;left:50%;top:-24px;transform:translateX(-50%);
	width:2px;height:18px;background:var(--cs-line-3);
}
.cs-abody .cs-flow__step + .cs-flow__step::after{
	content:"";position:absolute;left:50%;top:-10px;transform:translate(-50%,-2px);
	border-left:6px solid transparent;border-right:6px solid transparent;
	border-top:8px solid var(--cs-primary);
}
.cs-abody .cs-flow__q{
	font-size:13.5px;font-weight:800;color:var(--cs-ink);line-height:1.6;
	padding-left:26px;position:relative;margin:0 0 10px;
}
.cs-abody .cs-flow__q::before{
	content:"Q";position:absolute;left:0;top:0;width:19px;height:19px;
	background:var(--cs-mint);color:var(--cs-primary-ink);border-radius:6px;
	font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
.cs-abody .cs-flow__ways{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-abody .cs-flow__way{
	border:1px solid var(--cs-line);border-radius:11px;padding:10px 12px;background:#fbfdfc;
}
.cs-abody .cs-flow__cond{
	display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;
	padding:2px 9px;border-radius:999px;margin-bottom:6px;
	background:var(--cs-mint);color:var(--cs-primary-ink);
}
.cs-abody .cs-flow__act{font-size:13px;font-weight:700;line-height:1.65;color:var(--cs-body);margin:0}
/* 分岐カード（ある/ない/あてはまる等）は色を使わず中立トーンで統一。
   地色＝#fbfdfc、チップ＝ミント（--danger/--warn/--ok の色分けは廃止＝シンプル化）。
   受診・緊急の強調は直後の cs-callout--med が担う。 */

/* --- 経過タイムライン cs-timeline -------------------------- */
.cs-abody .cs-timeline{list-style:none;margin:18px 0 24px;padding:0;position:relative}
.cs-abody .cs-timeline::before{
	content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--cs-line);
}
.cs-abody .cs-timeline > li{position:relative;padding:0 0 18px 34px;margin:0}
.cs-abody .cs-timeline > li:last-child{padding-bottom:0}
.cs-abody .cs-timeline > li::before{
	content:"";position:absolute;left:3px;top:4px;width:14px;height:14px;border-radius:50%;
	background:var(--cs-primary);border:3px solid #fff;box-shadow:0 0 0 1px var(--cs-line);
}
.cs-abody .cs-timeline__time{
	display:inline-block;font-size:11.5px;font-weight:900;color:var(--cs-primary-ink);
	background:var(--cs-mint);padding:2px 10px;border-radius:999px;margin-bottom:5px;
}
.cs-abody .cs-timeline__head{font-size:14px;font-weight:800;color:var(--cs-ink);margin:0 0 3px;line-height:1.5}
.cs-abody .cs-timeline__body{font-size:13px;line-height:1.8;color:var(--cs-body);margin:0}

/* スマホ：フローの2分岐は縦積みに */
@media (max-width:520px){
	.cs-abody .cs-flow__ways{grid-template-columns:1fr}
}

/* =========================================================
   engagement パーツ（本文 content_html 内で使う）
   文字主体の緩和・スキャン性・冒頭価値提示で
   離脱率↓／読了率↑／滞在時間↑ を狙う再利用コンポーネント。
   ・cs-keypoints … 結論・要点カード（冒頭に置き離脱抑制）
   ・cs-callout   … コールアウト（補足/豆知識/注意/受診の目安。アイコンで差別化）
   ・cs-steps     … 番号ステップ（手順の可視化）
   ========================================================= */

/* --- 結論・要点カード cs-keypoints ------------------------- */
.cs-abody .cs-keypoints{
	margin:16px 0 24px;padding:18px 18px 15px;
	background:linear-gradient(180deg,#f2fbf9,#e9f6f3);
	border:1px solid var(--cs-line-3);border-radius:16px;
	box-shadow:0 10px 26px -20px rgba(15,48,44,.5);
}
.cs-abody .cs-keypoints__title{
	display:flex;align-items:center;gap:9px;
	font-size:14.5px;font-weight:900;color:var(--cs-ink);margin:0 0 11px;line-height:1.4;
}
.cs-abody .cs-keypoints__title::before{
	content:"";flex:none;width:24px;height:24px;border-radius:8px;
	background:var(--cs-primary) no-repeat center;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	box-shadow:0 3px 8px -3px rgba(15,155,142,.6);
}
.cs-abody .cs-keypoints ul{list-style:none;margin:0;padding:0}
.cs-abody .cs-keypoints li{
	position:relative;padding:8px 0 8px 26px;margin:0;
	font-size:13.5px;line-height:1.7;color:var(--cs-body);font-weight:600;
}
.cs-abody .cs-keypoints li + li{border-top:1px dashed var(--cs-line-3)}
.cs-abody .cs-keypoints li::before{
	content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;
	background:var(--cs-primary) no-repeat center;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- コールアウト cs-callout ------------------------------
   方針：背景・枠は統一トーン（縦ボーダー無し）。種別は「丸アイコン」で差別化。
   受診の目安/注意のみ、控えめなアクセント（アイコン色＋淡い地色）でメリハリ。 */
.cs-abody .cs-callout{
	margin:16px 0 20px;padding:14px 16px 14px 52px;position:relative;
	border:1px solid var(--cs-line);border-radius:12px;background:#f8fbfa;
}
.cs-abody .cs-callout__title{
	font-size:13px;font-weight:900;color:var(--cs-ink);margin:0 0 4px;line-height:1.5;
}
.cs-abody .cs-callout p{margin:0;font-size:13px;line-height:1.85;color:var(--cs-body)}
.cs-abody .cs-callout p + p{margin-top:7px}
/* 丸アイコンバッジ（左上・固定位置）。既定=teal（補足/豆知識） */
.cs-abody .cs-callout::before{
	content:"";position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;
	background:var(--cs-mint) no-repeat center;background-size:15px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230f9b8e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
/* 豆知識・ヒント＝電球（teal） */
.cs-abody .cs-callout--tip::before{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230f9b8e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.8.8 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}
/* 注意＝三角（控えめアンバー・地色ほんのり） */
.cs-abody .cs-callout--warn{background:#fdf9f2}
.cs-abody .cs-callout--warn::before{
	background:#f7ecd7 no-repeat center;background-size:15px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23d98118' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
/* 受診の目安＝聴診器（控えめレッド・地色ほんのり。§C：不安煽り表現は使わない） */
.cs-abody .cs-callout--med{background:#fdf4f4}
.cs-abody .cs-callout--med::before{
	background:#f6e0e0 no-repeat center;background-size:15px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23d96060' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6 6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.3.3 0 1 0 .2.3'/%3E%3Cpath d='M8 15v1a6 6 0 0 0 6 6 6 6 0 0 0 6-6v-4'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E");
}
.cs-abody .cs-callout--med .cs-callout__title{color:var(--cs-danger)}

/* --- FAQ（本文フロー内・参考文献直上に統合） --------------- */
/* 見出しは通常の .cs-abody h2 を使用（左ボーダー）。アコーディオンは白本文でも視認できるよう枠線を付与。 */
.cs-abody .cs-faq{display:flex;flex-direction:column;gap:10px;margin:8px 0 18px}
.cs-abody .cs-faq .cs-acc{border:1px solid var(--cs-line);box-shadow:0 1px 0 var(--cs-line-2)}
.cs-abody .cs-faq .cs-acc__q{font-size:13.5px}

/* --- 番号ステップ cs-steps -------------------------------- */
.cs-abody .cs-steps{list-style:none;counter-reset:cs-step;margin:18px 0 24px;padding:0}
.cs-abody .cs-steps > li{position:relative;counter-increment:cs-step;padding:0 0 20px 52px;margin:0}
.cs-abody .cs-steps > li:last-child{padding-bottom:0}
/* 縦の連結線 */
.cs-abody .cs-steps > li::after{content:"";position:absolute;left:17px;top:40px;bottom:2px;width:2px;background:var(--cs-line)}
.cs-abody .cs-steps > li:last-child::after{display:none}
/* 番号バッジ */
.cs-abody .cs-steps > li::before{
	content:counter(cs-step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
	background:var(--cs-primary);color:#fff;font-weight:900;font-size:16px;
	font-family:var(--cs-font-num,inherit);
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 10px -4px rgba(43,179,164,.7);
}
.cs-abody .cs-steps__head{font-size:14.5px;font-weight:800;color:var(--cs-ink);margin:0 0 3px;line-height:1.5;padding-top:6px}
.cs-abody .cs-steps__body{font-size:13px;line-height:1.85;color:var(--cs-body);margin:0}