@charset "utf-8";
/* CSS Document */
.mt10{
	margin-top:10px;
}
.mt20{
	margin-top:20px;
}
.mt30{
	margin-top:30px;
}
.mt40{
	margin-top:40px;
}
.mt50{
	margin-top:50px;
}
.mb10{
	margin-bottom:10px;
}
.mb20{
	margin-bottom:20px;
}
.mb30{
	margin-bottom:30px;
}
.mb40{
	margin-bottom:40px;
}
.mb50{
	margin-bottom:50px;
}
.mr10{
	margin-right:10px;
}
.mr20{
	margin-right:20px;
}
.mr30{
	margin-right:30px;
}
.mr40{
	margin-right:40px;
}
.mr50{
	margin-right:50px;
}
.ml10{
	margin-left:10px;
}
.ml20{
	margin-left:20px;
}
.ml30{
	margin-left:30px;
}
.ml40{
	margin-left:40px;
}
.ml50{
	margin-left:50px;
}



#sub-wrapper header{
	margin:0 0 20px;
}
#sub-wrapper article{
	margin:0 0 20px;
	padding:0 0 20px;
	border-bottom:1px solid #CCC;
}

#sub-wrapper .left,
#sub-wrapper .right{
	float:left;
}
#sub-wrapper p{
	font-size:20px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}
#sub-wrapper h2{
	font-size:22px;
	font-weight:bold;
}
#sub-wrapper h3{
	font-size:16px;
	font-weight:bold;
	text-align:center;
	margin:5px 0 0;
}

#sub-wrapper .left{
	width:310px;
	text-align:center;
	margin:70px 50px 0 0;
}
#sub-wrapper .right{
	position:relative;
}
#sub-wrapper .new{
	position:absolute;
	z-index:10;
	left:0;
	top:0;
}
#sub-wrapper .new2{
	position:absolute;
	z-index:10;
	left:0;
	top:35px;
}
#sub-wrapper article{
	overflow:hidden;
}
#sub-wrapper a p,
#sub-wrapper a h2{
	color:#333;
}
#sub-wrapper a p:hover,
#sub-wrapper a h2:hover,
#sub-wrapper a h3:hover{
	opacity:0.8;
}
#sub-wrapper a:hover{
	opacity:0.8;
}
#sub-wrapper .itemlist{
	width:320px;
	margin:20px 0;
	padding-bottom:20px;
	position:relative;
	border:1px #CCC solid;
}
#sub-wrapper .shadow{
            box-shadow: 0 6px 5px -5px #aaa;
}
#sub-wrapper .flex{
	display:flex;
	display:-webkit-flex;
	-webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}
#sub-wrapper .flexaro{
	width:710px;
	margin:0 auto;
	display:flex;
	display:-webkit-flex;
	-webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
.flexcontent{
	display:flex;
	display:-webkit-flex;
	-webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
#sub-wrapper .morebtn{
	padding:8px 10px;
	border:solid 1px #0DBF67;
	font-size:15px;
	color:#0DBF67;
	width:220px;
	margin:30px auto 0;
}
#sub-wrapper .morebtn:hover{
	color:#FFF;
	background-color:#0DBF67;
}
#sub-wrapper .itemlist a h3{
	color:#333;
}
#sub-wrapper .itemlist a:hover{
	text-decoration:none;
}
/* pagination
******************************/

.subpager {
    overflow: hidden;
}
 
.subpager ul {
    list-style: none;
    position: relative;
    left: 50%;
    float: left;
}
 
.subpager ul li {
    margin: 0 1px 10px;
    position: relative;
    left: -50%;
    float: left;
}
 
.subpager ul li span,
.subpager ul li a {
    display: block;
    font-size: 16px;
    padding: 0.6em 1em;
    border-radius: 3px;
}
 
.subpager ul li a {
    background: #EEE;
    color: #000;
    text-decoration: none;
}
 
.subpager ul li a:hover {
    background: #333;
    color: #FFF;
}

/* SP 
**********************************/
#sp-wrapper header{
	margin:0 0 10px;
}
#sp-wrapper .top{
	position:relative;
	margin:0;
}
#sp-wrapper .itemlist a{
	color:#333;
	text-decoration:none;
}
#sp-wrapper .bottom{
	text-align:center;
	margin:10px 0 0;
}
#sp-wrapper .bottom a{
	text-decoration:none;
}
#sp-wrapper p{
	font-size:18px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}
#sp-wrapper h2{
	font-size:20px;
	font-weight:bold;
}
#sp-wrapper h3{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	margin:5px 0 0;
}
#sp-wrapper article{
	margin:0 10px 30px;
	border:1px solid #ccc;
	padding:0 0 10px;
}
#sp-wrapper .new{
	position:absolute;
	z-index:10;
	left:0;
	top:0;
}
#sp-wrapper .morebtn{
	padding:10px;
	border:solid 1px #0DBF67;
	font-size:15px;
	color:#0DBF67;
	width:70%;
	margin:30px auto 0;
}