/*
Theme Name: Blocksy Child (Simple LMS)
Template: blocksy
Description: Simple LMS用のBlocksyチャイルドテーマ。日本語タイポグラフィとブランドカラーを提供します。
Version: 1.4.52
Author: akiyoko
Text Domain: blocksy-child
*/

/* =========================================================
   ブランドカラー（Blocksyパレット + Simple LMS を一元管理）
   ========================================================= */

:root {
	/* Blocksyのプライマリカラー（ボタン・リンク等に波及） */
	--theme-palette-color-1: #1e5a8a; /* ブランドブルー（落ち着いた深青） */
	--theme-palette-color-2: #164569; /* ホバー用の濃い青 */

	/* Simple LMS のアクセントを同じ深青に統一 */
	--slms-accent: #1e5a8a;
	--slms-accent-dark: #164569;

	/* 参考デザインの補助色 */
	--brand-blue: #2b7cd3;
	--brand-blue-dark: #1c5fae;
	--brand-green: #2eaf6e;

	/* Udemy風デザイントークン */
	--slms-navy: #1c2a3a;        /* ヒーロー・ダークUI背景 */
	--slms-navy-dark: #16222e;
	--slms-ink: #1c1d1f;         /* 見出し・価格の濃色 */
	--slms-gray-text: #6a6f73;   /* メタ情報のグレー */
	--slms-card-border: #d1d7dc; /* カード枠線 */

	/* 教材コンテンツ用（.slms-* ユーティリティで使用） */
	--slms-warning: #c62828;      /* 注意ボックスの赤 */
	--slms-warning-bg: #fdf3f2;
	--slms-marker: #ffe28a;       /* 蛍光マーカーの黄 */
}

/* =========================================================
   日本語タイポグラフィ
   -----------------------------------------------------
   ・Noto Sans JP（400/700）を全体に適用
   ・本文: 行間1.9 / 字間0.02em / 禁則処理
   ・見出し: palt（約物詰め）/ 行間1.5
   ========================================================= */

body,
button,
input,
select,
textarea {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
		"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
	line-height: 1.9;
	letter-spacing: 0.02em;
	overflow-wrap: break-word;
	line-break: strict;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-feature-settings: "palt";
	letter-spacing: 0.04em;
	line-height: 1.5;
	font-weight: 700;
}

/* 見出しサイズの調整（H1をやや大きく・H2をやや小さくして揃える）
   ・親テーマ Blocksy の Customizer 由来サイズを上書き
   ・レスポンシブに縮小しつつ H1 > H2 の大小関係を担保 */
h1, .entry-content h1 {
	font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2rem);
}

h2, .entry-content h2 {
	font-size: clamp(1.6rem, 1.3rem + 1.1vw, 1.85rem);
}

h3, .entry-content h3 {
	font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.5rem);
}

h4, .entry-content h4 {
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
}

/* 英数字の等幅崩れ防止（テーブル・スコア等） */
.slms-progress-label,
.slms-result-score {
	font-feature-settings: normal;
}

/* 長い日本語URLや英単語のはみ出し防止 */
p, li, td, th {
	overflow-wrap: break-word;
}

/* =========================================================
   本文（エントリーコンテンツ）の読みやすさ
   ========================================================= */

.entry-content p {
	margin-bottom: 1.6em;
}

.entry-content {
	font-size: 16px;
}

/* 画像キャプション（参考デザイン準拠の控えめ表示） */
.entry-content figcaption {
	color: #777;
	font-size: 12.5px;
	text-align: center;
	margin-top: 0.5em;
}

/* プルクオート（Blocksy既定の太枠＋巨大アイコンを控えめに上書き）
   親テーマ側が figure.wp-block-pullquote で当てているため詳細度を揃える */
figure.wp-block-pullquote {
	margin: 2.2em 0 2em;
	padding: 0.2em 0 0.2em 1.6em;
	border-width: 0 0 0 4px;
	border-color: var(--slms-accent);
}

/* 引用アイコン分の余白（親テーマは本文の背面に敷いて重なる）。
   em だと引用文の大きい字送りに引きずられるので rem で固定する */
figure.wp-block-pullquote blockquote {
	padding: 1.9rem 0 0;
}

figure.wp-block-pullquote blockquote::before {
	--quote-icon-size: 20px;
	top: 0;
	inset-inline-start: 0;
	background-color: var(--slms-accent);
	opacity: 0.3;
}

figure.wp-block-pullquote blockquote cite {
	display: block;
	margin-top: 0.8em;
	color: var(--slms-gray-text);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
}

/* =========================================================
   固定ページの見出し（ページタイトル H1 / 本文中の H2）
   -----------------------------------------------------
   コース一覧・プライバシーポリシー・利用規約などの通常ページ用。
   ・H1: 細いヘアライン＋先頭だけアクセント色の太線（Blocksy のヒーロー内）
   ・H2: 左のアクセントバー
   LP（.bgd-*）は独自の見出しデザインを持つので :not() で除外する。
   ========================================================= */

/* Blocksy の Customizer は [data-prefix="..."] .entry-header .page-title で
   font-size を出力し、そのインラインCSSは子テーマの style.css より後に読まれる。
   h1.page-title と要素セレクタを足して詳細度で上回る。 */
.hero-section .entry-header h1.page-title {
	--theme-font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem);
	position: relative;
	margin: 0;
	padding-bottom: 0.6em;
	color: var(--slms-ink);
	font-size: var(--theme-font-size);
	line-height: 1.4;
}

/* 全幅のヘアライン */
.hero-section .entry-header h1.page-title::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--slms-card-border);
}

/* ヘアラインの先頭に重ねるアクセントバー */
.hero-section .entry-header h1.page-title::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -1px;
	width: 64px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--slms-accent), var(--brand-blue));
}

/* タイトル下の説明文（Blocksy のヒーロー要素） */
.hero-section .entry-header .page-description {
	margin-top: 1em;
	color: var(--slms-gray-text);
	font-size: 15px;
}

/* --- 本文中の H2 ------------------------------------------ */

/* LP セクション内の見出しは .bgd-* 側のデザインを維持する */
.page .entry-content h2:not(.bgd-hero *, .bgd-section *, .bgd-cta-band *) {
	position: relative;
	margin: 2.4em 0 1em;
	padding-inline-start: 0.65em;
	color: var(--slms-ink);
}

.page .entry-content h2:not(.bgd-hero *, .bgd-section *, .bgd-cta-band *)::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	/* 大文字の天地に合わせて上下を少し詰める */
	top: 0.2em;
	bottom: 0.2em;
	width: 5px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--slms-accent), var(--brand-blue));
}

