/*===============================================================================
***一覧ページ
================================================================================*/
.arc-post{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.arc-post__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	width: 100vw;
}
.arc-post__bgi img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/*===============================
* タイトル
* =================================*/
.arc-post__title{
	margin-bottom: var(--g-sec--sm);
}

/*===============================
* カラム
* =================================*/
.arc-post__cols{
	display: flex;
	gap: var(--g-sec--sm);
	justify-content: space-between;
	flex-wrap: wrap;
}
@media (min-width: 600px){
	.arc-post__cols{
		flex-wrap: nowrap;
	}
}

/*===============================
* メニュー
* =================================*/
.arc-post__menu{
	display: flex;
	flex-direction: row;
	gap: 1.5rem 1rem;
	width: 100%;
}
@media (min-width: 600px){
	.arc-post__menu{
		flex-direction: column;
		max-width: fit-content;
	}
}
.arc-post__menu a{
	--icon-size: .75rem;
	position: relative;
	display: inline-block;
	flex-grow: 1;
	padding: 0 calc( var(--icon-size) * 2 );
	text-align: center;
	border-radius: 99999px;
	overflow: hidden;
	border: 1px solid var(--c-gray);
	background: var(--c-light);
	font-size: 1.25rem;
	font-weight: var(--fw-lg);
	color: var(--c-gray);
}
@media (min-width: 600px){
	.arc-post__menu a{
		flex-grow: 0;
		text-align: left;
		border-radius: 0;
		overflow: auto;
		border: 0;
		background: transparent;
	}
}
.arc-post__menu a:is(:hover, :focus), 
.arc-post__menu a.is-active{
	color: var(--c-dark);
}

/* アイコン：グラデ */
.arc-post__menu span{
	position: absolute;
	top: 50%;
	left: auto;
	transform: translate(-75%, -40%);
	content: "";
	display: block;
	width: var(--icon-size);
	height: var(--icon-size);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(180deg, #DC1B80 0%, #E3AA6C 100%);
	opacity: 0;
	transition: var(--ani-t--normal) ease-out;
}
@media (min-width: 600px){
	.arc-post__menu span{
		left: 0;
		transform: translate(0%, -50%);
	}
}

/* アイコン：白 */
.arc-post__menu span::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	content: "";
	display: block;
	width: 50%;
	height: 50%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--c-light);
	opacity: 0;
	transition: var(--ani-t--normal) ease-out;
}
.arc-post__menu a:is(:hover, :focus) span,
.arc-post__menu a.is-active span, 
.arc-post__menu a:is(:hover, :focus) span::before,
.arc-post__menu a.is-active span::before{
	opacity: 1;
}

/*===============================
* 記事一覧
* =================================*/
.arc-post__list-wrap{
	max-width: 800px;
	width: 100%;
}
.arc-post__item{
	--gap-y: var(--g-sec--sm);
	padding-bottom: calc( var(--gap-y) / 2 );
	border-bottom: 1px solid var(--c-gray);
}
.arc-post__item:not(:last-of-type){
	margin-bottom: calc( var(--gap-y) / 2 );
}

.arc-post__link{
	--icon-size: 1.5rem;
	--c-current: var(--c-dark);
	position: relative;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
	padding-right: calc( var(--icon-size) + 0.5em * 2 );
	font-weight: var(--fw-lg);
	color: var(--c-current);
	transition: var(--ani-t--normal) ease-out;
}
.arc-post__link:is(:hover, :focus){
	--c-current: var(--c-main);
	color: var(--c-current);
	opacity: .7;
}

/* 円 */
.arc-post__icon{
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%, -50%);
	content: "";
	width: var(--icon-size);
	height: var(--icon-size);
	border: 1px solid var(--c-current);
	border-radius: 50%;
	background: var(--c-light);
	overflow: hidden;
	transition: var(--ani-t--normal) ease-out;
}
.arc-post__link:is(:hover, :focus) .arc-post__icon{
	transform: translate(0%, -50%)
}
.arc-post__icon::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	content: "→";
	color: var(--c-current);
	font-size: calc( var(--icon-size) / 2 );
	transition: var(--ani-t--normal) ease-out;
}

/* 日付け */
.arc-post__date{
	max-width: fit-content;
	min-width: fit-content;
}

/* ラベル */
.arc-post__label{
	max-width: fit-content;
	min-width: fit-content;
	padding: 0 .75rem;
	text-align: center;
	background: var(--c-light);
	border-radius: var(--bd-r--xs);
	overflow: hidden;
	border: 1px solid var(--c-main);
	font-size: clamp(0.75rem, 0.572rem + 0.48vw, 1rem);
	color: var(--c-main);
}

.arc-post__secondaryTitle{
	width: 100%;
}



/*===============================================================================
***フロントページ
================================================================================*/
.front-post__item{
	display: flex;
	gap: .25rem 1rem;
	flex-wrap: wrap;
	font-size: .75rem;
	font-weight: var(--fw-lg);
}
.front-post__head{
	display: flex;
	gap: 2rem;
}
.front-post__date{
	color: var(--c-gray--light);
}
.front-post__link{
	color: var(--c-dark);
	text-decoration: underline;
}