:root {
	--list-eyecatch-aspect: 67.4%;
	--list-eyecatch-radius: 0.25em;
	--list-widedisplay-cell-gap: 1.2em;
}

/*list page*/
#indexhgroup {
    font-size: 1.0em;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 2.5em;
}
	#indexhgroup .labelcell {
		margin: 0;
	}
		#indexhgroup .labelcell > .inlabel {
			display: inline-block;
			margin: 0 0.25em;
		}
		#indexhgroup .labelcell.hashtags > .inlabel::before {
			content: "#";
			opacity: 0.3;
			margin-right: 0.1em;
		}
		#indexhgroup .labelcell:nth-child(1) {
			font-size: 2.0em;
			line-height: 1.6em;
			font-weight: 500;
			display: block;
		}
		#indexhgroup .labelcell:nth-child(1).font-en {
			font-size: 2.3em;
		}
		#indexhgroup .labelcell:nth-child(2) {
			font-size: 1.1em;
			font-weight: 400;
			line-height: 1.8em;
			margin-top: 0.5em;
			opacity: 0.7;
			display: block;
		}

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

/*articles*/
.articles {
	background-color: transparent;
	margin: 0 calc(0em - var(--list-widedisplay-cell-gap));
}
.articles.motionParent > *[data-isappended="true"] {
	opacity: 1.0;
}
	.articles li {
		width: 50%;
		position: relative;
		z-index: 0;
		padding: 0 var(--list-widedisplay-cell-gap);
		margin-bottom: calc(var(--list-widedisplay-cell-gap) *2.0);
	}
		.articles li a.im {
			display: block;
			position: relative;
			z-index: 0;
		}
		.articles li a.im::before {
			content: "";
			display: block;
			width: 100%;
			padding-top: var(--list-eyecatch-aspect);
			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: var(--list-eyecatch-radius);
		}
		.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 .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.5em;
	}
		.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;
		}

/*head*/
.articles li .head {
	display: block;
    font-size: 1.0em;
    margin-bottom: 0.3em;
}
	.articles li .date {
		font-family: var(--font-ge1);
		font-size: 0.95em;
		letter-spacing: 0.05em;
		line-height: 1em;
		opacity: 0.5;
		display: inline-block;
		vertical-align: baseline;
	}
	.articles li .category {
		display: inline-block;
		white-space: nowrap;
		font-size: 0.6em;
		padding: 0.5em 0.55em;
		padding-bottom: 0.5em;
		font-weight: 500;
		color: var(--alis-category-labelcolor);
		background-color: var(--alis-category-markcolor);
		text-shadow: var(--alis-category-textshadow);
		margin-right: 0.8em;
		vertical-align: middle;
		border-radius: 0.2em;
		max-width: 100%;
        overflow: hidden;
	}
	.articles li[data-islightnesscolor="1"] .category {
		color: rgba(0, 0, 0, 0.6);
		opacity: 1.0;
		text-shadow: none;
	}
	.articles li[data-islightnesscolor=""] .category {
	    color: #fff;
	    opacity: 1.0;
	}
	.articles[data-issinglecategorylist="1"] li .category {
		display: none;
	}
	.articles[data-issinglecategorylist="1"] li[data-colums="category"] .info-wrap .head {
		display: none;
	}

/*resp*/
@media only screen and (max-width: 640px){
	.articles {
        margin: 0 calc(0em - calc(var(--share-smp-padding)*0.4));
    }
	.articles li {
        padding: 0 calc(var(--share-smp-padding) *0.4);
        margin-bottom: var(--share-smp-padding);
    }
}
@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 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;
	width: 100%;
	display: table;
}
	.articles.textile li {
        display: table-row;
        text-align: left;
        padding: 0;
        margin: 0;
    }
		.articles.textile li > * {
            display: table-cell;
            padding: 1.0em 0;
            margin: 0;
            border-top: solid 2px #f7f7f7;
            vertical-align: middle;
        }
        .articles.textile li .date-wrap {
		    width: 7em;
		}
            .articles.textile li .date {
                font-family: var(--font-g1);
                font-size: 1.0em;
                font-weight: 400;
                line-height: 1.0em;
            }
        .articles.textile li .category-wrap {
            font-size: 1.0em;
		    text-align: center;
		    width: auto;
		    white-space: nowrap;
		    padding-left: 1em;
		}
            .articles.textile li .category {
                font-size: 0.7em;
                margin-right: 0;
                white-space: nowrap;
                max-width: 18em;
				overflow: hidden;
            }
	.articles[data-issinglecategorylist="1"] li[data-colums="category"] .category-wrap {
		display: none;
	}
	.articles.textile li .anker {
        font-size: 1.0em;
    }
		.articles.textile li .title {
            font-size: 1.0em;
			line-height: 1.5em;
			margin-top: 0em;
			margin-bottom: 0;
		}
@media only screen and (max-width:640px) {
	.articles.textile li .date-wrap {
        width: auto;
        padding-right: 0.6em;
    }
	.articles.textile li .date {
		font-size: 3.2vw;
	}
	.articles.textile li .category {
        font-size: 2.4vw;
        max-width: 22vw;
    }
    .articles.textile li .title {
        font-size: 3.5vw;
	}
}

/*control*/
.articles-control {
	display: none;
	margin-top: 1rem;
	margin-bottom: 3rem;
}
.articles-control[data-enable="true"] {
	display: block;
}
	.articles-control .bt.ankerlink {
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
@media only screen and (max-width:640px) {
	.articles-control .bt.ankerlink {
		width: 100%;
	}
}