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

/* メイン（CMS）
------------------------------------------ */
main#mainArea.index .mainInner{
	padding-top: clamp(30px, 50 * (100vw - 1024px) / 896 + 30px, 80px);
	padding-bottom: clamp(30px, 50 * (100vw - 1024px) / 896 + 30px, 80px);
	padding-left: clamp(30px, 50 * (100vw - 1024px) / 896 + 30px, 80px);
	padding-right: clamp(30px, 50 * (100vw - 1024px) / 896 + 30px, 80px);
}
main#mainArea.index h1{
	font-size: 1.6rem;
}
main#mainArea.index h1 span{
	display: block;
	margin-bottom: 1em;
}
main#mainArea.index h1 span:last-child{
	margin-bottom: 0;
}
main#mainArea.index .articleArea{
	display: flex;
	flex-wrap: wrap;
}
main#mainArea.index article:nth-of-type(4n){
	margin-right: 0;
}
main#mainArea.index article{
	width: calc((100% - 30px * 3) / 4);
	overflow: hidden;
	margin-right: 30px;
	margin-bottom: 30px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr;
	line-height: 1.5;
	grid-row-gap: 30px;
	background: #F8F8F8;
}
main#mainArea.index article .postImageArea{
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
main#mainArea.index article .postContentArea{
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
main#mainArea.index article .postLinkArea{
	grid-row: 3 / 4;
	grid-column: 1 / 2;
}
/* イメージ部分 */
main#mainArea.index article .postImageArea a{
	display: block;
	padding-top: 66.07%;
	overflow: hidden;
	position: relative;
}
main#mainArea.index article .postImageArea a .postImageInner{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
}
main#mainArea.index article .postImageArea a img{
	display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
main#mainArea.index article .postImageArea a .overlay{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	transition: 0.2s;
}
main#mainArea.index article .postImageArea a:hover .overlay{
	background: rgba(0, 0, 0, 0.35);
}
/* コンテンツ部分 */
main#mainArea.index .postContentArea{
	color: #333;
}
main#mainArea.index .postContentArea header.post-header{
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}
main#mainArea.index .postContentArea h2.post-title{
	font-size: 1.3rem;
	line-height: 1.8;
}
main#mainArea.index .postContentArea .post-comment{
	font-size: 1.1rem;
	line-height: 1.8;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 25px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
main#mainArea.index .postContentArea ul.post-term{
	font-size: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	margin-top: 22px;
	line-height: 1.8;
	color: rgba(0,0,0,0.3);
	padding-left: 20px;
    padding-right: 20px;
}
main#mainArea.index .postContentArea ul.post-term li::before{
	content: "/";
	margin-left: 5px;
	margin-right: 5px;
}
main#mainArea.index .postContentArea ul.post-term li:first-child::before{
	content: none;
}
main#mainArea.index .postContentArea ul.post-term li a{
	color: rgba(0,0,0,0.3);
	transition: 0.2s;
}
main#mainArea.index .postContentArea ul.post-term li a:hover{
	color: rgba(0,0,0,0.6);
}
/* ボタン部分 */
main#mainArea.index .postLinkInner{
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}
main#mainArea.index .postLinkArea a{
	display: block;
	background: rgba(51,51,51,1.00);/* #cccccc */
	width: 100%;
	height: 35px;
	color: rgba(255, 255, 255, 1.00);
	transition: 0.2s;
	position: relative;
}
main#mainArea.index .postLinkArea a span{
	display: block;
	position: absolute;
	top: calc(50% + 1px);
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	font-size: 0.9rem;
}
main#mainArea.index .postLinkArea a:hover{
	background: rgba(51,51,51,0.8);
	color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {
main#mainArea.index .mainInner{
	padding: 15px 15px 15px 15px;
}
main#mainArea.index h1{
	margin-top: 40px;
    margin-bottom: 15px;
	font-size: 1.3rem;
}
main#mainArea.index article{
	width: calc((100% - 2px * 1) / 2);
	overflow: hidden;
	margin-right: 2px;
	margin-bottom: 10px;
	grid-row-gap: 10px;
}
main#mainArea.index article:nth-of-type(4n){
	margin-right: 2px;
}
main#mainArea.index article:nth-of-type(2n){
	margin-right: 0;
}
main#mainArea.index .postContentArea header.post-header{
	padding-left: 10px;
	padding-right: 10px;
}
main#mainArea.index .postContentArea .post-comment{
	font-size: 9px;
	line-height: 1.5;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
}
main#mainArea.index .postContentArea ul.post-term{
	font-size: 9px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	line-height: 1.5;
}
main#mainArea.index .postContentArea h2.post-title{
	font-size: 1rem;
	line-height: 1.5;
}
main#mainArea.index .postLinkArea a{
	height: 25px;
}
main#mainArea.index .postLinkArea a span{
	font-size: 0.8rem;
}
main#mainArea.index .postLinkInner{
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
}