/* ============================================================================
 * theme.css — 全画面共通のデザイン基盤
 *
 * 目的:
 *   既存の配色（コーラル #ff7166）とレイアウトを踏襲したうえで、
 *   「淡白で情報が読み取りにくい」状態を解消する。
 *
 * 方針:
 *   - レイアウト（幅・flex・grid）には触らない。
 *     既存のレスポンシブ対応を壊さないため、変更するのは
 *     色・境界・影・角丸・余白・字送りなど「見た目」に限る。
 *   - クラス名は既存のものをそのまま使う。テンプレートの構造変更をしない。
 *   - 共通CSSの後・ページ個別CSSの前に読み込む。
 *     ページ個別CSSの単一クラス指定に負けないよう、
 *     必要な箇所だけ body を前置して詳細度を1段上げている。
 *
 * 読み込み順に依存する箇所には理由をコメントで書いている。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * デザイントークン
 * ------------------------------------------------------------------------- */
:root {
	/* ブランド色。
	 *
	 * 既存の #ff7166 は明るく、白文字を載せるとコントラスト比が 2.69 しかない
	 * （WCAG AA の通常文字は 4.5 以上が必要）。ラベルがほぼ読めない状態だった。
	 *
	 * そこで用途を分けている。
	 *   --c-brand      : 罫・下線・淡い背景など「文字を載せない装飾」用。従来色を維持。
	 *   --c-brand-fill : 塗りボタンなど「白文字を載せる面」用。白との比 4.93。
	 *   --c-brand-deep : 白地に置く文字・リンク用。白との比 5.41。
	 * 見た目の系統は保ったまま、文字が読める組み合わせだけを使う。
	 */
	--c-brand: #ff7166;
	--c-brand-fill: #ce3a28;
	--c-brand-fill-hover: #b02c1b;
	--c-brand-strong: #b02c1b;
	--c-brand-deep: #c43522;
	--c-brand-tint: #fff4f1;
	--c-brand-tint-2: #ffe9e4;

	/* 補助色: 既存の teal を引き継ぐ */
	--c-accent: #18a39c;
	--c-accent-tint: #e8f6f5;

	/* 状態色 */
	--c-success: #1f7a44;
	--c-success-tint: #eaf5ee;
	--c-warn: #9a6400;
	--c-warn-tint: #fff6e5;
	--c-danger: #c62828;
	--c-danger-tint: #fdecec;
	--c-info: #1257a5;
	--c-info-tint: #eaf1fa;

	/* 中間色: 文字と背景のコントラストを確保した階調 */
	--c-ink: #1f2430;
	--c-ink-2: #3d4557;
	--c-ink-3: #5d6579;
	--c-ink-4: #7b8397;
	--c-line: #dfe3ea;
	--c-line-strong: #c3c9d5;
	--c-bg: #f6f7f9;
	--c-surface: #ffffff;
	--c-surface-2: #fbfcfd;

	/* 角丸 */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-pill: 999px;

	/* 影: 面の重なりを1段だけ表現する（過度な立体感は付けない） */
	--sh-1: 0 1px 2px rgba(31, 36, 48, .06), 0 1px 3px rgba(31, 36, 48, .04);
	--sh-2: 0 2px 4px rgba(31, 36, 48, .06), 0 4px 12px rgba(31, 36, 48, .06);
	--sh-3: 0 8px 24px rgba(31, 36, 48, .10);

	/* 余白 */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;

	/* 文字 */
	--ff: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
		"Yu Gothic", Meiryo, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
		"Liberation Mono", "Courier New", monospace;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-bold: 700;
}

/* ---------------------------------------------------------------------------
 * ベース
 * ------------------------------------------------------------------------- */
body {
	font-family: var(--ff);
	color: var(--c-ink);
	background-color: var(--c-bg);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: "palt" 1;   /* 日本語の詰め組み */
}

/* 本文の行長が長くなりすぎると読みにくいので、字送りを少し開ける */
p, td, li, dd {
	letter-spacing: .01em;
}

a {
	color: var(--c-brand-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--c-brand-strong);
}

