@charset "utf-8";

/*------------ Top Page ------------*/
/* Header */
body.DPPG_top #header { background-color: #000000; }
body.DPPG_top #header div.nav { margin-bottom: 0; }
body.DPPG_top #header ul.nav_list li a { color: #ffffff; text-decoration: none; }
body.DPPG_top #header ul.nav_list li a:hover { color: #ff6600; }

/* Contents */
body.DPPG_top #contents {
	width: 100%;
	background: url("screens/top_back.jpg") repeat-y;
	background-size: contain;
	padding-top: 0;
	padding-bottom: 1em;
}
body.DPPG_top #contents h1 { margin-bottom: 1em; }
body.DPPG_top #contents h1 img {
	width: 100%;
	max-width: 100%;
}
body.DPPG_top #contents div.lead {
	padding: 10px 3%;
	background-color: #000000;
}
body.DPPG_top #contents div.lead p {
	color: #ffffff;
	font-weight: bold;
}
body.DPPG_top #contents ul {
	width: 94%;
	margin: 0 auto;
}
body.DPPG_top #contents ul li {
	border: 10px solid #000000;
	margin-bottom: 0.5em;
	position: relative;
}
body.DPPG_top #contents ul li.DPPG_1 {
	background: url("screens/t_lesson01_sp.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_2 {
	background: url("screens/t_lesson02_sp.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_3 {
	background: url("screens/t_lesson03_sp.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_4 {
	background: url("screens/t_lesson04_sp.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_f {
	background: url("screens/t_appendix1_sp.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_1 a:hover {
	background: url("screens/t_lesson01_sp_hover.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_2 a:hover {
	background: url("screens/t_lesson02_sp_hover.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_3 a:hover {
	background: url("screens/t_lesson03_sp_hover.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_4 a:hover {
	background: url("screens/t_lesson04_sp_hover.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li.DPPG_f a:hover {
	background: url("screens/t_appendix1_sp_hover.jpg") top left no-repeat;
	background-size: cover;
}
body.DPPG_top #contents ul li a {
	display: block;
	height: 60px;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 1px 1px 2px #333333, -1px 1px 2px #333333, 1px -1px 2px #333333, -1px -1px 2px #333333;
}
body.DPPG_top #contents ul li span.DPPG_contents_title {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 1.1em;
	text-align: right;
	line-height: 1.2;
}
body.DPPG_top #contents ul li span.DPPG_contents_title span.DPPG_contents_s { font-size: 0.9em; }
body.DPPG_top #contents ul li span.DPPG_contents_summary { display: none; }

/* Footer */
body.DPPG_top #footer div.nav {
	background: url("screens/top_back.jpg") repeat-y;
	background-size: contain;
}
body.DPPG_top #footer p.gototop { border: none; }
body.DPPG_top #footer p.copyright { background-color: #000000; }

/*------------ Topic Page ------------*/
/* Header */
#header div.DPPG_header_l1 {
	background: url("screens/lesson01_header_sp.jpg") top left no-repeat;
	background-size: cover;
}
#header div.DPPG_header_l2 {
	background: url("screens/lesson02_header_sp.jpg") top left no-repeat;
	background-size: cover;
}
#header div.DPPG_header_l3 {
	background: url("screens/lesson03_header_sp.jpg") top left no-repeat;
	background-size: cover;
}
#header div.DPPG_header_l4 {
	background: url("screens/lesson04_header_sp.jpg") top left no-repeat;
	background-size: cover;
}
#header div.DPPG_header_a1 {
	background: url("screens/appendix01_header_sp.jpg") top left no-repeat;
	background-size: cover;
}
#header div.DPPG_header_logo p {
	color: #f6f6f6;
	font-size: 1.6em;
	font-weight: bold;
	text-shadow: 1px 1px 2px #666666, -1px 1px 2px #666666, 1px -1px 2px #666666, -1px -1px 2px #666666;
	line-height: 1.2;
	padding: 5% 3% 8% 3%;
}
#header div.DPPG_header_logo span.DPPG_header_logo_s { font-size: 0.8em; }

/* Contents */
#contents h1.DPPG_h1 {
	color: #ffffff;
	padding: 5px 10px;
	border: solid 1px #885555;
	background-color: #660000;
}
#contents h2.DPPG_h2 {
	color: #660000;
	border-bottom: solid 1px #885555;
}
#contents h3.DPPG_h3 {
	padding: 0 0 0 8px;
	font-weight: normal;
	border-left: solid 5px #000000;
}

#contents div.DPPG_case_section {
	background-color: #f2f2f2;
	padding: 1em;
	margin-bottom: 1em;
}
#contents div.DPPG_case_section > p.DPPG_headword {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 0.5em;
}
#contents div.section > div.DPPG_case_section > p.DPPG_headword {
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 0.5em;
}

#contents div.DPPG_adv {
	margin-bottom: 0.5em;
	padding: 10px;
	background-color: #ffffd4;
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;
}
#contents p.DPPG_adv_title {
	color: #ff0000;
	font-size: 1.2em;
	font-weight: bold;
}
#contents p.DPPG_adv_title img {
	margin-right: 5px;
	vertical-align: middle;
}
#contents div.DPPG_note {
	margin-bottom: 0.5em;
	padding: 10px;
	background-color: #fbfafb;
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;
}
#contents p.DPPG_note_title {
	color: #993333;
	font-weight: bold;
}
#contents p.DPPG_note_title img {
	margin-right: 5px;
	vertical-align: middle;
}
#contents div.DPPG_tip {
	margin-bottom: 0.5em;
	padding: 10px;
	background-color: #dceed4;
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;
}
#contents p.DPPG_tip_title {
	color: #993333;
	font-weight: bold;
}
#contents p.DPPG_tip_title img {
	margin-right: 5px;
	vertical-align: middle;
}

