@charset "utf-8";

*{
	margin:0;
	padding:0;
	}
	
body{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	}
	
ul{
	list-style:none;
	}

.clearfix:after{
	display:block;
	content:"";
	clear:both;
	}
	
header{
	padding:10px;
	background:#a7d6ff;
	}

header h1{
	font-size:25px;
	}
	
.panku{
	margin:10px;
	display:flex;

	}

.panku li{
	margin-right:10px;
	font-size:15px;
	}

.panku a{
	text-decoration:none;
	color:#000;
	font-size:15px;
	}


section{
	padding:0 15px;
	border:1px solid #696969;
	}
	
section p{
	padding:10px;
	font-size:18px;
	}

section h1{
	margin-top:20px;
	background: linear-gradient(transparent 70%, #a7d6ff 70%);
	font-size:24px;
	}
	
section h2{
	margin-top:20px;
	border-bottom: solid 3px #cce4ff;
	position: relative;
	font-size:23px;
	}
	
section h2:after{
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #5472cd;
	bottom: -3px;
	width: 20%;
	}
	
section h3{
	margin-top:20px;
	border-bottom:solid 3px #cce4ff;
	font-size:23px;
	}
	
dt{
	padding: 4px 7px;
	color: #000;
	background: #F6F6F6;
	border-left: solid 5px #a7d6ff;
	border-bottom: solid 3px #d7d7d7;
	}

dd{
	margin:5px 0 20px 15px;
	}

dd a{
	text-decoration:none;
	color:#000;
	}

footer{
	margin-top:50px;
	padding:15px;
	text-align:center;
	font-size:20px;
	background:#a7d6ff;
	}

@media screen and (min-width:901px){		
	
	#wrap{
		margin:40px auto;
		width:1280px;
		}
	
	#main{
		width:950px;
		float:left;
		}
	
	#main section{
		width:600px;
		float:left;
		
		}
	
	#main dl{
		padding-left:40px;
		width:240px;
		float:left;
		}
		
	aside{
		margin-left:10px;
		margin-right:40px;
		width:250px;
		float:left;
		}
	
	.navi li a{
		display:block;
		margin-bottom:15px;
		padding:13px 0;
		background:#F6F6F6;
		border:1px solid #696969;
		text-align:center;
		text-decoration:none;
		color:#000;
		}

	.navi li a:hover{
		background:#d7d7d7;
		}
	
	.navi .active a{
		background:#d7d7d7;
		}
	
	}
	

@media screen and (max-width:900px){
	
	#main{
		padding:12px;
		}
	
	dl{
		margin-top:40px;
		}
	dt{
		width:350px;
		}
	
	}
	
@media screen and (max-width:380px){
	
	dt{
		width:90%;
		}
		
	}
/* CSS Document */