/* 本文の先頭に来る H2 は上の余白を詰める */
.page .entry-content > h2:first-child {
	margin-top: 0.4em;
}

@media (max-width: 782px) {
	.hero-section .entry-header h1.page-title {
		padding-bottom: 0.5em;
	}

	.page .entry-content h2:not(.bgd-hero *, .bgd-section *, .bgd-cta-band *) {
		margin-top: 2em;
		padding-inline-start: 0.55em;
	}
}

/* =========================================================
   規約系ページ（プライバシーポリシー・利用規約）の組版
   -----------------------------------------------------
   条文見出しが20個以上並ぶ長文なので、通常ページより一段小さくして密度を上げる。
   body クラス .slms-legal-page は functions.php がスラッグで判定して付与。
   上の「固定ページの見出し」より後に置くこと（同詳細度は後勝ち）。
   ========================================================= */

/* ヘッダーのアカウントメニュー等も .entry-content を持つため .site-main で本文に限定する。
   このクラス3個の詳細度が上の .page .entry-content h2:not(...) と同じで、後勝ちになる */
.slms-legal-page .site-main .entry-content {
	font-size: 14px;
	line-height: 1.8;
}

/* H1（ページタイトル）。font-size は上のルールが var() 参照済みなので変数だけ差し替える */
.slms-legal-page .hero-section .entry-header h1.page-title {
	--theme-font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5rem);
}

/* 小さくなった見出しに合わせて下線の先頭アクセントも短くする */
.slms-legal-page .hero-section .entry-header h1.page-title::after {
	width: 40px;
}

.slms-legal-page .site-main .entry-content h2 {
	margin: 1.9em 0 0.8em;
	padding-inline-start: 0.6em;
	font-size: 1.125rem;
}

.slms-legal-page .site-main .entry-content h2::before {
	width: 3px;
}

/* 本文の先頭に来る H2 は上の余白を詰める（上の .page ルールと同じ扱いを保つ） */
.slms-legal-page .site-main .entry-content > h2:first-child {
	margin-top: 0.4em;
}

.slms-legal-page .site-main .entry-content h3 {
	margin: 1.6em 0 0.6em;
	font-size: 1rem;
}

@media (max-width: 782px) {
	.slms-legal-page .site-main .entry-content h2 {
		margin-top: 1.7em;
	}
}

/* =========================================================
   教材コンテンツ用ユーティリティ（.slms-*）
   -----------------------------------------------------
   ブロックエディタの「高度な設定 > 追加CSSクラス」に
   指定して使う opt-in 方式。使い方は README.md を参照。
   ========================================================= */

/* --- 1) 説明ボックス（単体=色箱 / 修飾子でラベル付き） --- */

.slms-box {
	position: relative;
	margin: 2.2em 0 2em;
	padding: 1.5em 1.4em 1.3em;
	border: 1px solid var(--slms-card-border);
	border-radius: 8px;
	background: #f7f8fa;
}

.slms-box > :first-child {
	margin-top: 0;
}

.slms-box > :last-child {
	margin-bottom: 0;
}

/* ラベル付き4種の共通配置（基底には付けない） */
.slms-box--point::before,
.slms-box--hint::before,
.slms-box--warning::before,
.slms-box--note::before,
.slms-box--sample::before {
	position: absolute;
	top: -0.95em;
	left: 1em;
	padding: 0.15em 1em;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.6;
	color: #fff;
}

.slms-box--point {
	border-color: var(--slms-accent);
	background: #f2f7fb;
}

.slms-box--point::before {
	content: "POINT";
	background: var(--slms-accent);
}

.slms-box--hint {
	border-color: var(--brand-green);
	background: #f1faf5;
}

.slms-box--hint::before {
	content: "HINT";
	background: var(--brand-green);
}

.slms-box--warning {
	border-color: var(--slms-warning);
	background: var(--slms-warning-bg);
}

.slms-box--warning::before {
	content: "CAUTION";
	background: var(--slms-warning);
}

.slms-box--note {
	border-color: var(--slms-gray-text);
	background: #f7f8fa;
}

.slms-box--note::before {
	content: "NOTE";
	background: var(--slms-gray-text);
}

/* POINT の派生。出題例（試験問題のサンプル）を囲む枠。
   中に盤面や選択肢を置くので、背景は塗らず透明にする。 */
.slms-box--sample {
	border-color: var(--slms-accent);
	background: transparent;
	/* 背景が無いぶん枠と中身が近く見えるので、上下の余白を他の箱より広くとる */
	padding-top: 2.2em;
	padding-bottom: 2em;
}

.slms-box--sample::before {
	content: "SAMPLE";
	background: var(--slms-accent);
}

/* --- 1a) ボックス内のリスト（li::marker）の左に余白 --- */
/* ::marker 自体には padding を効かせられないので、ol／ul の padding-left で
   マーカーごと右へ寄せて箱の内壁との隙間を作る。
   ネストの場合、下の修飾子（--check／--dice／--num／--none）が padding-left を 0 に戻す。 */
.slms-box ol,
.slms-box ul {
	padding-left: 1.5em;
}

/* リスト自体が箱の場合は箱の padding（1.4em）に隙間を足す。
   マーカーを自前で描く修飾子は箱の padding のままにする。 */
ol.slms-box:not(.slms-box--num):not(.slms-box--none),
ul.slms-box:not(.slms-box--check):not(.slms-box--dice):not(.slms-box--num):not(.slms-box--none) {
	padding-left: 2.9em;
}

/* --- 1b) slms-box--check / --dice：ボックス内リストにアイコンを付ける --- */
/* グループ内のリストにも、リスト自体に付けた場合（ul.slms-box--*）にも効かせる */

.slms-box--check ul,
ul.slms-box--check,
.slms-box--dice ul,
ul.slms-box--dice {
	list-style: none;
}

/* ネストしたリストは自前のインデントを消す（箱の padding に揃える）。
   リスト自体が箱の場合は箱の padding を残すため対象外。 */
.slms-box--check ul,
.slms-box--dice ul {
	padding-left: 0;
}

.slms-box--check ul > li,
ul.slms-box--check > li,
.slms-box--dice ul > li,
ul.slms-box--dice > li {
	position: relative;
	padding-left: 1.7em;
	margin-bottom: 0.5em;
}

