@charset "utf-8";

th {
	background-color: #CCC;
}

ruby{
	pointer-events: none;
}

h2 {
	padding: 0px 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 3px solid #444;
	box-shadow: 3px 3px #d4d4d4;
	/*影の色とサイズ*/
}

h3 {
	border-left: 10px solid var(--subject-color);
	border-bottom: 1px dashed var(--subject-color);
	margin-top: 20px;
	font-size: 2.0rem;
	padding-left: 10px;
	margin-bottom: 10px;
}

h4:before {
	content: '';
	height: 12px;
	width: 12px;
	display: block;
	position: absolute;
	top: -0px;
	left: 5px;
	transform: rotate(-50deg);
	-webkit-transform: rotate(-50deg);
	-moz-transform: rotate(-50deg);
	-o-transform: rotate(-50deg);
	-ms-transform: rotate(-50deg);
}

h4:after {
	content: '';
	height: 8px;
	width: 6px;
	display: block;
	position: absolute;
	top: 16px;
	left: 2px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-75deg);
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ins {
	text-align: center;
	/* Googleの広告表示と解答部分の下線が重なるのを解消するため */
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

/* header */

div.overview {
	margin-bottom: 20px;
	position: relative;
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	border: solid 2px var(--subject-color);
}

div div.title {
	position: absolute;
	top: -19px;
	left: 15px;
	padding: 0 10px;
	background-color: var(--pale-white);
	font-weight: bold;
	font-size: 1.9rem;
}

/* 目次 */
div#toc {
	position: relative;
	margin-top: 20px;
}

div#toc ol.toc-item {
	padding-top: 10px;
}

div#toc ol.toc-item ol li {
	list-style-type: circle;
	margin-left: -1em;
	padding-top: 5px;
}

.button {
	width: 150px;
	height: 40px;
	border: none;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	border-radius: 10px;
	opacity: 1;
	transition: all 0.3s ease-out;
}

.button:hover {
	cursor: pointer;
	opacity: 0.7;
}

.button:disabled {
	opacity: 0.3;
}

.toc-item>li>ol {
	padding-left: 2rem;
}

.toc-item>li:not(:first-child) {
	margin-top: 1.5rem;
}

@media screen and (min-width: 0px) and (max-width: 700px) {
	h1 {
		font-size: 3.3rem;
		line-height: 3.8rem;
	}
}


h4 {
	position: relative;
	padding-left: 20px;
	margin-top: 20px;
	font-size: 1.8rem;
	line-height: 30px;
}

h5 {
	font-size: 1.5rem;
	margin-top: 15px;
	text-indent: -1em;
	padding-left: 1em;
}

h5:before {
	content: '【';
}

h5:after {
	content: '】';
}

