@charset "utf-8";


*{
	margin:0;
	padding:0;
	}

body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}
	
ul{
	list-style:none;
	}


header{
	background-color:#963;
	padding:5px 20px;
	}
	
#main{
	padding:10px;
	}

hgroup h1{
	font-size:18px;
	}
	
hgroup h2{
	margin-top:10px;
	font-size:14px;
	}
	
nav{
	margin-top:15px;
	}

.pan{
	display:flex;
	}

.pan li{
	margin-right:10px;
	}

.pan li a{
	text-decoration:none;
	color:#000;
	}

aside{
	margin-top:15px;
	}

.list a{
	display:block;
	padding:5px 10px;
	text-decoration:none;
	background:#CCC;
	color:#000;
	text-align:center;
	border-radius:5px;
	font-size:18px;
	}
	
.viewing a{
	background:#963;
	color:#000;
	}
	
.list a:hover{
	background:#963;
	color:#000;
	}
	
	
section{
	margin-top:15px;
	padding:10px;
	border:1px solid #999;
	border-radius:5px;
	}
	
section h1{
	margin-bottom:25px;
	position: relative;
	padding:5px 10px;
	background: #963;
	color:#000;
	font-size:20px;	
	}

section h1::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px rgb(149, 158, 155);
	}
	
section h2{
	position: relative;
	padding:3px 10px;
	color:#000;
	margin:25px 0;
	border:2px solid #963;
	font-size:18px;
	}

section p{
	margin-top:10px;
	}
	
	
section h3{
	margin-top:18px;
	padding:0 10px;
	font-size:16px;
	border-bottom:3px double #963;
	}

dl{
	margin-top:30px;
	}

dt{
	width:30%;
	padding:3px 8px;
	border-bottom:solid 3px #ccc;
	border-left:solid 3px #963;
	}
	
dt a{
	color:#000;
	text-decoration:none;
	}
	
dd{
	margin:10px 0 10px 15px;
	}
	
footer{
	margin-top:30px;
	padding:15px;
	text-align:center;
	background-color:#963;
	}
	
	
@media screen and (min-width:769px){
		
	#main{
		margin:0 auto;
		width:1020px;
		}

	.list{
		display:flex;
		justify-content: space-between;
	}
	
		
}

@media screen and (max-width:768px){
		
	.list a{
		width:98%;
		padding:5px;
		margin-bottom:5px;
		}
	
	section h3{
		width:95%
		}
				
	dt{
		width:95%;
		}	
	
}