/* キーボード操作時のフォーカスを必ず見えるようにする（アクセシビリティ） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--c-brand-strong);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------------
 * 見出し
 *   既存の .title-common / .title-M-common を、
 *   「ブランド色の縦罫 + 太字」で階層が分かる形にする。
 * ------------------------------------------------------------------------- */
body h1, body h2, body h3, body h4 {
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	line-height: 1.45;
}

body .title-common {
	position: relative;
	padding: 0 0 var(--sp-3) 0;
	margin-bottom: var(--sp-5);
	border-bottom: 2px solid var(--c-line);
	font-size: 1.35rem;
	letter-spacing: .02em;
}

/* 見出し下線のうち、先頭だけブランド色にして視線の起点を作る */
body .title-common::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 72px;
	height: 2px;
	background: var(--c-brand);
}

body .title-M-common {
	font-size: 1.1rem;
	font-weight: var(--fw-bold);
	color: var(--c-ink-2);
	padding-left: var(--sp-3);
	border-left: 4px solid var(--c-brand);
	line-height: 1.5;
}

body .font-bold-common {
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

/* ---------------------------------------------------------------------------
 * カード / 説明ボックス
 *   .explanation-wrap-common + .border-common は各画面の説明枠。
 *   平坦な枠線だけだったため、面として認識できるようにする。
 * ------------------------------------------------------------------------- */
body .explanation-wrap-common {
	background: var(--c-surface);
	border-radius: var(--r-md);
	padding: var(--sp-4) var(--sp-5);
	line-height: 1.8;
}

body .border-common {
	border: 1px solid var(--c-line);
	box-shadow: var(--sh-1);
}

/* 注意喚起の説明枠はブランド色の左罫で目立たせる */
body .explanation-wrap-common.border-common > .font-bold-common:first-child {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--c-brand-deep);
}

/* ---------------------------------------------------------------------------
 * ボタン
 *   既存クラス（btn-middle01〜04-common 等）の見た目を統一する。
 *   01 = 主要操作、04 = 取消/戻る、という既存の使い分けを維持する。
 * ------------------------------------------------------------------------- */
body .btn,
body input[type="submit"],
body input[type="button"],
body button {
	font-family: var(--ff);
	font-weight: var(--fw-bold);
	border-radius: var(--r-md);
	transition: background-color .15s ease, border-color .15s ease,
		box-shadow .15s ease, transform .05s ease;
	letter-spacing: .02em;
}

body .btn:active,
body input[type="submit"]:active,
body button:active {
	transform: translateY(1px);
}

/* 主要操作 */
body .btn-middle01-common,
body .btn-auto01-common,
body .btn-high-small02-common {
	background: var(--c-brand-fill);
	border: 1px solid var(--c-brand-fill);
	color: #fff;
	box-shadow: var(--sh-1);
}

body .btn-middle01-common:hover,
body .btn-auto01-common:hover,
body .btn-high-small02-common:hover {
	background: var(--c-brand-fill-hover);
	border-color: var(--c-brand-fill-hover);
	color: #fff;
	box-shadow: var(--sh-2);
}

/* 副操作 */
body .btn-middle02-common,
body .btn-middle03-common {
	background: var(--c-surface);
	border: 1px solid var(--c-brand);
	color: var(--c-brand-deep);
}

body .btn-middle02-common:hover,
body .btn-middle03-common:hover {
	background: var(--c-brand-tint);
	color: var(--c-brand-deep);
}

/* 取消・戻る */
body .btn-middle04-common {
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	color: var(--c-ink-2);
}

body .btn-middle04-common:hover {
	background: var(--c-surface-2);
	border-color: var(--c-ink-4);
	color: var(--c-ink);
}

/* Bootstrap の outline ボタンも同じ質感に寄せる */
body .btn-outline-secondary {
	border-color: var(--c-line-strong);
	color: var(--c-ink-2);
}

body .btn-outline-secondary:hover {
	background: var(--c-surface-2);
	border-color: var(--c-ink-4);
	color: var(--c-ink);
}

/* 破壊的操作 */
body .btn-danger {
	background: var(--c-danger);
	border-color: var(--c-danger);
}