div.contents {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

div.contents>ul {
	padding-left: 1em;
}

/* div.contents直下のulは丸数字連番リストとして扱う（ul.enと同じ） */
div.contents>ul li,
div.contents .markdown-content>ul li {
	padding-left: 1em;
	text-indent: -1em;
}

div.contents>ul li:first-child:before,
div.contents .markdown-content>ul li:first-child:before { content: "\2460"; }
div.contents>ul li:first-child+li:before,
div.contents .markdown-content>ul li:first-child+li:before { content: "\2461"; }
div.contents>ul li:first-child+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li:before { content: "\2462"; }
div.contents>ul li:first-child+li+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li+li:before { content: "\2463"; }
div.contents>ul li:first-child+li+li+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li+li+li:before { content: "\2464"; }
div.contents>ul li:first-child+li+li+li+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li+li+li+li:before { content: "\2465"; }
div.contents>ul li:first-child+li+li+li+li+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li+li+li+li+li:before { content: "\2466"; }
div.contents>ul li:first-child+li+li+li+li+li+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li+li+li+li+li+li:before { content: "\2467"; }
div.contents>ul li:first-child+li+li+li+li+li+li+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li+li+li+li+li+li+li:before { content: "\2468"; }
div.contents>ul li:first-child+li+li+li+li+li+li+li+li+li:before,
div.contents .markdown-content>ul li:first-child+li+li+li+li+li+li+li+li+li:before { content: "\2469"; }

div.contents div.gazo img.half {
	width: 150px;
}

div.contents div.gazo img.quarter {
	width: 80px;
}

div.contents div.top {
	padding-left: 1em;
	text-align: left;
}

div.contents div.middle {
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
}

div.contents div.middle:before {
	content: "→";
}

div.contents div.last {
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
}

div.contents div.last:before {
	content: "⇒";
}

div.contents div.equal {
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
}

div.contents div.equal:before {
	content: "＝";
}

div.contents div.hanging {
	padding-left: 1em;
	text-indent: -1em;
}

div.contents div.sup {
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
}

div.contents div.sup:before {
	content: "◇";
}

div.contents div.lead {
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
}

div.contents div.lead:before {
	content: "…";
}

div.contents div.equal {
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
}

div.contents div.equal:before {
	content: "＝";
}

div.contents div.arrow {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

div.contents div.arrow:before {
	content: "▼";
}

div.contents div.blank {
	height: 1em;
}

div.contents div.gazo {
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
}

@media screen and (min-width: 701px) {

	/*小単元の小問を包むブロック*/
	div.contents {
		width: 50%;
		min-width: 660px;
		margin-top: 20px;
		padding-bottom: 5%;
	}

	div.contents div.gazo img {
		width: 300px;
	}

	div.contents div.gazo img.twice {
		width: 600px;
	}

	/* 上記の min-width: 660px は、本文がページ全体の単一カラムだった頃の名残。
	   3カラムレイアウト（.center-column）内の.contentsは列幅が660pxより
	   狭くなり得るため、同じ701px以上のときだけ解除してオーバーフローを防ぐ
	   （この範囲外、スマホ表示のwidth:88%等には影響させない）。 */
	.center-column .contents {
		width: auto;
		min-width: 0;
	}
}

@media screen and (min-width: 321px) and (max-width: 700px) {
	div.contents {
		width: 88%;
		padding-top: 5%;
		padding-bottom: 5%;
	}

	div.contents div img {
		width: 280px;
	}

	div.contents div img.twice {
		width: 100%;
	}
}

@media screen and (min-width: 0px) and (max-width: 320px) {
	div.contents {
		width: 88%;
		padding-top: 5%;
		padding-bottom: 5%;
	}

	div.contents div img {
		width: 90%;
		/*画像の最大値*/
	}
}

div.contents img.table {
	width: 100%;
	float: none;
	margin-top: 30px;
	margin-bottom: 30px;
}

.en li,
.circle li {
	padding-left: 1em;
	text-indent: -1em;
}

/*番号①*/

ul.en li:first-child:before {
	content: "\2460";
}

/*番号②*/

ul.en li:first-child+li:before {
	content: "\2461";
}

/*番号③*/

ul.en li:first-child+li+li:before {
	content: "\2462";
}

/*番号④*/

ul.en li:first-child+li+li+li:before {
	content: "\2463";
}

/*番号⑤*/

ul.en li:first-child+li+li+li+li:before {
	content: "\2464";
}

/*番号⑥*/

ul.en li:first-child+li+li+li+li+li:before {
	content: "\2465";
}

/*番号⑦*/

ul.en li:first-child+li+li+li+li+li+li:before {
	content: "\2466";
}

/*番号⑧*/

ul.en li:first-child+li+li+li+li+li+li+li:before {
	content: "\2467";
}

/*番号⑨*/

ul.en li:first-child+li+li+li+li+li+li+li+li:before {
	content: "\2468";
}

/*番号⑩*/

ul.en li:first-child+li+li+li+li+li+li+li+li+li:before {
	content: "\2469";
}

/*番号⑪*/

ul.en li:first-child+li+li+li+li+li+li+li+li+li+li:before {
	content: "\246A";
}

/*番号⑫*/

ul.en li:first-child+li+li+li+li+li+li+li+li+li+li+li:before {
	content: "\246B";
}

/*番号⑬*/

ul.en li:first-child+li+li+li+li+li+li+li+li+li+li+li+li:before {
	content: "\246C";
}

/*番号⑭*/

ul.en li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li:before {
	content: "\246D";
}

/*番号⑮*/

ul.en li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li:before {
	content: "\246E";
}

/*-------------------------------------*/

/* トップページに「戻る」 */

/*-------------------------------------*/

@media screen and (min-width: 901px) {
	div.contents div.footer {
		text-align: center;
		margin-top: 80px;
	}

	div.contents div.footer img {
		width: 100px;
	}
}

@media screen and (min-width: 501px) and (max-width: 900px) {
	div.contents div.footer {
		text-align: center;
		margin-top: 80px;
	}

	div.contents div.footer img {
		width: 100px;
	}
}

@media screen and (min-width: 0px) and (max-width: 500px) {
	div.contents div.footer {
		text-align: center;
		margin-top: 50px;
		margin-bottom: 50px;
	}

	div.contents div.footer img {
		width: 30%;
	}
}

div.contents span.all {
	color: transparent;
	border-bottom: solid 1px #000;
	padding-left: 1em;
	padding-right: 1em;
	cursor: pointer;
}

div.contents span.all.show {
	color: #FF0000;
}

div.contents span.red-text {
	color: #FF0000;
	cursor: default;
}

div.contents span.true_choice,
span.false_choice {
	padding-left: 1em;
	padding-right: 1em;
	cursor: pointer;
}

div.contents span.choice::before {
	content: "《";
}

div.contents span.choice::after {
	content: "》";
}

div.contents span.choice.show span.true_choice {
	border: 3px solid #FF0000;
	border-radius: 5px;
}

div.contents span.choice.show span.false_choice {
	text-decoration: line-through;
}

.explanation {
	font-size: 1.1rem;
	position: relative;
	background: #ffffff;
	border: 1px solid #000000;
	width: 90%;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	margin-bottom: 30px;
	text-align: left;
}

.explanation:first-line {
	font-size: 1.5rem;
}

.explanation:after,
.explanation:before {
	bottom: 100%;
	left: 65%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.explanation:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 20px;
	margin-left: -20px;
}

.explanation:before {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #000000;
	border-width: 21px;
	margin-left: -21px;
}

.serif {
	font-size: 1.5rem;
	position: relative;
	background: #ffffff;
	border: 1px solid #000000;
	width: 90%;
	max-width: 300px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 15px 5px 15px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	/*Safari,Google Chrome用*/
	-moz-border-radius: 20px;
	/*Firefox用*/
}

.serif:after,
.serif:before {
	top: 100%;
	left: 55%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.serif:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 20px;
	margin-left: -20px;
}

.serif:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 21px;
	margin-left: -21px;
}

/*２重枠での説明*/

div.double {
	border: double;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	/*Safari,Google Chrome用*/
	-moz-border-radius: 20px;
	/*Firefox用*/
	overflow: hidden;
	padding-right: 1em;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-top: 10px;
	margin-bottom: 30px;
}

div.double div {
	text-align: center;
}

div.double div.top:first-line {
	font-weight: bold;
	display: block;
}

/*黄色まーかー*/

span.marker {
	background: linear-gradient(transparent 60%, #ffff66 60%);
}

div img.border border-1 {
	border: solid 1px;
}

.form-radio-none input[type=radio] {
	display: none;
}

li:has(> input[type="radio"]:checked) {
	border: dashed 2px gray;
}

/* アイコン（チェック付きの丸／○／×）はFont Awesomeを使わず、CSSのマスク（インラインSVG）で描画する */
li:has(> input[type="radio"]:checked)::before,
.correct::before,
.incorrect::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.3em;
	vertical-align: -0.2em;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* 画像に重ねる文字 */
li:has(> input[type="radio"]:checked)::before {
	position: relative;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M7 12.5l3.5 3.5L17 9' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M7 12.5l3.5 3.5L17 9' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.correct::before {
	background-color: #0000FF;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
}

.incorrect::before {
	background-color: #FF0000;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5L19 19M19 5L5 19' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5L19 19M19 5L5 19' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

#overlay {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner {
	width: 40px;
	height: 40px;
	border: 4px #ddd solid;
	border-top: 4px #2e93e6 solid;
	border-radius: 50%;
	animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
	100% {
		transform: rotate(360deg);
	}
}

.is-hide {
	display: none;
}

dl {
	margin-bottom: 20px
}

.faqs {
	padding-top: 8px;
}

.faqs dt::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
	margin-top: 0.3em;
	flex-shrink: 0;
	background-color: #cc3366;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96 96 448 472.6'%3E%3Cpath d='M160 320C160 408.4 231.6 480 320 480C348.9 480 376 472.3 399.4 458.9L327.4 372.5C316.1 358.9 317.9 338.7 331.5 327.4C345.1 316.1 365.3 317.9 376.6 331.5L447.5 416.6C467.9 389.8 480 356.3 480 320C480 231.6 408.4 160 320 160C231.6 160 160 231.6 160 320zM440.9 508.6C406 531 364.5 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96C443.7 96 544 196.3 544 320C544 376.1 523.4 427.4 489.3 466.7L536.6 523.5C547.9 537.1 546.1 557.3 532.5 568.6C518.9 579.9 498.7 578.1 487.4 564.5L440.8 508.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='96 96 448 472.6'%3E%3Cpath d='M160 320C160 408.4 231.6 480 320 480C348.9 480 376 472.3 399.4 458.9L327.4 372.5C316.1 358.9 317.9 338.7 331.5 327.4C345.1 316.1 365.3 317.9 376.6 331.5L447.5 416.6C467.9 389.8 480 356.3 480 320C480 231.6 408.4 160 320 160C231.6 160 160 231.6 160 320zM440.9 508.6C406 531 364.5 544 320 544C196.3 544 96 443.7 96 320C96 196.3 196.3 96 320 96C443.7 96 544 196.3 544 320C544 376.1 523.4 427.4 489.3 466.7L536.6 523.5C547.9 537.1 546.1 557.3 532.5 568.6C518.9 579.9 498.7 578.1 487.4 564.5L440.8 508.6z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.faqs dt {
	display: flex;
	align-items: flex-start;
}

.faqs dt,
.faqs dd {
	flex-wrap: wrap;
}

/* 問題文・解説の本文は、Q/Aアイコンの右に折り返さず表示し、画像は次の行に全幅で置く */
.faqs .qa-text {
	flex: 1 1 0;
	min-width: 0;
}

.faqs dt > .gazo,
.faqs dd > .gazo {
	flex: 0 0 100%;
}

.faqs dt ul {
	width: 100%;
}

.faqs dt ul li {
	list-style: decim al;
	display: inline-block;
	width: 40%;
	min-width: 150px;
}

/*番号①*/
.faqs dt ul li:first-child:before {
	content: "\2460";
}

/*番号②*/
.faqs dt ul li:first-child+li:before {
	content: "\2461";
}

/*番号③*/
.faqs dt ul li:first-child+li+li:before {
	content: "\2462";
}

/*番号④*/
.faqs dt ul li:first-child+li+li+li:before {
	content: "\2463";
}

.faqs dt:hover {
	cursor: pointer;
}

.faqs dd::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
	margin-top: 0.3em;
	flex-shrink: 0;
	background-color: #09F;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='130.5 96 378.9 445.5'%3E%3Cpath d='M349.5 115.7C344.6 103.8 332.9 96 320 96C307.1 96 295.4 103.8 290.5 115.7C197.2 339.7 143.8 467.7 130.5 499.7C123.7 516 131.4 534.7 147.7 541.5C164 548.3 182.7 540.6 189.5 524.3L221.3 448L418.6 448L450.4 524.3C457.2 540.6 475.9 548.3 492.2 541.5C508.5 534.7 516.2 516 509.4 499.7C496.1 467.7 442.7 339.7 349.4 115.7zM392 384L248 384L320 211.2L392 384z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='130.5 96 378.9 445.5'%3E%3Cpath d='M349.5 115.7C344.6 103.8 332.9 96 320 96C307.1 96 295.4 103.8 290.5 115.7C197.2 339.7 143.8 467.7 130.5 499.7C123.7 516 131.4 534.7 147.7 541.5C164 548.3 182.7 540.6 189.5 524.3L221.3 448L418.6 448L450.4 524.3C457.2 540.6 475.9 548.3 492.2 541.5C508.5 534.7 516.2 516 509.4 499.7C496.1 467.7 442.7 339.7 349.4 115.7zM392 384L248 384L320 211.2L392 384z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.faqs dd {
	display: none;
	align-items: flex-start;
	/* 解答の初期表示を非表示 */
}

.faqs dd[style*="flex"] {
	display: flex !important;
}

.faqs .hover {
	color: #990000;
	text-decoration: underline;
}

/* セレクトリスト */
.select {
	position: relative;
}

.select select {
	appearance: none;
	display: block;
	height: 50px;
	margin: 5px 0px;
	padding: 0px 24px;
	color: #333;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #cccccc;
	-ms-word-break: normal;
	word-break: normal;
}

label.control-label {
	font-weight: bold;
}


h4:before {
	background: var(--subject-color);
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
}

h4:after {
	background: var(--subject-color);
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset;
}

div div.title {
	color: var(--subject-color);
}

div#toc {
	border: dashed 1px var(--subject-color);
	background-color: #fbfbfb;
}

