@charset "UTF-8";
/*
 * 睡眠の学校 子テーマCSS
 *
 * functions.php の wp_enqueue_scripts が、このファイルが
 * **存在するときだけ** 読み込む。バージョンは filemtime なので、
 * 保存し直せばブラウザに届く（テーマの Version 書き換えは不要）。
 */

/* ============================================================
 * med-pro メディア共通タイポグラフィ・トークン v1（2026-10-03）
 *
 * 4媒体（睡眠・糖尿病・血圧の学校／クリニック開業ラボ）を実測して決めた共通値。
 * 睡眠・糖尿病・血圧の3校は SWELL なので、この節は3校で同一内容にしてある。
 * **値を変えるときは3校まとめて変えること。** 片方だけ直すと差が開く。
 *
 * 実測の根拠は申し送り台帳 COM-013。
 * ============================================================ */

/* --- ① 文字サイズの下限（最優先） ---------------------------------
 *
 * SWELL の既定は `--swl-fz--root: 3.6vw`（600px未満）/ `16px`（600px以上）。
 * **下限が無いので、画面が狭いほど際限なく縮む。**
 *   320px 端末 → 11.52px ／ 360px（国内で多い Android）→ 12.96px
 * root が縮むと、em 指定の小さな文字が連鎖的に潰れる：
 *   パンくず 10px ／ カテゴリチップ 11px ／ 監修ボックス 10.97px
 *   （320px 端末では監修ボックスが 9.36px まで落ちる）
 *
 * clamp の上限 16px は SWELL の PC 値と同じ。3.6vw が 16px に達するのは
 * 445px 幅なので、**445px 以上では既定と1pxも変わらない。**
 * 変わるのは狭い端末だけ＝今まで潰れていたところだけが直る。 */
:root:root {
	--swl-fz--root: clamp(14px, 3.6vw, 16px);
}

/* 本文。既定は `4vw`（600px未満）/ `16px`（600px以上）。
 * **375px では 4vw = 15px なので、いちばん多い幅では見た目が変わらない。**
 * 320px の 12.8px と 360px の 14.4px だけが 15px に持ち上がる。
 *
 * `:root:root` にしているのは、SWELL が設定値を `<style>` でインラインに
 * 吐くため。同じ詳細度だと後から出るインライン側が勝つ。 */
:root:root {
	--swl-fz--content: clamp(15px, 4vw, 17px);
}

/* 600px 以上は SWELL の既定（16px）どおりに戻す。
 * 上の clamp をそのままにすると 600px 以上で一律 17px になってしまう。 */
@media screen and (min-width: 600px) {
	:root:root {
		--swl-fz--content: 16px;
	}
}

/* --- ② PC の1行の文字数 -------------------------------------------
 *
 * サイドバーがある状態で本文カラムが 828px（1280px 画面）あり、
 * **1行が約52全角文字**（最長の段落で61.8字）。日本語の適正は 35〜45字。
 *
 * コンテナ幅（`--container_size`）は触らない。触ると見出し帯・表・
 * アイキャッチまで細くなる。**地の文のブロックだけに最大幅を効かせる。**
 * `em` 指定なので全角1文字＝1em、42em ＝ 約42文字。 */
@media screen and (min-width: 960px) {
	.post_content > p,
	.post_content > ul,
	.post_content > ol {
		max-width: 42em;
	}
}

/* --- ③ 表 ----------------------------------------------------------
 *
 * SWELL 本体の `build/css/main.css` に `td,th{word-break:break-all}` がある。
 * break-all は英数字の単語の途中でも無条件に折り返すため、
 * **医療の数値・単位・略語が割れて誤読の原因になる。**
 *   `eGFR` → 「eGF／R」
 *   `30 mg/gCr 未満` → 「30 mg/gC／r 未満」
 * 日本語は `normal` でもどこでも折り返すので、戻しても詰まらない。
 *
 * break-all を外すと表の最小幅が広がるぶん、はみ出しは横スクロールへ逃がす。
 * ヘッダ行に地色が無く「素のグリッド」に見えていたので、地色も入れる。 */
.post_content td,
.post_content th {
	word-break: normal;
	overflow-wrap: break-word;
}

.post_content thead th {
	background: #f3f5f7;
	color: var(--color_text, #333); /* 2026-10-09 DMS-010：SWELL の白文字が残り読めなかった */
	font-weight: 700;
}

.post_content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --- ④ 監修ボックス -------------------------------------------------
 *
 * `.8125rem` 指定が SP の root 13.5px に掛かって **10.97px** になっていた。
 * ページ中でいちばん小さい文字が「読者が受診先を選ぶ欄」という逆転。
 * ①で root に下限が入るので最悪値は消えるが、本文との差が大きすぎるため
 * ここでも一段上げる。PHP 側（supervisor-box.php）は触らない。
 *
 * ★ **クラス名を2回書いて詳細度を上げている。** supervisor-box.php は
 *   同じセレクタ（詳細度 0,1,0）を `<style>` でページ内に出しており、
 *   詳細度が同じだと**後から出るインライン側が勝つ。**
 *   2026-10-03 に1回素の `.medpro-sv__body` で入れて実測 11.375px のまま
 *   変わらず、これで判明した。`!important` は使わずに詳細度で解決する。 */
.medpro-sv__body.medpro-sv__body,
.medpro-sv__clinics.medpro-sv__clinics,
.medpro-sv__intro.medpro-sv__intro {
	font-size: .9375rem;
}

.medpro-sv__title.medpro-sv__title,
.medpro-sv__label.medpro-sv__label {
	font-size: .875rem;
}

/* 運営者・関連法人の注記。医療広告の観点で読めないと困る。 */
.medpro-sv__note.medpro-sv__note {
	font-size: .8125rem;
}

/* --- 触らないと決めたもの（記録） -----------------------------------
 *
 * 本文中のリンク色 `#1176d4` は白地で 4.52:1。AA（4.5）をぎりぎり満たす。
 * **ここを今より明るくすると不合格になる。** 配色を見直すときの下限。
 * 本文 `#333`（12.4:1）・H2帯の白抜き（12.5:1）はいずれも AAA で問題なし。
 */

/* --- 睡眠の学校 固有 ------------------------------------------------
 * いまのところ固有の指定は無い。ここに足す。 */