/* チェックマーク：SVGを mask で描画（色は --slms-accent トークンに追従） */
.slms-box--check ul > li::before,
ul.slms-box--check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 1.05em;
	height: 1.05em;
	background-color: var(--slms-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ダイス：絵文字 🎲 */
.slms-box--dice ul > li::before,
ul.slms-box--dice > li::before {
	content: "\1f3b2";
	position: absolute;
	left: 0;
	top: 0.5em;
	font-size: 1em;
	line-height: 1;
}

/* --- 1c) slms-box--num：ボックス内リストに数字の番号を振る --- */
/* グループ内のリストにも、リスト自体に付けた場合（ol.slms-box--num）にも効かせる */

.slms-box--num ul,
.slms-box--num ol,
ul.slms-box--num,
ol.slms-box--num {
	list-style: none;
	counter-reset: slms-box-num;
}

/* ネストしたリストは自前のインデントを消す（箱の padding に揃える）。
   リスト自体が箱の場合は箱の padding を残すため対象外。 */
.slms-box--num ul,
.slms-box--num ol {
	padding-left: 0;
}

.slms-box--num ul > li,
.slms-box--num ol > li,
ul.slms-box--num > li,
ol.slms-box--num > li {
	position: relative;
	counter-increment: slms-box-num;
	padding-left: 1.9em;
	margin-bottom: 0.5em;
}

/* 番号サークル（slms-steps--num より小ぶりに） */
.slms-box--num ul > li::before,
.slms-box--num ol > li::before,
ul.slms-box--num > li::before,
ol.slms-box--num > li::before {
	content: counter(slms-box-num);
	position: absolute;
	left: 0;
	top: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--slms-accent);
	color: #fff;
	font-size: 0.85em;
	font-weight: 700;
	font-feature-settings: normal;
	line-height: 1;
}

/* --- 1d) slms-box--none：ボックス内リストのマーカー（ドット）を消す --- */
/* グループ内のリストにも、リスト自体に付けた場合（ul.slms-box--none）にも効かせる */
.slms-box--none ul,
.slms-box--none ol,
ul.slms-box--none,
ol.slms-box--none {
	list-style: none;
}

.slms-box--none ul,
.slms-box--none ol {
	padding-left: 0;
}

.slms-box--none ul > li,
.slms-box--none ol > li,
ul.slms-box--none > li,
ol.slms-box--none > li {
	padding-left: 0;
}

.slms-box--none ul > li::before,
.slms-box--none ol > li::before,
ul.slms-box--none > li::before,
ol.slms-box--none > li::before {
	content: none;
}

/* --- 1e) slms-choices：試験問題の選択肢と同じ見た目のリスト --- */
/* 出題画面の .slms-choice（simple-lms/assets/css/exam.css）に合わせたカード。
   ラジオボタンは ::before で描くだけの飾りで、クリックしても選択はできない。
   グループ内のリストにも、リスト自体に付けた場合（ul.slms-choices）にも効かせる */
.slms-choices ul,
.slms-choices ol,
ul.slms-choices,
ol.slms-choices {
	list-style: none;
	margin: 1.4em 0;
	padding-left: 0;
}

.slms-choices ul > li,
.slms-choices ol > li,
ul.slms-choices > li,
ol.slms-choices > li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	padding: 14px 16px;
	border: 1px solid var(--slms-card-border);
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.slms-choices li:hover {
	border-color: var(--slms-accent);
}

.slms-choices ul > li::before,
.slms-choices ol > li::before,
ul.slms-choices > li::before,
ol.slms-choices > li::before {
	content: "";
	flex-shrink: 0;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 1px solid var(--slms-gray-text);
	border-radius: 50%;
	background: #fff;
}

/* 選択済みの見た目（正解例を示すときなど）。li に is-selected を足す */
.slms-choices li.is-selected {
	border-color: var(--slms-accent);
	background: #eef4fa;
}

.slms-choices li.is-selected::before {
	border-color: var(--slms-accent);
	background: var(--slms-accent);
	box-shadow: inset 0 0 0 3px #fff;
}

/* [move] ボタン入りの選択肢は上下に間延びするので、出題画面と同じく詰める */
.slms-choices li:has(.move) {
	padding-top: 8px;
	padding-bottom: 8px;
}

.slms-choices li span.move {
	margin-bottom: 0;
}

.slms-choices li button.move {
	margin-top: 0;
	margin-bottom: 0;
}

/* --- 2) ステップ（カード）リスト ---------------------------
   土台は slms-steps。番号を付けるなら slms-steps--num、
   項目間に下矢印を入れるなら slms-steps--arrow を足す（併用可）。
     ・番号のみ　：slms-steps slms-steps--num
     ・矢印のみ　：slms-steps slms-steps--arrow
     ・番号＋矢印：slms-steps slms-steps--num slms-steps--arrow
   -------------------------------------------------------- */

.slms-steps {
	list-style: none;
	margin: 2em 0;
	padding-left: 0;
}

/* 各項目は薄い背景のカード */
.slms-steps > li {
	position: relative;
	margin-bottom: 1.4em;
	padding: 0.7em 1em;
	background: #f5f8fa;
	border-radius: 8px;
}

/* --num：番号サークル */
.slms-steps--num {
	counter-reset: slms-step;
}

.slms-steps--num > li {
	counter-increment: slms-step;
	padding-left: 3.4em;
}

.slms-steps--num > li::before {
	content: counter(slms-step);
	position: absolute;
	top: 0.88em; /* 本文1行目との縦位置合わせ。この値で上下を調整 */
	left: 0.8em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--slms-accent);
	color: #fff;
	font-weight: 700;
	font-feature-settings: normal;
}

/* --arrow：各項目の間に下矢印（位置は番号の有無に関わらず共通） */
.slms-steps--arrow > li:not(:last-child) {
	margin-bottom: 2.2em;
}

.slms-steps--arrow > li:not(:last-child)::after {
	--slms-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M9.375 329.4c12.51-12.51 32.76-12.49 45.25 0L128 402.8V32c0-17.69 14.31-32 32-32s32 14.31 32 32v370.8l73.38-73.38c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-128 128c-12.5 12.5-32.75 12.5-45.25 0l-128-128C-3.125 362.1-3.125 341.9 9.375 329.4z'/%3E%3C/svg%3E");
	content: "";
	position: absolute;
	left: 40%; /* 左からの位置。この値で左右を調整 */
	bottom: -1.65em;
	transform: translateX(-50%);
	width: 1.1em;
	height: 1.1em;
	background-color: var(--slms-accent);
	-webkit-mask: var(--slms-arrow) no-repeat center / contain;
	        mask: var(--slms-arrow) no-repeat center / contain;
}

