@charset "utf-8";
/* CSS Document */

/*----------------------------------------
    共通
----------------------------------------*/
.container{
    padding: 20px 0;
}

.container h1{
    color: #333;
    margin-bottom: 40px;
    font-size: 26px;
    font-weight: 600;
	text-align: center;
}
.container h1:before{
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 70px;
	margin: auto;
}

/*実績*/
.recordCont{
    background-image: linear-gradient(to bottom, #a5dcde 0, #fff 150px);
	padding-top: 40px;
}
.recordCont h1:before{
	background-image: url(../../_images/category/title_record.png);
	width: 230px;
}
/*コラム*/
.columnCont{
    background-image: linear-gradient(to bottom, #b9e2c0 0, #fff 150px);
	padding-top: 40px;
}
.columnCont h1:before{
	background-image: url(../../_images/category/title_column.png);
	width: 230px;
}
/*編集部日記*/
.diaryCont{
    background-image: linear-gradient(to bottom, #e6cee4 0, #fff 150px);
	padding-top: 40px;
}
.diaryCont h1:before{
	background-image: url(../../_images/category/title_diary.png);
	width: 170px;
}
/*更新情報*/
.newsCont{
    background-image: linear-gradient(to bottom, #f7d79f 0, #fff 150px);
	padding-top: 40px;
}
.newsCont h1:before{
	background-image: url(../../_images/category/title_news.png);
	width: 170px;
}


@media screen and (max-width: 768px) {
	.container h1{
		margin-bottom: 30px;
		font-size: 24px;
	}
	.container h1:before{
		background-size: 100% auto;
		padding-top: 50px;
	}
	
	/*実績*//*コラム*/
	.recordCont h1:before,
	.columnCont h1:before{
		width: 190px;
	}
	/*編集部日記*//*更新情報*/
	.diaryCont h1:before,
	.newsCont h1:before{
		width: 140px;
	}
}

@media screen and (max-width: 480px) {
	.container{
		padding: 30px 0;
	}
	.container h1{
		font-size: 22px;
	}
	.container h1:before{
		padding-top: 40px;
	}
	
	/*実績*//*コラム*/
	.recordCont h1:before,
	.columnCont h1:before{
		width: 150px;
	}
	/*編集部日記*//*更新情報*/
	.diaryCont h1:before,
	.newsCont h1:before{
		width: 110px;
	}
}


/*----------------------------------------
    記事一覧
----------------------------------------*/
.listCont h1,
.listCont h2{
    color: #444;
	margin: 0 auto 30px;
	padding: 5px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.8em;
	text-align: center;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
.listCont h1:before{
	display: none;
}


.listCont .articleBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 75px;
}
.listCont .articleBox .imgBox{
    width: 200px;
    position: relative;
}
.listCont .articleBox .imgBox img{
    width: 100%;
}
.listCont .articleBox .imgBox a:hover{
    opacity: 0.6;
}
.listCont .articleBox .imgBox a{
    display: block;
}
.listCont .articleBox .imgBox a:before{
    display: block;
    color: #fff;
	height: 25px;
	padding: 0;
    font-size: 14px;
	font-weight: 500;
    text-align: center;
	line-height: 25px;
    position: absolute;
    top: -25px;
    left: 0;
}
.listCont .articleBox .imgBox a:after{
    display: block;
    color: #fff;
	width: 60px;
	height: 60px;
    font-size: 14px;
	font-weight: 600;
    text-align: center;
    line-height: 60px;
	border-radius: 50%;
    position: absolute;
    top: -10px;
	right: -10px;
}


/**/
.listCont .articleBox .new a:before{
    content: "NEW";
    background-color: #ff2525;
	width: 45px;
}

.listCont .articleBox .record a:after{
    content: "実 績";
    background-color: #2dadff;
}
.listCont .articleBox .column a:after{
    content: "コラム";
    background-color: #03992a;
}
.listCont .articleBox .diary a:after{
    content: "編集部";
    background-color: #cd0c82;
}
.listCont .articleBox .news a:after{
    content: "お知らせ";
    background-color: #d89800;
}

/*--*/
.listCont .articleBox dl{
    width: 500px;
    position: relative;
}
.listCont .articleBox dl dt{
    color: #00169a;
    margin-bottom: 10px;
    padding-right: 120px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    position: relative;
}
.listCont .articleBox dl dt span{
    display: block;
    color: #a2a2a2;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 3px;
}

.listCont .articleBox dl dd p{
	margin-bottom: 10px;
	font-size: 14px;
}

.listCont .articleBox .linkBtn {
	margin: 20px auto 0;
}
.listCont .articleBox .linkBtn a{
	padding: 10px 30px 10px 15px;
}
.listCont .articleBox .linkBtn a:before{
	content: "";
	width: 160%;
	height: 1000%;
	background: #fff100;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-webkit-transform: translateX(-89%) translateY(-50%) rotate(135deg);
	transform: translateX(-89%) translateY(-50%) rotate(135deg);
	position: absolute;
	top: 0;
	left: 0;
}
.listCont .articleBox .linkBtn a:hover:before {
	-webkit-transform: translateX(-2%) translateY(-50%) rotate(135deg);
	transform: translateX(-2%) translateY(-50%) rotate(135deg);
}

@media screen and (max-width: 768px) {
    /*--記事一覧--*/
	.listCont .articleBox {
		width: 95%;
		margin: 0 auto 50px;
	}
	.listCont .articleBox .imgBox{
		width: 40%;
	}
	.listCont .articleBox .imgBox a:after{
		width: 50px;
		height: 50px;
		font-size: 14px;
		line-height: 50px;
	}

    /*--*/
    .listCont .articleBox dl{
        width: 58%;
    }
	.listCont .articleBox dl dt{
		padding-right: 0;
		font-size: 18px;
	}

	.listCont .articleBox dl dt{
		padding-right: 0;
	}
	.listCont .articleBox dl dt span{
		text-align: right;
		position: static;
	}
	
	/**/
	.listCont .articleBox .linkBtn a:before{
		content: "";
		display:block;
		width: 40px;
		height: 40px;
		transform: rotate(45deg);
		position: absolute;
		top: -20px;
		left: -20px;
	}
	.listCont .articleBox .linkBtn a:hover:before {
		background-color: #272727;
		transform: rotate(45deg);
	}
	.listCont .articleBox .linkBtn a:hover{
		background-color: #fff100;
		color: #272727;
	}
	
}

@media screen and (max-width: 450px) {
	.listCont h1,
	.listCont h2{
		font-size: 18px;
	}

    /*--記事一覧--*/
	.listCont .articleBox .imgBox{
		width: 100%;
		margin-bottom: 10px;
	}
	.listCont .articleBox .imgBox a:after{
		right: -5px;
	}

    /*--*/
    .listCont .articleBox dl{
        width: 100%;
    }
}


/*--ページネーション--*/
.pageList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px auto;
}
.pageList > div{
    width: 30px;
    margin: 0 5px;
}
.pageList .last{
    width: 20px;
}
.pageList > ol{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}
.pageList > ol li{
    width: 40px;
    height: 40px;
    margin: 0 5px;
    line-height: 1.5em;
    text-align: center;
}
.pageList a,
.pageList span{
    display: block;
    font-size: 20px;
    line-height: 2em;
    text-align: center;
    border: 1px solid #333;
}
.pageList span{
    background-color: #ccc;
    color: #666;
    border: 1px solid #333;
}
.pageList > div a,
.pageList > div span{
    background-color: #fff;
}
.pageList a:hover{
    background-color: #fff959;
}


@media screen and (max-width: 480px) {
    .pageList > div{
        width: 25px;
        margin: 0 3px;
    }
    .pageList .last{
        width: 20px;
    }
    .pageList > ol li{
        width: 35px;
        height: 40px;
        margin: 0 3px;
    }
    .pageList a,
    .pageList span{
        width: auto;
    }
}