@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;
	}
}

@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: "》";
}

.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;
}

/* 画像に重ねる文字 */
li:has(> input[type="radio"]:checked)::before {
	font-family: "Font Awesome 6 Free";
	font-weight: bold;
	content: "\f058";
	position: relative;
}

.correct::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	color: #0000FF;
	content: "\f111";
}

.incorrect::before {
	font-family: "Font Awesome 6 Free";
	font-weight: bold;
	color: #FF0000;
	content: "\f00d";
}

#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 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;
}

/* テーブルスタイル */
.contents table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #dee2e6;
	margin: 1rem 0;
}

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

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

.contents table td[align="center"],
.contents table th[align="center"] {
	text-align: center;
}

.contents table td[align="left"],
.contents table th[align="left"] {
	text-align: left;
}

.contents table td[align="right"],
.contents table th[align="right"] {
	text-align: right;
}

/* 3カラムレイアウト */
.sidebar-toggle-btn {
	position: fixed;
	top: 80px;
	left: 10px;
	z-index: 1000;
	background: var(--subject-color, #337ab7);
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	cursor: pointer;
	transition: transform 0.2s;
}

.sidebar-toggle-btn:hover {
	transform: scale(1.1);
}

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

.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;
}

.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;
}