/* ---------------------------------------------------------------------------
 * 表
 *   管理画面の主役。行の識別性と見出しの固定感を上げる。
 * ------------------------------------------------------------------------- */
body table {
	border-collapse: separate;
	border-spacing: 0;
	background: var(--c-surface);
	width: 100%;
}

body .table,
body table.table-bordered {
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--sh-1);
}

body table th {
	background: var(--c-surface-2);
	color: var(--c-ink-2);
	font-weight: var(--fw-bold);
	font-size: .92rem;
	letter-spacing: .03em;
	vertical-align: middle;
}

body table td {
	vertical-align: middle;
	color: var(--c-ink);
}

body table th,
body table td {
	border-color: var(--c-line) !important;   /* Bootstrap の境界色を統一 */
	padding: var(--sp-3) var(--sp-3);
}

/* 見出し行（既存クラス）をブランド寄りの面にする */
body tr.table-column th,
body tr.table-column td {
	background: var(--c-brand-tint);
	color: var(--c-ink);
	border-bottom: 2px solid var(--c-brand-tint-2) !important;
}

/* 交互色とホバー: 行の追跡がしやすくなる */
body table tbody tr:nth-child(even) > td {
	background: var(--c-surface-2);
}

body table tbody tr:hover > td {
	background: var(--c-brand-tint);
}

/* ---------------------------------------------------------------------------
 * 入力欄
 * ------------------------------------------------------------------------- */
