@charset "utf-8";

/* カテゴリー
---------------------------------------------- */
.blogCate{
	display: inline-block;
	font-size: 16px;
	letter-spacing: .1em;
	margin-left: .5em;
}
@media screen and (max-width: 768px){
	.blogCate{
		font-size: 10px;
	}
}

/* u_kv
---------------------------------------------- */
@media screen and (max-width: 768px){
	.u_kvTxt{
		top: 26.6666667%;
		left: 12.5%;
	}
}

/* blogSec
---------------------------------------------- */
.blogSec{
	padding-top: 90px;
	padding-bottom: 100px;
}
	.listWrap{
		max-width: 900px;
	}
		.postList{
		}
			.postItem{
			}
			.postItem + .postItem{
				margin-top: 90px;
			}
				.postItem .heading{
					padding-bottom: 18px;
					border-bottom: 1px solid #d8d8d8;
				}
					.postItem .heading date{
						font-size: 16px;
					}
					.postItem .heading .ttl{
						font-size: 30px;
						line-height: 1.53;
						margin-top: 15px;
					}

				.postItem .postCont{
				    position: relative;
					max-height: 400px;
				    overflow: hidden;
					padding-top: 35px;
				    padding-bottom: 85px;
					font-size: 16px;
					line-height: 2.125;
					letter-spacing: .1em;
					text-align: justify;
					text-justify: inter-ideograph;
					transition: .3s;
				}
				.postItem .postCont::before{
					content: '';
				    position: absolute;
				    bottom: 0;
				    left: 0;
				    width: 100%;
				    height: 70%;
				    /* background-image: linear-gradient(to top, #fff 20%, rgba(255, 255, 255, 0.58) 80%); */
				    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
				    transition: .3s;
				}
				.postItem .postCont.active{
					max-height: none;
				}
				.postItem .postCont.active::before{
					opacity: 0;
					visibility: hidden;
				}
					.postItem .postCont img{
						width: auto;
					}
					.postItem .postCont p{
						margin-top: 2.125em;
						margin-bottom: 2.125em;
					}
					.postItem .postCont p:first-of-type{ margin-top: 0; }
					.postItem .postCont p:last-of-type{ margin-bottom: 0; }
					.postItem .postCont p img{
						margin-top: 2.125em;
						margin-bottom: 2.125em;
					}
					.postItem .postCont p iframe{
						width: 100%;
					}
					.postItem .postCont a{
						color: #6E5A50;
						text-decoration: underline;
						transition: opacity .3s;
					}
					.postItem .postCont a:hover{
						opacity: .7;
					}
					.postItem .readmore a{
						width: 240px;
					    height: 60px;
					    font-size: 15px;
					    margin: -120px auto 0;
					    color: #fff;
					    background: #de8c9a;
					    cursor: pointer;
					}
					.postItem .readmore a::after{
						bottom: 44%;
						right: 18%;
						width: 5px;
						height: 5px;
						border-right: 1px solid #fff;
	    				border-bottom: 1px solid #fff;
					}

/* single only｜投稿ページのみ */
.blogSingle .postItem .postCont{
	max-height: none;
	padding-bottom: 0;
}
.blogSingle .postItem .postCont::before{
	content: none;
}
.blogSingle .backBtn{
	max-width: 260px;
	margin-top: 80px;
	margin-right: auto;
	margin-left: auto;
}
	.blogSingle .backBtn a{
		height: 60px;
		font-size: 16px;
		letter-spacing: .1em;
		text-indent: -.5em;
		color: #fff;
		background: #de8c9a;
	}
	.blogSingle .backBtn a::after{
		top: 50%;
	    right: 20%;
	    bottom: auto;
	    width: 6px;
	    height: 6px;
	    border-top: 1px solid #fff;
	    border-right: 1px solid #fff;
	}
