@charset "UTF-8";
/* ===== for lesson.html ===================(Pcode:04)=== */

/* ---- Element ------------------------------- */

HTML { overflow-y: scroll; }

H1 {	/* H1 */
	width: 95%;	/* adjust to DL */
	margin-left: 1.5%;
	margin-bottom: 20px;
}
DL {
	width: 95%;
	margin-left: 1.5%;
}
DT:before {
	content: '◆ ';
	color: #FFFF80;
}
DT {
	text-indent: -1em;

	font-size: 16px;
	color: #FFFFFF;
	font-weight: bold;
	margin: 18px 0 0 0;

/*	padding: 8px 0 8px 16px; */
	padding: 8px 0 8px 1.5em;

	background-color: #0000FF;
	background: -webkit-gradient(linear, left top, left bottom, from(#9090FF), color-stop(0.40, #0000FF), color-stop(0.60, #0000FF), to(#0000D0));
	background: -webkit-linear-gradient(top, #9090FF, #0000FF 40%, #0000FF 60%, #0000D0);
	background: linear-gradient(to bottom,   #9090FF, #0000FF 40%, #0000FF 60%, #0000D0);
	border-radius: 10px;
	box-shadow: 6px 6px 8px rgba(0,0,0,0.3);
}
@media only screen and (max-width:380px) {
	DT { line-height: 1.5; }
}
DT:hover {
	cursor: pointer;
	background-color: #FF0090;
	background: -webkit-gradient(linear, left top, left bottom, from(#FF60A0), color-stop(0.40, #F80090), color-stop(0.60, #F80090), to(#E80080));
	background: -webkit-linear-gradient(top, #FF60A0, #F80090 40%, #F80090 60%, #E80080);
	background: linear-gradient(to bottom,   #FF60A0, #F80090 40%, #F80090 60%, #E80080);
}
DT.opened {	/* refer to JS */
	background-color: #008080;
	background: -webkit-gradient(linear, left top, left bottom, from(#009090), color-stop(0.40, #008080), color-stop(0.60, #008080), to(#007070));
	background: -webkit-linear-gradient(top, #009090, #008080 40%, #008080 60%, #007070);
	background: linear-gradient(to bottom,   #009090, #008080 40%, #008080 60%, #007070);
}
DD {
	display: none;
	padding: 0 0 1px 1.8em;	/* "padding-bottom: 1px" is necessary! */
}
DD P, DD UL { margin: 12px 0; }

DD P { line-height: 1.4667; }
DD UL { line-height: 1.5334; }

.tbdr TD, .tbdr TH {
	padding: 8px 10px;	padding-top: 9px\9; padding-bottom: 7px\9;	/* for ~IE10 */
}
@media screen and (-webkit-min-device-pixel-ratio:0) {	/* for Chrome */
	.tbdr TD, .tbdr TH { padding-top: 9px; padding-bottom: 7px; }
}
.tbdr TH { text-align: left; }

/* ---- Other --------------------------------- */

.ex-040 {	/* DD */
	padding-bottom: 20px;
}
DD .ex-041 {		/* P */
	color: #404040;
	font-weight: bold;
	margin-bottom: 6px;
}
.ex-042 {	/* TH */
	color: #800000;
	text-indent: 1em;
}
#ex-043 {
	display: inline-block;	/* for ~IE7 */ *display: inline;  *zoom: 1;
	width: 20px;
}
@media only screen and (max-width:640px) {
	.ex-044 { display: none; }
}
#ex-045 {
	height: 1px;
	margin: 30px auto 0 auto;
	border-top: dotted 2px #008080;
}
#ex-046 {	/* P */
	margin-top: 32px;
	margin-bottom: 24px;
}
@media only screen and (max-width:416px) {
	#ex-047 { width: 288px;  height: 216px; }
}
#ex-048 {	/* P */
	margin-top: 24px;
}
@media only screen and (max-width:560px) {
	#ex-046, #ex-048 {
		text-align: left;
		line-height: 1.4
	}
}
.tbdr TD, .tbdr TH { line-height: 1.4; }

@media only screen and (min-width:480px) {
	.tbdr TD, .tbdr TH { line-height: 1.2; }
	.temp041 { display: none; }
}
/* ==== @ Print =============================== */

@media print {
	DD .ex-041 { color: #000000; }
}