body input[type="text"],
body input[type="password"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="date"],
body input[type="file"],
body select,
body textarea {
	font-family: var(--ff);
	color: var(--c-ink);
	background-color: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	padding: var(--sp-2) var(--sp-3);
	line-height: 1.6;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body input[type="text"]:focus,
body input[type="password"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="number"]:focus,
body select:focus,
body textarea:focus {
	border-color: var(--c-brand);
	box-shadow: 0 0 0 3px var(--c-brand-tint-2);
	outline: none;
}

/* 読み取り専用は「編集できない」ことが分かる面にする */
body input[readonly],
body textarea[readonly] {
	background-color: var(--c-bg);
	color: var(--c-ink-3);
	border-style: dashed;
}

body input:disabled,
body select:disabled,
body textarea:disabled {
	background-color: var(--c-bg);
	color: var(--c-ink-4);
	cursor: not-allowed;
}

body ::placeholder {
	color: var(--c-ink-4);
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 通知・エラー表示
 * ------------------------------------------------------------------------- */
body .alert {
	border-radius: var(--r-md);
	border-width: 1px;
	border-left-width: 4px;
	padding: var(--sp-3) var(--sp-4);
	box-shadow: var(--sh-1);
}

body .alert-danger {
	background: var(--c-danger-tint);
	border-color: var(--c-danger);
	color: #7d1a1a;
}

body .alert-warning {
	background: var(--c-warn-tint);
	border-color: var(--c-warn);
	color: #6d4700;
}

body .alert-success {
	background: var(--c-success-tint);
	border-color: var(--c-success);
	color: #145a31;
}

body .alert-info {
	background: var(--c-info-tint);
	border-color: var(--c-info);
	color: #0e3f78;
}

body .text-danger,
body #text-danger {
	color: var(--c-danger) !important;
	font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------------------
 * リンク（既存クラス）
 * ------------------------------------------------------------------------- */
body .link-font-common {
	color: var(--c-brand-deep);
	font-weight: var(--fw-medium);
}

body .link-font-common:hover {
	color: var(--c-brand-strong);
}

/* ---------------------------------------------------------------------------
 * 印刷: 管理画面の一覧をそのまま配布できるようにする
 * ------------------------------------------------------------------------- */
@media print {
	body {
		background: #fff;
	}

	.side-body,
	.header-btn-wrap,
	.form-btn {
		display: none !important;
	}

	body .table,
	body table.table-bordered {
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------------
 * 受講者画面
 *   マイページ・ログイン・学習画面。既存クラスの見た目だけを整える。
 * ------------------------------------------------------------------------- */

/* ログイン: 中央のフォームをカードとして見せる */
body .form-signin {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2);
	padding: var(--sp-6) var(--sp-5);
}

body .form-signin .form-control {
	height: auto;
	min-height: 44px;          /* タップしやすい高さ */
	font-size: 1rem;
}

/* Bootstrap のフォーム部品も共通の質感に寄せる */
body .form-control {
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	color: var(--c-ink);
}

body .form-control:focus {
	border-color: var(--c-brand);
	box-shadow: 0 0 0 3px var(--c-brand-tint-2);
}

/* マイページ: 章カードの区切りを面として見せる */
body .wrap-80-common > div {
	margin-bottom: var(--sp-5);
}

body .title-wrap-border {
	border-bottom: 2px solid var(--c-line);
	padding-bottom: var(--sp-2);
	font-size: 1.2rem;
	font-weight: var(--fw-bold);
	position: relative;
}

body .title-wrap-border::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 64px;
	height: 2px;
	background: var(--c-brand);
}

/* 章の一覧行 */
body .border-left-1sol-common {
	border-left: 1px solid var(--c-line);
}

body .border-bottom-GMSL05 {
	border-bottom: 1px solid var(--c-line);
}

/* 章カードに余白と面を与える（レイアウト幅は変えない） */
body .course-ezplanation-common {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	padding: var(--sp-4);
}

/* 学習ボタン（小） */
body .btn-small04-common,
body .btn-small02-common {
	border-radius: var(--r-md);
	font-weight: var(--fw-bold);
	transition: background-color .15s ease, box-shadow .15s ease;
	min-height: 40px;
}

body .btn-border-GMSL05 {
	border: 1px solid var(--c-brand);
	color: var(--c-brand-deep);
	background: var(--c-surface);
}

body .btn-border-GMSL05:hover {
	background: var(--c-brand-tint);
	box-shadow: var(--sh-1);
}

body .link-font-pink-common {
	color: var(--c-brand-deep);
}

/* 進捗の数値表示を読みやすくする */
body .n-rte-num-GMSL05,
body .n-time-num-GMSL05 {
	font-weight: var(--fw-bold);
	color: var(--c-brand-deep);
}

/* 無効ボタンは「押せない」ことが分かる見た目にする */
body .btn:disabled,
body .btn[disabled],
body button:disabled,
body input[type="submit"]:disabled {
	background: var(--c-bg);
	border-color: var(--c-line);
	color: var(--c-ink-4);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 1;                /* Bootstrap の半透明をやめ、色で示す */
}

/* ---------------------------------------------------------------------------
 * eラーニング出題画面
 *   長文の設問と選択肢が続くため、可読性と選択状態の分かりやすさを優先する。
 * ------------------------------------------------------------------------- */

/* 選択肢のラベルを面にして、クリック範囲を明示する */
body .radio_label,
body label.radio_label {
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-md);
	padding: var(--sp-3) var(--sp-4);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease,
		box-shadow .15s ease;
	min-height: 44px;
	align-items: center;
}

body .radio_label:hover {
	border-color: var(--c-brand);
	background: var(--c-brand-tint);
}

/* 選択中の選択肢をはっきり示す */
body .radio_label input:checked ~ p,
body .radio_label input:checked + p {
	font-weight: var(--fw-bold);
	color: var(--c-brand-deep);
}

/* 設問文 */
body .question,
body .question_wrap,
body .format2-question_wrap {
	line-height: 1.9;
	font-size: 1.02rem;
}

/* 正誤表示 */
body .correct_wrap,
body .correct_title {
	border-radius: var(--r-md);
}

/* 質問（チャット）フォーム */
body .toiawase_text {
	border-radius: var(--r-md);
	min-height: 120px;
}

body .soushin-btn {
	background: var(--c-brand-fill);
	border: 1px solid var(--c-brand-fill);
	color: #fff;
	font-weight: var(--fw-bold);
	border-radius: var(--r-md);
	min-height: 44px;
}

body .soushin-btn:hover {
	background: var(--c-brand-fill-hover);
	color: #fff;
}

/* コンソール表示（記述式の出力欄など）は等幅で読ませる */
body .console,
body pre.console {
	font-family: var(--ff-mono);
	background: #1f2430;
	color: #e6e8ee;
	border-radius: var(--r-md);
	padding: var(--sp-3);
	overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * ボタンの潰れ防止
 *
 * common.css は主要ボタンに width:220px を指定しているが、
 * flex コンテナの子になっている画面では flex-shrink が効いて
 * 220px より狭く潰れ、ラベルが折り返して極端に縦長になっていた
 * （ログイン画面の幅360pxで「ログイン」が4行になり高さ110pxになる）。
 *
 * 潰さない・折り返さないことを明示し、狭い画面では横幅を使い切る。
 * ------------------------------------------------------------------------- */
body .btn-middle01-common,
body .btn-middle02-common,
body .btn-middle03-common,
body .btn-middle04-common,
body .btn-auto01-common,
body .btn-high-small02-common,
body .btn-small02-common,
body .btn-small04-common {
	white-space: nowrap;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;          /* 指でもポインタでも押しやすい高さに統一 */
	padding-left: var(--sp-4);
	padding-right: var(--sp-4);
}

/* 狭い画面では固定幅をやめ、押しやすい全幅ボタンにする */
@media screen and (max-width: 768px) {
	body .btn-middle01-common,
	body .btn-middle02-common,
	body .btn-middle03-common,
	body .btn-middle04-common,
	body .btn-auto01-common {
		width: 100%;
		max-width: 340px;
	}

	/* ボタンが横に並ぶ操作列は縦積みにする */
	body .form-btn {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		align-items: stretch;
	}
}

/* ---------------------------------------------------------------------------
 * ログイン画面の入れ子幅の是正
 *
 * GMSL01.css は .row1{width:40%} の中に .row3{width:51%} を入れており、
 * 割合が掛け算になって実効20%まで縮む。
 * 画面幅360pxではログインボタンの領域が57pxしか残らず、
 * ラベルがはみ出して押しにくい状態だった。
 *
 * デスクトップの見た目は変えず、狭い画面でのみ幅を解放する。
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
	body .form-signin .row1,
	body .form-signin .row2,
	body .form-signin .row3 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	body .form-signin .row2,
	body .form-signin .row3 {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
 * 小ボタンの高さ固定によるラベルはみ出しの是正
 *
 * common.css / GMSL10.css は小ボタンに height:30px を固定しているため、
 * 「カリキュラム確認」のような長いラベルが枠から出て重なっていた
 * （必要な高さ38pxに対して28pxしか無い状態）。
 *
 * 幅（140px）はデスクトップの見た目を保つためそのままにし、
 * 高さだけ内容に合わせて伸びるようにする。
 * ------------------------------------------------------------------------- */
body .btn-small01-common,
body .btn-small02-common,
body .btn-small02-disabled-common,
body .btn-small03-common,
body .btn-small04-common,
body .btn-small05-common,
body .btn-small06-common,
body .btn-small01-GMSL10,
body .checkbtn-small01-GMSL10,
body .checkbtn-small02-GMSL10 {
	height: auto;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-2) var(--sp-3);
	line-height: 1.4;
	text-align: center;
	border-radius: var(--r-md);
	font-weight: var(--fw-bold);
}

/* 長いラベルは折り返して良いが、はみ出させない */
body .btn-small04-common,
body .btn-small05-common,
body .btn-small06-common {
	white-space: normal;
	overflow-wrap: break-word;
}

/* 資料リンクの極小ボタン（16px固定）も内容に合わせる */
body .pdf-btn {
	height: auto;
	min-height: 24px;
}

/* 章一覧の操作列は縦に積み、ボタン幅を揃える */
body .flex-dr-col-common > div > form,
body .flex-dr-col-common > div {
	margin-bottom: var(--sp-1);
}

/* ---------------------------------------------------------------------------
 * 見出しのアクセント罫と本文の位置を合わせる
 *
 * .title-M-common は中央寄せされる画面（マイページ）と
 * 左寄せの画面（管理画面）の両方で使われている。
 * ブロック要素のまま左罫を付けると、中央寄せの画面では
 * 罫だけが左端に離れて残ってしまう。
 * インラインブロックにして文字幅に合わせることで、
 * どちらの寄せ方でも罫が文字の隣に来る。
 * ------------------------------------------------------------------------- */
body .title-M-common {
	display: inline-block;
}

/* ---------------------------------------------------------------------------
 * 章一覧の集計表示（正答率・解答時間）
 *
 * 中身は「解答時間 :」＋値の2要素だが、ボタン用クラス（幅140px固定）を
 * 流用しているため、値まで入り切らず不自然な位置で折り返していた。
 * 内容に合わせて広がるようにし、時刻は途中で割らない。
 * ------------------------------------------------------------------------- */
body .flex-line-center-common {
	width: auto;
	min-width: 140px;
	gap: var(--sp-1);
	white-space: nowrap;
}

body .ans-time-num-GMSL05,
body .ans-rate-num-GMSL05 {
	white-space: nowrap;
	font-weight: var(--fw-bold);
	color: var(--c-brand-deep);
}

body .ans-time-GMSL05,
body .ans-rate-GMSL05 {
	white-space: nowrap;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 塗りボタンの文字色を守る
 *
 * .btn-small05-common は「コーラル地に白文字」を意図しているが、
 * テンプレートでは .link-font-common（文字色をコーラルにする）と
 * 併用されている箇所がある。
 * .link-font-common 側の指定が後から効くと
 * 「コーラル地にコーラル文字」になり、ラベルがほぼ読めなくなる。
 *
 * 塗りのあるボタンでは、リンク色指定より文字色を優先する。
 * ------------------------------------------------------------------------- */
body .btn-small05-common,
body .btn-small05-common.link-font-common,
body .btn-middle01-common.link-font-common,
body .btn-auto01-common.link-font-common,
body .btn-high-small02-common.link-font-common {
	background: var(--c-brand-fill);
	border-color: var(--c-brand-fill);
	color: #fff;
}

/* ボタン内の入れ子要素（アイコン＋文字を span で包む等）にも色を継がせる */
body .btn-small05-common *,
body .btn-middle01-common *,
body .btn-auto01-common *,
body .btn-high-small02-common * {
	color: inherit;
}

body .btn-small05-common:hover,
body .btn-small05-common.link-font-common:hover {
	background: var(--c-brand-fill-hover);
	border-color: var(--c-brand-fill-hover);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * 塗りボタンの一覧（白文字を載せる面）
 *
 * common.css / common2.css / form.css が #FF7166 に白文字を載せている箇所を
 * まとめて読める配色に置き換える。#FF7166 と白の比は 2.69 しかない。
 * ------------------------------------------------------------------------- */
body .btn-small01-common,
body .form-submit,
body .col-2 .form-submit {
	background-color: var(--c-brand-fill);
	border-color: var(--c-brand-fill);
	color: #fff;
}

body .btn-small01-common:hover,
body .form-submit:hover,
body .col-2 .form-submit:hover {
	background-color: var(--c-brand-fill-hover);
	border-color: var(--c-brand-fill-hover);
	color: #fff;
}

body .btn-small01-common *,
body .form-submit * {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * 管理画面の側メニュー
 *
 * 分類見出し（.menu-title）は #B2B2B2 の帯に白文字で、
 * コントラスト比が 2.12 しかなく読みにくかった。
 * 帯という構造は保ったまま、地色を暗くして白文字が読めるようにする。
 * ------------------------------------------------------------------------- */
body .menu-title {
	background-color: var(--c-ink-2);
	color: #fff;
	font-weight: var(--fw-bold);
	font-size: .88rem;
	letter-spacing: .06em;
	display: block;
	padding: var(--sp-2) var(--sp-3);
}

body .sub-menu-title {
	color: var(--c-ink);
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	min-height: 40px;
	transition: background-color .12s ease, color .12s ease;
}

body .sub-menu-title:hover {
	background: var(--c-brand-tint);
	color: var(--c-brand-deep);
	text-decoration: none;
}

body .side-body {
	background: var(--c-surface);
	border-right: 1px solid var(--c-line);
}

/* ---------------------------------------------------------------------------
 * 操作ボタン列の間隔
 *
 * .form-btn（検索）と .right-button（新規作成・CSV等）は上下に隣接しており、
 * どちらも塗りボタンのため間隔が無いと1つの大きな塊に見えて、
 * 押す対象が判別できなかった。
 * ------------------------------------------------------------------------- */
body .form-btn,
body .right-button {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	margin-bottom: var(--sp-3);
}

/* ---------------------------------------------------------------------------
 * 管理画面の表
 *
 * 列数が多い一覧では、余白が広いと「001」「0 本」のような短い値まで
 * 途中で折り返してしまう。余白を詰め、短い値は折り返さない。
 * 収まらない場合は表を横スクロールさせる（レイアウトを崩さない）。
 * ------------------------------------------------------------------------- */
body .admin-body table th,
body .admin-body table td {
	padding: var(--sp-2) 10px;
}

body .admin-body table th {
	white-space: nowrap;
}

/* 「001」「0本」のような短い値が途中で割れないようにする。
   common.css の body{overflow-wrap:break-word} が効いており、列幅が足りないと
   単語の途中で改行されていた（「00」「1」に分かれる）。
   短い値は分割せず、必要なら列を広げる。 */
body .admin-body table td,
body .admin-body table th {
	word-break: keep-all;
	overflow-wrap: normal;
}

/* 操作列のボタンが幅を占めすぎて他の列を圧迫していた。
   一覧内のボタンは小さめにし、ラベルは折り返さない。 */
body .admin-body table td .btn,
body .admin-body table td button,
body .admin-body table td input[type="submit"] {
	font-size: .82rem;
	padding: 4px 8px;
	min-height: 32px;
	white-space: nowrap;
}

/* 一覧内のリンク（編集・プレビュー）も詰める */
body .admin-body table td a {
	white-space: nowrap;
}

/* 表が収まらない場合の横スクロール（親側で受ける） */
body .admin-body .container {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * プルダウン・入力欄が画面幅を超えないようにする
 *
 * <select> は既定で最も長い選択肢に合わせて広がる。
 * 章名のような長い項目を持つ画面（章管理・ユーザー管理）では
 * 幅918pxまで広がり、狭い画面で横スクロールが発生していた。
 *
 * 収まる幅までに抑え、あふれる文字は省略記号で示す。
 * ------------------------------------------------------------------------- */
body select,
body input,
body textarea {
	max-width: 100%;
}

body select {
	text-overflow: ellipsis;
}

/* 章・期生の選択は横幅を使い切って読みやすくする */
body .admin-body select {
	width: 100%;
}

/* テーブルは自身の中で横スクロールさせ、ページ全体を押し広げない */
@media screen and (max-width: 1024px) {
	body .admin-body table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
 * 学習履歴（GMSL13_01）
 *
 * 見出し行は #FF7166 に白文字（コントラスト比 2.69）で読みにくかった。
 * また .chart-wrapper が幅770px固定のため、狭い画面で横スクロールしていた。
 * ------------------------------------------------------------------------- */
body .tr-1 th {
	background-color: var(--c-brand-fill);
	color: #fff;
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

body .tr-each td {
	border-bottom: 1px solid var(--c-line);
}

/* 固定幅をやめ、収まる範囲で最大化する */
body .chart-wrapper,
body #pdf-container,
body .chapter-table {
	max-width: 100%;
}

body .chart-wrapper {
	width: 100%;
}

/* グラフの canvas は幅730px固定で描画されるため、狭い画面で
   ページ全体を押し広げていた。表示上は縮小して収める。 */
body #pdf-container canvas,
body .chart-wrapper canvas,
body canvas#chart {
	max-width: 100%;
	height: auto !important;
}

/* 履歴表は章タイトルが長いため、折り返しは許したうえで
   収まらない場合だけ表の中で横スクロールさせる。
   （nowrap にすると表が2000px超になり、かえって読みにくい） */
@media screen and (max-width: 1024px) {
	body .chapter-table {
		display: block;
		overflow-x: auto;
		white-space: normal;
	}

	body .chapter-table .td-2 {
		min-width: 12em;
	}
}