div#toc ol.toc-item>li>a {
	border-bottom: solid 1px var(--subject-color);
}

.button {
	background-color: var(--subject-color);
}

@media screen and (min-width: 500px) {
	.chart {
		width: 400px;
		margin: auto;
		margin-top: 20px;
	}
}

@media screen and (max-width: 499px) {
	.chart {
		width: 300px;
		margin: auto;
		margin-top: 20px;

	}
}

div.iframeWrapper {
	position: relative;
	width: 100%;
	padding-top: 75%;
}

div.iframeWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.border-subject-color {
	border-color: var(--subject-color) !important;
}

/* e-Stat API(政府統計の総合窓口)から取得した最新統計値（ビルド時に解決済み） */
.estat-value {
	font-weight: bold;
	color: var(--subject-color, #337ab7);
}

.estat-value-error {
	font-weight: normal;
	font-style: italic;
	color: #888;
}

/* テーブルスタイル */
/* 移行元(class="table"/"w-auto"/"w-100"等)が付いた表は、common.cssのユーティリティ
   クラスでオリジナルサイトと同じ見た目（細い黒枠・paddingなし・幅autoが基本）になる。
   ここでは、それらのクラスを持たない新規追加分の表にのみ、読みやすいデフォルト
   （幅100%・グレー系の太め罫線・padding付き）を与える。
   align/valign属性はブラウザがネイティブに解釈するため、CSSでの指定は不要。 */
.contents table:not(.table) {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #dee2e6;
	margin: 1rem 0;
}

.contents table:not(.table) th,
.contents table:not(.table) td {
	padding: 0.75rem;
	border: 1px solid #dee2e6;
}

.contents table:not(.table) th {
	text-align: center;
	background-color: #f8f9fa;
	font-weight: 600;
}

[data-theme="dark"] .contents table:not(.table) {
	border-color: #444;
}

[data-theme="dark"] .contents table:not(.table) th,
[data-theme="dark"] .contents table:not(.table) td {
	border-color: #444;
}

[data-theme="dark"] .contents table:not(.table) th {
	background-color: #333;
	color: #e0e0e0;
}

/* 3カラムレイアウト */

/* スマホ用：画面左下の操作ボタン（コンテンツ一覧／前へ／次へ）。
   ヘッダーが常時表示（sticky）になったため、画面の上下を固定要素で
   挟むと閲覧できる範囲が狭くなる。そこで小さなFAB（floating action
   button）1つにまとめ、タップ時だけ選択肢を表示する方式にした。
   サイドバー（コンテンツ一覧）が画面左からスライド表示されることに
   合わせ、ボタンも左下に配置している。 */
.mobile-fab-wrapper {
	display: none;
}

@media screen and (max-width: 560px) {
	.mobile-fab-wrapper {
		display: block;
	}
}

.mobile-fab-backdrop {
	position: fixed;
	inset: 0;
	z-index: 899;
	background: transparent;
}

.mobile-fab-btn {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 901;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--subject-color, #337ab7);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	transition: transform 0.2s;
}

/* ケバブメニュー（縦の三点）。開くと×に変形する */
.fab-kebab {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
}

.fab-kebab span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: currentColor;
	transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease,
		margin 0.25s ease, border-radius 0.25s ease, opacity 0.2s ease;
}

