#indexhgroup {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 2em;
}
	#indexhgroup .mainlabel {
		font-size: 1.6em;
		font-weight: 500;
		display: block;
	}
	#indexhgroup .sublabel {
		font-size: 0.6em;
		font-weight: 400;
		display: block;
		margin-top: 1.2em;
	}

[data-qprimary="hashtag"] #indexhgroup .mainlabel {
	font-size: 1.0em;
}
[data-qprimary="hashtag"] #indexhgroup .mainlabel i {
	opacity: 0.4;
	margin-right: 0.1em;
}

/**/
.articles {
    background-color: transparent;
    margin: 0 -1.2em;
}
.articles.motionParent > *[data-isappended="true"] {
	opacity: 1.0;
}
	.articles li {
		width: 50%;
		margin-bottom: 1.2em;
		position: relative;
		z-index: 0;
		padding: 0 1.2em;
	}
		.articles li a.im {
			display: block;
			position: relative;
			z-index: 0;
		}
		.articles li a.im::before {
			content: "";
			display: block;
			width: 100%;
			padding-top: 67.4%;
			top: 0;
			left: 0;
		}
		.articles li a.im img {
		    position: absolute;
		    z-index: 5;
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    top: 0;
		    left: 0;
		    border-radius: 0em;
		}
		.articles li a.im:hover > img {
			animation-name: brightOver;
		    animation-duration: 0.5s;
		    animation-timing-function: ease-out;
		    animation-iteration-count: 1;
		    animation-fill-mode: forwards;
		}
	.articles li .info-wrap {
		padding-top: 1em;text-align: left;
	}
	.articles li .date {
        font-family: var(--font-en);
		font-size: 1.0em;
	    letter-spacing: 0.05em;
		line-height: 1em;
        margin-bottom: 0.8em;
		opacity: 0.5;
		display: inline-block;
	    vertical-align: baseline;
	}
	.articles li .title {
		font-size: 1.06em;
		line-height: 1.6em;
		font-weight: 500;
        margin-bottom: 0;
	}
		.articles li .title > a {
			display: block;
			font-size: inherit;
			font-weight: inherit;
			color: inherit;
			line-height: inherit;
		}
	.articles li .content-wrap {
		overflow: hidden;
		width: 100%;
        margin-top: 0.8em;
	}
		.articles li .content {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			font-size: 0.78em;
			line-height: 1.7em;
			opacity: 0.68;
		}

/**/
.articles li .category {
    display: inline-block;
    font-size: 0.8em;
    padding: 0.6em 0.6em;padding-bottom: 0.5em;
    color: #fff;font-weight: 500;
    background-color: #cbcbcb;text-shadow: 0 0 1px rgba(0, 0, 0, 0.36);
    margin-right: 0.5em;
    vertical-align: baseline;
}
.articles li[data-category="cat6270595056962d91692b3f33"] .category {
    background-color: var(--cl-ac-blue);
}
.articles li[data-category="cat5047290100062d916a51cb64"] .category {
    background-color: var(--cl-ac-green);
}

@media only screen and (min-width:640px) and (max-width: 1800px) {
	.articles li {
		width: 33.33%;
	}
}
@media only screen and (min-width:1801px) {
	.articles li {
		width: 25%;
	}
}
@media only screen and (max-width:640px) {
    .articles {
        background-color: transparent;
        margin: 0 -0.8em;
    }
    .articles li {
        padding: 0 0.8em;
    }
    .articles li .title {
		font-size: 3.6vw;
		line-height: 1.6em;
		font-weight: 500;
        margin-bottom: 0;
	}
    .articles li .date {
		font-size: 3.5vw;
	}
}

/*textile*/
.articles.textile {
	margin: 0;
}
.articles.textile li {
	width: 100%;
	text-align: left;
	padding: 0;
	margin: 0 0 0.5em;
	border-top: solid 1px #F4F4F4;
}
	.articles.textile li > a {
		display: block;
		padding: 0;
	}
	.articles.textile li .category {
		font-size: 0.7em;
        font-weight: 400;
		padding: 0.5em 2em;
		background-color: #F4F4F4;
		color: #393939;
		margin-right: 0.8em;
	}
	.articles.textile li .date {
		display: block;
		font-family: var(--font-g1);
		font-size: 1.1em;
		font-weight: 400;
		line-height: 1.0em;
		margin: 0em;
        margin-right: 0.6em;
		color: #393939;
	}
	.articles.textile li .title {
		display: block;
		line-height: 1.em;
		margin-top: 0em;
		margin-bottom: 0;
		color: var(--cl-pageink-link);
	}
	.articles.textile li .info-wrap {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 0.5em;
	}
	
/*control*/
.list-control {
	display: none;
	margin-top: 1rem;
	margin-bottom: 3rem;
}
.list-control[data-enable="true"] {
	display: block;
}
	.list-control a.my-btn {
        display: inline-block;
        width: 100%;
        max-width: 200px;
    }
@media only screen and (max-width:640px) {
    .list-control a.my-btn {
        max-width: none;
    }
}