/* --- 3) 蛍光マーカー -------------------------------------- */

.slms-marker {
	background: linear-gradient(transparent 62%, var(--slms-marker) 62%);
	font-weight: 700;
}

/* --- 4) 教材テーブル（ヘッダ着色・ゼブラ縞） -------------- */

/* テーブルブロック（figure.wp-block-table）とtable直付けの両対応 */
.slms-table table,
table.slms-table {
	width: 100%;
	border-collapse: collapse;
}

.slms-table th,
.slms-table td {
	padding: 0.7em 1em;
	border: 1px solid var(--slms-card-border);
	overflow-wrap: break-word;
}

.slms-table thead th,
.slms-table tr:first-child th {
	background: var(--slms-accent);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.slms-table tbody tr:nth-child(even) td {
	background: #f5f8fa;
}

/* --- 5) 解答アコーディオン（詳細ブロック転用） ------------ */

.slms-answer {
	margin: 2em 0;
	border: 1px solid var(--slms-card-border);
	border-radius: 8px;
	overflow: hidden;
}

.slms-answer > summary {
	padding: 0.9em 1.2em;
	background: #f7f8fa;
	color: var(--slms-accent);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.slms-answer > summary::-webkit-details-marker {
	display: none;
}

.slms-answer > summary::before {
	content: "▶";
	display: inline-block;
	margin-right: 0.6em;
	font-size: 0.8em;
	transition: transform 0.2s ease;
}

.slms-answer[open] > summary {
	border-bottom: 1px solid var(--slms-card-border);
}

.slms-answer[open] > summary::before {
	transform: rotate(90deg);
}

.slms-answer > :not(summary) {
	margin: 1.2em;
}

/* --- 6) 用語リスト（dl定義リスト） ------------------------ */

.slms-terms {
	margin: 2em 0;
}

.slms-terms dt {
	padding-left: 0.8em;
	border-left: 4px solid var(--slms-accent);
	font-weight: 700;
	line-height: 1.6;
}

.slms-terms dd {
	margin: 0.4em 0 1.4em;
	padding-left: calc(0.8em + 4px);
	color: #3b3f44;
}

.slms-terms dd:last-child {
	margin-bottom: 0;
}

/* --- 7) 用語集テーブル（figure.wp-block-table.slms-glossary） --- */
/* 既存サイトの用語集CSSを踏襲：横罫のみ・左列30%・95%幅センタリング */

.wp-block-table.slms-glossary {
	margin: 0.5em 0;
}

.slms-glossary table {
	width: 95%;
	table-layout: fixed;
	margin: 0 auto;
	border-collapse: collapse; /* tr の border-top を描画させる */
	font-size: 0.95em;
}

.slms-glossary table td {
	border: 0;
}

/* 左右の縦罫・外周（上下）の枠を消し、行間の横罫のみ残す */
.slms-glossary table,
.slms-glossary table td,
.slms-glossary table th {
	border-left: 0 !important;
	border-right: 0 !important;
}

.slms-glossary table {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

.slms-glossary table tr:last-child td {
	border-bottom: 0 !important;
}

.slms-glossary table tr {
	border-top: 1px solid #f5f5f5;
}

.slms-glossary table tr td {
	padding-top: 0.5em;
	vertical-align: top;
}

.slms-glossary table tr td:nth-of-type(1) {
	width: 30%;
	padding-right: 1em;
}

@media screen and (max-width: 640px) {
	.slms-glossary table {
		width: 100%;
	}
}

/* --- 7-2) 「コース内容」ふうテーブル（slms-headcol / slms-headrow） --- */
/* コアのテーブルブロックの「追加CSSクラス」に入れて使う。
     slms-headrow … 一番上の行をうっすら着色
     slms-headcol … 一番左の列をうっすら着色＋列幅指定（is-w20/25/30/40。既定30%）
   色・罫線・余白はコース詳細の「コース内容」（simple-lms/assets/css/course-single.css）
   に合わせている。あちらを変えたらこちらも追従させること。 */

/* 外枠はカード枠線、内側の罫線は行間罫と同じ薄さ、という二段構えにする。 */
figure.wp-block-table.slms-headcol,
figure.wp-block-table.slms-headrow,
table.slms-headcol,
table.slms-headrow {
	margin: 1.5em 0;
}

.slms-headcol table,
.slms-headrow table,
table.slms-headcol,
table.slms-headrow {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	color: var(--slms-text, #333);
}

.slms-headcol table :is(th, td),
.slms-headrow table :is(th, td),
table.slms-headcol :is(th, td),
table.slms-headrow :is(th, td) {
	padding: 12px 16px;
	border: 1px solid #ebeef0;
	text-align: left;
	vertical-align: top;
	line-height: 1.7;
}

/* 外枠は 1px のカード枠線（コース詳細の「コース内容」と同じ太さ）。
   figure 側に枠線を置くと外周セルの罫線と並んで2本線（2px）に見えるので、
   外周セルの外側の辺だけを色替えして 1本にする。table 直付けの表にも同じ枠が付く。
   上辺は thead の有無で1行目の在り処が変わるため :has() で振り分ける。 */
.slms-headcol table thead tr:first-child > *,
.slms-headrow table thead tr:first-child > *,
.slms-headcol table:not(:has(thead)) tbody:first-of-type tr:first-child > *,
.slms-headrow table:not(:has(thead)) tbody:first-of-type tr:first-child > *,
table.slms-headcol thead tr:first-child > *,
table.slms-headrow thead tr:first-child > *,
table.slms-headcol:not(:has(thead)) tbody:first-of-type tr:first-child > *,
table.slms-headrow:not(:has(thead)) tbody:first-of-type tr:first-child > * {
	border-top-color: var(--slms-card-border, #d1d7dc);
}

.slms-headcol table tbody:last-of-type tr:last-child > *,
.slms-headrow table tbody:last-of-type tr:last-child > *,
table.slms-headcol tbody:last-of-type tr:last-child > *,
table.slms-headrow tbody:last-of-type tr:last-child > * {
	border-bottom-color: var(--slms-card-border, #d1d7dc);
}

.slms-headcol table tr > :first-child,
.slms-headrow table tr > :first-child,
table.slms-headcol tr > :first-child,
table.slms-headrow tr > :first-child {
	border-left-color: var(--slms-card-border, #d1d7dc);
}

.slms-headcol table tr > :last-child,
.slms-headrow table tr > :last-child,
table.slms-headcol tr > :last-child,
table.slms-headrow tr > :last-child {
	border-right-color: var(--slms-card-border, #d1d7dc);
}

/* 一番上の行。ヘッダーセクション（thead）を使う表・使わない表の両対応で、
   thead がある表では tbody の1行目まで着色しないよう :has() で振り分ける。 */
.slms-headrow table thead tr > *,
.slms-headrow table:not(:has(thead)) tbody tr:first-child > *,
table.slms-headrow thead tr > *,
table.slms-headrow:not(:has(thead)) tbody tr:first-child > * {
	background: #f7f9fa;
	color: var(--slms-ink, #1c1d1f);
	font-size: 15px;
	font-weight: 700;
}

/* 一番左の列。見出し行（thead）には効かせない（着色がぶつかるため）。 */
.slms-headcol table,
table.slms-headcol {
	table-layout: fixed; /* 指定した列幅を確実に効かせる（autoだと内容優先で無視される） */
}

.slms-headcol table tbody tr > :first-child,
table.slms-headcol tbody tr > :first-child {
	width: var(--slms-headcol-w, 30%);
	background: #f7f9fa;
	color: var(--slms-ink, #1c1d1f);
	font-weight: 700;
}

/* PC幅と、それに応じたスマホ幅（狭い指定ほどスマホも狭く）をセットで持たせる。 */
.slms-headcol.is-w15 { --slms-headcol-w: 15%; --slms-headcol-w-sp: 25%; }
.slms-headcol.is-w20 { --slms-headcol-w: 20%; --slms-headcol-w-sp: 30%; }
.slms-headcol.is-w25 { --slms-headcol-w: 25%; --slms-headcol-w-sp: 33%; }
.slms-headcol.is-w30 { --slms-headcol-w: 30%; --slms-headcol-w-sp: 38%; }
.slms-headcol.is-w40 { --slms-headcol-w: 40%; --slms-headcol-w-sp: 45%; }

/* スマホでも広げず、指定した幅のまま使いたいとき。 */
.slms-headcol.is-sp-same { --slms-headcol-w-sp: var(--slms-headcol-w, 30%); }

/* 左から2列目の幅（is-w2-10〜40）。指定しなければ従来どおり残り幅を等分する。
   1列目と違って着色はしない（幅だけ）。table-layout: fixed の列幅は「最初の行」の
   セルで決まるので、thead を持つ表でも効くよう tbody に限定せず全行に当てる。 */
.slms-headcol table tr > :nth-child(2),
table.slms-headcol tr > :nth-child(2) {
	width: var(--slms-headcol-w2, auto);
}

.slms-headcol.is-w2-10 { --slms-headcol-w2: 10%; }
.slms-headcol.is-w2-15 { --slms-headcol-w2: 15%; }
.slms-headcol.is-w2-20 { --slms-headcol-w2: 20%; }
.slms-headcol.is-w2-25 { --slms-headcol-w2: 25%; }
.slms-headcol.is-w2-30 { --slms-headcol-w2: 30%; }
.slms-headcol.is-w2-40 { --slms-headcol-w2: 40%; }

/* スマホでは左列が細すぎると折り返しが増えるので少し広げる */
@media screen and (max-width: 640px) {
	.slms-headcol table tbody tr > :first-child,
	table.slms-headcol tbody tr > :first-child {
		width: var(--slms-headcol-w-sp, 38%);
	}
}

/* --- 8) 動画解説：タイムスタンプ（slms-time）＋手番（slms-turn） --- */
/* YouTube解説文の行頭に付ける。時計アイコンは自動、時刻だけ書けばよい。
   YouTube の該当時刻へ飛ばす場合は <a class="slms-time" href="...?t=7"> に。 */

.slms-time {
	--slms-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm57.1 350.1L224.9 294c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v137.7l63.5 46.2c5.4 3.9 6.5 11.4 2.6 16.8l-28.2 38.8c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.1em 0.7em;
	border-radius: 999px;
	background: #eef1f5;
	color: var(--slms-ink);
	font-size: 0.85em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
	white-space: nowrap;
	text-decoration: none;
	vertical-align: 0.1em;
}

.slms-time::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: var(--slms-accent);
	-webkit-mask: var(--slms-clock) no-repeat center / contain;
	        mask: var(--slms-clock) no-repeat center / contain;
}

a.slms-time:hover {
	background: #e2e7ee;
}

/* 手番マーカー（駒色に合わせた丸バッジ） */
.slms-turn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7em;
	height: 1.7em;
	padding: 0 0.45em;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
	vertical-align: 0.12em;
}

.slms-turn--white {
	background: #fff;
	color: var(--slms-ink);
	border: 1.5px solid #b5b5b5;
}

.slms-turn--black {
	background: var(--slms-ink);
	color: #fff;
	border: 1.5px solid var(--slms-ink);
}

/* =========================================================
   ホーム/LP用セクション（.bgd-*）
   -----------------------------------------------------
   ブロックパターン「バックギャモン道場」（patterns.php）用。
   固定ページはBlocksy側で「コンテンツエリア幅: 全幅」＋
   タイトル非表示にして使う（alignfull前提）。

   配色は下の --bgd-* トークンに集約している。ブランド色を
   変える場合はここだけを差し替える（各ブロックに色を直書きしない）。
   ========================================================= */

:root {
	/* Blocksyの --theme-palette-color-1 はCustomizer側のインラインCSSが後勝ちで
	   上書きするため、LPでは参照しない。上の :root で定義した --slms-accent
	   （.slms-table のヘッダ・.slms-steps--num の番号丸と同じ色）に揃える。 */
	--bgd-accent: var(--slms-accent);
	--bgd-accent-dark: var(--slms-accent-dark);
	--bgd-accent-soft: #eaf2f8; /* アクセントの淡い面。カード背景・バッジ地 */
	--bgd-gold: #f5b417;        /* CTAボタン（暗い背景の上で最も目を引く） */
	--bgd-gold-dark: #dc9c06;
	--bgd-green: #0c9961;       /* 「無料」「合格」など肯定的な数値 */
	--bgd-surface: #f5f8fa;     /* 交互背景 */
	--bgd-border: var(--slms-card-border);
}

/* alignfull のセクション同士は隙間なく積む（テーマ/コアのブロック間マージンを消す） */
.bgd-hero,
.bgd-section,
.bgd-cta-band {
	margin-top: 0;
	margin-bottom: 0;
}

/* --- ヒーロー --------------------------------------------- */

.bgd-hero {
	background: linear-gradient(135deg, var(--slms-navy), var(--slms-navy-dark));
	color: #fff;
	padding: 5em 1.5em 4.5em;
}

.bgd-hero h1,
.bgd-hero h2 {
	color: #fff;
	margin-bottom: 0.3em;
}

.bgd-hero h1 {
	font-size: clamp(1.7rem, 5vw, 2.6rem);
	line-height: 1.45;
}

.bgd-hero p {
	color: rgba(255, 255, 255, 0.88);
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

.bgd-hero-sub {
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ヒーロー内のボタン：主CTAは金、副CTAは白フチ */
.bgd-hero .wp-block-button__link {
	background: var(--bgd-gold);
	color: var(--slms-ink);
	font-weight: 700;
	padding: 0.85em 2.4em;
	border-radius: 999px;
}

.bgd-hero .wp-block-button__link:hover {
	background: var(--bgd-gold-dark);
	color: var(--slms-ink);
}

.bgd-hero .is-style-outline .wp-block-button__link,
.bgd-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.7);
}

.bgd-hero .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* ヒーロー下部のキャラクター3体 */
.bgd-hero-chars {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(0.5em, 4vw, 2.5em);
	margin-top: 2.4em;
}

.bgd-hero-chars figure {
	margin: 0;
}

.bgd-hero-chars img {
	width: clamp(72px, 18vw, 132px);
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

/* --- セクション共通（縦リズム・交互背景） ------------------ */

.bgd-section {
	padding: 4em 1.5em;
	background: #fff; /* 交互背景を成立させるため明示。テーマ側の地色に依存しない */
}

.bgd-section--alt {
	background: var(--bgd-surface);
}

/* テーマ既定のボタン色（Blocksyパレット）ではなくLPのアクセントに揃える */
.bgd-section .wp-block-button__link {
	background: var(--bgd-accent);
	color: #fff;
}

.bgd-section .wp-block-button__link:hover {
	background: var(--bgd-accent-dark);
	color: #fff;
}

.bgd-section > h2 {
	margin-top: 0;
	margin-bottom: 1.4em;
}

/* 見出しの上に置く英字ラベル。h2直前に置くと余白を詰める */
.bgd-eyebrow {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bgd-accent);
	margin: 0 0 0.4em;
}

.bgd-eyebrow + h2 {
	margin-top: 0;
}

/* 見出し直下のリード文 */
.bgd-lead {
	max-width: 42em;
	margin: -0.6em auto 2em;
	text-align: center;
}

.bgd-section > h2 + .bgd-lead {
	margin-top: -0.8em;
}

/* 注記（※で始まる小さな補足） */
.bgd-note {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.86em;
	color: var(--slms-gray-text);
	line-height: 1.8;
}

.bgd-note li {
	margin-bottom: 0.2em;
}

/* --- カードグリッド（悩み・解決策・特徴） ------------------- */

/* コアのcolumnsはflexだが、グリッドにして枚数ごとの折り返しを制御する */
.bgd-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5em;
}

.bgd-cards--2 {
	grid-template-columns: repeat(2, 1fr);
}

.bgd-cards--4 {
	grid-template-columns: repeat(4, 1fr);
}

.bgd-card {
	background: #fff;
	border: 1px solid var(--bgd-border);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 1.8em 1.5em;
}

.bgd-card h3 {
	font-size: 1.05em;
	text-align: center;
	margin: 0 0 0.8em;
}

.bgd-card p:last-child {
	margin-bottom: 0;
}

.bgd-card-icon {
	font-size: 2.6em;
	line-height: 1;
	text-align: center;
	margin: 0 0 0.5em;
}

/* 解決策カードは番号を大きく見せる */
.bgd-card-num {
	display: block;
	width: 2.1em;
	margin: 0 auto 0.6em;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 2.1;
	text-align: center;
	color: #fff;
	background: var(--bgd-accent);
	border-radius: 50%;
}

@media (max-width: 1000px) {
	.bgd-cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.bgd-cards,
	.bgd-cards--2,
	.bgd-cards--4 {
		grid-template-columns: 1fr;
		gap: 1em;
	}
}

/* --- キャラクター紹介 --------------------------------------- */

.bgd-chars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5em;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.bgd-char {
	background: #fff;
	border: 1px solid var(--bgd-border);
	border-radius: 14px;
	padding: 1.6em 1.4em 1.8em;
	text-align: center;
}

/* キャラ画像は縦横比がまちまちなので、高さを揃えて下端を合わせる */
.bgd-char figure {
	margin: 0 auto 0.8em;
	height: 132px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.bgd-char img {
	max-height: 132px;
	width: auto;
}

.bgd-char h3 {
	font-size: 1.1em;
	margin: 0 0 0.15em;
}

.bgd-char-role {
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--bgd-accent);
	margin: 0 0 0.7em;
}

.bgd-char p:last-child {
	margin-bottom: 0;
	font-size: 0.92em;
	text-align: left;
}

@media (max-width: 781px) {
	.bgd-chars {
		grid-template-columns: 1fr;
	}
}

/* --- 段級位ロードマップ ------------------------------------- */

.bgd-roadmap {
	display: grid;
	gap: 0.9em;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.bgd-rank {
	display: grid;
	grid-template-columns: 6em 1fr;
	gap: 0 1.3em;
	align-items: start;
	background: #fff;
	border: 1px solid var(--bgd-border);
	border-left: 4px solid var(--bgd-accent);
	border-radius: 10px;
	padding: 1.2em 1.4em;
}

/* バッジは左列に固定し、見出し・本文は右列に流す */
.bgd-rank > .bgd-rank-badge {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: start;
	margin: 0;
	padding: 0.45em 0;
	text-align: center;
	font-weight: 700;
	color: #fff;
	background: var(--bgd-accent);
	border-radius: 999px;
}

.bgd-rank > :not(.bgd-rank-badge) {
	grid-column: 2;
}

.bgd-rank h3 {
	font-size: 1.02em;
	margin: 0.1em 0 0.35em;
}

.bgd-rank p:last-child {
	margin-bottom: 0;
	font-size: 0.94em;
}

/* 未公開の級位はトーンを落とす */
.bgd-rank--soon {
	background: transparent;
	border-style: dashed;
	border-left-color: var(--slms-gray-text);
	color: var(--slms-gray-text);
}

.bgd-rank--soon > .bgd-rank-badge {
	background: var(--slms-gray-text);
}

@media (max-width: 600px) {
	.bgd-rank {
		grid-template-columns: 1fr;
		gap: 0.5em;
	}

	.bgd-rank > .bgd-rank-badge {
		grid-row: auto;
		width: 6em;
	}

	.bgd-rank > :not(.bgd-rank-badge) {
		grid-column: 1;
	}
}

/* --- 認定証サンプル ----------------------------------------- */

.bgd-cert {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2em;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	justify-items: center;
}

.bgd-cert figure {
	margin: 0;
}

.bgd-cert img {
	width: 100%;
	height: auto;
	border: 1px solid var(--bgd-border);
	border-radius: 6px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.bgd-cert figcaption {
	text-align: center;
	font-size: 0.86em;
	color: var(--slms-gray-text);
}

@media (max-width: 600px) {
	.bgd-cert {
		grid-template-columns: 1fr;
		max-width: 320px;
	}
}

/* --- CTA帯 ------------------------------------------------- */

.bgd-cta-band {
	background: var(--bgd-accent);
	color: #fff;
	padding: 3.5em 1.5em;
	text-align: center;
}

.bgd-cta-band h2 {
	color: #fff;
	margin: 0 0 0.4em;
}

.bgd-cta-band p {
	color: rgba(255, 255, 255, 0.88);
}

.bgd-cta-band .bgd-eyebrow {
	color: rgba(255, 255, 255, 0.75);
}

/* 帯の中は金ボタンに反転（ヒーローの主CTAと同じ見た目に揃える） */
.bgd-cta-band .wp-block-button__link {
	background: var(--bgd-gold);
	color: var(--slms-ink);
	font-weight: 700;
	padding: 0.85em 2.4em;
	border-radius: 999px;
}

.bgd-cta-band .wp-block-button__link:hover {
	background: var(--bgd-gold-dark);
	color: var(--slms-ink);
}

/* 濃い地の上の帯（最終CTA） */
.bgd-cta-band--dark {
	background: linear-gradient(135deg, var(--slms-navy), var(--slms-navy-dark));
}

/* --- 価格表 ------------------------------------------------- */

.bgd-pricing {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.bgd-pricing th,
.bgd-pricing td {
	text-align: center;
}

/* 「無料」を肯定的な色で目立たせる（1行目=８級） */
.bgd-pricing tbody tr:first-child td:nth-child(2) {
	color: var(--bgd-green);
	font-weight: 700;
}

/* --- コースカード ------------------------------------------- */

.bgd-courses {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4em;
}

.bgd-course {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bgd-border);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 1.6em 1.3em;
}

.bgd-course h3 {
	font-size: 1.12em;
	text-align: center;
	margin: 0 0 0.4em;
}

.bgd-course-price {
	text-align: center;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--slms-ink);
	margin: 0 0 0.6em;
	line-height: 1.3;
}

.bgd-course-price.is-free {
	color: var(--bgd-green);
}

/* 学習時間・レベル・言語のメタ行 */
.bgd-course-meta {
	text-align: center;
	font-size: 0.78em;
	color: var(--slms-gray-text);
	line-height: 1.7;
	margin: 0 0 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--bgd-border);
}

.bgd-course p {
	font-size: 0.9em;
}

/* ボタンはカード下端に揃える */
.bgd-course .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.2em;
}

.bgd-course .wp-block-button__link {
	border-radius: 999px;
	font-weight: 700;
}

@media (max-width: 1000px) {
	.bgd-courses {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.bgd-courses {
		grid-template-columns: 1fr;
	}
}

/* --- 登録方法（PC / スマホの2カラム） ----------------------- */

.bgd-howto {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2em;
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}

.bgd-howto-col {
	background: #fff;
	border: 1px solid var(--bgd-border);
	border-radius: 12px;
	padding: 1.8em 1.6em;
}

.bgd-howto-col > h3 {
	margin: 0 0 1em;
	padding-bottom: 0.6em;
	font-size: 1.08em;
	text-align: center;
	border-bottom: 2px solid var(--bgd-accent);
}

.bgd-howto-col h4 {
	font-size: 0.98em;
	margin: 1.4em 0 0.5em;
	color: var(--bgd-accent);
}

.bgd-howto-col h4:first-of-type {
	margin-top: 0;
}

.bgd-howto-col .slms-steps {
	margin-bottom: 0;
}

.bgd-howto-col .slms-steps > li {
	font-size: 0.92em;
}

@media (max-width: 781px) {
	.bgd-howto {
		grid-template-columns: 1fr;
	}
}

/* --- FAQ ---------------------------------------------------- */

.bgd-faq {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* =========================================================
   Spectra 目次ブロック（Table of Contents）
   ========================================================= */

/* Spectra 既定の margin-left: 2.2em は左が空きすぎるので詰める。
   list-style-position: inside なので番号ごと左に寄る。
   ただし対象はトップレベルのリストだけ（子孫セレクタにすると h4 等の入れ子リストにも
   同じ値が効いてしまい、階層が視覚的に潰れる）。入れ子には別途インデントを与える。 */

.wp-block-uagb-table-of-contents .uagb-toc__list-wrap > ol.uagb-toc__list,
.wp-block-uagb-table-of-contents .uagb-toc__list-wrap > ul.uagb-toc__list {
	margin-left: 0;
}

/* 入れ子リスト（h3・h4 など下位見出し）。list-style-position: inside で
   親のマーカー分も文字送りに入るため、階層差が分かる程度の 0.8em に留める。 */

.wp-block-uagb-table-of-contents .uagb-toc__list .uagb-toc__list {
	margin-left: 0.8em;
}

/* 枠の内側パディング（既定 30px）を詰めて、目次タイトルごと左へ寄せる。
   Spectra はブロック単位に .uagb-block-xxx .uagb-toc__wrap で padding を出力するので、
   クラスを重ねて詳細度で上回る。 */

.wp-block-uagb-table-of-contents.wp-block-uagb-table-of-contents .uagb-toc__wrap {
	padding-left: 16px;
	padding-right: 16px;
}

/* タイトルはリストの箇条書き（マーカー分だけ内側に入る）と頭が揃うよう、少しだけ右へ。 */

.wp-block-uagb-table-of-contents .uagb-toc__title {
	margin-left: 8px;
}

/* =========================================================
   ヘッダー（Blocksy ヘッダービルダーの上書き）
   -----------------------------------------------------
   白ミニマル＋スティッキー。スクロールすると半透明＋ブラー＋影に変わる。
   Blocksy 無料版にはスティッキーヘッダー（Pro機能）が無いため、
   position:sticky と js/header.js が付ける .is-scrolled で自前に用意する。
   ========================================================= */

#header.ct-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid rgba(28, 42, 58, 0.08);
	transition: background-color 0.25s ease, box-shadow 0.25s ease,
		border-color 0.25s ease;
}

/* 管理バーは 783px 以上で高さ32px・601〜782pxで46pxの fixed、600px以下は
   通常フローに戻る（＝ずらす必要がない）。段階ごとに top を打ち消す。 */

.admin-bar #header.ct-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #header.ct-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar #header.ct-header {
		top: 0;
	}
}

/* スクロール後。地をわずかに透かしてブラーを掛けると板っぽさが消える。
   境界線は影に置き換える（線と影が二重に見えるのを防ぐ）。 */

#header.ct-header.is-scrolled {
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: saturate(1.6) blur(10px);
	backdrop-filter: saturate(1.6) blur(10px);
	border-bottom-color: transparent;
	box-shadow: 0 1px 2px rgba(28, 42, 58, 0.05),
		0 8px 24px rgba(28, 42, 58, 0.07);
}

/* 行の高さは Blocksy 自身の --height 変数に載せる（カスタマイザーと衝突しない）。
   値と切替幅（782px）は Simple LMS のレッスンページ上部バー（player.css の
   .slms-topbar）と揃えてある。片方だけ変えるとページ間で段差が出るので、
   変更するときは両方を直すこと。 */

#header [data-row*="middle"] {
	--height: 64px;
}

@media (max-width: 782px) {
	#header [data-row*="middle"] {
		--height: 60px;
	}
}

/* ヘッダーの「テキスト/HTML」要素（[slms_account_menu] を置いている）の余白潰し。
   wpautop がショートコードの前後に空の <p> を作り、その段落マージン（25.6px）と
   .entry-content の縦マージン（24px）がアバター32pxに積み上がって行を 81.6px まで
   押し広げる。こうなると min-height である --height が効かず高さ指定が無視される。 */

#header .ct-header-text .entry-content > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* --- ロゴ（テキストロゴ想定。字間を締めてワードマークらしく） --- */

#header .site-title {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

#header .site-title a {
	color: var(--slms-ink);
}

/* --- メニュー：ホバー／現在地で下線が中央からスライドイン ---
   .ct-menu-link は行の高さいっぱいの flex なので、下線は下端ではなく
   「中央から文字1つ分下」を基準に置く（行高を変えても文字に追従する）。 */

#header .header-menu-1 > .menu > .menu-item > .ct-menu-link {
	position: relative;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

#header .header-menu-1 > .menu > .menu-item > .ct-menu-link::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	top: calc(50% + 0.85em);
	height: 2px;
	background: var(--bgd-accent, #1e5a8a);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

#header .header-menu-1 > .menu > .menu-item > .ct-menu-link:hover::after,
#header .header-menu-1 > .menu > .current-menu-item > .ct-menu-link::after,
#header .header-menu-1 > .menu > .current-menu-ancestor > .ct-menu-link::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	#header .header-menu-1 > .menu > .menu-item > .ct-menu-link::after {
		transition: none;
	}
}