.fab-kebab span:nth-child(1) {
	transform: translateY(-8px);
}

.fab-kebab span:nth-child(3) {
	transform: translateY(8px);
}

.mobile-fab-btn.open .fab-kebab span:nth-child(1),
.mobile-fab-btn.open .fab-kebab span:nth-child(3) {
	width: 22px;
	height: 3px;
	margin: -1.5px 0 0 -11px;
	border-radius: 2px;
}

.mobile-fab-btn.open .fab-kebab span:nth-child(1) {
	transform: rotate(45deg);
}

.mobile-fab-btn.open .fab-kebab span:nth-child(2) {
	opacity: 0;
}

.mobile-fab-btn.open .fab-kebab span:nth-child(3) {
	transform: rotate(-45deg);
}

[data-theme="dark"] .mobile-fab-btn {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.mobile-fab-menu {
	position: fixed;
	left: 16px;
	bottom: 80px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.mobile-fab-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: none;
	border-radius: 24px;
	background: #fff;
	color: #333;
	font-size: 1.3rem;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.mobile-fab-item.disabled {
	color: #bbb;
	pointer-events: none;
}

[data-theme="dark"] .mobile-fab-item {
	background: #2a2a2a;
	color: #e0e0e0;
}

[data-theme="dark"] .mobile-fab-item.disabled {
	color: #666;
}

.sidebar-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	display: flex;
}

.sidebar-modal {
	background: white;
	width: 80%;
	max-width: 320px;
	height: 100%;
	overflow-y: auto;
	box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}

.sidebar-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	border-bottom: 1px solid #e0e0e0;
	position: sticky;
	top: 0;
	background: white;
	z-index: 1;
}

