@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
.top_post_date {
    color: #888;
    font-size: 14px;
}
.fv_post_ttl {
    font-size: 20px;
    line-height: 1.75em;
    margin: 30px 0;
}
.fv_post_right h2 a {
    color: #484848;
}
.fv_post_tag a {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    color: #f35528;
    letter-spacing: 0.1em;
    line-height: 2.5;
    border: 1px solid #f35528;
    border-radius: 30px;
    padding: 4px 15px;
    margin: 5px;
    white-space: nowrap;
}
.top_article {
    background: #fff;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
    padding: 30px 50px;
}
.top_article_wrap {
    width: min(1200px, 90%);
    margin: 60px auto;
}
.top_article_header {
    text-align: center;
}
.top_article_header p,
.top_article_header h2 {
    color: #FFA200;
}
.top_article_header h2 {
    font-family: "Jost", sans-serif;
    font-size: 45px;
    font-weight: 300;
	margin: 10px auto 0;
}
.top_article_header p {
    font-size: 18px;
	line-height: 1.5;
}
.top_article_content {
    display: flex;
    justify-content: start;
}
.article_content_ul {
    display: flex;
/*     gap: min(30px, 2vw); 線ひっすならいらない */
    transition: transform 0.5s ease;
}
.article_content_li {
    display: flex;
    flex-direction: column;
    width: min(380px, 25vw);
	
	padding: 0 20px;
	border-right: 1px solid #111;
}
.carousel-track > .article_content_li,
.article_content_li:last-of-type {
	border-right: none;
}
@media screen and (max-width: 782px) {
	.article_content_ul li {
		flex: 0 0 300px;
    	width: 300px;
	}
	.top_article {
		width: 100%;
		padding: 0;
	}
	.top_article_wrap {
		width: 90%;
		padding: 2em 0;
		/* LPではpadding削除 */
	}
	.top_article_content {
		justify-content: center;
	}
}


.btn_viewall {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    color: #FFA200;
    letter-spacing: 0.1em;
    display: flex;
    justify-content: center;
    border: 2px solid #FFA200;
    border-radius: 30px;
    width: 500px;
    margin: 60px auto;
    padding: 12px;
}
@media screen and (max-width: 782px) {
	.btn_viewall {
		width: 80%;
	}
}