/* --- ヘッダーのCTAボタン（ヘッダービルダーの「ボタン」要素）---
   ヒーローの主CTAと同じ金のピル。ヘッダーで一番強い要素にする。 */

#header .ct-header-cta .ct-button {
	background: var(--bgd-gold, #f5b417);
	color: var(--slms-ink);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.6em 1.6em;
	border-radius: 999px;
	box-shadow: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

#header .ct-header-cta .ct-button:hover {
	background: var(--bgd-gold-dark, #dc9c06);
	color: var(--slms-ink);
	transform: translateY(-1px);
}

/* アカウントメニュー（[slms_account_menu]）をメニュー・CTAと縦位置で揃える。 */

#header .slms-account-menu {
	display: flex;
	align-items: center;
}

/* =========================================================
   フッター（Blocksy フッタービルダーの上書き）
   -----------------------------------------------------
   ミニマル2段構成。
     middle-row … サイト名（.bgd-footer-brand）＋フッターメニュー
     bottom-row … コピーライト
   背景はヒーロー（.bgd-hero）と同じネイビーにして、ページ全体を束ねる。
   ========================================================= */

#footer.ct-footer {
	background: var(--slms-navy);
	color: var(--bgd-footer-text);

	/* フッター内の文字色。メニュー・コピーライトで共有する。 */
	--bgd-footer-text: rgba(255, 255, 255, 0.72);
}