.sidebar-modal-header h2 {
	font-size: 1.6rem;
	margin: 0;
}

.sidebar-modal-header button {
	background: none;
	border: none;
	font-size: 32px;
	cursor: pointer;
	color: #666;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (min-width: 561px) {
	.sidebar-modal-overlay {
		display: none;
	}
}

.three-column-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 561px) and (max-width: 960px) {
	.three-column-layout {
		grid-template-columns: 240px 1fr;
		gap: 20px;
		max-width: 960px;
		padding: 0 15px;
	}
}

@media screen and (min-width: 961px) {
	.three-column-layout {
		grid-template-columns: 280px 1fr 280px;
		gap: 30px;
		max-width: 1400px;
		padding: 0 20px;
	}
}

.left-column {
	display: none;
}

@media screen and (min-width: 561px) {
	.left-column {
		display: block;
	}
}

.sidebar-sticky {
	position: sticky;
	top: 80px;
}

.sidebar-title {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--subject-color, #337ab7);
}

.sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sidebar-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	text-decoration: none;
	color: #333;
	border-radius: 3px;
	transition: background 0.2s;
	font-size: 1.3rem;
}

.sidebar-nav a:hover {
	background: #f5f5f5;
}

.sidebar-nav a.active {
	background: #e8e8e8;
	color: #333;
}