#contents table td#dpp2050001{
	background: #4f81bc;
}

#contents ol.step_list > li > div.DPPG_adv > p { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_adv > ol > li { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_adv > ul > li { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_adv > dl { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_adv > table { font-size: 0.65em; }
#contents ol.step_list > li > div.DPPG_note > p { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_note > ol > li { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_note > ul > li { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_note > dl { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_note > table { font-size: 0.65em; }
#contents ol.step_list > li > div.DPPG_tip > p { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_tip > ol > li { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_tip > ul > li { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_tip > dl { font-size: 0.7em; }
#contents ol.step_list > li > div.DPPG_tip > table { font-size: 0.65em; }

/* Footer */
#footer ul.DPPG_nav_list {
	clear: both;
	padding: 5px 3% 5px 10%;
	border-top: 1px solid #cccccc;
	list-style-image: url(common/i_arrow_trans.gif);
}
#footer ul.DPPG_nav_list li.DPPG_current_loc { list-style: disc; }

@media screen and (min-width: 480px) {
	/*------------ Top Page ------------*/
	body.DPPG_top #contents ul li.DPPG_1 { background-image: url("screens/t_lesson01_tb.jpg"); }
	body.DPPG_top #contents ul li.DPPG_2 { background-image: url("screens/t_lesson02_tb.jpg"); }
	body.DPPG_top #contents ul li.DPPG_3 { background-image: url("screens/t_lesson03_tb.jpg"); }
	body.DPPG_top #contents ul li.DPPG_4 { background-image: url("screens/t_lesson04_tb.jpg"); }
	body.DPPG_top #contents ul li.DPPG_f { background-image: url("screens/t_appendix1_tb.jpg"); }
	body.DPPG_top #contents ul li.DPPG_1 a:hover { background-image: url("screens/t_lesson01_tb_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_2 a:hover { background-image: url("screens/t_lesson02_tb_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_3 a:hover { background-image: url("screens/t_lesson03_tb_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_4 a:hover { background-image: url("screens/t_lesson04_tb_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_f a:hover { background-image: url("screens/t_appendix1_tb_hover.jpg"); }
	body.DPPG_top #contents ul li a { height: 110px; }
	body.DPPG_top #contents ul li span.DPPG_contents_summary {
		display: block;
		width: 60%;
		position: absolute;
		bottom: 10px;
		right: 10px;
		font-size: 0.8em;
		text-align: right;
		line-height: 1;
	}

	/*------------ Topic Page ------------*/
	#header div.DPPG_header_logo { clear: both; }
	#header div.DPPG_header_l1 { background-image: url("screens/lesson01_header_tb.jpg"); }
	#header div.DPPG_header_l2 { background-image: url("screens/lesson02_header_tb.jpg"); }
	#header div.DPPG_header_l3 { background-image: url("screens/lesson03_header_tb.jpg"); }
	#header div.DPPG_header_l4 { background-image: url("screens/lesson04_header_tb.jpg"); }
	#header div.DPPG_header_a1 { background-image: url("screens/appendix01_header_tb.jpg"); }
}

@media screen and (min-width: 800px) {
	/*------------ Top Page ------------*/
	body.DPPG_top #contents ul { width: 740px; }
	body.DPPG_top #contents ul li.DPPG_1 { background-image: url("screens/t_lesson01.jpg"); }
	body.DPPG_top #contents ul li.DPPG_2 { background-image: url("screens/t_lesson02.jpg"); }
	body.DPPG_top #contents ul li.DPPG_3 { background-image: url("screens/t_lesson03.jpg"); }
	body.DPPG_top #contents ul li.DPPG_4 { background-image: url("screens/t_lesson04.jpg"); }
	body.DPPG_top #contents ul li.DPPG_f { background-image: url("screens/t_appendix1.jpg"); }
	body.DPPG_top #contents ul li.DPPG_1 a:hover { background-image: url("screens/t_lesson01_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_2 a:hover { background-image: url("screens/t_lesson02_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_3 a:hover { background-image: url("screens/t_lesson03_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_4 a:hover { background-image: url("screens/t_lesson04_hover.jpg"); }
	body.DPPG_top #contents ul li.DPPG_f a:hover { background-image: url("screens/t_appendix1_hover.jpg"); }
	body.DPPG_top #contents ul li a { height: 130px; }

	/*------------ Topic Page ------------*/
	#header div.DPPG_header_l1 { background-image: url("screens/lesson01_header.jpg"); }
	#header div.DPPG_header_l2 { background-image: url("screens/lesson02_header.jpg"); }
	#header div.DPPG_header_l3 { background-image: url("screens/lesson03_header.jpg"); }
	#header div.DPPG_header_l4 { background-image: url("screens/lesson04_header.jpg"); }
	#header div.DPPG_header_a1 { background-image: url("screens/appendix01_header.jpg"); }
}