/* コピーライトとフッターメニューの文字色を揃える。
   Blocksy は要素ごとに --theme-text-color / --theme-link-*-color を出力するので、
   color を直に指定するのではなく変数ごと上書きする（直指定だとカスタマイザーで
   どちらか一方の色を触ったときに揃わなくなる）。 */

#footer.ct-footer .ct-footer-copyright,
#footer.ct-footer .footer-menu-inline {
	--theme-text-color: var(--bgd-footer-text);
	--theme-link-initial-color: var(--bgd-footer-text);
	--theme-link-hover-color: #fff;
	color: var(--bgd-footer-text);
}

/* Blocksy は行ごとに背景色を持つので、透明にして #footer の地を見せる。 */

#footer.ct-footer [data-row] {
	background: transparent;
}

#footer.ct-footer [data-row="middle"] {
	padding-top: 3.5em;
	padding-bottom: 2em;
	text-align: center;
}

/* 上下段の区切りは線1本だけ。面で区切ると重くなる。 */

#footer.ct-footer [data-row="bottom"] {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 1.4em;
	padding-bottom: 1.4em;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* サイト名。ウィジェットに置いた段落へ「追加CSSクラス」で bgd-footer-brand を指定する。 */

.bgd-footer-brand {
	color: #fff;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
	margin: 0 0 1.2em;
}

/* --- フッターメニュー：1行・区切り記号なし、スマホでは折り返す --- */

#footer .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4em 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer .menu > .menu-item {
	display: flex;
	align-items: center;
}

#footer .menu > .menu-item > a {
	padding: 0.3em 0.9em;
	font-size: 14px;
	letter-spacing: 0.04em;
}

#footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

#footer a:hover {
	color: #fff;
}

/* SNSアイコンを置く場合の下地（フッター既定は暗背景なので枠だけ与える）。 */

#footer .ct-social-box a {
	color: rgba(255, 255, 255, 0.72);
	background: rgba(255, 255, 255, 0.07);
}

#footer .ct-social-box a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
}