@charset "utf-8";

/* =============================================
 ar.css
=============================================== */

/* textbook_title
============================================ */
#textbook_title{
	width:910px;
	margin:0 auto;
	overflow:hidden;
	border-top: 3px solid #0097e0;
	border-bottom: 3px solid #0097e0;
	margin-bottom:20px;
}

#textbook_title h2{
	height:88px;
	line-height:88px;
	font-size:200%;
	font-weight:bold;
	border-top: 3px solid #c4e6f1;
	border-bottom: 3px solid #c4e6f1;
}

#textbook_title h2 span{
	background:#01a6e6;
	text-align:center;
	height:60px;
	width:93px;
	display:inline-block;
	line-height:60px;
	margin:0 20px;
	color:#ffffff;
}

/* main
=============================================*/
#main {
	margin: 25px auto 0;
	width: 910px;
    font-size: 85%;
}

/* ar_title
============================================ */
#ar_title{
	width:910px;
	margin:0 auto;
}

#ar_title h3{
	font-size:150%;
	font-weight:bold;
	padding:10px 20px;
	margin-bottom:20px;
	border:2px solid #134eb1;
	color:#134eb1;
}
#ar_title h3 span{
	font-size:66%;
	font-weight:normal;
}

.ar_text{
	width:910px;
	margin:0 auto 20px auto;
	font-size: 116%;
}

/* before-after
============================================ */
#before-after{
	width:540px;
	margin:0 auto 20px auto;
	overflow:hidden;
	border:2px solid #134eb1;
	padding:20px 1%;
}

#before-after dl{
	width:45%;
	max-width:240px;
	text-align:center;
}

#before-after dl dt{
	padding:5px;
	font-weight:bold;
	margin-bottom:5px;
	font-size:108%;
}
#before-after .before{
	float:left;
}
#before-after .before dt{
	background:#ccc;
}

#before-after .after{
	float:right;
}
#before-after .after dt{
	background:#ff9900;
}

/* ar_text02
============================================= */
.ar_text02{
	width:750px;
	margin:0 auto 20px auto;
	font-size: 116%;
}
.ar_text02 p{
	padding-bottom:10px;
}

/* page_box
============================================= */
#page_box{
	background:#c4e6f0;
	width:870px;
	margin:0 auto;
	padding:20px;
	font-size:116%;
}
#page_box h4{
	border-left:4px solid #0097e0;
	padding-left:10px;
	font-weight:bold;
	margin-bottom:20px;
}
#page_box p{
	padding-bottom:10px;
}
#page_box h5{
	padding-bottom:5px;
	padding-top:20px;
	font-weight:bold;
}

#page_box ul li{
	padding-bottom:10px;
	margin-left:20px;
	list-style-type:disc;
}

#page_box ul li a{
	color: #134eb1;
    text-decoration: underline;
}

/* download
============================================= */
#download{
	width:910px;
	margin:20px auto 20px auto;
	overflow:hidden;
	font-size:93%;
}

#download .left{
	margin: 0 auto;
	width:520px;
}

#download .left p,
#download .left h5{
	padding-bottom:10px;
}

#download .right{
	margin: 0 auto;
	width:520px;
}

#download .right ul{
	overflow:hidden;
	margin: 0 auto 10px;
	width:400px;
}

#download .right ul li{
	float:left;
}
#download .right ul li:last-child{
	float:right;
}
.ie8 #download .right ul li {
	float:none;
}
.ie8 #download .right ul li img{
	float:left;
}
.ie8 #download .right ul li:last-child  img{
	float:right;
}
#download .right h5{
	margin-bottom:10px;
}

#download .left p a{
	color: #134eb1;
    text-decoration: underline;
}
#download .left p a:after{
	content: url("../images/icon_img01.gif");
    padding-left: 3px;
    position: relative;
    top: 3px;
}


@media screen and ( max-width: 910px ) {
/* textbook_title
============================================ */
#textbook_title{
	width:100%;
}

/* ar_title
============================================ */
#ar_title{
	width:100%;
}


/* ar_text
============================================ */
.ar_text{
	width:90%;
	max-width:910px;
}

/* ar_text02
============================================= */
.ar_text02{
	width:90%;
	max-width:750px;
}

/* page_box
============================================= */
#page_box{
	width:90%;
	padding:1%;
}

/* download
============================================= */
#download{
	width:100%;
}

#download .left{
	float:none;
	max-width:520px;
	width:90%;
	margin:0 auto;
}

#download .left p{
	padding-bottom:10px;
}

#download .right{
	float:none;
	max-width:520px;
	width:90%;
	margin:0 auto;
}

#download .right ul{
	overflow:hidden;
}

#download .right ul li{
	float:left;
}
#download .right ul li:last-child{
	float:right;
}
}


@media screen and ( max-width: 768px ) {
	/* main
=============================================*/
#main {
	width: 100%;
    font-size: 85%;
}
/* before-after
============================================ */
#before-after{
	width:90%;
}
#before-after .before dt{
	background:#ccc;
}
#before-after .after dt{
	background:#ff9900;
}

}

@media screen and ( max-width: 480px ) {
/* before-after
============================================ */
#before-after dl{
	width:100%;
	max-width:240px;
	text-align:center;
	margin:0 auto;
}

#before-after dl dt{
	padding:5px;
	font-weight:bold;
	margin-bottom:5px;
}
#before-after .before{
	float:none;
	margin-bottom:10px;
}
#before-after .before dt{
	background:#ccc;
}

#before-after .after{
	float:none;
}
#before-after .after dt{
	background:#ff9900;
}

/* download
============================================= */
#download .right ul{
	text-align:center;
	width:100%;
}
#download .right ul li{
	float:none;
	margin-bottom:10px;
}
#download .right ul li:last-child{
	float:none;
}


}