/* CSS Document */

#blog{
	padding-top: 0;
	background: #fff;
	}
	#blog h2{
		position: relative;
		display: flex;
		flex-direction: column;
		margin-left: 1em;
		padding-top: 1.5em;
		}
		#blog h2:before{
			margin-left: 2em;
			}
		#blog h2:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			height: 2.5em;
			border-left: 1px solid #1696ac;
			}
	#blog figure{
		position: relative;
		margin-top: 2em;
		border-radius: 12px;
		overflow: hidden;
		}
	#blog figcaption{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 1em;
		color: #fff;
		text-align: center;
		line-height: 1.5em;
		z-index: 1;
		}
		#blog figcaption:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4em;
			background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
			z-index: -1;
			}
	#blog .thumb{
		padding-top: 50%;
		}
	#blog+#search{}
		#blog+#search #searchMenu{
			border-top: none;
			padding-top: 0;
			}

#writer{}
	#writer h2{
		position: relative;
		padding-left: calc(4px + 0.5em);
		font-weight: bold;
		font-size: 1.5em;
		}
		#writer h2:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 4px;
			height: 1em;
			background: #00b0ca;
			border-radius: 2px;
			}
	#writer h2+div{
		margin-top: 1.5em;
		}
	#writer h2+div+div{
		display: flex;
		justify-content: center;
		margin-top: 2em;
		}
		#writer h2+div+div a{
			position: relative;
			width: 100%;
			width: 390px;
			padding: 1.5em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			}
		#writer h2+div+div i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	#writer dl{
		position: relative;
		display: flex;
		flex-direction: column;
		}
	#writer dt{
		font-weight: bold;
		line-height: 1.5em;
		}
	#writer dt+dd{
		margin-bottom: 1em;
		border: 1px solid #b0b4ba;
		border-radius: 12px;
		overflow: hidden;
		order: -1;
		z-index: -1;
		}
	#writer dd{}
		#writer dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#writer .thumb{
		padding-top: 100%;
		}
	#writer .slide{
		height: 0;
		opacity: 0;
		transition: opacity 0.2s ease-out;
		}
	#writer .slick-initialized{
		height: auto;
		opacity: 1;
		}
	#writer .slick-arrow{
		position: absolute;
		top: 50%;
		z-index: 1;
		}
	#writer .slick-prev{
		left: 0;
		}
	#writer .slick-next{
		right: 0;
		}

.blogList{}
	.blogList dd{}
		.blogList dd:nth-of-type(2){
			margin-bottom: 0.5em;
			}
		.blogList dd:nth-of-type(3){
			display: flex;
			align-items: center;
			color: #1696ac;
			fill: currentColor;
			font-size: 0.875em;
			}
			.blogList dd:nth-of-type(3) i{
				margin-right: 0.5em;
				}
		.blogList dd:nth-of-type(4){
			position: relative;
			padding-left: 1.5em;
			font-size: 0.875em;
			line-height: 1.5em;
			}
			.blogList dd:nth-of-type(4) i{
				position: absolute;
				top: 0.1em;
				left: 0;
				}
		.blogList dd time{
			font-size: 0.8em;
			}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#writer{}
	#writer .slick-list{
		margin: 0 -0.5em;
		}
	#writer .slick-slide{
		margin: 0 0.5em;
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
.blogList{}
	.blogList dl{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 1.5em 0;
		}
	.blogList dt{
		width: 100%;
		}
	.blogList dt+dd{
		width: 100%;
		}
	.blogList dd{}
		.blogList dd:nth-of-type(2){
			order: -1;
			}
		.blogList dd:nth-of-type(3){
			margin-left: auto;
			order: 1;
			}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
.blogList{}
	.blogList dt{
		-ms-grid-row: 2;
		grid-row: 2;
		}
	.blogList dd{}
		.blogList dd:nth-of-type(2){
			-ms-grid-column: 2;
			-ms-grid-row: 1;
			grid-column: 2;
			grid-row: 1;
			}
		.blogList dd:nth-of-type(3){
			-ms-grid-column: 2;
			-ms-grid-row: 7;
			grid-column: 2;
			grid-row: 7;
			margin-left: auto;
			}
		.blogList dd:nth-of-type(4){
			-ms-grid-column: 2;
			-ms-grid-row: 3;
			grid-column: 2;
			grid-row: 3;
			margin: 1em 0;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#writer{}
	#writer .slick-list{
		margin: 0 -0.75em;
		}
	#writer .slick-slide{
		margin: 0 0.75em;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#sidebar{
	display: flex;
	flex-direction: column;
	}
#prBanner{
	margin: 0 0 2em 0;
	order: -1;
	}
.blogList{}
	.blogList dl{
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}