.sidebar-nav a.active .lesson-title {
	text-decoration: underline;
	font-weight: normal;
}

.lesson-no {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e0e0e0;
	border-radius: 3px;
	font-weight: bold;
	font-size: 1.2rem;
}

.sidebar-nav a.active .lesson-no {
	background: #999;
	color: white;
}

.lesson-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.4;
}

.center-column {
	min-width: 0;
}

/* 広告ユニット（オリジナルサイトのfooter_ads.phpと同じ配置：本文末尾） */
.ad-unit {
	margin: 1.5rem 0;
	min-height: 100px;
	text-align: center;
}

.right-column {
	display: none;
}

@media screen and (min-width: 961px) {
	.right-column {
		display: block;
	}
}

/* 画像拡大用モーダル */
.modal-wrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	opacity: 0;
	transition: 0.25s ease-out;
	z-index: 2;
}

.modal-wrapper.show {
	opacity: 1;
	pointer-events: all;
}

.modal-image {
	position: absolute;
	max-width: 80%;
	max-height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	opacity: 0;
	transition: 0.5s ease-out;
	background-color: white;
}

.modal-image.show {
	opacity: 1;
}

/* ===== 一問一答 ===== */

.qa-content {
	margin-bottom: 40px;
}

.qa-filters {
	margin: 12px 0;
}

.qa-filter-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.qa-select {
	appearance: none;
	height: 40px;
	padding: 0 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: #fff;
	font-size: 14px;
	min-width: 100px;
	cursor: pointer;
}

.qa-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 14px 0 8px;
}

.qa-btn {
	height: 36px;
	padding: 0 16px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color 0.15s, opacity 0.15s;
}

