@charset "UTF-8";

/* ▼▼▼ 著作
=====================================*/
.title_box{background: url(../img/writing/title_bg_pc.jpg)no-repeat top center/cover;}

/* 著作リスト */
.writing_list li{
	display: flex;
	background: #F0F0F0;
	padding: 20px 5% 20px 4%;
	margin: 0 auto 10px;
	position: relative;
	}
	.writing_list li::after{
		content: "";
		width: 10px;
		height: 100%;
		background: -moz-linear-gradient(-45deg, #255190 0%, #7ab5dc 100%);
		background: -webkit-linear-gradient(-45deg, #255190 0%,#7ab5dc 100%);
		background: linear-gradient(135deg, #255190 0%,#7ab5dc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#255190', endColorstr='#7ab5dc',GradientType=1 );
		position: absolute;
		top: 0;
		left: 0;
	}
	.writing_list li .date{
		width: 150px;
		font-size: 16px;
	}
	.writing_list li .txt_box{
		width: calc(100% - 150px);
	}
	.writing_list li .txt_box h2{
		margin-bottom: 10px;
		font-size: 16px;
	}
	.writing_list li .txt_box a{
		text-decoration: underline;
	}
	.writing_list li .txt_box a:hover{
		text-decoration: none;
	}

/* ページャー */
.pagenav{
	max-width: 300px;
	padding: 60px 0 0;
	margin: 0 auto;
	}
	.pagenav ol{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		}
		.pagenav ol li{
			margin-right: 15%;
		}
		.pagenav ol li:last-child{margin-right: 0;}
		.pagenav ol li a{
			display: block;
			padding: 5px 7px;
			color: #B9B9B9;
			font-size: 20px;
			text-align: center;
			position: relative;
		}
		.pagenav ol li a:hover{
			opacity: 1;
		}
		.pagenav ol li.active a,
		.pagenav ol li a:hover{
			color: #333;
		}
		.pagenav ol li.active a::after,
		.pagenav ol li a:hover::after{
			content: "";
			width: 100%;
			height: 3px;
			background: -moz-linear-gradient(-45deg, #255190 0%, #7ab5dc 100%);
			background: -webkit-linear-gradient(-45deg, #255190 0%,#7ab5dc 100%);
			background: linear-gradient(135deg, #255190 0%,#7ab5dc 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#255190', endColorstr='#7ab5dc',GradientType=1 );
			position: absolute;
			bottom: 0;
			left: 0;
		}


/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px){
	.title_box{background: url(../img/writing/title_bg_sp.jpg)no-repeat top center/cover;}

	/* 著作リスト */
	.writing_list li{
		display: block;
		padding: 15px 15px 15px 25px;
		}
		.writing_list li::after{
			width: 5px;
		}
		.writing_list li .date{
			width: 100%;
			margin-bottom: 8px;
		}
		.writing_list li .txt_box{
			width: 100%;
		}
	/* ページャー */
	.pagenav{
		padding: 40px 0 0;
		}
		.pagenav ol li{
			margin-right: 10%;
		}

}