@charset "utf-8";

.navi ul li.archives {
	background-image: url(../common/bcg-nav-11.png);
}
.content h2 {
background-image: none;
}
/* content-inner
------------------------------------------------------------*/
.item a {
	text-decoration: none;
	display: block;
}
.item a:hover {
	opacity: 0.85;
}
.content-inner:after {
	content: "";
	display: block;
	clear: both;
}
.content h1 {
	background-image: url(../common/bcg-h1b.png);
}
.preface {
    width: 77%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    padding-top: 2%;
    padding-right: 2%;
    padding-left: 2%;
    padding-bottom: 2%;
    background-color: #F3F8FA;
}
.numbernavi {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	text-align: center;
}
.numbernavi ul {
	width: 100%;
}
.numbernavi ul li {
	float: left;
	margin-left: 2.5%;
	padding-left: 1%;
	padding-right: 1%;
	font-size: 0.9em;
	width: 20%;
	line-height: 2em;
	text-align: center;
}
.numbernavi ul li a {
	color: #FFFFFF;
	display: block;
	text-decoration: none;
	background-color: #0F038B;
	border: 1px solid #8D87C5;
	border-radius: 4px;
}
.numbernavi ul li a:hover {
	opacity: 0.8;
}
.numbernavi ul:after  {
	content: "";
	display: block;
	clear: both;
}
/* アイテム
------------------------------------------------------------*/
.item {
    width: 25%;
    height: auto;
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 0px;
    float: left;
    background-color: #FFFFFF;
    display: block;
}
.item img{
    width: 100%;
    height: auto;
    border: thin solid #8E8E8E;
    margin-top: 0px;
    padding: 0px;
    float: left;
    background-color: #FFFFFF;
    display: block;
}
.item a:hover {
    background-color: #E5E5E5;
}
.item h2 {
    width: 100%;
    border: none;
    padding-left: 0px;
    color: #061802;
    margin-bottom: 1px;
    text-align: center;
    line-height: 25px;
    font-size: 14px;
}
.item h2 a {
	color: #FFFFFF;
}
.item p {
    font-size: 14px;
    color: #333333;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    display: block;
    height: 90px;
}
.item .new {
	font-size: 9px;
	background-color: #AA0000;
	color: #FFFFFF;
	margin-left: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 3px;
	border-radius: 3px;
	padding-right: 3px;
	font-weight: bold;
}


/* ###################### 399px以下 ###################### */
@media (max-width: 399px) {
.item {
	float: left;
	width: 95%;
	margin-right: 1%;
	margin-left: 1%;
}
}


/* ###################### 400px以上　649px以下 ###################### */
@media (min-width: 400px) and (max-width: 649px) {
.item {
	float: left;
	width: 46%;
	margin-right: 1%;
	margin-left: 1%;
}
}


/* ###################### 650px以上899px以下 ###################### */
@media (min-width: 650px) and (max-width: 899px){

/* アイテムを横に3つずつ並べる
------------------------------------------------------------*/
.content-inner {
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.item {
	float: left;
	width: 30%;
	margin-right: 1%;
	margin-left: 1%;
}
}

/* ###################### 900px以上 ###################### */
@media (min-width: 900px) {

/* 900px以上 アイテムを横に4つずつ並べる
------------------------------------------------------------*/
.content-inner {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}
.item	{
	float: left;
	width: 22.2%;
	margin-right: 1%;
	margin-left: 1%;
}
}