.qa-btn-primary {
	background-color: #cc3366;
	color: #fff;
	border-color: #cc3366;
}

.qa-btn-primary:hover {
	opacity: 0.85;
}

.qa-btn-secondary {
	background-color: #3366cc;
	color: #fff;
	border-color: #3366cc;
}

.qa-btn-secondary:hover {
	opacity: 0.85;
}

.qa-btn-outline {
	background-color: #fff;
	color: #555;
	border-color: #ccc;
}

.qa-btn-outline:hover {
	background-color: #f5f5f5;
}

.qa-count {
	font-size: 13px;
	color: #888;
	margin: 4px 0 10px;
}

.qa-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.qa-item {
	border-bottom: 1px solid #eee;
}

.qa-question {
	padding: 10px 8px 10px 0;
	cursor: pointer;
	user-select: none;
	line-height: 1.6;
}

.qa-question:hover {
	color: #990000;
	text-decoration: underline;
}

.qa-question--open {
	color: #990000;
}

.qa-answer {
	padding: 8px 8px 12px 2em;
	line-height: 1.6;
}

.qa-empty {
	padding: 20px;
	text-align: center;
	color: #aaa;
}

/* ==========================================================================
   ダークモード（レッスン本文まわり）
   bodyの文字色・背景色はCSS変数で自動的に切り替わるが、本文中の個別の
   枠線・見出し・サイドバー等は固定色で指定されているため、ダークモード時に
   文字だけ白くなって背景は明るいまま、という状態になっていた。
   主要な構造要素についてここでまとめて上書きする。
   ========================================================================== */

[data-theme="dark"] th {
	background-color: #333;
	color: #e0e0e0;
}

[data-theme="dark"] h2 {
	border-color: #888;
	box-shadow: 3px 3px #000;
}

[data-theme="dark"] div div.title {
	background-color: var(--pale-white);
}

[data-theme="dark"] div#toc {
	background-color: #2a2a2a;
}

[data-theme="dark"] .accordion-menu {
	--scrollbar-color: rgba(255, 255, 255, 0.25);
	--scrollbar-hover-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .sidebar-title {
	color: #e0e0e0;
}

[data-theme="dark"] .sidebar-nav a,
[data-theme="dark"] .lesson-list a {
	color: #ddd;
}

[data-theme="dark"] .sidebar-nav a:hover,
[data-theme="dark"] .lesson-list a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}

[data-theme="dark"] .lesson-no {
	background-color: #333;
	color: #e0e0e0;
}

[data-theme="dark"] .sidebar-modal,
[data-theme="dark"] .sidebar-modal-header {
	background-color: #1a1a1a;
	color: #e0e0e0;
	border-color: #333;
}

[data-theme="dark"] .sidebar-modal-header button {
	color: #ccc;
}

[data-theme="dark"] .qa-select,
[data-theme="dark"] .qa-btn-outline {
	background-color: #2a2a2a;
	color: #e0e0e0;
	border-color: #444;
}

[data-theme="dark"] .qa-item {
	border-bottom-color: #333;
}

[data-theme="dark"] .select select {
	background-color: #2a2a2a;
	color: #e0e0e0;
	border-color: #444;
}

[data-theme="dark"] .modal-image {
	background-color: #fff;
}

[data-theme="dark"] .markdown-content img,
[data-theme="dark"] .contents div.gazo img,
[data-theme="dark"] .contents img.table,
[data-theme="dark"] .lesson-image img,
[data-theme="dark"] .lesson-image-fullscreen img,
[data-theme="dark"] .image-modal img,
[data-theme="dark"] .optimized-image {
	background-color: #fff;
	border-radius: 4px;
}

[data-theme="dark"] div.contents span.all {
	border-bottom-color: var(--darkgray);
}

[data-theme="dark"] .explanation,
[data-theme="dark"] .serif {
	background: var(--gray);
	border-color: #888;
}

[data-theme="dark"] .explanation:after {
	border-bottom-color: var(--gray);
}

[data-theme="dark"] .explanation:before {
	border-bottom-color: #888;
}

[data-theme="dark"] .serif:after {
	border-top-color: var(--gray);
}

[data-theme="dark"] .serif:before {
	border-top-color: #888;
}