@media screen and (max-width: 768px){
	.blogSingle .backBtn{
		max-width: 200px;
		margin-top: 40px;
	}
		.blogSingle .backBtn a{
			height: 50px;
			font-size: 14px;
			letter-spacing: .05em;
		}
		.blogSingle .backBtn a::after{
		    right: 20%;
		    width: 5px;
		    height: 5px;
		}
}

@media screen and (max-width: 768px){
	.blogSec{
		padding-top: 45px;
		padding-bottom: 0;
	}
		.listWrap{
		}
			.postList{
			}
				.postItem{
				}
				.postItem + .postItem{
					margin-top: 45px;
				}
					.postItem .heading{
						padding-bottom: 10px;
					}
						.postItem .heading date{
							font-size: 11px;
						}
						.postItem .heading .ttl{
							font-size: 15px;
							margin-top: 8px;
						}

					.postItem .postCont{
						padding-top: 15px;
						font-size: 12px;
						line-height: 1.8;
						letter-spacing: .05em;
					}
}

/* pager
---------------------------------------------- */
#pager{
	max-width: 900px;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 60px;
    font-size: 0;
}
    .page-numbers{
        display: inline-block;
        color: #d26478;
        font-size: 20px;
        line-height: 2;
        width: 40px;
        height: 40px;
        margin: 0 5px;
        border: 1px solid #de8c9a;
        /* margin: 5px; */
        box-sizing: border-box;
        transition: .3s ease-in-out background;
    }
    .page-numbers.current{
    	color: #fff;
        background: #de8c9a;
    }
    .page-numbers.next{
    	position: relative;
        width: 120px;
        font-size: 15px;
        line-height: 2.6;
        vertical-align: 3px;
        margin-left: 30px;
        text-indent: -.3em;
        white-space: nowrap;
    }
    .page-numbers.next::after{
    	content: '';
    	position: absolute;
    	display: inline-block;
    	top: 48%;
    	right: 1.3em;
    	width: 5px;
    	height: 5px;
    	border-top: 1px solid currentColor;
    	border-right: 1px solid currentColor;
    	transform: rotate(45deg) translateY(-50%);
    }
    .page-numbers.prev{
    	position: relative;
        width: 120px;
        font-size: 15px;
        line-height: 2.6;
        vertical-align: 3px;
        margin-right: 30px;
        text-indent: .3em;
        white-space: nowrap;
    }
    .page-numbers.prev::before{
    	content: '';
    	position: absolute;
    	display: inline-block;
    	top: 48%;
    	left: 1.3em;
    	width: 5px;
    	height: 5px;
    	border-bottom: 1px solid currentColor;
    	border-left: 1px solid currentColor;
    	transform: rotate(45deg) translateY(-50%);
    }
    .page-numbers:hover{
        color: #fff;
        background: #de8c9a;
    }

@media screen and (max-width: 768px){
	#pager{
	    margin-top: 40px;
	    margin-bottom: 40px;
	}
	.page-numbers{
        font-size: 15px;
        line-height: 1.5;
        width: 25px;
        height: 25px;
        margin: 0 8px;
    }
	.page-numbers.next{
		display: block;
        width: 80px;
        font-size: 12px;
        line-height: 1.9;
        vertical-align: 1px;
        margin: 15px auto 0;
        text-indent: -.5em;
    }
    .page-numbers.next::after{
    	right: .8em;
    }
    .page-numbers.prev{
    	display: block;
        width: 80px;
        font-size: 12px;
        line-height: 1.9;
        vertical-align: 1px;
        margin: 0 auto 15px;
        text-indent: .5em;
    }
    .page-numbers.prev::before{
    	left: .5em;
    }
}


