@charset "utf-8";


/** アーカイブ＞ヒーローエリア
---------------------------------------------------------*/
section#hero {
    height: 450px;
}
section#hero .wrap {
	padding-top: var(--m4);
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** アーカイブ＞一覧
---------------------------------------------------------*/
section#list {
    padding-block: var(--m10) var(--m8);
    background: radial-gradient(circle at center top, var(--pale) 0%, var(--pale) 21%, var(--light) 100%);
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	/** アーカイブ：ヒーロー固定高さを解除 */
	section#hero {
		height: auto;
	}
	section#list {
		padding-block: 0 var(--m4);
	}
}




/** ニュースリスト   
-------------------------------------------------------------------- */
section.list .block {
    padding-block: var(--m3);
    display: flex;
    align-items: flex-start;
    gap: var(--m4);
    position: relative;
}
section.list .block::after {
    display: block;
    width: calc(100% + var(--m4));
    height: 100%;
    background: var(--black);
    position: absolute;
    left: calc(-1 * var(--m2));
    top: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

section.list .block + .block {
    border-top: 1px solid var(--light);
}
section.list .date {
    flex: 0 0 120px;
    padding-block: 0.2lh;
    padding-inline: 1em;
    border: 1px solid currentColor;
    font-size: var(--date-size);
    line-height: 1.5;
    letter-spacing: 0.2em;
}
section.list .title {}

@media (any-hover: hover) {
    section.list .block:hover {
        color: white;
    }
    section.list .block::after {
        transition: var(--transition);
    }
    section.list .block:hover::after {
        opacity: 1;
    }
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section.list .block {
		padding-block: var(--m2);
        display: block;
    }
    section.list .date {
        width: fit-content;
		margin-bottom: 0.5lh;
    }
}


/** ページネーション */
.pagination {
	padding-block: var(--m2);
	padding-inline: var(--m2);
}
.pagination .page-num {}
.pagination .pagers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--m);
}
.pagination .pager {
	display: grid;
	place-items: center;
	
	width: var(--pager-size, 1.5lh);
	height: var(--pager-size, 1.5lh);

	color: var(--pager-color, black);
	text-align: center;
	font-size: 120%;
	font-weight: 700;
}
.pagination span.pager {
	box-shadow: inset 0 0 0 1px currentColor;
}
.pagination a.pager:not(.prev, .next) {
	background: var(--pager-color, black);
	color: var(--white, white);
}
.pagination .pager.current {}
.pagination .pager:is(.prev, .next) {}
.pagination .pager.prev {}
.pagination .pager.next {}

@media (any-hover: hover) {
	.pagination a.pager:not(.prev, .next):hover {
		background: var(--green);
        color: var(--black);
	}
	.pagination .pager:is(.prev, .next):hover {
		color: var(--green);
	}
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {

	/** アーカイブ：ページネーションを折り返し */
	.pagination {
		padding-top: var(--m2);
		padding-inline: 0;
	}
	.pagination .pagers {
		padding-top: var(--m4);
		flex-wrap: wrap;
		gap: var(--m2);
		position: relative;
	}
	.pagination .pager {
		--pager-size: 1.3lh;
		font-size: 100%;
		font-weight: 400;
	}
	.pagination .pagers::before {
		display: block;
		width: 100%;
		border-top: 1px solid currentColor;
		position: absolute;
		left: 0;
		top: var(--m3);
	}
	.pagination .pager:is(.prev, .next) {
		position: absolute;
		top: 0;
	}
	.pagination .pager.prev {
		left: 0;
	}
	.pagination .pager.next {
		right: 0;
	}
}





/** シングル＞ヒーローエリア
---------------------------------------------------------*/
body#post section#hero {
    height: auto;
	min-height: unset;
}

body#post .label {
    font-size: calc(var(--label-size) * 0.5);
}
body#post .tagline {
    font-size: calc(var(--tagline-size) * 0.75);
}
body#post .date {
    font-size: var(--date-size);
    color: white;
    letter-spacing: 0.2em;;
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	body#post section#hero .wrap {
		padding-top: var(--m2);
	}
	body#post .tagline {
		font-size: var(--headline-size);
	}
}