/* postMenu
---------------------------------------------- */
.postMenu{
	max-width: 900px;
	margin-top: 80px;
}
/* single only｜投稿ページのみ */
.blogSingle .postMenu{
	margin-top: 100px;
}
	.recentlyBox{
		width: 57.7777778%;
	}
		.postMenu .ttl1{
			display: flex;
			align-items: center;
			height: 50px;
			font-size: 16px;
			font-weight: 600;
			padding-left: 1em;
			color: #fff;
			background: #8b7b73;
		}
		.postMenu .postList{
			padding-top: 35px;
		}
			.postMenu .postList .post{
				padding: 19px 1em;
				border-bottom: 1px solid #d8d8d8;
			}
			.postMenu .postList .post:first-of-type{
				padding-top: 0;
			}
				.postMenu .postList .post date{
					display: block;
					font-size: 14px;
					margin-bottom: 10px;
				}
				.postMenu .postList .post .post-link{
					font-size: 17px;
					line-height: 1.3;
				}

	.categoryBox{
		width: 35.555556%;
	}
		.categoryBox .cateList{
			margin-top: 33px;
			margin-bottom: 70px;
		}
			.categoryBox .cateList li{
				position: relative;
				padding-left: 1em;
			}
			.categoryBox .cateList li + li{
				margin-top: 22px;
			}
			.categoryBox .cateList li::before{
				content: '';
				position: absolute;
				top: 30%;
				left: 0;
				width: 6px;
				height: 6px;
				background: #de8c9a;
			}
				.categoryBox .cateList li a{
					font-size: 16px;
					letter-spacing: .1em;
					font-family: 'Yu Gothic',Yugothic,sans-serif;
				}

		.categoryBox .formBox{
			position: relative;
			margin-top: 30px;
		}
		.categoryBox .formBox::before{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 100%;
			background: #de8c9a;
			/* z-index: 10; */
		}
		.categoryBox .formBox::after{
			content: '';
			position: absolute;
			display: inline-block;
			top: 42%;
			right: 23px;
			width: 7px;
			height: 7px;
			border-top: 1px solid #fff;
			border-right: 1px solid #fff;
			transform: rotate(45deg);
			/* z-index: 15; */
		}
			.categoryBox .formBox .selectBox{
				-moz-appearance: none;
				-webkit-appearance: none;
				appearance: none;
				position: relative;
				width: 100%;
				height: 50px;
				font-size: 16px;
				letter-spacing: .1em;
				padding-left: 1em;
				border: 1px solid #d8d8d8;
				background: transparent;
				cursor: pointer;
				z-index: 1;
			}

@media screen and (max-width: 768px){
	.postMenu{
		margin-top: 40px;
	}
	/* single only｜投稿ページのみ */
	.blogSingle .postMenu{
		margin-top: 50px;
	}
		.recentlyBox{
			width: 100%;
			margin-bottom: 30px;
		}
			.postMenu .ttl1{
				height: 40px;
				font-size: 13px;
			}
			.postMenu .postList{
				padding-top: 20px;
			}
				.postMenu .postList .post{
					padding: 10px 1em;
				}
					.postMenu .postList .post date{
						font-size: 12px;
						margin-bottom: 8px;
					}
					.postMenu .postList .post .post-link{
						font-size: 14px;
					}

		.categoryBox{
			width: 100%;
		}
			.categoryBox .cateList{
				margin-top: 15px;
				margin-bottom: 35px;
			}
				.categoryBox .cateList li{
				}
				.categoryBox .cateList li + li{
					margin-top: 12px
				}
				.categoryBox .cateList li::before{
					width: 5px;
					height: 5px;
				}
					.categoryBox .cateList li a{
						font-size: 14px;
						letter-spacing: .05em;
					}

			.categoryBox .formBox{
				margin-top: 15px;
			}
			.categoryBox .formBox::before{
				width: 40px;
			}
			.categoryBox .formBox::after{
				top: 43%;
				right: 19px;
				width: 5px;
				height: 5px;
			}
				.categoryBox .formBox .selectBox{
					height: 40px;
					font-size: 14px;
					letter-spacing: .05em;
				}
}